TypeScript SDK
SwapWidgetProps
type SwapWidgetProps = { className?: string; connectOptions?: SwapWidgetConnectOptions; currency?: SupportedFiatCurrency; onCancel?: (quote: SwapPreparedQuote) => void; onError?: (error: Error, quote: SwapPreparedQuote) => void; onSuccess?: (quote: SwapPreparedQuote) => void; prefill?: { buyToken?: { amount?: string; chainId: number; tokenAddress?: string; }; sellToken?: { amount?: string; chainId: number; tokenAddress?: string; }; }; showThirdwebBranding?: boolean; style?: React.CSSProperties;};type className = 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 if you want for client-side usage and secretKey for server-side usage.
import { createThirdwebClient } from "thirdweb"; const client = createThirdwebClient({ clientId: "<your_client_id>",});type connectOptions = SwapWidgetConnectOptions;The currency to use for the payment.
type currency = SupportedFiatCurrency;The prefill Buy and/or Sell tokens for the swap widget. If tokenAddress is not provided, the native token will be used
type prefill = { buyToken?: { amount?: string; chainId: number; tokenAddress?: string; }; sellToken?: { amount?: string; chainId: number; tokenAddress?: string; };};<SwapWidget client={client} prefill={{ buyToken: { chainId: 8453, tokenAddress: "0x833589fcd6edb6e08f4c7c32d4f71b54bda02913", }, }}/>;<SwapWidget client={client} prefill={{ sellToken: { chainId: 8453, }, }}/>;<SwapWidget client={client} prefill={{ buyToken: { chainId: 8453, amount: "0.1", tokenAddress: "0x833589fcd6edb6e08f4c7c32d4f71b54bda02913", }, }}/>;<SwapWidget client={client} prefill={{ buyToken: { chainId: 8453, tokenAddress: "0x833589fcd6edb6e08f4c7c32d4f71b54bda02913", }, sellToken: { chainId: 8453, }, }}/>;Whether to show thirdweb branding in the widget.
type showThirdwebBranding = boolean;type style = React.CSSProperties;Set the theme for the SwapWidget component. 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
functions from thirdweb/react to use the default themes as base and overrides parts of it.
import { lightTheme } from "thirdweb/react"; const customTheme = lightTheme({ colors: { modalBg: "red", },}); function Example() { return <SwapWidget client={client} theme={customTheme} />;}