@gearbox-protocol/permissionless-ui 1.17.9 → 1.18.0

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

@@ -0,0 +1,84 @@
+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 "react";
+import { cn as i } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk";
+const w = {
+  old: { symbol: 16, arrow: 8 },
+  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
+}) {
+  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"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  B as CurrencyButton
+};

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

@@ -0,0 +1,4 @@
+import { CurrencyButton as t } from "./currency-button.js";
+export {
+  t as CurrencyButton
+};

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

@@ -0,0 +1,73 @@
+import { jsx as n, Fragment as f, jsxs as r } from "react/jsx-runtime";
+import { Skeleton as y } from "../skeleton/skeleton.js";
+import "react";
+import { cn as c } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk";
+import { TooltipProvider as x, Tooltip as N, TooltipTrigger as g, TooltipContent as b } from "../tooltip/tooltip.js";
+function S({
+  totalAPY: d,
+  totalAPYLoading: p,
+  baseAPY: l,
+  extraAPY: a,
+  tokensList: t,
+  children: m,
+  className: i
+}) {
+  const h = l && l.length > 0 || a && a.length > 0;
+  if (p)
+    return /* @__PURE__ */ n(y, { className: c("h-4 w-12", i) });
+  const o = m ?? /* @__PURE__ */ n("span", { className: c("tabular-nums", i), children: d !== void 0 ? `${d.toFixed(2)}%` : "N/A" });
+  return h ? /* @__PURE__ */ n(x, { children: /* @__PURE__ */ r(N, { children: [
+    /* @__PURE__ */ n(g, { asChild: !0, children: /* @__PURE__ */ n("span", { className: "cursor-help underline decoration-dotted underline-offset-2", children: o }) }),
+    /* @__PURE__ */ n(b, { className: "max-w-xs", children: /* @__PURE__ */ r("div", { className: "space-y-2 text-sm", children: [
+      l && l.length > 0 && /* @__PURE__ */ r("div", { children: [
+        /* @__PURE__ */ n("div", { className: "font-medium text-muted-foreground mb-1", children: "Base APY" }),
+        l.map((e, s) => /* @__PURE__ */ r(
+          "div",
+          {
+            className: "flex justify-between gap-4",
+            children: [
+              /* @__PURE__ */ n("span", { children: e.label || e.type || "Supply" }),
+              /* @__PURE__ */ r("span", { className: "tabular-nums", children: [
+                e.apy.toFixed(2),
+                "%"
+              ] })
+            ]
+          },
+          `base-${e.type || s}-${e.apy}`
+        ))
+      ] }),
+      a && a.length > 0 && /* @__PURE__ */ r("div", { children: [
+        /* @__PURE__ */ n("div", { className: "font-medium text-muted-foreground mb-1", children: "Extra Rewards" }),
+        a.map((e, s) => {
+          const u = e.token && t ? t[e.token]?.symbol : e.token;
+          return /* @__PURE__ */ r(
+            "div",
+            {
+              className: "flex justify-between gap-4",
+              children: [
+                /* @__PURE__ */ n("span", { children: e.label || u || e.type || "Rewards" }),
+                /* @__PURE__ */ r("span", { className: "tabular-nums", children: [
+                  e.apy.toFixed(2),
+                  "%"
+                ] })
+              ]
+            },
+            `extra-${e.token || s}-${e.apy}`
+          );
+        })
+      ] }),
+      d !== void 0 && /* @__PURE__ */ r("div", { className: "border-t pt-2 flex justify-between gap-4 font-medium", children: [
+        /* @__PURE__ */ n("span", { children: "Total" }),
+        /* @__PURE__ */ r("span", { className: "tabular-nums", children: [
+          d.toFixed(2),
+          "%"
+        ] })
+      ] })
+    ] }) })
+  ] }) }) : /* @__PURE__ */ n(f, { children: o });
+}
+export {
+  S as DetailedApy
+};

package/dist/esm/components/detailed-apy/index.js

@@ -0,0 +1,4 @@
+import { DetailedApy as p } from "./detailed-apy.js";
+export {
+  p as DetailedApy
+};

package/dist/esm/components/detailed-page-title/detailed-page-title.js

