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

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

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

@@ -1,12 +1,13 @@
-import { jsx as r, jsxs as e } from "react/jsx-runtime";
-import { Stack as n } from "../stack/stack.js";
+import { jsx as r, jsxs as t } from "react/jsx-runtime";
+import { Stack as s } from "../stack/stack.js";
 import { NoValue as a } from "../values/no-value.js";
 import "react";
 import "@gearbox-protocol/sdk/onchain";
 import "clsx";
 import "tailwind-merge";
 import "sonner";
-import { formatMoney as s } from "../../../utils/format-money.js";
+import { APPROXIMATE_SYMBOL as l } from "../../../utils/format.js";
+import { formatMoney as c } from "../../../utils/format-money.js";
 import "luxon";
 import "../../../utils/z-index.js";
 import "../../points-icon/points-icon.js";
@@ -17,30 +18,34 @@ import "../../tooltip/simple-tooltip.js";
 import "../../tooltip/tooltip.js";
 import "../../badge/badge.js";
 import "../../badge/chip.js";
-import { TokenTemplate as l } from "../../token-template/token-template.js";
-import { Typography as u } from "../../typography/typography.js";
-import { TokenAmountTest as t } from "./constants.js";
-function C({
+import { TokenTemplate as u } from "../../token-template/token-template.js";
+import { Typography as f } from "../../typography/typography.js";
+import { TokenAmountTest as m } from "./constants.js";
+function Y({
   data: o,
-  token: m,
-  align: i = "end"
+  token: e,
+  align: i = "end",
+  approximate: n
 }) {
   if (o === null)
     return /* @__PURE__ */ r(
       "span",
       {
         className: "text-secondary-foreground",
-        "data-testid": t.root,
+        "data-testid": m.root,
         children: "—"
       }
     );
-  const p = m ?? o.token;
-  return /* @__PURE__ */ e(n, { gap: "xs", align: i, "data-testid": t.root, children: [
-    /* @__PURE__ */ r(l, { value: o.value, token: p }),
-    /* @__PURE__ */ r(u, { as: "span", variant: "caption", color: "secondary", children: o.valueUsd === null ? /* @__PURE__ */ r(a, {}) : s(o.valueUsd) })
+  const p = e ?? o.token;
+  return /* @__PURE__ */ t(s, { gap: "xs", align: i, "data-testid": m.root, children: [
+    /* @__PURE__ */ t("span", { className: "flex items-center", children: [
+      n ? /* @__PURE__ */ r("span", { className: "mr-0.5", children: l }) : null,
+      /* @__PURE__ */ r(u, { value: o.value, token: p })
+    ] }),
+    /* @__PURE__ */ r(f, { as: "span", variant: "caption", color: "secondary", children: o.valueUsd === null ? /* @__PURE__ */ r(a, {}) : c(o.valueUsd) })
   ] });
 }
 export {
-  C as TokenAmount,
-  t as TokenAmountTest
+  Y as TokenAmount,
+  m as TokenAmountTest
 };

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
 };