Merge branch 'master' into feat/sdk-v10-dashboard-config-p1

Author: tanguyenvn

demo/vite-react-app-sfa/package-lock.json

@@ -87,7 +87,7 @@ export const Web3AuthProvider: FunctionComponent<IWeb3AuthState> = ({ children,
         setIsLoading(true);
         const clientId = "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ";
         const authConnectorInstance = authConnector({
-          connectorSettings: { buildEnv: "development" },
+          connectorSettings: { buildEnv: "testing" },
         });
 
         const web3AuthInstance = new Web3AuthNoModal({

demo/vite-react-app-sfa/src/services/web3auth.tsx

@@ -114,6 +114,10 @@ const options = computed((): Web3AuthOptions => {
     plugins,
     multiInjectedProviderDiscovery: formData.multiInjectedProviderDiscovery,
     walletServicesConfig,
+    modalConfig: {
+      connectors: modalParams.value,
+      hideWalletDiscovery: !formData.showWalletDiscovery,
+    }
   };
 });
 
@@ -193,8 +197,6 @@ watch(
 const configs = computed<Web3AuthContextConfig>(() => {
   return {
     web3AuthOptions: options.value,
-    modalConfig: modalParams.value,
-    hideWalletDiscovery: !formData.showWalletDiscovery,
   };
 });
 </script>

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

@@ -1,63 +1,9 @@
-import { CHAIN_NAMESPACES, EVM_CONNECTORS, SOLANA_CONNECTORS } from "@web3auth/no-modal";
+import { EVM_CONNECTORS } from "@web3auth/no-modal";
 
 import { ConnectorsModalConfig } from "./interface";
 
-export const defaultSolanaDappModalConfig: ConnectorsModalConfig = {
-  chainNamespace: CHAIN_NAMESPACES.SOLANA,
-  connectors: {
-    [SOLANA_CONNECTORS.AUTH]: {
-      label: "Auth",
-      showOnModal: true,
-      showOnMobile: true,
-      showOnDesktop: true,
-    },
-  },
-};
-
-export const defaultEvmDappModalConfig: ConnectorsModalConfig = {
-  chainNamespace: CHAIN_NAMESPACES.EIP155,
-  connectors: {
-    [EVM_CONNECTORS.AUTH]: {
-      label: "Auth",
-      showOnModal: true,
-      showOnMobile: true,
-      showOnDesktop: true,
-    },
-    [EVM_CONNECTORS.WALLET_CONNECT_V2]: {
-      label: "Wallet Connect",
-      showOnModal: true,
-      showOnMobile: true,
-      showOnDesktop: true,
-    },
-  },
-};
-
-export const defaultSolanaWalletModalConfig: ConnectorsModalConfig = {
-  chainNamespace: CHAIN_NAMESPACES.SOLANA,
-  connectors: {
-    [SOLANA_CONNECTORS.AUTH]: {
-      label: "Auth",
-      showOnModal: true,
-      showOnMobile: true,
-      showOnDesktop: true,
-    },
-  },
-};
-
-export const defaultEvmWalletModalConfig: ConnectorsModalConfig = {
-  chainNamespace: CHAIN_NAMESPACES.EIP155,
-  connectors: {
-    [EVM_CONNECTORS.AUTH]: {
-      label: "Auth",
-      showOnModal: true,
-      showOnMobile: true,
-      showOnDesktop: true,
-    },
-  },
-};
-
-export const defaultOtherModalConfig: ConnectorsModalConfig = {
-  chainNamespace: CHAIN_NAMESPACES.OTHER,
+export const defaultConnectorsModalConfig: ConnectorsModalConfig = {
+  hideWalletDiscovery: false,
   connectors: {
     [EVM_CONNECTORS.AUTH]: {
       label: "Auth",

packages/modal/src/config.ts

@@ -1,20 +1,14 @@
-import type { BaseConnectorConfig, ChainNamespaceType, IProvider, IWeb3Auth, LoginMethodConfig, WALLET_CONNECTOR_TYPE } from "@web3auth/no-modal";
+import type { BaseConnectorConfig, IProvider, IWeb3Auth, LoginMethodConfig, WALLET_CONNECTOR_TYPE } from "@web3auth/no-modal";
 
 export interface ModalConfig extends Omit<BaseConnectorConfig, "isInjected"> {
   loginMethods?: LoginMethodConfig;
 }
 
 export interface ConnectorsModalConfig {
-  chainNamespace: ChainNamespaceType;
   connectors?: Record<WALLET_CONNECTOR_TYPE, ModalConfig>;
-}
-
-export interface ModalConfigParams {
-  modalConfig?: Record<WALLET_CONNECTOR_TYPE, ModalConfig>;
   hideWalletDiscovery?: boolean;
 }
-
 export interface IWeb3AuthModal extends IWeb3Auth {
-  initModal(params?: ModalConfigParams): Promise<void>;
+  initModal(): Promise<void>;
   connect(): Promise<IProvider | null>;
 }

packages/modal/src/interface.ts

@@ -22,8 +22,8 @@ import {
 } from "@web3auth/no-modal";
 import deepmerge from "deepmerge";
 
-import { defaultOtherModalConfig, walletRegistryUrl } from "./config";
-import { type ConnectorsModalConfig, type IWeb3AuthModal, type ModalConfig, type ModalConfigParams } from "./interface";
+import { defaultConnectorsModalConfig, walletRegistryUrl } from "./config";
+import { type ConnectorsModalConfig, type IWeb3AuthModal, type ModalConfig } from "./interface";
 import {
   AUTH_PROVIDERS,
   capitalizeFirstLetter,
@@ -39,31 +39,34 @@ export interface Web3AuthOptions extends IWeb3AuthCoreOptions {
    * Config for configuring modal ui display properties
    */
   uiConfig?: Omit<UIConfig, "connectorListener">;
+
+  /**
+   * Config for configuring modal ui display properties
+   */
+  modalConfig?: ConnectorsModalConfig;
 }
 
 export class Web3Auth extends Web3AuthNoModal implements IWeb3AuthModal {
   public loginModal: LoginModal;
 
   readonly options: Web3AuthOptions;
 
-  private modalConfig: ConnectorsModalConfig = cloneDeep(defaultOtherModalConfig);
+  private modalConfig: ConnectorsModalConfig = cloneDeep(defaultConnectorsModalConfig);
 
   constructor(options: Web3AuthOptions) {
     super(options);
     this.options = { ...options };
 
     if (!this.options.uiConfig) this.options.uiConfig = {};
-  }
+    if (this.options.modalConfig) this.modalConfig = this.options.modalConfig;
 
-  public setModalConfig(modalConfig: ConnectorsModalConfig): void {
-    super.checkInitRequirements();
-    this.modalConfig = modalConfig;
+    log.info("modalConfig", this.modalConfig);
   }
 
-  public async initModal(params?: ModalConfigParams): Promise<void> {
+  public async initModal(): Promise<void> {
     super.checkInitRequirements();
     // get project config and wallet registry
-    const { projectConfig, walletRegistry } = await this.getProjectAndWalletConfig(params);
+    const { projectConfig, walletRegistry } = await this.getProjectAndWalletConfig();
     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";
@@ -89,7 +92,7 @@ export class Web3Auth extends Web3AuthNoModal implements IWeb3AuthModal {
 
     // initialize connectors
     this.on(CONNECTOR_EVENTS.CONNECTORS_UPDATED, ({ connectors: newConnectors }) =>
-      this.initConnectors({ connectors: newConnectors, projectConfig, modalConfig: params, disabledExternalWallets })
+      this.initConnectors({ connectors: newConnectors, projectConfig, disabledExternalWallets })
     );
     await this.loadConnectors({ projectConfig });
 
@@ -142,7 +145,7 @@ export class Web3Auth extends Web3AuthNoModal implements IWeb3AuthModal {
     return { disabledExternalWallets, filteredWalletRegistry };
   }
 
-  private async getProjectAndWalletConfig(params?: ModalConfigParams) {
+  private async getProjectAndWalletConfig() {
     // get project config
     let projectConfig: ProjectConfig;
     try {
@@ -159,7 +162,7 @@ export class Web3Auth extends Web3AuthNoModal implements IWeb3AuthModal {
     // get wallet registry
     let walletRegistry: WalletRegistry = { others: {}, default: {} };
     const isExternalWalletEnabled = Boolean(projectConfig.externalWalletAuth);
-    if (isExternalWalletEnabled && !params?.hideWalletDiscovery) {
+    if (isExternalWalletEnabled && !this.modalConfig?.hideWalletDiscovery) {
       try {
         walletRegistry = await fetchWalletRegistry(walletRegistryUrl);
       } catch (e) {
@@ -172,16 +175,14 @@ export class Web3Auth extends Web3AuthNoModal implements IWeb3AuthModal {
   private async initConnectors({
     connectors,
     projectConfig,
-    modalConfig,
     disabledExternalWallets,
   }: {
     connectors: IConnector<unknown>[];
     projectConfig: ProjectConfig;
-    modalConfig: ModalConfigParams;
     disabledExternalWallets: Set<string>;
   }) {
     // filter connectors based on config
-    const filteredConnectorNames = await this.filterConnectors({ modalConfig, projectConfig, disabledExternalWallets });
+    const filteredConnectorNames = await this.filterConnectors({ projectConfig, disabledExternalWallets });
 
     // initialize connectors based on availability
     const { hasInAppConnectors, hasExternalConnectors } = await this.checkConnectorAvailability(filteredConnectorNames);
@@ -202,15 +203,13 @@ export class Web3Auth extends Web3AuthNoModal implements IWeb3AuthModal {
   }
 
   private async filterConnectors({
-    modalConfig,
     projectConfig,
     disabledExternalWallets,
   }: {
-    modalConfig: ModalConfigParams;
     projectConfig: ProjectConfig;
     disabledExternalWallets: Set<string>;
   }): Promise<string[]> {
-    // modal config from project config
+    // Auth connector config: merge code config with config from dashboard
     const loginMethods: LoginMethodConfig = {};
     for (const authConnectionConfig of projectConfig.embeddedWalletAuth || []) {
       const connectionType = authConnectionConfig.authConnection;
@@ -222,14 +221,13 @@ export class Web3Auth extends Web3AuthNoModal implements IWeb3AuthModal {
         showOnMobile: true,
       };
     }
-    const projectModalConfig: Record<WALLET_CONNECTOR_TYPE, ModalConfig> = {
+    const dashboardConnectorConfig: Record<WALLET_CONNECTOR_TYPE, ModalConfig> = {
       [WALLET_CONNECTORS.AUTH]: { label: WALLET_CONNECTORS.AUTH, loginMethods },
     };
-    // merge with user config
-    if (modalConfig?.modalConfig?.[WALLET_CONNECTORS.AUTH]) {
-      if (!modalConfig.modalConfig[WALLET_CONNECTORS.AUTH].loginMethods) modalConfig.modalConfig[WALLET_CONNECTORS.AUTH].loginMethods = {};
+    if (this.modalConfig?.connectors?.[WALLET_CONNECTORS.AUTH]) {
+      if (!this.modalConfig.connectors[WALLET_CONNECTORS.AUTH].loginMethods) this.modalConfig.connectors[WALLET_CONNECTORS.AUTH].loginMethods = {};
     }
-    modalConfig.modalConfig = deepmerge(projectModalConfig, cloneDeep(modalConfig.modalConfig || {}));
+    this.modalConfig.connectors = deepmerge(dashboardConnectorConfig, cloneDeep(this.modalConfig.connectors));
 
     // external wallets config
     const isExternalWalletEnabled = Boolean(projectConfig.externalWalletAuth);
@@ -239,29 +237,31 @@ export class Web3Auth extends Web3AuthNoModal implements IWeb3AuthModal {
     const allConnectorNames = [
       ...new Set([...Object.keys(this.modalConfig.connectors || {}), ...this.connectors.map((connector) => connector.name)]),
     ];
-    const connectorConfigurationPromises = allConnectorNames.map(async (connectorName) => {
+    const connectorConfigurationPromises = allConnectorNames.map(async (connectorName: string) => {
       // start with the default config of connector.
-      let connectorConfig = this.modalConfig.connectors?.[connectorName] || {
+      const defaultConnectorConfig = {
         label: CONNECTOR_NAMES[connectorName] || connectorName.split("-").map(capitalizeFirstLetter).join(" "),
         showOnModal: true,
         showOnMobile: true,
         showOnDesktop: true,
       };
-      // override the default config of connector if some config is being provided by the user.
-      if (modalConfig?.modalConfig?.[connectorName]) {
-        connectorConfig = { ...connectorConfig, ...modalConfig.modalConfig[connectorName] };
-      }
+
+      this.modalConfig.connectors[connectorName] = {
+        ...defaultConnectorConfig,
+        ...(this.modalConfig?.connectors?.[connectorName] || {}),
+      };
 
       // check if connector is configured/added by user and exist in connectors map.
       const connector = this.getConnector(connectorName);
-      log.debug("connector config", connectorName, connectorConfig.showOnModal, connector);
+      log.debug("connector config", connectorName, this.modalConfig.connectors?.[connectorName]?.showOnModal, connector);
 
-      // if connector is not custom configured then check if it is available in default connectors.
-      // and if connector is not hidden by user
+      // check if connector is configured/added by user and exist in connectors map.
+      const connectorConfig = this.modalConfig.connectors?.[connectorName];
       if (!connector) {
         if (connectorConfig.showOnModal) throw WalletInitializationError.invalidParams(`Connector ${connectorName} is not configured`);
         return;
       }
+
       // skip connector if it is hidden by user
       if (!connectorConfig.showOnModal) return;
 
@@ -275,7 +275,7 @@ export class Web3Auth extends Web3AuthNoModal implements IWeb3AuthModal {
       // skip WC connector if external wallets are disabled or hideWalletDiscovery is true
       if (connectorName === WALLET_CONNECTORS.WALLET_CONNECT_V2) {
         if (!isExternalWalletEnabled) return;
-        if (modalConfig?.hideWalletDiscovery) return;
+        if (this.modalConfig?.hideWalletDiscovery) return;
       }
 
       this.modalConfig.connectors[connectorName] = connectorConfig;

packages/modal/src/modalManager.ts

@@ -117,12 +117,7 @@ export function Web3AuthInnerProvider(params: PropsWithChildren<Web3AuthProvider
       try {
         setInitError(null);
         setIsInitializing(true);
-        const { modalConfig, hideWalletDiscovery } = config;
-        if (modalConfig) {
-          await web3Auth.initModal({ modalConfig, hideWalletDiscovery });
-        } else {
-          await web3Auth.initModal();
-        }
+        await web3Auth.initModal();
       } catch (error) {
         setInitError(error as Error);
       } finally {

packages/modal/src/react/context/Web3AuthInnerContext.ts

@@ -1,14 +1,9 @@
-import type { ConnectorFn, IBaseWeb3AuthHookContext, IProvider, PluginFn, WALLET_CONNECTOR_TYPE } from "@web3auth/no-modal";
+import type { IBaseWeb3AuthHookContext, IProvider } from "@web3auth/no-modal";
 
-import { type ModalConfig } from "../interface";
 import type { Web3Auth, Web3AuthOptions } from "../modalManager";
 
 export type Web3AuthContextConfig = {
   web3AuthOptions: Web3AuthOptions;
-  modalConfig?: Record<WALLET_CONNECTOR_TYPE, ModalConfig>;
-  hideWalletDiscovery?: boolean;
-  connectors?: ConnectorFn[];
-  plugins?: PluginFn[];
 };
 
 export interface Web3AuthProviderProps {

packages/modal/src/react/interfaces.ts

@@ -146,7 +146,7 @@ export default function Modal(props: ModalProps) {
         <Button
           variant={isExternalPrimary ? "primary" : "tertiary"}
           type="button"
-          className="w3a--w-full w3ajs-external-toggle__button"
+          className="w3ajs-external-toggle__button w3a--w-full"
           style={{ width: "100%" }}
           onClick={() => {
             setModalState((prevState) => {

packages/modal/src/ui/components/Modal.tsx

@@ -37,7 +37,8 @@ export default function SocialLoginPasswordless(props: SocialLoginPasswordlessPr
           loginParams: {
             authConnection: AUTH_CONNECTION.EMAIL_PASSWORDLESS,
             authConnectionId: emailConfig.authConnectionId,
-            groupedAuthConnectionId: "",
+            groupedAuthConnectionId: emailConfig.groupedAuthConnectionId,
+            extraLoginOptions: emailConfig.extraLoginOptions,
             login_hint: value,
             name: "Email",
           },
@@ -55,6 +56,7 @@ export default function SocialLoginPasswordless(props: SocialLoginPasswordlessPr
             authConnection: AUTH_CONNECTION.SMS_PASSWORDLESS,
             authConnectionId: smsConfig.authConnectionId,
             groupedAuthConnectionId: smsConfig.groupedAuthConnectionId,
+            extraLoginOptions: smsConfig.extraLoginOptions,
             login_hint: typeof result === "string" ? result : number,
             name: "Mobile",
           },
@@ -104,12 +106,12 @@ export default function SocialLoginPasswordless(props: SocialLoginPasswordlessPr
       <div className="w3a-group__title">
         {t(title)}
         {isSmsVisible && (
-          <div className="w3a--relative w3a--flex w3a--flex-col w3a--items-center w3a--cursor-pointer w3a--group">
+          <div className="w3a--group w3a--relative w3a--flex w3a--cursor-pointer w3a--flex-col w3a--items-center">
             <Icon iconName="information-circle-light" darkIconName="information-circle" />
-            <div className="w3a--absolute w3a--z-20 w3a--flex-col w3a--items-center w3a--hidden w3a--mb-5 w3a--top-4 group-hover:w3a--flex">
-              <div className="w3a--w-3 w3a--h-3 w3a--ml-[3px] -w3a--mb-2 w3a--rotate-45 w3a--bg-app-gray-50 dark:w3a--bg-app-gray-600" />
+            <div className="w3a--absolute w3a--top-4 w3a--z-20 w3a--mb-5 w3a--hidden w3a--flex-col w3a--items-center group-hover:w3a--flex">
+              <div className="-w3a--mb-2 w3a--ml-[3px] w3a--size-3 w3a--rotate-45 w3a--bg-app-gray-50 dark:w3a--bg-app-gray-600" />
               <div
-                className={`w3a--relative w3a--p-4 w3a--w-[300px] w3a--text-xs w3a--leading-none w3a--text-app-white w3a--rounded-md w3a--bg-app-gray-50 dark:w3a--bg-app-gray-600 w3a--shadow-lg ${
+                className={`w3a--relative w3a--w-[300px] w3a--rounded-md w3a--bg-app-gray-50 w3a--p-4 w3a--text-xs w3a--leading-none w3a--text-app-white w3a--shadow-lg dark:w3a--bg-app-gray-600 ${
                   isSmsVisible && !isEmailVisible ? "w3a--left-20" : "w3a--left-8"
                 }`}
               >
@@ -124,7 +126,7 @@ export default function SocialLoginPasswordless(props: SocialLoginPasswordlessPr
       </div>
       <form className="w3ajs-passwordless-form" onSubmit={(e) => handleFormSubmit(e)}>
         <input
-          className="w3a--w-full w3a--mb-4 w3a-text-field"
+          className="w3a-text-field w3a--mb-4 w3a--w-full"
           name="passwordless-input"
           required
           placeholder={`${t("modal.social.sms-placeholder-text")} ${placeholder}`}