restore WalletConnect (#290)

* restore WalletConnect

* bump @oceanprotocol/react

* visual fixes for walletconnect modal

package-lock.json

@@ -3567,15 +3567,305 @@
       }
     },
     "@oceanprotocol/react": {
-      "version": "0.3.22",
+      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/@oceanprotocol/react/-/react-0.3.22.tgz",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/react/-/react-0.4.0.tgz",
-      "integrity": "sha512-pPXi+4syzYWczfJXd292Wu7eJoaUZ1cjB7Js3TWE5E/YAZzQAYuaiUn9Lh5P8vHmxz8dl4Xn586jhRPWzyIRIw==",
+      "integrity": "sha512-deqBjPvt94OhPdtmI600NyvvRkIFs6LFlOQ9OT/pVMY2ArE8tg5AjqbZW60sGoM+CTxkGpgPPjJfKXmuY/7hNg==",
       "requires": {
         "@oceanprotocol/lib": "^0.9.18",
         "axios": "^0.21.0",
         "decimal.js": "^10.2.1",
-        "web3": "^1.3.0",
+        "web3": "1.2.11",
-        "web3modal": "^1.9.1"
+        "web3modal": "^1.9.2"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "12.19.8",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-12.19.8.tgz",
+          "integrity": "sha512-D4k2kNi0URNBxIRCb1khTnkWNHv8KSL1owPmS/K5e5t8B2GzMReY7AsJIY1BnP5KdlgC4rj9jk2IkDMasIE7xg=="
+        },
+        "eth-lib": {
+          "version": "0.2.8",
+          "resolved": "https://registry.npmjs.org/eth-lib/-/eth-lib-0.2.8.tgz",
+          "integrity": "sha512-ArJ7x1WcWOlSpzdoTBX8vkwlkSQ85CjjifSZtV4co64vWxSV8geWfPI9x4SVYu3DSxnX4yWFVTtGL+j9DUFLNw==",
+          "requires": {
+            "bn.js": "^4.11.6",
+            "elliptic": "^6.4.0",
+            "xhr-request-promise": "^0.1.2"
+          }
+        },
+        "oboe": {
+          "version": "2.1.4",
+          "resolved": "https://registry.npmjs.org/oboe/-/oboe-2.1.4.tgz",
+          "integrity": "sha1-IMiM2wwVNxuwQRklfU/dNLCqSfY=",
+          "requires": {
+            "http-https": "^1.0.0"
+          }
+        },
+        "uuid": {
+          "version": "3.3.2",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.2.tgz",
+          "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA=="
+        },
+        "web3": {
+          "version": "1.2.11",
+          "resolved": "https://registry.npmjs.org/web3/-/web3-1.2.11.tgz",
+          "integrity": "sha512-mjQ8HeU41G6hgOYm1pmeH0mRAeNKJGnJEUzDMoerkpw7QUQT4exVREgF1MYPvL/z6vAshOXei25LE/t/Bxl8yQ==",
+          "requires": {
+            "web3-bzz": "1.2.11",
+            "web3-core": "1.2.11",
+            "web3-eth": "1.2.11",
+            "web3-eth-personal": "1.2.11",
+            "web3-net": "1.2.11",
+            "web3-shh": "1.2.11",
+            "web3-utils": "1.2.11"
+          }
+        },
+        "web3-bzz": {
+          "version": "1.2.11",
+          "resolved": "https://registry.npmjs.org/web3-bzz/-/web3-bzz-1.2.11.tgz",
+          "integrity": "sha512-XGpWUEElGypBjeFyUhTkiPXFbDVD6Nr/S5jznE3t8cWUA0FxRf1n3n/NuIZeb0H9RkN2Ctd/jNma/k8XGa3YKg==",
+          "requires": {
+            "@types/node": "^12.12.6",
+            "got": "9.6.0",
+            "swarm-js": "^0.1.40",
+            "underscore": "1.9.1"
+          }
+        },
+        "web3-core": {
+          "version": "1.2.11",
+          "resolved": "https://registry.npmjs.org/web3-core/-/web3-core-1.2.11.tgz",
+          "integrity": "sha512-CN7MEYOY5ryo5iVleIWRE3a3cZqVaLlIbIzDPsvQRUfzYnvzZQRZBm9Mq+ttDi2STOOzc1MKylspz/o3yq/LjQ==",
+          "requires": {
+            "@types/bn.js": "^4.11.5",
+            "@types/node": "^12.12.6",
+            "bignumber.js": "^9.0.0",
+            "web3-core-helpers": "1.2.11",
+            "web3-core-method": "1.2.11",
+            "web3-core-requestmanager": "1.2.11",
+            "web3-utils": "1.2.11"
+          }
+        },
+        "web3-core-helpers": {
+          "version": "1.2.11",
+          "resolved": "https://registry.npmjs.org/web3-core-helpers/-/web3-core-helpers-1.2.11.tgz",
+          "integrity": "sha512-PEPoAoZd5ME7UfbnCZBdzIerpe74GEvlwT4AjOmHeCVZoIFk7EqvOZDejJHt+feJA6kMVTdd0xzRNN295UhC1A==",
+          "requires": {
+            "underscore": "1.9.1",
+            "web3-eth-iban": "1.2.11",
+            "web3-utils": "1.2.11"
+          }
+        },
+        "web3-core-method": {
+          "version": "1.2.11",
+          "resolved": "https://registry.npmjs.org/web3-core-method/-/web3-core-method-1.2.11.tgz",
+          "integrity": "sha512-ff0q76Cde94HAxLDZ6DbdmKniYCQVtvuaYh+rtOUMB6kssa5FX0q3vPmixi7NPooFnbKmmZCM6NvXg4IreTPIw==",
+          "requires": {
+            "@ethersproject/transactions": "^5.0.0-beta.135",
+            "underscore": "1.9.1",
+            "web3-core-helpers": "1.2.11",
+            "web3-core-promievent": "1.2.11",
+            "web3-core-subscriptions": "1.2.11",
+            "web3-utils": "1.2.11"
+          }
+        },
+        "web3-core-promievent": {
+          "version": "1.2.11",
+          "resolved": "https://registry.npmjs.org/web3-core-promievent/-/web3-core-promievent-1.2.11.tgz",
+          "integrity": "sha512-il4McoDa/Ox9Agh4kyfQ8Ak/9ABYpnF8poBLL33R/EnxLsJOGQG2nZhkJa3I067hocrPSjEdlPt/0bHXsln4qA==",
+          "requires": {
+            "eventemitter3": "4.0.4"
+          }
+        },
+        "web3-core-requestmanager": {
+          "version": "1.2.11",
+          "resolved": "https://registry.npmjs.org/web3-core-requestmanager/-/web3-core-requestmanager-1.2.11.tgz",
+          "integrity": "sha512-oFhBtLfOiIbmfl6T6gYjjj9igOvtyxJ+fjS+byRxiwFJyJ5BQOz4/9/17gWR1Cq74paTlI7vDGxYfuvfE/mKvA==",
+          "requires": {
+            "underscore": "1.9.1",
+            "web3-core-helpers": "1.2.11",
+            "web3-providers-http": "1.2.11",
+            "web3-providers-ipc": "1.2.11",
+            "web3-providers-ws": "1.2.11"
+          }
+        },
+        "web3-core-subscriptions": {
+          "version": "1.2.11",
+          "resolved": "https://registry.npmjs.org/web3-core-subscriptions/-/web3-core-subscriptions-1.2.11.tgz",
+          "integrity": "sha512-qEF/OVqkCvQ7MPs1JylIZCZkin0aKK9lDxpAtQ1F8niEDGFqn7DT8E/vzbIa0GsOjL2fZjDhWJsaW+BSoAW1gg==",
+          "requires": {
+            "eventemitter3": "4.0.4",
+            "underscore": "1.9.1",
+            "web3-core-helpers": "1.2.11"
+          }
+        },
+        "web3-eth": {
+          "version": "1.2.11",
+          "resolved": "https://registry.npmjs.org/web3-eth/-/web3-eth-1.2.11.tgz",
+          "integrity": "sha512-REvxW1wJ58AgHPcXPJOL49d1K/dPmuw4LjPLBPStOVkQjzDTVmJEIsiLwn2YeuNDd4pfakBwT8L3bz1G1/wVsQ==",
+          "requires": {
+            "underscore": "1.9.1",
+            "web3-core": "1.2.11",
+            "web3-core-helpers": "1.2.11",
+            "web3-core-method": "1.2.11",
+            "web3-core-subscriptions": "1.2.11",
+            "web3-eth-abi": "1.2.11",
+            "web3-eth-accounts": "1.2.11",
+            "web3-eth-contract": "1.2.11",
+            "web3-eth-ens": "1.2.11",
+            "web3-eth-iban": "1.2.11",
+            "web3-eth-personal": "1.2.11",
+            "web3-net": "1.2.11",
+            "web3-utils": "1.2.11"
+          }
+        },
+        "web3-eth-abi": {
+          "version": "1.2.11",
+          "resolved": "https://registry.npmjs.org/web3-eth-abi/-/web3-eth-abi-1.2.11.tgz",
+          "integrity": "sha512-PkRYc0+MjuLSgg03QVWqWlQivJqRwKItKtEpRUaxUAeLE7i/uU39gmzm2keHGcQXo3POXAbOnMqkDvOep89Crg==",
+          "requires": {
+            "@ethersproject/abi": "5.0.0-beta.153",
+            "underscore": "1.9.1",
+            "web3-utils": "1.2.11"
+          }
+        },
+        "web3-eth-accounts": {
+          "version": "1.2.11",
+          "resolved": "https://registry.npmjs.org/web3-eth-accounts/-/web3-eth-accounts-1.2.11.tgz",
+          "integrity": "sha512-6FwPqEpCfKIh3nSSGeo3uBm2iFSnFJDfwL3oS9pyegRBXNsGRVpgiW63yhNzL0796StsvjHWwQnQHsZNxWAkGw==",
+          "requires": {
+            "crypto-browserify": "3.12.0",
+            "eth-lib": "0.2.8",
+            "ethereumjs-common": "^1.3.2",
+            "ethereumjs-tx": "^2.1.1",
+            "scrypt-js": "^3.0.1",
+            "underscore": "1.9.1",
+            "uuid": "3.3.2",
+            "web3-core": "1.2.11",
+            "web3-core-helpers": "1.2.11",
+            "web3-core-method": "1.2.11",
+            "web3-utils": "1.2.11"
+          }
+        },
+        "web3-eth-contract": {
+          "version": "1.2.11",
+          "resolved": "https://registry.npmjs.org/web3-eth-contract/-/web3-eth-contract-1.2.11.tgz",
+          "integrity": "sha512-MzYuI/Rq2o6gn7vCGcnQgco63isPNK5lMAan2E51AJLknjSLnOxwNY3gM8BcKoy4Z+v5Dv00a03Xuk78JowFow==",
+          "requires": {
+            "@types/bn.js": "^4.11.5",
+            "underscore": "1.9.1",
+            "web3-core": "1.2.11",
+            "web3-core-helpers": "1.2.11",
+            "web3-core-method": "1.2.11",
+            "web3-core-promievent": "1.2.11",
+            "web3-core-subscriptions": "1.2.11",
+            "web3-eth-abi": "1.2.11",
+            "web3-utils": "1.2.11"
+          }
+        },
+        "web3-eth-ens": {
+          "version": "1.2.11",
+          "resolved": "https://registry.npmjs.org/web3-eth-ens/-/web3-eth-ens-1.2.11.tgz",
+          "integrity": "sha512-dbW7dXP6HqT1EAPvnniZVnmw6TmQEKF6/1KgAxbo8iBBYrVTMDGFQUUnZ+C4VETGrwwaqtX4L9d/FrQhZ6SUiA==",
+          "requires": {
+            "content-hash": "^2.5.2",
+            "eth-ens-namehash": "2.0.8",
+            "underscore": "1.9.1",
+            "web3-core": "1.2.11",
+            "web3-core-helpers": "1.2.11",
+            "web3-core-promievent": "1.2.11",
+            "web3-eth-abi": "1.2.11",
+            "web3-eth-contract": "1.2.11",
+            "web3-utils": "1.2.11"
+          }
+        },
+        "web3-eth-iban": {
+          "version": "1.2.11",
+          "resolved": "https://registry.npmjs.org/web3-eth-iban/-/web3-eth-iban-1.2.11.tgz",
+          "integrity": "sha512-ozuVlZ5jwFC2hJY4+fH9pIcuH1xP0HEFhtWsR69u9uDIANHLPQQtWYmdj7xQ3p2YT4bQLq/axKhZi7EZVetmxQ==",
+          "requires": {
+            "bn.js": "^4.11.9",
+            "web3-utils": "1.2.11"
+          }
+        },
+        "web3-eth-personal": {
+          "version": "1.2.11",
+          "resolved": "https://registry.npmjs.org/web3-eth-personal/-/web3-eth-personal-1.2.11.tgz",
+          "integrity": "sha512-42IzUtKq9iHZ8K9VN0vAI50iSU9tOA1V7XU2BhF/tb7We2iKBVdkley2fg26TxlOcKNEHm7o6HRtiiFsVK4Ifw==",
+          "requires": {
+            "@types/node": "^12.12.6",
+            "web3-core": "1.2.11",
+            "web3-core-helpers": "1.2.11",
+            "web3-core-method": "1.2.11",
+            "web3-net": "1.2.11",
+            "web3-utils": "1.2.11"
+          }
+        },
+        "web3-net": {
+          "version": "1.2.11",
+          "resolved": "https://registry.npmjs.org/web3-net/-/web3-net-1.2.11.tgz",
+          "integrity": "sha512-sjrSDj0pTfZouR5BSTItCuZ5K/oZPVdVciPQ6981PPPIwJJkCMeVjD7I4zO3qDPCnBjBSbWvVnLdwqUBPtHxyg==",
+          "requires": {
+            "web3-core": "1.2.11",
+            "web3-core-method": "1.2.11",
+            "web3-utils": "1.2.11"
+          }
+        },
+        "web3-providers-http": {
+          "version": "1.2.11",
+          "resolved": "https://registry.npmjs.org/web3-providers-http/-/web3-providers-http-1.2.11.tgz",
+          "integrity": "sha512-psh4hYGb1+ijWywfwpB2cvvOIMISlR44F/rJtYkRmQ5jMvG4FOCPlQJPiHQZo+2cc3HbktvvSJzIhkWQJdmvrA==",
+          "requires": {
+            "web3-core-helpers": "1.2.11",
+            "xhr2-cookies": "1.1.0"
+          }
+        },
+        "web3-providers-ipc": {
+          "version": "1.2.11",
+          "resolved": "https://registry.npmjs.org/web3-providers-ipc/-/web3-providers-ipc-1.2.11.tgz",
+          "integrity": "sha512-yhc7Y/k8hBV/KlELxynWjJDzmgDEDjIjBzXK+e0rHBsYEhdCNdIH5Psa456c+l0qTEU2YzycF8VAjYpWfPnBpQ==",
+          "requires": {
+            "oboe": "2.1.4",
+            "underscore": "1.9.1",
+            "web3-core-helpers": "1.2.11"
+          }
+        },
+        "web3-providers-ws": {
+          "version": "1.2.11",
+          "resolved": "https://registry.npmjs.org/web3-providers-ws/-/web3-providers-ws-1.2.11.tgz",
+          "integrity": "sha512-ZxnjIY1Er8Ty+cE4migzr43zA/+72AF1myzsLaU5eVgdsfV7Jqx7Dix1hbevNZDKFlSoEyq/3j/jYalh3So1Zg==",
+          "requires": {
+            "eventemitter3": "4.0.4",
+            "underscore": "1.9.1",
+            "web3-core-helpers": "1.2.11",
+            "websocket": "^1.0.31"
+          }
+        },
+        "web3-shh": {
+          "version": "1.2.11",
+          "resolved": "https://registry.npmjs.org/web3-shh/-/web3-shh-1.2.11.tgz",
+          "integrity": "sha512-B3OrO3oG1L+bv3E1sTwCx66injW1A8hhwpknDUbV+sw3fehFazA06z9SGXUefuFI1kVs4q2vRi0n4oCcI4dZDg==",
+          "requires": {
+            "web3-core": "1.2.11",
+            "web3-core-method": "1.2.11",
+            "web3-core-subscriptions": "1.2.11",
+            "web3-net": "1.2.11"
+          }
+        },
+        "web3-utils": {
+          "version": "1.2.11",
+          "resolved": "https://registry.npmjs.org/web3-utils/-/web3-utils-1.2.11.tgz",
+          "integrity": "sha512-3Tq09izhD+ThqHEaWYX4VOT7dNPdZiO+c/1QMA0s5X2lDFKK/xHJb7cyTRRVzN2LvlHbR7baS1tmQhSua51TcQ==",
+          "requires": {
+            "bn.js": "^4.11.9",
+            "eth-lib": "0.2.8",
+            "ethereum-bloom-filters": "^1.0.6",
+            "ethjs-unit": "0.1.6",
+            "number-to-bn": "1.7.0",
+            "randombytes": "^2.1.0",
+            "underscore": "1.9.1",
+            "utf8": "3.0.0"
+          }
+        }
       }
     },
     "@oceanprotocol/typographies": {

package.json

@@ -25,7 +25,7 @@
     "@loadable/component": "^5.14.1",
     "@oceanprotocol/art": "^3.0.0",
     "@oceanprotocol/lib": "^0.9.18",
-    "@oceanprotocol/react": "^0.3.23",
+    "@oceanprotocol/react": "^0.4.0",
     "@oceanprotocol/typographies": "^0.1.0",
     "@sindresorhus/slugify": "^1.0.0",
     "@tippyjs/react": "^4.2.0",

src/components/molecules/Wallet/Account.tsx

@@ -25,20 +25,12 @@ const Blockies = ({ account }: { account: string | undefined }) => {
 const Account = React.forwardRef((props, ref: any) => {
   const { accountId, status, connect, networkId } = useOcean()
   const hasSuccess = status === 1 && networkId === 1
-  const canHandleWeb3 = window?.web3 || window?.ethereum
 
   async function handleActivation(e: FormEvent<HTMLButtonElement>) {
     // prevent accidentially submitting a form the button might be in
     e.preventDefault()
 
-    canHandleWeb3
+    await connect()
-      ? await connect()
-      : (location.href = 'https://metamask.io/download.html')
-  }
-
-  // prevent accidentially submitting a form the button might be in
-  function handleButton(e: FormEvent<HTMLButtonElement>) {
-    e.preventDefault()
   }
 
   return accountId ? (
@@ -46,7 +38,7 @@ const Account = React.forwardRef((props, ref: any) => {
       className={styles.button}
       aria-label="Account"
       ref={ref}
-      onClick={(e) => handleButton(e)}
+      onClick={(e) => e.preventDefault()}
     >
       <Blockies account={accountId} />
       <span className={styles.address} title={accountId}>
@@ -65,7 +57,7 @@ const Account = React.forwardRef((props, ref: any) => {
       // the Tippy to show in this state.
       ref={ref}
     >
-      {canHandleWeb3 ? 'Connect Wallet' : 'Get MetaMask'}
+      Connect Wallet
     </button>
   )
 })

src/global/_web3modal.css

@@ -48,6 +48,29 @@ div.web3modal-provider-description {
   margin-top: 0;
 }
 
+div.walletconnect-modal__base {
+  background: var(--background-body);
+  border-radius: var(--border-radius);
+  border: 1px solid var(--border-color);
+  box-shadow: 0 6px 17px 0 var(--box-shadow-color);
+}
+
+div.walletconnect-modal__header p {
+  color: var(--font-color-heading);
+}
+
+p.walletconnect-qrcode__text {
+  color: var(--color-secondary);
+}
+
+svg.walletconnect-qrcode__image path:first-child {
+  fill: var(--background-body);
+}
+
+svg.walletconnect-qrcode__image path:last-child {
+  stroke: var(--font-color-heading);
+}
+
 #torusIframe {
   z-index: 3;
 }

src/utils/wallet.ts

@@ -1,5 +1,5 @@
-import { infuraProjectId, network } from '../../app.config'
+import { infuraProjectId as infuraId, network } from '../../app.config'
-// import WalletConnectProvider from '@walletconnect/web3-provider'
+import WalletConnectProvider from '@walletconnect/web3-provider'
 // import Torus from '@toruslabs/torus-embed'
 
 const web3ModalTheme = {
@@ -11,12 +11,10 @@ const web3ModalTheme = {
 }
 
 const providerOptions = {
-  // walletconnect: {
+  walletconnect: {
-  //   package: WalletConnectProvider,
+    package: WalletConnectProvider,
-  //   options: {
+    options: { infuraId }
-  //     infuraId: infuraProjectId
+  }
-  //   }
-  // }
   // torus: {
   //   package: Torus,
   //   options: {