Skip to content

Commit f812564

Browse files
joaquim-vergesjoaquim-verges
committed
[Docs] Update API endpoints and add frontend/backend examples
1 parent 8260af3 commit f812564

File tree

11 files changed

+581
-188
lines changed

11 files changed

+581
-188
lines changed

‎apps/portal/src/app/contracts/page.mdx

Lines changed: 59 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,6 @@ export const metadata = createMetadata({
3434

3535
Read, write, and deploy smart contracts on any EVM compatible blockchain.
3636

37-
---
38-
3937
<Tabs defaultValue="http">
4038
<TabsList>
4139
<TabsTrigger value="http" className="flex items-center gap-2 [&>p]:mb-0">
@@ -71,19 +69,16 @@ Read, write, and deploy smart contracts on any EVM compatible blockchain.
7169
<TabsContent value="http">
7270
### Read a Contract
7371

74-
You can read contract data efficiently using the [contract read API](https://engine.thirdweb.com/reference).
72+
You can read contract data efficiently using the [contract read API](https://api.thirdweb.com/reference#tag/contracts/post/v1/contracts/read).
7573

7674
```http
77-
GET /v1/contract/read
75+
GET https://api.thirdweb.com/v1/contract/read
7876
Content-Type: application/json
79-
x-secret-key: <your-project-secret-key>
77+
x-client-id: <your-project-client-id>
8078
8179
{
82-
"readOptions": {
83-
"chainId": "1" // your chain id
84-
"from": "0x...", // optional, if you want to read from a specific address
85-
},
86-
"params": [{
80+
"chainId": "1" // your chain id
81+
"calls": [{
8782
"contractAddress": "0x...",
8883
"method": "function allowance(address owner, address spender)",
8984
"params": ["0x...", "0x..."],
@@ -93,33 +88,65 @@ Read, write, and deploy smart contracts on any EVM compatible blockchain.
9388

9489
You can batch multiple contract reads in a single request, and the response will be an array of results or errors.
9590

91+
Authentication requires either `x-secret-key` (backend) or `x-client-id` (frontend) to be set in the request headers.
92+
9693
### Write to a Contract
9794

98-
You can write to a contract using the [contract write API](https://engine.thirdweb.com/reference).
99-
100-
```http
101-
POST /v1/contract/write
102-
Content-Type: application/json
103-
x-secret-key: <your-project-secret-key>
104-
105-
{
106-
"executionOptions": {
107-
"from": "0x...", // your server wallet address
108-
"chainId": "1" // your chain id
109-
},
110-
"params": [{
111-
"contractAddress": "0x...",
112-
"method": "function transfer(address to, uint256 amount)",
113-
"params": ["0x...", "1000000000000000000"],
114-
}]
115-
}
116-
```
95+
You can write to a contract using the [contract write API](https://api.thirdweb.com/reference#tag/contracts/post/v1/contracts/write).
11796

118-
You can batch multiple contract writes in a single request, and the transactions will be batched atomically onchain.
97+
<Tabs defaultValue="frontend">
98+
<TabsList>
99+
<TabsTrigger value="frontend">Frontend</TabsTrigger>
100+
<TabsTrigger value="backend">Backend</TabsTrigger>
101+
</TabsList>
119102

120-
### Deploy a Contract
103+
<TabsContent value="frontend">
104+
105+
On the frontend, use your project client ID and the users's auth token to send a transaction on their behalf.
106+
107+
```http
108+
POST https://api.thirdweb.com/v1/contract/write
109+
Content-Type: application/json
110+
x-client-id: <your-project-client-id>
111+
Authorization: Bearer <user-auth-token>
112+
113+
{
114+
"from": "0x...", // the user wallet address
115+
"chainId": "1" // the chain id
116+
"calls": [{
117+
"contractAddress": "0x...",
118+
"method": "function transfer(address to, uint256 amount)",
119+
"params": ["0x...", "1000000000000000000"],
120+
}],
121+
}
122+
```
123+
124+
</TabsContent>
121125

122-
You can deploy a contract using the [contract deploy API](https://engine.thirdweb.com/reference).
126+
<TabsContent value="backend">
127+
128+
On the backend, use your project secret key to send a transaction from any of your server wallets.
129+
130+
```http
131+
POST https://api.thirdweb.com/v1/contract/write
132+
Content-Type: application/json
133+
x-secret-key: <your-project-secret-key>
134+
135+
{
136+
"from": "0x...", // your server wallet address
137+
"chainId": "1" // your chain id
138+
"calls": [{
139+
"contractAddress": "0x...",
140+
"method": "function transfer(address to, uint256 amount)",
141+
"params": ["0x...", "1000000000000000000"],
142+
}],
143+
}
144+
```
145+
146+
</TabsContent>
147+
</Tabs>
148+
149+
You can batch multiple contract writes in a single request, and the transactions will be batched atomically onchain.
123150

124151
</TabsContent>
125152

‎apps/portal/src/app/payments/fund/page.mdx

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import {
2+
Callout,
3+
createMetadata,
4+
Tabs,
5+
TabsList,
6+
TabsTrigger,
7+
TabsContent,
8+
ArticleIconCard
9+
} from "@doc";
10+
import {
11+
ReactIcon,
12+
} from "@/icons";
13+
import { ZapIcon } from "lucide-react";
14+
15+
export const metadata = createMetadata({
16+
image: {
17+
title: "Fund Wallet",
18+
icon: "payments",
19+
},
20+
title: "Fund Wallet",
21+
description: "Fund wallets with crypto using the BuyWidget.",
22+
});
23+
24+
# Fund wallets
25+
26+
Fund wallets with crypto using the `BuyWidget`.
27+
28+
<Tabs defaultValue="react">
29+
<TabsList>
30+
<TabsTrigger value="react" className="flex items-center gap-2 [&>p]:mb-0">
31+
<ReactIcon className="w-4 h-4 mr-2" />
32+
React
33+
</TabsTrigger>
34+
</TabsList>
35+
36+
<TabsContent value="react">
37+
38+
### Fund a wallet with the `BuyWidget`
39+
40+
```tsx
41+
import { BuyWidget } from "thirdweb/react";
42+
import { createThirdwebClient } from "thirdweb";
43+
import { base } from "thirdweb/chains";
44+
45+
const client = createThirdwebClient({
46+
clientId: "YOUR_CLIENT_ID",
47+
});
48+
49+
function ProductPage() {
50+
return (
51+
<div>
52+
<h1>Fund Wallet</h1>
53+
<p>Top your wallet with crypto</p>
54+
55+
<BuyWidget
56+
client={client}
57+
chain={base}
58+
token="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913" // USDC on Base
59+
amount="5" // top up 5 USDC by default (user can change this)
60+
name="Fund Wallet"
61+
description="Top up your wallet with crypto"
62+
onSuccess={() => {
63+
alert("Top up successful!");
64+
// Redirect or update UI
65+
}}
66+
/>
67+
</div>
68+
);
69+
}
70+
```
71+
72+
The BuyWidget handles the complete payment flow, supporting both crypto and fiat payments across 50+ chains.
73+
</TabsContent>
74+
</Tabs>
75+
76+
## View it in action:
77+
78+
<ArticleIconCard
79+
title="Fund Wallet Live Demo"
80+
description="Top up your wallet with crypto using the BuyWidget"
81+
icon={ReactIcon}
82+
href="https://playground.thirdweb.com/connect/pay/transactions"
83+
/>
84+
85+
## Going Further
86+
87+
- [Custom Payment Data](/payments/custom-data) - Attach metadata to payments
88+
- [Webhooks](/payments/webhooks) - Get notified when payments complete
89+
90+
## API Reference
91+
92+
- [BuyWidget](/references/typescript/v5/BuyWidget)

‎apps/portal/src/app/payments/page.mdx

Lines changed: 18 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -34,15 +34,15 @@ export const metadata = createMetadata({
3434

3535
thirdweb Payments allow developers to create advanced payment flows to monetize their apps through product sales, peer to peer payments, token sales, and more.
3636

37-
<Tabs defaultValue="typescript">
37+
<Tabs defaultValue="react">
3838
<TabsList>
39-
<TabsTrigger value="typescript" className="flex items-center [&>p]:mb-0">
40-
<TypeScriptIcon className="size-4 mr-1.5" />
41-
TypeScript
42-
</TabsTrigger>
4339
<TabsTrigger value="react" className="flex items-center [&>p]:mb-0">
4440
<ReactIcon className="size-4 mr-1.5" />
4541
React
42+
</TabsTrigger>
43+
<TabsTrigger value="typescript" className="flex items-center [&>p]:mb-0">
44+
<TypeScriptIcon className="size-4 mr-1.5" />
45+
TypeScript
4646
</TabsTrigger>
4747
<TabsTrigger value="http" className="flex items-center [&>p]:mb-0">
4848
<EngineIcon className="size-4 mr-1.5" />
@@ -84,7 +84,9 @@ thirdweb Payments allow developers to create advanced payment flows to monetize
8484

8585
```typescript
8686
import { Bridge, NATIVE_TOKEN_ADDRESS, toWei } from "thirdweb";
87-
const preparedQuote = await Bridge.Buy.prepare({
87+
88+
// Quote to buy 10 USDC on Optimism, paid with USDT on Arbitrum
89+
const preparedQuote = await Bridge.Buy.prepare({
8890
originChainId: 42161,
8991
originTokenAddress: "0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9", // USDT on Arbitrum
9092
destinationChainId: 10,
@@ -98,99 +100,22 @@ thirdweb Payments allow developers to create advanced payment flows to monetize
98100

99101
The prepared quote will contain details about the payment, including the transactions needed to execute it.
100102

101-
```typescript
102-
{
103-
blockNumber: 359092559n,
104-
destinationAmount: 10000000n,
105-
estimatedExecutionTimeMs: 4000,
106-
intent: {
107-
amount: 10000000n,
108-
destinationChainId: 10,
109-
destinationTokenAddress: "0x0b2C639c533813f4Aa9D7837CAf62653d097Ff85",
110-
originChainId: 42161,
111-
originTokenAddress: "0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9",
112-
receiver: "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045",
113-
sender: "0x2a4f24F935Eb178e3e7BA9B53A5Ee6d8407C0709"
114-
},
115-
originAmount: 10090837n,
116-
steps: [
117-
{
118-
originToken: {
119-
chainId: 42161,
120-
address: "0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9",
121-
symbol: "USDT",
122-
name: "Tether USD",
123-
decimals: 6,
124-
priceUsd: 1.000466,
125-
iconUri: "https://coin-images.coingecko.com/coins/images/39963/large/usdt.png?1724952731",
126-
prices: {
127-
USD: 1.000466,
128-
EUR: 0.8609646893353334,
129-
// ...more currencies
130-
}
131-
},
132-
destinationToken: {
133-
chainId: 10,
134-
address: "0x0b2C639c533813f4Aa9D7837CAf62653d097Ff85",
135-
symbol: "USDC",
136-
name: "USD Coin",
137-
decimals: 6,
138-
priceUsd: 0.999859,
139-
iconUri: "https://ethereum-optimism.github.io/data/USDC/logo.png",
140-
prices: {
141-
USD: 0.999859,
142-
EUR: 0.8604423271896667,
143-
// ...more currencies
144-
}
145-
},
146-
transactions: [
147-
{
148-
chainId: 42161,
149-
to: "0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9",
150-
data: "0x095ea7b3000000000000000000000000f8ab2dbe6c43bf1a856471182290f91d621ba76d00000000000000000000000000000000000000000000000000000000009d0695",
151-
type: "eip1559",
152-
id: "0x2354360325ff8315dad5673894207d90c28cb898788025202b6a6f8c2bd8220a",
153-
action: "approval",
154-
chain: {
155-
// ...chain details
156-
},
157-
client: {
158-
clientId: "...",
159-
}
160-
},
161-
{
162-
type: "eip1559",
163-
to: "0xF8Ab2dBE6c43bf1a856471182290f91D621Ba76d",
164-
from: "0x2a4f24F935Eb178e3e7BA9B53A5Ee6d8407C0709",
165-
value: 0n,
166-
data: "0x...",
167-
chainId: 42161,
168-
action: "buy",
169-
id: "0xc4fd6ecdbbf6fb0780c87779adff09ea7f480fac385b8db4873fc1a0d3309264",
170-
spender: "0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9",
171-
chain: {
172-
// ...chain details
173-
},
174-
client: {
175-
clientId: "...",
176-
}
177-
}
178-
],
179-
originAmount: 10090837n,
180-
destinationAmount: 10000000n,
181-
estimatedExecutionTimeMs: 4000
182-
}
183-
],
184-
timestamp: 1752866509083
185-
}
186-
```
187-
188103
You can execute the included transactions using the wallet of your choice. To learn how to send it using thirdweb Wallets, checkout the [Send a Payment](/payments/send) guide.
189104

190105
</TabsContent>
191106

192107
<TabsContent value="react">
193108
The quickest way to setup payments in your React app is with the [`BuyWidget`](/references/typescript/v5/widgets/BuyWidget), [`CheckoutWidget`](/references/typescript/v5/widgets/CheckoutWidget), and [`TransactionWidget`](/references/typescript/v5/widgets/TransactionWidget) components.
109+
110+
### Live Playground
111+
112+
<ArticleIconCard
113+
title="Payment Widgets Playground"
114+
description="Try out the Payment Widgets in our live playground"
115+
icon={ReactIcon}
116+
href="https://playground.thirdweb.com/connect/pay/transactions"
117+
/>
118+
194119
### Installation
195120

196121
Install the thirdweb SDK in your React project:

‎apps/portal/src/app/payments/products/page.mdx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,15 @@ The CheckoutWidget handles the complete payment flow, supporting both crypto and
7777
</TabsContent>
7878
</Tabs>
7979

80+
## View it in action:
81+
82+
<ArticleIconCard
83+
title="Sell a Product Live Demo"
84+
description="Sell a product using the CheckoutWidget"
85+
icon={ReactIcon}
86+
href="https://playground.thirdweb.com/connect/pay/commerce"
87+
/>
88+
8089
## Going Further
8190

8291
- [Custom Payment Data](/payments/custom-data) - Attach metadata to payments

0 commit comments

Comments
 (0)