@web3auth/modal 9.6.0 → 10.0.0-alpha.0

package/dist/lib.cjs/packages/modal/src/react/context/Web3AuthInnerContext.js

@@ -0,0 +1,225 @@
+'use strict';
+
+var noModal = require('@web3auth/no-modal');
+var React = require('react');
+var modalManager = require('../../modalManager.js');
+
+const Web3AuthInnerContext = /*#__PURE__*/React.createContext(null);
+function Web3AuthInnerProvider(params) {
+  const {
+    children,
+    config
+  } = params;
+  const [web3Auth, setWeb3Auth] = React.useState(null);
+  const [isConnecting, setIsConnecting] = React.useState(false);
+  const [isInitializing, setIsInitializing] = React.useState(false);
+  const [initError, setInitError] = React.useState(null);
+  const [connectError, setConnectError] = React.useState(null);
+  const [isConnected, setIsConnected] = React.useState(false);
+  const [provider, setProvider] = React.useState(null);
+  const [userInfo, setUserInfo] = React.useState(null);
+  const [isMFAEnabled, setIsMFAEnabled] = React.useState(false);
+  const [isInitialized, setIsInitialized] = React.useState(false);
+  const [status, setStatus] = React.useState(null);
+  const addPlugin = React.useCallback(plugin => {
+    if (!web3Auth) throw noModal.WalletInitializationError.notReady();
+    return web3Auth.addPlugin(plugin);
+  }, [web3Auth]);
+  const getPlugin = React.useCallback(name => {
+    if (!web3Auth) throw noModal.WalletInitializationError.notReady();
+    return web3Auth.getPlugin(name);
+  }, [web3Auth]);
+  const enableMFA = React.useCallback(async loginParams => {
+    if (!web3Auth) throw noModal.WalletInitializationError.notReady();
+    if (!isConnected) throw noModal.WalletLoginError.notConnectedError();
+    await web3Auth.enableMFA(loginParams);
+    const localUserInfo = await web3Auth.getUserInfo();
+    setUserInfo(localUserInfo);
+    setIsMFAEnabled(localUserInfo.isMfaEnabled || false);
+  }, [web3Auth, isConnected]);
+  const manageMFA = React.useCallback(async loginParams => {
+    if (!web3Auth) throw noModal.WalletInitializationError.notReady();
+    if (!isConnected) throw noModal.WalletLoginError.notConnectedError();
+    await web3Auth.manageMFA(loginParams);
+  }, [web3Auth, isConnected]);
+  const logout = React.useCallback(async (logoutParams = {
+    cleanup: false
+  }) => {
+    if (!web3Auth) throw noModal.WalletInitializationError.notReady();
+    if (!isConnected) throw noModal.WalletLoginError.notConnectedError();
+    await web3Auth.logout(logoutParams);
+  }, [web3Auth, isConnected]);
+  const connect = React.useCallback(async () => {
+    if (!web3Auth) throw noModal.WalletInitializationError.notReady();
+    try {
+      setConnectError(null);
+      setIsConnecting(true);
+      const localProvider = await web3Auth.connect();
+      return localProvider;
+    } catch (error) {
+      setConnectError(error);
+      throw error;
+    } finally {
+      setIsConnecting(false);
+    }
+  }, [web3Auth]);
+  const addAndSwitchChain = React.useCallback(async chainConfig => {
+    if (!web3Auth) throw noModal.WalletInitializationError.notReady();
+    await web3Auth.addChain(chainConfig);
+    await web3Auth.switchChain({
+      chainId: chainConfig.chainId
+    });
+  }, [web3Auth]);
+  const authenticateUser = React.useCallback(async () => {
+    if (!web3Auth) throw noModal.WalletInitializationError.notReady();
+    return web3Auth.authenticateUser();
+  }, [web3Auth]);
+  const addChain = React.useCallback(async chainConfig => {
+    if (!web3Auth) throw noModal.WalletInitializationError.notReady();
+    return web3Auth.addChain(chainConfig);
+  }, [web3Auth]);
+  const switchChain = React.useCallback(chainParams => {
+    if (!web3Auth) throw noModal.WalletInitializationError.notReady();
+    return web3Auth.switchChain(chainParams);
+  }, [web3Auth]);
+  React.useEffect(() => {
+    const resetHookState = () => {
+      setProvider(null);
+      setUserInfo(null);
+      setIsMFAEnabled(false);
+      setIsConnected(false);
+      setStatus(null);
+    };
+    resetHookState();
+    const {
+      web3AuthOptions,
+      adapters = [],
+      plugins = []
+    } = config;
+    const web3AuthInstance = new modalManager.Web3Auth(web3AuthOptions);
+    if (adapters.length) adapters.map(adapter => web3AuthInstance.configureAdapter(adapter));
+    if (plugins.length) {
+      plugins.forEach(plugin => {
+        web3AuthInstance.addPlugin(plugin);
+      });
+    }
+    setWeb3Auth(web3AuthInstance);
+  }, [config]);
+  React.useEffect(() => {
+    async function init() {
+      try {
+        setInitError(null);
+        setIsInitializing(true);
+        const {
+          modalConfig,
+          hideWalletDiscovery
+        } = config;
+        if (modalConfig) {
+          await web3Auth.initModal({
+            modalConfig,
+            hideWalletDiscovery
+          });
+        } else {
+          await web3Auth.initModal();
+        }
+      } catch (error) {
+        setInitError(error);
+      } finally {
+        setIsInitializing(false);
+      }
+    }
+    if (web3Auth) init();
+  }, [web3Auth, config]);
+  React.useEffect(() => {
+    const addState = async () => {
+      setProvider(web3Auth.provider);
+      const userState = await web3Auth.getUserInfo();
+      setUserInfo(userState);
+      setIsMFAEnabled((userState === null || userState === void 0 ? void 0 : userState.isMfaEnabled) || false);
+    };
+    const resetState = () => {
+      setProvider(null);
+      setUserInfo(null);
+      setIsMFAEnabled(false);
+    };
+    if (web3Auth) {
+      if (isConnected) addState();else resetState();
+    }
+  }, [web3Auth, isConnected]);
+  React.useEffect(() => {
+    const notReadyListener = () => setStatus(web3Auth.status);
+    const readyListener = () => {
+      setStatus(web3Auth.status);
+      setIsInitialized(true);
+    };
+    const connectedListener = () => {
+      setStatus(web3Auth.status);
+      // we do this because of rehydration issues. status connected is fired first but web3auth sdk is not ready yet.
+      if (web3Auth.status === noModal.ADAPTER_STATUS.CONNECTED) {
+        setIsInitialized(true);
+        setIsConnected(true);
+      }
+    };
+    const disconnectedListener = () => {
+      setStatus(web3Auth.status);
+      setIsConnected(false);
+    };
+    const connectingListener = () => {
+      setStatus(web3Auth.status);
+    };
+    const errorListener = () => {
+      setStatus(noModal.ADAPTER_STATUS.ERRORED);
+    };
+    if (web3Auth) {
+      // web3Auth is initialized here.
+      setStatus(web3Auth.status);
+      web3Auth.on(noModal.ADAPTER_EVENTS.NOT_READY, notReadyListener);
+      web3Auth.on(noModal.ADAPTER_EVENTS.READY, readyListener);
+      web3Auth.on(noModal.ADAPTER_EVENTS.CONNECTED, connectedListener);
+      web3Auth.on(noModal.ADAPTER_EVENTS.DISCONNECTED, disconnectedListener);
+      web3Auth.on(noModal.ADAPTER_EVENTS.CONNECTING, connectingListener);
+      web3Auth.on(noModal.ADAPTER_EVENTS.ERRORED, errorListener);
+    }
+    return () => {
+      if (web3Auth) {
+        web3Auth.off(noModal.ADAPTER_EVENTS.NOT_READY, notReadyListener);
+        web3Auth.off(noModal.ADAPTER_EVENTS.READY, readyListener);
+        web3Auth.off(noModal.ADAPTER_EVENTS.CONNECTED, connectedListener);
+        web3Auth.off(noModal.ADAPTER_EVENTS.DISCONNECTED, disconnectedListener);
+        web3Auth.off(noModal.ADAPTER_EVENTS.CONNECTING, connectingListener);
+        web3Auth.off(noModal.ADAPTER_EVENTS.ERRORED, errorListener);
+      }
+    };
+  }, [web3Auth]);
+  const value = React.useMemo(() => {
+    return {
+      web3Auth,
+      isConnected,
+      isInitialized,
+      provider,
+      userInfo,
+      isMFAEnabled,
+      status,
+      connect,
+      enableMFA,
+      manageMFA,
+      logout,
+      addAndSwitchChain,
+      addChain,
+      addPlugin,
+      authenticateUser,
+      switchChain,
+      getPlugin,
+      isInitializing,
+      isConnecting,
+      initError,
+      connectError
+    };
+  }, [web3Auth, isConnected, isInitialized, provider, userInfo, isMFAEnabled, status, getPlugin, connect, enableMFA, manageMFA, logout, addAndSwitchChain, addChain, addPlugin, authenticateUser, switchChain, isInitializing, isConnecting, initError, connectError]);
+  return /*#__PURE__*/React.createElement(Web3AuthInnerContext.Provider, {
+    value
+  }, children);
+}
+
+exports.Web3AuthInnerContext = Web3AuthInnerContext;
+exports.Web3AuthInnerProvider = Web3AuthInnerProvider;

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

