@web3auth/modal 10.15.0 → 11.0.0-beta.0

package/dist/lib.esm/packages/modal/src/ui/containers/Root/RootBodySheets/RootBodySheets.js

@@ -0,0 +1,183 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import BottomSheet from '../../../components/BottomSheet/BottomSheet.js';
+import Image from '../../../components/Image/Image.js';
+import { useModalState } from '../../../context/ModalStateContext.js';
+import { useBodyState } from '../../../context/RootContext.js';
+import { useWidget } from '../../../context/WidgetContext.js';
+import i18nInstance from '../../../localeImport.js';
+import { getMobileInstallLink, getOsName, getIcons, cn, getBrowserExtensionUrl, getBrowserName } from '../../../utils.js';
+import ConnectWalletChainNamespaceSelect from '../../ConnectWallet/ConnectWalletChainNamespaceSelect/ConnectWalletChainNamespaceSelect.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function RootBodySheets() {
+  var _bodyState$installLin2, _bodyState$installLin4, _bodyState$multiChain, _bodyState$installLin5;
+  const [t] = useTranslation(undefined, {
+    i18n: i18nInstance
+  });
+  const {
+    preHandleExternalWalletClick
+  } = useModalState();
+  const {
+    bodyState,
+    setBodyState
+  } = useBodyState();
+  const {
+    isDark,
+    deviceDetails,
+    uiConfig
+  } = useWidget();
+  const {
+    buttonRadiusType
+  } = uiConfig;
+  const mobileInstallLinks = useMemo(() => {
+    var _bodyState$installLin;
+    if (deviceDetails.platform === "desktop") return [];
+    const installConfig = ((_bodyState$installLin = bodyState.installLinks) === null || _bodyState$installLin === void 0 || (_bodyState$installLin = _bodyState$installLin.wallet) === null || _bodyState$installLin === void 0 || (_bodyState$installLin = _bodyState$installLin.walletRegistryItem) === null || _bodyState$installLin === void 0 ? void 0 : _bodyState$installLin.app) || {};
+    const installLinks = Object.keys(installConfig).reduce((acc, osKey) => {
+      if (!["android", "ios"].includes(osKey)) return acc;
+      const appId = installConfig[osKey];
+      if (!appId) return acc;
+      const appUrl = getMobileInstallLink(osKey, appId);
+      if (!appUrl) return acc;
+      const logoLight = `${osKey}-light`;
+      const logoDark = `${osKey}-dark`;
+      acc.push(/*#__PURE__*/jsx("li", {
+        className: "w3a--w-full",
+        children: /*#__PURE__*/jsx("a", {
+          href: appUrl,
+          rel: "noopener noreferrer",
+          target: "_blank",
+          children: /*#__PURE__*/jsxs("button", {
+            type: "button",
+            className: cn("w3a--group w3a--relative w3a--overflow-hidden w3a--h-11 w3a--flex w3a--w-full w3a--items-center w3a--justify-start w3a--gap-x-2 w3a--border w3a--border-app-gray-200 w3a--bg-app-gray-50 w3a--px-5 w3a--py-2.5 hover:w3a--translate-y-[0.5px] hover:w3a--border-app-gray-50 dark:w3a--border-app-gray-500 dark:w3a--bg-app-gray-800 dark:hover:w3a--border-app-gray-800", {
+              "w3a--rounded-full": buttonRadiusType === "pill",
+              "w3a--rounded-lg": buttonRadiusType === "rounded",
+              "w3a--rounded-none": buttonRadiusType === "square"
+            }),
+            children: [/*#__PURE__*/jsx(Image, {
+              imageId: logoLight,
+              darkImageId: logoDark,
+              hoverImageId: logoLight,
+              darkHoverImageId: logoDark,
+              height: "28",
+              width: "28",
+              isButton: true
+            }), /*#__PURE__*/jsx("span", {
+              className: "w3a--text-sm w3a--font-medium w3a--text-app-gray-900 dark:w3a--text-app-white",
+              children: t("modal.external.install-mobile-app", {
+                os: getOsName(osKey)
+              })
+            }), /*#__PURE__*/jsx("img", {
+              id: "install-links-arrow",
+              className: "w3a--absolute w3a--right-4 w3a--top-1/2 -w3a--translate-x-6 -w3a--translate-y-1/2 w3a--opacity-0 w3a--transition-all w3a--duration-300 group-hover:w3a--translate-x-0 group-hover:w3a--opacity-100",
+              src: getIcons(isDark ? "chevron-right-dark" : "chevron-right-light"),
+              alt: "arrow"
+            })]
+          })
+        })
+      }, appUrl));
+      return acc;
+    }, []);
+    return installLinks;
+  }, [(_bodyState$installLin2 = bodyState.installLinks) === null || _bodyState$installLin2 === void 0 || (_bodyState$installLin2 = _bodyState$installLin2.wallet) === null || _bodyState$installLin2 === void 0 || (_bodyState$installLin2 = _bodyState$installLin2.walletRegistryItem) === null || _bodyState$installLin2 === void 0 ? void 0 : _bodyState$installLin2.app, deviceDetails.platform, isDark, t, buttonRadiusType]);
+  const desktopInstallLinks = useMemo(() => {
+    var _bodyState$installLin3;
+    if (deviceDetails.platform !== "desktop") return [];
+    const browserType = deviceDetails.browser === "brave" ? "chrome" : deviceDetails.browser;
+    const browserExtensionConfig = ((_bodyState$installLin3 = bodyState.installLinks) === null || _bodyState$installLin3 === void 0 || (_bodyState$installLin3 = _bodyState$installLin3.wallet) === null || _bodyState$installLin3 === void 0 || (_bodyState$installLin3 = _bodyState$installLin3.walletRegistryItem) === null || _bodyState$installLin3 === void 0 ? void 0 : _bodyState$installLin3.app) || {};
+    const extensionForCurrentBrowser = browserExtensionConfig.browser && browserExtensionConfig.browser.includes(browserType) ? browserExtensionConfig.browser : undefined;
+    const browserExtensionId = browserExtensionConfig[browserType] || extensionForCurrentBrowser;
+    const browserExtensionUrl = browserExtensionId ? getBrowserExtensionUrl(browserType, browserExtensionId) : null;
+    const installLink = browserExtensionUrl ? /*#__PURE__*/jsx("li", {
+      children: /*#__PURE__*/jsx("a", {
+        href: browserExtensionUrl,
+        rel: "noopener noreferrer",
+        target: "_blank",
+        children: /*#__PURE__*/jsxs("button", {
+          type: "button",
+          className: cn("w3a--group w3a--relative w3a--overflow-hidden w3a--h-11 w3a--flex w3a--w-full w3a--items-center w3a--justify-start w3a--gap-x-2 w3a--border w3a--border-app-gray-200 w3a--bg-app-gray-50 w3a--px-5 w3a--py-2.5 hover:w3a--translate-y-[0.5px] hover:w3a--border-app-gray-50 dark:w3a--border-app-gray-500 dark:w3a--bg-app-gray-800 dark:hover:w3a--border-app-gray-800", {
+            "w3a--rounded-full": buttonRadiusType === "pill",
+            "w3a--rounded-lg": buttonRadiusType === "rounded",
+            "w3a--rounded-none": buttonRadiusType === "square"
+          }),
+          children: [/*#__PURE__*/jsx(Image, {
+            imageId: deviceDetails.browser,
+            darkImageId: deviceDetails.browser,
+            hoverImageId: deviceDetails.browser,
+            darkHoverImageId: deviceDetails.browser,
+            height: "30",
+            width: "30",
+            isButton: true
+          }), /*#__PURE__*/jsx("span", {
+            className: "w3a--text-sm w3a--font-medium w3a--text-app-gray-900 dark:w3a--text-app-white",
+            children: t("modal.external.install-browser-extension", {
+              browser: getBrowserName(deviceDetails.browser)
+            })
+          }), /*#__PURE__*/jsx("img", {
+            id: "install-links-arrow",
+            className: "w3a--absolute w3a--right-4 w3a--top-1/2 -w3a--translate-x-6 -w3a--translate-y-1/2 w3a--opacity-0 w3a--transition-all w3a--duration-300 group-hover:w3a--translate-x-0 group-hover:w3a--opacity-100",
+            src: getIcons(isDark ? "chevron-right-dark" : "chevron-right-light"),
+            alt: "arrow"
+          })]
+        })
+      })
+    }, browserExtensionUrl) : null;
+    return [installLink, ...mobileInstallLinks];
+  }, [(_bodyState$installLin4 = bodyState.installLinks) === null || _bodyState$installLin4 === void 0 || (_bodyState$installLin4 = _bodyState$installLin4.wallet) === null || _bodyState$installLin4 === void 0 || (_bodyState$installLin4 = _bodyState$installLin4.walletRegistryItem) === null || _bodyState$installLin4 === void 0 ? void 0 : _bodyState$installLin4.app, deviceDetails.browser, deviceDetails.platform, isDark, mobileInstallLinks, buttonRadiusType, t]);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [((_bodyState$multiChain = bodyState.multiChainSelector) === null || _bodyState$multiChain === void 0 ? void 0 : _bodyState$multiChain.show) && /*#__PURE__*/jsx(BottomSheet, {
+      borderRadiusType: uiConfig.borderRadiusType,
+      isShown: bodyState.multiChainSelector.show,
+      onClose: () => setBodyState(_objectSpread(_objectSpread({}, bodyState), {}, {
+        multiChainSelector: {
+          show: false,
+          wallet: null
+        }
+      })),
+      children: /*#__PURE__*/jsx(ConnectWalletChainNamespaceSelect, {
+        isDark: isDark,
+        wallet: bodyState.multiChainSelector.wallet,
+        handleExternalWalletClick: params => {
+          preHandleExternalWalletClick(params);
+          setBodyState(_objectSpread(_objectSpread({}, bodyState), {}, {
+            multiChainSelector: {
+              show: false,
+              wallet: null
+            }
+          }));
+        }
+      })
+    }), ((_bodyState$installLin5 = bodyState.installLinks) === null || _bodyState$installLin5 === void 0 ? void 0 : _bodyState$installLin5.show) && /*#__PURE__*/jsxs(BottomSheet, {
+      borderRadiusType: uiConfig.borderRadiusType,
+      isShown: bodyState.installLinks.show,
+      onClose: () => setBodyState(_objectSpread(_objectSpread({}, bodyState), {}, {
+        installLinks: {
+          show: false,
+          wallet: null
+        }
+      })),
+      children: [/*#__PURE__*/jsx("p", {
+        className: "w3a--mb-2 w3a--text-center w3a--text-base w3a--font-semibold w3a--text-app-gray-900 dark:w3a--text-app-white",
+        children: t("modal.getWallet")
+      }), /*#__PURE__*/jsx("div", {
+        className: "w3a--my-4 w3a--flex w3a--justify-center",
+        children: /*#__PURE__*/jsx(Image, {
+          imageId: `login-${bodyState.installLinks.wallet.name}`,
+          hoverImageId: `login-${bodyState.installLinks.wallet.name}`,
+          fallbackImageId: "wallet",
+          height: "80",
+          width: "80",
+          isButton: true,
+          extension: bodyState.installLinks.wallet.imgExtension
+        })
+      }), /*#__PURE__*/jsx("ul", {
+        className: "w3a--flex w3a--flex-col w3a--gap-y-2",
+        children: deviceDetails.platform === "desktop" ? desktopInstallLinks : mobileInstallLinks
+      })]
+    })]
+  });
+}
+
+export { RootBodySheets as default };

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

