@gearbox-protocol/permissionless-ui 1.7.2 → 1.7.4

package/dist/esm/components/asset-line/asset-line.js

@@ -0,0 +1,85 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Description } from '../description/description.js';
+import { ShortString } from '../short-string/short-string.js';
+import { GridTableRow, GridTableCell } from '../table/grid-table.js';
+import { TokenSymbol } from '../token-symbol/token-symbol.js';
+import { VSpace } from '../vspace/vspace.js';
+import { cn } from '../../utils/cn.js';
+import 'sonner';
+import '@gearbox-protocol/sdk';
+
+const ICON_SIZES = {
+  default: 24,
+  sm: 20,
+  md: 24,
+  lg: 28
+};
+const GAP_SIZES = {
+  default: 0,
+  sm: 2,
+  md: 4,
+  lg: 4
+};
+const AssetLine = React.forwardRef(
+  ({
+    token,
+    tokenLabel,
+    tokenDescription,
+    network,
+    chainId,
+    value,
+    valueDescription,
+    size = "default",
+    iconSize = size,
+    gapSize = size,
+    last,
+    symbolMaxLength,
+    descriptionMaxLength,
+    onSelect,
+    hideValue = false,
+    className
+  }, ref) => {
+    const label = tokenLabel || token?.title;
+    const cellSize = size === "md" ? "default" : size;
+    return /* @__PURE__ */ jsxs(
+      GridTableRow,
+      {
+        ref,
+        className: cn(
+          last && "[&>*]:border-0",
+          onSelect && "cursor-pointer",
+          className
+        ),
+        onClick: onSelect,
+        cols: hideValue ? "1fr" : "1fr 1fr",
+        children: [
+          /* @__PURE__ */ jsx(GridTableCell, { size: cellSize, className: "text-left", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx(
+              TokenSymbol,
+              {
+                token,
+                size: ICON_SIZES[iconSize],
+                chainId,
+                network
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+              label && /* @__PURE__ */ jsx(ShortString, { maxLength: symbolMaxLength, children: label }),
+              label && tokenDescription && /* @__PURE__ */ jsx(VSpace, { height: GAP_SIZES[gapSize] }),
+              tokenDescription && /* @__PURE__ */ jsx(Description, { children: /* @__PURE__ */ jsx(ShortString, { maxLength: descriptionMaxLength, children: String(tokenDescription) }) })
+            ] })
+          ] }) }),
+          !hideValue && /* @__PURE__ */ jsxs(GridTableCell, { size: cellSize, className: "text-right", children: [
+            value,
+            value && valueDescription && /* @__PURE__ */ jsx(VSpace, { height: GAP_SIZES[gapSize] }),
+            valueDescription && /* @__PURE__ */ jsx(Description, { children: valueDescription })
+          ] })
+        ]
+      }
+    );
+  }
+);
+AssetLine.displayName = "AssetLine";
+
+export { AssetLine };

package/dist/esm/components/asset-line/index.js

@@ -0,0 +1 @@
+export { AssetLine } from './asset-line.js';

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

@@ -0,0 +1,48 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ExternalLink } from 'lucide-react';
+import '../buttons/back-button/back-button.js';
+import { Button } from '../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 'react';
+import { cn } from '../../utils/cn.js';
+import 'sonner';
+import '@gearbox-protocol/sdk';
+import '../buttons/tab-button/tab-button.js';
+import { TokenIcon } from '../token-icon/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-foreground 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-list-cell/index.js

@@ -0,0 +1 @@
+export { AssetsListCell } from './assets-list-cell.js';

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

@@ -0,0 +1,65 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { PERCENTAGE_FACTOR, PERCENTAGE_DECIMALS } from '@gearbox-protocol/sdk';
+import * as React from 'react';
+import { cn } from '../../utils/cn.js';
+import 'sonner';
+
+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/assets-ratio/index.js

@@ -0,0 +1 @@
+export { AssetsRatio } from './assets-ratio.js';

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

@@ -1,2 +1,2 @@
-export * from "./signin-required.js";
-export * from "./siwe-provider.js";
+export { SignInRequired } from './signin-required.js';
+export { SIWEClientProvider } from './siwe-provider.js';

package/dist/esm/components/auth/signin-required.js

