[RN]i18n Extract more strings

thirdweb-dev · iketw · Oct 31, 2023 · Oct 17, 2023 · Oct 18, 2023 · Oct 18, 2023
commit 2d2c46f7ac649652148f22d9561452d9f1a73a57
diff --git a/packages/react-native/src/evm/components/ConnectWalletDetails/ExportLocalWalletModal.tsx b/packages/react-native/src/evm/components/ConnectWalletDetails/ExportLocalWalletModal.tsx
@@ -153,7 +153,7 @@ export const ExportLocalWalletModal = ({
         >
           <ModalHeaderTextClose
             onClose={onCloseInternal}
-            headerText="Backup your Wallet"
+            headerText={l.local_wallet.backup_your_wallet}
           />
           <Text variant="subHeader" mt="md" textAlign="left">
             {l.local_wallet.this_will_download_json}

diff --git a/packages/react-native/src/evm/components/ConnectWalletFlow/LocalWalletFlow.tsx b/packages/react-native/src/evm/components/ConnectWalletFlow/LocalWalletFlow.tsx
@@ -60,7 +60,7 @@ export function LocalWalletFlow({
     <>
       <ConnectWalletHeader
         onBackPress={goBack}
-        headerText="Guest Wallet"
+        headerText={l.local_wallet.guest_wallet}
         alignHeader="flex-start"
         subHeaderText={""}
         onClose={connected}

diff --git a/packages/react-native/src/evm/components/ReceiveButton.tsx b/packages/react-native/src/evm/components/ReceiveButton.tsx
@@ -17,6 +17,7 @@ import QRCode from "react-native-qrcode-svg";
 import { useGlobalTheme, useLocale } from "../providers/ui-context-provider";
 
 export const ReceiveButton = () => {
+  const l = useLocale();
   const theme = useGlobalTheme();
   const [isModalVisible, setIsModalVisible] = useState(false);
 
@@ -33,7 +34,7 @@ export const ReceiveButton = () => {
       <IconTextButton
         flex={1}
         ml="xs"
-        text="Receive"
+        text={l.common.receive}
         justifyContent="center"
         icon={
           <DownloadIcon

diff --git a/packages/react-native/src/evm/components/SendFunds/SelectTokenButton.tsx b/packages/react-native/src/evm/components/SendFunds/SelectTokenButton.tsx
@@ -2,11 +2,13 @@ import { useBalance, useChain } from "@thirdweb-dev/react-core";
 import { TokenInfo } from "./defaultTokens";
 import { BaseButton, Box, ChainIcon, ImageSvgUri, Text } from "../base";
 import LoadingTextAnimation from "../base/LoadingTextAnimation";
+import { useLocale } from "../../providers/ui-context-provider";
 
 export function SelectTokenButton(props: {
   token?: TokenInfo;
   onPress: () => void;
 }) {
+  const l = useLocale();
   const balanceQuery = useBalance(props.token?.address);
   const chain = useChain();
   const tokenName = props.token?.name || balanceQuery.data?.name;
@@ -27,7 +29,7 @@ export function SelectTokenButton(props: {
         <Text variant="bodyLarge">{tokenName}</Text>
         {!balanceQuery.data ? (
           <LoadingTextAnimation
-            text="Fetching..."
+            text={l.common.fetching}
             textVariant={"bodySmallSecondary"}
           />
         ) : (

diff --git a/packages/react-native/src/evm/components/SendFunds/SendButton.tsx b/packages/react-native/src/evm/components/SendFunds/SendButton.tsx
@@ -36,6 +36,7 @@ export const SendButton = ({
 }: {
   supportedTokens: SupportedTokens;
 }) => {
+  const l = useLocale();
   const theme = useGlobalTheme();
   const [isModalVisible, setIsModalVisible] = useState(false);
 
@@ -51,7 +52,7 @@ export const SendButton = ({
     <>
       <IconTextButton
         flex={1}
-        text="Send"
+        text={l.common.send}
         justifyContent="center"
         icon={
           <SendIcon height={16} width={16} color={theme.colors.textPrimary} />
@@ -220,7 +221,10 @@ const SendFundsForm = ({
       borderRadius="md"
       p="lg"
     >
-      <ModalHeaderTextClose onClose={onCloseInternal} headerText="Send Funds" />
+      <ModalHeaderTextClose
+        onClose={onCloseInternal}
+        headerText={l.connect_wallet_details.send_funds}
+      />
       <Text mt="lg" variant="bodySmallSecondary">
         {l.connect_wallet_details.select_token}
       </Text>
@@ -252,7 +256,7 @@ const SendFundsForm = ({
             <Text variant="bodySmall">{tokenName}</Text>
             {!balanceQuery.data ? (
               <LoadingTextAnimation
-                text="Fetching..."
+                text={l.common.fetching}
                 textVariant={"bodySmallSecondary"}
               />
             ) : (

diff --git a/packages/react-native/src/evm/components/SendFunds/TokenSelector.tsx b/packages/react-native/src/evm/components/SendFunds/TokenSelector.tsx
@@ -147,7 +147,7 @@ export function TokenSelector(props: {
               height: 40,
               paddingHorizontal: 16,
             }}
-            placeholder="Search or paste token address"
+            placeholder={l.connect_wallet_details.search_or_paste_token}
             placeholderTextColor={theme.colors.textSecondary}
             autoCapitalize="none"
             autoCorrect={false}

diff --git a/packages/react-native/src/evm/components/base/NetworkButton.tsx b/packages/react-native/src/evm/components/base/NetworkButton.tsx
@@ -86,7 +86,9 @@ export const NetworkButton = ({
         <Box flexDirection="row" alignItems="center">
           <ChainIcon chainIconUrl={chain?.icon?.url} size={28} />
           <Box ml="md" alignItems="flex-start" justifyContent="center">
-            <Text variant="bodyLarge">{chain?.name || "Unknown Network"}</Text>
+            <Text variant="bodyLarge">
+              {chain?.name || l.common.unknown_network}
+            </Text>
             {isSwitching ? (
               <Box flexDirection="row" alignItems="center">
                 <Text

diff --git a/packages/react-native/src/evm/components/base/TextBalance.tsx b/packages/react-native/src/evm/components/base/TextBalance.tsx
@@ -2,6 +2,7 @@ import { useBalance } from "@thirdweb-dev/react-core";
 import Text from "./Text";
 import LoadingTextAnimation from "./LoadingTextAnimation";
 import { baseTheme } from "../../styles/theme";
+import { useLocale } from "../../providers/ui-context-provider";
 
 type TextBalance = {
   textVariant: keyof Omit<typeof baseTheme.textVariants, "defaults">;
@@ -10,9 +11,10 @@ type TextBalance = {
 
 export const TextBalance = ({ textVariant, tokenAddress }: TextBalance) => {
   const balanceQuery = useBalance(tokenAddress);
+  const l = useLocale();
 
   return !balanceQuery.data ? (
-    <LoadingTextAnimation text="Fetching..." textVariant={textVariant} />
+    <LoadingTextAnimation text={l.common.fetching} textVariant={textVariant} />
   ) : (
     <Text variant={textVariant}>
       {Number(balanceQuery.data?.displayValue).toFixed(3)}{" "}

diff --git a/packages/react-native/src/evm/i18n/types.ts b/packages/react-native/src/evm/i18n/types.ts
@@ -22,6 +22,7 @@ export const _en = {
     view_transaction_history: "View Transaction History",
     get_started: "Get started",
     receive_funds: "Receive Funds",
+    search_or_paste_token: "Search or paste token address",
     connect_a_wallet: "Connect a wallet",
     continue_as_guest: "Continue as guest",
     tos: "Terms of Service",
@@ -35,6 +36,7 @@ export const _en = {
     qr_code: "QR Code",
     select_token: "Select Token",
     send_to: "Send to",
+    send_funds: "Send Funds",
     no_tokens_found: "No Tokens found",
     confirm_in_wallet: "Confirm in your wallet",
     select_network: "Select Network",
@@ -52,6 +54,8 @@ export const _en = {
       "Login and connect your app through the wallet pop-up",
   },
   local_wallet: {
+    guest_wallet: "Guest Wallet",
+    backup_your_wallet: "Backup your wallet",
     create_new_wallet: "Create new wallet",
     private_key_mnemonic: "Or Private key or Mnemonic",
     private_key_mnemonic_placeholder: "Private key / Mnemonic",
@@ -72,11 +76,15 @@ export const _en = {
   embedded_wallet: {
     request_new_code: "Request new code",
     sign_in: "Sign In",
+    sign_in_google: "Sign in with Google",
   },
   wallet_connect: {
     no_results_found: "No results found",
+    search_wallets: "Search Wallets",
   },
   common: {
+    unknown_network: "Unknown Network",
+    fetching: "Fetching...",
     password: "Password",
     reject: "Reject",
     approve: "Approve",
@@ -85,6 +93,7 @@ export const _en = {
     username: "Username",
     amount: "Amount",
     send: "Send",
+    receive: "Receive",
     continue: "Continue",
     error_switching_network: "Error switching network",
     or: "OR",

diff --git a/packages/react-native/src/evm/wallets/wallets/embedded/EmbeddedSelectionUI.tsx b/packages/react-native/src/evm/wallets/wallets/embedded/EmbeddedSelectionUI.tsx
@@ -102,7 +102,7 @@ export const EmailSelectionUI: React.FC<
             backgroundColor="buttonBackgroundColor"
             nameColor="buttonTextColor"
             justifyContent="center"
-            name="Sign in with Google"
+            name={l.embedded_wallet.sign_in_google}
             walletIconUrl={GOOGLE_ICON}
             onPress={onGoogleSignInPress}
           />

diff --git a/packages/react-native/src/evm/wallets/wallets/wallet-connect/WalletConnectUI.tsx b/packages/react-native/src/evm/wallets/wallets/wallet-connect/WalletConnectUI.tsx
@@ -193,7 +193,7 @@ export function WalletConnectUI({
                   >
                     <TextInput
                       onChangeText={onChangeText}
-                      placeholder="Search Wallets"
+                      placeholder={l.wallet_connect.search_wallets}
                       placeholderTextColor={theme.colors.textSecondary}
                       style={{
                         ...styles.textInput,