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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (189) hide show
  1. package/dist/cjs/components/assets-list-cell/assets-list-cell.cjs +1 -1
  2. package/dist/cjs/components/badge/badge.cjs +1 -1
  3. package/dist/cjs/components/badge/chip.cjs +1 -0
  4. package/dist/cjs/components/badge/index.cjs +1 -1
  5. package/dist/cjs/components/base/borrow-rate-block/borrow-rate-block.cjs +1 -1
  6. package/dist/cjs/components/base/chart-with-side-card/chart-with-side-card.cjs +1 -1
  7. package/dist/cjs/components/base/history-chart/history-chart.cjs +1 -1
  8. package/dist/cjs/components/base/index.cjs +1 -1
  9. package/dist/cjs/components/base/info-list/info-list.cjs +1 -1
  10. package/dist/cjs/components/base/leverage-input/leverage-input.cjs +1 -1
  11. package/dist/cjs/components/base/leverage-preset-chips/constants.cjs +1 -0
  12. package/dist/cjs/components/base/leverage-preset-chips/index.cjs +1 -0
  13. package/dist/cjs/components/base/leverage-preset-chips/leverage-preset-chips.cjs +1 -0
  14. package/dist/cjs/components/base/pool-apy-breakdown-card/pool-apy-breakdown-card.cjs +1 -1
  15. package/dist/cjs/components/base/strategy-apy-breakdown-card/constants.cjs +1 -1
  16. package/dist/cjs/components/base/strategy-apy-breakdown-card/strategy-apy-breakdown-card.cjs +1 -1
  17. package/dist/cjs/components/base/title-meta/constants.cjs +1 -1
  18. package/dist/cjs/components/base/title-meta/title-meta.cjs +1 -1
  19. package/dist/cjs/components/base/values/index.cjs +1 -1
  20. package/dist/cjs/components/base/values/position-status-badge.cjs +1 -0
  21. package/dist/cjs/components/base/values/position-type-badge.cjs +1 -1
  22. package/dist/cjs/components/base-table/base-table-line.cjs +1 -0
  23. package/dist/cjs/components/base-table/base-table.cjs +1 -0
  24. package/dist/cjs/components/base-table/constants.cjs +1 -0
  25. package/dist/cjs/components/base-table/index.cjs +1 -0
  26. package/dist/cjs/components/base-table/types.cjs +1 -0
  27. package/dist/cjs/components/block-sync-pill/block-sync-pill.cjs +1 -1
  28. package/dist/cjs/components/checkbox/checkbox-labeled.cjs +1 -1
  29. package/dist/cjs/components/client-adapters/styled-rounded-image/styled-rounded-image.cjs +1 -1
  30. package/dist/cjs/components/collateral-allocation-tooltip/allocation-wheel.cjs +1 -0
  31. package/dist/cjs/components/collateral-allocation-tooltip/collateral-allocation-tooltip.cjs +1 -0
  32. package/dist/cjs/components/collateral-allocation-tooltip/constants.cjs +1 -0
  33. package/dist/cjs/components/collateral-allocation-tooltip/index.cjs +1 -0
  34. package/dist/cjs/components/composites/index.cjs +1 -1
  35. package/dist/cjs/components/composites/pool-assets-table/constants.cjs +1 -0
  36. package/dist/cjs/components/composites/pool-assets-table/index.cjs +1 -1
  37. package/dist/cjs/components/composites/pool-assets-table/pool-assets-table-head.cjs +1 -1
  38. package/dist/cjs/components/composites/pool-assets-table/pool-assets-table-row.cjs +1 -1
  39. package/dist/cjs/components/composites/pool-assets-table/pool-assets-table.cjs +1 -1
  40. package/dist/cjs/components/composites/tx-preview/confirm/dialog/TransactionConfirmModalView.cjs +1 -1
  41. package/dist/cjs/components/compound-apy/compound-apy.cjs +1 -1
  42. package/dist/cjs/components/filter/filter-chip.cjs +1 -1
  43. package/dist/cjs/components/graph/default-config.cjs +1 -1
  44. package/dist/cjs/components/graph/graph-view.cjs +1 -1
  45. package/dist/cjs/components/graph/graph.cjs +1 -1
  46. package/dist/cjs/components/hf-indicator/hf-indicator.cjs +1 -0
  47. package/dist/cjs/components/hf-indicator/index.cjs +1 -0
  48. package/dist/cjs/components/index.cjs +1 -1
  49. package/dist/cjs/components/infinite-scroll/index.cjs +1 -0
  50. package/dist/cjs/components/infinite-scroll/infinite-scroll-wrapper.cjs +1 -0
  51. package/dist/cjs/components/name-cell/index.cjs +1 -0
  52. package/dist/cjs/components/name-cell/name-cell.cjs +1 -0
  53. package/dist/cjs/components/network-icon/index.cjs +1 -1
  54. package/dist/cjs/components/network-icon/network-indicator.cjs +1 -0
  55. package/dist/cjs/components/trading-view/trading-view.cjs +1 -1
  56. package/dist/cjs/components/with-copy/with-copy.cjs +1 -1
  57. package/dist/cjs/components/yield-breakdown-tooltip/yield-breakdown-tooltip.cjs +1 -1
  58. package/dist/cjs/configs/tailwind-preset.cjs +1 -1
  59. package/dist/cjs/hooks/index.cjs +1 -1
  60. package/dist/cjs/hooks/use-observed-width-key.cjs +1 -0
  61. package/dist/cjs/index.cjs +1 -1
  62. package/dist/cjs/locale/en.json.cjs +1 -1
  63. package/dist/cjs/utils/format-money.cjs +1 -1
  64. package/dist/cjs/utils/index.cjs +1 -1
  65. package/dist/cjs/utils/leverage-presets.cjs +1 -0
  66. package/dist/esm/components/assets-list-cell/assets-list-cell.js +161 -159
  67. package/dist/esm/components/badge/badge.js +14 -8
  68. package/dist/esm/components/badge/chip.js +47 -0
  69. package/dist/esm/components/badge/index.js +8 -3
  70. package/dist/esm/components/base/borrow-rate-block/borrow-rate-block.js +3 -2
  71. package/dist/esm/components/base/chart-with-side-card/chart-with-side-card.js +6 -6
  72. package/dist/esm/components/base/history-chart/history-chart.js +86 -46
  73. package/dist/esm/components/base/index.js +144 -138
  74. package/dist/esm/components/base/info-list/info-list.js +7 -8
  75. package/dist/esm/components/base/leverage-input/leverage-input.js +1 -1
  76. package/dist/esm/components/base/leverage-preset-chips/constants.js +7 -0
  77. package/dist/esm/components/base/leverage-preset-chips/index.js +6 -0
  78. package/dist/esm/components/base/leverage-preset-chips/leverage-preset-chips.js +39 -0
  79. package/dist/esm/components/base/pool-apy-breakdown-card/pool-apy-breakdown-card.js +23 -30
  80. package/dist/esm/components/base/strategy-apy-breakdown-card/constants.js +3 -2
  81. package/dist/esm/components/base/strategy-apy-breakdown-card/strategy-apy-breakdown-card.js +194 -32
  82. package/dist/esm/components/base/title-meta/constants.js +1 -0
  83. package/dist/esm/components/base/title-meta/title-meta.js +53 -33
  84. package/dist/esm/components/base/values/index.js +16 -14
  85. package/dist/esm/components/base/values/position-status-badge.js +26 -0
  86. package/dist/esm/components/base/values/position-type-badge.js +7 -6
  87. package/dist/esm/components/base-table/base-table-line.js +117 -0
  88. package/dist/esm/components/base-table/base-table.js +110 -0
  89. package/dist/esm/components/base-table/constants.js +12 -0
  90. package/dist/esm/components/base-table/index.js +9 -0
  91. package/dist/esm/components/base-table/types.js +1 -0
  92. package/dist/esm/components/block-sync-pill/block-sync-pill.js +9 -6
  93. package/dist/esm/components/checkbox/checkbox-labeled.js +7 -4
  94. package/dist/esm/components/client-adapters/styled-rounded-image/styled-rounded-image.js +7 -4
  95. package/dist/esm/components/collateral-allocation-tooltip/allocation-wheel.js +71 -0
  96. package/dist/esm/components/collateral-allocation-tooltip/collateral-allocation-tooltip.js +102 -0
  97. package/dist/esm/components/collateral-allocation-tooltip/constants.js +12 -0
  98. package/dist/esm/components/collateral-allocation-tooltip/index.js +9 -0
  99. package/dist/esm/components/composites/index.js +46 -44
  100. package/dist/esm/components/composites/pool-assets-table/constants.js +9 -0
  101. package/dist/esm/components/composites/pool-assets-table/index.js +8 -6
  102. package/dist/esm/components/composites/pool-assets-table/pool-assets-table-head.js +52 -30
  103. package/dist/esm/components/composites/pool-assets-table/pool-assets-table-row.js +108 -76
  104. package/dist/esm/components/composites/pool-assets-table/pool-assets-table.js +44 -26
  105. package/dist/esm/components/composites/tx-preview/confirm/dialog/TransactionConfirmModalView.js +9 -6
  106. package/dist/esm/components/compound-apy/compound-apy.js +85 -80
  107. package/dist/esm/components/filter/filter-chip.js +1 -0
  108. package/dist/esm/components/graph/default-config.js +20 -18
  109. package/dist/esm/components/graph/graph-view.js +32 -31
  110. package/dist/esm/components/graph/graph.js +459 -458
  111. package/dist/esm/components/hf-indicator/hf-indicator.js +33 -0
  112. package/dist/esm/components/hf-indicator/index.js +4 -0
  113. package/dist/esm/components/index.js +734 -701
  114. package/dist/esm/components/infinite-scroll/index.js +4 -0
  115. package/dist/esm/components/infinite-scroll/infinite-scroll-wrapper.js +30 -0
  116. package/dist/esm/components/name-cell/index.js +4 -0
  117. package/dist/esm/components/name-cell/name-cell.js +35 -0
  118. package/dist/esm/components/network-icon/index.js +4 -2
  119. package/dist/esm/components/network-icon/network-indicator.js +82 -0
  120. package/dist/esm/components/trading-view/trading-view.js +193 -155
  121. package/dist/esm/components/with-copy/with-copy.js +7 -4
  122. package/dist/esm/components/yield-breakdown-tooltip/yield-breakdown-tooltip.js +112 -169
  123. package/dist/esm/configs/tailwind-preset.js +13 -1
  124. package/dist/esm/hooks/index.js +20 -18
  125. package/dist/esm/hooks/use-observed-width-key.js +24 -0
  126. package/dist/esm/index.js +883 -842
  127. package/dist/esm/locale/en.json.js +21 -18
  128. package/dist/esm/utils/format-money.js +59 -41
  129. package/dist/esm/utils/index.js +87 -83
  130. package/dist/esm/utils/leverage-presets.js +13 -0
  131. package/dist/globals.css +1 -1
  132. package/dist/types/components/assets-list-cell/assets-list-cell.d.ts +3 -0
  133. package/dist/types/components/badge/badge.d.ts +2 -1
  134. package/dist/types/components/badge/chip.d.ts +22 -0
  135. package/dist/types/components/badge/index.d.ts +1 -0
  136. package/dist/types/components/base/history-chart/history-chart.d.ts +13 -3
  137. package/dist/types/components/base/index.d.ts +1 -0
  138. package/dist/types/components/base/leverage-input/leverage-input.d.ts +1 -1
  139. package/dist/types/components/base/leverage-preset-chips/constants.d.ts +4 -0
  140. package/dist/types/components/base/leverage-preset-chips/index.d.ts +2 -0
  141. package/dist/types/components/base/leverage-preset-chips/leverage-preset-chips.d.ts +13 -0
  142. package/dist/types/components/base/liquidation-params-table/liquidation-params-table.d.ts +2 -2
  143. package/dist/types/components/base/pool-apy-breakdown-card/pool-apy-breakdown-card.d.ts +4 -5
  144. package/dist/types/components/base/strategy-apy-breakdown-card/constants.d.ts +1 -0
  145. package/dist/types/components/base/strategy-apy-breakdown-card/strategy-apy-breakdown-card.d.ts +12 -4
  146. package/dist/types/components/base/title-meta/constants.d.ts +1 -0
  147. package/dist/types/components/base/title-meta/title-meta.d.ts +9 -1
  148. package/dist/types/components/base/values/index.d.ts +1 -0
  149. package/dist/types/components/base/values/position-status-badge.d.ts +7 -0
  150. package/dist/types/components/base/values/position-type-badge.d.ts +1 -1
  151. package/dist/types/components/base-table/base-table-line.d.ts +21 -0
  152. package/dist/types/components/base-table/base-table.d.ts +19 -0
  153. package/dist/types/components/base-table/constants.d.ts +8 -0
  154. package/dist/types/components/base-table/index.d.ts +3 -0
  155. package/dist/types/components/base-table/types.d.ts +37 -0
  156. package/dist/types/components/collateral-allocation-tooltip/allocation-wheel.d.ts +10 -0
  157. package/dist/types/components/collateral-allocation-tooltip/collateral-allocation-tooltip.d.ts +23 -0
  158. package/dist/types/components/collateral-allocation-tooltip/constants.d.ts +8 -0
  159. package/dist/types/components/collateral-allocation-tooltip/index.d.ts +3 -0
  160. package/dist/types/components/composites/pool-assets-table/constants.d.ts +6 -0
  161. package/dist/types/components/composites/pool-assets-table/index.d.ts +1 -0
  162. package/dist/types/components/composites/pool-assets-table/pool-assets-table-head.d.ts +1 -2
  163. package/dist/types/components/composites/pool-assets-table/pool-assets-table-row.d.ts +8 -8
  164. package/dist/types/components/composites/pool-assets-table/pool-assets-table.d.ts +7 -20
  165. package/dist/types/components/composites/pool-assets-table/types.d.ts +4 -12
  166. package/dist/types/components/graph/graph-view.d.ts +1 -1
  167. package/dist/types/components/graph/graph.d.ts +4 -0
  168. package/dist/types/components/hf-indicator/hf-indicator.d.ts +8 -0
  169. package/dist/types/components/hf-indicator/index.d.ts +1 -0
  170. package/dist/types/components/index.d.ts +5 -0
  171. package/dist/types/components/infinite-scroll/index.d.ts +1 -0
  172. package/dist/types/components/infinite-scroll/infinite-scroll-wrapper.d.ts +11 -0
  173. package/dist/types/components/name-cell/index.d.ts +1 -0
  174. package/dist/types/components/name-cell/name-cell.d.ts +13 -0
  175. package/dist/types/components/network-icon/index.d.ts +1 -0
  176. package/dist/types/components/network-icon/network-indicator.d.ts +23 -0
  177. package/dist/types/components/trading-view/trading-view.d.ts +10 -3
  178. package/dist/types/components/yield-breakdown-tooltip/yield-breakdown-tooltip.d.ts +6 -8
  179. package/dist/types/configs/tailwind-preset.d.ts +12 -0
  180. package/dist/types/hooks/index.d.ts +1 -0
  181. package/dist/types/hooks/use-observed-width-key.d.ts +8 -0
  182. package/dist/types/index.d.ts +6 -1
  183. package/dist/types/locale/en.json.d.ts +23 -18
  184. package/dist/types/utils/format-money.d.ts +11 -5
  185. package/dist/types/utils/index.d.ts +2 -1
  186. package/dist/types/utils/leverage-presets.d.ts +7 -0
  187. package/package.json +1 -1
  188. package/src/styles/base.css +30 -0
  189. package/src/styles/theme.css +16 -0
