feat: featured collections carousel

app/Data/Collections/CollectionFeaturedData.php

@@ -0,0 +1,73 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Data\Collections;
+
+use App\Data\Gallery\GalleryNftData;
+use App\Enums\CurrencyCode;
+use App\Models\Collection;
+use App\Transformers\IpfsGatewayUrlTransformer;
+use Illuminate\Support\Str;
+use Spatie\LaravelData\Attributes\DataCollectionOf;
+use Spatie\LaravelData\Attributes\WithTransformer;
+use Spatie\LaravelData\Data;
+use Spatie\LaravelData\DataCollection;
+use Spatie\TypeScriptTransformer\Attributes\LiteralTypeScriptType;
+use Spatie\TypeScriptTransformer\Attributes\TypeScript;
+
+#[TypeScript]
+class CollectionFeaturedData extends Data
+{
+    /**
+     * @param  DataCollection<int, GalleryNftData>  $nfts
+     */
+    public function __construct(
+        public int $id,
+        public string $name,
+        public string $slug,
+        public string $address,
+        #[LiteralTypeScriptType('App.Enums.Chain')]
+        public int $chainId,
+        public ?string $floorPrice,
+        public ?float $floorPriceFiat,
+        public ?string $floorPriceCurrency,
+        public ?int $floorPriceDecimals,
+        #[WithTransformer(IpfsGatewayUrlTransformer::class)]
+        public ?string $image,
+        public ?string $banner,
+        public ?string $openSeaSlug,
+        public string $website,
+        public int $nftsCount,
+        #[DataCollectionOf(GalleryNftData::class)]
+        public DataCollection $nfts,
+        public bool $isFeatured,
+        public ?string $description,
+        public ?string $volume,
+    ) {
+    }
+
+    public static function fromModel(Collection $collection, CurrencyCode $currency): self
+    {
+        return new self(
+            id: $collection->id,
+            name: $collection->name,
+            slug: $collection->slug,
+            address: $collection->address,
+            chainId: $collection->network->chain_id,
+            floorPrice: $collection->floor_price,
+            floorPriceFiat: (float) $collection->fiatValue($currency),
+            floorPriceCurrency: $collection->floorPriceToken ? Str::lower($collection->floorPriceToken->symbol) : null,
+            floorPriceDecimals: $collection->floorPriceToken?->decimals,
+            image: $collection->extra_attributes->get('image'),
+            banner: $collection->extra_attributes->get('banner'),
+            openSeaSlug: $collection->extra_attributes->get('opensea_slug'),
+            website: $collection->website(),
+            nftsCount: $collection->nfts_count,
+            nfts: GalleryNftData::collection($collection->cachedNfts),
+            isFeatured: $collection->is_featured,
+            description: $collection->description,
+            volume: $collection->volume,
+        );
+    }
+}

app/Http/Controllers/CollectionController.php

@@ -7,6 +7,7 @@
 use App\Data\Articles\ArticleData;
 use App\Data\Articles\ArticlesData;
 use App\Data\Collections\CollectionDetailData;
+use App\Data\Collections\CollectionFeaturedData;
 use App\Data\Collections\CollectionTraitFilterData;
 use App\Data\Collections\PopularCollectionData;
 use App\Data\Gallery\GalleryNftData;
@@ -30,6 +31,7 @@
 use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
 use Illuminate\Pagination\LengthAwarePaginator;
+use Illuminate\Support\Facades\Cache;
 use Inertia\Inertia;
 use Inertia\Response;
 use Spatie\LaravelData\PaginatedDataCollection;
