Using EIP-7702

1
import { Address, Authorization, createWalletClient, custom } from "viem";
2
import { useSign7702Authorization } from "@privy-io/react-auth";
3
import { AuthorizationRequest, WalletClientSigner } from "@aa-sdk/core";
4
import { sepolia, alchemy } from "@account-kit/infra";
5
import { useEffect, useState } from "react";
6
import {
7
 createSmartWalletClient,
8
 SmartWalletClient,
9
} from "@account-kit/wallet-client";
10
import { ConnectedWallet as PrivyWallet } from "@privy-io/react-auth";
11
12
/\*_ Creates an Alchemy Smart Wallet client for an embedded Privy wallet using EIP-7702. _/;
13
export const useSmartEmbeddedWallet = ({
14
 embeddedWallet,
15
}: {
16
 embeddedWallet: PrivyWallet;
17
}) => {
18
 const { signAuthorization } = useSign7702Authorization();
19
 const [client, setClient] = useState<SmartWalletClient>();
20
21
 useEffect(() => {
22
 const apiKey = process.env.NEXT_PUBLIC_ALCHEMY_API_KEY;
23
 if (!apiKey) {
24
 throw new Error("Missing NEXT_PUBLIC_ALCHEMY_API_KEY");
25
 }
26
 (async () => {
27
 const provider = await embeddedWallet.getEthereumProvider();
28
29
 const baseSigner = new WalletClientSigner(
30
 createWalletClient({
31
 account: embeddedWallet.address as Address,
32
 chain: sepolia,
33
 transport: custom(provider),
34
 }),
35
 "privy",
36
 );
37
38
 const signer = {
39
 ...baseSigner,
40
 signAuthorization: async (
41
 unsignedAuth: AuthorizationRequest<number>,
42
 ): Promise<Authorization<number, true>> => {
43
 const signature = await signAuthorization({
44
 ...unsignedAuth,
45
 contractAddress:
46
 unsignedAuth.address ?? unsignedAuth.contractAddress,
47
 });
48
49
 return {
50
 ...unsignedAuth,
51
 ...signature,
52
 };
53
 },
54
 };
55
56
 const client = createSmartWalletClient({
57
 chain: sepolia,
58
 transport: alchemy({
59
 apiKey,
60
 }),
61
 signer,
62
 policyId: process.env.NEXT_PUBLIC_ALCHEMY_POLICY_ID,
63
 });
64
65
 setClient(client);
66
 })();
67
 }, [embeddedWallet, signAuthorization]);
68
69
 return { client };
70
};

1
import { ConnectedWallet as PrivyWallet } from "@privy-io/react-auth";
2
import { useSmartEmbeddedWallet } from "../hooks/use-smart-embedded-wallet";
3
import { useCallback, useState } from "react";
4
import type { Address, Hex } from "viem";
5
6
export const SmartWalletDemo = ({
7
 embeddedWallet,
8
}: {
9
 embeddedWallet: PrivyWallet;
10
}) => {
11
 const { client } = useSmartEmbeddedWallet({ embeddedWallet });
12
13
 const [status, setStatus] = useState<
14
 | { status: "idle" | "error" | "sending" }
15
 | { status: "success"; txHash: Hex }
16
 >({ status: "idle" });
17
18
 const delegateAndSend = useCallback(async () => {
19
 if (!client) {
20
 return;
21
 }
22
23
 setStatus({ status: "sending" });
24
 try {
25
 const {
26
 preparedCallIds: [callId],
27
 } = await client.sendCalls({
28
 capabilities: {
29
 eip7702Auth: true,
30
 },
31
 from: embeddedWallet.address as Address,
32
 calls: [
33
 {
34
 to: "0x0000000000000000000000000000000000000000",
35
 data: "0x",
36
 },
37
 ],
38
 });
39
 if (!callId) {
40
 throw new Error("Missing call id");
41
 }
42
43
 const { receipts } = await client.waitForCallsStatus({ id: callId });
44
 if (!receipts?.length) {
45
 throw new Error("Missing transaction receipts");
46
 }
47
 const [receipt] = receipts;
48
 if (receipt?.status !== "success") {
49
 throw new Error("Transaction failed");
50
 }
51
 setStatus({ status: "success", txHash: receipt.transactionHash });
52
 } catch (err) {
53
 console.error("Transaction failed:", err);
54
 setStatus({ status: "error" });
55
 }
56
 }, [client, embeddedWallet]);
57
58
 return (
59
 <div className="flex flex-col gap-4">
60
 <div>
61
 <h2 className="text-lg font-semibold text-gray-900">
62
 Embedded EOA Address
63
 </h2>
64
 <p className="text-gray-600 font-mono break-all">
65
 {embeddedWallet.address}
66
 </p>
67
 </div>
68
 <button
69
 onClick={delegateAndSend}
70
 disabled={!client || status.status === "sending"}
71
 className={`w-full py-3 px-4 rounded-lg font-semibold text-white transition-colors ${
72
 status.status === "sending"
73
 ? "bg-indigo-400 cursor-not-allowed"
74
 : "bg-indigo-600 hover:bg-indigo-700"
75
 }`}
76
 >
77
 {status.status === "sending"
78
 ? "Sending..."
79
 : "Upgrade & Send Sponsored Transaction"}
80
 </button>
81
 {status.status === "success" && (
82
 <section className="bg-green-50 rounded-xl shadow-lg p-6 border border-green-200">
83
 <h2 className="text-lg font-semibold text-green-900 mb-4">
84
 Congrats! Sponsored transaction successful!
85
 </h2>
86
 <p className="text-green-700 mb-4">
87
 You've successfully upgraded your EOA to a smart account and sent
88
 your first sponsored transaction.{" "}
89
 <a
90
 href="https://www.alchemy.com/docs/wallets/transactions/using-eip-7702"
91
 className="text-indigo-600 hover:underline"
92
 target="_blank"
93
 rel="noopener noreferrer"
94
 >
95
 Keep building
96
 </a>
97
 .
98
 </p>
99
 <p className="text-green-700">
100
 <strong>Transaction Hash:</strong>{" "}
101
 <span className="font-mono break-all">{status.txHash}</span>
102
 </p>
103
 </section>
104
 )}
105
 {status.status === "error" && (
106
 <section className="bg-red-50 rounded-xl shadow-lg p-6 border border-red-200">
107
 <h2 className="text-lg font-semibold text-red-900 mb-4">
108
 Transaction Failed
109
 </h2>
110
 <p className="text-red-700">
111
 There was an error sending your sponsored transaction. Please try
112
 again.
113
 </p>
114
 </section>
115
 )}
116
 </div>
117
 );
118
};