@deframe-sdk/components 0.1.17 → 0.1.19

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,
@@ -3204,41 +3307,159 @@ var SwapProcessingView = ({
     }
   );
 };
-function LoadingIcon() {
-  const green = "var(--deframe-widget-color-brand-primary)";
-  const trackColor = "color-mix(in srgb, var(--deframe-widget-color-brand-primary) 12%, transparent)";
-  const sw = 2.8;
-  const aw = 2.4;
+
+// src/stories/swap-form-view/constants.ts
+var SWAP_SIMPLE_MIN_HEIGHT = 520;
+var SWAP_SIMPLE_WIDTH = 480;
+function SwapFormSkeleton() {
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    framerMotion.motion.svg,
+    "div",
     {
-      "data-test-id": "swap-processing-simple-loading-icon",
-      width: "56",
-      height: "56",
-      viewBox: "0 0 56 56",
-      fill: "none",
-      "aria-hidden": "true",
-      animate: { rotate: 360 },
-      transition: { duration: 1.6, repeat: Infinity, ease: "linear" },
+      "data-test-id": "swap-form-skeleton",
+      className: tailwindMerge.twMerge(
+        "relative",
+        "rounded-[var(--deframe-widget-size-radius-md)]",
+        "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]",
+        "flex flex-col items-stretch gap-[var(--deframe-widget-size-gap-sm)]",
+        "font-[var(--deframe-widget-font-family)]"
+      ),
+      style: { minHeight: SWAP_SIMPLE_MIN_HEIGHT },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "28", cy: "28", r: "22", stroke: trackColor, strokeWidth: sw }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "swap-form-skeleton-history", className: "flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-9 h-9 rounded-[var(--deframe-widget-size-radius-full)] border border-[color:var(--deframe-widget-color-border-secondary)]" }) }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
+          SkeletonCard,
           {
-            d: "M 6.75 22.31 A 22 22 0 0 1 49.25 22.31",
-            stroke: green,
-            strokeWidth: sw,
-            strokeLinecap: "round"
+            testId: "swap-form-skeleton-from",
+            symbol: "USDC",
+            network: "ARBITRUM",
+            amount: "500",
+            usd: "\u2248 $499.87",
+            balance: "Saldo: 1 250.00 USDC"
           }
         ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "swap-form-skeleton-swap-btn-wrapper", className: "flex justify-center -my-[16px] relative z-[1]", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: tailwindMerge.twMerge(
+              "w-10 h-10",
+              "rounded-[var(--deframe-widget-size-radius-sm)]",
+              "bg-[var(--deframe-widget-color-bg-secondary)]",
+              "border border-[color:var(--deframe-widget-color-border-secondary)]",
+              "flex items-center justify-center",
+              "text-[color:var(--deframe-widget-color-brand-primary)]"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+              /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "19 12 12 19 5 12" })
+            ] })
+          }
+        ) }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
+          SkeletonCard,
           {
-            d: "M 45.0 18.1 L 49.25 22.31 L 51.0 16.5",
-            stroke: green,
-            strokeWidth: aw,
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
+            testId: "swap-form-skeleton-to",
+            symbol: "ETH",
+            network: "ETHEREUM",
+            amount: "0.2061",
+            usd: "\u2248 $499.00",
+            balance: "Saldo: 41 ETH"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-test-id": "swap-form-skeleton-submit",
+            className: tailwindMerge.twMerge(
+              "h-12",
+              "rounded-[var(--deframe-widget-size-radius-sm)]",
+              "bg-[var(--deframe-widget-color-brand-primary)]",
+              "flex items-center justify-center",
+              "text-[15px] [font-weight:var(--deframe-widget-font-weight-semibold)]",
+              "text-[color:var(--deframe-widget-color-text-primary-dark)]"
+            ),
+            children: "Revisar Troca"
+          }
+        )
+      ]
+    }
+  );
+}
+function SkeletonCard({ testId, symbol, network, amount, usd, balance }) {
+  const initials = symbol.slice(0, 2).toUpperCase();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-test-id": testId,
+      className: tailwindMerge.twMerge(
+        "rounded-[var(--deframe-widget-size-radius-sm)]",
+        "border border-[color:var(--deframe-widget-color-border-secondary)]",
+        "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)]", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-center gap-[10px] flex-shrink-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-shrink-0", style: { width: 38, height: 38 }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "w-[38px] h-[38px] rounded-[var(--deframe-widget-size-radius-full)] bg-[var(--deframe-widget-color-brand-primary)] flex items-center justify-center text-[13px] [font-weight:var(--deframe-widget-font-weight-bold)] text-[color:var(--deframe-widget-color-text-primary-dark)]",
+                  children: initials
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -bottom-0.5 -right-0.5 w-4 h-4 rounded-[var(--deframe-widget-size-radius-full)] bg-[var(--deframe-widget-color-bg-tertiary)] shadow-[0_0_0_2px_var(--deframe-widget-color-bg-secondary)] flex items-center justify-center text-[7px] [font-weight:var(--deframe-widget-font-weight-bold)] text-[color:var(--deframe-widget-color-text-primary-dark)]", children: network.slice(0, 2) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[16px] [font-weight:var(--deframe-widget-font-weight-semibold)] leading-[1.2] text-[color:var(--deframe-widget-color-text-primary)]", children: symbol }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] [font-weight:var(--deframe-widget-font-weight-medium)] text-[color:var(--deframe-widget-color-text-tertiary)] uppercase tracking-[0.04em] leading-[1.2]", children: network })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-10 bg-[var(--deframe-widget-color-border-secondary)] flex-shrink-0" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[36px] [font-weight:var(--deframe-widget-font-weight-semibold)] [line-height:1.1] text-[color:var(--deframe-widget-color-text-primary)] text-right w-full", children: amount }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)]", children: usd })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-[var(--deframe-widget-size-gap-sm)]", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)]", children: balance }) })
+      ]
+    }
+  );
+}
+function LoadingIcon() {
+  const green = "var(--deframe-widget-color-brand-primary)";
+  const trackColor = "color-mix(in srgb, var(--deframe-widget-color-brand-primary) 12%, transparent)";
+  const sw = 2.8;
+  const aw = 2.4;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    framerMotion.motion.svg,
+    {
+      "data-test-id": "swap-processing-simple-loading-icon",
+      width: "56",
+      height: "56",
+      viewBox: "0 0 56 56",
+      fill: "none",
+      "aria-hidden": "true",
+      animate: { rotate: 360 },
+      transition: { duration: 1.6, repeat: Infinity, ease: "linear" },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "28", cy: "28", r: "22", stroke: trackColor, strokeWidth: sw }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M 6.75 22.31 A 22 22 0 0 1 49.25 22.31",
+            stroke: green,
+            strokeWidth: sw,
+            strokeLinecap: "round"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M 45.0 18.1 L 49.25 22.31 L 51.0 16.5",
+            stroke: green,
+            strokeWidth: aw,
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -3264,72 +3485,68 @@ function LoadingIcon() {
     }
   );
 }