@@ -1,12 +1,15 @@
1
1
  import { Token } from '@gearbox-protocol/sdk/model';
2
2
  import { default as React } from 'react';
3
3
  import { Address } from 'viem';
4
+ import { CollateralAllocation } from '../collateral-allocation-tooltip';
4
5
  type Mode = "default" | "cascade";
5
6
  interface CommonOptions {
6
7
  mode?: Mode;
7
8
  showIconTooltip?: boolean;
8
9
  otherTooltip?: React.ReactNode;
9
10
  onOtherClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
11
+ /** When set, hover on the cascade shows the allocation mix instead of per-icon symbols. */
12
+ allocation?: CollateralAllocation;
10
13
  }
11
14
  /**
12
15
  * Single asset cell props (new API)
@@ -1,7 +1,7 @@
1
1
  import { VariantProps } from 'class-variance-authority';
2
2
  import type * as React from "react";
3
3
  declare const badgeVariants: (props?: ({
4
- variant?: "default" | "destructive" | "secondary" | "outline" | null | undefined;
4
+ variant?: "default" | "success" | "warning" | "destructive" | "secondary" | "info" | "outline" | "neutral" | "danger" | "accent" | null | undefined;
5
5
  } & import('class-variance-authority/types').ClassProp) | undefined) => string;
6
6
  /**
7
7
  * Badge — component for displaying labels, tags, or status indicators.
@@ -15,6 +15,7 @@ declare const badgeVariants: (props?: ({
15
15
  * - `secondary` — secondary badge with muted background.
16
16
  * - `destructive` — destructive badge with red background for errors/warnings.
17
17
  * - `outline` — outlined badge with border only.
18
+ * - `success` / `info` / `warning` / `danger` / `accent` / `neutral` — tinted chips.
18
19
  *
19
20
  * Note: Prefer using this component instead of native HTML div element for badges.
20
21
  *
@@ -0,0 +1,22 @@
1
+ import { default as React, ReactNode } from 'react';
2
+ export declare class ChipTest {
3
+ static root: string;
4
+ }
5
+ export declare class ChipsTest {
6
+ static root: string;
7
+ static chip: string;
8
+ }
9
+ export type ChipTone = "success" | "info" | "neutral" | "warning" | "danger" | "accent";
10
+ export interface ChipProps {
11
+ readonly children?: ReactNode;
12
+ readonly tone?: ChipTone;
13
+ readonly className?: string;
14
+ }
15
+ /** Tinted {@link Badge} for table/status chips. */
16
+ export declare function Chip({ children, tone, className, }: ChipProps): React.ReactElement;
17
+ export interface ChipsProps {
18
+ readonly children: ReactNode;
19
+ readonly className?: string;
20
+ }
21
+ /** Horizontal row of {@link Chip} (or other badge nodes). */
22
+ export declare function Chips({ children, className }: ChipsProps): React.ReactElement;
@@ -1 +1,2 @@
1
1
  export * from './badge';
