[SOLVED] Coinbase wallet and Metamask fighting for injection provider

Moralis General
#1

I have coinbase and metamask wallets installed in my browser and while trying to authenticate with metamask authenticate({ provider: connectorId }) coinbase beats metamask as the injected provider.

How can I resolve this behavior?

I have solved this problem before while using @web3-react/core as well as @web3-onboard/core , but would like to use the Moralis authenticate call

Metamask and Coinbase wallets
#2

I have a config file that looks like this:

import Metamask from "./WalletIcons/metamaskWallet.png";
import WalletConnect from "./WalletIcons/wallet-connect.svg";
import Coinbase from "./WalletIcons/coinbase.png"

export function activateInjectedProvider(providerName) {
  const { ethereum } = window;

  if (!ethereum?.providers) {
    return undefined;
  }

  let provider;
  switch (providerName) {
    case 'Coinbase':
      provider = ethereum.providers.find(({ isCoinbaseWallet }) => isCoinbaseWallet);
      break;
    case 'Metamask':
      provider = ethereum.providers.find(({ isMetaMask }) => isMetaMask);
      break;
    default:
      return;
  }

  if (provider) {
    ethereum.setSelectedProvider(provider);
  }
}


export const connectors = [
  {
    title: "Metamask",
    icon: Metamask,
    connectorId: "injected",
    priority: 1,
  },
  {
    title: "WalletConnect",
    icon: WalletConnect,
    connectorId: "walletconnect",
    priority: 2,
  },
  {
    title: "Coinbase",
    icon: Coinbase,
    connectorId: "injected",
    priority: 999,
  },
];

so I call activateInjectedProvider before authenticate and that does the trick :+1:

activateInjectedProvider(title);
authenticate({ provider: connectorId});
1 Like
Metamask not opening if has another wallet extensions
#3

How is this solved in plain JS? I need 2 buttons - 1 for metamask and 1 for coinbase wallet but as you say when both wallets are on, coinbase always gets injected first

#4

You can use his JS function directly.

<button onClick="auth('Metamask')">MetaMask</button>
<button onClick="auth('Coinbase')">Coinbase</button>

...

<script>

  // init code / Moralis.start

  function activateInjectedProvider(providerName) {
    const { ethereum } = window;

    if (!ethereum?.providers) {
      return undefined;
    }

    let provider;
    switch (providerName) {
      case 'Coinbase':
        provider = ethereum.providers.find(
          ({ isCoinbaseWallet }) => isCoinbaseWallet
        );
        break;
      case 'Metamask':
        provider = ethereum.providers.find(({ isMetaMask }) => isMetaMask);
        break;
      default:
        return;
    }

    if (provider) {
      ethereum.setSelectedProvider(provider);
    }
  }

  async function auth(wallet) {
    activateInjectedProvider(wallet);
    await Moralis.authenticate();
    console.log('User', Moralis.User.current());
  }
</script>
2 Likes
#5

What a chad answer! thanks mate i will try it.

#6

I’m trying to do something similar, but there’s no ethereum.setSelectedProvider() method on my end, nor is there an ethereum.providers. Is there a specific library that is being used to get these?

#7

This code assumes the user has the wallets installed in their browser ie Metamask or Coinbase wallet. At the beginning of the code we destructure ethereum from the window object. If it is found we continue, else the function returns undefined, meaning they do not have any ethereum browser wallet installed

#8

suppose if i need to give web3auth authentication then how we can give
could you please help me out

#9

Can you make a new topic with more details.

#10