feat: Add favorite tokens from localstorage to /explore top tokens data query (#4351)

* init

* move to explore page level

* remove extraneous useTopTokens hook replaced by useExplorePageQuery

src/components/Charts/PriceChart.tsx

@@ -6,8 +6,8 @@ import { Line } from '@visx/shape'
 import { filterTimeAtom } from 'components/Explore/state'
 import { bisect, curveBasis, NumberValue, scaleLinear } from 'd3'
 import { useActiveLocale } from 'hooks/useActiveLocale'
+import { TimePeriod } from 'hooks/useExplorePageQuery'
 import useTheme from 'hooks/useTheme'
-import { TimePeriod } from 'hooks/useTopTokens'
 import { useAtom } from 'jotai'
 import { useCallback, useState } from 'react'
 import { ArrowDownRight, ArrowUpRight } from 'react-feather'

src/components/Explore/TokenTable/TimeSelector.tsx

+import { TimePeriod } from 'hooks/useExplorePageQuery'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
-import { TimePeriod } from 'hooks/useTopTokens'
 import { useAtom } from 'jotai'
 import { useRef } from 'react'
 import { Check, ChevronDown, ChevronUp } from 'react-feather'

src/components/Explore/TokenTable/TokenRow.tsx

@@ -5,8 +5,8 @@ import { EventName } from 'components/AmplitudeAnalytics/constants'
 import SparklineChart from 'components/Charts/SparklineChart'
 import CurrencyLogo from 'components/CurrencyLogo'
 import { useCurrency, useToken } from 'hooks/Tokens'
+import { TimePeriod, TokenData } from 'hooks/useExplorePageQuery'
 import useTheme from 'hooks/useTheme'
-import { TimePeriod, TokenData } from 'hooks/useTopTokens'
 import { useAtom } from 'jotai'
 import { useAtomValue } from 'jotai/utils'
 import { ReactNode } from 'react'

src/components/Explore/TokenTable/TokenTable.tsx

@@ -7,7 +7,7 @@ import {
   sortDirectionAtom,
 } from 'components/Explore/state'
 import { useAllTokens } from 'hooks/Tokens'
-import useTopTokens, { TimePeriod, TokenData } from 'hooks/useTopTokens'
+import { TimePeriod, TokenData } from 'hooks/useExplorePageQuery'
 import { useAtomValue } from 'jotai/utils'
 import { ReactNode, useCallback, useMemo } from 'react'
 import { AlertTriangle } from 'react-feather'
@@ -152,8 +152,13 @@ function LoadingTokenTable() {
   )
 }
 
-export default function TokenTable() {
-  const { data, error, loading } = useTopTokens()
+interface TokenTableProps {
+  data: TokenData | null
+  error: string | null
+  loading: boolean
+}
+
+export default function TokenTable({ data, error, loading }: TokenTableProps) {
   const showFavorites = useAtomValue<boolean>(showFavoritesAtom)
   const timePeriod = useAtomValue<TimePeriod>(filterTimeAtom)
   const topTokenAddresses = data ? Object.keys(data) : []

src/components/Explore/state.ts

 import { SupportedChainId } from 'constants/chains'
-import { TimePeriod } from 'hooks/useTopTokens'
+import { TimePeriod } from 'hooks/useExplorePageQuery'
 import { atom, useAtom } from 'jotai'
 import { atomWithReset, atomWithStorage } from 'jotai/utils'
 import { useCallback } from 'react'

src/pages/Explore/index.tsx

 import { PageName } from 'components/AmplitudeAnalytics/constants'
 import { Trace } from 'components/AmplitudeAnalytics/Trace'
 import { MAX_WIDTH_MEDIA_BREAKPOINT, MEDIUM_MEDIA_BREAKPOINT } from 'components/Explore/constants'
-import { filterStringAtom } from 'components/Explore/state'
+import { favoritesAtom, filterStringAtom } from 'components/Explore/state'
 import FavoriteButton from 'components/Explore/TokenTable/FavoriteButton'
 import NetworkFilter from 'components/Explore/TokenTable/NetworkFilter'
 import SearchBar from 'components/Explore/TokenTable/SearchBar'
 import TimeSelector from 'components/Explore/TokenTable/TimeSelector'
 import TokenTable from 'components/Explore/TokenTable/TokenTable'
-import { useResetAtom } from 'jotai/utils'
+import useExplorePageQuery from 'hooks/useExplorePageQuery'
+import { useAtomValue, useResetAtom } from 'jotai/utils'
 import { useEffect } from 'react'
 import { useLocation } from 'react-router-dom'
 import styled from 'styled-components/macro'
@@ -58,6 +59,8 @@ const FiltersWrapper = styled.div`
 `
 
 const Explore = () => {
+  const favoriteTokens = useAtomValue<string[]>(favoritesAtom)
+  const { data, error, loading } = useExplorePageQuery(favoriteTokens)
   const resetFilterString = useResetAtom(filterStringAtom)
   const location = useLocation()
   useEffect(() => {
@@ -80,7 +83,7 @@ const Explore = () => {
         </FiltersWrapper>
 
         <TokenTableContainer>
-          <TokenTable />
+          <TokenTable data={data} error={error} loading={loading} />
         </TokenTableContainer>
       </ExploreContainer>
     </Trace>