feat: add more interval support for token details (#33054)

sahar-fehri · web-flow · commit e5e6ae04a73b · 2026-07-13T08:43:42.000Z
## **Description**  Adds `4h` and `1w` candle intervals to the token details interval picker (IntervalBar) for technical indicators and charts, per the Price API's newly supported OHLCV intervals. Previously, interval definitions were maintained in three separate locations (`QUICK_INTERVALS` in `IntervalBar.tsx`, `TOKEN_OVERVIEW_CHART_INTERVALS` in `tokenOverviewChart.constants.ts`, and `INTERVAL_TO_TIME_PERIOD` in `Price.advanced.tsx`). This PR consolidates them into a single `CHART_INTERVAL_CONFIGS` object in `tokenOverviewChart.constants.ts`, from which the UI list, TypeScript type, type guard, and API `timePeriod` mapping are all derived. Adding a new interval now requires one entry in one file. ## **Changelog**   CHANGELOG entry: Added 4-hour and 1-week candle intervals to the token details chart interval picker ## **Related issues**  Fixes: https://consensyssoftware.atlassian.net/browse/ASSETS-3580 ## **Manual testing steps**  ```gherkin Feature: my feature name Scenario: user [verb for user action] Given [describe expected initial app state] When user [verb for user action] Then [describe expected outcome] ``` ## **Screenshots/Recordings**   ### **Before**  ### **After**  <img width="429" height="919" alt="Screenshot 2026-07-09 at 18 25 32" src="https://github.com/user-attachments/assets/e9b724f7-be94-4a13-a67a-45483025b48d" /> ## **Pre-merge author checklist**   - [ ] 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). - [ ] I've completed the PR template to the best of my ability - [ ] I've included tests if applicable - [ ] I've documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [ ] 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. #### Performance checks (if applicable) - [ ] I've tested on Android - Ideally on a mid-range device; emulator is acceptable - [ ] I've tested with a power user scenario - Use these [power-user SRPs](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/edit-v2/401401446401?draftShareId=9d77e1e1-4bdc-4be1-9ebb-ccd916988d93) to import wallets with many accounts and tokens - [ ] I've instrumented key operations with Sentry traces for production performance metrics - See [`trace()`](/app/util/trace.ts) for usage and [`addToken`](/app/components/Views/AddAsset/components/AddCustomToken/AddCustomToken.tsx#L274) for an example For performance guidelines and tooling, see the [Performance Guide](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/400085549067/Performance+Guide+for+Engineers). ## **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.
diff --git a/app/components/UI/AssetOverview/Price/Price.advanced.test.tsx b/app/components/UI/AssetOverview/Price/Price.advanced.test.tsx
@@ -207,7 +207,9 @@ jest.mock('../../Charts/AdvancedChart/IndicatorBar', () => {
 
 jest.mock('../../Charts/AdvancedChart/IntervalBar', () => {
   const { View, Pressable, Text } = jest.requireActual('react-native');
-  const QUICK_INTERVALS = ['1m', '5m', '15m', '1h', '1d'];
+  const { TOKEN_OVERVIEW_CHART_INTERVALS } = jest.requireActual(
+    './tokenOverviewChart.constants',
+  );
   return {
     __esModule: true,
     default: ({
@@ -216,7 +218,7 @@ jest.mock('../../Charts/AdvancedChart/IntervalBar', () => {
       onIntervalSelect?: (interval: string) => void;
     }) => (
       <View testID="mock-interval-bar">
-        {QUICK_INTERVALS.map((interval) => (
+        {TOKEN_OVERVIEW_CHART_INTERVALS.map((interval: string) => (
           <Pressable
             key={interval}
             accessibilityLabel={interval}
@@ -1678,21 +1680,21 @@ describe('PriceAdvanced', () => {
 
       // For '1H' timeRange:
       // - WS_INTERVAL_BY_TIME_RANGE['1H'] = '1m'
-      // - INTERVAL_TO_TIME_PERIOD['1m'] = '1d'
+      // - CHART_INTERVAL_CONFIGS['1m'] = '1d'
       // - TIME_RANGE_CONFIGS['1H'].timePeriod = '1h'
       // With flag OFF, should use '1h', not '1d'
     });
 
-    it('uses INTERVAL_TO_TIME_PERIOD when technical indicators flag is ON', () => {
+    it('uses CHART_INTERVAL_CONFIGS when technical indicators flag is ON', () => {
       mockSelectTechnicalIndicatorsEnabled.mockReturnValue(true);
 
       render(<PriceAdvanced {...baseProps} />);
 
       // Default timeRange is '1D':
       // - displayInterval starts as wsInterval = WS_INTERVAL_BY_TIME_RANGE['1D'] = '15m'
       // - chartInterval = '15m'
-      // - INTERVAL_TO_TIME_PERIOD['15m'] = '1d'
-      // With flag ON, should use '1d' from INTERVAL_TO_TIME_PERIOD
+      // - CHART_INTERVAL_CONFIGS['15m'] = '1d'
+      // With flag ON, should use '1d' from CHART_INTERVAL_CONFIGS
       expect(mockUseOHLCVChart).toHaveBeenCalledWith(
         expect.objectContaining({
           timePeriod: '1d',
@@ -1728,14 +1730,14 @@ describe('PriceAdvanced', () => {
       );
     });
 
-    it('correctly uses INTERVAL_TO_TIME_PERIOD for candle intervals when flag is ON', () => {
+    it('correctly uses CHART_INTERVAL_CONFIGS for candle intervals when flag is ON', () => {
       mockSelectTechnicalIndicatorsEnabled.mockReturnValue(true);
 
       render(<PriceAdvanced {...baseProps} />);
 
       // For '1D' timeRange:
       // - wsInterval = '15m'
-      // - INTERVAL_TO_TIME_PERIOD['15m'] = '1d'
+      // - CHART_INTERVAL_CONFIGS['15m'] = '1d'
       expect(mockUseOHLCVChart).toHaveBeenCalledWith(
         expect.objectContaining({
           timePeriod: '1d',
@@ -1882,6 +1884,32 @@ describe('PriceAdvanced', () => {
       );
     });
 
+    it('maps 4h interval to 1m timePeriod when flag is ON', () => {
+      enableIndicatorBar('4h');
+
+      render(<PriceAdvanced {...baseProps} />);
+
+      expect(mockUseOHLCVChart).toHaveBeenCalledWith(
+        expect.objectContaining({
+          timePeriod: '1m',
+          interval: '4h',
+        }),
+      );
+    });
+
+    it('maps 1w interval to 1y timePeriod when flag is ON', () => {
+      enableIndicatorBar('1w');
+
+      render(<PriceAdvanced {...baseProps} />);
+
+      expect(mockUseOHLCVChart).toHaveBeenCalledWith(
+        expect.objectContaining({
+          timePeriod: '1y',
+          interval: '1w',
+        }),
+      );
+    });
+
     it('does not dispatch interval persistence when technical indicators flag is OFF', () => {
       mockSelectTechnicalIndicatorsEnabled.mockReturnValue(false);
       mockUseSelector.mockImplementation((selector: unknown) => {
diff --git a/app/components/UI/AssetOverview/Price/Price.advanced.tsx b/app/components/UI/AssetOverview/Price/Price.advanced.tsx
@@ -14,6 +14,7 @@ import { toDateFormat } from '../../../../util/date';
 import styleSheet from './Price.styles';
 import {
   CHART_DATA_THRESHOLD,
+  CHART_INTERVAL_CONFIGS,
   isTokenOverviewChartInterval,
   TOKEN_OVERVIEW_CHART_HEIGHT as BASE_CHART_HEIGHT,
 } from './tokenOverviewChart.constants';
@@ -33,7 +34,6 @@ import {
 import TimeRangeSelector, {
   TIME_RANGE_CONFIGS,
   type TimeRange,
-  type OHLCVTimePeriod,
 } from '../../Charts/AdvancedChart/TimeRangeSelector';
 import { useOHLCVChart } from '../../Charts/AdvancedChart/useOHLCVChart';
 import { useOHLCVRealtime } from '../../Charts/AdvancedChart/useOHLCVRealtime';
@@ -79,18 +79,6 @@ const WS_INTERVAL_BY_TIME_RANGE: Record<TimeRange, string> = {
   '1Y': '1d',
 };
 
-/**
- * Maps each candle interval to the API timePeriod that returns enough history.
- * Without this, e.g. interval=1d + timePeriod=1d returns only ~1 bar.
- */
-const INTERVAL_TO_TIME_PERIOD: Record<string, OHLCVTimePeriod> = {
-  '1m': '1d',
-  '5m': '1d',
-  '15m': '1d',
-  '1h': '1w',
-  '1d': '1m',
-};
-
 const TIME_RANGE_LABELS: Record<TimeRange, string> = {
   '1H': 'asset_overview.chart_time_period.1h',
   '1D': 'asset_overview.chart_time_period.1d',
@@ -393,7 +381,7 @@ const PriceAdvanced = ({
   const chartInterval = displayInterval.toLowerCase();
 
   const effectiveTimePeriod = isTechnicalIndicatorsEnabled
-    ? INTERVAL_TO_TIME_PERIOD[chartInterval]
+    ? CHART_INTERVAL_CONFIGS[chartInterval]
     : config.timePeriod;
 
   const effectiveInterval = isTechnicalIndicatorsEnabled
diff --git a/app/components/UI/AssetOverview/Price/tokenOverviewChart.constants.ts b/app/components/UI/AssetOverview/Price/tokenOverviewChart.constants.ts
@@ -1,4 +1,5 @@
 import { Dimensions } from 'react-native';
+import type { OHLCVTimePeriod } from '../../Charts/AdvancedChart/TimeRangeSelector';
 
 /**
  * Token overview chart column height (AdvancedChart / TradingView + legacy line when shown).
@@ -17,17 +18,30 @@ export const CHART_DATA_THRESHOLD = 5;
  */
 export const TOKEN_OVERVIEW_TIME_RANGE_ROW_HEIGHT = 34;
 
-/** Quick-pick candle intervals shown in IntervalBar when technical indicators are enabled. */
-export const TOKEN_OVERVIEW_CHART_INTERVALS = [
-  '1m',
-  '5m',
-  '15m',
-  '1h',
-  '1d',
-] as const;
+/**
+ * Single source of truth for candle intervals in the IntervalBar.
+ * Maps each interval to the API timePeriod that returns enough history.
+ *
+ * To add a new interval: add one entry here. No other files need changes.
+ * The UI pills, TypeScript type, type guard, and API mapping all derive from this.
+ */
+export const CHART_INTERVAL_CONFIGS: Record<string, OHLCVTimePeriod> = {
+  '1m': '1d',
+  '5m': '1d',
+  '15m': '1d',
+  '1h': '1w',
+  '4h': '1m',
+  '1d': '1m',
+  '1w': '1y',
+};
+
+/** Ordered list of intervals for the IntervalBar UI pills. */
+export const TOKEN_OVERVIEW_CHART_INTERVALS = Object.keys(
+  CHART_INTERVAL_CONFIGS,
+);
 
-export type TokenOverviewChartInterval =
-  (typeof TOKEN_OVERVIEW_CHART_INTERVALS)[number];
+export type TokenOverviewChartInterval = keyof typeof CHART_INTERVAL_CONFIGS &
+  string;
 
 /** Default interval when none is persisted (matches 1D time-range WS default). */
 export const DEFAULT_TOKEN_OVERVIEW_CHART_INTERVAL: TokenOverviewChartInterval =
@@ -36,4 +50,4 @@ export const DEFAULT_TOKEN_OVERVIEW_CHART_INTERVAL: TokenOverviewChartInterval =
 export const isTokenOverviewChartInterval = (
   value: string | undefined | null,
 ): value is TokenOverviewChartInterval =>
-  TOKEN_OVERVIEW_CHART_INTERVALS.includes(value as TokenOverviewChartInterval);
+  typeof value === 'string' && value in CHART_INTERVAL_CONFIGS;
diff --git a/app/components/UI/Charts/AdvancedChart/IntervalBar.tsx b/app/components/UI/Charts/AdvancedChart/IntervalBar.tsx
@@ -11,8 +11,7 @@ import {
 } from '@metamask/design-system-react-native';
 import { ChartType } from './AdvancedChart.types';
 import ChartTypeToggle from './ChartTypeToggle';
-
-const QUICK_INTERVALS = ['1m', '5m', '15m', '1h', '1d'] as const;
+import { TOKEN_OVERVIEW_CHART_INTERVALS } from '../../AssetOverview/Price/tokenOverviewChart.constants';
 
 const PILL_BASE = 'flex-row items-center justify-center rounded-xl px-2 py-1';
 
@@ -44,7 +43,7 @@ const IntervalBar: React.FC<IntervalBarProps> = ({
         alignItems={BoxAlignItems.Center}
         twClassName="flex-1 gap-1"
       >
-        {QUICK_INTERVALS.map((interval) => {
+        {TOKEN_OVERVIEW_CHART_INTERVALS.map((interval) => {
           const isSelected = normalised === interval;
           return (
             <Pressable
diff --git a/app/reducers/user/selectors.test.ts b/app/reducers/user/selectors.test.ts
@@ -209,7 +209,6 @@ describe('user state selectors', () => {
     });
 
     it('returns default when interval is invalid', () => {
-      // @ts-expect-error - Testing invalid persisted value
       mockState.user.tokenOverviewChartInterval = 'invalid';
 
       const { result } = renderHook(() =>
