Merge pull request #422 from blocknative/develop

Release 1.11.1

Author: lnbc1QWFyb24

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bnc-onboard",
-  "version": "1.11.0",
+  "version": "1.11.1",
   "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/components/Modal.svelte

@@ -13,7 +13,7 @@
   /* .bn-onboard-modal */
   aside {
     display: flex;
-    font-family: 'Helvetica Neue';
+    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
     justify-content: center;
     align-items: center;
     position: fixed;

src/interfaces.ts

@@ -321,11 +321,7 @@ export interface WalletLinkOptions extends CommonWalletOptions {
   rpcUrl: string
 }
 
-export interface ImTokenOptions extends CommonWalletOptions {
-  rpcUrl?: string
-}
-
-export interface TrustWalletOptions extends CommonWalletOptions {
+export interface InjectedWithBalanceOptions extends CommonWalletOptions {
   rpcUrl?: string
 }
 
@@ -337,8 +333,7 @@ export type WalletInitOptions =
   | TrezorOptions
   | AuthereumOptions
   | LedgerOptions
-  | ImTokenOptions
-  | TrustWalletOptions
+  | InjectedWithBalanceOptions
 
 export type AllWalletInitOptions = CommonWalletOptions &
   SdkWalletOptions &
@@ -348,8 +343,7 @@ export type AllWalletInitOptions = CommonWalletOptions &
   AuthereumOptions &
   LedgerOptions &
   WalletLinkOptions &
-  ImTokenOptions &
-  TrustWalletOptions & { networkId: number }
+  InjectedWithBalanceOptions & { networkId: number }
 
 export interface WalletCheckCustomOptions {
   heading?: string

src/modules/select/index.ts

@@ -2,7 +2,7 @@ import { WalletModule, WalletInitOptions } from '../../interfaces'
 import { isWalletInit } from '../../validation'
 
 // wallets that qualify for default wallets need to have no
-// init parameters that are required
+// init parameters that are required for full functionality
 const defaultWalletNames = [
   'metamask',
   'dapper',
@@ -92,6 +92,8 @@ function getModule(name: string): Promise<any> | undefined {
       return import('./wallets/imtoken')
     case 'unilogin':
       return import('./wallets/unilogin')
+    case 'mykey':
+      return import('./wallets/mykey')
     default:
       return
   }

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

@@ -1,9 +1,13 @@
 import { mobileWalletInstallMessage } from '../content'
-import { WalletModule, Helpers, ImTokenOptions } from '../../../interfaces'
+import {
+  WalletModule,
+  Helpers,
+  InjectedWithBalanceOptions
+} from '../../../interfaces'
 
 import imTokenIcon from '../wallet-icons/icon-imtoken'
 
-function imtoken(options: ImTokenOptions): WalletModule {
+function imtoken(options: InjectedWithBalanceOptions): WalletModule {
   const { preferred, label, iconSrc, svg, rpcUrl } = options
 
   return {

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

@@ -1,4 +1,4 @@
-import { extensionInstallMessage } from '../content'
+import { mobileWalletInstallMessage } from '../content'
 import { WalletModule, Helpers, CommonWalletOptions } from '../../../interfaces'
 
 import meetoneIcon from '../wallet-icons/icon-meetone.png'
@@ -29,7 +29,7 @@ function meetone(options: CommonWalletOptions): WalletModule {
     },
     type: 'injected',
     link: 'https://meet.one',
-    installMessage: extensionInstallMessage,
+    installMessage: mobileWalletInstallMessage,
     mobile: true,
     preferred
   }

src/modules/select/wallets/imtoken.ts

@@ -0,0 +1,77 @@
+import { mobileWalletInstallMessage } from '../content'
+import {
+  WalletModule,
+  Helpers,
+  InjectedWithBalanceOptions
+} from '../../../interfaces'
+
+import mykeyIcon from '../wallet-icons/icon-mykey.png'
+import mykeyIcon2x from '../wallet-icons/icon-mykey@2x.png'
+
+function mykey(options: InjectedWithBalanceOptions): WalletModule {
+  const { preferred, label, iconSrc, svg, rpcUrl } = options
+
+  return {
+    name: label || 'MYKEY',
+    iconSrc: iconSrc || mykeyIcon,
+    iconSrcSet: iconSrc || mykeyIcon2x,
+    svg,
+    wallet: async (helpers: Helpers) => {
+      const { getProviderName, getAddress, getNetwork, getBalance } = helpers
+      const myKeyProvider =
+        (window as any).ethereum ||
+        ((window as any).web3 && (window as any).web3.currentProvider)
+
+      const isMyKey = getProviderName(myKeyProvider) === 'MYKEY'
+      let createProvider
+
+      if (isMyKey && rpcUrl) {
+        createProvider = (await import('./providerEngine')).default
+      }
+
+      const provider = createProvider ? createProvider({ rpcUrl }) : null
+
+      let warned = false
+
+      return {
+        provider: myKeyProvider,
+        interface: isMyKey
+          ? {
+              address: {
+                get: () => getAddress(myKeyProvider)
+              },
+              network: {
+                get: () => getNetwork(myKeyProvider)
+              },
+              balance: {
+                get: async () => {
+                  if (!provider) {
+                    if (!warned) {
+                      console.warn(
+                        'The MYKEY provider does not allow rpc calls preventing Onboard.js from getting the balance. You can pass in a "rpcUrl" to the MYKEY wallet initialization object to get the balance.'
+                      )
+                      warned = true
+                    }
+
+                    return null
+                  }
+
+                  const address = await getAddress(myKeyProvider)
+
+                  return getBalance(provider, address)
+                }
+              },
+              name: getProviderName(myKeyProvider)
+            }
+          : null
+      }
+    },
+    type: 'injected',
+    link: 'https://mykey.org/download',
+    installMessage: mobileWalletInstallMessage,
+    mobile: true,
+    preferred
+  }
+}
+
+export default mykey

src/modules/select/wallets/meetone.ts

@@ -1,9 +1,13 @@
 import { mobileWalletInstallMessage } from '../content'
-import { WalletModule, Helpers, TrustWalletOptions } from '../../../interfaces'
+import {
+  WalletModule,
+  Helpers,
+  InjectedWithBalanceOptions
+} from '../../../interfaces'
 
 import trustIcon from '../wallet-icons/icon-trust'
 
-function trust(options: TrustWalletOptions): WalletModule {
+function trust(options: InjectedWithBalanceOptions): WalletModule {
   const { preferred, label, iconSrc, svg, rpcUrl } = options
 
   return {
@@ -13,7 +17,8 @@ function trust(options: TrustWalletOptions): WalletModule {
     wallet: async (helpers: Helpers) => {
       const { getProviderName, getAddress, getNetwork, getBalance } = helpers
       const trustProvider =
-        (window as any).web3 && (window as any).web3.currentProvider
+        (window as any).ethereum ||
+        ((window as any).web3 && (window as any).web3.currentProvider)
 
       const isTrust = getProviderName(trustProvider) === 'Trust'
       let createProvider

src/modules/select/wallets/mykey.ts

@@ -211,6 +211,10 @@ export function getProviderName(provider: any): string | undefined {
     return 'MetaMask'
   }
 
+  if (provider.isMYKEY) {
+    return 'MYKEY'
+  }
+
   if (provider.host && provider.host.indexOf('localhost') !== -1) {
     return 'localhost'
   }