web3-react

web3-react copied to clipboard

I'm using three wallets (metamask, wallet connect, coinbase wallet).

How can I get the current connector?

Any update on this?

Following this guide, they're saving current connector in localStorage https://docs.cloud.coinbase.com/wallet-sdk/docs/web3-react

does this work?

const {connector} = useWeb3React()

For me, that always returns MetaMask as the connector after refreshing the page. So it persists metaMask's data if you connected with that, but if you use coinbaseWallet or walletConnect on refresh the connector is still defaulting to metaMask (just options are undefined since metamask isn't actually connected) unless you trigger another connect attempt with coinbaseWallet or walletConnect. Then connector will update with the correct connector

For context, on app load I do const {connector} = useWeb3React() then in the useEffect void connector.connectEagerly?.();

A solution like this worked for me:

| -------------------
| -- ⚛️ index.tsx
| -- ⚛️ App.tsx
| -- 📂 connectors
| -- | -- 📝 metaMask.ts
| -- | -- 📝 walletConnect.ts
| -- | -- 📝 coinbaseWallet.ts
| -- 📂 Child
| -- | -- ⚛️ index.tsx
| -------------------

In App.tsx you can declare <Web3ReactProvider connectors={connectors}>

import { Web3ReactHooks, Web3ReactProvider } from '@web3-react/core'

import { MetaMask } from '@web3-react/metamask'
import { WalletConnect } from '@web3-react/walletconnect'
import { CoinbaseWallet } from '@web3-react/coinbase-wallet'

import { hooks as metaMaskHooks, metaMask } from './connectors/metaMask';
import { hooks as walletConnectHooks, walletConnect } from './connectors/walletConnect';
import { hooks as coinbaseWalletHooks, coinbaseWallet } from './connectors/coinbaseWallet'

const connectors: [MetaMask | WalletConnect | CoinbaseWallet, Web3ReactHooks][] = [
  [metaMask, metaMaskHooks],
  [walletConnect, walletConnectHooks],
  [coinbaseWallet, coinbaseWalletHooks]
]

function App() {
  return (
    <Web3ReactProvider connectors={connectors}>
      {/*child components*/}
    </Web3ReactProvider>
  );
}

export default App;

In the child components of Web3ReactProvider you can use

import { useWeb3React } from '@web3-react/core'

function Child() {

    const {
        connector,
        accounts,
        isActive,
        ENSNames,
        chainId,
        isActivating,
        provider,
    } = useWeb3React();

    console.log(`Priority Connector is: ${getName(connector)}`)
    console.log(`Accounts are: ${accounts}`)
    console.log(`Is active: ${isActive}`)
    console.log(`ENS names: ${ENSNames}`)
    console.log(`Chain ID: ${chainId}`)
    console.log(`Is activating: ${isActivating}`)
    console.log(`Provider: ${provider}`)

    return null
}

export default Child

Basic Priority Connector always returns MetaMask, but changing Connectors returns the information of the used connector

You can get the connector name using this function:

import { MetaMask } from '@web3-react/metamask'
import { WalletConnect } from '@web3-react/walletconnect'
import { CoinbaseWallet } from '@web3-react/coinbase-wallet'

import type { Connector } from '@web3-react/types'

export function getName(connector: Connector) {
  if (connector instanceof MetaMask) return 'MetaMask'
  if (connector instanceof WalletConnect) return 'WalletConnect'
  if (connector instanceof CoinbaseWallet) return 'Coinbase'
  return 'Unknown'
}

Look at the example

More details are in web3-react/core