Skip to content

Commit 7254b05

Browse files
joaquim-vergesjoaquim-verges
committed
sdk example
1 parent bd4f199 commit 7254b05

File tree

4 files changed

+144
-51
lines changed

4 files changed

+144
-51
lines changed

‎apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/explorer/components/scalar.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
"use client";
2+
import { ApiReferenceReact } from "@scalar/api-reference-react";
3+
import "@scalar/api-reference-react/style.css";
4+
import { THIRDWEB_ENGINE_CLOUD_URL } from "@/constants/env";
5+
6+
export function Scalar() {
7+
return (
8+
<div className="flex flex-col gap-4">
9+
<h2 className="font-bold text-2xl tracking-tight">Full API Reference</h2>
10+
<ApiReferenceReact
11+
configuration={{
12+
url: `${THIRDWEB_ENGINE_CLOUD_URL}/openapi`,
13+
hideModels: true,
14+
servers: [
15+
{
16+
url: THIRDWEB_ENGINE_CLOUD_URL,
17+
description: "Engine Cloud",
18+
},
19+
],
20+
}}
21+
/>
22+
</div>
23+
);
24+
}

‎apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/explorer/page.tsx‎

Lines changed: 6 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,11 @@
1-
"use client";
2-
import { ApiReferenceReact } from "@scalar/api-reference-react";
3-
import "@scalar/api-reference-react/style.css";
4-
import { THIRDWEB_ENGINE_CLOUD_URL } from "@/constants/env";
1+
import { TryItOut } from "../server-wallets/components/try-it-out";
2+
import { Scalar } from "./components/scalar";
53

