@gearbox-protocol/permissionless-ui 1.2.33 → 1.4.0

package/dist/esm/components/assets-list-cell.js

@@ -0,0 +1,39 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ExternalLink } from "lucide-react";
+import cn from "../utils/index.js";
+import { Button } from "./buttons/index.js";
+import { TokenIcon } from "./token-icon.js";
+function AssetsListCell({
+  assetAddress,
+  symbol,
+  iconSymbol,
+  comment,
+  explorerUrl,
+  iconSize = 24,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-3", className), children: [
+    /* @__PURE__ */ jsx(TokenIcon, { symbol: iconSymbol ?? symbol, size: iconSize }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx("div", { className: "font-medium", children: symbol }),
+      comment && /* @__PURE__ */ jsxs("div", { className: "text-md text-muted-foreground", children: [
+        "(",
+        comment,
+        ")"
+      ] }),
+      explorerUrl && /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          className: "text-muted-foreground hover:text-white p-0 h-auto",
+          onClick: () => window.open(`${explorerUrl}/address/${assetAddress}`, "_blank"),
+          children: /* @__PURE__ */ jsx(ExternalLink, { className: "h-3 w-3" })
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  AssetsListCell
+};

package/dist/esm/components/assets-ratio.js

@@ -0,0 +1,64 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PERCENTAGE_DECIMALS, PERCENTAGE_FACTOR } from "@gearbox-protocol/sdk";
+import * as React from "react";
+import cn from "../utils/index.js";
+const sumAssets = (assets) => assets.reduce((acc, a) => {
+  return acc + a.balanceInUSD;
+}, 0n);
+const COLOR_BY_INDEX = {
+  0: "bg-[#4976FE]",
+  1: "bg-[#FFE55A]",
+  2: "bg-[#CA5AFF]"
+};
+const DEFAULT_COLOR = "bg-[#5ABAFF]";
+function AssetsRatio({
+  assets,
+  className
+}) {
+  const [top3Assets, restAssets] = React.useMemo(() => {
+    const topN = assets.slice(0, 3);
+    const total = sumAssets(assets);
+    const rest = sumAssets(assets.slice(3));
+    const top3InPercent = topN.map(
+      (a) => total > 0 ? Number(
+        a.balanceInUSD * PERCENTAGE_FACTOR * PERCENTAGE_DECIMALS / total
+      ) / Number(PERCENTAGE_FACTOR) : Number(PERCENTAGE_FACTOR)
+    );
+    const restInPercent = total > 0n ? Number(rest * PERCENTAGE_FACTOR * PERCENTAGE_DECIMALS / total) / Number(PERCENTAGE_FACTOR) : 0;
+    return [top3InPercent, restInPercent];
+  }, [assets]);
+  const hasLastAsset = restAssets > 0;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(
+        "relative inline-flex overflow-hidden w-full h-[10px] bg-muted border-2 border-muted rounded-[20px]",
+        className
+      ),
+      children: [
+        top3Assets.map((percentage, index, arr) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "relative inline-flex h-full",
+              COLOR_BY_INDEX[index] || DEFAULT_COLOR,
+              !hasLastAsset && index === arr.length - 1 ? "" : "border-r-2 border-muted"
+            ),
+            style: { width: `${percentage}%` }
+          },
+          `${percentage}-${index}-${assets.length}`
+        )),
+        hasLastAsset && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn("relative inline-flex h-full", DEFAULT_COLOR),
+            style: { width: `${restAssets}%` }
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  AssetsRatio
+};

package/dist/esm/components/auth/siwe-provider.js

@@ -1,14 +1,14 @@
+"use client";
 import { jsx } from "react/jsx-runtime";
 import { SIWEProvider } from "connectkit";
