feat: token data cache (#4534)

* initial cache construction
* switched to relay cache, updated hooks
* fixed comments

src/components/Tokens/TokenDetails/PriceChart.tsx

-import { Token } from '@uniswap/sdk-core'
 import { AxisBottom, TickFormatter } from '@visx/axis'
 import { localPoint } from '@visx/event'
 import { EventType } from '@visx/event/lib/types'
@@ -6,11 +5,12 @@ import { GlyphCircle } from '@visx/glyph'
 import { Line } from '@visx/shape'
 import { filterTimeAtom } from 'components/Tokens/state'
 import { bisect, curveCardinal, NumberValue, scaleLinear, timeDay, timeHour, timeMinute, timeMonth } from 'd3'
-import { useTokenPriceQuery } from 'graphql/data/TokenPriceQuery'
-import { TimePeriod } from 'graphql/data/TopTokenQuery'
+import { TokenPrices$key } from 'graphql/data/__generated__/TokenPrices.graphql'
+import { useTokenPricesCached } from 'graphql/data/Token'
+import { PricePoint, TimePeriod } from 'graphql/data/Token'
 import { useActiveLocale } from 'hooks/useActiveLocale'
 import { useAtom } from 'jotai'
-import { useCallback, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import { ArrowDownRight, ArrowUpRight } from 'react-feather'
 import styled, { useTheme } from 'styled-components/macro'
 import { OPACITY_HOVER } from 'theme'
@@ -29,8 +29,6 @@ import { DISPLAYS, ORDERED_TIMES } from '../TokenTable/TimeSelector'
 
 // TODO: This should be combined with the logic in TimeSelector.
 
-export type PricePoint = { value: number; timestamp: number }
-
 export const DATA_EMPTY = { value: 0, timestamp: 0 }
 
 function getPriceBounds(pricePoints: PricePoint[]): [number, number] {
@@ -72,7 +70,6 @@ export function formatDelta(delta: number) {
 export const ChartHeader = styled.div`
   position: absolute;
 `
-
 export const TokenPrice = styled.span`
   font-size: 36px;
   line-height: 44px;
@@ -124,37 +121,41 @@ const crosshairDateOverhang = 80
 interface PriceChartProps {
   width: number
   height: number
-  token: Token
+  tokenAddress: string
+  priceData?: TokenPrices$key | null
 }
 
-export function PriceChart({ width, height, token }: PriceChartProps) {
+export function PriceChart({ width, height, tokenAddress, priceData }: PriceChartProps) {
   const [timePeriod, setTimePeriod] = useAtom(filterTimeAtom)
   const locale = useActiveLocale()
   const theme = useTheme()
 
-  // TODO: Add network selector input, consider using backend type instead of current front end selector type
-  const pricePoints: PricePoint[] = useTokenPriceQuery(token.address, timePeriod, 'ETHEREUM').filter(
-    (p): p is PricePoint => Boolean(p && p.value)
-  )
-
-  const hasData = pricePoints.length !== 0
+  const { priceMap } = useTokenPricesCached(priceData, tokenAddress, 'ETHEREUM', timePeriod)
+  const prices = priceMap.get(timePeriod)
 
-  /* TODO: Implement API calls & cache to use here */
-  const startingPrice = hasData ? pricePoints[0] : DATA_EMPTY
-  const endingPrice = hasData ? pricePoints[pricePoints.length - 1] : DATA_EMPTY
+  const startingPrice = prices?.[0] ?? DATA_EMPTY
+  const endingPrice = prices?.[prices.length - 1] ?? DATA_EMPTY
   const [displayPrice, setDisplayPrice] = useState(startingPrice)
   const [crosshair, setCrosshair] = useState<number | null>(null)
 
   const graphWidth = width + crosshairDateOverhang
-  // TODO: remove this logic after suspense is properly added
   const graphHeight = height - timeOptionsHeight > 0 ? height - timeOptionsHeight : 0
   const graphInnerHeight = graphHeight - margin.top - margin.bottom > 0 ? graphHeight - margin.top - margin.bottom : 0
 
   // Defining scales
   // x scale
-  const timeScale = scaleLinear().domain([startingPrice.timestamp, endingPrice.timestamp]).range([0, width]).nice()
+  const timeScale = useMemo(
+    () => scaleLinear().domain([startingPrice.timestamp, endingPrice.timestamp]).range([0, width]).nice(),
+    [startingPrice, endingPrice, width]
+  )
   // y scale
-  const rdScale = scaleLinear().domain(getPriceBounds(pricePoints)).range([graphInnerHeight, 0])
+  const rdScale = useMemo(
+    () =>
+      scaleLinear()
+        .domain(getPriceBounds(prices ?? []))
+        .range([graphInnerHeight, 0]),
+    [prices, graphInnerHeight]
+  )
 
   function tickFormat(
     startTimestamp: number,
@@ -206,16 +207,18 @@ export function PriceChart({ width, height, token }: PriceChartProps) {
 
   const handleHover = useCallback(
     (event: Element | EventType) => {
+      if (!prices) return
+
       const { x } = localPoint(event) || { x: 0 }
       const x0 = timeScale.invert(x) // get timestamp from the scalexw
       const index = bisect(
-        pricePoints.map((x) => x.timestamp),
+        prices.map((x) => x.timestamp),
         x0,
         1
       )
 
-      const d0 = pricePoints[index - 1]
-      const d1 = pricePoints[index]
+      const d0 = prices[index - 1]
+      const d1 = prices[index]
       let pricePoint = d0
 
       const hasPreviousData = d1 && d1.timestamp
@@ -226,7 +229,7 @@ export function PriceChart({ width, height, token }: PriceChartProps) {
       setCrosshair(timeScale(pricePoint.timestamp))
       setDisplayPrice(pricePoint)
     },
-    [timeScale, pricePoints]
+    [timeScale, prices]
   )
 
   const resetDisplay = useCallback(() => {
@@ -234,8 +237,8 @@ export function PriceChart({ width, height, token }: PriceChartProps) {
     setDisplayPrice(endingPrice)
   }, [setCrosshair, setDisplayPrice, endingPrice])
 
-  // TODO: connect to loading state
-  if (!hasData) {
+  // TODO: Display no data available error
+  if (!prices) {
     return null
   }
 
@@ -264,7 +267,7 @@ export function PriceChart({ width, height, token }: PriceChartProps) {
         </DeltaContainer>
       </ChartHeader>
       <LineChart
-        data={pricePoints}
+        data={prices}
         getX={(p: PricePoint) => timeScale(p.timestamp)}
         getY={(p: PricePoint) => rdScale(p.value)}
         marginTop={margin.top}
@@ -335,7 +338,13 @@ export function PriceChart({ width, height, token }: PriceChartProps) {
       <TimeOptionsWrapper>
         <TimeOptionsContainer>
           {ORDERED_TIMES.map((time) => (
-            <TimeButton key={DISPLAYS[time]} active={timePeriod === time} onClick={() => setTimePeriod(time)}>
+            <TimeButton
+              key={DISPLAYS[time]}
+              active={timePeriod === time}
+              onClick={() => {
+                setTimePeriod(time)
+              }}
+            >
               {DISPLAYS[time]}
             </TimeButton>
           ))}

src/components/Tokens/TokenDetails/TokenDetail.tsx

@@ -7,9 +7,8 @@ import { VerifiedIcon } from 'components/TokenSafety/TokenSafetyIcon'
 import { getChainInfo } from 'constants/chainInfo'
 import { nativeOnChain, WRAPPED_NATIVE_CURRENCY } from 'constants/tokens'
 import { checkWarning } from 'constants/tokenSafety'
-import { chainIdToChainName, useTokenDetailQuery } from 'graphql/data/TokenDetailQuery'
+import { TokenQuery$data } from 'graphql/data/__generated__/TokenQuery.graphql'
 import { useCurrency, useToken } from 'hooks/Tokens'
-import { useAtomValue } from 'jotai/utils'
 import { darken } from 'polished'
 import { Suspense } from 'react'
 import { useState } from 'react'
@@ -18,7 +17,7 @@ import styled from 'styled-components/macro'
 import { CopyContractAddress } from 'theme'
 import { formatDollarAmount } from 'utils/formatDollarAmt'
 
-import { filterNetworkAtom, useIsFavorited, useToggleFavorite } from '../state'
+import { useIsFavorited, useToggleFavorite } from '../state'
 import { ClickFavorited, FavoriteIcon } from '../TokenTable/TokenRow'
 import LoadingTokenDetail from './LoadingTokenDetail'
 import Resource from './Resource'
@@ -169,7 +168,7 @@ export function AboutSection({ address, tokenDetailData }: { address: string; to
   )
 }
 
-export default function LoadedTokenDetail({ address }: { address: string }) {
+export default function LoadedTokenDetail({ address, query }: { address: string; query: TokenQuery$data }) {
   const { chainId: connectedChainId } = useWeb3React()
   const token = useToken(address)
   let currency = useCurrency(address)
@@ -179,13 +178,14 @@ export default function LoadedTokenDetail({ address }: { address: string }) {
   const chainInfo = getChainInfo(token?.chainId)
   const networkLabel = chainInfo?.label
   const networkBadgebackgroundColor = chainInfo?.backgroundColor
-  const filterNetwork = useAtomValue(filterNetworkAtom)
-  const tokenDetailData = useTokenDetailQuery(address, chainIdToChainName(filterNetwork))
-  const relevantTokenDetailData = (({ description, homepageUrl, twitterName }) => ({
-    description,
-    homepageUrl,
-    twitterName,
-  }))(tokenDetailData)
+
+  const tokenData = query.tokenProjects?.[0]
+  const tokenDetails = tokenData?.markets?.[0]
+  const relevantTokenDetailData = {
+    description: tokenData?.description,
+    homepageUrl: tokenData?.homepageUrl,
+    twitterName: tokenData?.twitterName,
+  }
 
   if (!token || !token.name || !token.symbol || !connectedChainId) {
     return <LoadingTokenDetail />
@@ -198,10 +198,8 @@ export default function LoadedTokenDetail({ address }: { address: string }) {
     currency = nativeOnChain(connectedChainId)
   }
 
-  const tokenName = isWrappedNativeToken && currency ? currency.name : tokenDetailData.name
-  const defaultTokenSymbol = tokenDetailData.tokens?.[0]?.symbol ?? token.symbol
-  const tokenSymbol = isWrappedNativeToken && currency ? currency.symbol : defaultTokenSymbol
-
+  const tokenName = tokenData?.name ?? token.name
+  const tokenSymbol = tokenData?.tokens?.[0]?.symbol ?? token.symbol
   return (
     <Suspense fallback={<LoadingTokenDetail />}>
       <TopArea>
@@ -231,7 +229,11 @@ export default function LoadedTokenDetail({ address }: { address: string }) {
             </TokenActions>
           </TokenInfoContainer>
           <ChartContainer>
-            <ParentSize>{({ width, height }) => <PriceChart token={token} width={width} height={height} />}</ParentSize>
+            <ParentSize>
+              {({ width, height }) => (
+                <PriceChart tokenAddress={address} width={width} height={height} priceData={tokenData?.prices?.[0]} />
+              )}
+            </ParentSize>
           </ChartContainer>
         </ChartHeader>
         <StatsSection>
@@ -239,13 +241,13 @@ export default function LoadedTokenDetail({ address }: { address: string }) {
             <Stat>
               <Trans>Market cap</Trans>
               <StatPrice>
-                {tokenDetailData.marketCap?.value ? formatDollarAmount(tokenDetailData.marketCap?.value) : '-'}
+                {tokenDetails?.marketCap?.value ? formatDollarAmount(tokenDetails.marketCap?.value) : '-'}
               </StatPrice>
             </Stat>
             <Stat>
               24H volume
               <StatPrice>
-                {tokenDetailData.volume24h?.value ? formatDollarAmount(tokenDetailData.volume24h?.value) : '-'}
+                {tokenDetails?.volume1D?.value ? formatDollarAmount(tokenDetails.volume1D.value) : '-'}
               </StatPrice>
             </Stat>
           </StatPair>
@@ -253,13 +255,13 @@ export default function LoadedTokenDetail({ address }: { address: string }) {
             <Stat>
               52W low
               <StatPrice>
-                {tokenDetailData.priceLow52W?.value ? formatDollarAmount(tokenDetailData.priceLow52W?.value) : '-'}
+                {tokenDetails?.priceLow52W?.value ? formatDollarAmount(tokenDetails.priceLow52W?.value) : '-'}
               </StatPrice>
             </Stat>
             <Stat>
               52W high
               <StatPrice>
-                {tokenDetailData.priceHigh52W?.value ? formatDollarAmount(tokenDetailData.priceHigh52W?.value) : '-'}
+                {tokenDetails?.priceHigh52W?.value ? formatDollarAmount(tokenDetails.priceHigh52W?.value) : '-'}
               </StatPrice>
             </Stat>
           </StatPair>

src/components/Tokens/TokenTable/TimeSelector.tsx

-import { TimePeriod } from 'graphql/data/TopTokenQuery'
+import { TimePeriod } from 'graphql/data/Token'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
 import { useAtom } from 'jotai'
 import { useRef } from 'react'

src/components/Tokens/TokenTable/TokenRow.tsx

@@ -5,7 +5,8 @@ import { EventName } from 'components/AmplitudeAnalytics/constants'
 import SparklineChart from 'components/Charts/SparklineChart'
 import CurrencyLogo from 'components/CurrencyLogo'
 import { getChainInfo } from 'constants/chainInfo'
-import { TimePeriod, TokenData } from 'graphql/data/TopTokenQuery'
+import { getDurationDetails, SingleTokenData } from 'graphql/data/Token'
+import { TimePeriod } from 'graphql/data/Token'
 import { useCurrency } from 'hooks/Tokens'
 import { useAtomValue } from 'jotai/utils'
 import { ReactNode } from 'react'
@@ -454,29 +455,29 @@ export function LoadingRow() {
 
 /* Loaded State: row component with token information */
 export default function LoadedRow({
-  tokenAddress,
   tokenListIndex,
   tokenListLength,
   tokenData,
   timePeriod,
 }: {
-  tokenAddress: string
   tokenListIndex: number
   tokenListLength: number
-  tokenData: TokenData
+  tokenData: SingleTokenData
   timePeriod: TimePeriod
 }) {
+  const tokenAddress = tokenData?.tokens?.[0].address
   const currency = useCurrency(tokenAddress)
-  const tokenName = tokenData.name
-  const tokenSymbol = tokenData.symbol
+  const tokenName = tokenData?.name
+  const tokenSymbol = tokenData?.tokens?.[0].symbol
   const isFavorited = useIsFavorited(tokenAddress)
   const toggleFavorite = useToggleFavorite(tokenAddress)
   const filterString = useAtomValue(filterStringAtom)
   const filterNetwork = useAtomValue(filterNetworkAtom)
   const L2Icon = getChainInfo(filterNetwork).circleLogoUrl
-  const delta = tokenData.percentChange?.[timePeriod]?.value
-  const arrow = delta ? getDeltaArrow(delta) : null
-  const formattedDelta = delta ? formatDelta(delta) : null
+  const tokenDetails = tokenData?.markets?.[0]
+  const { volume, pricePercentChange } = getDurationDetails(tokenData, timePeriod)
+  const arrow = pricePercentChange ? getDeltaArrow(pricePercentChange) : null
+  const formattedDelta = pricePercentChange ? formatDelta(pricePercentChange) : null
 
   const exploreTokenSelectedEventProperties = {
     chain_id: filterNetwork,
@@ -522,7 +523,7 @@ export default function LoadedRow({
         price={
           <ClickableContent>
             <PriceInfoCell>
-              {tokenData.price?.value ? formatDollarAmount(tokenData.price?.value) : '-'}
+              {tokenDetails?.price?.value ? formatDollarAmount(tokenDetails?.price?.value) : '-'}
               <PercentChangeInfoCell>
                 {formattedDelta}
                 {arrow}
@@ -538,16 +539,10 @@ export default function LoadedRow({
         }
         marketCap={
           <ClickableContent>
-            {tokenData.marketCap?.value ? formatDollarAmount(tokenData.marketCap?.value) : '-'}
-          </ClickableContent>
-        }
-        volume={
-          <ClickableContent>
-            {tokenData.volume?.[timePeriod]?.value
-              ? formatDollarAmount(tokenData.volume?.[timePeriod]?.value ?? undefined)
-              : '-'}
+            {tokenDetails?.marketCap?.value ? formatDollarAmount(tokenDetails?.marketCap?.value) : '-'}
           </ClickableContent>
         }
+        volume={<ClickableContent>{volume ? formatDollarAmount(volume ?? undefined) : '-'}</ClickableContent>}
         sparkLine={
           <SparkLine>
             <ParentSize>{({ width, height }) => <SparklineChart width={width} height={height} />}</ParentSize>

src/components/Tokens/TokenTable/TokenTable.tsx

@@ -7,7 +7,9 @@ import {
   sortCategoryAtom,
   sortDirectionAtom,
 } from 'components/Tokens/state'
-import { TimePeriod, TokenData } from 'graphql/data/TopTokenQuery'
+import { TokenTopQuery$data } from 'graphql/data/__generated__/TokenTopQuery.graphql'
+import { getDurationDetails, SingleTokenData, useTopTokenQuery } from 'graphql/data/Token'
+import { TimePeriod } from 'graphql/data/Token'
 import { useAtomValue } from 'jotai/utils'
 import { ReactNode, Suspense, useCallback, useMemo } from 'react'
 import { AlertTriangle } from 'react-feather'
@@ -47,33 +49,37 @@ const TokenRowsContainer = styled.div`
   width: 100%;
 `
 
-function useFilteredTokens(tokens: TokenData[] | undefined) {
+function useFilteredTokens(data: TokenTopQuery$data): SingleTokenData[] | undefined {
   const filterString = useAtomValue(filterStringAtom)
-  const favoriteTokenAddresses = useAtomValue(favoritesAtom)
+  const favorites = useAtomValue(favoritesAtom)
   const showFavorites = useAtomValue(showFavoritesAtom)
-  const shownTokens =
-    showFavorites && tokens ? tokens.filter((token) => favoriteTokenAddresses.includes(token.address)) : tokens
 
   return useMemo(
     () =>
-      (shownTokens ?? []).filter((token) => {
-        if (!token.address) {
-          return false
-        }
-        if (!filterString) {
-          return true
-        }
-        const lowercaseFilterString = filterString.toLowerCase()
-        const addressIncludesFilterString = token?.address?.toLowerCase().includes(lowercaseFilterString)
-        const nameIncludesFilterString = token?.name?.toLowerCase().includes(lowercaseFilterString)
-        const symbolIncludesFilterString = token?.symbol?.toLowerCase().includes(lowercaseFilterString)
-        return nameIncludesFilterString || symbolIncludesFilterString || addressIncludesFilterString
-      }),
-    [shownTokens, filterString]
+      data.topTokenProjects
+        ?.filter(
+          (token) => !showFavorites || (token?.tokens?.[0].address && favorites.includes(token?.tokens?.[0].address))
+        )
+        .filter((token) => {
+          const tokenInfo = token?.tokens?.[0]
+          const address = tokenInfo?.address
+          if (!address) {
+            return false
+          } else if (!filterString) {
+            return true
+          } else {
+            const lowercaseFilterString = filterString.toLowerCase()
+            const addressIncludesFilterString = address?.toLowerCase().includes(lowercaseFilterString)
+            const nameIncludesFilterString = token?.name?.toLowerCase().includes(lowercaseFilterString)
+            const symbolIncludesFilterString = tokenInfo?.symbol?.toLowerCase().includes(lowercaseFilterString)
+            return nameIncludesFilterString || symbolIncludesFilterString || addressIncludesFilterString
+          }
+        }),
+    [data.topTokenProjects, favorites, filterString, showFavorites]
   )
 }
 
-function useSortedTokens(tokenData: TokenData[] | null) {
+function useSortedTokens(tokenData: SingleTokenData[] | undefined) {
   const sortCategory = useAtomValue(sortCategoryAtom)
   const sortDirection = useAtomValue(sortDirectionAtom)
   const timePeriod = useAtomValue<TimePeriod>(filterTimeAtom)
@@ -103,22 +109,25 @@ function useSortedTokens(tokenData: TokenData[] | null) {
         }
         let a: number | null | undefined
         let b: number | null | undefined
+
+        const { volume: aVolume, pricePercentChange: aChange } = getDurationDetails(token1, timePeriod)
+        const { volume: bVolume, pricePercentChange: bChange } = getDurationDetails(token2, timePeriod)
         switch (sortCategory) {
           case Category.marketCap:
-            a = token1.marketCap?.value
-            b = token2.marketCap?.value
+            a = token1.markets?.[0]?.marketCap?.value
+            b = token2.markets?.[0]?.marketCap?.value
             break
           case Category.price:
-            a = token1.price?.value
-            b = token2.price?.value
+            a = token1.markets?.[0]?.price?.value
+            b = token2.markets?.[0]?.price?.value
             break
           case Category.volume:
-            a = token1.volume?.[timePeriod]?.value
-            b = token2.volume?.[timePeriod]?.value
+            a = aVolume
+            b = bVolume
             break
           case Category.percentChange:
-            a = token1.percentChange?.[timePeriod]?.value
-            b = token2.percentChange?.[timePeriod]?.value
+            a = aChange
+            b = bChange
             break
         }
         return sortFn(a, b)
@@ -149,14 +158,15 @@ export function LoadingTokenTable() {
   )
 }
 
-export default function TokenTable({ data }: { data: TokenData[] | undefined }) {
+export default function TokenTable() {
   const showFavorites = useAtomValue<boolean>(showFavoritesAtom)
   const timePeriod = useAtomValue<TimePeriod>(filterTimeAtom)
-  const filteredTokens = useFilteredTokens(data)
+  const topTokens = useTopTokenQuery(1, timePeriod)
+  const filteredTokens = useFilteredTokens(topTokens)
   const sortedFilteredTokens = useSortedTokens(filteredTokens)
 
   /* loading and error state */
-  if (data === null) {
+  if (topTokens === null) {
     return (
       <NoTokensState
         message={
@@ -184,8 +194,7 @@ export default function TokenTable({ data }: { data: TokenData[] | undefined })
         <TokenRowsContainer>
           {sortedFilteredTokens?.map((token, index) => (
             <LoadedRow
-              key={token.address}
-              tokenAddress={token.address}
+              key={token?.name}
               tokenListIndex={index}
               tokenListLength={sortedFilteredTokens.length}
               tokenData={token}

src/components/Tokens/state.ts

 import { SupportedChainId } from 'constants/chains'
-import { TimePeriod } from 'graphql/data/TopTokenQuery'
+import { TimePeriod } from 'graphql/data/Token'
 import { atom, useAtom } from 'jotai'
 import { atomWithReset, atomWithStorage, useAtomValue } from 'jotai/utils'
 import { useCallback, useMemo } from 'react'
@@ -15,10 +15,11 @@ export const sortCategoryAtom = atom<Category>(Category.marketCap)
 export const sortDirectionAtom = atom<SortDirection>(SortDirection.decreasing)
 
 /* for favoriting tokens */
-export function useToggleFavorite(tokenAddress: string) {
+export function useToggleFavorite(tokenAddress: string | undefined | null) {
   const [favoriteTokens, updateFavoriteTokens] = useAtom(favoritesAtom)
 
   return useCallback(() => {
+    if (!tokenAddress) return
     let updatedFavoriteTokens
     if (favoriteTokens.includes(tokenAddress.toLocaleLowerCase())) {
       updatedFavoriteTokens = favoriteTokens.filter((address: string) => {
@@ -48,8 +49,11 @@ export function useSetSortCategory(category: Category) {
   }, [category, sortCategory, setSortCategory, sortDirection, setDirectionCategory])
 }
 
-export function useIsFavorited(tokenAddress: string) {
+export function useIsFavorited(tokenAddress: string | null | undefined) {
   const favoritedTokens = useAtomValue<string[]>(favoritesAtom)
 
-  return useMemo(() => favoritedTokens.includes(tokenAddress.toLocaleLowerCase()), [favoritedTokens, tokenAddress])
+  return useMemo(
+    () => (tokenAddress ? favoritedTokens.includes(tokenAddress.toLocaleLowerCase()) : false),
+    [favoritedTokens, tokenAddress]
+  )
 }

src/graphql/data/RelayEnvironment.ts

-import { Environment, Network, RecordSource, Store } from 'relay-runtime'
+import ms from 'ms.macro'
+import { Variables } from 'react-relay'
+import { Environment, Network, RecordSource, RequestParameters, Store } from 'relay-runtime'
+import RelayQueryResponseCache from 'relay-runtime/lib/network/RelayQueryResponseCache'
 
 import fetchGraphQL from './fetchGraphQL'
 
+// max number of request in cache, least-recently updated entries purged first
+const size = 250
+// number in milliseconds, how long records stay valid in cache
+const ttl = ms`5m`
+export const cache = new RelayQueryResponseCache({ size, ttl })
+
+const fetchQuery = async function wrappedFetchQuery(params: RequestParameters, variables: Variables) {
+  const queryID = params.name
+  const cachedData = cache.get(queryID, variables)
+
+  if (cachedData !== null) return cachedData
+
+  return fetchGraphQL(params, variables).then((data) => {
+    if (params.operationKind !== 'mutation') {
+      cache.set(queryID, variables, data)
+    }
+    return data
+  })
+}
+
+// This property tells Relay to not immediately clear its cache when the user
+// navigates around the app. Relay will hold onto the specified number of
+// query results, allowing the user to return to recently visited pages
+// and reusing cached data if its available/fresh.
+const gcReleaseBufferSize = 10
+
+const store = new Store(new RecordSource(), { gcReleaseBufferSize })
+const network = Network.create(fetchQuery)
+
 // Export a singleton instance of Relay Environment configured with our network function:
 export default new Environment({
-  network: Network.create(fetchGraphQL),
-  store: new Store(new RecordSource()),
+  network,
+  store,
 })

src/graphql/data/Token.ts

+import graphql from 'babel-plugin-relay/macro'
+import { useEffect, useState } from 'react'
+import { fetchQuery, useFragment, useLazyLoadQuery, useRelayEnvironment } from 'react-relay'
+
+import { TokenPriceQuery } from './__generated__/TokenPriceQuery.graphql'
+import { TokenPrices$data, TokenPrices$key } from './__generated__/TokenPrices.graphql'
+import { Chain, HistoryDuration, TokenQuery, TokenQuery$data } from './__generated__/TokenQuery.graphql'
+import { TokenTopQuery, TokenTopQuery$data } from './__generated__/TokenTopQuery.graphql'
+
+export enum TimePeriod {
+  HOUR,
+  DAY,
+  WEEK,
+  MONTH,
+  YEAR,
+  ALL,
+}
+
+function toHistoryDuration(timePeriod: TimePeriod): HistoryDuration {
+  switch (timePeriod) {
+    case TimePeriod.HOUR:
+      return 'HOUR'
+    case TimePeriod.DAY:
+      return 'DAY'
+    case TimePeriod.WEEK:
+      return 'WEEK'
+    case TimePeriod.MONTH:
+      return 'MONTH'
+    case TimePeriod.YEAR:
+      return 'YEAR'
+    case TimePeriod.ALL:
+      return 'MAX'
+  }
+}
+
+export type PricePoint = { value: number; timestamp: number }
+
+const topTokensQuery = graphql`
+  query TokenTopQuery($page: Int!, $duration: HistoryDuration!) {
+    topTokenProjects(orderBy: MARKET_CAP, pageSize: 20, currency: USD, page: $page) {
+      description
+      homepageUrl
+      twitterName
+      name
+      tokens {
+        chain
+        address
+        symbol
+      }
+      prices: markets(currencies: [USD]) {
+        ...TokenPrices
+      }
+      markets(currencies: [USD]) {
+        price {
+          value
+          currency
+        }
+        marketCap {
+          value
+          currency
+        }
+        fullyDilutedMarketCap {
+          value
+          currency
+        }
+        volume1D: volume(duration: DAY) {
+          value
+          currency
+        }
+        volume1W: volume(duration: WEEK) {
+          value
+          currency
+        }
+        volume1M: volume(duration: MONTH) {
+          value
+          currency
+        }
+        volume1Y: volume(duration: YEAR) {
+          value
+          currency
+        }
+        pricePercentChange24h {
+          currency
+          value
+        }
+        pricePercentChange1W: pricePercentChange(duration: WEEK) {
+          currency
+          value
+        }
+        pricePercentChange1M: pricePercentChange(duration: MONTH) {
+          currency
+          value
+        }
+        pricePercentChange1Y: pricePercentChange(duration: YEAR) {
+          currency
+          value
+        }
+        priceHigh52W: priceHighLow(duration: YEAR, highLow: HIGH) {
+          value
+          currency
+        }
+        priceLow52W: priceHighLow(duration: YEAR, highLow: LOW) {
+          value
+          currency
+        }
+      }
+    }
+  }
+`
+const tokenPricesFragment = graphql`
+  fragment TokenPrices on TokenProjectMarket {
+    priceHistory(duration: $duration) {
+      timestamp
+      value
+    }
+  }
+`
+type CachedTopToken = NonNullable<NonNullable<TokenTopQuery$data>['topTokenProjects']>[number]
+
+let cachedTopTokens: Record<string, CachedTopToken> = {}
+export function useTopTokenQuery(page: number, timePeriod: TimePeriod) {
+  const topTokens = useLazyLoadQuery<TokenTopQuery>(topTokensQuery, { page, duration: toHistoryDuration(timePeriod) })
+
+  cachedTopTokens =
+    topTokens.topTokenProjects?.reduce((acc, current) => {
+      const address = current?.tokens?.[0].address
+      if (address) acc[address] = current
+      return acc
+    }, {} as Record<string, CachedTopToken>) ?? {}
+  console.log(cachedTopTokens)
+
+  return topTokens
+}
+
+const tokenQuery = graphql`
+  query TokenQuery($contract: ContractInput!, $duration: HistoryDuration!, $skip: Boolean = false) {
+    tokenProjects(contracts: [$contract]) @skip(if: $skip) {
+      description
+      homepageUrl
+      twitterName
+      name
+      tokens {
+        chain
+        address
+        symbol
+      }
+      prices: markets(currencies: [USD]) {
+        ...TokenPrices
+      }
+      markets(currencies: [USD]) {
+        price {
+          value
+          currency
+        }
+        marketCap {
+          value
+          currency
+        }
+        fullyDilutedMarketCap {
+          value
+          currency
+        }
+        volume1D: volume(duration: DAY) {
+          value
+          currency
+        }
+        volume1W: volume(duration: WEEK) {
+          value
+          currency
+        }
+        volume1M: volume(duration: MONTH) {
+          value
+          currency
+        }
+        volume1Y: volume(duration: YEAR) {
+          value
+          currency
+        }
+        pricePercentChange24h {
+          currency
+          value
+        }
+        pricePercentChange1W: pricePercentChange(duration: WEEK) {
+          currency
+          value
+        }
+        pricePercentChange1M: pricePercentChange(duration: MONTH) {
+          currency
+          value
+        }
+        pricePercentChange1Y: pricePercentChange(duration: YEAR) {
+          currency
+          value
+        }
+        priceHigh52W: priceHighLow(duration: YEAR, highLow: HIGH) {
+          value
+          currency
+        }
+        priceLow52W: priceHighLow(duration: YEAR, highLow: LOW) {
+          value
+          currency
+        }
+      }
+    }
+  }
+`
+
+export function useTokenQuery(address: string, chain: Chain, timePeriod: TimePeriod) {
+  const cachedTopToken = cachedTopTokens[address]
+  const data = useLazyLoadQuery<TokenQuery>(tokenQuery, {
+    contract: { address, chain },
+    duration: toHistoryDuration(timePeriod),
+    skip: !!cachedTopToken,
+  })
+
+  return !cachedTopToken ? data : { tokenProjects: [{ ...cachedTopToken }] }
+}
+
+const tokenPriceQuery = graphql`
+  query TokenPriceQuery(
+    $contract: ContractInput!
+    $skip1H: Boolean!
+    $skip1D: Boolean!
+    $skip1W: Boolean!
+    $skip1M: Boolean!
+    $skip1Y: Boolean!
+    $skipMax: Boolean!
+  ) {
+    tokenProjects(contracts: [$contract]) {
+      markets(currencies: [USD]) {
+        priceHistory1H: priceHistory(duration: HOUR) @skip(if: $skip1H) {
+          timestamp
+          value
+        }
+        priceHistory1D: priceHistory(duration: DAY) @skip(if: $skip1D) {
+          timestamp
+          value
+        }
+        priceHistory1W: priceHistory(duration: WEEK) @skip(if: $skip1W) {
+          timestamp
+          value
+        }
+        priceHistory1M: priceHistory(duration: MONTH) @skip(if: $skip1M) {
+          timestamp
+          value
+        }
+        priceHistory1Y: priceHistory(duration: YEAR) @skip(if: $skip1Y) {
+          timestamp
+          value
+        }
+        priceHistoryMAX: priceHistory(duration: MAX) @skip(if: $skipMax) {
+          timestamp
+          value
+        }
+      }
+    }
+  }
+`
+
+function filterPrices(prices: TokenPrices$data['priceHistory'] | undefined) {
+  return prices?.filter((p): p is PricePoint => Boolean(p && p.value))
+}
+
+export function useTokenPricesCached(
+  key: TokenPrices$key | null | undefined,
+  address: string,
+  chain: Chain,
+  timePeriod: TimePeriod
+) {
+  // Attempt to use token prices already provided by TokenDetails / TopToken queries
+  const environment = useRelayEnvironment()
+  const fetchedTokenPrices = useFragment(tokenPricesFragment, key ?? null)?.priceHistory
+
+  const [priceMap, setPriceMap] = useState(
+    new Map<TimePeriod, PricePoint[] | undefined>([[timePeriod, filterPrices(fetchedTokenPrices)]])
+  )
+
+  function updatePrices(key: TimePeriod, data?: PricePoint[]) {
+    setPriceMap(new Map(priceMap.set(key, data)))
+  }
+
+  // Fetch the other timePeriods after first render
+  useEffect(() => {
+    // Fetch all time periods except the one already populated
+    fetchQuery<TokenPriceQuery>(environment, tokenPriceQuery, {
+      contract: { address, chain },
+      skip1H: timePeriod === TimePeriod.HOUR && !!fetchedTokenPrices,
+      skip1D: timePeriod === TimePeriod.DAY && !!fetchedTokenPrices,
+      skip1W: timePeriod === TimePeriod.WEEK && !!fetchedTokenPrices,
+      skip1M: timePeriod === TimePeriod.MONTH && !!fetchedTokenPrices,
+      skip1Y: timePeriod === TimePeriod.YEAR && !!fetchedTokenPrices,
+      skipMax: timePeriod === TimePeriod.ALL && !!fetchedTokenPrices,
+    }).subscribe({
+      next: (data) => {
+        const markets = data.tokenProjects?.[0]?.markets?.[0]
+        if (markets) {
+          markets.priceHistory1H && updatePrices(TimePeriod.HOUR, filterPrices(markets.priceHistory1H))
+          markets.priceHistory1D && updatePrices(TimePeriod.DAY, filterPrices(markets.priceHistory1D))
+          markets.priceHistory1W && updatePrices(TimePeriod.WEEK, filterPrices(markets.priceHistory1W))
+          markets.priceHistory1M && updatePrices(TimePeriod.MONTH, filterPrices(markets.priceHistory1M))
+          markets.priceHistory1Y && updatePrices(TimePeriod.YEAR, filterPrices(markets.priceHistory1Y))
+          markets.priceHistoryMAX && updatePrices(TimePeriod.ALL, filterPrices(markets.priceHistoryMAX))
+        }
+      },
+    })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return { priceMap }
+}
+
+export type SingleTokenData = NonNullable<TokenQuery$data['tokenProjects']>[number]
+export function getDurationDetails(data: SingleTokenData, timePeriod: TimePeriod) {
+  let volume = null
+  let pricePercentChange = null
+
+  const markets = data?.markets?.[0]
+  if (markets) {
+    switch (timePeriod) {
+      case TimePeriod.HOUR:
+        pricePercentChange = null
+        break
+      case TimePeriod.DAY:
+        volume = markets.volume1D?.value
+        pricePercentChange = markets.pricePercentChange24h?.value
+        break
+      case TimePeriod.WEEK:
+        volume = markets.volume1W?.value
+        pricePercentChange = markets.pricePercentChange1W?.value
+        break
+      case TimePeriod.MONTH:
+        volume = markets.volume1M?.value
+        pricePercentChange = markets.pricePercentChange1M?.value
+        break
+      case TimePeriod.YEAR:
+        volume = markets.volume1Y?.value
+        pricePercentChange = markets.pricePercentChange1Y?.value
+        break
+      case TimePeriod.ALL:
+        volume = null
+        pricePercentChange = null
+        break
+    }
+  }
+
+  return { volume, pricePercentChange }
+}

src/graphql/data/TokenDetailQuery.ts

-import graphql from 'babel-plugin-relay/macro'
-import { SupportedChainId } from 'constants/chains'
-import { useLazyLoadQuery } from 'react-relay'
-
-import type { Chain, TokenDetailQuery as TokenDetailQueryType } from './__generated__/TokenDetailQuery.graphql'
-
-export function chainIdToChainName(networkId: SupportedChainId): Chain {
-  switch (networkId) {
-    case SupportedChainId.MAINNET:
-      return 'ETHEREUM'
-    case SupportedChainId.ARBITRUM_ONE:
-      return 'ARBITRUM'
-    case SupportedChainId.OPTIMISM:
-      return 'OPTIMISM'
-    case SupportedChainId.POLYGON:
-      return 'POLYGON'
-    default:
-      return 'ETHEREUM'
-  }
-}
-
-export function useTokenDetailQuery(address: string, chain: Chain) {
-  const tokenDetail = useLazyLoadQuery<TokenDetailQueryType>(
-    graphql`
-      query TokenDetailQuery($contract: ContractInput!) {
-        tokenProjects(contracts: [$contract]) {
-          description
-          homepageUrl
-          twitterName
-          name
-          markets(currencies: [USD]) {
-            price {
-              value
-              currency
-            }
-            marketCap {
-              value
-              currency
-            }
-            fullyDilutedMarketCap {
-              value
-              currency
-            }
-            volume24h: volume(duration: DAY) {
-              value
-              currency
-            }
-            priceHigh52W: priceHighLow(duration: YEAR, highLow: HIGH) {
-              value
-              currency
-            }
-            priceLow52W: priceHighLow(duration: YEAR, highLow: LOW) {
-              value
-              currency
-            }
-          }
-          tokens {
-            chain
-            address
-            symbol
-            decimals
-          }
-        }
-      }
-    `,
-    {
-      contract: {
-        address,
-        chain,
-      },
-    }
-  )
-  const { description, homepageUrl, twitterName, name, markets, tokens } = tokenDetail?.tokenProjects?.[0] ?? {}
-  const { price, marketCap, fullyDilutedMarketCap, volume24h, priceHigh52W, priceLow52W } = markets?.[0] ?? {}
-  return {
-    description,
-    homepageUrl,
-    twitterName,
-    name,
-    markets,
-    tokens,
-    price,
-    marketCap,
-    fullyDilutedMarketCap,
-    volume24h,
-    priceHigh52W,
-    priceLow52W,
-  }
-}

src/graphql/data/TokenPriceQuery.ts

-import graphql from 'babel-plugin-relay/macro'
-import { useLazyLoadQuery } from 'react-relay'
-
-import type { Chain, TokenPriceQuery as TokenPriceQueryType } from './__generated__/TokenPriceQuery.graphql'
-import { TimePeriod } from './TopTokenQuery'
-
-export function useTokenPriceQuery(address: string, timePeriod: TimePeriod, chain: Chain) {
-  const tokenPrices = useLazyLoadQuery<TokenPriceQueryType>(
-    graphql`
-      query TokenPriceQuery($contract: ContractInput!) {
-        tokenProjects(contracts: [$contract]) {
-          name
-          markets(currencies: [USD]) {
-            priceHistory1H: priceHistory(duration: HOUR) {
-              timestamp
-              value
-            }
-            priceHistory1D: priceHistory(duration: DAY) {
-              timestamp
-              value
-            }
-            priceHistory1W: priceHistory(duration: WEEK) {
-              timestamp
-              value
-            }
-            priceHistory1M: priceHistory(duration: MONTH) {
-              timestamp
-              value
-            }
-            priceHistory1Y: priceHistory(duration: YEAR) {
-              timestamp
-              value
-            }
-          }
-          tokens {
-            chain
-            address
-            symbol
-            decimals
-          }
-        }
-      }
-    `,
-    {
-      contract: {
-        address,
-        chain,
-      },
-    }
-  )
-  const { priceHistory1H, priceHistory1D, priceHistory1W, priceHistory1M, priceHistory1Y } =
-    tokenPrices.tokenProjects?.[0]?.markets?.[0] ?? {}
-
-  switch (timePeriod) {
-    case TimePeriod.HOUR:
-      return priceHistory1H ?? []
-    case TimePeriod.DAY:
-      return priceHistory1D ?? []
-    case TimePeriod.WEEK:
-      return priceHistory1W ?? []
-    case TimePeriod.MONTH:
-      return priceHistory1M ?? []
-    case TimePeriod.YEAR:
-      return priceHistory1Y ?? []
-    case TimePeriod.ALL:
-      //TODO: Add functionality for ALL, without requesting it at same time as rest of data for performance reasons
-      return priceHistory1Y ?? []
-  }
-}

src/graphql/data/TopTokenQuery.ts

-import graphql from 'babel-plugin-relay/macro'
-import { useLazyLoadQuery } from 'react-relay'
-
-import type { Chain, Currency, TopTokenQuery as TopTokenQueryType } from './__generated__/TopTokenQuery.graphql'
-
-export enum TimePeriod {
-  HOUR,
-  DAY,
-  WEEK,
-  MONTH,
-  YEAR,
-  ALL,
-}
-
-interface IAmount {
-  currency: Currency | null
-  value: number | null
-}
-
-export type TokenData = {
-  name: string | null
-  address: string
-  chain: Chain | null
-  symbol: string | null
-  price: IAmount | null | undefined
-  marketCap: IAmount | null | undefined
-  volume: Record<TimePeriod, IAmount | null | undefined>
-  percentChange: Record<TimePeriod, IAmount | null | undefined>
-}
-
-export interface UseTopTokensResult {
-  data: TokenData[] | undefined
-  error: string | null
-  loading: boolean
-}
-
-export function useTopTokenQuery(page: number) {
-  const topTokenData = useLazyLoadQuery<TopTokenQueryType>(
-    graphql`
-      query TopTokenQuery($page: Int!) {
-        topTokenProjects(orderBy: MARKET_CAP, pageSize: 100, currency: USD, page: $page) {
-          name
-          tokens {
-            chain
-            address
-            symbol
-          }
-          markets(currencies: [USD]) {
-            price {
-              value
-              currency
-            }
-            marketCap {
-              value
-              currency
-            }
-            fullyDilutedMarketCap {
-              value
-              currency
-            }
-            volume1H: volume(duration: HOUR) {
-              value
-              currency
-            }
-            volume1D: volume(duration: DAY) {
-              value
-              currency
-            }
-            volume1W: volume(duration: WEEK) {
-              value
-              currency
-            }
-            volume1M: volume(duration: MONTH) {
-              value
-              currency
-            }
-            volume1Y: volume(duration: YEAR) {
-              value
-              currency
-            }
-            volumeAll: volume(duration: MAX) {
-              value
-              currency
-            }
-            pricePercentChange1H: pricePercentChange(duration: HOUR) {
-              currency
-              value
-            }
-            pricePercentChange24h {
-              currency
-              value
-            }
-            pricePercentChange1W: pricePercentChange(duration: WEEK) {
-              currency
-              value
-            }
-            pricePercentChange1M: pricePercentChange(duration: MONTH) {
-              currency
-              value
-            }
-            pricePercentChange1Y: pricePercentChange(duration: YEAR) {
-              currency
-              value
-            }
-            pricePercentChangeAll: pricePercentChange(duration: MAX) {
-              currency
-              value
-            }
-          }
-        }
-      }
-    `,
-    {
-      page,
-    }
-  )
-
-  const topTokens: TokenData[] | undefined = topTokenData.topTokenProjects?.map((token) =>
-    token?.tokens?.[0].address
-      ? {
-          name: token?.name,
-          address: token?.tokens?.[0].address,
-          chain: token?.tokens?.[0].chain,
-          symbol: token?.tokens?.[0].symbol,
-          price: token?.markets?.[0]?.price,
-          marketCap: token?.markets?.[0]?.marketCap,
-          volume: {
-            [TimePeriod.HOUR]: token?.markets?.[0]?.volume1H,
-            [TimePeriod.DAY]: token?.markets?.[0]?.volume1D,
-            [TimePeriod.WEEK]: token?.markets?.[0]?.volume1W,
-            [TimePeriod.MONTH]: token?.markets?.[0]?.volume1M,
-            [TimePeriod.YEAR]: token?.markets?.[0]?.volume1Y,
-            [TimePeriod.ALL]: token?.markets?.[0]?.volumeAll,
-          },
-          percentChange: {
-            [TimePeriod.HOUR]: token?.markets?.[0]?.pricePercentChange1H,
-            [TimePeriod.DAY]: token?.markets?.[0]?.pricePercentChange24h,
-            [TimePeriod.WEEK]: token?.markets?.[0]?.pricePercentChange1W,
-            [TimePeriod.MONTH]: token?.markets?.[0]?.pricePercentChange1M,
-            [TimePeriod.YEAR]: token?.markets?.[0]?.pricePercentChange1Y,
-            [TimePeriod.ALL]: token?.markets?.[0]?.pricePercentChangeAll,
-          },
-        }
-      : ({} as TokenData)
-  )
-  return topTokens
-}

src/hooks/useNetworkTokenBalances.ts

@@ -43,10 +43,8 @@ export function useNetworkTokenBalances({ address }: useNetworkTokenBalancesArgs
         const waitRandom = (min: number, max: number): Promise<void> =>
           new Promise((resolve) => setTimeout(resolve, min + Math.round(Math.random() * Math.max(0, max - min))))
         try {
-          console.log('useNetworkTokenBalances.fetchNetworkTokenBalances', query)
           setLoading(true)
           setError(null)
-          console.log('useNetworkTokenBalances.fetchNetworkTokenBalances', address)
           await waitRandom(250, 2000)
           if (Math.random() < 0.05) {
             throw new Error('fake error')

src/pages/TokenDetails/index.tsx

@@ -5,6 +5,7 @@ import {
   MOBILE_MEDIA_BREAKPOINT,
   SMALL_MEDIA_BREAKPOINT,
 } from 'components/Tokens/constants'
+import { filterTimeAtom } from 'components/Tokens/state'
 import BalanceSummary from 'components/Tokens/TokenDetails/BalanceSummary'
 import FooterBalanceSummary from 'components/Tokens/TokenDetails/FooterBalanceSummary'
 import LoadingTokenDetail from 'components/Tokens/TokenDetails/LoadingTokenDetail'
@@ -16,10 +17,12 @@ import Widget, { WIDGET_WIDTH } from 'components/Widget'
 import { getChainInfo } from 'constants/chainInfo'
 import { L1_CHAIN_IDS, L2_CHAIN_IDS, SupportedChainId, TESTNET_CHAIN_IDS } from 'constants/chains'
 import { checkWarning } from 'constants/tokenSafety'
+import { useTokenQuery } from 'graphql/data/Token'
 import { useIsUserAddedToken, useToken } from 'hooks/Tokens'
 import { useNetworkTokenBalances } from 'hooks/useNetworkTokenBalances'
+import { useAtomValue } from 'jotai/utils'
 import { useCallback, useMemo, useState } from 'react'
-import { Navigate, useLocation, useNavigate, useParams } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router-dom'
 import styled from 'styled-components/macro'
 
 const Footer = styled.div`
@@ -77,7 +80,6 @@ function NetworkBalances(tokenAddress: string | undefined) {
 }
 
 export default function TokenDetails() {
-  const location = useLocation()
   const { tokenAddress } = useParams<{ tokenAddress?: string }>()
   const token = useToken(tokenAddress)
   const tokenWarning = tokenAddress ? checkWarning(tokenAddress) : null
@@ -115,6 +117,9 @@ export default function TokenDetails() {
     return chainIds
   }, [connectedChainId])
 
+  const timePeriod = useAtomValue(filterTimeAtom)
+  const query = useTokenQuery(tokenAddress ?? '', 'ETHEREUM', timePeriod)
+
   const balancesByNetwork = networkData
     ? chainsToList.map((chainId) => {
         const amount = networkData[chainId]
@@ -137,15 +142,17 @@ export default function TokenDetails() {
       })
     : null
 
-  if (token === undefined) {
-    return <Navigate to={{ ...location, pathname: '/tokens' }} replace />
-  }
+  // TODO: Fix this logic to not automatically redirect on refresh, yet still catch invalid addresses
+  //const location = useLocation()
+  //if (token === undefined) {
+  //  return <Navigate to={{ ...location, pathname: '/tokens' }} replace />
+  //}
 
   return (
     <TokenDetailsLayout>
       {token && (
         <>
-          <TokenDetail address={token.address} />
+          <TokenDetail address={token.address} query={query} />
           <RightPanel>
             <Widget defaultToken={token ?? undefined} onReviewSwapClick={onReviewSwap} />
             {tokenWarning && <TokenSafetyMessage tokenAddress={token.address} warning={tokenWarning} />}

src/pages/Tokens/index.tsx

@@ -9,7 +9,6 @@ import SearchBar from 'components/Tokens/TokenTable/SearchBar'
 import TimeSelector from 'components/Tokens/TokenTable/TimeSelector'
 import TokenTable, { LoadingTokenTable } from 'components/Tokens/TokenTable/TokenTable'
 import { TokensNetworkFilterVariant, useTokensNetworkFilterFlag } from 'featureFlags/flags/tokensNetworkFilter'
-import { useTopTokenQuery } from 'graphql/data/TopTokenQuery'
 import { useResetAtom } from 'jotai/utils'
 import { useEffect } from 'react'
 import { useLocation } from 'react-router-dom'
@@ -69,7 +68,6 @@ const FiltersWrapper = styled.div`
 `
 
 const Tokens = () => {
-  const topTokens = useTopTokenQuery(1)
   const tokensNetworkFilterFlag = useTokensNetworkFilterFlag()
   const resetFilterString = useResetAtom(filterStringAtom)
   const location = useLocation()
@@ -98,7 +96,7 @@ const Tokens = () => {
         </FiltersWrapper>
 
         <TokenTableContainer>
-          <TokenTable data={topTokens} />
+          <TokenTable />
         </TokenTableContainer>
       </ExploreContainer>
     </Trace>