@dynamic-labs/sdk-react-core 4.0.0-alpha.9 → 4.0.1

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

@@ -3,47 +3,51 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _tslib = require('../../../../_virtual/_tslib.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactI18next = require('react-i18next');
+var bs58 = require('bs58');
 var utils = require('@dynamic-labs/utils');
-var walletBook = require('@dynamic-labs/wallet-book');
+var sdkApiCore = require('@dynamic-labs/sdk-api-core');
 var walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
+var ethereumAa = require('@dynamic-labs/ethereum-aa');
 require('../../context/DynamicContext/DynamicContext.cjs');
-require('@dynamic-labs/sdk-api-core');
 var logger = require('../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
 require('../../context/ViewContext/ViewContext.cjs');
-var shortenWalletAddress = require('../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.cjs');
+require('@dynamic-labs/wallet-book');
 require('../../utils/constants/colors.cjs');
 require('../../utils/constants/values.cjs');
 var useEffectOnce = require('../../shared/utils/hooks/useEffectOnce/useEffectOnce.cjs');
 require('../../store/state/loadingAndLifecycle.cjs');
 require('../../shared/consts/index.cjs');
 require('../../events/dynamicEvents.cjs');
-require('../../../../_virtual/_tslib.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../context/ErrorContext/ErrorContext.cjs');
 require('@dynamic-labs/multi-wallet');
-var getAppOrigin = require('../../utils/functions/getAppOrigin/getAppOrigin.cjs');
 require('react-international-phone');
+require('../../store/state/nonce/nonce.cjs');
 require('../../config/ApiEndpoint.cjs');
 require('../../store/state/user/user.cjs');
 require('../../locale/locale.cjs');
 require('../../store/state/projectSettings/projectSettings.cjs');
+require('../../store/state/dynamicContextProps/dynamicContextProps.cjs');
+require('../../store/state/primaryWalletId/primaryWalletId.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('../../utils/functions/compareChains/compareChains.cjs');
 require('../../context/WalletContext/WalletContext.cjs');
 require('../../utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.cjs');
-var usePromise = require('../../utils/hooks/usePromise/usePromise.cjs');
 require('../../context/ThemeContext/ThemeContext.cjs');
 var useForceUpdate = require('../../utils/hooks/useForceUpdate/useForceUpdate.cjs');
 var useInterval = require('../../utils/hooks/useInterval/useInterval.cjs');
 require('../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.cjs');
 var useMutation = require('../../utils/hooks/useMutation/useMutation.cjs');
+var usePromise = require('../../utils/hooks/usePromise/usePromise.cjs');
 require('@dynamic-labs/types');
 require('../../context/LoadingContext/LoadingContext.cjs');
 require('yup');
@@ -52,8 +56,7 @@ require('../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('../../store/state/walletOptions/walletOptions.cjs');
 require('../../components/Accordion/components/AccordionItem/AccordionItem.cjs');
 var Alert = require('../../components/Alert/Alert.cjs');
 var Typography = require('../../components/Typography/Typography.cjs');
@@ -63,10 +66,10 @@ require('../../components/InlineWidget/InlineWidget.cjs');
 require('../../components/Input/Input.cjs');
 require('../../components/IsBrowser/IsBrowser.cjs');
 require('../../components/MenuList/Dropdown/Dropdown.cjs');
+require('../../components/OverlayCard/OverlayCard.cjs');
 require('../../components/Transition/ZoomTransition/ZoomTransition.cjs');
 require('../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
 require('../../components/Transition/OpacityTransition/OpacityTransition.cjs');
-require('../../components/OverlayCard/OverlayCardTarget/OverlayCardTarget.cjs');
 require('../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
 require('../../components/Popper/Popper/Popper.cjs');
 require('../../components/Popper/PopperContext/PopperContext.cjs');
@@ -74,44 +77,175 @@ require('react-focus-lock');
 require('qrcode');
 var useFetchCurrency = require('../../widgets/DynamicWidget/hooks/useFetchCurrency/useFetchCurrency.cjs');
 require('formik');
+require('../../utils/hooks/useSubdomainCheck/useSubdomainCheck.cjs');
 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');
 require('../../context/PasskeyContext/PasskeyContext.cjs');
-var sendBalances = require('../../store/state/sendBalances.cjs');
+require('../../store/state/sendBalances.cjs');
 var TransactionConfirmationPageLayout = require('../../components/TransactionConfirmationPageLayout/TransactionConfirmationPageLayout.cjs');
+require('../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.cjs');
 require('../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
-var useTransactionTotal = require('./hooks/useTransactionTotal/useTransactionTotal.cjs');
-var transactionErrorMessage = require('./helpers/transactionErrorMessage.cjs');
 require('../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
+var blockaid = require('../../data/api/transactions/blockaid.cjs');
 require('../../../index.cjs');
 require('../../store/state/tokenBalances.cjs');
 require('../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
 var useInternalDynamicContext = require('../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.cjs');
+var useTransactionTotal = require('./hooks/useTransactionTotal/useTransactionTotal.cjs');
+var transactionErrorMessage = require('./helpers/transactionErrorMessage.cjs');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var bs58__default = /*#__PURE__*/_interopDefaultLegacy(bs58);
 
 const FEE_REFRESH_INTERVAL = 20000;
-const TransactionConfirmationView = ({ transaction, onError, onSuccess, mutation, onClickBack, walletConnector, onClickClose, title, displayPoweredByDynamicFooter = false, copykey, hideModal, currentToken, isNativeToken, transactionValue, isModal, }) => {
-    const { appName, appLogoUrl, primaryWallet } = useInternalDynamicContext.useInternalDynamicContext();
-    const appOrigin = getAppOrigin.getAppOrigin();
+var SimulationStatus;
+(function (SimulationStatus) {
+    SimulationStatus["LOADING"] = "loading";
+    SimulationStatus["FAILED"] = "failed";
+    SimulationStatus["SKIPPED"] = "skipped";
+    SimulationStatus["SUCCESS"] = "success";
+})(SimulationStatus || (SimulationStatus = {}));
+const TransactionConfirmationView = ({ transaction, onError, onSuccess, mutation, onClickBack, walletConnector, onClickClose, title, displayPoweredByDynamicFooter = false, copykey, hideModal, currentToken, isNativeToken, transactionValue, isModal, sendBalanceTransaction, }) => {
+    const { primaryWallet, environmentId } = useInternalDynamicContext.useInternalDynamicContext();
     const [isGasSponsored, setIsGasSponsored] = React.useState(false);
     const update = useForceUpdate.useForceUpdate();
     const { t } = reactI18next.useTranslation();
     const { currency } = useFetchCurrency.useFetchCurrency(walletConnector);
-    const { chainName } = sendBalances.useSendBalanceState();
+    // Update the chainId access to handle undefined case
+    const chainId = React.useMemo(() => {
+        if (!(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector)) {
+            return undefined;
+        }
+        const connector = primaryWallet.connector;
+        return connector._selectedChainId || connector.lastUsedChainId;
+    }, [primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector]);
+    const [simulationState, setSimulationState] = React.useState({
+        status: SimulationStatus.LOADING,
+    });
+    const [recipient, setRecipient] = React.useState(undefined);
+    const fetchSimulationResult = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b, _c, _d, _e, _f;
+        if (simulationState.status !== SimulationStatus.LOADING) {
+            return;
+        }
+        if (sendBalanceTransaction || hideModal) {
+            setSimulationState({ status: SimulationStatus.SKIPPED });
+            return;
+        }
+        if (!primaryWallet || (!chainId && (primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.chain) !== 'SOL')) {
+            logger.logger.error('[TransactionConfirmationView] Simulation failed:', {
+                chain: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.chain,
+                chainId,
+                primaryWallet,
+            });
+            setSimulationState({ status: SimulationStatus.FAILED });
+            return;
+        }
+        try {
+            let result;
+            if (ethereumAa.isZeroDevConnector(primaryWallet.connector)) {
+                const { connector } = primaryWallet;
+                const { userOperation } = yield connector.getCurrentUserOperation(transaction);
+                if (userOperation) {
+                    const formattedUserOperation = yield connector.formatUserOperation(userOperation);
+                    // Set the gas fee on the transaction, only for zero dev
+                    transaction.fee.gas = calculateGasUnits(userOperation);
+                    const entryPoint = yield ((_a = connector.getAccountAbstractionProvider()) === null || _a === void 0 ? void 0 : _a.account.entryPoint);
+                    if (!entryPoint) {
+                        logger.logger.error('[TransactionConfirmationView] Simulation failed: No entry point address found');
+                        setSimulationState({ status: SimulationStatus.FAILED });
+                        return;
+                    }
+                    setRecipient((_b = transaction === null || transaction === void 0 ? void 0 : transaction.getTransactionRecipient) === null || _b === void 0 ? void 0 : _b.call(transaction));
+                    result = yield blockaid.simulateBlockaidUserOperation({
+                        chainId: String(chainId),
+                        entryPoint,
+                        environmentId,
+                        userOperation: formattedUserOperation,
+                        value: ((_c = transaction.value) === null || _c === void 0 ? void 0 : _c.toString()) || '0',
+                    });
+                }
+                else {
+                    setSimulationState({ status: SimulationStatus.FAILED });
+                    return;
+                }
+            }
+            else {
+                // Handle SOLANA
+                if (!chainId) {
+                    const encodedTransactions = (_d = transaction.multipleTransactions) === null || _d === void 0 ? void 0 : _d.map((tx) => bs58__default["default"].encode(tx.serialize({ requireAllSignatures: false })));
+                    if (!encodedTransactions) {
+                        logger.logger.error('[TransactionConfirmationView] Simulation failed: No encoded transactions');
+                        setSimulationState({ status: SimulationStatus.FAILED });
+                        return;
+                    }
+                    result = yield blockaid.simulateBlockaidSVMTransaction({
+                        accountAddress: transaction.from,
+                        chain: (yield (walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.getNetwork())),
+                        environmentId,
+                        transactions: encodedTransactions,
+                    });
+                }
+                else {
+                    setRecipient((_e = transaction === null || transaction === void 0 ? void 0 : transaction.getTransactionRecipient) === null || _e === void 0 ? void 0 : _e.call(transaction));
+                    // EVM
+                    result = yield blockaid.simulateBlockaidEVMTransaction({
+                        chainId: String(chainId),
+                        data: transaction.data || '0x',
+                        environmentId,
+                        from: transaction.from,
+                        to: transaction.to || '',
+                        value: ((_f = transaction.value) === null || _f === void 0 ? void 0 : _f.toString()) || '0',
+                    });
+                }
+            }
+            if (!result && !ethereumAa.isZeroDevConnector(primaryWallet.connector)) {
+                logger.logger.warn('[TransactionConfirmationView] Simulation failed: No result');
+                setSimulationState({ status: SimulationStatus.FAILED });
+                return;
+            }
+            setSimulationState(result
+                ? { result, status: SimulationStatus.SUCCESS }
+                : { status: SimulationStatus.FAILED });
+        }
+        catch (error) {
+            logger.logger.error('[TransactionConfirmationView] Simulation failed:', error);
+            setSimulationState({ status: SimulationStatus.FAILED });
+        }
+    }), [
+        sendBalanceTransaction,
+        hideModal,
+        primaryWallet,
+        chainId,
+        environmentId,
+        transaction,
+        walletConnector,
+    ]);
+    React.useEffect(() => {
+        if (simulationState.status === SimulationStatus.SUCCESS ||
+            simulationState.status === SimulationStatus.SKIPPED) {
+            return;
+        }
+        fetchSimulationResult();
+    }, [fetchSimulationResult, primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, simulationState.status]);
     /**
      * Update transaction fee and trigger a react update
      * to reflect the new fee on the UI
      */
-    const fetchTransactionFee = () => {
-        // solana fee doesnt need to be refreshed
-        if (chainName === 'Solana' && transaction.fee.gas !== undefined)
+    const fetchTransactionFee = React.useCallback(() => {
+        if (((primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.chain) === sdkApiCore.ChainEnum.Sol &&
+            transaction.fee.gas !== undefined) ||
+            (primaryWallet && ethereumAa.isZeroDevConnector(primaryWallet.connector))) {
             return;
+        }
         transaction.fetchFee().finally(update);
-    };
+    }, [primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.chain, transaction, update]);
     const { isLoading: isGasSponsoredLoading } = usePromise.usePromise(() => {
         if (!walletConnectorCore.isAccountAbstractionConnector(walletConnector)) {
             return false;
@@ -127,8 +261,15 @@ const TransactionConfirmationView = ({ transaction, onError, onSuccess, mutation
             }
         },
     });
+    React.useEffect(() => {
+        var _a;
+        // solana gas sponsorship check
+        if ((_a = transaction.isGasSponsored) === null || _a === void 0 ? void 0 : _a.call(transaction)) {
+            setIsGasSponsored(true);
+        }
+    }, [transaction]);
     const { mutate: send, isLoading, error: transactionError, } = useMutation.useMutation(mutation, {
-        onFailure: (error) => {
+        onFailure: React.useCallback((error) => {
             fetchTransactionFee();
             if (utils.TransactionGasCannotBeSponsoredError.isInstance(error)) {
                 logger.logger.debug(error);
@@ -139,8 +280,8 @@ const TransactionConfirmationView = ({ transaction, onError, onSuccess, mutation
             }
             logger.logger.error(error);
             onError === null || onError === void 0 ? void 0 : onError(error);
-        },
-        onSuccess: (tx) => onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(tx),
+        }, [fetchTransactionFee, onError, walletConnector]),
+        onSuccess: React.useCallback((tx) => onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(tx), [onSuccess]),
     });
     // Refresh transaction fee, Solana fees are static based on transaction data, dont need to refresh them
     useInterval.useInterval(fetchTransactionFee, isLoading ? null : FEE_REFRESH_INTERVAL);
@@ -153,62 +294,141 @@ const TransactionConfirmationView = ({ transaction, onError, onSuccess, mutation
     const errorMessage = transactionError && transactionErrorMessage.transactionErrorMessage(transactionError);
     const { data: balance, isLoading: isBalanceLoading } = usePromise.usePromise(() => transaction.getBalance());
     const hasInsufficientFunds = React.useMemo(() => {
-        if (!total || !balance)
+        if (total === undefined || balance === undefined)
             return false;
         return balance < total;
     }, [balance, total]);
     const missingFunds = React.useMemo(() => {
-        if (!total || !balance)
+        if (total === undefined || balance === undefined)
             return undefined;
         return total - balance;
     }, [total, balance]);
     const alert = React.useMemo(() => {
-        if (transaction.notEnoughFundsError) {
-            return (jsxRuntime.jsx(Alert.Alert, { icon: 'error', variant: 'error', copykey: 'dyn_send_transaction.warning_message.not_enough_solana', children: t('dyn_send_transaction.warning_message.not_enough_solana') }));
-        }
-        else if (transaction.value === undefined) {
-            return (jsxRuntime.jsx(Alert.Alert, { icon: 'error', variant: 'warning', contentDataTestId: 'warning_content', copykey: 'dyn_send_transaction.warning_message.failed_simulation', children: t('dyn_send_transaction.warning_message.failed_simulation') }));
-        }
         if (errorMessage)
             return null;
+        // Check for gas sponsorship errors
         if (utils.TransactionGasCannotBeSponsoredError.isInstance(transactionError)) {
             return (jsxRuntime.jsx(Alert.Alert, { icon: 'error', variant: 'error', copykey: 'dyn_send_transaction.error_message.gas_not_sponsored', children: t('dyn_send_transaction.error_message.gas_not_sponsored') }));
         }
-        if (!isNativeToken &&
-            !isGasSponsoredLoading &&
+        // Check for insufficient gas funds
+        if (!isGasSponsoredLoading &&
             !isBalanceLoading &&
             missingFunds === undefined &&
-            transaction.fee.gas) {
-            return (jsxRuntime.jsx(Alert.Alert, { icon: 'error', variant: 'warning', contentDataTestId: 'warning_content', copykey: 'dyn_send_transaction.warning_message.insufficient_gas_funds', children: t('dyn_send_transaction.warning_message.insufficient_gas_funds', {
-                    amountLeft: transaction.format(transaction.fee.gas, {
-                        precision: 6,
-                    }),
-                    currencySymbol: currency,
-                }) }));
+            transaction.fee.gas &&
+            !isGasSponsored) {
+            return (jsxRuntime.jsxs(Alert.Alert, { icon: 'error', variant: 'warning', contentDataTestId: 'warning_content', copykey: 'dyn_send_transaction.warning_message.insufficient_gas_funds', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', copykey: 'dyn_send_transaction.warning_message.insufficient_gas_funds.title', children: t('dyn_send_transaction.warning_message.insufficient_gas_funds.title') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_send_transaction.warning_message.insufficient_gas_funds.description', children: t('dyn_send_transaction.warning_message.insufficient_gas_funds.description', {
+                            amountLeft: transaction.format(transaction.fee.gas, {
+                                precision: 6,
+                            }),
+                            currencySymbol: currency,
+                        }) })] }));
         }
+        // Check for insufficient funds
         const showInsufficientFundsWarningMessage = hasInsufficientFunds && missingFunds;
-        if (!showInsufficientFundsWarningMessage)
-            return;
-        const amountLeft = transaction.format(missingFunds, { precision: 5 });
-        return (jsxRuntime.jsx(Alert.Alert, { icon: 'error', variant: 'warning', contentDataTestId: 'warning_content', copykey: 'dyn_send_transaction.warning_message.insufficient_funds', children: t('dyn_send_transaction.warning_message.insufficient_funds', {
-                amountLeft,
-                currencySymbol: currency,
-            }) }));
+        if (showInsufficientFundsWarningMessage) {
+            const amountLeft = transaction.format(missingFunds, { precision: 6 });
+            return (jsxRuntime.jsxs(Alert.Alert, { icon: 'error', variant: 'error', contentDataTestId: 'warning_content', copykey: 'dyn_send_transaction.warning_message.insufficient_funds', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', copykey: 'dyn_send_transaction.warning_message.insufficient_funds.title', children: t('dyn_send_transaction.warning_message.insufficient_funds.title') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_send_transaction.warning_message.insufficient_funds.description', children: t('dyn_send_transaction.warning_message.insufficient_funds.description', {
+                            amountLeft,
+                            currencySymbol: currency,
+                        }) })] }));
+        }
+        // Finally, check for simulation failure
+        if (simulationState.status === SimulationStatus.FAILED) {
+            return (jsxRuntime.jsxs(Alert.Alert, { icon: 'error', variant: 'warning', contentDataTestId: 'warning_content', copykey: 'dyn_send_transaction.warning_message.failed_simulation', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', copykey: 'dyn_send_transaction.warning_message.failed_simulation.title', as: 'div', children: t('dyn_send_transaction.warning_message.failed_simulation.title') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_send_transaction.warning_message.failed_simulation.description', as: 'div', children: t('dyn_send_transaction.warning_message.failed_simulation.description') })] }));
+        }
+        return null;
     }, [
-        transaction,
+        simulationState.status,
         errorMessage,
         transactionError,
-        hasInsufficientFunds,
+        isGasSponsoredLoading,
+        isBalanceLoading,
         missingFunds,
+        transaction,
+        isGasSponsored,
+        hasInsufficientFunds,
         t,
         currency,
-        transaction.fee.gas,
+    ]);
+    React.useEffect(() => {
+        var _a, _b;
+        if (simulationState.status === SimulationStatus.SUCCESS &&
+            !sendBalanceTransaction) {
+            if (((_a = simulationState.result) === null || _a === void 0 ? void 0 : _a.outAssets.length) === 0 &&
+                !chainId &&
+                !((_b = transaction.isGasSponsored) === null || _b === void 0 ? void 0 : _b.call(transaction))) {
+                // set failed but keep the result so that we have the native price
+                setSimulationState({
+                    result: simulationState.result,
+                    status: SimulationStatus.FAILED,
+                });
+            }
+        }
+    }, [simulationState, chainId, transaction, sendBalanceTransaction]);
+    const layoutProps = React.useMemo(() => {
+        var _a;
+        return ({
+            alert,
+            copykey,
+            currentToken,
+            disableSendButton: isBalanceLoading,
+            displayPoweredByDynamicFooter,
+            error: errorMessage,
+            hideModal,
+            isGasSponsored,
+            isGasSponsoredLoading,
+            isLoading,
+            isNativeToken,
+            onClickBack,
+            onClickClose,
+            onClickSend: () => send(),
+            onSuccess: (tx) => onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(tx),
+            recipient,
+            sendBalanceTransaction,
+            simulationResult: (_a = simulationState.result) !== null && _a !== void 0 ? _a : undefined,
+            title,
+            total,
+            transaction,
+            transactionValue,
+            walletConnector,
+            walletKey: (primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.key) || '',
+        });
+    }, [
+        total,
+        recipient,
+        currentToken,
+        transactionValue,
         isNativeToken,
+        onClickBack,
+        onClickClose,
+        copykey,
+        title,
+        hideModal,
         isLoading,
+        send,
+        onSuccess,
+        displayPoweredByDynamicFooter,
+        isBalanceLoading,
+        errorMessage,
+        alert,
+        walletConnector,
+        transaction,
+        isGasSponsored,
+        isGasSponsoredLoading,
+        primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.key,
+        simulationState.result,
+        sendBalanceTransaction,
     ]);
-    return (jsxRuntime.jsxs(TransactionConfirmationPageLayout.TransactionConfirmationPageLayout, { onClickBack: onClickBack, onClickClose: onClickClose, copykey: copykey, title: title, appOrigin: appOrigin, appName: appName, appLogoUrl: appLogoUrl, hideModal: hideModal, isLoading: isLoading, onClickSend: () => send(), onSuccess: (tx) => onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(tx), displayPoweredByDynamicFooter: displayPoweredByDynamicFooter, disableSendButton: isBalanceLoading, error: errorMessage, alert: alert, walletConnector: walletConnector, transaction: transaction, total: total, currentToken: currentToken, transactionValue: transactionValue, isNativeToken: isNativeToken, isGasSponsored: isGasSponsored, isGasSponsoredLoading: isGasSponsoredLoading, walletKey: (primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.key) || '', children: [jsxRuntime.jsxs("div", { className: 'row flex', "data-testid": 'transaction-wallet_used', children: [jsxRuntime.jsx(Typography.Typography, { weight: 'regular', color: 'secondary', className: 'label', children: t('dyn_send_transaction.confirmation.data.wallet_used') }), jsxRuntime.jsxs(Typography.Typography, { weight: 'regular', color: 'primary', className: 'flex gap', children: [jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.key, width: 20, height: 20 }), ' ', shortenWalletAddress.shortenWalletAddress(transaction.from, 4, 4)] })] }), isModal && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: 'row flex', "data-testid": 'transaction-destination', children: [jsxRuntime.jsx(Typography.Typography, { weight: 'regular', color: 'secondary', className: 'label', children: t('dyn_send_transaction.confirmation.data.destination') }), jsxRuntime.jsxs(Typography.Typography, { weight: 'regular', color: 'primary', className: 'flex gap', children: [jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.key, width: 20, height: 20 }), ' ', shortenWalletAddress.shortenWalletAddress(transaction.to, 4, 4)] })] }), jsxRuntime.jsxs("div", { className: 'row flex', "data-testid": 'transaction-amount', children: [jsxRuntime.jsx(Typography.Typography, { weight: 'regular', color: 'secondary', className: 'label', children: t('dyn_send_transaction.confirmation.data.amount') }), jsxRuntime.jsx(Typography.Typography, { weight: 'regular', color: 'primary', className: 'flex gap', children: transaction.value
-                                    ? transaction.format(transaction.value, { precision: 6 })
-                                    : '' })] })] })), jsxRuntime.jsxs("div", { className: 'row flex', "data-testid": 'transaction-network_used', children: [jsxRuntime.jsx(Typography.Typography, { weight: 'regular', color: 'secondary', className: 'label', children: t('dyn_send_transaction.confirmation.data.network_used') }), jsxRuntime.jsx(Typography.Typography, { weight: 'regular', color: 'primary', children: chainName })] })] }));
+    return simulationState.status === SimulationStatus.LOADING ? null : (jsxRuntime.jsx(TransactionConfirmationPageLayout.TransactionConfirmationPageLayout, Object.assign({}, layoutProps)));
+};
+const calculateGasUnits = (userOp) => {
+    // Sum all gas units
+    const totalGasUnits = BigInt(userOp.callGasLimit || 0) +
+        BigInt(userOp.verificationGasLimit || 0) +
+        BigInt(userOp.preVerificationGas || 0);
+    // Multiply by maxFeePerGas to get the total gas cost in wei
+    const gasCost = totalGasUnits * BigInt(userOp.maxFeePerGas || 0);
+    return gasCost;
 };
 
 exports.FEE_REFRESH_INTERVAL = FEE_REFRESH_INTERVAL;

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

@@ -19,5 +19,6 @@ export type TransactionConfirmationViewProps = {
     isNativeToken?: boolean;
     transactionValue?: string;
     isModal?: boolean;
+    sendBalanceTransaction?: boolean;
 } & CopyKey;
 export declare const TransactionConfirmationView: FC<TransactionConfirmationViewProps>;