Merge pull request #2133 from Web3Auth/feat/v10-login-modal

sort login methods from auth connection in project config

Author: chaitanyapotti

package-lock.json

@@ -63,12 +63,9 @@ export class Web3Auth extends Web3AuthNoModal implements IWeb3AuthModal {
     super.checkInitRequirements();
     // get project config and wallet registry
     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";
-    this.options.uiConfig = deepmerge(projectConfig.loginModal || {}, this.options.uiConfig || {});
 
     // init config
+    this.initUIConfig(projectConfig);
     super.initAccountAbstractionConfig(projectConfig);
     super.initChainsConfig(projectConfig);
     super.initCachedConnectorAndChainId();
@@ -194,6 +191,25 @@ export class Web3Auth extends Web3AuthNoModal implements IWeb3AuthModal {
     return { projectConfig, walletRegistry };
   }
 
+  private initUIConfig(projectConfig: ProjectConfig) {
+    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);
+
+    // 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);
+    const mergedAuthConnections = [...(this.options.uiConfig.loginMethodsOrder || []), ...defaultAuthConnections];
+    const loginMethodsOrder = [];
+    const authConnectionSet = new Set();
+    for (const authConnection of mergedAuthConnections) {
+      if (authConnectionSet.has(authConnection)) continue;
+      authConnectionSet.add(authConnection);
+      loginMethodsOrder.push(authConnection);
+    }
+    this.options.uiConfig.loginMethodsOrder = loginMethodsOrder;
+  }
+
   private async initConnectors({
     connectors,
     projectConfig,

packages/modal/src/modalManager.ts

@@ -9,7 +9,6 @@ export const restrictedLoginMethods: Set<AUTH_CONNECTION_TYPE> = new Set([
   AUTH_CONNECTION.PASSKEYS,
   AUTH_CONNECTION.TELEGRAM,
   AUTH_CONNECTION.AUTHENTICATOR,
-  AUTH_CONNECTION.WEIBO,
 ]);
 export const AUTH_PROVIDERS = Object.values(AUTH_CONNECTION).filter((x) => !restrictedLoginMethods.has(x));
 

packages/modal/src/ui/config.ts

@@ -30,7 +30,7 @@ export interface UIConfig extends CoreUIConfig, LoginModalConfig {
   /**
    * order of how login methods are shown
    *
-   * @defaultValue `["google", "facebook", "twitter", "reddit", "discord", "twitch", "apple", "line", "github", "kakao", "linkedin", "weibo", "wechat", "email_passwordless"]`
+   * @defaultValue `["google", "facebook", "twitter", "reddit", "discord", "twitch", "apple", "line", "github", "kakao", "linkedin", "wechat", "email_passwordless"]`
    */
   loginMethodsOrder?: string[];