fix(confirmations): avoid stale confirmation on back from Activity after a transaction

After a full-screen confirmation submitted, the redirect pushed the Activity screen on top of the now-consumed confirmation (approval deleted via deleteAfterResult), so pressing back returned to it and it rendered an infinite loader. A new navigateToActivityAfterConfirmation helper replaces the confirmation's stack with Activity in a single StackActions.replace, avoiding the stale screen and the pop+push double-animation. Wired into the shared transaction confirm hook, batch approvals, the Earn lending deposit/withdrawal views, and the legacy staking footer.

TMCU-1001

Author: vinnyhoward

app/components/UI/Earn/Views/EarnLendingDepositConfirmationView/index.tsx

@@ -11,6 +11,7 @@ import { ScrollView, View } from 'react-native';
 import { useSelector } from 'react-redux';
 import { strings } from '../../../../../../locales/i18n';
 import Routes from '../../../../../constants/navigation/Routes';
+import { navigateToActivityAfterConfirmation } from '../../../../../util/navigation/navigateToActivityAfterConfirmation';
 import Engine from '../../../../../core/Engine';
 import { selectSelectedInternalAccountByScope } from '../../../../../selectors/multichainAccounts/accounts';
 import { selectCurrentCurrency } from '../../../../../selectors/currencyRateController';
@@ -415,7 +416,7 @@ const EarnLendingDepositConfirmationView = () => {
           });
           // There is variance in when navigation can be called across chains
           setTimeout(() => {
-            navigation.navigate(Routes.TRANSACTIONS_VIEW);
+            navigateToActivityAfterConfirmation(navigation);
           }, 0);
         },
         ({ transactionMeta }) => transactionMeta.id === transactionId,

app/components/UI/Earn/Views/EarnLendingWithdrawalConfirmationView/index.tsx

@@ -21,6 +21,7 @@ import Text, {
   TextVariant,
 } from '../../../../../component-library/components/Texts/Text';
 import Routes from '../../../../../constants/navigation/Routes';
+import { navigateToActivityAfterConfirmation } from '../../../../../util/navigation/navigateToActivityAfterConfirmation';
 import {
   IMetaMetricsEvent,
   MetaMetricsEvents,
@@ -316,7 +317,7 @@ const EarnLendingWithdrawalConfirmationView = () => {
           });
           // There is variance in when navigation can be called across chains
           setTimeout(() => {
-            navigation.navigate(Routes.TRANSACTIONS_VIEW);
+            navigateToActivityAfterConfirmation(navigation);
           }, 0);
         },
         ({ transactionMeta }) => transactionMeta.id === transactionId,

app/components/UI/Stake/components/StakingConfirmation/ConfirmationFooter/FooterButtonGroup/FooterButtonGroup.tsx

@@ -22,7 +22,7 @@ import {
   FooterButtonGroupActions,
   FooterButtonGroupProps,
 } from './FooterButtonGroup.types';
