@deframe-sdk/components 0.1.23 → 0.1.25

package/dist/index.js

@@ -8,9 +8,6 @@ var framerMotion = require('framer-motion');
 var md = require('react-icons/md');
 var io5 = require('react-icons/io5');
 var pi = require('react-icons/pi');
-var Link2 = require('next/link');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -31,7 +28,6 @@ function _interopNamespace(e) {
 }
 
 var React6__namespace = /*#__PURE__*/_interopNamespace(React6);
-var Link2__default = /*#__PURE__*/_interopDefault(Link2);
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -7443,6 +7439,45 @@ var SwapWidgetFallbackView = ({
     }
   );
 };
+var Chip = ({
+  label,
+  selected = false,
+  onClick,
+  className
+}) => {
+  const baseStyles = [
+    "h-8 px-4 rounded-sm",
+    "flex items-center justify-center gap-2",
+    "text-xs font-normal font-poppins leading-5",
+    "transition-colors duration-200 cursor-pointer"
+  ].join(" ");
+  const selectedStyles = selected ? "bg-[var(--deframe-widget-color-brand-secondary)] text-[var(--deframe-widget-color-text-inverse)]" : "bg-transparent border border-[var(--deframe-widget-color-border-default)] text-[var(--deframe-widget-color-text-secondary)] hover:bg-[var(--deframe-widget-color-bg-subtle)]";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: tailwindMerge.twMerge(baseStyles, selectedStyles, className),
+      children: label
+    }
+  );
+};
+var ChipGroup = ({
+  options,
+  selected,
+  onSelect,
+  className
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("flex flex-row flex-wrap gap-2", className), children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+    Chip,
+    {
+      label: option.label,
+      selected: selected === option.value,
+      onClick: () => onSelect(option.value)
+    },
+    option.value
+  )) });
+};
 var ApyRange = ({ children }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right justify-center text-text-highlight text-xs font-normal leading-4", children });
 };
@@ -7568,79 +7603,402 @@ var EarnBalanceCard = ({
     ] })
   ] });
 };
