@sei-js/create-sei 0.0.1 → 0.0.3

package/package.json

@@ -1,12 +1,13 @@
 {
 	"name": "@sei-js/create-sei",
-	"version": "0.0.1",
+	"version": "0.0.3",
 	"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"
+		"dev": "node --loader ts-node/esm src/main.ts",
+		"docs": "typedoc --out docs"
 	},
 	"dependencies": {
 		"boxen": "^7.1.1",

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,8 +23,7 @@ const printWelcomeMessage = () => {
 			borderColor: '#932C23'
 		})
 	);
-}
-
+};
 
 enum FrontendScaffolding {
 	Vite = 'vite',
@@ -48,7 +47,7 @@ interface WizardOptions {
 }
 
 const promptFramework = async () => {
-	const {appFramework} = await inquirer.prompt([
+	const { appFramework } = await inquirer.prompt([
 		{
 			type: 'list',
 			name: 'appFramework',
@@ -58,10 +57,10 @@ const promptFramework = async () => {
 	]);
 
 	return appFramework;
-}
+};
 
 const promptRpcIntegrations = async () => {
-	const {rpcIntegrationType} = await inquirer.prompt([
+	const { rpcIntegrationType } = await inquirer.prompt([
 		{
 			type: 'list',
 			name: 'rpcIntegrationType',
@@ -74,7 +73,7 @@ const promptRpcIntegrations = async () => {
 };
 
 const promptEVMLibrary = async () => {
-	const {evmLibrary} = await inquirer.prompt([
+	const { evmLibrary } = await inquirer.prompt([
 		{
 			type: 'list',
 			name: 'evmLibrary',
@@ -87,19 +86,20 @@ const promptEVMLibrary = async () => {
 };
 
 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;
 }
 
@@ -138,20 +138,19 @@ const validateOptions = (options: WizardOptions): boolean => {
 	}
 
 	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 +162,19 @@ async function runWizard(options: WizardOptions): Promise<void> {
 			}
 		]);
 
-		dAppName = promptResult.dAppName
-	}	
+		dAppName = promptResult.dAppName;
+	}
 
-	const appFramework = options.framework || await promptFramework();
-	let appConnectionType = options.ecosystem || await promptRpcIntegrations();
-	if (appConnectionType == RPCIntegrationType.EVM) {
-		appConnectionType = options.library || await promptEVMLibrary();
+	const appFramework = options.framework || (await promptFramework());
+	let appConnectionType = options.ecosystem || (await promptRpcIntegrations());
+	if (appConnectionType === RPCIntegrationType.EVM) {
+		appConnectionType = options.library || (await promptEVMLibrary());
 	}
 
 	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 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,7 +183,7 @@ 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'`)
@@ -197,4 +196,3 @@ program
 	});
 
 program.parse(process.argv);
-

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

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

package/templates/next-cosmos-template/next.config.mjs

@@ -1,14 +1,14 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-    images: {
-        remotePatterns: [
-            {
-                protocol: 'https',
-                hostname: 'cdn.sei.io',
-                port: '',
-            },
-        ],
-    },
+	images: {
+		remotePatterns: [
+			{
+				protocol: 'https',
+				hostname: 'cdn.sei.io',
+				port: ''
+			}
+		]
+	}
 };
 
 export default nextConfig;

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

@@ -1,31 +1,31 @@
 {
-  "name": "template-next-cosmos-sei-app",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
-  },
-  "dependencies": {
-    "@cosmos-kit/react": "^2.17.0",
-    "@interchain-ui/react": "1.23.21",
-    "@interchain-ui/react-no-ssr": "^0.1.4",
-    "@sei-js/cosmjs": "^1.0.7",
-    "@tanstack/react-query": "^5.45.1",
-    "chain-registry": "^1.63.5",
-    "cosmos-kit": "^2.18.0",
-    "next": "14.2.4",
-    "pino-pretty": "^11.2.1",
-    "react": "^18",
-    "react-dom": "^18"
-  },
-  "devDependencies": {
-    "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "eslint-config-next": "14.2.4",
-    "typescript": "^5"
-  }
+	"name": "template-next-cosmos-sei-app",
+	"version": "0.1.0",
+	"private": true,
+	"scripts": {
+		"dev": "next dev",
+		"build": "next build",
+		"start": "next start",
+		"lint": "next lint"
+	},
+	"dependencies": {
+		"@cosmos-kit/react": "^2.17.0",
+		"@interchain-ui/react": "1.23.21",
+		"@interchain-ui/react-no-ssr": "^0.1.4",
+		"@sei-js/cosmjs": "^1.0.7",
+		"@tanstack/react-query": "^5.45.1",
+		"chain-registry": "^1.63.5",
+		"cosmos-kit": "^2.18.0",
+		"next": "14.2.4",
+		"pino-pretty": "^11.2.1",
+		"react": "^18",
+		"react-dom": "^18"
+	},
+	"devDependencies": {
+		"@types/node": "^20",
+		"@types/react": "^18",
+		"@types/react-dom": "^18",
+		"eslint-config-next": "14.2.4",
+		"typescript": "^5"
+	}
 }

package/templates/next-cosmos-template/src/app/components/Homepage/Examples.tsx

@@ -1,177 +1,168 @@
-import { getCosmWasmClient, getQueryClient, getSigningCosmWasmClient, getStargateClient } from "@sei-js/cosmjs";
-import { useState } from "react";
-import { defaultUrls, selectedChain } from "../../constants";
-import { useChain } from "@cosmos-kit/react";
+import { getCosmWasmClient, getQueryClient, getSigningCosmWasmClient, getStargateClient } from '@sei-js/cosmjs';
+import { useState } from 'react';
+import { defaultUrls, selectedChain } from '../../constants';
+import { useChain } from '@cosmos-kit/react';
 
-import './Homepage.css'
+import './Homepage.css';
 type ExampleProps = {
-    chainId: string
-}
+	chainId: string;
+};
 
 function Examples({ chainId }: ExampleProps) {
-    const [balance, setBalance] = useState(0)
-    const [pool, setPool] = useState({ bonded_tokens: 0, not_bonded_tokens: 0 });
-    const [count, setCount] = useState(0)
-
-    const { address, getOfflineSignerAmino } = useChain(selectedChain.chain_name);
-
-    // Example of using the query client to query Sei modules
-    const getStakingPool = async () => {
-        const queryClient = await getQueryClient(defaultUrls[chainId].rest);
-        const result = await queryClient.cosmos.staking.v1beta1.pool({});
-        setPool(result.pool)
-    }
-    
-    const renderStakingPoolExample = () => {
-        return (
-            <div className="card">
-                <div className="card-header">
-                    <p className="card__title">Staking Pool</p>
-                    <small className="card__description">
-                        <a 
-                        href="https://sei-protocol.github.io/sei-js/functions/cosmjs.getQueryClient.html"
-                        target="_blank">Sei QueryClient</a> query example
-                    </small>
-                </div>
-                <div className="card-body">
-                    <div className="content-background space-between">
-                        <small>Bonded Tokens</small>
-                        <p>{pool ? pool.bonded_tokens : '---'} SEI</p>
-                    </div>
-                    <div className="content-background space-between">
-                        <small>Unbonded Tokens</small>
-                        <p>{pool ? pool.not_bonded_tokens : '---'} SEI</p>
-                    </div>
-                </div>
-                <div className="card-footer">
-                    <button onClick={getStakingPool}>Fetch Staking Data</button>
-                </div>
-            </div>
-        )
-    }
-
-    const getBalanceStargate = async () => {
-        if (!address) {
-            return undefined
-        }
-        const queryClient = await getStargateClient(defaultUrls[chainId].rpc);
-        const useiBalance = await queryClient.getBalance(address, 'usei');
-        const seiBalance = Number(useiBalance.amount) / 1000000
-        setBalance(seiBalance);
-    }
-
-    const renderBalanceExample = () => {
-        return (
-            <div className="card">
-                <div className="card-header">
-                    <p className="card__title">Wallet Balance</p>
-                    <small className="card__description">
-                        <a 
-                        href="https://cosmos.github.io/cosmjs/latest/stargate/classes/StargateClient.html"
-                        target="_blank">Stargate Client</a> query example
-                    </small>
-                </div>
-                <div className="card-body">
-                    <div className="content-background space-between">
-                        <small>SEI</small>
-                        <p>{balance ? balance : '---' } SEI</p>
-                    </div>
-                </div>
-                <div className="card-footer">
-                    <button onClick={getBalanceStargate}>Fetch balance</button>
-                </div>
-            </div>
-        )
-    }
-
-    const fetchCount = async () => {
-        const cosmWasmClient = await getCosmWasmClient(defaultUrls[chainId].rpc);
-        console.log(cosmWasmClient);
-        const CONTRACT_ADDRESS =
-            "sei14hj2tavq8fpesdwxxcu44rty3hh90vhujrvcmstl4zr3txmfvw9sh9m79m";
-        const response = await cosmWasmClient.queryContractSmart(CONTRACT_ADDRESS, {
-          get_count: {},
-        });
-        const result = response?.count;
-        if (result) {
-            setCount(result);
-        }
-    }
-
-    const incrementCounter = async () => {
-        if (!address) {
-            return;
-        }
-        const offlineSigner = await getOfflineSignerAmino();
-        const signingCosmWasmClient = await getSigningCosmWasmClient(
-            defaultUrls[chainId].rpc,
-            offlineSigner
-        )
-
-        try {
-            const senderAddress = address;
-            const CONTRACT_ADDRESS =
-                "sei14hj2tavq8fpesdwxxcu44rty3hh90vhujrvcmstl4zr3txmfvw9sh9m79m";
-
-            // Build message content
-            const msg = { increment: {} };
-
-            // Define gas price and limit
-            const fee = {
-                amount: [{ amount: "20000", denom: "usei" }],
-                gas: "200000",
-            };
-
-            // Call smart contract execute msg
-            await signingCosmWasmClient?.execute(senderAddress, CONTRACT_ADDRESS, msg, fee);
-
-            await fetchCount();
-
-        } catch (error) {
-            console.log(error)
-        }
-    };
-
-    const renderCounterContractExample = () => {
-        return (
-            <div className="card">
-                <div className="card-header">
-                    <p className="card__title">Smart contract interaction</p>
-                    <small>
-                        <a
-                        href="https://cosmos.github.io/cosmjs/latest/cosmwasm-stargate/classes/SigningCosmWasmClient.html"
-                        target="_blank">
-                            CosmWasm Clients
-                        </a> example of smart
-                        contract interaction
-                    </small>
-                </div>
-                <div className="card-body">
-                    <div className="content-background space-between">
-                        <small>Count</small>
-                        <p>{count}</p>
-                        <button
-                            className="small outline"
-                            onClick={incrementCounter}
-                        >
-                            Increase
-                        </button>
-                    </div>
-                </div>
-                <div className="card-footer">
-                    <button onClick={fetchCount}>Fetch count</button>
-                </div>
-            </div>
-        )
-    }
-
-    return (
-        <div className="grid">
-            {renderBalanceExample()}
-            {renderStakingPoolExample()}
-            {renderCounterContractExample()}
-        </div>
-    )
+	const [balance, setBalance] = useState(0);
+	const [pool, setPool] = useState({ bonded_tokens: 0, not_bonded_tokens: 0 });
+	const [count, setCount] = useState(0);
+
+	const { address, getOfflineSignerAmino } = useChain(selectedChain.chain_name);
+
+	// Example of using the query client to query Sei modules
+	const getStakingPool = async () => {
+		const queryClient = await getQueryClient(defaultUrls[chainId].rest);
+		const result = await queryClient.cosmos.staking.v1beta1.pool({});
+		setPool(result.pool);
+	};
+
+	const renderStakingPoolExample = () => {
+		return (
+			<div className="card">
+				<div className="card-header">
+					<p className="card__title">Staking Pool</p>
+					<small className="card__description">
+						<a href="https://sei-protocol.github.io/sei-js/functions/cosmjs.getQueryClient.html" target="_blank">
+							Sei QueryClient
+						</a>{' '}
+						query example
+					</small>
+				</div>
+				<div className="card-body">
+					<div className="content-background space-between">
+						<small>Bonded Tokens</small>
+						<p>{pool ? pool.bonded_tokens : '---'} SEI</p>
+					</div>
+					<div className="content-background space-between">
+						<small>Unbonded Tokens</small>
+						<p>{pool ? pool.not_bonded_tokens : '---'} SEI</p>
+					</div>
+				</div>
+				<div className="card-footer">
+					<button onClick={getStakingPool}>Fetch Staking Data</button>
+				</div>
+			</div>
+		);
+	};
+
+	const getBalanceStargate = async () => {
+		if (!address) {
+			return undefined;
+		}
+		const queryClient = await getStargateClient(defaultUrls[chainId].rpc);
+		const useiBalance = await queryClient.getBalance(address, 'usei');
+		const seiBalance = Number(useiBalance.amount) / 1000000;
+		setBalance(seiBalance);
+	};
+
+	const renderBalanceExample = () => {
+		return (
+			<div className="card">
+				<div className="card-header">
+					<p className="card__title">Wallet Balance</p>
+					<small className="card__description">
+						<a href="https://cosmos.github.io/cosmjs/latest/stargate/classes/StargateClient.html" target="_blank">
+							Stargate Client
+						</a>{' '}
+						query example
+					</small>
+				</div>
+				<div className="card-body">
+					<div className="content-background space-between">
+						<small>SEI</small>
+						<p>{balance ? balance : '---'} SEI</p>
+					</div>
+				</div>
+				<div className="card-footer">
+					<button onClick={getBalanceStargate}>Fetch balance</button>
+				</div>
+			</div>
+		);
+	};
+
+	const fetchCount = async () => {
+		const cosmWasmClient = await getCosmWasmClient(defaultUrls[chainId].rpc);
+		console.log(cosmWasmClient);
+		const CONTRACT_ADDRESS = 'sei14hj2tavq8fpesdwxxcu44rty3hh90vhujrvcmstl4zr3txmfvw9sh9m79m';
+		const response = await cosmWasmClient.queryContractSmart(CONTRACT_ADDRESS, {
+			get_count: {}
+		});
+		const result = response?.count;
+		if (result) {
+			setCount(result);
+		}
+	};
+
+	const incrementCounter = async () => {
+		if (!address) {
+			return;
+		}
+		const offlineSigner = await getOfflineSignerAmino();
+		const signingCosmWasmClient = await getSigningCosmWasmClient(defaultUrls[chainId].rpc, offlineSigner);
+
+		try {
+			const senderAddress = address;
+			const CONTRACT_ADDRESS = 'sei14hj2tavq8fpesdwxxcu44rty3hh90vhujrvcmstl4zr3txmfvw9sh9m79m';
+
+			// Build message content
+			const msg = { increment: {} };
+
+			// Define gas price and limit
+			const fee = {
+				amount: [{ amount: '20000', denom: 'usei' }],
+				gas: '200000'
+			};
+
+			// Call smart contract execute msg
+			await signingCosmWasmClient?.execute(senderAddress, CONTRACT_ADDRESS, msg, fee);
+
+			await fetchCount();
+		} catch (error) {
+			console.log(error);
+		}
+	};
+
+	const renderCounterContractExample = () => {
+		return (
+			<div className="card">
+				<div className="card-header">
+					<p className="card__title">Smart contract interaction</p>
+					<small>
+						<a href="https://cosmos.github.io/cosmjs/latest/cosmwasm-stargate/classes/SigningCosmWasmClient.html" target="_blank">
+							CosmWasm Clients
+						</a>{' '}
+						example of smart contract interaction
+					</small>
+				</div>
+				<div className="card-body">
+					<div className="content-background space-between">
+						<small>Count</small>
+						<p>{count}</p>
+						<button className="small outline" onClick={incrementCounter}>
+							Increase
+						</button>
+					</div>
+				</div>
+				<div className="card-footer">
+					<button onClick={fetchCount}>Fetch count</button>
+				</div>
+			</div>
+		);
+	};
+
+	return (
+		<div className="grid">
+			{renderBalanceExample()}
+			{renderStakingPoolExample()}
+			{renderCounterContractExample()}
+		</div>
+	);
 }
 
-export default Examples;
+export default Examples;