@gearbox-protocol/permissionless-ui 1.2.33 → 1.4.0

package/dist/esm/components/graph/plugins/vertical-line.js

@@ -0,0 +1,103 @@
+var h = Object.defineProperty;
+var a = (s, t, e) => t in s ? h(s, t, { enumerable: true, configurable: true, writable: true, value: e }) : s[t] = e;
+var i = (s, t, e) => (a(s, typeof t !== "symbol" ? `${t}` : t, e), e);
+function c(s) {
+  return Math.floor(s * 0.5);
+}
+function _(s, t, e = 1, o) {
+  const n = Math.round(t * s), r = o ? e : Math.round(e * t), l = c(r);
+  return { position: n - l, length: r };
+}
+class u {
+  constructor(t, e) {
+    i(this, "_x", null);
+    i(this, "_options");
+    this._x = t, this._options = e;
+  }
+  draw(t) {
+    t.useBitmapCoordinateSpace((e) => {
+      if (this._x === null) return;
+      const o = e.context, n = _(this._x, e.horizontalPixelRatio, this._options.width);
+      o.fillStyle = this._options.color, o.fillRect(n.position, 0, n.length, e.bitmapSize.height);
+    });
+  }
+}
+class p {
+  constructor(t, e) {
+    i(this, "_source");
+    i(this, "_x", null);
+    i(this, "_options");
+    this._source = t, this._options = e;
+  }
+  update() {
+    const t = this._source._chart.timeScale();
+    this._x = t.timeToCoordinate(this._source._time);
+  }
+  renderer() {
+    return new u(this._x, this._options);
+  }
+}
+class x {
+  constructor(t, e) {
+    i(this, "_source");
+    i(this, "_x", null);
+    i(this, "_options");
+    this._source = t, this._options = e;
+  }
+  update() {
+    const t = this._source._chart.timeScale();
+    this._x = t.timeToCoordinate(this._source._time);
+  }
+  visible() {
+    return this._options.showLabel;
+  }
+  tickVisible() {
+    return this._options.showLabel;
+  }
+  coordinate() {
+    return this._x ?? 0;
+  }
+  text() {
+    return this._options.labelText;
+  }
+  textColor() {
+    return this._options.labelTextColor;
+  }
+  backColor() {
+    return this._options.labelBackgroundColor;
+  }
+}
+const w = {
+  color: "green",
+  labelText: "",
+  width: 3,
+  labelBackgroundColor: "green",
+  labelTextColor: "white",
+  showLabel: false
+};
+class d {
+  constructor(t, e, o, n) {
+    i(this, "_chart");
+    i(this, "_series");
+    i(this, "_time");
+    i(this, "_paneViews");
+    i(this, "_timeAxisViews");
+    const r = {
+      ...w,
+      ...n
+    };
+    this._chart = t, this._series = e, this._time = o, this._paneViews = [new p(this, r)], this._timeAxisViews = [new x(this, r)];
+  }
+  updateAllViews() {
+    this._paneViews.forEach((t) => t.update()), this._timeAxisViews.forEach((t) => t.update());
+  }
+  timeAxisViews() {
+    return this._timeAxisViews;
+  }
+  paneViews() {
+    return this._paneViews;
+  }
+}
+export {
+  d as VertLine
+};

package/dist/esm/components/guard.js

@@ -0,0 +1,10 @@
+function Guard({
+  showGuard,
+  guard,
+  children
+}) {
+  return showGuard ? guard : children;
+}
+export {
+  Guard
+};

package/dist/esm/components/health-factor.js

@@ -0,0 +1,63 @@
+import { jsx } from "react/jsx-runtime";
+import cn from "../utils/index.js";
+import { formatPercentAmount, PERCENTAGE_FACTOR } from "../utils/format-money.js";
+const GOOD_HF = 15e3;
+const BAD_HF = 11e3;
+const CRITICAL_HF = 10500;
+const getHFZones = (hf) => {
+  if (!hf) return void 0;
+  const numHf = Number(hf);
+  const hfInBasisPoints = numHf < 1e3 ? numHf * PERCENTAGE_FACTOR : numHf;
+  if (hfInBasisPoints >= GOOD_HF) return "good";
+  if (hfInBasisPoints > BAD_HF) return "medium";
+  if (hfInBasisPoints > CRITICAL_HF) return "bad";
+  if (hfInBasisPoints > PERCENTAGE_FACTOR) return "critical";
+  return "liquidation";
+};
+function HealthFactor({
+  value,
+  debt,
+  decimals = 3,
+  zone,
+  showColor = true,
+  className,
+  ...props
+}) {
+  const zeroDebt = debt !== void 0 && debt === 0n;
+  const getZone = () => {
+    if (zeroDebt) return void 0;
+    return zone === void 0 || zone === null ? getHFZones(value) : zone;
+  };
+  const currentZone = getZone();
+  const getColorClass = () => {
+    if (!showColor || currentZone === void 0) return "";
+    switch (currentZone) {
+      case "good":
+        return "text-green-600";
+      case "medium":
+        return "text-yellow-600";
+      case "bad":
+        return "text-orange-500";
+      case "critical":
+      case "liquidation":
+        return "text-destructive";
+      default:
+        return "";
+    }
+  };
+  const renderValue = () => {
+    if (zeroDebt) return "N/A";
+    const numValue = Number(value);
+    const hfInBasisPoints = numValue < 1e3 ? numValue * PERCENTAGE_FACTOR : numValue;
+    const hfDecimal = hfInBasisPoints / PERCENTAGE_FACTOR;
+    const formatted = formatPercentAmount(hfDecimal, decimals);
+    return String(formatted);
+  };
+  return /* @__PURE__ */ jsx("div", { className: cn("font-medium", getColorClass(), className), ...props, children: renderValue() });
+}
+export {
+  BAD_HF,
+  GOOD_HF,
+  HealthFactor,
+  getHFZones
+};

