@sei-js/create-sei 0.0.1 → 0.0.3

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

@@ -1,177 +1,168 @@
-import { getCosmWasmClient, getQueryClient, getSigningCosmWasmClient, getStargateClient } from "@sei-js/cosmjs";
-import { useState } from "react";
-import { defaultUrls, selectedChain } from "../../constants";
-import { useChain } from "@cosmos-kit/react";
+import { getCosmWasmClient, getQueryClient, getSigningCosmWasmClient, getStargateClient } from '@sei-js/cosmjs';
+import { useState } from 'react';
+import { defaultUrls, selectedChain } from '../../constants';
+import { useChain } from '@cosmos-kit/react';
 
-import './Homepage.css'
+import './Homepage.css';
 type ExampleProps = {
-    chainId: string
-}
+	chainId: string;
+};
 
 function Examples({ chainId }: ExampleProps) {
-    const [balance, setBalance] = useState(0)
-    const [pool, setPool] = useState({ bonded_tokens: 0, not_bonded_tokens: 0 });
-    const [count, setCount] = useState(0)
-
-    const { address, getOfflineSignerAmino } = useChain(selectedChain.chain_name);
-
-    // Example of using the query client to query Sei modules
-    const getStakingPool = async () => {
-        const queryClient = await getQueryClient(defaultUrls[chainId].rest);
-        const result = await queryClient.cosmos.staking.v1beta1.pool({});
-        setPool(result.pool)
-    }
-    
-    const renderStakingPoolExample = () => {
-        return (
-            <div className="card">
-                <div className="card-header">
-                    <p className="card__title">Staking Pool</p>
-                    <small className="card__description">
-                        <a 
-                        href="https://sei-protocol.github.io/sei-js/functions/cosmjs.getQueryClient.html"
-                        target="_blank">Sei QueryClient</a> query example
-                    </small>
-                </div>
-                <div className="card-body">
-                    <div className="content-background space-between">
-                        <small>Bonded Tokens</small>
-                        <p>{pool ? pool.bonded_tokens : '---'} SEI</p>
-                    </div>
-                    <div className="content-background space-between">
-                        <small>Unbonded Tokens</small>
-                        <p>{pool ? pool.not_bonded_tokens : '---'} SEI</p>
-                    </div>
-                </div>
-                <div className="card-footer">
-                    <button onClick={getStakingPool}>Fetch Staking Data</button>
-                </div>
-            </div>
-        )
-    }
-
-    const getBalanceStargate = async () => {
-        if (!address) {
-            return undefined
-        }
-        const queryClient = await getStargateClient(defaultUrls[chainId].rpc);
-        const useiBalance = await queryClient.getBalance(address, 'usei');
-        const seiBalance = Number(useiBalance.amount) / 1000000
-        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://cosmos.github.io/cosmjs/latest/stargate/classes/StargateClient.html"
-                        target="_blank">Stargate 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={getBalanceStargate}>Fetch balance</button>
-                </div>
-            </div>
-        )
-    }
-
-    const fetchCount = async () => {
-        const cosmWasmClient = await getCosmWasmClient(defaultUrls[chainId].rpc);
-        console.log(cosmWasmClient);
-        const CONTRACT_ADDRESS =
-            "sei14hj2tavq8fpesdwxxcu44rty3hh90vhujrvcmstl4zr3txmfvw9sh9m79m";
-        const response = await cosmWasmClient.queryContractSmart(CONTRACT_ADDRESS, {
-          get_count: {},
-        });
-        const result = response?.count;
-        if (result) {
-            setCount(result);
-        }
-    }
-
-    const incrementCounter = async () => {
-        if (!address) {
-            return;
-        }
-        const offlineSigner = await getOfflineSignerAmino();
-        const signingCosmWasmClient = await getSigningCosmWasmClient(
-            defaultUrls[chainId].rpc,
-            offlineSigner
-        )
-
-        try {
-            const senderAddress = address;
-            const CONTRACT_ADDRESS =
-                "sei14hj2tavq8fpesdwxxcu44rty3hh90vhujrvcmstl4zr3txmfvw9sh9m79m";
-
-            // Build message content
-            const msg = { increment: {} };
-
-            // Define gas price and limit
-            const fee = {
-                amount: [{ amount: "20000", denom: "usei" }],
-                gas: "200000",
-            };
-
-            // Call smart contract execute msg
-            await signingCosmWasmClient?.execute(senderAddress, CONTRACT_ADDRESS, msg, fee);
-
-            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://cosmos.github.io/cosmjs/latest/cosmwasm-stargate/classes/SigningCosmWasmClient.html"
-                        target="_blank">
-                            CosmWasm Clients
-                        </a> example of 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="grid">
-            {renderBalanceExample()}
-            {renderStakingPoolExample()}
-            {renderCounterContractExample()}
-        </div>
-    )
+	const [balance, setBalance] = useState(0);
+	const [pool, setPool] = useState({ bonded_tokens: 0, not_bonded_tokens: 0 });
+	const [count, setCount] = useState(0);
+
+	const { address, getOfflineSignerAmino } = useChain(selectedChain.chain_name);
+
+	// Example of using the query client to query Sei modules
+	const getStakingPool = async () => {
+		const queryClient = await getQueryClient(defaultUrls[chainId].rest);
+		const result = await queryClient.cosmos.staking.v1beta1.pool({});
+		setPool(result.pool);
+	};
+
+	const renderStakingPoolExample = () => {
+		return (
+			<div className="card">
+				<div className="card-header">
+					<p className="card__title">Staking Pool</p>
+					<small className="card__description">
+						<a href="https://sei-protocol.github.io/sei-js/functions/cosmjs.getQueryClient.html" target="_blank">
+							Sei QueryClient
+						</a>{' '}
+						query example
+					</small>
+				</div>
+				<div className="card-body">
+					<div className="content-background space-between">
+						<small>Bonded Tokens</small>
+						<p>{pool ? pool.bonded_tokens : '---'} SEI</p>
+					</div>
+					<div className="content-background space-between">
+						<small>Unbonded Tokens</small>
+						<p>{pool ? pool.not_bonded_tokens : '---'} SEI</p>
+					</div>
+				</div>
+				<div className="card-footer">
+					<button onClick={getStakingPool}>Fetch Staking Data</button>
+				</div>
+			</div>
+		);
+	};
+
+	const getBalanceStargate = async () => {
+		if (!address) {
+			return undefined;
+		}
+		const queryClient = await getStargateClient(defaultUrls[chainId].rpc);
+		const useiBalance = await queryClient.getBalance(address, 'usei');
+		const seiBalance = Number(useiBalance.amount) / 1000000;
+		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://cosmos.github.io/cosmjs/latest/stargate/classes/StargateClient.html" target="_blank">
+							Stargate 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={getBalanceStargate}>Fetch balance</button>
+				</div>
+			</div>
+		);
+	};
+
+	const fetchCount = async () => {
+		const cosmWasmClient = await getCosmWasmClient(defaultUrls[chainId].rpc);
+		console.log(cosmWasmClient);
+		const CONTRACT_ADDRESS = 'sei14hj2tavq8fpesdwxxcu44rty3hh90vhujrvcmstl4zr3txmfvw9sh9m79m';
+		const response = await cosmWasmClient.queryContractSmart(CONTRACT_ADDRESS, {
+			get_count: {}
+		});
+		const result = response?.count;
+		if (result) {
+			setCount(result);
+		}
+	};
+
+	const incrementCounter = async () => {
+		if (!address) {
+			return;
+		}
+		const offlineSigner = await getOfflineSignerAmino();
+		const signingCosmWasmClient = await getSigningCosmWasmClient(defaultUrls[chainId].rpc, offlineSigner);
+
+		try {
+			const senderAddress = address;
+			const CONTRACT_ADDRESS = 'sei14hj2tavq8fpesdwxxcu44rty3hh90vhujrvcmstl4zr3txmfvw9sh9m79m';
+
+			// Build message content
+			const msg = { increment: {} };
+
+			// Define gas price and limit
+			const fee = {
+				amount: [{ amount: '20000', denom: 'usei' }],
+				gas: '200000'
+			};
+
+			// Call smart contract execute msg
+			await signingCosmWasmClient?.execute(senderAddress, CONTRACT_ADDRESS, msg, fee);
+
+			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://cosmos.github.io/cosmjs/latest/cosmwasm-stargate/classes/SigningCosmWasmClient.html" target="_blank">
+							CosmWasm Clients
+						</a>{' '}
+						example of 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="grid">
+			{renderBalanceExample()}
+			{renderStakingPoolExample()}
+			{renderCounterContractExample()}
+		</div>
+	);
 }
 
