@dynamic-labs/sdk-react-core 4.4.2 → 4.4.3

package/src/lib/views/CoinbaseMPCClaimIntro/CoinbaseMPCClaimIntro.js

@@ -96,13 +96,13 @@ import '../../components/Popper/PopperContext/PopperContext.js';
 
 const CoinbaseMPCClaimIntro = () => {
     const { setShowAuthFlow } = useInternalDynamicContext();
-    const { setView } = useViewContext();
+    const { pushView } = useViewContext();
     const { t } = useTranslation();
     const closeButton = (jsx(IconButton, { onClick: () => setShowAuthFlow(false), type: 'button', children: jsx(SvgClose, {}) }));
     return (jsxs(Fragment, { children: [jsx(ModalHeader, { trailing: closeButton, children: jsx(Typography, { as: 'h1', variant: 'title', color: 'primary', "data-testid": 'dynamic-auth-modal-heading', className: 'header__typography', copykey: 'dyn_create_password.intro.title', children: t('dyn_create_password.intro.title') }) }), jsx("div", { className: 'mpc-claim-intro', children: jsxs("div", { className: 'mpc-claim-intro__body', children: [jsx("div", { className: 'mpc-claim-intro__body__description', children: jsx(SvgWalletClaimHero, {}) }), jsx("div", { className: 'confirm-password-description', children: jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', copykey: 'dyn_create_password.intro.description', children: t('dyn_create_password.intro.description.title') }) }), jsxs("div", { className: 'mpc-claim-intro__body__card', children: [jsxs("div", { className: 'mpc-claim-intro__body__card__statement', children: [jsx("div", { className: 'mpc-claim-intro__body__card__icon', children: jsx(SvgLock, {}) }), jsxs("div", { children: [jsx(Typography, { variant: 'body_normal', color: 'primary', style: { letterSpacing: '-0.15px' }, copykey: 'dyn_create_password.intro.description.additional_protection.title', children: t('dyn_create_password.intro.description.additional_protection.title') }), jsx(Typography, { variant: 'body_small', color: 'secondary', weight: 'regular', copykey: 'dyn_create_password.intro.description.additional_protection.description', children: t('dyn_create_password.intro.description.additional_protection.description') })] })] }), jsxs("div", { className: 'mpc-claim-intro__body__card__statement', children: [jsx("div", { className: 'mpc-claim-intro__body__card__icon', children: jsx(SvgAltKey, {}) }), jsxs("div", { children: [jsx(Typography, { variant: 'body_normal', color: 'primary', style: { letterSpacing: '-0.15px' }, copykey: 'dyn_create_password.intro.description.restore_access.title', children: t('dyn_create_password.intro.description.restore_access.title') }), jsx(Typography, { variant: 'body_small', color: 'secondary', weight: 'regular', copykey: 'dyn_create_password.intro.description.restore_access.description', children: t('dyn_create_password.intro.description.restore_access.description') })] })] })] }), jsx(TypographyButton, { buttonPadding: 'large', buttonVariant: 'brand-primary', typographyProps: {
                                 color: 'inherit',
                             }, onClick: () => {
-                                setView('create-password-view', {
+                                pushView('create-password-view', {
                                     notCalledFromWalletUtils: true,
                                 });
                             }, copykey: 'dyn_create_password.intro.continue', children: t('dyn_create_password.intro.continue') })] }) })] }));

package/src/lib/views/EmailConfirmationWaitingView/EmailConfirmationWaitingView.cjs

@@ -97,7 +97,7 @@ require('../../components/Popper/Popper/Popper.cjs');
 require('../../components/Popper/PopperContext/PopperContext.cjs');
 
 const EmailConfirmationWaitingView = () => {
-    const { setView } = ViewContext.useViewContext();
+    const { pushView } = ViewContext.useViewContext();
     const { clearStatesOnBackClick, selectedWalletConnector: walletConnector } = useInternalDynamicContext.useInternalDynamicContext();
     const { t } = reactI18next.useTranslation();
     if (walletConnector && !walletConnectorCore.isEmailWalletConnector(walletConnector)) {
@@ -106,9 +106,9 @@ const EmailConfirmationWaitingView = () => {
     const emailConnector = walletConnector;
     const onClickResetEmail = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         yield (emailConnector === null || emailConnector === void 0 ? void 0 : emailConnector.endSession());
-        setView('login-with-email-or-wallet');
+        pushView('login-with-email-or-wallet');
         clearStatesOnBackClick();
-    }), [setView, emailConnector, clearStatesOnBackClick]);
+    }), [pushView, emailConnector, clearStatesOnBackClick]);
     return (jsxRuntime.jsxs("div", { className: 'email-confirmation-waiting-view', children: [jsxRuntime.jsx("div", { className: 'email-confirmation-waiting-view__header-icon', children: jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: iconic.SignInWithEmailIcon, iconSize: 80, isSpinning: true }) }), jsxRuntime.jsx(Typography.Typography, { weight: 'medium', variant: 'title', color: 'primary', className: 'email-confirmation-waiting-view__title', copykey: 'dyn_email_confirmation.title', children: t('dyn_email_confirmation.title') }), jsxRuntime.jsx(Typography.Typography, { weight: 'regular', variant: 'body_normal', color: 'secondary', copykey: 'dyn_email_confirmation.description', children: t('dyn_email_confirmation.description') }), jsxRuntime.jsxs("div", { className: 'email-confirmation-waiting-view__email-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', weight: 'medium', as: 'span', children: emailConnector === null || emailConnector === void 0 ? void 0 : emailConnector.email }), jsxRuntime.jsx(IconButton.IconButton, { onClick: onClickResetEmail, className: 'email-confirmation-waiting-view__edit-icon-button', "data-testid": 'email-confirmation-waiting-view__edit-button', children: jsxRuntime.jsx(Icon.Icon, { color: 'text-tertiary', children: jsxRuntime.jsx(pencilAltIcon.ReactComponent, {}) }) })] }), jsxRuntime.jsx("div", { className: 'email-confirmation-waiting-view__note', children: jsxRuntime.jsx(Typography.Typography, { weight: 'regular', variant: 'body_small', color: 'secondary', copykey: 'dyn_email_confirmation.note', children: t('dyn_email_confirmation.note') }) }), jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'email-confirmation-waiting-view__powered_by_dynamic_footer' })] }));
 };
 

