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

package/dist/esm/components/legal-agreement/legal-agreement-dialog.js

@@ -1,40 +1,48 @@
 import { jsx as t, jsxs as a, Fragment as l } from "react/jsx-runtime";
-import { AlertTriangle as b, ExternalLink as A, Loader2 as N } from "lucide-react";
-import * as P from "react";
-import { useState as B } from "react";
-import { AlertDialog as u, AlertDialogContent as f, AlertDialogHeader as x, AlertDialogTitle as g, AlertDialogDescription as h, AlertDialogFooter as k } from "../alert-dialog/alert-dialog.js";
-import { BaseLink as T } from "../base-link/base-link.js";
+import { IconExternal as A, IconPending as b } from "@gearbox-protocol/static";
+import * as B from "react";
+import { useState as j } from "react";
+import { AlertDialog as u, AlertDialogContent as f, AlertDialogHeader as x, AlertDialogTitle as g, AlertDialogDescription as h, AlertDialogFooter as w } from "../alert-dialog/alert-dialog.js";
+import { BaseLink as k } from "../base-link/base-link.js";
 import { Button as p } from "../buttons/button/button.js";
-import { Checkbox as j } from "../checkbox/checkbox.js";
+import { Checkbox as R } from "../checkbox/checkbox.js";
 import "../checkbox/checkbox-labeled.js";