@@ -0,0 +1,15 @@
+'use strict';
+
+var noModal = require('@web3auth/no-modal');
+var React = require('react');
+var Web3AuthInnerContext = require('../context/Web3AuthInnerContext.js');
+
+const useWeb3Auth = () => {
+  const context = React.useContext(Web3AuthInnerContext.Web3AuthInnerContext);
+  if (!context) {
+    throw noModal.WalletInitializationError.fromCode(1000, "usage of useWeb3Auth not wrapped in `Web3AuthContextProvider`.");
+  }
+  return context;
+};
+
+exports.useWeb3Auth = useWeb3Auth;

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

@@ -0,0 +1,12 @@
+'use strict';
+
+var Web3AuthInnerContext = require('./context/Web3AuthInnerContext.js');
+var useWeb3Auth = require('./hooks/useWeb3Auth.js');
+var Web3AuthProvider = require('./Web3AuthProvider.js');
+
+
+
+exports.Web3AuthInnerContext = Web3AuthInnerContext.Web3AuthInnerContext;
+exports.Web3AuthInnerProvider = Web3AuthInnerContext.Web3AuthInnerProvider;
+exports.useWeb3Auth = useWeb3Auth.useWeb3Auth;
+exports.Web3AuthProvider = Web3AuthProvider.Web3AuthProvider;