-var SwapProcessingViewSimple = ({
-  titleText,
-  descriptionPrefix,
-  activityHistoryText,
-  onGoToHistory
-}) => {
+var SwapProcessingViewSimple = () => {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      "data-test-id": "swap-processing-simple-screen",
+      "data-test-id": "swap-processing-simple-wrapper",
       className: tailwindMerge.twMerge(
-        "absolute inset-0 z-10",
-        "flex flex-col items-center justify-center",
-        "gap-[var(--deframe-widget-size-gap-lg)]",
-        "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-lg)]",
-        "rounded-[inherit]",
-        "backdrop-blur-[12px] [-webkit-backdrop-filter:blur(12px)]",
-        "bg-[color-mix(in_srgb,var(--deframe-widget-color-bg-primary)_88%,transparent)]"
+        "relative overflow-hidden",
+        `w-[${SWAP_SIMPLE_WIDTH}px] max-w-[calc(100%-32px)] box-border`,
+        "bg-[var(--deframe-widget-color-bg-secondary)]",
+        "rounded-[var(--deframe-widget-size-radius-md)]",
+        "border border-[color:var(--deframe-widget-color-border-secondary)]",
+        "font-[var(--deframe-widget-font-family)]"
       ),
+      style: { minHeight: SWAP_SIMPLE_MIN_HEIGHT },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(LoadingIcon, {}),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "swap-processing-simple-skeleton", children: /* @__PURE__ */ jsxRuntime.jsx(SwapFormSkeleton, {}) }),
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            "data-test-id": "swap-processing-simple-copy",
-            className: "flex flex-col items-center gap-[var(--deframe-widget-size-gap-sm)] text-center",
+            "data-test-id": "swap-processing-simple-screen",
+            className: tailwindMerge.twMerge(
+              "absolute inset-0 z-10",
+              "flex flex-col items-center justify-center",
+              "gap-[var(--deframe-widget-size-gap-lg)]",
+              "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-lg)]",
+              "rounded-[inherit]",
+              "backdrop-blur-[12px] [-webkit-backdrop-filter:blur(12px)]",
+              "bg-[color-mix(in_srgb,var(--deframe-widget-color-bg-primary)_88%,transparent)]"
+            ),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  "data-test-id": "swap-processing-simple-title",
-                  className: tailwindMerge.twMerge(
-                    "[font-size:12px] [line-height:1.25] [letter-spacing:0.10em] uppercase",
-                    "[font-weight:var(--deframe-widget-font-weight-semibold)]",
-                    "font-[var(--deframe-widget-font-family)]",
-                    "text-[color:var(--deframe-widget-color-brand-primary)]"
-                  ),
-                  children: titleText
-                }
-              ),
+              /* @__PURE__ */ jsxRuntime.jsx(LoadingIcon, {}),
               /* @__PURE__ */ jsxRuntime.jsxs(
-                "span",
+                "div",
                 {
-                  "data-test-id": "swap-processing-simple-subtitle",
-                  className: tailwindMerge.twMerge(
-                    "[font-size:var(--deframe-widget-font-size-md)] [line-height:1.6]",
-                    "[font-weight:var(--deframe-widget-font-weight-regular)]",
-                    "font-[var(--deframe-widget-font-family)]",
-                    "text-[color:var(--deframe-widget-color-text-secondary)]",
-                    "max-w-[260px]"
-                  ),
+                  "data-test-id": "swap-processing-simple-copy",
+                  className: "flex flex-col items-center gap-[var(--deframe-widget-size-gap-sm)] text-center",
                   children: [
-                    descriptionPrefix,
-                    " ",
                     /* @__PURE__ */ jsxRuntime.jsx(
-                      "button",
+                      "span",
                       {
-                        "data-test-id": "swap-processing-simple-history-link",
-                        onClick: onGoToHistory,
-                        "aria-label": activityHistoryText,
+                        "data-test-id": "swap-processing-simple-title",
                         className: tailwindMerge.twMerge(
-                          "bg-transparent border-0 p-0 cursor-pointer",
+                          "[font-size:12px] [line-height:1.25] [letter-spacing:0.10em] uppercase",
                           "[font-weight:var(--deframe-widget-font-weight-semibold)]",
+                          "font-[var(--deframe-widget-font-family)]",
                           "text-[color:var(--deframe-widget-color-brand-primary)]"
                         ),
-                        children: activityHistoryText
+                        children: "PROCESSANDO TRANSA\xC7\xC3O..."
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        "data-test-id": "swap-processing-simple-subtitle",
+                        className: tailwindMerge.twMerge(
+                          "[font-size:var(--deframe-widget-font-size-md)] [line-height:1.6]",
+                          "[font-weight:var(--deframe-widget-font-weight-regular)]",
+                          "font-[var(--deframe-widget-font-family)]",
+                          "text-[color:var(--deframe-widget-color-text-secondary)]",
+                          "max-w-[260px]"
+                        ),
+                        children: "Aguarde enquanto sua troca \xE9 confirmada."
                       }
                     )
                   ]
@@ -3443,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,
@@ -3515,6 +3781,162 @@ var SwapSignatureWarningView = ({
     }
   );
 };
+function WarningIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    framerMotion.motion.div,
+    {
+      "data-test-id": "swap-signature-warning-simple-icon",
+      initial: { scale: 0.55, opacity: 0 },
+      animate: { scale: 1, opacity: 1 },
+      transition: { type: "spring", stiffness: 300, damping: 20, delay: 0.05 },
+      className: tailwindMerge.twMerge(
+        "w-[84px] h-[84px] rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0",
+        "flex items-center justify-center",
+        "bg-[var(--deframe-widget-color-state-warning)]",
+        "shadow-[0_0_0_10px_color-mix(in_srgb,var(--deframe-widget-color-state-warning)_12%,transparent),0_0_32px_color-mix(in_srgb,var(--deframe-widget-color-state-warning)_22%,transparent)]"
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "44", height: "44", viewBox: "0 0 44 44", fill: "none", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          framerMotion.motion.line,
+          {
+            x1: "22",
+            y1: "10",
+            x2: "22",
+            y2: "26",
+            stroke: "white",
+            strokeWidth: "3.5",
+            strokeLinecap: "round",
+            initial: { pathLength: 0 },
+            animate: { pathLength: 1 },
+            transition: { duration: 0.3, delay: 0.2, ease: "easeOut" }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          framerMotion.motion.circle,
+          {
+            cx: "22",
+            cy: "33",
+            r: "2",
+            fill: "white",
+            initial: { scale: 0, opacity: 0 },
+            animate: { scale: 1, opacity: 1 },
+            transition: { duration: 0.15, delay: 0.45, ease: "easeOut" }
+          }
+        )
+      ] })
+    }
+  );
+}
+var SwapSignatureWarningViewSimple = ({
+  errorTitle,
+  errorDescription,
+  onCancel,
+  onTryAgain,
+  cancelButtonText,
+  retryButtonText
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-test-id": "swap-signature-warning-simple-wrapper",
+      className: tailwindMerge.twMerge(
+        "relative overflow-hidden",
+        `min-h-[${SWAP_SIMPLE_MIN_HEIGHT}px]`,
+        `w-[${SWAP_SIMPLE_WIDTH}px] max-w-[calc(100%-32px)] box-border`,
+        "bg-[var(--deframe-widget-color-bg-secondary)]",
+        "rounded-[var(--deframe-widget-size-radius-md)]",
+        "border border-[color:var(--deframe-widget-color-border-secondary)]",
+        "font-[var(--deframe-widget-font-family)]"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "swap-signature-warning-simple-skeleton", children: /* @__PURE__ */ jsxRuntime.jsx(SwapFormSkeleton, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            "data-test-id": "swap-signature-warning-simple-screen",
+            className: tailwindMerge.twMerge(
+              "absolute inset-0 z-10",
+              "flex flex-col items-center justify-center",
+              "gap-[var(--deframe-widget-size-gap-lg)]",
+              "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-lg)]",
+              "rounded-[inherit]",
+              "backdrop-blur-[12px] [-webkit-backdrop-filter:blur(12px)]",
+              "bg-[color-mix(in_srgb,var(--deframe-widget-color-bg-primary)_88%,transparent)]"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(WarningIcon, {}),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  "data-test-id": "swap-signature-warning-simple-copy",
+                  className: "flex flex-col items-center gap-[var(--deframe-widget-size-gap-sm)] text-center",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        "data-test-id": "swap-signature-warning-simple-title",
+                        className: tailwindMerge.twMerge(
+                          "[font-size:22px] [line-height:1.25]",
+                          "[font-weight:var(--deframe-widget-font-weight-bold)]",
+                          "font-[var(--deframe-widget-font-family)]",
+                          "text-[color:var(--deframe-widget-color-text-primary)]"
+                        ),
+                        children: errorTitle
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        "data-test-id": "swap-signature-warning-simple-subtitle",
+                        className: tailwindMerge.twMerge(
+                          "[font-size:var(--deframe-widget-font-size-md)] [line-height:1.6]",
+                          "[font-weight:var(--deframe-widget-font-weight-regular)]",
+                          "font-[var(--deframe-widget-font-family)]",
+                          "text-[color:var(--deframe-widget-color-text-secondary)]",
+                          "max-w-[260px]"
+                        ),
+                        children: errorDescription
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  "data-test-id": "swap-signature-warning-simple-actions",
+                  className: "flex gap-[var(--deframe-widget-size-gap-sm)] w-full max-w-[320px]",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      SecondaryButton,
+                      {
+                        "data-test-id": "swap-signature-warning-simple-cancel",
+                        "aria-label": cancelButtonText != null ? cancelButtonText : "Cancel",
+                        className: "flex-1",
+                        onClick: onCancel,
+                        children: cancelButtonText
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      PrimaryButton,
+                      {
+                        "data-test-id": "swap-signature-warning-simple-retry",
+                        "aria-label": retryButtonText != null ? retryButtonText : "Retry",
+                        className: "flex-1",
+                        onClick: onTryAgain,
+                        children: retryButtonText
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
 var SwapSuccessView = ({
   fromTokenSymbol,
   fromTokenIcon,
@@ -3631,71 +4053,69 @@ function SuccessIcon() {
     }
   );
 }
-var SwapSuccessViewSimple = ({
-  onGoToWallet,
-  labels
-}) => {
+var SwapSuccessViewSimple = () => {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      "data-test-id": "swap-success-simple-screen",
+      "data-test-id": "swap-success-simple-wrapper",
       className: tailwindMerge.twMerge(
-        "absolute inset-0 z-10",
-        "flex flex-col items-center justify-center",
-        "gap-[var(--deframe-widget-size-gap-lg)]",
-        "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-lg)]",
-        "rounded-[inherit]",
-        "backdrop-blur-[12px] [-webkit-backdrop-filter:blur(12px)]",
-        "bg-[color-mix(in_srgb,var(--deframe-widget-color-bg-primary)_88%,transparent)]"
+        "relative overflow-hidden",
+        `min-h-[${SWAP_SIMPLE_MIN_HEIGHT}px]`,
+        `w-[${SWAP_SIMPLE_WIDTH}px] max-w-[calc(100%-32px)] box-border`,
+        "bg-[var(--deframe-widget-color-bg-secondary)]",
+        "rounded-[var(--deframe-widget-size-radius-md)]",
+        "border border-[color:var(--deframe-widget-color-border-secondary)]",
+        "font-[var(--deframe-widget-font-family)]"
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(SuccessIcon, {}),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "swap-success-simple-skeleton", children: /* @__PURE__ */ jsxRuntime.jsx(SwapFormSkeleton, {}) }),
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            "data-test-id": "swap-success-simple-copy",
-            className: "flex flex-col items-center gap-[var(--deframe-widget-size-gap-sm)] text-center",
+            "data-test-id": "swap-success-simple-screen",
+            className: tailwindMerge.twMerge(
+              "absolute inset-0 z-10",
+              "flex flex-col items-center justify-center",
+              "gap-[var(--deframe-widget-size-gap-lg)]",
+              "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-lg)]",
+              "rounded-[inherit]",
+              "backdrop-blur-[12px] [-webkit-backdrop-filter:blur(12px)]",
+              "bg-[color-mix(in_srgb,var(--deframe-widget-color-bg-primary)_88%,transparent)]"
+            ),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  "data-test-id": "swap-success-simple-title",
-                  className: tailwindMerge.twMerge(
-                    "[font-size:var(--deframe-widget-font-size-xl)]",
-                    "[line-height:var(--deframe-widget-font-leading-xl)]",
-                    "[font-weight:var(--deframe-widget-font-weight-bold)]",
-                    "font-[var(--deframe-widget-font-family)]",
-                    "text-[color:var(--deframe-widget-color-text-primary)]"
-                  ),
-                  children: labels == null ? void 0 : labels.title
-                }
-              ),
+              /* @__PURE__ */ jsxRuntime.jsx(SuccessIcon, {}),
               /* @__PURE__ */ jsxRuntime.jsxs(
-                "span",
+                "div",
                 {
-                  "data-test-id": "swap-success-simple-subtitle",
-                  className: tailwindMerge.twMerge(
-                    "[font-size:var(--deframe-widget-font-size-md)] [line-height:1.6]",
-                    "[font-weight:var(--deframe-widget-font-weight-regular)]",
-                    "font-[var(--deframe-widget-font-family)]",
-                    "text-[color:var(--deframe-widget-color-text-secondary)]",
-                    "max-w-[260px]"
-                  ),
+                  "data-test-id": "swap-success-simple-copy",
+                  className: "flex flex-col items-center gap-[var(--deframe-widget-size-gap-sm)] text-center",
                   children: [
-                    labels == null ? void 0 : labels.descriptionSuffix,
-                    " ",
                     /* @__PURE__ */ jsxRuntime.jsx(
-                      "button",
+                      "span",
                       {
-                        "data-test-id": "swap-success-simple-wallet-link",
-                        onClick: onGoToWallet,
-                        "aria-label": labels == null ? void 0 : labels.walletLinkText,
+                        "data-test-id": "swap-success-simple-title",
                         className: tailwindMerge.twMerge(
-                          "bg-transparent border-0 p-0 cursor-pointer",
-                          "[font-weight:var(--deframe-widget-font-weight-semibold)]",
-                          "text-[color:var(--deframe-widget-color-brand-primary)]"
+                          "[font-size:var(--deframe-widget-font-size-xl)]",
+                          "[line-height:var(--deframe-widget-font-leading-xl)]",
+                          "[font-weight:var(--deframe-widget-font-weight-bold)]",
+                          "font-[var(--deframe-widget-font-family)]",
+                          "text-[color:var(--deframe-widget-color-text-primary)]"
+                        ),
+                        children: "Troca Aprovada!"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        "data-test-id": "swap-success-simple-subtitle",
+                        className: tailwindMerge.twMerge(
+                          "[font-size:var(--deframe-widget-font-size-md)] [line-height:1.6]",
+                          "[font-weight:var(--deframe-widget-font-weight-regular)]",
+                          "font-[var(--deframe-widget-font-family)]",
+                          "text-[color:var(--deframe-widget-color-text-secondary)]",
+                          "max-w-[260px]"
                         ),
-                        children: labels == null ? void 0 : labels.walletLinkText
+                        children: "Seu saldo foi atualizado."
                       }
                     )
                   ]
@@ -3840,49 +4260,67 @@ var SwapTransactionFailedViewSimple = ({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      "data-test-id": "swap-failed-simple-screen",
+      "data-test-id": "swap-failed-simple-wrapper",
       className: tailwindMerge.twMerge(
-        "absolute inset-0 z-10",
-        "flex flex-col items-center justify-center",
-        "gap-[var(--deframe-widget-size-gap-lg)]",
-        "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-lg)]",
-        "rounded-[inherit]",
-        "backdrop-blur-[12px] [-webkit-backdrop-filter:blur(12px)]",
-        "bg-[color-mix(in_srgb,var(--deframe-widget-color-bg-primary)_88%,transparent)]"
+        "relative overflow-hidden",
+        `min-h-[${SWAP_SIMPLE_MIN_HEIGHT}px]`,
+        `w-[${SWAP_SIMPLE_WIDTH}px] max-w-[calc(100%-32px)] box-border`,
+        "bg-[var(--deframe-widget-color-bg-secondary)]",
+        "rounded-[var(--deframe-widget-size-radius-md)]",
+        "border border-[color:var(--deframe-widget-color-border-secondary)]",
+        "font-[var(--deframe-widget-font-family)]"
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ErrorIcon, {}),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "swap-failed-simple-skeleton", children: /* @__PURE__ */ jsxRuntime.jsx(SwapFormSkeleton, {}) }),
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            "data-test-id": "swap-failed-simple-copy",
-            className: "flex flex-col items-center gap-[var(--deframe-widget-size-gap-sm)] text-center",
+            "data-test-id": "swap-failed-simple-screen",
+            className: tailwindMerge.twMerge(
+              "absolute inset-0 z-10",
+              "flex flex-col items-center justify-center",
+              "gap-[var(--deframe-widget-size-gap-lg)]",
+              "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-lg)]",
+              "rounded-[inherit]",
+              "backdrop-blur-[12px] [-webkit-backdrop-filter:blur(12px)]",
+              "bg-[color-mix(in_srgb,var(--deframe-widget-color-bg-primary)_88%,transparent)]"
+            ),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  "data-test-id": "swap-failed-simple-title",
-                  className: tailwindMerge.twMerge(
-                    "[font-size:22px] [line-height:1.25]",
-                    "[font-weight:var(--deframe-widget-font-weight-bold)]",
-                    "font-[var(--deframe-widget-font-family)]",
-                    "text-[color:var(--deframe-widget-color-text-primary)]"
-                  ),
-                  children: errorTitle
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
+              /* @__PURE__ */ jsxRuntime.jsx(ErrorIcon, {}),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
                 {
-                  "data-test-id": "swap-failed-simple-subtitle",
-                  className: tailwindMerge.twMerge(
-                    "[font-size:var(--deframe-widget-font-size-md)] [line-height:1.6]",
-                    "[font-weight:var(--deframe-widget-font-weight-regular)]",
-                    "font-[var(--deframe-widget-font-family)]",
-                    "text-[color:var(--deframe-widget-color-text-secondary)]",
-                    "max-w-[260px]"
-                  ),
-                  children: errorDescription
+                  "data-test-id": "swap-failed-simple-copy",
+                  className: "flex flex-col items-center gap-[var(--deframe-widget-size-gap-sm)] text-center",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        "data-test-id": "swap-failed-simple-title",
+                        className: tailwindMerge.twMerge(
+                          "[font-size:22px] [line-height:1.25]",
+                          "[font-weight:var(--deframe-widget-font-weight-bold)]",
+                          "font-[var(--deframe-widget-font-family)]",
+                          "text-[color:var(--deframe-widget-color-text-primary)]"
+                        ),
+                        children: "Troca Falhou"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        "data-test-id": "swap-failed-simple-subtitle",
+                        className: tailwindMerge.twMerge(
+                          "[font-size:var(--deframe-widget-font-size-md)] [line-height:1.6]",
+                          "[font-weight:var(--deframe-widget-font-weight-regular)]",
+                          "font-[var(--deframe-widget-font-family)]",
+                          "text-[color:var(--deframe-widget-color-text-secondary)]",
+                          "max-w-[260px]"
+                        ),
+                        children: "Tente novamente mais tarde."
+                      }
+                    )
+                  ]
                 }
               )
             ]
@@ -4493,112 +4931,2349 @@ var SwapFormView = ({
               /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h5", className: "!text-[21px]", children: /* @__PURE__ */ jsxRuntime.jsx("span", { "data-testid": "swap-flow-title", children: labels.title }) }),
               labels.subtitle && /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "!text-[14px]", children: labels.subtitle })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                "data-testid": "swap-history-button",
+                type: "button",
+                onClick: onHistoryClick,
+                className: "flex items-center justify-center w-12 h-12 transition-colors rounded-full cursor-pointer text-text-secondary dark:text-text-secondary-dark hover:text-brand-primary",
+                "aria-label": labels.historyAriaLabel,
+                children: /* @__PURE__ */ jsxRuntime.jsx(md.MdHistory, { className: "w-6 h-6" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-col items-stretch gap-sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SwapFromCardView, __spreadValues({}, fromCard)),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center -my-5 relative z-10", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                "data-testid": "swap-switch-tokens-button",
+                type: "button",
+                onClick: onSwitchTokens,
+                className: "w-10 h-10 rounded-full bg-brand-secondary shadow-md flex items-center justify-center text-text-primary hover:shadow-lg transition-shadow focus:outline-none focus:ring-2 focus:ring-brand-secondary cursor-pointer",
+                "aria-label": switchTokensAriaLabel,
+                children: /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineSwapVert, { className: "w-5 h-5" })
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx(SwapToCardView, __spreadValues({}, toCard))
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(SwapAdvancedSettingsView, __spreadValues({}, advancedSettings)),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pb-xl", children: /* @__PURE__ */ jsxRuntime.jsx(SwapQuoteDetailsView, __spreadValues({}, transactionDetails)) })
+        ] }) })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-testid": "swap-flow-footer",
+        className: "border-t p-md border-border-default dark:border-border-default-dark bg-bg-primary dark:bg-bg-primary-dark",
+        children: /* @__PURE__ */ jsxRuntime.jsx(ConfirmSwapButtonView, __spreadValues({}, confirmButton))
+      }
+    )
+  ] });
+};
+var SwapFromCardViewSimple = ({
+  labels,
+  selectedToken,
+  onTokenClick,
+  onNetworkAndAssetClick,
+  balanceFormatted,
+  onBalanceClick,
+  chainLabel,
+  chainImage,
+  amountValue,
+  amountHasError,
+  onAmountChange,
+  amountUsdFormatted,
+  isAmountUsdLoading,
+  field,
+  percentageOptions,
+  onPercentageClick,
+  selectedPercentage = null,
+  maxLabel = "Max.",
+  errorMessage = "Saldo insuficiente para realizar a troca.",
+  errorActionLabel = "Adicionar via PIX",
+  onErrorAction
+}) => {
+  const [isHovered, setIsHovered] = React6.useState(false);
+  const hideTimeout = React6.useRef(null);
+  const handleMouseEnter = React6.useCallback(() => {
+    if (hideTimeout.current) {
+      clearTimeout(hideTimeout.current);
+      hideTimeout.current = null;
+    }
+    setIsHovered(true);
+  }, []);
+  const handleMouseLeave = React6.useCallback(() => {
+    hideTimeout.current = setTimeout(() => setIsHovered(false), 150);
+  }, []);
+  const wrapperClasses = tailwindMerge.twMerge(
+    "rounded-[var(--deframe-widget-size-radius-sm)]",
+    "border",
+    "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]",
+    "transition-[border-color,background] duration-200",
+    amountHasError ? "border-[color:color-mix(in_srgb,var(--deframe-widget-color-state-error)_32%,transparent)] bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-error)_16%,transparent)]" : "border-[color:var(--deframe-widget-color-border-secondary)] bg-[var(--deframe-widget-color-bg-secondary)]"
+  );
+  const isEmpty = !amountValue || Number(amountValue) === 0;
+  const showChips = isHovered && percentageOptions && percentageOptions.length > 0 && onPercentageClick;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-test-id": "swap-from-card-simple",
+      className: wrapperClasses,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            "data-test-id": "swap-from-card-simple-top-row",
+            className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)]",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                TokenSelectorArea,
+                {
+                  selectedToken,
+                  chainLabel,
+                  chainImage,
+                  onTokenClick: onNetworkAndAssetClick != null ? onNetworkAndAssetClick : onTokenClick,
+                  selectTokenLabel: labels.selectTokenLabel
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  "data-test-id": "swap-from-card-simple-divider",
+                  className: "w-px h-10 bg-[var(--deframe-widget-color-border-secondary)] flex-shrink-0"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  "data-test-id": "swap-from-card-simple-amount-wrapper",
+                  className: "flex flex-col items-end flex-1 min-w-0",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "input",
+                      __spreadProps(__spreadValues({
+                        "data-test-id": "swap-from-card-simple-amount-input",
+                        type: "text",
+                        inputMode: "decimal",
+                        autoComplete: "off",
+                        placeholder: "0",
+                        "aria-label": labels.amountPlaceholder,
+                        value: amountValue || "",
+                        className: tailwindMerge.twMerge(
+                          "bg-transparent border-none outline-none",
+                          "text-right",
+                          "text-[36px] [font-weight:var(--deframe-widget-font-weight-semibold)] [line-height:1.1]",
+                          "w-full px-[var(--deframe-widget-size-padding-x-none)] py-[var(--deframe-widget-size-padding-y-none)]",
+                          "font-[var(--deframe-widget-font-family)]",
+                          "placeholder:text-[color:var(--deframe-widget-color-text-tertiary)]",
+                          isEmpty ? "text-[color:var(--deframe-widget-color-text-tertiary)]" : "text-[color:var(--deframe-widget-color-text-primary)]"
+                        )
+                      }, field ? { name: field.name, onBlur: field.onBlur, ref: field.ref } : {}), {
+                        onChange: (e) => onAmountChange(e.target.value),
+                        onWheel: (e) => {
+                          e.currentTarget.blur();
+                        }
+                      })
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        "data-test-id": "swap-from-card-simple-usd-conversion",
+                        className: "text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]",
+                        children: isAmountUsdLoading ? /* @__PURE__ */ jsxRuntime.jsx(LoadingDots, {}) : amountUsdFormatted
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        selectedToken && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-test-id": "swap-from-card-simple-balance-row",
+            className: "flex items-center justify-between mt-[var(--deframe-widget-size-gap-sm)]",
+            children: onBalanceClick ? /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                "data-test-id": "swap-from-card-simple-balance",
+                type: "button",
+                onClick: onBalanceClick,
+                "aria-label": `${labels.balanceLabel}: ${balanceFormatted}`,
+                className: tailwindMerge.twMerge(
+                  "text-[13px] font-[var(--deframe-widget-font-family)] cursor-pointer",
+                  "bg-transparent border-none outline-none p-0",
+                  "text-[color:var(--deframe-widget-color-text-tertiary)]",
+                  "hover:text-[color:var(--deframe-widget-color-text-secondary)]",
+                  "transition-colors duration-150"
+                ),
+                children: [
+                  labels.balanceLabel,
+                  ":",
+                  " ",
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      "data-test-id": "swap-from-card-simple-balance-value",
+                      className: amountHasError ? "text-[color:var(--deframe-widget-color-state-error)]" : "text-[color:var(--deframe-widget-color-text-secondary)]",
+                      children: balanceFormatted
+                    }
+                  )
+                ]
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsxs(
+              "span",
+              {
+                "data-test-id": "swap-from-card-simple-balance",
+                className: "text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]",
+                children: [
+                  labels.balanceLabel,
+                  ":",
+                  " ",
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      "data-test-id": "swap-from-card-simple-balance-value",
+                      className: amountHasError ? "text-[color:var(--deframe-widget-color-state-error)]" : "text-[color:var(--deframe-widget-color-text-secondary)]",
+                      children: balanceFormatted
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: showChips && /* @__PURE__ */ jsxRuntime.jsx(
+          framerMotion.motion.div,
+          {
+            "data-test-id": "swap-from-card-simple-chips",
+            initial: { opacity: 0, height: 0 },
+            animate: { opacity: 1, height: "auto" },
+            exit: { opacity: 0, height: 0 },
+            transition: { duration: 0.15 },
+            className: "overflow-hidden mt-[var(--deframe-widget-size-gap-sm)]",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                "data-test-id": "swap-from-card-simple-chips-row",
+                className: "flex gap-[6px] items-center",
+                children: percentageOptions.map((pct, i) => {
+                  const isLast = i === percentageOptions.length - 1;
+                  const isActive = pct === selectedPercentage;
+                  const chipLabel = isLast ? maxLabel : `${pct / 100}%`;
+                  return /* @__PURE__ */ jsxRuntime.jsx(
+                    ChipPill,
+                    {
+                      label: chipLabel,
+                      active: isActive,
+                      onClick: () => onPercentageClick(pct)
+                    },
+                    pct
+                  );
+                })
+              }
+            )
+          }
+        ) }),
+        amountHasError && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-test-id": "swap-from-card-simple-error",
+            className: "mt-[var(--deframe-widget-size-gap-sm)]",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              InlineNotificationBar,
+              {
+                message: errorMessage,
+                actionLabel: errorActionLabel,
+                onAction: onErrorAction
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+function TokenSelectorArea({
+  selectedToken,
+  chainLabel,
+  chainImage,
+  onTokenClick,
+  selectTokenLabel
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      "data-test-id": "swap-from-card-simple-token-selector",
+      type: "button",
+      onClick: onTokenClick,
+      "aria-label": selectedToken ? `Select token \u2014 currently ${selectedToken.symbol} on ${chainLabel}` : selectTokenLabel,
+      className: tailwindMerge.twMerge(
+        "inline-flex items-center gap-[10px]",
+        "py-[var(--deframe-widget-size-padding-y-sm)] px-[10px]",
+        "rounded-[var(--deframe-widget-size-radius-sm)]",
+        "bg-[var(--deframe-widget-color-bg-tertiary)]",
+        "border-none outline-none",
+        "transition-[background] duration-150",
+        "flex-shrink-0",
+        "cursor-pointer hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_72%,transparent)]"
+      ),
+      children: selectedToken ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          TokenIconWithBadge,
+          {
+            token: selectedToken,
+            chainLabel,
+            chainImage
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            "data-test-id": "swap-from-card-simple-token-info",
+            className: "flex flex-col items-start min-w-0",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  "data-test-id": "swap-from-card-simple-token-symbol",
+                  className: tailwindMerge.twMerge(
+                    "text-[16px] [font-weight:var(--deframe-widget-font-weight-semibold)] leading-[1.2]",
+                    "font-[var(--deframe-widget-font-family)]",
+                    "text-[color:var(--deframe-widget-color-text-primary)]"
+                  ),
+                  children: selectedToken.symbol
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  "data-test-id": "swap-from-card-simple-token-network",
+                  className: "text-[11px] [font-weight:var(--deframe-widget-font-weight-medium)] text-[color:var(--deframe-widget-color-text-tertiary)] uppercase tracking-[0.04em] font-[var(--deframe-widget-font-family)] leading-[1.2]",
+                  children: chainLabel
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, {})
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-test-id": "swap-from-card-simple-token-placeholder-icon",
+            className: "w-[38px] h-[38px] rounded-[var(--deframe-widget-size-radius-full)] bg-[var(--deframe-widget-color-bg-tertiary)] flex-shrink-0"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "data-test-id": "swap-from-card-simple-token-placeholder-label",
+            className: tailwindMerge.twMerge(
+              "text-[16px] [font-weight:var(--deframe-widget-font-weight-semibold)]",
+              "font-[var(--deframe-widget-font-family)]",
+              "text-[color:var(--deframe-widget-color-text-secondary)]",
+              "whitespace-nowrap"
+            ),
+            children: selectTokenLabel
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, {})
+      ] })
+    }
+  );
+}
+function TokenIconWithBadge({ token, chainLabel, chainImage }) {
+  const [imgError, setImgError] = React6.useState(false);
+  const [badgeError, setBadgeError] = React6.useState(false);
+  const size = 38;
+  const badgeSize = 16;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-test-id": "swap-from-card-simple-token-icon",
+      className: "relative flex-shrink-0",
+      style: { width: size, height: size },
+      children: [
+        token.logoURI && !imgError ? /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            "data-test-id": "swap-from-card-simple-token-icon-img",
+            src: token.logoURI,
+            alt: token.symbol,
+            width: size,
+            height: size,
+            className: "rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0 object-cover",
+            onError: () => setImgError(true)
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-test-id": "swap-from-card-simple-token-icon-fallback",
+            className: tailwindMerge.twMerge(
+              "rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0",
+              "flex items-center justify-center",
+              "[font-weight:var(--deframe-widget-font-weight-bold)]",
+              "text-[color:var(--deframe-widget-color-text-primary-dark)]",
+              "bg-[var(--deframe-widget-color-bg-tertiary)]"
+            ),
+            style: { width: size, height: size, fontSize: size * 0.33 },
+            children: token.symbol.slice(0, 2).toUpperCase()
+          }
+        ),
+        chainImage && !badgeError ? /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-test-id": "swap-from-card-simple-token-badge",
+            className: "absolute -bottom-0.5 -right-0.5 rounded-[var(--deframe-widget-size-radius-full)] shadow-[0_0_0_2px_var(--deframe-widget-color-bg-secondary)]",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                "data-test-id": "swap-from-card-simple-token-badge-img",
+                src: chainImage,
+                alt: chainLabel,
+                width: badgeSize,
+                height: badgeSize,
+                className: "rounded-[var(--deframe-widget-size-radius-full)] object-cover",
+                onError: () => setBadgeError(true)
+              }
+            )
+          }
+        ) : chainLabel ? /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-test-id": "swap-from-card-simple-token-badge",
+            className: tailwindMerge.twMerge(
+              "absolute -bottom-0.5 -right-0.5",
+              "rounded-[var(--deframe-widget-size-radius-full)]",
+              "shadow-[0_0_0_2px_var(--deframe-widget-color-bg-secondary)]",
+              "bg-[var(--deframe-widget-color-bg-tertiary)]",
+              "flex items-center justify-center",
+              "[font-weight:var(--deframe-widget-font-weight-bold)]",
+              "text-[color:var(--deframe-widget-color-text-primary-dark)]"
+            ),
+            style: { width: badgeSize, height: badgeSize, fontSize: badgeSize * 0.45 },
+            children: chainLabel.slice(0, 1).toUpperCase()
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function ChevronDown() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      "data-test-id": "swap-from-card-simple-chevron",
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: "flex-shrink-0 text-[color:var(--deframe-widget-color-text-secondary)]",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "6 9 12 15 18 9" })
+    }
+  );
+}
+function ChipPill({ label, active, onClick }) {
+  const baseClasses = tailwindMerge.twMerge(
+    "inline-flex items-center justify-center",
+    "py-[3px] px-[10px]",
+    "rounded-[var(--deframe-widget-size-radius-full)]",
+    "cursor-pointer",
+    "text-[12px]",
+    "transition-all duration-150",
+    "outline-none",
+    "font-[var(--deframe-widget-font-family)]",
+    "whitespace-nowrap",
+    "border"
+  );
+  const stateClasses = active ? tailwindMerge.twMerge(
+    "border-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_32%,transparent)]",
+    "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_12%,transparent)]",
+    "text-[color:var(--deframe-widget-color-brand-primary)]",
+    "[font-weight:var(--deframe-widget-font-weight-semibold)]"
+  ) : tailwindMerge.twMerge(
+    "border-[color:var(--deframe-widget-color-border-secondary)]",
+    "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_84%,transparent)]",
+    "text-[color:var(--deframe-widget-color-text-secondary)]",
+    "[font-weight:var(--deframe-widget-font-weight-regular)]",
+    "hover:border-[color:var(--deframe-widget-color-border-primary)]",
+    "hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_92%,transparent)]",
+    "hover:text-[color:var(--deframe-widget-color-text-primary)]"
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      "data-test-id": "swap-from-card-simple-chip",
+      type: "button",
+      onClick,
+      "aria-label": label,
+      className: tailwindMerge.twMerge(baseClasses, stateClasses),
+      children: /* @__PURE__ */ jsxRuntime.jsx("span", { "data-test-id": "swap-from-card-simple-chip-label", children: label })
+    }
+  );
+}
+function InlineNotificationBar({ message, actionLabel, onAction }) {
+  const wrapperClasses = tailwindMerge.twMerge(
+    "relative flex items-center gap-[var(--deframe-widget-size-gap-sm)]",
+    "py-[7px] pr-[10px] pl-[14px]",
+    "rounded-[var(--deframe-widget-size-radius-sm)]",
+    "border",
+    "overflow-hidden",
+    "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-error)_16%,transparent)]",
+    "border-[color:color-mix(in_srgb,var(--deframe-widget-color-state-error)_32%,transparent)]"
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-test-id": "swap-from-card-simple-notification",
+      role: "alert",
+      className: wrapperClasses,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-test-id": "swap-from-card-simple-notification-accent",
+            className: tailwindMerge.twMerge(
+              "absolute left-0 top-0 bottom-0 w-[3px]",
+              "rounded-[var(--deframe-widget-size-radius-sm)_0_0_var(--deframe-widget-size-radius-sm)]",
+              "bg-[var(--deframe-widget-color-state-error)]"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-test-id": "swap-from-card-simple-notification-dot",
+            className: "w-[6px] h-[6px] rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0 bg-[var(--deframe-widget-color-state-error)]"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "data-test-id": "swap-from-card-simple-notification-message",
+            className: "flex-1 text-[13px] text-[color:var(--deframe-widget-color-text-secondary)] font-[var(--deframe-widget-font-family)] leading-[1.4]",
+            children: message
+          }
+        ),
+        onAction && /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            "data-test-id": "swap-from-card-simple-notification-action",
+            type: "button",
+            onClick: onAction,
+            "aria-label": actionLabel,
+            className: tailwindMerge.twMerge(
+              "flex-shrink-0 bg-none border-none cursor-pointer",
+              "text-[13px] [font-weight:var(--deframe-widget-font-weight-semibold)]",
+              "py-[var(--deframe-widget-size-padding-y-none)] px-[var(--deframe-widget-size-padding-x-xs)]",
+              "outline-none font-[var(--deframe-widget-font-family)] whitespace-nowrap",
+              "text-[color:var(--deframe-widget-color-state-error)]"
+            ),
+            children: [
+              actionLabel,
+              " \u2192"
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function IconCircle({ item, size = 36 }) {
+  const [imgError, setImgError] = React6__namespace.default.useState(false);
+  if (item.iconUrl && !imgError) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        "data-test-id": "icon-circle-img",
+        src: item.iconUrl,
+        alt: item.name,
+        width: size,
+        height: size,
+        className: "rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0 object-cover",
+        onError: () => setImgError(true)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-test-id": "icon-circle-fallback",
+      className: "rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0 flex items-center justify-center [font-weight:var(--deframe-widget-font-weight-bold)] text-[color:var(--deframe-widget-color-text-primary-dark)]",
+      style: {
+        width: size,
+        height: size,
+        background: item.color,
+        fontSize: size * 0.33,
+        letterSpacing: "-0.01em"
+      },
+      children: item.name.slice(0, 2).toUpperCase()
+    }
+  );
+}
+function TokenIcon2({
+  token,
+  size = 38,
+  badge,
+  badgeSize = 16
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-test-id": "swap-to-simple-token-icon",
+      className: "relative flex-shrink-0",
+      style: { width: size, height: size },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(IconCircle, { item: token, size }),
+        badge && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-test-id": "swap-to-simple-token-badge",
+            className: "absolute -bottom-0.5 -right-0.5 rounded-[var(--deframe-widget-size-radius-full)] shadow-[0_0_0_2px_var(--deframe-widget-color-bg-secondary)]",
+            children: /* @__PURE__ */ jsxRuntime.jsx(IconCircle, { item: badge, size: badgeSize })
+          }
+        )
+      ]
+    }
+  );
+}
+var SwapToCardViewSimple = ({
+  labels,
+  selectedToken,
+  onTokenClick,
+  onNetworkAndAssetClick,
+  balanceFormatted,
+  balanceUsdFormatted,
+  chainLabel,
+  chainImage,
+  outputAmount,
+  isOutputLoading,
+  outputUsdFormatted,
+  isOutputUsdLoading
+}) => {
+  const handleTokenClick = onNetworkAndAssetClick != null ? onNetworkAndAssetClick : onTokenClick;
+  const isEmpty = !outputAmount || Number(outputAmount) === 0;
+  const wrapperClasses = tailwindMerge.twMerge(
+    "rounded-[var(--deframe-widget-size-radius-sm)]",
+    "border",
+    "border-[color:var(--deframe-widget-color-border-secondary)]",
+    "bg-[var(--deframe-widget-color-bg-secondary)]",
+    "px-[var(--deframe-widget-size-padding-x-md)]",
+    "py-[var(--deframe-widget-size-padding-y-md)]",
+    "font-[var(--deframe-widget-font-family)]"
+  );
+  const selectorBaseClasses = tailwindMerge.twMerge(
+    "inline-flex items-center gap-[10px]",
+    "py-[var(--deframe-widget-size-padding-y-sm)] px-[10px]",
+    "rounded-[var(--deframe-widget-size-radius-sm)]",
+    "bg-[var(--deframe-widget-color-bg-tertiary)]",
+    "border-none",
+    "outline-none",
+    "transition-[background] duration-150",
+    "flex-shrink-0",
+    "cursor-pointer hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_72%,transparent)]"
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": "swap-to-card-view-simple", className: wrapperClasses, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "data-test-id": "swap-to-simple-top-row",
+        className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)]",
+        children: [
+          selectedToken ? /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              "data-test-id": "swap-to-simple-token-selector",
+              onClick: handleTokenClick,
+              "aria-label": `Select token \u2014 currently ${selectedToken.symbol} on ${chainLabel}`,
+              className: selectorBaseClasses,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  TokenIcon2,
+                  {
+                    token: {
+                      name: selectedToken.symbol,
+                      color: "var(--deframe-widget-color-brand-secondary)",
+                      iconUrl: selectedToken.logoURI
+                    },
+                    size: 38,
+                    badge: chainLabel ? {
+                      name: chainLabel,
+                      color: "var(--deframe-widget-color-brand-secondary)",
+                      iconUrl: chainImage
+                    } : void 0,
+                    badgeSize: 16
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    "data-test-id": "swap-to-simple-token-info",
+                    className: "flex flex-col items-start min-w-0",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          "data-test-id": "swap-to-simple-token-symbol",
+                          className: "text-[16px] [font-weight:var(--deframe-widget-font-weight-semibold)] leading-[1.2] font-[var(--deframe-widget-font-family)] text-[color:var(--deframe-widget-color-text-primary)]",
+                          children: selectedToken.symbol
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          "data-test-id": "swap-to-simple-token-network",
+                          className: "text-[11px] [font-weight:var(--deframe-widget-font-weight-medium)] text-[color:var(--deframe-widget-color-text-tertiary)] uppercase tracking-[0.04em] font-[var(--deframe-widget-font-family)] leading-[1.2]",
+                          children: chainLabel
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "svg",
+                  {
+                    "data-test-id": "swap-to-simple-chevron",
+                    width: "14",
+                    height: "14",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2.5",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    className: "flex-shrink-0 text-[color:var(--deframe-widget-color-text-secondary)]",
+                    "aria-hidden": "true",
+                    children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "6 9 12 15 18 9" })
+                  }
+                )
+              ]
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              "data-test-id": "swap-to-simple-token-placeholder",
+              onClick: handleTokenClick,
+              "aria-label": labels.selectTokenLabel,
+              className: selectorBaseClasses,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    "data-test-id": "swap-to-simple-placeholder-circle",
+                    className: "rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0 bg-[var(--deframe-widget-color-bg-tertiary)]",
+                    style: { width: 38, height: 38 }
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    "data-test-id": "swap-to-simple-placeholder-label",
+                    className: "text-[16px] [font-weight:var(--deframe-widget-font-weight-semibold)] leading-[1.2] font-[var(--deframe-widget-font-family)] text-[color:var(--deframe-widget-color-text-secondary)] whitespace-nowrap",
+                    children: labels.selectTokenLabel
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "svg",
+                  {
+                    "data-test-id": "swap-to-simple-placeholder-chevron",
+                    width: "14",
+                    height: "14",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2.5",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    className: "flex-shrink-0 text-[color:var(--deframe-widget-color-text-secondary)]",
+                    "aria-hidden": "true",
+                    children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "6 9 12 15 18 9" })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "data-test-id": "swap-to-simple-divider",
+              className: "w-px h-10 bg-[var(--deframe-widget-color-border-secondary)] flex-shrink-0"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              "data-test-id": "swap-to-simple-output-wrapper",
+              className: "flex flex-col items-end flex-1 min-w-0",
+              children: [
+                isOutputLoading ? /* @__PURE__ */ jsxRuntime.jsxs(
+                  "span",
+                  {
+                    "data-test-id": "swap-to-simple-output-loading",
+                    className: tailwindMerge.twMerge(
+                      "text-[36px] [font-weight:var(--deframe-widget-font-weight-semibold)] [line-height:1.1]",
+                      "font-[var(--deframe-widget-font-family)]",
+                      "text-[color:var(--deframe-widget-color-text-tertiary)]",
+                      "text-right",
+                      "flex items-center"
+                    ),
+                    children: [
+                      labels.searchingQuoteLabel,
+                      /* @__PURE__ */ jsxRuntime.jsx(LoadingDots, {})
+                    ]
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    "data-test-id": "swap-to-simple-output-amount",
+                    className: tailwindMerge.twMerge(
+                      "text-[36px] [font-weight:var(--deframe-widget-font-weight-semibold)] [line-height:1.1]",
+                      "font-[var(--deframe-widget-font-family)]",
+                      "text-right w-full",
+                      isEmpty ? "text-[color:var(--deframe-widget-color-text-tertiary)]" : "text-[color:var(--deframe-widget-color-text-primary)]"
+                    ),
+                    children: isEmpty ? "0" : outputAmount
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    "data-test-id": "swap-to-simple-output-usd",
+                    className: "text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]",
+                    children: isOutputUsdLoading ? /* @__PURE__ */ jsxRuntime.jsx(LoadingDots, {}) : outputUsdFormatted
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    selectedToken && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-test-id": "swap-to-simple-balance-row",
+        className: "flex items-center justify-between mt-[var(--deframe-widget-size-gap-sm)]",
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "span",
+          {
+            "data-test-id": "swap-to-simple-balance",
+            className: "text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]",
+            children: [
+              labels.balanceLabel,
+              ":",
+              " ",
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  "data-test-id": "swap-to-simple-balance-value",
+                  className: "text-[color:var(--deframe-widget-color-text-secondary)]",
+                  children: balanceFormatted
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
+  ] });
+};
+function Spinner() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      "data-test-id": "confirm-swap-button-simple-spinner",
+      width: "18",
+      height: "18",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2.5",
+      strokeLinecap: "round",
+      className: "animate-spin",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", opacity: "0.3" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2 A10 10 0 0 1 22 12" })
+      ]
+    }
+  );
+}
+var ConfirmSwapButtonViewSimple = ({
+  buttonLabel,
+  disabled,
+  isLoading,
+  onClick
+}) => {
+  const isDisabled = disabled || isLoading;
+  const buttonClasses = tailwindMerge.twMerge(
+    "w-full h-12",
+    "rounded-[var(--deframe-widget-size-radius-sm)]",
+    "border-none",
+    "text-[15px] [font-weight:var(--deframe-widget-font-weight-semibold)]",
+    "font-[var(--deframe-widget-font-family)]",
+    "transition-[background,color] duration-200",
+    "flex items-center justify-center gap-[var(--deframe-widget-size-gap-sm)]",
+    isDisabled ? "bg-[var(--deframe-widget-color-brand-primary-disabled)] text-[color:var(--deframe-widget-color-text-primary-disabled)] cursor-not-allowed" : "bg-[var(--deframe-widget-color-brand-primary)] text-[color:var(--deframe-widget-color-text-primary-dark)] cursor-pointer"
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "confirm-swap-button-simple-wrapper", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      "data-test-id": "confirm-swap-button-simple",
+      onClick: !isDisabled ? onClick : void 0,
+      disabled: isDisabled,
+      "aria-label": buttonLabel,
+      className: buttonClasses,
+      children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}) : buttonLabel
+    }
+  ) });
+};
+var SwapFormViewSimple = ({
+  onSubmit,
+  formRef,
+  labels,
+  onHistoryClick,
+  onSwitchTokens,
+  switchTokensAriaLabel,
+  fromCard,
+  toCard,
+  advancedSettings,
+  transactionDetails,
+  confirmButton
+}) => {
+  const containerRef = React6.useRef(null);
+  const [panelPos, setPanelPos] = React6.useState(null);
+  const [showPanel, setShowPanel] = React6.useState(false);
+  React6.useEffect(() => {
+    if (!advancedSettings.isOpen) setShowPanel(false);
+  }, [advancedSettings.isOpen]);
+  const updatePanelPos = React6.useCallback(() => {
+    if (containerRef.current && showPanel) {
+      const rect = containerRef.current.getBoundingClientRect();
+      setPanelPos({ top: rect.top, left: rect.right + 16 });
+    }
+  }, [showPanel]);
+  React6.useEffect(() => {
+    if (!showPanel) {
+      setPanelPos(null);
+      return;
+    }
+    updatePanelPos();
+    window.addEventListener("scroll", updatePanelPos, true);
+    window.addEventListener("resize", updatePanelPos);
+    return () => {
+      window.removeEventListener("scroll", updatePanelPos, true);
+      window.removeEventListener("resize", updatePanelPos);
+    };
+  }, [showPanel, updatePanelPos]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: containerRef,
+      "data-test-id": "swap-form-view-simple",
+      className: tailwindMerge.twMerge(
+        "relative",
+        "rounded-[var(--deframe-widget-size-radius-md)]",
+        "border border-[color:var(--deframe-widget-color-border-secondary)]",
+        "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]",
+        "flex flex-col",
+        `w-[${SWAP_SIMPLE_WIDTH}px] max-w-[calc(100%-32px)] shrink-0 box-border`,
+        "font-[var(--deframe-widget-font-family)]"
+      ),
+      style: { minHeight: SWAP_SIMPLE_MIN_HEIGHT },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("form", { ref: formRef, onSubmit, "data-test-id": "swap-form-simple-form", className: "flex flex-col flex-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)]", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                "data-test-id": "swap-form-simple-top-row",
+                className: "flex items-center justify-end mb-[var(--deframe-widget-size-gap-sm)]",
+                children: /* @__PURE__ */ jsxRuntime.jsx(HistoryButton, { onClick: onHistoryClick, ariaLabel: labels.historyAriaLabel })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              SwapFromCardViewSimple,
+              __spreadProps(__spreadValues({}, fromCard), {
+                onNetworkAndAssetClick: fromCard.onNetworkAndAssetClick ? () => {
+                  setShowPanel(false);
+                  fromCard.onNetworkAndAssetClick();
+                } : void 0,
+                percentageOptions: advancedSettings.percentageOptions,
+                onPercentageClick: (pct) => advancedSettings.onPercentageClick(pct),
+                maxLabel: advancedSettings.maxLabel
+              })
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                "data-test-id": "swap-form-simple-direction-row",
+                className: "flex justify-center relative -my-[16px] z-[1]",
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  SwapDirectionButton,
+                  {
+                    onClick: onSwitchTokens,
+                    ariaLabel: switchTokensAriaLabel
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              SwapToCardViewSimple,
+              __spreadProps(__spreadValues({}, toCard), {
+                onNetworkAndAssetClick: toCard.onNetworkAndAssetClick ? () => {
+                  setShowPanel(false);
+                  toCard.onNetworkAndAssetClick();
+                } : void 0
+              })
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                "data-test-id": "swap-form-simple-advanced-wrapper",
+                className: "flex justify-end mt-[var(--deframe-widget-size-gap-sm)]",
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  AdvancedPill,
+                  {
+                    label: "Avan\xE7ado",
+                    isOpen: showPanel,
+                    onClick: () => {
+                      const next = !showPanel;
+                      setShowPanel(next);
+                      advancedSettings.onOpenChange(next);
+                    }
+                  }
+                )
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-[var(--deframe-widget-size-gap-sm)]", children: /* @__PURE__ */ jsxRuntime.jsx(ConfirmSwapButtonViewSimple, __spreadValues({}, confirmButton)) })
+        ] }),
+        showPanel && panelPos && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-test-id": "swap-form-simple-advanced-panel",
+            className: tailwindMerge.twMerge(
+              "fixed",
+              "w-[320px] z-[9999]",
+              "bg-[var(--deframe-widget-color-bg-secondary)]",
+              "rounded-[var(--deframe-widget-size-radius-md)]",
+              "border border-[color:var(--deframe-widget-color-border-secondary)]",
+              "shadow-[0px_4px_24px_0px_#0000003D]",
+              "font-[var(--deframe-widget-font-family)]"
+            ),
+            style: { top: panelPos.top, left: panelPos.left },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              AdvancedPanelContent,
+              {
+                advancedSettings: __spreadProps(__spreadValues({}, advancedSettings), {
+                  onOpenChange: (open) => {
+                    setShowPanel(open);
+                    advancedSettings.onOpenChange(open);
+                  }
+                }),
+                transactionDetails
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+function HistoryButton({ onClick, ariaLabel }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      "data-test-id": "swap-form-simple-history-button",
+      type: "button",
+      onClick,
+      "aria-label": ariaLabel,
+      className: tailwindMerge.twMerge(
+        "inline-flex items-center justify-center",
+        "w-9 h-9",
+        "rounded-[var(--deframe-widget-size-radius-sm)]",
+        "border-none",
+        "cursor-pointer",
+        "bg-transparent",
+        "hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_92%,transparent)]",
+        "transition-[background] duration-150",
+        "flex-shrink-0",
+        "outline-none",
+        "text-[color:var(--deframe-widget-color-text-secondary)]"
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "svg",
+        {
+          "data-test-id": "swap-form-simple-history-icon",
+          viewBox: "0 0 24 24",
+          width: "20",
+          height: "20",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          "aria-hidden": "true",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+            /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "12 6 12 12 16 14" })
+          ]
+        }
+      )
+    }
+  );
+}
+function SwapDirectionButton({ onClick, ariaLabel }) {
+  const [isHovered, setIsHovered] = React6.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    framerMotion.motion.button,
+    {
+      "data-test-id": "swap-form-simple-direction-button",
+      type: "button",
+      onClick,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      animate: { rotate: isHovered ? 180 : 0 },
+      transition: { duration: 0.25, ease: "easeInOut" },
+      "aria-label": ariaLabel,
+      className: tailwindMerge.twMerge(
+        "inline-flex items-center justify-center",
+        "w-10 h-10",
+        "rounded-[var(--deframe-widget-size-radius-sm)]",
+        "bg-[#12151c]",
+        "border border-[color:var(--deframe-widget-color-border-secondary)]",
+        "outline-none",
+        "flex-shrink-0",
+        "shadow-[0px_2px_8px_0px_#0000003D]",
+        "cursor-pointer text-[color:var(--deframe-widget-color-brand-primary)]"
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "svg",
+        {
+          "data-test-id": "swap-form-simple-direction-icon",
+          width: "18",
+          height: "18",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          "aria-hidden": "true",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+            /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "19 12 12 19 5 12" })
+          ]
+        }
+      )
+    }
+  );
+}
+function AdvancedPill({ label, isOpen, onClick }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      "data-test-id": "swap-form-simple-advanced-pill",
+      type: "button",
+      onClick,
+      className: tailwindMerge.twMerge(
+        "inline-flex items-center gap-[5px]",
+        "py-[5px] px-[var(--deframe-widget-size-padding-x-sm)]",
+        "rounded-[var(--deframe-widget-size-radius-full)]",
+        isOpen ? "border border-[color:var(--deframe-widget-color-brand-primary)] bg-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_12%,transparent)]" : "border border-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_32%,transparent)] bg-transparent",
+        "hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_12%,transparent)]",
+        "cursor-pointer",
+        "text-[color:var(--deframe-widget-color-brand-primary)]",
+        "text-[13px] [font-weight:var(--deframe-widget-font-weight-medium)]",
+        "outline-none",
+        "font-[inherit]",
+        "transition-[background] duration-150",
+        "flex-shrink-0"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "svg",
+          {
+            "data-test-id": "swap-form-simple-advanced-pill-icon",
+            width: "13",
+            height: "13",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4", y1: "6", x2: "20", y2: "6" }),
+              /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4", y1: "12", x2: "20", y2: "12" }),
+              /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4", y1: "18", x2: "20", y2: "18" }),
+              /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "6", r: "2", fill: "currentColor", stroke: "none" }),
+              /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "16", cy: "12", r: "2", fill: "currentColor", stroke: "none" }),
+              /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "10", cy: "18", r: "2", fill: "currentColor", stroke: "none" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { "data-test-id": "swap-form-simple-advanced-pill-label", children: label })
+      ]
+    }
+  );
+}
+function AdvancedPanelContent({ advancedSettings, transactionDetails }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-test-id": "swap-form-simple-advanced-panel-content",
+      className: "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            "data-test-id": "swap-form-simple-advanced-panel-header",
+            className: "flex justify-between items-center mb-[6px]",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  "data-test-id": "swap-form-simple-advanced-panel-title",
+                  className: "text-[15px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)] font-[inherit]",
+                  children: "Avan\xE7ado"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  "data-test-id": "swap-form-simple-advanced-panel-close",
+                  type: "button",
+                  onClick: () => advancedSettings.onOpenChange(false),
+                  "aria-label": "Close advanced panel",
+                  className: tailwindMerge.twMerge(
+                    "inline-flex items-center justify-center",
+                    "w-7 h-7",
+                    "rounded-[var(--deframe-widget-size-radius-sm)]",
+                    "border-none cursor-pointer bg-transparent",
+                    "hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_92%,transparent)]",
+                    "transition-[background] duration-150",
+                    "flex-shrink-0 outline-none",
+                    "text-[color:var(--deframe-widget-color-text-secondary)]"
+                  ),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "svg",
+                    {
+                      "data-test-id": "swap-form-simple-advanced-panel-close-icon",
+                      viewBox: "0 0 24 24",
+                      width: "16",
+                      height: "16",
+                      fill: "currentColor",
+                      "aria-hidden": "true",
+                      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z" })
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        transactionDetails.exchangeRateFormatted && /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            "data-test-id": "swap-form-simple-advanced-panel-subtitle",
+            className: "text-[13px] text-[color:var(--deframe-widget-color-text-secondary)] m-0 mb-[var(--deframe-widget-size-gap-sm)] leading-[1.4] font-[inherit]",
+            children: transactionDetails.exchangeRateFormatted
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-test-id": "swap-form-simple-advanced-panel-divider",
+            className: "h-px bg-[var(--deframe-widget-color-border-secondary)] mt-[var(--deframe-widget-size-gap-sm)]"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { label: transactionDetails.labels.exchangeRateLabel, value: transactionDetails.exchangeRateFormatted }),
+        /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { label: transactionDetails.labels.blockchainCostsLabel, value: transactionDetails.totalCostFormatted }),
+        /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { label: transactionDetails.labels.networkGasLabel, value: transactionDetails.gasCostFormatted }),
+        /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { label: transactionDetails.labels.protocolFeeLabel, value: transactionDetails.protocolFee }),
+        /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { label: transactionDetails.labels.slippageLabel, value: transactionDetails.slippageFormatted }),
+        /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { label: transactionDetails.labels.etaLabel, value: transactionDetails.etaFormatted }),
+        transactionDetails.quoteId && /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { label: transactionDetails.labels.quoteIdLabel, value: transactionDetails.quoteId }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-test-id": "swap-form-simple-advanced-panel-divider-2",
+            className: "h-px bg-[var(--deframe-widget-color-border-secondary)] my-[var(--deframe-widget-size-gap-sm)]"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": "swap-form-simple-advanced-panel-slippage", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              "data-test-id": "swap-form-simple-advanced-panel-slippage-label",
+              className: "text-[11px] [font-weight:var(--deframe-widget-font-weight-medium)] uppercase tracking-[0.07em] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]",
+              children: [
+                "Slippage: ",
+                advancedSettings.slippageFormatted
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "data-test-id": "swap-form-simple-advanced-panel-slippage-buttons",
+              className: "flex gap-[6px] mt-[var(--deframe-widget-size-gap-sm)]",
+              children: [10, 50, 100].map((bps) => {
+                const isActive = advancedSettings.slippageBps === bps;
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    "data-test-id": "swap-form-simple-slippage-btn",
+                    type: "button",
+                    onClick: () => advancedSettings.onSlippageSelect(bps),
+                    className: tailwindMerge.twMerge(
+                      "py-[3px] px-[10px]",
+                      "rounded-[var(--deframe-widget-size-radius-full)]",
+                      "text-[12px] font-[var(--deframe-widget-font-family)]",
+                      "border cursor-pointer outline-none",
+                      "transition-all duration-150",
+                      isActive ? "border-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_32%,transparent)] bg-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_12%,transparent)] text-[color:var(--deframe-widget-color-brand-primary)] [font-weight:var(--deframe-widget-font-weight-semibold)]" : "border-[color:var(--deframe-widget-color-border-secondary)] bg-transparent text-[color:var(--deframe-widget-color-text-secondary)] hover:border-[color:var(--deframe-widget-color-border-primary)]"
+                    ),
+                    children: advancedSettings.formatPercentage(bps)
+                  },
+                  bps
+                );
+              })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function DetailRow({ label, value }) {
+  if (!label && !value) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-test-id": "swap-form-simple-detail-row",
+      className: "flex justify-between items-center py-[10px] gap-[var(--deframe-widget-size-gap-sm)]",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "data-test-id": "swap-form-simple-detail-row-label",
+            className: "text-[11px] [font-weight:var(--deframe-widget-font-weight-medium)] uppercase tracking-[0.07em] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)] flex-shrink-0",
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "data-test-id": "swap-form-simple-detail-row-value",
+            className: "text-[13px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-right font-[var(--deframe-widget-font-family)] text-[color:var(--deframe-widget-color-text-primary)]",
+            children: value
+          }
+        )
+      ]
+    }
+  );
+}
+var ChooseANetworkView = ({
+  labels,
+  autoFocus = true,
+  chains,
+  pageSize = 10,
+  onChainClick
+}) => {
+  const [searchValue, setSearchValue] = React6.useState("");
+  const [page, setPage] = React6.useState(1);
+  React6.useEffect(() => {
+    setPage(1);
+  }, [searchValue]);
+  const filteredChains = chains.filter(
+    (chain) => chain.name.toLowerCase().includes(searchValue.toLowerCase())
+  );
+  const displayedChains = filteredChains.slice(0, page * pageSize);
+  const hasMore = filteredChains.length > page * pageSize;
+  return /* @__PURE__ */ jsxRuntime.jsx(BackgroundContainer, { className: "flex flex-col h-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col flex-1 w-full p-[var(--deframe-widget-size-padding-x-lg)] overflow-hidden", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-shrink-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { children: labels.title }),
+      /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        SearchInput,
+        {
+          value: searchValue,
+          onChange: setSearchValue,
+          placeholder: labels.searchPlaceholder,
+          autoFocus
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "data-testid": "choose-a-network-list",
+        className: "flex flex-col gap-[var(--deframe-widget-size-gap-xs)] w-full mt-[var(--deframe-widget-size-gap-md)] overflow-y-auto flex-1 min-h-0",
+        children: [
+          displayedChains.map((chain) => /* @__PURE__ */ jsxRuntime.jsxs(
+            ListItem,
+            {
+              className: "w-full flex-shrink-0",
+              onClick: () => onChainClick(chain.chainId),
+              "data-testid": `choose-network-item-${chain.chainId}`,
+              "data-chain-id": chain.chainId,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "img",
+                  {
+                    src: chain.imageUrl,
+                    alt: chain.name,
+                    className: "w-10 h-10 rounded-[var(--deframe-widget-size-radius-full)]"
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx(ListItemContent, { children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { children: chain.name }) })
+              ]
+            },
+            `chain-${chain.chainId}`
+          )),
+          hasMore && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center items-center w-full py-[var(--deframe-widget-size-padding-y-md)] flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(TertiaryButton, { onClick: () => setPage(page + 1), children: labels.loadMoreLabel }) })
+        ]
+      }
+    )
+  ] }) });
+};
+function useIsMobile(breakpoint = 640) {
+  const [isMobile, setIsMobile] = React6.useState(
+    typeof window !== "undefined" ? window.innerWidth < breakpoint : false
+  );
+  React6.useEffect(() => {
+    const check = () => setIsMobile(window.innerWidth < breakpoint);
+    check();
+    window.addEventListener("resize", check);
+    return () => window.removeEventListener("resize", check);
+  }, [breakpoint]);
+  return isMobile;
+}
+function CloseButtonInline({ onClick, ariaLabel }) {
+  const baseClasses = [
+    "inline-flex items-center justify-center",
+    "w-9 h-9",
+    "rounded-[var(--deframe-widget-size-radius-sm)]",
+    "border-none",
+    "cursor-pointer",
+    "bg-transparent",
+    "hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_92%,transparent)]",
+    "transition-[background] duration-150",
+    "flex-shrink-0",
+    "outline-none",
+    "text-[color:var(--deframe-widget-color-text-secondary)]"
+  ].join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      "data-test-id": "close-button",
+      onClick,
+      "aria-label": ariaLabel,
+      className: baseClasses,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "svg",
+        {
+          "data-test-id": "close-button-icon",
+          viewBox: "0 0 24 24",
+          width: "20",
+          height: "20",
+          fill: "currentColor",
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z" })
+        }
+      )
+    }
+  );
+}
+function IconCircle2({ iconUrl, name, size = 36, className }) {
+  const [imgError, setImgError] = React6__namespace.useState(false);
+  if (iconUrl && !imgError) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        "data-test-id": "icon-circle-img",
+        src: iconUrl,
+        alt: name,
+        width: size,
+        height: size,
+        className: tailwindMerge.twMerge("rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0 object-cover", className),
+        onError: () => setImgError(true)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-test-id": "icon-circle-fallback",
+      className: tailwindMerge.twMerge(
+        "rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0 flex items-center justify-center",
+        "[font-weight:var(--deframe-widget-font-weight-bold)] text-[color:var(--deframe-widget-color-text-primary-dark)]",
+        "bg-[var(--deframe-widget-color-bg-tertiary)]",
+        className
+      ),
+      style: {
+        width: size,
+        height: size,
+        fontSize: size * 0.33,
+        letterSpacing: "-0.01em"
+      },
+      children: name.slice(0, 2).toUpperCase()
+    }
+  );
+}
+
+// src/stories/choose-network-and-asset-view/ChooseNetworkAndAssetViewSimple/hasSignificantBalance.ts
+function hasSignificantBalance(balanceUsd) {
+  if (!balanceUsd) return false;
+  const num = parseFloat(balanceUsd.replace(/[^0-9.-]/g, ""));
+  return !isNaN(num) && num >= 0.01;
+}
+function NetworkRow({ network, selected, onClick, onKeyDown, index }) {
+  const baseClasses = [
+    "relative flex items-center gap-[10px]",
+    "py-[9px] px-[var(--deframe-widget-size-padding-x-sm)] pl-[14px]",
+    "rounded-[var(--deframe-widget-size-radius-sm)]",
+    "cursor-pointer",
+    "outline-none",
+    "mb-[var(--deframe-widget-size-gap-none)].5",
+    "transition-[background] duration-150"
+  ].join(" ");
+  const stateClasses = {
+    selected: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_12%,transparent)] hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_12%,transparent)]",
+    default: "bg-transparent hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-secondary)_72%,transparent)]"
+  };
+  const rowClasses = tailwindMerge.twMerge(baseClasses, stateClasses[selected ? "selected" : "default"]);
+  const nameClasses = [
+    "text-[14px] [font-weight:var(--deframe-widget-font-weight-medium)]",
+    selected ? "text-[color:var(--deframe-widget-color-text-primary)]" : "text-[color:var(--deframe-widget-color-text-secondary)]"
+  ].join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    framerMotion.motion.div,
+    {
+      "data-test-id": "network-row",
+      role: "option",
+      "aria-selected": selected,
+      "aria-label": network.name,
+      tabIndex: 0,
+      onClick,
+      onKeyDown,
+      "data-chain-index": index,
+      className: rowClasses,
+      children: [
+        selected && /* @__PURE__ */ jsxRuntime.jsx(
+          framerMotion.motion.div,
+          {
+            "data-test-id": "network-row-accent",
+            layoutId: "chain-accent",
+            className: "absolute left-0 top-2 bottom-2 w-[3px] rounded-[var(--deframe-widget-size-radius-xs)] bg-[var(--deframe-widget-color-brand-primary)]",
+            transition: { type: "spring", stiffness: 400, damping: 30 }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          IconCircle2,
+          {
+            iconUrl: network.iconUrl,
+            name: network.name,
+            size: 34
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            "data-test-id": "network-row-content",
+            className: "flex-1 min-w-0",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  "data-test-id": "network-row-name",
+                  className: nameClasses,
+                  children: network.name
+                }
+              ),
+              hasSignificantBalance(network.balanceUsd) && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  "data-test-id": "network-row-balance",
+                  className: "text-[12px] text-[color:var(--deframe-widget-color-text-tertiary)] mt-px",
+                  children: network.balanceUsd
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function NetworkChip({ network, selected, onClick }) {
+  const baseClasses = [
+    "inline-flex items-center gap-[var(--deframe-widget-size-gap-sm)]",
+    "py-[var(--deframe-widget-size-padding-y-sm)] pl-[var(--deframe-widget-size-padding-x-sm)] pr-[14px]",
+    "rounded-[var(--deframe-widget-size-radius-full)]",
+    "cursor-pointer",
+    "whitespace-nowrap",
+    "transition-all duration-150",
+    "flex-shrink-0",
+    "outline-none",
+    "border"
+  ].join(" ");
+  const stateClasses = {
+    selected: "border-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_32%,transparent)] bg-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_12%,transparent)]",
+    default: "border-[color:var(--deframe-widget-color-border-secondary)] bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-secondary)_72%,transparent)]"
+  };
+  const buttonClasses = tailwindMerge.twMerge(baseClasses, stateClasses[selected ? "selected" : "default"]);
+  const nameLabelClasses = [
+    "text-[13px] [font-weight:var(--deframe-widget-font-weight-medium)] leading-[1.2]",
+    selected ? "text-[color:var(--deframe-widget-color-brand-primary)]" : "text-[color:var(--deframe-widget-color-text-secondary)]"
+  ].join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      "data-test-id": "network-chip",
+      onClick,
+      "aria-label": network.name,
+      className: buttonClasses,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          IconCircle2,
+          {
+            iconUrl: network.iconUrl,
+            name: network.name,
+            size: 24
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            "data-test-id": "network-chip-content",
+            className: "text-left",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  "data-test-id": "network-chip-label",
+                  className: nameLabelClasses,
+                  children: network.name
+                }
+              ),
+              hasSignificantBalance(network.balanceUsd) && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  "data-test-id": "network-chip-balance",
+                  className: "text-[11px] text-[color:var(--deframe-widget-color-text-tertiary)] leading-[1.4]",
+                  children: network.balanceUsd
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var SearchInputInline = React6__namespace.forwardRef(
+  ({ value, onChange, placeholder, onArrowDown, autoFocus }, ref) => {
+    const inputClasses = [
+      "w-full box-border h-10",
+      "bg-[var(--deframe-widget-color-bg-tertiary)]",
+      "border border-[color:var(--deframe-widget-color-border-secondary)]",
+      "rounded-[var(--deframe-widget-size-radius-sm)]",
+      "py-[var(--deframe-widget-size-padding-y-none)] pr-[var(--deframe-widget-size-padding-x-xl)] pl-[14px]",
+      "text-[14px] text-[color:var(--deframe-widget-color-text-primary)]",
+      "outline-none focus:outline-none",
+      "focus:border-[color:var(--deframe-widget-color-brand-primary)]",
+      "transition-colors duration-150",
+      "font-[var(--deframe-widget-font-family)]",
+      "placeholder:text-[color:var(--deframe-widget-color-text-tertiary)]"
+    ].join(" ");
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "data-test-id": "search-input-wrapper",
+        className: "relative",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              "data-test-id": "search-input",
+              ref,
+              type: "text",
+              value,
+              onChange: (e) => onChange(e.target.value),
+              placeholder,
+              "aria-label": placeholder,
+              autoFocus,
+              onKeyDown: (e) => {
+                if (e.key === "ArrowDown") {
+                  e.preventDefault();
+                  onArrowDown == null ? void 0 : onArrowDown();
+                }
+              },
+              className: inputClasses
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "data-test-id": "search-input-icon",
+              className: "absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-[color:var(--deframe-widget-color-text-tertiary)]",
+              children: /* @__PURE__ */ jsxRuntime.jsxs(
+                "svg",
+                {
+                  width: "15",
+                  height: "15",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  "aria-hidden": "true",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "8" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
+                  ]
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+SearchInputInline.displayName = "SearchInputInline";
+function AssetRowInline({
+  token,
+  balance,
+  formatTokenAmount,
+  formatCurrencyValue,
+  onClick,
+  onKeyDown,
+  index
+}) {
+  var _a;
+  const hasBalance = !!balance && parseFloat(balance.amountInUSD) >= 0.01;
+  const formattedAmount = balance ? formatTokenAmount(balance.amountUI, (_a = token.priceInUSD) != null ? _a : 0, token.decimals) : void 0;
+  const formattedUsd = balance ? formatCurrencyValue(parseFloat(balance.amountInUSD)) : void 0;
+  const baseClasses = [
+    "group",
+    "relative flex items-center gap-[var(--deframe-widget-size-gap-sm)]",
+    "py-[10px] px-[14px]",
+    "rounded-[var(--deframe-widget-size-radius-sm)]",
+    "cursor-pointer outline-none",
+    "transition-[background] duration-150"
+  ].join(" ");
+  const rowClasses = tailwindMerge.twMerge(baseClasses, "bg-transparent hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-secondary)_72%,transparent)]");
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-test-id": "asset-row",
+      role: "option",
+      "aria-selected": false,
+      "aria-label": `${token.name} ${token.symbol}`,
+      tabIndex: 0,
+      onClick,
+      onKeyDown,
+      "data-asset-index": index,
+      className: rowClasses,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          IconCircle2,
+          {
+            iconUrl: token.logoURI,
+            name: token.name,
+            size: 38
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            "data-test-id": "asset-row-content",
+            className: "flex-1 min-w-0",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  "data-test-id": "asset-row-symbol",
+                  className: "text-[14px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)]",
+                  children: token.symbol
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  "data-test-id": "asset-row-name",
+                  className: "text-[13px] text-[color:var(--deframe-widget-color-text-secondary)] mt-px",
+                  children: token.name
+                }
+              )
+            ]
+          }
+        ),
+        hasBalance ? /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            "data-test-id": "asset-row-balance",
+            className: "flex-shrink-0 text-right",
+            children: [
+              formattedAmount && /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  "data-test-id": "asset-row-balance-amount",
+                  className: "text-[13px] [font-weight:var(--deframe-widget-font-weight-medium)] text-[color:var(--deframe-widget-color-text-primary)]",
+                  children: [
+                    formattedAmount,
+                    " ",
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        "data-test-id": "asset-row-balance-symbol",
+                        className: "text-[12px] text-[color:var(--deframe-widget-color-text-tertiary)] [font-weight:var(--deframe-widget-font-weight-regular)]",
+                        children: token.symbol
+                      }
+                    )
+                  ]
+                }
+              ),
+              formattedUsd && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  "data-test-id": "asset-row-balance-usd",
+                  className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)] mt-[var(--deframe-widget-size-gap-none)].5",
+                  children: formattedUsd
+                }
+              )
+            ]
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {})
+      ]
+    }
+  );
+}
+function TokensLoadingState({ label }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-test-id": "tokens-loading-state",
+      className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)] px-[14px] py-[var(--deframe-widget-size-padding-y-sm)]",
+      children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          "data-test-id": `tokens-loading-skeleton-${i}`,
+          className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)] animate-pulse",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[38px] h-[38px] rounded-[var(--deframe-widget-size-radius-full)] bg-[var(--deframe-widget-color-bg-tertiary)] flex-shrink-0" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0 flex flex-col gap-[6px]", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[14px] w-[60%] rounded-[var(--deframe-widget-size-radius-xs)] bg-[var(--deframe-widget-color-bg-tertiary)]" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[12px] w-[40%] rounded-[var(--deframe-widget-size-radius-xs)] bg-[var(--deframe-widget-color-bg-tertiary)]" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-shrink-0 flex flex-col items-end gap-[6px]", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[13px] w-[50px] rounded-[var(--deframe-widget-size-radius-xs)] bg-[var(--deframe-widget-color-bg-tertiary)]" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[12px] w-[36px] rounded-[var(--deframe-widget-size-radius-xs)] bg-[var(--deframe-widget-color-bg-tertiary)]" })
+            ] })
+          ]
+        },
+        i
+      ))
+    }
+  );
+}
+function AssetSearchAndList({
+  query,
+  setQuery,
+  searchRef,
+  assetListRef,
+  displayedTokens,
+  findBalance,
+  formatTokenAmount,
+  formatCurrencyValue,
+  isMobile,
+  onAssetClick,
+  handleAssetKeyDown,
+  isFetching,
+  hasMore,
+  onLoadMore,
+  labels,
+  autoFocus
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-test-id": "search-and-assets",
+      className: "flex flex-col flex-1 overflow-hidden",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-test-id": "search-wrapper",
+            className: tailwindMerge.twMerge(
+              "px-[var(--deframe-widget-size-padding-x-md)] pb-[var(--deframe-widget-size-padding-y-sm)] flex-shrink-0",
+              isMobile ? "pt-[var(--deframe-widget-size-padding-y-none)]" : "pt-[var(--deframe-widget-size-padding-y-sm)]"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              SearchInputInline,
               {
-                "data-testid": "swap-history-button",
-                type: "button",
-                onClick: onHistoryClick,
-                className: "flex items-center justify-center w-12 h-12 transition-colors rounded-full cursor-pointer text-text-secondary dark:text-text-secondary-dark hover:text-brand-primary",
-                "aria-label": labels.historyAriaLabel,
-                children: /* @__PURE__ */ jsxRuntime.jsx(md.MdHistory, { className: "w-6 h-6" })
+                ref: searchRef,
+                value: query,
+                onChange: setQuery,
+                placeholder: labels.searchPlaceholder,
+                autoFocus,
+                onArrowDown: () => {
+                  var _a, _b;
+                  (_b = (_a = assetListRef.current) == null ? void 0 : _a.querySelector("[data-asset-index='0']")) == null ? void 0 : _b.focus();
+                }
               }
             )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-col items-stretch gap-sm", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(SwapFromCardView, __spreadValues({}, fromCard)),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center -my-5 relative z-10", children: /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-test-id": "section-label",
+            className: "px-[var(--deframe-widget-size-padding-x-md)] pb-[var(--deframe-widget-size-padding-y-xs)] flex-shrink-0 text-[11px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-tertiary)] tracking-[0.06em] uppercase",
+            children: labels.assetsLabel
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref: assetListRef,
+            role: "listbox",
+            "aria-label": labels.assetsLabel,
+            "data-test-id": "asset-list",
+            className: "flex-1 overflow-y-auto px-[var(--deframe-widget-size-padding-x-sm)] pb-[var(--deframe-widget-size-padding-y-sm)] pt-[var(--deframe-widget-size-padding-y-xs)]",
+            children: isFetching ? /* @__PURE__ */ jsxRuntime.jsx(TokensLoadingState, { label: labels.searchingText }) : displayedTokens.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
               {
-                "data-testid": "swap-switch-tokens-button",
-                type: "button",
-                onClick: onSwitchTokens,
-                className: "w-10 h-10 rounded-full bg-brand-secondary shadow-md flex items-center justify-center text-text-primary hover:shadow-lg transition-shadow focus:outline-none focus:ring-2 focus:ring-brand-secondary cursor-pointer",
-                "aria-label": switchTokensAriaLabel,
-                children: /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineSwapVert, { className: "w-5 h-5" })
+                "data-test-id": "no-results",
+                className: "py-[var(--deframe-widget-size-padding-y-xl)] px-[var(--deframe-widget-size-padding-x-md)] text-center",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      "data-test-id": "no-results-title",
+                      className: "text-[14px] text-[color:var(--deframe-widget-color-text-secondary)] mb-[var(--deframe-widget-size-gap-xs)]",
+                      children: labels.searchEmptyTitle
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      "data-test-id": "no-results-description",
+                      className: "text-[12px] text-[color:var(--deframe-widget-color-text-tertiary)]",
+                      children: labels.searchEmptyDescription
+                    }
+                  )
+                ]
               }
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsx(SwapToCardView, __spreadValues({}, toCard))
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(SwapAdvancedSettingsView, __spreadValues({}, advancedSettings)),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pb-xl", children: /* @__PURE__ */ jsxRuntime.jsx(SwapQuoteDetailsView, __spreadValues({}, transactionDetails)) })
-        ] }) })
+            ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              displayedTokens.map((token, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                AssetRowInline,
+                {
+                  token,
+                  balance: findBalance(token),
+                  formatTokenAmount,
+                  formatCurrencyValue,
+                  onClick: () => onAssetClick(token),
+                  onKeyDown: (e) => handleAssetKeyDown(e, token, i),
+                  index: i
+                },
+                `${token.chainId}-${token.address}-${i}`
+              )),
+              hasMore && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  "data-test-id": "load-more-wrapper",
+                  className: "flex justify-center py-[var(--deframe-widget-size-padding-y-sm)]",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      "data-test-id": "load-more-button",
+                      "aria-label": labels.loadMoreButton,
+                      onClick: onLoadMore,
+                      className: [
+                        "text-[13px] [font-weight:var(--deframe-widget-font-weight-medium)]",
+                        "text-[color:var(--deframe-widget-color-brand-primary)]",
+                        "bg-transparent border-none cursor-pointer outline-none",
+                        "hover:underline",
+                        "font-[var(--deframe-widget-font-family)]"
+                      ].join(" "),
+                      children: labels.loadMoreButton
+                    }
+                  )
+                }
+              )
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+function ChooseNetworkAndAssetViewSimple({
+  isOpen,
+  onClose,
+  networks,
+  selectedNetwork,
+  onNetworkSelect,
+  displayedTokens,
+  findBalance,
+  formatTokenAmount,
+  formatCurrencyValue,
+  onAssetClick,
+  onSearch,
+  autoFocus,
+  hasMore,
+  onLoadMore,
+  isFetching,
+  labels
+}) {
+  var _a;
+  const [query, setQuery] = React6__namespace.useState("");
+  const searchRef = React6__namespace.useRef(null);
+  const chainListRef = React6__namespace.useRef(null);
+  const assetListRef = React6__namespace.useRef(null);
+  const isMobile = useIsMobile();
+  const activeNetwork = (_a = selectedNetwork != null ? selectedNetwork : networks[0]) != null ? _a : null;
+  const handleQueryChange = React6__namespace.useCallback((q) => {
+    setQuery(q);
+    onSearch(q);
+  }, [onSearch]);
+  const handleNetworkSelect = React6__namespace.useCallback((network) => {
+    var _a2;
+    setQuery("");
+    onSearch("");
+    onNetworkSelect(network);
+    (_a2 = searchRef.current) == null ? void 0 : _a2.focus();
+  }, [onSearch, onNetworkSelect]);
+  React6__namespace.useEffect(() => {
+    if (!isOpen) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [isOpen, onClose]);
+  React6__namespace.useEffect(() => {
+    if (isOpen && autoFocus) {
+      const id = requestAnimationFrame(() => {
+        var _a2;
+        return (_a2 = searchRef.current) == null ? void 0 : _a2.focus();
+      });
+      return () => cancelAnimationFrame(id);
+    }
+  }, [isOpen, autoFocus]);
+  const handleChainKeyDown = React6__namespace.useCallback((e, network, idx) => {
+    var _a2, _b, _c, _d;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      handleNetworkSelect(network);
+    }
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      (_b = (_a2 = chainListRef.current) == null ? void 0 : _a2.querySelector(`[data-chain-index="${idx + 1}"]`)) == null ? void 0 : _b.focus();
+    }
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      (_d = (_c = chainListRef.current) == null ? void 0 : _c.querySelector(`[data-chain-index="${idx - 1}"]`)) == null ? void 0 : _d.focus();
+    }
+  }, [handleNetworkSelect]);
+  const handleAssetKeyDown = React6__namespace.useCallback((e, token, idx) => {
+    var _a2, _b, _c, _d, _e;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      onAssetClick(token);
+    }
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      (_b = (_a2 = assetListRef.current) == null ? void 0 : _a2.querySelector(`[data-asset-index="${idx + 1}"]`)) == null ? void 0 : _b.focus();
+    }
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      if (idx === 0) {
+        (_c = searchRef.current) == null ? void 0 : _c.focus();
+        return;
       }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
