use locale value as Conversion prop

src/components/@shared/FormFields/AssetSelection/index.stories.tsx

@@ -3,6 +3,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react'
 import AssetSelection, {
   AssetSelectionProps
 } from '@shared/FormFields/AssetSelection'
+import { assetSelectionAsset } from '../../../../../.storybook/__mockdata__'
 
 export default {
   title: 'Component/@shared/FormFields/AssetSelection',
@@ -17,36 +18,19 @@ interface Props {
   args: AssetSelectionProps
 }
 
-const assetsList = [
-  {
-    did: 'did:op:07baafad66d21e61789d2d71ee1684c2d7235f8efefc59bfabf4fd984bf5c09d',
-    name: 'Pool test',
-    price: '22.004619932610114622',
-    checked: true,
-    symbol: 'OCEAN-NFT'
-  },
-  {
-    did: 'did:op:3f0f273e030e38fa24d5c725bb73fc799cc424847e05bc064ff63813d30fae36',
-    name: 'Dynamic price test',
-    price: '11.103104637669568064',
-    checked: true,
-    symbol: 'PUCPOR-86'
-  }
-]
-
 export const Default: Props = Template.bind({})
 Default.args = {
-  assets: assetsList
+  assets: assetSelectionAsset
 }
 
 export const Multiple: Props = Template.bind({})
 Multiple.args = {
-  assets: assetsList,
+  assets: assetSelectionAsset,
   multiple: true
 }
 
 export const Disabled: Props = Template.bind({})
 Disabled.args = {
-  assets: assetsList,
+  assets: assetSelectionAsset,
   disabled: true
 }

src/components/@shared/FormFields/Nft/TxFee.tsx

@@ -6,6 +6,7 @@ import useNftFactory from '@hooks/contracts/useNftFactory'
 import { NftFactory } from '@oceanprotocol/lib'
 import Conversion from '@shared/Price/Conversion'
 import { generateNftCreateData, NftMetadata } from '@utils/nft'
+import { useUserPreferences } from '@context/UserPreferences'
 
 const getEstGasFee = async (
   address: string,
@@ -37,6 +38,8 @@ export default function TxFee({
   const { accountId } = useWeb3()
   const { prices } = usePrices()
   const nftFactory = useNftFactory()
+  const { locale } = useUserPreferences()
+
   const [gasFee, setGasFee] = useState('')
 
   useEffect(() => {
@@ -55,7 +58,7 @@ export default function TxFee({
   return gasFee ? (
     <p>
       Gas fee estimation for this artwork
-      <Conversion price={gasFee} />
+      <Conversion locale={locale} price={gasFee} />
     </p>
   ) : accountId ? (
     <p>

src/components/@shared/Price/Conversion/index.stories.tsx

@@ -1,8 +1,7 @@
 import React from 'react'
 import { ComponentStory, ComponentMeta } from '@storybook/react'
 import Conversion, { ConversionProps } from '@shared/Price/Conversion'
-import { usePrices } from '@context/Prices'
+import { locale } from '../../../../../.storybook/__mockdata__'
-import { useUserPreferences } from '@context/UserPreferences'
 
 export default {
   title: 'Component/@shared/Price/Conversion',
@@ -10,12 +9,6 @@ export default {
 } as ComponentMeta<typeof Conversion>
 
 const Template: ComponentStory<typeof Conversion> = (args: ConversionProps) => {
-  const { prices } = usePrices()
-  const { currency, locale } = useUserPreferences()
-
-  console.log('PRICES: ', prices)
-  if (!prices || !currency || !locale) return
-
   return <Conversion {...args} />
 }
 
@@ -25,11 +18,13 @@ interface Props {
 
 export const Default: Props = Template.bind({})
 Default.args = {
-  price: '11.12333'
+  price: '11.12333',
+  locale
 }
 
 export const HideApproximateSymbol: Props = Template.bind({})
 HideApproximateSymbol.args = {
   price: '11.12333',
+  locale,
   hideApproximateSymbol: true
 }

src/components/@shared/Price/Conversion/index.tsx

@@ -11,15 +11,17 @@ export interface ConversionProps {
   price: string // expects price in OCEAN, not wei
   className?: string
   hideApproximateSymbol?: boolean
+  locale: string
 }
 
 export default function Conversion({
   price,
   className,
-  hideApproximateSymbol
+  hideApproximateSymbol,
+  locale
 }: ConversionProps): ReactElement {
   const { prices } = usePrices()
-  const { currency, locale } = useUserPreferences()
+  const { currency } = useUserPreferences()
 
   const [priceConverted, setPriceConverted] = useState('0.00')
   // detect fiat, only have those kick in full @coingecko/cryptoformat formatting
@@ -56,7 +58,7 @@ export default function Conversion({
       (match) => `<span>${match}</span>`
     )
     setPriceConverted(convertedFormattedHTMLstring)
-  }, [price, prices, currency, locale, isFiat])
+  }, [price, prices, currency, isFiat, locale])
 
   return (
     <span

src/components/@shared/Price/PriceUnit/index.tsx

@@ -45,7 +45,7 @@ export default function PriceUnit({
               <Badge label="pool" className={styles.badge} />
             )}
           </div>
-          {conversion && <Conversion price={price} />}
+          {conversion && <Conversion price={price} locale={locale} />}
         </>
       )}
     </div>

src/components/@shared/Token/index.tsx

@@ -35,7 +35,11 @@ export default function Token({
         />
       </div>
       {conversion && (
-        <Conversion price={balance} className={`${styles.conversion}`} />
+        <Conversion
+          price={balance}
+          className={`${styles.conversion}`}
+          locale={locale}
+        />
       )}
     </>
   )

src/components/Footer/MarketStats/Tooltip.tsx

@@ -28,6 +28,7 @@ export default function MarketStatsTooltip({
             <Conversion
               price={totalValueLockedInOcean?.[chainId] || '0'}
               hideApproximateSymbol
+              locale={locale}
             />{' '}
             <abbr title="Total Value Locked">TVL</abbr>
             {' | '}

src/components/Footer/MarketStats/Total.tsx

@@ -20,6 +20,7 @@ export default function MarketStatsTotal({
       <Conversion
         price={`${total.totalValueLockedInOcean}`}
         hideApproximateSymbol
+        locale={locale}
       />{' '}
       <abbr title="Total Value Locked">TVL</abbr> across{' '}
       <strong>{total.pools}</strong> asset pools that contain{' '}

src/components/Header/Wallet/Details.tsx

@@ -66,7 +66,7 @@ export default function Details(): ReactElement {
             {formatCurrency(Number(value), '', locale, false, {
               significantFigures: 4
             })}
-            {key === 'ocean' && <Conversion price={value} />}
+            {key === 'ocean' && <Conversion price={value} locale={locale} />}
           </li>
         ))}
 

src/components/Profile/Header/Stats.tsx

@@ -34,6 +34,7 @@ export default function Stats({
 }): ReactElement {
   const { chainIds } = useUserPreferences()
   const { poolShares, assets, assetsTotal, sales } = useProfile()
+  const { locale } = useUserPreferences()
 
   const [publisherTvl, setPublisherTvl] = useState('0')
   const [totalTvl, setTotalTvl] = useState('0')
@@ -90,11 +91,19 @@ export default function Stats({
     <div className={styles.stats}>
       <NumberUnit
         label="Liquidity in Own Assets"
-        value={<Conversion price={publisherTvl} hideApproximateSymbol />}
+        value={
+          <Conversion
+            price={publisherTvl}
+            hideApproximateSymbol
+            locale={locale}
+          />
+        }
       />
       <NumberUnit
         label="Liquidity"
-        value={<Conversion price={totalTvl} hideApproximateSymbol />}
+        value={
+          <Conversion price={totalTvl} hideApproximateSymbol locale={locale} />
+        }
       />
       <NumberUnit label={`Sale${sales === 1 ? '' : 's'}`} value={sales} />
       <NumberUnit label="Published" value={assetsTotal} />

src/components/Profile/History/PoolShares/Liquidity.tsx

@@ -5,6 +5,7 @@ import Token from '../../../@shared/Token'
 import Decimal from 'decimal.js'
 import { AssetPoolShare } from './index'
 import { calcSingleOutGivenPoolIn } from '@utils/pool'
+import { useUserPreferences } from '@context/UserPreferences'
 
 export function Liquidity({
   row,
@@ -14,6 +15,7 @@ export function Liquidity({
   type: string
 }) {
   const [liquidity, setLiquidity] = useState('0')
+  const { locale } = useUserPreferences()
 
   useEffect(() => {
     let calculatedLiquidity = '0'
@@ -43,6 +45,7 @@ export function Liquidity({
         price={liquidity}
         className={styles.totalLiquidity}
         hideApproximateSymbol
+        locale={locale}
       />
       <Token
         symbol={row.poolShare.pool.baseToken.symbol}

src/components/Publish/Pricing/Coin.tsx

@@ -5,6 +5,7 @@ import Logo from '@images/logo.svg'
 import Conversion from '@shared/Price/Conversion'
 import { useField } from 'formik'
 import Error from '@shared/FormInput/Error'
+import { useUserPreferences } from '@context/UserPreferences'
 
 export default function Coin({
   datatokenOptions,
@@ -18,6 +19,7 @@ export default function Coin({
   readOnly?: boolean
 }): ReactElement {
   const [field, meta] = useField(`pricing.${name}`)
+  const { locale } = useUserPreferences()
 
   return (
     <div className={styles.coin}>
@@ -47,7 +49,7 @@ export default function Coin({
           {...field}
         />
         {datatokenOptions?.symbol === 'OCEAN' && (
-          <Conversion price={field.value} />
+          <Conversion price={field.value} locale={locale} />
         )}
         <div>
           <Error meta={meta} />

src/components/Publish/Pricing/Price.tsx

@@ -48,7 +48,11 @@ export default function Price({
             <div className={styles.datatoken}>
               <h4>
                 = <strong>1</strong> {dataTokenOptions.symbol}{' '}
-                <Conversion price={field.value} className={styles.conversion} />
+                <Conversion
+                  price={field.value}
+                  className={styles.conversion}
+                  locale={locale}
+                />
               </h4>
             </div>
           </div>