From 9eb47f6602f2b8aa04434c6d2b5b5682714d066d Mon Sep 17 00:00:00 2001
From: Bogdan Fazakas <bogdan.fazakas@gmail.com>
Date: Wed, 15 Jun 2022 16:43:37 +0300
Subject: [PATCH] update price output tooltip and total price logic

---
 src/@utils/accessDetailsAndPricing.ts         |  9 --------
 src/@utils/assetConvertor.ts                  |  2 +-
 .../Compute/FormComputeDataset.tsx            | 12 +++++++++-
 .../Compute/PriceOutput.module.css            | 14 +++++++++---
 .../AssetActions/Compute/PriceOutput.tsx      | 20 +++++++++++++++--
 .../Asset/AssetActions/Compute/index.tsx      | 22 ++++++++++++++++---
 6 files changed, 60 insertions(+), 19 deletions(-)

diff --git a/src/@utils/accessDetailsAndPricing.ts b/src/@utils/accessDetailsAndPricing.ts
index 322fd99f6..7cbf86a97 100644
--- a/src/@utils/accessDetailsAndPricing.ts
+++ b/src/@utils/accessDetailsAndPricing.ts
@@ -319,15 +319,6 @@ export async function getOrderPriceAndFees(
   orderPriceAndFee.price = new Decimal(+orderPriceAndFee.price || 0)
     .add(new Decimal(+orderPriceAndFee?.consumeMarketOrderFee || 0))
     .add(new Decimal(+orderPriceAndFee?.publisherMarketOrderFee || 0))
-    .add(
-      new Decimal(
-        (await unitsToAmount(
-          web3,
-          orderPriceAndFee?.providerFee?.providerFeeToken,
-          orderPriceAndFee?.providerFee?.providerFeeAmount.toString()
-        )) || 0
-      )
-    )
     .toString()
   return orderPriceAndFee
 }
