@sei-js/create-sei 0.0.2 → 0.0.4

package/dist/templates/{next-wagmi-template → next-template}/src/app/components/Homepage/Homepage.tsx

@@ -2,7 +2,7 @@
 
 import { ConnectButton } from '@rainbow-me/rainbowkit';
 import Examples from './Examples';
-import "./Homepage.css"
+import './Homepage.css';
 
 type HelpItem = {
 	title: string;
@@ -14,13 +14,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>
 );
@@ -49,13 +47,7 @@ const helpItems: HelpItem[] = [
 ];
 
 const externalIcon = (
-	<svg
-		width="16"
-		height="16"
-		viewBox="0 0 16 16"
-		fill="none"
-		xmlns="http://www.w3.org/2000/svg"
-	>
+	<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"
@@ -63,34 +55,19 @@ const externalIcon = (
 			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"
-		/>
+		<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>
+					<small className="card__description">Connect wallet to see your address and balance</small>
 				</div>
 				<ConnectButton />
 			</div>
@@ -99,12 +76,9 @@ function Homepage() {
 				Get started by editing <code>src/app/page.tsx</code>
 			</div>
 			<div className="grid docs">
-				{
-					helpItems.map((item, index) => (
-						<div key={item.title}>
-							{renderHelpItem(item)}
-						</div>))
-				}
+				{helpItems.map((item, index) => (
+					<div key={item.title}>{renderHelpItem(item)}</div>
+				))}
 			</div>
 		</div>
 	);

package/{templates/next-wagmi-template → dist/templates/next-template}/src/app/components/Web3Provider.tsx

@@ -17,18 +17,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') {
@@ -50,22 +50,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/dist/templates/next-template/src/app/components/index.ts

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

package/dist/templates/{next-wagmi-template → next-template}/src/app/constants/chain.ts

@@ -1,7 +1,7 @@
 // Set your selected chain here
-import { seiDevnet } from "viem/chains";
+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/dist/templates/next-template/src/app/constants/index.ts

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

package/dist/templates/next-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-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 (Wagmi)',
+	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-template/src/app/page.tsx

@@ -0,0 +1,21 @@
+import { ConnectButton } from '@rainbow-me/rainbowkit';
+import Web3Provider from './components/Web3Provider';
+import Homepage from './components/Homepage/Homepage';
+
+import './index.css';
+
+export default function Home() {
+	return (
+		<Web3Provider>
+			<div className="header">
+				<ConnectButton
+					showBalance={{
+						smallScreen: false,
+						largeScreen: true
+					}}
+				/>
+			</div>
+			<Homepage />
+		</Web3Provider>
+	);
+}

package/dist/templates/next-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"]
+}

package/dist/templates/vite-template/.eslintrc.cjs

@@ -0,0 +1,11 @@
+module.exports = {
+	root: true,
+	env: { browser: true, es2020: true },
+	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended'],
+	ignorePatterns: ['dist', '.eslintrc.cjs'],
+	parser: '@typescript-eslint/parser',
+	plugins: ['react-refresh'],
+	rules: {
+		'react-refresh/only-export-components': ['warn', { allowConstantExport: true }]
+	}
+};

package/dist/templates/vite-template/package.json

@@ -0,0 +1,33 @@
+{
+	"name": "template-vite-sei-app",
+	"private": true,
+	"version": "0.0.0",
+	"type": "module",
+	"scripts": {
+		"dev": "vite",
+		"build": "tsc -b && vite build",
+		"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+		"preview": "vite preview"
+	},
+	"dependencies": {
+		"@rainbow-me/rainbowkit": "^2.1.2",
+		"@sei-js/evm": "^1.2.0",
+		"@tanstack/react-query": "^5.45.1",
+		"react": "^18.3.1",
+		"react-dom": "^18.3.1",
+		"viem": "^2.15.1",
+		"wagmi": "^2.10.2"
+	},
+	"devDependencies": {
+		"@types/react": "^18.3.3",
+		"@types/react-dom": "^18.3.0",
+		"@typescript-eslint/eslint-plugin": "^7.13.1",
+		"@typescript-eslint/parser": "^7.13.1",
+		"@vitejs/plugin-react": "^4.3.1",
+		"eslint": "^8.57.0",
+		"eslint-plugin-react-hooks": "^4.6.2",
+		"eslint-plugin-react-refresh": "^0.4.7",
+		"typescript": "^5.2.2",
+		"vite": "^5.3.1"
+	}
+}

package/dist/templates/vite-template/src/App.tsx

@@ -0,0 +1,21 @@
+import './index.css';
+import { ConnectButton } from '@rainbow-me/rainbowkit';
+import Homepage from './components/Homepage/Homepage';
+
+function App() {
+	return (
+		<>
+			<div className="header">
+				<ConnectButton
+					showBalance={{
+						smallScreen: false,
+						largeScreen: true
+					}}
+				/>
+			</div>
+			<Homepage />
+		</>
+	);
+}
+
+export default App;