fix: Fix route, balance, amount, token in swap and minutes in transaction deadline window

src/components/CurrencyInputPanel/index.tsx

@@ -117,7 +117,9 @@ export default function CurrencyInputPanel({
               {account && (
                 <Text onClick={onMax} fontSize="14px" style={{ display: 'inline', cursor: 'pointer' }}>
                   {!hideBalance && !!currency && selectedCurrencyBalance
-                    ? `Balance: ${selectedCurrencyBalance?.toSignificant(6)}`
+                    ? TranslateString(78, `Balance ${selectedCurrencyBalance?.toSignificant(6)}`, {
+                        num: selectedCurrencyBalance?.toSignificant(6),
+                      })
                     : ' -'}
                 </Text>
               )}

src/components/NavigationTabs/index.tsx

@@ -48,7 +48,9 @@ export function AddRemoveTabs({ adding }: { adding: boolean }) {
         <HistoryLink to="/pool">
           <StyledArrowLeft />
         </HistoryLink>
-        <ActiveText>{adding ? TranslateString(258, 'Add') : TranslateString(260, 'Remove')} Liquidity</ActiveText>
+        <ActiveText>
+          {adding ? TranslateString(168, 'Add Liquidity') : TranslateString(999, 'Remove Liquidity')}
+        </ActiveText>
         <QuestionHelper
           text={
             adding

src/components/PageHeader/TransactionDeadlineSetting.tsx

@@ -68,7 +68,7 @@ const TransactionDeadlineSetting = ({ translateString }: TransactionDeadlineSett
       </Label>
       <Field>
         <Input type="number" step="1" min="1" value={value} onChange={handleChange} />
-        <Text>Minutes</Text>
+        <Text>{TranslateString(92, 'minutes')}</Text>
       </Field>
       {error && (
         <Text mt="8px" color="failure">

src/components/swap/AdvancedSwapDetails.tsx

@@ -45,7 +45,7 @@ function TradeSummary({ trade, allowedSlippage }: { trade: Trade; allowedSlippag
         </RowBetween>
         <RowBetween>
           <RowFixed>
-            <Text fontSize='14px'>{TranslateString(226, 'Price Impact')}</Text>
+            <Text fontSize="14px">{TranslateString(226, 'Price Impact')}</Text>
             <QuestionHelper
               text={TranslateString(
                 224,
@@ -94,7 +94,7 @@ export function AdvancedSwapDetails({ trade }: AdvancedSwapDetailsProps) {
               <SectionBreak />
               <AutoColumn style={{ padding: '0 24px' }}>
                 <RowFixed>
-                  <Text fontSize="14px">Route</Text>
+                  <Text fontSize="14px">{TranslateString(232, 'Route')}</Text>
                   <QuestionHelper
                     text={TranslateString(
                       999,

src/components/swap/TradePrice.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { Price } from '@pancakeswap-libs/sdk'
 import { SyncAltIcon, Text } from '@pancakeswap-libs/uikit'
 import { StyledBalanceMaxMini } from './styleds'
+import useI18n from '../../hooks/useI18n'
 
 interface TradePriceProps {
   price?: Price
@@ -10,12 +11,13 @@ interface TradePriceProps {
 }
 
 export default function TradePrice({ price, showInverted, setShowInverted }: TradePriceProps) {
+  const TranslateString = useI18n()
   const formattedPrice = showInverted ? price?.toSignificant(6) : price?.invert()?.toSignificant(6)
 
   const show = Boolean(price?.baseCurrency && price?.quoteCurrency)
   const label = showInverted
-    ? `${price?.quoteCurrency?.symbol} per ${price?.baseCurrency?.symbol}`
-    : `${price?.baseCurrency?.symbol} per ${price?.quoteCurrency?.symbol}`
+    ? `${price?.quoteCurrency?.symbol} ${TranslateString(242, 'per')} ${price?.baseCurrency?.symbol}`
+    : `${price?.baseCurrency?.symbol} ${TranslateString(242, 'per')} ${price?.quoteCurrency?.symbol}`
 
   return (
     <Text fontSize="14px" style={{ justifyContent: 'center', alignItems: 'center', display: 'flex' }}>

src/hooks/useI18n.ts

@@ -1,6 +1,10 @@
 import { useCallback, useContext } from 'react'
 import { TranslationsContext } from 'hooks/TranslationsContext'
-import { getTranslation } from 'utils/translateTextHelpers'
+import { isEmpty } from 'lodash'
+
+interface ContextData {
+  [key: string]: number | string
+}
 
 const useI18n = () => {
   const { translations } = useContext(TranslationsContext)
@@ -11,17 +15,41 @@ const useI18n = () => {
    * TODO: Figure out if the context is used and if not, remove it.
    */
   return useCallback(
-    (translationId: number, fallback: string) => {
+    (translationId: number, fallback: string, data: ContextData = {}) => {
       if (translations[0] === 'error') {
         return fallback
       }
-      if (translations.length > 0) {
-        return getTranslation(translations, translationId, fallback)
+
+      const foundTranslation = translations.find((translation) => {
+        return translation.data.stringId === translationId
+      })
+
+      if (foundTranslation) {
+        const { text } = foundTranslation.data
+        const includesVariable = text.includes('%')
+
+        if (includesVariable) {
+          let interpolatedText = text
+
+          // If dynamic tags are found but no data was passed return the fallback
+          if (isEmpty(data)) {
+            return fallback
+          }
+
+          Object.keys(data).forEach((dataKey) => {
+            const templateKey = new RegExp(`%${dataKey}%`, 'g')
+            interpolatedText = interpolatedText.replace(templateKey, data[dataKey])
+          })
+
+          return interpolatedText
+        }
+
+        return text
       }
+
       return fallback
     },
-    [translations]
-  )
+    [translations])
 }
 
 export default useI18n

src/pages/AddLiquidity/PoolPriceBar.tsx

@@ -5,6 +5,7 @@ import { AutoColumn } from '../../components/Column'
 import { AutoRow } from '../../components/Row'
 import { ONE_BIPS } from '../../constants'
 import { Field } from '../../state/mint/actions'
+import useI18n from '../../hooks/useI18n'
 
 export function PoolPriceBar({
   currencies,
@@ -17,19 +18,20 @@ export function PoolPriceBar({
   poolTokenPercentage?: Percent
   price?: Price
 }) {
+  const TranslateString = useI18n()
   return (
     <AutoColumn gap="md">
       <AutoRow justify="space-around" gap="4px">
         <AutoColumn justify="center">
           <Text>{price?.toSignificant(6) ?? '-'}</Text>
           <Text fontSize="14px" color="textSubtle" pt={1}>
-            {currencies[Field.CURRENCY_B]?.symbol} per {currencies[Field.CURRENCY_A]?.symbol}
+            {currencies[Field.CURRENCY_B]?.symbol} {TranslateString(242, 'per')} {currencies[Field.CURRENCY_A]?.symbol}
           </Text>
         </AutoColumn>
         <AutoColumn justify="center">
           <Text>{price?.invert()?.toSignificant(6) ?? '-'}</Text>
           <Text fontSize="14px" color="textSubtle" pt={1}>
-            {currencies[Field.CURRENCY_A]?.symbol} per {currencies[Field.CURRENCY_B]?.symbol}
+            {currencies[Field.CURRENCY_A]?.symbol} {TranslateString(242, 'per')} {currencies[Field.CURRENCY_B]?.symbol}
           </Text>
         </AutoColumn>
         <AutoColumn justify="center">

src/pages/Pool/index.tsx

@@ -70,7 +70,7 @@ export default function Pool() {
           <CardBody>
             <AutoColumn gap="12px" style={{ width: '100%' }}>
               <RowBetween padding="0 8px">
-                <Text color={theme.colors.text}>{TranslateString(107, 'Your Liquidity')}</Text>
+                <Text color={theme.colors.text}>{TranslateString(102, 'Your Liquidity')}</Text>
                 <Question
                   text={TranslateString(
                     1170,

src/state/swap/hooks.ts

@@ -16,6 +16,7 @@ import { SwapState } from './reducer'
 
 import { useUserSlippageTolerance } from '../user/hooks'
 import { computeSlippageAdjustedAmounts } from '../../utils/prices'
+import { TranslateString } from '../../utils/translateTextHelpers'
 
 export function useSwapState(): AppState['swap'] {
   return useSelector<AppState, AppState['swap']>((state) => state.swap)
@@ -152,15 +153,15 @@ export function useDerivedSwapInfo(): {
 
   let inputError: string | undefined
   if (!account) {
-    inputError = 'Connect Wallet'
+    inputError = TranslateString(138, 'Connect Wallet')
   }
 
   if (!parsedAmount) {
-    inputError = inputError ?? 'Enter an amount'
+    inputError = inputError ?? TranslateString(84, 'Enter an amount')
   }
 
   if (!currencies[Field.INPUT] || !currencies[Field.OUTPUT]) {
-    inputError = inputError ?? 'Select a token'
+    inputError = inputError ?? TranslateString(82, 'Select a Token')
   }
 
   const formattedTo = isAddress(to)