-var EarnInvestmentSummaryView = ({
-  overviewDescription,
-  totalInvestedLabel,
-  totalInvestedValue,
-  totalReturnLabel,
-  totalReturnValue,
-  processingBadgeLabel,
-  processingBadgeTitle,
-  className
+var GroupLabel = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-text-secondary dark:text-text-secondary-dark text-sm font-medium font-poppins py-3", children });
+var GroupedStrategyListView = ({
+  isLoading,
+  loadingLabel,
+  error,
+  errorLabel,
+  investedLabel,
+  investedItems,
+  bestPerformanceLabel,
+  bestPerformanceItems,
+  allStrategiesLabel,
+  allStrategiesItems
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: tailwindMerge.twMerge("flex flex-col gap-md p-lg bg-[var(--deframe-widget-color-bg-subtle)] rounded", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-text-secondary dark:text-text-secondary-dark", children: overviewDescription }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      WalletBalances,
-      {
-        cards: [
-          {
-            label: totalInvestedLabel,
-            value: totalInvestedValue,
-            badge: processingBadgeLabel ? /* @__PURE__ */ jsxRuntime.jsx(
-              ProcessingBadge,
+  const hasInvested = investedItems.length > 0;
+  const hasBestPerformance = bestPerformanceItems.length > 0;
+  const hasAllStrategies = allStrategiesItems.length > 0;
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center py-md", children: [
+      loadingLabel,
+      " ",
+      /* @__PURE__ */ jsxRuntime.jsx(LoadingDots, {})
+    ] });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 text-center text-red-500", children: [
+      errorLabel,
+      ": ",
+      error.message
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex flex-col gap-sm flex-1 min-h-0 overflow-y-auto", children: [
+    hasInvested && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(GroupLabel, { children: investedLabel }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-sm", children: investedItems.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+        ListItem,
+        {
+          onClick: () => item.onClick(),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
               {
-                label: processingBadgeLabel,
-                title: processingBadgeTitle
+                src: item.logoUrl,
+                alt: item.subtitle,
+                className: "w-10 h-10 rounded-full"
               }
-            ) : void 0
-          },
-          { label: totalReturnLabel, value: totalReturnValue }
-        ],
-        variant: "raised",
-        className: "grid grid-cols-2 gap-md !mt-0"
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(ListItemContent, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(TextBody, { children: item.title }),
+              /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: item.subtitle })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row justify-between items-center", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(TextBody, { children: item.balanceFormatted }),
+                /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: item.profitFormatted })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(md.MdArrowRight, { className: "w-6 h-6" })
+            ] }) })
+          ]
+        },
+        `invested-${item.id}`
+      )) })
+    ] }),
+    hasBestPerformance && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(GroupLabel, { children: bestPerformanceLabel }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-sm", children: bestPerformanceItems.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+        ListItem,
+        {
+          onClick: () => item.onClick(),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                src: item.logoUrl,
+                alt: item.subtitle,
+                className: "w-10 h-10 rounded-full"
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(ListItemContent, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(TextBody, { children: item.title }),
+              /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: item.subtitle })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row justify-between items-center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ApyRange, { children: item.apyFormatted }),
+              /* @__PURE__ */ jsxRuntime.jsx(md.MdArrowRight, { className: "w-6 h-6" })
+            ] }) })
+          ]
+        },
+        `best-${item.id}`
+      )) })
+    ] }),
+    hasAllStrategies && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(GroupLabel, { children: allStrategiesLabel }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-sm", children: allStrategiesItems.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+        ListItem,
+        {
+          onClick: () => item.onClick(),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                src: item.logoUrl,
+                alt: item.subtitle,
+                className: "w-10 h-10 rounded-full"
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(ListItemContent, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(TextBody, { children: item.title }),
+              /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: item.subtitle })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row justify-between items-center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ApyRange, { children: item.apyFormatted }),
+              /* @__PURE__ */ jsxRuntime.jsx(md.MdArrowRight, { className: "w-6 h-6" })
+            ] }) })
+          ]
+        },
+        `all-${item.id}`
+      )) })
+    ] })
+  ] });
+};
+var DateLabel = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-text-sm-mobile font-poppins text-text-secondary dark:text-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-bg-subtle dark:bg-bg-subtle-dark flex items-center justify-center border border-bg-subtle dark:border-bg-subtle-dark", children: isDeposit ? /* @__PURE__ */ jsxRuntime.jsx(md.MdArrowDownward, { className: "w-3 h-3 text-text-primary dark:text-text-primary-dark" }) : /* @__PURE__ */ jsxRuntime.jsx(md.MdArrowUpward, { className: "w-3 h-3 text-text-primary dark:text-text-primary-dark" }) });
+};
+var 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-bg-muted dark:bg-bg-muted-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 EarnInvestedSectionView = ({
-  sectionTitle,
-  items,
-  onItemClick,
-  className
+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-bg-muted dark:bg-bg-muted-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-bg-subtle dark:bg-bg-subtle-dark flex items-center justify-center border border-bg-subtle dark:border-bg-subtle-dark", children: /* @__PURE__ */ jsxRuntime.jsx(md.MdArrowUpward, { className: "w-3 h-3 text-text-primary dark:text-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,
+  itemClassName
 }) => {
-  if (items.length === 0) {
+  if (groups.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "section",
-    {
-      className: tailwindMerge.twMerge(
-        "flex flex-col gap-[var(--deframe-widget-size-gap-md)] p-[var(--deframe-widget-size-padding-x-lg)]",
-        "bg-[var(--deframe-widget-color-bg-subtle)] rounded-[var(--deframe-widget-size-radius-sm)]",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: sectionTitle }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-md)]", children: items.map((item, index) => {
-          const isLast = index === items.length - 1;
-          return /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
-            {
-              type: "button",
-              onClick: () => onItemClick == null ? void 0 : onItemClick(item.strategyId),
-              className: tailwindMerge.twMerge(
-                "flex items-center gap-[var(--deframe-widget-size-gap-md)] p-[var(--deframe-widget-size-padding-x-md)] bg-[var(--deframe-widget-color-bg-raised)] rounded-[var(--deframe-widget-size-radius-sm)]",
-                "transition-colors cursor-pointer text-left w-full",
-                !isLast && "border-b border-[var(--deframe-widget-color-border-secondary)]"
-              ),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "img",
-                  {
-                    src: item.logoUrl,
-                    alt: item.assetName,
-                    className: "w-10 h-10 rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0"
+  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,
+        {
+          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-text-tertiary dark:text-text-tertiary-dark", children: item.subtitle }),
+              item.status === "PENDING" && item.statusLabel ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-[6px]", children: /* @__PURE__ */ jsxRuntime.jsx(
+                ProcessingBadge,
+                {
+                  label: item.statusLabel,
+                  title: item.statusTitle,
+                  size: "compact"
+                }
+              ) }) : null
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxRuntime.jsx(AmountDisplay, { amount: item.amountFormatted, usdAmount: item.amountUsd }) })
+          ]
+        },
+        item.id
+      ))
+    ] }, group.dateLabel)),
+    showLoadMore && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center pt-sm", children: /* @__PURE__ */ jsxRuntime.jsx(TertiaryButton, { onClick: onLoadMore, children: loadMoreLabel }) })
+  ] });
+};
+var OverviewEarnWidgetTabSkeleton = () => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex flex-col gap-md", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "100%", height: "40px", variant: "rect" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-sm", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "100%", height: "144px", variant: "rect" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "100%", height: "144px", variant: "rect" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "128px", height: "20px", variant: "text", className: "mb-sm" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "100%", height: "80px", variant: "rect" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "96px", height: "20px", variant: "text", className: "mb-sm" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-sm", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "100%", height: "64px", variant: "rect" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "100%", height: "64px", variant: "rect" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "100%", height: "64px", variant: "rect" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "100%", height: "64px", variant: "rect" })
+      ] })
+    ] })
+  ] });
+};
+var EarnOverviewView = ({
+  selectedTab,
+  onTabChange,
+  labels,
+  overview,
+  explore,
+  history
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(BackgroundContainer, { className: "flex flex-col flex-1 min-h-0 px-0", children: /* @__PURE__ */ jsxRuntime.jsxs(Tabs, { value: selectedTab, onValueChange: onTabChange, variant: "default", className: "flex flex-col flex-1 min-h-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(TabsList, { className: "justify-between w-full", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { value: "overview", className: "flex-1", children: labels.tabs.overview }),
+      /* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { value: "explore", className: "flex-1", children: labels.tabs.explore }),
+      /* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { value: "history", className: "flex-1", children: labels.tabs.history })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col flex-1 w-full min-h-0 px-md pt-md", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "overview", className: "flex flex-col flex-1 min-h-0", children: overview.isLoading ? /* @__PURE__ */ jsxRuntime.jsx(OverviewEarnWidgetTabSkeleton, {}) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(WalletBalances, { cards: overview.walletBalances }),
+        /* @__PURE__ */ jsxRuntime.jsx(GroupedStrategyListView, __spreadValues({}, overview.groupedStrategies))
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(TabsContent, { value: "explore", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 w-full mb-4 h-12", children: /* @__PURE__ */ jsxRuntime.jsx(
+          SearchInput,
+          {
+            value: explore.searchValue,
+            onChange: (value) => explore.onSearchChange(value),
+            placeholder: explore.searchPlaceholder
+          }
+        ) }),
+        explore.isLoading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
+          explore.loadingLabel,
+          /* @__PURE__ */ jsxRuntime.jsx(LoadingDots, {})
+        ] }) : explore.error ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 text-center text-red-500", children: [
+          explore.errorLabel,
+          ": ",
+          explore.error.message
+        ] }) : explore.hasFilters && explore.strategies.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full py-md bg-bg-default dark:bg-bg-default-dark rounded-lg flex flex-col gap-sm flex-shrink-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ChipGroup,
+            {
+              options: explore.chipOptions,
+              selected: explore.selectedCategory,
+              onSelect: (value) => explore.onCategorySelect(value)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(SearchEmptyState, { title: explore.emptySearchTitle, description: explore.emptySearchDescription })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full py-md bg-bg-default dark:bg-bg-default-dark rounded-lg flex flex-col gap-sm flex-shrink-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ChipGroup,
+            {
+              options: explore.chipOptions,
+              selected: explore.selectedCategory,
+              onSelect: (value) => explore.onCategorySelect(value)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h5", children: explore.bestPerformanceLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-sm", children: explore.strategies.map((s) => /* @__PURE__ */ jsxRuntime.jsxs(ListItem, { onClick: () => s.onClick(), children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: s.logoUrl, alt: s.subtitle, className: "w-10 h-10 rounded-full" }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(ListItemContent, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(TextBody, { children: s.title }),
+              /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: s.subtitle })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { children: s.apyFormatted }) })
+          ] }, s.id)) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "history", children: history.isLoading ? /* @__PURE__ */ jsxRuntime.jsx(HistoryListSkeleton, {}) : history.isEmpty ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-[90vh] py-md bg-bg-default dark:bg-bg-default-dark rounded-lg flex flex-col justify-center items-center gap-sm overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex flex-col justify-center items-center gap-md", children: [
+        /* @__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(pi.PiClockCountdownBold, { className: "w-10 h-10 text-text-tertiary dark:text-text-tertiary-dark" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h3", children: history.emptyTitle })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "self-stretch text-center", children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: history.emptyDescription }) })
+      ] }) }) : /* @__PURE__ */ jsxRuntime.jsx(
+        HistoryListView,
+        {
+          groups: history.groups,
+          showLoadMore: history.showLoadMore,
+          onLoadMore: () => history.onLoadMore(),
+          loadMoreLabel: history.loadMoreLabel
+        }
+      ) })
+    ] })
+  ] }) });
+};
+var EarnInvestmentSummaryView = ({
+  overviewDescription,
+  totalInvestedLabel,
+  totalInvestedValue,
+  totalReturnLabel,
+  totalReturnValue,
+  processingBadgeLabel,
+  processingBadgeTitle,
+  className
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: tailwindMerge.twMerge("flex flex-col gap-md p-lg bg-[var(--deframe-widget-color-bg-subtle)] rounded", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-text-secondary dark:text-text-secondary-dark", children: overviewDescription }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      WalletBalances,
+      {
+        cards: [
+          {
+            label: totalInvestedLabel,
+            value: totalInvestedValue,
+            badge: processingBadgeLabel ? /* @__PURE__ */ jsxRuntime.jsx(
+              ProcessingBadge,
+              {
+                label: processingBadgeLabel,
+                title: processingBadgeTitle
+              }
+            ) : void 0
+          },
+          { label: totalReturnLabel, value: totalReturnValue }
+        ],
+        variant: "raised",
+        className: "grid grid-cols-2 gap-md !mt-0"
+      }
+    )
+  ] });
+};
+var EarnInvestedSectionView = ({
+  sectionTitle,
+  items,
+  onItemClick,
+  className
+}) => {
+  if (items.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      className: tailwindMerge.twMerge(
+        "flex flex-col gap-[var(--deframe-widget-size-gap-md)] p-[var(--deframe-widget-size-padding-x-lg)]",
+        "bg-[var(--deframe-widget-color-bg-subtle)] rounded-[var(--deframe-widget-size-radius-sm)]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: sectionTitle }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-md)]", children: items.map((item, index) => {
+          const isLast = index === items.length - 1;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => onItemClick == null ? void 0 : onItemClick(item.strategyId),
+              className: tailwindMerge.twMerge(
+                "flex items-center gap-[var(--deframe-widget-size-gap-md)] p-[var(--deframe-widget-size-padding-x-md)] bg-[var(--deframe-widget-color-bg-raised)] rounded-[var(--deframe-widget-size-radius-sm)]",
+                "transition-colors cursor-pointer text-left w-full",
+                !isLast && "border-b border-[var(--deframe-widget-color-border-secondary)]"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "img",
+                  {
+                    src: item.logoUrl,
+                    alt: item.assetName,
+                    className: "w-10 h-10 rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0"
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col flex-1 min-w-0", children: [
@@ -7894,289 +8252,71 @@ var EarnInvestmentDetailsView = (props) => {
     ] }) })
   ] });
 };
