diff --git a/apps/web/src/components/RangePriceSection/index.tsx b/apps/web/src/components/RangePriceSection/index.tsx index da794aa48de30..6b36862e31d85 100644 --- a/apps/web/src/components/RangePriceSection/index.tsx +++ b/apps/web/src/components/RangePriceSection/index.tsx @@ -1,3 +1,4 @@ +import { useTranslation } from '@pancakeswap/localization' import { Currency } from '@pancakeswap/sdk' import { Text, Heading } from '@pancakeswap/uikit' import { LightGreyCard, LightCardProps } from 'components/Card' @@ -10,6 +11,7 @@ interface RangePriceSectionProps extends LightCardProps { } export const RangePriceSection = ({ title, currency0, currency1, price, ...props }: RangePriceSectionProps) => { + const { t } = useTranslation() return ( {price} - {currency0?.symbol} per {currency1?.symbol} + {t('%assetA% per %assetB%', { + assetA: currency0?.symbol ?? '', + assetB: currency1?.symbol ?? '', + })} ) diff --git a/apps/web/src/views/AddLiquidityV3/formViews/V3FormView/index.tsx b/apps/web/src/views/AddLiquidityV3/formViews/V3FormView/index.tsx index f55b1d9c265ec..e66f0f4f9c176 100644 --- a/apps/web/src/views/AddLiquidityV3/formViews/V3FormView/index.tsx +++ b/apps/web/src/views/AddLiquidityV3/formViews/V3FormView/index.tsx @@ -627,7 +627,10 @@ export default function V3FormView({ {invertPrice ? price.invert().toSignificant(6) : price.toSignificant(6)} - {quoteCurrency?.symbol} per {baseCurrency.symbol} + {t('%assetA% per %assetB%', { + assetA: quoteCurrency?.symbol ?? '', + assetB: baseCurrency.symbol ?? '', + })} )} diff --git a/apps/web/src/views/LimitOrders/components/LimitOrderPrice.tsx b/apps/web/src/views/LimitOrders/components/LimitOrderPrice.tsx index 64632d1f39c71..ff517b7677c08 100644 --- a/apps/web/src/views/LimitOrders/components/LimitOrderPrice.tsx +++ b/apps/web/src/views/LimitOrders/components/LimitOrderPrice.tsx @@ -58,8 +58,14 @@ const LimitOrderPrice: React.FC> = const hasCurrencyInfo = inputCurrency && outputCurrency const label = rateType === Rate.MUL - ? `${outputCurrency?.symbol} per ${inputCurrency?.symbol}` - : `${inputCurrency?.symbol} per ${outputCurrency?.symbol}` + ? t('%assetA% per %assetB%', { + assetA: outputCurrency?.symbol ?? '', + assetB: inputCurrency?.symbol ?? '', + }) + : t('%assetA% per %assetB%', { + assetA: inputCurrency?.symbol ?? '', + assetB: outputCurrency?.symbol ?? '', + }) const toggleRateType = () => { handleRateType(rateType, price) diff --git a/apps/web/src/views/LimitOrders/components/LimitOrderTable/CompactRow.tsx b/apps/web/src/views/LimitOrders/components/LimitOrderTable/CompactRow.tsx index 0cd7392ac1ecf..a1c9ab2035378 100644 --- a/apps/web/src/views/LimitOrders/components/LimitOrderTable/CompactRow.tsx +++ b/apps/web/src/views/LimitOrders/components/LimitOrderTable/CompactRow.tsx @@ -41,7 +41,12 @@ const CompactRow: React.FC> = ({ order {t('Price')} - {`${executionPrice} ${outputToken?.symbol} per ${inputToken?.symbol}`} + + {`${executionPrice} ${t('%assetA% per %assetB%', { + assetA: outputToken?.symbol ?? '', + assetB: inputToken?.symbol ?? '', + })}`} +