refactor(AccountBackupStep1B): migrate to design system components#27581
Conversation
Replace View with Box, StyleSheet.create with twClassName, and add useTailwind hook for Tailwind CSS utility support. Made-with: Cursor
|
CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes. |
Made-with: Cursor
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #27581 +/- ##
=======================================
Coverage 82.19% 82.19%
=======================================
Files 4788 4788
Lines 123507 123506 -1
Branches 27363 27363
=======================================
+ Hits 101511 101512 +1
+ Misses 14962 14960 -2
Partials 7034 7034 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
- Replace Dimensions.get('window') with useWindowDimensions() hook for responsive layout
- Remove redundant BoxFlexDirection.Column props (column is default in RN)
- Remove ml-0 default and simplify p-5 pt-0 pb-0 → px-5
- Replace all arbitrary Tailwind bracket values with design system scale steps:
text-[32px]→text-4xl, leading-[44px]→leading-tight, leading-[17px]→leading-4,
text-[15px]→text-sm, text-[16px]→text-base, rounded-[10px]→rounded-xl,
p-[27px]→p-7, w-[26px]→w-7, p-[5px]→p-1, mt-[21px]→mt-5
Made-with: Cursor
… alias - Remove eslint-disable react/prop-types suppression - Add PropTypes for navigation, route, and saveOnboardingEvent props - Remove Text alias (DSText) — import as Text directly Made-with: Cursor
…em Button
- Remove Button import from component-library
- Import Button, ButtonVariant, ButtonSize from @metamask/design-system-react-native
- Replace label prop with children, ButtonVariants.Primary with ButtonVariant.Primary,
and width={ButtonWidthTypes.Full} with isFullWidth
Made-with: Cursor
…ystem Icon/ButtonIcon - Replace react-native-vector-icons/FontAwesome with design system Icon (IconName.Info) and ButtonIcon (IconName.Close) - Simplify mt-4 mb-4 to my-4 Made-with: Cursor
- Replace lock emoji style override with DisplayMd variant (exact 32px match) - Remove all lineHeight style overrides (CARD_LINE_HEIGHT, MODAL_LINE_HEIGHT, MODAL_BOLD_LINE_HEIGHT) — accept DS default line heights - Drop LOCK_ICON_STYLE constant — no longer needed with DisplayMd Made-with: Cursor
|
@metamaskbot update-mobile-fixture |
…ers to reduce duplication
Extract repeated <Text variant={TextVariant.BodyXs} color={TextColor.TextDefault}> patterns
into BodyXsText and BulletText helper components to address SonarCloud duplication gate.
Made-with: Cursor
🔍 Smart E2E Test Selection
click to see 🤖 AI reasoning detailsE2E Test Selection:
Selected SmokeAccounts because it covers SRP protection flows including the backup quiz validation. Selected SmokeWalletPlatform because it covers multi-SRP wallet architecture and wallet lifecycle. These two tags provide adequate coverage for validating the backup step screen renders and functions correctly after the refactoring. Performance Test Selection: |
|
✅ E2E Fixture Validation — Schema is up to date |
|
Description
Migrates
AccountBackupStep1Bfrom legacy React Native primitives to the MetaMask design system. Replaces rawViewcomponents withBox, removesStyleSheet.create()in favor oftwClassNameTailwind utilities, and adds theuseTailwindhook. Also fixes a precommit violation by replacing the staticDimensions.get('window')module-level call with theuseWindowDimensions()hook (so layout responds to rotation/resize), removes redundantBoxFlexDirection.Columnprops, and replaces all arbitrary Tailwind bracket values (e.g.text-[32px],leading-[17px]) with design system scale steps.Changelog
CHANGELOG entry: null
Related issues
Fixes:
Manual testing steps
Screenshots/Recordings
Pre-merge author checklist
Pre-merge reviewer checklist
Note
Low Risk
Low risk refactor limited to a single onboarding screen, primarily swapping UI primitives/styling; main risk is visual or interaction regressions (modal/CTA/link) across device sizes/rotation.
Overview
Migrates
AccountBackupStep1Bto the MetaMask React Native design system by replacing legacyView/StyleSheet/custom button usage withBox, design-systemText,Button,Icon, and Tailwind (useTailwind) styling.Updates the seed phrase illustration sizing to use
useWindowDimensions()(instead of a module-levelDimensionsconstant) so layout recalculates on resize/rotation, and refactors repeated body/bullet copy into small helper components (BodyXsText,BulletText) while keeping navigation and metrics wiring intact.Written by Cursor Bugbot for commit 5324d96. This will update automatically on new commits. Configure here.