Skip to content

Commit db49458

Browse files
michalconsensysmichalconsensys
authored
feat(perps): redesign market detail header (TAT-3348) (#33024)
## **Description** Redesigns the Perps market detail header to match the new design in [TAT-3348](https://consensyssoftware.atlassian.net/browse/TAT-3348), taking inspiration from the equivalent extension implementation. **What changed** - The header now shows a two-row market identity: - **First row:** the full asset name (e.g. `Ethereum`), the leverage pill (e.g. `50x`), and a chevron that opens the market list. - **Second row:** the `[Ticker]-[collateral] perp` pair subtitle (e.g. `ETH-USD perp`). - The back chevron stays on the left and the favorite star on the right. - The live price + 24h price change and the fullscreen chart button move into a dedicated row **below** the header (the price is shown more prominently). **Why** The previous header showed `ETH-USD` as the title with the price inline and expand/star/search icons on the right. The new layout aligns mobile with the agreed design and the extension, surfacing the full asset name and market pair, and grouping the price/chart controls below the header. **Implementation notes** - `PerpsMarketInlineHeader` gains an opt-in `showAssetName` prop (plus `onMarketListPress` for the chevron). The default layout is unchanged, so the shared order book header is not affected. - `LivePriceHeader` gains a `size` variant (`large`) used for the prominent below-header price; the default size is unchanged. - The collateral label uses `USD` to stay consistent with the app's existing `-USD` convention. - The fullscreen chart button is not present in the extension yet, so mobile's existing fullscreen behavior is preserved and only relocated per the acceptance criteria. ## **Changelog** CHANGELOG entry: Redesigned the Perps market detail header to show the full asset name, leverage, and market pair, with the live price, 24h change, and fullscreen chart button below the header. ## **Related issues** Fixes: https://consensyssoftware.atlassian.net/browse/TAT-3348 ## **Manual testing steps** ```gherkin Feature: Perps market detail header Scenario: user opens a perps market detail screen Given the user is on the Perps market list When the user taps a market (e.g. ETH) Then the header first row shows the full asset name, the leverage pill, and a chevron And the header second row shows the market pair as "ETH-USD perp" And the back chevron is shown on the left and the favorite star on the right And the live price and 24h price change are shown below the header And a fullscreen chart button is shown below the header Scenario: user opens the market list from the header chevron Given the user is on a perps market detail screen When the user taps the chevron next to the asset name Then the market list is opened Scenario: user opens the fullscreen chart Given the user is on a perps market detail screen When the user taps the fullscreen chart button below the header Then the fullscreen chart modal is displayed ``` ## **Screenshots/Recordings** ### **Before** <!-- Header showed "ETH-USD" title with inline price and expand/star/search icons --> ### **After** <img width="1206" height="2622" alt="simulator_screenshot_A02336D0-CDD5-4B3D-BA8E-456DA2EC0C70" src="https://github.com/user-attachments/assets/ded18078-7207-4ad7-9d63-4074f2d15630" /> <!-- Header shows full asset name + leverage pill + chevron, "ETH-USD perp" subtitle, and price + 24h change + fullscreen button below the header. Screenshots/recordings to be attached from a device/simulator run. --> ## **Pre-merge author checklist** - [x] 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). - [x] I've completed the PR template to the best of my ability - [x] I've included tests if applicable - [x] I've documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] 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. #### Performance checks (if applicable) - [ ] I've tested on Android - Ideally on a mid-range device; emulator is acceptable - [ ] I've tested with a power user scenario - Use these [power-user SRPs](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/edit-v2/401401446401?draftShareId=9d77e1e1-4bdc-4be1-9ebb-ccd916988d93) to import wallets with many accounts and tokens - [ ] I've instrumented key operations with Sentry traces for production performance metrics - See [`trace()`](/app/util/trace.ts) for usage and [`addToken`](/app/components/Views/AddAsset/components/AddCustomToken/AddCustomToken.tsx#L274) for an example For performance guidelines and tooling, see the [Performance Guide](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/400085549067/Performance+Guide+for+Engineers). ## **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. [TAT-3348]: https://consensyssoftware.atlassian.net/browse/TAT-3348?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ <!-- CURSOR_SUMMARY --> --- > [!NOTE] > **Low Risk** > UI-only Perps market details layout and analytics property updates; default inline header paths are preserved and coverage is extensive in unit/view tests. > > **Overview** > Redesigns the Perps **market detail** screen header and price row to match TAT-3348 / extension-style layout. > > **Header (`useDetailLayout` on `PerpsMarketInlineHeader`):** Title becomes the full asset name with leverage pill and a **market-list chevron** (replacing header fullscreen + category search). Subtitle is the localized `{{ticker}}-{{collateral}} perp` pair via new `PERPS_COLLATERAL_SYMBOL`; live price is no longer in the header. Compact header behavior elsewhere is unchanged. > > **Below header:** New **market summary** row with `LivePriceHeader` `size="large"` (prominent price, stacked layout, absolute + % 24h change) and a relocated **fullscreen chart** button. `LivePriceHeader` migrates to design-system `Text` tokens and adds shrink/ellipsis for long prices. > > **Analytics & i18n:** Market list entry reports `button_clicked: market_list`, `button_location: perp_market_details`, `source: perp_asset_screen`; metrics docs note legacy magnifying-glass values. New strings for market list, perp pair, and updated test IDs. > > <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit 01e1b36. Bugbot is set up for automated code reviews on this repo. Configure [here](https://www.cursor.com/dashboard/bugbot).</sup> <!-- /CURSOR_SUMMARY -->
1 parent d95691f commit db49458

13 files changed

Lines changed: 545 additions & 129 deletions

File tree

‎app/components/UI/Perps/Perps.testIds.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -412,6 +412,8 @@ export const PerpsMarketDetailsViewSelectorsIDs = {
412412
LOADING: 'perps-market-details-loading',
413413
ERROR: 'perps-market-details-error',
414414
HEADER: 'perps-market-header',
415+
MARKET_SUMMARY: 'perps-market-details-market-summary',
416+
FULLSCREEN_CHART_BUTTON: 'perps-market-details-fullscreen-chart-button',
415417
STATISTICS_HIGH_24H: 'perps-statistics-high-24h',
416418
STATISTICS_LOW_24H: 'perps-statistics-low-24h',
417419
STATISTICS_VOLUME_24H: 'perps-statistics-volume-24h',
@@ -456,7 +458,8 @@ export const PerpsMarketHeaderSelectorsIDs = {
456458
PRICE_CHANGE: 'perps-market-header-price-change',
457459
MORE_BUTTON: 'perps-market-header-more-button',
458460
FAVORITE_BUTTON: 'perps-market-header-favorite-button',
459-
CATEGORY_SEARCH_BUTTON: 'perps-market-header-category-search-button',
461+
MARKET_LIST_BUTTON: 'perps-market-header-market-list-button',
462+
SUBTITLE: 'perps-market-header-subtitle',
460463
};
461464

462465
// ========================================

‎app/components/UI/Perps/Views/PerpsMarketDetailsView/PerpsMarketDetailsView.styles.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,11 @@ export const createStyles = ({ theme }: { theme: Theme }) =>
2828
paddingBottom: 16, // Consistent bottom padding
2929
},
3030

31+
// Keeps the fullscreen button fixed while the price row shrinks
32+
marketSummaryFullscreenButton: {
33+
flexShrink: 0,
34+
},
35+
3136
// Container for error state
3237
container: {
3338
flex: 1,

‎app/components/UI/Perps/Views/PerpsMarketDetailsView/PerpsMarketDetailsView.test.tsx‎

Lines changed: 54 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2143,7 +2143,7 @@ describe('PerpsMarketDetailsView', () => {
21432143
await act(async () => {
21442144
fireEvent.press(
21452145
getByTestId(
2146-
`${PerpsMarketDetailsViewSelectorsIDs.HEADER}-fullscreen-button`,
2146+
PerpsMarketDetailsViewSelectorsIDs.FULLSCREEN_CHART_BUTTON,
21472147
),
21482148
);
21492149
});
@@ -3493,7 +3493,7 @@ describe('PerpsMarketDetailsView', () => {
34933493

34943494
// Press fullscreen button
34953495
const fullscreenButton = getByTestId(
3496-
'perps-market-header-fullscreen-button',
3496+
PerpsMarketDetailsViewSelectorsIDs.FULLSCREEN_CHART_BUTTON,
34973497
);
34983498
fireEvent.press(fullscreenButton);
34993499

@@ -3517,7 +3517,7 @@ describe('PerpsMarketDetailsView', () => {
35173517

35183518
// Open the modal first
35193519
const fullscreenButton = getByTestId(
3520-
'perps-market-header-fullscreen-button',
3520+
PerpsMarketDetailsViewSelectorsIDs.FULLSCREEN_CHART_BUTTON,
35213521
);
35223522
fireEvent.press(fullscreenButton);
35233523

@@ -3550,7 +3550,7 @@ describe('PerpsMarketDetailsView', () => {
35503550

35513551
// Open the modal
35523552
const fullscreenButton = getByTestId(
3553-
'perps-market-header-fullscreen-button',
3553+
PerpsMarketDetailsViewSelectorsIDs.FULLSCREEN_CHART_BUTTON,
35543554
);
35553555
fireEvent.press(fullscreenButton);
35563556

@@ -3615,9 +3615,7 @@ describe('PerpsMarketDetailsView', () => {
36153615
);
36163616

36173617
fireEvent.press(
3618-
getByTestId(
3619-
`${PerpsMarketDetailsViewSelectorsIDs.HEADER}-fullscreen-button`,
3620-
),
3618+
getByTestId(PerpsMarketDetailsViewSelectorsIDs.FULLSCREEN_CHART_BUTTON),
36213619
);
36223620

36233621
await waitFor(() => {
@@ -3640,8 +3638,8 @@ describe('PerpsMarketDetailsView', () => {
36403638
});
36413639
});
36423640

3643-
describe('Category search shortcut', () => {
3644-
it('navigates to market list without filters when search button is pressed', () => {
3641+
describe('Market list shortcut', () => {
3642+
it('navigates to market list without filters when the market list button is pressed', () => {
36453643
const { getByTestId } = renderWithProvider(
36463644
<PerpsConnectionProvider>
36473645
<PerpsMarketDetailsView />
@@ -3651,15 +3649,50 @@ describe('PerpsMarketDetailsView', () => {
36513649
},
36523650
);
36533651

3654-
const searchButton = getByTestId(
3655-
'perps-market-header-category-search-button',
3652+
const marketListButton = getByTestId(
3653+
PerpsMarketHeaderSelectorsIDs.MARKET_LIST_BUTTON,
36563654
);
3657-
fireEvent.press(searchButton);
3655+
fireEvent.press(marketListButton);
36583656

36593657
expect(mockNavigateToMarketList).toHaveBeenCalledWith({
3660-
source: 'magnifying_glass',
3658+
source: 'perp_asset_screen',
36613659
});
36623660
});
3661+
3662+
it('tracks the market list button click with the correct analytics values', () => {
3663+
const mockTrack = jest.fn();
3664+
const { usePerpsEventTracking: mockUsePerpsEventTrackingFn } =
3665+
jest.requireMock('../../hooks/usePerpsEventTracking');
3666+
mockUsePerpsEventTrackingFn.mockImplementation(() => ({
3667+
track: mockTrack,
3668+
}));
3669+
3670+
const { getByTestId } = renderWithProvider(
3671+
<PerpsConnectionProvider>
3672+
<PerpsMarketDetailsView />
3673+
</PerpsConnectionProvider>,
3674+
{
3675+
state: initialState,
3676+
},
3677+
);
3678+
3679+
fireEvent.press(
3680+
getByTestId(PerpsMarketHeaderSelectorsIDs.MARKET_LIST_BUTTON),
3681+
);
3682+
3683+
expect(mockTrack).toHaveBeenCalledWith(
3684+
MetaMetricsEvents.PERPS_UI_INTERACTION,
3685+
expect.objectContaining({
3686+
[PERPS_EVENT_PROPERTY.INTERACTION_TYPE]:
3687+
PERPS_EVENT_VALUE.INTERACTION_TYPE.BUTTON_CLICKED,
3688+
[PERPS_EVENT_PROPERTY.BUTTON_CLICKED]:
3689+
PERPS_EVENT_VALUE.BUTTON_CLICKED.MARKET_LIST,
3690+
[PERPS_EVENT_PROPERTY.BUTTON_LOCATION]:
3691+
PERPS_EVENT_VALUE.BUTTON_LOCATION.PERP_MARKET_DETAILS,
3692+
[PERPS_EVENT_PROPERTY.ASSET]: 'BTC',
3693+
}),
3694+
);
3695+
});
36633696
});
36643697

36653698
describe('Position opened timestamp', () => {
@@ -4613,7 +4646,9 @@ describe('PerpsMarketDetailsView', () => {
46134646

46144647
// Should show the route market's leverage badge
46154648
expect(getByText('25x')).toBeOnTheScreen();
4616-
expect(getAllByText('ETH-USD').length).toBeGreaterThanOrEqual(1);
4649+
// Header shows the full asset name and the market pair subtitle
4650+
expect(getByText('Ethereum')).toBeOnTheScreen();
4651+
expect(getAllByText('ETH-USD perp').length).toBeGreaterThanOrEqual(1);
46174652
});
46184653

46194654
it('enriches market data when route maxLeverage is unformatted', async () => {
@@ -4820,7 +4855,8 @@ describe('PerpsMarketDetailsView', () => {
48204855

48214856
// Verify the header renders with correct market symbol
48224857
expect(getByTestId('perps-market-header')).toBeOnTheScreen();
4823-
expect(getAllByText('BTC-USD').length).toBeGreaterThanOrEqual(1);
4858+
expect(getByText('Bitcoin')).toBeOnTheScreen();
4859+
expect(getAllByText('BTC-USD perp').length).toBeGreaterThanOrEqual(1);
48244860

48254861
// Should show the enriched market's leverage badge from usePerpsMarkets
48264862
await waitFor(() => {
@@ -4844,7 +4880,7 @@ describe('PerpsMarketDetailsView', () => {
48444880
isRefreshing: false,
48454881
});
48464882

4847-
const { getAllByText, queryByText } = renderWithProvider(
4883+
const { getByText, getAllByText, queryByText } = renderWithProvider(
48484884
<PerpsConnectionProvider>
48494885
<PerpsMarketDetailsView />
48504886
</PerpsConnectionProvider>,
@@ -4854,7 +4890,8 @@ describe('PerpsMarketDetailsView', () => {
48544890
);
48554891

48564892
// Should show the asset name but no leverage badge (since no maxLeverage available)
4857-
expect(getAllByText('UNKNOWN-USD').length).toBeGreaterThanOrEqual(1);
4893+
expect(getByText('Unknown Asset')).toBeOnTheScreen();
4894+
expect(getAllByText('UNKNOWN-USD perp').length).toBeGreaterThanOrEqual(1);
48584895
// No leverage badge should be shown
48594896
expect(queryByText('40x')).toBeNull();
48604897
expect(queryByText('25x')).toBeNull();

‎app/components/UI/Perps/Views/PerpsMarketDetailsView/PerpsMarketDetailsView.tsx‎

Lines changed: 44 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,20 @@
11
import {
22
Box,
3+
BoxAlignItems,
4+
BoxFlexDirection,
5+
BoxJustifyContent,
36
Button as DSButton,
7+
ButtonIcon,
8+
ButtonIconSize,
49
ButtonSemantic,
510
ButtonSemanticSeverity,
611
ButtonVariant,
712
ButtonSize as ButtonSizeRNDesignSystem,
13+
IconName,
814
Text,
915
TextColor,
1016
TextVariant,
17+
useHeaderStandardAnimated,
1118
} from '@metamask/design-system-react-native';
1219
import {
1320
useFocusEffect,
@@ -40,7 +47,6 @@ import { useDispatch, useSelector } from 'react-redux';
4047
import { strings } from '../../../../../../locales/i18n';
4148
import { setPerpsChartPreferredCandlePeriod } from '../../../../../actions/settings';
4249
import { Skeleton } from '../../../../../component-library/components-temp/Skeleton';
43-
import useHeaderStandardAnimated from '../../../../../component-library/components-temp/HeaderStandardAnimated/useHeaderStandardAnimated';
4450
import { useStyles } from '../../../../../component-library/hooks';
4551
import Routes from '../../../../../constants/navigation/Routes';
4652
import Engine from '../../../../../core/Engine';
@@ -58,10 +64,12 @@ import PerpsCompactOrderRow from '../../components/PerpsCompactOrderRow';
5864
import PerpsFlipPositionConfirmSheet from '../../components/PerpsFlipPositionConfirmSheet';
5965
import {
6066
PerpsMarketDetailsViewSelectorsIDs,
67+
PerpsMarketHeaderSelectorsIDs,
6168
PerpsOrderViewSelectorsIDs,
6269
PerpsTutorialSelectorsIDs,
6370
PerpsCompactOrderRowSelectorsIDs,
6471
} from '../../Perps.testIds';
72+
import LivePriceHeader from '../../components/LivePriceDisplay/LivePriceHeader';
6573
import PerpsMarketInlineHeader from '../../components/PerpsMarketInlineHeader';
6674
import PerpsMarketHoursBanner from '../../components/PerpsMarketHoursBanner';
6775
import PerpsMarketStatisticsCard from '../../components/PerpsMarketStatisticsCard';
@@ -853,21 +861,21 @@ const PerpsMarketDetailsView: React.FC<PerpsMarketDetailsViewProps> = () => {
853861
});
854862
}, [market, isWatchlist, track, showToast, PerpsToastOptions]);
855863

856-
const handleCategorySearchPress = useCallback(() => {
864+
const handleMarketListPress = useCallback(() => {
857865
if (!market) return;
858866

859867
track(MetaMetricsEvents.PERPS_UI_INTERACTION, {
860868
[PERPS_EVENT_PROPERTY.INTERACTION_TYPE]:
861869
PERPS_EVENT_VALUE.INTERACTION_TYPE.BUTTON_CLICKED,
862870
[PERPS_EVENT_PROPERTY.BUTTON_CLICKED]:
863-
PERPS_EVENT_VALUE.BUTTON_CLICKED.MAGNIFYING_GLASS,
871+
PERPS_EVENT_VALUE.BUTTON_CLICKED.MARKET_LIST,
864872
[PERPS_EVENT_PROPERTY.BUTTON_LOCATION]:
865-
PERPS_EVENT_VALUE.BUTTON_LOCATION.ASSET_DETAILS,
873+
PERPS_EVENT_VALUE.BUTTON_LOCATION.PERP_MARKET_DETAILS,
866874
[PERPS_EVENT_PROPERTY.ASSET]: market.symbol,
867875
});
868876

869877
navigateToMarketList({
870-
source: PERPS_EVENT_VALUE.SOURCE.MAGNIFYING_GLASS,
878+
source: PERPS_EVENT_VALUE.SOURCE.PERP_ASSET_SCREEN,
871879
});
872880
}, [market, track, navigateToMarketList]);
873881

@@ -1540,14 +1548,42 @@ const PerpsMarketDetailsView: React.FC<PerpsMarketDetailsViewProps> = () => {
15401548
market={market}
15411549
currentPrice={syncedChartCurrentPrice}
15421550
onBackPress={handleBackPress}
1543-
onFullscreenPress={handleFullscreenChartOpen}
15441551
onFavoritePress={handleWatchlistPress}
1545-
onCategorySearchPress={handleCategorySearchPress}
1552+
onMarketListPress={handleMarketListPress}
15461553
isFavorite={isWatchlist}
1554+
useDetailLayout
15471555
testID={PerpsMarketDetailsViewSelectorsIDs.HEADER}
1548-
fullscreenButtonTestID={`${PerpsMarketDetailsViewSelectorsIDs.HEADER}-fullscreen-button`}
15491556
/>
15501557

1558+
{/* Below header: live price + 24h change and fullscreen chart button */}
1559+
<Box
1560+
flexDirection={BoxFlexDirection.Row}
1561+
alignItems={BoxAlignItems.Center}
1562+
justifyContent={BoxJustifyContent.Between}
1563+
gap={2}
1564+
twClassName="px-4 pb-2"
1565+
testID={PerpsMarketDetailsViewSelectorsIDs.MARKET_SUMMARY}
1566+
>
1567+
{/* Flexible wrapper lets the price shrink; the button stays fixed. */}
1568+
<Box twClassName="flex-1">
1569+
<LivePriceHeader
1570+
symbol={market.symbol}
1571+
testIDPrice={PerpsMarketHeaderSelectorsIDs.PRICE}
1572+
testIDChange={PerpsMarketHeaderSelectorsIDs.PRICE_CHANGE}
1573+
currentPrice={syncedChartCurrentPrice}
1574+
size="large"
1575+
/>
1576+
</Box>
1577+
<ButtonIcon
1578+
iconName={IconName.Expand}
1579+
size={ButtonIconSize.Md}
1580+
onPress={handleFullscreenChartOpen}
1581+
style={styles.marketSummaryFullscreenButton}
1582+
testID={PerpsMarketDetailsViewSelectorsIDs.FULLSCREEN_CHART_BUTTON}
1583+
accessibilityLabel={strings('perps.market_details.fullscreen_chart')}
1584+
/>
1585+
</Box>
1586+
15511587
<View style={styles.scrollableContentContainer}>
15521588
<ScrollView
15531589
ref={scrollViewRef}

‎app/components/UI/Perps/Views/PerpsMarketDetailsView/PerpsMarketDetailsView.view.test.tsx‎

Lines changed: 42 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,13 @@
66
*/
77
import '../../../../../../tests/component-view/mocks';
88
import type { ComponentType } from 'react';
9-
import { act, fireEvent, screen, waitFor } from '@testing-library/react-native';
9+
import {
10+
act,
11+
fireEvent,
12+
screen,
13+
waitFor,
14+
within,
15+
} from '@testing-library/react-native';
1016
import type { Position } from '@metamask/perps-controller';
1117
import {
1218
MOCK_PERPS_MARKET_INSIGHTS_REPORT,
@@ -485,21 +491,44 @@ describe('PerpsMarketDetailsView', () => {
485491
).toBeOnTheScreen();
486492
expect(
487493
screen.getByTestId(
488-
`${PerpsMarketDetailsViewSelectorsIDs.HEADER}-fullscreen-button`,
494+
PerpsMarketDetailsViewSelectorsIDs.FULLSCREEN_CHART_BUTTON,
489495
),
490496
).toBeOnTheScreen();
491497
});
492498

493-
it('renders header with market title', async () => {
499+
it('renders header with full asset name and market pair subtitle', async () => {
494500
renderEligibleNoPositionPerpsDetails();
495501

496502
expect(
497503
await screen.findByTestId(PerpsMarketDetailsViewSelectorsIDs.HEADER),
498504
).toBeOnTheScreen();
499-
expect(screen.getByText('ETH-USD')).toBeOnTheScreen();
505+
expect(screen.getByText('Ethereum')).toBeOnTheScreen();
506+
expect(screen.getByText('ETH-USD perp')).toBeOnTheScreen();
500507
});
501508

502-
it('renders header price when market has no maxLeverage', async () => {
509+
it('renders live price, 24h change, and fullscreen button inside the market summary row', async () => {
510+
renderEligibleNoPositionPerpsDetails();
511+
512+
const marketSummary = await screen.findByTestId(
513+
PerpsMarketDetailsViewSelectorsIDs.MARKET_SUMMARY,
514+
);
515+
516+
expect(
517+
within(marketSummary).getByTestId(PerpsMarketHeaderSelectorsIDs.PRICE),
518+
).toBeOnTheScreen();
519+
expect(
520+
within(marketSummary).getByTestId(
521+
PerpsMarketHeaderSelectorsIDs.PRICE_CHANGE,
522+
),
523+
).toBeOnTheScreen();
524+
expect(
525+
within(marketSummary).getByTestId(
526+
PerpsMarketDetailsViewSelectorsIDs.FULLSCREEN_CHART_BUTTON,
527+
),
528+
).toBeOnTheScreen();
529+
});
530+
531+
it('renders the market summary price when the market has no maxLeverage', async () => {
503532
renderPerpsMarketDetailsView({
504533
initialParams: {
505534
market: {
@@ -536,19 +565,24 @@ describe('PerpsMarketDetailsView', () => {
536565
expect(
537566
await screen.findByTestId(PerpsMarketDetailsViewSelectorsIDs.HEADER),
538567
).toBeOnTheScreen();
568+
const marketSummary = await screen.findByTestId(
569+
PerpsMarketDetailsViewSelectorsIDs.MARKET_SUMMARY,
570+
);
539571
expect(
540-
await screen.findByTestId(PerpsMarketHeaderSelectorsIDs.PRICE),
572+
within(marketSummary).getByTestId(PerpsMarketHeaderSelectorsIDs.PRICE),
541573
).toBeOnTheScreen();
542574
expect(
543-
await screen.findByTestId(PerpsMarketHeaderSelectorsIDs.PRICE_CHANGE),
575+
within(marketSummary).getByTestId(
576+
PerpsMarketHeaderSelectorsIDs.PRICE_CHANGE,
577+
),
544578
).toBeOnTheScreen();
545579
});
546580

547581
it('opens fullscreen chart modal and close button is pressable', async () => {
548582
renderEligibleNoPositionPerpsDetails();
549583

550584
const fullscreenButton = await screen.findByTestId(
551-
`${PerpsMarketDetailsViewSelectorsIDs.HEADER}-fullscreen-button`,
585+
PerpsMarketDetailsViewSelectorsIDs.FULLSCREEN_CHART_BUTTON,
552586
);
553587
fireEvent.press(fullscreenButton);
554588

0 commit comments

Comments
 (0)