Merge pull request #705 from blocknative/release/1.35.0

Release: 1.35.0 - Master

Author: taylorjdawson

.circleci/config.yml

@@ -2,7 +2,7 @@ version: 2
 jobs:
   test:
     docker:
-      - image: circleci/node:10.18.1-browsers
+      - image: circleci/node:12-browsers
     steps:
       - checkout
       - restore_cache:
@@ -19,7 +19,7 @@ jobs:
           key: v1-dependencies-{{ checksum "package.json" }}
   deploy_stage:
     docker:
-      - image: circleci/node:10.18.1-browsers
+      - image: circleci/node:12-browsers
         user: root
     steps:
       - checkout
@@ -31,7 +31,7 @@ jobs:
       - run: npm publish --dry-run
   deploy_prod:
     docker:
-      - image: circleci/node:10.18.1-browsers
+      - image: circleci/node:12-browsers
         user: root
     steps:
       - checkout
@@ -43,7 +43,7 @@ jobs:
       - run: npm publish
   deploy_demo:
     docker:
-      - image: circleci/node:10.18.1-browsers
+      - image: circleci/node:12-browsers
         user: root
     steps:
       - checkout

.github/ISSUE_TEMPLATE/FEATURE.yml

@@ -0,0 +1,39 @@
+name: Feature Request
+description: Request a feature
+title: "[Feature]: "
+labels: [feature]
+assignees:
+  - taylorjdawson
+  - aaronbarnardsound
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for taking the time to fill out this feature request!
+  - type: textarea
+    attributes:
+      label: Is your request related to a problem?
+      description: A clear and concise description of what the problem is.
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: Feature Description
+      description: A clear and concise description of what you want to happen.
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: Alternative Solutions
+      description: Let us know about other solutions you've tried or researched.
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: Anything else?
+      description: |
+        Links? References? Images? Anything that will give us more context about the feature you are requesting!
+
+        Tip: You can attach images or log files by clicking this area to highlight it and then dragging files in.
+    validations:
+      required: false

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bnc-onboard",
-  "version": "1.34.2",
+  "version": "1.35.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",
@@ -83,7 +83,7 @@
     "hdkey": "^2.0.1",
     "regenerator-runtime": "^0.13.7",
     "trezor-connect": "^8.1.9",
-    "walletlink": "^2.1.9",
+    "walletlink": "^2.1.11",
     "web3-provider-engine": "^15.0.4"
   },
   "resolutions": {

src/interfaces.ts

@@ -507,18 +507,15 @@ export interface WalletInterfaceStore {
 
 export interface WalletStateSliceStore {
   subscribe: (subscriber: (store: any) => void) => () => void
-  reset: () => void
   setStateSyncer: (
     stateSyncer: StateSyncer
   ) => { clear: () => void } | undefined
+  reset: () => void
   get: () => any
 }
 
-export interface BalanceStore {
-  subscribe: (subscriber: (store: any) => void) => () => void
+export interface BalanceStore extends WalletStateSliceStore {
   setStateSyncer: (stateSyncer: StateSyncer) => undefined
-  reset: () => void
-  get: () => any
 }
 
 export type Browser = {

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/binance-chain-wallet.ts

@@ -18,9 +18,43 @@ function binanceChainWallet(
       // Ref: https://binance-wallet.gitbook.io/binance-chain-extension-wallet
       const provider = (window as any).BinanceChain
 
+      // The following code is necessary as when polling BSC wallet for a balance causes it to
+      // relaunch the login prompt indefinitely
+
+      let providerInterface = null
+      let address: string | number | null | undefined
+
+      if (provider) {
+        providerInterface = createModernProviderInterface(provider)
+
+        if (providerInterface.balance.get) {
+          if (providerInterface.address.get) {
+            // Save and override the address `get` method
+            // Enables us to save the address used below to determine when to get the balance
+            // We only want to get the balance after we get the address
+            const addressGet = providerInterface.address.get
+            providerInterface.address.get = async () => {
+              address = await addressGet()
+              return address
+            }
+          } else if (providerInterface.address.onChange) {
+            // Intercept the onChange event to save the address internally
+            providerInterface.address.onChange(updatedAddress => {
+              address = updatedAddress
+            })
+          }
+          // Save and override the balance `get` method -- only call the original method
+          // if we have an address from BSC
+          const balanceGet = providerInterface.balance.get
+          providerInterface.balance.get = () => {
+            return address ? balanceGet() : Promise.resolve(null)
+          }
+        }
+      }
+
       return {
         provider,
-        interface: provider && createModernProviderInterface(provider)
+        interface: providerInterface
       }
     },
     type: 'injected',

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'