@dynamic-labs/sdk-react-core 0.19.0-alpha.0 → 0.19.0-alpha.1

package/CHANGELOG.md

@@ -1,4 +1,35 @@
 
+## [0.19.0-alpha.1](https://github.com/dynamic-labs/DynamicAuth/compare/v0.19.0-alpha.0...v0.19.0-alpha.1) (2023-08-10)
+
+
+### Features
+
+* cleaning up email input field - delete continue button ([#2833](https://github.com/dynamic-labs/DynamicAuth/issues/2833)) ([baa399e](https://github.com/dynamic-labs/DynamicAuth/commit/baa399e387bce9570a7e7774d68dc3c92f86be1b))
+* disable social buttons after provider is selected ([#2875](https://github.com/dynamic-labs/DynamicAuth/issues/2875)) ([6296ce1](https://github.com/dynamic-labs/DynamicAuth/commit/6296ce13062a8589cf6fb4741957dc9bf84552a2))
+* **GVTY-65:** Allow Merging accounts when duplicated email in KYC step ([#2772](https://github.com/dynamic-labs/DynamicAuth/issues/2772)) ([8efb6ae](https://github.com/dynamic-labs/DynamicAuth/commit/8efb6aecc9445ef1798a5c6358eac27b16f661b6))
+* hide network from nav if hideNetworkInDynamicWidget setting is true ([#2842](https://github.com/dynamic-labs/DynamicAuth/issues/2842)) ([f3dc9ba](https://github.com/dynamic-labs/DynamicAuth/commit/f3dc9ba987781d5d0540336f351bb9f148400eac))
+* show email submit button on focus ([#2860](https://github.com/dynamic-labs/DynamicAuth/issues/2860)) ([87d8ae0](https://github.com/dynamic-labs/DynamicAuth/commit/87d8ae0806425a25835efda5f9b9abc58e5de18e))
+
+
+### Bug Fixes
+
+* account already exist message not displaying automatically ([#2896](https://github.com/dynamic-labs/DynamicAuth/issues/2896)) ([ba56c93](https://github.com/dynamic-labs/DynamicAuth/commit/ba56c936546428b0a1111ab5ef6e8d0d9a463bb5))
+* array of dynamicWagmiSettings not being sent, must be turned into object ([#2835](https://github.com/dynamic-labs/DynamicAuth/issues/2835)) ([092c45a](https://github.com/dynamic-labs/DynamicAuth/commit/092c45afd3676fbd7c3d28f51818470de7f95768))
+* change network modal doesn't pop on secondary wallet, when primaryWallet was disconnected ([#2817](https://github.com/dynamic-labs/DynamicAuth/issues/2817)) ([b68c156](https://github.com/dynamic-labs/DynamicAuth/commit/b68c1565f936d2f4275b104a0881ba5720101abd))
+* connectSuccess callback is not being called when connecting new wallet after unlink ([#2814](https://github.com/dynamic-labs/DynamicAuth/issues/2814)) ([d5b34d8](https://github.com/dynamic-labs/DynamicAuth/commit/d5b34d8a073436ce39280766608578fd97567fac))
+* css variables are being ignored for ConnectButton component  ([#2869](https://github.com/dynamic-labs/DynamicAuth/issues/2869)) ([a54fb46](https://github.com/dynamic-labs/DynamicAuth/commit/a54fb46648758001450a33e6d86cf04765507701))
+* css variables for the ConnectButton are being ignored ([#2856](https://github.com/dynamic-labs/DynamicAuth/issues/2856)) ([65a342f](https://github.com/dynamic-labs/DynamicAuth/commit/65a342f828b6a16f714fc6b6e2066e1b742b2c0a))
+* don't let user update email if it's linked to an embedded wallet ([#2883](https://github.com/dynamic-labs/DynamicAuth/issues/2883)) ([99aa303](https://github.com/dynamic-labs/DynamicAuth/commit/99aa3033e62c0dee14657cb811db8d5b3597f7de))
+* **GVTY-150:** blocto pop up to sign after disconnect ([#2854](https://github.com/dynamic-labs/DynamicAuth/issues/2854)) ([df5481b](https://github.com/dynamic-labs/DynamicAuth/commit/df5481b2d5438848ad96cdee402f40b520bead08))
+* **GVTY-155:** update to the new design ([#2889](https://github.com/dynamic-labs/DynamicAuth/issues/2889)) ([31f7f54](https://github.com/dynamic-labs/DynamicAuth/commit/31f7f54444c623fe7d5bcf8a42f94ee22eedc3e1))
+* **GVTY-159:** email update view not showing email used error ([#2887](https://github.com/dynamic-labs/DynamicAuth/issues/2887)) ([bd40e4c](https://github.com/dynamic-labs/DynamicAuth/commit/bd40e4c77cda42752d44e42b98bfcea4cfd77a80))
+* **OTPOverviewView:** enable close only on close button click ([#2877](https://github.com/dynamic-labs/DynamicAuth/issues/2877)) ([2be23e7](https://github.com/dynamic-labs/DynamicAuth/commit/2be23e7ddefe67c971d863ad9069ac5b8a74f4e5))
+* **transaction:** improve gas estimate in transaction confirmation ([#2767](https://github.com/dynamic-labs/DynamicAuth/issues/2767)) ([7180ae5](https://github.com/dynamic-labs/DynamicAuth/commit/7180ae50559f924ae9769b2b8d87eadc6604c754))
+* use findSocialIcon instead getSocialIcon to avoid render errors ([#2834](https://github.com/dynamic-labs/DynamicAuth/issues/2834)) ([2c57f98](https://github.com/dynamic-labs/DynamicAuth/commit/2c57f98fd5c461ae4acbe2836f719ebe18bc21fc))
+* **useWalletConnectorEvent:** ensure connector is initialized ([#2849](https://github.com/dynamic-labs/DynamicAuth/issues/2849)) ([9137131](https://github.com/dynamic-labs/DynamicAuth/commit/913713166af8a6e6cc15a8e362e57b328fc0a76f))
+* **wcv2:** simulate chain change event in switchNetwork ([#2809](https://github.com/dynamic-labs/DynamicAuth/issues/2809)) ([2329b80](https://github.com/dynamic-labs/DynamicAuth/commit/2329b808f57644cebb664be536bc41e256d108d8))
+* wrong wallet list is showing after disconnecting and network change ([#2815](https://github.com/dynamic-labs/DynamicAuth/issues/2815)) ([6cae101](https://github.com/dynamic-labs/DynamicAuth/commit/6cae1019f40be4ffe7ab0426aa159c652a770a82))
+
 ## [0.19.0-alpha.0](https://github.com/dynamic-labs/DynamicAuth/compare/v0.18.0-RC.25...v0.19.0-alpha.0) (2023-08-01)
 
 ## [0.18.0-RC.25](https://github.com/dynamic-labs/DynamicAuth/compare/v0.18.0-RC.24...v0.18.0-RC.25) (2023-08-01)

package/package.cjs

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "0.19.0-alpha.0";
+var version = "0.19.0-alpha.1";
 var dependencies = {
 	"react-focus-lock": "2.9.2",
-	"@dynamic-labs/iconic": "0.1.23",
-	"@dynamic-labs/sdk-api": "0.0.248",
+	"@dynamic-labs/iconic": "0.1.27",
+	"@dynamic-labs/sdk-api": "0.0.256",
 	"@hcaptcha/react-hcaptcha": "1.4.4",
 	"country-list": "2.3.0",
 	yup: "0.32.11",

package/package.js

@@ -1,8 +1,8 @@
-var version = "0.19.0-alpha.0";
+var version = "0.19.0-alpha.1";
 var dependencies = {
 	"react-focus-lock": "2.9.2",
-	"@dynamic-labs/iconic": "0.1.23",
-	"@dynamic-labs/sdk-api": "0.0.248",
+	"@dynamic-labs/iconic": "0.1.27",
+	"@dynamic-labs/sdk-api": "0.0.256",
 	"@hcaptcha/react-hcaptcha": "1.4.4",
 	"country-list": "2.3.0",
 	yup: "0.32.11",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-labs/sdk-react-core",
-  "version": "0.19.0-alpha.0",
+  "version": "0.19.0-alpha.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/dynamic-labs/DynamicAuth.git",
@@ -8,21 +8,22 @@
   },
   "dependencies": {
     "react-focus-lock": "2.9.2",
-    "@dynamic-labs/iconic": "0.1.23",
-    "@dynamic-labs/sdk-api": "0.0.248",
+    "@dynamic-labs/iconic": "0.1.27",
+    "@dynamic-labs/sdk-api": "0.0.256",
     "@hcaptcha/react-hcaptcha": "1.4.4",
     "country-list": "2.3.0",
     "yup": "0.32.11",
     "formik": "2.2.9",
     "qrcode": "1.5.1",
     "ethers": "5.7.2",
-    "@dynamic-labs/logger": "0.19.0-alpha.0",
-    "@dynamic-labs/multi-wallet": "0.19.0-alpha.0",
-    "@dynamic-labs/rpc-providers": "0.19.0-alpha.0",
-    "@dynamic-labs/types": "0.19.0-alpha.0",
-    "@dynamic-labs/utils": "0.19.0-alpha.0",
-    "@dynamic-labs/wallet-book": "0.19.0-alpha.0",
-    "@dynamic-labs/wallet-connector-core": "0.19.0-alpha.0"
+    "@dynamic-labs/logger": "0.19.0-alpha.1",
+    "@dynamic-labs/multi-wallet": "0.19.0-alpha.1",
+    "@dynamic-labs/rpc-providers": "0.19.0-alpha.1",
+    "@dynamic-labs/types": "0.19.0-alpha.1",
+    "@dynamic-labs/utils": "0.19.0-alpha.1",
+    "@dynamic-labs/wallet-book": "0.19.0-alpha.1",
+    "@dynamic-labs/wallet-connector-core": "0.19.0-alpha.1",
+    "eventemitter3": "5.0.1"
   },
   "devDependencies": {
     "semver": "7.3.8"

package/src/index.cjs

@@ -77,6 +77,7 @@ var switchHorizontal = require('./lib/shared/assets/switch-horizontal.cjs');
 var dotsHorizontal = require('./lib/shared/assets/dots-horizontal.cjs');
 var send = require('./lib/shared/assets/send.cjs');
 var questionMark = require('./lib/shared/assets/question-mark.cjs');
+var doubleArrowRight = require('./lib/shared/assets/double-arrow-right.cjs');
 var index$2 = require('./lib/shared/consts/index.cjs');
 var logger = require('./lib/shared/logger.cjs');
 require('./lib/utils/constants/colors.cjs');
@@ -207,6 +208,7 @@ exports.SwitchHorizontalIcon = switchHorizontal.ReactComponent;
 exports.DotsHorizontalIcon = dotsHorizontal.ReactComponent;
 exports.SendIcon = send.ReactComponent;
 exports.QuestionMarkIcon = questionMark.ReactComponent;
+exports.DoubleArrowRightIcon = doubleArrowRight.ReactComponent;
 exports.authModalZIndex = index$2.authModalZIndex;
 exports.countryCodes = index$2.countryCodes;
 exports.defaultWalletsForChains = index$2.defaultWalletsForChains;

package/src/index.js

@@ -73,6 +73,7 @@ export { ReactComponent as SwitchHorizontalIcon } from './lib/shared/assets/swit
 export { ReactComponent as DotsHorizontalIcon } from './lib/shared/assets/dots-horizontal.js';
 export { ReactComponent as SendIcon } from './lib/shared/assets/send.js';
 export { ReactComponent as QuestionMarkIcon } from './lib/shared/assets/question-mark.js';
+export { ReactComponent as DoubleArrowRightIcon } from './lib/shared/assets/double-arrow-right.js';
 export { authModalZIndex, countryCodes, defaultWalletsForChains, tShirtSizes, teamNames, toolkitZIndex, tooltipZIndex, widgetModalZIndex } from './lib/shared/consts/index.js';
 export { logger } from './lib/shared/logger.js';
 import './lib/utils/constants/colors.js';

package/src/lib/Main.cjs

@@ -54,6 +54,9 @@ var isSelectedWalletAlreadyConnected = require('./utils/functions/isSelectedWall
 var viewToComponentMap = require('./views/viewToComponentMap.cjs');
 require('./main.global.cjs');
 
+const viewsToDisableCloseOnOverlayClick = [
+    'email-wallet-otp-verification-view',
+];
 const Main = () => {
     const { selectedWalletConnector, linkedWallets, isProjectSettingsLoading, projectSettings, setShowAuthFlow, showAuthFlow, wallets, clearStatesOnBackClick, user, unlinkConnectedWallet, authMode, connectedWallets, } = useInternalDynamicContext.useInternalDynamicContext();
     const { view, goToInitialView } = ViewContext.useViewContext();
@@ -61,6 +64,8 @@ const Main = () => {
     const { setExistentAccountData } = AccountExistsContext.useAccountExistsContext();
     usePreventPageScroll.usePreventPageScroll(showAuthFlow);
     const handleClose = () => {
+        if (viewsToDisableCloseOnOverlayClick.includes(view))
+            return;
         setShowAuthFlow(false);
         setDeniedAddress('');
         setDeniedOauthProvider(undefined);

package/src/lib/Main.js

@@ -50,6 +50,9 @@ import { isSelectedWalletAlreadyConnected } from './utils/functions/isSelectedWa
 import { viewToComponentMap } from './views/viewToComponentMap.js';
 import './main.global.js';
 
+const viewsToDisableCloseOnOverlayClick = [
+    'email-wallet-otp-verification-view',
+];
 const Main = () => {
     const { selectedWalletConnector, linkedWallets, isProjectSettingsLoading, projectSettings, setShowAuthFlow, showAuthFlow, wallets, clearStatesOnBackClick, user, unlinkConnectedWallet, authMode, connectedWallets, } = useInternalDynamicContext();
     const { view, goToInitialView } = useViewContext();
@@ -57,6 +60,8 @@ const Main = () => {
     const { setExistentAccountData } = useAccountExistsContext();
     usePreventPageScroll(showAuthFlow);
     const handleClose = () => {
+        if (viewsToDisableCloseOnOverlayClick.includes(view))
+            return;
         setShowAuthFlow(false);
         setDeniedAddress('');
         setDeniedOauthProvider(undefined);

package/src/lib/components/AuthProviderIcon/AuthProviderIcon.cjs

@@ -45,9 +45,9 @@ require('../MenuList/Dropdown/Dropdown.cjs');
 require('../../context/MockContext/MockContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
-var useGetSocialIcon = require('../../utils/hooks/useGetSocialIcon/useGetSocialIcon.cjs');
+var useFindSocialIcon = require('../../utils/hooks/useFindSocialIcon/useFindSocialIcon.cjs');
 
-const getMagicEmailOrSocialIcon = ({ getSocialIcon, wallet, jwt, }) => {
+const getMagicEmailOrSocialIcon = ({ findSocialIcon, wallet, jwt, }) => {
     if (walletConnectorCore.isEmailOTPWalletConnector(wallet.connector)) {
         return iconic.SignInWithEmailIcon;
     }
@@ -59,7 +59,7 @@ const getMagicEmailOrSocialIcon = ({ getSocialIcon, wallet, jwt, }) => {
         }
         const { oauthProvider } = socialAccountDataForWallet;
         try {
-            const MagicSocialWalletIcon = getSocialIcon(oauthProvider);
+            const MagicSocialWalletIcon = findSocialIcon(oauthProvider);
             return MagicSocialWalletIcon;
         }
         catch (err) {
@@ -71,10 +71,13 @@ const getMagicEmailOrSocialIcon = ({ getSocialIcon, wallet, jwt, }) => {
 const AuthProviderIcon = ({ jwt, iconSize = 64, showStatus, wallet, }) => {
     const { primaryWallet, selectedWalletConnector } = useInternalDynamicContext.useInternalDynamicContext();
     const { deniedOauthProvider, deniedAddress } = AccessDeniedContext.useAccessDeniedContext();
-    const getSocialIcon = useGetSocialIcon.useGetSocialIcon();
+    const findSocialIcon = useFindSocialIcon.useFindSocialIcon();
     // when access is denied we don't have jwt set, so we're getting this value out of useAccessDeniedContext
     if (deniedOauthProvider) {
-        const MagicSocialWalletIcon = getSocialIcon(deniedOauthProvider);
+        const MagicSocialWalletIcon = findSocialIcon(deniedOauthProvider);
+        if (!MagicSocialWalletIcon) {
+            return null;
+        }
         return (jsxRuntime.jsx(MagicSocialWalletIcon, { style: {
                 height: pixelToRem.pixelToRem(iconSize),
                 width: pixelToRem.pixelToRem(iconSize),
@@ -89,7 +92,7 @@ const AuthProviderIcon = ({ jwt, iconSize = 64, showStatus, wallet, }) => {
         return null;
     }
     const MagicEmailOrSocialIcon = getMagicEmailOrSocialIcon({
-        getSocialIcon,
+        findSocialIcon,
         jwt,
         wallet: walletForIcon,
     });

package/src/lib/components/AuthProviderIcon/AuthProviderIcon.js

@@ -41,9 +41,9 @@ import '../MenuList/Dropdown/Dropdown.js';
 import '../../context/MockContext/MockContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
 import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
-import { useGetSocialIcon } from '../../utils/hooks/useGetSocialIcon/useGetSocialIcon.js';
+import { useFindSocialIcon } from '../../utils/hooks/useFindSocialIcon/useFindSocialIcon.js';
 
-const getMagicEmailOrSocialIcon = ({ getSocialIcon, wallet, jwt, }) => {
+const getMagicEmailOrSocialIcon = ({ findSocialIcon, wallet, jwt, }) => {
     if (isEmailOTPWalletConnector(wallet.connector)) {
         return SignInWithEmailIcon;
     }
@@ -55,7 +55,7 @@ const getMagicEmailOrSocialIcon = ({ getSocialIcon, wallet, jwt, }) => {
         }
         const { oauthProvider } = socialAccountDataForWallet;
         try {
-            const MagicSocialWalletIcon = getSocialIcon(oauthProvider);
+            const MagicSocialWalletIcon = findSocialIcon(oauthProvider);
             return MagicSocialWalletIcon;
         }
         catch (err) {
@@ -67,10 +67,13 @@ const getMagicEmailOrSocialIcon = ({ getSocialIcon, wallet, jwt, }) => {
 const AuthProviderIcon = ({ jwt, iconSize = 64, showStatus, wallet, }) => {
     const { primaryWallet, selectedWalletConnector } = useInternalDynamicContext();
     const { deniedOauthProvider, deniedAddress } = useAccessDeniedContext();
-    const getSocialIcon = useGetSocialIcon();
+    const findSocialIcon = useFindSocialIcon();
     // when access is denied we don't have jwt set, so we're getting this value out of useAccessDeniedContext
     if (deniedOauthProvider) {
-        const MagicSocialWalletIcon = getSocialIcon(deniedOauthProvider);
+        const MagicSocialWalletIcon = findSocialIcon(deniedOauthProvider);
+        if (!MagicSocialWalletIcon) {
+            return null;
+        }
         return (jsx(MagicSocialWalletIcon, { style: {
                 height: pixelToRem(iconSize),
                 width: pixelToRem(iconSize),
@@ -85,7 +88,7 @@ const AuthProviderIcon = ({ jwt, iconSize = 64, showStatus, wallet, }) => {
         return null;
     }
     const MagicEmailOrSocialIcon = getMagicEmailOrSocialIcon({
-        getSocialIcon,
+        findSocialIcon,
         jwt,
         wallet: walletForIcon,
     });

package/src/lib/components/Button/Button.cjs

@@ -36,12 +36,15 @@ const Button = ({ buttonClassName = '', buttonPadding = 'medium', buttonVariant
     }, buttonPadding ? buttonPaddingClassNameMap[buttonPadding] : '', buttonVariant ? buttonVariantClassNameMap[buttonVariant] : '', buttonRounded ? buttonRoundedClassNameMap[buttonRounded] : '', buttonClassName);
     const handleClick = (e) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         if (onClick) {
-            setInternalButtonLoading(true);
-            try {
-                yield onClick(e);
-            }
-            finally {
-                setInternalButtonLoading(false);
+            const onClickResult = onClick(e);
+            if (onClickResult instanceof Promise) {
+                setInternalButtonLoading(true);
+                try {
+                    yield onClickResult;
+                }
+                finally {
+                    setInternalButtonLoading(false);
+                }
             }
         }
         if (feedback) {
@@ -52,7 +55,7 @@ const Button = ({ buttonClassName = '', buttonPadding = 'medium', buttonVariant
         }
     });
     const buttonContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [startSlot && jsxRuntime.jsx("div", Object.assign({ className: 'button__start-slot' }, { children: startSlot })), (feedback || children) && (jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'button_primary', color: 'primary', as: 'span' }, typographyProps, { children: isFeedbackVisible && feedback ? feedback : children }))), endSlot && jsxRuntime.jsx("div", Object.assign({ className: 'button__end-slot' }, { children: endSlot }))] }));
-    return (jsxRuntime.jsxs("button", Object.assign({ type: type, onClick: handleClick, className: buttonEffectiveClassName, disabled: disabled || internalButtonLoading || loading, "data-testid": dataTestId }, { children: [(internalButtonLoading || loading) && (jsxRuntime.jsx("div", Object.assign({ className: 'button__spinner-container' }, { children: jsxRuntime.jsx(spinner.Spinner, { className: 'button__spinner' }) }))), buttonContent] })));
+    return (jsxRuntime.jsxs("button", Object.assign({ type: type, onClick: handleClick, className: buttonEffectiveClassName, disabled: disabled || internalButtonLoading || loading, "data-testid": dataTestId }, { children: [(internalButtonLoading || loading) && (jsxRuntime.jsx("div", Object.assign({ className: 'button__spinner-container', "data-testid": 'button__spinner' }, { children: jsxRuntime.jsx(spinner.Spinner, { className: 'button__spinner' }) }))), buttonContent] })));
 };
 
 exports.Button = Button;

package/src/lib/components/Button/Button.d.ts

@@ -1,9 +1,9 @@
-import { ButtonHTMLAttributes, MouseEventHandler, ReactNode } from 'react';
+import { ButtonHTMLAttributes, FC, MouseEventHandler, ReactNode } from 'react';
 import { TypographyProps } from '../Typography/Typography.types';
 type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
 type ButtonPadding = 'small' | 'medium' | 'large' | 'none';
 type ButtonRounded = 'default' | 'medium' | 'small';
-type Props = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> & {
+export type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> & {
     buttonClassName?: string;
     buttonPadding?: ButtonPadding;
     buttonRounded?: ButtonRounded;
@@ -18,5 +18,5 @@ type Props = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> & {
     typographyProps?: Omit<TypographyProps, 'as'>;
     onClick?: MouseEventHandler<HTMLButtonElement> | (() => Promise<void>);
 };
-export declare const Button: ({ buttonClassName, buttonPadding, buttonVariant, buttonRounded, children, feedback, expanded, dataTestId, disabled, loading, onClick, type, startSlot, endSlot, typographyProps, }: Props) => JSX.Element;
+export declare const Button: FC<ButtonProps>;
 export {};

package/src/lib/components/Button/Button.js

@@ -32,12 +32,15 @@ const Button = ({ buttonClassName = '', buttonPadding = 'medium', buttonVariant
     }, buttonPadding ? buttonPaddingClassNameMap[buttonPadding] : '', buttonVariant ? buttonVariantClassNameMap[buttonVariant] : '', buttonRounded ? buttonRoundedClassNameMap[buttonRounded] : '', buttonClassName);
     const handleClick = (e) => __awaiter(void 0, void 0, void 0, function* () {
         if (onClick) {
-            setInternalButtonLoading(true);
-            try {
-                yield onClick(e);
-            }
-            finally {
-                setInternalButtonLoading(false);
+            const onClickResult = onClick(e);
+            if (onClickResult instanceof Promise) {
+                setInternalButtonLoading(true);
+                try {
+                    yield onClickResult;
+                }
+                finally {
+                    setInternalButtonLoading(false);
+                }
             }
         }
         if (feedback) {
@@ -48,7 +51,7 @@ const Button = ({ buttonClassName = '', buttonPadding = 'medium', buttonVariant
         }
     });
     const buttonContent = (jsxs(Fragment, { children: [startSlot && jsx("div", Object.assign({ className: 'button__start-slot' }, { children: startSlot })), (feedback || children) && (jsx(Typography, Object.assign({ variant: 'button_primary', color: 'primary', as: 'span' }, typographyProps, { children: isFeedbackVisible && feedback ? feedback : children }))), endSlot && jsx("div", Object.assign({ className: 'button__end-slot' }, { children: endSlot }))] }));
-    return (jsxs("button", Object.assign({ type: type, onClick: handleClick, className: buttonEffectiveClassName, disabled: disabled || internalButtonLoading || loading, "data-testid": dataTestId }, { children: [(internalButtonLoading || loading) && (jsx("div", Object.assign({ className: 'button__spinner-container' }, { children: jsx(Spinner, { className: 'button__spinner' }) }))), buttonContent] })));
+    return (jsxs("button", Object.assign({ type: type, onClick: handleClick, className: buttonEffectiveClassName, disabled: disabled || internalButtonLoading || loading, "data-testid": dataTestId }, { children: [(internalButtonLoading || loading) && (jsx("div", Object.assign({ className: 'button__spinner-container', "data-testid": 'button__spinner' }, { children: jsx(Spinner, { className: 'button__spinner' }) }))), buttonContent] })));
 };
 
 export { Button };

package/src/lib/components/DynamicConnectButton/components/ConnectButton.cjs

@@ -6,6 +6,6 @@ var jsxRuntime = require('react/jsx-runtime');
 var Button = require('../../Button/Button.cjs');
 var classNames = require('../../../utils/functions/classNames/classNames.cjs');
 
-const ConnectButton = ({ buttonClassName, buttonContainerClassName, onClick, isActive, isLoading, children, }) => (jsxRuntime.jsx("div", Object.assign({ className: buttonContainerClassName }, { children: jsxRuntime.jsx(Button.Button, Object.assign({ dataTestId: 'ConnectButton', onClick: onClick, buttonClassName: classNames.classNames('connect-button', buttonClassName), loading: isLoading && isActive, disabled: isLoading && isActive, buttonVariant: 'primary', buttonPadding: 'large', buttonRounded: 'default' }, { children: children })) })));
+const ConnectButton = ({ buttonClassName, buttonContainerClassName, onClick, isActive, isLoading, children, }) => (jsxRuntime.jsx("div", Object.assign({ className: buttonContainerClassName }, { children: jsxRuntime.jsx(Button.Button, Object.assign({ dataTestId: 'ConnectButton', onClick: onClick, buttonClassName: classNames.classNames('connect-button', buttonClassName), loading: isLoading && isActive, disabled: isLoading && isActive, buttonVariant: 'primary', buttonPadding: 'large' }, { children: children })) })));
 
 exports.ConnectButton = ConnectButton;

package/src/lib/components/DynamicConnectButton/components/ConnectButton.js

@@ -2,6 +2,6 @@ import { jsx } from 'react/jsx-runtime';
 import { Button } from '../../Button/Button.js';
 import { classNames } from '../../../utils/functions/classNames/classNames.js';
 
-const ConnectButton = ({ buttonClassName, buttonContainerClassName, onClick, isActive, isLoading, children, }) => (jsx("div", Object.assign({ className: buttonContainerClassName }, { children: jsx(Button, Object.assign({ dataTestId: 'ConnectButton', onClick: onClick, buttonClassName: classNames('connect-button', buttonClassName), loading: isLoading && isActive, disabled: isLoading && isActive, buttonVariant: 'primary', buttonPadding: 'large', buttonRounded: 'default' }, { children: children })) })));
+const ConnectButton = ({ buttonClassName, buttonContainerClassName, onClick, isActive, isLoading, children, }) => (jsx("div", Object.assign({ className: buttonContainerClassName }, { children: jsx(Button, Object.assign({ dataTestId: 'ConnectButton', onClick: onClick, buttonClassName: classNames('connect-button', buttonClassName), loading: isLoading && isActive, disabled: isLoading && isActive, buttonVariant: 'primary', buttonPadding: 'large' }, { children: children })) })));
 
 export { ConnectButton };

package/src/lib/components/Icon/Icon.cjs

@@ -14,6 +14,7 @@ const Icon = ({ children, className = '', color, size, }) => {
         'text-tertiary': 'icon--color-text-tertiary',
     };
     const sizeClassNameMap = {
+        large: 'icon--size-large',
         medium: 'icon--size-medium',
         small: 'icon--size-small',
         xsmall: 'icon--size-xsmall',

package/src/lib/components/Icon/Icon.js

@@ -10,6 +10,7 @@ const Icon = ({ children, className = '', color, size, }) => {
         'text-tertiary': 'icon--color-text-tertiary',
     };
     const sizeClassNameMap = {
+        large: 'icon--size-large',
         medium: 'icon--size-medium',
         small: 'icon--size-small',
         xsmall: 'icon--size-xsmall',

package/src/lib/components/Icon/Icon.types.d.ts

@@ -1,6 +1,6 @@
 import { FC, ReactElement } from 'react';
 export type IconColor = 'text-primary' | 'text-secondary' | 'text-tertiary' | 'text-error' | 'brand-primary';
-export type IconSize = 'xsmall' | 'small' | 'medium';
+export type IconSize = 'xsmall' | 'small' | 'medium' | 'large';
 export type IconProps = {
     children: ReactElement;
     className?: string;

package/src/lib/components/IconWithSpinner/IconWithSpinner.d.ts

@@ -2,7 +2,7 @@ import { ReactElement } from 'react';
 import { Iconic } from '@dynamic-labs/iconic';
 import { Icon } from '../../shared';
 type Props = {
-    Icon?: Icon | Iconic | ReactElement;
+    Icon?: Icon | Iconic | ReactElement | null;
     className?: string;
     customSpinnerColor?: string;
     iconSize?: number;

package/src/lib/components/ListTile/ListTile.cjs

@@ -6,6 +6,6 @@ var jsxRuntime = require('react/jsx-runtime');
 var classNames = require('../../utils/functions/classNames/classNames.cjs');
 var Typography = require('../Typography/Typography.cjs');
 
-const ListTile = ({ children, onClick, leading, trailing, style, className = '', dataTestId, }) => (jsxRuntime.jsxs("button", Object.assign({ "data-testid": dataTestId, type: 'button', className: classNames.classNames(className, 'list-tile'), onClick: onClick, style: style }, { children: [leading, jsxRuntime.jsx("div", Object.assign({ className: 'list-tile__children' }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'body_normal', color: 'primary', as: 'span' }, { children: children })) })), trailing] })));
+const ListTile = ({ children, onClick, leading, disabled = false, trailing, style, className = '', dataTestId, }) => (jsxRuntime.jsxs("button", Object.assign({ "data-testid": dataTestId, type: 'button', className: classNames.classNames(className, 'list-tile'), onClick: onClick, style: style, disabled: disabled }, { children: [leading, jsxRuntime.jsx("div", Object.assign({ className: 'list-tile__children' }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'body_normal', color: 'primary', as: 'span' }, { children: children })) })), trailing] })));
 
 exports.ListTile = ListTile;

package/src/lib/components/ListTile/ListTile.js

@@ -2,6 +2,6 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { classNames } from '../../utils/functions/classNames/classNames.js';
 import { Typography } from '../Typography/Typography.js';
 
-const ListTile = ({ children, onClick, leading, trailing, style, className = '', dataTestId, }) => (jsxs("button", Object.assign({ "data-testid": dataTestId, type: 'button', className: classNames(className, 'list-tile'), onClick: onClick, style: style }, { children: [leading, jsx("div", Object.assign({ className: 'list-tile__children' }, { children: jsx(Typography, Object.assign({ weight: 'medium', variant: 'body_normal', color: 'primary', as: 'span' }, { children: children })) })), trailing] })));
+const ListTile = ({ children, onClick, leading, disabled = false, trailing, style, className = '', dataTestId, }) => (jsxs("button", Object.assign({ "data-testid": dataTestId, type: 'button', className: classNames(className, 'list-tile'), onClick: onClick, style: style, disabled: disabled }, { children: [leading, jsx("div", Object.assign({ className: 'list-tile__children' }, { children: jsx(Typography, Object.assign({ weight: 'medium', variant: 'body_normal', color: 'primary', as: 'span' }, { children: children })) })), trailing] })));
 
 export { ListTile };

package/src/lib/components/ListTile/ListTile.types.d.ts

@@ -4,6 +4,7 @@ export type ListTileProps = {
     dataTestId?: string;
     leading?: ReactNode;
     onClick?: MouseEventHandler<HTMLButtonElement>;
+    disabled?: boolean;
     style?: CSSProperties;
     trailing?: ReactNode;
 };

package/src/lib/components/ModalHeader/ModalHeader.cjs

@@ -5,9 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var classNames = require('../../utils/functions/classNames/classNames.cjs');
 
-const ModalHeader = ({ alignContent, children, leading, trailing, positionAbsolute = false, }) => (jsxRuntime.jsxs("div", Object.assign({ className: classNames.classNames('modal-header', {
+const ModalHeader = ({ alignContent, children, leading, trailing, positionAbsolute = false, style, }) => (jsxRuntime.jsxs("div", Object.assign({ className: classNames.classNames('modal-header', {
         'modal-header--absolute': positionAbsolute,
         'modal-header--align-content-bottom': alignContent === 'bottom',
-    }) }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'modal-header__leading' }, { children: leading })), children, jsxRuntime.jsx("div", Object.assign({ className: 'modal-header__trailing' }, { children: trailing }))] })));
+    }), style: style }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'modal-header__leading' }, { children: leading })), children, jsxRuntime.jsx("div", Object.assign({ className: 'modal-header__trailing' }, { children: trailing }))] })));
 
 exports.ModalHeader = ModalHeader;

package/src/lib/components/ModalHeader/ModalHeader.js

@@ -1,9 +1,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { classNames } from '../../utils/functions/classNames/classNames.js';
 
-const ModalHeader = ({ alignContent, children, leading, trailing, positionAbsolute = false, }) => (jsxs("div", Object.assign({ className: classNames('modal-header', {
+const ModalHeader = ({ alignContent, children, leading, trailing, positionAbsolute = false, style, }) => (jsxs("div", Object.assign({ className: classNames('modal-header', {
         'modal-header--absolute': positionAbsolute,
         'modal-header--align-content-bottom': alignContent === 'bottom',
-    }) }, { children: [jsx("div", Object.assign({ className: 'modal-header__leading' }, { children: leading })), children, jsx("div", Object.assign({ className: 'modal-header__trailing' }, { children: trailing }))] })));
+    }), style: style }, { children: [jsx("div", Object.assign({ className: 'modal-header__leading' }, { children: leading })), children, jsx("div", Object.assign({ className: 'modal-header__trailing' }, { children: trailing }))] })));
 
 export { ModalHeader };

package/src/lib/components/ModalHeader/ModalHeader.types.d.ts

@@ -1,9 +1,10 @@
-import { ReactElement, ReactNode } from 'react';
+import { CSSProperties, ReactElement, ReactNode } from 'react';
 export type ModalHeaderProps = {
     alignContent?: 'bottom';
     children?: ReactNode;
     leading?: ReactElement | ReactElement[];
     positionAbsolute?: boolean;
     trailing?: ReactNode;
+    style?: CSSProperties;
 };
 export type ModalHeaderComponent = (props: ModalHeaderProps) => ReactElement;

package/src/lib/components/NetworkPicker/NetworkPicker.cjs

@@ -76,7 +76,7 @@ const NetworkPicker = ({ activeClassName = '', buttonClassName = '', checkboxCla
             setIsNetworkPickerOpen(false);
         }
     });
-    return (jsxRuntime.jsxs("div", Object.assign({ className: classNames.classNames('non-widget-network-picker', mainClassName), ref: pickerRef }, { children: [jsxRuntime.jsx(NetworkControl.NetworkControl, { evmNetworks: evmNetworks, activeClassName: activeClassName, network: network, loading: loadingNetwork, isOpen: isNetworkPickerOpen, setIsOpen: setIsNetworkPickerOpen, walletConnector: connector, showNetworkName: showNetworkName, buttonClassName: buttonClassName }), jsxRuntime.jsx("div", { ref: anchorRef, style: { marginTop: 5, position: 'absolute' } }), shouldAllowOpenDropdown && (jsxRuntime.jsx(MenuList.MenuList, Object.assign({ className: listClassName, isOpen: isNetworkPickerOpen, onClickClose: () => setIsNetworkPickerOpen(false), popperProps: { anchorOrigin: 'bottom-left', anchorRef }, mobileTitle: 'Select network' }, { children: evmNetworks.map(({ name, networkId, vanityName, iconUrls }) => (jsxRuntime.jsx(NetworkAction.NetworkAction, { iconUrl: iconUrls === null || iconUrls === void 0 ? void 0 : iconUrls[0], networkId: networkId, networkName: vanityName || name, network: network, onClick: handleNetworkChange, checkboxClassName: checkboxClassName, newNetworkId: newNetworkId, notSupported: supportedWalletNetworks &&
+    return (jsxRuntime.jsxs("div", Object.assign({ className: classNames.classNames('non-widget-network-picker', mainClassName), ref: pickerRef, "data-testid": 'network-picker' }, { children: [jsxRuntime.jsx(NetworkControl.NetworkControl, { evmNetworks: evmNetworks, activeClassName: activeClassName, network: network, loading: loadingNetwork, isOpen: isNetworkPickerOpen, setIsOpen: setIsNetworkPickerOpen, walletConnector: connector, showNetworkName: showNetworkName, buttonClassName: buttonClassName }), jsxRuntime.jsx("div", { ref: anchorRef, style: { marginTop: 5, position: 'absolute' } }), shouldAllowOpenDropdown && (jsxRuntime.jsx(MenuList.MenuList, Object.assign({ className: listClassName, isOpen: isNetworkPickerOpen, onClickClose: () => setIsNetworkPickerOpen(false), popperProps: { anchorOrigin: 'bottom-left', anchorRef }, mobileTitle: 'Select network' }, { children: evmNetworks.map(({ name, networkId, vanityName, iconUrls }) => (jsxRuntime.jsx(NetworkAction.NetworkAction, { iconUrl: iconUrls === null || iconUrls === void 0 ? void 0 : iconUrls[0], networkId: networkId, networkName: vanityName || name, network: network, onClick: handleNetworkChange, checkboxClassName: checkboxClassName, newNetworkId: newNetworkId, notSupported: supportedWalletNetworks &&
                         !supportedWalletNetworks.includes(`${networkId}`) }, networkId))) })))] })));
 };
 

package/src/lib/components/NetworkPicker/NetworkPicker.js

@@ -72,7 +72,7 @@ const NetworkPicker = ({ activeClassName = '', buttonClassName = '', checkboxCla
             setIsNetworkPickerOpen(false);
         }
     });
-    return (jsxs("div", Object.assign({ className: classNames('non-widget-network-picker', mainClassName), ref: pickerRef }, { children: [jsx(NetworkControl, { evmNetworks: evmNetworks, activeClassName: activeClassName, network: network, loading: loadingNetwork, isOpen: isNetworkPickerOpen, setIsOpen: setIsNetworkPickerOpen, walletConnector: connector, showNetworkName: showNetworkName, buttonClassName: buttonClassName }), jsx("div", { ref: anchorRef, style: { marginTop: 5, position: 'absolute' } }), shouldAllowOpenDropdown && (jsx(MenuList, Object.assign({ className: listClassName, isOpen: isNetworkPickerOpen, onClickClose: () => setIsNetworkPickerOpen(false), popperProps: { anchorOrigin: 'bottom-left', anchorRef }, mobileTitle: 'Select network' }, { children: evmNetworks.map(({ name, networkId, vanityName, iconUrls }) => (jsx(NetworkAction, { iconUrl: iconUrls === null || iconUrls === void 0 ? void 0 : iconUrls[0], networkId: networkId, networkName: vanityName || name, network: network, onClick: handleNetworkChange, checkboxClassName: checkboxClassName, newNetworkId: newNetworkId, notSupported: supportedWalletNetworks &&
+    return (jsxs("div", Object.assign({ className: classNames('non-widget-network-picker', mainClassName), ref: pickerRef, "data-testid": 'network-picker' }, { children: [jsx(NetworkControl, { evmNetworks: evmNetworks, activeClassName: activeClassName, network: network, loading: loadingNetwork, isOpen: isNetworkPickerOpen, setIsOpen: setIsNetworkPickerOpen, walletConnector: connector, showNetworkName: showNetworkName, buttonClassName: buttonClassName }), jsx("div", { ref: anchorRef, style: { marginTop: 5, position: 'absolute' } }), shouldAllowOpenDropdown && (jsx(MenuList, Object.assign({ className: listClassName, isOpen: isNetworkPickerOpen, onClickClose: () => setIsNetworkPickerOpen(false), popperProps: { anchorOrigin: 'bottom-left', anchorRef }, mobileTitle: 'Select network' }, { children: evmNetworks.map(({ name, networkId, vanityName, iconUrls }) => (jsx(NetworkAction, { iconUrl: iconUrls === null || iconUrls === void 0 ? void 0 : iconUrls[0], networkId: networkId, networkName: vanityName || name, network: network, onClick: handleNetworkChange, checkboxClassName: checkboxClassName, newNetworkId: newNetworkId, notSupported: supportedWalletNetworks &&
                         !supportedWalletNetworks.includes(`${networkId}`) }, networkId))) })))] })));
 };
 

package/src/lib/components/OTPVerificationView/OTPVerificationView.cjs

@@ -10,6 +10,7 @@ require('@dynamic-labs/sdk-api');
 require('../../shared/logger.cjs');
 require('@dynamic-labs/wallet-connector-core');
 require('../../context/ViewContext/ViewContext.cjs');
+var close = require('../../shared/assets/close.cjs');
 var chevronLeft = require('../../shared/assets/chevron-left.cjs');
 var check = require('../../shared/assets/check.cjs');
 var pencilAltIcon = require('../../shared/assets/pencil-alt-icon.cjs');
@@ -54,9 +55,10 @@ require('yup');
 require('../InlineWidget/InlineWidget.cjs');
 require('../MenuList/Dropdown/Dropdown.cjs');
 
-const OTPVerificationView = ({ onClickBack, onClickEditEmail, isLoading, email, onPinComplete, isValid, error, onPinChange, displayPoweredByDynamic = false, }) => {
-    const backButton = (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ type: 'button', onClick: onClickBack, "data-testid": 'back-button' }, { children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) })));
-    return (jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view' }, { children: [jsxRuntime.jsx(ModalHeaderBanner.ModalHeaderBanner, { type: 'error', message: error === null || error === void 0 ? void 0 : error.message }), jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ alignContent: 'bottom', leading: onClickBack && backButton }, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view__status-header' }, { children: [isValid && (jsxRuntime.jsx(IconWithStatus.IconWithStatus, { Icon: iconic.SignInWithEmailIcon, iconSize: 50, InnerIcon: check.ReactComponent })), !isValid && (jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: iconic.SignInWithEmailIcon, iconSize: 80, isSpinning: isLoading }))] })) })), jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'otp-verification-view__title' }, { children: isValid ? 'Verification code confirmed' : 'Confirm verification code' })), jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view__body' }, { children: [isValid && (jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "Hang tight while we get things ready for you" }))), !isValid && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "We\u2019ve sent a verification code to" })), jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view__email-container' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'bold', color: 'secondary' }, { children: shortenEmail.shortenEmail(email) })), onClickEditEmail && (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ onClick: onClickEditEmail, "data-testid": 'otp-verification-view__edit-button' }, { children: jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'text-tertiary' }, { children: jsxRuntime.jsx(pencilAltIcon.ReactComponent, {}) })) })))] }))] }))] })), jsxRuntime.jsx(PinField.PinField, { initialValue: Array(6).join('.').split('.'), isLoading: isLoading, handleComplete: onPinComplete, isValidated: isValid, inputMode: 'numeric', pattern: '[0-9]*', hasError: Boolean(error), onChange: onPinChange }), jsxRuntime.jsx("div", Object.assign({ className: 'otp-verification-view__footer' }, { children: displayPoweredByDynamic && jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, {}) }))] })));
+const OTPVerificationView = ({ onClickBack, onClickEditEmail, isLoading, email, onPinComplete, isValid, error, onPinChange, onClickClose, displayPoweredByDynamic = false, }) => {
+    const backButton = onClickBack && (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ type: 'button', onClick: onClickBack, "data-testid": 'back-button' }, { children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) })));
+    const closeButton = (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ onClick: onClickClose, type: 'button', "data-testid": 'close-button' }, { children: jsxRuntime.jsx(close.ReactComponent, {}) })));
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view' }, { children: [jsxRuntime.jsx(ModalHeaderBanner.ModalHeaderBanner, { type: 'error', message: error === null || error === void 0 ? void 0 : error.message }), jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ alignContent: 'bottom', leading: onClickBack && backButton, trailing: onClickClose && closeButton }, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view__status-header' }, { children: [isValid && (jsxRuntime.jsx(IconWithStatus.IconWithStatus, { Icon: iconic.SignInWithEmailIcon, iconSize: 50, InnerIcon: check.ReactComponent })), !isValid && (jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: iconic.SignInWithEmailIcon, iconSize: 80, isSpinning: isLoading }))] })) })), jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'otp-verification-view__title' }, { children: isValid ? 'Verification code confirmed' : 'Confirm verification code' })), jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view__body' }, { children: [isValid && (jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "Hang tight while we get things ready for you" }))), !isValid && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "We\u2019ve sent a verification code to" })), jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view__email-container' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'bold', color: 'secondary' }, { children: shortenEmail.shortenEmail(email) })), onClickEditEmail && (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ onClick: onClickEditEmail, "data-testid": 'otp-verification-view__edit-button' }, { children: jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'text-tertiary' }, { children: jsxRuntime.jsx(pencilAltIcon.ReactComponent, {}) })) })))] }))] }))] })), jsxRuntime.jsx(PinField.PinField, { initialValue: Array(6).join('.').split('.'), isLoading: isLoading, handleComplete: onPinComplete, isValidated: isValid, inputMode: 'numeric', pattern: '[0-9]*', hasError: Boolean(error), onChange: onPinChange }), jsxRuntime.jsx("div", Object.assign({ className: 'otp-verification-view__footer' }, { children: displayPoweredByDynamic && jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, {}) }))] })));
 };
 
 exports.OTPVerificationView = OTPVerificationView;

