Add i18n to swaps amount view

MetaMask · Nov 16, 2020 · 637452f · 637452f
1 parent 6dfd9a4
commit 637452f
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 12 deletions.
diff --git a/app/components/UI/Swaps/components/TokenSelectButton.js b/app/components/UI/Swaps/components/TokenSelectButton.js
@@ -28,14 +28,14 @@ const styles = StyleSheet.create({
 	}
 });
 
-function TokenSelectButton({ icon, symbol, onPress, disabled }) {
+function TokenSelectButton({ icon, symbol, onPress, disabled, label }) {
 	return (
 		<TouchableOpacity onPress={onPress} disabled={disabled}>
 			<View style={styles.container}>
 				<View style={styles.icon}>
 					<TokenIcon icon={icon} symbol={symbol} />
 				</View>
-				<Text primary>{symbol || 'Select a token'}</Text>
+				<Text primary>{symbol || label}</Text>
 				<Icon name="caret-down" size={18} style={styles.caretDown} />
 			</View>
 		</TouchableOpacity>
@@ -45,6 +45,7 @@ function TokenSelectButton({ icon, symbol, onPress, disabled }) {
 TokenSelectButton.propTypes = {
 	icon: PropTypes.string,
 	symbol: PropTypes.string,
+	label: PropTypes.string,
 	onPress: PropTypes.func,
 	disabled: PropTypes.bool
 };

diff --git a/app/components/UI/Swaps/components/TokenSelectModal.js b/app/components/UI/Swaps/components/TokenSelectModal.js
@@ -10,6 +10,7 @@ import { connect } from 'react-redux';
 
 import Device from '../../../../util/Device';
 import { balanceToFiat, hexToBN, renderFromTokenMinimalUnit, renderFromWei, weiToFiat } from '../../../../util/number';
+import { strings } from '../../../../../locales/i18n';
 import { colors, fontStyles } from '../../../../styles/common';
 
 import Text from '../../../Base/Text';
@@ -141,7 +142,7 @@ function TokenSelectModal({
 	const renderEmptyList = useMemo(
 		() => (
 			<View style={styles.emptyList}>
-				<Text>No tokens match &ldquo;{searchString}&rdquo;</Text>
+				<Text>{strings('swaps.no_tokens_result', { searchString })}</Text>
 			</View>
 		),
 		[searchString]
@@ -169,7 +170,7 @@ function TokenSelectModal({
 					<TextInput
 						ref={searchInput}
 						style={styles.input}
-						placeholder="Search for a token…"
+						placeholder={strings('swaps.search_token')}
 						placeholderTextColor={colors.grey500}
 						value={searchString}
 						onChangeText={setSearchString}

diff --git a/app/components/UI/Swaps/index.js b/app/components/UI/Swaps/index.js
@@ -11,6 +11,7 @@ import handleInput from '../../Base/Keypad/rules/native';
 import useModalHandler from '../../Base/hooks/useModalHandler';
 import Device from '../../../util/Device';
 import { renderFromTokenMinimalUnit, renderFromWei } from '../../../util/number';
+import { strings } from '../../../../locales/i18n';
 import { colors, fontStyles } from '../../../styles/common';
 
 import { getSwapsAmountNavbar } from '../Navbar';
@@ -133,6 +134,7 @@ function SwapsAmountView({ tokens, accounts, selectedAddress, balances }) {
 				setInitialLoadingTokens(() => false);
 			}
 		})();
+		// TODO(wachunei) include tokens in deps once controller is updated with cache timestamp
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
@@ -203,6 +205,7 @@ function SwapsAmountView({ tokens, accounts, selectedAddress, balances }) {
 						<ActivityIndicator size="small" />
 					) : (
 						<TokenSelectButton
+							label={strings('swaps.select_a_token')}
 							onPress={toggleSourceModal}
 							icon={sourceToken?.iconUrl}
 							symbol={sourceToken?.symbol}
@@ -212,7 +215,7 @@ function SwapsAmountView({ tokens, accounts, selectedAddress, balances }) {
 					<TokenSelectModal
 						isVisible={isSourceModalVisible}
 						dismiss={toggleSourceModal}
-						title="Convert from"
+						title={strings('swaps.convert_from')}
 						tokens={tokens}
 						onItemPress={handleSourceTokenPress}
 						exclude={[destinationToken?.symbol]}
@@ -225,28 +228,32 @@ function SwapsAmountView({ tokens, accounts, selectedAddress, balances }) {
 					{sourceToken && (hasInvalidDecimals || !hasEnoughBalance) ? (
 						<Text style={styles.amountInvalid}>
 							{!hasEnoughBalance
-								? `Not enough ${sourceToken.symbol} to complete this swap`
-								: `${sourceToken.symbol} allows up to ${sourceToken.decimals} decimals`}
+								? strings('swaps.not_enough', { symbol: sourceToken.symbol })
+								: strings('swaps.allows_up_to_decimals', {
+										symbol: sourceToken.symbol,
+										decimals: sourceToken.decimals
+										// eslint-disable-next-line no-mixed-spaces-and-tabs
+								  })}
 						</Text>
 					) : (
 						<Text>
 							{sourceToken && balance !== null
-								? `${balance} ${sourceToken.symbol} available to swap`
+								? strings('swaps.available_to_swap', { asset: `${balance} ${sourceToken.symbol}` })
 								: ''}
 						</Text>
 					)}
 				</View>
 				<View style={styles.horizontalRuleContainer}>
 					<View style={styles.horizontalRule} />
 					<IonicIcon style={styles.arrowDown} name="md-arrow-down" />
-
 					<View style={styles.horizontalRule} />
 				</View>
 				<View style={styles.tokenButtonContainer}>
 					{isInitialLoadingTokens ? (
 						<ActivityIndicator size="small" />
 					) : (
 						<TokenSelectButton
+							label={strings('swaps.select_a_token')}
 							onPress={toggleDestinationModal}
 							icon={destinationToken?.iconUrl}
 							symbol={destinationToken?.symbol}
@@ -255,7 +262,7 @@ function SwapsAmountView({ tokens, accounts, selectedAddress, balances }) {
 					<TokenSelectModal
 						isVisible={isDestinationModalVisible}
 						dismiss={toggleDestinationModal}
-						title="Convert to"
+						title={strings('swaps.convert_to')}
 						tokens={tokens}
 						onItemPress={handleDestinationTokenPress}
 						exclude={[sourceToken?.symbol]}
@@ -289,7 +296,7 @@ function SwapsAmountView({ tokens, accounts, selectedAddress, balances }) {
 					<View style={styles.column}>
 						<TouchableOpacity disabled>
 							<Text bold style={styles.disabledSlippage}>
-								Max slippage 1%
+								{strings('swaps.max_slippage', { slippage: '1%' })}
 							</Text>
 						</TouchableOpacity>
 					</View>
@@ -306,7 +313,7 @@ function SwapsAmountView({ tokens, accounts, selectedAddress, balances }) {
 									amountBigNumber.eq(0)
 								}
 							>
-								Get quotes
+								{strings('swaps.get_quotes')}
 							</StyledButton>
 						</View>
 					</View>

diff --git a/locales/en.json b/locales/en.json
@@ -1372,6 +1372,18 @@
 		"amount": "Amount",
 		"total_amount": "Total amount"
 	},
+	"swaps": {
+		"convert_from": "Convert from",
+		"convert_to": "Convert to",
+		"select_a_token": "Select a token",
+		"search_token": "Search for a token",
+		"no_tokens_result": "No tokens match “{{searchString}}”",
+		"available_to_swap": "{{asset}} available to swap",
+		"not_enough": "Not enough {{symbol}} to complete this swap",
+		"max_slippage": "Max slippage {{slippage}}",
+		"allows_up_to_decimals": "{{symbol}} allows up to {{decimals}} decimals",
+		"get_quotes": "Get quotes"
+	},
 	"protect_wallet_modal": {
 		"title": "Protect your wallet",
 		"top_button": "Protect wallet",

diff --git a/locales/es.json b/locales/es.json
@@ -1246,6 +1246,18 @@
 		"amount": "Cantidad",
 		"total_amount": "Cantidad total"
 	},
+	"swaps": {
+		"convert_from": "Convertir desde",
+		"convert_to": "Convertir a",
+		"select_a_token": "Selecciona un token",
+		"search_token": "Buscar un token",
+		"no_tokens_result": "No se encontraron tokens para “{{searchString}}”",
+		"available_to_swap": "{{asset}} disponible para convertir",
+		"not_enough": "Insuficiente {{symbol}} para esta conversión",
+		"max_slippage": "Deslizamiento máx. {{slippage}}",
+		"allows_up_to_decimals": "{{symbol}} soporta hasta {{decimals}} decimales",
+		"get_quotes": "Cotizar"
+	},
 	"protect_wallet_modal": {
 		"title": "Protege tu billetera",
 		"top_button": "Proteger billetera",