diff --git a/.changeset/some-bags-tie.md b/.changeset/some-bags-tie.md new file mode 100644 index 000000000..0d63ff96c --- /dev/null +++ b/.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). diff --git a/packages/create-sei/.rsyncignore b/packages/create-sei/.rsyncignore index cd28cac0b..3381e3d69 100644 --- a/packages/create-sei/.rsyncignore +++ b/packages/create-sei/.rsyncignore @@ -2,8 +2,6 @@ node_modules/ .next/ dist/ build/ -.yarn/ -yarn.lock package-lock.json .git/ .DS_Store diff --git a/packages/create-sei/templates/next-template/.env.example b/packages/create-sei/templates/next-template/.env.example index 9d7541838..0f17c8953 100644 --- a/packages/create-sei/templates/next-template/.env.example +++ b/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) diff --git a/packages/create-sei/templates/next-template/.eslintrc.json b/packages/create-sei/templates/next-template/.eslintrc.json index 72cc705c1..0967ef424 100644 --- a/packages/create-sei/templates/next-template/.eslintrc.json +++ b/packages/create-sei/templates/next-template/.eslintrc.json @@ -1,3 +1 @@ -{ - "extends": "next/core-web-vitals" -} +{} diff --git a/packages/create-sei/templates/next-template/README.md b/packages/create-sei/templates/next-template/README.md index 6250e6bb8..7aeee02aa 100644 --- a/packages/create-sei/templates/next-template/README.md +++ b/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. diff --git a/packages/create-sei/templates/next-template/biome.json b/packages/create-sei/templates/next-template/biome.json index 5d9cd3074..794ef1a51 100644 --- a/packages/create-sei/templates/next-template/biome.json +++ b/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/**"] } } diff --git a/packages/create-sei/templates/next-template/next.config.mjs b/packages/create-sei/templates/next-template/next.config.mjs index 4678774e6..977e25884 100644 --- a/packages/create-sei/templates/next-template/next.config.mjs +++ b/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; diff --git a/packages/create-sei/templates/next-template/package.json b/packages/create-sei/templates/next-template/package.json index b0debf534..503df52cc 100644 --- a/packages/create-sei/templates/next-template/package.json +++ b/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", diff --git a/packages/create-sei/templates/next-template/src/app/globals.css b/packages/create-sei/templates/next-template/src/app/globals.css index 2451379f2..abdc771e8 100644 --- a/packages/create-sei/templates/next-template/src/app/globals.css +++ b/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; + } } diff --git a/packages/create-sei/templates/next-template/src/components/providers/providers.tsx b/packages/create-sei/templates/next-template/src/components/providers/providers.tsx index 5df9958bd..49c01728a 100644 --- a/packages/create-sei/templates/next-template/src/components/providers/providers.tsx +++ b/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) { - Sei + Sei @@ -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)", }, }} > diff --git a/packages/create-sei/templates/next-template/tailwind.config.js b/packages/create-sei/templates/next-template/tailwind.config.js index c75d78c51..a5f6329bc 100644 --- a/packages/create-sei/templates/next-template/tailwind.config.js +++ b/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 = {};