Merge pull request #562 from blocknative/release/1.26.0

Release 1.26.0

Author: taylorjdawson

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bnc-onboard",
-  "version": "1.25.0",
+  "version": "1.26.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",
@@ -54,17 +54,20 @@
   },
   "dependencies": {
     "@cvbb/eth-keyring": "^1.1.0",
-    "@ledgerhq/hw-app-eth": "^5.21.0",
+    "@gnosis.pm/safe-apps-provider": "^0.3.0",
+    "@gnosis.pm/safe-apps-sdk": "^2.3.0",
+    "@ledgerhq/hw-app-eth": "^5.49.0",
     "@ledgerhq/hw-transport-u2f": "^5.21.0",
     "@portis/web3": "^4.0.0",
-    "@toruslabs/torus-embed": "^1.9.2",
+    "@toruslabs/torus-embed": "^1.10.11",
     "@walletconnect/web3-provider": "^1.4.1",
     "authereum": "^0.1.12",
     "bignumber.js": "^9.0.0",
-    "bnc-sdk": "^3.2.0",
+    "bnc-sdk": "^3.3.4",
     "bowser": "^2.10.0",
     "eth-lattice-keyring": "^0.2.7",
     "eth-provider": "^0.6.1",
+    "eth-sig-util": "^3.0.1",
     "ethereumjs-tx": "^2.1.2",
     "ethereumjs-util": "^7.0.3",
     "fortmatic": "^2.2.1",
@@ -74,5 +77,10 @@
     "trezor-connect": "^8.1.9",
     "walletlink": "^2.1.0",
     "web3-provider-engine": "^15.0.4"
+  },
+  "resolutions": {
+    "authereum/web3-utils/underscore": "^1.12.1",
+    "authereum/ethers/elliptic": "^6.5.3",
+    "@portis/web3/pocket-js-core/axios": "^0.21.1"
   }
 }

rollup.config.js

@@ -69,6 +69,7 @@ export default {
     'ethereumjs-tx',
     'ethereumjs-util',
     'eth-lattice-keyring',
+    'eth-sig-util',
     '@cvbb/eth-keyring',
     'hdkey',
     '@ledgerhq/hw-transport-u2f',
@@ -82,6 +83,8 @@ export default {
     'web3-provider-engine/subproviders/rpc',
     'web3-provider-engine/subproviders/subscriptions',
     'web3-provider-engine/subproviders/filters',
-    'eth-provider'
+    'eth-provider',
+    '@gnosis.pm/safe-apps-sdk',
+    '@gnosis.pm/safe-apps-provider'
   ]
 }

src/@types/index.d.ts

@@ -8,6 +8,7 @@ declare module 'web3-provider-engine/subproviders/subscriptions'
 declare module 'web3-provider-engine/subproviders/filters'
 declare module 'trezor-connect'
 declare module 'eth-lattice-keyring'
+declare module 'eth-sig-util'
 declare module 'ethereumjs-tx'
 declare module 'ethereumjs-util'
 declare module 'hdkey'

src/interfaces.ts

@@ -120,7 +120,7 @@ export interface WalletModule {
     interface: WalletInterface | null
     instance?: any
   }>
