diff --git a/package-lock.json b/package-lock.json index 51dfdb82c..b25f49075 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3567,15 +3567,305 @@ } }, "@oceanprotocol/react": { - "version": "0.3.22", - "resolved": "https://registry.npmjs.org/@oceanprotocol/react/-/react-0.3.22.tgz", - "integrity": "sha512-pPXi+4syzYWczfJXd292Wu7eJoaUZ1cjB7Js3TWE5E/YAZzQAYuaiUn9Lh5P8vHmxz8dl4Xn586jhRPWzyIRIw==", + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/@oceanprotocol/react/-/react-0.4.0.tgz", + "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", - "web3modal": "^1.9.1" + "web3": "1.2.11", + "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": { diff --git a/package.json b/package.json index 201dab6ea..a1008a7aa 100644 --- a/package.json +++ b/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", diff --git a/src/components/molecules/Wallet/Account.tsx b/src/components/molecules/Wallet/Account.tsx index 6d4a1fc22..be1668140 100644 --- a/src/components/molecules/Wallet/Account.tsx +++ b/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) { // prevent accidentially submitting a form the button might be in e.preventDefault() - canHandleWeb3 - ? await connect() - : (location.href = 'https://metamask.io/download.html') - } - - // prevent accidentially submitting a form the button might be in - function handleButton(e: FormEvent) { - e.preventDefault() + await connect() } 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()} > @@ -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 ) }) diff --git a/src/global/_web3modal.css b/src/global/_web3modal.css index 05b35b126..1af85932d 100644 --- a/src/global/_web3modal.css +++ b/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; } diff --git a/src/utils/wallet.ts b/src/utils/wallet.ts index ae0144cf3..fc8a2bff7 100644 --- a/src/utils/wallet.ts +++ b/src/utils/wallet.ts @@ -1,5 +1,5 @@ -import { infuraProjectId, network } from '../../app.config' -// import WalletConnectProvider from '@walletconnect/web3-provider' +import { infuraProjectId as infuraId, network } from '../../app.config' +import WalletConnectProvider from '@walletconnect/web3-provider' // import Torus from '@toruslabs/torus-embed' const web3ModalTheme = { @@ -11,12 +11,10 @@ const web3ModalTheme = { } const providerOptions = { - // walletconnect: { - // package: WalletConnectProvider, - // options: { - // infuraId: infuraProjectId - // } - // } + walletconnect: { + package: WalletConnectProvider, + options: { infuraId } + } // torus: { // package: Torus, // options: {