Skip to content

Commit

Permalink
docs(react-wallet-chat): update readme
Browse files Browse the repository at this point in the history
  • Loading branch information
bkrem committed Oct 28, 2022
1 parent 1922c48 commit 2b78cfd
Showing 1 changed file with 8 additions and 20 deletions.
28 changes: 8 additions & 20 deletions wallets/react-wallet-chat/README.md
Original file line number Diff line number Diff line change
@@ -1,24 +1,22 @@
# Wallet Example (React, Typescript, Ethers, NextJS, Cosmos)
# Chat Wallet Example (React, Typescript, Ethers, NextJS)

This example aims to demonstrate basic and advanced use cases enabled by WalletConnect. Please only use this for refference and development purposes, otherwise you are at risk of loosing your funds.
This example aims to demonstrate use cases enabled by the WalletConnect Chat Alpha. Please only use this for reference and development purposes, otherwise you are at risk of losing your funds.

# Useful links

🔗 Live wallet app - https://react-wallet.walletconnect.com <br />
🔗 Live dapp - https://react-app.walletconnect.com <br />
🔗 Chat Wallet Deployment - https://react-wallet-chat.vercel.app/ <br />
🔗 Chat Wallet Peer Deployment - https://react-wallet-chat-peer.vercel.app/ <br />
📚 WalletConnect docs - https://docs.walletconnect.com/2.0

## Getting started

Eexample is built atop of [NextJS](https://nextjs.org/) in order to abstract complexity of setting up bundlers, routing etc. So there are few steps you need to follow in order to set everything up
The example is built atop of [NextJS](https://nextjs.org/) in order to abstract complexity of setting up bundlers, routing etc. So there are few steps you need to follow in order to set everything up

1. Go to [WalletConnect Cloud](https://cloud.walletconnect.com/sign-in) and obtain a project id

2. Add your project details in [WalletConnectUtil.ts](https://github.com/WalletConnect/web-examples/blob/main/wallets/react-wallet-v2/src/utils/WalletConnectUtil.ts) file
2. Install dependencies via `yarn`

3. Install dependencies `yarn install` or `npm install`

4. Setup your environment variables
3. Setup your environment variables

```bash
cp .env.local.example .env.local
Expand All @@ -29,16 +27,6 @@ Your `.env.local` now contains the following environment variables:
- `NEXT_PUBLIC_PROJECT_ID` (placeholder) - You can generate your own ProjectId at https://cloud.walletconnect.com
- `NEXT_PUBLIC_RELAY_URL` (already set)

5. Run `yarn dev` or `npm run dev` to start local development

## Navigating through example

1. Initial setup and initializations happen in [_app.ts](https://github.com/WalletConnect/web-examples/blob/main/wallets/react-wallet-v2/src/pages/_app.tsx) file
2. WalletConnect client, ethers and cosmos wallets are initialized in [useInitialization.ts ](https://github.com/WalletConnect/web-examples/blob/main/wallets/react-wallet-v2/src/hooks/useInitialization.ts) hook
3. Subscription and handling of WalletConnect events happens in [useWalletConnectEventsManager.ts](https://github.com/WalletConnect/web-examples/blob/main/wallets/react-wallet-v2/src/hooks/useWalletConnectEventsManager.ts) hook, that oppens related [Modal views](https://github.com/WalletConnect/web-examples/tree/main/wallets/react-wallet-v2/src/views) and passes them all necesary data
4. [Modal views](https://github.com/WalletConnect/web-examples/tree/main/wallets/react-wallet-v2/src/views) are responsible for data display and handling approval or rejection actions
5. Uppon approval or rejection modals pass request data to [RequestHandlerUtil.ts](https://github.com/WalletConnect/web-examples/blob/main/wallets/react-wallet-v2/src/utils/RequestHandlerUtil.ts) that performs all necesary work based on request method and returns formated json rpc result data that can be then used for WallteConnect client responses
5. Run `yarn dev` to start local development

## Preview of wallet and dapp examples in action

https://user-images.githubusercontent.com/3154053/156764521-3492c232-7a93-47ba-88bd-2cee3f8366d4.mp4

0 comments on commit 2b78cfd

Please sign in to comment.