@sei-js/create-sei 1.0.1 → 2.0.0

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

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

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

@@ -1,155 +0,0 @@
-'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/templates/next-template/src/components/providers/index.ts

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

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

@@ -1,108 +0,0 @@
-"use client";
-
-import { MantineProvider } from "@mantine/core";
-import { Notifications } from "@mantine/notifications";
-import { connectorsForWallets, lightTheme, RainbowKitProvider } 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 { createConfig, http, WagmiProvider } from "wagmi";
-
-import "@rainbow-me/rainbowkit/styles.css";
-import { defineChain } from "viem";
-import { sei, seiTestnet } from "viem/chains";
-
-const seiDevnet = defineChain({
-	id: 713715,
-	name: "Sei Devnet",
-	nativeCurrency: { name: "Sei", symbol: "SEI", decimals: 18 },
-	rpcUrls: {
-		default: {
-			http: ["https://evm-rpc-arctic-1.sei-apis.com"],
-		},
-	},
-	blockExplorers: {
-		default: {
-			name: "Seitrace",
-			url: "https://seitrace.com",
-		},
-	},
-	testnet: true,
-});
-
-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/templates/next-template/src/components/shell/index.ts

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

package/templates/next-template/src/components/shell/shell.tsx

@@ -1,88 +0,0 @@
-"use client";
-
-import { ActionIcon, AppShell, Container, Group } from "@mantine/core";
-import { ConnectButton } from "@rainbow-me/rainbowkit";
-import { IconBook, IconCode, IconLogout } from "@tabler/icons-react";
-import Image from "next/image";
-import Link from "next/link";
-import type { PropsWithChildren } from "react";
-import { useAccount, useDisconnect } from "wagmi";
-
-export default function Shell({ children }: PropsWithChildren) {
-	const { address, isConnected } = useAccount();
-	const { disconnect } = useDisconnect();
-
-	return (
-		<AppShell header={{ height: 64 }} padding="md">
-			<AppShell.Header>
-				<Container size="xl" h="100%">
-					<Group justify="space-between" align="center" h="100%">
-						<Link href="/" aria-label="Sei">
-							<Image src="https://cdn.sei.io/assets/sei-icon.svg" alt="Sei" width={28} height={28} style={{ display: "block" }} />
-						</Link>
-						<Group align="center" gap="md">
-							<ActionIcon
-								component={Link}
-								href="/resources"
-								variant="light"
-								c="gray"
-								size="lg"
-								radius="md"
-								aria-label="View Resources"
-								style={{
-									transition: "all 0.2s ease",
-									"&:hover": {
-										transform: "translateY(-1px)",
-										boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
-									},
-								}}
-							>
-								<IconBook size={18} />
-							</ActionIcon>
-							<ActionIcon
-								component={Link}
-								href="/development"
-								variant="light"
-								c="gray"
-								size="lg"
-								radius="md"
-								aria-label="View Development Guide"
-								style={{
-									transition: "all 0.2s ease",
-									"&:hover": {
-										transform: "translateY(-1px)",
-										boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
-									},
-								}}
-							>
-								<IconCode size={18} />
-							</ActionIcon>
-							{isConnected && address ? (
-								<ActionIcon
-									variant="light"
-									c="red"
-									size="lg"
-									radius="md"
-									onClick={() => disconnect()}
-									aria-label="Disconnect Wallet"
-									style={{
-										transition: "all 0.2s ease",
-										"&:hover": {
-											transform: "translateY(-1px)",
-											boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
-										},
-									}}
-								>
-									<IconLogout size={18} />
-								</ActionIcon>
-							) : (
-								<ConnectButton showBalance={{ smallScreen: false, largeScreen: true }} />
-							)}
-						</Group>
-					</Group>
-				</Container>
-			</AppShell.Header>
-			<AppShell.Main>{children}</AppShell.Main>
-		</AppShell>
-	);
-}

package/templates/next-template/tailwind.config.js

@@ -1,5 +0,0 @@
-// Tailwind v4 uses CSS-first configuration.
-// Custom theme values are defined in src/app/globals.css via @theme.
-// This file is kept as an empty config for compatibility.
-/** @type {import('tailwindcss').Config} */
-module.exports = {};

package/templates/next-template/tsconfig.json

@@ -1,27 +0,0 @@
-{
-	"compilerOptions": {
-		"lib": ["dom", "dom.iterable", "esnext"],
-		"allowJs": true,
-		"skipLibCheck": true,
-		"strict": true,
-		"noEmit": true,
-		"esModuleInterop": true,
-		"module": "esnext",
-		"moduleResolution": "bundler",
-		"resolveJsonModule": true,
-		"isolatedModules": true,
-		"jsx": "preserve",
-		"incremental": true,
-		"plugins": [
-			{
-				"name": "next"
-			}
-		],
-		"paths": {
-			"@/*": ["./src/*"]
-		},
-		"target": "ES2017"
-	},
-	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-	"exclude": ["node_modules"]
-}

package/tsconfig.json

@@ -1,19 +0,0 @@
-{
-	"extends": "../../tsconfig.base.json",
-	"exclude": ["node_modules", "dist", "test"],
-	"compilerOptions": {
-		"outDir": "./dist",
-		"target": "ES2020",
-		"useDefineForClassFields": true,
-		"lib": ["ES2020", "DOM", "DOM.Iterable"],
-		"module": "ESNext",
-		"skipLibCheck": true,
-		"isolatedModules": true,
-		"jsx": "react-jsx",
-		"strict": true,
-		"noUnusedLocals": true,
-		"noUnusedParameters": true,
-		"noFallthroughCasesInSwitch": true
-	},
-	"include": ["src"]
-}