@sei-js/create-sei 0.0.1 → 0.0.3

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

@@ -0,0 +1,154 @@
+#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/next-cosmos-template/src/app/components/Homepage/Homepage.tsx

@@ -0,0 +1,83 @@
+'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) => (
+	<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://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 = (
+	<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/page.tsx</code>
+			</div>
+			<div className="grid docs">
+				{helpItems.map((item, _) => (
+					<div key={item.title}>{renderHelpItem(item)}</div>
+				))}
+			</div>
+		</div>
+	);
+}
+
+export default Homepage;

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

@@ -0,0 +1,18 @@
+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/next-cosmos-template/src/app/components/Web3Provider.tsx

@@ -0,0 +1,35 @@
+'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 (
+		<ChainProvider chains={chains} assetLists={[COSMOS_KIT_ASSET_LIST]} wallets={wallets}>
+			{children}
+		</ChainProvider>
+	);
+}
+
+export default Web3Provider;

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

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

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

@@ -0,0 +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;
+};
+
+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/next-cosmos-template/src/app/constants/index.ts

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

package/dist/templates/next-cosmos-template/src/app/index.css

@@ -0,0 +1,184 @@
+/*
+  1. Use a more-intuitive box-sizing model.
+*/
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+/*
+  2. Remove default margin
+*/
+* {
+	margin: 0;
+}
+/*
+  Typographic tweaks!
+  3. Add accessible line-height
+  4. Improve text rendering
+*/
+body {
+	line-height: 1.5;
+	-webkit-font-smoothing: antialiased;
+}
+/*
+  5. Improve media defaults
+*/
+img,
+picture,
+video,
+canvas,
+svg {
+	display: block;
+	max-width: 100%;
+}
+/*
+  6. Remove built-in form typography styles
+*/
+input,
+button,
+textarea,
+select {
+	font: inherit;
+}
+/*
+  7. Avoid text overflows
+*/
+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 {
+	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);
+
+	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;
+}
+
+a {
+	font-weight: 500;
+	color: var(--primary-color);
+	text-decoration: inherit;
+}
+a:hover {
+	color: var(--primary-color-hover);
+}
+
+body {
+	margin: 0;
+	padding: 0;
+}
+
+h1 {
+	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);
+}
+
+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;
+}
+button:hover {
+	background-color: #b5afa7;
+}
+
+button:disabled {
+	filter: grayscale(1) opacity(0.5);
+	color: rgb(56, 55, 55);
+	pointer-events: none;
+}
+
+button.primary {
+	background-color: var(--primary-color);
+	color: #fff;
+}
+button.outline {
+	background-color: transparent;
+	border: 1px solid var(--border);
+}
+
+button.primary:hover {
+	background-color: var(--primary-color-hover);
+}
+
+button.secondary {
+	background-color: #000;
+	color: #fff;
+}
+
+button.secondary:hover {
+	background-color: #2b2b2b;
+}
+
+button:active {
+	transform: translateY(1px);
+}
+
+button.small {
+	padding: 0.4em 0.8em;
+	font-size: 0.8em;
+}
+
+button:focus-visible {
+	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;
+}

package/dist/templates/next-cosmos-template/src/app/layout.tsx

@@ -0,0 +1,21 @@
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+
+const inter = Inter({ subsets: ['latin'] });
+
+export const metadata: Metadata = {
+	title: 'Sei Next App (Cosmos)',
+	description: 'Generated by create sei app'
+};
+
+export default function RootLayout({
+	children
+}: Readonly<{
+	children: React.ReactNode;
+}>) {
+	return (
+		<html lang="en">
+			<body className={inter.className}>{children}</body>
+		</html>
+	);
+}

package/dist/templates/next-cosmos-template/src/app/page.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import './index.css';
+import Homepage from './components/Homepage/Homepage';
+import Web3Provider from './components/Web3Provider';
+import { WalletConnectButton } from './components/WalletConnectButton/WalletConnectButton';
+
+export default function Home() {
+	return (
+		<Web3Provider>
+			<div className="header">
+				<WalletConnectButton />
+			</div>
+			<Homepage />
+		</Web3Provider>
+	);
+}

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

@@ -0,0 +1,26 @@
+{
+	"compilerOptions": {
+		"lib": ["dom", "dom.iterable", "esnext"],
+		"allowJs": true,
+		"skipLibCheck": true,
+		"strict": true,
+		"noEmit": true,
+		"esModuleInterop": true,
+		"module": "esnext",
+		"moduleResolution": "bundler",
+		"resolveJsonModule": true,
+		"isolatedModules": true,
+		"jsx": "preserve",
+		"incremental": true,
+		"plugins": [
+			{
+				"name": "next"
+			}
+		],
+		"paths": {
+			"@/*": ["./src/*"]
+		}
+	},
+	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+	"exclude": ["node_modules"]
+}