@dynamic-labs/sdk-react-core 0.18.0-beta.31 → 0.18.0

package/CHANGELOG.md

@@ -1,4 +1,40 @@
 
+## [0.18.0](https://github.com/dynamic-labs/DynamicAuth/compare/v0.18.0-beta.32...v0.18.0) (2023-08-13)
+
+
+### Features
+
+* add in OKX wallet integration ([#2871](https://github.com/dynamic-labs/DynamicAuth/issues/2871)) ([#2927](https://github.com/dynamic-labs/DynamicAuth/issues/2927)) ([f6d06bc](https://github.com/dynamic-labs/DynamicAuth/commit/f6d06bc75ee0e53c9d972f5fab1f4de11818bd82))
+* update wallet locked view ([#2923](https://github.com/dynamic-labs/DynamicAuth/issues/2923)) ([3cc03ee](https://github.com/dynamic-labs/DynamicAuth/commit/3cc03ee5913434d99386fc89d4d26d5d3fb3ca19))
+
+
+### Bug Fixes
+
+* account already exist message not displaying automatically ([#2896](https://github.com/dynamic-labs/DynamicAuth/issues/2896)) ([#2906](https://github.com/dynamic-labs/DynamicAuth/issues/2906)) ([5e7478a](https://github.com/dynamic-labs/DynamicAuth/commit/5e7478acd864451a7cf7e8e62845cca7ef5439c6))
+* don't let user update email if it's tied to an embedded wallet ([#2903](https://github.com/dynamic-labs/DynamicAuth/issues/2903)) ([33c52b5](https://github.com/dynamic-labs/DynamicAuth/commit/33c52b50a880a34b4161a700b8b1805c9b01527d)), closes [#2883](https://github.com/dynamic-labs/DynamicAuth/issues/2883)
+* **GVTY-195:** issues with mergeUserAccountsView  ([#2945](https://github.com/dynamic-labs/DynamicAuth/issues/2945)) ([2c6265e](https://github.com/dynamic-labs/DynamicAuth/commit/2c6265e3e709edb9ff1af6e6c139b85418e46d76))
+* **Magic:** improve gas estimate for transactions ([#2947](https://github.com/dynamic-labs/DynamicAuth/issues/2947)) ([ad35a72](https://github.com/dynamic-labs/DynamicAuth/commit/ad35a722df6abd54b98ea491661ff4ec3e602621))
+* missing enable isVerificationInProgress  ([#2926](https://github.com/dynamic-labs/DynamicAuth/issues/2926)) ([98f54fd](https://github.com/dynamic-labs/DynamicAuth/commit/98f54fd1345713dfaf0ef837502dfaca3709d633))
+* **networks:** merge custom network after API networks ([#2949](https://github.com/dynamic-labs/DynamicAuth/issues/2949)) ([ab22303](https://github.com/dynamic-labs/DynamicAuth/commit/ab22303294123c2a914a65f0d2c15481740647bb))
+* onBeforeConnectSuccessConfirmation is being called multiple time ([#2965](https://github.com/dynamic-labs/DynamicAuth/issues/2965)) ([a276968](https://github.com/dynamic-labs/DynamicAuth/commit/a2769689bc82350dfb8123e1fe8a4e92a60b262c))
+* **QNTM-249:** broken email update when user is authenticated ([#2932](https://github.com/dynamic-labs/DynamicAuth/issues/2932)) ([db33ba1](https://github.com/dynamic-labs/DynamicAuth/commit/db33ba14c317469958ce314a3822b706e20b07d0))
+* reformat social sign-in text ([#2956](https://github.com/dynamic-labs/DynamicAuth/issues/2956)) ([#2961](https://github.com/dynamic-labs/DynamicAuth/issues/2961)) ([f8d2222](https://github.com/dynamic-labs/DynamicAuth/commit/f8d2222d102f5335f95ec917cbb63bf9b55eff0b))
+* **transaction:** improve gas estimate in transaction confirmation ([#2938](https://github.com/dynamic-labs/DynamicAuth/issues/2938)) ([02d0f46](https://github.com/dynamic-labs/DynamicAuth/commit/02d0f46127e94e83b4decbaaf6a45dbae135c89d))
+* useSyncPrimaryWallet overrides views with "wallet-locked-view" ([#2921](https://github.com/dynamic-labs/DynamicAuth/issues/2921)) ([aa8c369](https://github.com/dynamic-labs/DynamicAuth/commit/aa8c369d2a713eb57ecc99b16a6b62d465789370))
+* **wallet-list:** update key to distinguish wallet and wallet group ([#2922](https://github.com/dynamic-labs/DynamicAuth/issues/2922)) ([f40c07c](https://github.com/dynamic-labs/DynamicAuth/commit/f40c07c65915775e99a1dbb8d07bb23824a92915)), closes [#2909](https://github.com/dynamic-labs/DynamicAuth/issues/2909)
+
+## [0.18.0-beta.32](https://github.com/dynamic-labs/DynamicAuth/compare/v0.18.0-beta.31...v0.18.0-beta.32) (2023-08-09)
+
+
+### Features
+
+* disable social buttons after provider is selected ([#2875](https://github.com/dynamic-labs/DynamicAuth/issues/2875)) ([#2881](https://github.com/dynamic-labs/DynamicAuth/issues/2881)) ([8a20409](https://github.com/dynamic-labs/DynamicAuth/commit/8a204095a322872caf6255db40bc10d29047e9a4))
+
+
+### Bug Fixes
+
+* css variables are being ignored for ConnectButton component ([#2884](https://github.com/dynamic-labs/DynamicAuth/issues/2884)) ([979557e](https://github.com/dynamic-labs/DynamicAuth/commit/979557edf2da81c2681c57e8431a5bf0ed235433))
+
 ## [0.18.0-beta.31](https://github.com/dynamic-labs/DynamicAuth/compare/v0.18.0-beta.30...v0.18.0-beta.31) (2023-08-08)
 
 

package/package.cjs

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "0.18.0-beta.31";
+var version = "0.18.0";
 var dependencies = {
 	"react-focus-lock": "2.9.2",
 	"@dynamic-labs/iconic": "0.1.23",
-	"@dynamic-labs/sdk-api": "0.0.255",
+	"@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.18.0-beta.31";
+var version = "0.18.0";
 var dependencies = {
 	"react-focus-lock": "2.9.2",
 	"@dynamic-labs/iconic": "0.1.23",
-	"@dynamic-labs/sdk-api": "0.0.255",
+	"@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.18.0-beta.31",
+  "version": "0.18.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/dynamic-labs/DynamicAuth.git",
@@ -9,20 +9,20 @@
   "dependencies": {
     "react-focus-lock": "2.9.2",
     "@dynamic-labs/iconic": "0.1.23",
-    "@dynamic-labs/sdk-api": "0.0.255",
+    "@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.18.0-beta.31",
-    "@dynamic-labs/multi-wallet": "0.18.0-beta.31",
-    "@dynamic-labs/rpc-providers": "0.18.0-beta.31",
-    "@dynamic-labs/types": "0.18.0-beta.31",
-    "@dynamic-labs/utils": "0.18.0-beta.31",
-    "@dynamic-labs/wallet-book": "0.18.0-beta.31",
-    "@dynamic-labs/wallet-connector-core": "0.18.0-beta.31",
+    "@dynamic-labs/logger": "0.18.0",
+    "@dynamic-labs/multi-wallet": "0.18.0",
+    "@dynamic-labs/rpc-providers": "0.18.0",
+    "@dynamic-labs/types": "0.18.0",
+    "@dynamic-labs/utils": "0.18.0",
+    "@dynamic-labs/wallet-book": "0.18.0",
+    "@dynamic-labs/wallet-connector-core": "0.18.0",
     "eventemitter3": "5.0.1"
   },
   "devDependencies": {

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/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.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/ErrorContainer/ErrorContainer.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-type Variant = 'error' | 'info';
+type Variant = 'error' | 'info' | 'success';
 type Props = {
     children: ReactNode;
     className?: string;

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/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 };

package/src/lib/components/TransactionConfirmationPageLayout/TransactionConfirmationPageLayout.cjs

@@ -36,7 +36,9 @@ var PoweredByDynamic = require('../PoweredByDynamic/PoweredByDynamic.cjs');
 const TransactionConfirmationPageLayout = ({ onClickClose, isLoading, onClickBack, title, error, appOrigin, appLogoUrl, appName, onClickSend, disableSendButton, displayPoweredByDynamicFooter = false, warningMessage, children, }) => {
     const closeButton = onClickClose && (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ type: 'button', onClick: onClickClose, "data-testid": 'close', disabled: isLoading }, { children: jsxRuntime.jsx(close.ReactComponent, {}) })));
     const backButton = onClickBack && (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ type: 'button', onClick: onClickBack, "data-testid": 'back-button' }, { children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) })));
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ trailing: closeButton, leading: backButton, alignContent: 'bottom' }, { children: jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: (props) => (jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'brand-primary' }, { children: jsxRuntime.jsx(signCircle.ReactComponent, Object.assign({}, props)) }))), iconSize: 64, isSpinning: true }) })), jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-confirmation__body' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'title', color: 'primary', className: 'transaction-confirmation__title' }, { children: title })), jsxRuntime.jsx(AnimatePresence.AnimatePresence, Object.assign({ animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}) }, { children: error && (jsxRuntime.jsx("div", Object.assign({ className: 'transaction-confirmation__error' }, { children: jsxRuntime.jsx(Alert.Alert, Object.assign({ icon: 'error', variant: 'error' }, { children: error })) }))) })), jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-confirmation__content' }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'transaction-confirmation__app-origin-tile' }, { children: jsxRuntime.jsx(AppOriginTile.AppOriginTile, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: appOrigin }) })), jsxRuntime.jsx("div", Object.assign({ className: 'transaction-confirmation__rows' }, { children: children }))] })), jsxRuntime.jsx(AnimatePresence.AnimatePresence, Object.assign({ animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}) }, { children: warningMessage && (jsxRuntime.jsx("div", Object.assign({ className: 'transaction-confirmation__warning' }, { children: jsxRuntime.jsx(Alert.Alert, Object.assign({ icon: 'error', variant: 'warning', contentDataTestId: 'warning_content' }, { children: warningMessage })) }))) })), jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-confirmation__actions' }, { children: [onClickClose && (jsxRuntime.jsx(Button.Button, Object.assign({ buttonVariant: 'secondary', onClick: onClickClose, expanded: true, buttonPadding: 'large', buttonRounded: 'default', disabled: isLoading }, { children: "Cancel" }))), jsxRuntime.jsx(Button.Button, Object.assign({ buttonVariant: 'primary', buttonPadding: 'large', onClick: onClickSend, expanded: true, buttonRounded: 'default', loading: isLoading, disabled: disableSendButton }, { children: "Send" }))] })), displayPoweredByDynamicFooter && (jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'transaction-confirmation__footer' }))] }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ trailing: closeButton, leading: backButton, alignContent: 'bottom' }, { children: jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: (props) => (jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'brand-primary' }, { children: jsxRuntime.jsx(signCircle.ReactComponent, Object.assign({}, props)) }))), iconSize: 64, isSpinning: true }) })), jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-confirmation__body' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'title', color: 'primary', className: 'transaction-confirmation__title' }, { children: title })), jsxRuntime.jsx(AnimatePresence.AnimatePresence, Object.assign({ animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}) }, { children: error && (jsxRuntime.jsx("div", Object.assign({ className: 'transaction-confirmation__error' }, { children: jsxRuntime.jsx(Alert.Alert, Object.assign({ icon: 'error', variant: 'error' }, { children: error })) }))) })), jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-confirmation__content' }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'transaction-confirmation__app-origin-tile' }, { children: jsxRuntime.jsx(AppOriginTile.AppOriginTile, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: appOrigin }) })), jsxRuntime.jsx("div", Object.assign({ className: 'transaction-confirmation__rows' }, { children: children }))] })), jsxRuntime.jsx(AnimatePresence.AnimatePresence, Object.assign({ animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}) }, { children: warningMessage && (jsxRuntime.jsx("div", Object.assign({ className: 'transaction-confirmation__warning' }, { children: jsxRuntime.jsx(Alert.Alert, Object.assign({ icon: 'error', variant: 'warning', contentDataTestId: 'warning_content' }, { children: warningMessage })) }))) })), jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-confirmation__actions' }, { children: [onClickClose && (jsxRuntime.jsx(Button.Button, Object.assign({ buttonVariant: 'secondary', onClick: onClickClose, expanded: true, buttonPadding: 'large', buttonRounded: 'default', disabled: isLoading }, { children: "Cancel" }))), jsxRuntime.jsx(Button.Button, Object.assign({ buttonVariant: 'primary', buttonPadding: 'large', onClick: (event) => {
+                                    onClickSend === null || onClickSend === void 0 ? void 0 : onClickSend(event);
+                                }, expanded: true, buttonRounded: 'default', loading: isLoading, disabled: disableSendButton }, { children: "Send" }))] })), displayPoweredByDynamicFooter && (jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'transaction-confirmation__footer' }))] }))] }));
 };
 
 exports.TransactionConfirmationPageLayout = TransactionConfirmationPageLayout;

