deep-stack/wallet-connect-web-examples
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
d774f52135
wallet-connect-web-examples/wallets/react-wallet-v2
History
Jonathan Conn d774f52135
Feat/examples upgrade (#153) 
* Added UI infastructure to support chain switching, need to update the session to swap chains

* Fixed type of chainId, string -> number

* Added helper method to find full chainname ex/ cosmoshub-4 -> cosmons:cosmoshub-4. Added a method updateSignClientChainId to emit a new update with the new namespace for the respected chain switch

* Added checks to ensure no dup accounts get added to namespaces during chainswitching from chain A->B->A for ex

* Fixed chainId type, eip155 uses number but the other chains use strings, making string the default type for chainId

* Update wallets/react-wallet-v2/src/utils/WalletConnectUtil.ts

Co-authored-by: Ben Kremer <ben@walletconnect.com>

* Switched the way account card components are generated in index page, removed unnecessary helper fx

* Fixed the chain changed event by updating the session if the chainId namespace does not currently exist, then emitting the correct chainChanged event on the same session

---------

Co-authored-by: Ben Kremer <ben@walletconnect.com>
2023-05-10 10:01:36 -04:00
..
public Add Tezos Support (#127) 2023-03-31 10:35:53 +02:00
src Feat/examples upgrade (#153) 2023-05-10 10:01:36 -04:00
.env.local.example Add Tezos Support (#127) 2023-03-31 10:35:53 +02:00
.eslintrc.json Set up dev tooling 2022-02-03 11:24:35 +02:00
.gitignore Beta 100 (#27) 2022-05-30 11:46:15 +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 feat: adds Elrond support (#67) 2022-10-31 11:21:33 +01:00
package.json chore: updates @walletconnect deps (#157) 2023-05-09 16:51:32 +03:00
README.md docs(readme): tweaks readmes to point out wallet sign v1+v2 support 2022-11-09 16:42:53 +01:00
tsconfig.json Add pairing logic 2022-02-07 15:24:15 +02:00
yarn.lock chore: updates @walletconnect deps (#157) 2023-05-09 16:51:32 +03:00

README.md

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

This example aims to demonstrate basic and advanced use cases enabled by WalletConnect's Sign SDK.

The wallet implements Sign v1 and v2 side-by-side, to serve as a reference for wallet developers aiming to support both major versions for backwards compatibility. All files containing code for the legacy v1 implementation are prefixed with Legacy....

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
🔗 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 opens related Modal views and passes them all necessary data
  4. Modal views are responsible for data display and handling approval or rejection actions
  5. Upon approval or rejection, modals pass the request data to RequestHandlerUtil.ts that performs all necessary work based on the request method and returns formated json rpc result data that can be then used for WalletConnect client responses

Preview of wallet and dapp examples in action

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