add particles to category cards

app/(pages)/explore/categories/page.tsx

@@ -5,6 +5,7 @@ import { MAX_CONTENT_WIDTH } from '../../../utils/constants'
 import { fetchTokenCategoryPages } from '../../../../contentful/tokenCategoryPage'
 import DataDisclaimer from '../../../components/explore/DataDisclaimer'
 import ExploreCategories from '../../../components/explore/ExploreCategories'
+import { fetchContentfulTokenPages } from '../../../../contentful/tokenPage'
 
 export const metadata: Metadata = {
   title: 'Explore Listed Token Categories on Mango Markets',
@@ -17,12 +18,19 @@ function ExploreCategoriesFallback() {
 }
 
 async function ExploreCategoriesPage() {
-  const categoryPages = await fetchTokenCategoryPages({
+  const categoryPagesPromise = fetchTokenCategoryPages({
     preview: draftMode().isEnabled,
   })
+  const tokensPromise = fetchContentfulTokenPages({
+    preview: draftMode().isEnabled,
+  })
+  const [categoryPages, tokens] = await Promise.all([
+    categoryPagesPromise,
+    tokensPromise,
+  ])
   return categoryPages && categoryPages?.length ? (
     <Suspense fallback={<ExploreCategoriesFallback />}>
-      <ExploreCategories categoryPages={categoryPages} />
+      <ExploreCategories categoryPages={categoryPages} tokens={tokens} />
       <div className={`px-6 lg:px-20 ${MAX_CONTENT_WIDTH} mx-auto pb-10`}>
         <DataDisclaimer />
       </div>

app/components/explore/CategoryTokenParticles.tsx

@@ -0,0 +1,98 @@
+import { useEffect, useState } from 'react'
+import Particles from 'react-tsparticles'
+
+const CategoryTokenParticles = ({
+  tokenSymbols,
+  id,
+}: {
+  tokenSymbols: string[]
+  id: string
+}) => {
+  const [mounted, setMounted] = useState(false)
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+  if (!mounted) return null
+  return (
+    <Particles
+      id={`tsparticles-${id}`}
+      options={{
+        fullScreen: false,
+        particles: {
+          move: {
+            angle: 10,
+            attract: {
+              rotate: {
+                x: 600,
+                y: 1200,
+              },
+            },
+            direction: 'bottom',
+            enable: true,
+            speed: 0.1,
+          },
+          opacity: {
+            value: 0,
+          },
+        },
+        emitters: [
+          {
+            autoPlay: true,
+            fill: true,
+            life: {
+              wait: false,
+              duration: 1,
+            },
+            rate: {
+              quantity: 1,
+              delay: { min: 6, max: 12 },
+            },
+            startCount: 0,
+            particles: {
+              shape: {
+                type: 'images',
+                options: {
+                  images: tokenSymbols.map((sym) => ({
+                    src: `/icons/tokens/${sym.toLowerCase()}.svg`,
+                    width: 48,
+                    height: 48,
+                  })),
+                },
+              },
+              rotate: {
+                value: 0,
+                random: true,
+                direction: 'clockwise',
+                animation: {
+                  enable: true,
+                  speed: 15,
+                  sync: false,
+                },
+              },
+              lineLinked: {
+                enable: false,
+              },
+              opacity: {
+                value: 0.4,
+              },
+              size: {
+                value: 16,
+                random: false,
+              },
+              move: {
+                speed: 1,
+                random: false,
+                outMode: 'destroy',
+              },
+            },
+            position: {
+              y: 0,
+            },
+          },
+        ],
+      }}
+    />
+  )
+}
+
+export default CategoryTokenParticles

app/components/explore/ExploreCategories.tsx

@@ -1,14 +1,17 @@
 'use client'
 
 import { MagnifyingGlassIcon } from '@heroicons/react/20/solid'
-import { ChangeEvent, useMemo, useState } from 'react'
+import { ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react'
 import Input from '../forms/Input'
 import { TokenCategoryPage } from '../../../contentful/tokenCategoryPage'
 import { MAX_CONTENT_WIDTH } from '../../utils/constants'
 import Link from 'next/link'
 import NoResults from './NoResults'
 import PageHeader from './PageHeader'
-import CardImage from '../shared/CardImage'
+import { TokenPage } from '../../../contentful/tokenPage'
+import CategoryTokenParticles from './CategoryTokenParticles'
+import { tsParticles } from 'tsparticles-engine'
+import { loadFull } from 'tsparticles'
 
 const generateSearchTerm = (item: TokenCategoryPage, searchValue: string) => {
   const normalizedSearchValue = searchValue.toLowerCase()
@@ -39,8 +42,10 @@ const startSearch = (items: TokenCategoryPage[], searchValue: string) => {
 
 const ExploreCategories = ({
   categoryPages,
+  tokens,
 }: {
   categoryPages: TokenCategoryPage[]
+  tokens: TokenPage[]
 }) => {
   const [searchString, setSearchString] = useState('')
 
@@ -54,6 +59,14 @@ const ExploreCategories = ({
     setSearchString(e.target.value)
   }
 
+  const particlesInit = useCallback(async () => {
+    await loadFull(tsParticles)
+  }, [])
+
+  useEffect(() => {
+    particlesInit()
+  }, [particlesInit])
+
   return (
     <>
       <PageHeader title="Explore listed token categories" />
@@ -76,19 +89,28 @@ const ExploreCategories = ({
           <div className="grid grid-cols-4 gap-6">
             {filteredCategories.map((cat) => {
               const { category, slug } = cat
+              const categoryTokenSymbols = tokens
+                ?.filter((token) => token.tags.includes(category))
+                .map((t) => t.symbol)
               return (
                 <div
                   className="col-span-4 sm:col-span-2 lg:col-span-1 border border-th-bkg-3 rounded-xl group relative"
                   key={slug}
                 >
                   <Link href={`/explore/categories/${slug}`}>
-                    <div className="overflow-hidden rounded-t-xl">
-                      <CardImage
-                        customImagePath={`/images/categories/${slug}-small.png`}
+                    <div className="overflow-hidden rounded-t-xl bg-[url('/images/categories/placeholder.png')] bg-cover bg-center">
+                      <CategoryTokenParticles
+                        tokenSymbols={categoryTokenSymbols}
+                        id={slug}
                       />
                     </div>
-                    <div className="px-4 py-3">
+                    <div className="px-4 py-3 flex items-center justify-between">
                       <p className="text-th-fgd-2 font-display">{category}</p>
+                      {categoryTokenSymbols?.length ? (
+                        <p className="text-th-fgd-4 text-sm">
+                          {categoryTokenSymbols.length}
+                        </p>
+                      ) : null}
                     </div>
                   </Link>
                 </div>

app/components/shared/CardImage.tsx

@@ -17,7 +17,7 @@ const CardImage = ({ customImagePath }: { customImagePath?: string }) => {
       ? '/images/new/cube-bg.png'
       : '/images/new/cube-bg-light.png'
 
-  if (!mounted) return <div className="h-[200px] lg:h-[140px] bg-th-bkg-2" />
+  if (!mounted) return <div className="h-[200px] lg:h-[180px] bg-th-bkg-2" />
   return (
     <div
       className={`h-[200px] lg:h-[180px] ${

package.json

@@ -50,8 +50,10 @@
     "react-flip-numbers": "^3.0.8",
     "react-i18next": "^13.5.0",
     "react-slick": "^0.30.1",
+    "react-tsparticles": "2.2.4",
     "recharts": "^2.10.0",
-    "slick-carousel": "^1.8.1"
+    "slick-carousel": "^1.8.1",
+    "tsparticles": "2.2.4"
   },
   "devDependencies": {
     "@testing-library/react": "^14.1.2",