-import Routes from '../../../../../../../constants/navigation/Routes';
+import { navigateToActivityAfterConfirmation } from '../../../../../../../util/navigation/navigateToActivityAfterConfirmation';
 import usePoolStakedUnstake from '../../../../hooks/usePoolStakedUnstake';
 import { useAnalytics } from '../../../../../../hooks/useAnalytics/useAnalytics';
 import {
@@ -59,7 +59,6 @@ const FooterButtonGroup = ({ valueWei, action }: FooterButtonGroupProps) => {
   const { styles } = useStyles(styleSheet, {});
 
   const navigation = useNavigation();
-  const { navigate } = navigation;
 
   const { trackEvent, createEventBuilder } = useAnalytics();
 
@@ -117,7 +116,7 @@ const FooterButtonGroup = ({ valueWei, action }: FooterButtonGroupProps) => {
         () => {
           submitTxMetaMetric(STAKING_TX_METRIC_EVENTS[action].SUBMITTED);
           setDidSubmitTransaction(false);
-          navigate(Routes.TRANSACTIONS_VIEW);
+          navigateToActivityAfterConfirmation(navigation);
         },
         ({ transactionMeta }) => transactionMeta.id === transactionId,
       );
@@ -148,7 +147,7 @@ const FooterButtonGroup = ({ valueWei, action }: FooterButtonGroupProps) => {
         (transactionMeta) => transactionMeta.id === transactionId,
       );
     },
-    [action, navigate, submitTxMetaMetric],
+    [action, navigation, submitTxMetaMetric],
   );
 
   const handleConfirmation = async () => {

app/components/Views/confirmations/hooks/transactions/useTransactionConfirm.ts

@@ -26,6 +26,7 @@ import { useGaslessSupportedSmartTransactions } from '../gas/useGaslessSupported
 import { cloneDeep } from 'lodash';
 import { useTransactionPayQuotes } from '../pay/useTransactionPayData';
 import { useMusdConfirmNavigation } from '../../../../UI/Earn/hooks/useMusdConfirmNavigation';
+import { navigateToActivityAfterConfirmation } from '../../../../../util/navigation/navigateToActivityAfterConfirmation';
 import { useFiatConfirm } from '../pay/useFiatConfirm';
 import { useHandleHwSend } from '../../../../UI/HardwareWallet/Swaps/useHandleHwSend';
 
@@ -200,7 +201,7 @@ export function useTransactionConfirm() {
         isFullScreenConfirmation &&
         !hasTransactionType(transactionMetadata, GO_BACK_TYPES)
       ) {
-        navigation.navigate(Routes.TRANSACTIONS_VIEW);
+        navigateToActivityAfterConfirmation(navigation);
       } else {
         navigation.goBack();
       }

app/components/Views/confirmations/hooks/useConfirmActions.ts

@@ -5,6 +5,7 @@ import { TransactionType } from '@metamask/transaction-controller';
 
 import PPOMUtil from '../../../../lib/ppom/ppom-util';
 import Routes from '../../../../constants/navigation/Routes';
+import { navigateToActivityAfterConfirmation } from '../../../../util/navigation/navigateToActivityAfterConfirmation';
 import { MetaMetricsEvents } from '../../../../core/Analytics';
 
 import { isSignatureRequest } from '../utils/confirm';
@@ -76,7 +77,7 @@ export const useConfirmActions = () => {
     });
 
     if (approvalType === ApprovalType.TransactionBatch) {
-      navigation.navigate(Routes.TRANSACTIONS_VIEW);
+      navigateToActivityAfterConfirmation(navigation);
     } else {
       navigation.goBack();
     }

app/util/navigation/navigateToActivityAfterConfirmation.test.tsx

