Drop and Replace

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.

1import React from "react";
2import { View, Pressable, Text } from "react-native";
3import {
4 useDropAndReplaceUserOperation,
5 useSendUserOperation,
6 useSmartAccountClient,
7} from "@account-kit/react-native";
8
9export function ComponentWithDropAndReplaceUO() {
10 const { client } = useSmartAccountClient({});
11
12 const { sendUserOperationAsync, isSendingUserOperation } =
13 useSendUserOperation({
14 client,
15 });
16
17 const { dropAndReplaceUserOperation, isDroppingAndReplacingUserOperation } =
18 useDropAndReplaceUserOperation({
19 client,
20 onSuccess: ({ hash, request }) => {
21 // [optional] Do something with the hash and request
22 },
23 onError: (error) => {
24 // [optional] Do something with the error
25 },
26 // [optional] ...additional mutationArgs
27 });
28
29 return (
30 <View>
31 <Pressable
32 onPress={async () => {
33 const { request } = await sendUserOperationAsync({
34 uo: {
35 target: "0xTARGET_ADDRESS",
36 data: "0x",
37 value: 0n,
38 },
39 });
40
41 dropAndReplaceUserOperation({
42 uoToDrop: request,
43 });
44 }}
45 disabled={isSendingUserOperation || isDroppingAndReplacingUserOperation}
46 >
47 <View>
48 <Text>
49 {isSendingUserOperation
50 ? "Sending..."
51 : isDroppingAndReplacingUserOperation
52 ? "Replacing..."
53 : "Send then Replace UO"}
54 </Text>
55 </View>
56 </Pressable>
57 </View>
58 );
59}

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.