package/src/lib/views/EmailConfirmationWaitingView/EmailConfirmationWaitingView.js

@@ -93,7 +93,7 @@ import '../../components/Popper/Popper/Popper.js';
 import '../../components/Popper/PopperContext/PopperContext.js';
 
 const EmailConfirmationWaitingView = () => {
-    const { setView } = useViewContext();
+    const { pushView } = useViewContext();
     const { clearStatesOnBackClick, selectedWalletConnector: walletConnector } = useInternalDynamicContext();
     const { t } = useTranslation();
     if (walletConnector && !isEmailWalletConnector(walletConnector)) {
@@ -102,9 +102,9 @@ const EmailConfirmationWaitingView = () => {
     const emailConnector = walletConnector;
     const onClickResetEmail = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         yield (emailConnector === null || emailConnector === void 0 ? void 0 : emailConnector.endSession());
-        setView('login-with-email-or-wallet');
+        pushView('login-with-email-or-wallet');
         clearStatesOnBackClick();
-    }), [setView, emailConnector, clearStatesOnBackClick]);
+    }), [pushView, emailConnector, clearStatesOnBackClick]);
     return (jsxs("div", { className: 'email-confirmation-waiting-view', children: [jsx("div", { className: 'email-confirmation-waiting-view__header-icon', children: jsx(IconWithSpinner, { Icon: SignInWithEmailIcon, iconSize: 80, isSpinning: true }) }), jsx(Typography, { weight: 'medium', variant: 'title', color: 'primary', className: 'email-confirmation-waiting-view__title', copykey: 'dyn_email_confirmation.title', children: t('dyn_email_confirmation.title') }), jsx(Typography, { weight: 'regular', variant: 'body_normal', color: 'secondary', copykey: 'dyn_email_confirmation.description', children: t('dyn_email_confirmation.description') }), jsxs("div", { className: 'email-confirmation-waiting-view__email-container', children: [jsx(Typography, { variant: 'body_normal', color: 'secondary', weight: 'medium', as: 'span', children: emailConnector === null || emailConnector === void 0 ? void 0 : emailConnector.email }), jsx(IconButton, { onClick: onClickResetEmail, className: 'email-confirmation-waiting-view__edit-icon-button', "data-testid": 'email-confirmation-waiting-view__edit-button', children: jsx(Icon, { color: 'text-tertiary', children: jsx(SvgPencilAltIcon, {}) }) })] }), jsx("div", { className: 'email-confirmation-waiting-view__note', children: jsx(Typography, { weight: 'regular', variant: 'body_small', color: 'secondary', copykey: 'dyn_email_confirmation.note', children: t('dyn_email_confirmation.note') }) }), jsx(PoweredByDynamic, { classNameRoot: 'email-confirmation-waiting-view__powered_by_dynamic_footer' })] }));
 };
 

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

