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 increment function


Creating a React project

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 ``

Install dependencies

Install the required project dependencies including @sei-js/core.
yarn add @sei-js/core @cosmjs/amino
# or
npm install @sei-js/core @cosmjs/amino

Update boilerplate UI

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(() => {
}, [wallet])
const fetchCount = async () => {
// todo: Fetch count from contract
const incrementCounter = async () => {
// todo: Increment count
return (
<h1>Count is: {count}</h1>
<button onClick={incrementCounter}>increment</button>
export default App

Query the current count

Update the fetchCount function to call the get_count query msg on the counter smart contract
const 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;

Execute the smart contract

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!
Please see Javascript reference for more examples on how to do even more with your frontend.