MetaMask / MetaMask/metamask-mobile
Replace deprecated Alert component with BannerAlert from the component-library
- 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
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