Update ecosystem apps

components/EcosystemApps/EcosystemApps.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useMemo, useEffect } from 'react';
-import { Card, Cards } from '../../components/Card';
+import { EcosystemCard, EcosystemCards } from '../EcosystemCard';
 import appData from '../../data/appData';  // Ensure this import is correct
 
 const EcosystemApps = () => {
@@ -32,10 +32,10 @@ const EcosystemApps = () => {
       <div className="mt-2 mb-4 text-sm text-gray-600">
         <strong>Filter by Tags:</strong> {allTags.join(', ')}
       </div>
-      <Cards>
+      <EcosystemCards>
         {filteredApps.length > 0 ? (
           filteredApps.map((app) => (
-            <Card
+            <EcosystemCard
               key={app.title}
               title={app.title}
               description={app.description}
@@ -46,7 +46,7 @@ const EcosystemApps = () => {
         ) : (
           <div className="text-center text-gray-500">No apps found.</div>
         )}
-      </Cards>
+      </EcosystemCards>
     </div>
   );
 };

components/Card/Card.tsx → components/EcosystemCard/EcosystemCard.tsx

@@ -1,24 +1,25 @@
 import Image, { StaticImageData } from "next/image";
-interface CardProps {
+
+interface EcosystemCardProps {
   image: StaticImageData;
   title: string;
   description: string;
   href: string;
 }
 
-interface CardsProps {
+interface EcosystemCardsProps {
   children: React.ReactNode;
 }
 
-function Card({ image, title, description, href }: CardProps) {
+function EcosystemCard({ image, title, description, href }: EcosystemCardProps) {
   return (
     <a
       className="flex flex-col border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden hover:opacity-80"
       href={href}
       target="_blank"
       rel="noopener noreferrer"
     >
-      <div className="relative w-full h-80"> {/* Adjust height as needed to match your design */}
+      <div className="relative w-full"> {/* Adjust height as needed to match your design */}
         <Image src={image} alt={title} width={700} height={475} priority />
       </div>
       <div className="flex-1 p-4 bg-gray-100 dark:bg-gray-800">
@@ -29,10 +30,10 @@ function Card({ image, title, description, href }: CardProps) {
   );
 }
 
-function Cards({ children }: CardsProps) {
+function EcosystemCards({ children }: EcosystemCardsProps) {
   return (
     <div className="grid grid-cols-2 lg:grid-cols-3 gap-4 my-4">{children}</div>
   );
 }
 
-export { Card, Cards };
+export { EcosystemCard, EcosystemCards };

components/EcosystemCard/index.ts

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

components/index.ts

@@ -1,5 +1,5 @@
-export * from "./Card";
 export * from "./EcosystemApps";
+export * from "./EcosystemCard";
 export * from "./EvmWalletConnect";
 export * from "./HelpCallout";
 export * from "./ImageWithCaption";

data/appData.ts

@@ -1,10 +1,7 @@
-import Image, { StaticImageData } from 'next/image';
+import { StaticImageData } from 'next/image';
 
-// Import logos
-import camelLogo from "../public/assets/ecosystem/camel.png";
 import gamblinoLogo from "../public/assets/ecosystem/gamblino.jpeg";
 import dragonswapLogo from "../public/assets/ecosystem/dragonswap.jpeg";
-import fluidLogo from "../public/assets/ecosystem/fluid.png";
 import belugasLogo from "../public/assets/ecosystem/belugas.png";
 import squaredLabsLogo from "../public/assets/ecosystem/squared-labs.jpeg";
 import seijinLogo from "../public/assets/ecosystem/seijin.png";
@@ -21,23 +18,26 @@ import nfts2meLogo from "../public/assets/ecosystem/nfts2me.png";
 import stafiLogo from "../public/assets/ecosystem/stafi.png";
 import siloLogo from "../public/assets/ecosystem/silo.jpeg";
 import vermillionLogo from "../public/assets/ecosystem/vermillion.jpeg";
-import compassLogo from "../public/assets/ecosystem/compass.png"
-// appData 'types' definition 
+import nukeemLogo from "../public/assets/ecosystem/nukeem.jpeg";
+import jaspervaultLogo from "../public/assets/ecosystem/jaspervault.jpeg";
+import monnaLogo from "../public/assets/ecosystem/monna.png";
+import kawaLogo from "../public/assets/ecosystem/kawa.jpeg";
+
 interface App {
     title: string;
     description: string;
     href: string;
     image: StaticImageData;
     tags: string[];
 }
-// export card data, with searchable "tags"
+
 export const appData: App[] = [
     {
-        title: "Compass",
-        description: "The native wallet app for SEI",
-        href: "https://compasswallet.io/",
-        image: compassLogo,
-        tags: ["Wallet", "Native"]
+        title: "DragonSwap",
+        description: "The native DEX on SEI",
+        href: "https://test.dragonswap.app/",
+        image: dragonswapLogo,
+        tags: ["DeFi", "Trading", "Swap"]
     },
     {
         title: "SeiCasino",
@@ -88,27 +88,13 @@ export const appData: App[] = [
         image: siloLogo,
         tags: ["Liquid Staking", "MEV"]
     },
-    {
-        title: "Camel",
-        description: "Sei's liquidity oasis",
-        href: "https://camel.money",
-        image: camelLogo,
-        tags: ["Liquidity", "DeFi"]
-    },
     {
         title: "Vermillion",
         description: "Next-gen AMM and stablecoin",
         href: "https://app.vermillion.finance/swap",
         image: vermillionLogo,
         tags: ["DEX", "DeFi", ]
     },
-    {
-        title: "Fluid",
-        description: "Interest free loans, backed by Sei",
-        href: "https://fluidex.metabest.tech/",
-        image: fluidLogo,
-        tags: ["Lending", "DeFi"]
-    },
     {
         title: "Belugas",
         description: "Decentralized Marketplace for lenders and borrowers",
@@ -172,6 +158,34 @@ export const appData: App[] = [
         image: stafiLogo,
         tags: ["DeFi", "Liquid Staking"]
     },
-];
+    {
+        title: "Nuk'Em Loans",
+        description: "DeFi marketplace",
+        href: "https://app.nukem.loans/",
+        image: nukeemLogo,
+        tags: ["DeFi", "Lending"]
+    },
+    {
+        title: "JasperVault",
+        description: "Fully decentralised options trading",
+        href: "https://alpha.jasper.finance/trade/sei",
+        image: jaspervaultLogo,
+        tags: ["DeFi", "Trading"]
+    },
+    {
+        title: "Monna",
+        description: "The standard for leveraged lending",
+        href: "https://app.monna.io/",
+        image: monnaLogo,
+        tags: ["DeFi", "Lending"]
+    },
+    {
+        title: "Kawa",
+        description: "Decentralised cross-chain lending",
+        href: "https://v2.beta.kawa.finance/lend",
+        image: kawaLogo,
+        tags: ["DeFi", "Lending"]
+    },
+]
 
 export default appData;