@sei-js/create-sei 0.0.4 → 1.0.1

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

@@ -0,0 +1,260 @@
+'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';
+
+export default function DevelopmentPage() {
+	return (
+		<Shell>
+			<Container size="lg" py="xl">
+				<Stack gap="xl">
+					{/* Header */}
+					<div>
+						<Group gap="md" align="center" mb="lg">
+							<ThemeIcon size={48} radius="md" c="purple" variant="light">
+								<IconCode size={24} />
+							</ThemeIcon>
+							<div>
+								<Title order={1} fw={700} c="gray.9">
+									Continue Development
+								</Title>
+								<Text size="lg" c="gray.6" mt={4}>
+									Build amazing dApps with the tools you already have
+								</Text>
+							</div>
+						</Group>
+					</div>
+
+					{/* Development Stack Section */}
+					<Card shadow="sm" padding="xl" radius="lg" withBorder>
+						<Stack gap="lg">
+							<Title order={2} size="h3" fw={600} c="gray.8">
+								🔧 Your Development Stack
+							</Title>
+							<Text c="gray.7">This template comes pre-configured with powerful tools for blockchain development:</Text>
+							<Stack gap="sm">
+								<Paper
+									p="md"
+									radius="md"
+									bg="blue.0"
+									withBorder
+									component="a"
+									href="https://wagmi.sh/react/getting-started"
+									target="_blank"
+									style={{ textDecoration: 'none', cursor: 'pointer' }}
+								>
+									<Group gap="sm" justify="space-between">
+										<Group gap="sm">
+											<Text fw={600} c="blue.8">
+												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)" />
+									</Group>
+								</Paper>
+								<Paper
+									p="md"
+									radius="md"
+									bg="green.0"
+									withBorder
+									component="a"
+									href="https://viem.sh/"
+									target="_blank"
+									style={{ textDecoration: 'none', cursor: 'pointer' }}
+								>
+									<Group gap="sm" justify="space-between">
+										<Group gap="sm">
+											<Text fw={600} c="green.8">
+												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)" />
+									</Group>
+								</Paper>
+								<Paper
+									p="md"
+									radius="md"
+									bg="orange.0"
+									withBorder
+									component="a"
+									href="https://www.rainbowkit.com/docs/introduction"
+									target="_blank"
+									style={{ textDecoration: 'none', cursor: 'pointer' }}
+								>
+									<Group gap="sm" justify="space-between">
+										<Group gap="sm">
+											<Text fw={600} c="orange.8">
+												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)" />
+									</Group>
+								</Paper>
+							</Stack>
+						</Stack>
+					</Card>
+
+					{/* Environment Variables Section */}
+					<Card shadow="sm" padding="xl" radius="lg" withBorder>
+						<Stack gap="lg">
+							<Title order={2} size="h3" fw={600} c="gray.8">
+								⚙️ Network Configuration
+							</Title>
+							<Text c="gray.7">Control which Sei network your app connects to using environment variables:</Text>
+							<Paper p="md" radius="md" bg="gray.0" withBorder>
+								<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`}
+								</Code>
+							</Paper>
+							<Text size="sm" c="gray.6">
+								The chain selection logic is in <Code>src/components/providers/providers.tsx</Code>
+							</Text>
+						</Stack>
+					</Card>
+
+					{/* Custom Chain Section */}
+					<Card shadow="sm" padding="xl" radius="lg" withBorder>
+						<Stack gap="lg">
+							<Title order={2} size="h3" fw={600} c="gray.8">
+								🔗 Custom Chain Configuration
+							</Title>
+							<Text c="gray.7">Need to connect to a custom Sei network or local development chain? Modify the chain configuration in the providers file:</Text>
+							<Paper p="md" radius="md" bg="gray.0" withBorder>
+								<Code block>
+									{`// src/components/providers/providers.tsx
+import { defineChain } from 'viem'
+
+const customSeiChain = defineChain({
+  id: 1234, // Your chain ID
+  name: 'Custom Sei',
+  nativeCurrency: { name: 'SEI', symbol: 'SEI', decimals: 18 },
+  rpcUrls: {
+    default: { http: ['http://localhost:8545'] }
+  },
+  blockExplorers: {
+    default: { name: 'Explorer', url: 'https://explorer.example.com' }
+  }
+})`}
+								</Code>
+							</Paper>
+						</Stack>
+					</Card>
+
+					{/* Next Steps Section */}
+					<Card shadow="sm" padding="xl" radius="lg" withBorder>
+						<Stack gap="lg">
+							<Title order={2} size="h3" fw={600} c="gray.8">
+								🚀 What's Next?
+							</Title>
+							<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>
+									<Text c="gray.7">
+										Create smart contract interactions using <Code>useWriteContract</Code>
+									</Text>
+								</Group>
+								<Group gap="sm">
+									<Text fw={600} c="purple.7">
+										•
+									</Text>
+									<Text c="gray.7">
+										Build token swaps with <Code>useSimulateContract</Code> and <Code>useWaitForTransactionReceipt</Code>
+									</Text>
+								</Group>
+								<Group gap="sm">
+									<Text fw={600} c="purple.7">
+										•
+									</Text>
+									<Text c="gray.7">
+										Add ENS support with <Code>useEnsName</Code> and <Code>useEnsAvatar</Code>
+									</Text>
+								</Group>
+								<Group gap="sm">
+									<Text fw={600} c="purple.7">
+										•
+									</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>
+									<Text c="gray.7">Add more Sei precompiles for advanced blockchain interactions</Text>
+								</Group>
+							</Stack>
+						</Stack>
+					</Card>
+
+					{/* Resources Section */}
+					<Card shadow="sm" padding="xl" radius="lg" withBorder>
+						<Stack gap="lg">
+							<Title order={2} size="h3" fw={600} c="gray.8">
+								📚 Resources & Documentation
+							</Title>
+							<Group gap="md" wrap="wrap">
+								<Button
+									component="a"
+									href="https://wagmi.sh/react/getting-started"
+									target="_blank"
+									variant="light"
+									c="blue"
+									size="sm"
+									radius="md"
+									leftSection={<IconExternalLink size={14} />}
+								>
+									Wagmi Docs
+								</Button>
+								<Button
+									component="a"
+									href="https://viem.sh/"
+									target="_blank"
+									variant="light"
+									c="green"
+									size="sm"
+									radius="md"
+									leftSection={<IconExternalLink size={14} />}
+								>
+									Viem Docs
+								</Button>
+								<Button
+									component="a"
+									href="https://docs.sei.io/"
+									target="_blank"
+									variant="light"
+									c="orange"
+									size="sm"
+									radius="md"
+									leftSection={<IconExternalLink size={14} />}
+								>
+									Sei Docs
+								</Button>
+								<Button
+									component="a"
+									href="https://www.rainbowkit.com/docs/introduction"
+									target="_blank"
+									variant="light"
+									c="purple"
+									size="sm"
+									radius="md"
+									leftSection={<IconExternalLink size={14} />}
+								>
+									RainbowKit
+								</Button>
+							</Group>
+						</Stack>
+					</Card>
+				</Stack>
+			</Container>
+		</Shell>
+	);
+}

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

@@ -0,0 +1,16 @@
+@import "tailwindcss";
+
+@theme {
+	--color-sei-red: #9e1f19;
+	--color-sei-dark: #1a1a1a;
+}
+
+@layer base {
+	html {
+		@apply h-full;
+	}
+
+	body {
+		@apply h-full bg-gray-50 text-gray-900 antialiased;
+	}
+}

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

@@ -1,21 +1,30 @@
+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 './globals.css';
+import '@mantine/core/styles.css';
+import '@mantine/notifications/styles.css';
 
 const inter = Inter({ subsets: ['latin'] });
 
 export const metadata: Metadata = {
 	title: 'Sei Next App (Wagmi)',
-	description: 'Generated by create sei app'
+	description: 'Generated by create sei app',
 };
 
-export default function RootLayout({
-	children
-}: Readonly<{
-	children: React.ReactNode;
-}>) {
+export default function RootLayout({ children }: Readonly<{ children: ReactNode }>) {
 	return (
-		<html lang="en">
-			<body className={inter.className}>{children}</body>
+		<html lang="en" data-mantine-color-scheme="light">
+			<head>
+				<title>Sei Next App (Wagmi)</title>
+				<ColorSchemeScript defaultColorScheme="light" />
+			</head>
+			<body className={inter.className}>
+				<Providers>{children}</Providers>
+			</body>
 		</html>
 	);
 }

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

@@ -1,21 +1,10 @@
-import { ConnectButton } from '@rainbow-me/rainbowkit';
-import Web3Provider from './components/Web3Provider';
-import Homepage from './components/Homepage/Homepage';
+'use client';
 
-import './index.css';
+import { Default, Landing, Shell } from '@/components';
+import { useAccount } from 'wagmi';
 
 export default function Home() {
-	return (
-		<Web3Provider>
-			<div className="header">
-				<ConnectButton
-					showBalance={{
-						smallScreen: false,
-						largeScreen: true
-					}}
-				/>
-			</div>
-			<Homepage />
-		</Web3Provider>
-	);
+	const { isConnected } = useAccount();
+
+	return <Shell>{isConnected ? <Default /> : <Landing />}</Shell>;
 }

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

@@ -0,0 +1,175 @@
+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';
+
+export default function ResourcesPage() {
+	return (
+		<Shell>
+			<Container size="lg" py="xl">
+				<Stack gap="xl">
+					{/* Header */}
+					<div>
+						<Group gap="md" align="center" mb="lg">
+							<ThemeIcon size={48} radius="md" c="grape" variant="light">
+								<IconBook size={24} />
+							</ThemeIcon>
+							<div>
+								<Title order={1} fw={700} c="gray.9">
+									Developer Resources
+								</Title>
+								<Text size="lg" c="gray.6" mt={4}>
+									Everything you need to build on Sei. Documentation, tools, community links, and development guides.
+								</Text>
+							</div>
+						</Group>
+					</div>
+
+					{/* Documentation & Tools */}
+					<Card shadow="sm" padding="xl" radius="lg" withBorder>
+						<Stack gap="lg">
+							<Title order={2} size="h3" fw={600} c="gray.8">
+								📚 Documentation & Tools
+							</Title>
+							<SimpleGrid cols={{ base: 1, sm: 2, lg: 2 }} spacing="lg">
+								{developerResources.map(({ title, description, href, icon: Icon, color }) => (
+									<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">
+												<Icon size={22} />
+											</ThemeIcon>
+											<Stack gap={6} flex={1}>
+												<Text fw={600} size="lg" c="gray.9">
+													{title}
+												</Text>
+												<Text size="sm" c="dimmed" lh={1.5}>
+													{description}
+												</Text>
+											</Stack>
+										</Group>
+									</Card>
+								))}
+							</SimpleGrid>
+						</Stack>
+					</Card>
+
+					{/* MCP Server */}
+					<Card shadow="sm" padding="xl" radius="lg" withBorder>
+						<Stack gap="lg">
+							<Title order={2} size="h3" fw={600} c="gray.8">
+								🤖 AI Development Tools
+							</Title>
+							<Card withBorder radius="lg" p="xl" shadow="sm">
+								<Stack gap="lg">
+									<Stack gap="xs">
+										<Group gap="md">
+											<ThemeIcon size={40} radius="md" color="orange" variant="light">
+												<IconRobot size={20} />
+											</ThemeIcon>
+											<Title order={4} fw={600} c="gray.9">
+												Sei MCP Server
+											</Title>
+										</Group>
+										<Text size="sm" c="dimmed" lh={1.5} maw={500}>
+											Teach your IDE or LLM how to be an expert on Sei through the Model Context Protocol (MCP).
+										</Text>
+									</Stack>
+
+									<Paper p="md" radius="md" withBorder bg="gray.0">
+										<Stack gap="sm">
+											<Group gap="xs">
+												<IconTerminal size={16} color="var(--mantine-color-gray-6)" />
+												<Text size="xs" fw={500} c="dimmed">
+													Configuration
+												</Text>
+											</Group>
+											<Code block bg="white" p="md">
+												{`{
+  "mcpServers": {
+    "sei": {
+      "command": "npx",
+      "args": ["-y", "@sei-js/mcp-server"]
+    }
+  }
+}`}
+											</Code>
+										</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>
+								</Stack>
+							</Card>
+						</Stack>
+					</Card>
+
+					{/* Community & Social */}
+					<Card shadow="sm" padding="xl" radius="lg" withBorder>
+						<Stack gap="lg">
+							<Title order={2} size="h3" fw={600} c="gray.8">
+								🌐 Community & Social
+							</Title>
+							<SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="lg">
+								{socialLinks.map(({ title, description, href, icon: Icon, color }) => (
+									<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">
+												<Icon size={20} />
+											</ThemeIcon>
+											<Stack gap={4} flex={1}>
+												<Text fw={600} c="gray.9">
+													{title}
+												</Text>
+												<Text size="sm" c="dimmed" lh={1.4}>
+													{description}
+												</Text>
+											</Stack>
+										</Group>
+									</Card>
+								))}
+							</SimpleGrid>
+						</Stack>
+					</Card>
+				</Stack>
+			</Container>
+		</Shell>
+	);
+}

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

@@ -0,0 +1,56 @@
+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/',
+		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/',
+		icon: IconCode,
+		color: 'blue',
+	},
+	{
+		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',
+		icon: IconBrandTelegram,
+		color: 'cyan',
+	},
+	{
+		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',
+		icon: IconBrandX,
+		color: 'dark',
+	},
+] as const;

package/dist/templates/next-template/src/components/default/examples.ts

@@ -0,0 +1,63 @@
+// Code examples for display
+export const walletCodeExample = `// Import wallet hooks
+import { useAccount, useDisconnect } from 'wagmi';
+
+// Use the hooks
+const { address, isConnected } = useAccount();
+const { disconnect } = useDisconnect();
+
+// Access wallet info
+console.log('Connected:', isConnected);
+console.log('Address:', address);
+
+// Disconnect wallet
+disconnect();`;
+
+export const balanceCodeExample = `// Import hooks and utilities
+import { useAccount, usePublicClient } from 'wagmi';
+import { formatEther } from 'viem';
+
+// Use the hooks
+const { address } = useAccount();
+const publicClient = usePublicClient();
+
+// Get balance
+const weiBalance = await publicClient.getBalance({ address });
+const seiBalance = formatEther(weiBalance);`;
+
+export const precompileCodeExample = `// Import Sei precompiles
+import { VIEM_BANK_PRECOMPILE_ABI, BANK_PRECOMPILE_ADDRESS } from '@sei-js/precompiles';
+import { usePublicClient } from 'wagmi';
+import { type ReadContractParameters } from 'viem';
+
+// Use the hook
+const publicClient = usePublicClient();
+
+// Call precompile
+const readContractParams: ReadContractParameters = {
+  abi: VIEM_BANK_PRECOMPILE_ABI,
+  address: BANK_PRECOMPILE_ADDRESS,
+  functionName: 'supply',
+  args: ['usei']
+};
+
+const result = await publicClient.readContract(readContractParams);`;
+
+export const transactionCodeExample = `// Import transaction hooks
+import { useSendTransaction, useWaitForTransactionReceipt } from 'wagmi';
+import { parseEther } from 'viem';
+
+// Use the hooks
+const { data: hash, sendTransaction, isPending } = useSendTransaction();
+const { isLoading: isConfirming, isSuccess: isConfirmed } = useWaitForTransactionReceipt({ hash });
+
+// Example recipient address for demonstration
+const exampleRecipient = '0x742d35cc6634C0532925a3b8D8C9C6c0C6c0C6c0';
+
+// Send transaction
+sendTransaction({
+  to: exampleRecipient,
+  value: parseEther(amount),
+});
+
+// Transaction states: isPending → isConfirming → isConfirmed`;