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/hooks/useTopTokens.ts → src/hooks/useExplorePageQuery.tsx

@@ -16,6 +16,7 @@ export type TokenData = {
     delta: number // basis points
     marketCap: number
     volume: Record<TimePeriod, number>
+    isFavorite: boolean
   }
 }
 
@@ -25,7 +26,7 @@ interface UseTopTokensResult {
   loading: boolean
 }
 
-const FAKE_TOP_TOKENS_RESULT = {
+const FAKE_TOP_TOKENS_RESULT: TokenData = {
   '0x03ab458634910aad20ef5f1c8ee96f1d6ac54919': {
     sparkline: `<svg width="135" height="50" viewBox="0 0 135 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <polyline points="0.0, 41.31694740177657 0.7988165680473372, 43.71568774238813 1.5976331360946745, 39.214791338596406 2.396449704142012, 46.76084696273317 3.195266272189349, 43.31848313855741 3.994082840236686, 50.0 4.792899408284024, 40.060343907618424 5.591715976331361, 40.68681013944878 6.390532544378698, 37.651448884438565 7.189349112426036, 44.837538286562726 7.988165680473372, 38.306409244466074 8.78698224852071, 38.191046116043644 9.585798816568047, 41.3410198277808 10.384615384615385, 42.67560277872357 11.183431952662723, 21.35038521188064 11.982248520710058, 9.708488423027035 12.781065088757396, 13.778306655876818 13.579881656804734, 9.09881194043739 14.378698224852071, 14.553394610391221 15.177514792899409, 10.408112010595799 15.976331360946745, 17.047111184927942 16.775147928994084, 22.438051145929947 17.57396449704142, 19.964721634868514 18.37278106508876, 12.570563556826544 19.171597633136095, 22.03776042126629 19.970414201183434, 18.925083357584395 20.76923076923077, 19.35072444083898 21.56804733727811, 21.40981002299806 22.366863905325445, 12.57674643462727 23.16568047337278, 20.162083141098453 23.964497041420117, 26.805621410668586 24.763313609467456, 22.414137516260947 25.562130177514792, 19.663247314553193 26.36094674556213, 30.343506101654167 27.159763313609467, 24.161948258403015 27.958579881656807, 26.057272098519324 28.757396449704142, 24.7313530966639 29.55621301775148, 26.665421037317756 30.355029585798817, 28.24452295248621 31.153846153846157, 22.087821726812084 31.95266272189349, 31.152446803141654 32.751479289940825, 13.906724922741992 33.55029585798817, 25.06576548942801 34.349112426035504, 27.904617659558312 35.14792899408284, 22.58989734125344 35.94674556213018, 18.77812362735527 36.74556213017752, 24.142831611371175 37.54437869822485, 22.97670333857772 38.34319526627219, 22.517687341971424 39.142011834319526, 15.005964139598122 39.94082840236687, 18.900129174969173 40.7396449704142, 21.18586088594469 41.53846153846154, 20.89929446076557 42.337278106508876, 21.798715655784196 43.13609467455622, 23.35029050040679 43.93491124260355, 29.342421964701487 44.73372781065089, 26.83234396439684 45.532544378698226, 20.21614893446483 46.33136094674556, 21.26355218350165 47.1301775147929, 19.724914326600633 47.928994082840234, 11.001032266342122 48.72781065088758, 19.445604145545026 49.52662721893491, 12.769383962251144 50.32544378698225, 11.339363541177807 51.124260355029584, 11.080971820705395 51.92307692307693, 9.871930076129743 52.72189349112426, 15.540234111629548 53.5207100591716, 19.385735929318766 54.319526627218934, 13.32912973357844 55.11834319526627, 14.998143085248122 55.91715976331361, 15.629741828355643 56.71597633136094, 12.063583180029193 57.514792899408285, 11.686542180307798 58.31360946745562, 9.765592857045856 59.11242603550296, 6.132503919488515 59.91124260355029, 6.291365447152408 60.710059171597635, 7.230900543395919 61.50887573964497, 8.226997644289916 62.307692307692314, 5.9415683085940145 63.10650887573964, 10.786357615134714 63.90532544378698, 6.300468254556363 64.70414201183432, 7.01673617024902 65.50295857988165, 7.513055645715544 66.30177514792899, 13.800956634581379 67.10059171597634, 14.746601659782756 67.89940828402366, 13.364390374024238 68.69822485207101, 13.376479400656974 69.49704142011834, 13.711030413235411 70.29585798816568, 20.243771793473858 71.09467455621302, 20.91915056070402 71.89349112426036, 10.524335562376507 72.6923076923077, 16.668841964995053 73.49112426035504, 16.077200187658498 74.28994082840237, 17.48790382331564 75.0887573964497, 8.25760657272661 75.88757396449704, 20.254923976468227 76.68639053254438, 11.31969662059836 77.48520710059172, 14.741879607014027 78.28402366863905, 13.592156573495034 79.0828402366864, 12.044467623434308 79.88165680473374, 8.50316426838233 80.68047337278107, 13.715774590913338 81.4792899408284, 0.0 82.27810650887574, 11.258495022417087 83.07692307692308, 9.542338145813623 83.87573964497041, 21.309625836502537 84.67455621301775, 16.894634431091397 85.4733727810651, 19.09116634354636 86.27218934911244, 18.423626148884804 87.07100591715975, 22.62720151567559 87.8698224852071, 20.594704144612486 88.66863905325444, 24.72044813699155 89.46745562130178, 23.675367002680513 90.26627218934911, 29.630501080695737 91.06508875739645, 26.318532584575365 91.8639053254438, 22.925131092870238 92.66272189349112, 20.076296983388282 93.46153846153845, 21.190330565544745 94.2603550295858, 16.717777911328476 95.05917159763314, 17.19594401396835 95.85798816568047, 28.972172514044804 96.65680473372781, 37.06141265702684 97.45562130177515, 27.393125868800766 98.2544378698225, 32.80367795886616 99.05325443786982, 31.71874849007873 99.85207100591715, 36.20244358226534 100.6508875739645, 34.090729813166604 101.44970414201183, 27.720311190850243 102.24852071005917, 38.09137264210808 103.04733727810651, 31.19514608856407 103.84615384615385, 22.16619584103189 104.64497041420118, 24.41549859938342 105.44378698224853, 35.85416325537771 106.24260355029585, 28.109900746130716 107.0414201183432, 25.83677939911684 107.84023668639053, 29.656237212703363 108.63905325443787, 25.298079680452734 109.43786982248521, 31.332534967570563 110.23668639053254, 23.9295492273324 111.03550295857988, 27.551483112483766 111.83431952662723, 29.094020265667904 112.63313609467457, 31.932887919324116 113.43195266272188, 20.225031345917436 114.23076923076923, 23.748829985960207 115.02958579881657, 23.965773347387046 115.82840236686391, 29.563403800646515 116.62721893491124, 28.048157186575423 117.42603550295858, 36.162170094309104 118.22485207100593, 32.55456795210098 119.02366863905324, 29.808843410000822 119.82248520710058, 25.941152811757785 120.62130177514793, 30.14795627238393 121.42011834319527, 22.317970221444114 122.2189349112426, 25.720600007582895 123.01775147928994, 32.418740053848005 123.81656804733728, 33.19142085157435 124.61538461538463, 37.57023431488021 125.41420118343194, 38.627613245013514 126.21301775147928, 28.115191130447247 127.01183431952663, 34.45835259388878 127.81065088757396, 32.09447784016973 128.60946745562129, 33.159107359049045 129.40828402366864, 32.462580786853785 130.20710059171597, 35.98824982668003 131.0059171597633, 37.797823430134706 131.80473372781066, 33.30767710620397 132.60355029585799, 27.317432176467175 133.40236686390534, 27.287847065956853 134.20118343195267, 29.882671744026894" fill="none" stroke-width="1.25"/>
@@ -41,6 +42,7 @@ const FAKE_TOP_TOKENS_RESULT = {
       [TimePeriod.year]: 690_920_000,
       [TimePeriod.all]: 690_920_000,
     },
+    isFavorite: false,
   },
   '0x0cec1a9154ff802e7934fc916ed7ca50bde6844e': {
     sparkline: `<svg width="135" height="50" viewBox="0 0 135 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -57,6 +59,7 @@ const FAKE_TOP_TOKENS_RESULT = {
       [TimePeriod.year]: 100_920_000,
       [TimePeriod.all]: 690_920_000,
     },
+    isFavorite: false,
   },
   '0x6B175474E89094C44Da98b954EedeAC495271d0F': {
     sparkline: `<svg width="135" height="50" viewBox="0 0 135 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -73,6 +76,7 @@ const FAKE_TOP_TOKENS_RESULT = {
       [TimePeriod.year]: 100_920_000,
       [TimePeriod.all]: 690_920_000,
     },
+    isFavorite: false,
   },
   '0xdac17f958d2ee523a2206206994597c13d831ec7': {
     sparkline: `<svg width="135" height="50" viewBox="0 0 135 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -89,6 +93,7 @@ const FAKE_TOP_TOKENS_RESULT = {
       [TimePeriod.year]: 100_920_000,
       [TimePeriod.all]: 690_920_000,
     },
+    isFavorite: false,
   },
   '0xf629cbd94d3791c9250152bd8dfbdf380e2a3b9c': {
     sparkline: `<svg width="135" height="50" viewBox="0 0 135 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -105,6 +110,7 @@ const FAKE_TOP_TOKENS_RESULT = {
       [TimePeriod.year]: 100_920_000,
       [TimePeriod.all]: 690_920_000,
     },
+    isFavorite: false,
   },
   '0x95ad61b0a150d79219dcf64e1e6cc01f0b64c4ce': {
     sparkline: `<svg width="135" height="50" viewBox="0 0 135 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -121,6 +127,7 @@ const FAKE_TOP_TOKENS_RESULT = {
       [TimePeriod.year]: 100_920_000,
       [TimePeriod.all]: 690_920_000,
     },
