[Playground] Add Engine user transactions example to playground #7470
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
WalkthroughA new user-facing page was added to the playground web app demonstrating how to handle transactions from user wallets using the thirdweb Engine API, including monitoring and retries. Supporting components and sidebar navigation were introduced, and the thirdweb engine package was added as a local dependency. Additionally, tests for the in-app wallet gateway were refactored for simplified configuration and updated response handling. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant WebApp
participant ThirdwebProvider
participant InAppWallet
participant EngineAPI
participant Blockchain
User->>WebApp: Visit /engine/users page
WebApp->>ThirdwebProvider: Initialize context
User->>InAppWallet: Click ConnectButton
InAppWallet-->>User: Authenticate and provide access token
User->>WebApp: Click Mint NFT button
WebApp->>EngineAPI: Send transaction request (with access token)
EngineAPI->>Blockchain: Queue and submit transaction
EngineAPI-->>WebApp: Return transaction ID
WebApp->>EngineAPI: Poll for transaction status
EngineAPI-->>WebApp: Return status updates (queued, submitted, confirmed, etc.)
WebApp-->>User: Display transaction status and explorer link
Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
github-actions
bot
added
Playground
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. This stack of pull requests is managed by Graphite. Learn more about stacking. |
joaquim-verges
changed the title
joaquim-verges
force-pushed
the
Add_Engine_user_transactions_example_to_playground
branch
from
7ce9abc to
31e5eb4
Compare
size-limit report 📦
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (5)
apps/playground-web/package.json(1 hunks)apps/playground-web/src/app/engine/users/page.tsx(1 hunks)apps/playground-web/src/app/navLinks.ts(1 hunks)apps/playground-web/src/components/account-abstraction/gateway.tsx(1 hunks)packages/thirdweb/src/wallets/in-app/web/lib/in-app-gateway.test.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
`**/*.@(ts|tsx)`: Accept a typed 'props' object and export a named function (e.g...
**/*.@(ts|tsx): Accept a typed 'props' object and export a named function (e.g., export function MyComponent()).
Combine class names via 'cn', expose 'className' prop if useful.
Reuse core UI primitives; avoid re-implementing buttons, cards, modals.
Local state or effects live inside; data fetching happens in hooks.
Merge class names with 'cn' from '@/lib/utils' to keep conditional logic readable.
Stick to design-tokens: background ('bg-card'), borders ('border-border'), muted text ('text-muted-foreground') etc.
Use the 'container' class with a 'max-w-7xl' cap for page width consistency.
Spacing utilities ('px-', 'py-', 'gap-*') are preferred over custom margins.
Responsive helpers follow mobile-first ('max-sm', 'md', 'lg', 'xl').
Never hard-code colors – always go through Tailwind variables.
Tailwind CSS is the styling system – avoid inline styles or CSS modules.
Prefix files with 'import "server-only";' so they never end up in the client bundle (for server-only code).
📄 Source: CodeRabbit Inference Engine (.cursor/rules/dashboard.mdc)
List of files the instruction was applied to:
apps/playground-web/src/app/navLinks.tsapps/playground-web/src/components/account-abstraction/gateway.tsxapps/playground-web/src/app/engine/users/page.tsxpackages/thirdweb/src/wallets/in-app/web/lib/in-app-gateway.test.ts
`apps/playground-web/*`: The playground-web app is an interactive SDK testing environment.
apps/playground-web/*: The playground-web app is an interactive SDK testing environment.
📄 Source: CodeRabbit Inference Engine (CLAUDE.md)
List of files the instruction was applied to:
apps/playground-web/package.json
🧠 Learnings (5)
📓 Common learnings
Learnt from: MananTank
PR: thirdweb-dev/js#7152
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/analytics/shared-analytics-page.tsx:33-39
Timestamp: 2025-05-26T16:30:24.965Z
Learning: In the thirdweb dashboard codebase, redirectToContractLandingPage function already handles execution termination internally (likely using Next.js redirect() which throws an exception), so no explicit return statement is needed after calling it.
Learnt from: MananTank
PR: thirdweb-dev/js#7081
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/assets/create/create-token-page-impl.tsx:110-118
Timestamp: 2025-05-20T18:54:15.781Z
Learning: In the thirdweb dashboard's token asset creation flow, the `transferBatch` function from `thirdweb/extensions/erc20` accepts the raw quantity values from the form without requiring explicit conversion to wei using `toUnits()`. The function appears to handle this conversion internally or is designed to work with the values in the format they're already provided.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-25T02:13:08.257Z
Learning: Wallet architecture should unify Wallet and Account interfaces, support in-app wallets (social/email login), smart wallets with account abstraction, and EIP-1193, EIP-5792, EIP-7702 standards.
apps/playground-web/package.json (3)
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-25T02:13:08.257Z
Learning: De-duplicate dependencies across packages through pnpm workspace hoisting.
Learnt from: MananTank
PR: thirdweb-dev/js#7356
File: apps/nebula/src/app/not-found.tsx:1-1
Timestamp: 2025-06-17T18:30:52.976Z
Learning: In the thirdweb/js project, the React namespace is available for type annotations (like React.FC) without needing to explicitly import React. This is project-specific configuration that differs from typical TypeScript/React setups.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-23T13:49:58.951Z
Learning: Use React Query ('@tanstack/react-query') for all client-side data fetching to leverage caching and query management.
apps/playground-web/src/components/account-abstraction/gateway.tsx (9)
Learnt from: MananTank
PR: thirdweb-dev/js#7315
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/launch-nft.tsx:153-226
Timestamp: 2025-06-10T00:50:20.795Z
Learning: In apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/launch-nft.tsx, the updateStatus function correctly expects a complete MultiStepState["status"] object. For pending states, { type: "pending" } is the entire status object. For error states, { type: "error", message: React.ReactNode } is the entire status object. The current code incorrectly spreads the entire step object instead of passing just the status object.
Learnt from: jnsdls
PR: thirdweb-dev/js#7188
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx:15-15
Timestamp: 2025-05-29T00:46:09.063Z
Learning: In the accounts component at apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx, the 3-column grid layout (md:grid-cols-3) is intentionally maintained even when rendering only one StatCard, as part of the design structure for this component.
Learnt from: MananTank
PR: thirdweb-dev/js#7434
File: apps/dashboard/src/app/(app)/team/~/~/contract/[chain]/[contractAddress]/components/project-selector.tsx:62-76
Timestamp: 2025-06-24T21:38:03.155Z
Learning: In the project-selector.tsx component for contract imports, the addToProject.mutate() call is intentionally not awaited (fire-and-forget pattern) to allow immediate navigation to the contract page while the import happens in the background. This is a deliberate design choice to prioritize user experience.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-25T02:13:08.257Z
Learning: Client components should begin files with 'use client' and use React hooks for interactivity.
Learnt from: MananTank
PR: thirdweb-dev/js#7152
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/analytics/shared-analytics-page.tsx:33-39
Timestamp: 2025-05-26T16:30:24.965Z
Learning: In the thirdweb dashboard codebase, redirectToContractLandingPage function already handles execution termination internally (likely using Next.js redirect() which throws an exception), so no explicit return statement is needed after calling it.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-23T13:49:58.951Z
Learning: Client components must begin with 'use client'; before imports to ensure correct rendering behavior in Next.js.
Learnt from: MananTank
PR: thirdweb-dev/js#7177
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx:15-17
Timestamp: 2025-05-27T19:54:55.885Z
Learning: The `fetchDashboardContractMetadata` function from "@3rdweb-sdk/react/hooks/useDashboardContractMetadata" has internal error handlers for all promises and cannot throw errors, so external error handling is not needed when calling this function.
Learnt from: MananTank
PR: thirdweb-dev/js#7227
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/OpenEditionMetadata.tsx:26-26
Timestamp: 2025-05-30T17:14:25.332Z
Learning: The ModuleCardUIProps interface already includes a client prop of type ThirdwebClient, so when components use `Omit<ModuleCardUIProps, "children" | "updateButton">`, they inherit the client prop without needing to add it explicitly.
Learnt from: MananTank
PR: thirdweb-dev/js#7152
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/claim-conditions/shared-claim-conditions-page.tsx:43-49
Timestamp: 2025-05-26T16:31:02.480Z
Learning: In the thirdweb dashboard codebase, when `redirectToContractLandingPage()` is called, an explicit return statement is not required afterward because the function internally calls Next.js's `redirect()` which throws an error to halt execution.
apps/playground-web/src/app/engine/users/page.tsx (6)
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-25T02:13:08.257Z
Learning: For new UI components, add Storybook stories (*.stories.tsx) alongside the code.
Learnt from: jnsdls
PR: thirdweb-dev/js#7188
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx:15-15
Timestamp: 2025-05-29T00:46:09.063Z
Learning: In the accounts component at apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx, the 3-column grid layout (md:grid-cols-3) is intentionally maintained even when rendering only one StatCard, as part of the design structure for this component.
Learnt from: MananTank
PR: thirdweb-dev/js#7152
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/shared-page.tsx:41-48
Timestamp: 2025-05-26T16:28:50.772Z
Learning: The `projectMeta` prop is not required for the server-rendered `ContractTokensPage` component in the tokens shared page, unlike some other shared pages where it's needed for consistency.
Learnt from: MananTank
PR: thirdweb-dev/js#7434
File: apps/dashboard/src/app/(app)/team/~/~/contract/[chain]/[contractAddress]/components/project-selector.tsx:62-76
Timestamp: 2025-06-24T21:38:03.155Z
Learning: In the project-selector.tsx component for contract imports, the addToProject.mutate() call is intentionally not awaited (fire-and-forget pattern) to allow immediate navigation to the contract page while the import happens in the background. This is a deliberate design choice to prioritize user experience.
Learnt from: MananTank
PR: thirdweb-dev/js#7177
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx:15-17
Timestamp: 2025-05-27T19:54:55.885Z
Learning: The `fetchDashboardContractMetadata` function from "@3rdweb-sdk/react/hooks/useDashboardContractMetadata" has internal error handlers for all promises and cannot throw errors, so external error handling is not needed when calling this function.
Learnt from: MananTank
PR: thirdweb-dev/js#7152
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/direct-listings/shared-direct-listings-page.tsx:47-52
Timestamp: 2025-05-26T16:29:54.317Z
Learning: The `projectMeta` prop is not required for the server-rendered `ContractDirectListingsPage` component in the direct listings shared page, following the same pattern as other server components in the codebase where `projectMeta` is only needed for client components.
packages/thirdweb/src/wallets/in-app/web/lib/in-app-gateway.test.ts (1)
Learnt from: jnsdls
PR: thirdweb-dev/js#7364
File: apps/dashboard/src/app/(app)/account/components/AccountHeader.tsx:36-41
Timestamp: 2025-06-18T02:13:34.500Z
Learning: In the logout flow in apps/dashboard/src/app/(app)/account/components/AccountHeader.tsx, when `doLogout()` fails, the cleanup steps (resetAnalytics(), wallet disconnect, router refresh) should NOT execute. This is intentional to maintain consistency - if server-side logout fails, client-side cleanup should not occur.
🧬 Code Graph Analysis (1)
apps/playground-web/src/components/account-abstraction/gateway.tsx (4)
packages/thirdweb/src/exports/chains.ts (1)
baseSepolia(18-18)packages/thirdweb/src/exports/thirdweb.ts (2)
getContract(43-43)encode(149-149)apps/playground-web/src/lib/client.ts (1)
THIRDWEB_CLIENT(20-43)packages/thirdweb/src/exports/utils.ts (1)
stringify(183-183)
⏰ Context from checks skipped due to timeout of 90000ms (8)
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: Unit Tests
- GitHub Check: Size
- GitHub Check: Lint Packages
- GitHub Check: Build Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (4)
apps/playground-web/package.json (1)
16-16: LGTM!The
@thirdweb-dev/enginedependency is correctly added as a workspace dependency.apps/playground-web/src/app/navLinks.ts (1)
119-123: LGTM!The new navigation link is correctly structured and properly placed within the engine sidebar links.
apps/playground-web/src/components/account-abstraction/gateway.tsx (1)
47-123: Well-implemented transaction status tracking component.The component properly polls for transaction status updates and provides clear visual feedback with appropriate badge variants and block explorer links.
packages/thirdweb/src/wallets/in-app/web/lib/in-app-gateway.test.ts (1)
1-110: Test updates are well-aligned with the engine package migration.The simplified configuration and updated response handling correctly reflect the new API structure.
Comment on lines
+189
to
+197
| const result = await sendTransaction({ | ||
| body, | ||
| headers: { | ||
| "x-wallet-access-token": iaw.getAuthToken?.(), | ||
| }, | ||
| }); | ||
| if (result.error) { | ||
| throw new Error(`Error sending transaction: ${stringify(result.error)}`); | ||
| } |
There was a problem hiding this comment.
Add validation for auth token and improve error handling.
The auth token might be undefined, and errors are thrown without being caught, which could crash the component.
const handleClick = async () => {
if (!preparedTx || !activeEOA) {
return;
}
+ const authToken = iaw.getAuthToken?.();
+ if (!authToken) {
+ console.error("No auth token available");
+ return;
+ }
+
+ try {
const body = {
executionOptions: {
chainId: baseSepolia.id,
from: activeEOA.address,
type: "auto" as const,
},
params: [preparedTx],
};
const result = await sendTransaction({
body,
headers: {
- "x-wallet-access-token": iaw.getAuthToken?.(),
+ "x-wallet-access-token": authToken,
},
});
if (result.error) {
- throw new Error(`Error sending transaction: ${stringify(result.error)}`);
+ console.error("Error sending transaction:", result.error);
+ return;
}Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In apps/playground-web/src/components/account-abstraction/gateway.tsx around
lines 189 to 197, the auth token used in headers may be undefined and errors
from sendTransaction are thrown without catch, risking component crashes. Add a
check to validate that iaw.getAuthToken returns a defined token before calling
sendTransaction, and wrap the sendTransaction call in a try-catch block to
handle errors gracefully, possibly returning or logging the error instead of
throwing it directly.
Comment on lines
+199
to
+205
| const txId = result.data?.result.transactions[0]?.id; | ||
| if (!txId) { | ||
| throw new Error("No transaction ID"); | ||
| } | ||
|
|
||
| setTxIds((prev) => [...prev, txId]); | ||
| }; |
There was a problem hiding this comment.
Improve error handling for missing transaction ID.
const txId = result.data?.result.transactions[0]?.id;
if (!txId) {
- throw new Error("No transaction ID");
+ console.error("No transaction ID returned from engine");
+ return;
}
setTxIds((prev) => [...prev, txId]);
+ } catch (error) {
+ console.error("Unexpected error sending transaction:", error);
+ }Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In apps/playground-web/src/components/account-abstraction/gateway.tsx around
lines 199 to 205, the error handling for a missing transaction ID is too
generic. Replace the generic error throw with a more descriptive error message
that includes context about the failure. Optionally, consider handling this case
gracefully or logging additional details before throwing to improve debugging
and user feedback.
Comment on lines
+34
to
+90
| code={`\ | ||
| import { inAppWallet } from "thirdweb/wallets/in-app"; | ||
| import { ConnectButton, useActiveAccount } from "thirdweb/react"; | ||
|
|
||
| const wallet = inAppWallet(); | ||
|
|
||
| function App() { | ||
| const activeWallet = useActiveWallet(); | ||
|
|
||
| const handleClick = async () => { | ||
| const walletAddress = activeWallet?.getAccount()?.address; | ||
| // transactions are a simple POST request to the engine API | ||
| // or use the @thirdweb-dev/engine type-safe JS SDK | ||
| const response = await fetch( | ||
| "https://engine.thirdweb.com/v1/write/contract", | ||
| { | ||
| method: "POST", | ||
| headers: { | ||
| "Content-Type": "application/json", | ||
| "x-client-id": "<your-project-client-id>", | ||
| // uses the in-app wallet's auth token to authenticate the request | ||
| "x-wallet-access-token": activeWallet?.getAuthToken?.(), | ||
| }, | ||
| body: JSON.stringify({ | ||
| executionOptions: { | ||
| from: walletAddress, | ||
| chainId: "84532", | ||
| type: "auto", // defaults to sponsored transactions | ||
| }, | ||
| params: [ | ||
| { | ||
| contractAddress: "0x...", | ||
| method: "function claim(address to, uint256 amount)", | ||
| params: [walletAddress, "1"], | ||
| }, | ||
| ], | ||
| }), | ||
| }); | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <ConnectButton | ||
| client={client} | ||
| wallet={[wallet]} | ||
| connectButton={{ | ||
| label: "Login to mint!", | ||
| }} | ||
| /> | ||
| <Button | ||
| onClick={handleClick} | ||
| > | ||
| Mint | ||
| </Button> | ||
| </> | ||
| ); | ||
| }`} |
There was a problem hiding this comment.
Fix errors in the code example.
The code example contains several errors that would prevent it from working if users copy it.
code={`\
import { inAppWallet } from "thirdweb/wallets/in-app";
-import { ConnectButton, useActiveAccount } from "thirdweb/react";
+import { ConnectButton, useActiveAccount, useActiveWallet } from "thirdweb/react";
+import { createThirdwebClient } from "thirdweb";
const wallet = inAppWallet();
+const client = createThirdwebClient({ clientId: "<your-project-client-id>" });
function App() {
+ const activeAccount = useActiveAccount();
const activeWallet = useActiveWallet();
const handleClick = async () => {
- const walletAddress = activeWallet?.getAccount()?.address;
+ const walletAddress = activeAccount?.address;
// transactions are a simple POST request to the engine API
// or use the @thirdweb-dev/engine type-safe JS SDK
const response = await fetch(
"https://engine.thirdweb.com/v1/write/contract",
{
method: "POST",
headers: {
"Content-Type": "application/json",
"x-client-id": "<your-project-client-id>",
// uses the in-app wallet's auth token to authenticate the request
- "x-wallet-access-token": activeWallet?.getAuthToken?.(),
+ "x-wallet-access-token": wallet.getAuthToken?.(),
},
body: JSON.stringify({
executionOptions: {
from: walletAddress,
chainId: "84532",
type: "auto", // defaults to sponsored transactions
},
params: [
{
contractAddress: "0x...",
method: "function claim(address to, uint256 amount)",
params: [walletAddress, "1"],
},
],
}),
});
};
return (
<>
<ConnectButton
client={client}
- wallet={[wallet]}
+ wallets={[wallet]}
connectButton={{
label: "Login to mint!",
}}
/>
<Button
onClick={handleClick}
>
Mint
</Button>
</>
);
}`}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| code={`\ | |
| import { inAppWallet } from "thirdweb/wallets/in-app"; | |
| import { ConnectButton, useActiveAccount } from "thirdweb/react"; | |
| const wallet = inAppWallet(); | |
| function App() { | |
| const activeWallet = useActiveWallet(); | |
| const handleClick = async () => { | |
| const walletAddress = activeWallet?.getAccount()?.address; | |
| // transactions are a simple POST request to the engine API | |
| // or use the @thirdweb-dev/engine type-safe JS SDK | |
| const response = await fetch( | |
| "https://engine.thirdweb.com/v1/write/contract", | |
| { | |
| method: "POST", | |
| headers: { | |
| "Content-Type": "application/json", | |
| "x-client-id": "<your-project-client-id>", | |
| // uses the in-app wallet's auth token to authenticate the request | |
| "x-wallet-access-token": activeWallet?.getAuthToken?.(), | |
| }, | |
| body: JSON.stringify({ | |
| executionOptions: { | |
| from: walletAddress, | |
| chainId: "84532", | |
| type: "auto", // defaults to sponsored transactions | |
| }, | |
| params: [ | |
| { | |
| contractAddress: "0x...", | |
| method: "function claim(address to, uint256 amount)", | |
| params: [walletAddress, "1"], | |
| }, | |
| ], | |
| }), | |
| }); | |
| }; | |
| return ( | |
| <> | |
| <ConnectButton | |
| client={client} | |
| wallet={[wallet]} | |
| connectButton={{ | |
| label: "Login to mint!", | |
| }} | |
| /> | |
| <Button | |
| onClick={handleClick} | |
| > | |
| Mint | |
| </Button> | |
| </> | |
| ); | |
| }`} | |
| code={`\ | |
| import { inAppWallet } from "thirdweb/wallets/in-app"; | |
| import { ConnectButton, useActiveAccount, useActiveWallet } from "thirdweb/react"; | |
| import { createThirdwebClient } from "thirdweb"; | |
| const wallet = inAppWallet(); | |
| const client = createThirdwebClient({ clientId: "<your-project-client-id>" }); | |
| function App() { | |
| const activeAccount = useActiveAccount(); | |
| const activeWallet = useActiveWallet(); | |
| const handleClick = async () => { | |
| const walletAddress = activeAccount?.address; | |
| // transactions are a simple POST request to the engine API | |
| // or use the @thirdweb-dev/engine type-safe JS SDK | |
| const response = await fetch( | |
| "https://engine.thirdweb.com/v1/write/contract", | |
| { | |
| method: "POST", | |
| headers: { | |
| "Content-Type": "application/json", | |
| "x-client-id": "<your-project-client-id>", | |
| "x-wallet-access-token": wallet.getAuthToken?.(), | |
| }, | |
| body: JSON.stringify({ | |
| executionOptions: { | |
| from: walletAddress, | |
| chainId: "84532", | |
| type: "auto", // defaults to sponsored transactions | |
| }, | |
| params: [ | |
| { | |
| contractAddress: "0x...", | |
| method: "function claim(address to, uint256 amount)", | |
| params: [walletAddress, "1"], | |
| }, | |
| ], | |
| }), | |
| }); | |
| }; | |
| return ( | |
| <> | |
| <ConnectButton | |
| client={client} | |
| wallets={[wallet]} | |
| connectButton={{ | |
| label: "Login to mint!", | |
| }} | |
| /> | |
| <Button | |
| onClick={handleClick} | |
| > | |
| Mint | |
| </Button> | |
| </> | |
| ); | |
| }`} |
🤖 Prompt for AI Agents
In apps/playground-web/src/app/engine/users/page.tsx between lines 34 and 90,
fix the following errors: replace useActiveWallet with useActiveAccount to
correctly get the active wallet account; change x-wallet-access-token header to
call getAuthToken as a function with parentheses; replace client prop in
ConnectButton with the correct client instance or remove if undefined; change
wallet prop to wallets (plural) and pass an array of wallets; import and use a
proper Button component or replace it with a standard HTML button element;
ensure all variables and imports are correctly defined and used to make the
example functional.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
PR-Codex overview
This PR introduces a new feature for handling user transactions from in-app wallets, enhancing the user experience with NFT minting and transaction tracking. It also updates dependencies and improves testing for the in-app wallet functionality.
Detailed summary
navLinks.ts.page.tsxfor user transactions with metadata and layout.UserTransactionsfunction to handle transactions from user wallets.GatewayPreviewcomponent to manage NFT minting and transaction status.package.jsonto include@thirdweb-dev/engine.pnpm-lock.yaml.Summary by CodeRabbit
New Features
Chores
Tests