feat(perps): stack change below price with absolute + percent

Match the asset overview screen for the prominent market-summary header:
stack the 24h change below the price and show both the absolute change
and the percentage (e.g. "+$3.57 (+0.21%)") using a medium-weight BodySm
line. The absolute change is derived from the current price and the 24h
percentage. The compact header keeps its inline, percentage-only layout.

Author: michalconsensys

app/components/UI/Perps/components/LivePriceDisplay/LivePriceHeader.test.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { StyleProp, StyleSheet, ViewStyle } from 'react-native';
 import { render } from '@testing-library/react-native';
 import {
   Text,
@@ -295,13 +296,67 @@ describe('LivePriceHeader', () => {
         (el) => el.props.children === '$3,000',
       );
       const changeText = textElements.find(
-        (el) => el.props.children === '+5.50%',
+        (el) =>
+          typeof el.props.children === 'string' &&
+          el.props.children.includes('(+5.50%)'),
       );
 
-      expect(priceText?.props.variant).toBe(TextVariant.HeadingLg);
+      expect(priceText?.props.variant).toBe(TextVariant.DisplayLg);
       expect(priceText?.props.color).toBe(TextColor.TextDefault);
-      expect(changeText?.props.variant).toBe(TextVariant.BodyMd);
+      expect(changeText?.props.variant).toBe(TextVariant.BodySm);
       expect(changeText?.props.fontWeight).toBe(FontWeight.Medium);
+      expect(changeText?.props.color).toBe(TextColor.SuccessDefault);
+    });
+
+    it('shows the absolute change and percentage for the large variant', () => {
+      const { UNSAFE_getAllByType } = render(
+        <LivePriceHeader symbol="ETH" currentPrice={3000} size="large" />,
+      );
+
+      const changeText = UNSAFE_getAllByType(Text).find(
+        (el) =>
+          typeof el.props.children === 'string' &&
+          el.props.children.includes('(+5.50%)'),
+      );
+
+      // 3000 - 3000 / 1.055 ≈ 156.4
+      expect(changeText?.props.children).toBe('+$156.4 (+5.50%)');
+    });
+
+    it('shows only the percentage for the compact (default) variant', () => {
+      const { UNSAFE_getAllByType } = render(
+        <LivePriceHeader symbol="ETH" currentPrice={3000} />,
+      );
+
+      const changeText = UNSAFE_getAllByType(Text).find(
+        (el) => el.props.children === '+5.50%',
+      );
+
+      expect(changeText).toBeDefined();
+    });
+
+    it('stacks the change below the price for the large variant', () => {
+      const tree = render(
+        <LivePriceHeader symbol="ETH" currentPrice={3000} size="large" />,
+      ).toJSON();
+      const containerStyle = StyleSheet.flatten(
+        (tree as { props: { style?: StyleProp<ViewStyle> } } | null)?.props
+          .style,
+      );
+
+      expect(containerStyle.flexDirection).toBe('column');
+    });
+
+    it('keeps the change inline with the price for the default variant', () => {
+      const tree = render(
+        <LivePriceHeader symbol="ETH" currentPrice={3000} />,
+      ).toJSON();
+      const containerStyle = StyleSheet.flatten(
+        (tree as { props: { style?: StyleProp<ViewStyle> } } | null)?.props
+          .style,
+      );
+
+      expect(containerStyle.flexDirection).toBe('row');
     });
   });
 

app/components/UI/Perps/components/LivePriceDisplay/LivePriceHeader.tsx

@@ -1,5 +1,5 @@
 import React, { memo, useMemo } from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View, StyleSheet, ViewStyle } from 'react-native';
 import {
   Text,
   TextVariant,
@@ -33,9 +33,6 @@ interface LivePriceHeaderProps {
 const styleSheet = () =>
   StyleSheet.create({
     container: {
-      flexDirection: 'row',
-      alignItems: 'baseline',
-      gap: 6,
       // Allow the row to shrink within a constrained parent so long prices or
       // larger system font sizes don't overflow adjacent content.
       flexShrink: 1,
@@ -45,6 +42,19 @@ const styleSheet = () =>
     },
   });
 
+// Compact header keeps the change inline with the price; the prominent header
+// stacks the change below the price (matches the asset overview screen).
+const inlineLayout: ViewStyle = {
+  flexDirection: 'row',
+  alignItems: 'baseline',
+  gap: 6,
+};
+const stackedLayout: ViewStyle = {
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+  gap: 2,
+};
+
 /**
  * Component that displays live price and change for header
  * Uses currentPrice prop from candle stream, subscribes to price stream for 24h change only
@@ -58,11 +68,12 @@ const LivePriceHeader: React.FC<LivePriceHeaderProps> = ({
   size = 'default',
 }) => {
   const isLarge = size === 'large';
-  const priceVariant = isLarge ? TextVariant.HeadingLg : TextVariant.BodySm;
+  const priceVariant = isLarge ? TextVariant.DisplayLg : TextVariant.BodySm;
   const priceColor = isLarge
     ? TextColor.TextDefault
     : TextColor.TextAlternative;
-  const changeVariant = isLarge ? TextVariant.BodyMd : TextVariant.BodySm;
+  const changeVariant = TextVariant.BodySm;
+  // Match the asset overview screen, which uses a medium-weight change line.
   const changeFontWeight = isLarge ? FontWeight.Medium : FontWeight.Regular;
   const { styles } = useStyles(styleSheet, {});
   // Subscribe to price stream only for 24h change percentage
@@ -107,6 +118,18 @@ const LivePriceHeader: React.FC<LivePriceHeaderProps> = ({
     }
   }, [currentPrice]);
 
+  // Absolute 24h change derived from the current price and the 24h percentage
+  // (the price stream only exposes the percentage). prevPrice = current / (1 + pct/100).
+  const absoluteChange = useMemo(() => {
+    if (displayChange === null) return null;
+    if (!currentPrice || currentPrice <= 0 || !Number.isFinite(currentPrice)) {
+      return null;
+    }
+    const previousPrice = currentPrice / (1 + displayChange / 100);
+    if (!Number.isFinite(previousPrice)) return null;
+    return currentPrice - previousPrice;
+  }, [currentPrice, displayChange]);
+
   const formattedChange = useMemo(() => {
     // If displayChange is null, we're still loading - show loading indicator
     if (displayChange === null) {
@@ -118,14 +141,30 @@ const LivePriceHeader: React.FC<LivePriceHeaderProps> = ({
     }
 
     try {
-      return formatPercentage(displayChange.toString());
+      const percentage = formatPercentage(displayChange.toString());
+
+      // Compact header stays percentage-only; the prominent header mirrors the
+      // asset overview screen by showing the absolute change and percentage,
+      // e.g. "+$3.57 (+0.21%)".
+      if (!isLarge || absoluteChange === null) {
+        return percentage;
+      }
+
+      const sign = absoluteChange > 0 ? '+' : absoluteChange < 0 ? '-' : '';
+      const formattedAbsoluteChange = formatPerpsFiat(
+        Math.abs(absoluteChange),
+        {
+          ranges: PRICE_RANGES_UNIVERSAL,
+        },
+      );
+      return `${sign}${formattedAbsoluteChange} (${percentage})`;
     } catch {
       return PERPS_CONSTANTS.FallbackPercentageDisplay;
     }
-  }, [currentPrice, displayChange]);
+  }, [currentPrice, displayChange, isLarge, absoluteChange]);
 
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, isLarge ? stackedLayout : inlineLayout]}>
       <Text
         variant={priceVariant}
         color={priceColor}