@sei-js/create-sei 0.0.3 → 1.0.0

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

@@ -0,0 +1,402 @@
+'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;

package/dist/templates/next-template/src/components/index.ts

@@ -0,0 +1,3 @@
+export { default as Default } from './default';
+export { default as Landing } from './landing';
+export { default as Shell } from './shell';

package/dist/templates/next-template/src/components/landing/index.tsx

@@ -0,0 +1,107 @@
+'use client';
+
+import { Badge, Button, Card, Code, Container, Group, Stack, Text, ThemeIcon, Title } from '@mantine/core';
+import { ConnectButton } from '@rainbow-me/rainbowkit';
+import { IconBook, IconCode, IconRocket } from '@tabler/icons-react';
+import Link from 'next/link';
+
+export default function Landing() {
+	return (
+		<Container size="md" py="xl">
+			<Stack gap="xl" align="center">
+				{/* Hero Section */}
+				<Stack gap="md" align="center" ta="center">
+					<Title order={1} size="h1" fw={700} c="gray.9">
+						Welcome to Your Sei dApp
+					</Title>
+					<Text size="lg" c="dimmed" maw={600}>
+						A production-ready starter template built with Next.js, Mantine UI, RainbowKit, Tailwind CSS, and Wagmi with easy deployment to Vercel. Everything
+						you need to build and run production-grade dApps on Sei.
+					</Text>
+
+					{/* Tech Stack Badges */}
+					<Group gap="xs" mt="sm">
+						<Badge variant="light" color="blue" style={{ backgroundColor: 'rgb(239 246 255)', color: 'rgb(29 78 216)', border: '1px solid rgb(191 219 254)' }}>
+							Next.js 14
+						</Badge>
+						<Badge
+							variant="light"
+							color="violet"
+							style={{ backgroundColor: 'rgb(250 245 255)', color: 'rgb(109 40 217)', border: '1px solid rgb(196 181 253)' }}
+						>
+							Mantine UI
+						</Badge>
+						<Badge variant="light" color="cyan" style={{ backgroundColor: 'rgb(236 254 255)', color: 'rgb(14 116 144)', border: '1px solid rgb(165 243 252)' }}>
+							Tailwind CSS
+						</Badge>
+						<Badge variant="light" color="yellow" style={{ backgroundColor: 'rgb(254 249 195)', color: 'rgb(161 98 7)', border: '1px solid rgb(254 240 138)' }}>
+							Biome
+						</Badge>
+						<Badge
+							variant="light"
+							color="orange"
+							style={{ backgroundColor: 'rgb(255 247 237)', color: 'rgb(194 65 12)', border: '1px solid rgb(254 215 170)' }}
+						>
+							RainbowKit
+						</Badge>
+						<Badge variant="light" color="teal" style={{ backgroundColor: 'rgb(240 253 250)', color: 'rgb(15 118 110)', border: '1px solid rgb(153 246 228)' }}>
+							Wagmi + Viem
+						</Badge>
+						<Badge variant="light" color="dark" style={{ backgroundColor: 'rgb(249 250 251)', color: 'rgb(17 24 39)', border: '1px solid rgb(209 213 219)' }}>
+							Vercel
+						</Badge>
+					</Group>
+				</Stack>
+
+				{/* Primary Call to Action - Connect Wallet */}
+				<Card
+					withBorder
+					radius="xl"
+					p="xl"
+					bg="gradient-to-r from-blue-50 to-purple-50"
+					w="100%"
+					maw={600}
+					style={{ border: '2px solid var(--mantine-color-blue-2)' }}
+				>
+					<Stack gap="lg" align="center" ta="center">
+						<ThemeIcon size={64} radius="xl" color="blue" variant="light">
+							<IconRocket size={32} />
+						</ThemeIcon>
+						<Stack gap="sm" align="center">
+							<Text fw={700} size="xl" c="blue.8">
+								Connect Your Wallet to Get Started
+							</Text>
+							<Text size="md" c="dimmed" maw={400}>
+								Explore interactive examples and see real-time Sei interactions
+							</Text>
+						</Stack>
+						<ConnectButton />
+					</Stack>
+				</Card>
+
+				{/* Development Tip */}
+				<Card withBorder radius="md" p="md" bg="gray.0" maw={600}>
+					<Text size="xs" c="dimmed" ta="center">
+						💡 <strong>Development Tip:</strong> Start by exploring the examples in the connected app, then customize{' '}
+						<Code>src/components/default/index.tsx</Code> to build your unique dApp features.
+					</Text>
+				</Card>
+
+				{/* Quick Links */}
+				<Stack gap="sm" w="100%" maw={600} mt="xl">
+					<Text fw={600} size="sm" ta="center" c="gray.7" mb="xs">
+						Quick Links
+					</Text>
+					<Group gap="md" grow>
+						<Button component={Link} href="/resources" variant="light" color="gray" size="sm" leftSection={<IconBook size={16} />} style={{ flex: 1 }}>
+							Developer Resources
+						</Button>
+						<Button component={Link} href="/development" variant="light" color="gray" size="sm" leftSection={<IconCode size={16} />} style={{ flex: 1 }}>
+							Continue Development
+						</Button>
+					</Group>
+				</Stack>
+			</Stack>
+		</Container>
+	);
+}

