[injected-v2.0.5] - Add support for multiple injected wallet support when Coinbase wallet is installed (#924)

* A start on handling multiple installed extensions
* Expand on check for providers array
* Update version for injected wallet package
* Update brave wallet to check providers array
* Update BlankWallet -> BlockWallet, add usage around getInjectedInterface

Author: Adamj1232

packages/injected/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/injected-wallets",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "description": "Injected wallets module for web3-onboard",
   "module": "dist/index.js",
   "browser": "dist/index.js",

packages/injected/src/icons/blankwallet.ts renamed to packages/injected/src/icons/blockwallet.ts

@@ -55,12 +55,22 @@ function injected(options?: InjectedWalletOptions): WalletInit {
       ({ injectedNamespace, checkProviderIdentity, label }) => {
         const provider = window[injectedNamespace] as CustomWindow['ethereum']
 
-        const walletExists = checkProviderIdentity({ provider, device })
+        if (!provider) return
+
+        let walletExists
+
+        if (provider.providers && Array.isArray(provider.providers)) {
+          walletExists = !!provider.providers.filter(provider =>
+            checkProviderIdentity({ provider, device })
+          ).length
+        } else {
+          walletExists = checkProviderIdentity({ provider, device })
+        }
 
         if (
           walletExists &&
-          provider &&
           provider.isMetaMask &&
+          !provider.overrideIsMetaMask &&
           label !== ProviderLabel.MetaMask &&
           label !== 'Detected Wallet'
         ) {

packages/injected/src/index.ts

@@ -16,7 +16,7 @@ export enum ProviderIdentityFlag {
   AToken = 'isAToken',
   Binance = 'bbcSignTx',
   Bitpie = 'isBitpie',
-  BlankWallet = 'isBlank',
+  BlockWallet = 'isBlockWallet',
   Coinbase = 'isToshi',
   CoinbaseExtension = 'isCoinbaseWallet',
   Detected = 'request',
@@ -47,7 +47,7 @@ export enum ProviderLabel {
   AToken = 'AToken',
   Binance = 'Binance Smart Wallet',
   Bitpie = 'Bitpie',
-  BlankWallet = 'BlankWallet',
+  BlockWallet = 'BlockWallet',
   Brave = 'Brave Wallet',
   Coinbase = 'Coinbase Wallet',
   Dcent = `D'CENT`,
@@ -107,7 +107,8 @@ export interface CustomWindow extends Window {
 export type InjectedProvider = ExternalProvider &
   BinanceProvider &
   MeetOneProvider &
-  Record<string, boolean>
+  Record<string, boolean> &
+  Record<string, InjectedProvider[]>
 
 export type WalletFilters = {
   // A provider label mapped to a list of excluded platforms

packages/injected/src/types.ts

@@ -17,27 +17,34 @@ declare const window: CustomWindow
 
 const UNSUPPORTED_METHOD = null
 
+function getInjectedInterface(
+  identity: string
+): () => Promise<{ provider: EIP1193Provider }> {
+  return async () => ({
+    provider: (window.ethereum.providers &&
+    Array.isArray(window.ethereum.providers)
+      ? window.ethereum.providers.find(provider => !!provider[identity])
+      : window.ethereum) as EIP1193Provider
+  })
+}
+
 const metamask: InjectedWalletModule = {
   label: ProviderLabel.MetaMask,
   injectedNamespace: InjectedNameSpace.Ethereum,
   checkProviderIdentity: ({ provider }) =>
     !!provider && !!provider[ProviderIdentityFlag.MetaMask],
   getIcon: async () => (await import('./icons/metamask.js')).default,
-  getInterface: async () => ({
-    provider: window.ethereum as EIP1193Provider
-  }),
+  getInterface: getInjectedInterface(ProviderIdentityFlag.MetaMask),
   platforms: ['all']
 }
 
 const brave: InjectedWalletModule = {
   label: ProviderLabel.Brave,
   injectedNamespace: InjectedNameSpace.Ethereum,
-  checkProviderIdentity: ({ provider }) => 
+  checkProviderIdentity: ({ provider }) =>
     !!provider && !!provider[ProviderIdentityFlag.BraveWallet],
   getIcon: async () => (await import('./icons/brave.js')).default,
-  getInterface: async () => ({
-    provider: window.ethereum as EIP1193Provider
-  }),
+  getInterface: getInjectedInterface(ProviderIdentityFlag.BraveWallet),
   platforms: ['all']
 }
 
@@ -109,7 +116,10 @@ const coinbase: InjectedWalletModule = {
       !!provider.providers[0][ProviderIdentityFlag.CoinbaseExtension]),
   getIcon: async () => (await import('./icons/coinbase.js')).default,
   getInterface: async () => {
-    const provider = window.ethereum as EIP1193Provider
+    const { provider } = await getInjectedInterface(
+      ProviderIdentityFlag.CoinbaseExtension
+    )()
+
     const addListener: SimpleEventEmitter['on'] = provider.on.bind(provider)
     provider.on = (event, func) => {
       // intercept chainChanged event and format string
@@ -231,18 +241,13 @@ const bitpie: InjectedWalletModule = {
   platforms: ['mobile']
 }
 
-const blankwallet: InjectedWalletModule = {
-  label: ProviderLabel.BlankWallet,
+const blockwallet: InjectedWalletModule = {
+  label: ProviderLabel.BlockWallet,
   injectedNamespace: InjectedNameSpace.Ethereum,
   checkProviderIdentity: ({ provider }) =>
-    !!provider && !!provider[ProviderIdentityFlag.BlankWallet],
-  getIcon: async () => (await import('./icons/blankwallet.js')).default,
-  getInterface: async () => ({
-    provider: createEIP1193Provider(window.ethereum, {
-      wallet_switchEthereumChain: UNSUPPORTED_METHOD,
-      eth_selectAccounts: UNSUPPORTED_METHOD
-    })
-  }),
+    !!provider && !!provider[ProviderIdentityFlag.BlockWallet],
+  getIcon: async () => (await import('./icons/blockwallet.js')).default,
+  getInterface: getInjectedInterface(ProviderIdentityFlag.BlockWallet),
   platforms: ['desktop']
 }
 
@@ -487,7 +492,7 @@ const wallets = [
   alphawallet,
   atoken,
   bitpie,
-  blankwallet,
+  blockwallet,
   brave,
   dcent,
   frame,