useMetadata additions

README.md

@@ -8,13 +8,13 @@
 [![js oceanprotocol](https://img.shields.io/badge/js-oceanprotocol-7b1173.svg)](https://github.com/oceanprotocol/eslint-config-oceanprotocol)
 
 ---
+
 ![iu](https://user-images.githubusercontent.com/90316/80356686-1650c080-887a-11ea-854e-bdc2bbdb0c20.jpeg)
 
 **WE ARE IN HARDWARE MODE. This project is in a conceptual phase and nothing works.**
 
 ---
 
-
 **Table of Contents**
 
 - [🏗 Installation](#-installation)
@@ -58,16 +58,21 @@ export default function MyApp({ children }: { children: React.ReactNode }): Reac
 }
 ```
 
-Then within your component use the provided hooks to interact with Ocean's functionality:
+Then within your component use the provided hooks to interact with Ocean's functionality. Each hook can be used independently:
 
 ```tsx
 import React from 'react'
-import { useOcean, useConsume } from '@oceanprotocol/react'
+import { useOcean, useMetadata, useConsume } from '@oceanprotocol/react'
+
+const did = 'did:op:0x000000000'
 
 export default function MyComponent() {
   // Initialize, get existing, or reinitialize Ocean
   const { ocean, account } = useOcean()
 
+  // Get metadata for this asset
+  const { title } = useMetadata(did)
+
   // publish asset
   const { publish, publishStep } = usePublish()
 
@@ -75,12 +80,12 @@ export default function MyComponent() {
   const { consume, consumeStep } = useConsume()
 
   async function handleClick() {
-    const ddo = 'did:op:0x000000000'
-    await consume(ddo)
+    await consume(did)
   }
 
   return (
     <div>
+      <h1>{title}</h1>
       Your account: {account}
       <button onClick={handleClick}>{consumeStep || 'Download Asset'}</button>
     </div>

package-lock.json

@@ -413,6 +413,14 @@
       "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.9.1.tgz",
       "integrity": "sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug=="
     },
+    "axios": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
+      "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
+      "requires": {
+        "follow-redirects": "1.5.10"
+      }
+    },
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
@@ -1987,6 +1995,29 @@
         "dtype": "^2.0.0"
       }
     },
+    "follow-redirects": {
+      "version": "1.5.10",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
+      "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
+      "requires": {
+        "debug": "=3.1.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
+      }
+    },
     "forever-agent": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",

package.json

@@ -18,6 +18,7 @@
   ],
   "dependencies": {
     "@oceanprotocol/squid": "^2.1.1",
+    "axios": "^0.19.2",
     "react": "^16.13.1"
   },
   "devDependencies": {

src/hooks/useMetadata/useMetadata.ts

@@ -1,14 +1,23 @@
+import { useState, useEffect } from 'react'
+import axios from 'axios'
 import { DID, DDO, MetaData } from '@oceanprotocol/squid'
 import { useOcean } from '../../providers'
 
 interface UseMetadata {
+  ddo: DDO
+  metadata: MetaData
+  title: string
   getDDO: (did: DID | string) => Promise<DDO>
   getMetadata: (did: DID | string) => Promise<MetaData>
   getTitle: (did: DID | string) => Promise<string>
+  getAllDIDs: () => Promise<DID[]>
 }
 
-function useMetadata(): UseMetadata {
-  const { aquarius } = useOcean()
+function useMetadata(did?: DID | string): UseMetadata {
+  const { aquarius, config } = useOcean()
+  const [ddo, setDDO] = useState<DDO | undefined>()
+  const [metadata, setMetadata] = useState<MetaData | undefined>()
+  const [title, setTitle] = useState<string | undefined>()
 
   async function getDDO(did: DID | string): Promise<DDO> {
     const ddo = await aquarius.retrieveDDO(did)
@@ -26,7 +35,21 @@ function useMetadata(): UseMetadata {
     return metadata.main.name
   }
 
-  return { getDDO, getMetadata, getTitle }
+  async function getAllDIDs(): Promise<DID[]> {
+    const assets = await axios(`${config.aquariusUri}/api/v1/aquarius/assets`)
+    return assets.data
+  }
+
+  useEffect(() => {
+    async function init(): Promise<void> {
+      setDDO(await getDDO(did))
+      setMetadata(await getMetadata(did))
+      setTitle(await getTitle(did))
+    }
+    init()
+  }, [])
+
+  return { ddo, metadata, title, getDDO, getMetadata, getTitle, getAllDIDs }
 }
 
 export { useMetadata, UseMetadata }

src/providers/OceanProvider/OceanProvider.tsx

@@ -22,6 +22,7 @@ interface OceanProviderValue {
   accountId: string
   balance: Balance
   status: OceanConnectionStatus
+  config: Config
 }
 
 const OceanContext = createContext(null)
@@ -92,7 +93,8 @@ function OceanProvider({
           account,
           accountId,
           balance,
-          status
+          status,
+          config
         } as OceanProviderValue
       }
     >