Connect Wallet (React.js)
Useful code snippets for wallet implementation on React.js
First, install necessary dependencies for your react project.
yarn add @web3-react/core ethers
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;
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
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>
);
}