@web3auth/modal 10.11.0 → 10.13.0

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

@@ -2,7 +2,7 @@
 
 var noModal = require('@web3auth/no-modal');
 
-const version = "10.11.0";
+const version = "10.13.0";
 const defaultConnectorsModalConfig = {
   hideWalletDiscovery: false,
   connectors: {

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

@@ -43,10 +43,10 @@ function SocialLoginButton(props) {
       "w3a--rounded-lg": buttonRadius === "rounded",
       "w3a--rounded-none": buttonRadius === "square"
     }),
-    children: [showIcon && getProviderIcon(method, isDark, isPrimaryBtn), showText && jsxRuntime.jsx("p", {
+    children: [showIcon && getProviderIcon(method, isDark, isPrimaryBtn), children, showText && jsxRuntime.jsx("p", {
       className: "w3a--text-sm w3a--font-normal w3a--text-app-gray-900 dark:w3a--text-app-white",
       children: text
-    }), children]
+    })]
   });
 }
 

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

@@ -67,6 +67,7 @@ function Login(props) {
   const [canShowMore, setCanShowMore] = react.useState(false);
   const [visibleRow, setVisibleRow] = react.useState([]);
   const [otherRow, setOtherRow] = react.useState([]);
+  const [mainOptionsRow, setMainOptionsRow] = react.useState([]);
   const [isPasswordLessCtaClicked, setIsPasswordLessCtaClicked] = react.useState(false);
   const [showOtpFlow, setShowOtpFlow] = react.useState(false);
   const [authConnection, setAuthConnection] = react.useState(undefined);
@@ -87,6 +88,7 @@ function Login(props) {
     });
     const visibleRows = [];
     const otherRows = [];
