fix: Consistent confirmation navigation (#27326)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

As per the way the old confirmation navigation works, when submitting
multiple confirmation requests to the wallet, we want to select the
oldest confirmation by default (1 of X).

If `paramsTransactionId` is undefined in
`ui/pages/confirmations/hooks/syncConfirmPath.ts`, the default
confirmation id comes from `currentConfirmation`. As such, the first
`currentConfirmation` selected in `useCurrentConfirmation` will
determine the default position in the array of X sorted confirmations.

Instead of using latestPendingApproval, we want to use the oldest (first
to be created) one.

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

## **Related issues**

Fixes: #27252

## **Manual testing steps**

1. Go to this page...
2.
3.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.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/useCurrentConfirmation.ts

@@ -1,26 +1,26 @@
-import { useSelector } from 'react-redux';
-import { useParams } from 'react-router-dom';
+import { ApprovalType } from '@metamask/controller-utils';
 import {
   TransactionMeta,
   TransactionType,
 } from '@metamask/transaction-controller';
-import { ApprovalType } from '@metamask/controller-utils';
 import { useMemo } from 'react';
+import { useSelector } from 'react-redux';
+import { useParams } from 'react-router-dom';
 import {
   ApprovalsMetaMaskState,
   getIsRedesignedConfirmationsDeveloperEnabled,
   getRedesignedConfirmationsEnabled,
   getRedesignedTransactionsEnabled,
   getUnapprovedTransaction,
-  latestPendingConfirmationSelector,
+  oldestPendingConfirmationSelector,
   selectPendingApproval,
 } from '../../../selectors';
+import { selectUnapprovedMessage } from '../../../selectors/signatures';
 import {
   REDESIGN_APPROVAL_TYPES,
   REDESIGN_DEV_TRANSACTION_TYPES,
   REDESIGN_USER_TRANSACTION_TYPES,
 } from '../utils';
-import { selectUnapprovedMessage } from '../../../selectors/signatures';
 
 /**
  * Determine the current confirmation based on the pending approvals and controller state.
@@ -32,8 +32,8 @@ import { selectUnapprovedMessage } from '../../../selectors/signatures';
  */
 const useCurrentConfirmation = () => {
   const { id: paramsConfirmationId } = useParams<{ id: string }>();
-  const latestPendingApproval = useSelector(latestPendingConfirmationSelector);
-  const confirmationId = paramsConfirmationId ?? latestPendingApproval?.id;
+  const oldestPendingApproval = useSelector(oldestPendingConfirmationSelector);
+  const confirmationId = paramsConfirmationId ?? oldestPendingApproval?.id;
 
   const isRedesignedSignaturesUserSettingEnabled = useSelector(
     getRedesignedConfirmationsEnabled,

ui/pages/confirmations/selectors/confirm.test.ts

@@ -3,7 +3,7 @@ import { ApprovalType } from '@metamask/controller-utils';
 import { ConfirmMetamaskState } from '../types/confirm';
 import {
   getIsRedesignedConfirmationsDeveloperEnabled,
-  latestPendingConfirmationSelector,
+  oldestPendingConfirmationSelector,
   pendingConfirmationsSelector,
 } from './confirm';
 
@@ -54,11 +54,11 @@ describe('confirm selectors', () => {
     });
   });
 
-  describe('latestPendingConfirmationSelector', () => {
-    it('should return latest pending confirmation from state', () => {
-      const result = latestPendingConfirmationSelector(mockedState);
+  describe('oldestPendingConfirmationSelector', () => {
+    it('should return oldest pending confirmation from state', () => {
+      const result = oldestPendingConfirmationSelector(mockedState);
 
-      expect(result).toStrictEqual(mockedState.metamask.pendingApprovals[2]);
+      expect(result).toStrictEqual(mockedState.metamask.pendingApprovals[3]);
     });
   });
 

ui/pages/confirmations/selectors/confirm.ts

@@ -2,9 +2,9 @@ import { ApprovalType } from '@metamask/controller-utils';
 
 import { createSelector } from 'reselect';
 import { getPendingApprovals } from '../../../selectors/approvals';
-import { ConfirmMetamaskState } from '../types/confirm';
-import { createDeepEqualSelector } from '../../../selectors/util';
 import { getPreferences } from '../../../selectors/selectors';
+import { createDeepEqualSelector } from '../../../selectors/util';
+import { ConfirmMetamaskState } from '../types/confirm';
 
 const ConfirmationApprovalTypes = [
   ApprovalType.PersonalSign,
@@ -28,15 +28,14 @@ export function pendingConfirmationsSortedSelector(
     .sort((a1, a2) => a1.time - a2.time);
 }
 
-const internalLatestPendingConfirmationSelector = createSelector(
+const firstPendingConfirmationSelector = createSelector(
   pendingConfirmationsSortedSelector,
-  (pendingConfirmations) =>
-    pendingConfirmations.sort((a1, a2) => a2.time - a1.time)[0],
+  (pendingConfirmations) => pendingConfirmations[0],
 );
 
-export const latestPendingConfirmationSelector = createDeepEqualSelector(
-  internalLatestPendingConfirmationSelector,
-  (latestPendingConfirmation) => latestPendingConfirmation,
+export const oldestPendingConfirmationSelector = createDeepEqualSelector(
+  firstPendingConfirmationSelector,
+  (firstPendingConfirmation) => firstPendingConfirmation,
 );
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any