@gearbox-protocol/permissionless-ui 1.0.7 → 1.1.0

package/dist/cjs/components/index.js

@@ -30,6 +30,7 @@ __reExport(components_exports, require('./label.js'), module.exports);
 __reExport(components_exports, require('./page-layout.js'), module.exports);
 __reExport(components_exports, require('./search-bar.js'), module.exports);
 __reExport(components_exports, require('./select.js'), module.exports);
+__reExport(components_exports, require('./signatures/index.js'), module.exports);
 __reExport(components_exports, require('./skeleton.js'), module.exports);
 __reExport(components_exports, require('./table.js'), module.exports);
 __reExport(components_exports, require('./tabs.js'), module.exports);
@@ -53,6 +54,7 @@ __reExport(components_exports, require('./tooltip.js'), module.exports);
   ...require('./page-layout.js'),
   ...require('./search-bar.js'),
   ...require('./select.js'),
+  ...require('./signatures/index.js'),
   ...require('./skeleton.js'),
   ...require('./table.js'),
   ...require('./tabs.js'),

package/dist/cjs/components/signatures/confirmation-item.js

@@ -0,0 +1,48 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var confirmation_item_exports = {};
+__export(confirmation_item_exports, {
+  ConfirmationItem: () => ConfirmationItem
+});
+module.exports = __toCommonJS(confirmation_item_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_utils = require('../../utils/index.js');
+var import_buttons = require('../buttons/index.js');
+var import_copy_button = require('../buttons/copy-button.js');
+var import_identicon = require('./identicon.js');
+function ConfirmationItem({
+  confirmation,
+  note,
+  explorerUrl
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "group relative flex items-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute left-[8px] h-2 w-2 rounded-full bg-green-500" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ml-10 flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_identicon.Identicon, { address: confirmation, size: 32 }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-white", children: (0, import_utils.shortenHash)(confirmation) }),
+      note && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-gray-500 text-xs", children: note }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_copy_button.CopyButton, { text: confirmation }),
+      explorerUrl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_buttons.ExternalButton, { url: explorerUrl })
+    ] })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ConfirmationItem
+});

package/dist/cjs/components/signatures/identicon.js

@@ -0,0 +1,41 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var identicon_exports = {};
+__export(identicon_exports, {
+  Identicon: () => Identicon
+});
+module.exports = __toCommonJS(identicon_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+function Identicon({
+  address,
+  size = 32
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: "rounded-full bg-gray-700 flex items-center justify-center text-white text-xs",
+      style: { width: size, height: size },
+      children: address.slice(2, 4)
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Identicon
+});

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

@@ -0,0 +1,26 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var signatures_exports = {};
+module.exports = __toCommonJS(signatures_exports);
+__reExport(signatures_exports, require('./confirmation-item.js'), module.exports);
+__reExport(signatures_exports, require('./identicon.js'), module.exports);
+__reExport(signatures_exports, require('./vertical-timeline.js'), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require('./confirmation-item.js'),
+  ...require('./identicon.js'),
+  ...require('./vertical-timeline.js')
+});

package/dist/cjs/components/signatures/vertical-timeline.js

@@ -0,0 +1,79 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var vertical_timeline_exports = {};
+__export(vertical_timeline_exports, {
+  VerticalTimeline: () => VerticalTimeline
+});
+module.exports = __toCommonJS(vertical_timeline_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_lucide_react = require("lucide-react");
+var import_react = require("react");
+function VerticalTimeline({
+  steps,
+  minWidth = 300
+}) {
+  const [showAll, setShowAll] = (0, import_react.useState)(steps.map(() => false));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `relative min-w-[${minWidth}px]`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute left-[11px] top-[2px] bottom-[20px] w-[2px] h-[calc(100% - 20px)] bg-gray-800" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "space-y-4", children: steps.map((step, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        children: [
+          step.type === "default" && step.status !== "not-started" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative flex items-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "div",
+              {
+                className: `absolute left-[2px] flex h-5 w-5 items-center justify-center rounded-full ${step.status === "success" ? "bg-green-500" : step.status === "error" ? "bg-red-500" : "border-2 border-gray-600 bg-transparent"}`,
+                children: [
+                  step.status === "success" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Check, { className: "h-3 w-3 text-black" }),
+                  step.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.X, { className: "h-3 w-3 text-black" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ml-10 text-white", children: step.title })
+          ] }),
+          step.type === "extention" && step.status !== "not-started" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative flex items-center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute left-[8px] h-2 w-2 rounded-full bg-green-500" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setShowAll([
+                    ...showAll.slice(0, index),
+                    !showAll[index],
+                    ...showAll.slice(index + 1)
+                  ]),
+                  className: "ml-10 text-green-500 hover:underline",
+                  children: showAll ? "Hide all" : "Show all"
+                }
+              )
+            ] }),
+            showAll[index] && step.children
+          ] })
+        ]
+      },
+      `step-${index}`
+    )) })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  VerticalTimeline
+});

package/dist/esm/components/index.js

@@ -13,6 +13,7 @@ export * from "./label.js";
 export * from "./page-layout.js";
 export * from "./search-bar.js";
 export * from "./select.js";
+export * from "./signatures/index.js";
 export * from "./skeleton.js";
 export * from "./table.js";
 export * from "./tabs.js";

