Skip to content

Commit ca581d5

Browse files
Cordtusgoosecordt-sei
authored
Rework eco + card components, sidebar 'For Users', add/mod user guides (#52)
* modified: pages/_meta.json new file: pages/getting-tokens.mdx deleted: pages/getting-tokens/_meta.json deleted: pages/getting-tokens/faucets.mdx new file: pages/user-quickstart.mdx new file: yarn.lock * modified: .gitignore modified: pages/_meta.json modified: pages/index.mdx modified: pages/interacting-with-sei/_meta.json renamed: pages/block-explorers.mdx -> pages/interacting-with-sei/block-explorers.mdx renamed: pages/getting-tokens.mdx -> pages/interacting-with-sei/getting-tokens.mdx renamed: pages/setting-up-a-wallet.mdx -> pages/interacting-with-sei/setting-up-a-wallet.mdx * modified: theme.config.tsx * modified: theme.config.tsx * restructure For Users section - add FAQ page - add User Guides folder - move pages to User Guides folder * add FAQ, add linking addresses page, add images * add to FAQ, refactor User quickstart * modified: .gitignore modified: pages/user-guides/block-explorers.mdx * modified: .gitignore modified: package.json modified: pages/user-guides/block-explorers.mdx * modified: components/Card/Card.tsx modified: components/EcosystemApps/EcosystemApps.tsx new file: data/appData.ts modified: pages/user-guides/block-explorers.mdx modified: tailwind.config.js * Update Card.tsx * Adding Compass wallet to ecosystem Resolves potential conflicts from https://github.com/sei-protocol/sei-docs/pull/51/files * Update .gitignore * Update appData.ts add would-be conflicting / deleted additions from https://github.com/sei-protocol/sei-docs/pull/51/files * modified: data/appData.ts * Update Card.tsx remove filename comment * Update EcosystemApps.tsx added comment for filter method * Update appData.ts add/remove comments * Update package.json * Update package.json removed 'auto-build' * Update block-explorers.mdx change 'warning' to 'info' callout * Update user-quickstart.mdx Remove page-breaking abandoned block * Remove unused elements - tailwind.config.js Removed unused theme elements * Add missing ecosystem images nfts2me silo stafi superseiyanbot * Delete public/assets/ecosystem/superseiyanbot.jpeg replacing with proper dimensions * replace superseiyanbot image proper square dimensions * Update appData.ts fixed pathing for last 3 images * Update user-guides _meta.json Quick final update - re-order the user guide pages * add compass logo * modified: .gitignore * modified: .gitignore * modified: components/Card/Card.tsx modified: components/EcosystemApps/EcosystemApps.tsx modified: pages/user-guides/block-explorers.mdx modified: pages/user-guides/getting-tokens.mdx --------- Co-authored-by: goose <angus@seifdn.org> Co-authored-by: cordt-sei <165932662+cordt-sei@users.noreply.github.com>
1 parent f0ace97 commit ca581d5

27 files changed

+587
-304
lines changed

‎.gitignore

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
.next
22
node_modules
33
.idea/*
4-
.DS_Store
4+
.DS_Store
5+
.vscode

‎.vscode/settings.json

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
{
2+
"files.associations": {
3+
"*.mdx": "markdown",
4+
"*.md": "markdown"
5+
},
6+
"markdown.mdxParser": "gatsby",
7+
"markdown.preview.mdxExtensions": true,
8+
"markdown.preview.mdxOptions": {
9+
"remarkPlugins": [
10+
"remark-slug",
11+
"remark-autolink-headings"
12+
],
13+
"rehypePlugins": [
14+
"rehype-slug",
15+
"rehype-autolink-headings"
16+
]
17+
},
18+
"emmet.includeLanguages": {
19+
"mdx": "javascriptreact"
20+
},
21+
"emmet.syntaxProfiles": {
22+
"mdx": "jsx"
23+
},
24+
"emmet.triggerExpansionOnTab": true,
25+
"emmet.showSuggestionsAsSnippets": true,
26+
"emmet.showExpandedAbbreviation": "always",
27+
"emmet.optimizeStylesheetParsing": true,
28+
"emmet.preferences": {
29+
"jsx.singleQuote": true
30+
},
31+
"eslint.validate": [
32+
"javascript",
33+
"javascriptreact",
34+
"typescript",
35+
"typescriptreact",
36+
"mdx"
37+
],
38+
"eslint.options": {
39+
"extensions": [".js", ".jsx", ".ts", ".tsx", ".mdx"]
40+
},
41+
"eslint.workingDirectories": [
42+
"./src",
43+
"./pages"
44+
],
45+
"prettier.requireConfig": true,
46+
"editor.formatOnSave": true,
47+
"editor.defaultFormatter": "esbenp.prettier-vscode",
48+
"editor.codeActionsOnSave": {
49+
"source.fixAll.eslint": "never"
50+
},
51+
"nextjs-intellisense.includePaths": [
52+
"./src",
53+
"./pages"
54+
]
55+
}

‎components/Card/Card.tsx

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import Image, { StaticImageData } from "next/image";
2-
32
interface CardProps {
43
image: StaticImageData;
54
title: string;
@@ -17,10 +16,10 @@ function Card({ image, title, description, href }: CardProps) {
1716
className="flex flex-col border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden hover:opacity-80"
1817
href={href}
1918
target="_blank"
20-
rel="noopener"
19+
rel="noopener noreferrer"
2120
>
22-
<div>
23-
<Image src={image} alt={title} />
21+
<div className="relative w-full h-80"> {/* Adjust height as needed to match your design */}
22+
<Image src={image} alt={title} width={700} height={475} priority />
2423
</div>
2524
<div className="flex-1 p-4 bg-gray-100 dark:bg-gray-800">
2625
<p className="text-lg font-semibold mb-2">{title}</p>

