@gearbox-protocol/ui-kit 4.0.0-next.9 → 4.0.0

package/dist/types/utils/format-leverage.d.ts

@@ -1,5 +1,13 @@
 /**
- * Display leverage with two decimal places, e.g. `5.79` for `5.7857…`.
+ * Display leverage with one decimal place, e.g. `5.8` for `5.7857…`.
  * The suffix (`x`) / prefix (`×`) stays at the call site.
  */
 export declare function formatLeverage(value: number): string;
+/**
+ * Leverage keeping the hundredths a value actually carries: `9` → `9.0`,
+ * `9.57` → `9.57`. For the slider, whose track ends on an exact `maxLeverage`,
+ * and for its edit field, whose text is parsed back into the target: the
+ * protocol's own resolution is 0.01, so `formatLeverage` there would silently
+ * move the position.
+ */
+export declare function formatLeverageExact(value: number): string;

package/dist/types/utils/format-money.d.ts

@@ -13,77 +13,4 @@
  * ```
  */
 export declare function formatMoney(money: number | bigint, precision?: number): string;
-/**
- * Formats a percentage with compact suffixes (`K` / `M` / `B` / `T`) instead
- * of scientific notation. Input is already in percent form (`14000` → `14K%`).
- */
-export declare function formatCompactPercent(value: number, decimals?: number): string;
-/**
- * Formats a percentage amount. Values of 1,000% and above use compact
- * suffixes (`14K`) instead of exponential notation.
- *
- * @param value - The percentage value (already in percent form, e.g., 2.81 for 2.81%)
- * @param decimals - Number of decimal places (default: 2)
- * @param compact - Whether to compact large values (default: true)
- * @returns Formatted number (without % sign)
- *
- * @example
- * ```ts
- * formatPercentAmount(2.81, 2) // "2.81"
- * formatPercentAmount(14000, 2) // "14K"
- * formatPercentAmount(14000, 2, false) // "14000.00"
- * ```
- */
-export declare function formatPercentAmount(value: number, decimals: number, compact?: boolean): string | number;
-/**
- * Formats a percentage value that is already in percent form
- * Use this when your value is already 2.81 (meaning 2.81%), not 0.0281
- *
- * @param value - The percentage value (e.g., 2.81 for 2.81%)
- * @param decimals - Number of decimal places (default: 2)
- * @returns Formatted percentage string like "2.81%"
- *
- * @example
- * ```ts
- * percentTemplate(2.81) // "2.81%"
- * percentTemplate(50.0, 1) // "50.0%"
- * ```
- */
-export declare function percentTemplate(value: number, decimals?: number): string;
-/**
- * Formats a percentage value from basis points
- * Use this when your value is in basis points (10000 = 100%)
- *
- * @param value - The percentage value in basis points (e.g., 281 for 2.81%)
- * @param decimals - Number of decimal places (default: 2)
- * @returns Formatted percentage string like "2.81%"
- *
- * @example
- * ```ts
- * percentageTemplate(281) // "2.81%"
- * percentageTemplate(5000, 1) // "50.0%"
- * percentageTemplate(10000) // "100.00%"
- * ```
- */
 export declare function percentageTemplate(value: number | bigint, decimals?: number): string;
-export declare const DEFAULT_FORMAT_MONEY_CONSTANTS: {
-    minimumFractionDigits: number;
-    maximumFractionDigits: number;
-    decimalPrecision: number;
-    minDecimalThreshold: number;
-    minExponentialThreshold: number;
-    maxExponentialThreshold: number;
-    locale: string;
-};
-export interface FormatMoneyAmountProps {
-    amount: number | bigint;
-    format?: "short" | "full";
-    maximumFractionDigits?: number;
-    minimumFractionDigits?: number;
-    decimalPrecision?: number;
-    minDecimalThreshold?: number;
-    minExponentialThreshold?: number;
-    maxExponentialThreshold?: number;
-    locale?: string;
-}
-export declare const formatMoneyAmount: ({ amount, format, maximumFractionDigits, minimumFractionDigits, decimalPrecision, minDecimalThreshold, minExponentialThreshold, maxExponentialThreshold, locale, }: FormatMoneyAmountProps) => string;

package/dist/types/utils/format-pnl.d.ts

@@ -0,0 +1,12 @@
+/**
+ * A USD figure as a badge shows it: cents below ten thousand, an abbreviation
+ * above it.
+ *
+ * @example
+ * ```ts
+ * formatPnl(1234.56)    // "$1,234.56"
+ * formatPnl(12345.67)   // "$12.35K"
+ * formatPnl(-4_210_000) // "-$4.21M"
+ * ```
+ */
+export declare function formatPnl(value: number): string;

package/dist/types/utils/format-price.d.ts

@@ -0,0 +1,17 @@
+/**
+ * A price as a table shows it: no `K`/`M` abbreviation, and precision that
+ * follows magnitude — whole units at or above a thousand, cents down to one,
+ * and two significant digits below that, where cents would round everything
+ * to `$0.00`.
+ *
+ * `formatMoney` cannot do this: it routes through the SDK's `formatBN`, which
+ * abbreviates unconditionally and has no switch.
+ *
+ * @example
+ * ```ts
+ * formatOraclePrice(4.2055)    // "$4.21"
+ * formatOraclePrice(3412.5)    // "$3,413"
+ * formatOraclePrice(0.0004205) // "$0.00042"
+ * ```
+ */
+export declare function formatOraclePrice(value: number): string;

package/dist/types/utils/format.d.ts

@@ -1,6 +1,10 @@
-export declare function formatBytecodeSize(size: number): string;
-export declare function formatBytecodeVersion(version: number): string;
+/**
+ * Marks a figure as an estimate rather than a promise: a routed amount that
+ * slippage can move, a projection quoted at prices that will have drifted by
+ * the time the transaction lands.
+ *
+ * Declared once so every screen that hedges a number hedges it the same way.
+ **/
+export declare const APPROXIMATE_SYMBOL = "\u2248";
 export declare function formatTimestamp(timestamp: number): string;
 export declare function shortenHash(hash: string, chars?: number): string;
-export declare function convertPercent(percent: number): number;
-export declare function significantTrunc(x: number): string;

package/dist/types/utils/index.d.ts

@@ -1,34 +1,16 @@
-export * from './a11y';
-export * from './apy-breakdown';
-export * from './bn-to-input-view';
-export * from './bn-to-pretty-view';
-export * from './bps';
 export * from './cn';
 export { cn as default } from './cn';
-export * from './colors';
-export * from './copy';
 export * from './format';
-export * from './format-asset-amount';
 export * from './format-leverage';
-export { formatCompactPercent, formatMoney, formatMoneyAmount, formatPercentAmount, percentageTemplate, percentTemplate, } from './format-money';
-export { FORMAT_CONSTANTS, type FormatNumberOptions, formatNumberWithSuffix, formatPrice, getAdaptiveDecimals, isBelowDisplayThreshold, isEffectivelyZero, toSignificantDigits, } from './format-number';
+export * from './format-money';
+export * from './format-pnl';
+export * from './format-price';
 export * from './format-slippage';
-export * from './interface';
 export * from './leverage-presets';
-export * from './loading';
-export * from './math';
-export * from './network-icons';
 export * from './parse-input-to-bn';
-export * from './plural';
-export { getAvailableRanges } from './ranges';
-export * from './react';
-export * from './search';
-export * from './search-in-token';
-export * from './short-sha';
+export * from './ranges';
 export * from './shorten-string';
-export type { SortField as UtilsSortField, SortType } from './sort';
+export * from './sort';
 export * from './templates';
-export * from './token-icon-source';
-export * from './ttl';
 export * from './window';
 export * from './z-index';

package/dist/types/utils/internal/format-bps.d.ts

@@ -0,0 +1,10 @@
+import { Bps } from '@gearbox-protocol/sdk/model';
+/**
+ * Basis points as a percentage (`10000` = 100%); the model's `Bps` is `number`.
+ *
+ * Self-contained on purpose: `percentageTemplate` (format-money) carries a
+ * same-named, oppositely-scaled twin in `templates.tsx` (already-percent
+ * input), so a shared bps→percent step here would inherit that ambiguity.
+ * `bps` is the one place that owns the conversion.
+ */
+export declare function bps(value: Bps): string;

package/dist/types/utils/internal/format-percent.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Formats a percentage with compact suffixes (`K` / `M` / `B` / `T`) instead
+ * of scientific notation. Input is already in percent form (`14000` → `14K%`).
+ */
+export declare function formatCompactPercent(value: number, decimals?: number): string;
+/**
+ * Formats a percentage amount. Values of 1,000% and above use compact
+ * suffixes (`14K`) instead of exponential notation.
+ *
+ * @param value - The percentage value (already in percent form, e.g., 2.81 for 2.81%)
+ * @param decimals - Number of decimal places (default: 2)
+ * @param compact - Whether to compact large values (default: true)
+ * @returns Formatted number (without % sign)
+ *
+ * @example
+ * ```ts
+ * formatPercentAmount(2.81, 2) // "2.81"
+ * formatPercentAmount(14000, 2) // "14K"
+ * formatPercentAmount(14000, 2, false) // "14000.00"
+ * ```
+ */
+export declare function formatPercentAmount(value: number, decimals: number, compact?: boolean): string | number;
+/**
+ * Formats a percentage value from basis points
+ * Use this when your value is in basis points (10000 = 100%)
+ *
+ * @param value - The percentage value in basis points (e.g., 281 for 2.81%)
+ * @param decimals - Number of decimal places (default: 2)
+ * @returns Formatted percentage string like "2.81%"
+ *
+ * @example
+ * ```ts
+ * percentageTemplate(281) // "2.81%"
+ * percentageTemplate(5000, 1) // "50.0%"
+ * percentageTemplate(10000) // "100.00%"
+ * ```
+ */
+export declare const DEFAULT_FORMAT_MONEY_CONSTANTS: {
+    minimumFractionDigits: number;
+    maximumFractionDigits: number;
+    decimalPrecision: number;
+    minDecimalThreshold: number;
+    minExponentialThreshold: number;
+    maxExponentialThreshold: number;
+    locale: string;
+};
+export interface FormatMoneyAmountProps {
+    amount: number | bigint;
+    format?: "short" | "full";
+    maximumFractionDigits?: number;
+    minimumFractionDigits?: number;
+    decimalPrecision?: number;
+    minDecimalThreshold?: number;
+    minExponentialThreshold?: number;
+    maxExponentialThreshold?: number;
+    locale?: string;
+}

package/dist/types/utils/internal/is-long-string.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Whether a string needs shortening. Its own module: ShortString and
+ * shortenString both need it, no consumer does.
+ */
+export declare function isLongString(str: string, maxLength: number): boolean;

package/dist/types/utils/{network-icons.d.ts → internal/network-icons.d.ts}

@@ -1,4 +1,4 @@
-import { NetworkType } from '@gearbox-protocol/sdk';
+import { NetworkType } from '@gearbox-protocol/sdk/onchain';
 /**
  * Known network icons type.
  * Accepts any NetworkType from SDK plus "AllNetworks" and arbitrary strings

package/dist/types/utils/internal/parse-small-number.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Input validation and small-number parsing behind parseInputToBN. Kept out of
+ * the barrel: consumers parse through `parseInputToBN`.
+ */
+export declare function isPositiveFloat(val: string): boolean;
+export interface SmallNumberParseResult {
+    integer: string;
+    repeat: number;
+    decimal: string | undefined;
+}
+export type ParseSmallNumberResult = SmallNumberParseResult | {
+    originalValue: string;
+};
+export declare function parseSmallNumber(numStr: string): ParseSmallNumberResult;

package/dist/types/utils/internal/z-index-values.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Centralized z-index catalog for overlays (toast, tooltips, modals, loading).
+ * Use these values so stacking order is consistent across the app and with consumers (e.g. client).
+ *
+ * Single source of truth: Z_INDEX_VALUES. Z_INDEX (Tailwind classes) and ZIndexLayer (type) are derived.
+ *
+ * Order from top to bottom:
+ * - TOAST: highest (notifications)
+ * - TOOLTIP: below toast, above modals
+ * - BANNERS: DataCollectionBanner, DevModeBanner, DevModeInfoModal
+ * - MODAL: main app modals (Settings, Ninja, etc.)
+ * - MODAL_ALERT: alerts/confirms that open on top of other modals (e.g. RPC warning)
+ * - DROPDOWN: dropdown/popover content (portaled to body) — must be above MODAL when inside a modal
+ * - LOADING: global loading overlay (below modals so modals can be closed first)
+ * - CONTENT: page content
+ */
+export declare const Z_INDEX_VALUES: {
+    readonly TOAST: 10000;
+    readonly TOOLTIP: 9000;
+    readonly BANNERS: 800;
+    readonly MODAL: 600;
+    readonly MODAL_ALERT: 700;
+    readonly DROPDOWN: 650;
+    readonly LOADING: 400;
+    readonly CONTENT: 0;
+};
+export type ZIndexLayer = keyof typeof Z_INDEX_VALUES;

package/dist/types/utils/leverage-presets.d.ts

@@ -1,7 +1,7 @@
 /**
  * Leverage chips beside the strategy yield chart: 30% and 70% of the
- * (1 → max) span, rounded to 0.5, plus max itself.
+ * (1 → max) span, rounded to 0.5, plus max itself. The 0.5 rounding can
+ * overshoot a fractional `max` (1.4 would yield a 1.5 chip), so each step is
+ * capped — the dialogs seed their initial leverage from this list.
  */
 export declare function leveragePresets(max: number): number[];
-/** Chip / subtitle leverage without trailing zeros: `5`, `5.5`, `9.54`. */
-export declare function formatChipLeverage(leverage: number): string;

package/dist/types/utils/parse-input-to-bn.d.ts

@@ -1,13 +1,4 @@
-export declare function isPositiveFloat(val: string): boolean;
+import { ParseSmallNumberResult } from './internal/parse-small-number';
 export type ParseOutput = [bigint | null, string | null];
 export declare const parseInputToBN: (input: string, decimals: number, allowNegative?: boolean) => ParseOutput;
-export interface SmallNumberParseResult {
-    integer: string;
-    repeat: number;
-    decimal: string | undefined;
-}
-export type ParseSmallNumberResult = SmallNumberParseResult | {
-    originalValue: string;
-};
-export declare function parseSmallNumber(numStr: string): ParseSmallNumberResult;
 export declare function bnToLiquidationPriceView(number: bigint, precision?: number): ParseSmallNumberResult;

package/dist/types/utils/ranges.d.ts

@@ -8,26 +8,3 @@ export interface ColorInterval {
     end: number;
     color: string;
 }
-/**
- * Filters and clips intervals to fit within min/max bounds
- *
- * @param min - Minimum value of the range
- * @param max - Maximum value of the range
- * @param intervals - Array of intervals to filter
- * @returns Filtered intervals that overlap with [min, max], clipped to bounds
- *
- * @example
- * ```ts
- * getAvailableRanges(0, 100, [
- *   { start: -10, end: 30, color: "red" },
- *   { start: 50, end: 150, color: "green" },
- *   { start: 200, end: 300, color: "blue" },
- * ])
- * // Returns:
- * // [
- * //   { start: 0, end: 30, color: "red" },
- * //   { start: 50, end: 100, color: "green" },
- * // ]
- * ```
- */
-export declare function getAvailableRanges(availableStart: number | undefined, availableEnd: number | undefined, intervals: ColorInterval[]): ColorInterval[];

package/dist/types/utils/ranges.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/types/utils/shorten-string.d.ts

@@ -13,4 +13,3 @@
  * ```
  */
 export declare function shortenString(str: string, maxLength: number): string;
