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