refactor(discover): adapt #7541 perp renderer to the cleaned contract + fixes

Restacked onto the cleaned #7540 and reconciled with the source-neutral
contract, then applied the perp cleanups and review fixes.

Cascade adaptation (compile against the new contract):
- Drop the analytics plumbing (DiscoverCardAnalyticsContext, the
  analyticsContext renderItem arg and card props); perp descriptors now match
  the generic (item, width) / (item) callbacks.
- Remove navigateDiscoverDestination; the perp "See All" header press uses
  onTapSearch() gated to perp-owned destinations, mirroring the token path.
  Non-perp CMS routing is deferred to the #7553 cutover.
- Stop setting onNavigate/pressMetadata on the perp MarketDisplayItem and drop
  the dead placement/surfaceId arguments to renderSectionLayout.

Perp-renderer fixes:
- Fix the perp price-change units. Perps store priceChange['24h'] with an
  extra /100 baked in (so a +5.23% move is "0.000523"), and the Hyperliquid
  live adapter feeds change24hPct from that same stored value. The old generic
  card multiplied by 10_000; #7539 removed that, so usePerpMarketDisplay now
  converts to percent via convertStoredPerpPriceChangeToPercent for the initial
  value, the live priceChangeSelector, and the pill-width input. Importing the
  perps util here is correct -- this is the perp source hook, not a generic card.
- Restore the forced token-ref cache bypass. The Hyperliquid refresh addition
  had dropped clearTokenRefCache() from the rainbow branch of
  refreshDiscoverSurface; without it a forced refresh within TOKEN_REFS_STALE_TIME
  serves stale token data and the helper is dead. Re-add the cache clear and
  keep the force-aware Hyperliquid refetch alongside it.

Keep perps_enabled fallback true and the token/perp renderers as separate
source-specific code (no consolidation), per plan.

Author: DanielSinclair

src/features/discover/components/MarketSection.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useMemo } from 'react';
 
 import { useDiscoverScreenContext } from '@/components/Discover/DiscoverScreenContext';
+import { type NativeCurrencyKey } from '@/entities/nativeCurrencyTypes';
 import { MarketCell, MarketCellSkeleton } from '@/features/discover/components/markets/cards/MarketCell';
 import {
   computeMarketPillWidth,
@@ -16,16 +17,14 @@ import {
 } from '@/features/discover/components/markets/cards/MarketTileCard';
 import { perpToMarketPillWidthInput, usePerpMarketDisplay } from '@/features/discover/components/markets/hooks/usePerpMarketDisplay';
 import { tokenToMarketPillWidthInput, useTokenMarketDisplay } from '@/features/discover/components/markets/hooks/useTokenMarketDisplay';
-import { getHeaderPress, renderSectionLayout } from '@/features/discover/components/SectionLayout';
+import { renderSectionLayout } from '@/features/discover/components/SectionLayout';
 import { type MarketDisplayItem } from '@/features/discover/types/marketDisplayItem';
 import {
-  type DiscoverCardAnalyticsContext,
   type MarketDisplay,
   type PlacementBackedSurfaceLeafWithDisplay,
   type SectionDescriptor,
   type SurfaceLeafWithDisplay,
 } from '@/features/discover/types/sectionLayout';
-import { navigateDiscoverDestination } from '@/features/discover/utils/navigation';
 import { usePerpsPlacement, type PerpMarketPlacementItem } from '@/features/placements/stores/derived/perpsPlacementStore';
 import { useTokensPlacement, type TokenPlacementItem } from '@/features/placements/stores/derived/tokensPlacementStore';
 import { usePlacementsV2Store } from '@/features/placements/stores/placementsStore';
@@ -105,10 +104,8 @@ function MarketPlacementContent({
       data: [],
       descriptor: MARKET_SECTION_DESCRIPTORS[surface.display],
       loading: true,
-      onPressSeeAll: getHeaderPress(surface.destination),
-      placement: undefined,
+      onPressSeeAll: undefined,
       surface,
-      surfaceId,
     });
   }
 
