Skip to content

refactor: migrate Text to design system in swaps-engineers components#27454

Draft
georgewrmarshall wants to merge 1 commit intomainfrom
refactor/6887_migrate-text-swaps-engineers
Draft

refactor: migrate Text to design system in swaps-engineers components#27454
georgewrmarshall wants to merge 1 commit intomainfrom
refactor/6887_migrate-text-swaps-engineers

Conversation

@georgewrmarshall
Copy link
Contributor

@georgewrmarshall georgewrmarshall commented Mar 12, 2026

Description

Migrates deprecated Text components to @metamask/design-system-react-native in the
@MetaMask/swaps-engineers code owner paths. Part of the ongoing #6887 migration.

Files migrated:

  • app/components/UI/Bridge/components/BlockaidModal/BlockaidModal.tsx
  • app/components/UI/Bridge/components/QuoteCountdownTimer/QuoteCountdownTimer.tsx
  • app/components/UI/Bridge/components/TokenButton.tsx
  • app/components/UI/Bridge/components/TransactionDetails/TransactionAsset.tsx

What: Replace app/component-library/components/Texts/Text
imports with Text from @metamask/design-system-react-native.

Why: Part of #6887 — eliminating
deprecated internal Text wrappers in favour of the shared design system component.

[!NOTE]
This PR was produced by the migrate-text-component automation.

Changelog

CHANGELOG entry: null (internal refactor, no user-visible change)

Related issues

Part of: #6887

Manual testing steps

Feature: Text migration visual parity

 Scenario: user views affected screens
   Given the app is open
   When the user navigates to the screen(s) affected by the changed files
   Then all text renders correctly with the same visual appearance as before

Screenshots/Recordings

N/A — styling parity migration, no visual change intended.
(If a visual difference is noticed, add before/after screenshots.)

Before

After

Pre-merge author checklist

  • I've followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
  • I've completed the PR template to the best of my ability
  • I've included tests if applicable
  • I've documented my code using JSDoc format if applicable
  • I've applied the right labels on the PR. 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.

Note

Low Risk
Low risk refactor limited to UI text rendering; main risk is minor visual/style regressions due to updated TextVariant/TextColor mappings and moved alignment/font-weight styling.

Overview
Migrates several Bridge UI components off the deprecated internal component-library Text wrapper to @metamask/design-system-react-native Text.

Updates text styling to the design-system API (e.g., TextVariant/TextColor renames, fontWeight props, and twClassName for centering) and removes now-redundant local text styles.

Written by Cursor Bugbot for commit 05d3829. This will update automatically on new commits. Configure here.

Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>
@metamaskbot metamaskbot added the team-design-system All issues relating to design system in Mobile label Mar 12, 2026
@github-actions
Copy link
Contributor

🔍 Smart E2E Test Selection

  • Selected E2E tags: SmokeTrade, SmokeConfirmations
  • Selected Performance tags: None (no tests recommended)
  • Risk Level: medium
  • AI Confidence: 91%
click to see 🤖 AI reasoning details

E2E Test Selection:
All changed files are UI components under app/components/UI/Bridge, specifically BlockaidModal, QuoteCountdownTimer, TokenButton, and TransactionAsset. These are directly involved in the bridge flow (a subset of Trade functionality). Bridge flows are explicitly covered under SmokeTrade (cross-chain bridging, quote fetching, execution, and completion verification).

BlockaidModal also touches security alert UX within the bridge flow, which is part of the transaction confirmation and security review surface. Since SmokeTrade requires SmokeConfirmations for swap/bridge flows (as confirmations are part of the transaction process), SmokeConfirmations must also be selected.

There are no changes to controllers, Engine, network management, identity, multi-chain provider, or other platform-wide infrastructure. Therefore, limiting coverage to Trade and Confirmations provides adequate risk-based validation without running unrelated suites.

Performance Test Selection:
Changes are limited to specific Bridge UI components (modal, timer, token button, asset display). There are no modifications to list virtualization, account/network selectors, Engine initialization, data loading pipelines, or other performance-critical paths. The countdown timer and token display updates are localized and unlikely to impact measurable app-wide performance metrics. Therefore, no performance test suites are required.

View GitHub Actions results

@github-actions
Copy link
Contributor

E2E Fixture Validation — Schema is up to date
16 value mismatches detected (expected — fixture represents an existing user).
View details

@sonarqubecloud
Copy link

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size-S team-design-system All issues relating to design system in Mobile

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants