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

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 };

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

@@ -54,19 +54,28 @@ const useTransactionData = ({ provider, transaction, }) => {
         const { from } = transaction, transactionWithNoOrigin = _tslib.__rest(transaction, ["from"]);
         return provider.estimateGas(transactionWithNoOrigin);
     });
-    const { data: gasPrice, isLoading: isFeeDataLoading } = usePromise.usePromise(() => provider.getGasPrice());
-    const isGasPriceLoading = isEstimatedGasLoading || isFeeDataLoading;
-    const gasEstimate = React.useMemo(() => gasPrice && estimatedGas
-        ? ethers.ethers.BigNumber.from(gasPrice).mul(estimatedGas)
-        : undefined, [gasPrice, estimatedGas]);
+    const { data: providerGasPrice, isLoading: isProviderGasPrice } = usePromise.usePromise(() => provider.getGasPrice(), []);
+    const { data: transactionGasPrice, isLoading: isTransactionGasPriceLoading } = usePromise.usePromise(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        const gasPrice = yield transaction.gasPrice;
+        return gasPrice ? ethers.ethers.BigNumber.from(gasPrice) : undefined;
+    }), [transaction.gasPrice]);
+    const isGasPriceLoading = isEstimatedGasLoading || isProviderGasPrice || isTransactionGasPriceLoading;
+    const isGasLoading = isProviderGasPrice || isTransactionGasPriceLoading;
+    const transactionGas = React.useMemo(() => transactionGasPrice && estimatedGas
+        ? ethers.ethers.BigNumber.from(transactionGasPrice).mul(estimatedGas)
+        : undefined, [estimatedGas, transactionGasPrice]);
+    const gasEstimate = React.useMemo(() => !transactionGasPrice && providerGasPrice && estimatedGas
+        ? ethers.ethers.BigNumber.from(providerGasPrice).mul(estimatedGas)
+        : undefined, [transactionGasPrice, estimatedGas, providerGasPrice]);
     const { data: transactionToAddress, isLoading: isTransactionToAddressLoading, } = usePromise.usePromise(() => transaction.to);
     const { data: transactionFromAddress, isLoading: isTransactionFromAddressLoading, } = usePromise.usePromise(() => transaction.from);
     const total = React.useMemo(() => {
-        if (gasEstimate !== undefined && transactionValue !== undefined) {
-            return gasEstimate.add(transactionValue);
+        const transactionGasFee = transactionGas || gasEstimate;
+        if (transactionGasFee !== undefined && transactionValue !== undefined) {
+            return transactionGasFee.add(transactionValue);
         }
         return transactionValue || gasEstimate;
-    }, [gasEstimate, transactionValue]);
+    }, [gasEstimate, transactionGas, transactionValue]);
     const isLoading = React.useMemo(() => isEffectiveValueLoading ||
         isGasPriceLoading ||
         isTransactionToAddressLoading ||
@@ -79,12 +88,16 @@ const useTransactionData = ({ provider, transaction, }) => {
     return {
         gasEstimate,
         isEffectiveValueLoading,
+        isGasLoading,
         isGasPriceLoading,
         isLoading,
         isTransactionFromAddressLoading,
+        isTransactionGasPriceLoading,
         isTransactionToAddressLoading,
         total,
         transactionFromAddress,
+        transactionGas,
+        transactionGasPrice,
         transactionToAddress,
         transactionValue,
     };

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

@@ -6,12 +6,16 @@ type TransactionDataHookProps = {
 export declare const useTransactionData: ({ provider, transaction, }: TransactionDataHookProps) => {
     gasEstimate: ethers.BigNumber | undefined;
     isEffectiveValueLoading: boolean;
+    isGasLoading: boolean;
     isGasPriceLoading: boolean;
     isLoading: boolean;
     isTransactionFromAddressLoading: boolean;
+    isTransactionGasPriceLoading: boolean;
     isTransactionToAddressLoading: boolean;
     total: ethers.BigNumber | undefined;
     transactionFromAddress: string | undefined;
+    transactionGas: ethers.BigNumber | undefined;
+    transactionGasPrice: ethers.BigNumber | undefined;
     transactionToAddress: string | undefined;
     transactionValue: ethers.BigNumber | undefined;
 };

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

@@ -50,19 +50,28 @@ const useTransactionData = ({ provider, transaction, }) => {
         const { from } = transaction, transactionWithNoOrigin = __rest(transaction, ["from"]);
         return provider.estimateGas(transactionWithNoOrigin);
     });
-    const { data: gasPrice, isLoading: isFeeDataLoading } = usePromise(() => provider.getGasPrice());
-    const isGasPriceLoading = isEstimatedGasLoading || isFeeDataLoading;
-    const gasEstimate = useMemo(() => gasPrice && estimatedGas
-        ? ethers.BigNumber.from(gasPrice).mul(estimatedGas)
-        : undefined, [gasPrice, estimatedGas]);
+    const { data: providerGasPrice, isLoading: isProviderGasPrice } = usePromise(() => provider.getGasPrice(), []);
+    const { data: transactionGasPrice, isLoading: isTransactionGasPriceLoading } = usePromise(() => __awaiter(void 0, void 0, void 0, function* () {
+        const gasPrice = yield transaction.gasPrice;
+        return gasPrice ? ethers.BigNumber.from(gasPrice) : undefined;
+    }), [transaction.gasPrice]);
+    const isGasPriceLoading = isEstimatedGasLoading || isProviderGasPrice || isTransactionGasPriceLoading;
+    const isGasLoading = isProviderGasPrice || isTransactionGasPriceLoading;
+    const transactionGas = useMemo(() => transactionGasPrice && estimatedGas
+        ? ethers.BigNumber.from(transactionGasPrice).mul(estimatedGas)
+        : undefined, [estimatedGas, transactionGasPrice]);
+    const gasEstimate = useMemo(() => !transactionGasPrice && providerGasPrice && estimatedGas
+        ? ethers.BigNumber.from(providerGasPrice).mul(estimatedGas)
+        : undefined, [transactionGasPrice, estimatedGas, providerGasPrice]);
     const { data: transactionToAddress, isLoading: isTransactionToAddressLoading, } = usePromise(() => transaction.to);
     const { data: transactionFromAddress, isLoading: isTransactionFromAddressLoading, } = usePromise(() => transaction.from);
     const total = useMemo(() => {
-        if (gasEstimate !== undefined && transactionValue !== undefined) {
-            return gasEstimate.add(transactionValue);
+        const transactionGasFee = transactionGas || gasEstimate;
+        if (transactionGasFee !== undefined && transactionValue !== undefined) {
+            return transactionGasFee.add(transactionValue);
         }
         return transactionValue || gasEstimate;
-    }, [gasEstimate, transactionValue]);
+    }, [gasEstimate, transactionGas, transactionValue]);
     const isLoading = useMemo(() => isEffectiveValueLoading ||
         isGasPriceLoading ||
         isTransactionToAddressLoading ||
@@ -75,12 +84,16 @@ const useTransactionData = ({ provider, transaction, }) => {
     return {
         gasEstimate,
         isEffectiveValueLoading,
+        isGasLoading,
         isGasPriceLoading,
         isLoading,
         isTransactionFromAddressLoading,
+        isTransactionGasPriceLoading,
         isTransactionToAddressLoading,
         total,
         transactionFromAddress,
+        transactionGas,
+        transactionGasPrice,
         transactionToAddress,
         transactionValue,
     };