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> + + </> + ) +}