-var GroupLabel = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-text-secondary dark:text-text-secondary-dark text-sm font-medium font-poppins py-3", children });
-var GroupedStrategyListView = ({
+var EarnTokenSelectorView = ({
+  selectedToken,
+  onTokenClick,
+  onNetworkClick,
   isLoading,
-  loadingLabel,
-  error,
-  errorLabel,
-  investedLabel,
-  investedItems,
-  bestPerformanceLabel,
-  bestPerformanceItems,
-  allStrategiesLabel,
-  allStrategiesItems
+  selectTokenLabel,
+  chainLabel,
+  chainImage,
+  chainDirectionLabel,
+  chainDisabledTitle,
+  isNetworkDisabled = false,
+  currentNetworkSelected
+}) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[10px]", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-[10px] w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      onClick: onTokenClick,
+      className: "flex-1 h-[56px] border border-[var(--deframe-widget-color-border-primary)] rounded overflow-hidden hover:border-[var(--deframe-widget-color-border-primary)] transition-colors",
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full items-center justify-between px-[var(--deframe-widget-size-padding-x-sm)] py-[6px]", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] items-center", children: (selectedToken == null ? void 0 : selectedToken.logoURI) ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src: selectedToken.logoURI,
+              alt: selectedToken.symbol,
+              className: "w-6 h-6 rounded-full"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", className: "text-[color:var(--deframe-widget-color-text-primary)]", children: selectedToken.symbol })
+        ] }) : isLoading ? /* @__PURE__ */ jsxRuntime.jsx(LoadingDots, {}) : /* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: selectTokenLabel }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[18px] h-[18px] flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(hi2.HiChevronDown, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-tertiary)]" }) })
+      ] })
+    }
+  ) }),
+  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] items-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-tertiary)]", children: chainDirectionLabel }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => onNetworkClick == null ? void 0 : onNetworkClick(currentNetworkSelected),
+        disabled: isNetworkDisabled,
+        title: chainDisabledTitle,
+        className: `bg-[var(--deframe-widget-color-bg-tertiary)] border border-[var(--deframe-widget-color-border-secondary)] rounded-lg flex gap-[var(--deframe-widget-size-gap-xs)] items-center px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)] transition-colors ${isNetworkDisabled ? "opacity-60 cursor-not-allowed" : "cursor-pointer hover:border-[var(--deframe-widget-color-border-primary)]"}`,
+        children: [
+          chainImage && /* @__PURE__ */ jsxRuntime.jsx("img", { src: chainImage, alt: "", className: "w-3 h-3 rounded-full" }),
+          /* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: chainLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-[18px] h-[18px] flex items-center justify-center ${isNetworkDisabled ? "opacity-50" : ""}`, children: /* @__PURE__ */ jsxRuntime.jsx(hi2.HiChevronDown, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-tertiary)]" }) })
+        ]
+      }
+    )
+  ] })
+] });
+var EarnAmountInputView = ({
+  value,
+  onChange,
+  ariaLabel,
+  dollarAmountFormatted,
+  availableBalanceFormatted
 }) => {
-  const hasInvested = investedItems.length > 0;
-  const hasBestPerformance = bestPerformanceItems.length > 0;
-  const hasAllStrategies = allStrategiesItems.length > 0;
-  if (isLoading) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center py-md", children: [
-      loadingLabel,
-      " ",
-      /* @__PURE__ */ jsxRuntime.jsx(LoadingDots, {})
-    ] });
-  }
-  if (error) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 text-center text-red-500", children: [
-      errorLabel,
-      ": ",
-      error.message
-    ] });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex flex-col gap-sm flex-1 min-h-0 overflow-y-auto", children: [
-    hasInvested && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(GroupLabel, { children: investedLabel }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-sm", children: investedItems.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
-        ListItem,
-        {
-          onClick: () => item.onClick(),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsxRuntime.jsx(
-              "img",
-              {
-                src: item.logoUrl,
-                alt: item.subtitle,
-                className: "w-10 h-10 rounded-full"
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsxs(ListItemContent, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(TextBody, { children: item.title }),
-              /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: item.subtitle })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row justify-between items-center", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(TextBody, { children: item.balanceFormatted }),
-                /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: item.profitFormatted })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(md.MdArrowRight, { className: "w-6 h-6" })
-            ] }) })
-          ]
-        },
-        `invested-${item.id}`
-      )) })
-    ] }),
-    hasBestPerformance && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(GroupLabel, { children: bestPerformanceLabel }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-sm", children: bestPerformanceItems.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
-        ListItem,
-        {
-          onClick: () => item.onClick(),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsxRuntime.jsx(
-              "img",
-              {
-                src: item.logoUrl,
-                alt: item.subtitle,
-                className: "w-10 h-10 rounded-full"
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsxs(ListItemContent, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(TextBody, { children: item.title }),
-              /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: item.subtitle })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row justify-between items-center", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(ApyRange, { children: item.apyFormatted }),
-              /* @__PURE__ */ jsxRuntime.jsx(md.MdArrowRight, { className: "w-6 h-6" })
-            ] }) })
-          ]
-        },
-        `best-${item.id}`
-      )) })
-    ] }),
-    hasAllStrategies && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(GroupLabel, { children: allStrategiesLabel }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-sm", children: allStrategiesItems.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
-        ListItem,
-        {
-          onClick: () => item.onClick(),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsxRuntime.jsx(
-              "img",
-              {
-                src: item.logoUrl,
-                alt: item.subtitle,
-                className: "w-10 h-10 rounded-full"
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsxs(ListItemContent, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(TextBody, { children: item.title }),
-              /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: item.subtitle })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row justify-between items-center", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(ApyRange, { children: item.apyFormatted }),
-              /* @__PURE__ */ jsxRuntime.jsx(md.MdArrowRight, { className: "w-6 h-6" })
-            ] }) })
-          ]
-        },
-        `all-${item.id}`
-      )) })
-    ] })
-  ] });
-};
-var DateLabel = ({ children }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-text-sm-mobile font-poppins text-text-secondary dark:text-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-bg-subtle dark:bg-bg-subtle-dark flex items-center justify-center border border-bg-subtle dark:border-bg-subtle-dark", children: isDeposit ? /* @__PURE__ */ jsxRuntime.jsx(md.MdArrowDownward, { className: "w-3 h-3 text-text-primary dark:text-text-primary-dark" }) : /* @__PURE__ */ jsxRuntime.jsx(md.MdArrowUpward, { className: "w-3 h-3 text-text-primary dark:text-text-primary-dark" }) });
-};
-var 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-bg-muted dark:bg-bg-muted-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-bg-muted dark:bg-bg-muted-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-bg-subtle dark:bg-bg-subtle-dark flex items-center justify-center border border-bg-subtle dark:border-bg-subtle-dark", children: /* @__PURE__ */ jsxRuntime.jsx(md.MdArrowUpward, { className: "w-3 h-3 text-text-primary dark:text-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,
-  itemClassName
-}) => {
-  if (groups.length === 0) {
-    return null;
-  }
-  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,
-        {
-          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-text-tertiary dark:text-text-tertiary-dark", children: item.subtitle }),
-              item.status === "PENDING" && item.statusLabel ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-[6px]", children: /* @__PURE__ */ jsxRuntime.jsx(
-                ProcessingBadge,
-                {
-                  label: item.statusLabel,
-                  title: item.statusTitle,
-                  size: "compact"
-                }
-              ) }) : null
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxRuntime.jsx(AmountDisplay, { amount: item.amountFormatted, usdAmount: item.amountUsd }) })
-          ]
-        },
-        item.id
-      ))
-    ] }, group.dateLabel)),
-    showLoadMore && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center pt-sm", children: /* @__PURE__ */ jsxRuntime.jsx(TertiaryButton, { onClick: onLoadMore, children: loadMoreLabel }) })
-  ] });
-};
-var EarnTokenSelectorView = ({
-  selectedToken,
-  onTokenClick,
-  onNetworkClick,
-  isLoading,
-  selectTokenLabel,
-  chainLabel,
-  chainImage,
-  chainDirectionLabel,
-  chainDisabledTitle,
-  isNetworkDisabled = false,
-  currentNetworkSelected
-}) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[10px]", children: [
-  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-[10px] w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
-    "button",
-    {
-      type: "button",
-      onClick: onTokenClick,
-      className: "flex-1 h-[56px] border border-[var(--deframe-widget-color-border-primary)] rounded overflow-hidden hover:border-[var(--deframe-widget-color-border-primary)] transition-colors",
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full items-center justify-between px-[var(--deframe-widget-size-padding-x-sm)] py-[6px]", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] items-center", children: (selectedToken == null ? void 0 : selectedToken.logoURI) ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "img",
-            {
-              src: selectedToken.logoURI,
-              alt: selectedToken.symbol,
-              className: "w-6 h-6 rounded-full"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", className: "text-[color:var(--deframe-widget-color-text-primary)]", children: selectedToken.symbol })
-        ] }) : isLoading ? /* @__PURE__ */ jsxRuntime.jsx(LoadingDots, {}) : /* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: selectTokenLabel }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[18px] h-[18px] flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(hi2.HiChevronDown, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-tertiary)]" }) })
-      ] })
-    }
-  ) }),
-  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] items-center", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-tertiary)]", children: chainDirectionLabel }),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: () => onNetworkClick == null ? void 0 : onNetworkClick(currentNetworkSelected),
-        disabled: isNetworkDisabled,
-        title: chainDisabledTitle,
-        className: `bg-[var(--deframe-widget-color-bg-tertiary)] border border-[var(--deframe-widget-color-border-secondary)] rounded-lg flex gap-[var(--deframe-widget-size-gap-xs)] items-center px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)] transition-colors ${isNetworkDisabled ? "opacity-60 cursor-not-allowed" : "cursor-pointer hover:border-[var(--deframe-widget-color-border-primary)]"}`,
-        children: [
-          chainImage && /* @__PURE__ */ jsxRuntime.jsx("img", { src: chainImage, alt: "", className: "w-3 h-3 rounded-full" }),
-          /* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: chainLabel }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-[18px] h-[18px] flex items-center justify-center ${isNetworkDisabled ? "opacity-50" : ""}`, children: /* @__PURE__ */ jsxRuntime.jsx(hi2.HiChevronDown, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-tertiary)]" }) })
-        ]
-      }
-    )
-  ] })
-] });
-var EarnAmountInputView = ({
-  value,
-  onChange,
-  ariaLabel,
-  dollarAmountFormatted,
-  availableBalanceFormatted
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col items-end justify-between min-h-[86px] text-right", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end text-[color:var(--deframe-widget-color-text-secondary)]", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col items-end justify-between min-h-[86px] text-right", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end text-[color:var(--deframe-widget-color-text-secondary)]", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
         {
           placeholder: "0.00",
           type: "text",
@@ -9133,7 +9273,7 @@ var DashboardBalancesBreakdown = ({
 }) => {
   if (layout === "horizontal") {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "dashboard-balances-breakdown-horizontal", className: "hidden lg:block w-full mt-8", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full gap-4 items-stretch", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 basis-0 min-w-0 bg-[var(--deframe-widget-color-bg-secondary)] rounded p-4 flex flex-col", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 basis-0 min-w-0 bg-[var(--deframe-widget-color-bg-raised)] rounded p-4 flex flex-col", children: [
         /* @__PURE__ */ jsxRuntime.jsx(Text_default, { children: "Cripto" }),
         /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: isLoadingBalances ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-5 bg-[var(--deframe-widget-color-bg-muted)] rounded w-32 animate-pulse mt-2" }, "skeleton-crypto") : /* @__PURE__ */ jsxRuntime.jsx(
           framerMotion.motion.div,
@@ -9148,7 +9288,7 @@ var DashboardBalancesBreakdown = ({
           "crypto-value"
         ) })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 basis-0 min-w-0 bg-[var(--deframe-widget-color-bg-secondary)] rounded p-4 flex flex-col", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 basis-0 min-w-0 bg-[var(--deframe-widget-color-bg-raised)] rounded p-4 flex flex-col", children: [
         /* @__PURE__ */ jsxRuntime.jsx(Text_default, { children: "Investimentos" }),
         /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: isLoadingBalances ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-5 bg-[var(--deframe-widget-color-bg-muted)] rounded w-32 animate-pulse mt-2" }, "skeleton-earn") : /* @__PURE__ */ jsxRuntime.jsx(
           framerMotion.motion.div,
@@ -9357,7 +9497,7 @@ var DashboardStrategiesListView = ({
       children: /* @__PURE__ */ jsxRuntime.jsxs(
         ListItem,
         {
-          containerClassName: `${index > 0 ? "mt-4" : ""}`,
+          containerClassName: `bg-[var(--deframe-widget-color-bg-raised)] ${index > 0 ? "mt-4" : ""}`,
           onClick: () => onStrategyClick(strategy.id),
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -9413,15 +9553,15 @@ var DashboardPortfolioView = ({
       "value"
     ) }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex lg:hidden flex-row gap-2 sm:gap-4 mt-6 w-full", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Link2__default.default, { "data-testid": "dashboard-quick-action-deposit-mobile", href: "/dashboard/deposit", className: "flex-1 min-w-0 cursor-pointer", onClick: onDepositClick, children: /* @__PURE__ */ jsxRuntime.jsxs(PrimaryButton, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "dashboard-quick-action-deposit-mobile", className: "flex-1 min-w-0 cursor-pointer", onClick: onDepositClick, children: /* @__PURE__ */ jsxRuntime.jsxs(PrimaryButton, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineArrowUpward, { className: "w-4 h-4 shrink-0" }),
         "Depositar"
       ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Link2__default.default, { "data-testid": "dashboard-quick-action-withdraw-mobile", href: "/dashboard/withdraw", className: "flex-1 min-w-0 cursor-pointer", onClick: onWithdrawClick, children: /* @__PURE__ */ jsxRuntime.jsxs(PrimaryButton, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "dashboard-quick-action-withdraw-mobile", className: "flex-1 min-w-0 cursor-pointer", onClick: onWithdrawClick, children: /* @__PURE__ */ jsxRuntime.jsxs(PrimaryButton, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineArrowDownward, { className: "w-4 h-4 shrink-0" }),
         "Sacar"
       ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Link2__default.default, { "data-testid": "dashboard-quick-action-swap-mobile", href: "/dashboard/swap", className: "flex-1 min-w-0 cursor-pointer", onClick: onSwapClick, children: /* @__PURE__ */ jsxRuntime.jsxs(PrimaryButton, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "dashboard-quick-action-swap-mobile", className: "flex-1 min-w-0 cursor-pointer", onClick: onSwapClick, children: /* @__PURE__ */ jsxRuntime.jsxs(PrimaryButton, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineSwapHoriz, { className: "w-4 h-4 shrink-0" }),
         "Trocar"
       ] }) })
@@ -9446,18 +9586,113 @@ var DashboardPortfolioView = ({
     ) })
   ] }) });
 };
-var DashboardTokensView = ({
-  sortedRegularTokens,
-  regularTokens,
-  isLoadingBalances,
-  activeTab,
-  onTabChange,
-  strategiesContent
+var cardClasses = tailwindMerge.twMerge(
+  "w-full self-start flex flex-col gap-[var(--deframe-widget-size-gap-sm)]",
+  "bg-[var(--deframe-widget-color-bg-secondary)] border border-[color:var(--deframe-widget-color-border-secondary)]",
+  "rounded-[var(--deframe-widget-size-radius-md)]",
+  "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]"
+);
+var labelClasses = tailwindMerge.twMerge(
+  "text-[color:var(--deframe-widget-color-text-tertiary)]",
+  "text-[11px] [font-weight:var(--deframe-widget-font-weight-medium)] uppercase tracking-[0.08em]",
+  "[line-height:1.4]"
+);
+var valueLgClasses = tailwindMerge.twMerge(
+  "text-[38px] [font-weight:var(--deframe-widget-font-weight-bold)] [line-height:1.15]",
+  "text-[color:var(--deframe-widget-color-text-primary)]"
+);
+var descriptionClasses = "text-[color:var(--deframe-widget-color-text-secondary)] text-[13px] [line-height:1.45]";
+function StatCardSkeletonBlock({ showDescription, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "article",
+    {
+      "data-test-id": "stat-card-skeleton",
+      "aria-busy": "true",
+      className: tailwindMerge.twMerge(cardClasses, "self-stretch", className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant: "rect", width: 140, height: 11 }),
+        /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant: "rect", width: "60%", height: 44 }),
+        showDescription && /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant: "rect", width: "80%", height: 13 })
+      ]
+    }
+  );
+}
+var DashboardPortfolioViewSimple = ({
+  formattedTotalValue,
+  isLoading,
+  assetCount
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(DashboardTokenListView, { tokens: sortedRegularTokens, isLoading: isLoadingBalances, className: "hidden lg:block" }),
-    /* @__PURE__ */ jsxRuntime.jsx(DashboardCard, { className: "lg:hidden p-6 bg-[var(--deframe-widget-color-bg-subtle)]", children: /* @__PURE__ */ jsxRuntime.jsxs(
-      Tabs,
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "data-test-id": "dashboard-portfolio-simple",
+        className: "grid grid-cols-[1fr_auto] gap-[var(--deframe-widget-size-gap-sm)]",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(StatCardSkeletonBlock, { showDescription: true }),
+          /* @__PURE__ */ jsxRuntime.jsx(StatCardSkeletonBlock, { className: "min-w-[160px]" })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-test-id": "dashboard-portfolio-simple",
+      className: tailwindMerge.twMerge(
+        "grid gap-[var(--deframe-widget-size-gap-sm)]",
+        assetCount != null ? "grid-cols-[1fr_auto]" : "grid-cols-1"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("article", { className: tailwindMerge.twMerge(cardClasses, "self-stretch"), children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { "data-test-id": "stat-card-label", className: labelClasses, children: "Total da Carteira (USD)" }),
+          /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxRuntime.jsx(
+            framerMotion.motion.p,
+            {
+              "data-test-id": "stat-card-value",
+              initial: { opacity: 0, y: 10 },
+              animate: { opacity: 1, y: 0 },
+              exit: { opacity: 0, y: -10 },
+              transition: { duration: 0.5, ease: "easeOut" },
+              className: valueLgClasses,
+              children: formattedTotalValue
+            },
+            "value"
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { "data-test-id": "stat-card-description", className: descriptionClasses, children: "Soma do saldo por token (em USD)." })
+        ] }),
+        assetCount != null && /* @__PURE__ */ jsxRuntime.jsxs("article", { className: tailwindMerge.twMerge(cardClasses, "self-stretch min-w-[160px]"), children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { "data-test-id": "stat-card-label", className: labelClasses, children: "Ativos" }),
+          /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxRuntime.jsx(
+            framerMotion.motion.p,
+            {
+              "data-test-id": "stat-card-value",
+              initial: { opacity: 0, y: 10 },
+              animate: { opacity: 1, y: 0 },
+              exit: { opacity: 0, y: -10 },
+              transition: { duration: 0.5, ease: "easeOut" },
+              className: valueLgClasses,
+              children: assetCount
+            },
+            "count-value"
+          ) })
+        ] })
+      ]
+    }
+  );
+};
+var DashboardTokensView = ({
+  sortedRegularTokens,
+  regularTokens,
+  isLoadingBalances,
+  activeTab,
+  onTabChange,
+  strategiesContent
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DashboardTokenListView, { tokens: sortedRegularTokens, isLoading: isLoadingBalances, className: "hidden lg:block" }),
+    /* @__PURE__ */ jsxRuntime.jsx(DashboardCard, { className: "lg:hidden p-6 bg-[var(--deframe-widget-color-bg-subtle)]", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      Tabs,
       {
         value: activeTab,
         onValueChange: (value) => onTabChange(value),
@@ -9476,6 +9711,366 @@ var DashboardTokensView = ({
     ) })
   ] });
 };
