deep-stack/wallet-connect-web-examples
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
55cdfbf6a6
wallet-connect-web-examples/wallets/react-wallet-v2
History
Pedro Gomes 954831538d
Beta 100 (#27) 
* update deps

* revert react dep updates

* chore: update deps to beta.50

* fix: get dapp running again up to Client.connect()

* save progress

* feat(debug): sets up a debug peerClient as responder

* refactor: remove more hardcoded example connect params

* fix: gets `checkPersistedState` working again

* fix: gets client.disconnect + effects working again

* feat: integrates `session_update` handling with namespaces

* fix: remove hardcoded `chains`

* stash progress

* Establish session

* save progress - established session with example dapp

* refactor: rewrite namespace helpers to handle `requiredNamespaces` (#23)

* fix: re-enables restoring persisted session

* refactor: remove debug peerClient code

* fix: re-enables restoring persisted pairings

* Save progress

* fix: re-enables pairing modal, connecting from existing pairing

* Update modals to handle new payloads

* fix(types): fix Metadata typing

* chore(deps): upgrade to beta.53

* refactor: adjusts event handler args for beta.53 `session_update`

* stash

* fix: adds missing keys for `DEFAULT_EIP155_EVENTS` enum

* stash

* chore: update comment for client.request typing FIXME

* feat: integrate beta.54

* feat: integrate beta.55, removes FIXME comments for client.request types

* chore: clean up unused import

* fix: log session_ping event

* fix: log incoming `session_event`

* chore: upgrade client@2.0.0-beta.55 -> sign-client@2.0.0-beta.56

* chore: integrate beta.57

* New beta changes (#24)

* smal lchange

* fix types

* Add package info

* format empty methods / events

* Update deps

* adjust styles

* attempt ios layout fix

* Revert "attempt ios layout fix"

This reverts commit f0176f2ef52f338980ee54e75a767b3d452733f2.

* beta.54

* fix build

* Update to beta 55

* Add todos

* update wallet to beta 56

* Update mumbai rpc add logger

* update to beta 57

* chore: adds note on beta.100 compatibility

* plock

* beta.58

* beta.100;

Co-authored-by: Ilja <idaderko@gmail.com>
Co-authored-by: Ben Kremer <ben@walletconnect.com>
Co-authored-by: Ilja <IljaDaderko@users.noreply.github.com>
2022-05-30 11:46:15 +02:00
..
public Beta 100 (#27) 2022-05-30 11:46:15 +02:00
src Beta 100 (#27) 2022-05-30 11:46:15 +02:00
.env.local.example Revert "Revert "Cosmos signature verification (#6)"" 2022-04-04 13:49:32 +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 CosmosUtil for wallet creation 2022-02-25 15:19:39 +02:00
package.json Beta 100 (#27) 2022-05-30 11:46:15 +02:00
README.md Revert "Revert "Cosmos signature verification (#6)"" 2022-04-04 13:49:32 +02:00
tsconfig.json Add pairing logic 2022-02-07 15:24:15 +02:00
yarn.lock Beta 100 (#27) 2022-05-30 11:46:15 +02: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

Eexample 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