chore: What's Happening UI/UX polish (#29782)

zone-live · web-flow · commit 8d9bcda3ba84 · 2026-05-06T21:04:19.000Z
## **Description** Four small UI/UX fixes for the What's Happening feature: 1. Home carousel card date visibility 2. Detail-view header size 3. Expanded card height consistency 4. in Tokens row the Buy button switched to Trade button, and now users should always be directed to Perps trade. When a token asset has an hlPerpsMarket entry the row now shows a Trade button navigating to Perps market details; otherwise it falls back to the existing Buy/Ramp flow. <img height="790" alt="Simulator Screenshot - iPhone 17 Pro - 2026-05-06 at 12 23 11" src="https://github.com/user-attachments/assets/d3a91506-e9d0-4182-a9ea-47732834268a" /> <img height="790" alt="Simulator Screenshot - iPhone 17 Pro - 2026-05-06 at 12 23 02" src="https://github.com/user-attachments/assets/2c40b688-b91b-4da5-9e10-d69bfc8b6844" /> <img height="790" alt="Simulator Screenshot - iPhone 17 Pro - 2026-05-06 at 12 01 23" src="https://github.com/user-attachments/assets/9b7371c3-4306-4794-be88-2671d0e01836" /> ## **Changelog**  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**  ### **Before**  ### **After**  ## **Pre-merge author checklist**  - [ ] 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**  - [ ] 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.  --- > [!NOTE] > **Medium Risk** > Medium risk because it changes navigation behavior for token action buttons (routing some assets to Perps) and alters carousel/card layout rendering based on runtime measurement, which could affect visibility/scroll positioning across devices. > > **Overview** > Polishes What’s Happening UI by slightly increasing home carousel card heights, reducing card title lines to preserve footer/date visibility, and resizing the “View more” card to match. > > Updates the detail view header to a custom, smaller layout and makes the expanded-card carousel use a fixed measured `cardHeight`, gating card rendering and initial scroll positioning until layout is known; tests now simulate `onLayout` to validate rendering. > > Changes related-asset actions so token rows show **Trade** (navigating to Perps market details) when `hlPerpsMarket` is present, via new `useTradeNavigation`; `PerpsRow` is simplified to reuse the same hook, and `AssetRow` migrates to the design-system `Button` component. > > <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit 7edb172. Bugbot is set up for automated code reviews on this repo. Configure [here](https://www.cursor.com/dashboard/bugbot).</sup>
diff --git a/app/components/Views/Homepage/Sections/WhatsHappening/WhatsHappeningSection.tsx b/app/components/Views/Homepage/Sections/WhatsHappening/WhatsHappeningSection.tsx
@@ -166,7 +166,7 @@ const WhatsHappeningSection = forwardRef<
             ))}
             <ViewMoreCard
               onPress={handleViewAll}
-              twClassName="w-[180px] h-[248px]"
+              twClassName="w-[180px] h-[254px]"
               textVariant={TextVariant.BodyLg}
             />
           </>
