Question 30225 in Wordpress Question posted in
The official Wordpress documentation can be found here.

window.ethereum.providers undefined – allow user to select MetaMask OR Coinbase Wallet as web3 provider – WordPress

How do we allow users to choose which browser wallet / provider they use when interacting with web3 websites? This is for basic HTML / WordPress websites not using TypeScript / React, etc.

According to Coinbase Docs, the Coinbase Wallet SDK is not needed: "You can use this provider in your dapp to request users’ Ethereum accounts, read on-chain data, and have the user sign messages and transactions, without using the Coinbase Wallet SDK."

https://docs.cloud.coinbase.com/wallet-sdk/docs/injected-provider

Currently, my integration works with MetaMask without issue. However, when trying to choose the Coinbase Wallet (browser extension) as my provider, there doesn’t seem to be a way to do so.

If window.ethereum gets set by the Coinbase Wallet extension, there is suppose to be a window.ethereum.providers object. You can then go through each one, find MetaMask or Coinbase, and set the preferred one as the provider:

MetaMask conflicting with Coinbase wallet

However, it seems that MetaMask is has priority over this, and sets window.ethereum WITHOUT the .providers object.

I’ve attempted to load / find the Coinbase Wallet provider during and after Page Load, but it doesn’t seem to exist. Again, I’m assuming MetaMask gets set as the provider before Coinbase injection even exists.

Is there a way to let the user set the provider / wallet that is being used using basic web3 JS?

Tags:

2

Answers


  1. 0

    https://docs.cloud.coinbase.com/wallet-sdk/docs/injected-provider-guidance

    const connectWallet = async () => {
  if (typeof window.ethereum !== "undefined") {
    let provider = window.ethereum;
    // edge case if MM and CBW are both installed
    if (window.ethereum.providers?.length) {
      window.ethereum.providers.forEach(async (p) => {
        if (p.isMetaMask) provider = p;
      });
    }
    await provider.request({
      method: "eth_requestAccounts",
      params: [],
    });
  }
};

    I think the way how implemented your code has some bugs. this code above is clear

    Login or Signup to reply.
  2. 0

    Have had some testing with this function with coinbase and metamask extensions both installed on chrome. It will open a window for you to choose which wallet you want to connect and then use the first address in that wallet to set the account.

    async function getWallet() {
  try{
    const accounts = await ethereum.request({ method: 'eth_requestAccounts' });
    let account = accounts[0];
    return account
  } catch (error) {
    console.log(error);
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search