Overview
In this guide, we will walk through the steps to integrate the Initia Wallet Widget into a NextJS project. The completed webapp will allow users to connect their Initia Wallet as well as other wallets and perform a simple token transfer transaction to their own wallet.Prerequisites
Project setup
First, we need to create a new template directory for our NextJS project.@initia/react-wallet-widget
: A React component that enables users to connect their Initia Wallet as well as other wallets.@initia/initia.js
: A JavaScript library to interact with the Initia L1 and Interwoven Rollups, including querying user balances and signing and sending transactions@cosmjs/proto-signing
: A JavaScript library that allows us to sign encode Cosmos SDK messages for signing.
Developing
Adding the Wallet Widget Provider
First, we need to add theWalletWidgetProvider
to our project. This will allow us to use the useWallet
hook to interact with the wallet. To do so, we need to import the WalletWidgetProvider
from @initia/react-wallet-widget
and wrap the children
component in src/layout.tsx
with it.
src/layout.tsx
chainId
to any chain that is in the initia-registry.
Using the Wallet Widget
Once we have theWalletWidgetProvider
in place, we can use the useWallet
hook to interact with the wallet. We will do this by modifying src/page.tsx
.
First, we declare use client
at the top of the file and import the necessary libraries and hooks.
src/page.tsx
useAddress
: A hook that returns the address of the connected wallet.useWallet
: A hook that returns the wallet object.MsgSend
: A message type that is used to send tokens from one wallet to another.EncodeObject
: A type that is used to encode Cosmos SDK messages for signing.Msg
: A type that is used to represent a Cosmos SDK message.useState
: A hook that allows us to use state in our component.
Msg
type into an array of EncodeObject
types.
src/page.tsx
address
: The address of the connected wallet.onboard
: The wallet object.view
: A function that allows us to view the wallet.requestTx
: A function that allows us to request a transaction from the wallet.isLoading
: A state variable that indicates whether the transaction is being requested.transactionHash
: A state variable that stores the transaction hash.
send
function that will send a transaction to the wallet. The function will check if the wallet is connected, and if it is, it will request a transaction to send 1000000 uinit
(1 INIT) from the wallet to itself.
src/page.tsx
- If no wallet is connected, it displays a “Connect” button.
- Once connected, it shows the user’s address and a “Send 1 INIT” button.
- The send button triggers a transaction sending 1 INIT to the user’s own address.
- After a successful transaction, it displays the transaction hash with a link to the block explorer.
src/page.tsx
src/layout.tsx
and src/page.tsx
file should look like the following:
bun run dev
and navigate to http://localhost:3000
to see the project in action. If everything is working correctly, you should see a an interface similar to the following:




- Showing the user’s INIT balance when the wallet is connected.
- Preventing the user from sending transactions if they do not have enough INIT balance.
- Allowing users to specify the amount of INIT to send and the destination address