Skip to content

Commit f85570e

Browse files
feat: claim form error handling (#37391)
<!-- 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** ### Handle backend error codes on UI ``` export type SubmitClaimErrorResponse = { message: string; errorCode: SubmitClaimErrorCode; statusCode: number; errorsDetails?: { field: SubmitClaimField; error: string; errorCode: SubmitClaimErrorCode; }[]; }; ``` **General Errors** - Errors which are not tied to specific form field. - This errors are show using a toast. **Field specific errors** - This errors are found on `errorsDetails` inside error object from claims post api response. It is shown to specific form field using the `field` key - Some errors outside the `errorDetails` maybe shown to a specific field also and is handled through `ERROR_MESSAGE_MAP` which may contain a `field` key also, if there is no `field` key on the item then we show it in a toast <!-- 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/37391?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: Handle claims submit backend errors ## **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** **Generic error**: no internet, backend is down <video src='https://github.com/user-attachments/assets/5782b670-1d70-4dd4-9a3f-435c837a10b1' /> **Field validation error**: _removed FE validation to demo_ <video src='https://github.com/user-attachments/assets/98a55ae8-a779-4da1-ba32-8efbea5ae859' /> **Non field validation error but tied to a form field** <video src='https://github.com/user-attachments/assets/b032c476-daac-4b26-b27d-93d725d1a420' /> **General error shown on toast** <video src='https://github.com/user-attachments/assets/b22a9e3c-c16f-4ca5-9148-88c70a8643f2' /> <!-- [screenshots/recordings] --> ## **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. <!-- CURSOR_SUMMARY --> --- > [!NOTE] > Implements structured backend error handling for the claim form with field-level mapping, loading state, and updated i18n (including parameterized submission window). > > - **UI/Forms**: > - Refactor `submit-claim-form.tsx` to use typed fields and centralized error handling via `ERROR_MESSAGE_MAP` and `SUBMIT_CLAIM_FIELD_ERROR_MESSAGE_MAP`. > - Add `VALID_SUBMISSION_WINDOW_DAYS` and render it in `shieldClaimDetails` text. > - Introduce `handleSubmitClaimError` to route backend errors to field errors or toast; disable submit during loading and show `LoadingScreen`. > - Fix error keying for `impactedTxHash` and add same-wallet-address validation. > - **Errors/Types**: > - Add `SubmitClaimError` class (`claim-error.ts`). > - Add `SUBMIT_CLAIM_FIELDS`, `SUBMIT_CLAIM_ERROR_CODES`, and `SubmitClaimErrorResponse` in `types.ts`. > - **Actions/Networking**: > - Update `submitClaim` action to parse backend JSON, throw `SubmitClaimError` with `errorCode`, and handle generic failures. > - **i18n**: > - Update `en`/`en_GB` locales: parameterize `shieldClaimDetails` days/link; add messages for duplicate claim, file errors, max claims limit, same wallet address, submission window expired; tweak ineligible TX text. > - Remove outdated `shieldClaimDetails` entry from `ga` locale. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit e60dbf1. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY -->
1 parent e19cfa2 commit f85570e

File tree

7 files changed

+377
-150
lines changed

7 files changed

+377
-150
lines changed

app/_locales/en/messages.json

Lines changed: 25 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

app/_locales/en_GB/messages.json

Lines changed: 25 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

app/_locales/ga/messages.json

Lines changed: 0 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.
Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { SubmitClaimErrorResponse } from './types';
2+
3+
export class SubmitClaimError extends Error {
4+
data?: SubmitClaimErrorResponse;
5+
6+
constructor(message: string, data?: SubmitClaimErrorResponse) {
7+
super(message);
8+
this.name = 'SubmitClaimError';
9+
this.data = data;
10+
}
11+
}

0 commit comments

Comments
 (0)