From 87c7d239ad273441bc90699b79e27e4a6d1ed0ea Mon Sep 17 00:00:00 2001
From: ClaudiaHolhos <claudia@oceanprotocol.com>
Date: Fri, 17 Jun 2022 12:37:54 +0300
Subject: [PATCH] revert prices, locale and currency changes for price
 components

---
 .../AssetList/AssetComputeList/index.tsx      |  8 +------
 .../AssetSelection/index.stories.tsx          |  3 ---
 .../FormFields/AssetSelection/index.tsx       |  8 -------
 .../@shared/Price/Conversion/index.tsx        | 13 +++++------
 .../@shared/Price/PriceUnit/index.tsx         | 21 +++++-------------
 src/components/@shared/Price/index.tsx        | 12 +---------
 src/components/@shared/Token/index.tsx        | 22 +++----------------
 .../AssetActions/Compute/PriceOutput.tsx      | 20 +++--------------
 .../AssetActions/Pool/Sections/index.tsx      | 12 +---------
 .../Asset/AssetActions/UserLiquidity.tsx      | 14 +-----------
 src/components/Footer/MarketStats/Tooltip.tsx | 10 ---------
 src/components/Footer/MarketStats/Total.tsx   | 10 ---------
 src/components/Publish/Pricing/Price.tsx      | 15 +------------
 13 files changed, 21 insertions(+), 147 deletions(-)

