@gearbox-protocol/ui-kit 4.0.0-next.44 → 4.0.0-next.45

package/dist/esm/components/base/position-assets/position-assets.js

@@ -1,4 +1,4 @@
-import { jsx as n, jsxs as m, Fragment as p } from "react/jsx-runtime";
+import { jsx as e, jsxs as m, Fragment as p } from "react/jsx-runtime";
 import { Stack as h } from "../stack/stack.js";
 import "../../help-tip/help-tip.js";
 import "react";
@@ -7,26 +7,28 @@ import "@gearbox-protocol/sdk/onchain";
 import "clsx";
 import "tailwind-merge";
 import "sonner";
+import { APPROXIMATE_SYMBOL as f } from "../../../utils/format.js";
 import "luxon";
 import "../../../utils/z-index.js";
 import "../../points-icon/points-icon.js";
 import { TokenBigint as d } from "../values/scalars.js";
 import "../../badge/badge.js";
 import "../../badge/chip.js";
-import { ShortString as f } from "../../short-string/short-string.js";
-import { TokenSymbol as u } from "../../token-symbol/token-symbol.js";
-import { Typography as k } from "../../typography/typography.js";
+import { ShortString as u } from "../../short-string/short-string.js";
+import { TokenSymbol as k } from "../../token-symbol/token-symbol.js";
+import { Typography as v } from "../../typography/typography.js";
 import { PositionAssetsTest as c } from "./constants.js";