+    isFavorite: false,
   },
   '0x8a2279d4a90b6fe1c4b30fa660cc9f926797baa2': {
     sparkline: `<svg width="135" height="50" viewBox="0 0 135 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -137,6 +144,7 @@ const FAKE_TOP_TOKENS_RESULT = {
       [TimePeriod.year]: 100_920_000,
       [TimePeriod.all]: 690_920_000,
     },
+    isFavorite: false,
   },
   '0x84ca8bc7997272c7cfb4d0cd3d55cd942b3c9419': {
     sparkline: `<svg width="135" height="50" viewBox="0 0 135 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -153,6 +161,7 @@ const FAKE_TOP_TOKENS_RESULT = {
       [TimePeriod.year]: 100_920_000,
       [TimePeriod.all]: 690_920_000,
     },
+    isFavorite: false,
   },
   '0x3845badAde8e6dFF049820680d1F14bD3903a5d0': {
     sparkline: `<svg width="135" height="50" viewBox="0 0 135 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -169,6 +178,7 @@ const FAKE_TOP_TOKENS_RESULT = {
       [TimePeriod.year]: 100_920_000,
       [TimePeriod.all]: 690_920_000,
     },
+    isFavorite: false,
   },
   '0x4c19596f5aaff459fa38b0f7ed92f11ae6543784': {
     sparkline: `<svg width="135" height="50" viewBox="0 0 135 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -185,6 +195,7 @@ const FAKE_TOP_TOKENS_RESULT = {
       [TimePeriod.year]: 100_920_000,
       [TimePeriod.all]: 690_920_000,
     },
