Merge pull request #593 from blocknative/release/1.29.0

Release 1.29.0

Author: lnbc1QWFyb24

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bnc-onboard",
-  "version": "1.28.0",
+  "version": "1.29.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",
@@ -43,6 +43,7 @@
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^8.3.0",
     "prettier": "^2.0.5",
+    "prettier-plugin-svelte": "^2.2.0",
     "rimraf": "^3.0.0",
     "rollup": "^1.27.5",
     "rollup-plugin-svelte": "^6.1.1",
@@ -75,7 +76,6 @@
     "ethereumjs-util": "^7.0.3",
     "fortmatic": "^2.2.1",
     "hdkey": "^2.0.1",
-    "prettier-plugin-svelte": "^2.2.0",
     "regenerator-runtime": "^0.13.7",
     "trezor-connect": "^8.1.9",
     "walletlink": "^2.1.0",

src/components/Modal.svelte

@@ -2,7 +2,7 @@
   import { fade } from 'svelte/transition'
   import { app } from '../stores'
   import Branding from '../elements/Branding.svelte'
-  export let closeModal: () => void
+  export let closeModal: () => void = () => {}
   export let closeable: boolean = true
 
   let closeHovered: boolean

src/elements/Spinner.svelte

@@ -1,5 +1,5 @@
-<script>
-  export let description
+<script lang="ts">
+  export let description: string = ''
 </script>
 
 <style>

src/interfaces.ts

@@ -88,8 +88,9 @@ export interface UserState {
 export interface StateAndHelpers extends UserState {
   BigNumber: any
   walletSelect: WalletSelectFunction
+  walletCheck: WalletCheck
   wallet: Wallet
-  exit: (completed?: boolean) => void
+  exit: (completed?: boolean, state?: Partial<AppState>) => void
   stateSyncStatus: {
     [key: string]:
       | null
@@ -398,19 +399,19 @@ export interface WalletSelectFunction {
   (autoSelectWallet?: string): Promise<boolean>
 }
 
-interface WalletCheck {
+export interface WalletCheck {
   (): Promise<boolean>
 }
 
-interface AccountSelect {
+export interface AccountSelect {
   (): Promise<boolean>
 }
 
-interface Config {
+export interface Config {
   (options: ConfigOptions): void
 }
 
-interface GetState {
+export interface GetState {
   (): UserState
 }
 
@@ -490,6 +491,7 @@ export interface AppState {
   accountSelectInProgress: boolean
   walletSelectDisplayedUI: boolean
   walletCheckDisplayedUI: boolean
+  switchingWallets: boolean
   displayBranding: boolean
   agreement: TermsOfServiceAgreementOptions
 }

src/modules/check/network.ts

@@ -2,10 +2,13 @@ import { networkName } from '../../utilities'
 import {
   WalletCheckModal,
   StateAndHelpers,
-  WalletCheckCustomOptions
+  WalletCheckCustomOptions,
+  AppState
 } from '../../interfaces'
 import { networkIcon } from './icons'
 
+import { app } from '../../stores'
+
 function network(
   options: WalletCheckCustomOptions = {}
 ): (currentState: StateAndHelpers) => Promise<WalletCheckModal | undefined> {
@@ -16,6 +19,7 @@ function network(
       network,
       appNetworkId,
       walletSelect,
+      walletCheck,
       exit,
       stateSyncStatus,
       stateStore
@@ -49,9 +53,16 @@ function network(
           )}</b> for this Dapp. <br><br> <i style="font-size: inherit; font-family: inherit;">*Some wallets may not support changing networks. If you can not change networks in your wallet you may consider switching to a different wallet.</i>`,
         eventCode: 'networkFail',
         button: button || {
-          onclick: () => {
-            exit()
-            walletSelect()
+          onclick: async () => {
+            exit(false, { switchingWallets: true })
+            const walletSelected = await walletSelect()
+            const walletReady = walletSelected && (await walletCheck())
+
+            app.update((store: AppState) => ({
+              ...store,
+              switchingWallets: false,
+              walletCheckCompleted: walletReady
+            }))
           },
           text: 'Switch Wallet'
         },

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/modules/select/wallets/hd-wallet.ts

@@ -54,12 +54,12 @@ export function isValidPath(path: string) {
     return true
   }
 
-  const accountFieldDigit = Number(parts[3][0])
+  const accountFieldNumber = Number(parts[3].slice(0, -1))
 
   if (
-    isNaN(accountFieldDigit) ||
-    accountFieldDigit < 0 ||
-    parts[3][1] !== "'"
+    isNaN(accountFieldNumber) ||
+    accountFieldNumber < 0 ||
+    parts[3].slice(-1) !== "'"
   ) {
     return false
   }
@@ -68,19 +68,19 @@ export function isValidPath(path: string) {
     return true
   }
 
-  const changeFieldDigit = Number(parts[4][0])
+  const changeFieldNumber = Number(parts[4])
 
-  if (isNaN(changeFieldDigit) || changeFieldDigit < 0) {
+  if (isNaN(changeFieldNumber) || changeFieldNumber < 0) {
     return false
   }
 
   if (parts[5] === undefined) {
     return true
   }
 
-  const addressFieldDigit = Number(parts[5][0])
+  const addressFieldNumber = Number(parts[5])
 
-  if (isNaN(addressFieldDigit) || addressFieldDigit < 0) {
+  if (isNaN(addressFieldNumber) || addressFieldNumber < 0) {
     return false
   }
 

src/onboard.ts

@@ -121,7 +121,8 @@ function init(initialization: Initialization): API {
     target: document.body,
     props: {
       walletSelectModule: initializedModules.walletSelect,
-      walletSelect
+      walletSelect,
+      walletCheck
     }
   })
 
@@ -206,9 +207,11 @@ function init(initialization: Initialization): API {
         const {
           walletCheckInProgress,
           walletCheckCompleted,
-          walletCheckDisplayedUI
+          walletCheckDisplayedUI,
+          switchingWallets
         } = store
-        if (walletCheckInProgress === false) {
+
+        if (!switchingWallets && walletCheckInProgress === false) {
           appUnsubscribe()
           walletCheckDisplayedUI
             ? setTimeout(() => {

src/stores.ts

@@ -28,6 +28,7 @@ export const app: WritableStore = writable({
   walletSelectCompleted: false,
   walletCheckInProgress: false,
   walletCheckCompleted: false,
+  switchingWallets: false,
   accountSelectInProgress: false,
   autoSelectWallet: '',
   checkModules: [],