From c9a043adcef15bcec57a3dd2572cd8f312708810 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Tue, 14 Jul 2020 16:18:16 +0200 Subject: [PATCH] refactor for new react hooks --- package-lock.json | 121 +++++++++++++------ package.json | 5 +- src/components/molecules/Wallet/Account.tsx | 19 +-- src/components/molecules/Wallet/Details.tsx | 13 +- src/components/molecules/Wallet/Feedback.tsx | 24 ++-- src/components/molecules/Wallet/index.tsx | 9 +- src/helpers/wrapRootElement.tsx | 6 +- 7 files changed, 114 insertions(+), 83 deletions(-) diff --git a/package-lock.json b/package-lock.json index e6b406892..1e40e5af1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1375,8 +1375,7 @@ "@emotion/stylis": { "version": "0.8.5", "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", - "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==", - "dev": true + "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" }, "@emotion/unitless": { "version": "0.7.5", @@ -3966,15 +3965,15 @@ "resolved": "https://registry.npmjs.org/@oceanprotocol/art/-/art-3.0.0.tgz", "integrity": "sha512-j4PEZSVtKSqxDYMVh/hd5vk088Bg6a6QkrUMTXN9Q6OIFAMfHM235f1AxaakNrEyK0FKMD908KuJEdfFLRn9Hw==" }, - "@oceanprotocol/keeper-contracts": { - "version": "0.13.2", - "resolved": "https://registry.npmjs.org/@oceanprotocol/keeper-contracts/-/keeper-contracts-0.13.2.tgz", - "integrity": "sha512-915dcnzCHEuvsmRKqVj0RxHT3T386lSJh8WREe4dsnrXHsi1ULNYxX0Ts/cvalv6bRL+aqyaZ6gN3l3nkfwEDg==" + "@oceanprotocol/contracts": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/@oceanprotocol/contracts/-/contracts-0.2.2.tgz", + "integrity": "sha512-wu5Ub5F50vCAON0GKyv4anPPLm+oWfHViksiAewVS/xvbbnSCt4gHws2Uc1ct25tiO/2AHAyJkqEiC0ep8SHeQ==" }, "@oceanprotocol/lib": { - "version": "0.1.1", - "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-0.1.1.tgz", - "integrity": "sha512-4lCF0jzBq735QzD7TSqyc7yMmcXL5eF0G1ZYx4bu4NS/vl2nzFVTa+QjqVbx31ZhHpFLgWr8d3QTsBGxTLXpmw==", + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-0.1.2.tgz", + "integrity": "sha512-v4Y0u7WnhhA33uIMuGKlWqGdlZLen7xRcwCBMvTlLp13Z3K+lOcg7UTByVxnKy2Tg2//wMYUWfuhSsk4nDA/DA==", "requires": { "@ethereum-navigator/navigator": "^0.5.0", "bignumber.js": "^9.0.0", @@ -3989,39 +3988,16 @@ } }, "@oceanprotocol/react": { - "version": "0.0.11", - "resolved": "https://registry.npmjs.org/@oceanprotocol/react/-/react-0.0.11.tgz", - "integrity": "sha512-uve2rxkqD83lNo77COSzw3/38JtUkxwfTtZHmMjLfOcvn0UD98RDS6oP1+BDzqH9K2AuDvIeTwu/YGAISskL/w==", + "version": "0.0.12", + "resolved": "https://registry.npmjs.org/@oceanprotocol/react/-/react-0.0.12.tgz", + "integrity": "sha512-AVatjgQV4/fV4oIjj8Lz/TnK5OJUBEDx+jdQGx0fUPAT0m3X10EWbRx33x7mvxseHLsYrl/WU2SjlCbEYfED2g==", "requires": { - "@oceanprotocol/squid": "^2.2.0", + "@oceanprotocol/contracts": "^0.2.2", + "@oceanprotocol/lib": "^0.1.2", "axios": "^0.19.2", - "react": "^16.13.1", - "web3connect": "^1.0.0-beta.33" - } - }, - "@oceanprotocol/secret-store-client": { - "version": "0.0.15", - "resolved": "https://registry.npmjs.org/@oceanprotocol/secret-store-client/-/secret-store-client-0.0.15.tgz", - "integrity": "sha512-5yNNA+qdjut9/nMiFKJd4D4io+GhzdfvdqVd5YMkgT9RV1qDosGj6NVsKArYay6g+tQH7pCJ6Y1FiAbhaaFB9g==", - "requires": { - "node-fetch": "^2.6.0" - } - }, - "@oceanprotocol/squid": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/@oceanprotocol/squid/-/squid-2.2.0.tgz", - "integrity": "sha512-ISI+8mGl5lCPqLw/YPS/e0PhaqgexuGiwxKcCGAMSo1p8sgunr6FOrMVoYhYr52QpfodxOY8Iiy3zv4HC8O2Mg==", - "requires": { - "@ethereum-navigator/navigator": "^0.5.0", - "@oceanprotocol/keeper-contracts": "^0.13.2", - "@oceanprotocol/secret-store-client": "^0.0.15", - "bignumber.js": "^9.0.0", - "deprecated-decorator": "^0.1.6", - "node-fetch": "^2.6.0", - "save-file": "^2.3.1", - "uuid": "^8.0.0", - "web3": "^1.2.6", - "whatwg-url": "^8.0.0" + "react": "^16.9.41", + "web3": "^1.2.9", + "web3modal": "^1.7.0" } }, "@oceanprotocol/typographies": { @@ -11448,6 +11424,11 @@ "repeat-string": "^1.5.4" } }, + "detect-browser": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/detect-browser/-/detect-browser-5.1.1.tgz", + "integrity": "sha512-5n2aWI57qC3kZaK4j2zYsG6L1LrxgLptGCNhMQgdKhVn6cSdcq43pp6xHPfTHG3TYM6myF4tIPWiZtfdVDgb9w==" + }, "detect-indent": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-6.0.0.tgz", @@ -34241,6 +34222,66 @@ "url-loader": "^1.1.2" } }, + "web3modal": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/web3modal/-/web3modal-1.8.0.tgz", + "integrity": "sha512-FsLZ3xnSK+jT22LCZz1M7Jibz/4e4Lf2wScKcNWKNJ4BzLWCp16Mmv6Hq4bgn5zOOqd3ADclH3TzS0l5DoCIKQ==", + "requires": { + "detect-browser": "^5.1.0", + "prop-types": "^15.7.2", + "react": "^16.8.6", + "react-dom": "^16.8.6", + "styled-components": "^5.1.1", + "tslib": "^1.10.0" + }, + "dependencies": { + "@emotion/is-prop-valid": { + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", + "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", + "requires": { + "@emotion/memoize": "0.7.4" + } + }, + "@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==" + }, + "css-to-react-native": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz", + "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==", + "requires": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, + "postcss-value-parser": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz", + "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==" + }, + "styled-components": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.1.1.tgz", + "integrity": "sha512-1ps8ZAYu2Husx+Vz8D+MvXwEwvMwFv+hqqUwhNlDN5ybg6A+3xyW1ECrAgywhvXapNfXiz79jJyU0x22z0FFTg==", + "requires": { + "@babel/helper-module-imports": "^7.0.0", + "@babel/traverse": "^7.4.5", + "@emotion/is-prop-valid": "^0.8.8", + "@emotion/stylis": "^0.8.4", + "@emotion/unitless": "^0.7.4", + "babel-plugin-styled-components": ">= 1", + "css-to-react-native": "^3.0.0", + "hoist-non-react-statics": "^3.0.0", + "shallowequal": "^1.1.0", + "supports-color": "^5.5.0" + } + } + } + }, "webidl-conversions": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-5.0.0.tgz", diff --git a/package.json b/package.json index f76679bb9..0d8eb850f 100644 --- a/package.json +++ b/package.json @@ -22,8 +22,9 @@ "@loadable/component": "^5.13.1", "@now/node": "^1.7.2", "@oceanprotocol/art": "^3.0.0", - "@oceanprotocol/lib": "^0.1.1", - "@oceanprotocol/react": "^0.0.11", + "@oceanprotocol/contracts": "^0.2.2", + "@oceanprotocol/lib": "^0.1.2", + "@oceanprotocol/react": "^0.0.12", "@oceanprotocol/typographies": "^0.1.0", "@sindresorhus/slugify": "^1.0.0", "@tippyjs/react": "^4.1.0", diff --git a/src/components/molecules/Wallet/Account.tsx b/src/components/molecules/Wallet/Account.tsx index 38c9d1657..92b67b673 100644 --- a/src/components/molecules/Wallet/Account.tsx +++ b/src/components/molecules/Wallet/Account.tsx @@ -1,6 +1,6 @@ import React from 'react' import styles from './Account.module.css' -import { useWeb3, useOcean } from '@oceanprotocol/react' +import { useOcean } from '@oceanprotocol/react' import { toDataUrl } from 'ethereum-blockies' import { ReactComponent as Caret } from '../../../images/caret.svg' import Status from '../../atoms/Status' @@ -28,15 +28,16 @@ const Blockies = ({ account }: { account: string | undefined }) => { // Forward ref for Tippy.js // eslint-disable-next-line const Account = React.forwardRef((props, ref: any) => { - const { account, web3Connect, ethProviderStatus } = useWeb3() - const { status } = useOcean() - const hasSuccess = ethProviderStatus === 1 && status === 1 + const { accountId, status, web3Modal } = useOcean() + const hasSuccess = status === 1 - return account ? ( + console.log(web3Modal) + + return accountId ? ( diff --git a/src/components/molecules/Wallet/Feedback.tsx b/src/components/molecules/Wallet/Feedback.tsx index 1169fc587..85fd92659 100644 --- a/src/components/molecules/Wallet/Feedback.tsx +++ b/src/components/molecules/Wallet/Feedback.tsx @@ -1,7 +1,7 @@ import React, { ReactElement } from 'react' import Status from '../../atoms/Status' import styles from './Feedback.module.css' -import { useWeb3, useOcean } from '@oceanprotocol/react' +import { useOcean } from '@oceanprotocol/react' export declare type Web3Error = { status: 'error' | 'warning' | 'success' @@ -14,37 +14,29 @@ export default function Web3Feedback({ }: { isBalanceInsufficient?: boolean }): ReactElement { - const { ethProviderStatus } = useWeb3() - const { status } = useOcean() - const isEthProviderAbsent = ethProviderStatus === -1 - const isEthProviderDisconnected = ethProviderStatus === 0 + const { web3, status } = useOcean() const isOceanDisconnected = status === 0 const isOceanConnectionError = status === -1 - const hasSuccess = ethProviderStatus === 1 && status === 1 - const state = isEthProviderAbsent + const state = !web3 ? 'error' - : hasSuccess && !isBalanceInsufficient + : web3 && !isBalanceInsufficient ? 'success' : 'warning' - const title = isEthProviderAbsent - ? 'No Web3 Browser' - : isEthProviderDisconnected + const title = !web3 ? 'No account connected' : isOceanDisconnected ? 'Not connected to Pacific network' : isOceanConnectionError ? 'Error connecting to Ocean' - : hasSuccess + : web3 ? isBalanceInsufficient === true ? 'Insufficient balance' : 'Connected to Ocean' : 'Something went wrong' - const message = isEthProviderAbsent - ? 'To download data sets you need a browser with Web3 capabilties, like Firefox with MetaMask installed.' - : isEthProviderDisconnected + const message = !web3 ? 'Please connect your Web3 wallet.' : isOceanDisconnected ? 'Please connect in MetaMask to custom RPC https://pacific.oceanprotocol.com.' @@ -54,7 +46,7 @@ export default function Web3Feedback({ ? 'You do not have enough OCEAN in your wallet to purchase this asset.' : 'Something went wrong.' - return !hasSuccess ? ( + return web3 ? (

