split usePricing

example/src/Publish.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { usePublish, usePricing } from '@oceanprotocol/react'
+import { usePublish, useCreatePricing } from '@oceanprotocol/react'
 // import { useOcean, usePublish } from '@oceanprotocol/react'
 import { DDO } from '@oceanprotocol/lib'
 import { useState } from 'react'
@@ -7,7 +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, pricingIsLoading, pricingError} = usePricing()
+  const { createPricing, pricingStep, pricingStepText, pricingIsLoading, pricingError} = useCreatePricing()
   const [ddo, setDdo] = useState<DDO | undefined | null>()
 
   const asset = {

example/src/Trade.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useOcean, usePricing } from '@oceanprotocol/react'
+import { useOcean, useTrade } from '@oceanprotocol/react'
 // import { useOcean, usePublish } from '@oceanprotocol/react'
 import { DDO } from '@oceanprotocol/lib'
 import { useState } from 'react'
@@ -7,7 +7,7 @@ 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 { buyDT, sellDT, tradeStep, tradeStepText, tradeIsLoading, tradeError} = useTrade()
   const [did, setDid] = useState<string | undefined>()
   const handleBuy = async () => {
     if (!did) { console.error("No DID"); return}
@@ -47,7 +47,7 @@ export function Trade() {
         <button onClick={handleSell}>Sell 1 DT</button>
       </div>
       <div>
-        IsLoading: {pricingIsLoading.toString()} || Status: {pricingStepText}
+        IsLoading: {tradeIsLoading.toString()} || Status: {tradeStepText}
       </div>
       
     </>

src/hooks/index.ts

@@ -2,4 +2,5 @@ export * from './useConsume'
 export * from './useMetadata'
 export * from './usePublish'
 export * from './useCompute'
-export * from './usePricing'
+export * from './useCreatePricing'
+export * from './useTrade'

src/hooks/useCreatePricing/README.md

@@ -1,19 +1,19 @@
 # `usePricing`
 
-Hook with helper utilities to create fixed price exchanges or liquidity pools for your data set and buy/sell datatokens
+Hook with helper utilities to create fixed price exchanges or liquidity pools for your data set
 
 ## Usage
 
 ```tsx
 import React from 'react'
-import { useOcean, usePricing } from '@oceanprotocol/react'
+import { useOcean, useCreatePricing } from '@oceanprotocol/react'
 import { Metadata } from '@oceanprotocol/lib'
 
 export default function MyComponent() {
   const { accountId } = useOcean()
   const dataTokenAddress = '0x00000'
   // Publish helpers
-  const { createPricing, buyDT, sellDT } = usePricing()
+  const { createPricing } = useCreatePricing()
   
   const priceOptions = {
     price: 10,
@@ -27,12 +27,6 @@ export default function MyComponent() {
     await createPricing(dataTokenAddress, priceOptions)
   }
 
-  async function handleBuyDT() {
-    await buyDT(dataTokenAddress, '1')
-  }
-  async function handleSellDT() {
-    await sellDT(dataTokenAddress, '1')
-  }
   
   return (
     <div>
@@ -40,8 +34,6 @@ export default function MyComponent() {
 
       <p>Your account: {accountId}</p>
       <button onClick={handleCreatePricing}>Post for sale</button>
-      <button onClick={handleBuyDT}>Buy DT</button>
-      <button onClick={handleSellDT}>Sell DT</button>
     </div>
   )
 }

src/hooks/useCreatePricing/index.ts

@@ -0,0 +1,2 @@
+export * from './useCreatePricing'
+export * from './PriceOptions'

src/hooks/useCreatePricing/useCreatePricing.ts

@@ -0,0 +1,114 @@
+import { Logger } from '@oceanprotocol/lib'
+import { useState } from 'react'
+import { useOcean } from 'providers'
+import { PriceOptions } from './PriceOptions'
+import { TransactionReceipt } from 'web3-core'
+import { getBestDataTokenPrice, getFirstPool } from 'utils/dtUtils'
+import { Decimal } from 'decimal.js'
+
+interface UseCreatePricing {
+  createPricing: (
+    dataTokenAddress: string,
+    priceOptions: PriceOptions
+  ) => Promise<TransactionReceipt | string | null>
+  pricingStep?: number
+  pricingStepText?: string
+  pricingError?: string
+  pricingIsLoading: boolean
+}
+
+export const createPricingFeedback: { [key in number]: string } = {
+  0: '1/4 Approving DT ...',
+  1: '2/4 Approving Ocean ...',
+  2: '3/4 Creating ....',
+  3: '4/4 Pricing created'
+}
+
+function useCreatePricing(): UseCreatePricing {
+  const { ocean, status, account, accountId, config } = useOcean()
+  const [pricingIsLoading, setPricingIsLoading] = useState(false)
+  const [pricingStep, setPricingStep] = useState<number | undefined>()
+  const [pricingStepText, setPricingStepText] = useState<string | undefined>()
+  const [pricingError, setPricingError] = useState<string | undefined>()
+  const [dtSymbol, setDtSymbol] = useState<string>()
+
+  function setStepCreatePricing(index?: number) {
+    setPricingStep(index)
+    let message
+    if (index) {
+      if (dtSymbol)
+        message = createPricingFeedback[index].replace(/DT/g, dtSymbol)
+      else message = createPricingFeedback[index]
+      setPricingStepText(message)
+    }
+  }
+
+  async function createPricing(
+    dataTokenAddress: string,
+    priceOptions: PriceOptions
+  ): Promise<TransactionReceipt | string | null> {
+    if (!ocean || !account || !accountId) return null
+
+    let response = null
+    try {
+      setPricingIsLoading(true)
+      setPricingError(undefined)
+      setDtSymbol(await ocean.datatokens.getSymbol(dataTokenAddress))
+      setStepCreatePricing(0)
+      switch (priceOptions.type) {
+        case 'dynamic': {
+          setStepCreatePricing(2)
+          response = await ocean.pool.createDTPool(
+            accountId,
+            dataTokenAddress,
+            priceOptions.dtAmount.toString(),
+            priceOptions.weightOnDataToken,
+            priceOptions.swapFee
+          )
+          setStepCreatePricing(3)
+          return response
+        }
+        case 'fixed': {
+          if (!config.fixedRateExchangeAddress) {
+            Logger.error(`'fixedRateExchangeAddress' not set in ccnfig.`)
+            return null
+          }
+          setStepCreatePricing(2)
+          response = await ocean.fixedRateExchange.create(
+            dataTokenAddress,
+            priceOptions.price.toString(),
+            accountId
+          )
+          setStepCreatePricing(1)
+          await ocean.datatokens.approve(
+            dataTokenAddress,
+            config.fixedRateExchangeAddress,
+            String(priceOptions.dtAmount),
+            accountId
+          )
+          setStepCreatePricing(3)
+          return response
+        }
+      }
+    } catch (error) {
+      setPricingError(error.message)
+      Logger.error(error)
+    } finally {
+      setPricingStep(undefined)
+      setPricingStepText(undefined)
+      setPricingIsLoading(false)
+    }
+    return null
+  }
+
+  return {
+    createPricing,
+    pricingStep,
+    pricingStepText,
+    pricingIsLoading,
+    pricingError
+  }
+}
+
+export { useCreatePricing, UseCreatePricing }
+export default useCreatePricing

src/hooks/usePricing/index.ts

@@ -1,2 +0,0 @@
-export * from './usePricing'
-export * from './PriceOptions'

src/hooks/useTrade/README.md

@@ -0,0 +1,35 @@
+# `usePricing`
+
+Hook to buy and sell datatokens
+
+## Usage
+
+```tsx
+import React from 'react'
+import { useOcean, useTrade } from '@oceanprotocol/react'
+import { Metadata } from '@oceanprotocol/lib'
+
+export default function MyComponent() {
+  const { accountId } = useOcean()
+  const dataTokenAddress = '0x00000'
+  // Publish helpers
+  const { buyDT, sellDT } = useTrade()
+  
+  
+  async function handleBuyDT() {
+    await buyDT(dataTokenAddress, '1')
+  }
+  async function handleSellDT() {
+    await sellDT(dataTokenAddress, '1')
+  }
+
+  return (
+    <div>
+      <h1>Trade</h1>
+
+      <button onClick={handleBuyDT}>Buy DT</button>
+      <button onClick={handleSellDT}>Sell DT</button>
+    </div>
+  )
+}
+```

src/hooks/useTrade/index.ts

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

src/hooks/useTrade/useTrade.ts

@@ -1,16 +1,11 @@
 import { Logger } from '@oceanprotocol/lib'
 import { useState } from 'react'
 import { useOcean } from 'providers'
-import { PriceOptions } from './PriceOptions'
 import { TransactionReceipt } from 'web3-core'
 import { getBestDataTokenPrice, getFirstPool } from 'utils/dtUtils'
 import { Decimal } from 'decimal.js'
 
-interface UsePricing {
+interface UseTrade {
-  createPricing: (
-    dataTokenAddress: string,
-    priceOptions: PriceOptions
-  ) => Promise<TransactionReceipt | string | null>
   buyDT: (
     dataTokenAddress: string,
     dtAmount: number | string
@@ -19,10 +14,10 @@ interface UsePricing {
     dataTokenAddress: string,
     dtAmount: number | string
   ) => Promise<TransactionReceipt | null>
-  pricingStep?: number
+  tradeStep?: number
-  pricingStepText?: string
+  tradeStepText?: string
-  pricingError?: string
+  tradeError?: string
-  pricingIsLoading: boolean
+  tradeIsLoading: boolean
 }
 
 export const buyDTFeedback: { [key in number]: string } = {
@@ -36,107 +31,32 @@ export const sellDTFeedback: { [key in number]: string } = {
   2: '3/3 DT sold'
 }
 
-export const createPricingFeedback: { [key in number]: string } = {
+function useTrade(): UseTrade {
-  0: '1/4 Approving DT ...',
-  1: '2/4 Approving Ocean ...',
-  2: '3/4 Creating ....',
-  3: '4/4 Pricing created'
-}
-
-function usePricing(): UsePricing {
   const { ocean, status, account, accountId, config } = useOcean()
-  const [pricingIsLoading, setPricingIsLoading] = useState(false)
+  const [tradeIsLoading, setTradeIsLoading] = useState(false)
-  const [pricingStep, setPricingStep] = useState<number | undefined>()
+  const [tradeStep, setTradeStep] = useState<number | undefined>()
-  const [pricingStepText, setPricingStepText] = useState<string | undefined>()
+  const [tradeStepText, setTradeStepText] = useState<string | undefined>()
-  const [pricingError, setPricingError] = useState<string | undefined>()
+  const [tradeError, setTradeError] = useState<string | undefined>()
   const [dtSymbol, setDtSymbol] = useState<string>()
 
   function setStepBuyDT(index?: number) {
-    setPricingStep(index)
+    setTradeStep(index)
     let message
     if (index) {
       if (dtSymbol) message = buyDTFeedback[index].replace(/DT/g, dtSymbol)
       else message = buyDTFeedback[index]
-      setPricingStepText(message)
+      setTradeStepText(message)
     }
   }
   function setStepSellDT(index?: number) {
-    setPricingStep(index)
+    setTradeStep(index)
     let message
     if (index) {
       if (dtSymbol) message = sellDTFeedback[index].replace(/DT/g, dtSymbol)
       else message = sellDTFeedback[index]
-      setPricingStepText(message)
+      setTradeStepText(message)
     }
   }
-  function setStepCreatePricing(index?: number) {
-    setPricingStep(index)
-    let message
-    if (index) {
-      if (dtSymbol)
-        message = createPricingFeedback[index].replace(/DT/g, dtSymbol)
-      else message = createPricingFeedback[index]
-      setPricingStepText(message)
-    }
-  }
-
-  async function createPricing(
-    dataTokenAddress: string,
-    priceOptions: PriceOptions
-  ): Promise<TransactionReceipt | string | null> {
-    if (!ocean || !account || !accountId) return null
-
-    let response = null
-    try {
-      setPricingIsLoading(true)
-      setPricingError(undefined)
-      setDtSymbol(await ocean.datatokens.getSymbol(dataTokenAddress))
-      setStepCreatePricing(0)
-      switch (priceOptions.type) {
-        case 'dynamic': {
-          setStepCreatePricing(2)
-          response = await ocean.pool.createDTPool(
-            accountId,
-            dataTokenAddress,
-            priceOptions.dtAmount.toString(),
-            priceOptions.weightOnDataToken,
-            priceOptions.swapFee
-          )
-          setStepCreatePricing(3)
-          return response
-        }
-        case 'fixed': {
-          if (!config.fixedRateExchangeAddress) {
-            Logger.error(`'fixedRateExchangeAddress' not set in ccnfig.`)
-            return null
-          }
-          setStepCreatePricing(2)
-          response = await ocean.fixedRateExchange.create(
-            dataTokenAddress,
-            priceOptions.price.toString(),
-            accountId
-          )
-          setStepCreatePricing(1)
-          await ocean.datatokens.approve(
-            dataTokenAddress,
-            config.fixedRateExchangeAddress,
-            String(priceOptions.dtAmount),
-            accountId
-          )
-          setStepCreatePricing(3)
-          return response
-        }
-      }
-    } catch (error) {
-      setPricingError(error.message)
-      Logger.error(error)
-    } finally {
-      setPricingStep(undefined)
-      setPricingStepText(undefined)
-      setPricingIsLoading(false)
-    }
-    return null
-  }
 
   async function buyDT(
     dataTokenAddress: string,
@@ -146,8 +66,8 @@ function usePricing(): UsePricing {
 
     try {
       setDtSymbol(await ocean.datatokens.getSymbol(dataTokenAddress))
-      setPricingIsLoading(true)
+      setTradeIsLoading(true)
-      setPricingError(undefined)
+      setTradeError(undefined)
       setStepBuyDT(0)
       const bestPrice = await getBestDataTokenPrice(ocean, dataTokenAddress)
       switch (bestPrice?.type) {
@@ -200,12 +120,12 @@ function usePricing(): UsePricing {
         }
       }
     } catch (error) {
-      setPricingError(error.message)
+      setTradeError(error.message)
       Logger.error(error)
     } finally {
-      setPricingStep(undefined)
+      setTradeStep(undefined)
-      setPricingStepText(undefined)
+      setTradeStepText(undefined)
-      setPricingIsLoading(false)
+      setTradeIsLoading(false)
     }
     return null
   }
@@ -221,8 +141,8 @@ function usePricing(): UsePricing {
     }
     try {
       setDtSymbol(await ocean.datatokens.getSymbol(dataTokenAddress))
-      setPricingIsLoading(true)
+      setTradeIsLoading(true)
-      setPricingError(undefined)
+      setTradeError(undefined)
       setStepSellDT(0)
       const pool = await getFirstPool(ocean, dataTokenAddress)
       if (!pool || pool.price === 0) return null
@@ -239,26 +159,25 @@ function usePricing(): UsePricing {
       Logger.log('DT sell response', sellResponse)
       return sellResponse
     } catch (error) {
-      setPricingError(error.message)
+      setTradeError(error.message)
       Logger.error(error)
     } finally {
       setStepSellDT(undefined)
-      setPricingStepText(undefined)
+      setTradeStepText(undefined)
-      setPricingIsLoading(false)
+      setTradeIsLoading(false)
     }
     return null
   }
 
   return {
-    createPricing,
     buyDT,
     sellDT,
-    pricingStep,
+    tradeStep,
-    pricingStepText,
+    tradeStepText,
-    pricingIsLoading,
+    tradeIsLoading,
-    pricingError
+    tradeError
   }
 }
 
-export { usePricing, UsePricing }
+export { useTrade, UseTrade }
-export default usePricing
+export default useTrade