@@ -0,0 +1,233 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { render, fireEvent, act } from '@testing-library/react-native';
+import {
+  NavigationContainer,
+  createNavigationContainerRef,
+  useNavigation,
+  type NavigationState,
+  type PartialState,
+} from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import Routes from '../../constants/navigation/Routes';
+import { navigateToActivityAfterConfirmation } from './navigateToActivityAfterConfirmation';
+
+// This is an integration test against REAL React Navigation state (not mocked),
+// because the fix depends on how the confirmation pop and the Activity push
+// interact across nested navigators (and the ordering differs by stack shape).
+// It reconstructs the exact stack shape each flow has at transaction-submission
+// time (see the flow traces in the PR description) and asserts that after the
+// redirect:
+//   1. the user lands on the Activity screen, and
+//   2. pressing "back" returns to the transaction-building screen, not the
+//      consumed confirmation.
+
+const RootStack = createNativeStackNavigator();
+const NestedStack = createNativeStackNavigator();
+
+const REDESIGNED = Routes.FULL_SCREEN_CONFIRMATIONS.REDESIGNED_CONFIRMATIONS;
+
+const Probe = ({ label }: { label: string }) => <Text>{label}</Text>;
+
+// A confirmation screen whose only job is to trigger the redirect helper with
+// its own (nested) navigation object — mirroring how the real confirmation
+// footers/hooks call it.
+const ConfirmationScreen = () => {
+  const navigation = useNavigation();
+  return (
+    <Text
+      testID="redirect-trigger"
+      onPress={() => navigateToActivityAfterConfirmation(navigation)}
+    >
+      confirm
+    </Text>
+  );
+};
+
+const StakeScreensNavigator = () => (
+  <NestedStack.Navigator screenOptions={{ headerShown: false }}>
+    <NestedStack.Screen name={Routes.STAKING.STAKE}>
+      {() => <Probe label="stake-input" />}
+    </NestedStack.Screen>
+    <NestedStack.Screen name={REDESIGNED} component={ConfirmationScreen} />
+  </NestedStack.Navigator>
+);
+
+const EarnScreensNavigator = () => (
+  <NestedStack.Navigator screenOptions={{ headerShown: false }}>
+    <NestedStack.Screen
+      name={Routes.EARN.LENDING_DEPOSIT_CONFIRMATION}
+      component={ConfirmationScreen}
+    />
+  </NestedStack.Navigator>
+);
+
+const SendNavigator = () => (
+  <NestedStack.Navigator screenOptions={{ headerShown: false }}>
+    <NestedStack.Screen name={Routes.SEND.AMOUNT}>
+      {() => <Probe label="send-amount" />}
+    </NestedStack.Screen>
+    <NestedStack.Screen name={Routes.SEND.RECIPIENT}>
+      {() => <Probe label="send-recipient" />}
+    </NestedStack.Screen>
+    <NestedStack.Screen name={REDESIGNED} component={ConfirmationScreen} />
+  </NestedStack.Navigator>
+);
+
+const renderTree = (
+  initialState: PartialState<NavigationState>,
+  ref: ReturnType<typeof createNavigationContainerRef>,
+) =>
+  render(
+    <NavigationContainer ref={ref} initialState={initialState}>
+      {/* TRANSACTIONS_VIEW is registered at the root level, as it is when the
+          Money-account feature is enabled — this is what lets a bare
+          navigate(TRANSACTIONS_VIEW) push Activity on top of a confirmation. */}
+      <RootStack.Navigator screenOptions={{ headerShown: false }}>
+        <RootStack.Screen name={Routes.HOME_TABS}>
+          {() => <Probe label="home" />}
+        </RootStack.Screen>
+        <RootStack.Screen
+          name="StakeScreens"
+          component={StakeScreensNavigator}
+        />
+        <RootStack.Screen
+          name={Routes.EARN.ROOT}
+          component={EarnScreensNavigator}
+        />
+        <RootStack.Screen
+          name={Routes.SEND.DEFAULT}
+          component={SendNavigator}
+        />
+        <RootStack.Screen name={Routes.TRANSACTIONS_VIEW}>
+          {() => <Probe label="activity" />}
+        </RootStack.Screen>
+      </RootStack.Navigator>
+    </NavigationContainer>,
+  );
+
+// Name of the currently focused leaf route in the whole tree.
+const focusedRouteName = (
+  ref: ReturnType<typeof createNavigationContainerRef>,
+): string | undefined => ref.getCurrentRoute()?.name;
+
+// Names of the top-level (root) routes, in order.
+const rootRouteNames = (
+  ref: ReturnType<typeof createNavigationContainerRef>,
+): string[] => (ref.getRootState()?.routes ?? []).map((route) => route.name);
+
+describe('navigateToActivityAfterConfirmation', () => {
+  it('flow 1 (staking): replaces the flow stack with Activity; back returns to Wallet home', () => {
+    const ref = createNavigationContainerRef();
+    const { getByTestId } = renderTree(
+      {
+        routes: [
+          { name: Routes.HOME_TABS },
+          {
+            name: 'StakeScreens',
+            state: {
+              index: 1,
+              routes: [{ name: Routes.STAKING.STAKE }, { name: REDESIGNED }],
+            },
+          },
+        ],
+        index: 1,
+      } as PartialState<NavigationState>,
+      ref,
+    );
+
+    fireEvent.press(getByTestId('redirect-trigger'));
+
+    // The whole StakeScreens flow stack is replaced by Activity (the build
+    // screen is nested inside it, so it goes with it).
+    expect(focusedRouteName(ref)).toBe(Routes.TRANSACTIONS_VIEW);
+    expect(rootRouteNames(ref)).toEqual([
+      Routes.HOME_TABS,
+      Routes.TRANSACTIONS_VIEW,
+    ]);
+
+    // Back returns to Wallet home, not the consumed confirmation.
+    act(() => {
+      ref.goBack();
+    });
+    expect(focusedRouteName(ref)).toBe(Routes.HOME_TABS);
+  });
+
+  it('flow 2 (lending): replaces only the confirmation stack; back returns to the input screen in the surviving sibling stack', () => {
+    const ref = createNavigationContainerRef();
+    const { getByTestId } = renderTree(
+      {
+        routes: [
+          { name: Routes.HOME_TABS },
+          {
+            name: 'StakeScreens',
+            state: { index: 0, routes: [{ name: Routes.STAKING.STAKE }] },
+          },
+          {
+            name: Routes.EARN.ROOT,
+            state: {
+              index: 0,
+              routes: [{ name: Routes.EARN.LENDING_DEPOSIT_CONFIRMATION }],
+            },
+          },
+        ],
+        index: 2,
+      } as PartialState<NavigationState>,
+      ref,
+    );
+
+    fireEvent.press(getByTestId('redirect-trigger'));
+
+    // Only the EarnScreens stack (which held just the confirmation) is replaced;
+    // the sibling StakeScreens stack with the input screen survives beneath.
+    expect(focusedRouteName(ref)).toBe(Routes.TRANSACTIONS_VIEW);
+    expect(rootRouteNames(ref)).toEqual([
+      Routes.HOME_TABS,
+      'StakeScreens',
+      Routes.TRANSACTIONS_VIEW,
+    ]);
+
+    act(() => {
+      ref.goBack();
+    });
+    expect(focusedRouteName(ref)).toBe(Routes.STAKING.STAKE);
+  });
+
+  it('flow 3 (send): replaces the flow stack with Activity; back returns to Wallet home', () => {
+    const ref = createNavigationContainerRef();
+    const { getByTestId } = renderTree(
+      {
+        routes: [
+          { name: Routes.HOME_TABS },
+          {
+            name: Routes.SEND.DEFAULT,
+            state: {
+              index: 2,
+              routes: [
+                { name: Routes.SEND.AMOUNT },
+                { name: Routes.SEND.RECIPIENT },
+                { name: REDESIGNED },
+              ],
+            },
+          },
+        ],
+        index: 1,
+      } as PartialState<NavigationState>,
+      ref,
+    );
+
+    fireEvent.press(getByTestId('redirect-trigger'));
+
+    // The whole Send flow stack (Amount/Recipient/confirmation) is replaced.
+    expect(focusedRouteName(ref)).toBe(Routes.TRANSACTIONS_VIEW);
+    expect(rootRouteNames(ref)).toEqual([
+      Routes.HOME_TABS,
+      Routes.TRANSACTIONS_VIEW,
+    ]);
+
+    act(() => {
+      ref.goBack();
+    });
+    expect(focusedRouteName(ref)).toBe(Routes.HOME_TABS);
+  });
+});

