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

package/dist/cjs/components/base/position-assets/constants.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class s{static root="position-assets-root";static row="position-assets-row";static empty="position-assets-empty"}exports.PositionAssetsTest=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class s{static root="position-assets-root";static row="position-assets-row";static worth="position-assets-worth";static empty="position-assets-empty"}exports.PositionAssetsTest=s;

package/dist/cjs/components/base/position-assets/position-assets.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),h=require("../stack/stack.cjs");require("../../help-tip/help-tip.cjs");require("react");require("react-intl");require("@gearbox-protocol/sdk/onchain");require("clsx");require("tailwind-merge");require("sonner");const m=require("../../../utils/format.cjs");require("luxon");require("../../../utils/z-index.cjs");require("../../points-icon/points-icon.cjs");const u=require("../values/scalars.cjs");require("../../badge/badge.cjs");require("../../badge/chip.cjs");const p=require("../../short-string/short-string.cjs"),k=require("../../token-symbol/token-symbol.cjs"),g=require("../../typography/typography.cjs"),c=require("./constants.cjs"),_=1,f=20;function q({assets:r,to:o,empty:i,approximate:l,testId:e}){const n=d(r,o),a=o!==void 0;return t.jsx(h.Stack,{gap:"sm",align:"end","data-testid":e??c.PositionAssetsTest.root,children:n.length===0?i!==void 0&&t.jsx(g.Typography,{variant:"caption",color:"secondary",as:"div","data-testid":c.PositionAssetsTest.empty,children:i}):n.map(s=>t.jsxs("span",{className:"flex items-center gap-2","data-testid":c.PositionAssetsTest.row,children:[t.jsx(k.TokenSymbol,{size:20,token:s.token}),t.jsxs("span",{className:"flex items-center",children:[a&&t.jsxs(t.Fragment,{children:[t.jsx("span",{className:"text-secondary-foreground line-through [&_*]:text-secondary-foreground [&_*]:line-through",children:t.jsx(u.TokenBigint,{data:s.value,token:s.token,showSymbol:!1})}),t.jsx("span",{className:"px-1.5 text-gray-70",children:"→"})]}),l?t.jsx("span",{children:m.APPROXIMATE_SYMBOL}):null,t.jsx(u.TokenBigint,{data:a?s.valueTo:s.value,token:s.token,showSymbol:!1}),t.jsx(p.ShortString,{className:"ml-1",maxLength:f,children:s.token.symbol})]})]},s.token.address))})}function d(r,o){const i=new Map,l=(e,n)=>{const a=e.token.address.toLowerCase(),s=i.get(a);i.set(a,{token:s?.token??e.token,value:n==="from"?e.value:s?.value??0n,valueTo:n==="to"?e.value:s?.valueTo??0n,worth:v(s?.worth,e.valueUsd)})};for(const e of r??[])l(e,"from");for(const e of o??[])l(e,"to");return[...i.values()].filter(e=>e.worth===null||e.worth>=_).sort((e,n)=>(n.worth??0)-(e.worth??0)||e.token.address.localeCompare(n.token.address))}function v(r,o){return r===void 0?o:r===null||o===null?null:Math.max(r,o)}exports.PositionAssetsTest=c.PositionAssetsTest;exports.PositionAssets=q;exports.visibleAssets=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),p=require("../stack/stack.cjs"),v=require("../values/no-value.cjs");require("react");require("@gearbox-protocol/sdk/onchain");require("clsx");require("tailwind-merge");require("sonner");const f=require("../../../utils/format.cjs"),_=require("../../../utils/format-money.cjs");require("luxon");require("../../../utils/z-index.cjs");require("../../points-icon/points-icon.cjs");const d=require("../values/scalars.cjs");require("../../badge/badge.cjs");require("../../badge/chip.cjs");require("react-intl");const x=require("../../short-string/short-string.cjs"),y=require("../../token-symbol/token-symbol.cjs"),h=require("../../typography/typography.cjs"),l=require("./constants.cjs"),g=1,k=20;function q({assets:r,to:n,empty:a,approximate:c,testId:e}){const o=m(r,n),i=n!==void 0;return t.jsx(p.Stack,{gap:"sm",align:"end","data-testid":e??l.PositionAssetsTest.root,children:o.length===0?a!==void 0&&t.jsx(h.Typography,{variant:"caption",color:"secondary",as:"div","data-testid":l.PositionAssetsTest.empty,children:a}):o.map(s=>{const u=i?s.valueToUsd:s.valueUsd;return t.jsxs("span",{className:"flex flex-col items-end","data-testid":l.PositionAssetsTest.row,children:[t.jsxs("span",{className:"flex items-center gap-2",children:[t.jsx(y.TokenSymbol,{size:20,token:s.token}),t.jsxs("span",{className:"flex items-center",children:[i&&t.jsxs(t.Fragment,{children:[t.jsx("span",{className:"text-secondary-foreground line-through [&_*]:text-secondary-foreground [&_*]:line-through",children:t.jsx(d.TokenBigint,{data:s.value,token:s.token,showSymbol:!1})}),t.jsx("span",{className:"px-1.5 text-gray-70",children:"→"})]}),c?t.jsx("span",{children:f.APPROXIMATE_SYMBOL}):null,t.jsx(d.TokenBigint,{data:i?s.valueTo:s.value,token:s.token,showSymbol:!1}),t.jsx(x.ShortString,{className:"ml-1",maxLength:k,children:s.token.symbol})]})]}),t.jsx(h.Typography,{as:"span",variant:"caption",color:"secondary","data-testid":l.PositionAssetsTest.worth,children:u===null?t.jsx(v.NoValue,{}):_.formatMoney(u)})]},s.token.address)})})}function m(r,n){const a=new Map,c=(e,o)=>{const i=e.token.address.toLowerCase(),s=a.get(i);a.set(i,{token:s?.token??e.token,value:o==="from"?e.value:s?.value??0n,valueTo:o==="to"?e.value:s?.valueTo??0n,valueUsd:o==="from"?e.valueUsd:s?.valueUsd??null,valueToUsd:o==="to"?e.valueUsd:s?.valueToUsd??null,worth:T(s?.worth,e.valueUsd)})};for(const e of r??[])c(e,"from");for(const e of n??[])c(e,"to");return[...a.values()].filter(e=>e.worth===null||e.worth>=g).sort((e,o)=>(o.worth??0)-(e.worth??0)||e.token.address.localeCompare(o.token.address))}function T(r,n){return r===void 0?n:r===null||n===null?null:Math.max(r,n)}exports.PositionAssetsTest=l.PositionAssetsTest;exports.PositionAssets=q;exports.visibleAssets=m;