package/dist/lib.cjs/packages/modal/src/ui/assets/arrow-left-dark.svg.js

@@ -0,0 +1,7 @@
+'use strict';
+
+require('react');
+
+var ArrowDark = "data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8.33333%2015.8333L2.5%209.99992M2.5%209.99992L8.33333%204.16659M2.5%209.99992L17.5%209.99992%22%20stroke%3D%22%239CA3AF%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E";
+
+module.exports = ArrowDark;

package/dist/lib.cjs/packages/modal/src/ui/assets/arrow-left-light.svg.js

@@ -0,0 +1,7 @@
+'use strict';
+
+require('react');
+
+var ArrowLight = "data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8.33333%2015.8333L2.5%209.99995M2.5%209.99995L8.33333%204.16662M2.5%209.99995L17.5%209.99995%22%20stroke%3D%22%236B7280%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E";
+
+module.exports = ArrowLight;

package/dist/lib.cjs/packages/modal/src/ui/assets/x-dark.svg.js

@@ -0,0 +1,7 @@
+'use strict';
+
+require('react');
+
+var XDark = "data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M0.292787%201.29299C0.480314%201.10552%200.734622%201.0002%200.999786%201.0002C1.26495%201.0002%201.51926%201.10552%201.70679%201.29299L5.99979%205.58599L10.2928%201.29299C10.385%201.19748%2010.4954%201.1213%2010.6174%201.06889C10.7394%201.01648%2010.8706%200.988893%2011.0034%200.987739C11.1362%200.986585%2011.2678%201.01189%2011.3907%201.06217C11.5136%201.11245%2011.6253%201.1867%2011.7192%201.28059C11.8131%201.37449%2011.8873%201.48614%2011.9376%201.60904C11.9879%201.73193%2012.0132%201.86361%2012.012%201.99639C12.0109%202.12917%2011.9833%202.26039%2011.9309%202.38239C11.8785%202.5044%2011.8023%202.61474%2011.7068%202.70699L7.41379%206.99999L11.7068%2011.293C11.8889%2011.4816%2011.9897%2011.7342%2011.9875%2011.9964C11.9852%2012.2586%2011.88%2012.5094%2011.6946%2012.6948C11.5092%2012.8802%2011.2584%2012.9854%2010.9962%2012.9877C10.734%2012.9899%2010.4814%2012.8891%2010.2928%2012.707L5.99979%208.41399L1.70679%2012.707C1.51818%2012.8891%201.26558%2012.9899%201.00339%2012.9877C0.741188%2012.9854%200.490376%2012.8802%200.304968%2012.6948C0.11956%2012.5094%200.0143906%2012.2586%200.0121121%2011.9964C0.00983372%2011.7342%200.110629%2011.4816%200.292787%2011.293L4.58579%206.99999L0.292787%202.70699C0.105316%202.51946%200%202.26515%200%201.99999C0%201.73483%200.105316%201.48052%200.292787%201.29299V1.29299Z%22%20fill%3D%22%239CA3AF%22%2F%3E%3C%2Fsvg%3E";
+
+module.exports = XDark;

