npm - @deframe-sdk/components - Versions diffs - 0.1.23 → 0.1.24 - Mend

@deframe-sdk/components 0.1.23 → 0.1.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/dist/index.mjs CHANGED Viewed

@@ -2,7 +2,7 @@ import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { HiXMark, HiChevronUp, HiChevronDown, HiChevronLeft, HiOutlineClock, HiArrowRight, HiArrowLeft } from 'react-icons/hi2';
 import * as React6 from 'react';
-import React6__default, { useState, useEffect, useRef, useCallback } from 'react';
+import React6__default, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { MdClose, MdOutlineSearch, MdOutlineSearchOff, MdOutlineSwapHoriz, MdHistory, MdOutlineSwapVert, MdArrowRight, MdArrowDropDown, MdQrCodeScanner, MdOutlineArrowUpward, MdOutlineArrowDownward, MdCheckCircleOutline, MdErrorOutline, MdWarningAmber, MdInfoOutline, MdArrowUpward, MdArrowDownward } from 'react-icons/md';
 import { IoAlertCircleOutline, IoTimeOutline, IoCheckmarkOutline } from 'react-icons/io5';
@@ -7419,6 +7419,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__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: twMerge(baseStyles, selectedStyles, className),
+      children: label
+    }
+  );
+};
+var ChipGroup = ({
+  options,
+  selected,
+  onSelect,
+  className
+}) => {
+  return /* @__PURE__ */ jsx("div", { className: twMerge("flex flex-row flex-wrap gap-2", className), children: options.map((option) => /* @__PURE__ */ jsx(
+    Chip,
+    {
+      label: option.label,
+      selected: selected === option.value,
+      onClick: () => onSelect(option.value)
+    },
+    option.value
+  )) });
+};
 var ApyRange = ({ children }) => {
   return /* @__PURE__ */ jsx("div", { className: "text-right justify-center text-text-highlight text-xs font-normal leading-4", children });
 };
@@ -7544,80 +7583,403 @@ var EarnBalanceCard = ({
     ] })
   ] });
 };
