i18n implemented

Web3Auth · Dec 17, 2024 · 47a3c5f · 47a3c5f
1 parent 0b7713b
commit 47a3c5f
Show file tree

Hide file tree

Showing 10 changed files with 117 additions and 187 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -13,5 +13,5 @@
       "changeProcessCWD": true
     }
   ],
-  "cSpell.words": ["bowser", "clsx", "JRPC", "PASSWORDLESS", "Ronin", "Solana", "SQAURE", "WEBAUTHN"]
+  "cSpell.words": ["bowser", "clsx", "dont", "JRPC", "PASSWORDLESS", "Ronin", "Solana", "SQAURE", "WEBAUTHN"]
 }
diff --git a/packages/modal-ui/src/components/Body/Body.tsx b/packages/modal-ui/src/components/Body/Body.tsx
@@ -1,7 +1,7 @@
 import { type SafeEventEmitter } from "@web3auth/auth";
 import { ChainNamespaceType, WalletRegistry } from "@web3auth/base/src";
 import Bowser from "bowser";
-import { createContext, createEffect, createMemo, Show } from "solid-js";
+import { createContext, createMemo, Show } from "solid-js";
 import { createStore } from "solid-js/store";
 
 import { PAGES } from "../../constants";
@@ -17,6 +17,7 @@ import {
   SocialLoginsConfig,
   StateEmitterEvents,
 } from "../../interfaces";
+import { t } from "../../localeImport";
 import { getBrowserExtensionUrl, getBrowserName, getMobileInstallLink, getOsName } from "../../utils/common";
 import Footer from "../Footer/Footer";
 import { Image } from "../Image";
@@ -68,10 +69,10 @@ const Body = (props: BodyProps) => {
     walletDetails: null,
   });
 