‎components/EcosystemApps/EcosystemApps.tsx

+46-165
Original file line numberDiff line numberDiff line change
@@ -1,172 +1,53 @@
1-
import { StaticImageData } from "next/image";
2-
import { Card, Cards } from "../../components";
1+
import React, { useState, useMemo, useEffect } from 'react';
2+
import { Card, Cards } from '../../components/Card';
3+
import appData from '../../data/appData'; // Ensure this import is correct
34

4-
import camelLogo from "../../public/assets/ecosystem/camel.png";
5-
import gamblinoLogo from "../../public/assets/ecosystem/gamblino.jpeg";
6-
import dragonswapLogo from "../../public/assets/ecosystem/dragonswap.jpeg";
7-
import fluidLogo from "../../public/assets/ecosystem/fluid.png";
8-
import belugasLogo from "../../public/assets/ecosystem/belugas.png";
9-
import squaredLabsLogo from "../../public/assets/ecosystem/squared-labs.jpeg";
10-
import seijinLogo from "../../public/assets/ecosystem/seijin.png";
11-
import predxLogo from "../../public/assets/ecosystem/predx.jpeg";
12-
import yakaLogo from "../../public/assets/ecosystem/yaka.jpeg";
13-
import webumpLogo from "../../public/assets/ecosystem/webump.jpeg";
14-
import accumulatedLogo from "../../public/assets/ecosystem/accumulated.jpeg";
15-
import mambaLogo from "../../public/assets/ecosystem/mamba.png";
16-
import jellyverseLogo from "../../public/assets/ecosystem/jellyverse.png";
17-
import seicasinoLogo from "../../public/assets/ecosystem/seicasino.png";
18-
import hoyuLogo from "../../public/assets/ecosystem/hoyu.jpeg";
19-
import superSeiyanBotLogo from "../../public/assets/ecosystem/superseiyanbot.jpeg";
20-
import nfts2meLogo from "../../public/assets/ecosystem/nfts2me.png";
21-
import stafiLogo from "../../public/assets/ecosystem/stafi.png";
22-
import siloLogo from "../../public/assets/ecosystem/silo.jpeg";
23-
import vermillionLogo from "../../public/assets/ecosystem/vermillion.jpeg";
24-
25-
interface App {
26-
title: string;
27-
description: string;
28-
href: string;
29-
image: StaticImageData;
30-
}
5+
const EcosystemApps = () => {
6+
const [searchTerm, setSearchTerm] = useState('');
7+
const [allTags, setAllTags] = useState([]);
318

32-
const APPS: App[] = [
33-
{
34-
title: "DragonSwap",
35-
description: "The native DEX on SEI",
36-
href: "https://test.dragonswap.app/",
37-
image: dragonswapLogo,
38-
},
39-
{
40-
title: "SeiCasino",
41-
description: "Full-featured casino built natively on Sei",
42-
href: "https://seicasino.io",
43-
image: seicasinoLogo,
44-
},
45-
{
46-
title: "WeBump",
47-
description: "Sei native NFT launchpad",
48-
href: "https://webump.xyz/",
49-
image: webumpLogo,
50-
},
51-
{
52-
title: "Seijin",
53-
description: "Launchpad on Sei",
54-
href: "https://seijin.app/staking",
55-
image: seijinLogo,
56-
},
57-
{
58-
title: "Squared Labs",
59-
description: "Quadratic price exposure on perpetual futures",
60-
href: "https://squaredlabs.io/app/btc",
61-
image: squaredLabsLogo,
62-
},
63-
{
64-
title: "PredX",
65-
description: "Prediction market",
66-
href: "https://events.predx.ai/",
67-
image: predxLogo,
68-
},
69-
{
70-
title: "Gamblino",
71-
description:
72-
"GambleFi protocol covering crypto, sportsbook and classic games of chance",
73-
href: "https://test.gamblino.app/",
74-
image: gamblinoLogo,
75-
},
76-
{
77-
title: "Silo",
78-
description: "Liquid staking and MEV on Sei",
79-
href: "https://silo-evm.dc37hw5o72ljt.amplifyapp.com/",
80-
image: siloLogo,
81-
},
82-
{
83-
title: "Camel",
84-
description: "Sei's liquidity oasis",
85-
href: "https://camel.money",
86-
image: camelLogo,
87-
},
88-
{
89-
title: "Fluid",
90-
description: "Interest free loans, backed by Sei",
91-
href: "https://fluidex.metabest.tech/",
92-
image: fluidLogo,
93-
},
94-
{
95-
title: "Belugas",
96-
description: "Decentralized marketplace for lenders and borrowers",
97-
href: "https://www.belugas.io/",
98-
image: belugasLogo,
99-
},
100-
{
101-
title: "Yaka",
102-
description: "Algebra Integral fork on Sei",
103-
href: "https://test.yaka.finance/",
104-
image: yakaLogo,
105-
},
106-
{
107-
title: "Accumulated",
108-
description: "Liquid staking protocol",
109-
href: "https://testnet.accumulated.finance/stake/sei",
110-
image: accumulatedLogo,
111-
},
112-
{
113-
title: "Mamba Defi",
114-
description: "Defi and memecoin ecosystem",
115-
href: "https://www.mambaswap.io/",
116-
image: mambaLogo,
117-
},
118-
{
119-
title: "JellyVerse",
120-
description: "Smart order router",
121-
href: "https://jelly-verse-sei.vercel.app/jellyswap",
122-
image: jellyverseLogo,
123-
},
124-
{
125-
title: "Hoyu",
126-
description:
127-
"DeFi protocol uniting lending and trading markets to give every token new utility as safe collateral",
128-
href: "https://arctic.hoyu.io",
129-
image: hoyuLogo,
130-
},
131-
{
132-
title: "Super Seiyan Bot",
133-
description: "Sei native telegram trading bot",
134-
href: "https://t.me/SSeiyanEvmBot",
135-
image: superSeiyanBotLogo,
136-
},
137-
{
138-
title: "NFTs2ME",
139-
description: "No-code NFT creation tool",
140-
href: "https://nfts2me.com/app/sei-devnet/",
141-
image: nfts2meLogo,
142-
},
143-
{
144-
title: "Stafi",
145-
description: "LST protocol",
146-
href: "https://test-app.stafi.io/gallery/evm/SEI/?net=SEI",
147-
image: stafiLogo,
148-
},
149-
{
150-
title: "Vermillion",
151-
description: "Next-gen AMM and stablecoin",
152-
href: "https://app.vermillion.finance/swap",
153-
image: vermillionLogo,
154-
},
155-
];
9+
// Extract unique tags from appData
10+
useEffect(() => {
11+
const tags = new Set();
12+
appData.forEach(app => app.tags.forEach(tag => tags.add(tag)));
13+
setAllTags(Array.from(tags));
14+
}, []);
15+
// Filter by "title" and "tag" fields from appData.ts // Filter by "title" and "tag" fields from appData.ts
16+
const filteredApps = useMemo(() => (
17+
appData.filter(app =>
18+
app.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
19+
app.tags.some(tag => tag.toLowerCase().includes(searchTerm.toLowerCase()))
20+
)
21+
), [searchTerm]);
15622

157-
const EcosystemApps = () => {
15823
return (
159-
<Cards>
160-
{APPS.map((app) => (
161-
<Card
162-
key={app.title}
163-
title={app.title}
164-
description={app.description}
165-
href={app.href}
166-
image={app.image}
167-
/>
168-
))}
169-
</Cards>
24+
<div>
25+
<input
26+
type="text"
27+
placeholder="Search apps by name or tag..."
28+
value={searchTerm}
29+
onChange={(e) => setSearchTerm(e.target.value)}
30+
className="w-full p-2 text-sm border rounded shadow-sm placeholder-gray-400"
31+
/>
32+
<div className="mt-2 mb-4 text-sm text-gray-600">
33+
<strong>Filter by Tags:</strong> {allTags.join(', ')}
34+
</div>
35+
<Cards>
36+
{filteredApps.length > 0 ? (
37+
filteredApps.map((app) => (
38+
<Card
39+
key={app.title}
40+
title={app.title}
41+
description={app.description}
42+
href={app.href}
43+
image={app.image}
44+
/>
45+
))
46+
) : (
47+
<div className="text-center text-gray-500">No apps found.</div>
48+
)}
49+
</Cards>
50+
</div>
17051
);
17152
};
17253

0 commit comments

Comments
 (0)