@@ -0,0 +1,104 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import { WALLET_CONNECTORS, WIDGET_TYPE } from '@web3auth/no-modal';
+import { useMemo, useEffect } from 'react';
+import Modal from '../../components/Modal/Modal.js';
+import { PAGES } from '../../constants.js';
+import { ModalStateProvider, useModalState } from '../../context/ModalStateContext.js';
+import { useWidget } from '../../context/WidgetContext.js';
+import { MODAL_STATUS } from '../../interfaces.js';
+import Embed from '../Embed/Embed.js';
+import Root from '../Root/Root.js';
+import { jsx } from 'react/jsx-runtime';
+
+function WidgetContent() {
+  const {
+    uiConfig,
+    handleExternalWalletClick,
+    closeModal,
+    isConnectAndSignAuthenticationMode
+  } = useWidget();
+  const {
+    modalState,
+    setModalState
+  } = useModalState();
+  const {
+    widgetType
+  } = uiConfig;
+  const onCloseModal = () => {
+    setModalState(prevState => _objectSpread(_objectSpread({}, prevState), {}, {
+      externalWalletsVisibility: false,
+      modalVisibility: false,
+      currentPage: PAGES.LOGIN_OPTIONS
+    }));
+    closeModal();
+  };
+  const onCloseLoader = () => {
+    if (!isConnectAndSignAuthenticationMode && modalState.status === MODAL_STATUS.CONNECTED) {
+      setModalState(_objectSpread(_objectSpread({}, modalState), {}, {
+        modalVisibility: false,
+        externalWalletsVisibility: false
+      }));
+    }
+    if (isConnectAndSignAuthenticationMode && modalState.status === MODAL_STATUS.AUTHORIZED) {
+      setModalState(_objectSpread(_objectSpread({}, modalState), {}, {
+        modalVisibility: false,
+        externalWalletsVisibility: false
+      }));
+    }
+    if (modalState.status === MODAL_STATUS.ERRORED) {
+      setModalState(_objectSpread(_objectSpread({}, modalState), {}, {
+        modalVisibility: true,
+        status: MODAL_STATUS.INITIALIZED
+      }));
+    }
+  };
+  const showCloseIcon = useMemo(() => {
+    return modalState.status === MODAL_STATUS.INITIALIZED || modalState.status === MODAL_STATUS.CONNECTED || modalState.status === MODAL_STATUS.ERRORED || modalState.status === MODAL_STATUS.AUTHORIZED;
+  }, [modalState.status]);
+  useEffect(() => {
+    // TODO: maybe move this inside root
+    if (!modalState.modalVisibility) return;
+    if (typeof modalState.externalWalletsConfig === "object") {
+      var _modalState$externalW;
+      // auto connect to WC if not injected to generate QR code URI for mobile connection
+      const wcAvailable = (((_modalState$externalW = modalState.externalWalletsConfig[WALLET_CONNECTORS.WALLET_CONNECT_V2]) === null || _modalState$externalW === void 0 ? void 0 : _modalState$externalW.showOnModal) || false) !== false;
+      if (wcAvailable && !modalState.walletConnectUri && typeof handleExternalWalletClick === "function") {
+        handleExternalWalletClick({
+          connector: WALLET_CONNECTORS.WALLET_CONNECT_V2
+        });
+      }
+    }
+  }, [modalState, handleExternalWalletClick]);
+  const rootElement = /*#__PURE__*/jsx(Root, {
+    onCloseLoader: onCloseLoader
+  });
+  if (widgetType === WIDGET_TYPE.MODAL) {
+    return /*#__PURE__*/jsx(Modal, {
+      open: modalState.modalVisibility,
+      placement: "center",
+      padding: false,
+      showCloseIcon: showCloseIcon,
+      onClose: onCloseModal,
+      borderRadius: uiConfig.borderRadiusType,
+      children: modalState.modalVisibility && rootElement
+    });
+  }
+  return /*#__PURE__*/jsx(Embed, {
+    open: modalState.modalVisibility,
+    padding: false,
+    onClose: onCloseModal,
+    borderRadius: uiConfig.borderRadiusType,
+    children: modalState.modalVisibility && rootElement
+  });
+}
+function Widget(props) {
+  const {
+    stateListener
+  } = props;
+  return /*#__PURE__*/jsx(ModalStateProvider, {
+    stateListener: stateListener,
+    children: /*#__PURE__*/jsx(WidgetContent, {})
+  });
+}
+
+export { Widget as default };