-var EarnInvestmentSummaryView = ({
-  overviewDescription,
-  totalInvestedLabel,
-  totalInvestedValue,
-  totalReturnLabel,
-  totalReturnValue,
-  processingBadgeLabel,
-  processingBadgeTitle,
-  className
+var GroupLabel = ({ children }) => /* @__PURE__ */ 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__ */ jsxs("section", { className: twMerge("flex flex-col gap-md p-lg bg-[var(--deframe-widget-color-bg-subtle)] rounded", className), children: [
-    /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-text-secondary dark:text-text-secondary-dark", children: overviewDescription }),
-    /* @__PURE__ */ jsx(
-      WalletBalances,
-      {
-        cards: [
-          {
-            label: totalInvestedLabel,
-            value: totalInvestedValue,
-            badge: processingBadgeLabel ? /* @__PURE__ */ jsx(
-              ProcessingBadge,
+  const hasInvested = investedItems.length > 0;
+  const hasBestPerformance = bestPerformanceItems.length > 0;
+  const hasAllStrategies = allStrategiesItems.length > 0;
+  if (isLoading) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center py-md", children: [
+      loadingLabel,
+      " ",
+      /* @__PURE__ */ jsx(LoadingDots, {})
+    ] });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxs("div", { className: "p-4 text-center text-red-500", children: [
+      errorLabel,
+      ": ",
+      error.message
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "w-full flex flex-col gap-sm flex-1 min-h-0 overflow-y-auto", children: [
+    hasInvested && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(GroupLabel, { children: investedLabel }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-sm", children: investedItems.map((item) => /* @__PURE__ */ jsxs(
+        ListItem,
+        {
+          onClick: () => item.onClick(),
+          children: [
+            /* @__PURE__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ 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__ */ jsxs(ListItemContent, { children: [
+              /* @__PURE__ */ jsx(TextBody, { children: item.title }),
+              /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: item.subtitle })
+            ] }),
+            /* @__PURE__ */ jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-row justify-between items-center", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end", children: [
+                /* @__PURE__ */ jsx(TextBody, { children: item.balanceFormatted }),
+                /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: item.profitFormatted })
+              ] }),
+              /* @__PURE__ */ jsx(MdArrowRight, { className: "w-6 h-6" })
+            ] }) })
+          ]
+        },
+        `invested-${item.id}`
+      )) })
+    ] }),
+    hasBestPerformance && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(GroupLabel, { children: bestPerformanceLabel }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-sm", children: bestPerformanceItems.map((item) => /* @__PURE__ */ jsxs(
+        ListItem,
+        {
+          onClick: () => item.onClick(),
+          children: [
+            /* @__PURE__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: item.logoUrl,
+                alt: item.subtitle,
+                className: "w-10 h-10 rounded-full"
+              }
+            ) }),
+            /* @__PURE__ */ jsxs(ListItemContent, { children: [
+              /* @__PURE__ */ jsx(TextBody, { children: item.title }),
+              /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: item.subtitle })
+            ] }),
+            /* @__PURE__ */ jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-row justify-between items-center", children: [
+              /* @__PURE__ */ jsx(ApyRange, { children: item.apyFormatted }),
+              /* @__PURE__ */ jsx(MdArrowRight, { className: "w-6 h-6" })
+            ] }) })
+          ]
+        },
+        `best-${item.id}`
+      )) })
+    ] }),
+    hasAllStrategies && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(GroupLabel, { children: allStrategiesLabel }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-sm", children: allStrategiesItems.map((item) => /* @__PURE__ */ jsxs(
+        ListItem,
+        {
+          onClick: () => item.onClick(),
+          children: [
+            /* @__PURE__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: item.logoUrl,
+                alt: item.subtitle,
+                className: "w-10 h-10 rounded-full"
+              }
+            ) }),
+            /* @__PURE__ */ jsxs(ListItemContent, { children: [
+              /* @__PURE__ */ jsx(TextBody, { children: item.title }),
+              /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: item.subtitle })
+            ] }),
+            /* @__PURE__ */ jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-row justify-between items-center", children: [
+              /* @__PURE__ */ jsx(ApyRange, { children: item.apyFormatted }),
+              /* @__PURE__ */ jsx(MdArrowRight, { className: "w-6 h-6" })
+            ] }) })
+          ]
+        },
+        `all-${item.id}`
+      )) })
+    ] })
+  ] });
+};
+var DateLabel = ({ children }) => {
+  return /* @__PURE__ */ jsx("div", { className: "text-text-sm-mobile font-poppins text-text-secondary dark:text-text-secondary-dark", children });
+};
+var ArrowBadge = ({ isDeposit }) => {
+  return /* @__PURE__ */ 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__ */ jsx(MdArrowDownward, { className: "w-3 h-3 text-text-primary dark:text-text-primary-dark" }) : /* @__PURE__ */ jsx(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__ */ jsxs("div", { className: "relative flex-shrink-0", children: [
+    /* @__PURE__ */ 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__ */ jsx(
+      "img",
+      {
+        src: resolvedSrc,
+        alt,
+        className: "w-full h-full object-cover",
+        onError: (e) => {
+          e.target.src = fallbackSrc;
+        }
       }
-    )
+    ) }),
+    /* @__PURE__ */ 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__ */ jsxs("div", { className: "relative flex-shrink-0", children: [
+    /* @__PURE__ */ 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__ */ jsx(
+      "img",
+      {
+        src: resolvedSrc,
+        alt,
+        className: "w-full h-full object-cover",
+        onError: (e) => {
+          e.target.src = fallbackSrc;
+        }
+      }
+    ) }),
+    /* @__PURE__ */ 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__ */ jsx(MdArrowUpward, { className: "w-3 h-3 text-text-primary dark:text-text-primary-dark" }) })
+  ] });
+};
+var AmountDisplay = ({ amount, usdAmount }) => {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Label, { className: "text-accent-sm-mobile whitespace-nowrap", children: amount }),
+    usdAmount ? /* @__PURE__ */ 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__ */ jsxs(
-    "section",
-    {
-      className: 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__ */ jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: sectionTitle }),
-        /* @__PURE__ */ 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__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              onClick: () => onItemClick == null ? void 0 : onItemClick(item.strategyId),
-              className: 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__ */ 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__ */ jsxs("div", { className: "self-stretch flex flex-col gap-[16px]", children: [
+    groups.map((group) => /* @__PURE__ */ jsxs("div", { className: "self-stretch flex flex-col gap-sm", children: [
+      /* @__PURE__ */ jsx(DateLabel, { children: group.dateLabel }),
+      group.items.map((item) => /* @__PURE__ */ jsxs(
+        ListItem,
+        {
+          onClick: () => item.onClick(),
+          containerClassName: twMerge("!rounded-xs !border-0 !min-h-[72px]", itemClassName),
+          children: [
+            /* @__PURE__ */ jsx(ListItemLeftSide, { children: item.isSwap ? /* @__PURE__ */ jsx(SwapIconWithBadge, { src: item.iconUrl, alt: item.iconAlt }) : /* @__PURE__ */ jsx(
+              TokenIconWithBadge2,
+              {
+                src: item.iconUrl,
+                alt: item.iconAlt,
+                isDeposit: item.isDeposit
+              }
+            ) }),
+            /* @__PURE__ */ jsxs(ListItemContent, { children: [
+              /* @__PURE__ */ jsx(Label, { className: "text-text-lg-mobile", children: item.title }),
+              /* @__PURE__ */ jsx(Label, { variant: "secondary", className: "text-text-tertiary dark:text-text-tertiary-dark", children: item.subtitle }),
+              item.status === "PENDING" && item.statusLabel ? /* @__PURE__ */ jsx("div", { className: "mt-[6px]", children: /* @__PURE__ */ jsx(
+                ProcessingBadge,
+                {
+                  label: item.statusLabel,
+                  title: item.statusTitle,
+                  size: "compact"
+                }
+              ) }) : null
+            ] }),
+            /* @__PURE__ */ jsx(ListItemRightSide, { children: /* @__PURE__ */ jsx(AmountDisplay, { amount: item.amountFormatted, usdAmount: item.amountUsd }) })
+          ]
+        },
+        item.id
+      ))
+    ] }, group.dateLabel)),
+    showLoadMore && /* @__PURE__ */ jsx("div", { className: "flex justify-center pt-sm", children: /* @__PURE__ */ jsx(TertiaryButton, { onClick: onLoadMore, children: loadMoreLabel }) })
+  ] });
+};
+var OverviewEarnWidgetTabSkeleton = () => {
+  return /* @__PURE__ */ jsxs("div", { className: "w-full flex flex-col gap-md", children: [
+    /* @__PURE__ */ jsx(Skeleton, { width: "100%", height: "40px", variant: "rect" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-sm", children: [
+      /* @__PURE__ */ jsx(Skeleton, { width: "100%", height: "144px", variant: "rect" }),
+      /* @__PURE__ */ jsx(Skeleton, { width: "100%", height: "144px", variant: "rect" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+      /* @__PURE__ */ jsx(Skeleton, { width: "128px", height: "20px", variant: "text", className: "mb-sm" }),
+      /* @__PURE__ */ jsx(Skeleton, { width: "100%", height: "80px", variant: "rect" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+      /* @__PURE__ */ jsx(Skeleton, { width: "96px", height: "20px", variant: "text", className: "mb-sm" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-sm", children: [
+        /* @__PURE__ */ jsx(Skeleton, { width: "100%", height: "64px", variant: "rect" }),
+        /* @__PURE__ */ jsx(Skeleton, { width: "100%", height: "64px", variant: "rect" }),
+        /* @__PURE__ */ jsx(Skeleton, { width: "100%", height: "64px", variant: "rect" }),
+        /* @__PURE__ */ jsx(Skeleton, { width: "100%", height: "64px", variant: "rect" })
+      ] })
+    ] })
+  ] });
+};
+var EarnOverviewView = ({
+  selectedTab,
+  onTabChange,
+  labels,
+  overview,
+  explore,
+  history
+}) => {
+  return /* @__PURE__ */ jsx(BackgroundContainer, { className: "flex flex-col flex-1 min-h-0 px-0", children: /* @__PURE__ */ jsxs(Tabs, { value: selectedTab, onValueChange: onTabChange, variant: "default", className: "flex flex-col flex-1 min-h-0", children: [
+    /* @__PURE__ */ jsxs(TabsList, { className: "justify-between w-full", children: [
+      /* @__PURE__ */ jsx(TabsTrigger, { value: "overview", className: "flex-1", children: labels.tabs.overview }),
+      /* @__PURE__ */ jsx(TabsTrigger, { value: "explore", className: "flex-1", children: labels.tabs.explore }),
+      /* @__PURE__ */ jsx(TabsTrigger, { value: "history", className: "flex-1", children: labels.tabs.history })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1 w-full min-h-0 px-md pt-md", children: [
+      /* @__PURE__ */ jsx(TabsContent, { value: "overview", className: "flex flex-col flex-1 min-h-0", children: overview.isLoading ? /* @__PURE__ */ jsx(OverviewEarnWidgetTabSkeleton, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(WalletBalances, { cards: overview.walletBalances }),
+        /* @__PURE__ */ jsx(GroupedStrategyListView, __spreadValues({}, overview.groupedStrategies))
+      ] }) }),
+      /* @__PURE__ */ jsxs(TabsContent, { value: "explore", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 w-full mb-4 h-12", children: /* @__PURE__ */ jsx(
+          SearchInput,
+          {
+            value: explore.searchValue,
+            onChange: (value) => explore.onSearchChange(value),
+            placeholder: explore.searchPlaceholder
+          }
+        ) }),
+        explore.isLoading ? /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+          explore.loadingLabel,
+          /* @__PURE__ */ jsx(LoadingDots, {})
+        ] }) : explore.error ? /* @__PURE__ */ jsxs("div", { className: "p-4 text-center text-red-500", children: [
+          explore.errorLabel,
+          ": ",
+          explore.error.message
+        ] }) : explore.hasFilters && explore.strategies.length === 0 ? /* @__PURE__ */ 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__ */ jsx(
+            ChipGroup,
+            {
+              options: explore.chipOptions,
+              selected: explore.selectedCategory,
+              onSelect: (value) => explore.onCategorySelect(value)
+            }
+          ),
+          /* @__PURE__ */ jsx(SearchEmptyState, { title: explore.emptySearchTitle, description: explore.emptySearchDescription })
+        ] }) : /* @__PURE__ */ 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__ */ jsx(
+            ChipGroup,
+            {
+              options: explore.chipOptions,
+              selected: explore.selectedCategory,
+              onSelect: (value) => explore.onCategorySelect(value)
+            }
+          ),
+          /* @__PURE__ */ jsx(TextHeading, { variant: "h5", children: explore.bestPerformanceLabel }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-sm", children: explore.strategies.map((s) => /* @__PURE__ */ jsxs(ListItem, { onClick: () => s.onClick(), children: [
+            /* @__PURE__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsx("img", { src: s.logoUrl, alt: s.subtitle, className: "w-10 h-10 rounded-full" }) }),
+            /* @__PURE__ */ jsxs(ListItemContent, { children: [
+              /* @__PURE__ */ jsx(TextBody, { children: s.title }),
+              /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: s.subtitle })
+            ] }),
+            /* @__PURE__ */ jsx(ListItemRightSide, { children: /* @__PURE__ */ jsx(TextBody, { children: s.apyFormatted }) })
+          ] }, s.id)) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(TabsContent, { value: "history", children: history.isLoading ? /* @__PURE__ */ jsx(HistoryListSkeleton, {}) : history.isEmpty ? /* @__PURE__ */ 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__ */ jsxs("div", { className: "w-full flex flex-col justify-center items-center gap-md", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-center items-center gap-md text-center", children: [
+          /* @__PURE__ */ jsx("div", { className: "w-20 h-20 bg-bg-muted dark:bg-bg-muted-dark rounded-full flex justify-center items-center", children: /* @__PURE__ */ jsx(PiClockCountdownBold, { className: "w-10 h-10 text-text-tertiary dark:text-text-tertiary-dark" }) }),
+          /* @__PURE__ */ jsx(TextHeading, { variant: "h3", children: history.emptyTitle })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "self-stretch text-center", children: /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: history.emptyDescription }) })
+      ] }) }) : /* @__PURE__ */ 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__ */ jsxs("section", { className: twMerge("flex flex-col gap-md p-lg bg-[var(--deframe-widget-color-bg-subtle)] rounded", className), children: [
+    /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-text-secondary dark:text-text-secondary-dark", children: overviewDescription }),
+    /* @__PURE__ */ jsx(
+      WalletBalances,
+      {
+        cards: [
+          {
+            label: totalInvestedLabel,
+            value: totalInvestedValue,
+            badge: processingBadgeLabel ? /* @__PURE__ */ 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__ */ jsxs(
+    "section",
+    {
+      className: 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__ */ jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: sectionTitle }),
+        /* @__PURE__ */ 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__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => onItemClick == null ? void 0 : onItemClick(item.strategyId),
+              className: 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__ */ jsx(
+                  "img",
+                  {
+                    src: item.logoUrl,
+                    alt: item.assetName,
+                    className: "w-10 h-10 rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0"
+                  }
                 ),
                 /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1 min-w-0", children: [
                   /* @__PURE__ */ jsx(TextBody, { className: "font-medium truncate", children: item.assetName }),
@@ -7870,289 +8232,71 @@ var EarnInvestmentDetailsView = (props) => {
     ] }) })
   ] });
 };
