Replaced texts with locales

amirsaran3 · Oct 11, 2022 · c3be608 · c3be608
1 parent fa7d605
commit c3be608
Show file tree

Hide file tree

Showing 11 changed files with 70 additions and 28 deletions.
diff --git a/packages/ui/css/web3auth.css b/packages/ui/css/web3auth.css
@@ -233,7 +233,6 @@
   }
 }
 
-
 /* Header */
 #w3a-modal .w3a-header {
   display: flex;
@@ -295,6 +294,7 @@
   font-size: 14px;
   line-height: 1.5em;
   margin-bottom: 8px;
+  text-transform: uppercase;
 }
 
 /* Adapter List */

diff --git a/packages/ui/src/components/AddNetwork.tsx b/packages/ui/src/components/AddNetwork.tsx
@@ -1,5 +1,6 @@
 import { CustomChainConfig } from "@web3auth/base";
 import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 
 import { getNetworkIconId } from "../utils";
 import Image from "./Image";
@@ -16,6 +17,8 @@ function AddNetwork(props: AddNetworkProps) {
   const [showModal, setShowModal] = useState(true);
   const [networkIconId, setNetworkIconId] = useState("network-default");
 
+  const { t } = useTranslation();
+
   useEffect(() => {
     getNetworkIconId(chainConfig.ticker)
       .then((id) => {
@@ -28,7 +31,7 @@ function AddNetwork(props: AddNetworkProps) {
     showModal && (
       <div id="w3a-modal-network">
         <div className="w3a-switch-network">
-          <div className="w3a-switch-network__title">This site is requesting to add Network</div>
+          <div className="w3a-switch-network__title">{t("modal.network.add-request")}</div>
           <div>
             <a className="w3a-switch-network__link" href={appOrigin}>
               {appOrigin}
@@ -53,7 +56,7 @@ function AddNetwork(props: AddNetworkProps) {
                 onCancelNetwork();
               }}
             >
-              Cancel
+              {t("modal.network.cancel")}
             </button>
             <button
               type="button"
@@ -63,7 +66,7 @@ function AddNetwork(props: AddNetworkProps) {
                 onAddNetwork(chainConfig.chainId);
               }}
             >
-              Proceed
+              {t("modal.network.proceed")}
             </button>
           </div>
         </div>

diff --git a/packages/ui/src/components/ExternalWallets.tsx b/packages/ui/src/components/ExternalWallets.tsx
@@ -1,5 +1,6 @@
 import { BaseAdapterConfig, IWalletConnectExtensionAdapter, log, WALLET_ADAPTERS } from "@web3auth/base";
 import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 
 import { MODAL_STATUS, ModalStatusType } from "../interfaces";
 import Icon from "./Icon";
@@ -20,6 +21,8 @@ export default function ExternalWallet(props: ExternalWalletsProps) {
   const { hideExternalWallets, handleExternalWalletClick, config = {}, walletConnectUri, showBackButton, modalStatus, wcAdapters } = props;
   const [isLoaded, setIsLoaded] = useState(false);
 
+  const { t } = useTranslation();
+
   useEffect(() => {
     log.debug("loaded external wallets", config, walletConnectUri);
     const wcAvailable = (config[WALLET_ADAPTERS.WALLET_CONNECT_V1]?.showOnModal || false) !== false;
@@ -36,7 +39,7 @@ export default function ExternalWallet(props: ExternalWalletsProps) {
         {showBackButton && (
           <button type="button" className="w3a-external-back w3ajs-external-back" onClick={hideExternalWallets}>
             <Icon iconName="arrow-left" />
-            <div className="w3a-group__title">Back</div>
+            <div className="w3a-group__title">{t("modal.external.back")}</div>
           </button>
         )}
         {!isLoaded && <Loader modalStatus={MODAL_STATUS.CONNECTING} canEmit={false} />}

diff --git a/packages/ui/src/components/Footer.tsx b/packages/ui/src/components/Footer.tsx
@@ -1,4 +1,5 @@
 import { memo } from "react";
+import { useTranslation } from "react-i18next";
 
 import Image from "./Image";
 
@@ -9,21 +10,23 @@ interface FooterProps {
 function Footer(props: FooterProps) {
   const { version } = props;
 
+  const { t } = useTranslation();
+
   const web3authIcon = <Image imageId="web3auth" height="14px" width="auto" />;
 
   return (
     <div className="w3a-modal__footer">
       <div className="w3a-footer">
         <div>
           <div className="w3a-footer__links">
-            <a href="https://docs.web3auth.io/legal/terms-and-conditions">Terms of use</a>
+            <a href="https://docs.web3auth.io/legal/terms-and-conditions">{t("modal.footer.terms")}</a>
             <span>|</span>
-            <a href="https://docs.web3auth.io/legal/privacy-policy">Privacy policy</a>
+            <a href="https://docs.web3auth.io/legal/privacy-policy">{t("modal.footer.policy")}</a>
           </div>
           <p>{version}</p>
         </div>
         <div className="w3a-footer__secured">
-          <div>Self-custodial login by</div>
+          <div>{t("modal.footer.message")}</div>
           {web3authIcon}
         </div>
       </div>

diff --git a/packages/ui/src/components/Header.tsx b/packages/ui/src/components/Header.tsx
@@ -28,8 +28,6 @@ function Header(props: HeaderProps) {
         <div>
           <div className="w3a-header__title">{t("modal.header-title")}</div>
           <p className="w3a-header__subtitle">{t("modal.header-subtitle")}</p>
-          {/* Test */}
-          {/* Test */}
         </div>
       </div>
       <button type="button" onClick={onClose} className="w3a-header__button w3ajs-close-btn">

diff --git a/packages/ui/src/components/Modal.tsx b/packages/ui/src/components/Modal.tsx
@@ -4,6 +4,7 @@ import { log, WALLET_ADAPTERS } from "@web3auth/base";
 import cloneDeep from "lodash.clonedeep";
 import deepmerge from "lodash.merge";
 import { useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
 
 import { ThemedContext } from "../context/ThemeContext";
 import { ExternalWalletEventType, MODAL_STATUS, ModalState, SocialLoginEventType } from "../interfaces";
@@ -53,6 +54,8 @@ export default function Modal(props: ModalProps) {
   const { stateListener, appLogo, version, handleSocialLoginClick, handleExternalWalletClick, handleShowExternalWallets, closeModal } = props;
   const DETAILED_ADAPTERS = [WALLET_ADAPTERS.PHANTOM, WALLET_ADAPTERS.METAMASK];
 
+  const { t } = useTranslation();
+
   useEffect(() => {
     stateListener.emit("MOUNTED");
     stateListener.on("STATE_UPDATED", (newModalState: Partial<ModalState>) => {
@@ -125,7 +128,7 @@ export default function Modal(props: ModalProps) {
   const externalWalletButton = (
     <div className="w3ajs-external-wallet w3a-group">
       <div className="w3a-external-toggle w3ajs-external-toggle">
-        <div className="w3a-group__title">EXTERNAL WALLET</div>
+        <div className="w3a-group__title">{t("modal.external.title")}</div>
         <button
           type="button"
           className="w3a-button w3ajs-external-toggle__button"
@@ -139,7 +142,7 @@ export default function Modal(props: ModalProps) {
             });
           }}
         >
-          Connect with Wallet
+          {t("modal.external.connect")}
         </button>
       </div>
     </div>

diff --git a/packages/ui/src/components/SocialLoginEmail.tsx b/packages/ui/src/components/SocialLoginEmail.tsx
@@ -1,4 +1,5 @@
 import { ChangeEvent, FormEvent, useState } from "react";
+import { useTranslation } from "react-i18next";
 
 interface SocialLoginEmailProps {
   adapter: string;
@@ -8,6 +9,8 @@ export default function SocialLoginEmail(props: SocialLoginEmailProps) {
   const { handleSocialLoginClick, adapter } = props;
   const [isValidEmail, setIsValidEmail] = useState(false);
 
+  const { t } = useTranslation();
+
   const handleEmailSubmit = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     const email = ((e.target as HTMLFormElement)[0] as HTMLInputElement).value;
@@ -20,11 +23,18 @@ export default function SocialLoginEmail(props: SocialLoginEmailProps) {
   };
   return (
     <div className="w3ajs-email-passwordless w3a-group w3a-group--email">
-      <div className="w3a-group__title">EMAIL</div>
+      <div className="w3a-group__title">{t("modal.social.email")}</div>
       <form className="w3ajs-email-passwordless-form" onSubmit={(e) => handleEmailSubmit(e)}>
-        <input className="w3a-text-field" type="email" name="email" required placeholder="Email" onChange={(e) => handleEmailChange(e)} />
+        <input
+          className="w3a-text-field"
+          type="email"
+          name="email"
+          required
+          placeholder={t("modal.social.email")}
+          onChange={(e) => handleEmailChange(e)}
+        />
         <button disabled={!isValidEmail} className="w3a-button" type="submit">
-          Continue with Email
+          {t("modal.social.email-continue")}
         </button>
       </form>
     </div>

diff --git a/packages/ui/src/components/SocialLogins.tsx b/packages/ui/src/components/SocialLogins.tsx
@@ -1,5 +1,6 @@
 import classNames from "classnames";
 import { useContext, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 
 import { ThemedContext } from "../context/ThemeContext";
 import { SocialLoginsConfig } from "../interfaces";
@@ -25,6 +26,8 @@ export default function SocialLogins(props: SocialLoginProps) {
   } = props;
   const { isDark } = useContext(ThemedContext);
 
+  const { t } = useTranslation();
+
   const [isExpanded, setIsExpanded] = useState(false);
 
   // Too small a function to use `useCallback`
@@ -41,11 +44,11 @@ export default function SocialLogins(props: SocialLoginProps) {
 
   const adapterListClass = classNames("w3a-adapter-list", "w3ajs-socials-adapters", !isExpanded ? " w3a-adapter-list--shrink" : "");
   const adapterButtonClass = classNames("w3a-button-expand", "w3ajs-button-expand", isExpanded ? "w3a-button--rotate" : "");
-  const adapterExpandText = isExpanded ? "View less options" : "View more options";
+  const adapterExpandText = isExpanded ? t("modal.social.view-less") : t("modal.social.view-more");
 
   return (
     <div className="w3ajs-social-logins w3a-group">
-      <div className="w3a-group__title">CONTINUE WITH</div>
+      <div className="w3a-group__title">{t("modal.social.continue")}</div>
       <ul className={adapterListClass}>
         {Object.keys(socialLoginsConfig.loginMethods).map((method) => {
           const providerIcon = <Image imageId={`login-${method}${isDark && hasLightIcons.includes(method) ? "-light" : ""}`} />;

diff --git a/packages/ui/src/components/SwitchNetwork.tsx b/packages/ui/src/components/SwitchNetwork.tsx
@@ -1,5 +1,6 @@
 import { CustomChainConfig } from "@web3auth/base";
 import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 
 import { getNetworkIconId } from "../utils";
 import Image from "./Image";
@@ -16,6 +17,8 @@ function SwitchNetwork(props: SwitchNetworkProps) {
   const { currentChainConfig, newChainConfig, appOrigin, onSwitchNetwork, onCancelNetwork } = props;
   const [showModal, setShowModal] = useState(true);
 
+  const { t } = useTranslation();
+
   const [fromNetworkIconId, setFromNetworkIconId] = useState("network-default");
   const [toNetworkIconId, setToNetworkIconId] = useState("network-default");
 
@@ -35,7 +38,7 @@ function SwitchNetwork(props: SwitchNetworkProps) {
     showModal && (
       <div id="w3a-modal-network">
         <div className="w3a-switch-network">
-          <div className="w3a-switch-network__title">This site is requesting to switch Network</div>
+          <div className="w3a-switch-network__title">{t("modal.network.switch-request")}</div>
           <div>
             <a className="w3a-switch-network__link" href={appOrigin}>
               {appOrigin}
@@ -47,7 +50,7 @@ function SwitchNetwork(props: SwitchNetworkProps) {
                 <Image imageId={fromNetworkIconId} />
               </div>
               <div>
-                <div>From:</div>
+                <div>{t("modal.network.from")}:</div>
                 <div>{currentChainConfig.displayName}</div>
               </div>
             </div>
@@ -61,7 +64,7 @@ function SwitchNetwork(props: SwitchNetworkProps) {
                 <Image imageId={toNetworkIconId} />
               </div>
               <div>
-                <div>To:</div>
+                <div>{t("modal.network.to")}:</div>
                 <div>{newChainConfig.displayName}</div>
               </div>
             </div>
@@ -75,7 +78,7 @@ function SwitchNetwork(props: SwitchNetworkProps) {
                 onCancelNetwork();
               }}
             >
-              Cancel
+              {t("modal.network.cancel")}
             </button>
             <button
               type="button"
@@ -85,7 +88,7 @@ function SwitchNetwork(props: SwitchNetworkProps) {
                 onSwitchNetwork(currentChainConfig.chainId, newChainConfig.chainId);
               }}
             >
-              Proceed
+              {t("modal.network.proceed")}
             </button>
           </div>
         </div>

diff --git a/packages/ui/src/components/WalletConnect.tsx b/packages/ui/src/components/WalletConnect.tsx
@@ -1,6 +1,7 @@
 import { IWalletConnectExtensionAdapter } from "@web3auth/base";
 import bowser from "bowser";
 import { memo, useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
 import QRCode from "react-qr-code";
 
 import Image from "./Image";
@@ -66,6 +67,8 @@ function WalletConnect(props: WalletConnectProps) {
   const { walletConnectUri, wcAdapters } = props;
   const [links, setLinks] = useState<IMobileRegistryEntry[]>([]);
 
+  const { t } = useTranslation();
+
   const deviceDetails = useMemo<{ platform: platform; os: os }>(() => {
     const browser = bowser.getParser(window.navigator.userAgent);
     return { platform: browser.getPlatformType() as platform, os: browser.getOSName() as os };
@@ -89,7 +92,7 @@ function WalletConnect(props: WalletConnectProps) {
         <div className="w3a-wallet-connect__logo">{walletConnectIcon}</div>
         {deviceDetails.platform === bowser.PLATFORMS_MAP.desktop ? (
           <div className="w3a-wallet-connect__container-desktop">
-            <div>Scan QR code with a WalletConnect-compatible wallet</div>
+            <div>{t("modal.external.walletconnect-subtitle")}</div>
             <div className="w3ajs-wallet-connect-qr w3a-wallet-connect-qr">
               <QRCode size={200} value={walletConnectUri} />
             </div>
@@ -110,7 +113,7 @@ function WalletConnect(props: WalletConnectProps) {
                 <div className="w3a-wallet-connect__container-android">
                   <a key={link.name} href={link.href} rel="noopener noreferrer" target="_blank">
                     <button type="button" className="w3a-button">
-                      Connect
+                      {t("modal.external.walletconnect-connect")}
                     </button>
                   </a>
                 </div>

diff --git a/packages/ui/src/i18n/english.json b/packages/ui/src/i18n/english.json
@@ -1,13 +1,26 @@
 {
-  "common": {
-    "copier-manage-account": "Manage account"
-  },
   "modal": {
     "adapter-loader": {
       "message": "Verify on your {{adapter}} account to continue"
     },
+    "external": {
+      "title": "External wallet",
+      "walletconnect-subtitle": "Scan QR code with a WalletConnect-compatible wallet",
+      "walletconnect-connect": "Connect",
+      "connect": "Connect with Wallet",
+      "back": "Back"
+    },
     "footer": {
-      "message": "Self-custodial login by"
+      "message": "Self-custodial login by",
+      "terms": "Terms of use",
+      "policy": "Privacy policy"
+    },
+    "social": {
+      "email": "Email",
+      "view-more": "View more options",
+      "email-continue": "Continue with Email",
+      "continue": "Continue with",
+      "view-less": "View less options"
     },
     "header-subtitle": "Select one of the following to continue",
     "header-title": "Sign in"