@sei-js/create-sei 0.0.1 → 0.0.3

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

@@ -1,18 +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 },
-    ],
-  },
-}
+	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-wagmi-template/package.json

@@ -1,33 +1,33 @@
 {
-  "name": "template-vite-wagmi-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"
-  }
+	"name": "template-vite-wagmi-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-wagmi-template/src/App.tsx

@@ -1,21 +1,20 @@
-import './index.css'
+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/>
-    </>
+		<>
+			<div className="header">
+				<ConnectButton
+					showBalance={{
+						smallScreen: false,
+						largeScreen: true
+					}}
+				/>
+			</div>
+			<Homepage />
+		</>
 	);
 }
 

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

@@ -1,269 +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 { 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";
+import './Homepage.css';
 
 function Examples() {
-    const [balance, setBalance] = useState('')
-    const [supply, setSupply] = useState('');
-    const [count, setCount] = useState(0)
+	const [balance, setBalance] = useState('');
+	const [supply, setSupply] = useState('');
+	const [count, setCount] = useState(0);
 
-    const publicClient = usePublicClient();
-    const { address } = useAccount();
+	const publicClient = usePublicClient();
+	const { address } = useAccount();
 	const { writeContractAsync } = useWriteContract();
 
-    const formatLargeSeiNumber = (num: string, decimals: number): string => {
+	const formatLargeSeiNumber = (num: string, decimals: number): string => {
 		if (num.length > 10) {
-			return (Number(num) / 1000000 / 1000000000).toLocaleString(navigator.language, { minimumFractionDigits: decimals, maximumFractionDigits: decimals}) + ' B';
+			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 copyToClipboard = (text: string) => {
+		try {
+			navigator.clipboard.writeText(text);
+		} catch (err) {
+			console.error('Failed to copy text: ', err);
+		} finally {
+			alert('Copied to clipboard!');
+		}
+	};
 
-    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 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 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>
-        )
-    }
+	const getBalanceWagmi = async () => {
+		if (!address || !publicClient) {
+			return undefined;
+		}
+		const weiBalance = await publicClient.getBalance({ address });
+		const seiBalance = formatEther(weiBalance);
+		setBalance(seiBalance);
+	};
 
-    // Fetch count of a CosmWasm Contract using WASM Precompile
-    const fetchCount = async () => {
-        if (!publicClient) {
-            return;
-        }
+	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>
+		);
+	};
 
-        const COUNTER_CONTRACT_ADDRESS =
-            "sei14hj2tavq8fpesdwxxcu44rty3hh90vhujrvcmstl4zr3txmfvw9sh9m79m";
+	// Example of using precompiles to query native Sei modules.
+	const getBankSupply = async () => {
+		if (!publicClient) {
+			return;
+		}
 
-        const queryMsg = toHex(JSON.stringify({ get_count: {} }));
+		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 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);
-        }
-    }
+	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 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')
-        }
+	// Fetch count of a CosmWasm Contract using WASM Precompile
+	const fetchCount = async () => {
+		if (!publicClient) {
+			return;
+		}
 
-        try {
-		    const estimatedGas = await publicClient.estimateContractGas(params);
+		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);
+		}
+	};
 
-            // Call smart contract execute msg
-            await writeContractAsync({ ...params, gas: estimatedGas});
+	// Fetch count of a CosmWasm Contract using WASM Precompile
+	const incrementCounter = async () => {
+		if (!address || !publicClient) {
+			return;
+		}
 
-            // Wait for 1 block to confirm transaction
-            setTimeout(() => {}, 400);
-            await fetchCount();
+		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);
+		}
+	};
 
-        } 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>
+		);
+	};
 
-    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()}
+	return (
+		<div className="container">
+			<div className="grid">
+				{/* First card */}
+				{renderAddressExample()}
 
-                {/* Second card */}
-                {renderBalanceExample()}
+				{/* Second card */}
+				{renderBalanceExample()}
 
-                {/* Third card */}
-                {renderBankSupplyExample()}
+				{/* Third card */}
+				{renderBankSupplyExample()}
 
-                {/* Fourth card */}
-                {renderCounterContractExample()}
-            </div>
-        </div>
-    )
+				{/* Fourth card */}
+				{renderCounterContractExample()}
+			</div>
+		</div>
+	);
 }
 
 export default Examples;