@dynamic-labs/sdk-react-core 3.0.0-alpha.4 → 3.0.0-alpha.40

package/src/lib/components/TransactionCard/TransactionCard.js

@@ -0,0 +1,37 @@
+'use client'
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { WalletIcon } from '@dynamic-labs/wallet-book';
+import '@dynamic-labs/sdk-api-core';
+import '../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import '../../context/ViewContext/ViewContext.js';
+import 'react';
+import { ReactComponent as SvgTooltip } from '../../shared/assets/tooltip.js';
+import { shortenWalletAddress } from '../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.js';
+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 '@dynamic-labs/utils';
+import '../../shared/consts/index.js';
+import { Icon } from '../Icon/Icon.js';
+import { Typography } from '../Typography/Typography.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
+import { getIconUrl } from '../SendBalancePageLayout/utils.js';
+
+const TransactionCard = ({ transaction, currentToken, currencySymbol, chainName, valueRounded, showFiat, transactionValue, fiatValue, getDisplayFiatPrice, isGasSponsored, gasFiatValue, totalGasFiatValue, currency, total, t, walletKey, }) => {
+    const currentChainName = chainName || 'eth';
+    return (jsxs("div", { className: 'transaction-card', children: [jsxs("div", { className: 'transaction-card__header', children: [jsxs("div", { className: 'transaction-card__icon', children: [jsxs("div", { className: 'transaction-card__icon__container', children: [jsx("img", { src: (currentToken === null || currentToken === void 0 ? void 0 : currentToken.logoURI) || getIconUrl(currentChainName), alt: currencySymbol, width: 25, height: 25 }), jsx("img", { className: 'transaction-card__icon__container__network', src: getIconUrl(currentChainName), alt: currencySymbol, width: 25, height: 25 })] }), jsx(Typography, { variant: 'body_normal', color: 'primary', children: currencySymbol })] }), jsxs("div", { children: [jsxs("div", { className: 'transaction-card__info', children: [jsx(Typography, { variant: 'body_normal', color: 'secondary', children: currencySymbol }), jsx(Typography, { variant: 'body_normal', color: 'primary', children: valueRounded ||
+                                            ((transaction === null || transaction === void 0 ? void 0 : transaction.value)
+                                                ? transaction.format(transaction.value, { precision: 6 })
+                                                : '') })] }), showFiat && transactionValue && (jsxs("div", { className: 'transaction-card__info', children: [jsx(Typography, { variant: 'body_small', color: 'secondary', children: "$" }), jsx(Typography, { variant: 'body_small', color: 'primary', children: getDisplayFiatPrice() })] }))] })] }), jsx("div", { className: 'transaction-card__arrow', children: jsx("span", { children: "\u2193" }) }), jsxs("div", { className: 'transaction-card__destination', children: [jsxs("div", { className: 'transaction-card__icon__container', children: [jsx(Icon, { size: 'medium', children: jsx(WalletIcon, { walletKey: walletKey, width: 25, height: 25 }) }), jsx("img", { className: 'transaction-card__icon__container__network', src: getIconUrl(currentChainName), alt: currencySymbol, width: 30, height: 30 })] }), jsx(Typography, { variant: 'body_normal', color: 'primary', className: 'transaction-card__wallet-address', children: shortenWalletAddress(transaction.to, 4, 4) })] }), !isGasSponsored && (jsxs("div", { className: 'transaction-card__total', children: [jsxs("div", { className: 'row', "data-testid": 'transaction-estimated-gas-fee', children: [jsx("div", { children: jsxs(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', className: 'flex-row gap-native', children: [t('dyn_send_transaction.confirmation.data.gas_estimate'), jsx(Tooltip, { content: t('dyn_send_transaction.confirmation.data.gas_tooltip'), copykey: t('dyn_send_transaction.confirmation.data.gas_tooltip'), className: 'transaction-confirmation', children: jsx(Icon, { size: 'small', className: 'fee-tooltip', children: jsx(SvgTooltip, {}) }) })] }) }), showFiat && (currentToken === null || currentToken === void 0 ? void 0 : currentToken.price) ? (jsxs("div", { className: 'flex-row', children: [jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: "~ $" }), jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'primary', children: Number(gasFiatValue) <= 0.01 ? '<0.01' : gasFiatValue })] })) : (jsxs("div", { className: 'flex-row gap-native', children: [jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'primary', children: transaction.fee.gas
+                                            ? transaction.format(transaction.fee.gas, { precision: 6 })
+                                            : '--' }), jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: currency })] }))] }), (currentToken === null || currentToken === void 0 ? void 0 : currentToken.price) && (jsxs("div", { className: 'row', "data-testid": 'transaction-total', children: [jsx("div", { children: jsx(Typography, { variant: 'body_normal', weight: 'bold', color: 'primary', children: t('dyn_send_transaction.confirmation.data.total') }) }), !showFiat ? (jsxs("div", { className: 'flex-row gap-native', children: [jsx(Typography, { variant: 'body_normal', weight: 'bold', color: 'primary', children: total
+                                            ? transaction.format(total, { precision: 6 })
+                                            : t('dyn_send_transaction.confirmation.not_applied') }), jsx(Typography, { variant: 'body_normal', weight: 'bold', color: 'primary', children: currency })] })) : (jsxs("div", { className: 'flex-row', children: [jsx(Typography, { variant: 'body_normal', color: 'primary', children: "~ $" }), jsx(Typography, { variant: 'body_normal', color: 'primary', children: Number(totalGasFiatValue) <= 0.01
+                                            ? '<0.01'
+                                            : totalGasFiatValue })] }))] }))] }))] }));
+};
+
+export { TransactionCard };