+
+// src/utils/isDustValue.ts
+var DUST_THRESHOLD_USD = 0.01;
+function isDustValue(amountInUSD) {
+  return isNaN(amountInUSD) || amountInUSD < DUST_THRESHOLD_USD;
+}
+function HistoryButton2({ onClick }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": "Hist\xF3rico de transa\xE7\xF5es",
+      "data-test-id": "dashboard-home-history-button",
+      onClick,
+      className: tailwindMerge.twMerge(
+        "inline-flex items-center justify-center",
+        "w-9 h-9",
+        "rounded-[var(--deframe-widget-size-radius-sm)]",
+        "border-none bg-transparent",
+        "cursor-pointer outline-none flex-shrink-0",
+        "text-[color:var(--deframe-widget-color-text-secondary)]",
+        "hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_92%,transparent)]",
+        "transition-[background] duration-150"
+      ),
+      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 GRID_COLS = "grid grid-cols-[40px_1fr_auto] sm:grid-cols-[1fr_160px_130px] gap-x-[var(--deframe-widget-size-gap-sm)] sm:gap-x-[var(--deframe-widget-size-gap-md)]";
+function IconCircle3({ item, size = 36, className }) {
+  const [imgError, setImgError] = React6__namespace.default.useState(false);
+  if (item.iconUrl && !imgError) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        "data-test-id": "icon-circle-img",
+        src: item.iconUrl,
+        alt: item.name,
+        width: size,
+        height: size,
+        className: tailwindMerge.twMerge("rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0 object-cover", className),
+        onError: () => setImgError(true)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-test-id": "icon-circle-fallback",
+      className: tailwindMerge.twMerge(
+        "rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0 flex items-center justify-center",
+        "[font-weight:var(--deframe-widget-font-weight-bold)] text-[color:var(--deframe-widget-color-text-primary-dark)]",
+        className
+      ),
+      style: {
+        width: size,
+        height: size,
+        background: item.color,
+        fontSize: size * 0.33,
+        letterSpacing: "-0.01em"
+      },
+      children: item.name.slice(0, 2).toUpperCase()
+    }
+  );
+}
+function TokenIcon3({ token, size = 36, badge, badgeSize = 14, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-test-id": "token-icon",
+      className: tailwindMerge.twMerge("relative flex-shrink-0", className),
+      style: { width: size, height: size },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(IconCircle3, { item: token, size }),
+        badge && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-test-id": "token-icon-badge",
+            className: "absolute -bottom-0.5 -right-0.5 rounded-[var(--deframe-widget-size-radius-full)] shadow-[0_0_0_2px_var(--deframe-widget-color-bg-secondary)]",
+            children: /* @__PURE__ */ jsxRuntime.jsx(IconCircle3, { item: badge, size: badgeSize })
+          }
+        )
+      ]
+    }
+  );
+}
+var directionClasses = {
+  up: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-success)_12%,transparent)] border-[color:color-mix(in_srgb,var(--deframe-widget-color-state-success)_32%,transparent)] text-[color:var(--deframe-widget-color-state-success)]",
+  down: "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)] text-[color:var(--deframe-widget-color-state-error)]",
+  neutral: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_84%,transparent)] border-[color:var(--deframe-widget-color-border-secondary)] text-[color:var(--deframe-widget-color-text-tertiary)]"
+};
+var arrowIcons = {
+  up: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "8", height: "8", viewBox: "0 0 10 10", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 1.5L9 7H1L5 1.5Z", fill: "currentColor" }) }),
+  down: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "8", height: "8", viewBox: "0 0 10 10", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 8.5L1 3H9L5 8.5Z", fill: "currentColor" }) }),
+  neutral: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "9", height: "9", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 6H10", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) })
+};
+function AssetTrendBadge({ direction, value, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      "data-test-id": "asset-trend-badge",
+      className: tailwindMerge.twMerge(
+        "inline-flex items-center gap-[var(--deframe-widget-size-gap-xs)]",
+        "px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)]",
+        "rounded-[var(--deframe-widget-size-radius-full)] border",
+        "text-[length:var(--deframe-widget-font-size-xs)] [font-weight:var(--deframe-widget-font-weight-medium)] leading-[var(--deframe-widget-font-leading-xs)]",
+        "font-[var(--deframe-widget-font-family)]",
+        "whitespace-nowrap",
+        directionClasses[direction],
+        className
+      ),
+      children: [
+        arrowIcons[direction],
+        value
+      ]
+    }
+  );
+}
+var SKELETON_NAME_WIDTHS = [100, 88, 112, 96, 104, 80];
+var SKELETON_SYMBOL_WIDTHS = [56, 64, 52, 68, 60, 72];
+var SKELETON_BALANCE_WIDTHS = [72, 64, 80, 68, 76, 60];
+function AssetListSkeletonRow({ index }) {
+  const w = index % SKELETON_NAME_WIDTHS.length;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-test-id": "asset-list-skeleton-row",
+      className: tailwindMerge.twMerge(
+        GRID_COLS,
+        "items-center",
+        "px-[var(--deframe-widget-size-padding-x-md)] py-[11px]",
+        "border-t border-[color:var(--deframe-widget-color-border-secondary)]"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)]", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant: "circle", width: 36, height: 36 }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden sm:flex flex-col gap-[var(--deframe-widget-size-gap-xs)]", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant: "rect", width: SKELETON_NAME_WIDTHS[w], height: 14 }),
+            /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant: "rect", width: SKELETON_SYMBOL_WIDTHS[w], height: 11 })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant: "rect", width: 88, height: 24, className: "rounded-[var(--deframe-widget-size-radius-full)]" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end gap-[var(--deframe-widget-size-gap-xs)]", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant: "rect", width: SKELETON_BALANCE_WIDTHS[w], height: 14 }),
+          /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant: "rect", width: SKELETON_BALANCE_WIDTHS[w] - 12, height: 11 })
+        ] })
+      ]
+    }
+  );
+}
+function AssetListSkeletonContent() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: tailwindMerge.twMerge(
+          "flex items-center justify-between",
+          "px-[var(--deframe-widget-size-padding-x-md)] pt-[var(--deframe-widget-size-padding-y-md)] pb-[var(--deframe-widget-size-padding-y-sm)]"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant: "rect", width: 108, height: 18 }),
+          /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant: "rect", width: 36, height: 36, className: "rounded-[var(--deframe-widget-size-radius-sm)]" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)] px-[var(--deframe-widget-size-padding-x-md)] pb-[var(--deframe-widget-size-padding-y-sm)]", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant: "rect", width: 60, height: 26, className: "rounded-[var(--deframe-widget-size-radius-full)]" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant: "rect", width: 104, height: 26, className: "rounded-[var(--deframe-widget-size-radius-full)]" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant: "rect", width: 64, height: 26, className: "rounded-[var(--deframe-widget-size-radius-full)]" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: tailwindMerge.twMerge(
+          GRID_COLS,
+          "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-sm)]",
+          "border-t border-[color:var(--deframe-widget-color-border-secondary)]"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant: "rect", width: 40, height: 10, className: "hidden sm:block" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant: "rect", width: 72, height: 10, className: "hidden sm:block mx-auto" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant: "rect", width: 40, height: 10, className: "hidden sm:block ml-auto" })
+        ]
+      }
+    ),
+    Array.from({ length: 6 }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx(AssetListSkeletonRow, { index: i }, i))
+  ] });
+}
+var DashboardTokensViewSimple = ({
+  sortedRegularTokens,
+  isLoadingBalances,
+  filters,
+  selectedFilter,
+  onFilterSelect,
+  onHistoryClick
+}) => {
+  if (isLoadingBalances) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-test-id": "asset-list-skeleton",
+        "aria-busy": "true",
+        "aria-label": "Carregando ativos\u2026",
+        className: tailwindMerge.twMerge(
+          "w-full self-start flex flex-col",
+          "bg-[var(--deframe-widget-color-bg-secondary)] border border-[color:var(--deframe-widget-color-border-secondary)]",
+          "rounded-[var(--deframe-widget-size-radius-md)]",
+          "overflow-hidden"
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx(AssetListSkeletonContent, {})
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-test-id": "asset-list",
+      className: tailwindMerge.twMerge(
+        "w-full self-start flex flex-col",
+        "bg-[var(--deframe-widget-color-bg-secondary)] border border-[color:var(--deframe-widget-color-border-secondary)]",
+        "rounded-[var(--deframe-widget-size-radius-md)]",
+        "overflow-hidden"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            "data-test-id": "asset-list-header",
+            className: tailwindMerge.twMerge(
+              "flex items-center justify-between",
+              "px-[var(--deframe-widget-size-padding-x-md)] pt-[var(--deframe-widget-size-padding-y-md)] pb-[var(--deframe-widget-size-padding-y-sm)]"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "h3",
+                {
+                  className: "text-[color:var(--deframe-widget-color-text-primary)] text-[length:var(--deframe-widget-font-size-md)] [font-weight:var(--deframe-widget-font-weight-semibold)] font-[var(--deframe-widget-font-family)] leading-[var(--deframe-widget-font-leading-md)]",
+                  children: "Seus ativos"
+                }
+              ),
+              onHistoryClick != null && /* @__PURE__ */ jsxRuntime.jsx(HistoryButton2, { onClick: onHistoryClick })
+            ]
+          }
+        ),
+        filters && filters.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-test-id": "asset-list-filter",
+            className: tailwindMerge.twMerge(
+              "flex items-center gap-[var(--deframe-widget-size-gap-sm)]",
+              "px-[var(--deframe-widget-size-padding-x-md)] pb-[var(--deframe-widget-size-padding-y-sm)]",
+              "overflow-x-auto [scrollbar-width:none]"
+            ),
+            children: filters.map((filter) => {
+              const isSelected = filter.id === selectedFilter;
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  "data-test-id": "asset-list-filter-pill",
+                  onClick: () => onFilterSelect == null ? void 0 : onFilterSelect(filter.id),
+                  className: tailwindMerge.twMerge(
+                    "inline-flex items-center",
+                    "px-[var(--deframe-widget-size-padding-x-sm)] py-[5px]",
+                    "rounded-[var(--deframe-widget-size-radius-full)] border",
+                    "text-[length:var(--deframe-widget-font-size-xs)] [font-weight:var(--deframe-widget-font-weight-medium)] leading-[var(--deframe-widget-font-leading-xs)]",
+                    "font-[var(--deframe-widget-font-family)]",
+                    "cursor-pointer whitespace-nowrap flex-shrink-0",
+                    "outline-none transition-all duration-150",
+                    isSelected ? "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)] text-[color:var(--deframe-widget-color-brand-primary)]" : "bg-transparent border-[color:var(--deframe-widget-color-border-secondary)] text-[color:var(--deframe-widget-color-text-secondary)] hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_60%,transparent)]"
+                  ),
+                  children: filter.label
+                },
+                filter.id
+              );
+            })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            "data-test-id": "asset-list-columns",
+            className: tailwindMerge.twMerge(
+              GRID_COLS,
+              "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-sm)]",
+              "border-t border-[color:var(--deframe-widget-color-border-secondary)]"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-xs)] [font-weight:var(--deframe-widget-font-weight-medium)] uppercase tracking-[0.08em] text-[color:var(--deframe-widget-color-text-tertiary)] leading-[var(--deframe-widget-font-leading-xs)]", children: "ATIVO" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-xs)] [font-weight:var(--deframe-widget-font-weight-medium)] uppercase tracking-[0.08em] text-[color:var(--deframe-widget-color-text-tertiary)] leading-[var(--deframe-widget-font-leading-xs)] text-center", children: "TEND\xCANCIA" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-xs)] [font-weight:var(--deframe-widget-font-weight-medium)] uppercase tracking-[0.08em] text-[color:var(--deframe-widget-color-text-tertiary)] leading-[var(--deframe-widget-font-leading-xs)] text-right", children: "SALDO" })
+            ]
+          }
+        ),
+        sortedRegularTokens.filter((t) => !isDustValue(t.amountInUSD)).map((item) => {
+          var _a, _b;
+          const m = item.metadata;
+          const color = (_a = m == null ? void 0 : m.color) != null ? _a : "#888";
+          const trendDirection = m == null ? void 0 : m.trendDirection;
+          const trendValue = m == null ? void 0 : m.trendValue;
+          const networkColor = (_b = m == null ? void 0 : m.networkColor) != null ? _b : "var(--deframe-widget-color-bg-tertiary)";
+          const networkBadge = item.networkName ? { name: item.networkName, color: networkColor, iconUrl: item.networkLogoUrl } : void 0;
+          const handleItemClick = item.onClick;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              "data-test-id": "asset-list-item",
+              onClick: handleItemClick,
+              className: tailwindMerge.twMerge(
+                GRID_COLS,
+                "items-center",
+                "px-[var(--deframe-widget-size-padding-x-md)] py-[11px]",
+                "border-t border-[color:var(--deframe-widget-color-border-secondary)]",
+                "transition-colors duration-150",
+                "hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_60%,transparent)]",
+                handleItemClick && "cursor-pointer"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)] min-w-0", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(TokenIcon3, { token: { name: item.name, color, iconUrl: item.logoUrl }, size: 36, badge: networkBadge, badgeSize: 14 }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col min-w-0", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)] leading-[var(--deframe-widget-font-leading-sm)] font-[var(--deframe-widget-font-family)] truncate", children: item.name }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-xs)] text-[color:var(--deframe-widget-color-text-secondary)] leading-[var(--deframe-widget-font-leading-xs)]", children: item.symbol })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center", children: trendDirection && trendValue ? /* @__PURE__ */ jsxRuntime.jsx(AssetTrendBadge, { direction: trendDirection, value: trendValue }) : null }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end text-right", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)] leading-[var(--deframe-widget-font-leading-sm)] font-[var(--deframe-widget-font-family)]", children: item.formattedFiatValue }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[length:var(--deframe-widget-font-size-xs)] text-[color:var(--deframe-widget-color-text-secondary)] leading-[var(--deframe-widget-font-leading-xs)]", children: [
+                    item.formattedAmount,
+                    " ",
+                    item.symbol
+                  ] })
+                ] })
+              ]
+            },
+            item.id
+          );
+        })
+      ]
+    }
+  );
+};
 var DashboardRecentTransactionsView = ({
   isLoading,
   isEmpty,
@@ -9485,7 +10080,7 @@ var DashboardRecentTransactionsView = ({
   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(Link2__default.default, { href: "/dashboard/history", 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("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 }),
@@ -9500,12 +10095,12 @@ var DashboardRecentTransactionsView = ({
       return /* @__PURE__ */ jsxRuntime.jsxs(
         ListItem,
         {
-          containerClassName: "p-2 mt-4 bg-[var(--deframe-widget-color-bg-secondary)] cursor-pointer",
+          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 bg-[var(--deframe-widget-color-bg-secondary)] 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.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 }),
@@ -9522,6 +10117,300 @@ var DashboardRecentTransactionsView = ({
     }) })
   ] }) });
 };
+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,
+  transactions,
+  onClose
+}) => {
+  const [query, setQuery] = React6.useState("");
+  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)
+    );
+  }, [transactions, query]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-test-id": "dashboard-recent-transactions-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)] w-full",
+        "font-[var(--deframe-widget-font-family)]"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            "data-test-id": "dashboard-recent-transactions-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": "dashboard-recent-transactions-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: "Hist\xF3rico"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    "data-test-id": "dashboard-recent-transactions-simple-subtitle",
+                    className: "m-0 text-[13px] text-[color:var(--deframe-widget-color-text-secondary)] leading-[1.4]",
+                    children: "\xDAltimas transa\xE7\xF5es executadas"
+                  }
+                )
+              ] }),
+              onClose && /* @__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": "dashboard-recent-transactions-simple-search",
+            className: "relative",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  "data-test-id": "dashboard-recent-transactions-simple-search-input",
+                  type: "text",
+                  value: query,
+                  onChange: (e) => setQuery(e.target.value),
+                  placeholder: "Buscar por status, moeda, rede ou tx...",
+                  "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": "dashboard-recent-transactions-simple-list",
+            className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)]",
+            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
+            )) : isEmpty ? /* @__PURE__ */ jsxRuntime.jsx(DashboardTransactionsPlaceholder, {}) : filtered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                "data-test-id": "dashboard-recent-transactions-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.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
+            ))
+          }
+        )
+      ]
+    }
+  );
+};
 var DashboardInvestmentOpportunitiesView = ({
   isLoadingBalances,
   formattedTotalProfit,
@@ -9530,12 +10419,12 @@ var DashboardInvestmentOpportunitiesView = ({
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(DashboardCard, { className: "hidden lg:block p-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-large", children: "Oportunidades de investimento" }),
-    /* @__PURE__ */ jsxRuntime.jsxs(DashboardCard, { className: "bg-[var(--deframe-widget-color-bg-secondary)] flex flex-col space-y-2 p-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(DashboardCard, { className: "bg-[var(--deframe-widget-color-bg-raised)] flex flex-col space-y-2 p-4", children: [
       /* @__PURE__ */ jsxRuntime.jsx(TextBody, { children: "Rendimentos" }),
       isLoadingBalances ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-baseline gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "80px", height: "24px", shimmer: true }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-baseline gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-large", children: formattedTotalProfit }) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col", children: strategiesContent }),
-    /* @__PURE__ */ jsxRuntime.jsx(Link2__default.default, { href: "/dashboard/earn", className: "w-full", onClick: onViewAllStrategiesClick, children: /* @__PURE__ */ jsxRuntime.jsx(SecondaryButton, { children: "Ver todas as estrat\xE9gias" }) })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", onClick: onViewAllStrategiesClick, children: /* @__PURE__ */ jsxRuntime.jsx(SecondaryButton, { children: "Ver todas as estrat\xE9gias" }) })
   ] }) });
 };
 var DashboardView = ({
@@ -9552,15 +10441,15 @@ var DashboardView = ({
       /* @__PURE__ */ jsxRuntime.jsx(DashboardCard, { "data-testid": "dashboard-quick-actions-card", className: "hidden lg:block p-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-3", children: [
         /* @__PURE__ */ jsxRuntime.jsx(TextBody, { className: "mb-6", children: "A\xE7\xF5es r\xE1pidas" }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row gap-4 w-full", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Link2__default.default, { "data-testid": "dashboard-quick-action-deposit", href: "/dashboard/deposit", className: "flex-1 min-w-0 cursor-pointer", onClick: () => quickActions.onDepositClick(), children: /* @__PURE__ */ jsxRuntime.jsxs(PrimaryButton, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "dashboard-quick-action-deposit", className: "flex-1 min-w-0 cursor-pointer", onClick: () => quickActions == null ? void 0 : quickActions.onDepositClick(), children: /* @__PURE__ */ jsxRuntime.jsxs(PrimaryButton, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineArrowUpward, { className: "w-4 h-4 shrink-0" }),
             "Depositar"
           ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(Link2__default.default, { "data-testid": "dashboard-quick-action-withdraw", href: "/dashboard/withdraw", className: "flex-1 min-w-0 cursor-pointer", onClick: () => quickActions.onWithdrawClick(), children: /* @__PURE__ */ jsxRuntime.jsxs(PrimaryButton, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "dashboard-quick-action-withdraw", className: "flex-1 min-w-0 cursor-pointer", onClick: () => quickActions == null ? void 0 : quickActions.onWithdrawClick(), children: /* @__PURE__ */ jsxRuntime.jsxs(PrimaryButton, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineArrowDownward, { className: "w-4 h-4 shrink-0" }),
             "Sacar"
           ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(Link2__default.default, { "data-testid": "dashboard-quick-action-swap", href: "/dashboard/swap", className: "flex-1 min-w-0 cursor-pointer", onClick: () => quickActions.onSwapClick(), children: /* @__PURE__ */ jsxRuntime.jsxs(PrimaryButton, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "dashboard-quick-action-swap", className: "flex-1 min-w-0 cursor-pointer", onClick: () => quickActions == null ? void 0 : quickActions.onSwapClick(), children: /* @__PURE__ */ jsxRuntime.jsxs(PrimaryButton, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineSwapHoriz, { className: "w-4 h-4 shrink-0" }),
             "Trocar"
           ] }) })
@@ -9569,17 +10458,87 @@ var DashboardView = ({
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full bg-[#002608] rounded shadow-[0px_1px_3px_0px_rgba(0,0,0,0.1)] flex items-center justify-between cursor-pointer", children: /* @__PURE__ */ jsxRuntime.jsx(
         "img",
         {
-          src: banner.imageUrl,
-          alt: banner.altText,
+          src: banner == null ? void 0 : banner.imageUrl,
+          alt: banner == null ? void 0 : banner.altText,
           className: "w-full h-[90%] object-cover rounded"
         }
       ) }),
       /* @__PURE__ */ jsxRuntime.jsx(DashboardTokensView, __spreadValues({}, tokens)),
-      /* @__PURE__ */ jsxRuntime.jsx(DashboardRecentTransactionsView, __spreadValues({}, recentTransactions))
+      recentTransactions && /* @__PURE__ */ jsxRuntime.jsx(DashboardRecentTransactionsView, __spreadValues({}, recentTransactions))
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:col-span-1 space-y-6", children: /* @__PURE__ */ jsxRuntime.jsx(DashboardInvestmentOpportunitiesView, __spreadValues({}, investmentOpportunities)) })
+    investmentOpportunities && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:col-span-1 space-y-6", children: /* @__PURE__ */ jsxRuntime.jsx(DashboardInvestmentOpportunitiesView, __spreadValues({}, investmentOpportunities)) })
   ] }) });
 };
+var DashboardViewSimple = ({
+  portfolio,
+  tokens,
+  quickActions
+}) => {
+  const assetCount = tokens.sortedRegularTokens.filter((t) => !isDustValue(t.amountInUSD)).length;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-test-id": "dashboard-page-simple",
+      className: "w-full flex flex-col gap-[var(--deframe-widget-size-gap-md)]",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            "data-test-id": "dashboard-home-header",
+            className: "flex items-center justify-between gap-[var(--deframe-widget-size-gap-md)]",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-xs)]", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "h1",
+                  {
+                    "data-test-id": "dashboard-home-title",
+                    className: "text-[color:var(--deframe-widget-color-text-primary)] text-[length:var(--deframe-widget-font-size-xxl)] [font-weight:var(--deframe-widget-font-weight-bold)] leading-[var(--deframe-widget-font-leading-xxl)] font-[var(--deframe-widget-font-family)]",
+                    children: "Wallet"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    "data-test-id": "dashboard-home-subtitle",
+                    className: "text-[color:var(--deframe-widget-color-text-secondary)] text-[length:var(--deframe-widget-font-size-sm)] leading-[var(--deframe-widget-font-leading-sm)] font-[var(--deframe-widget-font-family)]",
+                    children: "Resumo da sua carteira e movimenta\xE7\xF5es."
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  "data-test-id": "dashboard-home-actions",
+                  className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)] flex-shrink-0",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      PrimaryButton,
+                      {
+                        className: "w-auto py-[var(--deframe-widget-size-padding-y-sm)] [font-weight:var(--deframe-widget-font-weight-medium)]",
+                        onClick: () => quickActions == null ? void 0 : quickActions.onDepositClick(),
+                        children: "Depositar"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      SecondaryButton,
+                      {
+                        className: "w-auto py-[var(--deframe-widget-size-padding-y-sm)] [font-weight:var(--deframe-widget-font-weight-medium)]",
+                        onClick: () => quickActions == null ? void 0 : quickActions.onWithdrawClick(),
+                        children: "Sacar"
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(DashboardPortfolioViewSimple, __spreadProps(__spreadValues({}, portfolio), { assetCount })),
+        /* @__PURE__ */ jsxRuntime.jsx(DashboardTokensViewSimple, __spreadValues({}, tokens))
+      ]
+    }
+  );
+};
 
 exports.ActionButton = ActionButton;
 exports.ActionSheet = ActionSheet;
