From 65d43f80a36d69b06c76ee0c6693e030990fbeb0 Mon Sep 17 00:00:00 2001
From: alexcos20 <alex.coseru@gmail.com>
Date: Wed, 14 Oct 2020 09:45:41 -0700
Subject: [PATCH] update examples

---
 example/src/App.tsx     |  4 ++++
 example/src/Publish.tsx | 35 +++++++++++++++++++++++++----
 example/src/Trade.tsx   | 49 +++++++++++++++++++++++++++++++++++++++++
 3 files changed, 84 insertions(+), 4 deletions(-)
 create mode 100644 example/src/Trade.tsx

diff --git a/example/src/App.tsx b/example/src/App.tsx
index cfe4efa..80dd955 100644
--- a/example/src/App.tsx
+++ b/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>
diff --git a/example/src/Publish.tsx b/example/src/Publish.tsx
index 326b61f..736fe47 100644
--- a/example/src/Publish.tsx
+++ b/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>
+
     </>
   )
 }
diff --git a/example/src/Trade.tsx b/example/src/Trade.tsx
new file mode 100644
index 0000000..8b305b3
--- /dev/null
+++ b/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>
+      
+    </>
+  )
+}