fix: mf-5413 general tab scrolling in trending card (#10872)

* fix: mf-5413 general tab scrolling in trending card

* fix: improve loading data

packages/plugins/Trader/src/SiteAdaptor/trending/CoinMarketTable.tsx

@@ -53,11 +53,11 @@ export function NonFungibleCoinMarketTable(props: CoinMarketTableProps) {
     const t = useI18N()
     const { trending, result } = props
     const chainId = result.chainId ?? trending.coin.chainId
-    const { value: overview } = useNFT_TrendingOverview(result.pluginID, trending.coin.id, chainId)
-    const { value: highestPrice_ } = useHighestFloorPrice(
+    const { data: overview } = useNFT_TrendingOverview(result.pluginID, trending.coin.id, chainId)
+    const { data: highestPrice_ } = useHighestFloorPrice(
         overview?.highest_price ?? trending.market?.highest_price ? '' : trending.coin.id,
     )
-    const { value: salesOneDay_ } = useOneDaySaleAmounts(
+    const { data: salesOneDay_ } = useOneDaySaleAmounts(
         overview?.sales_24h ?? overview?.sales ?? trending.market?.total_24h ? '' : trending.coin.id,
     )
     const salesOneDay = salesOneDay_ ?? overview?.sales_24h ?? overview?.sales ?? trending.market?.total_24h

packages/plugins/Trader/src/SiteAdaptor/trending/PriceChart.tsx

@@ -45,7 +45,6 @@ export interface PriceChartProps extends withClasses<'root'> {
     width?: number
     height?: number
     amount: number
-    retry(): void
     children?: React.ReactNode
 }
 

packages/plugins/Trader/src/SiteAdaptor/trending/TrendingView.tsx

@@ -86,6 +86,8 @@ const useStyles = makeStyles<{
             : {
                   background: 'transparent',
                   maxHeight: props.currentTab === ContentTab.Market ? 374 : 'unset',
+                  display: 'flex',
+                  flexDirection: 'column',
               },
         footerSkeleton: props.isTokenTagPopper
             ? {}
@@ -183,19 +185,15 @@ export function TrendingView(props: TrendingViewProps) {
             }
             setCurrentPriceChange(map[days as Days])
         },
-        [JSON.stringify(trending?.market)],
+        [trending?.market],
     )
 
     useEffect(() => {
         onPriceDaysControlChange(Days.ONE_DAY)
-    }, [JSON.stringify(trending?.market)])
+    }, [trending?.market])
 
     const isNFT = trending?.coin.type === TokenType.NonFungible
-    const {
-        value: stats = EMPTY_LIST,
-        loading: loadingStats,
-        retry: retryStats,
-    } = usePriceStats({
+    const { data: stats = EMPTY_LIST, isLoading: loadingStats } = usePriceStats({
         chainId: result.chainId,
         coinId: trending?.coin.id,
         sourceType: isNFT ? SourceType.NFTScan : trending?.dataProvider,
@@ -394,7 +392,6 @@ export function TrendingView(props: TrendingViewProps) {
                             }
                             currency={trending.currency}
                             stats={stats}
-                            retry={retryStats}
                             loading={loadingStats}>
                             <PriceChartDaysControl
                                 rangeOptions={DEFAULT_RANGE_OPTIONS}

packages/plugins/Trader/src/trending/usePriceStats.ts

@@ -1,11 +1,11 @@
-import { useAsyncRetry } from 'react-use'
 import { isUndefined } from 'lodash-es'
 import { Days, EMPTY_LIST } from '@masknet/shared-base'
 import type { SourceType } from '@masknet/web3-shared-base'
 import { useChainContext } from '@masknet/web3-hooks-base'
 import type { Web3Helper } from '@masknet/web3-helpers'
 import { PluginTraderRPC } from '../messages.js'
 import type { Currency } from '../types/index.js'
+import { useQuery } from '@tanstack/react-query'
 
 export function usePriceStats({
     chainId: expectedChainId,
@@ -23,9 +23,9 @@ export function usePriceStats({
     const { chainId } = useChainContext({
         chainId: expectedChainId,
     })
-    return useAsyncRetry(async () => {
+    return useQuery(['price-stats', chainId, coinId, currency, days, sourceType], async () => {
         if (isUndefined(days) || isUndefined(coinId) || isUndefined(sourceType) || isUndefined(currency))
             return EMPTY_LIST
         return PluginTraderRPC.getPriceStats(chainId, coinId, currency, days, sourceType)
-    }, [coinId, sourceType, currency?.id, days])
+    })
 }

packages/plugins/Trader/src/trending/useTrending.ts

@@ -1,6 +1,6 @@
 import { flatten } from 'lodash-es'
-import { useEffect, useRef, useState } from 'react'
-import { useAsync, useAsyncFn, useAsyncRetry } from 'react-use'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { useAsyncFn } from 'react-use'
 import type { AsyncState } from 'react-use/lib/useAsyncFn.js'
 import type { NetworkPluginID } from '@masknet/shared-base'
 import type { Web3Helper } from '@masknet/web3-helpers'
@@ -17,10 +17,10 @@ export function useNFT_TrendingOverview(
     id: string, // For nftscan it's address, for simplehash it's collection id.
     expectedChainId?: Web3Helper.ChainIdAll,
 ) {
-    return useAsync(async () => {
+    return useQuery(['nft-trending-overview', pluginID, expectedChainId, id], async () => {
         if (!id || !expectedChainId || !pluginID) return null
         return PluginTraderRPC.getNFT_TrendingOverview(pluginID, expectedChainId, id)
-    }, [id, expectedChainId, pluginID])
+    })
 }
 
 export function useNonFungibleTokenActivities(
@@ -87,6 +87,23 @@ export function useTrendingById(
         chainId: coinTrending?.coin.chainId as ChainId,
     })
 
+    const trendingData = useMemo(() => {
+        if (isLoading || error || !coinTrending) return
+        return {
+            ...coinTrending,
+            coin: {
+                ...coinTrending.coin,
+                id: coinTrending.coin.id ?? '',
+                name: coinTrending.coin.name ?? '',
+                symbol: coinTrending.coin.symbol ?? '',
+                type: coinTrending.coin.type ?? TokenType.Fungible,
+                decimals: coinTrending.coin.decimals || detailedToken?.decimals || 0,
+                contract_address: coinTrending.coin.contract_address ?? coinTrending.contracts?.[0]?.address ?? address,
+                chainId: coinTrending.coin.chainId ?? coinTrending.contracts?.[0]?.chainId ?? chainId,
+            },
+        }
+    }, [isLoading, error, coinTrending, detailedToken?.decimals])
+
     if (isLoading) {
         return {
             loading: true,
@@ -103,44 +120,29 @@ export function useTrendingById(
     return {
         value: {
             currency,
-            trending: coinTrending
-                ? {
-                      ...coinTrending,
-                      coin: {
-                          ...coinTrending.coin,
-                          id: coinTrending.coin.id ?? '',
-                          name: coinTrending.coin.name ?? '',
-                          symbol: coinTrending.coin.symbol ?? '',
-                          type: coinTrending.coin.type ?? TokenType.Fungible,
-                          decimals: coinTrending.coin.decimals || detailedToken?.decimals || 0,
-                          contract_address:
-                              coinTrending.coin.contract_address ?? coinTrending.contracts?.[0]?.address ?? address,
-                          chainId: coinTrending.coin.chainId ?? coinTrending.contracts?.[0]?.chainId ?? chainId,
-                      },
-                  }
-                : null,
+            trending: trendingData,
         },
         loading: isLoading,
     }
 }
 
 export function useCoinInfoByAddress(address: string) {
-    return useAsyncRetry(async () => {
-        if (!address) return
+    return useQuery(['coin-info-by-address', address], async () => {
+        if (!address) return null
         return PluginTraderRPC.getCoinInfoByAddress(address)
-    }, [address])
+    })
 }
 
 export function useHighestFloorPrice(id: string) {
-    return useAsyncRetry(async () => {
-        if (!id) return
+    return useQuery(['highest-floor-price', id], async () => {
+        if (!id) return null
         return PluginTraderRPC.getHighestFloorPrice(id)
-    }, [id])
+    })
 }
 
 export function useOneDaySaleAmounts(id: string) {
-    return useAsyncRetry(async () => {
-        if (!id) return
+    return useQuery(['one-day-sale-amount', id], async () => {
+        if (!id) return null
         return PluginTraderRPC.getOneDaySaleAmounts(id)
-    }, [id])
+    })
 }