From 8b993041f38a27520ad61688ae4c7d90871c8f5b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Josip=20Crnkovi=C4=87?= <6536260+crnkovic@users.noreply.github.com> Date: Mon, 26 Feb 2024 16:15:07 +0100 Subject: [PATCH 1/3] wip --- .../CollectionName/NominateCollectionName.tsx | 11 ++-------- .../PopularCollectionsTable.blocks.tsx | 21 +++---------------- .../CollectionVoting/VoteCollections.tsx | 12 ++--------- .../WinnerCollections.blocks.tsx | 20 +++--------------- resources/js/Utils/Currency.test.tsx | 20 +++++++++++++++++- resources/js/Utils/Currency.tsx | 15 +++++++++++++ 6 files changed, 44 insertions(+), 55 deletions(-) diff --git a/resources/js/Components/Collections/CollectionName/NominateCollectionName.tsx b/resources/js/Components/Collections/CollectionName/NominateCollectionName.tsx index 5329fbf84..38045dccf 100644 --- a/resources/js/Components/Collections/CollectionName/NominateCollectionName.tsx +++ b/resources/js/Components/Collections/CollectionName/NominateCollectionName.tsx @@ -3,7 +3,7 @@ import { useRef } from "react"; import { Img } from "@/Components/Image"; import { Tooltip } from "@/Components/Tooltip"; import { useIsTruncated } from "@/Hooks/useIsTruncated"; -import { FormatCrypto } from "@/Utils/Currency"; +import { FormatVolume } from "@/Utils/Currency"; export const NominateCollectionName = ({ collection, @@ -48,14 +48,7 @@ export const NominateCollectionName = ({ className="text-sm font-medium text-theme-secondary-700 dark:text-theme-dark-200 md:hidden" data-testid="CollectionName__volume" > - +

diff --git a/resources/js/Components/Collections/PopularCollectionsTable/PopularCollectionsTable.blocks.tsx b/resources/js/Components/Collections/PopularCollectionsTable/PopularCollectionsTable.blocks.tsx index b115bee83..d7121a0a2 100644 --- a/resources/js/Components/Collections/PopularCollectionsTable/PopularCollectionsTable.blocks.tsx +++ b/resources/js/Components/Collections/PopularCollectionsTable/PopularCollectionsTable.blocks.tsx @@ -4,7 +4,7 @@ import { PriceChange } from "@/Components/PriceChange/PriceChange"; import { Tooltip } from "@/Components/Tooltip"; import { useIsTruncated } from "@/Hooks/useIsTruncated"; import { CollectionImageWithIcon } from "@/Pages/Collections/Components/CollectionImage"; -import { FormatCrypto, FormatFiat } from "@/Utils/Currency"; +import { FormatCrypto, FormatFiat, FormatVolume } from "@/Utils/Currency"; export const PopularCollectionName = ({ collection, @@ -44,15 +44,7 @@ export const PopularCollectionName = ({

- {t("common.volume")}{" "} - + {t("common.volume")}

@@ -121,14 +113,7 @@ export const PopularCollectionVolume = ({ data-testid="PopularCollectionVolume__crypto" className="text-theme-secondary-900 dark:text-theme-dark-50" > - +
- {t("common.vol")}:{" "} - + {t("common.vol")}: diff --git a/resources/js/Pages/Collections/Components/WinnerCollections/WinnerCollections.blocks.tsx b/resources/js/Pages/Collections/Components/WinnerCollections/WinnerCollections.blocks.tsx index ce94f7028..14507ada5 100644 --- a/resources/js/Pages/Collections/Components/WinnerCollections/WinnerCollections.blocks.tsx +++ b/resources/js/Pages/Collections/Components/WinnerCollections/WinnerCollections.blocks.tsx @@ -9,7 +9,7 @@ import { Img } from "@/Components/Image"; import { DropdownButton } from "@/Components/SortDropdown"; import { Table, TableCell, TableRow } from "@/Components/Table"; import { WinnerBadgeFirst, WinnerBadgeSecond, WinnerBadgeThird } from "@/images"; -import { FormatCrypto } from "@/Utils/Currency"; +import { FormatCrypto, FormatVolume } from "@/Utils/Currency"; import { formatNumbershort } from "@/Utils/format-number"; import { isTruthy } from "@/Utils/is-truthy"; @@ -78,14 +78,7 @@ export const WinnerCollectionMainInfo = ({
- + @@ -251,14 +244,7 @@ export const WinnerCollectionTableRow = ({ innerClassName="justify-end" > - + diff --git a/resources/js/Utils/Currency.test.tsx b/resources/js/Utils/Currency.test.tsx index 9a3a2feba..3b6681f02 100644 --- a/resources/js/Utils/Currency.test.tsx +++ b/resources/js/Utils/Currency.test.tsx @@ -1,6 +1,6 @@ import UserDataFactory from "@/Tests/Factories/UserDataFactory"; import { render, screen } from "@/Tests/testing-library"; -import { FormatCrypto, FormatFiat, FormatFiatShort, FormatNumber } from "@/Utils/Currency"; +import { FormatCrypto, FormatFiat, FormatFiatShort, FormatNumber, FormatVolume } from "@/Utils/Currency"; const createUserWithCurrency = (currency: string): App.Data.UserData => new UserDataFactory().create({ @@ -110,6 +110,24 @@ describe("Currency helpers", () => { }); }); + describe("FormatVolume", () => { + it("should render a volume value", () => { + render( + , + ); + + expect(screen.getByText("123,456.78 BTC")).toBeTruthy(); + }); + }); + describe("FormatFiat", () => { const baseParameters = { user: undefined, diff --git a/resources/js/Utils/Currency.tsx b/resources/js/Utils/Currency.tsx index 49dc6e9c9..8ac0a81e5 100644 --- a/resources/js/Utils/Currency.tsx +++ b/resources/js/Utils/Currency.tsx @@ -126,6 +126,21 @@ export const FormatCrypto = ({ value, token, maximumFractionDigits }: CryptoProp return <>{`${number} ${token.symbol.toUpperCase()}`}; }; +export const FormatVolume = ({ + volume, + ...props +}: { volume: App.Data.VolumeData } & Omit): JSX.Element => ( + +); + export const FormatNumber = ({ value }: { value: string | number }): JSX.Element => { const { t } = useTranslation(); From 2c0e81789f5be33c79be2fb79a948f402791b085 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Josip=20Crnkovi=C4=87?= <6536260+crnkovic@users.noreply.github.com> Date: Mon, 26 Feb 2024 16:16:54 +0100 Subject: [PATCH 2/3] Update Currency.test.tsx --- resources/js/Utils/Currency.test.tsx | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/resources/js/Utils/Currency.test.tsx b/resources/js/Utils/Currency.test.tsx index 3b6681f02..c76e294ba 100644 --- a/resources/js/Utils/Currency.test.tsx +++ b/resources/js/Utils/Currency.test.tsx @@ -126,6 +126,22 @@ describe("Currency helpers", () => { expect(screen.getByText("123,456.78 BTC")).toBeTruthy(); }); + + it("should render 0 when no value is provided", () => { + render( + , + ); + + expect(screen.getByText("0 BTC")).toBeTruthy(); + }); }); describe("FormatFiat", () => { From ee7a89dfcd80a6a9864fecddea59a81be1a5e83d Mon Sep 17 00:00:00 2001 From: crnkovic Date: Mon, 26 Feb 2024 15:18:33 +0000 Subject: [PATCH 3/3] style: resolve linting violations --- resources/js/Utils/Currency.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/resources/js/Utils/Currency.tsx b/resources/js/Utils/Currency.tsx index 8ac0a81e5..d3348ebf2 100644 --- a/resources/js/Utils/Currency.tsx +++ b/resources/js/Utils/Currency.tsx @@ -128,7 +128,7 @@ export const FormatCrypto = ({ value, token, maximumFractionDigits }: CryptoProp export const FormatVolume = ({ volume, - ...props + ...properties }: { volume: App.Data.VolumeData } & Omit): JSX.Element => ( );