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();