publish

example/package.json

@@ -3,17 +3,22 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@oceanprotocol/react": "../",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
+    "@toruslabs/torus-embed": "^1.7.3",
     "@types/jest": "^24.9.1",
     "@types/node": "^12.12.47",
     "@types/react": "^16.9.41",
     "@types/react-dom": "^16.9.8",
+    "@walletconnect/web3-provider": "^1.0.14",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.1",
-    "typescript": "^3.7.5"
+    "typescript": "^3.7.5",
+    "web3-eth-contract": "^1.2.9",
+    "web3modal": "../node_modules/web3modal"
   },
   "scripts": {
     "start": "react-scripts start",

example/src/App.tsx

@@ -1,19 +1,43 @@
-import React from 'react';
-import logo from './logo.svg';
+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';
 
 function App() {
+
+  // factory Address needs to be updated each time you deploy the contract on local network
+  const config = {
+    metadataStoreUri: 'http://aquarius:5000',
+    providerUri: 'http://localhost:8030',
+    nodeUri: `http://localhost:8545`,
+    factoryAddress: '0x2fC1fd21cb222Dc180Ef817dE4c426fd9230b5A5'
+  } as Config
+  const init = async () => {
+
+
+  }
+  useEffect(() => {
+    init()
+  }, [])
+
+
   return (
     <div className="app">
-      <div className="container">
+      <OceanProvider config={config}>
+        <div className="container">
+          <div><Wallet /></div>
 
-        <div>
-          Comp1
-      </div>
+          <div><Publish /></div>
 
-        <div>comp2</div>
 
-      </div>
+          <div>comp2</div>
+
+        </div>
+      </OceanProvider>
+
     </div>
   );
 }

example/src/Publish.tsx

@@ -0,0 +1,45 @@
+
+import React from 'react';
+import { useOcean, usePublish } from '@oceanprotocol/react'
+import { Metadata } from '@oceanprotocol/lib';
+
+
+export function Publish() {
+
+    const { accountId } = useOcean()
+    const { publish } = usePublish()
+
+
+    const asset =  {
+        main: {
+            type: 'dataset',
+            name: 'test-dataset',
+            dateCreated: new Date(Date.now()).toISOString().split('.')[0] + 'Z', // remove milliseconds
+            author: 'oceanprotocol-team',
+            license: 'MIT',
+            files: [
+                {
+                    url:
+                        'https://raw.githubusercontent.com/tbertinmahieux/MSongsDB/master/Tasks_Demos/CoverSongs/shs_dataset_test.txt',
+                    checksum: 'efb2c764274b745f5fc37f97c6b0e761',
+                    contentLength: '4535431',
+                    contentType: 'text/csv',
+                    encoding: 'UTF-8',
+                    compression: 'zip'
+                }
+            ]
+        }
+    }
+
+    const publishAsset = async ()=>{
+       const ddo = await publish(asset as Metadata)
+       console.log(ddo)
+    }
+    return (
+        <>
+            <div>Publish</div>
+            <div><button onClick={publishAsset}>Publish</button></div>
+
+        </>
+    )
+}

example/src/Wallet.tsx

@@ -0,0 +1,61 @@
+
+import React, { useState } from 'react';
+import { useOcean } from '@oceanprotocol/react'
+import Web3Modal from "web3modal"
+import Web3 from '@oceanprotocol/lib/node_modules/web3';
+import { LogLevel } from '@oceanprotocol/lib/dist/node/utils';
+import { Ocean, Config } from '@oceanprotocol/lib';
+import { useEffect } from 'react';
+
+
+export function Wallet() {
+
+  const { ocean, connect, logout, accountId, account } = 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 */
+      walletconnect: {
+        package: WalletConnectProvider, // required
+        options: {
+          infuraId: "INFURA_ID" // required
+        }
+      },
+      torus: {
+        package: Torus, // required
+      }
+    };
+
+    await connect({ providerOptions })
+
+  }
+  const init = async () => {
+    if(ocean === undefined) return
+    console.log(ocean.datatokens.factoryAddress)
+
+    const accs = await ocean.accounts.list()
+    console.log(accs)
+  }
+  useEffect(() => {
+    init()
+
+  }, [ocean])
+
+  const disc = async () => {
+    await logout()
+    await conn()
+  }
+  return (
+    <>
+      <div>wallet</div>
+      <div><button onClick={conn}>Connect</button></div>
+
+      <div><button onClick={disc}>Disconnect</button></div>
+
+      <div>{accountId}</div>
+
+    </>
+  )
+}