2
+ export * from './chip';
@@ -1,5 +1,6 @@
1
1
  import { HistoryRange, HistorySeries } from '@gearbox-protocol/sdk/model';
2
2
  import { default as React } from 'react';
3
+ import { TitleText } from '../text';
3
4
  import { PriceLineConfig, PriceZoneConfig } from '../../graph';
4
5
  import { YMeasureUnits } from '../../graph/formatters';
5
6
  import { HistoryChartTest } from './constants';
@@ -28,10 +29,19 @@ export interface HistoryChartProps {
28
29
  readonly showCurrentValue?: boolean;
29
30
  /** Y-axis floor when the series has data. */
30
31
  readonly yScaleMin?: number;
32
+ /** Heading to the left of the range dropdown, above the chart frame. */
33
+ readonly title?: TitleText;
34
+ /** Controls to the left of the range dropdown (e.g. leverage chips). */
35
+ readonly trailing?: React.ReactNode;
36
+ /**
37
+ * Force a second Y-axis. When omitted, the chart splits axes only if
38
+ * `yMeasureUnit` lists more than one distinct unit.
39
+ */
40
+ readonly dualYAxis?: boolean;
31
41
  }
32
42
  /**
33
- * Design-only history chart on the TradingView engine: range buttons, legend,
34
- * tooltips, optional reference lines and zones. Takes the SDK's
43
+ * Design-only history chart on the TradingView engine: range dropdown, legend
44
+ * below the frame, tooltips, optional reference lines and zones. Takes the SDK's
35
45
  * `HistorySeries` as it comes — points are mapped 1:1, no fetching.
36
46
  */