package/dist/lib.cjs/packages/modal/src/ui/assets/x-light.svg.js

@@ -0,0 +1,7 @@
+'use strict';
+
+require('react');
+
+var XLight = "data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M0.292787%201.29299C0.480314%201.10552%200.734622%201.0002%200.999786%201.0002C1.26495%201.0002%201.51926%201.10552%201.70679%201.29299L5.99979%205.58599L10.2928%201.29299C10.385%201.19748%2010.4954%201.1213%2010.6174%201.06889C10.7394%201.01648%2010.8706%200.988893%2011.0034%200.987739C11.1362%200.986585%2011.2678%201.01189%2011.3907%201.06217C11.5136%201.11245%2011.6253%201.1867%2011.7192%201.28059C11.8131%201.37449%2011.8873%201.48614%2011.9376%201.60904C11.9879%201.73193%2012.0132%201.86361%2012.012%201.99639C12.0109%202.12917%2011.9833%202.26039%2011.9309%202.38239C11.8785%202.5044%2011.8023%202.61474%2011.7068%202.70699L7.41379%206.99999L11.7068%2011.293C11.8889%2011.4816%2011.9897%2011.7342%2011.9875%2011.9964C11.9852%2012.2586%2011.88%2012.5094%2011.6946%2012.6948C11.5092%2012.8802%2011.2584%2012.9854%2010.9962%2012.9877C10.734%2012.9899%2010.4814%2012.8891%2010.2928%2012.707L5.99979%208.41399L1.70679%2012.707C1.51818%2012.8891%201.26558%2012.9899%201.00339%2012.9877C0.741188%2012.9854%200.490376%2012.8802%200.304968%2012.6948C0.11956%2012.5094%200.0143906%2012.2586%200.0121121%2011.9964C0.00983372%2011.7342%200.110629%2011.4816%200.292787%2011.293L4.58579%206.99999L0.292787%202.70699C0.105316%202.51946%200%202.26515%200%201.99999C0%201.73483%200.105316%201.48052%200.292787%201.29299V1.29299Z%22%20fill%3D%22%236B7280%22%2F%3E%3C%2Fsvg%3E";
+
+module.exports = XLight;

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

