feat: make uiconfig logo require on web3auth sdk

Author: lionellbriones

demo/vue-app-new/src/MainView.vue

@@ -73,7 +73,7 @@ const options = computed((): Web3AuthOptions => {
     const { confirmationStrategy } = formData.walletPlugin;
     walletServicesConfig = {
       ...walletServicesConfig,
-      whiteLabel: { showWidgetButton: true, logoLight: "", logoDark: "" },
+      whiteLabel: { showWidgetButton: true },
       confirmationStrategy,
     };
   }
@@ -112,14 +112,25 @@ const options = computed((): Web3AuthOptions => {
 
   const { widget, targetId } = formData;
   const uiConfig: Web3AuthOptions["uiConfig"] = enabledWhiteLabel
-    ? { ...whiteLabel, widgetType: widget, targetId }
-    : { widgetType: widget, targetId };
+    ? {
+        ...whiteLabel,
+        widgetType: widget,
+        targetId,
+        logoLight: whiteLabel.logoLight || "",
+        logoDark: whiteLabel.logoDark || "",
+      }
+    : {
+        widgetType: widget,
+        targetId,
+        logoLight: "",
+        logoDark: "",
+      };
   const authConnectorInstance = authConnector({ connectorSettings: {} });
 
   return {
     clientId: clientIds[formData.network],
     web3AuthNetwork: formData.network,
-    uiConfig: uiConfig as UIConfig,
+    uiConfig: uiConfig,
     accountAbstractionConfig,
     useAAWithExternalWallet: formData.useAAWithExternalWallet,
     // TODO: Add more options

packages/modal/src/modalManager.ts

@@ -43,7 +43,16 @@ export interface Web3AuthOptions extends IWeb3AuthCoreOptions {
   /**
    * Config for configuring modal ui display properties
    */
-  uiConfig?: Omit<UIConfig, "connectorListener">;
+  uiConfig: Omit<UIConfig, "connectorListener" | "logoLight" | "logoDark"> & {
+    /**
+     * App logo to use in light mode
+     */
+    logoLight: string;
+    /**
+     * App logo to use in dark mode
+     */
+    logoDark: string;
+  };
 
   /**
    * Config for configuring modal ui display properties
@@ -62,7 +71,7 @@ export class Web3Auth extends Web3AuthNoModal implements IWeb3AuthModal {
     super(options, initialState);
     this.options = { ...options };
 
-    if (!this.options.uiConfig) this.options.uiConfig = {};
+    if (!this.options.uiConfig) this.options.uiConfig = { logoLight: "", logoDark: "" };
     if (this.options.modalConfig) this.modalConfig = this.options.modalConfig;
 
     log.info("modalConfig", this.modalConfig);
@@ -209,9 +218,14 @@ export class Web3Auth extends Web3AuthNoModal implements IWeb3AuthModal {
     this.options.uiConfig = deepmerge(cloneDeep(projectConfig.whitelabel || {}), 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 = "light";
-    this.options.uiConfig = deepmerge(projectConfig.loginModal || {}, this.options.uiConfig, {
+    const uiConfig = deepmerge.all<UIConfig>([projectConfig.loginModal || {}, this.options.uiConfig], {
       arrayMerge: (_, sourceArray) => sourceArray,
     });
+    this.options.uiConfig = {
+      ...uiConfig,
+      logoLight: uiConfig.logoLight || "",
+      logoDark: uiConfig.logoDark || "",
+    };
 
     // merge login methods order from project config and user config, with user config taking precedence
     const defaultAuthConnections = projectConfig.embeddedWalletAuth.filter((x) => x.isDefault).map((x) => x.authConnection);

packages/no-modal/src/base/core/IWeb3Auth.ts

@@ -38,7 +38,7 @@ export type AuthLoginParams = LoginParams & {
 
 export type WalletServicesConfig = Omit<
   WsEmbedParams,
-  "buildEnv" | "enableLogging" | "chainId" | "chains" | "confirmationStrategy" | "accountAbstractionConfig" | "whiteLabel"
+  "buildEnv" | "enableLogging" | "chainId" | "chains" | "confirmationStrategy" | "accountAbstractionConfig"
 > & {
   /**
    * Determines how to show confirmation screens
@@ -53,11 +53,6 @@ export type WalletServicesConfig = Omit<
    */
   confirmationStrategy?: Exclude<WsEmbedParams["confirmationStrategy"], "popup">;
   modalZIndex?: number;
-
-  /**
-   * WhiteLabel options for web3auth
-   */
-  whiteLabel?: NonNullable<WsEmbedParams["whiteLabel"]> & Required<Pick<NonNullable<WsEmbedParams["whiteLabel"]>, "logoLight" | "logoDark">>;
 };
 
 export interface UIConfig extends WhiteLabelData {