Saltar al contenido principal

​
Importar

import { useFeeOptions } from '@0xsequence/connect'

​
Uso

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 || '')}
                onChange={() => setSelectedFeeOptionTokenAddress(option.token.contractAddress || '')}
              />
              <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 || '')}
            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: 
interface FeeOptionsConfig {
  skipFeeBalanceCheck?: boolean
}
ParámetroTypeDescription
skipFeeBalanceCheckbooleanIndica 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: 
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. 
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: 
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ámetroTypeDescription
idstringEl ID de confirmación de tarifa
feeTokenAddressstringLa dirección del token a usar para el pago de la comisión (use cadena vacía para el token nativo)

​
rejectPendingFeeOption

(id: string) => void Función para rechazar la selección de la opción de tarifa actual.
ParámetroTypeDescription
idstringEl 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.
⌘I