pass providers to web3modal

2024-11-13 16:54:53 +01:00 · 2020-07-14 17:07:57 +02:00 · 2020-07-14 17:07:57 +02:00 · 27779d538b
commit 27779d538b
parent 3e0473e8f7
5 changed files with 328 additions and 10 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -6219,6 +6219,116 @@
        "wonka": "^4.0.14"
      }
    },
+    "@walletconnect/client": {
+      "version": "1.0.15",
+      "resolved": "https://registry.npmjs.org/@walletconnect/client/-/client-1.0.15.tgz",
+      "integrity": "sha512-VC0wXnmQYvrIf7s7sgsra7Wsa7jcUukJxbFlW5mnQ58cFlpyUl8tdSHDZmfbkRmw0CazAkqjPb/DFgeeM2R7Og==",
+      "requires": {
+        "@walletconnect/core": "^1.0.15",
+        "@walletconnect/iso-crypto": "^1.0.15",
+        "@walletconnect/types": "^1.0.15",
+        "@walletconnect/utils": "^1.0.15"
+      }
+    },
+    "@walletconnect/core": {
+      "version": "1.0.15",
+      "resolved": "https://registry.npmjs.org/@walletconnect/core/-/core-1.0.15.tgz",
+      "integrity": "sha512-sTRd+7vCqtskAsLnUmvHpkxB1JPA3b+/ZQNOs97Jd8gBMzNTtiT2d263yCEjOWkpC033olE9/zrqHq7G9fekBw==",
+      "requires": {
+        "@walletconnect/socket-transport": "^1.0.15",
+        "@walletconnect/types": "^1.0.15",
+        "@walletconnect/utils": "^1.0.15"
+      }
+    },
+    "@walletconnect/http-connection": {
+      "version": "1.0.15",
+      "resolved": "https://registry.npmjs.org/@walletconnect/http-connection/-/http-connection-1.0.15.tgz",
+      "integrity": "sha512-eo0vx5/2stBIe8lI6JgIcNrwQC2lEMdqJOAA9eJceMkujm9XEVym0vGxdE74H9JKhqkm5RXoN8pS9oyk2YJsDw==",
+      "requires": {
+        "@walletconnect/types": "^1.0.15",
+        "@walletconnect/utils": "^1.0.15",
+        "xhr2-cookies": "1.1.0"
+      }
+    },
+    "@walletconnect/iso-crypto": {
+      "version": "1.0.15",
+      "resolved": "https://registry.npmjs.org/@walletconnect/iso-crypto/-/iso-crypto-1.0.15.tgz",
+      "integrity": "sha512-6iNWdU5Y8X0XsXg6WMi9k2z2W/GHcamMBshcxr+mj0Jvp2d/dbciqU4K3TiUoG22jzz8rBGRkWumhWbaiiTbow==",
+      "requires": {
+        "@walletconnect/types": "^1.0.15",
+        "@walletconnect/utils": "^1.0.15",
+        "eccrypto-js": "5.2.0"
+      }
+    },
+    "@walletconnect/mobile-registry": {
+      "version": "1.0.15",
+      "resolved": "https://registry.npmjs.org/@walletconnect/mobile-registry/-/mobile-registry-1.0.15.tgz",
+      "integrity": "sha512-VTJeq1AlvD+6Weq8ndcalXF2z8VoTez8pL/pxdulwzzqoWQIpo6Dypk67wz4oIfMMBFPQcWIZWCasD46ghqVQQ=="
+    },
+    "@walletconnect/qrcode-modal": {
+      "version": "1.0.15",
+      "resolved": "https://registry.npmjs.org/@walletconnect/qrcode-modal/-/qrcode-modal-1.0.15.tgz",
+      "integrity": "sha512-QyVw26SKPSIj99JIDzxKg6rispMXgi3r/DyovhnadwpKpVAYBzHuEelXrdbms43qL4dgL/oQEZPj+RPLFUlqbw==",
+      "requires": {
+        "@walletconnect/mobile-registry": "^1.0.15",
+        "@walletconnect/types": "^1.0.15",
+        "@walletconnect/utils": "^1.0.15",
+        "preact": "10.4.1",
+        "qrcode": "1.4.4"
+      }
+    },
+    "@walletconnect/socket-transport": {
+      "version": "1.0.15",
+      "resolved": "https://registry.npmjs.org/@walletconnect/socket-transport/-/socket-transport-1.0.15.tgz",
+      "integrity": "sha512-6XIFRIuLqYJfUNKbaTC9Vqv3PIvQhW1hRPhZ1xewlgP7CWoRmNZMmkyXPJRqwrofSYpspVicOj9dxM2QwAEL9A==",
+      "requires": {
+        "@walletconnect/types": "^1.0.15",
+        "ws": "7.3.0"
+      },
+      "dependencies": {
+        "ws": {
+          "version": "7.3.0",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-7.3.0.tgz",
+          "integrity": "sha512-iFtXzngZVXPGgpTlP1rBqsUK82p9tKqsWRPg5L56egiljujJT3vGAYnHANvFxBieXrTFavhzhxW52jnaWV+w2w=="
+        }
+      }
+    },
+    "@walletconnect/types": {
+      "version": "1.0.15",
+      "resolved": "https://registry.npmjs.org/@walletconnect/types/-/types-1.0.15.tgz",
+      "integrity": "sha512-6xrL4ZSqKnpYdi5nW3UlPHyVBmAI7C4MND5li7zT0Mfl+XKxLbcE+R5C3yNtmj10vOf2CVYwjgXfxwwTUVXl7g=="
+    },
+    "@walletconnect/utils": {
+      "version": "1.0.15",
+      "resolved": "https://registry.npmjs.org/@walletconnect/utils/-/utils-1.0.15.tgz",
+      "integrity": "sha512-V/ak5PhowcLDYfcWXia8etSiPPvqKlukkEJiZe2CCyYosGXh9/PnGHSMk5Ym1+/txt9VetqmzPVaPRXaLNrslg==",
+      "requires": {
+        "@walletconnect/types": "^1.0.15",
+        "detect-browser": "5.1.0",
+        "enc-utils": "2.1.0",
+        "js-sha3": "0.8.0"
+      },
+      "dependencies": {
+        "detect-browser": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/detect-browser/-/detect-browser-5.1.0.tgz",
+          "integrity": "sha512-WKa9p+/MNwmTiS+V2AS6eGxic+807qvnV3hC+4z2GTY+F42h1n8AynVTMMc4EJBC32qMs6yjOTpeDEQQt/AVqQ=="
+        }
+      }
+    },
+    "@walletconnect/web3-provider": {
+      "version": "1.0.15",
+      "resolved": "https://registry.npmjs.org/@walletconnect/web3-provider/-/web3-provider-1.0.15.tgz",
+      "integrity": "sha512-1auGniI2kzeDokFuZsofnFaBhIMag8T8XwkVdujYi+mb+olI9a9pq4V4xsH+ZvB1LBtiCowN30CBD5+vJwTAnA==",
+      "requires": {
+        "@walletconnect/client": "^1.0.15",
+        "@walletconnect/http-connection": "^1.0.15",
+        "@walletconnect/qrcode-modal": "^1.0.15",
+        "@walletconnect/types": "^1.0.15",
+        "@walletconnect/utils": "^1.0.15",
+        "web3-provider-engine": "15.0.12"
+      }
+    },
    "@webassemblyjs/ast": {
      "version": "1.9.0",
      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.9.0.tgz",
@ -11633,6 +11743,11 @@
        "randombytes": "^2.0.0"
      }
    },
