diff --git a/apps/portal/src/app/contracts/events/page.mdx b/apps/portal/src/app/contracts/events/page.mdx index ca98eaa672e..6e2e5cd3fcb 100644 --- a/apps/portal/src/app/contracts/events/page.mdx +++ b/apps/portal/src/app/contracts/events/page.mdx @@ -18,15 +18,15 @@ Query and listen to contract events for any deployed contract on any EVM chain. - + HTTP - + TypeScript - + React @@ -88,11 +88,11 @@ Read more on how to [generate extension functions using the CLI](/contracts/gene ```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, @@ -118,7 +118,7 @@ Read more on how to [generate extension functions using the CLI](/contracts/gene ```jsx import { useContractEvents } from "thirdweb/react"; import { transferEvent } from "thirdweb/extensions/erc20"; - + function YourComponent() { const { data: contractEvents } = useContractEvents({ contract, diff --git a/apps/portal/src/app/contracts/page.mdx b/apps/portal/src/app/contracts/page.mdx index 2bc003eb0a0..da0b186aa6c 100644 --- a/apps/portal/src/app/contracts/page.mdx +++ b/apps/portal/src/app/contracts/page.mdx @@ -38,31 +38,24 @@ Read, write, and deploy smart contracts on any EVM compatible blockchain. - HTTP - TypeScript - React - React Native - Unity - .NET - Unreal Engine diff --git a/apps/portal/src/app/contracts/transactions/page.mdx b/apps/portal/src/app/contracts/transactions/page.mdx index 971e974e92a..a4e2f9d5eaf 100644 --- a/apps/portal/src/app/contracts/transactions/page.mdx +++ b/apps/portal/src/app/contracts/transactions/page.mdx @@ -13,16 +13,4 @@ import { Query all transactions for any deployed contract on any EVM chain. - - - - - HTTP - - - - - - - - + \ No newline at end of file diff --git a/apps/portal/src/app/insight/page.mdx b/apps/portal/src/app/insight/page.mdx index e20102df6ac..7ea1e511cce 100644 --- a/apps/portal/src/app/insight/page.mdx +++ b/apps/portal/src/app/insight/page.mdx @@ -15,19 +15,19 @@ export const metadata = createMetadata({ # Insight -Insight is a tool that lets you retrieve blockchain data from any EVM chain, enrich it with metadata, and transform it using custom logic. +Insight is a tool that lets you retrieve blockchain data from any EVM chain, enrich it with metadata, and transform it using custom logic. ## Features
} + iconUrl={} /> +
- +
## Supported Chains Insight is supported on select EVM compatible chains. To view the full list, visit [thirdweb chainlist](https://thirdweb.com/chainlist?service=insight). diff --git a/apps/portal/src/app/page.tsx b/apps/portal/src/app/page.tsx index 925664fdea4..bcea3a8dd06 100644 --- a/apps/portal/src/app/page.tsx +++ b/apps/portal/src/app/page.tsx @@ -237,7 +237,7 @@ function ArticleCardIndex(props: {
- +

diff --git a/apps/portal/src/app/payments/custom-data/page.mdx b/apps/portal/src/app/payments/custom-data/page.mdx index f42d36fc4fb..c76cacb0a8c 100644 --- a/apps/portal/src/app/payments/custom-data/page.mdx +++ b/apps/portal/src/app/payments/custom-data/page.mdx @@ -35,11 +35,11 @@ Associate user IDs, custom payment IDs, order details, and more with any payment - + TypeScript - + React diff --git a/apps/portal/src/app/payments/fund/page.mdx b/apps/portal/src/app/payments/fund/page.mdx index 05f94b31208..f7c5bfa8f28 100644 --- a/apps/portal/src/app/payments/fund/page.mdx +++ b/apps/portal/src/app/payments/fund/page.mdx @@ -25,15 +25,6 @@ export const metadata = createMetadata({ Fund wallets with crypto using the `BuyWidget`. - - - - - React - - - - ### Fund a wallet with the `BuyWidget` @@ -70,10 +61,9 @@ function ProductPage() { ``` The BuyWidget handles the complete payment flow, supporting both crypto and fiat payments across 50+ chains. - - -## View it in action: + +## View it in action: - - - - React - - - - - ### Sell a Product with the `CheckoutWidget` ```tsx @@ -75,10 +65,8 @@ function ProductPage() { ``` The CheckoutWidget handles the complete payment flow, supporting both crypto and fiat payments across 50+ chains. - - -## View it in action: +## View it in action: - - - - TypeScript - - - - ### Generate a sell payment +### Generate a sell payment - To generate a sale, use the same inputs as `Buy.prepare`, but with the `Sell.prepare` function. The following function will sell 50 USDT on Arbitrum. The returned `destinationAmount` will indicate how much USDC on Optimism you'll receive after fees. +To generate a sale, use the same inputs as `Buy.prepare`, but with the `Sell.prepare` function. The following function will sell 50 USDT on Arbitrum. The returned `destinationAmount` will indicate how much USDC on Optimism you'll receive after fees. - ```typescript - import { Bridge } from "thirdweb"; +```typescript +import { Bridge } from "thirdweb"; - const preparedQuote = await Bridge.Sell.prepare({ - originChainId: 42161, - originTokenAddress: "0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9", // USDT on Arbitrum - destinationChainId: 10, - destinationTokenAddress: "0x0b2C639c533813f4Aa9D7837CAf62653d097Ff85", // USDC on Optimism - amount: 50_000_000n, // 50 USDT in wei (USDT has 6 decimals) - sender: "0x2a4f24F935Eb178e3e7BA9B53A5Ee6d8407C0709", - receiver: "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045", - client, +const preparedQuote = await Bridge.Sell.prepare({ +originChainId: 42161, +originTokenAddress: "0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9", // USDT on Arbitrum +destinationChainId: 10, +destinationTokenAddress: "0x0b2C639c533813f4Aa9D7837CAf62653d097Ff85", // USDC on Optimism +amount: 50_000_000n, // 50 USDT in wei (USDT has 6 decimals) +sender: "0x2a4f24F935Eb178e3e7BA9B53A5Ee6d8407C0709", +receiver: "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045", +client, }); - ``` +``` + +You can execute this quote exactly like a buy. See the [Send a Payment](/payments/send) guide for more details on this process. - You can execute this quote exactly like a buy. See the [Send a Payment](/payments/send) guide for more details on this process. - - ## Going further diff --git a/apps/portal/src/app/payments/send/page.mdx b/apps/portal/src/app/payments/send/page.mdx index 96907225acb..bba9855269c 100644 --- a/apps/portal/src/app/payments/send/page.mdx +++ b/apps/portal/src/app/payments/send/page.mdx @@ -33,242 +33,232 @@ export const metadata = createMetadata({ Send a payment between users using any combination of chains or tokens. thirdweb Payments handles the conversion between currencies into your app or users' destination of choice. - - - - - TypeScript - - - - - ### Generate a payment - - To get started, lets generate a payment for 10 USDC on Optimism, paid with USDT on Arbitrum. - - ```typescript - import { Bridge } from "thirdweb"; - - const preparedQuote = await Bridge.Buy.prepare({ - originChainId: 42161, - originTokenAddress: "0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9", // USDT on Arbitrum - destinationChainId: 10, - destinationTokenAddress: "0x0b2C639c533813f4Aa9D7837CAf62653d097Ff85", // USDC on Optimism - amount: 10_000_000n, // 10 USDC in wei (USDC has 6 decimals) - sender: "0x2a4f24F935Eb178e3e7BA9B53A5Ee6d8407C0709", - receiver: "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045", - client, + +### Generate a payment + +To get started, lets generate a payment for 10 USDC on Optimism, paid with USDT on Arbitrum. + +```typescript +import { Bridge } from "thirdweb"; + +const preparedQuote = await Bridge.Buy.prepare({ +originChainId: 42161, +originTokenAddress: "0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9", // USDT on Arbitrum +destinationChainId: 10, +destinationTokenAddress: "0x0b2C639c533813f4Aa9D7837CAf62653d097Ff85", // USDC on Optimism +amount: 10_000_000n, // 10 USDC in wei (USDC has 6 decimals) +sender: "0x2a4f24F935Eb178e3e7BA9B53A5Ee6d8407C0709", +receiver: "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045", +client, }); - ``` +``` - The prepared quote will contain all kinds of details about the payment, including the transactions to execute it. +The prepared quote will contain all kinds of details about the payment, including the transactions to execute it. - ```typescript +```typescript { - blockNumber: 359092559n, - destinationAmount: 10000000n, - estimatedExecutionTimeMs: 4000, - intent: { - amount: 10000000n, - destinationChainId: 10, - destinationTokenAddress: "0x0b2C639c533813f4Aa9D7837CAf62653d097Ff85", - originChainId: 42161, - originTokenAddress: "0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9", - receiver: "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045", - sender: "0x2a4f24F935Eb178e3e7BA9B53A5Ee6d8407C0709" +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, + GBP: 0.7457410919589597, + JPY: 148.84716380366666, + KRW: 1393.140564565217, + CNY: 7.180734583881414, + INR: 86.20425180362268, + NOK: 10.184560461233335, + SEK: 9.684730839937778, + CHF: 0.8021262834093335, + AUD: 1.5377762699600002, + CAD: 1.3733740236813332, + NZD: 1.6782897168704254, + MXN: 18.73599357293333, + BRL: 5.595589663566668, + CLP: 964.1817295505031, + CZK: 21.2024757516, + DKK: 6.426816835006667, + HKD: 7.851685514536667, + HUF: 343.46386049894534, + IDR: 16316.185254379243, + ILS: 3.3592046583330104, + ISK: 122.60710748362601 + } }, - originAmount: 10090837n, - steps: [ + 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, + GBP: 0.7452886379597042, + JPY: 148.75685565883333, + KRW: 1392.2953221255027, + CNY: 7.176377908199865, + INR: 86.15195019532734, + NOK: 10.178381312516668, + SEK: 9.678854946484284, + CHF: 0.8016396195406668, + AUD: 1.5368432745400002, + CAD: 1.3725407739433366, + NZD: 1.6772714695155524, + MXN: 18.724626122066667, + BRL: 5.592194722683334, + CLP: 963.5967438440051, + CZK: 21.1896118434, + DKK: 6.422917574243334, + HKD: 7.846921761338334, + HUF: 343.25547504324487, + IDR: 16306.285943008934, + ILS: 3.3571665708541674, + ISK: 122.53271963412132 + } + }, + transactions: [ { - 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, - GBP: 0.7457410919589597, - JPY: 148.84716380366666, - KRW: 1393.140564565217, - CNY: 7.180734583881414, - INR: 86.20425180362268, - NOK: 10.184560461233335, - SEK: 9.684730839937778, - CHF: 0.8021262834093335, - AUD: 1.5377762699600002, - CAD: 1.3733740236813332, - NZD: 1.6782897168704254, - MXN: 18.73599357293333, - BRL: 5.595589663566668, - CLP: 964.1817295505031, - CZK: 21.2024757516, - DKK: 6.426816835006667, - HKD: 7.851685514536667, - HUF: 343.46386049894534, - IDR: 16316.185254379243, - ILS: 3.3592046583330104, - ISK: 122.60710748362601 - } + chainId: 42161, + to: "0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9", + data: "0x095ea7b3000000000000000000000000f8ab2dbe6c43bf1a856471182290f91d621ba76d00000000000000000000000000000000000000000000000000000000009d0695", + type: "eip1559", + id: "0x2354360325ff8315dad5673894207d90c28cb898788025202b6a6f8c2bd8220a", + action: "approval", + chain: { + id: 42161, + rpc: "https://42161.rpc.thirdweb.com" }, - 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, - GBP: 0.7452886379597042, - JPY: 148.75685565883333, - KRW: 1392.2953221255027, - CNY: 7.176377908199865, - INR: 86.15195019532734, - NOK: 10.178381312516668, - SEK: 9.678854946484284, - CHF: 0.8016396195406668, - AUD: 1.5368432745400002, - CAD: 1.3725407739433366, - NZD: 1.6772714695155524, - MXN: 18.724626122066667, - BRL: 5.592194722683334, - CLP: 963.5967438440051, - CZK: 21.1896118434, - DKK: 6.422917574243334, - HKD: 7.846921761338334, - HUF: 343.25547504324487, - IDR: 16306.285943008934, - ILS: 3.3571665708541674, - ISK: 122.53271963412132 - } + client: { + clientId: "..." + } + }, + { + type: "eip1559", + to: "0xF8Ab2dBE6c43bf1a856471182290f91D621Ba76d", + from: "0x2a4f24F935Eb178e3e7BA9B53A5Ee6d8407C0709", + value: 0n, + data: "0x...", + chainId: 42161, + action: "buy", + id: "0xc4fd6ecdbbf6fb0780c87779adff09ea7f480fac385b8db4873fc1a0d3309264", + spender: "0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9", + chain: { + id: 42161, + rpc: "https://42161.rpc.thirdweb.com" }, - transactions: [ - { - chainId: 42161, - to: "0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9", - data: "0x095ea7b3000000000000000000000000f8ab2dbe6c43bf1a856471182290f91d621ba76d00000000000000000000000000000000000000000000000000000000009d0695", - type: "eip1559", - id: "0x2354360325ff8315dad5673894207d90c28cb898788025202b6a6f8c2bd8220a", - action: "approval", - chain: { - id: 42161, - rpc: "https://42161.rpc.thirdweb.com" - }, - client: { - clientId: "..." - } - }, - { - type: "eip1559", - to: "0xF8Ab2dBE6c43bf1a856471182290f91D621Ba76d", - from: "0x2a4f24F935Eb178e3e7BA9B53A5Ee6d8407C0709", - value: 0n, - data: "0x...", - chainId: 42161, - action: "buy", - id: "0xc4fd6ecdbbf6fb0780c87779adff09ea7f480fac385b8db4873fc1a0d3309264", - spender: "0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9", - chain: { - id: 42161, - rpc: "https://42161.rpc.thirdweb.com" - }, - client: { - clientId: "...", - } - } - ], - originAmount: 10090837n, - destinationAmount: 10000000n, - estimatedExecutionTimeMs: 4000 + client: { + clientId: "...", + } } ], - timestamp: 1752866509083 + originAmount: 10090837n, + destinationAmount: 10000000n, + estimatedExecutionTimeMs: 4000 } - ``` +], +timestamp: 1752866509083 +} +``` + +You can execute the included transactions using the wallet of your choice. In the next section, we'll execute this prepared quote using thirdweb Wallets. - You can execute the included transactions using the wallet of your choice. In the next section, we'll execute this prepared quote using thirdweb Wallets. +### Execute the payment with thirdweb Wallets - ### Execute the payment with thirdweb Wallets +This step assumes you already have a thirdweb wallet logged in. To learn how to setup wallets, see the Wallets [getting started guide](/wallets). - This step assumes you already have a thirdweb wallet logged in. To learn how to setup wallets, see the Wallets [getting started guide](/wallets). +To execute a single transaction, all we need to do is call `sendAndConfirmTransaction` with the transaction and user's wallet. - To execute a single transaction, all we need to do is call `sendAndConfirmTransaction` with the transaction and user's wallet. +```typescript +import { sendAndConfirmTransaction } from "thirdweb"; - ```typescript - import { sendAndConfirmTransaction } from "thirdweb"; +const transaction = preparedQuote.steps[0].transactions[0]; - const transaction = preparedQuote.steps[0].transactions[0]; +const result = await sendAndConfirmTransaction({ + transaction, + account: wallet.getAccount(), + }); +``` +However, prepared payments might contain multiple transactions. Approvals, swaps, and any other pre-execution steps are computed for you and included in the returned transactions. Lets wrap our transaction execution in a loop so we account for all steps. + +```typescript +import { sendAndConfirmTransaction } from "thirdweb"; + +for (const step of preparedQuote.steps) { + for (const transaction of step.transactions) { const result = await sendAndConfirmTransaction({ - transaction, - account: wallet.getAccount(), - }); - ``` - - However, prepared payments might contain multiple transactions. Approvals, swaps, and any other pre-execution steps are computed for you and included in the returned transactions. Lets wrap our transaction execution in a loop so we account for all steps. - - ```typescript - import { sendAndConfirmTransaction } from "thirdweb"; - - for (const step of preparedQuote.steps) { - for (const transaction of step.transactions) { - const result = await sendAndConfirmTransaction({ - transaction, - account: wallet.getAccount(), - }); - console.log("Transaction sent:", result.transactionHash); - } - } - ``` - - This will execute the transactions in order, but it might not work yet. Payment transactions that are cross-chain require both an origin **and a destination transaction**. To account for this, thirdweb Payments have a special status function allowing you to get the end to end status of a buy, sell, or transfer. Lets wait for the cross-chain transactions to be fully completed in our loop. - - You can determine the type of a transaction by checking the `action` field. - - ```typescript - import { sendAndConfirmTransaction, Bridge } from "thirdweb"; - - for (const step of preparedQuote.steps) { - for (const transaction of step.transactions) { - const result = await sendAndConfirmTransaction({ - transaction, - account: wallet.getAccount(), - }); - console.log("Transaction sent:", result.transactionHash); - - if (["buy", "sell", "transfer"].includes(transaction.action)) { - // Wait for destination completion before continuing - let swapStatus; - do { - swapStatus = await Bridge.status({ - transactionHash: result.transactionHash, - chainId: transaction.chainId, - client: thirdwebClient, - }); - if (swapStatus.status === "PENDING") { - await new Promise((resolve) => setTimeout(resolve, 3000)); // Wait 3 seconds - } - } while (swapStatus.status === "PENDING"); - - if (swapStatus.status === "FAILED") { - throw new Error("Swap transaction failed"); - } - } - } + transaction, + account: wallet.getAccount(), + }); + console.log("Transaction sent:", result.transactionHash); + } +} +``` + +This will execute the transactions in order, but it might not work yet. Payment transactions that are cross-chain require both an origin **and a destination transaction**. To account for this, thirdweb Payments have a special status function allowing you to get the end to end status of a buy, sell, or transfer. Lets wait for the cross-chain transactions to be fully completed in our loop. + +You can determine the type of a transaction by checking the `action` field. + +```typescript +import { sendAndConfirmTransaction, Bridge } from "thirdweb"; + +for (const step of preparedQuote.steps) { + for (const transaction of step.transactions) { + const result = await sendAndConfirmTransaction({ + transaction, + account: wallet.getAccount(), + }); + console.log("Transaction sent:", result.transactionHash); + +if (["buy", "sell", "transfer"].includes(transaction.action)) { +// Wait for destination completion before continuing + let swapStatus; + do { + swapStatus = await Bridge.status({ + transactionHash: result.transactionHash, + chainId: transaction.chainId, + client: thirdwebClient, + }); + if (swapStatus.status === "PENDING") { + await new Promise((resolve) => setTimeout(resolve, 3000)); // Wait 3 seconds } - ``` + } while (swapStatus.status === "PENDING"); + + if (swapStatus.status === "FAILED") { + throw new Error("Swap transaction failed"); + } + } +} +} +``` - Once this code completes, your payment has been fully executed. Payments normally take just a few seconds to complete, but can take as long as 10 minutes for less common chains. +Once this code completes, your payment has been fully executed. Payments normally take just a few seconds to complete, but can take as long as 10 minutes for less common chains. - - ## Going further diff --git a/apps/portal/src/app/payments/swap/page.mdx b/apps/portal/src/app/payments/swap/page.mdx index 8995aaed9ee..42c65173ec5 100644 --- a/apps/portal/src/app/payments/swap/page.mdx +++ b/apps/portal/src/app/payments/swap/page.mdx @@ -28,11 +28,11 @@ Build a custom token swap interface that allows users to exchange tokens across - + React - + TypeScript @@ -101,7 +101,7 @@ function SwapInterface() { transaction, account, }); - + // Wait for cross-chain completion if needed if (["buy", "sell", "transfer"].includes(transaction.action)) { let swapStatus; @@ -118,7 +118,7 @@ function SwapInterface() { } } } - + alert("Swap completed successfully!"); setQuote(null); setAmount(""); @@ -131,7 +131,7 @@ function SwapInterface() { return (

Token Swap

- + {/* From Token */}
@@ -143,7 +143,7 @@ function SwapInterface() { onChange={(e) => setAmount(e.target.value)} className="flex-1 p-3 border rounded-lg focus:ring-2 focus:ring-blue-500" /> - setToToken(e.target.value)} className="p-3 border rounded-lg focus:ring-2 focus:ring-blue-500" @@ -283,7 +283,7 @@ function AdvancedSwapInterface() { return (

Advanced Token Swap

- + {/* Amount Input */}
+ return comparisons.sort((a, b) => Number(b.quote.destinationAmount) - Number(a.quote.destinationAmount) ); } @@ -610,7 +610,7 @@ export class PriceComparator { -## View it in action: +## View it in action: - - - - React - - - - ### Pay for a transaction with the `TransactionWidget` @@ -83,10 +74,8 @@ function ProductPage() { The TransactionWidget handles the complete payment flow, supporting both crypto and fiat payments across 50+ chains. - - -## View it in action: +## View it in action: - + HTTP @@ -44,7 +44,7 @@ Monitor and get notified about transactions in your application, both on your pr Get the information about a transaction by its id. - + ### List transactions List all transactions for your project with filtering and pagination. @@ -59,7 +59,7 @@ Monitor and get notified about transactions in your application, both on your pr ```typescript import { Engine } from "thirdweb"; - + const executionResult = await Engine.getTransactionStatus({ client, transactionId, // the transaction id returned from enqueueTransaction @@ -70,11 +70,11 @@ Monitor and get notified about transactions in your application, both on your pr ```typescript import { Engine } from "thirdweb"; - + const { transactionHash } = await Engine.waitForTransactionHash({ client, transactionId, // the transaction id returned from enqueueTransaction - }); + }); ``` diff --git a/apps/portal/src/app/transactions/page.mdx b/apps/portal/src/app/transactions/page.mdx index 7d90f6135ee..af589237c39 100644 --- a/apps/portal/src/app/transactions/page.mdx +++ b/apps/portal/src/app/transactions/page.mdx @@ -38,31 +38,24 @@ Send, monitor, and manage transactions. Send transactions from user or server wa - HTTP - TypeScript - React - React Native - Unity - .NET - Unreal Engine diff --git a/apps/portal/src/app/wallets/link-profiles/page.mdx b/apps/portal/src/app/wallets/link-profiles/page.mdx index 0599c9eccb0..688f6973300 100644 --- a/apps/portal/src/app/wallets/link-profiles/page.mdx +++ b/apps/portal/src/app/wallets/link-profiles/page.mdx @@ -25,23 +25,23 @@ thirdweb Wallets allow users to tie the same wallet address to multiple social i - + TypeScript - + React - + React Native - + .NET - + Unity @@ -51,7 +51,7 @@ thirdweb Wallets allow users to tie the same wallet address to multiple social i ```typescript import { linkProfile } from "thirdweb/wallets"; - + // optionally specify the ecosystem if you're linking an ecosystem wallet await linkProfile({ client, strategy: "discord" }); ``` @@ -85,7 +85,7 @@ await linkProfile({ ```tsx import { useLinkProfile } from "thirdweb/react"; - + const { mutate: linkProfile } = useLinkProfile(); const handleOAuthLink = () => { @@ -101,9 +101,9 @@ const handleOAuthLink = () => { ```tsx import { useLinkProfile } from "thirdweb/react"; import { preAuthenticate } from "thirdweb/wallets"; - + const { mutate: linkProfile } = useLinkProfile(); - + // send a verification email first const sendEmail = async () => { const email = await preAuthenticate({ @@ -112,7 +112,7 @@ const sendEmail = async () => { email: "john.doe@example.com", }); }; - + // then link the profile with the verification code const onClick = (code: string) => { linkProfile({ @@ -130,7 +130,7 @@ const onClick = (code: string) => { ```tsx import { useLinkProfile } from "thirdweb/react"; - + const { mutate: linkProfile } = useLinkProfile(); const handleOAuthLink = () => { @@ -146,9 +146,9 @@ const handleOAuthLink = () => { ```tsx import { useLinkProfile } from "thirdweb/react"; import { preAuthenticate } from "thirdweb/wallets"; - + const { mutate: linkProfile } = useLinkProfile(); - + // send a verification email first const sendEmail = async () => { await preAuthenticate({ @@ -157,7 +157,7 @@ const sendEmail = async () => { email: "john.doe@example.com", }); }; - + // then link the profile with the verification code const linkWithCode = (code: string) => { linkProfile({ @@ -174,12 +174,12 @@ const linkWithCode = (code: string) => { ```csharp // Your main InAppWallet account, already authenticated and connected InAppWallet mainInAppWallet = ... - + // Prepare Telegram var socialWallet = await InAppWallet.Create(client: client, authProvider: AuthProvider.Telegram); // Link Telegram _ = await mainWallet.LinkAccount(walletToLink: socialWallet,); - + // Prepare Phone var phoneWallet = await InAppWallet.Create(client: client, phoneNumber: "+1234567890"); _ = await phoneWallet.SendOTP(); @@ -193,13 +193,13 @@ _ = await mainWallet.LinkAccount(walletToLink: phoneWallet, otp: otp); ```csharp // Your main InAppWallet account, already authenticated and connected InAppWallet mainInAppWallet = ... - + // An InAppWallet with a new auth provider to be linked to the main account, not connected InAppWallet walletToLink = await InAppWallet.Create(client: Client, authProvider: AuthProvider.Telegram); - + // Link Account - Headless version var linkedAccounts = await mainInAppWallet.LinkAccount(walletToLink: walletToLink); - + // Link Account - Unity wrapper version var linkedAccounts = await ThirdwebManager.Instance.LinkAccount(mainInAppWallet, walletToLink); ``` @@ -229,12 +229,12 @@ Once linked, you can retrieve the user profiles via either identity. ```typescript import { getProfiles } from "thirdweb/wallets"; - + const profiles = await getProfiles({ client, // optionally sepcify the ecosystem for ecosystem wallets }); - + console.log(profiles[0].type); // will be "email", "phone", "google", "discord", etc console.log(profiles[0].details.email); console.log(profiles[0].details.phone); @@ -244,11 +244,11 @@ console.log(profiles[0].details.phone); ```tsx import { useProfiles } from "thirdweb/react"; - + const { data: profiles } = useProfiles({ client, }); - + console.log("Type:", profiles[0].type); // "discord" console.log("Email:", profiles[0].details.email); // "john.doe@example.com" ``` diff --git a/apps/portal/src/app/wallets/page.mdx b/apps/portal/src/app/wallets/page.mdx index b9fc983c05a..e2de2a49d17 100644 --- a/apps/portal/src/app/wallets/page.mdx +++ b/apps/portal/src/app/wallets/page.mdx @@ -39,31 +39,24 @@ Create wallets for your users with flexible authentication options. Choose from - HTTP - TypeScript - React - React Native - Unity - .NET - Unreal Engine @@ -83,7 +76,7 @@ Start authentication with email, phone, passkey, or SIWE -### Complete Authentication +### Complete Authentication Verify and complete the authentication process: @@ -390,8 +383,8 @@ Retrieve authenticated user's wallet details: try { var inAppWalletOptions = new InAppWalletOptions(email: "myepicemail@domain.id"); var options = new WalletOptions( - provider: WalletProvider.InAppWallet, - chainId: 1, + provider: WalletProvider.InAppWallet, + chainId: 1, inAppWalletOptions: inAppWalletOptions ); var wallet = await ThirdwebManager.Instance.ConnectWallet(options); @@ -419,13 +412,13 @@ Retrieve authenticated user's wallet details: ```csharp using Thirdweb; - + // For native applications var client = ThirdwebClient.Create(clientId: "yourClientId", bundleId: "yourBundleId"); - + // For frontend applications var client = ThirdwebClient.Create(clientId: "yourClientId"); - + // For backend applications var client = ThirdwebClient.Create(secretKey: "yourSecretKey"); ``` @@ -463,9 +456,9 @@ Retrieve authenticated user's wallet details: ```csharp // Get a contract instance var contract = await ThirdwebContract.Create( - client, - "contractAddress", - chainId, + client, + "contractAddress", + chainId, ); // Read a value from the contract diff --git a/apps/portal/src/app/wallets/server/page.mdx b/apps/portal/src/app/wallets/server/page.mdx index a7631add06c..c9b2438bf69 100644 --- a/apps/portal/src/app/wallets/server/page.mdx +++ b/apps/portal/src/app/wallets/server/page.mdx @@ -18,11 +18,11 @@ Server wallets are wallets that are managed by your own application, like a trea - + HTTP - + TypeScript diff --git a/apps/portal/src/components/Document/APIEndpointMeta/ApiEndpoint.tsx b/apps/portal/src/components/Document/APIEndpointMeta/ApiEndpoint.tsx index 6c1f295e0b7..9434ee1f66b 100644 --- a/apps/portal/src/components/Document/APIEndpointMeta/ApiEndpoint.tsx +++ b/apps/portal/src/components/Document/APIEndpointMeta/ApiEndpoint.tsx @@ -265,7 +265,7 @@ function ParameterSection(props: { function InlineParameterItem({ param }: { param: APIParameter }) { return ( -
+
{param.name} diff --git a/apps/portal/src/components/Document/APIEndpointMeta/DynamicRequestExample.tsx b/apps/portal/src/components/Document/APIEndpointMeta/DynamicRequestExample.tsx index b3f10319bd9..eb8545e9015 100644 --- a/apps/portal/src/components/Document/APIEndpointMeta/DynamicRequestExample.tsx +++ b/apps/portal/src/components/Document/APIEndpointMeta/DynamicRequestExample.tsx @@ -27,7 +27,7 @@ interface DynamicRequestExampleProps { function InlineParameterItem({ param }: { param: APIParameter }) { return ( -
+
{param.name} diff --git a/apps/portal/src/components/Document/AuthMethodsTabs.tsx b/apps/portal/src/components/Document/AuthMethodsTabs.tsx index 1aa37d7032e..b4062389ac8 100644 --- a/apps/portal/src/components/Document/AuthMethodsTabs.tsx +++ b/apps/portal/src/components/Document/AuthMethodsTabs.tsx @@ -883,12 +883,8 @@ function AuthMethodsTabsContent() { > {platforms.map((platform) => { - const IconComponent = platform.icon; return ( - - - {platform.label} ); diff --git a/apps/portal/src/components/Document/FeatureCard.tsx b/apps/portal/src/components/Document/FeatureCard.tsx index 93810d0a28a..292371565e6 100644 --- a/apps/portal/src/components/Document/FeatureCard.tsx +++ b/apps/portal/src/components/Document/FeatureCard.tsx @@ -9,26 +9,24 @@ type FeatureCardItem = { export function FeatureCard(props: FeatureCardItem) { const { title, description, iconUrl } = props; return ( -
-
- {typeof iconUrl === "string" ? ( - - ) : ( - iconUrl - )} -
-
-

{title}

-

- {description} -

+
+
+
+ {typeof iconUrl === "string" ? ( + + ) : ( + iconUrl + )} +
+

{title}

+

{description}

); } diff --git a/apps/portal/src/components/Document/List.tsx b/apps/portal/src/components/Document/List.tsx index a70e2b56528..a093d3378e1 100644 --- a/apps/portal/src/components/Document/List.tsx +++ b/apps/portal/src/components/Document/List.tsx @@ -2,17 +2,9 @@ import { cn } from "@/lib/utils"; import styles from "./List.module.css"; export function UnorderedList(props: { children?: React.ReactNode }) { - return ( -
    - {props.children} -
- ); + return
    {props.children}
; } export function OrderedList(props: { children?: React.ReactNode }) { - return ( -
    - {props.children} -
- ); + return
    {props.children}
; } diff --git a/apps/portal/src/components/Layouts/DocLayout.tsx b/apps/portal/src/components/Layouts/DocLayout.tsx index 80174dae014..3f96d3318c3 100644 --- a/apps/portal/src/components/Layouts/DocLayout.tsx +++ b/apps/portal/src/components/Layouts/DocLayout.tsx @@ -26,7 +26,7 @@ export function DocLayout(props: DocLayoutProps) { return (
0 ? props.showTableOfContents !== false ? "xl:grid-cols-[220px_720px_1fr]" diff --git a/apps/portal/src/components/others/TableOfContents.tsx b/apps/portal/src/components/others/TableOfContents.tsx index 739155de69d..9c8c8c029c3 100644 --- a/apps/portal/src/components/others/TableOfContents.tsx +++ b/apps/portal/src/components/others/TableOfContents.tsx @@ -1,6 +1,5 @@ "use client"; -import { BookOpenTextIcon } from "lucide-react"; import Link from "next/link"; import { usePathname } from "next/navigation"; import { useEffect, useRef, useState } from "react"; @@ -124,12 +123,10 @@ export function TableOfContentsSideBar(props: { visibility: hideNav ? "hidden" : "visible", }} > -
-
- +
+
On this page
-