diff --git a/apps/portal/redirects.mjs b/apps/portal/redirects.mjs index cc6b808c721..79d9e52e7ac 100644 --- a/apps/portal/redirects.mjs +++ b/apps/portal/redirects.mjs @@ -341,7 +341,9 @@ const solidityRedirects = { "/solidity/extensions/royalty": "/contracts/build/extensions/general/Royalty", // contracts -> tokens - "/contracts/deploy/:path*": "/contracts/deploy", + "/contracts/deploy/overview": "/contracts/deploy", + "/contracts/deploy/reference": "/contracts/deploy", + "/contracts/deploy/deploy-contract": "/contracts/deploy", "/contracts/build": "/tokens/build", "/contracts/build/:path*": "/tokens/build/:path*", }; diff --git a/apps/portal/src/app/Header.tsx b/apps/portal/src/app/Header.tsx index cf30a76c273..4dec4a429cf 100644 --- a/apps/portal/src/app/Header.tsx +++ b/apps/portal/src/app/Header.tsx @@ -119,6 +119,10 @@ export const connectLinks: Array<{ ] as const; const apisLinks = [ + { + href: "https://api.thirdweb.com/reference", + name: "HTTP API", + }, { href: "https://insight.thirdweb.com/reference", name: "Insight", @@ -271,7 +275,7 @@ export function Header() { }} > - {pathname.includes(link.href) && ( + {pathname.startsWith(link.href) && (
)} @@ -281,6 +285,22 @@ export function Header() {
+
+ setShowBurgerMenu(false)} + /> +
, + href: "/ai/mcp", + }, + { + name: "llms.txt", + icon: , + href: "/ai/llm-txt", + }, + ], + name: "AI", + }} + > +
{props.children}
+ + ); +} + +export const metadata = createMetadata({ + description: "AI tools for agents and LLM clients.", + title: "thirdweb AI", +}); diff --git a/apps/portal/src/app/ai/llm-txt/page.mdx b/apps/portal/src/app/ai/llm-txt/page.mdx new file mode 100644 index 00000000000..f1766ac20d5 --- /dev/null +++ b/apps/portal/src/app/ai/llm-txt/page.mdx @@ -0,0 +1,21 @@ +# llms.txt + +Use these llms.txt files to instruct your LLM on how to use the thirdweb API. + +### thirdweb API reference + +The [thirdweb HTTP API reference](https://api.thirdweb.com/reference) as markdown. + +Available at: https://api.thirdweb.com/llms.txt + +### Typescript SDK quick reference + +Contains a table of contents for the thirdweb Typescript SDK documentation. + +Available at: https://portal.thirdweb.com/llms.txt + +### Typescript SDK full documentation + +Contains the entire thirdweb Typescript SDK documentation as markdown. Requires large context windows. + +Available at: https://portal.thirdweb.com/llms-full.txt \ No newline at end of file diff --git a/apps/portal/src/app/ai/mcp/page.mdx b/apps/portal/src/app/ai/mcp/page.mdx new file mode 100644 index 00000000000..fd74faad8c7 --- /dev/null +++ b/apps/portal/src/app/ai/mcp/page.mdx @@ -0,0 +1,63 @@ +# MCP server + +You can use the thirdweb MCP server to interact with the thirdweb API from your agents or LLM client. + +### Remote MCP endpoint + +You can access the MCP server at the following url, with your project secret key. + +```http +# endpoint +POST /mcp +Host: api.thirdweb.com + +# auth header (required) +x-secret-key +``` + +### Usage with agents + +Use your favorite agent framework to plug in the MCP server as a collection of tools for your agent. Refer to your agent framework's documentation for more information. + +#### Example usage with langchain: + +```python +from langchain_mcp_adapters.client import MultiServerMCPClient +from langgraph.prebuilt import create_react_agent + +client = MultiServerMCPClient( + { + "thirdweb-api": { + "transport": "streamable_http", + "url": "https://api.thirdweb-dev.com/mcp", + "headers": { + "x-secret-key": "" + }, + } + } +) +tools = await client.get_tools() +agent = create_react_agent("openai:gpt-4.1", tools) +response = await agent.ainvoke({"messages": "create a server wallet called 'my-wallet'"}) +``` + +### Usage with LLM clients + +You can also use the MCP server on your own LLM client, like cursor, claude code and more. Refer to your LLM client's documentation for more information. + +#### Example usage with Cursor: + +Add the following to your `.cursor/mcp.json` file: + +```json +{ + "mcpServers": { + "thirdweb-api": { + "url": "https://api.thirdweb-dev.com/mcp", + "headers": { + "x-secret-key": "" + } + } + } +} +``` diff --git a/apps/portal/src/app/contracts/events/page.mdx b/apps/portal/src/app/contracts/events/page.mdx index 9f011f91a1e..4afd6688a1b 100644 --- a/apps/portal/src/app/contracts/events/page.mdx +++ b/apps/portal/src/app/contracts/events/page.mdx @@ -1,35 +1,93 @@ -# Listening to Events +import { + Tabs, + TabsList, + TabsTrigger, + TabsContent, +} from "@doc"; +import { + ReactIcon, + TypeScriptIcon, + EngineIcon, +} from "@/icons"; -The recommended way to listen to contract events is to use the [`getContractEvents`](/references/typescript/v5/getContractEvents) function and passing a prepared event with the Solidity event signature and the params. This is type-safe based on the Solidity event signature you define. You can get your desired contract event signature from the solidity code directly. +# Contract Events -```ts -import { getContractEvents, prepareEvent } from "thirdweb"; +Query and listen to contract events for any deployed contract on any EVM chain. -const myEvent = prepareEvent({ - signature: "event Transfer(address indexed from, address indexed to, uint256 value)", -}); + + + + + HTTP + + + + TypeScript + + + + React + + -const events = await getContractEvents({ - contract: myContract, - events: [myEvent], -}); -``` + + ### Get Contract Events -### Using standard event definitions + You can fetch contract events using the [contract events API](https://api.thirdweb.com/reference#tag/contracts/get/v1/contracts/{address}/events). -You can also use the standard event definitions from the SDK to define the events you want to listen to. + ```http + GET /v1/contracts/{address}/events?chainId=&decode=true + Host: api.thirdweb.com + x-secret-key: + ``` -```ts -import { getContractEvents } from "thirdweb"; -import { transferEvent } from "thirdweb/extensions/erc20"; + Authentication requires either `x-secret-key` (backend) or `x-client-id` (frontend) to be set in the request headers. -const events = await getContractEvents({ - contract: myContract, - events: [transferEvent()], -}); -``` + #### Parameters + + - `address` - The contract address + - `chainId` - The chain ID where the contract is deployed + - `decode` - Whether to decode the event data (optional, defaults to false) + + #### Response + + The API returns a list of events that have been emitted by the specified contract, including event details and decoded function calls when `decode=true` is specified. + + + + + ### Get Contract Events + + You can listen to contract events using the [`getContractEvents`](/references/typescript/v5/getContractEvents) function and passing a prepared event with the Solidity event signature and the params. + + ```ts + import { getContractEvents, prepareEvent } from "thirdweb"; + + const myEvent = prepareEvent({ + signature: "event Transfer(address indexed from, address indexed to, uint256 value)", + }); + + const events = await getContractEvents({ + contract: myContract, + events: [myEvent], + }); + ``` + + ### Using standard event definitions + + You can also use the standard event definitions from the SDK to define the events you want to listen to. -### Generating all read functions and events for a deployed contract + ```ts + import { getContractEvents } from "thirdweb"; + import { transferEvent } from "thirdweb/extensions/erc20"; + + const events = await getContractEvents({ + contract: myContract, + events: [transferEvent()], + }); + ``` + + ### Generating all read functions and events for a deployed contract Using the CLI, you can generate optimized functions for all the possible calls to a contract. This saves you time and precomputes all the necessary encoding. @@ -37,4 +95,67 @@ Using the CLI, you can generate optimized functions for all the possible calls t npx thirdweb generate / ``` -Read more on how to [generate extension functions using the CLI](/contracts/generate). \ No newline at end of file +Read more on how to [generate extension functions using the CLI](/contracts/generate). + + + + + ### Listen to Events + + You can listen to contract events using the [`useContractEvents`](/references/typescript/v5/useContractEvents) hook. This hook will automatically poll for new events and update the component state. + + ```jsx + import { useContractEvents } from "thirdweb/react"; + import { prepareEvent } from "thirdweb"; + + const myEvent = prepareEvent({ + signature: "event Transfer(address indexed from, address indexed to, uint256 value)", + }); + + function YourComponent() { + const { data: contractEvents } = useContractEvents({ + contract, + events: [myEvent], + }); + + return ( +
+ {contractEvents?.map((event, index) => ( +
+ Event: {event.eventName} +
+ ))} +
+ ); + } + ``` + + ### Using standard event definitions + + You can also use the standard event definitions from the SDK. + + ```jsx + import { useContractEvents } from "thirdweb/react"; + import { transferEvent } from "thirdweb/extensions/erc20"; + + function YourComponent() { + const { data: contractEvents } = useContractEvents({ + contract, + events: [transferEvent()], + }); + + return ( +
+ {contractEvents?.map((event, index) => ( +
+ Transfer from {event.args.from} to {event.args.to} +
+ ))} +
+ ); + } + ``` + + + + diff --git a/apps/portal/src/app/contracts/extensions/page.tsx b/apps/portal/src/app/contracts/extensions/page.tsx index b440ba67033..9707ea4f4f1 100644 --- a/apps/portal/src/app/contracts/extensions/page.tsx +++ b/apps/portal/src/app/contracts/extensions/page.tsx @@ -70,15 +70,9 @@ export default async function ExtensionPage() { - More extensions are being added regularly. Anyone can{" "} - - create an extension - {" "} - and contribute it back to the repository. You can also{" "} - - generate extensions - {" "} - for any deployed contract. + More extensions are being added regularly. You can also{" "} + generate extensions for + any deployed contract. ); diff --git a/apps/portal/src/app/contracts/page.mdx b/apps/portal/src/app/contracts/page.mdx index 8804184b10a..89e77511c13 100644 --- a/apps/portal/src/app/contracts/page.mdx +++ b/apps/portal/src/app/contracts/page.mdx @@ -34,8 +34,6 @@ export const metadata = createMetadata({ Read, write, and deploy smart contracts on any EVM compatible blockchain. ---- - @@ -71,19 +69,17 @@ Read, write, and deploy smart contracts on any EVM compatible blockchain. ### Read a Contract - You can read contract data efficiently using the [contract read API](https://engine.thirdweb.com/reference). + You can read contract data efficiently using the [contract read API](https://api.thirdweb.com/reference#tag/contracts/post/v1/contracts/read). ```http - GET /v1/contract/read + GET /v1/contracts/read + Host: api.thirdweb.com Content-Type: application/json - x-secret-key: + x-client-id: { - "readOptions": { - "chainId": "1" // your chain id - "from": "0x...", // optional, if you want to read from a specific address - }, - "params": [{ + "chainId": "1" // your chain id + "calls": [{ "contractAddress": "0x...", "method": "function allowance(address owner, address spender)", "params": ["0x...", "0x..."], @@ -93,33 +89,67 @@ Read, write, and deploy smart contracts on any EVM compatible blockchain. You can batch multiple contract reads in a single request, and the response will be an array of results or errors. + Authentication requires either `x-secret-key` (backend) or `x-client-id` (frontend) to be set in the request headers. + ### Write to a Contract - You can write to a contract using the [contract write API](https://engine.thirdweb.com/reference). - - ```http - POST /v1/contract/write - Content-Type: application/json - x-secret-key: - - { - "executionOptions": { - "from": "0x...", // your server wallet address - "chainId": "1" // your chain id - }, - "params": [{ - "contractAddress": "0x...", - "method": "function transfer(address to, uint256 amount)", - "params": ["0x...", "1000000000000000000"], - }] - } - ``` + You can write to a contract using the [contract write API](https://api.thirdweb.com/reference#tag/contracts/post/v1/contracts/write). - You can batch multiple contract writes in a single request, and the transactions will be batched atomically onchain. + + + Frontend + Backend + - ### Deploy a Contract + + + On the frontend, use your project client ID and the users's auth token to send a transaction on their behalf. + + ```http + POST /v1/contracts/write + Host: api.thirdweb.com + Content-Type: application/json + x-client-id: + Authorization: Bearer + + { + "from": "0x...", // the user wallet address + "chainId": "1" // the chain id + "calls": [{ + "contractAddress": "0x...", + "method": "function transfer(address to, uint256 amount)", + "params": ["0x...", "1000000000000000000"], + }], + } + ``` + + - You can deploy a contract using the [contract deploy API](https://engine.thirdweb.com/reference). + + + On the backend, use your project secret key to send a transaction from any of your server wallets. + + ```http + POST /v1/contracts/write + Host: api.thirdweb.com + Content-Type: application/json + x-secret-key: + + { + "from": "0x...", // your server wallet address + "chainId": "1" // your chain id + "calls": [{ + "contractAddress": "0x...", + "method": "function transfer(address to, uint256 amount)", + "params": ["0x...", "1000000000000000000"], + }], + } + ``` + + + + + You can batch multiple contract writes in a single request, and the transactions will be batched atomically onchain. diff --git a/apps/portal/src/app/contracts/sidebar.tsx b/apps/portal/src/app/contracts/sidebar.tsx index da3fbcdef4e..56444705ad1 100644 --- a/apps/portal/src/app/contracts/sidebar.tsx +++ b/apps/portal/src/app/contracts/sidebar.tsx @@ -1,4 +1,4 @@ -import { ZapIcon } from "lucide-react"; +import { ExternalLinkIcon, ZapIcon } from "lucide-react"; import type { SideBar } from "@/components/Layouts/DocLayout"; import { DotNetIcon, @@ -18,6 +18,11 @@ export const sidebar: SideBar = { name: "Get Started", icon: , }, + { + href: "https://playground.thirdweb.com/", + icon: , + name: "Playground", + }, { separator: true }, { isCollapsible: false, @@ -32,7 +37,11 @@ export const sidebar: SideBar = { }, { href: `${slug}/events`, - name: "Listen to Events", + name: "Get Contract Events", + }, + { + href: `${slug}/transactions`, + name: "Get Contract Transactions", }, { href: `${slug}/deploy`, diff --git a/apps/portal/src/app/contracts/transactions/page.mdx b/apps/portal/src/app/contracts/transactions/page.mdx new file mode 100644 index 00000000000..a4a6ac9415a --- /dev/null +++ b/apps/portal/src/app/contracts/transactions/page.mdx @@ -0,0 +1,47 @@ +import { + Tabs, + TabsList, + TabsTrigger, + TabsContent, +} from "@doc"; +import { + EngineIcon, +} from "@/icons"; + +# Contract Transactions + +Query all transactions for any deployed contract on any EVM chain. + + + + + + HTTP + + + + + ### Get Contract Transactions + + You can fetch all transactions for a contract using the [contract transactions API](https://api.thirdweb.com/reference#tag/contracts/get/v1/contracts/{address}/transactions). + + ```http + GET /v1/contracts/{address}/transactions?chainId=&decode=true + Host: api.thirdweb.com + x-secret-key: + ``` + + Authentication requires either `x-secret-key` (backend) or `x-client-id` (frontend) to be set in the request headers. + + #### Parameters + + - `address` - The contract address + - `chainId` - The chain ID where the contract is deployed + - `decode` - Whether to decode the transaction data (optional, defaults to false) + + #### Response + + The API returns a list of transactions that have interacted with the specified contract, including transaction details and decoded function calls when `decode=true` is specified. + + + diff --git a/apps/portal/src/app/page.tsx b/apps/portal/src/app/page.tsx index 784e185b529..bb29b677422 100644 --- a/apps/portal/src/app/page.tsx +++ b/apps/portal/src/app/page.tsx @@ -112,6 +112,11 @@ function ReferenceSection() {
+ - Payments > Settings. + + + +### Protocol Fee + +Our protocol fee is a flat 30 basis points (0.30%) applied on the source token amount. +This fee is independent of network gas fees and does not fluctuate. + +#### Setting fees using buy or sell + +You can configure who pays the protocol fee for buy or sell transactions by specifying the input amount `sell` or `buy`. + +See full reference for [`buy`](https://portal.thirdweb.com/references/typescript/v5/buy/prepare) and [`sell`](https://portal.thirdweb.com/references/typescript/v5/sell/prepare). + +#### Setting fees on transfers or purchase mode + +You can configure who pays the protocol fee for transfers or purchase mode using the `feePayer` setting. This affects the +total amount paid by the user and the amount received by the destination (e.g., a seller, app, or partner). + +feePayer=buyer (Default) i.e. the user covers the protocol fee. + +Example: If the source token is 10 USDC, the user pays 10.30 USDC. + +- thirdweb receives: 0.30 USDC + +- Receiver receives: 10.00 USDC + +feePayer=receiver i.e. the receiver covers the protocol fee. + +Example: The user pays 10.00 USDC. + +- thirdweb receives: 0.30 USDC + +- Receiver receives: 9.70 USDC + +[See full reference.](https://bridge.thirdweb.com/reference#tag/transfer/POST/v1/transfer/prepare) + +### Onramp Fee + +When onramping to crypto using the Payments, a fee is charged by the third-party provider. This fee is determined by the provider and is typically a percentage +of the amount being onramped. This fee may vary based on the provider and payment method used. + +There are no protocol fees on onramp transactions. \ No newline at end of file diff --git a/apps/portal/src/app/payments/fund/page.mdx b/apps/portal/src/app/payments/fund/page.mdx new file mode 100644 index 00000000000..05f94b31208 --- /dev/null +++ b/apps/portal/src/app/payments/fund/page.mdx @@ -0,0 +1,92 @@ +import { + Callout, + createMetadata, + Tabs, + TabsList, + TabsTrigger, + TabsContent, + ArticleIconCard +} from "@doc"; +import { + ReactIcon, +} from "@/icons"; +import { ZapIcon } from "lucide-react"; + +export const metadata = createMetadata({ + image: { + title: "Fund Wallet", + icon: "payments", + }, + title: "Fund Wallet", + description: "Fund wallets with crypto using the BuyWidget.", +}); + +# Fund wallets + +Fund wallets with crypto using the `BuyWidget`. + + + + + + React + + + + + +### Fund a wallet with the `BuyWidget` + +```tsx +import { BuyWidget } from "thirdweb/react"; +import { createThirdwebClient } from "thirdweb"; +import { base } from "thirdweb/chains"; + +const client = createThirdwebClient({ + clientId: "YOUR_CLIENT_ID", +}); + +function ProductPage() { + return ( +
+

Fund Wallet

+

Top your wallet with crypto

+ + { + alert("Top up successful!"); + // Redirect or update UI + }} + /> +
+ ); +} +``` + +The BuyWidget handles the complete payment flow, supporting both crypto and fiat payments across 50+ chains. + + + +## View it in action: + + + +## Going Further + +- [Custom Payment Data](/payments/custom-data) - Attach metadata to payments +- [Webhooks](/payments/webhooks) - Get notified when payments complete + +## API Reference + +- [BuyWidget](/references/typescript/v5/BuyWidget) diff --git a/apps/portal/src/app/payments/onramp-providers/page.mdx b/apps/portal/src/app/payments/onramp-providers/page.mdx new file mode 100644 index 00000000000..113f49d4c57 --- /dev/null +++ b/apps/portal/src/app/payments/onramp-providers/page.mdx @@ -0,0 +1,40 @@ +import { createMetadata } from "@doc"; + +export const metadata = createMetadata({ + image: { + title: "thirdweb Payments - Onramp Providers", + icon: "thirdweb", + }, + title: "thirdweb Payments - Onramp Providers | thirdweb", + description: + "Integrate onramp providers for any onchain transaction and set preferred providers", +}); + +# Onramp Providers + +**Onramp Providers** are services that allow users to buy crypto with fiat. Payments supports the following onramp providers: + +- **Coinbase** +- **Transak** +- **Stripe** + +## Provider Fees + +Each provider has different fees associated with their services which often depend on various factors. Onramp provider fees are set by the provider and are not controlled by thirdweb. + +| Provider | Fees | +| -------- | ---- | +| Coinbase | [Learn more about Coinbase Fees](https://help.coinbase.com/en/coinbase/trading-and-funding/pricing-and-fees/fees) | +| Transak | [Learn more about Transak Fees](https://support.transak.com/en/articles/7845942-how-does-transak-calculate-prices-and-fees)| +| Stripe | [Learn more about Stripe Fees](https://stripe.com/legal/crypto-onramp). | + + +## Provider Regions + +Each provider has different regions they support. You can learn more about the supported regions for each provider in the links below. + +| Provider | Regions | +| -------- | ------- | +| Coinbase | [View Regions](https://docs.cdp.coinbase.com/onramp/docs/api-configurations) | +| Transak | [View Regions](https://transak.com/global-coverage) | +| Stripe | [View Regions](https://support.stripe.com/questions/crypto-supportability-and-availability-by-region) | \ No newline at end of file diff --git a/apps/portal/src/app/payments/page.mdx b/apps/portal/src/app/payments/page.mdx index 670d7ba615b..afc670e9839 100644 --- a/apps/portal/src/app/payments/page.mdx +++ b/apps/portal/src/app/payments/page.mdx @@ -34,15 +34,15 @@ export const metadata = createMetadata({ thirdweb Payments allow developers to create advanced payment flows to monetize their apps through product sales, peer to peer payments, token sales, and more. - + - - - TypeScript - React + + + + TypeScript @@ -84,7 +84,9 @@ thirdweb Payments allow developers to create advanced payment flows to monetize ```typescript import { Bridge, NATIVE_TOKEN_ADDRESS, toWei } from "thirdweb"; - const preparedQuote = await Bridge.Buy.prepare({ + +// Quote to buy 10 USDC on Optimism, paid with USDT on Arbitrum +const preparedQuote = await Bridge.Buy.prepare({ originChainId: 42161, originTokenAddress: "0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9", // USDT on Arbitrum destinationChainId: 10, @@ -98,99 +100,22 @@ thirdweb Payments allow developers to create advanced payment flows to monetize The prepared quote will contain details about the payment, including the transactions needed to execute it. - ```typescript -{ - blockNumber: 359092559n, - destinationAmount: 10000000n, - estimatedExecutionTimeMs: 4000, - intent: { - amount: 10000000n, - destinationChainId: 10, - destinationTokenAddress: "0x0b2C639c533813f4Aa9D7837CAf62653d097Ff85", - originChainId: 42161, - originTokenAddress: "0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9", - receiver: "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045", - sender: "0x2a4f24F935Eb178e3e7BA9B53A5Ee6d8407C0709" - }, - originAmount: 10090837n, - steps: [ - { - originToken: { - chainId: 42161, - address: "0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9", - symbol: "USDT", - name: "Tether USD", - decimals: 6, - priceUsd: 1.000466, - iconUri: "https://coin-images.coingecko.com/coins/images/39963/large/usdt.png?1724952731", - prices: { - USD: 1.000466, - EUR: 0.8609646893353334, - // ...more currencies - } - }, - destinationToken: { - chainId: 10, - address: "0x0b2C639c533813f4Aa9D7837CAf62653d097Ff85", - symbol: "USDC", - name: "USD Coin", - decimals: 6, - priceUsd: 0.999859, - iconUri: "https://ethereum-optimism.github.io/data/USDC/logo.png", - prices: { - USD: 0.999859, - EUR: 0.8604423271896667, - // ...more currencies - } - }, - transactions: [ - { - chainId: 42161, - to: "0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9", - data: "0x095ea7b3000000000000000000000000f8ab2dbe6c43bf1a856471182290f91d621ba76d00000000000000000000000000000000000000000000000000000000009d0695", - type: "eip1559", - id: "0x2354360325ff8315dad5673894207d90c28cb898788025202b6a6f8c2bd8220a", - action: "approval", - chain: { - // ...chain details - }, - client: { - clientId: "...", - } - }, - { - type: "eip1559", - to: "0xF8Ab2dBE6c43bf1a856471182290f91D621Ba76d", - from: "0x2a4f24F935Eb178e3e7BA9B53A5Ee6d8407C0709", - value: 0n, - data: "0x...", - chainId: 42161, - action: "buy", - id: "0xc4fd6ecdbbf6fb0780c87779adff09ea7f480fac385b8db4873fc1a0d3309264", - spender: "0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9", - chain: { - // ...chain details - }, - client: { - clientId: "...", - } - } - ], - originAmount: 10090837n, - destinationAmount: 10000000n, - estimatedExecutionTimeMs: 4000 - } - ], - timestamp: 1752866509083 -} - ``` - 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. 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. + + ### Live Playground + + + ### Installation Install the thirdweb SDK in your React project: diff --git a/apps/portal/src/app/payments/products/page.mdx b/apps/portal/src/app/payments/products/page.mdx index 9516da99604..3c16a4c75e8 100644 --- a/apps/portal/src/app/payments/products/page.mdx +++ b/apps/portal/src/app/payments/products/page.mdx @@ -4,7 +4,8 @@ import { Tabs, TabsList, TabsTrigger, - TabsContent + TabsContent, + ArticleIconCard, } from "@doc"; import { ReactIcon, @@ -77,6 +78,15 @@ The CheckoutWidget handles the complete payment flow, supporting both crypto and +## View it in action: + + + ## Going Further - [Custom Payment Data](/payments/custom-data) - Attach metadata to payments diff --git a/apps/portal/src/app/payments/sidebar.tsx b/apps/portal/src/app/payments/sidebar.tsx index 84f7d022482..1b22ceceb1f 100644 --- a/apps/portal/src/app/payments/sidebar.tsx +++ b/apps/portal/src/app/payments/sidebar.tsx @@ -12,10 +12,27 @@ export const sidebar: SideBar = { name: "Get Started", icon: , }, + { + href: "https://playground.thirdweb.com/", + icon: , + name: "Playground", + }, { separator: true }, { isCollapsible: false, links: [ + { + href: `${paymentsSlug}/fund`, + name: "Fund Wallets", + }, + { + href: `${paymentsSlug}/products`, + name: "Sell a Product", + }, + { + href: `${paymentsSlug}/transactions`, + name: "Pay for Transactions", + }, { href: `${paymentsSlug}/send`, name: "Send a Payment", @@ -24,10 +41,6 @@ export const sidebar: SideBar = { href: `${paymentsSlug}/sell`, name: "Sell Tokens", }, - { - href: `${paymentsSlug}/products`, - name: "Sell a Product", - }, { href: `${paymentsSlug}/tokens`, name: "Get Token Prices", @@ -85,14 +98,12 @@ export const sidebar: SideBar = { name: "Resources", links: [ { - href: "https://playground.thirdweb.com/", - icon: , - name: "Playground", + href: `${paymentsSlug}/fees`, + name: "Understanding Fees", }, { - href: "https://thirdweb.com/templates", - icon: , - name: "Templates", + href: `${paymentsSlug}/onramp-providers`, + name: "Onramp Providers", }, { href: `${paymentsSlug}/faq`, diff --git a/apps/portal/src/app/payments/transactions/page.mdx b/apps/portal/src/app/payments/transactions/page.mdx new file mode 100644 index 00000000000..6bbd0073463 --- /dev/null +++ b/apps/portal/src/app/payments/transactions/page.mdx @@ -0,0 +1,105 @@ +import { + Callout, + createMetadata, + Tabs, + TabsList, + TabsTrigger, + TabsContent, + ArticleIconCard, +} from "@doc"; +import { ReactIcon } from "@/icons"; + +export const metadata = createMetadata({ + image: { + title: "Onchain Transactions", + icon: "payments", + }, + title: "Onchain Transactions", + description: "Accept any token as payment for your onchain transactions.", +}); + +# Pay for Transactions + +Pay for onchain transactions using any token or fiat with the `TransactionWidget`. + + + + + + React + + + + + +### Pay for a transaction with the `TransactionWidget` + +```tsx +import { TransactionWidget } from "thirdweb/react"; +import { createThirdwebClient, prepareContractCall, getContract } from "thirdweb"; +import { arbitrum } from "thirdweb/chains"; +import { toUnits } from "thirdweb/utils"; + +const client = createThirdwebClient({ + clientId: "YOUR_CLIENT_ID", +}); + +const contract = getContract({ + client, + address: "0x...", // the target contract address + chain: arbitrum, +}); + +function ProductPage() { + return ( +
+

Execute a transaction

+

Execute a transaction onchain

+ + { + alert("Transaction successful!"); + // Redirect or update UI + }} + /> +
+ ); +} +``` + +The TransactionWidget handles the complete payment flow, supporting both crypto and fiat payments across 50+ chains. + + + + +## View it in action: + + + +## Going Further + +- [Custom Payment Data](/payments/custom-data) - Attach metadata to payments +- [Webhooks](/payments/webhooks) - Get notified when payments complete + +## API Reference + +- [TransactionWidget](/references/typescript/v5/transactionwidget) diff --git a/apps/portal/src/app/tokens/page.mdx b/apps/portal/src/app/tokens/page.mdx index e59f1fcb07d..5cba45a36ce 100644 --- a/apps/portal/src/app/tokens/page.mdx +++ b/apps/portal/src/app/tokens/page.mdx @@ -16,8 +16,6 @@ Deploy and manage tokens on any EVM compatible blockchain, thirdweb offers: - Prebuilt audited contracts deployable via dashboard or programatically. - Base implementations to customize and build your own contracts. ---- - diff --git a/apps/portal/src/app/transactions/distribute-tokens/page.mdx b/apps/portal/src/app/transactions/distribute-tokens/page.mdx index 7b254fc6fcf..408225f1b49 100644 --- a/apps/portal/src/app/transactions/distribute-tokens/page.mdx +++ b/apps/portal/src/app/transactions/distribute-tokens/page.mdx @@ -79,7 +79,7 @@ export async function POST(request: Request) { const { userWalletAddress } = await request.json(); await fetch( - "https://engine.thirdweb.com/v1/contract/write", + "https://api.thirdweb.com/v1/contracts/write", { method: "POST", headers: { @@ -87,11 +87,9 @@ export async function POST(request: Request) { "x-secret-key": "", }, body: JSON.stringify({ - executionOptions: { - from: "", - chainId: "", - }, - params: [ + from: "", + chainId: "", + calls: [ { contractAddress: "", method: "function transfer(address to, uint256 amount)", diff --git a/apps/portal/src/app/transactions/monitor/page.mdx b/apps/portal/src/app/transactions/monitor/page.mdx index f7b0a7c1657..2c6f34edfb6 100644 --- a/apps/portal/src/app/transactions/monitor/page.mdx +++ b/apps/portal/src/app/transactions/monitor/page.mdx @@ -24,8 +24,6 @@ export const metadata = createMetadata({ Monitor and get notified about transactions in your application, both on your project dashboard and programmatically. ---- - @@ -43,12 +41,13 @@ Monitor and get notified about transactions in your application, both on your pr You can track the status of transactions sent via the [transactions API](https://engine.thirdweb.com/reference) using its transaction id. ```http -GET /v1/transactions?id= +GET /v1/transactions/{transactionId} +Host: api.thirdweb.com Content-Type: application/json x-secret-key: ``` -You can also search transactions by `from` or `status`. +You can also list and search multiple transactions by with the [`/transactions` endpoint](https://api.thirdweb.com/reference#tag/transactions/get/v1/transactions). diff --git a/apps/portal/src/app/transactions/page.mdx b/apps/portal/src/app/transactions/page.mdx index 0773a46f526..33ef0247163 100644 --- a/apps/portal/src/app/transactions/page.mdx +++ b/apps/portal/src/app/transactions/page.mdx @@ -34,8 +34,6 @@ export const metadata = createMetadata({ Send, monitor, and manage transactions. Send transactions from user or server wallets, sponsor gas, monitor transaction status, and more. ---- - @@ -69,28 +67,96 @@ Send, monitor, and manage transactions. Send transactions from user or server wa + ### Send a Transaction - You can send transactions with your [server wallets](/wallets/server) using the [transactions API](https://engine.thirdweb.com/reference). + Send a transaction from a [user wallet](/wallets/users) from the frontend, or [server wallet](/wallets/server) from the backend using the [thirdweb API](https://api.thirdweb.com/reference#tag/transactions/post/v1/transactions). + + Transactions can be of type `contract-call`, `encoded` or `native-transfer`, and will be batched atomically onchain. + + + + Frontend + Backend + + + + + On the frontend, use your project client ID and the users's auth token to send a transaction on their behalf. + + ```http + POST /v1/transactions + Host: api.thirdweb.com + Content-Type: application/json + x-client-id: + # user auth token can be obtained from one of the v1/wallet/user login endpoints + Authorization: Bearer + + { + "from": "0x...", // the user wallet address + "chainId": "1" // the chain id + "transactions": [{ + // contract call + "type": "contract-call", + "contractAddress": "0x...", + "method": "function transfer(address to, uint256 amount)", + "params": ["0x...", "1000000000000000000"], + }, { + // encoded transaction + "type": "encoded", + "to": "0x...", + "data": "0x...", + }, { + // native transfer + "type": "native-transfer", + "to": "0x...", + "value": "1000000000000000000", // in wei + }], + } + ``` + + In React applications that use the SDK, you can obtain the user auth token with the [`useAuthToken()`](/references/typescript/v5/useAuthToken) hook. + + In TypeScript applications, you can get it by calling `wallet.getAuthToken()` on a connected [`inAppWallet()`](/references/typescript/v5/inAppWallet) or [`ecosystemWallet()`](/references/typescript/v5/ecosystemWallet). + + + + + + On the backend, use your project secret key to send a transaction from any of your server wallets. - ```http - POST /v1/contract/write + ```http + POST /v1/transactions + Host: api.thirdweb.com Content-Type: application/json x-secret-key: - { - "executionOptions": { - "from": "0x...", // your server wallet address - "chainId": "1" // your chain id - }, - "params": [{ + { + "from": "0x...", // the server wallet address + "chainId": "1" // the chain id + "transactions": [{ + // contract call + "type": "contract-call", "contractAddress": "0x...", "method": "function transfer(address to, uint256 amount)", "params": ["0x...", "1000000000000000000"], + }, { + // encoded transaction + "type": "encoded", + "to": "0x...", + "data": "0x...", + }, { + // native transfer + "type": "native-transfer", + "to": "0x...", + "value": "1000000000000000000", // in wei }], - } + } ``` + + + diff --git a/apps/portal/src/app/transactions/session-keys/page.mdx b/apps/portal/src/app/transactions/session-keys/page.mdx index 16081c42f0b..4c7c62aeb3b 100644 --- a/apps/portal/src/app/transactions/session-keys/page.mdx +++ b/apps/portal/src/app/transactions/session-keys/page.mdx @@ -145,7 +145,6 @@ const serverWallet = Engine.serverWallet({ smartAccountAddress: smartAccount.address, type: "ERC4337", }, - vaultAccessToken: process.env.VAULT_TOKEN as string, // Your vault access token }); ``` diff --git a/apps/portal/src/app/transactions/sidebar.tsx b/apps/portal/src/app/transactions/sidebar.tsx index 3ecafd96410..333b4ecf9f6 100644 --- a/apps/portal/src/app/transactions/sidebar.tsx +++ b/apps/portal/src/app/transactions/sidebar.tsx @@ -1,4 +1,4 @@ -import { ZapIcon } from "lucide-react"; +import { ExternalLinkIcon, ZapIcon } from "lucide-react"; import type { SideBar } from "@/components/Layouts/DocLayout"; import { DotNetIcon, ReactIcon, TypeScriptIcon, UnityIcon } from "@/icons"; import { UnrealEngineIcon } from "../../icons/sdks/UnrealEngineIcon"; @@ -12,6 +12,11 @@ export const sidebar: SideBar = { name: "Get Started", icon: , }, + { + href: "https://playground.thirdweb.com/", + icon: , + name: "Playground", + }, { separator: true }, { name: "Guides", diff --git a/apps/portal/src/app/transactions/sponsor/page.mdx b/apps/portal/src/app/transactions/sponsor/page.mdx index 88118dd8f21..fe38f22f178 100644 --- a/apps/portal/src/app/transactions/sponsor/page.mdx +++ b/apps/portal/src/app/transactions/sponsor/page.mdx @@ -24,8 +24,6 @@ export const metadata = createMetadata({ Sponsor gas fees for transactions using EIP-7702 or ERC-4337. Thirdweb will handle the gas fees for you. ---- - EIP-7702 @@ -56,19 +54,18 @@ Sponsor gas fees using [EIP-7702](https://eips.ethereum.org/EIPS/eip-7702), enab - You can enable EIP-7702 execution for your server wallet and the [transactions API](https://engine.thirdweb.com/reference). This is the default execution mode for server wallets. + EIP-7702 is the default execution mode in the [thirdweb API](https://api.thirdweb.com/reference) for your user and server wallets. ```http -POST /v1/contract/write +POST /v1/contracts/write +Host: api.thirdweb.com Content-Type: application/json x-secret-key: { - "executionOptions": { - "from": "0x...", // your server wallet **signer (EOA) address** address - "chainId": "1" // your chain id - }, - "params": [{ + "from": "0x...", // your user or server wallet **EOA address** address + "chainId": "1", // your chain id + "calls": [{ "contractAddress": "0x...", "method": "function transfer(address to, uint256 amount)", "params": ["0x...", "1000000000000000000"], @@ -76,8 +73,6 @@ x-secret-key: } ``` -You can also explicitly set `type: "EIP7702"` in the `executionOptions` to enable EIP-7702 execution. - @@ -148,17 +143,20 @@ For chains that don't support EIP-7702, you can use EIP-4337 smart contract wall -You can enable ERC-4337 execution for your server wallet and the [transactions API](https://engine.thirdweb.com/reference). +ERC4337 execution is not supported in the high level thirdweb API, but you can use the lower level [transactions API](https://engine.thirdweb.com/reference#tag/write/post/v1/write/contract) with specific execution options: ```http -POST /v1/contract/write +POST /v1/contracts/write +Host: engine.thirdweb.com Content-Type: application/json x-secret-key: { "executionOptions": { - "from": "0x...", // your server wallet **smart wallet** address - "chainId": "1" // your chain id + "type": "ERC4337", + "signerAddress": "0x...", // the EOA that has sign permissions on the smart wallet + "smartAccountAddress": "0x...", // optional, the address of the smart wallet to act on behalf of + "chainId": "1", // your chain id }, "params": [{ "contractAddress": "0x...", @@ -168,13 +166,13 @@ x-secret-key: } ``` -You can also explicitly set `type: "ERC4337"` in the `executionOptions` to enable ERC-4337 execution. +View all the available execution options in the [transactions API reference](https://engine.thirdweb.com/reference#tag/write/post/v1/write/contract). + For user wallets, you can enable ERC-4337 execution by passing the `smartAccount` option to the `inAppWallet` function. - ```typescript const wallet = inAppWallet({ // will create a smart contract wallet for the user diff --git a/apps/portal/src/app/wallets/get-users/page.mdx b/apps/portal/src/app/wallets/get-users/page.mdx index c96c4269350..4be4b012a7c 100644 --- a/apps/portal/src/app/wallets/get-users/page.mdx +++ b/apps/portal/src/app/wallets/get-users/page.mdx @@ -4,12 +4,12 @@ import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"; import { TypeScriptIcon } from "@/icons"; export const metadata = createMetadata({ - image: { - title: "Get Users", - icon: "wallets", - }, - title: "Get Users | thirdweb", - description: "Learn how to fetch in-app wallet users for your application.", + image: { + title: "Get Users", + icon: "wallets", + }, + title: "Get Users", + description: "Learn how to fetch in-app wallet users for your application.", }); # Fetch Users @@ -28,19 +28,17 @@ From your backend, you can list all your users and fetch the details of any user `GET` request to the following endpoint: -``` -https://in-app-wallet.thirdweb.com/api/2023-11-30/embedded-wallet/user-details +```http +GET /v1/wallets/user?email=user@example.com +Host: api.thirdweb.com +x-secret-key: ``` ### Query Parameters -You can specify the query parameter `queryBy` to query by different user identifiers: - -- `queryBy`: The parameter to query by. Can be one of `walletAddress`, `email`, `phone`, `externalWalletAddress`, or `id`. - -You can then specify the value to query by, matching the queryBy parameter: +You can then query by different user identifiers: -- `walletAddress`: The user's wallet address that thirdweb has generated for them +- `address`: The user's wallet address that thirdweb has generated for them - `email`: The user's email address - `phone`: The user's phone number - `externalWalletAddress`: The user's wallet address that used to login via SIWE @@ -60,7 +58,7 @@ Here's an example curl command to fetch user details by email: ```bash -curl -X GET 'https://in-app-wallet.thirdweb.com/api/2023-11-30/embedded-wallet/user-details?queryBy=email&email=user@example.com' \ +curl -X GET 'https://api.thirdweb.com/v1/wallets/user?email=user@example.com' \ -H 'x-secret-key: YOUR_SECRET_KEY' ``` @@ -68,14 +66,14 @@ curl -X GET 'https://in-app-wallet.thirdweb.com/api/2023-11-30/embedded-wallet/u Here's an example curl command to fetch user details by address: ```bash -curl -X GET 'https://in-app-wallet.thirdweb.com/api/2023-11-30/embedded-wallet/user-details?queryBy=walletAddress&walletAddress=0x123456789abcdef' \ +curl -X GET 'https://api.thirdweb.com/v1/wallets/user?address=0x123456789abcdef' \ -H 'x-secret-key: YOUR_SECRET_KEY' ``` Here's an example curl command to fetch the user details for an ecosystem owner: ```bash -curl -X GET 'https://in-app-wallet.thirdweb.com/api/2023-11-30/embedded-wallet/user-details?queryBy=walletAddress&walletAddress=0x123456789abcdef' \ +curl -X GET 'https://api.thirdweb.com/v1/wallets/user?address=0x123456789abcdef' \ -H 'x-secret-key: YOUR_SECRET_KEY' \ -H 'x-ecosystem-id: ecosystem.YOUR_ECOSYSTEM_ID' \ -H 'x-ecosystem-partner-id: YOUR_PARTNER_ID' @@ -90,47 +88,47 @@ Replace `YOUR_ECOSYSTEM_ID` and `YOUR_PARTNER_ID` with your actual ecosystem ID The API returns a JSON array with the following structure for each user: ```json -[ - { - "userId": "string", - "walletAddress": "string", - "email": "string (optional)", - "phone": "string (optional)", - "createdAt": "string", - "linkedAccounts": [ - { - "type": "string", - "details": { - "phone": "string", - // or - "email": "string", - // or - "address": "string", - // or - "id": "string", - // Additional key-value pairs may be present - } - } - ] - } -] +{ + "result": { + "pagination": { + "hasMore": false, + "limit": 50, + "page": 1 + }, + "wallets": [ + { + "address": "0x3aA70e68BBA8BC922a75d07388e368892c15c9Da", + "createdAt": "2025-07-21T22:58:12.834Z", + "profiles": [ + { + "id": "107302390467834615186", + "name": "Richard Hendricks", + "type": "google", + "email": "richard@piedpiper.com", + "picture": "https://lh3.googleusercontent.com/a/ACg8ocKC1D6ezzzaZxxUk4qtK_HCwVwpNamVopazXwklGBwuuHeSf_c=s96-c", + "givenName": "Richard", + "emailVerified": true + } + ] + } + ] + } +} ``` -Note: The `details` object in `linkedAccounts` will contain different fields based on the account type. See the [list of Strategies](#list-of-strategies) above for more information. - -Remember to handle the response appropriately in your chosen programming language, including error cases and parsing the JSON response. +For more information, [view the full reference](https://api.thirdweb.com/reference#tag/wallets/get/v1/wallets/user) ### Convenience Methods If you are using the thirdweb SDK, you can use the `getUser` method to retrieve user details. - + @@ -141,14 +139,16 @@ If you are using the thirdweb SDK, you can use the `getUser` method to retrieve `GET` request to the following endpoint: -``` -https://in-app-wallet.thirdweb.com/api/v1/users +```http +GET /v1/wallets/users +Host: api.thirdweb.com +x-secret-key: ``` ### Query Parameters -- `offset` (optional): Number of users to skip (for pagination) -- `limit` (optional): Maximum number of users to return per request (defaults to 100) +- `page` (optional): The page number to fetch (for pagination) +- `limit` (optional): Maximum number of users to return per request (defaults to 50) ### Authentication @@ -158,8 +158,9 @@ You need to include the following headers: - `x-ecosystem-id` (optional): Your ecosystem ID - `x-ecosystem-partner-id` (optional): Your ecosystem partner ID - -For ecosystem wallets, the secret key have to be from the same account as the ecosystem owner. + + For ecosystem wallets, the secret key have to be from the same account as the + ecosystem owner. ### Example Requests @@ -167,7 +168,7 @@ For ecosystem wallets, the secret key have to be from the same account as the ec Here's an example curl command to fetch all users: ```bash -curl -X GET 'https://in-app-wallet.thirdweb.com/api/v1/users?offset=200&limit=100' \ +curl -X GET 'https://api.thirdweb.com/v1/wallets/users?page=2&limit=100' \ -H 'x-secret-key: YOUR_SECRET_KEY' \ -H 'Content-Type: application/json' ``` @@ -177,13 +178,19 @@ curl -X GET 'https://in-app-wallet.thirdweb.com/api/v1/users?offset=200&limit=10 A successful API call returns an array of user objects in the following format: ```json -[ +{ + "result": { + "pagination": { + "hasMore": false, + "limit": 50, + "page": 1 + }, + "wallets": [ { - "userId": "9841a5de-b4a6-44b3-ad14-c4b8745782ca", - "walletAddress": "0x933F5BC72634c55b3643A6Aa0cD5b65ca4915d39", - "createdAt": "2024-11-05T00:55:25.142Z", - "authProvider": "google", - "authDetails": { + "address": "0x3aA70e68BBA8BC922a75d07388e368892c15c9Da", + "createdAt": "2025-07-21T22:58:12.834Z", + "profiles": [ + { "id": "107302390467834615186", "name": "Richard Hendricks", "type": "google", @@ -191,10 +198,10 @@ A successful API call returns an array of user objects in the following format: "picture": "https://lh3.googleusercontent.com/a/ACg8ocKC1D6ezzzaZxxUk4qtK_HCwVwpNamVopazXwklGBwuuHeSf_c=s96-c", "givenName": "Richard", "emailVerified": true + }] }, - "email": "richard@piedpiper.com", - } -] + ] +} ``` diff --git a/apps/portal/src/app/wallets/page.mdx b/apps/portal/src/app/wallets/page.mdx index 83238371edf..4fa28d6e7d7 100644 --- a/apps/portal/src/app/wallets/page.mdx +++ b/apps/portal/src/app/wallets/page.mdx @@ -17,6 +17,7 @@ import { UnityIcon, DotNetIcon, UnrealEngineIcon, + EngineIcon, } from "@/icons"; import { ExternalLink } from "lucide-react"; @@ -31,10 +32,19 @@ export const metadata = createMetadata({ # Get Started -Create wallets for your users, authenticate with your backend, connect to external wallets, and more. +Create user or server wallets, authenticate with your backend, connect to external wallets, and more. User wallets can be created using different authentication methods: - +- verification code (email, phone, etc.) +- oauth (google, apple, etc.) +- passkey +- sign in with ethereum + + + + + HTTP + TypeScript @@ -61,6 +71,65 @@ Create wallets for your users, authenticate with your backend, connect to extern + + +### API Usage + +You can use the [thirdweb API](https://api.thirdweb.com/reference) to create user wallets. + +Authentication requires either `x-secret-key` (backend) or `x-client-id` (frontend) to be set in the request headers. + +#### Send a login code to the user + +```http +POST /v1/wallets/user/code +Host: api.thirdweb.com +Content-Type: application/json +x-client-id: + +{ + "type": "email", + "email": "user@example.com" +} +``` + +#### Verify the code and authenticate the user + +```http +POST /v1/wallets/user/code/verify +Host: api.thirdweb.com +Content-Type: application/json +x-client-id: + +{ + "type": "email", + "email": "user@example.com", + "code": "123456", +} +``` + +Once authenticated, the endpoint will return the wallet address and a JWT token for usage with the rest of the API. + + + + + You can create a server wallet with your project secret key and an identifier for the wallet: + + ```http + POST /v1/wallets/server + Host: api.thirdweb.com + Content-Type: application/json + x-secret-key: + + { + "identifier": "treasury-wallet", // your identifier + } + ``` + + This will return the server wallet address to use with the rest of the API. If the wallet already exists, the same wallet will be returned. + + + ### Installation @@ -585,7 +654,7 @@ Create wallets for your users, authenticate with your backend, connect to extern To connect with other auth strategies, use external wallets, or sponsor gas for users, check out the following guides: - [Authentication Methods](/wallets/users) -- [Sponsor Gas](/wallets/sponsor-gas) +- [Server wallets](/wallets/server) - [Implement Sign In with Ethereum](/wallets/auth) - [External Wallets](/wallets/external-wallets) (e.g. MetaMask, WalletConnect, Coinbase Wallet, etc.) diff --git a/apps/portal/src/app/wallets/server/page.mdx b/apps/portal/src/app/wallets/server/page.mdx index cbb3cfe28ad..edcd2a550ba 100644 --- a/apps/portal/src/app/wallets/server/page.mdx +++ b/apps/portal/src/app/wallets/server/page.mdx @@ -32,24 +32,26 @@ Server wallets are wallets that are managed by your own application, like a trea ### Use an existing Server Wallet -Once created, you can use your server wallet by passing it as the `from` field of the `executionOptions` of the [transactions API](https://engine.thirdweb.com/reference). +Once created, you can use your server wallet by passing it as the `from` field of the [thirdweb API](https://api.thirdweb.com/reference#tag/transactions/post/v1/transactions). ### Create a new Server Wallet Programmatically ```http -POST /v1/accounts +POST /v1/wallets/server +Host: api.thirdweb.com Content-Type: application/json x-secret-key: { - "label": "My Server Wallet" + "identifier": "My Server Wallet" } ``` ### List all Server Wallets ```http -GET /v1/accounts +GET /v1/wallets/server +Host: api.thirdweb.com Content-Type: application/json x-secret-key: ``` diff --git a/apps/portal/src/app/wallets/sidebar.tsx b/apps/portal/src/app/wallets/sidebar.tsx index 65cd6dd4fa3..c092ca72bbb 100644 --- a/apps/portal/src/app/wallets/sidebar.tsx +++ b/apps/portal/src/app/wallets/sidebar.tsx @@ -12,6 +12,11 @@ export const sidebar: SideBar = { name: "Get Started", icon: , }, + { + href: "https://playground.thirdweb.com/", + icon: , + name: "Playground", + }, { separator: true }, { isCollapsible: false, @@ -33,7 +38,7 @@ export const sidebar: SideBar = { name: "Ecosystem Wallets", }, { - href: `${walletSlug}/sponsor-gas`, + href: `/transactions/sponsor`, name: "Sponsor Gas", }, { @@ -105,20 +110,14 @@ export const sidebar: SideBar = { isCollapsible: false, name: "Resources", links: [ - { - href: "https://playground.thirdweb.com/", - icon: , - name: "Playground", - }, - { - href: "https://thirdweb.com/templates", - icon: , - name: "Templates", - }, { href: `${walletSlug}/security`, name: "Security", }, + { + href: "/vault", + name: "Vault", + }, { href: `${walletSlug}/faq`, name: "FAQ", diff --git a/apps/portal/src/components/Document/AuthMethodsTabs.tsx b/apps/portal/src/components/Document/AuthMethodsTabs.tsx index d4fab5fa99b..e3047317b38 100644 --- a/apps/portal/src/components/Document/AuthMethodsTabs.tsx +++ b/apps/portal/src/components/Document/AuthMethodsTabs.tsx @@ -8,6 +8,7 @@ import { getSocialIcon } from "thirdweb/wallets/in-app"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { DotNetIcon, + EngineIcon, ReactIcon, TypeScriptIcon, UnityIcon, @@ -34,6 +35,7 @@ type AuthMethod = | "auth_endpoint"; type Platform = + | "http" | "typescript" | "react" | "react-native" @@ -67,32 +69,110 @@ const authMethods: { id: AuthMethod; label: string; description: string }[] = [ }, ]; -const platforms: { id: Platform; label: string; icon: React.ComponentType }[] = - [ - { id: "typescript", label: "TypeScript", icon: TypeScriptIcon }, - { id: "react", label: "React", icon: ReactIcon }, - { id: "react-native", label: "React Native", icon: ReactIcon }, - { id: "dotnet", label: ".NET", icon: DotNetIcon }, - { id: "unity", label: "Unity", icon: UnityIcon }, - { id: "unreal", label: "Unreal Engine", icon: UnrealEngineIcon }, - ]; - -const getCodeSnippet = (authMethod: AuthMethod, platform: Platform): string => { +const allPlatforms: { + id: Platform; + label: string; + icon: React.ComponentType; +}[] = [ + { id: "http", label: "HTTP", icon: EngineIcon }, + { id: "typescript", label: "TypeScript", icon: TypeScriptIcon }, + { id: "react", label: "React", icon: ReactIcon }, + { id: "react-native", label: "React Native", icon: ReactIcon }, + { id: "dotnet", label: ".NET", icon: DotNetIcon }, + { id: "unity", label: "Unity", icon: UnityIcon }, + { id: "unreal", label: "Unreal Engine", icon: UnrealEngineIcon }, +]; + +// Get platforms based on selected auth method +const getPlatformsForAuth = (authMethod: AuthMethod) => { + // Only show HTTP tab for email and phone + if (authMethod === "email" || authMethod === "phone") { + return allPlatforms; + } + // For other auth methods, exclude HTTP + return allPlatforms.filter((platform) => platform.id !== "http"); +}; + +const getCodeSnippet = ( + authMethod: AuthMethod, + platform: Platform, +): string[] => { switch (platform) { + case "http": + return getHTTPSnippet(authMethod); case "typescript": - return getTypeScriptSnippet(authMethod); + return [getTypeScriptSnippet(authMethod)]; case "react": - return getReactSnippet(authMethod); + return [getReactSnippet(authMethod)]; case "react-native": - return getReactSnippet(authMethod); + return [getReactSnippet(authMethod)]; case "dotnet": - return getDotNetSnippet(authMethod); + return [getDotNetSnippet(authMethod)]; case "unity": - return getUnitySnippet(authMethod); + return [getUnitySnippet(authMethod)]; case "unreal": - return getUnrealSnippet(authMethod); + return [getUnrealSnippet(authMethod)]; + default: + return [""]; + } +}; + +const getHTTPSnippet = (authMethod: AuthMethod): string[] => { + switch (authMethod) { + case "email": + return [ + `# Send a login code to the user +POST https://api.thirdweb.com/v1/wallets/user/code +Content-Type: application/json +x-client-id: + +{ + "type": "email", + "email": "user@example.com" +}`, + `# Verify the code and authenticate the user +POST https://api.thirdweb.com/v1/wallets/user/code/verify +Content-Type: application/json +x-client-id: + +{ + "type": "email", + "email": "user@example.com", + "code": "123456" +} + +// Response includes wallet address and JWT token +// Use the JWT token for subsequent API calls`, + ]; + + case "phone": + return [ + `# Send a login code to the user +POST https://api.thirdweb.com/v1/wallets/user/code +Content-Type: application/json +x-client-id: + +{ + "type": "phone", + "phone": "+1234567890" +}`, + `# Verify the code and authenticate the user +POST https://api.thirdweb.com/v1/wallets/user/code/verify +Content-Type: application/json +x-client-id: + +{ + "type": "phone", + "phone": "+1234567890", + "code": "123456" +} + +// Response includes wallet address and JWT token +// Use the JWT token for subsequent API calls`, + ]; + default: - return ""; + return [""]; } }; @@ -739,12 +819,13 @@ const getUnrealSnippet = (authMethod: AuthMethod): string => { function AuthMethodsTabsContent() { const [selectedAuth, setSelectedAuth] = useState("email"); + const platforms = getPlatformsForAuth(selectedAuth); return (
{/* Auth Method Selection */}
-

+

1. Choose Authentication Method

@@ -754,10 +835,11 @@ function AuthMethodsTabsContent() { key={method.id} onClick={() => setSelectedAuth(method.id)} className={cn( - "flex items-center gap-3 p-3 rounded-lg border text-left transition-colors", + "overflow-hidden text-ellipsis px-3 py-1.5 transition-colors duration-300 hover:text-foreground text-sm rounded-lg hover:bg-violet-800/15", selectedAuth === method.id - ? "bg-blue-50 border-blue-300 text-blue-900" - : "bg-card hover:bg-muted border-border", + ? "font-medium text-foreground bg-violet-800/25 border border-violet-800" + : "", + "flex flex-row justify-start items-start gap-3", )} > -
-
{method.label}
-
- {method.description} -
-
+
{method.label}
))}
@@ -778,8 +855,10 @@ function AuthMethodsTabsContent() { {/* Platform Tabs */}
-

2. Select Platform

- +

+ 2. Select Platform +

+ {platforms.map((platform) => { const IconComponent = platform.icon; @@ -812,17 +891,26 @@ function AuthMethodsTabsContent() { authentication with {platform.label}
-
- } - className="text-sm" - /> +
+ {getCodeSnippet(selectedAuth, platform.id).map( + (code, index) => ( + + key={index} + code={code} + lang={ + platform.id === "http" + ? "http" + : platform.id === "dotnet" || + platform.id === "unity" + ? "csharp" + : "typescript" + } + loader={} + className="text-sm" + /> + ), + )}
diff --git a/apps/portal/src/components/others/Sidebar.tsx b/apps/portal/src/components/others/Sidebar.tsx index 92bbeee8d05..7e5c7930619 100644 --- a/apps/portal/src/components/others/Sidebar.tsx +++ b/apps/portal/src/components/others/Sidebar.tsx @@ -105,7 +105,7 @@ function SidebarItem(props: { link: SidebarLink; onLinkClick?: () => void }) { return (