@gearbox-protocol/ui-kit 4.0.0-next.5 → 4.0.0-next.50

package/dist/types/locale/en.json.d.ts

@@ -20,9 +20,9 @@ declare const _default: {
   "components.footer.built": "Built at ETHGlobal MarketMake hackathon.",
   "components.footer.version": "Version {value}",
 
-  "components.blockSyncPill.syncError": ", sync error",
-  "components.blockSyncPill.syncedAt": ", synced at {time}",
-  "components.blockSyncPill.syncing": ", syncing…",
+  "components.sdkStatus.connecting": "Connecting…",
+  "components.sdkStatus.connected": "Connected",
+  "components.sdkStatus.disconnected": "Not connected",
 
   "components.creditAccountHistory.table.protocol": "Protocol",
   "components.creditAccountHistory.table.operation": "Operation",
@@ -60,23 +60,24 @@ declare const _default: {
   "components.filterModal.reset": "Reset",
   "components.filterModal.apply": "Apply",
 
+  "components.value.accruing": "Averaged data is still being computed and will be available shortly.",
   "components.APY.tip": "These APYs are derived from the underlying protocols’ APIs and may differ in reality. Check respective protocols for their methodology.",
 
   "components.creditSessionDetailedLiquidation.graph.noData": "No data",
-  "components.creditSessionDetailedLiquidation.graph.legend.point": "Current price",
+  "components.creditSessionDetailedLiquidation.graph.legend.point": "Current Price",
   "components.creditSessionDetailedLiquidation.graph.legend.area": "Liquidation Area",
   "components.creditSessionDetailedLiquidation.graph.tip.hf": "Health Factor",
   "components.creditSessionDetailedLiquidation.graph.tip.price": "Price",
   "components.creditSessionDetailedLiquidation.table.noData": "No data",
   "components.creditSessionDetailedLiquidation.table.seeGraph": "See graph",
   "components.creditSessionDetailedLiquidation.table.asset": "Asset",
-  "components.creditSessionDetailedLiquidation.table.currentPrice": "Current price",
-  "components.creditSessionDetailedLiquidation.table.modelPrice": "Model price",
+  "components.creditSessionDetailedLiquidation.table.currentPrice": "Current Price",
+  "components.creditSessionDetailedLiquidation.table.modelPrice": "Model Price",
 
   "components.apyParts.features.points": "Points",
   "components.apyParts.features.incent": "Incent.",
   "components.apyParts.supplyAPY": "Organic APY",
-  "components.apyParts.title": "APY type",
+  "components.apyParts.title": "APY Type",
   "components.apyParts.supplyAPY.tip": "Yield from lending funds",
   "components.apyParts.tokenYield": "Intrinsic APY",
   "components.apyParts.tokenYield.tip": "Yield from holding wstETH",
@@ -87,19 +88,29 @@ declare const _default: {
   "components.apyParts.points.condition.crossDeposit": "For cross-chain deposits made via Omni",
 
   "components.yieldBreakdown.titleNetAtLeverage": "Net APY at {leverage}× Leverage",
+  "components.yieldBreakdown.titleNetAtLeverage7d": "Net APY at {leverage}× Leverage (7d)",
+  "components.yieldBreakdown.titleNet": "Net APY",
+  "components.yieldBreakdown.titleNet7d": "Net APY (7d)",
   "components.yieldBreakdown.collateralApy": "Collateral APY",
+  "components.yieldBreakdown.collateralApy7d": "Collateral APY (7d)",
+  "components.yieldBreakdown.baseApy": "Base APY",
+  "components.yieldBreakdown.baseApy7d": "Base APY (7d)",
   "components.yieldBreakdown.incentive": "Incentive",
+  "components.yieldBreakdown.incentiveApy": "Incentive APY",
+  "components.yieldBreakdown.incentiveApy7d": "Incentive APY (7d)",
   "components.yieldBreakdown.borrowRate": "Borrow Rate",
+  "components.yieldBreakdown.borrowRate7d": "Borrow Rate (7d)",
   "components.yieldBreakdown.programPoints": "{name} Points",
   "components.yieldBreakdown.points": "Points",
 
   "components.openCopyButtons.copy": "Copy to clipboard",
+  "components.openCopyButtons.explorer": "View in explorer",
 
   "components.poolAssetsTable.asset": "Name",
-  "components.poolAssetsTable.rate": "Effective rate",
+  "components.poolAssetsTable.rate": "Effective Rate",
   "components.poolAssetsTable.exposure": "Exposure",
   "components.poolAssetsTable.cap": "Cap",
-  "components.poolAssetsTable.capUtilization": "Cap utilization",
+  "components.poolAssetsTable.capUtilization": "Cap Utilization",
   "components.poolAssetsTable.usage": "{amount} of {total}",
   "components.poolAssetsTable.head.name": "Credit Manager",
   "components.poolAssetsTable.head.currentDebt": "Current Debt",
@@ -110,13 +121,13 @@ declare const _default: {
   "components.creditManagerInfo.title": "Assets and LT’s",
   "components.creditManagerInfo.info.title": "Credit Managers",
   "components.creditManagerInfo.info.copy.tip": "Copy Credit Manager address",
-  "components.creditManagerInfo.info.minDebt": "Min debt",
-  "components.creditManagerInfo.info.maxDebt": "Max debt",
-  "components.creditManagerInfo.info.liquidationFee": "Liquid. fee",
-  "components.creditManagerInfo.info.liquidationPremium": "Liquid. premium",
-  "components.creditManagerInfo.info.interestFee": "Interest fee",
-  "components.creditManagerInfo.info.debtLimit": "Debt limit",
-  "components.creditManagerInfo.info.maxEnabledTokens": "Max tokens",
+  "components.creditManagerInfo.info.minDebt": "Min Debt",
+  "components.creditManagerInfo.info.maxDebt": "Max Debt",
+  "components.creditManagerInfo.info.liquidationFee": "Liquid. Fee",
+  "components.creditManagerInfo.info.liquidationPremium": "Liquid. Premium",
+  "components.creditManagerInfo.info.interestFee": "Interest Fee",
+  "components.creditManagerInfo.info.debtLimit": "Debt Limit",
+  "components.creditManagerInfo.info.maxEnabledTokens": "Max Tokens",
 
   "dialogs.oraclesAndLTInfo.filter.hide0Quota": "Hide 0-Quota",
 
@@ -135,9 +146,9 @@ declare const _default: {
   "components.poolTable.supplyApy.tip": "Annual percentage yield that you earn for supplying capital. This number constantly changes as the utilization of the Markets goes up and down",
   "components.poolTable.depositApy": "Deposit APY",
   "components.poolTable.depositApy.tip": "Deposit APY breakdown: base rate, extra rewards, and points",
-  "components.poolTable.borrowApy": "Borrow APY",
+  "components.poolTable.borrowApy": "Borrow Rate",
   "components.poolTable.utilizationApy": "Utilization APY",
-  "components.poolTable.borrowApy.tip": "On top of the utilization borrow APY, there is a borrow quota APY for different assets",
+  "components.poolTable.borrowApy.tip": "On top of the utilization borrow rate, there is a borrow quota rate for different assets",
   "components.poolTable.utilization": "Utilization",
   "components.poolTable.collateral": "Collateral",
   "components.poolTable.collateral.showAll": "Show All",
@@ -156,7 +167,7 @@ declare const _default: {
   "components.rewardsTooltip.without.extra.tip": "Any deposit through Gearbox",
   "components.rewardsTooltip.with.title": "With {leverage} Leverage",
   "components.rewardsTooltip.with.borrowRate": "{symbol} borrow rate",
-  "components.rewardsTooltip.with.quotaRate": "Quota rate",
+  "components.rewardsTooltip.with.quotaRate": "Quota Rate",
   "components.rewardsTooltip.with.extra": "+ Extra APR",
   "components.rewardsTooltip.button": "Click to show rewards details",
 
@@ -185,15 +196,15 @@ declare const _default: {
 
   "components.leverageInput.label": "Leverage",
   "components.leverageInput.reset": "Reset",
-  "components.leverageInput.available": "Available leverage",
+  "components.leverageInput.available": "Available Leverage",
 
-  "components.healthFactorBlock.label": "Health factor",
+  "components.healthFactorBlock.label": "Health Factor",
   "components.healthFactorBlock.tip": "Health Factor is a numeric representation of your account 'health'. If your health factor drops below 1 or close to it, you might be liquidated.",
 
   "components.liquidationPriceBlock.label": "Liquidation Price",
   "components.liquidationPriceBlock.tip": "The asset price at which the account's health factor would reach 1 and become eligible for liquidation.",
 
-  "components.timeToLiquidationBlock.label": "Time to liquidation",
+  "components.timeToLiquidationBlock.label": "Time to Liquidation",
   "components.timeToLiquidationBlock.tip": "Time to liquidation estimates how long the account can stay open if prices remain constant and no yield is earned—only accounting for borrow interest accrual.",
 
   "components.historyChart.error": "Couldn't load chart data",
@@ -211,29 +222,31 @@ declare const _default: {
   "components.moreAccordion.more": "More details",
   "components.moreAccordion.less": "Less details",
 
-  "components.poolApyBreakdownCard.title": "APY Breakdown",
-  "components.poolApyBreakdownCard.organicApy": "Pool organic APY",
+  "components.poolApyBreakdownCard.title": "Net APY",
+  "components.poolApyBreakdownCard.title7d": "Net APY (7d)",
+  "components.poolApyBreakdownCard.organicApy": "Base APY",
+  "components.poolApyBreakdownCard.organicApy7d": "Base APY (7d)",
   "components.poolApyBreakdownCard.incentiveApy": "Incentive APY",
-
-  "components.strategyApyBreakdownCard.titleAtLeverage": "APY at {leverage}× Leverage",
-  "components.strategyApyBreakdownCard.collateralApy": "Collateral APY",
-  "components.strategyApyBreakdownCard.incentiveApy": "Incentive APY",
-  "components.strategyApyBreakdownCard.borrowRate": "Borrow Rate",
-  "components.strategyApyBreakdownCard.formula": "{base} × {leverage} Lev.",
+  "components.poolApyBreakdownCard.incentiveApy7d": "Incentive APY (7d)",
+  "components.strategyApyBreakdownCard.formula": "{leverage} × {base}",
+  "components.strategyApyBreakdownCard.borrowFormula": "{leverage} × {totalRate} − {borrowRate}",
 
   "components.leveragePresetChips.label": "Leverage:",
 
-  "components.liquidationParamsTable.lt": "Liquidation threshold",
-  "components.liquidationParamsTable.penalty": "Liquidation discount",
-  "components.liquidationParamsTable.premium": "Liquidation premium",
-  "components.liquidationParamsTable.fee": "Liquidation fee",
+  "components.liquidationParamsTable.lt": "Liquidation Threshold",
+  "components.liquidationParamsTable.penalty": "Liquidation Discount",
+  "components.liquidationParamsTable.premium": "Liquidation Premium",
+  "components.liquidationParamsTable.fee": "Liquidation Fee",
 
-  "components.borrowRateBlock.label": "Borrow rate",
+  "components.borrowRateBlock.label": "Borrow Rate",
   "components.borrowRateBlock.tip": "Borrow rate is displayed for your entire position size in total. You can reduce it in quota management.",
   "components.borrowRateBlock.description": "Your borrow rate consists of the Base Rate plus the Quota Rates for every asset separately.",
   "components.borrowRateBlock.baseRate": "Base Rate for Debt",
-  "components.borrowRateBlock.normalization": "Rates normalization",
-  "components.borrowRateBlock.normalization.tip": "Borrowers pay {quota} and {utilization}, which have a different base. Therefore, the total borrow rate value is normalized by Account value or Debt amount."
+  "components.borrowRateBlock.normalization": "Rates Normalization",
+  "components.borrowRateBlock.normalization.tip": "Borrowers pay {quota} and {utilization}, which have a different base. Therefore, the total borrow rate value is normalized by Account value or Debt amount.",
+
+  "components.transactionConfirm.previewLoading": "Parsing transaction…",
+  "components.transactionConfirm.previewErrorTitle": "Preview error"
 }
 ;
 

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

@@ -1,4 +1,3 @@
 export type * from './filter';
-export type * from './footer';
 export type * from './graph';
 export type * from './range-item';

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

@@ -5,12 +5,6 @@
  * @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")

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

@@ -86,4 +86,3 @@ export interface FormatMoneyAmountProps {
     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

@@ -7,7 +7,7 @@
  * If the value is small (< 10), we need more precision to distinguish between values.
  */
 export declare function getAdaptiveDecimals(scaledValue: number): number;
-export interface FormatNumberOptions {
+interface FormatNumberOptions {
     /** Use short format with K/M/B suffixes */
     format?: "full" | "short";
     /** Minimum fraction digits */
@@ -34,10 +34,6 @@ export declare function formatNumberWithSuffix(amount: number, options?: FormatN
  * ```
  */
 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
  */
@@ -66,3 +62,4 @@ export declare const FORMAT_CONSTANTS: {
  * ```
  */
 export declare function formatPrice(value: number, decimals?: number, maxSmallDecimals?: number): string;
+export {};

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,4 +1,3 @@
-export * from './a11y';
 export * from './apy-breakdown';
 export * from './bn-to-input-view';
 export * from './bn-to-pretty-view';
@@ -6,27 +5,19 @@ 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-number';
 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 './templates';
 export * from './token-icon-source';
 export * from './ttl';

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

@@ -1,3 +1,2 @@
-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

@@ -1,7 +1,4 @@
-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): {

package/dist/types/utils/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/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/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/token-icon-source.d.ts

@@ -1,4 +1,28 @@
-import { IconComposite } from '@gearbox-protocol/sdk/common-utils';
+/** One layer of a composite icon: a token symbol to resolve, or a ready URL. */
+export type TokenIconLayerSource = {
+    type: "symbol";
+    symbol: string;
+} | {
+    type: "url";
+    url: string;
+};
+/**
+ * Named layout preset for a composite icon. The pixel layout is `TokenIcon`'s,
+ * never an API payload's — which is why these types live here and not in the
+ * SDK read model.
+ *
+ * `centered_foreground`: background full size, foreground centered at ~65%
+ * (a token on a plate).
+ */
+export type TokenIconCompositePreset = "centered_foreground";
+/** Client-composed token icon: layers stacked by preset. */
+export type IconComposite = {
+    kind: "composite";
+    preset: TokenIconCompositePreset;
+    scaleFactor?: number;
+    /** Exactly two layers (bottom then top). */
+    layers: readonly [TokenIconLayerSource, TokenIconLayerSource];
+};
 /** Same shape as `TokenIcon`'s `symbol` prop — kept here to avoid a cycle. */
 export type TokenIconSource = string | {
     icon: string;

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

@@ -13,35 +13,6 @@ export type TTLZones = "good" | "medium" | "bad";
  * ```
  */
 export declare function getTTLZones(ttl: number | bigint | undefined): TTLZones | undefined;
-/**
- * Format remaining time as a human-readable string
- *
- * @param ttl - Time to live in milliseconds
- * @returns Formatted string like "5d 12h", "3h 45m", "< 1m"
- *
- * @example
- * ```ts
- * ttlLeftHuman(5 * DAY + 12 * HOUR) // "5d 12h"
- * ttlLeftHuman(3 * HOUR + 45 * MINUTE) // "3h 45m"
- * ttlLeftHuman(30 * SECOND) // "< 1m"
- * ttlLeftHuman(0) // "Expired"
- * ```
- */
-export declare function ttlLeftHuman(ttl: number | bigint | undefined): string;
-/**
- * Format timestamp to remaining time string
- *
- * @param timestamp - Unix timestamp in seconds or milliseconds
- * @param nowMs - Current time in milliseconds (default: Date.now())
- * @returns Formatted string like "5d 12h remaining" or "Expired"
- *
- * @example
- * ```ts
- * const expiresAt = Date.now() + 5 * DAY;
- * ttlFromTimestamp(expiresAt) // "5d 0h"
- * ```
- */
-export declare function ttlFromTimestamp(timestamp: number | bigint | undefined, nowMs?: number): string;
 /**
  * Result of ttlLeftParsed function
  */
@@ -66,11 +37,3 @@ export type TTLLeftResult = {
  * ```
  */
 export declare function ttlLeft(ttl: number | bigint): TTLLeftResult;
-export declare const TTL_CONSTANTS: {
-    readonly SECOND: 1000;
-    readonly MINUTE: number;
-    readonly HOUR: number;
-    readonly DAY: number;
-    readonly WEEK: number;
-    readonly MONTH: number;
-};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gearbox-protocol/ui-kit",
-  "version": "4.0.0-next.5",
+  "version": "4.0.0-next.50",
   "description": "Internal UI components",
   "repository": {
     "type": "git",
@@ -55,48 +55,38 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^7.1.0",
-    "@fortawesome/free-solid-svg-icons": "^7.1.0",
-    "@fortawesome/react-fontawesome": "^3.1.1",
-    "@gearbox-protocol/static": "^1.117.2",
+    "@fortawesome/fontawesome-svg-core": "^7.3.1",
+    "@fortawesome/free-solid-svg-icons": "^7.3.1",
+    "@fortawesome/react-fontawesome": "^3.5.0",
+    "@gearbox-protocol/static": "^1.133",
     "@radix-ui/react-accordion": "^1.2.2",
     "@radix-ui/react-alert-dialog": "^1.1.4",
-    "@radix-ui/react-avatar": "^1.1.2",
     "@radix-ui/react-checkbox": "^1.1.3",
-    "@radix-ui/react-collapsible": "^1.1.2",
     "@radix-ui/react-dialog": "^1.1.4",
     "@radix-ui/react-dropdown-menu": "^2.1.4",
     "@radix-ui/react-label": "^2.1.1",
-    "@radix-ui/react-progress": "^1.1.1",
     "@radix-ui/react-radio-group": "^1.2.2",
     "@radix-ui/react-select": "^2.1.4",
-    "@radix-ui/react-separator": "^1.1.1",
     "@radix-ui/react-slider": "^1.2.2",
     "@radix-ui/react-slot": "^1.1.1",
-    "@radix-ui/react-switch": "^1.1.2",
     "@radix-ui/react-tabs": "^1.1.2",
     "@radix-ui/react-tooltip": "^1.1.6",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lightweight-charts": "^5.2.0",
+    "lightweight-charts": "^5.2.1",
     "luxon": "^3.5.0",
-    "sonner": "^2.0.7",
     "tailwind-merge": "^3.4.0",
     "tailwindcss-animate": "^1.0.7"
   },
   "peerDependencies": {
-    "axios": "^1.0.0",
     "@gearbox-protocol/sdk": "*",
-    "@tanstack/react-query": "^5.64.1",
     "@types/react": "^18 || ^19",
-    "@types/react-dom": "^18 || ^19",
     "react": "^18 || ^19",
-    "react-dom": "^18 || ^19",
-    "react-intl": "^6.0.0 || ^7.0.0",
+    "react-intl": "^6.0.0 || ^7.0.0 || ^10.0.0",
     "react-router-dom": "^6.0.0 || ^7.0.0",
     "sonner": "^2.0.0",
-    "viem": "^2.0.0",
-    "wagmi": "^2.0.0"
+    "tailwindcss": "^4.0.0",
+    "viem": "^2.0.0"
   },
   "peerDependenciesMeta": {
     "react-intl": {
@@ -105,18 +95,17 @@
     "react-router-dom": {
       "optional": true
     },
-    "sonner": {
+    "tailwindcss": {
       "optional": true
     }
   },
   "devDependencies": {
-    "axios": "^1.12.2",
     "@biomejs/biome": "^2.2.4",
     "@chromatic-com/storybook": "^4.1.3",
     "@commitlint/cli": "^20.1.0",
     "@commitlint/config-conventional": "^20.0.0",
     "@gearbox-protocol/biome-config": "^1.0.2",
-    "@gearbox-protocol/sdk": "15.1.0-next.8",
+    "@gearbox-protocol/sdk": "16.0.0-next.22",
     "@rollup/plugin-typescript": "^12.3.0",
     "@storybook/addon-a11y": "^10.0.8",
     "@storybook/addon-docs": "^10.0.8",
@@ -124,12 +113,11 @@
     "@storybook/addon-themes": "^10.0.8",
     "@storybook/addon-vitest": "^10.0.8",
     "@storybook/react-vite": "^10.0.8",
-    "@tailwindcss/postcss": "^4.1.14",
-    "@tanstack/react-query": "^5.64.1",
+    "@tailwindcss/postcss": "^4.3.3",
     "@types/cross-spawn": "^6.0.6",
-    "@types/luxon": "^3.4.2",
-    "@types/react": "^19.1.16",
-    "@types/react-dom": "^19.1.9",
+    "@types/luxon": "^3.7.5",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.5",
     "@vitejs/plugin-react": "^5.1.1",
     "@vitest/browser-playwright": "^4.0.14",
     "@vitest/coverage-v8": "^4.0.14",
@@ -143,22 +131,22 @@
     "lightningcss": "^1.30.2",
     "lint-staged": "^16.2.3",
     "playwright": "^1.57.0",
-    "postcss": "^8.5.6",
+    "postcss": "^8.5.26",
     "postcss-cli": "^11.0.0",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
-    "react-intl": "^6.7.4",
-    "react-router-dom": "^7.9.6",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "react-intl": "^10.1.23",
+    "react-router-dom": "^7.18.2",
+    "sonner": "^2.0.8",
     "storybook": "^10.0.8",
     "tailwind-scrollbar": "^4.0.2",
-    "tailwindcss": "^4.1.14",
+    "tailwindcss": "^4.3.3",
     "typescript": "^5.9.3",
-    "viem": "^2.45.3",
+    "viem": "^2.55.19",
     "vite": "^6.3.5",
     "vite-plugin-dts": "^4.5.4",
     "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^4.0.14",
-    "wagmi": "^2.19.4"
+    "vitest": "^4.0.14"
   },
   "commitlint": {
     "extends": [

package/dist/cjs/components/base/side-card/constants.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class t{static root="side-card-root";static title="side-card-title";static body="side-card-body"}exports.SideCardTest=t;

package/dist/cjs/components/base/side-card/index.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./constants.cjs"),d=require("./side-card.cjs");exports.SideCardTest=e.SideCardTest;exports.SideCard=d.SideCard;

package/dist/cjs/components/base/side-card/side-card.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("../text/use-title-text.cjs"),c=require("../../typography/typography.cjs");require("react");require("@gearbox-protocol/sdk");const l=require("../../../utils/cn.cjs");require("sonner");require("@gearbox-protocol/sdk/common-utils");require("luxon");require("../../../utils/z-index.cjs");const r=require("./constants.cjs");function u({title:t,tip:s,children:d,className:i,testId:a}){const o=n.useTitleText();return e.jsxs("div",{className:l.cn("@container flex w-full flex-col gap-4 rounded-lg border border-border bg-card p-4 sm:p-6",i),"data-testid":a??r.SideCardTest.root,children:[e.jsxs("div",{className:"flex items-center gap-1.5",children:[e.jsx(c.Typography,{as:"span",variant:"body",className:"m-0 text-base font-semibold leading-none text-card-foreground","data-testid":r.SideCardTest.title,children:o(t)}),s]}),e.jsx("div",{className:"grid grid-cols-1 gap-4 @[24rem]:grid-cols-2 @[40rem]:grid-cols-3","data-testid":r.SideCardTest.body,children:d})]})}exports.SideCardTest=r.SideCardTest;exports.SideCard=u;