@@ -30,128 +30,39 @@ The Swap widget makes it easy to add cross-chain token swaps to your app using t
## Features
-- Cross-chain token swaps across 50+ blockchains
-- Real-time quotes with up-to-date pricing
+- Cross-chain token swaps across 90+ blockchains
- Route optimization to find the best path for any token pair
-- Customizable UI - use prebuilt themes or override with your brand colors
+- Customizable UI with dark and light mode support
- Prefill token selections for a smoother user experience
-- Event callbacks to track user actions (success, error, cancel)
+- Display fiat values in multiple currencies
-## Example
+## Get Started
-You will need a thirdweb project client id to use the `SwapWidget` component. You can get your clientId by creating a project in the [thirdweb dashboard](https://thirdweb.com/team).
+You can integrate the swap widget into your website using an iframe or a React component.
-```tsx
-import { SwapWidget } from "thirdweb/react";
-import { createThirdwebClient } from "thirdweb";
+
-const client = createThirdwebClient({
- clientId: "YOUR_THIRDWEB_CLIENT_ID",
-});
-
-function Example() {
- return
;
-}
-```
-
-Make sure to wrap the component containing `SwapWidget` with the `ThirdwebProvider` component.
-
-```tsx
-import { ThirdwebProvider } from "thirdweb/react";
-
-function App() {
- return (
-
-
-
- );
-}
-```
-
-## Configuring Default Token Selection
-
-By default, no tokens are selected in the widget UI. You can configure the default token selection by passing in the `prefill` prop. It only sets the default token selection - users can change these selections in the widget UI.
-
-### Set an ERC20 token to Buy by default
-
-```tsx
-
-```
-
-### Set a native token to Sell by default
-
-To configure a native token to sell by default, you can omit the `tokenAddress` property.
-
-```tsx
-
-```
-
-### Set amount and token to Buy by default
-
-```tsx
-
-```
-
-### Set both buy and sell tokens by default
-
-```tsx
-
-```
-
-## API Reference
+
+
## Try it out
-
diff --git a/apps/portal/src/app/bridge/swap-widget/react/page.mdx b/apps/portal/src/app/bridge/swap-widget/react/page.mdx
new file mode 100644
index 00000000000..c40681f6bc8
--- /dev/null
+++ b/apps/portal/src/app/bridge/swap-widget/react/page.mdx
@@ -0,0 +1,155 @@
+import {
+ ArticleIconCard,
+ createMetadata,
+ DocImage,
+} from "@doc";
+import { PlayIcon } from "lucide-react";
+import { ReactIcon } from "@/icons";
+import SwapWidgetDark from "../../swap/swap-dark.jpg";
+import SwapWidgetLight from "../../swap/swap-light.jpg";
+
+export const metadata = createMetadata({
+ image: {
+ title: "Swap widget component",
+ icon: "payments",
+ },
+ title: "Swap widget component",
+ description: "Add a widget to swap tokens across chains using a React component",
+});
+
+# Swap widget component
+
+The Swap widget component makes it easy to add cross-chain token swaps to your app
+
+
+
+
+
+
+
+
+## Features
+
+- Cross-chain token swaps across 90+ blockchains
+- Route optimization to find the best path for any token pair
+- Customizable UI - use prebuilt themes or override with your brand colors
+- Display fiat values in multiple currencies
+
+## Example
+
+You will need a thirdweb project client id to use the `SwapWidget` component. You can get your clientId by creating a project in the [thirdweb dashboard](https://thirdweb.com/team).
+
+```tsx
+import { SwapWidget } from "thirdweb/react";
+import { createThirdwebClient } from "thirdweb";
+
+const client = createThirdwebClient({
+ clientId: "YOUR_THIRDWEB_CLIENT_ID",
+});
+
+function Example() {
+ return
;
+}
+```
+
+Make sure to wrap the component containing `SwapWidget` with the `ThirdwebProvider` component.
+
+```tsx
+import { ThirdwebProvider } from "thirdweb/react";
+
+function App() {
+ return (
+
+
+
+ );
+}
+```
+
+## Configuring default Token Selection
+
+By default, no tokens are selected in the widget UI. You can configure the default token selection by passing in the `prefill` prop. It only sets the default token selection - users can change these selections in the widget UI.
+
+### Set an ERC20 token to Buy by default
+
+```tsx
+
+```
+
+### Set a native token to Sell by default
+
+To configure a native token to sell by default, you can omit the `tokenAddress` property.
+
+```tsx
+
+```
+
+### Set amount and token to Buy by default
+
+```tsx
+
+```
+
+### Set both buy and sell tokens by default
+
+```tsx
+
+```
+
+## API Reference
+
+
+
+## Try it out
+
+
+