@web3auth/modal 9.7.0 → 10.0.0-alpha.1

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

@@ -0,0 +1,5 @@
+import '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";
+
+export { ArrowDark as default };

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

@@ -0,0 +1,5 @@
+import '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";
+
+export { ArrowLight as default };

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

@@ -0,0 +1,5 @@
+import '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";
+
+export { XDark as default };

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

@@ -0,0 +1,5 @@
+import '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";
+
+export { XLight as default };

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

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

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

@@ -0,0 +1,32 @@
+import './styles.css.js';
+import { memo } from 'react';
+import { jsx } from '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__*/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__*/memo(Button);
+
+export { Button$1 as default };

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

@@ -0,0 +1,6 @@
+import styleInject from '../../../../../../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(css_248z);
+
+export { css_248z as default };

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

@@ -0,0 +1,42 @@
+import { useTranslation } from 'react-i18next';
+import i18nInstance from '../../localeImport.js';
+import Button from '../Button/Button.js';
+import Image from '../Image.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function ExternalWalletButton(props) {
+  const {
+    button,
+    handleWalletClick
+  } = props;
+  const [t] = useTranslation(undefined, {
+    i18n: i18nInstance
+  });
+  return /*#__PURE__*/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__*/jsxs("div", {
+      className: "w3a--flex w3a--items-center",
+      children: [/*#__PURE__*/jsx(Image, {
+        imageId: `login-${button.name}`,
+        hoverImageId: `login-${button.name}`,
+        fallbackImageId: "wallet",
+        height: "24",
+        width: "24",
+        isButton: true,
+        extension: button.imgExtension
+      }), /*#__PURE__*/jsx("p", {
+        className: "w3a--ml-2 w3a--text-left w3a--text-sm",
+        children: button.displayName
+      })]
+    }), button.hasInjectedWallet && /*#__PURE__*/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")
+    })]
+  });
+}
+
+export { ExternalWalletButton as default };

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

@@ -0,0 +1,65 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { MODAL_STATUS } from '../../interfaces.js';
+import i18nInstance from '../../localeImport.js';
+import Button from '../Button/Button.js';
+import Loader from '../Loader.js';
+import WalletConnect from '../WalletConnect.js';
+import ExternalWalletHeader from './ExternalWalletHeader.js';
+import ExternalWalletInstall from './ExternalWalletInstall.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function ExternalWalletConnect(props) {
+  const {
+    connectButton,
+    walletConnectUri,
+    goBack,
+    closeModal
+  } = props;
+  const [isWalletDownloadShown, setIsWalletDownloadShown] = useState(false);
+  const [t] = useTranslation(undefined, {
+    i18n: i18nInstance
+  });
+  const showWalletDownload = () => {
+    setIsWalletDownloadShown(true);
+  };
+  return /*#__PURE__*/jsx("div", {
+    children: isWalletDownloadShown ? /*#__PURE__*/jsx("div", {
+      children: /*#__PURE__*/jsx(ExternalWalletInstall, {
+        connectButton: connectButton,
+        goBack: () => setIsWalletDownloadShown(false),
+        closeModal: closeModal
+      })
+    }) : /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx(ExternalWalletHeader, {
+        title: connectButton.displayName,
+        goBack: goBack,
+        closeModal: closeModal
+      }), !walletConnectUri ? /*#__PURE__*/jsx(Loader, {
+        modalStatus: MODAL_STATUS.CONNECTING,
+        canEmit: false
+      }) : /*#__PURE__*/jsx(WalletConnect, {
+        walletConnectUri: walletConnectUri,
+        logoImage: `https://images.web3auth.io/login-${connectButton.name}.${connectButton.imgExtension}`,
+        primaryColor: connectButton.walletRegistryItem.primaryColor
+      }), connectButton.hasInstallLinks && /*#__PURE__*/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__*/jsxs("span", {
+          className: "w3a--text-sm w3a--truncate w3a--flex-grow-0",
+          children: [t("modal.external.dont-have"), " ", /*#__PURE__*/jsx("span", {
+            children: connectButton.displayName
+          }), "?"]
+        }), /*#__PURE__*/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")
+        })]
+      })]
+    })
+  });
+}
+
+export { ExternalWalletConnect as default };

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

@@ -0,0 +1,32 @@
+import ExternalWalletConnect from './ExternalWalletConnect.js';
+import ExternalWalletInstall from './ExternalWalletInstall.js';
+import { jsx } from 'react/jsx-runtime';
+
+function ExternalWalletDetail(props) {
+  const {
+    connectButton,
+    walletConnectUri,
+    goBack,
+    closeModal
+  } = props;
+  return /*#__PURE__*/jsx("div", {
+    children: connectButton.hasWalletConnect ?
+    /*#__PURE__*/
+    // Wallet Connect
+    jsx(ExternalWalletConnect, {
+      connectButton: connectButton,
+      walletConnectUri: walletConnectUri,
+      goBack: goBack,
+      closeModal: closeModal
+    }) :
+    /*#__PURE__*/
+    // Download wallets
+    jsx(ExternalWalletInstall, {
+      connectButton: connectButton,
+      goBack: goBack,
+      closeModal: closeModal
+    })
+  });
+}
+
+export { ExternalWalletDetail as default };

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

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

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