package/dist/esm/components/help-center-container.js

@@ -0,0 +1,83 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { cn } from "../utils/cn.js";
+import { BlockSync } from "./block-sync.js";
+function usePageParams() {
+  const [pageVerticalOffset, setPageVerticalOffset] = useState(
+    typeof window !== "undefined" ? window.scrollY : 0
+  );
+  const [clientHeight, setClientHeight] = useState(
+    typeof document !== "undefined" ? document.documentElement.clientHeight : 0
+  );
+  useEffect(() => {
+    const handleWindowScroll = () => {
+      setPageVerticalOffset(window.scrollY);
+    };
+    const handleDocumentResize = () => {
+      setClientHeight(document.documentElement.clientHeight);
+    };
+    window.addEventListener("scroll", handleWindowScroll);
+    window.addEventListener("resize", handleDocumentResize);
+    return () => {
+      window.removeEventListener("scroll", handleWindowScroll);
+      window.removeEventListener("resize", handleDocumentResize);
+    };
+  }, []);
+  const clientOffsetHeight = typeof document !== "undefined" ? Math.max(
+    document.body.scrollHeight,
+    document.documentElement.scrollHeight,
+    document.body.offsetHeight,
+    document.documentElement.offsetHeight,
+    document.body.clientHeight,
+    document.documentElement.clientHeight
+  ) : 0;
+  return {
+    pageVerticalOffset,
+    clientHeight,
+    clientOffsetHeight
+  };
+}
+function HelpCenterContainer({
+  blockSyncProps,
+  footerHeight,
+  gapFromFooter
+}) {
+  const [bottomDistance, setBottomDistance] = useState(gapFromFooter);
+  const { pageVerticalOffset, clientOffsetHeight, clientHeight } = usePageParams();
+  useEffect(() => {
+    const gapFromBottom = footerHeight + gapFromFooter;
+    const distance = clientOffsetHeight - (clientHeight + pageVerticalOffset);
+    const visibleFooter = distance < gapFromBottom ? gapFromBottom - distance : 0;
+    setBottomDistance(gapFromFooter + visibleFooter);
+  }, [
+    pageVerticalOffset,
+    clientHeight,
+    clientOffsetHeight,
+    footerHeight,
+    gapFromFooter
+  ]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        // Desktop: fixed position with dynamic bottom
+        "hidden sm:flex",
+        "fixed right-9 flex-col items-end gap-2 text-xs text-muted-foreground z-[100]",
+        "transition-[bottom] duration-300 ease-in-out"
+      ),
+      style: { bottom: `${bottomDistance}px` },
+      children: /* @__PURE__ */ jsx(
+        BlockSync,
+        {
+          blockByChain: blockSyncProps.blockByChain,
+          explorerAddresses: blockSyncProps.explorerAddresses,
+          networkById: blockSyncProps.networkById
+        }
+      )
+    }
+  );
+}
+export {
+  HelpCenterContainer
+};

package/dist/esm/components/hide-on.js

@@ -0,0 +1,41 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../utils/cn.js";
+const breakpointClasses = {
+  small: "sm:hidden",
+  medium: "md:hidden",
+  large: "lg:hidden",
+  xlarge: "xl:hidden"
+};
+function HideOn({
+  $breakpoint,
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn(breakpointClasses[$breakpoint], className), ...props, children });
+}
+const showBreakpointClasses = {
+  small: "hidden sm:block",
+  medium: "hidden md:block",
+  large: "hidden lg:block",
+  xlarge: "hidden xl:block"
+};
+function ShowOn({
+  $breakpoint,
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(showBreakpointClasses[$breakpoint], className),
+      ...props,
+      children
+    }
+  );
+}
+export {
+  HideOn,
+  ShowOn
+};

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