app/util/navigation/navigateToActivityAfterConfirmation.ts

@@ -0,0 +1,54 @@
+import {
+  StackActions,
+  type NavigationProp,
+  type ParamListBase,
+} from '@react-navigation/native';
+import Routes from '../../constants/navigation/Routes';
+
+// Only the navigation methods this helper needs. Using Pick avoids coupling to
+// the caller's exact NavigationProp variant (hooks override `getState`, class
+// props differ, etc.).
+type ActivityRedirectNavigation = Pick<
+  NavigationProp<ParamListBase>,
+  'navigate' | 'getParent'
+>;
+
+/**
+ * Redirects to the Activity screen after a transaction is submitted, dropping
+ * the now-consumed confirmation from the back stack so "back" from Activity does
+ * not land on the stale confirmation (whose approval was consumed via
+ * `deleteAfterResult`, so revisiting it renders an infinite loader).
+ *
+ * The confirmation always lives in a nested stack that is a direct child of the
+ * root navigator (the flow stack: Send, StakeScreens, EarnScreens…). Replacing
+ * that whole stack with Activity, in one `StackActions.replace`, is a single
+ * clean transition — no pop-then-push double animation, no half-finished pop
+ * flashing on back. Native-stack can't cleanly remove a nested confirmation while
+ * keeping its sibling build screen AND push a root-level Activity in one move, so
+ * we replace the stack instead. What "back" lands on then depends on the flow's
+ * shape:
+ *
+ * Same stack as the build screen (send, staking): the whole flow stack is
+ * replaced, so "back" returns to Wallet home.
+ *
+ * Sole screen of its own root-sibling stack (lending): only the confirmation's
+ * stack is replaced; its input screen lives in a sibling stack that survives, so
+ * "back" returns to that input screen.
+ *
+ * Falls back to a plain `navigate` when the parent tree can't be resolved. See the
+ * real-navigator integration tests in `navigateToActivityAfterConfirmation.test.tsx`.
+ *
+ * @param navigation - The confirmation screen's navigation object.
+ */
+export function navigateToActivityAfterConfirmation(
+  navigation: ActivityRedirectNavigation,
+): void {
+  const rootNavigation = navigation.getParent?.();
+
+  if (!rootNavigation) {
+    navigation.navigate(Routes.TRANSACTIONS_VIEW);
+    return;
+  }
+
+  rootNavigation.dispatch(StackActions.replace(Routes.TRANSACTIONS_VIEW));
+}