feat: add timeframe options UI (#4042)

* add timeframe options

* map times

* list times

Author: kayleegeorge

src/components/Explore/TokenDetail.tsx

@@ -1,12 +1,23 @@
 import CurrencyLogo from 'components/CurrencyLogo'
 import { useCurrency, useToken } from 'hooks/Tokens'
+import { TimePeriod } from 'hooks/useTopTokens'
 import { atom, useAtom } from 'jotai'
+import { useState } from 'react'
 import { ArrowDownRight, ArrowLeft, ArrowUpRight, Heart, Share } from 'react-feather'
 import { Link } from 'react-router-dom'
 import styled, { useTheme } from 'styled-components/macro'
 
 import { favoritesAtom } from './TokenTable'
 
+const TIME_DISPLAYS: Record<TimePeriod, string> = {
+  [TimePeriod.hour]: '1H',
+  [TimePeriod.day]: '1D',
+  [TimePeriod.week]: '1W',
+  [TimePeriod.month]: '1M',
+  [TimePeriod.year]: '1Y',
+}
+const TIME_PERIODS = [TimePeriod.hour, TimePeriod.day, TimePeriod.week, TimePeriod.month, TimePeriod.year]
+
 const ArrowCell = styled.div`
   padding-left: 2px;
   display: flex;
@@ -32,10 +43,30 @@ const ChartHeader = styled.div`
   color: ${({ theme }) => theme.text1};
   gap: 4px;
 `
+const ChartContainer = styled.div`
+  height: 332px;
+  border-bottom: 1px solid ${({ theme }) => theme.bg3};
+`
 const DeltaContainer = styled.div`
   display: flex;
   align-items: center;
 `
+
+const TimeButton = styled.button<{ active: boolean }>`
+  background-color: ${({ theme, active }) => (active ? theme.primary1 : 'transparent')};
+  font-size: 14px;
+  width: 36px;
+  height: 36px;
+  border-radius: 12px;
+  border: none;
+  cursor: pointer;
+  color: ${({ theme }) => theme.text1};
+`
+const TimeOptionsContainer = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  gap: 4px;
+`
 const TokenNameCell = styled.div`
   display: flex;
   gap: 8px;
@@ -70,6 +101,7 @@ export default function TokenDetail({ address }: { address: string }) {
   const currency = useCurrency(address)
   const [favoriteTokens] = useAtom(favoritesAtom)
   const isFavorited = atom<boolean>(favoriteTokens.includes(address))
+  const [activeTimePeriod, setTimePeriod] = useState(TimePeriod.hour)
 
   // catch token error and loading state
   if (!token) {
@@ -79,7 +111,7 @@ export default function TokenDetail({ address }: { address: string }) {
   const tokenSymbol = token.symbol
 
   // dummy data for now until Jordan writes token detail hooks
-  // format price
+  // TODO: format price, add sparkline
   const tokenPrice = '3,243.22'
   const tokenDelta = 1.22
   const isPositive = Math.sign(tokenDelta) > 0
@@ -119,6 +151,20 @@ export default function TokenDetail({ address }: { address: string }) {
             )}
           </ArrowCell>
         </DeltaContainer>
+        <ChartContainer></ChartContainer>
+        <TimeOptionsContainer>
+          {TIME_PERIODS.map((timePeriod) => {
+            return (
+              <TimeButton
+                key={timePeriod}
+                active={activeTimePeriod === timePeriod}
+                onClick={() => setTimePeriod(timePeriod)}
+              >
+                {TIME_DISPLAYS[timePeriod]}
+              </TimeButton>
+            )
+          })}
+        </TimeOptionsContainer>
       </ChartHeader>
     </TopArea>
   )