@deframe-sdk/components 0.1.21 → 0.1.23

package/dist/index.js

@@ -8,6 +8,9 @@ var framerMotion = require('framer-motion');
 var md = require('react-icons/md');
 var io5 = require('react-icons/io5');
 var pi = require('react-icons/pi');
+var Link2 = require('next/link');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -28,6 +31,7 @@ function _interopNamespace(e) {
 }
 
 var React6__namespace = /*#__PURE__*/_interopNamespace(React6);
+var Link2__default = /*#__PURE__*/_interopDefault(Link2);
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -7449,7 +7453,7 @@ var variantStyles = {
 var Label = ({ children, variant = "primary", className }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: tailwindMerge.twMerge(variantStyles[variant], className), children });
 };
-var HistoryItemSkeleton = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full bg-bg-subtle dark:bg-bg-subtle-dark rounded-xs min-h-[72px] flex items-center justify-between px-md py-sm", children: [
+var HistoryItemSkeleton = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full bg-[var(--deframe-widget-color-bg-subtle)] rounded-xs min-h-[72px] flex items-center justify-between px-md py-sm", children: [
   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-sm flex-1 min-w-0", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-xl bg-bg-muted dark:bg-bg-muted-dark animate-pulse flex-shrink-0" }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-xs flex-1 min-w-0", children: [
