Fix non fractal price data formatter (#6348)

* format price for amounts >1 different than fractal amounts

* handle >6 figs native value different and show in compact notation to prevent row collision

* prevent token symbol from growing beyond what it needs

* Update src/components/Discover/TrendingTokens.tsx

* remove DebugLayout

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 }) {
                 <Text color="label" size="15pt" weight="bold" style={{ maxWidth: 100, flexShrink: 1 }} numberOfLines={1}>
                   {token.name}
                 </Text>
-                <Text color="labelTertiary" size="11pt" weight="bold" style={{ flexGrow: 1 }} numberOfLines={1}>
+                <Text color="labelTertiary" size="11pt" weight="bold" style={{ flexGrow: 0 }} numberOfLines={1}>
                   {token.symbol}
                 </Text>
                 <Text color="label" size="15pt" weight="bold">
@@ -569,16 +572,21 @@ function SortFilter() {
   );
 }
 
+function TrendingTokensLoader() {
+  const { trending_tokens_limit } = useRemoteConfig();
+
+  return (
+    <View style={{ flex: 1 }}>
+      {Array.from({ length: trending_tokens_limit }).map((_, index) => (
+        <TrendingTokenLoadingRow key={index} />
+      ))}
+    </View>
+  );
+}
+
 function TrendingTokenData() {
   const { data: trendingTokens, isLoading } = useTrendingTokensData();
-  if (isLoading)
-    return (
-      <View style={{ flex: 1 }}>
-        {Array.from({ length: 10 }).map((_, index) => (
-          <TrendingTokenLoadingRow key={index} />
-        ))}
-      </View>
-    );
+  if (isLoading) return <TrendingTokensLoader />;
 
   return (
     <FlatList

src/helpers/strings.ts

@@ -2,6 +2,7 @@ import store from '@/redux/store';
 import { memoFn } from '../utils/memoFn';
 import { supportedNativeCurrencies } from '@/references';
 import { NativeCurrencyKey } from '@/entities';
+import { convertAmountToNativeDisplayWorklet } from './utilities';
 /**
  * @desc subtracts two numbers
  * @param  {String}   str
@@ -116,12 +117,22 @@ export function formatCurrency(
   if (isNaN(+numericString)) return valueIfNaN;
 
   const currencySymbol = supportedNativeCurrencies[currency].symbol;
-
-  const [whole, fraction = '00'] = numericString.split('.');
+  const [whole, fraction = ''] = numericString.split('.');
+
+  if (fraction === '') {
+    // if the fraction is empty and the numeric string is less than 6 characters, we can just run it through our native currency display worklet
+    if (numericString.length <= 6) {
+      return convertAmountToNativeDisplayWorklet(numericString, currency, false, true);
+    }
+
+    const decimals = supportedNativeCurrencies[currency].decimals;
+    // otherwise for > 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}`;