fix: update market stats display for trending row item

Author: sahar-fehri

app/components/UI/Trending/components/TrendingTokenRowItem/TrendingTokenRowItem.tsx

@@ -235,6 +235,7 @@ const TrendingTokenRowItem = ({
           {formatMarketStats(
             token.marketCap ?? 0,
             token.aggregatedUsdVolume ?? 0,
+            currentCurrency,
           )}
         </Text>
       </View>

app/components/UI/Trending/components/TrendingTokenRowItem/utils.test.ts

@@ -1,36 +1,36 @@
 import type { CaipChainId } from '@metamask/utils';
 import {
   caipChainIdToHex,
-  formatCompactUSD,
+  formatCompactCurrency,
   formatMarketStats,
   getCaipChainIdFromAssetId,
   getNetworkBadgeSource,
   getPriceChangeFieldKey,
 } from './utils';
 import { TimeOption } from '../TrendingTokensBottomSheet/TrendingTokenTimeBottomSheet';
 
-describe('formatCompactUSD', () => {
+describe('formatCompactCurrency', () => {
   describe('Billions formatting', () => {
     it('formats billions with B suffix and no decimals', () => {
       const value = 13000000000;
 
-      const result = formatCompactUSD(value);
+      const result = formatCompactCurrency(value);
 
       expect(result).toBe('$13B');
     });
 
     it('formats large billions correctly', () => {
       const value = 999999999999;
 
-      const result = formatCompactUSD(value);
+      const result = formatCompactCurrency(value);
 
       expect(result).toBe('$1000B');
     });
 
     it('formats billions with rounding', () => {
       const value = 2500000000;
 
-      const result = formatCompactUSD(value);
+      const result = formatCompactCurrency(value);
 
       expect(result).toBe('$3B');
     });
@@ -40,23 +40,23 @@ describe('formatCompactUSD', () => {
     it('formats millions with M suffix and one decimal', () => {
       const value = 34200000;
 
-      const result = formatCompactUSD(value);
+      const result = formatCompactCurrency(value);
 
       expect(result).toBe('$34.2M');
     });
 
     it('formats millions with rounding', () => {
       const value = 974248822.2;
 
-      const result = formatCompactUSD(value);
+      const result = formatCompactCurrency(value);
 
       expect(result).toBe('$974.2M');
     });
 
     it('formats large millions correctly', () => {
       const value = 999999999;
 
-      const result = formatCompactUSD(value);
+      const result = formatCompactCurrency(value);
 
       expect(result).toBe('$1000.0M');
     });
@@ -66,23 +66,23 @@ describe('formatCompactUSD', () => {
     it('formats thousands with K suffix and one decimal', () => {
       const value = 850500;
 
-      const result = formatCompactUSD(value);
+      const result = formatCompactCurrency(value);
 
       expect(result).toBe('$850.5K');
     });
 
     it('formats thousands with rounding', () => {
       const value = 123456;
 
-      const result = formatCompactUSD(value);
+      const result = formatCompactCurrency(value);
 
       expect(result).toBe('$123.5K');
     });
 
     it('formats large thousands correctly', () => {
       const value = 999999;
 
-      const result = formatCompactUSD(value);
+      const result = formatCompactCurrency(value);
 
       expect(result).toBe('$1000.0K');
     });
@@ -92,23 +92,23 @@ describe('formatCompactUSD', () => {
     it('formats values less than 1000 with two decimals', () => {
       const value = 532.5;
 
-      const result = formatCompactUSD(value);
+      const result = formatCompactCurrency(value);
 
       expect(result).toBe('$532.50');
     });
 
     it('formats small decimal values correctly', () => {
       const value = 123.45;
 
-      const result = formatCompactUSD(value);
+      const result = formatCompactCurrency(value);
 
       expect(result).toBe('$123.45');
     });
 
     it('formats very small values correctly', () => {
       const value = 0.01;
 
-      const result = formatCompactUSD(value);
+      const result = formatCompactCurrency(value);
 
       expect(result).toBe('$0.01');
     });
@@ -118,31 +118,31 @@ describe('formatCompactUSD', () => {
     it('formats zero correctly', () => {
       const value = 0;
 
-      const result = formatCompactUSD(value);
+      const result = formatCompactCurrency(value);
 
       expect(result).toBe('$0.00');
     });
 
     it('formats exactly 1000 correctly', () => {
       const value = 1000;
 
-      const result = formatCompactUSD(value);
+      const result = formatCompactCurrency(value);
 
       expect(result).toBe('$1.0K');
     });
 
     it('formats exactly 1000000 correctly', () => {
       const value = 1000000;
 
-      const result = formatCompactUSD(value);
+      const result = formatCompactCurrency(value);
 
       expect(result).toBe('$1.0M');
     });
 
     it('formats exactly 1000000000 correctly', () => {
       const value = 1000000000;
 
-      const result = formatCompactUSD(value);
+      const result = formatCompactCurrency(value);
 
       expect(result).toBe('$1B');
     });
@@ -151,15 +151,15 @@ describe('formatCompactUSD', () => {
     it('returns Invalid number for NaN', () => {
       const value = NaN;
 
-      const result = formatCompactUSD(value);
+      const result = formatCompactCurrency(value);
 
       expect(result).toBe('Invalid number');
     });
 
     it('returns Invalid number for string that converts to NaN', () => {
       const value = Number('invalid');
 
-      const result = formatCompactUSD(value);
+      const result = formatCompactCurrency(value);
 
       expect(result).toBe('Invalid number');
     });
@@ -169,51 +169,93 @@ describe('formatCompactUSD', () => {
     it('formats value just below 1000', () => {
       const value = 999.99;
 
-      const result = formatCompactUSD(value);
+      const result = formatCompactCurrency(value);
 
       expect(result).toBe('$999.99');
     });
 
     it('formats value just above 1000', () => {
       const value = 1000.01;
 
-      const result = formatCompactUSD(value);
+      const result = formatCompactCurrency(value);
 
       expect(result).toBe('$1.0K');
     });
 
     it('formats value just below 1000000', () => {
       const value = 999999.99;
 
-      const result = formatCompactUSD(value);
+      const result = formatCompactCurrency(value);
 
       expect(result).toBe('$1000.0K');
     });
 
     it('formats value just above 1000000', () => {
       const value = 1000000.01;
 
-      const result = formatCompactUSD(value);
+      const result = formatCompactCurrency(value);
 
       expect(result).toBe('$1.0M');
     });
 
     it('formats value just below 1000000000', () => {
       const value = 999999999.99;
 
-      const result = formatCompactUSD(value);
+      const result = formatCompactCurrency(value);
 
       expect(result).toBe('$1000.0M');
     });
 
     it('formats value just above 1000000000', () => {
       const value = 1000000000.01;
 
-      const result = formatCompactUSD(value);
+      const result = formatCompactCurrency(value);
 
       expect(result).toBe('$1B');
     });
   });
+
+  describe('Currency parameter', () => {
+    it('formats with EUR symbol', () => {
+      const value = 13000000000;
+
+      const result = formatCompactCurrency(value, 'EUR');
+
+      expect(result).toBe('€13B');
+    });
+
+    it('formats with JPY symbol', () => {
+      const value = 50000000;
+
+      const result = formatCompactCurrency(value, 'JPY');
+
+      expect(result).toBe('¥50.0M');
+    });
+
+    it('formats with lowercase currency code', () => {
+      const value = 1500000;
+
+      const result = formatCompactCurrency(value, 'eur');
+
+      expect(result).toBe('€1.5M');
+    });
+
+    it('defaults to USD when no currency provided', () => {
+      const value = 1000000;
+
+      const result = formatCompactCurrency(value);
+
+      expect(result).toBe('$1.0M');
+    });
+
+    it('uses currency code for unknown currencies', () => {
+      const value = 5000000;
+
+      const result = formatCompactCurrency(value, 'GBP');
+
+      expect(result).toBe('GBP5.0M');
+    });
+  });
 });
 
 describe('formatMarketStats', () => {
@@ -372,6 +414,53 @@ describe('formatMarketStats', () => {
       expect(result).toBe('$0.01 cap • $0.01 vol');
     });
   });
+
+  describe('Currency parameter', () => {
+    it('formats with EUR symbol', () => {
+      const marketCap = 13000000000;
+      const volume = 50000000;
+
+      const result = formatMarketStats(marketCap, volume, 'EUR');
+
+      expect(result).toBe('€13B cap • €50.0M vol');
+    });
+
+    it('formats with JPY symbol', () => {
+      const marketCap = 5000000;
+      const volume = 123400;
+
+      const result = formatMarketStats(marketCap, volume, 'JPY');
+
+      expect(result).toBe('¥5.0M cap • ¥123.4K vol');
+    });
+
+    it('formats with lowercase currency code', () => {
+      const marketCap = 1000000;
+      const volume = 500000;
+
+      const result = formatMarketStats(marketCap, volume, 'eur');
+
+      expect(result).toBe('€1.0M cap • €500.0K vol');
+    });
+
+    it('defaults to USD when no currency provided', () => {
+      const marketCap = 1000000;
+      const volume = 500000;
+
+      const result = formatMarketStats(marketCap, volume);
+
+      expect(result).toBe('$1.0M cap • $500.0K vol');
+    });
+
+    it('handles zero values with EUR', () => {
+      const marketCap = 0;
+      const volume = 1000000;
+
+      const result = formatMarketStats(marketCap, volume, 'EUR');
+
+      expect(result).toBe('- cap • €1.0M vol');
+    });
+  });
 });
 
 describe('getCaipChainIdFromAssetId', () => {