Localization replacement (pancakeswap#234)

* chore: Update CardNav

* chore: Update SlippageToleranceSettings Localization

* refactor: Memoize translation function

* chore: Replace TranslatedText

* chore: Add Translation IDs

* fix(i18n): Updated CurrencyInputPanel translation

* fix: Type error

* chore: Remove TranslatedText

Co-authored-by: hachiojidev <[email protected]>

Author: Chef-Chungus

src/components/AddressInputPanel/index.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback } from 'react'
 import styled from 'styled-components'
 import { Text } from '@pancakeswap-libs/uikit'
+import useI18n from 'hooks/useI18n'
 import useENS from '../../hooks/useENS'
 import { useActiveWeb3React } from '../../hooks'
 import { ExternalLink } from '../Shared'
@@ -79,7 +80,7 @@ export default function AddressInputPanel({
   onChange: (value: string) => void
 }) {
   const { chainId } = useActiveWeb3React()
-
+  const TranslateString = useI18n()
   const { address, loading, name } = useENS(value)
 
   const handleInput = useCallback(
@@ -100,11 +101,11 @@ export default function AddressInputPanel({
           <AutoColumn gap="md">
             <RowBetween>
               <Text color="textSubtle" fontWeight={500} fontSize="14px">
-                Recipient
+                {TranslateString(1138, 'Recipient')}
               </Text>
               {address && chainId && (
                 <ExternalLink href={getBscScanLink(chainId, name ?? address, 'address')} style={{ fontSize: '14px' }}>
-                  (View on BscScan)
+                  {TranslateString(116, '(View on BscScan)')}
                 </ExternalLink>
               )}
             </RowBetween>
@@ -115,7 +116,7 @@ export default function AddressInputPanel({
               autoCorrect="off"
               autoCapitalize="off"
               spellCheck="false"
-              placeholder="Wallet Address or ENS name"
+              placeholder={TranslateString(1140, 'Wallet Address or ENS name')}
               error={error}
               pattern="^(0x[a-fA-F0-9]{40})$"
               onChange={handleInput}

src/components/CardNav/index.tsx

@@ -2,32 +2,35 @@ import React from 'react'
 import styled from 'styled-components'
 import { Link } from 'react-router-dom'
 import { ButtonMenu, ButtonMenuItem } from '@pancakeswap-libs/uikit'
-import TranslatedText from '../TranslatedText'
+import useI18n from 'hooks/useI18n'
 
 const StyledNav = styled.div`
   margin-bottom: 40px;
 `
 
-const Nav = ({ activeIndex = 0 }: { activeIndex?: number }) => (
-  <StyledNav>
-    <ButtonMenu activeIndex={activeIndex} scale="sm" variant="subtle">
-      <ButtonMenuItem id="swap-nav-link" to="/swap" as={Link}>
-        <TranslatedText translationId={8}>Swap</TranslatedText>
-      </ButtonMenuItem>
-      <ButtonMenuItem id="pool-nav-link" to="/pool" as={Link}>
-        <TranslatedText translationId={74}>Liquidity</TranslatedText>
-      </ButtonMenuItem>
-      <ButtonMenuItem
-        id="pool-nav-link"
-        as="a"
-        href="https://www.binance.org/en/bridge?utm_source=PancakeSwap"
-        target="_blank"
-        rel="noreferrer noopener"
-      >
-        Bridge
-      </ButtonMenuItem>
-    </ButtonMenu>
-  </StyledNav>
-)
+function Nav({ activeIndex = 0 }: { activeIndex?: number }) {
+  const TranslateString = useI18n()
+  return (
+    <StyledNav>
+      <ButtonMenu activeIndex={activeIndex} scale="sm" variant="subtle">
+        <ButtonMenuItem id="swap-nav-link" to="/swap" as={Link}>
+          {TranslateString(1142, 'Swap')}
+        </ButtonMenuItem>
+        <ButtonMenuItem id="pool-nav-link" to="/pool" as={Link}>
+          {TranslateString(262, 'Liquidity')}
+        </ButtonMenuItem>
+        <ButtonMenuItem
+          id="pool-nav-link"
+          as="a"
+          href="https://www.binance.org/en/bridge?utm_source=PancakeSwap"
+          target="_blank"
+          rel="noreferrer noopener"
+        >
+          Bridge
+        </ButtonMenuItem>
+      </ButtonMenu>
+    </StyledNav>
+  )
+}
 
 export default Nav

src/components/CurrencyInputPanel/index.tsx

@@ -3,23 +3,21 @@ import { Currency, Pair } from '@pancakeswap-libs/sdk'
 import { Button, ChevronDownIcon, Text } from '@pancakeswap-libs/uikit'
 import styled from 'styled-components'
 import { darken } from 'polished'
+import useI18n from 'hooks/useI18n'
 import { useCurrencyBalance } from '../../state/wallet/hooks'
 import CurrencySearchModal from '../SearchModal/CurrencySearchModal'
 import CurrencyLogo from '../CurrencyLogo'
 import DoubleCurrencyLogo from '../DoubleLogo'
 import { RowBetween } from '../Row'
 import { Input as NumericalInput } from '../NumericalInput'
 import { useActiveWeb3React } from '../../hooks'
-import TranslatedText from '../TranslatedText'
-import { TranslateString } from '../../utils/translateTextHelpers'
 
 const InputRow = styled.div<{ selected: boolean }>`
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
   padding: ${({ selected }) => (selected ? '0.75rem 0.5rem 0.75rem 1rem' : '0.75rem 0.75rem 0.75rem 1rem')};
 `
-
 const CurrencySelect = styled.button<{ selected: boolean }>`
   align-items: center;
   height: 34px;
@@ -33,13 +31,11 @@ const CurrencySelect = styled.button<{ selected: boolean }>`
   user-select: none;
   border: none;
   padding: 0 0.5rem;
-
   :focus,
   :hover {
     background-color: ${({ theme }) => darken(0.05, theme.colors.input)};
   }
 `
-
 const LabelRow = styled.div`
   display: flex;
   flex-flow: row nowrap;
@@ -53,13 +49,11 @@ const LabelRow = styled.div`
     color: ${({ theme }) => darken(0.2, theme.colors.textSubtle)};
   }
 `
-
 const Aligner = styled.span`
   display: flex;
   align-items: center;
   justify-content: space-between;
 `
-
 const InputPanel = styled.div<{ hideInput?: boolean }>`
   display: flex;
   flex-flow: column nowrap;
@@ -68,13 +62,11 @@ const InputPanel = styled.div<{ hideInput?: boolean }>`
   background-color: ${({ theme }) => theme.colors.background};
   z-index: 1;
 `
-
 const Container = styled.div<{ hideInput: boolean }>`
   border-radius: 16px;
   background-color: ${({ theme }) => theme.colors.input};
   box-shadow: ${({ theme }) => theme.shadows.inset};
 `
-
 interface CurrencyInputPanelProps {
   value: string
   onUserInput: (value: string) => void
@@ -91,13 +83,12 @@ interface CurrencyInputPanelProps {
   id: string
   showCommonBases?: boolean
 }
-
 export default function CurrencyInputPanel({
   value,
   onUserInput,
   onMax,
   showMaxButton,
-  label = TranslateString(132, 'Input'),
+  label,
   onCurrencySelect,
   currency,
   disableCurrencySelect = false,
@@ -111,18 +102,18 @@ export default function CurrencyInputPanel({
   const [modalOpen, setModalOpen] = useState(false)
   const { account } = useActiveWeb3React()
   const selectedCurrencyBalance = useCurrencyBalance(account ?? undefined, currency ?? undefined)
-
+  const TranslateString = useI18n()
+  const translatedLabel = label || TranslateString(132, 'Input')
   const handleDismissSearch = useCallback(() => {
     setModalOpen(false)
   }, [setModalOpen])
-
   return (
     <InputPanel id={id}>
       <Container hideInput={hideInput}>
         {!hideInput && (
           <LabelRow>
             <RowBetween>
-              <Text fontSize="14px">{label}</Text>
+              <Text fontSize="14px">{translatedLabel}</Text>
               {account && (
                 <Text onClick={onMax} fontSize="14px" style={{ display: 'inline', cursor: 'pointer' }}>
                   {!hideBalance && !!currency && selectedCurrencyBalance
@@ -176,7 +167,7 @@ export default function CurrencyInputPanel({
                         currency.symbol.length - 5,
                         currency.symbol.length
                       )}`
-                    : currency?.symbol) || <TranslatedText translationId={82}>Select a currency</TranslatedText>}
+                    : currency?.symbol) || TranslateString(1196, 'Select a currency')}
                 </Text>
               )}
               {!disableCurrencySelect && <ChevronDownIcon />}

