chore: conditional trade button

Author: zone-live

app/components/Views/WhatsHappeningDetailView/components/AssetRow.test.tsx

@@ -59,6 +59,12 @@ describe('AssetRow', () => {
     expect(screen.getByText('UNK')).toBeOnTheScreen();
   });
 
+  it('does not render an action button when onAction is omitted', () => {
+    renderWithProvider(<AssetRow asset={btcAsset} />);
+    expect(screen.queryByText('Buy')).toBeNull();
+    expect(screen.queryByText('Trade')).toBeNull();
+  });
+
   it('renders the action button with the provided label', () => {
     renderWithProvider(
       <AssetRow

app/components/Views/WhatsHappeningDetailView/components/AssetRow.tsx

@@ -27,9 +27,9 @@ export interface AssetRowSecondaryLine {
 
 interface AssetRowProps {
   asset: RelatedAsset;
-  actionLabel: string;
-  accessibilityLabel: string;
-  onAction: () => void;
+  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. */
@@ -38,7 +38,7 @@ interface AssetRowProps {
 
 /**
  * Shared layout for a single asset row (logo + name + optional badge + optional
- * price/change + action button). Used by PerpsRow (Trade).
+ * price/change + optional action button). Used by PerpsRow (Trade when tradable).
  */
 const AssetRow: React.FC<AssetRowProps> = ({
   asset,
@@ -123,14 +123,16 @@ const AssetRow: React.FC<AssetRowProps> = ({
           )}
         </Box>
 
-        <Button
-          variant={ButtonVariant.Secondary}
-          size={ButtonSize.Md}
-          onPress={onAction}
-          accessibilityLabel={accessibilityLabel}
-        >
-          {actionLabel}
-        </Button>
+        {onAction && actionLabel && accessibilityLabel ? (
+          <Button
+            variant={ButtonVariant.Secondary}
+            size={ButtonSize.Md}
+            onPress={onAction}
+            accessibilityLabel={accessibilityLabel}
+          >
+            {actionLabel}
+          </Button>
+        ) : null}
       </Box>
     </Box>
   );

app/components/Views/WhatsHappeningDetailView/components/PerpsRow.test.tsx

@@ -143,7 +143,7 @@ describe('PerpsRow', () => {
     });
   });
 
-  it('does not navigate when hlPerpsMarket is empty', () => {
+  it('does not render Trade when hlPerpsMarket is empty', () => {
     const assetNoPerps: RelatedAsset = {
       ...perpsOnlyAsset,
       hlPerpsMarket: [],
@@ -156,8 +156,9 @@ describe('PerpsRow', () => {
         perpsPriceBySymbol={emptyPriceMap}
       />,
     );
-    fireEvent.press(screen.getByText('Trade'));
+    expect(screen.queryByText('Trade')).toBeNull();
     expect(mockNavigate).not.toHaveBeenCalled();
+    expect(mockCreateEventBuilder).not.toHaveBeenCalled();
   });
 
   it('tracks Whats Happening Interaction on Trade press', () => {
@@ -189,23 +190,6 @@ describe('PerpsRow', () => {
     );
   });
 
-  it('does not track Interaction when hlPerpsMarket is empty', () => {
-    const assetNoPerps: RelatedAsset = {
-      ...perpsOnlyAsset,
-      hlPerpsMarket: [],
-    };
-    renderWithProvider(
-      <PerpsRow
-        asset={assetNoPerps}
-        item={mockItem}
-        cardIndex={0}
-        perpsPriceBySymbol={emptyPriceMap}
-      />,
-    );
-    fireEvent.press(screen.getByText('Trade'));
-    expect(mockCreateEventBuilder).not.toHaveBeenCalled();
-  });
-
   it('displays price and 24h change from perpsPriceBySymbol', () => {
     const priceMap: Record<string, PerpsPriceEntry> = {
       'xyz:TSLA': { price: 172.5, percentChange24h: 3.45 },

app/components/Views/WhatsHappeningDetailView/components/PerpsRow.tsx

@@ -26,7 +26,8 @@ interface PerpsRowProps {
 /**
  * A single row for a perps asset in the expanded What's Happening card.
  * Shows logo, name, optional verified badge (for assets that also have caip19),
- * live price/change, and a Trade button.
+ * live price/change when `hlPerpsMarket` is set, and a Trade button only when a
+ * perps market symbol exists.
  */
 const PerpsRow: React.FC<PerpsRowProps> = ({
   asset,
@@ -70,14 +71,17 @@ const PerpsRow: React.FC<PerpsRowProps> = ({
   }, [asset.hlPerpsMarket, perpsPriceBySymbol]);
 
   const handleTradeWithTracking = useCallback(() => {
-    if (!asset.hlPerpsMarket?.[0]) return;
+    const perpsMarket = asset.hlPerpsMarket?.[0];
+    if (!perpsMarket) {
+      return;
+    }
     trackEvent(
       createEventBuilder(MetaMetricsEvents.WHATS_HAPPENING_INTERACTION)
         .addProperties({
           ...getWhatsHappeningEventProps(item, cardIndex),
           interaction_type: WhatsHappeningInteractionType.TradePressed,
           asset_symbol: asset.symbol,
-          perps_market: asset.hlPerpsMarket?.[0],
+          perps_market: perpsMarket,
         })
         .build(),
     );
@@ -92,12 +96,18 @@ const PerpsRow: React.FC<PerpsRowProps> = ({
     createEventBuilder,
   ]);
 
+  const perpsMarketSymbol = asset.hlPerpsMarket?.[0];
+
   return (
     <AssetRow
       asset={asset}
-      actionLabel={strings('bottom_nav.trade')}
-      accessibilityLabel={`${strings('bottom_nav.trade')} ${asset.symbol}`}
-      onAction={handleTradeWithTracking}
+      actionLabel={perpsMarketSymbol ? strings('bottom_nav.trade') : undefined}
+      accessibilityLabel={
+        perpsMarketSymbol
+          ? `${strings('bottom_nav.trade')} ${asset.symbol}`
+          : undefined
+      }
+      onAction={perpsMarketSymbol ? handleTradeWithTracking : undefined}
       caipAssetId={caipAssetId}
       secondaryLine={secondaryLine}
     />