diff --git a/app/components/Views/Homepage/Sections/WhatsHappening/components/WhatsHappeningCard.tsx b/app/components/Views/Homepage/Sections/WhatsHappening/components/WhatsHappeningCard.tsx
@@ -38,7 +38,7 @@ const WhatsHappeningCard: React.FC<WhatsHappeningCardProps> = ({
       onPress={handlePress}
       activeOpacity={0.7}
       style={tw.style(
-        'w-[280px] h-[248px] rounded-2xl bg-background-muted overflow-hidden p-4 justify-between gap-3',
+        'w-[280px] h-[254px] rounded-2xl bg-background-muted overflow-hidden p-4 justify-between gap-3',
       )}
     >
       <Box gap={3}>
@@ -83,7 +83,7 @@ const WhatsHappeningCard: React.FC<WhatsHappeningCardProps> = ({
           variant={TextVariant.BodyMd}
           fontWeight={FontWeight.Medium}
           color={TextColor.TextDefault}
-          numberOfLines={3}
+          numberOfLines={2}
         >
           {item.title}
         </Text>
diff --git a/app/components/Views/WhatsHappeningDetailView/WhatsHappeningDetailView.test.tsx b/app/components/Views/WhatsHappeningDetailView/WhatsHappeningDetailView.test.tsx
@@ -113,9 +113,12 @@ describe('WhatsHappeningDetailView', () => {
       refresh: mockRefresh,
     });
     renderWithProvider(<WhatsHappeningDetailView />);
-    expect(
-      screen.getByTestId('whats-happening-detail-carousel'),
-    ).toBeOnTheScreen();
+    const carousel = screen.getByTestId('whats-happening-detail-carousel');
+    expect(carousel).toBeOnTheScreen();
+    // Simulate the carousel measuring its height so cards become visible
+    fireEvent(carousel, 'layout', {
+      nativeEvent: { layout: { height: 600, width: 375, x: 0, y: 0 } },
+    });
     expect(screen.getByText(mockItem.title)).toBeOnTheScreen();
   });
 
diff --git a/app/components/Views/WhatsHappeningDetailView/WhatsHappeningDetailView.tsx b/app/components/Views/WhatsHappeningDetailView/WhatsHappeningDetailView.tsx
@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import {
   Dimensions,
+  LayoutChangeEvent,
   NativeScrollEvent,
   NativeSyntheticEvent,
   SafeAreaView,
@@ -10,10 +11,14 @@ import { useNavigation, useRoute, RouteProp } from '@react-navigation/native';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import {
   Box,
+  BoxAlignItems,
+  BoxFlexDirection,
   ButtonIcon,
   ButtonIconSize,
-  HeaderBase,
+  FontWeight,
   IconName,
+  Text,
+  TextVariant,
 } from '@metamask/design-system-react-native';
 import { strings } from '../../../../locales/i18n';
 import { useWhatsHappening } from '../Homepage/Sections/WhatsHappening/hooks';
@@ -45,22 +50,33 @@ const WhatsHappeningDetailView = () => {
   const route =
     useRoute<RouteProp<{ params: WhatsHappeningDetailParams }, 'params'>>();
 
-  const { initialIndex = 0 } = route.params;
+  const initialIndex = route.params?.initialIndex ?? 0;
 
   const { items, isLoading, error, refresh } =
     useWhatsHappening(MAX_ITEMS_DISPLAYED);
 
   const [currentIndex, setCurrentIndex] = useState(initialIndex);
+  const [cardHeight, setCardHeight] = useState(0);
   const scrollViewRef = useRef<ScrollView>(null);
 
+  const handleCarouselLayout = useCallback((e: LayoutChangeEvent) => {
+    const { height } = e.nativeEvent.layout;
+    if (height > 0) setCardHeight(height);
+  }, []);
+
   useEffect(() => {
-    if (initialIndex > 0 && scrollViewRef.current && !isLoading) {
+    if (
+      initialIndex > 0 &&
+      cardHeight > 0 &&
+      scrollViewRef.current &&
+      !isLoading
+    ) {
       scrollViewRef.current.scrollTo({
         x: initialIndex * SNAP_INTERVAL,
         animated: false,
       });
     }
-  }, [initialIndex, isLoading]);
+  }, [initialIndex, isLoading, cardHeight]);
 
   const handleBackPress = useCallback(() => {
     navigation.goBack();
@@ -79,20 +95,24 @@ const WhatsHappeningDetailView = () => {
 
   return (
     <SafeAreaView style={tw`flex-1 bg-default`}>
-      <HeaderBase
-        startAccessory={
-          <ButtonIcon
-            size={ButtonIconSize.Lg}
-            onPress={handleBackPress}
-            iconName={IconName.ArrowLeft}
-            testID="whats-happening-detail-back-button"
-          />
-        }
-        style={tw`p-4`}
-        twClassName="h-auto"
+      <Box
+        flexDirection={BoxFlexDirection.Row}
+        alignItems={BoxAlignItems.Center}
+        twClassName="px-2 py-2"
       >
-        {strings('homepage.sections.whats_happening')}
-      </HeaderBase>
+        <ButtonIcon
+          iconName={IconName.ArrowLeft}
+          size={ButtonIconSize.Md}
+          onPress={handleBackPress}
+          testID="whats-happening-detail-back-button"
+        />
+        <Box twClassName="flex-1 items-center">
+          <Text variant={TextVariant.HeadingSm} fontWeight={FontWeight.Bold}>
+            {strings('homepage.sections.whats_happening')}
+          </Text>
+        </Box>
+        <Box twClassName="w-10" />
+      </Box>
 
       <Box twClassName="flex-1">
         {isLoading ? (
@@ -125,17 +145,20 @@ const WhatsHappeningDetailView = () => {
               snapToInterval={SNAP_INTERVAL}
               snapToAlignment="start"
               style={tw`flex-1`}
-              contentContainerStyle={tw.style(`px-4 gap-3 items-stretch`)}
+              contentContainerStyle={tw.style('px-4 gap-3')}
+              onLayout={handleCarouselLayout}
               onMomentumScrollEnd={handleScrollEnd}
               testID="whats-happening-detail-carousel"
             >
-              {items.map((item) => (
-                <WhatsHappeningExpandedCard
-                  key={item.id}
-                  item={item}
-                  cardWidth={CARD_WIDTH}
-                />
-              ))}
+              {cardHeight > 0 &&
+                items.map((item) => (
+                  <WhatsHappeningExpandedCard
+                    key={item.id}
+                    item={item}
+                    cardWidth={CARD_WIDTH}
+                    cardHeight={cardHeight}
+                  />
+                ))}
             </ScrollView>
 
             <PageIndicator count={items.length} activeIndex={currentIndex} />
diff --git a/app/components/Views/WhatsHappeningDetailView/components/AssetRow.tsx b/app/components/Views/WhatsHappeningDetailView/components/AssetRow.tsx
@@ -6,8 +6,9 @@ import {
   BoxAlignItems,
   BoxFlexDirection,
   BoxJustifyContent,
-  ButtonBase,
-  ButtonBaseSize,
+  Button,
+  ButtonSize,
+  ButtonVariant,
   FontWeight,
   Text,
   TextColor,
@@ -25,7 +26,7 @@ interface AssetRowProps {
 
 /**
  * Shared layout for a single asset row (logo + symbol + action button).
- * Used by TokenRow (Buy) and PerpsRow (Trade); each wrapper supplies its
+ * Used by TokenRow (Buy/Trade) and PerpsRow (Trade); each wrapper supplies its
  * own hook logic and passes the resolved label and handler here.
  */
 const AssetRow: React.FC<AssetRowProps> = ({
@@ -66,14 +67,14 @@ const AssetRow: React.FC<AssetRowProps> = ({
           {asset.symbol}
         </Text>
 
-        <ButtonBase
-          size={ButtonBaseSize.Md}
-          twClassName="bg-background-default rounded-2xl px-4"
+        <Button
+          variant={ButtonVariant.Primary}
+          size={ButtonSize.Md}
           onPress={onAction}
           accessibilityLabel={accessibilityLabel}
         >
           {actionLabel}
-        </ButtonBase>
+        </Button>
       </Box>
     </Box>
   );
diff --git a/app/components/Views/WhatsHappeningDetailView/components/PerpsRow.tsx b/app/components/Views/WhatsHappeningDetailView/components/PerpsRow.tsx
@@ -1,11 +1,8 @@
-import React, { useCallback } from 'react';
-import { useNavigation, NavigationProp } from '@react-navigation/native';
-import { PERPS_EVENT_VALUE } from '@metamask/perps-controller';
+import React from 'react';
 import type { RelatedAsset } from '@metamask/ai-controllers';
-import type { PerpsNavigationParamList } from '../../../UI/Perps/types/navigation';
-import Routes from '../../../../constants/navigation/Routes';
 import { strings } from '../../../../../locales/i18n';
 import AssetRow from './AssetRow';
+import useTradeNavigation from '../hooks/useTradeNavigation';
 
 interface PerpsRowProps {
   asset: RelatedAsset;
@@ -18,19 +15,7 @@ interface PerpsRowProps {
  * be called per-asset (hooks cannot be called inside a loop).
  */
 const PerpsRow: React.FC<PerpsRowProps> = ({ asset }) => {
-  const navigation = useNavigation<NavigationProp<PerpsNavigationParamList>>();
-  const hlPerpsMarket = asset.hlPerpsMarket?.[0];
-
-  const handleTrade = useCallback(() => {
-    if (!hlPerpsMarket) return;
-    navigation.navigate(Routes.PERPS.ROOT, {
-      screen: Routes.PERPS.MARKET_DETAILS,
-      params: {
-        market: { symbol: hlPerpsMarket, name: asset.name },
-        source: PERPS_EVENT_VALUE.SOURCE.HOME_SECTION,
-      },
-    });
-  }, [navigation, hlPerpsMarket, asset.name]);
+  const { handleTrade } = useTradeNavigation(asset);
 
   return (
     <AssetRow
diff --git a/app/components/Views/WhatsHappeningDetailView/components/TokenRow.test.tsx b/app/components/Views/WhatsHappeningDetailView/components/TokenRow.test.tsx
@@ -3,13 +3,23 @@ import { screen, fireEvent } from '@testing-library/react-native';
 import renderWithProvider from '../../../../util/test/renderWithProvider';
 import TokenRow from './TokenRow';
 import type { RelatedAsset } from '@metamask/ai-controllers';
+import Routes from '../../../../constants/navigation/Routes';
 
 const mockGoToBuy = jest.fn();
+const mockNavigate = jest.fn();
 
 jest.mock('../../../UI/Ramp/hooks/useRampNavigation', () => ({
   useRampNavigation: () => ({ goToBuy: mockGoToBuy }),
 }));
 
+jest.mock('@react-navigation/native', () => {
+  const actual = jest.requireActual('@react-navigation/native');
+  return {
+    ...actual,
+    useNavigation: () => ({ navigate: mockNavigate }),
+  };
+});
+
 jest.mock('../utils/getRelatedAssetImageSource', () => ({
   getRelatedAssetImageSource: jest.fn(() => undefined),
 }));
@@ -21,40 +31,61 @@ const btcAsset: RelatedAsset = {
   caip19: ['eip155:1/slip44:0'],
 };
 
-const perpsOnlyAsset: RelatedAsset = {
-  sourceAssetId: 'tsla',
-  symbol: 'TSLA',
-  name: 'Tesla',
-  caip19: [],
-  hlPerpsMarket: ['xyz:TSLA'],
+const dualAsset: RelatedAsset = {
+  sourceAssetId: 'eth',
+  symbol: 'ETH',
+  name: 'Ethereum',
+  caip19: ['eip155:1/slip44:60'],
+  hlPerpsMarket: ['ETH'],
 };
 
 describe('TokenRow', () => {
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
-  it('renders the asset symbol', () => {
-    renderWithProvider(<TokenRow asset={btcAsset} />);
-    expect(screen.getByText('BTC')).toBeOnTheScreen();
-  });
+  describe('when asset has only caip19 (no hlPerpsMarket)', () => {
+    it('renders the asset symbol', () => {
+      renderWithProvider(<TokenRow asset={btcAsset} />);
+      expect(screen.getByText('BTC')).toBeOnTheScreen();
+    });
 
-  it('renders the Buy button', () => {
-    renderWithProvider(<TokenRow asset={btcAsset} />);
-    expect(screen.getByText('Buy')).toBeOnTheScreen();
-  });
+    it('renders the Buy button', () => {
+      renderWithProvider(<TokenRow asset={btcAsset} />);
+      expect(screen.getByText('Buy')).toBeOnTheScreen();
+    });
 
-  it('calls goToBuy with the first caip19 identifier on Buy press', () => {
-    renderWithProvider(<TokenRow asset={btcAsset} />);
-    fireEvent.press(screen.getByText('Buy'));
-    expect(mockGoToBuy).toHaveBeenCalledWith({
-      assetId: 'eip155:1/slip44:0',
+    it('calls goToBuy with the first caip19 identifier on Buy press', () => {
+      renderWithProvider(<TokenRow asset={btcAsset} />);
+      fireEvent.press(screen.getByText('Buy'));
+      expect(mockGoToBuy).toHaveBeenCalledWith({
+        assetId: 'eip155:1/slip44:0',
+      });
     });
   });
 
-  it('calls goToBuy with assetId undefined when caip19 is empty', () => {
-    renderWithProvider(<TokenRow asset={perpsOnlyAsset} />);
-    fireEvent.press(screen.getByText('Buy'));
-    expect(mockGoToBuy).toHaveBeenCalledWith({ assetId: undefined });
+  describe('when asset has hlPerpsMarket (dual asset)', () => {
+    it('renders the Trade button instead of Buy', () => {
+      renderWithProvider(<TokenRow asset={dualAsset} />);
+      expect(screen.getByText('Trade')).toBeOnTheScreen();
+      expect(screen.queryByText('Buy')).toBeNull();
+    });
+
+    it('navigates to Perps market details on Trade press', () => {
+      renderWithProvider(<TokenRow asset={dualAsset} />);
+      fireEvent.press(screen.getByText('Trade'));
+      expect(mockNavigate).toHaveBeenCalledWith(Routes.PERPS.ROOT, {
+        screen: Routes.PERPS.MARKET_DETAILS,
+        params: expect.objectContaining({
+          market: { symbol: 'ETH', name: 'Ethereum' },
+        }),
+      });
+    });
+
+    it('does not call goToBuy when Trade is pressed', () => {
+      renderWithProvider(<TokenRow asset={dualAsset} />);
+      fireEvent.press(screen.getByText('Trade'));
+      expect(mockGoToBuy).not.toHaveBeenCalled();
+    });
   });
 });
diff --git a/app/components/Views/WhatsHappeningDetailView/components/TokenRow.tsx b/app/components/Views/WhatsHappeningDetailView/components/TokenRow.tsx
@@ -3,25 +3,39 @@ import type { RelatedAsset } from '@metamask/ai-controllers';
 import { strings } from '../../../../../locales/i18n';
 import { useRampNavigation } from '../../../UI/Ramp/hooks/useRampNavigation';
 import AssetRow from './AssetRow';
+import useTradeNavigation from '../hooks/useTradeNavigation';
 
 interface TokenRowProps {
   asset: RelatedAsset;
 }
 
 /**
  * A single row in the Tokens section of the expanded What's Happening card.
- * Displays the token logo, symbol, and a Buy button that navigates to the
+ * Shows a Trade button (navigating to Perps) when the asset has an
+ * `hlPerpsMarket` entry; otherwise falls back to a Buy button that opens the
  * Ramp buy flow. Extracted as its own component so hooks can be called
  * per-asset (hooks cannot be called inside a loop).
  */
 const TokenRow: React.FC<TokenRowProps> = ({ asset }) => {
   const { goToBuy } = useRampNavigation();
+  const { handleTrade, canTrade } = useTradeNavigation(asset);
 
   const handleBuy = useCallback(() => {
     const assetId = asset.caip19?.[0];
     goToBuy({ assetId });
   }, [goToBuy, asset.caip19]);
 
+  if (canTrade) {
+    return (
+      <AssetRow
+        asset={asset}
+        actionLabel={strings('bottom_nav.trade')}
+        accessibilityLabel={`${strings('bottom_nav.trade')} ${asset.symbol}`}
+        onAction={handleTrade}
+      />
+    );
+  }
+
   return (
     <AssetRow
       asset={asset}
diff --git a/app/components/Views/WhatsHappeningDetailView/components/WhatsHappeningExpandedCard.test.tsx b/app/components/Views/WhatsHappeningDetailView/components/WhatsHappeningExpandedCard.test.tsx
diff --git a/app/components/Views/WhatsHappeningDetailView/components/WhatsHappeningExpandedCard.tsx b/app/components/Views/WhatsHappeningDetailView/components/WhatsHappeningExpandedCard.tsx
diff --git a/app/components/Views/WhatsHappeningDetailView/hooks/useTradeNavigation.ts b/app/components/Views/WhatsHappeningDetailView/hooks/useTradeNavigation.ts
