chore: add buy/sell trade markers to trader position chart (#29478)

<!--
Please submit this PR as a draft initially.

Do not mark it as "Ready for review" until this PR meets the canonical
Definition of Ready For Review in `docs/readme/ready-for-review.md`.

In short: the template must be materially complete (not just section
titles
present), all status checks must be currently passing, and the only
expected
follow-up commits must be reviewer-driven.
-->

## **Description**

Adds buy/sell dot markers to the price chart on the Trader Position
view, mapping each trade's timestamp to the nearest price-data index on
the chart line.

<img height="800" alt="Simulator Screenshot - iPhone 17 Pro - 2026-04-29
at 11 44 47"
src="https://github.com/user-attachments/assets/beeda603-8f8f-42a6-b778-64c9a5159776"
/>

<img height="800" alt="Simulator Screenshot - iPhone 17 Pro - 2026-04-29
at 11 46 14"
src="https://github.com/user-attachments/assets/e5d58dc6-3871-411f-bbbe-705e4163b662"
/>

Why some markers may not appear:

Trade predates the chart's price data, because the price API window may
start later (recently-listed token). Trades before the first price point
are correctly excluded since plotting them at a position the chart isn't
drawing would be misleading.
Multiple trades collapse to the same index, on wider timeframes (1M: ~6h
candle spacing), trades that are hours apart on the same day snap to the
same nearest index and stack.

## **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:

## **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**

<!--
Every checklist item must be consciously assessed before marking this PR
as
"Ready for review". A checked box means you deliberately considered that
responsibility, not that you literally performed every action listed.

Unchecked boxes are ambiguous: they are not an implicit "N/A" and they
are not
a silent "skip". See `docs/readme/ready-for-review.md` for the full
checklist
semantics.
-->

- [ ] 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.

#### 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**

<!--
Reviewer checklist items follow the same semantics as the author
checklist: an
unchecked box is ambiguous, a checked box means the reviewer consciously
assessed that responsibility. See `docs/readme/ready-for-review.md`.
-->

- [ ] 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]
> **Medium Risk**
> Introduces a new chart implementation with custom touch/overlay
rendering and timestamp-to-index mapping, which could affect chart
correctness and performance on edge-case data windows; changes are
UI-only but non-trivial.
> 
> **Overview**
> Adds a dedicated `TraderPriceChart` to the Trader Position view that
overlays buy/sell trade markers on the price line by mapping each trade
timestamp to the nearest historical price index (dropping out-of-window
trades and normalizing seconds vs ms timestamps).
> 
> Wires the filtered `trades` list through `TraderPositionView` →
`TraderPositionChartSection`, suppresses the chart end-dot when recent
trade markers would overlap it, and adds focused unit tests for both the
marker-mapping logic and chart rendering behavior. Separately, the
homepage Top Traders carousel cards switch from fixed heights to
`h-auto` (including skeletons and “View more”) to avoid hard-coded tile
height constraints.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
f086b5b. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: zone-live

app/components/Views/Homepage/Sections/TopTraders/TopTradersSection.tsx

