refactor(ramp): migrate Ramp UI primitives to design system (phase 1)#28048
Conversation
- Use @metamask/design-system-react-native for Text, Icon, Button in Ramp Views/components - Align BuildQuote hero amount with Predict-style scaling and regular weight - Split toast IconName vs DS IconName where needed; update ConfigurationModal tests - Refresh Jest snapshots for migrated components - Fix QuoteDisplay.test DS mock to satisfy ESLint (no require imports)
|
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. |
|
cursor review |
- Use component-library IconColor for showToast (Toast still uses CL Icon) - QuoteDisplay.test: jest.mock factories use requireActual + createElement only
- Move getFontSizeForInputLength to dedicated module with branch tests
| imageSource={networkImageSource} | ||
| name={displayName} | ||
| size={AvatarSize.Xs} | ||
| style={styles.selectedNetworkIcon} |
There was a problem hiding this comment.
double spacing here, will push a fix.
There was a problem hiding this comment.
Fixed in dcaf84e — removed the redundant marginRight: 8 (selectedNetworkIcon style) from AvatarNetwork since Button's startAccessory gap already handles the spacing.
| /> | ||
| {currencySuffix ? ( | ||
| <Text | ||
| variant={TextVariant.HeadingLG} |
There was a problem hiding this comment.
Removed adjustsFontSizeToFit without overflow protection for long amounts
Medium Severity
The adjustsFontSizeToFit prop was removed from the amount Text component but the replacement getFontSizeForInputLength only considers amountDisplayString.length (character count), not actual rendered width. The minimum font size floors at 12px for inputs longer than 18 characters, but with numberOfLines={1} and no adjustsFontSizeToFit, text exceeding the container width will be clipped rather than shrunk. Wide characters (e.g. "W") or certain currency symbols may overflow at lengths well under 18. The old adjustsFontSizeToFit handled this natively regardless of character width.
Additional Locations (1)
There was a problem hiding this comment.
@copilot do you think adding adjustsFontSizeToFit will work well along with getFontSizeForInputLength?
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
There are 2 total unresolved issues (including 1 from previous review).
Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.
| /> | ||
| {currencySuffix ? ( | ||
| <Text | ||
| variant={TextVariant.HeadingLG} |
There was a problem hiding this comment.
Amount font size ignores suffix text element overflow
Medium Severity
The old code used a single Text element with adjustsFontSizeToFit which let React Native automatically shrink text to fit the container. The new code removes adjustsFontSizeToFit and splits the display into two separate Text elements (prefix+amount and suffix) inside a flexDirection: 'row' container. While getFontSizeForInputLength computes a size based on the full string length, numberOfLines={1} only applies to the first Text (prefix+amount) — the suffix Text has no overflow protection. For currencies with long suffixes or large amounts, the row can overflow horizontally since neither element can shrink to fit the available width.
Additional Locations (1)
🔍 Smart E2E Test Selection
click to see 🤖 AI reasoning detailsE2E Test Selection: Key changes include:
The scope is strictly limited to Ramp UI components (on-ramp, off-ramp, deposit flows). No changes to core wallet, Engine, controllers, navigation, confirmations, accounts, networks, or any shared components. SmokeRamps is the appropriate tag to validate these UI changes in the buy/sell/deposit flows. No other tags are needed as the changes don't touch:
Performance Test Selection: |
|
✅ E2E Fixture Validation — Schema is up to date |
|
Description
This PR migrates Ramp Buy UI under
app/components/UI/Ramp/Views/andapp/components/UI/Ramp/components/(excluding Deposit/Aggregator-only flows where noted) fromapp/component-libraryprimitives to@metamask/design-system-react-nativeforText,Icon,Button, and related enums (TextVariant,TextColor,IconColor,FontWeight,ButtonVariant, etc.).Motivation: Align Ramp with the MetaMask mobile design system for consistent typography, icons, and buttons.
Scope notes:
BannerAlertusages remain on component-library where a full migration would require larger sheet/toast work.ConfigurationModal,TokenSelectorModal, and AggregatorSettingsModalfor shared types (e.g.IconName/IconColorfor toasts andMenuItem).PredictAmountDisplay(getFontSizeForInputLength,lineHeight = fontSize + 10,tracking-tight) with regular weight for a lighter display.Changelog
CHANGELOG entry: Updated Ramp on-ramp screens to use the MetaMask design system for typography, icons, and primary actions.
Related issues
Fixes:
Manual testing steps
Screenshots/Recordings
Before
N/A
After
N/A
Pre-merge author checklist
Pre-merge reviewer checklist
Note
Medium Risk
Medium risk because it broadly changes rendering primitives (Text/Icon/Button), style tokens, and toast/icon enums across critical Ramp flows, which can introduce UI regressions even if logic is mostly unchanged.
Overview
Updates Ramp Buy/Deposit UI to use
@metamask/design-system-react-nativeprimitives and tokens forText,Icon,Button, and related enums, including updating tests/mocks/snapshots to match the new render output.Refines the
BuildQuotehero amount display by introducinggetFontSizeForInputLength-based dynamic sizing (and cursor sizing) instead ofadjustsFontSizeToFit, and switches some color/variant mappings to design-system equivalents while keeping Toast icon color enums on the component-library where required.Written by Cursor Bugbot for commit fd362d7. This will update automatically on new commits. Configure here.