@liberfi.io/ui-trade 0.1.5 → 0.1.6
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 +162 -45
- package/dist/index.d.mts +136 -37
- package/dist/index.d.ts +136 -37
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +2 -2
- package/dist/index.mjs.map +1 -1
- package/package.json +17 -17
package/README.md
CHANGED
|
@@ -7,7 +7,7 @@ The package is organized in three layers:
|
|
|
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
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` / `
|
|
10
|
+
- **State atoms** (`presetAtomFamily` / `instantTradeAmountAtomFamily`) — Jotai-based persistent state for trade presets and amount/preset selection, storage-backend agnostic via `atomWithStorage`.
|
|
11
11
|
|
|
12
12
|
## Design Philosophy
|
|
13
13
|
|
|
@@ -514,27 +514,54 @@ Full instant-trade form with buy/sell tabs, amount input, quick buttons, preset
|
|
|
514
514
|
|
|
515
515
|
#### `InstantTradeProvider`
|
|
516
516
|
|
|
517
|
-
Context provider for instant trade state. Use with `
|
|
518
|
-
|
|
519
|
-
```tsx
|
|
520
|
-
<InstantTradeProvider chain={Chain.SOLANA} tokenAddress="...">
|
|
521
|
-
<InstantTradeAmountInput
|
|
522
|
-
amount={amount}
|
|
523
|
-
onAmountChange={setAmount}
|
|
524
|
-
preset={preset}
|
|
525
|
-
onPresetChange={setPreset}
|
|
526
|
-
/>
|
|
527
|
-
<InstantTradeButton />
|
|
528
|
-
</InstantTradeProvider>
|
|
529
|
-
```
|
|
517
|
+
Context provider for instant trade state. Use with `InstantTradeButton` for compact inline trading.
|
|
530
518
|
|
|
531
519
|
#### `useInstantTradeScript(params)`
|
|
532
520
|
|
|
533
521
|
Script-layer hook for the instant trade form. Must be used inside an `InstantTradeProvider`. Encapsulates token queries, balance queries, form state, and swap execution.
|
|
534
522
|
|
|
535
|
-
#### `
|
|
536
|
-
|
|
537
|
-
|
|
523
|
+
#### `AmountPresetInputUI`
|
|
524
|
+
|
|
525
|
+
Pure presentational compact amount input with token icon, lightning icon, and 3 preset buttons (P1/P2/P3) with tooltips. No context dependency — all data is received via props.
|
|
526
|
+
|
|
527
|
+
**Props (`AmountPresetInputUIProps`):**
|
|
528
|
+
|
|
529
|
+
| Name | Type | Description |
|
|
530
|
+
| ----------------- | -------------------------------- | ------------------------------------------------------------------- |
|
|
531
|
+
| `token` | `PredefinedToken` | Payment token (provides symbol, decimals, and icon). |
|
|
532
|
+
| `chain` | `Chain` | Target chain — used by preset tooltips to show chain-specific info. |
|
|
533
|
+
| `amount?` | `number` | Current amount value. |
|
|
534
|
+
| `onAmountChange` | `(amount?: number) => void` | Called when the amount changes. |
|
|
535
|
+
| `preset?` | `number` | Currently selected preset index (0–2). Defaults to 0. |
|
|
536
|
+
| `onPresetChange?` | `(preset: number) => void` | Called when the user selects a different preset. |
|
|
537
|
+
| `onPresetClick?` | `(preset: number) => void` | Called when the user clicks the already-selected preset. |
|
|
538
|
+
| `presetValues?` | `TradePresetValues[]` | Preset configurations for tooltip display. Falls back to defaults. |
|
|
539
|
+
| `size?` | `"sm" \| "lg"` | Controls overall component size. Defaults to `"sm"`. |
|
|
540
|
+
| `variant?` | `"default" \| "bordered"` | Visual variant. |
|
|
541
|
+
| `radius?` | `"full" \| "lg" \| "md" \| "sm"` | Border radius. |
|
|
542
|
+
| `fullWidth?` | `boolean` | Whether the input takes full width. |
|
|
543
|
+
| `className?` | `string` | External style customization. |
|
|
544
|
+
|
|
545
|
+
#### `AmountPresetInputWidget`
|
|
546
|
+
|
|
547
|
+
Atom-backed widget that wraps `AmountPresetInputUI` with `atomWithStorage` persistence. Amount and preset selection are persisted per `id + chain + token.address` so different payment tokens and chains have separate saved values.
|
|
548
|
+
|
|
549
|
+
**Props (`AmountPresetInputWidgetProps`):**
|
|
550
|
+
|
|
551
|
+
| Name | Type | Description |
|
|
552
|
+
| ------------------- | -------------------------------- | ---------------------------------------------------------------------------- |
|
|
553
|
+
| `id` | `string` | Business identifier for storage key (e.g. `"token-detail"`). |
|
|
554
|
+
| `chain` | `Chain` | Target chain. |
|
|
555
|
+
| `token` | `PredefinedToken` | Payment token (provides symbol, decimals, address for storage key). |
|
|
556
|
+
| `storageKeyPrefix?` | `string` | Storage key prefix. Must match `PresetFormWidget`. Defaults to `"liberfi."`. |
|
|
557
|
+
| `onAmountChange?` | `(amount?: number) => void` | Notification callback (does not control state). |
|
|
558
|
+
| `onPresetChange?` | `(preset: number) => void` | Notification callback (does not control state). |
|
|
559
|
+
| `onPresetClick?` | `(preset: number) => void` | Called when the user clicks the already-selected preset. |
|
|
560
|
+
| `size?` | `"sm" \| "lg"` | Controls overall component size. Defaults to `"sm"`. |
|
|
561
|
+
| `variant?` | `"default" \| "bordered"` | Visual variant. |
|
|
562
|
+
| `radius?` | `"full" \| "lg" \| "md" \| "sm"` | Border radius. |
|
|
563
|
+
| `fullWidth?` | `boolean` | Whether the input takes full width. |
|
|
564
|
+
| `className?` | `string` | External style customization. |
|
|
538
565
|
|
|
539
566
|
#### `InstantTradeButton`
|
|
540
567
|
|
|
@@ -590,6 +617,26 @@ For a pure presentational form without persistence, use `PresetFormUI` directly.
|
|
|
590
617
|
|
|
591
618
|
Pure presentational preset form. Accepts value/onChange props directly. No persistence — the caller owns the state.
|
|
592
619
|
|
|
620
|
+
#### `useInstantTradeAmount(params)`
|
|
621
|
+
|
|
622
|
+
Read-only hook for the persisted instant-trade amount and preset index. Reads from the same `atomWithStorage` atom family that `AmountPresetInputWidget` writes to.
|
|
623
|
+
|
|
624
|
+
**Parameters (`UseInstantTradeAmountParams`):**
|
|
625
|
+
|
|
626
|
+
| Name | Type | Description |
|
|
627
|
+
| ------------------- | -------- | ----------------------------------------------------------------------------- |
|
|
628
|
+
| `id` | `string` | Business identifier (must match the widget's `id`). |
|
|
629
|
+
| `chain` | `Chain` | Target chain. |
|
|
630
|
+
| `tokenAddress` | `string` | Payment token address. |
|
|
631
|
+
| `storageKeyPrefix?` | `string` | Storage key prefix. Must match the widget's prefix. Defaults to `"liberfi."`. |
|
|
632
|
+
|
|
633
|
+
**Returns:** `AmountPresetState`
|
|
634
|
+
|
|
635
|
+
| Name | Type | Description |
|
|
636
|
+
| -------- | --------------------- | ----------------------- |
|
|
637
|
+
| `amount` | `number \| undefined` | Persisted amount value. |
|
|
638
|
+
| `preset` | `number` | Persisted preset index. |
|
|
639
|
+
|
|
593
640
|
### State Atoms
|
|
594
641
|
|
|
595
642
|
#### `presetAtomFamily`
|
|
@@ -599,20 +646,54 @@ Atom family for trade preset values, persisted via `atomWithStorage`. Each atom
|
|
|
599
646
|
```typescript
|
|
600
647
|
import { presetAtomFamily, presetKey } from "@liberfi.io/ui-trade";
|
|
601
648
|
|
|
602
|
-
const atom = presetAtomFamily(presetKey(Chain.SOLANA, 0));
|
|
649
|
+
const atom = presetAtomFamily(presetKey(Chain.SOLANA, "buy", 0));
|
|
603
650
|
```
|
|
604
651
|
|
|
605
|
-
#### `presetKey(chain, index)`
|
|
652
|
+
#### `presetKey(chain, direction, index, prefix?)`
|
|
606
653
|
|
|
607
|
-
Constructs an atomFamily key string from chain
|
|
654
|
+
Constructs an atomFamily key string from chain, direction, preset index and optional prefix.
|
|
608
655
|
|
|
609
|
-
| Name
|
|
610
|
-
|
|
|
611
|
-
| `chain`
|
|
612
|
-
| `
|
|
656
|
+
| Name | Type | Description |
|
|
657
|
+
| ----------- | ----------------- | --------------------------------------------- |
|
|
658
|
+
| `chain` | `Chain` | Target chain. |
|
|
659
|
+
| `direction` | `"buy" \| "sell"` | Trade direction. |
|
|
660
|
+
| `index` | `number` | Preset index (0, 1, or 2). |
|
|
661
|
+
| `prefix?` | `string` | Storage key prefix. Defaults to `"liberfi."`. |
|
|
613
662
|
|
|
614
663
|
**Returns:** `string` — key for use with `presetAtomFamily`.
|
|
615
664
|
|
|
665
|
+
#### `instantTradeAmountAtomFamily`
|
|
666
|
+
|
|
667
|
+
Atom family for instant-trade amount and preset index, persisted via `atomWithStorage`. Each atom is keyed by a string built with `instantTradeAmountKey`. The storage key includes `id`, `chain`, and `tokenAddress` so the same token on different chains has separate persisted values.
|
|
668
|
+
|
|
669
|
+
```typescript
|
|
670
|
+
import {
|
|
671
|
+
instantTradeAmountAtomFamily,
|
|
672
|
+
instantTradeAmountKey,
|
|
673
|
+
} from "@liberfi.io/ui-trade";
|
|
674
|
+
|
|
675
|
+
const atom = instantTradeAmountAtomFamily(
|
|
676
|
+
instantTradeAmountKey(
|
|
677
|
+
"token-detail",
|
|
678
|
+
Chain.SOLANA,
|
|
679
|
+
"11111111111111111111111111111111",
|
|
680
|
+
),
|
|
681
|
+
);
|
|
682
|
+
```
|
|
683
|
+
|
|
684
|
+
#### `instantTradeAmountKey(id, chain, tokenAddress, prefix?)`
|
|
685
|
+
|
|
686
|
+
Constructs an atomFamily key string for instant-trade amount + preset state.
|
|
687
|
+
|
|
688
|
+
| Name | Type | Description |
|
|
689
|
+
| -------------- | -------- | --------------------------------------------- |
|
|
690
|
+
| `id` | `string` | Business identifier. |
|
|
691
|
+
| `chain` | `Chain` | Target chain. |
|
|
692
|
+
| `tokenAddress` | `string` | Payment token address. |
|
|
693
|
+
| `prefix?` | `string` | Storage key prefix. Defaults to `"liberfi."`. |
|
|
694
|
+
|
|
695
|
+
**Returns:** `string` — key for use with `instantTradeAmountAtomFamily`.
|
|
696
|
+
|
|
616
697
|
### Instant Trade Types
|
|
617
698
|
|
|
618
699
|
#### `TradePresetValues`
|
|
@@ -680,33 +761,70 @@ function TokenTradePage({ tokenAddress }: { tokenAddress: string }) {
|
|
|
680
761
|
}
|
|
681
762
|
```
|
|
682
763
|
|
|
683
|
-
###
|
|
764
|
+
### AmountPresetInputWidget (Persisted Quick-Buy)
|
|
684
765
|
|
|
685
766
|
```tsx
|
|
686
767
|
import { Chain } from "@liberfi.io/types";
|
|
687
|
-
import {
|
|
688
|
-
|
|
689
|
-
InstantTradeAmountInput,
|
|
690
|
-
InstantTradeButton,
|
|
691
|
-
} from "@liberfi.io/ui-trade";
|
|
768
|
+
import { AmountPresetInputWidget } from "@liberfi.io/ui-trade";
|
|
769
|
+
import { SOLANA_TOKENS } from "@liberfi.io/utils";
|
|
692
770
|
|
|
693
|
-
function TokenHeader(
|
|
771
|
+
function TokenHeader() {
|
|
694
772
|
return (
|
|
695
|
-
<
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
773
|
+
<AmountPresetInputWidget
|
|
774
|
+
id="token-detail"
|
|
775
|
+
chain={Chain.SOLANA}
|
|
776
|
+
token={SOLANA_TOKENS.native}
|
|
777
|
+
variant="bordered"
|
|
778
|
+
size="sm"
|
|
779
|
+
onPresetClick={(p) => console.log(`Open settings for preset ${p}`)}
|
|
780
|
+
/>
|
|
781
|
+
);
|
|
782
|
+
}
|
|
783
|
+
```
|
|
784
|
+
|
|
785
|
+
### AmountPresetInputUI (Controlled)
|
|
786
|
+
|
|
787
|
+
```tsx
|
|
788
|
+
import { useState } from "react";
|
|
789
|
+
import { Chain } from "@liberfi.io/types";
|
|
790
|
+
import { AmountPresetInputUI } from "@liberfi.io/ui-trade";
|
|
791
|
+
import { SOLANA_TOKENS } from "@liberfi.io/utils";
|
|
792
|
+
|
|
793
|
+
function CustomAmountInput() {
|
|
794
|
+
const [amount, setAmount] = useState<number | undefined>();
|
|
795
|
+
const [preset, setPreset] = useState(0);
|
|
796
|
+
|
|
797
|
+
return (
|
|
798
|
+
<AmountPresetInputUI
|
|
799
|
+
token={SOLANA_TOKENS.native}
|
|
800
|
+
chain={Chain.SOLANA}
|
|
801
|
+
amount={amount}
|
|
802
|
+
onAmountChange={setAmount}
|
|
803
|
+
preset={preset}
|
|
804
|
+
onPresetChange={setPreset}
|
|
805
|
+
variant="bordered"
|
|
806
|
+
size="lg"
|
|
807
|
+
/>
|
|
706
808
|
);
|
|
707
809
|
}
|
|
708
810
|
```
|
|
709
811
|
|
|
812
|
+
### Reading Persisted Amount/Preset
|
|
813
|
+
|
|
814
|
+
```tsx
|
|
815
|
+
import { Chain } from "@liberfi.io/types";
|
|
816
|
+
import { useInstantTradeAmount } from "@liberfi.io/ui-trade";
|
|
817
|
+
|
|
818
|
+
function useTokenDetailAmount(tokenAddress: string) {
|
|
819
|
+
const { amount, preset } = useInstantTradeAmount({
|
|
820
|
+
id: "token-detail",
|
|
821
|
+
chain: Chain.SOLANA,
|
|
822
|
+
tokenAddress,
|
|
823
|
+
});
|
|
824
|
+
return { amount, preset };
|
|
825
|
+
}
|
|
826
|
+
```
|
|
827
|
+
|
|
710
828
|
### Multi-Chain Preset Settings Editor
|
|
711
829
|
|
|
712
830
|
```tsx
|
|
@@ -729,12 +847,11 @@ function TradeSettings() {
|
|
|
729
847
|
### Reading Preset Values from Atoms
|
|
730
848
|
|
|
731
849
|
```tsx
|
|
732
|
-
import { useAtom } from "jotai";
|
|
733
850
|
import { Chain } from "@liberfi.io/types";
|
|
734
|
-
import {
|
|
851
|
+
import { usePresetValues } from "@liberfi.io/ui-trade";
|
|
735
852
|
|
|
736
853
|
function useCurrentPreset(chain: Chain, index: number) {
|
|
737
|
-
return
|
|
854
|
+
return usePresetValues({ chain, direction: "buy", presetIndex: index });
|
|
738
855
|
}
|
|
739
856
|
```
|
|
740
857
|
|
package/dist/index.d.mts
CHANGED
|
@@ -1,12 +1,52 @@
|
|
|
1
1
|
import * as _liberfi_io_types from '@liberfi.io/types';
|
|
2
2
|
import { Chain, API, Token, Portfolio } from '@liberfi.io/types';
|
|
3
|
+
import * as jotai_family from 'jotai-family';
|
|
4
|
+
import * as jotai from 'jotai';
|
|
5
|
+
import * as jotai_utils from 'jotai/utils';
|
|
3
6
|
import { WalletAdapter } from '@liberfi.io/wallet-connector';
|
|
4
7
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
5
8
|
import { ReactNode } from 'react';
|
|
6
9
|
import { PredefinedToken } from '@liberfi.io/utils';
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
+
|
|
11
|
+
interface AmountPresetState {
|
|
12
|
+
amount: number | undefined;
|
|
13
|
+
preset: number;
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* Construct an atomFamily key for instant-trade amount + preset state.
|
|
17
|
+
*
|
|
18
|
+
* @param id - Business identifier (e.g. `"token-detail"`).
|
|
19
|
+
* @param chain - Target chain.
|
|
20
|
+
* @param tokenAddress - Payment token address.
|
|
21
|
+
* @param prefix - Storage key prefix. Defaults to `"liberfi."`.
|
|
22
|
+
*/
|
|
23
|
+
declare function instantTradeAmountKey(id: string, chain: Chain, tokenAddress: string, prefix?: string): string;
|
|
24
|
+
/**
|
|
25
|
+
* Atom family for instant-trade amount and preset index, persisted via `atomWithStorage`.
|
|
26
|
+
*
|
|
27
|
+
* Each atom is keyed by a string built with {@link instantTradeAmountKey}.
|
|
28
|
+
* The storage key includes `id`, `chain`, and `tokenAddress` so the same token
|
|
29
|
+
* on different chains (e.g. USDC on Solana vs Ethereum) has separate persisted values.
|
|
30
|
+
*/
|
|
31
|
+
declare const instantTradeAmountAtomFamily: jotai_family.AtomFamily<string, jotai.WritableAtom<AmountPresetState, [AmountPresetState | typeof jotai_utils.RESET | ((prev: AmountPresetState) => AmountPresetState | typeof jotai_utils.RESET)], void>>;
|
|
32
|
+
|
|
33
|
+
interface UseInstantTradeAmountParams {
|
|
34
|
+
/** Business identifier (e.g. `"token-detail"`). */
|
|
35
|
+
id: string;
|
|
36
|
+
/** Target chain. */
|
|
37
|
+
chain: Chain;
|
|
38
|
+
/** Payment token address. */
|
|
39
|
+
tokenAddress: string;
|
|
40
|
+
/** Storage key prefix. Must match the prefix used by the corresponding AmountPresetInputWidget. Defaults to `"liberfi."`. */
|
|
41
|
+
storageKeyPrefix?: string;
|
|
42
|
+
}
|
|
43
|
+
/**
|
|
44
|
+
* Read the persisted instant-trade amount and preset index for a given id / chain / token.
|
|
45
|
+
*
|
|
46
|
+
* The value is sourced from the same `atomWithStorage` atom family that
|
|
47
|
+
* {@link AmountPresetInputWidget} writes to, so it stays in sync automatically.
|
|
48
|
+
*/
|
|
49
|
+
declare function useInstantTradeAmount({ id, chain, tokenAddress, storageKeyPrefix, }: UseInstantTradeAmountParams): AmountPresetState;
|
|
10
50
|
|
|
11
51
|
/**
|
|
12
52
|
* Input parameters for the `swap()` function returned by {@link useSwap}.
|
|
@@ -107,6 +147,42 @@ interface UseTxConfirmationOptions {
|
|
|
107
147
|
timeout?: number;
|
|
108
148
|
}
|
|
109
149
|
|
|
150
|
+
type PresetDirection = "buy" | "sell";
|
|
151
|
+
/**
|
|
152
|
+
* Construct an atomFamily key from chain, direction, preset index and prefix.
|
|
153
|
+
*
|
|
154
|
+
* @param chain - Target chain.
|
|
155
|
+
* @param direction - Trade direction: `"buy"` or `"sell"`.
|
|
156
|
+
* @param index - Preset index (0, 1, or 2).
|
|
157
|
+
* @param prefix - Storage key prefix. Defaults to `"liberfi."`.
|
|
158
|
+
*/
|
|
159
|
+
declare function presetKey(chain: Chain, direction: PresetDirection, index: number, prefix?: string): string;
|
|
160
|
+
/**
|
|
161
|
+
* Atom family for trade preset values, persisted via `atomWithStorage`.
|
|
162
|
+
*
|
|
163
|
+
* Each atom is keyed by a string built with {@link presetKey}.
|
|
164
|
+
* Default values are chain-specific via `getDefaultPresetForChain`.
|
|
165
|
+
*/
|
|
166
|
+
declare const presetAtomFamily: jotai_family.AtomFamily<string, jotai.WritableAtom<TradePresetValues, [typeof jotai_utils.RESET | TradePresetValues | ((prev: TradePresetValues) => typeof jotai_utils.RESET | TradePresetValues)], void>>;
|
|
167
|
+
|
|
168
|
+
interface UsePresetValuesParams {
|
|
169
|
+
/** Target chain. */
|
|
170
|
+
chain: Chain;
|
|
171
|
+
/** Trade direction. */
|
|
172
|
+
direction: PresetDirection;
|
|
173
|
+
/** Preset index (0, 1, or 2). Defaults to 0. */
|
|
174
|
+
presetIndex?: number;
|
|
175
|
+
/** Storage key prefix. Must match the prefix used by the corresponding PresetFormWidget. Defaults to `"liberfi."`. */
|
|
176
|
+
storageKeyPrefix?: string;
|
|
177
|
+
}
|
|
178
|
+
/**
|
|
179
|
+
* Read the current {@link TradePresetValues} for a given chain / direction / preset index.
|
|
180
|
+
*
|
|
181
|
+
* The value is sourced from the same `atomWithStorage` atom family that
|
|
182
|
+
* {@link PresetFormWidget} writes to, so it stays in sync automatically.
|
|
183
|
+
*/
|
|
184
|
+
declare function usePresetValues({ chain, direction, presetIndex, storageKeyPrefix, }: UsePresetValuesParams): TradePresetValues;
|
|
185
|
+
|
|
110
186
|
/**
|
|
111
187
|
* Hook that orchestrates the full swap flow: route -> sign -> send.
|
|
112
188
|
*
|
|
@@ -470,18 +546,48 @@ interface InstantTradeProviderProps {
|
|
|
470
546
|
onSettingsChange?: (settings: InstantTradeSettings) => void;
|
|
471
547
|
children: ReactNode;
|
|
472
548
|
}
|
|
473
|
-
/** Props for {@link
|
|
474
|
-
interface
|
|
549
|
+
/** Props for {@link AmountPresetInputUI}. */
|
|
550
|
+
interface AmountPresetInputUIProps {
|
|
551
|
+
/** Payment token (provides symbol, decimals, and icon). */
|
|
552
|
+
token: PredefinedToken;
|
|
553
|
+
/** Target chain — used by preset tooltips to show chain-specific features. */
|
|
554
|
+
chain: Chain;
|
|
555
|
+
/** Current amount value. */
|
|
475
556
|
amount?: number;
|
|
557
|
+
/** Called when the amount changes. */
|
|
476
558
|
onAmountChange: (amount?: number) => void;
|
|
559
|
+
/** Currently selected preset index (0, 1, or 2). Defaults to 0. */
|
|
477
560
|
preset?: number;
|
|
561
|
+
/** Called when the user selects a different preset. */
|
|
562
|
+
onPresetChange?: (preset: number) => void;
|
|
563
|
+
/** Called when the user clicks the already-selected preset (e.g. open settings). */
|
|
564
|
+
onPresetClick?: (preset: number) => void;
|
|
565
|
+
/** Preset configurations for tooltip display. Falls back to chain defaults when omitted. */
|
|
566
|
+
presetValues?: TradePresetValues[];
|
|
567
|
+
/** Controls overall component size. Defaults to `"sm"`. */
|
|
568
|
+
size?: "sm" | "md" | "lg";
|
|
569
|
+
radius?: "full" | "lg" | "md" | "sm" | "none";
|
|
570
|
+
className?: string;
|
|
571
|
+
}
|
|
572
|
+
/** Props for {@link AmountPresetInputWidget}. */
|
|
573
|
+
interface AmountPresetInputWidgetProps {
|
|
574
|
+
/** Business identifier used as part of the storage key (e.g. `"token-detail"`, `"watchlist"`). */
|
|
575
|
+
id: string;
|
|
576
|
+
/** Target chain. */
|
|
577
|
+
chain: Chain;
|
|
578
|
+
/** Payment token (provides symbol, decimals, address for storage key, and icon). */
|
|
579
|
+
token: PredefinedToken;
|
|
580
|
+
/** Storage key prefix. Must match the prefix used by the corresponding PresetFormWidget. Defaults to `"liberfi."`. */
|
|
581
|
+
storageKeyPrefix?: string;
|
|
582
|
+
/** Notification callback when the amount changes (does not control state). */
|
|
583
|
+
onAmountChange?: (amount?: number) => void;
|
|
584
|
+
/** Notification callback when a different preset is selected (does not control state). */
|
|
478
585
|
onPresetChange?: (preset: number) => void;
|
|
479
|
-
/** Called when
|
|
586
|
+
/** Called when the user clicks the already-selected preset (e.g. open settings). */
|
|
480
587
|
onPresetClick?: (preset: number) => void;
|
|
481
|
-
|
|
588
|
+
/** Controls overall component size. Defaults to `"sm"`. */
|
|
589
|
+
size?: "sm" | "md" | "lg";
|
|
482
590
|
radius?: "full" | "lg" | "md" | "sm";
|
|
483
|
-
size?: "sm" | "lg";
|
|
484
|
-
fullWidth?: boolean;
|
|
485
591
|
className?: string;
|
|
486
592
|
}
|
|
487
593
|
/** Props for {@link InstantTradeButton}. */
|
|
@@ -585,6 +691,17 @@ declare function useInstantTradeScript(params: UseInstantTradeScriptParams): Use
|
|
|
585
691
|
*/
|
|
586
692
|
declare function InstantTradeWidget({ chain, tokenAddress, onSwapSubmitted, onSwapError, settings, onSettingsChange, headerExtra, className, }: InstantTradeWidgetProps): react_jsx_runtime.JSX.Element;
|
|
587
693
|
|
|
694
|
+
/**
|
|
695
|
+
* Amount + preset input widget — atom-backed orchestration layer.
|
|
696
|
+
*
|
|
697
|
+
* Persists `{ amount, preset }` via `atomWithStorage`, keyed by
|
|
698
|
+
* `id + chain + token.address`. Reads preset values from
|
|
699
|
+
* {@link presetAtomFamily} for tooltip display.
|
|
700
|
+
*
|
|
701
|
+
* For a pure presentational input without persistence, use {@link AmountPresetInputUI}.
|
|
702
|
+
*/
|
|
703
|
+
declare function AmountPresetInputWidget({ id, chain, token, storageKeyPrefix, onAmountChange, onPresetChange, onPresetClick, size, radius, className, }: AmountPresetInputWidgetProps): react_jsx_runtime.JSX.Element;
|
|
704
|
+
|
|
588
705
|
/**
|
|
589
706
|
* Preset form widget — atom-backed orchestration layer with Buy/Sell tabs.
|
|
590
707
|
*
|
|
@@ -624,6 +741,14 @@ declare function PresetFormModal({ id }: {
|
|
|
624
741
|
*/
|
|
625
742
|
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;
|
|
626
743
|
|
|
744
|
+
/**
|
|
745
|
+
* Compact amount input with preset selector buttons (presentational).
|
|
746
|
+
*
|
|
747
|
+
* Designed for inline/header usage (e.g. token detail page).
|
|
748
|
+
* Receives all data via props — no context dependency.
|
|
749
|
+
*/
|
|
750
|
+
declare function AmountPresetInputUI({ token, chain, amount, onAmountChange, preset, onPresetChange, onPresetClick, presetValues, radius, size, className, }: AmountPresetInputUIProps): react_jsx_runtime.JSX.Element;
|
|
751
|
+
|
|
627
752
|
/**
|
|
628
753
|
* Pure presentational preset-settings form.
|
|
629
754
|
*
|
|
@@ -637,14 +762,6 @@ declare function InstantTradeUI({ chain, direction, onDirectionChange, amount, o
|
|
|
637
762
|
*/
|
|
638
763
|
declare function PresetFormUI({ value, onChange, chain, disableAnimation, className, }: PresetFormUIProps): react_jsx_runtime.JSX.Element;
|
|
639
764
|
|
|
640
|
-
/**
|
|
641
|
-
* Compact amount input with preset selector buttons.
|
|
642
|
-
*
|
|
643
|
-
* Designed for inline/header usage (e.g. token detail page).
|
|
644
|
-
* Must be rendered inside an {@link InstantTradeProvider}.
|
|
645
|
-
*/
|
|
646
|
-
declare function InstantTradeAmountInput({ amount, onAmountChange, preset, onPresetChange, onPresetClick, variant, radius, size, fullWidth, className, }: InstantTradeAmountInputProps): react_jsx_runtime.JSX.Element;
|
|
647
|
-
|
|
648
765
|
/**
|
|
649
766
|
* Trade execution button that reads state from {@link InstantTradeProvider}.
|
|
650
767
|
*
|
|
@@ -693,24 +810,6 @@ declare function getChainPresetFeatures(chain: Chain): ChainPresetFeatures;
|
|
|
693
810
|
/** Returns chain-appropriate default preset values. */
|
|
694
811
|
declare function getDefaultPresetForChain(chain: Chain): TradePresetValues;
|
|
695
812
|
|
|
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
|
-
|
|
714
813
|
declare global {
|
|
715
814
|
interface Window {
|
|
716
815
|
__LIBERFI_VERSION__?: {
|
|
@@ -718,6 +817,6 @@ declare global {
|
|
|
718
817
|
};
|
|
719
818
|
}
|
|
720
819
|
}
|
|
721
|
-
declare const _default: "0.1.
|
|
820
|
+
declare const _default: "0.1.6";
|
|
722
821
|
|
|
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,
|
|
822
|
+
export { AmountPresetInputUI, type AmountPresetInputUIProps, AmountPresetInputWidget, type AmountPresetInputWidgetProps, type AmountPresetState, 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, 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 UseInstantTradeAmountParams, type UseInstantTradeScriptParams, type UseInstantTradeScriptResult, type UsePresetValuesParams, type UseSwapOptions, type UseSwapRoutePollingOptions, type UseSwapScriptParams, type UseSwapScriptResult, type UseTxConfirmationOptions, getChainPresetFeatures, getDefaultBuyAmounts, getDefaultPresetForChain, instantTradeAmountAtomFamily, instantTradeAmountKey, presetAtomFamily, presetKey, useInstantTrade, useInstantTradeAmount, useInstantTradeScript, usePresetValues, useSwap, useSwapRoutePolling, useSwapScript, useTxConfirmation, _default as version };
|