diff --git a/govtool/frontend/src/components/atoms/StatusPill.tsx b/govtool/frontend/src/components/atoms/StatusPill.tsx index df17ea51f..d50df7576 100644 --- a/govtool/frontend/src/components/atoms/StatusPill.tsx +++ b/govtool/frontend/src/components/atoms/StatusPill.tsx @@ -1,6 +1,7 @@ import { Chip, ChipProps, styled } from "@mui/material"; import { cyan, errorRed, successGreen } from "@/consts"; import { DRepStatus } from "@/models"; +import { theme } from "@/theme"; interface StatusPillProps { status: DRepStatus; @@ -20,7 +21,7 @@ export const StatusPill = ({ size={size} label={label} sx={{ - px: 0.5, + px: status === DRepStatus.Yourself ? 0.75 : 0.5, py: 0.5, height: 24, ...sx, @@ -32,20 +33,24 @@ const bgColor = { [DRepStatus.Active]: successGreen.c200, [DRepStatus.Inactive]: errorRed.c100, [DRepStatus.Retired]: cyan.c100, + [DRepStatus.Yourself]: theme.palette.lightBlue, }; const textColor = { [DRepStatus.Active]: successGreen.c700, [DRepStatus.Inactive]: errorRed.c500, [DRepStatus.Retired]: cyan.c500, + [DRepStatus.Yourself]: theme.palette.textBlack, }; const StyledChip = styled(Chip)<{ status: DRepStatus }>( - ({ theme, status }) => ({ + ({ theme: themeStyles, status }) => ({ backgroundColor: bgColor[status], color: textColor[status], - border: `2px solid ${theme.palette.neutralWhite}`, fontSize: "0.75rem", textTransform: "capitalize", + ...(status !== DRepStatus.Yourself && { + border: `2px solid ${themeStyles.palette.neutralWhite}`, + }), }), ); diff --git a/govtool/frontend/src/components/organisms/DRepCard.tsx b/govtool/frontend/src/components/organisms/DRepCard.tsx index 48be4b878..95ab2581f 100644 --- a/govtool/frontend/src/components/organisms/DRepCard.tsx +++ b/govtool/frontend/src/components/organisms/DRepCard.tsx @@ -5,9 +5,9 @@ import { Button, StatusPill, Typography } from "@atoms"; import { ICONS, PATHS } from "@consts"; import { useModal, useSnackbar } from "@context"; import { useTranslation } from "@hooks"; -import { DRepData } from "@models"; +import { DRepData, DRepStatus } from "@models"; import { Card } from "@molecules"; -import { correctAdaFormat } from "@utils"; +import { correctDRepDirectoryFormat } from "@utils"; type DRepCardProps = { dRep: DRepData; @@ -44,7 +44,6 @@ export const DRepCard = ({ + {isMe && ( + + )} - + {type} - + - ₳ {correctAdaFormat(votingPower)} + ₳ {correctDRepDirectoryFormat(votingPower)} {t("status")} - + + + {isMe && ( + + )} + @@ -136,12 +149,12 @@ export const DRepCard = ({ diff --git a/govtool/frontend/src/models/api.ts b/govtool/frontend/src/models/api.ts index e5af4e1d9..1cdceaa97 100644 --- a/govtool/frontend/src/models/api.ts +++ b/govtool/frontend/src/models/api.ts @@ -16,6 +16,7 @@ export enum DRepStatus { Active = "Active", Inactive = "Inactive", Retired = "Retired", + Yourself = "Yourself", } export enum DRepListSort { diff --git a/govtool/frontend/src/utils/adaFormat.ts b/govtool/frontend/src/utils/adaFormat.ts index 269b0f307..d76cdd7d7 100644 --- a/govtool/frontend/src/utils/adaFormat.ts +++ b/govtool/frontend/src/utils/adaFormat.ts @@ -7,3 +7,11 @@ export const correctAdaFormat = (lovelace: number | undefined) => { } return 0; }; + +export const correctDRepDirectoryFormat = (lovelace: number | undefined) => { + if (lovelace) { + return Number((lovelace / LOVELACE).toFixed(0))?.toLocaleString("en-US"); + } + + return "0"; +}; diff --git a/govtool/frontend/src/utils/tests/adaFormat.test.ts b/govtool/frontend/src/utils/tests/adaFormat.test.ts index 79d8c0f3b..cbd125f52 100644 --- a/govtool/frontend/src/utils/tests/adaFormat.test.ts +++ b/govtool/frontend/src/utils/tests/adaFormat.test.ts @@ -1,4 +1,4 @@ -import { correctAdaFormat } from ".."; +import { correctAdaFormat, correctDRepDirectoryFormat } from ".."; describe("correctAdaFormat", () => { const LOVELACE = 1000000; @@ -34,3 +34,23 @@ describe("correctAdaFormat", () => { expect(correctAdaFormat(lovelace)).toBe(0); }); }); + +describe("correctDRepDirectoryFormat", () => { + test("Correctly formats lovelace value to directory format", () => { + const lovelace = 143500000000; + const expectedResult = "143,500"; + expect(correctDRepDirectoryFormat(lovelace)).toBe(expectedResult); + }); + + test("Returns 0 for numbers smaller than one million", () => { + const lovelace = 1435; + const expectedResult = "0"; + expect(correctDRepDirectoryFormat(lovelace)).toBe(expectedResult); + }); + + test("Returns result without comma", () => { + const lovelace = undefined; + const expectedResult = "0"; + expect(correctDRepDirectoryFormat(lovelace)).toBe(expectedResult); + }); +});