Skip to content

Commit 955e4e9

Browse files
Merge branch 'fix/perps/active-tabs-issue' of github.com:MetaMask/metamask-mobile into fix/perps/active-tabs-issue
2 parents 5dc692c + 765d3a0 commit 955e4e9

File tree

63 files changed

+1255
-957
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

63 files changed

+1255
-957
lines changed

app/components/UI/Predict/components/PredictActivity/PredictActivity.test.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ describe('PredictActivity', () => {
9494
expect(screen.getByText('Buy')).toBeOnTheScreen();
9595
expect(screen.getByText(baseItem.marketTitle)).toBeOnTheScreen();
9696
expect(screen.getByText('-$1,234.50')).toBeOnTheScreen();
97-
expect(screen.getByText('+1.50%')).toBeOnTheScreen();
97+
expect(screen.getByText('2%')).toBeOnTheScreen();
9898
});
9999

100100
it('renders SELL activity with plus-signed amount and negative percent', () => {

app/components/UI/Predict/components/PredictActivityDetail/PredictActivityDetail.test.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -199,7 +199,7 @@ describe('PredictActivityDetail', () => {
199199
expect(screen.getByText(expectedPricePerShare)).toBeOnTheScreen();
200200

201201
expect(screen.getByText('Price impact')).toBeOnTheScreen();
202-
expect(screen.getByText('+1.50%')).toBeOnTheScreen();
202+
expect(screen.getByText('2%')).toBeOnTheScreen();
203203

204204
expect(screen.queryByLabelText('USDC')).toBeNull();
205205
});

app/components/UI/Predict/components/PredictBalance/PredictBalance.test.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -169,7 +169,7 @@ describe('PredictBalance', () => {
169169
});
170170

171171
// Assert
172-
expect(getByText(/\$123\.46/)).toBeOnTheScreen();
172+
expect(getByText(/\$123\.45/)).toBeOnTheScreen();
173173
});
174174

175175
it('displays zero balance', () => {
@@ -209,7 +209,7 @@ describe('PredictBalance', () => {
209209
});
210210

211211
// Assert
212-
expect(getByText(/\$1,234,567\.89/)).toBeOnTheScreen();
212+
expect(getByText(/\$1,234,567\.88/)).toBeOnTheScreen();
213213
});
214214