@@ -117,54 +114,48 @@ function MarketPlacementContent({
 
 function PerpsMarketPlacementContent({
   surface,
-  surfaceId,
 }: {
   surface: PlacementBackedSurfaceLeafWithDisplay<MarketDisplay>;
+  // surfaceId is threaded from MarketPlacementContent for future use (#7553)
   surfaceId: string;
 }) {
+  const { onTapSearch } = useDiscoverScreenContext();
   const perpsResult = usePerpsPlacement(surface.placement);
   const perpDescriptor = useMemo<SectionDescriptor<PerpMarketPlacementItem>>(() => {
     switch (surface.display) {
       case 'market_pill.carousel':
         return {
           ...MARKET_SECTION_DESCRIPTORS[surface.display],
           getItemWidth: (item: PerpMarketPlacementItem) => computeMarketPillWidth(perpToMarketPillWidthInput(item)),
-          renderItem: (item: PerpMarketPlacementItem, _: number, analyticsContext: DiscoverCardAnalyticsContext) => (
-            <PerpMarketItem analyticsContext={analyticsContext} item={item} variant="pill" />
-          ),
+          renderItem: (item: PerpMarketPlacementItem) => <PerpMarketItem item={item} variant="pill" />,
         };
       case 'market_tile.carousel':
         return {
           ...MARKET_SECTION_DESCRIPTORS[surface.display],
-          renderItem: (item: PerpMarketPlacementItem, _: number, analyticsContext: DiscoverCardAnalyticsContext) => (
-            <PerpMarketItem analyticsContext={analyticsContext} item={item} variant="tile" />
-          ),
+          renderItem: (item: PerpMarketPlacementItem) => <PerpMarketItem item={item} variant="tile" />,
         };
       case 'market_tile.grid':
         return {
           ...MARKET_SECTION_DESCRIPTORS[surface.display],
-          renderItem: (item: PerpMarketPlacementItem, width: number, analyticsContext: DiscoverCardAnalyticsContext) => (
-            <PerpMarketItem analyticsContext={analyticsContext} item={item} variant="tile" width={width} />
-          ),
+          renderItem: (item: PerpMarketPlacementItem, width: number) => <PerpMarketItem item={item} variant="tile" width={width} />,
         };
       case 'market_cell.list':
         return {
           ...MARKET_SECTION_DESCRIPTORS[surface.display],
-          renderItem: (item: PerpMarketPlacementItem, analyticsContext: DiscoverCardAnalyticsContext) => (
-            <PerpMarketItem analyticsContext={analyticsContext} item={item} variant="cell" />
-          ),
+          renderItem: (item: PerpMarketPlacementItem) => <PerpMarketItem item={item} variant="cell" />,
         };
     }
   }, [surface.display]);
+  // Only passed when the destination is perp-owned (`['perps']`); non-perp CMS
+  // destinations are wired in #7553.
+  const onPressSeeAll = useCallback(() => onTapSearch(), [onTapSearch]);
 
   return renderSectionLayout({
     data: perpsResult.items,
     descriptor: perpDescriptor,
     loading: perpsResult.isLoading,
-    onPressSeeAll: getHeaderPress(surface.destination),
-    placement: perpsResult.placement,
+    onPressSeeAll: surface.destination?.[0] === 'perps' ? onPressSeeAll : undefined,
     surface,
-    surfaceId,
   });
 }
 
@@ -184,120 +175,96 @@ function TokenMarketPlacementContent({
         return {
           ...MARKET_SECTION_DESCRIPTORS[surface.display],
           getItemWidth: (item: TokenPlacementItem) => computeMarketPillWidth(tokenToMarketPillWidthInput({ item, nativeCurrency })),
-          renderItem: (item: TokenPlacementItem, _: number, analyticsContext: DiscoverCardAnalyticsContext) => (
-            <TokenMarketItem analyticsContext={analyticsContext} item={item} nativeCurrency={nativeCurrency} variant="pill" />
-          ),
+          renderItem: (item: TokenPlacementItem) => <TokenMarketItem item={item} nativeCurrency={nativeCurrency} variant="pill" />,
         };
       case 'market_tile.carousel':
         return {
           ...MARKET_SECTION_DESCRIPTORS[surface.display],
-          renderItem: (item: TokenPlacementItem, _: number, analyticsContext: DiscoverCardAnalyticsContext) => (
-            <TokenMarketItem analyticsContext={analyticsContext} item={item} nativeCurrency={nativeCurrency} variant="tile" />
-          ),
+          renderItem: (item: TokenPlacementItem) => <TokenMarketItem item={item} nativeCurrency={nativeCurrency} variant="tile" />,
         };
       case 'market_tile.grid':
         return {
           ...MARKET_SECTION_DESCRIPTORS[surface.display],
-          renderItem: (item: TokenPlacementItem, width: number, analyticsContext: DiscoverCardAnalyticsContext) => (
-            <TokenMarketItem analyticsContext={analyticsContext} item={item} nativeCurrency={nativeCurrency} variant="tile" width={width} />
+          renderItem: (item: TokenPlacementItem, width: number) => (
+            <TokenMarketItem item={item} nativeCurrency={nativeCurrency} variant="tile" width={width} />
           ),
         };
       case 'market_cell.list':
         return {
           ...MARKET_SECTION_DESCRIPTORS[surface.display],
-          renderItem: (item: TokenPlacementItem, analyticsContext: DiscoverCardAnalyticsContext) => (
-            <TokenMarketItem analyticsContext={analyticsContext} item={item} nativeCurrency={nativeCurrency} variant="cell" />
-          ),
+          renderItem: (item: TokenPlacementItem) => <TokenMarketItem item={item} nativeCurrency={nativeCurrency} variant="cell" />,
         };
     }
   }, [nativeCurrency, surface.display]);
-  const onPressSeeAll = useCallback(() => {
-    if (surface.destination?.[0] === 'tokens') {
-      onTapSearch();
-      return;
-    }
-    navigateDiscoverDestination(surface.destination);
-  }, [onTapSearch, surface.destination]);
+  // Only passed when the destination is token-owned (`['tokens']`); non-token CMS
+  // destinations are wired in #7553.
+  const onPressSeeAll = useCallback(() => onTapSearch(), [onTapSearch]);
 
   return renderSectionLayout({
     data: tokensResult.items,
     descriptor: tokenDescriptor,
     loading: tokensResult.isLoading,
-    onPressSeeAll: surface.destination ? onPressSeeAll : undefined,
-    placement: tokensResult.placement,
+    onPressSeeAll: surface.destination?.[0] === 'tokens' ? onPressSeeAll : undefined,
     surface,
-    surfaceId,
   });
 }
 
 function hasPlacement(surface: SurfaceLeafWithDisplay<MarketDisplay>): surface is PlacementBackedSurfaceLeafWithDisplay<MarketDisplay> {
   return typeof surface.placement === 'string' && surface.placement.length > 0;
 }
 
-function renderMarketPill(item: MarketDisplayItem, _: number, analyticsContext: DiscoverCardAnalyticsContext) {
-  return <MarketPill analyticsContext={analyticsContext} item={item} />;
+function renderMarketPill(item: MarketDisplayItem) {
+  return <MarketPill item={item} />;
 }
 
-function renderMarketTile(item: MarketDisplayItem, _: number, analyticsContext: DiscoverCardAnalyticsContext) {
-  return <MarketTileCard analyticsContext={analyticsContext} item={item} />;
+function renderMarketTile(item: MarketDisplayItem) {
+  return <MarketTileCard item={item} />;
 }
 
-function renderMarketGridTile(item: MarketDisplayItem, width: number, analyticsContext: DiscoverCardAnalyticsContext) {
-  return <MarketTileCard analyticsContext={analyticsContext} item={item} width={width} />;
+function renderMarketGridTile(item: MarketDisplayItem, width: number) {
+  return <MarketTileCard item={item} width={width} />;
 }
 
 function renderMarketGridTileSkeleton(width: number) {
   return <MarketTileCardSkeleton width={width} />;
 }
 
-function renderMarketCell(item: MarketDisplayItem, analyticsContext: DiscoverCardAnalyticsContext) {
-  return <MarketCell analyticsContext={analyticsContext} item={item} />;
+function renderMarketCell(item: MarketDisplayItem) {
+  return <MarketCell item={item} />;
 }
 
 function TokenMarketItem({
-  analyticsContext,
   item,
   nativeCurrency,
   variant,
   width,
 }: {
-  analyticsContext: DiscoverCardAnalyticsContext;
   item: TokenPlacementItem;
-  nativeCurrency: ReturnType<typeof userAssetsStoreManager.getState>['currency'];
+  nativeCurrency: NativeCurrencyKey;
   variant: 'cell' | 'pill' | 'tile';
   width?: number;
 }) {
   const displayItem = useTokenMarketDisplay({ item, nativeCurrency });
 
   switch (variant) {
     case 'cell':
-      return <MarketCell analyticsContext={analyticsContext} item={displayItem} />;
+      return <MarketCell item={displayItem} />;
     case 'pill':
-      return <MarketPill analyticsContext={analyticsContext} item={displayItem} />;
+      return <MarketPill item={displayItem} />;
     case 'tile':
-      return <MarketTileCard analyticsContext={analyticsContext} item={displayItem} width={width} />;
+      return <MarketTileCard item={displayItem} width={width} />;
   }
 }
 
-function PerpMarketItem({
-  analyticsContext,
-  item,
-  variant,
-  width,
-}: {
-  analyticsContext: DiscoverCardAnalyticsContext;
-  item: PerpMarketPlacementItem;
-  variant: 'cell' | 'pill' | 'tile';
-  width?: number;
-}) {
+function PerpMarketItem({ item, variant, width }: { item: PerpMarketPlacementItem; variant: 'cell' | 'pill' | 'tile'; width?: number }) {
   const displayItem = usePerpMarketDisplay(item);
 
   switch (variant) {
     case 'cell':
-      return <MarketCell analyticsContext={analyticsContext} item={displayItem} />;
+      return <MarketCell item={displayItem} />;
     case 'pill':
-      return <MarketPill analyticsContext={analyticsContext} item={displayItem} />;
+      return <MarketPill item={displayItem} />;
     case 'tile':
-      return <MarketTileCard analyticsContext={analyticsContext} item={displayItem} width={width} />;
+      return <MarketTileCard item={displayItem} width={width} />;
   }
 }

src/features/discover/components/markets/hooks/usePerpMarketDisplay.ts

@@ -6,7 +6,7 @@ import { type MarketDisplayItem } from '@/features/discover/types/marketDisplayI
 import { HYPERLIQUID_COLORS } from '@/features/perps/constants';
 import { useHyperliquidLineChartsStore } from '@/features/perps/stores/hyperliquidLineChartsStore';
 import { type PerpMarketWithMetadata } from '@/features/perps/types';
-import { getHyperliquidTokenId, navigateToPerpDetailScreen } from '@/features/perps/utils';
+import { convertStoredPerpPriceChangeToPercent, getHyperliquidTokenId } from '@/features/perps/utils';
 import { formatPerpAssetPrice } from '@/features/perps/utils/formatPerpsAssetPrice';
 import { type PerpMarketPlacementItem } from '@/features/placements/stores/derived/perpsPlacementStore';
 import { getPriceChangeColor, getPriceChangeColors } from '@/framework/ui/price/usePriceChangeColors';
@@ -22,12 +22,19 @@ const MARKET_CHART_PRICE_CHANGE_COLORS = {
  * Builds the {@link MarketDisplayItem} for a perp market placement item, memoizing
  * the result. The perp analogue of {@link useTokenMarketDisplay}; charts are fetched
  * by `market.symbol` with no metadata gating.
+ *
+ * Perps store `market.priceChange['24h']` with an extra /100 baked in by
+ * `calculatePerpPriceChange24h`, so a +5.23% move is stored as `"0.000523"`.
+ * The shared card contract requires percent units (`"5.23"` == 5.23%), so this
+ * source hook converts via `convertStoredPerpPriceChangeToPercent` (× 10_000)
+ * before populating `initialPriceChange` and `priceChangeSelector`.
  */
 export function usePerpMarketDisplay(item: PerpMarketPlacementItem): MarketDisplayItem {
   return useMemo<MarketDisplayItem>(() => {
     const { market } = item;
     const displayName = market.baseSymbol;
-    const initialPriceChange = market.priceChange['24h'];
+    // Convert fractional stored value → percent units for the shared card contract.
+    const initialPriceChange = String(convertStoredPerpPriceChangeToPercent(market.priceChange['24h']));
 
     return {
       id: item.id,
@@ -41,13 +48,8 @@ export function usePerpMarketDisplay(item: PerpMarketPlacementItem): MarketDispl
       initialPriceChange,
       leverage: market.maxLeverage,
       liveTokenId: getHyperliquidTokenId(market.symbol),
-      onNavigate: () => navigateToPerpDetailScreen(market.symbol),
-      pressMetadata: {
-        marketId: market.symbol,
-        marketName: market.metadata?.name ?? displayName,
-        marketSymbol: displayName,
-      },
-      priceChangeSelector: token => token.change.change24hPct,
+      // Live price-change: convert fraction → percent, matching the stored-value contract.
+      priceChangeSelector: token => String(convertStoredPerpPriceChangeToPercent(token.change.change24hPct)),
       priceSelector: token => formatPerpAssetPrice(token.midPrice ?? token.price),
     };
   }, [item]);
@@ -58,7 +60,8 @@ export function perpToMarketPillWidthInput(item: PerpMarketPlacementItem): Marke
   return {
     displayName: market.baseSymbol,
     initialPrice: formatPerpAssetPrice(market.midPrice ?? market.price),
-    initialPriceChange: market.priceChange['24h'],
+    // Convert to percent so pill-width calculation matches the displayed value.
+    initialPriceChange: String(convertStoredPerpPriceChangeToPercent(market.priceChange['24h'])),
   };
 }
 

src/features/discover/utils/refreshDiscoverSurface.ts

@@ -1,6 +1,6 @@
 import { IS_TEST } from '@/env';
 import { useHyperliquidMarketsStore } from '@/features/perps/stores/hyperliquidMarketsStore';
-import { useTokenRefsStore } from '@/features/placements/stores/derived/tokensPlacementStore';
+import { clearTokenRefCache, useTokenRefsStore } from '@/features/placements/stores/derived/tokensPlacementStore';
 import { usePlacementsV2Store } from '@/features/placements/stores/placementsStore';
 import { useDiscoverSurfacePlacementRefs } from '@/features/placements/surfaces/stores/discoverSurfaceStore';
 import { getSurfaceStore } from '@/features/placements/surfaces/stores/surfaceStore';
@@ -22,6 +22,9 @@ export async function refreshDiscoverSurface(surfaceId: string): Promise<void> {
   }
 
   if (refs.rainbow.length) {
+    // Clear the module-level token-ref cache so a forced refresh always fetches
+    // fresh token data from the network, even within TOKEN_REFS_STALE_TIME.
+    clearTokenRefCache();
     refreshes.push(useTokenRefsStore.getState().fetch(undefined, { force: true }));
   }