+    "dijkstrajs": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.1.tgz",
+      "integrity": "sha1-082BIh4+pAdCz83lVtTpnpjdxxs="
+    },
    "dir-glob": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-2.0.0.tgz",
@ -11958,6 +12073,26 @@
        "safer-buffer": "^2.1.0"
      }
    },
+    "eccrypto-js": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/eccrypto-js/-/eccrypto-js-5.2.0.tgz",
+      "integrity": "sha512-pPb6CMapJ1LIzjLWxMqlrnfaEFap7qkk9wcO/b4AVSdxBQYlpOqvlPpq5SpUI4FdmfdhVD34AjN47fM8fryC4A==",
+      "requires": {
+        "aes-js": "3.1.2",
+        "enc-utils": "2.1.0",
+        "hash.js": "1.1.7",
+        "js-sha3": "0.8.0",
+        "randombytes": "2.1.0",
+        "secp256k1": "3.8.0"
+      },
+      "dependencies": {
+        "aes-js": {
+          "version": "3.1.2",
+          "resolved": "https://registry.npmjs.org/aes-js/-/aes-js-3.1.2.tgz",
+          "integrity": "sha512-e5pEa2kBnBOgR4Y/p20pskXI74UEz7de8ZGVo58asOtvSVG5YAbJeELPZxOmt+Bnz3rX753YKhfIn4X4l1PPRQ=="
+        }
+      }
+    },
    "ee-first": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@ -12040,6 +12175,23 @@
        "hoist-non-react-statics": "^3.3.0"
      }
    },
