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

# useFeeOptions

> Hook para manejar opciones de comisión en transacciones no patrocinadas

## Importar

```tsx theme={null}
import { useFeeOptions } from '@0xsequence/connect'
import { zeroAddress } from 'viem'
```

## Uso

```tsx theme={null}
import { useFeeOptions } from '@0xsequence/connect'
import { useEffect, useState } from 'react'

function App() {
  // Use the hook with default balance checking
  // This will return the wallet balance for each fee option
  const [
    pendingFeeOptionConfirmation,
    confirmPendingFeeOption,
    rejectPendingFeeOption
  ] = useFeeOptions()
  
  // Or skip balance checking if needed
  // const [pendingFeeOptionConfirmation, confirmPendingFeeOption, rejectPendingFeeOption] =
  //   useFeeOptions({ skipFeeBalanceCheck: true })
  
  const [selectedFeeOptionTokenAddress, setSelectedFeeOptionTokenAddress] = useState<string>()
  
  // Initialize with first option when fee options become available
  useEffect(() => {
    if (pendingFeeOptionConfirmation) {
      console.log('Pending fee options: ', pendingFeeOptionConfirmation.options)
      
      // You could select the first fee option by default
      if (pendingFeeOptionConfirmation.options.length > 0) {
        const firstOption = pendingFeeOptionConfirmation.options[0]
        setSelectedFeeOptionTokenAddress(firstOption.token.contractAddress || '')
      }
    }
  }, [pendingFeeOptionConfirmation])
  
  // Handle fee option selection and confirmation
  const handleConfirmFee = (tokenAddress: string) => {
    if (pendingFeeOptionConfirmation) {
      confirmPendingFeeOption(pendingFeeOptionConfirmation.id, tokenAddress)
    }
  }
  
  // Handle fee option rejection
  const handleRejectFee = () => {
    if (pendingFeeOptionConfirmation) {
      rejectPendingFeeOption(pendingFeeOptionConfirmation.id)
    }
  }
  
  // Render fee options UI
  if (pendingFeeOptionConfirmation) {
    return (
      <div>
        <h2>Select Fee Payment Token</h2>
        <div>
          {pendingFeeOptionConfirmation.options.map((option) => (
            <div key={option.token.contractAddress || 'native'}>
              <input
                type="radio"
                name="feeOption"
                checked={selectedFeeOptionTokenAddress === (option.token.contractAddress || zeroAddress)}
                onChange={() => setSelectedFeeOptionTokenAddress(option.token.contractAddress || zeroAddress)}
              />
              <label>
                {option.token.symbol} - {option.token.contractAddress || 'Native Token'}
                {/* Display balance info if extended with balance data */}
                {'balanceFormatted' in option && 
                  ` (Balance: ${option.balanceFormatted} ${option.token.symbol})`}
                {'hasEnoughBalanceForFee' in option && !option.hasEnoughBalanceForFee &&
                  ' (Insufficient Balance)'}
              </label>
            </div>
          ))}
        </div>
        <div>
          <button 
            onClick={() => handleConfirmFee(selectedFeeOptionTokenAddress || zeroAddress)}
            disabled={!selectedFeeOptionTokenAddress}
          >
            Confirm
          </button>
          <button onClick={handleRejectFee}>Cancel</button>
        </div>
      </div>
    )
  }
  
  return <div>No pending fee confirmation</div>
}
```

## Parámetros

El hook acepta un objeto de configuración opcional con las siguientes propiedades:

```tsx theme={null}
interface FeeOptionsConfig {
  skipFeeBalanceCheck?: boolean
}
```

| Parámetro             | Tipo      | Descripción                                                                     |
| --------------------- | --------- | ------------------------------------------------------------------------------- |
| `skipFeeBalanceCheck` | `boolean` | Indica si se omite la verificación de balances de tokens (por defecto: `false`) |

## Tipo de retorno: `UseFeeOptionsReturnType`

El hook retorna una tupla con los siguientes elementos:

```tsx theme={null}
type UseFeeOptionsReturnType = [
  pendingFeeOptionConfirmation: FeeOptionConfirmation | undefined,
  confirmPendingFeeOption: (id: string, feeTokenAddress: string) => void,
  rejectPendingFeeOption: (id: string) => void
]
```

### Propiedades

#### pendingFeeOptionConfirmation

`FeeOptionConfirmation | undefined`

Objeto que contiene los detalles actuales de confirmación de tarifa si hay una transacción pendiente, o `undefined` si no hay ninguna transacción pendiente de confirmación.

```tsx theme={null}
type FeeOptionConfirmation = {
  id: string                                    // Unique identifier for the fee confirmation
  options: Relayer.FeeOption[] | FeeOptionExtended[] // Available fee options with balance information
  chainId: number                               // Chain ID where the transaction will be executed
}
```

Cuando `skipFeeBalanceCheck` es `false`, las opciones serán de tipo `FeeOptionExtended`, que incluye información de saldo:

```tsx theme={null}
type FeeOptionExtended = Relayer.FeeOption & {
  balance: string                 // Raw balance string
  balanceFormatted: string        // Formatted balance with proper decimals
  hasEnoughBalanceForFee: boolean // Indicates if wallet has enough balance
}
```

#### confirmPendingFeeOption

`(id: string, feeTokenAddress: string) => void`

Función para confirmar la opción de tarifa seleccionada.

| Parámetro         | Tipo     | Descripción                                                                                       |
| ----------------- | -------- | ------------------------------------------------------------------------------------------------- |
| `id`              | `string` | El ID de confirmación de tarifa                                                                   |
| `feeTokenAddress` | `string` | La dirección del token a usar para el pago de comisiones (use `zeroAddress` para el token nativo) |

#### rejectPendingFeeOption

`(id: string) => void`

Función para rechazar la selección de la opción de tarifa actual.

| Parámetro | Tipo     | Descripción                                |
| --------- | -------- | ------------------------------------------ |
| `id`      | `string` | El ID de confirmación de tarifa a rechazar |

## Notas

Este hook proporciona funcionalidad para manejar opciones de comisión de Sequence V3 en transacciones no patrocinadas.

Características principales:

* Intercepte opciones de comisión para una transacción en token nativo y tokens ERC20
* Obtener automáticamente los saldos del wallet del usuario para cada opción de tarifa (a menos que `skipFeeBalanceCheck` sea `true`)
* Permita que los usuarios seleccionen su token de comisión preferido mediante un componente de UI
* Confirmar o rechazar selecciones de tarifa
* Gestión de estado compartido entre múltiples instancias del hook

El hook se integra con el conector Sequence V3 para interceptar solicitudes de confirmación de comisión y presenta una interfaz de usuario para permitir la selección del token de comisión. Usa gestión de estado compartido para asegurar un comportamiento consistente entre varias instancias del hook.

Para una guía detallada sobre cómo usar el hook, consulte la guía [Pagar gas en ERC20](/sdk/web/wallet-sdk/embedded/guides/pay-gas-in-erc20).