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

package/dist/esm/components/composites/pool-assets-table/pool-assets-table-row.js

@@ -1,4 +1,5 @@
-import { jsx as e, jsxs as a, Fragment as y } from "react/jsx-runtime";
+import { jsx as e, jsxs as m, Fragment as y } from "react/jsx-runtime";
+import { NoValue as b } from "../../base/values/no-value.js";
 import "react";
 import "@gearbox-protocol/sdk/onchain";
 import "clsx";
@@ -8,84 +9,84 @@ import { formatMoney as C } from "../../../utils/format-money.js";
 import "luxon";
 import "../../../utils/z-index.js";
 import "../../points-icon/points-icon.js";
-import { UtilizationValue as N } from "../../base/values/scalars.js";
+import { UtilizationValue as S } from "../../base/values/scalars.js";
 import "../../badge/badge.js";
 import "../../badge/chip.js";
-import { FormattedMessageTyped as m } from "../../typed-intl/index.js";
-import { AllocationWheel as S } from "../../collateral-allocation-tooltip/allocation-wheel.js";
+import { FormattedMessageTyped as a } from "../../typed-intl/index.js";
+import { AllocationWheel as k } from "../../collateral-allocation-tooltip/allocation-wheel.js";
 import "@fortawesome/free-solid-svg-icons";
 import "../../icons/fa-icon.js";
 import "../../token-icon/token-icon.js";
 import "../../tooltip/simple-tooltip.js";
 import "../../tooltip/tooltip.js";
-import { NameCell as k } from "../../name-cell/name-cell.js";
-import { ShortString as w } from "../../short-string/short-string.js";
+import { NameCell as w } from "../../name-cell/name-cell.js";
+import { ShortString as L } from "../../short-string/short-string.js";
 import "react-intl";
 import "../../buttons/button/button.js";
-import { GridTableRow as L, GridTableCell as o } from "../../table/grid-table.js";
+import { GridTableRow as U, GridTableCell as l } from "../../table/grid-table.js";
 import "../../skeleton/skeleton.js";
 import "../../table/table.js";
-import { TableLineSm as U, TableCellSm as n } from "../../table/table-sm.js";
-import { TokenSymbol as I } from "../../token-symbol/token-symbol.js";
-import { TokenTemplate as b } from "../../token-template/token-template.js";
-import { VerticalIndicator as P } from "../../vertical-indicator/vertical-indicator.js";
+import { TableLineSm as I, TableCellSm as n } from "../../table/table-sm.js";
+import { TokenSymbol as P } from "../../token-symbol/token-symbol.js";
+import { TokenTemplate as x } from "../../token-template/token-template.js";
+import { VerticalIndicator as j } from "../../vertical-indicator/vertical-indicator.js";
 import { PoolAssetsTableTest as p } from "./constants.js";
