@gearbox-protocol/ui-kit 3.14.0-next.65 → 3.14.0-next.67

package/dist/esm/components/markdown-viewer/markdown-viewer.js

@@ -45,6 +45,7 @@ import "../auth/wallet-ui-context.js";
 import "../avatar/avatar.js";
 import "../badge/badge.js";
 import "../navigation-context/navigation-context.js";
+import "../breakpoint-provider.js";
 import "../button-checkbox/button-checkbox.js";
 import "../card-grid/card-grid.js";
 import "../cards/card/card.js";
@@ -73,13 +74,12 @@ import "../dialog/dialog-modal-container.js";
 import "../text-button/text-button.js";
 import "../vertical-indicator/vertical-indicator.js";
 import "../points-icon/points-icon.js";
-import "../skeleton/skeleton.js";
 import "../vertical-list/vertical-list.js";
+import "../skeleton/skeleton.js";
 import "../rounded-image/rounded-image.js";
 import "../progress/progress.js";
 import "../pool-indicator-icon/pool-indicator-icon.js";
 import "../composites/strategies-table/components/feature/feature.styles.js";
-import "viem";
 import "../icon-button/icon-button.js";
 import "../separate-line/separate-line.js";
 import "../tip-card/tip-card.js";
@@ -101,6 +101,7 @@ import "../dialog/dialog-footer.js";
 import "../dialog/dialog-header.js";
 import "../dialog/dialog-title.js";
 import "../dialog/dialog-overlay.js";
+import "viem";
 import "../label/label.js";
 import "../dropdown-menu/dropdown-menu.js";
 import "../dropdown-menu/dropdown-menu-checkbox-item.js";
@@ -187,7 +188,7 @@ function a(o) {
   }
   return { id: T(l), displayText: o };
 }
