Drop and Replace

1
import React from "react";
2
import { View, Pressable, Text } from "react-native";
3
import {
4
  useDropAndReplaceUserOperation,
5
  useSendUserOperation,
6
  useSmartAccountClient,
7
} from "@account-kit/react-native";
8
9
export 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
}