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..c76e294ba 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,40 @@ describe("Currency helpers", () => { }); }); + describe("FormatVolume", () => { + it("should render a volume value", () => { + render( + , + ); + + 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", () => { const baseParameters = { user: undefined, diff --git a/resources/js/Utils/Currency.tsx b/resources/js/Utils/Currency.tsx index 49dc6e9c9..d3348ebf2 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, + ...properties +}: { volume: App.Data.VolumeData } & Omit): JSX.Element => ( + +); + export const FormatNumber = ({ value }: { value: string | number }): JSX.Element => { const { t } = useTranslation();