Skip to content

Commit 2de6091

Browse files
caieucaieu
authored
refactor(Predict): migrate Text component to design system (MetaMask#23344)
<!-- Please submit this PR as a draft initially. Do not mark it as "Ready for review" until the template has been completely filled out, and PR status checks have passed at least once. --> ## **Description** - Replace Text imports from component-library with @metamask/design-system-react-native - Update Text variant names to match design system conventions: - HeadingMD → HeadingMd, HeadingSM → HeadingSm - BodyMDMedium → BodyMd, BodyLGMedium → BodyLg - BodySM → BodySm, BodySMMedium → BodySm - BodyXS → BodyXs - Update TextColor enum values to design system tokens: - Default → TextDefault - Alternative → TextAlternative - Success → SuccessDefault - Error → ErrorDefault - Muted → TextMuted - Inverse → PrimaryInverse - Add twClassName='font-medium' to Text components that previously used Medium variants (BodyMDMedium, BodyLGMedium, BodySMMedium) to preserve font weight - Remove unused fontStyles import in PredictSellPreview.styles.ts - Replace fontStyles.bold with fontWeight: 'bold' Affected components: - PredictMarketOutcome - PredictSellPreview - PredictBuyPreview - PredictMarketDetails <!-- Write a short description of the changes included in this pull request, also include relevant motivation and context. Have in mind the following questions: 1. What is the reason for the change? 2. What is the improvement/solution? --> ## **Changelog** <!-- If this PR is not End-User-Facing and should not show up in the CHANGELOG, you can choose to either: 1. Write `CHANGELOG entry: null` 2. Label with `no-changelog` If this PR is End-User-Facing, please write a short User-Facing description in the past tense like: `CHANGELOG entry: Added a new tab for users to see their NFTs` `CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker` (This helps the Release Engineer do their job more quickly and accurately) --> CHANGELOG entry: null ## **Related issues** Fixes: https://consensyssoftware.atlassian.net/browse/PRED-310?atlOrigin=eyJpIjoiOTE5YjJjNmRjOTAzNDU3N2EwZTQwNDcwMjJhMmViZGIiLCJwIjoiaiJ9 ## **Manual testing steps** ```gherkin Feature: my feature name Scenario: user [verb for user action] Given [describe expected initial app state] When user [verb for user action] Then [describe expected outcome] ``` ## **Screenshots/Recordings** <!-- If applicable, add screenshots and/or recordings to visualize the before and after of your change. --> ### **Before** <!-- [screenshots/recordings] --> ### **After** <!-- [screenshots/recordings] --> ## **Pre-merge author checklist** - [ ] I’ve followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile Coding Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [ ] 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](https://jsdoc.app/) format if applicable - [ ] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). 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. <!-- CURSOR_SUMMARY --> --- > [!NOTE] > Replaces legacy Text usage with @metamask/design-system-react-native across Predict screens, updating variants/colors and preserving weights, plus minor style cleanup. > > - **UI/Design System Migration** > - Replace `component-library` `Text` with `@metamask/design-system-react-native` `Text` across Predict screens. > - Update typography variants (e.g., `HeadingMD/SM` → `HeadingMd/Sm`, `Body*Medium` → `Body*` + `font-medium`, `BodyXS/SM/MD/LG` → `BodyXs/Sm/Md/Lg`). > - Map color tokens to design system equivalents (`Default` → `TextDefault`, `Alternative` → `TextAlternative`, `Success` → `SuccessDefault`, `Error` → `ErrorDefault`, `Muted` → `TextMuted`, `Inverse` → `PrimaryInverse`). > - **Components Updated** > - `PredictMarketOutcome`: Heading/body/text colors and winner/loser/price labels updated to new tokens and variants. > - `PredictBuyPreview`: Header, balance, errors, "to win", CTA labels, and disclaimers migrated to new variants/colors. > - `PredictMarketDetails`: Header title, tabs, status/messages, about section, resolved/outcomes chips, footnote text migrated to new variants/colors. > - `PredictSellPreview`: Header, cash-out values/PnL, info text, CTA, footnote migrated to new variants/colors. > - **Styles Cleanup** > - `PredictSellPreview.styles.ts`: remove `fontStyles` import and use `fontWeight: 'bold'`. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 3b752a3. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY -->
1 parent 537aca3 commit 2de6091

5 files changed

Lines changed: 163 additions & 93 deletions

File tree

‎app/components/UI/Predict/components/PredictMarketOutcome/PredictMarketOutcome.tsx‎

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@ import {
22
Box,
33
BoxAlignItems,
44
BoxFlexDirection,
5+
Text,
6+
TextColor,
7+
TextVariant,
58
} from '@metamask/design-system-react-native';
69
import { useTailwind } from '@metamask/design-system-twrnc-preset';
710
import { NavigationProp, useNavigation } from '@react-navigation/native';
@@ -13,10 +16,6 @@ import Button, {
1316
ButtonVariants,
1417
ButtonWidthTypes,
1518
} from '../../../../../component-library/components/Buttons/Button';
16-
import Text, {
17-
TextColor,
18-
TextVariant,
19-
} from '../../../../../component-library/components/Texts/Text';
2019
import Icon, {
2120
IconName,
2221
IconSize,
@@ -131,13 +130,16 @@ const PredictMarketOutcome: React.FC<PredictMarketOutcomeProps> = ({
131130
</Box>
132131
<Box twClassName="flex-1 -mt-1">
133132
<Text
134-
variant={TextVariant.HeadingMD}
135-
color={TextColor.Default}
133+
variant={TextVariant.HeadingMd}
134+
color={TextColor.TextDefault}
136135
style={tw.style('font-medium')}
137136
>
138137
{getTitle()}
139138
</Text>
140-
<Text variant={TextVariant.BodySM} color={TextColor.Alternative}>
139+
<Text
140+
variant={TextVariant.BodySm}
141+
color={TextColor.TextAlternative}
142+
>
141143
${getVolumeDisplay()} {strings('predict.volume_abbreviated')}
142144
</Text>
143145
</Box>
@@ -149,11 +151,12 @@ const PredictMarketOutcome: React.FC<PredictMarketOutcomeProps> = ({
149151
twClassName="gap-1"
150152
>
151153
<Text
152-
variant={TextVariant.BodyMDMedium}
154+
variant={TextVariant.BodyMd}
155+
twClassName="font-medium"
153156
color={
154157
outcomeToken.price === 1
155-
? TextColor.Default
156-
: TextColor.Alternative
158+
? TextColor.TextDefault
159+
: TextColor.TextAlternative
157160
}
158161
>
159162
{outcomeToken.price === 1
@@ -166,16 +169,16 @@ const PredictMarketOutcome: React.FC<PredictMarketOutcomeProps> = ({
166169
size={IconSize.Md}
167170
color={
168171
outcomeToken.price === 1
169-
? TextColor.Success
170-
: TextColor.Muted
172+
? TextColor.SuccessDefault
173+
: TextColor.TextMuted
171174
}
172175
/>
173176
)}
174177
</Box>
175178
) : (
176179
<Text
177180
style={tw.style('text-[20px] font-medium')}
178-
color={TextColor.Default}
181+
color={TextColor.TextDefault}
179182
>
180183
{getYesPercentage()}
181184
</Text>
@@ -192,7 +195,7 @@ const PredictMarketOutcome: React.FC<PredictMarketOutcomeProps> = ({
192195
label={
193196
<Text
194197
style={tw.style('font-medium text-center')}
195-
color={TextColor.Success}
198+
color={TextColor.SuccessDefault}
196199
>
197200
{outcome.tokens[0].title}
198201
{isBiggerLabel ? '\n' : ' • '}
@@ -209,7 +212,7 @@ const PredictMarketOutcome: React.FC<PredictMarketOutcomeProps> = ({
209212
label={
210213
<Text
211214
style={tw.style('font-medium text-center')}
212-
color={TextColor.Error}
215+
color={TextColor.ErrorDefault}
213216
>
214217
{outcome.tokens[1].title}
215218
{isBiggerLabel ? '\n' : ' • '}

‎app/components/UI/Predict/views/PredictBuyPreview/PredictBuyPreview.tsx‎

Lines changed: 46 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@ import {
77
Icon,
88
IconName,
99
IconSize,
10+
Text,
11+
TextColor,
12+
TextVariant,
1013
} from '@metamask/design-system-react-native';
1114
import { useTailwind } from '@metamask/design-system-twrnc-preset';
1215
import {
@@ -35,10 +38,6 @@ import Button, {
3538
ButtonVariants,
3639
ButtonWidthTypes,
3740
} from '../../../../../component-library/components/Buttons/Button';
38-
import Text, {
39-
TextColor,
40-
TextVariant,
41-
} from '../../../../../component-library/components/Texts/Text';
4241
import { BottomSheetRef } from '../../../../../component-library/components/BottomSheets/BottomSheet';
4342
import Engine from '../../../../../core/Engine';
4443
import { usePredictPlaceOrder } from '../../hooks/usePredictPlaceOrder';
@@ -288,7 +287,7 @@ const PredictBuyPreview = () => {
288287
<Box flexDirection={BoxFlexDirection.Row} twClassName="min-w-0 gap-4">
289288
<Box twClassName="flex-1 min-w-0">
290289
<Text
291-
variant={TextVariant.HeadingSM}
290+
variant={TextVariant.HeadingSm}
292291
numberOfLines={1}
293292
ellipsizeMode="tail"
294293
>
@@ -302,27 +301,30 @@ const PredictBuyPreview = () => {
302301
{!!outcomeGroupTitle && (
303302
<>
304303
<Text
305-
variant={TextVariant.BodySMMedium}
306-
color={TextColor.Alternative}
304+
variant={TextVariant.BodySm}
305+
twClassName="font-medium"
306+
color={TextColor.TextAlternative}
307307
numberOfLines={1}
308308
ellipsizeMode="tail"
309309
>
310310
{outcomeGroupTitle}
311311
</Text>
312312
<Text
313-
variant={TextVariant.BodySMMedium}
314-
color={TextColor.Alternative}
313+
variant={TextVariant.BodySm}
314+
twClassName="font-medium"
315+
color={TextColor.TextAlternative}
315316
>
316317
{separator}
317318
</Text>
318319
</>
319320
)}
320321
<Text
321-
variant={TextVariant.BodySMMedium}
322+
variant={TextVariant.BodySm}
323+
twClassName="font-medium"
322324
color={
323325
outcomeToken?.title === 'Yes'
324-
? TextColor.Success
325-
: TextColor.Error
326+
? TextColor.SuccessDefault
327+
: TextColor.ErrorDefault
326328
}
327329
numberOfLines={1}
328330
ellipsizeMode="tail"
@@ -361,7 +363,10 @@ const PredictBuyPreview = () => {
361363
{isBalanceLoading ? (
362364
<Skeleton width={120} height={20} />
363365
) : (
364-
<Text variant={TextVariant.BodyMD} color={TextColor.Alternative}>
366+
<Text
367+
variant={TextVariant.BodyMd}
368+
color={TextColor.TextAlternative}
369+
>
365370
{`${strings('predict.order.available')}: `}
366371
{formatPrice(balance, { minimumDecimals: 2, maximumDecimals: 2 })}
367372
</Text>
@@ -373,13 +378,21 @@ const PredictBuyPreview = () => {
373378
justifyContent={BoxJustifyContent.Center}
374379
twClassName="mt-2"
375380
>
376-
<Text variant={TextVariant.BodyLGMedium} color={TextColor.Success}>
381+
<Text
382+
variant={TextVariant.BodyLg}
383+
twClassName="font-medium"
384+
color={TextColor.SuccessDefault}
385+
>
377386
{`${strings('predict.order.to_win')} `}
378387
</Text>
379388
{isCalculating && isUserInputChange ? (
380389
<Skeleton width={80} height={24} style={tw.style('rounded-md')} />
381390
) : (
382-
<Text variant={TextVariant.BodyLGMedium} color={TextColor.Success}>
391+
<Text
392+
variant={TextVariant.BodyLg}
393+
twClassName="font-medium"
394+
color={TextColor.SuccessDefault}
395+
>
383396
{formatPrice(toWin, {
384397
minimumDecimals: 2,
385398
maximumDecimals: 2,
@@ -398,8 +411,8 @@ const PredictBuyPreview = () => {
398411
return (
399412
<Box twClassName="px-12 pb-4">
400413
<Text
401-
variant={TextVariant.BodySM}
402-
color={TextColor.Error}
414+
variant={TextVariant.BodySm}
415+
color={TextColor.ErrorDefault}
403416
style={tw.style('text-center')}
404417
>
405418
{strings('predict.order.prediction_insufficient_funds', {
@@ -417,8 +430,8 @@ const PredictBuyPreview = () => {
417430
return (
418431
<Box twClassName="px-12 pb-4">
419432
<Text
420-
variant={TextVariant.BodySM}
421-
color={TextColor.Error}
433+
variant={TextVariant.BodySm}
434+
color={TextColor.ErrorDefault}
422435
style={tw.style('text-center')}
423436
>
424437
{strings('predict.order.prediction_minimum_bet', {
@@ -455,8 +468,9 @@ const PredictBuyPreview = () => {
455468
<Box twClassName="flex-row items-center gap-1">
456469
<ActivityIndicator size="small" />
457470
<Text
458-
variant={TextVariant.BodyLGMedium}
459-
color={TextColor.Inverse}
471+
variant={TextVariant.BodyLg}
472+
twClassName="font-medium"
473+
color={TextColor.PrimaryInverse}
460474
>
461475
{`${strings('predict.order.placing_prediction')}...`}
462476
</Text>
@@ -481,7 +495,10 @@ const PredictBuyPreview = () => {
481495
size={ButtonSizeHero.Lg}
482496
style={tw.style('w-full')}
483497
>
484-
<Text variant={TextVariant.BodyMDMedium} style={tw.style('text-white')}>
498+
<Text
499+
variant={TextVariant.BodyMd}
500+
style={tw.style('text-white font-medium')}
501+
>
485502
{outcomeToken?.title} ·{' '}
486503
{formatCents(preview?.sharePrice ?? outcomeToken?.price ?? 0)}
487504
</Text>
@@ -502,20 +519,23 @@ const PredictBuyPreview = () => {
502519
<Box justifyContent={BoxJustifyContent.Center} twClassName="gap-2">
503520
{errorMessage && (
504521
<Text
505-
variant={TextVariant.BodySM}
506-
color={TextColor.Error}
522+
variant={TextVariant.BodySm}
523+
color={TextColor.ErrorDefault}
507524
style={tw.style('text-center pb-2')}
508525
>
509526
{errorMessage}
510527
</Text>
511528
)}
512529
<Box twClassName="w-full h-12">{renderActionButton()}</Box>
513530
<Box twClassName="text-center items-center flex-row gap-1 justify-center">
514-
<Text variant={TextVariant.BodyXS} color={TextColor.Alternative}>
531+
<Text
532+
variant={TextVariant.BodyXs}
533+
color={TextColor.TextAlternative}
534+
>
515535
{strings('predict.consent_sheet.disclaimer')}
516536
</Text>
517537
<Text
518-
variant={TextVariant.BodyXS}
538+
variant={TextVariant.BodyXs}
519539
style={tw.style('text-info-default')}
520540
onPress={() => {
521541
Linking.openURL('https://polymarket.com/tos');

0 commit comments

Comments
 (0)