package/dist/cjs/components/base/token-amount/token-amount.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),u=require("../stack/stack.cjs"),i=require("../values/no-value.cjs");require("react");require("@gearbox-protocol/sdk/onchain");require("clsx");require("tailwind-merge");require("sonner");const a=require("../../../utils/format-money.cjs");require("luxon");require("../../../utils/z-index.cjs");require("../../points-icon/points-icon.cjs");require("viem");require("../../token-icon/token-icon.cjs");require("react-intl");require("../../tooltip/simple-tooltip.cjs");require("../../tooltip/tooltip.cjs");require("../../badge/badge.cjs");require("../../badge/chip.cjs");const c=require("../../token-template/token-template.cjs"),l=require("../../typography/typography.cjs"),n=require("./constants.cjs");function q({data:e,token:o,align:t="end"}){if(e===null)return r.jsx("span",{className:"text-secondary-foreground","data-testid":n.TokenAmountTest.root,children:"—"});const s=o??e.token;return r.jsxs(u.Stack,{gap:"xs",align:t,"data-testid":n.TokenAmountTest.root,children:[r.jsx(c.TokenTemplate,{value:e.value,token:s}),r.jsx(l.Typography,{as:"span",variant:"caption",color:"secondary",children:e.valueUsd===null?r.jsx(i.NoValue,{}):a.formatMoney(e.valueUsd)})]})}exports.TokenAmountTest=n.TokenAmountTest;exports.TokenAmount=q;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("../stack/stack.cjs"),a=require("../values/no-value.cjs");require("react");require("@gearbox-protocol/sdk/onchain");require("clsx");require("tailwind-merge");require("sonner");const c=require("../../../utils/format.cjs"),l=require("../../../utils/format-money.cjs");require("luxon");require("../../../utils/z-index.cjs");require("../../points-icon/points-icon.cjs");require("viem");require("../../token-icon/token-icon.cjs");require("react-intl");require("../../tooltip/simple-tooltip.cjs");require("../../tooltip/tooltip.cjs");require("../../badge/badge.cjs");require("../../badge/chip.cjs");const m=require("../../token-template/token-template.cjs"),q=require("../../typography/typography.cjs"),n=require("./constants.cjs");function p({data:r,token:o,align:t="end",approximate:s}){if(r===null)return e.jsx("span",{className:"text-secondary-foreground","data-testid":n.TokenAmountTest.root,children:"—"});const u=o??r.token;return e.jsxs(i.Stack,{gap:"xs",align:t,"data-testid":n.TokenAmountTest.root,children:[e.jsxs("span",{className:"flex items-center",children:[s?e.jsx("span",{className:"mr-0.5",children:c.APPROXIMATE_SYMBOL}):null,e.jsx(m.TokenTemplate,{value:r.value,token:u})]}),e.jsx(q.Typography,{as:"span",variant:"caption",color:"secondary",children:r.valueUsd===null?e.jsx(a.NoValue,{}):l.formatMoney(r.valueUsd)})]})}exports.TokenAmountTest=n.TokenAmountTest;exports.TokenAmount=p;

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

