useDropAndReplaceUserOperation

Custom hook that handles the drop and replace user operation for a given client and mutation arguments.

Import

1
import { useDropAndReplaceUserOperation } from "@account-kit/react";

Usage

import React from "react";
import {
  
function useDropAndReplaceUserOperation<TEntryPointVersion extends GetEntryPointFromAccount<TAccount>, TAccount extends SupportedAccounts = SupportedAccounts>({ client, ...mutationArgs }: UseDropAndReplaceUserOperationArgs<TEntryPointVersion, TAccount>): UseDropAndReplaceUserOperationResult<TEntryPointVersion, TAccount>
Custom hook that handles the drop and replace user operation for a given client and mutation arguments.
useDropAndReplaceUserOperation,
  
function useSendUserOperation<TEntryPointVersion extends GetEntryPointFromAccount<TAccount>, TAccount extends SupportedAccounts = SupportedAccounts>(params: UseSendUserOperationArgs<TEntryPointVersion, TAccount>): UseSendUserOperationResult<TEntryPointVersion, TAccount>
A hook that returns functions for sending user operations. You can also optionally wait for a user operation to be mined and get the transaction hash before returning using waitForTx. Like any method that takes a smart account client, throws an error if client undefined or is signer not authenticated.
useSendUserOperation,
  
function useSmartAccountClient<TChain extends Chain | undefined = Chain | undefined, TAccount extends SupportedAccountTypes | undefined = "ModularAccountV2">(args: UseSmartAccountClientProps<TChain, TAccount>): UseSmartAccountClientResult<TChain, SupportedAccount<TAccount extends undefined ? "ModularAccountV2" : TAccount>>
useSmartAccountClient,
} from "@account-kit/react";

