Sei
Search
⌃K

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

Prerequisites

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 `http://127.0.0.1:5173/`

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(() => {
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

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();
}

Congrats!

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.