output price on asset teaser

src/components/molecules/AssetTeaser.tsx

@@ -1,31 +1,44 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import { Link } from 'gatsby'
 import Dotdotdot from 'react-dotdotdot'
 import { MetadataMarket } from '../../@types/Metadata'
 import Price from '../atoms/Price'
 import styles from './AssetTeaser.module.css'
+import { useMetadata } from '@oceanprotocol/react'
+import { DDO } from '@oceanprotocol/lib'
 
 declare type AssetTeaserProps = {
-  did: string
+  ddo: DDO
   metadata: MetadataMarket
 }
 
 const AssetTeaser: React.FC<AssetTeaserProps> = ({
-  did,
+  ddo,
   metadata
 }: AssetTeaserProps) => {
   if (!metadata.additionalInformation) return null
 
   const { name } = metadata.main
-  const { description, access } = metadata.additionalInformation
+  const { description } = metadata.additionalInformation
+
+  const { getBestPrice } = useMetadata(ddo.id)
+  const [price, setPrice] = useState<string>()
+
+  useEffect(() => {
+    async function init() {
+      const price = await getBestPrice(ddo.dataToken)
+      price && setPrice(price)
+    }
+    init()
+  }, [])
 
   return (
     <article className={styles.teaser}>
-      <Link to={`/asset/${did}`} className={styles.link}>
+      <Link to={`/asset/${ddo.id}`} className={styles.link}>
         <h1 className={styles.title}>{name}</h1>
-        {access === 'Compute' && (
+        {/* {access === 'Compute' && (
           <div className={styles.accessLabel}>{access}</div>
-        )}
+        )} */}
 
         <div className={styles.content}>
           <Dotdotdot tagName="p" clamp={3}>
@@ -33,7 +46,9 @@ const AssetTeaser: React.FC<AssetTeaserProps> = ({
           </Dotdotdot>
         </div>
 
-        <footer className={styles.foot}>{/* <Price price={price} /> */}</footer>
+        <footer className={styles.foot}>
+          {price && <Price price={price} />}
+        </footer>
       </Link>
     </article>
   )

src/components/organisms/AssetList.tsx

@@ -50,9 +50,7 @@ const AssetList: React.FC<AssetListProps> = ({ queryResult }) => {
               'metadata'
             )
 
-            return (
-              <AssetTeaser did={ddo.id} metadata={attributes} key={ddo.id} />
-            )
+            return <AssetTeaser ddo={ddo} metadata={attributes} key={ddo.id} />
           })
         ) : (
           <div className={styles.empty}>