package/src/lib/components/TransactionCard/index.d.ts

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

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

@@ -3,28 +3,28 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _tslib = require('../../../../_virtual/_tslib.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 var reactI18next = require('react-i18next');
-var walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
 var ModalHeader = require('../ModalHeader/ModalHeader.cjs');
-var IconWithSpinner = require('../IconWithSpinner/IconWithSpinner.cjs');
-var Icon = require('../Icon/Icon.cjs');
 require('@dynamic-labs/sdk-api-core');
 require('../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
 var ViewContext = require('../../context/ViewContext/ViewContext.cjs');
 require('react');
 var chevronLeft = require('../../shared/assets/chevron-left.cjs');
 var close = require('../../shared/assets/close.cjs');
-var signCircle = require('../../shared/assets/sign-circle.cjs');
+var send = require('../../shared/assets/send.cjs');
 require('@dynamic-labs/wallet-book');
 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 usingSessionKeys = require('../../shared/utils/functions/usingSessionKeys/usingSessionKeys.cjs');
 require('@dynamic-labs/utils');
 require('../../shared/consts/index.cjs');
+var fiatUtils = require('../../utils/functions/fiatUtils/fiatUtils.cjs');
+var Icon = require('../Icon/Icon.cjs');
 var IconButton = require('../IconButton/IconButton.cjs');
 var Typography = require('../Typography/Typography.cjs');
 var AnimatePresence = require('../AnimatePresence/AnimatePresence.cjs');
@@ -32,14 +32,13 @@ require('../Transition/ZoomTransition/ZoomTransition.cjs');
 require('../Transition/SlideInUpTransition/SlideInUpTransition.cjs');
 require('../Transition/OpacityTransition/OpacityTransition.cjs');
 var VerticalDrawerTransition = require('../Transition/VerticalDrawerTransition/VerticalDrawerTransition.cjs');
-var Alert = require('../Alert/Alert.cjs');
-var AppOriginTile = require('../AppOriginTile/AppOriginTile.cjs');
 var TypographyButton = require('../TypographyButton/TypographyButton.cjs');
 var PoweredByDynamic = require('../PoweredByDynamic/PoweredByDynamic.cjs');
 var useIsTurnkeyWallet = require('../../utils/hooks/useIsTurnkeyWallet/useIsTurnkeyWallet.cjs');
 var PasskeyCreatedSuccessBanner = require('../PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
 require('../../context/DynamicContext/DynamicContext.cjs');
-var dynamicEvents = require('../../events/dynamicEvents.cjs');
+require('../../events/dynamicEvents.cjs');
+require('../../../../_virtual/_tslib.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../context/ErrorContext/ErrorContext.cjs');
 require('@dynamic-labs/multi-wallet');
@@ -47,17 +46,16 @@ require('react-international-phone');
 require('../../config/ApiEndpoint.cjs');
 require('@dynamic-labs/store');
 require('../../locale/locale.cjs');
-require('viem');
-require('viem/chains');
 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');
+var usePasskeyRecovery = require('../../utils/hooks/usePasskeyRecovery/usePasskeyRecovery.cjs');
+require('../../utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.cjs');
 require('../../context/ThemeContext/ThemeContext.cjs');
 require('../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.cjs');
-var usePasskeyRecovery = require('../../utils/hooks/usePasskeyRecovery/usePasskeyRecovery.cjs');
 require('@dynamic-labs/types');
 require('../../context/LoadingContext/LoadingContext.cjs');
 require('yup');
@@ -67,6 +65,7 @@ require('../../context/FieldsStateContext/FieldsStateContext.cjs');
 require('../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('@dynamic-labs/rpc-providers');
 require('../Accordion/components/AccordionItem/AccordionItem.cjs');
+require('../Alert/Alert.cjs');
 require('../ShadowDOM/ShadowDOM.cjs');
 require('../InlineWidget/InlineWidget.cjs');
 require('../Input/Input.cjs');
@@ -77,6 +76,7 @@ require('../Popper/Popper/Popper.cjs');
 require('../Popper/PopperContext/PopperContext.cjs');
 require('react-focus-lock');
 require('qrcode');
+var useFetchCurrency = require('../../widgets/DynamicWidget/hooks/useFetchCurrency/useFetchCurrency.cjs');
 require('formik');
 require('../../views/WalletList/WalletList.cjs');
 require('../../context/SocialRedirectContext/SocialRedirectContext.cjs');
@@ -84,48 +84,54 @@ require('../../widgets/DynamicBridgeWidget/views/WalletsView/components/Secondar
 require('@hcaptcha/react-hcaptcha');
 require('../../context/FooterAnimationContext/index.cjs');
 require('../../context/WalletGroupContext/WalletGroupContext.cjs');
-require('../../context/MfaSettingsContext/MfaSettingsContext.cjs');
 require('../../context/IpConfigurationContext/IpConfigurationContext.cjs');
 var PasskeyContext = require('../../context/PasskeyContext/PasskeyContext.cjs');
+require('@dynamic-labs/viem-utils');
+var utils = require('./utils.cjs');
+var TransactionCard = require('../TransactionCard/TransactionCard.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 TransactionConfirmationPageLayout = ({ onClickClose, isLoading, onClickBack, copykey, title, error, appOrigin, appLogoUrl, appName, onClickSend, disableSendButton, displayPoweredByDynamicFooter = false, alert, children, }) => {
+const TransactionConfirmationPageLayout = ({ onClickClose, isLoading, onClickBack, onClickSend, disableSendButton, displayPoweredByDynamicFooter = false, alert, walletConnector, transaction, currentToken, children, hideModal, onSuccess, transactionValue, isModal, total, isGasSponsored, chainName, isNativeToken, nativePrice, walletKey, }) => {
+    var _a;
     const { t } = reactI18next.useTranslation();
     const { isTurnkeyWallet } = useIsTurnkeyWallet.useIsTurnkeyWallet();
-    const { setShowAuthFlow, walletConnector } = useInternalDynamicContext.useInternalDynamicContext();
+    const { setShowAuthFlow, showFiat } = useInternalDynamicContext.useInternalDynamicContext();
     const { setView } = ViewContext.useViewContext();
     const { userNeedsCrossDomainPasskey } = PasskeyContext.usePasskeyContext();
     const { initPasskeyRecoveryProcess, shouldInitRecovery } = usePasskeyRecovery.usePasskeyRecovery();
+    const { currency } = useFetchCurrency.useFetchCurrency(walletConnector);
+    const fiatValue = utils.useFiatValue(transactionValue, currentToken);
+    const currencySymbol = utils.useCurrencySymbol(currentToken, currency);
+    utils.useHandleRecovery(hideModal || true, walletConnector, usingSessionKeys.usingSessionKey, onSuccess, shouldInitRecovery, initPasskeyRecoveryProcess);
+    const handleSubmitWithChecks = utils.useHandleSubmitWithChecks({
+        isTurnkeyWallet,
+        onClickSend,
+        userNeedsCrossDomainPasskey,
+        usingSessionKey: usingSessionKeys.usingSessionKey,
+        walletConnector,
+    }, { initPasskeyRecoveryProcess, shouldInitRecovery }, { setShowAuthFlow, setView });
     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* () {
-        if (walletConnectorCore.isSessionKeyCompatibleWalletConnector(walletConnector) ||
-            ((walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.key) === 'zerodev' &&
-                walletConnectorCore.isSessionKeyCompatibleWalletConnector(walletConnector.getEOAConnector()))) {
-            onClickSend(e);
-            return;
-        }
-        if (yield shouldInitRecovery()) {
-            yield initPasskeyRecoveryProcess('email', 'sendTransaction');
-        }
-        if (isTurnkeyWallet && userNeedsCrossDomainPasskey) {
-            setView('passkey-new-domain-detected');
-            setShowAuthFlow(true, {
-                ignoreIfIsEmbeddedWidget: false,
-                performMultiWalletChecks: false,
-            });
-            dynamicEvents.dynamicEvents.once('passkeyRecoveryCompleted', () => {
-                onClickSend(e);
-            });
-            return;
-        }
-        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' }))] })] }));
+    const gasFiatValue = fiatUtils.getGasFiatValue(currentToken, transaction, nativePrice);
+    const totalGasFiatValue = fiatUtils.getTotalFiatCost(currentToken, transaction, nativePrice, transactionValue);
+    return hideModal ? null : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { trailing: closeButton, leading: backButton, alignContent: 'bottom', children: jsxRuntime.jsx("div", { className: 'send-balance-page-layout__header-content', children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', copykey: 'dyn_send_transaction.data.confirmation_tx', children: t('dyn_send_transaction.data.confirmation_tx') }) }) }), jsxRuntime.jsx(PasskeyCreatedSuccessBanner.PasskeyCreatedSuccessBanner, {}), jsxRuntime.jsxs("div", { className: 'transaction-confirmation__body', children: [jsxRuntime.jsxs("div", { className: 'transaction-confirmation__content', children: [jsxRuntime.jsx(TransactionCard.TransactionCard, { transaction: transaction, currentToken: currentToken, currencySymbol: currencySymbol, chainName: chainName, valueRounded: (_a = utils.getValueRounded(Boolean(isNativeToken), transaction)) === null || _a === void 0 ? void 0 : _a.toString(), showFiat: showFiat, transactionValue: transactionValue, fiatValue: fiatValue, getDisplayFiatPrice: () => utils.getDisplayFiatPrice(fiatValue, currentToken), isGasSponsored: isGasSponsored, gasFiatValue: gasFiatValue || '0', totalGasFiatValue: totalGasFiatValue || '0', currency: currency, total: total, t: t, walletKey: walletKey }), 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: [(onClickBack || onClickClose) && (jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonVariant: 'primary', onClick: onClickBack || 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: 'brand-primary', buttonPadding: 'large', onClick: handleSubmitWithChecks, expanded: true, loading: isLoading, disabled: disableSendButton, copykey: 'dyn_send_transaction.confirmation.send', startSlot: 
+                                // eslint-disable-next-line react/jsx-wrap-multilines
+                                jsxRuntime.jsx(Icon.Icon, { size: 'small', color: 'text-secondary', children: jsxRuntime.jsx(send.ReactComponent, {}) }), dataTestId: 'transaction-confirmation-send', children: t('dyn_send_transaction.confirmation.send') })] }), displayPoweredByDynamicFooter && (jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'transaction-confirmation__footer' }))] })] }));
 };
 
 exports.TransactionConfirmationPageLayout = TransactionConfirmationPageLayout;

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

