@sei-js/create-sei 0.0.4 → 1.0.0

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

@@ -0,0 +1,87 @@
+'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';
+
+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">
+							<img src="https://cdn.sei.io/assets/sei-icon.svg" alt="Sei" style={{ height: 28, 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/dist/templates/next-template/tailwind.config.js

@@ -0,0 +1,17 @@
+/** @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: [],
+}

package/dist/templates/next-template/tsconfig.json

@@ -19,7 +19,8 @@
 		],
 		"paths": {
 			"@/*": ["./src/*"]
-		}
+		},
+		"target": "ES2017"
 	},
 	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
 	"exclude": ["node_modules"]

package/extensions/precompiles/package.json

@@ -0,0 +1,44 @@
+{
+	"name": "template-next-create-sei-app-precompiles",
+	"version": "0.1.0",
+	"private": true,
+	"scripts": {
+		"dev": "next dev",
+		"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",
+		"react": "^19.1.1",
+		"react-dom": "^19.1.1",
+		"viem": "^2.34.0",
+		"wagmi": "^2.16.4"
+	},
+	"devDependencies": {
+		"@types/node": "^24.3.0",
+		"@types/react": "^19.1.10",
+		"@types/react-dom": "^19.1.7",
+		"autoprefixer": "^10.4.21",
+		"postcss": "^8.4.45",
+		"tailwindcss": "^4.1.12",
+		"typescript": "^5.9.2"
+	}
+}

package/extensions/precompiles/src/components/default/index.tsx

@@ -0,0 +1,201 @@
+'use client';
+
+import React from 'react';
+import { CodeHighlight } from '@mantine/code-highlight';
+import { ActionIcon, Badge, Button, Card, Collapse, Container, Flex, Group, Paper, Stack, Text, ThemeIcon, Title } from '@mantine/core';
+import { notifications } from '@mantine/notifications';
+import { BANK_PRECOMPILE_ADDRESS, VIEM_BANK_PRECOMPILE_ABI } from '@sei-js/precompiles';
+import { IconBulb, IconChevronDown, IconChevronUp, IconCopy, IconDatabase } from '@tabler/icons-react';
+import { useState } from 'react';
+import { type ReadContractParameters, formatEther } from 'viem';
+import { useAccount, usePublicClient } from 'wagmi';
+
+function Examples() {
+	const [supply, setSupply] = useState('');
+	const [showCode, setShowCode] = useState(false);
+
+	const publicClient = usePublicClient();
+	const { address } = useAccount();
+
+	const formatLargeSeiNumber = (num: string, decimals: number): string => {
+		if (num.length > 10) {
+			return `${(Number(num) / 1000000 / 1000000000).toLocaleString(navigator.language, {
+				minimumFractionDigits: decimals,
+				maximumFractionDigits: decimals
+			})} B`;
+		}
+		return (Number(num) / 1000000).toLocaleString(navigator.language);
+	};
+
+	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 getSeiSupply = async () => {
+		if (!publicClient) {
+			return undefined;
+		}
+
+		const readContractParams: ReadContractParameters = {
+			abi: VIEM_BANK_PRECOMPILE_ABI,
+			address: BANK_PRECOMPILE_ADDRESS,
+			functionName: 'supply',
+			args: ['usei']
+		};
+
+		try {
+			const result = await publicClient.readContract(readContractParams);
+			setSupply((result as bigint).toString());
+		} catch (error) {
+			console.error('Error fetching supply:', error);
+			notifications.show({
+				title: 'Error',
+				message: 'Failed to fetch SEI supply',
+				color: 'red'
+			});
+		}
+	};
+
+	const codeExample = `// Sei Precompile Example - Bank Precompile
+import { BANK_PRECOMPILE_ADDRESS, VIEM_BANK_PRECOMPILE_ABI } from '@sei-js/precompiles';
+import { usePublicClient } from 'wagmi';
+
+const publicClient = usePublicClient();
+
+const getSeiSupply = async () => {
+  const readContractParams = {
+    abi: VIEM_BANK_PRECOMPILE_ABI,
+    address: BANK_PRECOMPILE_ADDRESS,
+    functionName: 'supply',
+    args: ['usei'],
+  };
+
+  const result = await publicClient?.readContract(readContractParams);
+  return (result as bigint).toString();
+};`;
+
+	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="orange" variant="light">
+							<IconBulb size={24} />
+						</ThemeIcon>
+						<div>
+							<Title order={1} fw={700} c="gray.9">
+								Sei Precompiles
+							</Title>
+							<Text size="lg" c="gray.6" mt={4}>
+								Access native Sei blockchain functionality through EVM precompiles
+							</Text>
+						</div>
+					</Group>
+				</div>
+
+				{/* Precompile Example Card */}
+				<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="orange" variant="light">
+										<IconDatabase size={20} />
+									</ThemeIcon>
+									<Title order={3} fw={600} c="gray.9">
+										Bank Precompile
+									</Title>
+								</Group>
+								<Text size="sm" c="gray.6">
+									Query total SEI supply using Sei's native{' '}
+									<Text component="a" href="https://www.docs.sei.io/dev-interoperability/precompiles/bank" target="_blank" c="orange" td="underline">
+										Bank precompile
+									</Text>
+								</Text>
+							</Stack>
+							<Badge color="orange" variant="light" size="md" radius="md">
+								precompiles
+							</Badge>
+						</Flex>
+
+						<Paper p="md" radius="md" withBorder bg="gray.0">
+							<Text size="xs" fw={500} c="gray.6">
+								Total Supply
+							</Text>
+							<Flex justify="space-between" align="center">
+								<Flex align="baseline" gap="xs">
+									{supply ? (
+										<>
+											<Text fw={700} size="xl" c="gray.9" ff="monospace">
+												{formatLargeSeiNumber(supply, 2)}
+											</Text>
+											<Text size="sm" c="gray.6" fw={500}>
+												SEI
+											</Text>
+										</>
+									) : (
+										<Paper px="sm" py={4} bg="white" radius="md" withBorder>
+											<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={getSeiSupply} size="sm" radius="md" variant="light" color="orange" leftSection={<IconDatabase size={14} />}>
+									{supply ? 'Refresh' : 'Query Supply'}
+								</Button>
+							</Flex>
+						</Paper>
+
+						<Group justify="space-between" align="center" mt="sm">
+							<Button
+								variant="subtle"
+								color="gray"
+								size="sm"
+								radius="md"
+								leftSection={showCode ? <IconChevronUp size={14} /> : <IconChevronDown size={14} />}
+								onClick={() => setShowCode(!showCode)}
+							>
+								{showCode ? 'Hide' : 'View'} Implementation
+							</Button>
+							{showCode && (
+								<ActionIcon variant="subtle" color="gray" size="sm" radius="md" onClick={() => copyToClipboard(codeExample)}>
+									<IconCopy size={14} />
+								</ActionIcon>
+							)}
+						</Group>
+
+						<Collapse in={showCode}>
+							<Paper mt="sm" p="md" bg="gray.0" radius="md" withBorder>
+								<CodeHighlight code={codeExample} language="tsx" withCopyButton={false} expandCodeLabel="" collapseCodeLabel="" />
+							</Paper>
+						</Collapse>
+					</Stack>
+				</Card>
+			</Stack>
+		</Container>
+	);
+}
+
+export default Examples;

package/jest.config.js

@@ -0,0 +1,14 @@
+export default {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+  transform: {
+    '^.+\\.ts$': ['ts-jest', {
+      useESM: true
+    }]
+  },
+  extensionsToTreatAsEsm: ['.ts'],
+  moduleNameMapper: {
+    '^(\\.{1,2}/.*)\\.js$': '$1'
+  },
+  testPathIgnorePatterns: ['/node_modules/', '/dist/', '/templates/', '/test-smart-contract-app/']
+};

package/package.json

@@ -1,12 +1,13 @@
 {
 	"name": "@sei-js/create-sei",
-	"version": "0.0.4",
+	"version": "1.0.0",
 	"module": "dist/main.js",
 	"type": "module",
 	"bin": "./dist/main.js",
 	"scripts": {
-		"build": "tsc && cp -r ./templates ./dist/templates",
-		"dev": "node --loader ts-node/esm src/main.ts"
+		"build": "rm -rf dist && tsc && chmod +x dist/main.js && rsync -av --exclude-from=.rsyncignore ./templates/ ./dist/templates/ && rsync -av --exclude-from=.rsyncignore ./extensions/ ./dist/extensions/",
+		"dev": "node --loader ts-node/esm src/main.ts",
+		"test": "jest"
 	},
 	"dependencies": {
 		"boxen": "^7.1.1",
@@ -14,7 +15,12 @@
 		"inquirer": "^9.2.15"
 	},
 	"devDependencies": {
-		"@types/boxen": "^3.0.1",
-		"@types/inquirer": "^9.0.7"
+		"@jest/globals": "^29.7.0",
+		"@types/jest": "^29.5.12",
+		"@types/node": "^20.14.10",
+		"jest": "^29.7.0",
+		"ts-jest": "^29.1.2",
+		"ts-node": "^10.9.2",
+		"typescript": "^5.5.3"
 	}
 }

package/src/main.test.ts

@@ -0,0 +1,38 @@
+import { describe, test, expect, beforeEach, afterEach } from '@jest/globals';
+import { promises as fs } from 'node:fs';
+import path from 'node:path';
+
+describe('Extension System', () => {
+	const testDir = path.join(process.cwd(), 'test-output');
+	const extensionsDir = path.join(process.cwd(), 'extensions');
+
+	beforeEach(async () => {
+		// Clean up test directory
+		try {
+			await fs.rm(testDir, { recursive: true, force: true });
+		} catch (e) {
+			// Directory might not exist
+		}
+		await fs.mkdir(testDir, { recursive: true });
+	});
+
+	afterEach(async () => {
+		// Clean up test directory
+		try {
+			await fs.rm(testDir, { recursive: true, force: true });
+		} catch (e) {
+			// Directory might not exist
+		}
+	});
+
+	test('should list available extensions', async () => {
+		const extensionExists = await fs.access(path.join(extensionsDir, 'precompiles'))
+			.then(() => true)
+			.catch(() => false);
+
+		expect(extensionExists).toBe(true);
+
+		const extensionFiles = await fs.readdir(extensionsDir);
+		expect(extensionFiles).toContain('precompiles');
+	});
+});

package/src/main.ts

@@ -25,29 +25,11 @@ const printWelcomeMessage = () => {
 	);
 };
 
