chore: update based on feedback review

zone-live · zone-live · commit 36e18219fed2 · 2026-05-08T16:53:51.000+01:00
diff --git a/app/components/Views/WhatsHappeningDetailView/components/AssetRow.test.tsx b/app/components/Views/WhatsHappeningDetailView/components/AssetRow.test.tsx
@@ -9,11 +9,6 @@ jest.mock('../utils/getRelatedAssetImageSource', () => ({
   getRelatedAssetImageSource: jest.fn(() => undefined),
 }));
 
-jest.mock(
-  '../../../UI/Tokens/components/TokenListSecurityBadge/TokenListSecurityBadge',
-  () => 'TokenListSecurityBadge',
-);
-
 const btcAsset: RelatedAsset = {
   sourceAssetId: 'bitcoin',
   symbol: 'BTC',
@@ -90,41 +85,6 @@ describe('AssetRow', () => {
     expect(onAction).toHaveBeenCalledTimes(1);
   });
 
-  it('renders the TokenListSecurityBadge when caipAssetId is provided', () => {
-    renderWithProvider(
-      <AssetRow
-        asset={btcAsset}
-        actionLabel="Buy"
-        accessibilityLabel="Buy BTC"
-        onAction={onAction}
-        caipAssetId="eip155:1/slip44:0"
-      />,
-    );
-    expect(screen.getByTestId !== undefined).toBeTruthy();
-    // The mocked component renders as 'TokenListSecurityBadge' native element
-    const badge = screen.UNSAFE_getByType(
-      'TokenListSecurityBadge' as unknown as React.ComponentType,
-    );
-    expect(badge).toBeTruthy();
-    expect(badge.props.caipAssetId).toBe('eip155:1/slip44:0');
-  });
-
-  it('does not render the security badge when caipAssetId is not provided', () => {
-    renderWithProvider(
-      <AssetRow
-        asset={btcAsset}
-        actionLabel="Buy"
-        accessibilityLabel="Buy BTC"
-        onAction={onAction}
-      />,
-    );
-    expect(
-      screen.UNSAFE_queryByType(
-        'TokenListSecurityBadge' as unknown as React.ComponentType,
-      ),
-    ).toBeNull();
-  });
-
   it('renders the price secondary line when secondaryLine is provided', () => {
     renderWithProvider(
       <AssetRow
diff --git a/app/components/Views/WhatsHappeningDetailView/components/AssetRow.tsx b/app/components/Views/WhatsHappeningDetailView/components/AssetRow.tsx
@@ -15,9 +15,7 @@ import {
   TextVariant,
 } from '@metamask/design-system-react-native';
 import type { RelatedAsset } from '@metamask/ai-controllers';
-import type { CaipAssetType } from '@metamask/utils';
 import { getRelatedAssetImageSource } from '../utils/getRelatedAssetImageSource';
-import TokenListSecurityBadge from '../../../UI/Tokens/components/TokenListSecurityBadge/TokenListSecurityBadge';
 
 export interface AssetRowSecondaryLine {
   priceText: string;
@@ -30,8 +28,6 @@ interface AssetRowProps {
   actionLabel?: string;
   accessibilityLabel?: string;
   onAction?: () => void;
-  /** When provided, renders the security badge inline next to the asset name. */
-  caipAssetId?: CaipAssetType;
   /** When provided, renders price + 24h change below the asset name. */
   secondaryLine?: AssetRowSecondaryLine;
 }
@@ -45,7 +41,6 @@ const AssetRow: React.FC<AssetRowProps> = ({
   actionLabel,
   accessibilityLabel,
   onAction,
-  caipAssetId,
   secondaryLine,
 }) => {
   const rawImageSource = getRelatedAssetImageSource(asset);
@@ -74,23 +69,14 @@ const AssetRow: React.FC<AssetRowProps> = ({
       >
         {/* Left: name + optional badge + optional price/change */}
         <Box twClassName="flex-1 mr-2">
-          <Box
-            flexDirection={BoxFlexDirection.Row}
-            alignItems={BoxAlignItems.Center}
-            gap={1}
+          <Text
+            variant={TextVariant.BodyMd}
+            fontWeight={FontWeight.Medium}
+            color={TextColor.TextDefault}
+            numberOfLines={1}
           >
-            <Text
-              variant={TextVariant.BodyMd}
-              fontWeight={FontWeight.Medium}
-              color={TextColor.TextDefault}
-              numberOfLines={1}
-            >
-              {asset.name || asset.symbol}
-            </Text>
-            {caipAssetId && (
-              <TokenListSecurityBadge caipAssetId={caipAssetId} />
-            )}
-          </Box>
+            {asset.name || asset.symbol}
+          </Text>
 
           {secondaryLine && (
             <Box
diff --git a/app/components/Views/WhatsHappeningDetailView/components/PerpsRow.test.tsx b/app/components/Views/WhatsHappeningDetailView/components/PerpsRow.test.tsx
@@ -36,18 +36,6 @@ jest.mock('../../../hooks/useAnalytics/useAnalytics', () => ({
   }),
 }));
 
-jest.mock(
-  '../../../UI/Tokens/components/TokenListSecurityBadge/TokenListSecurityBadge',
-  () => 'TokenListSecurityBadge',
-);
-
-jest.mock(
-  '../../../../selectors/featureFlagController/tokenListSecurityBadges',
-  () => ({
-    selectTokenListSecurityBadgesEnabled: jest.fn(() => true),
-  }),
-);
-
 const perpsOnlyAsset: RelatedAsset = {
   sourceAssetId: 'tsla',
   symbol: 'TSLA',
@@ -56,15 +44,6 @@ const perpsOnlyAsset: RelatedAsset = {
   hlPerpsMarket: ['xyz:TSLA'],
 };
 
-/** Asset that has both a perps market AND a caip19 id — eligible for badge */
-const dualAsset: RelatedAsset = {
-  sourceAssetId: 'bitcoin',
-  symbol: 'BTC',
-  name: 'Bitcoin',
-  caip19: ['eip155:1/slip44:0'],
-  hlPerpsMarket: ['BTC'],
-};
-
 const mockItem: WhatsHappeningItem = {
   id: 'trend-3',
   title: 'TSLA earnings',
@@ -125,10 +104,14 @@ describe('PerpsRow', () => {
     });
   });
 
-  it('uses first hlPerpsMarket entry as the market symbol', () => {
+  it('uses first hlPerpsMarket entry as the market symbol when multiple are present', () => {
+    const multiMarketAsset: RelatedAsset = {
+      ...perpsOnlyAsset,
+      hlPerpsMarket: ['FIRST-MARKET', 'SECOND-MARKET'],
+    };
     renderWithProvider(
       <PerpsRow
-        asset={dualAsset}
+        asset={multiMarketAsset}
         item={mockItem}
         cardIndex={0}
         perpsPriceBySymbol={emptyPriceMap}
@@ -138,7 +121,7 @@ describe('PerpsRow', () => {
     expect(mockNavigate).toHaveBeenCalledWith(Routes.PERPS.ROOT, {
       screen: Routes.PERPS.MARKET_DETAILS,
       params: expect.objectContaining({
-        market: { symbol: 'BTC', name: 'Bitcoin' },
+        market: { symbol: 'FIRST-MARKET', name: 'Tesla' },
       }),
     });
   });
@@ -217,69 +200,4 @@ describe('PerpsRow', () => {
     );
     expect(screen.queryByText('$')).toBeNull();
   });
-
-  describe('verified badge gating', () => {
-    it('renders TokenListSecurityBadge when asset has caip19 and feature flags are enabled', () => {
-      renderWithProvider(
-        <PerpsRow
-          asset={dualAsset}
-          item={mockItem}
-          cardIndex={0}
-          perpsPriceBySymbol={emptyPriceMap}
-        />,
-        {
-          state: {
-            settings: { basicFunctionalityEnabled: true },
-          },
-        },
-      );
-      const badge = screen.UNSAFE_getByType(
-        'TokenListSecurityBadge' as unknown as React.ComponentType,
-      );
-      expect(badge).toBeTruthy();
-      expect(badge.props.caipAssetId).toBe('eip155:1/slip44:0');
-    });
-
-    it('does not render TokenListSecurityBadge when basicFunctionalityEnabled is false', () => {
-      renderWithProvider(
-        <PerpsRow
-          asset={dualAsset}
-          item={mockItem}
-          cardIndex={0}
-          perpsPriceBySymbol={emptyPriceMap}
-        />,
-        {
-          state: {
-            settings: { basicFunctionalityEnabled: false },
-          },
-        },
-      );
-      expect(
-        screen.UNSAFE_queryByType(
-          'TokenListSecurityBadge' as unknown as React.ComponentType,
-        ),
-      ).toBeNull();
-    });
-
-    it('does not render TokenListSecurityBadge for a perps-only asset (no caip19)', () => {
-      renderWithProvider(
-        <PerpsRow
-          asset={perpsOnlyAsset}
-          item={mockItem}
-          cardIndex={0}
-          perpsPriceBySymbol={emptyPriceMap}
-        />,
-        {
-          state: {
-            settings: { basicFunctionalityEnabled: true },
-          },
-        },
-      );
-      expect(
-        screen.UNSAFE_queryByType(
-          'TokenListSecurityBadge' as unknown as React.ComponentType,
-        ),
-      ).toBeNull();
-    });
-  });
 });
diff --git a/app/components/Views/WhatsHappeningDetailView/components/PerpsRow.tsx b/app/components/Views/WhatsHappeningDetailView/components/PerpsRow.tsx
@@ -1,6 +1,4 @@
 import React, { useCallback, useMemo } from 'react';
-import { useSelector } from 'react-redux';
-import type { CaipAssetType } from '@metamask/utils';
 import type { RelatedAsset } from '@metamask/ai-controllers';
 import { strings } from '../../../../../locales/i18n';
 import { MetaMetricsEvents } from '../../../../core/Analytics';
@@ -9,11 +7,9 @@ import { WhatsHappeningInteractionType } from '../../Homepage/Sections/WhatsHapp
 import { getWhatsHappeningEventProps } from '../../Homepage/Sections/WhatsHappening/eventProperties';
 import type { WhatsHappeningItem } from '../../Homepage/Sections/WhatsHappening/types';
 import { formatAssetPrice } from '../utils/formatAssetPrice';
-import { selectTokenListSecurityBadgesEnabled } from '../../../../selectors/featureFlagController/tokenListSecurityBadges';
 import type { PerpsPriceEntry } from '../hooks/useWhatsHappeningAssetPrices';
 import AssetRow from './AssetRow';
 import useTradeNavigation from '../hooks/useTradeNavigation';
-import type { RootState } from '../../../../reducers';
 
 interface PerpsRowProps {
   asset: RelatedAsset;
@@ -37,29 +33,6 @@ const PerpsRow: React.FC<PerpsRowProps> = ({
 }) => {
   const { handleTrade } = useTradeNavigation(asset);
   const { trackEvent, createEventBuilder } = useAnalytics();
-  const isTokenListSecurityBadgesEnabled = useSelector(
-    selectTokenListSecurityBadgesEnabled,
-  );
-  const basicFunctionalityEnabled = useSelector(
-    (state: RootState) => state.settings.basicFunctionalityEnabled,
-  );
-
-  // Show verified badge for assets that also have a caip19 identifier
-  const caipAssetId = useMemo(() => {
-    const firstCaip = asset.caip19?.[0];
-    if (
-      !firstCaip ||
-      !basicFunctionalityEnabled ||
-      !isTokenListSecurityBadgesEnabled
-    ) {
-      return undefined;
-    }
-    return firstCaip as CaipAssetType;
-  }, [
-    asset.caip19,
-    basicFunctionalityEnabled,
-    isTokenListSecurityBadgesEnabled,
-  ]);
 
   // Perps prices are always quoted in USD
   const secondaryLine = useMemo(() => {
@@ -108,7 +81,6 @@ const PerpsRow: React.FC<PerpsRowProps> = ({
           : undefined
       }
       onAction={perpsMarketSymbol ? handleTradeWithTracking : undefined}
-      caipAssetId={caipAssetId}
       secondaryLine={secondaryLine}
     />
   );
diff --git a/app/components/Views/WhatsHappeningDetailView/utils/formatAssetPrice.test.ts b/app/components/Views/WhatsHappeningDetailView/utils/formatAssetPrice.test.ts
@@ -1,32 +1,5 @@
 import { TextColor } from '@metamask/design-system-react-native';
-import {
-  formatPrice,
-  formatPercentageChange,
-  formatAssetPrice,
-} from './formatAssetPrice';
-
-describe('formatPrice', () => {
-  it('formats a USD price with 2 decimal places', () => {
-    expect(formatPrice(1.0, 'USD')).toBe('$1.00');
-  });
-
-  it('formats a large USD price with comma separators', () => {
-    const result = formatPrice(95000, 'USD');
-    expect(result).toBe('$95,000.00');
-  });
-
-  it('handles fractional cents', () => {
-    const result = formatPrice(0.9998, 'USD');
-    expect(result).toBe('$1.00');
-  });
-
-  it('falls back to plain format for invalid currency codes', () => {
-    const result = formatPrice(100, 'INVALID_CURRENCY_XYZ');
-    // Should not throw; returns a fallback string
-    expect(result).toBeTruthy();
-    expect(result).toContain('100');
-  });
-});
+import { formatPercentageChange, formatAssetPrice } from './formatAssetPrice';
 
 describe('formatPercentageChange', () => {
   it('returns dash text and alternative color when change is undefined', () => {
diff --git a/app/components/Views/WhatsHappeningDetailView/utils/formatAssetPrice.ts b/app/components/Views/WhatsHappeningDetailView/utils/formatAssetPrice.ts
@@ -1,32 +1,12 @@
 import { TextColor } from '@metamask/design-system-react-native';
+import { formatPerpsFiat } from '@metamask/perps-controller';
 
 export interface FormattedAssetPrice {
   priceText: string;
   changeText: string | undefined;
   changeColor: TextColor;
 }
 
-/**
- * Formats a fiat price for display. Mirrors the logic used in `PopularTokenRow`
- * and `TokenListItem` — fixed 2 decimal places with currency symbol.
- */
-export function formatPrice(
-  price: number,
-  currency: string | undefined,
-): string {
-  const safeCurrency = currency?.toUpperCase() || 'USD';
-  try {
-    return new Intl.NumberFormat(undefined, {
-      style: 'currency',
-      currency: safeCurrency,
-      minimumFractionDigits: 2,
-      maximumFractionDigits: 2,
-    }).format(price);
-  } catch {
-    return `${safeCurrency} ${price.toFixed(2)}`;
-  }
-}
-
 /**
  * Returns the text and color for a 24h percentage change value.
  * Positive → success green, negative → error red, zero/undefined → muted.
@@ -64,7 +44,10 @@ export function formatAssetPrice(
 ): FormattedAssetPrice {
   const priceText =
     price !== undefined && price !== null && Number.isFinite(price)
-      ? formatPrice(price, currency)
+      ? formatPerpsFiat(price, {
+          currency: currency ?? 'USD',
+          stripTrailingZeros: false,
+        })
       : '—';
 
   const { text: changeText, color: changeColor } =
