Merge pull request #1736 from Web3Auth/feat/fetch-configs-from-dashboard

Update description of primaryButton option in web3auth sdk + refactor to use language constants
Web3Auth · Feb 22, 2024 · 342b183 · 342b183
2 parents 0428ae5 + 6ed9dc1
commit 342b183
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 29 deletions.
diff --git a/packages/ui/src/interfaces.ts b/packages/ui/src/interfaces.ts
@@ -33,8 +33,9 @@ export interface UIConfig extends WhiteLabelData {
   loginGridCol?: 2 | 3;
 
   /**
-   * decides which button will be displayed as primary button in modal
-   * only one button will be primary and other buttons in modal will be secondary
+   * Decides which button will be the focus of the modal
+   * For `socialLogin` the social icon will be colored
+   * For other options like `emailLogin` and `externalLogin` the respective buttons will be coverted into a primary button
    *
    * @defaultValue `socialLogin`
    */

diff --git a/packages/ui/src/loginModal.tsx b/packages/ui/src/loginModal.tsx
@@ -1,7 +1,7 @@
 import "../css/web3auth.css";
 
 import { SafeEventEmitter } from "@toruslabs/openlogin-jrpc";
-import { applyWhiteLabelTheme } from "@toruslabs/openlogin-utils";
+import { applyWhiteLabelTheme, LANGUAGES } from "@toruslabs/openlogin-utils";
 import {
   ADAPTER_EVENTS,
   BaseAdapterConfig,
@@ -62,7 +62,7 @@ class LoginModal extends SafeEventEmitter {
     if (!uiConfig.mode) this.uiConfig.mode = "auto";
     if (!uiConfig.modalZIndex) this.uiConfig.modalZIndex = "99998";
     if (typeof uiConfig.displayErrorsOnModal === "undefined") this.uiConfig.displayErrorsOnModal = true;
-    if (!uiConfig.defaultLanguage) this.uiConfig.defaultLanguage = "en";
+    if (!uiConfig.defaultLanguage) this.uiConfig.defaultLanguage = LANGUAGES.en;
     if (!uiConfig.appName) this.uiConfig.appName = "Web3Auth";
     if (!uiConfig.loginGridCol) this.uiConfig.loginGridCol = 3;
     if (!uiConfig.primaryButton) this.uiConfig.primaryButton = "socialLogin";
@@ -79,10 +79,10 @@ class LoginModal extends SafeEventEmitter {
   initModal = async (): Promise<void> => {
     const darkState = { isDark: this.isDark };
 
-    const useLang = this.uiConfig.defaultLanguage || "en";
+    const useLang = this.uiConfig.defaultLanguage || LANGUAGES.en;
     // Load new language resource
 
-    if (useLang === "de") {
+    if (useLang === LANGUAGES.de) {
       import("./i18n/german.json")
         .then((messages) => {
           i18n.addResourceBundle(useLang as string, "translation", messages.default);
@@ -91,7 +91,7 @@ class LoginModal extends SafeEventEmitter {
         .catch((error) => {
           log.error(error);
         });
-    } else if (useLang === "ja") {
+    } else if (useLang === LANGUAGES.ja) {
       import(`./i18n/japanese.json`)
         .then((messages) => {
           i18n.addResourceBundle(useLang as string, "translation", messages.default);
@@ -100,7 +100,7 @@ class LoginModal extends SafeEventEmitter {
         .catch((error) => {
           log.error(error);
         });
-    } else if (useLang === "ko") {
+    } else if (useLang === LANGUAGES.ko) {
       import(`./i18n/korean.json`)
         .then((messages) => {
           i18n.addResourceBundle(useLang as string, "translation", messages.default);
@@ -109,7 +109,7 @@ class LoginModal extends SafeEventEmitter {
         .catch((error) => {
           log.error(error);
         });
-    } else if (useLang === "zh") {
+    } else if (useLang === LANGUAGES.zh) {
       import(`./i18n/mandarin.json`)
         .then((messages) => {
           i18n.addResourceBundle(useLang as string, "translation", messages.default);
@@ -118,7 +118,7 @@ class LoginModal extends SafeEventEmitter {
         .catch((error) => {
           log.error(error);
         });
-    } else if (useLang === "es") {
+    } else if (useLang === LANGUAGES.es) {
       import(`./i18n/spanish.json`)
         .then((messages) => {
           i18n.addResourceBundle(useLang as string, "translation", messages.default);
@@ -127,7 +127,7 @@ class LoginModal extends SafeEventEmitter {
         .catch((error) => {
           log.error(error);
         });
-    } else if (useLang === "fr") {
+    } else if (useLang === LANGUAGES.fr) {
       import(`./i18n/french.json`)
         .then((messages) => {
           i18n.addResourceBundle(useLang as string, "translation", messages.default);
@@ -136,7 +136,7 @@ class LoginModal extends SafeEventEmitter {
         .catch((error) => {
           log.error(error);
         });
-    } else if (useLang === "pt") {
+    } else if (useLang === LANGUAGES.pt) {
       import(`./i18n/portuguese.json`)
         .then((messages) => {
           i18n.addResourceBundle(useLang as string, "translation", messages.default);
@@ -145,7 +145,7 @@ class LoginModal extends SafeEventEmitter {
         .catch((error) => {
           log.error(error);
         });
-    } else if (useLang === "nl") {
+    } else if (useLang === LANGUAGES.nl) {
       import(`./i18n/dutch.json`)
         .then((messages) => {
           i18n.addResourceBundle(useLang as string, "translation", messages.default);
@@ -154,7 +154,7 @@ class LoginModal extends SafeEventEmitter {
         .catch((error) => {
           log.error(error);
         });
-    } else if (useLang === "tr") {
+    } else if (useLang === LANGUAGES.tr) {
       import(`./i18n/turkish.json`)
         .then((messages) => {
           i18n.addResourceBundle(useLang as string, "translation", messages.default);

diff --git a/packages/ui/src/utils.ts b/packages/ui/src/utils.ts
@@ -1,5 +1,5 @@
 import { get, post } from "@toruslabs/http-helpers";
-import { LANGUAGE_TYPE } from "@toruslabs/openlogin-utils";
+import { LANGUAGE_MAP, LANGUAGE_TYPE, LANGUAGES } from "@toruslabs/openlogin-utils";
 import { log, LoginMethodConfig, WALLET_ADAPTERS } from "@web3auth/base";
 
 import { OPENLOGIN_PROVIDERS, OPENLOGIN_PROVIDERS_NAMES } from "./config";
@@ -86,19 +86,6 @@ export const validatePhoneNumber = async (phoneNumber: string): Promise<string |
   }
 };
 
-export const languageMap: Record<LANGUAGE_TYPE, string> = {
-  en: "english",
-  de: "german",
-  ja: "japanese",
-  ko: "korean",
-  zh: "mandarin",
-  es: "spanish",
-  fr: "french",
-  pt: "portuguese",
-  nl: "dutch",
-  tr: "turkish",
-};
-
 interface NavigatorLanguage {
   userLanguage?: string;
 }
@@ -110,5 +97,5 @@ export const getUserLanguage = (defaultLanguage: string | undefined): LANGUAGE_T
       typeof window !== "undefined" ? (window.navigator as NavigatorLanguage).userLanguage || window.navigator.language || "en-US" : "en-US";
     userLanguage = browserLanguage.split("-")[0];
   }
-  return Object.prototype.hasOwnProperty.call(languageMap, userLanguage) ? (userLanguage as LANGUAGE_TYPE) : "en";
+  return Object.prototype.hasOwnProperty.call(LANGUAGE_MAP, userLanguage) ? (userLanguage as LANGUAGE_TYPE) : LANGUAGES.en;
 };