@@ -40,6 +42,16 @@ public function index(Request $request): Response|JsonResponse|RedirectResponse
     {
         $user = $request->user();
 
+        $featuredCollections = Collection::where('is_featured', true)
+            ->withCount(['nfts'])
+            ->get();
+
+        $featuredCollections->each(function (Collection $collection) {
+            $collection->cachedNfts = Cache::remember('featuredNftsForCollection'.$collection->id, 3600 * 12, function () use ($collection) {
+                return $collection->nfts()->inRandomOrder()->take(3)->get();
+            });
+        });
+
         $currency = $user ? $user->currency() : CurrencyCode::USD;
 
         $collectionQuery = $user ? $user->collections() : Collection::query();
@@ -70,6 +82,9 @@ public function index(Request $request): Response|JsonResponse|RedirectResponse
             'collections' => PopularCollectionData::collection(
                 $collections->through(fn ($collection) => PopularCollectionData::fromModel($collection, $currency))
             ),
+            'featuredCollections' => $featuredCollections->map(function (Collection $collection) use ($user) {
+                return CollectionFeaturedData::fromModel($collection, $user ? $user->currency() : CurrencyCode::USD);
+            }),
         ]);
     }
 

app/Models/Collection.php

@@ -33,6 +33,7 @@
  * @property ?string $floor_price
  * @property ?string $last_indexed_token_number
  * @property ?string $image
+ * @property \Illuminate\Database\Eloquent\Collection<int,Nft> $cachedNfts
  *
  * @method BelongsToMany<Article> articlesWithCollections()
  */
@@ -44,6 +45,11 @@ class Collection extends Model
 
     const DISCORD_URL = 'https://discord.gg/';
 
+    /**
+     * @var \Illuminate\Database\Eloquent\Collection<int, Nft>
+     */
+    public $cachedNfts;
+
     /**
      * @var array<string>
      */

database/factories/CollectionFactory.php

@@ -38,6 +38,7 @@ public function definition(): array
                 'image' => fake()->imageUrl(360, 360, 'animals', true),
                 'website' => fake()->url(),
             ]),
+            'is_featured' => fn () => random_int(0, 1),
         ];
     }
 }

database/seeders/NftSeeder.php

@@ -40,6 +40,8 @@ public function run(): void
                     'website' => $collectionArray['website'],
                 ]),
                 'created_at' => fake()->dateTimeBetween('-2 months'),
+                'is_featured' => $collectionArray['is_featured'] ?? false,
+                'description' => $collectionArray['description'] ?? '',
             ]);
 
             if (Feature::active(Features::Collections->value)) {
@@ -122,6 +124,8 @@ private function collections(): array
                     ['Background', 'Cosmic Purple', TraitDisplayType::Property, 6, 0.06],
                     ['Beak', 'Small', TraitDisplayType::Property, 4125, 42.15],
                 ],
+                'is_featured' => true,
+                'description' => 'Moonbirds are a collection of 10,000 unique NFTs living on the Ethereum blockchain. Each Moonbird is algorithmically generated and has a unique combination of traits, including body, eyes, beak, wings, and background. Moonbirds are a Proof NFT project.',
             ],
             [
                 // https://opensea.io/collection/timelessnfts
@@ -158,6 +162,8 @@ private function collections(): array
                 'traits' => [
                     ['Background', 'Blue', TraitDisplayType::Property, 1636, 16.36],
                 ],
+                'is_featured' => true,
+                'description' => 'Tubby Cats are a collection of 10,000 unique NFTs living on the Ethereum blockchain. Each Tubby Cat is algorithmically generated and has a unique combination of traits, including body, eyes, mouth, and background. Tubby Cats are a Proof NFT project.',
             ],
             [
                 // https://opensea.io/collection/alphadogs
@@ -176,6 +182,7 @@ private function collections(): array
                 'traits' => [
                     ['Background', 'Blue', TraitDisplayType::Property, 1636, 16.36],
                 ],
+                'is_featured' => true,
             ],
             [
                 // https://opensea.io/collection/devilvalley
@@ -210,6 +217,8 @@ private function collections(): array
                 'traits' => [
                     ['Beak', 'Small', TraitDisplayType::Property, 4125, 42.15],
                 ],
+                'is_featured' => true,
+                'description' => 'EDGEHOGS are a collection of 10,000 unique NFTs living on the Ethereum blockchain. Each EDGEHOG is algorithmically generated and has a unique combination of traits, including body, eyes, beak, wings, and background. EDGEHOGS are a Proof NFT project.',
             ],
             [
                 // https://opensea.io/collection/cryptoadz-by-gremplin

lang/en/common.php

@@ -114,6 +114,7 @@
     'n_hours' => '{0} :count hour|{1} :count hour|[2,*] :count hours',
     'n_minutes' => '{0} :count minute|{1} :count minute|[2,*] :count minutes',
     'report' => 'Report',
+    'nfts' => 'NFTs',
     'n_nfts' => '{0}NFTs|{1}NFT|[2,*]NFTs',
     'n_collections' => '{0}collections|{1}collection|[2,*]collections',
     'back' => 'Back',

lang/en/pages.php

@@ -121,6 +121,10 @@
             'notice_wait' => 'Please wait. You can refresh data every 15 minutes.',
             'toast' => "We're updating information for your collection.",
         ],
