Breaking News: Grepper is joining You.com. Read the official announcement!

wallet connect with ethers.js

Shirshak Kandel answered on September 2, 2022 Popularity 9/10 Helpfulness 4/10

answer wallet connect with ethers.js

wallet connect with ethers.js

Comment

//1)install package
yarn add @web3-react/core @web3-react/injected-connector @web3-react/walletconnect-connector ethers
//Step 2: Import and Setup Web3ReactProvider
In your index.js file,
import the Web3ReactProvider from web3-react and a Web3Provider from ethers.js.
Define a getLibrary function that returns an instance of the Web3Provider. 
Wrap the Web3ReactProvider around your app root component to make the provider globally accessible throughout your dapp.
//index.js or __app.js in nextjs
import { Web3ReactProvider } from '@web3-react/core'
import { Web3Provider } from "@ethersproject/providers";
function getLibrary(provider) {
  return new Web3Provider(provider);
}
ReactDOM.render(
  <Web3ReactProvider getLibrary={getLibrary}>
    <App />
  </Web3ReactProvider>,
  document.getElementById('root')
);

// Step 3: Import and Instantiate Wallet Connectors
yarn add @web3-react/walletlink-connector # Coinbase Wallet
yarn add @web3-react/walletconnect-connector # Wallet Connect
yarn add @web3-react/injected-connector # Injected (e.g. Metamask)

import { WalletLinkConnector } from "@web3-react/walletlink-connector";
import { WalletConnectConnector } from "@web3-react/walletconnect-connector";
import { InjectedConnector } from "@web3-react/injected-connector";

const CoinbaseWallet = new WalletLinkConnector({
 url: `https://mainnet.infura.io/v3/${process.env.INFURA_KEY}`,
 appName: "Web3-react Demo",
 supportedChainIds: [1, 3, 4, 5, 42],
});

const WalletConnect = new WalletConnectConnector({
 rpcUrl: `https://mainnet.infura.io/v3/${process.env.INFURA_KEY}`,
  //or https://ropsten.infura.io/v3/9aa3d95b3bc440fa88ea12eaa4456161
 bridge: "https://bridge.walletconnect.org",
 qrcode: true,
});

const Injected = new InjectedConnector({
 supportedChainIds: [1, 3, 4, 5, 42]
});

// step 4: Connect and Disconnect from Wallet
import { useWeb3React } from '@web3-react/core'
function App() {
  
  const { activate, deactivate } = useWeb3React();
    ...
}

<button onClick={() => { activate(CoinbaseWallet) }}>Coinbase Wallet</button>
<button onClick={() => { activate(WalletConnect) }}>Wallet Connect</button>
<button onClick={() => { activate(Injected) }}>Metamask</button>

<button onClick={deactivate}>Disconnect</button>

Popularity 9/10 Helpfulness 4/10 Language javascript

Source: docs.cloud.coinbase.com

Tags: ethers.js javascript wallet-connect

Link to this answer
Share Copy Link

Contributed on Sep 02 2022

Shirshak Kandel

0 Answers Avg Quality 2/10

wallet connect with ethers.js

Contents

More Related Answers

wallet connect with ethers.js

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.