+    isFavorite: false,
   },
   '0x71Ab77b7dbB4fa7e017BC15090b2163221420282': {
     sparkline: `<svg width="135" height="50" viewBox="0 0 135 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -201,6 +212,7 @@ const FAKE_TOP_TOKENS_RESULT = {
       [TimePeriod.year]: 100_920_000,
       [TimePeriod.all]: 690_920_000,
     },
+    isFavorite: false,
   },
   '0xccc8cb5229b0ac8069c51fd58367fd1e622afd97': {
     sparkline: `<svg width="135" height="50" viewBox="0 0 135 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -217,6 +229,7 @@ const FAKE_TOP_TOKENS_RESULT = {
       [TimePeriod.year]: 100_920_000,
       [TimePeriod.all]: 690_920_000,
     },
+    isFavorite: false,
   },
   '0x03be5c903c727ee2c8c4e9bc0acc860cca4715e2': {
     sparkline: `<svg width="135" height="50" viewBox="0 0 135 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -233,6 +246,7 @@ const FAKE_TOP_TOKENS_RESULT = {
       [TimePeriod.year]: 100_920_000,
       [TimePeriod.all]: 690_920_000,
     },
+    isFavorite: false,
   },
   '0x4674672bcddda2ea5300f5207e1158185c944bc0': {
     sparkline: `<svg width="135" height="50" viewBox="0 0 135 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -249,6 +263,7 @@ const FAKE_TOP_TOKENS_RESULT = {
       [TimePeriod.year]: 100_920_000,
       [TimePeriod.all]: 690_920_000,
     },
