@dynamic-labs/sdk-react-core 4.0.0-alpha.3 → 4.0.0-alpha.30

package/src/lib/components/TransactionCard/TransactionCard.cjs

@@ -4,40 +4,156 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var walletBook = require('@dynamic-labs/wallet-book');
+var React = require('react');
+var reactI18next = require('react-i18next');
 require('@dynamic-labs/sdk-api-core');
 require('../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('../../context/ViewContext/ViewContext.cjs');
-require('react');
 var tooltip = require('../../shared/assets/tooltip.cjs');
+require('@dynamic-labs/wallet-book');
 var shortenWalletAddress = require('../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.cjs');
 require('@dynamic-labs/utils');
 require('../../utils/constants/colors.cjs');
 require('../../utils/constants/values.cjs');
 require('../../store/state/loadingAndLifecycle.cjs');
 require('../../shared/consts/index.cjs');
-var sendBalances = require('../../store/state/sendBalances.cjs');
 var networksAndChains = require('../../utils/functions/networksAndChains/networksAndChains.cjs');
 var Icon = require('../Icon/Icon.cjs');
-var Tooltip = require('../Tooltip/Tooltip.cjs');
-var utils = require('../TransactionConfirmationPageLayout/utils.cjs');
 var Typography = require('../Typography/Typography.cjs');
+require('../../context/DynamicContext/DynamicContext.cjs');
+require('../../events/dynamicEvents.cjs');
+require('../../../../_virtual/_tslib.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('../../store/state/user/user.cjs');
+require('../../locale/locale.cjs');
+require('../../store/state/projectSettings/projectSettings.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('../../utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.cjs');
+require('../../context/ThemeContext/ThemeContext.cjs');
+require('../../utils/hooks/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');
+require('../../store/state/environmentId.cjs');
+require('../../store/state/walletConnectorOptions.cjs');
+require('../Accordion/components/AccordionItem/AccordionItem.cjs');
+require('../Alert/Alert.cjs');
+var Tooltip = require('../Tooltip/Tooltip.cjs');
+require('../IconButton/IconButton.cjs');
+require('../InlineWidget/InlineWidget.cjs');
+require('../Input/Input.cjs');
+require('../IsBrowser/IsBrowser.cjs');
+require('../MenuList/Dropdown/Dropdown.cjs');
+require('../OverlayCard/OverlayCard.cjs');
+require('../Transition/ZoomTransition/ZoomTransition.cjs');
+require('../Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../Transition/OpacityTransition/OpacityTransition.cjs');
+require('../PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
+require('../Popper/Popper/Popper.cjs');
+require('../Popper/PopperContext/PopperContext.cjs');
+require('react-focus-lock');
+require('../ShadowDOM/ShadowDOM.cjs');
+require('qrcode');
+var useFetchChain = require('../../widgets/DynamicWidget/hooks/useFetchChain/useFetchChain.cjs');
+require('formik');
+require('../../context/FooterAnimationContext/index.cjs');
+require('../../context/WalletGroupContext/WalletGroupContext.cjs');
+require('../../context/IpConfigurationContext/IpConfigurationContext.cjs');
+require('../../context/SocialRedirectContext/SocialRedirectContext.cjs');
+require('../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
+require('@hcaptcha/react-hcaptcha');
+require('../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
+require('../../context/PasskeyContext/PasskeyContext.cjs');
+require('../../store/state/sendBalances.cjs');
+var useNetworkConfigurationsFromProjectSettings = require('../../utils/hooks/useNetworkConfigurationsFromProjectSettings/useNetworkConfigurationsFromProjectSettings.cjs');
+require('../OverlayCardBase/OverlayCardTarget/OverlayCardTarget.cjs');
+require('../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
+require('bs58');
+require('../../views/TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
+require('../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
+require('../../../index.cjs');
+require('../../store/state/tokenBalances.cjs');
+require('../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
+var useInternalDynamicContext = require('../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.cjs');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const TransactionCard = ({ transaction, currentToken, currencySymbol, valueRounded, showFiat, transactionValue, isGasSponsored, gasFiatValue, totalGasFiatValue, currency, total, t, walletKey, }) => {
-    const { amount, chainName } = sendBalances.useSendBalanceState();
-    const currentChainName = chainName || 'eth';
-    return (jsxRuntime.jsxs("div", { className: 'transaction-card', children: [jsxRuntime.jsxs("div", { className: 'transaction-card__header', children: [jsxRuntime.jsxs("div", { className: 'transaction-card__icon', children: [jsxRuntime.jsxs("div", { className: 'transaction-card__icon__container', children: [jsxRuntime.jsx("img", { src: (currentToken === null || currentToken === void 0 ? void 0 : currentToken.logoURI) || networksAndChains.getIconUrl(currentChainName), alt: currencySymbol, width: 25, height: 25 }), jsxRuntime.jsx("img", { className: 'transaction-card__icon__container__network', src: networksAndChains.getIconUrl(currentChainName), alt: currencySymbol, width: 25, height: 25 })] }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', children: currencySymbol })] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: 'transaction-card__info', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', children: currencySymbol }), jsxRuntime.jsx(Typography.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 && (jsxRuntime.jsxs("div", { className: 'transaction-card__info', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'secondary', children: "$" }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'primary', children: utils.getDisplayFiatPrice(amount, currentToken) })] }))] })] }), jsxRuntime.jsx("div", { className: 'transaction-card__arrow', children: jsxRuntime.jsx("span", { children: "\u2193" }) }), jsxRuntime.jsxs("div", { className: 'transaction-card__destination', children: [jsxRuntime.jsxs("div", { className: 'transaction-card__icon__container', children: [jsxRuntime.jsx(Icon.Icon, { size: 'medium', children: jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: walletKey, width: 25, height: 25 }) }), jsxRuntime.jsx("img", { className: 'transaction-card__icon__container__network', src: networksAndChains.getIconUrl(currentChainName), alt: currencySymbol, width: 30, height: 30 })] }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', className: 'transaction-card__wallet-address', children: shortenWalletAddress.shortenWalletAddress(transaction.to, 4, 4) })] }), !isGasSponsored && (jsxRuntime.jsxs("div", { className: 'transaction-card__total', children: [jsxRuntime.jsxs("div", { className: 'row', "data-testid": 'transaction-estimated-gas-fee', children: [jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', className: 'flex-row gap-native', children: [t('dyn_send_transaction.confirmation.data.gas_estimate'), jsxRuntime.jsx(Tooltip.Tooltip, { content: t('dyn_send_transaction.confirmation.data.gas_tooltip'), copykey: t('dyn_send_transaction.confirmation.data.gas_tooltip'), className: 'transaction-confirmation', children: jsxRuntime.jsx(Icon.Icon, { size: 'small', className: 'fee-tooltip', children: jsxRuntime.jsx(tooltip.ReactComponent, {}) }) })] }) }), showFiat && (currentToken === null || currentToken === void 0 ? void 0 : currentToken.price) ? (jsxRuntime.jsxs("div", { className: 'flex-row', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: "~ $" }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'primary', children: Number(gasFiatValue) <= 0.01 ? '<0.01' : gasFiatValue })] })) : (jsxRuntime.jsxs("div", { className: 'flex-row gap-native', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'primary', children: transaction.fee.gas
-                                            ? transaction.format(transaction.fee.gas, { precision: 6 })
-                                            : '--' }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: currency })] }))] }), (currentToken === null || currentToken === void 0 ? void 0 : currentToken.price) && (jsxRuntime.jsxs("div", { className: 'row', "data-testid": 'transaction-total', children: [jsxRuntime.jsx("div", { children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'bold', color: 'primary', children: t('dyn_send_transaction.confirmation.data.total') }) }), !showFiat ? (jsxRuntime.jsxs("div", { className: 'flex-row gap-native', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'bold', color: 'primary', children: total
-                                            ? transaction.format(total, { precision: 6 })
-                                            : t('dyn_send_transaction.confirmation.not_applied') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'bold', color: 'primary', children: currency })] })) : (jsxRuntime.jsxs("div", { className: 'flex-row', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', children: "~ $" }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', children: Number(totalGasFiatValue) <= 0.01
-                                            ? '<0.01'
-                                            : totalGasFiatValue })] }))] }))] }))] }));
+const TransactionCard = ({ transaction, simulationResult, isGasSponsored, }) => {
+    var _a, _b, _c, _d, _e, _f;
+    const { t } = reactI18next.useTranslation();
+    const { primaryWallet, projectSettings, overrides } = useInternalDynamicContext.useInternalDynamicContext();
+    const networkInfo = useNetworkConfigurationsFromProjectSettings.useNetworkConfigurationsFromProjectSettings({
+        evmNetworksOverrides: overrides === null || overrides === void 0 ? void 0 : overrides.evmNetworks,
+        projectSettings,
+    });
+    const { chain } = useFetchChain.useFetchChain(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector);
+    const networkInfoEntry = networksAndChains.getNetworkInfoEntry(chain, networkInfo);
+    const { symbol: nativeCurrencySymbol } = (_a = networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.nativeCurrency) !== null && _a !== void 0 ? _a : {};
+    const renderAssetTransfer = (transfer, index, array) => {
+        var _a, _b;
+        if (transfer.asset.type === 'NATIVE' &&
+            transfer.asset.chainName === 'Solana') {
+            transfer.amount = (Number(transfer.amount) -
+                Number(transaction.fee.gas) / Math.pow(10, 9)).toString();
+        }
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: `transaction-card__${transfer.direction}`, children: jsxRuntime.jsxs("div", { className: 'transaction-card__info-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', children: transfer.direction === 'in' ? 'Receive' : 'Send' }), jsxRuntime.jsxs("div", { className: 'transaction-card__amount-symbol', children: [jsxRuntime.jsxs("div", { className: 'transaction-card__token-info', children: [jsxRuntime.jsxs("div", { className: 'transaction-card__token-row', children: [jsxRuntime.jsxs(Typography.Typography, { variant: 'body_normal', color: transfer.direction === 'in' ? 'green-1' : 'error-1', children: [transfer.direction === 'out' ? '-' : '+', Number.isInteger(Number(transfer.amount))
+                                                                ? Number(transfer.amount)
+                                                                : Number(transfer.amount).toFixed(6)] }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', children: (_a = transfer.asset.symbol) !== null && _a !== void 0 ? _a : nativeCurrencySymbol })] }), transfer.usdPrice && (jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: transfer.direction === 'in' ? 'green-1' : 'error-1', children: Number(transfer.usdPrice) < 0.01
+                                                    ? '<$0.01'
+                                                    : `$${Number(transfer.usdPrice).toFixed(2)}` }))] }), jsxRuntime.jsx("div", { className: 'transaction-card__icon', children: jsxRuntime.jsx("div", { className: 'transaction-card__icon__container', children: jsxRuntime.jsx("img", { src: transfer.asset.logoUrl ||
+                                                    (networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.nativeCurrency.iconUrl), alt: (_b = transfer.asset.symbol) !== null && _b !== void 0 ? _b : nativeCurrencySymbol, width: 32, height: 32, className: 'transaction-card__icon__container__main' }) }) })] })] }) }), index < array.length - 1 && (jsxRuntime.jsx("div", { className: 'transaction-card__divider' }))] }));
+    };
+    const inAssets = ((_b = simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.inAssets) === null || _b === void 0 ? void 0 : _b.flatMap((assetDiff) => {
+        var _a;
+        return ((_a = assetDiff.transferIn) === null || _a === void 0 ? void 0 : _a.map((inTransfer) => {
+            var _a, _b;
+            return ({
+                amount: (_a = inTransfer === null || inTransfer === void 0 ? void 0 : inTransfer.value) !== null && _a !== void 0 ? _a : '',
+                asset: assetDiff.asset,
+                direction: 'in',
+                usdPrice: (_b = inTransfer === null || inTransfer === void 0 ? void 0 : inTransfer.usdPrice) !== null && _b !== void 0 ? _b : '',
+            });
+        })) || [];
+    })) || [];
+    const outAssets = ((_c = simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.outAssets) === null || _c === void 0 ? void 0 : _c.flatMap((assetDiff) => {
+        var _a;
+        return ((_a = assetDiff.transferOut) === null || _a === void 0 ? void 0 : _a.map((outTransfer) => {
+            var _a, _b;
+            return ({
+                amount: (_a = outTransfer === null || outTransfer === void 0 ? void 0 : outTransfer.value) !== null && _a !== void 0 ? _a : '',
+                asset: assetDiff.asset,
+                direction: 'out',
+                usdPrice: (_b = outTransfer === null || outTransfer === void 0 ? void 0 : outTransfer.usdPrice) !== null && _b !== void 0 ? _b : '',
+            });
+        })) || [];
+    })) || [];
+    const allAssets = [...outAssets, ...inAssets];
+    const solTransactionWithOnlyFee = allAssets.length === 1 &&
+        allAssets[0].asset.symbol === 'SOL' &&
+        allAssets[0].amount === (Number(transaction.fee.gas) / Math.pow(10, 9)).toString();
+    return (jsxRuntime.jsxs("div", { className: 'transaction-card-container', children: [allAssets.length > 0 && !solTransactionWithOnlyFee && (jsxRuntime.jsx("div", { className: 'transaction-card', children: jsxRuntime.jsx("div", { className: 'transaction-card__assets-container', children: [...outAssets, ...inAssets].map((asset, index, array) => (jsxRuntime.jsx(React__default["default"].Fragment, { children: renderAssetTransfer(asset, index, array) }, `asset-${index}`))) }) })), jsxRuntime.jsx("div", { className: 'transaction-card', children: jsxRuntime.jsxs("div", { className: 'transaction-card__details', children: [(transaction.to || ((_d = simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.counterparties) === null || _d === void 0 ? void 0 : _d[0])) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: 'transaction-card__row', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_send_transaction.confirmation.data.destination', children: t('dyn_send_transaction.confirmation.data.destination') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', "data-testid": 'transaction-destination', children: shortenWalletAddress.shortenWalletAddress((_e = transaction.to) !== null && _e !== void 0 ? _e : (_f = simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.counterparties) === null || _f === void 0 ? void 0 : _f[0], 4, 4) })] }), jsxRuntime.jsx("div", { className: 'transaction-card__divider' })] })), jsxRuntime.jsxs("div", { className: 'transaction-card__row', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_send_transaction.confirmation.data.network', children: t('dyn_send_transaction.confirmation.data.network') }), jsxRuntime.jsxs("div", { className: 'transaction-card__network-info', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', children: (networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.name) || 'Ethereum' }), jsxRuntime.jsx("img", { src: networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.iconUrls[0], alt: (networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.name) || 'Network icon', width: 16, height: 16, className: 'transaction-card__network-icon' })] })] }), !isGasSponsored && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: 'transaction-card__divider' }), jsxRuntime.jsxs("div", { className: 'transaction-card__row', children: [jsxRuntime.jsxs("div", { className: 'transaction-card__label-with-tooltip', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_send_transaction.confirmation.data.gas_estimate', children: t('dyn_send_transaction.confirmation.data.gas_estimate') }), jsxRuntime.jsx(Tooltip.Tooltip, { content: 'Network fees are paid to process your transaction on the blockchain', className: 'transaction-confirmation', children: jsxRuntime.jsx(Icon.Icon, { size: 'small', className: 'fee-tooltip', children: jsxRuntime.jsx(tooltip.ReactComponent, {}) }) })] }), jsxRuntime.jsx("div", { className: 'transaction-card__value', children: jsxRuntime.jsxs(Typography.Typography, { variant: 'body_normal', color: 'primary', "data-testid": 'transaction-estimated-gas-fee', children: [transaction.fee.gas
+                                                        ? transaction.format(transaction.fee.gas, {
+                                                            precision: 6,
+                                                        })
+                                                        : '--', ' ', nativeCurrencySymbol] }) })] })] }))] }) })] }));
 };
 
 exports.TransactionCard = TransactionCard;

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

