+ Sets the default token and amount to{" "}
+ {props.type === "buyToken" ? "buy" : "sell"} in the widget,
+ User can change this default selection in the widget
+
+ );
+}
+
+function useUnderline() {
+ const containerRef = useRef(null);
+ const lineRef = useRef(null);
+ const [activeTabEl, setActiveTabEl] = useState(null);
+
+ const activeTabRef = useCallback((el: El | null) => {
+ setActiveTabEl(el);
+ }, []);
+
+ useLayoutEffect(() => {
+ function update() {
+ if (activeTabEl && containerRef.current && lineRef.current) {
+ const containerRect = containerRef.current.getBoundingClientRect();
+ const lineEl = lineRef.current;
+ const rect = activeTabEl.getBoundingClientRect();
+ const containerPaddingLeft =
+ containerRect.left - containerRef.current.offsetLeft;
+ lineEl.style.width = `${rect.width}px`;
+ lineEl.style.transform = `translateX(${
+ rect.left - containerPaddingLeft
+ }px)`;
+ setTimeout(() => {
+ lineEl.style.transition = "transform 0.3s, width 0.3s";
+ }, 0);
+ } else if (lineRef.current) {
+ lineRef.current.style.width = "0px";
+ }
+ }
+
+ update();
+ let resizeObserver: ResizeObserver | undefined;
+
+ if (containerRef.current) {
+ resizeObserver = new ResizeObserver(() => {
+ setTimeout(() => {
+ update();
+ }, 100);
+ });
+ resizeObserver.observe(containerRef.current);
+ }
+
+ // add event listener for resize
+ window.addEventListener("resize", update);
+ return () => {
+ window.removeEventListener("resize", update);
+ resizeObserver?.disconnect();
+ };
+ }, [activeTabEl]);
+
+ return { activeTabRef, containerRef, lineRef };
+}
diff --git a/apps/playground-web/src/hooks/chains.ts b/apps/playground-web/src/hooks/chains.ts
index 0a8fe88a7b0..b4c466695aa 100644
--- a/apps/playground-web/src/hooks/chains.ts
+++ b/apps/playground-web/src/hooks/chains.ts
@@ -30,7 +30,22 @@ async function fetchBridgeSupportedChainsFromApi() {
throw new Error(json.error.message);
}
- return json.data as BridgeChain[];
+ const data = json.data as BridgeChain[];
+
+ return data.sort((a, b) => {
+ const aStartsWithNumber = a.name[0]?.match(/^\d/);
+ const bStartsWithNumber = b.name[0]?.match(/^\d/);
+
+ if (aStartsWithNumber && !bStartsWithNumber) {
+ return 1;
+ }
+
+ if (!aStartsWithNumber && bStartsWithNumber) {
+ return -1;
+ }
+
+ return a.name.localeCompare(b.name);
+ });
}
export function useBridgeSupportedChains() {
diff --git a/apps/playground-web/src/icons/PayIcon.tsx b/apps/playground-web/src/icons/PayIcon.tsx
deleted file mode 100644
index 386d0a6dc9f..00000000000
--- a/apps/playground-web/src/icons/PayIcon.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-export function PayIcon(props: { className?: string }) {
- return (
-
- );
-}
diff --git a/apps/portal/src/app/bridge/bridge-widget/iframe/page.mdx b/apps/portal/src/app/bridge/bridge-widget/iframe/page.mdx
index f7d0daf0ebc..a1c538b47fe 100644
--- a/apps/portal/src/app/bridge/bridge-widget/iframe/page.mdx
+++ b/apps/portal/src/app/bridge/bridge-widget/iframe/page.mdx
@@ -55,14 +55,14 @@ You can set the light theme by passing the `theme=light` query parameter.
-### Change default token selections
+### Token selections
By default no tokens are selected in the widget UI.
You can change the default token selections by using query parameters mentioned below:
-* `inputCurrency`, `inputChain` to set sell token.
-* `outputCurrency`, `outputChain` to set buy token.
+* `inputCurrency`, `inputChain`, `inputCurrencyAmount` to set sell token and amount.
+* `outputCurrency`, `outputChain`, `outputCurrencyAmount` to set buy token and amount.
Chain parameter should be the chain id (eg. 1 for Ethereum Mainnet, 137 for Polygon Mainnet, 8453 for Base Mainnet, etc.)
and currency parameter should be the token address. You can use [thirdweb chainlist](https://thirdweb.com/chainlist?service=pay) to find the chain id for a chain.
@@ -100,6 +100,27 @@ Set USDC on Base as the default sell token and USDC on Polygon as the default bu
+### Token amounts
+
+You can set default token amounts using the `inputCurrencyAmount` and `outputCurrencyAmount` query parameters.
+
+
+
+Set 100 USDC on Base as the default sell token with amount.
+
+
+
+
+
+
+
+Set 50 USDC on Polygon as the default buy token with amount.
+
+
+
+
+
+
### Persist Token Selections
By default, the widget saves the last used token selections to localStorage so that if the user revisits the widget later, last used tokens are selected by default. To disable this feature, you can set the `persistTokenSelections` query parameter to `false`.
@@ -151,3 +172,10 @@ Show fiat values in Japanese Yen (JPY) in the widget.
+### thirdweb branding
+
+By default, the widget displays thirdweb branding at the bottom. You can hide this by setting the `showThirdwebBranding` query parameter to `false`.
+
+
+
+
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx b/packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx
index 48162c8aee6..d8aca486f9f 100644
--- a/packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx
+++ b/packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx
@@ -1,9 +1,13 @@
import { useEffect, useRef, useState } from "react";
import { trackPayEvent } from "../../../../../analytics/track/pay.js";
+import type { Chain } from "../../../../../chains/types.js";
import { defineChain } from "../../../../../chains/utils.js";
import type { ThirdwebClient } from "../../../../../client/client.js";
import type { SupportedFiatCurrency } from "../../../../../pay/convert/type.js";
import type { PurchaseData } from "../../../../../pay/types.js";
+import type { Wallet } from "../../../../../wallets/interfaces/wallet.js";
+import type { SmartWalletOptions } from "../../../../../wallets/smart/types.js";
+import type { AppMetadata } from "../../../../../wallets/types.js";
import {
CustomThemeProvider,
useCustomTheme,
@@ -14,6 +18,8 @@ import {
spacing,
type Theme,
} from "../../../../core/design-system/index.js";
+import type { SiweAuthOptions } from "../../../../core/hooks/auth/useSiweAuth.js";
+import type { ConnectButton_connectModalOptions } from "../../../../core/hooks/connection/ConnectButtonProps.js";
import type { CompletedStatusResult } from "../../../../core/hooks/useStepExecutor.js";
import { EmbedContainer } from "../../ConnectWallet/Modal/ConnectEmbed.js";
import { Container } from "../../components/basic.js";
@@ -26,6 +32,8 @@ import type { SwapPreparedQuote } from "../swap-widget/types.js";
* Props for the `BridgeWidget` component.
*/
export type BridgeWidgetProps = {
+ className?: string;
+ style?: React.CSSProperties;
/**
* A client is the entry point to the thirdweb SDK. It is required for all other actions.
* You can create a client using the `createThirdwebClient` function. Refer to the
@@ -190,6 +198,117 @@ export type BridgeWidgetProps = {
/** Arbitrary data to be included in returned status and webhook events. */
purchaseData?: PurchaseData;
};
+
+ connectOptions?: {
+ /**
+ * Configurations for the `ConnectButton`'s Modal that is shown for connecting a wallet
+ * Refer to the [`ConnectButton_connectModalOptions`](https://portal.thirdweb.com/references/typescript/v5/ConnectButton_connectModalOptions) type for more details
+ */
+ connectModal?: ConnectButton_connectModalOptions;
+
+ /**
+ * Configure options for WalletConnect
+ *
+ * By default WalletConnect uses the thirdweb's default project id.
+ * Setting your own project id is recommended.
+ *
+ * You can create a project id by signing up on [walletconnect.com](https://walletconnect.com/)
+ */
+ walletConnect?: {
+ projectId?: string;
+ };
+
+ /**
+ * Enable Account abstraction for all wallets. This will connect to the users's smart account based on the connected personal wallet and the given options.
+ *
+ * This allows to sponsor gas fees for your user's transaction using the thirdweb account abstraction infrastructure.
+ *
+ */
+ accountAbstraction?: SmartWalletOptions;
+
+ /**
+ * Array of wallets to show in Connect Modal. If not provided, default wallets will be used.
+ */
+ wallets?: Wallet[];
+ /**
+ * When the user has connected their wallet to your site, this configuration determines whether or not you want to automatically connect to the last connected wallet when user visits your site again in the future.
+ *
+ * By default it is set to `{ timeout: 15000 }` meaning that autoConnect is enabled and if the autoConnection does not succeed within 15 seconds, it will be cancelled.
+ *
+ * If you want to disable autoConnect, set this prop to `false`.
+ *
+ * If you want to customize the timeout, you can assign an object with a `timeout` key to this prop.
+ */
+ autoConnect?:
+ | {
+ timeout: number;
+ }
+ | boolean;
+
+ /**
+ * Metadata of the app that will be passed to connected wallet. Setting this is highly recommended.
+ */
+ appMetadata?: AppMetadata;
+
+ /**
+ * The [`Chain`](https://portal.thirdweb.com/references/typescript/v5/Chain) object of the blockchain you want the wallet to connect to
+ *
+ * If a `chain` is not specified, Wallet will be connected to whatever is the default set in the wallet.
+ *
+ * If a `chain` is specified, Wallet will be prompted to switch to given chain after connection if it is not already connected to it.
+ * This ensures that the wallet is connected to the correct blockchain before interacting with your app.
+ *
+ * The `ConnectButton` also shows a "Switch Network" button until the wallet is connected to the specified chain. Clicking on the "Switch Network" button triggers the wallet to switch to the specified chain.
+ *
+ * You can create a `Chain` object using the [`defineChain`](https://portal.thirdweb.com/references/typescript/v5/defineChain) function.
+ * At minimum, you need to pass the `id` of the blockchain to `defineChain` function to create a `Chain` object.
+ * ```
+ */
+ chain?: Chain;
+
+ /**
+ * Array of chains that your app supports.
+ *
+ * This is only relevant if your app is a multi-chain app and works across multiple blockchains.
+ * If your app only works on a single blockchain, you should only specify the `chain` prop.
+ *
+ * Given list of chains will used in various ways:
+ * - They will be displayed in the network selector in the `ConnectButton`'s details modal post connection
+ * - They will be sent to wallet at the time of connection if the wallet supports requesting multiple chains ( example: WalletConnect ) so that users can switch between the chains post connection easily
+ *
+ * You can create a `Chain` object using the [`defineChain`](https://portal.thirdweb.com/references/typescript/v5/defineChain) function.
+ * At minimum, you need to pass the `id` of the blockchain to `defineChain` function to create a `Chain` object.
+ *
+ * ```tsx
+ * import { defineChain } from "thirdweb/react";
+ *
+ * const polygon = defineChain({
+ * id: 137,
+ * });
+ * ```
+ */
+ chains?: Chain[];
+
+ /**
+ * Wallets to show as recommended in the `ConnectButton`'s Modal
+ */
+ recommendedWallets?: Wallet[];
+
+ /**
+ * By default, ConnectButton modal shows a "All Wallets" button that shows a list of 500+ wallets.
+ *
+ * You can disable this button by setting `showAllWallets` prop to `false`
+ */
+ showAllWallets?: boolean;
+
+ /**
+ * Enable SIWE (Sign in with Ethererum) by passing an object of type `SiweAuthOptions` to
+ * enforce the users to sign a message after connecting their wallet to authenticate themselves.
+ *
+ * Refer to the [`SiweAuthOptions`](https://portal.thirdweb.com/references/typescript/v5/SiweAuthOptions) for more details
+ */
+ auth?: SiweAuthOptions;
+ };
};
/**
@@ -258,8 +377,10 @@ export function BridgeWidget(props: BridgeWidgetProps) {
{
it("should render nothing if no src provided", () => {
@@ -32,7 +32,7 @@ describe("MediaRenderer", () => {
}, 1000);
});
- it("should render a plain image", async () => {
+ it.skip("should render a plain image", async () => {
render();
await waitFor(() => {
expect(screen.getByRole("img")).toBeInTheDocument();
diff --git a/packages/thirdweb/src/stories/Bridge/BridgeWidget/bridge-widget-script.stories.tsx b/packages/thirdweb/src/stories/Bridge/BridgeWidget/bridge-widget-script.stories.tsx
index 7a75d9e964c..1922e34420b 100644
--- a/packages/thirdweb/src/stories/Bridge/BridgeWidget/bridge-widget-script.stories.tsx
+++ b/packages/thirdweb/src/stories/Bridge/BridgeWidget/bridge-widget-script.stories.tsx
@@ -19,16 +19,6 @@ export function BasicUsage() {
);
}
-export function LightTheme() {
- return (
-
- );
-}
-
export function CurrencySet() {
return (
+ >
+
+
);
}