Revert "feat: update ecosystem page (#1334)"

This reverts commit e336f86.

.vscode/settings.json

@@ -24,6 +24,8 @@
   "[javascriptreact]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
+
+  // ESLint
   "editor.codeActionsOnSave": ["source.fixAll.eslint"],
   "eslint.packageManager": "yarn",
   "eslint.useESLintClass": true,

apps/bridge/src/components/Nav/DesktopNav.tsx

@@ -119,7 +119,7 @@ function IconLink({
 
 function DesktopNav({ color }: DesktopNavProps) {
   return (
-    <div className="hidden h-full w-fit flex-grow flex-row items-center justify-between lg:flex">
+    <div className="hidden h-full w-fit flex-grow flex-row items-center items-center justify-between lg:flex">
       <Dropdown label="Ecosystem" color={color}>
         <DropdownLink href="https://base.org/ecosystem" label="Apps" color={color} />
         <DropdownLink

apps/web/app/(base-org)/ecosystem/page.tsx

@@ -1,5 +1,4 @@
 import type { Metadata } from 'next';
-import { Suspense } from 'react';
 import Content from 'apps/web/src/components/Ecosystem/Content';
 import Container from 'apps/web/src/components/base-org/Container';
 import Button from 'apps/web/src/components/base-org/Button';
@@ -31,22 +30,20 @@ async function EcosystemHero() {
   return (
     <div className="flex w-full flex-col items-center overflow-hidden bg-black pb-20 pt-20">
       <Container>
-        <div className="flex w-full flex-col items-center justify-between gap-12 py-20 md:flex-row">
-          <div className="flex w-full flex-col gap-8 md:max-w-lg">
+        <div className="flex w-full  flex-col items-center justify-between gap-12 py-20 md:flex-row">
+          <div className="flex w-full w-full flex-col gap-8 md:max-w-lg">
             <Title level={TitleLevel.Display3}>
               Base ecosystem apps and integrations overview.
             </Title>
             <a
               href="https://github.com/base-org/web?tab=readme-ov-file#updating-the-base-ecosystem-page"
               target="_blank"
               rel="noreferrer noopener"
-              className="max-w-fit"
-              tabIndex={-1} // Prevents focus on anchor (want to focus on button)
             >
               <Button variant={ButtonVariants.Secondary}>Submit your app</Button>
             </a>
           </div>
-          <div className="flex flex-col">
+          <div className="flex flex-col ">
             <div className="flex flex-shrink-0 justify-center gap-4">
               {topKeys.map((key, i) => (
                 <div key={key} className="w-[80px] md:w-[100px]">
@@ -81,9 +78,7 @@ export default async function Ecosystem() {
       <EcosystemHero />
 
       <Container>
-        <Suspense fallback={<div />}>
-          <Content />
-        </Suspense>
+        <Content />
       </Container>
     </main>
   );

apps/web/src/components/Ecosystem/Card.tsx

@@ -8,22 +8,14 @@ type Props = {
   url: string;
   description: string;
   imageUrl: string;
-  category: string;
-  subcategory: string;
+  tags: string[];
 };
 
 function getNiceDomainDisplayFromUrl(url: string) {
   return url.replace('https://', '').replace('http://', '').replace('www.', '').split('/')[0];
 }
 
-export default function EcosystemCard({
-  name,
-  url,
-  description,
-  imageUrl,
-  category,
-  subcategory,
-}: Props) {
+export default function EcosystemCard({ name, url, description, imageUrl, tags }: Props) {
   return (
     <Card innerClassName="p-4 group/ecosystem-card">
       <a
@@ -51,17 +43,10 @@ export default function EcosystemCard({
               />
             </div>
           </div>
-          <div className="flex flex-col items-end gap-y-2.5">
-            <div className="flex h-6 flex-col justify-center rounded-[100px] bg-black px-2 py-1">
-              <span className="rounded-full border border-white px-2 py-1 font-mono text-xs uppercase text-white">
-                {category}
-              </span>
-            </div>
-            <div className="flex h-6 flex-col justify-center rounded-[100px] bg-black px-2 py-1">
-              <span className="rounded-full border border-gray-muted px-2 py-1 font-mono text-[10px] uppercase text-gray-muted">
-                {subcategory}
-              </span>
-            </div>
+          <div className="flex h-6 flex-col justify-center rounded-[100px] bg-black px-2 py-1">
+            <span className="rounded-full border border-white px-2 py-1 font-mono text-xs uppercase text-white">
+              {tags[0]}
+            </span>
           </div>
         </div>
         <div className="flex flex-col gap-4">

apps/web/src/components/Ecosystem/Content.tsx

@@ -1,60 +1,29 @@
 'use client';
 
 import ecosystemApps from 'apps/web/src/data/ecosystem.json';
+import { TagChip } from 'apps/web/src/components/Ecosystem/TagChip';
 import { SearchBar } from 'apps/web/src/components/Ecosystem/SearchBar';
-import { useMemo, useState, useEffect } from 'react';
+import { useMemo, useState } from 'react';
 import { List } from 'apps/web/src/components/Ecosystem/List';
-import { useSearchParams } from 'next/navigation';
-import { EcosystemFilters } from 'apps/web/src/components/Ecosystem/EcosystemFilters';
-import EcosystemFiltersMobile from 'apps/web/src/components/Ecosystem/EcosystemFiltersMobile';
 
 export type EcosystemApp = {
   searchName: string;
   name: string;
-  category: string;
-  subcategory: string;
   url: string;
   description: string;
+  tags: string[];
   imageUrl: string;
 };
 
-const config: Record<string, string[]> = {
-  wallet: ['account abstraction', 'multisig', 'self-custody'],
-  defi: [
-    'dex',
-    'dex aggregator',
-    'insurance',
-    'lending/borrowing',
-    'liquidity management',
-    'portfolio',
-    'stablecoin',
-    'yield vault',
-  ],
-  consumer: [
-    'creator',
-    'crypto taxes',
-    'dao',
-    'gaming',
-    'messaging',
-    'music',
-    'nft',
-    'payments',
-    'real world',
-    'social',
-  ],
-  onramp: ['centralized exchange', 'fiat on-ramp'],
-  infra: [
-    'ai',
-    'bridge',
-    'data',
-    'depin',
-    'developer tool',
-    'identity',
-    'node provider',
-    'raas',
-    'security',
-  ],
-};
+const tags = [
+  'all',
+  ...ecosystemApps
+    .map((app) => app.tags)
+    .flat()
+    .filter((value, index, array) => {
+      return array.indexOf(value.toLocaleLowerCase()) === index;
+    }),
+];
 
 function orderedEcosystemAppsAsc() {
   return ecosystemApps.sort((a, b) => {
@@ -73,90 +42,51 @@ const decoratedEcosystemApps: EcosystemApp[] = orderedEcosystemAppsAsc().map((d)
   searchName: d.name.toLowerCase(),
 }));
 
-const updateUrlParams = (params: { categories?: string[]; subcategories?: string[] }) => {
-  const searchParams = new URLSearchParams(window.location.search);
-
-  if (params.categories?.length) {
-    searchParams.set('category', params.categories.join(','));
-  } else {
-    searchParams.delete('category');
-  }
-
-  if (params.subcategories?.length) {
-    searchParams.set('subcategory', params.subcategories.join(','));
-  } else {
-    searchParams.delete('subcategory');
-  }
-
-  window.history.pushState(
-    {},
-    '',
-    `${window.location.pathname}${searchParams.toString() ? '?' + searchParams.toString() : ''}`,
-  );
-};
-
 export default function Content() {
-  const [search, setSearch] = useState('');
+  const [selectedTags, setSelectedTags] = useState<string[]>(['all']);
+  const [search, setSearch] = useState<string>('');
   const [showCount, setShowCount] = useState<number>(16);
-  const searchParams = useSearchParams();
-  const [selectedSubcategories, setSelectedSubcategories] = useState<string[]>(() => {
-    const subcategories = searchParams?.get('subcategory');
-    return subcategories ? subcategories.split(',') : [];
-  });
 
-  // If a subcategory is selected, the category is selected automatically
-  const selectedCategories = useMemo(
-    () => [
-      ...new Set(
-        selectedSubcategories.map(
-          (subcategory) =>
-            Object.keys(config).find((category) => config[category].includes(subcategory)) ?? 'all',
-        ),
-      ),
-    ],
-    [selectedSubcategories],
-  );
-
-  const filteredEcosystemApps = useMemo(
-    () =>
-      decoratedEcosystemApps.filter((app) => {
-        const isSubcategoryMatched =
-          selectedSubcategories.length === 0 || selectedSubcategories.includes(app.subcategory);
-        const isSearched = search === '' || app.searchName.includes(search.toLowerCase());
-        return isSubcategoryMatched && isSearched;
-      }),
-    [selectedSubcategories, search],
-  );
-
-  useEffect(() => {
-    updateUrlParams({
-      categories: selectedCategories,
-      subcategories: selectedSubcategories,
+  const selectTag = (tag: string): void => {
+    setSelectedTags((prevTags) => {
+      if (tag === 'all') {
+        return ['all'];
+      }
+      const newTags = prevTags.includes(tag)
+        ? prevTags.filter((t) => t !== tag)
+        : [...prevTags.filter((t) => t !== 'all'), tag];
+      return newTags.length === 0 ? ['all'] : newTags;
     });
-  }, [selectedCategories, selectedSubcategories]);
+  };
+
+  const filteredEcosystemApps = useMemo(() => {
+    return decoratedEcosystemApps.filter((app) => {
+      const isTagged =
+        selectedTags.includes('all') || app.tags.some((tag) => selectedTags.includes(tag));
+      const isSearched = search === '' || app.name.toLowerCase().includes(search.toLowerCase());
+      return isTagged && isSearched;
+    });
+  }, [selectedTags, search]);
 
   return (
     <div className="flex min-h-32 w-full flex-col gap-10 pb-32">
       <div className="flex flex-col justify-between gap-8 lg:flex-row lg:gap-12">
-        <EcosystemFilters
-          config={config}
-          selectedCategories={selectedCategories}
-          selectedSubcategories={selectedSubcategories}
-          setSelectedSubcategories={setSelectedSubcategories}
-        />
-
-        <div className="order-first lg:order-last">
+        <div className="flex flex-row flex-wrap gap-3">
+          {tags.map((tag) => (
+            <TagChip
+              tag={tag}
+              isSelected={selectedTags.includes(tag)}
+              key={tag}
+              selectTag={selectTag}
+            />
+          ))}
+        </div>
+        <div className="order-first grow lg:order-last">
           <SearchBar search={search} setSearch={setSearch} />
         </div>
-
-        <EcosystemFiltersMobile
-          categories={config}
-          selectedSubcategories={selectedSubcategories}
-          onSubcategorySelect={setSelectedSubcategories}
-        />
       </div>
       <List
-        selectedCategories={selectedCategories}
+        selectedTags={selectedTags}
         searchText={search}
         apps={filteredEcosystemApps}
         showCount={showCount}