@sei-js/create-sei 0.0.1 → 0.0.3

package/templates/next-cosmos-template/src/app/components/Homepage/Homepage.css

@@ -1,156 +1,154 @@
 #root {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+	min-height: 100vh;
 }
 .app {
-  width: 100%;
-  height: 100%;
+	width: 100%;
+	height: 100%;
 }
 
 .logo {
-  width: 20%;
-  align-self: center;
+	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;
+	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;
+	width: 100%;
+	display: grid;
+	grid-template-columns: repeat(1, 1fr);
+	gap: 1rem;
 }
 .grid.docs {
-  grid-template-columns: repeat(1, 1fr);
+	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);
+	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;
+	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;
+	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;
+	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;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	margin: 1.5rem 0;
 }
 
 .card-footer {
-  display: flex;
-  flex-direction: row;
-  gap: 0.5rem;
+	display: flex;
+	flex-direction: row;
+	gap: 0.5rem;
 }
 
 .card__title {
-  font-size: 1.15rem;
-  font-weight: 600;
+	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;
+	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;
+	text-wrap: anywhere;
+	line-break: anywhere;
 }
 
 .space-between {
-  justify-content: space-between;
-  gap: 1rem;
+	justify-content: space-between;
+	gap: 1rem;
 }
 
 .hide-on-mobile {
-  display: none;
+	display: none;
 }
 
 .hide-on-desktop {
-  display: block;
+	display: block;
 }
 
 .external-link {
-  display: inline-flex;
-  gap: 0.25rem;
+	display: inline-flex;
+	gap: 0.25rem;
 }
 
 .get-started {
-  text-align: center;
+	text-align: center;
 }
 
 .wallet-connect {
-  display: flex;
-  gap: 1rem;
-  align-items: center;
+	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);
-  }
+	.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;
-  }
+	.container {
+		max-width: 80rem;
+	}
 }

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

@@ -1,6 +1,6 @@
 'use client';
 
-import './Homepage.css'
+import './Homepage.css';
 import Examples from './Examples';
 import { selectedChain } from '../../constants';
 import { WalletConnectButton } from '..';
@@ -15,13 +15,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>
 );
@@ -35,7 +33,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',
@@ -45,63 +43,38 @@ 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/page.tsx</code>
 			</div>
 			<div className="grid docs">
-				{
-					helpItems.map((item, _) => (
-						<div key={item.title}>
-							{renderHelpItem(item)}
-						</div>
-					))
-				}
+				{helpItems.map((item, _) => (
+					<div key={item.title}>{renderHelpItem(item)}</div>
+				))}
 			</div>
 		</div>
 	);

package/templates/next-cosmos-template/src/app/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/next-cosmos-template/src/app/components/Web3Provider.tsx

@@ -4,12 +4,9 @@ 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 { 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 {
@@ -17,22 +14,21 @@ interface Web3ProviderProps {
 }
 
 const compassWallet = new CompassExtensionWallet({
-  ...compassExtensionInfo,
-  mobileDisabled: false,
-})
+	...compassExtensionInfo,
+	mobileDisabled: false
+});
 
 function Web3Provider({ children }: Web3ProviderProps) {
+	// 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/next-cosmos-template/src/app/components/index.ts

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

package/templates/next-cosmos-template/src/app/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/next-cosmos-template/src/app/constants/index.ts

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