@dynamic-labs/sdk-react-core 0.17.27 → 0.17.29

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

@@ -0,0 +1,37 @@
+import { usePromise } from '../usePromise/usePromise.js';
+
+const increaseGasPrice = (gasPrice, increasePercentage) => {
+    const increaseFactor = 100 + increasePercentage;
+    return gasPrice.mul(increaseFactor).div(100);
+};
+/**
+ * A React Hook that returns a transaction object with the gas price set to the current gas price from the provider.
+ * The gas price is increased by a certain percentage specified by the user. The hook also allows the user to enable
+ * or disable this functionality.
+ *
+ * @param {Object} props - The properties for the hook.
+ * @param {ethers.providers.Provider} props.provider - The provider to use for getting the current gas price.
+ * @param {ethers.utils.Deferrable<ethers.providers.TransactionRequest>} props.transaction - The transaction object.
+ * @param {number} props.increasePercentage - The percentage by which to increase the current gas price.
+ * @param {boolean} [props.enabled=true] - A flag to enable or disable the gas price increase functionality.
+ *
+ * @returns {ethers.utils.Deferrable<ethers.providers.TransactionRequest>} A new transaction object with the gas price.
+ * If the `enabled` flag is set to false, or if the gas price is not available, or if the transaction already has a
+ * gas price set, the original transaction object is returned.
+ *
+ * @example
+ * const updatedTransaction = useTransactionWithGasPrice({
+ *   provider: myProvider,
+ *   transaction: myTransaction,
+ *   increasePercentage: 10,
+ *   enabled: true,
+ * });
+ */
+const useTransactionWithGasPrice = ({ increasePercentage = 0, provider, transaction, enabled = true, }) => {
+    const { data: gasPrice } = usePromise(() => provider.getGasPrice(), [transaction, provider]);
+    if (!enabled || !gasPrice || Boolean(transaction.gasPrice))
+        return transaction;
+    return Object.assign(Object.assign({}, transaction), { gasPrice: increaseGasPrice(gasPrice, increasePercentage) });
+};
+
+export { useTransactionWithGasPrice };

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

@@ -58,27 +58,28 @@ const useWalletUiUtils = ({ appLogoUrl, appName, getAppOrigin, }) => {
         }
         return true;
     }, [confirmationStateRef]);
-    const signMessage = React.useCallback(({ message, handler }) => {
-        if (!shouldConfirmAction()) {
-            return handler(message);
-        }
-        return openSignMessage((resolve, reject) => (jsxRuntime.jsx(SignMessageConfirmationModal.SignMessageConfirmationModal, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: getAppOrigin(), message: message, handler: handler, onSignMessage: resolve, onReject: reject })));
-    }, [appLogoUrl, appName, getAppOrigin, openSignMessage, shouldConfirmAction]);
-    const sendTransaction = React.useCallback(({ transaction, handler, provider }) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        if (!shouldConfirmAction()) {
-            return handler(transaction);
-        }
-        return openSendTransaction((resolve, reject) => (jsxRuntime.jsx(TransactionConfirmationModal.TransactionConfirmationModal, { title: 'Send Transaction', transaction: transaction, handler: handler, onTransactionResponseSuccess: resolve, onReject: reject, provider: provider })));
-    }), [openSendTransaction, shouldConfirmAction]);
-    const disabledConfirmationOnce = React.useCallback(() => {
+    const disableConfirmationOnce = React.useCallback(() => {
         confirmationStateRef.current = 'disabled';
     }, []);
-    const walletUiUtils = React.useMemo(() => ({
-        disabledConfirmationOnce,
-        sendTransaction,
-        signMessage,
-    }), [signMessage, disabledConfirmationOnce, sendTransaction]);
-    return React.useMemo(() => [modal || sendTransactionModal, walletUiUtils], [modal, sendTransactionModal, walletUiUtils]);
+    const createWalletUiUtils = React.useCallback((walletConnector) => ({
+        sendTransaction: ({ transaction, handler, provider }) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+            if (!shouldConfirmAction()) {
+                return handler(transaction);
+            }
+            return openSendTransaction((resolve, reject) => (jsxRuntime.jsx(TransactionConfirmationModal.TransactionConfirmationModal, { title: 'Send Transaction', transaction: transaction, handler: handler, onTransactionResponseSuccess: resolve, onReject: reject, provider: provider, walletConnector: walletConnector })));
+        }),
+        signMessage: ({ message, handler }) => {
+            if (!shouldConfirmAction()) {
+                return handler(message);
+            }
+            return openSignMessage((resolve, reject) => (jsxRuntime.jsx(SignMessageConfirmationModal.SignMessageConfirmationModal, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: getAppOrigin(), message: message, handler: handler, onSignMessage: resolve, onReject: reject })));
+        },
+    }), [shouldConfirmAction]);
+    return React.useMemo(() => [
+        modal || sendTransactionModal,
+        createWalletUiUtils,
+        { disableConfirmationOnce },
+    ], [modal, sendTransactionModal, createWalletUiUtils, disableConfirmationOnce]);
 };
 
 exports.useWalletUiUtils = useWalletUiUtils;

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

