refactor price component

src/components/atoms/Price/index.module.css

@@ -2,6 +2,7 @@
   font-weight: var(--font-weight-bold);
   font-size: var(--font-size-large);
   color: var(--brand-grey-dark);
+  line-height: 1;
 }
 
 .price span:first-child {

src/components/atoms/Price/index.tsx

@@ -1,20 +1,35 @@
-import React, { ReactElement } from 'react'
+import React, { ReactElement, useState, useEffect } from 'react'
 import classNames from 'classnames/bind'
 import PriceConversion from './Conversion'
 import styles from './index.module.css'
 import { formatCurrency } from '@coingecko/cryptoformat'
+import { useMetadata } from '@oceanprotocol/react'
+import { DDO } from '@oceanprotocol/lib'
+import Loader from '../Loader'
+import Tooltip from '../Tooltip'
 
 const cx = classNames.bind(styles)
 
 export default function Price({
-  price,
+  ddo,
   className,
   small
 }: {
-  price: string // expects price in OCEAN, not wei
+  ddo: DDO
   className?: string
   small?: boolean
 }): ReactElement {
+  const { getBestPrice } = useMetadata(ddo.id)
+  const [price, setPrice] = useState<string>()
+
+  useEffect(() => {
+    async function init() {
+      const price = await getBestPrice(ddo.dataToken)
+      setPrice(price)
+    }
+    init()
+  }, [])
+
   const styleClasses = cx({
     price: true,
     small: small,
@@ -32,5 +47,14 @@ export default function Price({
     </>
   )
 
-  return <div className={styleClasses}>{displayPrice}</div>
+  return price ? (
+    <div className={styleClasses}>{displayPrice}</div>
+  ) : price === '' ? (
+    <div>
+      No price found{' '}
+      <Tooltip content="We could not find a pool for this data set, which can have multiple reasons. Is your wallet connected to the correct network?" />
+    </div>
+  ) : (
+    <Loader message="Retrieving price..." />
+  )
 }

src/components/molecules/AssetTeaser.tsx

@@ -23,17 +23,6 @@ const AssetTeaser: React.FC<AssetTeaserProps> = ({
   const { description } = metadata.additionalInformation
   const isCompute = Boolean(ddo.findServiceByType('compute'))
 
-  const { getBestPrice } = useMetadata(ddo.id)
-  const [price, setPrice] = useState<string>()
-
-  useEffect(() => {
-    async function init() {
-      const price = await getBestPrice(ddo.dataToken)
-      setPrice(price)
-    }
-    init()
-  }, [])
-
   return (
     <article className={styles.teaser}>
       <Link to={`/asset/${ddo.id}`} className={styles.link}>
@@ -47,13 +36,7 @@ const AssetTeaser: React.FC<AssetTeaserProps> = ({
         </div>
 
         <footer className={styles.foot}>
-          {price ? (
+          <Price ddo={ddo} small />
-            <Price price={price} small />
-          ) : price === '' ? (
-            'No price found'
-          ) : (
-            <Loader message="Retrieving price..." />
-          )}
         </footer>
       </Link>
     </article>

src/components/organisms/AssetActions/Compute.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, ReactElement } from 'react'
+import React, { useState, ReactElement } from 'react'
 import { DDO } from '@oceanprotocol/lib'
 import compareAsBN, { Comparisson } from '../../../utils/compareAsBN'
 import Loader from '../../atoms/Loader'
@@ -16,13 +16,7 @@ import Button from '../../atoms/Button'
 import Input from '../../atoms/Input'
 import Alert from '../../atoms/Alert'
 
-export default function Compute({
+export default function Compute({ ddo }: { ddo: DDO }): ReactElement {
-  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
@@ -41,7 +35,7 @@ export default function Compute({
   const [file, setFile] = useState(null)
   const [isTermsAgreed, setIsTermsAgreed] = useState(true)
 
-  const isFree = price === '0'
+  // const isFree = price === '0'
 
   const isComputeButtonDisabled =
     isJobStarting ||
@@ -101,13 +95,7 @@ export default function Compute({
 
   return (
     <div className={styles.compute}>
-      {price ? (
+      <Price ddo={ddo} />
-        <Price price={price} small />
-      ) : price === '' ? (
-        'No price found'
-      ) : (
-        <Loader message="Retrieving price..." />
-      )}
 
       <div className={styles.info}>
         <div className={styles.selectType}>

src/components/organisms/AssetActions/Consume.module.css

@@ -12,16 +12,18 @@
   flex-shrink: 0;
 }
 
-.consume button {
+.pricewrapper {
-  margin-left: calc(var(--spacer) / 4);
+  display: flex;
+  flex-wrap: wrap;
 }
 
-.consume button:first-of-type {
+.pricewrapper button {
-  margin-left: 0;
+  margin-top: calc(var(--spacer) / 2);
+  align-self: flex-end;
 }
 
-.price {
+.pricewrapper > div {
-  margin-bottom: calc(var(--spacer) / 2);
+  min-height: 30px;
 }
 
 .feedback {

src/components/organisms/AssetActions/Consume.tsx

@@ -1,7 +1,6 @@
 import React, { ReactElement } from 'react'
 import { toast } from 'react-toastify'
 import { File as FileMetadata, DDO } from '@oceanprotocol/lib'
-import compareAsBN, { Comparisson } from '../../../utils/compareAsBN'
 import Button from '../../atoms/Button'
 import File from '../../atoms/File'
 import Price from '../../atoms/Price'
@@ -12,20 +11,13 @@ 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 { ocean } = useOcean()
   const { consumeStepText, consume, consumeError } = useConsume()
-
-  const isFree = price === '0'
-  // const isBalanceSufficient =
-  //  isFree || compareAsBN(balanceInOcean, fromWei(cost), Comparisson.gte)
   const isDisabled = !ocean
 
   if (consumeError) {
@@ -41,7 +33,7 @@ export default function Consume({
         onClick={() => consume(ddo.id, ddo.dataToken, 'access')}
         disabled={isDisabled}
       >
-        {isFree ? 'Download' : 'Buy'}
+        Buy
       </Button>
     )
 
@@ -52,13 +44,7 @@ export default function Consume({
           <File file={file} />
         </div>
         <div className={styles.pricewrapper}>
-          {price ? (
+          <Price ddo={ddo} />
-            <Price price={price} small />
-          ) : price === '' ? (
-            'No price found'
-          ) : (
-            <Loader message="Retrieving price..." />
-          )}
           <PurchaseButton />
         </div>
       </div>

src/components/organisms/AssetActions/index.tsx

@@ -1,11 +1,10 @@
-import React, { ReactElement, useState, useEffect } from 'react'
+import React, { ReactElement } 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,
@@ -14,22 +13,12 @@ export default function AssetActions({
   metadata: MetadataMarket
   ddo: DDO
 }): ReactElement {
-  const { getBestPrice } = useMetadata(ddo.id)
-  const [price, setPrice] = useState<string>()
-
-  useEffect(() => {
-    async function init() {
-      const price = await getBestPrice(ddo.dataToken)
-      setPrice(price)
-    }
-    init()
-  }, [])
-
   const isCompute = Boolean(ddo.findServiceByType('compute'))
+
   const UseContent = isCompute ? (
-    <Compute ddo={ddo} price={price} />
+    <Compute ddo={ddo} />
   ) : (
-    <Consume ddo={ddo} price={price} file={metadata.main.files[0]} />
+    <Consume ddo={ddo} file={metadata.main.files[0]} />
   )
 
   const tabs = [