@sei-js/create-sei 0.0.0 → 0.0.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @sei-js/create-sei-app
 
+## 0.0.1
+
+### Patch Changes
+
+- d6e74ed: Update package structure and building of all @sei-js packages
+
 ## 0.0.0
 
 ### Major Changes

package/README.md

@@ -1,6 +1,6 @@
 # Create Sei App
 
-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.
+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.
 
 You can use either:
 - Next.js
@@ -8,15 +8,11 @@ You can use either:
 
 to scaffold your project.
 
-## Getting Started
-1. Install dependencies by running `yarn` or `npm`
+## Scaffold your project
+Simply run `npx @sei-js/create-sei app` to run the setup wizard and choose the template you want to use.
 
-2. Install this package globally by running `npm install -g @sei-js/create-sei`
-
-3. Run `create-sei` and follow the prompts
-
-## EVM Applications (Reccommended)
-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.
+## 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.
 
 This tool will offer multiple variants of EVM tooling, including
 - [Wagmi](https://wagmi.sh/core/getting-started) ([Viem](https://viem.sh/)): Recommended
@@ -24,7 +20,7 @@ This tool will offer multiple variants of EVM tooling, including
 
 Both variants use [@sei-js/evm](https://sei-protocol.github.io/sei-js/modules/evm.html)
 
-If you are new to Web3 development, we reccommend using Wagmi since it provides helpful hooks out of the box.
+If you are new to Web3 development, we recommend using Wagmi since it provides helpful hooks out of the box.
 
 ## 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.
@@ -37,4 +33,4 @@ Cosmos Applications use
 - [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.
+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/package.json

@@ -1,28 +1,20 @@
 {
-  "name": "@sei-js/create-sei",
-  "version": "0.0.0",
-  "module": "dist/main.js",
-  "type": "module",
-  "bin": {
-    "create-sei": "./dist/main.js"
-  },
-  "scripts": {
-    "build": "tsc && cp -r ./templates ./dist/templates",
-    "dev": "node --loader ts-node/esm src/main.ts",
-    "lint": "eslint --ext .ts"
-  },
-  "dependencies": {
-    "boxen": "^7.1.1",
-    "commander": "^12.1.0",
-    "inquirer": "^9.2.15"
-  },
-  "devDependencies": {
-    "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
-    "@tanstack/react-query": "^5.25.0",
-    "@types/boxen": "^3.0.1",
-    "@types/inquirer": "^9.0.7",
-    "autoprefixer": "^10.4.18",
-    "copyfiles": "^2.4.1",
-    "degit": "^2.8.4"
-  }
+	"name": "@sei-js/create-sei",
+	"version": "0.0.1",
+	"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"
+	},
+	"dependencies": {
+		"boxen": "^7.1.1",
+		"commander": "^12.1.0",
+		"inquirer": "^9.2.15"
+	},
+	"devDependencies": {
+		"@types/boxen": "^3.0.1",
+		"@types/inquirer": "^9.0.7"
+	}
 }

package/.eslintignore

@@ -1,2 +0,0 @@
-node_modules
-dist

package/dist/main.js

@@ -1,161 +0,0 @@
-#!/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 { 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'
-    }));
-};
-var FrontendScaffolding;
-(function (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([
-        {
-            type: 'list',
-            name: 'appFramework',
-            message: 'Select an app framework to use?',
-            choices: Object.values(FrontendScaffolding)
-        }
-    ]);
-    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 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;
-    }
-    if (illegalRe.test(dirName) || windowsReservedRe.test(dirName) || trailingRe.test(dirName) || !validNpmPackageRe.test(dirName)) {
-        return false;
-    }
-    return true;
-}
-const validateOptions = (options) => {
-    let valid = true;
-    if (options.name) {
-        if (!isValidDirectoryName(options.name)) {
-            console.log('Invalid package name. Please use a valid npm package name.');
-            valid = false;
-        }
-    }
-    if (options.framework) {
-        const validFrameworks = Object.values(FrontendScaffolding);
-        if (!validFrameworks.includes(options.framework)) {
-            console.log(`Invalid Framework '${options.framework}' provided. Framework must be one of: [${validFrameworks.join(', ')}]`);
-            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) {
-    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) => {
-                    return isValidDirectoryName(input) || 'Invalid package name. Please use a valid npm package name.';
-                }
-            }
-        ]);
-        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 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`);
-}
-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('-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);
-    }
-    catch (error) {
-        console.error('An error occurred:', error);
-    }
-});
-program.parse(process.argv);

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

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

package/dist/templates/next-cosmos-template/README.md

@@ -1,60 +0,0 @@
-# Next-Cosmos Sei App Template
-
-This repo provides a basic framework for an application that interacts with Sei via Cosmos endpoints.
-
-## 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.
-
-## 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`.
-
-### Web3 Provider
-This component is a Sei specific wrapper around CosmosKit Provider that should wrap the application. Wrapping the application in this provider will enable it to access hooks in CosmosKit. These hooks are enable connection to a wallet and interaction with the chain.
-
-To change the list of supported wallets, as well as connection configurations you can modify the `src/app/components/Web3Provider.tsx` component.
-
-### Wallet Connect Button
-This component provides an interface to connect your wallet to the application. It utilizies CosmosKit's hooks and modal.
-
-To customize the wallet connect button or connection logic, you can modify the `src/app/components/WalletConnectButton.tsx` component.
-
-### Changing the Chain
-This application connects to the arctic-1 devnet by default
-
-To change the chain the app connects to, edit the `selectedChain` variable in the `chain.ts` file in `src/app/constants`
-
-## Learn More
-
-### Next.js
-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/dist/templates/next-cosmos-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/basic-features/typescript for more information.

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

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

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

