@deframe-sdk/components 0.1.18 → 0.1.20

package/dist/index.js

@@ -2393,6 +2393,69 @@ var LowRiskBadge = ({ className, label }) => {
     }
   ) });
 };
+var LoadingDots = ({ className = "" }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `flex gap-[var(--deframe-widget-size-gap-none)].5 ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-bounce", style: { animationDelay: "0ms", animationDuration: "1.4s" }, children: "." }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-bounce", style: { animationDelay: "200ms", animationDuration: "1.4s" }, children: "." }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-bounce", style: { animationDelay: "400ms", animationDuration: "1.4s" }, children: "." })
+  ] });
+};
+var ProcessingBadge = ({
+  label = "Processing",
+  className = "",
+  title,
+  size = "default"
+}) => {
+  const isCompact = size === "compact";
+  const baseClasses = [
+    "inline-flex max-w-fit items-center gap-[var(--deframe-widget-size-gap-xs)] rounded-[var(--deframe-widget-size-radius-full)] border",
+    "text-[color:var(--deframe-widget-color-state-info)]",
+    "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-info)_18%,transparent)]",
+    "border-[color:color-mix(in_srgb,var(--deframe-widget-color-state-info)_28%,transparent)]"
+  ].join(" ");
+  const sizeClasses = {
+    default: "px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)]",
+    compact: "px-[calc(var(--deframe-widget-size-padding-x-xs)+2px)] py-[2px]"
+  };
+  const processingBadgeClasses = tailwindMerge.twMerge(
+    baseClasses,
+    sizeClasses[isCompact ? "compact" : "default"],
+    className
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-test-id": "processing-badge",
+      title,
+      className: processingBadgeClasses,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-[6px]", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(hi2.HiOutlineClock, { className: isCompact ? "h-[12px] w-[12px] shrink-0" : "h-[14px] w-[14px] shrink-0" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            TextBody,
+            {
+              as: "span",
+              variant: "text-small",
+              className: tailwindMerge.twMerge(
+                "truncate text-[color:var(--deframe-widget-color-state-info)]",
+                isCompact ? "text-[11px] leading-[14px]" : ""
+              ),
+              children: label
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "flex shrink-0 items-center text-[color:var(--deframe-widget-color-state-info)] opacity-80",
+            children: /* @__PURE__ */ jsxRuntime.jsx(LoadingDots, { className: tailwindMerge.twMerge(isCompact ? "text-[11px] leading-[14px]" : "text-[12px] leading-[16px]") })
+          }
+        )
+      ]
+    }
+  );
+};
 var gapClasses3 = {
   xs: "gap-[var(--deframe-widget-size-gap-xs)]",
   sm: "gap-[var(--deframe-widget-size-gap-sm)]",
@@ -2419,10 +2482,35 @@ var TokenIcon = ({ src, alt }) => /* @__PURE__ */ jsxRuntime.jsx(
     }
   }
 );
-var SuccessBadge = ({ children }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": "success-badge", className: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-success)_12%,transparent)] flex items-center gap-[var(--deframe-widget-size-gap-xs)] px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)] rounded-[var(--deframe-widget-size-radius-lg)]", children: [
-  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-2 h-2 rounded-[var(--deframe-widget-size-radius-full)] bg-[var(--deframe-widget-color-state-success)]" }),
+var STATUS_STYLES = {
+  success: {
+    bg: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-success)_12%,transparent)]",
+    dot: "bg-[var(--deframe-widget-color-state-success)]"
+  },
+  pending: {
+    bg: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-warning)_12%,transparent)]",
+    dot: "bg-[var(--deframe-widget-color-state-warning)]"
+  },
+  failed: {
+    bg: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-error)_12%,transparent)]",
+    dot: "bg-[var(--deframe-widget-color-state-error)]"
+  },
+  refunded: {
+    bg: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-text-secondary)_12%,transparent)]",
+    dot: "bg-[var(--deframe-widget-color-text-secondary)]"
+  }
+};
+function resolveStatusBadgeTone(status = "SUCCESS") {
+  if (status === "PENDING") return "pending";
+  if (status === "FAILED") return "failed";
+  if (status === "REFUNDED") return "refunded";
+  return "success";
+}
+var StatusBadge = ({ children, tone = "success" }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": "status-badge", className: `${STATUS_STYLES[tone].bg} flex items-center gap-[var(--deframe-widget-size-gap-xs)] px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)] rounded-[var(--deframe-widget-size-radius-lg)]`, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("span", { className: `w-2 h-2 rounded-[var(--deframe-widget-size-radius-full)] ${STATUS_STYLES[tone].dot}` }),
   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-primary)]", children })
 ] });
+var SuccessBadge = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { tone: "success", children });
 var truncateHash = (hash, chars = 6) => {
   if (hash.length <= chars * 2 + 3) return hash;
   return `${hash.slice(0, chars + 2)}...${hash.slice(-chars)}`;
@@ -2459,6 +2547,84 @@ var TwoLineValue = ({ primary, secondary }) => /* @__PURE__ */ jsxRuntime.jsxs(H
   /* @__PURE__ */ jsxRuntime.jsx("p", { "data-test-id": "two-line-value-secondary", className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-secondary)]", children: secondary })
 ] });
 var NotFoundMessage = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "not-found-message", className: "flex flex-col items-center justify-center h-full", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[color:var(--deframe-widget-color-text-primary)]", children }) });
+function StepStatusIcon({ status }) {
+  switch (status) {
+    case "completed":
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-6 h-6 rounded-[var(--deframe-widget-size-radius-full)] bg-[var(--deframe-widget-color-bg-tertiary)] flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(io5.IoCheckmarkOutline, { className: "w-4 h-4 text-[color:var(--deframe-widget-color-state-success)]" }) });
+    case "processing":
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-6 h-6 rounded-[var(--deframe-widget-size-radius-full)] bg-[var(--deframe-widget-color-bg-tertiary)] flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(io5.IoTimeOutline, { className: "w-4 h-4 text-[color:var(--deframe-widget-color-state-warning)]" }) });
+    case "failed":
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-6 h-6 rounded-[var(--deframe-widget-size-radius-full)] bg-[var(--deframe-widget-color-bg-tertiary)] flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(io5.IoAlertCircleOutline, { className: "w-4 h-4 text-[color:var(--deframe-widget-color-state-error)]" }) });
+  }
+}
+function StepStatusText({
+  step,
+  completedText,
+  processingText,
+  failedText,
+  viewOnExplorerText
+}) {
+  if (step.statusText) {
+    const textColorClass2 = step.status === "completed" ? "text-[color:var(--deframe-widget-color-text-primary)]" : step.status === "processing" ? "text-[color:var(--deframe-widget-color-text-secondary)]" : step.status === "failed" ? "text-[color:var(--deframe-widget-color-state-error)]" : "text-[color:var(--deframe-widget-color-text-primary-disabled)]";
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: `[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] ${textColorClass2}`, children: step.statusText });
+  }
+  if (step.status === "completed" && step.explorerUrl) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "a",
+      {
+        href: step.explorerUrl,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-brand-primary)] underline hover:no-underline",
+        children: viewOnExplorerText
+      }
+    );
+  }
+  const defaultText = step.status === "completed" ? completedText : step.status === "processing" ? processingText : failedText;
+  const textColorClass = step.status === "completed" ? "text-[color:var(--deframe-widget-color-text-primary)]" : step.status === "processing" ? "text-[color:var(--deframe-widget-color-text-secondary)]" : "text-[color:var(--deframe-widget-color-state-error)]";
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: `[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] ${textColorClass}`, children: defaultText });
+}
+function StepDisplay({ step, completedText, processingText, failedText, viewOnExplorerText }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-[var(--deframe-widget-size-gap-md)] w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-primary)] [font-weight:var(--deframe-widget-font-weight-medium)]", children: step.label }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: step.value ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-secondary)]", children: step.value }) : /* @__PURE__ */ jsxRuntime.jsx(StepStatusText, { step, completedText, processingText, failedText, viewOnExplorerText }) })
+  ] });
+}
+function TransactionProcessingDetails({
+  steps,
+  className = "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-secondary)]",
+  defaultOpen = true,
+  labels
+}) {
+  if (!steps || steps.length === 0) {
+    return null;
+  }
+  const getProcessingSteps = () => {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col w-full", children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)]", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
+        step.status && /* @__PURE__ */ jsxRuntime.jsx(StepStatusIcon, { status: step.status }),
+        index < steps.length - 1 && step.status && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px flex-1 min-h-[16px] bg-[var(--deframe-widget-color-bg-primary-dark)] my-[var(--deframe-widget-size-gap-xs)]" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 pb-[var(--deframe-widget-size-padding-y-sm)] min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx(StepDisplay, { step, completedText: labels.completedText, processingText: labels.processingText, failedText: labels.failedText, viewOnExplorerText: labels.viewOnExplorerText }) })
+    ] }, `step-${index}`)) });
+  };
+  const items = [
+    {
+      label: "",
+      value: getProcessingSteps(),
+      valueClassName: "flex flex-col gap-[var(--deframe-widget-size-gap-none)] w-full"
+    }
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SummaryDetails,
+    {
+      title: labels.title,
+      items,
+      defaultOpen,
+      className
+    }
+  );
+}
 var HistoryDepositDetailsView = ({
   transactionTypeLabel,
   symbol,
@@ -2473,6 +2639,9 @@ var HistoryDepositDetailsView = ({
   txHash,
   date,
   explorerUrl,
+  status = "SUCCESS",
+  processingSteps,
+  processingDetailsLabels,
   onClose,
   labels
 }) => {
@@ -2531,7 +2700,7 @@ var HistoryDepositDetailsView = ({
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { borderBottom: true, children: [
           /* @__PURE__ */ jsxRuntime.jsx(InfoLabel, { children: labels.statusLabel }),
-          /* @__PURE__ */ jsxRuntime.jsx(SuccessBadge, { children: statusLabel })
+          /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { tone: resolveStatusBadgeTone(status), children: statusLabel })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { borderBottom: true, children: [
           /* @__PURE__ */ jsxRuntime.jsx(InfoLabel, { children: labels.transactionIdLabel }),
@@ -2545,7 +2714,15 @@ var HistoryDepositDetailsView = ({
           /* @__PURE__ */ jsxRuntime.jsx(InfoLabel, { children: labels.transactionLabel }),
           /* @__PURE__ */ jsxRuntime.jsx(ExplorerLink, { href: explorerUrl, children: labels.viewOnExplorerLabel })
         ] })
-      ] }) })
+      ] }) }),
+      (processingSteps == null ? void 0 : processingSteps.length) && processingDetailsLabels ? /* @__PURE__ */ jsxRuntime.jsx(
+        TransactionProcessingDetails,
+        {
+          steps: processingSteps,
+          labels: processingDetailsLabels,
+          defaultOpen: true
+        }
+      ) : null
     ] }) })
   ] });
 };
@@ -2563,6 +2740,9 @@ var HistoryWithdrawDetailsView = ({
   txHash,
   date,
   explorerUrl,
+  status = "SUCCESS",
+  processingSteps,
+  processingDetailsLabels,
   onClose,
   labels
 }) => {
@@ -2621,7 +2801,7 @@ var HistoryWithdrawDetailsView = ({
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { borderBottom: true, children: [
           /* @__PURE__ */ jsxRuntime.jsx(InfoLabel, { children: labels.statusLabel }),
-          /* @__PURE__ */ jsxRuntime.jsx(SuccessBadge, { children: statusLabel })
+          /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { tone: resolveStatusBadgeTone(status), children: statusLabel })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { borderBottom: true, children: [
           /* @__PURE__ */ jsxRuntime.jsx(InfoLabel, { children: labels.transactionIdLabel }),
@@ -2635,7 +2815,15 @@ var HistoryWithdrawDetailsView = ({
           /* @__PURE__ */ jsxRuntime.jsx(InfoLabel, { children: labels.transactionLabel }),
           /* @__PURE__ */ jsxRuntime.jsx(ExplorerLink, { href: explorerUrl, children: labels.viewOnExplorerLabel })
         ] })
-      ] }) })
+      ] }) }),
+      (processingSteps == null ? void 0 : processingSteps.length) && processingDetailsLabels ? /* @__PURE__ */ jsxRuntime.jsx(
+        TransactionProcessingDetails,
+        {
+          steps: processingSteps,
+          labels: processingDetailsLabels,
+          defaultOpen: true
+        }
+      ) : null
     ] }) })
   ] });
 };
@@ -2811,13 +2999,6 @@ var ProgressIndicator = ({
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 h-[4px] bg-[var(--deframe-widget-color-bg-tertiary)] rounded-[var(--deframe-widget-size-radius-md)] ml-[var(--deframe-widget-size-gap-xs)]" })
   ] }) });
 };
-var LoadingDots = ({ className = "" }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `flex gap-[var(--deframe-widget-size-gap-none)].5 ${className}`, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-bounce", style: { animationDelay: "0ms", animationDuration: "1.4s" }, children: "." }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-bounce", style: { animationDelay: "200ms", animationDuration: "1.4s" }, children: "." }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-bounce", style: { animationDelay: "400ms", animationDuration: "1.4s" }, children: "." })
-  ] });
-};
 var SearchInput = ({
   placeholder = "Search",
   value: controlledValue,
@@ -3013,84 +3194,6 @@ var TransactionScreenInvestmentCard = ({
     ] })
   ] }) });
 };
-function StepStatusIcon({ status }) {
-  switch (status) {
-    case "completed":
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-6 h-6 rounded-[var(--deframe-widget-size-radius-full)] bg-[var(--deframe-widget-color-bg-tertiary)] flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(io5.IoCheckmarkOutline, { className: "w-4 h-4 text-[color:var(--deframe-widget-color-state-success)]" }) });
-    case "processing":
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-6 h-6 rounded-[var(--deframe-widget-size-radius-full)] bg-[var(--deframe-widget-color-bg-tertiary)] flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(io5.IoTimeOutline, { className: "w-4 h-4 text-[color:var(--deframe-widget-color-state-warning)]" }) });
-    case "failed":
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-6 h-6 rounded-[var(--deframe-widget-size-radius-full)] bg-[var(--deframe-widget-color-bg-tertiary)] flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(io5.IoAlertCircleOutline, { className: "w-4 h-4 text-[color:var(--deframe-widget-color-state-error)]" }) });
-  }
-}
-function StepStatusText({
-  step,
-  completedText,
-  processingText,
-  failedText,
-  viewOnExplorerText
-}) {
-  if (step.statusText) {
-    const textColorClass2 = step.status === "completed" ? "text-[color:var(--deframe-widget-color-text-primary)]" : step.status === "processing" ? "text-[color:var(--deframe-widget-color-text-secondary)]" : step.status === "failed" ? "text-[color:var(--deframe-widget-color-state-error)]" : "text-[color:var(--deframe-widget-color-text-primary-disabled)]";
-    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: `[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] ${textColorClass2}`, children: step.statusText });
-  }
-  if (step.status === "completed" && step.explorerUrl) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "a",
-      {
-        href: step.explorerUrl,
-        target: "_blank",
-        rel: "noopener noreferrer",
-        className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-brand-primary)] underline hover:no-underline",
-        children: viewOnExplorerText
-      }
-    );
-  }
-  const defaultText = step.status === "completed" ? completedText : step.status === "processing" ? processingText : failedText;
-  const textColorClass = step.status === "completed" ? "text-[color:var(--deframe-widget-color-text-primary)]" : step.status === "processing" ? "text-[color:var(--deframe-widget-color-text-secondary)]" : "text-[color:var(--deframe-widget-color-state-error)]";
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: `[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] ${textColorClass}`, children: defaultText });
-}
-function StepDisplay({ step, completedText, processingText, failedText, viewOnExplorerText }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-[var(--deframe-widget-size-gap-md)] w-full", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-primary)] [font-weight:var(--deframe-widget-font-weight-medium)]", children: step.label }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: step.value ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-secondary)]", children: step.value }) : /* @__PURE__ */ jsxRuntime.jsx(StepStatusText, { step, completedText, processingText, failedText, viewOnExplorerText }) })
-  ] });
-}
-function TransactionProcessingDetails({
-  steps,
-  className = "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-secondary)]",
-  defaultOpen = true,
-  labels
-}) {
-  if (!steps || steps.length === 0) {
-    return null;
-  }
-  const getProcessingSteps = () => {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col w-full", children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)]", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
-        step.status && /* @__PURE__ */ jsxRuntime.jsx(StepStatusIcon, { status: step.status }),
-        index < steps.length - 1 && step.status && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px flex-1 min-h-[16px] bg-[var(--deframe-widget-color-bg-primary-dark)] my-[var(--deframe-widget-size-gap-xs)]" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 pb-[var(--deframe-widget-size-padding-y-sm)] min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx(StepDisplay, { step, completedText: labels.completedText, processingText: labels.processingText, failedText: labels.failedText, viewOnExplorerText: labels.viewOnExplorerText }) })
-    ] }, `step-${index}`)) });
-  };
-  const items = [
-    {
-      label: "",
-      value: getProcessingSteps(),
-      valueClassName: "flex flex-col gap-[var(--deframe-widget-size-gap-none)] w-full"
-    }
-  ];
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    SummaryDetails,
-    {
-      title: labels.title,
-      items,
-      defaultOpen,
-      className
-    }
-  );
-}
 var TokenWithChainBadge = ({
   tokenLogoUrl,
   tokenAlt,
@@ -3557,6 +3660,55 @@ var SwapCrossChainProcessingView = ({
     }
   );
 };
+var InvestmentCrossChainProcessingView = ({
+  title,
+  description,
+  progress,
+  strategyName,
+  strategyIcon,
+  strategySymbol,
+  apyLabel,
+  apyValue,
+  amountUSD,
+  amountToken,
+  onClose,
+  transactionSteps,
+  processingDetailsLabels
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    TransactionScreen,
+    {
+      progress,
+      iconType: "processing",
+      title,
+      description,
+      onClose,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          TransactionScreenInvestmentCard,
+          {
+            strategyName,
+            apyLabel,
+            apyValue,
+            iconSrc: strategyIcon,
+            iconAlt: strategySymbol,
+            amountUSD,
+            amountToken
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          TransactionProcessingDetails,
+          {
+            steps: transactionSteps,
+            defaultOpen: true,
+            className: "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-secondary)]",
+            labels: processingDetailsLabels
+          }
+        )
+      ]
+    }
+  );
+};
 var SwapSignatureWarningView = ({
   fromTokenSymbol,
   fromTokenIcon,
@@ -7367,7 +7519,10 @@ var WalletBalances = ({ cards, variant = "subtle", className }) => {
   const bgClass = variant === "raised" ? "bg-[var(--deframe-widget-color-bg-raised)]" : "bg-[var(--deframe-widget-color-bg-subtle)]";
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("w-full flex flex-row gap-4 mt-md", className), children: cards.map((card) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("flex-1 h-auto px-6 py-4 rounded shadow-sm flex flex-col items-start justify-start gap-xs", bgClass), children: [
     /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: card.label }),
-    /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h3", children: card.value })
+    card.badge ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col gap-xs md:flex-row md:items-end md:gap-[var(--deframe-widget-size-gap-md)]", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h3", children: card.value }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "md:pl-[var(--deframe-widget-size-padding-x-md)]", children: card.badge })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h3", children: card.value })
   ] }, card.label)) });
 };
 var HistoryTabEmpty = ({ title, description }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-[90vh] py-md bg-bg-default dark:bg-bg-default-dark rounded-lg flex flex-col justify-center items-center gap-sm overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex flex-col justify-center items-center gap-md", children: [
@@ -7460,6 +7615,8 @@ var EarnInvestmentSummaryView = ({
   totalInvestedValue,
   totalReturnLabel,
   totalReturnValue,
+  processingBadgeLabel,
+  processingBadgeTitle,
   className
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: tailwindMerge.twMerge("flex flex-col gap-md p-lg bg-bg-subtle dark:bg-bg-subtle-dark rounded", className), children: [
@@ -7468,7 +7625,17 @@ var EarnInvestmentSummaryView = ({
       WalletBalances,
       {
         cards: [
-          { label: totalInvestedLabel, value: totalInvestedValue },
+          {
+            label: totalInvestedLabel,
+            value: totalInvestedValue,
+            badge: processingBadgeLabel ? /* @__PURE__ */ jsxRuntime.jsx(
+              ProcessingBadge,
+              {
+                label: processingBadgeLabel,
+                title: processingBadgeTitle
+              }
+            ) : void 0
+          },
           { label: totalReturnLabel, value: totalReturnValue }
         ],
         variant: "raised",
@@ -7968,7 +8135,15 @@ var HistoryListView = ({
             ) }),
             /* @__PURE__ */ jsxRuntime.jsxs(ListItemContent, { children: [
               /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-text-lg-mobile", children: item.title }),
-              /* @__PURE__ */ jsxRuntime.jsx(Label, { variant: "secondary", className: "text-text-tertiary dark:text-text-tertiary-dark", children: item.subtitle })
+              /* @__PURE__ */ jsxRuntime.jsx(Label, { variant: "secondary", className: "text-text-tertiary dark:text-text-tertiary-dark", children: item.subtitle }),
+              item.status === "PENDING" && item.statusLabel ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-[6px]", children: /* @__PURE__ */ jsxRuntime.jsx(
+                ProcessingBadge,
+                {
+                  label: item.statusLabel,
+                  title: item.statusTitle,
+                  size: "compact"
+                }
+              ) }) : null
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxRuntime.jsx(AmountDisplay, { amount: item.amountFormatted, usdAmount: item.amountUsd }) })
           ]
@@ -7982,12 +8157,15 @@ var HistoryListView = ({
 var EarnTokenSelectorView = ({
   selectedToken,
   onTokenClick,
+  onNetworkClick,
   isLoading,
   selectTokenLabel,
   chainLabel,
   chainImage,
   chainDirectionLabel,
-  chainDisabledTitle
+  chainDisabledTitle,
+  isNetworkDisabled = false,
+  currentNetworkSelected
 }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[10px]", children: [
   /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-[10px] w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
     "button",
@@ -8017,13 +8195,14 @@ var EarnTokenSelectorView = ({
       "button",
       {
         type: "button",
-        disabled: true,
+        onClick: () => onNetworkClick == null ? void 0 : onNetworkClick(currentNetworkSelected),
+        disabled: isNetworkDisabled,
         title: chainDisabledTitle,
-        className: "bg-[var(--deframe-widget-color-bg-tertiary)] border border-[var(--deframe-widget-color-border-secondary)] rounded-lg flex gap-[var(--deframe-widget-size-gap-xs)] items-center px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)] opacity-60 cursor-not-allowed",
+        className: `bg-[var(--deframe-widget-color-bg-tertiary)] border border-[var(--deframe-widget-color-border-secondary)] rounded-lg flex gap-[var(--deframe-widget-size-gap-xs)] items-center px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)] transition-colors ${isNetworkDisabled ? "opacity-60 cursor-not-allowed" : "cursor-pointer hover:border-[var(--deframe-widget-color-border-primary)]"}`,
         children: [
           chainImage && /* @__PURE__ */ jsxRuntime.jsx("img", { src: chainImage, alt: "", className: "w-3 h-3 rounded-full" }),
           /* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: chainLabel }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[18px] h-[18px] flex items-center justify-center opacity-50", children: /* @__PURE__ */ jsxRuntime.jsx(hi2.HiChevronDown, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-tertiary)]" }) })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-[18px] h-[18px] flex items-center justify-center ${isNetworkDisabled ? "opacity-50" : ""}`, children: /* @__PURE__ */ jsxRuntime.jsx(hi2.HiChevronDown, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-tertiary)]" }) })
         ]
       }
     )
