feat: marketplace links in NFT details page

app/Data/Collections/CollectionData.php

@@ -31,6 +31,7 @@ public function __construct(
         #[WithTransformer(IpfsGatewayUrlTransformer::class)]
         public ?string $image,
         public ?string $banner,
+        public ?string $openSeaSlug,
         public string $website,
         public int $nftsCount,
     ) {
@@ -56,6 +57,7 @@ public static function fromModel(Collection $collection): self
          * floor_price_decimals: int | null,
          * image: string | null,
          * banner: string | null,
+         * opensea_slug: string | null,
          * website: string,
          * nfts_count: int,
          * } $collection
@@ -72,6 +74,7 @@ public static function fromModel(Collection $collection): self
             floorPriceDecimals: $collection->floor_price_decimals,
             image: $collection->image,
             banner: $collection->banner,
+            openSeaSlug: $collection->opensea_slug,
             website: $collection->website,
             nftsCount: $collection->nfts_count,
         );

app/Data/Collections/CollectionDetailData.php

@@ -35,6 +35,7 @@ public function __construct(
         public ?string $image,
         public ?string $banner,
         public ?string $bannerUpdatedAt,
+        public ?string $openSeaSlug,
         public ?string $website,
         public ?string $twitter,
         public ?string $discord,
@@ -65,6 +66,7 @@ public static function fromModel(Collection $collection, CurrencyCode $currencyC
             image: $collection->extra_attributes->get('image'),
             banner: $collection->extra_attributes->get('banner'),
             bannerUpdatedAt: $collection->extra_attributes->get('banner_updated_at'),
+            openSeaSlug: $collection->extra_attributes->get('opensea_slug'),
             website: $collection->website(defaultToExplorer: false),
             twitter: $collection->twitter(),
             discord: $collection->discord(),

app/Data/Gallery/GalleryCollectionData.php

@@ -31,6 +31,7 @@ public function __construct(
         public ?string $image,
         public ?string $banner,
         public ?string $bannerUpdatedAt,
+        public ?string $openSeaSlug,
         public ?string $website,
         public ?int $nftsCount,
     ) {
@@ -52,6 +53,7 @@ public static function fromModel(Collection $collection, CurrencyCode $currencyC
             image: $collection->extra_attributes->get('image'),
             banner: $collection->extra_attributes->get('banner'),
             bannerUpdatedAt: $collection->extra_attributes->get('banner_updated_at'),
+            openSeaSlug: $collection->extra_attributes->get('opensea_slug'),
             website: $collection->website(),
             nftsCount: $collection->nfts_count ?? null,
         );

app/Data/Nfts/NftCollectionData.php

@@ -26,6 +26,7 @@ public function __construct(
         public string $website,
         #[WithTransformer(IpfsGatewayUrlTransformer::class)]
         public ?string $image,
+        public ?string $openSeaSlug,
     ) {
     }
 
@@ -40,6 +41,7 @@ public static function fromModel(Collection $collection, CurrencyCode $currencyC
             floorPrice: $collection->floor_price,
             website: $collection->website(),
             image: $collection->extra_attributes->get('image'),
+            openSeaSlug: $collection->extra_attributes->get('opensea_slug'),
         );
     }
 }

app/Models/Collection.php

@@ -406,6 +406,7 @@ public function scopeForCollectionData(Builder $query, User $user = null): Build
             DB::raw('tokens.decimals as floor_price_decimals'),
             DB::raw(sprintf($extraAttributeSelect, 'image', 'image').' as image'),
             DB::raw(sprintf($extraAttributeSelect, 'banner', 'banner').' as banner'),
+            DB::raw(sprintf($extraAttributeSelect, 'opensea_slug', 'opensea_slug').' as opensea_slug'),
             // gets the website url with the same logic used on the `website` method
             DB::raw(sprintf('COALESCE(%s, CONCAT(networks.explorer_url, \'%s\', collections.address)) as website', sprintf($extraAttributeSelect, 'website', 'website'), '/token/')),
             DB::raw('COUNT(collection_nfts.id) as nfts_count'),

app/Support/Web3NftHandler.php

@@ -71,7 +71,6 @@ public function store(Collection $nfts, bool $dispatchJobs = false): void
                     'banner' => $nftData->collectionBannerImageUrl,
                     'banner_updated_at' => $nftData->collectionBannerImageUrl ? $now : null,
                     'opensea_slug' => $nftData->collectionOpenSeaSlug,
-
                 ]),
                 $nftData->mintedBlock,
                 $nftData->mintedAt?->toDateTimeString(),

lang/en/urls.php

@@ -43,4 +43,22 @@
             'nft' => 'https://goerli.etherscan.io/nft/:address/:nftId',
         ],
     ],
+    'marketplaces' => [
+        'opensea' => [
+            'collection' => 'https://opensea.io/assets/:network/:address',
+            'nft' => 'https://opensea.io/assets/:network/:address/:nftId',
+        ],
+        'rarible' => [
+            'collection' => 'https://rarible.com/collection/:address/items',
+            'nft' => 'https://rarible.com/token/:address::nftId',
+        ],
+        'blur' => [
+            'collection' => 'https://blur.io/collection/:address',
+            'nft' => 'https://blur.io/asset/:address/:nftId',
+        ],
+        'looksrare' => [
+            'collection' => 'https://looksrare.org/collections/:address',
+            'nft' => 'https://looksrare.org/collections/:address/:nftId',
+        ],
+    ],
 ];

