@sei-js/create-sei 0.0.2 → 0.0.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @sei-js/create-sei-app
 
+## 0.0.4
+
+### Patch Changes
+
+- 848c236: Remove cosmos from templates
+
+## 0.0.3
+
+### Patch Changes
+
+- a64da08: Update README files in NPM
+
 ## 0.0.2
 
 ### Patch Changes

package/README.md

@@ -1,36 +1,27 @@
-# Create Sei App
+<div align="center">
 
-This repository contains various templates for kick-starting a Sei application out of the box, as well as a CLI (Command Line Interface) tool that can be used to create projects using the given templates.
+# @sei-js/create-sei
 
-You can use either:
-- Next.js
-- Vite.js
+[![npm version](https://badge.fury.io/js/@sei-js%2Fcreate-sei.svg)](https://badge.fury.io/js/@sei-js%2Fcreate-sei)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
+[![Sei Network](https://img.shields.io/badge/Sei-Network-red)](https://sei.io)
 
-to scaffold your project.
+**Scaffold new Sei applications with pre-configured templates and tooling**
 
-## Scaffold your project
-Simply run `npx @sei-js/create-sei app` to run the setup wizard and choose the template you want to use.
+[Documentation](https://sei-js.docs.sei.io/create-sei/welcome) • [GitHub](https://github.com/sei-protocol/sei-js) • [NPM](https://www.npmjs.com/package/@sei-js/create-sei) • [Telegram](https://t.me/+LPW_1djQwRQwMzlk)
 
-## EVM Applications (Recommended)
-Building on our EVM (Ethereum Virtual Machine) is the easiest way to get your dApp kick-started on Sei! The mature EVM ecosystem provides many tools out of the box to help developers build faster, including deploying smart contracts and other helpful connection libraries.
+</div>
 
-This tool will offer multiple variants of EVM tooling, including
-- [Wagmi](https://wagmi.sh/core/getting-started) ([Viem](https://viem.sh/)): Recommended
-- [Ethers](https://docs.ethers.org/v6/)
+## 🚀 Quick Start
 
-Both variants use [@sei-js/evm](https://sei-protocol.github.io/sei-js/modules/evm.html)
+```bash
+npx @sei-js/create-sei app -n my-sei-app
+```
 
-If you are new to Web3 development, we recommend using Wagmi since it provides helpful hooks out of the box.
+## 📚 Documentation
 
-## Cosmos Applications
-Cosmos based Sei Applications interact with the CosmWasm VM on the chain. Use this if you are a seasoned CosmWasm developer, or if you intend to interact with CosmWasm Smart Contracts, as well as other chains in the Cosmos ecosystem.
+For complete documentation, examples, and guides, visit:
+**[sei-js.docs.sei.io/create-sei](https://sei-js.docs.sei.io/create-sei/welcome)**
 
-If you think your app might require interaction with native Cosmos modules, you should check the list of [precompiles](https://www.docs.sei.io/dev-interoperability/precompiles/addr) to determine if the same support can be offered by the EVM.
 
-Cosmos Applications use
-- [CosmosKit](https://cosmology.zone/products/cosmos-kit)
-- [@sei-js/cosmjs](https://sei-protocol.github.io/sei-js/modules/cosmjs.html)
-- [Cosmjs](https://github.com/cosmos/cosmjs)
-
-## Contributing
-We love contributions from the amazing Sei community! If you have a dApp template to contribute, do make a Pull Request into the [sei-js](https://github.com/sei-protocol/sei-js) repository.

package/biome.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+  "extends": ["../../biome.json"],
+  "files": {
+    "ignoreUnknown": false,
+    "ignore": ["templates/**"]
+  }
+}

package/dist/main.js

@@ -1,10 +1,10 @@
 #!/usr/bin/env node
-import inquirer from 'inquirer';
 import boxen from 'boxen';
-import path from 'path';
-import fs from 'fs';
-import { fileURLToPath } from 'url';
-import { dirname } from 'path';
+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);
@@ -23,15 +23,6 @@ var FrontendScaffolding;
     FrontendScaffolding["Vite"] = "vite";
     FrontendScaffolding["Next"] = "next";
 })(FrontendScaffolding || (FrontendScaffolding = {}));
-export var RPCIntegrationType;
-(function (RPCIntegrationType) {
-    RPCIntegrationType["EVM"] = "evm";
-    RPCIntegrationType["CosmJS"] = "cosmos";
-})(RPCIntegrationType || (RPCIntegrationType = {}));
-export var EVMLibrary;
-(function (EVMLibrary) {
-    EVMLibrary["Wagmi"] = "wagmi";
-})(EVMLibrary || (EVMLibrary = {}));
 const promptFramework = async () => {
     const { appFramework } = await inquirer.prompt([
         {
@@ -43,36 +34,15 @@ 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;
     }
+    // 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;
     }
@@ -93,20 +63,6 @@ const validateOptions = (options) => {
             valid = false;
         }
     }
-    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) {
@@ -131,12 +87,8 @@ async function runWizard(options) {
         ]);
         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 templateName = `${appFramework}-${appConnectionType}-template`;
+    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 });
@@ -146,10 +98,8 @@ async function runWizard(options) {
 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) => {
     try {
         await runWizard(options);

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

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

package/dist/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"
+	}
+}

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

@@ -0,0 +1,257 @@
+'use client';
+
+import { BANK_PRECOMPILE_ABI, BANK_PRECOMPILE_ADDRESS, WASM_PRECOMPILE_ABI, WASM_PRECOMPILE_ADDRESS } from '@sei-js/evm';
+import { useState } from 'react';
+import { ReadContractParameters, formatEther, fromHex, parseEther, toHex } from 'viem';
+import { useAccount, usePublicClient, useWriteContract } from 'wagmi';
+
+import './Homepage.css';
+
+function Examples() {
+	const [balance, setBalance] = useState('');
+	const [supply, setSupply] = useState('');
+	const [count, setCount] = useState(0);
+
+	const publicClient = usePublicClient();
+	const { address } = useAccount();
+	const { writeContractAsync } = useWriteContract();
+
+	const formatLargeSeiNumber = (num: string, decimals: number): string => {
+		if (num.length > 10) {
+			return (
+				(Number(num) / 1000000 / 1000000000).toLocaleString(navigator.language, { minimumFractionDigits: decimals, maximumFractionDigits: decimals }) + ' B'
+			);
+		} else {
+			return (Number(num) / 1000000).toLocaleString(navigator.language);
+		}
+	};
+
+	const copyToClipboard = (text: string) => {
+		try {
+			navigator.clipboard.writeText(text);
+		} catch (err) {
+			console.error('Failed to copy text: ', err);
+		} finally {
+			alert('Copied to clipboard!');
+		}
+	};
+
+	const renderAddressExample = () => {
+		return (
+			<div className="card">
+				<div className="card-header">
+					<p className="card__title">Wallet address</p>
+					<small className="card__description">
+						<a href="https://viem.sh/docs/clients/public.html" target="_blank">
+							Viem Public Client
+						</a>{' '}
+						query example
+					</small>
+				</div>
+				<div className="card-body">
+					<div className="content-background space-between">
+						{address ? (
+							<div>
+								<p className="card-footer">{address}</p>
+							</div>
+						) : (
+							<p> --- </p>
+						)}
+
+						<button className="small outline" onClick={() => copyToClipboard(address as string)}>
+							Copy
+						</button>
+					</div>
+				</div>
+				<div className="card-footer"></div>
+			</div>
+		);
+	};
+
+	const getBalanceWagmi = async () => {
+		if (!address || !publicClient) {
+			return undefined;
+		}
+		const weiBalance = await publicClient.getBalance({ address });
+		const seiBalance = formatEther(weiBalance);
+		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://viem.sh/docs/clients/public.html" target="_blank">
+							Viem Public 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={getBalanceWagmi}>Fetch balance</button>
+				</div>
+			</div>
+		);
+	};
+
+	// Example of using precompiles to query native Sei modules.
+	const getBankSupply = async () => {
+		if (!publicClient) {
+			return;
+		}
+
+		const params: ReadContractParameters = {
+			address: BANK_PRECOMPILE_ADDRESS,
+			abi: BANK_PRECOMPILE_ABI,
+			functionName: 'supply',
+			args: ['usei']
+		};
+		try {
+			const response = (await publicClient.readContract(params)) as BigInt;
+			const supply = formatLargeSeiNumber(response.toString(), 1);
+			setSupply(supply);
+		} catch (e) {
+			console.log(e);
+		}
+	};
+
+	const renderBankSupplyExample = () => {
+		return (
+			<div className="card">
+				<div className="card-header">
+					<p className="card__title">Total Sei supply</p>
+					<small className="card__description">
+						<a href="https://www.docs.sei.io/dev-interoperability/precompiles/bank" target="_blank">
+							{' '}
+							Bank precompile
+						</a>{' '}
+						example for querying native Sei modules
+					</small>
+				</div>
+				<div className="card-body">
+					<div className="content-background space-between">
+						<small>SEI</small>
+						<p>{supply}</p>
+					</div>
+				</div>
+				<div className="card-footer">
+					<button onClick={getBankSupply}>Fetch supply</button>
+				</div>
+			</div>
+		);
+	};
+
+	// Fetch count of a CosmWasm Contract using WASM Precompile
+	const fetchCount = async () => {
+		if (!publicClient) {
+			return;
+		}
+
+		const COUNTER_CONTRACT_ADDRESS = 'sei14hj2tavq8fpesdwxxcu44rty3hh90vhujrvcmstl4zr3txmfvw9sh9m79m';
+
+		const queryMsg = toHex(JSON.stringify({ get_count: {} }));
+
+		const params: ReadContractParameters = {
+			address: WASM_PRECOMPILE_ADDRESS,
+			abi: WASM_PRECOMPILE_ABI,
+			functionName: 'query',
+			args: [COUNTER_CONTRACT_ADDRESS, queryMsg]
+		};
+		try {
+			const response = (await publicClient?.readContract(params)) as `0x${string}`;
+			const { count } = JSON.parse(fromHex(response, 'string'));
+			setCount(count);
+		} catch (e) {
+			console.log(e);
+		}
+	};
+
+	// Fetch count of a CosmWasm Contract using WASM Precompile
+	const incrementCounter = async () => {
+		if (!address || !publicClient) {
+			return;
+		}
+
+		const COUNTER_CONTRACT_ADDRESS = 'sei14hj2tavq8fpesdwxxcu44rty3hh90vhujrvcmstl4zr3txmfvw9sh9m79m';
+
+		const execMsg = toHex(JSON.stringify({ increment: {} }));
+		const coins = toHex('[]');
+		const params = {
+			account: address,
+			address: WASM_PRECOMPILE_ADDRESS,
+			abi: WASM_PRECOMPILE_ABI,
+			functionName: 'execute',
+			args: [COUNTER_CONTRACT_ADDRESS, execMsg, coins],
+			value: parseEther('0')
+		};
+
+		try {
+			const estimatedGas = await publicClient.estimateContractGas(params);
+
+			// Call smart contract execute msg
+			await writeContractAsync({ ...params, gas: estimatedGas });
+
+			// Wait for 1 block to confirm transaction
+			setTimeout(() => {}, 400);
+			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://www.docs.sei.io/dev-interoperability/precompiles/cosmwasm" target="_blank">
+							WASM Precompile
+						</a>{' '}
+						example of CosmWasm 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="container">
+			<div className="grid">
+				{/* First card */}
+				{renderAddressExample()}
+
+				{/* Second card */}
+				{renderBalanceExample()}
+
+				{/* Third card */}
+				{renderBankSupplyExample()}
+
+				{/* Fourth card */}
+				{renderCounterContractExample()}
+			</div>
+		</div>
+	);
+}
+
+export default Examples;

package/dist/templates/next-template/src/app/components/Homepage/Homepage.css

@@ -0,0 +1,154 @@
+#root {
+	display: flex;
+	flex-direction: column;
+	min-height: 100vh;
+}
+.app {
+	width: 100%;
+	height: 100%;
+}
+
+.logo {
+	width: 20%;
+	align-self: center;
+}
+
+.container {
+	margin: 0 auto;
+	display: flex;
+	flex-direction: column;
+	gap: 3rem;
+	width: 100%;
+	padding: 1rem;
+	height: -webkit-fill-available;
+	flex-grow: 1;
+	justify-content: center;
+}
+
+.grid {
+	width: 100%;
+	display: grid;
+	grid-template-columns: repeat(1, 1fr);
+	gap: 1rem;
+}
+.grid.docs {
+	grid-template-columns: repeat(1, 1fr);
+}
+
+.card {
+	width: 100%;
+	padding: 1.5em;
+	border-radius: 1rem;
+	background: var(--card);
+	color: var(--card-foreground);
+	box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.09);
+}
+
+.card.secondary {
+	background: transparent;
+	border: 1px solid var(--border);
+	box-shadow: none;
+}
+.card.intro {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	justify-content: space-between;
+	align-items: flex-start;
+}
+.card-header {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	gap: 0.25rem;
+}
+.card-body {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	margin: 1.5rem 0;
+}
+
+.card-footer {
+	display: flex;
+	flex-direction: row;
+	gap: 0.5rem;
+}
+
+.card__title {
+	font-size: 1.15rem;
+	font-weight: 600;
+}
+.content-background {
+	overflow: hidden;
+	background: #fafaf9;
+	border-radius: 4rem;
+	padding: 0 1rem;
+	height: 3.5rem;
+	display: flex;
+	align-items: center;
+}
+
+.wallet-address {
+	text-wrap: anywhere;
+	line-break: anywhere;
+}
+
+.space-between {
+	justify-content: space-between;
+	gap: 1rem;
+}
+
+.hide-on-mobile {
+	display: none;
+}
+
+.hide-on-desktop {
+	display: block;
+}
+
+.external-link {
+	display: inline-flex;
+	gap: 0.25rem;
+}
+
+.get-started {
+	text-align: center;
+}
+
+.wallet-connect {
+	display: flex;
+	gap: 1rem;
+	align-items: center;
+}
+
+@media (min-width: 768px) {
+	.card.intro {
+		grid-column: span 2;
+		flex-direction: row;
+		align-items: center;
+	}
+	.hide-on-mobile {
+		display: block;
+	}
+	.hide-on-desktop {
+		display: none;
+	}
+
+	.container {
+		max-width: 96rem;
+		padding: 2rem;
+	}
+	.grid {
+		grid-template-columns: repeat(2, 1fr);
+	}
+	.grid.docs {
+		grid-template-columns: repeat(2, 1fr);
+	}
+}
+
+@media (min-width: 1024px) {
+	.container {
+		max-width: 80rem;
+	}
+}