@@ -0,0 +1,108 @@
+'use strict';
+
+var noModal = require('@web3auth/no-modal');
+var React = require('react');
+var reactI18next = require('react-i18next');
+var interfaces = require('../interfaces.js');
+var localeImport = require('../localeImport.js');
+var Icon = require('./Icon.js');
+var Image = require('./Image.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+const closeIcon = /*#__PURE__*/jsxRuntime.jsx(Icon, {
+  iconName: "x-light",
+  darkIconName: "close"
+});
+function DetailedLoader(props) {
+  const {
+    adapter,
+    appLogo,
+    message,
+    modalStatus,
+    adapterName,
+    onClose
+  } = props;
+  const providerIcon = adapter === "twitter" ? /*#__PURE__*/jsxRuntime.jsx(Image, {
+    imageId: "login-x-dark"
+  }) : /*#__PURE__*/jsxRuntime.jsx(Image, {
+    imageId: `login-${adapter}`,
+    height: "30",
+    width: "30"
+  });
+  const [t] = reactI18next.useTranslation(undefined, {
+    i18n: localeImport
+  });
+  React.useEffect(() => {
+    noModal.log.debug("adapter loader re-rendering");
+    if (modalStatus === interfaces.MODAL_STATUS.CONNECTED) {
+      setTimeout(() => {
+        onClose();
+      }, 3000);
+    }
+  }, [modalStatus, onClose]);
+  return modalStatus !== interfaces.MODAL_STATUS.INITIALIZED ? /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "w3ajs-modal-loader w3a-modal__loader w3a--h-full",
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "w3a-modal__loader-content",
+      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "w3a-modal__loader-info",
+        children: [modalStatus === interfaces.MODAL_STATUS.CONNECTING && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "w3a-modal__loader-bridge",
+            children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+              className: "w3a-modal__loader-app-logo",
+              children: [/*#__PURE__*/jsxRuntime.jsx("img", {
+                src: appLogo,
+                className: "w3a--block dark:w3a--hidden w3a--h-10 w3a--w-10",
+                alt: ""
+              }), /*#__PURE__*/jsxRuntime.jsx("img", {
+                src: appLogo,
+                className: "w3a--hidden dark:w3a--block w3a--h-10 w3a--w-10",
+                alt: ""
+              })]
+            }), /*#__PURE__*/jsxRuntime.jsx("div", {
+              className: "w3a-modal__connector",
+              children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+                className: "w3a-modal__connector-beat",
+                children: [/*#__PURE__*/jsxRuntime.jsx("div", {}), /*#__PURE__*/jsxRuntime.jsx("div", {}), /*#__PURE__*/jsxRuntime.jsx("div", {}), /*#__PURE__*/jsxRuntime.jsx("div", {}), /*#__PURE__*/jsxRuntime.jsx("div", {})]
+              })
+            }), /*#__PURE__*/jsxRuntime.jsx("div", {
+              className: "w3a-modal__loader-social-logo",
+              children: providerIcon
+            })]
+          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+            children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+              className: "w3a-modal__loader-bridge-message",
+              children: t("modal.adapter-loader.message1", {
+                adapter: adapterName
+              })
+            }), /*#__PURE__*/jsxRuntime.jsx("div", {
+              className: "w3a-modal__loader-bridge-message",
+              children: t("modal.adapter-loader.message2", {
+                adapter: adapterName
+              })
+            })]
+          })]
+        }), modalStatus === noModal.ADAPTER_STATUS.CONNECTED && /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "w3a--flex w3a--flex-col w3a--items-center",
+          children: [/*#__PURE__*/jsxRuntime.jsx(Icon, {
+            iconName: "connected"
+          }), /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "w3ajs-modal-loader__message w3a-spinner-message w3a--mt-4",
+            children: message
+          })]
+        }), modalStatus === noModal.ADAPTER_STATUS.ERRORED && /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "w3ajs-modal-loader__message w3a-spinner-message w3a-spinner-message--error",
+          children: message
+        })]
+      })
+    }), (modalStatus === noModal.ADAPTER_STATUS.CONNECTED || modalStatus === noModal.ADAPTER_STATUS.ERRORED) && /*#__PURE__*/jsxRuntime.jsx("button", {
+      type: "button",
+      className: "w3a-header__button w3ajs-loader-close-btn",
+      onClick: onClose,
+      children: closeIcon
+    })]
+  }) : null;
+}
+
+module.exports = DetailedLoader;

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

@@ -0,0 +1,34 @@
+'use strict';
+
+require('./styles.css.js');
+var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function Button(props) {
+  const {
+    variant = "primary",
+    onClick,
+    children,
+    title,
+    className,
+    style,
+    size = "md",
+    disabled,
+    type = "button"
+  } = props;
+  const sizeClass = `size-${size}`;
+  return /*#__PURE__*/jsxRuntime.jsx("button", {
+    disabled: disabled
+    // eslint-disable-next-line react/button-has-type
+    ,
+    type: type,
+    className: `t-btn t-btn-${variant} w3a--rounded-full ${sizeClass} ${className}`,
+    onClick: onClick,
+    title: title,
+    style: style,
+    children: children
+  });
+}
+var Button$1 = /*#__PURE__*/React.memo(Button);
+
+module.exports = Button$1;

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