+    isFavorite: false,
   },
   '0xdf801468a808a32656d2ed2d2d80b72a129739f4': {
     sparkline: `<svg width="135" height="50" viewBox="0 0 135 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -265,6 +280,7 @@ const FAKE_TOP_TOKENS_RESULT = {
       [TimePeriod.year]: 100_920_000,
       [TimePeriod.all]: 690_920_000,
     },
+    isFavorite: false,
   },
   '0xaDB2437e6F65682B85F814fBc12FeC0508A7B1D0': {
     sparkline: `<svg width="135" height="50" viewBox="0 0 135 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -281,6 +297,7 @@ const FAKE_TOP_TOKENS_RESULT = {
       [TimePeriod.year]: 100_920_000,
       [TimePeriod.all]: 690_920_000,
     },
+    isFavorite: false,
   },
   '0x1796ae0b0fa4862485106a0de9b654eFE301D0b2': {
     sparkline: `<svg width="135" height="50" viewBox="0 0 135 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -297,15 +314,16 @@ const FAKE_TOP_TOKENS_RESULT = {
       [TimePeriod.year]: 100_920_000,
       [TimePeriod.all]: 690_920_000,
     },
+    isFavorite: false,
   },
 }
 
-const useTopTokens = (): UseTopTokensResult => {
+const useExplorePageQuery = (favoriteTokenAddresses: string[]): UseTopTokensResult => {
   const [data, setData] = useState<TokenData | null>(null)
   const [error, setError] = useState<string | null>(null)
   const [loading, setLoading] = useState(false)
 
-  const fetchTopTokens = async (): Promise<TokenData | void> => {
+  const fetchTopTokens = async (favoriteTokenAddresses: string[]): Promise<TokenData | void> => {
     const waitRandom = (min: number, max: number): Promise<void> =>
       new Promise((resolve) => setTimeout(resolve, min + Math.round(Math.random() * Math.max(0, max - min))))
     try {
@@ -315,6 +333,9 @@ const useTopTokens = (): UseTopTokensResult => {
       if (Math.random() < 0.05) {
         throw new Error('fake error')
       }
+      favoriteTokenAddresses.forEach((address) => {
+        FAKE_TOP_TOKENS_RESULT[address as keyof TokenData].isFavorite = true
+      })
       return FAKE_TOP_TOKENS_RESULT
     } catch (e) {
       setError('something went wrong')
@@ -326,15 +347,15 @@ const useTopTokens = (): UseTopTokensResult => {
   useEffect(() => {
     setLoading(true)
     setError(null)
-    fetchTopTokens()
+    fetchTopTokens(favoriteTokenAddresses)
       .then((data) => {
         if (data) setData(data)
       })
       .catch((e) => setError(e))
       .finally(() => setLoading(false))
-  }, [])
+  }, [favoriteTokenAddresses])
 
   return { data, error, loading }
 }
 
-export default useTopTokens
+export default useExplorePageQuery

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>