diff --git a/src/components/@shared/AssetList/AssetComputeList/index.tsx b/src/components/@shared/AssetList/AssetComputeList/index.tsx
index 84f29a61c..a51570433 100644
--- a/src/components/@shared/AssetList/AssetComputeList/index.tsx
+++ b/src/components/@shared/AssetList/AssetComputeList/index.tsx
@@ -19,10 +19,7 @@ export interface AssetComputeListProps {
 }
 
 export default function AssetComputeSelection({
-  assets,
-  locale,
-  currency,
-  prices
+  assets
 }: AssetComputeListProps): JSX.Element {
   return (
     <div className={styles.display}>
@@ -49,9 +46,6 @@ export default function AssetComputeSelection({
                   price={asset.price}
                   size="small"
                   className={styles.price}
-                  locale={locale}
-                  currency={currency}
-                  prices={prices}
                 />
               </a>
             </Link>
diff --git a/src/components/@shared/FormFields/AssetSelection/index.stories.tsx b/src/components/@shared/FormFields/AssetSelection/index.stories.tsx
index 837db036e..8dacb392a 100644
--- a/src/components/@shared/FormFields/AssetSelection/index.stories.tsx
+++ b/src/components/@shared/FormFields/AssetSelection/index.stories.tsx
@@ -26,7 +26,6 @@ export const Default: Props = Template.bind({})
 Default.args = {
   assets: assetSelectionAsset,
   currency: 'OCEAN',
-  locale,
   prices
 }
 
@@ -35,7 +34,6 @@ Multiple.args = {
   assets: assetSelectionAsset,
   multiple: true,
   currency: 'OCEAN',
-  locale,
   prices
 }
 
@@ -44,6 +42,5 @@ Disabled.args = {
   assets: assetSelectionAsset,
   disabled: true,
   currency: 'OCEAN',
-  locale,
   prices
 }
diff --git a/src/components/@shared/FormFields/AssetSelection/index.tsx b/src/components/@shared/FormFields/AssetSelection/index.tsx
index 1f08ee584..64af4bb23 100644
--- a/src/components/@shared/FormFields/AssetSelection/index.tsx
+++ b/src/components/@shared/FormFields/AssetSelection/index.tsx
@@ -22,7 +22,6 @@ export interface AssetSelectionAsset {
 export interface AssetSelectionProps {
   assets: AssetSelectionAsset[]
   currency: string
-  locale: string
   prices: Prices
   multiple?: boolean
   disabled?: boolean
@@ -36,13 +35,9 @@ export default function AssetSelection({
   assets,
   multiple,
   disabled,
-  currency,
-  locale,
-  prices,
   ...props
 }: AssetSelectionProps): JSX.Element {
   const [searchValue, setSearchValue] = useState('')
-  // const { locale } = useUserPreferences()
 
   const styleClassesInput = cx({
     input: true,
@@ -122,9 +117,6 @@ export default function AssetSelection({
                   type={asset.price === '0' ? 'free' : undefined}
                   size="small"
                   className={styles.price}
-                  locale={locale}
-                  prices={prices}
-                  currency={currency}
                 />
               </div>
             ))
diff --git a/src/components/@shared/Price/Conversion/index.tsx b/src/components/@shared/Price/Conversion/index.tsx
index 9881a3e80..79c334776 100644
--- a/src/components/@shared/Price/Conversion/index.tsx
+++ b/src/components/@shared/Price/Conversion/index.tsx
@@ -2,7 +2,8 @@ import React, { useEffect, useState, ReactElement } from 'react'
 import styles from './index.module.css'
 import classNames from 'classnames/bind'
 import { formatCurrency, isCrypto } from '@coingecko/cryptoformat'
-import { Prices } from '@context/Prices'
+import { usePrices } from '@context/Prices'
+import { useUserPreferences } from '@context/UserPreferences'
 
 const cx = classNames.bind(styles)
 
@@ -10,19 +11,15 @@ export interface ConversionProps {
   price: string // expects price in OCEAN, not wei
   className?: string
   hideApproximateSymbol?: boolean
-  locale: string
-  prices: Prices
-  currency: string
 }
 
 export default function Conversion({
   price,
   className,
-  hideApproximateSymbol,
-  locale,
-  prices,
-  currency
+  hideApproximateSymbol
 }: ConversionProps): ReactElement {
+  const { prices } = usePrices()
+  const { currency, locale } = useUserPreferences()
   const [priceConverted, setPriceConverted] = useState('0.00')
   // detect fiat, only have those kick in full @coingecko/cryptoformat formatting
   const isFiat = !isCrypto(currency)
diff --git a/src/components/@shared/Price/PriceUnit/index.tsx b/src/components/@shared/Price/PriceUnit/index.tsx
index cb4361be9..773cbeaed 100644
--- a/src/components/@shared/Price/PriceUnit/index.tsx
+++ b/src/components/@shared/Price/PriceUnit/index.tsx
@@ -3,7 +3,7 @@ import { formatCurrency } from '@coingecko/cryptoformat'
 import Conversion from '../Conversion'
 import styles from './index.module.css'
 import Badge from '@shared/atoms/Badge'
-import { Prices } from '@context/Prices'
+import { useUserPreferences } from '@context/UserPreferences'
 
 export function formatPrice(price: string, locale: string): string {
   return formatCurrency(Number(price), '', locale, false, {
@@ -21,9 +21,6 @@ export interface PriceUnitProps {
   size?: 'small' | 'mini' | 'large'
   conversion?: boolean
   symbol?: string
-  locale: string
-  prices: Prices
-  currency: string
 }
 
 export default function PriceUnit({
@@ -32,11 +29,10 @@ export default function PriceUnit({
   size = 'small',
   conversion,
   symbol,
-  type,
-  locale,
-  prices,
-  currency
+  type
 }: PriceUnitProps): ReactElement {
+  const { locale } = useUserPreferences()
+
   return (
     <div className={`${styles.price} ${styles[size]} ${className}`}>
       {type && type === 'free' ? (
@@ -50,14 +46,7 @@ export default function PriceUnit({
               <Badge label="pool" className={styles.badge} />
             )}
           </div>
-          {conversion && (
-            <Conversion
-              price={price}
-              locale={locale}
-              prices={prices}
-              currency={currency}
-            />
-          )}
+          {conversion && <Conversion price={price} />}
         </>
       )}
     </div>
diff --git a/src/components/@shared/Price/index.tsx b/src/components/@shared/Price/index.tsx
index ac338774e..4e7863b04 100644
--- a/src/components/@shared/Price/index.tsx
+++ b/src/components/@shared/Price/index.tsx
@@ -4,7 +4,6 @@ import Loader from '../atoms/Loader'
 import Tooltip from '../atoms/Tooltip'
 import PriceUnit from './PriceUnit'
 import { AccessDetails, OrderPriceAndFees } from 'src/@types/Price'
-import { Prices } from '@context/Prices'
 
 export interface PriceProps {
   accessDetails: AccessDetails
@@ -12,9 +11,6 @@ export interface PriceProps {
   className?: string
   conversion?: boolean
   size?: 'small' | 'mini' | 'large'
-  locale: string
-  currency: string
-  prices: Prices
 }
 
 export default function Price({
@@ -22,10 +18,7 @@ export default function Price({
   orderPriceAndFees,
   className,
   size,
-  conversion,
-  locale,
-  currency,
-  prices
+  conversion
 }: PriceProps): ReactElement {
   return accessDetails?.price || accessDetails?.type === 'free' ? (
     <PriceUnit
@@ -35,9 +28,6 @@ export default function Price({
       size={size}
       conversion={conversion}
       type={accessDetails.type}
-      locale={locale}
-      currency={currency}
-      prices={prices}
     />
   ) : !accessDetails || accessDetails?.type === '' ? (
     <div className={styles.empty}>
diff --git a/src/components/@shared/Token/index.tsx b/src/components/@shared/Token/index.tsx
index 8f440019f..bdee56068 100644
--- a/src/components/@shared/Token/index.tsx
+++ b/src/components/@shared/Token/index.tsx
@@ -21,10 +21,7 @@ export default function Token({
   balance,
   conversion,
   noIcon,
-  size,
-  locale,
-  currency,
-  prices
+  size
 }: TokenProps): ReactElement {
   return (
     <>
@@ -34,23 +31,10 @@ export default function Token({
         >
           <Logo noWordmark />
         </figure>
-        <PriceUnit
-          price={balance}
-          symbol={symbol}
-          size={size}
-          locale={locale}
-          prices={prices}
-          currency={currency}
-        />
+        <PriceUnit price={balance} symbol={symbol} size={size} />
       </div>
       {conversion && (
-        <Conversion
-          price={balance}
-          className={`${styles.conversion}`}
-          locale={locale}
-          prices={prices}
-          currency={currency}
-        />
+        <Conversion price={balance} className={`${styles.conversion}`} />
       )}
     </>
   )
diff --git a/src/components/Asset/AssetActions/Compute/PriceOutput.tsx b/src/components/Asset/AssetActions/Compute/PriceOutput.tsx
index cd454006f..202ff1e1b 100644
--- a/src/components/Asset/AssetActions/Compute/PriceOutput.tsx
+++ b/src/components/Asset/AssetActions/Compute/PriceOutput.tsx
@@ -4,8 +4,7 @@ import PriceUnit from '@shared/Price/PriceUnit'
 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
@@ -33,8 +32,6 @@ function Row({
   timeout?: string
   sign?: string
 }) {
-  const { locale, currency } = useUserPreferences()
-  const { prices } = usePrices()
   return (
     <div className={styles.priceRow}>
       <div className={styles.sign}>{sign}</div>
@@ -44,9 +41,6 @@ function Row({
           symbol={symbol}
           size="small"
           className={styles.price}
-          locale={locale}
-          currency={currency}
-          prices={prices}
         />
         <span className={styles.timeout}>
           {timeout &&
@@ -71,19 +65,11 @@ export default function PriceOutput({
   selectedComputeAssetTimeout
 }: PriceOutputProps): ReactElement {
   const { asset } = useAsset()
-  const { locale, currency } = useUserPreferences()
-  const { prices } = usePrices()
+
   return (
     <div className={styles.priceComponent}>
       You will pay{' '}
-      <PriceUnit
-        price={`${totalPrice}`}
-        symbol={symbol}
-        size="small"
-        locale={locale}
-        currency={currency}
-        prices={prices}
-      />
+      <PriceUnit price={`${totalPrice}`} symbol={symbol} size="small" />
       <Tooltip
         content={
           <div className={styles.calculation}>
diff --git a/src/components/Asset/AssetActions/Pool/Sections/index.tsx b/src/components/Asset/AssetActions/Pool/Sections/index.tsx
index 1473a5b3d..31f9388c9 100644
--- a/src/components/Asset/AssetActions/Pool/Sections/index.tsx
+++ b/src/components/Asset/AssetActions/Pool/Sections/index.tsx
@@ -39,22 +39,12 @@ export default function PoolSections() {
   return (
     <>
       <PoolSection className={styles.dataToken}>
-        <PriceUnit
-          price="1"
-          symbol={poolInfo?.datatokenSymbol}
-          size="large"
-          locale={locale}
-          currency={currency}
-          prices={prices}
-        />{' '}
+        <PriceUnit price="1" symbol={poolInfo?.datatokenSymbol} size="large" />{' '}
         ={' '}
         <PriceUnit
           price={`${poolData?.spotPrice}`}
           symbol={poolInfo?.baseTokenSymbol}
           size="large"
-          locale={locale}
-          currency={currency}
-          prices={prices}
         />
         <Tooltip content={content.pool.tooltips.price} />
         <div className={styles.dataTokenLinks}>
diff --git a/src/components/Asset/AssetActions/UserLiquidity.tsx b/src/components/Asset/AssetActions/UserLiquidity.tsx
index 452d1fde1..772fa2f73 100644
--- a/src/components/Asset/AssetActions/UserLiquidity.tsx
+++ b/src/components/Asset/AssetActions/UserLiquidity.tsx
@@ -1,8 +1,6 @@
 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,
@@ -13,20 +11,10 @@ function UserLiquidityLine({
   amount: string
   symbol: string
 }) {
-  const { locale, currency } = useUserPreferences()
-  const { prices } = usePrices()
-
   return (
     <div>
       <span>{title}</span>
-      <PriceUnit
-        price={amount}
-        symbol={symbol}
-        size="small"
-        locale={locale}
-        currency={currency}
-        prices={prices}
-      />
+      <PriceUnit price={amount} symbol={symbol} size="small" />
     </div>
   )
 }
diff --git a/src/components/Footer/MarketStats/Tooltip.tsx b/src/components/Footer/MarketStats/Tooltip.tsx
index 73b5750a0..d2802d98d 100644
--- a/src/components/Footer/MarketStats/Tooltip.tsx
+++ b/src/components/Footer/MarketStats/Tooltip.tsx
@@ -4,8 +4,6 @@ import PriceUnit from '@shared/Price/PriceUnit'
 import NetworkName from '@shared/NetworkName'
 import styles from './Tooltip.module.css'
 import { StatsValue } from './_types'
-import { useUserPreferences } from '@context/UserPreferences'
-import { usePrices } from '@context/Prices'
 import content from '../../../../content/footer.json'
 import Markdown from '@shared/Markdown'
 
@@ -20,8 +18,6 @@ export default function MarketStatsTooltip({
   totalOceanLiquidity: StatsValue
   mainChainIds: number[]
 }): ReactElement {
-  const { locale, currency } = useUserPreferences()
-  const { prices } = usePrices()
   return (
     <>
       <ul className={styles.statsList}>
@@ -32,9 +28,6 @@ export default function MarketStatsTooltip({
             <Conversion
               price={totalValueLockedInOcean?.[chainId] || '0'}
               hideApproximateSymbol
-              locale={locale}
-              currency={currency}
-              prices={prices}
             />{' '}
             <abbr title="Total Value Locked">TVL</abbr>
             {' | '}
@@ -44,9 +37,6 @@ export default function MarketStatsTooltip({
               price={totalOceanLiquidity?.[chainId] || '0'}
               symbol="OCEAN"
               size="small"
-              locale={locale}
-              currency={currency}
-              prices={prices}
             />
           </li>
         ))}
diff --git a/src/components/Footer/MarketStats/Total.tsx b/src/components/Footer/MarketStats/Total.tsx
index d71fb0830..06f6f7fdd 100644
--- a/src/components/Footer/MarketStats/Total.tsx
+++ b/src/components/Footer/MarketStats/Total.tsx
@@ -2,16 +2,12 @@ import React, { ReactElement } from 'react'
 import Conversion from '@shared/Price/Conversion'
 import PriceUnit from '@shared/Price/PriceUnit'
 import { StatsTotal } from './_types'
-import { useUserPreferences } from '@context/UserPreferences'
-import { usePrices } from '@context/Prices'
 
 export default function MarketStatsTotal({
   total
 }: {
   total: StatsTotal
 }): ReactElement {
-  const { locale, currency } = useUserPreferences()
-  const { prices } = usePrices()
   return (
     <>
       <p>
@@ -22,9 +18,6 @@ export default function MarketStatsTotal({
       <Conversion
         price={`${total.totalValueLockedInOcean}`}
         hideApproximateSymbol
-        locale={locale}
-        currency={currency}
-        prices={prices}
       />{' '}
       <abbr title="Total Value Locked">TVL</abbr> across{' '}
       <strong>{total.pools}</strong> asset pools that contain{' '}
@@ -32,9 +25,6 @@ export default function MarketStatsTotal({
         price={`${total.totalOceanLiquidity}`}
         symbol="OCEAN"
         size="small"
-        locale={locale}
-        currency={currency}
-        prices={prices}
       />
       , plus datatokens for each pool.
     </>
diff --git a/src/components/Publish/Pricing/Price.tsx b/src/components/Publish/Pricing/Price.tsx
index 45ed5a281..0101cb80d 100644
--- a/src/components/Publish/Pricing/Price.tsx
+++ b/src/components/Publish/Pricing/Price.tsx
@@ -7,8 +7,6 @@ import PriceUnit from '@shared/Price/PriceUnit'
 import styles from './Price.module.css'
 import { FormPublishData } from '../_types'
 import { getFieldContent } from '../_utils'
-import { useUserPreferences } from '@context/UserPreferences'
-import { usePrices } from '@context/Prices'
 
 export default function Price({
   firstPrice,
@@ -18,8 +16,6 @@ export default function Price({
   content?: any
 }): ReactElement {
   const [field, meta] = useField('pricing.price')
-  const { locale, currency } = useUserPreferences()
-  const { prices } = usePrices()
 
   const { values } = useFormikContext<FormPublishData>()
   const { dataTokenOptions } = values.services[0]
@@ -50,13 +46,7 @@ export default function Price({
             <div className={styles.datatoken}>
               <h4>
                 = <strong>1</strong> {dataTokenOptions.symbol}{' '}
-                <Conversion
-                  price={field.value}
-                  className={styles.conversion}
-                  locale={locale}
-                  currency={currency}
-                  prices={prices}
-                />
+                <Conversion price={field.value} className={styles.conversion} />
               </h4>
             </div>
           </div>
@@ -67,9 +57,6 @@ export default function Price({
                 price={Number(firstPrice) > 0 ? firstPrice : '-'}
                 size="small"
                 conversion
-                locale={locale}
-                currency={currency}
-                prices={prices}
               />
             </aside>
           )}