From 90497dc08a50249f83baaa1b30a0d67b7bd7b795 Mon Sep 17 00:00:00 2001 From: Kristie Huang Date: Thu, 16 Nov 2023 13:46:25 -0500 Subject: [PATCH] chore: refactor TDP time selector (#7600) * feat: [info] add tdp charts toggle, WIP * some refactoring * remove chartType related changes after cherrypick * nit * remove setTransition --- .../Tokens/TokenDetails/ChartSection.tsx | 52 +++++++------------ .../Tokens/TokenDetails/Skeleton.tsx | 9 +--- .../Tokens/TokenDetails/TimeSelector.tsx | 23 ++------ src/components/Tokens/TokenDetails/index.tsx | 5 +- src/pages/TokenDetails/index.tsx | 6 +-- 5 files changed, 29 insertions(+), 66 deletions(-) diff --git a/src/components/Tokens/TokenDetails/ChartSection.tsx b/src/components/Tokens/TokenDetails/ChartSection.tsx index 4775363e03..56d71d217f 100644 --- a/src/components/Tokens/TokenDetails/ChartSection.tsx +++ b/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 } return ( }> - - + + + ) } -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 ( - - - {({ width }) => } - - { - startTransition(() => onChangeTimePeriod(t)) - }} - /> - + + {({ width }) => } + ) } diff --git a/src/components/Tokens/TokenDetails/Skeleton.tsx b/src/components/Tokens/TokenDetails/Skeleton.tsx index 4177572698..e654d9c620 100644 --- a/src/components/Tokens/TokenDetails/Skeleton.tsx +++ b/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; diff --git a/src/components/Tokens/TokenDetails/TimeSelector.tsx b/src/components/Tokens/TokenDetails/TimeSelector.tsx index dd4b163b3b..ec0da964b3 100644 --- a/src/components/Tokens/TokenDetails/TimeSelector.tsx +++ b/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 ( {ORDERED_TIMES.map((time) => ( - { - startTransition(() => onTimeChange(time)) - setTimePeriod(time) - }} - > + setTimePeriod(time)}> {DISPLAYS[time]} ))} diff --git a/src/components/Tokens/TokenDetails/index.tsx b/src/components/Tokens/TokenDetails/index.tsx index 37b7b43aff..bc3656f804 100644 --- a/src/components/Tokens/TokenDetails/index.tsx +++ b/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({ - +
diff --git a/src/pages/TokenDetails/index.tsx b/src/pages/TokenDetails/index.tsx index c25b02c07c..ccc842d5ae 100644 --- a/src/pages/TokenDetails/index.tsx +++ b/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} /> )