@@ -8073,11 +8252,14 @@ var EarnPercentageButtonsView = ({
 var EarnWithdrawTokenSelectorView = ({
   selectedToken,
   onTokenClick,
+  onNetworkClick,
   selectTokenLabel,
   chainLabel,
   chainImage,
   chainDirectionLabel,
-  chainDisabledTitle
+  chainDisabledTitle,
+  isNetworkDisabled = false,
+  currentNetworkSelected
 }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[10px]", children: [
   /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-[10px] w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
     "button",
@@ -8107,13 +8289,14 @@ var EarnWithdrawTokenSelectorView = ({
       "button",
       {
         type: "button",
-        disabled: true,
+        onClick: () => onNetworkClick == null ? void 0 : onNetworkClick(currentNetworkSelected),
+        disabled: isNetworkDisabled,
         title: chainDisabledTitle,
-        className: "bg-[var(--deframe-widget-color-bg-tertiary)] border border-[var(--deframe-widget-color-border-secondary)] rounded-lg flex gap-[var(--deframe-widget-size-gap-xs)] items-center px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)] opacity-60 cursor-not-allowed",
+        className: `bg-[var(--deframe-widget-color-bg-tertiary)] border border-[var(--deframe-widget-color-border-secondary)] rounded-lg flex gap-[var(--deframe-widget-size-gap-xs)] items-center px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)] transition-colors ${isNetworkDisabled ? "opacity-60 cursor-not-allowed" : "cursor-pointer hover:border-[var(--deframe-widget-color-border-primary)]"}`,
         children: [
           chainImage && /* @__PURE__ */ jsxRuntime.jsx("img", { src: chainImage, alt: "", className: "w-3 h-3 rounded-full" }),
           /* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: chainLabel }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[18px] h-[18px] flex items-center justify-center opacity-50", children: /* @__PURE__ */ jsxRuntime.jsx(md.MdArrowDropDown, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-tertiary)]" }) })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-[18px] h-[18px] flex items-center justify-center ${isNetworkDisabled ? "opacity-50" : ""}`, children: /* @__PURE__ */ jsxRuntime.jsx(md.MdArrowDropDown, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-tertiary)]" }) })
         ]
       }
     )
