diff --git a/apps/portal/src/app/Header.tsx b/apps/portal/src/app/Header.tsx index a12cc79b3bc..9b22db400b7 100644 --- a/apps/portal/src/app/Header.tsx +++ b/apps/portal/src/app/Header.tsx @@ -35,6 +35,10 @@ const links = [ href: "/payments", name: "Payments", }, + { + href: "/bridge", + name: "Bridge", + }, { href: "/transactions", name: "Transactions", @@ -124,7 +128,7 @@ export const connectLinks: Array<{ const apisLinks = [ { - href: "/reference", + href: "https://api.thirdweb.com/reference", name: "HTTP API", }, { diff --git a/apps/portal/src/app/bridge/faq/page.mdx b/apps/portal/src/app/bridge/faq/page.mdx new file mode 100644 index 00000000000..920202dd4e8 --- /dev/null +++ b/apps/portal/src/app/bridge/faq/page.mdx @@ -0,0 +1,135 @@ +import { createMetadata, Details } from "@doc"; + +export const metadata = createMetadata({ + image: { + title: "Bridge FAQs", + icon: "payments", + }, + title: "Bridge FAQs | thirdweb documentation", + description: "Explore FAQs around bridging and swapping assets with thirdweb.", +}); + +# Bridge FAQs + +### General + +
+Bridge is an asset router that combines thirdweb's own onchain infrastructure with existing bridging and swapping protocols to find the optimal route for any given transaction. +This can include intents, native bridges, third party bridges, cross-chain messaging protocols, thirdweb's custom bridges, and more. All routes are monitored and planned continuously for +health, price, and speed to guarantee the best path every time. +
+ +
+Yes, Bridge is designed to be agnostic to wallet infrastructure. You can use it with any wallet service. +
+ +### Fees + +
+thirdweb does not charge any fees for buy with fiat. Any fees on onramping are based on the onramp provider. +
+ +
+For buying with crypto or swap fees, thirdweb charges a 0.3% protocol fee. Developers may monetize their application by charging additional fees on swap transactions. To set a fee in your project page, navigate to Payments > Settings to set this fee. +
+ +
+Network fees, also referred to as miner fees, are paid to the miner for processing crypto transactions and securing the respective network. These fees do not go to thirdweb. +
+ +
+Fiat payouts are not currently available. +
+ +### Token & Region Support + +
+We're able to support most tokens that meet the following criteria: + +- The token must have sufficient liquidity +- The token must be on a [supported Payments Chain](https://thirdweb.com/chainlist?service=pay). + +To request support for a token, please visit the Payments tab in your project dashboard > Settings > "Don't see your token listed?" component and fill out the chain and token address information. + +The service will automatically kick off the token route discovery process. Please check back the Payments modal after 20-40 minutes for the requested token. +
+ +
+**Buy With Fiat** is available 160+ countries. The following countries are _UNSUPPORTED_: + +- Afghanistan +- Africa (All Countries) +- Belarus +- Bolivia +- China +- Cuba +- Colombia +- Haiti +- Honduras +- Iran +- Iraq +- Latvia +- Lebanon +- Myanmar +- Pakistan +- Qatar +- Russia +- Ukraine +- United Arab Emirates +- Venezuela +- Yemen + +All United States are supported, excluding Hawaii. +
+ +
+Bridge can support any currency on our [supported chains](https://thirdweb.com/chainlist?service=pay). +
+ +
+Apple Pay and Google Pay are supported through the onramp providers depending on region. Coinbase, Stripe, and Transak currently support Apple Pay. Transak supports Google Pay. +
+ +
+We currently require a $1 minimum purchase for both stablecoin and non-stablecoin purchases through Buy With Fiat. + +Our transaction maximum starts from $1500 per week for new users and can increase over time to $10,000 per week. +
+ +
+We offer direct onramping **internationally** to the following tokens: + +- Mainnet (Ethereum) +- Avalanche +- Polygon + +We offer direct onramping to the following tokens in the **US only**: + +- ETH (Base)\* +- USDC (Ethereum) +- USDC (Polygon)\* +- USDC (Avalanche)\* +- USDC (Base)\* + +All other tokens will require an additional Buy With Crypto step. + +\* Not available in New York or the EU. +
+ +
+Prices are set depending on the liquidity provider used to route your transaction. +
+ +### KYC & Compliance + +
+Onramp options all require minimal KYC. This is done to comply with local regulations and to ensure the safety of our users. +Please note: onramping with Coinbase does not require KYC for a purchase below $500 with debit card. +
+ +
+Users will be required to complete KYC verification for their first purchase using 'Buy with Fiat.' After that, no further KYC will be needed for future purchases on the same platform. +
+ + + diff --git a/apps/portal/src/app/bridge/fees/assets/fee-dash.png b/apps/portal/src/app/bridge/fees/assets/fee-dash.png new file mode 100644 index 00000000000..0c3e1304a42 Binary files /dev/null and b/apps/portal/src/app/bridge/fees/assets/fee-dash.png differ diff --git a/apps/portal/src/app/bridge/fees/page.mdx b/apps/portal/src/app/bridge/fees/page.mdx new file mode 100644 index 00000000000..f0f4b37d1cf --- /dev/null +++ b/apps/portal/src/app/bridge/fees/page.mdx @@ -0,0 +1,55 @@ +import { DocImage } from "@doc"; +import FeeShare from './assets/fee-dash.png'; + + +# Understanding fees + +Understand how protocol, developer, and onramp fees work with Bridge. + +### Developer Fee + +To monetize applications or games, you are able to set a developer fee on each crypto-to-crypto or swap transaction. You may set this percentage +through Project > Project Settings > Payments > Configure > 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 + +A fee is charged by the third-party provider when onramping. 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. diff --git a/apps/portal/src/app/bridge/layout.tsx b/apps/portal/src/app/bridge/layout.tsx new file mode 100644 index 00000000000..8f93287e052 --- /dev/null +++ b/apps/portal/src/app/bridge/layout.tsx @@ -0,0 +1,20 @@ +import { createMetadata } from "@doc"; +import { DocLayout } from "@/components/Layouts/DocLayout"; +import { sidebar } from "./sidebar"; + +export default async function Layout(props: { children: React.ReactNode }) { + return ( + + {props.children} + + ); +} + +export const metadata = createMetadata({ + description: "Bridge and swap tokens across chains with thirdweb Bridge.", + image: { + icon: "payments", + title: "thirdweb Bridge Docs", + }, + title: "thirdweb Bridge Documentation", +}); diff --git a/apps/portal/src/app/bridge/onramp-providers/page.mdx b/apps/portal/src/app/bridge/onramp-providers/page.mdx new file mode 100644 index 00000000000..113f49d4c57 --- /dev/null +++ b/apps/portal/src/app/bridge/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/bridge/page.mdx b/apps/portal/src/app/bridge/page.mdx new file mode 100644 index 00000000000..f1381c3b2a6 --- /dev/null +++ b/apps/portal/src/app/bridge/page.mdx @@ -0,0 +1,204 @@ +import { + Callout, + OpenSourceCard, + createMetadata, + InstallTabs, + SDKCard, + Grid, + ArticleIconCard, + Tabs, + TabsList, + TabsTrigger, + TabsContent, + Badge, + OpenApiEndpoint, +} from "@doc"; +import { + ReactIcon, + TypeScriptIcon, + UnityIcon, + DotNetIcon, + UnrealEngineIcon, + EngineIcon +} from "@/icons"; + +export const metadata = createMetadata({ + image: { + title: "Get started with Bridge", + icon: "payments" + }, + title: "Get started with Bridge", + description: "Bridge and swap tokens across chains with thirdweb Bridge.", +}); + +# Get Started + +thirdweb Bridge allows developers to easily bridge and swap tokens between chains and wallets. + + + + + + React + + + + TypeScript + + + + + Get started bridging tokens in your apps with the thirdweb TypeScript SDK. + + ### Installation + + Install the thirdweb SDK in your TypeScript project: + + + + ### Set up the Client + + First, create a client instance to connect with thirdweb services: + + ```typescript + import { createThirdwebClient } from "thirdweb"; + + // - clientId for client-side applications + // - secretKey for server-side applications + const client = createThirdwebClient({ + clientId: "YOUR_CLIENT_ID", // Get from your thirdweb dashboard + }); + ``` + + ### Generate a bridge quote + + To get started, lets generate a quote for 10 USDC on Optimism, paid with USDT on Arbitrum. + + ```typescript + import { Bridge, NATIVE_TOKEN_ADDRESS, toWei } from "thirdweb"; + +// 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, + destinationTokenAddress: "0x0b2C639c533813f4Aa9D7837CAf62653d097Ff85", // USDC on Optimism + amount: 10_000_000n, // 10 USDC in wei (USDC has 6 decimals) + sender: "0x2a4f24F935Eb178e3e7BA9B53A5Ee6d8407C0709", + receiver: "0x2a4f24F935Eb178e3e7BA9B53A5Ee6d8407C0709", + client, +}); + ``` + + The prepared quote will contain details about the payment, including the transactions needed to execute it. + + 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 Bridge in your React app is with the [`BuyWidget`](/references/typescript/v5/widgets/BuyWidget) component. + + ### Live Playground + + + + ### Installation + + Install the thirdweb SDK in your React project: + + + + + ### Create a Client + + First, create a client file (e.g., `thirdwebClient.ts`) for reuse throughout your app: + + ```typescript + // thirdwebClient.ts + import { createThirdwebClient } from "thirdweb"; + + export const client = createThirdwebClient({ + clientId: "YOUR_CLIENT_ID", // Get from your thirdweb dashboard + }); + ``` + + ### Setup the Provider + + Wrap your application with the ThirdwebProvider: + + ```tsx + // app.tsx / _app.tsx + import { ThirdwebProvider } from "thirdweb/react"; + + function App() { + return ( + + + + ); + } + ``` + + ### Buy Widget + + Use the BuyWidget to let users purchase tokens: + + ```tsx + import { BuyWidget } from "thirdweb/react"; + import { base } from "thirdweb/chains"; + + function PaymentComponent() { + return ( + + ); + } + ``` + + + + +## Explore Full API References + +For comprehensive guides on implementing the full thirdweb SDK, explore our language-specific documentation: + + + + + + + + + diff --git a/apps/portal/src/app/payments/routes/page.mdx b/apps/portal/src/app/bridge/routes/page.mdx similarity index 100% rename from apps/portal/src/app/payments/routes/page.mdx rename to apps/portal/src/app/bridge/routes/page.mdx diff --git a/apps/portal/src/app/payments/sell/page.mdx b/apps/portal/src/app/bridge/sell/page.mdx similarity index 100% rename from apps/portal/src/app/payments/sell/page.mdx rename to apps/portal/src/app/bridge/sell/page.mdx diff --git a/apps/portal/src/app/bridge/sidebar.tsx b/apps/portal/src/app/bridge/sidebar.tsx new file mode 100644 index 00000000000..14b7a413089 --- /dev/null +++ b/apps/portal/src/app/bridge/sidebar.tsx @@ -0,0 +1,96 @@ +import { ExternalLinkIcon, ZapIcon } from "lucide-react"; +import type { SideBar } from "@/components/Layouts/DocLayout"; +import { EngineIcon, ReactIcon, TypeScriptIcon, UnityIcon } from "@/icons"; +import { UnrealEngineIcon } from "../../icons/sdks/UnrealEngineIcon"; + +const bridgeSlug = "/bridge"; + +export const sidebar: SideBar = { + links: [ + { + href: bridgeSlug, + name: "Get Started", + icon: , + }, + { + href: "https://playground.thirdweb.com/", + icon: , + name: "Playground", + }, + { separator: true }, + { + isCollapsible: false, + links: [ + { + href: `${bridgeSlug}/sell`, + name: "Sell Tokens", + }, + { + href: `${bridgeSlug}/swap`, + name: "Swap Tokens", + }, + { + href: `${bridgeSlug}/tokens`, + name: "Get Token Prices", + }, + { + href: `${bridgeSlug}/routes`, + name: "Get Routes", + }, + ], + name: "Guides", + }, + { separator: true }, + { + isCollapsible: false, + links: [ + { + href: `https://payments.thirdweb.com/reference`, + icon: , + name: "REST API", + }, + { + href: "/references/typescript/v5", + icon: , + name: "TypeScript", + }, + { + href: "/references/typescript/v5", + icon: , + name: "React", + }, + { + href: "/unity", + icon: , + name: "Unity", + }, + { + href: "/unreal-engine", + icon: , + name: "Unreal Engine", + }, + ], + name: "API References", + }, + { separator: true }, + { + isCollapsible: false, + name: "Resources", + links: [ + { + href: `${bridgeSlug}/fees`, + name: "Understanding Fees", + }, + { + href: `${bridgeSlug}/onramp-providers`, + name: "Onramp Providers", + }, + { + href: `${bridgeSlug}/faq`, + name: "FAQ", + }, + ], + }, + ], + name: "Bridge", +}; diff --git a/apps/portal/src/app/payments/swap/page.mdx b/apps/portal/src/app/bridge/swap/page.mdx similarity index 100% rename from apps/portal/src/app/payments/swap/page.mdx rename to apps/portal/src/app/bridge/swap/page.mdx diff --git a/apps/portal/src/app/payments/tokens/page.mdx b/apps/portal/src/app/bridge/tokens/page.mdx similarity index 100% rename from apps/portal/src/app/payments/tokens/page.mdx rename to apps/portal/src/app/bridge/tokens/page.mdx diff --git a/apps/portal/src/app/page.tsx b/apps/portal/src/app/page.tsx index b0ef1999ae8..4ceec0d0369 100644 --- a/apps/portal/src/app/page.tsx +++ b/apps/portal/src/app/page.tsx @@ -1,6 +1,7 @@ import { ArrowUpRightIcon, BotIcon, + CoinsIcon, MessageCircleIcon, WebhookIcon, ZapIcon, @@ -8,6 +9,7 @@ import { import Image from "next/image"; import Link from "next/link"; import { Heading } from "@/components/Document"; +import { PaymentsIcon } from "@/icons/products/PaymentsIcon"; import { ChatButton } from "../components/AI/chat-button"; import { Button } from "../components/ui/button"; import { @@ -18,7 +20,6 @@ import { UnityIcon, UnrealEngineIcon, } from "../icons"; -import { BridgeIcon } from "../icons/products/BridgeIcon"; import { ConnectIcon } from "../icons/products/ConnectIcon"; import { EngineIcon } from "../icons/products/EngineIcon"; import { InsightIcon } from "../icons/products/InsightIcon"; @@ -150,8 +151,8 @@ function ReferenceSection() { /> + + + + + ); +}