@@ -0,0 +1,8 @@
+'use strict';
+
+var styleInject_es = require('../../../../../../node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = ".w3a-parent-container #w3a-modal button.t-btn,.w3a-parent-container a.t-btn{align-items:center;display:flex;justify-content:center;transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:linear}.w3a-parent-container #w3a-modal button.t-btn:not(.t-btn-text):disabled,.w3a-parent-container a.t-btn:not(.t-btn-text):disabled{background-color:var(--app-gray-300);border-width:0;color:var(--app-gray-400)}.w3a-parent-container #w3a-modal button.t-btn:not(.t-btn-text):hover:disabled,.w3a-parent-container a.t-btn:not(.t-btn-text):hover:disabled{background-color:var(--app-gray-300);border-color:var(--app-gray-300);color:var(--app-gray-400)}.w3a-parent-container #w3a-modal button.t-btn:not(.t-btn-text):active:disabled,.w3a-parent-container a.t-btn:not(.t-btn-text):active:disabled{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-offset-width:0px;background-color:var(--app-gray-300);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);outline-width:0}.w3a-parent-container #w3a-modal button.t-btn:not(.t-btn-text):disabled:is(.w3a--dark *),.w3a-parent-container a.t-btn:not(.t-btn-text):disabled:is(.w3a--dark *){background-color:var(--app-gray-700);color:var(--app-gray-600)}.w3a-parent-container #w3a-modal .size-xs{font-size:.75rem;height:32px;line-height:1rem;padding:.5rem .75rem}.w3a-parent-container #w3a-modal .size-sm{font-size:.875rem;height:36px;line-height:1.25rem;padding:.5rem .75rem}.w3a-parent-container #w3a-modal .size-md{font-size:.875rem;height:42px;line-height:1.25rem;padding:.625rem 1.25rem}.w3a-parent-container #w3a-modal .size-lg{font-size:1rem;height:48px;line-height:1.5rem;padding:.75rem 1.25rem}.w3a-parent-container #w3a-modal .size-xl{font-size:1rem;height:52px;line-height:1.5rem;padding:.875rem 1rem}.w3a-parent-container #w3a-modal .t-btn.t-btn-primary{background-color:var(--app-primary-600);color:var(--app-on-primary);outline:2px solid #0000;outline-offset:2px}.w3a-parent-container #w3a-modal .t-btn.t-btn-primary:hover{background-color:var(--app-primary-700)}.w3a-parent-container #w3a-modal .t-btn.t-btn-primary:focus-visible{outline-color:var(--app-primary-600);outline-offset:1px;outline-style:solid;outline-width:1px}.w3a-parent-container #w3a-modal .t-btn.t-btn-primary:active{background-color:var(--app-primary-600);outline-color:var(--app-primary-600);outline-offset:1px;outline-style:solid;outline-width:1px}.w3a-parent-container #w3a-modal .t-btn.t-btn-primary:is(.w3a--dark *){background-color:var(--app-primary-500)}.w3a-parent-container #w3a-modal .t-btn.t-btn-primary:hover:is(.w3a--dark *){background-color:var(--app-primary-400)}.w3a-parent-container #w3a-modal .t-btn.t-btn-primary:focus-visible:is(.w3a--dark *){outline-color:var(--app-primary-500)}.w3a-parent-container #w3a-modal .t-btn.t-btn-primary:active:is(.w3a--dark *){background-color:var(--app-primary-500);outline-color:var(--app-primary-500)}.w3a-parent-container #w3a-modal .t-btn.t-btn-secondary{background-color:initial;border-color:var(--app-gray-500);border-width:1px;color:var(--app-gray-600);outline:2px solid #0000;outline-offset:2px}.w3a-parent-container #w3a-modal .t-btn.t-btn-secondary:hover{background-color:var(--app-gray-200)}.w3a-parent-container #w3a-modal .t-btn.t-btn-secondary:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-color:var(--app-primary-600);background-color:initial;border-color:var(--app-primary-600);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.w3a-parent-container #w3a-modal .t-btn.t-btn-secondary:active{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-color:var(--app-primary-600);background-color:initial;border-color:var(--app-primary-600);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.w3a-parent-container #w3a-modal .t-btn.t-btn-secondary:is(.w3a--dark *){border-color:var(--app-gray-300);color:var(--app-white)}.w3a-parent-container #w3a-modal .t-btn.t-btn-secondary:hover:is(.w3a--dark *){background-color:var(--app-gray-700)}.w3a-parent-container #w3a-modal .t-btn.t-btn-secondary:focus-visible:is(.w3a--dark *){--tw-ring-color:var(--app-primary-500);background-color:initial;border-color:var(--app-primary-500)}.w3a-parent-container #w3a-modal .t-btn.t-btn-secondary:active:is(.w3a--dark *){--tw-ring-color:var(--app-primary-500);background-color:initial;border-color:var(--app-primary-500)}.w3a-parent-container #w3a-modal .t-btn.t-btn-tertiary{background-color:var(--app-gray-200);color:var(--app-gray-800)}.w3a-parent-container #w3a-modal .t-btn.t-btn-tertiary:hover{background-color:var(--app-gray-300)}.w3a-parent-container #w3a-modal .t-btn.t-btn-tertiary:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-color:var(--app-primary-600);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.w3a-parent-container #w3a-modal .t-btn.t-btn-tertiary:active{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-color:var(--app-primary-600);background-color:var(--app-gray-200);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.w3a-parent-container #w3a-modal .t-btn.t-btn-tertiary:is(.w3a--dark *){background-color:var(--app-gray-500);color:var(--app-white)}.w3a-parent-container #w3a-modal .t-btn.t-btn-tertiary:hover:is(.w3a--dark *){background-color:var(--app-gray-400)}.w3a-parent-container #w3a-modal .t-btn.t-btn-tertiary:focus-visible:is(.w3a--dark *){--tw-ring-color:var(--app-primary-500)}.w3a-parent-container #w3a-modal .t-btn.t-btn-tertiary:active:is(.w3a--dark *){--tw-ring-color:var(--app-primary-500);background-color:var(--app-gray-500)}.w3a-parent-container #w3a-modal .t-btn.t-btn-text{color:var(--app-primary-600)}.w3a-parent-container #w3a-modal .t-btn.t-btn-text:hover{color:var(--app-primary-800);text-decoration-line:underline}.w3a-parent-container #w3a-modal .t-btn.t-btn-text:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-color:var(--app-primary-600);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.w3a-parent-container #w3a-modal .t-btn.t-btn-text:active{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-color:var(--app-primary-600);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);color:var(--app-primary-600)}.w3a-parent-container #w3a-modal .t-btn.t-btn-text:disabled{color:var(--app-gray-400);text-decoration-line:none}.w3a-parent-container #w3a-modal .t-btn.t-btn-text:is(.w3a--dark *){color:var(--app-primary-500)}.w3a-parent-container #w3a-modal .t-btn.t-btn-text:hover:is(.w3a--dark *){color:var(--app-primary-400)}.w3a-parent-container #w3a-modal .t-btn.t-btn-text:disabled:is(.w3a--dark *){color:var(--app-gray-600)}.w3a-parent-container #w3a-modal .btn-link{text-decoration-line:none}.w3a-parent-container #w3a-modal button.t-btn:hover>.hover-icon{display:block;transition:display .15s;transition-timing-function:cubic-bezier(0,.54,.63,.99)}.w3a-parent-container #w3a-modal button.t-btn:hover>.image-icon{display:none;transition:display .15s;transition-timing-function:cubic-bezier(0,.54,.63,.99)}";
+styleInject_es(css_248z);
+
+module.exports = css_248z;

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

@@ -0,0 +1,44 @@
+'use strict';
+
+var reactI18next = require('react-i18next');
+var localeImport = require('../../localeImport.js');
+var Button = require('../Button/Button.js');
+var Image = require('../Image.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function ExternalWalletButton(props) {
+  const {
+    button,
+    handleWalletClick
+  } = props;
+  const [t] = reactI18next.useTranslation(undefined, {
+    i18n: localeImport
+  });
+  return /*#__PURE__*/jsxRuntime.jsxs(Button, {
+    variant: "tertiary",
+    type: "button",
+    onClick: () => handleWalletClick(button),
+    className: "w3a--w-full w3a--rounded-xl w3a--size-xl !w3a--justify-between w3a--items-center wallet-btn",
+    title: button.name,
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "w3a--flex w3a--items-center",
+      children: [/*#__PURE__*/jsxRuntime.jsx(Image, {
+        imageId: `login-${button.name}`,
+        hoverImageId: `login-${button.name}`,
+        fallbackImageId: "wallet",
+        height: "24",
+        width: "24",
+        isButton: true,
+        extension: button.imgExtension
+      }), /*#__PURE__*/jsxRuntime.jsx("p", {
+        className: "w3a--ml-2 w3a--text-left w3a--text-sm",
+        children: button.displayName
+      })]
+    }), button.hasInjectedWallet && /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: "w3a--inline-flex w3a--items-center w3a--rounded-lg w3a--px-2 w3a--py-1 w3a--text-xs w3a--font-medium w3a--bg-app-primary-100 w3a--text-app-primary-800",
+      children: t("modal.external.installed")
+    })]
+  });
+}
+
+module.exports = ExternalWalletButton;

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

