fix: Missing per symbol translation (#9155)

<!--
Before opening a pull request, please read the [contributing
guidelines](https://github.com/pancakeswap/pancake-frontend/blob/develop/CONTRIBUTING.md)
first
-->


<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to internationalize currency display in various
components by replacing hardcoded symbols with translated strings.

### Detailed summary
- Updated currency display in multiple components to use translated
strings
- Implemented internationalization for asset pairs in price calculations

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your
question}`

<!-- end pr-codex -->

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 (
     <LightGreyCard
       {...props}
@@ -24,7 +26,10 @@ export const RangePriceSection = ({ title, currency0, currency1, price, ...props
       </Text>
       <Heading mb="4px">{price}</Heading>
       <Text fontSize="12px" color="textSubtle">
-        {currency0?.symbol} per {currency1?.symbol}
+        {t('%assetA% per %assetB%', {
+          assetA: currency0?.symbol ?? '',
+          assetB: currency1?.symbol ?? '',
+        })}
       </Text>
     </LightGreyCard>
   )

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)}
                     </Text>
                     <Text color="text2" fontSize={12}>
-                      {quoteCurrency?.symbol} per {baseCurrency.symbol}
+                      {t('%assetA% per %assetB%', {
+                        assetA: quoteCurrency?.symbol ?? '',
+                        assetB: baseCurrency.symbol ?? '',
+                      })}
                     </Text>
                   </AutoRow>
                 )}

apps/web/src/views/LimitOrders/components/LimitOrderPrice.tsx

@@ -58,8 +58,14 @@ const LimitOrderPrice: React.FC<React.PropsWithChildren<LimitOrderPriceProps>> =
   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)

apps/web/src/views/LimitOrders/components/LimitOrderTable/CompactRow.tsx

@@ -41,7 +41,12 @@ const CompactRow: React.FC<React.PropsWithChildren<CompactRowProps>> = ({ order
           <Text fontSize="12px" bold color="textSubtle" textTransform="uppercase">
             {t('Price')}
           </Text>
-          <Text small>{`${executionPrice} ${outputToken?.symbol} per ${inputToken?.symbol}`}</Text>
+          <Text small>
+            {`${executionPrice} ${t('%assetA% per %assetB%', {
+              assetA: outputToken?.symbol ?? '',
+              assetB: inputToken?.symbol ?? '',
+            })}`}
+          </Text>
         </Flex>
       </Box>
     </Flex>