chore: reuse date utility

Author: joaosantos15

app/components/Views/Homepage/Sections/WhatsHappening/components/WhatsHappeningCard.test.tsx

@@ -45,7 +45,7 @@ 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: new Date(Date.now() - 4 * 24 * 60 * 60 * 1000).toISOString(),
+  date: new Date(new Date().getTime() - 4 * 24 * 60 * 60 * 1000).toISOString(),
   category: 'macro',
   impact: 'positive',
   relatedAssets: [mockRelatedAsset],
@@ -129,9 +129,9 @@ describe('WhatsHappeningCard', () => {
     expect(screen.queryByText('BTC')).toBeNull();
   });
 
-  it('renders compact relative time when date is valid', () => {
+  it('renders relative time when date is valid', () => {
     renderWithProvider(<WhatsHappeningCard item={baseItem} cardIndex={0} />);
-    expect(screen.getByText('4d')).toBeOnTheScreen();
+    expect(screen.getByText('4d ago')).toBeOnTheScreen();
   });
 
   it('does not render date when date string is invalid', () => {

app/components/Views/Homepage/Sections/WhatsHappening/components/WhatsHappeningCard.tsx

@@ -12,7 +12,6 @@ import {
   BoxJustifyContent,
 } from '@metamask/design-system-react-native';
 import type { WhatsHappeningItem } from '../types';
-import { formatShortRelative } from '../util/formatDate';
 import {
   getImpactLabel,
   getImpactBackgroundClass,
@@ -22,6 +21,7 @@ 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 {
@@ -39,7 +39,8 @@ const WhatsHappeningCard: React.FC<WhatsHappeningCardProps> = ({
 }) => {
   const tw = useTailwind();
   const formattedDate = useMemo(
-    () => formatShortRelative(item.date),
+    () =>
+      item.date ? formatRelativeTime(item.date, { nowLabel: 'now' }) : null,
     [item.date],
   );
   const { trackEvent, createEventBuilder } = useAnalytics();