src/components/PageHeader/SlippageToleranceSetting.tsx

@@ -2,8 +2,8 @@ import React, { useEffect, useState } from 'react'
 import styled from 'styled-components'
 import { Button, Flex, Input, Text } from '@pancakeswap-libs/uikit'
 import { useUserSlippageTolerance } from 'state/user/hooks'
+import useI18n from 'hooks/useI18n'
 import QuestionHelper from '../QuestionHelper'
-import TranslatedText from '../TranslatedText'
 
 const MAX_SLIPPAGE = 5000
 const RISKY_SLIPPAGE_LOW = 50
@@ -44,14 +44,13 @@ const Label = styled.div`
 const predefinedValues = [
   { label: '0.1%', value: 0.1 },
   { label: '0.5%', value: 0.5 },
-  { label: '1%', value: 1 }
+  { label: '1%', value: 1 },
 ]
-
 const SlippageToleranceSettings = () => {
+  const TranslateString = useI18n()
   const [userSlippageTolerance, setUserslippageTolerance] = useUserSlippageTolerance()
   const [value, setValue] = useState(userSlippageTolerance / 100)
   const [error, setError] = useState<string | null>(null)
-
   const handleChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
     const { value: inputValue } = evt.target
     setValue(parseFloat(inputValue))
@@ -65,29 +64,32 @@ const SlippageToleranceSettings = () => {
         setUserslippageTolerance(rawValue)
         setError(null)
       } else {
-        setError('Enter a valid slippage percentage')
+        setError(TranslateString(1144, 'Enter a valid slippage percentage'))
       }
     } catch {
-      setError('Enter a valid slippage percentage')
+      setError(TranslateString(1144, 'Enter a valid slippage percentage'))
     }
-  }, [value, setError, setUserslippageTolerance])
+  }, [value, setError, setUserslippageTolerance, TranslateString])
 
   // Notify user if slippage is risky
   useEffect(() => {
     if (userSlippageTolerance < RISKY_SLIPPAGE_LOW) {
-      setError('Your transaction may fail')
+      setError(TranslateString(1146, 'Your transaction may fail'))
     } else if (userSlippageTolerance > RISKY_SLIPPAGE_HIGH) {
-      setError('Your transaction may be frontrun')
+      setError(TranslateString(1148, 'Your transaction may be frontrun'))
     }
-  }, [userSlippageTolerance, setError])
+  }, [userSlippageTolerance, setError, TranslateString])
 
   return (
     <StyledSlippageToleranceSettings>
       <Label>
-        <Text style={{ fontWeight: 600 }}>
-          <TranslatedText translationId={88}>Slippage tolerance</TranslatedText>
-        </Text>
-        <QuestionHelper text="Your transaction will revert if the price changes unfavorably by more than this percentage." />
+        <Text style={{ fontWeight: 600 }}>{TranslateString(88, 'Slippage tolerance')}</Text>
+        <QuestionHelper
+          text={TranslateString(
+            186,
+            'Your transaction will revert if the price changes unfavorably by more than this percentage.'
+          )}
+        />
       </Label>
       <Options>
         <Flex mb={['8px', 0]} mr={[0, '8px']}>

src/components/PageHeader/TransactionDeadlineSetting.tsx

@@ -2,8 +2,8 @@ import React, { useEffect, useState } from 'react'
 import styled from 'styled-components'
 import { Input, Text } from '@pancakeswap-libs/uikit'
 import { useUserDeadline } from 'state/user/hooks'
+import useI18n from 'hooks/useI18n'
 import QuestionHelper from '../QuestionHelper'
-import TranslatedText from '../TranslatedText'
 
 const StyledTransactionDeadlineSetting = styled.div`
   margin-bottom: 16px;
