@gearbox-protocol/permissionless-ui 1.22.0-next.1 → 1.22.0-next.10

package/dist/esm/components/layout/app-logo/app-logo.js

@@ -1,11 +1,12 @@
-import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
 import { Image as r } from "../../image/image.js";
 import { cn as o } from "../../../utils/cn.js";
-function d({
-  appName: a,
+import { getStatic as l } from "../../../utils/static.js";
+function p({
+  appName: m,
   size: t = "default"
 }) {
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ a(
     "div",
     {
       className: o(
@@ -16,7 +17,7 @@ function d({
         /* @__PURE__ */ e(
           r,
           {
-            src: "https://static.gearbox.fi/logo/logo_monochrome_white@2x.png",
+            src: l("/logo/logo_monochrome_white@2x.png"),
             alt: "Gearbox Protocol",
             width: t === "default" ? 120 : 100,
             height: t === "default" ? 24 : 20,
@@ -27,11 +28,11 @@ function d({
             )
           }
         ),
-        /* @__PURE__ */ e("span", { className: "text-muted-foreground whitespace-nowrap", children: a })
+        /* @__PURE__ */ e("span", { className: "text-muted-foreground whitespace-nowrap", children: m })
       ]
     }
   );
 }
 export {
-  d as AppLogo
+  p as AppLogo
 };

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

@@ -1,22 +1,23 @@
-import { jsx as E } from "react/jsx-runtime";
-import { useState as i, useRef as L, useEffect as p } from "react";
-import { cn as w } from "../../utils/cn.js";
-const l = "https://static.gearbox.finance", o = `${l}/chains/allnetworks.svg`, d = /* @__PURE__ */ new Set();
-function f(t) {
-  if (!t) return o;
-  const r = t.toLowerCase(), e = `${l}/chains/${r}.svg`;
+import { jsx as S } from "react/jsx-runtime";
+import { useState as i, useRef as p, useEffect as w } from "react";
+import { cn as E } from "../../utils/cn.js";
+import { getStatic as l } from "../../utils/static.js";
+const o = l("/chains/allnetworks.svg"), d = /* @__PURE__ */ new Set();
+function f(r) {
+  if (!r) return o;
+  const t = r.toLowerCase(), e = l(`/chains/${t}.svg`);
   return d.has(e) ? o : e;
 }
-function N({
-  network: t,
-  size: r = 20,
+function C({
+  network: r,
+  size: t = 20,
   className: e
 }) {
-  const u = f(t), [s, c] = i(u), [h, a] = i(!1), n = L(!1);
-  p(() => {
-    const S = f(t);
-    c(S), a(!1), n.current = !1;
-  }, [t]);
+  const u = f(r), [s, c] = i(u), [h, a] = i(!1), n = p(!1);
+  w(() => {
+    const L = f(r);
+    c(L), a(!1), n.current = !1;
+  }, [r]);
   const g = () => {
     n.current || (n.current = !0, d.add(s), c(o));
   }, m = () => {
@@ -24,19 +25,19 @@ function N({
   };
   return (
     // biome-ignore lint/performance/noImgElement: Simple img for CDN icons with browser caching
-    /* @__PURE__ */ E(
+    /* @__PURE__ */ S(
       "img",
       {
         src: s,
         alt: "",
-        width: r,
-        height: r,
-        className: w(
+        width: t,
+        height: t,
+        className: E(
           "object-contain shrink-0",
           !h && "bg-gray-200 dark:bg-gray-700 rounded-full",
           e
         ),
-        style: { width: r, height: r },
+        style: { width: t, height: t },
         onError: g,
         onLoad: m
       }
@@ -44,5 +45,5 @@ function N({
   );
 }
 export {
-  N as NetworkIcon
+  C as NetworkIcon
 };

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

@@ -1,43 +1,38 @@
-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 u = f.forwardRef(
   ({
     reward: o,
     size: t = 24,
-    staticBaseUrl: i = l,
-    rounded: r = !1,
-    className: n,
+    staticBaseUrl: r,
+    rounded: n = !1,
+    className: i,
     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
-        }
-      )
+    fit: a = "contain",
+    ...e
+  }, m) => {
+    const c = d(r)(
+      `/points/${o.type.toLowerCase()}.svg`
+    );
+    return /* @__PURE__ */ p(
+      l,
+      {
+        className: i,
+        ref: m,
+        src: c,
+        size: t,
+        rounded: n,
+        fit: a,
+        alt: o.name,
+        style: s,
+        ...e
+      }
     );
   }
 );
-h.displayName = "PointsIcon";
+u.displayName = "PointsIcon";
 export {
-  h as PointsIcon
+  u as PointsIcon
 };

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

@@ -1,32 +1,63 @@
-import { jsx as e } from "react/jsx-runtime";
-import "react";
-import { cn as i } from "../../utils/cn.js";
+import { jsx as L } from "react/jsx-runtime";
+import b, { useState as d, useRef as E, useEffect as j } from "react";
+import { cn as k } from "../../utils/cn.js";
 import "sonner";
 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 { getStatic as w } from "../../utils/static.js";
+const c = w("/tokens/default.svg"), f = /* @__PURE__ */ new Map();
+function s(e) {
+  return f.get(e) ? c : e;
 }
+const N = b.forwardRef(
+  ({
+    className: e,
+    size: o,
+    rounded: l = !0,
+    style: i,
+    src: r,
+    defaultIcon: u = c,
+    fit: g = "cover",
+    ...m
+  }, p) => {
+    const [h, a] = d(void 0), [v, n] = d(!1), t = E(!1);
+    j(() => {
+      s(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 || s(r),
+          alt: "",
+          className: k(
+            g === "cover" ? "object-cover" : "object-contain",
+            l && "rounded-full",
+            !v && "bg-gray-90 dark:bg-gray-110 rounded-full",
+            e
+          ),
+          style: {
+            width: o,
+            height: o,
+            ...i
+          },
+          loading: "lazy",
+          decoding: "async",
+          onError: y,
+          onLoad: R,
+          ...m
+        }
+      )
+    );
+  }
+);
+N.displayName = "RoundedImage";
 export {
-  p as RoundedImage
+  N as RoundedImage
 };

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

@@ -1,47 +1,48 @@
 import { jsx as p } from "react/jsx-runtime";
-import { useState as s, useRef as h } from "react";
-import { cn as m } from "../../utils/cn.js";
-const a = "https://static.gearbox.fi/tokens/default.svg", i = /* @__PURE__ */ new Set();
-function w(t) {
-  const e = t.replace("/", "").replace(" ", "").replace("-f", "").replace("-", "_").toLowerCase();
-  if (!e) return a;
-  const r = `https://static.gearbox.fi/tokens/${e}.svg`;
-  return i.has(r) ? a : r;
+import { useState as l, useRef as h } from "react";
+import { cn as w } from "../../utils/cn.js";
+import { getStatic as a } from "../../utils/static.js";
+const c = a("/tokens/default.svg"), d = /* @__PURE__ */ new Set();
+function k(o) {
+  const e = o.replace("/", "").replace(" ", "").replace("-f", "").replace("-", "_").toLowerCase();
+  if (!e) return c;
+  const r = a(`/tokens/${e}.svg`);
+  return d.has(r) ? c : r;
 }
-function I({ symbol: t, size: e = 48, className: r }) {
-  const n = w(t), [o, l] = s(n), [f, d] = s(!1), c = h(!1), u = () => {
-    c.current || (c.current = !0, i.add(o), l(a));
-  }, g = () => {
-    d(!0);
+function E({ symbol: o, size: e = 48, className: r }) {
+  const n = k(o), [t, i] = l(n), [f, u] = l(!1), s = h(!1), g = () => {
+    s.current || (s.current = !0, d.add(t), i(c));
+  }, m = () => {
+    u(!0);
   };
   return (
     // biome-ignore lint/performance/noImgElement: Simple img for CDN icons with browser caching
     /* @__PURE__ */ p(
       "img",
       {
-        src: o,
+        src: t,
         alt: "",
         width: e,
         height: e,
-        className: m(
+        className: w(
           "object-contain",
           !f && "bg-gray-200 dark:bg-gray-700 rounded-full",
           r
         ),
         style: { width: e, height: e },
-        onError: u,
-        onLoad: g
+        onError: g,
+        onLoad: m
       }
     )
   );
 }
-function x(t) {
-  t.forEach((e) => {
-    const n = `https://static.gearbox.fi/tokens/${e.replace("/", "").replace(" ", "").replace("-f", "").replace("-", "_").toLowerCase()}.svg`, o = new window.Image();
-    o.src = n;
+function T(o) {
+  o.forEach((e) => {
+    const r = e.replace("/", "").replace(" ", "").replace("-f", "").replace("-", "_").toLowerCase(), n = a(`/tokens/${r}.svg`), t = new window.Image();
+    t.src = n;
   });
 }
 export {
-  I as TokenIcon,
-  x as preloadTokenIcons
+  E as TokenIcon,
+  T as preloadTokenIcons
 };

package/dist/esm/components/vertical-list/vertical-list.js

@@ -1,61 +1,67 @@
 import { jsx as s } from "react/jsx-runtime";
-import { cva as g } from "class-variance-authority";
-import * as a from "react";
-import { cn as i } from "../../utils/cn.js";
+import { cva as u } from "class-variance-authority";
+import * as r from "react";
+import { cn as t } from "../../utils/cn.js";
 import "sonner";
 import "@gearbox-protocol/sdk";
-const u = g("flex flex-col", {
+const c = u("flex flex-col", {
   variants: {
-    gap: {
+    rowGap: {
       xs: "gap-1",
-      sm: "gap-2",
-      default: "gap-3",
-      md: "gap-4",
-      lg: "gap-6"
+      default: "gap-4",
+      md: "gap-6"
     },
     divided: {
       true: "",
       false: ""
+    },
+    nested: {
+      true: t(
+        "relative py-[2px] pr-0 pl-3",
+        "before:content-[''] before:absolute before:top-0 before:left-0 before:block",
+        "before:h-full before:border-l-2 before:border-l-gray-40"
+      ),
+      false: ""
     }
   },
   defaultVariants: {
-    gap: "default",
-    divided: !1
+    rowGap: "default",
+    divided: !1,
+    nested: !1
   }
-}), v = a.forwardRef(
+}), v = r.forwardRef(
   ({
-    className: o,
-    gap: m = "default",
-    divided: r = !1,
-    nested: p = !1,
-    children: f,
-    ...n
-  }, d) => {
-    const t = a.Children.toArray(f).filter(
+    className: f,
+    rowGap: i = "default",
+    divided: a = !1,
+    nested: n = !1,
+    children: p,
+    ...m
+  }, b) => {
+    const o = r.Children.toArray(p).filter(
       (e) => e != null
     );
     return /* @__PURE__ */ s(
       "ul",
       {
-        ref: d,
-        className: i(
-          u({ gap: m, divided: r }),
-          p && "m-0 p-0",
+        ref: b,
+        className: t(
+          c({ rowGap: i, divided: a, nested: n }),
           "list-none",
-          o
+          f
         ),
-        ...n,
-        children: t.map((e, l) => {
-          const c = a.isValidElement(e) && e.key ? e.key : `vertical-list-item-${l}`;
-          return /* @__PURE__ */ s(
+        ...m,
+        children: o.map((e, l) => {
+          const d = r.isValidElement(e) && e.key ? e.key : `vertical-list-item-${l}`;
+          return e != null && /* @__PURE__ */ s(
             "li",
             {
-              className: i(
-                r && l !== t.length - 1 && "pb-3 border-b border-border"
+              className: t(
+                a && l !== o.length - 1 && "pb-3 border-b border-border"
               ),
               children: e
             },
-            c
+            d
           );
         })
       }
@@ -65,5 +71,5 @@ const u = g("flex flex-col", {
 v.displayName = "VerticalList";
 export {
   v as VerticalList,
-  u as verticalListVariants
+  c as verticalListVariants
 };

package/dist/esm/configs/tailwind-preset.js

@@ -1,6 +1,6 @@
 import r from "../_virtual/index.js";
 import a from "tailwindcss-animate";
-const s = {
+const e = {
   darkMode: "class",
   safelist: [
     // Grid columns - dynamically generated in Grid component
@@ -58,6 +58,8 @@ const s = {
           foreground: "hsl(var(--destructive-foreground))"
         },
         success: "hsl(var(--success))",
+        "success-foreground": "hsl(var(--success-foreground))",
+        "success-hover": "hsl(var(--success-hover))",
         warning: "hsl(var(--warning))",
         liquidation: "hsl(var(--liquidation))",
         border: "hsl(var(--border))",
@@ -128,6 +130,6 @@ const s = {
   plugins: [a, r({ nocompatible: !0 })]
 };
 export {
-  s as default,
-  s as preset
+  e as default,
+  e as preset
 };