package/src/lib/components/TransactionConfirmationPageLayout/TransactionConfirmationPageLayout.js

@@ -32,7 +32,9 @@ import { PoweredByDynamic } from '../PoweredByDynamic/PoweredByDynamic.js';
 const TransactionConfirmationPageLayout = ({ onClickClose, isLoading, onClickBack, title, error, appOrigin, appLogoUrl, appName, onClickSend, disableSendButton, displayPoweredByDynamicFooter = false, warningMessage, children, }) => {
     const closeButton = onClickClose && (jsx(IconButton, Object.assign({ type: 'button', onClick: onClickClose, "data-testid": 'close', disabled: isLoading }, { children: jsx(SvgClose, {}) })));
     const backButton = onClickBack && (jsx(IconButton, Object.assign({ type: 'button', onClick: onClickBack, "data-testid": 'back-button' }, { children: jsx(SvgChevronLeft, {}) })));
-    return (jsxs(Fragment, { children: [jsx(ModalHeader, Object.assign({ trailing: closeButton, leading: backButton, alignContent: 'bottom' }, { children: jsx(IconWithSpinner, { Icon: (props) => (jsx(Icon, Object.assign({ color: 'brand-primary' }, { children: jsx(SvgSignCircle, Object.assign({}, props)) }))), iconSize: 64, isSpinning: true }) })), jsxs("div", Object.assign({ className: 'transaction-confirmation__body' }, { children: [jsx(Typography, Object.assign({ variant: 'title', color: 'primary', className: 'transaction-confirmation__title' }, { children: title })), jsx(AnimatePresence, Object.assign({ animationComponent: jsx(VerticalDrawerTransition, {}) }, { children: error && (jsx("div", Object.assign({ className: 'transaction-confirmation__error' }, { children: jsx(Alert, Object.assign({ icon: 'error', variant: 'error' }, { children: error })) }))) })), jsxs("div", Object.assign({ className: 'transaction-confirmation__content' }, { children: [jsx("div", Object.assign({ className: 'transaction-confirmation__app-origin-tile' }, { children: jsx(AppOriginTile, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: appOrigin }) })), jsx("div", Object.assign({ className: 'transaction-confirmation__rows' }, { children: children }))] })), jsx(AnimatePresence, Object.assign({ animationComponent: jsx(VerticalDrawerTransition, {}) }, { children: warningMessage && (jsx("div", Object.assign({ className: 'transaction-confirmation__warning' }, { children: jsx(Alert, Object.assign({ icon: 'error', variant: 'warning', contentDataTestId: 'warning_content' }, { children: warningMessage })) }))) })), jsxs("div", Object.assign({ className: 'transaction-confirmation__actions' }, { children: [onClickClose && (jsx(Button, Object.assign({ buttonVariant: 'secondary', onClick: onClickClose, expanded: true, buttonPadding: 'large', buttonRounded: 'default', disabled: isLoading }, { children: "Cancel" }))), jsx(Button, Object.assign({ buttonVariant: 'primary', buttonPadding: 'large', onClick: onClickSend, expanded: true, buttonRounded: 'default', loading: isLoading, disabled: disableSendButton }, { children: "Send" }))] })), displayPoweredByDynamicFooter && (jsx(PoweredByDynamic, { classNameRoot: 'transaction-confirmation__footer' }))] }))] }));
+    return (jsxs(Fragment, { children: [jsx(ModalHeader, Object.assign({ trailing: closeButton, leading: backButton, alignContent: 'bottom' }, { children: jsx(IconWithSpinner, { Icon: (props) => (jsx(Icon, Object.assign({ color: 'brand-primary' }, { children: jsx(SvgSignCircle, Object.assign({}, props)) }))), iconSize: 64, isSpinning: true }) })), jsxs("div", Object.assign({ className: 'transaction-confirmation__body' }, { children: [jsx(Typography, Object.assign({ variant: 'title', color: 'primary', className: 'transaction-confirmation__title' }, { children: title })), jsx(AnimatePresence, Object.assign({ animationComponent: jsx(VerticalDrawerTransition, {}) }, { children: error && (jsx("div", Object.assign({ className: 'transaction-confirmation__error' }, { children: jsx(Alert, Object.assign({ icon: 'error', variant: 'error' }, { children: error })) }))) })), jsxs("div", Object.assign({ className: 'transaction-confirmation__content' }, { children: [jsx("div", Object.assign({ className: 'transaction-confirmation__app-origin-tile' }, { children: jsx(AppOriginTile, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: appOrigin }) })), jsx("div", Object.assign({ className: 'transaction-confirmation__rows' }, { children: children }))] })), jsx(AnimatePresence, Object.assign({ animationComponent: jsx(VerticalDrawerTransition, {}) }, { children: warningMessage && (jsx("div", Object.assign({ className: 'transaction-confirmation__warning' }, { children: jsx(Alert, Object.assign({ icon: 'error', variant: 'warning', contentDataTestId: 'warning_content' }, { children: warningMessage })) }))) })), jsxs("div", Object.assign({ className: 'transaction-confirmation__actions' }, { children: [onClickClose && (jsx(Button, Object.assign({ buttonVariant: 'secondary', onClick: onClickClose, expanded: true, buttonPadding: 'large', buttonRounded: 'default', disabled: isLoading }, { children: "Cancel" }))), jsx(Button, Object.assign({ buttonVariant: 'primary', buttonPadding: 'large', onClick: (event) => {
+                                    onClickSend === null || onClickSend === void 0 ? void 0 : onClickSend(event);
+                                }, expanded: true, buttonRounded: 'default', loading: isLoading, disabled: disableSendButton }, { children: "Send" }))] })), displayPoweredByDynamicFooter && (jsx(PoweredByDynamic, { classNameRoot: 'transaction-confirmation__footer' }))] }))] }));
 };
 
 export { TransactionConfirmationPageLayout };