resources/js/Components/Collections/Nfts/NftHeader/NftHeader.test.tsx

@@ -69,4 +69,62 @@ describe("NftHeader", () => {
 
         expect(screen.getByTestId("NftHeader__mobile")).toBeInTheDocument();
     });
+
+    it("should render marketplaces in mobile if openSeaSlug is not null", () => {
+        const collection = new NFTCollectionFactory().create({
+            openSeaSlug: "test-slug",
+        });
+
+        const nft = new NftFactory().withWallet().create({
+            collection,
+        });
+
+        render(<NftHeader nft={nft} />, { breakpoint: Breakpoint.sm });
+
+        expect(screen.getByTestId("NftMarketplaces__Opensea")).toBeInTheDocument();
+        expect(screen.queryByTestId("NftHeader__mobile__marketplaces_point")).toHaveClass("sm:block");
+    });
+
+    it("should not render marketplaces and its point in mobile view if openSeaSlug is null", () => {
+        const collection = new NFTCollectionFactory().create({
+            openSeaSlug: null,
+        });
+
+        const nft = new NftFactory().withWallet().create({
+            collection,
+        });
+
+        render(<NftHeader nft={nft} />, { breakpoint: Breakpoint.sm });
+
+        expect(screen.queryByTestId("NftMarketplaces__Opensea")).not.toBeInTheDocument();
+        expect(screen.queryByTestId("NftHeader__mobile__marketplaces_point")).not.toHaveClass("sm:block");
+    });
+
+    it("should render marketplaces in desktop if openSeaSlug is not null", () => {
+        const collection = new NFTCollectionFactory().create({
+            openSeaSlug: "test-slug",
+        });
+
+        const nft = new NftFactory().withWallet().create({
+            collection,
+        });
+
+        render(<NftHeader nft={nft} />, { breakpoint: Breakpoint.xl });
+
+        expect(screen.getByTestId("NftMarketplaces__Opensea")).toBeInTheDocument();
+    });
+
+    it("should not render marketplaces in desktop if openSeaSlug is null", () => {
+        const collection = new NFTCollectionFactory().create({
+            openSeaSlug: null,
+        });
+
+        const nft = new NftFactory().withWallet().create({
+            collection,
+        });
+
+        render(<NftHeader nft={nft} />, { breakpoint: Breakpoint.xl });
+
+        expect(screen.queryByTestId("NftMarketplaces__Opensea")).not.toBeInTheDocument();
+    });
 });

resources/js/Components/Collections/Nfts/NftHeader/NftHeader.tsx

@@ -1,10 +1,14 @@
+import cn from "classnames";
 import { useTranslation } from "react-i18next";
+
 import { CollectionDescription } from "@/Components/Collections/CollectionDescription";
 import { NftActions } from "@/Components/Collections/Nfts/NftHeader/NftActions";
 import { NftBasicInfo } from "@/Components/Collections/Nfts/NftHeader/NftBasicInfo";
 import { NftOwner } from "@/Components/Collections/Nfts/NftHeader/NftOwner";
+import { Marketplaces } from "@/Components/Marketplaces";
 import { Point } from "@/Components/Point";
 import { useBreakpoint } from "@/Hooks/useBreakpoint";
