Connect Wallet (React.js)

Search…

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>
    );
}

Developers - Previous

Code Snippets for Node scripts

Next - Developers

Mint.club Javascript SDK

Last modified 1yr ago

Copy link

On this page

1. Installing dependencies

2. Setting up @web-react Root Provider

3. Setting up Connectors

4. Basic wallet login / logout