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

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

@@ -4,22 +4,26 @@ export declare const useUserUpdateRequestInternal: ({ validationSchemaStripUnkno
     validationSchemaStripUnknown: boolean;
 }) => {
     updateUser: (userFields: UpdateUserFieldsArg, userEnvironmentId?: string) => Promise<{
-        isEmailVerificationRequired: false;
+        isEmailVerificationRequired: boolean;
+        missingFields: import("@dynamic-labs/sdk-api").ProjectSettingsKyc[];
         updateUserProfileResponse: import("@dynamic-labs/sdk-api").UpdateSelfResponse;
         verifyEmailFn?: undefined;
     } | {
-        isEmailVerificationRequired: true;
+        isEmailVerificationRequired: boolean;
+        missingFields: import("@dynamic-labs/sdk-api").ProjectSettingsKyc[];
         updateUserProfileResponse: import("@dynamic-labs/sdk-api").UpdateSelfResponse;
         verifyEmailFn: (verificationToken: string) => Promise<import("@dynamic-labs/sdk-api").UpdateSelfResponse>;
     }>;
 };
 export declare const useUserUpdateRequest: () => {
     updateUser: (userFields: UpdateUserFieldsArg, userEnvironmentId?: string) => Promise<{
-        isEmailVerificationRequired: false;
+        isEmailVerificationRequired: boolean;
+        missingFields: import("@dynamic-labs/sdk-api").ProjectSettingsKyc[];
         updateUserProfileResponse: import("@dynamic-labs/sdk-api").UpdateSelfResponse;
         verifyEmailFn?: undefined;
     } | {
-        isEmailVerificationRequired: true;
+        isEmailVerificationRequired: boolean;
+        missingFields: import("@dynamic-labs/sdk-api").ProjectSettingsKyc[];
         updateUserProfileResponse: import("@dynamic-labs/sdk-api").UpdateSelfResponse;
         verifyEmailFn: (verificationToken: string) => Promise<import("@dynamic-labs/sdk-api").UpdateSelfResponse>;
     }>;

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

@@ -7,6 +7,17 @@ import { isEmailVerificationRequired } from '../../functions/authenication/isEma
 import { useEmailVerificationContext } from '../../../context/EmailVerificationContext/EmailVerificationContext.js';
 import { useEmailVerificationRequest } from '../authenticationHooks/useEmailVerificationRequest/useEmailVerificationRequest.js';
 import { useUpdateUserProfileByJWTCallback } from '../useUpdateUserProfileByJWTCallback/useUpdateUserProfileByJWTCallback.js';
+import { decodeJwt } from '../../../shared/utils/functions/decodeJwt/decodeJwt.js';
+import '../../../shared/logger.js';
+import '../../../config/LSSuffix.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import 'react/jsx-runtime';
+import '../../../context/ViewContext/ViewContext.js';
+import '@dynamic-labs/utils';
+import '../../constants/colors.js';
+import 'ethers';
+import '../../../shared/consts/index.js';
 
 // User Fields Schema without captchaToken and policiesConsent properties
 const userFieldsSchema = object().shape({
@@ -29,23 +40,27 @@ const useUserUpdateRequestInternal = ({ validationSchemaStripUnknown, }) => {
     const { verifyEmail: verifyEmailFn } = useEmailVerificationRequest();
     const { updateUserProfileByJWT } = useUpdateUserProfileByJWTCallback();
     const updateUser = useCallback((userFields, userEnvironmentId) => __awaiter(void 0, void 0, void 0, function* () {
-        var _a, _b;
+        var _a, _b, _c;
         const validatedUserFields = yield userFieldsSchema.validate(userFields, {
             stripUnknown: validationSchemaStripUnknown,
         });
         const updateUserProfileResponse = yield updateUserProfileFields(jwtToken, userEnvironmentId || environmentId, validatedUserFields);
+        // check if decoded JWT still somehow has missing fields, we can't proceed if it does
+        const decodedJwt = decodeJwt(updateUserProfileResponse.jwt);
+        const missingFields = (_a = decodedJwt === null || decodedJwt === void 0 ? void 0 : decodedJwt.missingFields) !== null && _a !== void 0 ? _a : [];
         const _isEmailVerificationRequired = isEmailVerificationRequired(updateUserProfileResponse);
         if (!_isEmailVerificationRequired) {
             // If email verification is not needed then we can update the user profile immediately.
             updateUserProfileByJWT(updateUserProfileResponse.jwt);
             return {
-                isEmailVerificationRequired: _isEmailVerificationRequired,
+                isEmailVerificationRequired: false,
+                missingFields,
                 updateUserProfileResponse,
             };
         }
         // We update EmailContext to use this information in the Email Verification view
-        setEmail((_a = updateUserProfileResponse.emailVerification) === null || _a === void 0 ? void 0 : _a.email);
-        setVerificationUUID((_b = updateUserProfileResponse.emailVerification) === null || _b === void 0 ? void 0 : _b.verificationUUID);
+        setEmail((_b = updateUserProfileResponse.emailVerification) === null || _b === void 0 ? void 0 : _b.email);
+        setVerificationUUID((_c = updateUserProfileResponse.emailVerification) === null || _c === void 0 ? void 0 : _c.verificationUUID);
         // DYN-2046 - Customers have the opportunity to programmatically use our email verification and profile editing.
         // VerifyEmailFN was scoped to bypass the problem with memoization of the state at the beginning of Promise.
         // setEmail and setVerificationUUID in the above lines will are not visible in this promise.
@@ -54,7 +69,8 @@ const useUserUpdateRequestInternal = ({ validationSchemaStripUnknown, }) => {
             return verifyEmailFn(verificationToken, (_a = updateUserProfileResponse.emailVerification) === null || _a === void 0 ? void 0 : _a.verificationUUID);
         };
         return {
-            isEmailVerificationRequired: _isEmailVerificationRequired,
+            isEmailVerificationRequired: true,
+            missingFields,
             updateUserProfileResponse,
             verifyEmailFn: scopedVerifyEmailFn,
         };

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/CollectUserDataView/OnboardingUserDataForm/OnboardingUserDataForm.cjs

@@ -46,17 +46,24 @@ var useUserDataForm = require('../../../utils/hooks/useUserDataForm/useUserDataF
 
 const OnboardingUserDataForm = ({ children, userProfile, disableSubmit, }) => {
     const { policiesConsentInnerComponent, onboardingOnlyJwt, setShowAuthFlow, setCallback, } = useInternalDynamicContext.useInternalDynamicContext();
-    const { setView } = ViewContext.useViewContext();
+    const { setView, view } = ViewContext.useViewContext();
     const decodedJwt = decodeJwt.decodeJwt(onboardingOnlyJwt);
     const { updateUser } = useUserUpdateRequest.useUserUpdateRequestInternal({
         validationSchemaStripUnknown: false,
     });
     const onSubmit = React.useCallback((formValues) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        const { isEmailVerificationRequired } = yield updateUser(formValues);
-        if (isEmailVerificationRequired) {
+        const { isEmailVerificationRequired, missingFields } = yield updateUser(formValues);
+        if (isEmailVerificationRequired &&
+            missingFields.map((field) => field.name).toString() === 'email') {
             setView('verify-email');
             return;
         }
+        else if (missingFields.length > 0) {
+            // make sure we capture the fields that are required and still missing!
+            // do not change the view, just use the current one
+            setView(view);
+            return;
+        }
         setShowAuthFlow(false);
         setCallback('authSuccess');
     }), [setCallback, setShowAuthFlow, setView, updateUser]);

package/src/lib/views/CollectUserDataView/OnboardingUserDataForm/OnboardingUserDataForm.js

@@ -42,17 +42,24 @@ import { useUserDataForm } from '../../../utils/hooks/useUserDataForm/useUserDat
 
 const OnboardingUserDataForm = ({ children, userProfile, disableSubmit, }) => {
     const { policiesConsentInnerComponent, onboardingOnlyJwt, setShowAuthFlow, setCallback, } = useInternalDynamicContext();
-    const { setView } = useViewContext();
+    const { setView, view } = useViewContext();
     const decodedJwt = decodeJwt(onboardingOnlyJwt);
     const { updateUser } = useUserUpdateRequestInternal({
         validationSchemaStripUnknown: false,
     });
     const onSubmit = useCallback((formValues) => __awaiter(void 0, void 0, void 0, function* () {
-        const { isEmailVerificationRequired } = yield updateUser(formValues);
-        if (isEmailVerificationRequired) {
+        const { isEmailVerificationRequired, missingFields } = yield updateUser(formValues);
+        if (isEmailVerificationRequired &&
+            missingFields.map((field) => field.name).toString() === 'email') {
             setView('verify-email');
             return;
         }
+        else if (missingFields.length > 0) {
+            // make sure we capture the fields that are required and still missing!
+            // do not change the view, just use the current one
+            setView(view);
+            return;
+        }
         setShowAuthFlow(false);
         setCallback('authSuccess');
     }), [setCallback, setShowAuthFlow, setView, updateUser]);

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