openModal('marketSettings', {})}
onRefresh={handleRefresh}
isMobile={isMobile}
/>
diff --git a/src/stores/useMarketDetailChartState.ts b/src/stores/useMarketDetailChartState.ts
new file mode 100644
index 00000000..f7fec2c9
--- /dev/null
+++ b/src/stores/useMarketDetailChartState.ts
@@ -0,0 +1,62 @@
+import { create } from 'zustand';
+import type { TimeseriesOptions } from '@/utils/types';
+
+const DAY_IN_SECONDS = 24 * 60 * 60;
+const WEEK_IN_SECONDS = 7 * DAY_IN_SECONDS;
+
+// Helper to calculate time range based on timeframe string
+const calculateTimeRange = (timeframe: '1d' | '7d' | '30d'): TimeseriesOptions => {
+ const endTimestamp = Math.floor(Date.now() / 1000);
+ let startTimestamp;
+ let interval: TimeseriesOptions['interval'] = 'HOUR';
+ switch (timeframe) {
+ case '1d':
+ startTimestamp = endTimestamp - DAY_IN_SECONDS;
+ break;
+ case '30d':
+ startTimestamp = endTimestamp - 30 * DAY_IN_SECONDS;
+ // Use DAY interval for longer ranges if desired, adjust as needed
+ interval = 'DAY';
+ break;
+ default:
+ startTimestamp = endTimestamp - WEEK_IN_SECONDS;
+ break;
+ }
+ return { startTimestamp, endTimestamp, interval };
+};
+
+type ChartState = {
+ selectedTimeframe: '1d' | '7d' | '30d';
+ selectedTimeRange: TimeseriesOptions;
+ volumeView: 'USD' | 'Asset';
+};
+
+type ChartActions = {
+ setTimeframe: (timeframe: '1d' | '7d' | '30d') => void;
+ setVolumeView: (view: 'USD' | 'Asset') => void;
+};
+
+type MarketDetailChartStore = ChartState & ChartActions;
+
+/**
+ * [No persist] Zustand store for market detail chart state (shared between VolumeChart and RateChart).
+ *
+ */
+export const useMarketDetailChartState = create((set) => ({
+ // Default state
+ selectedTimeframe: '7d',
+ selectedTimeRange: calculateTimeRange('7d'),
+ volumeView: 'Asset',
+
+ // Actions
+ setTimeframe: (timeframe) => {
+ set({
+ selectedTimeframe: timeframe,
+ selectedTimeRange: calculateTimeRange(timeframe),
+ });
+ },
+
+ setVolumeView: (view) => {
+ set({ volumeView: view });
+ },
+}));
diff --git a/src/utils/chart.ts b/src/utils/chart.ts
new file mode 100644
index 00000000..71f1620a
--- /dev/null
+++ b/src/utils/chart.ts
@@ -0,0 +1,21 @@
+/**
+ * Format Unix timestamp for chart x-axis labels.
+ */
+export function formatChartTime(unixTime: number, timeRangeDuration: number): string {
+ const date = new Date(unixTime * 1000);
+ const ONE_DAY = 24 * 60 * 60; // 86400 seconds
+
+ // For 1-day timeframe, show hours:minutes
+ if (timeRangeDuration <= ONE_DAY) {
+ return date.toLocaleTimeString(undefined, {
+ hour: '2-digit',
+ minute: '2-digit',
+ });
+ }
+
+ // For longer timeframes, show month + day
+ return date.toLocaleDateString(undefined, {
+ month: 'short',
+ day: 'numeric',
+ });
+}