-export declare function isLongString(str: string, maxLength: number): boolean;

package/dist/types/utils/sort.d.ts

@@ -1,5 +1,15 @@
-export type SortType = "asc" | "desc" | null;
-export interface SortField<T extends string = string> {
+/**
+ * The vocabulary of sorting: what a column's sort state looks like, and which
+ * way it points. Public — a consumer's table hands `FilterSortField` back to
+ * `useSort` — and declared here rather than in the hook, so the helpers that
+ * read the state owe nothing to the hook that builds it.
+ */
+/** Direction a column is sorted in. */
+export type SortType = "desc" | "asc";
+/** A column and the direction it is sorted in. */
+export interface FilterSortField<T> {
     field: T;
-    direction?: "asc" | "desc";
+    sort: SortType;
 }
+/** Backward compatibility alias. */
+export type SortField<T> = FilterSortField<T>;

package/dist/types/utils/templates.d.ts

@@ -1,84 +1,7 @@
 import { TokenFullData } from '../types/common';
-import type * as React from "react";
 type TokenDataSlice = Pick<TokenFullData, "title" | "decimals"> & {
     symbol?: string;
 };
-/**
- * Formats a percentage value and returns it as a React element
- * Use this when your value is already in percent form (e.g., 2.81 for 2.81%)
- *
- * @param value - The percentage value (e.g., 2.81 for 2.81%)
- * @param decimals - Number of decimal places (default: 2)
- * @returns React element with formatted percentage
- *
- * @example
- * ```tsx
- * {percentageTemplate(2.81)} // "2.81%"
- * {percentageTemplate(50.0, 1)} // "50.0%"
- * ```
- */
-export declare function percentageTemplate(value: number, decimals?: number): React.ReactElement;
-/**
- * Formats a token amount with symbol
- *
- * @param value - The token amount in base units (bigint, string, number, or undefined)
- * @param token - The token data object with title/symbol and decimals
- * @param precision - Number of decimal places (optional)
- * @param spaceSymbol - Symbol to use between amount and token name (default: " ")
- * @param maxLength - Maximum length of the result string (optional, truncates if exceeded)
- * @returns React element with formatted token amount and symbol
- *
- * @example
- * ```tsx
- * {tokenTemplate(1500000000000000000n, { title: "ETH", decimals: 18 })}
- * // "1.5 ETH"
- * {tokenTemplate(1000000n, { title: "USDC", decimals: 6 }, 2)}
- * // "1.00 USDC"
- * {tokenTemplate(1000000n, { title: "VeryLongTokenName", decimals: 6 }, 2, " ", 10)}
- * // "1.00 Very..." (truncated to 10 chars)
- * ```
- */
-export declare function tokenTemplate(value: bigint | string | number | undefined, token: TokenDataSlice | undefined, precision?: number, spaceSymbol?: string, maxLength?: number): string;
-/**
- * Formats a token amount and returns it as a string with token title
- * Use this when you need a formatted number string with token name (not a React element)
- *
- * @param value - The token amount as a number (or undefined)
- * @param token - The token data object with title/symbol and decimals
- * @param precision - Number of decimal places (default: 2)
- * @returns Formatted token amount as string with token title (e.g., "1.50 ETH" or "< 0.01 ETH")
- *
- * @example
- * ```tsx
- * tokenTemplateNumber(1.5, { title: "ETH", decimals: 18 })
- * // "1.50 ETH"
- * tokenTemplateNumber(1.0, { title: "USDC", decimals: 6 }, 2)
- * // "1.00 USDC"
- * tokenTemplateNumber(-1.4001, { title: "ETH", decimals: 18 }, 2)
- * // "-1.40 ETH"
- * tokenTemplateNumber(0.001, { title: "ETH", decimals: 18 }, 2)
- * // "< 0.01 ETH"
- * ```
- */
-export declare function tokenTemplateNumber(value: number | undefined, token: TokenDataSlice | undefined, precision?: number): string;
-/**
- * Formats a token amount as string, handling negative values correctly
- *
- * @param value - The token amount in base units (bigint, string, number, or undefined)
- * @param token - The token data object with title/symbol and decimals
- * @param precision - Number of decimal places (optional)
- * @param spaceSymbol - Symbol to use between amount and token name (default: " ")
- * @returns Formatted string with sign prefix for negative values
- *
- * @example
- * ```ts
- * negativeTokenTemplate(-1500000000000000000n, { title: "ETH", decimals: 18 })
- * // "-1.5 ETH"
- * negativeTokenTemplate(1000000n, { title: "USDC", decimals: 6 }, 2)
- * // "1.00 USDC"
- * ```
- */
-export declare function negativeTokenTemplate(value: bigint | string | number | undefined, token: TokenDataSlice | undefined, precision?: number, spaceSymbol?: string): string;
 /**
  * Formats a token amount as string (non-React version of tokenTemplate)
  *

package/dist/types/utils/z-index.d.ts

@@ -1,29 +1,3 @@
-/**
- * Centralized z-index catalog for overlays (toast, tooltips, modals, loading).
- * Use these values so stacking order is consistent across the app and with consumers (e.g. client).
- *
- * Single source of truth: Z_INDEX_VALUES. Z_INDEX (Tailwind classes) and ZIndexLayer (type) are derived.
- *
- * Order from top to bottom:
- * - TOAST: highest (notifications)
- * - TOOLTIP: below toast, above modals
- * - BANNERS: DataCollectionBanner, DevModeBanner, DevModeInfoModal
- * - MODAL: main app modals (Settings, Ninja, etc.)
- * - MODAL_ALERT: alerts/confirms that open on top of other modals (e.g. RPC warning)
- * - DROPDOWN: dropdown/popover content (portaled to body) — must be above MODAL when inside a modal
- * - LOADING: global loading overlay (below modals so modals can be closed first)
- * - CONTENT: page content
- */
-export declare const Z_INDEX_VALUES: {
-    readonly TOAST: 10000;
-    readonly TOOLTIP: 9000;
-    readonly BANNERS: 800;
-    readonly MODAL: 600;
-    readonly MODAL_ALERT: 700;
-    readonly DROPDOWN: 650;
-    readonly LOADING: 400;
-    readonly CONTENT: 0;
-};
-export type ZIndexLayer = keyof typeof Z_INDEX_VALUES;
+import { ZIndexLayer } from './internal/z-index-values';
 /** Tailwind z-index classes derived from Z_INDEX_VALUES. Use for className. */
 export declare const Z_INDEX: { [K in ZIndexLayer]: string; };