@@ -0,0 +1,67 @@
+'use strict';
+
+var React = require('react');
+var reactI18next = require('react-i18next');
+var interfaces = require('../../interfaces.js');
+var localeImport = require('../../localeImport.js');
+var Button = require('../Button/Button.js');
+var Loader = require('../Loader.js');
+var WalletConnect = require('../WalletConnect.js');
+var ExternalWalletHeader = require('./ExternalWalletHeader.js');
+var ExternalWalletInstall = require('./ExternalWalletInstall.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function ExternalWalletConnect(props) {
+  const {
+    connectButton,
+    walletConnectUri,
+    goBack,
+    closeModal
+  } = props;
+  const [isWalletDownloadShown, setIsWalletDownloadShown] = React.useState(false);
+  const [t] = reactI18next.useTranslation(undefined, {
+    i18n: localeImport
+  });
+  const showWalletDownload = () => {
+    setIsWalletDownloadShown(true);
+  };
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    children: isWalletDownloadShown ? /*#__PURE__*/jsxRuntime.jsx("div", {
+      children: /*#__PURE__*/jsxRuntime.jsx(ExternalWalletInstall, {
+        connectButton: connectButton,
+        goBack: () => setIsWalletDownloadShown(false),
+        closeModal: closeModal
+      })
+    }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(ExternalWalletHeader, {
+        title: connectButton.displayName,
+        goBack: goBack,
+        closeModal: closeModal
+      }), !walletConnectUri ? /*#__PURE__*/jsxRuntime.jsx(Loader, {
+        modalStatus: interfaces.MODAL_STATUS.CONNECTING,
+        canEmit: false
+      }) : /*#__PURE__*/jsxRuntime.jsx(WalletConnect, {
+        walletConnectUri: walletConnectUri,
+        logoImage: `https://images.web3auth.io/login-${connectButton.name}.${connectButton.imgExtension}`,
+        primaryColor: connectButton.walletRegistryItem.primaryColor
+      }), connectButton.hasInstallLinks && /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "w3a--flex w3a--flex-row w3a--items-center w3a--justify-between w3a--gap-2 w3a--bg-app-gray-50 dark:w3a--bg-app-gray-700 w3a--text-app-gray-900 dark:w3a--text-app-white w3a--px-3 w3a--py-2 w3a--rounded-xl",
+        children: [/*#__PURE__*/jsxRuntime.jsxs("span", {
+          className: "w3a--text-sm w3a--truncate w3a--flex-grow-0",
+          children: [t("modal.external.dont-have"), " ", /*#__PURE__*/jsxRuntime.jsx("span", {
+            children: connectButton.displayName
+          }), "?"]
+        }), /*#__PURE__*/jsxRuntime.jsx(Button, {
+          type: "button",
+          variant: "secondary",
+          size: "xs",
+          className: "w3a--flex-grow-1 w3a--flex-shrink-0",
+          onClick: showWalletDownload,
+          children: t("modal.external.get-wallet")
+        })]
+      })]
+    })
+  });
+}
+
+module.exports = ExternalWalletConnect;

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

