@gearbox-protocol/ui-kit 3.14.0-next.12 → 3.14.0-next.14

package/dist/esm/components/composites/tx-preview/confirm/stepper/HorizontalTransactionStepper.js

@@ -0,0 +1,136 @@
+import { jsx as e, jsxs as p } from "react/jsx-runtime";
+import "react";
+import "@gearbox-protocol/sdk";
+import { cn as o } from "../../../../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../../../../utils/z-index.js";
+import { TransactionStepperTest as f } from "./constants.js";
+const c = 12, u = 24, y = c + u;
+function x({
+  status: t,
+  stepNumber: i
+}) {
+  const r = t === "active";
+  return t === "completed" ? /* @__PURE__ */ e(
+    "div",
+    {
+      className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-gray-40",
+      "aria-hidden": !0,
+      children: /* @__PURE__ */ p(
+        "svg",
+        {
+          width: "12",
+          height: "10",
+          viewBox: "0 0 12 10",
+          fill: "none",
+          className: "text-gray-110",
+          role: "img",
+          "aria-hidden": !0,
+          children: [
+            /* @__PURE__ */ e("title", { children: "Completed step" }),
+            /* @__PURE__ */ e(
+              "path",
+              {
+                d: "M1 5L4.5 8.5L11 1.5",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            )
+          ]
+        }
+      )
+    }
+  ) : /* @__PURE__ */ e(
+    "div",
+    {
+      className: o(
+        "flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-xs font-bold",
+        r ? "bg-white text-gray-10" : "bg-gray-40 text-gray-110"
+      ),
+      "aria-hidden": !0,
+      children: i
+    }
+  );
+}
+function v({ active: t }) {
+  return /* @__PURE__ */ e(
+    "span",
+    {
+      className: o(
+        "pointer-events-none absolute top-0 z-10 block h-full",
+        t ? "bg-gray-40" : "bg-gray-10"
+      ),
+      style: {
+        right: -c,
+        width: c,
+        clipPath: "polygon(0 0, 100% 50%, 0 100%)"
+      },
+      "aria-hidden": !0
+    }
+  );
+}
+function N({
+  step: t,
+  stepNumber: i,
+  index: r,
+  total: n,
+  label: g
+}) {
+  const { status: d } = t, s = r === 0, m = r === n - 1, a = n === 1, l = d === "active", h = s ? u : y;
+  return /* @__PURE__ */ e(
+    "li",
+    {
+      className: o("relative min-w-0 flex-1 list-none", !s && "-ml-3"),
+      style: { zIndex: n - r },
+      "aria-current": l ? "step" : void 0,
+      children: /* @__PURE__ */ p(
+        "div",
+        {
+          className: o(
+            "relative flex min-h-12 w-full items-center gap-2 py-2.5 text-xs",
+            l ? "bg-gray-40 text-foreground" : "bg-gray-10 text-gray-110",
+            a && "rounded-lg pr-6",
+            !a && s && "rounded-l-lg pr-2",
+            !a && m && "rounded-r-lg pr-6"
+          ),
+          style: { paddingLeft: h },
+          children: [
+            /* @__PURE__ */ e(x, { status: d, stepNumber: i }),
+            /* @__PURE__ */ e("span", { className: o("min-w-0 truncate", l && "font-bold"), children: g }),
+            m ? null : /* @__PURE__ */ e(v, { active: l })
+          ]
+        }
+      )
+    }
+  );
+}
+function _({
+  steps: t,
+  renderLabel: i
+}) {
+  return /* @__PURE__ */ e(
+    "ol",
+    {
+      className: "flex w-full list-none p-0 m-0",
+      "data-testid": f.root,
+      children: t.map((r, n) => /* @__PURE__ */ e(
+        N,
+        {
+          step: r,
+          stepNumber: n + 1,
+          index: n,
+          total: t.length,
+          label: i(r)
+        },
+        r.id
+      ))
+    }
+  );
+}
+export {
+  _ as HorizontalTransactionStepper
+};

package/dist/esm/components/composites/tx-preview/confirm/stepper/computeTransactionExecutionSteps.js

@@ -0,0 +1,47 @@
+function l(e) {
+  return {
+    approve: !e.allowWalletBatching && (e.needsApproval || e.isApprovalPending),
+    auth: !e.isAuthReady
+  };
+}
+function p(e) {
+  return !e.allowWalletBatching && (e.isApprovalPending || e.needsApproval);
+}
+function c(e, t) {
+  return l(t)[e];
+}
+function i(e, t) {
+  return t.completedStepsInSession?.includes(e) ?? !1;
+}
+function a(e, t) {
+  return c(e, t) || i(e, t);
+}
+function f(e) {
+  const t = [];
+  return a("approve", e) && t.push("approve"), a("auth", e) && t.push("auth"), t.push("execute"), t;
+}
+function v(e, t) {
+  return e.isCorrectChain ? p(e) ? "approve" : c("auth", e) ? "auth" : "execute" : t[0] ?? "execute";
+}
+function d(e, t, r, o) {
+  const n = o.indexOf(r);
+  return o.indexOf(e) < n ? !0 : e === "execute" ? !1 : !!(i(e, t) && !c(e, t));
+}
+function h(e, t) {
+  return e === "approve" && t.allowWalletBatching ? "approveBatch" : e === "auth" ? "auth" : e;
+}
+function S(e) {
+  const t = f(e), r = v(e, t);
+  return { steps: t.map((n) => {
+    const s = d(n, e, r, t) ? "completed" : n === r ? "active" : "upcoming";
+    return {
+      id: n,
+      labelKey: h(n, e),
+      status: s
+    };
+  }), activeStepId: r };
+}
+export {
+  S as computeTransactionExecutionSteps,
+  l as getTransactionExecutionStepRequirements
+};

package/dist/esm/components/composites/tx-preview/confirm/stepper/constants.js

@@ -0,0 +1,6 @@
+class o {
+  static root = "transaction-stepper-root";
+}
+export {
+  o as TransactionStepperTest
+};

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

@@ -0,0 +1,11 @@
+import { computeTransactionExecutionSteps as o, getTransactionExecutionStepRequirements as r } from "./computeTransactionExecutionSteps.js";
+import { TransactionStepperTest as p } from "./constants.js";
+import { HorizontalTransactionStepper as a } from "./HorizontalTransactionStepper.js";
+import { useCompletedStepsInSession as c } from "./useCompletedStepsInSession.js";
+export {
+  a as HorizontalTransactionStepper,
+  p as TransactionStepperTest,
+  o as computeTransactionExecutionSteps,
+  r as getTransactionExecutionStepRequirements,
+  c as useCompletedStepsInSession
+};

package/dist/esm/components/composites/tx-preview/confirm/stepper/useCompletedStepsInSession.js

@@ -0,0 +1,39 @@
+import { useState as a, useEffect as u } from "react";
+import { getTransactionExecutionStepRequirements as m } from "./computeTransactionExecutionSteps.js";
+function I({
+  sessionActive: n,
+  needsApproval: S,
+  isApprovalPending: i = !1,
+  allowWalletBatching: d,
+  isAuthReady: f
+}) {
+  const [p, o] = a([]), [c, s] = a([]), e = m({
+    needsApproval: S,
+    isApprovalPending: i,
+    allowWalletBatching: d,
+    isAuthReady: f
+  });
+  return u(() => {
+    if (!n) {
+      o([]), s([]);
+      return;
+    }
+    o((r) => {
+      const t = new Set(r);
+      return e.approve && t.add("approve"), e.auth && t.add("auth"), [...t];
+    });
+  }, [n, e.approve, e.auth]), u(() => {
+    n && s((r) => {
+      const t = new Set(r);
+      return p.includes("approve") && !e.approve && t.add("approve"), p.includes("auth") && !e.auth && t.add("auth"), [...t];
+    });
+  }, [
+    n,
+    p,
+    e.approve,
+    e.auth
+  ]), c;
+}
+export {
+  I as useCompletedStepsInSession
+};

package/dist/esm/components/composites/tx-preview/confirm/summary/PoolOperationConfirmSummary.js

@@ -0,0 +1,92 @@
+import { jsx as o, jsxs as a } from "react/jsx-runtime";
+import { shortAddress as y } from "@gearbox-protocol/sdk";
+import { FadeoutLoading as C } from "../../../../fadeout-loading/fadeout-loading.js";
+import { TipCard as z } from "../../../../tip-card/tip-card.js";
+import { VerticalIndicator as r } from "../../../../vertical-indicator/vertical-indicator.js";
+import { VerticalList as x } from "../../../../vertical-list/vertical-list.js";
+import { WithCopy as g } from "../../../../with-copy/with-copy.js";
+import { PoolOperationConfirmSummaryTest as P } from "./constants.js";
+function m({
+  amount: i,
+  symbol: t
+}) {
+  return /* @__PURE__ */ a("span", { children: [
+    i,
+    " ",
+    t
+  ] });
+}
+function F({
+  primaryLabel: i,
+  primaryAmount: t,
+  primaryTokenSymbol: n,
+  receiveLabel: s,
+  receiveAmount: d,
+  receiveTokenSymbol: u,
+  apyLabel: p,
+  apy: e,
+  apyLoading: f = !1,
+  curatorLabel: c,
+  curatorName: h,
+  poolLabel: b,
+  poolAddress: l
+}) {
+  const v = y(l);
+  return /* @__PURE__ */ o(
+    z,
+    {
+      textColor: "light",
+      "data-testid": P.root,
+      children: /* @__PURE__ */ a(x, { children: [
+        /* @__PURE__ */ o(
+          r,
+          {
+            size: "sm",
+            label: i,
+            value: /* @__PURE__ */ o(
+              m,
+              {
+                amount: t,
+                symbol: n
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ o(
+          r,
+          {
+            size: "sm",
+            label: s,
+            value: /* @__PURE__ */ o(
+              m,
+              {
+                amount: d,
+                symbol: u
+              }
+            )
+          }
+        ),
+        e !== void 0 ? /* @__PURE__ */ o(
+          r,
+          {
+            size: "sm",
+            label: p,
+            value: /* @__PURE__ */ o(C, { loading: f, children: e })
+          }
+        ) : null,
+        /* @__PURE__ */ o(r, { size: "sm", label: c, value: h }),
+        /* @__PURE__ */ o(
+          r,
+          {
+            size: "sm",
+            label: b,
+            value: /* @__PURE__ */ o(g, { toCopy: l, children: /* @__PURE__ */ o("span", { children: v }) })
+          }
+        )
+      ] })
+    }
+  );
+}
+export {
+  F as PoolOperationConfirmSummary
+};

package/dist/esm/components/composites/tx-preview/confirm/summary/constants.js

@@ -0,0 +1,6 @@
+class r {
+  static root = "pool-operation-confirm-summary-root";
+}
+export {
+  r as PoolOperationConfirmSummaryTest
+};

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

@@ -0,0 +1,6 @@
+import { PoolOperationConfirmSummaryTest as m } from "./constants.js";
+import { PoolOperationConfirmSummary as t } from "./PoolOperationConfirmSummary.js";
+export {
+  t as PoolOperationConfirmSummary,
+  m as PoolOperationConfirmSummaryTest
+};

package/dist/esm/components/composites/tx-preview/hooks/useParsedTransaction.js

@@ -0,0 +1,45 @@
+import { parseOperationCalldata as f, isPoolOperation as y, simulatePoolOperation as v } from "@gearbox-protocol/sdk/preview";
+import { useQuery as I } from "@tanstack/react-query";
+import { useMemo as O } from "react";
+function g(c) {
+  const { sdk: n, to: e, calldata: o, sender: t, refreshNonce: u, enabled: a = !0 } = c, { parsed: s, error: m } = O(() => {
+    if (!a)
+      return { parsed: void 0, error: null };
+    try {
+      return {
+        parsed: f({
+          sdk: n,
+          to: e,
+          calldata: o,
+          sender: t
+        }),
+        error: null
+      };
+    } catch (l) {
+      return { parsed: void 0, error: l instanceof Error ? l : new Error(String(l)) };
+    }
+  }, [a, n, e, o, t, u]), r = a && s && y(s) ? s : void 0, d = I({
+    queryKey: ["pool-simulation", e, o, t, u],
+    enabled: a && r !== void 0,
+    queryFn: () => v({
+      // `enabled` guarantees `poolOp` is defined when this runs.
+      sdk: n,
+      operation: r,
+      to: e,
+      calldata: o,
+      wallet: t
+    }),
+    staleTime: Number.POSITIVE_INFINITY,
+    retry: !1
+  }), i = d.data;
+  let p = s;
+  return r && i?.status === "success" && (p = { ...r, transfers: i.transfers }), {
+    data: p,
+    error: m,
+    simulation: i,
+    isSimulating: r !== void 0 && d.isLoading
+  };
+}
+export {
+  g as useParsedTransaction
+};

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

@@ -0,0 +1,78 @@
+import { AddressAvatar as e } from "./components/AddressAvatar.js";
+import { AddressParty as a } from "./components/AddressParty.js";
+import { AddressRow as p } from "./components/AddressRow.js";
+import { AmountRow as m } from "./components/AmountRow.js";
+import { getAddressLabel as f } from "./components/addressLabel.js";
+import { CollapsibleCard as l } from "./components/CollapsibleCard.js";
+import { SectionDivider as u } from "./components/SectionDivider.js";
+import { TransferList as c } from "./components/TransferList.js";
+import { TransferRow as T } from "./components/TransferRow.js";
+import { TransactionConfirmDialogTest as S, transactionConfirmDialogShellVariants as g } from "./confirm/dialog/constants.js";
+import { TransactionConfirmDialogView as O } from "./confirm/dialog/TransactionConfirmDialogView.js";
+import { useTransactionConfirmDialog as h } from "./confirm/dialog/useTransactionConfirmDialog.js";
+import { useCalldataOperationPreview as A } from "./confirm/hooks/useCalldataOperationPreview.js";
+import { OperationPreviewContent as V } from "./confirm/preview/OperationPreviewContent.js";
+import { computeTransactionExecutionSteps as y, getTransactionExecutionStepRequirements as B } from "./confirm/stepper/computeTransactionExecutionSteps.js";
+import { TransactionStepperTest as E } from "./confirm/stepper/constants.js";
+import { HorizontalTransactionStepper as z } from "./confirm/stepper/HorizontalTransactionStepper.js";
+import { useCompletedStepsInSession as H } from "./confirm/stepper/useCompletedStepsInSession.js";
+import { PoolOperationConfirmSummaryTest as W } from "./confirm/summary/constants.js";
+import { PoolOperationConfirmSummary as F } from "./confirm/summary/PoolOperationConfirmSummary.js";
+import { useParsedTransaction as K } from "./hooks/useParsedTransaction.js";
+import { OperationBody as N } from "./operations/OperationBody.js";
+import { OperationsCard as U, hasOperationView as X } from "./operations/OperationsCard.js";
+import { PoolDepositView as Z } from "./operations/PoolDepositView.js";
+import { PoolRow as $ } from "./operations/PoolRow.js";
+import { PoolWithdrawView as or } from "./operations/PoolWithdrawView.js";
+import { PrerequisiteRow as tr } from "./prerequisites/PrerequisiteRow.js";
+import { PrerequisitesCard as ir } from "./prerequisites/PrerequisitesCard.js";
+import { prerequisiteDetailRenderers as nr, renderPrerequisiteDetail as mr } from "./prerequisites/prerequisiteDetails.js";
+import { usePrerequisites as fr } from "./prerequisites/usePrerequisites.js";
+import { BalanceChangeGroup as lr } from "./state-change/BalanceChangeGroup.js";
+import { BalanceChangeRow as ur } from "./state-change/BalanceChangeRow.js";
+import { PoolStateChangeCard as cr } from "./state-change/PoolStateChangeCard.js";
+import { StateChangeCard as Tr } from "./state-change/StateChangeCard.js";
+import { buildPoolOperationLabels as Sr } from "./utils/addressLabels.js";
+import { resolveToken as Dr } from "./utils/poolTokenInfo.js";
+export {
+  e as AddressAvatar,
+  a as AddressParty,
+  p as AddressRow,
+  m as AmountRow,
+  lr as BalanceChangeGroup,
+  ur as BalanceChangeRow,
+  l as CollapsibleCard,
+  z as HorizontalTransactionStepper,
+  N as OperationBody,
+  V as OperationPreviewContent,
+  U as OperationsCard,
+  Z as PoolDepositView,
+  F as PoolOperationConfirmSummary,
+  W as PoolOperationConfirmSummaryTest,
+  $ as PoolRow,
+  cr as PoolStateChangeCard,
+  or as PoolWithdrawView,
+  tr as PrerequisiteRow,
+  ir as PrerequisitesCard,
+  u as SectionDivider,
+  Tr as StateChangeCard,
+  S as TransactionConfirmDialogTest,
+  O as TransactionConfirmDialogView,
+  E as TransactionStepperTest,
+  c as TransferList,
+  T as TransferRow,
+  Sr as buildPoolOperationLabels,
+  y as computeTransactionExecutionSteps,
+  f as getAddressLabel,
+  B as getTransactionExecutionStepRequirements,
+  X as hasOperationView,
+  nr as prerequisiteDetailRenderers,
+  mr as renderPrerequisiteDetail,
+  Dr as resolveToken,
+  g as transactionConfirmDialogShellVariants,
+  A as useCalldataOperationPreview,
+  H as useCompletedStepsInSession,
+  K as useParsedTransaction,
+  fr as usePrerequisites,
+  h as useTransactionConfirmDialog
+};

package/dist/esm/components/composites/tx-preview/operations/OperationBody.js

@@ -0,0 +1,10 @@
+import { jsx as t } from "react/jsx-runtime";
+import { isPoolOperation as m } from "@gearbox-protocol/sdk/preview";
+import { PoolDepositView as p } from "./PoolDepositView.js";
+import { PoolWithdrawView as e } from "./PoolWithdrawView.js";
+function s({ sdk: r, operation: o, wallet: i }) {
+  return m(o) ? o.operation === "Deposit" ? /* @__PURE__ */ t(p, { sdk: r, operation: o, wallet: i }) : /* @__PURE__ */ t(e, { sdk: r, operation: o, wallet: i }) : null;
+}
+export {
+  s as OperationBody
+};