@deframe-sdk/components 0.1.38 → 0.1.40

package/dist/index.js

@@ -8706,6 +8706,213 @@ function ChooseNetworkAndAssetViewSimple({
     );
   }
 }
+
+// src/types/history-list-item-data.ts
+function isAssetAmount(asset) {
+  return "symbol" in asset;
+}
+function isFiatAmount(asset) {
+  return "currency" in asset;
+}
+
+// src/utils/history-item-display.ts
+function getAssetSymbol(asset) {
+  if (!asset) return "\u2014";
+  if (isAssetAmount(asset)) return asset.symbol;
+  if (isFiatAmount(asset)) return asset.currency;
+  return "\u2014";
+}
+function getChainName(asset) {
+  var _a, _b;
+  if (!asset) return "";
+  if (isAssetAmount(asset)) return (_b = (_a = asset.chain) == null ? void 0 : _a.name) != null ? _b : "";
+  return "";
+}
+function historyResolveLabel(item) {
+  var _a, _b;
+  const assetIn = (_a = item.amounts) == null ? void 0 : _a.assetIn;
+  const assetOut = (_b = item.amounts) == null ? void 0 : _b.assetOut;
+  const fromSymbol = getAssetSymbol(assetIn);
+  const toSymbol = getAssetSymbol(assetOut);
+  const fromChain = getChainName(assetIn);
+  const toChain = getChainName(assetOut);
+  const labelMap = {
+    SAMECHAIN_SWAP: () => `Swap ${fromSymbol} \u2192 ${toSymbol}`,
+    CROSSCHAIN_SWAP: () => {
+      const route = fromChain && toChain ? ` (${fromChain} \u2192 ${toChain})` : "";
+      return `Swap ${fromSymbol} \u2192 ${toSymbol}${route}`;
+    },
+    TRANSFER_IN: () => `Recebimento ${toSymbol}`,
+    TRANSFER_OUT: () => `Envio ${fromSymbol}`,
+    ON_RAMP_FIAT: () => `Dep\xF3sito ${fromSymbol} \u2192 ${toSymbol}`,
+    OFF_RAMP_FIAT: () => `Saque ${fromSymbol} \u2192 ${toSymbol}`,
+    SAMECHAIN_INVESTMENT_DEPOSIT: () => `Dep\xF3sito ${fromSymbol}`,
+    SAMECHAIN_INVESTMENT_WITHDRAW: () => `Resgate ${toSymbol}`,
+    CROSSCHAIN_INVESTMENT_DEPOSIT: () => {
+      const route = fromChain && toChain ? ` (${fromChain} \u2192 ${toChain})` : "";
+      return `Dep\xF3sito ${fromSymbol}${route}`;
+    },
+    CROSSCHAIN_INVESTMENT_WITHDRAW: () => {
+      const route = fromChain && toChain ? ` (${fromChain} \u2192 ${toChain})` : "";
+      return `Resgate ${toSymbol}${route}`;
+    }
+  };
+  return labelMap[item.type]();
+}
+function historyResolveAmounts(item) {
+  var _a, _b;
+  const assetOut = (_a = item.amounts) == null ? void 0 : _a.assetOut;
+  const assetIn = (_b = item.amounts) == null ? void 0 : _b.assetIn;
+  const displayAsset = item.type === "TRANSFER_OUT" || item.type === "OFF_RAMP_FIAT" ? assetIn : assetOut;
+  if (!displayAsset) return { primary: "\u2014", secondary: "" };
+  if (isAssetAmount(displayAsset)) {
+    const primary = `${displayAsset.amountHumanized} ${displayAsset.symbol}`;
+    const secondary = displayAsset.amountInUSD ? `~$${displayAsset.amountInUSD}` : "";
+    return { primary, secondary };
+  }
+  if (isFiatAmount(displayAsset)) {
+    return { primary: `${displayAsset.amountHumanized} ${displayAsset.currency}`, secondary: "" };
+  }
+  return { primary: "\u2014", secondary: "" };
+}
+function historyFormatDate(isoDate) {
+  const d = new Date(isoDate);
+  if (isNaN(d.getTime())) return isoDate;
+  return d.toLocaleDateString("pt-BR", {
+    day: "2-digit",
+    month: "short",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit"
+  });
+}
+var SWAP_TYPES = ["SAMECHAIN_SWAP", "CROSSCHAIN_SWAP"];
+var DEPOSIT_TYPES = [
+  "TRANSFER_IN",
+  "ON_RAMP_FIAT",
+  "SAMECHAIN_INVESTMENT_DEPOSIT",
+  "CROSSCHAIN_INVESTMENT_DEPOSIT"
+];
+function historyIsSwap(type) {
+  return SWAP_TYPES.includes(type);
+}
+function historyIsDeposit(type) {
+  return DEPOSIT_TYPES.includes(type);
+}
+function historyResolveIconUrl(item) {
+  var _a, _b, _c, _d;
+  const assetOut = (_a = item.amounts) == null ? void 0 : _a.assetOut;
+  const assetIn = (_b = item.amounts) == null ? void 0 : _b.assetIn;
+  const displayAsset = item.type === "TRANSFER_OUT" || item.type === "OFF_RAMP_FIAT" ? assetIn : assetOut;
+  if (displayAsset && isAssetAmount(displayAsset)) return (_d = (_c = displayAsset.token) == null ? void 0 : _c.logoURI) != null ? _d : "";
+  return "";
+}
+function historyResolveIconAlt(item) {
+  var _a, _b;
+  const assetOut = (_a = item.amounts) == null ? void 0 : _a.assetOut;
+  const assetIn = (_b = item.amounts) == null ? void 0 : _b.assetIn;
+  const displayAsset = item.type === "TRANSFER_OUT" || item.type === "OFF_RAMP_FIAT" ? assetIn : assetOut;
+  if (displayAsset && isAssetAmount(displayAsset)) return displayAsset.symbol;
+  if (displayAsset && isFiatAmount(displayAsset)) return displayAsset.currency;
+  return "";
+}
+function historyResolveSubtitle(item) {
+  var _a, _b;
+  const assetIn = (_a = item.amounts) == null ? void 0 : _a.assetIn;
+  const assetOut = (_b = item.amounts) == null ? void 0 : _b.assetOut;
+  const fromChain = getChainName(assetIn);
+  const toChain = getChainName(assetOut);
+  if (historyIsSwap(item.type) && fromChain && toChain && fromChain !== toChain) {
+    return `${fromChain} \u2192 ${toChain}`;
+  }
+  return fromChain || toChain || "";
+}
+function historyResolveSearchableText(item) {
+  const label = historyResolveLabel(item);
+  const { primary, secondary } = historyResolveAmounts(item);
+  const date = historyFormatDate(item.createdAt);
+  const status = item.status;
+  return `${label} ${primary} ${secondary} ${date} ${status}`.toLowerCase();
+}
+var variantStyles = {
+  primary: "text-[color:var(--deframe-widget-color-text-primary)] dark:text-[color:var(--deframe-widget-color-text-primary-dark)] text-text-md",
+  secondary: "text-[color:var(--deframe-widget-color-text-secondary)] dark:text-[color:var(--deframe-widget-color-text-secondary-dark)] text-text-sm font-poppins"
+};
+var Label = ({ children, variant = "primary", className }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: tailwindMerge.twMerge(variantStyles[variant], className), children });
+};
+var SwapIconWithBadge = ({ src, alt }) => {
+  const fallbackText = encodeURIComponent((alt || "TOK").slice(0, 3).toUpperCase());
+  const fallbackSrc = `https://placehold.co/40x40?text=${fallbackText}`;
+  const resolvedSrc = src || fallbackSrc;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-shrink-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-xl bg-[var(--deframe-widget-color-bg-tertiary)] dark:bg-[var(--deframe-widget-color-bg-tertiary-dark)] flex items-center justify-center overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        src: resolvedSrc,
+        alt,
+        className: "w-full h-full object-cover",
+        onError: (e) => {
+          e.target.src = fallbackSrc;
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-[-2px] right-[-2px] w-[15px] h-[15px] rounded-full bg-[var(--deframe-widget-color-bg-secondary)] dark:bg-[var(--deframe-widget-color-bg-secondary-dark)] flex items-center justify-center border border-[color:var(--deframe-widget-color-bg-secondary)] dark:border-[color:var(--deframe-widget-color-bg-secondary-dark)]", children: /* @__PURE__ */ jsxRuntime.jsx(md.MdArrowUpward, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-primary)] dark:text-[color:var(--deframe-widget-color-text-primary-dark)]" }) })
+  ] });
+};
+var ArrowBadge = ({ isDeposit }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-[-2px] right-[-2px] w-[15px] h-[15px] rounded-full bg-[var(--deframe-widget-color-bg-secondary)] dark:bg-[var(--deframe-widget-color-bg-secondary-dark)] flex items-center justify-center border border-[color:var(--deframe-widget-color-bg-secondary)] dark:border-[color:var(--deframe-widget-color-bg-secondary-dark)]", children: isDeposit ? /* @__PURE__ */ jsxRuntime.jsx(md.MdArrowDownward, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-primary)] dark:text-[color:var(--deframe-widget-color-text-primary-dark)]" }) : /* @__PURE__ */ jsxRuntime.jsx(md.MdArrowUpward, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-primary)] dark:text-[color:var(--deframe-widget-color-text-primary-dark)]" }) });
+};
+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;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-shrink-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-xl bg-[var(--deframe-widget-color-bg-tertiary)] dark:bg-[var(--deframe-widget-color-bg-tertiary-dark)] flex items-center justify-center overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        src: resolvedSrc,
+        alt,
+        className: "w-full h-full object-cover",
+        onError: (e) => {
+          e.target.src = fallbackSrc;
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(ArrowBadge, { isDeposit })
+  ] });
+};
+var AmountDisplay = ({ amount, usdAmount }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-accent-sm-mobile whitespace-nowrap", children: amount }),
+    usdAmount ? /* @__PURE__ */ jsxRuntime.jsx(Label, { variant: "secondary", className: "whitespace-nowrap", children: usdAmount }) : null
+  ] });
+};
+var HistoryListItem = ({ item, onClick, className, statusLabel, statusTitle }) => {
+  const label = historyResolveLabel(item);
+  const subtitle = historyResolveSubtitle(item);
+  const { primary, secondary } = historyResolveAmounts(item);
+  const iconUrl = historyResolveIconUrl(item);
+  const iconAlt = historyResolveIconAlt(item);
+  const isSwap = historyIsSwap(item.type);
+  const isDeposit = historyIsDeposit(item.type);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ListItem,
+    {
+      onClick,
+      containerClassName: tailwindMerge.twMerge("!rounded-xs !border-0 !min-h-[72px]", className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: isSwap ? /* @__PURE__ */ jsxRuntime.jsx(SwapIconWithBadge, { src: iconUrl, alt: iconAlt }) : /* @__PURE__ */ jsxRuntime.jsx(TokenIconWithBadge2, { src: iconUrl, alt: iconAlt, isDeposit }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ListItemContent, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-text-lg-mobile", children: label }),
+          subtitle && /* @__PURE__ */ jsxRuntime.jsx(Label, { variant: "secondary", className: "text-[color:var(--deframe-widget-color-text-tertiary)] dark:text-[color:var(--deframe-widget-color-text-tertiary-dark)]", children: subtitle }),
+          item.status === "PENDING" && statusLabel ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-[6px]", children: /* @__PURE__ */ jsxRuntime.jsx(ProcessingBadge, { label: statusLabel, title: statusTitle, size: "compact" }) }) : null
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxRuntime.jsx(AmountDisplay, { amount: primary, usdAmount: secondary || void 0 }) })
+      ]
+    }
+  );
+};
 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" }),
@@ -8735,25 +8942,6 @@ var EmptyState = ({ title, description }) => /* @__PURE__ */ jsxRuntime.jsx("div
   ] }),
   /* @__PURE__ */ jsxRuntime.jsx("div", { className: "self-stretch text-center", children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: description }) })
 ] }) });
-var SwapItemIcon = ({ src, alt }) => {
-  const fallbackText = encodeURIComponent((alt || "TOK").slice(0, 3).toUpperCase());
-  const fallbackSrc = `https://placehold.co/40x40?text=${fallbackText}`;
-  const resolvedSrc = src || fallbackSrc;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-shrink-0", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-xl bg-[var(--deframe-widget-color-bg-tertiary)] flex items-center justify-center overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
-      "img",
-      {
-        src: resolvedSrc,
-        alt,
-        className: "w-full h-full object-cover",
-        onError: (e) => {
-          e.target.src = fallbackSrc;
-        }
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-[-2px] right-[-2px] w-[15px] h-[15px] rounded-[var(--deframe-widget-size-radius-full)] bg-[var(--deframe-widget-color-bg-secondary)] flex items-center justify-center border border-[var(--deframe-widget-color-bg-secondary)]", children: /* @__PURE__ */ jsxRuntime.jsx(md.MdArrowUpward, { className: "w-3 h-3 text-[var(--deframe-widget-color-text-primary)]" }) })
-  ] });
-};
 var SwapHistoryView = ({
   labels,
   isLoading,
@@ -8761,21 +8949,29 @@ var SwapHistoryView = ({
   onItemClick,
   pageSize = 10
 }) => {
+  var _a, _b;
   const [visibleCount, setVisibleCount] = React6__namespace.default.useState(pageSize);
   if (isLoading) {
     return /* @__PURE__ */ jsxRuntime.jsx(BackgroundContainer, { className: "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)] flex flex-col min-h-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(LoadingSkeleton, {}) });
   }
   if (items.length === 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx(BackgroundContainer, { className: "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)] flex flex-col min-h-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(EmptyState, { title: labels.emptyTitle, description: labels.emptyDescription }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(BackgroundContainer, { className: "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)] flex flex-col min-h-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+      EmptyState,
+      {
+        title: (_a = labels == null ? void 0 : labels.emptyTitle) != null ? _a : "Nenhuma transa\xE7\xE3o",
+        description: (_b = labels == null ? void 0 : labels.emptyDescription) != null ? _b : "Quando voc\xEA realizar transa\xE7\xF5es, elas aparecer\xE3o aqui."
+      }
+    ) });
   }
   const visibleItems = items.slice(0, visibleCount);
   const grouped = /* @__PURE__ */ new Map();
   for (const item of visibleItems) {
-    const group = grouped.get(item.dateKey);
+    const dateKey = item.createdAt.slice(0, 10);
+    const group = grouped.get(dateKey);
     if (group) {
       group.push(item);
     } else {
-      grouped.set(item.dateKey, [item]);
+      grouped.set(dateKey, [item]);
     }
   }
   const sortedDates = Array.from(grouped.keys()).sort((a, b) => b.localeCompare(a));
@@ -8783,32 +8979,325 @@ var SwapHistoryView = ({
   return /* @__PURE__ */ jsxRuntime.jsx(BackgroundContainer, { className: "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)] flex flex-col min-h-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "self-stretch flex flex-col gap-[16px]", children: [
     sortedDates.map((dateKey) => {
       const groupItems = grouped.get(dateKey);
+      const dateLabel = historyFormatDate(groupItems[0].createdAt);
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "self-stretch flex flex-col gap-[var(--deframe-widget-size-gap-sm)]", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { 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: groupItems[0].dateLabel }),
-        groupItems.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
-          ListItem,
+        /* @__PURE__ */ jsxRuntime.jsx("div", { 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: dateLabel }),
+        groupItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+          HistoryListItem,
           {
-            onClick: () => onItemClick(item.id),
-            containerClassName: "!rounded-[var(--deframe-widget-size-radius-xs)] !border-0 !min-h-[72px]",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsxRuntime.jsx(SwapItemIcon, { src: item.iconUrl, alt: item.iconAlt }) }),
-              /* @__PURE__ */ jsxRuntime.jsxs(ListItemContent, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "[font-size:var(--deframe-widget-font-size-md)] [line-height:var(--deframe-widget-font-leading-md)] [font-weight:var(--deframe-widget-font-weight-medium)] text-[color:var(--deframe-widget-color-text-primary)]", children: item.title }),
-                /* @__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-tertiary)]", children: item.subtitle })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs(ListItemRightSide, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] [font-weight:var(--deframe-widget-font-weight-medium)] text-[color:var(--deframe-widget-color-text-primary)] whitespace-nowrap", children: item.amountFormatted }),
-                item.amountUsd && /* @__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)] whitespace-nowrap", children: item.amountUsd })
-              ] })
-            ]
+            item,
+            onClick: onItemClick ? () => onItemClick(item.id) : void 0,
+            className: "!rounded-[var(--deframe-widget-size-radius-xs)] !border-0 !min-h-[72px]"
           },
           item.id
         ))
       ] }, dateKey);
     }),
-    hasMore && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center pt-[var(--deframe-widget-size-padding-y-sm)]", children: /* @__PURE__ */ jsxRuntime.jsx(TertiaryButton, { onClick: () => setVisibleCount((c) => c + pageSize), children: labels.loadMoreLabel }) })
+    hasMore && (labels == null ? void 0 : labels.loadMoreLabel) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center pt-[var(--deframe-widget-size-padding-y-sm)]", children: /* @__PURE__ */ jsxRuntime.jsx(TertiaryButton, { onClick: () => setVisibleCount((c) => c + pageSize), children: labels.loadMoreLabel }) })
   ] }) });
 };
+var variantConfig = {
+  SUCCESS: {
+    wrapper: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_12%,transparent)] border-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_32%,transparent)]",
+    dotClass: "bg-[var(--deframe-widget-color-brand-primary)]",
+    labelClass: "text-[color:var(--deframe-widget-color-brand-primary)]",
+    label: "Aprovado"
+  },
+  PENDING: {
+    wrapper: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-warning)_16%,transparent)] border-[color:color-mix(in_srgb,var(--deframe-widget-color-state-warning)_32%,transparent)]",
+    dotClass: "bg-[var(--deframe-widget-color-state-warning)]",
+    labelClass: "text-[color:var(--deframe-widget-color-state-warning)]",
+    label: "Pendente"
+  },
+  FAILED: {
+    wrapper: "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)]",
+    dotClass: "bg-[var(--deframe-widget-color-state-error)]",
+    labelClass: "text-[color:var(--deframe-widget-color-state-error)]",
+    label: "Falhou"
+  },
+  REFUNDED: {
+    wrapper: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-secondary)_12%,transparent)] border-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-secondary)_32%,transparent)]",
+    dotClass: "bg-[var(--deframe-widget-color-brand-secondary)]",
+    labelClass: "text-[color:var(--deframe-widget-color-brand-secondary)]",
+    label: "Reembolsado"
+  }
+};
+function StatusBadge2({ status, className }) {
+  const config = variantConfig[status];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      "data-test-id": "history-status-badge",
+      className: tailwindMerge.twMerge(
+        "inline-flex items-center gap-[5px]",
+        "py-[3px] pr-[10px] pl-[7px]",
+        "rounded-[var(--deframe-widget-size-radius-full)]",
+        "border",
+        config.wrapper,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "data-test-id": "history-status-badge-dot",
+            className: tailwindMerge.twMerge(
+              "w-[7px] h-[7px] rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0 inline-block",
+              config.dotClass
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "data-test-id": "history-status-badge-label",
+            className: tailwindMerge.twMerge(
+              "text-[11px] [font-weight:var(--deframe-widget-font-weight-medium)] font-[var(--deframe-widget-font-family)]",
+              config.labelClass
+            ),
+            children: config.label
+          }
+        )
+      ]
+    }
+  );
+}
+var HistoryListItemSimple = ({ item }) => {
+  const label = historyResolveLabel(item);
+  const { primary, secondary } = historyResolveAmounts(item);
+  const date = historyFormatDate(item.createdAt);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-test-id": "history-list-item-simple",
+      className: tailwindMerge.twMerge(
+        "w-full flex flex-col gap-[6px]",
+        "bg-[var(--deframe-widget-color-bg-secondary)]",
+        "border border-[color:var(--deframe-widget-color-border-secondary)]",
+        "rounded-[var(--deframe-widget-size-radius-sm)]",
+        "px-[var(--deframe-widget-size-padding-x-md)] py-[14px]"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-[var(--deframe-widget-size-gap-sm)]", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "data-test-id": "history-list-item-simple-date",
+              className: "text-[12px] text-[color:var(--deframe-widget-color-text-tertiary)] leading-none",
+              children: date
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(StatusBadge2, { status: item.status })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-[var(--deframe-widget-size-gap-sm)]", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "data-test-id": "history-list-item-simple-label",
+              className: tailwindMerge.twMerge(
+                "text-[18px] leading-[1.2]",
+                "[font-weight:var(--deframe-widget-font-weight-bold)]",
+                "text-[color:var(--deframe-widget-color-text-primary)]"
+              ),
+              children: label
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end gap-[2px] flex-shrink-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                "data-test-id": "history-list-item-simple-primary",
+                className: tailwindMerge.twMerge(
+                  "text-[13px] leading-[1.3]",
+                  "[font-weight:var(--deframe-widget-font-weight-semibold)]",
+                  "text-[color:var(--deframe-widget-color-text-primary)]"
+                ),
+                children: primary
+              }
+            ),
+            secondary && /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                "data-test-id": "history-list-item-simple-secondary",
+                className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)] leading-none",
+                children: secondary
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+var DashboardTransactionsPlaceholder = () => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": "dashboard-transactions-placeholder", className: "flex flex-col items-center justify-center py-16 gap-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-20 h-20 bg-[var(--deframe-widget-color-bg-muted)] rounded-full flex justify-center items-center", children: /* @__PURE__ */ jsxRuntime.jsx(pi.PiClockCountdownBold, { className: "w-10 h-10 text-[var(--deframe-widget-color-text-tertiary)]" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h3", children: "Nenhuma transa\xE7\xE3o ainda" }),
+    /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-medium", className: "text-center text-[var(--deframe-widget-color-text-secondary)]", children: "Assim que voc\xEA come\xE7ar a movimentar fundos, seu hist\xF3rico de transa\xE7\xF5es aparecer\xE1 aqui." })
+  ] });
+};
+var SwapHistoryViewSimple = ({
+  isLoading,
+  items,
+  onClose,
+  className,
+  title = "Hist\xF3rico de Swap",
+  subtitle = "Todas as transa\xE7\xF5es de swap"
+}) => {
+  const [query, setQuery] = React6.useState("");
+  const filtered = React6.useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return items;
+    return items.filter((item) => historyResolveSearchableText(item).includes(q));
+  }, [items, query]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-test-id": "swap-history-view-simple",
+      className: tailwindMerge.twMerge(
+        "bg-[var(--deframe-widget-color-bg-secondary)]",
+        "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 gap-[var(--deframe-widget-size-gap-md)] h-[calc(100vh-48px)]",
+        "font-[var(--deframe-widget-font-family)]",
+        `w-[${SWAP_SIMPLE_WIDTH}px] max-w-[calc(100%-32px)] shrink-0 box-border`,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            "data-test-id": "swap-history-view-simple-header",
+            className: "flex items-start justify-between gap-[var(--deframe-widget-size-gap-sm)]",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[4px]", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "h2",
+                  {
+                    "data-test-id": "swap-history-view-simple-title",
+                    className: tailwindMerge.twMerge(
+                      "m-0 text-[20px] leading-[1.25]",
+                      "[font-weight:var(--deframe-widget-font-weight-bold)]",
+                      "text-[color:var(--deframe-widget-color-text-primary)]"
+                    ),
+                    children: title
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    "data-test-id": "swap-history-view-simple-subtitle",
+                    className: "m-0 text-[13px] text-[color:var(--deframe-widget-color-text-secondary)] leading-[1.4]",
+                    children: subtitle
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                CloseButton_default,
+                {
+                  onClick: onClose,
+                  ariaLabel: "Fechar",
+                  className: "flex-shrink-0 mt-[-4px]"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px bg-[var(--deframe-widget-color-border-secondary)]" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            "data-test-id": "swap-history-view-simple-search",
+            className: "relative",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  "data-test-id": "swap-history-view-simple-search-input",
+                  type: "text",
+                  value: query,
+                  onChange: (e) => setQuery(e.target.value),
+                  placeholder: "Buscar por moeda, rede ou status...",
+                  "aria-label": "Buscar transa\xE7\xE3o",
+                  className: [
+                    "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-0 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(" ")
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { 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" })
+                  ]
+                }
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-test-id": "swap-history-view-simple-list",
+            className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)] flex-1 min-h-0 overflow-y-auto [&::-webkit-scrollbar]:w-[6px] [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-[color:var(--deframe-widget-color-border-secondary)] [&::-webkit-scrollbar-thumb]:rounded-full",
+            children: isLoading ? [1, 2, 3].map((i) => /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: tailwindMerge.twMerge(
+                  "flex flex-col gap-[6px]",
+                  "px-[var(--deframe-widget-size-padding-x-md)] py-[14px]",
+                  "rounded-[var(--deframe-widget-size-radius-sm)]",
+                  "border border-[color:var(--deframe-widget-color-border-secondary)]"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "100px", height: "12px", shimmer: true }),
+                    /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "80px", height: "20px", shimmer: true, className: "rounded-full" })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "160px", height: "18px", shimmer: true }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end gap-[4px]", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "96px", height: "14px", shimmer: true }),
+                      /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "72px", height: "12px", shimmer: true })
+                    ] })
+                  ] })
+                ]
+              },
+              i
+            )) : items.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(DashboardTransactionsPlaceholder, {}) : filtered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                "data-test-id": "swap-history-view-simple-no-results",
+                className: "py-[var(--deframe-widget-size-padding-y-xl)] text-center text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)]",
+                children: "Nenhuma transa\xE7\xE3o encontrada"
+              }
+            ) : filtered.map((item) => /* @__PURE__ */ jsxRuntime.jsx(HistoryListItemSimple, { item }, item.id))
+          }
+        )
+      ]
+    }
+  );
+};
 var HistorySwapDetailsView = (props) => {
   const { labels, onBack, status } = props;
   if (status === "not-found") {
@@ -8957,13 +9446,6 @@ var ChipGroup = ({
 var ApyRange = ({ children }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right justify-center text-text-highlight text-xs font-normal leading-4", children });
 };
-var variantStyles = {
-  primary: "text-[color:var(--deframe-widget-color-text-primary)] dark:text-[color:var(--deframe-widget-color-text-primary-dark)] text-text-md",
-  secondary: "text-[color:var(--deframe-widget-color-text-secondary)] dark:text-[color:var(--deframe-widget-color-text-secondary-dark)] text-text-sm font-poppins"
-};
-var Label = ({ children, variant = "primary", className }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: tailwindMerge.twMerge(variantStyles[variant], className), children });
-};
 var HistoryItemSkeleton = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full bg-[var(--deframe-widget-color-bg-subtle)] rounded-xs min-h-[72px] flex items-center justify-between px-md py-sm", children: [
   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center 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)] dark:bg-[var(--deframe-widget-color-bg-tertiary-dark)] animate-pulse flex-shrink-0" }),
@@ -10013,58 +10495,12 @@ var GroupedStrategyListViewSimple = ({
 var DateLabel = ({ children }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-text-sm-mobile font-poppins text-[color:var(--deframe-widget-color-text-secondary)] dark:text-[color:var(--deframe-widget-color-text-secondary-dark)]", children });
 };
-var ArrowBadge = ({ isDeposit }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-[-2px] right-[-2px] w-[15px] h-[15px] rounded-full bg-[var(--deframe-widget-color-bg-secondary)] dark:bg-[var(--deframe-widget-color-bg-secondary-dark)] flex items-center justify-center border border-[color:var(--deframe-widget-color-bg-secondary)] dark:border-[color:var(--deframe-widget-color-bg-secondary-dark)]", children: isDeposit ? /* @__PURE__ */ jsxRuntime.jsx(md.MdArrowDownward, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-primary)] dark:text-[color:var(--deframe-widget-color-text-primary-dark)]" }) : /* @__PURE__ */ jsxRuntime.jsx(md.MdArrowUpward, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-primary)] dark:text-[color:var(--deframe-widget-color-text-primary-dark)]" }) });
-};
-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;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-shrink-0", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-xl bg-[var(--deframe-widget-color-bg-tertiary)] dark:bg-[var(--deframe-widget-color-bg-tertiary-dark)] flex items-center justify-center overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
-      "img",
-      {
-        src: resolvedSrc,
-        alt,
-        className: "w-full h-full object-cover",
-        onError: (e) => {
-          e.target.src = fallbackSrc;
-        }
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(ArrowBadge, { isDeposit })
-  ] });
-};
-var SwapIconWithBadge = ({ src, alt }) => {
-  const fallbackText = encodeURIComponent((alt || "TOK").slice(0, 3).toUpperCase());
-  const fallbackSrc = `https://placehold.co/40x40?text=${fallbackText}`;
-  const resolvedSrc = src || fallbackSrc;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-shrink-0", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-xl bg-[var(--deframe-widget-color-bg-tertiary)] dark:bg-[var(--deframe-widget-color-bg-tertiary-dark)] flex items-center justify-center overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
-      "img",
-      {
-        src: resolvedSrc,
-        alt,
-        className: "w-full h-full object-cover",
-        onError: (e) => {
-          e.target.src = fallbackSrc;
-        }
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-[-2px] right-[-2px] w-[15px] h-[15px] rounded-full bg-[var(--deframe-widget-color-bg-secondary)] dark:bg-[var(--deframe-widget-color-bg-secondary-dark)] flex items-center justify-center border border-[color:var(--deframe-widget-color-bg-secondary)] dark:border-[color:var(--deframe-widget-color-bg-secondary-dark)]", children: /* @__PURE__ */ jsxRuntime.jsx(md.MdArrowUpward, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-primary)] dark:text-[color:var(--deframe-widget-color-text-primary-dark)]" }) })
-  ] });
-};
-var AmountDisplay = ({ amount, usdAmount }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-accent-sm-mobile whitespace-nowrap", children: amount }),
-    usdAmount ? /* @__PURE__ */ jsxRuntime.jsx(Label, { variant: "secondary", className: "whitespace-nowrap", children: usdAmount }) : null
-  ] });
-};
 var HistoryListView = ({
   groups,
   showLoadMore,
   onLoadMore,
   loadMoreLabel,
+  onItemClick,
   itemClassName
 }) => {
   if (groups.length === 0) {
@@ -10073,34 +10509,12 @@ var HistoryListView = ({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "self-stretch flex flex-col gap-[16px]", children: [
     groups.map((group) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "self-stretch flex flex-col gap-sm", children: [
       /* @__PURE__ */ jsxRuntime.jsx(DateLabel, { children: group.dateLabel }),
-      group.items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
-        ListItem,
+      group.items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+        HistoryListItem,
         {
-          onClick: () => item.onClick(),
-          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(
-              TokenIconWithBadge2,
-              {
-                src: item.iconUrl,
-                alt: item.iconAlt,
-                isDeposit: item.isDeposit
-              }
-            ) }),
-            /* @__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-[color:var(--deframe-widget-color-text-tertiary)] dark:text-[color:var(--deframe-widget-color-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 }) })
-          ]
+          item,
+          onClick: onItemClick ? () => onItemClick(item.id) : void 0,
+          className: itemClassName
         },
         item.id
       ))
@@ -11294,6 +11708,7 @@ var EarnDepositFormViewSimple = ({
   // Header / Layout
   pageTitle,
   onBack,
+  onHistoryClick,
   onSubmit,
   // Token selector
   selectedToken,
@@ -11390,21 +11805,24 @@ var EarnDepositFormViewSimple = ({
       "data-test-id": "earn-deposit-form-view-simple",
       className: panelBaseClasses,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsxs(
           "header",
           {
             "data-slot": "deposit-panel-simple-header",
             "data-test-id": "earn-deposit-form-view-simple-header",
             className: headerBaseClasses,
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              "span",
-              {
-                "data-slot": "deposit-panel-simple-title",
-                "data-test-id": "earn-deposit-form-view-simple-title",
-                className: titleBaseClasses,
-                children: pageTitle
-              }
-            )
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  "data-slot": "deposit-panel-simple-title",
+                  "data-test-id": "earn-deposit-form-view-simple-title",
+                  className: titleBaseClasses,
+                  children: pageTitle
+                }
+              ),
+              onHistoryClick && /* @__PURE__ */ jsxRuntime.jsx(HistoryButton2, { onClick: onHistoryClick })
+            ]
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -11609,6 +12027,31 @@ var EarnDepositFormViewSimple = ({
     }
   );
 };
+function HistoryButton2({ onClick }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      "data-test-id": "earn-deposit-form-simple-history-button",
+      type: "button",
+      onClick,
+      "aria-label": "Hist\xF3rico de transa\xE7\xF5es",
+      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", { 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" })
+      ] })
+    }
+  );
+}
 var EarnWithdrawFormView = ({
   // Header / Layout
   headerTitle,
@@ -11758,6 +12201,7 @@ var EarnWithdrawFormViewSimple = ({
   // Header / Layout
   pageTitle,
   onBack,
+  onHistoryClick,
   onSubmit,
   // Position card (used for inline balance row)
   positionBalanceToken,
@@ -11849,21 +12293,24 @@ var EarnWithdrawFormViewSimple = ({
       "data-test-id": "earn-withdraw-form-view-simple",
       className: panelBaseClasses,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsxs(
           "header",
           {
             "data-slot": "withdraw-panel-simple-header",
             "data-test-id": "earn-withdraw-form-view-simple-header",
             className: headerBaseClasses,
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              "span",
-              {
-                "data-slot": "withdraw-panel-simple-title",
-                "data-test-id": "earn-withdraw-form-view-simple-title",
-                className: titleBaseClasses,
-                children: pageTitle
-              }
-            )
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  "data-slot": "withdraw-panel-simple-title",
+                  "data-test-id": "earn-withdraw-form-view-simple-title",
+                  className: titleBaseClasses,
+                  children: pageTitle
+                }
+              ),
+              onHistoryClick && /* @__PURE__ */ jsxRuntime.jsx(HistoryButton3, { onClick: onHistoryClick })
+            ]
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -12058,6 +12505,31 @@ var EarnWithdrawFormViewSimple = ({
     }
   );
 };
+function HistoryButton3({ onClick }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      "data-test-id": "earn-withdraw-form-simple-history-button",
+      type: "button",
+      onClick,
+      "aria-label": "Hist\xF3rico de transa\xE7\xF5es",
+      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", { 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" })
+      ] })
+    }
+  );
+}
 var EarnDepositProcessingView = ({
   progress,
   title,
@@ -17228,13 +17700,6 @@ var OfframpFailedSimpleView = () => {
 var DashboardCard = ({ children, className }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "dashboard-card", className: tailwindMerge.twMerge("bg-[var(--deframe-widget-color-bg-subtle)] rounded", className), children });
 };
-var DashboardTransactionsPlaceholder = () => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": "dashboard-transactions-placeholder", className: "flex flex-col items-center justify-center py-16 gap-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-20 h-20 bg-[var(--deframe-widget-color-bg-muted)] rounded-full flex justify-center items-center", children: /* @__PURE__ */ jsxRuntime.jsx(pi.PiClockCountdownBold, { className: "w-10 h-10 text-[var(--deframe-widget-color-text-tertiary)]" }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h3", children: "Nenhuma transa\xE7\xE3o ainda" }),
-    /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-medium", className: "text-center text-[var(--deframe-widget-color-text-secondary)]", children: "Assim que voc\xEA come\xE7ar a movimentar fundos, seu hist\xF3rico de transa\xE7\xF5es aparecer\xE1 aqui." })
-  ] });
-};
 var DashboardBalancesBreakdown = ({
   isLoadingBalances,
   formattedTokenPositions,
@@ -17687,7 +18152,7 @@ var DUST_THRESHOLD_USD = 0.01;
 function isDustValue(amountInUSD) {
   return isNaN(amountInUSD) || amountInUSD < DUST_THRESHOLD_USD;
 }
-function HistoryButton2({ onClick }) {
+function HistoryButton4({ onClick }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
@@ -17938,7 +18403,7 @@ var DashboardTokensViewSimple = ({
                   children: "Seus ativos"
                 }
               ),
-              onHistoryClick != null && /* @__PURE__ */ jsxRuntime.jsx(HistoryButton2, { onClick: onHistoryClick })
+              onHistoryClick != null && /* @__PURE__ */ jsxRuntime.jsx(HistoryButton4, { onClick: onHistoryClick })
             ]
           }
         ),
@@ -18045,12 +18510,13 @@ var DashboardRecentTransactionsView = ({
   isLoading,
   isEmpty,
   transactions,
-  onViewAllClick
+  onViewAllClick,
+  onItemClick
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(DashboardCard, { className: "p-6 bg-[var(--deframe-widget-color-bg-subtle)]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-start", children: [
       /* @__PURE__ */ jsxRuntime.jsx(TextBody, { className: "mb-6", children: "Transa\xE7\xF5es recentes" }),
-      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: onViewAllClick, children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { className: "text-[var(--deframe-widget-color-brand-primary)] cursor-pointer hover:underline", children: "Ver todas" }) })
+      onViewAllClick && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: onViewAllClick, children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { className: "text-[var(--deframe-widget-color-brand-primary)] cursor-pointer hover:underline", children: "Ver todas" }) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2 mt-[-16px]", children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 p-2", children: [
       /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant: "circle", width: "40px", height: "40px", shimmer: true }),
@@ -18059,106 +18525,17 @@ var DashboardRecentTransactionsView = ({
         /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "220px", height: "12px", shimmer: true })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "96px", height: "14px", shimmer: true })
