History

Ben Kremer 55cdfbf6a6 docs: adds SDK compatibility notices in provider example readmes		2022-05-31 10:48:33 +02:00
..
public	feat: sets up react-dapp-v2-with-web3js	2022-02-22 11:55:16 +01:00
src	fix(dapps): normalize addresses to lowercase when validating signatures	2022-04-08 17:09:37 +02:00
.env.local.example	docs(with-web3js): updates example and top-level readmes	2022-02-23 11:07:21 +01:00
.gitignore	feat: sets up react-dapp-v2-with-web3js	2022-02-22 11:55:16 +01:00
.prettierrc	feat: sets up react-dapp-v2-with-web3js	2022-02-22 11:55:16 +01:00
images.d.ts	feat: sets up react-dapp-v2-with-web3js	2022-02-22 11:55:16 +01:00
LICENSE	feat: sets up react-dapp-v2-with-web3js	2022-02-22 11:55:16 +01:00
package.json	chore(deps): upgrade dapp examples to 2.0.0-beta.26	2022-03-29 11:51:10 +02:00
README.md	docs: adds SDK compatibility notices in provider example readmes	2022-05-31 10:48:33 +02:00
tsconfig.json	feat: sets up react-dapp-v2-with-web3js	2022-02-22 11:55:16 +01:00
yarn.lock	fix(with-web3js): resolves EthereumProvider type error fixed by 2.0.0-beta.26	2022-03-29 12:12:05 +02:00

README.md

React dApp (with v2 EthereumProvider + web3.js)

⚠️ This provider-based example is currently reliant on the deprecated 2.0.0-beta.26 SDK. ⚠️

This example will be updated to be compatible with the latest v2 SDK (2.0.0-beta.100+) in due time. In the meantime, please use the up-to-date standalone client example.

🔗 Live dapp demo - https://react-dapp-v2-with-web3js.vercel.app
🔗 Live wallet demo - https://react-wallet.walletconnect.com/
📚 WalletConnect v2 Docs - https://docs.walletconnect.com/2.0

Overview

This is an example implementation of a React dApp (generated via create-react-app) using the v2 EthereumProvider together with web3.js to:

handle pairings
manage sessions
send JSON-RPC requests to a paired wallet

Running locally

Install the app's dependencies:

yarn

Set up your local environment variables by copying the example into your own .env.local file:

cp .env.local.example .env.local

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

REACT_APP_PROJECT_ID (placeholder) - You can generate your own ProjectId at https://cloud.walletconnect.com
REACT_APP_INFURA_ID (placeholder) - You can generate your own Infura ID via https://infura.io/
REACT_APP_RELAY_URL (already set)

Develop

yarn start

Test

yarn test

Build

yarn build