@gearbox-protocol/ui-kit 3.14.0-next.3 → 3.14.0-next.30

package/dist/esm/components/composites/pool-table/columns.js

@@ -114,6 +114,8 @@ import "../../graph/graph-view.js";
 import "../../health-factor/health-factor.js";
 import "../../horizontal-indicator/horizontal-indicator.js";
 import "../../icon-button/icon-button.js";
+import "../../layout/app-footer/app-footer.js";
+import "../../layout/app-header/app-header.js";
 import "../../layout/col/col.js";
 import "../../layout/container/container.js";
 import "../../layout/footer/footer.js";
@@ -123,6 +125,7 @@ import "../../layout/layout/layout.js";
 import "../../layout/main-aside-layout/main-aside-layout.js";
 import "../../page-title/page-title.js";
 import "../../layout/social-icons/social-icons.js";
+import "../../legal-agreement/legal-agreement-theme.js";
 import "../../link/link.js";
 import "../../../utils/reactochart-compat.js";
 import "../../status-elements/status-elements.js";
@@ -172,7 +175,7 @@ import "../../with-filter-button/with-filter-button.js";
 import { RWAFeature as B } from "../strategies-table/components/cells/cells.js";
 import "../strategies-table/components/feature/feature.styles.js";
 import "../strategies-table/components/rewards-tooltip/rewards-tooltip-root.js";
