@gearbox-protocol/ui-kit 4.0.0-next.1 → 4.0.0-next.11

package/dist/types/components/token-symbol/token-symbol.d.ts

@@ -4,7 +4,7 @@ import { VariantProps } from 'class-variance-authority';
 import { default as React } from 'react';
 import { TokenMetaInfo } from '../../types/common';
 declare const tokenSymbolVariants: (props?: ({
-    marginSize?: "sm" | "lg" | "md" | null | undefined;
+    marginSize?: "sm" | "md" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface TokenSymbolProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof tokenSymbolVariants> {
     /**

package/dist/types/components/trading-view/trading-view.d.ts

@@ -37,11 +37,11 @@ export interface GraphData {
 /**
  * TradingView component props
  */
-export interface TradingViewProps<T extends string = string> extends Omit<GraphViewWithDataProps, "series" | "loading" | "toolbar" | "size" | "showLegend" | "onUnselectSeries" | "yMeasureUnit" | "currentValueDecimals" | "data"> {
+export interface TradingViewProps<T extends string = string, TRange extends string = string> extends Omit<GraphViewWithDataProps, "series" | "loading" | "toolbar" | "size" | "showLegend" | "onUnselectSeries" | "yMeasureUnit" | "currentValueDecimals" | "data" | "title"> {
     /** Graph data - single or array of series */
     data: GraphData | Array<GraphData> | undefined;
     /** Y-axis unit for single or multiple series */
-    yMeasureUnit?: YMeasureUnits | Array<YMeasureUnits>;
+    yMeasureUnit?: YMeasureUnits | ReadonlyArray<YMeasureUnits>;
     /** Chart height in pixels */
     height?: number;
     /** Default selected graph item(s) */
@@ -53,11 +53,11 @@ export interface TradingViewProps<T extends string = string> extends Omit<GraphV
     /** Enable multiple graph selection */
     isMultipleSelect?: boolean;
     /** Available time range options */
-    rangeList: RangeButtonsProps<string>["rangeList"];
+    rangeList: RangeButtonsProps<TRange>["rangeList"];
     /** Currently selected time range */
-    range: string;
+    range: TRange;
     /** Callback to change selected range */
-    setRange: (range: string) => void;
+    setRange: (range: TRange) => void;
     /** Callback when expand button is clicked */
     onGraphExpanded?: () => void;
     /** Whether graph is currently expanded */
@@ -110,11 +110,18 @@ export interface TradingViewProps<T extends string = string> extends Omit<GraphV
     seriesColorPersistenceKey?: string;
     /**
      * When true, all user-initiated zoom and pan interactions are disabled.
-     * The time range can only be changed via the range buttons.
+     * The time range can only be changed via the range dropdown.
      * Disables: mouse-wheel zoom, pinch zoom, axis drag, axis double-click reset,
      * and scroll/drag panning.
      */
     disableZoom?: boolean;
+    /**
+     * Controls rendered to the left of the range dropdown (e.g. leverage chips).
+     * A divider is shown between this slot and the dropdown when both are present.
+     */
+    trailing?: React.ReactNode;
+    /** Heading to the left of the chart controls, outside the chart frame. */
+    title?: React.ReactNode;
 }
 /**
  * TradingView — comprehensive charting component with graph selection and time range controls.
@@ -171,4 +178,4 @@ export interface TradingViewProps<T extends string = string> extends Omit<GraphV
  * />
  * ```
  */
-export declare function TradingView<T extends string = string>({ data, yMeasureUnit, height, defaultGraph, onGraphSelected, graphs, isMultipleSelect, range, rangeList, setRange, onGraphExpanded, isGraphExpanded, onUnselectSeries, graphsWithNoData, loadingGraphs, isLoading: isLoadingProp, noDataMessage, currentValueDecimals, containerClassName, useSharedPriceScale, showCurrentValue, yScaleMin, yScaleMinMultiple, seriesColorPersistenceKey, ...restProps }: TradingViewProps<T>): React.ReactElement;
+export declare function TradingView<T extends string = string, TRange extends string = string>({ data, yMeasureUnit, height, defaultGraph, onGraphSelected, graphs, isMultipleSelect, range, rangeList, setRange, onGraphExpanded, isGraphExpanded, onUnselectSeries, graphsWithNoData, loadingGraphs, isLoading: isLoadingProp, noDataMessage, currentValueDecimals, containerClassName, useSharedPriceScale, showCurrentValue, yScaleMin, yScaleMinMultiple, seriesColorPersistenceKey, title, trailing, ...restProps }: TradingViewProps<T, TRange>): React.ReactElement;

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

@@ -4,10 +4,10 @@ declare const rootVariants: (props?: ({
     align?: "center" | "start" | "end" | "baseline" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare const labelVariants: (props?: ({
-    size?: "default" | "unset" | "xs" | "sm" | null | undefined;
+    size?: "default" | "unset" | "sm" | "xs" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare const valueVariants: (props?: ({
-    size?: "default" | "unset" | "xs" | "sm" | null | undefined;
+    size?: "default" | "unset" | "sm" | "xs" | null | undefined;
     weight?: "medium" | "normal" | "unset" | null | undefined;
     color?: "default" | "muted" | "success" | "warning" | "primary" | "alert" | "secondary" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/types/components/with-title/with-title.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 import type * as React from "react";
 declare const withTitleVariants: (props?: ({
-    size?: "default" | "sm" | "lg" | "md" | null | undefined;
+    size?: "default" | "sm" | "md" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface WithTitleProps extends VariantProps<typeof withTitleVariants> {
     /**

package/dist/types/components/yield-breakdown-tooltip/yield-breakdown-tooltip.d.ts

@@ -8,25 +8,23 @@ export interface YieldBreakdownTooltipProps {
     supplyApy: ApyBreakdown;
     /**
      * Strategy-only plain leverage multiplier (e.g. `13.6` for 13.6x). When set,
-     * the header shows "at Nx leverage" and borrow rows may appear.
+     * the header is "Net APY at Nx Leverage" and a Borrow Rate row is shown.
      */
     maxLeverage?: Leverage;
     /**
-     * Strategy collateral yield used for Base / Incentive rows. Falls back to
-     * {@link supplyApy} when omitted.
+     * Strategy collateral yield used for Collateral / Incentive rows. Falls back
+     * to {@link supplyApy} when omitted.
      */
     collateralApy?: ApyBreakdown;
     /** Strategy base borrow cost in bps (shown as a negative rate). */
     borrowApy?: Bps;
-    /** Strategy additional (quota) borrow cost in bps (shown as a negative rate). */
+    /** Strategy additional (quota) borrow cost in bps (folded into Borrow Rate). */
     additionalBorrowApy?: Bps;
     children?: React.ReactNode;
     className?: string;
 }
 /**
- * Yield Breakdown tooltip for Earn — pool and strategy layouts from SDK
- * `ApyBreakdown` (+ optional strategy borrow / leverage fields).
- *
- * Visuals follow Figma «Yield Details Surface» (400px card, always expanded).
+ * Earn APY tooltip — strategy (`Net APY at Nx Leverage`) and pool
+ * (`Overall APY`) layouts from SDK `ApyBreakdown`.
  */
 export declare function YieldBreakdownTooltip({ supplyApy, maxLeverage, collateralApy, borrowApy, additionalBorrowApy, children, className, }: YieldBreakdownTooltipProps): import("react/jsx-runtime").JSX.Element;

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

@@ -63,9 +63,14 @@ export declare const preset: {
                 "success-foreground": string;
                 "success-hover": string;
                 warning: string;
+                info: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
                 liquidation: string;
                 "liquidation-line": string;
                 border: string;
+                divider: string;
                 input: string;
                 ring: string;
                 "text-secondary": string;
@@ -91,6 +96,13 @@ export declare const preset: {
                     "3": string;
                     "4": string;
                     "5": string;
+                    "6": string;
+                    "7": string;
+                    "8": string;
+                    "9": string;
+                    "10": string;
+                    "11": string;
+                    "12": string;
                 };
             };
             fontFamily: {

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

@@ -4,8 +4,8 @@ export * from './use-debounce';
 export * from './use-debounce-call';
 export * from './use-filter';
 export * from './use-hf';
-export * from './use-liquidation';
 export * from './use-media-query';
+export * from './use-observed-width-key';
 export * from './use-opened-state';
 export * from './use-previous';
 export * from './use-smart-number-input';

package/dist/types/hooks/use-observed-width-key.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Tracks the rounded CSS-pixel width of an element via ResizeObserver.
+ * Useful when a layout should collapse by container width, not viewport.
+ */
+export declare function useObservedWidthKey<T extends HTMLElement>(): {
+    ref: import('react').RefObject<T | null>;
+    widthKey: number;
+};

package/dist/types/index.d.ts

@@ -6,10 +6,9 @@ export * from './components/alert-dialog';
 export * from './components/alert-modal';
 export * from './components/app-bar';
 export * from './components/assets-list-cell';
-export * from './components/auth';
 export * from './components/badge';
 export * from './components/base-link';
-export * from './components/block-sync';
+export * from './components/base-table';
 export * from './components/block-sync-pill';
 export * from './components/breadcrumbs';
 export * from './components/breakpoint-provider';
@@ -17,6 +16,7 @@ export * from './components/buttons';
 export * from './components/cards';
 export * from './components/checkbox';
 export * from './components/client-adapters';
+export * from './components/collateral-allocation-tooltip';
 export * from './components/composites';
 export * from './components/compound-apy';
 export * from './components/confirm-menu';
@@ -36,8 +36,10 @@ export * from './components/guard';
 export * from './components/head-cell';
 export * from './components/health-factor';
 export * from './components/help-tip';
+export * from './components/hf-indicator';
 export * from './components/icon-button';
 export * from './components/icons';
+export * from './components/infinite-scroll';
 export * from './components/input';
 export * from './components/label';
 export * from './components/layout';
@@ -47,13 +49,11 @@ export * from './components/loader';
 export * from './components/loading';
 export * from './components/loading-bar';
 export * from './components/modal';
-export * from './components/navbar';
+export * from './components/name-cell';
 export * from './components/navbar-logo';
 export * from './components/navigation-context';
-export * from './components/navitem';
 export * from './components/network-icon';
 export * from './components/points-icon';
-export * from './components/pool-apy-tooltip';
 export * from './components/pool-points-indicator';
 export * from './components/rounded-image';
 export * from './components/rwa-feature';
@@ -98,11 +98,10 @@ export type { LocaleKeys } from './locale';
 export * from './locale';
 export type { BlockSyncProps } from './types/footer';
 export { EnglishLocale };
-export * from './test-ids';
 export * from './utils';
 export * from './utils/a11y';
 export { cn } from './utils/cn';
 export * from './utils/copy';
 export * from './utils/format';
-export { formatMoney, formatPercentAmount, percentageTemplate, percentTemplate, } from './utils/format-money';
+export { formatCompactPercent, formatMoney, formatPercentAmount, percentageTemplate, percentTemplate, } from './utils/format-money';
 export * from './utils/templates';

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

@@ -6,6 +6,8 @@ declare const _default: {
   "errors.tooManyRequests": "Too many requests",
   "errors.incorrectAddress": "Incorrect address",
   "components.errorMessage.oops": "Oops...",
+  "components.networkIndicator.title": "Network",
+  "components.infiniteScrollWrapper.showMore": "Show more",
 
   "components.alertModal.ok": "Ok",
 
@@ -84,21 +86,21 @@ declare const _default: {
   "components.apyParts.points": "{symbol} Incentive",
   "components.apyParts.points.condition.crossDeposit": "For cross-chain deposits made via Omni",
 
-  "components.yieldBreakdown.title": "Yield Breakdown",
-  "components.yieldBreakdown.atLeverage": "at {leverage}× leverage",
-  "components.yieldBreakdown.baseYield": "Base Yield",
-  "components.yieldBreakdown.incentiveYield": "Incentive Yield",
+  "components.yieldBreakdown.titleNetAtLeverage": "Net APY at {leverage}× Leverage",
+  "components.yieldBreakdown.collateralApy": "Collateral APY",
+  "components.yieldBreakdown.incentive": "Incentive",
   "components.yieldBreakdown.borrowRate": "Borrow Rate",
-  "components.yieldBreakdown.baseRate": "Base Rate",
-  "components.yieldBreakdown.additionalRate": "Additional Rate",
-  "components.yieldBreakdown.netYield": "Net Yield",
+  "components.yieldBreakdown.programPoints": "{name} Points",
   "components.yieldBreakdown.points": "Points",
 
   "components.openCopyButtons.copy": "Copy to clipboard",
+  "components.openCopyButtons.explorer": "View in explorer",
 
-  "components.poolAssetsTable.asset": "Asset",
+  "components.poolAssetsTable.asset": "Name",
   "components.poolAssetsTable.rate": "Effective rate",
-  "components.poolAssetsTable.limits": "Limits Usage",
+  "components.poolAssetsTable.exposure": "Exposure",
+  "components.poolAssetsTable.cap": "Cap",
+  "components.poolAssetsTable.capUtilization": "Cap utilization",
   "components.poolAssetsTable.usage": "{amount} of {total}",
   "components.poolAssetsTable.head.name": "Credit Manager",
   "components.poolAssetsTable.head.currentDebt": "Current Debt",
@@ -184,6 +186,7 @@ declare const _default: {
 
   "components.leverageInput.label": "Leverage",
   "components.leverageInput.reset": "Reset",
+  "components.leverageInput.available": "Available leverage",
 
   "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.",
@@ -197,9 +200,44 @@ declare const _default: {
   "components.historyChart.error": "Couldn't load chart data",
   "components.historyChart.empty": "No data",
 
-  "components.positionTypeBadge.pool": "Lender",
+  "components.positionTypeBadge.pool": "LP",
   "components.positionTypeBadge.strategy": "Strategy",
-  "components.positionTypeBadge.liquidation": "Liquidation"
+  "components.positionTypeBadge.liquidation": "Liquidation",
+
+  "components.positionStatusBadge.active": "Active",
+  "components.positionStatusBadge.repaid": "Repaid",
+
+  "components.titleMeta.unknownCurator": "Curator",
+
+  "components.moreAccordion.more": "More details",
+  "components.moreAccordion.less": "Less details",
+
+  "components.poolApyBreakdownCard.title": "APY Breakdown",
+  "components.poolApyBreakdownCard.organicApy": "Pool organic APY",
+  "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.leveragePresetChips.label": "Leverage:",
+
+  "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.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.transactionConfirm.previewLoading": "Parsing transaction…",
+  "components.transactionConfirm.previewErrorTitle": "Preview error"
 }
 ;
 

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

@@ -1,6 +1,4 @@
-export type * from './component-props';
 export type * from './filter';
 export type * from './footer';
 export type * from './graph';
-export type * from './help';
 export type * from './range-item';

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

@@ -0,0 +1,5 @@
+/**
+ * Display leverage with two decimal places, e.g. `5.79` for `5.7857…`.
+ * The suffix (`x`) / prefix (`×`) stays at the call site.
+ */
+export declare function formatLeverage(value: number): string;

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

@@ -14,21 +14,27 @@
  */
 export declare function formatMoney(money: number | bigint, precision?: number): string;
 /**
- * Formats a percentage amount with exponential notation for very large values
+ * 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 allowExponential - Whether to allow exponential notation for large values (default: true)
+ * @param compact - Whether to compact 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"
+ * formatPercentAmount(14000, 2) // "14K"
+ * formatPercentAmount(14000, 2, false) // "14000.00"
  * ```
  */
-export declare function formatPercentAmount(value: number, decimals: number, allowExponential?: boolean): string | number;
+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

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

@@ -9,10 +9,12 @@ export * from './colors';
 export * from './copy';
 export * from './format';
 export * from './format-asset-amount';
-export { formatMoney, formatMoneyAmount, formatPercentAmount, percentageTemplate, percentTemplate, } from './format-money';
+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-slippage';
 export * from './interface';
+export * from './leverage-presets';
 export * from './loading';
 export * from './math';
 export * from './network-icons';

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

@@ -0,0 +1,7 @@
+/**
+ * Leverage chips beside the strategy yield chart: 30% and 70% of the
+ * (1 → max) span, rounded to 0.5, plus max itself.
+ */
+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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gearbox-protocol/ui-kit",
-  "version": "4.0.0-next.1",
+  "version": "4.0.0-next.11",
   "description": "Internal UI components",
   "repository": {
     "type": "git",
@@ -19,11 +19,6 @@
       "import": "./dist/esm/index.js",
       "default": "./dist/cjs/index.cjs"
     },
-    "./test-ids": {
-      "types": "./dist/types/test-ids/index.d.ts",
-      "import": "./dist/esm/test-ids/index.js",
-      "default": "./dist/cjs/test-ids/index.cjs"
-    },
     "./tailwind": {
       "types": "./dist/types/configs/tailwind.config.d.ts",
       "import": "./dist/esm/configs/tailwind.config.js",
@@ -37,12 +32,7 @@
     "./globals.css": "./dist/globals.css",
     "./grid-safelist.css": "./dist/grid-safelist.css",
     "./theme.css": "./src/styles/theme.css",
-    "./base.css": "./src/styles/base.css",
-    "./sdk-legacy": {
-      "types": "./dist/types/sdk-legacy/index.d.ts",
-      "import": "./dist/esm/sdk-legacy/index.js",
-      "default": "./dist/cjs/sdk-legacy/index.cjs"
-    }
+    "./base.css": "./src/styles/base.css"
   },
   "files": [
     "dist",
@@ -95,16 +85,15 @@
     "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",
+    "axios": "^1.0.0",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19",
     "react-intl": "^6.0.0 || ^7.0.0",
     "react-router-dom": "^6.0.0 || ^7.0.0",
-    "reactochart": "^6.1.1",
     "sonner": "^2.0.0",
     "viem": "^2.0.0",
     "wagmi": "^2.0.0"
@@ -121,13 +110,12 @@
     }
   },
   "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": "v14.12.0-next.83",
+    "@gearbox-protocol/sdk": "15.1.0-next.17",
     "@rollup/plugin-typescript": "^12.3.0",
     "@storybook/addon-a11y": "^10.0.8",
     "@storybook/addon-docs": "^10.0.8",
@@ -145,6 +133,7 @@
     "@vitest/browser-playwright": "^4.0.14",
     "@vitest/coverage-v8": "^4.0.14",
     "autoprefixer": "^10.4.21",
+    "axios": "^1.12.2",
     "browserslist": "^4.28.0",
     "buffer": "^6.0.3",
     "cross-spawn": "^7.0.6",
@@ -160,7 +149,6 @@
     "react-dom": "^19.1.1",
     "react-intl": "^6.7.4",
     "react-router-dom": "^7.9.6",
-    "reactochart": "^6.1.1",
     "storybook": "^10.0.8",
     "tailwind-scrollbar": "^4.0.2",
     "tailwindcss": "^4.1.14",

package/src/styles/base.css

@@ -71,6 +71,8 @@ html.dark {
     --success-foreground: 0 0% 0%;
     --success-hover: 136.58 100% 85.1%;
     --warning: 38 95% 45%;
+    --info: 214 80% 46%;
+    --info-foreground: 0 0% 100%;
     --liquidation: 274 67% 48%;
     --liquidation-line: 38 92% 50%;
     --input: 225 10% 88%;
@@ -93,6 +95,19 @@ html.dark {
     --white-foreground: 240 2.56% 7.65%;
     --black: 0 0% 0%;
     --border: 225 10% 88%;
+    --divider: 225 10% 88%;
+    --chart-1: 18 83.05% 65.29%;
+    --chart-2: 188 62.26% 58.43%;
+    --chart-3: 326 73.71% 65.69%;
+    --chart-4: 130 44.33% 61.96%;
+    --chart-5: 257 88.96% 68.04%;
+    --chart-6: 40 72.04% 63.53%;
+    --chart-7: 212 92.43% 63.73%;
+    --chart-8: 347 78.53% 65.29%;
+    --chart-9: 167 44.1% 55.1%;
+    --chart-10: 288 64.32% 63.73%;
+    --chart-11: 76 57.14% 61.57%;
+    --chart-12: 235 89.54% 70%;
   }
 
   .dark {
@@ -119,6 +134,8 @@ html.dark {
     --success-hover: 136.58 100% 85.1%;
     --destructive-foreground: 0 0% 100%;
     --warning: 43.12 100% 68.63%;
+    --info: 215 88% 67%;
+    --info-foreground: 0 0% 100%;
     --liquidation: 277.22 74.53% 58.43%;
     --liquidation-line: 38 92% 50%;
     --input: 225 6% 19%;
@@ -140,6 +157,19 @@ html.dark {
     --white-foreground: 240 2.56% 7.65%;
     --black: 0 0% 0%;
     --border: 0 0% 100% / 0.07;
+    --divider: 218 8% 19%;
+    --chart-1: 18 83.05% 65.29%;
+    --chart-2: 188 62.26% 58.43%;
+    --chart-3: 326 73.71% 65.69%;
+    --chart-4: 130 44.33% 61.96%;
+    --chart-5: 257 88.96% 68.04%;
+    --chart-6: 40 72.04% 63.53%;
+    --chart-7: 212 92.43% 63.73%;
+    --chart-8: 347 78.53% 65.29%;
+    --chart-9: 167 44.1% 55.1%;
+    --chart-10: 288 64.32% 63.73%;
+    --chart-11: 76 57.14% 61.57%;
+    --chart-12: 235 89.54% 70%;
   }
 }
 

package/src/styles/theme.css

@@ -48,9 +48,12 @@
   --color-success-foreground: hsl(var(--success-foreground));
   --color-success-hover: hsl(var(--success-hover));
   --color-warning: hsl(var(--warning));
+  --color-info: hsl(var(--info));
+  --color-info-foreground: hsl(var(--info-foreground));
   --color-liquidation: hsl(var(--liquidation));
   --color-liquidation-line: hsl(var(--liquidation-line));
   --color-border: hsl(var(--border));
+  --color-divider: hsl(var(--divider));
   --color-input: hsl(var(--input));
   --color-ring: hsl(var(--ring));
   --color-text-secondary: hsl(var(--text-secondary));
@@ -74,6 +77,19 @@
   --color-additional-success: hsl(var(--success));
   --color-additional-warning: hsl(var(--warning));
   --color-additional-alert: hsl(var(--destructive));
+  --color-additional-info: hsl(var(--info));
+  --color-chart-1: hsl(var(--chart-1));
+  --color-chart-2: hsl(var(--chart-2));
+  --color-chart-3: hsl(var(--chart-3));
+  --color-chart-4: hsl(var(--chart-4));
+  --color-chart-5: hsl(var(--chart-5));
+  --color-chart-6: hsl(var(--chart-6));
+  --color-chart-7: hsl(var(--chart-7));
+  --color-chart-8: hsl(var(--chart-8));
+  --color-chart-9: hsl(var(--chart-9));
+  --color-chart-10: hsl(var(--chart-10));
+  --color-chart-11: hsl(var(--chart-11));
+  --color-chart-12: hsl(var(--chart-12));
 
   --radius-lg: var(--radius);
   --radius-md: calc(var(--radius) - 2px);

package/dist/cjs/components/auth/connect-required.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),c=require("wagmi"),l=require("./wallet-ui-context.cjs");require("../buttons/back-button/back-button.cjs");const q=require("../buttons/button/button.cjs");require("../buttons/copy-button/copy-button.cjs");require("../buttons/external-button/external-button.cjs");require("../buttons/filter-button/filter-button.cjs");require("../buttons/navigation-button/navigation-button.cjs");require("react");require("@gearbox-protocol/sdk");require("clsx");require("tailwind-merge");require("sonner");require("@gearbox-protocol/sdk/common-utils");require("luxon");require("../../utils/z-index.cjs");const d=require("../buttons/tab-button/tab-button.cjs");function b({children:o,owner:e,hideConnectButton:a,...t}){const i=l.useWalletUI(),{isConnected:s,address:r}=c.useAccount(),n=Object.keys(t).length>0?q.Button:d.TabButton;return i?s&&r?e&&r?.toLowerCase()!==e.toLowerCase()?u.jsx(n,{...t,disabled:!0,children:"You are not the author"}):o:a?null:u.jsx(n,{...t,onClick:()=>i.openConnectModal(),children:"Connect Wallet"}):s&&r&&e&&r.toLowerCase()!==e.toLowerCase()?u.jsx(n,{...t,disabled:!0,children:"You are not the author"}):o}exports.ConnectRequired=b;

package/dist/cjs/components/auth/index.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./connect-required.cjs"),n=require("./signin-required.cjs"),e=require("./wallet-ui-context.cjs");exports.ConnectRequired=t.ConnectRequired;exports.SignInRequired=n.SignInRequired;exports.WalletUIProvider=e.WalletUIProvider;exports.useWalletUI=e.useWalletUI;

package/dist/cjs/components/auth/signin-required.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),b=require("wagmi"),h=require("./wallet-ui-context.cjs");require("../buttons/back-button/back-button.cjs");const g=require("../buttons/button/button.cjs");require("../buttons/copy-button/copy-button.cjs");require("../buttons/external-button/external-button.cjs");require("../buttons/filter-button/filter-button.cjs");require("../buttons/navigation-button/navigation-button.cjs");require("react");require("@gearbox-protocol/sdk");require("clsx");require("tailwind-merge");require("sonner");const j=require("../../utils/format.cjs");require("@gearbox-protocol/sdk/common-utils");require("luxon");require("../../utils/z-index.cjs");const L=require("../buttons/tab-button/tab-button.cjs");function x({children:u,owner:e,skipSignIn:l,hideConnectButton:c,...t}){const o=h.useWalletUI(),{isConnected:a,address:r}=b.useAccount(),n=Object.keys(t).length>0?g.Button:L.TabButton,s=o?.siwe,q=s?.isSignedIn??!1,f=s?.isRejected??!1,d=s?.isLoading??!1,C=s?.data??null;return o?q||l?e&&C?.address?.toLowerCase()!==e.toLowerCase()?i.jsx(n,{...t,disabled:!0,children:"You are not the author"}):u:a&&r?o.openSIWE?f?i.jsx(n,{...t,onClick:()=>o.openConnectModal(),disabled:d,children:"Try Again"}):i.jsx(n,{...t,onClick:()=>o.openSIWE?.(),disabled:d,children:d?"Awaiting request...":`Sign In as ${j.shortenHash(r)}`}):e&&r.toLowerCase()!==e.toLowerCase()?i.jsx(n,{...t,disabled:!0,children:"You are not the author"}):u:c?null:i.jsx(n,{...t,onClick:()=>o.openConnectModal(),children:"Connect Wallet"}):l?a&&r&&e&&r.toLowerCase()!==e.toLowerCase()?i.jsx(n,{...t,disabled:!0,children:"You are not the author"}):u:a&&r&&e&&r.toLowerCase()!==e.toLowerCase()?i.jsx(n,{...t,disabled:!0,children:"You are not the author"}):u}exports.SignInRequired=x;

package/dist/cjs/components/auth/wallet-ui-context.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),e=require("react"),t=e.createContext(null);function o({value:r,children:n}){return l.jsx(t.Provider,{value:r,children:n})}function u(){return e.useContext(t)}exports.WalletUIProvider=o;exports.useWalletUI=u;

package/dist/cjs/components/block-sync/block-sync.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("react"),T=require("../tooltip/simple-tooltip.cjs");require("../tooltip/tooltip.cjs");const m=require("../../utils/cn.cjs");require("../accordion/accordion.cjs");require("../alert-badge/alert-badge.cjs");require("../alert-dialog/alert-dialog.cjs");require("../alert-modal/alert-modal.cjs");require("@gearbox-protocol/static");require("../buttons/back-button/back-button.cjs");require("../buttons/button/button.cjs");require("../buttons/copy-button/copy-button.cjs");require("../buttons/external-button/external-button.cjs");require("../buttons/filter-button/filter-button.cjs");require("../buttons/navigation-button/navigation-button.cjs");require("@gearbox-protocol/sdk");require("sonner");require("@gearbox-protocol/sdk/common-utils");require("luxon");require("../../utils/z-index.cjs");require("../buttons/tab-button/tab-button.cjs");require("../token-icon/token-icon.cjs");require("wagmi");require("../auth/wallet-ui-context.cjs");require("../badge/badge.cjs");require("react-intl");require("../simple-dropdown/simple-dropdown.cjs");require("../simple-dropdown/simple-dropdown-menu-item.cjs");require("../token-symbol/token-symbol.cjs");require("../typography/typography.cjs");require("../detailed-page-title/detailed-page-title-copy-button.cjs");require("../detailed-page-title/detailed-page-title-explorer-dropdown.cjs");require("../base/details-view/detail-aside/detail-aside-scope.cjs");require("../layout/main-aside-layout/main-aside-layout.cjs");require("../base/details-view/details-view.cjs");require("../fadeout-loading/fadeout-loading.cjs");require("../health-factor/health-factor.cjs");require("../vertical-indicator/vertical-indicator.cjs");require("../checkbox/checkbox.cjs");require("../checkbox/checkbox-labeled.cjs");require("../select/select.cjs");require("../breakpoint-provider.cjs");require("lightweight-charts");require("../graph/formatters.cjs");require("../graph/graph-view.cjs");require("../base/info-portal/info-portal.cjs");require("../edit-input/edit-input.cjs");require("../slider/slider.cjs");require("../slider/slider-context.cjs");require("../text-button/text-button.cjs");require("../with-title/with-title.cjs");require("../status-elements/status-elements.cjs");require("@fortawesome/free-solid-svg-icons");require("react-router-dom");require("../client-adapters/styled-dialog-container/styled-dialog-container.cjs");require("../icons/fa-icon.cjs");require("../skeleton/skeleton.cjs");require("../base/tabber/tabber.cjs");require("../points-icon/points-icon.cjs");require("../base-link/base-link.cjs");require("../navigation-context/navigation-context.cjs");require("../cards/card/card.cjs");require("../checkbox-item/checkbox-item.cjs");require("../client-adapters/styled-button/styled-button.cjs");require("../client-adapters/styled-rounded-image/styled-rounded-image.cjs");require("../table/grid-table.cjs");require("../help-tip/help-tip.cjs");require("../composites/tx-preview/confirm/amounts/TransactionConfirmAmountField.cjs");require("../composites/tx-preview/confirm/dialog/constants.cjs");require("../modal/modal.cjs");require("../dialog/dialog-container.cjs");require("../confirm-menu/confirm-menu.cjs");require("../spinner-loader/spinner-loader.cjs");require("../detailed-apy/detailed-apy.cjs");require("@radix-ui/react-dialog");require("../dialog/dialog-content.cjs");require("../dialog/dialog-description.cjs");require("../dialog/dialog-footer.cjs");require("../dialog/dialog-header.cjs");require("../dialog/dialog-title.cjs");require("../dialog/dialog-modal-container.cjs");require("../dialog/dialog-overlay.cjs");require("viem");require("../input/input.cjs");require("../label/label.cjs");require("../dropdown-menu/dropdown-menu.cjs");require("../dropdown-menu/dropdown-menu-checkbox-item.cjs");require("../dropdown-menu/dropdown-menu-content.cjs");require("../dropdown-menu/dropdown-menu-item.cjs");require("../dropdown-menu/dropdown-menu-label.cjs");require("../dropdown-menu/dropdown-menu-radio-item.cjs");require("../dropdown-menu/dropdown-menu-separator.cjs");require("../dropdown-menu/dropdown-menu-shortcut.cjs");require("../dropdown-menu/dropdown-menu-sub-content.cjs");require("../dropdown-menu/dropdown-menu-sub-trigger.cjs");require("../filter/filter-block.cjs");require("../filter/filter-checkbox-item.cjs");require("../filter/filter-chip.cjs");require("../filter/filter-chips.cjs");require("../filter/filter-dropdown-item.cjs");require("../filter/filter-group.cjs");require("../filter/filter-label.cjs");require("../search-line/search-line.cjs");require("../tabs/tabs.cjs");require("../filter/filter-modal-item.cjs");require("../filter/filter-radio-item.cjs");require("../filter/filter-separator.cjs");require("../filter/variants.cjs");require("../icon-button/icon-button.cjs");require("../layout/app-footer/app-footer.cjs");require("../layout/app-header/app-header.cjs");require("../layout/col/col.cjs");require("../layout/container/container.cjs");require("../layout/footer/footer.cjs");require("../layout/grid/grid.cjs");require("../layout/header/header.cjs");require("../layout/layout/layout.cjs");require("../page-title/page-title.cjs");require("../layout/social-icons/social-icons.cjs");require("../legal-agreement/legal-agreement-theme.cjs");require("../link/link.cjs");require("../loader/loader.cjs");require("../loading/loading.cjs");require("../loading-bar/loading-bar.cjs");require("../navbar/navbar.cjs");require("../navbar/navbar-indicator-context.cjs");require("../app-bar/app-bar.cjs");require("../navitem/navitem.cjs");require("../rounded-image/rounded-image.cjs");require("../segmented-control/segmented-control.cjs");require("../separate-line/separate-line.cjs");require("../simple-accordion/simple-accordion.cjs");require("../spinner/spinner.cjs");require("../split-list/split-list.cjs");const b=require("../status-dot/status-dot.cjs");require("../table/table.cjs");require("../table/grid-table-loader.cjs");require("../textarea/textarea.cjs");require("../theme-provider.cjs");require("../tip-card/tip-card.cjs");const h=1e3*60*10;function _({blockByChain:u,explorerAddresses:f,networkById:S}){const[n,j]=l.useState(Date.now());l.useEffect(()=>{const i=()=>{j(Date.now())},r=window.setInterval(i,1e3);return()=>{clearInterval(r)}},[]);const a=l.useMemo(()=>{if(!u)return 0;const i=Object.values(u).reduce((r,c)=>{const t=c.lastSyncBlock.localTimestamp;return r===0||r!==0&&t<r?t:r},0);return i?n-i:0},[u,n])>h,d=()=>e.jsxs("div",{className:"flex h-[30px] items-center gap-1.5",children:[e.jsx("span",{className:m.cn("text-sm leading-[17px]",a?"text-destructive":"text-success"),children:"Status"}),e.jsx(b.StatusDot,{variant:a?"alert":"success"})]}),v=()=>{if(!u)return null;const i=Object.entries(u);return e.jsx("div",{className:"flex flex-col text-left text-xs",children:i.map(([r,c],t)=>{const o=c.lastSyncBlock,s=o?.block||0n,g=o?.localTimestamp?n-o.localTimestamp:0,q=f[Number(r)],p=typeof q=="string"?q:q&&typeof q=="object"&&"url"in q?q.url:void 0,k=S[Number(r)]||"Unknown",x=`[${s.toString()}]`,N=t===i.length-1;return e.jsxs("div",{className:m.cn(!N&&"mb-2"),children:[e.jsxs("span",{children:[k," "]}),p&&s>0?e.jsx("a",{href:`${p}/block/${s}`,target:"_blank",rel:"noopener noreferrer",className:"underline hover:text-foreground",children:x}):e.jsx("span",{children:x}),s>0&&e.jsxs("span",{children:[", updated ",(g/1e3).toFixed(0)," seconds ago"]})]},r)})})};return u?e.jsx(T.SimpleTooltip,{title:d(),children:v()}):e.jsx("div",{className:"select-none",children:d()})}exports.BlockSync=_;

package/dist/cjs/components/block-sync/index.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("./block-sync.cjs");exports.BlockSync=c.BlockSync;