package/dist/esm/components/signatures/confirmation-item.js

@@ -0,0 +1,24 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { shortenHash } from "../../utils/index.js";
+import { ExternalButton } from "../buttons/index.js";
+import { CopyButton } from "../buttons/copy-button.js";
+import { Identicon } from "./identicon.js";
+function ConfirmationItem({
+  confirmation,
+  note,
+  explorerUrl
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "group relative flex items-center", children: [
+    /* @__PURE__ */ jsx("div", { className: "absolute left-[8px] h-2 w-2 rounded-full bg-green-500" }),
+    /* @__PURE__ */ jsxs("div", { className: "ml-10 flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Identicon, { address: confirmation, size: 32 }),
+      /* @__PURE__ */ jsx("span", { className: "text-white", children: shortenHash(confirmation) }),
+      note && /* @__PURE__ */ jsx("span", { className: "text-gray-500 text-xs", children: note }),
+      /* @__PURE__ */ jsx(CopyButton, { text: confirmation }),
+      explorerUrl && /* @__PURE__ */ jsx(ExternalButton, { url: explorerUrl })
+    ] })
+  ] });
+}
+export {
+  ConfirmationItem
+};

package/dist/esm/components/signatures/identicon.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+function Identicon({
+  address,
+  size = 32
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "rounded-full bg-gray-700 flex items-center justify-center text-white text-xs",
+      style: { width: size, height: size },
+      children: address.slice(2, 4)
+    }
+  );
+}
+export {
+  Identicon
+};

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

@@ -0,0 +1,3 @@
+export * from "./confirmation-item.js";
+export * from "./identicon.js";
+export * from "./vertical-timeline.js";

package/dist/esm/components/signatures/vertical-timeline.js

@@ -0,0 +1,55 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, X } from "lucide-react";
+import { useState } from "react";
+function VerticalTimeline({
+  steps,
+  minWidth = 300
+}) {
+  const [showAll, setShowAll] = useState(steps.map(() => false));
+  return /* @__PURE__ */ jsxs("div", { className: `relative min-w-[${minWidth}px]`, children: [
+    /* @__PURE__ */ jsx("div", { className: "absolute left-[11px] top-[2px] bottom-[20px] w-[2px] h-[calc(100% - 20px)] bg-gray-800" }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-4", children: steps.map((step, index) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        children: [
+          step.type === "default" && step.status !== "not-started" && /* @__PURE__ */ jsxs("div", { className: "relative flex items-center", children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: `absolute left-[2px] flex h-5 w-5 items-center justify-center rounded-full ${step.status === "success" ? "bg-green-500" : step.status === "error" ? "bg-red-500" : "border-2 border-gray-600 bg-transparent"}`,
+                children: [
+                  step.status === "success" && /* @__PURE__ */ jsx(Check, { className: "h-3 w-3 text-black" }),
+                  step.status === "error" && /* @__PURE__ */ jsx(X, { className: "h-3 w-3 text-black" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "ml-10 text-white", children: step.title })
+          ] }),
+          step.type === "extention" && step.status !== "not-started" && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "relative flex items-center", children: [
+              /* @__PURE__ */ jsx("div", { className: "absolute left-[8px] h-2 w-2 rounded-full bg-green-500" }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setShowAll([
+                    ...showAll.slice(0, index),
+                    !showAll[index],
+                    ...showAll.slice(index + 1)
+                  ]),
+                  className: "ml-10 text-green-500 hover:underline",
+                  children: showAll ? "Hide all" : "Show all"
+                }
+              )
+            ] }),
+            showAll[index] && step.children
+          ] })
+        ]
+      },
+      `step-${index}`
+    )) })
+  ] });
+}
+export {
+  VerticalTimeline
+};

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

@@ -13,6 +13,7 @@ export * from "./label";
 export * from "./page-layout";
 export * from "./search-bar";
 export * from "./select";
+export * from "./signatures";
 export * from "./skeleton";
 export * from "./table";
 export * from "./tabs";

package/dist/types/components/signatures/confirmation-item.d.ts

@@ -0,0 +1,8 @@
+import type { Address, Hex } from "viem";
+interface ConfirmationItemProps {
+    confirmation: Address | Hex;
+    note?: string;
+    explorerUrl?: string;
+}
+export declare function ConfirmationItem({ confirmation, note, explorerUrl, }: ConfirmationItemProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/signatures/identicon.d.ts

@@ -0,0 +1,4 @@
+export declare function Identicon({ address, size, }: {
+    address: string;
+    size?: number;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,3 @@
+export * from "./confirmation-item";
+export * from "./identicon";
+export * from "./vertical-timeline";

package/dist/types/components/signatures/vertical-timeline.d.ts

@@ -0,0 +1,17 @@
+interface StepCommon {
+    status: "success" | "pending" | "not-started" | "error";
+}
+interface Step extends StepCommon {
+    type: "default";
+    title: string;
+}
+interface ExtentionStep extends StepCommon {
+    type: "extention";
+    children: React.ReactNode;
+}
+interface VerticalTimelineProps {
+    steps: (Step | ExtentionStep)[];
+    minWidth?: number;
+}
+export declare function VerticalTimeline({ steps, minWidth, }: VerticalTimelineProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/package.json

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