-function Vr({
+function Br({
   content: o,
   title: l,
   backButton: s,
@@ -399,5 +400,5 @@ function Vr({
   return c ? d : /* @__PURE__ */ r(w, { title: l || "", backButton: s, children: d });
 }
 export {
-  Vr as MarkdownViewer
+  Br as MarkdownViewer
 };

package/dist/esm/components/pool-apy-tooltip/apy-tooltip.js

@@ -0,0 +1,155 @@
+import { jsxs as r, jsx as e, Fragment as x } from "react/jsx-runtime";
+import { faPlus as u } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as h } from "../icons/fa-icon.js";
+import { PointsIcon as y } from "../points-icon/points-icon.js";
+import { TokenIcon as g } from "../token-icon/token-icon.js";
+import { SimpleTooltip as v } from "../tooltip/simple-tooltip.js";
+import "../tooltip/tooltip.js";
+import { FormattedMessageTyped as o } from "../typed-intl/index.js";
+import { VerticalIndicator as i } from "../vertical-indicator/vertical-indicator.js";
+import { VerticalList as a } from "../vertical-list/vertical-list.js";
+import "react";
+import { positiveTokenRewardsOf as P, pointProgramsOf as N, totalApyOf as A } from "../../utils/apy-breakdown.js";
+import "@gearbox-protocol/sdk";
+import { bpsToPercent as l } from "../../utils/bps.js";
+import { cn as d } from "../../utils/cn.js";
+import "sonner";
+import { percentTemplate as m } from "../../utils/format-money.js";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+function D({ apy: s, children: c, className: n }) {
+  const f = P(s), p = N(s), b = /* @__PURE__ */ r(
+    "div",
+    {
+      className: d(
+        "w-[370px] max-w-[calc(100vw-32px)] p-6",
+        "bg-popover",
+        "border border-border",
+        "rounded-lg",
+        "shadow-[0_4px_28px_4px_rgba(0,0,0,0.15)]",
+        "text-left font-normal"
+      ),
+      children: [
+        /* @__PURE__ */ r(a, { children: [
+          /* @__PURE__ */ e(
+            i,
+            {
+              size: "sm",
+              label: /* @__PURE__ */ e(
+                o,
+                {
+                  messageId: "components.apyParts.supplyAPY"
+                }
+              ),
+              description: /* @__PURE__ */ e(
+                o,
+                {
+                  messageId: "components.apyParts.supplyAPY.tip"
+                }
+              ),
+              value: m(l(s.organicApy))
+            }
+          ),
+          f.map((t) => /* @__PURE__ */ e(
+            i,
+            {
+              size: "sm",
+              label: /* @__PURE__ */ r("span", { className: "inline-flex items-center", children: [
+                /* @__PURE__ */ e(
+                  o,
+                  {
+                    messageId: "components.apyParts.extraAPY",
+                    values: { symbol: t.token.symbol }
+                  }
+                ),
+                /* @__PURE__ */ e("span", { className: "ml-1 inline-flex", children: /* @__PURE__ */ e(g, { token: t.token, size: 14 }) })
+              ] }),
+              description: /* @__PURE__ */ e(
+                o,
+                {
+                  messageId: "components.apyParts.extraAPY.tip"
+                }
+              ),
+              value: m(l(t.supplyApr ?? 0))
+            },
+            `extra-${t.token.address}-${t.supplyApr ?? 0}`
+          ))
+        ] }),
+        /* @__PURE__ */ e("div", { className: "my-5 border-t border-border" }),
+        /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e(
+          i,
+          {
+            size: "sm",
+            label: /* @__PURE__ */ e("span", { className: "font-bold", children: /* @__PURE__ */ e(
+              o,
+              {
+                messageId: "components.apyParts.totalAPY"
+              }
+            ) }),
+            value: m(l(A(s)))
+          }
+        ) }),
+        p.length > 0 && /* @__PURE__ */ r(x, { children: [
+          /* @__PURE__ */ e("div", { className: "relative my-2.5 mx-6 border-t-2 border-border", children: /* @__PURE__ */ e(
+            "div",
+            {
+              className: d(
+                "absolute -top-2.5 left-1/2 -translate-x-1/2",
+                "w-5 h-5",
+                "flex items-center justify-center",
+                "rounded-full",
+                "bg-gray-20"
+              ),
+              children: /* @__PURE__ */ e(h, { icon: u, className: "size-2.5 text-white" })
+            }
+          ) }),
+          /* @__PURE__ */ e("div", { className: "h-6" }),
+          /* @__PURE__ */ e(a, { children: p.map((t) => /* @__PURE__ */ e(
+            i,
+            {
+              size: "sm",
+              label: /* @__PURE__ */ r("span", { className: "inline-flex items-center", children: [
+                /* @__PURE__ */ e(
+                  o,
+                  {
+                    messageId: "components.apyParts.points",
+                    values: { symbol: t.name }
+                  }
+                ),
+                /* @__PURE__ */ e("span", { className: "ml-2 inline-flex", children: /* @__PURE__ */ e(
+                  y,
+                  {
+                    reward: {
+                      name: t.name,
+                      type: t.id
+                    },
+                    size: 16
+                  }
+                ) })
+              ] }),
+              value: t.multiplier != null ? `${t.multiplier}x` : "—"
+            },
+            `points-${t.id}`
+          )) })
+        ] })
+      ]
+    }
+  );
+  return /* @__PURE__ */ e(
+    v,
+    {
+      placement: "bottom",
+      triangle: !1,
+      type: "modal-tooltip",
+      minWidth: "100%",
+      maxWidth: "100%",
+      title: /* @__PURE__ */ e("span", { className: n, children: c }),
+      triggerClassName: n,
+      children: b
+    }
+  );
+}
+export {
+  D as ApyTooltip
+};

package/dist/esm/components/pool-apy-tooltip/index.js

@@ -1,4 +1,6 @@
-import { PoolAPYTooltip as p } from "./pool-apy-tooltip.js";
+import { ApyTooltip as r } from "./apy-tooltip.js";
+import { PoolAPYTooltip as l } from "./pool-apy-tooltip.js";
 export {
-  p as PoolAPYTooltip
+  r as ApyTooltip,
+  l as PoolAPYTooltip
 };

package/dist/esm/components/pool-apy-tooltip/pool-apy-tooltip.js

@@ -1,7 +1,7 @@
 import { jsx as e, jsxs as n, Fragment as b } from "react/jsx-runtime";
 import { faPlus as P } from "@fortawesome/free-solid-svg-icons";
 import { IconLighting as T } from "@gearbox-protocol/static";
-import { getRewardTokenSymbol as k } from "../compound-apy/compound-apy.js";
+import { getRewardTokenSymbol as k } from "../compound-apy/compound-apy-legacy.js";
 import { FaIcon as S } from "../icons/fa-icon.js";
 import { PointsIcon as _ } from "../points-icon/points-icon.js";
 import { Skeleton as z } from "../skeleton/skeleton.js";
@@ -110,7 +110,7 @@ function oe({
                   /* @__PURE__ */ e("span", { className: "ml-1 inline-flex", children: /* @__PURE__ */ e(
                     C,
                     {
-                      symbol: k(l, t.rewardTokenSymbol),
+                      token: k(l, t.rewardTokenSymbol),
                       size: 14
                     }
                   ) })
@@ -185,7 +185,7 @@ function oe({
             "div",
             {
               className: u(
-                "absolute -top-[10px] left-0",
+                "absolute -top-[10px] left-1/2 -translate-x-1/2",
                 "w-5 h-5",
                 "flex items-center justify-center",
                 "rounded-full",

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

@@ -33,6 +33,7 @@ import "../avatar/avatar.js";
 import "../badge/badge.js";
 import "../base-link/base-link.js";
 import "../navigation-context/navigation-context.js";
+import "../breakpoint-provider.js";
 import "../button-checkbox/button-checkbox.js";
 import "../card-grid/card-grid.js";
 import "../cards/card/card.js";
@@ -61,13 +62,12 @@ import "../dialog/dialog-modal-container.js";
 import "../text-button/text-button.js";
 import "../vertical-indicator/vertical-indicator.js";
 import "../points-icon/points-icon.js";
-import "../skeleton/skeleton.js";
 import "../vertical-list/vertical-list.js";
+import "../skeleton/skeleton.js";
 import "../rounded-image/rounded-image.js";
 import "../progress/progress.js";
 import "../pool-indicator-icon/pool-indicator-icon.js";
 import "../composites/strategies-table/components/feature/feature.styles.js";
-import "viem";
 import "../icon-button/icon-button.js";
 import "../separate-line/separate-line.js";
 import "../tip-card/tip-card.js";
@@ -89,6 +89,7 @@ import "../dialog/dialog-footer.js";
 import "../dialog/dialog-header.js";
 import "../dialog/dialog-title.js";
 import "../dialog/dialog-overlay.js";
+import "viem";
 import "../label/label.js";
 import "../dropdown-menu/dropdown-menu.js";
 import "../dropdown-menu/dropdown-menu-checkbox-item.js";

package/dist/esm/components/token-icon/token-icon.js

@@ -1,80 +1,94 @@
-import { jsx as r, jsxs as S, Fragment as _ } from "react/jsx-runtime";
-import w from "react";
+import { jsx as r, jsxs as R, Fragment as _ } from "react/jsx-runtime";
+import N from "react";
 import "@gearbox-protocol/sdk";
-import { cn as I } from "../../utils/cn.js";
+import { cn as T } from "../../utils/cn.js";
 import "sonner";
 import "@gearbox-protocol/sdk/common-utils";
-import { getStatic as d } from "../../utils/static.js";
+import { getStatic as g } from "../../utils/static.js";
+import { getTokenIcon as w } from "../../utils/token-icon-source.js";
 import "luxon";
 import "../../utils/z-index.js";
-import { RoundedImage as l } from "../rounded-image/rounded-image.js";
-const s = d("/tokens/default.svg");
-function T(t) {
+import { RoundedImage as u } from "../rounded-image/rounded-image.js";
+const s = g("/tokens/default.svg");
+function U(t) {
   return t.replace("/", "").replace(" ", "").replace("-f", "").replace("-", "_").toLowerCase();
 }
 function j(t) {
   return typeof t == "object" && t !== null && "icon" in t && !("kind" in t);
 }
-function k(t) {
+function I(t) {
   return typeof t == "object" && t !== null && "kind" in t && t.kind === "composite";
 }
-function u(t) {
+function k(t) {
   if (t.type === "url") return t.url;
-  const o = T(t.symbol);
-  return o ? d(`/tokens/${o}.svg`) : s;
+  const o = U(t.symbol);
+  return o ? g(`/tokens/${o}.svg`) : s;
 }
-function y(t) {
-  if (!t || k(t))
+function C(t) {
+  if (!t || I(t))
     return s;
   if (j(t))
     return t.icon;
-  const o = T(t);
-  return o ? d(`/tokens/${o}.svg`) : s;
+  const o = U(t);
+  return o ? g(`/tokens/${o}.svg`) : s;
 }
 function F(t) {
-  return t ? k(t) ? t.layers.map(u) : [y(t)] : [s];
+  return t ? I(t) ? t.layers.map(k) : [C(t)] : [s];
+}
+const L = 0.65;
+function v(t, o) {
+  return t !== void 0 ? w(t) : typeof o == "string" ? w(o) : o;
 }
-const b = 0.65, L = w.forwardRef(function({ symbol: o, size: e = 48, fit: n = "contain", rounded: c = !1, className: a, ...f }, i) {
-  if (k(o))
+const D = N.forwardRef(function({
+  token: o,
+  symbol: e,
+  size: n = 48,
+  fit: c = "contain",
+  rounded: a = !1,
+  className: l,
+  ...f
+}, m) {
+  const i = v(o, e);
+  if (I(i))
     return /* @__PURE__ */ r(
-      N,
+      S,
       {
-        ref: i,
-        composite: o,
-        size: e,
-        fit: n,
-        rounded: c,
-        className: a
+        ref: m,
+        composite: i,
+        size: n,
+        fit: c,
+        rounded: a,
+        className: l
       }
     );
-  const p = y(o);
+  const p = C(i);
   return /* @__PURE__ */ r(
-    l,
+    u,
     {
-      ref: i,
-      className: a,
+      ref: m,
+      className: l,
       src: p,
       alt: "",
-      rounded: c,
-      fit: n,
-      width: e,
-      height: e,
-      size: e,
+      rounded: a,
+      fit: c,
+      width: n,
+      height: n,
+      size: n,
       ...f
     }
   );
-}), N = w.forwardRef(function({ composite: o, size: e, fit: n, rounded: c, className: a }, f) {
-  const { preset: i, layers: p, scaleFactor: U = b } = o, [C, x] = p, g = u(C), R = u(x), m = Math.round(e * U);
-  let h;
-  switch (i) {
+}), S = N.forwardRef(function({ composite: o, size: e, fit: n, rounded: c, className: a }, l) {
+  const { preset: f, layers: m, scaleFactor: i = L } = o, [p, b] = m, h = k(p), x = k(b), d = Math.round(e * i);
+  let y;
+  switch (f) {
     case "centered_foreground":
-      h = /* @__PURE__ */ S(_, { children: [
+      y = /* @__PURE__ */ R(_, { children: [
         /* @__PURE__ */ r(
-          l,
+          u,
           {
             className: "absolute inset-0",
             style: { zIndex: 0 },
-            src: g,
+            src: h,
             alt: "background",
             rounded: c,
             fit: n,
@@ -84,22 +98,22 @@ const b = 0.65, L = w.forwardRef(function({ symbol: o, size: e = 48, fit: n = "c
         /* @__PURE__ */ r(
           "div",
           {
-            className: I(
+            className: T(
               "absolute left-1/2 top-1/2 z-[1] -translate-x-1/2 -translate-y-1/2",
               "flex items-center justify-center"
             ),
             style: {
-              width: m,
-              height: m
+              width: d,
+              height: d
             },
             children: /* @__PURE__ */ r(
-              l,
+              u,
               {
-                src: R,
+                src: x,
                 alt: "foreground",
                 rounded: c,
                 fit: n,
-                size: m
+                size: d
               }
             )
           }
@@ -107,10 +121,10 @@ const b = 0.65, L = w.forwardRef(function({ symbol: o, size: e = 48, fit: n = "c
       ] });
       break;
     default:
-      return console.error("Unknown TokenIcon composite preset", i), /* @__PURE__ */ r(
-        l,
+      return console.error("Unknown TokenIcon composite preset", f), /* @__PURE__ */ r(
+        u,
         {
-          src: g,
+          src: h,
           alt: "error",
           rounded: c,
           fit: n,
@@ -121,16 +135,16 @@ const b = 0.65, L = w.forwardRef(function({ symbol: o, size: e = 48, fit: n = "c
   return /* @__PURE__ */ r(
     "div",
     {
-      ref: f,
-      className: I("relative inline-block shrink-0", a),
+      ref: l,
+      className: T("relative inline-block shrink-0", a),
       style: { width: e, height: e },
-      children: h
+      children: y
     }
   );
 });
-N.displayName = "TokenIconComposite";
-L.displayName = "TokenIcon";
-function B(t) {
+S.displayName = "TokenIconComposite";
+D.displayName = "TokenIcon";
+function K(t) {
   for (const o of t)
     for (const e of F(o)) {
       const n = new window.Image();
@@ -138,6 +152,6 @@ function B(t) {
     }
 }
 export {
-  L as TokenIcon,
-  B as preloadTokenIcons
+  D as TokenIcon,
+  K as preloadTokenIcons
 };

package/dist/esm/components/token-symbol/index.js

@@ -1,5 +1,4 @@
-import { TokenSymbol as m, getSymbolOrIcon as r } from "./token-symbol.js";
+import { TokenSymbol as m } from "./token-symbol.js";
 export {
-  m as TokenSymbol,
-  r as getSymbolOrIcon
+  m as TokenSymbol
 };

package/dist/esm/components/token-symbol/token-symbol.js

@@ -1,20 +1,19 @@
-import { jsxs as t, jsx as i } from "react/jsx-runtime";
-import { cva as y } from "class-variance-authority";
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { cva as v } from "class-variance-authority";
 import N from "react";
 import { RoundedImage as x } from "../rounded-image/rounded-image.js";
 import { ShortString as S } from "../short-string/short-string.js";
-import { TokenIcon as l } from "../token-icon/token-icon.js";
-import { SimpleTooltip as I } from "../tooltip/simple-tooltip.js";
+import { TokenIcon as s } from "../token-icon/token-icon.js";
+import { SimpleTooltip as T } from "../tooltip/simple-tooltip.js";
 import "../tooltip/tooltip.js";
-import { isIconComposite as b } from "../../types/common.js";
 import "@gearbox-protocol/sdk";
-import { cn as T } from "../../utils/cn.js";
+import { cn as y } from "../../utils/cn.js";
 import "sonner";
 import "@gearbox-protocol/sdk/common-utils";
-import { getNetworkIcon as R } from "../../utils/network-icons.js";
+import { getNetworkIcon as I } from "../../utils/network-icons.js";
 import "luxon";
 import "../../utils/z-index.js";
-const _ = y("", {
+const b = v("", {
   variants: {
     marginSize: {
       sm: "gap-1",
@@ -26,83 +25,64 @@ const _ = y("", {
     marginSize: "md"
   }
 });
-function j(r) {
-  if (r) {
-    if (typeof r == "string") return r;
-    if (r.icon !== void 0) {
-      if (typeof r.icon == "string")
-        return { icon: r.icon };
-      if (b(r.icon))
-        return r.icon;
-    }
-    return r.symbol;
-  }
-}
-function z(r) {
+function R(r) {
   if (r)
-    return typeof r == "string" ? r : r.title;
+    return typeof r == "string" ? r : "title" in r && r.title ? r.title : r.symbol;
 }
-const V = N.forwardRef(
+const _ = N.forwardRef(
   ({
     className: r,
-    marginSize: d = "lg",
-    token: n,
-    title: m,
-    size: s = 24,
-    showSymbol: f = !1,
+    marginSize: c = "lg",
+    token: m,
+    title: o,
+    size: a = 24,
+    showSymbol: d = !1,
     showIcon: p = !0,
-    maxLength: u,
-    chainId: C,
-    comment: c,
-    network: e,
+    maxLength: f,
+    chainId: j,
+    comment: l,
+    network: i,
     ...g
-  }, h) => {
-    const o = j(n), v = m || z(n), a = () => e ? /* @__PURE__ */ t("div", { className: "relative", children: [
-      /* @__PURE__ */ i(
-        l,
+  }, u) => {
+    const h = o || R(m), n = () => i ? /* @__PURE__ */ t("div", { className: "relative", children: [
+      /* @__PURE__ */ e(
+        s,
         {
-          symbol: o,
-          size: s,
+          token: m,
+          size: a,
           className: "shrink-0 self-center"
         }
       ),
-      /* @__PURE__ */ i("div", { className: "absolute -top-[10px] -right-[7px]", children: /* @__PURE__ */ i(
+      /* @__PURE__ */ e("div", { className: "absolute -top-[10px] -right-[7px]", children: /* @__PURE__ */ e(
         x,
         {
-          src: R(e),
-          alt: e,
+          src: I(i),
+          alt: i,
           size: 14,
           rounded: !0
         }
       ) })
-    ] }) : /* @__PURE__ */ i(
-      l,
-      {
-        symbol: o,
-        size: s,
-        className: "shrink-0 self-center"
-      }
-    );
+    ] }) : /* @__PURE__ */ e(s, { token: m, size: a, className: "shrink-0 self-center" });
     return /* @__PURE__ */ t(
       "div",
       {
-        ref: h,
-        className: T(
+        ref: u,
+        className: y(
           "flex items-center",
-          _({ marginSize: d }),
+          b({ marginSize: c }),
           r
         ),
         ...g,
         children: [
-          p && o && (e !== void 0 ? /* @__PURE__ */ t(I, { title: a(), children: [
+          p && m && (i !== void 0 ? /* @__PURE__ */ t(T, { title: n(), children: [
             "Network: ",
-            e
-          ] }) : a()),
-          (m || f) && /* @__PURE__ */ t("div", { className: "flex items-center gap-1 self-center", children: [
-            /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(S, { maxLength: u, children: v }) }),
-            c && /* @__PURE__ */ t("div", { className: "text-md text-muted-foreground leading-tight", children: [
+            i
+          ] }) : n()),
+          (o || d) && /* @__PURE__ */ t("div", { className: "flex items-center gap-1 self-center", children: [
+            /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(S, { maxLength: f, children: h }) }),
+            l && /* @__PURE__ */ t("div", { className: "text-md text-muted-foreground leading-tight", children: [
               "(",
-              c,
+              l,
               ")"
             ] })
           ] })
@@ -111,8 +91,7 @@ const V = N.forwardRef(
     );
   }
 );
-V.displayName = "TokenSymbol";
+_.displayName = "TokenSymbol";
 export {
-  V as TokenSymbol,
-  j as getSymbolOrIcon
+  _ as TokenSymbol
 };