Merge pull request #287 from blocknative/develop

Release 1.7.0

Author: lnbc1QWFyb24

.prettierrc

@@ -3,5 +3,7 @@
   "tabWidth": 2,
   "useTabs": false,
   "semi": false,
-  "singleQuote": true
+  "singleQuote": true,
+  "trailingComma": "none",
+  "arrowParens": "avoid"
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bnc-onboard",
-  "version": "1.6.0",
+  "version": "1.7.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/interfaces.ts

@@ -102,7 +102,7 @@ export interface Helpers {
   networkName: (id: number) => string
   getAddress: (provider: any) => Promise<string | any>
   getNetwork: (provider: any) => Promise<number | any>
-  getBalance: (provider: any) => Promise<string | any>
+  getBalance: (provider: any, address?: string) => Promise<string | any>
   resetWalletState: (options?: {
     disconnected: boolean
     walletName: string

src/modules/select/index.ts

@@ -82,6 +82,8 @@ function getModule(name: string): Promise<any> | undefined {
       return import('./wallets/trezor')
     case 'ledger':
       return import('./wallets/ledger')
+    case 'imToken':
+      return import('./wallets/imtoken')
     case 'unilogin':
       return import('./wallets/unilogin')
     default:

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

@@ -0,0 +1,16 @@
+const imTokenIcon = `
+	<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 93 93">
+		<defs>
+				<linearGradient id="a" x1="97.185%" x2="-.038%" y1="3.105%" y2="99.699%">
+						<stop offset="0%" stop-color="#11C4D1"/>
+						<stop offset="100%" stop-color="#0062AD"/>
+				</linearGradient>
+		</defs>
+		<g fill="none" fill-rule="nonzero">
+				<path fill="url(#a)" d="M92.755 63.804s0 9.64-1.028 13.78c-1.028 4.187-2.985 7.06-5.09 9.202-2.154 2.142-4.993 4.09-9.3 5.112-4.356 1.023-13.754.974-13.754.974H29.417s-9.642 0-13.803-1.022c-4.16-1.071-7.097-2.97-9.25-5.113-2.155-2.142-4.112-4.966-5.091-9.3-1.028-4.333-.98-13.682-.98-13.682V29.671s0-9.64 1.029-13.78c1.027-4.187 2.985-7.06 5.09-9.202 2.154-2.142 4.993-4.09 9.3-5.113C20.068.554 29.466.603 29.466.603h34.166s9.642 0 13.803 1.022c4.16 1.071 7.097 2.97 9.25 5.113 2.154 2.142 4.112 4.966 5.091 9.3.98 4.333.98 13.682.98 13.682v34.084z"/>
+				<path fill="#FFF" d="M78.267 28.795c1.909 26.244-15.614 38.71-31.326 40.073-14.587 1.265-28.292-7.304-29.467-20.597-.979-10.955 6.07-15.678 11.6-16.117 5.679-.486 10.427 3.263 10.867 7.84.392 4.382-2.447 6.427-4.454 6.573-1.566.146-3.524-.78-3.72-2.727-.147-1.704.538-1.899.342-3.7-.293-3.214-3.181-3.555-4.747-3.409-1.91.146-5.385 2.338-4.944 7.694.49 5.404 5.874 9.69 12.922 9.056 7.636-.682 12.971-6.378 13.363-14.412 0-.439.098-.828.293-1.218.098-.146.147-.292.294-.438.196-.292.392-.536.636-.779l.686-.682c3.328-3.019 15.37-10.225 26.676-7.985.098 0 .196.049.245.097.44 0 .685.341.734.73"/>
+		</g>
+	</svg>
+`
+
+export default imTokenIcon

src/modules/select/wallets/imtoken.ts

@@ -0,0 +1,70 @@
+import { mobileWalletInstallMessage } from '../content'
+import { WalletModule, Helpers, CommonWalletOptions } from '../../../interfaces'
+
+import imTokenIcon from '../wallet-icons/icon-imtoken'
+
+function imtoken(
+  options: CommonWalletOptions & { rpcUrl: string }
+): WalletModule {
+  const { preferred, label, iconSrc, svg, rpcUrl } = options
+
+  return {
+    name: label || 'imToken',
+    iconSrc,
+    svg: svg || imTokenIcon,
+    wallet: async (helpers: Helpers) => {
+      const { getProviderName, getBalance } = helpers
+      const imTokenProvider = (window as any).ethereum
+      const isImToken = getProviderName(imTokenProvider) === 'imToken'
+      let createProvider
+
+      if (isImToken && rpcUrl) {
+        createProvider = (await import('./providerEngine')).default
+      }
+
+      const provider = createProvider ? createProvider({ rpcUrl }) : null
+
+      let warned = false
+
+      return {
+        provider: imTokenProvider,
+        interface: isImToken
+          ? {
+              address: {
+                get: () => Promise.resolve(imTokenProvider.selectedAddress)
+              },
+              network: {
+                get: () =>
+                  Promise.resolve(Number(imTokenProvider.networkVersion))
+              },
+              balance: {
+                get: () => {
+                  if (!provider) {
+                    if (!warned) {
+                      console.warn(
+                        'The imToken provider does not allow rpc calls preventing Onboard.js from getting the balance. You can pass in a "rpcUrl" to the imToken wallet initialization object to get the balance.'
+                      )
+                      warned = true
+                    }
+
+                    return Promise.resolve(null)
+                  }
+
+                  return getBalance(provider, imTokenProvider.selectedAddress)
+                }
+              },
+              name: getProviderName(imTokenProvider),
+              connect: () => imTokenProvider.enable()
+            }
+          : null
+      }
+    },
+    type: 'injected',
+    link: `imtokenv2://navigate?screen=DappView&url=${window.location.href}`,
+    installMessage: mobileWalletInstallMessage,
+    mobile: true,
+    preferred
+  }
+}
+
+export default imtoken

src/modules/select/wallets/providerEngine.ts

@@ -7,17 +7,18 @@ import FilterSubprovider from 'web3-provider-engine/subproviders/filters'
 function createProvider(config: any) {
   const { getAccounts, signTransaction, rpcUrl } = config
 
-  const idMgmt = new HookedWalletSubprovider({ getAccounts, signTransaction })
+  const idMgmt =
+    getAccounts && new HookedWalletSubprovider({ getAccounts, signTransaction })
 
   const rpcSubProvider = new RpcSource({
-    rpcUrl: rpcUrl.includes('http') ? rpcUrl : `https://${rpcUrl}`
+    rpcUrl: rpcUrl.includes('http') ? rpcUrl : `https://${rpcUrl}`,
   })
 
   const provider = new Web3ProviderEngine()
 
   provider.addProvider(new SubscriptionSubprovider())
   provider.addProvider(new FilterSubprovider())
-  provider.addProvider(idMgmt)
+  idMgmt && provider.addProvider(idMgmt)
   provider.addProvider(rpcSubProvider)
   provider.start()
 

src/modules/select/wallets/trust.ts

@@ -3,24 +3,62 @@ import { WalletModule, Helpers, CommonWalletOptions } from '../../../interfaces'
 
 import trustIcon from '../wallet-icons/icon-trust'
 
-function trust (options: CommonWalletOptions): WalletModule {
-  const { preferred, label, iconSrc, svg } = options
+function trust(
+  options: CommonWalletOptions & { rpcUrl: string }
+): WalletModule {
+  const { preferred, label, iconSrc, svg, rpcUrl } = options
 
   return {
     name: label || 'Trust',
     svg: svg || trustIcon,
     iconSrc,
     wallet: async (helpers: Helpers) => {
-      const { getProviderName, createLegacyProviderInterface } = helpers
-      const provider =
+      const { getProviderName, getAddress, getNetwork, getBalance } = helpers
+      const trustProvider =
         (window as any).web3 && (window as any).web3.currentProvider
 
+      const isTrust = getProviderName(trustProvider) === 'Trust'
+      let createProvider
+
+      if (isTrust && rpcUrl) {
+        createProvider = (await import('./providerEngine')).default
+      }
+
+      const provider = createProvider ? createProvider({ rpcUrl }) : null
+
+      let warned = false
+
       return {
-        provider,
-        interface:
-          provider && getProviderName(provider) === 'Trust'
-            ? createLegacyProviderInterface(provider)
-            : null
+        provider: trustProvider,
+        interface: isTrust
+          ? {
+              address: {
+                get: () => getAddress(trustProvider)
+              },
+              network: {
+                get: () => getNetwork(trustProvider)
+              },
+              balance: {
+                get: async () => {
+                  if (!provider) {
+                    if (!warned) {
+                      console.warn(
+                        'The Trust provider does not allow rpc calls preventing Onboard.js from getting the balance. You can pass in a "rpcUrl" to the Trust wallet initialization object to get the balance.'
+                      )
+                      warned = true
+                    }
+
+                    return null
+                  }
+
+                  const address = await getAddress(trustProvider)
+
+                  return getBalance(provider, address)
+                }
+              },
+              name: getProviderName(trustProvider)
+            }
+          : null
       }
     },
     type: 'injected',

src/utilities.ts

@@ -53,9 +53,12 @@ export function getAddress(provider: any): Promise<string | any> {
   })
 }
 
-export function getBalance(provider: any): Promise<string | any> {
+export function getBalance(
+  provider: any,
+  address?: string
+): Promise<string | any> {
   return new Promise(async (resolve, reject) => {
-    const currentAddress = await getAddress(provider)
+    const currentAddress = address || (await getAddress(provider))
 
     if (!currentAddress) {
       resolve(null)
@@ -153,13 +156,12 @@ export function createLegacyProviderInterface(provider: any): WalletInterface {
 export function getProviderName(provider: any): string | undefined {
   if (!provider) return
 
-  // Torus also exports isMetamask to be true for backward compatibility
   if (provider.isTorus) {
     return 'Torus'
   }
 
-  if (provider.isMetaMask) {
-    return 'MetaMask'
+  if (provider.isImToken) {
+    return 'imToken'
   }
 
   if (provider.isDapper) {
@@ -194,6 +196,10 @@ export function getProviderName(provider: any): string | undefined {
     return 'Status'
   }
 
+  if (provider.isMetaMask) {
+    return 'MetaMask'
+  }
+
   if (provider.host && provider.host.indexOf('localhost') !== -1) {
     return 'localhost'
   }