-enum FrontendScaffolding {
-	Vite = 'vite',
-	Next = 'next'
-}
-
 interface WizardOptions {
 	name?: string;
-	framework?: FrontendScaffolding;
+	extension?: string;
 }
 
-const promptFramework = async () => {
-	const { appFramework } = await inquirer.prompt([
-		{
-			type: 'list',
-			name: 'appFramework',
-			message: 'Select an app framework to use?',
-			choices: Object.values(FrontendScaffolding)
-		}
-	]);
-
-	return appFramework;
-};
-
 function isValidDirectoryName(dirName) {
 	const illegalRe = /[<>:"/\\|?*]/g;
 	const windowsReservedRe = /^(con|prn|aux|nul|com[1-9]|lpt[1-9])$/i;
@@ -76,17 +58,30 @@ const validateOptions = (options: WizardOptions): boolean => {
 		}
 	}
 
-	if (options.framework) {
-		const validFrameworks = Object.values(FrontendScaffolding);
-		if (!validFrameworks.includes(options.framework)) {
-			console.log(`Invalid Framework '${options.framework}' provided. Framework must be one of: [${validFrameworks.join(', ')}]`);
-			valid = false;
-		}
-	}
-
 	return valid;
 };
 
+async function listExtensions(): Promise<void> {
+	const extensionsPath = path.join(__dirname, 'extensions');
+
+	try {
+		const extensions = await fs.promises.readdir(extensionsPath, { withFileTypes: true });
+		const extensionDirs = extensions.filter((dirent) => dirent.isDirectory()).map((dirent) => dirent.name);
+
+		if (extensionDirs.length === 0) {
+			console.log('No extensions available.');
+			return;
+		}
+
+		console.log('Available extensions:');
+		for (const ext of extensionDirs) {
+			console.log(`  - ${ext}`);
+		}
+	} catch (error) {
+		console.log('No extensions directory found.');
+	}
+}
+
 async function runWizard(options: WizardOptions): Promise<void> {
 	if (!validateOptions(options)) {
 		return;
@@ -112,22 +107,36 @@ async function runWizard(options: WizardOptions): Promise<void> {
 		dAppName = promptResult.dAppName;
 	}
 
-	const appFramework = options.framework || (await promptFramework());
-
-	const templateName = `${appFramework}-template`;
+	// Copy base template
+	const templateName = 'next-template';
 	const templatePath = path.join(__dirname, 'templates', templateName);
 	const dst = path.join(process.cwd(), dAppName);
 	await fs.promises.cp(templatePath, dst, { recursive: true });
 
-	console.log(`Project setup complete! Using template ${templateName}\n`);
-	console.log(`To start your app, run: \n > cd ${dAppName} \n > yarn \n > yarn dev\n`);
+	// Apply extension if specified
+	if (options.extension) {
+		const extensionPath = path.join(__dirname, 'extensions', options.extension);
+
+		try {
+			await fs.promises.access(extensionPath);
+			await fs.promises.cp(extensionPath, dst, { recursive: true });
+			console.log(`Applied extension: ${options.extension}`);
+		} catch (error) {
+			console.log(`Warning: Extension '${options.extension}' not found. Continuing with base template.`);
+		}
+	}
+
+	const extensionText = options.extension ? ` with ${options.extension} extension` : '';
+	console.log(`Project setup complete! Using template ${templateName}${extensionText}\n`);
+	console.log(`To start your app, run: \n > cd ${dAppName} \n > pnpm \n > pnpm dev\n`);
 }
 
 program
 	.command('app')
 	.description('Create a new SEI dApp')
-	.option('-n, --name <name>', 'Specify the name of your dApp. Name must be a valid package name.')
-	.option('-f, --framework <framework>', `Specify the app framework to use: [${Object.values(FrontendScaffolding).join(', ')}]`)
+	.option('--name <name>', 'Specify the name of your dApp. Name must be a valid package name.')
+	.option('--extension <extension>', 'Specify an extension to apply to the base template')
+
 	.action(async (options: WizardOptions) => {
 		try {
 			await runWizard(options);
@@ -136,4 +145,15 @@ program
 		}
 	});
 
+program
+	.command('list-extensions')
+	.description('List all available extensions')
+	.action(async () => {
+		try {
+			await listExtensions();
+		} catch (error) {
+			console.error('An error occurred:', error);
+		}
+	});
+
 program.parse(process.argv);

package/templates/next-template/.env.example

@@ -0,0 +1,8 @@
+# Chain configuration
+# Options: mainnet, testnet, devnet
+# Defaults to testnet (atlantic-2) if not set
+NEXT_PUBLIC_CHAIN=testnet
+
+# WalletConnect Project ID (optional)
+# Get your project ID from https://cloud.walletconnect.com
+NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=your-project-id

package/templates/next-template/.nvmrc

@@ -0,0 +1 @@
+v20

package/templates/next-template/biome.json

@@ -0,0 +1,48 @@
+{
+	"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+	"organizeImports": {
+		"enabled": true
+	},
+	"linter": {
+		"enabled": true,
+		"rules": {
+			"recommended": true,
+			"style": {
+				"noNonNullAssertion": "off"
+			},
+			"suspicious": {
+				"noExplicitAny": "off"
+			}
+		}
+	},
+	"formatter": {
+		"enabled": true,
+		"formatWithErrors": false,
+		"indentStyle": "tab",
+		"lineEnding": "lf",
+		"lineWidth": 160,
+		"attributePosition": "auto"
+	},
+	"javascript": {
+		"formatter": {
+			"jsxQuoteStyle": "double",
+			"quoteProperties": "asNeeded",
+			"trailingCommas": "es5",
+			"semicolons": "always",
+			"arrowParentheses": "always",
+			"bracketSpacing": true,
+			"bracketSameLine": false,
+			"quoteStyle": "single",
+			"attributePosition": "auto"
+		}
+	},
+	"json": {
+		"formatter": {
+			"trailingCommas": "none"
+		}
+	},
+	"files": {
+		"include": ["src/**/*.ts", "src/**/*.tsx", "*.json", "*.md"],
+		"ignore": ["node_modules/**", "dist/**", ".next/**", ".yarn/**"]
+	}
+}

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

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