@@ -0,0 +1,34 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { HelpCircle } from "lucide-react";
+import * as React from "react";
+import cn from "../utils/index.js";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from "./tooltip.js";
+const HorizontalIndicator = React.forwardRef(({ label, value, tip, valueDescription, className }, ref) => /* @__PURE__ */ jsxs("div", { ref, className: cn("flex flex-col gap-2 w-full", className), children: [
+  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+    /* @__PURE__ */ jsx("span", { children: label }),
+    tip && /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "inline-flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors cursor-help",
+          children: /* @__PURE__ */ jsx(HelpCircle, { className: "h-3.5 w-3.5" })
+        }
+      ) }),
+      /* @__PURE__ */ jsx(TooltipContent, { side: "top", className: "max-w-xs", children: /* @__PURE__ */ jsx("p", { children: tip }) })
+    ] }) })
+  ] }),
+  /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsx("div", { className: "text-base font-semibold text-foreground", children: value }),
+    valueDescription && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: valueDescription })
+  ] })
+] }));
+HorizontalIndicator.displayName = "HorizontalIndicator";
+export {
+  HorizontalIndicator
+};

package/dist/esm/components/image.js

@@ -0,0 +1,32 @@
+import { jsx } from "react/jsx-runtime";
+function Image({
+  src,
+  alt,
+  width,
+  height,
+  onError,
+  onLoad,
+  className,
+  loading = "lazy"
+}) {
+  return (
+    // biome-ignore lint: This is a universal component that works outside Next.js
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        src,
+        alt,
+        width,
+        height,
+        className,
+        onError,
+        onLoad,
+        loading,
+        decoding: "async"
+      }
+    )
+  );
+}
+export {
+  Image
+};

package/dist/esm/components/index.js

@@ -1,22 +1,64 @@
 export * from "./alert-dialog.js";
+export * from "./asset-line.js";
+export * from "./assets-list-cell.js";
+export * from "./assets-ratio.js";
 export * from "./auth/index.js";
 export * from "./badge.js";
+export * from "./base-link.js";
+export * from "./block-sync.js";
+export * from "./breadcrumbs.js";
 export * from "./buttons/index.js";
+export * from "./card-grid.js";
 export * from "./cards/index.js";
 export * from "./checkbox.js";
-export * from "./dialog.js";
-export * from "./dropdown-menu.js";
-export * from "./editable-table/index.js";
+export * from "./checkbox-item.js";
+export * from "./compound-apy.js";
+export * from "./credit-session-status.js";
+export * from "./description.js";
+export * from "./detailed-page-title.js";
+export * from "./dialog/index.js";
+export * from "./dropdown-menu/index.js";
+export * from "./error-message.js";
+export * from "./filter/index.js";
+export * from "./form/index.js";
+export * from "./graph/index.js";
+export * from "./guard.js";
+export * from "./health-factor.js";
+export * from "./help-center-container.js";
+export * from "./hide-on.js";
+export * from "./horizontal-indicator.js";
+export * from "./image.js";
 export * from "./input.js";
 export * from "./label.js";
 export * from "./layout/index.js";
+export * from "./liquidation/index.js";
+export * from "./loader-guard.js";
+export * from "./loading-guard.js";
 export * from "./markdown-viewer.js";
+export * from "./navbar.js";
+export * from "./navbar-indicator-context.js";
+export * from "./navitem.js";
+export * from "./not-found.js";
+export * from "./options-list.js";
+export * from "./page-title.js";
+export * from "./percent-indicator.js";
+export * from "./pool-points-indicator.js";
 export * from "./search-bar.js";
+export * from "./search-line.js";
 export * from "./select.js";
+export * from "./short-string.js";
 export * from "./signatures/index.js";
 export * from "./skeleton.js";
-export * from "./table.js";
+export * from "./stat-badge.js";
+export * from "./tab-control.js";
+export * from "./table/index.js";
 export * from "./tabs.js";
 export * from "./textarea.js";
+export * from "./theme-provider.js";
+export * from "./theme-toggle.js";
 export * from "./token-icon.js";
+export * from "./token-symbol.js";
 export * from "./tooltip.js";
+export * from "./typed-intl/index.js";
+export * from "./vspace.js";
+export * from "./with-filter-button.js";

package/dist/esm/components/input.js

@@ -1,35 +1,56 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as React from "react";
+import { cva } from "class-variance-authority";
 import cn from "../utils/index.js";
