@sei-js/create-sei 0.0.2 → 0.0.4

package/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/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/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/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/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/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/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;

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

@@ -0,0 +1,255 @@
+import { BANK_PRECOMPILE_ABI, BANK_PRECOMPILE_ADDRESS, WASM_PRECOMPILE_ABI, WASM_PRECOMPILE_ADDRESS } from '@sei-js/evm';
+import { useState } from 'react';
+import { ReadContractParameters, formatEther, fromHex, parseEther, toHex } from 'viem';
+import { useAccount, usePublicClient, useWriteContract } from 'wagmi';
+
+import './Homepage.css';
+
+function Examples() {
+	const [balance, setBalance] = useState('');
+	const [supply, setSupply] = useState('');
+	const [count, setCount] = useState(0);
+
+	const publicClient = usePublicClient();
+	const { address } = useAccount();
+	const { writeContractAsync } = useWriteContract();
+
+	const formatLargeSeiNumber = (num: string, decimals: number): string => {
+		if (num.length > 10) {
+			return (
+				(Number(num) / 1000000 / 1000000000).toLocaleString(navigator.language, { minimumFractionDigits: decimals, maximumFractionDigits: decimals }) + ' B'
+			);
+		} else {
+			return (Number(num) / 1000000).toLocaleString(navigator.language);
+		}
+	};
+
+	const copyToClipboard = (text: string) => {
+		try {
+			navigator.clipboard.writeText(text);
+		} catch (err) {
+			console.error('Failed to copy text: ', err);
+		} finally {
+			alert('Copied to clipboard!');
+		}
+	};
+
+	const renderAddressExample = () => {
+		return (
+			<div className="card">
+				<div className="card-header">
+					<p className="card__title">Wallet address</p>
+					<small className="card__description">
+						<a href="https://viem.sh/docs/clients/public.html" target="_blank">
+							Viem Public Client
+						</a>{' '}
+						query example
+					</small>
+				</div>
+				<div className="card-body">
+					<div className="content-background space-between">
+						{address ? (
+							<div>
+								<p className="card-footer">{address}</p>
+							</div>
+						) : (
+							<a> --- </a>
+						)}
+
+						<button className="small outline" onClick={() => copyToClipboard(address as string)}>
+							Copy
+						</button>
+					</div>
+				</div>
+				<div className="card-footer"></div>
+			</div>
+		);
+	};
+
+	const getBalanceWagmi = async () => {
+		if (!address || !publicClient) {
+			return undefined;
+		}
+		const weiBalance = await publicClient.getBalance({ address });
+		const seiBalance = formatEther(weiBalance);
+		setBalance(seiBalance);
+	};
+
+	const renderBalanceExample = () => {
+		return (
+			<div className="card">
+				<div className="card-header">
+					<p className="card__title">Wallet balance</p>
+					<small className="card__description">
+						<a href="https://viem.sh/docs/clients/public.html" target="_blank">
+							Viem Public Client
+						</a>{' '}
+						query example
+					</small>
+				</div>
+				<div className="card-body">
+					<div className="content-background space-between">
+						<small>SEI</small>
+						<p>{balance ? balance : '---'} SEI</p>
+					</div>
+				</div>
+				<div className="card-footer">
+					<button onClick={getBalanceWagmi}>Fetch balance</button>
+				</div>
+			</div>
+		);
+	};
+
+	// Example of using precompiles to query native Sei modules.
+	const getBankSupply = async () => {
+		if (!publicClient) {
+			return;
+		}
+
+		const params: ReadContractParameters = {
+			address: BANK_PRECOMPILE_ADDRESS,
+			abi: BANK_PRECOMPILE_ABI,
+			functionName: 'supply',
+			args: ['usei']
+		};
+		try {
+			const response = (await publicClient.readContract(params)) as BigInt;
+			const supply = formatLargeSeiNumber(response.toString(), 1);
+			setSupply(supply);
+		} catch (e) {
+			console.log(e);
+		}
+	};
+
+	const renderBankSupplyExample = () => {
+		return (
+			<div className="card">
+				<div className="card-header">
+					<p className="card__title">Total Sei supply</p>
+					<small className="card__description">
+						<a href="https://www.docs.sei.io/dev-interoperability/precompiles/bank" target="_blank">
+							{' '}
+							Bank precompile
+						</a>{' '}
+						example for querying native Sei modules
+					</small>
+				</div>
+				<div className="card-body">
+					<div className="content-background space-between">
+						<small>SEI</small>
+						<p>{supply}</p>
+					</div>
+				</div>
+				<div className="card-footer">
+					<button onClick={getBankSupply}>Fetch supply</button>
+				</div>
+			</div>
+		);
+	};
+
+	// Fetch count of a CosmWasm Contract using WASM Precompile
+	const fetchCount = async () => {
+		if (!publicClient) {
+			return;
+		}
+
+		const COUNTER_CONTRACT_ADDRESS = 'sei14hj2tavq8fpesdwxxcu44rty3hh90vhujrvcmstl4zr3txmfvw9sh9m79m';
+
+		const queryMsg = toHex(JSON.stringify({ get_count: {} }));
+
+		const params: ReadContractParameters = {
+			address: WASM_PRECOMPILE_ADDRESS,
+			abi: WASM_PRECOMPILE_ABI,
+			functionName: 'query',
+			args: [COUNTER_CONTRACT_ADDRESS, queryMsg]
+		};
+		try {
+			const response = (await publicClient?.readContract(params)) as `0x${string}`;
+			const { count } = JSON.parse(fromHex(response, 'string'));
+			setCount(count);
+		} catch (e) {
+			console.log(e);
+		}
+	};
+
+	// Fetch count of a CosmWasm Contract using WASM Precompile
+	const incrementCounter = async () => {
+		if (!address || !publicClient) {
+			return;
+		}
+
+		const COUNTER_CONTRACT_ADDRESS = 'sei14hj2tavq8fpesdwxxcu44rty3hh90vhujrvcmstl4zr3txmfvw9sh9m79m';
+
+		const execMsg = toHex(JSON.stringify({ increment: {} }));
+		const coins = toHex('[]');
+		const params = {
+			account: address,
+			address: WASM_PRECOMPILE_ADDRESS,
+			abi: WASM_PRECOMPILE_ABI,
+			functionName: 'execute',
+			args: [COUNTER_CONTRACT_ADDRESS, execMsg, coins],
+			value: parseEther('0')
+		};
+
+		try {
+			const estimatedGas = await publicClient.estimateContractGas(params);
+
+			// Call smart contract execute msg
+			await writeContractAsync({ ...params, gas: estimatedGas });
+
+			// Wait for 1 block to confirm transaction
+			setTimeout(() => {}, 400);
+			await fetchCount();
+		} catch (error) {
+			console.log(error);
+		}
+	};
+
+	const renderCounterContractExample = () => {
+		return (
+			<div className="card">
+				<div className="card-header">
+					<p className="card__title">Smart contract interaction</p>
+					<small>
+						<a href="https://www.docs.sei.io/dev-interoperability/precompiles/cosmwasm" target="_blank">
+							WASM Precompile
+						</a>{' '}
+						example of CosmWasm smart contract interaction
+					</small>
+				</div>
+				<div className="card-body">
+					<div className="content-background space-between">
+						<small>Count</small>
+						<p>{count}</p>
+						<button className="small outline" onClick={incrementCounter}>
+							Increase
+						</button>
+					</div>
+				</div>
+				<div className="card-footer">
+					<button onClick={fetchCount}>Fetch count</button>
+				</div>
+			</div>
+		);
+	};
+
+	return (
+		<div className="container">
+			<div className="grid">
+				{/* First card */}
+				{renderAddressExample()}
+
+				{/* Second card */}
+				{renderBalanceExample()}
+
+				{/* Third card */}
+				{renderBankSupplyExample()}
+
+				{/* Fourth card */}
+				{renderCounterContractExample()}
+			</div>
+		</div>
+	);
+}
+
+export default Examples;