add timeframe switcher in price chart

KyberNetwork · Aug 14, 2023 · 8843046 · 8843046
1 parent e8c765e
commit 8843046
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/src/pages/TrueSightV2/components/TimeFrameLegend.tsx b/src/pages/TrueSightV2/components/TimeFrameLegend.tsx
@@ -31,6 +31,7 @@ const Element = styled.div<{ active?: boolean; count?: number }>`
   display: flex;
   justify-content: center;
   text-transform: uppercase;
+  font-style: normal;
   ${({ active, theme }) => active && `color: ${theme.text};`}
   :hover {
     filter: brightness(1.2);

diff --git a/src/pages/TrueSightV2/pages/TechnicalAnalysis.tsx b/src/pages/TrueSightV2/pages/TechnicalAnalysis.tsx
@@ -1,5 +1,5 @@
 import { Trans, t } from '@lingui/macro'
-import { createContext, useMemo, useState } from 'react'
+import { createContext, useCallback, useMemo, useState } from 'react'
 import { useParams } from 'react-router-dom'
 import { Text } from 'rebass'
 import styled, { useTheme } from 'styled-components'
@@ -15,6 +15,7 @@ import { getLimitOrderContract } from 'utils'
 
 import { SectionWrapper } from '../components'
 import CexRekt from '../components/CexRekt'
+import TimeFrameLegend from '../components/TimeFrameLegend'
 import { LiquidOnCentralizedExchanges, Prochart } from '../components/chart'
 import { DexTradesShareContent } from '../components/shareContent/DexTradesShareContent'
 import FundingRateShareContent from '../components/shareContent/FundingRateShareContent'
@@ -24,7 +25,7 @@ import { FundingRateTable, LiveDEXTrades, SupportResistanceLevel } from '../comp
 import { KYBERAI_CHART_ID, NETWORK_TO_CHAINID } from '../constants'
 import { useChartingDataQuery } from '../hooks/useKyberAIData'
 import useKyberAITokenOverview from '../hooks/useKyberAITokenOverview'
-import { ChartTab, ISRLevel, OHLCData } from '../types'
+import { ChartTab, ISRLevel, KyberAITimeframe, OHLCData } from '../types'
 import { navigateToLimitPage } from '../utils'
 import { defaultExplorePageToken } from './SingleToken'
 
@@ -138,6 +139,12 @@ export default function TechnicalAnalysis() {
       console.log(err)
     }
   }
+
+  const handleTimeframeSelect = useCallback(
+    (t: KyberAITimeframe) => setPriceChartResolution?.(t as string),
+    [setPriceChartResolution],
+  )
+
   return (
     <TechnicalAnalysisContext.Provider
       value={{
@@ -158,7 +165,17 @@ export default function TechnicalAnalysis() {
           onTabClick={setLiveChartTab}
           style={{ height: '800px' }}
           subTitle={
-            <RowFit gap="8px">
+            <RowFit gap="12px">
+              <TimeFrameLegend
+                selected={priceChartResolution}
+                timeframes={[
+                  KyberAITimeframe.ONE_HOUR,
+                  KyberAITimeframe.FOUR_HOURS,
+                  KyberAITimeframe.ONE_DAY,
+                  KyberAITimeframe.FOUR_DAY,
+                ]}
+                onSelect={handleTimeframeSelect}
+              />
               <Text fontSize="14px" fontStyle="initial">
                 <Trans>Support / Resistance Levels</Trans>
               </Text>