refactor for new useMetadata

package-lock.json

@@ -3232,9 +3232,9 @@
       }
     },
     "@oceanprotocol/react": {
-      "version": "0.0.37",
-      "resolved": "https://registry.npmjs.org/@oceanprotocol/react/-/react-0.0.37.tgz",
-      "integrity": "sha512-mdAjvitXjzHFCuBeRmdL3cgpcPMaKJJxBDi3gql7zg/Pgq5suOgBbswwTxjtYR56Za58E8ILFXjbsrq5O7Qzqg==",
+      "version": "0.0.38",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/react/-/react-0.0.38.tgz",
+      "integrity": "sha512-ij7/8B1BsX+ZwKJGkXq7KdbHBwnAZyreIpJK4etksaSt0PjC5KbizfM4ElnED7VVkckqhgp+6W5nx9+6ULBeGA==",
       "requires": {
         "@oceanprotocol/lib": "^0.1.12",
         "axios": "^0.19.2",

package.json

@@ -23,7 +23,7 @@
     "@loadable/component": "^5.13.1",
     "@oceanprotocol/art": "^3.0.0",
     "@oceanprotocol/lib": "^0.1.14",
-    "@oceanprotocol/react": "^0.0.37",
+    "@oceanprotocol/react": "0.0.38",
     "@oceanprotocol/typographies": "^0.1.0",
     "@sindresorhus/slugify": "^1.0.0",
     "@tippyjs/react": "^4.1.0",

src/components/atoms/Price/index.tsx

@@ -10,32 +10,18 @@ export default function Price({
   ddo,
   className,
   small,
-  conversion,
-  setPriceOutside
+  conversion
 }: {
   ddo: DDO
   className?: string
   small?: boolean
   conversion?: boolean
-  setPriceOutside?: (price: string) => void
 }): ReactElement {
-  const { ocean, chainId, accountId } = useOcean()
-  const { getBestPrice } = useMetadata()
-  const [price, setPrice] = useState<string>()
-
-  useEffect(() => {
-    if (!ocean || !accountId || !chainId) return
-
-    async function init() {
-      const price = await getBestPrice(ddo.dataToken)
-      setPrice(price)
-      setPriceOutside && price !== '' && setPriceOutside(price)
-    }
-    init()
-  }, [chainId, accountId, ocean])
+  const { ocean } = useOcean()
+  const { price } = useMetadata(ddo.id)
 
   return !ocean ? (
-    <div className={styles.empty}>Please connect your wallet to view price</div>
+    <div className={styles.empty}>Connect your wallet to view price</div>
   ) : price ? (
     <PriceUnit
       price={price}

src/components/organisms/AssetActions/Compute.tsx

@@ -17,12 +17,10 @@ import Alert from '../../atoms/Alert'
 
 export default function Compute({
   ddo,
-  isBalanceSufficient,
-  setPrice
+  isBalanceSufficient
 }: {
   ddo: DDO
   isBalanceSufficient: boolean
-  setPrice: (price: string) => void
 }): ReactElement {
   const { ocean } = useOcean()
   const { compute, isLoading, computeStepText, computeError } = useCompute()
@@ -89,7 +87,7 @@ export default function Compute({
 
   return (
     <div className={styles.compute}>
-      <Price ddo={ddo} setPriceOutside={setPrice} conversion />
+      <Price ddo={ddo} conversion />
 
       <div className={styles.info}>
         <div className={styles.selectType}>

src/components/organisms/AssetActions/Consume.tsx

@@ -12,13 +12,11 @@ import { useOcean, useConsume } from '@oceanprotocol/react'
 export default function Consume({
   ddo,
   file,
-  isBalanceSufficient,
-  setPrice
+  isBalanceSufficient
 }: {
   ddo: DDO
   file: FileMetadata
   isBalanceSufficient: boolean
-  setPrice: (price: string) => void
 }): ReactElement {
   const { ocean } = useOcean()
   const { consumeStepText, consume, consumeError } = useConsume()
@@ -49,7 +47,7 @@ export default function Consume({
           <File file={file} />
         </div>
         <div className={styles.pricewrapper}>
-          <Price ddo={ddo} setPriceOutside={setPrice} conversion />
+          <Price ddo={ddo} conversion />
           <PurchaseButton />
         </div>
       </div>

src/components/organisms/AssetActions/Pool/index.tsx

@@ -18,28 +18,29 @@ interface Balance {
 }
 
 export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
-  const { ocean, accountId, account } = useOcean()
-  const { getBestPool } = useMetadata()
-  const [poolAddress, setPoolAddress] = useState<string>()
+  const { ocean, accountId } = useOcean()
+  const { price, poolAddress } = useMetadata(ddo.id)
+
   const [poolTokens, setPoolTokens] = useState<string>()
   const [totalBalance, setTotalBalance] = useState<Balance>()
-  const [dtPrice, setDtPrice] = useState<string>()
   const [dtSymbol, setDtSymbol] = useState<string>()
   const [userBalance, setUserBalance] = useState<Balance>()
-  const [showAdd, setShowAdd] = useState<boolean>()
-  const [showRemove, setShowRemove] = useState<boolean>()
 
-  const isLoading = !ocean || !totalBalance || !userBalance || !dtPrice
+  const [showAdd, setShowAdd] = useState(false)
+  const [showRemove, setShowRemove] = useState(false)
+  const [isLoading, setIsLoading] = useState(true)
+
+  // const isLoading = !ocean || !totalBalance || !userBalance || !price
   const hasAddedLiquidity =
     userBalance && (Number(userBalance.ocean) > 0 || Number(userBalance.dt) > 0)
 
   useEffect(() => {
-    async function init() {
-      try {
-        const { poolAddress, poolPrice } = await getBestPool(ddo.dataToken)
-        setPoolAddress(poolAddress)
-        setDtPrice(poolPrice)
+    if (!ocean || !accountId || !poolAddress || !price) return
 
+    async function init() {
+      setIsLoading(true)
+
+      try {
         const dtSymbol = await ocean.datatokens.getSymbol(
           ddo.dataToken,
           accountId
@@ -63,11 +64,8 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
         setPoolTokens(poolTokens)
 
         // TODO: figure out how to get that
-        const totalPoolTokens = await ocean.accounts.getTokenBalance(
-          poolAddress,
-          account
-        )
-        console.log(totalPoolTokens)
+        // const totalPoolTokens = await ocean.pool.totalSupply(poolAddress)
+        // console.log(totalPoolTokens)
 
         // TODO: replace `dtReserve` with `totalPoolTokens`
         const userBalance = {
@@ -80,10 +78,12 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
         setUserBalance(userBalance)
       } catch (error) {
         console.error(error.message)
+      } finally {
+        setIsLoading(false)
       }
     }
     init()
-  }, [ocean, accountId])
+  }, [ocean, accountId, price, poolAddress])
 
   const poolShare =
     totalBalance &&
@@ -92,7 +92,7 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
 
   return (
     <>
-      {isLoading ? (
+      {isLoading && !userBalance ? (
         <Loader message="Retrieving pools..." />
       ) : showAdd ? (
         <Add
@@ -106,8 +106,8 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
         <>
           <div className={styles.dataToken}>
             <PriceUnit price="1" symbol={dtSymbol} /> ={' '}
-            <PriceUnit price={dtPrice} />
-            <Conversion price={dtPrice} />
+            <PriceUnit price={price} />
+            <Conversion price={price} />
             <Tooltip content="Explain how this price is determined..." />
             <div className={styles.dataTokenLinks}>
               <EtherscanLink network="rinkeby" path={`address/${poolAddress}`}>
@@ -122,7 +122,7 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
           <div className={styles.poolTokens}>
             <div className={styles.tokens}>
               <h3 className={styles.title}>
-                Your Pool Share{' '}
+                Your Liquidity{' '}
                 <Tooltip content="Explain what this represents, advantage of providing liquidity..." />
               </h3>
               <Token symbol="OCEAN" balance={userBalance.ocean} />

src/components/organisms/AssetActions/index.tsx

@@ -5,7 +5,7 @@ import Consume from './Consume'
 import { MetadataMarket } from '../../../@types/Metadata'
 import { DDO } from '@oceanprotocol/lib'
 import Tabs from '../../atoms/Tabs'
-import { useOcean } from '@oceanprotocol/react'
+import { useOcean, useMetadata } from '@oceanprotocol/react'
 import compareAsBN from '../../../utils/compareAsBN'
 import Pool from './Pool'
 
@@ -17,7 +17,7 @@ export default function AssetActions({
   ddo: DDO
 }): ReactElement {
   const { balance } = useOcean()
-  const [price, setPrice] = useState<string>()
+  const { price } = useMetadata(ddo.id)
   const [isBalanceSufficient, setIsBalanceSufficient] = useState<boolean>()
 
   const isCompute = Boolean(ddo.findServiceByType('compute'))
@@ -35,17 +35,12 @@ export default function AssetActions({
   }, [balance, price])
 
   const UseContent = isCompute ? (
-    <Compute
-      ddo={ddo}
-      isBalanceSufficient={isBalanceSufficient}
-      setPrice={setPrice}
-    />
+    <Compute ddo={ddo} isBalanceSufficient={isBalanceSufficient} />
   ) : (
     <Consume
       ddo={ddo}
       isBalanceSufficient={isBalanceSufficient}
       file={metadata.main.files[0]}
-      setPrice={setPrice}
     />
   )