+    "enc-utils": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/enc-utils/-/enc-utils-2.1.0.tgz",
+      "integrity": "sha512-VD0eunGDyzhojePzkORWDnW88gi6tIeGb5Z6QVHugux6mMAPiXyw94fb/7WdDQEWhKMSoYRyzFFUebCqeH20PA==",
+      "requires": {
+        "bn.js": "4.11.8",
+        "is-typedarray": "1.0.0",
+        "typedarray-to-buffer": "3.1.5"
+      },
+      "dependencies": {
+        "bn.js": {
+          "version": "4.11.8",
+          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.8.tgz",
+          "integrity": "sha512-ItfYfPLkWHUjckQCk8xC+LwxgK8NYcXywGigJgSwOP8Y2iyWT4f2vsZnoOXTTbo+o5yXmIUJ4gn5538SO5S3gA=="
+        }
+      }
+    },
    "encodeurl": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
@ -27197,6 +27349,11 @@
        "jimp": "^0.10.2"
      }
    },
+    "preact": {
+      "version": "10.4.1",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.4.1.tgz",
+      "integrity": "sha512-WKrRpCSwL2t3tpOOGhf2WfTpcmbpxaWtDbdJdKdjd0aEiTkvOmS4NBkG6kzlaAHI9AkQ3iVqbFWM3Ei7mZ4o1Q=="
+    },
    "prebuild-install": {
      "version": "5.3.5",
      "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-5.3.5.tgz",
@ -27550,6 +27707,144 @@
      "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
      "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc="
    },
