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

package/dist/esm/components/base/info-list/info-list.js

@@ -1,43 +1,60 @@
-import { jsx as e } from "react/jsx-runtime";
-import { Stack as p } from "../stack/stack.js";
-import { useTitleText as r } from "../text/use-title-text.js";
-import { Typography as f } from "../../typography/typography.js";
-import { VerticalIndicator as l } from "../../vertical-indicator/vertical-indicator.js";
+import { jsx as r } from "react/jsx-runtime";
+import { Stack as c } from "../stack/stack.js";
+import { useTitleText as n } from "../text/use-title-text.js";
+import "react";
+import { pointProgramsOf as f } from "../../../utils/apy-breakdown.js";
+import "@gearbox-protocol/sdk";
+import "clsx";
+import "tailwind-merge";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../../utils/z-index.js";
+import { PointsValue as l } from "../values/points-value.js";
+import "../../points-icon/points-icon.js";
+import "../../token-icon/token-icon.js";
+import "../../tooltip/simple-tooltip.js";
+import "../../tooltip/tooltip.js";
+import "react-intl";
+import "../../badge/badge.js";
+import "../../badge/chip.js";
+import { Typography as u } from "../../typography/typography.js";
+import { VerticalIndicator as d } from "../../vertical-indicator/vertical-indicator.js";
 import { InfoListTest as i } from "./constants.js";
