@gearbox-protocol/ui-kit 2.1.0-next.1

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

@@ -0,0 +1,37 @@
+/**
+ * Resolves a CSS color value, including CSS variables, to an actual computed color
+ * @param color - The color string (e.g., "hsl(var(--foreground))" or "#ffffff")
+ * @param fallback - Fallback color if resolution fails
+ * @returns The resolved color value
+ */
+export declare function resolveCSSColor(color: string, fallback?: string): string;
+/**
+ * Gets the current value of a CSS variable from the document root
+ * @param variableName - The CSS variable name (with or without --)
+ * @returns The resolved color value or fallback
+ */
+export declare function getCSSVariable(variableName: string, fallback?: string): string;
+/**
+ * Converts hex color to rgba
+ * @param hex - Hex color string (e.g., "#02c39a" or "#02C39A")
+ * @param alpha - Alpha value (0-1)
+ * @returns rgba color string
+ */
+export declare function hexToRgba(hex: string, alpha: number): string;
+/**
+ * Generates topColor and bottomColor from a base color if not provided
+ * @param color - Base color (hex or rgba)
+ * @returns Object with topColor and bottomColor
+ */
+export declare function generateColorsFromBase(color: string): {
+    topColor: string;
+    bottomColor: string;
+};
+/**
+ * Converts HSL to hex color.
+ * @param h - Hue 0-360
+ * @param s - Saturation 0-100
+ * @param l - Lightness 0-100
+ * @returns Hex color string
+ */
+export declare function hslToHex(h: number, s: number, l: number): string;

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

@@ -0,0 +1,4 @@
+export declare const copyToClipboard: ({ text, name, }: {
+    text: string;
+    name?: string;
+}) => void;

package/dist/types/utils/format-asset-amount.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Format asset amount with precision handling
+ *
+ * @param amount - The bigint amount to format
+ * @param decimals - Number of decimal places for the token
+ * @param precision - Precision to use (default: 3)
+ * @returns Formatted string with proper handling of very small amounts
+ *
+ * @example
+ * ```ts
+ * formatAssetAmount(1000000n, 6) // "1.000"
+ * formatAssetAmount(5n, 6) // "0.000"
+ * formatAssetAmount(1n, 18) // "< 0.000"
+ * ```
+ */
+export declare function formatAssetAmount(amount: bigint, decimals: number, precision?: number): string;

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