diff --git a/src/@utils/assetConvertor.ts b/src/@utils/assetConvertor.ts
index 2536060d2..de12c9fa3 100644
--- a/src/@utils/assetConvertor.ts
+++ b/src/@utils/assetConvertor.ts
@@ -18,7 +18,7 @@ export async function transformAssetToAssetSelection(
     const algoComputeService = getServiceByName(asset, 'compute')
 
     if (
-      asset?.accessDetails.price &&
+      asset?.accessDetails?.price &&
       algoComputeService?.serviceEndpoint === datasetProviderEndpoint
     ) {
       let selected = false
diff --git a/src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx b/src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx
index 4bd1414d1..1708e3ed9 100644
--- a/src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx
+++ b/src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx
@@ -43,7 +43,9 @@ export default function FormStartCompute({
   isConsumable,
   consumableFeedback,
   datasetOrderPriceAndFees,
-  algoOrderPriceAndFees
+  algoOrderPriceAndFees,
+  providerFeeAmount,
+  validUntil
 }: {
   algorithms: AssetSelectionAsset[]
   ddoListAlgorithms: Asset[]
@@ -70,6 +72,8 @@ export default function FormStartCompute({
   consumableFeedback: string
   datasetOrderPriceAndFees?: OrderPriceAndFees
   algoOrderPriceAndFees?: OrderPriceAndFees
+  providerFeeAmount?: string
+  validUntil?: string
 }): ReactElement {
   const { siteContent } = useMarketMetadata()
   const { isValid, values }: FormikContextType<{ algorithm: string }> =
@@ -138,8 +142,12 @@ export default function FormStartCompute({
             algoOrderPriceAndFees?.price ||
               selectedAlgorithmAsset.accessDetails.price
           ).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)
@@ -192,6 +200,8 @@ export default function FormStartCompute({
         totalPrice={totalPrice}
         datasetOrderPrice={datasetOrderPrice}
         algoOrderPrice={algoOrderPrice}
+        providerFeeAmount={providerFeeAmount}
+        validUntil={validUntil}
       />
 
       <ButtonBuy
diff --git a/src/components/Asset/AssetActions/Compute/PriceOutput.module.css b/src/components/Asset/AssetActions/Compute/PriceOutput.module.css
index e5c30b0b1..d9e7780f9 100644
--- a/src/components/Asset/AssetActions/Compute/PriceOutput.module.css
+++ b/src/components/Asset/AssetActions/Compute/PriceOutput.module.css
@@ -36,8 +36,10 @@
   border-bottom: 1px solid var(--border-color);
   padding-top: calc(var(--spacer) / 7);
   padding-bottom: calc(var(--spacer) / 7);
-  display: flex;
-  justify-content: space-between;
+  display: grid;
+  grid-template-columns: 5% 1fr auto;
+  column-gap: calc(var(--spacer) / 10);
+  /* justify-content: space-between; */
 }
 
 .priceRow:last-child {
@@ -47,8 +49,14 @@
 
 .sign {
   display: inline-block;
-  width: 5%;
   text-align: left;
   color: var(--color-secondary);
   font-size: var(--font-size-base);
 }
+
+.type {
+  display: inline-block;
+  text-align: left;
+  color: var(--color-secondary);
+  font-size: var(--font-size-mini);
+}
diff --git a/src/components/Asset/AssetActions/Compute/PriceOutput.tsx b/src/components/Asset/AssetActions/Compute/PriceOutput.tsx
index 5684689cb..3cfe3f18a 100644
--- a/src/components/Asset/AssetActions/Compute/PriceOutput.tsx
+++ b/src/components/Asset/AssetActions/Compute/PriceOutput.tsx
@@ -19,6 +19,8 @@ interface PriceOutputProps {
   selectedComputeAssetTimeout: string
   datasetOrderPrice?: number
   algoOrderPrice?: number
+  providerFeeAmount?: string
+  validUntil?: string
 }
 
 function Row({
@@ -27,7 +29,8 @@ function Row({
   hasDatatoken,
   symbol,
   timeout,
-  sign
+  sign,
+  type
 }: {
   price: string
   hasPreviousOrder?: boolean
@@ -35,10 +38,12 @@ function Row({
   symbol?: string
   timeout?: string
   sign?: string
+  type?: string
 }) {
   return (
     <div className={styles.priceRow}>
       <div className={styles.sign}>{sign}</div>
+      <div className={styles.type}>{type}</div>
       <div>
         <PriceUnit
           price={hasPreviousOrder || hasDatatoken ? '0' : `${price}`}
@@ -68,7 +73,9 @@ export default function PriceOutput({
   algorithmConsumeDetails,
   selectedComputeAssetTimeout,
   datasetOrderPrice,
-  algoOrderPrice
+  algoOrderPrice,
+  providerFeeAmount,
+  validUntil
 }: PriceOutputProps): ReactElement {
   const { asset } = useAsset()
 
@@ -89,6 +96,7 @@ export default function PriceOutput({
                 .toString()}
               timeout={assetTimeout}
               symbol={symbol}
+              type="DATASET"
             />
             <Row
               hasPreviousOrder={hasPreviousOrderSelectedComputeAsset}
@@ -101,6 +109,14 @@ export default function PriceOutput({
               timeout={selectedComputeAssetTimeout}
               symbol={symbol}
               sign="+"
+              type="ALGORITHM"
+            />
+            <Row
+              price={providerFeeAmount} // initializeCompute.provider fee amount
+              timeout={`${validUntil} seconds`} // valid until value
+              symbol={symbol}
+              sign="+"
+              type="C2D RESOURCES"
             />
             <Row price={totalPrice} symbol={symbol} sign="=" />
           </div>
diff --git a/src/components/Asset/AssetActions/Compute/index.tsx b/src/components/Asset/AssetActions/Compute/index.tsx
index 842287dc2..16cc34119 100644
--- a/src/components/Asset/AssetActions/Compute/index.tsx
+++ b/src/components/Asset/AssetActions/Compute/index.tsx
@@ -11,7 +11,8 @@ import {
   LoggerInstance,
   ComputeAlgorithm,
   ComputeOutput,
-  ProviderComputeInitializeResults
+  ProviderComputeInitializeResults,
+  unitsToAmount
 } from '@oceanprotocol/lib'
 import { toast } from 'react-toastify'
 import Price from '@shared/Price'
@@ -93,7 +94,8 @@ export default function Compute({
   const [computeEnv, setComputeEnv] = useState<ComputeEnvironment>()
   const [initializedProviderResponse, setInitializedProviderResponse] =
     useState<ProviderComputeInitializeResults>()
-  // const [computeValidUntil, setComputeValidUntil] = useState<number>()
+  const [providerFeeAmount, setProviderFeeAmount] = useState<string>('0')
+  const [computeValidUntil, setComputeValidUntil] = useState<string>('0')
   const [datasetOrderPriceAndFees, setDatasetOrderPriceAndFees] =
     useState<OrderPriceAndFees>()
   const [isRequestingDataseOrderPrice, setIsRequestingDataseOrderPrice] =
@@ -146,7 +148,19 @@ export default function Compute({
       return
     }
     setInitializedProviderResponse(initializedProvider)
-
+    setProviderFeeAmount(
+      await unitsToAmount(
+        web3,
+        initializedProvider?.datasets?.[0]?.providerFee?.providerFeeToken,
+        initializedProviderResponse?.datasets?.[0]?.providerFee
+          ?.providerFeeAmount
+      )
+    )
+    const computeDuration = (
+      parseInt(initializedProvider?.datasets?.[0]?.providerFee?.validUntil) -
+      Math.floor(Date.now() / 1000)
+    ).toString()
+    setComputeValidUntil(computeDuration)
     if (
       asset?.accessDetails?.addressOrId !== ZERO_ADDRESS &&
       asset?.accessDetails?.type !== 'free' &&
@@ -476,6 +490,8 @@ export default function Compute({
             consumableFeedback={consumableFeedback}
             datasetOrderPriceAndFees={datasetOrderPriceAndFees}
             algoOrderPriceAndFees={algoOrderPriceAndFees}
+            providerFeeAmount={providerFeeAmount}
+            validUntil={computeValidUntil}
           />
         </Formik>
       )}