TypeScript Types

All public types are exported from @tokenflight/swap.

Web Component Type Declarations

The SDK ships one declaration file that provides attribute autocomplete for <tokenflight-widget> across React, Vue, Solid, Svelte, Preact, and plain DOM.

This augments:

Target	What it adds
DOM	Typed document.querySelector("tokenflight-widget")
React / Preact / Solid	Typed JSX.IntrinsicElements
Vue	Typed GlobalComponents
Svelte	Typed intrinsic elements

TokenFlightWidgetAttributes

interface TokenFlightWidgetAttributes {
  "api-endpoint"?: string;
  "fiat-api-endpoint"?: string;
  "to-token"?: string;
  "from-token"?: string;
  "trade-type"?: string;
  amount?: string;
  recipient?: string;
  icon?: string;
  "lock-from-token"?: boolean | string;
  "lock-to-token"?: boolean | string;
  "fiat-currency"?: string;
  methods?: string;
  "default-pay-method"?: "crypto" | "card";
  "from-tokens"?: string;
  "to-tokens"?: string;
  "title-text"?: string;
  "title-image"?: string;
  theme?: "light" | "dark" | "auto";
  locale?: string;
  "csp-nonce"?: string;
  "hide-title"?: boolean | string;
  "hide-powered-by"?: boolean | string;
  "no-background"?: boolean | string;
  "no-border"?: boolean | string;
  "rpc-overrides"?: string;
}

TokenFlightWidgetConfig

interface TokenFlightWidgetConfig {
  apiEndpoint?: string;
  fiatApiEndpoint?: string;
  fromToken?: TokenIdentifier;
  toToken?: TokenIdentifier | TokenIdentifier[];
  tradeType?: "EXACT_INPUT" | "EXACT_OUTPUT";
  amount?: string;
  recipient?: string;
  icon?: string;
  fiatCurrency?: string;
  fromTokens?: TokenIdentifier[];
  toTokens?: TokenIdentifier[];
  lockFromToken?: boolean;
  lockToToken?: boolean;
  theme?: "light" | "dark" | "auto";
  locale?: string;
  customColors?: CustomColors & Record<string, string>;
  titleText?: string;
  titleImageUrl?: string;
  hideTitle?: boolean;
  hidePoweredBy?: boolean;
  noBackground?: boolean;
  noBorder?: boolean;
  rpcOverrides?: Record<string, string>;
}

TokenFlightWidgetOptions

interface TokenFlightWidgetOptions {
  container: string | HTMLElement;
  config: TokenFlightWidgetConfig;
  walletAdapter?: IWalletAdapter;
  callbacks?: Callbacks;
}

RegisterElementsOptions

interface RegisterElementsOptions {
  walletAdapter?: IWalletAdapter;
  callbacks?: Callbacks;
  customColors?: CustomColors;
  apiEndpoint?: string;
  fiatApiEndpoint?: string;
  theme?: Theme;
  locale?: SupportedLocale;
  textOverrides?: TextOverrides;
  hideTitle?: boolean;
  hidePoweredBy?: boolean;
  noBackground?: boolean;
  noBorder?: boolean;
  methods?: SwapPayMethod[];
  rpcOverrides?: Record<string, string>;
  supportedChainIds?: number[];
}

Callbacks

interface Callbacks {
  onSwapSuccess?(data: SwapSuccessData): void;
  onSwapError?(data: SwapErrorData): void;
  onWalletConnected?(data: WalletConnectedData): void;
  onQuoteReceived?(data: QuoteResponse): void;
  onAmountChanged?(data: AmountChangedData): void;
  onConnectWallet?(): void;
  onAccountModal?(): void;
}

Token Types

type TokenIdentifier = string | TokenTarget;

interface TokenTarget {
  chainId: number;
  address: string;
}

Use a CAIP-10 string, JSON string, or object literal anywhere a TokenIdentifier is expected.