@sei-js/create-sei 0.0.1 → 0.0.3

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

@@ -1,4 +1,4 @@
-import './Homepage.css'
+import './Homepage.css';
 import Examples from './Examples';
 import { selectedChain } from '../../constants';
 import { WalletConnectButton } from '..';
@@ -13,13 +13,11 @@ 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">
+				<a href={link} target="_blank" rel="noopener noreferrer" className="external-link">
 					{title} {externalIcon}
 				</a>
 			</p>
-			<small className="card__description">
-				{description}
-			</small>
+			<small className="card__description">{description}</small>
 		</div>
 	</div>
 );
@@ -33,7 +31,7 @@ const helpItems: HelpItem[] = [
 	{
 		title: 'CosmosKit',
 		description: "Learn about CosmosKit and it's hooks for chain interaction.",
-		link: 'https://docs.cosmology.zone/cosmos-kit/get-started'
+		link: 'https://hyperweb.io/stack/cosmos-kit'
 	},
 	{
 		title: 'sei-js',
@@ -43,58 +41,35 @@ const helpItems: HelpItem[] = [
 ];
 
 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 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>
+					<p className="card__title">Wallet address</p>
+					<small className="card__description">Connect wallet to see your address and balance</small>
 				</div>
-				<WalletConnectButton/>
+				<WalletConnectButton />
 			</div>
-			<Examples chainId={selectedChain.chain_id}/>
+			<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 className="grid docs">{helpItems.map((item, _) => renderHelpItem(item))}</div>
 		</div>
 	);
 }

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

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

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

@@ -5,12 +5,9 @@ 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 { 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 {
@@ -18,27 +15,26 @@ interface Web3ProviderProps {
 }
 
 const compassWallet = new CompassExtensionWallet({
-  ...compassExtensionInfo,
-  mobileDisabled: false,
-})
+	...compassExtensionInfo,
+	mobileDisabled: false
+});
 
 function Web3Provider({ children }: Web3ProviderProps) {
-
-  // Buffer polyfill
+	// Buffer polyfill
 	if (typeof window !== 'undefined') {
 		window.Buffer = window.Buffer ?? Buffer;
 	}
 
-  // Define your supported wallets here
-  const wallets = [compassWallet, ...finWallets, ...keplrWallets];
+	// 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]
+	// 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>
+		<ChainProvider chains={chains} assetLists={[COSMOS_KIT_ASSET_LIST]} wallets={wallets}>
+			{children}
+		</ChainProvider>
 	);
 }
 

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

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

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

@@ -1,16 +1,16 @@
 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,
-}
+	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"}
-}
+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
+export const selectedChain = ARCTIC_1_SEI_COSMOS_KIT_CHAIN;

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

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

package/templates/vite-cosmos-template/src/index.css

@@ -1,14 +1,16 @@
 /*
   1. Use a more-intuitive box-sizing model.
 */
-*, *::before, *::after {
-  box-sizing: border-box;
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
 }
 /*
   2. Remove default margin
 */
 * {
-  margin: 0;
+	margin: 0;
 }
 /*
   Typographic tweaks!
@@ -16,156 +18,167 @@
   4. Improve text rendering
 */
 body {
-  line-height: 1.5;
-  -webkit-font-smoothing: antialiased;
+	line-height: 1.5;
+	-webkit-font-smoothing: antialiased;
 }
 /*
   5. Improve media defaults
 */