+      (_e = (_d = assetListRef.current) == null ? void 0 : _d.querySelector(`[data-asset-index="${idx - 1}"]`)) == null ? void 0 : _e.focus();
+    }
+  }, [onAssetClick]);
+  const content = isOpen ? renderContent() : null;
+  return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: content });
+  function renderContent() {
+    const sharedSearchAssets = /* @__PURE__ */ jsxRuntime.jsx(
+      AssetSearchAndList,
       {
-        "data-testid": "swap-flow-footer",
-        className: "border-t p-md border-border-default dark:border-border-default-dark bg-bg-primary dark:bg-bg-primary-dark",
-        children: /* @__PURE__ */ jsxRuntime.jsx(ConfirmSwapButtonView, __spreadValues({}, confirmButton))
+        query,
+        setQuery: handleQueryChange,
+        searchRef,
+        assetListRef,
+        displayedTokens,
+        findBalance,
+        formatTokenAmount,
+        formatCurrencyValue,
+        isMobile,
+        onAssetClick,
+        handleAssetKeyDown,
+        isFetching,
+        hasMore,
+        onLoadMore,
+        labels,
+        autoFocus
       }
-    )
-  ] });
-};
-var ChooseANetworkView = ({
-  labels,
-  autoFocus = true,
-  chains,
-  pageSize = 10,
-  onChainClick
-}) => {
-  const [searchValue, setSearchValue] = React6.useState("");
-  const [page, setPage] = React6.useState(1);
-  React6.useEffect(() => {
-    setPage(1);
-  }, [searchValue]);
-  const filteredChains = chains.filter(
-    (chain) => chain.name.toLowerCase().includes(searchValue.toLowerCase())
-  );
-  const displayedChains = filteredChains.slice(0, page * pageSize);
-  const hasMore = filteredChains.length > page * pageSize;
-  return /* @__PURE__ */ jsxRuntime.jsx(BackgroundContainer, { className: "flex flex-col h-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col flex-1 w-full p-[var(--deframe-widget-size-padding-x-lg)] overflow-hidden", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-shrink-0", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { children: labels.title }),
-      /* @__PURE__ */ jsxRuntime.jsx("br", {}),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        SearchInput,
+    );
+    if (isMobile) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        framerMotion.motion.div,
         {
-          value: searchValue,
-          onChange: setSearchValue,
-          placeholder: labels.searchPlaceholder,
-          autoFocus
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        "data-testid": "choose-a-network-list",
-        className: "flex flex-col gap-[var(--deframe-widget-size-gap-xs)] w-full mt-[var(--deframe-widget-size-gap-md)] overflow-y-auto flex-1 min-h-0",
-        children: [
-          displayedChains.map((chain) => /* @__PURE__ */ jsxRuntime.jsxs(
-            ListItem,
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          exit: { opacity: 0 },
+          transition: { duration: 0.2 },
+          onClick: onClose,
+          "data-test-id": "backdrop",
+          className: "fixed inset-0 bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-primary)_88%,transparent)] backdrop-blur-[4px] z-50 flex flex-col justify-end",
+          children: /* @__PURE__ */ jsxRuntime.jsxs(
+            framerMotion.motion.div,
             {
-              className: "w-full flex-shrink-0",
-              onClick: () => onChainClick(chain.chainId),
-              "data-testid": `choose-network-item-${chain.chainId}`,
-              "data-chain-id": chain.chainId,
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-label": labels.title,
+              initial: { y: "100%" },
+              animate: { y: 0 },
+              exit: { y: "100%" },
+              transition: { type: "spring", stiffness: 320, damping: 32, mass: 0.8 },
+              onClick: (e) => e.stopPropagation(),
+              "data-test-id": "sheet",
+              className: [
+                "bg-[var(--deframe-widget-color-bg-secondary)] flex flex-col overflow-hidden",
+                "rounded-t-[var(--deframe-widget-size-radius-lg)]",
+                "border border-[color:var(--deframe-widget-color-border-secondary)] border-b-0",
+                "shadow-[0px_4px_16px_0px_#00000066,0px_24px_80px_0px_#00000099]",
+                "max-h-[88vh]"
+              ].join(" "),
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "img",
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
                   {
-                    src: chain.imageUrl,
-                    alt: chain.name,
-                    className: "w-10 h-10 rounded-[var(--deframe-widget-size-radius-full)]"
+                    "data-test-id": "drag-handle",
+                    className: "flex justify-center pt-[var(--deframe-widget-size-padding-y-sm)] pb-[var(--deframe-widget-size-padding-y-xs)].5 flex-shrink-0",
+                    children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-9 h-1 rounded-[var(--deframe-widget-size-radius-full)] bg-[var(--deframe-widget-color-border-primary)]" })
                   }
-                ) }),
-                /* @__PURE__ */ jsxRuntime.jsx(ListItemContent, { children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { children: chain.name }) })
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    "data-test-id": "sheet-header",
+                    className: "flex items-center justify-between pt-[var(--deframe-widget-size-padding-y-xs)].5 pr-[var(--deframe-widget-size-padding-x-md)] pb-[var(--deframe-widget-size-padding-y-sm)].5 pl-[var(--deframe-widget-size-padding-x-md)] flex-shrink-0",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          "data-test-id": "sheet-title",
+                          className: "text-[16px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)] font-[var(--deframe-widget-font-family)]",
+                          children: labels.title
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(CloseButtonInline, { onClick: onClose, ariaLabel: labels.closeAriaLabel })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    "data-test-id": "network-section",
+                    className: "flex-shrink-0 pb-[var(--deframe-widget-size-padding-y-sm)].5",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          "data-test-id": "network-section-label",
+                          className: "text-[11px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-tertiary)] tracking-[0.06em] uppercase px-[var(--deframe-widget-size-padding-x-md)] pb-[var(--deframe-widget-size-padding-y-sm)]",
+                          children: labels.networksLabel
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          ref: chainListRef,
+                          role: "listbox",
+                          "aria-label": labels.networksLabel,
+                          "data-test-id": "network-chip-list",
+                          className: "flex gap-[var(--deframe-widget-size-gap-sm)] overflow-x-auto px-[var(--deframe-widget-size-padding-x-md)] pb-[var(--deframe-widget-size-padding-y-xs)] [scrollbar-width:none]",
+                          children: networks.map((network) => /* @__PURE__ */ jsxRuntime.jsx(
+                            NetworkChip,
+                            {
+                              network,
+                              selected: (activeNetwork == null ? void 0 : activeNetwork.chainId) === network.chainId,
+                              onClick: () => handleNetworkSelect(network)
+                            },
+                            network.chainId
+                          ))
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    "data-test-id": "divider",
+                    className: "h-px bg-[var(--deframe-widget-color-border-secondary)] flex-shrink-0"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    "data-test-id": "sheet-body",
+                    className: "flex-1 flex flex-col overflow-hidden pt-[var(--deframe-widget-size-padding-y-xs)]",
+                    children: sharedSearchAssets
+                  }
+                )
               ]
-            },
-            `chain-${chain.chainId}`
-          )),
-          hasMore && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center items-center w-full py-[var(--deframe-widget-size-padding-y-md)] flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(TertiaryButton, { onClick: () => setPage(page + 1), children: labels.loadMoreLabel }) })
-        ]
-      }
-    )
-  ] }) });
-};
+            }
+          )
+        },
+        "mobile"
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      framerMotion.motion.div,
+      {
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        transition: { duration: 0.2 },
+        onClick: onClose,
+        "data-test-id": "backdrop",
+        className: "fixed inset-0 bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-primary)_88%,transparent)] backdrop-blur-[4px] z-50 flex items-center justify-center px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]",
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          framerMotion.motion.div,
+          {
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-label": labels.title,
+            initial: { opacity: 0, scale: 0.96 },
+            animate: { opacity: 1, scale: 1 },
+            exit: { opacity: 0, scale: 0.96 },
+            transition: { duration: 0.2, ease: "easeOut" },
+            onClick: (e) => e.stopPropagation(),
+            "data-test-id": "modal",
+            className: [
+              "w-[min(680px,calc(100vw-32px))]",
+              "h-[min(620px,calc(100vh-64px))]",
+              "bg-[var(--deframe-widget-color-bg-secondary)]",
+              "border border-[color:var(--deframe-widget-color-border-secondary)]",
+              "rounded-[var(--deframe-widget-size-radius-md)]",
+              "shadow-[0px_4px_16px_0px_#00000066,0px_24px_80px_0px_#00000099]",
+              "flex flex-col overflow-hidden"
+            ].join(" "),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  "data-test-id": "modal-header",
+                  className: "flex items-center justify-between pt-[var(--deframe-widget-size-padding-y-md)] pr-[var(--deframe-widget-size-padding-x-md)] pb-[14px] pl-[var(--deframe-widget-size-padding-x-md)] border-b border-[color:var(--deframe-widget-color-border-secondary)] flex-shrink-0",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        "data-test-id": "modal-title",
+                        className: "text-[16px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)] font-[var(--deframe-widget-font-family)]",
+                        children: labels.title
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(CloseButtonInline, { onClick: onClose, ariaLabel: labels.closeAriaLabel })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  "data-test-id": "modal-body",
+                  className: "flex flex-1 overflow-hidden",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      "div",
+                      {
+                        "data-test-id": "network-sidebar",
+                        className: [
+                          "w-[210px] flex-shrink-0",
+                          "border-r border-[color:var(--deframe-widget-color-border-secondary)]",
+                          "bg-[#12151C]",
+                          "flex flex-col overflow-hidden"
+                        ].join(" "),
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "div",
+                            {
+                              "data-test-id": "network-sidebar-label",
+                              className: "px-[var(--deframe-widget-size-padding-x-md)] pt-[var(--deframe-widget-size-padding-y-sm)] pb-[var(--deframe-widget-size-padding-y-xs)].5 text-[11px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-tertiary)] tracking-[0.06em] uppercase",
+                              children: labels.networksLabel
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "div",
+                            {
+                              ref: chainListRef,
+                              role: "listbox",
+                              "aria-label": labels.networksLabel,
+                              "data-test-id": "network-list",
+                              className: "flex-1 overflow-y-auto px-[var(--deframe-widget-size-padding-x-sm)] pb-[var(--deframe-widget-size-padding-y-sm)] pt-[var(--deframe-widget-size-padding-y-xs)]",
+                              children: networks.map((network, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                                NetworkRow,
+                                {
+                                  network,
+                                  selected: (activeNetwork == null ? void 0 : activeNetwork.chainId) === network.chainId,
+                                  onClick: () => handleNetworkSelect(network),
+                                  onKeyDown: (e) => handleChainKeyDown(e, network, i),
+                                  index: i
+                                },
+                                network.chainId
+                              ))
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        "data-test-id": "asset-panel",
+                        className: "flex-1 flex flex-col overflow-hidden",
+                        children: sharedSearchAssets
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      },
+      "desktop"
+    );
+  }
+}
 var SkeletonItem = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full bg-[var(--deframe-widget-color-bg-secondary)] rounded-[var(--deframe-widget-size-radius-xs)] min-h-[72px] flex items-center justify-between px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-sm)]", children: [
   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)] flex-1 min-w-0", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-xl bg-[var(--deframe-widget-color-bg-tertiary)] animate-pulse flex-shrink-0" }),