@@ -9588,6 +10547,8 @@ exports.ApyRange = ApyRange;
 exports.BackButton = BackButton;
 exports.BackgroundContainer = BackgroundContainer;
 exports.BannerNotification = BannerNotification;
+exports.Chip = Chip;
+exports.ChipGroup = ChipGroup;
 exports.ChooseANetworkView = ChooseANetworkView;
 exports.ChooseAStrategyActionsheetView = ChooseAStrategyActionsheetView;
 exports.ChooseAnAssetSwapView = ChooseAnAssetSwapView;
@@ -9603,12 +10564,16 @@ exports.DashboardBalancesBreakdown = DashboardBalancesBreakdown;
 exports.DashboardCard = DashboardCard;
 exports.DashboardInvestmentOpportunitiesView = DashboardInvestmentOpportunitiesView;
 exports.DashboardPortfolioView = DashboardPortfolioView;
+exports.DashboardPortfolioViewSimple = DashboardPortfolioViewSimple;
 exports.DashboardRecentTransactionsView = DashboardRecentTransactionsView;
+exports.DashboardRecentTransactionsViewSimple = DashboardRecentTransactionsViewSimple;
 exports.DashboardStrategiesListView = DashboardStrategiesListView;
 exports.DashboardTokenListView = DashboardTokenListView;
 exports.DashboardTokensView = DashboardTokensView;
