handle all price output

src/components/molecules/AssetTeaser.tsx

@@ -6,6 +6,7 @@ import Price from '../atoms/Price'
 import styles from './AssetTeaser.module.css'
 import { useMetadata } from '@oceanprotocol/react'
 import { DDO } from '@oceanprotocol/lib'
+import Loader from '../atoms/Loader'
 
 declare type AssetTeaserProps = {
   ddo: DDO
@@ -47,7 +48,11 @@ const AssetTeaser: React.FC<AssetTeaserProps> = ({
         </div>
 
         <footer className={styles.foot}>
-          {price && <Price price={price} />}
+          {price ? (
+            <Price price={price} />
+          ) : (
+            <Loader message="Retrieving price..." />
+          )}
         </footer>
       </Link>
     </article>

src/components/organisms/AssetActions/Compute.tsx

@@ -1,6 +1,5 @@
 import React, { useState, useEffect, ReactElement } from 'react'
 import { DDO } from '@oceanprotocol/lib'
-import { fromWei } from 'web3-utils'
 import compareAsBN, { Comparisson } from '../../../utils/compareAsBN'
 import Loader from '../../atoms/Loader'
 import Web3Feedback from '../../molecules/Wallet/Feedback'
@@ -17,7 +16,13 @@ import Button from '../../atoms/Button'
 import Input from '../../atoms/Input'
 import Alert from '../../atoms/Alert'
 
-export default function Compute({ ddo }: { ddo: DDO }): ReactElement {
+export default function Compute({
+  ddo,
+  price
+}: {
+  ddo: DDO
+  price: string // in OCEAN, not wei
+}): ReactElement {
   const { ocean } = useOcean()
   const { compute, isLoading, computeStepText, computeError } = useCompute()
   const computeService = ddo.findServiceByType('compute').attributes.main
@@ -36,7 +41,7 @@ export default function Compute({ ddo }: { ddo: DDO }): ReactElement {
   const [file, setFile] = useState(null)
   const [isTermsAgreed, setIsTermsAgreed] = useState(true)
 
-  const isFree = computeService.cost === '0'
+  const isFree = price === '0'
 
   const isComputeButtonDisabled =
     isJobStarting ||
@@ -96,7 +101,11 @@ export default function Compute({ ddo }: { ddo: DDO }): ReactElement {
 
   return (
     <div className={styles.compute}>
-      <Price price={computeService.cost} />
+      {price ? (
+        <Price price={price} />
+      ) : (
+        <Loader message="Retrieving price..." />
+      )}
 
       <div className={styles.info}>
         <div className={styles.selectType}>

src/components/organisms/AssetActions/Consume.tsx

@@ -1,5 +1,4 @@
 import React, { ReactElement } from 'react'
-import { fromWei } from 'web3-utils'
 import { toast } from 'react-toastify'
 import { File as FileMetadata, DDO } from '@oceanprotocol/lib'
 import compareAsBN, { Comparisson } from '../../../utils/compareAsBN'
@@ -13,17 +12,18 @@ import { useOcean, useConsume } from '@oceanprotocol/react'
 
 export default function Consume({
   ddo,
+  price,
   file
 }: {
   ddo: DDO
+  price: string // in OCEAN, not wei
   file: FileMetadata
 }): ReactElement {
   const accessService = ddo.findServiceByType('access')
-  const { cost } = accessService.attributes.main
   const { ocean } = useOcean()
   const { consumeStepText, consume, consumeError } = useConsume()
 
-  const isFree = cost === '0'
+  const isFree = price === '0'
   // const isBalanceSufficient =
   //  isFree || compareAsBN(balanceInOcean, fromWei(cost), Comparisson.gte)
   const isDisabled = !ocean
@@ -52,7 +52,11 @@ export default function Consume({
           <File file={file} />
         </div>
         <div className={styles.pricewrapper}>
-          <Price price={cost} className={styles.price} />
+          {price ? (
+            <Price price={price} />
+          ) : (
+            <Loader message="Retrieving price..." />
+          )}
           <PurchaseButton />
         </div>
       </div>

src/components/organisms/AssetActions/index.tsx

@@ -1,10 +1,11 @@
-import React, { ReactElement } from 'react'
+import React, { ReactElement, useState, useEffect } from 'react'
 import styles from './index.module.css'
 import Compute from './Compute'
 import Consume from './Consume'
 import { MetadataMarket } from '../../../@types/Metadata'
 import { DDO } from '@oceanprotocol/lib'
 import Tabs from '../../atoms/Tabs'
+import { useMetadata } from '@oceanprotocol/react'
 
 export default function AssetActions({
   metadata,
@@ -13,12 +14,22 @@ export default function AssetActions({
   metadata: MetadataMarket
   ddo: DDO
 }): ReactElement {
-  const { access } = metadata.additionalInformation
+  const { getBestPrice } = useMetadata(ddo.id)
-  const isCompute = access && access === 'Compute'
+  const [price, setPrice] = useState<string>()
+
+  useEffect(() => {
+    async function init() {
+      const price = await getBestPrice(ddo.dataToken)
+      price && setPrice(price)
+    }
+    init()
+  }, [])
+
+  const isCompute = Boolean(ddo.findServiceByType('compute'))
   const UseContent = isCompute ? (
-    <Compute ddo={ddo} />
+    <Compute ddo={ddo} price={price} />
   ) : (
-    <Consume ddo={ddo} file={metadata.main.files[0]} />
+    <Consume ddo={ddo} price={price} file={metadata.main.files[0]} />
   )
 
   const tabs = [