@gearbox-protocol/ui-kit 3.14.0-next.6 → 3.14.0-next.60

package/dist/types/components/vertical-indicator/vertical-indicator.d.ts

@@ -24,6 +24,12 @@ export interface VerticalIndicatorProps extends Omit<React.HTMLAttributes<HTMLDi
     value?: React.ReactNode;
     /** New value shown after an arrow (value → valueTo); the first value is shown with line-through */
     valueTo?: React.ReactNode;
+    /**
+     * When true (default) and valueTo is provided, the old value (value) is rendered in
+     * secondary-foreground color to visually dim it. Set to false to keep the original color
+     * (e.g. for Health Factor which uses zone-based coloring).
+     */
+    dimPreviousValue?: boolean;
     /** Called when the tip icon is hovered */
     onPointerEnterTip?: () => void;
 }

package/dist/types/configs/tailwind-preset.d.ts

@@ -64,6 +64,7 @@ export declare const preset: {
                 "success-hover": string;
                 warning: string;
                 liquidation: string;
+                "liquidation-line": string;
                 border: string;
                 input: string;
                 ring: string;

package/dist/types/hooks/use-filter.d.ts

@@ -23,6 +23,52 @@ export type SortSetterFunction<T> = (field: T, startFromSort?: SortType) => void
  * Hook for managing sort state
  */
 export declare function useSort<T>(initialState?: FilterSortField<T> | null): readonly [FilterSortField<T> | null, SortSetterFunction<T>];
+/**
+ * Ordered list of active sort keys. The first entry is the primary sort key,
+ * the second is the tie-breaker, and so on. An empty array means "no sort".
+ */
+export type MultiSortField<T> = ReadonlyArray<FilterSortField<T>>;
+/** Resolved sort state for a single column inside a {@link MultiSortField}. */
+export interface MultiSortFieldState {
+    /** Sort direction for this field, or `undefined` when the field is inactive. */
+    sort: SortType | undefined;
+    /**
+     * 1-based position of the field within the active sort keys, or `undefined`
+     * when the field is inactive. Use it to render a priority badge (1, 2, …).
+     */
+    priority: number | undefined;
+}
+export type MultiSortSetterFunction<T> = (field: T, startFromSort?: SortType) => void;
+/**
+ * Resolve the direction and priority of a single field within a multi-sort.
+ *
+ * @example
+ * ```tsx
+ * const { sort, priority } = getSortForFields("type", state);
+ * <HeadCell sortDirection={sort} sortPriority={state.length > 1 ? priority : undefined} />
+ * ```
+ */
+export declare const getSortForFields: <T>(field: T, state: MultiSortField<T> | null) => MultiSortFieldState;
+/**
+ * Pure reducer behind {@link useMultiSort}. Each field cycles through three
+ * states on successive clicks: `startFromSort` → the opposite direction →
+ * removed. Clicking a brand-new field makes it the primary key (existing keys
+ * become tie-breakers) and the lowest-priority key is dropped once `maxFields`
+ * is reached.
+ */
+export declare function nextMultiSortState<T>(prev: MultiSortField<T>, field: T, startFromSort?: SortType, maxFields?: number): MultiSortField<T>;
+export interface UseMultiSortOptions {
+    /** Maximum number of simultaneously active sort keys. Defaults to `2`. */
+    maxFields?: number;
+}
+/**
+ * Hook for managing sort state across multiple fields (e.g. sort by `type`,
+ * then by `apy`). Mirrors {@link useSort} but keeps an ordered list of keys.
+ */
+export declare function useMultiSort<T>(initialState?: MultiSortField<T> | null, { maxFields }?: UseMultiSortOptions): readonly [MultiSortField<T>, MultiSortSetterFunction<T>, {
+    readonly removeSortField: (field: T) => void;
+    readonly resetSort: () => void;
+}];
 interface GeneralRangeFilterState {
     state: FilterRange | null;
 }

package/dist/types/index.d.ts

@@ -14,6 +14,7 @@ export * from './components/avatar';
 export * from './components/badge';
 export * from './components/base-link';
 export * from './components/block-sync';
+export * from './components/block-sync-pill';
 export * from './components/breadcrumbs';
 export * from './components/button-checkbox';
 export * from './components/buttons';
@@ -142,6 +143,7 @@ export * from './configs/variants';
 export * from './hooks';
 export type { LocaleKeys } from './locale';
 export * from './locale';
+export type { BlockSyncProps } from './types/footer';
 export { EnglishLocale };
 export * from './test-ids';
 export * from './utils';

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

@@ -18,6 +18,19 @@ 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.creditAccountHistory.table.protocol": "Protocol",
+  "components.creditAccountHistory.table.operation": "Operation",
+  "components.creditAccountHistory.table.details": "Details",
+
+  "components.notificationCenter.empty": "No notifications yet",
+  "components.notificationCenter.requests": "Requests",
+  "components.notificationCenter.recent": "Recent",
+  "components.notificationCenter.clear": "Clear all",
+
   "components.liquidationPrice.check": "Check Area",
 
   "components.loading.loading": "Loading",

package/dist/types/test-ids/index.d.ts

@@ -6,6 +6,7 @@
  * tests run outside a bundler.
  */
 export * from './currency-button';
+export * from './notification-center';
 export * from './pool-credit-manager-info';
 export * from './pool-credit-managers-table';
 export * from './pool-table';

package/dist/types/test-ids/notification-center.d.ts

@@ -0,0 +1,13 @@
+export declare const notificationCenterTestIds: {
+    readonly root: "notification-center-root";
+    readonly trigger: "notification-center-trigger";
+    readonly badge: "notification-center-badge";
+    readonly panel: "notification-center-panel";
+    readonly requestsSection: "notification-center-requests";
+    readonly requestRow: "notification-center-request-row";
+    readonly requestExecute: "notification-center-request-execute";
+    readonly successSection: "notification-center-success";
+    readonly successRow: "notification-center-success-row";
+    readonly empty: "notification-center-empty";
+    readonly clear: "notification-center-clear";
+};

package/dist/types/types/footer.d.ts

@@ -3,12 +3,22 @@
  */
 export interface LastSyncBlock {
     block: bigint;
+    /** Local wall-clock time (ms) of the last successful sync for this chain. */
     localTimestamp: number;
 }
+/**
+ * Per-chain sync info: the last synced block plus the live refresh state, so the
+ * sync indicator can reflect whether the refresh loop is alive / failing.
+ */
+export interface ChainSyncInfo {
+    lastSyncBlock: LastSyncBlock;
+    /** True while a refresh for this chain is currently in flight. */
+    loading?: boolean;
+    /** Human-readable error if the last refresh for this chain failed. */
+    error?: string;
+}
 export interface BlockByChain {
-    [chainId: number]: {
-        lastSyncBlock: LastSyncBlock;
-    } | undefined;
+    [chainId: number]: ChainSyncInfo | undefined;
 }
 export interface ExplorerInfo {
     url: string;
@@ -24,6 +34,17 @@ export interface BlockSyncProps {
     blockByChain: BlockByChain | undefined;
     explorerAddresses: ExplorerAddresses;
     networkById: NetworkById;
+    /**
+     * Expected refresh cadence in ms. The indicator is considered stale only after
+     * `syncIntervalMs * staleMultiplier`, so a healthy loop never flips to red.
+     * Defaults to 5 minutes.
+     */
+    syncIntervalMs?: number;
+    /**
+     * Stale-threshold multiplier applied to {@link BlockSyncProps.syncIntervalMs}.
+     * Defaults to 2.5 (allows for missed/throttled cycles before flagging stale).
+     */
+    staleMultiplier?: number;
 }
 export interface FooterProps {
     blockSyncProps?: BlockSyncProps;

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "@gearbox-protocol/ui-kit",
-  "version": "3.14.0-next.6",
+  "version": "3.14.0-next.60",
   "description": "Internal UI components",
-  "repository": "https://github.com/gearbox-protocol/ui-kit",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Gearbox-protocol/ui-kit.git"
+  },
   "license": "MIT",
   "main": "./dist/cjs/index.cjs",
   "module": "./dist/esm/index.js",
@@ -54,6 +57,16 @@
       "types": "./dist/types/components/next/connectkit/index.d.ts",
       "import": "./dist/esm/components/next/connectkit/index.js",
       "default": "./dist/cjs/components/next/connectkit/index.cjs"
+    },
+    "./tx-preview": {
+      "types": "./dist/types/components/composites/tx-preview/index.d.ts",
+      "import": "./dist/esm/components/composites/tx-preview/index.js",
+      "default": "./dist/cjs/components/composites/tx-preview/index.cjs"
+    },
+    "./tx-preview/*": {
+      "types": "./dist/types/components/composites/tx-preview/*.d.ts",
+      "import": "./dist/esm/components/composites/tx-preview/*.js",
+      "default": "./dist/cjs/components/composites/tx-preview/*.cjs"
     }
   },
   "files": [
@@ -100,7 +113,7 @@
     "@radix-ui/react-tooltip": "^1.1.6",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lightweight-charts": "^5.1.0",
+    "lightweight-charts": "^5.2.0",
     "luxon": "^3.5.0",
     "react-infinite-scroll-component": "^6.1.0",
     "react-markdown": "^10.1.0",
@@ -153,7 +166,7 @@
     "@commitlint/cli": "^20.1.0",
     "@commitlint/config-conventional": "^20.0.0",
     "@gearbox-protocol/biome-config": "^1.0.2",
-    "@gearbox-protocol/sdk": "14.8.5",
+    "@gearbox-protocol/sdk": "14.11.0-next.9",
     "@rollup/plugin-typescript": "^12.3.0",
     "@storybook/addon-a11y": "^10.0.8",
     "@storybook/addon-docs": "^10.0.8",

package/src/styles/base.css

@@ -72,6 +72,7 @@ html.dark {
     --success-hover: 136.58 100% 85.1%;
     --warning: 38 95% 45%;
     --liquidation: 274 67% 48%;
+    --liquidation-line: 38 92% 50%;
     --input: 225 10% 88%;
     --ring: 330 100% 50%;
     --radius: 0.75rem;
@@ -119,6 +120,7 @@ html.dark {
     --destructive-foreground: 0 0% 100%;
     --warning: 43.12 100% 68.63%;
     --liquidation: 277.22 74.53% 58.43%;
+    --liquidation-line: 38 92% 50%;
     --input: 225 6% 19%;
     --ring: 330 100% 59%;
     --gray-10: 225 5.26% 14.9%;

package/src/styles/theme.css

@@ -49,6 +49,7 @@
   --color-success-hover: hsl(var(--success-hover));
   --color-warning: hsl(var(--warning));
   --color-liquidation: hsl(var(--liquidation));
+  --color-liquidation-line: hsl(var(--liquidation-line));
   --color-border: hsl(var(--border));
   --color-input: hsl(var(--input));
   --color-ring: hsl(var(--ring));