@web3auth/modal 10.16.0 → 11.0.0-beta.1

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

@@ -30,40 +30,41 @@ function Modal(props) {
         setIsOpen(true);
       }, 50);
     } else {
+      // eslint-disable-next-line react-hooks/set-state-in-effect -- intentional
       setIsOpen(false);
       // Remove overflow styling to enable scroll again.
       document.body.style.overflow = "";
     }
   }, [open]);
   const positions = react.useMemo(() => ({
-    center: "w3a--top-0 w3a--left-0 w3a--items-center w3a--justify-center",
-    "top-center": "w3a--top-8 w3a--left-0 w3a--items-start w3a--justify-center",
-    "bottom-center": "w3a--bottom-8 w3a--left-0 w3a--items-end w3a--justify-center",
-    left: "sm:w3a--left-8 w3a--flex w3a--items-center w3a--justify-center sm:w3a--justify-start",
-    right: "sm:w3a--right-8 w3a--flex w3a--items-center w3a--justify-center sm:w3a--justify-end"
+    center: "wta:top-0 wta:left-0 wta:items-center wta:justify-center",
+    "top-center": "wta:top-8 wta:left-0 wta:items-start wta:justify-center",
+    "bottom-center": "wta:bottom-8 wta:left-0 wta:items-end wta:justify-center",
+    left: "wta:sm:left-8 wta:flex wta:items-center wta:justify-center wta:sm:justify-start",
+    right: "wta:sm:right-8 wta:flex wta:items-center wta:justify-center wta:sm:justify-end"
   }), []);
   const placementClass = react.useMemo(() => positions[placement], [placement, positions]);
   const onCloseHandler = () => {
     if (onClose) onClose();
   };
   return jsxRuntime.jsx("div", {
-    className: utils.cn("w3a--fixed w3a--z-50 w3a--overflow-hidden w3a--flex w3a--transition-all", placementClass, {
-      "w3a--w-screen w3a--h-screen": isOpen,
-      "w3a--w-0 w3a--h-0 w3a--delay-500": !isOpen
+    className: utils.cn("wta:fixed wta:z-50 wta:overflow-hidden wta:flex wta:transition-all", placementClass, {
+      "wta:w-screen wta:h-screen": isOpen,
+      "wta:w-0 wta:h-0 wta:delay-500": !isOpen
     }),
     children: jsxRuntime.jsxs("div", {
-      className: utils.cn("w3a--bg-app-light-surface1 dark:w3a--bg-app-dark-surface-main w3a--w-[356px] [@media(min-width:375px)]:w3a--w-[393px] w3a--h-auto w3a--flex w3a--flex-col w3a--duration-500", {
-        "w3a--translate-y-0 w3a--delay-100": isOpen,
-        "w3a--translate-y-[100vh]": !isOpen,
-        "w3a--p-4": padding,
-        "w3a--shadow-xl sm:w3a--shadow-lg": shadow,
-        "w3a--border w3a--border-app-gray-100 dark:w3a--border-app-gray-800": border,
-        "w3a--rounded-[30px]": borderRadius === "large",
-        "w3a--rounded-2xl": borderRadius === "medium",
-        "w3a--rounded-none": borderRadius === "small"
+      className: utils.cn("wta:bg-app-light-surface1 wta:dark:bg-app-dark-surface-main wta:w-[356px] wta:[@media(min-width:375px)]:w-[393px] wta:h-auto wta:flex wta:flex-col wta:duration-500", {
+        "wta:translate-y-0 wta:delay-100": isOpen,
+        "wta:translate-y-[100vh]": !isOpen,
+        "wta:p-4": padding,
+        "wta:shadow-xl wta:sm:shadow-lg": shadow,
+        "wta:border wta:border-app-gray-100 wta:dark:border-app-gray-800": border,
+        "wta:rounded-[30px]": borderRadius === "large",
+        "wta:rounded-2xl": borderRadius === "medium",
+        "wta:rounded-none": borderRadius === "small"
       }),
       children: [showCloseIcon && jsxRuntime.jsx("div", {
-        className: "w3a--absolute w3a--right-6 w3a--top-[30px] w3a--z-10 w3a--cursor-pointer",
+        className: "wta:absolute wta:right-6 wta:top-[30px] wta:z-10 wta:cursor-pointer",
         children: jsxRuntime.jsx("svg", {
           width: "13",
           height: "13",
@@ -71,7 +72,7 @@ function Modal(props) {
           fill: "none",
           xmlns: "http://www.w3.org/2000/svg",
           onClick: onCloseHandler,
-          className: "w3a--text-app-gray-500 hover:w3a--text-app-gray-900 dark:w3a--text-app-gray-200 dark:hover:w3a--text-app-white",
+          className: "wta:text-app-gray-500 wta:hover:text-app-gray-900 wta:dark:text-app-gray-200 wta:dark:hover:text-app-white",
           children: jsxRuntime.jsx("path", {
             fillRule: "evenodd",
             clipRule: "evenodd",

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

@@ -133,16 +133,16 @@ const OtpInput = /*#__PURE__*/react.forwardRef(({
       (_inputRefs$current7 = inputRefs.current) === null || _inputRefs$current7 === void 0 || _inputRefs$current7[0].focus();
     }
   }, [autoFocus]);
-  const helperTextClass = utils.cn("w3a--text-xs w3a--font-normal w3a--text-app-gray-500 dark:w3a--text-app-white w3a--mt-2", {
-    "w3a--text-app-red-500 dark:w3a--text-app-red-400": error,
-    "w3a--text-app-green-500 dark:w3a--text-app-green-400": success
+  const helperTextClass = utils.cn("wta:text-xs wta:font-normal wta:text-app-gray-500 wta:dark:text-app-white wta:mt-2", {
+    "wta:text-app-red-500 wta:dark:text-app-red-400": error,
+    "wta:text-app-green-500 wta:dark:text-app-green-400": success
   }, classes === null || classes === void 0 ? void 0 : classes.helperText);
   const inputKey = new Date().getFullYear();
   return jsxRuntime.jsxs("div", {
-    className: utils.cn("w3a--flex w3a--flex-col w3a--items-center", classes === null || classes === void 0 ? void 0 : classes.root),
+    className: utils.cn("wta:flex wta:flex-col wta:items-center", classes === null || classes === void 0 ? void 0 : classes.root),
     ref: ref,
     children: [jsxRuntime.jsx("form", {
-      className: utils.cn("w3a--flex w3a--space-x-2", classes === null || classes === void 0 ? void 0 : classes.inputContainer),
+      className: utils.cn("wta:flex wta:space-x-2", classes === null || classes === void 0 ? void 0 : classes.inputContainer),
       children: otpArray.map((digit, index) => {
         var _classes$success, _classes$error, _classes$disabled;
         return jsxRuntime.jsx("input", {
@@ -155,7 +155,7 @@ const OtpInput = /*#__PURE__*/react.forwardRef(({
           onInput: e => handleInputChange(e, index),
           onKeyUp: e => handleKeyDown(e, index),
           onPaste: handlePaste,
-          className: utils.cn("w3a--w-12 w3a--h-[42px] w3a--rounded-full w3a--border w3a--text-center w3a--text-xl w3a--focus:outline-none w3a--active:outline-none w3a--focus:border-app-primary-600 dark:w3a--focus:border-app-primary-500 w3a--border-app-gray-300 dark:w3a--border-app-gray-500 w3a--bg-app-gray-50 dark:w3a--bg-app-gray-700 w3a--text-app-gray-900 dark:w3a--text-app-white", success && ((_classes$success = classes === null || classes === void 0 ? void 0 : classes.success) !== null && _classes$success !== void 0 ? _classes$success : "w3a--border-app-green-400 dark:w3a--border-app-green-500 w3a--focus:w3a--border-app-green-400 dark:w3a--focus:w3a--border-app-green-500"), error && ((_classes$error = classes === null || classes === void 0 ? void 0 : classes.error) !== null && _classes$error !== void 0 ? _classes$error : "w3a--border-app-red-600 dark:w3a--border-app-red-500 w3a--focus:w3a--border-app-red-600 dark:w3a--focus:w3a--border-app-red-500"), disabled && ((_classes$disabled = classes === null || classes === void 0 ? void 0 : classes.disabled) !== null && _classes$disabled !== void 0 ? _classes$disabled : "w3a--border-app-gray-200 w3a--bg-app-gray-200 dark:w3a--border-app-gray-700 w3a--focus:w3a--border-app-gray-200 dark:w3a--focus:w3a--border-app-gray-700 w3a--cursor-not-allowed"), classes === null || classes === void 0 ? void 0 : classes.input),
+          className: utils.cn("wta:w-12 wta:h-[42px] wta:rounded-full wta:border wta:text-center wta:text-xl wta:focus:outline-none wta:active:outline-none wta:focus:border-app-primary-600 wta:dark:focus:border-app-primary-500 wta:border-app-gray-300 wta:dark:border-app-gray-500 wta:bg-app-gray-50 wta:dark:bg-app-gray-700 wta:text-app-gray-900 wta:dark:text-app-white", success && ((_classes$success = classes === null || classes === void 0 ? void 0 : classes.success) !== null && _classes$success !== void 0 ? _classes$success : "wta:border-app-green-400 wta:dark:border-app-green-500 wta:focus:border-app-green-400 wta:dark:focus:border-app-green-500"), error && ((_classes$error = classes === null || classes === void 0 ? void 0 : classes.error) !== null && _classes$error !== void 0 ? _classes$error : "wta:border-app-red-600 wta:dark:border-app-red-500 wta:focus:border-app-red-600 wta:dark:focus:border-app-red-500"), disabled && ((_classes$disabled = classes === null || classes === void 0 ? void 0 : classes.disabled) !== null && _classes$disabled !== void 0 ? _classes$disabled : "wta:border-app-gray-200 wta:bg-app-gray-200 wta:dark:border-app-gray-700 wta:focus:border-app-gray-200 wta:dark:focus:border-app-gray-700 wta:cursor-not-allowed"), classes === null || classes === void 0 ? void 0 : classes.input),
           ref: el => {
             inputRefs.current[index] = el;
           },
@@ -166,18 +166,18 @@ const OtpInput = /*#__PURE__*/react.forwardRef(({
       className: helperTextClass,
       children: helperText
     }), loading && jsxRuntime.jsx("div", {
-      className: "w3a--mt-3",
+      className: "wta:mt-3",
       children: jsxRuntime.jsx(PulseLoader, {})
     }), showCta && !loading && jsxRuntime.jsx("div", {
-      className: utils.cn("w3a--flex w3a--items-center w3a--mt-3", classes === null || classes === void 0 ? void 0 : classes.ctaContainer),
+      className: utils.cn("wta:flex wta:items-center wta:mt-3", classes === null || classes === void 0 ? void 0 : classes.ctaContainer),
       children: timer > 0 && showTimer ? jsxRuntime.jsx("span", {
-        className: utils.cn("w3a--text-xs w3a--text-app-gray-500 dark:w3a--text-app-gray-400", classes === null || classes === void 0 ? void 0 : classes.timerText),
+        className: utils.cn("wta:text-xs wta:text-app-gray-500 wta:dark:text-app-gray-400", classes === null || classes === void 0 ? void 0 : classes.timerText),
         children: t("modal.resendTimer", {
           timer: timer
         })
       }) : jsxRuntime.jsx("button", {
         type: "button",
-        className: utils.cn("w3a--text-xs w3a--p-0 w3a--text-app-primary-600 dark:w3a--text-app-primary-500", classes === null || classes === void 0 ? void 0 : classes.resendBtnText),
+        className: utils.cn("wta:text-xs wta:p-0 wta:text-app-primary-600 wta:dark:text-app-primary-500", classes === null || classes === void 0 ? void 0 : classes.resendBtnText),
         onClick: handleResendClick,
         disabled: timer > 0 && showTimer,
         children: resendBtnText || t("modal.resendCode")

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

@@ -4,13 +4,13 @@ var jsxRuntime = require('react/jsx-runtime');
 
 const PulseLoader = () => {
   return jsxRuntime.jsxs("div", {
-    className: "w3a--flex w3a--items-center w3a--justify-center w3a--gap-x-2",
+    className: "wta:flex wta:items-center wta:justify-center wta:gap-x-2",
     children: [jsxRuntime.jsx("div", {
-      className: "w3a--size-3 w3a--animate-pulse w3a--rounded-full w3a--bg-app-gray-500 dark:w3a--bg-app-gray-200"
+      className: "wta:size-3 wta:animate-pulse wta:rounded-full wta:bg-app-gray-500 wta:dark:bg-app-gray-200"
     }), jsxRuntime.jsx("div", {
-      className: "w3a--size-3 w3a--animate-pulse w3a--rounded-full w3a--bg-app-gray-400 dark:w3a--bg-app-gray-400"
+      className: "wta:size-3 wta:animate-pulse wta:rounded-full wta:bg-app-gray-400 wta:dark:bg-app-gray-400"
     }), jsxRuntime.jsx("div", {
-      className: "w3a--size-3 w3a--animate-pulse w3a--rounded-full w3a--bg-app-gray-200 dark:w3a--bg-app-gray-600"
+      className: "wta:size-3 wta:animate-pulse wta:rounded-full wta:bg-app-gray-200 wta:dark:bg-app-gray-600"
     })]
   });
 };

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

@@ -15,12 +15,12 @@ function getProviderIcon(method, isDark, extension) {
       id: "active-login-img",
       src: `https://images.web3auth.io/${hoverId}${extension}`,
       alt: "active-login-img",
-      className: "w3a--hidden w3a--size-5 w3a--object-contain group-hover:w3a--block"
+      className: "wta:hidden wta:size-5 wta:object-contain wta:group-hover:block"
     }), jsxRuntime.jsx("img", {
       id: "login-img",
       src: `https://images.web3auth.io/${imageId}${extension}`,
       alt: "login-img",
-      className: "w3a--block w3a--size-5 w3a--object-contain group-hover:w3a--hidden"
+      className: "wta:block wta:size-5 wta:object-contain wta:group-hover:hidden"
     })]
   });
 }
@@ -37,20 +37,20 @@ function SocialLoginList(props) {
   } = props;
   const getGridRowFromVisibleLogin = () => {
     if (visibleRow.length === 1) {
-      return "w3a--grid-cols-1";
+      return "wta:grid-cols-1";
     } else if (visibleRow.length === 2) {
-      return "w3a--grid-cols-2";
+      return "wta:grid-cols-2";
     } else if (visibleRow.length === 3) {
-      return "w3a--grid-cols-3";
+      return "wta:grid-cols-3";
     } else {
-      return "w3a--grid-cols-4";
+      return "wta:grid-cols-4";
     }
   };
   if ((visibleRow.length !== 0 || mainOptionsRow.length !== 0) && (otherRow === null || otherRow === void 0 ? void 0 : otherRow.length) === 0) {
     return jsxRuntime.jsxs("div", {
-      className: "w3a--flex w3a--w-full w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-2",
+      className: "wta:flex wta:w-full wta:flex-col wta:items-center wta:justify-center wta:gap-y-2",
       children: [jsxRuntime.jsx("div", {
-        className: "w3a--grid w3a--w-full w3a--gap-y-2",
+        className: "wta:grid wta:w-full wta:gap-y-2",
         children: mainOptionsRow.map(row => jsxRuntime.jsx(Button, {
           type: Button_type.BUTTON_TYPE.SOCIAL,
           props: {
@@ -59,19 +59,18 @@ function SocialLoginList(props) {
             method: row.method,
             isDark,
             isPrimaryBtn: false,
-            btnStyle: "w3a--flex w3a--items-center !w3a--justify-center w3a--w-full w3a--h-11 w3a--group",
+            btnStyle: "wta:flex wta:items-center wta:justify-center! wta:w-full wta:h-11 wta:group",
             children: jsxRuntime.jsx(jsxRuntime.Fragment, {
               children: getProviderIcon(row.method, isDark, ".svg")
             }),
             onClick: () => handleSocialLoginClick({
-              connector: row.connector,
               loginParams: row.loginParams
             }),
             buttonRadius
           }
         }, row.method))
       }), jsxRuntime.jsxs("div", {
-        className: utils.cn("w3a--grid w3a--w-full w3a--gap-x-2", getGridRowFromVisibleLogin()),
+        className: utils.cn("wta:grid wta:w-full wta:gap-x-2", getGridRowFromVisibleLogin()),
         children: [visibleRow.filter((_, index) => visibleRow.length === 4 ? index <= 3 : index < 3).map(row => jsxRuntime.jsx(LoginHint, {
           content: "Last Login",
           isDark: isDark,
@@ -83,12 +82,11 @@ function SocialLoginList(props) {
               method: row.method,
               isDark,
               isPrimaryBtn: false,
-              btnStyle: "w3a--flex w3a--items-center !w3a--justify-center w3a--w-full w3a--h-11 w3a--group",
+              btnStyle: "wta:flex wta:items-center wta:justify-center! wta:w-full wta:h-11 wta:group",
               children: jsxRuntime.jsx(jsxRuntime.Fragment, {
                 children: getProviderIcon(row.method, isDark, ".svg")
               }),
               onClick: () => handleSocialLoginClick({
-                connector: row.connector,
                 loginParams: row.loginParams
               }),
               buttonRadius
@@ -97,13 +95,14 @@ function SocialLoginList(props) {
         }, row.method)), canShowMore && visibleRow.length > 4 && jsxRuntime.jsx(Button, {
           type: Button_type.BUTTON_TYPE.SOCIAL,
           props: {
+            isDark,
             showIcon: false,
             onClick: handleExpandSocialLogins,
-            btnStyle: "w3a--flex w3a--items-center !w3a--justify-center w3a--w-full w3a--h-11",
+            btnStyle: "wta:flex wta:items-center wta:justify-center! wta:w-full wta:h-11",
             children: jsxRuntime.jsx("img", {
               src: utils.getIcons(isDark ? "dots-dark-horizontal" : "dots-light-horizontal"),
               alt: "Logo",
-              className: "w3a--object-contain"
+              className: "wta:object-contain"
             }),
             buttonRadius
           }
@@ -112,20 +111,20 @@ function SocialLoginList(props) {
     });
   }
   return jsxRuntime.jsxs("div", {
-    className: "w3a--flex w3a--w-full w3a--flex-col w3a--items-start w3a--justify-start w3a--gap-y-4",
+    className: "wta:flex wta:w-full wta:flex-col wta:items-start wta:justify-start wta:gap-y-4",
     children: [jsxRuntime.jsx("button", {
       type: "button",
-      className: "w3a--appearance-none",
+      className: "wta:appearance-none",
       onClick: () => handleExpandSocialLogins(),
       children: jsxRuntime.jsx("img", {
         src: utils.getIcons(isDark ? "arrow-left-dark" : "arrow-left-light"),
         alt: "Logo",
-        className: "w3a--object-contain"
+        className: "wta:object-contain"
       })
     }), jsxRuntime.jsx("div", {
-      className: "w3a--social-container w3a--grid w3a--h-[300px] w3a--w-full w3a--auto-rows-min w3a--grid-cols-1 w3a--gap-y-2 w3a--overflow-y-auto w3a--pl-2 w3a--pr-3",
+      className: "w3a--social-container wta:grid wta:h-[300px] wta:w-full wta:auto-rows-min wta:grid-cols-1 wta:gap-y-2 wta:overflow-y-auto wta:pl-2 wta:pr-3",
       children: otherRow.map(row => jsxRuntime.jsx("div", {
-        className: "w3a--h-11 w3a--w-full",
+        className: "wta:h-11 wta:w-full",
         children: jsxRuntime.jsx(Button, {
           type: Button_type.BUTTON_TYPE.SOCIAL,
           props: {
@@ -133,18 +132,17 @@ function SocialLoginList(props) {
             isDark,
             isPrimaryBtn: false,
             onClick: () => handleSocialLoginClick({
-              connector: row.connector,
               loginParams: row.loginParams
             }),
-            btnStyle: "w3a--group w3a--relative w3a--overflow-hidden w3a--flex w3a--items-center !w3a--justify-start w3a--w-full w3a--h-11",
+            btnStyle: "wta:group wta:relative wta:overflow-hidden wta:flex wta:items-center wta:justify-start! wta:w-full wta:h-11",
             buttonRadius,
             children: jsxRuntime.jsxs(jsxRuntime.Fragment, {
               children: [getProviderIcon(row.method, isDark, ".svg"), jsxRuntime.jsx("p", {
-                className: "w3a--text-sm w3a--font-normal w3a--text-app-gray-900 dark:w3a--text-app-white",
+                className: "wta:text-sm wta:font-normal wta:text-app-gray-900 wta:dark:text-app-white",
                 children: row.name
               }), jsxRuntime.jsx("img", {
                 id: "login-arrow",
-                className: "w3a--absolute w3a--right-4 w3a--top-1/2 -w3a--translate-x-10 -w3a--translate-y-1/2 w3a--opacity-0 w3a--transition-all w3a--duration-300\n          group-hover:w3a--translate-x-0 group-hover:w3a--opacity-100",
+                className: "wta:absolute wta:right-4 wta:top-1/2 wta:-translate-x-10 wta:-translate-y-1/2 wta:opacity-0 wta:transition-all wta:duration-300\n          wta:group-hover:translate-x-0 wta:group-hover:opacity-100",
                 src: utils.getIcons(isDark ? "chevron-right-dark" : "chevron-right-light"),
                 alt: "arrow"
               })]

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

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

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

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

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

@@ -9,7 +9,7 @@ const Toast = () => {
   const {
     toast,
     setToast
-  } = react.useContext(RootContext.RootContext);
+  } = RootContext.useToast();
   react.useEffect(() => {
     if (toast.message) {
       setTimeout(() => {
@@ -22,21 +22,21 @@ const Toast = () => {
   }, [toast.message, setToast]);
   if (!toast.message) return null;
   const toastClass = {
-    success: "w3a--border-app-green-200 w3a--bg-app-green-100 w3a--text-app-green-900",
-    error: "w3a--border-app-red-200 w3a--bg-app-red-100 w3a--text-app-red-900",
-    warning: "w3a--border-app-yellow-200 w3a--bg-app-yellow-100 w3a--text-app-yellow-900",
-    info: "w3a--border-app-blue-200 w3a--bg-app-blue-100 w3a--text-app-blue-900"
+    success: "wta:border-app-green-200 wta:bg-app-green-100 wta:text-app-green-900",
+    error: "wta:border-app-red-200 wta:bg-app-red-100 wta:text-app-red-900",
+    warning: "wta:border-app-yellow-200 wta:bg-app-yellow-100 wta:text-app-yellow-900",
+    info: "wta:border-app-blue-200 wta:bg-app-blue-100 wta:text-app-blue-900"
   };
   const toastIconClass = {
-    success: "w3a--text-app-green-900",
-    error: "w3a--text-app-red-900",
-    warning: "w3a--text-app-yellow-900",
-    info: "w3a--text-app-blue-900"
+    success: "wta:text-app-green-900",
+    error: "wta:text-app-red-900",
+    warning: "wta:text-app-yellow-900",
+    info: "wta:text-app-blue-900"
   };
   return jsxRuntime.jsxs("div", {
-    className: `w3a--absolute w3a--inset-x-4 w3a--bottom-4 w3a--z-[60] w3a--mx-auto w3a--w-[90%] w3a--rounded-md w3a--border w3a--p-4 w3a--text-sm ${toastClass[toast.type]}`,
+    className: `wta:absolute wta:inset-x-4 wta:bottom-4 wta:z-[60] wta:mx-auto wta:w-[90%] wta:rounded-md wta:border wta:p-4 wta:text-sm ${toastClass[toast.type]}`,
     children: [jsxRuntime.jsx("div", {
-      className: "w3a--absolute w3a--right-4 w3a--top-4 w3a--z-10 w3a--cursor-pointer",
+      className: "wta:absolute wta:right-4 wta:top-4 wta:z-10 wta:cursor-pointer",
       children: jsxRuntime.jsx("svg", {
         width: "13",
         height: "13",
@@ -56,7 +56,7 @@ const Toast = () => {
         })
       })
     }), jsxRuntime.jsx("div", {
-      className: "w3a--flex w3a--items-center w3a--gap-2",
+      className: "wta:flex wta:items-center wta:gap-2",
       children: jsxRuntime.jsx("p", {
         children: toast.message
       })

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

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

package/dist/lib.cjs/packages/modal/src/ui/containers/AccountLinking/AccountLinking.js

@@ -0,0 +1,109 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var noModal = require('@web3auth/no-modal');
+var react = require('react');
+var reactI18next = require('react-i18next');
+var constants = require('../../constants.js');
+var ModalStateContext = require('../../context/ModalStateContext.js');
+var WidgetContext = require('../../context/WidgetContext.js');
+var interfaces = require('../../interfaces.js');
+var localeImport = require('../../localeImport.js');
+var ConnectWalletQrCode = require('../ConnectWallet/ConnectWalletQrCode/ConnectWalletQrCode.js');
+
+const DEFAULT_ACCOUNT_LINKING_BUTTON = {
+  name: noModal.WALLET_CONNECTORS.WALLET_CONNECT_V2,
+  displayName: "WalletConnect",
+  hasInjectedWallet: false,
+  hasWalletConnect: true,
+  hasInstallLinks: false,
+  imgExtension: "svg"
+};
+function AccountLinking(props) {
+  var _accountLinkingButton;
+  const {
+    allExternalWallets
+  } = props;
+  const {
+    modalState
+  } = ModalStateContext.useModalState();
+  const {
+    deviceDetails,
+    isDark
+  } = WidgetContext.useWidget();
+  const [t] = reactI18next.useTranslation(undefined, {
+    i18n: localeImport
+  });
+  const accountLinkingButton = react.useMemo(() => {
+    const requestedConnectorName = modalState.accountLinking.connectorName;
+    if (!requestedConnectorName) return DEFAULT_ACCOUNT_LINKING_BUTTON;
+    return allExternalWallets.find(button => button.name === requestedConnectorName) || DEFAULT_ACCOUNT_LINKING_BUTTON;
+  }, [allExternalWallets, modalState.accountLinking.connectorName]);
+  const accountLinkingDisplayName = react.useMemo(() => {
+    return accountLinkingButton.displayName || "WalletConnect";
+  }, [accountLinkingButton.displayName]);
+  const accountLinkingQrLogoImage = react.useMemo(() => {
+    if (accountLinkingButton.name === noModal.WALLET_CONNECTORS.WALLET_CONNECT_V2 || !accountLinkingButton.imgExtension) {
+      return constants.WALLET_CONNECT_LOGO;
+    }
+    return `https://images.web3auth.io/login-${accountLinkingButton.name}.${accountLinkingButton.imgExtension}`;
+  }, [accountLinkingButton.imgExtension, accountLinkingButton.name]);
+  const isSwitchAccountIntent = modalState.accountLinking.intent === interfaces.ACCOUNT_LINKING_INTENT.SWITCH;
+  const isWalletConnectConnector = accountLinkingButton.name === noModal.WALLET_CONNECTORS.WALLET_CONNECT_V2;
+  const accountLinkingMessage = react.useMemo(() => {
+    switch (modalState.accountLinking.status) {
+      case interfaces.ACCOUNT_LINKING_STATUS.INITIALIZING:
+        return t("modal.account-linking.initializing-wallet", {
+          wallet: accountLinkingDisplayName
+        });
+      case interfaces.ACCOUNT_LINKING_STATUS.AWAITING_CONNECTION:
+        return modalState.accountLinking.walletConnectUri ? isWalletConnectConnector ? t("modal.account-linking.scan-walletconnect") : t("modal.account-linking.scan-wallet", {
+          wallet: accountLinkingDisplayName
+        }) : t("modal.account-linking.preparing-wallet-qr", {
+          wallet: accountLinkingDisplayName
+        });
+      case interfaces.ACCOUNT_LINKING_STATUS.WALLET_CONNECTED:
+        return isSwitchAccountIntent ? t("modal.account-linking.wallet-connected-preparing-switch") : t("modal.account-linking.wallet-connected-preparing-linking");
+      case interfaces.ACCOUNT_LINKING_STATUS.LINKING:
+        return isSwitchAccountIntent ? t("modal.account-linking.switching-wallet") : t("modal.account-linking.linking-wallet");
+      case interfaces.ACCOUNT_LINKING_STATUS.COMPLETED:
+        return isSwitchAccountIntent ? t("modal.account-linking.wallet-switched") : t("modal.account-linking.wallet-linked");
+      case interfaces.ACCOUNT_LINKING_STATUS.ERRORED:
+        return modalState.accountLinking.errorMessage || (isSwitchAccountIntent ? t("modal.account-linking.failed-switch-wallet", {
+          wallet: accountLinkingDisplayName
+        }) : t("modal.account-linking.failed-connect-wallet", {
+          wallet: accountLinkingDisplayName
+        }));
+      default:
+        return "";
+    }
+  }, [accountLinkingDisplayName, isSwitchAccountIntent, isWalletConnectConnector, modalState.accountLinking.errorMessage, modalState.accountLinking.status, modalState.accountLinking.walletConnectUri, t]);
+  return jsxRuntime.jsxs("div", {
+    className: "wta:flex wta:flex-1 wta:flex-col wta:gap-y-4",
+    children: [jsxRuntime.jsx("div", {
+      className: "wta:flex wta:items-center wta:justify-center",
+      children: jsxRuntime.jsx("p", {
+        className: "wta:text-base wta:font-medium wta:text-app-gray-900 wta:dark:text-app-white",
+        children: accountLinkingDisplayName
+      })
+    }), modalState.accountLinking.status === interfaces.ACCOUNT_LINKING_STATUS.ERRORED ? jsxRuntime.jsx("div", {
+      className: "wta:rounded-2xl wta:border wta:border-app-gray-200 wta:bg-app-gray-50 wta:p-4 wta:dark:border-app-gray-700 wta:dark:bg-app-gray-800",
+      children: jsxRuntime.jsx("p", {
+        className: "wta:text-center wta:text-sm wta:text-app-gray-700 wta:dark:text-app-gray-200",
+        children: accountLinkingMessage
+      })
+    }) : jsxRuntime.jsx(ConnectWalletQrCode, {
+      qrCodeValue: modalState.accountLinking.walletConnectUri,
+      isDark: isDark,
+      selectedButton: accountLinkingButton,
+      logoImage: accountLinkingQrLogoImage,
+      primaryColor: (_accountLinkingButton = accountLinkingButton.walletRegistryItem) === null || _accountLinkingButton === void 0 ? void 0 : _accountLinkingButton.primaryColor,
+      platform: deviceDetails.platform
+    }), accountLinkingMessage && modalState.accountLinking.status !== interfaces.ACCOUNT_LINKING_STATUS.ERRORED && jsxRuntime.jsx("p", {
+      className: "wta:text-center wta:text-sm wta:text-app-gray-500 wta:dark:text-app-gray-300",
+      children: accountLinkingMessage
+    })]
+  });
+}
+
+module.exports = AccountLinking;