@@ -1,18 +1,10 @@
-/// <reference types="react" />
-import { TokenBalance } from '@dynamic-labs/sdk-api-core';
+import React from 'react';
 import { IUITransaction } from '@dynamic-labs/types';
-export declare const TransactionCard: ({ transaction, currentToken, currencySymbol, valueRounded, showFiat, transactionValue, isGasSponsored, gasFiatValue, totalGasFiatValue, currency, total, t, walletKey, }: {
+import { SimulateTransactionResponse as SimulationResult } from '@dynamic-labs/sdk-api-core';
+type TransactionCardProps = {
     transaction: IUITransaction;
-    currentToken: TokenBalance | undefined;
-    currencySymbol: string;
-    valueRounded?: string;
-    showFiat: boolean;
-    transactionValue: string | undefined;
+    simulationResult: SimulationResult | undefined;
     isGasSponsored: boolean;
-    gasFiatValue: string;
-    totalGasFiatValue: string;
-    currency: string;
-    total: bigint | undefined;
-    t: any;
-    walletKey: string;
-}) => JSX.Element;
+};
+export declare const TransactionCard: React.FC<TransactionCardProps>;
+export {};

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

@@ -1,39 +1,151 @@
 'use client'
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { WalletIcon } from '@dynamic-labs/wallet-book';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React__default from 'react';
+import { useTranslation } from 'react-i18next';
 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 '@dynamic-labs/wallet-book';
 import { shortenWalletAddress } from '../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.js';
 import '@dynamic-labs/utils';
 import '../../utils/constants/colors.js';
 import '../../utils/constants/values.js';
 import '../../store/state/loadingAndLifecycle.js';
 import '../../shared/consts/index.js';
