@gearbox-protocol/permissionless-ui 1.22.0-next.4 → 1.22.0-next.41

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

@@ -1,43 +1,40 @@
-import { jsx as m } from "react/jsx-runtime";
-import * as p from "react";
-import { cn as f } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk";
-const l = "https://static.gearbox.fi", h = p.forwardRef(
+import { jsx as p } from "react/jsx-runtime";
+import * as f from "react";
+import { RoundedImage as l } from "../rounded-image/rounded-image.js";
+import { buildStaticUrl as d } from "../../utils/static.js";
+const g = f.forwardRef(
   ({
-    reward: o,
-    size: t = 24,
-    staticBaseUrl: i = l,
-    rounded: r = !1,
-    className: n,
-    style: s,
-    ...a
-  }, c) => {
-    const e = `${i}/points/${o.type.toLowerCase()}.svg`;
-    return (
-      // biome-ignore lint/performance/noImgElement: External SVG icons from CDN
-      /* @__PURE__ */ m(
-        "img",
-        {
-          ref: c,
-          src: e,
-          alt: o.name,
-          width: t,
-          height: t,
-          className: f(r && "rounded-full", n),
-          style: {
-            width: t,
-            height: t,
-            objectFit: "contain",
-            ...s
-          },
-          ...a
-        }
-      )
+    reward: t,
+    size: o = 24,
+    staticBaseUrl: r,
+    rounded: n = !1,
+    className: i,
+    style: a,
+    fit: m = "contain",
+    ...e
+  }, s) => {
+    const c = d(r)(
+      `/points/${t.type.toLowerCase()}.svg`
+    );
+    return /* @__PURE__ */ p(
+      l,
+      {
+        className: i,
+        ref: s,
+        src: c,
+        width: o,
+        height: o,
+        size: o,
+        rounded: n,
+        fit: m,
+        alt: t.name,
+        style: a,
+        ...e
+      }
     );
   }
 );
-h.displayName = "PointsIcon";
+g.displayName = "PointsIcon";
 export {
-  h as PointsIcon
+  g as PointsIcon
 };

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

@@ -1,83 +1,110 @@
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { TooltipProvider as f, Tooltip as v, TooltipTrigger as y, TooltipContent as g } from "../tooltip/tooltip.js";
-function w({
-  children: o,
-  totalAPY: s,
-  extraAPYTotal: i,
-  loading7DAgo: c,
-  loading: h,
-  baseAPY: d,
-  extraAPY: a,
-  apy7DAgo: l,
+import { jsx as a, jsxs as e } from "react/jsx-runtime";
+import "../tooltip/simple-tooltip.js";
+import { TooltipProvider as y, Tooltip as g, TooltipTrigger as N, TooltipContent as b } from "../tooltip/tooltip.js";
+function $({
+  children: c,
+  totalAPY: r,
+  extraAPYTotal: m,
+  loading7DAgo: u,
+  loading: x,
+  baseAPY: l,
+  extraAPY: t,
+  points: s,
+  apy7DAgo: i,
+  externalAPY: o,
   tokensList: p,
-  className: u
+  className: h
 }) {
-  if (!(s !== void 0 || d?.length || a?.length) || h)
-    return /* @__PURE__ */ t("span", { className: u, children: o });
-  const m = typeof l == "object" ? l?.value : l;
-  return /* @__PURE__ */ t(f, { children: /* @__PURE__ */ n(v, { children: [
-    /* @__PURE__ */ t(y, { asChild: !0, children: /* @__PURE__ */ t("span", { className: u, children: o }) }),
-    /* @__PURE__ */ t(g, { className: "max-w-xs", children: /* @__PURE__ */ n("div", { className: "space-y-2 text-sm", children: [
-      d && d.length > 0 && /* @__PURE__ */ n("div", { children: [
-        /* @__PURE__ */ t("div", { className: "font-medium text-muted-foreground mb-1", children: "Base APY" }),
-        d.map((e, r) => /* @__PURE__ */ n(
+  if (!(r !== void 0 || l?.length || t?.length || s?.length) || x)
+    return /* @__PURE__ */ a("span", { className: h, children: c });
+  const f = typeof i == "object" ? i?.value : i;
+  return /* @__PURE__ */ a(y, { children: /* @__PURE__ */ e(g, { children: [
+    /* @__PURE__ */ a(N, { asChild: !0, children: /* @__PURE__ */ a("span", { className: h, children: c }) }),
+    /* @__PURE__ */ a(b, { className: "max-w-xs", children: /* @__PURE__ */ e("div", { className: "space-y-2 text-sm", children: [
+      l && l.length > 0 && /* @__PURE__ */ e("div", { children: [
+        /* @__PURE__ */ a("div", { className: "font-medium text-muted-foreground mb-1", children: "Base APY" }),
+        l.map((n, d) => /* @__PURE__ */ e(
           "div",
           {
             className: "flex justify-between gap-4",
             children: [
-              /* @__PURE__ */ t("span", { children: e.type === "supplyAPY" ? "Supply" : e.type || "Base" }),
-              /* @__PURE__ */ n("span", { className: "tabular-nums", children: [
-                e.apy.toFixed(2),
+              /* @__PURE__ */ a("span", { children: n.type === "supplyAPY" ? "Supply" : n.type || "Base" }),
+              /* @__PURE__ */ e("span", { className: "tabular-nums", children: [
+                n.apy.toFixed(2),
                 "%"
               ] })
             ]
           },
-          `base-${e.type || r}-${e.apy}`
+          `base-${n.type || d}-${n.apy}`
         ))
       ] }),
-      a && a.length > 0 && /* @__PURE__ */ n("div", { children: [
-        /* @__PURE__ */ t("div", { className: "font-medium text-muted-foreground mb-1", children: "Rewards" }),
-        a.map((e, r) => {
-          const x = e.token && p ? p[e.token]?.symbol : e.token;
-          return /* @__PURE__ */ n(
+      t && t.length > 0 && /* @__PURE__ */ e("div", { children: [
+        /* @__PURE__ */ a("div", { className: "font-medium text-muted-foreground mb-1", children: "Rewards" }),
+        t.map((n, d) => {
+          const v = n.token && p ? p[n.token]?.symbol : n.token;
+          return /* @__PURE__ */ e(
             "div",
             {
               className: "flex justify-between gap-4",
               children: [
-                /* @__PURE__ */ t("span", { children: x || e.type || "Reward" }),
-                /* @__PURE__ */ n("span", { className: "tabular-nums", children: [
-                  e.apy.toFixed(2),
+                /* @__PURE__ */ a("span", { children: v || n.type || "Reward" }),
+                /* @__PURE__ */ e("span", { className: "tabular-nums", children: [
+                  n.apy.toFixed(2),
                   "%"
                 ] })
               ]
             },
-            `extra-${e.token || r}-${e.apy}`
+            `extra-${n.token || d}-${n.apy}`
           );
         }),
-        i !== void 0 && /* @__PURE__ */ n("div", { className: "flex justify-between gap-4 text-muted-foreground", children: [
-          /* @__PURE__ */ t("span", { children: "Total Extra" }),
-          /* @__PURE__ */ n("span", { className: "tabular-nums", children: [
-            i.toFixed(2),
+        m !== void 0 && /* @__PURE__ */ e("div", { className: "flex justify-between gap-4 text-muted-foreground", children: [
+          /* @__PURE__ */ a("span", { children: "Total Extra" }),
+          /* @__PURE__ */ e("span", { className: "tabular-nums", children: [
+            m.toFixed(2),
             "%"
           ] })
         ] })
       ] }),
-      s !== void 0 && /* @__PURE__ */ n("div", { className: "border-t pt-2 flex justify-between gap-4 font-medium", children: [
-        /* @__PURE__ */ t("span", { children: "Total APY" }),
-        /* @__PURE__ */ n("span", { className: "tabular-nums", children: [
-          s.toFixed(2),
+      o && /* @__PURE__ */ e("div", { children: [
+        /* @__PURE__ */ a("div", { className: "font-medium text-muted-foreground mb-1", children: "External" }),
+        /* @__PURE__ */ e("div", { className: "flex justify-between gap-4", children: [
+          /* @__PURE__ */ a("span", { children: o.name }),
+          /* @__PURE__ */ e("span", { className: "tabular-nums", children: [
+            o.apy.toFixed(2),
+            "%"
+          ] })
+        ] })
+      ] }),
+      s && s.length > 0 && /* @__PURE__ */ e("div", { children: [
+        /* @__PURE__ */ a("div", { className: "font-medium text-muted-foreground mb-1", children: "Points" }),
+        s.map((n, d) => /* @__PURE__ */ e(
+          "div",
+          {
+            className: "flex justify-between gap-4",
+            children: [
+              /* @__PURE__ */ a("span", { children: n.name }),
+              /* @__PURE__ */ a("span", { className: "tabular-nums", children: n.amount })
+            ]
+          },
+          `point-${n.name}-${d}`
+        ))
+      ] }),
+      r !== void 0 && /* @__PURE__ */ e("div", { className: "border-t pt-2 flex justify-between gap-4 font-medium", children: [
+        /* @__PURE__ */ a("span", { children: "Total APY" }),
+        /* @__PURE__ */ e("span", { className: "tabular-nums", children: [
+          r.toFixed(2),
           "%"
         ] })
       ] }),
-      m !== void 0 && !c && /* @__PURE__ */ n("div", { className: "text-xs text-muted-foreground", children: [
+      f !== void 0 && !u && /* @__PURE__ */ e("div", { className: "text-xs text-muted-foreground", children: [
         "7d ago: ",
-        m.toFixed(2),
+        f.toFixed(2),
         "%"
       ] }),
-      c && /* @__PURE__ */ t("div", { className: "text-xs text-muted-foreground", children: "Loading 7d data..." })
+      u && /* @__PURE__ */ a("div", { className: "text-xs text-muted-foreground", children: "Loading 7d data..." })
     ] }) })
   ] }) });
 }
 export {
-  w as PoolAPYTooltip
+  $ as PoolAPYTooltip
 };

package/dist/esm/components/pool-indicator-icon/pool-indicator-icon.js

@@ -1,8 +1,8 @@
 import { jsx as e } from "react/jsx-runtime";
 import "react";
+import "@gearbox-protocol/sdk";
 import { cn as i } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
 function f({
   children: o,
   size: t = 24,

package/dist/esm/components/pool-points-indicator/pool-points-indicator.js

@@ -1,8 +1,8 @@
 import { jsxs as i, jsx as r } from "react/jsx-runtime";
 import "react";
+import "@gearbox-protocol/sdk";
 import { cn as o } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
 const a = {
   primary: "border-primary bg-primary",
   secondary: "border-secondary bg-secondary",

package/dist/esm/components/progress/progress.js

@@ -1,9 +1,9 @@
 import { jsxs as t, jsx as l } from "react/jsx-runtime";
 import * as e from "@radix-ui/react-progress";
 import * as u from "react";
+import "@gearbox-protocol/sdk";
 import { cn as s } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
 const g = u.forwardRef(
   ({
     className: o,

package/dist/esm/components/progress-circle/progress-circle.js

@@ -1,8 +1,8 @@
 import { jsxs as o, jsx as a } from "react/jsx-runtime";
 import "react";
+import "@gearbox-protocol/sdk";
 import { cn as p } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
 function j({
   value: l,
   size: e = 40,

package/dist/esm/components/radio-group/radio-group.js

@@ -1,11 +1,12 @@
-import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { jsx as e, jsxs as m } from "react/jsx-runtime";
 import * as a from "@radix-ui/react-radio-group";
-import { Circle as p } from "lucide-react";
 import * as t from "react";
+import { faCircle as p } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as f } from "../icons/fa-icon.js";
+import "@gearbox-protocol/sdk";
 import { cn as s } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
-const f = t.forwardRef(({ className: r, ...i }, o) => /* @__PURE__ */ e(
+const u = t.forwardRef(({ className: r, ...i }, o) => /* @__PURE__ */ e(
   a.Root,
   {
     className: s("grid gap-2", r),
@@ -13,8 +14,8 @@ const f = t.forwardRef(({ className: r, ...i }, o) => /* @__PURE__ */ e(
     ref: o
   }
 ));
-f.displayName = a.Root.displayName;
-const m = t.forwardRef(({ className: r, ...i }, o) => /* @__PURE__ */ e(
+u.displayName = a.Root.displayName;
+const l = t.forwardRef(({ className: r, ...i }, o) => /* @__PURE__ */ e(
   a.Item,
   {
     ref: o,
@@ -23,13 +24,19 @@ const m = t.forwardRef(({ className: r, ...i }, o) => /* @__PURE__ */ e(
       r
     ),
     ...i,
-    children: /* @__PURE__ */ e(a.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ e(p, { className: "h-2.5 w-2.5 fill-primary text-primary" }) })
+    children: /* @__PURE__ */ e(a.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ e(
+      f,
+      {
+        icon: p,
+        className: "size-2.5 fill-primary text-primary"
+      }
+    ) })
   }
 ));
-m.displayName = a.Item.displayName;
-const u = t.forwardRef(({ value: r, label: i, description: o, disabled: d, ...n }, c) => /* @__PURE__ */ l("div", { className: "flex items-start space-x-3", children: [
+l.displayName = a.Item.displayName;
+const y = t.forwardRef(({ value: r, label: i, description: o, disabled: d, ...n }, c) => /* @__PURE__ */ m("div", { className: "flex items-start space-x-3", children: [
   /* @__PURE__ */ e(
-    m,
+    l,
     {
       ref: c,
       value: r,
@@ -38,7 +45,7 @@ const u = t.forwardRef(({ value: r, label: i, description: o, disabled: d, ...n
       ...n
     }
   ),
-  /* @__PURE__ */ l("div", { className: "grid gap-1.5 leading-none", children: [
+  /* @__PURE__ */ m("div", { className: "grid gap-1.5 leading-none", children: [
     /* @__PURE__ */ e(
       "label",
       {
@@ -53,9 +60,9 @@ const u = t.forwardRef(({ value: r, label: i, description: o, disabled: d, ...n
     o && /* @__PURE__ */ e("p", { className: "text-sm text-muted-foreground", children: o })
   ] })
 ] }));
-u.displayName = "RadioOption";
+y.displayName = "RadioOption";
 export {
-  f as RadioGroup,
-  m as RadioGroupItem,
-  u as RadioOption
+  u as RadioGroup,
+  l as RadioGroupItem,
+  y as RadioOption
 };

package/dist/esm/components/rounded-image/rounded-image.js

@@ -1,32 +1,64 @@
-import { jsx as e } from "react/jsx-runtime";
-import "react";
-import { cn as i } from "../../utils/cn.js";
-import "sonner";
+import { jsx as L } from "react/jsx-runtime";
+import * as b from "react";
+import { useState as s, useRef as E, useEffect as j } from "react";
 import "@gearbox-protocol/sdk";
-function p({
-  className: t,
-  size: o,
-  style: r,
-  ...m
-}) {
-  return (
-    // biome-ignore lint/performance/noImgElement: Universal component that works outside Next.js
-    /* @__PURE__ */ e(
-      "img",
-      {
-        alt: "",
-        className: i("rounded-full object-cover", t),
-        style: {
-          ...o ? { width: o, height: o } : {},
-          ...r
-        },
-        loading: "lazy",
-        decoding: "async",
-        ...m
-      }
-    )
-  );
+import { cn as k } from "../../utils/cn.js";
+import "sonner";
+import { getStatic as w } from "../../utils/static.js";
+const c = w("/tokens/default.svg"), f = /* @__PURE__ */ new Map();
+function d(e) {
+  return f.get(e) ? c : e;
 }
+const N = b.forwardRef(
+  ({
+    className: e,
+    size: o,
+    rounded: i = !0,
+    style: l,
+    src: r,
+    defaultIcon: u = c,
+    fit: m = "cover",
+    ...g
+  }, p) => {
+    const [h, a] = s(void 0), [v, n] = s(!1), t = E(!1);
+    j(() => {
+      d(r), a(void 0), n(!1), t.current = !1;
+    }, [r]);
+    const y = (I) => {
+      t.current || (t.current = !0, f.set(I.currentTarget.src, !0), a(u));
+    }, R = () => {
+      n(!0);
+    };
+    return (
+      // biome-ignore lint/performance/noImgElement: Universal component that works outside Next.js
+      /* @__PURE__ */ L(
+        "img",
+        {
+          ref: p,
+          src: h || d(r),
+          alt: "",
+          className: k(
+            m === "cover" ? "object-cover" : "object-contain",
+            i && "rounded-full",
+            !v && "bg-gray-90 dark:bg-gray-110 rounded-full",
+            e
+          ),
+          style: {
+            width: o,
+            height: o,
+            ...l
+          },
+          loading: "lazy",
+          decoding: "async",
+          onError: y,
+          onLoad: R,
+          ...g
+        }
+      )
+    );
+  }
+);
+N.displayName = "RoundedImage";
 export {
-  p as RoundedImage
+  N as RoundedImage
 };

package/dist/esm/components/row/row.js

@@ -1,8 +1,8 @@
 import { jsx as w } from "react/jsx-runtime";
 import "react";
+import "@gearbox-protocol/sdk";
 import { cn as b } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
 const v = {
   "flex-start": "items-start",
   "flex-end": "items-end",

package/dist/esm/components/search-bar/search-bar.js

@@ -1,12 +1,13 @@
-import { jsx as e, jsxs as b } from "react/jsx-runtime";
+import { jsx as e, jsxs as y } from "react/jsx-runtime";
 import { cva as i } from "class-variance-authority";
-import { Search as y } from "lucide-react";
 import { useState as n } from "react";
-import { Input as w } from "../input/input.js";
+import { faMagnifyingGlass as b } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as w } from "../icons/fa-icon.js";
+import { Input as V } from "../input/input.js";
+import "@gearbox-protocol/sdk";
 import { cn as l } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
-const S = i("relative w-full transition-all duration-200", {
+const B = i("relative w-full transition-all duration-200", {
   variants: {
     size: {
       sm: "max-w-xs",
@@ -18,7 +19,7 @@ const S = i("relative w-full transition-all duration-200", {
   defaultVariants: {
     size: "default"
   }
-}), V = i("transition-all duration-200 pl-10", {
+}), I = i("transition-all duration-200 pl-10", {
   variants: {
     active: {
       true: "",
@@ -56,40 +57,40 @@ const S = i("relative w-full transition-all duration-200", {
     theme: "light"
   }
 });
-function q({
+function M({
   onChange: c,
   placeholder: u = "Search...",
   className: m,
-  size: d,
-  theme: f = "light",
+  size: f,
+  theme: d = "light",
   value: t
 }) {
-  const [h, g] = n(""), [p, a] = n(!1), r = t !== void 0, s = r ? t : h, v = s !== "" || p, x = (N) => {
-    const o = N.target.value;
-    r || g(o), c(o);
+  const [h, g] = n(""), [p, a] = n(!1), r = t !== void 0, o = r ? t : h, v = o !== "" || p, x = (N) => {
+    const s = N.target.value;
+    r || g(s), c(s);
   };
-  return /* @__PURE__ */ e("div", { className: l(S({ size: d }), m), children: /* @__PURE__ */ b("div", { className: "relative", children: [
+  return /* @__PURE__ */ e("div", { className: l(B({ size: f }), m), children: /* @__PURE__ */ y("div", { className: "relative", children: [
     /* @__PURE__ */ e(
-      y,
+      w,
       {
-        className: "absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground pointer-events-none",
-        size: 18
+        icon: b,
+        className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none size-[18px]"
       }
     ),
     /* @__PURE__ */ e(
-      w,
+      V,
       {
         type: "search",
         placeholder: u,
-        value: s,
+        value: o,
         onChange: x,
         onFocus: () => a(!0),
         onBlur: () => a(!1),
-        className: l(V({ active: v, theme: f }))
+        className: l(I({ active: v, theme: d }))
       }
     )
   ] }) });
 }
 export {
-  q as SearchBar
+  M as SearchBar
 };