package/dist/lib.esm/packages/modal/src/ui/context/ModalStateContext.js

@@ -0,0 +1,160 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import { AUTH_CONNECTION } from '@web3auth/auth';
+import { WIDGET_TYPE, log, cloneDeep, WALLET_CONNECTORS, CONNECTOR_NAMES } from '@web3auth/no-modal';
+import deepmerge from 'deepmerge';
+import { useMemo, useState, useEffect, useCallback, createContext, useContext } from 'react';
+import { PAGES } from '../constants.js';
+import { MODAL_STATUS } from '../interfaces.js';
+import { useWidget } from './WidgetContext.js';
+import { jsx } from 'react/jsx-runtime';
+
+const initialModalState = {
+  // UI State
+  status: MODAL_STATUS.INITIALIZED,
+  modalVisibility: false,
+  externalWalletsVisibility: false,
+  currentPage: PAGES.LOGIN_OPTIONS,
+  // Loading State
+  postLoadingMessage: "",
+  detailedLoaderConnector: "",
+  detailedLoaderConnectorName: "",
+  // External Wallets State
+  hasExternalWallets: false,
+  externalWalletsInitialized: false,
+  showExternalWalletsOnly: false,
+  walletConnectUri: "",
+  metamaskConnectUri: "",
+  // Config State
+  socialLoginsConfig: {
+    loginMethods: {},
+    loginMethodsOrder: [],
+    uiConfig: {}
+  },
+  externalWalletsConfig: {}
+};
+const ModalStateContext = /*#__PURE__*/createContext(undefined);
+const ModalStateProvider = ({
+  children,
+  stateListener
+}) => {
+  const {
+    uiConfig,
+    handleExternalWalletClick,
+    handleSocialLoginClick,
+    handleShowExternalWallets: onShowExternalWallets
+  } = useWidget();
+  const initialVisibility = useMemo(() => uiConfig.widgetType === WIDGET_TYPE.EMBED, [uiConfig.widgetType]);
+  const [modalState, setModalState] = useState(_objectSpread(_objectSpread({}, initialModalState), {}, {
+    modalVisibility: initialVisibility
+  }));
+
+  // Listen for external state updates
+  useEffect(() => {
+    stateListener.on("STATE_UPDATED", newModalState => {
+      log.debug("state updated", newModalState);
+      setModalState(prevState => {
+        const mergedState = cloneDeep(deepmerge(prevState, newModalState, {
+          arrayMerge: (_prevState, newState) => newState
+        }));
+        return mergedState;
+      });
+    });
+    stateListener.emit("MOUNTED");
+  }, [stateListener]);
+
+  // Update visibility when initialVisibility changes
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- intentional
+    setModalState(prev => _objectSpread(_objectSpread({}, prev), {}, {
+      modalVisibility: initialVisibility
+    }));
+  }, [initialVisibility]);
+  const isEmailPrimary = useMemo(() => {
+    var _modalState$socialLog;
+    return ((_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";
+  }, [modalState.socialLoginsConfig]);
+  const isExternalPrimary = useMemo(() => {
+    var _modalState$socialLog2;
+    return ((_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";
+  }, [modalState.socialLoginsConfig]);
+
+  // Memo for checking if social logins are visible
+  const areSocialLoginsVisible = useMemo(() => {
+    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]) => ![AUTH_CONNECTION.EMAIL_PASSWORDLESS, AUTH_CONNECTION.SMS_PASSWORDLESS].includes(k) && v.showOnModal !== false);
+    return isAnySocialLoginVisible;
+  }, [modalState.showExternalWalletsOnly, modalState.socialLoginsConfig]);
+
+  // Memo for checking if email passwordless login is visible
+  const isEmailPasswordLessLoginVisible = useMemo(() => {
+    var _modalState$socialLog5;
+    return (_modalState$socialLog5 = modalState.socialLoginsConfig) === null || _modalState$socialLog5 === void 0 || (_modalState$socialLog5 = _modalState$socialLog5.loginMethods[AUTH_CONNECTION.EMAIL_PASSWORDLESS]) === null || _modalState$socialLog5 === void 0 ? void 0 : _modalState$socialLog5.showOnModal;
+  }, [modalState.socialLoginsConfig]);
+
+  // Memo for checking if SMS passwordless login is visible
+  const isSmsPasswordLessLoginVisible = useMemo(() => {
+    var _modalState$socialLog6;
+    return (_modalState$socialLog6 = modalState.socialLoginsConfig) === null || _modalState$socialLog6 === void 0 || (_modalState$socialLog6 = _modalState$socialLog6.loginMethods[AUTH_CONNECTION.SMS_PASSWORDLESS]) === null || _modalState$socialLog6 === void 0 ? void 0 : _modalState$socialLog6.showOnModal;
+  }, [modalState.socialLoginsConfig]);
+  const showPasswordLessInput = useMemo(() => isEmailPasswordLessLoginVisible || isSmsPasswordLessLoginVisible, [isEmailPasswordLessLoginVisible, isSmsPasswordLessLoginVisible]);
+  const showExternalWalletButton = useMemo(() => modalState.hasExternalWallets || !!modalState.externalWalletsConfig[WALLET_CONNECTORS.METAMASK], [modalState.hasExternalWallets, modalState.externalWalletsConfig]);
+  const preHandleExternalWalletClick = useCallback(params => {
+    const {
+      connector
+    } = params;
+    setModalState(prevState => _objectSpread(_objectSpread({}, prevState), {}, {
+      detailedLoaderConnector: connector,
+      detailedLoaderConnectorName: CONNECTOR_NAMES[connector]
+    }));
+    handleExternalWalletClick === null || handleExternalWalletClick === void 0 || handleExternalWalletClick(params);
+  }, [handleExternalWalletClick]);
+  const preHandleSocialLoginClick = useCallback(params => {
+    const {
+      loginParams
+    } = params;
+    setModalState(prevState => _objectSpread(_objectSpread({}, prevState), {}, {
+      detailedLoaderConnector: loginParams.authConnection,
+      detailedLoaderConnectorName: loginParams.name
+    }));
+    handleSocialLoginClick === null || handleSocialLoginClick === void 0 || handleSocialLoginClick(params);
+  }, [handleSocialLoginClick]);
+  const handleShowExternalWallets = useCallback(flag => {
+    setModalState(prevState => _objectSpread(_objectSpread({}, prevState), {}, {
+      externalWalletsVisibility: flag
+    }));
+    if (flag && onShowExternalWallets) onShowExternalWallets(modalState.externalWalletsInitialized);
+  }, [onShowExternalWallets, modalState.externalWalletsInitialized]);
+
+  // TODO: check if can further refactor this logic
+  const shouldShowLoginPage = useMemo(() => (areSocialLoginsVisible || showPasswordLessInput || !!modalState.externalWalletsConfig[WALLET_CONNECTORS.METAMASK]) && !modalState.externalWalletsVisibility, [areSocialLoginsVisible, showPasswordLessInput, modalState.externalWalletsVisibility, modalState.externalWalletsConfig]);
+  const value = useMemo(() => ({
+    modalState,
+    setModalState,
+    preHandleExternalWalletClick,
+    preHandleSocialLoginClick,
+    handleShowExternalWallets,
+    areSocialLoginsVisible,
+    isEmailPrimary,
+    isExternalPrimary,
+    isEmailPasswordLessLoginVisible,
+    isSmsPasswordLessLoginVisible,
+    showPasswordLessInput,
+    showExternalWalletButton,
+    shouldShowLoginPage
+  }), [modalState, preHandleExternalWalletClick, preHandleSocialLoginClick, handleShowExternalWallets, isEmailPrimary, isExternalPrimary, areSocialLoginsVisible, isEmailPasswordLessLoginVisible, isSmsPasswordLessLoginVisible, showPasswordLessInput, showExternalWalletButton, shouldShowLoginPage]);
+  return /*#__PURE__*/jsx(ModalStateContext.Provider, {
+    value: value,
+    children: children
+  });
+};
+const useModalState = () => {
+  const context = useContext(ModalStateContext);
+  if (!context) {
+    throw new Error("useModalState must be used within a ModalStateProvider");
+  }
+  return context;
+};
+
+export { ModalStateProvider, useModalState };