-function p(o, t, i) {
+function n(o, t, i) {
   const e = o?.header ?? /* @__PURE__ */ r(
     f,
     {
@@ -187,7 +190,7 @@ function p(o, t, i) {
   return { header: e, headerTip: l, mobileTitle: o?.mobileTitle ?? e };
 }
 function S({ ctx: o }) {
-  const { pool: t, underlyingToken: i, points: e, apy: l, isMobile: m } = o, n = m ? 20 : 24, a = /* @__PURE__ */ r(Y, { token: i, size: n });
+  const { pool: t, underlyingToken: i, points: e, apy: l, isMobile: m } = o, p = m ? 20 : 24, a = /* @__PURE__ */ r(Y, { token: i, size: p });
   return e && e.length > 0 && l ? /* @__PURE__ */ r(
     P,
     {
@@ -196,9 +199,9 @@ function S({ ctx: o }) {
       extraAPY: l.extraAPY,
       points: e,
       tokensList: o.tokensList,
-      children: /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(v, { size: n, children: a }) })
+      children: /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(v, { size: p, children: a }) })
     }
-  ) : t.hasPoints ? /* @__PURE__ */ r(D, { size: n, children: a }) : a;
+  ) : t.hasPoints ? /* @__PURE__ */ r(D, { size: p, children: a }) : a;
 }
 function F(o) {
   const t = o.underlyingToken?.title ?? o.underlyingToken?.symbol ?? "", i = o.pool.version;
@@ -277,7 +280,7 @@ function O({ ctx: o }) {
   );
 }
 function R(o, t, i) {
-  const e = o.pool.collateralTokens, { tokensList: l, isMobile: m } = o, { mode: n = "cascade", ...a } = i ?? {};
+  const e = o.pool.collateralTokens, { tokensList: l, isMobile: m } = o, { mode: p = "cascade", ...a } = i ?? {};
   return !e?.length || !l ? null : /* @__PURE__ */ r(
     A,
     {
@@ -285,12 +288,12 @@ function R(o, t, i) {
       tokensList: l,
       balances: e.map((s) => ({ token: s })),
       iconSize: m ? 20 : 24,
-      options: { mode: n, ...a }
+      options: { mode: p, ...a }
     }
   );
 }
-function Zi(o) {
-  const { header: t, mobileTitle: i } = p(
+function ie(o) {
+  const { header: t, mobileTitle: i } = n(
     o,
     "components.poolTable.pool"
   );
@@ -311,8 +314,8 @@ function Zi(o) {
     mobileTitle: i
   };
 }
-function oe(o) {
-  const { header: t, mobileTitle: i } = p(
+function ee(o) {
+  const { header: t, mobileTitle: i } = n(
     o,
     "components.poolTable.supply"
   );
@@ -327,8 +330,8 @@ function oe(o) {
     mobileTitle: i
   };
 }
-function te(o) {
-  const { header: t, headerTip: i, mobileTitle: e } = p(
+function re(o) {
+  const { header: t, headerTip: i, mobileTitle: e } = n(
     o,
     "components.poolTable.supplyApy",
     "components.poolTable.supplyApy.tip"
@@ -341,18 +344,18 @@ function te(o) {
     align: "right",
     sort: o?.sortField !== void 0 ? { field: o.sortField, defaultDirection: "desc" } : { field: "apy", defaultDirection: "desc" },
     cell: (l) => {
-      const { apy: m, loading: n, points: a, tokensList: s } = l, {
+      const { apy: m, loading: p, points: a, tokensList: s } = l, {
         totalAPY: T = 0,
         baseAPY: b = [],
         extraAPY: w = [],
         externalAPY: y,
         apy7DAgo: k
       } = m ?? {};
-      return /* @__PURE__ */ r(u, { width: 60, loading: !!n, children: /* @__PURE__ */ r(
+      return /* @__PURE__ */ r(u, { width: 60, loading: !!p, children: /* @__PURE__ */ r(
         C,
         {
           totalAPY: T,
-          totalAPYLoading: !!n,
+          totalAPYLoading: !!p,
           baseAPY: b,
           extraAPY: w,
           points: a,
@@ -365,8 +368,8 @@ function te(o) {
     mobileTitle: e
   };
 }
-function ie(o) {
-  const { header: t, mobileTitle: i } = p(
+function le(o) {
+  const { header: t, mobileTitle: i } = n(
     o,
     "components.poolTable.borrowed"
   );
@@ -379,8 +382,8 @@ function ie(o) {
     mobileTitle: i
   };
 }
-function ee(o) {
-  const { header: t, headerTip: i, mobileTitle: e } = p(
+function me(o) {
+  const { header: t, headerTip: i, mobileTitle: e } = n(
     o,
     "components.poolTable.borrowApy"
   );
@@ -397,8 +400,8 @@ function ee(o) {
     mobileTitle: e
   };
 }
-function re(o) {
-  const { header: t, mobileTitle: i } = p(
+function pe(o) {
+  const { header: t, mobileTitle: i } = n(
     o,
     "components.poolTable.utilization"
   );
@@ -416,8 +419,8 @@ function re(o) {
     mobileTitle: i
   };
 }
-function le(o) {
-  const t = o?.maxAssets ?? 5, i = (m) => R(m, t, o?.options), { header: e, mobileTitle: l } = p(
+function ne(o) {
+  const t = o?.maxAssets ?? 5, i = (m) => R(m, t, o?.options), { header: e, mobileTitle: l } = n(
     o,
     "components.poolTable.collateral"
   );
@@ -432,8 +435,8 @@ function le(o) {
     mobileTitle: l
   };
 }
-function me(o) {
-  const { header: t, mobileTitle: i } = p(
+function ae(o) {
+  const { header: t, mobileTitle: i } = n(
     o,
     "components.poolTable.balance"
   );
@@ -449,18 +452,18 @@ function me(o) {
     mobileTitle: i
   };
 }
-function ne(o) {
+function de(o) {
   return o;
 }
 export {
-  me as balanceColumn,
-  ee as borrowApyColumn,
-  ie as borrowedColumn,
-  le as collateralColumn,
-  ne as customColumn,
+  ae as balanceColumn,
+  me as borrowApyColumn,
+  le as borrowedColumn,
+  ne as collateralColumn,
+  de as customColumn,
   F as defaultPoolName,
-  Zi as poolColumn,
-  te as supplyApyColumn,
-  oe as supplyColumn,
-  re as utilizationColumn
+  ie as poolColumn,
+  re as supplyApyColumn,
+  ee as supplyColumn,
+  pe as utilizationColumn
 };

package/dist/esm/components/composites/tx-preview/components/AddressAvatar.js

@@ -0,0 +1,47 @@
+import { jsx as e } from "react/jsx-runtime";
+import { faVault as n, faWallet as i } from "@fortawesome/free-solid-svg-icons";
+import { getStatic as a } from "@gearbox-protocol/static";
+import { FaIcon as r } from "../../../icons/fa-icon.js";
+import { RoundedImage as c } from "../../../rounded-image/rounded-image.js";
+import { Identicon as l } from "../../../signatures/identicon.js";
+const t = 24, m = a("/logo/logo_symbol.png");
+function x({
+  address: o,
+  role: s = "external"
+}) {
+  switch (s) {
+    case "wallet":
+      return /* @__PURE__ */ e(
+        "span",
+        {
+          className: "flex shrink-0 items-center justify-center rounded-full bg-gray-700",
+          style: { width: t, height: t },
+          children: /* @__PURE__ */ e(r, { icon: i, className: "size-3 text-foreground" })
+        }
+      );
+    case "creditAccount":
+      return /* @__PURE__ */ e(
+        "span",
+        {
+          className: "flex shrink-0 items-center justify-center rounded-full bg-gray-700",
+          style: { width: t, height: t },
+          children: /* @__PURE__ */ e(r, { icon: n, className: "size-3 text-foreground" })
+        }
+      );
+    case "pool":
+      return /* @__PURE__ */ e(
+        c,
+        {
+          size: t,
+          fit: "contain",
+          src: m,
+          className: "shrink-0"
+        }
+      );
+    default:
+      return /* @__PURE__ */ e(l, { address: o, size: t });
+  }
+}
+export {
+  x as AddressAvatar
+};

package/dist/esm/components/composites/tx-preview/components/AddressParty.js

@@ -0,0 +1,17 @@
+import { jsxs as n, jsx as e, Fragment as m } from "react/jsx-runtime";
+import { WithCopy as s } from "../../../with-copy/with-copy.js";
+import { shortenHash as a } from "../../../../utils/format.js";
+import { AddressAvatar as c } from "./AddressAvatar.js";
+function x({ address: r, label: t }) {
+  const o = a(r);
+  return /* @__PURE__ */ n("span", { className: "flex min-w-0 items-center gap-2", children: [
+    /* @__PURE__ */ e(c, { address: r, role: t?.role }),
+    /* @__PURE__ */ e("span", { className: "flex min-w-0 flex-col", children: t?.transferLabel ? /* @__PURE__ */ n(m, { children: [
+      /* @__PURE__ */ e("span", { className: "truncate text-foreground text-sm", children: t.transferLabel }),
+      /* @__PURE__ */ e(s, { toCopy: r, children: /* @__PURE__ */ e("span", { className: "font-mono text-muted-foreground text-xs", children: o }) })
+    ] }) : /* @__PURE__ */ e(s, { toCopy: r, children: /* @__PURE__ */ e("span", { className: "font-mono text-foreground text-sm", children: o }) }) })
+  ] });
+}
+export {
+  x as AddressParty
+};

package/dist/esm/components/composites/tx-preview/components/AddressRow.js

@@ -0,0 +1,16 @@
+import { jsx as o } from "react/jsx-runtime";
+import { VerticalIndicator as e } from "../../../vertical-indicator/vertical-indicator.js";
+import { WithCopy as m } from "../../../with-copy/with-copy.js";
+import { shortenHash as n } from "../../../../utils/format.js";
+function a({ label: t, address: r }) {
+  return /* @__PURE__ */ o(
+    e,
+    {
+      label: t,
+      value: /* @__PURE__ */ o(m, { toCopy: r, children: /* @__PURE__ */ o("span", { className: "font-mono text-foreground text-sm", children: n(r) }) })
+    }
+  );
+}
+export {
+  a as AddressRow
+};

package/dist/esm/components/composites/tx-preview/components/AmountRow.js

@@ -0,0 +1,30 @@
+import { jsx as m, jsxs as r } from "react/jsx-runtime";
+import { TokenIcon as t } from "../../../token-icon/token-icon.js";
+import { TokenTemplate as l } from "../../../token-template/token-template.js";
+import { VerticalIndicator as i } from "../../../vertical-indicator/vertical-indicator.js";
+function f({ value: e, token: o, label: s = "Amount" }) {
+  return /* @__PURE__ */ m(
+    i,
+    {
+      label: s,
+      value: /* @__PURE__ */ r("span", { className: "flex items-center justify-end gap-2", children: [
+        /* @__PURE__ */ m(t, { symbol: o.symbol, size: 16 }),
+        /* @__PURE__ */ m(
+          l,
+          {
+            value: e,
+            token: {
+              symbol: o.symbol,
+              title: o.symbol,
+              decimals: o.decimals
+            },
+            showSymbol: !0
+          }
+        )
+      ] })
+    }
+  );
+}
+export {
+  f as AmountRow
+};

package/dist/esm/components/composites/tx-preview/components/CollapsibleCard.js

@@ -0,0 +1,45 @@
+import { jsx as r } from "react/jsx-runtime";
+import { Card as p, CardContent as m, CardTitle as a } from "../../../cards/card/card.js";
+import { SimpleAccordion as c, SimpleAccordionItem as n } from "../../../simple-accordion/simple-accordion.js";
+import "react";
+import "@gearbox-protocol/sdk";
+import { cn as d } from "../../../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../../../utils/z-index.js";
+function N({
+  value: t,
+  title: i,
+  defaultOpen: o = !0,
+  contentClassName: e,
+  children: l
+}) {
+  return /* @__PURE__ */ r(p, { children: /* @__PURE__ */ r(
+    c,
+    {
+      type: "single",
+      collapsible: !0,
+      defaultValue: o ? t : void 0,
+      children: /* @__PURE__ */ r(
+        n,
+        {
+          value: t,
+          last: !0,
+          triggerClassName: "px-4 py-2",
+          title: /* @__PURE__ */ r(a, { children: i }),
+          description: /* @__PURE__ */ r(
+            m,
+            {
+              className: d("flex flex-col gap-3 pt-0", e),
+              children: l
+            }
+          )
+        }
+      )
+    }
+  ) });
+}
+export {
+  N as CollapsibleCard
+};

package/dist/esm/components/composites/tx-preview/components/SectionDivider.js

@@ -0,0 +1,12 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { Separator as r } from "../../../separator/separator.js";
+function c({ title: s }) {
+  return /* @__PURE__ */ t("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ e(r, { className: "flex-1" }),
+    /* @__PURE__ */ e("span", { className: "font-medium text-foreground text-xs uppercase tracking-wide", children: s }),
+    /* @__PURE__ */ e(r, { className: "flex-1" })
+  ] });
+}
+export {
+  c as SectionDivider
+};

package/dist/esm/components/composites/tx-preview/components/TransferList.js

@@ -0,0 +1,25 @@
+import { jsxs as r, jsx as i } from "react/jsx-runtime";
+import { SectionDivider as t } from "./SectionDivider.js";
+import { TransferRow as a } from "./TransferRow.js";
+function x({
+  transfers: m,
+  labels: e,
+  resolveToken: l,
+  title: n = "Transfers"
+}) {
+  return m.length === 0 ? null : /* @__PURE__ */ r("div", { className: "mt-2 flex flex-col gap-3", children: [
+    n !== null ? /* @__PURE__ */ i(t, { title: n }) : null,
+    /* @__PURE__ */ i("div", { className: "grid grid-cols-[minmax(0,1fr)_auto_auto_auto_minmax(0,1fr)] items-center gap-x-3 gap-y-3", children: m.map((o) => /* @__PURE__ */ i(
+      a,
+      {
+        transfer: o,
+        labels: e,
+        token: l(o.token)
+      },
+      `${o.token}-${o.from}-${o.to}-${o.amount}`
+    )) })
+  ] });
+}
+export {
+  x as TransferList
+};

package/dist/esm/components/composites/tx-preview/components/TransferRow.js

@@ -0,0 +1,52 @@
+import { jsxs as c, Fragment as p, jsx as s } from "react/jsx-runtime";
+import { faArrowRight as f } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as n } from "../../../icons/fa-icon.js";
+import { TokenIcon as y } from "../../../token-icon/token-icon.js";
+import { TokenTemplate as b } from "../../../token-template/token-template.js";
+import { AddressParty as d } from "./AddressParty.js";
+import { getAddressLabel as u } from "./addressLabel.js";
+function T({ transfer: e, labels: r, token: o }) {
+  const m = u(r, e.from), l = u(r, e.to), i = m?.ours ?? !1, a = l?.ours ?? !1, t = i && !a ? "text-destructive" : a && !i ? "text-success" : "text-muted-foreground";
+  return /* @__PURE__ */ c(p, { children: [
+    /* @__PURE__ */ s("div", { className: "min-w-0 justify-self-start", children: /* @__PURE__ */ s(d, { address: e.from, label: m }) }),
+    /* @__PURE__ */ s(
+      n,
+      {
+        icon: f,
+        className: `size-2.5 justify-self-center ${t}`
+      }
+    ),
+    /* @__PURE__ */ c(
+      "span",
+      {
+        className: `flex items-center justify-self-center gap-1 whitespace-nowrap text-xs ${t}`,
+        children: [
+          /* @__PURE__ */ s(y, { symbol: o.symbol, size: 14 }),
+          /* @__PURE__ */ s(
+            b,
+            {
+              value: e.amount,
+              token: {
+                symbol: o.symbol,
+                title: o.symbol,
+                decimals: o.decimals
+              },
+              showSymbol: !0
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ s(
+      n,
+      {
+        icon: f,
+        className: `size-2.5 justify-self-center ${t}`
+      }
+    ),
+    /* @__PURE__ */ s("div", { className: "min-w-0 justify-self-start", children: /* @__PURE__ */ s(d, { address: e.to, label: l }) })
+  ] });
+}
+export {
+  T as TransferRow
+};

package/dist/esm/components/composites/tx-preview/components/addressLabel.js

@@ -0,0 +1,7 @@
+import { getAddress as t } from "viem";
+function o(e, r) {
+  return e.get(t(r));
+}
+export {
+  o as getAddressLabel
+};

package/dist/esm/components/composites/tx-preview/components/index.js

@@ -0,0 +1,20 @@
+import { AddressAvatar as e } from "./AddressAvatar.js";
+import { AddressParty as s } from "./AddressParty.js";
+import { AddressRow as d } from "./AddressRow.js";
+import { AmountRow as p } from "./AmountRow.js";
+import { getAddressLabel as a } from "./addressLabel.js";
+import { CollapsibleCard as i } from "./CollapsibleCard.js";
+import { SectionDivider as n } from "./SectionDivider.js";
+import { TransferList as R } from "./TransferList.js";
+import { TransferRow as v } from "./TransferRow.js";
+export {
+  e as AddressAvatar,
+  s as AddressParty,
+  d as AddressRow,
+  p as AmountRow,
+  i as CollapsibleCard,
+  n as SectionDivider,
+  R as TransferList,
+  v as TransferRow,
+  a as getAddressLabel
+};