feat(template): modernize runtime and tooling defaults

.changeset/some-bags-tie.md

@@ -0,0 +1,10 @@
+---
+"@sei-js/create-sei": patch
+---
+
+Improve the `next-template` runtime defaults generated by `create-sei`.
+
+- Add a `prebuild` Biome check and include Biome in template dev dependencies.
+- Configure Next.js to allow Sei CDN images and skip ESLint during builds.
+- Update provider and shell setup for improved chain/image handling.
+- Align template config/docs with current defaults (`.env.example`, `README`, Biome, Tailwind v4 config).

packages/create-sei/.rsyncignore

@@ -2,8 +2,6 @@ node_modules/
 .next/
 dist/
 build/
-.yarn/
-yarn.lock
 package-lock.json
 .git/
 .DS_Store

packages/create-sei/templates/next-template/.env.example

@@ -1,6 +1,6 @@
 # Chain configuration
 # Options: mainnet, testnet, devnet
-# Defaults to testnet (atlantic-2) if not set
+# Defaults to mainnet if not set; this example overrides it to testnet
 NEXT_PUBLIC_CHAIN=testnet
 
 # WalletConnect Project ID (optional)

packages/create-sei/templates/next-template/.eslintrc.json

@@ -1,3 +1 @@
-{
-	"extends": "next/core-web-vitals"
-}
+{}

packages/create-sei/templates/next-template/README.md

@@ -4,17 +4,13 @@ This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next
 
 Install dependencies by running
 ```bash
-npm install
-#or
-yarn
+bun install
 ```
 
 Then, run the development server:
 
 ```bash
-npm run dev
-# or
-yarn dev
+bun run dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

packages/create-sei/templates/next-template/biome.json

@@ -1,7 +1,12 @@
 {
-	"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
-	"organizeImports": {
-		"enabled": true
+	"$schema": "https://biomejs.dev/schemas/2.4.5/schema.json",
+	"root": true,
+	"assist": {
+		"actions": {
+			"source": {
+				"organizeImports": "on"
+			}
+		}
 	},
 	"linter": {
 		"enabled": true,
@@ -20,8 +25,7 @@
 		"formatWithErrors": false,
 		"indentStyle": "tab",
 		"lineEnding": "lf",
-		"lineWidth": 160,
-		"attributePosition": "auto"
+		"lineWidth": 160
 	},
 	"javascript": {
 		"formatter": {
@@ -32,8 +36,12 @@
 			"arrowParentheses": "always",
 			"bracketSpacing": true,
 			"bracketSameLine": false,
-			"quoteStyle": "single",
-			"attributePosition": "auto"
+			"quoteStyle": "double"
+		}
+	},
+	"css": {
+		"parser": {
+			"tailwindDirectives": true
 		}
 	},
 	"json": {
@@ -42,7 +50,7 @@
 		}
 	},
 	"files": {
-		"include": ["src/**/*.ts", "src/**/*.tsx", "*.json", "*.md"],
+		"includes": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.css", "*.json", "*.md"],
 		"ignore": ["node_modules/**", "dist/**", ".next/**", ".yarn/**"]
 	}
 }

packages/create-sei/templates/next-template/next.config.mjs

@@ -1,4 +1,17 @@
 /** @type {import('next').NextConfig} */
-const 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;

packages/create-sei/templates/next-template/package.json

@@ -4,6 +4,7 @@
 	"private": true,
 	"scripts": {
 		"dev": "next dev",
+		"prebuild": "biome check .",
 		"build": "next build",
 		"start": "next start",
 		"lint": "biome lint .",
@@ -35,6 +36,7 @@
 		"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",

packages/create-sei/templates/next-template/src/app/globals.css

@@ -1,14 +1,16 @@
+@import "tailwindcss";
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@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;
-  }
+	html {
+		@apply h-full;
+	}
+
+	body {
+		@apply h-full bg-gray-50 text-gray-900 antialiased;
+	}
 }

packages/create-sei/templates/next-template/src/components/providers/providers.tsx

@@ -1,28 +1,47 @@
-'use client';
+"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 { 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 { sei, seiDevnet, seiTestnet } from 'viem/chains';
+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',
+			groupName: "Recommended",
 			wallets: [metaMaskWallet],
 		},
 	],
 	{
-		appName: 'Sei dApp',
-		projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID || 'your-project-id',
+		appName: "Sei dApp",
+		projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID || "your-project-id",
 	}
 );
 
@@ -33,11 +52,11 @@ interface ProvidersProps {
 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';
+		const chainName = process.env.NEXT_PUBLIC_CHAIN || "mainnet";
 		switch (chainName.toLowerCase()) {
-			case 'testnet':
+			case "testnet":
 				return seiTestnet;
-			case 'devnet':
+			case "devnet":
 				return seiDevnet;
 			default:
 				return sei;
@@ -68,14 +87,14 @@ export default function Providers({ children }: ProvidersProps) {
 					<Notifications />
 					<RainbowKitProvider
 						theme={lightTheme({
-							accentColor: '#9E1F19',
-							accentColorForeground: 'white',
-							borderRadius: 'medium',
-							fontStack: 'system',
+							accentColor: "#9E1F19",
+							accentColorForeground: "white",
+							borderRadius: "medium",
+							fontStack: "system",
 						})}
 						appInfo={{
-							appName: 'Sei dApp',
-							learnMoreUrl: 'https://docs.sei.io/learn/wallets',
+							appName: "Sei dApp",
+							learnMoreUrl: "https://docs.sei.io/learn/wallets",
 						}}
 						modalSize="compact"
 						initialChain={chain.id}

packages/create-sei/templates/next-template/src/components/shell/shell.tsx

@@ -1,11 +1,12 @@
-'use client';
+"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 Link from 'next/link';
-import type { PropsWithChildren } from 'react';
-import { useAccount, useDisconnect } from 'wagmi';
+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();
@@ -17,7 +18,7 @@ export default function Shell({ children }: PropsWithChildren) {
 				<Container size="xl" h="100%">
 					<Group justify="space-between" align="center" h="100%">
 						<Link href="/" aria-label="Sei">
-							<img src="https://cdn.sei.io/assets/sei-icon.svg" alt="Sei" style={{ height: 28, display: 'block' }} />
+							<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
@@ -29,10 +30,10 @@ export default function Shell({ children }: PropsWithChildren) {
 								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)',
+									transition: "all 0.2s ease",
+									"&:hover": {
+										transform: "translateY(-1px)",
+										boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
 									},
 								}}
 							>
@@ -47,10 +48,10 @@ export default function Shell({ children }: PropsWithChildren) {
 								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)',
+									transition: "all 0.2s ease",
+									"&:hover": {
+										transform: "translateY(-1px)",
+										boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
 									},
 								}}
 							>
@@ -65,10 +66,10 @@ export default function Shell({ children }: PropsWithChildren) {
 									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)',
+										transition: "all 0.2s ease",
+										"&:hover": {
+											transform: "translateY(-1px)",
+											boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
 										},
 									}}
 								>

packages/create-sei/templates/next-template/tailwind.config.js

@@ -1,17 +1,5 @@
+// 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 = {
-  content: [
-    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
-  ],
-  theme: {
-    extend: {
-      colors: {
-        'sei-red': '#9E1F19',
-        'sei-dark': '#1a1a1a',
-      },
-    },
-  },
-  plugins: [],
-}
+module.exports = {};