@liberfi.io/ui-trade 0.1.1 → 0.1.2

package/README.md

@@ -1,13 +1,19 @@
 # @liberfi.io/ui-trade
 
-Trade hooks for the Liberfi React SDK. This package provides chain-agnostic swap logic that works across Solana, Ethereum, and BSC. It is a pure-logic layer — no UI components, no toasts, no i18n — leaving side-effect control entirely to the consumer.
+Trade hooks and swap widget for the Liberfi React SDK. This package provides chain-agnostic swap logic and a ready-to-use swap form component that works across Solana, Ethereum, and BSC.
+
+The package is organized in two layers:
+
+- **Hooks** (`useSwap`, `useSwapRoutePolling`, `useTxConfirmation`) — pure-logic building blocks with no UI side-effects, designed for IoC.
+- **Swap Widget** (`SwapWidget` / `useSwapScript` / `SwapUI` / `SwapPreviewModal`) — a full swap form with preview-before-confirm flow, following the Script/Widget/UI three-layer architecture, composable at any level.
 
 ## Design Philosophy
 
-- **IoC (Inversion of Control)** — Side-effects (toast, analytics, navigation) are injected via `onSubmitted` / `onError` callbacks. The hook never hardcodes any feedback mechanism.
+- **IoC (Inversion of Control)** — Side-effects (toast, analytics, navigation) are injected via callbacks. Hooks never hardcode any feedback mechanism.
+- **Script/Widget/UI architecture** — The swap form follows the monorepo's three-layer pattern: `useSwapScript` (data + state), `SwapWidget` (orchestration), `SwapUI` (presentation). Consumers can use the widget directly or compose Script + custom UI.
 - **Chain-agnostic** — Works across Solana (Jupiter) and EVM chains (KyberSwap). Chain-specific differences (dex selection, tx format) are handled by the underlying `@liberfi.io/client` and `WalletAdapter` abstractions.
-- **Wallet-flexible** — The `WalletAdapter` is passed per-call, not coupled to a specific wallet provider or context.
-- **Layered architecture** — Builds on `@liberfi.io/react` (data layer) and `@liberfi.io/wallet-connector` (signing layer) without duplicating their logic.
+- **UI via `@liberfi.io/ui`** — Uses the shared UI library (`Button`, `Input`, `Avatar`, `Modal`, etc.) for consistent styling across the monorepo. No direct `@heroui/react` dependency.
+- **Layered architecture** — Builds on `@liberfi.io/react` (data layer), `@liberfi.io/wallet-connector` (signing layer), and `@liberfi.io/ui` (presentation layer) without duplicating their logic.
 
 ## Installation
 
@@ -20,6 +26,7 @@ Peer dependencies the consumer must provide:
 - `react` (>=18)
 - `react-dom` (>=18)
 - `@liberfi.io/react` (provides `DexClientProvider` and `useDexClient`)
+- `@liberfi.io/ui` (provides UI components: `Button`, `Input`, `Modal`, `Avatar`, etc.)
 - `@liberfi.io/wallet-connector` (provides `WalletAdapter` type)
 
 ## API Reference
@@ -44,6 +51,27 @@ Orchestrates the full swap flow: **route -> sign -> send**.
 | `swap`       | `(input: SwapInput) => Promise<SwapResult>` | Executes the swap. Resolves with `SwapResult` on success, throws on failure. |
 | `isSwapping` | `boolean`                                   | Whether a swap is currently in progress.                                     |
 
+#### `useSwapRoutePolling(params, options?)`
+
+Polls for swap route quotes at a configurable interval. Built on `useSwapRouteQuery` (TanStack Query).
+
+**Parameters:**
+
+| Name               | Type                      | Description                                                            |
+| ------------------ | ------------------------- | ---------------------------------------------------------------------- |
+| `params`           | `Partial<API.SwapParams>` | Route parameters. Polling starts when all required fields are present. |
+| `options.interval` | `number`                  | Polling interval in ms. Defaults to 12000.                             |
+| `options.paused`   | `boolean`                 | Pause polling (e.g. during swap execution).                            |
+| `options.onError`  | `(error: Error) => void`  | Called when a route fetch fails.                                       |
+
+**Returns:** `{ route, isRouting, error }`
+
+| Name        | Type                         | Description                       |
+| ----------- | ---------------------------- | --------------------------------- |
+| `route`     | `API.SwapRoute \| undefined` | Current route quote.              |
+| `isRouting` | `boolean`                    | Whether a route is being fetched. |
+| `error`     | `Error \| null`              | Latest route fetch error.         |
+
 #### `useTxConfirmation(options?: UseTxConfirmationOptions)`
 
 Tracks transaction confirmation via backend SSE. Designed to compose with `useSwap`.