-const InputInternal = React.forwardRef(({ className, type, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(
-    "input",
-    {
-      type,
-      className: cn(
-        "flex h-9 w-full rounded-md border border-input px-3 py-1 shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm bg-[rgb(40,40,40)] text-white border-[rgb(100,100,100)] focus:bg-[rgb(40,40,40)] active:bg-[rgb(40,40,40)] [&:not(:placeholder-shown)]:bg-[rgb(40,40,40)] autofill:bg-[rgb(40,40,40)] [-webkit-autofill]:bg-[rgb(40,40,40)] [&:-webkit-autofill]:shadow-[0_0_0_1000px_rgb(40,40,40)_inset] [&:-webkit-autofill]:[text-fill-color:rgb(255,255,255)]",
-        className
-      ),
-      ref,
-      ...props
+const inputVariants = cva(
+  "flex w-full rounded-md border border-input px-3 py-1 shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm bg-[rgb(40,40,40)] text-white border-[rgb(100,100,100)] focus:bg-[rgb(40,40,40)] active:bg-[rgb(40,40,40)] [&:not(:placeholder-shown)]:bg-[rgb(40,40,40)] autofill:bg-[rgb(40,40,40)] [-webkit-autofill]:bg-[rgb(40,40,40)] [&:-webkit-autofill]:shadow-[0_0_0_1000px_rgb(40,40,40)_inset] [&:-webkit-autofill]:[text-fill-color:rgb(255,255,255)]",
+  {
+    variants: {
+      size: {
+        sm: "h-8 text-xs px-2",
+        default: "h-9",
+        lg: "h-11 text-base px-4"
+      },
+      variant: {
+        default: "",
+        error: "border-red-500 focus-visible:ring-red-500",
+        success: "border-green-500 focus-visible:ring-green-500"
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      variant: "default"
     }
-  );
-});
-InputInternal.displayName = "Input";
-function Input({ hasError, errorMessage, value, ...props }) {
+  }
+);
+function Input({
+  hasError,
+  errorMessage,
+  value,
+  size,
+  variant,
+  className,
+  ...props
+}) {
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-2", children: [
     /* @__PURE__ */ jsx(
-      InputInternal,
+      "input",
       {
         ...props,
         value,
-        className: cn(hasError ? "border-red-500" : "", props.className),
+        className: cn(
+          inputVariants({
+            size,
+            variant: hasError ? "error" : variant,
+            className
+          })
+        ),
         onWheel: props.type === "number" ? (e) => e.currentTarget.blur() : void 0
       }
     ),
-    hasError && value !== "" && /* @__PURE__ */ jsx("p", { className: "text-red-500", children: errorMessage })
+    hasError && value !== "" && /* @__PURE__ */ jsx("p", { className: "text-red-500 text-sm", children: errorMessage })
   ] });
 }
 export {
-  Input
+  Input,
+  inputVariants
 };

package/dist/esm/components/label.js

@@ -4,17 +4,40 @@ import { cva } from "class-variance-authority";
 import * as React from "react";
 import cn from "../utils//index.js";
 const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+  "font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+  {
+    variants: {
+      size: {
+        sm: "text-sm",
+        default: "text-lg",
+        lg: "text-xl"
+      },
+      variant: {
+        default: "text-white",
+        muted: "text-muted-foreground",
+        error: "text-destructive",
+        success: "text-green-500"
+      },
+      required: {
+        true: "after:content-['*'] after:ml-0.5 after:text-destructive"
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      variant: "default"
+    }
+  }
 );
-const Label = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const Label = React.forwardRef(({ className, size, variant, required, ...props }, ref) => /* @__PURE__ */ jsx(
   LabelPrimitive.Root,
   {
     ref,
-    className: cn(labelVariants(), "text-white text-lg", className),
+    className: cn(labelVariants({ size, variant, required, className })),
     ...props
   }
 ));
 Label.displayName = LabelPrimitive.Root.displayName;
 export {
-  Label
+  Label,
+  labelVariants
 };

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

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import Image from "next/image";
-import cn from "../../utils/index.js";
+import { cn } from "../../utils/cn.js";
+import { Image } from "../image.js";
 function AppLogo({
   appName,
   size = "default"
@@ -9,7 +9,7 @@ function AppLogo({
     "div",
     {
       className: cn(
-        "font-bold text-foreground flex items-center gap-2",
+        "text-foreground flex items-center gap-2",
         size === "default" ? "text-xl" : "text-md"
       ),
       children: [
@@ -20,10 +20,10 @@ function AppLogo({
             alt: "Gearbox Protocol",
             width: size === "default" ? 120 : 100,
             height: size === "default" ? 24 : 20,
-            priority: true
+            loading: "eager"
           }
         ),
-        /* @__PURE__ */ jsx("span", { className: "font-bold italic", children: appName })
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: appName })
       ]
     }
   );