@sei-js/create-sei 1.0.1 → 2.0.0

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

@@ -1,175 +0,0 @@
-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/templates/next-template/src/app/resources/resources.ts

@@ -1,56 +0,0 @@
-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/templates/next-template/src/components/default/examples.ts

@@ -1,63 +0,0 @@
-// 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`;

package/templates/next-template/src/components/default/index.tsx

@@ -1,402 +0,0 @@
-'use client';
-
-import { CodeHighlight } from '@mantine/code-highlight';
-import {
-	ActionIcon,
-	Alert,
-	Badge,
-	Button,
-	Card,
-	Code,
-	Collapse,
-	Container,
-	Flex,
-	Group,
-	Loader,
-	Paper,
-	Stack,
-	Text,
-	TextInput,
-	ThemeIcon,
-	Title,
-} from '@mantine/core';
-import { notifications } from '@mantine/notifications';
-import { IconBulb, IconChevronDown, IconChevronUp, IconCoins, IconCopy, IconLogout, IconSend, IconWallet } from '@tabler/icons-react';
-import { useState } from 'react';
-import { formatEther, parseEther } from 'viem';
-import { useAccount, useDisconnect, usePublicClient, useSendTransaction, useWaitForTransactionReceipt } from 'wagmi';
-import { balanceCodeExample, transactionCodeExample, walletCodeExample } from './examples';
-
-function Examples() {
-	const [balance, setBalance] = useState('');
-	const [recipient, setRecipient] = useState('');
-	const [amount, setAmount] = useState('');
-
-	// Code visibility toggles
-	const [showWalletCode, setShowWalletCode] = useState(false);
-	const [showBalanceCode, setShowBalanceCode] = useState(false);
-	const [showTransactionCode, setShowTransactionCode] = useState(false);
-
-	const publicClient = usePublicClient();
-	const { address, isConnected } = useAccount();
-	const { disconnect } = useDisconnect();
-
-	// Transaction hooks
-	const { data: hash, sendTransaction, isPending } = useSendTransaction();
-	const { isLoading: isConfirming, isSuccess: isConfirmed } = useWaitForTransactionReceipt({
-		hash,
-	});
-
-	const copyToClipboard = (text: string) => {
-		try {
-			navigator.clipboard.writeText(text).then(() => {
-				notifications.show({
-					title: 'Copied!',
-					message: 'Code copied to clipboard',
-					color: 'green',
-				});
-			});
-		} catch (err) {
-			console.error('Failed to copy text: ', err);
-			notifications.show({
-				title: 'Error',
-				message: 'Failed to copy to clipboard',
-				color: 'red',
-			});
-		}
-	};
-
-	const getBalanceWagmi = async () => {
-		if (!address || !publicClient) {
-			return undefined;
-		}
-		const weiBalance = await publicClient.getBalance({ address });
-		const seiBalance = formatEther(weiBalance);
-		setBalance(seiBalance);
-	};
-
-	const sendSei = async () => {
-		if (!recipient || !amount) {
-			notifications.show({
-				title: 'Missing Information',
-				message: 'Please enter recipient address and amount',
-				color: 'orange',
-			});
-			return;
-		}
-
-		try {
-			sendTransaction({
-				to: recipient as `0x${string}`,
-				value: parseEther(amount),
-			});
-		} catch (error) {
-			console.error('Transaction error:', error);
-			notifications.show({
-				title: 'Transaction Error',
-				message: 'Failed to send transaction',
-				color: 'red',
-			});
-		}
-	};
-
-	return (
-		<Container size="xl" py="xl" pos="relative">
-			<Stack gap="xl">
-				{/* Header */}
-				<div>
-					<Group gap="md" align="center" mb="lg">
-						<ThemeIcon size={48} radius="md" c="blue" variant="light">
-							<IconBulb size={24} />
-						</ThemeIcon>
-						<div>
-							<Title order={1} fw={700} c="gray.9">
-								Interactive Examples
-							</Title>
-							<Text size="lg" c="gray.6" mt={4}>
-								Common blockchain development patterns with live code examples
-							</Text>
-						</div>
-					</Group>
-				</div>
-
-				{/* Wallet Connection Info */}
-				<Card shadow="xs" p="lg" radius="md" withBorder>
-					<Stack gap="md">
-						<Flex justify="space-between" align="flex-start">
-							<Stack gap="xs">
-								<Group gap="md">
-									<ThemeIcon size={40} radius="md" color="blue" variant="light">
-										<IconWallet size={20} />
-									</ThemeIcon>
-									<Title order={4} fw={600} c="gray.9">
-										Connected Wallet
-									</Title>
-								</Group>
-								<Text size="sm" c="gray.6">
-									Access wallet information using Wagmi's useAccount hook
-								</Text>
-							</Stack>
-							<Badge color="blue" variant="light" size="md" radius="md">
-								address
-							</Badge>
-						</Flex>
-						<Paper p="md" radius="md" withBorder bg="gray.0">
-							<Text size="xs" fw={500} c="gray.6">
-								Wallet Address
-							</Text>
-							<Flex justify="space-between" align="center">
-								<Code bg="white" p="xs">
-									{address || 'No wallet connected'}
-								</Code>
-								{isConnected && address && (
-									<Group gap="xs">
-										<ActionIcon variant="light" color="blue" size="sm" radius="md" onClick={() => copyToClipboard(address)} aria-label="Copy address">
-											<IconCopy size={14} />
-										</ActionIcon>
-										<ActionIcon variant="light" color="red" size="sm" radius="md" onClick={() => disconnect()} aria-label="Disconnect wallet">
-											<IconLogout size={14} />
-										</ActionIcon>
-									</Group>
-								)}
-							</Flex>
-						</Paper>
-
-						<Group justify="space-between" align="center" mt="sm">
-							<Button
-								variant="subtle"
-								color="gray"
-								size="sm"
-								radius="md"
-								leftSection={showWalletCode ? <IconChevronUp size={14} /> : <IconChevronDown size={14} />}
-								onClick={() => setShowWalletCode(!showWalletCode)}
-							>
-								{showWalletCode ? 'Hide' : 'View'} Implementation
-							</Button>
-							{showWalletCode && (
-								<ActionIcon variant="subtle" color="gray" size="sm" radius="md" onClick={() => copyToClipboard(walletCodeExample)}>
-									<IconCopy size={14} />
-								</ActionIcon>
-							)}
-						</Group>
-
-						<Collapse in={showWalletCode}>
-							<Paper mt="sm" p="md" bg="gray.0" radius="md" withBorder>
-								<CodeHighlight code={walletCodeExample} language="tsx" withCopyButton={false} expandCodeLabel="" collapseCodeLabel="" />
-							</Paper>
-						</Collapse>
-					</Stack>
-				</Card>
-
-				<Stack gap="lg">
-					{/* Balance Example */}
-					<Card shadow="xs" p="lg" radius="md" withBorder>
-						<Stack gap="md">
-							<Flex justify="space-between" align="flex-start">
-								<Stack gap="xs">
-									<Flex align="center" gap="md">
-										<ThemeIcon size={40} radius="md" color="green" variant="light">
-											<IconCoins size={20} />
-										</ThemeIcon>
-										<Title order={3} size="h3" fw={600}>
-											Wallet Balance
-										</Title>
-									</Flex>
-									<Text size="sm" c="gray.6">
-										Query your wallet's SEI balance using Wagmi's usePublicClient hook
-									</Text>
-								</Stack>
-								<Badge color="green" variant="light" size="md" radius="md">
-									balance
-								</Badge>
-							</Flex>
-							<Paper p="md" radius="md" withBorder bg="gray.0">
-								<Text size="xs" fw={500} c="gray.6">
-									Current Balance
-								</Text>
-								<Flex justify="space-between" align="center">
-									<Flex align="baseline" gap="xs">
-										{balance ? (
-											<>
-												<Text fw={700} size="xl" c="gray.9" ff="monospace">
-													{Number.parseFloat(balance).toFixed(4)}
-												</Text>
-												<Text size="sm" c="gray.6" fw={500}>
-													SEI
-												</Text>
-											</>
-										) : (
-											<Paper px="sm" py={4} radius="md" withBorder bg="white">
-												<Flex align="baseline" gap="xs">
-													<Text fw={700} size="xl" c="gray.5" ff="monospace">
-														—
-													</Text>
-													<Text size="sm" c="gray.6" fw={500}>
-														SEI
-													</Text>
-												</Flex>
-											</Paper>
-										)}
-									</Flex>
-									<Button
-										onClick={getBalanceWagmi}
-										disabled={!address}
-										size="sm"
-										radius="md"
-										variant="light"
-										color="green"
-										leftSection={<IconCoins size={14} />}
-									>
-										{balance ? 'Refresh' : 'Check Balance'}
-									</Button>
-								</Flex>
-							</Paper>
-
-							<Group justify="space-between" align="center" mt="sm">
-								<Button
-									variant="subtle"
-									color="gray"
-									size="sm"
-									radius="md"
-									leftSection={showBalanceCode ? <IconChevronUp size={14} /> : <IconChevronDown size={14} />}
-									onClick={() => setShowBalanceCode(!showBalanceCode)}
-								>
-									{showBalanceCode ? 'Hide' : 'View'} Implementation
-								</Button>
-								{showBalanceCode && (
-									<ActionIcon variant="subtle" color="gray" size="sm" radius="md" onClick={() => copyToClipboard(balanceCodeExample)}>
-										<IconCopy size={14} />
-									</ActionIcon>
-								)}
-							</Group>
-
-							<Collapse in={showBalanceCode}>
-								<Paper mt="sm" p="md" bg="gray.0" radius="md" withBorder>
-									<CodeHighlight code={balanceCodeExample} language="tsx" withCopyButton={false} expandCodeLabel="" collapseCodeLabel="" />
-								</Paper>
-							</Collapse>
-						</Stack>
-					</Card>
-
-					{/* Transaction Example */}
-					<Card shadow="xs" p="lg" radius="md" withBorder>
-						<Stack gap="md">
-							<Flex direction="row" justify="space-between" align="flex-start">
-								<Stack gap="xs">
-									<Flex direction="row" align="center" gap="md" mb="md">
-										<ThemeIcon size={40} radius="md" color="blue" variant="light">
-											<IconSend size={20} />
-										</ThemeIcon>
-										<Title order={3} size="h3" fw={600} c="gray.9">
-											Send Transaction
-										</Title>
-									</Flex>
-									<Text c="gray.6" size="sm" maw={400}>
-										Send SEI tokens using Wagmi's transaction hooks with real-time status
-									</Text>
-								</Stack>
-								<Badge color="blue" variant="light" size="md" radius="md">
-									transfer
-								</Badge>
-							</Flex>
-							<Paper p="md" radius="md" withBorder bg="gray.0">
-								<Flex align="flex-end" gap="sm">
-									<Flex flex={1} direction="column">
-										<Text size="xs" fw={500} c="gray.6" mb={4}>
-											Recipient Address
-										</Text>
-										<TextInput placeholder="0x..." value={recipient} onChange={(e) => setRecipient(e.currentTarget.value)} radius="md" size="md" />
-									</Flex>
-									<Flex w={128} direction="column">
-										<Text size="xs" fw={500} c="gray.6" mb={4}>
-											Amount
-										</Text>
-										<TextInput
-											placeholder="0.1"
-											value={amount}
-											onChange={(e) => setAmount(e.currentTarget.value)}
-											radius="md"
-											size="md"
-											rightSection={
-												<Text size="xs" c="gray.6" fw={500} pr="xs">
-													SEI
-												</Text>
-											}
-										/>
-									</Flex>
-									<Button
-										onClick={sendSei}
-										disabled={isPending || !address || !recipient || !amount}
-										size="md"
-										radius="md"
-										variant="light"
-										color="blue"
-										px="sm"
-									>
-										{isPending ? <Loader size={16} /> : <IconSend size={16} />}
-									</Button>
-								</Flex>
-							</Paper>
-
-							{hash && (
-								<Alert color="blue" variant="light" radius="md" py={4}>
-									<Stack gap={4}>
-										<Text size="xs" fw={600}>
-											Transaction Hash
-										</Text>
-										<Code>{hash}</Code>
-									</Stack>
-								</Alert>
-							)}
-
-							{isConfirming && (
-								<Alert color="yellow" variant="light" radius="md" py={4}>
-									<Group gap="xs">
-										<Loader size={14} />
-										<Text size="xs" fw={500}>
-											Waiting for confirmation...
-										</Text>
-									</Group>
-								</Alert>
-							)}
-
-							{isConfirmed && (
-								<Alert color="green" variant="light" radius="md" py={4}>
-									<Text size="xs" fw={600}>
-										✅ Transaction confirmed!
-									</Text>
-								</Alert>
-							)}
-
-							<Group justify="space-between" align="center" mt={8}>
-								<Button
-									variant="subtle"
-									color="gray"
-									size="sm"
-									radius="xl"
-									leftSection={showTransactionCode ? <IconChevronUp size={14} /> : <IconChevronDown size={14} />}
-									onClick={() => setShowTransactionCode(!showTransactionCode)}
-								>
-									{showTransactionCode ? 'Hide' : 'View'} Implementation
-								</Button>
-								{showTransactionCode && (
-									<ActionIcon variant="subtle" color="gray" size="sm" radius="xl" onClick={() => copyToClipboard(transactionCodeExample)}>
-										<IconCopy size={14} />
-									</ActionIcon>
-								)}
-							</Group>
-
-							<Collapse in={showTransactionCode}>
-								<Paper mt="sm" p="md" bg="gray.0" radius="md" withBorder>
-									<CodeHighlight code={transactionCodeExample} language="tsx" withCopyButton={false} expandCodeLabel="" collapseCodeLabel="" />
-								</Paper>
-							</Collapse>
-						</Stack>
-					</Card>
-				</Stack>
-			</Stack>
-		</Container>
-	);
-}
-
-export default Examples;