1
import {
2
  useSmartAccountClient,
3
  usePrepareSwap,
4
  useSignAndSendPreparedCalls,
5
  useWaitForCallsStatus,
6
  useUser,
7
} from "@account-kit/react";
8
9
// Token addresses on Arbitrum
10
const TOKENS = {
11
  NATIVE: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEee", // ETH
12
  USDC: "0xaf88d065e77c8cC2239327C5EDb3A432268e5831",
13
} as const;
14
15
export default function SwapTokens() {
16
  const user = useUser();
17
  const { client } = useSmartAccountClient({
18
    accountParams: { mode: "7702" },
19
  });
20
21
  const { prepareSwapAsync, isPreparingSwap } = usePrepareSwap({
22
    client,
23
  });
24
25
  const {
26
    signAndSendPreparedCallsAsync,
27
    isSigningAndSendingPreparedCalls,
28
    signAndSendPreparedCallsResult,
29
  } = useSignAndSendPreparedCalls({ client });
30
31
  const {
32
    data: statusResult,
33
    isLoading: isWaitingForConfirmation,
34
    error,
35
  } = useWaitForCallsStatus({
36
    client,
37
    id: signAndSendPreparedCallsResult?.preparedCallIds[0],
38
  });
39
40
  const handleSwap = async () => {
41
    if (!client?.account.address) {
42
      throw new Error("No account connected");
43
    }
44
45
    try {
46
      // Step 1: Request swap quote
47
      const result = await prepareSwapAsync({
48
        from: client.account.address,
49
        fromToken: TOKENS.NATIVE,
50
        toToken: TOKENS.USDC,
51
        fromAmount: "0x5af3107a4000", // 0.0001 ETH
52
        // postCalls: [{
53
        //   to: "0x...",
54
        //   data: "0x...",
55
        //   value: "0x0"
56
        // }], // Optional: batch additional calls after the swap
57
      });
58
59
      const { quote, ...calls } = result;
60
      console.log("Swap quote:", quote);
61
62
      // Ensure we have user operation calls
63
      if (calls.rawCalls) {
64
        throw new Error("Expected user operation calls");
65
      }
66
67
      // Step 2: Sign and send the prepared calls
68
      const callIds = await signAndSendPreparedCallsAsync(calls);
69
70
      console.log("Transaction sent");
71
      console.log("Call ID:", callIds?.preparedCallIds[0]);
72
    } catch (error) {
73
      console.error("Swap failed:", error);
74
    }
75
  };
76
77
  if (!user) {
78
    return <div>Please log in to use swap functionality</div>;
79
  }
80
81
  return (
82
    <div>
83
      <button onClick={handleSwap} disabled={!client}>
84
        {isPreparingSwap
85
          ? "Requesting quote..."
86
          : isSigningAndSendingPreparedCalls
87
            ? "Signing and sending..."
88
            : "Swap ETH to USDC"}
89
      </button>
90
91
      {signAndSendPreparedCallsResult && (
92
        <p>
93
          {isWaitingForConfirmation
94
            ? "Waiting for confirmation..."
95
            : error
96
              ? `Error: ${error}`
97
              : statusResult?.statusCode === 200
98
                ? "Swap confirmed!"
99
                : `Status: ${statusResult?.statusCode}`}
100
        </p>
101
      )}
102
    </div>
103
  );
104
}