@gearbox-protocol/permissionless-ui 1.22.0-next.7 → 1.22.0-next.70

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

@@ -1,204 +1,115 @@
-import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import * as h from "react";
-import { Description as g } from "../description/description.js";
-import { TokenIcon as N } from "../token-icon/token-icon.js";
-import { TooltipProvider as P, Tooltip as A, TooltipTrigger as Y, TooltipContent as z } from "../tooltip/tooltip.js";
-import { FormattedMessageTyped as r } from "../typed-intl/index.js";
-import { cn as u } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk";
-import { formatPercentAmount as s } from "../../utils/format-money.js";
-function D({
-  totalAPY: l,
-  totalAPYLoading: b,
-  baseAPY: f,
-  extraAPY: x,
-  externalAPY: i,
+import { jsx as t, jsxs as d } from "react/jsx-runtime";
+import { IconInfo as $ } from "@gearbox-protocol/static";
+import * as f from "react";
+import { PointsIcon as M } from "../points-icon/points-icon.js";
+import { PoolAPYTooltip as N } from "../pool-apy-tooltip/pool-apy-tooltip.js";
+import { TokenIcon as j } from "../token-icon/token-icon.js";
+import { formatPercentAmount as v } from "../../utils/format-money.js";
+import { getStatic as L } from "../../utils/static.js";
+function C(o) {
+  return o === "GEAR" ? { icon: L("/logo/logo_symbol.png") } : o;
+}
+function H({
+  totalAPY: o,
+  totalAPYLoading: h,
+  baseAPY: T,
+  extraAPY: g,
+  externalAPY: n,
+  points: a,
+  apy7DAgo: k,
   tokensList: y,
-  decimals: o = 2,
-  className: c
+  decimals: p = 2,
+  className: R
 }) {
-  const n = h.useMemo(() => {
-    if (i)
+  const s = f.useMemo(() => {
+    if (n)
       return {
-        ...i,
-        value: i.value ?? i.apy ?? 0
+        ...n,
+        value: n.value ?? n.apy ?? 0
       };
-  }, [i]), d = h.useMemo(() => x.filter((t) => (t.apy || 0) > 0), [x]), v = d.length > 0, p = n && n.totalValue > 0 && n.totalValue !== l, k = v || p || f.length > 1, T = h.useMemo(() => `${[
-    s(l, o),
-    ...p ? [s(n.totalValue, o)] : []
-  ].join("-")}%`, [l, p, n, o]);
-  if (b)
-    return /* @__PURE__ */ e(
-      "div",
-      {
-        className: u(
-          "font-medium animate-pulse bg-muted rounded w-16 h-4",
-          c
-        )
-      }
-    );
-  if (!k)
-    return /* @__PURE__ */ a("div", { className: u("font-medium", c), children: [
-      s(l, o),
-      "%"
-    ] });
-  const w = {
-    supplyAPY: "components.apyParts.supplyAPY",
-    tokenYield: "components.apyParts.tokenYield"
-  }, I = {
-    supplyAPY: "components.apyParts.supplyAPY.tip",
-    tokenYield: "components.apyParts.tokenYield.tip"
-  };
-  return /* @__PURE__ */ e(P, { children: /* @__PURE__ */ a(A, { children: [
-    /* @__PURE__ */ e(Y, { asChild: !0, children: /* @__PURE__ */ a("div", { className: "inline-flex flex-col", children: [
-      /* @__PURE__ */ a(
-        "div",
-        {
-          className: u(
-            "inline-flex items-center gap-1.5 font-medium cursor-help",
-            c
-          ),
-          children: [
-            T,
-            /* @__PURE__ */ a(
-              "svg",
-              {
-                className: "h-3.5 w-3.5 ",
-                fill: "none",
-                viewBox: "0 0 24 24",
-                stroke: "currentColor",
-                role: "img",
-                "aria-label": "APY Information",
-                children: [
-                  /* @__PURE__ */ e("title", { children: "APY Information" }),
-                  /* @__PURE__ */ e(
-                    "path",
-                    {
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      strokeWidth: 2,
-                      d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                    }
-                  )
-                ]
-              }
-            )
-          ]
-        }
-      ),
-      v && /* @__PURE__ */ e("div", { className: "flex gap-1 mt-1 justify-end", children: d.map((t) => {
-        const m = y?.[t.rewardToken]?.symbol || t.rewardTokenSymbol;
-        return /* @__PURE__ */ e(
-          N,
-          {
-            symbol: m,
-            size: 18
-          },
-          `icon-${t.rewardToken}-${t.apy}`
-        );
-      }) })
-    ] }) }),
-    /* @__PURE__ */ e(z, { className: "max-w-xs", children: /* @__PURE__ */ a("div", { className: "flex flex-col gap-2 text-sm", children: [
-      f.map((t) => /* @__PURE__ */ a(
-        "div",
-        {
-          className: "flex justify-between items-start gap-4",
-          children: [
-            /* @__PURE__ */ a("div", { className: "flex flex-col gap-0.5", children: [
-              /* @__PURE__ */ a("span", { className: "", children: [
-                /* @__PURE__ */ e(r, { messageId: w[t.type] }),
-                ":"
-              ] }),
-              /* @__PURE__ */ e(g, { className: "text-xs", children: /* @__PURE__ */ e(
-                r,
+  }, [n]), i = f.useMemo(() => g.filter((l) => (l.apy || 0) > 0), [g]), w = () => {
+    const l = i.length > 0, E = s && !h && s.totalValue > 0 && s.totalValue !== o, I = a && a.length > 0, S = `${[
+      v(o, p),
+      ...E ? [v(s.totalValue, p)] : []
+    ].join("-")}%`, x = Math.max(i.length, 0), b = a?.filter((e) => e.reward) ?? [], m = x + b.length;
+    return /* @__PURE__ */ d("div", { className: R, children: [
+      /* @__PURE__ */ d("span", { className: "inline-flex items-center", children: [
+        S,
+        /* @__PURE__ */ t("span", { className: "ml-1.5 leading-[0] text-gray-70", children: /* @__PURE__ */ t($, { size: 14 }) })
+      ] }),
+      /* @__PURE__ */ t("div", {}),
+      (l || I) && /* @__PURE__ */ d("span", { className: "relative inline-flex", children: [
+        i.map((e, r) => {
+          const u = y?.[e.rewardToken]?.symbol || e.rewardTokenSymbol, V = r === m - 1;
+          return /* @__PURE__ */ t(
+            "span",
+            {
+              style: {
+                zIndex: m - r,
+                marginRight: V ? 0 : -7
+              },
+              children: /* @__PURE__ */ t(
+                j,
                 {
-                  messageId: I[t.type]
+                  symbol: C(u),
+                  size: 14,
+                  style: {
+                    margin: e.rewardTokenSymbol === "GEAR" ? "-3px 0 0 0" : "0"
+                  }
                 }
-              ) })
-            ] }),
-            /* @__PURE__ */ a("span", { className: "font-medium", children: [
-              s(t.apy, o),
-              "%"
-            ] })
-          ]
-        },
-        `base-${t.type}-${t.apy}`
-      )),
-      d.map((t) => {
-        const m = y?.[t.rewardToken]?.symbol || t.rewardTokenSymbol;
-        return /* @__PURE__ */ a(
-          "div",
-          {
-            className: "flex justify-between items-start gap-4",
-            children: [
-              /* @__PURE__ */ a("div", { className: "flex flex-col gap-0.5", children: [
-                /* @__PURE__ */ a("span", { className: " flex items-center gap-1.5", children: [
-                  /* @__PURE__ */ e(N, { symbol: m, size: 16 }),
-                  /* @__PURE__ */ e(
-                    r,
-                    {
-                      messageId: "components.apyParts.extraAPY",
-                      values: { symbol: m }
-                    }
-                  ),
-                  ":"
-                ] }),
-                /* @__PURE__ */ e(g, { className: "text-xs", children: /* @__PURE__ */ e(r, { messageId: "components.apyParts.extraAPY.tip" }) })
-              ] }),
-              /* @__PURE__ */ a("span", { className: "font-medium text-green-500", children: [
-                "+",
-                s(t.apy, o),
-                "%"
-              ] })
-            ]
-          },
-          `extra-${t.rewardToken}-${t.apy}`
-        );
-      }),
-      /* @__PURE__ */ a("div", { className: "flex justify-between gap-4 pt-2 border-t border-border", children: [
-        /* @__PURE__ */ a("span", { className: "font-medium", children: [
-          /* @__PURE__ */ e(r, { messageId: "components.apyParts.totalAPY" }),
-          ":"
-        ] }),
-        /* @__PURE__ */ a("span", { className: "font-bold", children: [
-          s(l, o),
-          "%"
-        ] })
-      ] }),
-      n?.tooltip && /* @__PURE__ */ a("div", { className: "flex items-start gap-2 pt-2 border-t border-border text-xs opacity-80", children: [
-        /* @__PURE__ */ a(
-          "svg",
-          {
-            className: "h-3.5 w-3.5 mt-0.5 flex-shrink-0",
-            fill: "currentColor",
-            viewBox: "0 0 20 20",
-            role: "img",
-            "aria-label": "External APY",
-            children: [
-              /* @__PURE__ */ e("title", { children: "External APY" }),
-              /* @__PURE__ */ e("path", { d: "M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zM8 16v-1h4v1a2 2 0 11-4 0zM12 14c.015-.34.208-.646.477-.859a4 4 0 10-4.954 0c.27.213.462.519.476.859h4.002z" })
-            ]
-          }
-        ),
-        /* @__PURE__ */ e("div", { className: "font-medium", children: /* @__PURE__ */ e(
-          r,
-          {
-            messageId: n.tooltip,
-            values: {
-              name: n.name,
-              value: /* @__PURE__ */ a("span", { className: "font-bold", children: [
-                "+",
-                s(n.value, o),
-                "%"
-              ] })
-            }
-          }
-        ) })
+              )
+            },
+            `extra-${e.rewardToken}-${e.apy}`
+          );
+        }),
+        b.map((e, r) => {
+          const c = r + x, u = c === m - 1;
+          return /* @__PURE__ */ t(
+            "span",
+            {
+              style: {
+                zIndex: m - c,
+                marginRight: u ? 0 : -7
+              },
+              children: /* @__PURE__ */ t(
+                M,
+                {
+                  reward: {
+                    name: e.reward?.name || e.name,
+                    type: e.reward?.type || e.name.toLowerCase()
+                  },
+                  size: 14
+                }
+              )
+            },
+            `points-${e.name}-${r}`
+          );
+        })
       ] })
-    ] }) })
-  ] }) });
+    ] });
+  }, z = f.useMemo(() => {
+    if (n)
+      return {
+        totalValue: n.totalValue,
+        apy: n.value ?? n.apy ?? 0,
+        name: n.name,
+        tooltip: n.tooltip
+      };
+  }, [n]);
+  return !h && o >= 1e-3 ? /* @__PURE__ */ t(
+    N,
+    {
+      baseAPY: T,
+      extraAPY: i,
+      totalAPY: o,
+      externalAPY: z,
+      points: a,
+      apy7DAgo: k,
+      tokensList: y,
+      children: w()
+    }
+  ) : w();
 }
 export {
-  D as CompoundAPY
+  H as CompoundAPY
 };

package/dist/esm/components/confirm-menu/confirm-menu.js

@@ -1,31 +1,47 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { X as m } from "lucide-react";
-import { IconButton as l } from "../icon-button/icon-button.js";
-import "react";
-import { cn as n } from "../../utils/cn.js";
-import "sonner";
+import { jsxs as m, jsx as r } from "react/jsx-runtime";
+import * as a from "react";
+import { IconButton as s } from "../icon-button/icon-button.js";
+import { faXmark as t } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as c } from "../icons/fa-icon.js";
 import "@gearbox-protocol/sdk";
-function u({ title: r, onClose: o, className: t }) {
-  return /* @__PURE__ */ i(
+import { cn as i } from "../../utils/cn.js";
+import "sonner";
+import "luxon";
+const f = a.forwardRef(
+  ({ title: o, onClose: e, className: n }, l) => /* @__PURE__ */ m(
     "div",
     {
-      className: n("flex items-center justify-between w-full mb-4", t),
+      ref: l,
+      className: i(
+        "flex flex-nowrap items-center w-full max-w-full shrink-0 basis-full",
+        n
+      ),
       children: [
-        /* @__PURE__ */ e("div", { className: "flex-1", children: /* @__PURE__ */ e("h2", { className: "text-lg font-semibold text-foreground", children: r }) }),
-        /* @__PURE__ */ e(
-          l,
+        /* @__PURE__ */ r("div", { className: "flex min-w-0 grow shrink-0 basis-[0%] flex-nowrap", children: /* @__PURE__ */ r(
+          "div",
+          {
+            className: i(
+              "font-normal min-h-[min-content]",
+              "text-[21px] leading-[25px]"
+            ),
+            children: o
+          }
+        ) }),
+        /* @__PURE__ */ r("div", { className: "shrink-0 pl-2", children: /* @__PURE__ */ r(
+          s,
           {
-            variant: "ghost",
-            size: "sm",
-            onClick: o,
+            buttonType: "hollow",
+            size: 30,
+            onClick: e,
             "aria-label": "Close",
-            children: /* @__PURE__ */ e(m, { className: "h-5 w-5" })
+            children: /* @__PURE__ */ r(c, { icon: t, className: "size-5" })
           }
-        )
+        ) })
       ]
     }
-  );
-}
+  )
+);
+f.displayName = "ConfirmMenu";
 export {
-  u as ConfirmMenu
+  f as ConfirmMenu
 };

package/dist/esm/components/credit-session-status/credit-session-status.js

@@ -1,8 +1,9 @@
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { jsxs as d, jsx as t } from "react/jsx-runtime";
 import "react";
+import "@gearbox-protocol/sdk";
 import { cn as r } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
+import "luxon";
 const o = {
   active: "bg-green-500",
   closed: "bg-gray-500",
@@ -11,18 +12,18 @@ const o = {
   liquidateExpired: "bg-red-500",
   liquidatePaused: "bg-red-500"
 };
-function g({
+function u({
   status: e,
-  className: d
+  className: i
 }) {
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ d(
     "div",
     {
       className: r(
         "inline-flex items-center gap-1.5 px-3 py-1.5",
         "text-xs font-medium uppercase tracking-wider",
         "bg-muted border border-border rounded-md",
-        d
+        i
       ),
       children: [
         /* @__PURE__ */ t("div", { className: r("w-2 h-2 rounded-full", o[e]) }),
@@ -32,5 +33,5 @@ function g({
   );
 }
 export {
-  g as CreditSessionStatus
+  u as CreditSessionStatus
 };

package/dist/esm/components/currency-button/currency-button.js

@@ -1,84 +1,107 @@
-import { jsxs as g, jsx as n } from "react/jsx-runtime";
-import { ChevronDown as x } from "lucide-react";
-import { TokenSymbol as b } from "../token-symbol/token-symbol.js";
+import { jsxs as b, jsx as r } from "react/jsx-runtime";
+import { IconExpand as g } from "@gearbox-protocol/static";
+import { cva as u } from "class-variance-authority";
+import { TokenSymbol as k } from "../token-symbol/token-symbol.js";
 import "react";
-import { cn as i } from "../../utils/cn.js";
-import "sonner";
 import "@gearbox-protocol/sdk";
-const w = {
-  old: { symbol: 16, arrow: 8 },
+import { cn as x } from "../../utils/cn.js";
+import "sonner";
+import "luxon";
+const w = 13, N = u(
+  "flex flex-row items-center text-foreground cursor-[unset]",
+  {
+    variants: {
+      size: {
+        xs: "text-sm leading-[17px]",
+        sm: "text-[16px] leading-[21px]",
+        md: "text-[21px] leading-[33px]"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+), V = {
   sm: { symbol: 16, arrow: 8 },
-  md: { symbol: 28, arrow: 12 },
-  lg: { symbol: 32, arrow: 14 },
-  default: { symbol: 28, arrow: 12 }
-}, C = {
-  old: "px-2 py-1 gap-1",
-  sm: "px-2 py-1 gap-1",
-  md: "px-3 py-1.5 gap-2",
-  lg: "px-4 py-2 gap-2",
-  default: "px-3 py-1.5 gap-2"
-};
-function B({
-  title: a,
-  maxLength: c = 12,
-  token: t,
-  disabled: r,
-  showSelectDialog: o,
-  size: e = "md",
-  active: s = !1,
-  chainId: l,
-  network: u,
-  className: y,
-  children: f
+  md: { symbol: 28, arrow: 12 }
+}, B = u(
+  "ml-0.5 leading-none text-gray-100 transition-transform duration-100 ease-[ease]",
+  {
+    variants: {
+      size: {
+        sm: "px-1",
+        md: "px-1.5"
+      },
+      active: {
+        true: "rotate-180",
+        false: ""
+      }
+    },
+    defaultVariants: { size: "md", active: !1 }
+  }
+);
+function T({
+  title: n,
+  maxLength: l = w,
+  token: m,
+  disabled: d,
+  showSelectDialog: t,
+  size: o,
+  active: f = !1,
+  chainId: v,
+  network: y,
+  className: z,
+  children: c
 }) {
-  const d = !r && o ? o : void 0, m = w[e], p = o && !r;
-  return /* @__PURE__ */ g(
-    "button",
-    {
-      type: "button",
-      onClick: d,
-      disabled: r,
-      className: i(
-        "inline-flex items-center rounded-full bg-secondary font-medium transition-colors",
-        C[e],
-        p && "cursor-pointer hover:bg-secondary/80",
-        !p && "cursor-default",
-        s && "ring-2 ring-primary ring-offset-1",
-        r && "opacity-50 cursor-not-allowed",
-        y
-      ),
-      children: [
-        t ? /* @__PURE__ */ n(
-          b,
-          {
-            token: t,
-            size: m.symbol,
-            showSymbol: !0,
-            maxLength: c,
-            chainId: l,
-            network: u
-          }
-        ) : /* @__PURE__ */ n("span", { className: "text-muted-foreground", children: f || a || "Select token" }),
-        o && !r && /* @__PURE__ */ n(
-          "span",
-          {
-            className: i(
-              "flex items-center justify-center rounded transition-colors",
-              s && "bg-primary/10"
-            ),
-            children: /* @__PURE__ */ n(
-              x,
-              {
-                size: m.arrow,
-                className: "text-muted-foreground"
-              }
-            )
-          }
-        )
-      ]
-    }
+  const s = !d && t ? t : void 0, e = !!(t && !d), a = o === "xs" ? "sm" : o ?? "md", p = V[a];
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: A uses div (CurrencyBlock); role + keyboard for a11y
+    /* @__PURE__ */ b(
+      "div",
+      {
+        role: e ? "button" : void 0,
+        tabIndex: e ? 0 : void 0,
+        onKeyDown: e && s ? (i) => {
+          (i.key === "Enter" || i.key === " ") && (i.preventDefault(), s());
+        } : void 0,
+        "data-active": e,
+        "data-testid": "currency-button",
+        onClick: s,
+        className: x(
+          "group",
+          N({ size: o }),
+          e && "cursor-pointer",
+          e && "hover:[&_.expand-wrap]:text-foreground",
+          z
+        ),
+        children: [
+          /* @__PURE__ */ r(
+            k,
+            {
+              title: n,
+              size: p.symbol,
+              token: m,
+              showSymbol: !0,
+              maxLength: l,
+              marginSize: a,
+              chainId: v,
+              network: y
+            }
+          ),
+          !m && (c ?? n) ? /* @__PURE__ */ r("span", { className: "text-muted-foreground truncate", children: c ?? n }) : null,
+          t && /* @__PURE__ */ r(
+            "span",
+            {
+              className: x(
+                "expand-wrap",
+                B({ size: a, active: f })
+              ),
+              children: /* @__PURE__ */ r(g, { size: p.arrow })
+            }
+          )
+        ]
+      }
+    )
   );
 }
 export {
-  B as CurrencyButton
+  T as CurrencyButton
 };

package/dist/esm/components/description/description.js

@@ -1,17 +1,24 @@
-import { jsx as o } from "react/jsx-runtime";
-import "react";
-import { cn as m } from "../../utils/cn.js";
-import "sonner";
+import { jsx as p } from "react/jsx-runtime";
+import * as m from "react";
 import "@gearbox-protocol/sdk";
-function c({ className: t, ...r }) {
-  return /* @__PURE__ */ o(
-    "span",
+import { cn as a } from "../../utils/cn.js";
+import "sonner";
+import "luxon";
+import { Typography as c } from "../typography/typography.js";
+const e = m.forwardRef(
+  ({ className: r, as: o = "div", ...i }, t) => /* @__PURE__ */ p(
+    c,
     {
-      className: m("text-sm text-muted-foreground", t),
-      ...r
+      ref: t,
+      className: a(r),
+      variant: "caption",
+      color: "secondary",
+      as: o,
+      ...i
     }
-  );
-}
+  )
+);
+e.displayName = "Description";
 export {
-  c as Description
+  e as Description
 };