Sending Transactions

InterwovenKit provides multiple ways to send transactions, each designed for different use cases and user experience patterns.

For most applications, start with requestTxBlock for its simplicity. Upgrade to custom transaction sending methods as your application’s needs changes.

Methods

Transaction Methods

InterwovenKit offers two main approaches for sending transactions:

• using the built-in modal UI with requestTx* methods which handles fee selection for users or
• bypassing the modal with submitTx* methods for custom fee management and direct wallet interaction

Each approach also offers synchronous and blocking variants to suit different transaction confirmation needs.

Using InterwovenKit Modal

• requestTxBlock - Shows fee selection modal, waits for confirmation
• requestTxSync - Shows fee selection modal, returns hash immediately

Skips InterwovenKit Modal

• submitTxBlock - Direct to wallet, waits for confirmation
• submitTxSync - Direct to wallet, returns hash immediately

Method	UI Modal	Fee Required	Response	Use Case
requestTxBlock	✅ Yes	❌ Optional	DeliverTxResponse	Standard UX, need full results
requestTxSync	✅ Yes	❌ Optional	string (hash)	Standard UX, immediate feedback
submitTxBlock	❌ Skipped	✅ Required	DeliverTxResponse	Custom UX, need full results
submitTxSync	❌ Skipped	✅ Required	string (hash)	Custom UX, immediate feedback

Utility Methods

• estimateGas - Calculate gas requirements
• waitForTxConfirmation - Poll for transaction confirmation

Examples

Sending Transactions

Here are complete examples showing how to send transactions using each method:

requestTxBlock

import { useInterwovenKit } from "@initia/interwovenkit-react"
import type { EncodeObject } from "@initia/interwovenkit-react"

function SendWithRequestTxBlock() {
  const { requestTxBlock, address } = useInterwovenKit()

  const sendTokens = async () => {
    const message: EncodeObject = {
      typeUrl: "/cosmos.bank.v1beta1.MsgSend",
      value: {
        fromAddress: address,
        toAddress: "init1recipient...",
        amount: [{ denom: "uinit", amount: "1000000" }]
      }
    }

    try {
      const response = await requestTxBlock({
        messages: [message],
        memo: "Sending 1 INIT token"
      })
      
      if (response.code === 0) {
        console.log("✅ Transaction successful!")
        console.log("Hash:", response.transactionHash)
        console.log("Block height:", response.height)
        console.log("Gas used:", response.gasUsed)
      } else {
        console.error("❌ Transaction failed:", response.rawLog)
      }
    } catch (error) {
      console.error("Transaction error:", error)
    }
  }

  return (
    <button onClick={sendTokens}>
      Send 1 INIT
    </button>
  )
}

Utility Methods

These utility methods help with gas estimation and transaction confirmation:

estimateGas

import { useInterwovenKit } from "@initia/interwovenkit-react"
import { useState } from "react"

function GasEstimationExample() {
  const { estimateGas, address } = useInterwovenKit()
  const [gasEstimate, setGasEstimate] = useState<number | null>(null)
  const [isEstimating, setIsEstimating] = useState(false)

  const estimateTransactionGas = async () => {
    setIsEstimating(true)

    const messages = [{
      typeUrl: "/cosmos.bank.v1beta1.MsgSend",
      value: {
        fromAddress: address,
        toAddress: "init1recipient...",
        amount: [{ denom: "uinit", amount: "1000000" }]
      }
    }]

    try {
      const estimate = await estimateGas({
        messages,
        memo: "Gas estimation test"
      })
      
      setGasEstimate(estimate)
      console.log("⛽ Estimated gas:", estimate)
      console.log("With 20% buffer:", Math.floor(estimate * 1.2))
      console.log("With 50% buffer:", Math.floor(estimate * 1.5))
    } catch (error) {
      console.error("Gas estimation failed:", error)
    } finally {
      setIsEstimating(false)
    }
  }

  return (
    <div>
      <button onClick={estimateTransactionGas} disabled={isEstimating}>
        {isEstimating ? "Estimating..." : "Estimate Gas"}
      </button>
      
      {gasEstimate && (
        <div>
          <p>Estimated Gas: {gasEstimate.toLocaleString()} units</p>
          <p>With 20% buffer: {Math.floor(gasEstimate * 1.2).toLocaleString()} units</p>
          <p>With 50% buffer: {Math.floor(gasEstimate * 1.5).toLocaleString()} units</p>
        </div>
      )}
    </div>
  )
}

Choosing How to Send Transactions

Using requestTx* Methods

• Building standard applications with InterwovenKit’s built-in UI
• You want users to select transaction fees through the modal
• You don’t need custom fee calculation logic

Using submitTx* Methods

• You want to skip InterwovenKit’s fee selection modal
• Implementing programmatic fee management

Sync vs Block Methods

Choose Sync (*TxSync) when:

• You need immediate response for UI updates
• Planning to handle confirmation separately
• Building progress indicators or loading states
• Sending multiple transactions in sequence

Choose Block (*TxBlock) when:

• You need complete transaction results immediately
• Processing transaction events or outcomes
• Building single-step transaction flows
• Error handling requires transaction details

Transaction Parameters

Different transaction sending methods use different parameter types:

• UI Methods (requestTx*) use TxRequest - fee optional
• Direct Methods (submitTx*) use TxParams - fee required

See Transaction Types for complete parameter documentation.

Related Documentation

• Transaction Types - Parameter and response types
• Fee Calculation - Fee calculation utilities
• useInterwovenKit - Hook providing all transaction sending methods