@@ -4844,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: [
@@ -4937,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: [
@@ -4945,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",
@@ -5372,7 +8062,7 @@ var DateLabel = ({ children }) => {
 var ArrowBadge = ({ isDeposit }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-[-2px] right-[-2px] w-[15px] h-[15px] rounded-full bg-bg-subtle dark:bg-bg-subtle-dark flex items-center justify-center border border-bg-subtle dark:border-bg-subtle-dark", children: isDeposit ? /* @__PURE__ */ jsxRuntime.jsx(md.MdArrowDownward, { className: "w-3 h-3 text-text-primary dark:text-text-primary-dark" }) : /* @__PURE__ */ jsxRuntime.jsx(md.MdArrowUpward, { className: "w-3 h-3 text-text-primary dark:text-text-primary-dark" }) });
 };
-var TokenIconWithBadge = ({ src, alt, isDeposit }) => {
+var TokenIconWithBadge2 = ({ src, alt, isDeposit }) => {
   const fallbackText = encodeURIComponent((alt || "TOK").slice(0, 3).toUpperCase());
   const fallbackSrc = `https://placehold.co/40x40?text=${fallbackText}`;
   const resolvedSrc = src || fallbackSrc;
@@ -5436,7 +8126,7 @@ var HistoryListView = ({
           containerClassName: tailwindMerge.twMerge("!rounded-xs !border-0 !min-h-[72px]", itemClassName),
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: item.isSwap ? /* @__PURE__ */ jsxRuntime.jsx(SwapIconWithBadge, { src: item.iconUrl, alt: item.iconAlt }) : /* @__PURE__ */ jsxRuntime.jsx(
-              TokenIconWithBadge,
+              TokenIconWithBadge2,
               {
                 src: item.iconUrl,
                 alt: item.iconAlt,
@@ -5445,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 }) })
           ]
@@ -5459,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",
@@ -5494,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)]" }) })
         ]
       }
     )