@@ -1,9 +1,20 @@
-"use client";
-import { jsx } from "react/jsx-runtime";
-import { useModal, useSIWE } from "connectkit";
-import { useAccount } from "wagmi";
-import { shortenHash } from "../../utils/index.js";
-import { Button, TabButton } from "../buttons/index.js";
+import { jsx } from 'react/jsx-runtime';
+import { useModal, useSIWE } from 'connectkit';
+import { useAccount } from 'wagmi';
+import '../buttons/back-button/back-button.js';
+import { Button } from '../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 'react';
+import 'clsx';
+import 'tailwind-merge';
+import 'sonner';
+import { shortenHash } from '../../utils/format.js';
+import '@gearbox-protocol/sdk';
+import { TabButton } from '../buttons/tab-button/tab-button.js';
+
 function SignInRequired({
   children,
   owner,
@@ -44,6 +55,5 @@ function SignInRequired({
   }
   return /* @__PURE__ */ jsx(ButtonComponent, { ...customProps, onClick: () => setOpen(true), children: "Connect Wallet" });
 }
-export {
-  SignInRequired
-};
+
+export { SignInRequired };

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

@@ -1,6 +1,7 @@
-import { jsx } from "react/jsx-runtime";
-import { SIWEProvider } from "connectkit";
-import { createSiweMessage } from "viem/siwe";
+import { jsx } from 'react/jsx-runtime';
+import { SIWEProvider } from 'connectkit';
+import { createSiweMessage } from 'viem/siwe';
+
 function SIWEClientProvider({
   apiRoutePrefix,
   statement,
@@ -71,6 +72,5 @@ function SIWEClientProvider({
     }
   );
 }
-export {
-  SIWEClientProvider
-};
+
+export { SIWEClientProvider };

package/dist/esm/components/badge/badge.js

@@ -0,0 +1,28 @@
+import { jsx } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+import 'react';
+import { cn } from '../../utils/cn.js';
+import 'sonner';
+import '@gearbox-protocol/sdk';
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-auto",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "border-input text-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({ className, variant, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn(badgeVariants({ variant }), className), ...props });
+}
+
+export { Badge, badgeVariants };

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

@@ -0,0 +1 @@
+export { Badge, badgeVariants } from './badge.js';

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

@@ -0,0 +1,29 @@
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import * as React from 'react';
+import { cn } from '../../utils/cn.js';
+import 'sonner';
+import '@gearbox-protocol/sdk';
+
+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/base-link/index.js

@@ -0,0 +1 @@
+export { BaseLink } from './base-link.js';

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

@@ -0,0 +1,93 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect, useMemo } from 'react';
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '../tooltip/tooltip.js';
+import { cn } from '../../utils/cn.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-destructive" : "text-success"),
+        children: "Status"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "w-2 h-2 rounded-full",
+          isError ? "bg-destructive" : "bg-success"
+        )
+      }
+    )
+  ] });
+  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/block-sync/index.js

@@ -0,0 +1 @@
+export { BlockSync } from './block-sync.js';

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

@@ -0,0 +1,46 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ChevronRight } from 'lucide-react';
+import { Link } from 'react-router-dom';
+import 'react';
+import { cn } from '../../utils/cn.js';
+import 'sonner';
+import '@gearbox-protocol/sdk';
+
+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/breadcrumbs/index.js

@@ -0,0 +1 @@
+export { BreadCrumbs } from './breadcrumbs.js';

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

@@ -0,0 +1,58 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+import { ArrowLeft } from 'lucide-react';
+import 'react';
+import { cn } from '../../../utils/cn.js';
+import 'sonner';
+import '@gearbox-protocol/sdk';
+
+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,
+  variant,
+  size,
+  LinkComponent = DefaultLink
+}) {
+  return /* @__PURE__ */ jsxs(
+    LinkComponent,
+    {
+      href,
+      className: cn(backButtonVariants({ variant, size, className })),
+      onClick,
+      children: [
+        /* @__PURE__ */ jsx(ArrowLeft, { className: "mr-2 h-4 w-4" }),
+        text || "Back"
+      ]
+    }
+  );
+}
+
+export { BackButton, backButtonVariants };

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

@@ -0,0 +1 @@
+export { BackButton, backButtonVariants } from './back-button.js';

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

@@ -0,0 +1,56 @@
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+import { cn } from '../../../utils/cn.js';
+import 'sonner';
+import '@gearbox-protocol/sdk';
+
+const buttonVariants = cva(
+  "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:not([style*='width']):not([style*='height'])]:size-4 [&_svg]:shrink-0 border border-transparent outline-none focus-visible:outline-none",
+  {
+    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-input bg-background shadow-sm hover:bg-secondary hover:text-foreground text-foreground",
+        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-secondary hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+        text: "text-muted-foreground hover:text-foreground hover:bg-transparent",
+        pink: "bg-pink-700 hover:bg-pink-600 disabled:bg-pink-700 text-primary-foreground",
+        "pink-outline": "border-pink-700 hover:border-pink-600 disabled:border-pink-700 text-foreground",
+        blue: "bg-blue-800 hover:bg-blue-700 disabled:bg-blue-700 text-primary-foreground",
+        "blue-outline": "border-blue-800 hover:border-blue-700 disabled:border-blue-800 text-foreground"
+      },
+      size: {
+        auto: "h-auto p-1.5",
+        xs: "rounded-full px-3 py-0.5 text-xs",
+        sm: "h-8 rounded-md px-3 text-xs",
+        default: "h-9 px-4 py-2",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+const Button = React.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

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

@@ -0,0 +1 @@
+export { Button, buttonVariants } from './button.js';

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

@@ -0,0 +1,34 @@
+import { jsx } from 'react/jsx-runtime';
+import { Copy } from 'lucide-react';
+import * as React from 'react';
+import { Button } from '../button/button.js';
+import { cn } from '../../../utils/cn.js';
+import { copyToClipboard } from '../../../utils/copy.js';
+import '@gearbox-protocol/sdk';
+
+const iconSizeMap = {
+  "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"
+};
+const CopyButton = React.forwardRef(
+  ({ text, name, className, iconSize = "3.5", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        ref,
+        variant: "text",
+        size: "auto",
+        className,
+        onClick: () => copyToClipboard({ text, name }),
+        ...props,
+        children: /* @__PURE__ */ jsx(Copy, { className: cn(iconSizeMap[iconSize]) })
+      }
+    );
+  }
+);
+CopyButton.displayName = "CopyButton";
+
+export { CopyButton };

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

@@ -0,0 +1 @@
+export { CopyButton } from './copy-button.js';