@@ -65,6 +93,126 @@ Tracks transaction confirmation via backend SSE. Designed to compose with `useSw
 | `clearAll`     | `() => void`                             | Remove all tracked transactions.                    |
 | `transactions` | `Map<string, TrackedTx>`                 | All tracked transactions with their current status. |
 
+### Components (Swap Widget)
+
+The swap widget follows the **Script / Widget / UI** three-layer architecture.
+
+#### `SwapWidget`
+
+Plug-and-play swap form. Calls `useSwapScript` internally and renders `SwapUI` with `SwapPreviewModal`. Clicking the swap button opens a preview modal; confirming in the modal executes the swap.
+
+```tsx
+<SwapWidget
+  chain={Chain.SOLANA}
+  from="So11111111111111111111111111111111111111112"
+  to="EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v"
+  onComplete={(result) => console.log(result)}
+  className="my-swap"
+/>
+```
+
+**Props (`SwapWidgetProps`):**
+
+| Name          | Type                                                      | Description                   |
+| ------------- | --------------------------------------------------------- | ----------------------------- |
+| `chain`       | `Chain`                                                   | Target chain.                 |
+| `from?`       | `string`                                                  | Initial from-token address.   |
+| `to?`         | `string`                                                  | Initial to-token address.     |
+| `onComplete?` | `(result: { success: boolean; txHash?: string }) => void` | Called when swap completes.   |
+| `className?`  | `string`                                                  | External style customization. |
+
+#### `useSwapScript(params: UseSwapScriptParams)`
+
+Script layer hook. Encapsulates all data fetching, state management, and swap execution. No JSX, no UI imports. Use this to build a custom swap UI.
+
+**Parameters (`UseSwapScriptParams`):**
+
+| Name          | Type                                                      | Description                 |
+| ------------- | --------------------------------------------------------- | --------------------------- |
+| `chain`       | `Chain`                                                   | Target chain.               |
+| `from?`       | `string`                                                  | Initial from-token address. |
+| `to?`         | `string`                                                  | Initial to-token address.   |
+| `onComplete?` | `(result: { success: boolean; txHash?: string }) => void` | Called when swap completes. |
+
+**Returns (`UseSwapScriptResult`):**
+
+| Name                  | Type                               | Description                                  |
+| --------------------- | ---------------------------------- | -------------------------------------------- |
+| `fromTokenAddress`    | `string`                           | Currently selected from-token address.       |
+| `toTokenAddress`      | `string`                           | Currently selected to-token address.         |
+| `setFromTokenAddress` | `(addr: string) => void`           | Update from-token address.                   |
+| `setToTokenAddress`   | `(addr: string) => void`           | Update to-token address.                     |
+| `fromToken`           | `Token \| null`                    | From-token metadata.                         |
+| `toToken`             | `Token \| null`                    | To-token metadata.                           |
+| `fromBalance`         | `Portfolio \| null`                | User's from-token balance.                   |
+| `toBalance`           | `Portfolio \| null`                | User's to-token balance.                     |
+| `amount`              | `string \| undefined`              | Human-readable amount.                       |
+| `setAmount`           | `(v: string \| undefined) => void` | Update amount.                               |
+| `setHalfAmount`       | `() => void`                       | Set amount to half of from-token balance.    |
+| `setMaxAmount`        | `() => void`                       | Set amount to full from-token balance.       |
+| `amountInDecimals`    | `string \| undefined`              | Amount in smallest unit.                     |
+| `amountInUsd`         | `string \| undefined`              | Amount in USD.                               |
+| `outputAmount`        | `string \| undefined`              | Formatted output amount from route.          |
+| `outputAmountInUsd`   | `string \| undefined`              | Output amount in USD.                        |
+| `route`               | `API.SwapRoute \| undefined`       | Current route quote.                         |
+| `isRouting`           | `boolean`                          | Whether a route is being fetched.            |
+| `routeError`          | `Error \| null`                    | Route fetch error.                           |
+| `swap`                | `() => Promise<void>`              | Execute the swap.                            |
+| `isSwapping`          | `boolean`                          | Whether a swap is in progress.               |
+| `txStatus`            | `TxConfirmationStatus`             | Confirmation status of the last transaction. |
+| `isLoading`           | `boolean`                          | Whether initial data is loading.             |
+
+#### `SwapUI`
+
+Pure presentational component for the swap form. Renders the From/To token inputs with token selector buttons, balance display, Half/Max shortcuts, and a preview button. Styled with `@liberfi.io/ui` components and Tailwind CSS.
+
+**Props (`SwapUIProps`):**
+
+| Name                | Type                               | Description                       |
+| ------------------- | ---------------------------------- | --------------------------------- |
+| `fromToken`         | `Token \| null`                    | From-token metadata.              |
+| `toToken`           | `Token \| null`                    | To-token metadata.                |
+| `fromBalance`       | `Portfolio \| null`                | User's from-token balance.        |
+| `toBalance`         | `Portfolio \| null`                | User's to-token balance.          |
+| `amount`            | `string \| undefined`              | Human-readable input amount.      |
+| `amountInUsd`       | `string \| undefined`              | Input amount in USD.              |
+| `onAmountChange`    | `(v: string \| undefined) => void` | Amount change handler.            |
+| `onHalfAmount?`     | `() => void`                       | Half balance shortcut handler.    |
+| `onMaxAmount?`      | `() => void`                       | Max balance shortcut handler.     |
+| `outputAmount`      | `string \| undefined`              | Formatted output amount.          |
+| `outputAmountInUsd` | `string \| undefined`              | Output amount in USD.             |
+| `onFromTokenSelect` | `(addr: string) => void`           | From-token selection handler.     |
+| `onToTokenSelect`   | `(addr: string) => void`           | To-token selection handler.       |
+| `route`             | `API.SwapRoute \| undefined`       | Current swap route quote.         |
+| `isRouting`         | `boolean`                          | Whether a route is being fetched. |
+| `routeError`        | `Error \| null`                    | Route error.                      |
+| `onPreview`         | `() => void`                       | Open preview modal handler.       |
+| `isSwapping`        | `boolean`                          | Whether a swap is in progress.    |
+| `className?`        | `string`                           | External style customization.     |
+
+#### `SwapPreviewModal`
+
+Modal component that previews swap details before confirmation. Shows from/to token cards with amounts, an expandable route plan details section, and a confirm button.
+
+**Props (`SwapPreviewModalProps`):**
+
+| Name                | Type                         | Description                       |
+| ------------------- | ---------------------------- | --------------------------------- |
+| `isOpen`            | `boolean`                    | Whether the modal is open.        |
+| `onOpenChange`      | `(isOpen: boolean) => void`  | Modal open/close handler.         |
+| `fromToken`         | `Token \| null`              | From-token metadata.              |
+| `toToken`           | `Token \| null`              | To-token metadata.                |
+| `fromBalance`       | `Portfolio \| null`          | User's from-token balance.        |
+| `inputAmount`       | `string \| undefined`        | Input amount (human-readable).    |
+| `inputAmountInUsd`  | `string \| undefined`        | Input amount in USD.              |
+| `outputAmount`      | `string \| undefined`        | Output amount (human-readable).   |
+| `outputAmountInUsd` | `string \| undefined`        | Output amount in USD.             |
+| `route`             | `API.SwapRoute \| undefined` | Current swap route.               |
+| `isRouting`         | `boolean`                    | Whether a route is being fetched. |
+| `routeError`        | `Error \| null`              | Route error.                      |
+| `onConfirm`         | `() => void`                 | Confirm swap handler.             |
+| `isSwapping`        | `boolean`                    | Whether a swap is in progress.    |
+
 ### Types
 
 #### `SwapInput`
@@ -128,6 +276,16 @@ interface UseTxConfirmationOptions {
 }
 ```
 
