feat(discover-v2): add featured perps markets carousel by DanielSinclair · Pull Request #7418 · rainbow-me/rainbow

DanielSinclair · 2026-04-30T08:42:59Z

APP-3530, APP-3670

What changed

useDiscoverPlacements — composition store subscribing to usePlacementsStore and useHyperliquidMarketsStore; produces a filtered PlacementItem[] where only items with a loaded HyperliquidMarket are included, preventing broken cards before market data arrives
PerpMarketCard — displays HyperliquidMarket.baseSymbol, leverage badge from HyperliquidMarket.maxLeverage, and H1 percentChange (number) from useCandlestickStore; card width is computed dynamically from symbol character length via computePerpCardWidth
Deep-link navigation required three changes: PerpsNavigator now reads initialPerpsPage from route params via useStableValue to land directly on any page; navigateToPerpsSearch calls PerpsNavigation.navigate first (handles the already-open case) then triggers the app-level navigate; SheetFooter removes an InteractionManager delay that was blocking immediate Open Position response

Screen recordings / screenshots

What to test

Discover shows Perps carousel with cards for each enabled placement item
Tap a card → perp detail sheet opens for that market
Tap "See all" → Perps search screen opens directly
Open Position on the detail sheet responds without delay

DanielSinclair · 2026-04-30T08:51:20Z

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

This stack of pull requests is managed by Graphite. Learn more about stacking.

github-actions · 2026-04-30T09:44:17Z

Launch in simulator or device for e84f1db

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 637a37a1cd

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

chatgpt-codex-connector · 2026-04-30T11:22:09Z

-  const showPredictionsPlacement = availability.predictions && isLoading;
-  const showPlacements = showPerpsPlacement || showPredictionsPlacement;
+  const perpsPlacement = placements.find(placement => placement.id === PLACEMENT_IDS.PERPS);
+  const showPerpsPlacement = availability.perps && (isLoading || Boolean(perpsPlacement?.items.length));


Keep perps carousel mounted until market hydration completes

showPerpsPlacement only checks the placements store loading flag, but useDiscoverPlacements filters out all items until useHyperliquidMarketsStore has loaded matching markets. In the common case where placements finish first, isLoading becomes false while perpsPlacement.items is still empty, so the carousel disappears entirely instead of staying in a loading state. This causes visible flicker/blanking on slower market fetches and can make the featured perps section appear missing until a later re-render.

Useful? React with 👍 / 👎.

github-actions · 2026-04-30T11:25:14Z

Launch in simulator or device for b72ce46

github-actions · 2026-04-30T11:37:20Z

🧪 Flashlight Performance Report (AWS Device Farm)

🔀 Commit: bda05d4

📎 View Artifacts

Metric	Current	Δ vs Baseline
Time to Interactive (TTI)	5638 ms	–
Average FPS	56.49	–
Average RAM	405.8 MB	–

Derives filtered Perps placement items from the raw placements store, excluding hyperliquid markets not yet loaded.

Perps market card with token icon, leverage badge, symbol, and percent-change arrow. Sized without a sparkline slot — sparklines land in the sparklines branch.

Deep-link from Discover Perps card to market detail (with explain sheet gate), and See All to search screen without going through account home. PerpsNavigator reads initialPerpsPage from route params; PerpsSearchScreen skips delayed mount when markets are already cached.

Connects PerpMarketCard as the renderItem for the Perps placement carousel, using the composition store for data and per-item width sizing.

github-actions · 2026-04-30T12:28:09Z

Launch in simulator or device for bda05d4

ibrahimtaveras00

Looks good on both OS's ✅

maxbbb · 2026-05-04T18:03:20Z

+const renderPerpCard = (item: PlacementItem, { trackPress }: { trackPress: PerpMarketCardProps['onPressTracked'] }) => (
+  <PerpMarketCard item={item} onPressTracked={trackPress} />
+);
+
+const getPerpCardWidth = (item: PlacementItem) => {
+  const symbol = useHyperliquidMarketsStore.getState().getMarket(item.ref.id)?.baseSymbol ?? item.ref.id;
+  return computePerpCardWidth({ symbol });
+};
+


Mentioned in the previous PR in the stack moving the specific carousels to their own components, and this logic being needed I think is another good reason for that.

maxbbb · 2026-05-04T18:23:59Z

Could we just extend formatPriceChange in src/features/perps/utils.ts to work for both of these cases? Is the isFinite check needed?

maxbbb · 2026-05-04T19:03:07Z

+        market,
+      });
+
+    const hasSeenExplainSheet = device.get(['hasSeenPerpsExplainSheet']);


nit: since this is used in multiple files now, should go in a constant like HAS_SEEN_PERPS_EXPLAIN_KEY

Could also be cleaner to add a helper maybeNavigateToPerpsExplainSheet(navigationAction: () => void) so that this pattern is centralized instead of duplicated here and in navigateToPerps

Also I know this was already here, but probably makes more sense for all the perps nav utils to be in the navigateToPerps file.

maxbbb · 2026-05-04T19:18:22Z

+        .map(id => state.getPlacement(id))
+        .filter((placement): placement is Placement => placement !== undefined)
+    );
+    const isLoading = $(usePlacementsStore, state => state.getStatus('isInitialLoad')) as boolean;


