@sei-js/create-sei 0.0.2 → 0.0.4

package/dist/templates/vite-cosmos-template/.eslintrc.cjs

@@ -1,18 +0,0 @@
-module.exports = {
-  root: true,
-  env: { browser: true, es2020: true },
-  extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react-hooks/recommended',
-  ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh'],
-  rules: {
-    'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
-    ],
-  },
-}

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

@@ -1,72 +0,0 @@
-# Vite-Cosmos Sei App Template
-
-This repo provides a basic framework for an application that interacts with Sei via Cosmos endpoints.
-
-It is based on the React Typescript Vite template.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## 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:5173](http://localhost:5173) with your browser to see the result.
-
-You can start editing the page by modifying `src/App.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/components/Homepage`.
-
-### Web3 Provider
-This component is a Sei specific wrapper around Wagmi's Provider that should wrap the application. Wrapping the application in this provider will enable it to access hooks in Wagmi. 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/components/Web3Provider.tsx` component.
-
-### Wallet Connect Button
-This component utilizies Rainbowkit's pre built wallet connect button, which uses hooks in Wagmi.
-
-### 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/constants`
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
-
-- Configure the top-level `parserOptions` property like this:
-
-```js
-export default {
-  // other rules...
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-  },
-}
-```
-
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
-

package/dist/templates/vite-cosmos-template/index.html

@@ -1,16 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <script type="module">
-      import { Buffer } from "buffer";
-      window.Buffer = Buffer;
-    </script>   
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Sei Vite App (Cosmos)</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

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

@@ -1,35 +0,0 @@
-{
-  "name": "template-vite-cosmos-sei-app",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "@cosmos-kit/react": "^2.17.0",
-    "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
-    "@interchain-ui/react": "^1.23.22",
-    "@sei-js/cosmjs": "^1.0.7",
-    "buffer": "^6.0.3",
-    "chain-registry": "^1.63.7",
-    "cosmos-kit": "^2.18.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
-  },
-  "devDependencies": {
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.13.1",
-    "@typescript-eslint/parser": "^7.13.1",
-    "@vitejs/plugin-react": "^4.3.1",
-    "eslint": "^8.57.0",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.7",
-    "typescript": "^5.2.2",
-    "vite": "^5.3.1"
-  }
-}

package/dist/templates/vite-cosmos-template/src/App.tsx

@@ -1,16 +0,0 @@
-import './index.css'
-import { WalletConnectButton, Homepage } from './components'
-
-function App() {
-
-  return (
-    <>
-      <div className="header">
-        <WalletConnectButton/>
-      </div>
-      <Homepage/>
-    </>
-  )
-}
-
-export default App

package/dist/templates/vite-cosmos-template/src/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;

package/dist/templates/vite-cosmos-template/src/components/Homepage/Homepage.css

@@ -1,156 +0,0 @@
-#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(3, 1fr);
-  }
-  .grid.docs {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}
-
-@media (min-width: 1024px) {
-  .container {
-    max-width: 80rem;
-  }
-}

package/dist/templates/vite-cosmos-template/src/components/Homepage/Homepage.tsx

@@ -1,102 +0,0 @@
-import './Homepage.css'
-import Examples from './Examples';
-import { selectedChain } from '../../constants';
-import { WalletConnectButton } from '..';
-
-type HelpItem = {
-	title: string;
-	description: string;
-	link: string;
-};
-
-const renderHelpItem = ({ title, description, link }: HelpItem) => (
-	<div className="card secondary">
-		<div className="card-header">
-			<p className="card__title">
-				<a href={link} target='_blank' rel='noopener noreferrer' className="external-link">
-					{title} {externalIcon}
-				</a>
-			</p>
-			<small className="card__description">
-				{description}
-			</small>
-		</div>
-	</div>
-);
-
-const helpItems: HelpItem[] = [
-	{
-		title: 'Sei Docs',
-		description: 'Find in-depth information about Sei.',
-		link: 'https://docs.sei.io/'
-	},
-	{
-		title: 'CosmosKit',
-		description: "Learn about CosmosKit and it's hooks for chain interaction.",
-		link: 'https://docs.cosmology.zone/cosmos-kit/get-started'
-	},
-	{
-		title: 'sei-js',
-		description: 'Interact with Sei using @sei-js/cosmjs.',
-		link: 'https://sei-protocol.github.io/sei-js/modules/cosmjs.html'
-	}
-];
-
-const externalIcon = (
-	<svg
-	  width="16"
-	  height="16"
-	  viewBox="0 0 16 16"
-	  fill="none"
-	  xmlns="http://www.w3.org/2000/svg"
-	>
-	  <path
-		d="M12 8.66667V12.6667C12 13.0203 11.8595 13.3594 11.6095 13.6095C11.3594 13.8595 11.0203 14 10.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V5.33333C2 4.97971 2.14048 4.64057 2.39052 4.39052C2.64057 4.14048 2.97971 4 3.33333 4H7.33333"
-		stroke="#9F1239"
-		strokeWidth="1.33333"
-		strokeLinecap="round"
-		strokeLinejoin="round"
-	  />
-	  <path
-		d="M10 2H14V6"
-		stroke="#9F1239"
-		strokeWidth="1.33333"
-		strokeLinecap="round"
-		strokeLinejoin="round"
-	  />
-	  <path
-		d="M6.66663 9.33333L14 2"
-		stroke="#9F1239"
-		strokeWidth="1.33333"
-		strokeLinecap="round"
-		strokeLinejoin="round"
-	  />
-	</svg>
-  );
-
-export function Homepage() {
-
-	return (
-		<div className="container">
-			<img src="sei-logotype.svg" className="logo" alt="SEI logotype" />
-			<div className="card intro">
-				<div className="card-header">
-				<p className="card__title">Wallet address</p>
-				<small className="card__description">
-					Connect wallet to see your address and balance
-				</small>
-				</div>
-				<WalletConnectButton/>
-			</div>
-			<Examples chainId={selectedChain.chain_id}/>
-			<div className="get-started">
-				Get started by editing <code>src/App.tsx</code>
-			</div>
-			<div className="grid docs">
-				{helpItems.map((item, _) => (renderHelpItem(item)))}
-			</div>
-		</div>
-	);
-}
-
-export default Homepage;

