consume

example/package.json

@@ -3,7 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@oceanprotocol/react": "../",
+    "-": "0.0.1",
+    "@oceanprotocol/react": "file:../",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
@@ -12,13 +13,14 @@
     "@types/node": "^12.12.47",
     "@types/react": "^16.9.41",
     "@types/react-dom": "^16.9.8",
+    "@types/shortid": "0.0.29",
     "@walletconnect/web3-provider": "^1.0.14",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.1",
+    "shortid": "^2.2.15",
     "typescript": "^3.7.5",
-    "web3-eth-contract": "^1.2.9",
-    "web3modal": "../node_modules/web3modal"
+    "web3-eth-contract": "^1.2.9"
   },
   "scripts": {
     "start": "react-scripts start",

example/src/AllDdos.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { useOcean, usePublish } from '@oceanprotocol/react'
+import { Metadata, DDO } from '@oceanprotocol/lib'
+import { useState } from 'react'
+import { useEffect } from 'react'
+import shortid from 'shortid'
+export function AllDdos() {
+    const { accountId, ocean } = useOcean()
+
+    const [ddos, setDdos] = useState<DDO[] | undefined>()
+
+
+    useEffect(() => {
+        async function init() {
+            if (ocean === undefined) return
+            const assets = await ocean.assets.query({
+                page: 1,
+                offset: 10,
+                query: {},
+                sort: { created: -1 }
+            })
+
+            setDdos(assets.results)
+        }
+        init()
+    }, [ocean])
+
+    return (
+        <>
+            <div>Assets</div> <br/>
+            <div style={{flexDirection: "column"}}>{ddos?.map((ddo) => {
+                return <div key={shortid.generate()}><span  >{ddo.id} / {ddo.dataToken }</span><br/></div>
+            })}
+            </div>
+        </>
+    )
+}

example/src/App.tsx

@@ -1,10 +1,11 @@
 import React, { useEffect } from 'react'
 import './App.css'
 import { OceanProvider } from '@oceanprotocol/react'
-import { LogLevel } from '@oceanprotocol/lib/dist/node/utils/Logger'
 import { Wallet } from './Wallet'
 import { Publish } from './Publish'
 import { Config } from '@oceanprotocol/lib'
+import { AllDdos } from './AllDdos'
+import { ConsumeDdo } from './ConsumeDdo'
 
 function App() {
   // factory Address needs to be updated each time you deploy the contract on local network
@@ -26,10 +27,17 @@ function App() {
           <div>
             <Wallet />
           </div>
+          <div>
+            <AllDdos />
+          </div>
 
           <div>
             <Publish />
           </div>
+
+          <div>
+            <ConsumeDdo />
+          </div>
         </div>
       </OceanProvider>
     </div>

example/src/ConsumeDdo.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { useOcean, usePublish, useConsume } from '@oceanprotocol/react'
+import { Metadata, DDO } from '@oceanprotocol/lib'
+import { useState } from 'react'
+import { useEffect } from 'react'
+
+export function ConsumeDdo() {
+    const { accountId, ocean } = useOcean()
+    const { consumeStepText, consume} = useConsume()
+    const [did, setDid]=useState<string|undefined>()
+    useEffect(() => {
+        async function init() {
+
+        }
+        init()
+    }, [ocean])
+
+    const consumeDid = async () => {
+        if(did === undefined) return
+
+        await consume(did,'access')
+    }
+
+    const handleChange = (e :any) =>{ 
+        setDid(e.target.value);
+      }
+    return (
+        <>
+            <div>Consume</div>
+            <div>DID <input onChange={handleChange}></input></div>
+            <div><button onClick={consumeDid}>Consume did</button></div>
+            <div>{consumeStepText}</div>
+        </>
+    )
+}

example/src/Wallet.tsx

@@ -3,13 +3,11 @@ import { useOcean } from '@oceanprotocol/react'
 import { useEffect } from 'react'
 
 export function Wallet() {
-  const { ocean, connect, logout, accountId } = useOcean()
+  const {web3, ocean, connect, logout, accountId } = useOcean()
   const conn = async () => {
     const { default: WalletConnectProvider } = await import(
       '@walletconnect/web3-provider'
     )
-    const { default: Torus } = await import('@toruslabs/torus-embed')
-
     const providerOptions = {
 
       /* See Provider Options Section */
@@ -18,25 +16,22 @@ export function Wallet() {
         options: {
           infuraId: 'INFURA_ID' // required
         }
-      },
-      torus: {
-        package: Torus // required
       }
     }
 
    // await connect({ cacheProvider: true, providerOptions })
    await connect()
   }
   const init = async () => {
-    if (ocean === undefined) return
-    console.log(ocean.datatokens.factoryAddress)
+    if (ocean === undefined || accountId ===undefined) return
+
 
-    const accs = await ocean.accounts.list()
-    console.log(accs)
+    const assets = await ocean.assets.ownerAssets(accountId)
+    console.log(assets)
   }
   useEffect(() => {
     init()
-  }, [ocean])
+  }, [ocean,accountId])
 
   const disc = async () => {
     await logout()