37
- export declare function HistoryChart({ data, range, onRange, isLoading, error, yMeasureUnit, height, seriesTitles, priceLines, zones, showCurrentValue, yScaleMin, }: HistoryChartProps): React.ReactElement;
47
+ export declare function HistoryChart({ data, range, onRange, isLoading, error, yMeasureUnit, height, seriesTitles, priceLines, zones, showCurrentValue, yScaleMin, title, trailing, dualYAxis: dualYAxisProp, }: HistoryChartProps): React.ReactElement;
@@ -8,6 +8,7 @@ export * from './history-chart';
8
8
  export * from './info-list';
9
9
  export * from './info-portal';
10
10
  export * from './leverage-input';
11
+ export * from './leverage-preset-chips';
11
12
  export * from './liquidation-params-table';
12
13
  export * from './liquidation-price-block';
13
14
  export * from './manage-pane';
@@ -35,7 +35,7 @@ export interface LeverageInputProps {
35
35
  }
36
36
  /**
37
37
  * Target leverage of a position, bounded by what the strategy allows.
38
- * Title row carries an inline-editable value (N.NN`) and an optional reset;
38
+ * Title row carries an inline-editable value (`N.NNx`) and an optional reset;
39
39
  * the slider below can show risk bands via `colorIntervals`.
40
40
  */
41
41
  export declare function LeverageInput({ value, onChange, max, min, title, hint, reset, colorIntervals, colorIntervalLabel, size, }: LeverageInputProps): React.ReactElement;
@@ -0,0 +1,4 @@
1
+ export declare const LeveragePresetChipsTest: {
2
+ readonly root: "leverage-preset-chips-root";
3
+ readonly chip: "leverage-preset-chips-chip";
4
+ };
@@ -0,0 +1,2 @@
1
+ export * from './constants';
2
+ export * from './leverage-preset-chips';
@@ -0,0 +1,13 @@
1
+ import { default as React } from 'react';
2
+ import { LeveragePresetChipsTest } from './constants';
3
+ export { LeveragePresetChipsTest };
4
+ export interface LeveragePresetChipsProps {
5
+ readonly options: readonly number[];
6
+ readonly value?: number;
7
+ readonly onChange: (value: number) => void;
8
+ }
9
+ /**
10
+ * Leverage step pills for the yield-chart toolbar. Selected leverage only
11
+ * drives the APY breakdown card, not the chart series.
12
+ */
13
+ export declare function LeveragePresetChips({ options, value, onChange, }: LeveragePresetChipsProps): React.ReactElement | null;
@@ -6,7 +6,7 @@ export interface LiquidationParamsTableProps {
6
6
  readonly data: Pick<StrategyOpportunity, "liquidationThreshold" | "liquidationPremium" | "liquidationFee">;
7
7
  }
8
8
  /**
9
- * Single-row liquidation parameters. Penalty is premium + fee, a presentation
10
- * of two SDK values.
9
+ * Single-row liquidation parameters. Discount is premium + fee, a
10
+ * presentation of two SDK values.
11
11
  */
12
12
  export declare function LiquidationParamsTable({ data, }: LiquidationParamsTableProps): React.ReactElement;
@@ -3,12 +3,11 @@ import { default as React } from 'react';
3
3
  import { PoolApyBreakdownCardTest } from './constants';
