A bare minimum dapp front-end for your decentralized web3 application. Create a one click dapp, bootstrapped with Create React App template.
- Simple, easy and fast
- Ready to use dapp with web3 login feature
- Includes only the bare minimum dependencies, so your app is not bloated
- Uses Web3modal under the hood, so you can add other providers easily with minimum efforts
- Reloads automatically on account and network changes
Bootstrap your dapp using Create React App by using the bm-dapp template
npx create-react-app my-app --template bm-dapp
yarn start
The app runs in development mode at http://localhost:3000. Clicking the Connect Web3
button will pop up Metamask by default(if web3 is enabled). For adding other providers, check Web3Modal Provider Options
By default, ethers provider is used by bm-dapp. 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 ethers
documentation.
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 web3js
documentation
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