@sei-js/create-sei 1.0.1 → 2.0.0

package/templates/next-template/README.md

@@ -1,54 +0,0 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
-
-## Getting Started
-
-Install dependencies by running
-```bash
-bun install
-```
-
-Then, run the development server:
-
-```bash
-bun run dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `src/app/page.tsx`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
-
-## Repository Basics
-This repository includes basic features that allow you to connect to a wallet and use the wallet to interact with the chain.
-
-Additionally, basic examples and links to documentation are provided on the example homepage in `src/app/components/Homepage`.
-
-This repository uses helper methods from [@sei-js/evm/viem](https://github.com/sei-protocol/sei-js/tree/main/packages/evm/src/viem)
-
-### Web3 Provider
-This component is a Sei specific wrapper around a Wagmi Provider that should wrap the application. Wrapping the application in this provider will enable it to access hooks in Wagmi. These hooks are enable connection to a wallet and interaction with the chain.
-
-In addition, this app uses [RainbowKit](https://www.rainbowkit.com/docs/wallet-button) which provides wallet connect functionality out of the box.
-
-To change the list of supported wallets, as well as connection configurations you can modify the `src/app/components/Web3Provider.tsx` component.
-
-### Changing the Chain
-This application connects to the arctic-1 devnet by default, using chain configurations uploaded to viem.
-
-To change the chain the app connects to, edit the `selectedChain` variable in the `chain.ts` file in `src/app/constants`
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

package/templates/next-template/biome.json

@@ -1,56 +0,0 @@
-{
-	"$schema": "https://biomejs.dev/schemas/2.4.5/schema.json",
-	"root": true,
-	"assist": {
-		"actions": {
-			"source": {
-				"organizeImports": "on"
-			}
-		}
-	},
-	"linter": {
-		"enabled": true,
-		"rules": {
-			"recommended": true,
-			"style": {
-				"noNonNullAssertion": "off"
-			},
-			"suspicious": {
-				"noExplicitAny": "off"
-			}
-		}
-	},
-	"formatter": {
-		"enabled": true,
-		"formatWithErrors": false,
-		"indentStyle": "tab",
-		"lineEnding": "lf",
-		"lineWidth": 160
-	},
-	"javascript": {
-		"formatter": {
-			"jsxQuoteStyle": "double",
-			"quoteProperties": "asNeeded",
-			"trailingCommas": "es5",
-			"semicolons": "always",
-			"arrowParentheses": "always",
-			"bracketSpacing": true,
-			"bracketSameLine": false,
-			"quoteStyle": "double"
-		}
-	},
-	"css": {
-		"parser": {
-			"tailwindDirectives": true
-		}
-	},
-	"json": {
-		"formatter": {
-			"trailingCommas": "none"
-		}
-	},
-	"files": {
-		"includes": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.css", "*.json", "*.md"],
-		"ignore": ["node_modules/**", "dist/**", ".next/**", ".yarn/**"]
-	}
-}

package/templates/next-template/next-env.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

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

@@ -1,17 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-	eslint: {
-		// Linting is handled by Biome — skip ESLint during builds.
-		ignoreDuringBuilds: true,
-	},
-	images: {
-		remotePatterns: [
-			{
-				protocol: "https",
-				hostname: "cdn.sei.io",
-			},
-		],
-	},
-};
-
-export default nextConfig;

package/templates/next-template/package.json

@@ -1,46 +0,0 @@
-{
-	"name": "template-next-create-sei-app",
-	"version": "0.1.0",
-	"private": true,
-	"scripts": {
-		"dev": "next dev",
-		"prebuild": "biome check .",
-		"build": "next build",
-		"start": "next start",
-		"lint": "biome lint .",
-		"lint:fix": "biome lint --write .",
-		"format": "biome format --write .",
-		"format:check": "biome format .",
-		"check": "biome check .",
-		"check:fix": "biome check --write .",
-		"deploy": "vercel --prod"
-	},
-	"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"
-	},
-	"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"
-	}
-}

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

@@ -1,6 +0,0 @@
-const config = {
-  plugins: {
-    "@tailwindcss/postcss": {},
-  },
-};
-export default config;

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

@@ -1,260 +0,0 @@
-'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/templates/next-template/src/app/globals.css

@@ -1,16 +0,0 @@
-@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/templates/next-template/src/app/layout.tsx

@@ -1,30 +0,0 @@
-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',
-};
-
-export default function RootLayout({ children }: Readonly<{ children: ReactNode }>) {
-	return (
-		<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/templates/next-template/src/app/page.tsx

@@ -1,10 +0,0 @@
-'use client';
-
-import { Default, Landing, Shell } from '@/components';
-import { useAccount } from 'wagmi';
-
-export default function Home() {
-	const { isConnected } = useAccount();
-
-	return <Shell>{isConnected ? <Default /> : <Landing />}</Shell>;
-}