@@ -7504,8 +7508,7 @@ var StrategyGridCard = ({
     "data-test-id": "strategy-grid-card",
     className: tailwindMerge.twMerge(
       "flex flex-col gap-[var(--deframe-widget-size-gap-md)] p-[var(--deframe-widget-size-padding-x-md)] rounded-[var(--deframe-widget-size-radius-sm)] h-[136px] min-h-[136px] flex-shrink-0",
-      "bg-[var(--deframe-widget-color-bg-primary)]",
-      "hover:bg-[var(--deframe-widget-color-bg-tertiary)]",
+      "bg-[var(--deframe-widget-color-bg-raised)]",
       "transition-colors cursor-pointer text-left w-full",
       className
     ),
@@ -7575,7 +7578,7 @@ var EarnInvestmentSummaryView = ({
   processingBadgeTitle,
   className
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: tailwindMerge.twMerge("flex flex-col gap-md p-lg bg-bg-subtle dark:bg-bg-subtle-dark rounded", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: tailwindMerge.twMerge("flex flex-col gap-md p-lg bg-[var(--deframe-widget-color-bg-subtle)] rounded", className), children: [
     /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-text-secondary dark:text-text-secondary-dark", children: overviewDescription }),
     /* @__PURE__ */ jsxRuntime.jsx(
       WalletBalances,
@@ -7614,7 +7617,7 @@ var EarnInvestedSectionView = ({
     {
       className: tailwindMerge.twMerge(
         "flex flex-col gap-[var(--deframe-widget-size-gap-md)] p-[var(--deframe-widget-size-padding-x-lg)]",
-        "bg-[var(--deframe-widget-color-bg-secondary)] rounded-[var(--deframe-widget-size-radius-sm)]",
+        "bg-[var(--deframe-widget-color-bg-subtle)] rounded-[var(--deframe-widget-size-radius-sm)]",
         className
       ),
       children: [
@@ -7627,8 +7630,7 @@ var EarnInvestedSectionView = ({
               type: "button",
               onClick: () => onItemClick == null ? void 0 : onItemClick(item.strategyId),
               className: tailwindMerge.twMerge(
-                "flex items-center gap-[var(--deframe-widget-size-gap-md)] p-[var(--deframe-widget-size-padding-x-md)] bg-[var(--deframe-widget-color-bg-primary)] rounded-[var(--deframe-widget-size-radius-sm)]",
-                "hover:bg-[var(--deframe-widget-color-bg-tertiary)]",
+                "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)]"
               ),
@@ -7680,7 +7682,7 @@ var EarnExploreGridView = ({
       {
         className: tailwindMerge.twMerge(
           "flex flex-col gap-[var(--deframe-widget-size-gap-md)] p-[var(--deframe-widget-size-padding-x-lg)]",
-          "bg-[var(--deframe-widget-color-bg-secondary)] rounded-[var(--deframe-widget-size-radius-sm)]",
+          "bg-[var(--deframe-widget-color-bg-subtle)] rounded-[var(--deframe-widget-size-radius-sm)]",
           className
         ),
         children: [
@@ -7699,7 +7701,7 @@ var EarnExploreGridView = ({
       {
         className: tailwindMerge.twMerge(
           "flex flex-col gap-[var(--deframe-widget-size-gap-md)] p-[var(--deframe-widget-size-padding-x-lg)]",
-          "bg-[var(--deframe-widget-color-bg-secondary)] rounded-[var(--deframe-widget-size-radius-sm)]",
+          "bg-[var(--deframe-widget-color-bg-subtle)] rounded-[var(--deframe-widget-size-radius-sm)]",
           className
         ),
         children: [
@@ -7714,7 +7716,7 @@ var EarnExploreGridView = ({
     {
       className: tailwindMerge.twMerge(
         "flex flex-col gap-[var(--deframe-widget-size-gap-md)] p-[var(--deframe-widget-size-padding-x-lg)]",
-        "bg-[var(--deframe-widget-color-bg-secondary)] rounded-[var(--deframe-widget-size-radius-sm)]",
+        "bg-[var(--deframe-widget-color-bg-subtle)] rounded-[var(--deframe-widget-size-radius-sm)]",
         className
       ),
       children: [
@@ -7763,7 +7765,7 @@ var EarnRecentTransactionsView = ({
     {
       className: tailwindMerge.twMerge(
         "flex flex-col gap-md p-lg",
-        "bg-bg-subtle dark:bg-bg-subtle-dark rounded",
+        "bg-[var(--deframe-widget-color-bg-subtle)] rounded",
         className
       ),
       children: [
@@ -9113,6 +9115,471 @@ var EarnWithdrawFailedView = ({
     }
   );
 };
+var DashboardCard = ({ children, className }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "dashboard-card", className: tailwindMerge.twMerge("bg-[var(--deframe-widget-color-bg-subtle)] rounded", className), children });
+};
+var DashboardTransactionsPlaceholder = () => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": "dashboard-transactions-placeholder", className: "flex flex-col items-center justify-center py-16 gap-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-20 h-20 bg-[var(--deframe-widget-color-bg-muted)] rounded-full flex justify-center items-center", children: /* @__PURE__ */ jsxRuntime.jsx(pi.PiClockCountdownBold, { className: "w-10 h-10 text-[var(--deframe-widget-color-text-tertiary)]" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h3", children: "Nenhuma transa\xE7\xE3o ainda" }),
+    /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-medium", className: "text-center text-[var(--deframe-widget-color-text-secondary)]", children: "Assim que voc\xEA come\xE7ar a movimentar fundos, seu hist\xF3rico de transa\xE7\xF5es aparecer\xE1 aqui." })
+  ] });
+};
+var DashboardBalancesBreakdown = ({
+  isLoadingBalances,
+  formattedTokenPositions,
+  formattedEarnPositions,
+  layout = "vertical"
+}) => {
+  if (layout === "horizontal") {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "dashboard-balances-breakdown-horizontal", className: "hidden lg:block w-full mt-8", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full gap-4 items-stretch", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 basis-0 min-w-0 bg-[var(--deframe-widget-color-bg-secondary)] rounded p-4 flex flex-col", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Text_default, { children: "Cripto" }),
+        /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: isLoadingBalances ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-5 bg-[var(--deframe-widget-color-bg-muted)] rounded w-32 animate-pulse mt-2" }, "skeleton-crypto") : /* @__PURE__ */ jsxRuntime.jsx(
+          framerMotion.motion.div,
+          {
+            initial: { opacity: 0, x: 10 },
+            animate: { opacity: 1, x: 0 },
+            exit: { opacity: 0, x: -10 },
+            transition: { duration: 0.4, delay: 0.1, ease: "easeOut" },
+            className: "mt-2",
+            children: /* @__PURE__ */ jsxRuntime.jsx(Text_default, { children: formattedTokenPositions })
+          },
+          "crypto-value"
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 basis-0 min-w-0 bg-[var(--deframe-widget-color-bg-secondary)] rounded p-4 flex flex-col", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Text_default, { children: "Investimentos" }),
+        /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: isLoadingBalances ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-5 bg-[var(--deframe-widget-color-bg-muted)] rounded w-32 animate-pulse mt-2" }, "skeleton-earn") : /* @__PURE__ */ jsxRuntime.jsx(
+          framerMotion.motion.div,
+          {
+            initial: { opacity: 0, x: 10 },
+            animate: { opacity: 1, x: 0 },
+            exit: { opacity: 0, x: -10 },
+            transition: { duration: 0.4, delay: 0.2, ease: "easeOut" },
+            className: "mt-2",
+            children: /* @__PURE__ */ jsxRuntime.jsx(Text_default, { children: formattedEarnPositions })
+          },
+          "earn-value"
+        ) })
+      ] })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": "dashboard-balances-breakdown-vertical", className: "lg:hidden w-full mt-8", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center w-full mb-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Text_default, { children: "Cripto" }),
+      /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: isLoadingBalances ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-5 bg-[var(--deframe-widget-color-bg-muted)] rounded w-32 animate-pulse" }, "skeleton-crypto") : /* @__PURE__ */ jsxRuntime.jsx(
+        framerMotion.motion.div,
+        {
+          initial: { opacity: 0, x: 10 },
+          animate: { opacity: 1, x: 0 },
+          exit: { opacity: 0, x: -10 },
+          transition: { duration: 0.4, delay: 0.1, ease: "easeOut" },
+          children: /* @__PURE__ */ jsxRuntime.jsx(Text_default, { children: formattedTokenPositions })
+        },
+        "crypto-value"
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center w-full", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Text_default, { children: "Investimentos" }),
+      /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: isLoadingBalances ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-5 bg-[var(--deframe-widget-color-bg-muted)] rounded w-32 animate-pulse" }, "skeleton-earn") : /* @__PURE__ */ jsxRuntime.jsx(
+        framerMotion.motion.div,
+        {
+          initial: { opacity: 0, x: 10 },
+          animate: { opacity: 1, x: 0 },
+          exit: { opacity: 0, x: -10 },
+          transition: { duration: 0.4, delay: 0.2, ease: "easeOut" },
+          children: /* @__PURE__ */ jsxRuntime.jsx(Text_default, { children: formattedEarnPositions })
+        },
+        "earn-value"
+      ) })
+    ] })
+  ] });
+};
+var DashboardTokenListView = ({
+  tokens,
+  isLoading,
+  className,
+  showCard = true,
+  onDepositClick
+}) => {
+  const [searchQuery, setSearchQuery] = React6.useState("");
+  const filteredTokens = tokens.filter((token) => {
+    if (isNaN(token.amountInUSD) || token.amountInUSD < 0.01) return false;
+    if (!searchQuery) return true;
+    const query = searchQuery.toLowerCase();
+    return token.symbol.toLowerCase().includes(query) || token.name.toLowerCase().includes(query);
+  });
+  const content = /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": "dashboard-token-list", children: [
+    showCard && /* @__PURE__ */ jsxRuntime.jsx(TextBody, { className: "mb-6", children: "Seus tokens" }),
+    !isLoading && tokens.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "dashboard-token-search", className: `${showCard ? "mb-6" : "mt-6 mb-6"} h-14 bg-[var(--deframe-widget-color-bg-raised)] flex items-center justify-center w-full border border-[var(--deframe-widget-color-border-default)] px-2 py-0.5 rounded gap-1`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex items-center relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Input2,
+        {
+          "data-test-id": "dashboard-token-search-input",
+          type: "text",
+          placeholder: "Pesquisar aqui...",
+          value: searchQuery,
+          onChange: (e) => setSearchQuery(e.target.value),
+          className: "w-full h-full p-4 pr-12"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineSearch, { className: "w-4 h-4 text-[var(--deframe-widget-color-text-secondary)] absolute right-4" })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 p-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant: "circle", width: "40px", height: "40px", shimmer: true }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "80px", height: "16px", shimmer: true, className: "mb-2" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "128px", height: "12px", shimmer: true })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "64px", height: "16px", shimmer: true })
+    ] }, i)) }) : filteredTokens.length > 0 ? filteredTokens.map((token, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      framerMotion.motion.div,
+      {
+        initial: { opacity: 0, y: 20 },
+        animate: { opacity: 1, y: 0 },
+        transition: {
+          duration: 0.4,
+          delay: index * 0.1,
+          ease: "easeOut"
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          ListItem,
+          {
+            "data-test-id": `dashboard-token-item-${token.symbol.toLowerCase()}`,
+            containerClassName: `p-2 ${index > 0 ? "mt-4" : ""} bg-[var(--deframe-widget-color-bg-raised)] cursor-pointer`,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-10 h-10", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "img",
+                  {
+                    src: token.logoUrl,
+                    alt: token.name,
+                    className: "w-10 h-10 rounded-full object-cover"
+                  }
+                ),
+                token.networkLogoUrl && /* @__PURE__ */ jsxRuntime.jsx(
+                  "img",
+                  {
+                    src: token.networkLogoUrl,
+                    alt: token.networkName || "",
+                    className: "absolute -bottom-1 border border-bg-default p-px -right-1 w-6 h-6 rounded-full object-cover bg-white"
+                  }
+                )
+              ] }) }),
+              /* @__PURE__ */ jsxRuntime.jsxs(ListItemContent, { className: "ml-4", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(TextBody, { children: token.symbol }),
+                /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[var(--deframe-widget-color-text-secondary)]", children: token.name })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(ListItemRightSide, { className: "flex flex-col items-end", children: token.isUpdating ? /* @__PURE__ */ jsxRuntime.jsx(LoadingDots, {}) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(TextBody, { className: "font-semibold", children: token.formattedFiatValue }),
+                /* @__PURE__ */ jsxRuntime.jsxs(TextBody, { variant: "text-small", className: "text-[var(--deframe-widget-color-text-secondary)]", children: [
+                  token.formattedAmount,
+                  " ",
+                  token.symbol
+                ] })
+              ] }) })
+            ]
+          }
+        )
+      },
+      token.id || index
+    )) : /* @__PURE__ */ jsxRuntime.jsx(
+      framerMotion.motion.div,
+      {
+        initial: { opacity: 0, y: 20 },
+        animate: { opacity: 1, y: 0 },
+        transition: { duration: 0.4 },
+        className: "flex flex-col items-center justify-center",
+        children: searchQuery ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-20 h-20 rounded-full bg-[var(--deframe-widget-color-bg-muted)] flex items-center justify-center mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineSearch, { className: "w-10 h-10 text-[var(--deframe-widget-color-text-secondary)]" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { className: "text-center mb-4", children: "Nenhum token encontrado" }),
+          /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-large", className: "text-center mb-4", children: "Tente buscar por outro nome ou s\xEDmbolo." })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-20 h-20 rounded-full bg-[var(--deframe-widget-color-bg-muted)] flex items-center justify-center mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(md.MdQrCodeScanner, { className: "w-10 h-10 text-[var(--deframe-widget-color-text-secondary)]" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { className: "text-center mb-4", children: "Deposite e comece a usar a wallet" }),
+          /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-large", className: "text-center mb-4", children: "Use Pix para adicionar saldo instantaneamente na sua carteira." }),
+          onDepositClick && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: onDepositClick, children: /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { children: "Depositar via Pix" }) })
+        ] })
+      }
+    ) })
+  ] });
+  if (showCard) {
+    return /* @__PURE__ */ jsxRuntime.jsx(DashboardCard, { className: `p-6 bg-[var(--deframe-widget-color-bg-subtle)] ${className || ""}`, children: content });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: content });
+};
+var DashboardStrategiesListView = ({
+  strategies,
+  isLoading,
+  searchQuery = "",
+  limit = 5,
+  onStrategyClick
+}) => {
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "dashboard-strategies-list-loading", className: "space-y-4", children: Array.from({ length: limit }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 p-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-full bg-[var(--deframe-widget-color-bg-muted)] animate-pulse" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 bg-[var(--deframe-widget-color-bg-muted)] rounded w-20 mb-2 animate-pulse" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 bg-[var(--deframe-widget-color-bg-muted)] rounded w-32 animate-pulse" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 bg-[var(--deframe-widget-color-bg-muted)] rounded w-16 animate-pulse" })
+    ] }, i)) });
+  }
+  const query = searchQuery.trim().toLowerCase();
+  const filteredStrategies = strategies.filter((strategy) => {
+    if (!query) return true;
+    return strategy.assetName.toLowerCase().includes(query) || strategy.protocol.toLowerCase().includes(query);
+  });
+  const displayStrategies = filteredStrategies.slice(0, limit);
+  if (displayStrategies.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      framerMotion.motion.div,
+      {
+        initial: { opacity: 0, y: 20 },
+        animate: { opacity: 1, y: 0 },
+        transition: { duration: 0.4 },
+        className: "flex flex-col items-center justify-center py-12",
+        children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { className: "text-[var(--deframe-widget-color-text-secondary)]", children: searchQuery ? "Nenhuma estrat\xE9gia encontrada" : "Nenhum investimento encontrado" })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "dashboard-strategies-list", children: displayStrategies.map((strategy, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    framerMotion.motion.div,
+    {
+      initial: { opacity: 0, y: 20 },
+      animate: { opacity: 1, y: 0 },
+      transition: {
+        duration: 0.4,
+        delay: index * 0.1,
+        ease: "easeOut"
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        ListItem,
+        {
+          containerClassName: `${index > 0 ? "mt-4" : ""}`,
+          onClick: () => onStrategyClick(strategy.id),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                src: strategy.logoUrl,
+                alt: strategy.assetName,
+                className: "w-10 h-10 rounded-full object-cover"
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(ListItemContent, { className: "ml-4", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(TextBody, { children: [
+                "Rendimento ",
+                strategy.assetName
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[var(--deframe-widget-color-text-secondary)]", children: strategy.protocol })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(ListItemRightSide, { className: "flex flex-col items-end", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(TextBody, { className: "text-[var(--deframe-widget-color-text-secondary)]" }),
+              strategy.apyFormatted !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs(TextBody, { variant: "text-small", className: "text-[var(--deframe-widget-color-brand-primary)]", children: [
+                "APY ",
+                strategy.apyFormatted
+              ] })
+            ] })
+          ]
+        }
+      )
+    },
+    strategy.id || index
+  )) });
+};
+var DashboardPortfolioView = ({
+  formattedTotalValue,
+  isLoading,
+  onDepositClick,
+  onWithdrawClick,
+  onSwapClick,
+  formattedTokenPositions,
+  formattedEarnPositions
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(DashboardCard, { className: "p-6 bg-[var(--deframe-widget-color-bg-subtle)]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col w-full h-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TextBody, { className: "mb-6", children: "Portf\xF3lio" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 mb-2", children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 bg-[var(--deframe-widget-color-bg-muted)] rounded w-64 animate-pulse" }, "skeleton") : /* @__PURE__ */ jsxRuntime.jsx(
+      framerMotion.motion.p,
+      {
+        initial: { opacity: 0, y: 10 },
+        animate: { opacity: 1, y: 0 },
+        exit: { opacity: 0, y: -10 },
+        transition: { duration: 0.5, ease: "easeOut" },
+        className: "text-2xl font-bold text-[var(--deframe-widget-color-text-primary)] flex items-center gap-2",
+        children: formattedTotalValue
+      },
+      "value"
+    ) }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex lg:hidden flex-row gap-2 sm:gap-4 mt-6 w-full", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Link2__default.default, { "data-testid": "dashboard-quick-action-deposit-mobile", href: "/dashboard/deposit", className: "flex-1 min-w-0 cursor-pointer", onClick: onDepositClick, children: /* @__PURE__ */ jsxRuntime.jsxs(PrimaryButton, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineArrowUpward, { className: "w-4 h-4 shrink-0" }),
+        "Depositar"
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Link2__default.default, { "data-testid": "dashboard-quick-action-withdraw-mobile", href: "/dashboard/withdraw", className: "flex-1 min-w-0 cursor-pointer", onClick: onWithdrawClick, children: /* @__PURE__ */ jsxRuntime.jsxs(PrimaryButton, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineArrowDownward, { className: "w-4 h-4 shrink-0" }),
+        "Sacar"
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Link2__default.default, { "data-testid": "dashboard-quick-action-swap-mobile", href: "/dashboard/swap", className: "flex-1 min-w-0 cursor-pointer", onClick: onSwapClick, children: /* @__PURE__ */ jsxRuntime.jsxs(PrimaryButton, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineSwapHoriz, { className: "w-4 h-4 shrink-0" }),
+        "Trocar"
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+      DashboardBalancesBreakdown,
+      {
+        isLoadingBalances: isLoading,
+        formattedTokenPositions,
+        formattedEarnPositions,
+        layout: "vertical"
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden lg:block", children: /* @__PURE__ */ jsxRuntime.jsx(
+      DashboardBalancesBreakdown,
+      {
+        isLoadingBalances: isLoading,
+        formattedTokenPositions,
+        formattedEarnPositions,
+        layout: "horizontal"
+      }
+    ) })
+  ] }) });
+};
+var DashboardTokensView = ({
+  sortedRegularTokens,
+  regularTokens,
+  isLoadingBalances,
+  activeTab,
+  onTabChange,
+  strategiesContent
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DashboardTokenListView, { tokens: sortedRegularTokens, isLoading: isLoadingBalances, className: "hidden lg:block" }),
+    /* @__PURE__ */ jsxRuntime.jsx(DashboardCard, { className: "lg:hidden p-6 bg-[var(--deframe-widget-color-bg-subtle)]", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      Tabs,
+      {
+        value: activeTab,
+        onValueChange: (value) => onTabChange(value),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(TabsList, { className: "w-full mb-3 flex justify-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { value: "tokens", children: "Cripto" }),
+            /* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { value: "strategies", children: "Investimentos" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(TabsContent, { value: "tokens", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(TextBody, { className: "mb-6", children: "Seus tokens" }),
+            /* @__PURE__ */ jsxRuntime.jsx(DashboardTokenListView, { tokens: regularTokens, isLoading: isLoadingBalances, showCard: false })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "strategies", children: strategiesContent })
+        ]
+      }
+    ) })
+  ] });
+};
+var DashboardRecentTransactionsView = ({
+  isLoading,
+  isEmpty,
+  transactions,
+  onViewAllClick
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(DashboardCard, { className: "p-6 bg-[var(--deframe-widget-color-bg-subtle)]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-start", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TextBody, { className: "mb-6", children: "Transa\xE7\xF5es recentes" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Link2__default.default, { href: "/dashboard/history", onClick: onViewAllClick, children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { className: "text-[var(--deframe-widget-color-brand-primary)] cursor-pointer hover:underline", children: "Ver todas" }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2 mt-[-16px]", children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 p-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant: "circle", width: "40px", height: "40px", shimmer: true }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "160px", height: "14px", shimmer: true, className: "mb-2" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "220px", height: "12px", shimmer: true })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "96px", height: "14px", shimmer: true })
+    ] }, i)) }) : isEmpty ? /* @__PURE__ */ jsxRuntime.jsx(DashboardTransactionsPlaceholder, {}) : transactions.map((item) => {
+      const MainIcon = item.mainIcon;
+      const TypeIcon = item.typeIcon;
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        ListItem,
+        {
+          containerClassName: "p-2 mt-4 bg-[var(--deframe-widget-color-bg-secondary)] cursor-pointer",
+          onClick: () => item.onClick(),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-10 h-10 rounded-full ${item.iconBgColor} flex items-center justify-center`, children: /* @__PURE__ */ jsxRuntime.jsx(MainIcon, { className: `${item.iconColor}`, size: 20 }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -bottom-1 -right-1 w-5 h-5 rounded-full bg-[var(--deframe-widget-color-bg-secondary)] flex items-center justify-center border border-[var(--deframe-widget-color-border-secondary)]", children: /* @__PURE__ */ jsxRuntime.jsx(TypeIcon, { className: `${item.iconColor}`, size: 12 }) })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(ListItemContent, { className: "ml-4", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: item.formattedDate }),
+              /* @__PURE__ */ jsxRuntime.jsx(TextBody, { className: "text-xs text-[var(--deframe-widget-color-text-secondary)]", children: item.label })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(ListItemRightSide, { className: "text-right", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: item.rightPrimary }),
+              /* @__PURE__ */ jsxRuntime.jsx(TextBody, { className: "text-xs text-[var(--deframe-widget-color-text-secondary)]", children: item.rightSecondary })
+            ] })
+          ]
+        },
+        item.id
+      );
+    }) })
+  ] }) });
+};
+var DashboardInvestmentOpportunitiesView = ({
+  isLoadingBalances,
+  formattedTotalProfit,
+  strategiesContent,
+  onViewAllStrategiesClick
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(DashboardCard, { className: "hidden lg:block p-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-large", children: "Oportunidades de investimento" }),
+    /* @__PURE__ */ jsxRuntime.jsxs(DashboardCard, { className: "bg-[var(--deframe-widget-color-bg-secondary)] flex flex-col space-y-2 p-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TextBody, { children: "Rendimentos" }),
+      isLoadingBalances ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-baseline gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "80px", height: "24px", shimmer: true }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-baseline gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-large", children: formattedTotalProfit }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col", children: strategiesContent }),
+    /* @__PURE__ */ jsxRuntime.jsx(Link2__default.default, { href: "/dashboard/earn", className: "w-full", onClick: onViewAllStrategiesClick, children: /* @__PURE__ */ jsxRuntime.jsx(SecondaryButton, { children: "Ver todas as estrat\xE9gias" }) })
+  ] }) });
+};
+var DashboardView = ({
+  portfolio,
+  tokens,
+  recentTransactions,
+  investmentOpportunities,
+  quickActions,
+  banner
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "dashboard-page", className: "w-full relative overflow-hidden mx-auto rounded p-6 lg:p-12", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6 max-w-[1400px] mx-auto", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lg:col-span-2 space-y-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DashboardPortfolioView, __spreadValues({}, portfolio)),
+      /* @__PURE__ */ jsxRuntime.jsx(DashboardCard, { "data-testid": "dashboard-quick-actions-card", className: "hidden lg:block p-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(TextBody, { className: "mb-6", children: "A\xE7\xF5es r\xE1pidas" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row gap-4 w-full", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Link2__default.default, { "data-testid": "dashboard-quick-action-deposit", href: "/dashboard/deposit", className: "flex-1 min-w-0 cursor-pointer", onClick: () => quickActions.onDepositClick(), children: /* @__PURE__ */ jsxRuntime.jsxs(PrimaryButton, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineArrowUpward, { className: "w-4 h-4 shrink-0" }),
+            "Depositar"
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(Link2__default.default, { "data-testid": "dashboard-quick-action-withdraw", href: "/dashboard/withdraw", className: "flex-1 min-w-0 cursor-pointer", onClick: () => quickActions.onWithdrawClick(), children: /* @__PURE__ */ jsxRuntime.jsxs(PrimaryButton, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineArrowDownward, { className: "w-4 h-4 shrink-0" }),
+            "Sacar"
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(Link2__default.default, { "data-testid": "dashboard-quick-action-swap", href: "/dashboard/swap", className: "flex-1 min-w-0 cursor-pointer", onClick: () => quickActions.onSwapClick(), children: /* @__PURE__ */ jsxRuntime.jsxs(PrimaryButton, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineSwapHoriz, { className: "w-4 h-4 shrink-0" }),
+            "Trocar"
+          ] }) })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full bg-[#002608] rounded shadow-[0px_1px_3px_0px_rgba(0,0,0,0.1)] flex items-center justify-between cursor-pointer", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          src: banner.imageUrl,
+          alt: banner.altText,
+          className: "w-full h-[90%] object-cover rounded"
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(DashboardTokensView, __spreadValues({}, tokens)),
+      /* @__PURE__ */ jsxRuntime.jsx(DashboardRecentTransactionsView, __spreadValues({}, recentTransactions))
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:col-span-1 space-y-6", children: /* @__PURE__ */ jsxRuntime.jsx(DashboardInvestmentOpportunitiesView, __spreadValues({}, investmentOpportunities)) })
+  ] }) });
+};
 
 exports.ActionButton = ActionButton;
 exports.ActionSheet = ActionSheet;
@@ -9132,6 +9599,16 @@ exports.ConfirmSwapButtonView = ConfirmSwapButtonView;
 exports.ConfirmSwapButtonViewSimple = ConfirmSwapButtonViewSimple;
 exports.ConnectWalletList = ConnectWalletList;
 exports.Currency = Currency;
+exports.DashboardBalancesBreakdown = DashboardBalancesBreakdown;
+exports.DashboardCard = DashboardCard;
+exports.DashboardInvestmentOpportunitiesView = DashboardInvestmentOpportunitiesView;
+exports.DashboardPortfolioView = DashboardPortfolioView;
+exports.DashboardRecentTransactionsView = DashboardRecentTransactionsView;
+exports.DashboardStrategiesListView = DashboardStrategiesListView;
+exports.DashboardTokenListView = DashboardTokenListView;
+exports.DashboardTokensView = DashboardTokensView;
+exports.DashboardTransactionsPlaceholder = DashboardTransactionsPlaceholder;
+exports.DashboardView = DashboardView;
 exports.DeframeComponentsProvider = DeframeComponentsProvider;
 exports.DetailsHeader = DetailsHeader;
 exports.EarnAmountInputView = EarnAmountInputView;