@web3auth/modal 10.0.0-alpha.1 → 10.0.0-alpha.2

package/dist/lib.cjs/packages/modal/src/ui/components/Modal.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var jsxRuntime = require('react/jsx-runtime');
 var auth = require('@web3auth/auth');
 var noModal = require('@web3auth/no-modal');
 var deepmerge = require('deepmerge');
@@ -15,7 +16,6 @@ var Footer = require('./Footer.js');
 var Header = require('./Header.js');
 var SocialLoginPasswordless = require('./SocialLoginPasswordless.js');
 var SocialLogins = require('./SocialLogins.js');
-var jsxRuntime = require('react/jsx-runtime');
 
 noModal.log.enableAll();
 function Modal(props) {
@@ -48,7 +48,7 @@ function Modal(props) {
     stateListener,
     appLogo,
     appName,
-    chainNamespace,
+    chainNamespaces,
     walletRegistry,
     handleSocialLoginClick,
     handleExternalWalletClick,
@@ -81,7 +81,6 @@ function Modal(props) {
     } else {
       setModalTransitionClasses(["w3a-modal__inner", modalState.modalVisibility ? "w3a-modal__inner--active" : ""]);
       // hide external wallets, if modal is closing, so that it will show social login screen on reopen.
-
       timeOutId = window.setTimeout(() => {
         setModalState(prevState => {
           return _objectSpread(_objectSpread({}, prevState), {}, {
@@ -125,7 +124,7 @@ function Modal(props) {
     } = params;
     setModalState(prevState => {
       return _objectSpread(_objectSpread({}, prevState), {}, {
-        detailedLoaderConnector: loginParams.loginProvider,
+        detailedLoaderConnector: loginParams.authConnection,
         detailedLoaderConnectorName: loginParams.name
       });
     });
@@ -133,11 +132,11 @@ function Modal(props) {
   };
   const isEmailPrimary = ((_modalState$socialLog = modalState.socialLoginsConfig) === null || _modalState$socialLog === void 0 || (_modalState$socialLog = _modalState$socialLog.uiConfig) === null || _modalState$socialLog === void 0 ? void 0 : _modalState$socialLog.primaryButton) === "emailLogin";
   const isExternalPrimary = ((_modalState$socialLog2 = modalState.socialLoginsConfig) === null || _modalState$socialLog2 === void 0 || (_modalState$socialLog2 = _modalState$socialLog2.uiConfig) === null || _modalState$socialLog2 === void 0 ? void 0 : _modalState$socialLog2.primaryButton) === "externalLogin";
-  const externalWalletButton = /*#__PURE__*/jsxRuntime.jsx("div", {
+  const externalWalletButton = jsxRuntime.jsx("div", {
     className: "w3ajs-external-wallet w3a-group w3a--w-full",
-    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+    children: jsxRuntime.jsx("div", {
       className: "w3a-external-toggle w3ajs-external-toggle",
-      children: /*#__PURE__*/jsxRuntime.jsx(Button, {
+      children: jsxRuntime.jsx(Button, {
         variant: isExternalPrimary ? "primary" : "tertiary",
         type: "button",
         className: "w3a--w-full w3ajs-external-toggle__button",
@@ -164,32 +163,32 @@ function Modal(props) {
     var _modalState$socialLog3, _modalState$socialLog4;
     if (modalState.showExternalWalletsOnly) return false;
     if (Object.keys(((_modalState$socialLog3 = modalState.socialLoginsConfig) === null || _modalState$socialLog3 === void 0 ? void 0 : _modalState$socialLog3.loginMethods) || {}).length === 0) return false;
-    const isAnySocialLoginVisible = Object.entries(((_modalState$socialLog4 = modalState.socialLoginsConfig) === null || _modalState$socialLog4 === void 0 ? void 0 : _modalState$socialLog4.loginMethods) || {}).some(([k, v]) => k !== auth.LOGIN_PROVIDER.EMAIL_PASSWORDLESS && v.showOnModal !== false);
+    const isAnySocialLoginVisible = Object.entries(((_modalState$socialLog4 = modalState.socialLoginsConfig) === null || _modalState$socialLog4 === void 0 ? void 0 : _modalState$socialLog4.loginMethods) || {}).some(([k, v]) => k !== auth.AUTH_CONNECTION.EMAIL_PASSWORDLESS && v.showOnModal !== false);
     if (isAnySocialLoginVisible) return true;
     return false;
   }, [modalState.showExternalWalletsOnly, (_modalState$socialLog5 = modalState.socialLoginsConfig) === null || _modalState$socialLog5 === void 0 ? void 0 : _modalState$socialLog5.loginMethods]);
   noModal.log.info("modal state", modalState, areSocialLoginsVisible);
   const isEmailPasswordlessLoginVisible = React.useMemo(() => {
     var _modalState$socialLog6;
-    return (_modalState$socialLog6 = modalState.socialLoginsConfig) === null || _modalState$socialLog6 === void 0 || (_modalState$socialLog6 = _modalState$socialLog6.loginMethods[auth.LOGIN_PROVIDER.EMAIL_PASSWORDLESS]) === null || _modalState$socialLog6 === void 0 ? void 0 : _modalState$socialLog6.showOnModal;
+    return (_modalState$socialLog6 = modalState.socialLoginsConfig) === null || _modalState$socialLog6 === void 0 || (_modalState$socialLog6 = _modalState$socialLog6.loginMethods[auth.AUTH_CONNECTION.EMAIL_PASSWORDLESS]) === null || _modalState$socialLog6 === void 0 ? void 0 : _modalState$socialLog6.showOnModal;
   }, [(_modalState$socialLog7 = modalState.socialLoginsConfig) === null || _modalState$socialLog7 === void 0 ? void 0 : _modalState$socialLog7.loginMethods]);
   const isSmsPasswordlessLoginVisible = React.useMemo(() => {
     var _modalState$socialLog8;
-    return (_modalState$socialLog8 = modalState.socialLoginsConfig) === null || _modalState$socialLog8 === void 0 || (_modalState$socialLog8 = _modalState$socialLog8.loginMethods[auth.LOGIN_PROVIDER.SMS_PASSWORDLESS]) === null || _modalState$socialLog8 === void 0 ? void 0 : _modalState$socialLog8.showOnModal;
+    return (_modalState$socialLog8 = modalState.socialLoginsConfig) === null || _modalState$socialLog8 === void 0 || (_modalState$socialLog8 = _modalState$socialLog8.loginMethods[auth.AUTH_CONNECTION.SMS_PASSWORDLESS]) === null || _modalState$socialLog8 === void 0 ? void 0 : _modalState$socialLog8.showOnModal;
   }, [(_modalState$socialLog9 = modalState.socialLoginsConfig) === null || _modalState$socialLog9 === void 0 ? void 0 : _modalState$socialLog9.loginMethods]);
-  return modalState.modalVisibilityDelayed && /*#__PURE__*/jsxRuntime.jsx("div", {
+  return modalState.modalVisibilityDelayed && jsxRuntime.jsx("div", {
     id: "w3a-modal",
     className: "w3a-modal",
-    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+    children: jsxRuntime.jsxs("div", {
       className: `${modalTransitionClasses.join(" ")} ${modalState.status !== interfaces.MODAL_STATUS.INITIALIZED ? "w3a--p-6 w3a--pt-7" : ""} ${(areSocialLoginsVisible || isEmailPasswordlessLoginVisible || isSmsPasswordlessLoginVisible) && !modalState.externalWalletsVisibility ? "" : "wallet-adapter-container"}`,
-      children: [modalState.status !== interfaces.MODAL_STATUS.INITIALIZED ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/jsxRuntime.jsx(Header, {
+      children: [modalState.status !== interfaces.MODAL_STATUS.INITIALIZED ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsx(Header, {
           onClose: closeModal,
           appLogo: appLogo,
           appName: appName
-        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        }), jsxRuntime.jsx("div", {
           className: "w3a-modal__content w3ajs-content",
-          children: /*#__PURE__*/jsxRuntime.jsx(AdapterLoader, {
+          children: jsxRuntime.jsx(AdapterLoader, {
             onClose: onCloseLoader,
             appLogo: appLogo,
             modalStatus: modalState.status,
@@ -198,33 +197,34 @@ function Modal(props) {
             connectorName: modalState.detailedLoaderConnectorName
           })
         })]
-      }) : /*#__PURE__*/jsxRuntime.jsx("div", {
+      }) : jsxRuntime.jsx("div", {
         className: `transition-wrapper ${transition}`,
-        children: (areSocialLoginsVisible || isEmailPasswordlessLoginVisible || isSmsPasswordlessLoginVisible) && !modalState.externalWalletsVisibility ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/jsxRuntime.jsx(Header, {
+        children: (areSocialLoginsVisible || isEmailPasswordlessLoginVisible || isSmsPasswordlessLoginVisible) && !modalState.externalWalletsVisibility ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [jsxRuntime.jsx(Header, {
             onClose: closeModal,
             appLogo: appLogo,
             appName: appName
-          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+          }), jsxRuntime.jsxs("div", {
             className: "w3a-modal__content w3ajs-content",
-            children: [areSocialLoginsVisible ? /*#__PURE__*/jsxRuntime.jsx(SocialLogins, {
+            children: [areSocialLoginsVisible ? jsxRuntime.jsx(SocialLogins, {
               handleSocialLoginClick: params => preHandleSocialWalletClick(params),
               socialLoginsConfig: modalState.socialLoginsConfig
-            }) : null, (isEmailPasswordlessLoginVisible || isSmsPasswordlessLoginVisible) && /*#__PURE__*/jsxRuntime.jsx(SocialLoginPasswordless, {
+            }) : null, (isEmailPasswordlessLoginVisible || isSmsPasswordlessLoginVisible) && jsxRuntime.jsx(SocialLoginPasswordless, {
               isEmailVisible: isEmailPasswordlessLoginVisible,
               isSmsVisible: isSmsPasswordlessLoginVisible,
               connector: (_modalState$socialLog10 = modalState.socialLoginsConfig) === null || _modalState$socialLog10 === void 0 ? void 0 : _modalState$socialLog10.connector,
               handleSocialLoginClick: params => preHandleSocialWalletClick(params),
+              socialLoginsConfig: modalState.socialLoginsConfig,
               isPrimaryBtn: isEmailPrimary
             }), modalState.hasExternalWallets && externalWalletButton]
           })]
-        }) : /*#__PURE__*/jsxRuntime.jsx("div", {
+        }) : jsxRuntime.jsx("div", {
           className: "w3a-modal__content_external_wallet w3ajs-content",
-          children: /*#__PURE__*/jsxRuntime.jsx(ExternalWallets, {
+          children: jsxRuntime.jsx(ExternalWallets, {
             modalStatus: modalState.status,
             showBackButton: areSocialLoginsVisible || isEmailPasswordlessLoginVisible || isSmsPasswordlessLoginVisible,
             handleExternalWalletClick: preHandleExternalWalletClick,
-            chainNamespace: chainNamespace,
+            chainNamespaces: chainNamespaces,
             walletConnectUri: modalState.walletConnectUri,
             config: modalState.externalWalletsConfig,
             hideExternalWallets: () => setModalState(prevState => {
@@ -236,7 +236,7 @@ function Modal(props) {
             closeModal: closeModal
           })
         })
-      }), /*#__PURE__*/jsxRuntime.jsx(Footer, {})]
+      }), jsxRuntime.jsx(Footer, {})]
     })
   });
 }

package/dist/lib.cjs/packages/modal/src/ui/components/SelfCustodyViaWeb3Auth.js

@@ -1,24 +1,24 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var reactI18next = require('react-i18next');
 var localeImport = require('../localeImport.js');
-var jsxRuntime = require('react/jsx-runtime');
 
 function SelfCustodyViaWeb3Auth() {
   const [t] = reactI18next.useTranslation(undefined, {
     i18n: localeImport
   });
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+  return jsxRuntime.jsxs("div", {
     className: "w3a--flex w3a--items-center w3a--gap-2 w3a--justify-center",
-    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+    children: [jsxRuntime.jsx("div", {
       className: "w3a--text-xs w3a--text-app-gray-300 dark:w3a--text-app-gray-500",
       children: t("modal.footer.message-new")
-    }), /*#__PURE__*/jsxRuntime.jsx("img", {
+    }), jsxRuntime.jsx("img", {
       height: "16",
       src: "https://images.web3auth.io/web3auth-footer-logo-light.svg",
       alt: "Web3Auth Logo Light",
       className: "w3a--h-4 w3a--block dark:w3a--hidden"
-    }), /*#__PURE__*/jsxRuntime.jsx("img", {
+    }), jsxRuntime.jsx("img", {
       height: "16",
       src: "https://images.web3auth.io/web3auth-footer-logo-dark.svg",
       alt: "Web3Auth Logo Dark",

package/dist/lib.cjs/packages/modal/src/ui/components/SocialLoginPasswordless.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var auth = require('@web3auth/auth');
 var React = require('react');
 var reactI18next = require('react-i18next');
@@ -7,7 +8,6 @@ var localeImport = require('../localeImport.js');
 var utils = require('../utils.js');
 var Button = require('./Button/Button.js');
 var Icon = require('./Icon.js');
-var jsxRuntime = require('react/jsx-runtime');
 
 function SocialLoginPasswordless(props) {
   const {
@@ -15,7 +15,8 @@ function SocialLoginPasswordless(props) {
     connector,
     isPrimaryBtn,
     isEmailVisible,
-    isSmsVisible
+    isSmsVisible,
+    socialLoginsConfig
   } = props;
   const [fieldValue, setFieldValue] = React.useState("");
   const [countryCode, setCountryCode] = React.useState("");
@@ -27,12 +28,15 @@ function SocialLoginPasswordless(props) {
     e.preventDefault();
     const value = fieldValue;
     if (isEmailVisible) {
+      const emailConfig = socialLoginsConfig.loginMethods[auth.AUTH_CONNECTION.EMAIL_PASSWORDLESS];
       const isEmailValid = value.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i);
       if (isEmailValid) {
         return handleSocialLoginClick({
           connector,
           loginParams: {
-            loginProvider: auth.LOGIN_PROVIDER.EMAIL_PASSWORDLESS,
+            authConnection: auth.AUTH_CONNECTION.EMAIL_PASSWORDLESS,
+            authConnectionId: emailConfig.authConnectionId,
+            groupedAuthConnectionId: "",
             login_hint: value,
             name: "Email"
           }
@@ -40,13 +44,16 @@ function SocialLoginPasswordless(props) {
       }
     }
     if (isSmsVisible) {
+      const smsConfig = socialLoginsConfig.loginMethods[auth.AUTH_CONNECTION.SMS_PASSWORDLESS];
       const number = value.startsWith("+") ? value : `${countryCode}${value}`;
       const result = await utils.validatePhoneNumber(number);
       if (result) {
         return handleSocialLoginClick({
           connector,
           loginParams: {
-            loginProvider: auth.LOGIN_PROVIDER.SMS_PASSWORDLESS,
+            authConnection: auth.AUTH_CONNECTION.SMS_PASSWORDLESS,
+            authConnectionId: smsConfig.authConnectionId,
+            groupedAuthConnectionId: smsConfig.groupedAuthConnectionId,
             login_hint: typeof result === "string" ? result : number,
             name: "Mobile"
           }
@@ -84,35 +91,35 @@ function SocialLoginPasswordless(props) {
     if (isEmailVisible) return "modal.errors-invalid-email";
     return "modal.errors-invalid-number";
   }, [isEmailVisible, isSmsVisible]);
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+  return jsxRuntime.jsxs("div", {
     className: "w3ajs-passwordless w3a-group w3a-group--passwordless",
-    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+    children: [jsxRuntime.jsxs("div", {
       className: "w3a-group__title",
-      children: [t(title), isSmsVisible && /*#__PURE__*/jsxRuntime.jsxs("div", {
+      children: [t(title), isSmsVisible && jsxRuntime.jsxs("div", {
         className: "w3a--relative w3a--flex w3a--flex-col w3a--items-center w3a--cursor-pointer w3a--group",
-        children: [/*#__PURE__*/jsxRuntime.jsx(Icon, {
+        children: [jsxRuntime.jsx(Icon, {
           iconName: "information-circle-light",
           darkIconName: "information-circle"
-        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        }), jsxRuntime.jsxs("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",
-          children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          children: [jsxRuntime.jsx("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"
-          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+          }), jsxRuntime.jsxs("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 ${isSmsVisible && !isEmailVisible ? "w3a--left-20" : "w3a--left-8"}`,
-            children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+            children: [jsxRuntime.jsx("div", {
               className: "w3a--mb-1 w3a--text-xs w3a--font-medium w3a--text-app-gray-900 dark:w3a--text-app-white",
               children: t("modal.popup.phone-header")
-            }), /*#__PURE__*/jsxRuntime.jsx("div", {
+            }), jsxRuntime.jsx("div", {
               className: "w3a--text-xs w3a--text-app-gray-400",
               children: t("modal.popup.phone-body")
             })]
           })]
         })]
       })]
-    }), /*#__PURE__*/jsxRuntime.jsxs("form", {
+    }), jsxRuntime.jsxs("form", {
       className: "w3ajs-passwordless-form",
       onSubmit: e => handleFormSubmit(e),
-      children: [/*#__PURE__*/jsxRuntime.jsx("input", {
+      children: [jsxRuntime.jsx("input", {
         className: "w3a--w-full w3a--mb-4 w3a-text-field",
         name: "passwordless-input",
         required: true,
@@ -124,10 +131,10 @@ function SocialLoginPasswordless(props) {
           e.target.placeholder = `${t("modal.social.sms-placeholder-text")} ${placeholder}`;
         },
         onChange: e => handleInputChange(e)
-      }), isValidInput === false && /*#__PURE__*/jsxRuntime.jsx("div", {
+      }), isValidInput === false && jsxRuntime.jsx("div", {
         className: "w3a-sms-field--error",
         children: t(invalidInputErrorMessage)
-      }), /*#__PURE__*/jsxRuntime.jsx(Button, {
+      }), jsxRuntime.jsx(Button, {
         variant: isPrimaryBtn ? "primary" : "tertiary",
         disabled: fieldValue === "",
         className: "w3a--w-full",

package/dist/lib.cjs/packages/modal/src/ui/components/SocialLogins.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var auth = require('@web3auth/auth');
 var classNames = require('classnames');
 var React = require('react');
@@ -9,20 +10,19 @@ var ThemeContext = require('../context/ThemeContext.js');
 var localeImport = require('../localeImport.js');
 var Button = require('./Button/Button.js');
 var Image = require('./Image.js');
-var jsxRuntime = require('react/jsx-runtime');
 
 function getProviderIcon(method, isDark, isPrimaryBtn) {
-  const imageId = method === auth.LOGIN_PROVIDER.TWITTER ? `login-twitter-x${isDark ? "-light" : "-dark"}` : `login-${method}${isDark ? "-light" : "-dark"}`;
-  const hoverId = method === auth.LOGIN_PROVIDER.APPLE || method === auth.LOGIN_PROVIDER.GITHUB || method === auth.LOGIN_PROVIDER.TWITTER ? imageId : `login-${method}-active`;
+  const imageId = method === auth.AUTH_CONNECTION.TWITTER ? `login-twitter-x${isDark ? "-light" : "-dark"}` : `login-${method}${isDark ? "-light" : "-dark"}`;
+  const hoverId = method === auth.AUTH_CONNECTION.APPLE || method === auth.AUTH_CONNECTION.GITHUB || method === auth.AUTH_CONNECTION.TWITTER ? imageId : `login-${method}-active`;
   if (isPrimaryBtn) {
-    return /*#__PURE__*/jsxRuntime.jsx(Image, {
+    return jsxRuntime.jsx(Image, {
       width: "20",
       imageId: hoverId,
       hoverImageId: hoverId,
       isButton: true
     });
   }
-  return /*#__PURE__*/jsxRuntime.jsx(Image, {
+  return jsxRuntime.jsx(Image, {
     width: "20",
     imageId: imageId,
     hoverImageId: hoverId,
@@ -47,7 +47,6 @@ function SocialLogins(props) {
   const [t] = reactI18next.useTranslation(undefined, {
     i18n: localeImport
   });
-
   // Too small a function to use `useCallback`
   const expandClickHandler = () => {
     setIsExpanded(!isExpanded);
@@ -62,42 +61,45 @@ function SocialLogins(props) {
   const adapterButtonClass = classNames("w3a-button-expand", "w3ajs-button-expand", isExpanded ? "w3a-button--rotate" : "");
   const adapterExpandText = isExpanded ? t("modal.social.view-less") : t("modal.social.view-more");
   const loginMethodsCount = Object.keys(socialLoginsConfig.loginMethods).length + 1;
-  const restrictedLoginMethods = [auth.LOGIN_PROVIDER.WEBAUTHN, auth.LOGIN_PROVIDER.JWT, auth.LOGIN_PROVIDER.SMS_PASSWORDLESS, auth.LOGIN_PROVIDER.EMAIL_PASSWORDLESS, auth.LOGIN_PROVIDER.AUTHENTICATOR, auth.LOGIN_PROVIDER.PASSKEYS];
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+  const restrictedLoginMethods = [auth.AUTH_CONNECTION.CUSTOM, auth.AUTH_CONNECTION.SMS_PASSWORDLESS, auth.AUTH_CONNECTION.EMAIL_PASSWORDLESS, auth.AUTH_CONNECTION.PASSKEYS, auth.AUTH_CONNECTION.TELEGRAM, auth.AUTH_CONNECTION.AUTHENTICATOR];
+  return jsxRuntime.jsxs("div", {
     className: "w3ajs-social-logins w3a-group",
-    children: [/*#__PURE__*/jsxRuntime.jsx("ul", {
+    children: [jsxRuntime.jsx("ul", {
       className: adapterListClass,
       children: Object.keys(socialLoginsConfig.loginMethods).map(method => {
         var _socialLoginsConfig$u, _socialLoginsConfig$u2;
-        const name = config.capitalizeFirstLetter(socialLoginsConfig.loginMethods[method].name || method);
+        const socialLoginConfig = socialLoginsConfig.loginMethods[method];
+        const name = config.capitalizeFirstLetter(socialLoginConfig.name || method);
         const orderIndex = socialLoginsConfig.loginMethodsOrder.indexOf(method) + 1;
         const order = orderIndex || Object.keys(socialLoginsConfig.loginMethods).length + 1;
-        const isMainOption = socialLoginsConfig.loginMethods[method].mainOption;
+        const isMainOption = socialLoginConfig.mainOption;
         const isPrimaryBtn = (socialLoginsConfig === null || socialLoginsConfig === void 0 || (_socialLoginsConfig$u = socialLoginsConfig.uiConfig) === null || _socialLoginsConfig$u === void 0 ? void 0 : _socialLoginsConfig$u.primaryButton) === "socialLogin" && order === 1;
         const providerIcon = getProviderIcon(method, isDark, isPrimaryBtn);
-        if (socialLoginsConfig.loginMethods[method].showOnModal === false || restrictedLoginMethods.includes(method)) {
+        if (socialLoginConfig.showOnModal === false || restrictedLoginMethods.includes(method)) {
           return null;
         }
         const loginMethodSpan = classNames("w3a-adapter-item", (socialLoginsConfig === null || socialLoginsConfig === void 0 || (_socialLoginsConfig$u2 = socialLoginsConfig.uiConfig) === null || _socialLoginsConfig$u2 === void 0 ? void 0 : _socialLoginsConfig$u2.loginGridCol) === 2 ? "w3a--col-span-3" : "w3a--col-span-2");
         if (isMainOption || order === 1) {
-          return /*#__PURE__*/jsxRuntime.jsx("li", {
+          return jsxRuntime.jsx("li", {
             className: "w3a--col-span-6 w3a-adapter-item",
             style: {
               order
             },
-            children: /*#__PURE__*/jsxRuntime.jsxs(Button, {
+            children: jsxRuntime.jsxs(Button, {
               variant: "secondary",
               onClick: () => handleSocialLoginClick({
                 connector: socialLoginsConfig.connector,
                 loginParams: {
-                  loginProvider: method,
-                  name,
+                  authConnection: method,
+                  name: socialLoginConfig.name,
+                  authConnectionId: socialLoginConfig.authConnectionId,
+                  groupedAuthConnectionId: socialLoginConfig.groupedAuthConnectionId,
                   login_hint: ""
                 }
               }),
               className: "w3a--w-full",
               title: name,
-              children: [providerIcon, /*#__PURE__*/jsxRuntime.jsx("p", {
+              children: [providerIcon, jsxRuntime.jsx("p", {
                 className: "w3a--ml-2",
                 children: t("modal.social.continueCustom", {
                   adapter: name
@@ -106,18 +108,20 @@ function SocialLogins(props) {
             })
           }, method);
         }
-        return /*#__PURE__*/jsxRuntime.jsx("li", {
+        return jsxRuntime.jsx("li", {
           className: loginMethodSpan,
           style: {
             order: order + loginMethodsCount
           },
-          children: /*#__PURE__*/jsxRuntime.jsx(Button, {
+          children: jsxRuntime.jsx(Button, {
             variant: "secondary",
             onClick: () => handleSocialLoginClick({
               connector: socialLoginsConfig.connector,
               loginParams: {
-                loginProvider: method,
-                name,
+                authConnection: method,
+                name: socialLoginConfig.name,
+                authConnectionId: socialLoginConfig.authConnectionId,
+                groupedAuthConnectionId: socialLoginConfig.groupedAuthConnectionId,
                 login_hint: ""
               }
             }),
@@ -127,16 +131,16 @@ function SocialLogins(props) {
           })
         }, method);
       })
-    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+    }), jsxRuntime.jsx("div", {
       className: "w3a-social__policy",
       children: t("modal.social.policy")
-    }), canShowMore && /*#__PURE__*/jsxRuntime.jsx("div", {
+    }), canShowMore && jsxRuntime.jsx("div", {
       className: "w3a--text-right",
-      children: /*#__PURE__*/jsxRuntime.jsx("button", {
+      children: jsxRuntime.jsx("button", {
         type: "button",
         className: adapterButtonClass,
         onClick: expandClickHandler,
-        children: /*#__PURE__*/jsxRuntime.jsx("span", {
+        children: jsxRuntime.jsx("span", {
           className: "w3ajs-button-expand-text",
           children: adapterExpandText
         })

package/dist/lib.cjs/packages/modal/src/ui/components/WalletConnect.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var Bowser = require('bowser');
 var copyToClipboard = require('copy-to-clipboard');
 var React = require('react');
@@ -8,7 +9,6 @@ var reactQrcodeLogo = require('react-qrcode-logo');
 var ThemeContext = require('../context/ThemeContext.js');
 var interfaces = require('../interfaces.js');
 var localeImport = require('../localeImport.js');
-var jsxRuntime = require('react/jsx-runtime');
 
 function WalletConnect(props) {
   var _getComputedStyle;
@@ -40,24 +40,24 @@ function WalletConnect(props) {
   const blackColor = "#000000";
   const modalColor = ((_getComputedStyle = getComputedStyle(root)) === null || _getComputedStyle === void 0 || (_getComputedStyle = _getComputedStyle.getPropertyValue("--app-gray-800")) === null || _getComputedStyle === void 0 ? void 0 : _getComputedStyle.trim()) || "#1f2a37";
   const qrColor = primaryColor.toLowerCase() === "#ffffff" ? "#000000" : primaryColor;
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
+  return jsxRuntime.jsx("div", {
     className: "w3ajs-wallet-connect w3a-wallet-connect",
-    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+    children: jsxRuntime.jsx("div", {
       className: "w3ajs-wallet-connect__container w3a-wallet-connect__container",
-      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+      children: jsxRuntime.jsxs("div", {
         className: "w3a-wallet-connect__container-desktop",
-        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        children: [jsxRuntime.jsxs("div", {
           className: "w3ajs-wallet-connect-qr w3a-wallet-connect-qr w3a--rounded-md w3a--mb-2",
           tabIndex: 0,
           role: "button",
           onClick: handleCopy,
           onKeyDown: () => copyToClipboard(walletConnectUri),
-          children: [isCopied && /*#__PURE__*/jsxRuntime.jsxs("div", {
+          children: [isCopied && jsxRuntime.jsxs("div", {
             className: "tooltip",
-            children: ["Copied", /*#__PURE__*/jsxRuntime.jsx("div", {
+            children: ["Copied", jsxRuntime.jsx("div", {
               className: "w3a--absolute w3a--border-8 w3a--border-b-0 w3a--border-r-transparent w3a--border-t-app-gray-900 w3a--border-l-transparent w3a--top-[100%] w3a--left-[calc(50%_-_8px)]"
             })]
-          }), /*#__PURE__*/jsxRuntime.jsx(reactQrcodeLogo.QRCode, {
+          }), jsxRuntime.jsx(reactQrcodeLogo.QRCode, {
             size: isDesktop ? 300 : 260,
             eyeRadius: 5,
             qrStyle: "dots",
@@ -71,7 +71,7 @@ function WalletConnect(props) {
             bgColor: isDark ? modalColor : whiteColor,
             fgColor: isDark ? whiteColor : blackColor
           })]
-        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        }), jsxRuntime.jsx("div", {
           className: "text-xs",
           children: t("modal.external.walletconnect-copy")
         })]

package/dist/lib.cjs/packages/modal/src/ui/config.js

@@ -5,8 +5,8 @@ var auth = require('@web3auth/auth');
 function capitalizeFirstLetter(string) {
   return string.charAt(0).toUpperCase() + string.slice(1);
 }
-const restrictedLoginMethods = new Set([auth.LOGIN_PROVIDER.AUTHENTICATOR, auth.LOGIN_PROVIDER.PASSKEYS, auth.LOGIN_PROVIDER.JWT, auth.LOGIN_PROVIDER.WEBAUTHN]);
-const AUTH_PROVIDERS = Object.values(auth.LOGIN_PROVIDER).filter(x => !restrictedLoginMethods.has(x));
+const restrictedLoginMethods = new Set([auth.AUTH_CONNECTION.CUSTOM, auth.AUTH_CONNECTION.PASSKEYS, auth.AUTH_CONNECTION.TELEGRAM, auth.AUTH_CONNECTION.AUTHENTICATOR]);
+const AUTH_PROVIDERS = Object.values(auth.AUTH_CONNECTION).filter(x => !restrictedLoginMethods.has(x));
 const AUTH_PROVIDERS_NAMES = AUTH_PROVIDERS.reduce((acc, x) => {
   if (x === "email_passwordless") acc[x] = "Email";else if (x === "sms_passwordless") acc[x] = "Mobile";else acc[x] = capitalizeFirstLetter(x);
   return acc;