@gearbox-protocol/ui-kit 4.0.0-next.16 → 4.0.0-next.17

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

@@ -0,0 +1,73 @@
+import { jsx as i, jsxs as p } from "react/jsx-runtime";
+import { Stack as d } from "../stack/stack.js";
+import "react";
+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 "../../points-icon/points-icon.js";
+import { TokenBigint as c } from "../values/scalars.js";
+import "../../badge/badge.js";
+import "../../badge/chip.js";
+import "react-intl";
+import { TokenSymbol as f } from "../../token-symbol/token-symbol.js";
+import { Typography as u } from "../../typography/typography.js";
+import { PositionAssetsTest as m } from "./constants.js";
+const k = 1;
+function _({
+  assets: r,
+  against: e,
+  empty: s,
+  testId: n
+}) {
+  const t = h(r, e);
+  return /* @__PURE__ */ i(d, { gap: "sm", align: "end", "data-testid": n ?? m.root, children: t.length === 0 ? s !== void 0 && /* @__PURE__ */ i(
+    u,
+    {
+      variant: "caption",
+      color: "secondary",
+      as: "div",
+      "data-testid": m.empty,
+      children: s
+    }
+  ) : t.map((o) => /* @__PURE__ */ p(
+    "span",
+    {
+      className: "flex items-center gap-2",
+      "data-testid": m.row,
+      children: [
+        /* @__PURE__ */ i(f, { size: 20, token: o.token }),
+        /* @__PURE__ */ i(c, { data: o.value, token: o.token })
+      ]
+    },
+    o.token.address
+  )) });
+}
+function h(r, e) {
+  const s = /* @__PURE__ */ new Map(), n = (t, o) => {
+    const l = t.token.address.toLowerCase(), a = s.get(l);
+    s.set(l, {
+      token: a?.token ?? t.token,
+      // a token the other side alone holds is a zero here, not a gap
+      value: o ? t.value : a?.value ?? 0n,
+      worth: v(a?.worth, t.valueUsd)
+    });
+  };
+  for (const t of r ?? []) n(t, !0);
+  for (const t of e ?? []) n(t, !1);
+  return [...s.values()].filter((t) => t.worth === null || t.worth >= k).sort(
+    (t, o) => (o.worth ?? 0) - (t.worth ?? 0) || // a tie has to break the same way on both sides, or the rows drift
+    t.token.address.localeCompare(o.token.address)
+  );
+}
+function v(r, e) {
+  return r === void 0 ? e : r === null || e === null ? null : Math.max(r, e);
+}
+export {
+  _ as PositionAssets,
+  m as PositionAssetsTest,
+  h as visibleAssets
+};

package/dist/esm/components/base/values/scalars.js

@@ -1,63 +1,82 @@
-import { jsx as e } from "react/jsx-runtime";
-import { CompoundAPY as s } from "../../compound-apy/compound-apy.js";
+import { jsx as r, jsxs as s } from "react/jsx-runtime";
+import { formatUnits as m } from "viem";
+import { CompoundAPY as p } from "../../compound-apy/compound-apy.js";
+import { SimpleTooltip as u } from "../../tooltip/simple-tooltip.js";
+import "../../tooltip/tooltip.js";
 import "react";
 import "@gearbox-protocol/sdk";
 import { cn as a } from "../../../utils/cn.js";
 import "sonner";
-import { formatLeverage as c } from "../../../utils/format-leverage.js";
-import { formatPercentAmount as m, formatMoney as l } from "../../../utils/format-money.js";
+import { formatAssetAmount as c } from "../../../utils/format-asset-amount.js";
+import { formatLeverage as d } from "../../../utils/format-leverage.js";
+import { formatPercentAmount as f, formatMoney as h } from "../../../utils/format-money.js";
 import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../../utils/z-index.js";
