@dynamic-labs/sdk-react-core 0.18.100-viem.0 → 0.18.100-viem.1

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 
-## [0.18.100-viem.0](https://github.com/dynamic-labs/DynamicAuth/compare/v0.18.0-beta.29...v0.18.100-viem.0) (2023-08-04)
+## [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)
+
+
+### Features
+
+* **GVTY-65:** allow merging accounts when duplicated email in KYC step ([#2868](https://github.com/dynamic-labs/DynamicAuth/issues/2868)) ([041d0a8](https://github.com/dynamic-labs/DynamicAuth/commit/041d0a809e06a7b1407a46b04722c9ebc4802304))
+
+
+### Bug Fixes
+
+* **GVTY-150:** blocto pop up to sign after disconnect ([#2870](https://github.com/dynamic-labs/DynamicAuth/issues/2870)) ([14ccfa0](https://github.com/dynamic-labs/DynamicAuth/commit/14ccfa030dbe8989b9404e2e57ba3f5b50ca88ff))
+
+## [0.18.0-beta.30](https://github.com/dynamic-labs/DynamicAuth/compare/v0.18.0-beta.29...v0.18.0-beta.30) (2023-08-04)
 
 ### Bug Fixes
 

package/package.cjs

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

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/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", { 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", { className: 'button__end-slot', children: endSlot })] }));
-    return (jsxRuntime.jsxs("button", { type: type, onClick: handleClick, className: buttonEffectiveClassName, disabled: disabled || internalButtonLoading || loading, "data-testid": dataTestId, children: [(internalButtonLoading || loading) && (jsxRuntime.jsx("div", { className: 'button__spinner-container', children: jsxRuntime.jsx(spinner.Spinner, { className: 'button__spinner' }) })), buttonContent] }));
+    return (jsxRuntime.jsxs("button", { type: type, onClick: handleClick, className: buttonEffectiveClassName, disabled: disabled || internalButtonLoading || loading, "data-testid": dataTestId, children: [(internalButtonLoading || loading) && (jsxRuntime.jsx("div", { 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", { 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", { className: 'button__end-slot', children: endSlot })] }));
-    return (jsxs("button", { type: type, onClick: handleClick, className: buttonEffectiveClassName, disabled: disabled || internalButtonLoading || loading, "data-testid": dataTestId, children: [(internalButtonLoading || loading) && (jsx("div", { className: 'button__spinner-container', children: jsx(Spinner, { className: 'button__spinner' }) })), buttonContent] }));
+    return (jsxs("button", { type: type, onClick: handleClick, className: buttonEffectiveClassName, disabled: disabled || internalButtonLoading || loading, "data-testid": dataTestId, children: [(internalButtonLoading || loading) && (jsx("div", { 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", { className: buttonContainerClassName, children: jsxRuntime.jsx(Button.Button, { 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", { className: buttonContainerClassName, children: jsxRuntime.jsx(Button.Button, { 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", { className: buttonContainerClassName, children: jsx(Button, { 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", { className: buttonContainerClassName, children: jsx(Button, { 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", { "data-testid": dataTestId, type: 'button', className: classNames.classNames(className, 'list-tile'), onClick: onClick, style: style, children: [leading, jsxRuntime.jsx("div", { className: 'list-tile__children', children: jsxRuntime.jsx(Typography.Typography, { 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", { "data-testid": dataTestId, type: 'button', className: classNames.classNames(className, 'list-tile'), onClick: onClick, style: style, disabled: disabled, children: [leading, jsxRuntime.jsx("div", { className: 'list-tile__children', children: jsxRuntime.jsx(Typography.Typography, { 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", { "data-testid": dataTestId, type: 'button', className: classNames(className, 'list-tile'), onClick: onClick, style: style, children: [leading, jsx("div", { className: 'list-tile__children', children: jsx(Typography, { 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", { "data-testid": dataTestId, type: 'button', className: classNames(className, 'list-tile'), onClick: onClick, style: style, disabled: disabled, children: [leading, jsx("div", { className: 'list-tile__children', children: jsx(Typography, { 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, { type: 'button', onClick: onClickBack, "data-testid": 'back-button', children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) }));
-    return (jsxRuntime.jsxs("div", { 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, { alignContent: 'bottom', leading: onClickBack && backButton, children: jsxRuntime.jsxs("div", { 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, { weight: 'medium', variant: 'title', color: 'primary', className: 'otp-verification-view__title', children: isValid ? 'Verification code confirmed' : 'Confirm verification code' }), jsxRuntime.jsxs("div", { className: 'otp-verification-view__body', children: [isValid && (jsxRuntime.jsx(Typography.Typography, { 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, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: "We\u2019ve sent a verification code to" }), jsxRuntime.jsxs("div", { className: 'otp-verification-view__email-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'bold', color: 'secondary', children: shortenEmail.shortenEmail(email) }), onClickEditEmail && (jsxRuntime.jsx(IconButton.IconButton, { onClick: onClickEditEmail, "data-testid": 'otp-verification-view__edit-button', children: jsxRuntime.jsx(Icon.Icon, { 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", { 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, { type: 'button', onClick: onClickBack, "data-testid": 'back-button', children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) }));
+    const closeButton = (jsxRuntime.jsx(IconButton.IconButton, { onClick: onClickClose, type: 'button', "data-testid": 'close-button', children: jsxRuntime.jsx(close.ReactComponent, {}) }));
+    return (jsxRuntime.jsxs("div", { 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, { alignContent: 'bottom', leading: onClickBack && backButton, trailing: onClickClose && closeButton, children: jsxRuntime.jsxs("div", { 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, { weight: 'medium', variant: 'title', color: 'primary', className: 'otp-verification-view__title', children: isValid ? 'Verification code confirmed' : 'Confirm verification code' }), jsxRuntime.jsxs("div", { className: 'otp-verification-view__body', children: [isValid && (jsxRuntime.jsx(Typography.Typography, { 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, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: "We\u2019ve sent a verification code to" }), jsxRuntime.jsxs("div", { className: 'otp-verification-view__email-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'bold', color: 'secondary', children: shortenEmail.shortenEmail(email) }), onClickEditEmail && (jsxRuntime.jsx(IconButton.IconButton, { onClick: onClickEditEmail, "data-testid": 'otp-verification-view__edit-button', children: jsxRuntime.jsx(Icon.Icon, { 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", { 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, { type: 'button', onClick: onClickBack, "data-testid": 'back-button', children: jsx(SvgChevronLeft, {}) }));
-    return (jsxs("div", { className: 'otp-verification-view', children: [jsx(ModalHeaderBanner, { type: 'error', message: error === null || error === void 0 ? void 0 : error.message }), jsx(ModalHeader, { alignContent: 'bottom', leading: onClickBack && backButton, children: jsxs("div", { 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, { weight: 'medium', variant: 'title', color: 'primary', className: 'otp-verification-view__title', children: isValid ? 'Verification code confirmed' : 'Confirm verification code' }), jsxs("div", { className: 'otp-verification-view__body', children: [isValid && (jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: "Hang tight while we get things ready for you" })), !isValid && (jsxs(Fragment, { children: [jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: "We\u2019ve sent a verification code to" }), jsxs("div", { className: 'otp-verification-view__email-container', children: [jsx(Typography, { variant: 'body_normal', weight: 'bold', color: 'secondary', children: shortenEmail(email) }), onClickEditEmail && (jsx(IconButton, { onClick: onClickEditEmail, "data-testid": 'otp-verification-view__edit-button', children: jsx(Icon, { 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", { 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, { type: 'button', onClick: onClickBack, "data-testid": 'back-button', children: jsx(SvgChevronLeft, {}) }));
+    const closeButton = (jsx(IconButton, { onClick: onClickClose, type: 'button', "data-testid": 'close-button', children: jsx(SvgClose, {}) }));
+    return (jsxs("div", { className: 'otp-verification-view', children: [jsx(ModalHeaderBanner, { type: 'error', message: error === null || error === void 0 ? void 0 : error.message }), jsx(ModalHeader, { alignContent: 'bottom', leading: onClickBack && backButton, trailing: onClickClose && closeButton, children: jsxs("div", { 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, { weight: 'medium', variant: 'title', color: 'primary', className: 'otp-verification-view__title', children: isValid ? 'Verification code confirmed' : 'Confirm verification code' }), jsxs("div", { className: 'otp-verification-view__body', children: [isValid && (jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: "Hang tight while we get things ready for you" })), !isValid && (jsxs(Fragment, { children: [jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: "We\u2019ve sent a verification code to" }), jsxs("div", { className: 'otp-verification-view__email-container', children: [jsx(Typography, { variant: 'body_normal', weight: 'bold', color: 'secondary', children: shortenEmail(email) }), onClickEditEmail && (jsx(IconButton, { onClick: onClickEditEmail, "data-testid": 'otp-verification-view__edit-button', children: jsx(Icon, { 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", { 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, { type: 'button', onClick: onClickClose, "data-testid": 'close', disabled: isLoading, children: jsxRuntime.jsx(close.ReactComponent, {}) }));
     const backButton = onClickBack && (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: onClickBack, "data-testid": 'back-button', children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) }));
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { trailing: closeButton, leading: backButton, alignContent: 'bottom', children: jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: (props) => (jsxRuntime.jsx(Icon.Icon, { color: 'brand-primary', children: jsxRuntime.jsx(signCircle.ReactComponent, Object.assign({}, props)) })), iconSize: 64, isSpinning: true }) }), jsxRuntime.jsxs("div", { className: 'transaction-confirmation__body', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', className: 'transaction-confirmation__title', children: title }), jsxRuntime.jsx(AnimatePresence.AnimatePresence, { animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}), children: error && (jsxRuntime.jsx("div", { className: 'transaction-confirmation__error', children: jsxRuntime.jsx(Alert.Alert, { icon: 'error', variant: 'error', children: error }) })) }), jsxRuntime.jsxs("div", { className: 'transaction-confirmation__content', children: [jsxRuntime.jsx("div", { className: 'transaction-confirmation__app-origin-tile', children: jsxRuntime.jsx(AppOriginTile.AppOriginTile, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: appOrigin }) }), jsxRuntime.jsx("div", { className: 'transaction-confirmation__rows', children: children })] }), jsxRuntime.jsx(AnimatePresence.AnimatePresence, { animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}), children: warningMessage && (jsxRuntime.jsx("div", { className: 'transaction-confirmation__warning', children: jsxRuntime.jsx(Alert.Alert, { icon: 'error', variant: 'warning', contentDataTestId: 'warning_content', children: warningMessage }) })) }), jsxRuntime.jsxs("div", { className: 'transaction-confirmation__actions', children: [onClickClose && (jsxRuntime.jsx(Button.Button, { buttonVariant: 'secondary', onClick: onClickClose, expanded: true, buttonPadding: 'large', buttonRounded: 'default', disabled: isLoading, children: "Cancel" })), jsxRuntime.jsx(Button.Button, { 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, { trailing: closeButton, leading: backButton, alignContent: 'bottom', children: jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: (props) => (jsxRuntime.jsx(Icon.Icon, { color: 'brand-primary', children: jsxRuntime.jsx(signCircle.ReactComponent, Object.assign({}, props)) })), iconSize: 64, isSpinning: true }) }), jsxRuntime.jsxs("div", { className: 'transaction-confirmation__body', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', className: 'transaction-confirmation__title', children: title }), jsxRuntime.jsx(AnimatePresence.AnimatePresence, { animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}), children: error && (jsxRuntime.jsx("div", { className: 'transaction-confirmation__error', children: jsxRuntime.jsx(Alert.Alert, { icon: 'error', variant: 'error', children: error }) })) }), jsxRuntime.jsxs("div", { className: 'transaction-confirmation__content', children: [jsxRuntime.jsx("div", { className: 'transaction-confirmation__app-origin-tile', children: jsxRuntime.jsx(AppOriginTile.AppOriginTile, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: appOrigin }) }), jsxRuntime.jsx("div", { className: 'transaction-confirmation__rows', children: children })] }), jsxRuntime.jsx(AnimatePresence.AnimatePresence, { animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}), children: warningMessage && (jsxRuntime.jsx("div", { className: 'transaction-confirmation__warning', children: jsxRuntime.jsx(Alert.Alert, { icon: 'error', variant: 'warning', contentDataTestId: 'warning_content', children: warningMessage }) })) }), jsxRuntime.jsxs("div", { className: 'transaction-confirmation__actions', children: [onClickClose && (jsxRuntime.jsx(Button.Button, { buttonVariant: 'secondary', onClick: onClickClose, expanded: true, buttonPadding: 'large', buttonRounded: 'default', disabled: isLoading, children: "Cancel" })), jsxRuntime.jsx(Button.Button, { 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, { type: 'button', onClick: onClickClose, "data-testid": 'close', disabled: isLoading, children: jsx(SvgClose, {}) }));
     const backButton = onClickBack && (jsx(IconButton, { type: 'button', onClick: onClickBack, "data-testid": 'back-button', children: jsx(SvgChevronLeft, {}) }));
-    return (jsxs(Fragment, { children: [jsx(ModalHeader, { trailing: closeButton, leading: backButton, alignContent: 'bottom', children: jsx(IconWithSpinner, { Icon: (props) => (jsx(Icon, { color: 'brand-primary', children: jsx(SvgSignCircle, Object.assign({}, props)) })), iconSize: 64, isSpinning: true }) }), jsxs("div", { className: 'transaction-confirmation__body', children: [jsx(Typography, { variant: 'title', color: 'primary', className: 'transaction-confirmation__title', children: title }), jsx(AnimatePresence, { animationComponent: jsx(VerticalDrawerTransition, {}), children: error && (jsx("div", { className: 'transaction-confirmation__error', children: jsx(Alert, { icon: 'error', variant: 'error', children: error }) })) }), jsxs("div", { className: 'transaction-confirmation__content', children: [jsx("div", { className: 'transaction-confirmation__app-origin-tile', children: jsx(AppOriginTile, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: appOrigin }) }), jsx("div", { className: 'transaction-confirmation__rows', children: children })] }), jsx(AnimatePresence, { animationComponent: jsx(VerticalDrawerTransition, {}), children: warningMessage && (jsx("div", { className: 'transaction-confirmation__warning', children: jsx(Alert, { icon: 'error', variant: 'warning', contentDataTestId: 'warning_content', children: warningMessage }) })) }), jsxs("div", { className: 'transaction-confirmation__actions', children: [onClickClose && (jsx(Button, { buttonVariant: 'secondary', onClick: onClickClose, expanded: true, buttonPadding: 'large', buttonRounded: 'default', disabled: isLoading, children: "Cancel" })), jsx(Button, { 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, { trailing: closeButton, leading: backButton, alignContent: 'bottom', children: jsx(IconWithSpinner, { Icon: (props) => (jsx(Icon, { color: 'brand-primary', children: jsx(SvgSignCircle, Object.assign({}, props)) })), iconSize: 64, isSpinning: true }) }), jsxs("div", { className: 'transaction-confirmation__body', children: [jsx(Typography, { variant: 'title', color: 'primary', className: 'transaction-confirmation__title', children: title }), jsx(AnimatePresence, { animationComponent: jsx(VerticalDrawerTransition, {}), children: error && (jsx("div", { className: 'transaction-confirmation__error', children: jsx(Alert, { icon: 'error', variant: 'error', children: error }) })) }), jsxs("div", { className: 'transaction-confirmation__content', children: [jsx("div", { className: 'transaction-confirmation__app-origin-tile', children: jsx(AppOriginTile, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: appOrigin }) }), jsx("div", { className: 'transaction-confirmation__rows', children: children })] }), jsx(AnimatePresence, { animationComponent: jsx(VerticalDrawerTransition, {}), children: warningMessage && (jsx("div", { className: 'transaction-confirmation__warning', children: jsx(Alert, { icon: 'error', variant: 'warning', contentDataTestId: 'warning_content', children: warningMessage }) })) }), jsxs("div", { className: 'transaction-confirmation__actions', children: [onClickClose && (jsx(Button, { buttonVariant: 'secondary', onClick: onClickClose, expanded: true, buttonPadding: 'large', buttonRounded: 'default', disabled: isLoading, children: "Cancel" })), jsx(Button, { 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, { type: 'button', onClick: onClickClose, "data-testid": 'close', children: jsxRuntime.jsx(close.ReactComponent, {}) }));
-    const networkIcon = (jsxRuntime.jsx("div", { className: 'transaction-status-layout__network-icon', children: NetworkIcon }));
-    return (jsxRuntime.jsxs("div", { className: 'transaction-status-layout', children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { 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", { className: 'transaction-status-layout__body', children: [jsxRuntime.jsx(Typography.Typography, { weight: 'medium', variant: 'title', color: 'primary', className: 'transaction-status-layout__title', children: "Transaction successfully sent" }), jsxRuntime.jsx("div", { className: 'transaction-status-layout__content', children: jsxRuntime.jsxs("div", { className: 'transaction-status-layout__rows', children: [jsxRuntime.jsx(TransactionRow.TransactionRow, { label: 'Recipient', children: shortenWalletAddress.shortenWalletAddress(destinationAddress, 3, 3) }), jsxRuntime.jsxs(TransactionRow.TransactionRow, { label: 'Network', children: [networkIcon, jsxRuntime.jsx("span", { className: 'transaction-status-layout__network-name', children: networkName })] }), jsxRuntime.jsxs(TransactionRow.TransactionRow, { label: 'Total amount', children: [amount, jsxRuntime.jsx(Typography.Typography, { as: 'span', color: 'secondary', className: 'transaction-status-layout__network-currency', children: networkCurrency })] })] }) }), jsxRuntime.jsx("div", { className: 'transaction-status-layout__actions', children: jsxRuntime.jsx(Button.Button, { 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", { className: 'transaction-status-layout__network-icon', children: NetworkIcon }));
+    return (jsxRuntime.jsxs("div", { className: 'transaction-status-layout', children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { 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", { className: 'transaction-status-layout__body', children: [jsxRuntime.jsx(Typography.Typography, { weight: 'medium', variant: 'title', color: 'primary', className: 'transaction-status-layout__title', children: "Transaction successfully sent" }), jsxRuntime.jsx("div", { className: 'transaction-status-layout__content', children: jsxRuntime.jsxs("div", { className: 'transaction-status-layout__rows', children: [jsxRuntime.jsx(TransactionRow.TransactionRow, { label: 'Recipient', children: shortenWalletAddress.shortenWalletAddress(destinationAddress, 3, 3) }), jsxRuntime.jsxs(TransactionRow.TransactionRow, { label: 'Network', children: [networkIcon, jsxRuntime.jsx("span", { className: 'transaction-status-layout__network-name', children: networkName })] }), jsxRuntime.jsxs(TransactionRow.TransactionRow, { label: 'Total amount', children: [amount, jsxRuntime.jsx(Typography.Typography, { as: 'span', color: 'secondary', className: 'transaction-status-layout__network-currency', children: networkCurrency })] })] }) }), jsxRuntime.jsx("div", { className: 'transaction-status-layout__actions', children: jsxRuntime.jsx(Button.Button, { 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, { type: 'button', onClick: onClickClose, "data-testid": 'close', children: jsx(SvgClose, {}) }));
-    const networkIcon = (jsx("div", { className: 'transaction-status-layout__network-icon', children: NetworkIcon }));
-    return (jsxs("div", { className: 'transaction-status-layout', children: [jsx(ModalHeader, { trailing: closeButton, alignContent: 'bottom', children: jsx(IconWithStatus, { containerClassName: 'transaction-status-layout__status-icon', iconSize: 50, Icon: SvgSignCircle, InnerIcon: SvgCheck }) }), jsxs("div", { className: 'transaction-status-layout__body', children: [jsx(Typography, { weight: 'medium', variant: 'title', color: 'primary', className: 'transaction-status-layout__title', children: "Transaction successfully sent" }), jsx("div", { className: 'transaction-status-layout__content', children: jsxs("div", { className: 'transaction-status-layout__rows', children: [jsx(TransactionRow, { label: 'Recipient', children: shortenWalletAddress(destinationAddress, 3, 3) }), jsxs(TransactionRow, { label: 'Network', children: [networkIcon, jsx("span", { className: 'transaction-status-layout__network-name', children: networkName })] }), jsxs(TransactionRow, { label: 'Total amount', children: [amount, jsx(Typography, { as: 'span', color: 'secondary', className: 'transaction-status-layout__network-currency', children: networkCurrency })] })] }) }), jsx("div", { className: 'transaction-status-layout__actions', children: jsx(Button, { buttonVariant: 'primary', buttonPadding: 'large', expanded: true, buttonRounded: 'default', onClick: onDone, children: "Continue" }) }), displayPoweredByDynamicFooter && (jsx(PoweredByDynamic, { classNameRoot: 'transaction-status-layout__footer' }))] })] }));
+    const networkIcon = (jsx("span", { className: 'transaction-status-layout__network-icon', children: NetworkIcon }));
+    return (jsxs("div", { className: 'transaction-status-layout', children: [jsx(ModalHeader, { trailing: closeButton, alignContent: 'bottom', children: jsx(IconWithStatus, { containerClassName: 'transaction-status-layout__status-icon', iconSize: 50, Icon: SvgSignCircle, InnerIcon: SvgCheck }) }), jsxs("div", { className: 'transaction-status-layout__body', children: [jsx(Typography, { weight: 'medium', variant: 'title', color: 'primary', className: 'transaction-status-layout__title', children: "Transaction successfully sent" }), jsx("div", { className: 'transaction-status-layout__content', children: jsxs("div", { className: 'transaction-status-layout__rows', children: [jsx(TransactionRow, { label: 'Recipient', children: shortenWalletAddress(destinationAddress, 3, 3) }), jsxs(TransactionRow, { label: 'Network', children: [networkIcon, jsx("span", { className: 'transaction-status-layout__network-name', children: networkName })] }), jsxs(TransactionRow, { label: 'Total amount', children: [amount, jsx(Typography, { as: 'span', color: 'secondary', className: 'transaction-status-layout__network-currency', children: networkCurrency })] })] }) }), jsx("div", { className: 'transaction-status-layout__actions', children: jsx(Button, { 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;

package/src/lib/context/SendBalanceContext/SendBalanceContext.types.d.ts

@@ -1,9 +1,9 @@
-import { TransactionReceipt } from 'viem';
+import { Address } from 'viem';
 export type OpenSendBalanceModalProps = {
     recipientAddress?: string;
     value?: bigint;
 };
-export type OpenSendBalanceModal = (props?: OpenSendBalanceModalProps) => Promise<TransactionReceipt>;
+export type OpenSendBalanceModal = (props?: OpenSendBalanceModalProps) => Promise<Address>;
 export type SendBalanceContextProps = {
     open: OpenSendBalanceModal;
 };