set price from DDO first, then from chain

src/hooks/useMetadata/useMetadata.ts

@@ -1,7 +1,13 @@
 import { useState, useEffect, useCallback } from 'react'
-import { DID, DDO, Metadata, Logger, BestPrice } from '@oceanprotocol/lib'
+import {
+  DID,
+  DDO,
+  Metadata,
+  Logger,
+  BestPrice,
+  MetadataStore
+} from '@oceanprotocol/lib'
 import { useOcean } from 'providers'
-import ProviderStatus from 'providers/OceanProvider/ProviderStatus'
 import { getBestDataTokenPrice } from 'utils/dtUtils'
 import { isDDO } from 'utils'
 
@@ -16,7 +22,7 @@ interface UseMetadata {
 }
 
 function useMetadata(asset?: DID | string | DDO): UseMetadata {
-  const { ocean, status, accountId, networkId } = useOcean()
+  const { ocean, accountId, networkId, config } = useOcean()
   const [internalDdo, setDDO] = useState<DDO>()
   const [internalDid, setDID] = useState<DID | string>()
   const [metadata, setMetadata] = useState<Metadata>()
@@ -25,11 +31,14 @@ function useMetadata(asset?: DID | string | DDO): UseMetadata {
   const [price, setPrice] = useState<BestPrice>()
 
   const getDDO = useCallback(
-    async (did: DID | string): Promise<DDO> => {
+    async (did: DID | string): Promise<DDO | undefined> => {
-      const ddo = await ocean.metadatastore.retrieveDDO(did)
+      if (!config.metadataStoreUri) return
+
+      const metadataStore = new MetadataStore(config.metadataStoreUri, Logger)
+      const ddo = await metadataStore.retrieveDDO(did)
       return ddo
     },
-    [ocean?.metadatastore]
+    [config.metadataStoreUri]
   )
 
   const getPrice = useCallback(
@@ -49,11 +58,9 @@ function useMetadata(asset?: DID | string | DDO): UseMetadata {
   // Get and set DDO based on passed DDO or DID
   //
   useEffect(() => {
-    if (!asset || !ocean || status !== ProviderStatus.CONNECTED) return
-
-    async function init(): Promise<void> {
     if (!asset) return
 
+    async function init(): Promise<void> {
       if (isDDO(asset as string | DDO | DID)) {
         setDDO(asset as DDO)
         setDID((asset as DDO).id)
@@ -66,30 +73,34 @@ function useMetadata(asset?: DID | string | DDO): UseMetadata {
       }
     }
     init()
-  }, [ocean, status, asset, getDDO])
+  }, [asset, getDDO])
 
   //
-  // Get metadata for stored DDO
+  // Get metadata & price for stored DDO
   //
   useEffect(() => {
-    if (!accountId) return
-
     async function init(): Promise<void> {
       if (!internalDdo) return
 
+      // Set price from DDO first
+      setPrice(internalDdo.price)
+
       const metadata = await getMetadata(internalDdo)
       setMetadata(metadata)
       setTitle(metadata.main.name)
-      const price = await getPrice(internalDdo.dataToken)
-      price && setPrice(price)
       setIsLoaded(true)
+
+      if (!accountId) return
+      // Set price again, but from chain
+      const priceLive = await getPrice(internalDdo.dataToken)
+      priceLive && internalDdo.price !== priceLive && setPrice(priceLive)
     }
     init()
 
     const interval = setInterval(async () => {
-      if (!internalDdo) return
+      if (!internalDdo || !accountId) return
-      const price = await getPrice(internalDdo.dataToken)
+      const priceLive = await getPrice(internalDdo.dataToken)
-      price && setPrice(price)
+      priceLive && setPrice(priceLive)
     }, 10000)
 
     return () => {