Merge pull request #419 from blocknative/fix/mykey-balance

Fix: Mykey balance

Closes #418

Author: lnbc1QWFyb24

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',
@@ -13,8 +13,7 @@ const defaultWalletNames = [
   'opera',
   'operaTouch',
   'status',
-  'unilogin',
-  'mykey'
+  'unilogin'
 ]
 
 function select(

src/modules/select/wallets/imtoken.ts

@@ -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/wallets/mykey.ts

@@ -1,36 +1,69 @@
 import { mobileWalletInstallMessage } from '../content'
-import { WalletModule, Helpers, CommonWalletOptions } from '../../../interfaces'
+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: CommonWalletOptions): WalletModule {
-  const { preferred, label, iconSrc, svg } = options
+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,
-        createModernProviderInterface,
-        createLegacyProviderInterface
-      } = helpers
-
-      const provider =
+      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,
-        interface:
-          provider && getProviderName(provider) === 'mykey'
-            ? typeof provider.enable === 'function'
-              ? createModernProviderInterface(provider)
-              : createLegacyProviderInterface(provider)
-            : null
+        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',

src/modules/select/wallets/trust.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 {

src/utilities.ts

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