feat: update claims management ui and navigation (#38380)

<!--
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**
Updated claims navigation and UI


https://www.figma.com/design/HTAO1SrmixV4ppv7qIvLoa/Metamask-Transaction-Shield?node-id=14873-117456&t=Vl0Gf1X669HvXRaY-4
<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

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

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: Updated claims navigation and UI

## **Related issues**

Fixes:

## **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**
**Empty list**
<img width="404" height="606" alt="Screenshot 2025-12-04 at 2 10 26 AM"
src="https://github.com/user-attachments/assets/291c8647-3a9c-4499-8042-a5c953cb03fb"
/>


**Navigation and UI changes**
<video
src="https://github.com/user-attachments/assets/341d4106-c45d-458a-a560-fa0a9facfb1c"
/>



<!-- [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/main/.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/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.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Revamps Transaction Shield claims with a tabbed list
(pending/history), new per‑state groupings, split view routes, updated
navigation/tests, and refreshed i18n; removes legacy status labels.
> 
> - **Transaction Shield – Claims UX overhaul**
>   - **UI/Navigation**:
> - New tabbed `ClaimsList` with `pending` and `history` tabs; groups:
`shieldClaimGroupActive`, `shieldClaimGroupCompleted`,
`shieldClaimGroupRejected`, with empty-state UIs and submit buttons.
> - Split view routes in `ui/helpers/constants/routes.ts`:
`TRANSACTION_SHIELD_CLAIM_ROUTES.VIEW_PENDING` and `...VIEW_HISTORY`;
`ClaimsArea` routes updated accordingly.
> - `TransactionShield` “Submit a claim” now navigates to
`TRANSACTION_SHIELD_CLAIM_ROUTES.BASE` (claims list) instead of
`/new-claim`.
> - `settings.container`: dynamic tab title via `shieldClaimsListTitle`;
back-navigation uses `?tab=pending|history` when returning from view
pages.
>   - **Claims state**:
> - `ui/contexts/claims/claims.tsx`: derive `pendingClaims`,
`completedClaims` (`APPROVED`), `rejectedClaims`; remove ad‑hoc
`claimNumber` mapping.
>   - **Claims form**:
> - View route handling via `isView`; removes previous pending-claims
banner; uses `refetchClaims` and returns to claims base after submit.
>   - **E2E tests & page objects**:
> - New selectors/actions for claims list (`clickSubmitClaimButton`,
`clickEmptyNewClaimButton`); remove `checkClaimStatus`.
> - Tests updated to navigate through `claims` list, click “Submit a
claim”, verify created claim, and open via new view route.
>   - **i18n**:
> - Add strings for claim groups/tabs and empty-state copy; update
`shieldClaimsListTitle` to “`Claims`”; add
`shieldClaimsTabPending`/`shieldClaimsTabHistory`; remove old per-status
label keys.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
474bb11. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: Chaitanya Potti <[email protected]>

Author: lionellbriones

app/_locales/en/messages.json

@@ -3,6 +3,12 @@ import { Driver } from '../../../../webdriver/driver';
 export default class ShieldClaimsListPage {
   private readonly driver: Driver;
 
+  private readonly emptyNewClaimButton =
+    '[data-testid="claims-list-empty-new-claim-button"]';
+
+  private readonly submitClaimButton =
+    '[data-testid="claims-list-submit-claim-button"]';
+
   private readonly claimItem = (claimId: string) =>
     `[data-testid="claim-item-${claimId}"]`;
 
@@ -22,17 +28,18 @@ export default class ShieldClaimsListPage {
     await this.driver.waitForSelector(this.claimItem(claimId));
   }
 
-  async checkClaimStatus(claimId: string, statusText: string): Promise<void> {
-    console.log(`Checking if claim ${claimId} has status: ${statusText}`);
-    const claimItemSelector = this.claimItem(claimId);
-    await this.driver.waitForSelector({
-      css: claimItemSelector,
-      text: statusText,
-    });
-  }
-
   async clickClaimItem(claimId: string): Promise<void> {
     console.log(`Clicking on claim ${claimId} to view details`);
     await this.driver.clickElement(this.claimItem(claimId));
   }
+
+  async clickEmptyNewClaimButton(): Promise<void> {
+    console.log('Clicking on empty new claim button');
+    await this.driver.clickElement(this.emptyNewClaimButton);
+  }
+
+  async clickSubmitClaimButton(): Promise<void> {
+    console.log('Clicking on submit claim button');
+    await this.driver.clickElement(this.submitClaimButton);
+  }
 }

app/_locales/en_GB/messages.json

@@ -74,6 +74,10 @@ describe('Shield Plan Stripe Integration', function () {
 
           await shieldDetailPage.clickSubmitCaseButton();
 
+          const shieldClaimsListPage = new ShieldClaimsListPage(driver);
+          await shieldClaimsListPage.checkPageIsLoaded();
+          await shieldClaimsListPage.clickSubmitClaimButton();
+
           const shieldClaimPage = new ShieldClaimPage(driver);
           await shieldClaimPage.checkPageIsLoaded();
 
@@ -91,13 +95,10 @@ describe('Shield Plan Stripe Integration', function () {
 
           await shieldClaimPage.checkSuccessMessageDisplayed();
 
-          const shieldClaimsListPage = new ShieldClaimsListPage(driver);
           await shieldClaimsListPage.checkPageIsLoaded();
 
           const { claimId } = SUBMIT_CLAIMS_RESPONSE;
           await shieldClaimsListPage.checkClaimExists(claimId);
-          await shieldClaimsListPage.checkClaimStatus(claimId, 'Created');
-
           await shieldClaimsListPage.clickClaimItem(claimId);
 
           await shieldClaimPage.checkPageIsLoadedInViewMode();
@@ -142,6 +143,10 @@ describe('Shield Plan Stripe Integration', function () {
 
           await shieldDetailPage.clickSubmitCaseButton();
 
+          const shieldClaimsListPage = new ShieldClaimsListPage(driver);
+          await shieldClaimsListPage.checkPageIsLoaded();
+          await shieldClaimsListPage.clickSubmitClaimButton();
+
           const shieldClaimPage = new ShieldClaimPage(driver);
           await shieldClaimPage.checkPageIsLoaded();
 
@@ -194,6 +199,10 @@ describe('Shield Plan Stripe Integration', function () {
 
           await shieldDetailPage.clickSubmitCaseButton();
 
+          const shieldClaimsListPage = new ShieldClaimsListPage(driver);
+          await shieldClaimsListPage.checkPageIsLoaded();
+          await shieldClaimsListPage.clickSubmitClaimButton();
+
           const shieldClaimPage = new ShieldClaimPage(driver);
           await shieldClaimPage.checkPageIsLoaded();
 

test/e2e/page-objects/pages/settings/shield/shield-claims-list-page.ts

@@ -14,7 +14,8 @@ import { getShieldClaims } from '../../store/actions';
 type ClaimsContextType = {
   claims: Claim[];
   pendingClaims: Claim[];
-  historyClaims: Claim[];
+  completedClaims: Claim[];
+  rejectedClaims: Claim[];
   isLoading: boolean;
   error: Error | null;
   refetchClaims: () => Promise<void>;
@@ -50,13 +51,11 @@ export const ClaimsProvider: React.FC<ClaimsProviderProps> = ({ children }) => {
           const dateB = new Date(b.createdAt).getTime();
           return dateB - dateA;
         })
-        .map((claim: Claim, index: number) => {
+        .map((claim: Claim) => {
           const numberChain = Number(claim.chainId);
           const chainId = isNaN(numberChain) ? '' : numberToHex(numberChain);
           return {
             ...claim,
-            // used for displaying list of claims
-            claimNumber: index + 1,
             chainId,
           };
         });
@@ -78,22 +77,33 @@ export const ClaimsProvider: React.FC<ClaimsProviderProps> = ({ children }) => {
     );
   }, [claims]);
 
-  const historyClaims = useMemo(() => {
-    return claims.filter(
-      (claim) => !PENDING_CLAIM_STATUSES.includes(claim.status),
-    );
+  const completedClaims = useMemo(() => {
+    return claims.filter((claim) => claim.status === ClaimStatusEnum.APPROVED);
+  }, [claims]);
+
+  const rejectedClaims = useMemo(() => {
+    return claims.filter((claim) => claim.status === ClaimStatusEnum.REJECTED);
   }, [claims]);
 
   const value = useMemo(
     () => ({
       claims,
       pendingClaims,
-      historyClaims,
+      completedClaims,
+      rejectedClaims,
       isLoading,
       error,
       refetchClaims: fetchClaims,
     }),
-    [claims, pendingClaims, historyClaims, isLoading, error, fetchClaims],
+    [
+      claims,
+      pendingClaims,
+      completedClaims,
+      rejectedClaims,
+      isLoading,
+      error,
+      fetchClaims,
+    ],
   );
 
   return (

test/e2e/tests/shield/shield-subscription-management.spec.ts

@@ -25,9 +25,13 @@ export const TRANSACTION_SHIELD_CLAIM_ROUTES = {
     FULL: `${TRANSACTION_SHIELD_CLAIMS}/new-claim`,
     RELATIVE: '/new-claim',
   },
-  VIEW: {
-    FULL: `${TRANSACTION_SHIELD_CLAIMS}/view-claim`,
-    RELATIVE: '/view-claim',
+  VIEW_PENDING: {
+    FULL: `${TRANSACTION_SHIELD_CLAIMS}/view-pending-claim`,
+    RELATIVE: '/view-pending-claim',
+  },
+  VIEW_HISTORY: {
+    FULL: `${TRANSACTION_SHIELD_CLAIMS}/view-history-claim`,
+    RELATIVE: '/view-history-claim',
   },
 } as const;
 export const SECURITY_ROUTE = '/settings/security';

ui/contexts/claims/claims.tsx

@@ -52,6 +52,7 @@ import { getIsMetaMaskShieldFeatureEnabled } from '../../../shared/modules/envir
 import { getHasSubscribedToShield } from '../../selectors/subscription/subscription';
 import { SHIELD_QUERY_PARAMS } from '../../../shared/lib/deep-links/routes/shield';
 import Settings from './settings.component';
+import { CLAIMS_TAB_KEYS } from './transaction-shield-tab/types';
 
 const ROUTES_TO_I18N_KEYS = {
   [ABOUT_US_ROUTE]: 'about',
@@ -114,8 +115,11 @@ const mapStateToProps = (state, ownProps) => {
   const isShieldClaimNewPage = Boolean(
     pathname.match(TRANSACTION_SHIELD_CLAIM_ROUTES.NEW.FULL),
   );
-  const isShieldClaimViewPage = Boolean(
-    pathname.startsWith(TRANSACTION_SHIELD_CLAIM_ROUTES.VIEW.FULL),
+  const isShieldClaimViewActivePage = Boolean(
+    pathname.startsWith(TRANSACTION_SHIELD_CLAIM_ROUTES.VIEW_PENDING.FULL),
+  );
+  const isShieldClaimViewCompletedPage = Boolean(
+    pathname.startsWith(TRANSACTION_SHIELD_CLAIM_ROUTES.VIEW_HISTORY.FULL),
   );
   const isShieldClaimBasePage = Boolean(
     pathname.startsWith(TRANSACTION_SHIELD_CLAIM_ROUTES.BASE),
@@ -134,8 +138,8 @@ const mapStateToProps = (state, ownProps) => {
     pathnameI18nKey = 'securitySrpWalletRecovery';
   }
 
-  // If pathname is `TRANSACTION_SHIELD_CLAIM_VIEW_ROUTE` rename the tab title to "Claim details"
-  if (pathname.startsWith(TRANSACTION_SHIELD_CLAIM_ROUTES.VIEW.FULL)) {
+  // If pathname is view claim route rename the tab title to "Claim details"
+  if (isShieldClaimViewActivePage || isShieldClaimViewCompletedPage) {
     pathnameI18nKey = 'shieldClaimsListTitle';
   }
 
@@ -151,11 +155,13 @@ const mapStateToProps = (state, ownProps) => {
   } else if (isRevealSrpListPage || isPasswordChangePage) {
     backRoute = SECURITY_ROUTE;
   } else if (isShieldClaimNewPage) {
-    backRoute = TRANSACTION_SHIELD_ROUTE;
-  } else if (isShieldClaimViewPage) {
     backRoute = TRANSACTION_SHIELD_CLAIM_ROUTES.BASE;
+  } else if (isShieldClaimViewActivePage) {
+    backRoute = `${TRANSACTION_SHIELD_CLAIM_ROUTES.BASE}?tab=${CLAIMS_TAB_KEYS.PENDING}`;
+  } else if (isShieldClaimViewCompletedPage) {
+    backRoute = `${TRANSACTION_SHIELD_CLAIM_ROUTES.BASE}?tab=${CLAIMS_TAB_KEYS.HISTORY}`;
   } else if (isShieldClaimBasePage) {
-    backRoute = TRANSACTION_SHIELD_CLAIM_ROUTES.NEW.FULL;
+    backRoute = TRANSACTION_SHIELD_ROUTE;
   }
 
   const addressName = getAddressBookEntryOrAccountName(