-import { useSendBalanceState } from '../../store/state/sendBalances.js';
-import { getIconUrl } from '../../utils/functions/networksAndChains/networksAndChains.js';
+import { getNetworkInfoEntry } from '../../utils/functions/networksAndChains/networksAndChains.js';
 import { Icon } from '../Icon/Icon.js';
-import { Tooltip } from '../Tooltip/Tooltip.js';
-import { getDisplayFiatPrice } from '../TransactionConfirmationPageLayout/utils.js';
 import { Typography } from '../Typography/Typography.js';
+import '../../context/DynamicContext/DynamicContext.js';
+import '../../events/dynamicEvents.js';
+import '../../../../_virtual/_tslib.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 '../../store/state/user/user.js';
+import '../../locale/locale.js';
+import '../../store/state/projectSettings/projectSettings.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 '../../utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.js';
+import '../../context/ThemeContext/ThemeContext.js';
+import '../../utils/hooks/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 '../../store/state/environmentId.js';
+import '../../store/state/walletConnectorOptions.js';
+import '../Accordion/components/AccordionItem/AccordionItem.js';
+import '../Alert/Alert.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
+import '../IconButton/IconButton.js';
+import '../InlineWidget/InlineWidget.js';
+import '../Input/Input.js';
+import '../IsBrowser/IsBrowser.js';
+import '../MenuList/Dropdown/Dropdown.js';
+import '../OverlayCard/OverlayCard.js';
+import '../Transition/ZoomTransition/ZoomTransition.js';
+import '../Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../Transition/OpacityTransition/OpacityTransition.js';
+import '../PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
+import '../Popper/Popper/Popper.js';
+import '../Popper/PopperContext/PopperContext.js';
+import 'react-focus-lock';
+import '../ShadowDOM/ShadowDOM.js';
+import 'qrcode';
+import { useFetchChain } from '../../widgets/DynamicWidget/hooks/useFetchChain/useFetchChain.js';
+import 'formik';
+import '../../context/FooterAnimationContext/index.js';
+import '../../context/WalletGroupContext/WalletGroupContext.js';
+import '../../context/IpConfigurationContext/IpConfigurationContext.js';
+import '../../context/SocialRedirectContext/SocialRedirectContext.js';
+import '../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
+import '@hcaptcha/react-hcaptcha';
+import '../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
+import '../../context/PasskeyContext/PasskeyContext.js';
+import '../../store/state/sendBalances.js';
+import { useNetworkConfigurationsFromProjectSettings } from '../../utils/hooks/useNetworkConfigurationsFromProjectSettings/useNetworkConfigurationsFromProjectSettings.js';
+import '../OverlayCardBase/OverlayCardTarget/OverlayCardTarget.js';
+import '../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
+import 'bs58';
+import '../../views/TransactionConfirmationView/helpers/transactionErrorMessage.js';
+import '../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
+import '../../../index.js';
+import '../../store/state/tokenBalances.js';
+import '../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
+import { useInternalDynamicContext } from '../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.js';
 