-  createEffect(() => {
-    // eslint-disable-next-line no-console
-    console.log(props.socialLoginsConfig, "socialLoginsConfig", props.modalState, "modalState");
-  });
+  // createEffect(() => {
+  //   // eslint-disable-next-line no-console
+  //   console.log(props.socialLoginsConfig, "socialLoginsConfig", props.modalState, "modalState");
+  // });
 
   const handleExternalWalletBtnClick = (flag: boolean) => {
     props.setModalState({
@@ -122,7 +123,7 @@ const Body = (props: BodyProps) => {
                 width="28"
                 isButton
               />
-              <span class="w3a--text-sm w3a--font-medium">{`modal.external.install-mobile-app, ${getOsName(os as mobileOs)}`}</span>
+              <span class="w3a--text-sm w3a--font-medium">{t("modal.external.install-mobile-app", { os: getOsName(os as mobileOs) })}</span>
             </button>
           </a>
         </li>
@@ -155,7 +156,7 @@ const Body = (props: BodyProps) => {
               isButton
             />
             <span class="w3a--text-sm w3a--font-medium w3a--text-app-gray-900 dark:w3a--text-app-white">
-              {`modal.external.install-browser-extension, ${getBrowserName(deviceDetails().browser)}`}
+              {t("modal.external.install-browser-extension", { browser: getBrowserName(deviceDetails().browser) })}
             </span>
           </button>
         </a>

diff --git a/packages/modal-ui/src/components/Body/ConnectWallet.tsx b/packages/modal-ui/src/components/Body/ConnectWallet.tsx
@@ -5,6 +5,7 @@ import { MaskType, QRCodeCanvas } from "solid-qr-code";
 
 import { CONNECT_WALLET_PAGES } from "../../constants";
 import { browser, ExternalButton, ModalStatusType, os, platform } from "../../interfaces";
+import { t } from "../../localeImport";
 import { WalletButton } from "../WalletButton";
 import { BodyContext } from "./Body";
 export interface ConnectWalletProps {
@@ -28,9 +29,6 @@ const ConnectWallet = (props: ConnectWalletProps) => {
   const [selectedButton, setSelectedButton] = createSignal<ExternalButton>(null);
   const [walletSearch, setWalletSearch] = createSignal<string>("");
 
-  // eslint-disable-next-line no-console, solid/reactivity
-  console.log(selectedButton(), "SELECTED BUTTON");
-
   const handleBack = () => {
     if (!selectedWallet() && currentPage() === CONNECT_WALLET_PAGES.CONNECT_WALLET && props.onBackClick) {
       props.onBackClick(false);
@@ -249,9 +247,9 @@ const ConnectWallet = (props: ConnectWalletProps) => {
                 e.target.placeholder = "";
               }}
               onBlur={(e) => {
-                e.target.placeholder = `modal.external.search-wallet, ${totalExternalWallets()}`;
+                e.target.placeholder = t("modal.external.search-wallet", { count: `${totalExternalWallets()}` });
               }}
-              placeholder={`Search through wallets... ${totalExternalWallets()}`}
+              placeholder={t("modal.external.search-wallet", { count: `${totalExternalWallets()}` })}
               class="w3a--appearance-none w3a--px-4 w3a--py-2.5 w3a--border w3a--text-app-gray-900 w3a--border-app-gray-300 w3a--bg-app-gray-50 dark:w3a--bg-app-gray-700 dark:w3a--border-app-gray-600 dark:w3a--text-app-white placeholder:w3a--text-app-gray-500 dark:placeholder:w3a--text-app-gray-400 placeholder:w3a--text-sm placeholder:w3a--font-normal w3a--rounded-full w3a--outline-none focus:w3a--outline-none active:w3a--outline-none"
             />
           </Show>
@@ -260,7 +258,7 @@ const ConnectWallet = (props: ConnectWalletProps) => {
               when={externalButtons().length !== 0}
               fallback={
                 <div class="w3a--w-full w3a--text-center w3a--text-app-gray-400 dark:w3a--text-app-gray-500 w3a--py-6 w3a--flex w3a--justify-center w3a--items-center">
-                  {"modal.external.no-wallets-found"}
+                  {t("modal.external.no-wallets-found")}
                 </div>
               }
             >
@@ -298,13 +296,15 @@ const ConnectWallet = (props: ConnectWalletProps) => {
             />
           </div>
           <p class="w3a--text-center w3a--text-sm w3a--text-app-gray-500 dark:w3a--text-app-gray-400 w3a--font-normal">
-            Scan with a WalletConnect-supported wallet or click the QR code to copy to your clipboard.
+            {t("modal.external.walletconnect-copy")}
           </p>
           <div
             class="w3a--flex w3a--items-center w3a--justify-between w3a--w-full w3a--mt-auto w3a--border w3a--text-app-gray-900 w3a--border-app-gray-300 w3a--bg-app-gray-50 
       dark:w3a--bg-app-gray-700 dark:w3a--border-app-gray-600 dark:w3a--text-app-white w3a--rounded-xl w3a--p-3"
           >
-            <p class="w3a--text-sm w3a--text-app-gray-900 dark:w3a--text-app-white">Don't have Trust Wallet?</p>
+            <p class="w3a--text-sm w3a--text-app-gray-900 dark:w3a--text-app-white">
+              {t("modal.external.dont-have")} <span>{selectedButton()?.displayName}</span>?
+            </p>
             <button
               class="w3a--appearance-none w3a--border w3a--border-app-gray-900 w3a--text-xs w3a--text-app-gray-900 dark:w3a--text-app-white dark:w3a--border-app-white w3a--rounded-full w3a--px-2 w3a--py-2"
               onClick={() => {
@@ -315,7 +315,7 @@ const ConnectWallet = (props: ConnectWalletProps) => {
                 });
               }}
             >
-              Get Wallet
+              {t("modal.external.get-wallet")}
             </button>
           </div>
         </div>

diff --git a/packages/modal-ui/src/components/Body/Login.tsx b/packages/modal-ui/src/components/Body/Login.tsx
@@ -2,6 +2,7 @@ import { LOGIN_PROVIDER } from "@web3auth/auth";
 import { createEffect, createMemo, createSignal, mergeProps, Show } from "solid-js";
 
 import { DEFAULT_LOGO_DARK, DEFAULT_LOGO_LIGHT, SocialLoginsConfig } from "../../interfaces";
+import { t } from "../../localeImport";
 import { cn } from "../../utils/common";
 import { validatePhoneNumber } from "../../utils/modal";
 import SocialLoginList from "../SocialLoginList";
@@ -72,9 +73,9 @@ const Login = (props: LoginProps) => {
   };
 
   const title = createMemo(() => {
-    if (mergedProps.isEmailPasswordLessLoginVisible && mergedProps.isSmsPasswordLessLoginVisible) return "modal.social.passwordless-title";
-    if (mergedProps.isEmailPasswordLessLoginVisible) return "modal.social.email";
-    return "modal.social.phone";
+    if (mergedProps.isEmailPasswordLessLoginVisible && mergedProps.isSmsPasswordLessLoginVisible) return t("modal.social.passwordless-title");
+    if (mergedProps.isEmailPasswordLessLoginVisible) return t("modal.social.email");
+    return t("modal.social.phone");
   });
 
   const placeholder = createMemo(() => {
@@ -84,9 +85,9 @@ const Login = (props: LoginProps) => {
   });
 
   const invalidInputErrorMessage = createMemo(() => {
-    if (mergedProps.isEmailPasswordLessLoginVisible && mergedProps.isSmsPasswordLessLoginVisible) return "modal.errors-invalid-number-email";
-    if (mergedProps.isEmailPasswordLessLoginVisible) return "modal.errors-invalid-email";
-    return "modal.errors-invalid-number";
+    if (mergedProps.isEmailPasswordLessLoginVisible && mergedProps.isSmsPasswordLessLoginVisible) return t("modal.errors-invalid-number-email");
+    if (mergedProps.isEmailPasswordLessLoginVisible) return t("modal.errors-invalid-email");
+    return t("modal.errors-invalid-number");
   });
 
   const handleConnectWallet = (e: MouseEvent) => {
@@ -97,7 +98,7 @@ const Login = (props: LoginProps) => {
   const headerLogo = createMemo(() => ([DEFAULT_LOGO_DARK, DEFAULT_LOGO_LIGHT].includes(mergedProps.appLogo) ? "" : mergedProps.appLogo));
 
   const subtitle = createMemo(() => {
-    return `modal.header-subtitle-name, ${mergedProps.appName}`;
+    return t("modal.header-subtitle-name", { appName: mergedProps.appName });
   });
 
   return (
@@ -108,7 +109,7 @@ const Login = (props: LoginProps) => {
             <img src={headerLogo()} alt="Logo" />
           </div>
         </Show>
-        <p class="w3a--text-xl w3a--font-bold w3a--text-app-gray-900 dark:w3a--text-app-white">{"modal.header-title"}</p>
+        <p class="w3a--text-xl w3a--font-bold w3a--text-app-gray-900 dark:w3a--text-app-white">{t("modal.header-title")}</p>
         <p class="w3a--text-sm w3a--font-normal w3a--text-app-gray-500 dark:w3a--text-app-gray-400">{subtitle()}</p>
       </div>
 
@@ -136,7 +137,7 @@ const Login = (props: LoginProps) => {
               />
             </div>
             <Show when={isValidInput() === false}>
-              <div class="w3a--text-sm w3a--font-normal w3a--text-app-red-500 dark:w3a--text-app-red-400 w3a--text-start">
+              <div class="w3a--text-xs w3a--font-normal w3a--text-app-red-500 dark:w3a--text-app-red-400 w3a--text-start -w3a--mt-2">
                 {invalidInputErrorMessage()}
               </div>
             </Show>
@@ -147,13 +148,13 @@ const Login = (props: LoginProps) => {
               })}
               onClick={handleFormSubmit}
             >
-              {"modal.social.passwordless-cta"}
+              {t("modal.social.passwordless-cta")}
             </button>
           </Show>
           <Show when={mergedProps.showExternalWalletButton}>
             <div class="w3a--flex w3a--flex-col w3a--gap-y-2">
               <label class="w3a--text-sm w3a--font-medium w3a--text-app-gray-500 dark:w3a--text-app-gray-400 w3a--text-start">
-                {"modal.external.title"}
+                {t("modal.external.title")}
               </label>
               <button
                 class={cn("w3a--w-full w3a--px-5 w3a--py-3 w3a--rounded-full w3a--text-sm w3a--font-medium", {
@@ -162,7 +163,7 @@ const Login = (props: LoginProps) => {
                 })}
                 onClick={handleConnectWallet}
               >
-                {"modal.external.connect"}
+                {t("modal.external.connect")}
               </button>
             </div>
           </Show>

diff --git a/packages/modal-ui/src/components/Footer/Footer.tsx b/packages/modal-ui/src/components/Footer/Footer.tsx
@@ -1,7 +1,8 @@
+import { t } from "../../localeImport";
 const Footer = () => {
   return (
     <div class="w3a--flex w3a--items-center w3a--gap-2 w3a--justify-center w3a--pt-6 w3a--mt-auto">
-      <div class="w3a--text-xs w3a--text-app-gray-300 dark:w3a--text-app-gray-500">{"modal.footer.message-new"}</div>
+      <div class="w3a--text-xs w3a--text-app-gray-300 dark:w3a--text-app-gray-500">{t("modal.footer.message-new")}</div>
       <img
         height="16"
         src="https://images.web3auth.io/web3auth-footer-logo-light.svg"

diff --git a/packages/modal-ui/src/components/Loader/Loader.tsx b/packages/modal-ui/src/components/Loader/Loader.tsx
@@ -2,6 +2,7 @@ import { ADAPTER_STATUS } from "@web3auth/base";
 import { createEffect, createMemo, Show } from "solid-js";
 
 import { MODAL_STATUS, ModalStatusType } from "../../interfaces";
+import { t } from "../../localeImport";
 import { Image } from "../Image";
 
 export interface LoaderProps {
@@ -45,8 +46,12 @@ const Loader = (props: LoaderProps) => {
             {providerIcon()}
           </div>
           <div class="w3a--flex w3a--flex-col w3a--gap-y-1">
-            <div class="w3a--text-sm w3a--text-app-gray-500 dark:w3a--text-app-gray-400 w3a--text-center">{`modal.adapter-loader.message1 ${props.adapterName}`}</div>
-            <div class="w3a--text-sm w3a--text-app-gray-500 dark:w3a--text-app-gray-400 w3a--text-center">{`modal.adapter-loader.message2 ${props.adapterName}`}</div>
+            <div class="w3a--text-sm w3a--text-app-gray-500 dark:w3a--text-app-gray-400 w3a--text-center">
+              {t("modal.adapter-loader.message1", { adapter: props.adapterName })}
+            </div>
+            <div class="w3a--text-sm w3a--text-app-gray-500 dark:w3a--text-app-gray-400 w3a--text-center">
+              {t("modal.adapter-loader.message2", { adapter: props.adapterName })}
+            </div>
           </div>
         </div>
       </Show>

diff --git a/packages/modal-ui/src/components/SocialLoginList/SocialLoginList.tsx b/packages/modal-ui/src/components/SocialLoginList/SocialLoginList.tsx
@@ -4,6 +4,7 @@ import { createEffect, createSignal, For, Show, useContext } from "solid-js";
 import { capitalizeFirstLetter } from "../../config";
 import { ThemedContext } from "../../context/ThemeContext";
 import { SocialLoginsConfig } from "../../interfaces";
+import { t } from "../../localeImport";
 import { cn } from "../../utils/common";
 import { SocialLoginButton } from "../SocialLoginButton";
 
@@ -50,9 +51,6 @@ const SocialLoginList = (props: SocialLoginListProps) => {
       return props.socialLoginsConfig.loginMethods[loginMethodKey].showOnModal;
     });
 
-    // eslint-disable-next-line no-console
-    console.log(props.socialLoginsConfig.loginMethods, "loginMethods");
-
     const visibleRows: rowType[] = [];
     const otherRows: rowType[] = [];
 
@@ -128,7 +126,7 @@ const SocialLoginList = (props: SocialLoginListProps) => {
           }
           showText={true}
           showIcon={true}
-          text={`modal.social.continueCustom ${mainOption().name}`}
+          text={t("modal.social.continueCustom", { adapter: mainOption().name })}
         />
       </Show>
 
@@ -186,15 +184,15 @@ const SocialLoginList = (props: SocialLoginListProps) => {
         </div>
       </Show>
 
-      <p class="w3a--text-xs w3a--font-normal w3a--text-app-gray-500 w3a--text-start">{"modal.social.policy"}</p>
+      <p class="w3a--text-xs w3a--font-normal w3a--text-app-gray-500 w3a--text-start">{t("modal.social.policy")}</p>
 
       <Show when={canShowMore()}>
         <button
           type="button"
           class="w3a--text-xs w3a--font-normal w3a--text-app-primary-600 hover:w3a--text-app-primary-500 dark:w3a--text-app-primary-500 dark:hover:w3a--text-app-primary-600 w3a--text-right"
           onClick={handleExpand}
         >
-          {expand() ? "modal.social.view-less" : "modal.social.view-more"}
+          {expand() ? t("modal.social.view-less") : t("modal.social.view-more")}
         </button>
       </Show>
     </div>

diff --git a/packages/modal-ui/src/components/WalletButton/WalletButton.tsx b/packages/modal-ui/src/components/WalletButton/WalletButton.tsx
@@ -1,6 +1,7 @@
 import { createMemo, Show } from "solid-js";
 
 import { ExternalButton } from "../../interfaces";
+import { t } from "../../localeImport";
 import { Image } from "../Image";
 
 type os = "iOS" | "Android";
@@ -38,9 +39,6 @@ const WalletButton = (props: WalletButtonProps) => {
     }
   };
 
-  // eslint-disable-next-line no-console, solid/reactivity
-  console.log(props.button);
-
   return (
     <button
       class="w3a--w-full w3a--flex w3a--items-center w3a--justify-between w3a--p-4 w3a--rounded-xl w3a--border w3a--text-app-gray-900 w3a--border-app-gray-300 w3a--bg-app-gray-50 
@@ -67,7 +65,7 @@ const WalletButton = (props: WalletButtonProps) => {
           class="w3a--inline-flex w3a--items-center w3a--rounded-lg w3a--px-2 w3a--py-1 w3a--text-xs w3a--font-medium w3a--bg-app-primary-100 w3a--text-app-primary-800 
         dark:w3a--bg-transparent dark:w3a--text-app-primary-400 dark:w3a--border dark:w3a--border-app-primary-400"
         >
-          Installed
+          {t("modal.external.installed")}
         </span>
       </Show>
     </button>