pass whitelabel from modal to openlogin

Web3Auth · Sep 9, 2023 · f5a0737 · f5a0737
1 parent 3555b32
commit f5a0737
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 105 deletions.
diff --git a/packages/modal/src/default.ts b/packages/modal/src/default.ts
@@ -1,6 +1,7 @@
 import type { OPENLOGIN_NETWORK_TYPE, OpenLoginOptions } from "@toruslabs/openlogin-utils";
 import { CHAIN_NAMESPACES, CustomChainConfig, getChainConfig, IAdapter, IBaseProvider, WALLET_ADAPTER_TYPE, WALLET_ADAPTERS } from "@web3auth/base";
 import { CommonPrivateKeyProvider } from "@web3auth/base-provider";
+import { UIConfig } from "@web3auth/ui";
 
 export async function getPrivateKeyProvider(chainConfig: CustomChainConfig): Promise<IBaseProvider<string>> {
   if (chainConfig.chainNamespace === CHAIN_NAMESPACES.SOLANA) {
@@ -24,8 +25,9 @@ export const getDefaultAdapterModule = async (params: {
   customChainConfig: Partial<CustomChainConfig> & Pick<CustomChainConfig, "chainNamespace">;
   sessionTime?: number;
   web3AuthNetwork?: OPENLOGIN_NETWORK_TYPE;
+  uiConfig?: Omit<UIConfig, "adapterListener">;
 }): Promise<IAdapter<unknown>> => {
-  const { name, customChainConfig, clientId, sessionTime, web3AuthNetwork } = params;
+  const { name, customChainConfig, clientId, sessionTime, web3AuthNetwork, uiConfig } = params;
   if (!Object.values(CHAIN_NAMESPACES).includes(customChainConfig.chainNamespace))
     throw new Error(`Invalid chainNamespace: ${customChainConfig.chainNamespace}`);
   const finalChainConfig = {
@@ -73,7 +75,7 @@ export const getDefaultAdapterModule = async (params: {
       ...defaultOptions,
       clientId,
       chainConfig: { ...finalChainConfig },
-      adapterSettings: { ...(defaultOptions.adapterSettings as OpenLoginOptions), clientId, network: web3AuthNetwork },
+      adapterSettings: { ...(defaultOptions.adapterSettings as OpenLoginOptions), clientId, network: web3AuthNetwork, whiteLabel: uiConfig },
       sessionTime,
       web3AuthNetwork,
       privateKeyProvider,

diff --git a/packages/modal/src/modalManager.ts b/packages/modal/src/modalManager.ts
@@ -15,7 +15,7 @@ import {
 import { CommonJRPCProvider } from "@web3auth/base-provider";
 import { Web3AuthNoModal, Web3AuthNoModalOptions } from "@web3auth/no-modal";
 import type { OpenloginAdapter } from "@web3auth/openlogin-adapter";
-import { getAdapterSocialLogins, LOGIN_MODAL_EVENTS, LoginModal, OPENLOGIN_PROVIDERS, UIConfig } from "@web3auth/ui";
+import { getAdapterSocialLogins, getUserLanguage, LOGIN_MODAL_EVENTS, LoginModal, OPENLOGIN_PROVIDERS, UIConfig } from "@web3auth/ui";
 
 import {
   defaultEvmDappModalConfig,
@@ -26,7 +26,6 @@ import {
 } from "./config";
 import { getDefaultAdapterModule, getPrivateKeyProvider } from "./default";
 import { AdaptersModalConfig, IWeb3AuthModal, ModalConfig } from "./interface";
-import { getUserLanguage } from "./utils";
 
 export interface Web3AuthOptions extends Web3AuthNoModalOptions {
   /**
@@ -77,19 +76,12 @@ export class Web3Auth extends Web3AuthNoModal implements IWeb3AuthModal {
       throw new Error(`Invalid chainNamespace provided: ${providedChainConfig.chainNamespace}`);
     }
 
-    // get userLanguage
-    const defaultLanguage = getUserLanguage(this.options.uiConfig?.defaultLanguage);
+    if (!this.options.uiConfig.defaultLanguage) this.options.uiConfig.defaultLanguage = getUserLanguage(this.options.uiConfig.defaultLanguage);
+    if (!this.options.uiConfig.mode) this.options.uiConfig.mode = "auto";
 
     this.loginModal = new LoginModal({
-      theme: this.options.uiConfig?.theme,
-      appName: this.options.uiConfig?.appName || "blockchain",
-      appLogo: this.options.uiConfig?.appLogo || "",
+      ...this.options.uiConfig,
       adapterListener: this,
-      displayErrorsOnModal: this.options.uiConfig?.displayErrorsOnModal,
-      defaultLanguage,
-      modalZIndex: this.options.uiConfig?.modalZIndex || "99998",
-      loginGridCol: this.options.uiConfig?.loginGridCol || 3,
-      primaryButton: this.options.uiConfig?.primaryButton || "socialLogin",
     });
     this.subscribeToLoginModalEvents();
   }
@@ -131,6 +123,7 @@ export class Web3Auth extends Web3AuthNoModal implements IWeb3AuthModal {
           clientId: this.options.clientId,
           sessionTime: this.options.sessionTime,
           web3AuthNetwork: this.options.web3AuthNetwork,
+          uiConfig: this.options.uiConfig,
         });
 
         this.walletAdapters[adapterName] = ad;
@@ -159,7 +152,7 @@ export class Web3Auth extends Web3AuthNoModal implements IWeb3AuthModal {
           const openloginAdapter = this.walletAdapters[adapterName] as OpenloginAdapter;
           if (!openloginAdapter.privateKeyProvider) {
             const currentPrivateKeyProvider = await getPrivateKeyProvider(openloginAdapter.chainConfigProxy as CustomChainConfig);
-            openloginAdapter.setAdapterSettings({ privateKeyProvider: currentPrivateKeyProvider });
+            openloginAdapter.setAdapterSettings({ privateKeyProvider: currentPrivateKeyProvider, whiteLabel: this.options.uiConfig });
           }
         }
 

diff --git a/packages/modal/src/utils.ts b/packages/modal/src/utils.ts
diff --git a/packages/ui/src/interfaces.ts b/packages/ui/src/interfaces.ts
@@ -1,48 +1,17 @@
 import { SafeEventEmitter } from "@toruslabs/openlogin-jrpc";
+import { WhiteLabelData } from "@toruslabs/openlogin-utils";
 import { BaseAdapterConfig, IWalletConnectExtensionAdapter, LoginMethodConfig, WALLET_ADAPTER_TYPE } from "@web3auth/base";
 
 // TODO: change whitelabel settings and pass ui whitelabel to openlogin.
 // capture whitelabel only once
-export interface UIConfig {
-  /**
-   * App name to display in the UI.
-   */
-  appName?: string;
-
-  /**
-   * Logo for your app.
-   */
-  appLogo?: string;
-
-  /**
-   * theme for the modal
-   *
-   * @defaultValue `auto`
-   */
-  theme?: "light" | "dark" | "auto";
-
+export interface UIConfig extends WhiteLabelData {
   /**
    * order of how login methods are shown
    *
    * @defaultValue `["google", "facebook", "twitter", "reddit", "discord", "twitch", "apple", "line", "github", "kakao", "linkedin", "weibo", "wechat", "email_passwordless"]`
    */
   loginMethodsOrder?: string[];
 
-  /**
-   * language which will be used by web3auth. app will use browser language if not specified. if language is not supported it will use "en"
-   * en: english
-   * de: german
-   * ja: japanese
-   * ko: korean
-   * zh: mandarin
-   * es: spanish
-   * fr: french
-   * pt: portuguese
-   * nl: dutch
-   *
-   */
-  defaultLanguage?: string;
-
   /**
    * Z-index of the modal and iframe
    * @defaultValue 99998

diff --git a/packages/ui/src/loginModal.tsx b/packages/ui/src/loginModal.tsx
@@ -30,6 +30,7 @@ import {
   SocialLoginEventType,
   UIConfig,
 } from "./interfaces";
+import { getUserLanguage } from "./utils";
 
 function createWrapper(parentZIndex: string): HTMLElement {
   const existingWrapper = document.getElementById("w3a-parent-container");
@@ -48,44 +49,37 @@ function createWrapper(parentZIndex: string): HTMLElement {
 }
 
 class LoginModal extends SafeEventEmitter {
-  private appName: string;
-
-  private appLogo: string;
-
-  private modalZIndex: string;
-
-  private isDark: boolean;
+  private uiConfig: UIConfig;
 
   private stateEmitter: SafeEventEmitter;
 
-  private displayErrorsOnModal = true;
-
-  private defaultLanguage: string;
-
-  constructor({ appName, appLogo, adapterListener, theme = "auto", displayErrorsOnModal = true, defaultLanguage, modalZIndex = "99998" }: UIConfig) {
+  constructor(uiConfig: UIConfig) {
     super();
-    this.appName = appName || "blockchain";
-    this.modalZIndex = modalZIndex || "99998";
-
-    // set theme
-    if (theme === "dark" || (theme === "auto" && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
-      this.isDark = true;
-    } else {
-      this.isDark = false;
-    }
-
-    this.appLogo = appLogo || (this.isDark ? DEFAULT_LOGO_DARK : DEFAULT_LOGO_LIGHT);
+    this.uiConfig = uiConfig;
+
+    if (!uiConfig.logoDark) this.uiConfig.logoDark = DEFAULT_LOGO_DARK;
+    if (!uiConfig.logoLight) this.uiConfig.logoLight = DEFAULT_LOGO_LIGHT;
+    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.appName) this.uiConfig.appName = "Web3Auth";
+    if (!uiConfig.loginGridCol) this.uiConfig.loginGridCol = 3;
+    if (!uiConfig.primaryButton) this.uiConfig.primaryButton = "socialLogin";
+    if (!uiConfig.defaultLanguage) this.uiConfig.defaultLanguage = getUserLanguage(uiConfig.defaultLanguage);
 
     this.stateEmitter = new SafeEventEmitter();
-    this.displayErrorsOnModal = displayErrorsOnModal;
-    this.defaultLanguage = defaultLanguage;
-    this.subscribeCoreEvents(adapterListener);
+    this.subscribeCoreEvents(this.uiConfig.adapterListener);
+  }
+
+  get isDark(): boolean {
+    return this.uiConfig.mode === "dark" || (this.uiConfig.mode === "auto" && window.matchMedia("(prefers-color-scheme: dark)").matches);
   }
 
   initModal = async (): Promise<void> => {
     const darkState = { isDark: this.isDark };
 
-    const useLang = this.defaultLanguage || "en";
+    const useLang = this.uiConfig.defaultLanguage || "en";
     // Load new language resource
 
     if (useLang === "de") {
@@ -170,7 +164,7 @@ class LoginModal extends SafeEventEmitter {
         });
         return resolve();
       });
-      const container = createWrapper(this.modalZIndex);
+      const container = createWrapper(this.uiConfig.modalZIndex);
       if (darkState.isDark) {
         container.classList.add("dark");
       } else {
@@ -186,8 +180,8 @@ class LoginModal extends SafeEventEmitter {
             handleShowExternalWallets={this.handleShowExternalWallets}
             handleExternalWalletClick={this.handleExternalWalletClick}
             handleSocialLoginClick={this.handleSocialLoginClick}
-            appLogo={this.appLogo}
-            appName={this.appName}
+            appLogo={darkState.isDark ? this.uiConfig.logoDark : this.uiConfig.logoLight}
+            appName={this.uiConfig.appName}
           />
         </ThemedContext.Provider>
       );
@@ -310,7 +304,7 @@ class LoginModal extends SafeEventEmitter {
     listener.on(ADAPTER_EVENTS.ERRORED, (error: Web3AuthError) => {
       log.error("error", error, error.message);
       if (error.code === 5000) {
-        if (this.displayErrorsOnModal)
+        if (this.uiConfig.displayErrorsOnModal)
           this.setState({
             modalVisibility: true,
             postLoadingMessage: error.message || "modal.post-loading.something-wrong",

diff --git a/packages/ui/src/utils.ts b/packages/ui/src/utils.ts
@@ -1,4 +1,5 @@
 import { get, post } from "@toruslabs/http-helpers";
+import { LANGUAGE_TYPE } from "@toruslabs/openlogin-utils";
 import { log, LoginMethodConfig, WALLET_ADAPTERS } from "@web3auth/base";
 
 import { OPENLOGIN_PROVIDERS, OPENLOGIN_PROVIDERS_NAMES } from "./config";
@@ -85,7 +86,7 @@ export const validatePhoneNumber = async (phoneNumber: string): Promise<string |
   }
 };
 
-export const languageMap = {
+export const languageMap: Record<LANGUAGE_TYPE, string> = {
   en: "english",
   de: "german",
   ja: "japanese",
@@ -96,3 +97,17 @@ export const languageMap = {
   pt: "portuguese",
   nl: "dutch",
 };
+
+interface NavigatorLanguage {
+  userLanguage?: string;
+}
+
+export const getUserLanguage = (defaultLanguage: string | undefined): LANGUAGE_TYPE => {
+  let userLanguage = defaultLanguage;
+  if (!userLanguage) {
+    const browserLanguage =
+      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";
+};