@@ -23,10 +23,7 @@ import useHomeViewedEvent, {
 import { useSectionPerformance } from '../../hooks/useSectionPerformance';
 import { SectionRefreshHandle } from '../../types';
 import { TopTraderCard, TopTraderCardSkeleton } from './components';
-import {
-  TOP_TRADER_CARD_HEIGHT,
-  TOP_TRADER_CARD_WIDTH,
-} from './components/TopTraderCard';
+import { TOP_TRADER_CARD_WIDTH } from './components/TopTraderCard';
 import { useTopTraders } from './hooks';
 
 const HOME_TRADER_LIMIT = 10;
@@ -135,7 +132,7 @@ const TopTradersSection = forwardRef<
           {!isLoading && traders.length > 0 && (
             <ViewMoreCard
               onPress={handleViewAll}
-              twClassName={`w-[${TOP_TRADER_CARD_WIDTH}px] h-[${TOP_TRADER_CARD_HEIGHT}px]`}
+              twClassName={`w-[${TOP_TRADER_CARD_WIDTH}px] h-auto`}
               testID="top-traders-view-more-card"
             />
           )}

app/components/Views/Homepage/Sections/TopTraders/components/TopTraderCard.tsx

@@ -38,7 +38,6 @@ export interface TopTraderCardProps {
 // Fixed dimensions for every tile in the homepage Top Traders carousel
 const AVATAR_SIZE = 60;
 export const TOP_TRADER_CARD_WIDTH = 200;
-export const TOP_TRADER_CARD_HEIGHT = 188;
 
 /**
  * TopTraderCard -- compact card for the homepage horizontal scroll.
@@ -59,7 +58,7 @@ const TopTraderCard: React.FC<TopTraderCardProps> = ({
 
   return (
     <Box
-      twClassName={`w-[${TOP_TRADER_CARD_WIDTH}px] h-[${TOP_TRADER_CARD_HEIGHT}px] rounded-2xl bg-muted p-4 overflow-hidden gap-1`}
+      twClassName={`w-[${TOP_TRADER_CARD_WIDTH}px] h-auto rounded-2xl bg-muted p-4 overflow-hidden gap-1`}
       testID={testID ?? `top-trader-card-${trader.id}`}
     >
       <TouchableOpacity
@@ -134,6 +133,7 @@ const TopTraderCard: React.FC<TopTraderCardProps> = ({
           trader.isFollowing ? ButtonVariant.Secondary : ButtonVariant.Primary
         }
         size={ButtonSize.Md}
+        twClassName="mt-2"
         isFullWidth
         onPress={() => onFollowPress(trader.id)}
       >

app/components/Views/Homepage/Sections/TopTraders/components/TopTraderCardSkeleton.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { View } from 'react-native';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { useTheme } from '../../../../../../util/theme';
-import { TOP_TRADER_CARD_HEIGHT, TOP_TRADER_CARD_WIDTH } from './TopTraderCard';
+import { TOP_TRADER_CARD_WIDTH } from './TopTraderCard';
 
 /**
  * TopTraderCardSkeleton -- loading placeholder that mirrors the TopTraderCard layout.
@@ -18,7 +18,7 @@ const TopTraderCardSkeleton: React.FC = () => {
   return (
     <View
       style={tw.style(
-        `w-[${TOP_TRADER_CARD_WIDTH}px] h-[${TOP_TRADER_CARD_HEIGHT}px] rounded-2xl bg-muted p-4`,
+        `w-[${TOP_TRADER_CARD_WIDTH}px] h-auto rounded-2xl bg-muted p-4`,
       )}
     >
       <SkeletonPlaceholder

app/components/Views/SocialLeaderboard/TraderPositionView/TraderPositionView.test.tsx

@@ -11,6 +11,7 @@ const mockGoBack = jest.fn();
 const mockGetAssetImageUrl = jest.fn();
 const mockHandleFetch = handleFetch as jest.MockedFunction<typeof handleFetch>;
 const mockPriceChart = jest.fn();
+const mockTraderPriceChart = jest.fn();
 
 interface MockRouteParams {
   positionId?: string;
@@ -132,6 +133,16 @@ jest.mock('../../../UI/AssetOverview/PriceChart', () => {
     },
   };
 });
+jest.mock('./components/TraderPriceChart', () => {
+  const { View } = jest.requireActual('react-native');
+  return {
+    __esModule: true,
+    default: (props: unknown) => {
+      mockTraderPriceChart(props);
+      return <View testID="trader-price-chart-mock" />;
+    },
+  };
+});
 jest.mock('../../../UI/AssetOverview/PriceChart/PriceChart.context', () => {
   const ReactActual = jest.requireActual('react');
   return {
@@ -229,7 +240,7 @@ describe('TraderPositionView', () => {
       screen.getByTestId(TraderPositionViewSelectorsIDs.FALLBACK),
     ).toBeOnTheScreen();
     // Price chart should not be rendered in the fallback state
-    expect(screen.queryByTestId('price-chart-mock')).toBeNull();
+    expect(screen.queryByTestId('trader-price-chart-mock')).toBeNull();
   });
 
   it('renders the skeleton while a positionId fetch is in flight', () => {
@@ -296,7 +307,9 @@ describe('TraderPositionView', () => {
 
     await waitFor(() => {
       const lastCall =
-        mockPriceChart.mock.calls[mockPriceChart.mock.calls.length - 1]?.[0];
+        mockTraderPriceChart.mock.calls[
+          mockTraderPriceChart.mock.calls.length - 1
+        ]?.[0];
       expect(lastCall).toMatchObject({ isLoading: false });
     });
   });
@@ -309,6 +322,19 @@ describe('TraderPositionView', () => {
     ).toBeOnTheScreen();
   });
 
+  it('forwards the filtered trades to the chart component', async () => {
+    renderWithProvider(<TraderPositionView />, { state: mockState });
+
+    await waitFor(() => {
+      const lastCall =
+        mockTraderPriceChart.mock.calls[
+          mockTraderPriceChart.mock.calls.length - 1
+        ]?.[0];
+      expect(lastCall).toHaveProperty('trades');
+      expect(Array.isArray(lastCall.trades)).toBe(true);
+    });
+  });
+
   it('fires a medium impact haptic when the buy button is pressed', () => {
     renderWithProvider(<TraderPositionView />, { state: mockState });
 
@@ -487,7 +513,9 @@ describe('TraderPositionView', () => {
 
     await waitFor(() => {
       const lastCall =
-        mockPriceChart.mock.calls[mockPriceChart.mock.calls.length - 1]?.[0];
+        mockTraderPriceChart.mock.calls[
+          mockTraderPriceChart.mock.calls.length - 1
+        ]?.[0];
 
       expect(lastCall).toMatchObject({
         prices: weeklyPrices,

app/components/Views/SocialLeaderboard/TraderPositionView/TraderPositionView.tsx

@@ -140,6 +140,7 @@ const TraderPositionView = () => {
               priceDiff={priceDiff}
               isPricesLoading={isPricesLoading}
               onChartIndexChange={handleChartIndexChange}
+              trades={trades}
             />
 
             <TraderTimePeriodSelector

app/components/Views/SocialLeaderboard/TraderPositionView/components/TraderPositionChartSection.tsx

@@ -1,29 +1,33 @@
 import React from 'react';
 import { Box } from '@metamask/design-system-react-native';
+import type { Trade } from '@metamask/social-controllers';
 import type { TokenPrice } from '../../../../hooks/useTokenHistoricalPrices';
-import PriceChart from '../../../../UI/AssetOverview/PriceChart';
 import { PriceChartProvider } from '../../../../UI/AssetOverview/PriceChart/PriceChart.context';
+import TraderPriceChart from './TraderPriceChart';
 
 export interface TraderPositionChartSectionProps {
   historicalPrices: TokenPrice[];
   priceDiff: number;
   isPricesLoading: boolean;
   onChartIndexChange: (index: number) => void;
+  trades: readonly Trade[];
 }
 
 const TraderPositionChartSection: React.FC<TraderPositionChartSectionProps> = ({
   historicalPrices,
   priceDiff,
   isPricesLoading,
   onChartIndexChange,
+  trades,
 }) => (
   <PriceChartProvider>
     <Box twClassName="mx-4 my-3">
-      <PriceChart
+      <TraderPriceChart
         prices={historicalPrices}
         priceDiff={priceDiff}
         isLoading={isPricesLoading}
         onChartIndexChange={onChartIndexChange}
+        trades={trades}
       />
     </Box>
   </PriceChartProvider>