Multi Inject Connectors

[LaCocoRoco]

I have a problem to use multiple inject connectors. As mentioned here, the MetaMaskConnector is a extension of the InjectedConnector. The name of the InjectedConnector can be changed but this does not use the specified wallet. The Connector probably uses getInjectedName which selects the first available one. When someone uses Brave Browser with Coinbase and MetaMask Extension, how is the best way to make all available? Do i have to make a Custom InjectedConnector like the MetaMaskConnector? When i use the MetaMaskConnector, CoinbaseConnector and the InjectedConnector, the InjectedConnector will use MetaMask or Coinbase instead of Brave. There are probably also other wallets with the same problem.

Did i miss something?

[LaCocoRoco]

Probably a connector per wallet is necessary.
This code snippet works but when i interrupt the connection process,
MetaMask is using the brave provider in the MetaMaskConnector.

import { Ethereum, InjectedConnectorOptions } from '@wagmi/core';
import { InjectedConnector } from 'wagmi/connectors/injected';
import { Chain } from 'wagmi';

export class BraveConnector extends InjectedConnector {
  readonly id = 'brave';
  readonly ready = typeof window != 'undefined' && !!this.#findProvider(window.ethereum);

  #provider?: Window['ethereum'];

  constructor({ chains, options }: { chains?: Chain[]; options?: InjectedConnectorOptions } = {}) {
    super({ chains, options: { name: 'Brave Wallet', ...options } });
  }

  async getProvider() {
    if (typeof window !== 'undefined') {
      this.#provider = this.#findProvider(window.ethereum);
    }
    return this.#provider;
  }

  #getReady(ethereum?: Ethereum) {
    if (!ethereum?.isBraveWallet) return;
    return ethereum;
  }

  #findProvider(ethereum?: Ethereum) {
    if (ethereum?.providers) return ethereum.providers.find(this.#getReady);
    return this.#getReady(ethereum);
  }
}

[tmm]

Using multiple injected wallets in tandem is unfortunately not very easy. Usually, the "first" one to attach itself to window.ethereum wins. When Coinbase Wallet is available as an injected wallet, it attempts to make this easier by setting window.ethereum.providers. Ideally there would be some standardization around multiple injected wallets (in practice most people only use one).

The name of the InjectedConnector can be changed but this does not use the specified wallet.

You can pass your own name field using the name(detectedName: string | string[]): string function. detectedName is one or more names based on what is detected from window.ethereum or window.ethereum.providers (see above).

Do i have to make a Custom InjectedConnector like the MetaMaskConnector?

InjectedConnector is a catch-all option for injected wallets with some quirks (see above). If you want to target a specific injected wallet, you could create a new InjectedConnector subclass (e.g. MetaMaskConnector).