Skip to content

Commit 7ce9abc

Browse files
joaquim-vergesjoaquim-verges
committed
Add Engine user transactions example to playground
1 parent 8e29d48 commit 7ce9abc

File tree

7 files changed

+515
-162
lines changed

7 files changed

+515
-162
lines changed

‎apps/playground-web/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"@radix-ui/react-switch": "^1.2.5",
1414
"@radix-ui/react-tooltip": "1.2.7",
1515
"@tanstack/react-query": "5.80.7",
16+
"@thirdweb-dev/engine": "workspace:*",
1617
"class-variance-authority": "^0.7.1",
1718
"clsx": "^2.1.1",
1819
"date-fns": "4.1.0",

‎apps/playground-web/src/app/connect/account-abstraction/7702/page.tsx

Lines changed: 34 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -6,36 +6,36 @@ import { PageLayout } from "../../../../components/blocks/APIHeader";
66
import { CodeExample } from "../../../../components/code/code-example";
77

88
export const metadata: Metadata = {
9-
description:
10-
"EIP-7702 smart accounts allow you to turn your EOA into a smart account with no code changes",
11-
metadataBase,
12-
title: "EIP-7702 Smart Accounts | thirdweb Connect",
9+
description:
10+
"EIP-7702 smart accounts allow you to turn your EOA into a smart account with no code changes",
11+
metadataBase,
12+
title: "EIP-7702 Smart Accounts | thirdweb Connect",
1313
};
1414

1515
export default function Page() {
16-
return (
17-
<ThirdwebProvider>
18-
<PageLayout
19-
description={
20-
<>
21-
EIP-7702 smart accounts allow you to turn your EOA into a smart
22-
account with no code changes.
23-
</>
24-
}
25-
docsLink="https://portal.thirdweb.com/connect/account-abstraction/overview?utm_source=playground"
26-
title="EIP-7702 Smart Accounts"
27-
>
28-
<Eip7702SmartAccount />
29-
</PageLayout>
30-
</ThirdwebProvider>
31-
);
16+
return (
17+
<ThirdwebProvider>
18+
<PageLayout
19+
description={
20+
<>
21+
EIP-7702 smart accounts allow you to turn your EOA into a smart
22+
account with no code changes.
23+
</>
24+
}
25+
docsLink="https://portal.thirdweb.com/connect/account-abstraction/overview?utm_source=playground"
26+
title="EIP-7702 Smart Accounts"
27+
>
28+
<Eip7702SmartAccount />
29+
</PageLayout>
30+
</ThirdwebProvider>
31+
);
3232
}
3333

3434
function Eip7702SmartAccount() {
35-
return (
36-
<>
37-
<CodeExample
38-
code={`\
35+
return (
36+
<>
37+
<CodeExample
38+
code={`\
3939
import { claimTo } from "thirdweb/extensions/erc1155";
4040
import { TransactionButton } from "thirdweb/react";
4141
@@ -72,14 +72,14 @@ function App() {
7272
</>
7373
);
7474
}`}
75-
header={{
76-
description:
77-
"In-app wallets can be turned into EIP-7702 smart accounts by changing the execution mode",
78-
title: "Turning in-app wallets into EIP-7702 smart accounts",
79-
}}
80-
lang="tsx"
81-
preview={<Eip7702SmartAccountPreview />}
82-
/>
83-
</>
84-
);
75+
header={{
76+
description:
77+
"In-app wallets can be turned into EIP-7702 smart accounts by changing the execution mode",
78+
title: "Turning in-app wallets into EIP-7702 smart accounts",
79+
}}
80+
lang="tsx"
81+
preview={<Eip7702SmartAccountPreview />}
82+
/>
83+
</>
84+
);
8585
}

‎apps/playground-web/src/app/engine/users/page.tsx

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
import type { Metadata } from "next";
2+
import { GatewayPreview } from "@/components/account-abstraction/gateway";
3+
import { PageLayout } from "@/components/blocks/APIHeader";
4+
import { CodeExample } from "@/components/code/code-example";
5+
import ThirdwebProvider from "@/components/thirdweb-provider";
6+
import { metadataBase } from "@/lib/constants";
7+
8+
export const metadata: Metadata = {
9+
description: "Transactions from user wallets with monitoring and retries",
10+
metadataBase,
11+
title: "User Transactions | thirdweb",
12+
};
13+
14+
export default function Page() {
15+
return (
16+
<ThirdwebProvider>
17+
<PageLayout
18+
description={
19+
<>Transactions from user wallets with monitoring and retries.</>
20+
}
21+
docsLink="https://portal.thirdweb.com/engine?utm_source=playground"
22+
title="User Transactions"
23+
>
24+
<UserTransactions />
25+
</PageLayout>
26+
</ThirdwebProvider>
27+
);
28+
}
29+
30+
function UserTransactions() {
31+
return (
32+
<>
33+
<CodeExample
34+
code={`\
35+
import { inAppWallet } from "thirdweb/wallets/in-app";
36+
import { ConnectButton, useActiveAccount } from "thirdweb/react";
37+
38+
const wallet = inAppWallet();
39+
40+
function App() {
41+
const activeWallet = useActiveWallet();
42+
43+
const handleClick = async () => {
44+
const walletAddress = activeWallet?.getAccount()?.address;
45+
// transactions are a simple POST request to the engine API
46+
// or use the @thirdweb-dev/engine type-safe JS SDK
47+
const response = await fetch(
48+
"https://engine.thirdweb.com/v1/write/contract",
49+
{
50+
method: "POST",
51+
headers: {
52+
"Content-Type": "application/json",
53+
"x-client-id": "<your-project-client-id>",
54+
// uses the in-app wallet's auth token to authenticate the request
55+
"x-wallet-access-token": activeWallet?.getAuthToken?.(),
56+
},
57+
body: JSON.stringify({
58+
executionOptions: {
59+
from: walletAddress,
60+
chainId: "84532",
61+
type: "auto", // defaults to sponsored transactions
62+
},
63+
params: [
64+
{
65+
contractAddress: "0x...",
66+
method: "function claim(address to, uint256 amount)",
67+
params: [walletAddress, "1"],
68+
},
69+
],
70+
}),
71+
});
72+
};
73+
74+
return (
75+
<>
76+
<ConnectButton
77+
client={client}
78+
wallet={[wallet]}
79+
connectButton={{
80+
label: "Login to mint!",
81+
}}
82+
/>
83+
<Button
84+
onClick={handleClick}
85+
>
86+
Mint
87+
</Button>
88+
</>
89+
);
90+
}`}
91+
header={{
92+
description:
93+
"Engine can queue, monitor, and retry transactions from your users in-app wallets. All transactions and analytics will be displayed in your developer dashboard.",
94+
title: "Transactions from User Wallets",
95+
}}
96+
lang="tsx"
97+
preview={<GatewayPreview />}
98+
/>
99+
</>
100+
);
101+
}

‎apps/playground-web/src/app/navLinks.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,10 @@ const engineSidebarLinks: SidebarLink = {
116116
expanded: false,
117117
isCollapsible: false,
118118
links: [
119+
{
120+
href: "/engine/users",
121+
name: "From User Wallets",
122+
},
119123
{
120124
href: "/engine/airdrop",
121125
name: "Airdrop",

0 commit comments

Comments
 (0)