1.28.0-0.2.0: Generic web3 wallet for injected wallet providers (#583)

* allow user to select injected provider

* add icon, pretty it up

* Removes extra metamask

* Update logic and add auto name feature

* Version bump

* Move filter, adjust metmask matcher

* Add small fix for metamask name

* Formatting

* Add logo

* Remove unused method

Co-authored-by: Taylor Dawson <taylorjdawson@gmail.com>
Co-authored-by: Aaron Barnard <abarnard@protonmail.com>

Author: 3 people

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bnc-onboard",
-  "version": "1.28.0-0.1.1",
+  "version": "1.28.0-0.2.0",
   "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

@@ -4,12 +4,21 @@ import {
   AllWalletInitOptions
 } from '../../interfaces'
 import { isWalletInit } from '../../validation'
+import { getProviderName } from '../../utilities'
 
 // wallets that qualify for default wallets need to have no
 // init parameters that are required for full functionality
-const desktopDefaultWalletNames = ['metamask', 'torus', 'opera', 'liquality']
+const desktopDefaultWalletNames = [
+  'detectedwallet',
+  'metamask',
+  'frame',
+  'torus',
+  'opera',
+  'liquality'
+]
 
 const mobileDefaultWalletNames = [
+  'detectedwallet',
   'metamask',
   'coinbase',
   'trust',
@@ -28,6 +37,9 @@ const mobileDefaultWalletNames = [
   'authereum'
 ]
 
+const injectedWalletDetected = () =>
+  window.ethereum && getProviderName(window.ethereum) === undefined
+
 function select(
   wallets: Array<WalletInitOptions | WalletModule> | undefined,
   networkId: number,
@@ -39,10 +51,15 @@ function select(
 
   if (wallets) {
     return Promise.all(
-      wallets.map(wallet => {
-        if (isWalletInit(wallet)) {
-          const { walletName, ...initParams } = wallet
-
+      wallets
+        // only include a detected wallet if it's not already one of the provided options
+        .filter(
+          wallet =>
+            isWalletInit(wallet) &&
+            (wallet.walletName !== 'detectedwallet' || injectedWalletDetected())
+        )
+        .map(wallet => {
+          const { walletName, ...initParams } = wallet as WalletInitOptions
           try {
             return getModule(walletName).then((m: any) =>
               m.default({ ...initParams, networkId, isMobile })
@@ -54,17 +71,22 @@ function select(
               throw error
             }
           }
-        }
 
-        return Promise.resolve(wallet)
-      })
+          return Promise.resolve(wallet)
+        })
     )
   }
 
   return Promise.all(
-    defaultWalletNames.map(walletName =>
-      getModule(walletName).then((m: any) => m.default({ networkId }))
-    )
+    defaultWalletNames
+      // only include a detected wallet if it's not already one of the provided options
+      .filter(
+        walletName =>
+          walletName !== 'detectedwallet' || injectedWalletDetected()
+      )
+      .map(walletName =>
+        getModule(walletName).then((m: any) => m.default({ networkId }))
+      )
   )
 }
 
@@ -146,6 +168,8 @@ function getModule(name: string): Promise<{
       return import('./wallets/bitpie')
     case 'gnosis':
       return import('./wallets/gnosis')
+    case 'detectedwallet':
+      return import('./wallets/detectedwallet')
     default:
       throw new Error(`${name} is not a valid walletName.`)
   }

src/modules/select/wallet-icons/icon-detected-wallet.ts

@@ -0,0 +1,3 @@
+export default `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 18V19C21 20.1 20.1 21 19 21H5C3.89 21 3 20.1 3 19V5C3 3.9 3.89 3 5 3H19C20.1 3 21 3.9 21 5V6H12C10.89 6 10 6.9 10 8V16C10 17.1 10.89 18 12 18H21ZM12 16H22V8H12V16ZM16 13.5C15.17 13.5 14.5 12.83 14.5 12C14.5 11.17 15.17 10.5 16 10.5C16.83 10.5 17.5 11.17 17.5 12C17.5 12.83 16.83 13.5 16 13.5Z" fill="black"/>
+</svg>`

src/modules/select/wallet-icons/icon-injected.ts

@@ -0,0 +1,8 @@
+const injectedIcon = `
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+    <path fill-rule="evenodd" d="M16.168 2.924L4.51 13.061a.25.25 0 00.164.439h5.45a.75.75 0 01.692 1.041l-2.559 6.066 11.215-9.668a.25.25 0 00-.164-.439H14a.75.75 0 01-.687-1.05l2.855-6.526zm-.452-1.595a1.341 1.341 0 012.109 1.55L15.147 9h4.161c1.623 0 2.372 2.016 1.143 3.075L8.102 22.721a1.149 1.149 0 01-1.81-1.317L8.996 15H4.674c-1.619 0-2.37-2.008-1.148-3.07l12.19-10.6z">
+    </path>
+  </svg>
+`
+
+export default injectedIcon

src/modules/select/wallets/detectedwallet.ts

@@ -0,0 +1,47 @@
+import { extensionInstallMessage } from '../content'
+import { WalletModule, Helpers, CommonWalletOptions } from '../../../interfaces'
+import injectedIcon from '../wallet-icons/icon-detected-wallet'
+
+function injected(options: CommonWalletOptions): WalletModule {
+  const { preferred, label, svg } = options
+
+  const provider =
+    (window as any).ethereum ||
+    ((window as any).web3 && (window as any).web3.currentProvider)
+
+  const name =
+    label ||
+    Object.keys(provider)
+      .find(key => key.startsWith('is') && !key.includes('MetaMask'))
+      ?.split('is')[1] ||
+    'Detected Wallet'
+
+  return {
+    name,
+    svg: svg || injectedIcon,
+    wallet: async (helpers: Helpers) => {
+      const {
+        getProviderName,
+        createModernProviderInterface,
+        createLegacyProviderInterface
+      } = helpers
+
+      return {
+        provider,
+        interface:
+          provider && getProviderName(provider) === undefined
+            ? typeof provider.enable === 'function'
+              ? createModernProviderInterface(provider)
+              : createLegacyProviderInterface(provider)
+            : null
+      }
+    },
+    type: 'injected',
+    installMessage: extensionInstallMessage,
+    desktop: true,
+    mobile: true,
+    preferred
+  }
+}
+
+export default injected

src/modules/select/wallets/frame.ts

@@ -4,6 +4,17 @@ import { WalletModule, Helpers, CommonWalletOptions } from '../../../interfaces'
 import frameIcon from '../wallet-icons/icon-frame.png'
 import frameIcon2x from '../wallet-icons/icon-frame@2x.png'
 
+async function getProvider() {
+  const injected = window.ethereum
+
+  if (injected && (injected as any).isFrame) {
+    return injected
+  }
+
+  const { default: ethProvider } = await import('eth-provider')
+  return ethProvider('frame')
+}
+
 function frame(options: CommonWalletOptions): WalletModule {
   const { preferred, label, iconSrc, svg } = options
 
@@ -15,8 +26,7 @@ function frame(options: CommonWalletOptions): WalletModule {
     wallet: async (helpers: Helpers) => {
       const { createModernProviderInterface } = helpers
 
-      const { default: ethProvider } = await import('eth-provider')
-      const provider = ethProvider('frame')
+      const provider = await getProvider()
 
       return {
         provider,

src/utilities.ts

@@ -253,8 +253,8 @@ export function getProviderName(provider: any): string | undefined {
     return 'XDEFI'
   }
 
-  if (provider.isMetaMask) {
-    return 'MetaMask'
+  if (provider.isFrame) {
+    return 'Frame'
   }
 
   if (provider.isMYKEY) {
@@ -288,7 +288,8 @@ export function getProviderName(provider: any): string | undefined {
   // =====================================
   // When adding new wallet place above this metamask check as some providers
   // have an isMetaMask property in addition to the wallet's own `is[WalletName]`
-  if (provider.isMetaMask) {
+
+  if (provider.isMetaMask && provider._metamask) {
     return 'MetaMask'
   }