Skip to content

Commit 63eb191

Browse files
avarobinsonavarobinson
committed
updating demo
1 parent 87f95d8 commit 63eb191

File tree

2 files changed

+97
-24
lines changed

2 files changed

+97
-24
lines changed

‎package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎pages/dashboard.tsx‎

Lines changed: 96 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { usePrivy, useWallets } from "@privy-io/react-auth";
44
import Head from "next/head";
55
import { createWalletClient, custom, Hex } from "viem";
66
import { useSignAuthorization } from "@privy-io/react-auth";
7-
// import { sepolia } from "viem/chains";
87
import {
98
AuthorizationRequest,
109
SmartAccountSigner,
@@ -21,6 +20,10 @@ export default function DashboardPage() {
2120
const router = useRouter();
2221
const { ready, authenticated, logout } = usePrivy();
2322
const { client } = usePrivy7702();
23+
const { wallets } = useWallets();
24+
const embeddedWallet = wallets.find((x) => x.walletClientType === "privy");
25+
const [isLoading, setIsLoading] = useState(false);
26+
const [transactionHash, setTransactionHash] = useState<string | null>(null);
2427

2528
useEffect(() => {
2629
if (ready && !authenticated) {
@@ -33,41 +36,111 @@ export default function DashboardPage() {
3336
console.error("No client yet");
3437
return;
3538
}
36-
// Delegating (if not already) and sending a sponsored user operation
37-
const uoHash = await client.sendUserOperation({
38-
uo: {
39-
target: "0xc0ffee254729296a45a3885639AC7E10F9d54979",
40-
value: 0n,
41-
data: "0x0",
42-
},
43-
});
44-
const txnHash = await client.waitForUserOperationTransaction(uoHash);
45-
console.log("transaction hash", txnHash);
39+
setIsLoading(true);
40+
try {
41+
const uoHash = await client.sendUserOperation({
42+
uo: {
43+
target: "0xc0ffee254729296a45a3885639AC7E10F9d54979",
44+
value: 0n,
45+
data: "0x0",
46+
},
47+
});
48+
const txnHash = await client.waitForUserOperationTransaction(uoHash);
49+
setTransactionHash(txnHash);
50+
console.log("transaction hash", txnHash);
51+
} catch (error) {
52+
console.error("Transaction failed:", error);
53+
} finally {
54+
setIsLoading(false);
55+
}
4656
}
4757

4858
return (
4959
<div>
5060
<Head>
51-
<title>Privy Auth Demo</title>
61+
<title>Alchemy Smart Wallets + EIP-7702</title>
5262
</Head>
5363

54-
<main className="flex flex-col min-h-screen px-4 sm:px-20 py-6 sm:py-10 bg-privy-light-blue">
64+
<main className="min-h-screen px-4 sm:px-20 py-6 sm:py-10 bg-gradient-to-br from-blue-50 to-indigo-100">
5565
{ready && authenticated ? (
56-
<>
57-
<div className="flex flex-row justify-between">
58-
<h1 className="text-2xl font-semibold">Privy Auth Demo</h1>
66+
<div className="max-w-3xl mx-auto">
67+
<header className="flex flex-row justify-between items-center mb-8">
68+
<h1 className="text-3xl font-bold text-indigo-900">
69+
Alchemy Smart Wallets + EIP-7702
70+
</h1>
5971
<button
6072
onClick={logout}
61-
className="text-sm bg-violet-200 hover:text-violet-900 py-2 px-4 rounded-md text-violet-700"
73+
className="text-sm bg-indigo-100 hover:bg-indigo-200 text-indigo-700 font-medium py-2 px-4 rounded-lg transition-colors"
6274
>
6375
Logout
6476
</button>
65-
</div>
66-
<div>
67-
<button onClick={delegateandauth}>delegate</button>
68-
<br />
69-
</div>
70-
</>
77+
</header>
78+
79+
<section className="bg-white rounded-xl shadow-lg p-6 mb-8">
80+
<p className="text-gray-700 mb-4">
81+
This demo showcases how to upgrade an existing embedded Privy
82+
EOA to a smart wallet using Alchemy's EIP-7702 support to send
83+
sponsored transactions from an EOA. Learn more about EIP-7702{" "}
84+
<a
85+
href="https://www.alchemy.com/docs/wallets/react/using-7702"
86+
className="text-indigo-600 hover:underline"
87+
target="_blank"
88+
rel="noopener noreferrer"
89+
>
90+
here
91+
</a>
92+
.
93+
</p>
94+
{embeddedWallet && (
95+
<div className="mb-4">
96+
<h2 className="text-lg font-semibold text-gray-900">
97+
Embedded EOA Address
98+
</h2>
99+
<p className="text-gray-600 font-mono break-all">
100+
{embeddedWallet.address}
101+
</p>
102+
</div>
103+
)}
104+
<button
105+
onClick={delegateandauth}
106+
disabled={isLoading}
107+
className={`w-full py-3 px-4 rounded-lg font-semibold text-white transition-colors ${
108+
isLoading
109+
? "bg-indigo-400 cursor-not-allowed"
110+
: "bg-indigo-600 hover:bg-indigo-700"
111+
}`}
112+
>
113+
{isLoading
114+
? "Processing..."
115+
: "Upgrade & Send Sponsored Transaction"}
116+
</button>
117+
</section>
118+
119+
{transactionHash && (
120+
<section className="bg-green-50 rounded-xl shadow-lg p-6 border border-green-200">
121+
<h2 className="text-lg font-semibold text-green-900 mb-4">
122+
Congrats! Sponsored transaction successful!
123+
</h2>
124+
<p className="text-green-700 mb-4">
125+
You've successfully upgraded your EOA to a smart account and
126+
sent your first sponsored transaction.{" "}
127+
<a
128+
href="https://www.alchemy.com/docs/wallets/react/using-7702"
129+
className="text-indigo-600 hover:underline"
130+
target="_blank"
131+
rel="noopener noreferrer"
132+
>
133+
Keep building
134+
</a>
135+
.
136+
</p>
137+
<p className="text-green-700">
138+
<strong>Transaction Hash:</strong>{" "}
139+
<span className="font-mono break-all">{transactionHash}</span>
140+
</p>
141+
</section>
142+
)}
143+
</div>
71144
) : null}
72145
</main>
73146
</div>

0 commit comments

Comments
 (0)