Onboardjs - Get wallets by platform, fix ledger/trezor rpcUrls (#665)

* Added desktop support

* Added desktop option and logs for testing

* Get desktop mode from window object

* Add torus support and remove logs

* Update function name

* Upgrade onboardjs version

* fix ledger/trezor rpcUrls

* Bump version to 1.8.3

Co-authored-by: Mikhail Mikheev <mmvsha73@gmail.com>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "safe-react",
-  "version": "1.8.2",
+  "version": "1.8.3",
   "description": "Allowing crypto users manage funds in a safer way",
   "homepage": "https://github.com/gnosis/safe-react#readme",
   "bugs": {
@@ -52,7 +52,7 @@
     "async-sema": "^3.1.0",
     "axios": "0.19.2",
     "bignumber.js": "9.0.0",
-    "bnc-onboard": "1.3.5",
+    "bnc-onboard": "1.4.0",
     "connected-react-router": "6.7.0",
     "currency-flags": "^2.1.1",
     "date-fns": "2.10.0",

src/components/ConnectButton/index.jsx

@@ -7,54 +7,18 @@ import { getNetworkId } from '~/config'
 import { getWeb3, setWeb3 } from '~/logic/wallets/getWeb3'
 import { fetchProvider } from '~/logic/wallets/store/actions'
 import transactionDataCheck from '~/logic/wallets/transactionDataCheck'
+import { getSupportedWallets } from '~/logic/wallets/utils/walletList'
 import { store } from '~/store'
 
 const isMainnet = process.env.REACT_APP_NETWORK === 'mainnet'
 
 const BLOCKNATIVE_API_KEY = isMainnet ? process.env.REACT_APP_BLOCKNATIVE_KEY : '7fbb9cee-7e97-4436-8770-8b29a9a8814c'
-const PORTIS_DAPP_ID = isMainnet ? process.env.REACT_APP_PORTIS_ID : '852b763d-f28b-4463-80cb-846d7ec5806b'
-// const SQUARELINK_CLIENT_ID = isMainnet ? process.env.REACT_APP_SQUARELINK_ID : '46ce08fe50913cfa1b78'
-const FORTMATIC_API_KEY = isMainnet ? process.env.REACT_APP_FORTMATIC_KEY : 'pk_test_CAD437AA29BE0A40'
-
-const wallets = [
-  { walletName: 'metamask', preferred: true },
-  {
-    walletName: 'walletConnect',
-    preferred: true,
-    infuraKey: process.env.REACT_APP_INFURA_TOKEN,
-  },
-  {
-    walletName: 'trezor',
-    appUrl: 'gnosis-safe.io',
-    preferred: true,
-    email: 'safe@gnosis.io',
-    rpcUrl: 'https://rinkeby.infura.io/v3/b42c928da8fd4c1f90374b18aa9ac6ba',
-  },
-  {
-    walletName: 'ledger',
-    preferred: true,
-    rpcUrl: 'https://rinkeby.infura.io/v3/b42c928da8fd4c1f90374b18aa9ac6ba',
-  },
-  { walletName: 'trust', preferred: true },
-  { walletName: 'dapper' },
-  {
-    walletName: 'fortmatic',
-    apiKey: FORTMATIC_API_KEY,
-  },
-  {
-    walletName: 'portis',
-    apiKey: PORTIS_DAPP_ID,
-    label: 'Login with Email',
-  },
-  { walletName: 'authereum' },
-  { walletName: 'coinbase' },
-  { walletName: 'opera' },
-  { walletName: 'operaTouch' },
-]
 
 let lastUsedAddress = ''
 let providerName
 
+const wallets = getSupportedWallets()
+
 export const onboard = new Onboard({
   dappId: BLOCKNATIVE_API_KEY,
   networkId: getNetworkId(),

src/logic/wallets/getWeb3.js

@@ -58,7 +58,7 @@ export const getEtherScanLink = (type: 'address' | 'tx', value: string) => {
   }etherscan.io/${type}/${value}`
 }
 
-const getInfuraUrl = () => {
+export const getInfuraUrl = () => {
   const isMainnet = process.env.REACT_APP_NETWORK === 'mainnet'
 
   return `https://${isMainnet ? 'mainnet' : 'rinkeby'}.infura.io:443/v3/${process.env.REACT_APP_INFURA_TOKEN}`

src/logic/wallets/utils/walletList.js

@@ -0,0 +1,63 @@
+// @flow
+import { getInfuraUrl } from '../getWeb3'
+
+const isMainnet = process.env.REACT_APP_NETWORK === 'mainnet'
+
+const PORTIS_DAPP_ID = isMainnet ? process.env.REACT_APP_PORTIS_ID : '852b763d-f28b-4463-80cb-846d7ec5806b'
+// const SQUARELINK_CLIENT_ID = isMainnet ? process.env.REACT_APP_SQUARELINK_ID : '46ce08fe50913cfa1b78'
+const FORTMATIC_API_KEY = isMainnet ? process.env.REACT_APP_FORTMATIC_KEY : 'pk_test_CAD437AA29BE0A40'
+
+const infuraUrl = getInfuraUrl()
+
+const wallets = [
+  { walletName: 'metamask', preferred: true, desktop: false },
+  {
+    walletName: 'walletConnect',
+    preferred: true,
+    infuraKey: process.env.REACT_APP_INFURA_TOKEN,
+    desktop: true,
+  },
+  {
+    walletName: 'trezor',
+    appUrl: 'gnosis-safe.io',
+    preferred: true,
+    email: 'safe@gnosis.io',
+    desktop: true,
+    rpcUrl: infuraUrl,
+  },
+  {
+    walletName: 'ledger',
+    desktop: true,
+    preferred: true,
+    rpcUrl: infuraUrl,
+    LedgerTransport: window.TransportNodeHid,
+  },
+  { walletName: 'trust', preferred: true, desktop: false },
+  { walletName: 'dapper', desktop: false },
+  {
+    walletName: 'fortmatic',
+    apiKey: FORTMATIC_API_KEY,
+    desktop: true,
+  },
+  {
+    walletName: 'portis',
+    apiKey: PORTIS_DAPP_ID,
+    label: 'Login with Email',
+    desktop: true,
+  },
+  { walletName: 'authereum', desktop: false },
+  { walletName: 'torus', desktop: true },
+
+  { walletName: 'coinbase', desktop: false },
+  { walletName: 'opera', desktop: false },
+  { walletName: 'operaTouch', desktop: false },
+]
+
+export const getSupportedWallets = () => {
+  const { isDesktop } = window
+  /* eslint-disable no-unused-vars */
+
+  if (isDesktop) return wallets.filter(wallet => wallet.desktop).map(({ desktop, ...rest }) => rest)
+
+  return wallets.map(({ desktop, ...rest }) => rest)
+}

yarn.lock

@@ -3760,10 +3760,10 @@ bn.js@^5.1.1:
   resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.1.1.tgz#48efc4031a9c4041b9c99c6941d903463ab62eb5"
   integrity sha512-IUTD/REb78Z2eodka1QZyyEk66pciRcP6Sroka0aI3tG/iwIdYLrBD62RsubR7vqdt3WyX8p4jxeatzmRSphtA==
 
-bnc-onboard@1.3.5:
+bnc-onboard@1.4.0:
-  version "1.3.5"
+  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/bnc-onboard/-/bnc-onboard-1.3.5.tgz#0c82cc645653a46558b3a54da245e14e8bf87e3b"
+  resolved "https://registry.yarnpkg.com/bnc-onboard/-/bnc-onboard-1.4.0.tgz#2645b3cc940addfd856c2952d63512e1ed23fc40"
-  integrity sha512-xYiOa1ver3wg/ON0pBBIZymryUoX3eXAZCQeOVYyFn/R7ynwSEJDUFvL/dwVJ0pTdxleMsDtn0SQV4v/ogqt+g==
+  integrity sha512-wPoVpvHe1Y4e97FuLUps/UZ+SFmS1Bzgxvg1JS6tPfapEA9QMg69qz4ye8WpcnbIroqrnB/wivOWxjkNLlthDg==
   dependencies:
     "@ledgerhq/hw-app-eth" "^5.7.0"
     "@ledgerhq/hw-transport-u2f" "^5.7.0"
@@ -3775,7 +3775,10 @@ bnc-onboard@1.3.5:
     bnc-sdk "1.1.0"
     bowser "^2.5.2"
     ethereumjs-tx "^2.1.2"
+    ethereumjs-util "^6.2.0"
+    ethereumjs-wallet "^0.6.3"
     fortmatic "^0.8.2"
+    hdkey "^1.1.1"
     regenerator-runtime "^0.13.3"
     squarelink "^1.1.4"
     trezor-connect "7.0.1"
@@ -6848,7 +6851,7 @@ ethereumjs-util@6.1.0:
     safe-buffer "^5.1.1"
     secp256k1 "^3.0.1"
 
-ethereumjs-util@^6.0.0, ethereumjs-util@^6.1.0:
+ethereumjs-util@^6.0.0, ethereumjs-util@^6.1.0, ethereumjs-util@^6.2.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/ethereumjs-util/-/ethereumjs-util-6.2.0.tgz#23ec79b2488a7d041242f01e25f24e5ad0357960"
   integrity sha512-vb0XN9J2QGdZGIEKG2vXM+kUdEivUfU6Wmi5y0cg+LRhDYKnXIZ/Lz7XjFbHRR9VIKq2lVGLzGBkA++y2nOdOQ==
@@ -8376,7 +8379,7 @@ hdkey@^0.7.0:
     coinstring "^2.0.0"
     secp256k1 "^3.0.1"
 
-hdkey@^1.1.0:
+hdkey@^1.1.0, hdkey@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/hdkey/-/hdkey-1.1.1.tgz#c2b3bfd5883ff9529b72f2f08b28be0972a9f64a"
   integrity sha512-DvHZ5OuavsfWs5yfVJZestsnc3wzPvLWNk6c2nRUfo6X+OtxypGt20vDDf7Ba+MJzjL3KS1og2nw2eBbLCOUTA==