chore: refactor TDP time selector (#7600)

* feat: [info] add tdp charts toggle, WIP

* some refactoring

* remove chartType related changes after cherrypick

* nit

* remove setTransition

src/components/Tokens/TokenDetails/ChartSection.tsx

@@ -1,15 +1,24 @@
 import { ParentSize } from '@visx/responsive'
-import { ChartContainer, LoadingChart } from 'components/Tokens/TokenDetails/Skeleton'
+import { LoadingChart } from 'components/Tokens/TokenDetails/Skeleton'
 import { TokenPriceQuery } from 'graphql/data/TokenPrice'
 import { isPricePoint, PricePoint } from 'graphql/data/util'
-import { TimePeriod } from 'graphql/data/util'
 import { useAtomValue } from 'jotai/utils'
 import { pageTimePeriodAtom } from 'pages/TokenDetails'
-import { startTransition, Suspense, useMemo } from 'react'
+import { Suspense, useMemo } from 'react'
+import styled from 'styled-components'
 
 import { PriceChart } from '../../Charts/PriceChart'
 import TimePeriodSelector from './TimeSelector'
 
+export const ChartContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 436px;
+  margin-bottom: 24px;
+  align-items: flex-start;
+  width: 100%;
+`
+
 function usePriceHistory(tokenPriceData: TokenPriceQuery): PricePoint[] | undefined {
   // Appends the current price to the end of the priceHistory array
   const priceHistory = useMemo(() => {
@@ -25,49 +34,28 @@ function usePriceHistory(tokenPriceData: TokenPriceQuery): PricePoint[] | undefi
 
   return priceHistory
 }
-export default function ChartSection({
-  tokenPriceQuery,
-  onChangeTimePeriod,
-}: {
-  tokenPriceQuery?: TokenPriceQuery
-  onChangeTimePeriod: OnChangeTimePeriod
-}) {
+export default function ChartSection({ tokenPriceQuery }: { tokenPriceQuery?: TokenPriceQuery }) {
   if (!tokenPriceQuery) {
     return <LoadingChart />
   }
 
   return (
     <Suspense fallback={<LoadingChart />}>
-      <ChartContainer>
-        <Chart tokenPriceQuery={tokenPriceQuery} onChangeTimePeriod={onChangeTimePeriod} />
+      <ChartContainer data-testid="chart-container">
+        <Chart tokenPriceQuery={tokenPriceQuery} />
+        <TimePeriodSelector />
       </ChartContainer>
     </Suspense>
   )
 }
 
-export type OnChangeTimePeriod = (t: TimePeriod) => void
-function Chart({
-  tokenPriceQuery,
-  onChangeTimePeriod,
-}: {
-  tokenPriceQuery: TokenPriceQuery
-  onChangeTimePeriod: OnChangeTimePeriod
-}) {
+function Chart({ tokenPriceQuery }: { tokenPriceQuery: TokenPriceQuery }) {
   const prices = usePriceHistory(tokenPriceQuery)
-  // Initializes time period to global & maintain separate time period for subsequent changes
   const timePeriod = useAtomValue(pageTimePeriodAtom)
 
   return (
-    <ChartContainer data-testid="chart-container">
-      <ParentSize>
-        {({ width }) => <PriceChart prices={prices} width={width} height={392} timePeriod={timePeriod} />}
-      </ParentSize>
-      <TimePeriodSelector
-        currentTimePeriod={timePeriod}
-        onTimeChange={(t: TimePeriod) => {
-          startTransition(() => onChangeTimePeriod(t))
-        }}
-      />
-    </ChartContainer>
+    <ParentSize>
+      {({ width }) => <PriceChart prices={prices} width={width} height={392} timePeriod={timePeriod} />}
+    </ParentSize>
   )
 }

src/components/Tokens/TokenDetails/Skeleton.tsx

@@ -11,6 +11,7 @@ import { textFadeIn } from 'theme/styles'
 import { LoadingBubble } from '../loading'
 import { AboutContainer, AboutHeader } from './About'
 import { BreadcrumbNav, BreadcrumbNavLink } from './BreadcrumbNavLink'
+import { ChartContainer } from './ChartSection'
 import { StatPair, StatsWrapper, StatWrapper } from './StatsSection'
 
 const SWAP_COMPONENT_WIDTH = 360
@@ -53,14 +54,6 @@ export const RightPanel = styled.div<{ isInfoTDPEnabled?: boolean }>`
     display: flex;
   }
 `
-export const ChartContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  height: 436px;
-  margin-bottom: 24px;
-  align-items: flex-start;
-  width: 100%;
-`
 const LoadingChartContainer = styled.div`
   display: flex;
   flex-direction: row;

src/components/Tokens/TokenDetails/TimeSelector.tsx

@@ -1,5 +1,5 @@
-import { TimePeriod } from 'graphql/data/util'
-import { startTransition, useState } from 'react'
+import { useAtom } from 'jotai'
+import { pageTimePeriodAtom } from 'pages/TokenDetails'
 import styled from 'styled-components'
 
 import { MEDIUM_MEDIA_BREAKPOINT } from '../constants'
@@ -46,26 +46,13 @@ const TimeButton = styled.button<{ active: boolean }>`
   }
 `
 
-export default function TimePeriodSelector({
-  currentTimePeriod,
-  onTimeChange,
-}: {
-  currentTimePeriod: TimePeriod
-  onTimeChange: (t: TimePeriod) => void
-}) {
-  const [timePeriod, setTimePeriod] = useState(currentTimePeriod)
+export default function TimePeriodSelector() {
+  const [timePeriod, setTimePeriod] = useAtom(pageTimePeriodAtom)
   return (
     <TimeOptionsWrapper>
       <TimeOptionsContainer>
         {ORDERED_TIMES.map((time) => (
-          <TimeButton
-            key={DISPLAYS[time]}
-            active={timePeriod === time}
-            onClick={() => {
-              startTransition(() => onTimeChange(time))
-              setTimePeriod(time)
-            }}
-          >
+          <TimeButton key={DISPLAYS[time]} active={timePeriod === time} onClick={() => setTimePeriod(time)}>
             {DISPLAYS[time]}
           </TimeButton>
         ))}

src/components/Tokens/TokenDetails/index.tsx

@@ -41,7 +41,6 @@ import { CopyContractAddress } from 'theme/components'
 import { isAddress, shortenAddress } from 'utils'
 import { addressesAreEquivalent } from 'utils/addressesAreEquivalent'
 
-import { OnChangeTimePeriod } from './ChartSection'
 import InvalidTokenDetails from './InvalidTokenDetails'
 import { TokenDescription } from './TokenDescription'
 
@@ -102,7 +101,6 @@ type TokenDetailsProps = {
   chain: InterfaceGqlChain
   tokenQuery: TokenQuery
   tokenPriceQuery?: TokenPriceQuery
-  onChangeTimePeriod: OnChangeTimePeriod
 }
 export default function TokenDetails({
   urlAddress,
@@ -110,7 +108,6 @@ export default function TokenDetails({
   chain,
   tokenQuery,
   tokenPriceQuery,
-  onChangeTimePeriod,
 }: TokenDetailsProps) {
   if (!urlAddress) {
     throw new Error('Invalid token details route: tokenAddress param is undefined')
@@ -258,7 +255,7 @@ export default function TokenDetails({
                 <ShareButton currency={detailedToken} />
               </TokenActions>
             </TokenInfoContainer>
-            <ChartSection tokenPriceQuery={tokenPriceQuery} onChangeTimePeriod={onChangeTimePeriod} />
+            <ChartSection tokenPriceQuery={tokenPriceQuery} />
 
             <StatsSection chainId={pageChainId} address={address} tokenQueryData={tokenQueryData} />
             <Hr />

src/pages/TokenDetails/index.tsx

@@ -4,8 +4,7 @@ import { NATIVE_CHAIN_ID } from 'constants/tokens'
 import { useTokenPriceQuery, useTokenQuery } from 'graphql/data/__generated__/types-and-hooks'
 import { TimePeriod, toHistoryDuration, validateUrlChainParam } from 'graphql/data/util'
 import useParsedQueryString from 'hooks/useParsedQueryString'
-import { useAtom } from 'jotai'
-import { atomWithStorage } from 'jotai/utils'
+import { atomWithStorage, useAtomValue } from 'jotai/utils'
 import { useEffect, useMemo, useState } from 'react'
 import { useParams } from 'react-router-dom'
 import { getNativeTokenDBAddress } from 'utils/nativeTokens'
@@ -19,7 +18,7 @@ export default function TokenDetailsPage() {
   }>()
   const chain = validateUrlChainParam(chainName)
   const isNative = tokenAddress === NATIVE_CHAIN_ID
-  const [timePeriod, setTimePeriod] = useAtom(pageTimePeriodAtom)
+  const timePeriod = useAtomValue(pageTimePeriodAtom)
   const [detailedTokenAddress, duration] = useMemo(
     // tokenAddress will always be defined in the path for for this page to render, but useParams will always
     // return optional arguments; nullish coalescing operator is present here to appease typechecker
@@ -64,7 +63,6 @@ export default function TokenDetailsPage() {
       chain={chain}
       tokenQuery={tokenQuery}
       tokenPriceQuery={currentPriceQuery}
-      onChangeTimePeriod={setTimePeriod}
       inputTokenAddress={parsedInputTokenAddress}
     />
   )