@@ -1,6 +1,7 @@
 class t {
   static root = "position-assets-root";
   static row = "position-assets-row";
+  static worth = "position-assets-worth";
   static empty = "position-assets-empty";
 }
 export {

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

@@ -1,99 +1,117 @@
-import { jsx as e, 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 f } from "../../../utils/format.js";
+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 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 g = 1, y = 20;
-function I({
+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: r,
+  to: n,
   empty: a,
-  approximate: l,
+  approximate: i,
   testId: o
 }) {
-  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,
+  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
     }
-  ) : n.map((t) => /* @__PURE__ */ m(
-    "span",
-    {
-      className: "flex items-center gap-2",
-      "data-testid": c.row,
-      children: [
-        /* @__PURE__ */ e(k, { size: 20, token: t.token }),
-        /* @__PURE__ */ m("span", { className: "flex items-center", children: [
-          i && /* @__PURE__ */ m(p, { children: [
-            /* @__PURE__ */ e("span", { className: "text-secondary-foreground line-through [&_*]:text-secondary-foreground [&_*]:line-through", children: /* @__PURE__ */ e(
-              d,
-              {
-                data: t.value,
-                token: t.token,
-                showSymbol: !1
-              }
-            ) }),
-            /* @__PURE__ */ e("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 })
+            ] })
           ] }),
-          l ? /* @__PURE__ */ e("span", { children: f }) : null,
           /* @__PURE__ */ e(
-            d,
+            u,
             {
-              data: i ? t.valueTo : t.value,
-              token: t.token,
-              showSymbol: !1
+              as: "span",
+              variant: "caption",
+              color: "secondary",
+              "data-testid": d.worth,
+              children: c === null ? /* @__PURE__ */ e(v, {}) : g(c)
             }
-          ),
-          /* @__PURE__ */ e(u, { className: "ml-1", maxLength: y, children: t.token.symbol })
-        ] })
-      ]
-    },
-    t.token.address
-  )) });
+          )
+        ]
+      },
+      t.token.address
+    );
+  }) });
 }
-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, {
+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: n === "from" ? o.value : t?.value ?? 0n,
-      valueTo: n === "to" ? o.value : t?.valueTo ?? 0n,
-      worth: x(t?.worth, o.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 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)
+  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, r) {
-  return s === void 0 ? r : s === null || r === null ? null : Math.max(s, r);
+function M(s, n) {
+  return s === void 0 ? n : s === null || n === null ? null : Math.max(s, n);
 }
 export {
-  I as PositionAssets,
-  c as PositionAssetsTest,
+  G as PositionAssets,
+  d as PositionAssetsTest,
   S as visibleAssets
 };

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/types/components/base/position-assets/constants.d.ts

@@ -1,5 +1,6 @@
 export declare class PositionAssetsTest {
     static root: string;
     static row: string;
+    static worth: string;
     static empty: string;
 }

package/dist/types/components/base/position-assets/position-assets.d.ts

@@ -53,6 +53,10 @@ export interface AssetRow {
      * dust and order. `null` when a side the oracle cannot price is involved.
      */
     readonly worth: number | null;
+    /** USD of the "now" side; `null` where the oracle could not price it. */
+    readonly valueUsd: number | null;
+    /** USD of the "after" side, for the caption a paired row shows. */
+    readonly valueToUsd: number | null;
 }
 /**
  * What earns a row, most valuable first — decided across both sides, so a

package/dist/types/components/base/token-amount/token-amount.d.ts

@@ -28,5 +28,12 @@ export type TokenAmountProps = TokenAmountDataProps & {
      * wrapper sets. Pass `start` inside a card, where the left edge is right.
      */
     readonly align?: TokenAmountAlign;
+    /**
+     * Prefixes the token line with {@link APPROXIMATE_SYMBOL}, for a figure the
+     * operation projects rather than promises. The USD caption underneath is not
+     * marked: the mark belongs beside the amount it hedges, and repeating it on
+     * the second line only reads as a second claim.
+     */
+    readonly approximate?: boolean;
 };
-export declare function TokenAmount({ data, token, align, }: TokenAmountProps): React.ReactElement;
+export declare function TokenAmount({ data, token, align, approximate, }: TokenAmountProps): React.ReactElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gearbox-protocol/ui-kit",
-  "version": "4.0.0-next.45",
+  "version": "4.0.0-next.46",
   "description": "Internal UI components",
   "repository": {
     "type": "git",