4
4
  export { PoolApyBreakdownCardTest };
5
5
  export interface PoolApyBreakdownCardProps {
6
- /** Trailing average APYs in basis points; a missing window renders a dash. */
6
+ /** Organic and incentive APYs in basis points; a missing value renders a dash. */
7
7
  readonly data?: {
8
- readonly apy1d?: Bps;
9
- readonly apy7d?: Bps;
10
- readonly apy30d?: Bps;
8
+ readonly organicApy?: Bps;
9
+ readonly incentiveApy?: Bps;
11
10
  };
12
11
  }
13
- /** Trailing APY windows next to the yield chart. Missing windows render as dashes. */
12
+ /** Organic vs incentive APY next to the pool APY chart. Missing values render as dashes. */
14
13
  export declare function PoolApyBreakdownCard({ data, }: PoolApyBreakdownCardProps): React.ReactElement;
@@ -1,4 +1,5 @@
1
1
  export declare class StrategyApyBreakdownCardTest {
2
2
  static root: string;
3
3
  static row: string;
4
+ static net: string;
4
5
  }
@@ -1,9 +1,17 @@
1
- import { StrategyOpportunity } from '@gearbox-protocol/sdk/model';
1
+ import { ApyBreakdown, Bps, Leverage } from '@gearbox-protocol/sdk/model';
2
2
  import { default as React } from 'react';
3
3
  import { StrategyApyBreakdownCardTest } from './constants';
4
4
  export { StrategyApyBreakdownCardTest };
5
+ export interface StrategyApyBreakdownData {
6
+ readonly collateralApy?: ApyBreakdown;
7
+ readonly borrowApy?: Bps;
8
+ readonly additionalBorrowApy?: Bps;
9
+ readonly maxLeverage?: Leverage;
10
+ }
5
11
  export interface StrategyApyBreakdownCardProps {
6
- readonly data: StrategyOpportunity;
12
+ readonly data: StrategyApyBreakdownData;
13
+ /** Selected leverage from the chart toolbar chips. Falls back to max. */
14
+ readonly leverage?: Leverage;
7
15
  }
8
- /** APY terms next to the strategy yield chart collateral and borrow rates. */
9
- export declare function StrategyApyBreakdownCard({ data, }: StrategyApyBreakdownCardProps): React.ReactElement;
16
+ /** Net APY formula beside the strategy yield chart. Chart itself is unchanged. */
17
+ export declare function StrategyApyBreakdownCard({ data, leverage: leverageProp, }: StrategyApyBreakdownCardProps): React.ReactElement;
@@ -2,4 +2,5 @@ export declare class TitleMetaTest {
2
2
  static root: string;
3
3
  static network: string;
4
4
  static curator: string;
5
+ static link: string;
5
6
  }
@@ -1,15 +1,23 @@
1
+ import { Token } from '@gearbox-protocol/sdk/model';
1
2
  import { default as React } from 'react';
2
3
  import { NetworkIcons } from '../../../utils/network-icons';
3
4
  import { TitleMetaTest } from './constants';
4
5
  export { TitleMetaTest };
6
+ export interface TitleMetaLink {
7
+ readonly href: string;
8
+ readonly token?: Token;
9
+ readonly label?: string;
10
+ readonly onClick?: () => void;
11
+ }
5
12
  export interface TitleMetaProps {
6
13
  readonly network: NetworkIcons;
7
14
  readonly curatorName: string | undefined;
8
15
  readonly curatorLink: string | undefined;
9
16
  readonly onCuratorLinkClick?: () => void;
17
+ readonly links?: ReadonlyArray<TitleMetaLink>;
10
18
  readonly testId?: string;
11
19
  readonly networkTestId?: string;
12
20
  readonly curatorTestId?: string;
13
21
  }
14
22
  /** Network + curator row under a detail-page title. */
15
- export declare function TitleMeta({ network, curatorName, curatorLink, onCuratorLinkClick, testId, networkTestId, curatorTestId, }: TitleMetaProps): React.ReactElement;
23
+ export declare function TitleMeta({ network, curatorName, curatorLink, onCuratorLinkClick, links, testId, networkTestId, curatorTestId, }: TitleMetaProps): React.ReactElement;
@@ -2,5 +2,6 @@ export { ValueTest } from './constants';
2
2
  export { PnlValue } from './pnl-value';
3
3
  export { PointsValue, type PointsValueProps } from './points-value';
4
4
  export { PositionShortLabel, PositionShortLabelTest, } from './position-short-label';
5
+ export { type PositionStatus, PositionStatusBadge, type PositionStatusBadgeProps, } from './position-status-badge';
5
6
  export { PositionTypeBadge, type PositionTypeBadgeProps, } from './position-type-badge';
6
7
  export { ApyValue, type ApyValueProps, bps, HealthFactorValue, LeverageValue, TokenBigint, UsdValue, UtilizationValue, } from './scalars';
@@ -0,0 +1,7 @@
1
+ import { default as React } from 'react';
2
+ export type PositionStatus = "active" | "repaid";
3
+ export interface PositionStatusBadgeProps {
4
+ readonly data: PositionStatus;
5
+ }
6
+ /** Lifecycle chip of a strategy position: Active or Repaid. */
7
+ export declare function PositionStatusBadge({ data, }: PositionStatusBadgeProps): React.ReactElement;
@@ -6,6 +6,6 @@ export interface PositionTypeBadgeProps {
6
6
  readonly size?: "table" | "aside" | "title";
7
7
  }
8
8
  /**
9
- * Colored kind label of a position row: "Lender" / "Strategy" / "Liquidation".
9
+ * Colored kind label of a position row: "LP" / "Strategy" / "Liquidation".
10
10
  */
11
11
  export declare function PositionTypeBadge({ data, size, }: PositionTypeBadgeProps): React.ReactElement;
