C2D fixes (#1715)

src/@types/Compute.d.ts

@@ -27,4 +27,9 @@ declare global {
     computeJobs: ComputeJobMetaData[]
     isLoaded: boolean
   }
+
+  interface totalPriceMap {
+    value: string
+    symbol: string
+  }
 }

src/@utils/dispenser.ts

@@ -1,18 +1,13 @@
-import { LoggerInstance, Dispenser, Datatoken } from '@oceanprotocol/lib'
+import { LoggerInstance, Datatoken } from '@oceanprotocol/lib'
 import Web3 from 'web3'
 import { TransactionReceipt } from 'web3-core'
 
 export async function setMinterToPublisher(
   web3: Web3,
-  dispenserAddress: string,
   datatokenAddress: string,
   accountId: string,
   setError: (msg: string) => void
 ): Promise<TransactionReceipt> {
-  const dispenserInstance = new Dispenser(dispenserAddress, web3)
-  const status = await dispenserInstance.status(datatokenAddress)
-  if (!status?.active) return
-
   const datatokenInstance = new Datatoken(web3)
 
   const response = await datatokenInstance.removeMinter(
@@ -20,6 +15,7 @@ export async function setMinterToPublisher(
     accountId,
     accountId
   )
+
   if (!response) {
     setError('Updating DDO failed.')
     LoggerInstance.error('Failed at cancelMinter')

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

@@ -11,11 +11,11 @@ import { useWeb3 } from '@context/Web3'
 import content from '../../../../../content/pages/startComputeDataset.json'
 import { Asset } from '@oceanprotocol/lib'
 import { getAccessDetails } from '@utils/accessDetailsAndPricing'
-import Decimal from 'decimal.js'
-import { MAX_DECIMALS } from '@utils/constants'
 import { useMarketMetadata } from '@context/MarketMetadata'
 import Alert from '@shared/atoms/Alert'
 import { getTokenBalanceFromSymbol } from '@utils/web3'
+import { MAX_DECIMALS } from '@utils/constants'
+import Decimal from 'decimal.js'
 
 export default function FormStartCompute({
   algorithms,
@@ -31,7 +31,8 @@ export default function FormStartCompute({
   assetTimeout,
   hasPreviousOrderSelectedComputeAsset,
   hasDatatokenSelectedComputeAsset,
-  oceanSymbol,
+  datasetSymbol,
+  algorithmSymbol,
   dtSymbolSelectedComputeAsset,
   dtBalanceSelectedComputeAsset,
   selectedComputeAssetType,
@@ -57,7 +58,8 @@ export default function FormStartCompute({
   assetTimeout: string
   hasPreviousOrderSelectedComputeAsset?: boolean
   hasDatatokenSelectedComputeAsset?: boolean
-  oceanSymbol?: string
+  datasetSymbol?: string
+  algorithmSymbol?: string
   dtSymbolSelectedComputeAsset?: string
   dtBalanceSelectedComputeAsset?: string
   selectedComputeAssetType?: string
@@ -76,14 +78,14 @@ export default function FormStartCompute({
     useFormikContext()
   const { asset, isAssetNetwork } = useAsset()
 
-  const [totalPrice, setTotalPrice] = useState('0')
   const [datasetOrderPrice, setDatasetOrderPrice] = useState(
     asset?.accessDetails?.price
   )
   const [algoOrderPrice, setAlgoOrderPrice] = useState(
     selectedAlgorithmAsset?.accessDetails?.price
   )
-  const [isBalanceSufficient, setIsBalanceSufficient] = useState<boolean>(false)
+  const [totalPrices, setTotalPrices] = useState([])
+  const [isBalanceSufficient, setIsBalanceSufficient] = useState<boolean>(true)
 
   function getAlgorithmAsset(algorithmId: string): Asset {
     let assetDdo = null
@@ -126,28 +128,73 @@ export default function FormStartCompute({
       algoOrderPriceAndFees?.price ||
         selectedAlgorithmAsset?.accessDetails.price
     )
+    const totalPrices: totalPriceMap[] = []
     const priceDataset =
-      hasPreviousOrder || hasDatatoken
+      !datasetOrderPrice || hasPreviousOrder || hasDatatoken
         ? new Decimal(0)
-        : new Decimal(
-            datasetOrderPriceAndFees?.price || asset.accessDetails.price
-          ).toDecimalPlaces(MAX_DECIMALS)
+        : new Decimal(datasetOrderPrice).toDecimalPlaces(MAX_DECIMALS)
     const priceAlgo =
-      hasPreviousOrderSelectedComputeAsset || hasDatatokenSelectedComputeAsset
+      !algoOrderPrice ||
+      hasPreviousOrderSelectedComputeAsset ||
+      hasDatatokenSelectedComputeAsset
         ? new Decimal(0)
-        : new Decimal(
-            algoOrderPriceAndFees?.price ||
-              selectedAlgorithmAsset.accessDetails.price
-          ).toDecimalPlaces(MAX_DECIMALS)
+        : new Decimal(algoOrderPrice).toDecimalPlaces(MAX_DECIMALS)
     const providerFees = providerFeeAmount
       ? new Decimal(providerFeeAmount).toDecimalPlaces(MAX_DECIMALS)
       : new Decimal(0)
-    const totalPrice = priceDataset
-      .plus(priceAlgo)
-      .plus(providerFees)
-      .toDecimalPlaces(MAX_DECIMALS)
-      .toString()
-    setTotalPrice(totalPrice)
+
+    if (algorithmSymbol === 'OCEAN') {
+      let sum = providerFees.add(priceAlgo)
+      totalPrices.push({
+        value: sum.toDecimalPlaces(MAX_DECIMALS).toString(),
+        symbol: algorithmSymbol
+      })
+      if (algorithmSymbol === datasetSymbol) {
+        sum = sum.add(priceDataset)
+        totalPrices[0].value = sum.toDecimalPlaces(MAX_DECIMALS).toString()
+      } else {
+        totalPrices.push({
+          value: priceDataset.toDecimalPlaces(MAX_DECIMALS).toString(),
+          symbol: datasetSymbol
+        })
+      }
+    } else {
+      if (datasetSymbol === 'OCEAN') {
+        const sum = providerFees.add(priceDataset)
+        totalPrices.push({
+          value: sum.toDecimalPlaces(MAX_DECIMALS).toString(),
+          symbol: datasetSymbol
+        })
+        totalPrices.push({
+          value: priceAlgo.toDecimalPlaces(MAX_DECIMALS).toString(),
+          symbol: algorithmSymbol
+        })
+      } else if (datasetSymbol === algorithmSymbol) {
+        const sum = priceAlgo.add(priceDataset)
+        totalPrices.push({
+          value: sum.toDecimalPlaces(MAX_DECIMALS).toString(),
+          symbol: algorithmSymbol
+        })
+        totalPrices.push({
+          value: providerFees.toDecimalPlaces(MAX_DECIMALS).toString(),
+          symbol: 'OCEAN'
+        })
+      } else {
+        totalPrices.push({
+          value: priceDataset.toDecimalPlaces(MAX_DECIMALS).toString(),
+          symbol: datasetSymbol
+        })
+        totalPrices.push({
+          value: providerFees.toDecimalPlaces(MAX_DECIMALS).toString(),
+          symbol: 'OCEAN'
+        })
+        totalPrices.push({
+          value: priceAlgo.toDecimalPlaces(MAX_DECIMALS).toString(),
+          symbol: algorithmSymbol
+        })
+      }
+    }
+    setTotalPrices(totalPrices)
   }, [
     asset?.accessDetails,
     selectedAlgorithmAsset?.accessDetails,
@@ -161,16 +208,18 @@ export default function FormStartCompute({
   ])
 
   useEffect(() => {
-    const baseTokenBalance = getTokenBalanceFromSymbol(
-      balance,
-      asset?.accessDetails?.baseToken?.symbol
-    )
-
-    if (!totalPrice || !baseTokenBalance || !dtBalance) return
-    setIsBalanceSufficient(
-      compareAsBN(baseTokenBalance, `${totalPrice}`) || Number(dtBalance) >= 1
-    )
-  }, [totalPrice, balance, dtBalance, asset?.accessDetails?.baseToken?.symbol])
+    totalPrices.forEach((price) => {
+      const baseTokenBalance = getTokenBalanceFromSymbol(balance, price.symbol)
+      if (!baseTokenBalance) {
+        setIsBalanceSufficient(false)
+        return
+      }
+      // if one comparison of baseTokenBalance and token price comparison is false then the state will be false
+      setIsBalanceSufficient(
+        isBalanceSufficient && compareAsBN(baseTokenBalance, `${price.value}`)
+      )
+    })
+  }, [balance, dtBalance, datasetSymbol, algorithmSymbol])
 
   return (
     <Form className={styles.form}>
@@ -201,12 +250,13 @@ export default function FormStartCompute({
         selectedComputeAssetTimeout={selectedComputeAssetTimeout}
         hasDatatokenSelectedComputeAsset={hasDatatokenSelectedComputeAsset}
         algorithmConsumeDetails={selectedAlgorithmAsset?.accessDetails}
-        symbol={oceanSymbol}
-        totalPrice={totalPrice}
+        symbol={datasetSymbol}
+        algorithmSymbol={algorithmSymbol}
         datasetOrderPrice={datasetOrderPrice}
         algoOrderPrice={algoOrderPrice}
         providerFeeAmount={providerFeeAmount}
         validUntil={validUntil}
+        totalPrices={totalPrices}
       />
 
       <ButtonBuy

src/components/Asset/AssetActions/Compute/PriceOutput.tsx

@@ -7,7 +7,6 @@ import { MAX_DECIMALS } from '@utils/constants'
 import Decimal from 'decimal.js'
 
 interface PriceOutputProps {
-  totalPrice: string
   hasPreviousOrder: boolean
   hasDatatoken: boolean
   symbol: string
@@ -15,11 +14,13 @@ interface PriceOutputProps {
   hasPreviousOrderSelectedComputeAsset: boolean
   hasDatatokenSelectedComputeAsset: boolean
   algorithmConsumeDetails: AccessDetails
+  algorithmSymbol: string
   selectedComputeAssetTimeout: string
   datasetOrderPrice?: string
   algoOrderPrice?: string
   providerFeeAmount?: string
   validUntil?: string
+  totalPrices?: totalPriceMap[]
 }
 
 function Row({
@@ -62,7 +63,6 @@ function Row({
 }
 
 export default function PriceOutput({
-  totalPrice,
   hasPreviousOrder,
   hasDatatoken,
   assetTimeout,
@@ -70,18 +70,30 @@ export default function PriceOutput({
   hasPreviousOrderSelectedComputeAsset,
   hasDatatokenSelectedComputeAsset,
   algorithmConsumeDetails,
+  algorithmSymbol,
   selectedComputeAssetTimeout,
   datasetOrderPrice,
   algoOrderPrice,
   providerFeeAmount,
-  validUntil
+  validUntil,
+  totalPrices
 }: PriceOutputProps): ReactElement {
   const { asset } = useAsset()
 
   return (
     <div className={styles.priceComponent}>
       You will pay{' '}
-      <PriceUnit price={Number(totalPrice)} symbol={symbol} size="small" />
+      {totalPrices.map((item, index) => (
+        <div key={item.symbol}>
+          <PriceUnit
+            price={Number(item.value)}
+            symbol={
+              index < totalPrices.length - 1 ? `${item.symbol} & ` : item.symbol
+            }
+            size="small"
+          />
+        </div>
+      ))}
       <Tooltip
         content={
           <div className={styles.calculation}>
@@ -106,18 +118,25 @@ export default function PriceOutput({
                 .toDecimalPlaces(MAX_DECIMALS)
                 .toString()}
               timeout={selectedComputeAssetTimeout}
-              symbol={symbol}
+              symbol={algorithmSymbol}
               sign="+"
               type="ALGORITHM"
             />
             <Row
               price={providerFeeAmount} // initializeCompute.provider fee amount
               timeout={`${validUntil} seconds`} // valid until value
-              symbol={symbol}
+              symbol={'OCEAN'} // we assume that provider fees will always be in OCEAN token
               sign="+"
               type="C2D RESOURCES"
             />
-            <Row price={totalPrice} symbol={symbol} sign="=" />
+            {totalPrices.map((item, index) => (
+              <Row
+                price={item.value}
+                symbol={item.symbol}
+                sign={index === 0 ? '=' : '&'}
+                key={item.symbol}
+              />
+            ))}
           </div>
         }
       />

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

@@ -456,8 +456,8 @@ export default function Compute({
               validAlgorithmOrderTx !== undefined
             }
             hasDatatokenSelectedComputeAsset={hasAlgoAssetDatatoken}
-            oceanSymbol={
-              asset?.accessDetails?.baseToken?.symbol ||
+            datasetSymbol={asset?.accessDetails?.baseToken?.symbol || 'OCEAN'}
+            algorithmSymbol={
               selectedAlgorithmAsset?.accessDetails?.baseToken?.symbol ||
               'OCEAN'
             }

src/components/Asset/Edit/EditComputeDataset.tsx

@@ -41,10 +41,12 @@ export default function EditComputeDataset({
 
   async function handleSubmit(values: ComputeEditForm, resetForm: () => void) {
     try {
-      if (asset?.accessDetails?.type === 'free') {
+      if (
+        asset?.accessDetails?.type === 'free' &&
+        asset?.accessDetails?.isPurchasable
+      ) {
         const tx = await setMinterToPublisher(
           web3,
-          asset?.accessDetails?.addressOrId,
           asset?.accessDetails?.datatoken?.address,
           accountId,
           setError