@liberfi.io/ui-trade 0.1.4 → 0.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -6,7 +6,8 @@ The package is organized in three layers:
6
6
 
7
7
  - **Hooks** (`useSwap`, `useSwapRoutePolling`, `useTxConfirmation`) — pure-logic building blocks with no UI side-effects, designed for IoC.
8
8
  - **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.
9
- - **Instant Trade** (`InstantTradeWidget` / `InstantTradeProvider` / `PresetFormWidget`) — a configurable quick-trade form with buy/sell tabs, preset management, customizable quick-amount buttons, and trade settings (slippage, priority fee, tip fee, anti-MEV).
9
+ - **Instant Trade** (`InstantTradeWidget` / `InstantTradeProvider` / `MultiChainPresetFormWidget` / `PresetFormWidget`) — a configurable quick-trade form with buy/sell tabs, preset management, customizable quick-amount buttons, and trade settings (slippage, priority fee, tip fee, anti-MEV).
10
+ - **State atoms** (`presetAtomFamily` / `presetKey`) — Jotai-based persistent state for trade presets, storage-backend agnostic via `atomWithStorage`.
10
11
 
11
12
  ## Design Philosophy
12
13
 
@@ -26,8 +27,10 @@ Peer dependencies the consumer must provide:
26
27
 
27
28
  - `react` (>=18)
28
29
  - `react-dom` (>=18)
30
+ - `jotai` (>=2.15.1) — used for persistent preset state via `atomWithStorage`
29
31
  - `@liberfi.io/react` (provides `DexClientProvider` and `useDexClient`)
30
32
  - `@liberfi.io/ui` (provides UI components: `Button`, `Input`, `Modal`, `Avatar`, etc.)
33
+ - `@liberfi.io/ui-chain-select` (provides `ChainSelectMobileUI` for `MultiChainPresetFormWidget`)
31
34
  - `@liberfi.io/wallet-connector` (provides `WalletAdapter` type)
32
35
 
33
36
  ## API Reference
@@ -537,21 +540,78 @@ Compact amount input with lightning icon, native token avatar, and 3 preset butt
537
540
 
538
541
  Trade execution button that reads state from `InstantTradeProvider`. Handles wallet resolution, amount conversion, and swap execution.
539
542
 
543
+ #### `MultiChainPresetFormWidget`
544
+
545
+ Self-contained multi-chain preset editor. Combines chain switching (`ChainSelectMobileUI`), preset index tabs (P1/P2/P3), and a persisted `PresetFormWidget`.
546
+
547
+ ```tsx
548
+ <MultiChainPresetFormWidget
549
+ chains={[Chain.SOLANA, Chain.ETHEREUM, Chain.BINANCE]}
550
+ onChange={(chain, idx, value) => console.log(chain, idx, value)}
551
+ />
552
+ ```
553
+
554
+ **Props (`MultiChainPresetFormWidgetProps`):**
555
+
556
+ | Name | Type | Description |
557
+ | ------------------- | ----------------------------------------------------------------------- | ---------------------------------------------------- |
558
+ | `chains` | `Chain[]` | Available chains to switch between. |
559
+ | `defaultChain?` | `Chain` | Initial chain. Defaults to first item in `chains`. |
560
+ | `storageKeyPrefix?` | `string` | Storage key prefix. Defaults to `"liberfi."`. |
561
+ | `onChange?` | `(chain: Chain, presetIndex: number, value: TradePresetValues) => void` | Notification callback with chain and preset context. |
562
+ | `className?` | `string` | External style customization. |
563
+
540
564
  #### `PresetFormWidget`
541
565
 
542
- Standalone widget for editing trade preset values (slippage, priority fee, tip fee, auto fee, anti-MEV, custom RPC).
566
+ Atom-backed widget for editing a single trade preset (slippage, priority fee, tip fee, auto fee, anti-MEV, custom RPC). State is persisted via `atomWithStorage` (keyed by prefix + chain + preset index).
567
+
568
+ For a pure presentational form without persistence, use `PresetFormUI` directly.
543
569
 
544
570
  ```tsx
545
571
  <PresetFormWidget
546
572
  chain={Chain.SOLANA}
547
- value={presetValues}
548
- onChange={setPresetValues}
573
+ presetIndex={0}
574
+ storageKeyPrefix="myapp."
575
+ onChange={(next) => console.log("Preset changed:", next)}
549
576
  />
550
577
  ```
551
578
 
579
+ **Props (`PresetFormWidgetProps`):**
580
+
581
+ | Name | Type | Description |
582
+ | ------------------- | ------------------------------------ | ---------------------------------------------------- |
583
+ | `chain` | `Chain` | Target chain — determines default values and fields. |
584
+ | `presetIndex?` | `number` | Preset index (0, 1, or 2). Defaults to 0. |
585
+ | `storageKeyPrefix?` | `string` | Storage key prefix. Defaults to `"liberfi."`. |
586
+ | `onChange?` | `(value: TradePresetValues) => void` | Notification callback (does not control state). |
587
+ | `className?` | `string` | External style customization. |
588
+
552
589
  #### `PresetFormUI`
553
590
 
