fix: add Spending on ecosystem

Author: Holybasil

src/app/ecosystem/Protocols/Category.tsx

@@ -3,8 +3,6 @@ import { makeStyles } from "tss-react/mui"
 
 import { MenuItem, MenuList, Typography } from "@mui/material"
 
-import { DIVERGENT_CATEGORY_MAP } from "@/constants"
-
 const useStyles = makeStyles<any>()((theme, { top }) => ({
   menuListRoot: {
     [theme.breakpoints.up("md")]: {
@@ -63,9 +61,9 @@ const useStyles = makeStyles<any>()((theme, { top }) => ({
 }))
 
 const Category = props => {
-  const { top, value, onChange } = props
+  const { top, value, options, onChange } = props
   const { classes, cx } = useStyles({ top })
-  const allCategories = useRef(["All categories", ...Object.keys(DIVERGENT_CATEGORY_MAP)])
+  const allCategories = useRef(["All categories", ...Object.keys(options)])
 
   return (
     <MenuList classes={{ root: cx(classes.menuListRoot, "ecosystem-protocols-category") }}>

src/app/ecosystem/Protocols/index.tsx

@@ -34,7 +34,8 @@ const Grid = withStyles(Box, theme => ({
   },
 }))
 
-const Protocols = () => {
+const Protocols = props => {
+  const { categories } = props
   const trigger = useScrollTrigger()
   const { isLandscape } = useCheckViewport()
   const [searchInput, setSearchInput] = useState("")
@@ -110,7 +111,7 @@ const Protocols = () => {
         </Typography>
       </Stack>
       <Grid id={`${ECOSYSTEM_PAGE_SYMBOL}-protocols`}>
-        <Category top={stickyTop} value={searchParams.category} onChange={handleChangeCategory}></Category>
+        <Category top={stickyTop} value={searchParams.category} options={categories} onChange={handleChangeCategory}></Category>
         <SearchInput top={stickyTop} sticky={isSticky} value={searchInput} onChange={handleChangeKeyword}></SearchInput>
         <NetworkSelect top={stickyTop} sticky={isSticky} value={searchParams.network} onChange={handleChangeNetwork}></NetworkSelect>
         <ProtocolList searchParams={searchParams} onAddPage={handleChangePage}></ProtocolList>

src/app/ecosystem/page.tsx

@@ -13,15 +13,18 @@ export const generateMetadata = genMeta(() => ({
   relativeURL: "/ecosystem",
 }))
 
-const Ecosystem = () => {
+const Ecosystem = async () => {
   if (isSepolia) {
     notFound()
   }
+
+  const categoryToTags = await fetch("https://scroll-eco-list.netlify.app/docs/category-to-tags.json").then(res => res.json())
+
   return (
     <>
       <Header></Header>
       <Highlights />
-      <Protocols></Protocols>
+      <Protocols categories={categoryToTags}></Protocols>
       <Contribute></Contribute>
     </>
   )

src/constants/ecosystem.ts

@@ -5,20 +5,6 @@ import { GET_IN_TOUCH_URL, LEARN_BUILD_URL, REQUEST_A_DAPP_URL } from "@/constan
 
 export const ECOSYSTEM_PAGE_SYMBOL = "ecosystem"
 
-export const DIVERGENT_CATEGORY_MAP = {
-  Community: ["Community", "DAO", "Governance"],
-  DeFi: ["DEX", "DeFi", "Launchpad", "Lending", "Marketplace"],
-  Gaming: ["Gaming"],
-  Infra: ["Gateway", "Indexer", "Infrastructure", "Node Provider", "Oracle"],
-  NFT: ["NFT"],
-  Privacy: ["Privacy", "Identity"],
-  Social: ["Social"],
-  Tooling: ["Tooling"],
-  Wallet: ["Wallet", "Hardware Wallet"],
-  Bridge: ["Bridge"],
-  Payment: ["Payment"],
-}
-
 export const ECOSYSTEM_EXPLORER_LIST = [
   {
     icon: NoteIcon,