-const v = 1, g = 20;
-function Y({
+const g = 1, y = 20;
+function I({
   assets: s,
-  to: e,
+  to: r,
   empty: a,
-  testId: i
+  approximate: l,
+  testId: o
 }) {
-  const t = y(s, e), r = e !== void 0;
-  return /* @__PURE__ */ n(h, { gap: "sm", align: "end", "data-testid": i ?? c.root, children: t.length === 0 ? a !== void 0 && /* @__PURE__ */ n(
-    k,
+  const n = S(s, r), i = r !== void 0;
+  return /* @__PURE__ */ e(h, { gap: "sm", align: "end", "data-testid": o ?? c.root, children: n.length === 0 ? a !== void 0 && /* @__PURE__ */ e(
+    v,
     {
       variant: "caption",
       color: "secondary",
@@ -34,63 +36,64 @@ function Y({
       "data-testid": c.empty,
       children: a
     }
-  ) : t.map((o) => /* @__PURE__ */ m(
+  ) : n.map((t) => /* @__PURE__ */ m(
     "span",
     {
       className: "flex items-center gap-2",
       "data-testid": c.row,
       children: [
-        /* @__PURE__ */ n(u, { size: 20, token: o.token }),
+        /* @__PURE__ */ e(k, { size: 20, token: t.token }),
         /* @__PURE__ */ m("span", { className: "flex items-center", children: [
-          r && /* @__PURE__ */ m(p, { children: [
-            /* @__PURE__ */ n("span", { className: "text-secondary-foreground line-through [&_*]:text-secondary-foreground [&_*]:line-through", children: /* @__PURE__ */ n(
+          i && /* @__PURE__ */ m(p, { children: [
+            /* @__PURE__ */ e("span", { className: "text-secondary-foreground line-through [&_*]:text-secondary-foreground [&_*]:line-through", children: /* @__PURE__ */ e(
               d,
               {
-                data: o.value,
-                token: o.token,
+                data: t.value,
+                token: t.token,
                 showSymbol: !1
               }
             ) }),
-            /* @__PURE__ */ n("span", { className: "px-1.5 text-gray-70", children: "→" })
+            /* @__PURE__ */ e("span", { className: "px-1.5 text-gray-70", children: "→" })
           ] }),
-          /* @__PURE__ */ n(
+          l ? /* @__PURE__ */ e("span", { children: f }) : null,
+          /* @__PURE__ */ e(
             d,
             {
-              data: r ? o.valueTo : o.value,
-              token: o.token,
+              data: i ? t.valueTo : t.value,
+              token: t.token,
               showSymbol: !1
             }
           ),
-          /* @__PURE__ */ n(f, { className: "ml-1", maxLength: g, children: o.token.symbol })
+          /* @__PURE__ */ e(u, { className: "ml-1", maxLength: y, children: t.token.symbol })
         ] })
       ]
     },
-    o.token.address
+    t.token.address
   )) });
 }
-function y(s, e) {
-  const a = /* @__PURE__ */ new Map(), i = (t, r) => {
-    const o = t.token.address.toLowerCase(), l = a.get(o);
-    a.set(o, {
-      token: l?.token ?? t.token,
+function S(s, r) {
+  const a = /* @__PURE__ */ new Map(), l = (o, n) => {
+    const i = o.token.address.toLowerCase(), t = a.get(i);
+    a.set(i, {
+      token: t?.token ?? o.token,
       // a token only the other side holds is a zero here, not a gap
-      value: r === "from" ? t.value : l?.value ?? 0n,
-      valueTo: r === "to" ? t.value : l?.valueTo ?? 0n,
-      worth: x(l?.worth, t.valueUsd)
+      value: n === "from" ? o.value : t?.value ?? 0n,
+      valueTo: n === "to" ? o.value : t?.valueTo ?? 0n,
+      worth: x(t?.worth, o.valueUsd)
     });
   };
-  for (const t of s ?? []) i(t, "from");
-  for (const t of e ?? []) i(t, "to");
-  return [...a.values()].filter((t) => t.worth === null || t.worth >= v).sort(
-    (t, r) => (r.worth ?? 0) - (t.worth ?? 0) || // a tie has to break the same way every render, or the rows drift
-    t.token.address.localeCompare(r.token.address)
+  for (const o of s ?? []) l(o, "from");
+  for (const o of r ?? []) l(o, "to");
+  return [...a.values()].filter((o) => o.worth === null || o.worth >= g).sort(
+    (o, n) => (n.worth ?? 0) - (o.worth ?? 0) || // a tie has to break the same way every render, or the rows drift
+    o.token.address.localeCompare(n.token.address)
   );
 }
-function x(s, e) {
-  return s === void 0 ? e : s === null || e === null ? null : Math.max(s, e);
+function x(s, r) {
+  return s === void 0 ? r : s === null || r === null ? null : Math.max(s, r);
 }
 export {
-  Y as PositionAssets,
+  I as PositionAssets,
   c as PositionAssetsTest,
-  y as visibleAssets
+  S as visibleAssets
 };

package/dist/esm/components/base/time-to-liquidation-block/time-to-liquidation-block.js

@@ -1,60 +1,68 @@
-import { jsx as t, jsxs as c } from "react/jsx-runtime";
-import { useTitleText as T } from "../text/use-title-text.js";
-import { FadeoutLoading as l } from "../../fadeout-loading/fadeout-loading.js";
-import { HealthDot as f } from "../../status-elements/status-elements.js";
-import { FormattedMessageTyped as m } from "../../typed-intl/index.js";
-import { VerticalIndicator as h } from "../../vertical-indicator/vertical-indicator.js";
-import { ttlLeft as g, getTTLZones as x } from "../../../utils/ttl.js";
-import { TimeToLiquidationBlockTest as r } from "./constants.js";
+import { jsx as t, jsxs as m, Fragment as f } from "react/jsx-runtime";
+import { useTitleText as h } from "../text/use-title-text.js";
+import { FadeoutLoading as s } from "../../fadeout-loading/fadeout-loading.js";
+import { HealthDot as g } from "../../status-elements/status-elements.js";
+import { FormattedMessageTyped as u } from "../../typed-intl/index.js";
+import { VerticalIndicator as L } from "../../vertical-indicator/vertical-indicator.js";
+import { APPROXIMATE_SYMBOL as I } from "../../../utils/format.js";
+import { ttlLeft as x, getTTLZones as B } from "../../../utils/ttl.js";
+import { TimeToLiquidationBlockTest as a } from "./constants.js";
 function j({
   data: o,
   dataTo: n,
-  zone: a,
+  approximate: r,
+  zone: l,
   isLoading: e,
   title: i,
-  tip: s,
-  testId: v
+  tip: v,
+  testId: p
 }) {
-  const p = T(), d = n !== void 0;
+  const T = h(), d = n !== void 0;
   return /* @__PURE__ */ t(
-    h,
+    L,
     {
       align: "center",
       dimPreviousValue: !1,
-      "data-testid": v ?? r.root,
-      label: i !== void 0 ? p(i) : /* @__PURE__ */ t(m, { messageId: "components.timeToLiquidationBlock.label" }),
-      tip: s ?? /* @__PURE__ */ t(m, { messageId: "components.timeToLiquidationBlock.tip" }),
-      value: /* @__PURE__ */ t(l, { loading: e, children: /* @__PURE__ */ t(
-        u,
+      "data-testid": p ?? a.root,
+      label: i !== void 0 ? T(i) : /* @__PURE__ */ t(u, { messageId: "components.timeToLiquidationBlock.label" }),
+      tip: v ?? /* @__PURE__ */ t(u, { messageId: "components.timeToLiquidationBlock.tip" }),
+      value: /* @__PURE__ */ t(s, { loading: e, children: /* @__PURE__ */ t(
+        c,
         {
           milliseconds: o,
-          zone: d ? void 0 : a,
-          testId: r.value
+          approximate: r,
+          zone: d ? void 0 : l,
+          testId: a.value
         }
       ) }),
-      valueTo: d ? /* @__PURE__ */ t(l, { loading: e, children: /* @__PURE__ */ t(
-        u,
+      valueTo: d ? /* @__PURE__ */ t(s, { loading: e, children: /* @__PURE__ */ t(
+        c,
         {
           milliseconds: n ?? null,
-          zone: a,
-          testId: r.valueTo
+          approximate: r,
+          zone: l,
+          testId: a.valueTo
         }
       ) }) : void 0
     }
   );
 }
-function u({
+function c({
   milliseconds: o,
-  zone: n,
-  testId: a
+  approximate: n,
+  zone: r,
+  testId: l
 }) {
-  const e = o == null ? void 0 : g(o), i = n ?? (o == null ? void 0 : x(o));
-  return /* @__PURE__ */ c("span", { className: "inline-flex items-center", "data-testid": a, children: [
-    o === void 0 ? "—" : o === null ? "N/A" : e?.months !== void 0 ? `${e.months}mo` : e?.day !== void 0 ? `${e.day}d` : "<1d",
-    o != null && i ? /* @__PURE__ */ t("span", { className: "ml-1.5", children: /* @__PURE__ */ t(f, { zone: i }) }) : null
+  const e = o == null ? void 0 : x(o), i = r ?? (o == null ? void 0 : B(o));
+  return /* @__PURE__ */ m("span", { className: "inline-flex items-center", "data-testid": l, children: [
+    o === void 0 ? "—" : o === null ? "N/A" : /* @__PURE__ */ m(f, { children: [
+      n ? /* @__PURE__ */ t("span", { className: "mr-0.5", children: I }) : null,
+      e?.months !== void 0 ? `${e.months}mo` : e?.day !== void 0 ? `${e.day}d` : "<1d"
+    ] }),
+    o != null && i ? /* @__PURE__ */ t("span", { className: "ml-1.5", children: /* @__PURE__ */ t(g, { zone: i }) }) : null
   ] });
 }
 export {
   j as TimeToLiquidationBlock,
-  r as TimeToLiquidationBlockTest
+  a as TimeToLiquidationBlockTest
 };

package/dist/esm/components/composites/tx-preview/confirm/amounts/TransactionConfirmAmountField.js

@@ -1,4 +1,4 @@
-import { jsxs as i, Fragment as d, jsx as n } from "react/jsx-runtime";
+import { jsxs as i, Fragment as d, jsx as o } from "react/jsx-runtime";
 import { cva as y } from "class-variance-authority";
 import { FadeoutLoading as g } from "../../../../fadeout-loading/fadeout-loading.js";
 import { TokenIcon as v } from "../../../../token-icon/token-icon.js";
@@ -7,11 +7,12 @@ import "react";
 import "@gearbox-protocol/sdk/onchain";
 import { cn as h } from "../../../../../utils/cn.js";
 import "sonner";
-import { formatMoney as k } from "../../../../../utils/format-money.js";
+import { APPROXIMATE_SYMBOL as k } from "../../../../../utils/format.js";
+import { formatMoney as N } from "../../../../../utils/format-money.js";
 import "luxon";
 import "../../../../../utils/z-index.js";
-import { TransactionConfirmAmountFieldTest as N } from "./constants.js";
-const T = "≈", b = y(
+import { TransactionConfirmAmountFieldTest as T } from "./constants.js";
+const b = y(
   "flex w-full items-center justify-between bg-gray-20 px-4 py-3",
   {
     variants: {
@@ -29,59 +30,59 @@ const T = "≈", b = y(
     defaultVariants: { position: "first", size: "md" }
   }
 );
-function S(o) {
-  if (o.primaryAmount !== void 0)
+function S(n) {
+  if (n.primaryAmount !== void 0)
     return {
-      primaryAmount: o.primaryAmount,
-      secondaryAmount: o.secondaryAmount
+      primaryAmount: n.primaryAmount,
+      secondaryAmount: n.secondaryAmount
     };
-  const { amount: t } = o;
+  const { amount: t } = n;
   return {
     primaryAmount: { value: t?.value, token: t?.token },
     secondaryAmount: { valueUSD: t?.valueUsd ?? void 0 }
   };
 }
-function V(o) {
+function E(n) {
   const {
     label: t,
     loading: l = !1,
     position: p,
-    size: c = "md",
-    maxLength: u,
+    size: u = "md",
+    maxLength: c,
     approximate: f
-  } = o, { isApproximate: a = !1, approximateSymbol: m = T } = f || {}, { primaryAmount: e, secondaryAmount: r } = S(o), x = e && "node" in e ? e.node : /* @__PURE__ */ i(d, { children: [
-    e.token && /* @__PURE__ */ n(v, { token: e.token, size: 16 }),
+  } = n, { isApproximate: m = !1, approximateSymbol: a = k } = f || {}, { primaryAmount: e, secondaryAmount: r } = S(n), x = e && "node" in e ? e.node : /* @__PURE__ */ i(d, { children: [
+    e.token && /* @__PURE__ */ o(v, { token: e.token, size: 16 }),
     /* @__PURE__ */ i("span", { children: [
-      a && /* @__PURE__ */ n("span", { children: m }),
-      /* @__PURE__ */ n(
+      m && /* @__PURE__ */ o("span", { children: a }),
+      /* @__PURE__ */ o(
         A,
         {
           value: e?.value,
           token: e.token,
-          maxLength: u
+          maxLength: c
         }
       )
     ] })
   ] }), s = r && "node" in r ? r.node : r?.valueUSD ? /* @__PURE__ */ i(d, { children: [
-    a && /* @__PURE__ */ n("span", { children: m }),
-    k(r.valueUSD)
+    m && /* @__PURE__ */ o("span", { children: a }),
+    N(r.valueUSD)
   ] }) : null;
   return /* @__PURE__ */ i(
     "div",
     {
-      className: h(b({ position: p, size: c })),
-      "data-testid": N.root,
+      className: h(b({ position: p, size: u })),
+      "data-testid": T.root,
       children: [
-        /* @__PURE__ */ n("span", { className: "text-sm font-medium text-foreground", children: t }),
+        /* @__PURE__ */ o("span", { className: "text-sm font-medium text-foreground", children: t }),
         /* @__PURE__ */ i("div", { className: "flex flex-col items-end gap-0.5", children: [
-          /* @__PURE__ */ n(g, { loading: l, children: /* @__PURE__ */ n("span", { className: "inline-flex items-center gap-1.5 text-sm font-medium text-foreground", children: x }) }),
-          s && /* @__PURE__ */ n("span", { className: "text-xs leading-[130%] text-secondary-foreground", children: s })
+          /* @__PURE__ */ o(g, { loading: l, children: /* @__PURE__ */ o("span", { className: "inline-flex items-center gap-1.5 text-sm font-medium text-foreground", children: x }) }),
+          s && /* @__PURE__ */ o("span", { className: "text-xs leading-[130%] text-secondary-foreground", children: s })
         ] })
       ]
     }
   );
 }
 export {
-  V as TransactionConfirmAmountField,
+  E as TransactionConfirmAmountField,
   S as resolveAmountSlots
 };