From f514a17b79e33b73a3678239d4d575513e50ab0f Mon Sep 17 00:00:00 2001
From: partyparrotgreg <2233348+partyparrotgreg@users.noreply.github.com>
Date: Thu, 13 Jun 2024 16:34:43 +0100
Subject: [PATCH 01/12] app card and list
---
.prettierrc | 4 +
components/AppCard/AppCard.tsx | 50 +++
components/AppCard/AppCardsGrid.tsx | 49 +++
components/AppCard/index.ts | 2 +
components/EcosystemApps/EcosystemApps.tsx | 4 +-
components/index.ts | 6 +-
data/appData.ts | 374 +++++++++++----------
package.json | 2 +-
pages/dev-ecosystem-providers/indexers.mdx | 14 +-
pages/dev-smart-contracts.mdx | 11 +-
public/assets/indexers/flipside-logo.png | Bin 0 -> 36446 bytes
public/assets/indexers/subgraph-logo.png | Bin 0 -> 26984 bytes
public/assets/indexers/the-graph-logo.png | Bin 0 -> 5580 bytes
utils/index.ts | 6 +
yarn.lock | 6 +-
15 files changed, 331 insertions(+), 197 deletions(-)
create mode 100644 .prettierrc
create mode 100644 components/AppCard/AppCard.tsx
create mode 100644 components/AppCard/AppCardsGrid.tsx
create mode 100644 components/AppCard/index.ts
create mode 100644 public/assets/indexers/flipside-logo.png
create mode 100644 public/assets/indexers/subgraph-logo.png
create mode 100644 public/assets/indexers/the-graph-logo.png
create mode 100644 utils/index.ts
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 00000000..222861c3
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,4 @@
+{
+ "tabWidth": 2,
+ "useTabs": false
+}
diff --git a/components/AppCard/AppCard.tsx b/components/AppCard/AppCard.tsx
new file mode 100644
index 00000000..2b7480f1
--- /dev/null
+++ b/components/AppCard/AppCard.tsx
@@ -0,0 +1,50 @@
+import { ExternalLink } from "lucide-react";
+import Image from "next/image";
+import { App } from "../../data/appData";
+
+interface AppCardProps {
+ app: App;
+}
+const AppCard = ({ app }: AppCardProps) => {
+ if (!app) return null;
+ const { title, description, href, image } = app;
+ return (
+
+
+
+
+
+ {title}
+
+
{description}
+
+
+
+ );
+};
+
+export default AppCard;
diff --git a/components/AppCard/AppCardsGrid.tsx b/components/AppCard/AppCardsGrid.tsx
new file mode 100644
index 00000000..446f3022
--- /dev/null
+++ b/components/AppCard/AppCardsGrid.tsx
@@ -0,0 +1,49 @@
+import { Tag, appData } from "../../data/appData";
+import AppCard from "./AppCard";
+
+const tagsMap: { [key: string]: Tag[] } = {
+ betting: [Tag.BET, Tag.GAMES],
+ bots: [Tag.BOT, Tag.TRADE, Tag.DEFI],
+ bridge: [Tag.BRIDGE, Tag.DEFI],
+ defi: [Tag.DEFI, Tag.TRADE, Tag.DEX],
+ dex: [Tag.DEX, Tag.TRADE],
+ gaming: [Tag.GAMES, Tag.TRADE],
+ governance: [Tag.GOV, Tag.TRADE],
+ indexer: [Tag.INDEX],
+ launchpad: [Tag.LAUNCH, Tag.WS],
+ lending: [Tag.LEND, Tag.TRADE],
+ liquidity: [Tag.LIQ, Tag.TRADE],
+ "liquid-staking": [Tag.LST, Tag.TRADE],
+ marketplace: [Tag.MKT, Tag.TRADE],
+ mev: [Tag.MEV, Tag.TRADE],
+};
+
+type TagsType = keyof typeof tagsMap;
+const AppCardsGrid = ({ tags }: { tags?: TagsType[] }) => {
+ const filteredData = (() => {
+ if (!tags) return appData;
+ let tempTags: Tag[] = [];
+ tags.forEach((tag) => {
+ if (tagsMap[tag]) tempTags = [...tempTags, ...tagsMap[tag]];
+ else console.log(`${tag} is not a valid tag`);
+ });
+
+ // merge all tags and filter appData
+ console.log(tempTags);
+
+ return appData.filter((app) =>
+ tempTags.some((tag) => app.tags.includes(tag))
+ );
+ })();
+
+ // When no tags are passed, show all apps
+ return (
+
+ {filteredData.map((app, index) => (
+
+ ))}
+
+ );
+};
+
+export default AppCardsGrid;
diff --git a/components/AppCard/index.ts b/components/AppCard/index.ts
new file mode 100644
index 00000000..e1396954
--- /dev/null
+++ b/components/AppCard/index.ts
@@ -0,0 +1,2 @@
+export { default as AppCard } from './AppCard';
+export { default as AppCardsGrid } from './AppCardsGrid';
diff --git a/components/EcosystemApps/EcosystemApps.tsx b/components/EcosystemApps/EcosystemApps.tsx
index d867f15d..6c1fb10b 100644
--- a/components/EcosystemApps/EcosystemApps.tsx
+++ b/components/EcosystemApps/EcosystemApps.tsx
@@ -1,6 +1,6 @@
-import React, { useState, useMemo, useEffect } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import { appData, tagPrettyNames } from '../../data/appData';
import { EcosystemCard, EcosystemCards } from '../EcosystemCard';
-import appData, { Tag, tagPrettyNames } from '../../data/appData';
const EcosystemApps = () => {
const [searchTerm, setSearchTerm] = useState('');
diff --git a/components/index.ts b/components/index.ts
index 8ed226fa..c5e7f1b2 100644
--- a/components/index.ts
+++ b/components/index.ts
@@ -1,9 +1,11 @@
+export * from "./AppCard";
+export * from "./BrandKitGallery";
export * from "./EcosystemApps";
export * from "./EcosystemCard";
export * from "./EvmWalletConnect";
export * from "./HelpCallout";
-export * from "./BrandKitGallery";
export * from "./ImageWithCaption";
export * from "./Logo";
export * from "./Nfts";
-export * from "./VersionFetcher";
\ No newline at end of file
+export * from "./VersionFetcher";
+
diff --git a/data/appData.ts b/data/appData.ts
index 6843464a..e03e0541 100644
--- a/data/appData.ts
+++ b/data/appData.ts
@@ -1,29 +1,32 @@
import { StaticImageData } from 'next/image';
-import gamblinoLogo from "../public/assets/ecosystem/gamblino.jpeg";
-import dragonswapLogo from "../public/assets/ecosystem/dragonswap.jpeg";
-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";
-import predxLogo from "../public/assets/ecosystem/predx.jpeg";
-import yakaLogo from "../public/assets/ecosystem/yaka.jpeg";
-import webumpLogo from "../public/assets/ecosystem/webump.jpeg";
import accumulatedLogo from "../public/assets/ecosystem/accumulated.jpeg";
-import mambaLogo from "../public/assets/ecosystem/mamba.png";
+import belugasLogo from "../public/assets/ecosystem/belugas.png";
+import dragonswapLogo from "../public/assets/ecosystem/dragonswap.jpeg";
+import fidropLogo from "../public/assets/ecosystem/fidrop.jpeg";
+import gamblinoLogo from "../public/assets/ecosystem/gamblino.jpeg";
+import jaspervaultLogo from "../public/assets/ecosystem/jaspervault.jpeg";
import jellyverseLogo from "../public/assets/ecosystem/jellyverse.png";
-import seicasinoLogo from "../public/assets/ecosystem/seicasino.png";
-import superSeiyanBotLogo from "../public/assets/ecosystem/superseiyanbot.jpeg";
+import kawaLogo from "../public/assets/ecosystem/kawa.jpeg";
+import mambaLogo from "../public/assets/ecosystem/mamba.png";
+import monnaLogo from "../public/assets/ecosystem/monna.png";
import nfts2meLogo from "../public/assets/ecosystem/nfts2me.png";
-import stafiLogo from "../public/assets/ecosystem/stafi.png";
+import nukeemLogo from "../public/assets/ecosystem/nukeem.jpeg";
+import predxLogo from "../public/assets/ecosystem/predx.jpeg";
+import seicasinoLogo from "../public/assets/ecosystem/seicasino.png";
+import seijinLogo from "../public/assets/ecosystem/seijin.png";
import siloLogo from "../public/assets/ecosystem/silo.jpeg";
+import squaredLabsLogo from "../public/assets/ecosystem/squared-labs.jpeg";
+import stafiLogo from "../public/assets/ecosystem/stafi.png";
+import superSeiyanBotLogo from "../public/assets/ecosystem/superseiyanbot.jpeg";
import vermillionLogo from "../public/assets/ecosystem/vermillion.jpeg";
-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";
-import fidropLogo from "../public/assets/ecosystem/fidrop.jpeg";
+import webumpLogo from "../public/assets/ecosystem/webump.jpeg";
+import yakaLogo from "../public/assets/ecosystem/yaka.jpeg";
+import FlipsideLogo from "../public/assets/indexers/flipside-logo.png";
+import SubGraphLogo from "../public/assets/indexers/subgraph-logo.png";
+import TheGraphLogo from "../public/assets/indexers/the-graph-logo.png";
-interface App {
+export interface App {
title: string;
description: string;
href: string;
@@ -79,160 +82,185 @@ export const tagPrettyNames: { [key in Tag]: string[] } = {
};
export const appData: App[] = [
- {
- title: "DragonSwap",
- description: "The native DEX on SEI",
- href: "https://test.dragonswap.app/",
- image: dragonswapLogo,
- tags: [Tag.DEFI, Tag.TRADE, Tag.DEX]
- },
- {
- title: "SeiCasino",
- description: "Full-featured casino built natively on Sei",
- href: "https://seicasino.io",
- image: seicasinoLogo,
- tags: [Tag.BET, Tag.GAMES]
- },
- {
- title: "WeBump",
- description: "Sei native NFT launchpad",
- href: "https://webump.xyz/",
- image: webumpLogo,
- tags: [Tag.NFT, Tag.LAUNCH, Tag.WS]
- },
- {
- title: "Seijin",
- description: "Launchpad on Sei",
- href: "https://seijin.app/staking",
- image: seijinLogo,
- tags: [Tag.LAUNCH, Tag.STAKE]
- },
- {
- title: "Squared Labs",
- description: "Quadratic price exposure on perpetual futures",
- href: "https://squaredlabs.io/app/btc",
- image: squaredLabsLogo,
- tags: [Tag.DEFI, Tag.TRADE, Tag.DEX]
- },
- {
- title: "PredX",
- description: "Prediction Market",
- href: "https://events.predx.ai/",
- image: predxLogo,
- tags: [Tag.BET, Tag.MKT, Tag.GAMES]
- },
- {
- title: "Gamblino",
- description: "GambleFi protocol covering crypto, sportsbook and classic games of chance",
- href: "https://test.gamblino.app/",
- image: gamblinoLogo,
- tags: [Tag.BET, Tag.GAMES]
- },
- {
- title: "Silo",
- description: "Liquid staking and MEV on Sei",
- href: "https://silo-evm.dc37hw5o72ljt.amplifyapp.com/",
- image: siloLogo,
- tags: [Tag.LST, Tag.MEV]
- },
- {
- title: "Vermillion",
- description: "Next-gen AMM and stablecoin",
- href: "https://app.vermillion.finance/swap",
- image: vermillionLogo,
- tags: [Tag.DEX, Tag.DEFI]
- },
- {
- title: "Belugas",
- description: "Decentralized Marketplace for lenders and borrowers",
- href: "https://www.belugas.io/",
- image: belugasLogo,
- tags: [Tag.MKT, Tag.DEFI, Tag.LEND]
- },
- {
- title: "Yaka",
- description: "Algebra Integral fork on Sei",
- href: "https://test.yaka.finance/",
- image: yakaLogo,
- tags: [Tag.LAUNCH, Tag.WS, Tag.DEFI]
- },
- {
- title: "Accumulated",
- description: "Liquid staking protocol",
- href: "https://testnet.accumulated.finance/stake/sei",
- image: accumulatedLogo,
- tags: [Tag.LIQ, Tag.LST, Tag.DEFI]
- },
- {
- title: "Mamba Defi",
- description: "Defi and memecoin ecosystem",
- href: "https://www.mambaswap.io/",
- image: mambaLogo,
- tags: [Tag.DEFI, Tag.WS, Tag.MKT]
- },
- {
- title: "JellyVerse",
- description: "Smart order router",
- href: "https://jelly-verse-sei.vercel.app/jellyswap",
- image: jellyverseLogo,
- tags: [Tag.DEFI, Tag.TRADE, Tag.LIQ]
- },
- {
- title: "Super Seiyan Bot",
- description: "Sei native telegram trading bot",
- href: "https://t.me/SSeiyanEvmBot",
- image: superSeiyanBotLogo,
- tags: [Tag.TRADE, Tag.BOT, Tag.DEFI]
- },
- {
- title: "NFTs2ME",
- description: "No-code NFT creation tool",
- href: "https://nfts2me.com/app/sei-devnet/",
- image: nfts2meLogo,
- tags: [Tag.NFT, Tag.WS, Tag.LAUNCH]
- },
- {
- title: "Stafi",
- description: "LST protocol",
- href: "https://test-app.stafi.io/gallery/evm/SEI/?net=SEI",
- image: stafiLogo,
- tags: [Tag.DEFI, Tag.LST]
- },
- {
- title: "Nuk'Em Loans",
- description: "DeFi marketplace",
- href: "https://app.nukem.loans/",
- image: nukeemLogo,
- tags: [Tag.DEFI, Tag.LEND]
- },
- {
- title: "JasperVault",
- description: "Fully decentralised options trading",
- href: "https://alpha.jasper.finance/trade/sei",
- image: jaspervaultLogo,
- tags: [Tag.DEFI, Tag.TRADE]
- },
- {
- title: "Monna",
- description: "The standard for leveraged lending",
- href: "https://app.monna.io/",
- image: monnaLogo,
- tags: [Tag.DEFI, Tag.LEND]
- },
- {
- title: "Kawa",
- description: "Decentralised cross-chain lending",
- href: "https://v2.beta.kawa.finance/lend",
- image: kawaLogo,
- tags: [Tag.DEFI, Tag.LEND]
- },
- {
- title: "Fidrop",
- description: "Platform that powers token creation, claiming, drops, and mints",
- href: "https://fidrop.com/signin?callbackUrl=%2F",
- image: fidropLogo,
- tags: [Tag.NFT, Tag.LAUNCH]
- }
+ {
+ title: "DragonSwap",
+ description: "The native DEX on SEI",
+ href: "https://test.dragonswap.app/",
+ image: dragonswapLogo,
+ tags: [Tag.DEFI, Tag.TRADE, Tag.DEX],
+ },
+ {
+ title: "SeiCasino",
+ description: "Full-featured casino built natively on Sei",
+ href: "https://seicasino.io",
+ image: seicasinoLogo,
+ tags: [Tag.BET, Tag.GAMES],
+ },
+ {
+ title: "WeBump",
+ description: "Sei native NFT launchpad",
+ href: "https://webump.xyz/",
+ image: webumpLogo,
+ tags: [Tag.NFT, Tag.LAUNCH, Tag.WS],
+ },
+ {
+ title: "Seijin",
+ description: "Launchpad on Sei",
+ href: "https://seijin.app/staking",
+ image: seijinLogo,
+ tags: [Tag.LAUNCH, Tag.STAKE],
+ },
+ {
+ title: "Squared Labs",
+ description: "Quadratic price exposure on perpetual futures",
+ href: "https://squaredlabs.io/app/btc",
+ image: squaredLabsLogo,
+ tags: [Tag.DEFI, Tag.TRADE, Tag.DEX],
+ },
+ {
+ title: "PredX",
+ description: "Prediction Market",
+ href: "https://events.predx.ai/",
+ image: predxLogo,
+ tags: [Tag.BET, Tag.MKT, Tag.GAMES],
+ },
+ {
+ title: "Gamblino",
+ description:
+ "GambleFi protocol covering crypto, sportsbook and classic games of chance",
+ href: "https://test.gamblino.app/",
+ image: gamblinoLogo,
+ tags: [Tag.BET, Tag.GAMES],
+ },
+ {
+ title: "Silo",
+ description: "Liquid staking and MEV on Sei",
+ href: "https://silo-evm.dc37hw5o72ljt.amplifyapp.com/",
+ image: siloLogo,
+ tags: [Tag.LST, Tag.MEV],
+ },
+ {
+ title: "Vermillion",
+ description: "Next-gen AMM and stablecoin",
+ href: "https://app.vermillion.finance/swap",
+ image: vermillionLogo,
+ tags: [Tag.DEX, Tag.DEFI],
+ },
+ {
+ title: "Belugas",
+ description: "Decentralized Marketplace for lenders and borrowers",
+ href: "https://www.belugas.io/",
+ image: belugasLogo,
+ tags: [Tag.MKT, Tag.DEFI, Tag.LEND],
+ },
+ {
+ title: "Yaka",
+ description: "Algebra Integral fork on Sei",
+ href: "https://test.yaka.finance/",
+ image: yakaLogo,
+ tags: [Tag.LAUNCH, Tag.WS, Tag.DEFI],
+ },
+ {
+ title: "Accumulated",
+ description: "Liquid staking protocol",
+ href: "https://testnet.accumulated.finance/stake/sei",
+ image: accumulatedLogo,
+ tags: [Tag.LIQ, Tag.LST, Tag.DEFI],
+ },
+ {
+ title: "Mamba Defi",
+ description: "Defi and memecoin ecosystem",
+ href: "https://www.mambaswap.io/",
+ image: mambaLogo,
+ tags: [Tag.DEFI, Tag.WS, Tag.MKT],
+ },
+ {
+ title: "JellyVerse",
+ description: "Smart order router",
+ href: "https://jelly-verse-sei.vercel.app/jellyswap",
+ image: jellyverseLogo,
+ tags: [Tag.DEFI, Tag.TRADE, Tag.LIQ],
+ },
+ {
+ title: "Super Seiyan Bot",
+ description: "Sei native telegram trading bot",
+ href: "https://t.me/SSeiyanEvmBot",
+ image: superSeiyanBotLogo,
+ tags: [Tag.TRADE, Tag.BOT, Tag.DEFI],
+ },
+ {
+ title: "NFTs2ME",
+ description: "No-code NFT creation tool",
+ href: "https://nfts2me.com/app/sei-devnet/",
+ image: nfts2meLogo,
+ tags: [Tag.NFT, Tag.WS, Tag.LAUNCH],
+ },
+ {
+ title: "Stafi",
+ description: "LST protocol",
+ href: "https://test-app.stafi.io/gallery/evm/SEI/?net=SEI",
+ image: stafiLogo,
+ tags: [Tag.DEFI, Tag.LST],
+ },
+ {
+ title: "Nuk'Em Loans",
+ description: "DeFi marketplace",
+ href: "https://app.nukem.loans/",
+ image: nukeemLogo,
+ tags: [Tag.DEFI, Tag.LEND],
+ },
+ {
+ title: "JasperVault",
+ description: "Fully decentralised options trading",
+ href: "https://alpha.jasper.finance/trade/sei",
+ image: jaspervaultLogo,
+ tags: [Tag.DEFI, Tag.TRADE],
+ },
+ {
+ title: "Monna",
+ description: "The standard for leveraged lending",
+ href: "https://app.monna.io/",
+ image: monnaLogo,
+ tags: [Tag.DEFI, Tag.LEND],
+ },
+ {
+ title: "Kawa",
+ description: "Decentralised cross-chain lending",
+ href: "https://v2.beta.kawa.finance/lend",
+ image: kawaLogo,
+ tags: [Tag.DEFI, Tag.LEND],
+ },
+ {
+ title: "Fidrop",
+ description:
+ "Platform that powers token creation, claiming, drops, and mints",
+ href: "https://fidrop.com/signin?callbackUrl=%2F",
+ image: fidropLogo,
+ tags: [Tag.NFT, Tag.LAUNCH],
+ },
+ {
+ title: "Flipside",
+ description: "Provides detailed blockchain analytics and insights.",
+ href: "https://flipside.xyz/",
+ image: FlipsideLogo,
+ tags: [Tag.INDEX],
+ },
+ {
+ title: "The Graph (EVM only)",
+ description: "Allows for querying blockchain data using GraphQL.",
+ tags: [Tag.INDEX],
+ href: "https://thegraph.com/",
+ image: TheGraphLogo,
+ },
+ {
+ title: "SubGraph",
+ description:
+ "SubQuery is a fast, flexible, and reliable open-source data decentralised infrastructure network, providing both RPC and indexed data to consumers around the world.",
+ href: "https://academy.subquery.network/indexer/quickstart/quickstart_chains/cosmos-sei.html",
+ image: SubGraphLogo,
+ tags: [Tag.INDEX],
+ },
];
-export default appData;
+
+export default appData;
\ No newline at end of file
diff --git a/package.json b/package.json
index 227bbf13..74ecb440 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
"react-icons": "^5.2.1",
"sharp": "^0.33.4",
"styled-components": "^6.1.11",
- "tailwind-merge": "^2.2.1",
+ "tailwind-merge": "^2.3.0",
"viem": "^1.21.4",
"wagmi": "^1.4.13"
},
diff --git a/pages/dev-ecosystem-providers/indexers.mdx b/pages/dev-ecosystem-providers/indexers.mdx
index 76f2df6e..f6e2a650 100644
--- a/pages/dev-ecosystem-providers/indexers.mdx
+++ b/pages/dev-ecosystem-providers/indexers.mdx
@@ -1,15 +1,7 @@
+import {AppCard, AppCardsGrid } from "../../components";
+
# Indexers
Indexers collect and organize blockchain data, making it easier to query and analyze. Key indexers for Sei include:
-## **Flipside**:
-Provides detailed blockchain analytics and insights.
- - [Flipside](https://flipsidecrypto.xyz/)
-
-## **The Graph (EVM only)**:
-Allows for querying blockchain data using GraphQL.
- - [The Graph](https://thegraph.com/)
-
-## **SubQuery**:
-SubQuery is a fast, flexible, and reliable open-source data decentralised infrastructure network, providing both RPC and indexed data to consumers around the world.
- - [SubQuery Docs](https://academy.subquery.network/indexer/quickstart/quickstart_chains/cosmos-sei.html)
+