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