package/src/lib/components/OTPVerificationView/OTPVerificationView.d.ts

@@ -6,6 +6,7 @@ type OtpVerificationLayoutProps = {
     isLoading: boolean;
     isValid: boolean;
     onClickBack?: MouseEventHandler<HTMLButtonElement>;
+    onClickClose?: MouseEventHandler<HTMLButtonElement>;
     onClickEditEmail?: MouseEventHandler<HTMLButtonElement>;
     onPinChange?: (value: string) => void;
     onPinComplete: (value: string) => void;

package/src/lib/components/OTPVerificationView/OTPVerificationView.js

@@ -6,6 +6,7 @@ import '@dynamic-labs/sdk-api';
 import '../../shared/logger.js';
 import '@dynamic-labs/wallet-connector-core';
 import '../../context/ViewContext/ViewContext.js';
+import { ReactComponent as SvgClose } from '../../shared/assets/close.js';
 import { ReactComponent as SvgChevronLeft } from '../../shared/assets/chevron-left.js';
 import { ReactComponent as SvgCheck } from '../../shared/assets/check.js';
 import { ReactComponent as SvgPencilAltIcon } from '../../shared/assets/pencil-alt-icon.js';
@@ -50,9 +51,10 @@ import 'yup';
 import '../InlineWidget/InlineWidget.js';
 import '../MenuList/Dropdown/Dropdown.js';
 
-const OTPVerificationView = ({ onClickBack, onClickEditEmail, isLoading, email, onPinComplete, isValid, error, onPinChange, displayPoweredByDynamic = false, }) => {
-    const backButton = (jsx(IconButton, Object.assign({ type: 'button', onClick: onClickBack, "data-testid": 'back-button' }, { children: jsx(SvgChevronLeft, {}) })));
-    return (jsxs("div", Object.assign({ className: 'otp-verification-view' }, { children: [jsx(ModalHeaderBanner, { type: 'error', message: error === null || error === void 0 ? void 0 : error.message }), jsx(ModalHeader, Object.assign({ alignContent: 'bottom', leading: onClickBack && backButton }, { children: jsxs("div", Object.assign({ className: 'otp-verification-view__status-header' }, { children: [isValid && (jsx(IconWithStatus, { Icon: SignInWithEmailIcon, iconSize: 50, InnerIcon: SvgCheck })), !isValid && (jsx(IconWithSpinner, { Icon: SignInWithEmailIcon, iconSize: 80, isSpinning: isLoading }))] })) })), jsx(Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'otp-verification-view__title' }, { children: isValid ? 'Verification code confirmed' : 'Confirm verification code' })), jsxs("div", Object.assign({ className: 'otp-verification-view__body' }, { children: [isValid && (jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "Hang tight while we get things ready for you" }))), !isValid && (jsxs(Fragment, { children: [jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "We\u2019ve sent a verification code to" })), jsxs("div", Object.assign({ className: 'otp-verification-view__email-container' }, { children: [jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'bold', color: 'secondary' }, { children: shortenEmail(email) })), onClickEditEmail && (jsx(IconButton, Object.assign({ onClick: onClickEditEmail, "data-testid": 'otp-verification-view__edit-button' }, { children: jsx(Icon, Object.assign({ color: 'text-tertiary' }, { children: jsx(SvgPencilAltIcon, {}) })) })))] }))] }))] })), jsx(PinField, { initialValue: Array(6).join('.').split('.'), isLoading: isLoading, handleComplete: onPinComplete, isValidated: isValid, inputMode: 'numeric', pattern: '[0-9]*', hasError: Boolean(error), onChange: onPinChange }), jsx("div", Object.assign({ className: 'otp-verification-view__footer' }, { children: displayPoweredByDynamic && jsx(PoweredByDynamic, {}) }))] })));
+const OTPVerificationView = ({ onClickBack, onClickEditEmail, isLoading, email, onPinComplete, isValid, error, onPinChange, onClickClose, displayPoweredByDynamic = false, }) => {
+    const backButton = onClickBack && (jsx(IconButton, Object.assign({ type: 'button', onClick: onClickBack, "data-testid": 'back-button' }, { children: jsx(SvgChevronLeft, {}) })));
+    const closeButton = (jsx(IconButton, Object.assign({ onClick: onClickClose, type: 'button', "data-testid": 'close-button' }, { children: jsx(SvgClose, {}) })));
+    return (jsxs("div", Object.assign({ className: 'otp-verification-view' }, { children: [jsx(ModalHeaderBanner, { type: 'error', message: error === null || error === void 0 ? void 0 : error.message }), jsx(ModalHeader, Object.assign({ alignContent: 'bottom', leading: onClickBack && backButton, trailing: onClickClose && closeButton }, { children: jsxs("div", Object.assign({ className: 'otp-verification-view__status-header' }, { children: [isValid && (jsx(IconWithStatus, { Icon: SignInWithEmailIcon, iconSize: 50, InnerIcon: SvgCheck })), !isValid && (jsx(IconWithSpinner, { Icon: SignInWithEmailIcon, iconSize: 80, isSpinning: isLoading }))] })) })), jsx(Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'otp-verification-view__title' }, { children: isValid ? 'Verification code confirmed' : 'Confirm verification code' })), jsxs("div", Object.assign({ className: 'otp-verification-view__body' }, { children: [isValid && (jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "Hang tight while we get things ready for you" }))), !isValid && (jsxs(Fragment, { children: [jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "We\u2019ve sent a verification code to" })), jsxs("div", Object.assign({ className: 'otp-verification-view__email-container' }, { children: [jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'bold', color: 'secondary' }, { children: shortenEmail(email) })), onClickEditEmail && (jsx(IconButton, Object.assign({ onClick: onClickEditEmail, "data-testid": 'otp-verification-view__edit-button' }, { children: jsx(Icon, Object.assign({ color: 'text-tertiary' }, { children: jsx(SvgPencilAltIcon, {}) })) })))] }))] }))] })), jsx(PinField, { initialValue: Array(6).join('.').split('.'), isLoading: isLoading, handleComplete: onPinComplete, isValidated: isValid, inputMode: 'numeric', pattern: '[0-9]*', hasError: Boolean(error), onChange: onPinChange }), jsx("div", Object.assign({ className: 'otp-verification-view__footer' }, { children: displayPoweredByDynamic && jsx(PoweredByDynamic, {}) }))] })));
 };
 
 export { OTPVerificationView };