@@ -122,7 +122,7 @@ const SECONDS_TO_RETRY = 15;
 const EmailVerification = ({ isEmailRecoveryFlow = false, showRetryButton: _showRetryButton = true, showTransferMessage: _showTransferMessage = false, }) => {
     var _a, _b, _c, _d;
     const { environmentId, handleLogOut, setShowAuthFlow, projectSettings, user, userWithMissingInfo, walletConnectorOptions, primaryWallet, } = useInternalDynamicContext.useInternalDynamicContext();
-    const { setView, goToInitialView } = ViewContext.useViewContext();
+    const { pushView, clearStackAndPushInitialView } = ViewContext.useViewContext();
     const { error, setError, setErrorMessage } = ErrorContext.useErrorContext();
     const { loading, setLoading } = LoadingContext.useLoadingContext();
     const [showRetryButton, setShowRetryButton] = React.useState(_showRetryButton);
@@ -167,7 +167,7 @@ const EmailVerification = ({ isEmailRecoveryFlow = false, showRetryButton: _show
             setShowTransferMessage === null || setShowTransferMessage === void 0 ? void 0 : setShowTransferMessage(true);
         }
         if (isEmailRecoveryFlow) {
-            setView('passkey-recovery-add-email', {
+            pushView('passkey-recovery-add-email', {
                 canSkipAddingEmail: false,
                 isFromEmailVerification: true,
             });
@@ -234,7 +234,7 @@ const EmailVerification = ({ isEmailRecoveryFlow = false, showRetryButton: _show
         hasTurnkeyVerifiedCredentialAuthenticator,
         hasRecoveryEmail,
         isTurnkeyProviderEnabled,
-        setView,
+        pushView,
         addRecoveryEmail,
         setShowAuthFlow,
         (_b = (_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _a === void 0 ? void 0 : _a.embeddedWallets) === null || _b === void 0 ? void 0 : _b.automaticEmbeddedWalletCreation,
@@ -332,7 +332,7 @@ const EmailVerification = ({ isEmailRecoveryFlow = false, showRetryButton: _show
                 setShowRetryButton(false);
             }
             if (error.code === 'invalid_email_verification') {
-                goToInitialView();
+                clearStackAndPushInitialView();
             }
         }
         finally {

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

@@ -118,7 +118,7 @@ const SECONDS_TO_RETRY = 15;
 const EmailVerification = ({ isEmailRecoveryFlow = false, showRetryButton: _showRetryButton = true, showTransferMessage: _showTransferMessage = false, }) => {
     var _a, _b, _c, _d;
     const { environmentId, handleLogOut, setShowAuthFlow, projectSettings, user, userWithMissingInfo, walletConnectorOptions, primaryWallet, } = useInternalDynamicContext();
-    const { setView, goToInitialView } = useViewContext();
+    const { pushView, clearStackAndPushInitialView } = useViewContext();
     const { error, setError, setErrorMessage } = useErrorContext();
     const { loading, setLoading } = useLoadingContext();
     const [showRetryButton, setShowRetryButton] = useState(_showRetryButton);
@@ -163,7 +163,7 @@ const EmailVerification = ({ isEmailRecoveryFlow = false, showRetryButton: _show
             setShowTransferMessage === null || setShowTransferMessage === void 0 ? void 0 : setShowTransferMessage(true);
         }
         if (isEmailRecoveryFlow) {
-            setView('passkey-recovery-add-email', {
+            pushView('passkey-recovery-add-email', {
                 canSkipAddingEmail: false,
                 isFromEmailVerification: true,
             });
@@ -230,7 +230,7 @@ const EmailVerification = ({ isEmailRecoveryFlow = false, showRetryButton: _show
         hasTurnkeyVerifiedCredentialAuthenticator,
         hasRecoveryEmail,
         isTurnkeyProviderEnabled,
-        setView,
+        pushView,
         addRecoveryEmail,
         setShowAuthFlow,
         (_b = (_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _a === void 0 ? void 0 : _a.embeddedWallets) === null || _b === void 0 ? void 0 : _b.automaticEmbeddedWalletCreation,
@@ -328,7 +328,7 @@ const EmailVerification = ({ isEmailRecoveryFlow = false, showRetryButton: _show
                 setShowRetryButton(false);
             }
             if (error.code === 'invalid_email_verification') {
-                goToInitialView();
+                clearStackAndPushInitialView();
             }
         }
         finally {

package/src/lib/views/EmailWalletOTPVerificationView/EmailWalletOTPVerificationView.cjs

@@ -96,7 +96,7 @@ require('../../components/Popper/Popper/Popper.cjs');
 require('../../components/Popper/PopperContext/PopperContext.cjs');
 
 const EmailWalletOTPVerificationView = () => {
-    const { setView } = ViewContext.useViewContext();
+    const { pushView } = ViewContext.useViewContext();
     const [error, setError] = React.useState();
     const { selectedWalletConnector: emailWalletConnector, clearStatesOnBackClick, } = useInternalDynamicContext.useInternalDynamicContext();
     if (!emailWalletConnector ||
@@ -110,7 +110,7 @@ const EmailWalletOTPVerificationView = () => {
     const handleBackClick = () => {
         emailWalletConnector.clearEmail();
         clearStatesOnBackClick();
-        setView('login-with-email-or-wallet');
+        pushView('login-with-email-or-wallet');
         dynamicEvents.dynamicEvents.emit('authFailure', {
             email,
             option: email,

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

@@ -92,7 +92,7 @@ import '../../components/Popper/Popper/Popper.js';
 import '../../components/Popper/PopperContext/PopperContext.js';
 
 const EmailWalletOTPVerificationView = () => {
-    const { setView } = useViewContext();
+    const { pushView } = useViewContext();
     const [error, setError] = useState();
     const { selectedWalletConnector: emailWalletConnector, clearStatesOnBackClick, } = useInternalDynamicContext();
     if (!emailWalletConnector ||
@@ -106,7 +106,7 @@ const EmailWalletOTPVerificationView = () => {
     const handleBackClick = () => {
         emailWalletConnector.clearEmail();
         clearStatesOnBackClick();
-        setView('login-with-email-or-wallet');
+        pushView('login-with-email-or-wallet');
         dynamicEvents.emit('authFailure', {
             email,
             option: email,

package/src/lib/views/EmbeddedReveal/EmbeddedRevealView/EmbeddedRevealView.cjs

@@ -118,7 +118,7 @@ const EmbeddedRevealView = ({ exportPrivateKey, isPromptForExport = false, }) =>
     const { isTurnkeyWallet } = useIsTurnkeyWallet.useIsTurnkeyWallet();
     const { shadowRoot } = ShadowDOM.useShadowDOMContext();
     const { setDynamicWidgetView } = DynamicWidgetContext.useWidgetContext();
-    const { setView } = ViewContext.useViewContext();
+    const { pushView } = ViewContext.useViewContext();
     const { getEOAWallet, isSmartWallet } = useSmartWallets.useSmartWallets();
     const [acknowledgement1, setAcknowledgement1] = React.useState(false);
     const [hasRevealedCoinbaseMpcKey, setHasRevealedCoinbaseMpcKey] = React.useState(false);
@@ -216,11 +216,11 @@ const EmbeddedRevealView = ({ exportPrivateKey, isPromptForExport = false, }) =>
         }
         catch (e) {
             if (e instanceof utils.AccessBlockedError) {
-                setView('access-blocked');
+                pushView('access-blocked');
             }
             return;
         }
-    }, [error, setView]);
+    }, [error, pushView]);
     const { t } = reactI18next.useTranslation();
     const contentHeader = (jsxRuntime.jsxs("div", { children: [primaryWallet &&
                 isSmartWallet(primaryWallet) &&
@@ -261,7 +261,7 @@ const EmbeddedRevealView = ({ exportPrivateKey, isPromptForExport = false, }) =>
             borderRadius: '0.75rem',
         }, allow: 'clipboard-write' }));
     const handleClickUnlink = () => {
-        setView('embedded-delete-view');
+        pushView('embedded-delete-view');
     };
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { trailing: isPromptForExport ? null : closeButton, children: jsxRuntime.jsx(Typography.Typography, { as: 'h1', variant: 'title', color: 'primary', "data-testid": 'dynamic-auth-modal-heading', className: 'header__typography', children: title }) }), jsxRuntime.jsx("div", { className: 'embedded-reveal-view', children: jsxRuntime.jsxs("div", { className: 'embedded-reveal-view__body', children: [contentHeader, isCoinbaseMpcWallet && coinbaseWaasKeyExportIframe, isTurnkeyWallet ? (jsxRuntime.jsx("div", { id: constants.iframeContainerId, style: { display: data ? 'block' : 'none' }, ref: iframeContainerRef })) : null, hasInjectedCredential ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonPadding: 'large', buttonVariant: 'brand-primary', onClick: () => setShowAuthFlow(false), loading: isLoading, copykey: 'dyn_embedded_reveal.done_button_label', typographyProps: {
                                         color: 'inherit',

package/src/lib/views/EmbeddedReveal/EmbeddedRevealView/EmbeddedRevealView.js

@@ -114,7 +114,7 @@ const EmbeddedRevealView = ({ exportPrivateKey, isPromptForExport = false, }) =>
     const { isTurnkeyWallet } = useIsTurnkeyWallet();
     const { shadowRoot } = useShadowDOMContext();
     const { setDynamicWidgetView } = useWidgetContext();
-    const { setView } = useViewContext();
+    const { pushView } = useViewContext();
     const { getEOAWallet, isSmartWallet } = useSmartWallets();
     const [acknowledgement1, setAcknowledgement1] = useState(false);
     const [hasRevealedCoinbaseMpcKey, setHasRevealedCoinbaseMpcKey] = useState(false);
@@ -212,11 +212,11 @@ const EmbeddedRevealView = ({ exportPrivateKey, isPromptForExport = false, }) =>
         }
         catch (e) {
             if (e instanceof AccessBlockedError) {
-                setView('access-blocked');
+                pushView('access-blocked');
             }
             return;
         }
-    }, [error, setView]);
+    }, [error, pushView]);
     const { t } = useTranslation();
     const contentHeader = (jsxs("div", { children: [primaryWallet &&
                 isSmartWallet(primaryWallet) &&
@@ -257,7 +257,7 @@ const EmbeddedRevealView = ({ exportPrivateKey, isPromptForExport = false, }) =>
             borderRadius: '0.75rem',
         }, allow: 'clipboard-write' }));
     const handleClickUnlink = () => {
-        setView('embedded-delete-view');
+        pushView('embedded-delete-view');
     };
     return (jsxs(Fragment, { children: [jsx(ModalHeader, { trailing: isPromptForExport ? null : closeButton, children: jsx(Typography, { as: 'h1', variant: 'title', color: 'primary', "data-testid": 'dynamic-auth-modal-heading', className: 'header__typography', children: title }) }), jsx("div", { className: 'embedded-reveal-view', children: jsxs("div", { className: 'embedded-reveal-view__body', children: [contentHeader, isCoinbaseMpcWallet && coinbaseWaasKeyExportIframe, isTurnkeyWallet ? (jsx("div", { id: iframeContainerId, style: { display: data ? 'block' : 'none' }, ref: iframeContainerRef })) : null, hasInjectedCredential ? (jsxs(Fragment, { children: [jsx(TypographyButton, { buttonPadding: 'large', buttonVariant: 'brand-primary', onClick: () => setShowAuthFlow(false), loading: isLoading, copykey: 'dyn_embedded_reveal.done_button_label', typographyProps: {
                                         color: 'inherit',

package/src/lib/views/LoginView/LoginView.cjs

@@ -24,13 +24,13 @@ var showFarcasterQrCodeView = require('./utils/showFarcasterQrCodeView/showFarca
 const LoginView = () => {
     var _a;
     const { error } = ErrorContext.useErrorContext();
-    const { setView } = ViewContext.useViewContext();
+    const { pushView } = ViewContext.useViewContext();
     const { isWalletOnly, loginViewSections } = useLoginView.useLoginView();
     const { enabledSocialProviders } = SocialRedirectContext.useSocialRedirectContext();
     const { showDefaultFooter } = useAuthLayoutChecks.useAuthLayoutChecks();
     const { handleWalletItemClick } = useWalletItemActions.useWalletItemActions();
     const numOfWallets = ((_a = loginViewSections.find((section) => section.type === sdkApiCore.SdkViewSectionType.Wallet)) === null || _a === void 0 ? void 0 : _a.numOfItemsToDisplay) || 0;
-    const renderViewSections = React.useMemo(() => loginViewSections.map((viewSection, index) => (jsxRuntime.jsx("div", { className: classNames.classNames('login-view__scroll__section', `login-view__scroll__section--${viewSection.type}`), children: jsxRuntime.jsx(LoginViewSection.LoginViewSection, { gotToWalletList: () => setView('login-with-email-or-wallet-full-wallet-list'), index: index, viewSection: viewSection, walletCount: numOfWallets }) }, `${viewSection.type}__${index}`))), [loginViewSections, numOfWallets]);
+    const renderViewSections = React.useMemo(() => loginViewSections.map((viewSection, index) => (jsxRuntime.jsx("div", { className: classNames.classNames('login-view__scroll__section', `login-view__scroll__section--${viewSection.type}`), children: jsxRuntime.jsx(LoginViewSection.LoginViewSection, { gotToWalletList: () => pushView('login-with-email-or-wallet-full-wallet-list'), index: index, viewSection: viewSection, walletCount: numOfWallets }) }, `${viewSection.type}__${index}`))), [loginViewSections, numOfWallets]);
     const errorElement = error && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, { className: 'login-view__error-container', withIcon: false, children: error }));
     if (showFarcasterQrCodeView.showFarcasterQrCodeView(loginViewSections, enabledSocialProviders)) {
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [errorElement, jsxRuntime.jsx(FarcasterQrCodeView.FarcasterQrCodeView, {})] }));

package/src/lib/views/LoginView/LoginView.js

@@ -20,13 +20,13 @@ import { showFarcasterQrCodeView } from './utils/showFarcasterQrCodeView/showFar
 const LoginView = () => {
     var _a;
     const { error } = useErrorContext();
-    const { setView } = useViewContext();
+    const { pushView } = useViewContext();
     const { isWalletOnly, loginViewSections } = useLoginView();
     const { enabledSocialProviders } = useSocialRedirectContext();
     const { showDefaultFooter } = useAuthLayoutChecks();
     const { handleWalletItemClick } = useWalletItemActions();
     const numOfWallets = ((_a = loginViewSections.find((section) => section.type === SdkViewSectionType.Wallet)) === null || _a === void 0 ? void 0 : _a.numOfItemsToDisplay) || 0;
-    const renderViewSections = useMemo(() => loginViewSections.map((viewSection, index) => (jsx("div", { className: classNames('login-view__scroll__section', `login-view__scroll__section--${viewSection.type}`), children: jsx(LoginViewSection, { gotToWalletList: () => setView('login-with-email-or-wallet-full-wallet-list'), index: index, viewSection: viewSection, walletCount: numOfWallets }) }, `${viewSection.type}__${index}`))), [loginViewSections, numOfWallets]);
+    const renderViewSections = useMemo(() => loginViewSections.map((viewSection, index) => (jsx("div", { className: classNames('login-view__scroll__section', `login-view__scroll__section--${viewSection.type}`), children: jsx(LoginViewSection, { gotToWalletList: () => pushView('login-with-email-or-wallet-full-wallet-list'), index: index, viewSection: viewSection, walletCount: numOfWallets }) }, `${viewSection.type}__${index}`))), [loginViewSections, numOfWallets]);
     const errorElement = error && (jsx(ErrorContainer, { className: 'login-view__error-container', withIcon: false, children: error }));
     if (showFarcasterQrCodeView(loginViewSections, enabledSocialProviders)) {
         return (jsxs(Fragment, { children: [errorElement, jsx(FarcasterQrCodeView, {})] }));

package/src/lib/views/LoginView/sections/EmailSignInSection/LoginEmailForm.cjs

@@ -97,7 +97,7 @@ var EmailForm = require('../../../../components/EmailForm/EmailForm.cjs');
 const LoginEmailForm = ({ isLoading, onSubmit, onSubmitError, currentEmail, className, style, }) => {
     var _a;
     const { projectSettings } = useInternalDynamicContext.useInternalDynamicContext();
-    const { view, setView } = ViewContext.useViewContext();
+    const { view, pushView } = ViewContext.useViewContext();
     const { setVerificationUUID, setDisplayedDestination } = VerificationContext.useVerification();
     const { setErrorMessage } = ErrorContext.useErrorContext();
     const [invalidEmail, setInvalidEmail] = React.useState(false);
@@ -120,18 +120,18 @@ const LoginEmailForm = ({ isLoading, onSubmit, onSubmitError, currentEmail, clas
                 // Pass verification info to [EmailVerification]
                 setVerificationUUID(undefined);
                 setDisplayedDestination(emailInput);
-                setView('login-with-email-verification');
+                pushView('login-with-email-verification');
             });
         }
         catch (error) {
             handleEmailSubmitError(error);
-            setView(view.type);
+            pushView(view.type);
         }
     }), [
         connectWithEmail,
         onSubmit,
         handleEmailSubmitError,
-        setView,
+        pushView,
         view,
         setVerificationUUID,
         setDisplayedDestination,

package/src/lib/views/LoginView/sections/EmailSignInSection/LoginEmailForm.js

@@ -93,7 +93,7 @@ import { EmailForm } from '../../../../components/EmailForm/EmailForm.js';
 const LoginEmailForm = ({ isLoading, onSubmit, onSubmitError, currentEmail, className, style, }) => {
     var _a;
     const { projectSettings } = useInternalDynamicContext();
-    const { view, setView } = useViewContext();
+    const { view, pushView } = useViewContext();
     const { setVerificationUUID, setDisplayedDestination } = useVerification();
     const { setErrorMessage } = useErrorContext();
     const [invalidEmail, setInvalidEmail] = useState(false);
@@ -116,18 +116,18 @@ const LoginEmailForm = ({ isLoading, onSubmit, onSubmitError, currentEmail, clas
                 // Pass verification info to [EmailVerification]
                 setVerificationUUID(undefined);
                 setDisplayedDestination(emailInput);
-                setView('login-with-email-verification');
+                pushView('login-with-email-verification');
             });
         }
         catch (error) {
             handleEmailSubmitError(error);
-            setView(view.type);
+            pushView(view.type);
         }
     }), [
         connectWithEmail,
         onSubmit,
         handleEmailSubmitError,
-        setView,
+        pushView,
         view,
         setVerificationUUID,
         setDisplayedDestination,

package/src/lib/views/LoginView/sections/PhoneNumberSignInSection/useSubmitPhoneNumber/useSubmitPhoneNumber.cjs

@@ -96,7 +96,7 @@ var useInternalDynamicContext = require('../../../../../context/DynamicContext/u
 
 const useSubmitPhoneNumber = ({ onSubmit, onSubmitError, country, phone, setInvalidNumberMessage, }) => {
     const { engageCaptcha } = CaptchaContext.useCaptchaContext();
-    const { view, setView } = ViewContext.useViewContext();
+    const { view, pushView } = ViewContext.useViewContext();
     const { environmentId, projectSettings } = useInternalDynamicContext.useInternalDynamicContext();
     const { setDisplayedDestination, setVerificationUUID, setRetryData } = VerificationContext.useVerification();
     const { fieldsConfig } = useFields.useFields();
@@ -123,7 +123,7 @@ const useSubmitPhoneNumber = ({ onSubmit, onSubmitError, country, phone, setInva
             });
             // we can safely assume phone number always requires verification here
             // because this hook is only used for SMS sign in.
-            setView('login-with-sms-verification');
+            pushView('login-with-sms-verification');
             setDisplayedDestination(formatPhone.formatPhone(phone));
             setVerificationUUID(verificationUUID);
             const phoneData = {
@@ -139,7 +139,7 @@ const useSubmitPhoneNumber = ({ onSubmit, onSubmitError, country, phone, setInva
             onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit();
         }
         catch (error) {
-            setView(view.type);
+            pushView(view.type);
             if (error instanceof utils.SmsVerificationError) {
                 let message = t('dyn_login.helper.phone_number_form.invalid_phone');
                 if (error.code === 'too_many_sms_verification_attempts') {

package/src/lib/views/LoginView/sections/PhoneNumberSignInSection/useSubmitPhoneNumber/useSubmitPhoneNumber.js

@@ -92,7 +92,7 @@ import { useInternalDynamicContext } from '../../../../../context/DynamicContext
 
 const useSubmitPhoneNumber = ({ onSubmit, onSubmitError, country, phone, setInvalidNumberMessage, }) => {
     const { engageCaptcha } = useCaptchaContext();
-    const { view, setView } = useViewContext();
+    const { view, pushView } = useViewContext();
     const { environmentId, projectSettings } = useInternalDynamicContext();
     const { setDisplayedDestination, setVerificationUUID, setRetryData } = useVerification();
     const { fieldsConfig } = useFields();
@@ -119,7 +119,7 @@ const useSubmitPhoneNumber = ({ onSubmit, onSubmitError, country, phone, setInva
             });
             // we can safely assume phone number always requires verification here
             // because this hook is only used for SMS sign in.
-            setView('login-with-sms-verification');
+            pushView('login-with-sms-verification');
             setDisplayedDestination(formatPhone(phone));
             setVerificationUUID(verificationUUID);
             const phoneData = {
@@ -135,7 +135,7 @@ const useSubmitPhoneNumber = ({ onSubmit, onSubmitError, country, phone, setInva
             onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit();
         }
         catch (error) {
-            setView(view.type);
+            pushView(view.type);
             if (error instanceof SmsVerificationError) {
                 let message = t('dyn_login.helper.phone_number_form.invalid_phone');
                 if (error.code === 'too_many_sms_verification_attempts') {

package/src/lib/views/LoginView/sections/SocialSignInSection/DynamicSocialSignIn/DynamicSocialSignIn.cjs

@@ -97,13 +97,13 @@ var SocialSignIn = require('../../../../../components/SocialSignIn/SocialSignIn.
 const DynamicSocialSignIn = ({ defaultProvider, numOfItemsToDisplay, collapsedLayout, }) => {
     const { setShowAuthFlow, projectSettings } = useInternalDynamicContext.useInternalDynamicContext();
     const { setSocialProvider, socialProvider, enabledSocialProviders } = SocialRedirectContext.useSocialRedirectContext();
-    const { setView, goToInitialView } = ViewContext.useViewContext();
+    const { pushView, clearStackAndPushInitialView } = ViewContext.useViewContext();
     const { engageCaptcha } = CaptchaContext.useCaptchaContext();
     const { isProcessing, connectSocialAccount } = useSocialAuth.useSocialAuth({
         onError: () => {
-            goToInitialView();
+            clearStackAndPushInitialView();
         },
-        onFarcasterUrl: (url) => setView('farcaster-connect-view', { url }, {
+        onFarcasterUrl: (url) => pushView('farcaster-connect-view', { url }, {
             onBackClick: () => {
                 setSocialProvider(undefined);
                 dynamicEvents.dynamicEvents.emit('farcasterConnectCancelled');
@@ -127,7 +127,7 @@ const DynamicSocialSignIn = ({ defaultProvider, numOfItemsToDisplay, collapsedLa
             engageCaptcha({
                 authMethod: 'social',
                 onCaptchaSuccess: (captchaToken) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-                    setView('social-redirect-view');
+                    pushView('social-redirect-view');
                     setShowAuthFlow(true);
                     connectSocialAccount({
                         authMode: 'signin',
@@ -139,7 +139,7 @@ const DynamicSocialSignIn = ({ defaultProvider, numOfItemsToDisplay, collapsedLa
             return;
         }
         // No Captcha enabled
-        setView('social-redirect-view');
+        pushView('social-redirect-view');
         setShowAuthFlow(true);
         connectSocialAccount({
             authMode: 'signin',

package/src/lib/views/LoginView/sections/SocialSignInSection/DynamicSocialSignIn/DynamicSocialSignIn.js

@@ -93,13 +93,13 @@ import { SocialSignIn } from '../../../../../components/SocialSignIn/SocialSignI
 const DynamicSocialSignIn = ({ defaultProvider, numOfItemsToDisplay, collapsedLayout, }) => {
     const { setShowAuthFlow, projectSettings } = useInternalDynamicContext();
     const { setSocialProvider, socialProvider, enabledSocialProviders } = useSocialRedirectContext();
-    const { setView, goToInitialView } = useViewContext();
+    const { pushView, clearStackAndPushInitialView } = useViewContext();
     const { engageCaptcha } = useCaptchaContext();
     const { isProcessing, connectSocialAccount } = useSocialAuth({
         onError: () => {
-            goToInitialView();
+            clearStackAndPushInitialView();
         },
-        onFarcasterUrl: (url) => setView('farcaster-connect-view', { url }, {
+        onFarcasterUrl: (url) => pushView('farcaster-connect-view', { url }, {
             onBackClick: () => {
                 setSocialProvider(undefined);
                 dynamicEvents.emit('farcasterConnectCancelled');
@@ -123,7 +123,7 @@ const DynamicSocialSignIn = ({ defaultProvider, numOfItemsToDisplay, collapsedLa
             engageCaptcha({
                 authMethod: 'social',
                 onCaptchaSuccess: (captchaToken) => __awaiter(void 0, void 0, void 0, function* () {
-                    setView('social-redirect-view');
+                    pushView('social-redirect-view');
                     setShowAuthFlow(true);
                     connectSocialAccount({
                         authMode: 'signin',
@@ -135,7 +135,7 @@ const DynamicSocialSignIn = ({ defaultProvider, numOfItemsToDisplay, collapsedLa
             return;
         }
         // No Captcha enabled
-        setView('social-redirect-view');
+        pushView('social-redirect-view');
         setShowAuthFlow(true);
         connectSocialAccount({
             authMode: 'signin',

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

@@ -94,7 +94,7 @@ require('../../store/state/tokenBalances.cjs');
 require('../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
 
 const MergeUserAccountsView = (props) => {
-    const { setView } = ViewContext.useViewContext();
+    const { pushView } = ViewContext.useViewContext();
     const { mergeUserAccounts } = useMergeUserAccounts.useMergeUserAccounts();
     const { t } = reactI18next.useTranslation();
     const [error, setError] = React.useState('');
@@ -102,9 +102,9 @@ const MergeUserAccountsView = (props) => {
     const goToConflictsResolutionView = () => {
         // back button on conflicts resolution view should go back to this view
         const onConflictsResolutionBackClick = () => {
-            setView('merge-user-accounts', props);
+            pushView('merge-user-accounts', props);
         };
-        setView('merge-user-accounts-conflicts', { mergeConflicts: (mergeConflicts === null || mergeConflicts === void 0 ? void 0 : mergeConflicts.conflicts) || [] }, {
+        pushView('merge-user-accounts-conflicts', { mergeConflicts: (mergeConflicts === null || mergeConflicts === void 0 ? void 0 : mergeConflicts.conflicts) || [] }, {
             onBackClick: onConflictsResolutionBackClick,
         });
     };

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

@@ -90,7 +90,7 @@ import '../../store/state/tokenBalances.js';
 import '../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
 
 const MergeUserAccountsView = (props) => {
-    const { setView } = useViewContext();
+    const { pushView } = useViewContext();
     const { mergeUserAccounts } = useMergeUserAccounts();
     const { t } = useTranslation();
     const [error, setError] = useState('');
@@ -98,9 +98,9 @@ const MergeUserAccountsView = (props) => {
     const goToConflictsResolutionView = () => {
         // back button on conflicts resolution view should go back to this view
         const onConflictsResolutionBackClick = () => {
-            setView('merge-user-accounts', props);
+            pushView('merge-user-accounts', props);
         };
-        setView('merge-user-accounts-conflicts', { mergeConflicts: (mergeConflicts === null || mergeConflicts === void 0 ? void 0 : mergeConflicts.conflicts) || [] }, {
+        pushView('merge-user-accounts-conflicts', { mergeConflicts: (mergeConflicts === null || mergeConflicts === void 0 ? void 0 : mergeConflicts.conflicts) || [] }, {
             onBackClick: onConflictsResolutionBackClick,
         });
     };

package/src/lib/views/MergeUserAccountsWithSameEmailView/MergeUserAccountsWithSameEmailView.cjs

@@ -104,7 +104,7 @@ const MergeUserAccountsWithSameEmailView = ({ returnToView }) => {
     const handleAuthenticatedUser = useHandleAuthenticatedUser.useHandleAuthenticatedUser();
     const { t } = reactI18next.useTranslation();
     const { setError } = ErrorContext.useErrorContext();
-    const { setView, goToInitialView } = ViewContext.useViewContext();
+    const { pushView, clearStackAndPushInitialView } = ViewContext.useViewContext();
     const { displayedDestination: email } = VerificationContext.useVerification();
     const handleMergeUserAccounts = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         try {
@@ -122,20 +122,20 @@ const MergeUserAccountsWithSameEmailView = ({ returnToView }) => {
                 setShowAuthFlow(false, { emitCancelAuth: true });
                 return;
             }
-            goToInitialView();
+            clearStackAndPushInitialView();
         }
     });
     const handleUseDifferentEmail = () => {
         setError(undefined);
         if (returnToView) {
-            setView(returnToView);
+            pushView(returnToView);
             return;
         }
         if (user$1) {
             setShowAuthFlow(false);
             return;
         }
-        setView('collect-user-data');
+        pushView('collect-user-data');
     };
     return (jsxRuntime.jsxs("div", { className: 'merge-user-accounts-with-same-email__container', children: [jsxRuntime.jsxs("div", { className: 'merge-user-accounts-with-same-email__accounts', children: [jsxRuntime.jsxs("div", { className: 'merge-user-accounts-with-same-email__accounts__item', children: [jsxRuntime.jsx(walletBook.WalletIcon, { icon: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.metadata.icon, walletKey: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.key, className: 'merge-user-accounts-with-same-email__accounts__item__icon' }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'medium', color: 'secondary', className: 'merge-user-accounts-with-same-email__accounts__item__text', children: shortenWalletAddress.shortenWalletAddress(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address, 3, 3) })] }), jsxRuntime.jsx("div", { className: 'merge-user-accounts-with-same-email__accounts__divider', children: jsxRuntime.jsx(Icon.Icon, { color: 'text-secondary', size: 'small', children: jsxRuntime.jsx(doubleArrowRight.ReactComponent, {}) }) }), jsxRuntime.jsxs("div", { className: 'merge-user-accounts-with-same-email__accounts__item', children: [jsxRuntime.jsx(iconic.UserProfileIcon, { className: 'merge-user-accounts-with-same-email__accounts__item__icon' }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'medium', color: 'secondary', className: 'merge-user-accounts-with-same-email__accounts__item__text', children: shortenEmail.shortenEmail(email, {
                                     breakpoint: 4,

package/src/lib/views/MergeUserAccountsWithSameEmailView/MergeUserAccountsWithSameEmailView.js

@@ -100,7 +100,7 @@ const MergeUserAccountsWithSameEmailView = ({ returnToView }) => {
     const handleAuthenticatedUser = useHandleAuthenticatedUser();
     const { t } = useTranslation();
     const { setError } = useErrorContext();
-    const { setView, goToInitialView } = useViewContext();
+    const { pushView, clearStackAndPushInitialView } = useViewContext();
     const { displayedDestination: email } = useVerification();
     const handleMergeUserAccounts = () => __awaiter(void 0, void 0, void 0, function* () {
         try {
@@ -118,20 +118,20 @@ const MergeUserAccountsWithSameEmailView = ({ returnToView }) => {
                 setShowAuthFlow(false, { emitCancelAuth: true });
                 return;
             }
-            goToInitialView();
+            clearStackAndPushInitialView();
         }
     });
     const handleUseDifferentEmail = () => {
         setError(undefined);
         if (returnToView) {
-            setView(returnToView);
+            pushView(returnToView);
             return;
         }
         if (user) {
             setShowAuthFlow(false);
             return;
         }
-        setView('collect-user-data');
+        pushView('collect-user-data');
     };
     return (jsxs("div", { className: 'merge-user-accounts-with-same-email__container', children: [jsxs("div", { className: 'merge-user-accounts-with-same-email__accounts', children: [jsxs("div", { className: 'merge-user-accounts-with-same-email__accounts__item', children: [jsx(WalletIcon, { icon: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.metadata.icon, walletKey: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.key, className: 'merge-user-accounts-with-same-email__accounts__item__icon' }), jsx(Typography, { variant: 'body_normal', weight: 'medium', color: 'secondary', className: 'merge-user-accounts-with-same-email__accounts__item__text', children: shortenWalletAddress(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address, 3, 3) })] }), jsx("div", { className: 'merge-user-accounts-with-same-email__accounts__divider', children: jsx(Icon, { color: 'text-secondary', size: 'small', children: jsx(SvgDoubleArrowRight, {}) }) }), jsxs("div", { className: 'merge-user-accounts-with-same-email__accounts__item', children: [jsx(UserProfileIcon, { className: 'merge-user-accounts-with-same-email__accounts__item__icon' }), jsx(Typography, { variant: 'body_normal', weight: 'medium', color: 'secondary', className: 'merge-user-accounts-with-same-email__accounts__item__text', children: shortenEmail(email, {
                                     breakpoint: 4,

package/src/lib/views/MfaChooseDeviceView/MfaChooseDeviceView.cjs

@@ -101,23 +101,23 @@ require('../../components/Popper/PopperContext/PopperContext.cjs');
 const MfaChooseDeviceView = ({ isInitialSetup = true, }) => {
     const { handleLogOut } = useDynamicContext.useDynamicContext();
     const { t } = reactI18next.useTranslation();
-    const { setView } = ViewContext.useViewContext();
+    const { pushView } = ViewContext.useViewContext();
     const mfaOptions = getMfaOptions.getMfaOptions(isInitialSetup);
     const handleClick = (option) => {
         if (option.type === 'backupCode') {
-            setView('mfa-recovery', undefined, {
+            pushView('mfa-recovery', undefined, {
                 onBackClick: () => {
-                    setView('mfa-choose-device', { isInitialSetup: false });
+                    pushView('mfa-choose-device', { isInitialSetup: false });
                     return 'override';
                 },
             });
             return;
         }
         if (isInitialSetup) {
-            setView('mfa-secure-device', { type: option.type });
+            pushView('mfa-secure-device', { type: option.type });
             return;
         }
-        setView('mfa-verification', {
+        pushView('mfa-verification', {
             isInitialSetup,
             showBackButton: true,
             type: option.type,