@dynamic-labs/sdk-react-core 0.18.0-beta.32 → 0.18.0

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

@@ -0,0 +1,57 @@
+import { __awaiter, __rest } from '../../../../../_virtual/_tslib.js';
+import { usePromise } from '../usePromise/usePromise.js';
+import '@dynamic-labs/sdk-api';
+import { logger } from '../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import 'react/jsx-runtime';
+import '../../../context/ViewContext/ViewContext.js';
+import 'react';
+import '@dynamic-labs/wallet-book';
+import '@dynamic-labs/utils';
+import '../../constants/colors.js';
+import '../../../shared/utils/classes/storage/localStorage.js';
+import 'ethers';
+import '../../../shared/consts/index.js';
+
+/**
+ * Hook to estimate the gas required for a transaction.
+ *
+ * This hook uses the `usePromise` hook to asynchronously estimate the gas required for a transaction.
+ * It first tries to estimate the gas without the 'from' field in the transaction, as the Alchemy API
+ * checks the origin address funds and can return an error if the origin wallet has no funds for the transaction.
+ * If the error 'UNPREDICTABLE_GAS_LIMIT' is encountered, it tries to estimate the gas again with the
+ * original transaction.
+ *
+ * @see {@link https://docs.alchemy.com/reference/eth-estimategas}
+ * @see {@link https://docs.ethers.org/v5/troubleshooting/errors/#help-UNPREDICTABLE_GAS_LIMIT}
+ *
+ * @param {ethers.providers.Web3Provider} provider - The Web3 provider to use for estimating the gas.
+ * @param {ethers.utils.Deferrable<ethers.providers.TransactionRequest>} transaction - The transaction for
+ * which to estimate the gas.
+ *
+ * @returns {PromiseState<ethers.BigNumber>} A promise that resolves to the estimated gas for the transaction.
+ */
+const useTransactionEstimatedGas = (provider, transaction) => usePromise(() => __awaiter(void 0, void 0, void 0, function* () {
+    // To safely run estimateGas using alchemy, we need to remove the from address
+    // because alchemy checks the origin address funds and can return an error if
+    // origin wallet has no funds for the transaction
+    // https://docs.alchemy.com/reference/eth-estimategas
+    const transactionWithNoOrigin = __rest(transaction, ["from"]);
+    try {
+        return yield provider.estimateGas(transactionWithNoOrigin);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    }
+    catch (err) {
+        logger.error(err);
+        // If the error is UNPREDICTABLE_GAS_LIMIT, we try to estimate gas again
+        // with original transaction
+        // https://docs.ethers.org/v5/troubleshooting/errors/#help-UNPREDICTABLE_GAS_LIMIT
+        if (err.code === 'UNPREDICTABLE_GAS_LIMIT') {
+            return provider.estimateGas(transaction);
+        }
+        throw err;
+    }
+}), { deps: [transaction, provider] });
+
+export { useTransactionEstimatedGas };

package/src/lib/utils/hooks/useTransactionWithGasPrice/index.d.ts

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

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

@@ -0,0 +1,47 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var usePromise = require('../usePromise/usePromise.cjs');
+
+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 isGasPriceDefinedInTransaction = Boolean(transaction.gasPrice);
+    const shouldLoadGasPrice = enabled && increasePercentage > 0 && !isGasPriceDefinedInTransaction;
+    const { data: gasPrice } = usePromise.usePromise(() => provider.getGasPrice(), {
+        deps: [transaction, provider],
+        enabled: shouldLoadGasPrice,
+    });
+    if (!gasPrice) {
+        return transaction;
+    }
+    return Object.assign(Object.assign({}, transaction), { gasPrice: increaseGasPrice(gasPrice, increasePercentage) });
+};
+
+exports.useTransactionWithGasPrice = useTransactionWithGasPrice;

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

@@ -0,0 +1,32 @@
+import { ethers } from 'ethers';
+type UseTransactionWithGasPriceProps = {
+    provider: ethers.providers.Provider;
+    transaction: ethers.utils.Deferrable<ethers.providers.TransactionRequest>;
+    increasePercentage?: number;
+    enabled?: boolean;
+};
+/**
+ * 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,
+ * });
+ */
+export declare const useTransactionWithGasPrice: ({ increasePercentage, provider, transaction, enabled, }: UseTransactionWithGasPriceProps) => ethers.utils.Deferrable<ethers.providers.TransactionRequest>;
+export {};

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