-function h({
+function F({
   children: t
 }) {
-  return /* @__PURE__ */ e(p, { gap: "sm", "data-testid": i.root, children: t });
+  return /* @__PURE__ */ r(c, { gap: "sm", "data-testid": i.root, children: t });
 }
-function y({
+function g({
   title: t,
   value: o,
-  tip: n,
-  valueDescription: a,
-  valueTo: s,
-  testId: c
+  tip: e,
+  valueDescription: m,
+  valueTo: p,
+  testId: s
 }) {
-  const m = r();
-  return /* @__PURE__ */ e(
-    l,
+  const a = n();
+  return /* @__PURE__ */ r(
+    d,
     {
-      label: m(t),
-      tip: n,
+      label: a(t),
+      tip: e,
       value: o,
-      valueTo: s,
-      valueDescription: a,
+      valueTo: p,
+      valueDescription: m,
       size: "sm",
       align: "center",
-      "data-testid": c ?? i.line
+      "data-testid": s ?? i.line
     }
   );
 }
-function L({
+function G({
   title: t
 }) {
-  const o = r();
-  return /* @__PURE__ */ e(
-    f,
+  const o = n();
+  return /* @__PURE__ */ r(
+    u,
     {
       as: "span",
       color: "secondary",
@@ -49,9 +66,16 @@ function L({
     }
   );
 }
+function H({
+  data: t,
+  title: o = "components.yieldBreakdown.points"
+}) {
+  return !t || f(t).length === 0 ? null : /* @__PURE__ */ r(g, { title: o, value: /* @__PURE__ */ r(l, { data: t }) });
+}
 export {
-  y as InfoLine,
-  h as InfoList,
+  g as InfoLine,
+  F as InfoList,
   i as InfoListTest,
-  L as InfoSectionTitle
+  G as InfoSectionTitle,
+  H as PointsInfoLine
 };

package/dist/esm/components/base/leverage-input/leverage-input.js

@@ -2,20 +2,21 @@ import { jsx as t, jsxs as m } from "react/jsx-runtime";
 import { useState as I } from "react";
 import { Stack as x } from "../stack/stack.js";
 import { useTitleText as y } from "../text/use-title-text.js";
-import { EditInput as F } from "../../edit-input/edit-input.js";
-import { Slider as j } from "../../slider/slider.js";
+import { EditInput as j } from "../../edit-input/edit-input.js";
+import { Slider as F } from "../../slider/slider.js";
 import "../../slider/slider-context.js";
 import { TextButton as O } from "../../text-button/text-button.js";
 import { SimpleTooltip as R } from "../../tooltip/simple-tooltip.js";
 import "../../tooltip/tooltip.js";
 import { useIntlTyped as B, FormattedMessageTyped as T } from "../../typed-intl/index.js";
 import { WithTitle as D } from "../../with-title/with-title.js";
+import { formatLeverage as b } from "../../../utils/format-leverage.js";
 import { LeverageInputTest as i } from "./constants.js";
 const o = 100, P = 10;
-function Z({
-  value: r,
+function ee({
+  value: n,
   onChange: s,
-  max: n,
+  max: r,
   min: l = 1,
   title: c,
   hint: d,
@@ -25,11 +26,11 @@ function Z({
   size: S = "sm"
 }) {
   const E = B(), C = y(), p = w ?? [
-    { start: l, end: n, color: "additionalSuccess" }
+    { start: l, end: r, color: "additionalSuccess" }
   ], L = N ?? (p.length > 0 ? E.formatMessage({
     messageId: "components.leverageInput.available"
-  }) : void 0), [M, u] = I(void 0), [f, g] = I(""), h = M ?? r, v = (e) => {
-    s(_(e, l, n)), u(void 0);
+  }) : void 0), [M, u] = I(void 0), [f, g] = I(""), h = M ?? n, v = (e) => {
+    s(_(e, l, r)), u(void 0);
   }, k = () => {
     const e = Number.parseFloat(f.replace(",", "."));
     Number.isFinite(e) && v(e);
@@ -49,17 +50,17 @@ function Z({
         ] }),
         /* @__PURE__ */ m(x, { direction: "row", align: "center", gap: "sm", children: [
           /* @__PURE__ */ t("div", { className: "flex w-[90px] flex-row flex-nowrap items-center", children: /* @__PURE__ */ t(
-            F,
+            j,
             {
               value: f,
               placeholder: "0",
-              label: `×${b(h)}`,
+              label: `${b(h)}x`,
               textButtonProps: {
                 className: "inline-flex items-center whitespace-nowrap"
               },
               "data-testid": i.value,
               onEditModeChange: (e) => {
-                e && g(b(r));
+                e && g(b(n));
               },
               onChange: (e) => g(e.target.value),
               onSubmit: k
@@ -88,15 +89,15 @@ function Z({
         ] })
       ] }),
       children: /* @__PURE__ */ t(
-        j,
+        F,
         {
           from: l * o,
-          to: n * o,
+          to: r * o,
           precision: o,
           value: h * o,
           colorIntervals: V,
           colorIntervalLabel: L,
-          markerStep: n > P ? 200 : 100,
+          markerStep: r > P ? 200 : 100,
           "data-testid": i.slider,
           onChangeValue: (e) => u(e / o),
           onSubmitValue: (e) => v(e / o)
@@ -105,13 +106,10 @@ function Z({
     }
   ) });
 }
-function _(r, s, n) {
-  return Math.min(Math.max(r, s), n);
-}
-function b(r) {
-  return (Math.round(r * 100) / 100).toFixed(2);
+function _(n, s, r) {
+  return Math.min(Math.max(n, s), r);
 }
 export {
-  Z as LeverageInput,
+  ee as LeverageInput,
   i as LeverageInputTest
 };

package/dist/esm/components/base/leverage-preset-chips/constants.js

@@ -0,0 +1,7 @@
+const e = {
+  root: "leverage-preset-chips-root",
+  chip: "leverage-preset-chips-chip"
+};
+export {
+  e as LeveragePresetChipsTest
+};

package/dist/esm/components/base/leverage-preset-chips/index.js

@@ -0,0 +1,6 @@
+import { LeveragePresetChipsTest as s } from "./constants.js";
+import { LeveragePresetChips as o } from "./leverage-preset-chips.js";
+export {
+  o as LeveragePresetChips,
+  s as LeveragePresetChipsTest
+};

package/dist/esm/components/base/leverage-preset-chips/leverage-preset-chips.js

@@ -0,0 +1,39 @@
+import { jsxs as n, jsx as m } from "react/jsx-runtime";
+import { SegmentedTabs as g } from "../segmented-tabs/segmented-tabs.js";
+import { FormattedMessageTyped as d } from "../../typed-intl/index.js";
+import { formatChipLeverage as l } from "../../../utils/leverage-presets.js";
+import { LeveragePresetChipsTest as s } from "./constants.js";
+function u({
+  options: e,
+  value: r,
+  onChange: a
+}) {
+  if (e.length === 0) return null;
+  const i = r != null && e.includes(r) ? String(r) : String(e[e.length - 1]);
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: "flex items-center gap-2",
+      "data-testid": s.root,
+      children: [
+        /* @__PURE__ */ m("span", { className: "text-sm text-muted-foreground", children: /* @__PURE__ */ m(d, { messageId: "components.leveragePresetChips.label" }) }),
+        /* @__PURE__ */ m(
+          g,
+          {
+            items: e.map((t) => ({
+              id: String(t),
+              item: `${l(t)}×`,
+              testId: s.chip
+            })),
+            activeTab: i,
+            onTabChange: (t) => a(Number(t))
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  u as LeveragePresetChips,
+  s as LeveragePresetChipsTest
+};

package/dist/esm/components/base/liquidation-price-block/liquidation-price-block.js

@@ -1,40 +1,45 @@
-import { jsx as e, jsxs as v } from "react/jsx-runtime";
-import { useTitleText as g } from "../text/use-title-text.js";
-import { FadeoutLoading as m } from "../../fadeout-loading/fadeout-loading.js";
-import { FormattedNumberString as P } from "../../formatted-number/formatted-number.js";
-import { HealthDot as T } from "../../status-elements/status-elements.js";
-import { FormattedMessageTyped as s } from "../../typed-intl/index.js";
+import { jsx as i, jsxs as P } from "react/jsx-runtime";
+import { useTitleText as b } from "../text/use-title-text.js";
+import { FadeoutLoading as s } from "../../fadeout-loading/fadeout-loading.js";
+import { FormattedNumberString as T } from "../../formatted-number/formatted-number.js";
+import { HealthDot as g } from "../../status-elements/status-elements.js";
+import { FormattedMessageTyped as d } from "../../typed-intl/index.js";
 import { VerticalIndicator as h } from "../../vertical-indicator/vertical-indicator.js";
 import { bnToLiquidationPriceView as x } from "../../../utils/parse-input-to-bn.js";
 import { LiquidationPriceBlockTest as r } from "./constants.js";
-function j({
-  price: i,
+function q(e, o) {
+  if (!(!e || !o))
+    return `${e.symbol} / ${o.symbol}`;
+}
+function D({
+  price: e,
   priceTo: o,
-  pricePair: t,
+  collateral: t,
+  underlying: u,
   zone: l,
-  isLoading: a,
-  title: n,
-  tip: u,
-  testId: p
+  isLoading: n,
+  title: a,
+  tip: p,
+  testId: f
 }) {
-  const f = g(), d = o !== void 0;
-  return /* @__PURE__ */ e(
+  const v = b(), m = o !== void 0;
+  return /* @__PURE__ */ i(
     h,
     {
       align: "center",
       dimPreviousValue: !1,
-      "data-testid": p ?? r.root,
-      label: n !== void 0 ? f(n) : /* @__PURE__ */ e(s, { messageId: "components.liquidationPriceBlock.label" }),
-      tip: u ?? /* @__PURE__ */ e(s, { messageId: "components.liquidationPriceBlock.tip" }),
-      value: /* @__PURE__ */ e(m, { loading: a, children: /* @__PURE__ */ e(
+      "data-testid": f ?? r.root,
+      label: a !== void 0 ? v(a) : /* @__PURE__ */ i(d, { messageId: "components.liquidationPriceBlock.label" }),
+      tip: p ?? /* @__PURE__ */ i(d, { messageId: "components.liquidationPriceBlock.tip" }),
+      value: /* @__PURE__ */ i(s, { loading: n, children: /* @__PURE__ */ i(
         c,
         {
-          price: i,
-          zone: d ? void 0 : l,
+          price: e,
+          zone: m ? void 0 : l,
           testId: r.value
         }
       ) }),
-      valueTo: d ? /* @__PURE__ */ e(m, { loading: a, children: /* @__PURE__ */ e(
+      valueTo: m ? /* @__PURE__ */ i(s, { loading: n, children: /* @__PURE__ */ i(
         c,
         {
           price: o ?? null,
@@ -42,21 +47,21 @@ function j({
           testId: r.valueTo
         }
       ) }) : void 0,
-      valueDescription: t
+      valueDescription: q(t, u)
     }
   );
 }
 function c({
-  price: i,
+  price: e,
   zone: o,
   testId: t
 }) {
-  return /* @__PURE__ */ v("span", { className: "inline-flex items-center", "data-testid": t, children: [
-    i === void 0 ? "—" : i === null || i === 0n ? "N/A" : /* @__PURE__ */ e(P, { value: x(i) }),
-    o ? /* @__PURE__ */ e("span", { className: "ml-1.5", children: /* @__PURE__ */ e(T, { zone: o }) }) : null
+  return /* @__PURE__ */ P("span", { className: "inline-flex items-center", "data-testid": t, children: [
+    e === void 0 ? "—" : e === null || e === 0n ? "N/A" : /* @__PURE__ */ i(T, { value: x(e) }),
+    o ? /* @__PURE__ */ i("span", { className: "ml-1.5", children: /* @__PURE__ */ i(g, { zone: o }) }) : null
   ] });
 }
 export {
-  j as LiquidationPriceBlock,
+  D as LiquidationPriceBlock,
   r as LiquidationPriceBlockTest
 };

package/dist/esm/components/base/manage-pane/constants.js

@@ -1,11 +1,12 @@
-class t {
+class e {
   static root = "manage-pane-root";
   static tabs = "manage-pane-tabs";
   static dropdown = "manage-pane-dropdown";
   static body = "manage-pane-body";
   static message = "manage-pane-message";
+  static actionDialog = "manage-pane-action-dialog";
   static tab = (a) => `manage-pane-tab-${a}`;
 }
 export {
-  t as ManagePaneTest
+  e as ManagePaneTest
 };