fix: missing smart transaction status confirmation (MetaMask#29860)

## **Description**

Ensure the smart transaction status confirmation is shown after internal
transfer transactions are confirmed.

Resolved by triggering confirmation navigation if only approval flows
exist in the state.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/29860?quickstart=1)

## **Related issues**

Fixes: MetaMask#29806 

## **Manual testing steps**

See issue.

## **Screenshots/Recordings**

### **Before**

### **After**

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

ui/pages/confirmations/hooks/useConfirmationNavigation.test.ts

@@ -116,6 +116,19 @@ describe('useConfirmationNavigation', () => {
       );
     });
 
+    it('does not navigate to template route if approval flow and pending approval', () => {
+      const result = renderHook(ApprovalType.Transaction, undefined, [
+        {} as never,
+      ]);
+
+      result.navigateToId(APPROVAL_ID_MOCK);
+
+      expect(history.replace).toHaveBeenCalledTimes(1);
+      expect(history.replace).toHaveBeenCalledWith(
+        `${CONFIRM_TRANSACTION_ROUTE}/${APPROVAL_ID_MOCK}`,
+      );
+    });
+
     it('navigates to connect route', () => {
       const result = renderHook(ApprovalType.WalletRequestPermissions);
 

ui/pages/confirmations/hooks/useConfirmationNavigation.ts

@@ -76,12 +76,14 @@ export function navigateToConfirmation(
   hasApprovalFlows: boolean,
   history: ReturnType<typeof useHistory>,
 ) {
-  if (hasApprovalFlows) {
+  const hasNoConfirmations = confirmations?.length <= 0 || !confirmationId;
+
+  if (hasApprovalFlows && hasNoConfirmations) {
     history.replace(`${CONFIRMATION_V_NEXT_ROUTE}`);
     return;
   }
 
-  if (confirmations?.length <= 0 || !confirmationId) {
+  if (hasNoConfirmations) {
     return;
   }
 

ui/pages/home/home.component.js

@@ -315,9 +315,9 @@ export default class Home extends PureComponent {
       history.push(PREPARE_SWAP_ROUTE);
     } else if (canRedirect && haveBridgeQuotes) {
       history.push(CROSS_CHAIN_SWAP_ROUTE + PREPARE_SWAP_ROUTE);
-    } else if (pendingApprovals.length) {
+    } else if (pendingApprovals.length || hasApprovalFlows) {
       navigateToConfirmation(
-        pendingApprovals[0].id,
+        pendingApprovals?.[0]?.id,
         pendingApprovals,
         hasApprovalFlows,
         history,