-export default Examples;
+export default Examples;

package/templates/vite-cosmos-template/src/components/Homepage/Homepage.css

@@ -1,156 +1,154 @@
 #root {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+	min-height: 100vh;
 }
 .app {
-  width: 100%;
-  height: 100%;
+	width: 100%;
+	height: 100%;
 }
 
 .logo {
-  width: 20%;
-  align-self: center;
+	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;
+	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;
+	width: 100%;
+	display: grid;
+	grid-template-columns: repeat(1, 1fr);
+	gap: 1rem;
 }
 .grid.docs {
-  grid-template-columns: repeat(1, 1fr);
+	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);
+	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;
+	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;
+	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;
+	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;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	margin: 1.5rem 0;
 }
 
 .card-footer {
-  display: flex;
-  flex-direction: row;
-  gap: 0.5rem;
+	display: flex;
+	flex-direction: row;
+	gap: 0.5rem;
 }
 
 .card__title {
-  font-size: 1.15rem;
-  font-weight: 600;
+	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;
+	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;
+	text-wrap: anywhere;
+	line-break: anywhere;
 }
 
 .space-between {
-  justify-content: space-between;
-  gap: 1rem;
+	justify-content: space-between;
+	gap: 1rem;
 }
 
 .hide-on-mobile {
-  display: none;
+	display: none;
 }
 
 .hide-on-desktop {
-  display: block;
+	display: block;
 }
 
 .external-link {
-  display: inline-flex;
-  gap: 0.25rem;
+	display: inline-flex;
+	gap: 0.25rem;
 }
 
 .get-started {
-  text-align: center;
+	text-align: center;
 }
 
 .wallet-connect {
-  display: flex;
-  gap: 1rem;
-  align-items: center;
+	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(3, 1fr);
-  }
-  .grid.docs {
-    grid-template-columns: repeat(3, 1fr);
-  }
+	.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(3, 1fr);
+	}
+	.grid.docs {
+		grid-template-columns: repeat(3, 1fr);
+	}
 }
 
 @media (min-width: 1024px) {
-  .container {
-    max-width: 80rem;
-  }
+	.container {
+		max-width: 80rem;
+	}
 }