Merge pull request #1284 from oceanprotocol/feature/v4-c2d-data-algo-price-with-fee

c2d show price with fee, exclude provider fee

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

@@ -10,7 +10,7 @@ import { useAsset } from '@context/Asset'
 import { useWeb3 } from '@context/Web3'
 import content from '../../../../../content/pages/startComputeDataset.json'
 import { Asset } from '@oceanprotocol/lib'
-import { AccessDetails } from 'src/@types/Price'
+import { AccessDetails, OrderPriceAndFees } from 'src/@types/Price'
 import {
   getAccessDetailsForAssets,
   getAccessDetails
@@ -40,7 +40,9 @@ export default function FormStartCompute({
   selectedComputeAssetTimeout,
   stepText,
   isConsumable,
-  consumableFeedback
+  consumableFeedback,
+  datasetOrderPriceAndFees,
+  algoOrderPriceAndFees
 }: {
   algorithms: AssetSelectionAsset[]
   ddoListAlgorithms: Asset[]
@@ -65,11 +67,19 @@ export default function FormStartCompute({
   stepText: string
   isConsumable: boolean
   consumableFeedback: string
+  datasetOrderPriceAndFees?: OrderPriceAndFees
+  algoOrderPriceAndFees?: OrderPriceAndFees
 }): ReactElement {
   const { isValid, values }: FormikContextType<{ algorithm: string }> =
     useFormikContext()
   const { asset, isAssetNetwork } = useAsset()
   const [totalPrice, setTotalPrice] = useState(asset?.accessDetails?.price)
+  const [datasetOrderPrice, setDatasetOrderPrice] = useState(
+    asset?.accessDetails?.price
+  )
+  const [algoOrderPrice, setAlgoOrderPrice] = useState(
+    selectedAlgorithmAsset?.accessDetails?.price
+  )
   const [isBalanceSufficient, setIsBalanceSufficient] = useState<boolean>(false)
   const { accountId, balance } = useWeb3()
 
@@ -106,12 +116,24 @@ export default function FormStartCompute({
   useEffect(() => {
     if (!asset?.accessDetails || !selectedAlgorithmAsset?.accessDetails) return
 
+    setDatasetOrderPrice(
+      datasetOrderPriceAndFees?.price || asset.accessDetails.price
+    )
+    setAlgoOrderPrice(
+      algoOrderPriceAndFees?.price ||
+        selectedAlgorithmAsset?.accessDetails.price
+    )
     const priceDataset =
-      hasPreviousOrder || hasDatatoken ? 0 : Number(asset.accessDetails.price)
+      hasPreviousOrder || hasDatatoken
+        ? 0
+        : Number(datasetOrderPriceAndFees?.price || asset.accessDetails.price)
     const priceAlgo =
       hasPreviousOrderSelectedComputeAsset || hasDatatokenSelectedComputeAsset
         ? 0
-        : Number(selectedAlgorithmAsset?.accessDetails.price)
+        : Number(
+            algoOrderPriceAndFees?.price ||
+              selectedAlgorithmAsset?.accessDetails.price
+          )
 
     setTotalPrice((priceDataset + priceAlgo).toString())
   }, [
@@ -120,7 +142,9 @@ export default function FormStartCompute({
     hasPreviousOrder,
     hasDatatoken,
     hasPreviousOrderSelectedComputeAsset,
-    hasDatatokenSelectedComputeAsset
+    hasDatatokenSelectedComputeAsset,
+    datasetOrderPriceAndFees,
+    algoOrderPriceAndFees
   ])
 
   useEffect(() => {
@@ -153,6 +177,8 @@ export default function FormStartCompute({
         algorithmConsumeDetails={selectedAlgorithmAsset?.accessDetails}
         symbol={oceanSymbol}
         totalPrice={Number.parseFloat(totalPrice)}
+        datasetOrderPrice={datasetOrderPrice}
+        algoOrderPrice={algoOrderPrice}
       />
 
       <ButtonBuy

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

@@ -15,6 +15,8 @@ interface PriceOutputProps {
   hasDatatokenSelectedComputeAsset: boolean
   algorithmConsumeDetails: AccessDetails
   selectedComputeAssetTimeout: string
+  datasetOrderPrice?: number
+  algoOrderPrice?: number
 }
 
 function Row({
@@ -62,7 +64,9 @@ export default function PriceOutput({
   hasPreviousOrderSelectedComputeAsset,
   hasDatatokenSelectedComputeAsset,
   algorithmConsumeDetails,
-  selectedComputeAssetTimeout
+  selectedComputeAssetTimeout,
+  datasetOrderPrice,
+  algoOrderPrice
 }: PriceOutputProps): ReactElement {
   const { asset } = useAsset()
 
@@ -76,14 +80,20 @@ export default function PriceOutput({
             <Row
               hasPreviousOrder={hasPreviousOrder}
               hasDatatoken={hasDatatoken}
-              price={Number.parseFloat(asset?.accessDetails?.price)}
+              price={
+                datasetOrderPrice ||
+                Number.parseFloat(asset?.accessDetails?.price)
+              }
               timeout={assetTimeout}
               symbol={symbol}
             />
             <Row
               hasPreviousOrder={hasPreviousOrderSelectedComputeAsset}
               hasDatatoken={hasDatatokenSelectedComputeAsset}
-              price={Number.parseFloat(algorithmConsumeDetails?.price)}
+              price={
+                algoOrderPrice ||
+                Number.parseFloat(algorithmConsumeDetails?.price)
+              }
               timeout={selectedComputeAssetTimeout}
               symbol={symbol}
               sign="+"

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

@@ -83,13 +83,21 @@ export default function Compute({
   const [isConsumablePrice, setIsConsumablePrice] = useState(true)
   const [isAlgoConsumablePrice, setIsAlgoConsumablePrice] = useState(true)
   const [computeStatusText, setComputeStatusText] = useState('')
+  const [datasetOrderPriceAndFees, setDatasetOrderPriceAndFees] =
+    useState<OrderPriceAndFees>()
+  const [isRequestingDataseOrderPrice, setIsRequestingDataseOrderPrice] =
+    useState(false)
+  const [algoOrderPriceAndFees, setAlgoOrderPriceAndFees] =
+    useState<OrderPriceAndFees>()
+  const [isRequestingAlgoOrderPrice, setIsRequestingAlgoOrderPrice] =
+    useState(false)
   const isComputeButtonDisabled =
     isJobStarting === true ||
     file === null ||
     (!validOrderTx && !hasDatatoken && !isConsumablePrice) ||
     (!validAlgorithmOrderTx && !hasAlgoAssetDatatoken && !isAlgoConsumablePrice)
 
-  async function checkAssetDTBalance(asset: DDO) {
+  async function checkAssetDTBalance(asset: DDO): Promise<boolean> {
     if (!asset?.services[0].datatokenAddress) return
     const datatokenInstance = new Datatoken(web3)
     const dtBalance = await datatokenInstance.balance(
@@ -97,7 +105,9 @@ export default function Compute({
       accountId
     )
     setAlgorithmDTBalance(new Decimal(dtBalance).toString())
-    setHasAlgoAssetDatatoken(Number(dtBalance) >= 1)
+    const hasAlgoDt = Number(dtBalance) >= 1
+    setHasAlgoAssetDatatoken(hasAlgoDt)
+    return hasAlgoDt
   }
 
   useEffect(() => {
@@ -106,16 +116,56 @@ export default function Compute({
     setIsConsumablePrice(asset?.accessDetails?.isPurchasable)
     setIsOwned(asset?.accessDetails?.isOwned)
     setValidOrderTx(asset?.accessDetails?.validOrderTx)
+
+    async function initDatasetPriceAndFees() {
+      if (
+        asset?.accessDetails?.addressOrId === ZERO_ADDRESS ||
+        asset?.accessDetails?.type === 'free'
+      )
+        return
+
+      setIsRequestingDataseOrderPrice(true)
+      setComputeStatusText('Calculating price including fees.')
+      const orderPriceAndFees = await getOrderPriceAndFees(asset, accountId)
+      setDatasetOrderPriceAndFees(orderPriceAndFees)
+      setIsRequestingDataseOrderPrice(false)
+    }
+
+    initDatasetPriceAndFees()
   }, [asset?.accessDetails])
 
   useEffect(() => {
     if (!selectedAlgorithmAsset?.accessDetails || !accountId) return
-    checkAssetDTBalance(selectedAlgorithmAsset)
+
     setIsConsumablePrice(selectedAlgorithmAsset?.accessDetails?.isPurchasable)
     setIsAlgorithmOwned(selectedAlgorithmAsset?.accessDetails?.isOwned)
     setValidAlgorithmOrderTx(
       selectedAlgorithmAsset?.accessDetails?.validOrderTx
     )
+
+    async function initAlgoPriceAndFees() {
+      if (
+        selectedAlgorithmAsset?.accessDetails?.addressOrId === ZERO_ADDRESS ||
+        selectedAlgorithmAsset?.accessDetails?.type === 'free'
+      )
+        return
+
+      setIsRequestingAlgoOrderPrice(true)
+      setComputeStatusText('Calculating price including fees.')
+      const orderPriceAndFees = await getOrderPriceAndFees(
+        selectedAlgorithmAsset,
+        accountId
+      )
+      setAlgoOrderPriceAndFees(orderPriceAndFees)
+      setIsRequestingAlgoOrderPrice(false)
+    }
+
+    async function initSelectedAlgo() {
+      const hasAlgoDt = await checkAssetDTBalance(selectedAlgorithmAsset)
+      !hasAlgoDt && (await initAlgoPriceAndFees())
+    }
+
+    initSelectedAlgo()
   }, [selectedAlgorithmAsset])
 
   useEffect(() => {
@@ -406,7 +456,11 @@ export default function Compute({
             ddoListAlgorithms={ddoAlgorithmList}
             selectedAlgorithmAsset={selectedAlgorithmAsset}
             setSelectedAlgorithm={setSelectedAlgorithmAsset}
-            isLoading={isJobStarting}
+            isLoading={
+              isJobStarting ||
+              isRequestingDataseOrderPrice ||
+              isRequestingAlgoOrderPrice
+            }
             isComputeButtonDisabled={isComputeButtonDisabled}
             hasPreviousOrder={validOrderTx !== undefined}
             hasDatatoken={hasDatatoken}
@@ -436,6 +490,8 @@ export default function Compute({
             stepText={computeStatusText}
             isConsumable={isConsumable}
             consumableFeedback={consumableFeedback}
+            datasetOrderPriceAndFees={datasetOrderPriceAndFees}
+            algoOrderPriceAndFees={algoOrderPriceAndFees}
           />
         </Formik>
       )}