diff --git a/ui/pages/confirmations/hooks/useCurrentConfirmation.ts b/ui/pages/confirmations/hooks/useCurrentConfirmation.ts index 7268d0daf1da..cf5e8a1383a2 100644 --- a/ui/pages/confirmations/hooks/useCurrentConfirmation.ts +++ b/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, diff --git a/ui/pages/confirmations/selectors/confirm.test.ts b/ui/pages/confirmations/selectors/confirm.test.ts index d765e6df5f51..c573a7d5822b 100644 --- a/ui/pages/confirmations/selectors/confirm.test.ts +++ b/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]); }); }); diff --git a/ui/pages/confirmations/selectors/confirm.ts b/ui/pages/confirmations/selectors/confirm.ts index 54b4cc4f61b8..57107bdf3021 100644 --- a/ui/pages/confirmations/selectors/confirm.ts +++ b/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