{title}

diff --git a/src/components/molecules/Wallet/index.tsx b/src/components/molecules/Wallet/index.tsx index 90dd4adb8..e1d4eb970 100644 --- a/src/components/molecules/Wallet/index.tsx +++ b/src/components/molecules/Wallet/index.tsx @@ -1,10 +1,10 @@ import React, { ReactElement } from 'react' import loadable from '@loadable/component' import { useSpring, animated } from 'react-spring' -import { useWeb3 } from '@oceanprotocol/react' import Account from './Account' import Details from './Details' import styles from './index.module.css' +import { useOcean } from '@oceanprotocol/react' const Tippy = loadable(() => import('@tippyjs/react/headless')) @@ -15,7 +15,7 @@ const animation = { } export default function Wallet(): ReactElement { - const { account, ethProviderStatus } = useWeb3() + const { accountId } = useOcean() const [props, setSpring] = useSpring(() => animation.from) function onMount() { @@ -34,9 +34,6 @@ export default function Wallet(): ReactElement { }) } - const isEthProviderAbsent = ethProviderStatus === -1 - if (isEthProviderAbsent) return null - return ( } > diff --git a/src/helpers/wrapRootElement.tsx b/src/helpers/wrapRootElement.tsx index 6dab2a77f..bda70a661 100644 --- a/src/helpers/wrapRootElement.tsx +++ b/src/helpers/wrapRootElement.tsx @@ -1,5 +1,5 @@ import React, { ReactElement } from 'react' -import { Web3Provider, OceanProvider, Config } from '@oceanprotocol/react' +import { OceanProvider } from '@oceanprotocol/react' import { oceanConfig } from '../../app.config' const wrapRootElement = ({ @@ -7,9 +7,7 @@ const wrapRootElement = ({ }: { element: ReactElement }): ReactElement => ( - - {element} - + {element} ) export default wrapRootElement