> ## Documentation Index
> Fetch the complete documentation index at: https://docs.initia.xyz/llms.txt
> Use this file to discover all available pages before exploring further.

# Usage

> Learn how to enable, disable, and manage autosign in your application

## 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.

<Note>
  This page assumes autosign is already configured on `InterwovenKitProvider`.
  See [Configuration](./configuration) and [Provider
  Setup](../../references/setup/providers) first.
</Note>

## Accessing Autosign

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

```tsx theme={null}
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

```tsx theme={null}
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:

```tsx theme={null}
await autoSign.enable('interwoven-1')
```

### What Happens When Enabled

When `autoSign.enable()` is called:

<Steps>
  <Step title="Drawer Opens">
    A drawer appears asking the user to confirm autosign setup, showing which permissions will be granted.
  </Step>

  <Step title="Expiration Selection">
    The user can select an expiration duration from available defaults or use a
    custom duration.
  </Step>

  <Step title="Wallet Derivation">
    InterwovenKit requests a signature from the connected wallet and derives a
    dedicated AutoSign wallet for the current app origin.
  </Step>

  <Step title="Permission Grant">
    The user signs a single transaction to grant `authz` and `feegrant`
    permissions to the AutoSign wallet.
  </Step>

  <Step title="Activation">
    Autosign becomes active for the specified chain and message types. The Promise resolves on success.
  </Step>
</Steps>

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.

```tsx theme={null}
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>
  )
}
```

<Tip>
  Use `submitTxBlock` for seamless transactions with autosign. For transactions
  requiring user confirmation, use `requestTxBlock` instead.
</Tip>

## 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:

```tsx theme={null}
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>
  )
}
```