554
- Pure presentational preset form. Accepts value/onChange props directly, with optional `nativeSymbol` and `nativeDecimals`.
591
+ Pure presentational preset form. Accepts value/onChange props directly. No persistence the caller owns the state.
592
+
593
+ ### State Atoms
594
+
595
+ #### `presetAtomFamily`
596
+
597
+ Atom family for trade preset values, persisted via `atomWithStorage`. Each atom is keyed by `"{chain}:{index}"` (use `presetKey` to build the key). Default values are chain-specific.
598
+
599
+ ```typescript
600
+ import { presetAtomFamily, presetKey } from "@liberfi.io/ui-trade";
601
+
602
+ const atom = presetAtomFamily(presetKey(Chain.SOLANA, 0));
603
+ ```
604
+
605
+ #### `presetKey(chain, index)`
606
+
607
+ Constructs an atomFamily key string from chain and preset index.
608
+
609
+ | Name | Type | Description |
610
+ | ------- | -------- | -------------------------- |
611
+ | `chain` | `Chain` | Target chain. |
612
+ | `index` | `number` | Preset index (0, 1, or 2). |
613
+
614
+ **Returns:** `string` — key for use with `presetAtomFamily`.
555
615
 
556
616
  ### Instant Trade Types
557
617
 
@@ -588,7 +648,7 @@ interface SellSettings {
588
648
  }
589
649
  ```
590
650
 
591
- #### `DEFAULT_TRADE_PRESET`
651
+ #### `DEFAULT_SOL_TRADE_PRESET`
592
652
 
593
653
  Default preset values: slippage=20, priorityFee=0.001, tipFee=0.001, autoFee=false, maxAutoFee=0.1, antiMev="off".
594
654
 
@@ -647,26 +707,37 @@ function TokenHeader({ tokenAddress }: { tokenAddress: string }) {
647
707
  }
648
708
  ```
649
709
 
650
- ### Preset Settings Editor
710
+ ### Multi-Chain Preset Settings Editor
651
711
 
652
712
  ```tsx
653
- import { useState } from "react";
654
713
  import { Chain } from "@liberfi.io/types";
655
- import { PresetFormWidget, DEFAULT_TRADE_PRESET } from "@liberfi.io/ui-trade";
714
+ import { MultiChainPresetFormWidget } from "@liberfi.io/ui-trade";
656
715
 
657
716
  function TradeSettings() {
658
- const [preset, setPreset] = useState(DEFAULT_TRADE_PRESET);
659
-
660
717
  return (
661
- <PresetFormWidget
662
- chain={Chain.SOLANA}
663
- value={preset}
664
- onChange={setPreset}
718
+ <MultiChainPresetFormWidget
719
+ chains={[Chain.SOLANA, Chain.ETHEREUM, Chain.BINANCE]}
720
+ storageKeyPrefix="myapp."
721
+ onChange={(chain, idx, value) =>
722
+ console.log(`chain=${chain}, preset=${idx}`, value)
723
+ }
665
724
  />
666
725
  );
667
726
  }
668
727
  ```
669
728
 
729
+ ### Reading Preset Values from Atoms
730
+
731
+ ```tsx
732
+ import { useAtom } from "jotai";
733
+ import { Chain } from "@liberfi.io/types";
734
+ import { presetAtomFamily, presetKey } from "@liberfi.io/ui-trade";
735
+
736
+ function useCurrentPreset(chain: Chain, index: number) {
737
+ return useAtom(presetAtomFamily(presetKey(chain, index)));
738
+ }
739
+ ```
740
+
670
741
  ## Future Improvements
671
742
 
672
743
  - Add `useSwapQuote` hook for fetching quotes without executing (read-only route info).
package/dist/index.d.mts CHANGED
@@ -4,6 +4,9 @@ import { WalletAdapter } from '@liberfi.io/wallet-connector';
4
4
  import * as react_jsx_runtime from 'react/jsx-runtime';
5
5
  import { ReactNode } from 'react';
6
6
  import { PredefinedToken } from '@liberfi.io/utils';
7
+ import * as jotai_family from 'jotai-family';
8
+ import * as jotai from 'jotai';
9
+ import * as jotai_utils from 'jotai/utils';
7
10
 
8
11
  /**
9
12
  * Input parameters for the `swap()` function returned by {@link useSwap}.
@@ -67,27 +70,29 @@ interface UseSwapRoutePollingOptions {
67
70
  interface TradePresetValues {
68
71
  /** Slippage tolerance, 0-100 (percent). `null` = use default. */
69
72
  slippage: number | null;
70
- /** Priority fee in native token units. `null` = use default. */
73
+ /** Priority fee in SOL. `null` = use default. (Solana only) */
71
74
  priorityFee: number | null;
72
- /** Tip fee in native token units. `null` = use default. */
73
- tipFee: number | null;
74
- /** Whether automatic fee estimation is enabled. */
75
+ /** Whether automatic fee estimation is enabled. (Solana only) */
75
76
  autoFee: boolean;
76
- /** Maximum fee cap when auto-fee is on (native token units). */
77
+ /** Maximum fee cap when auto-fee is on, in SOL. (Solana only) */
77
78
  maxAutoFee: number | null;
79
+ /** Gas fee in Gwei. `null` = use default. (EVM only) */
80
+ gasFee: number | null;
81
+ /** Tip/bribe fee in native token units. `null` = not applicable. (Solana, BSC) */
82
+ tipFee: number | null;
78
83
  /** Anti-MEV protection level. */
79
84
  antiMev: "off" | "reduced" | "secure";
80
85
  /** Custom RPC endpoint URL. `null` = use default. */
81
86
  customRPC: string | null;
82
87
  }
83
88
  /** Default preset values matching Solana-typical settings. */
84
- declare const DEFAULT_TRADE_PRESET: TradePresetValues;
89
+ declare const DEFAULT_SOL_TRADE_PRESET: TradePresetValues;
85
90
  /** Default preset values for EVM chains (gas fee in Gwei). */
