chore: TSA-501 whats happening UI fixes (#29920)

joaosantos15 · web-flow · commit a62d62eff443 · 2026-05-08T16:13:06.000Z
## **Description** Small UI improvements to the What's Happening cards. <img width="472" height="470" alt="image" src="https://github.com/user-attachments/assets/1bea3396-6055-4ad6-b6f2-d8ef38e8ef89" />  ## **Changelog**  CHANGELOG entry: no-changelog ## **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**  - [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 - [ ] 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] > **Low Risk** > Low risk UI-only changes to card presentation and date formatting; main risk is minor regressions in layout or relative-time output for edge-case dates. > > **Overview** > Updates the Homepage **What’s Happening** cards to simplify badges and improve the footer: the category badge is removed, impact badge styling is adjusted, and related assets are shown as up to 3 overlapping token icons plus a compact label (e.g., `BTC +2`) instead of multiple symbol pills. > > Switches the card timestamp from a locale date to a **relative time** string via `formatRelativeTime` (with `now` support) and removes the unused `formatShortDate` helper. `formatRelativeTime` now returns an empty string for invalid dates, with new unit tests covering invalid inputs and minute/hour/day formatting. > > <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit 0aa690a. 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/UI/MarketInsights/utils/marketInsightsFormatting.test.ts b/app/components/UI/MarketInsights/utils/marketInsightsFormatting.test.ts
@@ -1,4 +1,45 @@
-import { getFaviconUrl, isXSourceUrl } from './marketInsightsFormatting';
+import {
+  formatRelativeTime,
+  getFaviconUrl,
+  isXSourceUrl,
+} from './marketInsightsFormatting';
+
+describe('formatRelativeTime', () => {
+  const ANCHOR = new Date('2026-05-07T12:00:00.000Z');
+
+  const minutesBeforeAnchor = (n: number) =>
+    new Date(ANCHOR.getTime() - n * 60 * 1000).toISOString();
+
+  beforeEach(() => {
+    jest.useFakeTimers({ now: ANCHOR });
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it('returns empty string for an invalid date string', () => {
+    expect(formatRelativeTime('not-a-date')).toBe('');
+  });
+
+  it('returns nowLabel when diff is under 1 minute', () => {
+    expect(
+      formatRelativeTime(minutesBeforeAnchor(0), { nowLabel: 'now' }),
+    ).toBe('now');
+  });
+
+  it('returns Xm ago for diffs under 1 hour', () => {
+    expect(formatRelativeTime(minutesBeforeAnchor(5))).toBe('5m ago');
+  });
+
+  it('returns Xh ago for diffs under 1 day', () => {
+    expect(formatRelativeTime(minutesBeforeAnchor(3 * 60))).toBe('3h ago');
+  });
+
+  it('returns Xd ago for diffs of 1 day or more', () => {
+    expect(formatRelativeTime(minutesBeforeAnchor(4 * 24 * 60))).toBe('4d ago');
+  });
+});
 
 describe('getFaviconUrl', () => {
   it('uses hostname when source is a full URL', () => {
diff --git a/app/components/UI/MarketInsights/utils/marketInsightsFormatting.ts b/app/components/UI/MarketInsights/utils/marketInsightsFormatting.ts
@@ -30,6 +30,7 @@ export const formatRelativeTime = (
   const { nowLabel = 'just now' } = options;
   const now = new Date();
   const date = new Date(dateString);
+  if (isNaN(date.getTime())) return '';
   const diffMs = now.getTime() - date.getTime();
   const diffMins = Math.floor(diffMs / 60000);
   const diffHours = Math.floor(diffMins / 60);
diff --git a/app/components/Views/Homepage/Sections/WhatsHappening/components/WhatsHappeningCard.test.tsx b/app/components/Views/Homepage/Sections/WhatsHappening/components/WhatsHappeningCard.test.tsx
@@ -28,18 +28,24 @@ jest.mock('../../../../../hooks/useAnalytics/useAnalytics', () => ({
   }),
 }));
 
+jest.mock(
+  '../../../../../UI/Perps/components/PerpsTokenLogo',
+  () => 'PerpsTokenLogo',
+);
+
 const mockRelatedAsset = {
   sourceAssetId: 'btc-mainnet',
   symbol: 'BTC',
   name: 'Bitcoin',
   caip19: ['eip155:1/slip44:0'],
+  hlPerpsMarket: ['BTC'],
 };
 
 const baseItem: WhatsHappeningItem = {
   id: 'trend-0',
   title: 'Bitcoin ETF inflows hit record high',
   description: 'Spot Bitcoin ETFs recorded over $1.2B in net inflows.',
-  date: '2026-03-15T10:00:00.000Z',
+  date: new Date(new Date().getTime() - 4 * 24 * 60 * 60 * 1000).toISOString(),
   category: 'macro',
   impact: 'positive',
   relatedAssets: [mockRelatedAsset],
@@ -58,14 +64,8 @@ describe('WhatsHappeningCard', () => {
     expect(screen.getByText(baseItem.description)).toBeOnTheScreen();
   });
 
-  it('renders category badge when category is provided', () => {
+  it('does not render category badge', () => {
     renderWithProvider(<WhatsHappeningCard item={baseItem} cardIndex={0} />);
-    expect(screen.getByText('Macro')).toBeOnTheScreen();
-  });
-
-  it('does not render category badge when category is absent', () => {
-    const item = { ...baseItem, category: undefined };
-    renderWithProvider(<WhatsHappeningCard item={item} cardIndex={0} />);
     expect(screen.queryByText('Macro')).toBeNull();
   });
 
@@ -95,39 +95,43 @@ describe('WhatsHappeningCard', () => {
     expect(screen.queryByText('Neutral')).toBeNull();
   });
 
-  it('renders impact badge alongside category badge', () => {
-    renderWithProvider(<WhatsHappeningCard item={baseItem} cardIndex={0} />);
-    expect(screen.getByText('Bullish')).toBeOnTheScreen();
-    expect(screen.getByText('Macro')).toBeOnTheScreen();
-  });
-
-  it('renders related asset symbol pills', () => {
+  it('renders the asset symbol label when there is a single related asset', () => {
     renderWithProvider(<WhatsHappeningCard item={baseItem} cardIndex={0} />);
     expect(screen.getByText('BTC')).toBeOnTheScreen();
   });
 
-  it('does not render asset pills when relatedAssets is empty', () => {
-    const item = { ...baseItem, relatedAssets: [] };
-    renderWithProvider(<WhatsHappeningCard item={item} cardIndex={0} />);
-    expect(screen.queryByText('BTC')).toBeNull();
-  });
-
-  it('renders multiple related asset symbols', () => {
+  it('renders "<symbol> +N" label when there are multiple related assets', () => {
     const ethAsset = {
       sourceAssetId: 'eth-mainnet',
       symbol: 'ETH',
       name: 'Ethereum',
       caip19: ['eip155:1/slip44:60'],
+      hlPerpsMarket: ['ETH'],
+    };
+    const solAsset = {
+      sourceAssetId: 'sol-mainnet',
+      symbol: 'SOL',
+      name: 'Solana',
+      caip19: ['solana:mainnet/slip44:501'],
+      hlPerpsMarket: ['SOL'],
+    };
+    const item = {
+      ...baseItem,
+      relatedAssets: [mockRelatedAsset, ethAsset, solAsset],
     };
-    const item = { ...baseItem, relatedAssets: [mockRelatedAsset, ethAsset] };
     renderWithProvider(<WhatsHappeningCard item={item} cardIndex={0} />);
-    expect(screen.getByText('BTC')).toBeOnTheScreen();
-    expect(screen.getByText('ETH')).toBeOnTheScreen();
+    expect(screen.getByText('BTC +2')).toBeOnTheScreen();
+  });
+
+  it('does not render asset label when relatedAssets is empty', () => {
+    const item = { ...baseItem, relatedAssets: [] };
+    renderWithProvider(<WhatsHappeningCard item={item} cardIndex={0} />);
+    expect(screen.queryByText('BTC')).toBeNull();
   });
 
-  it('renders formatted date when date is valid', () => {
+  it('renders relative time when date is valid', () => {
     renderWithProvider(<WhatsHappeningCard item={baseItem} cardIndex={0} />);
-    expect(screen.getByText('Mar 15, 2026')).toBeOnTheScreen();
+    expect(screen.getByText('4d ago')).toBeOnTheScreen();
   });
 
   it('does not render date when date string is invalid', () => {
diff --git a/app/components/Views/Homepage/Sections/WhatsHappening/components/WhatsHappeningCard.tsx b/app/components/Views/Homepage/Sections/WhatsHappening/components/WhatsHappeningCard.tsx
@@ -9,18 +9,19 @@ import {
   FontWeight,
   BoxFlexDirection,
   BoxAlignItems,
+  BoxJustifyContent,
 } from '@metamask/design-system-react-native';
-import { strings } from '../../../../../../../locales/i18n';
 import type { WhatsHappeningItem } from '../types';
-import { formatShortDate } from '../util/formatDate';
 import {
   getImpactLabel,
   getImpactBackgroundClass,
   getImpactTextColor,
 } from '../util/impact';
+import PerpsTokenLogo from '../../../../../UI/Perps/components/PerpsTokenLogo';
 import { MetaMetricsEvents } from '../../../../../../core/Analytics';
 import { useAnalytics } from '../../../../../hooks/useAnalytics/useAnalytics';
 import { useViewportTracking } from '../../../../../UI/MarketInsights/hooks/useViewportTracking';
+import { formatRelativeTime } from '../../../../../UI/MarketInsights/utils/marketInsightsFormatting';
 import { getWhatsHappeningEventProps } from '../eventProperties';
 
 interface WhatsHappeningCardProps {
@@ -29,13 +30,19 @@ interface WhatsHappeningCardProps {
   onPress?: (item: WhatsHappeningItem) => void;
 }
 
+const MAX_VISIBLE_ASSET_ICONS = 3;
+
 const WhatsHappeningCard: React.FC<WhatsHappeningCardProps> = ({
   item,
   cardIndex,
   onPress,
 }) => {
   const tw = useTailwind();
-  const formattedDate = useMemo(() => formatShortDate(item.date), [item.date]);
+  const formattedDate = useMemo(
+    () =>
+      item.date ? formatRelativeTime(item.date, { nowLabel: 'now' }) : null,
+    [item.date],
+  );
   const { trackEvent, createEventBuilder } = useAnalytics();
 
   const handlePress = () => onPress?.(item);
@@ -53,6 +60,15 @@ const WhatsHappeningCard: React.FC<WhatsHappeningCardProps> = ({
   const { ref: cardRef, onLayout: onVisibilityLayout } =
     useViewportTracking(handleVisible);
 
+  const visibleAssets = item.relatedAssets.slice(0, MAX_VISIBLE_ASSET_ICONS);
+  const firstAsset = item.relatedAssets[0];
+  const remainingAssetCount = Math.max(0, item.relatedAssets.length - 1);
+  const assetLabel = firstAsset
+    ? remainingAssetCount > 0
+      ? `${firstAsset.symbol} +${remainingAssetCount}`
+      : firstAsset.symbol
+    : null;
+
   return (
     <View ref={cardRef} collapsable={false} onLayout={onVisibilityLayout}>
       <TouchableOpacity
@@ -63,43 +79,20 @@ const WhatsHappeningCard: React.FC<WhatsHappeningCardProps> = ({
         )}
       >
         <Box gap={3}>
-          {/* Impact + Category badges */}
-          {(item.impact || item.category) && (
+          {item.impact && (
             <Box
-              flexDirection={BoxFlexDirection.Row}
-              alignItems={BoxAlignItems.Center}
-              twClassName="flex-wrap gap-2"
+              twClassName={`self-start rounded ${getImpactBackgroundClass(item.impact)} px-2 py-0.5`}
             >
-              {item.impact && (
-                <Box
-                  twClassName={`self-start rounded-full ${getImpactBackgroundClass(item.impact)} px-2 py-0.5`}
-                >
-                  <Text
-                    variant={TextVariant.BodyXs}
-                    color={getImpactTextColor(item.impact)}
-                    fontWeight={FontWeight.Medium}
-                  >
-                    {getImpactLabel(item.impact)}
-                  </Text>
-                </Box>
-              )}
-              {item.category && (
-                <Box twClassName="self-start rounded-full bg-background-default px-2 py-0.5">
-                  <Text
-                    variant={TextVariant.BodyXs}
-                    color={TextColor.TextAlternative}
-                    fontWeight={FontWeight.Medium}
-                  >
-                    {strings(
-                      `homepage.sections.whats_happening_categories.${item.category}`,
-                    )}
-                  </Text>
-                </Box>
-              )}
+              <Text
+                variant={TextVariant.BodyXs}
+                color={getImpactTextColor(item.impact)}
+                fontWeight={FontWeight.Medium}
+              >
+                {getImpactLabel(item.impact)}
+              </Text>
             </Box>
           )}
 
-          {/* Title */}
           <Text
             variant={TextVariant.BodyMd}
             fontWeight={FontWeight.Medium}
@@ -109,7 +102,6 @@ const WhatsHappeningCard: React.FC<WhatsHappeningCardProps> = ({
             {item.title}
           </Text>
 
-          {/* Description */}
           <Text
             variant={TextVariant.BodySm}
             color={TextColor.TextAlternative}
@@ -119,28 +111,42 @@ const WhatsHappeningCard: React.FC<WhatsHappeningCardProps> = ({
           </Text>
         </Box>
 
-        {/* Footer: asset pills + date */}
-        <Box gap={2}>
-          {item.relatedAssets.length > 0 && (
+        <Box
+          flexDirection={BoxFlexDirection.Row}
+          alignItems={BoxAlignItems.Center}
+          justifyContent={BoxJustifyContent.Between}
+          gap={2}
+        >
+          {assetLabel && (
             <Box
               flexDirection={BoxFlexDirection.Row}
               alignItems={BoxAlignItems.Center}
-              twClassName="flex-wrap gap-1"
+              gap={1}
+              twClassName="flex-shrink"
             >
-              {item.relatedAssets.map((asset) => (
-                <Box
-                  key={asset.sourceAssetId}
-                  twClassName="rounded-full bg-background-default px-2 py-0.5"
-                >
-                  <Text
-                    variant={TextVariant.BodyXs}
-                    color={TextColor.TextDefault}
-                    fontWeight={FontWeight.Medium}
-                  >
-                    {asset.symbol}
-                  </Text>
+              {visibleAssets.length > 0 && (
+                <Box flexDirection={BoxFlexDirection.Row}>
+                  {visibleAssets.map((asset, index) => (
+                    <Box
+                      key={asset.sourceAssetId}
+                      twClassName={index > 0 ? '-ml-1' : ''}
+                    >
+                      <PerpsTokenLogo
+                        symbol={asset.hlPerpsMarket?.[0] ?? asset.symbol}
+                        size={16}
+                      />
+                    </Box>
+                  ))}
                 </Box>
-              ))}
+              )}
+              <Text
+                variant={TextVariant.BodyXs}
+                color={TextColor.TextAlternative}
+                fontWeight={FontWeight.Medium}
+                numberOfLines={1}
+              >
+                {assetLabel}
+              </Text>
             </Box>
           )}
 
diff --git a/app/components/Views/Homepage/Sections/WhatsHappening/util/formatDate.ts b/app/components/Views/Homepage/Sections/WhatsHappening/util/formatDate.ts