-function U({
+import { faTriangleExclamation as I } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as T } from "../icons/fa-icon.js";
+function $({
   open: r,
   onClose: e,
   onSign: n,
   isSigning: o,
-  hasV2Signature: d = !1,
-  isAwaitingSignature: I = !1,
+  hasV2Signature: m = !1,
+  isAwaitingSignature: S = !1,
   config: c
 }) {
-  const [w, y] = B({}), S = c.checkboxItems.every((s) => w[s.id]), C = (s) => {
-    y((m) => ({ ...m, [s]: !m[s] }));
-  }, D = async () => {
+  const [y, N] = j({}), C = c.checkboxItems.every((s) => y[s.id]), D = (s) => {
+    N((d) => ({ ...d, [s]: !d[s] }));
+  }, P = async () => {
     await n();
   };
-  return P.useEffect(() => {
-    r || y({});
-  }, [r]), I ? /* @__PURE__ */ t(u, { open: r, children: /* @__PURE__ */ a(f, { className: "max-w-2xl w-[calc(100%-2rem)] sm:w-full", children: [
+  return B.useEffect(() => {
+    r || N({});
+  }, [r]), S ? /* @__PURE__ */ t(u, { open: r, children: /* @__PURE__ */ a(f, { className: "max-w-2xl w-[calc(100%-2rem)] sm:w-full", children: [
     /* @__PURE__ */ t(x, { children: /* @__PURE__ */ a(g, { className: "flex items-center justify-center gap-2", children: [
-      /* @__PURE__ */ t(N, { className: "h-5 w-5 animate-spin" }),
+      /* @__PURE__ */ t(b, { size: 20, className: "animate-spin" }),
       "Waiting for Signature"
     ] }) }),
     /* @__PURE__ */ t(h, { className: "text-center", children: c.waitingForSignatureText || "Please sign the message in your wallet to agree to the Terms of Service." })
   ] }) }) : /* @__PURE__ */ t(u, { open: r, children: /* @__PURE__ */ a(f, { className: "max-w-2xl max-h-[90vh] overflow-y-auto w-[calc(100%-2rem)] sm:w-full", children: [
-    /* @__PURE__ */ t(x, { children: /* @__PURE__ */ t(g, { className: "text-center text-xl", children: d ? c.updatedTitle || "Terms of Service Updated" : c.title || "Legal Agreement" }) }),
+    /* @__PURE__ */ t(x, { children: /* @__PURE__ */ t(g, { className: "text-center text-xl", children: m ? c.updatedTitle || "Terms of Service Updated" : c.title || "Legal Agreement" }) }),
     /* @__PURE__ */ a("div", { className: "space-y-4", children: [
       /* @__PURE__ */ t("div", { className: "text-center leading-relaxed text-base", children: c.notificationText }),
-      d && /* @__PURE__ */ a("div", { className: "flex items-start gap-2 rounded-lg border border-yellow-500/50 bg-yellow-500/10 p-3", children: [
-        /* @__PURE__ */ t(b, { className: "h-5 w-5 text-yellow-500 shrink-0 mt-0.5" }),
+      m && /* @__PURE__ */ a("div", { className: "flex items-start gap-2 rounded-lg border border-yellow-500/50 bg-yellow-500/10 p-3", children: [
+        /* @__PURE__ */ t(
+          T,
+          {
+            icon: I,
+            className: "size-5 text-yellow-500 shrink-0 mt-0.5"
+          }
+        ),
         /* @__PURE__ */ a("p", { className: "text-sm text-yellow-500", children: [
           "Our Terms of Service have been updated. Please review and sign the new agreement to continue using ",
           c.productName,
@@ -42,19 +50,19 @@ function U({
         ] })
       ] }),
       /* @__PURE__ */ t("div", { className: "space-y-4", children: c.checkboxItems.map((s) => {
-        const m = `legal-checkbox-${s.id}`;
+        const d = `legal-checkbox-${s.id}`;
         return /* @__PURE__ */ a(
           "label",
           {
-            htmlFor: m,
+            htmlFor: d,
             className: "flex items-start gap-3 cursor-pointer group",
             children: [
               /* @__PURE__ */ t(
-                j,
+                R,
                 {
-                  id: m,
-                  checked: w[s.id] || !1,
-                  onCheckedChange: () => C(s.id),
+                  id: d,
+                  checked: y[s.id] || !1,
+                  onCheckedChange: () => D(s.id),
                   className: "mt-1"
                 }
               ),
@@ -65,7 +73,7 @@ function U({
         );
       }) })
     ] }),
-    /* @__PURE__ */ a(k, { className: "flex-row gap-3 sm:justify-center mt-6", children: [
+    /* @__PURE__ */ a(w, { className: "flex-row gap-3 sm:justify-center mt-6", children: [
       /* @__PURE__ */ t(
         p,
         {
@@ -79,11 +87,11 @@ function U({
       /* @__PURE__ */ t(
         p,
         {
-          onClick: D,
-          disabled: !S || o,
+          onClick: P,
+          disabled: !C || o,
           className: "flex-1 sm:flex-none sm:min-w-[140px]",
           children: o ? /* @__PURE__ */ a(l, { children: [
-            /* @__PURE__ */ t(N, { className: "mr-2 h-4 w-4 animate-spin" }),
+            /* @__PURE__ */ t(b, { size: 16, className: "mr-2 animate-spin" }),
             "Signing..."
           ] }) : c.agreeButtonText || "Agree & Connect"
         }
@@ -93,7 +101,7 @@ function U({
 }
 function i(r, e) {
   return /* @__PURE__ */ t(
-    T,
+    k,
     {
       href: r,
       external: !0,
@@ -116,7 +124,7 @@ function v(r, e, n) {
       i(e.riskDisclosure, "Risk Disclosure Statement"),
       " and I voluntarily assume all risks described in it."
     ] })
-  }, d = /* @__PURE__ */ a(l, { children: [
+  }, m = /* @__PURE__ */ a(l, { children: [
     "Any use of and/or interaction with the ",
     r,
     " is subject to the",
@@ -132,12 +140,12 @@ function v(r, e, n) {
   ] });
   return r === "Permissionless Interface" ? {
     productName: r,
-    notificationText: d,
+    notificationText: m,
     checkboxItems: [o],
     agreeButtonText: n?.agreeButtonText
   } : r === "Permissionless Safe" ? {
     productName: r,
-    notificationText: d,
+    notificationText: m,
     checkboxItems: [o],
     agreeButtonText: n?.agreeButtonText
   } : {
@@ -189,23 +197,23 @@ function v(r, e, n) {
     agreeButtonText: n?.agreeButtonText
   };
 }
-function Y(r, e) {
+function q(r, e) {
   return v("Permissionless Interface", r, e);
 }
-function $(r, e) {
+function J(r, e) {
   return v("Permissionless Safe", r, e);
 }
-function q(r, e) {
+function K(r, e) {
   return v("Gearbox App", r, e);
 }
-function z({
+function M({
   open: r,
   onClose: e,
   termsOfServiceLink: n
 }) {
   return /* @__PURE__ */ t(u, { open: r, children: /* @__PURE__ */ a(f, { className: "max-w-lg", children: [
     /* @__PURE__ */ t(x, { children: /* @__PURE__ */ a(g, { className: "flex items-center justify-center gap-2 text-destructive", children: [
-      /* @__PURE__ */ t(b, { className: "h-5 w-5" }),
+      /* @__PURE__ */ t(T, { icon: I, className: "size-5" }),
       "Access Restricted"
     ] }) }),
     /* @__PURE__ */ a("div", { className: "space-y-4", children: [
@@ -215,28 +223,28 @@ function z({
         "This restriction applies to your use of the web application. For more details, please review the",
         " ",
         /* @__PURE__ */ a(
-          T,
+          k,
           {
             href: n,
             external: !0,
             className: "text-primary underline hover:text-primary/80 inline-flex items-center gap-1",
             children: [
               "Terms of Service",
-              /* @__PURE__ */ t(A, { className: "h-3 w-3" })
+              /* @__PURE__ */ t(A, { size: 12, className: "size-3" })
             ]
           }
         ),
         "."
       ] })
     ] }),
-    /* @__PURE__ */ t(k, { className: "sm:justify-center mt-4", children: /* @__PURE__ */ t(p, { variant: "outline", onClick: e, children: "Close" }) })
+    /* @__PURE__ */ t(w, { className: "sm:justify-center mt-4", children: /* @__PURE__ */ t(p, { variant: "outline", onClick: e, children: "Close" }) })
   ] }) });
 }
 export {
-  z as BlockedRegionDialog,
-  U as LegalAgreementDialog,
-  q as createGearboxAppConfig,
+  M as BlockedRegionDialog,
+  $ as LegalAgreementDialog,
+  K as createGearboxAppConfig,
   v as createLegalAgreementConfig,
-  Y as createPermissionlessInterfaceConfig,
-  $ as createPermissionlessSafeConfig
+  q as createPermissionlessInterfaceConfig,
+  J as createPermissionlessSafeConfig
 };

package/dist/esm/components/loader-guard/loader-guard.js

@@ -3,8 +3,8 @@ import { Guard as t } from "../guard/guard.js";
 import "clsx";
 import "tailwind-merge";
 import "react";
-import "sonner";
 import "@gearbox-protocol/sdk";
+import "sonner";
 import "../layout/col/col.js";
 import { Container as p } from "../layout/container/container.js";
 import "../layout/footer/footer.js";

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

@@ -4,8 +4,8 @@ import x from "react-markdown";
 import g from "remark-gfm";
 import "clsx";
 import "tailwind-merge";
-import "sonner";
 import "@gearbox-protocol/sdk";
+import "sonner";
 import "../layout/col/col.js";
 import "../layout/container/container.js";
 import "../layout/footer/footer.js";

package/dist/esm/components/modal/index.js

@@ -0,0 +1,4 @@
+import { Modal as a } from "./modal.js";
+export {
+  a as Modal
+};

package/dist/esm/components/modal/modal.js

@@ -0,0 +1,108 @@
+import { jsx as a, jsxs as s } from "react/jsx-runtime";
+import * as r from "@radix-ui/react-dialog";
+import { cva as C } from "class-variance-authority";
+import * as i from "react";
+import "@gearbox-protocol/sdk";
+import { cn as o } from "../../utils/cn.js";
+import "sonner";
+import { Z_INDEX as c } from "../../utils/z-index.js";
+const f = "gb-modal-open";
+let n = 0;
+const m = "before:content-[''] before:absolute before:inset-0 after:z-[-1] before:opacity-40", v = C("", {
+  variants: {
+    colorTheme: {
+      default: "bg-black/30",
+      dark: "bg-black",
+      "dark-transparent": "bg-black/85"
+    },
+    backdrop: {
+      success: `${m} before:bg-[linear-gradient(180deg,rgba(146,255,176,0.85)_0%,rgba(146,255,176,0)_50%)]`,
+      failure: `${m} before:bg-[linear-gradient(180deg,rgba(255,61,64,0.85)_0%,rgba(255,61,64,0)_50%)]`,
+      default: ""
+    }
+  },
+  defaultVariants: {
+    colorTheme: "default",
+    backdrop: "default"
+  }
+}), _ = i.forwardRef(
+  ({
+    show: t = !0,
+    colorTheme: u = "default",
+    backdrop: b = "default",
+    onClickOutside: d,
+    className: p,
+    children: g,
+    ...h
+  }, y) => {
+    i.useEffect(() => {
+      if (!(typeof document > "u") && t)
+        return n += 1, document.body.classList.add(f), () => {
+          n = Math.max(0, n - 1), n === 0 && document.body.classList.remove(f);
+        };
+    }, [t]);
+    const l = i.useCallback(
+      (e) => {
+        e || d?.();
+      },
+      [d]
+    );
+    return t ? /* @__PURE__ */ a(r.Root, { open: t, onOpenChange: l, modal: !0, children: /* @__PURE__ */ s(r.Portal, { children: [
+      /* @__PURE__ */ a(
+        r.Overlay,
+        {
+          className: o(
+            "fixed inset-0",
+            "pointer-events-auto",
+            c.MODAL,
+            v({ colorTheme: u, backdrop: b })
+          )
+        }
+      ),
+      /* @__PURE__ */ a(
+        r.Content,
+        {
+          className: o("fixed inset-0", "overflow-y-auto", c.MODAL),
+          onClick: (e) => {
+            e.target === e.currentTarget && l(!1);
+          },
+          children: /* @__PURE__ */ a(
+            "div",
+            {
+              className: o(
+                "min-h-full",
+                "flex flex-col justify-center items-center",
+                "animate-[modalContentShow_225ms_cubic-bezier(0.4,0,0.2,1)]"
+              ),
+              role: "presentation",
+              onClick: (e) => {
+                e.target === e.currentTarget && l(!1);
+              },
+              children: /* @__PURE__ */ s(
+                "div",
+                {
+                  ref: y,
+                  className: o(
+                    "relative",
+                    "w-full sm:w-auto",
+                    "m-auto py-0 px-0 sm:py-5",
+                    p
+                  ),
+                  ...h,
+                  children: [
+                    /* @__PURE__ */ a(r.Title, { className: "sr-only", children: "Modal Window" }),
+                    g
+                  ]
+                }
+              )
+            }
+          )
+        }
+      )
+    ] }) }) : null;
+  }
+);
+_.displayName = "Modal";
+export {
+  _ as Modal
+};

package/dist/esm/components/navbar/navbar.js

@@ -1,9 +1,9 @@
 import { jsx as r, jsxs as d } from "react/jsx-runtime";
 import { cva as m } from "class-variance-authority";
 import * as s from "react";
+import "@gearbox-protocol/sdk";
 import { cn as n } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
 import { NavbarIndicatorProvider as v, useNavbarIndicator as p } from "./navbar-indicator-context.js";
 const u = m("flex items-center bg-background", {
   variants: {

package/dist/esm/components/navbar-logo/navbar-logo.js

@@ -1,8 +1,8 @@
 import { jsx as a } from "react/jsx-runtime";
 import "react";
+import "@gearbox-protocol/sdk";
 import { cn as m } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
 function s({
   size: o,
   className: t,

package/dist/esm/components/navitem/navitem.js

@@ -3,9 +3,9 @@ import { Slot as x } from "@radix-ui/react-slot";
 import { cva as h } from "class-variance-authority";
 import * as t from "react";
 import { useNavbarIndicator as y } from "../navbar/navbar-indicator-context.js";
+import "@gearbox-protocol/sdk";
 import { cn as k } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
 const I = h(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all cursor-pointer focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50 relative",
   {

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

@@ -1,48 +1,48 @@
-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`;
-  return d.has(e) ? o : e;
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { RoundedImage as g } from "../rounded-image/rounded-image.js";
+import { SimpleTooltip as d } from "../tooltip/simple-tooltip.js";
+import { cn as f } from "../../utils/cn.js";
+import { getStatic as n } from "../../utils/static.js";
+const s = n("/chains/allnetworks.svg");
+function u(t) {
+  return t ? n(`/chains/${t.toLowerCase()}.svg`) : s;
 }
-function N({
+function j({
   network: t,
-  size: r = 20,
-  className: e
+  size: c = 20,
+  isTest: a,
+  suffixSize: e = 12,
+  showTooltip: l,
+  rounded: m,
+  className: h
 }) {
-  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 g = () => {
-    n.current || (n.current = !0, d.add(s), c(o));
-  }, m = () => {
-    a(!0);
-  };
-  return (
-    // biome-ignore lint/performance/noImgElement: Simple img for CDN icons with browser caching
-    /* @__PURE__ */ E(
+  const p = u(t), o = /* @__PURE__ */ i("span", { className: f("relative inline-flex shrink-0", h), children: [
+    /* @__PURE__ */ r(
+      g,
+      {
+        src: p,
+        size: c,
+        rounded: m ?? !1,
+        defaultIcon: s,
+        fit: "contain"
+      }
+    ),
+    a && /* @__PURE__ */ r("span", { className: "absolute -top-1.5 -right-0.5", children: /* @__PURE__ */ r(
       "img",
       {
-        src: s,
-        alt: "",
-        width: r,
-        height: r,
-        className: w(
-          "object-contain shrink-0",
-          !h && "bg-gray-200 dark:bg-gray-700 rounded-full",
-          e
-        ),
-        style: { width: r, height: r },
-        onError: g,
-        onLoad: m
+        src: n("/chains/test.svg"),
+        alt: "test",
+        width: e,
+        height: e,
+        style: { width: e, height: e }
       }
-    )
-  );
+    ) })
+  ] });
+  return l ? /* @__PURE__ */ i(d, { title: o, placement: "top", triangle: !1, children: [
+    "Network: ",
+    t
+  ] }) : o;
 }
 export {
-  N as NetworkIcon
+  j as NetworkIcon
 };

package/dist/esm/components/not-found/not-found.js

@@ -1,8 +1,8 @@
 import { jsxs as c, jsx as t } from "react/jsx-runtime";
 import "react";
+import "@gearbox-protocol/sdk";
 import { cn as n } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
 function d({
   icon: e,
   message: r,

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

@@ -1,8 +1,8 @@
 import { jsx as e, jsxs as c } from "react/jsx-runtime";
 import * as n from "react";
+import "@gearbox-protocol/sdk";
 import { cn as m } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
 function g({
   className: r,
   children: o,

package/dist/esm/components/overflow/overflow.js

@@ -1,8 +1,8 @@
 import { jsx as i } from "react/jsx-runtime";
 import "react";
+import "@gearbox-protocol/sdk";
 import { cn as t } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
 function c({ children: r, className: o, ...e }) {
   return /* @__PURE__ */ i("div", { className: t("overflow-hidden", o), ...e, children: r });
 }

package/dist/esm/components/overflow-container/overflow-container.js

@@ -1,8 +1,8 @@
 import { jsx as r } from "react/jsx-runtime";
 import "react";
+import "@gearbox-protocol/sdk";
 import { cn as a } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
 const i = {
   default: "rounded-lg",
   small: "rounded-md"

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

@@ -1,9 +1,9 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
 import { cva as d } from "class-variance-authority";
 import * as u from "react";
+import "@gearbox-protocol/sdk";
 import { cn as r } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
 const v = d(
   "font-semibold leading-tight tracking-tight flex items-center gap-2",
   {

package/dist/esm/components/percent-indicator/percent-indicator.js

@@ -1,8 +1,8 @@
 import { jsx as n } from "react/jsx-runtime";
 import "react";
+import "@gearbox-protocol/sdk";
 import { cn as m } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
 import { percentTemplate as u } from "../../utils/format-money.js";
 function d({
   percent: t,

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
 };