diff --git a/src/components/Discover/TrendingTokens.tsx b/src/components/Discover/TrendingTokens.tsx index 070a91a5316..852b1c2ca46 100644 --- a/src/components/Discover/TrendingTokens.tsx +++ b/src/components/Discover/TrendingTokens.tsx @@ -30,6 +30,7 @@ import { ButtonPressAnimation } from '../animations'; import { useFarcasterAccountForWallets } from '@/hooks/useFarcasterAccountForWallets'; import { ImgixImage } from '../images'; import { useRemoteConfig } from '@/model/remoteConfig'; +import { useAccountSettings } from '@/hooks'; const t = i18n.l.trending_tokens; @@ -91,6 +92,7 @@ function FilterButton({ icon, label, onPress }: { onPress?: VoidFunction; label: } function useTrendingTokensData() { + const { nativeCurrency } = useAccountSettings(); const remoteConfig = useRemoteConfig(); const { chainId, category, timeframe, sort } = useTrendingTokensStore(state => ({ chainId: state.chainId, @@ -109,6 +111,7 @@ function useTrendingTokensData() { sortDirection: SortDirection.Desc, limit: remoteConfig.trending_tokens_limit, walletAddress: walletAddress, + currency: nativeCurrency, }); } @@ -405,7 +408,7 @@ function TrendingTokenRow({ token }: { token: TrendingToken }) { {token.name} - + {token.symbol} @@ -569,16 +572,21 @@ function SortFilter() { ); } +function TrendingTokensLoader() { + const { trending_tokens_limit } = useRemoteConfig(); + + return ( + + {Array.from({ length: trending_tokens_limit }).map((_, index) => ( + + ))} + + ); +} + function TrendingTokenData() { const { data: trendingTokens, isLoading } = useTrendingTokensData(); - if (isLoading) - return ( - - {Array.from({ length: 10 }).map((_, index) => ( - - ))} - - ); + if (isLoading) return ; return ( 6 figs native value we need to format in compact notation + const formattedWhole = formatNumber(numericString, { decimals, useOrderSuffix: true }); + return `${currencySymbol}${formattedWhole}`; + } const formattedWhole = formatNumber(whole, { decimals: 0, useOrderSuffix: true }); const formattedFraction = formatFraction(fraction); - // if it ends with a non-numeric character, it's in compact notation like '1.2K' if (isNaN(+formattedWhole[formattedWhole.length - 1])) return `${currencySymbol}${formattedWhole}`;