-import { useRouter } from "next/navigation";
 import { createSiweMessage } from "viem/siwe";
 function SIWEClientProvider({
   apiRoutePrefix,
   statement,
   children,
+  onRefresh,
   ...props
 }) {
-  const router = useRouter();
   const getNonce = async () => {
     const res = await fetch(`${apiRoutePrefix}/nonce`);
     if (!res.ok) {
@@ -57,14 +57,14 @@ function SIWEClientProvider({
         return res.json();
       },
       onSignIn: async (session) => {
-        router.refresh();
+        onRefresh?.();
         return session;
       },
       signOut: async () => {
         await fetch(`${apiRoutePrefix}/logout`, {
           method: "POST"
         });
-        router.refresh();
+        onRefresh?.();
         return true;
       },
       ...props,

package/dist/esm/components/base-link.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import * as React from "react";
+import cn from "../utils/index.js";
+const BaseLink = React.forwardRef(
+  ({ className, asChild = false, external = false, children, ...props }, ref) => {
+    const Comp = asChild ? Slot : "a";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        className: cn(
+          "text-foreground no-underline hover:text-foreground/80 transition-colors",
+          className
+        ),
+        target: external ? "_blank" : void 0,
+        rel: external ? "noopener noreferrer" : void 0,
+        ...props,
+        children
+      }
+    );
+  }
+);
+BaseLink.displayName = "BaseLink";
+export {
+  BaseLink
+};

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

@@ -0,0 +1,99 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { cn } from "../utils/cn.js";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from "./tooltip.js";
+const TEN_MINUTES = 1e3 * 60 * 10;
+function BlockSync({
+  blockByChain,
+  explorerAddresses,
+  networkById
+}) {
+  const [latestTs, setLatestTs] = useState(Date.now());
+  useEffect(() => {
+    const syncTask = () => {
+      setLatestTs(Date.now());
+    };
+    const timer = window.setInterval(syncTask, 1e3);
+    return () => {
+      clearInterval(timer);
+    };
+  }, []);
+  const passedSinceEarliestBlockUpdate = useMemo(() => {
+    if (!blockByChain) return 0;
+    const blockTS = Object.values(blockByChain).reduce((minTs, block) => {
+      const ts = block.lastSyncBlock.localTimestamp;
+      if (minTs === 0) return ts;
+      if (minTs !== 0 && ts < minTs) return ts;
+      return minTs;
+    }, 0);
+    return blockTS ? latestTs - blockTS : 0;
+  }, [blockByChain, latestTs]);
+  const isError = passedSinceEarliestBlockUpdate > TEN_MINUTES;
+  const renderDot = () => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn("text-xs", isError ? "text-red-500" : "text-green-500"),
+        children: "Status"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "w-2 h-2 rounded-full",
+          isError ? "bg-red-500" : "bg-green-500"
+        )
+      }
+    )
+  ] });
+  const renderTooltipContent = () => {
+    if (!blockByChain) return null;
+    return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 text-left text-xs", children: Object.entries(blockByChain).map(([chainId, blockData]) => {
+      const lastSyncBlock = blockData.lastSyncBlock;
+      const block = lastSyncBlock?.block || 0n;
+      const since = lastSyncBlock?.localTimestamp ? latestTs - lastSyncBlock.localTimestamp : 0;
+      const explorer = explorerAddresses[Number(chainId)];
+      const explorerURL = typeof explorer === "string" ? explorer : explorer && typeof explorer === "object" && "url" in explorer ? explorer.url : void 0;
+      const network = networkById[Number(chainId)] || "Unknown";
+      const blockString = `[${block.toString()}]`;
+      return /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs("span", { children: [
+          network,
+          " "
+        ] }),
+        explorerURL && block > 0 ? /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: `${explorerURL}/block/${block}`,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "underline hover:text-foreground",
+            children: blockString
+          }
+        ) : /* @__PURE__ */ jsx("span", { children: blockString }),
+        block > 0 && /* @__PURE__ */ jsxs("span", { children: [
+          ", updated ",
+          (since / 1e3).toFixed(0),
+          " seconds ago"
+        ] })
+      ] }, chainId);
+    }) });
+  };
+  if (!blockByChain) {
+    return renderDot();
+  }
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: "cursor-help", children: renderDot() }) }),
+    /* @__PURE__ */ jsx(TooltipContent, { side: "top", align: "end", children: renderTooltipContent() })
+  ] }) });
+}
+export {
+  BlockSync
+};

package/dist/esm/components/breadcrumbs.js