@@ -12,17 +12,17 @@ import "../dropdown-menu/dropdown-menu-separator.js";
 import "../dropdown-menu/dropdown-menu-shortcut.js";
 import "../dropdown-menu/dropdown-menu-sub-content.js";
 import "../dropdown-menu/dropdown-menu-sub-trigger.js";
-import { PageTitle as b } from "../page-title/page-title.js";
-import { TokenIcon as T } from "../token-icon/token-icon.js";
+import { PageTitle as T } from "../page-title/page-title.js";
+import { TokenIcon as b } from "../token-icon/token-icon.js";
 import { cn as s } from "../../utils/cn.js";
 import "sonner";
 import "@gearbox-protocol/sdk";
 function H({
-  title: f,
+  title: u,
   token: l,
   toCopy: i,
   explorerLinks: o,
-  className: u
+  className: f
 }) {
   const [a, c] = p.useState(!1), n = p.useRef(null), h = async () => {
     if (i)
@@ -35,9 +35,9 @@ function H({
       }
   };
   return /* @__PURE__ */ e(
-    b,
+    T,
     {
-      icon: l?.symbol && /* @__PURE__ */ e(T, { symbol: l.symbol, size: 36 }),
+      icon: l?.symbol && /* @__PURE__ */ e(b, { symbol: l.symbol, size: 36 }),
       actions: /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
         i && /* @__PURE__ */ r(
           d,
@@ -76,20 +76,20 @@ function H({
           /* @__PURE__ */ e(C, { align: "end", children: o.map((t) => /* @__PURE__ */ e(x, { asChild: !0, children: /* @__PURE__ */ r(
             "a",
             {
-              href: t.link,
+              href: t.url,
               target: "_blank",
               rel: "noopener noreferrer",
               className: "flex items-center gap-2",
               children: [
-                t.label,
+                t.name,
                 /* @__PURE__ */ e(m, { className: "h-3 w-3 ml-auto" })
               ]
             }
-          ) }, t.link)) })
+          ) }, t.url)) })
         ] })
       ] }),
-      className: s(u),
-      children: f
+      className: s(f),
+      children: u
     }
   );
 }

package/dist/esm/components/dropdown-label/dropdown-label.js

