import { LanguageKey, LanguageResources } from "../providers/I18nProvider/types.js"; import { DefaultFieldValues } from "../stores/form/types.js"; import { BaseToken, ChainType, ContractCall, ExecutionOptions, ExtendedChain, Order, Route, RouteOptions, SDKConfig, StaticToken, Token } from "@lifi/sdk"; import { CSSProperties, PropsWithChildren, ReactNode, RefObject } from "react"; import { Components, PaletteMode, PaletteOptions, Shape, SxProps, Theme } from "@mui/material"; import { WidgetProviderProps } from "@lifi/widget-provider"; import { WalletMenuOpenArgs } from "@lifi/wallet-management"; import { TypographyVariantsOptions } from "@mui/material/styles"; //#region src/types/widget.d.ts type WidgetVariant = "compact" | "wide" | "drawer"; /** @internal Not part of the public API. */ type InternalWidgetMode = "limit"; type WidgetMode = "default" | "split" | "custom" | "refuel" | InternalWidgetMode; type SplitMode = "bridge" | "swap"; type SplitModeOptions = { defaultTab: SplitMode; }; type CustomMode = "checkout" | "deposit"; interface ModeOptions { /** * Configure split mode behavior: * - 'bridge' | 'swap': Single mode without tabs * - { defaultTab: 'bridge' | 'swap' }: Tabs mode with configurable default tab */ split?: SplitMode | SplitModeOptions; custom?: { type: CustomMode; }; } /** * Identity of a header navigation tab. Each key maps to a widget variant, mode and * (optionally) mode options; labels are resolved from the key. */ type SplitNavigationTabKey = SplitMode; /** @internal Not part of the public API. */ type InternalNavigationTabKey = "default" | "private" | "refuel" | "swap-advanced" | "bridge-advanced" | "limit"; type NavigationTabKey = InternalNavigationTabKey | SplitNavigationTabKey; type Appearance = PaletteMode | "system"; interface NavigationProps { /** * If given, uses a negative margin to counteract the padding on sides for navigation elements like icon buttons. * @default true */ edge?: boolean; } type WidgetThemeComponents = Partial, "MuiAppBar" | "MuiAvatar" | "MuiButton" | "MuiCard" | "MuiDrawer" | "MuiIconButton" | "MuiInputCard" | "MuiNavigationTabs" | "MuiNavigationTab" | "MuiTabs" | "MuiCheckbox">>; type WidgetTheme = { colorSchemes?: { light?: { palette: PaletteOptions; }; dark?: { palette: PaletteOptions; }; }; shape?: Partial; typography?: TypographyVariantsOptions; components?: WidgetThemeComponents; container?: CSSProperties; routesContainer?: CSSProperties; chainSidebarContainer?: CSSProperties; header?: CSSProperties; navigation?: NavigationProps; }; interface DisabledUIConfig { fromAmount?: boolean; fromToken?: boolean; toAddress?: boolean; toToken?: boolean; } interface HiddenUIConfig { addressBookConnectedWallets?: boolean; allNetworks?: boolean; appearance?: boolean; bridgesSettings?: boolean; chainSelect?: boolean; /** * Hide the chain sidebar in the `wide` variant. No effect in other variants. * @default false */ chainSidebar?: boolean; contactSupport?: boolean; /** * Hide the drawer close button. Only meaningful when `variant === 'drawer'`. * @default false */ drawerCloseButton?: boolean; fromToken?: boolean; gasRefuelMessage?: boolean; hideSmallBalances?: boolean; history?: boolean; insufficientGasMessage?: boolean; integratorStepDetails?: boolean; language?: boolean; /** * Hide the warning shown when sending to an address with low historical * on-chain activity (low transaction count or contract-like behavior). * @default false */ lowAddressActivityConfirmation?: boolean; poweredBy?: boolean; reverseTokensButton?: boolean; routeCardPriceImpact?: boolean; routeTokenDescription?: boolean; searchTokenInput?: boolean; toAddress?: boolean; toToken?: boolean; walletMenu?: boolean; } interface RequiredUIConfig { accountDeployedMessage?: boolean; toAddress?: boolean; } type DefaultUI = { transactionDetailsExpanded?: boolean; navigationHeaderTitleNoWrap?: boolean; /** * Layout for the main form. * - `'default'`: the chain/token selectors plus single amount input. * - `'cards'`: the redesigned card-based layout — stacked Send/Receive amount * cards (`AmountInputCardPair`) with inline token pill selectors and a swap * button. * @default 'default' */ layout?: "default" | "cards"; }; interface WidgetWalletConfig { walletEcosystemsOrder?: Record; onConnect?(args?: WalletMenuOpenArgs): void; /** * Determines whether the widget should provide partial wallet management functionality. * * In partial mode, external wallet management will be used for "opt-out" providers, * while the internal management is applied for any remaining providers that do not opt out. * This allows a flexible balance between the integrator's custom wallet menu and the widget's native wallet menu. * @default false */ usePartialWalletManagement?: boolean; /** * This option forces the widget to always use internal wallet management ignoring external wallet management contexts * @default false */ forceInternalWalletManagement?: boolean; } interface WidgetSDKConfig extends Omit { routeOptions?: Omit; executionOptions?: Pick; } interface WidgetContractTool { name: string; logoURI: string; } interface CalculateFeeParams { fromChain: ExtendedChain; toChain: ExtendedChain; fromToken: Token; toToken: Token; fromAddress?: string; toAddress?: string; fromAmount?: bigint; toAmount?: bigint; slippage?: number; } interface WidgetFeeConfig { name?: string; logoURI?: string; fee?: number; /** * Whether to show the fee percentage in the fee details. * @default false */ showFeePercentage?: boolean; /** * Whether to show a tooltip with the fee details. Requires `name` or `feeTooltipComponent` to be set. * @default false */ showFeeTooltip?: boolean; /** * Custom tooltip component to show with the fee details. */ feeTooltipComponent?: ReactNode; /** * Function to calculate fees before fetching quotes. * If provided, this function will be used instead of the `fee` parameter. * Only one of `fee` or `calculateFee` should be used. * * @param params Object containing the fee calculation parameters * @returns A promise that resolves to the calculated fee as a number (e.g., 0.03 represents a 3% fee) */ calculateFee?(params: CalculateFeeParams): Promise; } interface ToAddress { name?: string; address: string; chainType: ChainType; logoURI?: string; } interface AllowDeny { allow?: T[]; deny?: T[]; } type AllowDenySetItem = string | number; interface AllowDenySet { allow?: Set; deny?: Set; } type AllowDenySets = { from?: AllowDenySet; to?: AllowDenySet; } & AllowDenySet; type AllowDenyItems = { from?: AllowDeny; to?: AllowDeny; } & AllowDeny; type WidgetChains = { types?: AllowDeny; } & AllowDenyItems; type WidgetTokens = { featured?: StaticToken[]; include?: Token[]; popular?: StaticToken[]; verified?: BaseToken[]; } & AllowDenyItems; type WidgetLanguages = { default?: LanguageKey; } & AllowDeny; type PoweredByType = "default" | "jumper"; interface RouteLabel { text: string; sx?: SxProps; } interface RouteLabelRule { label: RouteLabel; bridges?: AllowDeny; exchanges?: AllowDeny; fromChainId?: number[]; toChainId?: number[]; fromTokenAddress?: string[]; toTokenAddress?: string[]; /** * Custom match function evaluated against the route. When provided, its * result is AND'd with the other matching criteria — all specified * conditions must pass for the label to apply. Use this for matching logic * that the built-in fields cannot express (gas costs, step count, route * tags, etc.). */ match?: (route: Route) => boolean; } type ExplorerUrl = string | { url: string; txPath?: string; addressPath?: string; }; type WidgetProvider = (props: PropsWithChildren) => ReactNode; interface WidgetConfig { fromChain?: number; toChain?: number; fromToken?: string; toToken?: string; toAddress?: ToAddress; toAddresses?: ToAddress[]; fromAmount?: number | string; minFromAmountUSD?: number; toAmount?: number | string; formUpdateKey?: string; providers?: WidgetProvider[]; contractCalls?: ContractCall[]; contractComponent?: ReactNode; contractSecondaryComponent?: ReactNode; contractCompactComponent?: ReactNode; contractTool?: WidgetContractTool; integrator: string; apiKey?: string; feeConfig?: WidgetFeeConfig; referrer?: string; routePriority?: Order; slippage?: number; variant?: WidgetVariant; mode?: WidgetMode; modeOptions?: ModeOptions; /** * Header navigation tabs, in order. When set, the widget renders a tab bar * and the active tab drives the displayed flow. Each entry is a tab key. * * @internal Not part of the public API. */ _navigationTabs?: NavigationTabKey[]; appearance?: Appearance; theme?: WidgetTheme; disabledUI?: DisabledUIConfig; hiddenUI?: HiddenUIConfig; requiredUI?: RequiredUIConfig; defaultUI?: DefaultUI; /** * When true, shows only the recommended route and hides the route * selector UI. Distinct from `routePriority`, which sets the SDK * ranking order across multiple displayed routes. * @default false */ showSingleRoute?: boolean; useRelayerRoutes?: boolean; walletConfig?: WidgetWalletConfig; sdkConfig?: WidgetSDKConfig; buildUrl?: boolean; keyPrefix?: string; bridges?: AllowDeny; exchanges?: AllowDeny; chains?: WidgetChains; tokens?: WidgetTokens; languages?: WidgetLanguages; languageResources?: LanguageResources; explorerUrls?: Record & Partial>; poweredBy?: PoweredByType; /** * Custom labels/badges to show on routes based on specified rules */ routeLabels?: RouteLabelRule[]; } interface FormFieldOptions { setUrlSearchParam: boolean; } interface FieldValues extends Omit { fromAmount?: number | string; toAmount?: number | string; toAddress?: ToAddress | string; } type FieldNames = keyof FieldValues; type SetFieldValueFunction = (key: K, value: FieldValues[K], options?: FormFieldOptions) => void; type FormState = { setFieldValue: SetFieldValueFunction; }; type FormRef = RefObject; interface FormRefProps { formRef?: FormRef; } interface WidgetConfigProps extends FormRefProps { config: WidgetConfig; } interface WidgetConfigPartialProps { config?: Partial; } type WidgetProps = WidgetDrawerProps & WidgetConfig & WidgetConfigPartialProps & FormRefProps; interface WidgetDrawerProps extends WidgetConfigPartialProps { elementRef?: RefObject; open?: boolean; /** * Make sure to make the onClose callback stable (e.g. using useCallback) to avoid causing re-renders of the entire widget */ onClose?(): void; } declare enum ExpansionType { Routes = "routes", FromChain = "fromChain", ToChain = "toChain" } //#endregion export { AllowDeny, AllowDenyItems, AllowDenySet, AllowDenySetItem, AllowDenySets, Appearance, CalculateFeeParams, CustomMode, DefaultUI, DisabledUIConfig, ExpansionType, ExplorerUrl, FieldNames, FieldValues, FormFieldOptions, FormRef, FormRefProps, FormState, HiddenUIConfig, InternalNavigationTabKey, InternalWidgetMode, ModeOptions, NavigationProps, NavigationTabKey, PoweredByType, RequiredUIConfig, RouteLabel, RouteLabelRule, SetFieldValueFunction, SplitMode, SplitModeOptions, SplitNavigationTabKey, ToAddress, WidgetChains, WidgetConfig, WidgetConfigPartialProps, WidgetConfigProps, WidgetContractTool, WidgetDrawerProps, WidgetFeeConfig, WidgetLanguages, WidgetMode, WidgetProps, WidgetProvider, WidgetSDKConfig, WidgetTheme, WidgetThemeComponents, WidgetTokens, WidgetVariant, WidgetWalletConfig }; //# sourceMappingURL=widget.d.ts.map