Check maximum datatoken to receive for pool priced assets in compute and consume (#627)

* check the maximum available datatoken to receive before buy compute or consume

* added previous order check in disable buy button logic when max dt in pool is bellow 1 datatoken

* fixed lint errors

* hide seccond message if one of the assets in compute has low liquidity

src/components/atoms/ButtonBuy.tsx

@@ -10,6 +10,7 @@ interface ButtonBuyProps {
   hasDatatoken: boolean
   dtSymbol: string
   dtBalance: string
+  datasetLowPoolLiquidity: boolean
   assetType: string
   assetTimeout: string
   isConsumable: boolean
@@ -18,6 +19,7 @@ interface ButtonBuyProps {
   hasDatatokenSelectedComputeAsset?: boolean
   dtSymbolSelectedComputeAsset?: string
   dtBalanceSelectedComputeAsset?: string
+  selectedComputeAssetLowPoolLiquidity?: boolean
   selectedComputeAssetType?: string
   isLoading: boolean
   onClick?: (e: FormEvent<HTMLButtonElement>) => void
@@ -33,6 +35,7 @@ function getConsumeHelpText(
   dtSymbol: string,
   hasDatatoken: boolean,
   hasPreviousOrder: boolean,
+  lowPoolLiquidity: boolean,
   assetType: string,
   isConsumable: boolean,
   consumableFeedback: string
@@ -44,8 +47,9 @@ function getConsumeHelpText(
       ? `You bought this ${assetType} already allowing you to use it without paying again.`
       : hasDatatoken
       ? `You own ${dtBalance} ${dtSymbol} allowing you to use this data set by spending 1 ${dtSymbol}, but without paying OCEAN again.`
+      : lowPoolLiquidity
+      ? `There are not enought ${dtSymbol} available in the pool for the transaction to take place`
       : `For using this ${assetType}, you will buy 1 ${dtSymbol} and immediately spend it back to the publisher and pool.`
-
   return text
 }
 
@@ -54,6 +58,7 @@ function getComputeAssetHelpText(
   hasDatatoken: boolean,
   dtSymbol: string,
   dtBalance: string,
+  lowPoolLiquidity: boolean,
   assetType: string,
   isConsumable: boolean,
   consumableFeedback: string,
@@ -61,6 +66,7 @@ function getComputeAssetHelpText(
   hasDatatokenSelectedComputeAsset?: boolean,
   dtSymbolSelectedComputeAsset?: string,
   dtBalanceSelectedComputeAsset?: string,
+  selectedComputeAssettLowPoolLiquidity?: boolean,
   selectedComputeAssetType?: string,
   algorithmConsumableStatus?: number
 ) {
@@ -69,11 +75,12 @@ function getComputeAssetHelpText(
     dtSymbol,
     hasDatatoken,
     hasPreviousOrder,
+    lowPoolLiquidity,
     assetType,
     isConsumable,
     consumableFeedback
   )
-  const text =
+  const computeAlgoHelpText =
     (!dtSymbolSelectedComputeAsset && !dtBalanceSelectedComputeAsset) ||
     isConsumable === false
       ? ''
@@ -87,9 +94,15 @@ function getComputeAssetHelpText(
       ? `You already bought the selected ${selectedComputeAssetType}, allowing you to use it without paying again.`
       : hasDatatokenSelectedComputeAsset
       ? `You own ${dtBalanceSelectedComputeAsset} ${dtSymbolSelectedComputeAsset} allowing you to use the selected ${selectedComputeAssetType} by spending 1 ${dtSymbolSelectedComputeAsset}, but without paying OCEAN again.`
+      : selectedComputeAssettLowPoolLiquidity
+      ? `There are not enought ${dtSymbolSelectedComputeAsset} available in the pool for the transaction to take place`
       : `Additionally, you will buy 1 ${dtSymbolSelectedComputeAsset} for the ${selectedComputeAssetType} and spend it back to its publisher and pool.`
-
-  return `${computeAssetHelpText} ${text}`
+  const computeHelpText = selectedComputeAssettLowPoolLiquidity
+    ? computeAlgoHelpText
+    : lowPoolLiquidity
+    ? computeAssetHelpText
+    : `${computeAssetHelpText} ${computeAlgoHelpText}`
+  return computeHelpText
 }
 
 export default function ButtonBuy({
@@ -99,6 +112,7 @@ export default function ButtonBuy({
   hasDatatoken,
   dtSymbol,
   dtBalance,
+  datasetLowPoolLiquidity,
   assetType,
   assetTimeout,
   isConsumable,
@@ -107,6 +121,7 @@ export default function ButtonBuy({
   hasDatatokenSelectedComputeAsset,
   dtSymbolSelectedComputeAsset,
   dtBalanceSelectedComputeAsset,
+  selectedComputeAssetLowPoolLiquidity,
   selectedComputeAssetType,
   onClick,
   stepText,
@@ -150,6 +165,7 @@ export default function ButtonBuy({
                   dtSymbol,
                   hasDatatoken,
                   hasPreviousOrder,
+                  datasetLowPoolLiquidity,
                   assetType,
                   isConsumable,
                   consumableFeedback
@@ -159,6 +175,7 @@ export default function ButtonBuy({
                   hasDatatoken,
                   dtSymbol,
                   dtBalance,
+                  datasetLowPoolLiquidity,
                   assetType,
                   isConsumable,
                   consumableFeedback,
@@ -166,6 +183,7 @@ export default function ButtonBuy({
                   hasDatatokenSelectedComputeAsset,
                   dtSymbolSelectedComputeAsset,
                   dtBalanceSelectedComputeAsset,
+                  selectedComputeAssetLowPoolLiquidity,
                   selectedComputeAssetType,
                   algorithmConsumableStatus
                 )}

src/components/organisms/AssetActions/Compute/FormComputeDataset.tsx

@@ -51,12 +51,14 @@ export default function FormStartCompute({
   hasPreviousOrder,
   hasDatatoken,
   dtBalance,
+  datasetLowPoolLiquidity,
   assetType,
   assetTimeout,
   hasPreviousOrderSelectedComputeAsset,
   hasDatatokenSelectedComputeAsset,
   dtSymbolSelectedComputeAsset,
   dtBalanceSelectedComputeAsset,
+  selectedComputeAssetLowPoolLiquidity,
   selectedComputeAssetType,
   selectedComputeAssetTimeout,
   stepText,
@@ -72,12 +74,14 @@ export default function FormStartCompute({
   hasPreviousOrder: boolean
   hasDatatoken: boolean
   dtBalance: string
+  datasetLowPoolLiquidity: boolean
   assetType: string
   assetTimeout: string
   hasPreviousOrderSelectedComputeAsset?: boolean
   hasDatatokenSelectedComputeAsset?: boolean
   dtSymbolSelectedComputeAsset?: string
   dtBalanceSelectedComputeAsset?: string
+  selectedComputeAssetLowPoolLiquidity?: boolean
   selectedComputeAssetType?: string
   selectedComputeAssetTimeout?: string
   stepText: string
@@ -177,6 +181,7 @@ export default function FormStartCompute({
         hasDatatoken={hasDatatoken}
         dtSymbol={ddo.dataTokenInfo.symbol}
         dtBalance={dtBalance}
+        datasetLowPoolLiquidity={datasetLowPoolLiquidity}
         assetTimeout={assetTimeout}
         assetType={assetType}
         hasPreviousOrderSelectedComputeAsset={
@@ -185,6 +190,9 @@ export default function FormStartCompute({
         hasDatatokenSelectedComputeAsset={hasDatatokenSelectedComputeAsset}
         dtSymbolSelectedComputeAsset={dtSymbolSelectedComputeAsset}
         dtBalanceSelectedComputeAsset={dtBalanceSelectedComputeAsset}
+        selectedComputeAssetLowPoolLiquidity={
+          selectedComputeAssetLowPoolLiquidity
+        }
         selectedComputeAssetType={selectedComputeAssetType}
         stepText={stepText}
         isLoading={isLoading}

src/components/organisms/AssetActions/Compute/index.tsx

@@ -73,6 +73,8 @@ export default function Compute({
   const [ddoAlgorithmList, setDdoAlgorithmList] = useState<DDO[]>()
   const [selectedAlgorithmAsset, setSelectedAlgorithmAsset] = useState<DDO>()
   const [hasAlgoAssetDatatoken, setHasAlgoAssetDatatoken] = useState<boolean>()
+  const [datasetMaxDT, setDatasetMaxDT] = useState<number>(1)
+  const [algoMaxDT, setAlgoMaxDT] = useState<number>(1)
   const [isPublished, setIsPublished] = useState(false)
   const [hasPreviousDatasetOrder, setHasPreviousDatasetOrder] = useState(false)
   const [previousDatasetOrderId, setPreviousDatasetOrderId] = useState<string>()
@@ -85,13 +87,15 @@ export default function Compute({
   const [datasetTimeout, setDatasetTimeout] = useState<string>()
   const [algorithmTimeout, setAlgorithmTimeout] = useState<string>()
 
+  const hasDatatoken = Number(dtBalance) >= 1
+
   const isComputeButtonDisabled =
     isJobStarting === true ||
     file === null ||
     !ocean ||
     !isBalanceSufficient ||
-    !isConsumable
-  const hasDatatoken = Number(dtBalance) >= 1
+    (!hasPreviousDatasetOrder && !hasDatatoken && !(datasetMaxDT >= 1)) ||
+    (!hasPreviousAlgorithmOrder && !hasAlgoAssetDatatoken && !(algoMaxDT >= 1))
 
   async function checkPreviousOrders(ddo: DDO) {
     const { timeout } = (
@@ -121,6 +125,22 @@ export default function Compute({
     setHasAlgoAssetDatatoken(Number(AssetDtBalance) >= 1)
   }
 
+  async function checkAssetDTMaxBuyQuantity(
+    price: BestPrice,
+    assetType: string
+  ) {
+    if (!ocean || !price || !assetType) return
+    const maxTokensInPool =
+      price.type === 'pool'
+        ? await ocean.pool.getDTMaxBuyQuantity(price.address)
+        : 1
+    if (assetType === 'algorithm') {
+      setAlgoMaxDT(Number(maxTokensInPool))
+    } else {
+      setDatasetMaxDT(Number(maxTokensInPool))
+    }
+  }
+
   function getQuerryString(
     trustedAlgorithmList: publisherTrustedAlgorithm[]
   ): SearchQuery {
@@ -188,6 +208,11 @@ export default function Compute({
     if (!ddo) return
     const price = await getPrice(ddo)
     setAlgorithmPrice(price)
+    ocean &&
+      checkAssetDTMaxBuyQuantity(
+        price,
+        ddo.findServiceByType('metadata').attributes.main.type
+      )
   }, [])
 
   useEffect(() => {
@@ -200,6 +225,10 @@ export default function Compute({
   useEffect(() => {
     if (!ocean || !accountId) return
     checkPreviousOrders(ddo)
+    checkAssetDTMaxBuyQuantity(
+      price,
+      ddo.findServiceByType('metadata').attributes.main.type
+    )
   }, [ocean, ddo, accountId])
 
   useEffect(() => {
@@ -416,6 +445,7 @@ export default function Compute({
             hasPreviousOrder={hasPreviousDatasetOrder}
             hasDatatoken={hasDatatoken}
             dtBalance={dtBalance}
+            datasetLowPoolLiquidity={!(datasetMaxDT >= 1)}
             assetType={type}
             assetTimeout={datasetTimeout}
             hasPreviousOrderSelectedComputeAsset={hasPreviousAlgorithmOrder}
@@ -424,6 +454,7 @@ export default function Compute({
               selectedAlgorithmAsset?.dataTokenInfo?.symbol
             }
             dtBalanceSelectedComputeAsset={algorithmDTBalance}
+            selectedComputeAssetLowPoolLiquidity={!(algoMaxDT >= 1)}
             selectedComputeAssetType="algorithm"
             selectedComputeAssetTimeout={algorithmTimeout}
             stepText={pricingStepText || 'Starting Compute Job...'}

src/components/organisms/AssetActions/Consume.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement, useEffect, useState } from 'react'
 import { toast } from 'react-toastify'
-import { File as FileMetadata, DDO } from '@oceanprotocol/lib'
+import { File as FileMetadata, DDO, BestPrice } from '@oceanprotocol/lib'
 import File from '../../atoms/File'
 import Price from '../../atoms/Price'
 import Web3Feedback from '../../molecules/Wallet/Feedback'
@@ -60,6 +60,7 @@ export default function Consume({
   const { consumeStepText, consume, consumeError, isLoading } = useConsume()
   const [isDisabled, setIsDisabled] = useState(true)
   const [hasDatatoken, setHasDatatoken] = useState(false)
+  const [maxDt, setMaxDT] = useState<number>(1)
   const [isConsumablePrice, setIsConsumablePrice] = useState(true)
   const [assetTimeout, setAssetTimeout] = useState('')
   const { data } = useQuery<OrdersData>(previousOrderQuery, {
@@ -70,6 +71,15 @@ export default function Consume({
     pollInterval: 5000
   })
 
+  async function checkMaxAvaialableTokens(price: BestPrice) {
+    if (!ocean || !price) return
+    const maxTokensInPool =
+      price.type === 'pool'
+        ? await ocean.pool.getDTMaxBuyQuantity(price.address)
+        : 1
+    setMaxDT(Number(maxTokensInPool))
+  }
+
   useEffect(() => {
     if (!data || !assetTimeout || data.tokenOrders.length === 0) return
 
@@ -100,6 +110,7 @@ export default function Consume({
     setIsConsumablePrice(
       price.isConsumable !== undefined ? price.isConsumable === 'true' : true
     )
+    checkMaxAvaialableTokens(price)
   }, [price])
 
   useEffect(() => {
@@ -113,6 +124,7 @@ export default function Consume({
           !isBalanceSufficient ||
           typeof consumeStepText !== 'undefined' ||
           pricingIsLoading ||
+          (!hasPreviousOrder && !hasDatatoken && !(maxDt >= 1)) ||
           !isConsumablePrice) &&
           !hasPreviousOrder &&
           !hasDatatoken)
@@ -160,6 +172,7 @@ export default function Consume({
       hasDatatoken={hasDatatoken}
       dtSymbol={ddo.dataTokenInfo?.symbol}
       dtBalance={dtBalance}
+      datasetLowPoolLiquidity={!(maxDt >= 1)}
       onClick={handleConsume}
       assetTimeout={secondsToString(parseInt(assetTimeout))}
       assetType={type}