@@ -0,0 +1,21 @@
1
+ import { default as React, ReactNode } from 'react';
2
+ import { BaseTableColumn } from './types';
3
+ export { BaseTableLineTest } from './constants';
4
+ export interface BaseTableLineProps<TSort extends string = never> {
5
+ readonly columns: ReadonlyArray<BaseTableColumn<TSort>>;
6
+ readonly cells: Readonly<Record<string, ReactNode>>;
7
+ readonly last: boolean;
8
+ readonly href?: string;
9
+ readonly disabled?: boolean;
10
+ readonly disabledStyle?: boolean;
11
+ /** Extra row className, e.g. RWA accent tint. */
12
+ readonly accentClassName?: string;
13
+ readonly onRowClick?: () => void;
14
+ readonly "data-testid"?: string;
15
+ readonly minHeightClassName?: string;
16
+ }
17
+ /**
18
+ * One row of {@link BaseTable}: desktop cells from the column model, or a
19
+ * stacked mobile card driven by each column's `mobile` role.
20
+ */
21
+ export declare function BaseTableLine<TSort extends string = never>({ columns, cells, last, href, disabled, disabledStyle, accentClassName, onRowClick, "data-testid": testId, minHeightClassName, }: BaseTableLineProps<TSort>): React.ReactElement;
@@ -0,0 +1,19 @@
1
+ import { default as React, PropsWithChildren, ReactNode } from 'react';
2
+ import { BaseTableColumn, BaseTableSortApi } from './types';
3
+ export { BaseTableTest } from './constants';
4
+ export type { BaseTableColumn, BaseTableSortApi } from './types';
5
+ export interface BaseTableProps<TSort extends string = never> {
6
+ readonly columns: ReadonlyArray<BaseTableColumn<TSort>>;
7
+ readonly isLoading: boolean;
8
+ readonly emptyMessage: ReactNode;
9
+ readonly sort?: BaseTableSortApi<TSort>;
10
+ readonly rowHeight?: string;
11
+ readonly loaderRows?: number;
12
+ readonly className?: string;
13
+ readonly wrapperClassName?: string;
14
+ }
15
+ /**
16
+ * Declarative data table over {@link GridTable}: column model, sort headers,
17
+ * loading skeleton and empty state. Mobile collapses to a single track.
18
+ */
19
+ export declare function BaseTable<TSort extends string = never>({ columns, isLoading, emptyMessage, sort, rowHeight, loaderRows, className, wrapperClassName, children, }: PropsWithChildren<BaseTableProps<TSort>>): React.ReactElement;
@@ -0,0 +1,8 @@
1
+ export declare class BaseTableTest {
2
+ static root: string;
3
+ static head: string;
4
+ static empty: string;
5
+ }
6
+ export declare class BaseTableLineTest {
7
+ static root: string;
8
+ }
@@ -0,0 +1,3 @@
1
+ export * from './base-table';
2
+ export * from './base-table-line';
3
+ export type * from './types';
@@ -0,0 +1,37 @@
1
+ import { ReactNode } from 'react';
2
+ type BaseTableColumnJustify = "start" | "end";
3
+ /**
4
+ * Mobile placement for a column inside {@link BaseTableLine}:
5
+ * - `title` — primary identity block (name / tokens)
6
+ * - `badge` — compact chip next to the title (also unclipped on desktop)
7
+ * - `stat` — labeled metric in the stats grid
8
+ * - `block` — full-width labeled block under the stats
9
+ * - `hidden` — desktop-only
10
+ */
11
+ type BaseTableColumnMobile = "title" | "badge" | "stat" | "block" | "hidden";
12
+ interface BaseTableColumnSort<TSort extends string = never> {
13
+ readonly field: TSort;
14
+ readonly defaultDirection: "asc" | "desc";
15
+ /** Plain string for HeadCell `sortField` (a11y / tooltip). */
16
+ readonly label: string;
17
+ }
18
+ /**
19
+ * Column model shared by {@link BaseTable} (tracks + header) and
20
+ * {@link BaseTableLine} (desktop cells + mobile labels).
21
+ */
22
+ export interface BaseTableColumn<TSort extends string = never> {
23
+ readonly id: string;
24
+ readonly title: ReactNode;
25
+ /** CSS grid track, e.g. `"minmax(320px,3fr)"`. */
26
+ readonly track: string;
27
+ readonly justify?: BaseTableColumnJustify;
28
+ readonly sort?: BaseTableColumnSort<TSort>;
29
+ readonly headClassName?: string;
30
+ readonly cellClassName?: string;
31
+ readonly mobile?: BaseTableColumnMobile;
32
+ }
33
+ export interface BaseTableSortApi<TSort extends string> {
34
+ readonly getSortDirection: (field: TSort) => "asc" | "desc" | undefined;
35
+ readonly onSort: (field: TSort, defaultDirection: "asc" | "desc") => void;
36
+ }
37
+ export {};
@@ -0,0 +1,10 @@
1
+ import { default as React } from 'react';
2
+ export interface AllocationWheelProps {
3
+ /** Slice share in 0..1 of the total allocation. */
4
+ readonly share: number;
5
+ /** Palette index for token slices; ignored when {@link idle}. */
6
+ readonly colorIndex: number;
7
+ readonly idle?: boolean;
8
+ }
9
+ /** 20px donut showing one slice's share of the total. */
10
+ export declare function AllocationWheel({ share, colorIndex, idle, }: AllocationWheelProps): React.ReactElement;
@@ -0,0 +1,23 @@
1
+ import { Amount, Token } from '@gearbox-protocol/sdk/model';
2
+ import { default as React } from 'react';
3
+ export type CollateralAllocationSlice = {
4
+ kind: "token";
5
+ token: Token;
6
+ amount: Amount;
7
+ } | {
8
+ kind: "idle";
9
+ amount: Amount;
10
+ };
11
+ export interface CollateralAllocation {
12
+ slices: ReadonlyArray<CollateralAllocationSlice>;
13
+ }
14
+ export interface CollateralAllocationTooltipProps {
15
+ readonly data: CollateralAllocation;
16
+ readonly children?: React.ReactNode;
17
+ readonly className?: string;
18
+ }
19
+ /**
20
+ * Pool collateral mix for Earn table hover — token rows plus an Idle remainder.
21
+ * Slice shares are derived from `amount.valueUsd`.
22
+ */
23
+ export declare function CollateralAllocationTooltip({ data, children, className, }: CollateralAllocationTooltipProps): React.ReactElement;
@@ -0,0 +1,8 @@
1
+ export declare class CollateralAllocationTooltipTest {
2
+ static root: string;
3
+ static row: string;
4
+ static wheel: string;
5
+ }
6
+ export declare class AllocationWheelTest {
7
+ static root: string;
8
+ }
@@ -0,0 +1,3 @@
1
+ export * from './allocation-wheel';
2
+ export * from './collateral-allocation-tooltip';
3
+ export * from './constants';
@@ -0,0 +1,6 @@
1
+ export declare class PoolAssetsTableTest {
2
+ static root: string;
3
+ static exposureCell: string;
4
+ static capCell: string;
5
+ static capUtilizationCell: string;
6
+ }
@@ -1,3 +1,4 @@
1
+ export * from './constants';
1
2
  export * from './pool-assets-table';
