Merge pull request #1616 from Web3Auth/feat/use-i18-instance

added i18n instance
Web3Auth · Oct 9, 2023 · 5d10860 · 5d10860
2 parents c123f2f + e822b23
commit 5d10860
Show file tree

Hide file tree

Showing 12 changed files with 26 additions and 13 deletions.
diff --git a/packages/ui/src/components/AdapterLoader.tsx b/packages/ui/src/components/AdapterLoader.tsx
@@ -3,6 +3,7 @@ import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 
 import { DEFAULT_LOGO_DARK, DEFAULT_LOGO_LIGHT, MODAL_STATUS, ModalStatusType } from "../interfaces";
+import i18n from "../localeImport";
 import Icon from "./Icon";
 import Image from "./Image";
 
@@ -21,7 +22,7 @@ export default function DetailedLoader(props: DetailedLoaderProps) {
   const { adapter, appLogo, message, modalStatus, adapterName, onClose } = props;
   const web3authIcon = <Image imageId="web3auth" />;
   const providerIcon = <Image imageId={`login-${adapter}`} />;
-  const [t] = useTranslation();
+  const [t] = useTranslation(undefined, { i18n });
   const isDefaultLogo = [DEFAULT_LOGO_DARK, DEFAULT_LOGO_LIGHT].includes(appLogo);
 
   useEffect(() => {

diff --git a/packages/ui/src/components/AddNetwork.tsx b/packages/ui/src/components/AddNetwork.tsx
@@ -2,6 +2,7 @@ import { CustomChainConfig } from "@web3auth/base";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
+import i18n from "../localeImport";
 import { getNetworkIconId } from "../utils";
 import Image from "./Image";
 
@@ -17,7 +18,7 @@ function AddNetwork(props: AddNetworkProps) {
   const [showModal, setShowModal] = useState(true);
   const [networkIconId, setNetworkIconId] = useState("network-default");
 
-  const [t] = useTranslation();
+  const [t] = useTranslation(undefined, { i18n });
 
   useEffect(() => {
     getNetworkIconId(chainConfig.ticker)

diff --git a/packages/ui/src/components/ExternalWallets.tsx b/packages/ui/src/components/ExternalWallets.tsx
@@ -4,6 +4,7 @@ import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import { MODAL_STATUS, ModalStatusType, WALLET_CONNECT_LOGO } from "../interfaces";
+import i18n from "../localeImport";
 import Icon from "./Icon";
 import Image from "./Image";
 import Loader from "./Loader";
@@ -102,7 +103,7 @@ export default function ExternalWallet(props: ExternalWalletsProps) {
     return { platform: browser.getPlatformType() as platform, os: browser.getOSName() as os };
   }, []);
 
-  const [t] = useTranslation();
+  const [t] = useTranslation(undefined, { i18n });
 
   useEffect(() => {
     log.debug("loaded external wallets", config, walletConnectUri, deviceType);

diff --git a/packages/ui/src/components/Footer.tsx b/packages/ui/src/components/Footer.tsx
@@ -1,8 +1,10 @@
 import { memo } from "react";
 import { useTranslation } from "react-i18next";
 
+import i18n from "../localeImport";
+
 function Footer() {
-  const [t] = useTranslation();
+  const [t] = useTranslation(undefined, { i18n });
 
   return (
     <div className="w3a-modal__footer">

diff --git a/packages/ui/src/components/Header.tsx b/packages/ui/src/components/Header.tsx
@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next";
 
 import { ThemedContext } from "../context/ThemeContext";
 import { DEFAULT_LOGO_DARK, DEFAULT_LOGO_LIGHT } from "../interfaces";
+import i18n from "../localeImport";
 import Icon from "./Icon";
 
 interface HeaderProps {
@@ -15,7 +16,7 @@ function Header(props: HeaderProps) {
   const { isDark } = useContext(ThemedContext);
   const { onClose, appLogo, appName } = props;
 
-  const [t] = useTranslation();
+  const [t] = useTranslation(undefined, { i18n });
 
   const headerLogo = [DEFAULT_LOGO_DARK, DEFAULT_LOGO_LIGHT].includes(appLogo) ? "" : appLogo;
 

diff --git a/packages/ui/src/components/Loader.tsx b/packages/ui/src/components/Loader.tsx
@@ -3,6 +3,7 @@ import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 
 import { MODAL_STATUS, ModalStatusType } from "../interfaces";
+import i18n from "../localeImport";
 import Icon from "./Icon";
 import Image from "./Image";
 
@@ -19,7 +20,7 @@ const closeIcon = <Icon iconName="close" />;
 export default function Loader(props: LoaderProps) {
   const { message, modalStatus, label, onClose, canEmit = true } = props;
   const web3authIcon = <Image imageId="web3auth" />;
-  const [t] = useTranslation();
+  const [t] = useTranslation(undefined, { i18n });
 
   useEffect(() => {
     log.debug("loader re-rendering");

diff --git a/packages/ui/src/components/Modal.tsx b/packages/ui/src/components/Modal.tsx
@@ -8,6 +8,7 @@ import { useTranslation } from "react-i18next";
 
 import { ThemedContext } from "../context/ThemeContext";
 import { ExternalWalletEventType, MODAL_STATUS, ModalState, SocialLoginEventType } from "../interfaces";
+import i18n from "../localeImport";
 import AdapterLoader from "./AdapterLoader";
 import ExternalWallets from "./ExternalWallets";
 import Footer from "./Footer";
@@ -55,7 +56,7 @@ export default function Modal(props: ModalProps) {
     wcAdapters: [],
   });
   const { isDark } = useContext(ThemedContext);
-  const [t] = useTranslation();
+  const [t] = useTranslation(undefined, { i18n });
 
   const { stateListener, appLogo, appName, handleSocialLoginClick, handleExternalWalletClick, handleShowExternalWallets, closeModal } = props;
 

diff --git a/packages/ui/src/components/SocialLoginPasswordless.tsx b/packages/ui/src/components/SocialLoginPasswordless.tsx
@@ -3,6 +3,7 @@ import { ChangeEvent, FormEvent, useContext, useEffect, useMemo, useState } from
 import { useTranslation } from "react-i18next";
 
 import { ThemedContext } from "../context/ThemeContext";
+import i18n from "../localeImport";
 import { getUserCountry, validatePhoneNumber } from "../utils";
 import Icon from "./Icon";
 
@@ -21,7 +22,7 @@ export default function SocialLoginPasswordless(props: SocialLoginPasswordlessPr
   const [countryCode, setCountryCode] = useState<string>("");
   const [isValidInput, setIsValidInput] = useState<boolean | null>(null);
 
-  const [t] = useTranslation();
+  const [t] = useTranslation(undefined, { i18n });
 
   const handleFormSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();

diff --git a/packages/ui/src/components/SocialLogins.tsx b/packages/ui/src/components/SocialLogins.tsx
@@ -6,6 +6,7 @@ import { useTranslation } from "react-i18next";
 import { capitalizeFirstLetter } from "../config";
 import { ThemedContext } from "../context/ThemeContext";
 import { SocialLoginsConfig } from "../interfaces";
+import i18n from "../localeImport";
 import Image from "./Image";
 
 // const hasLightIcons = ["apple", "github"];
@@ -29,7 +30,7 @@ export default function SocialLogins(props: SocialLoginProps) {
   } = props;
   const { isDark } = useContext(ThemedContext);
 
-  const [t] = useTranslation();
+  const [t] = useTranslation(undefined, { i18n });
 
   // Too small a function to use `useCallback`
   const expandClickHandler = () => {

diff --git a/packages/ui/src/components/SwitchNetwork.tsx b/packages/ui/src/components/SwitchNetwork.tsx
@@ -2,6 +2,7 @@ import { CustomChainConfig } from "@web3auth/base";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
+import i18n from "../localeImport";
 import { getNetworkIconId } from "../utils";
 import Image from "./Image";
 
@@ -20,7 +21,7 @@ function SwitchNetwork(props: SwitchNetworkProps) {
   const [fromNetworkIconId, setFromNetworkIconId] = useState("network-default");
   const [toNetworkIconId, setToNetworkIconId] = useState("network-default");
 
-  const [t] = useTranslation();
+  const [t] = useTranslation(undefined, { i18n });
 
   useEffect(() => {
     getNetworkIconId(currentChainConfig.ticker)

diff --git a/packages/ui/src/components/WalletConnect.tsx b/packages/ui/src/components/WalletConnect.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next";
 import { QRCode } from "react-qrcode-logo";
 
 import { WALLET_CONNECT_LOGO } from "../interfaces";
+import i18n from "../localeImport";
 
 interface WalletConnectProps {
   walletConnectUri: string;
@@ -12,7 +13,7 @@ interface WalletConnectProps {
 function WalletConnect(props: WalletConnectProps) {
   const { walletConnectUri } = props;
 
-  const [t] = useTranslation();
+  const [t] = useTranslation(undefined, { i18n });
 
   // TODO: show only wcAdapters of current chain
   return (

diff --git a/packages/ui/src/localeImport.ts b/packages/ui/src/localeImport.ts
@@ -3,7 +3,8 @@ import { initReactI18next } from "react-i18next";
 
 import { en } from "./i18n";
 
-i18n.use(initReactI18next).init({
+const i18nInstance = i18n.createInstance();
+i18nInstance.use(initReactI18next).init({
   resources: {
     en: { translation: en },
   },
@@ -16,4 +17,4 @@ i18n.use(initReactI18next).init({
   },
 });
 
-export default i18n;
+export default i18nInstance;