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