@gearbox-protocol/permissionless-ui 1.0.3 → 1.0.5

package/dist/cjs/components/{back-button.js → buttons/back-button.js}

@@ -34,16 +34,22 @@ module.exports = __toCommonJS(back_button_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_lucide_react = require("lucide-react");
 var import_link = __toESM(require("next/link"));
-var import_utils = __toESM(require('../utils/index.js'));
-function BackButton({ href, text, className }) {
+var import_utils = require('../../utils/index.js');
+function BackButton({
+  href,
+  text,
+  onClick,
+  className
+}) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_link.default,
     {
       href,
-      className: (0, import_utils.default)(
+      className: (0, import_utils.cn)(
         "flex items-center text-sm text-muted-foreground hover:text-foreground mb-6",
         className
       ),
+      onClick,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ArrowLeft, { className: "mr-2 h-4 w-4" }),
         text || "Back"

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

@@ -15,12 +15,14 @@ var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "defau
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var buttons_exports = {};
 module.exports = __toCommonJS(buttons_exports);
+__reExport(buttons_exports, require('./back-button.js'), module.exports);
 __reExport(buttons_exports, require('./button.js'), module.exports);
 __reExport(buttons_exports, require('./copy-button.js'), module.exports);
 __reExport(buttons_exports, require('./external-button.js'), module.exports);
 __reExport(buttons_exports, require('./tab-button.js'), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ...require('./back-button.js'),
   ...require('./button.js'),
   ...require('./copy-button.js'),
   ...require('./external-button.js'),

package/dist/cjs/components/editable-table/editable-table.js

@@ -18,15 +18,47 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var editable_table_exports = {};
 __export(editable_table_exports, {
+  TableCellAsset: () => TableCellAsset,
   TableCellUpdatable: () => TableCellUpdatable,
   TableEditable: () => TableEditable
 });
 module.exports = __toCommonJS(editable_table_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_lucide_react = require("lucide-react");
 var import_auth = require('../auth/index.js');
 var import_buttons = require('../buttons/index.js');
 var import_table = require('../table.js');
+var import_token_icon = require('../token-icon.js');
 var import_updated_value = require('./updated-value.js');
+function TableCellAsset({
+  assetAddress,
+  symbol,
+  iconSymbol,
+  comment,
+  explorerUrl
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_table.TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_token_icon.TokenIcon, { symbol: iconSymbol ?? symbol, size: 24 }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "font-medium", children: symbol }),
+      comment && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text-md text-muted-foreground", children: [
+        "(",
+        comment,
+        ")"
+      ] }),
+      explorerUrl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_buttons.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__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ExternalLink, { className: "h-3 w-3" })
+        }
+      )
+    ] })
+  ] }) });
+}
 function TableCellUpdatable({
   oldValue,
   newValue,
@@ -90,6 +122,7 @@ function TableEditable({
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  TableCellAsset,
   TableCellUpdatable,
   TableEditable
 });

package/dist/cjs/components/index.js

@@ -17,7 +17,6 @@ var components_exports = {};
 module.exports = __toCommonJS(components_exports);
 __reExport(components_exports, require('./alert-dialog.js'), module.exports);
 __reExport(components_exports, require('./auth/index.js'), module.exports);
-__reExport(components_exports, require('./back-button.js'), module.exports);
 __reExport(components_exports, require('./badge.js'), module.exports);
 __reExport(components_exports, require('./buttons/index.js'), module.exports);
 __reExport(components_exports, require('./card.js'), module.exports);
@@ -41,7 +40,6 @@ __reExport(components_exports, require('./tooltip.js'), module.exports);
 0 && (module.exports = {
   ...require('./alert-dialog.js'),
   ...require('./auth/index.js'),
-  ...require('./back-button.js'),
   ...require('./badge.js'),
   ...require('./buttons/index.js'),
   ...require('./card.js'),

package/dist/cjs/components/page-layout.js

@@ -22,12 +22,36 @@ __export(page_layout_exports, {
 });
 module.exports = __toCommonJS(page_layout_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_back_button = require('./back-button.js');
-function PageLayout({ children, title, backButton }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-h-screen bg-black text-white p-6", children: [
-    backButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_back_button.BackButton, { href: backButton.href, text: backButton.text }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex justify-between items-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { className: "text-3xl font-bold mb-2", children: title }) }),
-    children
+var import_back_button = require('./buttons/back-button.js');
+var import_card = require('./card.js');
+function PageLayout({
+  children,
+  title,
+  description,
+  icon,
+  backButton,
+  actionButton
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-h-screen bg-black text-white p-6 overflow-y-auto", children: [
+    backButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_back_button.BackButton,
+      {
+        href: backButton.href,
+        text: backButton.text,
+        onClick: backButton.onClick
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center space-x-4 mb-6 w-full", children: [
+      icon,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "w-full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex justify-between items-center w-full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { className: "text-3xl font-bold", children: title }),
+          actionButton
+        ] }),
+        description
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_card.Card, { className: "bg-black border-0 overflow-y-auto", children })
   ] });
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/esm/components/{back-button.js → buttons/back-button.js}

@@ -1,8 +1,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ArrowLeft } from "lucide-react";
 import Link from "next/link";
