fix whitelabel not applying due to out of sync uiconfig

Web3Auth · Oct 20, 2023 · 1c99e32 · 1c99e32
1 parent feb8cb4
commit 1c99e32
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 26 deletions.
diff --git a/packages/modal/src/modalManager.ts b/packages/modal/src/modalManager.ts
@@ -96,20 +96,24 @@ export class Web3Auth extends Web3AuthNoModal implements IWeb3AuthModal {
     if (!this.options.uiConfig) this.options.uiConfig = {};
     if (!this.options.uiConfig.defaultLanguage) this.options.uiConfig.defaultLanguage = getUserLanguage(this.options.uiConfig.defaultLanguage);
     if (!this.options.uiConfig.mode) this.options.uiConfig.mode = "auto";
+  }
+
+  public async initModal(params?: { modalConfig?: Record<WALLET_ADAPTER_TYPE, ModalConfig> }): Promise<void> {
+    super.checkInitRequirements();
 
+    const whitelabel = await getWhiteLabel(this.options.clientId);
+    this.options.uiConfig = {
+      // TODO: should whitelabel override?
+      // TODO: will we remove specifying via code in future?
+      ...this.options.uiConfig,
+      ...whitelabel,
+    };
     this.loginModal = new LoginModal({
       ...this.options.uiConfig,
       adapterListener: this,
     });
     this.subscribeToLoginModalEvents();
-  }
 
-  public async initModal(params?: { modalConfig?: Record<WALLET_ADAPTER_TYPE, ModalConfig> }): Promise<void> {
-    super.checkInitRequirements();
-
-    // TODO: handle get whitelabel error
-    const whitelabel = await getWhiteLabel(this.options.clientId);
-    this.loginModal.updateUIConfigFromWhitelabel(whitelabel);
     await this.loginModal.initModal();
     const providedChainConfig = this.options.chainConfig;
 

diff --git a/packages/ui/src/components/Modal.tsx b/packages/ui/src/components/Modal.tsx
@@ -1,5 +1,5 @@
 import type { SafeEventEmitter } from "@toruslabs/openlogin-jrpc";
-import { LOGIN_PROVIDER, WhiteLabelData } from "@toruslabs/openlogin-utils";
+import { LOGIN_PROVIDER } from "@toruslabs/openlogin-utils";
 import { ADAPTER_NAMES, log } from "@web3auth/base";
 import cloneDeep from "lodash.clonedeep";
 import deepmerge from "lodash.merge";
@@ -20,12 +20,10 @@ import SocialLogins from "./SocialLogins";
 interface ModalProps {
   stateListener: SafeEventEmitter;
   appLogo?: string;
-  appName?: string;
   handleSocialLoginClick: (params: SocialLoginEventType) => void;
   handleExternalWalletClick: (params: ExternalWalletEventType) => void;
   handleShowExternalWallets: (externalWalletsInitialized: boolean) => void;
   closeModal: () => void;
-  whiteLabel?: WhiteLabelData;
 }
 
 log.enableAll();
@@ -59,8 +57,7 @@ export default function Modal(props: ModalProps) {
   const { isDark } = useContext(ThemedContext);
   const [t] = useTranslation(undefined, { i18n });
 
-  const { stateListener, appLogo, appName, handleSocialLoginClick, handleExternalWalletClick, handleShowExternalWallets, closeModal, whiteLabel } =
-    props;
+  const { stateListener, appLogo, handleSocialLoginClick, handleExternalWalletClick, handleShowExternalWallets, closeModal } = props;
 
   useEffect(() => {
     stateListener.emit("MOUNTED");
@@ -132,7 +129,11 @@ export default function Modal(props: ModalProps) {
 
   const isEmailPrimary = modalState.socialLoginsConfig?.uiConfig?.primaryButton === "emailLogin";
   const isExternalPrimary = modalState.socialLoginsConfig?.uiConfig?.primaryButton === "externalLogin";
-  const primaryColor = whiteLabel?.theme?.primary || "";
+  const primaryColor = modalState.socialLoginsConfig?.uiConfig?.theme?.primary || "";
+  const privacyPolicy = modalState.socialLoginsConfig?.uiConfig?.privacyPolicy;
+  const tncLink = modalState.socialLoginsConfig?.uiConfig?.tncLink;
+  const defaultLanguage = modalState.socialLoginsConfig?.uiConfig?.defaultLanguage;
+  const appName = modalState.socialLoginsConfig?.uiConfig?.appName;
 
   const externalWalletButton = (
     <div className="w3ajs-external-wallet w3a-group">
@@ -177,8 +178,7 @@ export default function Modal(props: ModalProps) {
     return modalState.socialLoginsConfig?.loginMethods[LOGIN_PROVIDER.SMS_PASSWORDLESS]?.showOnModal;
   }, [modalState.socialLoginsConfig?.loginMethods]);
 
-  // const modalClassName = `w3a-modal ${isDark ? "" : " w3a-modal--light"}`;
-  const modalClassName = `w3a-modal ${isDark ? "" : ""}`;
+  const modalClassName = `w3a-modal`;
 
   return (
     modalState.modalVisibilityDelayed && (
@@ -244,7 +244,7 @@ export default function Modal(props: ModalProps) {
             </div>
           )}
 
-          <Footer privacyPolicy={whiteLabel?.privacyPolicy} tncLink={whiteLabel?.tncLink} defaultLanguage={whiteLabel.defaultLanguage} />
+          <Footer privacyPolicy={privacyPolicy} tncLink={tncLink} defaultLanguage={defaultLanguage} />
         </div>
       </div>
     )

diff --git a/packages/ui/src/loginModal.tsx b/packages/ui/src/loginModal.tsx
@@ -1,7 +1,6 @@
 import "../css/web3auth.css";
 
 import { SafeEventEmitter } from "@toruslabs/openlogin-jrpc";
-import { WhiteLabelData } from "@toruslabs/openlogin-utils";
 import {
   ADAPTER_EVENTS,
   BaseAdapterConfig,
@@ -76,13 +75,6 @@ class LoginModal extends SafeEventEmitter {
     return this.uiConfig.mode === "dark" || (this.uiConfig.mode === "auto" && window.matchMedia("(prefers-color-scheme: dark)").matches);
   }
 
-  updateUIConfigFromWhitelabel = (whitelabel: WhiteLabelData) => {
-    this.uiConfig = {
-      ...this.uiConfig,
-      ...whitelabel,
-    };
-  };
-
   initModal = async (): Promise<void> => {
     const darkState = { isDark: this.isDark };
 
@@ -188,8 +180,6 @@ class LoginModal extends SafeEventEmitter {
             handleExternalWalletClick={this.handleExternalWalletClick}
             handleSocialLoginClick={this.handleSocialLoginClick}
             appLogo={darkState.isDark ? this.uiConfig.logoDark : this.uiConfig.logoLight}
-            appName={this.uiConfig.appName}
-            whiteLabel={this.uiConfig}
           />
         </ThemedContext.Provider>
       );