Merge pull request #658 from blocknative/release/1.34.0

Release: 1.34.0 - Master

Author: taylorjdawson

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bnc-onboard",
-  "version": "1.33.0",
+  "version": "1.34.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",
@@ -59,7 +59,7 @@
     "@ethereumjs/tx": "^3.0.0",
     "@gnosis.pm/safe-apps-provider": "^0.5.0",
     "@gnosis.pm/safe-apps-sdk": "^3.0.0",
-    "@keystonehq/eth-keyring": "0.7.2",
+    "@keystonehq/eth-keyring": "0.7.7",
     "@ledgerhq/hw-app-eth": "^5.49.0",
     "@ledgerhq/hw-transport-u2f": "^5.21.0",
     "@ledgerhq/hw-transport-webusb": "5.53.0",

src/interfaces.ts

@@ -183,6 +183,7 @@ export interface CommonWalletOptions {
   iconSrc?: string
   svg?: string
   networkId?: number
+  display?: { mobile?: boolean; desktop?: boolean }
 }
 
 export interface SdkWalletOptions extends CommonWalletOptions {

src/modules/check/network.ts

@@ -1,4 +1,4 @@
-import { networkName } from '../../utilities'
+import { getProviderName, networkName } from '../../utilities'
 import {
   WalletCheckModal,
   StateAndHelpers,
@@ -41,14 +41,18 @@ function network(
         })
       }
     }
