deep-stack/wallet-connect-web-examples
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
0f86f6bedb
wallet-connect-web-examples/wallets/react-wallet-auth
History
Ben Kremer c032f54570
chore(deps): update to auth-client@0.1.3 for auth dapp and wallet (#53) 
* chore(deps): update auth-client to 0.1.3

* fix: adds metadata for dapp

* chore(deps): update wallet to auth-client@0.1.3
2022-09-06 11:54:45 +02:00
..
public feat/add auth demos (#49) 2022-09-02 12:34:03 +03:00
src Remove session from nav for auth (#51) 2022-09-05 10:50:21 +03:00
.env.local.example feat/add auth demos (#49) 2022-09-02 12:34:03 +03:00
.eslintrc.json feat/add auth demos (#49) 2022-09-02 12:34:03 +03:00
.gitignore feat/add auth demos (#49) 2022-09-02 12:34:03 +03:00
.prettierrc.json feat/add auth demos (#49) 2022-09-02 12:34:03 +03:00
next-env.d.ts feat/add auth demos (#49) 2022-09-02 12:34:03 +03:00
next.config.js feat/add auth demos (#49) 2022-09-02 12:34:03 +03:00
package-lock.json chore(deps): update to auth-client@0.1.3 for auth dapp and wallet (#53) 2022-09-06 11:54:45 +02:00
package.json chore(deps): update to auth-client@0.1.3 for auth dapp and wallet (#53) 2022-09-06 11:54:45 +02:00
README.md feat/add auth demos (#49) 2022-09-02 12:34:03 +03:00
tsconfig.json feat/add auth demos (#49) 2022-09-02 12:34:03 +03:00

README.md

Wallet Example (React, Typescript, Ethers, NextJS, Cosmos)

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.

Useful links

🔗 Live wallet app - https://react-wallet.walletconnect.com
🔗 Live dapp - https://react-app.walletconnect.com
📚 WalletConnect docs - https://docs.walletconnect.com/2.0

Getting started

Example is built atop of NextJS 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 and obtain a project id

  2. Add your project details in WalletConnectUtil.ts file

  3. Install dependencies yarn install or npm install

  4. Setup your environment variables

cp .env.local.example .env.local

Your .env.local now contains the following environment variables:

  1. Run yarn dev or npm run dev to start local development

Navigating through example

  1. Initial setup and initializations happen in _app.ts file
  2. WalletConnect client, ethers and cosmos 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 work based on request method and returns formated json rpc result data that can be then used for WallteConnect client responses

Preview of wallet and dapp examples in action

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