Frontend Tutorial
Create and deploy a simple frontend locally
Please complete Counter tutorial to deploy the counter smart contract before continuing with this page
In this tutorial, we'll go over how to:
- Set up your frontend project
- Connect to a Sei wallet
- Query and display the current count
- Execute the smart contracts
incrementfunction
yarn create vite my-counter-frontend --template react-ts
This will create a new folder with a React project that uses typescript. Run
yarn install then yarn dev from the project root to start the server on `http://127.0.0.1:5173/`
Install the required project dependencies including @sei-js/core.
yarn add @sei-js/core @cosmjs/amino
# or
npm install @sei-js/core @cosmjs/amino
Replace your
app.tsx file with the following. You will need your contract address from the previous tutorial as well as an rpc address.import {useEffect, useState} from 'react'
import {connect, getSigningCosmWasmClient, WalletConnect} from '@sei-js/core'
import { coins } from '@cosmjs/amino';
import './App.css'
function App() {
const [count, setCount] = useState(0)
const [wallet, setWallet] = useState<WalletConnect>()
useEffect(() => {
connect('leap', 'atlantic-2').then(setWallet)
}, [])
useEffect(() => {
fetchCount().then(setCount)
}, [wallet])
const fetchCount = async () => {
// todo: Fetch count from contract
};
const incrementCounter = async () => {
// todo: Increment count
}
return (
<div>
<h1>Count is: {count}</h1>
<button onClick={incrementCounter}>increment</button>
</div>
)
}
export default App
Update the
fetchCount function to call the get_count query msg on the counter smart contractconst fetchCount = async () => {
if(!wallet) return;
const client = await getSigningCosmWasmClient("RPC_URL", wallet.offlineSigner);
const response = await client.queryContractSmart("CONTRACT_ADDRESS", {get_count: {}})
return response.count;
};
Replace your
incrementCounter function code with the following which creates a SigningCosmWasmClient, the execute msg, the fee object, then finally executes the TX.const incrementCounter = async () => {
if(!wallet) return;
const client = await getSigningCosmWasmClient("RPC_URL", wallet.offlineSigner);
const senderAddress = wallet.accounts[0].address;
const msg = {
contractAddress: "CONTRACT_ADDRESS",
msg: { increment: {} }
};
const fee = {
amount: coins(10000, 'usei'),
gas: "200000"
};
const response = await client.execute(senderAddress, "CONTRACT_ADDRESS", msg, fee)
// Updates the counter state again
await fetchCount();
}
You have now created a simple website for querying and executing a smart contract on Sei!
Last modified 1mo ago