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

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;