@gearbox-protocol/permissionless-ui 1.7.2 → 1.7.4

package/README.md

@@ -117,6 +117,133 @@ import { Link } from 'react-router-dom';
 <BackButton href="/back" LinkComponent={Link} />
 ```
 
+## Dependencies
+
+### Required Peer Dependencies
+
+These dependencies must be installed in your project:
+
+```bash
+pnpm install react react-dom @gearbox-protocol/sdk @tanstack/react-query viem wagmi connectkit reactochart
+```
+
+| Package | Version | Description |
+|---------|---------|-------------|
+| `react` | ^18 \|\| ^19 | React library |
+| `react-dom` | ^18 \|\| ^19 | React DOM |
+| `@gearbox-protocol/sdk` | * | Gearbox Protocol SDK |
+| `@tanstack/react-query` | ^5.64.1 | Data fetching and caching |
+| `viem` | ^2.0.0 | Ethereum library |
+| `wagmi` | ^2.0.0 | React hooks for Ethereum |
+| `connectkit` | ^1.8.0 | Wallet connection UI |
+| `reactochart` | ^6.1.1 | Charts library (used in Graph components) |
+
+### Optional Peer Dependencies
+
+Install only if you use specific features:
+
+| Package | Version | When to Install |
+|---------|---------|-----------------|
+| `next` | >=13 | Using `@gearbox-protocol/permissionless-ui/next` exports |
+| `react-intl` | ^6.0.0 \|\| ^7.0.0 | Using internationalization features |
+| `react-router-dom` | ^6.0.0 \|\| ^7.0.0 | Using router-based navigation (non-Next.js) |
+| `sonner` | ^2.0.0 | Using toast notifications |
+
+### Installation Examples
+
+**Minimal setup (basic components only):**
+```bash
+pnpm install @gearbox-protocol/permissionless-ui react react-dom
+```
+
+**Full Web3 setup:**
+```bash
+pnpm install @gearbox-protocol/permissionless-ui \
+  react react-dom \
+  @gearbox-protocol/sdk @tanstack/react-query \
+  viem wagmi connectkit reactochart
+```
+
+**With Next.js:**
+```bash
+pnpm install @gearbox-protocol/permissionless-ui \
+  react react-dom next \
+  @gearbox-protocol/sdk @tanstack/react-query \
+  viem wagmi connectkit reactochart
+```
+
+**With routing (React Router):**
+```bash
+pnpm install @gearbox-protocol/permissionless-ui \
+  react react-dom react-router-dom \
+  @gearbox-protocol/sdk @tanstack/react-query \
+  viem wagmi connectkit reactochart
+```
+
+**With internationalization:**
+```bash
+pnpm install @gearbox-protocol/permissionless-ui react-intl
+```
+
+## Package Exports
+
+The library provides several entry points:
+
+| Export | Description |
+|--------|-------------|
+| `@gearbox-protocol/permissionless-ui` | Main entry - all framework-agnostic components |
+| `@gearbox-protocol/permissionless-ui/next` | Next.js optimized components (Image, Link, Router) |
+| `@gearbox-protocol/permissionless-ui/preset` | Tailwind CSS preset |
+| `@gearbox-protocol/permissionless-ui/tailwind` | Tailwind CSS config |
+| `@gearbox-protocol/permissionless-ui/globals.css` | Global CSS styles |
+| `@gearbox-protocol/permissionless-ui/grid-safelist.css` | Grid safelist CSS |
+
+## Troubleshooting
+
+### Module not found errors
+
+If you see errors like `Cannot find module '@gearbox-protocol/sdk'`, install the missing peer dependency:
+
+```bash
+pnpm install @gearbox-protocol/sdk
+```
+
+### TypeScript errors
+
+Install type definitions for React:
+
+```bash
+pnpm install -D @types/react @types/react-dom
+```
+
+### Tailwind styles not working
+
+1. Make sure you've added the library's dist folder to your Tailwind content config:
+
+```typescript
+content: [
+  "./node_modules/@gearbox-protocol/permissionless-ui/dist/**/*.js",
+]
+```
+
+2. Import the global styles in your entry file:
+
+```typescript
+import "@gearbox-protocol/permissionless-ui/globals.css";
+```
+
+### Next.js specific components not working
+
+Make sure you've installed Next.js and are importing from the correct path:
+
+```typescript
+// ✅ Correct
+import { TokenIcon } from '@gearbox-protocol/permissionless-ui/next';
+
+// ❌ Wrong - these won't have Next.js optimizations
+import { TokenIcon } from '@gearbox-protocol/permissionless-ui';
+```
+
 ## Migration
 
 If you're migrating from a version that required Next.js, see [MIGRATION.md](./MIGRATION.md) for detailed instructions.

package/dist/cjs/components/alert-dialog/alert-dialog.cjs

@@ -0,0 +1,148 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
+const React = require('react');
+require('../buttons/back-button/back-button.cjs');
+const components_buttons_button_button = require('../buttons/button/button.cjs');
+require('../buttons/copy-button/copy-button.cjs');
+require('../buttons/external-button/external-button.cjs');
+require('../buttons/filter-button/filter-button.cjs');
+require('../buttons/navigation-button/navigation-button.cjs');
+const utils_cn = require('../../utils/cn.cjs');
+require('sonner');
+require('@gearbox-protocol/sdk');
+require('../buttons/tab-button/tab-button.cjs');
+
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const AlertDialogPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(AlertDialogPrimitive);
+const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const AlertDialog = AlertDialogPrimitive__namespace.Root;
+const AlertDialogTrigger = AlertDialogPrimitive__namespace.Trigger;
+const AlertDialogPortal = AlertDialogPrimitive__namespace.Portal;
+const AlertDialogOverlay = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  AlertDialogPrimitive__namespace.Overlay,
+  {
+    className: utils_cn.cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props,
+    ref
+  }
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive__namespace.Overlay.displayName;
+const AlertDialogContent = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogPortal, { children: [
+  /* @__PURE__ */ jsxRuntime.jsx(AlertDialogOverlay, {}),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    AlertDialogPrimitive__namespace.Content,
+    {
+      ref,
+      className: utils_cn.cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-input bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      ),
+      ...props
+    }
+  )
+] }));
+AlertDialogContent.displayName = AlertDialogPrimitive__namespace.Content.displayName;
+const AlertDialogHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    className: utils_cn.cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    ),
+    ...props
+  }
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";
+const AlertDialogFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    className: utils_cn.cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    ),
+    ...props
+  }
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
+const AlertDialogTitle = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  AlertDialogPrimitive__namespace.Title,
+  {
+    ref,
+    className: utils_cn.cn("text-lg font-semibold", className),
+    ...props
+  }
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive__namespace.Title.displayName;
+const AlertDialogDescription = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  AlertDialogPrimitive__namespace.Description,
+  {
+    ref,
+    className: utils_cn.cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+AlertDialogDescription.displayName = AlertDialogPrimitive__namespace.Description.displayName;
+const AlertDialogAction = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  AlertDialogPrimitive__namespace.Action,
+  {
+    ref,
+    className: utils_cn.cn(components_buttons_button_button.buttonVariants(), className),
+    ...props
+  }
+));
+AlertDialogAction.displayName = AlertDialogPrimitive__namespace.Action.displayName;
+const AlertDialogCancel = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  AlertDialogPrimitive__namespace.Cancel,
+  {
+    ref,
+    className: utils_cn.cn(
+      components_buttons_button_button.buttonVariants({ variant: "outline" }),
+      "mt-2 sm:mt-0",
+      className
+    ),
+    ...props
+  }
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive__namespace.Cancel.displayName;
+
+exports.AlertDialog = AlertDialog;
+exports.AlertDialogAction = AlertDialogAction;
+exports.AlertDialogCancel = AlertDialogCancel;
+exports.AlertDialogContent = AlertDialogContent;
+exports.AlertDialogDescription = AlertDialogDescription;
+exports.AlertDialogFooter = AlertDialogFooter;
+exports.AlertDialogHeader = AlertDialogHeader;
+exports.AlertDialogOverlay = AlertDialogOverlay;
+exports.AlertDialogPortal = AlertDialogPortal;
+exports.AlertDialogTitle = AlertDialogTitle;
+exports.AlertDialogTrigger = AlertDialogTrigger;

package/dist/cjs/components/alert-dialog/index.cjs

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const components_alertDialog_alertDialog = require('./alert-dialog.cjs');
+
+
+
+exports.AlertDialog = components_alertDialog_alertDialog.AlertDialog;
+exports.AlertDialogAction = components_alertDialog_alertDialog.AlertDialogAction;
+exports.AlertDialogCancel = components_alertDialog_alertDialog.AlertDialogCancel;
+exports.AlertDialogContent = components_alertDialog_alertDialog.AlertDialogContent;
+exports.AlertDialogDescription = components_alertDialog_alertDialog.AlertDialogDescription;
+exports.AlertDialogFooter = components_alertDialog_alertDialog.AlertDialogFooter;
+exports.AlertDialogHeader = components_alertDialog_alertDialog.AlertDialogHeader;
+exports.AlertDialogOverlay = components_alertDialog_alertDialog.AlertDialogOverlay;
+exports.AlertDialogPortal = components_alertDialog_alertDialog.AlertDialogPortal;
+exports.AlertDialogTitle = components_alertDialog_alertDialog.AlertDialogTitle;
+exports.AlertDialogTrigger = components_alertDialog_alertDialog.AlertDialogTrigger;

package/dist/cjs/components/asset-line/asset-line.cjs

@@ -0,0 +1,108 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const components_description_description = require('../description/description.cjs');
+const components_shortString_shortString = require('../short-string/short-string.cjs');
+const components_table_gridTable = require('../table/grid-table.cjs');
+const components_tokenSymbol_tokenSymbol = require('../token-symbol/token-symbol.cjs');
+const components_vspace_vspace = require('../vspace/vspace.cjs');
+const utils_cn = require('../../utils/cn.cjs');
+require('sonner');
+require('@gearbox-protocol/sdk');
+
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+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__namespace.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__ */ jsxRuntime.jsxs(
+      components_table_gridTable.GridTableRow,
+      {
+        ref,
+        className: utils_cn.cn(
+          last && "[&>*]:border-0",
+          onSelect && "cursor-pointer",
+          className
+        ),
+        onClick: onSelect,
+        cols: hideValue ? "1fr" : "1fr 1fr",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(components_table_gridTable.GridTableCell, { size: cellSize, className: "text-left", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              components_tokenSymbol_tokenSymbol.TokenSymbol,
+              {
+                token,
+                size: ICON_SIZES[iconSize],
+                chainId,
+                network
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+              label && /* @__PURE__ */ jsxRuntime.jsx(components_shortString_shortString.ShortString, { maxLength: symbolMaxLength, children: label }),
+              label && tokenDescription && /* @__PURE__ */ jsxRuntime.jsx(components_vspace_vspace.VSpace, { height: GAP_SIZES[gapSize] }),
+              tokenDescription && /* @__PURE__ */ jsxRuntime.jsx(components_description_description.Description, { children: /* @__PURE__ */ jsxRuntime.jsx(components_shortString_shortString.ShortString, { maxLength: descriptionMaxLength, children: String(tokenDescription) }) })
+            ] })
+          ] }) }),
+          !hideValue && /* @__PURE__ */ jsxRuntime.jsxs(components_table_gridTable.GridTableCell, { size: cellSize, className: "text-right", children: [
+            value,
+            value && valueDescription && /* @__PURE__ */ jsxRuntime.jsx(components_vspace_vspace.VSpace, { height: GAP_SIZES[gapSize] }),
+            valueDescription && /* @__PURE__ */ jsxRuntime.jsx(components_description_description.Description, { children: valueDescription })
+          ] })
+        ]
+      }
+    );
+  }
+);
+AssetLine.displayName = "AssetLine";
+
+exports.AssetLine = AssetLine;

package/dist/cjs/components/asset-line/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const components_assetLine_assetLine = require('./asset-line.cjs');
+
+
+
+exports.AssetLine = components_assetLine_assetLine.AssetLine;

package/dist/cjs/components/assets-list-cell/assets-list-cell.cjs

@@ -0,0 +1,52 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
+require('../buttons/back-button/back-button.cjs');
+const components_buttons_button_button = require('../buttons/button/button.cjs');
+require('../buttons/copy-button/copy-button.cjs');
+require('../buttons/external-button/external-button.cjs');
+require('../buttons/filter-button/filter-button.cjs');
+require('../buttons/navigation-button/navigation-button.cjs');
+require('react');
+const utils_cn = require('../../utils/cn.cjs');
+require('sonner');
+require('@gearbox-protocol/sdk');
+require('../buttons/tab-button/tab-button.cjs');
+const components_tokenIcon_tokenIcon = require('../token-icon/token-icon.cjs');
+
+function AssetsListCell({
+  assetAddress,
+  symbol,
+  iconSymbol,
+  comment,
+  explorerUrl,
+  iconSize = 24,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_cn.cn("flex items-center gap-3", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(components_tokenIcon_tokenIcon.TokenIcon, { symbol: iconSymbol ?? symbol, size: iconSize }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium", children: symbol }),
+      comment && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-md text-muted-foreground", children: [
+        "(",
+        comment,
+        ")"
+      ] }),
+      explorerUrl && /* @__PURE__ */ jsxRuntime.jsx(
+        components_buttons_button_button.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__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { className: "h-3 w-3" })
+        }
+      )
+    ] })
+  ] });
+}
+
+exports.AssetsListCell = AssetsListCell;

package/dist/cjs/components/assets-list-cell/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const components_assetsListCell_assetsListCell = require('./assets-list-cell.cjs');
+
+
+
+exports.AssetsListCell = components_assetsListCell_assetsListCell.AssetsListCell;

package/dist/cjs/components/assets-ratio/assets-ratio.cjs

@@ -0,0 +1,88 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const sdk = require('@gearbox-protocol/sdk');
+const React = require('react');
+const utils_cn = require('../../utils/cn.cjs');
+require('sonner');
+
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+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__namespace.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 * sdk.PERCENTAGE_FACTOR * sdk.PERCENTAGE_DECIMALS / total
+      ) / Number(sdk.PERCENTAGE_FACTOR) : Number(sdk.PERCENTAGE_FACTOR)
+    );
+    const restInPercent = total > 0n ? Number(rest * sdk.PERCENTAGE_FACTOR * sdk.PERCENTAGE_DECIMALS / total) / Number(sdk.PERCENTAGE_FACTOR) : 0;
+    return [top3InPercent, restInPercent];
+  }, [assets]);
+  const hasLastAsset = restAssets > 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className: utils_cn.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__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: utils_cn.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__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: utils_cn.cn("relative inline-flex h-full", DEFAULT_COLOR),
+            style: { width: `${restAssets}%` }
+          }
+        )
+      ]
+    }
+  );
+}
+
+exports.AssetsRatio = AssetsRatio;

package/dist/cjs/components/assets-ratio/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const components_assetsRatio_assetsRatio = require('./assets-ratio.cjs');
+
+
+
+exports.AssetsRatio = components_assetsRatio_assetsRatio.AssetsRatio;

package/dist/cjs/components/auth/index.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const components_auth_signinRequired = require('./signin-required.cjs');
+const components_auth_siweProvider = require('./siwe-provider.cjs');
+
+
+
+exports.SignInRequired = components_auth_signinRequired.SignInRequired;
+exports.SIWEClientProvider = components_auth_siweProvider.SIWEClientProvider;

package/dist/cjs/components/auth/signin-required.cjs

@@ -0,0 +1,63 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const connectkit = require('connectkit');
+const wagmi = require('wagmi');
+require('../buttons/back-button/back-button.cjs');
+const components_buttons_button_button = require('../buttons/button/button.cjs');
+require('../buttons/copy-button/copy-button.cjs');
+require('../buttons/external-button/external-button.cjs');
+require('../buttons/filter-button/filter-button.cjs');
+require('../buttons/navigation-button/navigation-button.cjs');
+require('react');
+require('clsx');
+require('tailwind-merge');
+require('sonner');
+const utils_format = require('../../utils/format.cjs');
+require('@gearbox-protocol/sdk');
+const components_buttons_tabButton_tabButton = require('../buttons/tab-button/tab-button.cjs');
+
+function SignInRequired({
+  children,
+  owner,
+  skipSignIn,
+  ...customProps
+}) {
+  const { setOpen, openSIWE } = connectkit.useModal();
+  const { isConnected, address } = wagmi.useAccount();
+  const { isRejected, isLoading, isSignedIn, data } = connectkit.useSIWE();
+  const ButtonComponent = Object.keys(customProps).length > 0 ? components_buttons_button_button.Button : components_buttons_tabButton_tabButton.TabButton;
+  if (isSignedIn || skipSignIn) {
+    if (owner && data?.address?.toLowerCase() !== owner.toLowerCase()) {
+      return /* @__PURE__ */ jsxRuntime.jsx(ButtonComponent, { ...customProps, disabled: true, children: "You are not the author" });
+    }
+    return children;
+  }
+  if (isConnected && address) {
+    if (isRejected) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        ButtonComponent,
+        {
+          ...customProps,
+          onClick: () => setOpen(true),
+          disabled: isLoading,
+          children: "Try Again"
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ButtonComponent,
+      {
+        ...customProps,
+        onClick: () => openSIWE(),
+        disabled: isLoading,
+        children: isLoading ? "Awaiting request..." : `Sign In as ${utils_format.shortenHash(address)}`
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(ButtonComponent, { ...customProps, onClick: () => setOpen(true), children: "Connect Wallet" });
+}
+
+exports.SignInRequired = SignInRequired;