refactor for new react hooks

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==",
+      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
-      "dev": true
     },
     "@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": {
+    "@oceanprotocol/contracts": {
-      "version": "0.13.2",
+      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/@oceanprotocol/keeper-contracts/-/keeper-contracts-0.13.2.tgz",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/contracts/-/contracts-0.2.2.tgz",
-      "integrity": "sha512-915dcnzCHEuvsmRKqVj0RxHT3T386lSJh8WREe4dsnrXHsi1ULNYxX0Ts/cvalv6bRL+aqyaZ6gN3l3nkfwEDg=="
+      "integrity": "sha512-wu5Ub5F50vCAON0GKyv4anPPLm+oWfHViksiAewVS/xvbbnSCt4gHws2Uc1ct25tiO/2AHAyJkqEiC0ep8SHeQ=="
     },
     "@oceanprotocol/lib": {
-      "version": "0.1.1",
+      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-0.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-0.1.2.tgz",
-      "integrity": "sha512-4lCF0jzBq735QzD7TSqyc7yMmcXL5eF0G1ZYx4bu4NS/vl2nzFVTa+QjqVbx31ZhHpFLgWr8d3QTsBGxTLXpmw==",
+      "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",
+      "version": "0.0.12",
-      "resolved": "https://registry.npmjs.org/@oceanprotocol/react/-/react-0.0.11.tgz",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/react/-/react-0.0.12.tgz",
-      "integrity": "sha512-uve2rxkqD83lNo77COSzw3/38JtUkxwfTtZHmMjLfOcvn0UD98RDS6oP1+BDzqH9K2AuDvIeTwu/YGAISskL/w==",
+      "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",
+        "react": "^16.9.41",
-        "web3connect": "^1.0.0-beta.33"
+        "web3": "^1.2.9",
-      }
+        "web3modal": "^1.7.0"
-    },
-    "@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"
       }
     },
     "@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",

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/contracts": "^0.2.2",
-    "@oceanprotocol/react": "^0.0.11",
+    "@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",

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 { accountId, status, web3Modal } = useOcean()
-  const { status } = useOcean()
+  const hasSuccess = status === 1
-  const hasSuccess = ethProviderStatus === 1 && status === 1
 
-  return account ? (
+  console.log(web3Modal)
+
+  return accountId ? (
     <button className={styles.button} aria-label="Account" ref={ref}>
-      <Blockies account={account} />
+      <Blockies account={accountId} />
-      <span className={styles.address} title={account}>
+      <span className={styles.address} title={accountId}>
-        {accountTruncate(account)}
+        {accountTruncate(accountId)}
       </span>
       {!hasSuccess && (
         <Status className={styles.status} state="warning" aria-hidden />
@@ -46,7 +47,7 @@ const Account = React.forwardRef((props, ref: any) => {
   ) : (
     <button
       className={styles.button}
-      onClick={() => web3Connect.connect()}
+      onClick={() => web3Modal.toggleModal()}
       // Need the `ref` here although we do not want
       // the Tippy to show in this state.
       ref={ref}

src/components/molecules/Wallet/Details.tsx

@@ -1,15 +1,16 @@
 import React, { ReactElement } from 'react'
 import Button from '../../atoms/Button'
 import styles from './Details.module.css'
-import { useWeb3, useOcean } from '@oceanprotocol/react'
+import { useOcean } from '@oceanprotocol/react'
 import Web3Feedback from './Feedback'
 import { formatNumber } from '../../../utils'
 
 export default function Details({ attrs }: { attrs: any }): ReactElement {
-  const { balance, web3Connect } = useWeb3()
+  const { balance, web3Modal } = useOcean()
-  const { balanceInOcean } = useOcean()
+  const ethBalanceText = 'hello test'
-  const ethBalanceText = formatNumber(Number(balance))
+  // || formatNumber(Number(balance.eth))
-  const oceanBalanceText = formatNumber(Number(balanceInOcean))
+  const oceanBalanceText = 'hello test'
+  // || formatNumber(Number(balance.ocean))
 
   return (
     <div className={styles.details} {...attrs}>
@@ -24,7 +25,7 @@ export default function Details({ attrs }: { attrs: any }): ReactElement {
           <Button
             style="text"
             size="small"
-            onClick={() => web3Connect.toggleModal()}
+            onClick={() => web3Modal.toggleModal()}
           >
             Switch Wallet
           </Button>

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 { web3, status } = useOcean()
-  const { status } = useOcean()
-  const isEthProviderAbsent = ethProviderStatus === -1
-  const isEthProviderDisconnected = ethProviderStatus === 0
   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
+  const title = !web3
-    ? 'No Web3 Browser'
-    : isEthProviderDisconnected
     ? '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
+  const message = !web3
-    ? 'To download data sets you need a browser with Web3 capabilties, like Firefox with MetaMask installed.'
-    : isEthProviderDisconnected
     ? '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 ? (
     <section className={styles.feedback}>
       <Status state={state} aria-hidden />
       <h3 className={styles.title}>{title}</h3>

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 (
     <Tippy
       interactive
@@ -53,7 +50,7 @@ export default function Wallet(): ReactElement {
       animation
       onMount={onMount}
       onHide={onHide}
-      disabled={!account}
+      disabled={!accountId}
       fallback={<Account />}
     >
       <Account />

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 => (
-  <Web3Provider>
+  <OceanProvider config={oceanConfig}>{element}</OceanProvider>
-    <OceanProvider config={oceanConfig as Config}>{element}</OceanProvider>
-  </Web3Provider>
 )
 
 export default wrapRootElement