@sei-js/create-sei 0.0.2 → 0.0.4

package/templates/vite-template/src/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(2, 1fr);
+	}
+	.grid.docs {
+		grid-template-columns: repeat(2, 1fr);
+	}
+}
+
+@media (min-width: 1024px) {
+	.container {
+		max-width: 80rem;
+	}
+}

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

@@ -0,0 +1,81 @@
+import { ConnectButton } from '@rainbow-me/rainbowkit';
+import Examples from './Examples';
+import './Homepage.css';
+
+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: 'Wagmi',
+		description: "Learn about Wagmi and it's hooks for chain interaction.",
+		link: 'https://wagmi.sh/'
+	},
+	{
+		title: 'Viem',
+		description: 'Interact with Sei using Viem modules + Wagmi.',
+		link: 'https://viem.sh/'
+	},
+	{
+		title: 'EVM JSON-RPC API',
+		description: 'Learn about the EVM api available on Sei.',
+		link: 'https://ethereum.org/en/developers/docs/apis/json-rpc/'
+	}
+];
+
+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>
+);
+
+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>
+				<ConnectButton />
+			</div>
+			<Examples />
+			<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-wagmi-template → templates/vite-template}/src/components/Web3Provider.tsx

@@ -15,18 +15,18 @@ interface Web3ProviderProps {
 }
 
 const connectors = connectorsForWallets(
-    [
-      {
-        groupName: 'Recommended',
-        wallets: [metaMaskWallet],
-      },
-    ],
-    {
-      appName: '<YOUR_APPNAME_HERE>',
-      projectId: "<YOUR_ID_HERE>",
-    }
-  );
-  
+	[
+		{
+			groupName: 'Recommended',
+			wallets: [metaMaskWallet]
+		}
+	],
+	{
+		appName: '<YOUR_APPNAME_HERE>',
+		projectId: '<YOUR_ID_HERE>'
+	}
+);
+
 function Web3Provider({ children }: Web3ProviderProps) {
 	// Buffer polyfill
 	if (typeof window !== 'undefined') {
@@ -48,22 +48,23 @@ function Web3Provider({ children }: Web3ProviderProps) {
 	return (
 		<WagmiProvider config={config}>
 			<QueryClientProvider client={queryClient}>
-                <RainbowKitProvider
-                    theme={lightTheme({
-                        accentColor: '#7e1914',
-                        accentColorForeground: 'white',
-                        borderRadius: 'medium',
-                        fontStack: 'system',
-                    })}
-                    appInfo={{
-                        appName: '<APP-NAME-HERE>',
-                        learnMoreUrl: 'https://www.docs.sei.io/user-guides/wallet-setup'
-                    }}
-                    modalSize='compact'
-                    initialChain={chainConfig.id}>
-                    {children}
-                </RainbowKitProvider>
-            </QueryClientProvider>
+				<RainbowKitProvider
+					theme={lightTheme({
+						accentColor: '#7e1914',
+						accentColorForeground: 'white',
+						borderRadius: 'medium',
+						fontStack: 'system'
+					})}
+					appInfo={{
+						appName: '<APP-NAME-HERE>',
+						learnMoreUrl: 'https://www.docs.sei.io/user-guides/wallet-setup'
+					}}
+					modalSize="compact"
+					initialChain={chainConfig.id}
+				>
+					{children}
+				</RainbowKitProvider>
+			</QueryClientProvider>
 		</WagmiProvider>
 	);
 }

package/templates/{vite-wagmi-template → vite-template}/src/constants/chain.ts

@@ -3,4 +3,4 @@ import { seiDevnet } from 'viem/chains';
 // Set your selected chain here
 // To point to mainnet, use sei.
 // To point to testnet, use seiTestnet.
-export const selectedChain = seiDevnet
+export const selectedChain = seiDevnet;

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

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

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

@@ -0,0 +1,183 @@
+/*
+  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);
+}
+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: black;
+}
+
+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/templates/vite-template/src/main.tsx

@@ -0,0 +1,12 @@
+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>
+);

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

@@ -0,0 +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,
+
+		"moduleResolution": "bundler",
+		"allowImportingTsExtensions": true,
+		"resolveJsonModule": true,
+		"isolatedModules": true,
+		"moduleDetection": "force",
+		"noEmit": true,
+		"jsx": "react-jsx",
+
+		"strict": true,
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"noFallthroughCasesInSwitch": true
+	},
+	"include": ["src"]
+}

package/templates/vite-template/tsconfig.json

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

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

@@ -0,0 +1,14 @@
+{
+	"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"]
+}

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

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+	plugins: [react()],
+	optimizeDeps: {
+		exclude: ['js-big-decimal']
+	}
+});

package/tsconfig.json

@@ -1,29 +1,19 @@
 {
-  "extends": "../../tsconfig.base.json",
-  "exclude": [
-    "node_modules",
-    "dist",
-    "test"
-  ],
-  "compilerOptions": {
-    "outDir": "./dist",
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": [
-      "ES2020",
-      "DOM",
-      "DOM.Iterable"
-    ],
-    "module": "ESNext",
-    "skipLibCheck": true,
-    "isolatedModules": true,
-    "jsx": "react-jsx",
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": [
-    "src",
-  ],
-}
+	"extends": "../../tsconfig.base.json",
+	"exclude": ["node_modules", "dist", "test"],
+	"compilerOptions": {
+		"outDir": "./dist",
+		"target": "ES2020",
+		"useDefineForClassFields": true,
+		"lib": ["ES2020", "DOM", "DOM.Iterable"],
+		"module": "ESNext",
+		"skipLibCheck": true,
+		"isolatedModules": true,
+		"jsx": "react-jsx",
+		"strict": true,
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"noFallthroughCasesInSwitch": true
+	},
+	"include": ["src"]
+}

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

@@ -1,3 +0,0 @@
-{
-  "extends": "next/core-web-vitals"
-}

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

@@ -1,60 +0,0 @@
-# Next-Cosmos Sei App Template
-
-This repo provides a basic framework for an application that interacts with Sei via Cosmos endpoints.
-
-## 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:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `src/app/page.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/app/components/Homepage`.
-
-### Web3 Provider
-This component is a Sei specific wrapper around CosmosKit Provider that should wrap the application. Wrapping the application in this provider will enable it to access hooks in CosmosKit. 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/app/components/Web3Provider.tsx` component.
-
-### Wallet Connect Button
-This component provides an interface to connect your wallet to the application. It utilizies CosmosKit's hooks and modal.
-
-To customize the wallet connect button or connection logic, you can modify the `src/app/components/WalletConnectButton.tsx` component.
-
-### 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/app/constants`
-
-## Learn More
-
-### Next.js
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.