@sei-js/create-sei 0.0.2 → 0.0.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @sei-js/create-sei-app
 
+## 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);
@@ -66,13 +66,14 @@ const promptEVMLibrary = async () => {
     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;
     }
@@ -131,10 +132,10 @@ 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 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);
@@ -146,7 +147,7 @@ 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'`)

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

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

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