feat(#2880): add suffixes to governance actions votes

CHANGELOG.md

@@ -22,7 +22,7 @@ changes.
 
 ### Changed
 
--
+- Change votes representation on Governance Actions [Issue 2880](https://github.com/IntersectMBO/govtool/issues/2880)
 
 ### Removed
 

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

@@ -5,8 +5,8 @@ import { IMAGES, SECURITY_RELEVANT_PARAMS_MAP } from "@consts";
 import { Typography, VotePill } from "@atoms";
 import { useTranslation } from "@hooks";
 import {
-  correctDRepDirectoryFormat,
   getGovActionVotingThresholdKey,
+  correctAdaFormatWithSuffix,
 } from "@utils";
 import { SubmittedVotesData } from "@models";
 import { useFeatureFlag, useAppContext } from "@/context";
@@ -254,23 +254,24 @@ const VotesGroup = ({
           flex={1}
           borderBottom={1}
           borderColor="neutralGray"
+          justifyContent="flex-end"
+          alignItems="center"
         >
           <Typography
             sx={{
-              marginRight: 3,
-              fontSize: 16,
-              lineHeight: "24px",
-              fontWeight: "500",
+              marginRight: 1,
+              fontSize: 12,
+              lineHeight: "16px",
+              fontWeight: "400",
               color: "rgba(36, 34, 50, 1)",
             }}
           >
             {t("govActions.threshold")}
           </Typography>
           <Typography
             sx={{
-              fontSize: 16,
-              lineHeight: "24px",
-              fontWeight: "500",
+              fontSize: 12,
+              lineHeight: "16px",
               color: "neutralGray",
             }}
           >
@@ -314,13 +315,14 @@ const Vote = ({ type, vote, value, percentage }: VoteProps) => (
         }}
       >
         {type !== "ccCommittee"
-          ? `₳ ${correctDRepDirectoryFormat(value)}`
+          ? `₳ ${correctAdaFormatWithSuffix(value)}`
           : value}
       </Typography>
       {vote !== "abstain" && typeof percentage === "number" && (
         <Typography
           data-testid={`submitted-votes-${type}-${vote}-percentage`}
           sx={{
+            ml: 1,
             fontSize: 16,
             lineHeight: "24px",
             fontWeight: "500",

govtool/frontend/src/components/organisms/GovernanceActionDetailsCard.tsx

@@ -29,7 +29,7 @@ export const GovernanceActionDetailsCard = ({
   const [isVoteSubmitted, setIsVoteSubmitted] = useState<boolean>(false);
   const { screenWidth, isMobile } = useScreenDimension();
 
-  const isOneColumn = (isDashboard && screenWidth < 1036) ?? isMobile;
+  const isOneColumn = (isDashboard && screenWidth < 1200) ?? isMobile;
 
   return (
     <Box

govtool/frontend/src/i18n/locales/en.json

@@ -402,7 +402,7 @@
     "submissionDate": "Submission date:",
     "submittedDateWithEpoch": "Submitted: <0>{{date}}</0> <1>(Epoch {{epoch}})</1>",
     "supportingLinks": "Supporting links",
-    "threshold": "THRESHOLD",
+    "threshold": "Ratification Threshold",
     "title": "Governance Actions",
     "toVote": "To vote",
     "viewDetails": "View Details",

govtool/frontend/src/utils/adaFormat.ts

@@ -29,3 +29,24 @@ export const correctDRepDirectoryFormat = (lovelace: number | undefined) => {
 
   return "0";
 };
+
+export const correctAdaFormatWithSuffix = (
+  lovelace: number | undefined,
+  precision = 2,
+) => {
+  if (!lovelace) return "0";
+  const ada = lovelace / LOVELACE;
+  if (ada < 1000)
+    return ada.toLocaleString("en-us", {
+      maximumFractionDigits: precision,
+    });
+
+  const suffixes = ["k", "M", "B", "T"];
+  const divisors = [1000, 1000000, 1000000000, 1000000000000];
+
+  for (let i = 0; i < suffixes.length; i++) {
+    if (ada < divisors[i] * 1000) {
+      return (ada / divisors[i]).toFixed(precision) + suffixes[i];
+    }
+  }
+};

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

@@ -4,6 +4,7 @@ import {
   correctAdaFormat,
   correctVoteAdaFormat,
   correctDRepDirectoryFormat,
+  correctAdaFormatWithSuffix,
 } from "..";
 
 describe("correctAdaFormat", () => {
@@ -102,3 +103,41 @@ describe("correctDRepDirectoryFormat", () => {
     expect(correctDRepDirectoryFormat(lovelace)).toBe(expectedResult);
   });
 });
+
+describe("correctAdaFormatWithSuffix", () => {
+  test("Correctly formats lovelace value to ada format with suffix (T)", () => {
+    const lovelace = 123456789012345;
+    const expectedResult = "123.46M";
+    expect(correctAdaFormatWithSuffix(lovelace)).toBe(expectedResult);
+  });
+
+  test("Correctly formats lovelace value to ada format with suffix (B)", () => {
+    const lovelace = 123456789012;
+    const expectedResult = "123.46k";
+    expect(correctAdaFormatWithSuffix(lovelace)).toBe(expectedResult);
+  });
+
+  test("Correctly formats lovelace value to ada format with suffix (M)", () => {
+    const lovelace = 123456789;
+    const expectedResult = "123.46";
+    expect(correctAdaFormatWithSuffix(lovelace)).toBe(expectedResult);
+  });
+
+  test("Returns 0 for undefined lovelace value", () => {
+    const lovelace = undefined;
+    const expectedResult = "0";
+    expect(correctAdaFormatWithSuffix(lovelace)).toBe(expectedResult);
+  });
+
+  test("Returns 0 for zero lovelace value", () => {
+    const lovelace = 0;
+    const expectedResult = "0";
+    expect(correctAdaFormatWithSuffix(lovelace)).toBe(expectedResult);
+  });
+
+  test("Returns 0 for small lovelace value", () => {
+    const lovelace = 123;
+    const expectedResult = "0";
+    expect(correctAdaFormatWithSuffix(lovelace)).toBe(expectedResult);
+  });
+});

govtool/frontend/yarn.lock

@@ -1367,15 +1367,15 @@
   resolved "https://registry.npmjs.org/@emurgo/cardano-serialization-lib-asmjs/-/cardano-serialization-lib-asmjs-12.1.1.tgz"
   integrity sha512-K3f28QUfLDJ7seO6MtKfMYtRm5ccf36TQ5yxyTmZqX1TA85MkriEdxqpgV9KLiLEA95emwnlvU2/WmlHMRPg1A==
 
-"@esbuild/darwin-arm64@0.21.5":
+"@esbuild/linux-x64@0.21.5":
   version "0.21.5"
-  resolved "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz"
-  integrity sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==
+  resolved "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz"
+  integrity sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==
 
-"@esbuild/darwin-arm64@0.24.2":
+"@esbuild/linux-x64@0.24.2":
   version "0.24.2"
-  resolved "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.24.2.tgz"
-  integrity sha512-kj3AnYWc+CekmZnS5IPu9D+HWtUI49hbnyqk0FLEJDbzCIQt7hg7ucF1SQAilhtYpIujfaHr6O0UHlzzSPdOeA==
+  resolved "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.24.2.tgz"
+  integrity sha512-8Qi4nQcCTbLnK9WoMjdC9NiTG6/E38RNICU6sUNqK0QFxCYgoARqVqxdFmWkdonVsvGqWhmm7MO0jyTqLqwj0Q==
 
 "@eslint-community/eslint-utils@^4.2.0", "@eslint-community/eslint-utils@^4.4.0":
   version "4.4.1"
@@ -2162,10 +2162,15 @@
   resolved "https://registry.npmjs.org/@open-draft/until/-/until-2.1.0.tgz"
   integrity sha512-U69T3ItWHvLwGg5eJ0n3I62nWuE6ilHlmz7zM0npLBRvPRd7e6NYmg54vvRtP5mZG7kZqZCFVdsTWo7BPtBujg==
 
-"@parcel/watcher-darwin-arm64@2.5.0":
+"@parcel/watcher-linux-x64-glibc@2.5.0":
   version "2.5.0"
-  resolved "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.0.tgz"
-  integrity sha512-hyZ3TANnzGfLpRA2s/4U1kbw2ZI4qGxaRJbBH2DCSREFfubMswheh8TeiC1sGZ3z2jUf3s37P0BBlrD3sjVTUw==
+  resolved "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.0.tgz"
+  integrity sha512-d9AOkusyXARkFD66S6zlGXyzx5RvY+chTP9Jp0ypSTC9d4lzyRs9ovGf/80VCxjKddcUvnsGwCHWuF2EoPgWjw==
+
+"@parcel/watcher-linux-x64-musl@2.5.0":
+  version "2.5.0"
+  resolved "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.0.tgz"
+  integrity sha512-iqOC+GoTDoFyk/VYSFHwjHhYrk8bljW6zOhPuhi5t9ulqiYq1togGJB5e3PwYVFFfeVgc6pbz3JdQyDoBszVaA==
 
 "@parcel/watcher@^2.4.1":
   version "2.5.0"
@@ -2278,10 +2283,15 @@
     estree-walker "^2.0.2"
     picomatch "^4.0.2"
 
-"@rollup/rollup-darwin-arm64@4.27.4":
+"@rollup/rollup-linux-x64-gnu@4.27.4":
   version "4.27.4"
-  resolved "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.27.4.tgz"
-  integrity sha512-PlNiRQapift4LNS8DPUHuDX/IdXiLjf8mc5vdEmUR0fF/pyy2qWwzdLjB+iZquGr8LuN4LnUoSEvKRwjSVYz3Q==
+  resolved "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.27.4.tgz"
+  integrity sha512-Ni8mMtfo+o/G7DVtweXXV/Ol2TFf63KYjTtoZ5f078AUgJTmaIJnj4JFU7TK/9SVWTaSJGxPi5zMDgK4w+Ez7Q==
+
+"@rollup/rollup-linux-x64-musl@4.27.4":
+  version "4.27.4"
+  resolved "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.27.4.tgz"
+  integrity sha512-5AeeAF1PB9TUzD+3cROzFTnAJAcVUGLuR8ng0E0WXGkYhp6RD6L+6szYVX+64Rs0r72019KHZS1ka1q+zU/wUw==
 
 "@rtsao/scc@^1.1.0":
   version "1.1.0"
@@ -2860,10 +2870,15 @@
     "@svgr/plugin-svgo" "^5.5.0"
     loader-utils "^2.0.0"
 
-"@swc/core-darwin-arm64@1.9.3":
+"@swc/core-linux-x64-gnu@1.9.3":
   version "1.9.3"
-  resolved "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.9.3.tgz"
-  integrity sha512-hGfl/KTic/QY4tB9DkTbNuxy5cV4IeejpPD4zo+Lzt4iLlDWIeANL4Fkg67FiVceNJboqg48CUX+APhDHO5G1w==
+  resolved "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.9.3.tgz"
+  integrity sha512-ivXXBRDXDc9k4cdv10R21ccBmGebVOwKXT/UdH1PhxUn9m/h8erAWjz5pcELwjiMf27WokqPgaWVfaclDbgE+w==
+
+"@swc/core-linux-x64-musl@1.9.3":
+  version "1.9.3"
+  resolved "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.9.3.tgz"
+  integrity sha512-ILsGMgfnOz1HwdDz+ZgEuomIwkP1PHT6maigZxaCIuC6OPEhKE8uYna22uU63XvYcLQvZYDzpR3ms47WQPuNEg==
 
 "@swc/core@*", "@swc/core@^1.5.22", "@swc/core@^1.7.26":
   version "1.9.3"
@@ -7169,16 +7184,6 @@ fs@^0.0.1-security:
   resolved "https://registry.npmjs.org/fs/-/fs-0.0.1-security.tgz"
   integrity sha512-3XY9e1pP0CVEUCdj5BmfIZxRBTSDycnbqhIOGec9QYtmVH2fbLpj86CFWkrNOkt/Fvty4KZG5lTglL9j/gJ87w==
 
-fsevents@^2.3.2, fsevents@~2.3.2, fsevents@~2.3.3:
-  version "2.3.3"
-  resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz"
-  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
-
-fsevents@2.3.2:
-  version "2.3.2"
-  resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz"
-  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
-
 function-bind@^1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz"