@deframe-sdk/components 0.1.6 → 0.1.7

package/dist/index.js

@@ -6,6 +6,7 @@ var React6 = require('react');
 var framerMotion = require('framer-motion');
 var md = require('react-icons/md');
 var hi2 = require('react-icons/hi2');
+var io5 = require('react-icons/io5');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -2558,6 +2559,840 @@ var StrategyDetailsView = ({
     /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "strategy-details-footer", className: "sticky bottom-0 left-0 right-0 border-t border-border-subtle dark:border-border-subtle-dark px-md py-md", children: /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { onClick: onDeposit, className: "w-full", children: depositButtonLabel }) })
   ] });
 };
+var ProgressIndicator = ({
+  progress,
+  className = ""
+}) => {
+  const clampedProgress = Math.min(100, Math.max(0, progress));
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `relative h-[12px] w-full ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute left-0 right-0 top-1/2 -translate-y-1/2 flex items-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "h-[4px] bg-brand-primary rounded-lg transition-all duration-300",
+        style: { width: `${clampedProgress}%` }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 h-[4px] bg-bg-muted dark:bg-bg-muted-dark rounded-lg ml-1" })
+  ] }) });
+};
+var LoadingDots = ({ className = "" }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `flex gap-0.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,
+  disabled = false,
+  onChange,
+  onSearch,
+  className = "",
+  inputClassName,
+  autoFocus = false,
+  containerTestId,
+  inputTestId
+}) => {
+  const [internalValue, setInternalValue] = React6.useState(controlledValue || "");
+  React6.useEffect(() => {
+    if (controlledValue !== void 0) {
+      setInternalValue(controlledValue);
+    }
+  }, [controlledValue]);
+  const handleInputChange = (newValue) => {
+    setInternalValue(newValue);
+    onChange == null ? void 0 : onChange(newValue);
+    onSearch == null ? void 0 : onSearch(newValue);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex-1 flex items-center relative ${className}`, "data-testid": containerTestId, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        "data-testid": inputTestId,
+        type: "text",
+        value: internalValue,
+        placeholder,
+        disabled,
+        autoFocus,
+        onChange: (e) => handleInputChange(e.target.value),
+        className: [
+          "w-full h-full rounded p-4 pr-12 leading-normal tracking-wide",
+          !inputClassName ? "bg-bg-subtle dark:bg-bg-subtle-dark" : "",
+          "placeholder:text-text-disabled dark:placeholder:text-text-disabled-dark text-text-primary dark:text-text-primary-dark",
+          "focus:outline-none focus:ring-2 focus:ring-brand-primary",
+          disabled ? "cursor-not-allowed opacity-50" : "",
+          inputClassName || ""
+        ].filter(Boolean).join(" ")
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineSearch, { className: "w-4 h-4 text-text-secondary absolute right-4" })
+  ] });
+};
+var SearchEmptyState = ({
+  title,
+  description
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full py-md bg-bg-default dark:bg-bg-default-dark rounded-lg flex flex-col justify-center items-center gap-sm h-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex flex-col justify-center items-center gap-md py-20", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-center items-center gap-md text-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-20 h-20 bg-bg-muted dark:bg-bg-muted-dark rounded-full flex justify-center items-center", children: /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineSearchOff, { className: "w-10 h-10 text-text-tertiary dark:text-text-tertiary-dark" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(TextHeading_default, { variant: "h3", children: title })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "self-stretch text-center", children: /* @__PURE__ */ jsxRuntime.jsx(TextBody_default, { variant: "text-small", children: description }) })
+  ] }) });
+};
+var CollapsibleSection = ({
+  title,
+  subtitle,
+  children,
+  defaultOpen = false,
+  open: controlledOpen,
+  onOpenChange,
+  className = "",
+  collapseText,
+  expandText
+}) => {
+  const [internalOpen, setInternalOpen] = React6__namespace.default.useState(defaultOpen);
+  const isOpen = controlledOpen !== void 0 ? controlledOpen : internalOpen;
+  const handleToggle = () => {
+    const newOpenState = !isOpen;
+    if (controlledOpen === void 0) {
+      setInternalOpen(newOpenState);
+    }
+    onOpenChange == null ? void 0 : onOpenChange(newOpenState);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-col gap-sm w-full ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: handleToggle,
+        className: "flex items-center justify-between w-full text-left cursor-pointer",
+        "aria-expanded": isOpen,
+        "aria-label": `${isOpen ? collapseText : expandText} ${title}`,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-xs", children: /* @__PURE__ */ jsxRuntime.jsx(TextBody_default, { className: "text-white font-medium", children: title }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-xs", children: [
+            subtitle && /* @__PURE__ */ jsxRuntime.jsx(TextBody_default, { variant: "text-small", children: subtitle }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              framerMotion.motion.svg,
+              {
+                className: "w-5 h-5 text-gray-400",
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                animate: { rotate: isOpen ? 180 : 0 },
+                transition: { duration: 0.2, ease: "easeInOut" },
+                children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 9l7 7 7-7" })
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxRuntime.jsx(
+      framerMotion.motion.div,
+      {
+        initial: { height: 0, opacity: 0 },
+        animate: { height: "auto", opacity: 1 },
+        exit: { height: 0, opacity: 0 },
+        transition: { duration: 0.2, ease: "easeInOut" },
+        style: { overflow: "hidden" },
+        children
+      }
+    ) })
+  ] });
+};
+var TransactionScreenIcon = ({
+  type,
+  gradient = "linear-gradient(135deg, #F6A700 0%, #F59E0B 100%)"
+}) => {
+  if (type === "success") {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-20 h-20", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full rounded-full bg-brand-primary flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-8 h-8 text-white", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 3, children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }) }) }) });
+  }
+  if (type === "warning") {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-[83px] h-[83px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full rounded-full flex items-center justify-center", style: { background: gradient }, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-8 h-8 text-bg-default dark:text-bg-default-dark", fill: "currentColor", viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 5.33334C15.6444 5.33334 15.3111 5.51112 15.1111 5.8L5.11112 21.8C4.91112 22.0889 4.91112 22.4667 5.11112 22.7556C5.31112 23.0444 5.64445 23.2222 6.00001 23.2222H26C26.3556 23.2222 26.6889 23.0444 26.8889 22.7556C27.0889 22.4667 27.0889 22.0889 26.8889 21.8L16.8889 5.8C16.6889 5.51112 16.3556 5.33334 16 5.33334ZM16 10.6667C16.5333 10.6667 17 11.1333 17 11.6667V16C17 16.5333 16.5333 17 16 17C15.4667 17 15 16.5333 15 16V11.6667C15 11.1333 15.4667 10.6667 16 10.6667ZM16 19.3333C16.7333 19.3333 17.3333 19.9333 17.3333 20.6667C17.3333 21.4 16.7333 22 16 22C15.2667 22 14.6667 21.4 14.6667 20.6667C14.6667 19.9333 15.2667 19.3333 16 19.3333Z" }) }) }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-[83px] h-[83px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full rounded-full flex items-center justify-center", style: { background: gradient }, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "11", height: "10", viewBox: "0 0 11 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "w-8 h-8 text-white", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3.66659 8.33301H7.33325V7.08301C7.33325 6.62468 7.15374 6.23231 6.79471 5.90593C6.43568 5.57954 6.00409 5.41634 5.49992 5.41634C4.99575 5.41634 4.56415 5.57954 4.20513 5.90593C3.8461 6.23231 3.66659 6.62468 3.66659 7.08301V8.33301ZM5.49992 4.58301C6.00409 4.58301 6.43568 4.41981 6.79471 4.09342C7.15374 3.76704 7.33325 3.37467 7.33325 2.91634V1.66634H3.66659V2.91634C3.66659 3.37467 3.8461 3.76704 4.20513 4.09342C4.56415 4.41981 4.99575 4.58301 5.49992 4.58301ZM2.29159 9.16634C2.16172 9.16634 2.05287 9.12641 1.96502 9.04655C1.87718 8.96669 1.83325 8.86773 1.83325 8.74968C1.83325 8.63162 1.87718 8.53266 1.96502 8.4528C2.05287 8.37294 2.16172 8.33301 2.29159 8.33301H2.74992V7.08301C2.74992 6.6594 2.85877 6.26183 3.07648 5.8903C3.29419 5.51877 3.59784 5.2219 3.98742 4.99967C3.59784 4.77745 3.29419 4.48058 3.07648 4.10905C2.85877 3.73752 2.74992 3.33995 2.74992 2.91634V1.66634H2.29159C2.16172 1.66634 2.05287 1.62641 1.96502 1.54655C1.87718 1.46669 1.83325 1.36773 1.83325 1.24967C1.83325 1.13162 1.87718 1.03266 1.96502 0.952799C2.05287 0.872938 2.16172 0.833008 2.29159 0.833008H8.70825C8.83811 0.833008 8.94697 0.872938 9.03481 0.952799C9.12266 1.03266 9.16659 1.13162 9.16659 1.24967C9.16659 1.36773 9.12266 1.46669 9.03481 1.54655C8.94697 1.62641 8.83811 1.66634 8.70825 1.66634H8.24992V2.91634C8.24992 3.33995 8.14106 3.73752 7.92336 4.10905C7.70565 4.48058 7.402 4.77745 7.01242 4.99967C7.402 5.2219 7.70565 5.51877 7.92336 5.8903C8.14106 6.26183 8.24992 6.6594 8.24992 7.08301V8.33301H8.70825C8.83811 8.33301 8.94697 8.37294 9.03481 8.4528C9.12266 8.53266 9.16659 8.63162 9.16659 8.74968C9.16659 8.86773 9.12266 8.96669 9.03481 9.04655C8.94697 9.12641 8.83811 9.16634 8.70825 9.16634H2.29159Z", fill: "currentColor" }) }) }) });
+};
+var TransactionScreen = ({
+  progress,
+  iconType,
+  iconGradient,
+  title,
+  description,
+  onClose,
+  onBack,
+  backTitle = "",
+  actions,
+  children,
+  testId
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(BackgroundContainer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-full", children: [
+    onBack && /* @__PURE__ */ jsxRuntime.jsx(DetailsHeader, { title: backTitle, onBack }),
+    onClose && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": testId, className: "flex justify-start px-md pt-md", children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { onClick: onClose }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full px-md pt-sm", children: /* @__PURE__ */ jsxRuntime.jsx(ProgressIndicator, { progress }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto px-md py-lg flex flex-col gap-lg", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-md pt-lg", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(TransactionScreenIcon, { type: iconType, gradient: iconGradient }),
+        /* @__PURE__ */ jsxRuntime.jsx(TextHeading_default, { variant: "h-large", children: title }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-text-md-mobile font-poppins text-text-secondary dark:text-text-secondary-dark text-center", style: { maxWidth: "350px" }, children: description })
+      ] }),
+      children,
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" })
+    ] }),
+    actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-md pb-md", children: actions })
+  ] }) });
+};
+var TransactionScreenInvestmentCard = ({
+  strategyName,
+  apyLabel,
+  apyValue,
+  iconSrc,
+  iconAlt,
+  amountUSD,
+  amountToken
+}) => {
+  const [hasImageError, setHasImageError] = React6__namespace.default.useState(false);
+  React6__namespace.default.useEffect(() => {
+    setHasImageError(false);
+  }, [iconSrc]);
+  const shouldShowImage = Boolean(iconSrc) && !hasImageError;
+  const fallbackLabel = (iconAlt || "?").slice(0, 1).toUpperCase();
+  return /* @__PURE__ */ jsxRuntime.jsx(SectionCard, { className: "!p-[22px]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start gap-xs", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-accent-lg-mobile font-poppins text-text-secondary dark:text-text-secondary-dark", children: strategyName }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-text-sm-mobile font-poppins text-text-secondary dark:text-text-secondary-dark", children: [
+        apyLabel,
+        " ",
+        /* @__PURE__ */ jsxRuntime.jsx(TextBody_default, { as: "span", className: "text-state-success", children: apyValue })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-sm", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-8 h-8 rounded-full bg-bg-muted dark:bg-bg-muted-dark flex items-center justify-center", children: shouldShowImage ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: iconSrc, alt: iconAlt, className: "w-6 h-6 rounded-full", onError: () => setHasImageError(true) }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold text-text-secondary dark:text-text-secondary-dark", children: fallbackLabel }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-h2-mobile font-extrabold font-poppins text-text-primary dark:text-text-primary-dark", children: amountUSD }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-text-sm-mobile font-poppins text-text-secondary dark:text-text-secondary-dark", children: amountToken })
+      ] })
+    ] })
+  ] }) });
+};
+function StepStatusIcon({ status }) {
+  switch (status) {
+    case "completed":
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-6 h-6 rounded-full bg-bg-muted dark:bg-bg-muted-dark flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(io5.IoCheckmarkOutline, { className: "w-4 h-4", style: { color: "var(--color-state-success, #2BA176)" } }) });
+    case "processing":
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-6 h-6 rounded-full bg-bg-muted dark:bg-bg-muted-dark flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(io5.IoTimeOutline, { className: "w-4 h-4", style: { color: "var(--color-state-warning, #F6A700)" } }) });
+    case "failed":
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-6 h-6 rounded-full bg-bg-muted dark:bg-bg-muted-dark flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(io5.IoAlertCircleOutline, { className: "w-4 h-4", style: { color: "var(--color-state-error, #FF4D4F)" } }) });
+  }
+}
+function StepStatusText({
+  step,
+  completedText,
+  processingText,
+  failedText,
+  viewOnExplorerText
+}) {
+  if (step.statusText) {
+    const textColorClass2 = step.status === "completed" ? "text-text-primary dark:text-text-primary-dark" : step.status === "processing" ? "text-text-secondary dark:text-text-secondary-dark" : step.status === "failed" ? "text-state-error" : "text-text-disabled dark:text-text-disabled-dark";
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-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: "text-sm text-brand-primary dark:text-brand-primary-dark underline hover:no-underline",
+        children: viewOnExplorerText
+      }
+    );
+  }
+  const defaultText = step.status === "completed" ? completedText : step.status === "processing" ? processingText : failedText;
+  const textColorClass = step.status === "completed" ? "text-text-primary dark:text-text-primary-dark" : step.status === "processing" ? "text-text-secondary dark:text-text-secondary-dark" : "text-state-error";
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-sm ${textColorClass}`, children: defaultText });
+}
+function StepDisplay({ step, completedText, processingText, failedText, viewOnExplorerText }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-4 w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-text-primary dark:text-text-primary-dark font-medium", children: step.label }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: step.value ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-text-secondary dark:text-text-secondary-dark", children: step.value }) : /* @__PURE__ */ jsxRuntime.jsx(StepStatusText, { step, completedText, processingText, failedText, viewOnExplorerText }) })
+  ] });
+}
+function TransactionProcessingDetails({
+  steps,
+  className = "bg-bg-subtle dark:bg-bg-subtle-dark lg:!bg-bg-raised",
+  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-3", 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-white my-1" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 pb-2 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-0 w-full"
+    }
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SummaryDetails,
+    {
+      title: labels.title,
+      items,
+      defaultOpen,
+      className
+    }
+  );
+}
+var TokenWithChainBadge = ({
+  tokenLogoUrl,
+  tokenAlt,
+  chainLogoUrl,
+  chainName
+}) => {
+  const fallbackText = encodeURIComponent((tokenAlt || "TOK").slice(0, 3).toUpperCase());
+  const fallbackSrc = `https://placehold.co/40x40?text=${fallbackText}`;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-10 h-10", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        src: tokenLogoUrl || fallbackSrc,
+        alt: tokenAlt || "",
+        className: "object-cover w-10 h-10 rounded-full",
+        onError: (e) => {
+          e.target.src = fallbackSrc;
+        }
+      }
+    ),
+    chainLogoUrl && /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        src: chainLogoUrl,
+        alt: chainName,
+        className: "absolute object-cover w-6 h-6 p-px bg-white border rounded-full -bottom-1 -right-1 border-bg-default",
+        onError: (e) => {
+          e.target.style.display = "none";
+        }
+      }
+    )
+  ] });
+};
+var SwapProcessingView = ({
+  fromTokenSymbol,
+  fromTokenIcon,
+  toTokenSymbol,
+  toTokenIcon,
+  formattedInputAmount,
+  formattedOutputAmount,
+  formattedInputAmountUSD,
+  formattedOutputAmountUSD,
+  progress,
+  transactionSteps,
+  onClose,
+  onGoToHistory,
+  titleText,
+  descriptionPrefix,
+  activityHistoryText,
+  processingDetailsLabels
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    TransactionScreen,
+    {
+      testId: "swap-processing-screen",
+      onClose,
+      progress,
+      iconType: "processing",
+      title: /* @__PURE__ */ jsxRuntime.jsx("span", { "data-testid": "swap-processing-title", children: titleText }),
+      description: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        descriptionPrefix,
+        " ",
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "span",
+          {
+            className: "font-semibold underline underline-offset-2 cursor-pointer text-brand-primary",
+            onClick: onGoToHistory,
+            children: [
+              activityHistoryText,
+              "."
+            ]
+          }
+        )
+      ] }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SectionCard, { className: "!p-[22px]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full relative px-md", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("img", { src: fromTokenIcon, alt: fromTokenSymbol, className: "w-8 h-8 rounded-full" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-xs", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-text-sm-mobile font-poppins text-text-secondary dark:text-text-secondary-dark", children: [
+                formattedInputAmount,
+                " ",
+                fromTokenSymbol
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-h2-mobile font-extrabold font-poppins text-text-primary dark:text-text-primary-dark", children: formattedInputAmountUSD })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-brand-secondary rounded-full p-2 shadow-md z-10", children: /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineSwapHoriz, { className: "w-5 h-5" }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("img", { src: toTokenIcon, alt: toTokenSymbol, className: "w-8 h-8 rounded-full" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-xs", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-text-sm-mobile font-poppins text-text-secondary dark:text-text-secondary-dark", children: [
+                "~",
+                formattedOutputAmount,
+                " ",
+                toTokenSymbol
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-h2-mobile font-extrabold font-poppins text-text-primary dark:text-text-primary-dark", children: formattedOutputAmountUSD })
+            ] })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          TransactionProcessingDetails,
+          {
+            steps: transactionSteps,
+            className: "bg-bg-subtle dark:bg-bg-subtle-dark lg:!bg-bg-raised dark:lg:!bg-bg-raised-dark",
+            labels: processingDetailsLabels
+          }
+        )
+      ]
+    }
+  );
+};
+var SwapCrossChainProcessingView = ({
+  fromTokenSymbol,
+  fromTokenIcon,
+  toTokenSymbol,
+  toTokenIcon,
+  originChainId,
+  destinationChainId,
+  originChainLogoUrl,
+  originChainName,
+  destinationChainLogoUrl,
+  destinationChainName,
+  formattedInputAmount,
+  formattedOutputAmount,
+  formattedInputAmountUSD,
+  formattedOutputAmountUSD,
+  progress,
+  title,
+  description,
+  transactionSteps,
+  onClose,
+  onGoToHistory,
+  viewHistoryText,
+  processingDetailsLabels
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    TransactionScreen,
+    {
+      onClose,
+      progress,
+      iconType: "processing",
+      title,
+      description: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        description,
+        " ",
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "font-semibold underline cursor-pointer underline-offset-2 text-brand-primary",
+            onClick: onGoToHistory,
+            children: viewHistoryText
+          }
+        ),
+        "."
+      ] }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SectionCard, { className: "!p-[22px]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center justify-between w-full px-md", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              TokenWithChainBadge,
+              {
+                tokenLogoUrl: fromTokenIcon,
+                tokenAlt: fromTokenSymbol,
+                chainId: originChainId,
+                chainLogoUrl: originChainLogoUrl,
+                chainName: originChainName
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-xs", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-text-sm-mobile font-poppins text-text-secondary dark:text-text-secondary-dark", children: [
+                formattedInputAmount,
+                " ",
+                fromTokenSymbol
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-h2-mobile font-extrabold font-poppins text-text-primary dark:text-text-primary-dark", children: formattedInputAmountUSD })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute z-10 p-2 -translate-x-1/2 -translate-y-1/2 rounded-full shadow-md left-1/2 top-1/2 bg-brand-secondary", children: /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineSwapHoriz, { className: "w-5 h-5" }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              TokenWithChainBadge,
+              {
+                tokenLogoUrl: toTokenIcon,
+                tokenAlt: toTokenSymbol,
+                chainId: destinationChainId,
+                chainLogoUrl: destinationChainLogoUrl,
+                chainName: destinationChainName
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-xs", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-text-sm-mobile font-poppins text-text-secondary dark:text-text-secondary-dark", children: [
+                "~",
+                formattedOutputAmount,
+                " ",
+                toTokenSymbol
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-h2-mobile font-extrabold font-poppins text-text-primary dark:text-text-primary-dark", children: formattedOutputAmountUSD })
+            ] })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          TransactionProcessingDetails,
+          {
+            steps: transactionSteps,
+            className: "bg-bg-subtle dark:bg-bg-subtle-dark lg:!bg-bg-raised dark:lg:!bg-bg-raised-dark",
+            labels: processingDetailsLabels
+          }
+        )
+      ]
+    }
+  );
+};
+var SwapSignatureWarningView = ({
+  fromTokenSymbol,
+  fromTokenIcon,
+  toTokenSymbol,
+  toTokenIcon,
+  formattedInputAmount,
+  formattedOutputAmount,
+  formattedInputAmountUSD,
+  formattedOutputAmountUSD,
+  progress,
+  errorTitle,
+  errorDescription,
+  transactionSteps,
+  onCancel,
+  onTryAgain,
+  cancelButtonText,
+  retryButtonText,
+  processingDetailsLabels
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    TransactionScreen,
+    {
+      testId: "swap-signature-warning-screen",
+      onClose: onCancel,
+      progress,
+      iconType: "warning",
+      title: /* @__PURE__ */ jsxRuntime.jsx("span", { "data-testid": "swap-signature-warning-title", children: errorTitle }),
+      description: errorDescription,
+      actions: /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-testid": "swap-signature-warning-actions", className: "flex gap-sm w-full", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SecondaryButton, { "data-testid": "swap-signature-warning-cancel", className: "flex-1", onClick: onCancel, children: cancelButtonText }),
+        /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { "data-testid": "swap-signature-warning-retry", className: "flex-1", onClick: onTryAgain, children: retryButtonText })
+      ] }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SectionCard, { className: "!p-[22px]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full relative px-md", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("img", { src: fromTokenIcon, alt: fromTokenSymbol, className: "w-8 h-8 rounded-full" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-xs", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-text-sm-mobile font-poppins text-text-secondary dark:text-text-secondary-dark", children: [
+                formattedInputAmount,
+                " ",
+                fromTokenSymbol
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-h2-mobile font-extrabold font-poppins text-text-primary dark:text-text-primary-dark", children: formattedInputAmountUSD })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-brand-secondary rounded-full p-2 shadow-md z-10", children: /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineSwapHoriz, { className: "w-5 h-5" }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("img", { src: toTokenIcon, alt: toTokenSymbol, className: "w-8 h-8 rounded-full" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-xs", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-text-sm-mobile font-poppins text-text-secondary dark:text-text-secondary-dark", children: [
+                "~",
+                formattedOutputAmount,
+                " ",
+                toTokenSymbol
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-h2-mobile font-extrabold font-poppins text-text-primary dark:text-text-primary-dark", children: formattedOutputAmountUSD })
+            ] })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          TransactionProcessingDetails,
+          {
+            steps: transactionSteps,
+            defaultOpen: true,
+            className: "bg-bg-subtle dark:bg-bg-subtle-dark lg:!bg-bg-raised dark:lg:!bg-bg-raised-dark",
+            labels: processingDetailsLabels
+          }
+        )
+      ]
+    }
+  );
+};
+var SwapSuccessView = ({
+  fromTokenSymbol,
+  fromTokenIcon,
+  toTokenSymbol,
+  toTokenIcon,
+  formattedInputAmount,
+  formattedOutputAmount,
+  formattedInputAmountUSD,
+  formattedOutputAmountUSD,
+  transactionSteps,
+  onClose,
+  onStartNewSwap,
+  onGoToWallet,
+  labels,
+  processingDetailsLabels
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    TransactionScreen,
+    {
+      testId: "swap-success-screen",
+      onClose,
+      progress: 100,
+      iconType: "success",
+      title: /* @__PURE__ */ jsxRuntime.jsx("span", { "data-testid": "swap-success-title", children: labels.title }),
+      description: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        labels.descriptionPrefix,
+        " ",
+        /* @__PURE__ */ jsxRuntime.jsxs("strong", { className: "font-semibold", children: [
+          formattedInputAmount,
+          " ",
+          fromTokenSymbol
+        ] }),
+        " ",
+        labels.descriptionMiddle,
+        " ",
+        /* @__PURE__ */ jsxRuntime.jsxs("strong", { className: "font-semibold", children: [
+          formattedOutputAmount,
+          " ",
+          toTokenSymbol
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+        labels.descriptionSuffix,
+        " ",
+        /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "font-semibold text-brand-primary cursor-pointer", onClick: onGoToWallet, children: labels.walletLinkText })
+      ] }),
+      actions: /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "swap-start-new-wrapper", className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { "data-testid": "swap-start-new-button", className: "w-full", onClick: onStartNewSwap, children: labels.startNewSwapButton }) }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SectionCard, { className: "!p-[22px]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full relative px-md", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("img", { src: fromTokenIcon, alt: fromTokenSymbol, className: "w-8 h-8 rounded-full" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-xs", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-text-sm-mobile font-poppins text-text-secondary dark:text-text-secondary-dark", children: [
+                formattedInputAmount,
+                " ",
+                fromTokenSymbol
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-h2-mobile font-extrabold font-poppins text-text-primary dark:text-text-primary-dark", children: formattedInputAmountUSD })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-brand-secondary rounded-full p-2 shadow-md z-10", children: /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineSwapHoriz, { className: "w-5 h-5" }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("img", { src: toTokenIcon, alt: toTokenSymbol, className: "w-8 h-8 rounded-full" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-xs", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-text-sm-mobile font-poppins text-text-secondary dark:text-text-secondary-dark", children: [
+                "~",
+                formattedOutputAmount,
+                " ",
+                toTokenSymbol
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-h2-mobile font-extrabold font-poppins text-text-primary dark:text-text-primary-dark", children: formattedOutputAmountUSD })
+            ] })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          TransactionProcessingDetails,
+          {
+            steps: transactionSteps,
+            defaultOpen: true,
+            className: "bg-bg-subtle dark:bg-bg-subtle-dark lg:!bg-bg-raised dark:lg:!bg-bg-raised-dark",
+            labels: processingDetailsLabels
+          }
+        )
+      ]
+    }
+  );
+};
+var SwapTransactionFailedView = ({
+  fromTokenSymbol,
+  fromTokenIcon,
+  toTokenSymbol,
+  toTokenIcon,
+  formattedInputAmount,
+  formattedOutputAmount,
+  formattedInputAmountUSD,
+  formattedOutputAmountUSD,
+  progress,
+  errorTitle,
+  errorDescription,
+  transactionSteps,
+  hasExplorerLink,
+  onBack,
+  onViewExplorer,
+  onTryAgain,
+  viewOnExplorerText,
+  retryButtonText,
+  processingDetailsLabels
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    TransactionScreen,
+    {
+      testId: "swap-failed-screen",
+      onClose: onBack,
+      progress,
+      iconType: "warning",
+      iconGradient: "linear-gradient(135deg, #EF4444 0%, #DC2626 100%)",
+      title: /* @__PURE__ */ jsxRuntime.jsx("span", { "data-testid": "swap-failed-title", children: errorTitle }),
+      description: errorDescription,
+      actions: /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-testid": "swap-failed-actions", className: "flex gap-sm w-full", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SecondaryButton, { "data-testid": "swap-failed-view-explorer", className: "flex-1", onClick: onViewExplorer, disabled: !hasExplorerLink, children: viewOnExplorerText }),
+        /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { "data-testid": "swap-failed-retry", className: "flex-1", onClick: onTryAgain, children: retryButtonText })
+      ] }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SectionCard, { className: "!p-[22px]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full relative px-md", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("img", { src: fromTokenIcon, alt: fromTokenSymbol, className: "w-8 h-8 rounded-full" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-xs", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-text-sm-mobile font-poppins text-text-secondary dark:text-text-secondary-dark", children: [
+                "~",
+                formattedInputAmount,
+                " ",
+                fromTokenSymbol
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-h2-mobile font-extrabold font-poppins text-text-primary dark:text-text-primary-dark", children: formattedInputAmountUSD })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-brand-secondary rounded-full p-2 shadow-md z-10", children: /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineSwapHoriz, { className: "w-5 h-5" }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("img", { src: toTokenIcon, alt: toTokenSymbol, className: "w-8 h-8 rounded-full" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-xs", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-text-sm-mobile font-poppins text-text-secondary dark:text-text-secondary-dark", children: [
+                "~",
+                formattedOutputAmount,
+                " ",
+                toTokenSymbol
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-h2-mobile font-extrabold font-poppins text-text-primary dark:text-text-primary-dark", children: formattedOutputAmountUSD })
+            ] })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          TransactionProcessingDetails,
+          {
+            steps: transactionSteps,
+            defaultOpen: true,
+            className: "bg-bg-subtle dark:bg-bg-subtle-dark lg:!bg-bg-raised dark:lg:!bg-bg-raised-dark",
+            labels: processingDetailsLabels
+          }
+        )
+      ]
+    }
+  );
+};
+var ChooseAnAssetSwapView = ({
+  actionSheetId,
+  isOpen,
+  currentActionSheetId,
+  onClose,
+  onSearch,
+  autoFocus,
+  displayedTokens,
+  hasMore,
+  onLoadMore,
+  findBalance,
+  isFetching,
+  onAssetClick,
+  labels,
+  formatTokenAmount,
+  formatCurrencyValue
+}) => {
+  const [searchValue, setSearchValue] = React6__namespace.default.useState("");
+  const handleSearch = (value) => {
+    setSearchValue(value);
+    onSearch(value);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center", "data-testid": `swap-token-actionsheet-wrapper-${actionSheetId}`, children: /* @__PURE__ */ jsxRuntime.jsx(
+    ActionSheet,
+    {
+      id: actionSheetId,
+      currentActionSheetId,
+      isOpen,
+      onClose,
+      position: "bottom",
+      height: "full",
+      contentClassName: "w-full max-w-[620px] mx-auto",
+      children: /* @__PURE__ */ jsxRuntime.jsxs(BackgroundContainer, { className: "flex flex-col h-full", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Navbar, { children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { testId: `swap-token-actionsheet-close-${actionSheetId}`, onClick: onClose }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col flex-1 w-full p-6 overflow-hidden", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-shrink-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(TextHeading_default, { children: labels.title }),
+            /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              SearchInput,
+              {
+                onSearch: handleSearch,
+                placeholder: labels.searchPlaceholder,
+                autoFocus,
+                inputClassName: "bg-bg-subtle dark:bg-bg-subtle-dark lg:!bg-bg-raised lg:dark:!bg-bg-raised-dark",
+                containerTestId: `swap-token-search-container-${actionSheetId}`,
+                inputTestId: `swap-token-search-input-${actionSheetId}`
+              }
+            )
+          ] }),
+          searchValue && displayedTokens.length === 0 && !isFetching ? /* @__PURE__ */ jsxRuntime.jsx(SearchEmptyState, { title: labels.searchEmptyTitle, description: labels.searchEmptyDescription }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 w-full mt-4 overflow-y-auto flex-1 min-h-0", children: [
+            isFetching && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center items-center w-full py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(TextBody_default, { variant: "text-small", className: "text-text-secondary dark:text-text-secondary-dark", children: labels.searchingText }),
+              /* @__PURE__ */ jsxRuntime.jsx(LoadingDots, {})
+            ] }) }),
+            displayedTokens.map((token, index) => {
+              const balance = findBalance(token);
+              const tokenPriceUSD = Number(balance == null ? void 0 : balance.priceUSD) || 0;
+              const formattedBalance = (balance == null ? void 0 : balance.amountUI) ? formatTokenAmount(balance.amountUI, tokenPriceUSD, 2) : "0";
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                ListItem,
+                {
+                  className: "w-full flex-shrink-0",
+                  onClick: () => onAssetClick(token),
+                  "data-testid": `swap-token-item-${token.symbol.toLowerCase()}-${token.chainId}`,
+                  "data-address": token.address,
+                  "data-chain-id": token.chainId,
+                  "data-symbol": token.symbol,
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: token.logoURI || "", alt: token.name, className: "w-10 h-10 rounded-full" }) }),
+                    /* @__PURE__ */ jsxRuntime.jsxs(ListItemContent, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(TextBody_default, { children: token.name }),
+                      /* @__PURE__ */ jsxRuntime.jsx(TextBody_default, { variant: "text-small", children: token.symbol })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs(ListItemRightSide, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(TextBody_default, { children: formattedBalance }),
+                      /* @__PURE__ */ jsxRuntime.jsx(TextBody_default, { variant: "text-small", children: formatCurrencyValue(Number(balance == null ? void 0 : balance.amountInUSD) || 0) })
+                    ] })
+                  ]
+                },
+                `token-${token.address}-${index}`
+              );
+            }),
+            hasMore && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center items-center w-full py-4 flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(TertiaryButton, { onClick: onLoadMore, children: labels.loadMoreButton }) })
+          ] })
+        ] })
+      ] })
+    }
+  ) });
+};
 
 exports.ActionButton = ActionButton;
 exports.ActionSheet = ActionSheet;
@@ -2565,8 +3400,10 @@ exports.AddressDisplay = AddressDisplay;
 exports.BackgroundContainer = BackgroundContainer;
 exports.BannerNotification = BannerNotification;
 exports.ChooseAStrategyActionsheetView = ChooseAStrategyActionsheetView;
+exports.ChooseAnAssetSwapView = ChooseAnAssetSwapView;
 exports.CloseButton = CloseButton;
 exports.CollapsibleInfoRow = CollapsibleInfoRow;
+exports.CollapsibleSection = CollapsibleSection;
 exports.ConnectWalletList = ConnectWalletList;
 exports.Currency = Currency;
 exports.DeframeComponentsProvider = DeframeComponentsProvider;
@@ -2589,12 +3426,16 @@ exports.ListItem = ListItem;
 exports.ListItemContent = ListItemContent;
 exports.ListItemLeftSide = ListItemLeftSide;
 exports.ListItemRightSide = ListItemRightSide;
+exports.LoadingDots = LoadingDots;
 exports.LowRiskBadge = LowRiskBadge;
 exports.MediumRiskBadge = MediumRiskBadge;
 exports.Navbar = Navbar;
 exports.PercentageButton = PercentageButton;
 exports.PrimaryButton = PrimaryButton;
+exports.ProgressIndicator = ProgressIndicator;
 exports.ScrollableContent = ScrollableContent;
+exports.SearchEmptyState = SearchEmptyState;
+exports.SearchInput = SearchInput;
 exports.SecondaryButton = SecondaryButton;
 exports.SectionCard = SectionCard;
 exports.Select = Select;
@@ -2602,17 +3443,25 @@ exports.SelectContent = SelectContent;
 exports.SelectItem = SelectItem;
 exports.SelectTrigger = SelectTrigger;
 exports.Skeleton = Skeleton;
+exports.StepDisplay = StepDisplay;
+exports.StepStatusIcon = StepStatusIcon;
+exports.StepStatusText = StepStatusText;
 exports.StrategyDetailsView = StrategyDetailsView;
 exports.SummaryDetails = SummaryDetails;
 exports.SummaryDetailsCryptoControlV2 = SummaryDetailsCryptoControlV2;
 exports.SwapAmountInputView = SwapAmountInputView;
+exports.SwapCrossChainProcessingView = SwapCrossChainProcessingView;
 exports.SwapNetworkSelectorView = SwapNetworkSelectorView;
 exports.SwapOutputAmountView = SwapOutputAmountView;
+exports.SwapProcessingView = SwapProcessingView;
 exports.SwapQuoteBlockchainCostsView = SwapQuoteBlockchainCostsView;
 exports.SwapQuoteErrorsView = SwapQuoteErrorsView;
 exports.SwapQuoteHeaderView = SwapQuoteHeaderView;
+exports.SwapSignatureWarningView = SwapSignatureWarningView;
 exports.SwapSlippageToleranceButtonsView = SwapSlippageToleranceButtonsView;
+exports.SwapSuccessView = SwapSuccessView;
 exports.SwapTokenSelectorView = SwapTokenSelectorView;
+exports.SwapTransactionFailedView = SwapTransactionFailedView;
 exports.Tabs = Tabs;
 exports.TabsContent = TabsContent;
 exports.TabsList = TabsList;
@@ -2623,6 +3472,11 @@ exports.TextAccent = TextAccent_default;
 exports.TextBody = TextBody_default;
 exports.TextHeading = TextHeading_default;
 exports.Title = Title;
+exports.TokenWithChainBadge = TokenWithChainBadge;
+exports.TransactionProcessingDetails = TransactionProcessingDetails;
+exports.TransactionScreen = TransactionScreen;
+exports.TransactionScreenIcon = TransactionScreenIcon;
+exports.TransactionScreenInvestmentCard = TransactionScreenInvestmentCard;
 exports.WalletItem = WalletItem;
 exports.WalletList = ConnectWalletList;
 exports.WalletListContainer = WalletListContainer;