Merge pull request #88 from oceanprotocol/feature/metadata

metadata refactor , example

README.md

@@ -64,7 +64,8 @@ export default function MyComponent() {
   const { ocean, web3, account } = useOcean()
 
   // Get metadata for this asset
-  const { title, metadata } = useMetadata(did)
+  const { title, metadata, bestPrice } = useMetadata(did)
+  const [price, setPrice] = useState<string>()
 
   // publish asset
   const { publish, publishStep } = usePublish()
@@ -79,7 +80,7 @@ export default function MyComponent() {
   return (
     <div>
       <h1>{title}</h1>
-      <p>Price: {web3.utils.fromWei(metadata.main.price)}</p>
+      <p>Price: {bestPrice}</p>
 
       <p>Your account: {account}</p>
       <button onClick={handleDownload}>

example/src/AllDdos.tsx

@@ -4,6 +4,7 @@ import { DDO } from '@oceanprotocol/lib'
 import { useState } from 'react'
 import { useEffect } from 'react'
 import shortid from 'shortid'
+import { MetadataExample } from './MetadataExample'
 export function AllDdos() {
   const { accountId, chainId, account, ocean } = useOcean()
 
@@ -32,7 +33,7 @@ export function AllDdos() {
         {ddos?.map((ddo) => {
           return (
             <div key={shortid.generate()}>
-              {ddo.id}
+              <MetadataExample did={ddo.id} />
               <br />
             </div>
           )

example/src/App.tsx

@@ -10,6 +10,7 @@ import { ConsumeDdo } from './ConsumeDdo'
 import WalletConnectProvider from '@walletconnect/web3-provider'
 import Torus from '@toruslabs/torus-embed'
 import { NetworkMonitor } from './NetworkMonitor'
+import { MetadataExample } from './MetadataExample'
 
 // factory Address needs to be updated each time you deploy the contract on local network
 const config = {
@@ -53,11 +54,7 @@ function App() {
   }, [])
 
   return (
-    <OceanProvider
-      initialConfig={configRinkeby}
-      web3ModalOpts={web3ModalOpts}
-      marketFeeAddress={'0x4D156A2ef69ffdDC55838176C6712C90f60a2285'}
-    >
+    <OceanProvider initialConfig={configRinkeby} web3ModalOpts={web3ModalOpts}>
       <div className="container">
         <NetworkMonitor />
         <div>

example/src/MetadataExample.tsx

@@ -0,0 +1,14 @@
+import React, { useEffect, useState } from 'react'
+import { useMetadata } from '@oceanprotocol/react'
+
+export function MetadataExample({ did }: { did: string }) {
+  const { title, bestPrice } = useMetadata(did)
+
+  return (
+    <>
+      <div>
+        {title} - {bestPrice}
+      </div>
+    </>
+  )
+}

src/hooks/useMetadata/README.md

@@ -2,6 +2,11 @@
 
 Get metadata for a specific data asset.
 
+`useMetadata` has 3 uses:
+ - `useMetadata(did)` : it gets the ddo and then loads all the values (title, metadata etc)
+ - `useMetadata(ddo)` : it uses the passed ddo and the loads all the values, in case you already got a list of ddo, so you don't have to fetch the ddo once again
+ - `useMetadata()` : loads nothing, useful for using functions like `getBestPrice` or `getBestPool` (maybe more in the future) with minimal calls
+
 ## Usage
 
 ```tsx
@@ -12,14 +17,14 @@ const did = 'did:op:0x000000000'
 
 export default function MyComponent() {
   // Get metadata for this asset
-  const { ddo, title, metadata } = useMetadata(did)
+  const { ddo, title, metadata, bestPrice} = useMetadata(did)
 
   const { main, additionalInformation } = metadata
 
   return (
     <div>
       <h1>{title}</h1>
-      <p>Price: {main.price}</p>
+      <p>Price: {bestPrice}</p>
     </div>
   )
 }

src/hooks/useMetadata/useMetadata.ts

@@ -1,81 +1,107 @@
 import { useState, useEffect } from 'react'
-import { DID, DDO, Metadata, MetadataStore, Logger } from '@oceanprotocol/lib'
+import { DID, DDO, Metadata, Logger } from '@oceanprotocol/lib'
 import { useOcean } from '../../providers'
 import ProviderStatus from '../../providers/OceanProvider/ProviderStatus'
 import { getBestDataTokenPrice, getCheapestPool } from '../../utils/dtUtils'
 
 interface UseMetadata {
   ddo: DDO
+  did: DID | string
   metadata: Metadata
   title: string
-  getDDO: (did: DID | string) => Promise<DDO>
-  getMetadata: (did: DID | string) => Promise<Metadata>
-  getTitle: (did: DID | string) => Promise<string>
-  getBestPrice: (dataTokenAddress: string) => Promise<string>
+  bestPrice: string
+  isLoaded: boolean
+  getBestPrice: (dataTokenAddress?: string) => Promise<string>
   getBestPool: (
-    dataTokenAddress: string
+    dataTokenAddress?: string
   ) => Promise<{ poolAddress: string; poolPrice: string }>
 }
 
-function useMetadata(did?: DID | string): UseMetadata {
+function useMetadata(did?: DID | string, ddo?: DDO): UseMetadata {
   const { ocean, status, config, accountId } = useOcean()
-  const [ddo, setDDO] = useState<DDO | undefined>()
+  const [internalDdo, setDDO] = useState<DDO | undefined>()
+  const [internalDid, setDID] = useState<DID | string | undefined>()
   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) {
       const ddo = await ocean.metadatastore.retrieveDDO(did)
       return ddo
     }
-
-    // fallback hitting MetadataStore directly
-    const metadataStore = new MetadataStore(config.metadataStoreUri, Logger)
-    const ddo = await metadataStore.retrieveDDO(did)
-    return ddo
   }
 
-  async function getBestPrice(dataTokenAddress: string): Promise<string> {
+  async function getBestPrice(dataTokenAddress?: string): Promise<string> {
+    if (!dataTokenAddress) dataTokenAddress = internalDdo.dataToken
     return await getBestDataTokenPrice(ocean, accountId, dataTokenAddress)
   }
   async function getBestPool(
     dataTokenAddress: string
   ): Promise<{ poolAddress: string; poolPrice: string }> {
+    if (!dataTokenAddress) dataTokenAddress = internalDdo.dataToken
     return await getCheapestPool(ocean, accountId, dataTokenAddress)
   }
 
-  async function getMetadata(did: DID | string): Promise<Metadata> {
-    const ddo = await getDDO(did)
-    if (!ddo) return
-    const metadata = ddo.findServiceByType('metadata')
+  async function getMetadata(): Promise<Metadata> {
+    if (!internalDdo) return
+    const metadata = internalDdo.findServiceByType('metadata')
     return metadata.attributes
   }
 
-  async function getTitle(did: DID | string): Promise<string> {
-    const metadata = await getMetadata(did)
+  async function getTitle(): Promise<string> {
+    const metadata = await getMetadata()
     return metadata.main.name
   }
 
   useEffect(() => {
     async function init(): Promise<void> {
-      if (!did) return
-      const ddo = await getDDO(did)
-      setDDO(ddo)
-
-      const metadata = await getMetadata(did)
-      setMetadata(metadata)
-      setTitle(metadata.main.name)
+      Logger.debug('meta init', status)
+      if (ocean && status === ProviderStatus.CONNECTED) {
+        if (ddo) {
+          setDDO(ddo)
+          setDID(ddo.id)
+        }
+        Logger.debug('meta init', did)
+        if (did && !ddo) {
+          const ddo = await getDDO(did)
+          Logger.debug('DDO', ddo)
+          setDDO(ddo)
+          setDID(did)
+        }
+      }
     }
     init()
-  }, [ocean])
+  }, [ocean, status])
+
+  useEffect(() => {
+    async function init(): Promise<void> {
+      if (internalDdo) {
+        const metadata = await getMetadata()
+        setMetadata(metadata)
+        setTitle(metadata.main.name)
+        const price = await getBestPrice()
+        setBestPrice(price)
+        setIsLoaded(true)
+      }
+    }
+    init()
+
+    const interval = setInterval(async () => {
+      const price = await getBestPrice()
+      setBestPrice(price)
+    }, 10000)
+    return () => clearInterval(interval)
+  }, [internalDdo])
 
   return {
-    ddo,
+    ddo: internalDdo,
+    did: internalDid,
     metadata,
     title,
-    getDDO,
-    getMetadata,
-    getTitle,
+    bestPrice,
+    isLoaded,
     getBestPrice,
     getBestPool
   }