@@ -0,0 +1,44 @@
+import { jsxs as f, jsx as c } from "react/jsx-runtime";
+import { ChevronDown as u } from "lucide-react";
+import "react";
+import { cn as e } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk";
+function j({
+  children: n,
+  label: s,
+  opened: i,
+  size: t,
+  as: m = "span",
+  onClick: r,
+  icon: a,
+  iconSize: p = 16,
+  className: l
+}) {
+  const o = typeof t == "string" ? t === "sm" ? 14 : t === "default" ? 16 : t === "lg" ? 18 : 16 : t;
+  return /* @__PURE__ */ f(
+    m,
+    {
+      onClick: r,
+      className: e(
+        "inline-flex items-center gap-1 cursor-pointer",
+        r && "hover:text-primary transition-colors",
+        l
+      ),
+      style: o ? { fontSize: o } : void 0,
+      children: [
+        s || n,
+        a ?? /* @__PURE__ */ c(
+          u,
+          {
+            size: p,
+            className: e("transition-transform", i && "rotate-180")
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  j as DefaultDropdownLabel
+};

package/dist/esm/components/dropdown-label/index.js

@@ -0,0 +1,4 @@
+import { DefaultDropdownLabel as r } from "./dropdown-label.js";
+export {
+  r as DefaultDropdownLabel
+};

package/dist/esm/components/edit-input/edit-input.js

@@ -0,0 +1,96 @@
+import { jsxs as h, jsx as e } from "react/jsx-runtime";
+import { Pencil as z, Check as I, X as R } from "lucide-react";
+import * as s from "react";
+import { Input as S } from "../input/input.js";
+import { cn as l } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk";
+function L({
+  value: n = "",
+  onChange: g,
+  placeholder: m,
+  disabled: o,
+  onBlur: y,
+  onSubmit: C,
+  onEditModeChange: E,
+  label: f,
+  inputSize: k = "md",
+  className: p
+}) {
+  const [r, N] = s.useState(!1), [x, i] = s.useState(n), c = s.useRef(null);
+  s.useEffect(() => {
+    i(n);
+  }, [n]), s.useEffect(() => {
+    r && c.current && c.current.focus();
+  }, [r]);
+  const a = (t) => {
+    N(t), E?.(t);
+  }, u = () => {
+    g?.(x), C?.(), a(!1);
+  }, d = () => {
+    i(n), a(!1);
+  }, b = (t) => {
+    t.key === "Enter" ? u() : t.key === "Escape" && d();
+  }, w = {
+    xs: "h-6 text-[10px]",
+    sm: "h-7 text-xs",
+    md: "h-9 text-sm",
+    lg: "h-11 text-base"
+  };
+  return r ? /* @__PURE__ */ h("div", { className: l("inline-flex items-center gap-1", p), children: [
+    f && /* @__PURE__ */ e("span", { className: "text-sm text-muted-foreground mr-1", children: f }),
+    /* @__PURE__ */ e(
+      S,
+      {
+        ref: c,
+        type: "text",
+        value: x,
+        onChange: (t) => i(t.target.value),
+        onBlur: () => {
+          y?.(), u();
+        },
+        onKeyDown: b,
+        placeholder: m,
+        disabled: o,
+        className: l("w-auto min-w-[100px]", w[k])
+      }
+    ),
+    /* @__PURE__ */ e(
+      "button",
+      {
+        type: "button",
+        onClick: u,
+        className: "p-1 text-green-600 hover:bg-green-100 rounded",
+        children: /* @__PURE__ */ e(I, { size: 14 })
+      }
+    ),
+    /* @__PURE__ */ e(
+      "button",
+      {
+        type: "button",
+        onClick: d,
+        className: "p-1 text-red-600 hover:bg-red-100 rounded",
+        children: /* @__PURE__ */ e(R, { size: 14 })
+      }
+    )
+  ] }) : /* @__PURE__ */ h(
+    "button",
+    {
+      type: "button",
+      onClick: () => !o && a(!0),
+      className: l(
+        "inline-flex items-center gap-1.5 text-foreground hover:text-primary transition-colors",
+        o && "opacity-50 cursor-not-allowed",
+        p
+      ),
+      disabled: o,
+      children: [
+        /* @__PURE__ */ e("span", { children: n || m || "Click to edit" }),
+        !o && /* @__PURE__ */ e(z, { size: 14, className: "text-muted-foreground" })
+      ]
+    }
+  );
+}
+export {
+  L as EditInput
+};

package/dist/esm/components/edit-input/index.js

@@ -0,0 +1,4 @@
+import { EditInput as p } from "./edit-input.js";
+export {
+  p as EditInput
+};

package/dist/esm/components/explorer-links-dropdown/explorer-links-dropdown.js

@@ -0,0 +1,80 @@
+import { jsxs as s, jsx as o } from "react/jsx-runtime";
+import { ExternalLink as k } from "lucide-react";
+import * as c from "react";
+import { DropdownMenu as C, DropdownMenuTrigger as b } from "../dropdown-menu/dropdown-menu.js";
+import "../dropdown-menu/dropdown-menu-checkbox-item.js";
+import { DropdownMenuContent as D } from "../dropdown-menu/dropdown-menu-content.js";
+import { DropdownMenuItem as w } from "../dropdown-menu/dropdown-menu-item.js";
+import "../dropdown-menu/dropdown-menu-label.js";
+import "../dropdown-menu/dropdown-menu-radio-item.js";
+import "../dropdown-menu/dropdown-menu-separator.js";
+import "../dropdown-menu/dropdown-menu-shortcut.js";
+import "../dropdown-menu/dropdown-menu-sub-content.js";
+import "../dropdown-menu/dropdown-menu-sub-trigger.js";
+import { cn as M } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk";
+const m = {
+  1: [
+    { name: "Etherscan", url: "https://etherscan.io" },
+    { name: "Blockscout", url: "https://eth.blockscout.com" }
+  ],
+  42161: [
+    { name: "Arbiscan", url: "https://arbiscan.io" },
+    { name: "Blockscout", url: "https://arbitrum.blockscout.com" }
+  ],
+  10: [
+    { name: "Optimistic Etherscan", url: "https://optimistic.etherscan.io" },
+    { name: "Blockscout", url: "https://optimism.blockscout.com" }
+  ],
+  146: [{ name: "Sonic Explorer", url: "https://sonicscan.org" }]
+};
+function N(e, r, n) {
+  return n ? `${e}/tx/${n}` : r ? `${e}/address/${r}` : e;
+}
+function q({
+  explorerLinks: e,
+  opened: r,
+  opens: n = "right",
+  onClose: p,
+  title: a,
+  address: l,
+  txHash: u,
+  chainId: h = 1,
+  className: f,
+  children: d
+}) {
+  const [g, i] = c.useState(r ?? !1);
+  c.useEffect(() => {
+    r !== void 0 && i(r);
+  }, [r]);
+  const x = (t) => {
+    i(t), t || p?.();
+  }, E = e ?? m[h] ?? m[1];
+  return /* @__PURE__ */ s(C, { open: g, onOpenChange: x, children: [
+    /* @__PURE__ */ o(b, { asChild: !0, children: /* @__PURE__ */ o("span", { className: M("cursor-pointer", f), children: d || a || "Explorer" }) }),
+    /* @__PURE__ */ o(D, { align: n === "left" ? "start" : "end", children: E?.map((t) => /* @__PURE__ */ o(w, { asChild: !0, children: /* @__PURE__ */ s(
+      "a",
+      {
+        href: N(t.url, l, u),
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "flex items-center gap-2",
+        children: [
+          t.icon,
+          /* @__PURE__ */ o("span", { children: t.name }),
+          /* @__PURE__ */ o(
+            k,
+            {
+              size: 12,
+              className: "ml-auto text-muted-foreground"
+            }
+          )
+        ]
+      }
+    ) }, t.name)) })
+  ] });
+}
+export {
+  q as ExplorerLinksDropdown
+};

package/dist/esm/components/explorer-links-dropdown/index.js

@@ -0,0 +1,4 @@
+import { ExplorerLinksDropdown as p } from "./explorer-links-dropdown.js";
+export {
+  p as ExplorerLinksDropdown
+};

package/dist/esm/components/filter/filter-block.js

@@ -1,20 +1,23 @@
-import { jsx as m } from "react/jsx-runtime";
-import * as a from "react";
-import { cn as e } from "../../utils/cn.js";
+import { jsx as p } from "react/jsx-runtime";
+import * as s from "react";
+import { cn as l } from "../../utils/cn.js";
 import "sonner";
 import "@gearbox-protocol/sdk";
-import { filterBlockVariants as l } from "./variants.js";
-const p = a.forwardRef(
-  ({ className: r, variant: o, ...t }, i) => /* @__PURE__ */ m(
+import { filterBlockVariants as c } from "./variants.js";
+const d = s.forwardRef(
+  ({ className: t, variant: o, opened: r, type: a, hasSelected: e, onReset: f, ...i }, m) => /* @__PURE__ */ p(
     "div",
     {
-      ref: i,
-      className: e(l({ variant: o, className: r })),
-      ...t
+      ref: m,
+      "data-opened": r,
+      "data-type": a,
+      "data-has-selected": e,
+      className: l(c({ variant: o, className: t })),
+      ...i
     }
   )
 );
-p.displayName = "FilterBlock";
+d.displayName = "FilterBlock";
 export {
-  p as FilterBlock
+  d as FilterBlock
 };

package/dist/esm/components/filter/filter-dropdown-item.js

@@ -1,22 +1,52 @@
-import { jsx as a } from "react/jsx-runtime";
-import * as s from "@radix-ui/react-dropdown-menu";
-import * as i from "react";
-import { cn as n } from "../../utils/cn.js";
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import * as p from "react";
+import { cn as u } from "../../utils/cn.js";
 import "sonner";
 import "@gearbox-protocol/sdk";
-const d = i.forwardRef(({ className: e, inset: o, ...t }, r) => /* @__PURE__ */ a(
-  s.Item,
-  {
-    ref: r,
-    className: n(
-      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
-      o && "pl-8",
-      e
-    ),
-    ...t
+const x = p.forwardRef(
+  ({
+    className: n,
+    inset: a,
+    title: s,
+    decimals: f,
+    maxValue: h,
+    state: e,
+    onSave: v,
+    onReset: t,
+    children: i,
+    ...l
+  }, c) => {
+    const o = e != null;
+    return /* @__PURE__ */ d(
+      "div",
+      {
+        ref: c,
+        "data-has-state": o,
+        className: u(
+          "relative flex cursor-default select-none items-center justify-between gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground",
+          a && "pl-8",
+          n
+        ),
+        ...l,
+        children: [
+          /* @__PURE__ */ r("span", { children: s || i }),
+          o && t && /* @__PURE__ */ r(
+            "button",
+            {
+              type: "button",
+              onClick: (m) => {
+                m.stopPropagation(), t();
+              },
+              className: "text-xs text-muted-foreground hover:text-foreground",
+              children: "Reset"
+            }
+          )
+        ]
+      }
+    );
   }
-));
-d.displayName = "FilterDropdownItem";
+);
+x.displayName = "FilterDropdownItem";
 export {
-  d as FilterDropdownItem
+  x as FilterDropdownItem
 };

package/dist/esm/components/filter/filter-modal-item.js

@@ -1,23 +1,58 @@
-import { jsx as c } from "react/jsx-runtime";
-import * as a from "react";
-import { cn as i } from "../../utils/cn.js";
+import { jsxs as d, jsx as n } from "react/jsx-runtime";
+import * as x from "react";
+import { cn as g } from "../../utils/cn.js";
 import "sonner";
 import "@gearbox-protocol/sdk";
-const m = a.forwardRef(({ className: e, active: o, disabled: t, ...r }, n) => /* @__PURE__ */ c(
-  "div",
-  {
-    ref: n,
-    className: i(
-      "flex cursor-pointer select-none items-center gap-2 rounded-sm px-3 py-2 text-sm outline-none transition-colors",
-      "hover:bg-accent hover:text-accent-foreground",
-      o && "bg-accent text-accent-foreground",
-      t && "cursor-not-allowed pointer-events-none opacity-50",
-      e
-    ),
-    ...r
+const b = x.forwardRef(
+  ({
+    className: i,
+    active: s,
+    disabled: t,
+    title: c,
+    state: e,
+    onOpen: a,
+    onReset: o,
+    children: l,
+    onClick: u,
+    ...f
+  }, p) => {
+    const r = e != null;
+    return /* @__PURE__ */ d(
+      "button",
+      {
+        ref: p,
+        type: "button",
+        "data-has-state": r,
+        className: g(
+          "flex cursor-pointer select-none items-center justify-between gap-2 rounded-sm px-3 py-2 text-sm outline-none transition-colors w-full text-left",
+          "hover:bg-accent hover:text-accent-foreground",
+          "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          s && "bg-accent text-accent-foreground",
+          t && "cursor-not-allowed pointer-events-none opacity-50",
+          i
+        ),
+        onClick: u || a,
+        disabled: t,
+        ...f,
+        children: [
+          /* @__PURE__ */ n("span", { children: c || l }),
+          r && o && /* @__PURE__ */ n(
+            "button",
+            {
+              type: "button",
+              onClick: (m) => {
+                m.stopPropagation(), o();
+              },
+              className: "text-xs text-muted-foreground hover:text-foreground",
+              children: "Reset"
+            }
+          )
+        ]
+      }
+    );
   }
-));
-m.displayName = "FilterModalItem";
+);
+b.displayName = "FilterModalItem";
 export {
-  m as FilterModalItem
+  b as FilterModalItem
 };

package/dist/esm/components/formatted-number/formatted-number.js

@@ -0,0 +1,15 @@
+import { jsx as o } from "react/jsx-runtime";
+import "react";
+import { cn as i } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk";
+function u({
+  value: r,
+  className: t,
+  ...m
+}) {
+  return /* @__PURE__ */ o("span", { className: i("tabular-nums", t), ...m, children: r });
+}
+export {
+  u as FormattedNumberString
+};

package/dist/esm/components/formatted-number/index.js

@@ -0,0 +1,4 @@
+import { FormattedNumberString as e } from "./formatted-number.js";
+export {
+  e as FormattedNumberString
+};