From e86a79b30bef1bd568995c3704eef5364c0b8c23 Mon Sep 17 00:00:00 2001
From: Juan Patricio Marroquin <juan.marroquin1@unmsm.edu.pe>
Date: Tue, 31 Oct 2023 07:15:14 -0500
Subject: [PATCH] fix: coverage for unknown network prop in marketplaces
 component

---
 resources/js/Components/Marketplaces.test.tsx | 16 +++++++++++++++
 resources/js/Components/Marketplaces.tsx      | 20 +++++++++++++------
 2 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/resources/js/Components/Marketplaces.test.tsx b/resources/js/Components/Marketplaces.test.tsx
index d1dc57390..4467be45b 100644
--- a/resources/js/Components/Marketplaces.test.tsx
+++ b/resources/js/Components/Marketplaces.test.tsx
@@ -126,4 +126,20 @@ describe("Marketplaces", () => {
 
         expect(screen.getByTestId(testId)).toHaveAttribute("href", url);
     });
+
+    it("should render null url for unknown chain", () => {
+        render(
+            <Marketplaces
+                address={polygonCollection.address}
+                nftId={polygonNft.tokenNumber}
+                chainId={0 as ExplorerChains}
+                type="collection"
+            />,
+        );
+
+        expect(screen.getByTestId("NftMarketplaces__Opensea")).toHaveAttribute("href", "#");
+        expect(screen.getByTestId("NftMarketplaces__Rarible")).toHaveAttribute("href", "#");
+        expect(screen.getByTestId("NftMarketplaces__Blur")).toHaveAttribute("href", "#");
+        expect(screen.getByTestId("NftMarketplaces__LooksRare")).toHaveAttribute("href", "#");
+    });
 });
diff --git a/resources/js/Components/Marketplaces.tsx b/resources/js/Components/Marketplaces.tsx
index 5c1d0c28e..758d07757 100644
--- a/resources/js/Components/Marketplaces.tsx
+++ b/resources/js/Components/Marketplaces.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import { ButtonLink } from "@/Components/Buttons/ButtonLink";
 import { ExplorerChains } from "@/Utils/Explorer";
+import { isTruthy } from "@/Utils/is-truthy";
 
 interface Properties {
     type: "nft" | "collection";
@@ -24,12 +25,19 @@ const getNetworkName = (chainId: App.Enums.Chains): string | null => {
 export const Marketplaces = ({ type, chainId, address, nftId }: Properties): JSX.Element => {
     const { t } = useTranslation();
 
-    const getMarketplaceUrl = (marketplace: string): string =>
-        t(`urls.marketplaces.${marketplace}.${type}`, {
-            nftId,
-            network: getNetworkName(chainId),
-            address,
-        }).toLowerCase();
+    const getMarketplaceUrl = (marketplace: string): string => {
+        const networkName = getNetworkName(chainId);
+
+        if (isTruthy(networkName)) {
+            return t(`urls.marketplaces.${marketplace}.${type}`, {
+                nftId,
+                network: networkName,
+                address,
+            }).toLowerCase();
+        }
+
+        return "#";
+    };
 
     return (
         <div