@@ -0,0 +1,43 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRight } from "lucide-react";
+import { Link } from "react-router-dom";
+import cn from "../utils/index.js";
+function BreadCrumbs({
+  items,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "aria-label": "breadcrumb",
+      className: cn("flex items-center gap-2", className),
+      children: /* @__PURE__ */ jsx("ol", { className: "flex items-center gap-2 flex-wrap", children: items.map((item, index) => {
+        const isLast = index === items.length - 1;
+        const key = item.href || `${item.label}-${index}`;
+        return /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2", children: [
+          item.href && !isLast ? /* @__PURE__ */ jsx(
+            Link,
+            {
+              to: item.href,
+              className: "text-sm text-muted-foreground hover:text-foreground transition-colors",
+              children: item.label
+            }
+          ) : /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "text-sm",
+                isLast ? "text-foreground font-medium" : "text-muted-foreground"
+              ),
+              children: item.label
+            }
+          ),
+          !isLast && /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 text-muted-foreground" })
+        ] }, key);
+      }) })
+    }
+  );
+}
+export {
+  BreadCrumbs
+};

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

@@ -1,21 +1,47 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
 import { ArrowLeft } from "lucide-react";
-import Link from "next/link";
 import { cn } from "../../utils/index.js";
+const backButtonVariants = cva("flex items-center transition-colors", {
+  variants: {
+    variant: {
+      default: "text-muted-foreground hover:text-foreground",
+      primary: "text-primary hover:text-primary/80",
+      ghost: "text-foreground/60 hover:text-foreground"
+    },
+    size: {
+      sm: "text-xs mb-4",
+      default: "text-sm mb-6",
+      lg: "text-base mb-8"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default"
+  }
+});
+function DefaultLink({
+  href,
+  className,
+  onClick,
+  children
+}) {
+  return /* @__PURE__ */ jsx("a", { href, className, onClick, children });
+}
 function BackButton({
   href,
   text,
   onClick,
-  className
+  className,
+  variant,
+  size,
+  LinkComponent = DefaultLink
 }) {
   return /* @__PURE__ */ jsxs(
-    Link,
+    LinkComponent,
     {
       href,
-      className: cn(
-        "flex items-center text-sm text-muted-foreground hover:text-foreground mb-6",
-        className
-      ),
+      className: cn(backButtonVariants({ variant, size, className })),
       onClick,
       children: [
         /* @__PURE__ */ jsx(ArrowLeft, { className: "mr-2 h-4 w-4" }),
@@ -25,5 +51,6 @@ function BackButton({
   );
 }
 export {
-  BackButton
+  BackButton,
+  backButtonVariants
 };

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

@@ -4,21 +4,21 @@ import { cva } from "class-variance-authority";
 import * as React from "react";
 import cn from "../../utils/index.js";
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors cursor-pointer disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border border-transparent",
   {
     variants: {
       variant: {
         default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
         destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        outline: "border-border bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
         secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
         text: "text-muted-foreground hover:text-white",
         pink: "bg-pink-700 hover:bg-pink-600 disabled:bg-pink-700 text-white",
-        "pink-outline": "border border-pink-700 hover:border-pink-600 disabled:border-pink-700 text-white",
+        "pink-outline": "border-pink-700 hover:border-pink-600 disabled:border-pink-700 text-white",
         blue: "bg-blue-800 hover:bg-blue-700 disabled:bg-blue-700 text-white",
-        "blue-outline": "border border-blue-800 hover:border-blue-700 disabled:border-blue-800 text-white"
+        "blue-outline": "border-blue-800 hover:border-blue-700 disabled:border-blue-800 text-white"
       },
       size: {
         auto: "h-auto p-0",

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

@@ -0,0 +1,34 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Filter } from "lucide-react";
+import * as React from "react";
+import { Button } from "./button.js";
+const FilterButton = React.forwardRef(
+  ({
+    className,
+    label = "Filter",
+    showIcon = true,
+    variant = "outline",
+    size = "default",
+    children,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      Button,
+      {
+        ref,
+        variant,
+        size,
+        className,
+        ...props,
+        children: [
+          showIcon && /* @__PURE__ */ jsx(Filter, { className: "h-4 w-4" }),
+          children || label
+        ]
+      }
+    );
+  }
+);
+FilterButton.displayName = "FilterButton";
+export {
+  FilterButton
+};

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

@@ -2,5 +2,7 @@ export * from "./back-button.js";
 export * from "./button.js";
 export * from "./copy-button.js";
 export * from "./external-button.js";
+export * from "./filter-button.js";
 export * from "./navigation-button.js";
+export * from "./range-buttons.js";
 export * from "./tab-button.js";

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

@@ -1,10 +1,10 @@
 import { jsx } from "react/jsx-runtime";
-import Link from "next/link";
 import React from "react";
 import cn from "../../utils/index.js";
+import { BaseLink } from "../base-link.js";
 const NavigationButton = React.forwardRef(({ href, text, isActive, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
-    Link,
+    BaseLink,
     {
       href,
       ref,

package/dist/esm/components/buttons/range-buttons.js

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import cn from "../../utils/index.js";
+function RangeButtons({
+  range,
+  rangeList,
+  setRange,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-row flex-nowrap", className), children: rangeList.map((r, index) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => setRange(r.value),
+      className: cn(
+        "px-2.5 py-1.5 flex min-w-[44px] min-h-[26px] justify-center items-center",
+        "text-xs leading-[14px] font-medium text-center",
+        "rounded-md border cursor-pointer transition-colors",
+        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+        r.value === range ? "bg-secondary border-secondary text-secondary-foreground" : "bg-muted border-muted text-muted-foreground hover:border-secondary",
+        index < rangeList.length - 1 && "mr-1.5"
+      ),
+      children: r.label
+    },
+    String(r.value)
+  )) });
+}
+export {
+  RangeButtons
+};

package/dist/esm/components/card-grid.js

@@ -0,0 +1,92 @@
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+import cn from "../utils/index.js";
+const cardGridVariants = cva("grid w-full", {
+  variants: {
+    columns: {
+      1: "grid-cols-1",
+      2: "grid-cols-2",
+      3: "grid-cols-3",
+      4: "grid-cols-4",
+      5: "grid-cols-5",
+      6: "grid-cols-6"
+    },
+    columnsLg: {
+      1: "lg:grid-cols-1",
+      2: "lg:grid-cols-2",
+      3: "lg:grid-cols-3",
+      4: "lg:grid-cols-4",
+      5: "lg:grid-cols-5",
+      6: "lg:grid-cols-6"
+    },
+    columnsMd: {
+      1: "md:grid-cols-1",
+      2: "md:grid-cols-2",
+      3: "md:grid-cols-3",
+      4: "md:grid-cols-4",
+      5: "md:grid-cols-5",
+      6: "md:grid-cols-6"
+    },
+    columnsSm: {
+      1: "sm:grid-cols-1",
+      2: "sm:grid-cols-2",
+      3: "sm:grid-cols-3",
+      4: "sm:grid-cols-4",
+      5: "sm:grid-cols-5",
+      6: "sm:grid-cols-6"
+    },
+    gap: {
+      none: "gap-0",
+      sm: "gap-2",
+      md: "gap-4",
+      lg: "gap-6",
+      xl: "gap-8"
+    },
+    justifyItemContent: {
+      start: "justify-items-start",
+      center: "justify-items-center",
+      end: "justify-items-end",
+      stretch: "justify-items-stretch"
+    }
+  },
+  defaultVariants: {
+    columns: 1,
+    gap: "md",
+    justifyItemContent: "stretch"
+  }
+});
+const CardGrid = React.forwardRef(
+  ({
+    className,
+    columns,
+    columnsLg,
+    columnsMd,
+    columnsSm,
+    gap,
+    justifyItemContent,
+    ...props
+  }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        cardGridVariants({
+          columns,
+          columnsLg,
+          columnsMd,
+          columnsSm,
+          gap,
+          justifyItemContent,
+          className
+        })
+      ),
+      ...props
+    }
+  )
+);
+CardGrid.displayName = "CardGrid";
+export {
+  CardGrid,
+  cardGridVariants
+};