6-
export default function TransactionsExplorerPage() {
4+
export default async function TransactionsExplorerPage() {
75
return (
8-
<div>
9-
<ApiReferenceReact
10-
configuration={{
11-
url: `${THIRDWEB_ENGINE_CLOUD_URL}/openapi`,
12-
hideModels: true,
13-
servers: [
14-
{
15-
url: THIRDWEB_ENGINE_CLOUD_URL,
16-
description: "Engine Cloud",
17-
},
18-
],
19-
}}
20-
/>
6+
<div className="flex flex-col gap-4">
7+
<TryItOut />
8+
<Scalar />
219
</div>
2210
);
2311
}

‎apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/layout.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,12 @@ function TransactionsLayout(props: {
4242
>
4343
<EngineIcon className="size-4" /> Cloud
4444
</Badge>
45+
<Badge
46+
variant="outline"
47+
className="mt-0.5 flex items-center gap-2 text-sm"
48+
>
49+
Beta
50+
</Badge>
4551
</h1>
4652
<div className="flex items-center gap-2">
4753
<Link

‎apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/server-wallets/components/try-it-out.tsx‎

Lines changed: 108 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
11
"use client";
2-
import { Button } from "@/components/ui/button";
32
import { CodeClient } from "@/components/ui/code/code.client";
43
import { TabButtons } from "@/components/ui/tabs";
54
import { THIRDWEB_ENGINE_CLOUD_URL } from "@/constants/env";
5+
import { CircleAlertIcon } from "lucide-react";
66
import Link from "next/link";
77
import { useState } from "react";
8-
import type { Wallet } from "../wallet-table/types";
8+
import {
9+
Alert,
10+
AlertDescription,
11+
AlertTitle,
12+
} from "../../../../../../../../../@/components/ui/alert";
913

10-
export function TryItOut(props: {
11-
authToken: string;
12-
wallet?: Wallet;
13-
team_slug: string;
14-
project_slug: string;
15-
}) {
14+
export function TryItOut() {
1615
const [activeTab, setActiveTab] = useState<string>("sdk");
1716

1817
return (
@@ -24,7 +23,8 @@ export function TryItOut(props: {
2423
Usage from your backend
2524
</h2>
2625
<p className="text-muted-foreground text-sm">
27-
Send transactions from your server wallets using a simple http API
26+
Send transactions from your server wallets using the thirdweb SDK
27+
or the HTTP API directly.
2828
</p>
2929
</div>
3030
</div>
@@ -33,7 +33,7 @@ export function TryItOut(props: {
3333
<TabButtons
3434
tabs={[
3535
{
36-
name: "SDK",
36+
name: "thirdweb SDK",
3737
onClick: () => setActiveTab("sdk"),
3838
isActive: activeTab === "sdk",
3939
},
@@ -68,7 +68,70 @@ export function TryItOut(props: {
6868
<div className="h-4" />
6969

7070
{activeTab === "sdk" && (
71-
<CodeClient lang="ts" code={sdkExample()} className="bg-background" />
71+
<div className="flex flex-col gap-4">
72+
<Alert variant="info" className="bg-background">
73+
<CircleAlertIcon className="size-5" />
74+
<AlertTitle>Using the thirdweb SDK on the backend</AlertTitle>
75+
<AlertDescription className="leading-loose">
76+
<p className="text-foreground text-sm">
77+
You can use the full TypeScript thirdweb SDK in your backend,
78+
allowing you to use:{" "}
79+
<ul className="ml-2 list-disc py-2 pl-4">
80+
<li>
81+
The full catalog of{" "}
82+
<Link
83+
href="https://portal.thirdweb.com/references/typescript/v5/functions#extensions"
84+
className="text-blue-500"
85+
target="_blank"
86+
>
87+
extension functions
88+
</Link>
89+
</li>
90+
<li>
91+
The{" "}
92+
<Link
93+
href="https://portal.thirdweb.com/references/typescript/v5/prepareContractCall"
94+
className="text-blue-500"
95+
target="_blank"
96+
>
97+
prepareContractCall
98+
</Link>{" "}
99+
function to encode your transactions
100+
</li>
101+
<li>
102+
The full{" "}
103+
<Link
104+
href="https://portal.thirdweb.com/references/typescript/v5/Account"
105+
className="text-blue-500"
106+
target="_blank"
107+
>
108+
account
109+
</Link>{" "}
110+
interface, predefined chains, and more
111+
</li>
112+
</ul>
113+
The SDK handles encoding your transactions, signing them to
114+
Engine and polling for status.
115+
</p>
116+
</AlertDescription>
117+
</Alert>
118+
<h3 className="font-semibold text-lg tracking-tight">
119+
Installation
120+
</h3>
121+
<CodeClient
122+
lang="shell"
123+
code={"npm install thirdweb"}
124+
className="bg-background"
125+
/>
126+
<h3 className="font-semibold text-lg tracking-tight">
127+
Usage example: Minting a ERC1155 NFT to a user
128+
</h3>
129+
<CodeClient
130+
lang="ts"
131+
code={sdkExample()}
132+
className="bg-background"
133+
/>
134+
</div>
72135
)}
73136
{activeTab === "curl" && (
74137
<CodeClient
@@ -78,7 +141,25 @@ export function TryItOut(props: {
78141
/>
79142
)}
80143
{activeTab === "js" && (
81-
<CodeClient lang="js" code={jsExample()} className="bg-background" />
144+
<div className="flex flex-col gap-4">
145+
<p className="text-muted-foreground text-sm">
146+
A lightweight, type safe wrapper package of the Engine HTTP API is
147+
available on{" "}
148+
<Link
149+
href="https://www.npmjs.com/package/@thirdweb-dev/engine"
150+
className="text-blue-500"
151+
target="_blank"
152+
>
153+
NPM
154+
</Link>
155+
.
156+
</p>
157+
<CodeClient
158+
lang="js"
159+
code={jsExample()}
160+
className="bg-background"
161+
/>
162+
</div>
82163
)}
83164
{activeTab === "python" && (
84165
<CodeClient
@@ -97,47 +178,41 @@ export function TryItOut(props: {
97178
className="bg-background"
98179
/>
99180
)}
100-
101-
<div className="h-4" />
102-
<div className="flex flex-row justify-end gap-4">
103-
<Button variant={"secondary"} asChild>
104-
<Link
105-
href={`/team/${props.team_slug}/${props.project_slug}/engine/cloud/explorer`}
106-
rel="noreferrer"
107-
>
108-
View API reference
109-
</Link>
110-
</Button>
111-
</div>
112181
</div>
113182
</div>
114183
);
115184
}
116185

117186
const sdkExample = () => `\
118-
import { Engine, createThirdwebClient, sendTransaction } from "thirdweb";
119-
import { claimTo } from "thirdweb/extensions/erc1155";
187+
import { createThirdwebClient, sendTransaction, getContract, Engine } from "thirdweb";
188+
import { baseSepolia } from "thirdweb/chains";
189+
import { claimTo } from "thirdweb/extensions/1155";
120190
191+
// Create a thirdweb client
121192
const client = createThirdwebClient({
122193
secretKey: "<your-project-secret-key>",
123194
});
124195
125196
// Create a server wallet
126197
const serverWallet = Engine.serverWallet({
127198
client,
128-
walletAddress: "<your-server-wallet-address>",
199+
address: "<your-server-wallet-address>",
129200
vaultAccessToken: "<your-vault-access-token>",
130201
});
131202
132-
// Prepare a transaction
203+
// Prepare the transaction
133204
const transaction = claimTo({
134-
contract,
135-
to: "0x...",
136-
tokenId: 0n,
137-
quantity: 1n,
205+
contract: getContract({
206+
client,
207+
address: "0x...", // Address of the ERC1155 token contract
208+
chain: baseSepolia, // Chain of the ERC1155 token contract
209+
}),
210+
to: "0x...", // The address of the user to mint to
211+
tokenId: 0n, // The token ID of the NFT to mint
212+
quantity: 1n, // The quantity of NFTs to mint
138213
});
139214
140-
// Send the transaction
215+
// Send the transaction via Engine
141216
const result = await sendTransaction({
142217
account: serverWallet,
143218
transaction,

0 commit comments

Comments
 (0)