package/dist/templates/vite-cosmos-template/src/components/WalletConnectButton/WalletConnectButton.tsx

@@ -1,26 +0,0 @@
-import { useChain } from "@cosmos-kit/react";
-
-import "@interchain-ui/react/styles";
-
-import { truncateSeiAddress } from "@sei-js/cosmjs";
-import { selectedChain } from "../../constants";
-
-export function WalletConnectButton() {
-  const {
-    isWalletConnected,
-    address,
-    connect,
-    openView,
-  } = useChain(selectedChain.chain_name);
-
-  const truncatedSeiAddr = address ? truncateSeiAddress(address) : ""
-
-  return (
-    <button
-      className="primary"
-      onClick={isWalletConnected ? openView : connect}
-    >
-      {isWalletConnected ? truncateSeiAddress(truncatedSeiAddr) : "Connect"}
-    </button>
-  );
-}

package/dist/templates/vite-cosmos-template/src/components/Web3Provider.tsx

@@ -1,45 +0,0 @@
-'use client';
-
-import { ReactNode } from 'react';
-import { Buffer } from 'buffer';
-
-import { ChainProvider } from '@cosmos-kit/react';
-import { COSMOS_KIT_ASSET_LIST } from '@sei-js/cosmjs';
-import { wallets as finWallets } from '@cosmos-kit/fin'
-import { wallets as keplrWallets } from '@cosmos-kit/keplr'
-import {
-  CompassExtensionWallet,
-  compassExtensionInfo,
-} from '@cosmos-kit/compass-extension'
-import { selectedChain } from '../constants';
-
-interface Web3ProviderProps {
-	children: ReactNode;
-}
-
-const compassWallet = new CompassExtensionWallet({
-  ...compassExtensionInfo,
-  mobileDisabled: false,
-})
-
-function Web3Provider({ children }: Web3ProviderProps) {
-
-  // Buffer polyfill
-	if (typeof window !== 'undefined') {
-		window.Buffer = window.Buffer ?? Buffer;
-	}
-
-  // Define your supported wallets here
-  const wallets = [compassWallet, ...finWallets, ...keplrWallets];
-
-  // Define the list of sei chain you would like to connect to here.
-  const chains = [selectedChain]
-
-	return (
-      <ChainProvider chains={chains} assetLists={[COSMOS_KIT_ASSET_LIST]} wallets={wallets}>
-        {children}
-      </ChainProvider>
-	);
-}
-
-export default Web3Provider;

package/dist/templates/vite-cosmos-template/src/components/index.ts

@@ -1,4 +0,0 @@
-export * from './Homepage/Homepage'
-export * from './WalletConnectButton/WalletConnectButton'
-export * from './Web3Provider'
-export * from './Homepage/Examples'

package/dist/templates/vite-cosmos-template/src/constants/chain.ts

@@ -1,16 +0,0 @@
-import { ARCTIC_1_SEI_COSMOS_KIT_CHAIN, ATLANTIC_2_SEI_COSMOS_KIT_CHAIN, PACIFIC_1_SEI_COSMOS_KIT_CHAIN } from '@sei-js/cosmjs';
-
-export type Urls = {
-    rpc: string,
-    rest: string,
-}
-
-export const defaultUrls: {[chainName: string]: Urls} = {
-    [PACIFIC_1_SEI_COSMOS_KIT_CHAIN.chain_id]: {rpc: "https://rpc.sei-apis.com", rest: 'https://rest-arctic-1.sei-apis.com'},
-    [ATLANTIC_2_SEI_COSMOS_KIT_CHAIN.chain_id]: {rpc: "https://rpc-testnet.sei-apis.com", rest: "https://rest-testnet.sei-apis.com"},
-    [ARCTIC_1_SEI_COSMOS_KIT_CHAIN.chain_id]: {rpc: "https://rpc-arctic-1.sei-apis.com", rest: "https://rest-arctic-1.sei-apis.com"}
-}
-
-// Set your selected chain here
-// To point to mainnet, use PACIFIC_1_SEI_COSMOS_KIT_CHAIN
-export const selectedChain = ARCTIC_1_SEI_COSMOS_KIT_CHAIN

package/dist/templates/vite-cosmos-template/src/constants/index.ts

@@ -1 +0,0 @@
-export * from './chain';