@@ -0,0 +1,43 @@
+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 isGasPriceDefinedInTransaction = Boolean(transaction.gasPrice);
+    const shouldLoadGasPrice = enabled && increasePercentage > 0 && !isGasPriceDefinedInTransaction;
+    const { data: gasPrice } = usePromise(() => provider.getGasPrice(), {
+        deps: [transaction, provider],
+        enabled: shouldLoadGasPrice,
+    });
+    if (!gasPrice) {
+        return transaction;
+    }
+    return Object.assign(Object.assign({}, transaction), { gasPrice: increaseGasPrice(gasPrice, increasePercentage) });
+};
+
+export { useTransactionWithGasPrice };

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

@@ -145,6 +145,7 @@ const useVerifyWallet = ({ consumeNonce, displaySiweStatement, environmentId, pr
     return ({ walletConnector, fetchPublicAddressOpts, publicWalletAddress, captchaToken, oauth, }) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         const walletProvider = getWalletProvider.getWalletProvider(walletConnector);
         try {
+            setIsVerificationInProgress(true);
             const Jwt = yield generateJWT(walletConnector, walletProvider, fetchPublicAddressOpts, publicWalletAddress, captchaToken, oauth);
             const decodedJwt = decodeJwt.decodeJwt(Jwt);
             if (decodedJwt === undefined)

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

@@ -141,6 +141,7 @@ const useVerifyWallet = ({ consumeNonce, displaySiweStatement, environmentId, pr
     return ({ walletConnector, fetchPublicAddressOpts, publicWalletAddress, captchaToken, oauth, }) => __awaiter(void 0, void 0, void 0, function* () {
         const walletProvider = getWalletProvider(walletConnector);
         try {
+            setIsVerificationInProgress(true);
             const Jwt = yield generateJWT(walletConnector, walletProvider, fetchPublicAddressOpts, publicWalletAddress, captchaToken, oauth);
             const decodedJwt = decodeJwt(Jwt);
             if (decodedJwt === undefined)

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

@@ -17,7 +17,7 @@ export type UseWalletEventListenersArgs = {
     setSelectedWalletWithAction(walletWithAction: WalletWithAction | null): void;
     user: UserProfile | undefined;
     authMode: AuthModeType;
-    refreshConnectedWallet: (walletId: string, walletConnector: WalletConnector) => Promise<void>;
+    refreshConnectedWallet: (walletId: string, walletConnector: WalletConnector, shouldCallCallback?: boolean) => Promise<void>;
 };
 export declare const useWalletEventListeners: ({ computeConnectedStateForWallets, handleLogOut, multiWallet, multiWalletWidgetState, primaryWallet, secondaryWallets, selectedWalletConnector, selectedWalletWithAction, setSelectedWalletConnector, setSelectedWalletWithAction, setMultiWalletWidgetState, user, setPrimaryWalletId, authMode, refreshConnectedWallet, }: UseWalletEventListenersArgs) => {
     loadingNetwork: boolean;

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

@@ -67,11 +67,11 @@ const useWalletUiUtils = ({ appLogoUrl, appName, getAppOrigin, }) => {
         }
         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* () {
+    const sendTransaction = React.useCallback(({ transaction, handler, provider, connector }) => _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 })));
+        return openSendTransaction((resolve, reject) => (jsxRuntime.jsx(TransactionConfirmationModal.TransactionConfirmationModal, { walletConnector: connector, title: 'Send Transaction', transaction: transaction, handler: handler, onTransactionResponseSuccess: resolve, onReject: reject, provider: provider })));
     }), [openSendTransaction, shouldConfirmAction]);
     const disabledConfirmationOnce = React.useCallback(() => {
         confirmationStateRef.current = 'disabled';

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

@@ -1,4 +1,8 @@
 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 | undefined,
+    WalletUiUtils<WalletConnector>
+];

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

@@ -63,11 +63,11 @@ const useWalletUiUtils = ({ appLogoUrl, appName, getAppOrigin, }) => {
         }
         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* () {
+    const sendTransaction = useCallback(({ transaction, handler, provider, connector }) => __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 })));
+        return openSendTransaction((resolve, reject) => (jsx(TransactionConfirmationModal, { walletConnector: connector, title: 'Send Transaction', transaction: transaction, handler: handler, onTransactionResponseSuccess: resolve, onReject: reject, provider: provider })));
     }), [openSendTransaction, shouldConfirmAction]);
     const disabledConfirmationOnce = useCallback(() => {
         confirmationStateRef.current = 'disabled';

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';
 import { WalletBookSchema } from '@dynamic-labs/wallet-book';
 type Props = {
     appLogoUrl?: string;
@@ -11,7 +11,7 @@ type Props = {
     walletBook: WalletBookSchema;
     walletConnectV1Bridge?: string;
     walletConnectorsProp?: WalletConnectorsMethod[];
-    walletUiUtils: WalletUiUtils;
+    walletUiUtils: WalletUiUtils<WalletConnector>;
 };
 export declare const useWallets: ({ projectSettings, appLogoUrl, appName, flowNetwork, networkConfigurations, walletBook, walletConnectV1Bridge, walletUiUtils, walletConnectorsProp, }: Props) => {
     wallets: import("../../../shared").WalletOption[];

package/src/lib/views/CollectUserDataView/UserDataFields/index.cjs

@@ -41,6 +41,7 @@ require('../../../components/Alert/Alert.cjs');
 require('../../../context/MockContext/MockContext.cjs');
 require('../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+var Tooltip = require('../../../components/Tooltip/Tooltip.cjs');
 require('../../../components/Popper/Popper/Popper.cjs');
 require('../../../components/Popper/PopperContext/PopperContext.cjs');
 require('yup');
@@ -63,6 +64,9 @@ const UserDataFields = ({ errors, policiesConsentInnerComponentArray, fields, to
         else if (name === 'policiesConsent') {
             return (jsxRuntime.jsx("div", Object.assign({ role: 'group', "aria-labelledby": 'checkbox-group', className: 'user-data-fields__checkbox-container' }, { children: policiesConsentInnerComponentArray === null || policiesConsentInnerComponentArray === void 0 ? void 0 : policiesConsentInnerComponentArray.map((component, index) => (jsxRuntime.jsxs("div", Object.assign({ className: 'user-data-fields__consent-checkbox' }, { children: [jsxRuntime.jsx(formik.Field, { as: Checkbox.Checkbox, id: `policiesConsent_${index}`, name: 'policiesConsentArray', type: 'checkbox', value: `${index}` }, `policiesConsent_${index}`), jsxRuntime.jsx("label", Object.assign({ htmlFor: `policiesConsent_${index}`, className: 'user-data-fields__checkbox-label' }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_small', color: 'secondary' }, { children: component })) }))] }), `policiesConsent_${index}`))) }), 'policiesConsentGroup'));
         }
+        else if (name === 'email' && !enabled) {
+            return (jsxRuntime.jsx(Tooltip.Tooltip, Object.assign({ content: 'This email is tied to your wallet so cannot be updated', className: 'user-data-fields__tooltip' }, { children: jsxRuntime.jsx(formik.Field, { disabled: true, as: Input.Input, type: type, id: name, name: name, label: label }, name) }), 'disabled-email-tooltip'));
+        }
         else {
             return (jsxRuntime.jsx(formik.Field, { disabled: !enabled, as: Input.Input, type: type, id: name, name: name, label: label, optional: enabled && !required, error: errors[name] && touched[name], message: touched[name] && getDisplayErrorMessage.getDisplayErrorMessage(label, errors[name]) }, name));
         }

package/src/lib/views/CollectUserDataView/UserDataFields/index.js

@@ -37,6 +37,7 @@ import '../../../components/Alert/Alert.js';
 import '../../../context/MockContext/MockContext.js';
 import '../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
+import { Tooltip } from '../../../components/Tooltip/Tooltip.js';
 import '../../../components/Popper/Popper/Popper.js';
 import '../../../components/Popper/PopperContext/PopperContext.js';
 import 'yup';
@@ -59,6 +60,9 @@ const UserDataFields = ({ errors, policiesConsentInnerComponentArray, fields, to
         else if (name === 'policiesConsent') {
             return (jsx("div", Object.assign({ role: 'group', "aria-labelledby": 'checkbox-group', className: 'user-data-fields__checkbox-container' }, { children: policiesConsentInnerComponentArray === null || policiesConsentInnerComponentArray === void 0 ? void 0 : policiesConsentInnerComponentArray.map((component, index) => (jsxs("div", Object.assign({ className: 'user-data-fields__consent-checkbox' }, { children: [jsx(Field, { as: Checkbox, id: `policiesConsent_${index}`, name: 'policiesConsentArray', type: 'checkbox', value: `${index}` }, `policiesConsent_${index}`), jsx("label", Object.assign({ htmlFor: `policiesConsent_${index}`, className: 'user-data-fields__checkbox-label' }, { children: jsx(Typography, Object.assign({ variant: 'body_small', color: 'secondary' }, { children: component })) }))] }), `policiesConsent_${index}`))) }), 'policiesConsentGroup'));
         }
+        else if (name === 'email' && !enabled) {
+            return (jsx(Tooltip, Object.assign({ content: 'This email is tied to your wallet so cannot be updated', className: 'user-data-fields__tooltip' }, { children: jsx(Field, { disabled: true, as: Input, type: type, id: name, name: name, label: label }, name) }), 'disabled-email-tooltip'));
+        }
         else {
             return (jsx(Field, { disabled: !enabled, as: Input, type: type, id: name, name: name, label: label, optional: enabled && !required, error: errors[name] && touched[name], message: touched[name] && getDisplayErrorMessage(label, errors[name]) }, name));
         }

package/src/lib/views/EmailUpdate/EmailUpdate.cjs

@@ -55,12 +55,15 @@ const EmailUpdate = () => {
     const { loading, setLoading } = LoadingContext.useLoadingContext();
     const { setView, goToInitialView } = ViewContext.useViewContext();
     const { email, setEmail, setVerificationUUID } = EmailVerificationContext.useEmailVerificationContext();
-    const { environmentId, handleLogOut, onboardingOnlyJwt } = useInternalDynamicContext.useInternalDynamicContext();
+    const { environmentId, handleLogOut, onboardingOnlyJwt, authToken } = useInternalDynamicContext.useInternalDynamicContext();
     const [emailError, setEmailError] = React.useState(undefined);
     const handleBackClick = () => {
         setView('verify-email');
         setError(undefined);
     };
+    // If user tries to update an email for logged user there is already an authToken and onboardingOnlyJwt is undefined
+    // If user tries to update the email in the authFlow, authToken is undefined and onboardingOnlyJwt is defined
+    const jwtToken = authToken || onboardingOnlyJwt;
     const handleEmailUpdate = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         try {
             if (!updatedEmail) {
@@ -68,7 +71,7 @@ const EmailUpdate = () => {
             }
             setEmailError(undefined);
             setLoading(true);
-            const { emailVerification } = yield api.updateUserProfileFields(onboardingOnlyJwt, environmentId, { email: updatedEmail });
+            const { emailVerification } = yield api.updateUserProfileFields(jwtToken, environmentId, { email: updatedEmail });
             if (!emailVerification) {
                 yield handleLogOut();
                 goToInitialView();

package/src/lib/views/EmailUpdate/EmailUpdate.js

@@ -51,12 +51,15 @@ const EmailUpdate = () => {
     const { loading, setLoading } = useLoadingContext();
     const { setView, goToInitialView } = useViewContext();
     const { email, setEmail, setVerificationUUID } = useEmailVerificationContext();
-    const { environmentId, handleLogOut, onboardingOnlyJwt } = useInternalDynamicContext();
+    const { environmentId, handleLogOut, onboardingOnlyJwt, authToken } = useInternalDynamicContext();
     const [emailError, setEmailError] = useState(undefined);
     const handleBackClick = () => {
         setView('verify-email');
         setError(undefined);
     };
+    // If user tries to update an email for logged user there is already an authToken and onboardingOnlyJwt is undefined
+    // If user tries to update the email in the authFlow, authToken is undefined and onboardingOnlyJwt is defined
+    const jwtToken = authToken || onboardingOnlyJwt;
     const handleEmailUpdate = () => __awaiter(void 0, void 0, void 0, function* () {
         try {
             if (!updatedEmail) {
@@ -64,7 +67,7 @@ const EmailUpdate = () => {
             }
             setEmailError(undefined);
             setLoading(true);
-            const { emailVerification } = yield updateUserProfileFields(onboardingOnlyJwt, environmentId, { email: updatedEmail });
+            const { emailVerification } = yield updateUserProfileFields(jwtToken, environmentId, { email: updatedEmail });
             if (!emailVerification) {
                 yield handleLogOut();
                 goToInitialView();

package/src/lib/views/EmailVerification/EmailVerification.cjs

@@ -69,7 +69,7 @@ const EmailVerification = () => {
     const { view, setView, goToInitialView } = ViewContext.useViewContext();
     const { error, setError, setErrorMessage } = ErrorContext.useErrorContext();
     const { setExistentAccountData } = AccountExistsContext.useAccountExistsContext();
-    const { environmentId, onboardingOnlyJwt, handleLogOut, authToken, setOnboardingOnlyJwt, setShowAuthFlow, setCallback, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { environmentId, onboardingOnlyJwt, handleLogOut, authToken, setOnboardingOnlyJwt, setShowAuthFlow, setCallback, setIsVerificationInProgress, } = useInternalDynamicContext.useInternalDynamicContext();
     const { email, verificationUUID, setVerificationUUID } = EmailVerificationContext.useEmailVerificationContext();
     const { loading, setLoading } = LoadingContext.useLoadingContext();
     const { remainingSeconds, startCountdown } = useCountdown.useCountdown({
@@ -79,6 +79,11 @@ const EmailVerification = () => {
     const isLoginView = view === 'login-with-email-verification';
     const { verifyEmail } = useEmailVerificationRequest.useEmailVerificationRequest();
     const { createUserProfileByJWT } = useCreateUserProfileByJWTCallback.useCreateUserProfileByJWTCallback();
+    // Set verification in progress
+    // It should be disabled by either clearStatesOnBackClick, the close button, or onAuthSuccess
+    React.useEffect(() => {
+        setIsVerificationInProgress(true);
+    }, []);
     const handleComplete = React.useCallback((verificationToken) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         setError(undefined);
         setLoading(true);

package/src/lib/views/EmailVerification/EmailVerification.js

@@ -1,6 +1,6 @@
 import { __awaiter } from '../../../../_virtual/_tslib.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useState, useCallback } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { SignInWithEmailIcon } from '@dynamic-labs/iconic';
 import { UserHasAccountWithEmailError, NoAccessError, AccountExistsError } from '@dynamic-labs/utils';
 import { Typography } from '../../components/Typography/Typography.js';
@@ -65,7 +65,7 @@ const EmailVerification = () => {
     const { view, setView, goToInitialView } = useViewContext();
     const { error, setError, setErrorMessage } = useErrorContext();
     const { setExistentAccountData } = useAccountExistsContext();
-    const { environmentId, onboardingOnlyJwt, handleLogOut, authToken, setOnboardingOnlyJwt, setShowAuthFlow, setCallback, } = useInternalDynamicContext();
+    const { environmentId, onboardingOnlyJwt, handleLogOut, authToken, setOnboardingOnlyJwt, setShowAuthFlow, setCallback, setIsVerificationInProgress, } = useInternalDynamicContext();
     const { email, verificationUUID, setVerificationUUID } = useEmailVerificationContext();
     const { loading, setLoading } = useLoadingContext();
     const { remainingSeconds, startCountdown } = useCountdown({
@@ -75,6 +75,11 @@ const EmailVerification = () => {
     const isLoginView = view === 'login-with-email-verification';
     const { verifyEmail } = useEmailVerificationRequest();
     const { createUserProfileByJWT } = useCreateUserProfileByJWTCallback();
+    // Set verification in progress
+    // It should be disabled by either clearStatesOnBackClick, the close button, or onAuthSuccess
+    useEffect(() => {
+        setIsVerificationInProgress(true);
+    }, []);
     const handleComplete = useCallback((verificationToken) => __awaiter(void 0, void 0, void 0, function* () {
         setError(undefined);
         setLoading(true);

package/src/lib/views/LoginWithEmailView/components/LoginWithEmailWalletList/LoginWithEmailWalletList.cjs

@@ -26,7 +26,10 @@ const LoginWithEmailWalletList = ({ walletsList, numberOfWallets, }) => {
     const { setView } = ViewContext.useViewContext();
     const { projectSettings } = useInternalDynamicContext.useInternalDynamicContext();
     const isUsingMultiWallet = Boolean(localStorage.LocalStorage.getFromLS(localStorage$1.AUTH_USER));
-    return !projectSettings ? (jsxRuntime.jsx(Skeleton.Skeleton, { count: NUMBER_OF_WALLETS + 1, className: 'login-with-email-wallet-list__skeleton' })) : (jsxRuntime.jsxs("div", Object.assign({ className: 'login-with-email-wallet-list__container' }, { children: [walletsList.map((wallet) => (jsxRuntime.jsx(WalletListItem.WalletListItem, { wallet: wallet, usingMultiWallet: isUsingMultiWallet }, wallet.key))), jsxRuntime.jsx(ListItemButton.ListItemButton, { text: 'View all wallets', onClick: () => setView('login-with-email-or-wallet-full-wallet-list'), numberOfWallets: numberOfWallets })] })));
+    return !projectSettings ? (jsxRuntime.jsx(Skeleton.Skeleton, { count: NUMBER_OF_WALLETS + 1, className: 'login-with-email-wallet-list__skeleton' })) : (jsxRuntime.jsxs("div", Object.assign({ className: 'login-with-email-wallet-list__container' }, { children: [walletsList.map((wallet) => {
+                var _a;
+                return (jsxRuntime.jsx(WalletListItem.WalletListItem, { wallet: wallet, usingMultiWallet: isUsingMultiWallet }, wallet.key + ((_a = wallet.groupedWallets) === null || _a === void 0 ? void 0 : _a.length)));
+            }), jsxRuntime.jsx(ListItemButton.ListItemButton, { text: 'View all wallets', onClick: () => setView('login-with-email-or-wallet-full-wallet-list'), numberOfWallets: numberOfWallets })] })));
 };
 
 exports.LoginWithEmailWalletList = LoginWithEmailWalletList;

package/src/lib/views/LoginWithEmailView/components/LoginWithEmailWalletList/LoginWithEmailWalletList.js

@@ -22,7 +22,10 @@ const LoginWithEmailWalletList = ({ walletsList, numberOfWallets, }) => {
     const { setView } = useViewContext();
     const { projectSettings } = useInternalDynamicContext();
     const isUsingMultiWallet = Boolean(LocalStorage.getFromLS(AUTH_USER));
-    return !projectSettings ? (jsx(Skeleton, { count: NUMBER_OF_WALLETS + 1, className: 'login-with-email-wallet-list__skeleton' })) : (jsxs("div", Object.assign({ className: 'login-with-email-wallet-list__container' }, { children: [walletsList.map((wallet) => (jsx(WalletListItem, { wallet: wallet, usingMultiWallet: isUsingMultiWallet }, wallet.key))), jsx(ListItemButton, { text: 'View all wallets', onClick: () => setView('login-with-email-or-wallet-full-wallet-list'), numberOfWallets: numberOfWallets })] })));
+    return !projectSettings ? (jsx(Skeleton, { count: NUMBER_OF_WALLETS + 1, className: 'login-with-email-wallet-list__skeleton' })) : (jsxs("div", Object.assign({ className: 'login-with-email-wallet-list__container' }, { children: [walletsList.map((wallet) => {
+                var _a;
+                return (jsx(WalletListItem, { wallet: wallet, usingMultiWallet: isUsingMultiWallet }, wallet.key + ((_a = wallet.groupedWallets) === null || _a === void 0 ? void 0 : _a.length)));
+            }), jsx(ListItemButton, { text: 'View all wallets', onClick: () => setView('login-with-email-or-wallet-full-wallet-list'), numberOfWallets: numberOfWallets })] })));
 };
 
 export { LoginWithEmailWalletList, NUMBER_OF_WALLETS };

package/src/lib/views/MergeUserAccountsView/MergeUserAccountsView.cjs

@@ -84,6 +84,10 @@ const MergeUserAccountsView = () => {
         }
         catch (e) {
             setError('Something went wrong, please try again.');
+            if (user) {
+                setShowAuthFlow(false);
+                return;
+            }
             goToInitialView();
         }
     });

package/src/lib/views/MergeUserAccountsView/MergeUserAccountsView.js

@@ -80,6 +80,10 @@ const MergeUserAccountsView = () => {
         }
         catch (e) {
             setError('Something went wrong, please try again.');
+            if (user) {
+                setShowAuthFlow(false);
+                return;
+            }
             goToInitialView();
         }
     });

package/src/lib/views/NetworkNotSupported/NetworkNotSupported.cjs

@@ -57,6 +57,7 @@ const NetworkNotSupported = () => {
     // Refresh selectedWalletConnector network when primaryWallet or connectedWallets updates
     const { data: walletConnectorNetwork } = usePromise.usePromise(() => walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.getNetwork(), { deps: [primaryWallet, walletConnector, connectedWallets] });
     const finishConnectAndSign = useConnectAndSign.useConnectAndSign({
+        shouldCallCallback: false,
         shouldUpdateWallets: !isFullyConnected,
     });
     const [isNetworkPickerOpen, setIsNetworkPickerOpen] = React.useState(false);

package/src/lib/views/NetworkNotSupported/NetworkNotSupported.js

@@ -53,6 +53,7 @@ const NetworkNotSupported = () => {
     // Refresh selectedWalletConnector network when primaryWallet or connectedWallets updates
     const { data: walletConnectorNetwork } = usePromise(() => walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.getNetwork(), { deps: [primaryWallet, walletConnector, connectedWallets] });
     const finishConnectAndSign = useConnectAndSign({
+        shouldCallCallback: false,
         shouldUpdateWallets: !isFullyConnected,
     });
     const [isNetworkPickerOpen, setIsNetworkPickerOpen] = useState(false);

package/src/lib/views/NetworkNotSupportedSwitchManual/NetworkNotSupportedSwitchManual.cjs

@@ -60,6 +60,7 @@ const NetworkNotSupportedSwitchManual = () => {
         deps: [walletConnector, connectedWallets],
     });
     const finishConnectAndSign = useConnectAndSign.useConnectAndSign({
+        shouldCallCallback: false,
         shouldUpdateWallets: !isFullyConnected,
     });
     // Finishes auth flow when wallet switches to proper network

package/src/lib/views/NetworkNotSupportedSwitchManual/NetworkNotSupportedSwitchManual.js

@@ -56,6 +56,7 @@ const NetworkNotSupportedSwitchManual = () => {
         deps: [walletConnector, connectedWallets],
     });
     const finishConnectAndSign = useConnectAndSign({
+        shouldCallCallback: false,
         shouldUpdateWallets: !isFullyConnected,
     });
     // Finishes auth flow when wallet switches to proper network

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');
@@ -42,9 +41,9 @@ require('../../components/Popper/PopperContext/PopperContext.cjs');
 var SendBalancePageLayout = require('../../components/SendBalancePageLayout/SendBalancePageLayout.cjs');
 require('../../components/InlineWidget/InlineWidget.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');
@@ -52,18 +51,19 @@ 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());
-    const { data: provider } = usePromise.usePromise(() => primaryWallet.connector.getWeb3Provider());
-    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(), {
+        deps: [walletConnector],
+    });
+    const { data: provider } = usePromise.usePromise(() => walletConnector.getWeb3Provider(), { deps: [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);
@@ -88,16 +88,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;