MetaMask / MetaMask/metamask-mobile

Replace deprecated SheetHeader component with BottomSheetHeader from the component-library

Open
#14,217 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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**

Currently, mobile is using an outdated `SheetHeader` component, which needs to be replaced with the new `BottomSheetHeader` component.

This is a massive undertaking by itself and assigning to a single contributor and creating a single PR would be too large. Smaller PRs can be submitted against this issue from multiple contributors to ensure easier review and gradual improvements.

### **Technical Details**

- Replace instances of `SheetHeader` component (`app/component-library/components/Sheet/SheetHeader/SheetHeader.tsx`) with `BottomSheetHeader` component (`app/component-library/components/BottomSheets/BottomSheetHeader/BottomSheetHeader.tsx`)
- Component APIs are slightly different so ensure all props have been migrated appropriately

### **Acceptance Criteria**

- Instances of `SheetHeader` component are completely replaced with the new `BottomSheetHeader` component
- The component APIs are updated to reflect the changes in the new `BottomSheetHeader` component and there is no functional change or visual regression
- Each Pull Request (PR) should include **no more than 3 files**
- PR descriptions must adhere to the designated template, ensuring that all relevant sections are completed including before and after screenshots of UI
- The code changes should pass Jest tests, e2e tests, linting, and Storybook without any errors

If the acceptance criteria is not met, PRs may be closed.

### **Difficulty: Intermediate**

Good first issue for: External contributors who are familiar with running mobile locally, have knowledge of React Native, component props, Jest tests, linting, and Storybook, and want to contribute to improving the cohesiveness of UI in mobile

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by locating usages of app/component-library/components/Sheet/SheetHeader/SheetHeader.tsx and compare their props with app/component-library/components/BottomSheets/BottomSheetHeader/BottomSheetHeader.tsx. Migrate a scope of no more than 3 files, then run the relevant Jest, e2e, linting, and Storybook checks; done means no remaining SheetHeader instances and no functional or visual regression.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
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.