@web3auth/modal 10.14.1 → 11.0.0-beta.0

package/dist/lib.cjs/packages/modal/src/react/hooks/useWeb3AuthInner.js

@@ -2,12 +2,16 @@
 
 var noModal = require('@web3auth/no-modal');
 var react = require('react');
-var Web3AuthInnerContext = require('../context/Web3AuthInnerContext.js');
+var modalManager = require('../../modalManager.js');
+var react$1 = require('@web3auth/no-modal/react');
 
+function isModalWeb3AuthInnerContext(context) {
+  return !!context && context.web3Auth instanceof modalManager.Web3Auth;
+}
 const useWeb3AuthInner = () => {
-  const context = react.useContext(Web3AuthInnerContext.Web3AuthInnerContext);
-  if (!context) {
-    throw noModal.WalletInitializationError.fromCode(1000, "usage of useWeb3Auth not wrapped in `Web3AuthContextProvider`.");
+  const context = react.useContext(react$1.Web3AuthInnerContext);
+  if (!isModalWeb3AuthInnerContext(context)) {
+    throw noModal.WalletInitializationError.fromCode(1000, "usage of useWeb3Auth not wrapped in modal `Web3AuthProvider`.");
   }
   return context;
 };

package/dist/lib.cjs/packages/modal/src/react/index.js

@@ -1,39 +1,68 @@
 'use strict';
 
-var useChain = require('./hooks/useChain.js');
-var useCheckout = require('./hooks/useCheckout.js');
-var useEnableMFA = require('./hooks/useEnableMFA.js');
-var useFunding = require('./hooks/useFunding.js');
-var useIdentityToken = require('./hooks/useIdentityToken.js');
-var useManageMFA = require('./hooks/useManageMFA.js');
-var useReceive = require('./hooks/useReceive.js');
-var useSwap = require('./hooks/useSwap.js');
-var useSwitchChain = require('./hooks/useSwitchChain.js');
-var useWalletConnectScanner = require('./hooks/useWalletConnectScanner.js');
-var useWalletServicesPlugin = require('./hooks/useWalletServicesPlugin.js');
-var useWalletUI = require('./hooks/useWalletUI.js');
 var useWeb3Auth = require('./hooks/useWeb3Auth.js');
 var useWeb3AuthConnect = require('./hooks/useWeb3AuthConnect.js');
-var useWeb3AuthDisconnect = require('./hooks/useWeb3AuthDisconnect.js');
-var useWeb3AuthUser = require('./hooks/useWeb3AuthUser.js');
+var react = require('@web3auth/no-modal/react');
 var Web3AuthProvider = require('./Web3AuthProvider.js');
 
 
 
-exports.useChain = useChain.useChain;
-exports.useCheckout = useCheckout.useCheckout;
-exports.useEnableMFA = useEnableMFA.useEnableMFA;
-exports.useFunding = useFunding.useFunding;
-exports.useIdentityToken = useIdentityToken.useIdentityToken;
-exports.useManageMFA = useManageMFA.useManageMFA;
-exports.useReceive = useReceive.useReceive;
-exports.useSwap = useSwap.useSwap;
-exports.useSwitchChain = useSwitchChain.useSwitchChain;
-exports.useWalletConnectScanner = useWalletConnectScanner.useWalletConnectScanner;
-exports.useWalletServicesPlugin = useWalletServicesPlugin.useWalletServicesPlugin;
-exports.useWalletUI = useWalletUI.useWalletUI;
 exports.useWeb3Auth = useWeb3Auth.useWeb3Auth;
 exports.useWeb3AuthConnect = useWeb3AuthConnect.useWeb3AuthConnect;
-exports.useWeb3AuthDisconnect = useWeb3AuthDisconnect.useWeb3AuthDisconnect;
-exports.useWeb3AuthUser = useWeb3AuthUser.useWeb3AuthUser;
+Object.defineProperty(exports, "useAuthTokenInfo", {
+	enumerable: true,
+	get: function () { return react.useAuthTokenInfo; }
+});
+Object.defineProperty(exports, "useChain", {
+	enumerable: true,
+	get: function () { return react.useChain; }
+});
+Object.defineProperty(exports, "useCheckout", {
+	enumerable: true,
+	get: function () { return react.useCheckout; }
+});
+Object.defineProperty(exports, "useEnableMFA", {
+	enumerable: true,
+	get: function () { return react.useEnableMFA; }
+});
+Object.defineProperty(exports, "useFunding", {
+	enumerable: true,
+	get: function () { return react.useFunding; }
+});
+Object.defineProperty(exports, "useManageMFA", {
+	enumerable: true,
+	get: function () { return react.useManageMFA; }
+});
+Object.defineProperty(exports, "useReceive", {
+	enumerable: true,
+	get: function () { return react.useReceive; }
+});
+Object.defineProperty(exports, "useSwap", {
+	enumerable: true,
+	get: function () { return react.useSwap; }
+});
+Object.defineProperty(exports, "useSwitchChain", {
+	enumerable: true,
+	get: function () { return react.useSwitchChain; }
+});
+Object.defineProperty(exports, "useWalletConnectScanner", {
+	enumerable: true,
+	get: function () { return react.useWalletConnectScanner; }
+});
+Object.defineProperty(exports, "useWalletServicesPlugin", {
+	enumerable: true,
+	get: function () { return react.useWalletServicesPlugin; }
+});
+Object.defineProperty(exports, "useWalletUI", {
+	enumerable: true,
+	get: function () { return react.useWalletUI; }
+});
+Object.defineProperty(exports, "useWeb3AuthDisconnect", {
+	enumerable: true,
+	get: function () { return react.useWeb3AuthDisconnect; }
+});
+Object.defineProperty(exports, "useWeb3AuthUser", {
+	enumerable: true,
+	get: function () { return react.useWeb3AuthUser; }
+});
 exports.Web3AuthProvider = Web3AuthProvider.Web3AuthProvider;

package/dist/lib.cjs/packages/modal/src/react/solana/index.js

@@ -1,13 +1,26 @@
 'use strict';
 
-var useSignAndSendTransaction = require('./hooks/useSignAndSendTransaction.js');
-var useSignMessage = require('./hooks/useSignMessage.js');
-var useSignTransaction = require('./hooks/useSignTransaction.js');
-var useSolanaWallet = require('./hooks/useSolanaWallet.js');
+var solana = require('@web3auth/no-modal/react/solana');
 
 
 
-exports.useSignAndSendTransaction = useSignAndSendTransaction.useSignAndSendTransaction;
-exports.useSignMessage = useSignMessage.useSignMessage;
-exports.useSignTransaction = useSignTransaction.useSignTransaction;
-exports.useSolanaWallet = useSolanaWallet.useSolanaWallet;
+Object.defineProperty(exports, "SolanaProvider", {
+	enumerable: true,
+	get: function () { return solana.SolanaProvider; }
+});
+Object.defineProperty(exports, "useSignAndSendTransaction", {
+	enumerable: true,
+	get: function () { return solana.useSignAndSendTransaction; }
+});
+Object.defineProperty(exports, "useSignMessage", {
+	enumerable: true,
+	get: function () { return solana.useSignMessage; }
+});
+Object.defineProperty(exports, "useSignTransaction", {
+	enumerable: true,
+	get: function () { return solana.useSignTransaction; }
+});
+Object.defineProperty(exports, "useSolanaWallet", {
+	enumerable: true,
+	get: function () { return solana.useSolanaWallet; }
+});

package/dist/lib.cjs/packages/modal/src/react/wagmi/provider.js

@@ -7,6 +7,8 @@ var react = require('react');
 var viem = require('viem');
 var wagmi = require('wagmi');
 var connectors = require('wagmi/connectors');
+var useWeb3Auth = require('../hooks/useWeb3Auth.js');
+var react$1 = require('@web3auth/no-modal/react');
 require('@babel/runtime/helpers/defineProperty');
 require('@web3auth/auth');
 require('deepmerge');
@@ -21,13 +23,12 @@ require('@toruslabs/http-helpers');
 require('clsx');
 require('tailwind-merge');
 require('react-i18next');
-require('../../ui/context/RootContext.js');
 require('../../ui/localeImport.js');
+require('../../ui/components/SpinnerLoader/SpinnerLoader.css.js');
+require('../../ui/context/RootContext.js');
 require('classnames');
 require('react-qrcode-logo');
-require('../../ui/components/Login/Login.js');
-var useWeb3Auth = require('../hooks/useWeb3Auth.js');
-var useWeb3AuthDisconnect = require('../hooks/useWeb3AuthDisconnect.js');
+require('../../ui/containers/Login/Login.js');
 var constants = require('./constants.js');
 
 const _excluded = ["children"];
@@ -94,16 +95,16 @@ function Web3AuthWagmiProvider({
 }) {
   const {
     isConnected,
-    provider
+    connection
   } = useWeb3Auth.useWeb3Auth();
   const {
     disconnect
-  } = useWeb3AuthDisconnect.useWeb3AuthDisconnect();
+  } = react$1.useWeb3AuthDisconnect();
   const wagmiConfig = wagmi.useConfig();
   const {
-    reconnect
+    mutate: reconnect
   } = wagmi.useReconnect();
-  wagmi.useAccountEffect({
+  wagmi.useConnectionEffect({
     onDisconnect: async () => {
       noModal.log.info("Disconnected from wagmi");
       if (isConnected) await disconnect();
@@ -117,8 +118,8 @@ function Web3AuthWagmiProvider({
   });
   react.useEffect(() => {
     (async () => {
-      if (isConnected && provider) {
-        const connector = await setupConnector(provider, wagmiConfig);
+      if (isConnected && connection !== null && connection !== void 0 && connection.ethereumProvider) {
+        const connector = await setupConnector(connection.ethereumProvider, wagmiConfig);
         if (!connector) {
           noModal.log.error("Failed to setup react wagmi connector");
           throw new Error("Failed to setup connector");
@@ -131,7 +132,7 @@ function Web3AuthWagmiProvider({
         }
       }
     })();
-  }, [isConnected, wagmiConfig, provider, reconnect]);
+  }, [isConnected, wagmiConfig, connection, reconnect]);
   return /*#__PURE__*/react.createElement(react.Fragment, null, children);
 }
 function WagmiProvider(_ref) {
@@ -215,6 +216,7 @@ function WagmiProvider(_ref) {
       finalConfig.chains = [wagmiChains[0], ...wagmiChains.slice(1)];
     }
     return wagmi.createConfig(finalConfig);
+    // eslint-disable-next-line react-hooks/preserve-manual-memoization
   }, [config, web3Auth, isInitialized]);
   return /*#__PURE__*/react.createElement(wagmi.WagmiProvider, // typecast to WagmiProviderPropsBase to avoid type error
   // as we are omitting the config prop from WagmiProviderProps

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

@@ -11,13 +11,10 @@ function BottomSheet({
   isShown,
   onClose,
   children,
-  uiConfig,
   sheetClassName,
-  showCloseButton = true
+  showCloseButton = true,
+  borderRadiusType = "large"
 }) {
-  const {
-    borderRadiusType = "large"
-  } = uiConfig;
   const handleClose = e => {
     e.stopPropagation();
     if (onClose) onClose();

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

@@ -13,11 +13,11 @@ function Button(props) {
   const SocialButtonProps = buttonProps;
   const WalletButtonProps = buttonProps;
   const {
+    isDark: socialButtonIsDark,
     text,
     showIcon,
     showText,
     method,
-    isDark,
     isPrimaryBtn,
     onClick,
     children,
@@ -25,6 +25,7 @@ function Button(props) {
     buttonRadius
   } = SocialButtonProps;
   const {
+    isDark: walletButtonIsDark,
     label,
     onClick: walletOnClick,
     button,
@@ -38,13 +39,14 @@ function Button(props) {
       showIcon: showIcon,
       showText: showText,
       method: method,
-      isDark: isDark,
+      isDark: socialButtonIsDark,
       isPrimaryBtn: isPrimaryBtn,
       onClick: onClick,
       btnStyle: btnStyle,
       buttonRadius: buttonRadius,
       children: children
     }), type === Button_type.BUTTON_TYPE.WALLET && jsxRuntime.jsx(ButtonWallet, {
+      isDark: walletButtonIsDark,
       label: label,
       walletConnectUri: walletConnectUri,
       onClick: walletOnClick,

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

@@ -4,7 +4,6 @@ var jsxRuntime = require('react/jsx-runtime');
 var cn = require('classnames');
 var react = require('react');
 var reactI18next = require('react-i18next');
-var ThemeContext = require('../../../context/ThemeContext.js');
 var localeImport = require('../../../localeImport.js');
 var utils = require('../../../utils.js');
 var Image = require('../../Image/Image.js');
@@ -14,6 +13,7 @@ function ButtonWallet(props) {
     i18n: localeImport
   });
   const {
+    isDark,
     deviceDetails,
     button,
     walletConnectUri,
@@ -21,7 +21,6 @@ function ButtonWallet(props) {
     label,
     buttonRadius
   } = props;
-  const isDark = react.useContext(ThemeContext.ThemedContext);
   const isLink = react.useMemo(() => deviceDetails.platform !== "desktop" && button.href && button.hasWalletConnect && !button.isInstalled, [deviceDetails, button]);
   const href = react.useMemo(() => button.href ? utils.formatIOSMobile({
     uri: walletConnectUri,

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

@@ -2,7 +2,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var ThemeContext = require('../../context/ThemeContext.js');
+var WidgetContext = require('../../context/WidgetContext.js');
 var utils = require('../../utils.js');
 
 /**
@@ -26,7 +26,7 @@ function Image(props) {
   } = props;
   const {
     isDark
-  } = react.useContext(ThemeContext.ThemedContext);
+  } = WidgetContext.useWidget();
   const imgName = react.useMemo(() => isDark && darkImageId ? darkImageId : imageId, [isDark, darkImageId, imageId]);
   const hoverImgName = react.useMemo(() => isDark && darkHoverImageId ? darkHoverImageId : hoverImageId, [isDark, darkHoverImageId, hoverImageId]);
   if (isButton) {

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

@@ -5,9 +5,8 @@ var react = require('react');
 var reactI18next = require('react-i18next');
 var interfaces = require('../../interfaces.js');
 var localeImport = require('../../localeImport.js');
-var CircularLoader = require('../CircularLoader/CircularLoader.js');
 var Image = require('../Image/Image.js');
-var PulseLoader = require('../PulseLoader/PulseLoader.js');
+var SpinnerLoader = require('../SpinnerLoader/SpinnerLoader.js');
 
 /**
  * ConnectingStatus component
@@ -20,7 +19,6 @@ function ConnectingStatus(props) {
   });
   const {
     connector,
-    appLogo,
     connectorName
   } = props;
   const providerIcon = react.useMemo(() => connector === "twitter" ? jsxRuntime.jsx(Image, {
@@ -32,16 +30,10 @@ function ConnectingStatus(props) {
   }), [connector]);
   return jsxRuntime.jsxs("div", {
     className: "w3a--flex w3a--h-full w3a--flex-1 w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-4",
-    children: [jsxRuntime.jsxs("div", {
-      className: "w3a--flex w3a--items-center w3a--justify-center w3a--gap-x-6",
-      children: [jsxRuntime.jsx("figure", {
-        className: "w3a--flex w3a--size-10 w3a--items-center w3a--justify-center w3a--overflow-hidden",
-        children: jsxRuntime.jsx("img", {
-          src: appLogo,
-          alt: "",
-          className: "w3a--size-full w3a--object-contain"
-        })
-      }), jsxRuntime.jsx(PulseLoader, {}), providerIcon]
+    children: [jsxRuntime.jsx(SpinnerLoader, {
+      width: 95,
+      height: 95,
+      children: providerIcon
     }), jsxRuntime.jsxs("div", {
       className: "w3a--flex w3a--flex-col w3a--gap-y-1",
       children: [jsxRuntime.jsx("div", {
@@ -115,18 +107,15 @@ function ErroredStatus(props) {
   });
 }
 function AuthorizingStatus(props) {
-  var _walletRegistry$defau, _walletRegistry$other;
+  var _externalWalletsConfi;
   const [t] = reactI18next.useTranslation(undefined, {
     i18n: localeImport
   });
   const {
     connector,
     externalWalletsConfig,
-    walletRegistry,
     handleMobileVerifyConnect
   } = props;
-  const registryItem = (walletRegistry === null || walletRegistry === void 0 || (_walletRegistry$defau = walletRegistry.default) === null || _walletRegistry$defau === void 0 ? void 0 : _walletRegistry$defau[connector]) || (walletRegistry === null || walletRegistry === void 0 || (_walletRegistry$other = walletRegistry.others) === null || _walletRegistry$other === void 0 ? void 0 : _walletRegistry$other[connector]);
-  const primaryColor = (registryItem === null || registryItem === void 0 ? void 0 : registryItem.primaryColor) || "";
   const handleMobileVerifyConnectClick = () => {
     handleMobileVerifyConnect({
       connector: connector
@@ -137,16 +126,13 @@ function AuthorizingStatus(props) {
     children: [jsxRuntime.jsx("p", {
       className: "w3a--p-2 w3a--text-center w3a--text-base w3a--font-semibold w3a--text-app-gray-900 dark:w3a--text-app-white",
       children: t("modal.loader.authorizing-header", {
-        connector: externalWalletsConfig[connector].label
+        connector: (_externalWalletsConfi = externalWalletsConfig[connector]) === null || _externalWalletsConfi === void 0 ? void 0 : _externalWalletsConfi.label
       })
     }), jsxRuntime.jsx("div", {
       className: "w3a--flex w3a--justify-center",
-      children: jsxRuntime.jsx(CircularLoader, {
+      children: jsxRuntime.jsx(SpinnerLoader, {
         width: 95,
         height: 95,
-        thickness: 6,
-        arcSizeDeg: 100,
-        arcColors: primaryColor ? [primaryColor, primaryColor] : undefined,
         children: jsxRuntime.jsx(Image, {
           imageId: `login-${connector}`,
           hoverImageId: `login-${connector}`,
@@ -164,6 +150,102 @@ function AuthorizingStatus(props) {
     })]
   });
 }
+function ConsentRequiredStatus(props) {
+  const {
+    onAccept,
+    onDecline,
+    privacyPolicy,
+    tncLink
+  } = props;
+  const [t] = reactI18next.useTranslation(undefined, {
+    i18n: localeImport
+  });
+  const [isSubmitting, setIsSubmitting] = react.useState(false);
+  const handleAccept = async () => {
+    setIsSubmitting(true);
+    try {
+      await (onAccept === null || onAccept === void 0 ? void 0 : onAccept());
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  const handleDecline = async () => {
+    setIsSubmitting(true);
+    try {
+      await (onDecline === null || onDecline === void 0 ? void 0 : onDecline());
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  return jsxRuntime.jsxs("div", {
+    className: "w3a--flex w3a--w-full w3a--flex-col w3a--items-center w3a--gap-y-6 w3a--mt-8",
+    children: [jsxRuntime.jsx("div", {
+      className: "w3a--flex w3a--items-center w3a--justify-center w3a--p-3 w3a--bg-app-gray-100 dark:w3a--bg-app-gray-800 w3a--rounded-full w3a--text-app-gray-600 dark:w3a--text-app-white",
+      children: jsxRuntime.jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        className: "w3a--size-10",
+        children: jsxRuntime.jsx("path", {
+          stroke: "currentColor",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: "2",
+          d: "M9 12h6m-6 4h6m2 5H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5.586a1 1 0 0 1 .707.293l5.414 5.414a1 1 0 0 1 .293.707V19a2 2 0 0 1-2 2"
+        })
+      })
+    }), jsxRuntime.jsx("div", {
+      className: "w3a--w-full w3a--px-8 w3a--text-center w3a--text-app-gray-900 dark:w3a--text-app-white",
+      children: t("modal.consent.description", {
+        defaultValue: "To proceed, please accept the terms and privacy policy"
+      })
+    }), (tncLink || privacyPolicy) && jsxRuntime.jsxs("div", {
+      className: "w3a--flex w3a--w-full w3a--flex-col w3a--gap-y-2",
+      children: [tncLink && jsxRuntime.jsx("a", {
+        href: tncLink,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "w3a--btn !w3a--text-sm w3a--font-light !w3a--justify-start w3a--rounded-full w3a--border-app-gray-50 w3a--bg-app-gray-50 w3a--p-3 w3a--text-left w3a--text-app-gray-700 hover:w3a--border-app-gray-200 hover:w3a--bg-app-gray-200 hover:w3a--text-app-gray-900 dark:w3a--border-app-gray-800 dark:w3a--bg-app-gray-800 dark:w3a--text-app-white dark:hover:w3a--border-app-gray-600 dark:hover:w3a--bg-app-gray-600",
+        children: t("modal.consent.tnc", {
+          defaultValue: "Terms of service"
+        })
+      }), privacyPolicy && jsxRuntime.jsx("a", {
+        href: privacyPolicy,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "w3a--btn !w3a--text-sm w3a--font-light !w3a--justify-start w3a--rounded-full w3a--border-app-gray-50 w3a--bg-app-gray-50 w3a--p-3 w3a--text-left w3a--text-app-gray-700 hover:w3a--border-app-gray-200 hover:w3a--bg-app-gray-200 hover:w3a--text-app-gray-900 dark:w3a--border-app-gray-800 dark:w3a--bg-app-gray-800 dark:w3a--text-app-white dark:hover:w3a--border-app-gray-600 dark:hover:w3a--bg-app-gray-600",
+        children: t("modal.consent.privacy", {
+          defaultValue: "Privacy Policy"
+        })
+      })]
+    }), jsxRuntime.jsxs("div", {
+      className: "w3a--flex w3a--w-full w3a--gap-x-2",
+      children: [jsxRuntime.jsx("button", {
+        type: "button",
+        disabled: isSubmitting,
+        onClick: handleDecline,
+        className: "w3a--btn w3a--rounded-full disabled:w3a--opacity-60",
+        children: jsxRuntime.jsx("p", {
+          className: "w3a--text-app-gray-900 dark:w3a--text-app-white",
+          children: t("modal.consent.decline", {
+            defaultValue: "Decline"
+          })
+        })
+      }), jsxRuntime.jsx("button", {
+        type: "button",
+        disabled: isSubmitting,
+        onClick: handleAccept,
+        className: "w3a--btn w3a--rounded-full w3a--border-app-primary-600 w3a--bg-app-primary-600 hover:w3a--border-app-primary-700 hover:w3a--bg-app-primary-700 disabled:w3a--opacity-60 dark:w3a--border-app-primary-600 dark:w3a--bg-app-primary-600 dark:hover:w3a--border-app-primary-700 dark:hover:w3a--bg-app-primary-700",
+        children: jsxRuntime.jsx("p", {
+          className: "w3a--text-app-onPrimary",
+          children: t("modal.consent.accept", {
+            defaultValue: "Accept"
+          })
+        })
+      })]
+    })]
+  });
+}
 /**
  * Loader component
  * @param props - LoaderProps
@@ -175,13 +257,15 @@ function Loader(props) {
     connectorName,
     modalStatus,
     onClose,
-    appLogo,
     message,
     isConnectAndSignAuthenticationMode,
     externalWalletsConfig,
-    walletRegistry,
     handleMobileVerifyConnect,
-    hideSuccessScreen = false
+    hideSuccessScreen = false,
+    onAcceptConsent,
+    onDeclineConsent,
+    privacyPolicy,
+    tncLink
   } = props;
   const isConnectedAccordingToAuthenticationMode = react.useMemo(() => !isConnectAndSignAuthenticationMode && modalStatus === interfaces.MODAL_STATUS.CONNECTED || isConnectAndSignAuthenticationMode && modalStatus === interfaces.MODAL_STATUS.AUTHORIZED, [modalStatus, isConnectAndSignAuthenticationMode]);
   react.useEffect(() => {
@@ -195,12 +279,12 @@ function Loader(props) {
       return () => clearTimeout(timeout);
     }
   }, [isConnectedAccordingToAuthenticationMode, hideSuccessScreen, onClose]);
+  const isConsentRequiringStatus = modalStatus === interfaces.MODAL_STATUS.CONSENT_REQUIRING;
   return jsxRuntime.jsxs("div", {
-    className: "w3a--flex w3a--h-full w3a--flex-1 w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-4",
+    className: isConsentRequiringStatus ? "w3a--flex w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-4" : "w3a--flex w3a--h-full w3a--flex-1 w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-4",
     children: [modalStatus === interfaces.MODAL_STATUS.CONNECTING && jsxRuntime.jsx(ConnectingStatus, {
       connector: connector,
-      connectorName: connectorName,
-      appLogo: appLogo
+      connectorName: connectorName
     }), isConnectedAccordingToAuthenticationMode && !hideSuccessScreen && jsxRuntime.jsx(ConnectedStatus, {
       message: message
     }), modalStatus === interfaces.MODAL_STATUS.ERRORED && jsxRuntime.jsx(ErroredStatus, {
@@ -208,8 +292,12 @@ function Loader(props) {
     }), modalStatus === interfaces.MODAL_STATUS.AUTHORIZING && jsxRuntime.jsx(AuthorizingStatus, {
       connector: connector,
       externalWalletsConfig: externalWalletsConfig,
-      walletRegistry: walletRegistry,
       handleMobileVerifyConnect: handleMobileVerifyConnect
+    }), isConsentRequiringStatus && jsxRuntime.jsx(ConsentRequiredStatus, {
+      onAccept: onAcceptConsent,
+      onDecline: onDeclineConsent,
+      privacyPolicy: privacyPolicy,
+      tncLink: tncLink
     })]
   });
 }

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

@@ -30,6 +30,7 @@ function Modal(props) {
         setIsOpen(true);
       }, 50);
     } else {
+      // eslint-disable-next-line react-hooks/set-state-in-effect -- intentional
       setIsOpen(false);
       // Remove overflow styling to enable scroll again.
       document.body.style.overflow = "";

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

@@ -64,7 +64,6 @@ function SocialLoginList(props) {
               children: getProviderIcon(row.method, isDark, ".svg")
             }),
             onClick: () => handleSocialLoginClick({
-              connector: row.connector,
               loginParams: row.loginParams
             }),
             buttonRadius
@@ -88,7 +87,6 @@ function SocialLoginList(props) {
                 children: getProviderIcon(row.method, isDark, ".svg")
               }),
               onClick: () => handleSocialLoginClick({
-                connector: row.connector,
                 loginParams: row.loginParams
               }),
               buttonRadius
@@ -97,6 +95,7 @@ function SocialLoginList(props) {
         }, row.method)), canShowMore && visibleRow.length > 4 && jsxRuntime.jsx(Button, {
           type: Button_type.BUTTON_TYPE.SOCIAL,
           props: {
+            isDark,
             showIcon: false,
             onClick: handleExpandSocialLogins,
             btnStyle: "w3a--flex w3a--items-center !w3a--justify-center w3a--w-full w3a--h-11",
@@ -133,7 +132,6 @@ function SocialLoginList(props) {
             isDark,
             isPrimaryBtn: false,
             onClick: () => handleSocialLoginClick({
-              connector: row.connector,
               loginParams: row.loginParams
             }),
             btnStyle: "w3a--group w3a--relative w3a--overflow-hidden w3a--flex w3a--items-center !w3a--justify-start w3a--w-full w3a--h-11",

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

@@ -0,0 +1,6 @@
+'use strict';
+
+var styleInject_es = require('../../../../../../node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = ".w3a-parent-container .w3a--spinner-loader{display:inline-flex;height:60px;position:relative;width:60px}.w3a-parent-container .w3a--spinner-loader-ring{--spinner-color:var(--app-gray-400);background-image:conic-gradient(from 0deg at 50% 50%,var(--spinner-color) 0,#e5e7ebcc 90deg,#e5e7ebcc 270deg,var(--spinner-color) 1turn);background-position:0 0;background-size:100% 100%;border-radius:100vw;display:inline-block;height:100%;-webkit-mask:radial-gradient(farthest-side,#000 98%,#0000) center/85% 85% no-repeat,linear-gradient(#000 0 0);-webkit-mask-composite:destination-out;mask:radial-gradient(farthest-side,#000 98%,#0000) center/85% 85% no-repeat,linear-gradient(#000 0 0);mask-composite:exclude;position:absolute;width:100%}.w3a-parent-container .w3a--dark .w3a--spinner-loader-ring{background-image:conic-gradient(from 0deg at 50% 50%,var(--spinner-color) 0,#e5e7eb33 90deg,#e5e7eb33 270deg,var(--spinner-color) 1turn)}.w3a-parent-container .w3a--spinner-loader-image{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}";
+styleInject_es(css_248z);

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

@@ -0,0 +1,30 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('./SpinnerLoader.css.js');
+var utils = require('../../utils.js');
+
+const SpinnerLoader = props => {
+  const {
+    children,
+    classes,
+    width = 60,
+    height = 60,
+    className
+  } = props;
+  return jsxRuntime.jsxs("div", {
+    className: utils.cn("w3a--spinner-loader", className),
+    style: {
+      width,
+      height
+    },
+    children: [jsxRuntime.jsx("div", {
+      className: utils.cn("w3a--spinner-loader-ring w3a--animate-spin", classes === null || classes === void 0 ? void 0 : classes.spinner)
+    }), children && jsxRuntime.jsx("div", {
+      className: "w3a--spinner-loader-image",
+      children: children
+    })]
+  });
+};
+
+module.exports = SpinnerLoader;

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

@@ -9,7 +9,7 @@ const Toast = () => {
   const {
     toast,
     setToast
-  } = react.useContext(RootContext.RootContext);
+  } = RootContext.useToast();
   react.useEffect(() => {
     if (toast.message) {
       setTimeout(() => {

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

@@ -1,10 +1,13 @@
 'use strict';
 
 const PAGES = {
-  LOGIN: "login",
-  CONNECT_WALLET: "connect_wallet"};
+  /** Main login options: social logins and wallet button (e.g. MetaMask) */
+  LOGIN_OPTIONS: "login",
+  /** List of all available wallets to connect */
+  WALLET_LIST: "connect_wallet"};
 const CONNECT_WALLET_PAGES = {
   CONNECT_WALLET: "Connect Your Wallet",
+  /** Sub-page title when showing QR/instructions for selected wallet */
   SELECTED_WALLET: "Selected Wallet"
 };
 const DEFAULT_LOGO_LIGHT = "https://images.web3auth.io/web3auth-logo-w.svg"; // logo used on light mode