Merge pull request #22 from blocknative/feature/sdk-instance

Add SDK instance property to wallet

Author: lnbc1QWFyb24

README.md

@@ -90,7 +90,7 @@ const options = {
     address: Function, // Called with the current account address of the user [String]
     network: Function, // Called with the current network id the users' wallet is connected to [Number]
     balance: Function, // Called with the current balance in `wei` of the users' current account address [String]
-    wallet: Function // Called with the users' current selected wallet [Object]: {provider: Object, name: String}
+    wallet: Function // Called with the users' current selected wallet [Object]: {provider: Object, name: String, instance: Object (if a sdk wallet)}
   },
   modules: {
     walletSelect: {
@@ -245,7 +245,13 @@ import Onboard from "bnc-onboard"
 
 // PICK AND CHOOSE MODULES
 
-const { portis, squarelink, dapper, metamask, fortmatic } = Onboard.modules.select
+const {
+  portis,
+  squarelink,
+  dapper,
+  metamask,
+  fortmatic
+} = Onboard.modules.select
 
 const onboard = Onboard.init({
   // ...
@@ -256,12 +262,12 @@ const onboard = Onboard.init({
         "Please select the wallet that you would like to use with this Dapp",
       wallets: {
         desktop: [
-          portis({ apiKey: 'sdda-w2-ds3', networkId: 1 }),
-          squarelink({ apiKey: 'sdda-w2-ds3', networkId: 1 }),
+          portis({ apiKey: "sdda-w2-ds3", networkId: 1 }),
+          squarelink({ apiKey: "sdda-w2-ds3", networkId: 1 }),
           dapper(),
-          metmask(),
+          metmask()
         ],
-        mobile: [fortmatic({apiKey: 'sd-3d3-d', networkId: 1})]
+        mobile: [fortmatic({ apiKey: "sd-3d3-d", networkId: 1 })]
       }
     }
     //....
@@ -278,7 +284,7 @@ const onboard = Onboard.init({
     walletSelect: Onboard.modules.select.defaults({
       portisInit: { apiKey: "Your portis key here" },
       networkId: 4
-    }),
+    })
     // ...
   }
 })

src/modules/select/index.js

@@ -19,11 +19,6 @@ function defaults({
   const desktopModules = [metamask(), dapper()]
   const mobileModules = [coinbase(), trust()]
 
-  if (squarelinkInit) {
-    desktopModules.push(squarelink({ ...squarelinkInit, networkId }))
-    mobileModules.push(squarelink({ ...squarelinkInit, networkId }))
-  }
-
   if (portisInit) {
     desktopModules.push(portis({ ...portisInit, networkId }))
     mobileModules.push(portis({ ...portisInit, networkId }))
@@ -43,6 +38,11 @@ function defaults({
     )
   }
 
+  if (squarelinkInit) {
+    desktopModules.push(squarelink({ ...squarelinkInit, networkId }))
+    mobileModules.push(squarelink({ ...squarelinkInit, networkId }))
+  }
+
   return {
     heading: heading || "Select a Wallet",
     description:

src/modules/select/wallets/fortmatic.js

@@ -27,17 +27,18 @@ function fortmatic(options) {
     name: "Fortmatic",
     iconSrc: fortmaticIcon,
     wallet: ({ BigNumber }) => {
-      const fortmatic = new Fortmatic(
+      const instance = new Fortmatic(
         apiKey,
         networkId === 1 ? undefined : networkName(networkId)
       )
-      const provider = fortmatic.getProvider()
+      const provider = instance.getProvider()
 
       return {
         provider,
+        instance,
         interface: {
           name: "Fortmatic",
-          connect: fortmatic.user.login,
+          connect: instance.user.login,
           address: {
             get: () => Promise.resolve(provider.account)
           },
@@ -47,7 +48,7 @@ function fortmatic(options) {
           balance: {
             get: () =>
               provider.account &&
-              fortmatic.user.getBalances().then(res =>
+              instance.user.getBalances().then(res =>
                 res[0]
                   ? BigNumber(res[0].crypto_amount)
                       .times(BigNumber("1000000000000000000"))

src/modules/select/wallets/portis.js

@@ -26,24 +26,25 @@ function portis(options) {
     name: "Portis",
     iconSrc: portisIcon,
     wallet: ({ BigNumber }) => {
-      const portis = new Portis(apiKey, networkName(networkId))
-      const { provider } = portis
+      const instance = new Portis(apiKey, networkName(networkId))
+      const { provider } = instance
 
       return {
         provider,
+        instance,
         interface: {
           name: "Portis",
           connect: provider.enable,
           address: {
             onChange: func => {
-              portis.onLogin(address => {
+              instance.onLogin(address => {
                 func(address)
                 provider.address = address
               })
             }
           },
           network: {
-            get: () => Promise.resolve(portis.config.network.chainId)
+            get: () => Promise.resolve(instance.config.network.chainId)
           },
           balance: {
             get: () =>

src/modules/select/wallets/squarelink.js

@@ -1,11 +1,13 @@
 import Squarelink from "squarelink"
 
-import { networkName } from "../../../utilities"
+import { networkName, networkToId } from "../../../utilities"
 import sqlkIcon from "../wallet-icons/icon-squarelink.svg"
 
 function squarelink(options) {
   if (!options || typeof options !== "object") {
-    throw new Error("An options object is required to initialize squarelink module")
+    throw new Error(
+      "An options object is required to initialize squarelink module"
+    )
   }
 
   const { apiKey, networkId } = options
@@ -16,7 +18,7 @@ function squarelink(options) {
     )
   }
 
-  if (!network || typeof networkId !== "number") {
+  if (!networkId || typeof networkId !== "number") {
     throw new Error(
       "A network of type number is required to initialize squarelink module"
     )
@@ -26,42 +28,43 @@ function squarelink(options) {
     name: "Squarelink",
     iconSrc: sqlkIcon,
     wallet: ({ BigNumber }) => {
-      const sqlk = new Squarelink(apiKey, networkName(networkId), { useSync: true })
-      const provider = sqlk.getProviderSync()
+      const instance = new Squarelink(apiKey, networkName(networkId), {
+        useSync: true
+      })
+
+      const provider = instance.getProviderSync()
 
       return {
         provider,
+        instance,
         interface: {
           name: "Squarelink",
           connect: provider.enable,
           address: {
-            get: () => Promise.resolve(provider.accounts[0])
+            get: () => Promise.resolve(instance.accounts[0])
           },
           network: {
-            get: () => Promise.resolve(networkId)
+            get: () => Promise.resolve(networkToId(instance.network))
           },
           balance: {
             get: () =>
-            new Promise(resolve => {
-              if (!provider.accounts.length) {
-                resolve(null)
-                return
-              }
-
-              provider.sendAsync(
-                {
-                  method: "eth_getBalance",
-                  params: [
-                    provider.accounts[0],
-                    "latest"
-                  ],
-                  id: 1
-                },
-                (e, res) => {
-                  resolve(BigNumber(res.result).toString(10))
+              new Promise(resolve => {
+                if (!instance.accounts.length) {
+                  resolve(null)
+                  return
                 }
-              )
-            })
+
+                provider.sendAsync(
+                  {
+                    method: "eth_getBalance",
+                    params: [instance.accounts[0], "latest"],
+                    id: 1
+                  },
+                  (e, res) => {
+                    resolve(BigNumber(res.result).toString(10))
+                  }
+                )
+              })
           }
         }
       }

src/views/WalletSelect.svelte

@@ -58,7 +58,11 @@
   }
 
   function handleWalletSelect(module) {
-    const { provider, interface: selectedWalletInterface } = module.wallet({
+    const {
+      provider,
+      interface: selectedWalletInterface,
+      instance
+    } = module.wallet({
       getProviderName,
       createLegacyProviderInterface,
       createModernProviderInterface,
@@ -89,6 +93,7 @@
 
     wallet.set({
       provider,
+      instance,
       name: module.name,
       connect: selectedWalletInterface.connect
     });

yarn.lock

@@ -2439,25 +2439,6 @@ eth-json-rpc-middleware@^4.1.4:
     pify "^3.0.0"
     safe-event-emitter "^1.0.1"
 
-"eth-json-rpc-middleware@github:walletconnect/eth-json-rpc-middleware":
-  version "4.1.3"
-  resolved "https://codeload.github.com/walletconnect/eth-json-rpc-middleware/tar.gz/dac43613b9f1bf9d45455dcb98cbb8f676f61a8a"
-  dependencies:
-    btoa "^1.2.1"
-    clone "^2.1.1"
-    eth-query "^2.1.2"
-    eth-sig-util "^1.4.2"
-    ethereumjs-block "^1.6.0"
-    ethereumjs-tx "^1.3.3"
-    ethereumjs-util "^5.1.2"
-    ethereumjs-vm "^2.6.0"
-    fetch-ponyfill "^4.0.0"
-    json-rpc-engine "^5.0.0"
-    json-rpc-error "^2.0.0"
-    json-stable-stringify "^1.0.1"
-    pify "^3.0.0"
-    safe-event-emitter "^1.0.1"
-
 eth-query@^2.0.2, eth-query@^2.1.0, eth-query@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/eth-query/-/eth-query-2.1.2.tgz#d6741d9000106b51510c72db92d6365456a6da5e"
@@ -5300,7 +5281,7 @@ vlq@^0.2.2:
     eth-block-tracker "^4.2.0"
     eth-json-rpc-filters "^4.0.2"
     eth-json-rpc-infura "^3.1.0"
-    eth-json-rpc-middleware "^4.1.1"
+    eth-json-rpc-middleware "github:walletconnect/eth-json-rpc-middleware"
     eth-sig-util "^1.4.2"
     ethereumjs-block "^1.2.2"
     ethereumjs-tx "^1.2.0"