revert prices, locale and currency changes for price components

2024-12-02 05:57:29 +01:00 · 2022-06-17 12:37:54 +03:00 · 2022-06-17 12:37:54 +03:00 · 87c7d239ad
commit 87c7d239ad
parent 5231f43648
13 changed files with 21 additions and 147 deletions
--- 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>
--- 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
 }
--- 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>
            ))
--- 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)
--- 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>
--- 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}>
--- 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}`} />
      )}
    </>
  )
--- 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}>
--- 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}>
--- 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>
  )
 }
--- 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>
        ))}
--- 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.
    </>
--- 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>
          )}