215215
it('renders container with correct test ID', () => {

app/components/UI/Predict/components/PredictMarketMultiple/PredictMarketMultiple.test.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ describe('PredictMarketMultiple', () => {
105105
).toBeOnTheScreen();
106106

107107
expect(getByText('Bitcoin Price Prediction')).toBeOnTheScreen();
108-
expect(getByText('65.00%')).toBeOnTheScreen();
108+
expect(getByText('65%')).toBeOnTheScreen();
109109
expect(getByText(/\$1M.*Vol\./)).toBeOnTheScreen();
110110
});
111111

@@ -197,7 +197,7 @@ describe('PredictMarketMultiple', () => {
197197

198198
expect(getByText('Market 1')).toBeOnTheScreen();
199199
expect(getByText('Market 2')).toBeOnTheScreen();
200-
expect(getByText('75.00%')).toBeOnTheScreen();
200+
expect(getByText('75%')).toBeOnTheScreen();
201201
});
202202

203203
it('handle market with recurrence', () => {

app/components/UI/Predict/components/PredictMarketMultiple/PredictMarketMultiple.tsx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ import {
4040
PredictEntryPoint,
4141
} from '../../types/navigation';
4242
import { PredictEventValues } from '../../constants/eventNames';
43-
import { formatVolume } from '../../utils/format';
43+
import { formatPercentage, formatVolume } from '../../utils/format';
4444
import styleSheet from './PredictMarketMultiple.styles';
4545
interface PredictMarketMultipleProps {
4646
market: PredictMarket;
@@ -68,7 +68,7 @@ const PredictMarketMultiple: React.FC<PredictMarketMultipleProps> = ({
6868
(outcome) => outcome.tokens[0].price !== 0 && outcome.tokens[0].price !== 1,
6969
);
7070

71-
const getFirstOutcomePrice = (
71+
const getOutcomePercentage = (
7272
outcomePrices?: number[],
7373
): string | undefined => {
7474
if (!outcomePrices) {
@@ -79,7 +79,7 @@ const PredictMarketMultiple: React.FC<PredictMarketMultipleProps> = ({
7979
const parsed = outcomePrices;
8080
if (Array.isArray(parsed) && parsed.length > 0) {
8181
const firstValue = parsed[0];
82-
return (firstValue * 100).toFixed(2);
82+
return formatPercentage(firstValue * 100);
8383
}
8484
} catch (error) {
8585
DevLogger.log('PredictMarketMultiple: Failed to parse outcomePrices', {
@@ -213,10 +213,9 @@ const PredictMarketMultiple: React.FC<PredictMarketMultipleProps> = ({
213213
variant={TextVariant.BodySMMedium}
214214
color={TextColor.Alternative}
215215
>
216-
{getFirstOutcomePrice(
216+
{getOutcomePercentage(
217217
outcome.tokens.map((token) => token.price),
218218
) ?? '0'}
219-
%
220219
</Text>
221220
</Box>
222221

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ describe('PredictMarketOutcome', () => {
114114
);
115115

116116
expect(getByText('Crypto Markets')).toBeOnTheScreen();
117-
expect(getByText('+65%')).toBeOnTheScreen();
117+
expect(getByText('65%')).toBeOnTheScreen();
118118
expect(getByText(/\$1M.*Vol\./)).toBeOnTheScreen();
119119
});
120120

@@ -374,7 +374,7 @@ describe('PredictMarketOutcome', () => {
374374

375375
// The component now shows the groupItemTitle directly, even if it's undefined
376376
// We can verify the component renders without errors by checking other elements
377-
expect(getByText('+65%')).toBeOnTheScreen();
377+
expect(getByText('65%')).toBeOnTheScreen();
378378
expect(getByText(/\$1M.*Vol\./)).toBeOnTheScreen();
379379
});
380380

app/components/UI/Predict/components/PredictPosition/PredictPosition.test.tsx

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -50,13 +50,13 @@ describe('PredictPosition', () => {
5050
screen.getByText('$123.45 on Yes · 10 shares at 34¢'),
5151
).toBeOnTheScreen();
5252
expect(screen.getByText('$2,345.67')).toBeOnTheScreen();
53-
expect(screen.getByText('+5.25%')).toBeOnTheScreen();
53+
expect(screen.getByText('5%')).toBeOnTheScreen();
5454
});
5555

5656
it.each([
57-
{ value: -3.5, expected: '-3.50%' },
57+
{ value: -3.5, expected: '-3%' },
5858
{ value: 0, expected: '0%' },
59-
{ value: 7.5, expected: '+7.50%' },
59+
{ value: 7.5, expected: '8%' },
6060
])('formats percentPnl $value as $expected', ({ value, expected }) => {
6161
renderComponent({ percentPnl: value });
6262

@@ -71,7 +71,9 @@ describe('PredictPosition', () => {
7171
size: 10,
7272
});
7373

74-
expect(screen.getByText('$50 on No · 10 shares at 70¢')).toBeOnTheScreen();
74+
expect(
75+
screen.getByText('$50.00 on No · 10 shares at 70¢'),
76+
).toBeOnTheScreen();
7577
});
7678

7779
it('displays singular share when size is 1', () => {
@@ -82,7 +84,7 @@ describe('PredictPosition', () => {
8284
size: 1,
8385
});
8486

85-
expect(screen.getByText('$50 on No · 1 share at 70¢')).toBeOnTheScreen();
87+
expect(screen.getByText('$50.00 on No · 1 share at 70¢')).toBeOnTheScreen();
8688
});
8789

8890
it('renders icon image with correct URI', () => {
@@ -168,14 +170,16 @@ describe('PredictPosition', () => {
168170
it('formats initialValue without decimals when minimumDecimals is 0', () => {
169171
renderComponent({ initialValue: 100, size: 3 });
170172

171-
expect(screen.getByText('$100 on Yes · 3 shares at 34¢')).toBeOnTheScreen();
173+
expect(
174+
screen.getByText('$100.00 on Yes · 3 shares at 34¢'),
175+
).toBeOnTheScreen();
172176
});
173177

174178
it('formats size with 2 decimal places', () => {
175179
renderComponent({ size: 10.5555, initialValue: 200 });
176180

177181
expect(
178-
screen.getByText('$200 on Yes · 10.56 shares at 34¢'),
182+
screen.getByText('$200.00 on Yes · 10.56 shares at 34¢'),
179183
).toBeOnTheScreen();
180184
});
181185

@@ -209,7 +213,7 @@ describe('PredictPosition', () => {
209213
screen.getByText('$75.25 on Maybe · 7.50 shares at 62.5¢'),
210214
).toBeOnTheScreen();
211215
expect(screen.getByText('$100.75')).toBeOnTheScreen();
212-
expect(screen.getByText('+15.75%')).toBeOnTheScreen();
216+
expect(screen.getByText('16%')).toBeOnTheScreen();
213217
});
214218

215219
describe('optimistic updates UI', () => {
@@ -229,7 +233,7 @@ describe('PredictPosition', () => {
229233
renderComponent({ optimistic: false });
230234

231235
expect(screen.getByText('$2,345.67')).toBeOnTheScreen();
232-
expect(screen.getByText('+5.25%')).toBeOnTheScreen();
236+
expect(screen.getByText('5%')).toBeOnTheScreen();
233237
});
234238

235239
it('shows initial value line when optimistic', () => {

app/components/UI/Predict/components/PredictPositionDetail/PredictPositionDetail.test.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -191,14 +191,14 @@ describe('PredictPositionDetail', () => {
191191
).toBeOnTheScreen();
192192

193193
expect(screen.getByText('$2,345.67')).toBeOnTheScreen();
194-
expect(screen.getByText('+5.25%')).toBeOnTheScreen();
194+
expect(screen.getByText('5%')).toBeOnTheScreen();
195195
expect(screen.getByText('Cash out')).toBeOnTheScreen();
196196
});
197197

198198
it.each([
199-
{ value: -3.5, expected: '-3.50%' },
199+
{ value: -3.5, expected: '-3%' },
200200
{ value: 0, expected: '0%' },
201-
{ value: 7.5, expected: '+7.50%' },
201+
{ value: 7.5, expected: '8%' },
202202
])('formats percentPnl %p as %p for open market', ({ value, expected }) => {
203203
renderComponent({ percentPnl: value });
204204

@@ -233,7 +233,7 @@ describe('PredictPositionDetail', () => {
233233
PredictMarketStatus.CLOSED,
234234
);
235235

236-
expect(screen.getByText('Lost $321.09')).toBeOnTheScreen();
236+
expect(screen.getByText('Lost $321.08')).toBeOnTheScreen();
237237
expect(screen.queryByText('Cash out')).toBeNull();
238238
});
239239

app/components/UI/Predict/components/PredictPositionDetail/PredictPositionDetail.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
PredictMarket,
1212
PredictMarketStatus,
1313
} from '../../types';
14-
import { formatPercentage, formatPrice } from '../../utils/format';
14+
import { formatCents, formatPercentage, formatPrice } from '../../utils/format';
1515
import Button, {
1616
ButtonVariants,
1717
ButtonSize,
@@ -136,8 +136,8 @@ const PredictPosition: React.FC<PredictPositionProps> = ({
136136
variant={TextVariant.BodySMMedium}
137137
color={TextColor.Alternative}
138138
>
139-
${initialValue.toFixed(2)} on {outcome}{' '}
140-
{(avgPrice * 100).toFixed(0)}¢
139+
{formatPrice(initialValue, { maximumDecimals: 2 })} on {outcome}{' '}
140+
{formatCents(avgPrice)}
141141
</Text>
142142
</Box>
143143
<Box twClassName="items-end justify-end ml-auto shrink-0">

app/components/UI/Predict/components/PredictPositionsHeader/PredictPositionsHeader.test.tsx

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -509,7 +509,7 @@ describe('MarketsWonCard', () => {
509509
expect(screen.getByText('Available Balance')).toBeOnTheScreen();
510510
expect(screen.getByText('$100.50')).toBeOnTheScreen();
511511
expect(screen.getByText('Unrealized P&L')).toBeOnTheScreen();
512-
expect(screen.getByText('+$8.63 (+3.9%)')).toBeOnTheScreen();
512+
expect(screen.getByText('+$8.63 (+4%)')).toBeOnTheScreen();
513513
});
514514
it('renders claim button without loading indicator when isLoading is false', () => {
515515
setupMarketsWonCardTest({ isLoading: false });
@@ -532,7 +532,7 @@ describe('MarketsWonCard', () => {
532532
},
533533
);
534534

535-
expect(screen.getByText('+$123.46 (+5.7%)')).toBeOnTheScreen();
535+
expect(screen.getByText('+$123.46 (+6%)')).toBeOnTheScreen();
536536
});
537537

538538
it('formats negative unrealized amount correctly', () => {
@@ -547,7 +547,7 @@ describe('MarketsWonCard', () => {
547547
},
548548
);
549549

550-
expect(screen.getByText('-$50.25 (-2.1%)')).toBeOnTheScreen();
550+
expect(screen.getByText('-$50.25 (-2%)')).toBeOnTheScreen();
551551
});
552552

553553
it('handles zero unrealized amount correctly', () => {
@@ -562,7 +562,7 @@ describe('MarketsWonCard', () => {
562562
},
563563
);
564564

565-
expect(screen.getByText('+$0.00 (+0.0%)')).toBeOnTheScreen();
565+
expect(screen.getByText('+$0.00 (+0%)')).toBeOnTheScreen();
566566
});
567567

568568
it('formats available balance to 2 decimal places', () => {
@@ -632,7 +632,7 @@ describe('MarketsWonCard', () => {
632632
expect(screen.getByText('Available Balance')).toBeOnTheScreen();
633633
expect(screen.getByText('$75.50')).toBeOnTheScreen();
634634
expect(screen.getByText('Unrealized P&L')).toBeOnTheScreen();
635-
expect(screen.getByText('+$100.00 (+10.0%)')).toBeOnTheScreen();
635+
expect(screen.getByText('+$100.00 (+10%)')).toBeOnTheScreen();
636636
});
637637
});
638638

@@ -649,7 +649,7 @@ describe('MarketsWonCard', () => {
649649
},
650650
);
651651

652-
expect(screen.getByText('+$999999.99 (+999.9%)')).toBeOnTheScreen();
652+
expect(screen.getByText('+$999999.99 (+>99%)')).toBeOnTheScreen();
653653
});
654654

655655
it('handles very small unrealized amounts', () => {
@@ -664,7 +664,7 @@ describe('MarketsWonCard', () => {
664664
},
665665
);
666666

667-
expect(screen.getByText('+$0.01 (+0.1%)')).toBeOnTheScreen();
667+
expect(screen.getByText('+$0.01 (+<1%)')).toBeOnTheScreen();
668668
});
669669

670670
it('handles very large available balance', () => {
@@ -692,7 +692,7 @@ describe('MarketsWonCard', () => {
692692
);
693693

694694
expect(screen.getByText('Unrealized P&L')).toBeOnTheScreen();
695-
expect(screen.getByText('+$50.00 (+5.0%)')).toBeOnTheScreen();
695+
expect(screen.getByText('+$50.00 (+5%)')).toBeOnTheScreen();
696696
});
697697
});
698698

@@ -720,7 +720,7 @@ describe('MarketsWonCard', () => {
720720

721721
expect(screen.getByText('Unrealized P&L')).toBeOnTheScreen();
722722
// Should show fallback values when there's an error
723-
expect(screen.getByText('+$0.00 (+0.0%)')).toBeOnTheScreen();
723+
expect(screen.getByText('+$0.00 (+0%)')).toBeOnTheScreen();
724724
});
725725

726726
it('handles null unrealized P&L data gracefully', () => {
@@ -739,7 +739,7 @@ describe('MarketsWonCard', () => {
739739

740740
expect(screen.getByText('Unrealized P&L')).toBeOnTheScreen();
741741
// Should show fallback values when data is null
742-
expect(screen.getByText('+$0.00 (+0.0%)')).toBeOnTheScreen();
742+
expect(screen.getByText('+$0.00 (+0%)')).toBeOnTheScreen();
743743
});
744744

745745
it('displays correct unrealized P&L data from hook', () => {
@@ -757,7 +757,7 @@ describe('MarketsWonCard', () => {
757757
);
758758

759759
expect(screen.getByText('Unrealized P&L')).toBeOnTheScreen();
760-
expect(screen.getByText('-$15.75 (-8.2%)')).toBeOnTheScreen();
760+
expect(screen.getByText('-$15.75 (-8%)')).toBeOnTheScreen();
761761
});
762762

763763
it('does not show unrealized P&L section when hook returns null data', () => {

0 commit comments

Comments
 (0)