locale

packages/react-native/src/evm/i18n/strings.ts

@@ -1,65 +1,27 @@
-export const en = {
-  connect_wallet: {
-    label: "Connect Wallet",
-  },
-  connect_wallet_details: {
-    additional_actions: "Additional Actions",
-    backup_wallet: "Backup Wallet",
-    import_wallet: "Import Wallet",
-    connected_to_smart_wallet: "Connected to a Smart Wallet",
-    current_network: "Current Network",
-    wallet_address: "Wallet Address",
-    backup: "Backup",
-    connect_to_app: "Connect to App",
-    guest: "Guest",
-    connect: "Connect",
-    new_to_wallets: "New to wallets?",
-    get_started: "Get started",
-    connect_a_wallet: "Connect a wallet",
-    continue_as_guest: "Continue as guest",
-    tos_intro: "By connecting, you agree to the",
-    tos: "Terms of Service",
-    privacy_policy: "Privacy Policy",
-    copy_address_or_scan:
-      "Copy the wallet address or scan the QR code to send funds to this wallet.",
-    your_address: "Your address",
-    qr_code: "QR Code",
-    select_token: "Select Token",
-    send_to: "Send to",
-    no_tokens_found: "No Tokens found",
-    confirm_in_wallet: "Confirm in your wallet",
-    select_network: "Select Network",
-    no_supported_chains_detected: "No supported chains detected",
-    recommended: "Recommended",
-  },
-  connecting_wallet: {
-    local_wallet_message:
-      "Creating, encrypting and securing your device wallet.",
-    connecting_your_wallet: "Connecting your wallet",
-  },
-  local_wallet: {
-    create_new_wallet: "Create new wallet",
-    private_key_mnemonic: "Or Private key or Mnemonic",
-  },
-  embedded_wallet: {
-    request_new_code: "Request new code",
-    sign_in: "Sign In",
-  },
-  wallet_connect: {
-    no_results_found: "No results found",
-  },
-  common: {
-    password: "Password",
-    reject: "Reject",
-    approve: "Approve",
-    switch_network: "Switch Network",
-    import: "Import",
-    username: "Username",
-    amount: "Amount",
-    send: "Send",
-    continue: "Continue",
-    error_switching_network: "Error switching network",
-  },
+import { DeepPartial } from "../types/deepPartial";
+import { Locale, LocaleType, _en, _es } from "./types";
+
+export const setLocale = (locale: Locale): LocaleType => {
+  if (typeof locale === "string") {
+    if (locale === "es") {
+      return es();
+    } else if (locale === "en") {
+      return en();
+    }
+  }
+  return locale;
+};
+
+export const en = (locale?: DeepPartial<LocaleType>): LocaleType => {
+  return {
+    ..._en,
+    ...locale,
+  } as LocaleType;
 };
 
-export const fr = {};
+export const es = (locale?: DeepPartial<LocaleType>): LocaleType => {
+  return {
+    ..._es,
+    ...locale,
+  } as LocaleType;
+};

packages/react-native/src/evm/i18n/types.ts

@@ -0,0 +1,131 @@
+export type Locale = LocaleType | "en" | "es";
+
+export type LocaleType = typeof _en;
+
+export const _en = {
+  connect_wallet: {
+    label: "Connect Wallet",
+  },
+  connect_wallet_details: {
+    additional_actions: "Additional Actions",
+    backup_wallet: "Backup Wallet",
+    import_wallet: "Import Wallet",
+    connected_to_smart_wallet: "Connected to a Smart Wallet",
+    current_network: "Current Network",
+    wallet_address: "Wallet Address",
+    backup: "Backup",
+    connect_to_app: "Connect to App",
+    guest: "Guest",
+    connect: "Connect",
+    new_to_wallets: "New to wallets?",
+    get_started: "Get started",
+    connect_a_wallet: "Connect a wallet",
+    continue_as_guest: "Continue as guest",
+    tos_intro: "By connecting, you agree to the",
+    tos: "Terms of Service",
+    privacy_policy: "Privacy Policy",
+    copy_address_or_scan:
+      "Copy the wallet address or scan the QR code to send funds to this wallet.",
+    your_address: "Your address",
+    qr_code: "QR Code",
+    select_token: "Select Token",
+    send_to: "Send to",
+    no_tokens_found: "No Tokens found",
+    confirm_in_wallet: "Confirm in your wallet",
+    select_network: "Select Network",
+    no_supported_chains_detected: "No supported chains detected",
+    recommended: "Recommended",
+  },
+  connecting_wallet: {
+    local_wallet_message:
+      "Creating, encrypting and securing your device wallet.",
+    connecting_your_wallet: "Connecting your wallet",
+  },
+  local_wallet: {
+    create_new_wallet: "Create new wallet",
+    private_key_mnemonic: "Or Private key or Mnemonic",
+  },
+  embedded_wallet: {
+    request_new_code: "Request new code",
+    sign_in: "Sign In",
+  },
+  wallet_connect: {
+    no_results_found: "No results found",
+  },
+  common: {
+    password: "Password",
+    reject: "Reject",
+    approve: "Approve",
+    switch_network: "Switch Network",
+    import: "Import",
+    username: "Username",
+    amount: "Amount",
+    send: "Send",
+    continue: "Continue",
+    error_switching_network: "Error switching network",
+  },
+};
+
+export const _es = {
+  connect_wallet: {
+    label: "Conectar Cartera",
+  },
+  connect_wallet_details: {
+    additional_actions: "Acciones Adicionales",
+    backup_wallet: "Respaldar Cartera",
+    import_wallet: "Importar Cartera",
+    connected_to_smart_wallet: "Conectado a una Cartera Inteligente",
+    current_network: "Red Actual",
+    wallet_address: "Dirección de Cartera",
+    backup: "Respaldo",
+    connect_to_app: "Conectar a la App",
+    guest: "Invitado",
+    connect: "Conectar",
+    new_to_wallets: "¿Nuevo en carteras?",
+    get_started: "Comenzar",
+    connect_a_wallet: "Conectar una cartera",
+    continue_as_guest: "Continuar como invitado",
+    tos_intro: "Al conectar, aceptas los",
+    tos: "Términos de Servicio",
+    privacy_policy: "Política de Privacidad",
+    copy_address_or_scan:
+      "Copia la dirección de la cartera o escanea el código QR para enviar fondos a esta cartera.",
+    your_address: "Tu dirección",
+    qr_code: "Código QR",
+    select_token: "Seleccionar Token",
+    send_to: "Enviar a",
+    no_tokens_found: "No se encontraron tokens",
+    confirm_in_wallet: "Confirma en tu cartera",
+    select_network: "Seleccionar Red",
+    no_supported_chains_detected: "No se detectaron cadenas compatibles",
+    recommended: "Recomendado",
+  },
+  connecting_wallet: {
+    local_wallet_message:
+      "Creando, cifrando y asegurando tu cartera de dispositivo.",
+    connecting_your_wallet: "Conectando tu cartera",
+  },
+  local_wallet: {
+    create_new_wallet: "Crear nueva cartera",
+    private_key_mnemonic: "O Clave Privada o Mnemónico",
+  },
+  embedded_wallet: {
+    request_new_code: "Solicitar nuevo código",
+    sign_in: "Iniciar Sesión",
+  },
+  wallet_connect: {
+    no_results_found: "No se encontraron resultados",
+  },
+  common: {
+    password: "Contraseña",
+    reject: "Rechazar",
+    approve: "Aprobar",
+    switch_network: "Cambiar Red",
+    import: "Importar",
+    username: "Nombre de usuario",
+    amount: "Cantidad",
+    send: "Enviar",
+    continue: "Continuar",
+    error_switching_network: "Error al cambiar de red",
+  },
+};

packages/react-native/src/evm/index.ts

@@ -42,6 +42,8 @@ export { createAsyncLocalStorage } from "../core/AsyncStorage";
 export { createSecureStorage } from "../core/SecureStorage";
 export { ThirdwebStorage } from "../core/storage/storage";
 
+export * from "./i18n/strings";
+
 // ui components
 export * from "./components/base";
 export { ConnectWalletHeader } from "./components/ConnectWalletFlow/ConnectingWallet/ConnectingWalletHeader";

packages/react-native/src/evm/providers/thirdweb-provider.tsx

@@ -17,6 +17,7 @@ import { SafeAreaProvider } from "react-native-safe-area-context";
 import { walletIds } from "@thirdweb-dev/wallets";
 import { ThirdwebStorage } from "../../core/storage/storage";
 import { useColorScheme } from "react-native";
+import type { Locale } from "../i18n/types";
 
 interface ThirdwebProviderProps<TChains extends Chain[]>
   extends Omit<
@@ -29,14 +30,52 @@ interface ThirdwebProviderProps<TChains extends Chain[]>
    *
    * @example
    * ```jsx
-   * import { MetaMaskWallet, CoinbaseWallet } from "@thirdweb-dev/react";
+   * import { MetaMaskWallet, CoinbaseWallet } from "@thirdweb-dev/react-native";
    *
    * <ThirdwebProvider
    *  supportedWallets={[MetaMaskWallet, CoinbaseWallet]}
    * />
    * ```
    */
   supportedWallets?: WalletConfig<any>[];
+
+  /**
+   * Locale that the app will be displayed in
+   * @defaultValue en()
+   *
+   * @example
+   * ```jsx
+   * import { en } from "@thirdweb-dev/react-native";
+   *
+   * <ThirdwebProvider
+   *  locale={en()}
+   * />
+   * ```
+   *
+   * * ```jsx
+   * import { en } from "@thirdweb-dev/react-native";
+   *
+   * <ThirdwebProvider
+   *  locale={'en'}
+   * />
+   * ```
+   *
+   * Note that you can override the locales by passing in a custom locale object of type `Locale`
+   * ```jsx
+   * import { en } from "@thirdweb-dev/react-native";
+   *
+   * const customLocale = {
+   *  ...en(),
+   * "connect_wallet": "Connect Wallet"
+   * }
+   *
+   * <ThirdwebProvider
+   * locale={customLocale}
+   * />
+   * ```
+   *
+   */
+  locale: Locale;
 }
 
 /**
@@ -69,6 +108,7 @@ export const ThirdwebProvider = <
   storageInterface,
   clientId,
   sdkOptions,
+  locale = "en",
   ...restProps
 }: PropsWithChildren<ThirdwebProviderProps<TChains>>) => {
   const colorScheme = useColorScheme();
@@ -114,7 +154,7 @@ export const ThirdwebProvider = <
       <ThemeProvider
         theme={theme ? theme : colorScheme === "dark" ? "dark" : "light"}
       >
-        <UIContextProvider>
+        <UIContextProvider locale={locale}>
           {hasMagicConfig ? (
             <SafeAreaProvider>
               <DappContextProvider>

packages/react-native/src/evm/providers/ui-context-provider.tsx

@@ -5,12 +5,15 @@ import { Theme, _darkTheme, _lightTheme } from "../styles/theme";
 import { useAppTheme } from "../styles/hooks";
 import { useTheme } from "@shopify/restyle";
 import { PropsWithChildren } from "react";
+import { Locale } from "../i18n/types";
+import { setLocale } from "../i18n/strings";
 
 type UIContextType = {
   modalState: ModalState;
   setModalState: (modalState: ModalState) => void;
   theme: ThemeProviderProps["theme"];
   setTheme: (theme: ThemeProviderProps["theme"]) => void;
+  locale: Locale;
 };
 
 const UIContext = createContext<UIContextType>({
@@ -24,9 +27,12 @@ const UIContext = createContext<UIContextType>({
   setModalState: () => undefined,
   theme: "light",
   setTheme: () => undefined,
+  locale: "en",
 });
 
-export const UIContextProvider = (props: PropsWithChildren) => {
+export const UIContextProvider = (
+  props: { locale: Locale } & PropsWithChildren,
+) => {
   const [modalState, setModalState] = useState<ModalState>({
     view: "Closed",
     data: {},
@@ -41,7 +47,15 @@ export const UIContextProvider = (props: PropsWithChildren) => {
     useState<ThemeProviderProps["theme"]>(providerTheme);
 
   return (
-    <UIContext.Provider value={{ modalState, setModalState, theme, setTheme }}>
+    <UIContext.Provider
+      value={{
+        modalState,
+        setModalState,
+        theme,
+        setTheme,
+        locale: props.locale,
+      }}
+    >
       {props.children}
     </UIContext.Provider>
   );
@@ -63,6 +77,12 @@ export const useModalState = (): {
   };
 };
 
+export const useLocale = () => {
+  const context = useContext(UIContext);
+
+  return setLocale(context.locale);
+};
+
 const getThemeObj = (theme?: ThemeProviderProps["theme"]) => {
   if (theme === "dark" || !theme) {
     return _darkTheme;

packages/react/typedoc/.nojekyll

@@ -0,0 +1 @@
+TypeDoc added this file to prevent GitHub Pages from using Jekyll. You can turn off this behavior by setting the `githubPages` option to false.