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

package/CHANGELOG.md

@@ -1,4 +1,23 @@
 
+## [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)
+
+
+### Features
+
+* add new hook to select wallet option to connect ([#6301](https://github.com/dynamic-labs/DynamicAuth/issues/6301)) ([833d71d](https://github.com/dynamic-labs/DynamicAuth/commit/833d71de164c57bfa22898c3425641a83a12e135))
+
+
+### Bug Fixes
+
+* refresh session keys correctly for solana embedded wallets ([#6309](https://github.com/dynamic-labs/DynamicAuth/issues/6309)) ([4b28e8a](https://github.com/dynamic-labs/DynamicAuth/commit/4b28e8ae231567754b6cfd07a7d41e86f1c73daa))
+
 ## [3.0.0-alpha.16](https://github.com/dynamic-labs/DynamicAuth/compare/v3.0.0-alpha.15...v3.0.0-alpha.16) (2024-07-11)
 
 

package/package.cjs

@@ -3,7 +3,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "3.0.0-alpha.16";
+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.16";
+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.16",
+  "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.16",
-    "@dynamic-labs/logger": "3.0.0-alpha.16",
-    "@dynamic-labs/multi-wallet": "3.0.0-alpha.16",
-    "@dynamic-labs/rpc-providers": "3.0.0-alpha.16",
-    "@dynamic-labs/store": "3.0.0-alpha.16",
-    "@dynamic-labs/types": "3.0.0-alpha.16",
-    "@dynamic-labs/utils": "3.0.0-alpha.16",
-    "@dynamic-labs/wallet-book": "3.0.0-alpha.16",
-    "@dynamic-labs/wallet-connector-core": "3.0.0-alpha.16",
+    "@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/index.cjs

@@ -148,6 +148,7 @@ var useDynamicModals = require('./lib/utils/hooks/useDynamicModals/useDynamicMod
 var useMfa = require('./lib/utils/hooks/useMfa/useMfa.cjs');
 var useTokenBalances = require('./lib/utils/hooks/useTokenBalances/useTokenBalances.cjs');
 var useRefreshUser = require('./lib/utils/hooks/useRefreshUser/useRefreshUser.cjs');
+var useSelectWalletOption = require('./lib/utils/hooks/useSelectWalletOption/useSelectWalletOption.cjs');
 var DynamicConnectButton = require('./lib/components/DynamicConnectButton/DynamicConnectButton.cjs');
 require('./lib/components/InlineWidget/InlineWidget.cjs');
 var IsBrowser = require('./lib/components/IsBrowser/IsBrowser.cjs');
@@ -256,5 +257,6 @@ exports.useDynamicModals = useDynamicModals.useDynamicModals;
 exports.useMfa = useMfa.useMfa;
 exports.useTokenBalances = useTokenBalances.useTokenBalances;
 exports.useRefreshUser = useRefreshUser.useRefreshUser;
+exports.useSelectWalletOption = useSelectWalletOption.useSelectWalletOption;
 exports.DynamicConnectButton = DynamicConnectButton.DynamicConnectButton;
 exports.IsBrowser = IsBrowser.IsBrowser;

package/src/index.d.ts

@@ -107,7 +107,7 @@ export { FilterAndSortWallets, FilterBridgeChainsName, FilterChain, FilterWallet
 export { 
 /** @deprecated */
 DynamicWidgetContextProvider, } from './lib/widgets/DynamicWidget/context';
-export { useWalletItemActions, useAuthenticateConnectedUser, useSocialAccounts, useEmbeddedWallet, useEmbeddedWalletAuthenticator, usePasskeyRecovery, useEmbeddedReveal, useIsLoggedIn, useDynamicModals, useMfa, useTokenBalances, useSwitchWallet, useRpcProviders, useRefreshUser, } from './lib/utils/hooks';
+export { useWalletItemActions, useAuthenticateConnectedUser, useSocialAccounts, useEmbeddedWallet, useEmbeddedWalletAuthenticator, usePasskeyRecovery, useEmbeddedReveal, useIsLoggedIn, useDynamicModals, useMfa, useTokenBalances, useSwitchWallet, useRpcProviders, useRefreshUser, useSelectWalletOption, } from './lib/utils/hooks';
 export { useUserUpdateRequest, useWalletConnectorEvent, } from './lib/utils/hooks';
 export { type VerifyOtp, useOtpVerificationRequest, } from './lib/utils/hooks/authenticationHooks/';
 export type { UpdateUserFieldsArg } from './lib/utils/hooks/';

package/src/index.js

@@ -144,6 +144,7 @@ export { useDynamicModals } from './lib/utils/hooks/useDynamicModals/useDynamicM
 export { useMfa } from './lib/utils/hooks/useMfa/useMfa.js';
 export { useTokenBalances } from './lib/utils/hooks/useTokenBalances/useTokenBalances.js';
 export { useRefreshUser } from './lib/utils/hooks/useRefreshUser/useRefreshUser.js';
+export { useSelectWalletOption } from './lib/utils/hooks/useSelectWalletOption/useSelectWalletOption.js';
 export { DynamicConnectButton } from './lib/components/DynamicConnectButton/DynamicConnectButton.js';
 import './lib/components/InlineWidget/InlineWidget.js';
 export { IsBrowser } from './lib/components/IsBrowser/IsBrowser.js';

package/src/lib/Main.cjs

@@ -75,13 +75,13 @@ require('formik');
 var DynamicAuthModal = require('./modals/DynamicAuthModal/DynamicAuthModal.cjs');
 require('./views/TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
 require('./context/MfaSettingsContext/MfaSettingsContext.cjs');
+require('./context/WalletGroupContext/WalletGroupContext.cjs');
 var useInternalDynamicContext = require('./context/DynamicContext/useDynamicContext/useInternalDynamicContext.cjs');
 require('./widgets/DynamicBridgeWidget/context/DynamicBridgeWidgetContext/DynamicBridgeWidgetContext.cjs');
 require('./widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
 require('./widgets/DynamicWidget/components/DynamicWidgetCard/DynamicWidgetCard.cjs');
 var index = require('./context/FooterAnimationContext/index.cjs');
 var SocialRedirectContext = require('./context/SocialRedirectContext/SocialRedirectContext.cjs');
-require('./context/WalletGroupContext/WalletGroupContext.cjs');
 require('./widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
 require('./widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
 require('./context/WidgetRegistry/WidgetRegistryContextProvider.cjs');

package/src/lib/Main.js

@@ -71,13 +71,13 @@ import 'formik';
 import { DynamicAuthModal } from './modals/DynamicAuthModal/DynamicAuthModal.js';
 import './views/TransactionConfirmationView/helpers/transactionErrorMessage.js';
 import './context/MfaSettingsContext/MfaSettingsContext.js';
+import './context/WalletGroupContext/WalletGroupContext.js';
 import { useInternalDynamicContext } from './context/DynamicContext/useDynamicContext/useInternalDynamicContext.js';
 import './widgets/DynamicBridgeWidget/context/DynamicBridgeWidgetContext/DynamicBridgeWidgetContext.js';
 import './widgets/DynamicWidget/context/DynamicWidgetContext.js';
 import './widgets/DynamicWidget/components/DynamicWidgetCard/DynamicWidgetCard.js';
 import { FooterAnimationContextProvider } from './context/FooterAnimationContext/index.js';
 import { useSocialRedirectContext } from './context/SocialRedirectContext/SocialRedirectContext.js';
-import './context/WalletGroupContext/WalletGroupContext.js';
 import './widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
 import './widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
 import './context/WidgetRegistry/WidgetRegistryContextProvider.js';

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

@@ -68,6 +68,7 @@ var useWalletConnectorNetwork = require('../../utils/hooks/useWalletConnectorNet
 var useSetWalletConnectorFetchers = require('../../utils/hooks/useSetWalletConnectorFetchers/useSetWalletConnectorFetchers.cjs');
 var useSendDynamicProps = require('../../utils/hooks/useSendDynamicProps/useSendDynamicProps.cjs');
 var MfaSettingsContext = require('../MfaSettingsContext/MfaSettingsContext.cjs');
+var WalletGroupContext = require('../WalletGroupContext/WalletGroupContext.cjs');
 require('../../components/ShadowDOM/ShadowDOM.cjs');
 require('../../components/IconButton/IconButton.cjs');
 require('../../components/InlineWidget/InlineWidget.cjs');
@@ -89,7 +90,6 @@ var SocialRedirectContext = require('../SocialRedirectContext/SocialRedirectCont
 require('../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
 require('@hcaptcha/react-hcaptcha');
 require('../FooterAnimationContext/index.cjs');
-var WalletGroupContext = require('../WalletGroupContext/WalletGroupContext.cjs');
 var IpConfigurationContext = require('../IpConfigurationContext/IpConfigurationContext.cjs');
 var PasskeyContext = require('../PasskeyContext/PasskeyContext.cjs');
 var SyncAuthFlow = require('../../components/SyncAuthFlow/SyncAuthFlow.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

@@ -64,6 +64,7 @@ import { useWalletConnectorNetwork } from '../../utils/hooks/useWalletConnectorN
 import { useSetWalletConnectorFetchers } from '../../utils/hooks/useSetWalletConnectorFetchers/useSetWalletConnectorFetchers.js';
 import { useSendDynamicProps } from '../../utils/hooks/useSendDynamicProps/useSendDynamicProps.js';
 import { MfaSettingsContextProvider } from '../MfaSettingsContext/MfaSettingsContext.js';
+import { WalletGroupContextProvider } from '../WalletGroupContext/WalletGroupContext.js';
 import '../../components/ShadowDOM/ShadowDOM.js';
 import '../../components/IconButton/IconButton.js';
 import '../../components/InlineWidget/InlineWidget.js';
@@ -85,7 +86,6 @@ import { SocialRedirectContextProvider } from '../SocialRedirectContext/SocialRe
 import '../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
 import '@hcaptcha/react-hcaptcha';
 import '../FooterAnimationContext/index.js';
-import { WalletGroupContextProvider } from '../WalletGroupContext/WalletGroupContext.js';
 import { IpConfigurationContextProvider } from '../IpConfigurationContext/IpConfigurationContext.js';
 import { PasskeyContextProvider } from '../PasskeyContext/PasskeyContext.js';
 import { SyncAuthFlow } from '../../components/SyncAuthFlow/SyncAuthFlow.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/CreatePasswordModal/CreatePasswordModal.cjs

@@ -50,6 +50,7 @@ require('../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('@dynamic-labs/rpc-providers');
 require('react-i18next');
 require('../../context/MfaSettingsContext/MfaSettingsContext.cjs');
+require('../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../../components/ShadowDOM/ShadowDOM.cjs');
 require('../../components/IconButton/IconButton.cjs');
 require('../../components/InlineWidget/InlineWidget.cjs');
@@ -71,7 +72,6 @@ require('../../context/SocialRedirectContext/SocialRedirectContext.cjs');
 require('../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
 require('@hcaptcha/react-hcaptcha');
 require('../../context/FooterAnimationContext/index.cjs');
-require('../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../../context/IpConfigurationContext/IpConfigurationContext.cjs');
 require('../../context/PasskeyContext/PasskeyContext.cjs');
 require('../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');

package/src/lib/modals/CreatePasswordModal/CreatePasswordModal.js

@@ -46,6 +46,7 @@ import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '@dynamic-labs/rpc-providers';
 import 'react-i18next';
 import '../../context/MfaSettingsContext/MfaSettingsContext.js';
+import '../../context/WalletGroupContext/WalletGroupContext.js';
 import '../../components/ShadowDOM/ShadowDOM.js';
 import '../../components/IconButton/IconButton.js';
 import '../../components/InlineWidget/InlineWidget.js';
@@ -67,7 +68,6 @@ import '../../context/SocialRedirectContext/SocialRedirectContext.js';
 import '../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
 import '@hcaptcha/react-hcaptcha';
 import '../../context/FooterAnimationContext/index.js';
-import '../../context/WalletGroupContext/WalletGroupContext.js';
 import '../../context/IpConfigurationContext/IpConfigurationContext.js';
 import '../../context/PasskeyContext/PasskeyContext.js';
 import '../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';

package/src/lib/modals/EnterPasswordModal/EnterPasswordModal.cjs

@@ -47,6 +47,7 @@ require('../../context/FieldsStateContext/FieldsStateContext.cjs');
 require('../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('@dynamic-labs/rpc-providers');
 require('../../context/MfaSettingsContext/MfaSettingsContext.cjs');
+require('../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../../components/Accordion/components/AccordionItem/AccordionItem.cjs');
 require('../../components/Alert/Alert.cjs');
 require('../../components/ShadowDOM/ShadowDOM.cjs');
@@ -70,7 +71,6 @@ require('../../context/SocialRedirectContext/SocialRedirectContext.cjs');
 require('../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
 require('@hcaptcha/react-hcaptcha');
 require('../../context/FooterAnimationContext/index.cjs');
-require('../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../../context/IpConfigurationContext/IpConfigurationContext.cjs');
 require('../../context/PasskeyContext/PasskeyContext.cjs');
 var useConfirmationPortal = require('../../utils/hooks/useConfirmationPortal/useConfirmationPortal.cjs');

package/src/lib/modals/EnterPasswordModal/EnterPasswordModal.js

@@ -43,6 +43,7 @@ import '../../context/FieldsStateContext/FieldsStateContext.js';
 import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '@dynamic-labs/rpc-providers';
 import '../../context/MfaSettingsContext/MfaSettingsContext.js';
+import '../../context/WalletGroupContext/WalletGroupContext.js';
 import '../../components/Accordion/components/AccordionItem/AccordionItem.js';
 import '../../components/Alert/Alert.js';
 import '../../components/ShadowDOM/ShadowDOM.js';
@@ -66,7 +67,6 @@ import '../../context/SocialRedirectContext/SocialRedirectContext.js';
 import '../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
 import '@hcaptcha/react-hcaptcha';
 import '../../context/FooterAnimationContext/index.js';
-import '../../context/WalletGroupContext/WalletGroupContext.js';
 import '../../context/IpConfigurationContext/IpConfigurationContext.js';
 import '../../context/PasskeyContext/PasskeyContext.js';
 import { useConfirmationPortal } from '../../utils/hooks/useConfirmationPortal/useConfirmationPortal.js';

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/SyncWalletPromptModal/SyncWalletPromptModal.cjs

@@ -46,6 +46,7 @@ require('../../context/FieldsStateContext/FieldsStateContext.cjs');
 require('../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('@dynamic-labs/rpc-providers');
 require('../../context/MfaSettingsContext/MfaSettingsContext.cjs');
+require('../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../../components/Accordion/components/AccordionItem/AccordionItem.cjs');
 require('../../components/Alert/Alert.cjs');
 require('../../components/ShadowDOM/ShadowDOM.cjs');
@@ -69,7 +70,6 @@ require('../../context/SocialRedirectContext/SocialRedirectContext.cjs');
 require('../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
 require('@hcaptcha/react-hcaptcha');
 require('../../context/FooterAnimationContext/index.cjs');
-require('../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../../context/IpConfigurationContext/IpConfigurationContext.cjs');
 require('../../context/PasskeyContext/PasskeyContext.cjs');
 var useConfirmationPortal = require('../../utils/hooks/useConfirmationPortal/useConfirmationPortal.cjs');

package/src/lib/modals/SyncWalletPromptModal/SyncWalletPromptModal.js

@@ -42,6 +42,7 @@ import '../../context/FieldsStateContext/FieldsStateContext.js';
 import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '@dynamic-labs/rpc-providers';
 import '../../context/MfaSettingsContext/MfaSettingsContext.js';
+import '../../context/WalletGroupContext/WalletGroupContext.js';
 import '../../components/Accordion/components/AccordionItem/AccordionItem.js';
 import '../../components/Alert/Alert.js';
 import '../../components/ShadowDOM/ShadowDOM.js';
@@ -65,7 +66,6 @@ import '../../context/SocialRedirectContext/SocialRedirectContext.js';
 import '../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
 import '@hcaptcha/react-hcaptcha';
 import '../../context/FooterAnimationContext/index.js';
-import '../../context/WalletGroupContext/WalletGroupContext.js';
 import '../../context/IpConfigurationContext/IpConfigurationContext.js';
 import '../../context/PasskeyContext/PasskeyContext.js';
 import { useConfirmationPortal } from '../../utils/hooks/useConfirmationPortal/useConfirmationPortal.js';

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

@@ -60,3 +60,4 @@ export { useSyncEmbeddedWalletFlow } from './useSyncEmbeddedWalletFlow';
 export { useSyncOnboardingFlow } from './useSyncOnboardingFlow';
 export { useExternalAuth } from './useExternalAuth';
 export { useRefreshUser } from './useRefreshUser';
+export { useSelectWalletOption } from './useSelectWalletOption';

package/src/lib/utils/hooks/useSelectWalletOption/index.d.ts

@@ -0,0 +1 @@
+export { useSelectWalletOption } from './useSelectWalletOption';

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

@@ -0,0 +1,128 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../../_virtual/_tslib.cjs');
+var walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
+var walletBook = require('@dynamic-labs/wallet-book');
+var utils = require('@dynamic-labs/utils');
+require('react');
+require('../../../context/DynamicContext/DynamicContext.cjs');
+require('@dynamic-labs/sdk-api-core');
+require('../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('react/jsx-runtime');
+var ViewContext = require('../../../context/ViewContext/ViewContext.cjs');
+require('../../constants/colors.cjs');
+require('../../constants/values.cjs');
+require('../../../shared/utils/classes/storage/localStorage.cjs');
+require('../../../shared/utils/classes/storage/sessionStorage.cjs');
+var isWalletGroup = require('../../functions/walletListBuilder/utils/isWalletGroup/isWalletGroup.cjs');
+require('../../../shared/consts/index.cjs');
+require('../../../events/dynamicEvents.cjs');
+require('../../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../../context/ErrorContext/ErrorContext.cjs');
+require('@dynamic-labs/multi-wallet');
+require('react-international-phone');
+require('../../../config/ApiEndpoint.cjs');
+require('@dynamic-labs/store');
+require('../../../locale/locale.cjs');
+var logVerboseTroubleshootingMessage = require('../../functions/logVerboseTroubleshootingMessage/logVerboseTroubleshootingMessage.cjs');
+require('../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../../context/AccountExistsContext/AccountExistsContext.cjs');
+require('../../../context/UserWalletsContext/UserWalletsContext.cjs');
+require('../../../context/VerificationContext/VerificationContext.cjs');
+require('react-dom');
+require('../../../context/WalletContext/WalletContext.cjs');
+require('../../../context/ThemeContext/ThemeContext.cjs');
+require('../useUserUpdateRequest/useUpdateUser/userFieldsSchema.cjs');
+require('@dynamic-labs/types');
+require('../../../context/LoadingContext/LoadingContext.cjs');
+require('yup');
+require('../../../context/MockContext/MockContext.cjs');
+require('../../../views/CollectUserDataView/useFields.cjs');
+require('../../../context/FieldsStateContext/FieldsStateContext.cjs');
+require('../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
+require('@dynamic-labs/rpc-providers');
+var useWalletItemActions = require('../useWalletItemActions/useWalletItemActions.cjs');
+require('react-i18next');
+require('../../../components/Accordion/components/AccordionItem/AccordionItem.cjs');
+require('../../../components/Alert/Alert.cjs');
+require('../../../components/ShadowDOM/ShadowDOM.cjs');
+require('../../../components/IconButton/IconButton.cjs');
+require('../../../components/InlineWidget/InlineWidget.cjs');
+require('../../../components/Input/Input.cjs');
+require('../../../components/IsBrowser/IsBrowser.cjs');
+require('../../../components/MenuList/Dropdown/Dropdown.cjs');
+require('../../../components/Transition/ZoomTransition/ZoomTransition.cjs');
+require('../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
+require('../../../components/OverlayCard/OverlayCardTarget/OverlayCardTarget.cjs');
+require('../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
+require('../../../components/Popper/Popper/Popper.cjs');
+require('../../../components/Popper/PopperContext/PopperContext.cjs');
+require('react-focus-lock');
+require('qrcode');
+require('formik');
+require('../../../views/WalletList/WalletList.cjs');
+require('../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
+require('../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
+require('@hcaptcha/react-hcaptcha');
+require('../../../context/FooterAnimationContext/index.cjs');
+var WalletGroupContext = require('../../../context/WalletGroupContext/WalletGroupContext.cjs');
+var groupWalletOptions = require('../../functions/walletListBuilder/utils/groupWalletOptions/groupWalletOptions.cjs');
+require('../../../context/MfaSettingsContext/MfaSettingsContext.cjs');
+require('../../../context/IpConfigurationContext/IpConfigurationContext.cjs');
+require('../../../context/PasskeyContext/PasskeyContext.cjs');
+require('../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
+require('../../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
+require('../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
+require('../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
+require('../../../../polyfills.cjs');
+require('../../../context/ErrorBoundary/ErrorBoundaryBase.cjs');
+require('../../../context/ErrorBoundary/ErrorBoundaryContext.cjs');
+require('../../../widgets/DynamicBridgeWidget/context/DynamicBridgeWidgetContext/DynamicBridgeWidgetContext.cjs');
+require('../../../widgets/DynamicWidget/components/DynamicWidgetCard/DynamicWidgetCard.cjs');
+require('../../../context/WidgetRegistry/WidgetRegistryContextProvider.cjs');
+require('../../../context/FundingContext/FundingContext.cjs');
+require('../../../context/SendBalanceContext/SendBalanceContext.cjs');
+require('../../../context/ConnectWithOtpContext/ConnectWithOtpContext.cjs');
+require('../../../context/ConnectWithOtpContext/constants.cjs');
+require('../../../context/ReinitializeContext/ReinitializeContextProvider.cjs');
+var useInternalDynamicContext = require('../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.cjs');
+
+const useSelectWalletOption = () => {
+    const { walletConnectorOptions, setShowAuthFlow } = useInternalDynamicContext.useInternalDynamicContext();
+    const { walletBook: walletBook$1 } = walletBook.useWalletBookContext();
+    const { setView } = ViewContext.useViewContext();
+    const { navigateToWalletGroup } = WalletGroupContext.useWalletGroupContext();
+    const { handleWalletItemClick } = useWalletItemActions.useWalletItemActions();
+    const selectWalletOption = (walletKey) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        const group = groupWalletOptions.groupWalletOptions(walletBook$1, walletConnectorOptions);
+        const walletOption = group.find((wallet) => wallet.key === walletKey);
+        logVerboseTroubleshootingMessage.logVerboseTroubleshootingMessage('[useSelectWalletOption] selectWalletOption', { walletKey, walletOption: walletOption === null || walletOption === void 0 ? void 0 : walletOption.key });
+        if (!walletOption) {
+            throw new utils.DynamicError('Invalid wallet option key provided.');
+        }
+        if (isWalletGroup.isWalletGroup(walletOption)) {
+            navigateToWalletGroup(walletOption);
+        }
+        else if (walletConnectorCore.isHardwareWalletConnector(walletOption.walletConnector) &&
+            walletOption.walletConnector.canConnectWithHardwareWallet()) {
+            setView('select-hardware-wallet', {
+                onSelectWallet: handleWalletItemClick,
+                wallet: walletOption,
+            });
+        }
+        else {
+            handleWalletItemClick(walletOption);
+        }
+        setShowAuthFlow(true);
+    });
+    return {
+        selectWalletOption,
+    };
+};
+
+exports.useSelectWalletOption = useSelectWalletOption;

package/src/lib/utils/hooks/useSelectWalletOption/useSelectWalletOption.d.ts

@@ -0,0 +1,3 @@
+export declare const useSelectWalletOption: () => {
+    selectWalletOption: (walletKey: string) => Promise<void>;
+};

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

@@ -0,0 +1,124 @@
+'use client'
+import { __awaiter } from '../../../../../_virtual/_tslib.js';
+import { isHardwareWalletConnector } from '@dynamic-labs/wallet-connector-core';
+import { useWalletBookContext } from '@dynamic-labs/wallet-book';
+import { DynamicError } from '@dynamic-labs/utils';
+import 'react';
+import '../../../context/DynamicContext/DynamicContext.js';
+import '@dynamic-labs/sdk-api-core';
+import '../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import 'react/jsx-runtime';
+import { useViewContext } from '../../../context/ViewContext/ViewContext.js';
+import '../../constants/colors.js';
+import '../../constants/values.js';
+import '../../../shared/utils/classes/storage/localStorage.js';
+import '../../../shared/utils/classes/storage/sessionStorage.js';
+import { isWalletGroup } from '../../functions/walletListBuilder/utils/isWalletGroup/isWalletGroup.js';
+import '../../../shared/consts/index.js';
+import '../../../events/dynamicEvents.js';
+import '../../../context/CaptchaContext/CaptchaContext.js';
+import '../../../context/ErrorContext/ErrorContext.js';
+import '@dynamic-labs/multi-wallet';
+import 'react-international-phone';
+import '../../../config/ApiEndpoint.js';
+import '@dynamic-labs/store';
+import '../../../locale/locale.js';
+import { logVerboseTroubleshootingMessage } from '../../functions/logVerboseTroubleshootingMessage/logVerboseTroubleshootingMessage.js';
+import '../../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../../context/AccountExistsContext/AccountExistsContext.js';
+import '../../../context/UserWalletsContext/UserWalletsContext.js';
+import '../../../context/VerificationContext/VerificationContext.js';
+import 'react-dom';
+import '../../../context/WalletContext/WalletContext.js';
+import '../../../context/ThemeContext/ThemeContext.js';
+import '../useUserUpdateRequest/useUpdateUser/userFieldsSchema.js';
+import '@dynamic-labs/types';
+import '../../../context/LoadingContext/LoadingContext.js';
+import 'yup';
+import '../../../context/MockContext/MockContext.js';
+import '../../../views/CollectUserDataView/useFields.js';
+import '../../../context/FieldsStateContext/FieldsStateContext.js';
+import '../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
+import '@dynamic-labs/rpc-providers';
+import { useWalletItemActions } from '../useWalletItemActions/useWalletItemActions.js';
+import 'react-i18next';
+import '../../../components/Accordion/components/AccordionItem/AccordionItem.js';
+import '../../../components/Alert/Alert.js';
+import '../../../components/ShadowDOM/ShadowDOM.js';
+import '../../../components/IconButton/IconButton.js';
+import '../../../components/InlineWidget/InlineWidget.js';
+import '../../../components/Input/Input.js';
+import '../../../components/IsBrowser/IsBrowser.js';
+import '../../../components/MenuList/Dropdown/Dropdown.js';
+import '../../../components/Transition/ZoomTransition/ZoomTransition.js';
+import '../../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../../../components/Transition/OpacityTransition/OpacityTransition.js';
+import '../../../components/OverlayCard/OverlayCardTarget/OverlayCardTarget.js';
+import '../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
+import '../../../components/Popper/Popper/Popper.js';
+import '../../../components/Popper/PopperContext/PopperContext.js';
+import 'react-focus-lock';
+import 'qrcode';
+import 'formik';
+import '../../../views/WalletList/WalletList.js';
+import '../../../context/SocialRedirectContext/SocialRedirectContext.js';
+import '../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
+import '@hcaptcha/react-hcaptcha';
+import '../../../context/FooterAnimationContext/index.js';
+import { useWalletGroupContext } from '../../../context/WalletGroupContext/WalletGroupContext.js';
+import { groupWalletOptions } from '../../functions/walletListBuilder/utils/groupWalletOptions/groupWalletOptions.js';
+import '../../../context/MfaSettingsContext/MfaSettingsContext.js';
+import '../../../context/IpConfigurationContext/IpConfigurationContext.js';
+import '../../../context/PasskeyContext/PasskeyContext.js';
+import '../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
+import '../../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
+import '../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.js';
+import '../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
+import '../../../../polyfills.js';
+import '../../../context/ErrorBoundary/ErrorBoundaryBase.js';
+import '../../../context/ErrorBoundary/ErrorBoundaryContext.js';
+import '../../../widgets/DynamicBridgeWidget/context/DynamicBridgeWidgetContext/DynamicBridgeWidgetContext.js';
+import '../../../widgets/DynamicWidget/components/DynamicWidgetCard/DynamicWidgetCard.js';
+import '../../../context/WidgetRegistry/WidgetRegistryContextProvider.js';
+import '../../../context/FundingContext/FundingContext.js';
+import '../../../context/SendBalanceContext/SendBalanceContext.js';
+import '../../../context/ConnectWithOtpContext/ConnectWithOtpContext.js';
+import '../../../context/ConnectWithOtpContext/constants.js';
+import '../../../context/ReinitializeContext/ReinitializeContextProvider.js';
+import { useInternalDynamicContext } from '../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.js';
+
+const useSelectWalletOption = () => {
+    const { walletConnectorOptions, setShowAuthFlow } = useInternalDynamicContext();
+    const { walletBook } = useWalletBookContext();
+    const { setView } = useViewContext();
+    const { navigateToWalletGroup } = useWalletGroupContext();
+    const { handleWalletItemClick } = useWalletItemActions();
+    const selectWalletOption = (walletKey) => __awaiter(void 0, void 0, void 0, function* () {
+        const group = groupWalletOptions(walletBook, walletConnectorOptions);
+        const walletOption = group.find((wallet) => wallet.key === walletKey);
+        logVerboseTroubleshootingMessage('[useSelectWalletOption] selectWalletOption', { walletKey, walletOption: walletOption === null || walletOption === void 0 ? void 0 : walletOption.key });
+        if (!walletOption) {
+            throw new DynamicError('Invalid wallet option key provided.');
+        }
+        if (isWalletGroup(walletOption)) {
+            navigateToWalletGroup(walletOption);
+        }
+        else if (isHardwareWalletConnector(walletOption.walletConnector) &&
+            walletOption.walletConnector.canConnectWithHardwareWallet()) {
+            setView('select-hardware-wallet', {
+                onSelectWallet: handleWalletItemClick,
+                wallet: walletOption,
+            });
+        }
+        else {
+            handleWalletItemClick(walletOption);
+        }
+        setShowAuthFlow(true);
+    });
+    return {
+        selectWalletOption,
+    };
+};
+
+export { useSelectWalletOption };

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

@@ -47,6 +47,7 @@ require('../../../context/FieldsStateContext/FieldsStateContext.cjs');
 require('../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('@dynamic-labs/rpc-providers');
 require('../../../context/MfaSettingsContext/MfaSettingsContext.cjs');
+require('../../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('react-dom');
 require('../../../components/ShadowDOM/ShadowDOM.cjs');
 require('../../../components/IconButton/IconButton.cjs');
@@ -69,7 +70,6 @@ require('../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
 require('../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
 require('@hcaptcha/react-hcaptcha');
 require('../../../context/FooterAnimationContext/index.cjs');
-require('../../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../../../context/IpConfigurationContext/IpConfigurationContext.cjs');
 require('../../../context/PasskeyContext/PasskeyContext.cjs');
 var CreatePasswordModal = require('../../../modals/CreatePasswordModal/CreatePasswordModal.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

@@ -43,6 +43,7 @@ import '../../../context/FieldsStateContext/FieldsStateContext.js';
 import '../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '@dynamic-labs/rpc-providers';
 import '../../../context/MfaSettingsContext/MfaSettingsContext.js';
+import '../../../context/WalletGroupContext/WalletGroupContext.js';
 import 'react-dom';
 import '../../../components/ShadowDOM/ShadowDOM.js';
 import '../../../components/IconButton/IconButton.js';
@@ -65,7 +66,6 @@ import '../../../context/SocialRedirectContext/SocialRedirectContext.js';
 import '../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
 import '@hcaptcha/react-hcaptcha';
 import '../../../context/FooterAnimationContext/index.js';
-import '../../../context/WalletGroupContext/WalletGroupContext.js';
 import '../../../context/IpConfigurationContext/IpConfigurationContext.js';
 import '../../../context/PasskeyContext/PasskeyContext.js';
 import { CreatePasswordModal } from '../../../modals/CreatePasswordModal/CreatePasswordModal.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