+import { isTruthy } from "@/Utils/is-truthy";
 
 interface Properties {
     nft: App.Data.Nfts.NftData;
@@ -43,6 +47,18 @@ export const NftHeader = ({
                                 description={nft.collection.description}
                                 linkClassName="font-medium text-sm"
                             />
+
+                            {isTruthy(nft.collection.openSeaSlug) && (
+                                <div className="flex flex-row items-center gap-2">
+                                    <Point />
+                                    <Marketplaces
+                                        type="nft"
+                                        nftId={nft.tokenNumber}
+                                        address={nft.collection.address}
+                                        chainId={nft.collection.chainId}
+                                    />
+                                </div>
+                            )}
                         </div>
                     </div>
                 </div>
@@ -63,18 +79,39 @@ export const NftHeader = ({
     return (
         <>
             <div
-                className="flex w-full flex-row items-center justify-center gap-2 border-b border-solid border-theme-secondary-300 bg-theme-secondary-50 px-7 pb-4 pt-4 backdrop-blur xs:px-8 sm:border-none sm:pb-4"
+                className="flex w-full flex-col items-center justify-center gap-2 border-b border-solid border-theme-secondary-300 bg-theme-secondary-50 px-7 pb-4 pt-4 backdrop-blur xs:px-8 sm:flex-row sm:border-none sm:pb-4"
                 data-testid="NftHeader__mobile"
             >
-                <NftOwner nft={nft} />
+                <div className="flex flex-row items-center justify-center gap-2">
+                    <NftOwner nft={nft} />
 
-                <Point />
+                    <Point />
 
-                <CollectionDescription
-                    name={t("pages.nfts.about_nft")}
-                    description={nft.collection.description}
-                    linkClassName="font-medium text-sm"
-                />
+                    <CollectionDescription
+                        name={t("pages.nfts.about_nft")}
+                        description={nft.collection.description}
+                        linkClassName="font-medium text-sm"
+                    />
+
+                    <div
+                        className={cn("hidden", {
+                            "sm:block": isTruthy(nft.collection.openSeaSlug),
+                        })}
+                        data-testid="NftHeader__mobile__marketplaces_point"
+                    >
+                        <Point />
+                    </div>
+                </div>
+                <div>
+                    {isTruthy(nft.collection.openSeaSlug) && (
+                        <Marketplaces
+                            type="nft"
+                            nftId={nft.tokenNumber}
+                            address={nft.collection.address}
+                            chainId={nft.collection.chainId}
+                        />
+                    )}
+                </div>
             </div>
 
             <div className="mb-6 flex w-full flex-col gap-4 border-b border-solid border-theme-secondary-300 bg-white pb-6 pt-4">

resources/js/Components/Marketplaces.test.tsx

@@ -0,0 +1,129 @@
+import { render, screen } from "@testing-library/react";
+import { t } from "i18next";
+import { Marketplaces } from "./Marketplaces";
+import NFTCollectionFactory from "@/Tests/Factories/Nfts/NFTCollectionFactory";
+import NftFactory from "@/Tests/Factories/Nfts/NftFactory";
+import { ExplorerChains } from "@/Utils/Explorer";
+
+describe("Marketplaces", () => {
+    const collection = new NFTCollectionFactory().create({
+        chainId: ExplorerChains.EthereumMainnet,
+    });
+
+    const polygonCollection = new NFTCollectionFactory().create({
+        chainId: ExplorerChains.PolygonMainnet,
+    });
+
+    const nft = new NftFactory().create({
+        collection,
+    });
+
+    const polygonNft = new NftFactory().create({
+        collection: polygonCollection,
+    });
+
+    it("should render", () => {
+        render(
+            <Marketplaces
+                address={collection.address}
+                nftId={nft.tokenNumber}
+                chainId={collection.chainId}
+                type="nft"
+            />,
+        );
+
+        expect(screen.getByTestId("NftMarketplaces")).toBeInTheDocument();
+    });
+
+    it.each([
+        [
+            "NftMarketplaces__Opensea",
+            t("urls.marketplaces.opensea.nft", {
+                nftId: nft.tokenNumber,
+                network: "ethereum",
+                address: collection.address,
+            }).toLowerCase(),
+        ],
+        [
+            "NftMarketplaces__Rarible",
+            t("urls.marketplaces.rarible.nft", {
+                nftId: nft.tokenNumber,
+                network: "ethereum",
+                address: collection.address,
+            }).toLowerCase(),
+        ],
+        [
+            "NftMarketplaces__Blur",
+            t("urls.marketplaces.blur.nft", {
+                nftId: nft.tokenNumber,
+                network: "ethereum",
+                address: collection.address,
+            }).toLowerCase(),
+        ],
+        [
+            "NftMarketplaces__LooksRare",
+            t("urls.marketplaces.looksrare.nft", {
+                nftId: nft.tokenNumber,
+                network: "ethereum",
+                address: collection.address,
+            }).toLowerCase(),
+        ],
+    ])("should render %s NFT url for ethereum", (testId, url) => {
+        render(
+            <Marketplaces
+                address={collection.address}
+                nftId={nft.tokenNumber}
+                chainId={collection.chainId}
+                type="nft"
+            />,
+        );
+
+        expect(screen.getByTestId(testId)).toHaveAttribute("href", url);
+    });
+
+    it.each([
+        [
+            "NftMarketplaces__Opensea",
+            t("urls.marketplaces.opensea.collection", {
+                nftId: polygonNft.tokenNumber,
+                network: "matic",
+                address: polygonCollection.address,
+            }).toLowerCase(),
+        ],
+        [
+            "NftMarketplaces__Rarible",
+            t("urls.marketplaces.rarible.collection", {
+                nftId: polygonNft.tokenNumber,
+                network: "matic",
+                address: polygonCollection.address,
+            }).toLowerCase(),
+        ],
+        [
+            "NftMarketplaces__Blur",
+            t("urls.marketplaces.blur.collection", {
+                nftId: polygonNft.tokenNumber,
+                network: "matic",
+                address: polygonCollection.address,
+            }).toLowerCase(),
+        ],
+        [
+            "NftMarketplaces__LooksRare",
+            t("urls.marketplaces.looksrare.collection", {
+                nftId: polygonNft.tokenNumber,
+                network: "matic",
+                address: polygonCollection.address,
+            }).toLowerCase(),
+        ],
+    ])("should render %s collection url for polygon", (testId, url) => {
+        render(
+            <Marketplaces
+                address={polygonCollection.address}
+                nftId={polygonNft.tokenNumber}
+                chainId={polygonCollection.chainId}
+                type="collection"
+            />,
+        );
+
+        expect(screen.getByTestId(testId)).toHaveAttribute("href", url);
+    });
+});