@@ -30,6 +30,7 @@ const Field = styled.div`
 `
 
 const TransactionDeadlineSetting = () => {
+  const TranslateString = useI18n()
   const [deadline, setDeadline] = useUserDeadline()
   const [value, setValue] = useState(deadline / 60) // deadline in minutes
   const [error, setError] = useState<string | null>(null)
@@ -47,20 +48,20 @@ const TransactionDeadlineSetting = () => {
         setDeadline(rawValue)
         setError(null)
       } else {
-        setError('Enter a valid deadline')
+        setError(TranslateString(1150, 'Enter a valid deadline'))
       }
     } catch {
-      setError('Enter a valid deadline')
+      setError(TranslateString(1150, 'Enter a valid deadline'))
     }
-  }, [value, setError, setDeadline])
+  }, [value, setError, setDeadline, TranslateString])
 
   return (
     <StyledTransactionDeadlineSetting>
       <Label>
-        <Text style={{ fontWeight: 600 }}>
-          <TranslatedText translationId={90}>Transaction deadline</TranslatedText>
-        </Text>
-        <QuestionHelper text="Your transaction will revert if it is pending for more than this long." />
+        <Text style={{ fontWeight: 600 }}>{TranslateString(90, 'Transaction deadline')}</Text>
+        <QuestionHelper
+          text={TranslateString(188, 'Your transaction will revert if it is pending for more than this long.')}
+        />
       </Label>
       <Field>
         <Input type="number" step="1" min="1" value={value} onChange={handleChange} />

src/components/SearchModal/CurrencySearch.tsx

@@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next'
 import { FixedSizeList } from 'react-window'
 import { ThemeContext } from 'styled-components'
 import AutoSizer from 'react-virtualized-auto-sizer'
+import useI18n from 'hooks/useI18n'
 import { useActiveWeb3React } from '../../hooks'
 import { AppState } from '../../state'
 import { useAllTokens, useToken } from '../../hooks/Tokens'
@@ -23,8 +24,6 @@ import { filterTokens } from './filtering'
 import SortButton from './SortButton'
 import { useTokenComparator } from './sorting'
 import { PaddedColumn, SearchInput, Separator } from './styleds'
-import TranslatedText from '../TranslatedText'
-import { TranslateString } from '../../utils/translateTextHelpers'
 
 interface CurrencySearchProps {
   isOpen: boolean
@@ -137,16 +136,16 @@ export function CurrencySearch({
   )
 
   const selectedListInfo = useSelectedListInfo()
-
+  const TranslateString = useI18n()
   return (
     <Column style={{ width: '100%', flex: '1 1' }}>
       <PaddedColumn gap="14px">
         <RowBetween>
           <Text>
-            <TranslatedText translationId={82}>Select a token</TranslatedText>
+            {TranslateString(82, 'Select a token')}
             <QuestionHelper
               text={TranslateString(
-                130,
+                128,
                 'Find a token by searching for its name or symbol or by pasting its address below.'
               )}
             />
@@ -166,9 +165,7 @@ export function CurrencySearch({
           <CommonBases chainId={chainId} onSelect={handleCurrencySelect} selectedCurrency={selectedCurrency} />
         )}
         <RowBetween>
-          <Text fontSize="14px">
-            <TranslatedText translationId={126}>Token name</TranslatedText>
-          </Text>
+          <Text fontSize="14px">{TranslateString(126, 'Token name')}</Text>
           <SortButton ascending={invertSearchOrder} toggleSortOrder={() => setInvertSearchOrder((iso) => !iso)} />
         </RowBetween>
       </PaddedColumn>
@@ -213,7 +210,7 @@ export function CurrencySearch({
                 onClick={onChangeList}
                 id="currency-search-change-list-button"
               >
-                {selectedListInfo.current ? 'Change' : 'Select a list'}
+                {selectedListInfo.current ? TranslateString(180, 'Change') : TranslateString(1152, 'Select a list')}
               </LinkStyledButton>
             </RowBetween>
           </Card>