deep-stack/wallet-connect-web-examples
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
c4b93e771a
wallet-connect-web-examples/wallets/react-wallet-v2
History
Ilja c6365f206f Added link to dapp
2022-02-18 15:22:50 +02:00
..
public Add more main / test nets 2022-02-18 14:17:59 +02:00
src Add readme 2022-02-18 14:53:57 +02:00
.eslintrc.json Set up dev tooling 2022-02-03 11:24:35 +02:00
.gitignore scope wallet examples under one folder 2022-02-03 11:14:39 +02:00
.prettierrc.json Set up dev tooling 2022-02-03 11:24:35 +02:00
next-env.d.ts scope wallet examples under one folder 2022-02-03 11:14:39 +02:00
next.config.js Set up dev tooling 2022-02-03 11:24:35 +02:00
package.json Fixes for new nextjs version 2022-02-18 13:30:50 +02:00
README.md Added link to dapp 2022-02-18 15:22:50 +02:00
tsconfig.json Add pairing logic 2022-02-07 15:24:15 +02:00
yarn.lock Fixes for new nextjs version 2022-02-18 13:30:50 +02:00

README.md

WalletConnect React Wallet Example

⚠️ Wallet should only be used as a refference example & for development purposes
🔗 Live wallet app - https://react-wallet-v2.vercel.app
🔗 Live dapp app - https://react-dapp-v2.vercel.app
📚 WalletConnect docs - https://docs.walletconnect.com/2.0

Example wallet implementation using WalletConnect, Ethers, React and TypeScript

Getting started

This example is built atop of NextJS in order to abstract complexity of setting up bundlers, routing etc.. So there are only few steps you need to follow in order to set everything up

  1. Go to WalletConnect Cloud and obtain a project id
  2. Add your project details in WalletConnectUtil.ts file.
  3. [Optional] To use project id as environment variable follow NextJS environment docs
  4. Install dependencies yarn install or npm install
  5. Run yarn dev or npm run dev to start local development

Navigating through this example

  1. Initial setup and initializations happen in _app.ts file.
  2. WalletConnect client and ethers wallets are initialized in useInitialization.ts hook
  3. Subscription and handling of WalletConnect events happens in useWalletConnectEventsManager.ts hook, that oppens related Modal views and passes them all necesary data.
  4. Modal views are responsible for data display and handling approval or rejection actions.
  5. Uppon approval or rejection modals pass request data to RequestHandlerUtil.ts that performs all necesary ethers work based on request method and returns formated json rpc result data that can be then used for WallteConnect client responses.