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}`;