@@ -0,0 +1,34 @@
+'use strict';
+
+var ExternalWalletConnect = require('./ExternalWalletConnect.js');
+var ExternalWalletInstall = require('./ExternalWalletInstall.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function ExternalWalletDetail(props) {
+  const {
+    connectButton,
+    walletConnectUri,
+    goBack,
+    closeModal
+  } = props;
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    children: connectButton.hasWalletConnect ?
+    /*#__PURE__*/
+    // Wallet Connect
+    jsxRuntime.jsx(ExternalWalletConnect, {
+      connectButton: connectButton,
+      walletConnectUri: walletConnectUri,
+      goBack: goBack,
+      closeModal: closeModal
+    }) :
+    /*#__PURE__*/
+    // Download wallets
+    jsxRuntime.jsx(ExternalWalletInstall, {
+      connectButton: connectButton,
+      goBack: goBack,
+      closeModal: closeModal
+    })
+  });
+}
+
+module.exports = ExternalWalletDetail;

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

@@ -0,0 +1,46 @@
+'use strict';
+
+var Icon = require('../Icon.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function ExternalWalletHeader(props) {
+  const {
+    title,
+    goBack,
+    closeModal,
+    disableBackButton
+  } = props;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "w3a--flex w3a--flex-row w3a--justify-center w3a--items-center w3a--gap-1",
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "w3a--flex-grow-1 w3a--flex-shrink-0 w3a--items-center w3a--justify-start w3a--mr-auto",
+      children: !disableBackButton && /*#__PURE__*/jsxRuntime.jsx("button", {
+        type: "button",
+        className: "w3a-external-back w3ajs-external-back",
+        onClick: goBack,
+        children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
+          iconName: "arrow-left-light",
+          darkIconName: "arrow-left-dark",
+          width: "16",
+          height: "16"
+        })
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "w3a-header__title w3a--flex-grow-0 w3a--flex-shrink w3a--truncate w3a--mr-6",
+      children: title
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "w3a--flex-grow-1 w3a--flex-shrink-0 w3a--items-center w3a--justify-end w3a--ml-auto",
+      children: /*#__PURE__*/jsxRuntime.jsx("button", {
+        type: "button",
+        onClick: closeModal,
+        className: "w3a-header__button_wallet w3ajs-close-btn",
+        children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
+          iconName: "x-light",
+          darkIconName: "x-dark"
+        })
+      })
+    })]
+  });
+}
+
+module.exports = ExternalWalletHeader;