fix(llm): improve readability of supply info in the market

LedgerHQ · May 13, 2024 · 867e781 · 867e781
1 parent 3f6db5b
commit 867e781
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 4 deletions.
diff --git a/.changeset/many-cobras-sort.md b/.changeset/many-cobras-sort.md
@@ -0,0 +1,5 @@
+---
+"live-mobile": patch
+---
+
+Improve readability of the supply info for coin inside market
diff --git a/...-mobile/src/newArch/features/Market/screens/MarketDetail/components/MarketStats/index.tsx b/...-mobile/src/newArch/features/Market/screens/MarketDetail/components/MarketStats/index.tsx
@@ -47,6 +47,7 @@ export default function MarketStats({
     atlDate: _atlDate,
     price,
     priceChangePercentage,
+    ticker,
   } = currency || {};
 
   const athDate = _athDate ? new Date(_athDate) : null;
@@ -158,6 +159,7 @@ export default function MarketStats({
           {counterValueFormatter({
             value: circulatingSupply,
             locale,
+            ticker,
             t,
           })}
         </StyledTextLabel>
@@ -167,6 +169,7 @@ export default function MarketStats({
           {counterValueFormatter({
             value: totalSupply,
             locale,
+            ticker,
             t,
           })}
         </StyledTextLabel>
@@ -176,6 +179,7 @@ export default function MarketStats({
           {counterValueFormatter({
             value: maxSupply,
             locale,
+            ticker,
             t,
           })}
         </StyledTextLabel>

diff --git a/apps/ledger-live-mobile/src/newArch/features/Market/utils/index.ts b/apps/ledger-live-mobile/src/newArch/features/Market/utils/index.ts
@@ -50,13 +50,15 @@ export const counterValueFormatter = ({
   locale,
   t,
   allowZeroValue = false,
+  ticker = "",
 }: {
   currency?: string;
   value: number;
   shorten?: boolean;
   locale: string;
   t?: TFunction;
   allowZeroValue?: boolean;
+  ticker?: string;
 }): string => {
   if (isNaN(value) || (!value && !allowZeroValue)) {
     return "-";
@@ -72,7 +74,11 @@ export const counterValueFormatter = ({
     });
   }
 
-  const formatter = currency ? formatters[locale][currency] : undefined;
+  const formatter = currency
+    ? formatters[locale][currency]
+    : ticker
+    ? new Intl.NumberFormat(locale)
+    : undefined;
 
   if (shorten && t && formatter) {
     const sign = value > 0 ? "" : "-";
@@ -92,9 +98,13 @@ export const counterValueFormatter = ({
     return formattedNumber;
   }
 
-  // FIXME: HOW DID THIS WORK WHEN CURRENCY IS EMTPY
-  // PLEASE FIX
-  return formatter ? formatter.format(value) : value + "";
+  if (formatter) {
+    const formattedValue = formatter.format(value);
+    const upperCaseTicker = ticker?.trim()?.toLocaleUpperCase();
+    return `${formattedValue} ${upperCaseTicker}`.trim();
+  }
+
+  return String(value);
 };
 
 export function getAnalyticsProperties<P extends object>(