86
91
  declare const DEFAULT_EVM_TRADE_PRESET: TradePresetValues;
87
92
  /** Default preset values for BSC (gas in Gwei + tip in BNB). */
88
93
  declare const DEFAULT_BSC_TRADE_PRESET: TradePresetValues;
89
- /** Default quick-buy amounts (native token units). */
90
- declare const DEFAULT_BUY_AMOUNTS: number[];
94
+ /** Returns default quick-buy amounts for the given token symbol. */
95
+ declare function getDefaultBuyAmounts(symbol: string): number[];
91
96
  /** Default quick-sell percentages. */
92
97
  declare const DEFAULT_SELL_PERCENTAGES: number[];
93
98
  /** Confirmation status of a tracked transaction. */
@@ -418,8 +423,6 @@ interface InstantTradeUIProps {
418
423
  onCustomAmountsEdit: (amounts: (number | null)[]) => void;
419
424
  onCustomPercentagesEdit: (pcts: (number | null)[]) => void;
420
425
  tokenSymbol?: string;
421
- nativeSymbol?: string;
422
- nativeDecimals?: number;
423
426
  nativeBalance?: string;
424
427
  tokenBalance?: string;
425
428
  amountConversion?: string;
@@ -490,19 +493,46 @@ interface InstantTradeButtonProps {
490
493
  interface PresetFormUIProps {
491
494
  value: TradePresetValues;
492
495
  onChange: (value: TradePresetValues) => void;
493
- /** Target chain — determines which fields are shown (e.g. anti-MEV for Solana only). */
496
+ /** Target chain — determines which fields are shown and native token info. */
494
497
  chain: Chain;
495
- nativeSymbol?: string;
496
- nativeDecimals?: number;
498
+ disableAnimation?: boolean;
497
499
  className?: string;
498
500
  }
499
501
  /** Props for {@link PresetFormWidget}. */
500
502
  interface PresetFormWidgetProps {
501
- value: TradePresetValues;
502
- onChange: (value: TradePresetValues) => void;
503
+ /** Target chain — determines default values and visible fields. */
504
+ chain: Chain;
505
+ /** Preset index (0, 1, or 2). Defaults to 0. */
506
+ presetIndex?: number;
507
+ /** Storage key prefix. Defaults to `"liberfi."`. */
508
+ storageKeyPrefix?: string;
509
+ /** Notification callback when value changes (does not control state). */
510
+ onChange?: (direction: "buy" | "sell", value: TradePresetValues) => void;
511
+ disableAnimation?: boolean;
512
+ className?: string;
513
+ }
514
+ /** Props for {@link MultiPresetFormWidget}. */
515
+ interface MultiPresetFormWidgetProps {
516
+ /** Target chain — determines default values and visible fields. */
503
517
  chain: Chain;
518
+ /** Storage key prefix. Defaults to `"liberfi."`. */
519
+ storageKeyPrefix?: string;
520
+ /** Notification callback when value changes (does not control state). */
521
+ onChange?: (presetIndex: number, direction: "buy" | "sell", value: TradePresetValues) => void;
522
+ disableAnimation?: boolean;
504
523
  className?: string;
505
524
  }
525
+ /** Params passed when opening the preset-form modal via `useAsyncModal`. */
526
+ interface PresetFormModalParams {
527
+ /** Available chains to switch between. */
528
+ chains: Chain[];
529
+ /** Default chain when no param is passed on open. Defaults to first item in `chains`. */
530
+ defaultChain?: Chain;
531
+ /** Storage key prefix. Defaults to `"liberfi."`. */
532
+ storageKeyPrefix?: string;
533
+ /** Notification callback when any preset value changes. */
534
+ onChange?: (chain: Chain, presetIndex: number, direction: "buy" | "sell", value: TradePresetValues) => void;
535
+ }
506
536
 
507
537
  /** Buy-side trade settings. */
508
538
  interface BuySettings {
@@ -556,12 +586,35 @@ declare function useInstantTradeScript(params: UseInstantTradeScriptParams): Use
556
586
  declare function InstantTradeWidget({ chain, tokenAddress, onSwapSubmitted, onSwapError, settings, onSettingsChange, headerExtra, className, }: InstantTradeWidgetProps): react_jsx_runtime.JSX.Element;
557
587
 
558
588
  /**
559
- * Preset form widget — thin orchestration layer.
589
+ * Preset form widget — atom-backed orchestration layer with Buy/Sell tabs.
590
+ *
591
+ * State is persisted via `atomWithStorage` (keyed by prefix + chain + direction + preset index).
592
+ * Pass `storageKeyPrefix` to customize the storage key prefix.
593
+ *
594
+ * For a pure presentational form without persistence, use {@link PresetFormUI}.
595
+ */
596
+ declare function PresetFormWidget({ chain, presetIndex, storageKeyPrefix, onChange, disableAnimation, className, }: PresetFormWidgetProps): react_jsx_runtime.JSX.Element;
597
+
598
+ /**
599
+ * Multi preset form widget.
560
600
  *
561
- * Manages local state initialized from `value`, resolves chain-specific
562
- * native token info, and syncs changes upward via `onChange`.
601
+ * Combines preset index tabs,
602
+ * and a persisted {@link PresetFormWidget} into a single self-contained editor.
563
603
  */
564
- declare function PresetFormWidget({ value, onChange, chain, className, }: PresetFormWidgetProps): react_jsx_runtime.JSX.Element;
604
+ declare function MultiPresetFormWidget({ chain, storageKeyPrefix, onChange, disableAnimation, className, }: MultiPresetFormWidgetProps): react_jsx_runtime.JSX.Element;
605
+
606
+ /**
607
+ * Async-modal wrapper for multi-chain preset editing.
608
+ *
609
+ * Place this component once in the tree (e.g. layout). Open it from anywhere
610
+ * via `useAsyncModal("preset").onOpen({ params: { chains, defaultChain, storageKeyPrefix, onChange } })`.
611
+ *
612
+ * Header: title + chain switcher.
613
+ * Body: multi-preset form.
614
+ */
615
+ declare function PresetFormModal({ id }: {
616
+ id?: string;
617
+ }): react_jsx_runtime.JSX.Element;
565
618
 
566
619
  /**
567
620
  * Pure presentational component for the instant trade form.
@@ -569,7 +622,7 @@ declare function PresetFormWidget({ value, onChange, chain, className, }: Preset
569
622
  * Receives all data and callbacks via props — no API calls, no context access.
570
623
  * Consumers can replace this component while reusing `useInstantTradeScript`.
571
624
  */
572
- declare function InstantTradeUI({ chain, direction, onDirectionChange, amount, onAmountChange, customAmounts, customPercentages, onQuickAmountClick, onQuickPercentageClick, onCustomAmountsEdit, onCustomPercentagesEdit, tokenSymbol, nativeSymbol, nativeDecimals, nativeBalance, tokenBalance, amountConversion, preset, onPresetChange, presetValues, onPresetSettingsChange, showSettings, onPresetClick, submitText, isDisabled, isLoading, onSubmit, className, headerExtra, }: InstantTradeUIProps): react_jsx_runtime.JSX.Element;
625
+ declare function InstantTradeUI({ chain, direction, onDirectionChange, amount, onAmountChange, customAmounts, customPercentages, onQuickAmountClick, onQuickPercentageClick, onCustomAmountsEdit, onCustomPercentagesEdit, tokenSymbol, nativeBalance, tokenBalance, amountConversion, preset, onPresetChange, presetValues, onPresetSettingsChange, showSettings, onPresetClick, submitText, isDisabled, isLoading, onSubmit, className, headerExtra, }: InstantTradeUIProps): react_jsx_runtime.JSX.Element;
573
626
 
574
627
  /**
575
628
  * Pure presentational preset-settings form.
@@ -582,7 +635,7 @@ declare function InstantTradeUI({ chain, direction, onDirectionChange, amount, o
582
635
  * - Ethereum: gas fee (Gwei) only
583
636
  * - BSC: gas fee (Gwei) + tip fee (BNB)
584
637
  */
585
- declare function PresetFormUI({ value, onChange, chain, nativeSymbol, nativeDecimals, className, }: PresetFormUIProps): react_jsx_runtime.JSX.Element;
638
+ declare function PresetFormUI({ value, onChange, chain, disableAnimation, className, }: PresetFormUIProps): react_jsx_runtime.JSX.Element;
586
639
 
587
640
  /**
588
641
  * Compact amount input with preset selector buttons.
@@ -601,9 +654,12 @@ declare function InstantTradeAmountInput({ amount, onAmountChange, preset, onPre
601
654
  declare function InstantTradeButton({ className, children, }: InstantTradeButtonProps): react_jsx_runtime.JSX.Element;
602
655
 
603
656
  type AntiMevOption = "off" | "reduced" | "secure";
657
+ type FeeType = "priorityFee" | "gasFee";
604
658
  interface ChainPresetFeatures {
605
- /** Label for the priority/gas fee field */
606
- feeLabel: string;
659
+ /** Native token symbol (e.g. "SOL", "ETH", "BNB") */
660
+ nativeSymbol: string;
661
+ /** Semantic fee type — UI maps this to a translated label via i18n key. */
662
+ feeType: FeeType;
607
663
  /** Unit displayed for the fee input (e.g. "SOL", "Gwei") */
608
664
  feeUnit: string;
609
665
  /** Decimal places for the fee input */
@@ -614,6 +670,10 @@ interface ChainPresetFeatures {
614
670
  tipFeeUnit: string;
615
671
  /** Decimal places for the tip fee input */
616
672
  tipFeeDecimals: number;
673
+ /** Whether this chain supports automatic fee estimation */
674
+ showAutoFee: boolean;
675
+ /** Whether this chain supports custom RPC endpoint */
676
+ showCustomRPC: boolean;
617
677
  /**
618
678
  * Available anti-MEV protection levels for this chain.
619
679
  * - Solana: ["off", "reduced", "secure"]
@@ -629,11 +689,28 @@ interface ChainPresetFeatures {
629
689
  * - BSC: gas fee (Gwei) + tip fee (BNB)
630
690
  * - Other EVM: gas fee (Gwei), same as Ethereum by default
631
691
  */
632
- declare function getChainPresetFeatures(chain: Chain, nativeSymbol?: string): ChainPresetFeatures;
633
- declare function isSolanaChain(chain: Chain): boolean;
692
+ declare function getChainPresetFeatures(chain: Chain): ChainPresetFeatures;
634
693
  /** Returns chain-appropriate default preset values. */
635
694
  declare function getDefaultPresetForChain(chain: Chain): TradePresetValues;
636
695
 
696
+ type PresetDirection = "buy" | "sell";
697
+ /**
698
+ * Construct an atomFamily key from chain, direction, preset index and prefix.
699
+ *
700
+ * @param chain - Target chain.
701
+ * @param direction - Trade direction: `"buy"` or `"sell"`.
702
+ * @param index - Preset index (0, 1, or 2).
703
+ * @param prefix - Storage key prefix. Defaults to `"liberfi."`.
704
+ */
705
+ declare function presetKey(chain: Chain, direction: PresetDirection, index: number, prefix?: string): string;
706
+ /**
707
+ * Atom family for trade preset values, persisted via `atomWithStorage`.
708
+ *
709
+ * Each atom is keyed by a string built with {@link presetKey}.
710
+ * Default values are chain-specific via `getDefaultPresetForChain`.
711
+ */
712
+ declare const presetAtomFamily: jotai_family.AtomFamily<string, jotai.WritableAtom<TradePresetValues, [TradePresetValues | typeof jotai_utils.RESET | ((prev: TradePresetValues) => TradePresetValues | typeof jotai_utils.RESET)], void>>;
713
+
637
714
  declare global {
638
715
  interface Window {
639
716
  __LIBERFI_VERSION__?: {
@@ -641,6 +718,6 @@ declare global {
641
718
  };
642
719
  }
643
720
  }
644
- declare const _default: "0.1.4";
721
+ declare const _default: "0.1.5";
645
722
 
646
- export { type AntiMevOption, type BuySettings, type ChainPresetFeatures, DEFAULT_BSC_TRADE_PRESET, DEFAULT_BUY_AMOUNTS, DEFAULT_EVM_TRADE_PRESET, DEFAULT_INSTANT_TRADE_SETTINGS, DEFAULT_SELL_PERCENTAGES, DEFAULT_TRADE_PRESET, InstantTradeAmountInput, type InstantTradeAmountInputProps, InstantTradeButton, type InstantTradeButtonProps, type InstantTradeContextValue, InstantTradeProvider, type InstantTradeProviderProps, type InstantTradeSettings, InstantTradeUI, type InstantTradeUIProps, InstantTradeWidget, type InstantTradeWidgetProps, PresetFormUI, type PresetFormUIProps, PresetFormWidget, type PresetFormWidgetProps, type SellSettings, type SwapInput, type SwapPhase, SwapPreviewModal, type SwapPreviewModalProps, type SwapResult, SwapUI, type SwapUIProps, SwapWidget, type SwapWidgetProps, type TradePresetValues, type TxConfirmationStatus, type UseInstantTradeScriptParams, type UseInstantTradeScriptResult, type UseSwapOptions, type UseSwapRoutePollingOptions, type UseSwapScriptParams, type UseSwapScriptResult, type UseTxConfirmationOptions, getChainPresetFeatures, getDefaultPresetForChain, isSolanaChain, useInstantTrade, useInstantTradeScript, useSwap, useSwapRoutePolling, useSwapScript, useTxConfirmation, _default as version };
723
+ export { type AntiMevOption, type BuySettings, type ChainPresetFeatures, DEFAULT_BSC_TRADE_PRESET, DEFAULT_EVM_TRADE_PRESET, DEFAULT_INSTANT_TRADE_SETTINGS, DEFAULT_SELL_PERCENTAGES, DEFAULT_SOL_TRADE_PRESET, type FeeType, InstantTradeAmountInput, type InstantTradeAmountInputProps, InstantTradeButton, type InstantTradeButtonProps, type InstantTradeContextValue, InstantTradeProvider, type InstantTradeProviderProps, type InstantTradeSettings, InstantTradeUI, type InstantTradeUIProps, InstantTradeWidget, type InstantTradeWidgetProps, MultiPresetFormWidget, type MultiPresetFormWidgetProps, type PresetDirection, PresetFormModal, type PresetFormModalParams, PresetFormUI, type PresetFormUIProps, PresetFormWidget, type PresetFormWidgetProps, type SellSettings, type SwapInput, type SwapPhase, SwapPreviewModal, type SwapPreviewModalProps, type SwapResult, SwapUI, type SwapUIProps, SwapWidget, type SwapWidgetProps, type TradePresetValues, type TxConfirmationStatus, type UseInstantTradeScriptParams, type UseInstantTradeScriptResult, type UseSwapOptions, type UseSwapRoutePollingOptions, type UseSwapScriptParams, type UseSwapScriptResult, type UseTxConfirmationOptions, getChainPresetFeatures, getDefaultBuyAmounts, getDefaultPresetForChain, presetAtomFamily, presetKey, useInstantTrade, useInstantTradeScript, useSwap, useSwapRoutePolling, useSwapScript, useTxConfirmation, _default as version };
package/dist/index.d.ts CHANGED
@@ -4,6 +4,9 @@ import { WalletAdapter } from '@liberfi.io/wallet-connector';
4
4
  import * as react_jsx_runtime from 'react/jsx-runtime';
5
5
  import { ReactNode } from 'react';
6
6
  import { PredefinedToken } from '@liberfi.io/utils';
7
+ import * as jotai_family from 'jotai-family';
8
+ import * as jotai from 'jotai';
9
+ import * as jotai_utils from 'jotai/utils';
7
10
 
8
11
  /**
9
12
  * Input parameters for the `swap()` function returned by {@link useSwap}.
@@ -67,27 +70,29 @@ interface UseSwapRoutePollingOptions {
67
70
  interface TradePresetValues {
68
71
  /** Slippage tolerance, 0-100 (percent). `null` = use default. */
69
72
  slippage: number | null;
70
- /** Priority fee in native token units. `null` = use default. */
73
+ /** Priority fee in SOL. `null` = use default. (Solana only) */
71
74
  priorityFee: number | null;
72
- /** Tip fee in native token units. `null` = use default. */
73
- tipFee: number | null;
74
- /** Whether automatic fee estimation is enabled. */
75
+ /** Whether automatic fee estimation is enabled. (Solana only) */
75
76
  autoFee: boolean;
76
- /** Maximum fee cap when auto-fee is on (native token units). */
77
+ /** Maximum fee cap when auto-fee is on, in SOL. (Solana only) */
77
78
  maxAutoFee: number | null;
79
+ /** Gas fee in Gwei. `null` = use default. (EVM only) */
80
+ gasFee: number | null;
81
+ /** Tip/bribe fee in native token units. `null` = not applicable. (Solana, BSC) */
82
+ tipFee: number | null;
78
83
  /** Anti-MEV protection level. */
79
84
  antiMev: "off" | "reduced" | "secure";
80
85
  /** Custom RPC endpoint URL. `null` = use default. */
81
86
  customRPC: string | null;
82
87
  }
83
88
  /** Default preset values matching Solana-typical settings. */
84
- declare const DEFAULT_TRADE_PRESET: TradePresetValues;
89
+ declare const DEFAULT_SOL_TRADE_PRESET: TradePresetValues;
85
90
  /** Default preset values for EVM chains (gas fee in Gwei). */
86
91
  declare const DEFAULT_EVM_TRADE_PRESET: TradePresetValues;
87
92
  /** Default preset values for BSC (gas in Gwei + tip in BNB). */
88
93
  declare const DEFAULT_BSC_TRADE_PRESET: TradePresetValues;
89
- /** Default quick-buy amounts (native token units). */
90
- declare const DEFAULT_BUY_AMOUNTS: number[];
94
+ /** Returns default quick-buy amounts for the given token symbol. */
95
+ declare function getDefaultBuyAmounts(symbol: string): number[];
91
96
  /** Default quick-sell percentages. */
92
97
  declare const DEFAULT_SELL_PERCENTAGES: number[];
93
98
  /** Confirmation status of a tracked transaction. */
@@ -418,8 +423,6 @@ interface InstantTradeUIProps {
418
423
  onCustomAmountsEdit: (amounts: (number | null)[]) => void;
419
424
  onCustomPercentagesEdit: (pcts: (number | null)[]) => void;
420
425
  tokenSymbol?: string;
421
- nativeSymbol?: string;
422
- nativeDecimals?: number;
423
426
  nativeBalance?: string;
424
427
  tokenBalance?: string;
425
428
  amountConversion?: string;
@@ -490,19 +493,46 @@ interface InstantTradeButtonProps {
490
493
  interface PresetFormUIProps {
491
494
  value: TradePresetValues;
492
495
  onChange: (value: TradePresetValues) => void;
493
- /** Target chain — determines which fields are shown (e.g. anti-MEV for Solana only). */
496
+ /** Target chain — determines which fields are shown and native token info. */
494
497
  chain: Chain;
495
- nativeSymbol?: string;
496
- nativeDecimals?: number;
498
+ disableAnimation?: boolean;
497
499
  className?: string;
498
500
  }
499
501
  /** Props for {@link PresetFormWidget}. */
500
502
  interface PresetFormWidgetProps {
501
- value: TradePresetValues;
502
- onChange: (value: TradePresetValues) => void;
503
+ /** Target chain — determines default values and visible fields. */
504
+ chain: Chain;
505
+ /** Preset index (0, 1, or 2). Defaults to 0. */
506
+ presetIndex?: number;
507
+ /** Storage key prefix. Defaults to `"liberfi."`. */
508
+ storageKeyPrefix?: string;
509
+ /** Notification callback when value changes (does not control state). */
510
+ onChange?: (direction: "buy" | "sell", value: TradePresetValues) => void;
511
+ disableAnimation?: boolean;
512
+ className?: string;
513
+ }
514
+ /** Props for {@link MultiPresetFormWidget}. */
515
+ interface MultiPresetFormWidgetProps {
516
+ /** Target chain — determines default values and visible fields. */
503
517
  chain: Chain;
518
+ /** Storage key prefix. Defaults to `"liberfi."`. */
519
+ storageKeyPrefix?: string;
520
+ /** Notification callback when value changes (does not control state). */
521
+ onChange?: (presetIndex: number, direction: "buy" | "sell", value: TradePresetValues) => void;
522
+ disableAnimation?: boolean;
504
523
  className?: string;
505
524
  }
525
+ /** Params passed when opening the preset-form modal via `useAsyncModal`. */
526
+ interface PresetFormModalParams {
527
+ /** Available chains to switch between. */
528
+ chains: Chain[];
529
+ /** Default chain when no param is passed on open. Defaults to first item in `chains`. */
530
+ defaultChain?: Chain;
531
+ /** Storage key prefix. Defaults to `"liberfi."`. */
532
+ storageKeyPrefix?: string;
533
+ /** Notification callback when any preset value changes. */
534
+ onChange?: (chain: Chain, presetIndex: number, direction: "buy" | "sell", value: TradePresetValues) => void;
535
+ }
506
536
 
507
537
  /** Buy-side trade settings. */
508
538
  interface BuySettings {
@@ -556,12 +586,35 @@ declare function useInstantTradeScript(params: UseInstantTradeScriptParams): Use
556
586
  declare function InstantTradeWidget({ chain, tokenAddress, onSwapSubmitted, onSwapError, settings, onSettingsChange, headerExtra, className, }: InstantTradeWidgetProps): react_jsx_runtime.JSX.Element;
557
587
 
558
588
  /**
559
- * Preset form widget — thin orchestration layer.
589
+ * Preset form widget — atom-backed orchestration layer with Buy/Sell tabs.
590
+ *
591
+ * State is persisted via `atomWithStorage` (keyed by prefix + chain + direction + preset index).
592
+ * Pass `storageKeyPrefix` to customize the storage key prefix.
593
+ *
594
+ * For a pure presentational form without persistence, use {@link PresetFormUI}.
595
+ */
596
+ declare function PresetFormWidget({ chain, presetIndex, storageKeyPrefix, onChange, disableAnimation, className, }: PresetFormWidgetProps): react_jsx_runtime.JSX.Element;
597
+
598
+ /**
599
+ * Multi preset form widget.
560
600
  *
561
- * Manages local state initialized from `value`, resolves chain-specific
562
- * native token info, and syncs changes upward via `onChange`.
601
+ * Combines preset index tabs,
602
+ * and a persisted {@link PresetFormWidget} into a single self-contained editor.
563
603
  */
564
- declare function PresetFormWidget({ value, onChange, chain, className, }: PresetFormWidgetProps): react_jsx_runtime.JSX.Element;
604
+ declare function MultiPresetFormWidget({ chain, storageKeyPrefix, onChange, disableAnimation, className, }: MultiPresetFormWidgetProps): react_jsx_runtime.JSX.Element;
605
+
606
+ /**
607
+ * Async-modal wrapper for multi-chain preset editing.
608
+ *
609
+ * Place this component once in the tree (e.g. layout). Open it from anywhere
610
+ * via `useAsyncModal("preset").onOpen({ params: { chains, defaultChain, storageKeyPrefix, onChange } })`.
611
+ *
612
+ * Header: title + chain switcher.
613
+ * Body: multi-preset form.
614
+ */
615
+ declare function PresetFormModal({ id }: {
616
+ id?: string;
617
+ }): react_jsx_runtime.JSX.Element;
565
618
 
566
619
  /**
567
620
  * Pure presentational component for the instant trade form.
@@ -569,7 +622,7 @@ declare function PresetFormWidget({ value, onChange, chain, className, }: Preset
569
622
  * Receives all data and callbacks via props — no API calls, no context access.
570
623
  * Consumers can replace this component while reusing `useInstantTradeScript`.
571
624
  */
572
- declare function InstantTradeUI({ chain, direction, onDirectionChange, amount, onAmountChange, customAmounts, customPercentages, onQuickAmountClick, onQuickPercentageClick, onCustomAmountsEdit, onCustomPercentagesEdit, tokenSymbol, nativeSymbol, nativeDecimals, nativeBalance, tokenBalance, amountConversion, preset, onPresetChange, presetValues, onPresetSettingsChange, showSettings, onPresetClick, submitText, isDisabled, isLoading, onSubmit, className, headerExtra, }: InstantTradeUIProps): react_jsx_runtime.JSX.Element;
625
+ declare function InstantTradeUI({ chain, direction, onDirectionChange, amount, onAmountChange, customAmounts, customPercentages, onQuickAmountClick, onQuickPercentageClick, onCustomAmountsEdit, onCustomPercentagesEdit, tokenSymbol, nativeBalance, tokenBalance, amountConversion, preset, onPresetChange, presetValues, onPresetSettingsChange, showSettings, onPresetClick, submitText, isDisabled, isLoading, onSubmit, className, headerExtra, }: InstantTradeUIProps): react_jsx_runtime.JSX.Element;
573
626
 
574
627
  /**
575
628
  * Pure presentational preset-settings form.
@@ -582,7 +635,7 @@ declare function InstantTradeUI({ chain, direction, onDirectionChange, amount, o
582
635
  * - Ethereum: gas fee (Gwei) only
583
636
  * - BSC: gas fee (Gwei) + tip fee (BNB)
584
637
  */
585
- declare function PresetFormUI({ value, onChange, chain, nativeSymbol, nativeDecimals, className, }: PresetFormUIProps): react_jsx_runtime.JSX.Element;
638
+ declare function PresetFormUI({ value, onChange, chain, disableAnimation, className, }: PresetFormUIProps): react_jsx_runtime.JSX.Element;
586
639
 
587
640
  /**
588
641
  * Compact amount input with preset selector buttons.
@@ -601,9 +654,12 @@ declare function InstantTradeAmountInput({ amount, onAmountChange, preset, onPre
601
654
  declare function InstantTradeButton({ className, children, }: InstantTradeButtonProps): react_jsx_runtime.JSX.Element;
602
655
 
603
656
  type AntiMevOption = "off" | "reduced" | "secure";
657
+ type FeeType = "priorityFee" | "gasFee";
604
658
  interface ChainPresetFeatures {
605
- /** Label for the priority/gas fee field */
606
- feeLabel: string;
659
+ /** Native token symbol (e.g. "SOL", "ETH", "BNB") */
660
+ nativeSymbol: string;
661
+ /** Semantic fee type — UI maps this to a translated label via i18n key. */
662
+ feeType: FeeType;
607
663
  /** Unit displayed for the fee input (e.g. "SOL", "Gwei") */
608
664
  feeUnit: string;
609
665
  /** Decimal places for the fee input */
@@ -614,6 +670,10 @@ interface ChainPresetFeatures {
614
670
  tipFeeUnit: string;
615
671
  /** Decimal places for the tip fee input */
616
672
  tipFeeDecimals: number;
673
+ /** Whether this chain supports automatic fee estimation */
674
+ showAutoFee: boolean;
675
+ /** Whether this chain supports custom RPC endpoint */
676
+ showCustomRPC: boolean;
617
677
  /**
618
678
  * Available anti-MEV protection levels for this chain.
619
679
  * - Solana: ["off", "reduced", "secure"]
@@ -629,11 +689,28 @@ interface ChainPresetFeatures {
629
689
  * - BSC: gas fee (Gwei) + tip fee (BNB)
630
690
  * - Other EVM: gas fee (Gwei), same as Ethereum by default
631
691
  */
632
- declare function getChainPresetFeatures(chain: Chain, nativeSymbol?: string): ChainPresetFeatures;
633
- declare function isSolanaChain(chain: Chain): boolean;
692
+ declare function getChainPresetFeatures(chain: Chain): ChainPresetFeatures;
634
693
  /** Returns chain-appropriate default preset values. */
635
694
  declare function getDefaultPresetForChain(chain: Chain): TradePresetValues;
636
695
 
696
+ type PresetDirection = "buy" | "sell";
697
+ /**
698
+ * Construct an atomFamily key from chain, direction, preset index and prefix.
699
+ *
700
+ * @param chain - Target chain.
701
+ * @param direction - Trade direction: `"buy"` or `"sell"`.
702
+ * @param index - Preset index (0, 1, or 2).
703
+ * @param prefix - Storage key prefix. Defaults to `"liberfi."`.
704
+ */
705
+ declare function presetKey(chain: Chain, direction: PresetDirection, index: number, prefix?: string): string;
706
+ /**
707
+ * Atom family for trade preset values, persisted via `atomWithStorage`.
708
+ *
709
+ * Each atom is keyed by a string built with {@link presetKey}.
710
+ * Default values are chain-specific via `getDefaultPresetForChain`.
711
+ */
712
+ declare const presetAtomFamily: jotai_family.AtomFamily<string, jotai.WritableAtom<TradePresetValues, [TradePresetValues | typeof jotai_utils.RESET | ((prev: TradePresetValues) => TradePresetValues | typeof jotai_utils.RESET)], void>>;
713
+
637
714
  declare global {
638
715
  interface Window {
639
716
  __LIBERFI_VERSION__?: {
@@ -641,6 +718,6 @@ declare global {
641
718
  };
642
719
  }
643
720
  }
644
- declare const _default: "0.1.4";
721
+ declare const _default: "0.1.5";
645
722
 
646
- export { type AntiMevOption, type BuySettings, type ChainPresetFeatures, DEFAULT_BSC_TRADE_PRESET, DEFAULT_BUY_AMOUNTS, DEFAULT_EVM_TRADE_PRESET, DEFAULT_INSTANT_TRADE_SETTINGS, DEFAULT_SELL_PERCENTAGES, DEFAULT_TRADE_PRESET, InstantTradeAmountInput, type InstantTradeAmountInputProps, InstantTradeButton, type InstantTradeButtonProps, type InstantTradeContextValue, InstantTradeProvider, type InstantTradeProviderProps, type InstantTradeSettings, InstantTradeUI, type InstantTradeUIProps, InstantTradeWidget, type InstantTradeWidgetProps, PresetFormUI, type PresetFormUIProps, PresetFormWidget, type PresetFormWidgetProps, type SellSettings, type SwapInput, type SwapPhase, SwapPreviewModal, type SwapPreviewModalProps, type SwapResult, SwapUI, type SwapUIProps, SwapWidget, type SwapWidgetProps, type TradePresetValues, type TxConfirmationStatus, type UseInstantTradeScriptParams, type UseInstantTradeScriptResult, type UseSwapOptions, type UseSwapRoutePollingOptions, type UseSwapScriptParams, type UseSwapScriptResult, type UseTxConfirmationOptions, getChainPresetFeatures, getDefaultPresetForChain, isSolanaChain, useInstantTrade, useInstantTradeScript, useSwap, useSwapRoutePolling, useSwapScript, useTxConfirmation, _default as version };
723
+ export { type AntiMevOption, type BuySettings, type ChainPresetFeatures, DEFAULT_BSC_TRADE_PRESET, DEFAULT_EVM_TRADE_PRESET, DEFAULT_INSTANT_TRADE_SETTINGS, DEFAULT_SELL_PERCENTAGES, DEFAULT_SOL_TRADE_PRESET, type FeeType, InstantTradeAmountInput, type InstantTradeAmountInputProps, InstantTradeButton, type InstantTradeButtonProps, type InstantTradeContextValue, InstantTradeProvider, type InstantTradeProviderProps, type InstantTradeSettings, InstantTradeUI, type InstantTradeUIProps, InstantTradeWidget, type InstantTradeWidgetProps, MultiPresetFormWidget, type MultiPresetFormWidgetProps, type PresetDirection, PresetFormModal, type PresetFormModalParams, PresetFormUI, type PresetFormUIProps, PresetFormWidget, type PresetFormWidgetProps, type SellSettings, type SwapInput, type SwapPhase, SwapPreviewModal, type SwapPreviewModalProps, type SwapResult, SwapUI, type SwapUIProps, SwapWidget, type SwapWidgetProps, type TradePresetValues, type TxConfirmationStatus, type UseInstantTradeScriptParams, type UseInstantTradeScriptResult, type UseSwapOptions, type UseSwapRoutePollingOptions, type UseSwapScriptParams, type UseSwapScriptResult, type UseTxConfirmationOptions, getChainPresetFeatures, getDefaultBuyAmounts, getDefaultPresetForChain, presetAtomFamily, presetKey, useInstantTrade, useInstantTradeScript, useSwap, useSwapRoutePolling, useSwapScript, useTxConfirmation, _default as version };