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

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,7 +50,7 @@ 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",
@@ -59,7 +60,7 @@ function Z({
               },
               "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/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
 };

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

@@ -1,140 +1,181 @@
-import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import { faEllipsis as C } from "@fortawesome/free-solid-svg-icons";
-import { Children as A, isValidElement as m } from "react";
-import { InfoPortalProvider as _, InfoPortalOut as D } from "../info-portal/info-portal.js";
-import { SegmentedTabs as E, SEGMENTED_TABS_INACTIVE_BUTTON_CLASS as N } from "../segmented-tabs/segmented-tabs.js";
-import { Stack as r } from "../stack/stack.js";
-import { useTitleText as x } from "../text/use-title-text.js";
-import { Button as v } from "../../buttons/button/button.js";
-import { StyledDialogContainer as B } from "../../client-adapters/styled-dialog-container/styled-dialog-container.js";
-import { FaIcon as j } from "../../icons/fa-icon.js";
-import { SimpleDropdown as k } from "../../simple-dropdown/simple-dropdown.js";
-import { SimpleDropdownMenuItem as z } from "../../simple-dropdown/simple-dropdown-menu-item.js";
-import { ManagePaneTest as o } from "./constants.js";
-function O(n) {
+import { jsxs as r, jsx as n } from "react/jsx-runtime";
+import { faEllipsis as x } from "@fortawesome/free-solid-svg-icons";
+import { useState as E, Children as N, isValidElement as f } from "react";
+import { InfoPortalProvider as v, InfoPortalOut as O } from "../info-portal/info-portal.js";
+import { SegmentedTabs as k, SEGMENTED_TABS_INACTIVE_BUTTON_CLASS as B } from "../segmented-tabs/segmented-tabs.js";
+import { Stack as e } from "../stack/stack.js";
+import { useTitleText as j } from "../text/use-title-text.js";
+import { Button as z } from "../../buttons/button/button.js";
+import { StyledDialogContainer as V } from "../../client-adapters/styled-dialog-container/styled-dialog-container.js";
+import { ConfirmMenu as F } from "../../confirm-menu/confirm-menu.js";
+import "../../modal/modal.js";
+import "@radix-ui/react-dialog";
+import "../../dialog/dialog-container.js";
+import "../../dialog/dialog-content.js";
+import "../../dialog/dialog-description.js";
+import "../../dialog/dialog-footer.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 "../../dialog/dialog-header.js";
+import "../../dialog/dialog-title.js";
+import { DialogModalContainer as G } from "../../dialog/dialog-modal-container.js";
+import "../../dialog/dialog-overlay.js";
+import "viem";
+import "../../input/input.js";
+import "../../label/label.js";
+import { FaIcon as L } from "../../icons/fa-icon.js";
+import { SimpleDropdown as U } from "../../simple-dropdown/simple-dropdown.js";
+import { SimpleDropdownMenuItem as q } from "../../simple-dropdown/simple-dropdown-menu-item.js";
+import { ManagePaneTest as i } from "./constants.js";
+function H(o) {
   return null;
 }
-function V(n) {
+function J(o) {
   return null;
 }
-function F(n) {
+function K(o) {
   return null;
 }
-function G(n) {
-  return m(n) && n.type === O;
+function Q(o) {
+  return f(o) && o.type === H;
 }
-function L(n) {
-  return m(n) && n.type === V;
+function R(o) {
+  return f(o) && o.type === J;
 }
-function U(n) {
-  return m(n) && n.type === F;
+function W(o) {
+  return f(o) && o.type === K;
 }
-function et({
-  children: n,
-  activeTab: c,
-  onTabChange: h,
-  header: T,
-  footer: b,
-  actions: s,
-  testId: M
+function Et({
+  children: o,
+  activeTab: g,
+  onTabChange: M,
+  header: I,
+  footer: S,
+  actions: l,
+  testId: C
 }) {
-  const f = x(), p = A.toArray(n), u = p.filter(G), I = p.find(L), l = p.filter(U), P = u.filter((t) => !t.props.hidden), S = u.find((t) => t.props.id === c)?.props.children, i = I?.props.items ?? [], w = new Set(l.map((t) => t.props.id)), d = [
-    ...P.map((t) => ({
+  const d = j(), [P, h] = E(null), m = N.toArray(o), T = m.filter(Q), w = m.find(R), p = m.filter(W), A = T.filter((t) => !t.props.hidden), D = T.find((t) => t.props.id === g)?.props.children, a = w?.props.items ?? [], y = new Set(p.map((t) => t.props.id)), c = p.find((t) => t.props.id === P), b = () => h(null), u = [
+    ...A.map((t) => ({
       id: t.props.id,
-      item: f(t.props.title),
+      item: d(t.props.title),
       disabled: t.props.disabled,
-      testId: o.tab(t.props.id)
+      testId: i.tab(t.props.id)
     })),
-    ...l.map((t) => ({
+    ...p.map((t) => ({
       id: t.props.id,
-      item: f(t.props.title),
-      testId: o.tab(t.props.id)
+      item: d(t.props.title),
+      testId: i.tab(t.props.id)
     }))
   ];
-  return /* @__PURE__ */ e(_, { children: /* @__PURE__ */ a(r, { gap: "md", "data-testid": M ?? o.root, children: [
-    T,
-    d.length > 0 || i.length > 0 || s ? /* @__PURE__ */ a(r, { direction: "row", align: "center", gap: "sm", children: [
-      d.length > 0 ? /* @__PURE__ */ e(
-        E,
-        {
-          items: d,
-          activeTab: c,
-          onTabChange: (t) => {
-            const g = l.find((y) => y.props.id === t);
-            if (g) {
-              g.props.onClick();
-              return;
-            }
-            w.has(t) || h(t);
-          },
-          testId: o.tabs
-        }
-      ) : null,
-      i.length > 0 || s ? /* @__PURE__ */ a(
-        r,
+  return /* @__PURE__ */ r(v, { children: [
+    /* @__PURE__ */ r(e, { gap: "md", "data-testid": C ?? i.root, children: [
+      I,
+      u.length > 0 || a.length > 0 || l ? /* @__PURE__ */ r(e, { direction: "row", align: "center", gap: "sm", children: [
+        u.length > 0 ? /* @__PURE__ */ n(
+          k,
+          {
+            items: u,
+            activeTab: g,
+            onTabChange: (t) => {
+              const s = p.find((_) => _.props.id === t);
+              if (s) {
+                s.props.children != null && h(s.props.id), s.props.onClick?.();
+                return;
+              }
+              y.has(t) || M(t);
+            },
+            testId: i.tabs
+          }
+        ) : null,
+        a.length > 0 || l ? /* @__PURE__ */ r(
+          e,
+          {
+            direction: "row",
+            align: "center",
+            gap: "sm",
+            className: "ml-auto",
+            children: [
+              a.length > 0 ? /* @__PURE__ */ n(
+                U,
+                {
+                  title: /* @__PURE__ */ n(
+                    z,
+                    {
+                      type: "button",
+                      variant: "ghost",
+                      size: "md",
+                      className: B,
+                      "aria-label": "More actions",
+                      "data-testid": i.dropdown,
+                      children: /* @__PURE__ */ n(L, { icon: x, className: "size-4" })
+                    }
+                  ),
+                  asChild: !0,
+                  placement: "bottom",
+                  align: "end",
+                  children: a.map((t) => /* @__PURE__ */ n(
+                    q,
+                    {
+                      onSelect: t.onSelect,
+                      children: t.title
+                    },
+                    t.id
+                  ))
+                }
+              ) : null,
+              l
+            ]
+          }
+        ) : null
+      ] }) : null,
+      /* @__PURE__ */ r(
+        V,
         {
-          direction: "row",
-          align: "center",
-          gap: "sm",
-          className: "ml-auto",
+          "data-testid": i.body,
+          "data-aside-form-top": !0,
           children: [
-            i.length > 0 ? /* @__PURE__ */ e(
-              k,
-              {
-                title: /* @__PURE__ */ e(
-                  v,
-                  {
-                    type: "button",
-                    variant: "ghost",
-                    size: "md",
-                    className: N,
-                    "aria-label": "More actions",
-                    "data-testid": o.dropdown,
-                    children: /* @__PURE__ */ e(j, { icon: C, className: "size-4" })
-                  }
-                ),
-                asChild: !0,
-                placement: "bottom",
-                align: "end",
-                children: i.map((t) => /* @__PURE__ */ e(
-                  z,
-                  {
-                    onSelect: t.onSelect,
-                    children: t.title
-                  },
-                  t.id
-                ))
-              }
-            ) : null,
-            s
+            /* @__PURE__ */ n(e, { children: /* @__PURE__ */ n(O, {}) }),
+            D
           ]
         }
-      ) : null
-    ] }) : null,
-    /* @__PURE__ */ a(
-      B,
+      ),
+      S
+    ] }),
+    c?.props.children != null ? /* @__PURE__ */ n(
+      G,
       {
-        "data-testid": o.body,
-        "data-aside-form-top": !0,
-        children: [
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(D, {}) }),
-          S
-        ]
+        show: !0,
+        onClickOutside: b,
+        dialog: { padding: "xl" },
+        children: /* @__PURE__ */ r("div", { "data-testid": i.actionDialog, children: [
+          /* @__PURE__ */ n(
+            F,
+            {
+              onClose: b,
+              title: d(c.props.title)
+            }
+          ),
+          c.props.children
+        ] })
       }
-    ),
-    b
-  ] }) });
+    ) : null
+  ] });
 }
-function ot({
-  children: n
+function Nt({
+  children: o
 }) {
-  return /* @__PURE__ */ e(r, { gap: "sm", "data-testid": o.message, children: n });
+  return /* @__PURE__ */ n(e, { gap: "sm", "data-testid": i.message, children: o });
 }
 export {
-  et as ManagePane,
-  F as ManagePaneActionTab,
-  ot as ManagePaneMessage,
-  O as ManagePaneTab,
-  V as ManagePaneTabDropdown,
-  o as ManagePaneTest
+  Et as ManagePane,
+  K as ManagePaneActionTab,
+  Nt as ManagePaneMessage,
+  H as ManagePaneTab,
+  J as ManagePaneTabDropdown,
+  i as ManagePaneTest
 };

package/dist/esm/components/base/page-title/index.js

@@ -1,6 +1,7 @@
-import { PageTitle as o } from "./page-title.js";
-import { PageTitleTest as T } from "./constants.js";
+import { PageHeadProvider as o, PageTitle as t } from "./page-title.js";
+import { PageTitleTest as P } from "./constants.js";
 export {
-  o as PageTitle,
-  T as PageTitleTest
+  o as PageHeadProvider,
+  t as PageTitle,
+  P as PageTitleTest
 };

package/dist/esm/components/base/page-title/page-title.js

@@ -1,38 +1,46 @@
-import { jsxs as c, Fragment as d, jsx as g } from "react/jsx-runtime";
-import { useIntlTyped as T } from "../../typed-intl/index.js";
-import { Typography as x } from "../../typography/typography.js";
-import { PageTitleTest as a } from "./constants.js";
-function r(t) {
+import { jsx as s, jsxs as g, Fragment as p } from "react/jsx-runtime";
+import { createContext as x, useContext as T } from "react";
+import { useIntlTyped as l } from "../../typed-intl/index.js";
+import { Typography as u } from "../../typography/typography.js";
+import { PageTitleTest as y } from "./constants.js";
+const m = x(null);
+function b({
+  children: t,
+  render: e
+}) {
+  return /* @__PURE__ */ s(m.Provider, { value: e, children: t });
+}
+function n(t) {
   return typeof t == "string" || !!t && typeof t == "object" && "messageId" in t;
 }
-function i(t, o) {
-  return o === void 0 ? "" : typeof o == "string" ? o : t.formatMessage(o);
+function i(t, e) {
+  return e === void 0 ? "" : typeof e == "string" ? e : t.formatMessage(e);
 }
-function j({
+function I({
   title: t,
-  browserTitle: o,
-  head: s,
-  as: m = "h1",
+  browserTitle: e,
+  as: d = "h1",
   className: f
 }) {
-  const e = T(), p = r(t) ? i(e, t) : t, n = i(
-    e,
-    o ?? (r(t) ? t : void 0)
+  const o = l(), c = T(m), a = n(t) ? i(o, t) : t, r = i(
+    o,
+    e ?? (n(t) ? t : void 0)
   );
-  return /* @__PURE__ */ c(d, { children: [
-    n ? s?.(n) : null,
-    /* @__PURE__ */ g(
-      x,
+  return /* @__PURE__ */ g(p, { children: [
+    r ? c?.(r) : null,
+    /* @__PURE__ */ s(
+      u,
       {
-        as: m,
+        as: d,
         className: f ?? "m-0 text-3xl leading-none font-medium",
-        "data-testid": a.root,
-        children: p
+        "data-testid": y.root,
+        children: a
       }
     )
   ] });
 }
 export {
-  j as PageTitle,
-  a as PageTitleTest
+  b as PageHeadProvider,
+  I as PageTitle,
+  y as PageTitleTest
 };

package/dist/esm/components/base/stat-badge/stat-badge.js

@@ -1,4 +1,4 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
 import { Stack as g } from "../stack/stack.js";
 import { useTitleText as f } from "../text/use-title-text.js";
 import { Skeleton as u } from "../../skeleton/skeleton.js";
@@ -30,24 +30,24 @@ const p = {
 function A({
   title: i,
   value: r,
-  isLoading: o = !1,
+  isLoading: a = !1,
   size: t = "default",
   action: l,
-  className: s,
+  className: o,
   testId: n
 }) {
   const c = f();
-  return /* @__PURE__ */ a(
+  return /* @__PURE__ */ s(
     "div",
     {
       className: d(
         "h-full w-full rounded-lg border border-border bg-card",
         p[t],
-        s
+        o
       ),
       "data-testid": n ?? m.root,
       children: [
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ s(
           "div",
           {
             className: d(
@@ -66,7 +66,16 @@ function A({
             ]
           }
         ),
-        /* @__PURE__ */ e("div", { className: d("font-medium text-foreground", h[t]), children: /* @__PURE__ */ e(u, { width: 80, loading: o, children: /* @__PURE__ */ e(g, { gap: "xs", align: "start", children: r }) }) })
+        /* @__PURE__ */ e(
+          "div",
+          {
+            className: d(
+              "text-left font-medium text-foreground",
+              h[t]
+            ),
+            children: /* @__PURE__ */ e(u, { width: 80, loading: a, children: /* @__PURE__ */ e(g, { gap: "xs", align: "start", className: "w-full items-start", children: r }) })
+          }
+        )
       ]
     }
   );
@@ -89,7 +98,7 @@ const b = {
 function B({
   cols: i = 1,
   colsLg: r,
-  gap: o = "default",
+  gap: a = "default",
   children: t,
   className: l
 }) {
@@ -100,7 +109,7 @@ function B({
         "grid w-full",
         b[i],
         r ? I[r] : void 0,
-        _[o],
+        _[a],
         l
       ),
       "data-testid": m.grid,