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

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/CaptchaVerifyUser/CaptchaVerifyUser.cjs

@@ -5,11 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _tslib = require('../../../../_virtual/_tslib.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 var iconic = require('@dynamic-labs/iconic');
+var walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
 require('react');
 var Typography = require('../../components/Typography/Typography.cjs');
 require('@dynamic-labs/sdk-api');
 require('../../shared/logger.cjs');
-require('@dynamic-labs/wallet-connector-core');
 var ViewContext = require('../../context/ViewContext/ViewContext.cjs');
 require('@dynamic-labs/wallet-book');
 require('@dynamic-labs/utils');
@@ -47,7 +47,7 @@ require('../../components/MenuList/Dropdown/Dropdown.cjs');
 var Captcha = require('../../components/Captcha/Captcha.cjs');
 
 const CaptchaVerifyUser = () => {
-    const { consumeNonce, displaySiweStatement, environmentId, projectSettings, setIsSingleWalletAccount, selectedWalletConnector: walletConnector, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { consumeNonce, displaySiweStatement, environmentId, projectSettings, setIsSingleWalletAccount, selectedWalletConnector: walletConnector, walletUiUtils, } = useInternalDynamicContext.useInternalDynamicContext();
     const { setView } = ViewContext.useViewContext();
     const { setCaptchaToken } = CaptchaContext.useCaptchaContext();
     const verifyWallet = useVerifyWallet.useVerifyWallet({
@@ -65,7 +65,13 @@ const CaptchaVerifyUser = () => {
         if (!publicWalletAddress) {
             return;
         }
-        setView('pending-signature');
+        if (!walletConnectorCore.isEmbeddedConnector(walletConnector) ||
+            walletConnectorCore.isBloctoConnector(walletConnector)) {
+            setView('pending-signature');
+        }
+        else {
+            walletUiUtils.disabledConfirmationOnce();
+        }
         if (requiresTwoStepAuthentication.requiresTwoStepAuthentication(walletConnector)) {
             setCaptchaToken(captchaToken);
             return;

package/src/lib/views/CaptchaVerifyUser/CaptchaVerifyUser.js

@@ -1,11 +1,11 @@
 import { __awaiter } from '../../../../_virtual/_tslib.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { CaptchaWaveIcon } from '@dynamic-labs/iconic';
+import { isEmbeddedConnector, isBloctoConnector } from '@dynamic-labs/wallet-connector-core';
 import 'react';
 import { Typography } from '../../components/Typography/Typography.js';
 import '@dynamic-labs/sdk-api';
 import '../../shared/logger.js';
-import '@dynamic-labs/wallet-connector-core';
 import { useViewContext } from '../../context/ViewContext/ViewContext.js';
 import '@dynamic-labs/wallet-book';
 import '@dynamic-labs/utils';
@@ -43,7 +43,7 @@ import '../../components/MenuList/Dropdown/Dropdown.js';
 import { Captcha } from '../../components/Captcha/Captcha.js';
 
 const CaptchaVerifyUser = () => {
-    const { consumeNonce, displaySiweStatement, environmentId, projectSettings, setIsSingleWalletAccount, selectedWalletConnector: walletConnector, } = useInternalDynamicContext();
+    const { consumeNonce, displaySiweStatement, environmentId, projectSettings, setIsSingleWalletAccount, selectedWalletConnector: walletConnector, walletUiUtils, } = useInternalDynamicContext();
     const { setView } = useViewContext();
     const { setCaptchaToken } = useCaptchaContext();
     const verifyWallet = useVerifyWallet({
@@ -61,7 +61,13 @@ const CaptchaVerifyUser = () => {
         if (!publicWalletAddress) {
             return;
         }
-        setView('pending-signature');
+        if (!isEmbeddedConnector(walletConnector) ||
+            isBloctoConnector(walletConnector)) {
+            setView('pending-signature');
+        }
+        else {
+            walletUiUtils.disabledConfirmationOnce();
+        }
         if (requiresTwoStepAuthentication(walletConnector)) {
             setCaptchaToken(captchaToken);
             return;

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/EmailWalletOTPVerificationView/EmailWalletOTPVerificationView.cjs

@@ -65,7 +65,7 @@ const EmailWalletOTPVerificationView = () => {
     const { data: isValid, isLoading, mutate: onSubmit, } = useMutation.useMutation((otp) => emailWalletConnector.verifyOneTimePassword(otp), {
         onFailure: (error) => setError(error),
     });
-    return (jsxRuntime.jsx(OTPVerificationView.OTPVerificationView, { email: email, error: error, onClickBack: handleBackClick, isLoading: isLoading, onPinComplete: onSubmit, isValid: isValid === true, onPinChange: () => setError(undefined), onClickClose: handleOnClickClose, onClickEditEmail: handleBackClick, displayPoweredByDynamic: true }));
+    return (jsxRuntime.jsx(OTPVerificationView.OTPVerificationView, { email: email, error: error, onClickBack: handleBackClick, isLoading: isLoading, onPinComplete: onSubmit, isValid: isValid === true, onPinChange: () => setError(undefined), onClickClose: handleOnClickClose, onClickEditEmail: handleBackClick, displayPoweredByDynamic: true, successBannerText: 'By signing in, you will access a wallet that is only associated to this email.' }));
 };
 
 exports.EmailWalletOTPVerificationView = EmailWalletOTPVerificationView;

package/src/lib/views/EmailWalletOTPVerificationView/EmailWalletOTPVerificationView.js

@@ -61,7 +61,7 @@ const EmailWalletOTPVerificationView = () => {
     const { data: isValid, isLoading, mutate: onSubmit, } = useMutation((otp) => emailWalletConnector.verifyOneTimePassword(otp), {
         onFailure: (error) => setError(error),
     });
-    return (jsx(OTPVerificationView, { email: email, error: error, onClickBack: handleBackClick, isLoading: isLoading, onPinComplete: onSubmit, isValid: isValid === true, onPinChange: () => setError(undefined), onClickClose: handleOnClickClose, onClickEditEmail: handleBackClick, displayPoweredByDynamic: true }));
+    return (jsx(OTPVerificationView, { email: email, error: error, onClickBack: handleBackClick, isLoading: isLoading, onPinComplete: onSubmit, isValid: isValid === true, onPinChange: () => setError(undefined), onClickClose: handleOnClickClose, onClickEditEmail: handleBackClick, displayPoweredByDynamic: true, successBannerText: 'By signing in, you will access a wallet that is only associated to this email.' }));
 };
 
 export { EmailWalletOTPVerificationView };

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