+exports.DashboardTokensViewSimple = DashboardTokensViewSimple;
 exports.DashboardTransactionsPlaceholder = DashboardTransactionsPlaceholder;
 exports.DashboardView = DashboardView;
+exports.DashboardViewSimple = DashboardViewSimple;
 exports.DeframeComponentsProvider = DeframeComponentsProvider;
 exports.DetailsHeader = DetailsHeader;
 exports.EarnAmountInputView = EarnAmountInputView;
@@ -9625,6 +10590,7 @@ exports.EarnInvestedSectionView = EarnInvestedSectionView;
 exports.EarnInvestmentDetailsView = EarnInvestmentDetailsView;
 exports.EarnInvestmentSummaryView = EarnInvestmentSummaryView;
 exports.EarnNoBalanceNotificationView = EarnNoBalanceNotificationView;
+exports.EarnOverviewView = EarnOverviewView;
 exports.EarnPercentageButtonsView = EarnPercentageButtonsView;
 exports.EarnPositionCardView = EarnPositionCardView;
 exports.EarnRecentTransactionsView = EarnRecentTransactionsView;
@@ -9726,5 +10692,6 @@ exports.WalletConnectPanel = WalletConnectPanel;
 exports.WalletItem = WalletItem;
 exports.WalletList = ConnectWalletList;
 exports.WalletListContainer = WalletListContainer;
+exports.isDustValue = isDustValue;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map