CP-14508: perps chart TV resolution picker + surface-colored toolbar fades - #4011
Open
bogdandobritoiu wants to merge 5 commits into
Open
CP-14508: perps chart TV resolution picker + surface-colored toolbar fades#4011bogdandobritoiu wants to merge 5 commits into
bogdandobritoiu wants to merge 5 commits into
Conversation
…ades with surface color
bogdandobritoiu
requested review from
B0Y3R-AVA,
atn4z7,
onghwan and
ruijia1in
as code owners
July 24, 2026 11:26
Contributor
There was a problem hiding this comment.
Pull request overview
Updates the perps market details UI to align the chart timeframe picker with the actual TradingView/Hyperliquid-supported resolutions, and visually integrates the TradingView drawing toolbar fades with the app’s surface background.
Changes:
- Replace the old “24H/1W/1M/3M/1Y” range picker with a scrollable picker of supported TV resolutions (
1M 5M 15M 1H 4H 12H 1D 1W) and keep the default at1H. - Add horizontal scrolling behavior that scrolls a partially clipped segment fully into view when tapped.
- Inject runtime-generated CSS into TradingView (
custom_css_url) to repaint toolbar fade gradients to match the host-provided surface color.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| packages/core-mobile/app/new/features/trade/perpetuals/screens/PerpetualsDetailsScreen.tsx | Reworks the timeframe picker to a scrollable list of supported TradingView resolutions and updates default selection behavior. |
| packages/core-mobile/app/new/features/trade/perpetuals/screens/PerpetualsDetailsScreen.test.tsx | Extends the k2-alpine Jest mock to include ScrollView so the updated screen can render in tests. |
| packages/core-mobile/app/new/features/trade/perpetuals/components/tradingview.html | Adds injected CSS via custom_css_url to recolor TradingView toolbar fades and re-enables the left toolbar. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Coverage report ✅2/2 packages passed thresholds 🟢 @avalabs/core-mobile
🟢 @avalabs/k2-alpine
Artifacts and threshold sources
Source run: Mobile PR |
…k, fix lint Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
… ScrollView test mock Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Ticket: CP-14508
24H / 1W / 1M / 3M / 1Y, several of which mapped to the same candle resolution) with the actual TradingView resolutions supported by the Hyperliquid datafeed:1M 5M 15M 1H 4H 12H 1D 1W(default1H, same underlying resolution as before)ScrollView); tapping a partially clipped segment scrolls it fully into view#0f0f0f(dark) /#fff(light), which shows as a black band over our$surfacePrimarybackground. A small stylesheet generated at runtime and injected viacustom_css_url(adata:URL) redraws the fades with the surface color passed in by the RN host. Selectors are attribute-based ([class^="fadeTop-"]) so they survive charting-library rebuilds where the hashed class names changeNo new dependencies.
Screenshots/Videos
Simulator.Screen.Recording.-.iPhone.17.Pro.-.2026-07-24.at.14.59.11.mov
Testing
Dev Testing
1M 5M 15M 1H 4H 12H 1D 1Wwith1Hselected; the row scrolls horizontally and tapping an edge-clipped segment scrolls it fully into viewBitrise:
QA Testing
Checklist
Please check all that apply (if applicable)
🤖 Generated with Claude Code