update examples

example/src/App.tsx

@@ -8,6 +8,7 @@ import { AllDdos } from './AllDdos'
 import { ConsumeDdo } from './ConsumeDdo'
 import { NetworkMonitor } from './NetworkMonitor'
 import { LogLevel } from '@oceanprotocol/lib/dist/node/utils'
+import { Trade } from './Trade'
 
 const configRinkeby = new ConfigHelper().getConfig('rinkeby')
 const providerOptions = {}
@@ -39,6 +40,9 @@ function App() {
         <div>
           <Publish />
         </div>
+        <div>
+          <Trade />
+        </div>
         <div>
           <ConsumeDdo />
         </div>

example/src/Publish.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { usePublish } from '@oceanprotocol/react'
+import { usePublish, usePricing } from '@oceanprotocol/react'
 // import { useOcean, usePublish } from '@oceanprotocol/react'
 import { DDO } from '@oceanprotocol/lib'
 import { useState } from 'react'
@@ -7,6 +7,7 @@ import { Metadata } from '@oceanprotocol/lib/dist/node/ddo/interfaces/Metadata'
 
 export function Publish() {
   const { publish, publishStepText, isLoading } = usePublish()
+  const { createPricing, buyDT, sellDT, pricingStep, pricingStepText, isLoading: pricingIsLoading, pricingError} = usePricing()
   const [ddo, setDdo] = useState<DDO | undefined | null>()
 
   const asset = {
@@ -33,16 +34,35 @@ export function Publish() {
   const publishAsset = async () => {
     const priceOptions = {
       price: 7,
-      tokensToMint: 10,
+      dtAmount: 10,
       type: 'fixed',
       weightOnDataToken: '',
       swapFee: ''
     }
-
-    const ddo = await publish(asset as Metadata, priceOptions, 'access')
+    const datatokenOptions = {
+      tokensToMint:10
+    }
+    const ddo = await publish(asset as Metadata, 'access', datatokenOptions)
     console.log(ddo)
     setDdo(ddo)
   }
+
+  const PostForSale = async () => {
+    if(ddo){
+      const priceOptions = {
+        price: 7,
+        dtAmount: 10,
+        type: 'fixed',
+        weightOnDataToken: '',
+        swapFee: ''
+      }
+      const tx = await createPricing(ddo.dataToken,priceOptions)
+      console.log(tx)
+    }
+    else{
+      console.error("Publish the asset first")
+    }
+  }
   return (
     <>
       <div>Publish</div>
@@ -53,6 +73,13 @@ export function Publish() {
         IsLoading: {isLoading.toString()} || Status: {publishStepText}
       </div>
       <div>DID: {ddo && ddo.id} </div>
+      <div>
+        <button onClick={PostForSale}>Post for sale</button>
+      </div>
+      <div>
+        IsLoading: {pricingIsLoading.toString()} || pricingStatus: {pricingStepText}
+      </div>
+
     </>
   )
 }

example/src/Trade.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import { useOcean, usePricing } from '@oceanprotocol/react'
+// import { useOcean, usePublish } from '@oceanprotocol/react'
+import { DDO } from '@oceanprotocol/lib'
+import { useState } from 'react'
+import { Metadata } from '@oceanprotocol/lib/dist/node/ddo/interfaces/Metadata'
+
+export function Trade() {
+  const { ocean, accountId } = useOcean()
+  const { createPricing, buyDT, sellDT, pricingStep, pricingStepText, isLoading: pricingIsLoading, pricingError} = usePricing()
+  const [did, setDid] = useState<string | undefined>()
+  const ActionBuy = async () => {
+    if (!did) return
+    const ddo = await ocean.assets.resolve(did)
+    if(ddo){
+      const tx = await buyDT(ddo.dataToken,'1')
+      console.log(tx)
+    }
+    else{
+      console.error("Publish the asset first and create a pricing")
+    }
+  }
+  const ActionSell = async () => {
+    if (!did) return
+    const ddo = await ocean.assets.resolve(did)
+    if(ddo){
+      const tx = await buyDT(ddo.dataToken,'1')
+      console.log(tx)
+    }
+    else{
+      console.error("Publish the asset first and create a pricing")
+    }
+  }
+  return (
+    <>
+      <div>Trade Datatoken</div>
+      <div>
+        <button onClick={ActionBuy}>Buy 1 DT</button>
+      </div>
+      <div>
+        <button onClick={ActionSell}>Sell 1 DT</button>
+      </div>
+      <div>
+        IsLoading: {pricingIsLoading.toString()} || Status: {pricingStepText}
+      </div>
+      
+    </>
+  )
+}