@@ -0,0 +1,165 @@
+import Bowser from 'bowser';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import i18nInstance from '../../localeImport.js';
+import Button from '../Button/Button.js';
+import Image from '../Image.js';
+import ExternalWalletHeader from './ExternalWalletHeader.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const getBrowserExtensionUrl = (browserType, walletId) => {
+  if (walletId !== null && walletId !== void 0 && walletId.startsWith("https://")) return walletId;
+  switch (browserType) {
+    case "chrome":
+      return `https://chrome.google.com/webstore/detail/${walletId}`;
+    case "firefox":
+      return `https://addons.mozilla.org/firefox/addon/${walletId}`;
+    case "edge":
+      return `https://microsoftedge.microsoft.com/addons/detail/${walletId}`;
+    default:
+      return null;
+  }
+};
+const getMobileInstallLink = (os, appId) => {
+  if (appId !== null && appId !== void 0 && appId.includes("https://")) {
+    return appId;
+  }
+  switch (os) {
+    case "android":
+      return `https://play.google.com/store/apps/details?id=${appId}`;
+    case "ios":
+      return `https://apps.apple.com/app/safepal-wallet/${appId}`;
+    default:
+      return "";
+  }
+};
+const getOsName = os => {
+  switch (os) {
+    case "ios":
+      return "iOS";
+    case "android":
+      return "Android";
+    default:
+      return "";
+  }
+};
+const getBrowserName = browser => {
+  return browser.charAt(0).toUpperCase() + browser.slice(1);
+};
+function ExternalWalletInstall(props) {
+  const {
+    connectButton,
+    goBack,
+    closeModal
+  } = props;
+  const [t] = useTranslation(undefined, {
+    i18n: i18nInstance
+  });
+  const deviceDetails = useMemo(() => {
+    const browser = Bowser.getParser(window.navigator.userAgent);
+    return {
+      platform: browser.getPlatformType(),
+      browser: browser.getBrowserName().toLowerCase(),
+      os: browser.getOSName()
+    };
+  }, []);
+  const mobileInstallLinks = () => {
+    const installConfig = connectButton.walletRegistryItem.app || {};
+    const installLinks = Object.keys(installConfig).reduce((acc, os) => {
+      if (!["android", "ios"].includes(os)) return acc;
+      const appId = installConfig[os];
+      if (!appId) return acc;
+      const appUrl = getMobileInstallLink(os, appId);
+      if (!appUrl) return acc;
+      const logoLight = `${os}-light`;
+      const logoDark = `${os}-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",
+            variant: "tertiary",
+            className: "w3a--w-full !w3a--justify-start w3a--flex w3a--items-center w3a--gap-2 wallet-link-btn",
+            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",
+              children: t("modal.external.install-mobile-app", {
+                os: getOsName(os)
+              })
+            })]
+          })
+        })
+      }, os));
+      return acc;
+    }, []);
+    return installLinks;
+  };
+  const desktopInstallLinks = () => {
+    // if browser is brave, use chrome extension
+    const browserType = deviceDetails.browser === "brave" ? "chrome" : deviceDetails.browser;
+    const browserExtensionConfig = connectButton.walletRegistryItem.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",
+          variant: "tertiary",
+          className: "w3a--w-full !w3a--justify-start w3a--flex w3a--items-center w3a--gap-2 wallet-link-btn",
+          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",
+            children: t("modal.external.install-browser-extension", {
+              browser: getBrowserName(deviceDetails.browser)
+            })
+          })]
+        })
+      })
+    }, deviceDetails.browser) : null;
+    return [installLink, ...mobileInstallLinks()];
+  };
+  return /*#__PURE__*/jsxs("div", {
+    children: [/*#__PURE__*/jsx(ExternalWalletHeader, {
+      title: `${t("modal.external.get")} ${connectButton.displayName}`,
+      goBack: goBack,
+      closeModal: closeModal
+    }), /*#__PURE__*/jsx("div", {
+      className: "w3a--flex w3a--justify-center w3a--my-6",
+      children: /*#__PURE__*/jsx(Image, {
+        imageId: `login-${connectButton.name}`,
+        hoverImageId: `login-${connectButton.name}`,
+        fallbackImageId: "wallet",
+        height: "100",
+        width: "100",
+        isButton: true,
+        extension: connectButton.imgExtension
+      })
+    }), /*#__PURE__*/jsx("ul", {
+      className: "w3a--flex w3a--flex-col w3a--gap-3",
+      children: deviceDetails.platform === "desktop" ? desktopInstallLinks() : mobileInstallLinks()
+    })]
+  });
+}
+
+export { ExternalWalletInstall as default };