@sei-js/create-sei 1.0.0 → 2.0.0

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

@@ -1,201 +0,0 @@
-'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

@@ -1,14 +0,0 @@
-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/src/main.test.ts

@@ -1,38 +0,0 @@
-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

@@ -1,159 +0,0 @@
-#!/usr/bin/env node
-import boxen from 'boxen';
-import inquirer from 'inquirer';
-
-import fs from 'node:fs';
-import path from 'node:path';
-import { dirname } from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { Command } from 'commander';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-
-const program = new Command();
-
-// Print welcome message
-const printWelcomeMessage = () => {
-	console.log(
-		boxen('Welcome to the SEI DApp Generator!', {
-			padding: 1,
-			margin: 1,
-			borderStyle: 'double',
-			borderColor: '#932C23'
-		})
-	);
-};
-
-interface WizardOptions {
-	name?: string;
-	extension?: string;
-}
-
-function isValidDirectoryName(dirName) {
-	const illegalRe = /[<>:"/\\|?*]/g;
-	const windowsReservedRe = /^(con|prn|aux|nul|com[1-9]|lpt[1-9])$/i;
-	const trailingRe = /[. ]+$/;
-	const validNpmPackageRe = /^(?:@[a-z0-9-*~][a-z0-9-*._~]*)?[a-z0-9-~][a-z0-9-._~]*$/;
-
-	if (typeof dirName !== 'string' || dirName.length === 0) {
-		return false;
-	}
-
-	// Check for illegal characters, Windows reserved names, trailing spaces/dots
-	if (illegalRe.test(dirName) || windowsReservedRe.test(dirName) || trailingRe.test(dirName) || !validNpmPackageRe.test(dirName)) {
-		return false;
-	}
-
-	return true;
-}
-
-const validateOptions = (options: WizardOptions): boolean => {
-	let valid = true;
-
-	if (options.name) {
-		if (!isValidDirectoryName(options.name)) {
-			console.log('Invalid package name. Please use a valid npm package name.');
-			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;
-	}
-
-	printWelcomeMessage();
-
-	let dAppName = '';
-	if (options.name) {
-		dAppName = options.name;
-	} else {
-		const promptResult = await inquirer.prompt([
-			{
-				type: 'input',
-				name: 'dAppName',
-				message: 'What is your dApp (project) name?',
-				validate: (input: string) => {
-					return isValidDirectoryName(input) || 'Invalid package name. Please use a valid npm package name.';
-				}
-			}
-		]);
-
-		dAppName = promptResult.dAppName;
-	}
-
-	// 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 });
-
-	// 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('--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);
-		} catch (error) {
-			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/templates/next-template/.env.example

@@ -1,8 +0,0 @@
-# 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/.eslintrc.json

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

package/templates/next-template/.nvmrc

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

package/templates/next-template/README.md

@@ -1,58 +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
-npm install
-#or
-yarn
-```
-
-Then, run the development server:
-
-```bash
-npm run dev
-# or
-yarn 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,48 +0,0 @@
-{
-	"$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

@@ -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,4 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {};
-
-export default nextConfig;

package/templates/next-template/package.json

@@ -1,44 +0,0 @@
-{
-	"name": "template-next-create-sei-app",
-	"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",
-		"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": "^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;