@dynamic-labs/sdk-react-core 3.0.0-alpha.17 → 3.0.0-alpha.18

package/CHANGELOG.md

@@ -1,4 +1,11 @@
 
+## [3.0.0-alpha.18](https://github.com/dynamic-labs/DynamicAuth/compare/v3.0.0-alpha.17...v3.0.0-alpha.18) (2024-07-12)
+
+
+### Bug Fixes
+
+* hide confirmation ui triggers passkey creation ([#6322](https://github.com/dynamic-labs/DynamicAuth/issues/6322)) ([c66f282](https://github.com/dynamic-labs/DynamicAuth/commit/c66f282cf8d64f19d7f5a7355aaaec980afbe245))
+
 ## [3.0.0-alpha.17](https://github.com/dynamic-labs/DynamicAuth/compare/v3.0.0-alpha.16...v3.0.0-alpha.17) (2024-07-11)
 
 

package/package.cjs

@@ -3,7 +3,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "3.0.0-alpha.17";
+var version = "3.0.0-alpha.18";
 var dependencies = {
 	"@dynamic-labs/sdk-api-core": "0.0.470",
 	"@hcaptcha/react-hcaptcha": "1.4.4",

package/package.js

@@ -1,5 +1,5 @@
 'use client'
-var version = "3.0.0-alpha.17";
+var version = "3.0.0-alpha.18";
 var dependencies = {
 	"@dynamic-labs/sdk-api-core": "0.0.470",
 	"@hcaptcha/react-hcaptcha": "1.4.4",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-labs/sdk-react-core",
-  "version": "3.0.0-alpha.17",
+  "version": "3.0.0-alpha.18",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/dynamic-labs/dynamic-auth.git",
@@ -17,15 +17,15 @@
     "react-i18next": "13.5.0",
     "yup": "0.32.11",
     "react-international-phone": "4.2.5",
-    "@dynamic-labs/iconic": "3.0.0-alpha.17",
-    "@dynamic-labs/logger": "3.0.0-alpha.17",
-    "@dynamic-labs/multi-wallet": "3.0.0-alpha.17",
-    "@dynamic-labs/rpc-providers": "3.0.0-alpha.17",
-    "@dynamic-labs/store": "3.0.0-alpha.17",
-    "@dynamic-labs/types": "3.0.0-alpha.17",
-    "@dynamic-labs/utils": "3.0.0-alpha.17",
-    "@dynamic-labs/wallet-book": "3.0.0-alpha.17",
-    "@dynamic-labs/wallet-connector-core": "3.0.0-alpha.17",
+    "@dynamic-labs/iconic": "3.0.0-alpha.18",
+    "@dynamic-labs/logger": "3.0.0-alpha.18",
+    "@dynamic-labs/multi-wallet": "3.0.0-alpha.18",
+    "@dynamic-labs/rpc-providers": "3.0.0-alpha.18",
+    "@dynamic-labs/store": "3.0.0-alpha.18",
+    "@dynamic-labs/types": "3.0.0-alpha.18",
+    "@dynamic-labs/utils": "3.0.0-alpha.18",
+    "@dynamic-labs/wallet-book": "3.0.0-alpha.18",
+    "@dynamic-labs/wallet-connector-core": "3.0.0-alpha.18",
     "eventemitter3": "5.0.1"
   },
   "devDependencies": {

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

@@ -23,6 +23,7 @@ require('../../utils/constants/colors.cjs');
 require('../../utils/constants/values.cjs');
 require('../../shared/utils/classes/storage/localStorage.cjs');
 require('../../shared/utils/classes/storage/sessionStorage.cjs');
+var useEffectOnce = require('../../shared/utils/hooks/useEffectOnce/useEffectOnce.cjs');
 require('@dynamic-labs/utils');
 require('../../shared/consts/index.cjs');
 var IconButton = require('../IconButton/IconButton.cjs');
@@ -102,13 +103,23 @@ require('../../context/ConnectWithOtpContext/constants.cjs');
 require('../../context/ReinitializeContext/ReinitializeContextProvider.cjs');
 var useInternalDynamicContext = require('../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.cjs');
 
-const TransactionConfirmationPageLayout = ({ onClickClose, isLoading, onClickBack, copykey, title, error, appOrigin, appLogoUrl, appName, onClickSend, disableSendButton, displayPoweredByDynamicFooter = false, alert, children, }) => {
+const TransactionConfirmationPageLayout = ({ onClickClose, isLoading, onClickBack, copykey, title, error, appOrigin, appLogoUrl, appName, onClickSend, disableSendButton, displayPoweredByDynamicFooter = false, alert, children, hideModal, onSuccess, }) => {
     const { t } = reactI18next.useTranslation();
     const { isTurnkeyWallet } = useIsTurnkeyWallet.useIsTurnkeyWallet();
     const { setShowAuthFlow, walletConnector } = useInternalDynamicContext.useInternalDynamicContext();
     const { setView } = ViewContext.useViewContext();
     const { userNeedsCrossDomainPasskey } = PasskeyContext.usePasskeyContext();
     const { initPasskeyRecoveryProcess, shouldInitRecovery } = usePasskeyRecovery.usePasskeyRecovery();
+    const handleRecovery = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        if (yield shouldInitRecovery())
+            yield initPasskeyRecoveryProcess('email', 'sendTransaction');
+        onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess('callHandlerOutsideModal');
+    });
+    useEffectOnce.useEffectOnce(() => {
+        if (hideModal) {
+            handleRecovery();
+        }
+    });
     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, {}) }));
     const handleSubmitWithChecks = (e) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
@@ -134,7 +145,7 @@ const TransactionConfirmationPageLayout = ({ onClickClose, isLoading, onClickBac
         }
         onClickSend(e);
     });
