fix(#2305): change displaying ada to locale string format

CHANGELOG.md

@@ -23,6 +23,7 @@ changes.
 - Change multilanguage support to use json file [Issue 2325](https://github.com/IntersectMBO/govtool/issues/2325)
 - Display full Governance Action IDs on desktop
 - Support space on given name [Issue 2276](https://github.com/IntersectMBO/govtool/issues/2276)
+- Display ADA in 'en-US' format [Issue 2305](https://github.com/IntersectMBO/govtool/issues/2305)
 
 ### Removed
 

govtool/frontend/src/components/molecules/VotesSubmitted.tsx

@@ -3,7 +3,7 @@ import { Box } from "@mui/material";
 import { IMAGES } from "@consts";
 import { Typography, VotePill } from "@atoms";
 import { useTranslation } from "@hooks";
-import { correctAdaFormat } from "@utils";
+import { correctVoteAdaFormat } from "@utils";
 import { SubmittedVotesData } from "@models";
 
 type Props = {
@@ -148,9 +148,11 @@ const Vote = ({ type, vote, value }: VoteProps) => (
       sx={{
         fontSize: 16,
         wordBreak: "break-all",
+        lineHeight: "24px",
+        fontWeight: "500",
       }}
     >
-      {type !== "ccCommittee" ? `₳ ${correctAdaFormat(value)}` : value}
+      {type !== "ccCommittee" ? `₳ ${correctVoteAdaFormat(value)}` : value}
     </Typography>
   </Box>
 );

govtool/frontend/src/utils/adaFormat.ts

@@ -8,6 +8,17 @@ export const correctAdaFormat = (lovelace: number | undefined) => {
   return 0;
 };
 
+export const correctVoteAdaFormat = (lovelace: number | undefined) => {
+  if (lovelace) {
+    const ada = lovelace / LOVELACE;
+    return ada.toLocaleString(undefined, {
+      minimumFractionDigits: 3,
+      maximumFractionDigits: 3,
+    });
+  }
+  return "0,000";
+};
+
 export const correctDRepDirectoryFormat = (lovelace: number | undefined) => {
   if (lovelace) {
     return Number((lovelace / LOVELACE).toFixed(0))?.toLocaleString("en-US");

govtool/frontend/src/utils/tests/adaFormat.test.ts

@@ -1,9 +1,14 @@
-import { correctAdaFormat, correctDRepDirectoryFormat } from "..";
+import { vi, beforeAll, afterAll } from "vitest";
+
+import {
+  correctAdaFormat,
+  correctVoteAdaFormat,
+  correctDRepDirectoryFormat,
+} from "..";
 
 describe("correctAdaFormat", () => {
   const LOVELACE = 1000000;
   const DECIMALS = 6;
-
   it("converts lovelace to ada for a given number", () => {
     const lovelace = 15000000;
     const expectedAda = 15;
@@ -35,6 +40,49 @@ describe("correctAdaFormat", () => {
   });
 });
 
+describe("correctVoteAdaFormat", () => {
+  beforeAll(() => {
+    vi.spyOn(Intl, "NumberFormat").mockImplementation(
+      ((_locales?: string | string[], options?: Intl.NumberFormatOptions) =>
+        new Intl.NumberFormat(
+          "en-US",
+          options,
+        )) as unknown as typeof Intl.NumberFormat,
+    );
+  });
+
+  afterAll(() => {
+    vi.restoreAllMocks();
+  });
+  test("Correctly formats lovelace value to ada format", () => {
+    const lovelace = 123456789012345;
+    const expectedResult = "123 456 789,012";
+
+    const result = correctVoteAdaFormat(lovelace);
+
+    // Normalize spaces in both result and expectedResult for comparison
+    expect(result.replace(/\s/g, " ")).toBe(expectedResult);
+  });
+
+  test("Returns 0 for undefined lovelace value", () => {
+    const lovelace = undefined;
+    const expectedResult = "0,000";
+    expect(correctVoteAdaFormat(lovelace)).toBe(expectedResult);
+  });
+
+  test("Returns 0 for zero lovelace value", () => {
+    const lovelace = 0;
+    const expectedResult = "0,000";
+    expect(correctVoteAdaFormat(lovelace)).toBe(expectedResult);
+  });
+
+  test("Returns 0 for small lovelace value", () => {
+    const lovelace = 123;
+    const expectedResult = "0,000";
+    expect(correctVoteAdaFormat(lovelace)).toBe(expectedResult);
+  });
+});
+
 describe("correctDRepDirectoryFormat", () => {
   test("Correctly formats lovelace value to directory format", () => {
     const lovelace = 143500000000;