export function 
function ComponentWithDropAndReplaceUO(): JSX.Element
ComponentWithDropAndReplaceUO() {
  const { 
const client: {
    account: ModularAccountV2<AlchemySigner>;
    batch?: {
        multicall?: boolean | Prettify<MulticallBatchOptions> | undefined;
    } | undefined;
    ... 84 more ...;
    extend: <const client extends {
        ...;
    } & ExactPartial<...>>(fn: (client: Client<...>) => client) => Client<...>;
} | undefined
client } = 
useSmartAccountClient<Chain | undefined, "ModularAccountV2">(args: UseSmartAccountClientProps<Chain | undefined, "ModularAccountV2">): UseSmartAccountClientResult<Chain | undefined, ModularAccountV2<...>>
useSmartAccountClient({});

  const { 
const sendUserOperationAsync: UseMutateAsyncFunction<SendUserOperationWithEOA<keyof EntryPointRegistryBase<unknown>>, Error, SendUserOperationParameters<SupportedAccounts>, unknown>
sendUserOperationAsync, 
const isSendingUserOperation: boolean
isSendingUserOperation } =
    
useSendUserOperation<keyof EntryPointRegistryBase<unknown>, SupportedAccounts>(params: UseSendUserOperationArgs<keyof EntryPointRegistryBase<unknown>, SupportedAccounts>): UseSendUserOperationResult<...>
A hook that returns functions for sending user operations. You can also optionally wait for a user operation to be mined and get the transaction hash before returning using waitForTx. Like any method that takes a smart account client, throws an error if client undefined or is signer not authenticated.
useSendUserOperation({
      
client: {
    account: SupportedAccounts;
    batch?: {
        multicall?: boolean | Prettify<MulticallBatchOptions> | undefined;
    } | undefined;
    ... 84 more ...;
    extend: <const client extends {
        ...;
    } & ExactPartial<...>>(fn: (client: Client<...>) => client) => Client<...>;
} | {
    ...;
} | {
    ...;
} | {
    ...;
} | undefined
client,
    });
  const { 
const dropAndReplaceUserOperation: UseMutateFunction<SendUserOperationResult<keyof EntryPointRegistryBase<unknown>>, Error, DropAndReplaceUserOperationParameters<SupportedAccounts>, unknown>
dropAndReplaceUserOperation, 
const isDroppingAndReplacingUserOperation: boolean
isDroppingAndReplacingUserOperation } =
    
useDropAndReplaceUserOperation<keyof EntryPointRegistryBase<unknown>, SupportedAccounts>({ client, ...mutationArgs }: UseDropAndReplaceUserOperationArgs<keyof EntryPointRegistryBase<unknown>, SupportedAccounts>): UseDropAndReplaceUserOperationResult<...>
Custom hook that handles the drop and replace user operation for a given client and mutation arguments.
useDropAndReplaceUserOperation({
      
client: {
    account: SupportedAccounts;
    batch?: {
        multicall?: boolean | Prettify<MulticallBatchOptions> | undefined;
    } | undefined;
    ... 84 more ...;
    extend: <const client extends {
        ...;
    } & ExactPartial<...>>(fn: (client: Client<...>) => client) => Client<...>;
} | {
    ...;
} | {
    ...;
} | {
    ...;
} | undefined
client,
      
onSuccess?: ((data: SendUserOperationResult<keyof EntryPointRegistryBase<unknown>>, variables: DropAndReplaceUserOperationParameters<SupportedAccounts>, context: unknown) => Promise<unknown> | unknown) | undefined
onSuccess: ({ 
hash: `0x${string}`
hash, 
request: UserOperationRequest<keyof EntryPointRegistryBase<unknown>>
request }) => {
        // [optional] Do something with the hash and request
      },
      
onError?: ((error: Error, variables: DropAndReplaceUserOperationParameters<SupportedAccounts>, context: unknown) => Promise<unknown> | unknown) | undefined
onError: (
error: Error
error) => {
        // [optional] Do something with the error
      },
      // [optional] ...additional mutationArgs
    });

  return (
    <
React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div>
      <
React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
button
        
React.DOMAttributes<HTMLButtonElement>.onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined
onClick={async () => {
          const { 
const request: UserOperationRequest<keyof EntryPointRegistryBase<unknown>> | undefined
request } = await 
const sendUserOperationAsync: (variables: SendUserOperationParameters<SupportedAccounts>, options?: MutateOptions<SendUserOperationWithEOA<keyof EntryPointRegistryBase<unknown>>, Error, SendUserOperationParameters<...>, unknown> | undefined) => Promise<...>
sendUserOperationAsync({
            
uo: UserOperationCallData | BatchUserOperationCallData
uo: {
              
target: `0x${string}`
target: "0xTARGET_ADDRESS",
              
data: `0x${string}`
data: "0x",
              
value?: bigint | undefined
value: 0n,
            },
          });

          
const dropAndReplaceUserOperation: (variables: DropAndReplaceUserOperationParameters<SupportedAccounts>, options?: MutateOptions<SendUserOperationResult<keyof EntryPointRegistryBase<unknown>>, Error, DropAndReplaceUserOperationParameters<...>, unknown> | undefined) => void
dropAndReplaceUserOperation({
            
uoToDrop: UserOperationRequest<keyof EntryPointRegistryBase<unknown>>
uoToDrop: 
const request: UserOperationRequest<keyof EntryPointRegistryBase<unknown>> | undefined
request,
          });
        }}
        
React.ButtonHTMLAttributes<HTMLButtonElement>.disabled?: boolean | undefined
disabled={
const isSendingUserOperation: boolean
isSendingUserOperation || 
const isDroppingAndReplacingUserOperation: boolean
isDroppingAndReplacingUserOperation}
      >
        {
const isSendingUserOperation: boolean
isSendingUserOperation
          ? "Sending..."
          : 
const isDroppingAndReplacingUserOperation: boolean
isDroppingAndReplacingUserOperation
            ? "Replacing..."
            : "Send then Replace UO"}
      </
React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
button>
    </
React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div>
  );
}

Parameters

config

UseDropAndReplaceUserOperationArgs<TEntryPointVersion, TAccount> The configuration parameters including the client and other mutation arguments. ref

Returns

UseDropAndReplaceUserOperationResult<TEntryPointVersion, TAccount> The result containing the mutation function, result data, loading state, and any error. ref