-var GroupLabel = ({ children }) => /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex flex-col gap-[10px]", children: [
+  /* @__PURE__ */ jsx("div", { className: "flex gap-[10px] w-full", children: /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex h-full items-center justify-between px-[var(--deframe-widget-size-padding-x-sm)] py-[6px]", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] items-center", children: (selectedToken == null ? void 0 : selectedToken.logoURI) ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: selectedToken.logoURI,
+              alt: selectedToken.symbol,
+              className: "w-6 h-6 rounded-full"
+            }
+          ),
+          /* @__PURE__ */ jsx(TextBody, { as: "span", className: "text-[color:var(--deframe-widget-color-text-primary)]", children: selectedToken.symbol })
+        ] }) : isLoading ? /* @__PURE__ */ jsx(LoadingDots, {}) : /* @__PURE__ */ jsx(TextBody, { as: "span", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: selectTokenLabel }) }),
+        /* @__PURE__ */ jsx("div", { className: "w-[18px] h-[18px] flex items-center justify-center", children: /* @__PURE__ */ jsx(HiChevronDown, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-tertiary)]" }) })
+      ] })
+    }
+  ) }),
+  /* @__PURE__ */ jsxs("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] items-center", children: [
+    /* @__PURE__ */ jsx(TextBody, { as: "span", variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-tertiary)]", children: chainDirectionLabel }),
+    /* @__PURE__ */ 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__ */ jsx("img", { src: chainImage, alt: "", className: "w-3 h-3 rounded-full" }),
+          /* @__PURE__ */ jsx(TextBody, { as: "span", variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: chainLabel }),
+          /* @__PURE__ */ jsx("div", { className: `w-[18px] h-[18px] flex items-center justify-center ${isNetworkDisabled ? "opacity-50" : ""}`, children: /* @__PURE__ */ jsx(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__ */ jsxs("div", { className: "flex items-center py-md", children: [
-      loadingLabel,
-      " ",
-      /* @__PURE__ */ jsx(LoadingDots, {})
-    ] });
-  }
-  if (error) {
-    return /* @__PURE__ */ jsxs("div", { className: "p-4 text-center text-red-500", children: [
-      errorLabel,
-      ": ",
-      error.message
-    ] });
-  }
-  return /* @__PURE__ */ jsxs("div", { className: "w-full flex flex-col gap-sm flex-1 min-h-0 overflow-y-auto", children: [
-    hasInvested && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(GroupLabel, { children: investedLabel }),
-      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-sm", children: investedItems.map((item) => /* @__PURE__ */ jsxs(
-        ListItem,
-        {
-          onClick: () => item.onClick(),
-          children: [
-            /* @__PURE__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsx(
-              "img",
-              {
-                src: item.logoUrl,
-                alt: item.subtitle,
-                className: "w-10 h-10 rounded-full"
-              }
-            ) }),
-            /* @__PURE__ */ jsxs(ListItemContent, { children: [
-              /* @__PURE__ */ jsx(TextBody, { children: item.title }),
-              /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: item.subtitle })
-            ] }),
-            /* @__PURE__ */ jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-row justify-between items-center", children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end", children: [
-                /* @__PURE__ */ jsx(TextBody, { children: item.balanceFormatted }),
-                /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: item.profitFormatted })
-              ] }),
-              /* @__PURE__ */ jsx(MdArrowRight, { className: "w-6 h-6" })
-            ] }) })
-          ]
-        },
-        `invested-${item.id}`
-      )) })
-    ] }),
-    hasBestPerformance && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(GroupLabel, { children: bestPerformanceLabel }),
-      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-sm", children: bestPerformanceItems.map((item) => /* @__PURE__ */ jsxs(
-        ListItem,
-        {
-          onClick: () => item.onClick(),
-          children: [
-            /* @__PURE__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsx(
-              "img",
-              {
-                src: item.logoUrl,
-                alt: item.subtitle,
-                className: "w-10 h-10 rounded-full"
-              }
-            ) }),
-            /* @__PURE__ */ jsxs(ListItemContent, { children: [
-              /* @__PURE__ */ jsx(TextBody, { children: item.title }),
-              /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: item.subtitle })
-            ] }),
-            /* @__PURE__ */ jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-row justify-between items-center", children: [
-              /* @__PURE__ */ jsx(ApyRange, { children: item.apyFormatted }),
-              /* @__PURE__ */ jsx(MdArrowRight, { className: "w-6 h-6" })
-            ] }) })
-          ]
-        },
-        `best-${item.id}`
-      )) })
-    ] }),
-    hasAllStrategies && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(GroupLabel, { children: allStrategiesLabel }),
-      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-sm", children: allStrategiesItems.map((item) => /* @__PURE__ */ jsxs(
-        ListItem,
-        {
-          onClick: () => item.onClick(),
-          children: [
-            /* @__PURE__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsx(
-              "img",
-              {
-                src: item.logoUrl,
-                alt: item.subtitle,
-                className: "w-10 h-10 rounded-full"
-              }
-            ) }),
-            /* @__PURE__ */ jsxs(ListItemContent, { children: [
-              /* @__PURE__ */ jsx(TextBody, { children: item.title }),
-              /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: item.subtitle })
-            ] }),
-            /* @__PURE__ */ jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-row justify-between items-center", children: [
-              /* @__PURE__ */ jsx(ApyRange, { children: item.apyFormatted }),
-              /* @__PURE__ */ jsx(MdArrowRight, { className: "w-6 h-6" })
-            ] }) })
-          ]
-        },
-        `all-${item.id}`
-      )) })
-    ] })
-  ] });
-};
-var DateLabel = ({ children }) => {
-  return /* @__PURE__ */ jsx("div", { className: "text-text-sm-mobile font-poppins text-text-secondary dark:text-text-secondary-dark", children });
-};
-var ArrowBadge = ({ isDeposit }) => {
-  return /* @__PURE__ */ 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__ */ jsx(MdArrowDownward, { className: "w-3 h-3 text-text-primary dark:text-text-primary-dark" }) : /* @__PURE__ */ jsx(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__ */ jsxs("div", { className: "relative flex-shrink-0", children: [
-    /* @__PURE__ */ 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__ */ jsx(
-      "img",
-      {
-        src: resolvedSrc,
-        alt,
-        className: "w-full h-full object-cover",
-        onError: (e) => {
-          e.target.src = fallbackSrc;
-        }
-      }
-    ) }),
-    /* @__PURE__ */ 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__ */ jsxs("div", { className: "relative flex-shrink-0", children: [
-    /* @__PURE__ */ 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__ */ jsx(
-      "img",
-      {
-        src: resolvedSrc,
-        alt,
-        className: "w-full h-full object-cover",
-        onError: (e) => {
-          e.target.src = fallbackSrc;
-        }
-      }
-    ) }),
-    /* @__PURE__ */ 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__ */ jsx(MdArrowUpward, { className: "w-3 h-3 text-text-primary dark:text-text-primary-dark" }) })
-  ] });
-};
-var AmountDisplay = ({ amount, usdAmount }) => {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Label, { className: "text-accent-sm-mobile whitespace-nowrap", children: amount }),
-    usdAmount ? /* @__PURE__ */ 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__ */ jsxs("div", { className: "self-stretch flex flex-col gap-[16px]", children: [
-    groups.map((group) => /* @__PURE__ */ jsxs("div", { className: "self-stretch flex flex-col gap-sm", children: [
-      /* @__PURE__ */ jsx(DateLabel, { children: group.dateLabel }),
-      group.items.map((item) => /* @__PURE__ */ jsxs(
-        ListItem,
-        {
-          onClick: () => item.onClick(),
-          containerClassName: twMerge("!rounded-xs !border-0 !min-h-[72px]", itemClassName),
-          children: [
-            /* @__PURE__ */ jsx(ListItemLeftSide, { children: item.isSwap ? /* @__PURE__ */ jsx(SwapIconWithBadge, { src: item.iconUrl, alt: item.iconAlt }) : /* @__PURE__ */ jsx(
-              TokenIconWithBadge2,
-              {
-                src: item.iconUrl,
-                alt: item.iconAlt,
-                isDeposit: item.isDeposit
-              }
-            ) }),
-            /* @__PURE__ */ jsxs(ListItemContent, { children: [
-              /* @__PURE__ */ jsx(Label, { className: "text-text-lg-mobile", children: item.title }),
-              /* @__PURE__ */ jsx(Label, { variant: "secondary", className: "text-text-tertiary dark:text-text-tertiary-dark", children: item.subtitle }),
-              item.status === "PENDING" && item.statusLabel ? /* @__PURE__ */ jsx("div", { className: "mt-[6px]", children: /* @__PURE__ */ jsx(
-                ProcessingBadge,
-                {
-                  label: item.statusLabel,
-                  title: item.statusTitle,
-                  size: "compact"
-                }
-              ) }) : null
-            ] }),
-            /* @__PURE__ */ jsx(ListItemRightSide, { children: /* @__PURE__ */ jsx(AmountDisplay, { amount: item.amountFormatted, usdAmount: item.amountUsd }) })
-          ]
-        },
-        item.id
-      ))
-    ] }, group.dateLabel)),
-    showLoadMore && /* @__PURE__ */ jsx("div", { className: "flex justify-center pt-sm", children: /* @__PURE__ */ jsx(TertiaryButton, { onClick: onLoadMore, children: loadMoreLabel }) })
-  ] });
-};
-var EarnTokenSelectorView = ({
-  selectedToken,
-  onTokenClick,
-  onNetworkClick,
-  isLoading,
-  selectTokenLabel,
-  chainLabel,
-  chainImage,
-  chainDirectionLabel,
-  chainDisabledTitle,
-  isNetworkDisabled = false,
-  currentNetworkSelected
-}) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[10px]", children: [
-  /* @__PURE__ */ jsx("div", { className: "flex gap-[10px] w-full", children: /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex h-full items-center justify-between px-[var(--deframe-widget-size-padding-x-sm)] py-[6px]", children: [
-        /* @__PURE__ */ jsx("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] items-center", children: (selectedToken == null ? void 0 : selectedToken.logoURI) ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: selectedToken.logoURI,
-              alt: selectedToken.symbol,
-              className: "w-6 h-6 rounded-full"
-            }
-          ),
-          /* @__PURE__ */ jsx(TextBody, { as: "span", className: "text-[color:var(--deframe-widget-color-text-primary)]", children: selectedToken.symbol })
-        ] }) : isLoading ? /* @__PURE__ */ jsx(LoadingDots, {}) : /* @__PURE__ */ jsx(TextBody, { as: "span", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: selectTokenLabel }) }),
-        /* @__PURE__ */ jsx("div", { className: "w-[18px] h-[18px] flex items-center justify-center", children: /* @__PURE__ */ jsx(HiChevronDown, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-tertiary)]" }) })
-      ] })
-    }
-  ) }),
-  /* @__PURE__ */ jsxs("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] items-center", children: [
-    /* @__PURE__ */ jsx(TextBody, { as: "span", variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-tertiary)]", children: chainDirectionLabel }),
-    /* @__PURE__ */ 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__ */ jsx("img", { src: chainImage, alt: "", className: "w-3 h-3 rounded-full" }),
-          /* @__PURE__ */ jsx(TextBody, { as: "span", variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: chainLabel }),
-          /* @__PURE__ */ jsx("div", { className: `w-[18px] h-[18px] flex items-center justify-center ${isNetworkDisabled ? "opacity-50" : ""}`, children: /* @__PURE__ */ jsx(HiChevronDown, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-tertiary)]" }) })
-        ]
-      }
-    )
-  ] })
-] });
-var EarnAmountInputView = ({
-  value,
-  onChange,
-  ariaLabel,
-  dollarAmountFormatted,
-  availableBalanceFormatted
-}) => {
-  return /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col items-end justify-between min-h-[86px] text-right", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end text-[color:var(--deframe-widget-color-text-secondary)]", children: [
-      /* @__PURE__ */ jsx(
-        "input",
+  return /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col items-end justify-between min-h-[86px] text-right", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end text-[color:var(--deframe-widget-color-text-secondary)]", children: [
+      /* @__PURE__ */ jsx(
+        "input",
         {
           placeholder: "0.00",
           type: "text",
@@ -9109,7 +9253,7 @@ var DashboardBalancesBreakdown = ({
 }) => {
   if (layout === "horizontal") {
     return /* @__PURE__ */ jsx("div", { "data-test-id": "dashboard-balances-breakdown-horizontal", className: "hidden lg:block w-full mt-8", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full gap-4 items-stretch", children: [
-      /* @__PURE__ */ 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__ */ 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__ */ jsx(Text_default, { children: "Cripto" }),
         /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: isLoadingBalances ? /* @__PURE__ */ jsx("div", { className: "h-5 bg-[var(--deframe-widget-color-bg-muted)] rounded w-32 animate-pulse mt-2" }, "skeleton-crypto") : /* @__PURE__ */ jsx(
           motion.div,
@@ -9124,7 +9268,7 @@ var DashboardBalancesBreakdown = ({
           "crypto-value"
         ) })
       ] }),
-      /* @__PURE__ */ 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__ */ 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__ */ jsx(Text_default, { children: "Investimentos" }),
         /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: isLoadingBalances ? /* @__PURE__ */ jsx("div", { className: "h-5 bg-[var(--deframe-widget-color-bg-muted)] rounded w-32 animate-pulse mt-2" }, "skeleton-earn") : /* @__PURE__ */ jsx(
           motion.div,
@@ -9333,7 +9477,7 @@ var DashboardStrategiesListView = ({
       children: /* @__PURE__ */ 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__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsx(
@@ -9422,17 +9566,112 @@ var DashboardPortfolioView = ({
     ) })
   ] }) });
 };
-var DashboardTokensView = ({
-  sortedRegularTokens,
-  regularTokens,
-  isLoadingBalances,
-  activeTab,
-  onTabChange,
-  strategiesContent
+var cardClasses = 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 = 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 = 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__ */ jsxs(
+    "article",
+    {
+      "data-test-id": "stat-card-skeleton",
+      "aria-busy": "true",
+      className: twMerge(cardClasses, "self-stretch", className),
+      children: [
+        /* @__PURE__ */ jsx(Skeleton, { variant: "rect", width: 140, height: 11 }),
+        /* @__PURE__ */ jsx(Skeleton, { variant: "rect", width: "60%", height: 44 }),
+        showDescription && /* @__PURE__ */ jsx(Skeleton, { variant: "rect", width: "80%", height: 13 })
+      ]
+    }
+  );
+}
+var DashboardPortfolioViewSimple = ({
+  formattedTotalValue,
+  isLoading,
+  assetCount
 }) => {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(DashboardTokenListView, { tokens: sortedRegularTokens, isLoading: isLoadingBalances, className: "hidden lg:block" }),
-    /* @__PURE__ */ jsx(DashboardCard, { className: "lg:hidden p-6 bg-[var(--deframe-widget-color-bg-subtle)]", children: /* @__PURE__ */ jsxs(
+  if (isLoading) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-test-id": "dashboard-portfolio-simple",
+        className: "grid grid-cols-[1fr_auto] gap-[var(--deframe-widget-size-gap-sm)]",
+        children: [
+          /* @__PURE__ */ jsx(StatCardSkeletonBlock, { showDescription: true }),
+          /* @__PURE__ */ jsx(StatCardSkeletonBlock, { className: "min-w-[160px]" })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-test-id": "dashboard-portfolio-simple",
+      className: twMerge(
+        "grid gap-[var(--deframe-widget-size-gap-sm)]",
+        assetCount != null ? "grid-cols-[1fr_auto]" : "grid-cols-1"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("article", { className: twMerge(cardClasses, "self-stretch"), children: [
+          /* @__PURE__ */ jsx("p", { "data-test-id": "stat-card-label", className: labelClasses, children: "Total da Carteira (USD)" }),
+          /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
+            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__ */ jsx("p", { "data-test-id": "stat-card-description", className: descriptionClasses, children: "Soma do saldo por token (em USD)." })
+        ] }),
+        assetCount != null && /* @__PURE__ */ jsxs("article", { className: twMerge(cardClasses, "self-stretch min-w-[160px]"), children: [
+          /* @__PURE__ */ jsx("p", { "data-test-id": "stat-card-label", className: labelClasses, children: "Ativos" }),
+          /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
+            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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(DashboardTokenListView, { tokens: sortedRegularTokens, isLoading: isLoadingBalances, className: "hidden lg:block" }),
+    /* @__PURE__ */ jsx(DashboardCard, { className: "lg:hidden p-6 bg-[var(--deframe-widget-color-bg-subtle)]", children: /* @__PURE__ */ jsxs(
       Tabs,
       {
         value: activeTab,
@@ -9452,6 +9691,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__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": "Hist\xF3rico de transa\xE7\xF5es",
+      "data-test-id": "dashboard-home-history-button",
+      onClick,
+      className: 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__ */ 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__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+            /* @__PURE__ */ 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__default.useState(false);
+  if (item.iconUrl && !imgError) {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        "data-test-id": "icon-circle-img",
+        src: item.iconUrl,
+        alt: item.name,
+        width: size,
+        height: size,
+        className: twMerge("rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0 object-cover", className),
+        onError: () => setImgError(true)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-test-id": "icon-circle-fallback",
+      className: 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__ */ jsxs(
+    "div",
+    {
+      "data-test-id": "token-icon",
+      className: twMerge("relative flex-shrink-0", className),
+      style: { width: size, height: size },
+      children: [
+        /* @__PURE__ */ jsx(IconCircle3, { item: token, size }),
+        badge && /* @__PURE__ */ 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__ */ 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__ */ jsx("svg", { width: "8", height: "8", viewBox: "0 0 10 10", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M5 1.5L9 7H1L5 1.5Z", fill: "currentColor" }) }),
+  down: /* @__PURE__ */ jsx("svg", { width: "8", height: "8", viewBox: "0 0 10 10", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M5 8.5L1 3H9L5 8.5Z", fill: "currentColor" }) }),
+  neutral: /* @__PURE__ */ jsx("svg", { width: "9", height: "9", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M2 6H10", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) })
+};
+function AssetTrendBadge({ direction, value, className }) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-test-id": "asset-trend-badge",
+      className: 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__ */ jsxs(
+    "div",
+    {
+      "data-test-id": "asset-list-skeleton-row",
+      className: 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__ */ jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)]", children: [
+          /* @__PURE__ */ jsx(Skeleton, { variant: "circle", width: 36, height: 36 }),
+          /* @__PURE__ */ jsxs("div", { className: "hidden sm:flex flex-col gap-[var(--deframe-widget-size-gap-xs)]", children: [
+            /* @__PURE__ */ jsx(Skeleton, { variant: "rect", width: SKELETON_NAME_WIDTHS[w], height: 14 }),
+            /* @__PURE__ */ jsx(Skeleton, { variant: "rect", width: SKELETON_SYMBOL_WIDTHS[w], height: 11 })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx(Skeleton, { variant: "rect", width: 88, height: 24, className: "rounded-[var(--deframe-widget-size-radius-full)]" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end gap-[var(--deframe-widget-size-gap-xs)]", children: [
+          /* @__PURE__ */ jsx(Skeleton, { variant: "rect", width: SKELETON_BALANCE_WIDTHS[w], height: 14 }),
+          /* @__PURE__ */ jsx(Skeleton, { variant: "rect", width: SKELETON_BALANCE_WIDTHS[w] - 12, height: 11 })
+        ] })
+      ]
+    }
+  );
+}
+function AssetListSkeletonContent() {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: 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__ */ jsx(Skeleton, { variant: "rect", width: 108, height: 18 }),
+          /* @__PURE__ */ jsx(Skeleton, { variant: "rect", width: 36, height: 36, className: "rounded-[var(--deframe-widget-size-radius-sm)]" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ 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__ */ jsx(Skeleton, { variant: "rect", width: 60, height: 26, className: "rounded-[var(--deframe-widget-size-radius-full)]" }),
+      /* @__PURE__ */ jsx(Skeleton, { variant: "rect", width: 104, height: 26, className: "rounded-[var(--deframe-widget-size-radius-full)]" }),
+      /* @__PURE__ */ jsx(Skeleton, { variant: "rect", width: 64, height: 26, className: "rounded-[var(--deframe-widget-size-radius-full)]" })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: 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__ */ jsx(Skeleton, { variant: "rect", width: 40, height: 10, className: "hidden sm:block" }),
+          /* @__PURE__ */ jsx(Skeleton, { variant: "rect", width: 72, height: 10, className: "hidden sm:block mx-auto" }),
+          /* @__PURE__ */ jsx(Skeleton, { variant: "rect", width: 40, height: 10, className: "hidden sm:block ml-auto" })
+        ]
+      }
+    ),
+    Array.from({ length: 6 }, (_, i) => /* @__PURE__ */ jsx(AssetListSkeletonRow, { index: i }, i))
+  ] });
+}
+var DashboardTokensViewSimple = ({
+  sortedRegularTokens,
+  isLoadingBalances,
+  filters,
+  selectedFilter,
+  onFilterSelect,
+  onHistoryClick
+}) => {
+  if (isLoadingBalances) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-test-id": "asset-list-skeleton",
+        "aria-busy": "true",
+        "aria-label": "Carregando ativos\u2026",
+        className: 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__ */ jsx(AssetListSkeletonContent, {})
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-test-id": "asset-list",
+      className: 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__ */ jsxs(
+          "div",
+          {
+            "data-test-id": "asset-list-header",
+            className: 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__ */ 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__ */ jsx(HistoryButton2, { onClick: onHistoryClick })
+            ]
+          }
+        ),
+        filters && filters.length > 0 && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-test-id": "asset-list-filter",
+            className: 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__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "data-test-id": "asset-list-filter-pill",
+                  onClick: () => onFilterSelect == null ? void 0 : onFilterSelect(filter.id),
+                  className: 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__ */ jsxs(
+          "div",
+          {
+            "data-test-id": "asset-list-columns",
+            className: 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__ */ 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__ */ 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__ */ 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__ */ jsxs(
+            "div",
+            {
+              "data-test-id": "asset-list-item",
+              onClick: handleItemClick,
+              className: 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__ */ jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)] min-w-0", children: [
+                  /* @__PURE__ */ jsx(TokenIcon3, { token: { name: item.name, color, iconUrl: item.logoUrl }, size: 36, badge: networkBadge, badgeSize: 14 }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0", children: [
+                    /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { className: "flex justify-center", children: trendDirection && trendValue ? /* @__PURE__ */ jsx(AssetTrendBadge, { direction: trendDirection, value: trendValue }) : null }),
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end text-right", children: [
+                  /* @__PURE__ */ 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__ */ 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,
@@ -9476,12 +10075,12 @@ var DashboardRecentTransactionsView = ({
       return /* @__PURE__ */ 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__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
               /* @__PURE__ */ jsx("div", { className: `w-10 h-10 rounded-full ${item.iconBgColor} flex items-center justify-center`, children: /* @__PURE__ */ jsx(MainIcon, { className: `${item.iconColor}`, size: 20 }) }),
-              /* @__PURE__ */ 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__ */ jsx(TypeIcon, { className: `${item.iconColor}`, size: 12 }) })
+              /* @__PURE__ */ 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__ */ jsx(TypeIcon, { className: `${item.iconColor}`, size: 12 }) })
             ] }) }),
             /* @__PURE__ */ jsxs(ListItemContent, { className: "ml-4", children: [
               /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: item.formattedDate }),
@@ -9498,6 +10097,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__ */ jsxs(
+    "span",
+    {
+      "data-test-id": "status-badge",
+      className: 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__ */ jsx(
+          "span",
+          {
+            "data-test-id": "status-badge-dot",
+            className: twMerge(
+              "w-[7px] h-[7px] rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0 inline-block",
+              config.dotClass
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-test-id": "status-badge-label",
+            className: 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] = useState("");
+  const filtered = 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__ */ jsxs(
+    "div",
+    {
+      "data-test-id": "dashboard-recent-transactions-simple",
+      className: 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__ */ 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__ */ jsxs("div", { className: "flex flex-col gap-[4px]", children: [
+                /* @__PURE__ */ jsx(
+                  "h2",
+                  {
+                    "data-test-id": "dashboard-recent-transactions-simple-title",
+                    className: 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__ */ 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__ */ jsx(
+                CloseButton_default,
+                {
+                  onClick: onClose,
+                  ariaLabel: "Fechar",
+                  className: "flex-shrink-0 mt-[-4px]"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "h-px bg-[var(--deframe-widget-color-border-secondary)]" }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-test-id": "dashboard-recent-transactions-simple-search",
+            className: "relative",
+            children: [
+              /* @__PURE__ */ 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__ */ 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__ */ jsxs(
+                "svg",
+                {
+                  width: "15",
+                  height: "15",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  "aria-hidden": "true",
+                  children: [
+                    /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
+                    /* @__PURE__ */ jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
+                  ]
+                }
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ 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__ */ jsxs(
+              "div",
+              {
+                className: 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__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                    /* @__PURE__ */ jsx(Skeleton, { width: "100px", height: "12px", shimmer: true }),
+                    /* @__PURE__ */ jsx(Skeleton, { width: "80px", height: "20px", shimmer: true, className: "rounded-full" })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
+                    /* @__PURE__ */ jsx(Skeleton, { width: "160px", height: "18px", shimmer: true }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end gap-[4px]", children: [
+                      /* @__PURE__ */ jsx(Skeleton, { width: "96px", height: "14px", shimmer: true }),
+                      /* @__PURE__ */ jsx(Skeleton, { width: "72px", height: "12px", shimmer: true })
+                    ] })
+                  ] })
+                ]
+              },
+              i
+            )) : isEmpty ? /* @__PURE__ */ jsx(DashboardTransactionsPlaceholder, {}) : filtered.length === 0 ? /* @__PURE__ */ 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__ */ jsxs(
+              "div",
+              {
+                "data-test-id": "dashboard-recent-transactions-simple-item",
+                className: 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__ */ jsxs("div", { className: "flex items-center justify-between gap-[var(--deframe-widget-size-gap-sm)]", children: [
+                    /* @__PURE__ */ 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__ */ jsx(StatusBadge2, { status: "approved" })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-[var(--deframe-widget-size-gap-sm)]", children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        "data-test-id": "dashboard-recent-transactions-simple-item-label",
+                        className: 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__ */ jsxs("div", { className: "flex flex-col items-end gap-[2px] flex-shrink-0", children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          "data-test-id": "dashboard-recent-transactions-simple-item-primary",
+                          className: 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__ */ 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,
@@ -9506,7 +10399,7 @@ var DashboardInvestmentOpportunitiesView = ({
 }) => {
   return /* @__PURE__ */ jsx(DashboardCard, { className: "hidden lg:block p-6", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-4", children: [
     /* @__PURE__ */ jsx(TextBody, { variant: "text-large", children: "Oportunidades de investimento" }),
-    /* @__PURE__ */ jsxs(DashboardCard, { className: "bg-[var(--deframe-widget-color-bg-secondary)] flex flex-col space-y-2 p-4", children: [
+    /* @__PURE__ */ jsxs(DashboardCard, { className: "bg-[var(--deframe-widget-color-bg-raised)] flex flex-col space-y-2 p-4", children: [
       /* @__PURE__ */ jsx(TextBody, { children: "Rendimentos" }),
       isLoadingBalances ? /* @__PURE__ */ jsx("div", { className: "flex items-baseline gap-2", children: /* @__PURE__ */ jsx(Skeleton, { width: "80px", height: "24px", shimmer: true }) }) : /* @__PURE__ */ jsx("div", { className: "flex items-baseline gap-2", children: /* @__PURE__ */ jsx(TextBody, { variant: "text-large", children: formattedTotalProfit }) })
     ] }),
@@ -9528,15 +10421,15 @@ var DashboardView = ({
       /* @__PURE__ */ jsx(DashboardCard, { "data-testid": "dashboard-quick-actions-card", className: "hidden lg:block p-6", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-3", children: [
         /* @__PURE__ */ jsx(TextBody, { className: "mb-6", children: "A\xE7\xF5es r\xE1pidas" }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-4 w-full", children: [
-          /* @__PURE__ */ jsx(Link2, { "data-testid": "dashboard-quick-action-deposit", href: "/dashboard/deposit", className: "flex-1 min-w-0 cursor-pointer", onClick: () => quickActions.onDepositClick(), children: /* @__PURE__ */ jsxs(PrimaryButton, { children: [
+          /* @__PURE__ */ jsx(Link2, { "data-testid": "dashboard-quick-action-deposit", href: "/dashboard/deposit", className: "flex-1 min-w-0 cursor-pointer", onClick: () => quickActions == null ? void 0 : quickActions.onDepositClick(), children: /* @__PURE__ */ jsxs(PrimaryButton, { children: [
             /* @__PURE__ */ jsx(MdOutlineArrowUpward, { className: "w-4 h-4 shrink-0" }),
             "Depositar"
           ] }) }),
-          /* @__PURE__ */ jsx(Link2, { "data-testid": "dashboard-quick-action-withdraw", href: "/dashboard/withdraw", className: "flex-1 min-w-0 cursor-pointer", onClick: () => quickActions.onWithdrawClick(), children: /* @__PURE__ */ jsxs(PrimaryButton, { children: [
+          /* @__PURE__ */ jsx(Link2, { "data-testid": "dashboard-quick-action-withdraw", href: "/dashboard/withdraw", className: "flex-1 min-w-0 cursor-pointer", onClick: () => quickActions == null ? void 0 : quickActions.onWithdrawClick(), children: /* @__PURE__ */ jsxs(PrimaryButton, { children: [
             /* @__PURE__ */ jsx(MdOutlineArrowDownward, { className: "w-4 h-4 shrink-0" }),
             "Sacar"
           ] }) }),
-          /* @__PURE__ */ jsx(Link2, { "data-testid": "dashboard-quick-action-swap", href: "/dashboard/swap", className: "flex-1 min-w-0 cursor-pointer", onClick: () => quickActions.onSwapClick(), children: /* @__PURE__ */ jsxs(PrimaryButton, { children: [
+          /* @__PURE__ */ jsx(Link2, { "data-testid": "dashboard-quick-action-swap", href: "/dashboard/swap", className: "flex-1 min-w-0 cursor-pointer", onClick: () => quickActions == null ? void 0 : quickActions.onSwapClick(), children: /* @__PURE__ */ jsxs(PrimaryButton, { children: [
             /* @__PURE__ */ jsx(MdOutlineSwapHoriz, { className: "w-4 h-4 shrink-0" }),
             "Trocar"
           ] }) })
@@ -9545,18 +10438,88 @@ var DashboardView = ({
       /* @__PURE__ */ 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__ */ 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__ */ jsx(DashboardTokensView, __spreadValues({}, tokens)),
-      /* @__PURE__ */ jsx(DashboardRecentTransactionsView, __spreadValues({}, recentTransactions))
+      recentTransactions && /* @__PURE__ */ jsx(DashboardRecentTransactionsView, __spreadValues({}, recentTransactions))
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "lg:col-span-1 space-y-6", children: /* @__PURE__ */ jsx(DashboardInvestmentOpportunitiesView, __spreadValues({}, investmentOpportunities)) })
+    investmentOpportunities && /* @__PURE__ */ jsx("div", { className: "lg:col-span-1 space-y-6", children: /* @__PURE__ */ jsx(DashboardInvestmentOpportunitiesView, __spreadValues({}, investmentOpportunities)) })
   ] }) });
 };
+var DashboardViewSimple = ({
+  portfolio,
+  tokens,
+  quickActions
+}) => {
+  const assetCount = tokens.sortedRegularTokens.filter((t) => !isDustValue(t.amountInUSD)).length;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-test-id": "dashboard-page-simple",
+      className: "w-full flex flex-col gap-[var(--deframe-widget-size-gap-md)]",
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-test-id": "dashboard-home-header",
+            className: "flex items-center justify-between gap-[var(--deframe-widget-size-gap-md)]",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-xs)]", children: [
+                /* @__PURE__ */ 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__ */ 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__ */ jsxs(
+                "div",
+                {
+                  "data-test-id": "dashboard-home-actions",
+                  className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)] flex-shrink-0",
+                  children: [
+                    /* @__PURE__ */ 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__ */ 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__ */ jsx(DashboardPortfolioViewSimple, __spreadProps(__spreadValues({}, portfolio), { assetCount })),
+        /* @__PURE__ */ jsx(DashboardTokensViewSimple, __spreadValues({}, tokens))
+      ]
+    }
+  );
+};
-export { ActionButton, ActionSheet, AddressDisplay, ApyRange, BackButton, BackgroundContainer, BannerNotification, ChooseANetworkView, ChooseAStrategyActionsheetView, ChooseAnAssetSwapView, ChooseNetworkAndAssetViewSimple, CloseButton_default as CloseButton, CollapsibleInfoRow, CollapsibleSection, ConfirmSwapButtonView, ConfirmSwapButtonViewSimple, ConnectWalletList, Currency, DashboardBalancesBreakdown, DashboardCard, DashboardInvestmentOpportunitiesView, DashboardPortfolioView, DashboardRecentTransactionsView, DashboardStrategiesListView, DashboardTokenListView, DashboardTokensView, DashboardTransactionsPlaceholder, DashboardView, DeframeComponentsProvider, DetailsHeader, EarnAmountInputView, EarnBalanceCard, EarnBytecodeErrorView, EarnDepositFailedView, EarnDepositFormView, EarnDepositProcessingView, EarnDepositSuccessView, EarnDepositWarningView, EarnDesktopView, EarnExploreGridView, EarnInvestedSectionView, EarnInvestmentDetailsView, EarnInvestmentSummaryView, EarnNoBalanceNotificationView, EarnPercentageButtonsView, EarnPositionCardView, EarnRecentTransactionsView, EarnTokenSelectorView, EarnTxStatusCardView, EarnWithdrawFailedView, EarnWithdrawFormView, EarnWithdrawProcessingView, EarnWithdrawSuccessView, EarnWithdrawTokenSelectorView, EarnWithdrawWarningView, Currency as Fiat, FlexCol, FlexRow, GroupedStrategyListView, HighRiskBadge, HistoryDepositDetailsView, HistoryListSkeleton, HistoryListView, HistorySwapDetailsView, HistoryTabEmpty, HistoryWithdrawDetailsView, InfoLabel, InfoRow, InfoRowIconLabel, InfoRowIconValue, InfoRowWithIcon, InfoValue, Input2 as Input, InvestmentCrossChainProcessingView, Label, Link, ListItem, ListItemContent, ListItemLeftSide, ListItemRightSide, LoadingDots, LowRiskBadge, MediumRiskBadge, Navbar, PercentageButton, PrimaryButton, ProcessingBadge, ProgressIndicator, ScrollableContent, SearchEmptyState, SearchInput, SecondaryButton, SectionCard, Select, SelectContent, SelectItem, SelectTrigger, Skeleton, StepDisplay, StepStatusIcon, StepStatusText, StrategyDetailsView, StrategyGridCard, SummaryDetails, SummaryDetailsCryptoControlV2, SwapAdvancedSettingsView, SwapAmountInputView, SwapCrossChainProcessingView, SwapFormView, SwapFormViewSimple, SwapFromCardView, SwapFromCardViewSimple, SwapHistoryView, SwapProcessingView, SwapProcessingViewSimple, SwapQuoteDetailsView, SwapSignatureWarningView, SwapSignatureWarningViewSimple, SwapSuccessView, SwapSuccessViewSimple, SwapToCardView, SwapToCardViewSimple, SwapTransactionFailedView, SwapTransactionFailedViewSimple, SwapWidgetFallbackView, Tabs, TabsContent, TabsList, TabsTrigger, TertiaryButton, Text_default as Text, TextAccent, TextBody, TextHeading, Title, TokenWithChainBadge, TransactionProcessingDetails, TransactionScreen, TransactionScreenIcon, TransactionScreenInvestmentCard, WalletBalances, WalletConnectPanel, WalletItem, ConnectWalletList as WalletList, WalletListContainer };
+export { ActionButton, ActionSheet, AddressDisplay, ApyRange, BackButton, BackgroundContainer, BannerNotification, Chip, ChipGroup, ChooseANetworkView, ChooseAStrategyActionsheetView, ChooseAnAssetSwapView, ChooseNetworkAndAssetViewSimple, CloseButton_default as CloseButton, CollapsibleInfoRow, CollapsibleSection, ConfirmSwapButtonView, ConfirmSwapButtonViewSimple, ConnectWalletList, Currency, DashboardBalancesBreakdown, DashboardCard, DashboardInvestmentOpportunitiesView, DashboardPortfolioView, DashboardPortfolioViewSimple, DashboardRecentTransactionsView, DashboardRecentTransactionsViewSimple, DashboardStrategiesListView, DashboardTokenListView, DashboardTokensView, DashboardTokensViewSimple, DashboardTransactionsPlaceholder, DashboardView, DashboardViewSimple, DeframeComponentsProvider, DetailsHeader, EarnAmountInputView, EarnBalanceCard, EarnBytecodeErrorView, EarnDepositFailedView, EarnDepositFormView, EarnDepositProcessingView, EarnDepositSuccessView, EarnDepositWarningView, EarnDesktopView, EarnExploreGridView, EarnInvestedSectionView, EarnInvestmentDetailsView, EarnInvestmentSummaryView, EarnNoBalanceNotificationView, EarnOverviewView, EarnPercentageButtonsView, EarnPositionCardView, EarnRecentTransactionsView, EarnTokenSelectorView, EarnTxStatusCardView, EarnWithdrawFailedView, EarnWithdrawFormView, EarnWithdrawProcessingView, EarnWithdrawSuccessView, EarnWithdrawTokenSelectorView, EarnWithdrawWarningView, Currency as Fiat, FlexCol, FlexRow, GroupedStrategyListView, HighRiskBadge, HistoryDepositDetailsView, HistoryListSkeleton, HistoryListView, HistorySwapDetailsView, HistoryTabEmpty, HistoryWithdrawDetailsView, InfoLabel, InfoRow, InfoRowIconLabel, InfoRowIconValue, InfoRowWithIcon, InfoValue, Input2 as Input, InvestmentCrossChainProcessingView, Label, Link, ListItem, ListItemContent, ListItemLeftSide, ListItemRightSide, LoadingDots, LowRiskBadge, MediumRiskBadge, Navbar, PercentageButton, PrimaryButton, ProcessingBadge, ProgressIndicator, ScrollableContent, SearchEmptyState, SearchInput, SecondaryButton, SectionCard, Select, SelectContent, SelectItem, SelectTrigger, Skeleton, StepDisplay, StepStatusIcon, StepStatusText, StrategyDetailsView, StrategyGridCard, SummaryDetails, SummaryDetailsCryptoControlV2, SwapAdvancedSettingsView, SwapAmountInputView, SwapCrossChainProcessingView, SwapFormView, SwapFormViewSimple, SwapFromCardView, SwapFromCardViewSimple, SwapHistoryView, SwapProcessingView, SwapProcessingViewSimple, SwapQuoteDetailsView, SwapSignatureWarningView, SwapSignatureWarningViewSimple, SwapSuccessView, SwapSuccessViewSimple, SwapToCardView, SwapToCardViewSimple, SwapTransactionFailedView, SwapTransactionFailedViewSimple, SwapWidgetFallbackView, Tabs, TabsContent, TabsList, TabsTrigger, TertiaryButton, Text_default as Text, TextAccent, TextBody, TextHeading, Title, TokenWithChainBadge, TransactionProcessingDetails, TransactionScreen, TransactionScreenIcon, TransactionScreenInvestmentCard, WalletBalances, WalletConnectPanel, WalletItem, ConnectWalletList as WalletList, WalletListContainer, isDustValue };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map