feat(#3148): improve numerical data formatting in drep directory

Author: MSzalowski

CHANGELOG.md

@@ -12,7 +12,8 @@ changes.
 
 ### Added
 
-- Add support for ada handle in drep payment address [Issue 3155]()
+- Add support for ada handle in drep payment address [Issue 3155](https://github.com/IntersectMBO/govtool/issues/3155)
+- Improve numerical data formatting in drep directory [Issue 3148](https://github.com/IntersectMBO/govtool/issues/3148)
 
 ### Fixed
 

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

@@ -11,7 +11,7 @@ import { ICONS } from "@consts";
 import { PendingTransaction } from "@context";
 import { useGetNetworkMetrics, useTranslation } from "@hooks";
 import { AutomatedVotingCard } from "@molecules";
-import { correctVoteAdaFormat, openInNewTab } from "@/utils";
+import { correctDRepDirectoryFormat, openInNewTab } from "@/utils";
 import {
   AutomatedVotingOptionCurrentDelegation,
   AutomatedVotingOptionDelegationId,
@@ -129,7 +129,9 @@ export const AutomatedVotingOptions = ({
             }
             votingPower={
               networkMetrics
-                ? correctVoteAdaFormat(networkMetrics?.alwaysAbstainVotingPower)
+                ? correctDRepDirectoryFormat(
+                    networkMetrics?.alwaysAbstainVotingPower,
+                  )
                 : ""
             }
             transactionId={
@@ -170,7 +172,7 @@ export const AutomatedVotingOptions = ({
             }
             votingPower={
               networkMetrics
-                ? correctVoteAdaFormat(
+                ? correctDRepDirectoryFormat(
                     networkMetrics?.alwaysNoConfidenceVotingPower,
                   )
                 : ""

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

@@ -8,7 +8,7 @@ import { useTranslation } from "@hooks";
 import { DRepData, DRepStatus } from "@models";
 import { Card } from "@molecules";
 import {
-  correctVoteAdaFormat,
+  correctDRepDirectoryFormat,
   ellipsizeText,
   encodeCIP129Identifier,
   getBase64ImageDetails,
@@ -218,8 +218,21 @@ export const DRepCard = ({
               </Box>
             </Box>
 
-            <Box sx={{ display: "flex", flex: { xl: 1 }, gap: 3 }}>
-              <Box sx={{ width: { lg: "128px" } }}>
+            <Box
+              sx={{
+                display: "flex",
+                flex: { xl: 1 },
+                gap: 3,
+              }}
+            >
+              <Box
+                sx={{
+                  width: { lg: "128px" },
+                  display: "flex",
+                  alignItems: "flex-end",
+                  flexDirection: "column",
+                }}
+              >
                 <Typography
                   data-testid={`${view}-voting-power-label`}
                   variant="caption"
@@ -232,7 +245,7 @@ export const DRepCard = ({
                   data-testid={`${view}-voting-power`}
                   sx={{ whiteSpace: "nowrap" }}
                 >
-                  ₳ {correctVoteAdaFormat(votingPower)}
+                  ₳ {correctDRepDirectoryFormat(votingPower)}
                 </Typography>
               </Box>
               <Divider

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

@@ -7,7 +7,7 @@ import { useCardano, useModal } from "@context";
 import { useDelegateTodRep, useScreenDimension, useTranslation } from "@hooks";
 import { Card, DataMissingInfoBox } from "@molecules";
 import {
-  correctVoteAdaFormat,
+  correctDRepDirectoryFormat,
   encodeCIP129Identifier,
   testIdFromLabel,
 } from "@utils";
@@ -146,7 +146,7 @@ export const DRepDetailsCard = ({
             sx={{ display: "flex", flexDirection: "row", mt: 0.5 }}
           >
             {"₳ "}
-            {correctVoteAdaFormat(votingPower)}
+            {correctDRepDirectoryFormat(votingPower)}
           </Typography>
         </DRepDetailsInfoItem>
       </Box>

govtool/frontend/src/pages/DRepDirectoryContent.tsx

@@ -14,7 +14,12 @@ import {
 } from "@hooks";
 import { DataActionsBar, EmptyStateDrepDirectory } from "@molecules";
 import { AutomatedVotingOptions, DRepCard } from "@organisms";
-import { correctVoteAdaFormat, isSameDRep, uniqBy, parseBoolean } from "@utils";
+import {
+  isSameDRep,
+  uniqBy,
+  parseBoolean,
+  correctDRepDirectoryFormat,
+} from "@utils";
 import { DRepData, DRepListSort, DRepStatus } from "@models";
 import {
   AutomatedVotingOptionCurrentDelegation,
@@ -102,7 +107,7 @@ export const DRepDirectoryContent: FC<DRepDirectoryContentProps> = ({
     return <Loader />;
   }
 
-  const ada = correctVoteAdaFormat(votingPower);
+  const ada = correctDRepDirectoryFormat(votingPower);
 
   const filteredDoNotListDReps = uniqBy(
     dRepList?.filter((dRep) => {