example updates

README.md

@@ -71,7 +71,7 @@ export default function MyComponent() {
   const { ocean, account } = useOcean()
 
   // Get metadata for this asset
-  const { title } = useMetadata(did)
+  const { title, metadata } = useMetadata(did)
 
   // publish asset
   const { publish, publishStep } = usePublish()
@@ -86,7 +86,9 @@ export default function MyComponent() {
   return (
     <div>
       <h1>{title}</h1>
-      Your account: {account}
+      <p>Price: {metadata.main.price}</p>
+
+      <p>Your account: {account}</p>
       <button onClick={handleClick}>{consumeStep || 'Download Asset'}</button>
     </div>
   )

src/hooks/useConsume/useConsume.ts

@@ -9,6 +9,9 @@ interface UseConsume {
   consumeError?: string
 }
 
+// TODO: do something with this object,
+// consumeStep should probably return one of those strings
+// instead of just a number
 export const feedback: { [key in number]: string } = {
   99: 'Decrypting file URL...',
   0: '1/3 Asking for agreement signature...',
@@ -19,6 +22,8 @@ export const feedback: { [key in number]: string } = {
 }
 
 function useConsume(): UseConsume {
+  // TODO: figure out if a hook within a hook could lead to problems.
+  // Otherwise we could just require `ocean` to be passed to `useConsume()`
   const { ocean, account, accountId } = useOcean()
   const [consumeStep, setConsumeStep] = useState<number | undefined>()
   const [consumeError, setConsumeError] = useState<string | undefined>()
@@ -32,16 +37,16 @@ function useConsume(): UseConsume {
       const agreements = await ocean.keeper.conditions.accessSecretStoreCondition.getGrantedDidByConsumer(
         accountId
       )
-      const agreement = agreements.find((el: AgreementData) => el.did === did)
+      const agreement = agreements.find((el: { did: string }) => el.did === did)
       const agreementId = agreement
         ? agreement.agreementId
         : await ocean.assets
-            .order(did, account)
+            .order(did as string, account)
             .next((step: number) => setConsumeStep(step))
 
       // manually add another step here for better UX
       setConsumeStep(4)
-      await ocean.assets.consume(agreementId, did, account, '')
+      await ocean.assets.consume(agreementId, did as string, account, '')
     } catch (error) {
       setConsumeError(error.message)
     } finally {

src/hooks/useMetadata/useMetadata.ts

@@ -42,9 +42,12 @@ function useMetadata(did?: DID | string): UseMetadata {
 
   useEffect(() => {
     async function init(): Promise<void> {
-      setDDO(await getDDO(did))
-      setMetadata(await getMetadata(did))
-      setTitle(await getTitle(did))
+      const ddo = await getDDO(did)
+      setDDO(ddo)
+
+      const metadata = await getMetadata(did)
+      setMetadata(metadata)
+      setTitle(metadata.main.name)
     }
     init()
   }, [])

src/providers/OceanProvider/OceanProvider.tsx

@@ -45,12 +45,17 @@ function OceanProvider({
     OceanConnectionStatus.NOT_CONNECTED
   )
 
+  // -------------------------------------------------------------
+  // 1. On mount, connect to Aquarius instance right away
+  // -------------------------------------------------------------
   useEffect(() => {
-    // on mount, connect to Aquarius instance right away
     const aquarius = new Aquarius(config.aquariusUri, Logger)
     setAquarius(aquarius)
   }, [])
 
+  // -------------------------------------------------------------
+  // 2. Once `web3` becomes available, connect to the whole network
+  // -------------------------------------------------------------
   useEffect(() => {
     async function init(): Promise<void> {
       const { ocean, account, accountId, balance } = await connectOcean(
@@ -73,6 +78,9 @@ function OceanProvider({
     }
   }, [web3])
 
+  // -------------------------------------------------------------
+  // 3. Once `ocean` becomes available, spit out some info about it
+  // -------------------------------------------------------------
   useEffect(() => {
     async function debug(): Promise<void> {
       if (!ocean) return
@@ -103,7 +111,8 @@ function OceanProvider({
   )
 }
 
-const useOcean = () => useContext(OceanContext)
+// Helper hook to access the provider values
+const useOcean = (): OceanProviderValue => useContext(OceanContext)
 
 export {
   OceanProvider,