Skip to content

Commit d282388

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

File tree

9 files changed

+885
-563
lines changed

9 files changed

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

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

Lines changed: 8 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,93 +100,6 @@ 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>

‎apps/portal/src/app/payments/sidebar.tsx

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,18 @@ export const sidebar: SideBar = {
1616
{
1717
isCollapsible: false,
1818
links: [
19+
{
20+
href: `${paymentsSlug}/fund`,
21+
name: "Fund Wallets",
22+
},
23+
{
24+
href: `${paymentsSlug}/products`,
25+
name: "Sell a Product",
26+
},
27+
{
28+
href: `${paymentsSlug}/transactions`,
29+
name: "Pay for Transactions",
30+
},
1931
{
2032
href: `${paymentsSlug}/send`,
2133
name: "Send a Payment",
@@ -24,10 +36,6 @@ export const sidebar: SideBar = {
2436
href: `${paymentsSlug}/sell`,
2537
name: "Sell Tokens",
2638
},
27-
{
28-
href: `${paymentsSlug}/products`,
29-
name: "Sell a Product",
30-
},
3139
{
3240
href: `${paymentsSlug}/tokens`,
3341
name: "Get Token Prices",

0 commit comments

Comments
 (0)