-img, picture, video, canvas, svg {
-  display: block;
-  max-width: 100%;
+img,
+picture,
+video,
+canvas,
+svg {
+	display: block;
+	max-width: 100%;
 }
 /*
   6. Remove built-in form typography styles
 */
-input, button, textarea, select {
-  font: inherit;
+input,
+button,
+textarea,
+select {
+	font: inherit;
 }
 /*
   7. Avoid text overflows
 */
-p, h1, h2, h3, h4, h5, h6 {
-  overflow-wrap: break-word;
-  line-height: 1;
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	overflow-wrap: break-word;
+	line-height: 1;
 }
 /*
   8. Create a root stacking context
 */
-#root, #__next {
-  isolation: isolate;
+#root,
+#__next {
+	isolation: isolate;
 }
 
-
 :root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
+	font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+	line-height: 1.5;
+	font-weight: 400;
 
-  color-scheme: light dark;
-  color:#000;
-  background: var(--background);
+	color-scheme: light dark;
+	color: #000;
+	background: var(--background);
 
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+	font-synthesis: none;
+	text-rendering: optimizeLegibility;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
 
-  --primary-color: #9F1239;
-  --primary-color-hover: #7F0A2E;
-  --background: linear-gradient(180deg, #F5F5F4 0%, #FFF 100%);
-  --border: #D6D3D1;
-  --card: #FFF;
-  --card-foreground: #242424;
+	--primary-color: #9f1239;
+	--primary-color-hover: #7f0a2e;
+	--background: linear-gradient(180deg, #f5f5f4 0%, #fff 100%);
+	--border: #d6d3d1;
+	--card: #fff;
+	--card-foreground: #242424;
 }
 
 a {
-  font-weight: 500;
-  color: var(--primary-color);
-  text-decoration: inherit;
+	font-weight: 500;
+	color: var(--primary-color);
+	text-decoration: inherit;
 }
 a:hover {
-  color: var(--primary-color-hover)
+	color: var(--primary-color-hover);
 }
 
 body {
-  margin: 0;
-  padding: 0;
+	margin: 0;
+	padding: 0;
 }
 
 h1 {
-  font-size: 3.2em;
-  line-height: 1;
+	font-size: 3.2em;
+	line-height: 1;
 }
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-    display: inline-flex;
-    border-radius: 4px;
-    padding: 0.1rem 0.4rem;
-    background-color: #d7cccc;
-    color: var(--card-foreground);
+	font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
+	display: inline-flex;
+	border-radius: 4px;
+	padding: 0.1rem 0.4rem;
+	background-color: #d7cccc;
+	color: var(--card-foreground);
 }
 
 button {
-  border-radius: 4rem;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #cec9c1;
-  cursor: pointer;
-  transition: all 0.25s ease;
-  color: black;
+	border-radius: 4rem;
+	border: 1px solid transparent;
+	padding: 0.6em 1.2em;
+	font-size: 1em;
+	font-weight: 500;
+	font-family: inherit;
+	background-color: #cec9c1;
+	cursor: pointer;
+	transition: all 0.25s ease;
+	color: black;
 }
 button:hover {
-  background-color: #b5afa7;
+	background-color: #b5afa7;
 }
 
 button:disabled {
-  filter:grayscale(1) opacity(0.5);
-  color: rgb(56, 55, 55);
-  pointer-events: none;
+	filter: grayscale(1) opacity(0.5);
+	color: rgb(56, 55, 55);
+	pointer-events: none;
 }
 
 button.primary {
-  background-color: var(--primary-color);
-  color: #fff;
+	background-color: var(--primary-color);
+	color: #fff;
 }
 button.outline {
-  background-color: transparent;
-  border: 1px solid var(--border);
+	background-color: transparent;
+	border: 1px solid var(--border);
 }
 
 button.primary:hover {
-  background-color: var(--primary-color-hover);
+	background-color: var(--primary-color-hover);
 }
 
 button.secondary {
-  background-color: #000;
-  color: #fff;
+	background-color: #000;
+	color: #fff;
 }
 
 button.secondary:hover {
-  background-color: #2b2b2b;
+	background-color: #2b2b2b;
 }
 
 button:active {
-  transform: translateY(1px);
+	transform: translateY(1px);
 }
 
 button.small {
-  padding: 0.4em 0.8em;
-  font-size: 0.8em;
+	padding: 0.4em 0.8em;
+	font-size: 0.8em;
 }
 
-
 button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-  outline-offset: 4px;
+	outline: 4px auto -webkit-focus-ring-color;
+	outline-offset: 4px;
 }
 
 .header {
-  width: 100%;
-  height: 4rem;
-  padding: 0 1%;
-  display: flex;
-  align-items: center;
-  justify-content: right;
-  background-color: transparent;
-  border-bottom: 1px solid var(--border);
-  position: sticky;
-  top: 0;
-  background: #F5F5F4;
+	width: 100%;
+	height: 4rem;
+	padding: 0 1%;
+	display: flex;
+	align-items: center;
+	justify-content: right;
+	background-color: transparent;
+	border-bottom: 1px solid var(--border);
+	position: sticky;
+	top: 0;
+	background: #f5f5f4;
 }

package/templates/vite-cosmos-template/src/main.tsx

@@ -1,12 +1,12 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
-import Web3Provider from './components/Web3Provider.tsx'
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.tsx';
+import Web3Provider from './components/Web3Provider.tsx';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <Web3Provider>
-      <App />
-    </Web3Provider>
-  </React.StrictMode>,
-)
+	<React.StrictMode>
+		<Web3Provider>
+			<App />
+		</Web3Provider>
+	</React.StrictMode>
+);

package/templates/vite-cosmos-template/tsconfig.app.json

@@ -1,27 +1,25 @@
 {
-  "compilerOptions": {
-    "composite": true,
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
+	"compilerOptions": {
+		"composite": true,
+		"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+		"target": "ES2020",
+		"useDefineForClassFields": true,
+		"lib": ["ES2020", "DOM", "DOM.Iterable"],
+		"module": "ESNext",
+		"skipLibCheck": true,
 
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "jsx": "react-jsx",
+		"moduleResolution": "bundler",
+		"allowImportingTsExtensions": true,
+		"resolveJsonModule": true,
+		"isolatedModules": true,
+		"moduleDetection": "force",
+		"noEmit": true,
+		"jsx": "react-jsx",
 
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": ["src"]
+		"strict": true,
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"noFallthroughCasesInSwitch": true
+	},
+	"include": ["src"]
 }

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

@@ -1,11 +1,11 @@
 {
-  "files": [],
-  "references": [
-    {
-      "path": "./tsconfig.app.json"
-    },
-    {
-      "path": "./tsconfig.node.json"
-    }
-  ]
+	"files": [],
+	"references": [
+		{
+			"path": "./tsconfig.app.json"
+		},
+		{
+			"path": "./tsconfig.node.json"
+		}
+	]
 }

package/templates/vite-cosmos-template/tsconfig.node.json

@@ -1,14 +1,14 @@
 {
-  "compilerOptions": {
-    "composite": true,
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true,
+	"compilerOptions": {
+		"composite": true,
+		"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+		"skipLibCheck": true,
+		"module": "ESNext",
+		"moduleResolution": "bundler",
+		"allowSyntheticDefaultImports": true,
 		"allowImportingTsExtensions": true,
-    "strict": true,
-    "noEmit": true
-  },
-  "include": ["vite.config.ts"]
+		"strict": true,
+		"noEmit": true
+	},
+	"include": ["vite.config.ts"]
 }

package/templates/vite-cosmos-template/vite.config.ts

@@ -1,7 +1,7 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
-})
+	plugins: [react()]
+});