tinker tinker

README.md

@@ -18,6 +18,7 @@
 - [⬆️ Releases](#️-releases)
 - [📜 Changelog](#-changelog)
 - [🎁 Contribute](#-contribute)
+- [🧜 Authors](#-authors)
 - [🏛 License](#-license)
 
 ## 🏗 Installation
@@ -59,8 +60,11 @@ export default function MyComponent() {
   // Initialize, get existing, or reinitialize Ocean
   const { ocean, account } = useOcean()
 
+  // publish asset
+  const { publish, publishStep } = usePublish()
+
   // consume asset
-  const { consume, isLoading, step } = useConsume()
+  const { consume, consumeStep } = useConsume()
 
   async function handleClick() {
     const ddo = 'did:op:0x000000000'
@@ -70,9 +74,7 @@ export default function MyComponent() {
   return (
     <div>
       Your account: {account}
-      <button onClick={handleClick}>
-        {isLoading ? step : 'Download Asset'}
-      </button>
+      <button onClick={handleClick}>{consumeStep || 'Download Asset'}</button>
     </div>
   )
 }
@@ -123,6 +125,16 @@ See the [CHANGELOG.md](./CHANGELOG.md) file.
 
 See the page titled "[Ways to Contribute](https://docs.oceanprotocol.com/concepts/contributing/)" in the Ocean Protocol documentation.
 
+## 🧜 Authors
+
+Created based on the work and learnings of the Ocean Protocol marketplace team:
+
+- [@kremalicious](https://github.com/kremalicious)
+- [@maxieprotocol](https://github.com/maxieprotocol)
+- [@unjapones](https://github.com/unjapones)
+- [@pfmescher](https://github.com/pfmescher)
+- [@mihaisc](https://github.com/mihaisc)
+
 ## 🏛 License
 
 ```text

package.json

@@ -33,7 +33,7 @@
     "typescript": "^3.8.3"
   },
   "peerDependencies": {
-    "react": "^16.8.0"
+    "react": ">=16.8.0"
   },
   "repository": {
     "type": "git",

src/hooks/index.ts

@@ -1 +1,2 @@
-export * from './useConsume/useConsume'
+export * from './useConsume'
+export * from './useMetadata'

src/hooks/useConsume/useConsume.ts

@@ -1,7 +1,56 @@
-import { useState, useEffect } from 'react'
-import { Ocean } from '@oceanprotocol/squid'
+import { useState } from 'react'
+import { DID } from '@oceanprotocol/squid'
+import { useOcean } from '../../providers'
+import { AgreementData } from '@oceanprotocol/squid/dist/node/keeper/contracts/managers'
 
-async function useConsume() {}
+interface UseConsume {
+  consume: (did: DID) => Promise<void>
+  consumeStep?: number
+  consumeError?: string
+}
 
-export { useConsume }
+export const feedback: { [key in number]: string } = {
+  99: 'Decrypting file URL...',
+  0: '1/3 Asking for agreement signature...',
+  1: '1/3 Agreement initialized.',
+  2: '2/3 Asking for two payment confirmations...',
+  3: '2/3 Payment confirmed. Requesting access...',
+  4: '3/3 Access granted. Consuming file...'
+}
+
+function useConsume(): UseConsume {
+  const { ocean, account, accountId } = useOcean()
+  const [consumeStep, setConsumeStep] = useState<number | undefined>()
+  const [consumeError, setConsumeError] = useState<string | undefined>()
+
+  async function consume(did: DID | string): Promise<void> {
+    if (!ocean || !account) return
+
+    setConsumeError(undefined)
+
+    try {
+      const agreements = await ocean.keeper.conditions.accessSecretStoreCondition.getGrantedDidByConsumer(
+        accountId
+      )
+      const agreement = agreements.find((el: AgreementData) => el.did === did)
+      const agreementId = agreement
+        ? agreement.agreementId
+        : await ocean.assets
+            .order(did, account)
+            .next((step: number) => setConsumeStep(step))
+
+      // manually add another step here for better UX
+      setConsumeStep(4)
+      await ocean.assets.consume(agreementId, did, account, '')
+    } catch (error) {
+      setConsumeError(error.message)
+    } finally {
+      setConsumeStep(undefined)
+    }
+  }
+
+  return { consume, consumeStep, consumeError }
+}
+
+export { useConsume, UseConsume }
 export default useConsume

src/hooks/useMetadata/index.ts

@@ -0,0 +1 @@
+export * from './useMetadata'

src/hooks/useMetadata/useMetadata.ts

@@ -0,0 +1,33 @@
+import { DID, DDO, MetaData } from '@oceanprotocol/squid'
+import { useOcean } from '../../providers'
+
+interface UseMetadata {
+  getDDO: (did: DID | string) => Promise<DDO>
+  getMetadata: (did: DID | string) => Promise<MetaData>
+  getTitle: (did: DID | string) => Promise<string>
+}
+
+function useMetadata(): UseMetadata {
+  const { aquarius } = useOcean()
+
+  async function getDDO(did: DID | string): Promise<DDO> {
+    const ddo = await aquarius.retrieveDDO(did)
+    return ddo
+  }
+
+  async function getMetadata(did: DID | string): Promise<MetaData> {
+    const ddo = await getDDO(did)
+    const metadata = ddo.findServiceByType('metadata')
+    return metadata.attributes
+  }
+
+  async function getTitle(did: DID | string): Promise<string> {
+    const metadata = await getMetadata(did)
+    return metadata.main.name
+  }
+
+  return { getDDO, getMetadata, getTitle }
+}
+
+export { useMetadata, UseMetadata }
+export default useConsume

src/providers/OceanProvider/OceanProvider.tsx

@@ -5,8 +5,9 @@ import React, {
   useEffect,
   createContext
 } from 'react'
-import { Ocean, Config } from '@oceanprotocol/squid'
+import { Ocean, Config, Account, Aquarius, Logger } from '@oceanprotocol/squid'
 import Balance from '@oceanprotocol/squid/dist/node/models/Balance'
+import { connectOcean } from './utils'
 
 enum OceanConnectionStatus {
   OCEAN_CONNECTION_ERROR = -1,
@@ -15,8 +16,10 @@ enum OceanConnectionStatus {
 }
 
 interface OceanProviderValue {
+  aquarius: Aquarius
   ocean: Ocean
-  account: string
+  account: Account
+  accountId: string
   balance: Balance
   status: OceanConnectionStatus
 }
@@ -33,26 +36,30 @@ function OceanProvider({
   // TODO: handle web3
   const { web3 } = useWeb3()
   const [ocean, setOcean] = useState<Ocean | undefined>()
-  const [account, setAccount] = useState<string | undefined>()
+  const [aquarius, setAquarius] = useState<Aquarius | undefined>()
+  const [account, setAccount] = useState<Account | undefined>()
+  const [accountId, setAccountId] = useState<string | undefined>()
   const [balance, setBalance] = useState<Balance | undefined>()
   const [status, setStatus] = useState<OceanConnectionStatus>(
     OceanConnectionStatus.NOT_CONNECTED
   )
 
   useEffect(() => {
-    async function init(): Promise<void> {
-      console.debug('Connecting to Ocean...')
-      const oceanInstance = await Ocean.getInstance({
-        web3Provider: web3.currentProvider,
-        ...config
-      })
-      console.debug('Ocean instance ready.')
-      setOcean(oceanInstance)
-      setStatus(OceanConnectionStatus.CONNECTED)
+    // on mount, connect to Aquarius instance right away
+    const aquarius = new Aquarius(config.aquariusUri, Logger)
+    setAquarius(aquarius)
+  }, [])
 
-      const oceanAccounts = await oceanInstance.accounts.list()
-      oceanAccounts && setAccount(oceanAccounts[0].getId())
-      const { eth, ocn } = await oceanAccounts[0].getBalance()
+  useEffect(() => {
+    async function init(): Promise<void> {
+      const { ocean, account, accountId, balance } = await connectOcean(
+        web3,
+        config
+      )
+      setOcean(ocean)
+      setStatus(OceanConnectionStatus.CONNECTED)
+      setAccount(account)
+      setAccountId(accountId)
       setBalance(balance)
     }
 
@@ -78,7 +85,16 @@ function OceanProvider({
 
   return (
     <OceanContext.Provider
-      value={{ ocean, account, balance, status } as OceanProviderValue}
+      value={
+        {
+          ocean,
+          aquarius,
+          account,
+          accountId,
+          balance,
+          status
+        } as OceanProviderValue
+      }
     >
       {children}
     </OceanContext.Provider>

src/providers/OceanProvider/utils.ts

@@ -0,0 +1,27 @@
+import { Ocean, Config, Account } from '@oceanprotocol/squid'
+import Balance from '@oceanprotocol/squid/dist/node/models/Balance'
+import Web3 from 'web3'
+
+export async function connectOcean(
+  web3: Web3,
+  config: Config
+): Promise<{
+  ocean: Ocean
+  account: Account
+  accountId: string
+  balance: Balance
+}> {
+  console.debug('Connecting to Ocean...')
+  const ocean = await Ocean.getInstance({
+    web3Provider: web3.currentProvider,
+    ...config
+  })
+  console.debug('Ocean instance ready.')
+
+  const oceanAccounts = await ocean.accounts.list()
+  const account = oceanAccounts[0]
+  const accountId = account.getId()
+  const balance = await account.getBalance()
+
+  return { ocean, account, accountId, balance }
+}