added bestPrice, updated example,readme

README.md

@@ -64,7 +64,7 @@ export default function MyComponent() {
   const { ocean, web3, account } = useOcean()
 
   // Get metadata for this asset
-  const { title, metadata, isLoaded, getBestPrice } = useMetadata(did)
+  const { title, metadata, bestPrice } = useMetadata(did)
   const [price, setPrice] = useState<string>()
 
   // publish asset
@@ -73,16 +73,6 @@ export default function MyComponent() {
   // consume asset
   const { consume, consumeStep } = useConsume()
 
-  useEffect(() => {
-    async function init(): Promise<void> {
-      if (isLoaded) {
-        const price = await getBestPrice()
-        setPrice(price)
-        }
-      }
-    init()
-  }, [isLoaded])
-
   async function handleDownload() {
     await consume(did)
   }
@@ -90,7 +80,7 @@ export default function MyComponent() {
   return (
     <div>
       <h1>{title}</h1>
-      <p>Price: {price}</p>
+      <p>Price: {bestPrice}</p>
 
       <p>Your account: {account}</p>
       <button onClick={handleDownload}>

example/src/MetadataExample.tsx

@@ -2,23 +2,12 @@ import React, { useEffect, useState } from 'react'
 import { useMetadata } from '@oceanprotocol/react'
 
 export function MetadataExample({ did }: { did: string }) {
-  const { title, isLoaded, getBestPrice } = useMetadata(did)
-  const [price, setPrice] = useState<string>()
-
-  useEffect(() => {
-    async function init(): Promise<void> {
-      if (isLoaded) {
-        const price = await getBestPrice()
-        setPrice(price)
-      }
-    }
-    init()
-  }, [isLoaded])
+  const { title, bestPrice } = useMetadata(did)
 
   return (
     <>
       <div>
-        {title} - {price}
+        {title} - {bestPrice}
       </div>
     </>
   )

src/hooks/useMetadata/useMetadata.ts

@@ -9,6 +9,7 @@ interface UseMetadata {
   did: DID | string
   metadata: Metadata
   title: string
+  bestPrice: string
   isLoaded: boolean
   getBestPrice: (dataTokenAddress?: string) => Promise<string>
   getBestPool: (
@@ -23,6 +24,7 @@ function useMetadata(did?: DID | string, ddo?: DDO): UseMetadata {
   const [metadata, setMetadata] = useState<Metadata | undefined>()
   const [title, setTitle] = useState<string | undefined>()
   const [isLoaded, setIsLoaded] = useState(false)
+  const [bestPrice, setBestPrice] = useState<string | undefined>()
 
   async function getDDO(did: DID | string): Promise<DDO> {
     if (status === ProviderStatus.CONNECTED) {
@@ -79,6 +81,8 @@ function useMetadata(did?: DID | string, ddo?: DDO): UseMetadata {
         const metadata = await getMetadata()
         setMetadata(metadata)
         setTitle(metadata.main.name)
+        const price = await getBestPrice()
+        setBestPrice(price)
         setIsLoaded(true)
       }
     }
@@ -89,6 +93,7 @@ function useMetadata(did?: DID | string, ddo?: DDO): UseMetadata {
     did: internalDid,
     metadata,
     title,
+    bestPrice,
     isLoaded,
     getBestPrice,
     getBestPool