From 867e781195b9a18850509a367c70fbb1b3ad0277 Mon Sep 17 00:00:00 2001
From: Lucas Werey <lucas.werey@ledger.fr>
Date: Mon, 13 May 2024 11:53:58 +0200
Subject: [PATCH] fix(llm): improve readability of supply info in the market

---
 .changeset/many-cobras-sort.md                 |  5 +++++
 .../components/MarketStats/index.tsx           |  4 ++++
 .../src/newArch/features/Market/utils/index.ts | 18 ++++++++++++++----
 3 files changed, 23 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/many-cobras-sort.md

diff --git a/.changeset/many-cobras-sort.md b/.changeset/many-cobras-sort.md
new file mode 100644
index 00000000000..08028b373fc
--- /dev/null
+++ 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/apps/ledger-live-mobile/src/newArch/features/Market/screens/MarketDetail/components/MarketStats/index.tsx b/apps/ledger-live-mobile/src/newArch/features/Market/screens/MarketDetail/components/MarketStats/index.tsx
index 9f298e927d9..fa7a939b590 100644
--- a/apps/ledger-live-mobile/src/newArch/features/Market/screens/MarketDetail/components/MarketStats/index.tsx
+++ b/apps/ledger-live-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
index 2848eabcdaf..86ee9eee4e9 100644
--- 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,6 +50,7 @@ export const counterValueFormatter = ({
   locale,
   t,
   allowZeroValue = false,
+  ticker = "",
 }: {
   currency?: string;
   value: number;
@@ -57,6 +58,7 @@ export const counterValueFormatter = ({
   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>(