TypeScript SDK
BridgeWidgetProps
Props for the BridgeWidget component.
type BridgeWidgetProps = { buy: { amount: string; buttonLabel?: string; chainId: number; className?: string; country?: string; onCancel?: (quote: BuyOrOnrampPrepareResult | undefined) => void; onError?: ( error: Error, quote: BuyOrOnrampPrepareResult | undefined, ) => void; onSuccess?: (quote: BuyOrOnrampPrepareResult) => void; presetOptions?: [number, number, number]; purchaseData?: PurchaseData; tokenAddress?: string; }; currency?: SupportedFiatCurrency; showThirdwebBranding?: boolean; swap?: { className?: string; onCancel?: (quote: SwapPreparedQuote) => void; onDisconnect?: () => void; onError?: (error: Error, quote: SwapPreparedQuote) => void; onSuccess?: (quote: SwapPreparedQuote) => void; persistTokenSelections?: boolean; prefill?: { buyToken?: { amount?: string; chainId: number; tokenAddress?: string; }; sellToken?: { amount?: string; chainId: number; tokenAddress?: string; }; }; style?: React.CSSProperties; };};Configuration for the Buy tab. This mirrors BuyWidget options where applicable.
type buy = { amount: string; buttonLabel?: string; chainId: number; className?: string; country?: string; onCancel?: (quote: BuyOrOnrampPrepareResult | undefined) => void; onError?: ( error: Error, quote: BuyOrOnrampPrepareResult | undefined, ) => void; onSuccess?: (quote: BuyOrOnrampPrepareResult) => void; presetOptions?: [number, number, number]; purchaseData?: PurchaseData; tokenAddress?: string;};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
Creating a Client documentation for more information.
You must provide a clientId or secretKey in order to initialize a client. Pass clientId for client-side usage and secretKey for server-side usage.
import { createThirdwebClient } from "thirdweb"; const client = createThirdwebClient({ clientId: "<your_client_id>",});The currency to use for fiat pricing in the widget.
type currency = SupportedFiatCurrency;Whether to show thirdweb branding in the widget.
type showThirdwebBranding = boolean;Configuration for the Swap tab. This mirrors SwapWidget options where applicable.
type swap = { className?: string; onCancel?: (quote: SwapPreparedQuote) => void; onDisconnect?: () => void; onError?: (error: Error, quote: SwapPreparedQuote) => void; onSuccess?: (quote: SwapPreparedQuote) => void; persistTokenSelections?: boolean; prefill?: { buyToken?: { amount?: string; chainId: number; tokenAddress?: string; }; sellToken?: { amount?: string; chainId: number; tokenAddress?: string; }; }; style?: React.CSSProperties;};Set the theme for the widget. By default it is set to "dark".
Theme can be set to either "dark", "light" or a custom theme object.
You can also import lightTheme
or darkTheme from thirdweb/react
to use the default themes as base and override parts of it.
import { lightTheme } from "thirdweb/react"; const customTheme = lightTheme({ colors: { modalBg: "red" },});