@sei-js/create-sei 1.0.1 → 2.0.1

package/dist/templates/next-template/next.config.mjs

@@ -5,12 +5,18 @@ const nextConfig = {
 		ignoreDuringBuilds: true,
 	},
 	images: {
-		remotePatterns: [
-			{
-				protocol: "https",
-				hostname: "cdn.sei.io",
-			},
-		],
+		// Images stay unoptimized so the generated app needs no native Sharp
+		// build. Keep the manifest's Sharp override: Next declares
+		// `^0.34.3 || ^0.35.4`, and the 0.34.x half is still inside
+		// GHSA-rgj7-g3m4-5g8c, so 0.35.4 is the advisory floor. Loosening that
+		// pin reintroduces a high finding even though this flag is off.
+		unoptimized: true,
+	},
+	webpack: (config) => {
+		// MetaMask SDK references React Native storage from a mobile-only code path.
+		// Exclude it from this browser application instead of installing React Native.
+		config.resolve.alias["@react-native-async-storage/async-storage"] = false;
+		return config;
 	},
 };
 

package/dist/templates/next-template/package.json

@@ -12,35 +12,44 @@
 		"format": "biome format --write .",
 		"format:check": "biome format .",
 		"check": "biome check .",
-		"check:fix": "biome check --write .",
-		"deploy": "vercel --prod"
+		"check:fix": "biome check --write ."
 	},
 	"dependencies": {
-		"@mantine/code-highlight": "^8.2.5",
-		"@mantine/core": "^8.2.5",
-		"@mantine/hooks": "^8.2.5",
-		"@mantine/notifications": "^8.2.5",
-		"@rainbow-me/rainbowkit": "^2.2.8",
-		"@sei-js/precompiles": "^2.1.2",
-		"@tabler/icons-react": "^3.34.1",
-		"@tailwindcss/postcss": "^4.1.12",
-		"@tanstack/react-query": "^5.85.3",
-		"ethers": "^6.15.0",
-		"next": "15.4.7",
-		"pino-pretty": "^13.1.1",
-		"postcss": "^8.4.45",
-		"react": "^19.1.1",
-		"react-dom": "^19.1.1",
-		"tailwindcss": "^4.1.12",
-		"viem": "^2.34.0",
-		"wagmi": "^2.16.4"
+		"@mantine/code-highlight": "8.2.5",
+		"@mantine/core": "8.2.5",
+		"@mantine/hooks": "8.2.5",
+		"@mantine/notifications": "8.2.5",
+		"@rainbow-me/rainbowkit": "2.2.8",
+		"@sei-js/precompiles": "3.0.0",
+		"@tabler/icons-react": "3.34.1",
+		"@tailwindcss/postcss": "4.3.3",
+		"@tanstack/react-query": "5.85.3",
+		"ethers": "6.17.0",
+		"next": "15.5.25",
+		"pino-pretty": "13.1.3",
+		"postcss": "8.5.26",
+		"react": "19.1.2",
+		"react-dom": "19.1.2",
+		"tailwindcss": "4.3.3",
+		"viem": "2.55.19",
+		"wagmi": "2.16.9"
 	},
 	"devDependencies": {
-		"@biomejs/biome": "^2.4.5",
-		"@types/node": "^24.3.0",
-		"@types/react": "^19.1.10",
-		"@types/react-dom": "^19.1.7",
-		"autoprefixer": "^10.4.21",
-		"typescript": "^5.9.2"
-	}
+		"@biomejs/biome": "2.5.8",
+		"@types/node": "24.3.0",
+		"@types/react": "19.1.10",
+		"@types/react-dom": "19.1.7",
+		"autoprefixer": "10.5.4",
+		"typescript": "5.9.2"
+	},
+	"overrides": {
+		"@metamask/sdk": "0.33.1",
+		"@metamask/sdk-communication-layer": "0.33.1",
+		"postcss": "8.5.26",
+		"sharp": "0.35.4",
+		"use-sync-external-store": "1.6.0",
+		"uuid": "11.1.1",
+		"ws": "8.21.3"
+	},
+	"packageManager": "bun@1.3.14"
 }

