Easy Web3Modal with React

Metamask and WalletConnect baked in:

• npm install or yarn install
• npm start or yarn start
• That's it!
• Add more Providers

Using with ethers

Ethers provider is by default. To use the connected provider, import Web3Context from the web3 directory present inside src directory.

import React, { useContext } from 'react';
import { Web3Context } from './web3';

const { account, provider } = useContext(Web3Context);

To initialize an ethers Contract object

const daiContract = new ethers.Contract(daiAddress, daiAbi, provider);

To connect a signer to the above Read-only contract

const signer = await provider.getSigner();
daiContract.connect(signer);

Or to initialize a Contract with signer

const daiWithSigner = new ethers.Contract(daiAddress, daiAbi, provider.getSigner());

For more details, please refer to ethers documentation.

Using with web3

You can wrap the provider received from Web3Context with web3js and use it as below

import React, { useContext } from 'react';
import { Web3Context } from './web3';

const { account, provider } = useContext(Web3Context);
const web3 = new Web3(provider);

For more details, please refer to web3js documentation

Related efforts

If you are looking for a full-suite of Ethereum dapp with Smart contracts and other features, please check out the below links:

• create-eth-app by PaulRBerg
• scaffold-eth by Austin Griffith