feat(perps): add recent activity section to market details view (#22865)

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

This PR adds a "Recent activity" section to the Perps Market Details
view, displaying the 3 most recent trades for the selected market.


## **Changelog**

CHANGELOG entry: Added recent activity section to Perps market details
screen showing the 3 most recent trades


## **Related issues**

Fixes:
https://consensyssoftware.atlassian.net/browse/TAT-1968?atlOrigin=eyJpIjoiODNjZmM2NDUwZGM2NDVmMmE1NmM5MGI5NDJmODBkMGIiLCJwIjoiaiJ9

## **Manual testing steps**

```gherkin
Feature: Recent activity on Perps market details

  Scenario: user views recent trades for a market with activity
    Given user is on the Perps market details screen for ETH
    And user has completed at least one trade for ETH

    When user scrolls to the "Recent activity" section
    Then user sees up to 3 recent trades for ETH market
    And each trade displays the token logo, trade type (e.g., "Opened long"), size, and PnL/fee amount
    And user sees a "See all" button in the header

  Scenario: user navigates to full activity list
    Given user is on the Perps market details screen
    And the "Recent activity" section is visible

    When user taps the "See all" button
    Then user is navigated to the Activity screen with the Trades tab selected
    And user sees the back button to return to market details

  Scenario: user views trade details
    Given user is on the Perps market details screen
    And the "Recent activity" section shows trades

    When user taps on a trade item
    Then user is navigated to the position transaction detail screen
    And user sees full details of the selected trade

  Scenario: user views market with no recent activity
    Given user is on the Perps market details screen for a market
    And user has no trades for this market

    When user scrolls to the "Recent activity" section
    Then user sees "No recent activity" message

  Scenario: user views loading state
    Given user is on the Perps market details screen
    And trades are being fetched

    When the "Recent activity" section is loading
    Then user sees skeleton loading indicators for 3 rows
```

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**



https://github.com/user-attachments/assets/0c33a281-707e-4d55-b5e2-31ee63f94e1c



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

## **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]
> Adds a "Recent activity" section to Perps Market Details showing up to
3 latest trades with navigation to Activity and trade detail, plus
supporting constants, i18n, and tests.
> 
> - **Perps Market Details UI**:
> - Integrates `PerpsMarketTradesList` into `PerpsMarketDetailsView`,
positioned above the risk disclaimer; moves `PerpsNavigationCard` below
the disclaimer.
> - **New Component**: `components/PerpsMarketTradesList`
> - Fetches order fills via `usePerpsOrderFills`, transforms to
transactions, filters by `symbol`, sorts by `timestamp`, and limits to
`PERPS_CONSTANTS.RECENT_ACTIVITY_LIMIT`.
> - Renders header with title and "See all" (navigates to
`Routes.PERPS.ACTIVITY`), shows skeleton while loading, empty state when
no trades, and navigates to `Routes.PERPS.POSITION_TRANSACTION` on item
press.
> - **Constants**: Adds `PERPS_CONSTANTS.RECENT_ACTIVITY_LIMIT = 3` in
`perpsConfig`.
> - **i18n**: Adds `perps.market.recent_trades` and
`perps.market.no_trades` strings.
> - **Tests**: Comprehensive tests for loading/empty states, rendering,
navigation, hook params, filtering/limiting, edge cases, and FlatList
config in `PerpsMarketTradesList.test.tsx`.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
2db4a4a. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: michalconsensys

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

@@ -72,6 +72,7 @@ import PerpsNotificationTooltip from '../../components/PerpsNotificationTooltip'
 import PerpsNavigationCard, {
   type NavigationItem,
 } from '../../components/PerpsNavigationCard/PerpsNavigationCard';
+import PerpsMarketTradesList from '../../components/PerpsMarketTradesList';
 import { isNotificationsFeatureEnabled } from '../../../../../util/notifications';
 import TradingViewChart, {
   type TradingViewChartRef,
@@ -751,10 +752,12 @@ const PerpsMarketDetailsView: React.FC<PerpsMarketDetailsViewProps> = () => {
             />
           </View>
 
-          {/* Navigation Card Section */}
-          <View style={styles.section}>
-            <PerpsNavigationCard items={navigationItems} />
-          </View>
+          {/* Recent Trades Section */}
+          {market?.symbol && (
+            <View style={styles.section}>
+              <PerpsMarketTradesList symbol={market.symbol} />
+            </View>
+          )}
 
           {/* Risk Disclaimer Section */}
           <View style={styles.section}>
@@ -773,6 +776,11 @@ const PerpsMarketDetailsView: React.FC<PerpsMarketDetailsViewProps> = () => {
               </Text>
             </Text>
           </View>
+
+          {/* Navigation Card Section */}
+          <View style={styles.section}>
+            <PerpsNavigationCard items={navigationItems} />
+          </View>
         </ScrollView>
       </View>
 

app/components/UI/Perps/components/PerpsMarketTradesList/PerpsMarketTradesList.styles.ts

@@ -0,0 +1,52 @@
+import type { Theme } from '../../../../../util/theme/models';
+import { StyleSheet } from 'react-native';
+
+const styleSheet = (params: { theme: Theme }) => {
+  const { theme } = params;
+  const { colors } = theme;
+
+  return StyleSheet.create({
+    container: {
+      width: '100%',
+    },
+    header: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      marginBottom: 12,
+    },
+    tradeItem: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingVertical: 12,
+      borderBottomWidth: 1,
+      borderBottomColor: colors.border.muted,
+    },
+    lastTradeItem: {
+      borderBottomWidth: 0,
+    },
+    leftSection: {
+      flex: 1,
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    iconContainer: {
+      marginRight: 12,
+    },
+    tradeInfo: {
+      flex: 1,
+    },
+    tradeType: {
+      marginBottom: 2,
+    },
+    rightSection: {
+      alignItems: 'flex-end',
+    },
+    emptyText: {
+      textAlign: 'center',
+      paddingVertical: 24,
+    },
+  });
+};
+
+export default styleSheet;