From 8fc7a19a55d18a4bf909cbd3b036eae49d8f0433 Mon Sep 17 00:00:00 2001
From: ClaudiaHolhos <claudia@oceanprotocol.com>
Date: Wed, 8 Jun 2022 16:18:37 +0300
Subject: [PATCH] currency, prices  props fixes

---
 src/components/@shared/FormInput/InputElement.tsx  | 10 ++++++++++
 .../Compute/AlgorithmDatasetsListForCompute.tsx    | 12 +++++++++---
 .../Asset/AssetActions/Compute/PriceOutput.tsx     | 11 +++++++++--
 .../Asset/AssetActions/Compute/index.tsx           |  6 +++++-
 src/components/Asset/AssetActions/Download.tsx     |  6 +++++-
 .../Asset/AssetActions/UserLiquidity.tsx           | 14 ++++++++++++--
 6 files changed, 50 insertions(+), 9 deletions(-)

diff --git a/src/components/@shared/FormInput/InputElement.tsx b/src/components/@shared/FormInput/InputElement.tsx
index 343889238..902289879 100644
--- a/src/components/@shared/FormInput/InputElement.tsx
+++ b/src/components/@shared/FormInput/InputElement.tsx
@@ -11,6 +11,8 @@ import AssetSelection, {
 } from '../FormFields/AssetSelection'
 import Nft from '../FormFields/Nft'
 import InputRadio from './InputRadio'
+import { useUserPreferences } from '@context/UserPreferences'
+import { usePrices } from '@context/Prices'
 
 const cx = classNames.bind(styles)
 