2
3
  export * from './pool-assets-table-head';
3
4
  export * from './pool-assets-table-row';
@@ -1,10 +1,9 @@
1
1
  import { default as React } from 'react';
2
2
  import { PoolAssetsTableSort } from './types';
3
- /** Props for {@link PoolAssetsTableHead}. */
4
3
  export interface PoolAssetsTableHeadProps {
5
4
  readonly sort: PoolAssetsTableSort;
6
5
  }
7
6
  /**
8
- * Header row: sortable Asset, Rate, and Limits columns (`components.poolAssetsTable.*` locale keys).
7
+ * Header row: sortable Name / Exposure / Cap / Cap utilization.
9
8
  */
10
9
  export declare function PoolAssetsTableHead({ sort, }: PoolAssetsTableHeadProps): React.ReactElement;
@@ -1,15 +1,15 @@
1
- import { TokenData } from '@gearbox-protocol/sdk/common-utils';
1
+ import { QuotaAsset, Token } from '@gearbox-protocol/sdk/model';
2
2
  import { default as React } from 'react';
3
- import { PoolAssetsTableQuotaRow } from './types';
4
- /** Props for {@link PoolAssetsTableRow}. */
5
3
  export interface PoolAssetsTableRowProps {
6
4
  readonly poolName: string;
7
- readonly token: TokenData | undefined;
8
- readonly currentQuota: PoolAssetsTableQuotaRow;
9
- readonly underlyingToken: TokenData;
5
+ readonly asset: QuotaAsset;
6
+ readonly underlyingToken: Token;
10
7
  readonly last: boolean;
8
+ readonly isCompact: boolean;
9
+ readonly totalUsed: bigint;
10
+ readonly colorIndex: number;
11
11
  }
12
12
  /**
13
- * Single data row: token + pool name, `bps`-formatted rate, and formatted usage vs limit.
13
+ * Single data row: token name, exposure (amount + pie), cap, and cap utilization.
14
14
  */
15
- export declare function PoolAssetsTableRow({ poolName, token, currentQuota, underlyingToken, last, }: PoolAssetsTableRowProps): React.ReactElement;
15
+ export declare function PoolAssetsTableRow({ poolName, asset, underlyingToken, last, isCompact, totalUsed, colorIndex, }: PoolAssetsTableRowProps): React.ReactElement;
@@ -1,27 +1,14 @@
1
- import { TokenData } from '@gearbox-protocol/sdk/common-utils';
1
+ import { QuotaAsset, Token } from '@gearbox-protocol/sdk/model';
2
2
  import { default as React } from 'react';
3
- import { Address } from 'viem';
4
- import { PoolAssetsTableQuotaRow, PoolAssetsTableSort } from './types';
5
- /**
6
- * Props for {@link PoolAssetsTable}.
7
- */
3
+ import { PoolAssetsTableSort } from './types';
8
4
  export interface PoolAssetsTableProps {
9
- /** Quota rows to render (one per asset). */
10
- readonly list: ReadonlyArray<PoolAssetsTableQuotaRow>;
11
- /** Pool name shown under the asset title. */
5
+ readonly list: ReadonlyArray<QuotaAsset>;
12
6
  readonly poolName: string;
13
7
  readonly sort: PoolAssetsTableSort;
14
- /** Token metadata keyed by token address (must include every `quota.token`). */
15
- readonly tokensList: Partial<Record<Address, TokenData>>;
16
- /** Underlying asset used for `TokenTemplate` amounts in the usage column. */
17
- readonly underlyingToken: TokenData;
8
+ readonly underlyingToken: Token;
18
9
  }
19
10
  /**
20
- * Legacy GridTable of pool asset quotas (`TokenData` field props).
21
- * Canonical consumer table is client-v3 `PoolsAssetsTable` (`data: PoolOpportunityDetail`).
22
- * Do not add a third table in this pass — next-stage `table/` absorbs this.
23
- *
24
- * On viewports below the mobile breakpoint the header is hidden and each row
25
- * uses the compact `TableLineSm` layout.
11
+ * Grid table of pool asset quotas: exposure, cap, and cap utilization.
12
+ * Collapses into stacked cards below {@link COMPACT_WIDTH_THRESHOLD}.
26
13
  */
27
- export declare function PoolAssetsTable({ list, poolName, sort, tokensList, underlyingToken, }: PoolAssetsTableProps): React.ReactElement | null;
14
+ export declare function PoolAssetsTable({ list, poolName, sort, underlyingToken, }: PoolAssetsTableProps): React.ReactElement | null;
@@ -1,7 +1,7 @@
1
- import { Address } from 'viem';
1
+ import { QuotaAsset } from '@gearbox-protocol/sdk/model';
2
2
  import { SortField, SortSetterFunction } from '../../../hooks';