+#### `UseSwapRoutePollingOptions`
+
+```typescript
+interface UseSwapRoutePollingOptions {
+  interval?: number; // default: 12000
+  paused?: boolean;
+  onError?: (error: Error) => void;
+}
+```
+
 ### Constants
 
 #### `version`
@@ -138,7 +296,91 @@ const version: string; // e.g. "0.1.0"
 
 ## Usage Examples
 
-### Swap with Confirmation Tracking
+### SwapWidget (Plug-and-Play)
+
+```tsx
+import { Chain } from "@liberfi.io/types";
+import { SwapWidget } from "@liberfi.io/ui-trade";
+
+function TradePage() {
+  return (
+    <SwapWidget
+      chain={Chain.SOLANA}
+      from="So11111111111111111111111111111111111111112"
+      to="EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v"
+      onComplete={(result) => {
+        if (result.success) {
+          toast.success(`Swap confirmed: ${result.txHash}`);
+        } else {
+          toast.error("Swap failed");
+        }
+      }}
+    />
+  );
+}
+```
+
+### Custom UI with useSwapScript + SwapPreviewModal
+
+```tsx
+import { Chain } from "@liberfi.io/types";
+import { useDisclosure } from "@liberfi.io/ui";
+import { useSwapScript, SwapUI, SwapPreviewModal } from "@liberfi.io/ui-trade";
+
+function MyCustomSwapForm() {
+  const script = useSwapScript({
+    chain: Chain.SOLANA,
+    from: "So11111111111111111111111111111111111111112",
+    to: "EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v",
+    onComplete: (result) => console.log("Done:", result),
+  });
+
+  const { isOpen, onOpen, onOpenChange } = useDisclosure();
+
+  return (
+    <>
+      <SwapUI
+        fromToken={script.fromToken}
+        toToken={script.toToken}
+        fromBalance={script.fromBalance}
+        toBalance={script.toBalance}
+        amount={script.amount}
+        amountInUsd={script.amountInUsd}
+        onAmountChange={script.setAmount}
+        onHalfAmount={script.setHalfAmount}
+        onMaxAmount={script.setMaxAmount}
+        outputAmount={script.outputAmount}
+        outputAmountInUsd={script.outputAmountInUsd}
+        onFromTokenSelect={script.setFromTokenAddress}
+        onToTokenSelect={script.setToTokenAddress}
+        route={script.route}
+        isRouting={script.isRouting}
+        routeError={script.routeError}
+        onPreview={onOpen}
+        isSwapping={script.isSwapping}
+      />
+      <SwapPreviewModal
+        isOpen={isOpen}
+        onOpenChange={onOpenChange}
+        fromToken={script.fromToken}
+        toToken={script.toToken}
+        fromBalance={script.fromBalance}
+        inputAmount={script.amount}
+        inputAmountInUsd={script.amountInUsd}
+        outputAmount={script.outputAmount}
+        outputAmountInUsd={script.outputAmountInUsd}
+        route={script.route}
+        isRouting={script.isRouting}
+        routeError={script.routeError}
+        onConfirm={script.swap}
+        isSwapping={script.isSwapping}
+      />
+    </>
+  );
+}
+```
+
+### Swap with Confirmation Tracking (Low-Level Hooks)
 
 ```tsx
 import { Chain } from "@liberfi.io/types";
@@ -241,3 +483,6 @@ function EvmSwapButton() {
 - Add `useSwapQuote` hook for fetching quotes without executing (read-only route info).
 - Add ERC20 approval detection and `useTokenApproval` hook for EVM chains that don't support permit.
 - Support `ExactOut` swap mode with output amount estimation.
+- Add a skeleton loading component (`swap-skeleton.ui.tsx`) for the swap form.
+- Add slippage / priority fee / anti-MEV configuration to `SwapWidget` props.
+- Support token-select callback props on `SwapWidget` for integrating with external token picker UI.

package/dist/index.d.mts

@@ -1,5 +1,7 @@
-import { Chain, API } from '@liberfi.io/types';
+import * as _liberfi_io_types from '@liberfi.io/types';
+import { Chain, API, Token, Portfolio } from '@liberfi.io/types';
 import { WalletAdapter } from '@liberfi.io/wallet-connector';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
 /**
  * Input parameters for the `swap()` function returned by {@link useSwap}.
@@ -50,6 +52,15 @@ interface UseSwapOptions {
     /** Called when an error occurs at any phase of the swap flow. */
     onError?: (error: Error, phase: SwapPhase) => void;
 }
+/** Options for the {@link useSwapRoutePolling} hook. */
+interface UseSwapRoutePollingOptions {
+    /** Polling interval in ms. Defaults to 12000 (12s). */
+    interval?: number;
+    /** Pause polling (e.g. during swap execution). */
+    paused?: boolean;
+    /** Called when a route fetch fails. */
+    onError?: (error: Error) => void;
+}
 /** Confirmation status of a tracked transaction. */
 type TxConfirmationStatus = "idle" | "pending" | "confirmed" | "failed";
 /** Options for the {@link useTxConfirmation} hook. */
@@ -77,6 +88,21 @@ declare function useSwap(options?: UseSwapOptions): {
     isSwapping: boolean;
 };
 
+/**
+ * Hook that polls for swap route quotes at a configurable interval.
+ *
+ * Built on top of `useSwapRouteQuery` (TanStack Query) — automatically
+ * deduplicates requests, caches results, and invalidates when params change.
+ *
+ * Polling pauses when `paused` is true (e.g. during swap execution) or
+ * when required params are missing.
+ */
+declare function useSwapRoutePolling(params: Partial<API.SwapParams>, options?: UseSwapRoutePollingOptions): {
+    route: _liberfi_io_types.SwapRoute | undefined;
+    isRouting: boolean;
+    error: Error | null;
+};
+
 interface TrackedTx {
     chain: Chain;
     txHash: string;
@@ -104,6 +130,193 @@ declare function useTxConfirmation(options?: UseTxConfirmationOptions): {
     transactions: Map<string, TrackedTx>;
 };
 
+/** Parameters for {@link useSwapScript}. */
+interface UseSwapScriptParams {
+    /** Target chain */
+    chain: Chain;
+    /** Initial from-token address */
+    from?: string;
+    /** Initial to-token address */
+    to?: string;
+    /** Called when the swap completes (success or failure) */
+    onComplete?: (result: {
+        success: boolean;
+        txHash?: string;
+    }) => void;
+}
+/** Return value of {@link useSwapScript}. */
+interface UseSwapScriptResult {
+    /** Currently selected from-token address */
+    fromTokenAddress: string;
+    /** Currently selected to-token address */
+    toTokenAddress: string;
+    /** Update the from-token address */
+    setFromTokenAddress: (addr: string) => void;
+    /** Update the to-token address */
+    setToTokenAddress: (addr: string) => void;
+    /** From-token metadata (name, symbol, decimals, price, ...) */
+    fromToken: Token | null;
+    /** To-token metadata */
+    toToken: Token | null;
+    /** User's from-token balance */
+    fromBalance: Portfolio | null;
+    /** User's to-token balance */
+    toBalance: Portfolio | null;
+    /** Human-readable amount entered by the user */
+    amount: string | undefined;
+    /** Update the amount */
+    setAmount: (v: string | undefined) => void;
+    /** Set amount to half of the from-token balance */
+    setHalfAmount: () => void;
+    /** Set amount to the full from-token balance */
+    setMaxAmount: () => void;
+    /** Amount converted to smallest unit using token decimals */
+    amountInDecimals: string | undefined;
+    /** Amount converted to USD using token price */
+    amountInUsd: string | undefined;
+    /** Formatted output amount from the route (human-readable) */
+    outputAmount: string | undefined;
+    /** Output amount converted to USD using to-token price */
+    outputAmountInUsd: string | undefined;
+    /** Current swap route quote */
+    route: API.SwapRoute | undefined;
+    /** Whether a route is currently being fetched */
+    isRouting: boolean;
+    /** Route fetch error, if any */
+    routeError: Error | null;
+    /** Execute the swap (route -> sign -> send) */
+    swap: () => Promise<void>;
+    /** Whether a swap is currently in progress */
+    isSwapping: boolean;
+    /** Confirmation status of the most recent transaction */
+    txStatus: TxConfirmationStatus;
+    /** Whether initial data (tokens, balances) is still loading */
+    isLoading: boolean;
+}
+/** Props for {@link SwapWidget}. */
+interface SwapWidgetProps {
+    /** Target chain */
+    chain: Chain;
+    /** Initial from-token address */
+    from?: string;
+    /** Initial to-token address */
+    to?: string;
+    /** Called when the swap completes (success or failure) */
+    onComplete?: (result: {
+        success: boolean;
+        txHash?: string;
+    }) => void;
+    /** External style customization */
+    className?: string;
+}
+/** Props for {@link SwapUI}. */
+interface SwapUIProps {
+    /** From-token metadata */
+    fromToken: Token | null;
+    /** To-token metadata */
+    toToken: Token | null;
+    /** User's from-token balance */
+    fromBalance: Portfolio | null;
+    /** User's to-token balance */
+    toBalance: Portfolio | null;
+    /** Human-readable amount */
+    amount: string | undefined;
+    /** Amount in USD */
+    amountInUsd: string | undefined;
+    /** Amount change handler */
+    onAmountChange: (v: string | undefined) => void;
+    /** Set amount to half of the from-token balance */
+    onHalfAmount?: () => void;
+    /** Set amount to the full from-token balance */
+    onMaxAmount?: () => void;
+    /** Formatted output amount (human-readable) */
+    outputAmount: string | undefined;
+    /** Output amount in USD */
+    outputAmountInUsd: string | undefined;
+    /** From-token selection handler */
+    onFromTokenSelect: (addr: string) => void;
+    /** To-token selection handler */
+    onToTokenSelect: (addr: string) => void;
+    /** Current swap route quote */
+    route: API.SwapRoute | undefined;
+    /** Whether a route is being fetched */
+    isRouting: boolean;
+    /** Route error */
+    routeError: Error | null;
+    /** Open preview modal before swap */
+    onPreview: () => void;
+    /** Whether a swap is in progress */
+    isSwapping: boolean;
+    /** External style customization */
+    className?: string;
+}
+/** Props for {@link SwapPreviewModal}. */
+interface SwapPreviewModalProps {
+    /** Whether the modal is open */
+    isOpen: boolean;
+    /** Modal open/close change handler */
+    onOpenChange: (isOpen: boolean) => void;
+    /** From-token metadata */
+    fromToken: Token | null;
+    /** To-token metadata */
+    toToken: Token | null;
+    /** User's from-token balance */
+    fromBalance: Portfolio | null;
+    /** Input amount (human-readable) */
+    inputAmount: string | undefined;
+    /** Input amount in USD */
+    inputAmountInUsd: string | undefined;
+    /** Output amount (human-readable) */
+    outputAmount: string | undefined;
+    /** Output amount in USD */
+    outputAmountInUsd: string | undefined;
+    /** Current swap route */
+    route: API.SwapRoute | undefined;
+    /** Whether a route is being fetched */
+    isRouting: boolean;
+    /** Route error */
+    routeError: Error | null;
+    /** Confirm swap handler */
+    onConfirm: () => void;
+    /** Whether a swap is in progress */
+    isSwapping: boolean;
+}
+
+/**
+ * Script hook that encapsulates all data fetching and state management
+ * for the swap form.
+ *
+ * Pure TypeScript — no JSX, no UI imports.
+ */
+declare function useSwapScript(params: UseSwapScriptParams): UseSwapScriptResult;
+
+/**
+ * Swap widget — thin orchestration layer.
+ *
+ * Calls `useSwapScript` to fetch all data, renders `SwapUI` for the form
+ * and `SwapPreviewModal` for pre-swap confirmation.
+ *
+ * For custom UIs, use `useSwapScript` directly with your own presentation.
+ */
+declare function SwapWidget({ chain, from, to, onComplete, className, }: SwapWidgetProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Pure presentational component for the swap form.
+ *
+ * Receives all data and callbacks via props — no API calls, no subscriptions.
+ * Consumers can replace this component entirely while reusing `useSwapScript`.
+ */
+declare function SwapUI({ fromToken, toToken, fromBalance, toBalance, amount, amountInUsd, onAmountChange, onHalfAmount, onMaxAmount, outputAmount, outputAmountInUsd, onFromTokenSelect, onToTokenSelect, route, isRouting, routeError, onPreview, isSwapping, className, }: SwapUIProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Modal that previews swap details before confirmation.
+ *
+ * Pure presentational — all data and callbacks received via props.
+ * Shows from/to token cards, expandable route plan details,
+ * and a confirm button.
+ */
+declare function SwapPreviewModal({ isOpen, onOpenChange, fromToken, toToken, fromBalance, inputAmount, inputAmountInUsd, outputAmount, outputAmountInUsd, route, isRouting, routeError, onConfirm, isSwapping, }: SwapPreviewModalProps): react_jsx_runtime.JSX.Element;
+
 declare global {
     interface Window {
         __LIBERFI_VERSION__?: {
@@ -111,6 +324,6 @@ declare global {
         };
     }
 }
-declare const _default: "0.1.1";
+declare const _default: "0.1.2";
 
-export { type SwapInput, type SwapPhase, type SwapResult, type TxConfirmationStatus, type UseSwapOptions, type UseTxConfirmationOptions, useSwap, useTxConfirmation, _default as version };
+export { type SwapInput, type SwapPhase, SwapPreviewModal, type SwapPreviewModalProps, type SwapResult, SwapUI, type SwapUIProps, SwapWidget, type SwapWidgetProps, type TxConfirmationStatus, type UseSwapOptions, type UseSwapRoutePollingOptions, type UseSwapScriptParams, type UseSwapScriptResult, type UseTxConfirmationOptions, useSwap, useSwapRoutePolling, useSwapScript, useTxConfirmation, _default as version };