feat: make logo optional

Author: lionellbriones

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

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

packages/modal/src/modalManager.ts

@@ -43,16 +43,7 @@ export interface Web3AuthOptions extends IWeb3AuthCoreOptions {
   /**
    * Config for configuring modal ui display properties
    */
-  uiConfig: Omit<UIConfig, "connectorListener" | "logoLight" | "logoDark"> & {
-    /**
-     * App logo to use in light mode
-     */
-    logoLight: string;
-    /**
-     * App logo to use in dark mode
-     */
-    logoDark: string;
-  };
+  uiConfig?: Omit<UIConfig, "connectorListener">;
 
   /**
    * Config for configuring modal ui display properties
@@ -71,7 +62,7 @@ export class Web3Auth extends Web3AuthNoModal implements IWeb3AuthModal {
     super(options, initialState);
     this.options = { ...options };
 
-    if (!this.options.uiConfig) this.options.uiConfig = { logoLight: "", logoDark: "" };
+    if (!this.options.uiConfig) this.options.uiConfig = {};
     if (this.options.modalConfig) this.modalConfig = this.options.modalConfig;
 
     log.info("modalConfig", this.modalConfig);
@@ -218,14 +209,9 @@ 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";
-    const uiConfig = deepmerge.all<UIConfig>([projectConfig.loginModal || {}, this.options.uiConfig], {
+    this.options.uiConfig = deepmerge(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/connectors/auth-connector/authConnector.ts

@@ -143,18 +143,15 @@ class AuthConnector extends BaseConnector<AuthLoginParams> {
           const wsSupportedChains = chains.filter(
             (x) => x.chainNamespace === CHAIN_NAMESPACES.EIP155 || x.chainNamespace === CHAIN_NAMESPACES.SOLANA
           );
-          const wsEmbedWhiteLabel = {
-            ...this.authOptions.whiteLabel,
-            ...this.wsSettings.whiteLabel,
-            logoLight: this.wsSettings.whiteLabel?.logoLight || this.authOptions.whiteLabel?.logoLight || "",
-            logoDark: this.wsSettings.whiteLabel?.logoDark || this.authOptions.whiteLabel?.logoDark || "",
-          };
           this.wsEmbedInstancePromise = this.wsEmbedInstance
             .init({
               ...this.wsSettings,
               chains: wsSupportedChains as ProviderConfig[],
               chainId,
-              whiteLabel: { ...wsEmbedWhiteLabel, logoLight: wsEmbedWhiteLabel.logoLight || "", logoDark: wsEmbedWhiteLabel.logoDark || "" },
+              whiteLabel: {
+                ...this.authOptions.whiteLabel,
+                ...this.wsSettings.whiteLabel,
+              },
             })
             .then(() => {
               this.wsEmbedInstancePromise = null;
@@ -619,7 +616,7 @@ export const authConnector = (params?: AuthConnectorFuncParams): ConnectorFn =>
     const finalWsSettings: WalletServicesSettings = {
       ...coreOptions.walletServicesConfig,
       whiteLabel,
-      accountAbstractionConfig: coreOptions.accountAbstractionConfig as WalletServicesSettings["accountAbstractionConfig"],
+      accountAbstractionConfig: coreOptions.accountAbstractionConfig,
       enableLogging: coreOptions.enableLogging,
     };
 

packages/no-modal/src/noModal.ts

@@ -58,7 +58,7 @@ import {
 } from "./base";
 import { cookieStorage } from "./base/cookie";
 import { deserialize } from "./base/deserialize";
-import { authConnector, type AuthConnectorType, WalletServicesSettings } from "./connectors/auth-connector";
+import { authConnector, type AuthConnectorType } from "./connectors/auth-connector";
 import { metaMaskConnector } from "./connectors/metamask-connector";
 import { walletServicesPlugin } from "./plugins/wallet-services-plugin";
 import { type AccountAbstractionProvider } from "./providers/account-abstraction-provider";
@@ -607,22 +607,16 @@ export class Web3AuthNoModal extends SafeEventEmitter<Web3AuthNoModalEvents> imp
       buttonPosition: portfolioWidgetPosition,
       defaultPortfolio,
     };
-    const whiteLabel: WalletServicesSettings["whiteLabel"] = deepmerge.all([
-      projectConfigWhiteLabel,
-      this.coreOptions.walletServicesConfig?.whiteLabel || {},
-    ]);
+    const whiteLabel = deepmerge.all([projectConfigWhiteLabel, this.coreOptions.walletServicesConfig?.whiteLabel || {}]);
+
     const confirmationStrategy =
       this.coreOptions.walletServicesConfig?.confirmationStrategy ??
       (enableConfirmationModal ? CONFIRMATION_STRATEGY.MODAL : CONFIRMATION_STRATEGY.AUTO_APPROVE);
     const isKeyExportEnabled = this.coreOptions.walletServicesConfig?.enableKeyExport ?? enableKeyExport ?? true;
     this.coreOptions.walletServicesConfig = {
       ...this.coreOptions.walletServicesConfig,
       confirmationStrategy,
-      whiteLabel: {
-        ...whiteLabel,
-        logoLight: whiteLabel?.logoLight || "",
-        logoDark: whiteLabel?.logoDark || "",
-      },
+      whiteLabel,
       enableKeyExport: isKeyExportEnabled,
     };
   }