@@ -1,4 +1,7 @@
 import { ReactNode } from 'react';
 import { WalletUiUtils } from '@dynamic-labs/types';
+import { WalletConnector } from '@dynamic-labs/wallet-connector-core';
 import { WalletUiUtilsHookProps } from './useWalletUiUtils.types';
-export declare const useWalletUiUtils: ({ appLogoUrl, appName, getAppOrigin, }: WalletUiUtilsHookProps) => [ReactNode | undefined, WalletUiUtils];
+export declare const useWalletUiUtils: ({ appLogoUrl, appName, getAppOrigin, }: WalletUiUtilsHookProps) => [ReactNode, (connector: WalletConnector) => WalletUiUtils, {
+    disableConfirmationOnce: () => void;
+}];

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

@@ -54,27 +54,28 @@ const useWalletUiUtils = ({ appLogoUrl, appName, getAppOrigin, }) => {
         }
         return true;
     }, [confirmationStateRef]);
-    const signMessage = useCallback(({ message, handler }) => {
-        if (!shouldConfirmAction()) {
-            return handler(message);
-        }
-        return openSignMessage((resolve, reject) => (jsx(SignMessageConfirmationModal, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: getAppOrigin(), message: message, handler: handler, onSignMessage: resolve, onReject: reject })));
-    }, [appLogoUrl, appName, getAppOrigin, openSignMessage, shouldConfirmAction]);
-    const sendTransaction = useCallback(({ transaction, handler, provider }) => __awaiter(void 0, void 0, void 0, function* () {
-        if (!shouldConfirmAction()) {
-            return handler(transaction);
-        }
-        return openSendTransaction((resolve, reject) => (jsx(TransactionConfirmationModal, { title: 'Send Transaction', transaction: transaction, handler: handler, onTransactionResponseSuccess: resolve, onReject: reject, provider: provider })));
-    }), [openSendTransaction, shouldConfirmAction]);
-    const disabledConfirmationOnce = useCallback(() => {
+    const disableConfirmationOnce = useCallback(() => {
         confirmationStateRef.current = 'disabled';
     }, []);
-    const walletUiUtils = useMemo(() => ({
-        disabledConfirmationOnce,
-        sendTransaction,
-        signMessage,
-    }), [signMessage, disabledConfirmationOnce, sendTransaction]);
-    return useMemo(() => [modal || sendTransactionModal, walletUiUtils], [modal, sendTransactionModal, walletUiUtils]);
+    const createWalletUiUtils = useCallback((walletConnector) => ({
+        sendTransaction: ({ transaction, handler, provider }) => __awaiter(void 0, void 0, void 0, function* () {
+            if (!shouldConfirmAction()) {
+                return handler(transaction);
+            }
+            return openSendTransaction((resolve, reject) => (jsx(TransactionConfirmationModal, { title: 'Send Transaction', transaction: transaction, handler: handler, onTransactionResponseSuccess: resolve, onReject: reject, provider: provider, walletConnector: walletConnector })));
+        }),
+        signMessage: ({ message, handler }) => {
+            if (!shouldConfirmAction()) {
+                return handler(message);
+            }
+            return openSignMessage((resolve, reject) => (jsx(SignMessageConfirmationModal, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: getAppOrigin(), message: message, handler: handler, onSignMessage: resolve, onReject: reject })));
+        },
+    }), [shouldConfirmAction]);
+    return useMemo(() => [
+        modal || sendTransactionModal,
+        createWalletUiUtils,
+        { disableConfirmationOnce },
+    ], [modal, sendTransactionModal, createWalletUiUtils, disableConfirmationOnce]);
 };
 
 export { useWalletUiUtils };

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

@@ -5,31 +5,31 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var data = require('../../../views/WalletList/data.cjs');
 
