fix: time selector updated to align with price chart (Uniswap#4425)

* fix time

* displays

Author: kayleegeorge

src/components/Tokens/TokenDetails/PriceChart.tsx

@@ -25,16 +25,9 @@ import {
 } from 'utils/formatChartTimes'
 
 import LineChart from '../../Charts/LineChart'
+import { DISPLAYS, ORDERED_TIMES } from '../TokenTable/TimeSelector'
 
 // TODO: This should be combined with the logic in TimeSelector.
-const TIME_DISPLAYS: [TimePeriod, string][] = [
-  [TimePeriod.HOUR, '1H'],
-  [TimePeriod.DAY, '1D'],
-  [TimePeriod.WEEK, '1W'],
-  [TimePeriod.MONTH, '1M'],
-  [TimePeriod.YEAR, '1Y'],
-  [TimePeriod.ALL, 'All'],
-]
 
 type PricePoint = { value: number; timestamp: number }
 
@@ -307,9 +300,9 @@ export function PriceChart({ width, height, token }: PriceChartProps) {
       </LineChart>
       <TimeOptionsWrapper>
         <TimeOptionsContainer>
-          {TIME_DISPLAYS.map(([value, display]) => (
-            <TimeButton key={display} active={timePeriod === value} onClick={() => setTimePeriod(value)}>
-              {display}
+          {ORDERED_TIMES.map((time) => (
+            <TimeButton key={DISPLAYS[time]} active={timePeriod === time} onClick={() => setTimePeriod(time)}>
+              {DISPLAYS[time]}
             </TimeButton>
           ))}
         </TimeOptionsContainer>

src/components/Tokens/TokenTable/TimeSelector.tsx

@@ -10,15 +10,23 @@ import styled, { useTheme } from 'styled-components/macro'
 import { MOBILE_MEDIA_BREAKPOINT, SMALL_MEDIA_BREAKPOINT } from '../constants'
 import { filterTimeAtom } from '../state'
 
-export const TIME_DISPLAYS: { [key: string]: string } = {
-  hour: '1H',
-  day: '1D',
-  week: '1W',
-  month: '1M',
-  year: '1Y',
+export const DISPLAYS: Record<TimePeriod, string> = {
+  [TimePeriod.HOUR]: '1H',
+  [TimePeriod.DAY]: '1D',
+  [TimePeriod.WEEK]: '1W',
+  [TimePeriod.MONTH]: '1M',
+  [TimePeriod.YEAR]: '1Y',
+  [TimePeriod.ALL]: 'All',
 }
 
-const TIMES = [TimePeriod.HOUR, TimePeriod.DAY, TimePeriod.WEEK, TimePeriod.MONTH, TimePeriod.YEAR]
+export const ORDERED_TIMES = [
+  TimePeriod.HOUR,
+  TimePeriod.DAY,
+  TimePeriod.WEEK,
+  TimePeriod.MONTH,
+  TimePeriod.YEAR,
+  TimePeriod.ALL,
+]
 
 const InternalMenuItem = styled.div`
   flex: 1;
@@ -136,23 +144,23 @@ export default function TimeSelector() {
     <StyledMenu ref={node}>
       <StyledMenuButton onClick={toggleMenu} aria-label={`timeSelector`} open={open}>
         <StyledMenuContent>
-          {TIME_DISPLAYS[activeTime]}
+          {DISPLAYS[activeTime]}
           <Chevron open={open}>
             {open ? <ChevronUp size={15} viewBox="0 0 24 20" /> : <ChevronDown size={15} viewBox="0 0 24 20" />}
           </Chevron>
         </StyledMenuContent>
       </StyledMenuButton>
       {open && (
         <MenuTimeFlyout>
-          {TIMES.map((time) => (
+          {ORDERED_TIMES.map((time) => (
             <InternalLinkMenuItem
-              key={time}
+              key={DISPLAYS[time]}
               onClick={() => {
                 setTime(time)
                 toggleMenu()
               }}
             >
-              <div>{TIME_DISPLAYS[time]}</div>
+              <div>{DISPLAYS[time]}</div>
               {time === activeTime && <Check color={theme.accentAction} size={16} />}
             </InternalLinkMenuItem>
           ))}

src/components/Tokens/TokenTable/TokenRow.tsx

@@ -33,7 +33,7 @@ import {
   useToggleFavorite,
 } from '../state'
 import { Category, SortDirection } from '../types'
-import { TIME_DISPLAYS } from './TimeSelector'
+import { DISPLAYS } from './TimeSelector'
 
 const ArrowCell = styled.div`
   padding-left: 2px;
@@ -294,7 +294,7 @@ const LogoContainer = styled.div`
 
 /* formatting for volume with timeframe header display */
 function getHeaderDisplay(category: string, timeframe: TimePeriod): string {
-  if (category === Category.volume) return `${TIME_DISPLAYS[timeframe]} ${category}`
+  if (category === Category.volume) return `${DISPLAYS[timeframe]} ${category}`
   return category
 }