@@ -1,4 +1,7 @@
 import { FC, MouseEventHandler, PropsWithChildren, ReactNode } from 'react';
+import { WalletConnector } from '@dynamic-labs/wallet-connector-core';
+import { IUITransaction } from '@dynamic-labs/types';
+import { TokenBalance } from '@dynamic-labs/sdk-api-core';
 import { CopyKey } from '../../shared';
 type TransactionConfirmationPageLayoutProps = {
     appLogoUrl?: string;
@@ -11,8 +14,22 @@ type TransactionConfirmationPageLayoutProps = {
     onClickBack?: MouseEventHandler<HTMLButtonElement>;
     onClickClose?: MouseEventHandler<HTMLButtonElement>;
     onClickSend: MouseEventHandler<HTMLButtonElement>;
+    onSuccess: ((transactionResponse: string) => void) | undefined;
     title?: ReactNode;
     alert?: ReactNode;
+    hideModal?: boolean;
+    walletConnector?: WalletConnector;
+    transaction: IUITransaction;
+    total: bigint | undefined;
+    currentToken: TokenBalance | undefined;
+    transactionValue?: string;
+    isModal?: boolean;
+    isGasSponsored: boolean;
+    isGasSponsoredLoading: boolean;
+    chainName?: string;
+    isNativeToken?: boolean;
+    nativePrice: number;
+    walletKey: string;
 } & CopyKey;
 export declare const TransactionConfirmationPageLayout: FC<PropsWithChildren<TransactionConfirmationPageLayoutProps>>;
 export {};

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

@@ -1,26 +1,26 @@
 'use client'
-import { __awaiter } from '../../../../_virtual/_tslib.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useTranslation } from 'react-i18next';
-import { isSessionKeyCompatibleWalletConnector } from '@dynamic-labs/wallet-connector-core';
 import { ModalHeader } from '../ModalHeader/ModalHeader.js';
-import { IconWithSpinner } from '../IconWithSpinner/IconWithSpinner.js';
-import { Icon } from '../Icon/Icon.js';
 import '@dynamic-labs/sdk-api-core';
 import '../../shared/logger.js';
 import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
 import { useViewContext } from '../../context/ViewContext/ViewContext.js';
 import 'react';
 import { ReactComponent as SvgChevronLeft } from '../../shared/assets/chevron-left.js';
 import { ReactComponent as SvgClose } from '../../shared/assets/close.js';
-import { ReactComponent as SvgSignCircle } from '../../shared/assets/sign-circle.js';
+import { ReactComponent as SvgSend } from '../../shared/assets/send.js';
 import '@dynamic-labs/wallet-book';
 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 { usingSessionKey } from '../../shared/utils/functions/usingSessionKeys/usingSessionKeys.js';
 import '@dynamic-labs/utils';
 import '../../shared/consts/index.js';
+import { getGasFiatValue, getTotalFiatCost } from '../../utils/functions/fiatUtils/fiatUtils.js';
+import { Icon } from '../Icon/Icon.js';
 import { IconButton } from '../IconButton/IconButton.js';
 import { Typography } from '../Typography/Typography.js';
 import { AnimatePresence } from '../AnimatePresence/AnimatePresence.js';
@@ -28,14 +28,13 @@ import '../Transition/ZoomTransition/ZoomTransition.js';
 import '../Transition/SlideInUpTransition/SlideInUpTransition.js';
 import '../Transition/OpacityTransition/OpacityTransition.js';
 import { VerticalDrawerTransition } from '../Transition/VerticalDrawerTransition/VerticalDrawerTransition.js';
-import { Alert } from '../Alert/Alert.js';
-import { AppOriginTile } from '../AppOriginTile/AppOriginTile.js';
 import { TypographyButton } from '../TypographyButton/TypographyButton.js';
 import { PoweredByDynamic } from '../PoweredByDynamic/PoweredByDynamic.js';
 import { useIsTurnkeyWallet } from '../../utils/hooks/useIsTurnkeyWallet/useIsTurnkeyWallet.js';
 import { PasskeyCreatedSuccessBanner } from '../PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
 import '../../context/DynamicContext/DynamicContext.js';
-import { dynamicEvents } from '../../events/dynamicEvents.js';
+import '../../events/dynamicEvents.js';
+import '../../../../_virtual/_tslib.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
 import '../../context/ErrorContext/ErrorContext.js';
 import '@dynamic-labs/multi-wallet';
@@ -43,17 +42,16 @@ import 'react-international-phone';
 import '../../config/ApiEndpoint.js';
 import '@dynamic-labs/store';
 import '../../locale/locale.js';
-import 'viem';
-import 'viem/chains';
 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 { usePasskeyRecovery } from '../../utils/hooks/usePasskeyRecovery/usePasskeyRecovery.js';
+import '../../utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.js';
 import '../../context/ThemeContext/ThemeContext.js';
 import '../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.js';
-import { usePasskeyRecovery } from '../../utils/hooks/usePasskeyRecovery/usePasskeyRecovery.js';
 import '@dynamic-labs/types';
 import '../../context/LoadingContext/LoadingContext.js';
 import 'yup';
@@ -63,6 +61,7 @@ import '../../context/FieldsStateContext/FieldsStateContext.js';
 import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '@dynamic-labs/rpc-providers';
 import '../Accordion/components/AccordionItem/AccordionItem.js';
+import '../Alert/Alert.js';
 import '../ShadowDOM/ShadowDOM.js';
 import '../InlineWidget/InlineWidget.js';
 import '../Input/Input.js';
@@ -73,6 +72,7 @@ import '../Popper/Popper/Popper.js';
 import '../Popper/PopperContext/PopperContext.js';
 import 'react-focus-lock';
 import 'qrcode';
+import { useFetchCurrency } from '../../widgets/DynamicWidget/hooks/useFetchCurrency/useFetchCurrency.js';
 import 'formik';
 import '../../views/WalletList/WalletList.js';
 import '../../context/SocialRedirectContext/SocialRedirectContext.js';
@@ -80,48 +80,54 @@ import '../../widgets/DynamicBridgeWidget/views/WalletsView/components/Secondary
 import '@hcaptcha/react-hcaptcha';
 import '../../context/FooterAnimationContext/index.js';
 import '../../context/WalletGroupContext/WalletGroupContext.js';
-import '../../context/MfaSettingsContext/MfaSettingsContext.js';
 import '../../context/IpConfigurationContext/IpConfigurationContext.js';
 import { usePasskeyContext } from '../../context/PasskeyContext/PasskeyContext.js';
+import '@dynamic-labs/viem-utils';
+import { useFiatValue, useCurrencySymbol, useHandleRecovery, getValueRounded, getDisplayFiatPrice, useHandleSubmitWithChecks } from './utils.js';
+import { TransactionCard } from '../TransactionCard/TransactionCard.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 TransactionConfirmationPageLayout = ({ onClickClose, isLoading, onClickBack, copykey, title, error, appOrigin, appLogoUrl, appName, onClickSend, disableSendButton, displayPoweredByDynamicFooter = false, alert, children, }) => {
+const TransactionConfirmationPageLayout = ({ onClickClose, isLoading, onClickBack, onClickSend, disableSendButton, displayPoweredByDynamicFooter = false, alert, walletConnector, transaction, currentToken, children, hideModal, onSuccess, transactionValue, isModal, total, isGasSponsored, chainName, isNativeToken, nativePrice, walletKey, }) => {
+    var _a;
     const { t } = useTranslation();
     const { isTurnkeyWallet } = useIsTurnkeyWallet();
-    const { setShowAuthFlow, walletConnector } = useInternalDynamicContext();
+    const { setShowAuthFlow, showFiat } = useInternalDynamicContext();
     const { setView } = useViewContext();
     const { userNeedsCrossDomainPasskey } = usePasskeyContext();
     const { initPasskeyRecoveryProcess, shouldInitRecovery } = usePasskeyRecovery();
+    const { currency } = useFetchCurrency(walletConnector);
+    const fiatValue = useFiatValue(transactionValue, currentToken);
+    const currencySymbol = useCurrencySymbol(currentToken, currency);
+    useHandleRecovery(hideModal || true, walletConnector, usingSessionKey, onSuccess, shouldInitRecovery, initPasskeyRecoveryProcess);
+    const handleSubmitWithChecks = useHandleSubmitWithChecks({
+        isTurnkeyWallet,
+        onClickSend,
+        userNeedsCrossDomainPasskey,
+        usingSessionKey,
+        walletConnector,
+    }, { initPasskeyRecoveryProcess, shouldInitRecovery }, { setShowAuthFlow, setView });
     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* () {
-        if (isSessionKeyCompatibleWalletConnector(walletConnector) ||
-            ((walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.key) === 'zerodev' &&
-                isSessionKeyCompatibleWalletConnector(walletConnector.getEOAConnector()))) {
-            onClickSend(e);
-            return;
-        }
-        if (yield shouldInitRecovery()) {
-            yield initPasskeyRecoveryProcess('email', 'sendTransaction');
-        }
-        if (isTurnkeyWallet && userNeedsCrossDomainPasskey) {
-            setView('passkey-new-domain-detected');
-            setShowAuthFlow(true, {
-                ignoreIfIsEmbeddedWidget: false,
-                performMultiWalletChecks: false,
-            });
-            dynamicEvents.once('passkeyRecoveryCompleted', () => {
-                onClickSend(e);
-            });
-            return;
-        }
-        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' }))] })] }));
+    const gasFiatValue = getGasFiatValue(currentToken, transaction, nativePrice);
+    const totalGasFiatValue = getTotalFiatCost(currentToken, transaction, nativePrice, transactionValue);
+    return hideModal ? null : (jsxs(Fragment, { children: [jsx(ModalHeader, { trailing: closeButton, leading: backButton, alignContent: 'bottom', children: jsx("div", { className: 'send-balance-page-layout__header-content', children: jsx(Typography, { variant: 'body_normal', color: 'primary', copykey: 'dyn_send_transaction.data.confirmation_tx', children: t('dyn_send_transaction.data.confirmation_tx') }) }) }), jsx(PasskeyCreatedSuccessBanner, {}), jsxs("div", { className: 'transaction-confirmation__body', children: [jsxs("div", { className: 'transaction-confirmation__content', children: [jsx(TransactionCard, { transaction: transaction, currentToken: currentToken, currencySymbol: currencySymbol, chainName: chainName, valueRounded: (_a = getValueRounded(Boolean(isNativeToken), transaction)) === null || _a === void 0 ? void 0 : _a.toString(), showFiat: showFiat, transactionValue: transactionValue, fiatValue: fiatValue, getDisplayFiatPrice: () => getDisplayFiatPrice(fiatValue, currentToken), isGasSponsored: isGasSponsored, gasFiatValue: gasFiatValue || '0', totalGasFiatValue: totalGasFiatValue || '0', currency: currency, total: total, t: t, walletKey: walletKey }), 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: [(onClickBack || onClickClose) && (jsx(TypographyButton, { buttonVariant: 'primary', onClick: onClickBack || 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: 'brand-primary', buttonPadding: 'large', onClick: handleSubmitWithChecks, expanded: true, loading: isLoading, disabled: disableSendButton, copykey: 'dyn_send_transaction.confirmation.send', startSlot: 
+                                // eslint-disable-next-line react/jsx-wrap-multilines
+                                jsx(Icon, { size: 'small', color: 'text-secondary', children: jsx(SvgSend, {}) }), dataTestId: 'transaction-confirmation-send', children: t('dyn_send_transaction.confirmation.send') })] }), displayPoweredByDynamicFooter && (jsx(PoweredByDynamic, { classNameRoot: 'transaction-confirmation__footer' }))] })] }));
 };
 
 export { TransactionConfirmationPageLayout };

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

@@ -1,2 +1 @@
 export { TransactionConfirmationPageLayout } from './TransactionConfirmationPageLayout';
-export { TransactionRow } from './components';

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

@@ -0,0 +1,93 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../_virtual/_tslib.cjs');
+require('@dynamic-labs/sdk-api-core');
+require('../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+require('react/jsx-runtime');
+require('../../context/ViewContext/ViewContext.cjs');
+require('react');
+require('@dynamic-labs/wallet-book');
+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 roundToNthDecimal = require('../../utils/functions/roundToNthDecimal/roundToNthDecimal.cjs');
+var dynamicEvents = require('../../events/dynamicEvents.cjs');
+
+const useFiatValue = (transactionValue, currentToken) => {
+    if ((currentToken === null || currentToken === void 0 ? void 0 : currentToken.price) && transactionValue) {
+        return Number(transactionValue) * currentToken.price;
+    }
+    return 0;
+};
+const useCurrencySymbol = (currentToken, currency) => (currentToken === null || currentToken === void 0 ? void 0 : currentToken.symbol) || currency;
+const getValueRounded = (isNativeToken, transaction) => {
+    let value;
+    if (isNativeToken)
+        value = transaction.value ? transaction.format(transaction.value) : '0';
+    else {
+        value =
+            (transaction === null || transaction === void 0 ? void 0 : transaction.nonNativeValue) && (transaction === null || transaction === void 0 ? void 0 : transaction.formatNonNativeToken)
+                ? transaction.formatNonNativeToken(transaction.nonNativeValue, transaction.nonNativeDecimal || 18)
+                : '0';
+    }
+    return roundToNthDecimal.roundToNthDecimal(Number(value), 6);
+};
+const getDisplayFiatPrice = (fiatValue, currentToken) => {
+    const currentFiatValue = fiatValue === 0 || fiatValue >= 0.01 ? fiatValue.toFixed(2) : '<0.01';
+    return fiatValue < 0 || !(currentToken === null || currentToken === void 0 ? void 0 : currentToken.price) ? '--' : currentFiatValue;
+};
+const useHandleRecovery = (hideModal, walletConnector, usingSessionKey, onSuccess, shouldInitRecovery, initPasskeyRecoveryProcess) => {
+    const handleRecovery = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        if ((yield shouldInitRecovery()) &&
+            walletConnector &&
+            !usingSessionKey(walletConnector)) {
+            yield initPasskeyRecoveryProcess('email', 'sendTransaction'); // Ensure the parameters match the actual function signature
+            onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess('callHandlerOutsideModal');
+        }
+    });
+    useEffectOnce.useEffectOnce(() => {
+        if (hideModal) {
+            handleRecovery();
+        }
+    });
+};
+const useHandleSubmitWithChecks = (config, recoveryHandlers, viewHandlers) => (e) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+    const { walletConnector, usingSessionKey, onClickSend, isTurnkeyWallet, userNeedsCrossDomainPasskey, } = config;
+    const { shouldInitRecovery, initPasskeyRecoveryProcess } = recoveryHandlers;
+    const { setView, setShowAuthFlow } = viewHandlers;
+    if (walletConnector && usingSessionKey(walletConnector)) {
+        onClickSend(e);
+        return;
+    }
+    if (yield shouldInitRecovery()) {
+        yield initPasskeyRecoveryProcess('email', 'sendTransaction');
+    }
+    if (isTurnkeyWallet && userNeedsCrossDomainPasskey) {
+        setView('passkey-new-domain-detected');
+        setShowAuthFlow(true, {
+            ignoreIfIsEmbeddedWidget: false,
+            performMultiWalletChecks: false,
+        });
+        dynamicEvents.dynamicEvents.once('passkeyRecoveryCompleted', () => {
+            onClickSend(e);
+        });
+        return;
+    }
+    onClickSend(e);
+});
+
+exports.getDisplayFiatPrice = getDisplayFiatPrice;
+exports.getValueRounded = getValueRounded;
+exports.useCurrencySymbol = useCurrencySymbol;
+exports.useFiatValue = useFiatValue;
+exports.useHandleRecovery = useHandleRecovery;
+exports.useHandleSubmitWithChecks = useHandleSubmitWithChecks;

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

@@ -0,0 +1,32 @@
+import { MouseEventHandler } from 'react';
+import { WalletConnector, AuthenticatorType } from '@dynamic-labs/wallet-connector-core';
+import { IUITransaction } from '@dynamic-labs/types';
+import { TokenBalance } from '@dynamic-labs/sdk-api-core';
+import { EmbeddedWalletCurrentAction, Wallet } from '../../shared';
+import type { ViewType } from '../../context/ViewContext';
+interface AuthFlowOptions {
+    ignoreIfIsEmbeddedWidget: boolean;
+    performMultiWalletChecks: boolean;
+}
+interface Config {
+    walletConnector: WalletConnector | undefined;
+    usingSessionKey: (walletConnector: WalletConnector) => boolean;
+    onClickSend: MouseEventHandler<HTMLButtonElement>;
+    isTurnkeyWallet: boolean;
+    userNeedsCrossDomainPasskey: boolean;
+}
+interface RecoveryHandlers {
+    shouldInitRecovery: () => Promise<boolean>;
+    initPasskeyRecoveryProcess: (authenticatorType?: AuthenticatorType, currentAction?: EmbeddedWalletCurrentAction) => Promise<Wallet>;
+}
+interface ViewHandlers {
+    setView: (view: ViewType) => void;
+    setShowAuthFlow: (show: boolean, options: AuthFlowOptions) => void;
+}
+export declare const useFiatValue: (transactionValue: string | undefined, currentToken: TokenBalance | undefined) => number;
+export declare const useCurrencySymbol: (currentToken: TokenBalance | undefined, currency: string) => string;
+export declare const getValueRounded: (isNativeToken: boolean, transaction: IUITransaction) => string | number | undefined;
+export declare const getDisplayFiatPrice: (fiatValue: number, currentToken: TokenBalance | undefined) => string;
+export declare const useHandleRecovery: (hideModal: boolean, walletConnector: WalletConnector | undefined, usingSessionKey: (walletConnector: WalletConnector) => boolean, onSuccess: ((transactionResponse: string) => void) | undefined, shouldInitRecovery: () => Promise<boolean>, initPasskeyRecoveryProcess: (authenticatorType?: AuthenticatorType, currentAction?: EmbeddedWalletCurrentAction) => Promise<Wallet>) => void;
+export declare const useHandleSubmitWithChecks: (config: Config, recoveryHandlers: RecoveryHandlers, viewHandlers: ViewHandlers) => (e: any) => Promise<void>;
+export {};