@sei-js/create-sei 0.0.2 → 0.0.4

package/dist/templates/vite-template/src/index.css

@@ -0,0 +1,183 @@
+/*
+  1. Use a more-intuitive box-sizing model.
+*/
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+/*
+  2. Remove default margin
+*/
+* {
+	margin: 0;
+}
+/*
+  Typographic tweaks!
+  3. Add accessible line-height
+  4. Improve text rendering
+*/
+body {
+	line-height: 1.5;
+	-webkit-font-smoothing: antialiased;
+}
+/*
+  5. Improve media defaults
+*/
+img,
+picture,
+video,
+canvas,
+svg {
+	display: block;
+	max-width: 100%;
+}
+/*
+  6. Remove built-in form typography styles
+*/
+input,
+button,
+textarea,
+select {
+	font: inherit;
+}
+/*
+  7. Avoid text overflows
+*/
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	overflow-wrap: break-word;
+	line-height: 1;
+}
+/*
+  8. Create a root stacking context
+*/
+#root,
+#__next {
+	isolation: isolate;
+}
+
+:root {
+	font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+	line-height: 1.5;
+	font-weight: 400;
+
+	color-scheme: light dark;
+	color: #000;
+	background: var(--background);
+
+	font-synthesis: none;
+	text-rendering: optimizeLegibility;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+
+	--primary-color: #9f1239;
+	--primary-color-hover: #7f0a2e;
+	--background: linear-gradient(180deg, #f5f5f4 0%, #fff 100%);
+	--border: #d6d3d1;
+	--card: #fff;
+	--card-foreground: #242424;
+}
+
+a {
+	font-weight: 500;
+	color: var(--primary-color);
+	text-decoration: inherit;
+}
+a:hover {
+	color: var(--primary-color-hover);
+}
+
+body {
+	margin: 0;
+	padding: 0;
+}
+
+h1 {
+	font-size: 3.2em;
+	line-height: 1;
+}
+code {
+	font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
+	display: inline-flex;
+	border-radius: 4px;
+	padding: 0.1rem 0.4rem;
+	background-color: #d7cccc;
+	color: var(--card-foreground);
+}
+
+button {
+	border-radius: 4rem;
+	border: 1px solid transparent;
+	padding: 0.6em 1.2em;
+	font-size: 1em;
+	font-weight: 500;
+	font-family: inherit;
+	background-color: #cec9c1;
+	cursor: pointer;
+	transition: all 0.25s ease;
+	color: black;
+}
+button:hover {
+	background-color: #b5afa7;
+}
+
+button:disabled {
+	filter: grayscale(1) opacity(0.5);
+	color: rgb(56, 55, 55);
+	pointer-events: none;
+}
+
+button.primary {
+	background-color: var(--primary-color);
+}
+button.outline {
+	background-color: transparent;
+	border: 1px solid var(--border);
+}
+
+button.primary:hover {
+	background-color: var(--primary-color-hover);
+}
+
+button.secondary {
+	background-color: #000;
+	color: black;
+}
+
+button.secondary:hover {
+	background-color: #2b2b2b;
+}
+
+button:active {
+	transform: translateY(1px);
+}
+
+button.small {
+	padding: 0.4em 0.8em;
+	font-size: 0.8em;
+}
+
+button:focus-visible {
+	outline: 4px auto -webkit-focus-ring-color;
+	outline-offset: 4px;
+}
+
+.header {
+	width: 100%;
+	height: 4rem;
+	padding: 0 1%;
+	display: flex;
+	align-items: center;
+	justify-content: right;
+	background-color: transparent;
+	border-bottom: 1px solid var(--border);
+	position: sticky;
+	top: 0;
+	background: #f5f5f4;
+}

package/dist/templates/vite-template/src/main.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.tsx';
+import Web3Provider from './components/Web3Provider.tsx';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+	<React.StrictMode>
+		<Web3Provider>
+			<App />
+		</Web3Provider>
+	</React.StrictMode>
+);

package/dist/templates/vite-template/tsconfig.app.json

@@ -0,0 +1,25 @@
+{
+	"compilerOptions": {
+		"composite": true,
+		"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+		"target": "ES2020",
+		"useDefineForClassFields": true,
+		"lib": ["ES2020", "DOM", "DOM.Iterable"],
+		"module": "ESNext",
+		"skipLibCheck": true,
+
+		"moduleResolution": "bundler",
+		"allowImportingTsExtensions": true,
+		"resolveJsonModule": true,
+		"isolatedModules": true,
+		"moduleDetection": "force",
+		"noEmit": true,
+		"jsx": "react-jsx",
+
+		"strict": true,
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"noFallthroughCasesInSwitch": true
+	},
+	"include": ["src"]
+}

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

@@ -0,0 +1,11 @@
+{
+	"files": [],
+	"references": [
+		{
+			"path": "./tsconfig.app.json"
+		},
+		{
+			"path": "./tsconfig.node.json"
+		}
+	]
+}

package/dist/templates/vite-template/tsconfig.node.json

@@ -0,0 +1,14 @@
+{
+	"compilerOptions": {
+		"composite": true,
+		"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+		"skipLibCheck": true,
+		"module": "ESNext",
+		"moduleResolution": "bundler",
+		"allowSyntheticDefaultImports": true,
+		"allowImportingTsExtensions": true,
+		"strict": true,
+		"noEmit": true
+	},
+	"include": ["vite.config.ts"]
+}

package/dist/templates/vite-template/vite.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+	plugins: [react()],
+	optimizeDeps: {
+		exclude: ['js-big-decimal']
+	}
+});

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sei-js/create-sei",
-	"version": "0.0.2",
+	"version": "0.0.4",
 	"module": "dist/main.js",
 	"type": "module",
 	"bin": "./dist/main.js",

