@sei-js/create-sei 0.0.4 → 1.0.0

package/.rsyncignore

@@ -0,0 +1,13 @@
+node_modules/
+.next/
+dist/
+build/
+.yarn/
+yarn.lock
+package-lock.json
+.git/
+.DS_Store
+*.log
+coverage/
+.nyc_output/
+.cache/

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @sei-js/create-sei-app
 
+## 1.0.0
+
+### Major Changes
+
+- 92fd8fd: Updated default template and added extensions
+
 ## 0.0.4
 
 ### Patch Changes

package/dist/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/dist/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/dist/main.js

@@ -18,22 +18,6 @@ const printWelcomeMessage = () => {
         borderColor: '#932C23'
     }));
 };
-var FrontendScaffolding;
-(function (FrontendScaffolding) {
-    FrontendScaffolding["Vite"] = "vite";
-    FrontendScaffolding["Next"] = "next";
-})(FrontendScaffolding || (FrontendScaffolding = {}));
-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;
@@ -56,15 +40,26 @@ const validateOptions = (options) => {
             valid = false;
         }
     }
-    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() {
+    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) {
     if (!validateOptions(options)) {
         return;
@@ -87,19 +82,32 @@ async function runWizard(options) {
         ]);
         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) => {
     try {
         await runWizard(options);
@@ -108,4 +116,15 @@ program
         console.error('An error occurred:', error);
     }
 });
+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/dist/main.test.js

@@ -0,0 +1,34 @@
+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/dist/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/dist/templates/next-template/.nvmrc

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

package/dist/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/dist/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.

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

@@ -1,30 +1,44 @@
 {
-	"name": "template-next-sei-app",
+	"name": "template-next-create-sei-app",
 	"version": "0.1.0",
 	"private": true,
 	"scripts": {
 		"dev": "next dev",
 		"build": "next build",
 		"start": "next start",
-		"lint": "next lint"
+		"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": {
-		"@rainbow-me/rainbowkit": "^2.1.2",
-		"@sei-js/evm": "^1.2.0",
-		"@tanstack/react-query": "^5.45.1",
-		"encoding": "^0.1.13",
-		"next": "14.2.4",
-		"pino-pretty": "^11.2.1",
-		"react": "^18",
-		"react-dom": "^18",
-		"viem": "^2.15.1",
-		"wagmi": "^2.10.2"
+		"@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": {
-		"@types/node": "^20",
-		"@types/react": "^18",
-		"@types/react-dom": "^18",
-		"eslint-config-next": "14.2.4",
-		"typescript": "^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/dist/templates/next-template/postcss.config.mjs

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