-    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.jsx(PasskeyCreatedSuccessBanner.PasskeyCreatedSuccessBanner, {}), jsxRuntime.jsxs("div", { className: 'transaction-confirmation__body', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', className: 'transaction-confirmation__title', copykey: copykey, 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: alert && (jsxRuntime.jsx("div", { className: 'transaction-confirmation__warning', children: alert })) }), jsxRuntime.jsxs("div", { className: 'transaction-confirmation__actions', children: [onClickClose && (jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonVariant: 'secondary', onClick: onClickClose, expanded: true, buttonPadding: 'large', disabled: isLoading, copykey: 'dyn_send_transaction.confirmation.cancel_button', children: t('dyn_send_transaction.confirmation.cancel_button') })), jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonVariant: 'primary', buttonPadding: 'large', onClick: handleSubmitWithChecks, expanded: true, loading: isLoading, disabled: disableSendButton, copykey: 'dyn_send_transaction.confirmation.confirm_button', children: t('dyn_send_transaction.confirmation.confirm_button') })] }), displayPoweredByDynamicFooter && (jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'transaction-confirmation__footer' }))] })] }));
+    return hideModal ? null : (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.jsx(PasskeyCreatedSuccessBanner.PasskeyCreatedSuccessBanner, {}), jsxRuntime.jsxs("div", { className: 'transaction-confirmation__body', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', className: 'transaction-confirmation__title', copykey: copykey, 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: alert && (jsxRuntime.jsx("div", { className: 'transaction-confirmation__warning', children: alert })) }), jsxRuntime.jsxs("div", { className: 'transaction-confirmation__actions', children: [onClickClose && (jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonVariant: 'secondary', onClick: onClickClose, expanded: true, buttonPadding: 'large', disabled: isLoading, copykey: 'dyn_send_transaction.confirmation.cancel_button', children: t('dyn_send_transaction.confirmation.cancel_button') })), jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonVariant: 'primary', buttonPadding: 'large', onClick: handleSubmitWithChecks, expanded: true, loading: isLoading, disabled: disableSendButton, copykey: 'dyn_send_transaction.confirmation.confirm_button', children: t('dyn_send_transaction.confirmation.confirm_button') })] }), displayPoweredByDynamicFooter && (jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'transaction-confirmation__footer' }))] })] }));
 };
 
 exports.TransactionConfirmationPageLayout = TransactionConfirmationPageLayout;

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

@@ -11,8 +11,10 @@ type TransactionConfirmationPageLayoutProps = {
     onClickBack?: MouseEventHandler<HTMLButtonElement>;
     onClickClose?: MouseEventHandler<HTMLButtonElement>;
     onClickSend: MouseEventHandler<HTMLButtonElement>;
+    onSuccess: ((transactionResponse: string) => void) | undefined;
     title?: ReactNode;
     alert?: ReactNode;
+    hideModal?: boolean;
 } & CopyKey;
 export declare const TransactionConfirmationPageLayout: FC<PropsWithChildren<TransactionConfirmationPageLayoutProps>>;
 export {};

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

@@ -19,6 +19,7 @@ import '../../utils/constants/colors.js';
 import '../../utils/constants/values.js';
 import '../../shared/utils/classes/storage/localStorage.js';
 import '../../shared/utils/classes/storage/sessionStorage.js';
+import { useEffectOnce } from '../../shared/utils/hooks/useEffectOnce/useEffectOnce.js';
 import '@dynamic-labs/utils';
 import '../../shared/consts/index.js';
 import { IconButton } from '../IconButton/IconButton.js';
@@ -98,13 +99,23 @@ import '../../context/ConnectWithOtpContext/constants.js';
 import '../../context/ReinitializeContext/ReinitializeContextProvider.js';
 import { useInternalDynamicContext } from '../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.js';
 
-const TransactionConfirmationPageLayout = ({ onClickClose, isLoading, onClickBack, copykey, title, error, appOrigin, appLogoUrl, appName, onClickSend, disableSendButton, displayPoweredByDynamicFooter = false, alert, children, }) => {
+const TransactionConfirmationPageLayout = ({ onClickClose, isLoading, onClickBack, copykey, title, error, appOrigin, appLogoUrl, appName, onClickSend, disableSendButton, displayPoweredByDynamicFooter = false, alert, children, hideModal, onSuccess, }) => {
     const { t } = useTranslation();
     const { isTurnkeyWallet } = useIsTurnkeyWallet();
     const { setShowAuthFlow, walletConnector } = useInternalDynamicContext();
     const { setView } = useViewContext();
     const { userNeedsCrossDomainPasskey } = usePasskeyContext();
     const { initPasskeyRecoveryProcess, shouldInitRecovery } = usePasskeyRecovery();
+    const handleRecovery = () => __awaiter(void 0, void 0, void 0, function* () {
+        if (yield shouldInitRecovery())
+            yield initPasskeyRecoveryProcess('email', 'sendTransaction');
+        onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess('callHandlerOutsideModal');
+    });
+    useEffectOnce(() => {
+        if (hideModal) {
+            handleRecovery();
+        }
+    });
     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, {}) }));
     const handleSubmitWithChecks = (e) => __awaiter(void 0, void 0, void 0, function* () {
@@ -130,7 +141,7 @@ const TransactionConfirmationPageLayout = ({ onClickClose, isLoading, onClickBac
         }
         onClickSend(e);
     });
-    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 }) }), jsx(PasskeyCreatedSuccessBanner, {}), jsxs("div", { className: 'transaction-confirmation__body', children: [jsx(Typography, { variant: 'title', color: 'primary', className: 'transaction-confirmation__title', copykey: copykey, 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: alert && (jsx("div", { className: 'transaction-confirmation__warning', children: alert })) }), jsxs("div", { className: 'transaction-confirmation__actions', children: [onClickClose && (jsx(TypographyButton, { buttonVariant: 'secondary', onClick: onClickClose, expanded: true, buttonPadding: 'large', disabled: isLoading, copykey: 'dyn_send_transaction.confirmation.cancel_button', children: t('dyn_send_transaction.confirmation.cancel_button') })), jsx(TypographyButton, { buttonVariant: 'primary', buttonPadding: 'large', onClick: handleSubmitWithChecks, expanded: true, loading: isLoading, disabled: disableSendButton, copykey: 'dyn_send_transaction.confirmation.confirm_button', children: t('dyn_send_transaction.confirmation.confirm_button') })] }), displayPoweredByDynamicFooter && (jsx(PoweredByDynamic, { classNameRoot: 'transaction-confirmation__footer' }))] })] }));
+    return hideModal ? null : (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 }) }), jsx(PasskeyCreatedSuccessBanner, {}), jsxs("div", { className: 'transaction-confirmation__body', children: [jsx(Typography, { variant: 'title', color: 'primary', className: 'transaction-confirmation__title', copykey: copykey, 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: alert && (jsx("div", { className: 'transaction-confirmation__warning', children: alert })) }), jsxs("div", { className: 'transaction-confirmation__actions', children: [onClickClose && (jsx(TypographyButton, { buttonVariant: 'secondary', onClick: onClickClose, expanded: true, buttonPadding: 'large', disabled: isLoading, copykey: 'dyn_send_transaction.confirmation.cancel_button', children: t('dyn_send_transaction.confirmation.cancel_button') })), jsx(TypographyButton, { buttonVariant: 'primary', buttonPadding: 'large', onClick: handleSubmitWithChecks, expanded: true, loading: isLoading, disabled: disableSendButton, copykey: 'dyn_send_transaction.confirmation.confirm_button', children: t('dyn_send_transaction.confirmation.confirm_button') })] }), displayPoweredByDynamicFooter && (jsx(PoweredByDynamic, { classNameRoot: 'transaction-confirmation__footer' }))] })] }));
 };
 
 export { TransactionConfirmationPageLayout };

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