package/dist/templates/next-template/public/brand/sei-lockup-light.svg

@@ -0,0 +1,7 @@
+<svg width="312" height="120" viewBox="0 0 312 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M39.4746 94.8887C35.8709 91.6137 30.3678 91.6134 26.7643 94.8887L18.3619 102.526C18.106 102.759 18.099 103.159 18.3493 103.398C29.143 113.683 43.7664 120 59.8693 120C75.9748 120 90.6018 113.682 101.396 103.395C101.646 103.156 101.639 102.756 101.383 102.523L92.9835 94.8887C89.3799 91.6136 83.8768 91.6136 80.2732 94.8887L73.6955 100.868C65.8581 107.991 53.8895 107.991 46.0523 100.868L39.4746 94.8887ZM59.8693 0C28.5715 4.93622e-05 2.8597 23.8596 0.00351713 54.3445C-0.0468546 54.8821 0.585694 55.1949 0.986042 54.8326L3.17704 52.8494C11.017 45.7531 22.9623 45.7654 30.7877 52.8778L37.3871 58.8754C40.9907 62.1504 46.4938 62.1505 50.0974 58.8754L56.6617 52.9086C64.5066 45.7783 76.4884 45.7858 84.3241 52.9261L94.9485 62.608C95.6833 63.2776 95.7357 64.4158 95.066 65.1505L92.5401 67.9223L90.0142 70.6948C89.3447 71.4294 88.2063 71.4818 87.4717 70.8123L76.8472 61.1313C73.2443 57.8482 67.7348 57.8444 64.1277 61.1229L57.5634 67.0897C49.726 74.213 37.7575 74.2131 29.9202 67.0897L23.3217 61.0921C19.7236 57.822 14.2312 57.816 10.6264 61.0788L0.842874 69.9354C0.690765 70.0731 0.619382 70.2792 0.655057 70.4813C2.17243 79.0752 5.52196 87.0382 10.2881 93.9545C10.4927 94.2514 10.9118 94.2971 11.1787 94.0546L19.2983 86.6743C27.1356 79.551 39.1041 79.551 46.9415 86.6743L53.5191 92.6536C57.1227 95.9286 62.6259 95.9285 66.2295 92.6536L72.8071 86.6743C80.6444 79.5513 92.6122 79.5513 100.45 86.6743L108.564 94.0496C108.831 94.2921 109.25 94.2464 109.455 93.9494C116.106 84.2949 120 72.601 120 59.9996C120 46.9934 115.852 34.954 108.805 25.1259C108.706 24.9875 108.552 24.8976 108.382 24.8845C105.868 24.6902 103.291 25.4982 101.296 27.3114L94.7319 33.2782C86.8945 40.4014 74.926 40.4016 67.0887 33.2782L60.4902 27.2806C56.892 24.0104 51.3997 24.0045 47.7948 27.2672L37.0229 37.0183C36.2859 37.6853 35.1474 37.6285 34.4803 36.8916L31.9628 34.1107L29.4469 31.3307C28.7799 30.5937 28.8366 29.456 29.5735 28.7889L40.3455 19.0379C48.1854 11.9415 60.1308 11.9539 67.9562 19.0662L74.5555 25.0639C78.1591 28.3389 83.6623 28.3389 87.2658 25.0639L93.8302 19.0971C95.4217 17.6505 97.1836 16.4974 99.0465 15.6382C99.45 15.4521 99.5429 14.9098 99.2067 14.6193C88.6622 5.51073 74.9108 0 59.8693 0Z" fill="black"/>
+<path d="M180.224 1.35791C187.332 1.35791 193.417 2.59704 198.479 5.07406C203.649 7.55111 207.526 11.1587 210.111 15.8974C212.803 20.6361 214.149 26.4519 214.149 33.3446V35.2831H195.248V33.3446C195.248 29.8983 194.71 26.9368 193.633 24.4598C192.556 21.9827 190.887 20.0975 188.625 18.8051C186.471 17.4051 183.724 16.7051 180.386 16.7051H178.932C173.978 16.7051 170.155 18.1052 167.462 20.9052C164.878 23.5976 163.585 27.152 163.585 31.5676V32.3753C163.585 34.9601 164.07 37.3299 165.039 39.4839C166.009 41.6377 167.516 43.5763 169.563 45.2994C171.609 46.9148 174.193 48.2071 177.317 49.1764L192.179 54.0226C197.456 55.7458 201.818 58.0079 205.265 60.8081C208.711 63.6082 211.296 67.1082 213.019 71.3083C214.85 75.4008 215.765 80.1936 215.765 85.6862V86.4939C215.765 93.3866 214.365 99.2563 211.565 104.103C208.765 108.841 204.672 112.45 199.288 114.927C194.01 117.404 187.656 118.642 180.224 118.642H178.932C170.316 118.642 163.208 117.296 157.608 114.604C152.115 111.911 148.13 108.088 145.653 103.133C143.176 98.0716 141.938 91.9327 141.938 84.717V82.1323H161V84.717C161 88.7018 161.592 92.0408 162.777 94.7333C163.962 97.4257 165.901 99.5256 168.593 101.033C171.286 102.541 174.786 103.295 179.094 103.295H180.224C183.671 103.295 186.633 102.703 189.11 101.518C191.587 100.226 193.418 98.3949 194.602 96.0256C195.895 93.6562 196.541 90.8557 196.541 87.6247V86.817C196.541 84.0169 196.002 81.54 194.925 79.3861C193.956 77.2321 192.448 75.3469 190.402 73.7314C188.356 72.0084 185.825 70.6622 182.81 69.6929L168.27 65.0082C163.208 63.3927 158.9 61.1312 155.346 58.2234C151.792 55.2079 149.1 51.5996 147.269 47.3994C145.438 43.0915 144.522 38.1911 144.522 32.6984V31.8907C144.522 25.5365 145.869 20.0976 148.561 15.5743C151.362 10.9434 155.346 7.4434 160.516 5.07406C165.685 2.59702 171.824 1.35794 178.932 1.35791H180.224Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M255.618 33.9908C262.403 33.9908 268.004 35.2292 272.419 37.7062C276.943 40.1833 280.282 44.0607 282.436 49.3379C284.59 54.5074 285.666 61.2386 285.667 69.5314V77.286C285.667 78.4707 285.613 79.6554 285.505 80.84H241.079V82.1323C241.079 87.8403 241.563 92.4177 242.533 95.8641C243.502 99.3104 244.957 101.787 246.895 103.295C248.834 104.695 251.364 105.395 254.488 105.395H255.618C258.526 105.395 260.788 104.91 262.404 103.941C264.127 102.864 265.312 101.464 265.958 99.7411C266.712 97.9103 267.088 95.7025 267.089 93.1178V91.664H284.859V92.9563C284.859 98.0179 283.889 102.433 281.951 106.203C280.12 109.972 277.05 112.934 272.742 115.088C268.435 117.242 262.78 118.319 255.78 118.319H254.488C247.487 118.319 241.618 117.027 236.879 114.442C232.14 111.75 228.586 107.657 226.216 102.164C223.847 96.5639 222.662 89.4558 222.662 80.84V71.4699C222.662 62.8541 223.847 55.7998 226.216 50.3072C228.586 44.7068 232.086 40.6141 236.717 38.0293C241.456 35.3369 247.326 33.9908 254.326 33.9908H255.618ZM254.164 46.7533C249.857 46.7533 246.572 48.4226 244.31 51.7611C242.23 54.9858 241.154 60.3708 241.083 67.9159H267.735V65.8159C267.735 61.0772 267.25 57.3074 266.281 54.5073C265.312 51.7073 263.911 49.7149 262.081 48.5302C260.25 47.3455 257.988 46.7533 255.295 46.7533H254.164Z" fill="black"/>
+<path d="M311.615 117.35H293.522V34.96H311.615V117.35Z" fill="black"/>
+<path d="M311.615 22.6828H293.522V4.91252H311.615V22.6828Z" fill="black"/>
+</svg>