package/src/lib/components/TransactionStatusLayout/TransactionStatusLayout.cjs

@@ -54,8 +54,8 @@ var TransactionRow = require('../TransactionConfirmationPageLayout/components/Tr
 
 const TransactionStatusLayout = ({ destinationAddress, amount, networkName, networkCurrency, NetworkIcon, onDone, displayPoweredByDynamicFooter = true, onClickClose, }) => {
     const closeButton = onClickClose && (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ type: 'button', onClick: onClickClose, "data-testid": 'close' }, { children: jsxRuntime.jsx(close.ReactComponent, {}) })));
-    const networkIcon = (jsxRuntime.jsx("div", Object.assign({ className: 'transaction-status-layout__network-icon' }, { children: NetworkIcon })));
-    return (jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-status-layout' }, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ trailing: closeButton, alignContent: 'bottom' }, { children: jsxRuntime.jsx(IconWithStatus.IconWithStatus, { containerClassName: 'transaction-status-layout__status-icon', iconSize: 50, Icon: signCircle.ReactComponent, InnerIcon: check.ReactComponent }) })), jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-status-layout__body' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'transaction-status-layout__title' }, { children: "Transaction successfully sent" })), jsxRuntime.jsx("div", Object.assign({ className: 'transaction-status-layout__content' }, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-status-layout__rows' }, { children: [jsxRuntime.jsx(TransactionRow.TransactionRow, Object.assign({ label: 'Recipient' }, { children: shortenWalletAddress.shortenWalletAddress(destinationAddress, 3, 3) })), jsxRuntime.jsxs(TransactionRow.TransactionRow, Object.assign({ label: 'Network' }, { children: [networkIcon, jsxRuntime.jsx("span", Object.assign({ className: 'transaction-status-layout__network-name' }, { children: networkName }))] })), jsxRuntime.jsxs(TransactionRow.TransactionRow, Object.assign({ label: 'Total amount' }, { children: [amount, jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'span', color: 'secondary', className: 'transaction-status-layout__network-currency' }, { children: networkCurrency }))] }))] })) })), jsxRuntime.jsx("div", Object.assign({ className: 'transaction-status-layout__actions' }, { children: jsxRuntime.jsx(Button.Button, Object.assign({ buttonVariant: 'primary', buttonPadding: 'large', expanded: true, buttonRounded: 'default', onClick: onDone }, { children: "Continue" })) })), displayPoweredByDynamicFooter && (jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'transaction-status-layout__footer' }))] }))] })));
+    const networkIcon = (jsxRuntime.jsx("span", Object.assign({ className: 'transaction-status-layout__network-icon' }, { children: NetworkIcon })));
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-status-layout' }, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ trailing: closeButton, alignContent: 'bottom' }, { children: jsxRuntime.jsx(IconWithStatus.IconWithStatus, { containerClassName: 'transaction-status-layout__status-icon', iconSize: 50, Icon: signCircle.ReactComponent, InnerIcon: check.ReactComponent }) })), jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-status-layout__body' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'transaction-status-layout__title' }, { children: "Transaction successfully sent" })), jsxRuntime.jsx("div", Object.assign({ className: 'transaction-status-layout__content' }, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-status-layout__rows' }, { children: [jsxRuntime.jsx(TransactionRow.TransactionRow, Object.assign({ label: 'Recipient' }, { children: shortenWalletAddress.shortenWalletAddress(destinationAddress, 3, 3) })), jsxRuntime.jsxs(TransactionRow.TransactionRow, Object.assign({ label: 'Network' }, { children: [networkIcon, jsxRuntime.jsx("span", Object.assign({ className: 'transaction-status-layout__network-name' }, { children: networkName }))] })), jsxRuntime.jsxs(TransactionRow.TransactionRow, Object.assign({ label: 'Total amount' }, { children: [amount, jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'span', color: 'secondary', className: 'transaction-status-layout__network-currency' }, { children: networkCurrency }))] }))] })) })), jsxRuntime.jsx("div", Object.assign({ className: 'transaction-status-layout__actions' }, { children: jsxRuntime.jsx(Button.Button, Object.assign({ buttonVariant: 'primary', buttonPadding: 'large', expanded: true, buttonRounded: 'default', onClick: onDone, loading: false }, { children: "Continue" })) })), displayPoweredByDynamicFooter && (jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'transaction-status-layout__footer' }))] }))] })));
 };
 
 exports.TransactionStatusLayout = TransactionStatusLayout;

package/src/lib/components/TransactionStatusLayout/TransactionStatusLayout.js

@@ -50,8 +50,8 @@ import { TransactionRow } from '../TransactionConfirmationPageLayout/components/
 
 const TransactionStatusLayout = ({ destinationAddress, amount, networkName, networkCurrency, NetworkIcon, onDone, displayPoweredByDynamicFooter = true, onClickClose, }) => {
     const closeButton = onClickClose && (jsx(IconButton, Object.assign({ type: 'button', onClick: onClickClose, "data-testid": 'close' }, { children: jsx(SvgClose, {}) })));
-    const networkIcon = (jsx("div", Object.assign({ className: 'transaction-status-layout__network-icon' }, { children: NetworkIcon })));
-    return (jsxs("div", Object.assign({ className: 'transaction-status-layout' }, { children: [jsx(ModalHeader, Object.assign({ trailing: closeButton, alignContent: 'bottom' }, { children: jsx(IconWithStatus, { containerClassName: 'transaction-status-layout__status-icon', iconSize: 50, Icon: SvgSignCircle, InnerIcon: SvgCheck }) })), jsxs("div", Object.assign({ className: 'transaction-status-layout__body' }, { children: [jsx(Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'transaction-status-layout__title' }, { children: "Transaction successfully sent" })), jsx("div", Object.assign({ className: 'transaction-status-layout__content' }, { children: jsxs("div", Object.assign({ className: 'transaction-status-layout__rows' }, { children: [jsx(TransactionRow, Object.assign({ label: 'Recipient' }, { children: shortenWalletAddress(destinationAddress, 3, 3) })), jsxs(TransactionRow, Object.assign({ label: 'Network' }, { children: [networkIcon, jsx("span", Object.assign({ className: 'transaction-status-layout__network-name' }, { children: networkName }))] })), jsxs(TransactionRow, Object.assign({ label: 'Total amount' }, { children: [amount, jsx(Typography, Object.assign({ as: 'span', color: 'secondary', className: 'transaction-status-layout__network-currency' }, { children: networkCurrency }))] }))] })) })), jsx("div", Object.assign({ className: 'transaction-status-layout__actions' }, { children: jsx(Button, Object.assign({ buttonVariant: 'primary', buttonPadding: 'large', expanded: true, buttonRounded: 'default', onClick: onDone }, { children: "Continue" })) })), displayPoweredByDynamicFooter && (jsx(PoweredByDynamic, { classNameRoot: 'transaction-status-layout__footer' }))] }))] })));
+    const networkIcon = (jsx("span", Object.assign({ className: 'transaction-status-layout__network-icon' }, { children: NetworkIcon })));
+    return (jsxs("div", Object.assign({ className: 'transaction-status-layout' }, { children: [jsx(ModalHeader, Object.assign({ trailing: closeButton, alignContent: 'bottom' }, { children: jsx(IconWithStatus, { containerClassName: 'transaction-status-layout__status-icon', iconSize: 50, Icon: SvgSignCircle, InnerIcon: SvgCheck }) })), jsxs("div", Object.assign({ className: 'transaction-status-layout__body' }, { children: [jsx(Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'transaction-status-layout__title' }, { children: "Transaction successfully sent" })), jsx("div", Object.assign({ className: 'transaction-status-layout__content' }, { children: jsxs("div", Object.assign({ className: 'transaction-status-layout__rows' }, { children: [jsx(TransactionRow, Object.assign({ label: 'Recipient' }, { children: shortenWalletAddress(destinationAddress, 3, 3) })), jsxs(TransactionRow, Object.assign({ label: 'Network' }, { children: [networkIcon, jsx("span", Object.assign({ className: 'transaction-status-layout__network-name' }, { children: networkName }))] })), jsxs(TransactionRow, Object.assign({ label: 'Total amount' }, { children: [amount, jsx(Typography, Object.assign({ as: 'span', color: 'secondary', className: 'transaction-status-layout__network-currency' }, { children: networkCurrency }))] }))] })) })), jsx("div", Object.assign({ className: 'transaction-status-layout__actions' }, { children: jsx(Button, Object.assign({ buttonVariant: 'primary', buttonPadding: 'large', expanded: true, buttonRounded: 'default', onClick: onDone, loading: false }, { children: "Continue" })) })), displayPoweredByDynamicFooter && (jsx(PoweredByDynamic, { classNameRoot: 'transaction-status-layout__footer' }))] }))] })));
 };
 
 export { TransactionStatusLayout };