-const useWallets = ({ projectSettings, appLogoUrl, appName, flowNetwork, networkConfigurations, walletConnectV1Bridge, walletUiUtils, walletConnectorsProp, }) => {
+const useWallets = ({ projectSettings, appLogoUrl, appName, flowNetwork, networkConfigurations, walletConnectV1Bridge, createWalletUiUtils, walletConnectorsProp, }) => {
     const wallets = React.useMemo(() => {
         if (!projectSettings)
             return [];
         const installedWallets = data.getInstalledWallets(projectSettings, {
             appLogoUrl,
             appName,
+            createWalletUiUtils,
             customerApiProviders: projectSettings.providers || [],
             flowNetwork,
             networkConfigurations,
             skipMemo: true,
             walletConnectV1Bridge,
             walletConnectorsProp: walletConnectorsProp !== null && walletConnectorsProp !== void 0 ? walletConnectorsProp : [],
-            walletUiUtils,
         });
         const notInstalledWallets = data.getNotInstalledWallets(projectSettings, {
             appLogoUrl,
             appName,
+            createWalletUiUtils,
             customerApiProviders: projectSettings.providers || [],
             flowNetwork,
             networkConfigurations,
             skipMemo: true,
             walletConnectV1Bridge,
             walletConnectorsProp: walletConnectorsProp !== null && walletConnectorsProp !== void 0 ? walletConnectorsProp : [],
-            walletUiUtils,
         });
         return [...installedWallets, ...notInstalledWallets];
         // Cannot include walletUiUtils in the dependency array because it will cause an infinite loop

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

@@ -1,6 +1,6 @@
 import { ProjectSettings } from '@dynamic-labs/sdk-api';
 import { NetworkConfigurationMap, WalletUiUtils } from '@dynamic-labs/types';
-import { WalletConnectorsMethod } from '@dynamic-labs/wallet-connector-core';
+import { WalletConnector, WalletConnectorsMethod } from '@dynamic-labs/wallet-connector-core';
 type Props = {
     appLogoUrl?: string;
     appName?: string;
@@ -9,9 +9,9 @@ type Props = {
     projectSettings: ProjectSettings | undefined;
     walletConnectV1Bridge?: string;
     walletConnectorsProp?: WalletConnectorsMethod[];
-    walletUiUtils: WalletUiUtils;
+    createWalletUiUtils: (connector: WalletConnector) => WalletUiUtils;
 };
-export declare const useWallets: ({ projectSettings, appLogoUrl, appName, flowNetwork, networkConfigurations, walletConnectV1Bridge, walletUiUtils, walletConnectorsProp, }: Props) => {
+export declare const useWallets: ({ projectSettings, appLogoUrl, appName, flowNetwork, networkConfigurations, walletConnectV1Bridge, createWalletUiUtils, walletConnectorsProp, }: Props) => {
     wallets: import("../../../shared").WalletOption[];
 };
 export {};

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

@@ -1,31 +1,31 @@
 import { useMemo } from 'react';
 import { getInstalledWallets, getNotInstalledWallets } from '../../../views/WalletList/data.js';
 
-const useWallets = ({ projectSettings, appLogoUrl, appName, flowNetwork, networkConfigurations, walletConnectV1Bridge, walletUiUtils, walletConnectorsProp, }) => {
+const useWallets = ({ projectSettings, appLogoUrl, appName, flowNetwork, networkConfigurations, walletConnectV1Bridge, createWalletUiUtils, walletConnectorsProp, }) => {
     const wallets = useMemo(() => {
         if (!projectSettings)
             return [];
         const installedWallets = getInstalledWallets(projectSettings, {
             appLogoUrl,
             appName,
+            createWalletUiUtils,
             customerApiProviders: projectSettings.providers || [],
             flowNetwork,
             networkConfigurations,
             skipMemo: true,
             walletConnectV1Bridge,
             walletConnectorsProp: walletConnectorsProp !== null && walletConnectorsProp !== void 0 ? walletConnectorsProp : [],
-            walletUiUtils,
         });
         const notInstalledWallets = getNotInstalledWallets(projectSettings, {
             appLogoUrl,
             appName,
+            createWalletUiUtils,
             customerApiProviders: projectSettings.providers || [],
             flowNetwork,
             networkConfigurations,
             skipMemo: true,
             walletConnectV1Bridge,
             walletConnectorsProp: walletConnectorsProp !== null && walletConnectorsProp !== void 0 ? walletConnectorsProp : [],
-            walletUiUtils,
         });
         return [...installedWallets, ...notInstalledWallets];
         // Cannot include walletUiUtils in the dependency array because it will cause an infinite loop

package/src/lib/views/SendBalanceView/SendBalanceView.cjs

@@ -2,7 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _tslib = require('../../../../_virtual/_tslib.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var ethers = require('ethers');
@@ -39,9 +38,9 @@ require('../../components/Popper/Popper/Popper.cjs');
 require('../../components/Popper/PopperContext/PopperContext.cjs');
 var SendBalancePageLayout = require('../../components/SendBalancePageLayout/SendBalancePageLayout.cjs');
 require('../../components/MenuList/Dropdown/Dropdown.cjs');
-var TransactionConfirmationView = require('../TransactionConfirmationView/TransactionConfirmationView.cjs');
-var TransactionStatusLayout = require('../../components/TransactionStatusLayout/TransactionStatusLayout.cjs');
 var useFetchCurrency = require('../../widgets/DynamicWidget/hooks/useFetchCurrency/useFetchCurrency.cjs');
+var TransactionStatusLayout = require('../../components/TransactionStatusLayout/TransactionStatusLayout.cjs');
+var TransactionStage = require('./components/TransactionStage/TransactionStage.cjs');
 require('../../context/MockContext/MockContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
 var usePromise = require('../../utils/hooks/usePromise/usePromise.cjs');
@@ -49,18 +48,17 @@ require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
 
 const SendBalanceView = ({ initialRecipientAddress = '', initialValue, onClickBack, onClickClose, onError, onSuccess, onDone, displayPoweredByDynamicFooter = false, }) => {
     const [stage, setStage] = React.useState('form');
-    const { primaryWallet, walletUiUtils, network } = useInternalDynamicContext.useInternalDynamicContext();
+    const { primaryWallet, network } = useInternalDynamicContext.useInternalDynamicContext();
     const [value, setValue] = React.useState(initialValue !== null && initialValue !== void 0 ? initialValue : null);
     const [recipientAddress, setRecipientAddress] = React.useState(initialRecipientAddress);
     const transactionRef = React.useRef(null);
     if (!primaryWallet) {
         throw new utils.DynamicError('Primary wallet is not available, send balance cannot be displayed');
     }
-    const { data: balance } = usePromise.usePromise(() => primaryWallet.connector.getBalance(), [primaryWallet]);
-    const { data: provider } = usePromise.usePromise(() => primaryWallet.connector.getWeb3Provider(), [primaryWallet]);
-    const evmNetworks = ((primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) &&
-        primaryWallet.connector.evmNetworks) ||
-        [];
+    const walletConnector = primaryWallet.connector;
+    const { data: balance } = usePromise.usePromise(() => walletConnector.getBalance(), [walletConnector]);
+    const { data: provider } = usePromise.usePromise(() => walletConnector.getWeb3Provider(), [walletConnector]);
+    const evmNetworks = (walletConnector && walletConnector.evmNetworks) || [];
     const evmNetwork = evmNetworks.find((evmNetwork) => evmNetwork.chainId === network);
     const networkIcon = evmNetwork && (jsxRuntime.jsx("img", { src: evmNetwork === null || evmNetwork === void 0 ? void 0 : evmNetwork.iconUrls[0], alt: `${evmNetwork === null || evmNetwork === void 0 ? void 0 : evmNetwork.name} icon` }));
     const networkName = (evmNetwork === null || evmNetwork === void 0 ? void 0 : evmNetwork.vanityName) || (evmNetwork === null || evmNetwork === void 0 ? void 0 : evmNetwork.name);
@@ -85,16 +83,11 @@ const SendBalanceView = ({ initialRecipientAddress = '', initialValue, onClickBa
             to: recipientAddress,
             value,
         };
-        return (jsxRuntime.jsx(TransactionConfirmationView.TransactionConfirmationView, { provider: provider, transaction: transaction, title: 'Confirm transaction', onClickBack: () => setStage('form'), onError: onError, displayPoweredByDynamicFooter: displayPoweredByDynamicFooter, onSuccess: (transaction) => {
+        return (jsxRuntime.jsx(TransactionStage.TransactionStage, { walletConnector: walletConnector, provider: provider, transaction: transaction, title: 'Confirm transaction', onClickBack: () => setStage('form'), onError: onError, displayPoweredByDynamicFooter: displayPoweredByDynamicFooter, onSuccess: (transaction) => {
                 transactionRef.current = transaction;
                 setStage('success');
                 onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(transactionRef.current);
-            }, mutation: () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-                walletUiUtils.disabledConfirmationOnce();
-                const signer = provider.getSigner();
-                const sentTransaction = yield signer.sendTransaction(transaction);
-                return sentTransaction;
-            }) }));
+            } }));
     };
     const buildSuccessState = () => {
         var _a;

package/src/lib/views/SendBalanceView/SendBalanceView.js

@@ -1,4 +1,3 @@
-import { __awaiter } from '../../../../_virtual/_tslib.js';
 import { jsx } from 'react/jsx-runtime';
 import { useState, useRef } from 'react';
 import { utils } from 'ethers';
@@ -35,9 +34,9 @@ import '../../components/Popper/Popper/Popper.js';
 import '../../components/Popper/PopperContext/PopperContext.js';
 import { SendBalancePageLayout } from '../../components/SendBalancePageLayout/SendBalancePageLayout.js';
 import '../../components/MenuList/Dropdown/Dropdown.js';
-import { TransactionConfirmationView } from '../TransactionConfirmationView/TransactionConfirmationView.js';
-import { TransactionStatusLayout } from '../../components/TransactionStatusLayout/TransactionStatusLayout.js';
 import { useFetchCurrency } from '../../widgets/DynamicWidget/hooks/useFetchCurrency/useFetchCurrency.js';
+import { TransactionStatusLayout } from '../../components/TransactionStatusLayout/TransactionStatusLayout.js';
+import { TransactionStage } from './components/TransactionStage/TransactionStage.js';
 import '../../context/MockContext/MockContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
 import { usePromise } from '../../utils/hooks/usePromise/usePromise.js';
@@ -45,18 +44,17 @@ import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
 
 const SendBalanceView = ({ initialRecipientAddress = '', initialValue, onClickBack, onClickClose, onError, onSuccess, onDone, displayPoweredByDynamicFooter = false, }) => {
     const [stage, setStage] = useState('form');
-    const { primaryWallet, walletUiUtils, network } = useInternalDynamicContext();
+    const { primaryWallet, network } = useInternalDynamicContext();
     const [value, setValue] = useState(initialValue !== null && initialValue !== void 0 ? initialValue : null);
     const [recipientAddress, setRecipientAddress] = useState(initialRecipientAddress);
     const transactionRef = useRef(null);
     if (!primaryWallet) {
         throw new DynamicError('Primary wallet is not available, send balance cannot be displayed');
     }
-    const { data: balance } = usePromise(() => primaryWallet.connector.getBalance(), [primaryWallet]);
-    const { data: provider } = usePromise(() => primaryWallet.connector.getWeb3Provider(), [primaryWallet]);
-    const evmNetworks = ((primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) &&
-        primaryWallet.connector.evmNetworks) ||
-        [];
+    const walletConnector = primaryWallet.connector;
+    const { data: balance } = usePromise(() => walletConnector.getBalance(), [walletConnector]);
+    const { data: provider } = usePromise(() => walletConnector.getWeb3Provider(), [walletConnector]);
+    const evmNetworks = (walletConnector && walletConnector.evmNetworks) || [];
     const evmNetwork = evmNetworks.find((evmNetwork) => evmNetwork.chainId === network);
     const networkIcon = evmNetwork && (jsx("img", { src: evmNetwork === null || evmNetwork === void 0 ? void 0 : evmNetwork.iconUrls[0], alt: `${evmNetwork === null || evmNetwork === void 0 ? void 0 : evmNetwork.name} icon` }));
     const networkName = (evmNetwork === null || evmNetwork === void 0 ? void 0 : evmNetwork.vanityName) || (evmNetwork === null || evmNetwork === void 0 ? void 0 : evmNetwork.name);
@@ -81,16 +79,11 @@ const SendBalanceView = ({ initialRecipientAddress = '', initialValue, onClickBa
             to: recipientAddress,
             value,
         };
-        return (jsx(TransactionConfirmationView, { provider: provider, transaction: transaction, title: 'Confirm transaction', onClickBack: () => setStage('form'), onError: onError, displayPoweredByDynamicFooter: displayPoweredByDynamicFooter, onSuccess: (transaction) => {
+        return (jsx(TransactionStage, { walletConnector: walletConnector, provider: provider, transaction: transaction, title: 'Confirm transaction', onClickBack: () => setStage('form'), onError: onError, displayPoweredByDynamicFooter: displayPoweredByDynamicFooter, onSuccess: (transaction) => {
                 transactionRef.current = transaction;
                 setStage('success');
                 onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(transactionRef.current);
-            }, mutation: () => __awaiter(void 0, void 0, void 0, function* () {
-                walletUiUtils.disabledConfirmationOnce();
-                const signer = provider.getSigner();
-                const sentTransaction = yield signer.sendTransaction(transaction);
-                return sentTransaction;
-            }) }));
+            } }));
     };
     const buildSuccessState = () => {
         var _a;

package/src/lib/views/SendBalanceView/components/TransactionStage/TransactionStage.cjs

@@ -0,0 +1,63 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../../../_virtual/_tslib.cjs');
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+require('@dynamic-labs/utils');
+require('@dynamic-labs/sdk-api');
+require('../../../../config/ApiEndpoint.cjs');
+require('../../../../shared/logger.cjs');
+require('../../../../config/LSSuffix.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+require('../../../../context/ViewContext/ViewContext.cjs');
+require('../../../../utils/constants/colors.cjs');
+require('ethers');
+require('../../../../shared/consts/index.cjs');
+require('@dynamic-labs/multi-wallet');
+var isMagicConnector = require('../../../../utils/functions/isMagicConnector/isMagicConnector.cjs');
+require('@dynamic-labs/rpc-providers');
+var useInternalDynamicContext = require('../../../../context/DynamicContext/useInternalDynamicContext.cjs');
+require('../../../../context/ErrorContext/ErrorContext.cjs');
+require('../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('react-dom');
+require('../../../../components/ShadowDOM/ShadowDOM.cjs');
+require('../../../../context/ThemeContext/ThemeContext.cjs');
+require('react-focus-lock');
+require('../../../../components/Transition/ZoomTransition/ZoomTransition.cjs');
+require('../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
+require('../../../../components/IconButton/IconButton.cjs');
+require('../../../../components/Alert/Alert.cjs');
+require('@dynamic-labs/wallet-book');
+require('../../../../components/Popper/Popper/Popper.cjs');
+require('../../../../components/Popper/PopperContext/PopperContext.cjs');
+require('formik');
+require('yup');
+require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
+var TransactionConfirmationView = require('../../../TransactionConfirmationView/TransactionConfirmationView.cjs');
+require('../../../../context/MockContext/MockContext.cjs');
+require('../../../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+var useTransactionWithGasPrice = require('../../../../utils/hooks/useTransactionWithGasPrice/useTransactionWithGasPrice.cjs');
+
+const TransactionStage = (_a) => {
+    var { transaction, provider, walletConnector } = _a, rest = _tslib.__rest(_a, ["transaction", "provider", "walletConnector"]);
+    const { disableWalletConfirmationOnce } = useInternalDynamicContext.useInternalDynamicContext();
+    const transactionWithGasPrice = useTransactionWithGasPrice.useTransactionWithGasPrice({
+        enabled: isMagicConnector.isMagicConnector(walletConnector),
+        increasePercentage: 5,
+        provider,
+        transaction,
+    });
+    return (jsxRuntime.jsx(TransactionConfirmationView.TransactionConfirmationView, Object.assign({ provider: provider, transaction: transactionWithGasPrice, mutation: () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+            disableWalletConfirmationOnce();
+            const signer = provider.getSigner();
+            const sentTransaction = yield signer.sendTransaction(transactionWithGasPrice);
+            return sentTransaction;
+        }) }, rest)));
+};
+
+exports.TransactionStage = TransactionStage;

package/src/lib/views/SendBalanceView/components/TransactionStage/TransactionStage.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { WalletConnector } from '@dynamic-labs/wallet-connector-core';
+import { TransactionConfirmationViewProps } from '../../../TransactionConfirmationView';
+type TransactionStageProps = Omit<TransactionConfirmationViewProps, 'mutation'> & {
+    walletConnector: WalletConnector;
+};
+export declare const TransactionStage: FC<TransactionStageProps>;
+export {};

package/src/lib/views/SendBalanceView/components/TransactionStage/TransactionStage.js

@@ -0,0 +1,59 @@
+import { __rest, __awaiter } from '../../../../../../_virtual/_tslib.js';
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import '@dynamic-labs/utils';
+import '@dynamic-labs/sdk-api';
+import '../../../../config/ApiEndpoint.js';
+import '../../../../shared/logger.js';
+import '../../../../config/LSSuffix.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import '../../../../context/ViewContext/ViewContext.js';
+import '../../../../utils/constants/colors.js';
+import 'ethers';
+import '../../../../shared/consts/index.js';
+import '@dynamic-labs/multi-wallet';
+import { isMagicConnector } from '../../../../utils/functions/isMagicConnector/isMagicConnector.js';
+import '@dynamic-labs/rpc-providers';
+import { useInternalDynamicContext } from '../../../../context/DynamicContext/useInternalDynamicContext.js';
+import '../../../../context/ErrorContext/ErrorContext.js';
+import '../../../../context/AccessDeniedContext/AccessDeniedContext.js';
+import 'react-dom';
+import '../../../../components/ShadowDOM/ShadowDOM.js';
+import '../../../../context/ThemeContext/ThemeContext.js';
+import 'react-focus-lock';
+import '../../../../components/Transition/ZoomTransition/ZoomTransition.js';
+import '../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../../../../components/Transition/OpacityTransition/OpacityTransition.js';
+import '../../../../components/IconButton/IconButton.js';
+import '../../../../components/Alert/Alert.js';
+import '@dynamic-labs/wallet-book';
+import '../../../../components/Popper/Popper/Popper.js';
+import '../../../../components/Popper/PopperContext/PopperContext.js';
+import 'formik';
+import 'yup';
+import '../../../../components/MenuList/Dropdown/Dropdown.js';
+import { TransactionConfirmationView } from '../../../TransactionConfirmationView/TransactionConfirmationView.js';
+import '../../../../context/MockContext/MockContext.js';
+import '../../../../context/CaptchaContext/CaptchaContext.js';
+import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
+import { useTransactionWithGasPrice } from '../../../../utils/hooks/useTransactionWithGasPrice/useTransactionWithGasPrice.js';
+
+const TransactionStage = (_a) => {
+    var { transaction, provider, walletConnector } = _a, rest = __rest(_a, ["transaction", "provider", "walletConnector"]);
+    const { disableWalletConfirmationOnce } = useInternalDynamicContext();
+    const transactionWithGasPrice = useTransactionWithGasPrice({
+        enabled: isMagicConnector(walletConnector),
+        increasePercentage: 5,
+        provider,
+        transaction,
+    });
+    return (jsx(TransactionConfirmationView, Object.assign({ provider: provider, transaction: transactionWithGasPrice, mutation: () => __awaiter(void 0, void 0, void 0, function* () {
+            disableWalletConfirmationOnce();
+            const signer = provider.getSigner();
+            const sentTransaction = yield signer.sendTransaction(transactionWithGasPrice);
+            return sentTransaction;
+        }) }, rest)));
+};
+
+export { TransactionStage };

package/src/lib/views/SendBalanceView/components/TransactionStage/index.d.ts

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

package/src/lib/views/SendBalanceView/components/index.d.ts

@@ -0,0 +1 @@
+export * from './TransactionStage';

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

@@ -65,7 +65,7 @@ const TransactionConfirmationView = ({ provider, transaction, mutation, onError,
         onFailure: (error) => onError === null || onError === void 0 ? void 0 : onError(error),
         onSuccess: (tx) => onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(tx),
     });
-    const { isLoading: isLoadingTransaction, isTransactionFromAddressLoading, isTransactionToAddressLoading, transactionFromAddress, transactionToAddress, isEffectiveValueLoading, transactionValue, gasEstimate, isGasPriceLoading, total, } = useTransactionData.useTransactionData({
+    const { isLoading: isLoadingTransaction, isTransactionFromAddressLoading, isTransactionToAddressLoading, transactionFromAddress, transactionToAddress, isEffectiveValueLoading, transactionGas, transactionValue, isGasLoading, gasEstimate, isGasPriceLoading, total, } = useTransactionData.useTransactionData({
         provider,
         transaction,
     });
@@ -90,7 +90,7 @@ const TransactionConfirmationView = ({ provider, transaction, mutation, onError,
         return `Insufficient funds due to gas price increase from estimate. Please add ${amountLeft} ${currencySymbol} to continue.`;
     }, [currencySymbol, hasInsufficientFunds, missingFunds]);
     return (jsxRuntime.jsxs(TransactionConfirmationPageLayout.TransactionConfirmationPageLayout, Object.assign({ onClickBack: onClickBack, onClickClose: onClickClose, title: title, appOrigin: appOrigin, appName: appName, appLogoUrl: appLogoUrl, isLoading: isLoading, onClickSend: () => send(), displayPoweredByDynamicFooter: displayPoweredByDynamicFooter, disableSendButton: isLoadingTransaction || hasInsufficientFunds, error: errorMessage, warningMessage: warningMessage }, { children: [jsxRuntime.jsx(TransactionRow.TransactionRow, Object.assign({ label: 'From (You)', isLoading: isTransactionFromAddressLoading, title: transactionFromAddress }, { children: shortenWalletAddress.shortenWalletAddress(transactionFromAddress, 4, 4) })), jsxRuntime.jsx(TransactionRow.TransactionRow, Object.assign({ label: 'To', isLoading: isTransactionToAddressLoading, title: transactionToAddress }, { children: transactionToAddress &&
-                    shortenWalletAddress.shortenWalletAddress(transactionToAddress, 4, 4) })), jsxRuntime.jsx(TransactionRow.TransactionRow, Object.assign({ label: 'Amount', isLoading: isEffectiveValueLoading, isEmpty: !transactionValue, title: transactionValue && formatBigNumber.formatBigNumber(transactionValue), suffix: currencySymbol, icon: chainIcon, dataTestId: 'transaction-amount' }, { children: transactionValue ? formatBigNumber.formatBigNumber(transactionValue, 10) : 0 })), jsxRuntime.jsx(TransactionRow.TransactionRow, Object.assign({ label: 'Gas (estimated)', isEmpty: !gasEstimate, isLoading: isGasPriceLoading, title: gasEstimate && formatBigNumber.formatBigNumber(gasEstimate), suffix: gasEstimate && currencySymbol, icon: gasEstimate && chainIcon, dataTestId: 'transaction-gas-free' }, { children: gasEstimate ? formatBigNumber.formatBigNumber(gasEstimate, 10) : 'N/A' })), jsxRuntime.jsx(TransactionRow.TransactionRow, Object.assign({ label: 'Total', isEmpty: !total, title: total && formatBigNumber.formatBigNumber(total), suffix: total && currencySymbol, icon: total && chainIcon, dataTestId: 'transaction-total' }, { children: total ? formatBigNumber.formatBigNumber(total, 10) : 'N/A' }))] })));
+                    shortenWalletAddress.shortenWalletAddress(transactionToAddress, 4, 4) })), jsxRuntime.jsx(TransactionRow.TransactionRow, Object.assign({ label: 'Amount', isLoading: isEffectiveValueLoading, isEmpty: !transactionValue, title: transactionValue && formatBigNumber.formatBigNumber(transactionValue), suffix: currencySymbol, icon: chainIcon, dataTestId: 'transaction-amount' }, { children: transactionValue ? formatBigNumber.formatBigNumber(transactionValue, 10) : 0 })), transactionGas ? (jsxRuntime.jsx(TransactionRow.TransactionRow, Object.assign({ label: 'Gas', isEmpty: !transactionGas, isLoading: isGasLoading, title: transactionGas && formatBigNumber.formatBigNumber(transactionGas), suffix: transactionGas && currencySymbol, icon: transactionGas && chainIcon, dataTestId: 'transaction-gas-fee' }, { children: transactionGas ? formatBigNumber.formatBigNumber(transactionGas, 10) : 'N/A' }))) : (jsxRuntime.jsx(TransactionRow.TransactionRow, Object.assign({ label: 'Gas (estimate)', isEmpty: !gasEstimate, isLoading: isGasPriceLoading, title: gasEstimate && formatBigNumber.formatBigNumber(gasEstimate), suffix: gasEstimate && currencySymbol, icon: gasEstimate && chainIcon, dataTestId: 'transaction-estimated-gas-fee' }, { children: gasEstimate ? formatBigNumber.formatBigNumber(gasEstimate, 10) : 'N/A' }))), jsxRuntime.jsx(TransactionRow.TransactionRow, Object.assign({ label: 'Total', isEmpty: !total, title: total && formatBigNumber.formatBigNumber(total), suffix: total && currencySymbol, icon: total && chainIcon, dataTestId: 'transaction-total' }, { children: total ? formatBigNumber.formatBigNumber(total, 10) : 'N/A' }))] })));
 };
 
 exports.TransactionConfirmationView = TransactionConfirmationView;

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

@@ -61,7 +61,7 @@ const TransactionConfirmationView = ({ provider, transaction, mutation, onError,
         onFailure: (error) => onError === null || onError === void 0 ? void 0 : onError(error),
         onSuccess: (tx) => onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(tx),
     });
-    const { isLoading: isLoadingTransaction, isTransactionFromAddressLoading, isTransactionToAddressLoading, transactionFromAddress, transactionToAddress, isEffectiveValueLoading, transactionValue, gasEstimate, isGasPriceLoading, total, } = useTransactionData({
+    const { isLoading: isLoadingTransaction, isTransactionFromAddressLoading, isTransactionToAddressLoading, transactionFromAddress, transactionToAddress, isEffectiveValueLoading, transactionGas, transactionValue, isGasLoading, gasEstimate, isGasPriceLoading, total, } = useTransactionData({
         provider,
         transaction,
     });
@@ -86,7 +86,7 @@ const TransactionConfirmationView = ({ provider, transaction, mutation, onError,
         return `Insufficient funds due to gas price increase from estimate. Please add ${amountLeft} ${currencySymbol} to continue.`;
     }, [currencySymbol, hasInsufficientFunds, missingFunds]);
     return (jsxs(TransactionConfirmationPageLayout, Object.assign({ onClickBack: onClickBack, onClickClose: onClickClose, title: title, appOrigin: appOrigin, appName: appName, appLogoUrl: appLogoUrl, isLoading: isLoading, onClickSend: () => send(), displayPoweredByDynamicFooter: displayPoweredByDynamicFooter, disableSendButton: isLoadingTransaction || hasInsufficientFunds, error: errorMessage, warningMessage: warningMessage }, { children: [jsx(TransactionRow, Object.assign({ label: 'From (You)', isLoading: isTransactionFromAddressLoading, title: transactionFromAddress }, { children: shortenWalletAddress(transactionFromAddress, 4, 4) })), jsx(TransactionRow, Object.assign({ label: 'To', isLoading: isTransactionToAddressLoading, title: transactionToAddress }, { children: transactionToAddress &&
-                    shortenWalletAddress(transactionToAddress, 4, 4) })), jsx(TransactionRow, Object.assign({ label: 'Amount', isLoading: isEffectiveValueLoading, isEmpty: !transactionValue, title: transactionValue && formatBigNumber(transactionValue), suffix: currencySymbol, icon: chainIcon, dataTestId: 'transaction-amount' }, { children: transactionValue ? formatBigNumber(transactionValue, 10) : 0 })), jsx(TransactionRow, Object.assign({ label: 'Gas (estimated)', isEmpty: !gasEstimate, isLoading: isGasPriceLoading, title: gasEstimate && formatBigNumber(gasEstimate), suffix: gasEstimate && currencySymbol, icon: gasEstimate && chainIcon, dataTestId: 'transaction-gas-free' }, { children: gasEstimate ? formatBigNumber(gasEstimate, 10) : 'N/A' })), jsx(TransactionRow, Object.assign({ label: 'Total', isEmpty: !total, title: total && formatBigNumber(total), suffix: total && currencySymbol, icon: total && chainIcon, dataTestId: 'transaction-total' }, { children: total ? formatBigNumber(total, 10) : 'N/A' }))] })));
+                    shortenWalletAddress(transactionToAddress, 4, 4) })), jsx(TransactionRow, Object.assign({ label: 'Amount', isLoading: isEffectiveValueLoading, isEmpty: !transactionValue, title: transactionValue && formatBigNumber(transactionValue), suffix: currencySymbol, icon: chainIcon, dataTestId: 'transaction-amount' }, { children: transactionValue ? formatBigNumber(transactionValue, 10) : 0 })), transactionGas ? (jsx(TransactionRow, Object.assign({ label: 'Gas', isEmpty: !transactionGas, isLoading: isGasLoading, title: transactionGas && formatBigNumber(transactionGas), suffix: transactionGas && currencySymbol, icon: transactionGas && chainIcon, dataTestId: 'transaction-gas-fee' }, { children: transactionGas ? formatBigNumber(transactionGas, 10) : 'N/A' }))) : (jsx(TransactionRow, Object.assign({ label: 'Gas (estimate)', isEmpty: !gasEstimate, isLoading: isGasPriceLoading, title: gasEstimate && formatBigNumber(gasEstimate), suffix: gasEstimate && currencySymbol, icon: gasEstimate && chainIcon, dataTestId: 'transaction-estimated-gas-fee' }, { children: gasEstimate ? formatBigNumber(gasEstimate, 10) : 'N/A' }))), jsx(TransactionRow, Object.assign({ label: 'Total', isEmpty: !total, title: total && formatBigNumber(total), suffix: total && currencySymbol, icon: total && chainIcon, dataTestId: 'transaction-total' }, { children: total ? formatBigNumber(total, 10) : 'N/A' }))] })));
 };
 
 export { TransactionConfirmationView };