1.34.2-0.0.8: [fix] EIP-1193 support in onboard (blocknative#701)

* 1.34.2-0.0.6: [fix] EIP-1193 support in onboard
  - refactors detection to include builtin wallets
  - removes unused providers
* version bump
* Fix duplicate detected wallets
* Fix linting

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bnc-onboard",
-  "version": "1.34.2-0.0.7",
+  "version": "1.34.2-0.0.8",
   "description": "Onboard users to web3 by allowing them to select a wallet, get that wallet ready to transact and have access to synced wallet state.",
   "keywords": [
     "ethereum",

src/modules/select/index.ts

@@ -9,7 +9,6 @@ import { getProviderName } from '../../utilities'
 // wallets that qualify for default wallets need to have no
 // init parameters that are required for full functionality
 const desktopDefaultWalletNames = [
-  'detectedwallet',
   'metamask',
   'binance',
   'frame',
@@ -19,7 +18,6 @@ const desktopDefaultWalletNames = [
 ]
 
 const mobileDefaultWalletNames = [
-  'detectedwallet',
   'metamask',
   'coinbase',
   'trust',
@@ -39,48 +37,65 @@ const mobileDefaultWalletNames = [
   'tp'
 ]
 
-const injectedWalletDetected = () =>
-  window.ethereum && getProviderName(window.ethereum) === undefined
+const providerNameToWalletName = (providerName: string) =>
+  providerName === 'imToken'
+    ? providerName
+    : providerName === 'WalletConnect'
+    ? 'walletConnect'
+    : providerName.toLocaleLowerCase()
 
 function select(
   wallets: Array<WalletInitOptions | WalletModule> | undefined,
   networkId: number,
   isMobile: boolean
 ) {
+  // If we detect an injected wallet then place the detected wallet
+  // at the beginning of the list e.g. the top of the wallet select modal
+  let detectedProviderName: string | undefined
+  let detectedWalletName: string | undefined
+  if (window?.ethereum) {
+    detectedProviderName = getProviderName(window.ethereum)
+    if (detectedProviderName) {
+      detectedWalletName = providerNameToWalletName(detectedProviderName)
+    }
+  }
+
   if (wallets) {
     const hideWallet = (wallet: WalletInitOptions) =>
       wallet?.display &&
       wallet?.display[isMobile ? 'mobile' : 'desktop'] === false
 
-    // For backwards compatibility if a user is still using 'detectedwallet' in the onboard wallet select array
-    // it will be filtered out so there are no duplicates
-    wallets = wallets.filter(
-      wallet =>
-        'walletName' in wallet
-          ? wallet.walletName !== 'detectedwallet' && !hideWallet(wallet)
-          : true // It is not a WalletInitOption but rather a WalletModule so let it through
-    )
-
-    // If we detect an injected wallet then place the detected wallet
-    // at the beginning of the list e.g. the top of the wallet select modal
-    if (injectedWalletDetected()) {
+    if (detectedWalletName) {
+      // This wallet is built into onboard so add the walletName and
+      // the code below will load it as a wallet module
+      wallets.unshift({ walletName: detectedWalletName })
+    } else if (detectedProviderName) {
+      // A provider has been detected but there is not a walletName therefore
+      // this wallet is not built into onboard so add it as a generic injected wallet
       wallets.unshift({ walletName: 'detectedwallet' })
     }
 
+    const setOfWallets = new Set<string>()
     return Promise.all(
       wallets.map(wallet => {
         // If this is a wallet init object then load the built-in wallet module
-        if (isWalletInit(wallet)) {
+        if (isWalletInit(wallet) && !hideWallet(wallet)) {
           const { walletName, ...initParams } = wallet
-          try {
-            return getModule(walletName).then((m: any) =>
-              m.default({ ...initParams, networkId, isMobile })
-            )
-          } catch (error) {
-            if (error.name === 'DeprecatedWalletError') {
-              console.warn(error.message)
-            } else {
-              throw error
+          // Check to see if we have seen this wallet before
+          // prevents duplicated injected wallet from being added
+          if (!setOfWallets.has(walletName)) {
+            try {
+              const module = getModule(walletName).then((m: any) =>
+                m.default({ ...initParams, networkId, isMobile })
+              )
+              setOfWallets.add(walletName)
+              return module
+            } catch (error) {
+              if (error.name === 'DeprecatedWalletError') {
+                console.warn(error.message)
+              } else {
+                throw error
+              }
             }
           }
         }
@@ -94,17 +109,17 @@ function select(
   const defaultWalletNames = isMobile
     ? mobileDefaultWalletNames
     : desktopDefaultWalletNames
-
+  // If we have detected a builtin wallet that is not already in the list of default wallets so add it
+  if (detectedWalletName && !defaultWalletNames.includes(detectedWalletName)) {
+    defaultWalletNames.unshift(detectedWalletName)
+    // If we detected a provider but it is not builtin add the generic injected provider
+  } else if (!detectedWalletName && detectedProviderName) {
+    defaultWalletNames.unshift('detectedwallet')
+  }
   return Promise.all(
-    defaultWalletNames
-      // Include the detected wallet only if an injected wallet is detected
-      .filter(
-        walletName =>
-          walletName !== 'detectedwallet' || injectedWalletDetected()
-      )
-      .map(walletName =>
-        getModule(walletName).then((m: any) => m.default({ networkId }))
-      )
+    defaultWalletNames.map(walletName =>
+      getModule(walletName).then((m: any) => m.default({ networkId }))
+    )
   )
 }
 

src/modules/select/wallets/detectedwallet.ts

@@ -12,7 +12,12 @@ function injected(options: CommonWalletOptions): WalletModule {
   const name =
     label ||
     Object.keys(provider)
-      .find(key => key.startsWith('is') && !key.includes('MetaMask'))
+      .find(
+        key =>
+          key.startsWith('is') &&
+          !key.includes('MetaMask') &&
+          !key.includes('Connected')
+      )
       ?.split('is')[1] ||
     'Detected Wallet'
 

src/utilities.ts

@@ -297,14 +297,6 @@ export function getProviderName(provider: any): string | undefined {
     return 'Coinbase'
   }
 
-  if (provider.isToshi) {
-    return 'Toshi'
-  }
-
-  if (provider.isCipher) {
-    return 'Cipher'
-  }
-
   if (provider.isOpera) {
     return 'Opera'
   }