@@ -0,0 +1,83 @@
+/**
+ * Formats a number or bigint as a money value with dollar sign prefix
+ *
+ * @param money - The number or bigint to format (bigint is expected in WAD format - 18 decimals)
+ * @param precision - Number of decimal places to show (optional)
+ * @returns Formatted string like "$1.23"
+ *
+ * @example
+ * ```ts
+ * formatMoney(1000) // "$1000.00"
+ * formatMoney(1500000n * 10n**18n) // "$1500000.00"
+ * formatMoney(10000000000000000n) // "< $0.01" (less than 1 cent)
+ * ```
+ */
+export declare function formatMoney(money: number | bigint, precision?: number): string;
+/**
+ * Formats a percentage amount with exponential notation for very large values
+ *
+ * @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 allowExponential - Whether to allow exponential notation for large values (default: true)
+ * @returns Formatted number (without % sign)
+ *
+ * @example
+ * ```ts
+ * formatPercentAmount(2.81, 2) // "2.81"
+ * formatPercentAmount(15000, 2) // "1.50e+4"
+ * formatPercentAmount(15000, 2, false) // "15000.00"
+ * ```
+ */
+export declare function formatPercentAmount(value: number, decimals: number, allowExponential?: 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-number.d.ts

@@ -0,0 +1,68 @@
+/**
+ * Utility functions for formatting numbers with various options
+ * Used by graph formatters and liquidation components
+ */
+/**
+ * Determines the appropriate number of decimal places based on the scaled value.
+ * If the value is small (< 10), we need more precision to distinguish between values.
+ */
+export declare function getAdaptiveDecimals(scaledValue: number): number;
+export interface FormatNumberOptions {
+    /** Use short format with K/M/B suffixes */
+    format?: "full" | "short";
+    /** Minimum fraction digits */
+    minimumFractionDigits?: number;
+    /** Maximum fraction digits */
+    maximumFractionDigits?: number;
+    /** Threshold for exponential notation */
+    maxExponentialThreshold?: number;
+    /** Automatically determine decimals based on magnitude */
+    adaptiveDecimals?: boolean;
+}
+export declare function formatNumberWithSuffix(amount: number, options?: FormatNumberOptions): string;
+/**
+ * Convert a number to significant digits string
+ * For small values (< 1), uses true significant digits
+ * For larger values, uses fixed decimal places
+ *
+ * @example
+ * ```ts
+ * toSignificantDigits(1234567, 4) // "1234567"
+ * toSignificantDigits(1.234, 2) // "1.23"
+ * toSignificantDigits(0.0009400, 4) // "0.00094"
+ * toSignificantDigits(0.00001234, 4) // "0.00001234"
+ * ```
+ */
+export declare function toSignificantDigits(value: number, decimals: number): string;
+/**
+ * Check if a value is effectively zero (within epsilon)
+ */
+export declare function isEffectivelyZero(value: number): boolean;
+/**
+ * Check if a value is below display threshold
+ */
+export declare function isBelowDisplayThreshold(value: number): boolean;
+/**
+ * Format very small values with threshold indicator
+ */
+export declare function formatSmallValue(value: number, suffix?: string): string | null;
+/**
+ * Constants for number formatting
+ */
+export declare const FORMAT_CONSTANTS: {
+    readonly EPSILON: 1e-10;
+    readonly MIN_DISPLAY_THRESHOLD: 0.0001;
+    readonly MAX_EXPONENTIAL_THRESHOLD: 100000000000;
+};
+/**
+ * Format price for liquidation graph tooltip
+ * Handles infinity, very small values, and normal values
+ *
+ * @example
+ * ```ts
+ * formatPrice(1500) // "1,500.00"
+ * formatPrice(0.00001) // "0.00001"
+ * formatPrice(Infinity) // "∞"
+ * ```
+ */
+export declare function formatPrice(value: number, decimals?: number, maxSmallDecimals?: number): string;

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

@@ -0,0 +1,15 @@
+/**
+ * Formats a slippage value to percentage string
+ *
+ * @param slippage - The slippage value (e.g., 10 for 1%)
+ * @param precision - Number of decimal places (default: 1)
+ * @returns Formatted slippage string like "1.0%"
+ *
+ * @example
+ * ```ts
+ * slippageTemplate(10) // "1.0%"
+ * slippageTemplate(5, 2) // "0.50%"
+ * slippageTemplate(undefined) // "-"
+ * ```
+ */
+export declare function slippageTemplate(slippage?: number, precision?: number): string;

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

@@ -0,0 +1,6 @@
+export declare function formatBytecodeSize(size: number): string;
+export declare function formatBytecodeVersion(version: number): string;
+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

@@ -0,0 +1,29 @@
+export * from './a11y';
+export * from './bn-to-input-view';
+export * from './bn-to-pretty-view';
+export * from './cn';
+export { cn as default } from './cn';
+export * from './colors';
+export * from './copy';
+export * from './format';
+export * from './format-asset-amount';
+export { 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-slippage';
+export * from './interface';
+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 './shorten-string';
+export type { SortField as UtilsSortField, SortType } from './sort';
+export * from './templates';
+export * from './ttl';
+export * from './window';
+export * from './z-index';

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

@@ -0,0 +1,24 @@
+/**
+ * Typography variant types
+ */
+export type TypographyVariant = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "body" | "bodySmall" | "caption" | "overline";
+/**
+ * Typography color types
+ */
+export type TypographyColor = "inherit" | "default" | "muted" | "success" | "warning" | "destructive" | "primary";
+/**
+ * Typography weight types
+ */
+export type TypographyWeight = "inherit" | "normal" | "medium" | "semibold" | "bold";
+/**
+ * Typography text alignment types
+ */
+export type TypographyAlign = "inherit" | "left" | "center" | "right";
+/**
+ * Typography line height types
+ */
+export type TypographyLeading = "inherit" | "tight" | "normal" | "relaxed";
+/**
+ * Typography element types
+ */
+export type TypographyElement = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "label";

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

@@ -0,0 +1,3 @@
+export declare function allLoaded(itemsToLoad: Array<unknown>): boolean;
+export declare function round5(value: number): number;
+export declare function loadingProgress(itemsToLoad: Array<unknown>): number;

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

@@ -0,0 +1,10 @@
+export type Decimals = 1 | 10 | 100;
+export declare function formatWithoutDecimals(value: number, decimals: number, precision: number): number;
+export declare function formatWithDecimals(value: number, decimals: number, precision: number): number;
+export declare function decimalsToStep(decimals: number, precision: number): number;
+export declare function splitInterval(left: number, right: number, step: number, additionalPoints?: number[]): number[];
+export declare function validateMinMax(value: number, min: number, max: number): number;
+export declare function findClosestPoint(currentValue: number, specialPoints: Array<number | undefined>, decimals: number): {
+    minPoint: number;
+    minDistance: number;
+};

package/dist/types/utils/network-icons.d.ts

@@ -0,0 +1,20 @@
+import { NetworkType } from '@gearbox-protocol/sdk';
+/**
+ * Known network icons type.
+ * Accepts any NetworkType from SDK plus "AllNetworks" and arbitrary strings
+ * for forward compatibility with new networks.
+ */
+export type NetworkIcons = NetworkType | "AllNetworks";
+/**
+ * Get network icon path by network name
+ *
+ * @param network - Network name (e.g., "Mainnet", "Arbitrum")
+ * @returns Path to network icon or empty string if not found
+ *
+ * @example
+ * ```ts
+ * getNetworkIcon("Mainnet") // "/icons/networks/ethereum.svg"
+ * getNetworkIcon("Unknown") // ""
+ * ```
+ */
+export declare function getNetworkIcon(network: NetworkIcons): string;

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

@@ -0,0 +1,13 @@
+export declare function isPositiveFloat(val: string): boolean;
+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/plural.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Selects the appropriate plural form for a count (Russian pluralization rules)
+ *
+ * Russian has 3 plural forms:
+ * - singular (1 яблоко)
+ * - few (2-4 яблока)
+ * - many (5-20 яблок, 0 яблок)
+ *
+ * @param count - The number to determine plural form for
+ * @param forms - Array of [singular, few, many] forms
+ * @returns The appropriate plural form
+ *
+ * @example
+ * ```ts
+ * selectPluralString(1, ["яблоко", "яблока", "яблок"]) // "яблоко"
+ * selectPluralString(2, ["яблоко", "яблока", "яблок"]) // "яблока"
+ * selectPluralString(5, ["яблоко", "яблока", "яблок"]) // "яблок"
+ * ```
+ */
+export declare function selectPluralString(count: number, forms: [string, string, string]): string;
+/**
+ * English plural helper (simple s/no-s rule)
+ *
+ * @param count - The number to determine plural form for
+ * @param singular - Singular form
+ * @param plural - Plural form (optional, defaults to singular + "s")
+ * @returns The appropriate form
+ *
+ * @example
+ * ```ts
+ * pluralize(1, "apple") // "apple"
+ * pluralize(2, "apple") // "apples"
+ * pluralize(0, "child", "children") // "children"
+ * ```
+ */
+export declare function pluralize(count: number, singular: string, plural?: string): string;

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

@@ -0,0 +1,33 @@
+/**
+ * Color interval for slider or progress visualization
+ */
+export interface ColorInterval {
+    /** Start of interval */
+    start: number;
+    /** End of interval */
+    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

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

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

@@ -0,0 +1,31 @@
+import * as React from "react";
+/**
+ * Helper function to extract text content from React.ReactNode
+ * Recursively extracts text from React elements, strings, numbers, etc.
+ *
+ * @param label - The React node to extract text from
+ * @returns The extracted text content as a string
+ *
+ * @example
+ * ```tsx
+ * extractTextFromLabel("Simple text"); // "Simple text"
+ * extractTextFromLabel(<span>Text with <strong>bold</strong></span>); // "Text with bold"
+ * extractTextFromLabel([<span>Part 1</span>, <span>Part 2</span>]); // "Part 1 Part 2"
+ * ```
+ */
+export declare function extractTextFromLabel(label: React.ReactNode): string;
+/**
+ * Helper function to safely serialize a value to a string key
+ * Handles BigInt and other non-serializable values
+ *
+ * @param value - The value to serialize
+ * @returns A string representation of the value suitable for use as a key
+ *
+ * @example
+ * ```tsx
+ * serializeValue("test"); // "test"
+ * serializeValue(123n); // "bigint:123"
+ * serializeValue({ a: 1, b: 2 }); // '{"a":1,"b":2}'
+ * ```
+ */
+export declare function serializeValue(value: unknown): string;

package/dist/types/utils/reactochart-compat.d.ts

@@ -0,0 +1,12 @@
+import { default as ColorHeatmapImport } from 'reactochart/ColorHeatmap';
+import { default as XAxisImport } from 'reactochart/XAxis';
+import { default as XLineImport } from 'reactochart/XLine';
+import { default as XYPlotImport } from 'reactochart/XYPlot';
+import { default as YAxisImport } from 'reactochart/YAxis';
+import { default as YLineImport } from 'reactochart/YLine';
+export declare const ColorHeatmap: typeof ColorHeatmapImport;
+export declare const XAxis: typeof XAxisImport;
+export declare const XLine: typeof XLineImport;
+export declare const XYPlot: typeof XYPlotImport;
+export declare const YAxis: typeof YAxisImport;
+export declare const YLine: typeof YLineImport;

package/dist/types/utils/search-in-token.d.ts

@@ -0,0 +1,43 @@
+import { TokenFullData } from '../types/common';
+type TokenDataSlice = Pick<TokenFullData, "title" | "symbol" | "name" | "address">;
+/**
+ * Searches for a match in token data (name, symbol, title, or address)
+ *
+ * @param token - Token data object to search in
+ * @param search - Search string (case-insensitive)
+ * @returns true if search string is found in any token field
+ *
+ * @example
+ * ```ts
+ * const token = {
+ *   title: "Ethereum",
+ *   symbol: "ETH",
+ *   address: "0x..."
+ * };
+ *
+ * searchInToken(token, "eth") // true
+ * searchInToken(token, "Ethereum") // true
+ * searchInToken(token, "0x") // true
+ * searchInToken(token, "btc") // false
+ * ```
+ */
+export declare function searchInToken(token: TokenDataSlice | undefined, search: string): boolean;
+/**
+ * Creates a filter function for tokens based on search string
+ *
+ * @param search - Search string (case-insensitive)
+ * @returns Filter function that can be used with Array.filter
+ *
+ * @example
+ * ```ts
+ * const tokens = [
+ *   { title: "Ethereum", symbol: "ETH" },
+ *   { title: "Bitcoin", symbol: "BTC" },
+ * ];
+ *
+ * const filtered = tokens.filter(createTokenSearchFilter("eth"));
+ * // [{ title: "Ethereum", symbol: "ETH" }]
+ * ```
+ */
+export declare function createTokenSearchFilter(search: string): (token: TokenDataSlice | undefined) => boolean;
+export {};

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

@@ -0,0 +1,15 @@
+/**
+ * Case-insensitive search within a string
+ *
+ * @param haystack - The string to search in
+ * @param needle - The substring to search for
+ * @returns true if needle is found in haystack (case-insensitive)
+ *
+ * @example
+ * ```ts
+ * searchInString("Hello World", "world") // true
+ * searchInString("Hello World", "xyz") // false
+ * searchInString("", "") // true
+ * ```
+ */
+export declare function searchInString(haystack: string, needle: string): boolean;

package/dist/types/utils/short-sha.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Shortens a SHA string to its first 7 characters
+ *
+ * @example
+ * ```ts
+ * shortSHA("abc123def456") // "abc123d"
+ * ```
+ */
+export declare const shortSHA: (sha: string) => string;

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

@@ -0,0 +1,16 @@
+/**
+ * Shorten a string to a maximum length with ellipsis
+ *
+ * @param str - The string to shorten
+ * @param maxLength - Maximum length before truncation (default: 10)
+ * @returns Shortened string with ellipsis if truncated
+ *
+ * @example
+ * ```ts
+ * shortenString("Hello World", 5) // "Hello..."
+ * shortenString("Hi", 10) // "Hi"
+ * shortenString("A very long string", 10) // "A very lon..."
+ * ```
+ */
+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

@@ -0,0 +1,5 @@
+export type SortType = "asc" | "desc" | null;
+export interface SortField<T extends string = string> {
+    field: T;
+    direction?: "asc" | "desc";
+}

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

@@ -0,0 +1,3 @@
+export declare const STATIC_SERVER = "https://static.gearbox.finance";
+export declare const buildStaticUrl: (domain?: string) => (url: string) => string;
+export declare const getStatic: (url: string) => string;