-import { ValueTest as r } from "./constants.js";
-const d = "—";
-function i() {
-  return /* @__PURE__ */ e("span", { "data-testid": r.placeholder, children: d });
+import { ValueTest as e } from "./constants.js";
+const v = "—";
+function n() {
+  return /* @__PURE__ */ r("span", { "data-testid": e.placeholder, children: v });
 }
-function o(t) {
-  return `${m(t / 100, 2)}%`;
+function l(t) {
+  return `${f(t / 100, 2)}%`;
 }
-function P({ data: t }) {
-  return t === void 0 ? /* @__PURE__ */ e(i, {}) : typeof t == "number" ? /* @__PURE__ */ e("span", { "data-testid": r.apy, children: o(t) }) : /* @__PURE__ */ e("span", { "data-testid": r.apy, children: /* @__PURE__ */ e(s, { apy: t }) });
+function E({ data: t }) {
+  return t === void 0 ? /* @__PURE__ */ r(n, {}) : typeof t == "number" ? /* @__PURE__ */ r("span", { "data-testid": e.apy, children: l(t) }) : /* @__PURE__ */ r("span", { "data-testid": e.apy, children: /* @__PURE__ */ r(p, { apy: t }) });
 }
-function $({
+function H({
   data: t
 }) {
-  return t == null ? /* @__PURE__ */ e(i, {}) : /* @__PURE__ */ e("span", { "data-testid": r.usd, children: l(t) });
+  return t == null ? /* @__PURE__ */ r(n, {}) : /* @__PURE__ */ r("span", { "data-testid": e.usd, children: h(t) });
 }
-function z({
+function N({
   data: t
 }) {
-  return t === void 0 ? /* @__PURE__ */ e(i, {}) : /* @__PURE__ */ e("span", { "data-testid": r.leverage, children: `${c(t)}x` });
+  return t === void 0 ? /* @__PURE__ */ r(n, {}) : /* @__PURE__ */ r("span", { "data-testid": e.leverage, children: `${d(t)}x` });
 }
 function w({
   data: t
 }) {
-  return t === void 0 ? /* @__PURE__ */ e(i, {}) : /* @__PURE__ */ e("span", { "data-testid": r.utilization, children: o(t) });
+  return t === void 0 ? /* @__PURE__ */ r(n, {}) : /* @__PURE__ */ r("span", { "data-testid": e.utilization, children: l(t) });
 }
-function B({
+function D({
   data: t
 }) {
   if (t === void 0)
-    return /* @__PURE__ */ e(i, {});
-  const n = t < 1e4 ? "text-destructive" : t < 11e3 ? "text-warning" : "text-success";
-  return /* @__PURE__ */ e("span", { "data-testid": r.healthFactor, className: a(n), children: (t / 1e4).toFixed(2) });
+    return /* @__PURE__ */ r(n, {});
+  const i = t < 1e4 ? "text-destructive" : t < 11e3 ? "text-warning" : "text-success";
+  return /* @__PURE__ */ r("span", { "data-testid": e.healthFactor, className: a(i), children: (t / 1e4).toFixed(2) });
 }
-function C({
+function M({
   data: t,
-  token: n
+  token: i
 }) {
-  if (t === void 0 || n === void 0)
-    return /* @__PURE__ */ e(i, {});
-  const u = Number(t) / 10 ** n.decimals;
-  return /* @__PURE__ */ e("span", { "data-testid": r.tokenBigint, children: `${u.toLocaleString(void 0, { maximumFractionDigits: 6 })} ${n.symbol}` });
+  if (t === void 0 || i === void 0)
+    return /* @__PURE__ */ r(n, {});
+  const o = m(t, i.decimals);
+  return (
+    // `title` also keeps the amount where a hover tooltip cannot reach:
+    // keyboard, touch, and the browser's own find
+    /* @__PURE__ */ s("span", { "data-testid": e.tokenBigint, title: `${o} ${i.symbol}`, children: [
+      /* @__PURE__ */ r(
+        u,
+        {
+          placement: "top",
+          className: "break-all",
+          title: /* @__PURE__ */ r("span", { children: c(t, i.decimals) }),
+          children: /* @__PURE__ */ r("span", { children: o })
+        }
+      ),
+      ` ${i.symbol}`
+    ] })
+  );
 }
 export {
-  P as ApyValue,
-  B as HealthFactorValue,
-  z as LeverageValue,
-  C as TokenBigint,
-  $ as UsdValue,
+  E as ApyValue,
+  D as HealthFactorValue,
+  N as LeverageValue,
+  M as TokenBigint,
+  H as UsdValue,
   w as UtilizationValue,
-  o as bps
+  l as bps
 };

package/dist/esm/components/checkbox/checkbox-labeled.js

@@ -37,6 +37,7 @@ import "../simple-accordion/simple-accordion.js";
 import "../tip-card/tip-card.js";
 import "../typography/typography.js";
 import "../points-icon/points-icon.js";
+import "viem";
 import "../vertical-indicator/vertical-indicator.js";
 import "../base/page-title/page-title.js";
 import "../detailed-page-title/detailed-page-title-copy-button.js";
@@ -72,7 +73,6 @@ import "../dialog/dialog-header.js";
 import "../dialog/dialog-title.js";
 import "../dialog/dialog-modal-container.js";
 import "../dialog/dialog-overlay.js";
-import "viem";
 import "../input/input.js";
 import { Label as k } from "../label/label.js";
 import "../simple-dropdown/simple-dropdown.js";

package/dist/esm/components/client-adapters/styled-rounded-image/styled-rounded-image.js

@@ -37,6 +37,7 @@ import "../../simple-accordion/simple-accordion.js";
 import "../../tip-card/tip-card.js";
 import "../../typography/typography.js";
 import "../../points-icon/points-icon.js";
+import "viem";
 import "../../vertical-indicator/vertical-indicator.js";
 import "../../base/page-title/page-title.js";
 import "../../detailed-page-title/detailed-page-title-copy-button.js";
@@ -73,7 +74,6 @@ import "../../dialog/dialog-header.js";
 import "../../dialog/dialog-title.js";
 import "../../dialog/dialog-modal-container.js";
 import "../../dialog/dialog-overlay.js";
-import "viem";
 import "../../input/input.js";
 import "../../label/label.js";
 import "../../simple-dropdown/simple-dropdown.js";