Merge pull request #447 from blocknative/develop

Release 1.15.0

Author: lnbc1QWFyb24

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bnc-onboard",
-  "version": "1.14.0",
+  "version": "1.15.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/check/accounts.ts

@@ -77,7 +77,7 @@ function accountSelect(
             `
           : `
           <div style="display: flex; align-items: center;">
-            <select id="account-select" onchange="window.accountSelect()" style="padding: 0.5rem;">
+            <select id="account-select" onchange="window.accountSelect();" class="bn-onboard-custom bn-onboard-account-select>
               ${accountsAndBalances.map(
                 (account: { balance: string; address: string }) =>
                   `<option>${account.address} --- ${

src/modules/select/index.ts

@@ -14,7 +14,8 @@ const defaultWalletNames = [
   'operaTouch',
   'status',
   'hyperpay',
-  'unilogin'
+  'unilogin',
+  'tokenpocket'
 ]
 
 function select(
@@ -100,9 +101,11 @@ function getModule(name: string): Promise<any> | undefined {
     case 'huobiwallet':
       return import('./wallets/huobiwallet')
     case 'wallet.io':
-        return import('./wallets/wallet-io')
+      return import('./wallets/wallet-io')
     case 'hyperpay':
       return import('./wallets/hyperpay')
+    case 'tokenpocket':
+      return import('./wallets/tokenpocket')
     default:
       return
   }

src/modules/select/wallet-icons/icon-tokenpocket.png

@@ -0,0 +1,38 @@
+import { mobileWalletInstallMessage } from '../content'
+import { WalletModule, Helpers, CommonWalletOptions } from '../../../interfaces'
+
+import tokenpocketIcon from '../wallet-icons/icon-tokenpocket.png'
+import tokenpocketIcon2x from '../wallet-icons/icon-tokenpocket@2x.png'
+
+function tokenpocket(options: CommonWalletOptions): WalletModule {
+    const { preferred, label, iconSrc, svg } = options
+
+    return {
+        name: label || 'TokenPocket',
+        iconSrc: iconSrc || tokenpocketIcon,
+        iconSrcSet: iconSrc || tokenpocketIcon2x,
+        svg,
+        wallet: async (helpers: Helpers) => {
+            const { getProviderName, createModernProviderInterface } = helpers
+
+            const provider =
+                (window as any).ethereum ||
+                ((window as any).web3 && (window as any).web3.currentProvider)
+
+            return {
+                provider,
+                interface:
+                    (getProviderName(provider) === 'TokenPocket' &&
+                        createModernProviderInterface(provider)) ||
+                    null
+            }
+        },
+        type: 'injected',
+        link: 'https://tokenpocket.pro',
+        installMessage: mobileWalletInstallMessage,
+        mobile: true,
+        preferred
+    }
+}
+
+export default tokenpocket

src/modules/select/wallet-icons/icon-tokenpocket@2x.png

@@ -5,23 +5,28 @@ import { WalletInterface } from './interfaces'
 
 export function getNetwork(provider: any): Promise<number | any> {
   return new Promise((resolve, reject) => {
-    const params = {
+    const options = {
       jsonrpc: '2.0',
       method: 'net_version',
       params: [],
       id: 42
     }
 
+    // use MetaMask parameter if there
+    if (provider.chainId) {
+      return resolve(Number(provider.chainId))
+    }
+
     const callback = (e: any, res: any) => {
       e && reject(e)
       const result = res && res.result
       resolve(result && Number(result))
     }
 
     if (typeof provider.sendAsync === 'function') {
-      provider.sendAsync(params, callback)
+      provider.sendAsync(options, callback)
     } else if (typeof provider.send === 'function') {
-      provider.send(params, callback)
+      provider.send(options, callback)
     } else {
       resolve(null)
     }
@@ -30,23 +35,30 @@ export function getNetwork(provider: any): Promise<number | any> {
 
 export function getAddress(provider: any): Promise<string | any> {
   return new Promise((resolve, reject) => {
-    const params = {
+    const options = {
       jsonrpc: '2.0',
       method: 'eth_accounts',
       params: [],
       id: 42
     }
 
+    // use MetaMask request method if there
+    if (provider.request) {
+      return provider.request(options).then((res: string[]) => {
+        return resolve(res[0])
+      })
+    }
+
     const callback = (e: any, res: any) => {
       e && reject(e)
       const result = res && res.result && res.result[0]
       resolve(result)
     }
 
     if (typeof provider.sendAsync === 'function') {
-      provider.sendAsync(params, callback)
+      provider.sendAsync(options, callback)
     } else if (typeof provider.send === 'function') {
-      provider.send(params, callback)
+      provider.send(options, callback)
     } else {
       resolve(null)
     }
@@ -65,23 +77,31 @@ export function getBalance(
       return
     }
 
-    const params = {
+    const options = {
       jsonrpc: '2.0',
       method: 'eth_getBalance',
       params: [currentAddress, 'latest'],
       id: 42
     }
 
+    // use MetaMask request method if there
+    if (provider.request) {
+      return provider
+        .request(options)
+        .then((res: string) => (res ? new BigNumber(res).toString(10) : null))
+        .then(resolve)
+    }
+
     const callback = (e: any, res: any) => {
       e && reject(e)
       const result = res && res.result
       resolve(result && new BigNumber(result).toString(10))
     }
 
     if (typeof provider.sendAsync === 'function') {
-      provider.sendAsync(params, callback)
+      provider.sendAsync(options, callback)
     } else if (typeof provider.send === 'function') {
-      provider.send(params, callback)
+      provider.send(options, callback)
     } else {
       resolve(null)
     }
@@ -131,14 +151,19 @@ export function createModernProviderInterface(provider: any): WalletInterface {
     connect: () =>
       new Promise(
         (resolve: () => void, reject: (err: { message: string }) => void) => {
-          provider
-            .enable()
-            .then(resolve)
-            .catch(() =>
-              reject({
-                message: 'This dapp needs access to your account information.'
+          const request = provider.request
+            ? getAddress(provider).then((address: string) => {
+                return address
+                  ? address
+                  : provider.request({ method: 'eth_requestAccounts' })
               })
-            )
+            : provider.enable()
+
+          return request.then(resolve).catch(() =>
+            reject({
+              message: 'This dapp needs access to your account information.'
+            })
+          )
         }
       ),
     name: getProviderName(provider)
@@ -164,7 +189,11 @@ export function getProviderName(provider: any): string | undefined {
   if (!provider) return
 
   if (provider.isWalletIO) {
-    return 'wallet.io';
+    return 'wallet.io'
+  }
+
+  if (provider.isTokenPocket) {
+    return 'TokenPocket'
   }
 
   if (provider.wallet === 'MEETONE') {

src/modules/select/wallets/tokenpocket.ts

@@ -38,6 +38,10 @@
     color: #91bced;
     border-color: #91bced;
   }
+
+  :global(.bn-onboard-wallet-check-section select) {
+    padding: 0.5rem;
+  }
 </style>
 
 {#if $app.walletSelectInProgress}

src/utilities.ts

@@ -334,7 +334,7 @@
     {/if}
 
     {#if activeModal.html}
-      <section>
+      <section class="bn-onboard-custom bn-onboard-wallet-check-section">
         {@html activeModal.html}
       </section>
     {/if}