+    "qrcode": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.4.4.tgz",
+      "integrity": "sha512-oLzEC5+NKFou9P0bMj5+v6Z40evexeE29Z9cummZXZ9QXyMr3lphkURzxjXgPJC5azpxcshoDWV1xE46z+/c3Q==",
+      "requires": {
+        "buffer": "^5.4.3",
+        "buffer-alloc": "^1.2.0",
+        "buffer-from": "^1.1.1",
+        "dijkstrajs": "^1.0.1",
+        "isarray": "^2.0.1",
+        "pngjs": "^3.3.0",
+        "yargs": "^13.2.4"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg=="
+        },
+        "camelcase": {
+          "version": "5.3.1",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
+        },
+        "cliui": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
+          "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
+          "requires": {
+            "string-width": "^3.1.0",
+            "strip-ansi": "^5.2.0",
+            "wrap-ansi": "^5.1.0"
+          }
+        },
+        "emoji-regex": {
+          "version": "7.0.3",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
+          "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA=="
+        },
+        "find-up": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+          "requires": {
+            "locate-path": "^3.0.0"
+          }
+        },
+        "isarray": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+          "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw=="
+        },
+        "locate-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+          "requires": {
+            "p-locate": "^3.0.0",
+            "path-exists": "^3.0.0"
+          }
+        },
+        "p-limit": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+          "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+          "requires": {
+            "p-try": "^2.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+          "requires": {
+            "p-limit": "^2.0.0"
+          }
+        },
+        "p-try": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+          "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ=="
+        },
+        "string-width": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+          "requires": {
+            "emoji-regex": "^7.0.1",
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^5.1.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "requires": {
+            "ansi-regex": "^4.1.0"
+          }
+        },
+        "wrap-ansi": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
+          "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
+          "requires": {
+            "ansi-styles": "^3.2.0",
+            "string-width": "^3.0.0",
+            "strip-ansi": "^5.0.0"
+          }
+        },
+        "yargs": {
+          "version": "13.3.2",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz",
+          "integrity": "sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==",
+          "requires": {
+            "cliui": "^5.0.0",
+            "find-up": "^3.0.0",
+            "get-caller-file": "^2.0.1",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^2.0.0",
+            "set-blocking": "^2.0.0",
+            "string-width": "^3.0.0",
+            "which-module": "^2.0.0",
+            "y18n": "^4.0.0",
+            "yargs-parser": "^13.1.2"
+          }
+        },
+        "yargs-parser": {
+          "version": "13.1.2",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz",
+          "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==",
+          "requires": {
+            "camelcase": "^5.0.0",
+            "decamelize": "^1.2.0"
+          }
+        }
+      }
+    },
    "qs": {
      "version": "6.7.0",
      "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
--- a/package.json
+++ b/package.json
@ -29,6 +29,7 @@
    "@sindresorhus/slugify": "^1.0.0",
    "@tippyjs/react": "^4.1.0",
    "@types/classnames": "^2.2.10",
+    "@walletconnect/web3-provider": "^1.0.15",
    "axios": "^0.19.2",
    "classnames": "^2.2.6",
    "date-fns": "^2.14.0",
--- a/src/components/molecules/Wallet/Account.tsx
+++ b/src/components/molecules/Wallet/Account.tsx
@ -4,12 +4,7 @@ import { useOcean } from '@oceanprotocol/react'
 import { toDataUrl } from 'ethereum-blockies'
 import { ReactComponent as Caret } from '../../../images/caret.svg'
 import Status from '../../atoms/Status'
-
-function accountTruncate(account: string) {
-  const middle = account.substring(6, 38)
-  const truncated = account.replace(middle, '…')
-  return truncated
-}
+import { accountTruncate, connectWallet } from '../../../utils/wallet'

 const Blockies = ({ account }: { account: string | undefined }) => {
  if (!account) return null
@ -45,7 +40,7 @@ const Account = React.forwardRef((props, ref: any) => {
  ) : (
    <button
      className={styles.button}
-      onClick={() => connect()}
+      onClick={async () => await connectWallet(connect)}
      // Need the `ref` here although we do not want
      // the Tippy to show in this state.
      ref={ref}
--- a/src/components/molecules/Wallet/Details.tsx
+++ b/src/components/molecules/Wallet/Details.tsx
@ -4,9 +4,10 @@ import styles from './Details.module.css'
 import { useOcean } from '@oceanprotocol/react'
 import Web3Feedback from './Feedback'
 import { formatNumber } from '../../../utils'
+import { connectWallet } from '../../../utils/wallet'

 export default function Details({ attrs }: { attrs: any }): ReactElement {
-  const { balance, web3Modal, logout } = useOcean()
+  const { balance, connect, logout } = useOcean()
  const ethBalanceText = 'hello test'
  // || formatNumber(Number(balance.eth))
  const oceanBalanceText = 'hello test'
@ -26,8 +27,8 @@ export default function Details({ attrs }: { attrs: any }): ReactElement {
            style="text"
            size="small"
            onClick={async () => {
-              logout()
-              await web3Modal.toggleModal()
+              await logout()
+              await connectWallet(connect)
            }}
          >
            Switch Wallet
--- a/src/utils/wallet.ts
+++ b/src/utils/wallet.ts
@ -0,0 +1,26 @@
+import { OceanProviderValue } from '@oceanprotocol/react'
+
+export async function connectWallet(
+  connect: OceanProviderValue['connect']
+): Promise<void> {
+  const { default: WalletConnectProvider } = await import(
+    '@walletconnect/web3-provider'
+  )
+  const providerOptions = {
+    /* See Provider Options Section */
+    walletconnect: {
+      package: WalletConnectProvider, // required
+      options: {
+        infuraId: 'INFURA_ID' // required
+      }
+    }
+  }
+
+  await connect({ providerOptions })
+}
+
+export function accountTruncate(account: string): string {
+  const middle = account.substring(6, 38)
+  const truncated = account.replace(middle, '…')
+  return truncated
+}