refactor: add utility to format the volume data

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"
                     >
-                        <FormatCrypto
-                            value={collection.volume.value ?? "0"}
-                            token={{
-                                symbol: collection.volume.currency,
-                                name: collection.volume.currency,
-                                decimals: collection.volume.decimals,
-                            }}
-                        />
+                        <FormatVolume volume={collection.volume} />
                     </p>
                 </div>
             </div>

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 = ({
                     </Tooltip>
 
                     <p className="block truncate text-xs font-medium leading-4.5 text-theme-secondary-700 dark:text-theme-dark-200 md:text-sm md:leading-5.5 md-lg:hidden">
-                        {t("common.volume")}{" "}
-                        <FormatCrypto
-                            value={collection.volume.value ?? "0"}
-                            token={{
-                                symbol: collection.volume.currency,
-                                name: collection.volume.currency,
-                                decimals: collection.volume.decimals,
-                            }}
-                        />
+                        {t("common.volume")} <FormatVolume volume={collection.volume} />
                     </p>
                 </div>
             </div>
@@ -121,14 +113,7 @@ export const PopularCollectionVolume = ({
                 data-testid="PopularCollectionVolume__crypto"
                 className="text-theme-secondary-900 dark:text-theme-dark-50"
             >
-                <FormatCrypto
-                    value={collection.volume.value ?? "0"}
-                    token={{
-                        symbol: collection.volume.currency,
-                        name: collection.volume.currency,
-                        decimals: collection.volume.decimals,
-                    }}
-                />
+                <FormatVolume volume={collection.volume} />
             </div>
 
             <div

resources/js/Pages/Collections/Components/CollectionVoting/VoteCollections.tsx

@@ -16,7 +16,7 @@ import { Tooltip } from "@/Components/Tooltip";
 import { useAuthorizedAction } from "@/Hooks/useAuthorizedAction";
 import { useBreakpoint } from "@/Hooks/useBreakpoint";
 import { CollectionsVoteReceivedModal } from "@/Pages/Collections/Components/CollectionsVoteReceivedModal";
-import { FormatCrypto } from "@/Utils/Currency";
+import { FormatVolume } from "@/Utils/Currency";
 import { isTruthy } from "@/Utils/is-truthy";
 import { range } from "@/utils/range";
 
@@ -302,15 +302,7 @@ export const VoteCollection = ({
                             </span>
 
                             <span className="hidden text-sm font-medium leading-5.5 text-theme-secondary-700 dark:text-theme-dark-200 md-lg:block">
-                                {t("common.vol")}:{" "}
-                                <FormatCrypto
-                                    value={collection.volume.value ?? "0"}
-                                    token={{
-                                        symbol: collection.volume.currency,
-                                        name: collection.volume.currency,
-                                        decimals: collection.volume.decimals,
-                                    }}
-                                />
+                                {t("common.vol")}: <FormatVolume volume={collection.volume} />
                             </span>
 
                             <span className="mt-0.5 md-lg:hidden">

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 = ({
 
             <div className="mt-4 flex w-full flex-col items-center space-y-4 sm:flex-row sm:justify-between sm:space-y-0 lg:hidden">
                 <WinnerCollectionLabel label={t("common.volume")}>
-                    <FormatCrypto
-                        value={collection.volume.value ?? "0"}
-                        token={{
-                            symbol: collection.volume.currency,
-                            name: collection.volume.currency,
-                            decimals: collection.volume.decimals,
-                        }}
-                    />
+                    <FormatVolume volume={collection.volume} />
                 </WinnerCollectionLabel>
 
                 <WinnerCollectionLabel label={t("common.floor_price")}>
@@ -251,14 +244,7 @@ export const WinnerCollectionTableRow = ({
                 innerClassName="justify-end"
             >
                 <WinnerCollectionLabel label={t("common.volume")}>
-                    <FormatCrypto
-                        value={collection.volume.value ?? "0"}
-                        token={{
-                            symbol: collection.volume.currency,
-                            name: collection.volume.currency,
-                            decimals: collection.volume.decimals,
-                        }}
-                    />
+                    <FormatVolume volume={collection.volume} />
                 </WinnerCollectionLabel>
             </TableCell>
 

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(
+                <FormatVolume
+                    volume={{
+                        value: "12345678",
+                        fiat: 0,
+                        currency: "BTC",
+                        decimals: 2,
+                    }}
+                    maximumFractionDigits={2}
+                />,
+            );
+
+            expect(screen.getByText("123,456.78 BTC")).toBeTruthy();
+        });
+
+        it("should render 0 when no value is provided", () => {
+            render(
+                <FormatVolume
+                    volume={{
+                        value: null,
+                        fiat: 0,
+                        currency: "BTC",
+                        decimals: 2,
+                    }}
+                    maximumFractionDigits={2}
+                />,
+            );
+
+            expect(screen.getByText("0 BTC")).toBeTruthy();
+        });
+    });
+
     describe("FormatFiat", () => {
         const baseParameters = {
             user: undefined,

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<CryptoProperties, "value" | "token">): JSX.Element => (
+    <FormatCrypto
+        value={volume.value ?? "0"}
+        token={{
+            symbol: volume.currency,
+            name: volume.currency,
+            decimals: volume.decimals,
+        }}
+        {...properties}
+    />
+);
+
 export const FormatNumber = ({ value }: { value: string | number }): JSX.Element => {
     const { t } = useTranslation();