example/tsconfig.json

@@ -10,14 +10,14 @@
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
-    "strict": true,
     "forceConsistentCasingInFileNames": true,
     "module": "esnext",
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react"
+    "jsx": "react",
+    "strict": true
   },
   "include": [
     "src"

package.json

@@ -24,7 +24,7 @@
     "@oceanprotocol/contracts": "^0.2.2",
     "@oceanprotocol/lib": "../ocean-lib-js",
     "axios": "^0.19.2",
-    "react": "^16.13.1",
+    "react": "^16.9.41",
     "web3": "^1.2.9",
     "web3modal": "^1.7.0"
   },

src/hooks/index.ts

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

src/hooks/usePublish/index.ts

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

src/hooks/usePublish/usePublish.ts

@@ -1,5 +1,5 @@
 import { useEffect } from 'react'
-import { DDO, Metadata, DataTokens } from '@oceanprotocol/lib'
+import { DDO, Metadata, DataTokens, Logger } from '@oceanprotocol/lib'
 import { useOcean, } from '../../providers'
 import ProviderStatus from '../../providers/OceanProvider/ProviderStatus'
 import { Service } from '@oceanprotocol/lib/dist/node/ddo/interfaces/Service'
@@ -14,20 +14,24 @@ const factory = require('@oceanprotocol/contracts/artifacts/development/Factory.
 const datatokensTemplate = require('@oceanprotocol/contracts/artifacts/development/DataTokenTemplate.json')
 
 function usePublish(): UsePublish {
-    const { web3, ocean, status, account, config } = useOcean()
+    const { web3, ocean, status, account,accountId, config } = useOcean()
 
     async function publish(asset: Metadata, price: number = 1): Promise<DDO> {
         if (status !== ProviderStatus.CONNECTED) return
 
+        Logger.log('datatokens params ',factory.abi,datatokensTemplate.abi,ocean.datatokens.factoryAddress)
         const datatoken = new DataTokens(
             ocean.datatokens.factoryAddress,
             factory.abi,
             datatokensTemplate.abi,
             web3
-        )
+        )     
+        
+        Logger.log('datatoken created', datatoken)
         const data = { t: 1, url: config.metadataStoreUri }
         const blob = JSON.stringify(data)
-        const tokenAddress = await datatoken.create(blob, account)
+        const tokenAddress = await datatoken.create(blob, accountId)
+        Logger.log('tokenAddress created', tokenAddress)
         const publishedDate = new Date(Date.now()).toISOString().split('.')[0] + 'Z'
         const timeout = 0
         let services: Service[] = []
@@ -39,6 +43,7 @@ function usePublish(): UsePublish {
                     publishedDate,
                     timeout
                 )
+                Logger.log('access service created', accessService)
                 services = [accessService]
                 break;
             }

src/providers/OceanProvider/OceanProvider.tsx

@@ -2,7 +2,7 @@ import React, { useContext, useState, useEffect, createContext } from 'react'
 import Web3 from 'web3'
 import ProviderStatus from './ProviderStatus'
 import { Ocean, Logger, Account, Config } from '@oceanprotocol/lib'
-import Web3Modal, { IProviderOptions } from 'web3modal'
+import Web3Modal, { IProviderOptions, ICoreOptions } from 'web3modal'
 import { LogLevel } from '@oceanprotocol/lib/dist/node/utils/Logger'
 
 const factory = require('@oceanprotocol/contracts/artifacts/development/Factory.json')
@@ -19,15 +19,10 @@ interface OceanProviderValue {
   balance: string
   chainId: number | undefined
   status: ProviderStatus
-  connect: () => void
+  connect: (opts?: Partial<ICoreOptions>) => void
   logout: () => void
 }
 
-interface OceanProviderConfig {
-  providerOptions?: IProviderOptions,
-  cacheProvider?: boolean,
-  oceanConfig: Config
-}
 
 const OceanContext = createContext(null)
 
@@ -35,9 +30,9 @@ function OceanProvider({
   config,
   children
 }: {
-  config: OceanProviderConfig
+  config: Config
   children: any
-}): any {
+}) {
   const [web3, setWeb3] = useState<Web3 | undefined>()
   const [web3Provider, setWeb3Provider] = useState<any | undefined>()
   const [ocean, setOcean] = useState<Ocean | undefined>()
@@ -52,12 +47,7 @@ function OceanProvider({
 
 
   function init() {
-    const instance = new Web3Modal({
-      cacheProvider: false, // optional,
-      providerOptions: config.providerOptions ? config.providerOptions : {}
-    });
-    setWeb3Modal(instance)
-
+   Logger.log("Ocean Provider init")
   }
 
   // On mount setup Web3Modal instance 
@@ -65,13 +55,39 @@ function OceanProvider({
     init()
   }, [])
 
-  async function connect() {
-    const provider = await web3Modal.connect()
+  async function connect(opts?: Partial<ICoreOptions>) {
+    Logger.log("Connecting ....")
+    const instance = new Web3Modal(opts);
+    setWeb3Modal(instance)
+    Logger.log("Web3Modal instance created", instance)
+    const provider = await instance.connect()
     setWeb3Provider(provider)
 
     const web3 = new Web3(provider)
     setWeb3(web3)
 
+    config.factoryABI = config.factoryABI? config.factoryABI : factory.abi
+    config.datatokensABI= config.datatokensABI? config.datatokensABI: datatokensTemplate.abi
+    config.web3Provider = web3
+    const ocean = await Ocean.getInstance(config)
+
+    setOcean(ocean)
+    Logger.log('Ocean instance created ', ocean)
+    Logger.log('Web3 created ', web3)
+    setStatus(ProviderStatus.CONNECTED)
+    const account = (await ocean.accounts.list())[0]
+    setAccount(account)
+    Logger.log('Account ', account)
+
+    const accountId = await getAccount(web3)
+    setAccountId(accountId)
+    Logger.log('account id', accountId)
+    const balance = await getBalance(web3, accountId)
+    setBalance(balance)
+    Logger.log('balance', accountId)
+    const chainId = web3 && (await web3.eth.getChainId())
+    setChainId(chainId)
+    Logger.log('chain id ', chainId)
   }
 
   async function logout() {
@@ -97,26 +113,8 @@ function OceanProvider({
   //
   const handleConnect = async (provider: any) => {
     Logger.debug("Handling 'connect' event with payload", provider)
-    setStatus(ProviderStatus.CONNECTED)
+   
 
-    config.oceanConfig.factoryABI = config.oceanConfig.factoryABI? config.oceanConfig.factoryABI : factory.abi
-    config.oceanConfig.datatokensABI= config.oceanConfig.datatokensABI? config.oceanConfig.datatokensABI: datatokensTemplate.abi
-
-    const ocean = await Ocean.getInstance(config.oceanConfig)
-
-    setOcean(ocean)
-
-    const account = await ocean.accounts[0];
-    setAccount(account)
-
-    const accountId = await getAccount(web3)
-    setAccountId(accountId)
-
-    const balance = await getBalance(web3, account)
-    setBalance(balance)
-
-    const chainId = web3 && (await web3.eth.getChainId())
-    setChainId(chainId)
   }
 
   const handleAccountsChanged = async (accounts: string[]) => {
@@ -170,7 +168,7 @@ function OceanProvider({
           balance,
           chainId,
           status,
-          config: config.oceanConfig,
+          config,
           connect,
           logout,
         } as OceanProviderValue
@@ -187,7 +185,6 @@ const useOcean = (): OceanProviderValue => useContext(OceanContext)
 export {
   OceanProvider,
   useOcean,
-  OceanProviderValue,
-  Config
+  OceanProviderValue
 }
 export default OceanProvider