package/src/lib/context/DynamicContext/DynamicContext.cjs

@@ -250,6 +250,9 @@ const DynamicContextProvider = ({ children, theme, settings, }) => {
         setWalletsToConnectByChain(walletsByChain);
         setShowBridgeWidget(false);
         localStorage.LocalStorage.removeFromLS(localStorage$1.WALLET_PICKER_SEARCH_KEY);
+        if (!toolkitEnabled) {
+            localStorage.LocalStorage.removeFromLS(localStorage$1.IS_MULTI_WALLET_ENABLED);
+        }
         const jwt = getAuthToken.getAuthToken();
         if (jwt && user) {
             // do not await this async call - just fire and forget
@@ -261,7 +264,8 @@ const DynamicContextProvider = ({ children, theme, settings, }) => {
         yield ((_j = connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.connector) === null || _j === void 0 ? void 0 : _j.endSession());
         // Necessary when user logs out in user data collection view
         // Dont require flag to be set though
-        setIsVerificationInProgress(false, false);
+        if (isVerificationInProgress)
+            setIsVerificationInProgress(false);
         setLegacyIsVerifying(false);
         setAuthMode(initialAuthenticationMode);
         setShowAuthFlow(false);
@@ -367,7 +371,8 @@ const DynamicContextProvider = ({ children, theme, settings, }) => {
     const clearStatesOnBackClick = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         setDesktopUri('');
         // Clear verification flag but dont require it to be set
-        setIsVerificationInProgress(false, false);
+        if (isVerificationInProgress)
+            setIsVerificationInProgress(false);
         setLegacyIsVerifying(false);
         if (!user) {
             clearAllWalletConnectSessions();

package/src/lib/context/DynamicContext/DynamicContext.js

@@ -10,7 +10,7 @@ import { Toolkit } from '../../components/Toolkit/Toolkit.js';
 import { decodeJwt } from '../../shared/utils/functions/decodeJwt/decodeJwt.js';
 import { ViewContextProvider } from '../ViewContext/ViewContext.js';
 import { logger } from '../../shared/logger.js';
-import { IS_FULLY_CONNECTED, AUTH_TOKEN, AUTH_USER, AUTH_MODE, WALLET_PICKER_SEARCH_KEY } from '../../utils/constants/localStorage.js';
+import { IS_FULLY_CONNECTED, AUTH_TOKEN, AUTH_USER, AUTH_MODE, WALLET_PICKER_SEARCH_KEY, IS_MULTI_WALLET_ENABLED } from '../../utils/constants/localStorage.js';
 import '../../utils/constants/colors.js';
 import { DEFAULT_NUMBER_OF_WALLETS_TO_SHOW } from '../../utils/constants/values.js';
 import { LocalStorage } from '../../shared/utils/classes/storage/localStorage.js';
@@ -246,6 +246,9 @@ const DynamicContextProvider = ({ children, theme, settings, }) => {
         setWalletsToConnectByChain(walletsByChain);
         setShowBridgeWidget(false);
         LocalStorage.removeFromLS(WALLET_PICKER_SEARCH_KEY);
+        if (!toolkitEnabled) {
+            LocalStorage.removeFromLS(IS_MULTI_WALLET_ENABLED);
+        }
         const jwt = getAuthToken();
         if (jwt && user) {
             // do not await this async call - just fire and forget
@@ -257,7 +260,8 @@ const DynamicContextProvider = ({ children, theme, settings, }) => {
         yield ((_j = connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.connector) === null || _j === void 0 ? void 0 : _j.endSession());
         // Necessary when user logs out in user data collection view
         // Dont require flag to be set though
-        setIsVerificationInProgress(false, false);
+        if (isVerificationInProgress)
+            setIsVerificationInProgress(false);
         setLegacyIsVerifying(false);
         setAuthMode(initialAuthenticationMode);
         setShowAuthFlow(false);
@@ -363,7 +367,8 @@ const DynamicContextProvider = ({ children, theme, settings, }) => {
     const clearStatesOnBackClick = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         setDesktopUri('');
         // Clear verification flag but dont require it to be set
-        setIsVerificationInProgress(false, false);
+        if (isVerificationInProgress)
+            setIsVerificationInProgress(false);
         setLegacyIsVerifying(false);
         if (!user) {
             clearAllWalletConnectSessions();

package/src/lib/context/DynamicContext/hooks/useVerificationInProgress/useVerificationInProgress.cjs

@@ -22,10 +22,20 @@ const useVerificationInProgress = () => {
     // because when modal is closed manually, the flag will be false at the moment of onAuthModalClose.
     // If it was closed due to a verification process, it will be true.
     const [isVerificationInProgress, _setIsVerificationInProgress] = React.useState(false);
-    const setIsVerificationInProgress = (newValue, checkWasSetOnDisable = true) => {
-        if (checkWasSetOnDisable && !newValue && !isVerificationInProgress)
+    // Detects whether the flag is being set to false when it was already false
+    const detectRedundantDisable = (newValue, oldValue) => {
+        if (!newValue && !oldValue)
             logger.logger.debug('The "isVerificationInProgress" flag had not been previously enabled at the time of being disabled. Please ensure to set it to true whenever any kind of verification process is started');
-        _setIsVerificationInProgress(newValue);
+    };
+    // eslint-disable-next-line multiline-comment-style
+    /** Setter for isVerificationInProgress that also logs a debug message if
+     * it is set to false without having been set to true before */
+    const setIsVerificationInProgress = (newValue) => {
+        // Calls original setter with a callback. This prevents accessing an outdated value of isVerificationInProgress
+        _setIsVerificationInProgress((oldValue) => {
+            detectRedundantDisable(newValue, oldValue);
+            return newValue;
+        });
     };
     return [isVerificationInProgress, setIsVerificationInProgress];
 };

package/src/lib/context/DynamicContext/hooks/useVerificationInProgress/useVerificationInProgress.js

@@ -18,10 +18,20 @@ const useVerificationInProgress = () => {
     // because when modal is closed manually, the flag will be false at the moment of onAuthModalClose.
     // If it was closed due to a verification process, it will be true.
     const [isVerificationInProgress, _setIsVerificationInProgress] = useState(false);
-    const setIsVerificationInProgress = (newValue, checkWasSetOnDisable = true) => {
-        if (checkWasSetOnDisable && !newValue && !isVerificationInProgress)
+    // Detects whether the flag is being set to false when it was already false
+    const detectRedundantDisable = (newValue, oldValue) => {
+        if (!newValue && !oldValue)
             logger.debug('The "isVerificationInProgress" flag had not been previously enabled at the time of being disabled. Please ensure to set it to true whenever any kind of verification process is started');
-        _setIsVerificationInProgress(newValue);
+    };
+    // eslint-disable-next-line multiline-comment-style
+    /** Setter for isVerificationInProgress that also logs a debug message if
+     * it is set to false without having been set to true before */
+    const setIsVerificationInProgress = (newValue) => {
+        // Calls original setter with a callback. This prevents accessing an outdated value of isVerificationInProgress
+        _setIsVerificationInProgress((oldValue) => {
+            detectRedundantDisable(newValue, oldValue);
+            return newValue;
+        });
     };
     return [isVerificationInProgress, setIsVerificationInProgress];
 };

package/src/lib/context/DynamicContext/types/index.d.ts

@@ -29,7 +29,7 @@ export interface IDynamicContext {
     setBridgeChainToConnect: Dispatch<SetStateAction<Chain | undefined>>;
     clearStatesOnBackClick: () => void;
     computeConnectedStateForWallets: () => Promise<void>;
-    connectWallet: (walletConnector: WalletConnector, fetchPublicAddressOpts?: FetchPublicAddressOpts) => Promise<string | undefined>;
+    connectWallet: (walletConnector: WalletConnector, fetchPublicAddressOpts?: FetchPublicAddressOpts, shouldCallCallback?: boolean) => Promise<string | undefined>;
     connectedWallet: Wallet | null;
     connectedWallets: Wallet[];
     linkedWallets: Wallet[];
@@ -126,7 +126,7 @@ export interface IDynamicContext {
     user: UserProfile | undefined;
     unlinkConnectedWallet: (walletId: string) => void;
     walletConnector: WalletConnector | null;
-    walletUiUtils: WalletUiUtils;
+    walletUiUtils: WalletUiUtils<WalletConnector>;
     wallets: WalletOption[];
     walletsFilter?: (options: WalletOption[]) => WalletOption[];
     removeConnectedWalletsInfo: () => void;