-function j(i, t) {
+function V(i, t) {
   if (t !== 0n)
     return Number(i * 10000n / t);
 }
 function B(i, t) {
   return t <= 0n || i <= 0n ? 0 : Number(i * 10000n / t) / 1e4;
 }
-function he({
+function fe({
   asset: i,
   underlyingToken: t,
-  last: x,
+  last: T,
   isCompact: c,
-  totalUsed: T,
-  colorIndex: z,
+  totalUsed: z,
+  colorIndex: A,
   explorerUrl: d
 }) {
-  const { token: r, limit: s, used: l } = i, A = c ? 40 : 21, h = B(l.value, T), u = () => /* @__PURE__ */ e(
-    k,
+  const { token: r, limit: s, used: o } = i, N = c ? 40 : 21, u = B(o.value, z), h = () => /* @__PURE__ */ e(
+    w,
     {
-      leading: /* @__PURE__ */ e(I, { size: 32, token: r }),
-      title: /* @__PURE__ */ e(w, { maxLength: A, children: r.symbol })
+      leading: /* @__PURE__ */ e(P, { size: 32, token: r }),
+      title: /* @__PURE__ */ e(L, { maxLength: N, children: r.symbol })
     }
-  ), f = () => /* @__PURE__ */ a(
+  ), f = () => /* @__PURE__ */ m(
     "div",
     {
       className: "flex items-center justify-end gap-2",
       "data-testid": p.exposureCell,
       children: [
         /* @__PURE__ */ e(
-          S,
+          k,
           {
-            share: h,
-            colorIndex: z,
-            idle: h === 0
+            share: u,
+            colorIndex: A,
+            idle: u === 0
           }
         ),
         /* @__PURE__ */ e(
-          P,
+          j,
           {
             value: /* @__PURE__ */ e(
-              b,
+              x,
               {
                 decimalPartLength: 2,
                 precision: 2,
                 showSymbol: !1,
                 token: t,
-                value: l.value
+                value: o.value
               }
             ),
-            valueDescription: l.valueUsd === null ? "—" : C(l.valueUsd)
+            valueDescription: o.valueUsd === null ? /* @__PURE__ */ e(b, {}) : C(o.valueUsd)
           }
         )
       ]
     }
-  ), g = () => /* @__PURE__ */ e("div", { "data-testid": p.capCell, children: s.value === 0n ? /* @__PURE__ */ e("span", { children: "—" }) : /* @__PURE__ */ e(
-    b,
+  ), g = () => /* @__PURE__ */ e("div", { "data-testid": p.capCell, children: s.value === 0n ? /* @__PURE__ */ e(b, {}) : /* @__PURE__ */ e(
+    x,
     {
       decimalPartLength: 2,
       precision: 2,
@@ -93,55 +94,55 @@ function he({
       token: t,
       value: s.value
     }
-  ) }), v = () => /* @__PURE__ */ e("div", { "data-testid": p.capUtilizationCell, children: /* @__PURE__ */ e(N, { data: j(l.value, s.value) }) });
+  ) }), v = () => /* @__PURE__ */ e("div", { "data-testid": p.capUtilizationCell, children: /* @__PURE__ */ e(S, { data: V(o.value, s.value) }) });
   return /* @__PURE__ */ e(
-    L,
+    U,
     {
-      last: x,
+      last: T,
       height: "auto",
       href: d ? `${d}/address/${r.address}` : void 0,
       target: "_blank",
       style: { minHeight: "75px" },
-      children: c ? /* @__PURE__ */ e(o, { className: "px-3 py-0!", size: "sm", span: "full", children: /* @__PURE__ */ a(
-        U,
+      children: c ? /* @__PURE__ */ e(l, { className: "px-3 py-0!", size: "sm", span: "full", children: /* @__PURE__ */ m(
+        I,
         {
           className: "w-full",
           columns: 3,
           columnsXs: 3,
-          title: u(),
+          title: h(),
           children: [
             /* @__PURE__ */ e(
               n,
               {
-                title: /* @__PURE__ */ e(m, { messageId: "components.poolAssetsTable.exposure" }),
+                title: /* @__PURE__ */ e(a, { messageId: "components.poolAssetsTable.exposure" }),
                 children: f()
               }
             ),
             /* @__PURE__ */ e(
               n,
               {
-                title: /* @__PURE__ */ e(m, { messageId: "components.poolAssetsTable.cap" }),
+                title: /* @__PURE__ */ e(a, { messageId: "components.poolAssetsTable.cap" }),
                 children: g()
               }
             ),
             /* @__PURE__ */ e(
               n,
               {
-                title: /* @__PURE__ */ e(m, { messageId: "components.poolAssetsTable.capUtilization" }),
+                title: /* @__PURE__ */ e(a, { messageId: "components.poolAssetsTable.capUtilization" }),
                 children: v()
               }
             )
           ]
         }
-      ) }) : /* @__PURE__ */ a(y, { children: [
-        /* @__PURE__ */ e(o, { className: "pl-4", size: "sm", textAlign: "left", children: u() }),
-        /* @__PURE__ */ e(o, { size: "sm", textAlign: "right", children: f() }),
-        /* @__PURE__ */ e(o, { size: "sm", textAlign: "right", children: g() }),
-        /* @__PURE__ */ e(o, { className: "pr-4", size: "sm", textAlign: "right", children: v() })
+      ) }) : /* @__PURE__ */ m(y, { children: [
+        /* @__PURE__ */ e(l, { className: "pl-4", size: "sm", textAlign: "left", children: h() }),
+        /* @__PURE__ */ e(l, { size: "sm", textAlign: "right", children: f() }),
+        /* @__PURE__ */ e(l, { size: "sm", textAlign: "right", children: g() }),
+        /* @__PURE__ */ e(l, { className: "pr-4", size: "sm", textAlign: "right", children: v() })
       ] })
     }
   );
 }
 export {
-  he as PoolAssetsTableRow
+  fe as PoolAssetsTableRow
 };

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

package/dist/esm/components/compound-apy/compound-apy.js

@@ -1,6 +1,6 @@
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { useId as x } from "react";
-import { YieldBreakdownTooltip as v } from "../yield-breakdown-tooltip/yield-breakdown-tooltip.js";
+import { jsx as r, jsxs as o } from "react/jsx-runtime";
+import { useId as v } from "react";
+import { NoValue as x } from "../base/values/no-value.js";
 import { totalApyOf as C, positiveTokenRewardsOf as I, pointProgramsOf as k } from "../../utils/apy-breakdown.js";
 import "@gearbox-protocol/sdk/onchain";
 import { bpsToPercent as P } from "../../utils/bps.js";
@@ -9,10 +9,18 @@ import "sonner";
 import { formatCompactPercent as O } from "../../utils/format-money.js";
 import "luxon";
 import "../../utils/z-index.js";
+import "../points-icon/points-icon.js";
+import "viem";
+import "../tooltip/simple-tooltip.js";
+import "../tooltip/tooltip.js";
+import "../badge/badge.js";
+import "../badge/chip.js";
+import "react-intl";
+import { YieldBreakdownTooltip as F } from "../yield-breakdown-tooltip/yield-breakdown-tooltip.js";
 const l = 14;
-function F() {
-  const e = `additional-incentives-${x().replace(/:/g, "")}`;
-  return /* @__PURE__ */ n(
+function N() {
+  const t = `additional-incentives-${v().replace(/:/g, "")}`;
+  return /* @__PURE__ */ o(
     "svg",
     {
       width: l,
@@ -24,15 +32,15 @@ function F() {
       role: "img",
       "aria-label": "Incentives",
       children: [
-        /* @__PURE__ */ t("title", { children: "Incentives" }),
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ r("title", { children: "Incentives" }),
+        /* @__PURE__ */ r(
           "path",
           {
             d: "M7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14Z",
-            fill: `url(#${e})`
+            fill: `url(#${t})`
           }
         ),
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ r(
           "path",
           {
             d: "M7 3.75V10.25M3.75 7H10.25",
@@ -41,18 +49,18 @@ function F() {
             strokeLinecap: "round"
           }
         ),
-        /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ n(
+        /* @__PURE__ */ r("defs", { children: /* @__PURE__ */ o(
           "linearGradient",
           {
-            id: e,
+            id: t,
             x1: "0",
             y1: "7",
             x2: "14",
             y2: "7",
             gradientUnits: "userSpaceOnUse",
             children: [
-              /* @__PURE__ */ t("stop", { stopColor: "#FF2D8D" }),
-              /* @__PURE__ */ t("stop", { offset: "1", stopColor: "#FF6C20" })
+              /* @__PURE__ */ r("stop", { stopColor: "#FF2D8D" }),
+              /* @__PURE__ */ r("stop", { offset: "1", stopColor: "#FF6C20" })
             ]
           }
         ) })
@@ -60,43 +68,43 @@ function F() {
     }
   );
 }
-function c(e) {
-  return e == null ? !1 : I(e).length > 0 || k(e).length > 0;
+function p(t) {
+  return t == null ? !1 : I(t).length > 0 || k(t).length > 0;
 }
-function U({
-  apy: e,
-  maxLeverage: p,
-  collateralApy: r,
-  borrowApy: d,
-  quotaRate: a,
-  decimals: m = 2,
+function W({
+  apy: t,
+  maxLeverage: m,
+  collateralApy: e,
+  borrowApy: c,
+  quotaRate: d,
+  decimals: a = 2,
   tooltip: f = !0,
   period: h,
-  className: o
+  className: i
 }) {
-  if (!e)
-    return /* @__PURE__ */ t("span", { className: "text-secondary-foreground", children: "—" });
-  const i = C(e), u = c(e) || c(r), g = f && i >= 1, s = () => {
-    const w = O(P(i), m);
-    return /* @__PURE__ */ n("div", { className: A("inline-flex items-center gap-1.5", o), children: [
-      /* @__PURE__ */ t("span", { className: "inline-flex items-center", children: w }),
-      u ? /* @__PURE__ */ t(F, {}) : null
+  if (!t)
+    return /* @__PURE__ */ r(x, {});
+  const n = C(t), u = p(t) || p(e), g = f && n >= 1, s = () => {
+    const w = O(P(n), a);
+    return /* @__PURE__ */ o("div", { className: A("inline-flex items-center gap-1.5", i), children: [
+      /* @__PURE__ */ r("span", { className: "inline-flex items-center", children: w }),
+      u ? /* @__PURE__ */ r(N, {}) : null
     ] });
   };
-  return g ? /* @__PURE__ */ t(
-    v,
+  return g ? /* @__PURE__ */ r(
+    F,
     {
-      supplyApy: e,
-      maxLeverage: p,
-      collateralApy: r,
-      borrowApy: d,
-      quotaRate: a,
+      supplyApy: t,
+      maxLeverage: m,
+      collateralApy: e,
+      borrowApy: c,
+      quotaRate: d,
       period: h,
-      className: o,
+      className: i,
       children: s()
     }
   ) : s();
 }
 export {
-  U as CompoundAPY
+  W as CompoundAPY
 };

package/dist/esm/components/help-tip/help-tip.js

@@ -1,14 +1,16 @@
-import { jsx as e } from "react/jsx-runtime";
-import { IconQuestionCircle as v, IconInfo as h } from "@gearbox-protocol/static";
+import { jsx as t } from "react/jsx-runtime";
+import { faCircleQuestion as u } from "@fortawesome/free-solid-svg-icons";
+import { IconInfo as v } from "@gearbox-protocol/static";
 import { cva as T } from "class-variance-authority";
-import * as c from "react";
+import * as p from "react";
+import { FaIcon as C } from "../icons/fa-icon.js";
 import "@gearbox-protocol/sdk/onchain";
-import { cn as s } from "../../utils/cn.js";
+import { cn as m } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
 import "../../utils/z-index.js";
-import { SimpleTooltip as C } from "../tooltip/simple-tooltip.js";
-const H = T("transition-colors", {
+import { SimpleTooltip as H } from "../tooltip/simple-tooltip.js";
+const I = T("transition-colors", {
   variants: {
     iconColor: {
       "gray-10": "text-gray-10",
@@ -42,89 +44,92 @@ const H = T("transition-colors", {
     }
   },
   defaultVariants: { iconColor: "gray-90", iconHoverColor: "gray-110" }
-}), I = c.forwardRef(
+}), N = p.forwardRef(
   ({
-    className: r,
-    children: o,
-    maxWidth: t,
-    minWidth: a,
+    className: o,
+    children: r,
+    maxWidth: a,
+    minWidth: e,
     delayShow: g = 200,
     placement: y = "bottom",
     iconSize: i = 14,
     iconColor: n = "gray-90",
-    iconHoverColor: p = "gray-110",
+    iconHoverColor: s = "gray-110",
     iconVariant: x = "question",
-    onPointerEnter: m,
-    ...d
-  }, f) => {
-    const u = /* @__PURE__ */ e(
+    onPointerEnter: c,
+    ...f
+  }, d) => {
+    const h = /* @__PURE__ */ t(
       l,
       {
-        ref: f,
+        ref: d,
         iconSize: i,
         iconColor: n,
-        iconHoverColor: p,
+        iconHoverColor: s,
         iconVariant: x,
-        onPointerEnter: m,
-        className: r,
-        ...d
+        onPointerEnter: c,
+        className: o,
+        ...f
       }
     );
-    return /* @__PURE__ */ e(
-      C,
+    return /* @__PURE__ */ t(
+      H,
       {
-        title: u,
+        title: h,
         placement: y,
         delayShow: g,
-        maxWidth: t,
-        minWidth: a,
-        children: o
+        maxWidth: a,
+        minWidth: e,
+        children: r
       }
     );
   }
 );
-I.displayName = "HelpTip";
-const l = c.forwardRef(
+N.displayName = "HelpTip";
+const l = p.forwardRef(
   ({
-    className: r,
-    iconSize: o = 14,
-    iconColor: t = "gray-90",
-    iconHoverColor: a = "gray-110",
+    className: o,
+    iconSize: r = 14,
+    iconColor: a = "gray-90",
+    iconHoverColor: e = "gray-110",
     iconVariant: g = "question",
     onPointerEnter: y,
     ...i
-  }, n) => {
-    const p = g === "question" ? v : h;
-    return /* @__PURE__ */ e(
-      "span",
-      {
-        ref: n,
-        role: "img",
-        "aria-hidden": !0,
-        className: s(
-          "inline-block cursor-help",
-          H({ iconColor: t, iconHoverColor: a }),
-          r
-        ),
-        onPointerEnter: y,
-        ...i,
-        children: /* @__PURE__ */ e(p, { size: o })
-      }
-    );
-  }
+  }, n) => /* @__PURE__ */ t(
+    "span",
+    {
+      ref: n,
+      role: "img",
+      "aria-hidden": !0,
+      className: m(
+        "inline-block cursor-help",
+        I({ iconColor: a, iconHoverColor: e }),
+        o
+      ),
+      onPointerEnter: y,
+      ...i,
+      children: g === "question" ? /* @__PURE__ */ t(
+        C,
+        {
+          icon: u,
+          style: { width: r, height: r }
+        }
+      ) : /* @__PURE__ */ t(v, { size: r })
+    }
+  )
 );
 l.displayName = "HelpTipIcon";
-const N = c.forwardRef(({ className: r, ...o }, t) => /* @__PURE__ */ e(
+const w = p.forwardRef(({ className: o, ...r }, a) => /* @__PURE__ */ t(
   "span",
   {
-    ref: t,
-    className: s("ml-1.5 inline-block leading-[0]", r),
-    ...o
+    ref: a,
+    className: m("ml-1.5 inline-block leading-[0]", o),
+    ...r
   }
 ));
-N.displayName = "TipWrap";
+w.displayName = "TipWrap";
 export {
-  I as HelpTip,
+  N as HelpTip,
   l as HelpTipIcon,
-  N as TipWrap
+  w as TipWrap
 };