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

> スポンサーなしトランザクションの手数料オプションを扱うためのフックです

## インポート

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

## 使い方

```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>
}
```

## パラメータ

このフックは、以下のプロパティを持つオプションの設定オブジェクトを受け取ります：

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

| パラメータ                 | 型         | 説明                                  |
| --------------------- | --------- | ----------------------------------- |
| `skipFeeBalanceCheck` | `boolean` | トークン残高の確認をスキップするかどうか（デフォルト：`false`） |

## 戻り値の型：`UseFeeOptionsReturnType`

このフックは、以下の要素を持つタプルを返します：

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

### プロパティ

#### pendingFeeOptionConfirmation

`FeeOptionConfirmation | undefined`

トランザクションが保留中の場合は現在の手数料確認の詳細を含むオブジェクト、保留中でない場合は`undefined`。

```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
}
```

`skipFeeBalanceCheck`が`false`の場合、オプションは残高情報を含む`FeeOptionExtended`型になります：

```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`

選択した手数料オプションを確定する関数です。

| パラメータ             | 型        | 説明                                                  |
| ----------------- | -------- | --------------------------------------------------- |
| `id`              | `string` | 手数料確認ID                                             |
| `feeTokenAddress` | `string` | 手数料支払いに使用するトークンのアドレス（ネイティブトークンの場合は`zeroAddress`を使用） |

#### rejectPendingFeeOption

`(id: string) => void`

現在の手数料オプション選択を却下する関数です。

| パラメータ | 型        | 説明          |
| ----- | -------- | ----------- |
| `id`  | `string` | 却下する手数料確認ID |

## 補足

このフックは、スポンサーなしトランザクションのSequence V3手数料オプションを扱う機能を提供します。

主な特徴：

* ネイティブトークンやERC20トークンでのトランザクション手数料オプションをインターセプトします
* （`skipFeeBalanceCheck`が`true`でない限り）各手数料オプションごとにユーザーのウォレット残高を自動取得
* UIコンポーネントを通じて、ユーザーが希望する手数料トークンを選択できるようにします
* 手数料選択の確定・却下が可能
* 複数のフックインスタンス間で共有状態管理を実現

このフックはSequence V3コネクタと連携し、手数料確認リクエストをインターセプトして、手数料トークン選択用のUIを表示します。複数インスタンス間で一貫した動作を保証するため、共有状態管理を利用しています。

フックの使い方について詳しくは、[ERC20でガスを支払う](/sdk/web/wallet-sdk/embedded/guides/pay-gas-in-erc20)ガイドをご覧ください。