Usage

Overview

Once autosign is configured, you can enable and manage it in your application using the autoSign object from useInterwovenKit(). This guide covers how to use autosign in your code.

This page assumes autosign is already configured on InterwovenKitProvider. See Configuration and Provider Setup first.

Accessing Autosign

The autoSign object is available via the useInterwovenKit() hook:

import { useInterwovenKit } from '@initia/interwovenkit-react'

function MyComponent() {
  const { autoSign } = useInterwovenKit()

  // Use autoSign.enable(), autoSign.disable(), etc.
}

Enabling Autosign

To enable autosign, call the enable() method. This opens a drawer where users confirm the autosign setup and select an expiration duration. The following examples show client components for enabling and disabling autosign. You can adapt this logic to your own UI or component structure.

Example: ToggleAutosignButton

import { useMutation } from '@tanstack/react-query'
import { useInterwovenKit } from '@initia/interwovenkit-react'

const chainId = 'your-chain-id'

export default function ToggleAutosignButton() {
  const { autoSign, address } = useInterwovenKit()

  const enable = useMutation({
    mutationFn: () => autoSign.enable(chainId),
    onError: (error) => console.error('Failed to enable:', error),
  })

  const disable = useMutation({
    mutationFn: () => autoSign.disable(chainId),
    onError: (error) => console.error('Failed to disable:', error),
  })

  if (!address) return null

  if (autoSign.isEnabledByChain[chainId]) {
    return (
      <button
        onClick={() => disable.mutate()}
        disabled={autoSign.isLoading || disable.isPending}
      >
        Disable Autosign
      </button>
    )
  }

  return (
    <button
      onClick={() => enable.mutate()}
      disabled={autoSign.isLoading || enable.isPending}
    >
      Enable Autosign
    </button>
  )
}

Enabling for a Specific Chain

Specify a chain ID to enable autosign for a particular chain:

await autoSign.enable('interwoven-1')

What Happens When Enabled

When autoSign.enable() is called:

Drawer Opens

A drawer appears asking the user to confirm autosign setup, showing which permissions will be granted.

Expiration Selection

The user can select an expiration duration from available defaults or use a custom duration.

Wallet Derivation

InterwovenKit requests a signature from the connected wallet and derives a dedicated AutoSign wallet for the current app origin.

Permission Grant

The user signs a single transaction to grant authz and feegrant permissions to the AutoSign wallet.

Activation

Autosign becomes active for the specified chain and message types. The Promise resolves on success.

The method returns a Promise that resolves when autosign is successfully enabled or rejects if the user cancels or an error occurs.

Sending Transactions with Autosign

Once autosign is enabled, you can send transactions without user confirmation using submitTxBlock. This method signs and broadcasts transactions directly using the AutoSign wallet when the transaction matches the configured grants.

import { calculateFee, GasPrice } from '@cosmjs/stargate'
import { MsgSend } from 'cosmjs-types/cosmos/bank/v1beta1/tx'
import { useMutation } from '@tanstack/react-query'
import { useInterwovenKit } from '@initia/interwovenkit-react'

function SendWithAutosign() {
  const { initiaAddress, submitTxBlock, estimateGas } = useInterwovenKit()

  const { mutate, isPending } = useMutation({
    mutationFn: async () => {
      const messages = [
        {
          typeUrl: '/cosmos.bank.v1beta1.MsgSend',
          value: MsgSend.fromPartial({
            fromAddress: initiaAddress,
            toAddress: 'init1...', // recipient address
            amount: [{ amount: '1000000', denom: 'uinit' }],
          }),
        },
      ]

      // Estimate gas and calculate fee
      const gasEstimate = await estimateGas({ messages })
      const fee = calculateFee(
        Math.ceil(gasEstimate * 1.4),
        GasPrice.fromString('0.015uinit'),
      )

      // Submit transaction directly (no modal)
      const { transactionHash } = await submitTxBlock({ messages, fee })
      return transactionHash
    },
  })

  return (
    <button onClick={() => mutate()} disabled={isPending}>
      Send
    </button>
  )
}

Use submitTxBlock for seamless transactions with autosign. For transactions requiring user confirmation, use requestTxBlock instead.

Disabling Autosign

Users can disable autosign at any time. This revokes all grants for the selected chain and prevents further automatic signing.

Checking Autosign Status

Use the isEnabledByChain property to check if autosign is active for a chain:

import { useInterwovenKit } from '@initia/interwovenkit-react'

function AutosignStatus({ chainId }: { chainId: string }) {
  const { autoSign } = useInterwovenKit()

  if (autoSign.isLoading) {
    return <span>Loading...</span>
  }

  const isEnabled = autoSign.isEnabledByChain[chainId]
  const expiration = autoSign.expiredAtByChain[chainId]

  if (!isEnabled) {
    return <span>Autosign disabled</span>
  }

  return (
    <span>
      Autosign enabled
      {expiration && ` (expires ${expiration.toLocaleString()})`}
    </span>
  )
}

InterwovenKit

Integrations

Features

API Reference

Overview

Accessing Autosign

Enabling Autosign

Example: ToggleAutosignButton

Enabling for a Specific Chain

What Happens When Enabled

Sending Transactions with Autosign

Disabling Autosign

Checking Autosign Status

​Overview

​Accessing Autosign

​Enabling Autosign

​Example: ToggleAutosignButton

​Enabling for a Specific Chain

​What Happens When Enabled

​Sending Transactions with Autosign

​Disabling Autosign

​Checking Autosign Status

Overview

Accessing Autosign

Enabling Autosign

Example: ToggleAutosignButton

Enabling for a Specific Chain

What Happens When Enabled

Sending Transactions with Autosign

Disabling Autosign

Checking Autosign Status