as boolean is not needed

maxbbb · 2026-05-04T19:43:15Z

+export function computePerpCardWidth({ symbol }: { symbol?: string }): number {
+  const estimatedTextWidth = symbol
+    ? symbol.length * ESTIMATED_SYMBOL_CHARACTER_WIDTH + SYMBOL_TEXT_BUFFER
+    : PERP_MARKET_NO_CHART_TEXT_MIN_WIDTH;
+  const textWidth = Math.max(PERP_MARKET_NO_CHART_TEXT_MIN_WIDTH, estimatedTextWidth);
+
+  return Math.min(PERP_MARKET_CARD_MAX_WIDTH, Math.ceil(PERP_MARKET_NO_CHART_FIXED_WIDTH + textWidth));
+}


This was only added a couple days ago, but we do now have a measureTextSync that can get you the exact text width given some style. Using that here would make this cleaner.

maxbbb · 2026-05-04T20:12:33Z

+          </View>
+
+          <View style={styles.badgePositioner}>
+            <View


Same thing here with the borders

maxbbb · 2026-05-04T20:16:49Z

+
+  const accentColor = market.metadata?.colors?.color || market.metadata?.colors?.fallbackColor || '#3ECFAD';
+  const percentChange =
+    candlestickPercentChange ?? convertStoredPerpPriceChangeToPercent(market.priceChange['1h'] || market.priceChange['24h']);


0 is valid here I assume, should be ??

maxbbb · 2026-05-04T20:19:04Z

+
+  if (!market) return null;
+
+  const accentColor = market.metadata?.colors?.color || market.metadata?.colors?.fallbackColor || '#3ECFAD';


use HYPERLIQUID_COLORS.green as the fallback here

maxbbb · 2026-05-04T20:22:19Z

+);
+
+const getPerpCardWidth = (item: PlacementItem) => {
+  const symbol = useHyperliquidMarketsStore.getState().getMarket(item.ref.id)?.baseSymbol ?? item.ref.id;


should use hyperliquidMarketsActions.getMarket(). A couple other places where you should use hyperliquidMarketsActions over useHyperliquidMarketsStore.getState().action()

maxbbb · 2026-05-04T20:25:12Z

+    flexDirection: 'row',
+    gap: 2,
+    minHeight: 20,
+    minWidth: 0,


you do not need any of the minWidth: 0 in this file. I assume this is from css conventions, but in react native it's not required.

DanielSinclair requested a review from akc2267 April 30, 2026 08:43

DanielSinclair force-pushed the daniel/discover-v2-market-carousels branch from 91c9a66 to b5f5ba8 Compare April 30, 2026 08:51

DanielSinclair force-pushed the daniel/discover-v2-perps branch from c39c9bd to 6befca4 Compare April 30, 2026 08:51

This was referenced Apr 30, 2026

chore(discover): hide Farcaster tab from Trending #7414

Merged

feat(config): migrate experimental flags to Zustand store #7415

Open

feat(placements): add placements content configuration API #7416

Open

This was referenced Apr 30, 2026

feat(discover-v2): scaffold featured markets carousel placements #7417

Open

feat(discover-v2): add H1 sparklines to Perps cards #7419

Open

feat(discover-v2): add Predictions placement carousel #7420

Open

chatgpt-codex-connector Bot reviewed Apr 30, 2026

View reviewed changes

DanielSinclair added 4 commits April 30, 2026 07:42

feat(discover-v2): add Perps placement composition store

4af4204

Derives filtered Perps placement items from the raw placements store, excluding hyperliquid markets not yet loaded.

feat(discover-v2): add PerpMarketCard

09ddcc6

Perps market card with token icon, leverage badge, symbol, and percent-change arrow. Sized without a sparkline slot — sparklines land in the sparklines branch.

feat(discover-v2): wire PerpMarketCard into carousel

7e10dd7

Connects PerpMarketCard as the renderItem for the Perps placement carousel, using the composition store for data and per-item width sizing.

DanielSinclair force-pushed the daniel/discover-v2-market-carousels branch from b5f5ba8 to 6bbfc95 Compare April 30, 2026 11:42

DanielSinclair force-pushed the daniel/discover-v2-perps branch from 637a37a to 7e10dd7 Compare April 30, 2026 11:42

DanielSinclair requested review from maxbbb and removed request for akc2267 April 30, 2026 23:24

ibrahimtaveras00 approved these changes May 1, 2026

View reviewed changes

maxbbb requested changes May 4, 2026

View reviewed changes


		if (!market) return null;

		const accentColor = market.metadata?.colors?.color \|\| market.metadata?.colors?.fallbackColor \|\| '#3ECFAD';

Conversation

DanielSinclair commented Apr 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What changed

Screen recordings / screenshots

What to test

Uh oh!

DanielSinclair commented Apr 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Apr 30, 2026

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector Bot Apr 30, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Apr 30, 2026

Uh oh!

github-actions Bot commented Apr 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Apr 30, 2026

Uh oh!

ibrahimtaveras00 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

DanielSinclair commented Apr 30, 2026 •

edited

Loading

DanielSinclair commented Apr 30, 2026 •

edited

Loading

github-actions Bot commented Apr 30, 2026 •

edited

Loading