-const TransactionCard = ({ transaction, currentToken, currencySymbol, valueRounded, showFiat, transactionValue, isGasSponsored, gasFiatValue, totalGasFiatValue, currency, total, t, walletKey, }) => {
-    const { amount, chainName } = useSendBalanceState();
-    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(amount, currentToken) })] }))] })] }), 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 })] }))] }))] }))] }));
+const TransactionCard = ({ transaction, simulationResult, isGasSponsored, }) => {
+    var _a, _b, _c, _d, _e, _f;
+    const { t } = useTranslation();
+    const { primaryWallet, projectSettings, overrides } = useInternalDynamicContext();
+    const networkInfo = useNetworkConfigurationsFromProjectSettings({
+        evmNetworksOverrides: overrides === null || overrides === void 0 ? void 0 : overrides.evmNetworks,
+        projectSettings,
+    });
+    const { chain } = useFetchChain(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector);
+    const networkInfoEntry = getNetworkInfoEntry(chain, networkInfo);
+    const { symbol: nativeCurrencySymbol } = (_a = networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.nativeCurrency) !== null && _a !== void 0 ? _a : {};
+    const renderAssetTransfer = (transfer, index, array) => {
+        var _a, _b;
+        if (transfer.asset.type === 'NATIVE' &&
+            transfer.asset.chainName === 'Solana') {
+            transfer.amount = (Number(transfer.amount) -
+                Number(transaction.fee.gas) / Math.pow(10, 9)).toString();
+        }
+        return (jsxs(Fragment, { children: [jsx("div", { className: `transaction-card__${transfer.direction}`, children: jsxs("div", { className: 'transaction-card__info-container', children: [jsx(Typography, { variant: 'body_normal', color: 'secondary', children: transfer.direction === 'in' ? 'Receive' : 'Send' }), jsxs("div", { className: 'transaction-card__amount-symbol', children: [jsxs("div", { className: 'transaction-card__token-info', children: [jsxs("div", { className: 'transaction-card__token-row', children: [jsxs(Typography, { variant: 'body_normal', color: transfer.direction === 'in' ? 'green-1' : 'error-1', children: [transfer.direction === 'out' ? '-' : '+', Number.isInteger(Number(transfer.amount))
+                                                                ? Number(transfer.amount)
+                                                                : Number(transfer.amount).toFixed(6)] }), jsx(Typography, { variant: 'body_normal', color: 'primary', children: (_a = transfer.asset.symbol) !== null && _a !== void 0 ? _a : nativeCurrencySymbol })] }), transfer.usdPrice && (jsx(Typography, { variant: 'body_small', color: transfer.direction === 'in' ? 'green-1' : 'error-1', children: Number(transfer.usdPrice) < 0.01
+                                                    ? '<$0.01'
+                                                    : `$${Number(transfer.usdPrice).toFixed(2)}` }))] }), jsx("div", { className: 'transaction-card__icon', children: jsx("div", { className: 'transaction-card__icon__container', children: jsx("img", { src: transfer.asset.logoUrl ||
+                                                    (networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.nativeCurrency.iconUrl), alt: (_b = transfer.asset.symbol) !== null && _b !== void 0 ? _b : nativeCurrencySymbol, width: 32, height: 32, className: 'transaction-card__icon__container__main' }) }) })] })] }) }), index < array.length - 1 && (jsx("div", { className: 'transaction-card__divider' }))] }));
+    };
+    const inAssets = ((_b = simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.inAssets) === null || _b === void 0 ? void 0 : _b.flatMap((assetDiff) => {
+        var _a;
+        return ((_a = assetDiff.transferIn) === null || _a === void 0 ? void 0 : _a.map((inTransfer) => {
+            var _a, _b;
+            return ({
+                amount: (_a = inTransfer === null || inTransfer === void 0 ? void 0 : inTransfer.value) !== null && _a !== void 0 ? _a : '',
+                asset: assetDiff.asset,
+                direction: 'in',
+                usdPrice: (_b = inTransfer === null || inTransfer === void 0 ? void 0 : inTransfer.usdPrice) !== null && _b !== void 0 ? _b : '',
+            });
+        })) || [];
+    })) || [];
+    const outAssets = ((_c = simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.outAssets) === null || _c === void 0 ? void 0 : _c.flatMap((assetDiff) => {
+        var _a;
+        return ((_a = assetDiff.transferOut) === null || _a === void 0 ? void 0 : _a.map((outTransfer) => {
+            var _a, _b;
+            return ({
+                amount: (_a = outTransfer === null || outTransfer === void 0 ? void 0 : outTransfer.value) !== null && _a !== void 0 ? _a : '',
+                asset: assetDiff.asset,
+                direction: 'out',
+                usdPrice: (_b = outTransfer === null || outTransfer === void 0 ? void 0 : outTransfer.usdPrice) !== null && _b !== void 0 ? _b : '',
+            });
+        })) || [];
+    })) || [];
+    const allAssets = [...outAssets, ...inAssets];
+    const solTransactionWithOnlyFee = allAssets.length === 1 &&
+        allAssets[0].asset.symbol === 'SOL' &&
+        allAssets[0].amount === (Number(transaction.fee.gas) / Math.pow(10, 9)).toString();
+    return (jsxs("div", { className: 'transaction-card-container', children: [allAssets.length > 0 && !solTransactionWithOnlyFee && (jsx("div", { className: 'transaction-card', children: jsx("div", { className: 'transaction-card__assets-container', children: [...outAssets, ...inAssets].map((asset, index, array) => (jsx(React__default.Fragment, { children: renderAssetTransfer(asset, index, array) }, `asset-${index}`))) }) })), jsx("div", { className: 'transaction-card', children: jsxs("div", { className: 'transaction-card__details', children: [(transaction.to || ((_d = simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.counterparties) === null || _d === void 0 ? void 0 : _d[0])) && (jsxs(Fragment, { children: [jsxs("div", { className: 'transaction-card__row', children: [jsx(Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_send_transaction.confirmation.data.destination', children: t('dyn_send_transaction.confirmation.data.destination') }), jsx(Typography, { variant: 'body_normal', color: 'primary', "data-testid": 'transaction-destination', children: shortenWalletAddress((_e = transaction.to) !== null && _e !== void 0 ? _e : (_f = simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.counterparties) === null || _f === void 0 ? void 0 : _f[0], 4, 4) })] }), jsx("div", { className: 'transaction-card__divider' })] })), jsxs("div", { className: 'transaction-card__row', children: [jsx(Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_send_transaction.confirmation.data.network', children: t('dyn_send_transaction.confirmation.data.network') }), jsxs("div", { className: 'transaction-card__network-info', children: [jsx(Typography, { variant: 'body_normal', color: 'primary', children: (networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.name) || 'Ethereum' }), jsx("img", { src: networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.iconUrls[0], alt: (networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.name) || 'Network icon', width: 16, height: 16, className: 'transaction-card__network-icon' })] })] }), !isGasSponsored && (jsxs(Fragment, { children: [jsx("div", { className: 'transaction-card__divider' }), jsxs("div", { className: 'transaction-card__row', children: [jsxs("div", { className: 'transaction-card__label-with-tooltip', children: [jsx(Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_send_transaction.confirmation.data.gas_estimate', children: t('dyn_send_transaction.confirmation.data.gas_estimate') }), jsx(Tooltip, { content: 'Network fees are paid to process your transaction on the blockchain', className: 'transaction-confirmation', children: jsx(Icon, { size: 'small', className: 'fee-tooltip', children: jsx(SvgTooltip, {}) }) })] }), jsx("div", { className: 'transaction-card__value', children: jsxs(Typography, { variant: 'body_normal', color: 'primary', "data-testid": 'transaction-estimated-gas-fee', children: [transaction.fee.gas
+                                                        ? transaction.format(transaction.fee.gas, {
+                                                            precision: 6,
+                                                        })
+                                                        : '--', ' ', nativeCurrencySymbol] }) })] })] }))] }) })] }));
 };
 
 export { TransactionCard };

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

@@ -66,11 +66,11 @@ require('../InlineWidget/InlineWidget.cjs');
 require('../Input/Input.cjs');
 require('../IsBrowser/IsBrowser.cjs');
 require('../MenuList/Dropdown/Dropdown.cjs');
+require('../OverlayCard/OverlayCard.cjs');
 require('../Transition/ZoomTransition/ZoomTransition.cjs');
 require('../Transition/SlideInUpTransition/SlideInUpTransition.cjs');
 require('../Transition/OpacityTransition/OpacityTransition.cjs');
 var VerticalDrawerTransition = require('../Transition/VerticalDrawerTransition/VerticalDrawerTransition.cjs');
-require('../OverlayCard/OverlayCardTarget/OverlayCardTarget.cjs');
 var ModalHeader = require('../ModalHeader/ModalHeader.cjs');
 var PasskeyCreatedSuccessBanner = require('../PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
 require('../Popper/Popper/Popper.cjs');
@@ -82,37 +82,31 @@ var useFetchCurrency = require('../../widgets/DynamicWidget/hooks/useFetchCurren
 require('formik');
 require('../../context/FooterAnimationContext/index.cjs');
 require('../../context/WalletGroupContext/WalletGroupContext.cjs');
+require('../../context/IpConfigurationContext/IpConfigurationContext.cjs');
 require('../../context/SocialRedirectContext/SocialRedirectContext.cjs');
 require('../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
 require('@hcaptcha/react-hcaptcha');
 require('../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
-require('../../context/IpConfigurationContext/IpConfigurationContext.cjs');
 var PasskeyContext = require('../../context/PasskeyContext/PasskeyContext.cjs');
 var sendBalances = require('../../store/state/sendBalances.cjs');
 var utils = require('./utils.cjs');
 var TransactionCard = require('../TransactionCard/TransactionCard.cjs');
+var OldTransactionCard = require('../TransactionCard/OldTransactionCard.cjs');
+require('../OverlayCardBase/OverlayCardTarget/OverlayCardTarget.cjs');
 require('../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
+require('bs58');
 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');
+require('../../../index.cjs');
 require('../../store/state/tokenBalances.cjs');
+require('../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
 var useInternalDynamicContext = require('../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.cjs');
 
-const TransactionConfirmationPageLayout = ({ onClickClose, isLoading, onClickBack, onClickSend, disableSendButton, displayPoweredByDynamicFooter = false, alert, walletConnector, transaction, currentToken, children, hideModal, onSuccess, transactionValue, total, isGasSponsored, isNativeToken, walletKey, }) => {
+const TransactionConfirmationPageLayout = ({ onClickClose, isLoading, onClickBack, onClickSend, disableSendButton, displayPoweredByDynamicFooter = false, alert, walletConnector, transaction, currentToken, children, hideModal, onSuccess, transactionValue, total, isGasSponsored, isNativeToken, walletKey, simulationResult, sendBalanceTransaction, }) => {
     var _a;
     const { t } = reactI18next.useTranslation();
     const { isTurnkeyWallet } = useIsTurnkeyWallet.useIsTurnkeyWallet();
-    const { setShowAuthFlow, showFiat } = useInternalDynamicContext.useInternalDynamicContext();
+    const { setShowAuthFlow } = useInternalDynamicContext.useInternalDynamicContext();
     const { setView } = ViewContext.useViewContext();
     const { userNeedsCrossDomainPasskey } = PasskeyContext.usePasskeyContext();
     const { initPasskeyRecoveryProcess, shouldInitRecovery } = usePasskeyRecovery.usePasskeyRecovery();
@@ -131,7 +125,7 @@ const TransactionConfirmationPageLayout = ({ onClickClose, isLoading, onClickBac
     const backButton = onClickBack && (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: onClickBack, "data-testid": 'back-button', children: jsxRuntime.jsx(arrowLeft.ReactComponent, {}) }));
     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: 'title', 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, valueRounded: (_a = utils.getValueRounded(Boolean(isNativeToken), transaction)) === null || _a === void 0 ? void 0 : _a.toString(), showFiat: showFiat, transactionValue: transactionValue, 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', buttonPadding: 'small', onClick: onClickBack || onClickClose, expanded: true, 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: 'small', onClick: handleSubmitWithChecks, expanded: true, loading: isLoading, disabled: disableSendButton, copykey: 'dyn_send_transaction.confirmation.send', startSlot: 
+    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: 'title', 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: [!sendBalanceTransaction ? (jsxRuntime.jsx(TransactionCard.TransactionCard, { transaction: transaction, isGasSponsored: isGasSponsored, simulationResult: simulationResult })) : (jsxRuntime.jsx(OldTransactionCard.OldTransactionCard, { transaction: transaction, currentToken: currentToken, currencySymbol: currencySymbol, valueRounded: (_a = utils.getValueRounded(Boolean(isNativeToken), transaction)) === null || _a === void 0 ? void 0 : _a.toString(), transactionValue: transactionValue, isGasSponsored: isGasSponsored, gasFiatValue: gasFiatValue || '0', totalGasFiatValue: totalGasFiatValue || '0', currency: currency, total: total, t: t, walletKey: walletKey })), children && (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', buttonPadding: 'small', onClick: onClickBack || onClickClose, expanded: true, 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: 'small', 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' }))] })] }));
 };

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

@@ -1,12 +1,9 @@
 import { FC, MouseEventHandler, PropsWithChildren, ReactNode } from 'react';
-import { TokenBalance } from '@dynamic-labs/sdk-api-core';
+import { TokenBalance, SimulateTransactionResponse as SimulationResult } from '@dynamic-labs/sdk-api-core';
 import { IUITransaction } from '@dynamic-labs/types';
 import { WalletConnector } from '@dynamic-labs/wallet-connector-core';
 import { CopyKey } from '../../shared';
 type TransactionConfirmationPageLayoutProps = {
-    appLogoUrl?: string;
-    appName?: string;
-    appOrigin?: string;
     disableSendButton?: boolean;
     displayPoweredByDynamicFooter?: boolean;
     error?: string;
@@ -27,6 +24,8 @@ type TransactionConfirmationPageLayoutProps = {
     isGasSponsoredLoading: boolean;
     isNativeToken?: boolean;
     walletKey: string;
+    simulationResult: SimulationResult | undefined;
+    sendBalanceTransaction?: boolean;
 } & CopyKey;
 export declare const TransactionConfirmationPageLayout: FC<PropsWithChildren<TransactionConfirmationPageLayoutProps>>;
 export {};

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

@@ -62,11 +62,11 @@ import '../InlineWidget/InlineWidget.js';
 import '../Input/Input.js';
 import '../IsBrowser/IsBrowser.js';
 import '../MenuList/Dropdown/Dropdown.js';
+import '../OverlayCard/OverlayCard.js';
 import '../Transition/ZoomTransition/ZoomTransition.js';
 import '../Transition/SlideInUpTransition/SlideInUpTransition.js';
 import '../Transition/OpacityTransition/OpacityTransition.js';
 import { VerticalDrawerTransition } from '../Transition/VerticalDrawerTransition/VerticalDrawerTransition.js';
-import '../OverlayCard/OverlayCardTarget/OverlayCardTarget.js';
 import { ModalHeader } from '../ModalHeader/ModalHeader.js';
 import { PasskeyCreatedSuccessBanner } from '../PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
 import '../Popper/Popper/Popper.js';
@@ -78,37 +78,31 @@ import { useFetchCurrency } from '../../widgets/DynamicWidget/hooks/useFetchCurr
 import 'formik';
 import '../../context/FooterAnimationContext/index.js';
 import '../../context/WalletGroupContext/WalletGroupContext.js';
+import '../../context/IpConfigurationContext/IpConfigurationContext.js';
 import '../../context/SocialRedirectContext/SocialRedirectContext.js';
 import '../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
 import '@hcaptcha/react-hcaptcha';
 import '../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
-import '../../context/IpConfigurationContext/IpConfigurationContext.js';
 import { usePasskeyContext } from '../../context/PasskeyContext/PasskeyContext.js';
 import { useSendBalanceState } from '../../store/state/sendBalances.js';
 import { useCurrencySymbol, useHandleRecovery, getValueRounded, useHandleSubmitWithChecks } from './utils.js';
 import { TransactionCard } from '../TransactionCard/TransactionCard.js';
+import { OldTransactionCard } from '../TransactionCard/OldTransactionCard.js';
+import '../OverlayCardBase/OverlayCardTarget/OverlayCardTarget.js';
 import '../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
+import 'bs58';
 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 '../../../index.js';
 import '../../store/state/tokenBalances.js';
+import '../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
 import { useInternalDynamicContext } from '../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.js';
 
-const TransactionConfirmationPageLayout = ({ onClickClose, isLoading, onClickBack, onClickSend, disableSendButton, displayPoweredByDynamicFooter = false, alert, walletConnector, transaction, currentToken, children, hideModal, onSuccess, transactionValue, total, isGasSponsored, isNativeToken, walletKey, }) => {
+const TransactionConfirmationPageLayout = ({ onClickClose, isLoading, onClickBack, onClickSend, disableSendButton, displayPoweredByDynamicFooter = false, alert, walletConnector, transaction, currentToken, children, hideModal, onSuccess, transactionValue, total, isGasSponsored, isNativeToken, walletKey, simulationResult, sendBalanceTransaction, }) => {
     var _a;
     const { t } = useTranslation();
     const { isTurnkeyWallet } = useIsTurnkeyWallet();
-    const { setShowAuthFlow, showFiat } = useInternalDynamicContext();
+    const { setShowAuthFlow } = useInternalDynamicContext();
     const { setView } = useViewContext();
     const { userNeedsCrossDomainPasskey } = usePasskeyContext();
     const { initPasskeyRecoveryProcess, shouldInitRecovery } = usePasskeyRecovery();
@@ -127,7 +121,7 @@ const TransactionConfirmationPageLayout = ({ onClickClose, isLoading, onClickBac
     const backButton = onClickBack && (jsx(IconButton, { type: 'button', onClick: onClickBack, "data-testid": 'back-button', children: jsx(SvgArrowLeft, {}) }));
     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: 'title', 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, valueRounded: (_a = getValueRounded(Boolean(isNativeToken), transaction)) === null || _a === void 0 ? void 0 : _a.toString(), showFiat: showFiat, transactionValue: transactionValue, 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', buttonPadding: 'small', onClick: onClickBack || onClickClose, expanded: true, disabled: isLoading, copykey: 'dyn_send_transaction.confirmation.cancel_button', children: t('dyn_send_transaction.confirmation.cancel_button') })), jsx(TypographyButton, { buttonVariant: 'brand-primary', buttonPadding: 'small', onClick: handleSubmitWithChecks, expanded: true, loading: isLoading, disabled: disableSendButton, copykey: 'dyn_send_transaction.confirmation.send', startSlot: 
+    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: 'title', 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: [!sendBalanceTransaction ? (jsx(TransactionCard, { transaction: transaction, isGasSponsored: isGasSponsored, simulationResult: simulationResult })) : (jsx(OldTransactionCard, { transaction: transaction, currentToken: currentToken, currencySymbol: currencySymbol, valueRounded: (_a = getValueRounded(Boolean(isNativeToken), transaction)) === null || _a === void 0 ? void 0 : _a.toString(), transactionValue: transactionValue, isGasSponsored: isGasSponsored, gasFiatValue: gasFiatValue || '0', totalGasFiatValue: totalGasFiatValue || '0', currency: currency, total: total, t: t, walletKey: walletKey })), children && (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', buttonPadding: 'small', onClick: onClickBack || onClickClose, expanded: true, disabled: isLoading, copykey: 'dyn_send_transaction.confirmation.cancel_button', children: t('dyn_send_transaction.confirmation.cancel_button') })), jsx(TypographyButton, { buttonVariant: 'brand-primary', buttonPadding: 'small', 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' }))] })] }));
 };