-    ] }, i)) }) : isEmpty ? /* @__PURE__ */ jsxRuntime.jsx(DashboardTransactionsPlaceholder, {}) : transactions.map((item) => {
-      const MainIcon = item.mainIcon;
-      const TypeIcon = item.typeIcon;
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        ListItem,
-        {
-          containerClassName: "p-2 mt-4 bg-[var(--deframe-widget-color-bg-raised)] cursor-pointer",
-          onClick: () => item.onClick(),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-10 h-10 rounded-full ${item.iconBgColor} flex items-center justify-center`, children: /* @__PURE__ */ jsxRuntime.jsx(MainIcon, { className: `${item.iconColor}`, size: 20 }) }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -bottom-1 -right-1 w-5 h-5 rounded-full flex items-center justify-center border border-[var(--deframe-widget-color-border-secondary)]", children: /* @__PURE__ */ jsxRuntime.jsx(TypeIcon, { className: `${item.iconColor}`, size: 12 }) })
-            ] }) }),
-            /* @__PURE__ */ jsxRuntime.jsxs(ListItemContent, { className: "ml-4", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: item.formattedDate }),
-              /* @__PURE__ */ jsxRuntime.jsx(TextBody, { className: "text-xs text-[var(--deframe-widget-color-text-secondary)]", children: item.label })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs(ListItemRightSide, { className: "text-right", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: item.rightPrimary }),
-              /* @__PURE__ */ jsxRuntime.jsx(TextBody, { className: "text-xs text-[var(--deframe-widget-color-text-secondary)]", children: item.rightSecondary })
-            ] })
-          ]
-        },
-        item.id
-      );
-    }) })
+    ] }, i)) }) : isEmpty ? /* @__PURE__ */ jsxRuntime.jsx(DashboardTransactionsPlaceholder, {}) : transactions.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+      HistoryListItem,
+      {
+        item,
+        onClick: onItemClick ? () => onItemClick(item.id) : void 0,
+        className: "p-2 mt-4 bg-[var(--deframe-widget-color-bg-raised)] cursor-pointer"
+      },
+      item.id
+    )) })
   ] }) });
 };
-var variantConfig = {
-  pending: {
-    wrapper: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-warning)_16%,transparent)] border-[color:color-mix(in_srgb,var(--deframe-widget-color-state-warning)_32%,transparent)]",
-    dotClass: "bg-[var(--deframe-widget-color-state-warning)]",
-    labelClass: "text-[color:var(--deframe-widget-color-state-warning)]",
-    label: "Pendente"
-  },
-  confirmed: {
-    wrapper: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_12%,transparent)] border-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_32%,transparent)]",
-    dotClass: "bg-[var(--deframe-widget-color-brand-primary)]",
-    labelClass: "text-[color:var(--deframe-widget-color-brand-primary)]",
-    label: "Confirmado"
-  },
-  approved: {
-    wrapper: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_12%,transparent)] border-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_32%,transparent)]",
-    dotClass: "bg-[var(--deframe-widget-color-brand-primary)]",
-    labelClass: "text-[color:var(--deframe-widget-color-brand-primary)]",
-    label: "Aprovada"
-  },
-  failed: {
-    wrapper: "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)]",
-    dotClass: "bg-[var(--deframe-widget-color-state-error)]",
-    labelClass: "text-[color:var(--deframe-widget-color-state-error)]",
-    label: "Falhou"
-  },
-  processing: {
-    wrapper: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-secondary)_12%,transparent)] border-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-secondary)_32%,transparent)]",
-    dotClass: "bg-[var(--deframe-widget-color-brand-secondary)]",
-    labelClass: "text-[color:var(--deframe-widget-color-brand-secondary)]",
-    label: "Processando"
-  }
-};
-function StatusBadge2({ status, label, className }) {
-  const config = variantConfig[status];
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "span",
-    {
-      "data-test-id": "status-badge",
-      className: tailwindMerge.twMerge(
-        "inline-flex items-center gap-[5px]",
-        "py-[3px] pr-[10px] pl-[7px]",
-        "rounded-[var(--deframe-widget-size-radius-full)]",
-        "border",
-        config.wrapper,
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            "data-test-id": "status-badge-dot",
-            className: tailwindMerge.twMerge(
-              "w-[7px] h-[7px] rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0 inline-block",
-              config.dotClass
-            )
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            "data-test-id": "status-badge-label",
-            className: tailwindMerge.twMerge(
-              "text-[11px] [font-weight:var(--deframe-widget-font-weight-medium)] font-[var(--deframe-widget-font-family)]",
-              config.labelClass
-            ),
-            children: label != null ? label : config.label
-          }
-        )
-      ]
-    }
-  );
-}
 var DashboardRecentTransactionsViewSimple = ({
   isLoading,
   isEmpty,
@@ -18169,9 +18546,7 @@ var DashboardRecentTransactionsViewSimple = ({
   const filtered = React6.useMemo(() => {
     const q = query.trim().toLowerCase();
     if (!q) return transactions;
-    return transactions.filter(
-      (tx) => tx.label.toLowerCase().includes(q) || tx.formattedDate.toLowerCase().includes(q) || tx.rightPrimary.toLowerCase().includes(q) || tx.rightSecondary.toLowerCase().includes(q)
-    );
+    return transactions.filter((item) => historyResolveSearchableText(item).includes(q));
   }, [transactions, query]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -18182,7 +18557,7 @@ var DashboardRecentTransactionsViewSimple = ({
         "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 gap-[var(--deframe-widget-size-gap-md)] w-full",
+        "flex flex-col gap-[var(--deframe-widget-size-gap-md)] w-full h-[calc(100vh-48px)]",
         "font-[var(--deframe-widget-font-family)]"
       ),
       children: [
@@ -18280,7 +18655,7 @@ var DashboardRecentTransactionsViewSimple = ({
           "div",
           {
             "data-test-id": "dashboard-recent-transactions-simple-list",
-            className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)]",
+            className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)] flex-1 min-h-0 overflow-y-auto [&::-webkit-scrollbar]:w-[6px] [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-[color:var(--deframe-widget-color-border-secondary)] [&::-webkit-scrollbar-thumb]:rounded-full",
             children: isLoading ? [1, 2, 3].map((i) => /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {
@@ -18312,69 +18687,7 @@ var DashboardRecentTransactionsViewSimple = ({
                 className: "py-[var(--deframe-widget-size-padding-y-xl)] text-center text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)]",
                 children: "Nenhuma transa\xE7\xE3o encontrada"
               }
-            ) : filtered.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                "data-test-id": "dashboard-recent-transactions-simple-item",
-                className: tailwindMerge.twMerge(
-                  "w-full flex flex-col gap-[6px]",
-                  "bg-[var(--deframe-widget-color-bg-secondary)]",
-                  "border border-[color:var(--deframe-widget-color-border-secondary)]",
-                  "rounded-[var(--deframe-widget-size-radius-sm)]",
-                  "px-[var(--deframe-widget-size-padding-x-md)] py-[14px]"
-                ),
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-[var(--deframe-widget-size-gap-sm)]", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "span",
-                      {
-                        "data-test-id": "dashboard-recent-transactions-simple-item-date",
-                        className: "text-[12px] text-[color:var(--deframe-widget-color-text-tertiary)] leading-none",
-                        children: item.formattedDate
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx(StatusBadge2, { status: "approved" })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-[var(--deframe-widget-size-gap-sm)]", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "span",
-                      {
-                        "data-test-id": "dashboard-recent-transactions-simple-item-label",
-                        className: tailwindMerge.twMerge(
-                          "text-[18px] leading-[1.2]",
-                          "[font-weight:var(--deframe-widget-font-weight-bold)]",
-                          "text-[color:var(--deframe-widget-color-text-primary)]"
-                        ),
-                        children: item.label
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end gap-[2px] flex-shrink-0", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "span",
-                        {
-                          "data-test-id": "dashboard-recent-transactions-simple-item-primary",
-                          className: tailwindMerge.twMerge(
-                            "text-[13px] leading-[1.3]",
-                            "[font-weight:var(--deframe-widget-font-weight-semibold)]",
-                            "text-[color:var(--deframe-widget-color-text-primary)]"
-                          ),
-                          children: item.rightPrimary
-                        }
-                      ),
-                      item.rightSecondary && /* @__PURE__ */ jsxRuntime.jsx(
-                        "span",
-                        {
-                          "data-test-id": "dashboard-recent-transactions-simple-item-secondary",
-                          className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)] leading-none",
-                          children: item.rightSecondary
-                        }
-                      )
-                    ] })
-                  ] })
-                ]
-              },
-              item.id
-            ))
+            ) : filtered.map((item) => /* @__PURE__ */ jsxRuntime.jsx(HistoryListItemSimple, { item }, item.id))
           }
         )
       ]
@@ -18592,6 +18905,8 @@ exports.FlexRow = FlexRow;
 exports.GroupedStrategyListView = GroupedStrategyListView;
 exports.HighRiskBadge = HighRiskBadge;
 exports.HistoryDepositDetailsView = HistoryDepositDetailsView;
+exports.HistoryListItem = HistoryListItem;
+exports.HistoryListItemSimple = HistoryListItemSimple;
 exports.HistoryListSkeleton = HistoryListSkeleton;
 exports.HistoryListView = HistoryListView;
 exports.HistorySwapDetailsView = HistorySwapDetailsView;
@@ -18697,6 +19012,7 @@ exports.SwapFormViewSimple = SwapFormViewSimple;
 exports.SwapFromCardView = SwapFromCardView;
 exports.SwapFromCardViewSimple = SwapFromCardViewSimple;
 exports.SwapHistoryView = SwapHistoryView;
+exports.SwapHistoryViewSimple = SwapHistoryViewSimple;
 exports.SwapProcessingView = SwapProcessingView;
 exports.SwapProcessingViewSimple = SwapProcessingViewSimple;
 exports.SwapQuoteDetailsView = SwapQuoteDetailsView;