@@ -30,7 +30,6 @@ import { TokenItemData } from 'src/components/explore/TokenItemData'
3030import { getTokenMetadataDisplayType } from 'src/features/explore/utils'
3131import { Flex , Loader , Text } from 'ui/src'
3232import { AnimatedBottomSheetFlashList } from 'ui/src/components/AnimatedFlashList/AnimatedFlashList'
33- import { NoTokens } from 'ui/src/components/icons'
3433import { spacing } from 'ui/src/theme'
3534import { BaseCard } from 'uniswap/src/components/BaseCard/BaseCard'
3635import { useTokenRankingsQuery } from 'uniswap/src/data/rest/tokenRankings'
@@ -155,15 +154,10 @@ function _ExploreSections({
155154 } , [ insets . bottom ] )
156155
157156 const dataWithBottomTabs = useMemo (
158- ( ) => ( showFullScreenLoadingState ? [ ] : topTokenItems ) ,
157+ ( ) => ( showFullScreenLoadingState ? [ ] : ( topTokenItems ?? [ ] ) ) ,
159158 [ showFullScreenLoadingState , topTokenItems ] ,
160159 )
161160
162- const listEmptyComponent = useMemo (
163- ( ) => < TokenListEmptyComponent isLoading = { showFullScreenLoadingState } /> ,
164- [ showFullScreenLoadingState ] ,
165- )
166-
167161 if ( ! hasAllData && error ) {
168162 return (
169163 < Flex height = "100%" pb = "$spacing60" >
@@ -182,7 +176,7 @@ function _ExploreSections({
182176 < LegendList
183177 ref = { legendListRef }
184178 refScrollView = { scrollRef }
185- ListEmptyComponent = { listEmptyComponent }
179+ ListEmptyComponent = { ListEmptyComponent }
186180 ListHeaderComponent = {
187181 < ListHeaderComponent
188182 listRef = { scrollRef }
@@ -214,7 +208,7 @@ function _ExploreSections({
214208 < Flex fill animation = "100ms" >
215209 < AnimatedBottomSheetFlashList
216210 ref = { listRef }
217- ListEmptyComponent = { listEmptyComponent }
211+ ListEmptyComponent = { ListEmptyComponent }
218212 ListHeaderComponent = {
219213 < ListHeaderComponent
220214 listRef = { listRef }
@@ -304,9 +298,9 @@ function processTokens(
304298
305299function processTokenRankings (
306300 tokenRankings : TokenRankingsResponse [ 'tokenRankings' ] | undefined ,
307- ) : Partial < Record < ExploreOrderBy , TokenItemDataWithMetadata [ ] > > {
301+ ) : Record < ExploreOrderBy , TokenItemDataWithMetadata [ ] > {
308302 if ( ! tokenRankings ) {
309- return { } as const
303+ return { } as Record < ExploreOrderBy , TokenItemDataWithMetadata [ ] >
310304 }
311305
312306 const result : Record < string , TokenItemDataWithMetadata [ ] > = { }
@@ -327,11 +321,14 @@ function processTokenRankings(
327321 return result
328322}
329323
330- function useTokenItems ( data : TokenRankingsResponse | undefined , orderBy : ExploreOrderBy ) : TokenItemDataWithMetadata [ ] {
324+ function useTokenItems (
325+ data : TokenRankingsResponse | undefined ,
326+ orderBy : ExploreOrderBy ,
327+ ) : TokenItemDataWithMetadata [ ] | undefined {
331328 // process all the token rankings into a map of orderBy to token items (only do this once)
332329 const allTokenItemsByOrderBy = useMemo ( ( ) => processTokenRankings ( data ?. tokenRankings ) , [ data ] )
333- // return the token items for the given orderBy, or empty array if the orderBy key doesn't exist
334- return useMemo ( ( ) => allTokenItemsByOrderBy [ orderBy ] ?? [ ] , [ allTokenItemsByOrderBy , orderBy ] )
330+ // return the token items for the given orderBy
331+ return useMemo ( ( ) => allTokenItemsByOrderBy [ orderBy ] , [ allTokenItemsByOrderBy , orderBy ] )
335332}
336333
337334type ListHeaderProps = {
@@ -389,31 +386,11 @@ const ListHeaderComponent = ({
389386 )
390387}
391388
392- const TokenListEmptyComponent = memo ( function TokenListEmptyComponent ( {
393- isLoading,
394- } : {
395- isLoading : boolean
396- } ) : JSX . Element {
397- const { t } = useTranslation ( )
398-
399- if ( isLoading ) {
400- return (
401- < Flex mx = "$spacing24" my = "$spacing12" >
402- < Loader . Token repeat = { 5 } />
403- </ Flex >
404- )
405- }
406-
407- return (
408- < Flex centered pt = "$spacing48" px = "$spacing36" >
409- < BaseCard . EmptyState
410- description = { t ( 'explore.tokens.empty.description' ) }
411- icon = { < NoTokens color = "$neutral3" size = "$icon.70" /> }
412- title = { t ( 'explore.tokens.empty.title' ) }
413- />
414- </ Flex >
415- )
416- } )
389+ const ListEmptyComponent = ( ) : JSX . Element => (
390+ < Flex mx = "$spacing24" my = "$spacing12" >
391+ < Loader . Token repeat = { 5 } />
392+ </ Flex >
393+ )
417394
418395function useOrderBy ( ) : {
419396 uiOrderBy : ExploreOrderBy
0 commit comments