+        'featured' => [
+            'title' => 'Featured Collections',
+            'button' => 'Explore Collection',
+        ],
     ],
 
     'nfts' => [

resources/css/app.css

@@ -49,3 +49,21 @@
 .dark .auth-overlay-shadow {
     box-shadow: 0px 15px 35px 0px rgba(18, 18, 19, 0.4);
 }
+
+.featured-collections-overlay {
+    background-image: linear-gradient(180deg, rgb(var(--theme-color-primary-50)) 47.38%, transparent 216.53%);
+}
+
+.dark .featured-collections-overlay {
+    background-image: linear-gradient(181deg, rgb(var(--theme-color-dark-800)) 41.03%, transparent 208.87%);
+}
+
+@media (min-width: 960px) {
+    .featured-collections-overlay {
+        background-image: linear-gradient(90deg, rgb(var(--theme-color-primary-50)) 55.67%, transparent 151.85%);
+    }
+
+    .dark .featured-collections-overlay {
+        background-image: linear-gradient(90deg, rgb(var(--theme-color-dark-800)) 55.67%, transparent 151.85%);
+    }
+}

resources/js/Components/Collections/PopularCollectionsTable/PopularCollectionsTable.blocks.tsx

@@ -1,10 +1,9 @@
 import { useRef } from "react";
 import { useTranslation } from "react-i18next";
-import { Img } from "@/Components/Image";
-import { NetworkIcon } from "@/Components/Networks/NetworkIcon";
 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 { isTruthy } from "@/Utils/is-truthy";
 
@@ -23,18 +22,12 @@ export const PopularCollectionName = ({
             className="group relative h-11 w-full cursor-pointer md:h-12"
         >
             <div className="absolute flex w-full  items-center space-x-4">
-                <div className="relative h-8 w-8 shrink-0 md:h-12 md:w-12">
-                    <Img
-                        wrapperClassName="aspect-square"
-                        className="h-full w-full rounded-full object-cover"
-                        src={collection.image}
-                        isCircle
-                    />
-
-                    <div className="absolute left-5 top-5 block h-4 w-4 rounded-full ring-4 ring-white dark:ring-theme-dark-900 md:left-8 md:top-8">
-                        <NetworkIcon networkId={collection.chainId} />
-                    </div>
-                </div>
+                <CollectionImageWithIcon
+                    image={collection.image}
+                    chainId={collection.chainId}
+                    className="relative h-8 w-8 shrink-0 md:h-12 md:w-12"
+                    wrapperClassName="aspect-square"
+                />
 
                 <div className="break-word-legacy min-w-0 space-y-0.5 md:lg:space-y-0">
                     <Tooltip

resources/js/Components/GridHeader.test.tsx

@@ -39,4 +39,16 @@ describe("GridHeader", () => {
         expect(screen.getByTestId("GridHeader__title")).toHaveTextContent("Test Grid");
         expect(screen.getByTestId("GridHeader__value")).toHaveTextContent("Missing Value");
     });
+
+    it("should handle custom class name for wrapper", () => {
+        render(
+            <GridHeader
+                title="Test Grid"
+                value="Test Value"
+                wrapperClassName="test-wrapper"
+            />,
+        );
+
+        expect(screen.getByTestId("GridHeader__wrapper")).toHaveClass("test-wrapper");
+    });
 });

resources/js/Components/GridHeader.tsx

@@ -5,13 +5,15 @@ interface GridHeaderProperties {
     title: string;
     value: string | number | JSX.Element | null;
     className?: string;
+    wrapperClassName?: string;
     emptyValue?: string | null;
 }
 
 export const GridHeader = ({
     title,
     value,
     className,
+    wrapperClassName,
     emptyValue = null,
     ...properties
 }: GridHeaderProperties): JSX.Element => {
@@ -29,7 +31,13 @@ export const GridHeader = ({
             )}
             {...properties}
         >
-            <div className="mr-auto flex w-[100px] flex-col space-y-0.5 font-medium md:w-[110px] lg:w-auto">
+            <div
+                className={cn(
+                    "mr-auto flex w-[100px] flex-col space-y-0.5 font-medium md:w-[110px] lg:w-auto",
+                    wrapperClassName,
+                )}
+                data-testid="GridHeader__wrapper"
+            >
                 <span
                     data-testid="GridHeader__title"
                     className="text-sm leading-4.5 text-theme-secondary-500 dark:text-theme-dark-300 md:leading-5.5"

resources/js/Pages/Collections/Components/CollectionImage/CollectionImageWithIcon.tsx

@@ -0,0 +1,36 @@
+import cn from "classnames";
+import React from "react";
+import { Img } from "@/Components/Image";
+import { NetworkIcon } from "@/Components/Networks/NetworkIcon";
+
+export const CollectionImageWithIcon = ({
+    image,
+    chainId,
+    className,
+    wrapperClassName,
+    networkClassName,
+}: {
+    image: string | null;
+    chainId: App.Enums.Chain;
+    className?: string;
+    wrapperClassName?: string;
+    networkClassName?: string;
+}): JSX.Element => (
+    <div className={className}>
+        <Img
+            wrapperClassName={wrapperClassName}
+            className="h-full w-full rounded-full object-cover"
+            src={image}
+            isCircle
+        />
+
+        <div
+            className={cn(
+                "absolute left-5 top-5 block h-4 w-4 rounded-full ring-4 ring-white dark:ring-theme-dark-900 md:left-8 md:top-8",
+                networkClassName,
+            )}
+        >
+            <NetworkIcon networkId={chainId} />
+        </div>
+    </div>
+);

resources/js/Pages/Collections/Components/CollectionImage/index.tsx

@@ -0,0 +1 @@
+export * from "./CollectionImageWithIcon";

resources/js/Pages/Collections/Components/CollectionNft/CollectionNft.tsx

@@ -7,7 +7,13 @@ import { Tooltip } from "@/Components/Tooltip";
 import { useIsTruncated } from "@/Hooks/useIsTruncated";
 import { isTruthy } from "@/Utils/is-truthy";
 
-export const CollectionNft = ({ nft }: { nft: App.Data.Gallery.GalleryNftData }): JSX.Element => {
+export const CollectionNft = ({
+    nft,
+    classNames,
+}: {
+    nft: App.Data.Gallery.GalleryNftData;
+    classNames?: string;
+}): JSX.Element => {
     const { t } = useTranslation();
 
     const nftTokenNumberReference = useRef<HTMLDivElement>(null);
@@ -22,7 +28,10 @@ export const CollectionNft = ({ nft }: { nft: App.Data.Gallery.GalleryNftData })
                 collection: nft.collectionSlug,
                 nft: nft.tokenNumber,
             })}
-            className="transition-default group cursor-pointer rounded-xl border border-theme-secondary-300 p-2 ring-theme-primary-100 hover:ring-2 dark:border-theme-dark-700 dark:ring-theme-dark-700"
+            className={cn(
+                "transition-default group cursor-pointer rounded-xl border border-theme-secondary-300 p-2 ring-theme-primary-100 hover:ring-2 dark:border-theme-dark-700 dark:ring-theme-dark-700",
+                classNames,
+            )}
         >
             <span className="relative block">
                 <Img