@@ -5550,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",
@@ -5584,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)]" }) })
         ]
       }
     )
@@ -5678,6 +8384,9 @@ var EarnDepositFormView = ({
   chainImage,
   chainDirectionLabel,
   chainDisabledTitle,
+  onNetworkClick,
+  isNetworkDisabled,
+  currentNetworkSelected,
   // Amount input
   amountValue,
   onAmountChange,
@@ -5730,7 +8439,10 @@ var EarnDepositFormView = ({
             chainLabel,
             chainImage,
             chainDirectionLabel,
-            chainDisabledTitle
+            chainDisabledTitle,
+            onNetworkClick,
+            isNetworkDisabled,
+            currentNetworkSelected
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -5816,6 +8528,9 @@ var EarnWithdrawFormView = ({
   chainImage,
   chainDirectionLabel,
   chainDisabledTitle,
+  onNetworkClick,
+  isNetworkDisabled,
+  currentNetworkSelected,
   // Amount input
   amountValue,
   onAmountChange,
@@ -5871,7 +8586,10 @@ var EarnWithdrawFormView = ({
             chainLabel,
             chainImage,
             chainDirectionLabel,
-            chainDisabledTitle
+            chainDisabledTitle,
+            onNetworkClick,
+            isNetworkDisabled,
+            currentNetworkSelected
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -6450,10 +9168,12 @@ exports.BannerNotification = BannerNotification;
 exports.ChooseANetworkView = ChooseANetworkView;
 exports.ChooseAStrategyActionsheetView = ChooseAStrategyActionsheetView;
 exports.ChooseAnAssetSwapView = ChooseAnAssetSwapView;
+exports.ChooseNetworkAndAssetViewSimple = ChooseNetworkAndAssetViewSimple;
 exports.CloseButton = CloseButton_default;
 exports.CollapsibleInfoRow = CollapsibleInfoRow;
 exports.CollapsibleSection = CollapsibleSection;
 exports.ConfirmSwapButtonView = ConfirmSwapButtonView;
+exports.ConfirmSwapButtonViewSimple = ConfirmSwapButtonViewSimple;
 exports.ConnectWalletList = ConnectWalletList;
 exports.Currency = Currency;
 exports.DeframeComponentsProvider = DeframeComponentsProvider;
@@ -6501,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;
@@ -6513,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;
@@ -6535,15 +9257,19 @@ exports.SwapAdvancedSettingsView = SwapAdvancedSettingsView;
 exports.SwapAmountInputView = SwapAmountInputView;
 exports.SwapCrossChainProcessingView = SwapCrossChainProcessingView;
 exports.SwapFormView = SwapFormView;
+exports.SwapFormViewSimple = SwapFormViewSimple;
 exports.SwapFromCardView = SwapFromCardView;
+exports.SwapFromCardViewSimple = SwapFromCardViewSimple;
 exports.SwapHistoryView = SwapHistoryView;
 exports.SwapProcessingView = SwapProcessingView;
 exports.SwapProcessingViewSimple = SwapProcessingViewSimple;
 exports.SwapQuoteDetailsView = SwapQuoteDetailsView;
 exports.SwapSignatureWarningView = SwapSignatureWarningView;
+exports.SwapSignatureWarningViewSimple = SwapSignatureWarningViewSimple;
 exports.SwapSuccessView = SwapSuccessView;
 exports.SwapSuccessViewSimple = SwapSuccessViewSimple;
 exports.SwapToCardView = SwapToCardView;
+exports.SwapToCardViewSimple = SwapToCardViewSimple;
 exports.SwapTransactionFailedView = SwapTransactionFailedView;
 exports.SwapTransactionFailedViewSimple = SwapTransactionFailedViewSimple;
 exports.SwapWidgetFallbackView = SwapWidgetFallbackView;