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

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

@@ -1,82 +1,194 @@
-import { jsx as t, jsxs as c } from "react/jsx-runtime";
-import { useState as b, useEffect as w, useMemo as E } from "react";
-import { TooltipProvider as j, Tooltip as U, TooltipTrigger as D, TooltipContent as y } from "../tooltip/tooltip.js";
-import { cn as u } from "../../utils/cn.js";
-const L = 1e3 * 60 * 10;
-function B({
-  blockByChain: n,
-  explorerAddresses: g,
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useState as h, useEffect as w, useMemo as E } from "react";
+import { SimpleTooltip as j } from "../tooltip/simple-tooltip.js";
+import "../tooltip/tooltip.js";
+import { cn as x } from "../../utils/cn.js";
+import "../accordion/accordion.js";
+import "@gearbox-protocol/static";
+import "@fortawesome/free-solid-svg-icons";
+import "../icons/fa-icon.js";
+import "@gearbox-protocol/sdk";
+import "sonner";
+import "../alert-badge/alert-badge.js";
+import "../alert-dialog/alert-dialog.js";
+import "../asset-line/asset-line.js";
+import "../buttons/back-button/back-button.js";
+import "../buttons/button/button.js";
+import "../buttons/copy-button/copy-button.js";
+import "../buttons/external-button/external-button.js";
+import "../buttons/filter-button/filter-button.js";
+import "../buttons/navigation-button/navigation-button.js";
+import "../buttons/tab-button/tab-button.js";
+import "../token-icon/token-icon.js";
+import "connectkit";
+import "wagmi";
+import "viem/siwe";
+import "../avatar/avatar.js";
+import "../badge/badge.js";
+import "../base-link/base-link.js";
+import "react-router-dom";
+import "../card-grid/card-grid.js";
+import "../cards/card/card.js";
+import "../carousel/carousel.js";
+import "../checkbox/checkbox.js";
+import "../checkbox/checkbox-labeled.js";
+import "../checkbox-item/checkbox-item.js";
+import "../client-adapters/styled-button/styled-button.js";
+import "../client-adapters/styled-dialog-container/styled-dialog-container.js";
+import "../client-adapters/styled-rounded-image/styled-rounded-image.js";
+import "../colored-text/colored-text.js";
+import "../input/input.js";
+import "../text-button/text-button.js";
+import "../with-title/with-title.js";
+import "../description/description.js";
+import "react-intl";
+import "../icon-button/icon-button.js";
+import "../token-symbol/token-symbol.js";
+import "../skeleton/skeleton.js";
+import "../dropdown-menu/dropdown-menu.js";
+import "../dropdown-menu/dropdown-menu-checkbox-item.js";
+import "../dropdown-menu/dropdown-menu-content.js";
+import "../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 "../page-title/page-title.js";
+import "../modal/modal.js";
+import "@radix-ui/react-dialog";
+import "../dialog/dialog-container.js";
+import "../dialog/dialog-content.js";
+import "../dialog/dialog-description.js";
+import "../dialog/dialog-footer.js";
+import "../dialog/dialog-header.js";
+import "../dialog/dialog-title.js";
+import "../dialog/dialog-modal-container.js";
+import "../dialog/dialog-overlay.js";
+import "viem";
+import "../label/label.js";
+import "../edit-input/edit-input.js";
+import "../fadeout-loading/fadeout-loading.js";
+import "../filter/filter-block.js";
+import "../filter/filter-checkbox-item.js";
+import "../filter/filter-chip.js";
+import "../filter/filter-chips.js";
+import "../filter/filter-dropdown-item.js";
+import "../filter/filter-group.js";
+import "../filter/filter-label.js";
+import "../search-line/search-line.js";
+import "../tabs/tabs.js";
+import "../filter/filter-modal-item.js";
+import "../filter/filter-radio-item.js";
+import "../filter/filter-separator.js";
+import "../filter/variants.js";
+import "../graph/formatters.js";
+import "lightweight-charts";
+import "../graph/graph-view.js";
+import "../help-tip/help-tip.js";
+import "../horizontal-indicator/horizontal-indicator.js";
+import "../layout/col/col.js";
+import "../layout/container/container.js";
+import "../layout/footer/footer.js";
+import "../layout/grid/grid.js";
+import "../layout/header/header.js";
+import "../layout/layout/layout.js";
+import "../../utils/reactochart-compat.js";
+import "react-markdown";
+import "remark-gfm";
+import "../navbar/navbar.js";
+import "../navbar/navbar-indicator-context.js";
+import "../navitem/navitem.js";
+import "../points-icon/points-icon.js";
+import "../progress/progress.js";
+import "../radio-group/radio-group.js";
+import "../rounded-image/rounded-image.js";
+import "../search-bar/search-bar.js";
+import "../segmented-control/segmented-control.js";
+import "../select/select.js";
+import "../separator/separator.js";
+import "../slider/slider.js";
+import "../smart-number-input/smart-number-input.js";
+import "../spinner/spinner.js";
+import "../stat-badge/stat-badge.js";
+import { StatusDot as U } from "../status-dot/status-dot.js";
+import "../stepper/stepper.js";
+import "../switch/switch.js";
+import "../table/grid-table.js";
+import "../table/table.js";
+import "../table/grid-table-loader.js";
+import "../textarea/textarea.js";
+import "../theme-provider.js";
+import "../tip-card/tip-card.js";
+import "../typography/typography.js";
+import "../vertical-indicator/vertical-indicator.js";
+import "../vertical-list/vertical-list.js";
+import "../with-filter-button/with-filter-button.js";
+const D = 1e3 * 60 * 10;
+function Wr({
+  blockByChain: i,
+  explorerAddresses: S,
   networkById: v
 }) {
-  const [i, h] = b(Date.now());
+  const [n, k] = h(Date.now());
   w(() => {
     const r = () => {
-      h(Date.now());
-    }, e = window.setInterval(r, 1e3);
+      k(Date.now());
+    }, t = window.setInterval(r, 1e3);
     return () => {
-      clearInterval(e);
+      clearInterval(t);
     };
   }, []);
-  const p = E(() => {
-    if (!n) return 0;
-    const r = Object.values(n).reduce((e, a) => {
-      const o = a.lastSyncBlock.localTimestamp;
-      return e === 0 || e !== 0 && o < e ? o : e;
+  const a = E(() => {
+    if (!i) return 0;
+    const r = Object.values(i).reduce((t, c) => {
+      const m = c.lastSyncBlock.localTimestamp;
+      return t === 0 || t !== 0 && m < t ? m : t;
     }, 0);
-    return r ? i - r : 0;
-  }, [n, i]) > L, m = () => /* @__PURE__ */ c("div", { className: "flex h-[30px] items-center gap-1.5", children: [
-    /* @__PURE__ */ t(
+    return r ? n - r : 0;
+  }, [i, n]) > D, d = () => /* @__PURE__ */ s("div", { className: "flex h-[30px] items-center gap-1.5", children: [
+    /* @__PURE__ */ o(
       "span",
       {
-        className: u(
+        className: x(
           "text-sm leading-[17px]",
-          p ? "text-destructive" : "text-success"
+          a ? "text-destructive" : "text-success"
         ),
         children: "Status"
       }
     ),
-    /* @__PURE__ */ t(
-      "div",
-      {
-        className: u(
-          "w-2 h-2 rounded-full",
-          p ? "bg-destructive" : "bg-success"
-        )
-      }
-    )
+    /* @__PURE__ */ o(U, { variant: a ? "alert" : "success" })
   ] }), N = () => {
-    if (!n) return null;
-    const r = Object.entries(n);
-    return /* @__PURE__ */ t("div", { className: "flex flex-col text-left text-xs", children: r.map(([e, a], o) => {
-      const d = a.lastSyncBlock, l = d?.block || 0n, S = d?.localTimestamp ? i - d.localTimestamp : 0, s = g[Number(e)], f = typeof s == "string" ? s : s && typeof s == "object" && "url" in s ? s.url : void 0, T = v[Number(e)] || "Unknown", x = `[${l.toString()}]`, k = o === r.length - 1;
-      return /* @__PURE__ */ c("div", { className: u(!k && "mb-2"), children: [
-        /* @__PURE__ */ c("span", { children: [
+    if (!i) return null;
+    const r = Object.entries(i);
+    return /* @__PURE__ */ o("div", { className: "flex flex-col text-left text-xs", children: r.map(([t, c], m) => {
+      const l = c.lastSyncBlock, e = l?.block || 0n, g = l?.localTimestamp ? n - l.localTimestamp : 0, p = S[Number(t)], u = typeof p == "string" ? p : p && typeof p == "object" && "url" in p ? p.url : void 0, T = v[Number(t)] || "Unknown", f = `[${e.toString()}]`, b = m === r.length - 1;
+      return /* @__PURE__ */ s("div", { className: x(!b && "mb-2"), children: [
+        /* @__PURE__ */ s("span", { children: [
           T,
           " "
         ] }),
-        f && l > 0 ? /* @__PURE__ */ t(
+        u && e > 0 ? /* @__PURE__ */ o(
           "a",
           {
-            href: `${f}/block/${l}`,
+            href: `${u}/block/${e}`,
             target: "_blank",
             rel: "noopener noreferrer",
             className: "underline hover:text-foreground",
-            children: x
+            children: f
           }
-        ) : /* @__PURE__ */ t("span", { children: x }),
-        l > 0 && /* @__PURE__ */ c("span", { children: [
+        ) : /* @__PURE__ */ o("span", { children: f }),
+        e > 0 && /* @__PURE__ */ s("span", { children: [
           ", updated ",
-          (S / 1e3).toFixed(0),
+          (g / 1e3).toFixed(0),
           " seconds ago"
         ] })
-      ] }, e);
+      ] }, t);
     }) });
   };
-  return n ? /* @__PURE__ */ t(j, { delayDuration: 200, children: /* @__PURE__ */ c(U, { children: [
-    /* @__PURE__ */ t(D, { asChild: !0, children: /* @__PURE__ */ t("div", { className: "cursor-auto select-none", children: m() }) }),
-    /* @__PURE__ */ t(y, { side: "top", collisionPadding: 8, children: N() })
-  ] }) }) : /* @__PURE__ */ t("div", { className: "select-none", children: m() });
+  return i ? /* @__PURE__ */ o(j, { title: d(), children: N() }) : /* @__PURE__ */ o("div", { className: "select-none", children: d() });
 }
 export {
-  B as BlockSync
+  Wr as BlockSync
 };

package/dist/esm/components/breadcrumbs/breadcrumbs.js

@@ -1,10 +1,10 @@
-import { jsx as e, jsxs as h } from "react/jsx-runtime";
-import { ChevronRight as g } from "lucide-react";
-import { Link as x } from "react-router-dom";
+import { jsx as e, jsxs as x } from "react/jsx-runtime";
+import { IconExpand as b } from "@gearbox-protocol/static";
+import { Link as g } from "react-router-dom";
 import "react";
+import "@gearbox-protocol/sdk";
 import { cn as c } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
 function j({
   items: o,
   onClick: u,
@@ -21,8 +21,8 @@ function j({
       "aria-label": "breadcrumb",
       className: c("flex items-center gap-2", m),
       children: /* @__PURE__ */ e("ol", { className: "flex items-center gap-2 flex-wrap", children: o.map((r, t) => {
-        const s = t === o.length - 1, l = f === t, n = i?.(r, t) ?? !1, a = d && !n, p = r.href || r.step || `${r.label}-${t}`;
-        return /* @__PURE__ */ h("li", { className: "flex items-center gap-2", children: [
+        const s = t === o.length - 1, n = f === t, l = i?.(r, t) ?? !1, a = d && !l, p = r.href || r.step || `${r.label}-${t}`;
+        return /* @__PURE__ */ x("li", { className: "flex items-center gap-2", children: [
           d ? (
             // Wizard mode: use button
             /* @__PURE__ */ e(
@@ -30,13 +30,13 @@ function j({
               {
                 type: "button",
                 onClick: () => a && u(r, t),
-                disabled: n,
+                disabled: l,
                 className: c(
                   "text-sm transition-colors",
-                  l ? "text-foreground font-medium" : "text-muted-foreground",
-                  a && !l && "hover:text-foreground cursor-pointer",
-                  n && "opacity-50 cursor-not-allowed",
-                  !a && !l && "cursor-default"
+                  n ? "text-foreground font-medium" : "text-muted-foreground",
+                  a && !n && "hover:text-foreground cursor-pointer",
+                  l && "opacity-50 cursor-not-allowed",
+                  !a && !n && "cursor-default"
                 ),
                 children: r.label
               }
@@ -44,7 +44,7 @@ function j({
           ) : r.href && !s ? (
             // Navigation mode with href
             /* @__PURE__ */ e(
-              x,
+              g,
               {
                 to: r.href,
                 className: "text-sm text-muted-foreground hover:text-foreground transition-colors",
@@ -64,7 +64,13 @@ function j({
               }
             )
           ),
-          !s && /* @__PURE__ */ e(g, { className: "h-4 w-4 text-muted-foreground" })
+          !s && /* @__PURE__ */ e(
+            b,
+            {
+              size: 10,
+              className: "size-4 text-muted-foreground"
+            }
+          )
         ] }, p);
       }) })
     }

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

@@ -1,53 +1,60 @@
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { Check as a } from "lucide-react";
+import { faCheck as c } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as l } from "../icons/fa-icon.js";
 import "react";
-import { cn as c } from "../../utils/cn.js";
-import "sonner";
 import "@gearbox-protocol/sdk";
-const l = {
+import { cn as m } from "../../utils/cn.js";
+import "sonner";
+const x = {
   sm: "px-2 py-1 text-xs gap-1",
   md: "px-3 py-1.5 text-sm gap-1.5",
   lg: "px-4 py-2 text-base gap-2"
-}, x = {
-  sm: 12,
-  md: 14,
-  lg: 16
 };
-function h({
-  checked: r = !1,
+function C({
+  checked: o = !1,
   onChange: n,
   children: s,
-  disabled: o = !1,
-  size: t = "md",
-  className: m
+  disabled: t = !1,
+  size: r = "md",
+  className: a
 }) {
   return /* @__PURE__ */ i(
     "label",
     {
-      className: c(
+      className: m(
         "inline-flex items-center rounded-md border font-medium transition-colors cursor-pointer",
-        l[t],
-        r ? "bg-primary text-primary-foreground border-primary" : "bg-background text-foreground border-input hover:bg-accent",
-        o && "opacity-50 cursor-not-allowed",
-        m
+        x[r],
+        o ? "bg-primary text-primary-foreground border-primary" : "bg-background text-foreground border-input hover:bg-accent",
+        t && "opacity-50 cursor-not-allowed",
+        a
       ),
       children: [
         /* @__PURE__ */ e(
           "input",
           {
             type: "checkbox",
-            checked: r,
+            checked: o,
             onChange: (p) => n?.(p.target.checked),
-            disabled: o,
+            disabled: t,
             className: "sr-only"
           }
         ),
-        r && /* @__PURE__ */ e(a, { size: x[t] }),
+        o && /* @__PURE__ */ e(
+          l,
+          {
+            icon: c,
+            className: m(
+              r === "sm" && "size-3",
+              r === "md" && "size-3.5",
+              r === "lg" && "size-4"
+            )
+          }
+        ),
         s
       ]
     }
   );
 }
 export {
-  h as ButtonCheckbox
+  C as ButtonCheckbox
 };

package/dist/esm/components/buttons/back-button/back-button.js

@@ -1,11 +1,12 @@
 import { jsxs as s, jsx as a } from "react/jsx-runtime";
 import { cva as f } from "class-variance-authority";
-import { ArrowLeft as u } from "lucide-react";
+import { faArrowLeft as u } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as c } from "../../icons/fa-icon.js";
 import "react";
+import "@gearbox-protocol/sdk";
 import { cn as x } from "../../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
-const c = f("flex items-center transition-colors", {
+const l = f("flex items-center transition-colors", {
   variants: {
     variant: {
       default: "text-muted-foreground hover:text-foreground",
@@ -23,7 +24,7 @@ const c = f("flex items-center transition-colors", {
     size: "default"
   }
 });
-function l({
+function p({
   href: t,
   className: r,
   onClick: e,
@@ -31,29 +32,29 @@ function l({
 }) {
   return /* @__PURE__ */ a("a", { href: t, className: r, onClick: e, children: o });
 }
-function y({
+function b({
   href: t,
   text: r,
   onClick: e,
   className: o,
   variant: i,
   size: n,
-  LinkComponent: m = l
+  LinkComponent: m = p
 }) {
   return /* @__PURE__ */ s(
     m,
     {
       href: t,
-      className: x(c({ variant: i, size: n, className: o })),
+      className: x(l({ variant: i, size: n, className: o })),
       onClick: e,
       children: [
-        /* @__PURE__ */ a(u, { className: "mr-2 h-4 w-4" }),
+        /* @__PURE__ */ a(c, { icon: u, className: "mr-2 size-4" }),
         r || "Back"
       ]
     }
   );
 }
 export {
-  y as BackButton,
-  c as backButtonVariants
+  b as BackButton,
+  l as backButtonVariants
 };

package/dist/esm/components/buttons/button/button.js

@@ -2,10 +2,11 @@ import { jsx as p } from "react/jsx-runtime";
 import { Slot as c } from "@radix-ui/react-slot";
 import { cva as y } from "class-variance-authority";
 import * as x from "react";
+import "@gearbox-protocol/sdk";
 import { cn as e } from "../../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
 const h = y(
+  // TODO: remove !
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors cursor-pointer disabled:!cursor-not-allowed [&_svg]:pointer-events-none [&_svg:not([style*='width']):not([style*='height'])]:size-4 [&_svg]:shrink-0 border border-transparent outline-none focus-visible:outline-none",
   {
     variants: {
@@ -47,6 +48,7 @@ const h = y(
         blue: "bg-blue-800 hover:bg-blue-700 disabled:bg-blue-700 text-primary-foreground disabled:opacity-50",
         "blue-outline": "border-blue-800 hover:border-blue-700 disabled:border-blue-800 text-foreground disabled:opacity-50"
       },
+      // TODO: remove !
       size: {
         auto: "h-auto p-1.5",
         xs: "px-3 py-0.5 text-xs rounded-full",

package/dist/esm/components/buttons/copy-button/copy-button.js

@@ -1,56 +1,64 @@
-import { jsxs as y, jsx as e } from "react/jsx-runtime";
-import { Check as h, Copy as C } from "lucide-react";
+import { jsxs as y, jsx as t } from "react/jsx-runtime";
+import { IconCopy as h } from "@gearbox-protocol/static";
 import * as r from "react";
-import { Button as x } from "../button/button.js";
+import { Button as C } from "../button/button.js";
+import { faCheck as x } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as w } from "../../icons/fa-icon.js";
+import "@gearbox-protocol/sdk";
 import { cn as a } from "../../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
-const w = {
+const N = {
   3: "h-3 w-3",
   "3.5": "h-3.5 w-3.5",
   4: "h-4 w-4",
   5: "h-5 w-5",
   6: "h-6 w-6"
-}, N = r.forwardRef(
-  ({ text: c, className: n, iconSize: l = "3.5", successDuration: p = 1500, ...m }, u) => {
-    const [t, s] = r.useState(!1), o = r.useRef(null), f = async () => {
+}, b = {
+  3: 12,
+  "3.5": 14,
+  4: 16,
+  5: 20,
+  6: 24
+}, j = r.forwardRef(
+  ({ text: n, className: l, iconSize: i = "3.5", successDuration: p = 1500, ...m }, u) => {
+    const [e, s] = r.useState(!1), o = r.useRef(null), f = async () => {
       try {
-        await navigator.clipboard.writeText(c), o.current && clearTimeout(o.current), s(!0), o.current = setTimeout(() => {
+        await navigator.clipboard.writeText(n), o.current && clearTimeout(o.current), s(!0), o.current = setTimeout(() => {
           s(!1);
         }, p);
       } catch (d) {
         console.error("Failed to copy:", d);
       }
-    }, i = w[l];
+    }, c = N[i];
     return /* @__PURE__ */ y(
-      x,
+      C,
       {
         ref: u,
         variant: "text",
         size: "auto",
-        className: a("p-1! border-0! relative", n),
+        className: a("p-1! border-0! relative", l),
         onClick: f,
-        title: t ? "Copied!" : "Copy to clipboard",
+        title: e ? "Copied!" : "Copy to clipboard",
         ...m,
         children: [
-          /* @__PURE__ */ e(
+          /* @__PURE__ */ t(
             "span",
             {
               className: a(
                 "absolute inset-0 flex items-center justify-center transition-all duration-200",
-                t ? "opacity-100 scale-100 text-green-500" : "opacity-0 scale-50 text-green-500"
+                e ? "opacity-100 scale-100 text-green-500" : "opacity-0 scale-50 text-green-500"
               ),
-              children: /* @__PURE__ */ e(h, { className: i })
+              children: /* @__PURE__ */ t(w, { icon: x, className: c })
             }
           ),
-          /* @__PURE__ */ e(
+          /* @__PURE__ */ t(
             "span",
             {
               className: a(
                 "flex items-center justify-center transition-all duration-200",
-                t ? "opacity-0 scale-50" : "opacity-100 scale-100"
+                e ? "opacity-0 scale-50" : "opacity-100 scale-100"
               ),
-              children: /* @__PURE__ */ e(C, { className: i })
+              children: /* @__PURE__ */ t(h, { size: b[i], className: c })
             }
           )
         ]
@@ -58,7 +66,7 @@ const w = {
     );
   }
 );
-N.displayName = "CopyButton";
+j.displayName = "CopyButton";
 export {
-  N as CopyButton
+  j as CopyButton
 };

package/dist/esm/components/buttons/external-button/external-button.js

@@ -1,31 +1,43 @@
-import { jsx as o } from "react/jsx-runtime";
-import { ExternalLink as m } from "lucide-react";
+import { jsx as t } from "react/jsx-runtime";
+import { IconExternal as m } from "@gearbox-protocol/static";
 import * as p from "react";
 import { Button as s } from "../button/button.js";
-import { cn as t } from "../../../utils/cn.js";
-import "sonner";
 import "@gearbox-protocol/sdk";
+import { cn as r } from "../../../utils/cn.js";
+import "sonner";
 const c = {
   3: "!h-3 !w-3",
   "3.5": "!h-3.5 !w-3.5",
   4: "!h-4 !w-4",
   5: "!h-5 !w-5",
   6: "!h-6 !w-6"
-}, l = p.forwardRef(
-  ({ url: r, className: n, iconSize: a = "3.5", ...e }, i) => /* @__PURE__ */ o(
+}, l = {
+  3: 12,
+  "3.5": 14,
+  4: 16,
+  5: 20,
+  6: 24
+}, w = p.forwardRef(
+  ({ url: n, className: a, iconSize: o = "3.5", ...e }, i) => /* @__PURE__ */ t(
     s,
     {
       ref: i,
       variant: "text",
       size: "auto",
-      className: t("p-1! border-0!", n),
-      onClick: () => window.open(r, "_blank"),
+      className: r("p-1! border-0!", a),
+      onClick: () => window.open(n, "_blank"),
       ...e,
-      children: /* @__PURE__ */ o(m, { className: t(c[a]) })
+      children: /* @__PURE__ */ t(
+        m,
+        {
+          size: l[o],
+          className: r(c[o])
+        }
+      )
     }
   )
 );
-l.displayName = "ExternalButton";
+w.displayName = "ExternalButton";
 export {
-  l as ExternalButton
+  w as ExternalButton
 };