3
3
  /** Column identifiers used by the pool assets table header sort controls. */
4
- export type PoolAssetsSortFields = "name" | "rate" | "usage";
4
+ export type PoolAssetsSortFields = "name" | "exposure" | "cap" | "capUtilization";
5
5
  /**
6
6
  * Sort state + setter wired to `HeadCell` / `useSort` (same pattern as `PoolTable`).
7
7
  */
@@ -13,13 +13,5 @@ export interface PoolAssetsTableSort {
13
13
  export interface PoolAssetsFilterState {
14
14
  readonly sort: PoolAssetsTableSort;
15
15
  }
16
- /**
17
- * One asset line: quota limit, usage, and borrow rate.
18
- * Shape aligns with Gearbox SDK quota / QuotaInfo-style data.
19
- */
20
- export interface PoolAssetsTableQuotaRow {
21
- readonly token: Address;
22
- readonly limit: bigint;
23
- readonly totalQuoted: bigint;
24
- readonly rate: bigint;
25
- }
16
+ /** One quota row — the SDK's {@link QuotaAsset}. */
17
+ export type PoolAssetsTableQuotaRow = QuotaAsset;
@@ -2,7 +2,7 @@ import { VariantProps } from 'class-variance-authority';
2
2
  import { GraphProps } from './graph';
3
3
  import * as React from "react";
4
4
  declare const graphViewVariants: (props?: ({
5
- variant?: "default" | "outlined" | "ghost" | "elevated" | null | undefined;
5
+ variant?: "default" | "outlined" | "ghost" | "elevated" | "plain" | null | undefined;
6
6
  size?: "full" | "default" | "sm" | "lg" | "xl" | null | undefined;
7
7
  padding?: "none" | "default" | "sm" | "lg" | null | undefined;
8
8
  } & import('class-variance-authority/types').ClassProp) | undefined) => string;
@@ -30,6 +30,10 @@ export type VerticalLineOptions = Partial<{
30
30
  width: number;
31
31
  labelBackgroundColor: string;
32
32
  labelTextColor: string;
33
+ /**
34
+ * Time-axis (bottom) badge. Independent of the top overlay, which renders
35
+ * whenever `labelText`, `value`, or `tooltipText` is set.
36
+ */
33
37
  showLabel: boolean;
34
38
  /**
35
39
  * Text shown only on hover of the line's badge (not rendered inline). Use it
@@ -0,0 +1,8 @@
1
+ import { default as React } from 'react';
2
+ export interface HFIndicatorProps {
3
+ readonly value?: string;
4
+ }
5
+ /**
6
+ * Concentric rings around a health-factor value. Presentation only.
7
+ */
8
+ export declare function HFIndicator({ value, }: HFIndicatorProps): React.ReactElement;
@@ -0,0 +1 @@
1
+ export * from './hf-indicator';
@@ -6,6 +6,7 @@ export * from './assets-list-cell';
6
6
  export * from './badge';
7
7
  export * from './base';
8
8
  export * from './base-link';
9
+ export * from './base-table';
9
10
  export * from './block-sync-pill';
10
11
  export * from './breadcrumbs';
11
12
  export * from './breakpoint-provider';
@@ -14,6 +15,7 @@ export * from './cards';
14
15
  export * from './checkbox';
15
16
  export * from './checkbox-item';
16
17
  export * from './client-adapters';
18
+ export * from './collateral-allocation-tooltip';
17
19
  export * from './composites';
18
20
  export * from './compound-apy';
19
21
  export * from './confirm-menu';
@@ -33,8 +35,10 @@ export * from './guard';
33
35
  export * from './head-cell';
34
36
  export * from './health-factor';
35
37
  export * from './help-tip';
38
+ export * from './hf-indicator';
36
39
  export * from './icon-button';
37
40
  export * from './icons';
41
+ export * from './infinite-scroll';
38
42
  export * from './input';
39
43
  export * from './label';
40
44
  export * from './layout';
@@ -44,6 +48,7 @@ export * from './loader';
44
48
  export * from './loading';
45
49
  export * from './loading-bar';
46
50
  export * from './modal';
51
+ export * from './name-cell';
47
52
  export * from './navbar-logo';
48
53
  export * from './navigation-context';
49
54
  export * from './points-icon';
@@ -0,0 +1 @@
1
+ export * from './infinite-scroll-wrapper';
@@ -0,0 +1,11 @@
1
+ import { default as React, PropsWithChildren } from 'react';
2
+ export interface InfiniteScrollWrapperProps {
3
+ readonly dataLength: number;
4
+ readonly hasMore: boolean;
5
+ readonly onNextLoad: () => void;
6
+ }
7
+ /**
8
+ * List footer that asks for the next page. Presentation only: the caller
9
+ * owns paging state and `onNextLoad`.
10
+ */
11
+ export declare function InfiniteScrollWrapper({ hasMore, dataLength, children, onNextLoad, }: PropsWithChildren<InfiniteScrollWrapperProps>): React.ReactElement;
@@ -0,0 +1 @@
1
+ export * from './name-cell';
@@ -0,0 +1,13 @@
1
+ import { default as React, ReactNode } from 'react';
2
+ export interface NameCellProps {
3
+ readonly title: ReactNode;
4
+ readonly subtitle?: ReactNode;
5
+ readonly chips?: ReactNode;
6
+ readonly caption?: ReactNode;
7
+ readonly leading?: ReactNode;
8
+ readonly disabledStyle?: boolean;
9
+ }
10
+ /**
11
+ * Table-name layout: optional leading slot, title + chips, subtitle, caption.
12
+ */
13
+ export declare function NameCell({ title, subtitle, chips, caption, leading, disabledStyle, }: NameCellProps): React.ReactElement;
@@ -1,2 +1,3 @@
1
1
  export type { NetworkIconProps } from './network-icon';
2
2
  export * from './network-icon';
3
+ export * from './network-indicator';