Mint Club
Search…
Connect Wallet (React.js)
Useful code snippets for wallet implementation on React.js
For a complete example, check Code Sandbox.

1. Installing dependencies

First, install necessary dependencies for your react project.
yarn add @web3-react/core ethers

2. Setting up @web-react Root Provider

Edit your App.js file.
import { Web3ReactProvider } from '@web3-react/core';
import { BrowserRouter as Router } from 'react-router-dom';
import { ethers } from 'ethers';
import Routes from 'routes'; // your custom Routes.js file
const POLLING_INTERVAL = 12000;
const getLibrary = (provider) => {
const library = new ethers.providers.Web3Provider(provider);
library.pollingInterval = POLLING_INTERVAL;
return library;
};
function App() {
return (
<Web3ReactProvider getLibrary={getLibrary}>
<Router>
<Routes />
</Router>
</Web3ReactProvider>
);
}
export default App;

3. Setting up Connectors

Implement connectors based on which wallet you're going to provide.
import { InjectedConnector } from '@web3-react/injected-connector'
// Other possible connectors
// import { WalletConnectConnector } from '@web3-react/walletconnect-connector';
// import { WalletLinkConnector } from '@web3-react/walletlink-connector';
// import { LedgerConnector } from '@web3-react/ledger-connector';
// import { BscConnector } from '@binance-chain/bsc-connector';
export const injected = new InjectedConnector({
supportedChainIds: [1, 3, 4, 5, 42, 56, 97, 1337],
});
// refer to https://github.com/NoahZinsmeister/web3-react
// for all available connectors

4. Basic wallet login / logout

import { useWeb3React } from '@web3-react/core'
import { injected } from '[YOUR CONNECTOR PATH]'
function SomeComponent() {
const { activate, deactivate, account } = useWeb3React();
return (
<div>
Account: {account}
{account
? <button onClick={() => deactivate()}>Disconnect</button>
: <button onClick={() => activate(injected)}>Connect</button>
}
</div>
);
}
Copy link
On this page
1. Installing dependencies
2. Setting up @web-react Root Provider
3. Setting up Connectors
4. Basic wallet login / logout