[pull] main from MetaMask:main#347
Merged
Merged
Conversation
## **Description**
This PR implements volume histogram and fullscreen chart mode for Perps
trading, addressing the lack of volume data visualization and limited
screen real estate for chart analysis on mobile.
### What is the reason for the change?
The current Perps chart lacks essential trading features:
- No volume data visualization (critical for confirming price movements)
- No fullscreen/landscape mode for detailed chart analysis
- Limited screen space forces traders to use external platforms
(TradingView, CEX apps)
### What is the improvement/solution?
**Volume Histogram**
- USD notional volume bars (volume × price) displayed below candlesticks
- Smart formatting with K/M/B/T suffixes (e.g., "120M" vs "120,000,000")
- Color-coded bars (green/red) matching candle direction
- Clean presentation with hidden Y-axis labels and transparent separator
**Fullscreen Chart Modal**
- Immersive chart experience with minimized UI chrome
- Auto-unlock device orientation (follows rotation in fullscreen, locks
to portrait when closed)
- Cross-platform safe area handling (iOS notch + Android navigation bar)
- OHLCV data bar shows Open/High/Low/Close/Volume values
**Key Changes**
- Added `PerpsChartFullscreenModal` component with orientation
management
- Added `PerpsOHLCVBar` component for real-time OHLC/volume display
- Enhanced `TradingViewChartTemplate` with multi-pane architecture (80%
candlesticks / 20% volume)
- Added `expo-screen-orientation` dependency for native orientation
control
- Updated Android/iOS config to support landscape orientation in
fullscreen only
## **Changelog**
CHANGELOG entry: Added fullscreen chart mode with landscape orientation
support and volume histogram for Perps trading
## **Related issues**
Relates to: Mobile Perps charting UX v2 PRD - Chart Foundations (P0)
## **Manual testing steps**
```gherkin
Feature: Fullscreen chart with volume histogram
Scenario: User views volume bars in market detail view
Given user is on Perps market detail screen
When user scrolls to chart section
Then volume histogram bars are visible below candlesticks
And volume values are formatted with K/M/B suffixes
And volume bars use green/red colors matching candle direction
Scenario: User enters fullscreen chart mode
Given user is on Perps market detail screen
When user taps fullscreen icon in chart header
Then chart expands to fullscreen modal
And header shows interval selector and close button
And volume bars are always visible
And device orientation unlocks to follow device rotation
Scenario: User rotates device in fullscreen
Given user is in fullscreen chart mode (portrait)
When user rotates device to landscape
Then chart automatically follows orientation change
And volume bars properly rescale to new dimensions
When user rotates device back to portrait
Then chart returns to portrait orientation
And volume bars rescale appropriately
Scenario: User exits fullscreen mode
Given user is in fullscreen chart mode (any orientation)
When user taps Close button (X icon)
Then chart exits fullscreen
And device orientation locks back to portrait
And user returns to market detail view
Scenario: Cross-platform safe area handling
Given user is on iOS device with notch
When user enters fullscreen chart mode
Then header content avoids notch area
And chart content avoids bottom safe area
```
## **Screenshots/Recordings**
### **Before**
- No volume data visible on chart
- No fullscreen/landscape mode
- Limited chart analysis capability on mobile
### **After**
**Volume Histogram in Market Detail View:**
- Volume bars visible below candlesticks with USD notional values
- Smart formatting: "120M" instead of "120,000,000"
- Color-coded green (up) / red (down)
**Fullscreen Modal - Portrait:**
- Clean fullscreen interface with minimal chrome
- Header: Interval selector (left), Close button (right)
- Volume bars always visible
- OHLCV data bar with proper padding
- Safe area handling for iOS notch and Android status bar
**Fullscreen Modal - Landscape:**
- Maximum screen real estate for chart analysis
- Volume bars automatically rescale after rotation
- Orientation locks back to portrait when exiting
https://github.com/user-attachments/assets/f9582cfa-fa5c-449b-a5de-d9750e0da05d
## **Pre-merge author checklist**
- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.
## **Pre-merge reviewer checklist**
- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.
<!-- CURSOR_SUMMARY -->
---
> [!NOTE]
> Adds a fullscreen Perps chart with device rotation handling,
introduces volume histogram and an OHLCV bar, upgrades the chart engine,
and wires in expo-screen-orientation with config and tests.
>
> - **Perps UI**:
> - Add `PerpsChartFullscreenModal` with orientation lock/unlock, header
controls, safe area handling, and tests.
> - Add `PerpsOHLCVBar` and render it in `PerpsMarketDetailsView` and
fullscreen modal.
> - Update `PerpsMarketHeader` to include a fullscreen button; minor
styles; make interval selector horizontally scrollable.
> - Enhance `PerpsMarketDetailsView`: integrate new components, skeleton
fallback, auto-zoom on interval change, improved error logging.
> - **Chart Engine**:
> - Extend `TradingViewChart` and template: volume histogram in separate
pane, OHLCV callbacks, overlay/volume toggles, pane sizing/resizing,
improved time/price formatting, and ref methods; expose `OhlcData`
types.
> - Adjust TPSL line styling/colors and add skeleton/error handling;
comprehensive unit tests added.
> - **Config/Dependencies**:
> - Add `expo-screen-orientation` (plugin, mock, Jest mapping); enable
landscape orientations in `ios/MetaMask/Info.plist`; register in
`app.config.js`; update Pods/Yarn.
> - **Logging/Services**:
> - Replace `console.error` with `Logger.error` in Perps flows; add
error logging in `HyperLiquidSubscriptionService` unsubscriptions.
> - **Selectors/i18n**:
> - Add E2E selectors for OHLCV bar and fullscreen modal; add i18n
strings for OHLC labels.
>
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
5032204. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->
---------
Co-authored-by: Nicholas Smith <nick.smith@consensys.net>
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 subscribe to this conversation on GitHub.
Already have an account?
Sign in.
1 participant
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.
See Commits and Changes for more details.
Created by
pull[bot] (v2.0.0-alpha.4)
Can you help keep this open source service alive? 💖 Please sponsor : )