From 8127a0e6d2d46dd9ade50d96900015c05c6be6e1 Mon Sep 17 00:00:00 2001 From: memoyil <2213635+memoyil@users.noreply.github.com> Date: Tue, 16 Mar 2021 15:03:41 +0100 Subject: [PATCH 1/9] fix: Fix route, balance, amount, token in swap and minutes in transaction deadline window --- src/components/CurrencyInputPanel/index.tsx | 4 +- .../PageHeader/TransactionDeadlineSetting.tsx | 2 +- src/components/swap/AdvancedSwapDetails.tsx | 2 +- src/hooks/useI18n.ts | 57 +++++++++++++------ src/state/swap/hooks.ts | 7 ++- 5 files changed, 48 insertions(+), 24 deletions(-) diff --git a/src/components/CurrencyInputPanel/index.tsx b/src/components/CurrencyInputPanel/index.tsx index 45e8c1e29..d6f1b6f78 100644 --- a/src/components/CurrencyInputPanel/index.tsx +++ b/src/components/CurrencyInputPanel/index.tsx @@ -117,7 +117,9 @@ export default function CurrencyInputPanel({ {account && ( {!hideBalance && !!currency && selectedCurrencyBalance - ? `Balance: ${selectedCurrencyBalance?.toSignificant(6)}` + ? TranslateString(78, + `Balance ${selectedCurrencyBalance?.toSignificant(6)}`, + { num: selectedCurrencyBalance?.toSignificant(6) }) : ' -'} )} diff --git a/src/components/PageHeader/TransactionDeadlineSetting.tsx b/src/components/PageHeader/TransactionDeadlineSetting.tsx index 6940f2784..5b1e623d3 100644 --- a/src/components/PageHeader/TransactionDeadlineSetting.tsx +++ b/src/components/PageHeader/TransactionDeadlineSetting.tsx @@ -68,7 +68,7 @@ const TransactionDeadlineSetting = ({ translateString }: TransactionDeadlineSett - Minutes + {TranslateString(92, 'minutes')} {error && ( diff --git a/src/components/swap/AdvancedSwapDetails.tsx b/src/components/swap/AdvancedSwapDetails.tsx index c34848093..a052c08ca 100644 --- a/src/components/swap/AdvancedSwapDetails.tsx +++ b/src/components/swap/AdvancedSwapDetails.tsx @@ -94,7 +94,7 @@ export function AdvancedSwapDetails({ trade }: AdvancedSwapDetailsProps) { - Route + {TranslateString(232, 'Route')} { const { translations } = useContext(TranslationsContext) - /** - * As a temporary fix memoize the translation function so it can be used in an effect. - * It appears the TranslationsContext is always empty and is not currently used - * TODO: Figure out if the context is used and if not, remove it. - */ - return useCallback( - (translationId: number, fallback: string) => { - if (translations[0] === 'error') { - return fallback - } - if (translations.length > 0) { - return getTranslation(translations, translationId, fallback) - } + return (translationId: number, fallback: string, data: ContextData = {}) => { + if (translations.length === 0) { return fallback - }, - [translations] - ) + } + + 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 + } } export default useI18n diff --git a/src/state/swap/hooks.ts b/src/state/swap/hooks.ts index 6d34f63cd..84af6aa28 100644 --- a/src/state/swap/hooks.ts +++ b/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((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) From a26bb3e0f5d47f7ba2a8cd88771cc869f748504a Mon Sep 17 00:00:00 2001 From: memoyil <2213635+memoyil@users.noreply.github.com> Date: Tue, 16 Mar 2021 19:13:52 +0100 Subject: [PATCH 2/9] fix: Add liquidity --- src/components/NavigationTabs/index.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/NavigationTabs/index.tsx b/src/components/NavigationTabs/index.tsx index 9c9b790b9..df26ccd9b 100644 --- a/src/components/NavigationTabs/index.tsx +++ b/src/components/NavigationTabs/index.tsx @@ -48,7 +48,9 @@ export function AddRemoveTabs({ adding }: { adding: boolean }) { - {adding ? TranslateString(258, 'Add') : TranslateString(260, 'Remove')} Liquidity + {adding ? TranslateString(168, 'Add Liquidity') : + (`${TranslateString(260, 'Remove')} ${TranslateString(262, 'Liquidity')}`)} + Date: Tue, 16 Mar 2021 19:18:46 +0100 Subject: [PATCH 3/9] fix: Your liquidity --- src/pages/Pool/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Pool/index.tsx b/src/pages/Pool/index.tsx index 76a09da83..c7e29d95b 100644 --- a/src/pages/Pool/index.tsx +++ b/src/pages/Pool/index.tsx @@ -70,7 +70,7 @@ export default function Pool() { - {TranslateString(107, 'Your Liquidity')} + {TranslateString(102, 'Your Liquidity')} Date: Tue, 16 Mar 2021 19:28:53 +0100 Subject: [PATCH 4/9] fix: Per --- src/components/swap/TradePrice.tsx | 6 ++++-- src/pages/AddLiquidity/PoolPriceBar.tsx | 6 ++++-- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/swap/TradePrice.tsx b/src/components/swap/TradePrice.tsx index 35e5781c6..0c5d043f1 100644 --- a/src/components/swap/TradePrice.tsx +++ b/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 ( diff --git a/src/pages/AddLiquidity/PoolPriceBar.tsx b/src/pages/AddLiquidity/PoolPriceBar.tsx index 862802487..e9cf28f15 100644 --- a/src/pages/AddLiquidity/PoolPriceBar.tsx +++ b/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 ( {price?.toSignificant(6) ?? '-'} - {currencies[Field.CURRENCY_B]?.symbol} per {currencies[Field.CURRENCY_A]?.symbol} + {currencies[Field.CURRENCY_B]?.symbol} {TranslateString(242, 'per')} {currencies[Field.CURRENCY_A]?.symbol} {price?.invert()?.toSignificant(6) ?? '-'} - {currencies[Field.CURRENCY_A]?.symbol} per {currencies[Field.CURRENCY_B]?.symbol} + {currencies[Field.CURRENCY_A]?.symbol} {TranslateString(242, 'per')} {currencies[Field.CURRENCY_B]?.symbol} From 15db0fa491d36e61e0c3b011b70de1f585f5dbba Mon Sep 17 00:00:00 2001 From: memoyil <2213635+memoyil@users.noreply.github.com> Date: Fri, 19 Mar 2021 10:11:20 +0100 Subject: [PATCH 5/9] fix: Add callback --- src/hooks/useI18n.ts | 61 ++++++++++++++++++++++++-------------------- 1 file changed, 34 insertions(+), 27 deletions(-) diff --git a/src/hooks/useI18n.ts b/src/hooks/useI18n.ts index 2acbffd9b..81f8d4be4 100644 --- a/src/hooks/useI18n.ts +++ b/src/hooks/useI18n.ts @@ -1,4 +1,4 @@ -import { useContext } from 'react' +import { useCallback, useContext } from 'react' import { TranslationsContext } from 'hooks/TranslationsContext' import { isEmpty } from 'lodash' @@ -9,40 +9,47 @@ interface ContextData { const useI18n = () => { const { translations } = useContext(TranslationsContext) - return (translationId: number, fallback: string, data: ContextData = {}) => { - if (translations.length === 0) { - return fallback - } + /** + * As a temporary fix memoize the translation function so it can be used in an effect. + * It appears the TranslationsContext is always empty and is not currently used + * TODO: Figure out if the context is used and if not, remove it. + */ + return useCallback( + (translationId: number, fallback: string, data: ContextData = {}) => { + if (translations.length === 0) { + return fallback + } - const foundTranslation = translations.find((translation) => { - return translation.data.stringId === translationId - }) + const foundTranslation = translations.find((translation) => { + return translation.data.stringId === translationId + }) - if (foundTranslation) { - const { text } = foundTranslation.data - const includesVariable = text.includes('%') + if (foundTranslation) { + const { text } = foundTranslation.data + const includesVariable = text.includes('%') - if (includesVariable) { - let interpolatedText = text + if (includesVariable) { + let interpolatedText = text - // If dynamic tags are found but no data was passed return the fallback - if (isEmpty(data)) { - return fallback - } + // 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]) - }) + Object.keys(data).forEach((dataKey) => { + const templateKey = new RegExp(`%${dataKey}%`, 'g') + interpolatedText = interpolatedText.replace(templateKey, data[dataKey]) + }) - return interpolatedText - } + return interpolatedText + } - return text - } + return text + } - return fallback - } + return fallback + }, + [translations]) } export default useI18n From 6438b1d09b5163c703529def0f76497eb0f8513c Mon Sep 17 00:00:00 2001 From: memoyil <2213635+memoyil@users.noreply.github.com> Date: Mon, 22 Mar 2021 11:26:20 +0100 Subject: [PATCH 6/9] feat: Add 999 to unknown translation --- src/components/NavigationTabs/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/NavigationTabs/index.tsx b/src/components/NavigationTabs/index.tsx index df26ccd9b..1aa45ad6c 100644 --- a/src/components/NavigationTabs/index.tsx +++ b/src/components/NavigationTabs/index.tsx @@ -48,8 +48,8 @@ export function AddRemoveTabs({ adding }: { adding: boolean }) { - {adding ? TranslateString(168, 'Add Liquidity') : - (`${TranslateString(260, 'Remove')} ${TranslateString(262, 'Liquidity')}`)} + + {adding ? TranslateString(168, 'Add Liquidity') : TranslateString(999, 'Remove Liquidity')} Date: Tue, 6 Apr 2021 17:12:47 +0200 Subject: [PATCH 7/9] fix: Fallback --- src/hooks/useI18n.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/hooks/useI18n.ts b/src/hooks/useI18n.ts index 81f8d4be4..bed6275e9 100644 --- a/src/hooks/useI18n.ts +++ b/src/hooks/useI18n.ts @@ -16,7 +16,7 @@ const useI18n = () => { */ return useCallback( (translationId: number, fallback: string, data: ContextData = {}) => { - if (translations.length === 0) { + if (translations[0] === 'error') { return fallback } From 41273cd25d8ce8176672b2734b8857d13d60933b Mon Sep 17 00:00:00 2001 From: memoyil <2213635+memoyil@users.noreply.github.com> Date: Wed, 7 Apr 2021 11:46:05 +0200 Subject: [PATCH 8/9] fix: Prettier --- src/components/swap/AdvancedSwapDetails.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/swap/AdvancedSwapDetails.tsx b/src/components/swap/AdvancedSwapDetails.tsx index a052c08ca..33436e243 100644 --- a/src/components/swap/AdvancedSwapDetails.tsx +++ b/src/components/swap/AdvancedSwapDetails.tsx @@ -45,7 +45,7 @@ function TradeSummary({ trade, allowedSlippage }: { trade: Trade; allowedSlippag - {TranslateString(226, 'Price Impact')} + {TranslateString(226, 'Price Impact')} - {TranslateString(232, 'Route')} + {TranslateString(232, 'Route')} Date: Wed, 7 Apr 2021 11:50:14 +0200 Subject: [PATCH 9/9] fix: Prettier --- src/components/CurrencyInputPanel/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/CurrencyInputPanel/index.tsx b/src/components/CurrencyInputPanel/index.tsx index 24f998bca..2bff5f213 100644 --- a/src/components/CurrencyInputPanel/index.tsx +++ b/src/components/CurrencyInputPanel/index.tsx @@ -117,9 +117,9 @@ export default function CurrencyInputPanel({ {account && ( {!hideBalance && !!currency && selectedCurrencyBalance - ? TranslateString(78, - `Balance ${selectedCurrencyBalance?.toSignificant(6)}`, - { num: selectedCurrencyBalance?.toSignificant(6) }) + ? TranslateString(78, `Balance ${selectedCurrencyBalance?.toSignificant(6)}`, { + num: selectedCurrencyBalance?.toSignificant(6), + }) : ' -'} )}