@@ -8201,6 +8384,9 @@ var EarnDepositFormView = ({
   chainImage,
   chainDirectionLabel,
   chainDisabledTitle,
+  onNetworkClick,
+  isNetworkDisabled,
+  currentNetworkSelected,
   // Amount input
   amountValue,
   onAmountChange,
@@ -8253,7 +8439,10 @@ var EarnDepositFormView = ({
             chainLabel,
             chainImage,
             chainDirectionLabel,
-            chainDisabledTitle
+            chainDisabledTitle,
+            onNetworkClick,
+            isNetworkDisabled,
+            currentNetworkSelected
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -8339,6 +8528,9 @@ var EarnWithdrawFormView = ({
   chainImage,
   chainDirectionLabel,
   chainDisabledTitle,
+  onNetworkClick,
+  isNetworkDisabled,
+  currentNetworkSelected,
   // Amount input
   amountValue,
   onAmountChange,
@@ -8394,7 +8586,10 @@ var EarnWithdrawFormView = ({
             chainLabel,
             chainImage,
             chainDirectionLabel,
-            chainDisabledTitle
+            chainDisabledTitle,
+            onNetworkClick,
+            isNetworkDisabled,
+            currentNetworkSelected
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -9026,6 +9221,7 @@ exports.InfoRowIconValue = InfoRowIconValue;
 exports.InfoRowWithIcon = InfoRowWithIcon;
 exports.InfoValue = InfoValue;
 exports.Input = Input2;
+exports.InvestmentCrossChainProcessingView = InvestmentCrossChainProcessingView;
 exports.Label = Label;
 exports.Link = Link;
 exports.ListItem = ListItem;
@@ -9038,6 +9234,7 @@ exports.MediumRiskBadge = MediumRiskBadge;
 exports.Navbar = Navbar;
 exports.PercentageButton = PercentageButton;
 exports.PrimaryButton = PrimaryButton;
+exports.ProcessingBadge = ProcessingBadge;
 exports.ProgressIndicator = ProgressIndicator;
 exports.ScrollableContent = ScrollableContent;
 exports.SearchEmptyState = SearchEmptyState;