-    try {
-      await wallet?.provider?.request({
-        method: 'wallet_switchEthereumChain',
-        params: [{ chainId: '0x' + appNetworkId?.toString(16) }]
-      })
-    } catch (e) {
-      // Could not switch networks so proceed as normal through the checks
+    // Adds a check for WalletConnect since it hangs for unsupported rpc methods
+    if (getProviderName(wallet?.provider) !== 'WalletConnect') {
+      try {
+        await wallet?.provider?.request({
+          method: 'wallet_switchEthereumChain',
+          params: [{ chainId: '0x' + appNetworkId?.toString(16) }]
+        })
+      } catch (e) {
+        // Could not switch networks so proceed as normal through the checks
+      }
     }
+
     if (stateStore.network.get() != appNetworkId) {
       return {
         heading: heading || 'You Must Change Networks',

src/modules/select/index.ts

@@ -11,6 +11,7 @@ import { getProviderName } from '../../utilities'
 const desktopDefaultWalletNames = [
   'detectedwallet',
   'metamask',
+  'binance',
   'frame',
   'torus',
   'opera',
@@ -46,23 +47,26 @@ function select(
   networkId: number,
   isMobile: boolean
 ) {
-  const defaultWalletNames = isMobile
-    ? mobileDefaultWalletNames
-    : desktopDefaultWalletNames
-
   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' : true // It is not a WalletInitOption but rather a WalletModule so let it through
+        '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 of the wallet select modal
+    // at the beginning of the list e.g. the top of the wallet select modal
     if (injectedWalletDetected()) {
       wallets.unshift({ walletName: 'detectedwallet' })
     }
+
     return Promise.all(
       wallets.map(wallet => {
         // If this is a wallet init object then load the built-in wallet module
@@ -87,6 +91,10 @@ function select(
     )
   }
 
+  const defaultWalletNames = isMobile
+    ? mobileDefaultWalletNames
+    : desktopDefaultWalletNames
+
   return Promise.all(
     defaultWalletNames
       // Include the detected wallet only if an injected wallet is detected
@@ -180,6 +188,8 @@ function getModule(name: string): Promise<{
       return import('./wallets/bitpie')
     case 'gnosis':
       return import('./wallets/gnosis')
+    case 'binance':
+      return import('./wallets/binance-chain-wallet')
     case 'detectedwallet':
       return import('./wallets/detectedwallet')
     case 'tp':

src/modules/select/wallet-icons/icon-binance-chain-wallet.ts

@@ -0,0 +1,37 @@
+import { CommonWalletOptions, Helpers, WalletModule } from '../../../interfaces'
+import { extensionInstallMessage, mobileWalletInstallMessage } from '../content'
+import { binanceChainWalletLogo } from '../wallet-icons/icon-binance-chain-wallet'
+
+function binanceChainWallet(
+  options: CommonWalletOptions & { isMobile: boolean }
+): WalletModule {
+  const { preferred, label, iconSrc, svg, isMobile } = options
+
+  return {
+    name: label || 'Binance Chain Wallet',
+    iconSrc: iconSrc || binanceChainWalletLogo,
+    iconSrcSet: iconSrc || binanceChainWalletLogo,
+    svg: svg || binanceChainWalletLogo,
+    wallet: async (helpers: Helpers) => {
+      const { createModernProviderInterface } = helpers
+
+      // Ref: https://binance-wallet.gitbook.io/binance-chain-extension-wallet
+      const provider = (window as any).BinanceChain
+
+      return {
+        provider,
+        interface: provider && createModernProviderInterface(provider)
+      }
+    },
+    type: 'injected',
+    link: 'https://docs.binance.org/smart-chain/wallet/binance.html#download-link',
+    installMessage: isMobile
+      ? mobileWalletInstallMessage
+      : extensionInstallMessage,
+    desktop: true,
+    mobile: false,
+    preferred
+  }
+}
+
+export default binanceChainWallet

src/modules/select/wallets/binance-chain-wallet.ts

@@ -4,9 +4,9 @@ import { SdkWalletOptions, WalletModule, Helpers } from '../../../interfaces'
 import fortmaticIcon from '../wallet-icons/icon-fortmatic'
 
 function fortmatic(
-  options: SdkWalletOptions & { networkId: number }
+  options: SdkWalletOptions & { networkId: number; rpcUrl: string }
 ): WalletModule {
-  const { apiKey, networkId, preferred, label, iconSrc, svg } = options
+  const { apiKey, rpcUrl, networkId, preferred, label, iconSrc, svg } = options
 
   return {
     name: label || 'Fortmatic',
@@ -17,7 +17,11 @@ function fortmatic(
 
       const instance = new Fortmatic(
         apiKey,
-        networkId === 1 ? undefined : networkName(networkId)
+        rpcUrl
+          ? { chainId: networkId, rpcUrl }
+          : networkId === 1
+          ? undefined
+          : networkName(networkId)
       )
 
       const provider = instance.getProvider()

src/modules/select/wallets/fortmatic.ts

@@ -128,6 +128,11 @@ async function keystoneProvider(options: {
         .then((res: string) => callback(null, res))
         .catch(err => callback(err, null))
     },
+    signTypedMessage: (messageData: any, callback: any) => {
+      signTypedMessage(messageData)
+        .then((res: string) => callback(null, res))
+        .catch(err => callback(err, null))
+    },
     rpcUrl
   })
 
@@ -147,6 +152,7 @@ async function keystoneProvider(options: {
   function disconnect() {
     dPath = ''
     enabled = false
+    addressList = []
     provider.stop()
   }
 
@@ -173,9 +179,11 @@ async function keystoneProvider(options: {
   }
 
   function setPrimaryAccount(address: string) {
-    return keyring.setCurrentAccount(
-      addressList.findIndex(addr => addr === address) || 0
-    )
+    const index = addressList.findIndex(addr => addr === address) || 0
+    keyring.setCurrentAccount(index)
+    const accounts = [...addressList]
+    accounts.unshift(accounts.splice(index, 1)[0])
+    addressList = accounts
   }
 
   function getPrimaryAddress() {
@@ -192,12 +200,14 @@ async function keystoneProvider(options: {
       return []
     }
 
-    if (keyring.getAccounts().length > 0 && !getMore) {
-      return keyring.getAccounts()
+    if (addressList.length > 0 && !getMore) {
+      return addressList
     }
 
     try {
       addressList = await keyring.addAccounts(keyring.getAccounts().length + 5)
+      const currentPrimary = getPrimaryAddress()
+      setPrimaryAccount(currentPrimary)
     } catch (error) {
       throw error
     }
@@ -279,6 +289,24 @@ async function keystoneProvider(options: {
     }
   }
 
+  async function signTypedMessage({ data }: { data: any }) {
+    if (addressList.length === 0) {
+      await enable()
+    }
+
+    try {
+      if (typeof data === 'string') {
+        return keyring.signTypedData(getPrimaryAddress(), JSON.parse(data))
+      }
+      if (typeof data === 'object') {
+        return keyring.signTypedData(getPrimaryAddress(), data)
+      }
+      throw new Error('invalid typed data')
+    } catch (err) {
+      throw err
+    }
+  }
+
   return provider
 }
 

src/modules/select/wallets/keystone.ts

@@ -1,7 +1,6 @@
 import bowser from 'bowser'
 import BigNumber from 'bignumber.js'
 import { get } from 'svelte/store'
-import ENS, { getEnsAddress } from '@ensdomains/ensjs'
 
 import { app } from './stores'
 import { WalletInterface, Ens } from './interfaces'
@@ -71,6 +70,11 @@ export function getAddress(provider: any): Promise<string | any> {
 export async function getEns(provider: any, address: string): Promise<Ens> {
   const { networkId } = get(app)
   try {
+    // There is an issue with ens and ts unable to find the
+    // declaration file for it even though it is present.
+    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+    // @ts-ignore - TS7016
+    const { default: ENS, getEnsAddress } = await import('@ensdomains/ensjs')
     const ens = new ENS({ provider, ensAddress: getEnsAddress(networkId) })
     const { name } = await ens.getName(address)
     const nameInterface = await ens.name(name)
@@ -84,6 +88,7 @@ export async function getEns(provider: any, address: string): Promise<Ens> {
     }
   } catch (e) {
     // Error getting ens
+    console.error(e)
     return {}
   }
 }

src/utilities.ts

@@ -661,8 +661,15 @@ export function validateWalletInit(
 ): void | never {
   validateType({ name: 'walletInit', value: walletInit, type: 'object' })
 
-  const { walletName, preferred, label, iconSrc, svg, ...otherParams } =
-    walletInit
+  const {
+    walletName,
+    preferred,
+    label,
+    iconSrc,
+    svg,
+    display,
+    ...otherParams
+  } = walletInit
 
   invalidParams(
     otherParams,
@@ -698,10 +705,17 @@ export function validateWalletInit(
       'webUri',
       'xsUri',
       'blockedPopupRedirect',
-      'customNetwork'
+      'customNetwork',
+      'display'
     ],
     'walletInitObject'
   )
+  validateType({
+    name: 'walletInit.display',
+    value: display,
+    type: 'object',
+    optional: true
+  })
 
   validateType({
     name: 'walletInit.walletName',