MetaMask / MetaMask/metamask-mobile

Replace deprecated Alert component with BannerAlert from the component-library

Open
#6,889 0 comments 0 reactions 0 assignees View on GitHub
good first issue INVALID-ISSUE-TEMPLATE team-design-system
Dominant language
TypeScript
Stars
3k
Forks
1.7k
Avg merge
1d 14h
Merged PRs (30d)
669

Description

### **Description**

There are many instances in the mobile codebase where the outdated `Alert` component (`app/components/Base/Alert.tsx`) is still being used. These need to be gradually replaced with the new `BannerAlert` component (`app/component-library/components/Banners/Banner/variants/BannerAlert/BannerAlert.tsx`).

To make the migration manageable and ensure high-quality reviews, **each pull request (PR) should focus on replacing a single instance** of the outdated `Alert` component. This incremental approach helps reduce risk and allows for easier testing and visual validation.

### **Technical Details**

- Identify and replace a single instance of the deprecated `Alert` component.
- Implement the new `BannerAlert` component, ensuring proper mapping of all necessary props.
- Since the component APIs differ slightly, carefully adjust logic and styling as needed.
- Ensure the updated component matches the original functionality and appearance.

### **Acceptance Criteria**

- A single instance of `Alert` is replaced in each PR.
- The new `BannerAlert` is used with correct props and integration.
- No visual or functional regressions are introduced.
- All tests (Jest, e2e), linting, and Storybook builds must pass.
- PR includes before and after UI screenshots to validate visual consistency.

PRs that don’t meet these criteria may be closed or requested for revision.

### **Difficulty**: Intermediate

**Good first issue for:** External contributors with experience running the mobile app locally and knowledge of React Native, component props, testing workflows, and maintaining UI consistency.

Contributor guide

Open the contributing guide

Research direction

Read app/components/Base/Alert.tsx and app/component-library/components/Banners/Banner/variants/BannerAlert/BannerAlert.tsx, then locate one Alert usage in the mobile codebase and compare the two prop APIs. Replace only that instance, verify equivalent behavior and appearance, and run the specified Jest, e2e, linting, and Storybook checks with before-and-after screenshots.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
frontend, mobile
Issue type
Refactor
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.