+    const mainOptionsRows = [];
     const loginMethodsOrder = (socialLoginsConfig.loginMethodsOrder || []).reduce((acc, method, index) => {
       acc[method] = index;
       return acc;
@@ -120,35 +122,19 @@ function Login(props) {
       const name = config.capitalizeFirstLetter(connectorConfig.name || method);
       const order = index + 1;
       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 isMainOption = connectorConfig.mainOption;
       const loginOptionLength = loginOptions.length;
       const moreThanFour = loginOptionLength >= 4;
       const lengthCheck = moreThanFour ? order > 0 && order <= loginOptionLength : order > 0 && order < 4;
-      if (lengthCheck) {
-        visibleRows.push({
-          method,
-          isDark,
-          isPrimaryBtn,
-          name,
-          connector: socialLoginsConfig.connector,
-          loginParams: {
-            authConnection: connectorConfig.authConnection || method,
-            authConnectionId: connectorConfig.authConnectionId,
-            groupedAuthConnectionId: connectorConfig.groupedAuthConnectionId,
-            extraLoginOptions: connectorConfig.extraLoginOptions,
-            name,
-            login_hint: ""
-          },
-          order
-        });
-      }
-      otherRows.push({
+      const rows = {
+        description: connectorConfig.description || "",
         method,
         isDark,
         isPrimaryBtn,
         name: name === "Twitter" ? "X" : name,
         connector: socialLoginsConfig.connector,
         loginParams: {
-          authConnection: method,
+          authConnection: connectorConfig.authConnection || method,
           authConnectionId: connectorConfig.authConnectionId,
           groupedAuthConnectionId: connectorConfig.groupedAuthConnectionId,
           extraLoginOptions: connectorConfig.extraLoginOptions,
@@ -156,10 +142,17 @@ function Login(props) {
           login_hint: ""
         },
         order
-      });
+      };
+      if (isMainOption) {
+        mainOptionsRows.push(rows);
+      } else if (lengthCheck) {
+        visibleRows.push(rows);
+      }
+      otherRows.push(rows);
     });
     setVisibleRow(visibleRows);
     setOtherRow(otherRows);
+    setMainOptionsRow(mainOptionsRows);
     setCanShowMore(maxOptions.length > 4); // Update the state based on the condition
   }, [socialLoginsConfig, isDark, buttonRadius]);
   const handleCustomLogin = async (authConnection, loginHint) => {
@@ -391,6 +384,7 @@ function Login(props) {
       isDark: isDark,
       visibleRow: visibleRow,
       canShowMore: canShowMore,
+      mainOptionsRow: mainOptionsRow,
       handleSocialLoginClick: handleSocialLoginClick,
       socialLoginsConfig: socialLoginsConfig,
       handleExpandSocialLogins: handleSocialLoginExpand,

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

@@ -28,6 +28,7 @@ function SocialLoginList(props) {
   const {
     visibleRow,
     otherRow,
+    mainOptionsRow,
     isDark,
     canShowMore,
     handleSocialLoginClick,
@@ -46,9 +47,30 @@ function SocialLoginList(props) {
     }
   };
   if (visibleRow.length !== 0 && (otherRow === null || otherRow === void 0 ? void 0 : otherRow.length) === 0) {
-    return jsxRuntime.jsx("div", {
+    return jsxRuntime.jsxs("div", {
       className: "w3a--flex w3a--w-full w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-2",
-      children: jsxRuntime.jsxs("div", {
+      children: [jsxRuntime.jsx("div", {
+        className: "w3a--grid w3a--w-full w3a--gap-y-2",
+        children: mainOptionsRow.map(row => jsxRuntime.jsx(Button, {
+          type: Button_type.BUTTON_TYPE.SOCIAL,
+          props: {
+            showText: true,
+            text: row.description,
+            method: row.method,
+            isDark,
+            isPrimaryBtn: false,
+            btnStyle: "w3a--flex w3a--items-center !w3a--justify-center w3a--w-full w3a--h-11 w3a--group",
+            children: jsxRuntime.jsx(jsxRuntime.Fragment, {
+              children: getProviderIcon(row.method, isDark, ".svg")
+            }),
+            onClick: () => handleSocialLoginClick({
+              connector: row.connector,
+              loginParams: row.loginParams
+            }),
+            buttonRadius
+          }
+        }, row.method))
+      }), jsxRuntime.jsxs("div", {
         className: utils.cn("w3a--grid w3a--w-full w3a--gap-x-2", getGridRowFromVisibleLogin()),
         children: [visibleRow.filter((_, index) => visibleRow.length === 4 ? index <= 3 : index < 3).map(row => jsxRuntime.jsx(LoginHint, {
           content: "Last Login",
@@ -86,7 +108,7 @@ function SocialLoginList(props) {
             buttonRadius
           }
         })]
-      })
+      })]
     });
   }
   return jsxRuntime.jsxs("div", {

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

@@ -81,7 +81,7 @@ function Widget(props) {
     } = params;
     setModalState(prevState => _objectSpread(_objectSpread({}, prevState), {}, {
       detailedLoaderConnector: connector,
-      detailedLoaderAdapterName: noModal.CONNECTOR_NAMES[connector]
+      detailedLoaderConnectorName: noModal.CONNECTOR_NAMES[connector]
     }));
     // Call the passed-in handler with the params
     if (handleExternalWalletClick) handleExternalWalletClick(params);

package/dist/lib.cjs/types/react/wagmi/constants.d.ts

@@ -34,9 +34,18 @@ export declare const defaultWagmiConfig: import("wagmi").Config<readonly [{
     sourceId?: number | undefined | undefined;
     testnet?: boolean | undefined | undefined;
     custom?: Record<string, unknown> | undefined;
+    extendSchema?: Record<string, unknown> | undefined;
     fees?: import("viem").ChainFees<undefined> | undefined;
     formatters?: undefined;
+    prepareTransactionRequest?: ((args: import("viem").PrepareTransactionRequestParameters, options: {
+        phase: "beforeFillTransaction" | "beforeFillParameters" | "afterFillParameters";
+    }) => Promise<import("viem").PrepareTransactionRequestParameters>) | [fn: ((args: import("viem").PrepareTransactionRequestParameters, options: {
+        phase: "beforeFillTransaction" | "beforeFillParameters" | "afterFillParameters";
+    }) => Promise<import("viem").PrepareTransactionRequestParameters>) | undefined, options: {
+        runAt: readonly ("beforeFillTransaction" | "beforeFillParameters" | "afterFillParameters")[];
+    }] | undefined;
     serializers?: import("viem").ChainSerializers<undefined, import("viem").TransactionSerializable> | undefined;
+    verifyHash?: ((client: import("viem").Client, parameters: import("viem").VerifyHashActionParameters) => Promise<import("viem").VerifyHashActionReturnType>) | undefined;
 }], {
     1: import("viem").HttpTransport<undefined, false>;
 }, readonly []>;

package/dist/lib.cjs/types/ui/components/SocialLoginList/SocialLoginList.type.d.ts

@@ -3,6 +3,7 @@ export interface SocialLoginListProps {
     isDark: boolean;
     visibleRow: rowType[];
     canShowMore: boolean;
+    mainOptionsRow: rowType[];
     socialLoginsConfig: SocialLoginsConfig;
     otherRow?: rowType[];
     handleSocialLoginClick: (params: SocialLoginEventType) => void;

package/dist/lib.cjs/types/ui/interfaces.d.ts

@@ -137,6 +137,7 @@ export type platform = "mobile" | "desktop" | "tablet";
 export type browser = "chrome" | "firefox" | "edge" | "safari" | "brave";
 export type mobileOs = "ios" | "android";
 export type rowType = {
+    description: string;
     method: string;
     isDark: boolean;
     isPrimaryBtn: boolean;
@@ -151,6 +152,7 @@ export type rowType = {
         extraLoginOptions?: ExtraLoginOptions;
     };
     order: number;
+    mainOption?: boolean;
 };
 export type PasswordlessHandlerParams = {
     authConnection: AUTH_CONNECTION_TYPE;

package/dist/lib.cjs/types/vue/wagmi/constants.d.ts

@@ -34,9 +34,18 @@ export declare const defaultWagmiConfig: import("wagmi").Config<readonly [{
     sourceId?: number | undefined | undefined;
     testnet?: boolean | undefined | undefined;
     custom?: Record<string, unknown> | undefined;
+    extendSchema?: Record<string, unknown> | undefined;
     fees?: import("viem").ChainFees<undefined> | undefined;
     formatters?: undefined;
+    prepareTransactionRequest?: ((args: import("viem").PrepareTransactionRequestParameters, options: {
+        phase: "beforeFillTransaction" | "beforeFillParameters" | "afterFillParameters";
+    }) => Promise<import("viem").PrepareTransactionRequestParameters>) | [fn: ((args: import("viem").PrepareTransactionRequestParameters, options: {
+        phase: "beforeFillTransaction" | "beforeFillParameters" | "afterFillParameters";
+    }) => Promise<import("viem").PrepareTransactionRequestParameters>) | undefined, options: {
+        runAt: readonly ("beforeFillTransaction" | "beforeFillParameters" | "afterFillParameters")[];
+    }] | undefined;
     serializers?: import("viem").ChainSerializers<undefined, import("viem").TransactionSerializable> | undefined;
+    verifyHash?: ((client: import("viem").Client, parameters: import("viem").VerifyHashActionParameters) => Promise<import("viem").VerifyHashActionReturnType>) | undefined;
 }], {
     1: import("viem").HttpTransport<undefined, false>;
 }, readonly []>;

package/dist/lib.esm/packages/modal/src/config.js

@@ -1,6 +1,6 @@
 import { EVM_CONNECTORS } from '@web3auth/no-modal';
 
-const version = "10.11.0";
+const version = "10.13.0";
 const defaultConnectorsModalConfig = {
   hideWalletDiscovery: false,
   connectors: {

package/dist/lib.esm/packages/modal/src/ui/components/Button/ButtonSocial/ButtonSocial.js

@@ -41,10 +41,10 @@ function SocialLoginButton(props) {
       "w3a--rounded-lg": buttonRadius === "rounded",
       "w3a--rounded-none": buttonRadius === "square"
     }),
-    children: [showIcon && getProviderIcon(method, isDark, isPrimaryBtn), showText && /*#__PURE__*/jsx("p", {
+    children: [showIcon && getProviderIcon(method, isDark, isPrimaryBtn), children, showText && /*#__PURE__*/jsx("p", {
       className: "w3a--text-sm w3a--font-normal w3a--text-app-gray-900 dark:w3a--text-app-white",
       children: text
-    }), children]
+    })]
   });
 }
 

package/dist/lib.esm/packages/modal/src/ui/components/Login/Login.js

@@ -65,6 +65,7 @@ function Login(props) {
   const [canShowMore, setCanShowMore] = useState(false);
   const [visibleRow, setVisibleRow] = useState([]);
   const [otherRow, setOtherRow] = useState([]);
+  const [mainOptionsRow, setMainOptionsRow] = useState([]);
   const [isPasswordLessCtaClicked, setIsPasswordLessCtaClicked] = useState(false);
   const [showOtpFlow, setShowOtpFlow] = useState(false);
   const [authConnection, setAuthConnection] = useState(undefined);
@@ -85,6 +86,7 @@ function Login(props) {
     });
     const visibleRows = [];
     const otherRows = [];
+    const mainOptionsRows = [];
     const loginMethodsOrder = (socialLoginsConfig.loginMethodsOrder || []).reduce((acc, method, index) => {
       acc[method] = index;
       return acc;
@@ -121,35 +123,19 @@ function Login(props) {
       const name = capitalizeFirstLetter(connectorConfig.name || method);
       const order = index + 1;
       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 isMainOption = connectorConfig.mainOption;
       const loginOptionLength = loginOptions.length;
       const moreThanFour = loginOptionLength >= 4;
       const lengthCheck = moreThanFour ? order > 0 && order <= loginOptionLength : order > 0 && order < 4;
-      if (lengthCheck) {
-        visibleRows.push({
-          method,
-          isDark,
-          isPrimaryBtn,
-          name,
-          connector: socialLoginsConfig.connector,
-          loginParams: {
-            authConnection: connectorConfig.authConnection || method,
-            authConnectionId: connectorConfig.authConnectionId,
-            groupedAuthConnectionId: connectorConfig.groupedAuthConnectionId,
-            extraLoginOptions: connectorConfig.extraLoginOptions,
-            name,
-            login_hint: ""
-          },
-          order
-        });
-      }
-      otherRows.push({
+      const rows = {
+        description: connectorConfig.description || "",
         method,
         isDark,
         isPrimaryBtn,
         name: name === "Twitter" ? "X" : name,
         connector: socialLoginsConfig.connector,
         loginParams: {
-          authConnection: method,
+          authConnection: connectorConfig.authConnection || method,
           authConnectionId: connectorConfig.authConnectionId,
           groupedAuthConnectionId: connectorConfig.groupedAuthConnectionId,
           extraLoginOptions: connectorConfig.extraLoginOptions,
@@ -157,10 +143,17 @@ function Login(props) {
           login_hint: ""
         },
         order
-      });
+      };
+      if (isMainOption) {
+        mainOptionsRows.push(rows);
+      } else if (lengthCheck) {
+        visibleRows.push(rows);
+      }
+      otherRows.push(rows);
     });
     setVisibleRow(visibleRows);
     setOtherRow(otherRows);
+    setMainOptionsRow(mainOptionsRows);
     setCanShowMore(maxOptions.length > 4); // Update the state based on the condition
   }, [socialLoginsConfig, isDark, buttonRadius]);
   const handleCustomLogin = async (authConnection, loginHint) => {
@@ -394,6 +387,7 @@ function Login(props) {
       isDark: isDark,
       visibleRow: visibleRow,
       canShowMore: canShowMore,
+      mainOptionsRow: mainOptionsRow,
       handleSocialLoginClick: handleSocialLoginClick,
       socialLoginsConfig: socialLoginsConfig,
       handleExpandSocialLogins: handleSocialLoginExpand,

package/dist/lib.esm/packages/modal/src/ui/components/SocialLoginList/SocialLoginList.js

@@ -3,7 +3,7 @@ import { cn, getIcons } from '../../utils.js';
 import Button from '../Button/Button.js';
 import { BUTTON_TYPE } from '../Button/Button.type.js';
 import LoginHint from '../LoginHint/LoginHint.js';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 function getProviderIcon(method, isDark, extension) {
   const imageId = method === AUTH_CONNECTION.TWITTER ? `login-X${isDark ? "-light" : "-dark"}` : `login-${method}${isDark ? "-light" : "-dark"}`;
@@ -26,6 +26,7 @@ function SocialLoginList(props) {
   const {
     visibleRow,
     otherRow,
+    mainOptionsRow,
     isDark,
     canShowMore,
     handleSocialLoginClick,
@@ -44,9 +45,30 @@ function SocialLoginList(props) {
     }
   };
   if (visibleRow.length !== 0 && (otherRow === null || otherRow === void 0 ? void 0 : otherRow.length) === 0) {
-    return /*#__PURE__*/jsx("div", {
+    return /*#__PURE__*/jsxs("div", {
       className: "w3a--flex w3a--w-full w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-2",
-      children: /*#__PURE__*/jsxs("div", {
+      children: [/*#__PURE__*/jsx("div", {
+        className: "w3a--grid w3a--w-full w3a--gap-y-2",
+        children: mainOptionsRow.map(row => /*#__PURE__*/jsx(Button, {
+          type: BUTTON_TYPE.SOCIAL,
+          props: {
+            showText: true,
+            text: row.description,
+            method: row.method,
+            isDark,
+            isPrimaryBtn: false,
+            btnStyle: "w3a--flex w3a--items-center !w3a--justify-center w3a--w-full w3a--h-11 w3a--group",
+            children: /*#__PURE__*/jsx(Fragment, {
+              children: getProviderIcon(row.method, isDark, ".svg")
+            }),
+            onClick: () => handleSocialLoginClick({
+              connector: row.connector,
+              loginParams: row.loginParams
+            }),
+            buttonRadius
+          }
+        }, row.method))
+      }), /*#__PURE__*/jsxs("div", {
         className: cn("w3a--grid w3a--w-full w3a--gap-x-2", getGridRowFromVisibleLogin()),
         children: [visibleRow.filter((_, index) => visibleRow.length === 4 ? index <= 3 : index < 3).map(row => /*#__PURE__*/jsx(LoginHint, {
           content: "Last Login",
@@ -84,7 +106,7 @@ function SocialLoginList(props) {
             buttonRadius
           }
         })]
-      })
+      })]
     });
   }
   return /*#__PURE__*/jsxs("div", {

package/dist/lib.esm/packages/modal/src/ui/components/Widget/Widget.js

@@ -79,7 +79,7 @@ function Widget(props) {
     } = params;
     setModalState(prevState => _objectSpread(_objectSpread({}, prevState), {}, {
       detailedLoaderConnector: connector,
-      detailedLoaderAdapterName: CONNECTOR_NAMES[connector]
+      detailedLoaderConnectorName: CONNECTOR_NAMES[connector]
     }));
 
     // Call the passed-in handler with the params