@@ -55,6 +57,8 @@ export default function InputElement({
   ...props
 }: InputProps): ReactElement {
   const styleClasses = cx({ select: true, [size]: size })
+  const { locale, currency } = useUserPreferences()
+  const { prices } = usePrices()
   switch (props.type) {
     case 'select': {
       const sortedOptions =
@@ -91,6 +95,9 @@ export default function InputElement({
       return (
         <AssetSelection
           assets={options as unknown as AssetSelectionAsset[]}
+          locale={locale}
+          currency={currency}
+          prices={prices}
           {...field}
           {...props}
         />
@@ -100,6 +107,9 @@ export default function InputElement({
       return (
         <AssetSelection
           assets={options as unknown as AssetSelectionAsset[]}
+          locale={locale}
+          currency={currency}
+          prices={prices}
           multiple
           {...field}
           {...props}
diff --git a/src/components/Asset/AssetActions/Compute/AlgorithmDatasetsListForCompute.tsx b/src/components/Asset/AssetActions/Compute/AlgorithmDatasetsListForCompute.tsx
index 0983984f7..8dddfb55d 100644
--- a/src/components/Asset/AssetActions/Compute/AlgorithmDatasetsListForCompute.tsx
+++ b/src/components/Asset/AssetActions/Compute/AlgorithmDatasetsListForCompute.tsx
@@ -5,9 +5,9 @@ import { AssetSelectionAsset } from '@shared/FormFields/AssetSelection'
 import AssetComputeList from '@shared/AssetList/AssetComputeList'
 import { useCancelToken } from '@hooks/useCancelToken'
 import { getServiceByName } from '@utils/ddo'
-import { Asset } from '@oceanprotocol/lib'
 import { AssetExtended } from 'src/@types/AssetExtended'
 import { useUserPreferences } from '@context/UserPreferences'
+import { usePrices } from '@context/Prices'
 
 export default function AlgorithmDatasetsListForCompute({
   asset,
@@ -19,7 +19,8 @@ export default function AlgorithmDatasetsListForCompute({
   const [datasetsForCompute, setDatasetsForCompute] =
     useState<AssetSelectionAsset[]>()
   const newCancelToken = useCancelToken()
-  const { locale } = useUserPreferences()
+  const { locale, currency } = useUserPreferences()
+  const { prices } = usePrices()
 
   useEffect(() => {
     if (!asset) return
@@ -44,7 +45,12 @@ export default function AlgorithmDatasetsListForCompute({
   return (
     <div className={styles.datasetsContainer}>
       <h3 className={styles.text}>Datasets algorithm is allowed to run on</h3>
-      <AssetComputeList assets={datasetsForCompute} locale={locale} />
+      <AssetComputeList
+        assets={datasetsForCompute}
+        locale={locale}
+        currency={currency}
+        prices={prices}
+      />
     </div>
   )
 }
diff --git a/src/components/Asset/AssetActions/Compute/PriceOutput.tsx b/src/components/Asset/AssetActions/Compute/PriceOutput.tsx
index 124ef6330..cd454006f 100644
--- a/src/components/Asset/AssetActions/Compute/PriceOutput.tsx
+++ b/src/components/Asset/AssetActions/Compute/PriceOutput.tsx
@@ -5,6 +5,7 @@ import Tooltip from '@shared/atoms/Tooltip'
 import styles from './PriceOutput.module.css'
 import { AccessDetails } from 'src/@types/Price'
 import { useUserPreferences } from '@context/UserPreferences'
+import { usePrices } from '@context/Prices'
 interface PriceOutputProps {
   totalPrice: number
   hasPreviousOrder: boolean
@@ -32,7 +33,8 @@ function Row({
   timeout?: string
   sign?: string
 }) {
-  const { locale } = useUserPreferences()
+  const { locale, currency } = useUserPreferences()
+  const { prices } = usePrices()
   return (
     <div className={styles.priceRow}>
       <div className={styles.sign}>{sign}</div>
@@ -43,6 +45,8 @@ function Row({
           size="small"
           className={styles.price}
           locale={locale}
+          currency={currency}
+          prices={prices}
         />
         <span className={styles.timeout}>
           {timeout &&
@@ -67,7 +71,8 @@ export default function PriceOutput({
   selectedComputeAssetTimeout
 }: PriceOutputProps): ReactElement {
   const { asset } = useAsset()
-  const { locale } = useUserPreferences()
+  const { locale, currency } = useUserPreferences()
+  const { prices } = usePrices()
   return (
     <div className={styles.priceComponent}>
       You will pay{' '}
@@ -76,6 +81,8 @@ export default function PriceOutput({
         symbol={symbol}
         size="small"
         locale={locale}
+        currency={currency}
+        prices={prices}
       />
       <Tooltip
         content={
diff --git a/src/components/Asset/AssetActions/Compute/index.tsx b/src/components/Asset/AssetActions/Compute/index.tsx
index 6cf231605..44291beaf 100644
--- a/src/components/Asset/AssetActions/Compute/index.tsx
+++ b/src/components/Asset/AssetActions/Compute/index.tsx
@@ -35,6 +35,7 @@ import { AccessDetails } from 'src/@types/Price'
 import { transformAssetToAssetSelection } from '@utils/assetConvertor'
 import { useMarketMetadata } from '@context/MarketMetadata'
 import { useUserPreferences } from '@context/UserPreferences'
+import { usePrices } from '@context/Prices'
 
 export default function Compute({
   ddo,
@@ -54,7 +55,8 @@ export default function Compute({
   consumableFeedback?: string
 }): ReactElement {
   const { appConfig } = useMarketMetadata()
-  const { locale } = useUserPreferences()
+  const { locale, currency } = useUserPreferences()
+  const { prices } = usePrices()
   const { accountId } = useWeb3()
   const [isJobStarting, setIsJobStarting] = useState(false)
   const [error, setError] = useState<string>()
@@ -395,6 +397,8 @@ export default function Compute({
           conversion
           size="large"
           locale={locale}
+          currency={currency}
+          prices={prices}
         />
       </div>
 
diff --git a/src/components/Asset/AssetActions/Download.tsx b/src/components/Asset/AssetActions/Download.tsx
index e064d0fec..fa86bf37e 100644
--- a/src/components/Asset/AssetActions/Download.tsx
+++ b/src/components/Asset/AssetActions/Download.tsx
@@ -20,6 +20,7 @@ import { useIsMounted } from '@hooks/useIsMounted'
 import { usePool } from '@context/Pool'
 import { useMarketMetadata } from '@context/MarketMetadata'
 import { useUserPreferences } from '@context/UserPreferences'
+import { usePrices } from '@context/Prices'
 
 export default function Download({
   asset,
@@ -37,7 +38,8 @@ export default function Download({
   consumableFeedback?: string
 }): ReactElement {
   const { accountId, web3 } = useWeb3()
-  const { locale } = useUserPreferences()
+  const { locale, currency } = useUserPreferences()
+  const { prices } = usePrices()
   const { getOpcFeeForToken } = useMarketMetadata()
   const { isInPurgatory, isAssetNetwork } = useAsset()
   const { poolData } = usePool()
@@ -216,6 +218,8 @@ export default function Download({
             conversion
             size="large"
             locale={locale}
+            currency={currency}
+            prices={prices}
           />
           {!isInPurgatory && <PurchaseButton />}
         </div>
diff --git a/src/components/Asset/AssetActions/UserLiquidity.tsx b/src/components/Asset/AssetActions/UserLiquidity.tsx
index 0936bab84..452d1fde1 100644
--- a/src/components/Asset/AssetActions/UserLiquidity.tsx
+++ b/src/components/Asset/AssetActions/UserLiquidity.tsx
@@ -2,6 +2,7 @@ import React, { ReactElement } from 'react'
 import PriceUnit from '@shared/Price/PriceUnit'
 import styles from './UserLiquidity.module.css'
 import { useUserPreferences } from '@context/UserPreferences'
+import { usePrices } from '@context/Prices'
 
 function UserLiquidityLine({
   title,
@@ -12,11 +13,20 @@ function UserLiquidityLine({
   amount: string
   symbol: string
 }) {
-  const { locale } = useUserPreferences()
+  const { locale, currency } = useUserPreferences()
+  const { prices } = usePrices()
+
   return (
     <div>
       <span>{title}</span>
-      <PriceUnit price={amount} symbol={symbol} size="small" locale={locale} />
+      <PriceUnit
+        price={amount}
+        symbol={symbol}
+        size="small"
+        locale={locale}
+        currency={currency}
+        prices={prices}
+      />
     </div>
   )
 }