package/dist/templates/next-template/src/app/development/page.tsx

@@ -1,8 +1,8 @@
-'use client';
+"use client";
 
-import { Shell } from '@/components';
-import { Button, Card, Code, Container, Group, Paper, Stack, Text, ThemeIcon, Title } from '@mantine/core';
-import { IconCode, IconExternalLink } from '@tabler/icons-react';
+import { Button, Card, Code, Container, Group, Paper, Stack, Text, ThemeIcon, Title } from "@mantine/core";
+import { IconCode, IconExternalLink } from "@tabler/icons-react";
+import { Shell } from "@/components";
 
 export default function DevelopmentPage() {
 	return (
@@ -12,11 +12,11 @@ export default function DevelopmentPage() {
 					{/* Header */}
 					<div>
 						<Group gap="md" align="center" mb="lg">
-							<ThemeIcon size={48} radius="md" c="purple" variant="light">
+							<ThemeIcon size={48} radius="md" variant="outline" color="seiMaroon">
 								<IconCode size={24} />
 							</ThemeIcon>
 							<div>
-								<Title order={1} fw={700} c="gray.9">
+								<Title order={1} fw={700} c="seiMaroon.9" className="sei-heading">
 									Continue Development
 								</Title>
 								<Text size="lg" c="gray.6" mt={4}>
@@ -37,61 +37,61 @@ export default function DevelopmentPage() {
 								<Paper
 									p="md"
 									radius="md"
-									bg="blue.0"
+									bg="white"
 									withBorder
 									component="a"
 									href="https://wagmi.sh/react/getting-started"
 									target="_blank"
-									style={{ textDecoration: 'none', cursor: 'pointer' }}
+									style={{ textDecoration: "none", cursor: "pointer" }}
 								>
 									<Group gap="sm" justify="space-between">
 										<Group gap="sm">
-											<Text fw={600} c="blue.8">
+											<Text fw={600} c="seiMaroon.9">
 												Wagmi:
 											</Text>
 											<Text c="gray.7">React hooks for Ethereum - useAccount, useBalance, useSendTransaction, useContract</Text>
 										</Group>
-										<IconExternalLink size={16} color="var(--mantine-color-blue-8)" />
+										<IconExternalLink size={16} color="var(--sei-maroon)" />
 									</Group>
 								</Paper>
 								<Paper
 									p="md"
 									radius="md"
-									bg="green.0"
+									bg="white"
 									withBorder
 									component="a"
 									href="https://viem.sh/"
 									target="_blank"
-									style={{ textDecoration: 'none', cursor: 'pointer' }}
+									style={{ textDecoration: "none", cursor: "pointer" }}
 								>
 									<Group gap="sm" justify="space-between">
 										<Group gap="sm">
-											<Text fw={600} c="green.8">
+											<Text fw={600} c="seiMaroon.9">
 												Viem:
 											</Text>
 											<Text c="gray.7">TypeScript interface for Ethereum - formatEther, parseEther, contract interactions</Text>
 										</Group>
-										<IconExternalLink size={16} color="var(--mantine-color-green-8)" />
+										<IconExternalLink size={16} color="var(--sei-maroon)" />
 									</Group>
 								</Paper>
 								<Paper
 									p="md"
 									radius="md"
-									bg="orange.0"
+									bg="white"
 									withBorder
 									component="a"
 									href="https://www.rainbowkit.com/docs/introduction"
 									target="_blank"
-									style={{ textDecoration: 'none', cursor: 'pointer' }}
+									style={{ textDecoration: "none", cursor: "pointer" }}
 								>
 									<Group gap="sm" justify="space-between">
 										<Group gap="sm">
-											<Text fw={600} c="orange.8">
+											<Text fw={600} c="seiMaroon.9">
 												RainbowKit:
 											</Text>
 											<Text c="gray.7">Beautiful wallet connection UI with support for 100+ wallets</Text>
 										</Group>
-										<IconExternalLink size={16} color="var(--mantine-color-orange-8)" />
+										<IconExternalLink size={16} color="var(--sei-maroon)" />
 									</Group>
 								</Paper>
 							</Stack>
@@ -109,8 +109,7 @@ export default function DevelopmentPage() {
 								<Code block>
 									{`# .env.local
 NEXT_PUBLIC_CHAIN=mainnet    # Default: Sei Pacific-1
-# NEXT_PUBLIC_CHAIN=testnet  # Sei Atlantic-2  
-# NEXT_PUBLIC_CHAIN=devnet   # Sei Devnet`}
+# NEXT_PUBLIC_CHAIN=testnet  # Sei Atlantic-2`}
 								</Code>
 							</Paper>
 							<Text size="sm" c="gray.6">
@@ -156,7 +155,7 @@ const customSeiChain = defineChain({
 							<Text c="gray.7">You're all set to build! Here are some ideas to get you started:</Text>
 							<Stack gap="sm">
 								<Group gap="sm">
-									<Text fw={600} c="purple.7">
+									<Text fw={600} c="gray.7" ff="var(--sei-font-mono)">
 										•
 									</Text>
 									<Text c="gray.7">
@@ -164,7 +163,7 @@ const customSeiChain = defineChain({
 									</Text>
 								</Group>
 								<Group gap="sm">
-									<Text fw={600} c="purple.7">
+									<Text fw={600} c="gray.7" ff="var(--sei-font-mono)">
 										•
 									</Text>
 									<Text c="gray.7">
@@ -172,7 +171,7 @@ const customSeiChain = defineChain({
 									</Text>
 								</Group>
 								<Group gap="sm">
-									<Text fw={600} c="purple.7">
+									<Text fw={600} c="gray.7" ff="var(--sei-font-mono)">
 										•
 									</Text>
 									<Text c="gray.7">
@@ -180,13 +179,13 @@ const customSeiChain = defineChain({
 									</Text>
 								</Group>
 								<Group gap="sm">
-									<Text fw={600} c="purple.7">
+									<Text fw={600} c="gray.7" ff="var(--sei-font-mono)">
 										•
 									</Text>
 									<Text c="gray.7">Implement multi-chain support by extending the chain configuration</Text>
 								</Group>
 								<Group gap="sm">
-									<Text fw={600} c="purple.7">
+									<Text fw={600} c="gray.7" ff="var(--sei-font-mono)">
 										•
 									</Text>
 									<Text c="gray.7">Add more Sei precompiles for advanced blockchain interactions</Text>
@@ -207,7 +206,7 @@ const customSeiChain = defineChain({
 									href="https://wagmi.sh/react/getting-started"
 									target="_blank"
 									variant="light"
-									c="blue"
+									color="gray"
 									size="sm"
 									radius="md"
 									leftSection={<IconExternalLink size={14} />}
@@ -219,7 +218,7 @@ const customSeiChain = defineChain({
 									href="https://viem.sh/"
 									target="_blank"
 									variant="light"
-									c="green"
+									color="gray"
 									size="sm"
 									radius="md"
 									leftSection={<IconExternalLink size={14} />}
@@ -230,8 +229,8 @@ const customSeiChain = defineChain({
 									component="a"
 									href="https://docs.sei.io/"
 									target="_blank"
-									variant="light"
-									c="orange"
+									variant="filled"
+									color="seiMaroon"
 									size="sm"
 									radius="md"
 									leftSection={<IconExternalLink size={14} />}
@@ -243,7 +242,7 @@ const customSeiChain = defineChain({
 									href="https://www.rainbowkit.com/docs/introduction"
 									target="_blank"
 									variant="light"
-									c="purple"
+									color="gray"
 									size="sm"
 									radius="md"
 									leftSection={<IconExternalLink size={14} />}

package/dist/templates/next-template/src/app/favicon.ico/route.ts

@@ -0,0 +1,3 @@
+export function GET(request: Request) {
+	return Response.redirect(new URL("/brand/sei-mark.png", request.url), 307);
+}

package/dist/templates/next-template/src/app/globals.css

@@ -1,8 +1,32 @@
 @import "tailwindcss";
 
 @theme {
-	--color-sei-red: #9e1f19;
-	--color-sei-dark: #1a1a1a;
+	--color-sei-black: #000000;
+	--color-sei-white: #ffffff;
+	--color-sei-maroon: #600014;
+	--color-sei-gold: #966f22;
+	--color-sei-neutral-25: #f5f5f7;
+	--color-sei-neutral-50: #cccccc;
+	--color-sei-neutral-100: #999999;
+	--color-sei-neutral-200: #666666;
+	--color-sei-neutral-400: #333333;
+	--color-sei-neutral-600: #131313;
+}
+
+:root {
+	--sei-black: #000000;
+	--sei-white: #ffffff;
+	--sei-maroon: #600014;
+	--sei-gold: #966f22;
+	--sei-neutral-25: #f5f5f7;
+	--sei-neutral-50: #cccccc;
+	--sei-neutral-100: #999999;
+	--sei-neutral-200: #666666;
+	--sei-neutral-400: #333333;
+	--sei-neutral-600: #131313;
+	--sei-font-display: "Arial Narrow", "Helvetica Neue Condensed", "Helvetica Neue", Arial, sans-serif;
+	--sei-font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
+	--sei-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
 }
 
 @layer base {
@@ -11,6 +35,19 @@
 	}
 
 	body {
-		@apply h-full bg-gray-50 text-gray-900 antialiased;
+		@apply h-full antialiased;
+		background: var(--sei-neutral-25);
+		color: var(--sei-black);
+		font-family: var(--sei-font-body);
 	}
 }
+
+.sei-heading {
+	font-family: var(--sei-font-display);
+	letter-spacing: -0.015em;
+}
+
+.sei-brand-link {
+	display: inline-flex;
+	padding: 4px 12px;
+}

package/dist/templates/next-template/src/app/layout.tsx

@@ -1,18 +1,19 @@
-import { Providers } from '@/components/providers';
-import { ColorSchemeScript } from '@mantine/core';
-import type { Metadata } from 'next';
-import { Inter } from 'next/font/google';
-import type { ReactNode } from 'react';
+import { ColorSchemeScript } from "@mantine/core";
+import type { Metadata } from "next";
+import type { ReactNode } from "react";
+import { Providers } from "@/components/providers";
 
-import './globals.css';
-import '@mantine/core/styles.css';
-import '@mantine/notifications/styles.css';
-
-const inter = Inter({ subsets: ['latin'] });
+import "./globals.css";
+import "@mantine/core/styles.css";
+import "@mantine/notifications/styles.css";
 
 export const metadata: Metadata = {
-	title: 'Sei Next App (Wagmi)',
-	description: 'Generated by create sei app',
+	title: "Sei Next App (Wagmi)",
+	description: "Generated by create sei app",
+	icons: {
+		icon: "/brand/sei-mark.png",
+		apple: "/brand/sei-mark.png",
+	},
 };
 
 export default function RootLayout({ children }: Readonly<{ children: ReactNode }>) {
@@ -22,7 +23,7 @@ export default function RootLayout({ children }: Readonly<{ children: ReactNode
 				<title>Sei Next App (Wagmi)</title>
 				<ColorSchemeScript defaultColorScheme="light" />
 			</head>
-			<body className={inter.className}>
+			<body>
 				<Providers>{children}</Providers>
 			</body>
 		</html>

package/dist/templates/next-template/src/app/page.tsx

@@ -1,7 +1,7 @@
-'use client';
+"use client";
 
-import { Default, Landing, Shell } from '@/components';
-import { useAccount } from 'wagmi';
+import { useAccount } from "wagmi";
+import { Default, Landing, Shell } from "@/components";
 
 export default function Home() {
 	const { isConnected } = useAccount();

package/dist/templates/next-template/src/app/resources/page.tsx

@@ -1,7 +1,7 @@
-import { developerResources, socialLinks } from '@/app/resources/resources';
-import { Shell } from '@/components';
-import { Card, Code, Container, Group, Paper, SimpleGrid, Stack, Text, ThemeIcon, Title } from '@mantine/core';
-import { IconBook, IconRobot, IconTerminal } from '@tabler/icons-react';
+import { Card, Code, Container, Group, Paper, SimpleGrid, Stack, Text, ThemeIcon, Title } from "@mantine/core";
+import { IconBook, IconRobot, IconTerminal } from "@tabler/icons-react";
+import { developerResources, socialLinks } from "@/app/resources/resources";
+import { Shell } from "@/components";
 
 export default function ResourcesPage() {
 	return (
@@ -11,11 +11,11 @@ export default function ResourcesPage() {
 					{/* Header */}
 					<div>
 						<Group gap="md" align="center" mb="lg">
-							<ThemeIcon size={48} radius="md" c="grape" variant="light">
+							<ThemeIcon size={48} radius="md" variant="outline" color="seiMaroon">
 								<IconBook size={24} />
 							</ThemeIcon>
 							<div>
-								<Title order={1} fw={700} c="gray.9">
+								<Title order={1} fw={700} c="seiMaroon.9" className="sei-heading">
 									Developer Resources
 								</Title>
 								<Text size="lg" c="gray.6" mt={4}>
@@ -32,10 +32,10 @@ export default function ResourcesPage() {
 								📚 Documentation & Tools
 							</Title>
 							<SimpleGrid cols={{ base: 1, sm: 2, lg: 2 }} spacing="lg">
-								{developerResources.map(({ title, description, href, icon: Icon, color }) => (
+								{developerResources.map(({ title, description, href, icon: Icon }) => (
 									<Card key={title} withBorder radius="lg" p="xl" component="a" href={href} target="_blank" rel="noreferrer" shadow="sm">
 										<Group align="flex-start" wrap="nowrap" gap="md">
-											<ThemeIcon variant="light" color={color} size={40} radius="md">
+											<ThemeIcon variant="outline" color="gray" size={40} radius="md">
 												<Icon size={22} />
 											</ThemeIcon>
 											<Stack gap={6} flex={1}>
@@ -63,7 +63,7 @@ export default function ResourcesPage() {
 								<Stack gap="lg">
 									<Stack gap="xs">
 										<Group gap="md">
-											<ThemeIcon size={40} radius="md" color="orange" variant="light">
+											<ThemeIcon size={40} radius="md" variant="outline" color="seiMaroon">
 												<IconRobot size={20} />
 											</ThemeIcon>
 											<Title order={4} fw={600} c="gray.9">
@@ -96,46 +96,29 @@ export default function ResourcesPage() {
 										</Stack>
 									</Paper>
 
-									<SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
-										<Card withBorder radius="md" p="md" component="a" href="https://sei-js.docs.sei.io/mcp-server/quickstart" target="_blank" rel="noreferrer">
-											<Group gap="sm">
-												<ThemeIcon size={32} radius="md" color="orange" variant="light">
-													<IconBook size={16} />
-												</ThemeIcon>
-												<Stack gap={2} flex={1}>
-													<Text fw={600} size="sm" c="gray.9">
-														Quickstart Guide
-													</Text>
-													<Text size="xs" c="dimmed">
-														Get started with MCP setup
-													</Text>
-												</Stack>
-											</Group>
-										</Card>
-										<Card
-											withBorder
-											radius="md"
-											p="md"
-											component="a"
-											href="https://sei-js.docs.sei.io/mcp-server/environment-variables"
-											target="_blank"
-											rel="noreferrer"
-										>
-											<Group gap="sm">
-												<ThemeIcon size={32} radius="md" color="orange" variant="light">
-													<IconTerminal size={16} />
-												</ThemeIcon>
-												<Stack gap={2} flex={1}>
-													<Text fw={600} size="sm" c="gray.9">
-														Environment Variables
-													</Text>
-													<Text size="xs" c="dimmed">
-														Configure your setup
-													</Text>
-												</Stack>
-											</Group>
-										</Card>
-									</SimpleGrid>
+									<Card
+										withBorder
+										radius="md"
+										p="md"
+										component="a"
+										href="https://github.com/sei-protocol/sei-js/tree/main/packages/mcp-server#readme"
+										target="_blank"
+										rel="noreferrer"
+									>
+										<Group gap="sm">
+											<ThemeIcon size={32} radius="md" variant="outline" color="seiMaroon">
+												<IconBook size={16} />
+											</ThemeIcon>
+											<Stack gap={2} flex={1}>
+												<Text fw={600} size="sm" c="gray.9">
+													MCP Server Guide
+												</Text>
+												<Text size="xs" c="dimmed">
+													Setup instructions and available tools
+												</Text>
+											</Stack>
+										</Group>
+									</Card>
 								</Stack>
 							</Card>
 						</Stack>
@@ -148,10 +131,10 @@ export default function ResourcesPage() {
 								🌐 Community & Social
 							</Title>
 							<SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="lg">
-								{socialLinks.map(({ title, description, href, icon: Icon, color }) => (
+								{socialLinks.map(({ title, description, href, icon: Icon }) => (
 									<Card key={title} withBorder radius="lg" p="lg" component="a" href={href} target="_blank" rel="noreferrer" shadow="sm">
 										<Group align="flex-start" wrap="nowrap" gap="md">
-											<ThemeIcon variant="light" color={color === 'dark' ? 'gray' : (color as any)} size={36} radius="md">
+											<ThemeIcon variant="outline" color="gray" size={36} radius="md">
 												<Icon size={20} />
 											</ThemeIcon>
 											<Stack gap={4} flex={1}>

package/dist/templates/next-template/src/app/resources/resources.ts

@@ -1,56 +1,43 @@
-import { IconBook, IconBrandTelegram, IconBrandX, IconCode, IconPackage } from '@tabler/icons-react';
+import { IconBook, IconBrandTelegram, IconBrandX, IconCode, IconPackage } from "@tabler/icons-react";
 
 export const developerResources = [
 	{
-		title: 'Sei Docs',
-		description: 'Official protocol docs, guides, and references.',
-		href: 'https://docs.sei.io/',
+		title: "Sei Docs",
+		description: "Official protocol docs, guides, and references.",
+		href: "https://docs.sei.io/",
 		icon: IconBook,
-		color: 'violet',
 	},
 	{
-		title: '@sei-js docs',
-		description: 'SDKs, examples, templates, and tooling for Sei.',
-		href: 'https://sei-js.docs.sei.io/introduction',
-		icon: IconBook,
-		color: 'grape',
-	},
-	{
-		title: 'Wagmi',
-		description: 'React hooks for Ethereum development.',
-		href: 'https://wagmi.sh/',
+		title: "Wagmi",
+		description: "React hooks for Ethereum development.",
+		href: "https://wagmi.sh/",
 		icon: IconCode,
-		color: 'blue',
 	},
 	{
-		title: 'Viem',
-		description: 'TypeScript interface for Ethereum.',
-		href: 'https://viem.sh/',
+		title: "Viem",
+		description: "TypeScript interface for Ethereum.",
+		href: "https://viem.sh/",
 		icon: IconPackage,
-		color: 'green',
 	},
 ] as const;
 
 export const socialLinks = [
 	{
-		title: 'Developer Telegram',
-		description: 'Chat with the community and get support.',
-		href: 'https://t.me/seinetwork',
+		title: "Developer Telegram",
+		description: "Chat with the community and get support.",
+		href: "https://t.me/seinetwork",
 		icon: IconBrandTelegram,
-		color: 'cyan',
 	},
 	{
-		title: 'Sei on X',
-		description: 'Follow Sei Network updates on X (Twitter).',
-		href: 'https://x.com/SeiNetwork',
+		title: "Sei on X",
+		description: "Follow Sei Network updates on X (Twitter).",
+		href: "https://x.com/SeiNetwork",
 		icon: IconBrandX,
-		color: 'dark',
 	},
 	{
-		title: 'Sei Labs on X',
-		description: 'Follow Sei Labs announcements on X (Twitter).',
-		href: 'https://x.com/Sei_Labs',
+		title: "Sei Labs on X",
+		description: "Follow Sei Labs announcements on X (Twitter).",
+		href: "https://x.com/Sei_Labs",
 		icon: IconBrandX,
-		color: 'dark',
 	},
 ] as const;