package/src/main.ts

@@ -1,11 +1,11 @@
 #!/usr/bin/env node
-import inquirer from 'inquirer';
 import boxen from 'boxen';
+import inquirer from 'inquirer';
 
-import path from 'path';
-import fs from 'fs';
-import { fileURLToPath } from 'url';
-import { dirname } from 'path';
+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);
@@ -23,32 +23,20 @@ const printWelcomeMessage = () => {
 			borderColor: '#932C23'
 		})
 	);
-}
-
+};
 
 enum FrontendScaffolding {
 	Vite = 'vite',
 	Next = 'next'
 }
 
-export enum RPCIntegrationType {
-	EVM = 'evm',
-	CosmJS = 'cosmos'
-}
-
-export enum EVMLibrary {
-	Wagmi = 'wagmi'
-}
-
 interface WizardOptions {
 	name?: string;
 	framework?: FrontendScaffolding;
-	ecosystem?: RPCIntegrationType;
-	library?: EVMLibrary;
 }
 
 const promptFramework = async () => {
-	const {appFramework} = await inquirer.prompt([
+	const { appFramework } = await inquirer.prompt([
 		{
 			type: 'list',
 			name: 'appFramework',
@@ -58,48 +46,23 @@ const promptFramework = async () => {
 	]);
 
 	return appFramework;
-}
-
-const promptRpcIntegrations = async () => {
-	const {rpcIntegrationType} = await inquirer.prompt([
-		{
-			type: 'list',
-			name: 'rpcIntegrationType',
-			message: 'Select the wallet connection type you want to include:',
-			choices: Object.values(RPCIntegrationType)
-		}
-	]);
-
-	return rpcIntegrationType;
-};
-
-const promptEVMLibrary = async () => {
-	const {evmLibrary} = await inquirer.prompt([
-		{
-			type: 'list',
-			name: 'evmLibrary',
-			message: 'Choose your preferred EVM library:',
-			choices: Object.values(EVMLibrary)
-		}
-	]);
-
-	return evmLibrary;
 };
 
 function isValidDirectoryName(dirName) {
-	const illegalRe = /[<>:"/\\|?*\x00-\x1F]/g;
+	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;
+		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 false;
 	}
-  
+
 	return true;
 }
 
@@ -121,37 +84,20 @@ const validateOptions = (options: WizardOptions): boolean => {
 		}
 	}
 
-	if (options.ecosystem) {
-		const validEcosystems = Object.values(RPCIntegrationType);
-		if (!validEcosystems.includes(options.ecosystem)) {
-			console.log(`Invalid Ecosystem '${options.ecosystem}' provided. Framework must be one of: [${validEcosystems.join(', ')}]`);
-			valid = false;
-		}
-	}
-
-	if (options.library) {
-		const validEVMLibraries = Object.values(EVMLibrary);
-		if (!validEVMLibraries.includes(options.library)) {
-			console.log(`Invalid EVM Library '${options.library}' provided. Framework must be one of: [${validEVMLibraries.join(', ')}]`);
-			valid = false;
-		}
-	}
-
 	return valid;
-}
+};
 
 async function runWizard(options: WizardOptions): Promise<void> {
 	if (!validateOptions(options)) {
 		return;
 	}
-	
+
 	printWelcomeMessage();
 
 	let dAppName = '';
 	if (options.name) {
-		dAppName = options.name
-	}
-	else {
+		dAppName = options.name;
+	} else {
 		const promptResult = await inquirer.prompt([
 			{
 				type: 'input',
@@ -163,19 +109,15 @@ async function runWizard(options: WizardOptions): Promise<void> {
 			}
 		]);
 
-		dAppName = promptResult.dAppName
-	}	
-
-	const appFramework = options.framework || await promptFramework();
-	let appConnectionType = options.ecosystem || await promptRpcIntegrations();
-	if (appConnectionType == RPCIntegrationType.EVM) {
-		appConnectionType = options.library || await promptEVMLibrary();
+		dAppName = promptResult.dAppName;
 	}
 
-	const templateName = `${appFramework}-${appConnectionType}-template`;
-	const templatePath = path.join(__dirname, 'templates', templateName)
-	const dst = path.join(process.cwd(), dAppName)
-	await fs.promises.cp(templatePath,  dst, {recursive: true})
+	const appFramework = options.framework || (await promptFramework());
+
+	const templateName = `${appFramework}-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`);
@@ -184,10 +126,8 @@ async function runWizard(options: WizardOptions): Promise<void> {
 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('-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('-e, --ecosystem <ecosystem>', `Specify the ecosystem to use: [${Object.values(RPCIntegrationType).join(', ')}]`)
-	.option('-l, --library <library>', `Specify the EVM library to use: [${Object.values(EVMLibrary).join(', ')}]. Only used if ecosystem chosen is 'EVM'`)
 	.action(async (options: WizardOptions) => {
 		try {
 			await runWizard(options);
@@ -197,4 +137,3 @@ program
 	});
 
 program.parse(process.argv);
-

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

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

package/templates/next-template/package.json

@@ -0,0 +1,30 @@
+{
+	"name": "template-next-sei-app",
+	"version": "0.1.0",
+	"private": true,
+	"scripts": {
+		"dev": "next dev",
+		"build": "next build",
+		"start": "next start",
+		"lint": "next lint"
+	},
+	"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"
+	},
+	"devDependencies": {
+		"@types/node": "^20",
+		"@types/react": "^18",
+		"@types/react-dom": "^18",
+		"eslint-config-next": "14.2.4",
+		"typescript": "^5"
+	}
+}