Drop and replace failing user operations

What is Drop and Replace?

If fees change and your user operation gets stuck in the mempool, you can use drop and replace to resend the user operation with higher fees.

Here's a quick example of how to use the useDropAndReplaceUserOperation() hook to drop and replace a user operation.

import React from "react";
import { View, Pressable, Text } from "react-native";
import {
  useDropAndReplaceUserOperation,
  useSendUserOperation,
  useSmartAccountClient,
} from "@account-kit/react-native";
 
export function ComponentWithDropAndReplaceUO() {
  const { client } = useSmartAccountClient({});
 
  const { sendUserOperationAsync, isSendingUserOperation } =
    useSendUserOperation({
      client,
    });
 
  const { dropAndReplaceUserOperation, isDroppingAndReplacingUserOperation } =
    useDropAndReplaceUserOperation({
      client,
      onSuccess: ({ hash, request }) => {
        // [optional] Do something with the hash and request
      },
      onError: (error) => {
        // [optional] Do something with the error
      },
      // [optional] ...additional mutationArgs
    });
 
  return (
    <View>
      <Pressable
        onPress={async () => {
          const { request } = await sendUserOperationAsync({
            uo: {
              target: "0xTARGET_ADDRESS",
              data: "0x",
              value: 0n,
            },
          });
 
          dropAndReplaceUserOperation({
            uoToDrop: request,
          });
        }}
        disabled={isSendingUserOperation || isDroppingAndReplacingUserOperation}
      >
        <View>
          <Text>
            {isSendingUserOperation
              ? "Sending..."
              : isDroppingAndReplacingUserOperation
              ? "Replacing..."
              : "Send then Replace UO"}
          </Text>
        </View>
      </Pressable>
    </View>
  );
}

You can also build a more complex retry logic in a case you want more control over how many times you want to retry a failed user operation.