@@ -311,6 +311,7 @@ const InnerDynamicContextProvider = ({ children, theme, settings: settings$1, lo
         connectedInfo: connectedWalletsInfo[0],
         connectedWallets,
         enableInstrumentation,
+        environmentId,
         primaryWallet,
         projectSettings,
         user: user !== null && user !== void 0 ? user : unauthenticatedUser,

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

@@ -307,6 +307,7 @@ const InnerDynamicContextProvider = ({ children, theme, settings, locale, enable
         connectedInfo: connectedWalletsInfo[0],
         connectedWallets,
         enableInstrumentation,
+        environmentId,
         primaryWallet,
         projectSettings,
         user: user !== null && user !== void 0 ? user : unauthenticatedUser,

package/src/lib/modals/SignMessageConfirmationModal/SignMessageConfirmationModal.cjs

@@ -24,6 +24,7 @@ require('../../utils/constants/colors.cjs');
 require('../../utils/constants/values.cjs');
 require('../../shared/utils/classes/storage/localStorage.cjs');
 require('../../shared/utils/classes/storage/sessionStorage.cjs');
+var useEffectOnce = require('../../shared/utils/hooks/useEffectOnce/useEffectOnce.cjs');
 var usePreventPageScroll = require('../../shared/utils/hooks/usePreventPageScroll/usePreventPageScroll.cjs');
 var index = require('../../shared/consts/index.cjs');
 var Icon = require('../../components/Icon/Icon.cjs');
@@ -109,7 +110,7 @@ var NeedHelpSection = require('../../components/NeedHelpSection/NeedHelpSection.
 require('qrcode');
 var SignMessagePreview = require('../../components/SignMessagePreview/SignMessagePreview.cjs');
 
-const SignMessageConfirmationModal = ({ appLogoUrl, appName, appOrigin, message, handler, onReject, onSignMessage, }) => {
+const SignMessageConfirmationModal = ({ appLogoUrl, appName, appOrigin, message, handler, onReject, onSignMessage, hideModal, }) => {
     usePreventPageScroll.usePreventPageScroll(true);
     const didConfirmRef = React.useRef(false);
     const [show, setShow] = React.useState(true);
@@ -152,16 +153,20 @@ const SignMessageConfirmationModal = ({ appLogoUrl, appName, appOrigin, message,
         }
         onReject(signMessageError || new Error('user rejected signing'));
     }, [signedMessage, onSignMessage, onReject, signMessageError]);
-    const handleMessageSign = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+    const handleMessageSign = (signWithoutModal) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        if (yield shouldInitRecovery()) {
+            yield initPasskeyRecoveryProcess('email', 'signMessage');
+        }
+        if (signWithoutModal === true) {
+            onSignMessage('callHandlerOutsideModal');
+            return;
+        }
         if (walletConnectorCore.isSessionKeyCompatibleWalletConnector(walletConnector) ||
             ((walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.key) === 'zerodev' &&
                 walletConnectorCore.isSessionKeyCompatibleWalletConnector(walletConnector.getEOAConnector()))) {
             confirm();
             return;
         }
-        if (yield shouldInitRecovery()) {
-            yield initPasskeyRecoveryProcess('email', 'signMessage');
-        }
         if (isTurnkeyWallet && userNeedsCrossDomainPasskey) {
             setView('passkey-new-domain-detected');
             setShowAuthFlow(true, {
@@ -175,8 +180,13 @@ const SignMessageConfirmationModal = ({ appLogoUrl, appName, appOrigin, message,
         }
         confirm();
     });
+    useEffectOnce.useEffectOnce(() => {
+        if (hideModal) {
+            handleMessageSign(true);
+        }
+    });
     const closeButton = (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: handleOnReject, "data-testid": 'close', disabled: isLoading, children: jsxRuntime.jsx(close.ReactComponent, {}) }));
-    return (jsxRuntime.jsx(Portal.Portal, { handleClose: handleOnReject, isShown: show, zIndex: index.authModalZIndex, withBackdrop: true, elementId: 'dynamic-sign-message', transitionEvents: {
+    return hideModal ? null : (jsxRuntime.jsx(Portal.Portal, { handleClose: handleOnReject, isShown: show, zIndex: index.authModalZIndex, withBackdrop: true, elementId: 'dynamic-sign-message', transitionEvents: {
             onUnmount: handleOnModalUnmount,
         }, children: jsxRuntime.jsx(Modal.Modal, { children: jsxRuntime.jsxs(ModalCard.ModalCard, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { trailing: closeButton, 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.jsx(PasskeyCreatedSuccessBanner.PasskeyCreatedSuccessBanner, {}), jsxRuntime.jsxs("div", { className: 'sign-message-confirmation__body', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', className: 'sign-message-confirmation__title', copykey: 'dyn_sign_message.title', children: t('dyn_sign_message.title') }), jsxRuntime.jsx(AnimatePresence.AnimatePresence, { animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}), children: signMessageError && (jsxRuntime.jsx("div", { className: 'sign-message-confirmation__error', children: jsxRuntime.jsx(ErrorContainer.ErrorContainer, { children: errorText }) })) }), jsxRuntime.jsxs("div", { className: 'sign-message-confirmation__message-container', children: [jsxRuntime.jsx(AppOriginTile.AppOriginTile, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: appOrigin }), jsxRuntime.jsx("div", { className: 'sign-message-confirmation__message', children: jsxRuntime.jsx(SignMessagePreview.SignMessagePreview, { message: message.toString() }) })] }), jsxRuntime.jsxs("div", { className: 'sign-message-confirmation__actions', children: [jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonVariant: 'secondary', onClick: handleOnReject, expanded: true, buttonPadding: 'large', disabled: isLoading, copykey: 'dyn_sign_message.cancel_button', children: t('dyn_sign_message.cancel_button') }), jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonVariant: 'primary', buttonPadding: 'large', onClick: handleMessageSign, expanded: true, loading: isLoading, copykey: 'dyn_sign_message.sign_button', dataTestId: 'sign-button', children: t('dyn_sign_message.sign_button') })] }), jsxRuntime.jsx(NeedHelpSection.NeedHelpSection, {}), jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, {})] })] }) }) }));
 };

package/src/lib/modals/SignMessageConfirmationModal/SignMessageConfirmationModal.js

@@ -20,6 +20,7 @@ import '../../utils/constants/colors.js';
 import '../../utils/constants/values.js';
 import '../../shared/utils/classes/storage/localStorage.js';
 import '../../shared/utils/classes/storage/sessionStorage.js';
+import { useEffectOnce } from '../../shared/utils/hooks/useEffectOnce/useEffectOnce.js';
 import { usePreventPageScroll } from '../../shared/utils/hooks/usePreventPageScroll/usePreventPageScroll.js';
 import { authModalZIndex } from '../../shared/consts/index.js';
 import { Icon } from '../../components/Icon/Icon.js';
@@ -105,7 +106,7 @@ import { NeedHelpSection } from '../../components/NeedHelpSection/NeedHelpSectio
 import 'qrcode';
 import { SignMessagePreview } from '../../components/SignMessagePreview/SignMessagePreview.js';
 
-const SignMessageConfirmationModal = ({ appLogoUrl, appName, appOrigin, message, handler, onReject, onSignMessage, }) => {
+const SignMessageConfirmationModal = ({ appLogoUrl, appName, appOrigin, message, handler, onReject, onSignMessage, hideModal, }) => {
     usePreventPageScroll(true);
     const didConfirmRef = useRef(false);
     const [show, setShow] = useState(true);
@@ -148,16 +149,20 @@ const SignMessageConfirmationModal = ({ appLogoUrl, appName, appOrigin, message,
         }
         onReject(signMessageError || new Error('user rejected signing'));
     }, [signedMessage, onSignMessage, onReject, signMessageError]);
-    const handleMessageSign = () => __awaiter(void 0, void 0, void 0, function* () {
+    const handleMessageSign = (signWithoutModal) => __awaiter(void 0, void 0, void 0, function* () {
+        if (yield shouldInitRecovery()) {
+            yield initPasskeyRecoveryProcess('email', 'signMessage');
+        }
+        if (signWithoutModal === true) {
+            onSignMessage('callHandlerOutsideModal');
+            return;
+        }
         if (isSessionKeyCompatibleWalletConnector(walletConnector) ||
             ((walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.key) === 'zerodev' &&
                 isSessionKeyCompatibleWalletConnector(walletConnector.getEOAConnector()))) {
             confirm();
             return;
         }
-        if (yield shouldInitRecovery()) {
-            yield initPasskeyRecoveryProcess('email', 'signMessage');
-        }
         if (isTurnkeyWallet && userNeedsCrossDomainPasskey) {
             setView('passkey-new-domain-detected');
             setShowAuthFlow(true, {
@@ -171,8 +176,13 @@ const SignMessageConfirmationModal = ({ appLogoUrl, appName, appOrigin, message,
         }
         confirm();
     });
+    useEffectOnce(() => {
+        if (hideModal) {
+            handleMessageSign(true);
+        }
+    });
     const closeButton = (jsx(IconButton, { type: 'button', onClick: handleOnReject, "data-testid": 'close', disabled: isLoading, children: jsx(SvgClose, {}) }));
-    return (jsx(Portal, { handleClose: handleOnReject, isShown: show, zIndex: authModalZIndex, withBackdrop: true, elementId: 'dynamic-sign-message', transitionEvents: {
+    return hideModal ? null : (jsx(Portal, { handleClose: handleOnReject, isShown: show, zIndex: authModalZIndex, withBackdrop: true, elementId: 'dynamic-sign-message', transitionEvents: {
             onUnmount: handleOnModalUnmount,
         }, children: jsx(Modal, { children: jsxs(ModalCard, { children: [jsx(ModalHeader, { trailing: closeButton, alignContent: 'bottom', children: jsx(IconWithSpinner, { Icon: (props) => (jsx(Icon, { color: 'brand-primary', children: jsx(SvgSignCircle, Object.assign({}, props)) })), iconSize: 64, isSpinning: true }) }), jsx(PasskeyCreatedSuccessBanner, {}), jsxs("div", { className: 'sign-message-confirmation__body', children: [jsx(Typography, { variant: 'title', color: 'primary', className: 'sign-message-confirmation__title', copykey: 'dyn_sign_message.title', children: t('dyn_sign_message.title') }), jsx(AnimatePresence, { animationComponent: jsx(VerticalDrawerTransition, {}), children: signMessageError && (jsx("div", { className: 'sign-message-confirmation__error', children: jsx(ErrorContainer, { children: errorText }) })) }), jsxs("div", { className: 'sign-message-confirmation__message-container', children: [jsx(AppOriginTile, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: appOrigin }), jsx("div", { className: 'sign-message-confirmation__message', children: jsx(SignMessagePreview, { message: message.toString() }) })] }), jsxs("div", { className: 'sign-message-confirmation__actions', children: [jsx(TypographyButton, { buttonVariant: 'secondary', onClick: handleOnReject, expanded: true, buttonPadding: 'large', disabled: isLoading, copykey: 'dyn_sign_message.cancel_button', children: t('dyn_sign_message.cancel_button') }), jsx(TypographyButton, { buttonVariant: 'primary', buttonPadding: 'large', onClick: handleMessageSign, expanded: true, loading: isLoading, copykey: 'dyn_sign_message.sign_button', dataTestId: 'sign-button', children: t('dyn_sign_message.sign_button') })] }), jsx(NeedHelpSection, {}), jsx(PoweredByDynamic, {})] })] }) }) }));
 };

package/src/lib/modals/SignMessageConfirmationModal/SignMessageConfirmationModal.types.d.ts

@@ -8,6 +8,7 @@ export type SignMessageConfirmationModalProps = {
     message: string | ArrayLike<number>;
     onReject: (error: unknown) => void;
     onSignMessage: (signedMessage: string) => void;
+    hideModal: boolean;
 };
 export type SignMessageConfirmationModalComponent = FC<SignMessageConfirmationModalProps>;
 export type SignMessageError = Error & PasskeyError & {

package/src/lib/modals/TransactionConfirmationModal/TransactionConfirmationModal.cjs

@@ -90,7 +90,7 @@ require('../../context/ReinitializeContext/ReinitializeContextProvider.cjs');
 require('../../components/InlineWidget/InlineWidget.cjs');
 require('qrcode');
 
-const TransactionConfirmationModal = ({ title, onReject, onTransactionResponseSuccess, transaction, copykey, walletConnector, }) => {
+const TransactionConfirmationModal = ({ title, onReject, onTransactionResponseSuccess, transaction, copykey, walletConnector, hideModal, }) => {
     usePreventPageScroll.usePreventPageScroll(true);
     const [show, setShow] = React.useState(true);
     const errorRef = React.useRef(null);
@@ -106,7 +106,7 @@ const TransactionConfirmationModal = ({ title, onReject, onTransactionResponseSu
     }, [onTransactionResponseSuccess, onReject]);
     return (jsxRuntime.jsx(Portal.Portal, { handleClose: closeModal, isShown: show, zIndex: index.authModalZIndex, withBackdrop: true, elementId: 'dynamic-send-transaction', transitionEvents: {
             onUnmount: handleOnModalUnmount,
-        }, children: jsxRuntime.jsx(Modal.Modal, { children: jsxRuntime.jsx(ModalCard.ModalCard, { children: jsxRuntime.jsx(TransactionConfirmationView.TransactionConfirmationView, { transaction: transaction, title: title, copykey: copykey, mutation: () => transaction.submit(), onClickClose: closeModal, onError: (error) => (errorRef.current = error), displayPoweredByDynamicFooter: true, walletConnector: walletConnector, onSuccess: (transactionResponse) => {
+        }, children: jsxRuntime.jsx(Modal.Modal, { children: jsxRuntime.jsx(ModalCard.ModalCard, { children: jsxRuntime.jsx(TransactionConfirmationView.TransactionConfirmationView, { transaction: transaction, title: title, copykey: copykey, hideModal: hideModal, mutation: () => transaction.submit(), onClickClose: closeModal, onError: (error) => (errorRef.current = error), displayPoweredByDynamicFooter: true, walletConnector: walletConnector, onSuccess: (transactionResponse) => {
                         errorRef.current = null;
                         transactionResponseRef.current = transactionResponse;
                         closeModal();

package/src/lib/modals/TransactionConfirmationModal/TransactionConfirmationModal.js

@@ -86,7 +86,7 @@ import '../../context/ReinitializeContext/ReinitializeContextProvider.js';
 import '../../components/InlineWidget/InlineWidget.js';
 import 'qrcode';
 
-const TransactionConfirmationModal = ({ title, onReject, onTransactionResponseSuccess, transaction, copykey, walletConnector, }) => {
+const TransactionConfirmationModal = ({ title, onReject, onTransactionResponseSuccess, transaction, copykey, walletConnector, hideModal, }) => {
     usePreventPageScroll(true);
     const [show, setShow] = useState(true);
     const errorRef = useRef(null);
@@ -102,7 +102,7 @@ const TransactionConfirmationModal = ({ title, onReject, onTransactionResponseSu
     }, [onTransactionResponseSuccess, onReject]);
     return (jsx(Portal, { handleClose: closeModal, isShown: show, zIndex: authModalZIndex, withBackdrop: true, elementId: 'dynamic-send-transaction', transitionEvents: {
             onUnmount: handleOnModalUnmount,
-        }, children: jsx(Modal, { children: jsx(ModalCard, { children: jsx(TransactionConfirmationView, { transaction: transaction, title: title, copykey: copykey, mutation: () => transaction.submit(), onClickClose: closeModal, onError: (error) => (errorRef.current = error), displayPoweredByDynamicFooter: true, walletConnector: walletConnector, onSuccess: (transactionResponse) => {
+        }, children: jsx(Modal, { children: jsx(ModalCard, { children: jsx(TransactionConfirmationView, { transaction: transaction, title: title, copykey: copykey, hideModal: hideModal, mutation: () => transaction.submit(), onClickClose: closeModal, onError: (error) => (errorRef.current = error), displayPoweredByDynamicFooter: true, walletConnector: walletConnector, onSuccess: (transactionResponse) => {
                         errorRef.current = null;
                         transactionResponseRef.current = transactionResponse;
                         closeModal();

package/src/lib/modals/TransactionConfirmationModal/TransactionConfirmationModal.types.d.ts

@@ -8,5 +8,6 @@ export type TransactionConfirmationModalProps = {
     title: ReactNode;
     transaction: IUITransaction;
     walletConnector: WalletConnector;
+    hideModal: boolean;
 } & CopyKey;
 export type TransactionConfirmationModalComponent = FC<TransactionConfirmationModalProps>;

package/src/lib/shared/utils/hooks/useGlobalLoading/useGlobalLoading.cjs

@@ -7,7 +7,7 @@ var React = require('react');
 var logger = require('../../../logger.cjs');
 var index = require('../../functions/lastAuthenticatedAccount/index.cjs');
 
-const useGlobalLoading = ({ authMode, connectedInfo, connectedWallets, projectSettings, primaryWallet, user, walletBook, enableInstrumentation, appName, }) => {
+const useGlobalLoading = ({ authMode, connectedInfo, connectedWallets, projectSettings, primaryWallet, user, walletBook, enableInstrumentation, appName, environmentId, }) => {
     var _a, _b;
     // Once we declare the SDK as loaded, we do not ever want to flip back to false
     const hasLoaded = React.useRef(false);
@@ -19,16 +19,16 @@ const useGlobalLoading = ({ authMode, connectedInfo, connectedWallets, projectSe
         // Calculate how long loading took and emit log
         if (enableInstrumentation) {
             const loadingTime = new Date().getTime() - loadingStart.current;
-            // User is already included in meta
-            const analysisParams = {
-                appName,
-                loadingTime,
-                primaryWalletId: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.id,
-                projectDisplayName: projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.displayName,
-            };
             // Pass as default arg and as an object. The object value will be injected
             // in the log later on, keeping its format as a number for calculation purposes
-            logger.logger.instrument(`SDK loaded in (ms) ${loadingTime}`, analysisParams);
+            logger.logger.instrument(`SDK loaded in (ms) ${loadingTime}`, {
+                appName,
+                environmentId,
+                key: 'sdkHasLoaded',
+                primaryWalletId: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.id,
+                time: loadingTime,
+                userId: user === null || user === void 0 ? void 0 : user.userId,
+            });
         }
     };
     if (hasLoaded.current)

package/src/lib/shared/utils/hooks/useGlobalLoading/useGlobalLoading.d.ts

@@ -13,6 +13,7 @@ type Props = {
     walletBook: WalletBookSchema;
     enableInstrumentation: boolean;
     appName: string;
+    environmentId: string;
 };
-export declare const useGlobalLoading: ({ authMode, connectedInfo, connectedWallets, projectSettings, primaryWallet, user, walletBook, enableInstrumentation, appName, }: Props) => boolean;
+export declare const useGlobalLoading: ({ authMode, connectedInfo, connectedWallets, projectSettings, primaryWallet, user, walletBook, enableInstrumentation, appName, environmentId, }: Props) => boolean;
 export {};

package/src/lib/shared/utils/hooks/useGlobalLoading/useGlobalLoading.js

@@ -3,7 +3,7 @@ import { useRef } from 'react';
 import { logger } from '../../../logger.js';
 import { lastAuthenticatedAccount } from '../../functions/lastAuthenticatedAccount/index.js';
 
-const useGlobalLoading = ({ authMode, connectedInfo, connectedWallets, projectSettings, primaryWallet, user, walletBook, enableInstrumentation, appName, }) => {
+const useGlobalLoading = ({ authMode, connectedInfo, connectedWallets, projectSettings, primaryWallet, user, walletBook, enableInstrumentation, appName, environmentId, }) => {
     var _a, _b;
     // Once we declare the SDK as loaded, we do not ever want to flip back to false
     const hasLoaded = useRef(false);
@@ -15,16 +15,16 @@ const useGlobalLoading = ({ authMode, connectedInfo, connectedWallets, projectSe
         // Calculate how long loading took and emit log
         if (enableInstrumentation) {
             const loadingTime = new Date().getTime() - loadingStart.current;
-            // User is already included in meta
-            const analysisParams = {
-                appName,
-                loadingTime,
-                primaryWalletId: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.id,
-                projectDisplayName: projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.displayName,
-            };
             // Pass as default arg and as an object. The object value will be injected
             // in the log later on, keeping its format as a number for calculation purposes
-            logger.instrument(`SDK loaded in (ms) ${loadingTime}`, analysisParams);
+            logger.instrument(`SDK loaded in (ms) ${loadingTime}`, {
+                appName,
+                environmentId,
+                key: 'sdkHasLoaded',
+                primaryWalletId: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.id,
+                time: loadingTime,
+                userId: user === null || user === void 0 ? void 0 : user.userId,
+            });
         }
     };
     if (hasLoaded.current)

package/src/lib/utils/hooks/useWalletUiUtils/useWalletUiUtils.cjs

@@ -101,34 +101,41 @@ const useWalletUiUtils = ({ appLogoUrl, appName, getAppOrigin, hideEmbeddedWalle
         elementId: 'dynamic-sync-wallet',
     });
     const shouldConfirmAction = React.useCallback(() => {
-        if (hideEmbeddedWalletTransactionUIs) {
-            return false;
-        }
         if (confirmationStateRef.current === 'disabled') {
             confirmationStateRef.current = 'enabled';
             return false;
         }
         return true;
     }, [confirmationStateRef, hideEmbeddedWalletTransactionUIs]);
-    const signMessage = React.useCallback(({ message, handler }) => {
-        if (!shouldConfirmAction()) {
+    const signMessage = React.useCallback((_a) => _tslib.__awaiter(void 0, [_a], void 0, function* ({ message, handler }) {
+        // prevent the modal from opening itself again
+        if (!shouldConfirmAction())
             return handler();
-        }
-        return openSignMessage((resolve, reject) => (jsxRuntime.jsx(SignMessageConfirmationModal.SignMessageConfirmationModal, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: getAppOrigin(), message: message, handler: handler, onSignMessage: resolve, onReject: reject })));
-    }, [appLogoUrl, appName, getAppOrigin, openSignMessage, shouldConfirmAction]);
+        return openSignMessage((resolve, reject) => (jsxRuntime.jsx(SignMessageConfirmationModal.SignMessageConfirmationModal, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: getAppOrigin(), message: message, handler: handler, onSignMessage: resolve, onReject: reject, hideModal: hideEmbeddedWalletTransactionUIs }))).then((signedMessage) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+            if (signedMessage === 'callHandlerOutsideModal')
+                return handler();
+            else
+                return signedMessage;
+        }));
+    }), [appLogoUrl, appName, getAppOrigin, openSignMessage, shouldConfirmAction]);
     const sendTransaction = React.useCallback((walletConnector, transaction) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        if (!shouldConfirmAction()) {
+        // prevent the modal from opening itself again
+        if (!shouldConfirmAction())
             return transaction.submit();
-        }
-        return openSendTransaction((resolve, reject) => (jsxRuntime.jsx(TransactionConfirmationModal.TransactionConfirmationModal, { copykey: 'dyn_send_transaction.confirmation.title', title: t('dyn_send_transaction.confirmation.title'), transaction: transaction, onTransactionResponseSuccess: resolve, onReject: reject, walletConnector: walletConnector })));
+        return openSendTransaction((resolve, reject) => (jsxRuntime.jsx(TransactionConfirmationModal.TransactionConfirmationModal, { copykey: 'dyn_send_transaction.confirmation.title', title: t('dyn_send_transaction.confirmation.title'), transaction: transaction, onTransactionResponseSuccess: resolve, onReject: reject, walletConnector: walletConnector, hideModal: hideEmbeddedWalletTransactionUIs }))).then((signedTransaction) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+            if (signedTransaction === 'callHandlerOutsideModal')
+                return transaction.submit();
+            else
+                return signedTransaction;
+        }));
     }), [openSendTransaction, shouldConfirmAction, t]);
-    const enterPassword = React.useCallback((_a) => _tslib.__awaiter(void 0, [_a], void 0, function* ({ handler, closeView = true }) {
+    const enterPassword = React.useCallback((_b) => _tslib.__awaiter(void 0, [_b], void 0, function* ({ handler, closeView = true }) {
         return openEnterPassword((resolve, reject) => (jsxRuntime.jsx(EnterPasswordModal.EnterPasswordModal, { handler: handler, onResolve: resolve, onReject: reject, closeView: closeView })));
     }), [openEnterPassword]);
-    const createPassword = React.useCallback((_b) => _tslib.__awaiter(void 0, [_b], void 0, function* ({ closeView = true }) {
+    const createPassword = React.useCallback((_c) => _tslib.__awaiter(void 0, [_c], void 0, function* ({ closeView = true }) {
         return openCreatePassword((resolve, reject) => (jsxRuntime.jsx(CreatePasswordModal.CreatePasswordModal, { onResolve: resolve, onReject: reject, closeView: closeView })));
     }), [openCreatePassword]);
-    const syncWallet = React.useCallback((_c) => _tslib.__awaiter(void 0, [_c], void 0, function* ({ walletConnector, activeAddress, expectedAddress }) {
+    const syncWallet = React.useCallback((_d) => _tslib.__awaiter(void 0, [_d], void 0, function* ({ walletConnector, activeAddress, expectedAddress }) {
         if (!activeAddress) {
             return;
         }

package/src/lib/utils/hooks/useWalletUiUtils/useWalletUiUtils.js

@@ -97,34 +97,41 @@ const useWalletUiUtils = ({ appLogoUrl, appName, getAppOrigin, hideEmbeddedWalle
         elementId: 'dynamic-sync-wallet',
     });
     const shouldConfirmAction = useCallback(() => {
-        if (hideEmbeddedWalletTransactionUIs) {
-            return false;
-        }
         if (confirmationStateRef.current === 'disabled') {
             confirmationStateRef.current = 'enabled';
             return false;
         }
         return true;
     }, [confirmationStateRef, hideEmbeddedWalletTransactionUIs]);
-    const signMessage = useCallback(({ message, handler }) => {
-        if (!shouldConfirmAction()) {
+    const signMessage = useCallback((_a) => __awaiter(void 0, [_a], void 0, function* ({ message, handler }) {
+        // prevent the modal from opening itself again
+        if (!shouldConfirmAction())
             return handler();
-        }
-        return openSignMessage((resolve, reject) => (jsx(SignMessageConfirmationModal, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: getAppOrigin(), message: message, handler: handler, onSignMessage: resolve, onReject: reject })));
-    }, [appLogoUrl, appName, getAppOrigin, openSignMessage, shouldConfirmAction]);
+        return openSignMessage((resolve, reject) => (jsx(SignMessageConfirmationModal, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: getAppOrigin(), message: message, handler: handler, onSignMessage: resolve, onReject: reject, hideModal: hideEmbeddedWalletTransactionUIs }))).then((signedMessage) => __awaiter(void 0, void 0, void 0, function* () {
+            if (signedMessage === 'callHandlerOutsideModal')
+                return handler();
+            else
+                return signedMessage;
+        }));
+    }), [appLogoUrl, appName, getAppOrigin, openSignMessage, shouldConfirmAction]);
     const sendTransaction = useCallback((walletConnector, transaction) => __awaiter(void 0, void 0, void 0, function* () {
-        if (!shouldConfirmAction()) {
+        // prevent the modal from opening itself again
+        if (!shouldConfirmAction())
             return transaction.submit();
-        }
-        return openSendTransaction((resolve, reject) => (jsx(TransactionConfirmationModal, { copykey: 'dyn_send_transaction.confirmation.title', title: t('dyn_send_transaction.confirmation.title'), transaction: transaction, onTransactionResponseSuccess: resolve, onReject: reject, walletConnector: walletConnector })));
+        return openSendTransaction((resolve, reject) => (jsx(TransactionConfirmationModal, { copykey: 'dyn_send_transaction.confirmation.title', title: t('dyn_send_transaction.confirmation.title'), transaction: transaction, onTransactionResponseSuccess: resolve, onReject: reject, walletConnector: walletConnector, hideModal: hideEmbeddedWalletTransactionUIs }))).then((signedTransaction) => __awaiter(void 0, void 0, void 0, function* () {
+            if (signedTransaction === 'callHandlerOutsideModal')
+                return transaction.submit();
+            else
+                return signedTransaction;
+        }));
     }), [openSendTransaction, shouldConfirmAction, t]);
-    const enterPassword = useCallback((_a) => __awaiter(void 0, [_a], void 0, function* ({ handler, closeView = true }) {
+    const enterPassword = useCallback((_b) => __awaiter(void 0, [_b], void 0, function* ({ handler, closeView = true }) {
         return openEnterPassword((resolve, reject) => (jsx(EnterPasswordModal, { handler: handler, onResolve: resolve, onReject: reject, closeView: closeView })));
     }), [openEnterPassword]);
-    const createPassword = useCallback((_b) => __awaiter(void 0, [_b], void 0, function* ({ closeView = true }) {
+    const createPassword = useCallback((_c) => __awaiter(void 0, [_c], void 0, function* ({ closeView = true }) {
         return openCreatePassword((resolve, reject) => (jsx(CreatePasswordModal, { onResolve: resolve, onReject: reject, closeView: closeView })));
     }), [openCreatePassword]);
-    const syncWallet = useCallback((_c) => __awaiter(void 0, [_c], void 0, function* ({ walletConnector, activeAddress, expectedAddress }) {
+    const syncWallet = useCallback((_d) => __awaiter(void 0, [_d], void 0, function* ({ walletConnector, activeAddress, expectedAddress }) {
         if (!activeAddress) {
             return;
         }

package/src/lib/views/TransactionConfirmationView/TransactionConfirmationView.cjs

@@ -103,7 +103,7 @@ var useInternalDynamicContext = require('../../context/DynamicContext/useDynamic
 
 const DEFAULT_PRECISION = 10;
 const FEE_REFRESH_INTERVAL = 20000;
-const TransactionConfirmationView = ({ transaction, onError, onSuccess, mutation, onClickBack, walletConnector, onClickClose, title, displayPoweredByDynamicFooter = false, copykey, }) => {
+const TransactionConfirmationView = ({ transaction, onError, onSuccess, mutation, onClickBack, walletConnector, onClickClose, title, displayPoweredByDynamicFooter = false, copykey, hideModal, }) => {
     const { appName, appLogoUrl } = useInternalDynamicContext.useInternalDynamicContext();
     const appOrigin = getAppOrigin.getAppOrigin();
     const [isGasSponsored, setIsGasSponsored] = React.useState(false);
@@ -199,7 +199,7 @@ const TransactionConfirmationView = ({ transaction, onError, onSuccess, mutation
         t,
         currencySymbol,
     ]);
-    return (jsxRuntime.jsxs(TransactionConfirmationPageLayout.TransactionConfirmationPageLayout, { onClickBack: onClickBack, onClickClose: onClickClose, copykey: copykey, title: title, appOrigin: appOrigin, appName: appName, appLogoUrl: appLogoUrl, isLoading: isLoading, onClickSend: () => send(), displayPoweredByDynamicFooter: displayPoweredByDynamicFooter, disableSendButton: isBalanceLoading, error: errorMessage, alert: alert, children: [jsxRuntime.jsx(TransactionRow.TransactionRow, { copykey: 'dyn_send_transaction.confirmation.data.from', label: t('dyn_send_transaction.confirmation.data.from'), title: transaction.from, children: shortenWalletAddress.shortenWalletAddress(transaction.from, 4, 4) }), jsxRuntime.jsx(TransactionRow.TransactionRow, { copykey: 'dyn_send_transaction.confirmation.data.to', label: t('dyn_send_transaction.confirmation.data.to'), title: transaction.to, children: transaction.to &&
+    return (jsxRuntime.jsxs(TransactionConfirmationPageLayout.TransactionConfirmationPageLayout, { onClickBack: onClickBack, onClickClose: onClickClose, copykey: copykey, title: title, appOrigin: appOrigin, appName: appName, appLogoUrl: appLogoUrl, hideModal: hideModal, isLoading: isLoading, onClickSend: () => send(), onSuccess: (tx) => onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(tx), displayPoweredByDynamicFooter: displayPoweredByDynamicFooter, disableSendButton: isBalanceLoading, error: errorMessage, alert: alert, children: [jsxRuntime.jsx(TransactionRow.TransactionRow, { copykey: 'dyn_send_transaction.confirmation.data.from', label: t('dyn_send_transaction.confirmation.data.from'), title: transaction.from, children: shortenWalletAddress.shortenWalletAddress(transaction.from, 4, 4) }), jsxRuntime.jsx(TransactionRow.TransactionRow, { copykey: 'dyn_send_transaction.confirmation.data.to', label: t('dyn_send_transaction.confirmation.data.to'), title: transaction.to, children: transaction.to &&
                     transaction.to === 'dyn_send_transaction.multiple_recipients'
                     ? t('dyn_send_transaction.multiple_recipients')
                     : shortenWalletAddress.shortenWalletAddress(transaction.to, 4, 4) }), jsxRuntime.jsx(TransactionRow.TransactionRow, { copykey: 'dyn_send_transaction.confirmation.data.amount', label: t('dyn_send_transaction.confirmation.data.amount'), isEmpty: !transaction.value, title: transaction.value ? transaction.format(transaction.value) : undefined, suffix: currencySymbol, icon: chain && jsxRuntime.jsx(ChainIcon.ChainIcon, { chain: chain, chainName: chainName }), dataTestId: 'transaction-amount', children: transaction.value !== undefined

package/src/lib/views/TransactionConfirmationView/TransactionConfirmationView.d.ts

@@ -9,6 +9,7 @@ export type TransactionConfirmationViewProps = {
     onClickBack?: MouseEventHandler<HTMLButtonElement>;
     onClickClose?: MouseEventHandler<HTMLButtonElement>;
     onError?: (error: unknown) => void;
+    hideModal?: boolean;
     onSuccess?: (receipt: string) => void;
     title: ReactNode;
     transaction: IUITransaction;

package/src/lib/views/TransactionConfirmationView/TransactionConfirmationView.js

@@ -99,7 +99,7 @@ import { useInternalDynamicContext } from '../../context/DynamicContext/useDynam
 
 const DEFAULT_PRECISION = 10;
 const FEE_REFRESH_INTERVAL = 20000;
-const TransactionConfirmationView = ({ transaction, onError, onSuccess, mutation, onClickBack, walletConnector, onClickClose, title, displayPoweredByDynamicFooter = false, copykey, }) => {
+const TransactionConfirmationView = ({ transaction, onError, onSuccess, mutation, onClickBack, walletConnector, onClickClose, title, displayPoweredByDynamicFooter = false, copykey, hideModal, }) => {
     const { appName, appLogoUrl } = useInternalDynamicContext();
     const appOrigin = getAppOrigin();
     const [isGasSponsored, setIsGasSponsored] = useState(false);
@@ -195,7 +195,7 @@ const TransactionConfirmationView = ({ transaction, onError, onSuccess, mutation
         t,
         currencySymbol,
     ]);
-    return (jsxs(TransactionConfirmationPageLayout, { onClickBack: onClickBack, onClickClose: onClickClose, copykey: copykey, title: title, appOrigin: appOrigin, appName: appName, appLogoUrl: appLogoUrl, isLoading: isLoading, onClickSend: () => send(), displayPoweredByDynamicFooter: displayPoweredByDynamicFooter, disableSendButton: isBalanceLoading, error: errorMessage, alert: alert, children: [jsx(TransactionRow, { copykey: 'dyn_send_transaction.confirmation.data.from', label: t('dyn_send_transaction.confirmation.data.from'), title: transaction.from, children: shortenWalletAddress(transaction.from, 4, 4) }), jsx(TransactionRow, { copykey: 'dyn_send_transaction.confirmation.data.to', label: t('dyn_send_transaction.confirmation.data.to'), title: transaction.to, children: transaction.to &&
+    return (jsxs(TransactionConfirmationPageLayout, { onClickBack: onClickBack, onClickClose: onClickClose, copykey: copykey, title: title, appOrigin: appOrigin, appName: appName, appLogoUrl: appLogoUrl, hideModal: hideModal, isLoading: isLoading, onClickSend: () => send(), onSuccess: (tx) => onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(tx), displayPoweredByDynamicFooter: displayPoweredByDynamicFooter, disableSendButton: isBalanceLoading, error: errorMessage, alert: alert, children: [jsx(TransactionRow, { copykey: 'dyn_send_transaction.confirmation.data.from', label: t('dyn_send_transaction.confirmation.data.from'), title: transaction.from, children: shortenWalletAddress(transaction.from, 4, 4) }), jsx(TransactionRow, { copykey: 'dyn_send_transaction.confirmation.data.to', label: t('dyn_send_transaction.confirmation.data.to'), title: transaction.to, children: transaction.to &&
                     transaction.to === 'dyn_send_transaction.multiple_recipients'
                     ? t('dyn_send_transaction.multiple_recipients')
                     : shortenWalletAddress(transaction.to, 4, 4) }), jsx(TransactionRow, { copykey: 'dyn_send_transaction.confirmation.data.amount', label: t('dyn_send_transaction.confirmation.data.amount'), isEmpty: !transaction.value, title: transaction.value ? transaction.format(transaction.value) : undefined, suffix: currencySymbol, icon: chain && jsx(ChainIcon, { chain: chain, chainName: chainName }), dataTestId: 'transaction-amount', children: transaction.value !== undefined