@sei-js/create-sei 0.0.2 → 0.0.4

package/templates/next-template/src/app/components/Homepage/Examples.tsx

@@ -0,0 +1,257 @@
+'use client';
+
+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>
+						) : (
+							<p> --- </p>
+						)}
+
+						<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;

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

package/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/{dist/templates/next-wagmi-template → 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/templates/next-template/src/app/components/index.ts

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

package/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/templates/next-template/src/app/constants/index.ts

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