-  type: 'hardware' | 'injected' | 'sdk'
+  type: WalletType
   link?: string
   installMessage?: (wallets: {
     currentWallet: string | undefined
@@ -132,6 +132,8 @@ export interface WalletModule {
   osExclusions?: Array<string>
 }
 
+export type WalletType = 'hardware' | 'injected' | 'sdk'
+
 export interface Helpers {
   getProviderName: (provider: any) => string | undefined
   createLegacyProviderInterface: (provider: any) => WalletInterface
@@ -179,6 +181,7 @@ export interface CommonWalletOptions {
   label?: string
   iconSrc?: string
   svg?: string
+  networkId?: number
 }
 
 export interface SdkWalletOptions extends CommonWalletOptions {

src/modules/select/index.ts

@@ -24,6 +24,7 @@ const mobileDefaultWalletNames = [
   'liquality',
   'alphawallet',
   'ownbit',
+  'bitpie',
   'authereum'
 ]
 
@@ -135,10 +136,16 @@ function getModule(
       return import('./wallets/liquality')
     case 'frame':
       return import('./wallets/frame')
+    case 'xdefi':
+      return import('./wallets/xdefi')
     case 'alphawallet':
       return import('./wallets/alphawallet')
     case 'ownbit':
       return import('./wallets/ownbit')
+    case 'bitpie':
+      return import('./wallets/bitpie')
+    case 'gnosis':
+      return import('./wallets/gnosis')
     default:
       throw new Error(`${name} is not a valid walletName.`)
   }

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

@@ -0,0 +1,24 @@
+const bitpieIcon = `
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.72147 0.714294H30.3108C35.1186 0.714294 39.0161 4.61182 39.0161 9.41965V31.0089C39.0161 35.8168 35.1186 39.7143 30.3108 39.7143H8.72147C3.91363 39.7143 0.0161133 35.8168 0.0161133 31.0089V9.41965C0.0161133 4.61182 3.91363 0.714294 8.72147 0.714294Z" fill="url(#paint0_linear)"/>
+    <path d="M19.6902 35.1875C27.8635 35.1875 34.4893 28.5617 34.4893 20.3884C34.4893 12.2151 27.8635 5.58929 19.6902 5.58929C11.5169 5.58929 4.89111 12.2151 4.89111 20.3884C4.89111 28.5617 11.5169 35.1875 19.6902 35.1875Z" fill="white"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M19.5161 0.714294C30.2857 0.714294 39.0161 9.44474 39.0161 20.2143C39.0161 30.9838 30.2857 39.7143 19.5161 39.7143C8.74656 39.7143 0.0161133 30.9838 0.0161133 20.2143C0.0161133 9.44474 8.74656 0.714294 19.5161 0.714294ZM19.4287 5.34882C11.2187 5.34882 4.5632 12.0043 4.5632 20.2143C4.5632 28.4243 11.2187 35.0798 19.4287 35.0798C27.6386 35.0798 34.2941 28.4243 34.2941 20.2143C34.2941 12.0043 27.6386 5.34882 19.4287 5.34882Z" fill="url(#paint1_linear)"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M21.7479 27.6254C22.3598 28.6852 21.9967 30.0404 20.9369 30.6524C19.877 31.2643 18.5218 30.9011 17.9099 29.8413L17.2448 28.6899L16.0937 29.3546C15.0338 29.9665 13.6786 29.6034 13.0667 28.5435C12.4548 27.4837 12.8179 26.1285 13.8778 25.5166L15.0288 24.8517L13.2562 21.7814L12.105 22.4461C11.0452 23.058 9.68995 22.6949 9.07805 21.635C8.46614 20.5752 8.82927 19.2199 9.88913 18.608L11.0402 17.9432L10.3758 16.7918C9.76387 15.732 10.127 14.3768 11.1869 13.7649C12.2467 13.1529 13.6019 13.5161 14.2138 14.5759L14.8784 15.7271L17.9487 13.9545L17.2843 12.8032C16.6724 11.7434 17.0355 10.3881 18.0954 9.77622C19.1552 9.16431 20.5105 9.52745 21.1224 10.5873L21.7869 11.7385L22.9386 11.0739C23.9984 10.462 25.3536 10.8252 25.9655 11.885C26.5775 12.9449 26.2143 14.3001 25.1545 14.912L24.003 15.5768L25.7756 18.647L26.9272 17.9825C27.987 17.3706 29.3423 17.7337 29.9542 18.7935C30.5661 19.8534 30.203 21.2086 29.1431 21.8205L27.9916 22.4853L28.6565 23.6367C29.2684 24.6966 28.9052 26.0518 27.8454 26.6637C26.7855 27.2756 25.4303 26.9125 24.8184 25.8526L24.1533 24.7013L21.0831 26.4739L21.7479 27.6254ZM18.8671 22.6356L21.9373 20.863L20.1647 17.7928L17.0945 19.5654L18.8671 22.6356Z" fill="url(#paint2_linear)"/>
+    <defs>
+        <linearGradient id="paint0_linear" x1="20.509" y1="39.7143" x2="20.509" y2="0.714294" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#1E3DA0"/>
+            <stop offset="1" stop-color="#3750DE"/>
+        </linearGradient>
+        <linearGradient id="paint1_linear" x1="19.5161" y1="0.714294" x2="19.5161" y2="39.7143" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#1D3BA3" stop-opacity="0"/>
+            <stop offset="1" stop-color="#173793" stop-opacity="0.652938"/>
+        </linearGradient>
+        <linearGradient id="paint2_linear" x1="24.3911" y1="28.658" x2="14.6411" y2="11.7705" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#1E3DA0"/>
+            <stop offset="1" stop-color="#3750DE"/>
+        </linearGradient>
+    </defs>
+</svg>
+`
+
+export default bitpieIcon

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

@@ -0,0 +1,7 @@
+const gnosisWalletIcon = `
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 440 440">
+    <path d="M220,9.82C103.92,9.82,9.82,103.92,9.82,220S103.92,430.18,220,430.18,430.18,336.08,430.18,220,336.08,9.82,220,9.82ZM373.83,231.47H276.3a59.41,59.41,0,1,1,.45-20.67h97.08a10.34,10.34,0,1,1,0,20.67Z"/>
+</svg>
+`
+
+export default gnosisWalletIcon

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

@@ -0,0 +1,42 @@
+import { mobileWalletInstallMessage } from '../content'
+import { WalletModule, Helpers, CommonWalletOptions } from '../../../interfaces'
+
+import bitpieIcon from '../wallet-icons/icon-bitpie'
+
+function bitpie(options: CommonWalletOptions): WalletModule {
+  const { preferred, label, iconSrc, svg } = options
+
+  return {
+    name: label || 'Bitpie',
+    iconSrc,
+    svg: svg || bitpieIcon,
+    wallet: async (helpers: Helpers) => {
+      const {
+        getProviderName,
+        createModernProviderInterface,
+        createLegacyProviderInterface
+      } = helpers
+
+      const provider =
+        (window as any).ethereum ||
+        ((window as any).web3 && (window as any).web3.currentProvider)
+
+      return {
+        provider,
+        interface:
+          provider && getProviderName(provider) === 'Bitpie'
+            ? typeof provider.enable === 'function'
+              ? createModernProviderInterface(provider)
+              : createLegacyProviderInterface(provider)
+            : null
+      }
+    },
+    type: 'injected',
+    link: `https://bitpiehk.com`,
+    installMessage: mobileWalletInstallMessage,
+    mobile: true,
+    preferred
+  }
+}
+
+export default bitpie

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

@@ -0,0 +1,63 @@
+import type SafeAppsSDK from '@gnosis.pm/safe-apps-sdk'
+import type { SafeInfo } from '@gnosis.pm/safe-apps-sdk'
+import { CommonWalletOptions, Helpers, WalletModule } from '../../../interfaces'
+import gnosisWalletIcon from '../wallet-icons/icon-gnosis'
+
+const getSafe = (sdk: SafeAppsSDK): Promise<SafeInfo | undefined> =>
+  Promise.race([
+    sdk.getSafeInfo(),
+    // Timeout need as this method hangs until it can find the safe info
+    new Promise<undefined>(resolve => setTimeout(resolve, 200))
+  ])
+
+/**
+ * Checks to see if we are are within a Safe App context. If we are it executes
+ * the callback function which self-selects this wallet.
+ * @param selectWallet - A callback function which can call the `walletSelect` method
+ * with the Gnosis wallet name.
+ */
+export const checkGnosisSafeContext = async (selectWallet: () => void) =>
+  !!(await getSafe(new (await import('@gnosis.pm/safe-apps-sdk')).default())) &&
+  selectWallet()
+
+function gnosis(options: CommonWalletOptions): WalletModule {
+  const { preferred, label, iconSrc, svg, networkId } = options
+
+  const network = networkId === 4 ? 'rinkeby.' : ''
+  const link = `https://${network}gnosis-safe.io/app`
+
+  return {
+    name: label || 'Gnosis Safe',
+    iconSrc,
+    svg: svg || gnosisWalletIcon,
+    wallet: async ({ createModernProviderInterface }: Helpers) => {
+      const sdk = new (await import('@gnosis.pm/safe-apps-sdk')).default()
+      const { SafeAppProvider } = await import('@gnosis.pm/safe-apps-provider')
+
+      const safe: SafeInfo | undefined = await getSafe(sdk)
+      // Checks if we are within the safe app context
+      if (!safe) return { provider: undefined, interface: null }
+
+      const provider = new SafeAppProvider(safe, sdk)
+      return {
+        provider,
+        interface: {
+          ...createModernProviderInterface(provider),
+          connect: () => Promise.resolve([safe.safeAddress])
+        }
+      }
+    },
+    type: 'sdk',
+    link,
+    installMessage: () => `
+        <p style="font-size: 0.889rem; font-family: inherit; margin: 0.889rem 0;">
+            Click the button below to open the Gnosis Safe interface.
+        </p>
+        `,
+    desktop: true,
+    mobile: false,
+    preferred
+  }
+}
+
+export default gnosis

src/modules/select/wallets/bitpie.ts

@@ -1,5 +1,4 @@
 import { LedgerOptions, WalletModule, Helpers } from '../../../interfaces'
-
 import ledgerIcon from '../wallet-icons/icon-ledger'
 
 const LEDGER_LIVE_PATH = `m/44'/60'`
@@ -80,6 +79,24 @@ async function ledgerProvider(options: {
   const EthereumTx = await import('ethereumjs-tx')
   const ethUtil = await import('ethereumjs-util')
   const buffer = await import('buffer')
+  const { TypedDataUtils } = await import('eth-sig-util')
+
+  const domainHash = (message: any) => {
+    return TypedDataUtils.hashStruct(
+      'EIP712Domain',
+      message.domain,
+      message.types,
+      true
+    )
+  }
+  const messageHash = (message: any) => {
+    return TypedDataUtils.hashStruct(
+      message.primaryType,
+      message.message,
+      message.types,
+      true
+    )
+  }
 
   const {
     networkId,
@@ -130,6 +147,11 @@ async function ledgerProvider(options: {
         .then((res: string) => callback(null, res))
         .catch(err => callback(err, null))
     },
+    signTypedMessage: (messageData: any, callback: any) => {
+      signTypedMessage(messageData)
+        .then((res: string) => callback(null, res))
+        .catch(err => callback(err, null))
+    },
     rpcUrl
   })
 
@@ -406,6 +428,29 @@ async function ledgerProvider(options: {
       })
   }
 
+  async function signTypedMessage({ data }: { data: any }) {
+    if (addressToPath.size === 0) {
+      await enable()
+    }
+
+    const path = [...addressToPath.values()][0]
+
+    return eth
+      .signEIP712HashedMessage(
+        path,
+        ethUtil.bufferToHex(domainHash(data)),
+        ethUtil.bufferToHex(messageHash(data))
+      )
+      .then((result: any) => {
+        let v = (result['v'] - 27).toString(16)
+        if (v.length < 2) {
+          v = '0' + v
+        }
+
+        return `0x${result['r']}${result['s']}${v}`
+      })
+  }
+
   return provider
 }
 

src/modules/select/wallets/gnosis.ts

@@ -16,7 +16,8 @@ function createProvider(config: any) {
     processMessage,
     processPersonalMessage,
     signMessage,
-    signPersonalMessage
+    signPersonalMessage,
+    signTypedMessage
   } = config
 
   const pollingInterval = get(app).blockPollingInterval
@@ -29,7 +30,8 @@ function createProvider(config: any) {
       processMessage,
       processPersonalMessage,
       signMessage,
-      signPersonalMessage
+      signPersonalMessage,
+      signTypedMessage
     })
 
   const rpcSubProvider = new RpcSource({

src/modules/select/wallets/ledger.ts

@@ -53,6 +53,12 @@ function walletConnect(
 
       const balanceProvider = createProvider({ rpcUrl })
 
+      if (infuraKey && rpc) {
+        throw new Error(
+          'WalletConnect requires  an Infura ID or a custom RPC object but not both.'
+        )
+      }
+
       const provider = new WalletConnectProvider({
         infuraId: infuraKey,
         rpc,