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,9 +16,6 @@ export function Wallet() {
         options: {
           infuraId: 'INFURA_ID' // required
         }
-      },
-      torus: {
-        package: Torus // required
       }
     }
 
@@ -28,15 +23,15 @@ export function Wallet() {
    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()

package.json

@@ -21,6 +21,7 @@
     "dist/"
   ],
   "dependencies": {
+    "@oceanprotocol/contracts": "^0.2.2",
     "@oceanprotocol/lib": "^0.1.2",
     "@walletconnect/web3-provider": "^1.0.15",
     "axios": "^0.19.2",

src/hooks/useConsume/useConsume.ts

@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import { useOcean } from '../../providers'
 import { feedback } from '../../utils'
-import { DID } from '@oceanprotocol/lib'
+import { DID, Logger } from '@oceanprotocol/lib'
 import { ServiceType } from '@oceanprotocol/lib/dist/node/ddo/interfaces/Service'
 
 interface UseConsume {
@@ -36,19 +36,22 @@ function useConsume(): UseConsume {
       setConsumeStep(0)
       setConsumeStepText(consumeFeedback[0])
       const ddo = await ocean.metadatastore.retrieveDDO(did)
-
+      Logger.log('ddo retrieved', ddo)
       setConsumeStep(1)
       setConsumeStepText(consumeFeedback[1])
       const order = await ocean.assets.order(did, serviceType, accountId)
+      Logger.log('order created', order)
       setConsumeStep(2)
       setConsumeStepText(consumeFeedback[2])
       const res = JSON.parse(order)
+      Logger.log('order parsed', res)
       const tokenTransfer = await ocean.datatokens.transfer(
         res.dataToken,
         res.to,
         res.numTokens,
         res.from
       )
+      Logger.log('token transfered', tokenTransfer)
       setConsumeStep(3)
       setConsumeStepText(consumeFeedback[3])
       await ocean.assets.download(

src/hooks/usePublish/usePublish.ts

@@ -106,18 +106,6 @@ function usePublish(): UsePublish {
       )
     await datatoken.approve(tokenAddress, marketAddress, tokens, accountId)
 
-    const allowance = await datatoken.allowance(
-      tokenAddress,
-      accountId,
-      marketAddress
-    )
-    // allowance should be string not number, so this is a temp hack
-    await datatoken.transferFrom(
-      tokenAddress,
-      accountId,
-      (allowance as unknown) as number,
-      marketAddress
-    )
   }
 
   return {

src/providers/OceanProvider/OceanProvider.tsx

@@ -40,6 +40,7 @@ function OceanProvider({
 
   function init() {
     Logger.log('Ocean Provider init')
+    window.ethereum.autoRefreshOnNetworkChange = false
   }
 
   // On mount setup Web3Modal instance