-import cn from "../utils/index.js";
-function BackButton({ href, text, className }) {
+import { cn } from "../../utils/index.js";
+function BackButton({
+  href,
+  text,
+  onClick,
+  className
+}) {
   return /* @__PURE__ */ jsxs(
     Link,
     {
@@ -11,6 +16,7 @@ function BackButton({ href, text, className }) {
         "flex items-center text-sm text-muted-foreground hover:text-foreground mb-6",
         className
       ),
+      onClick,
       children: [
         /* @__PURE__ */ jsx(ArrowLeft, { className: "mr-2 h-4 w-4" }),
         text || "Back"

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

@@ -1,3 +1,4 @@
+export * from "./back-button.js";
 export * from "./button.js";
 export * from "./copy-button.js";
 export * from "./external-button.js";

package/dist/esm/components/editable-table/editable-table.js

@@ -1,8 +1,39 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { ExternalLink } from "lucide-react";
 import { SignInRequired } from "../auth/index.js";
-import { TabButton } from "../buttons/index.js";
+import { Button, TabButton } from "../buttons/index.js";
 import { Table, TableCell } from "../table.js";
+import { TokenIcon } from "../token-icon.js";
 import { UpdatedValue } from "./updated-value.js";
+function TableCellAsset({
+  assetAddress,
+  symbol,
+  iconSymbol,
+  comment,
+  explorerUrl
+}) {
+  return /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ jsx(TokenIcon, { symbol: iconSymbol ?? symbol, size: 24 }),
+    /* @__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" })
+        }
+      )
+    ] })
+  ] }) });
+}
 function TableCellUpdatable({
   oldValue,
   newValue,
@@ -65,6 +96,7 @@ function TableEditable({
   ] });
 }
 export {
+  TableCellAsset,
   TableCellUpdatable,
   TableEditable
 };

package/dist/esm/components/index.js

@@ -1,6 +1,5 @@
 export * from "./alert-dialog.js";
 export * from "./auth/index.js";
-export * from "./back-button.js";
 export * from "./badge.js";
 export * from "./buttons/index.js";
 export * from "./card.js";

package/dist/esm/components/page-layout.js

@@ -1,10 +1,34 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { BackButton } from "./back-button.js";
-function PageLayout({ children, title, backButton }) {
-  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-black text-white p-6", children: [
-    backButton && /* @__PURE__ */ jsx(BackButton, { href: backButton.href, text: backButton.text }),
-    /* @__PURE__ */ jsx("div", { className: "flex justify-between items-center", children: /* @__PURE__ */ jsx("h1", { className: "text-3xl font-bold mb-2", children: title }) }),
-    children
+import { BackButton } from "./buttons/back-button.js";
+import { Card } from "./card.js";
+function PageLayout({
+  children,
+  title,
+  description,
+  icon,
+  backButton,
+  actionButton
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-black text-white p-6 overflow-y-auto", children: [
+    backButton && /* @__PURE__ */ jsx(
+      BackButton,
+      {
+        href: backButton.href,
+        text: backButton.text,
+        onClick: backButton.onClick
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-4 mb-6 w-full", children: [
+      icon,
+      /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center w-full", children: [
+          /* @__PURE__ */ jsx("h1", { className: "text-3xl font-bold", children: title }),
+          actionButton
+        ] }),
+        description
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Card, { className: "bg-black border-0 overflow-y-auto", children })
   ] });
 }
 export {

package/dist/types/components/buttons/back-button.d.ts

@@ -0,0 +1,8 @@
+interface BackButtonProps {
+    href: string;
+    text?: string;
+    onClick?: () => void;
+    className?: string;
+}
+export declare function BackButton({ href, text, onClick, className, }: BackButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/buttons/button.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "pink" | "pink-outline" | "blue" | "blue-outline" | null | undefined;
+    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | "pink" | "pink-outline" | "blue" | "blue-outline" | null | undefined;
     size?: "default" | "xs" | "sm" | "lg" | "icon" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {

package/dist/types/components/buttons/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./back-button";
 export * from "./button";
 export * from "./copy-button";
 export * from "./external-button";

package/dist/types/components/editable-table/editable-table.d.ts

@@ -1,3 +1,12 @@
+import type { Address } from "viem";
+interface TableCellAssetProps {
+    assetAddress: Address;
+    symbol: string;
+    comment?: string;
+    explorerUrl?: string;
+    iconSymbol?: string;
+}
+export declare function TableCellAsset({ assetAddress, symbol, iconSymbol, comment, explorerUrl, }: TableCellAssetProps): import("react/jsx-runtime").JSX.Element;
 export interface TableCellUpdatableProps {
     oldValue?: string;
     newValue: string;

package/dist/types/components/index.d.ts

@@ -1,6 +1,5 @@
 export * from "./alert-dialog";
 export * from "./auth";
-export * from "./back-button";
 export * from "./badge";
 export * from "./buttons";
 export * from "./card";

package/dist/types/components/page-layout.d.ts

@@ -1,10 +1,14 @@
 interface PageLayoutProps {
     children: React.ReactNode;
     title: string;
+    description?: JSX.Element;
+    icon?: JSX.Element;
     backButton?: {
         href: string;
-        text: string;
+        text?: string;
+        onClick?: () => void;
     };
+    actionButton?: JSX.Element;
 }
-export declare function PageLayout({ children, title, backButton }: PageLayoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function PageLayout({ children, title, description, icon, backButton, actionButton, }: PageLayoutProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gearbox-protocol/permissionless-ui",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "Internal UI components",
   "license": "MIT",
   "main": "./dist/cjs/index.js",

package/dist/types/components/back-button.d.ts

@@ -1,7 +0,0 @@
-interface BackButtonProps {
-    href: string;
-    text?: string;
-    className?: string;
-}
-export declare function BackButton({ href, text, className }: BackButtonProps): import("react/jsx-runtime").JSX.Element;
-export {};