- - **CLI Flags:** `-f next -e evm` - -
- - **Tech Stack:** `Next.js 14` `Ethers.js v6` `Custom Hooks` `Sei Precompiles` `Tailwind CSS` - - ```bash - npx @sei-js/create-sei app -n my-app -f next -e evm - ``` -
- - **CLI Flags:** `-f next -e cosmos` - -
- - **Tech Stack:** `Next.js 14` `CosmJS` `Keplr Wallet` `Cosmos SDK` `Tailwind CSS` - - ```bash - npx @sei-js/create-sei app -n my-app -f next -e cosmos - ``` -
- - **CLI Flags:** `-f vite -e evm` - -
- - **Tech Stack:** `Vite` `React 18` `TypeScript` `Ethers.js v6` `Sei Precompiles` - - ```bash - npx @sei-js/create-sei app -n my-app -f vite -e evm - ``` -
- - **CLI Flags:** `-f vite -e cosmos` - -
- - **Tech Stack:** `Vite` `React 18` `TypeScript` `CosmJS` `Keplr Wallet` - - ```bash - npx @sei-js/create-sei app -n my-app -f vite -e cosmos - ``` -
-
- );
- };
-
- 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 (
-
-
- Staking Pool
- - - Sei QueryClient - {' '} - query example - -
-
-
- Bonded Tokens
-
- {pool ? pool.bonded_tokens : '---'} SEI
-
- Unbonded Tokens
-
- {pool ? pool.not_bonded_tokens : '---'} SEI
-
-
-
-
-
- );
- };
-
- 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 (
-
-
- Wallet Balance
- - - Stargate Client - {' '} - query example - -
-
-
- SEI
-
- {balance ? balance : '---'} SEI
-
-
-
-
-
- );
- };
-
- return (
-
-
- Smart contract interaction
- - - CosmWasm Clients - {' '} - example of smart contract interaction - -
-
-
- Count
-
- {count}
- -
-
-
-
- {renderBalanceExample()}
- {renderStakingPoolExample()}
- {renderCounterContractExample()}
-
- );
-}
-
-export default Examples;
diff --git a/packages/create-sei/templates/next-cosmos-template/src/app/components/Homepage/Homepage.css b/packages/create-sei/templates/next-cosmos-template/src/app/components/Homepage/Homepage.css
deleted file mode 100644
index d9c001427..000000000
--- a/packages/create-sei/templates/next-cosmos-template/src/app/components/Homepage/Homepage.css
+++ /dev/null
@@ -1,154 +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;
- }
-}
diff --git a/packages/create-sei/templates/next-cosmos-template/src/app/components/Homepage/Homepage.tsx b/packages/create-sei/templates/next-cosmos-template/src/app/components/Homepage/Homepage.tsx
deleted file mode 100644
index fba74bc4f..000000000
--- a/packages/create-sei/templates/next-cosmos-template/src/app/components/Homepage/Homepage.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-'use client';
-
-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) => (
-
-
-);
-
-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://hyperweb.io/stack/cosmos-kit'
- },
- {
- title: 'sei-js',
- description: 'Interact with Sei using @sei-js/cosmjs.',
- link: 'https://sei-protocol.github.io/sei-js/modules/cosmjs.html'
- }
-];
-
-const externalIcon = (
-
-);
-
-export function Homepage() {
- return (
-
-
- {description}
-
-
- 
-
- );
-}
-
-export default Homepage;
diff --git a/packages/create-sei/templates/next-cosmos-template/src/app/components/WalletConnectButton/WalletConnectButton.tsx b/packages/create-sei/templates/next-cosmos-template/src/app/components/WalletConnectButton/WalletConnectButton.tsx
deleted file mode 100644
index 60ff2c9f6..000000000
--- a/packages/create-sei/templates/next-cosmos-template/src/app/components/WalletConnectButton/WalletConnectButton.tsx
+++ /dev/null
@@ -1,18 +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 (
-
- );
-}
diff --git a/packages/create-sei/templates/next-cosmos-template/src/app/components/Web3Provider.tsx b/packages/create-sei/templates/next-cosmos-template/src/app/components/Web3Provider.tsx
deleted file mode 100644
index 60e21d787..000000000
--- a/packages/create-sei/templates/next-cosmos-template/src/app/components/Web3Provider.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-'use client';
-
-import { ReactNode } from 'react';
-
-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) {
- // 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 (
-
-
-
-
-
- Wallet address
- Connect wallet to see your address and balance -
- Get started by editing
- src/app/page.tsx
-
- {helpItems.map((item, _) => (
-
- {renderHelpItem(item)}
- ))}
-
-
-
-
-
-
- );
- };
-
- 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 (
-
-
- Staking Pool
- - - Sei QueryClient - {' '} - query example - -
-
-
- Bonded Tokens
-
- {pool ? pool.bonded_tokens : '---'} SEI
-
- Unbonded Tokens
-
- {pool ? pool.not_bonded_tokens : '---'} SEI
-
-
-
-
-
- );
- };
-
- 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 (
-
-
- Wallet Balance
- - - Stargate Client - {' '} - query example - -
-
-
- SEI
-
- {balance ? balance : '---'} SEI
-
-
-
-
-
- );
- };
-
- return (
-
-
- Smart contract interaction
- - - CosmWasm Clients - {' '} - example of smart contract interaction - -
-
-
- Count
-
- {count}
- -
-
-
-
- {renderBalanceExample()}
- {renderStakingPoolExample()}
- {renderCounterContractExample()}
-
- );
-}
-
-export default Examples;
diff --git a/packages/create-sei/templates/vite-cosmos-template/src/components/Homepage/Homepage.css b/packages/create-sei/templates/vite-cosmos-template/src/components/Homepage/Homepage.css
deleted file mode 100644
index d9c001427..000000000
--- a/packages/create-sei/templates/vite-cosmos-template/src/components/Homepage/Homepage.css
+++ /dev/null
@@ -1,154 +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;
- }
-}
diff --git a/packages/create-sei/templates/vite-cosmos-template/src/components/Homepage/Homepage.tsx b/packages/create-sei/templates/vite-cosmos-template/src/components/Homepage/Homepage.tsx
deleted file mode 100644
index 1f23d844f..000000000
--- a/packages/create-sei/templates/vite-cosmos-template/src/components/Homepage/Homepage.tsx
+++ /dev/null
@@ -1,77 +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) => (
-
-
-);
-
-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://hyperweb.io/stack/cosmos-kit'
- },
- {
- title: 'sei-js',
- description: 'Interact with Sei using @sei-js/cosmjs.',
- link: 'https://sei-protocol.github.io/sei-js/modules/cosmjs.html'
- }
-];
-
-const externalIcon = (
-
-);
-
-export function Homepage() {
- return (
-
-
- {description}
-
-
-
-
- );
-}
-
-export default Homepage;
diff --git a/packages/create-sei/templates/vite-cosmos-template/src/components/WalletConnectButton/WalletConnectButton.tsx b/packages/create-sei/templates/vite-cosmos-template/src/components/WalletConnectButton/WalletConnectButton.tsx
deleted file mode 100644
index 60ff2c9f6..000000000
--- a/packages/create-sei/templates/vite-cosmos-template/src/components/WalletConnectButton/WalletConnectButton.tsx
+++ /dev/null
@@ -1,18 +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 (
-
- );
-}
diff --git a/packages/create-sei/templates/vite-cosmos-template/src/components/Web3Provider.tsx b/packages/create-sei/templates/vite-cosmos-template/src/components/Web3Provider.tsx
deleted file mode 100644
index 841aef5a9..000000000
--- a/packages/create-sei/templates/vite-cosmos-template/src/components/Web3Provider.tsx
+++ /dev/null
@@ -1,41 +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 (
-
-
-
-
-
- Wallet address
- Connect wallet to see your address and balance -
- Get started by editing
- src/App.tsx
- {helpItems.map((item, _) => renderHelpItem(item))}
-