package/dist/templates/next-template/src/components/providers/index.ts

@@ -0,0 +1 @@
+export { default as Providers } from './providers';

package/dist/templates/next-template/src/components/providers/providers.tsx

@@ -0,0 +1,89 @@
+'use client';
+
+import { MantineProvider } from '@mantine/core';
+import { Notifications } from '@mantine/notifications';
+import { RainbowKitProvider, connectorsForWallets, lightTheme } from '@rainbow-me/rainbowkit';
+import { metaMaskWallet } from '@rainbow-me/rainbowkit/wallets';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { type ReactNode, useMemo } from 'react';
+import { http, WagmiProvider, createConfig } from 'wagmi';
+
+import '@rainbow-me/rainbowkit/styles.css';
+import { sei, seiDevnet, seiTestnet } from 'viem/chains';
+
+const queryClient = new QueryClient();
+
+const connectors = connectorsForWallets(
+	[
+		{
+			groupName: 'Recommended',
+			wallets: [metaMaskWallet],
+		},
+	],
+	{
+		appName: 'Sei dApp',
+		projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID || 'your-project-id',
+	}
+);
+
+interface ProvidersProps {
+	children: ReactNode;
+}
+
+export default function Providers({ children }: ProvidersProps) {
+	// Chain selection via environment variable, defaults to sei mainnet
+	const getSelectedChain = () => {
+		const chainName = process.env.NEXT_PUBLIC_CHAIN || 'mainnet';
+		switch (chainName.toLowerCase()) {
+			case 'testnet':
+				return seiTestnet;
+			case 'devnet':
+				return seiDevnet;
+			default:
+				return sei;
+		}
+	};
+
+	const chain = getSelectedChain();
+
+	const config = useMemo(
+		() =>
+			createConfig({
+				chains: [chain],
+				connectors,
+				transports: {
+					[sei.id]: http(),
+					[seiTestnet.id]: http(),
+					[seiDevnet.id]: http(),
+				},
+				ssr: true,
+			}),
+		[chain]
+	);
+
+	return (
+		<WagmiProvider config={config}>
+			<QueryClientProvider client={queryClient}>
+				<MantineProvider defaultColorScheme="light">
+					<Notifications />
+					<RainbowKitProvider
+						theme={lightTheme({
+							accentColor: '#9E1F19',
+							accentColorForeground: 'white',
+							borderRadius: 'medium',
+							fontStack: 'system',
+						})}
+						appInfo={{
+							appName: 'Sei dApp',
+							learnMoreUrl: 'https://docs.sei.io/learn/wallets',
+						}}
+						modalSize="compact"
+						initialChain={chain.id}
+					>
+						{children}
+					</RainbowKitProvider>
+				</MantineProvider>
+			</QueryClientProvider>
+		</WagmiProvider>
+	);
+}

package/dist/templates/next-template/src/components/shell/index.ts

@@ -0,0 +1 @@
+export { default } from './shell';