@@ -1,31 +0,0 @@
-{
-  "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/public/next.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

package/dist/templates/next-cosmos-template/public/sei-logotype.svg

@@ -1,15 +0,0 @@
-<svg width="86" height="32" viewBox="0 0 86 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="sei-logotype" clip-path="url(#clip0_1_53)">
-<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M15.8553 31.8727C20.5775 31.8727 24.8201 29.8188 27.7383 26.5556C26.3808 25.3758 24.3351 25.3041 22.8899 26.4702L22.6138 26.693C19.9677 28.8281 16.1121 28.5128 13.8481 25.9762C12.6133 24.5927 10.4986 24.4514 9.09076 25.6584L5.90753 28.3874C8.63393 30.5685 12.0923 31.8727 15.8553 31.8727ZM21.0223 24.1558C23.5427 22.1221 27.0852 22.195 29.5092 24.1592C30.9581 21.7586 31.7917 18.9448 31.7917 15.9363C31.7917 12.5934 30.7624 9.49098 29.0035 6.9285C27.8696 6.68701 26.6405 6.96905 25.7075 7.79581L25.442 8.03112C22.8973 10.2861 19.0312 10.1491 16.6526 7.71961C15.3553 6.39459 13.2362 6.35106 11.8856 7.62174L8.1813 11.1067L6.1435 8.94069L9.84784 5.45571C12.3779 3.07544 16.3473 3.15694 18.7775 5.63906C20.0473 6.936 22.1112 7.00916 23.4696 5.80535L23.7351 5.57004C24.5597 4.83932 25.5138 4.3467 26.5127 4.08762C23.6893 1.54648 19.9529 0 15.8553 0C7.76541 0 1.08344 6.02803 0.0559658 13.8374C2.51319 12.6583 5.54417 13.112 7.5477 15.1637C8.81252 16.4589 10.8491 16.5956 12.2757 15.4811L14.3469 13.863C16.9498 11.8295 20.6294 11.9279 23.1199 14.0978L27.1522 17.6109L25.1986 19.8531L21.1663 16.34C19.7502 15.1062 17.6579 15.0502 16.1777 16.2066L14.1066 17.8246C11.4855 19.8723 7.74378 19.6211 5.41997 17.2414C4.06868 15.8577 1.85863 15.8094 0.448196 17.1329L0 17.5534C0.335417 20.8819 1.69509 23.9081 3.75904 26.3121L7.15509 23.4006C9.79233 21.1396 13.7538 21.4042 16.0669 23.9959C17.2755 25.3501 19.3337 25.5184 20.7463 24.3786L21.0223 24.1558Z" fill="url(#paint0_linear_1_53)"/>
-<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M85.5173 2.22307C85.5173 3.44217 84.5132 4.44614 83.2944 4.44614C82.0751 4.44614 81.071 3.44217 81.071 2.22307C81.071 0.968111 82.0751 0 83.2944 0C84.5132 0 85.5173 0.968111 85.5173 2.22307ZM85.0152 26.139H81.6448V8.60541H85.0152V26.139ZM43.2705 21.0474C43.2705 24.382 45.888 26.5692 50.0114 26.5692C54.1707 26.5692 57.039 24.4537 57.039 21.1191C57.039 18.5016 55.5692 17.1391 52.593 16.422L49.5095 15.669C47.7884 15.2388 46.9278 14.4499 46.9278 13.2667C46.9278 11.6532 48.1111 10.7209 50.2266 10.7209C52.2703 10.7209 53.4536 11.8324 53.5253 13.5894H56.7526C56.6809 10.2548 54.1707 8.10343 50.3341 8.10343C46.4617 8.10343 43.7367 10.1472 43.7367 13.3742C43.7367 15.9558 45.2067 17.4977 48.3262 18.2506L51.4098 18.9678C53.2385 19.4339 53.8122 20.151 53.8122 21.3343C53.8122 22.9478 52.4497 23.9159 50.0831 23.9159C47.8601 23.9159 46.4975 22.8402 46.4975 21.0474H43.2705ZM69.0593 26.5692C73.3981 26.5692 76.3382 24.4537 77.1989 20.6889H74.0436C73.4698 22.6968 71.749 23.7725 69.1311 23.7725C65.7965 23.7725 63.8605 21.7286 63.6094 18.0355L77.1631 17.9997V16.7447C77.1631 11.5456 73.9002 8.10343 68.9165 8.10343C63.8246 8.10343 60.3465 11.9042 60.3465 17.3901C60.3465 22.8402 63.8963 26.5692 69.0593 26.5692ZM68.9165 10.936C71.8925 10.936 73.7926 12.8723 73.7926 15.7766H63.6811C64.1115 12.693 65.9758 10.936 68.9165 10.936Z" fill="black"/>
-</g>
-<defs>
-<linearGradient id="paint0_linear_1_53" x1="15.8958" y1="2.37374e-07" x2="22.1762" y2="31.8667" gradientUnits="userSpaceOnUse">
-<stop stop-color="#780000"/>
-<stop offset="1" stop-color="#C1121F"/>
-</linearGradient>
-<clipPath id="clip0_1_53">
-<rect width="85.5172" height="32" fill="white"/>
-</clipPath>
-</defs>
-</svg>

package/dist/templates/next-cosmos-template/public/vercel.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>

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

@@ -1,177 +0,0 @@
-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'
-type ExampleProps = {
-    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>
-    )
-}
-
-export default Examples;