package/dist/lib.esm/packages/modal/src/ui/context/RootContext.js

@@ -1,27 +1,65 @@
-import { createContext } from 'react';
+import { useState, useMemo, createContext, useContext } from 'react';
 import { TOAST_TYPE } from '../interfaces.js';
+import { jsx } from 'react/jsx-runtime';
 
-const RootContext = /*#__PURE__*/createContext({
-  bodyState: {
-    metamaskQrCode: {
-      show: false,
-      wallet: null
-    },
-    installLinks: {
-      show: false,
-      wallet: null
-    },
-    multiChainSelector: {
-      show: false,
-      wallet: null
-    }
+const initialBodyState = {
+  installLinks: {
+    show: false,
+    wallet: null
   },
-  toast: {
-    message: "",
-    type: TOAST_TYPE.SUCCESS
+  multiChainSelector: {
+    show: false,
+    wallet: null
   },
-  setBodyState: () => {},
-  setToast: () => {}
-});
+  preSelectedWallet: null
+};
+const initialToastState = {
+  message: "",
+  type: TOAST_TYPE.SUCCESS
+};
+const RootContext = /*#__PURE__*/createContext(undefined);
+const RootProvider = ({
+  children
+}) => {
+  const [bodyState, setBodyState] = useState(initialBodyState);
+  const [toast, setToast] = useState(initialToastState);
+  const value = useMemo(() => ({
+    bodyState,
+    setBodyState,
+    toast,
+    setToast
+  }), [bodyState, toast]);
+  return /*#__PURE__*/jsx(RootContext.Provider, {
+    value: value,
+    children: children
+  });
+};
+const useRoot = () => {
+  const context = useContext(RootContext);
+  if (!context) {
+    throw new Error("useRoot must be used within a RootProvider");
+  }
+  return context;
+};
+const useBodyState = () => {
+  const {
+    bodyState,
+    setBodyState
+  } = useRoot();
+  return {
+    bodyState,
+    setBodyState
+  };
+};
+const useToast = () => {
+  const {
+    toast,
+    setToast
+  } = useRoot();
+  return {
+    toast,
+    setToast
+  };
+};
 
-export { RootContext };
+export { RootProvider, initialBodyState, initialToastState, useBodyState, useRoot, useToast };

package/dist/lib.esm/packages/modal/src/ui/context/WidgetContext.js

@@ -0,0 +1,49 @@
+import { CONNECTOR_INITIAL_AUTHENTICATION_MODE } from '@web3auth/no-modal';
+import { useMemo, createContext, useContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+const WidgetContext = /*#__PURE__*/createContext(undefined);
+const WidgetProvider = ({
+  children,
+  isDark = true,
+  deviceDetails,
+  uiConfig,
+  handleSocialLoginClick,
+  handleExternalWalletClick,
+  handleMobileVerifyConnect,
+  handleShowExternalWallets,
+  handleAcceptConsent,
+  handleDeclineConsent,
+  closeModal
+}) => {
+  const appLogo = useMemo(() => {
+    return isDark ? uiConfig.logoDark : uiConfig.logoLight;
+  }, [isDark, uiConfig.logoDark, uiConfig.logoLight]);
+  const isConnectAndSignAuthenticationMode = useMemo(() => uiConfig.initialAuthenticationMode === CONNECTOR_INITIAL_AUTHENTICATION_MODE.CONNECT_AND_SIGN, [uiConfig.initialAuthenticationMode]);
+  return /*#__PURE__*/jsx(WidgetContext.Provider, {
+    value: {
+      isDark,
+      appLogo,
+      deviceDetails,
+      uiConfig,
+      isConnectAndSignAuthenticationMode,
+      handleSocialLoginClick,
+      handleExternalWalletClick,
+      handleMobileVerifyConnect,
+      handleShowExternalWallets,
+      handleAcceptConsent,
+      handleDeclineConsent,
+      closeModal
+    },
+    children: children
+  });
+};
+const useWidget = () => {
+  const context = useContext(WidgetContext);
+  if (!context) {
+    throw new Error("useWidget must be used within a WidgetProvider");
+  }
+  return context;
+};
+
+export { WidgetProvider, useWidget };