@deframe-sdk/components 0.1.21 → 0.1.23

package/dist/index.mjs

@@ -4,9 +4,10 @@ import { HiXMark, HiChevronUp, HiChevronDown, HiChevronLeft, HiOutlineClock, HiA
 import * as React6 from 'react';
 import React6__default, { useState, useEffect, useRef, useCallback } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import { MdClose, MdOutlineSearch, MdOutlineSearchOff, MdOutlineSwapHoriz, MdHistory, MdOutlineSwapVert, MdArrowRight, MdArrowDropDown, MdCheckCircleOutline, MdErrorOutline, MdWarningAmber, MdInfoOutline, MdArrowUpward, MdArrowDownward } from 'react-icons/md';
+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';
 import { PiClockCountdownBold } from 'react-icons/pi';
+import Link2 from 'next/link';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -7428,7 +7429,7 @@ var variantStyles = {
 var Label = ({ children, variant = "primary", className }) => {
   return /* @__PURE__ */ jsx("div", { className: twMerge(variantStyles[variant], className), children });
 };
-var HistoryItemSkeleton = () => /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: "flex items-center gap-sm flex-1 min-w-0", children: [
     /* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded-xl bg-bg-muted dark:bg-bg-muted-dark animate-pulse flex-shrink-0" }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-xs flex-1 min-w-0", children: [
@@ -7483,8 +7484,7 @@ var StrategyGridCard = ({
     "data-test-id": "strategy-grid-card",
     className: 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
     ),
@@ -7554,7 +7554,7 @@ var EarnInvestmentSummaryView = ({
   processingBadgeTitle,
   className
 }) => {
-  return /* @__PURE__ */ jsxs("section", { className: twMerge("flex flex-col gap-md p-lg bg-bg-subtle dark:bg-bg-subtle-dark rounded", className), children: [
+  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,
@@ -7593,7 +7593,7 @@ var EarnInvestedSectionView = ({
     {
       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-secondary)] rounded-[var(--deframe-widget-size-radius-sm)]",
+        "bg-[var(--deframe-widget-color-bg-subtle)] rounded-[var(--deframe-widget-size-radius-sm)]",
         className
       ),
       children: [
@@ -7606,8 +7606,7 @@ var EarnInvestedSectionView = ({
               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-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)]"
               ),
@@ -7659,7 +7658,7 @@ var EarnExploreGridView = ({
       {
         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-secondary)] rounded-[var(--deframe-widget-size-radius-sm)]",
+          "bg-[var(--deframe-widget-color-bg-subtle)] rounded-[var(--deframe-widget-size-radius-sm)]",
           className
         ),
         children: [
@@ -7678,7 +7677,7 @@ var EarnExploreGridView = ({
       {
         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-secondary)] rounded-[var(--deframe-widget-size-radius-sm)]",
+          "bg-[var(--deframe-widget-color-bg-subtle)] rounded-[var(--deframe-widget-size-radius-sm)]",
           className
         ),
         children: [
@@ -7693,7 +7692,7 @@ var EarnExploreGridView = ({
     {
       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-secondary)] rounded-[var(--deframe-widget-size-radius-sm)]",
+        "bg-[var(--deframe-widget-color-bg-subtle)] rounded-[var(--deframe-widget-size-radius-sm)]",
         className
       ),
       children: [
@@ -7742,7 +7741,7 @@ var EarnRecentTransactionsView = ({
     {
       className: 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: [
@@ -9092,7 +9091,472 @@ var EarnWithdrawFailedView = ({
     }
   );
 };
+var DashboardCard = ({ children, className }) => {
+  return /* @__PURE__ */ jsx("div", { "data-test-id": "dashboard-card", className: twMerge("bg-[var(--deframe-widget-color-bg-subtle)] rounded", className), children });
+};
+var DashboardTransactionsPlaceholder = () => {
+  return /* @__PURE__ */ jsxs("div", { "data-test-id": "dashboard-transactions-placeholder", className: "flex flex-col items-center justify-center py-16 gap-4", children: [
+    /* @__PURE__ */ jsx("div", { className: "w-20 h-20 bg-[var(--deframe-widget-color-bg-muted)] rounded-full flex justify-center items-center", children: /* @__PURE__ */ jsx(PiClockCountdownBold, { className: "w-10 h-10 text-[var(--deframe-widget-color-text-tertiary)]" }) }),
+    /* @__PURE__ */ jsx(TextHeading, { variant: "h3", children: "Nenhuma transa\xE7\xE3o ainda" }),
+    /* @__PURE__ */ 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__ */ 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__ */ 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,
+          {
+            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__ */ jsx(Text_default, { children: formattedTokenPositions })
+          },
+          "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__ */ 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,
+          {
+            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__ */ jsx(Text_default, { children: formattedEarnPositions })
+          },
+          "earn-value"
+        ) })
+      ] })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { "data-test-id": "dashboard-balances-breakdown-vertical", className: "lg:hidden w-full mt-8", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center w-full mb-6", 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" }, "skeleton-crypto") : /* @__PURE__ */ jsx(
+        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__ */ jsx(Text_default, { children: formattedTokenPositions })
+        },
+        "crypto-value"
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center w-full", 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" }, "skeleton-earn") : /* @__PURE__ */ jsx(
+        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__ */ jsx(Text_default, { children: formattedEarnPositions })
+        },
+        "earn-value"
+      ) })
+    ] })
+  ] });
+};
+var DashboardTokenListView = ({
+  tokens,
+  isLoading,
+  className,
+  showCard = true,
+  onDepositClick
+}) => {
+  const [searchQuery, setSearchQuery] = 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__ */ jsxs("div", { "data-test-id": "dashboard-token-list", children: [
+    showCard && /* @__PURE__ */ jsx(TextBody, { className: "mb-6", children: "Seus tokens" }),
+    !isLoading && tokens.length > 0 && /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex-1 flex items-center relative", children: [
+      /* @__PURE__ */ 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__ */ jsx(MdOutlineSearch, { className: "w-4 h-4 text-[var(--deframe-widget-color-text-secondary)] absolute right-4" })
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { children: isLoading ? /* @__PURE__ */ jsx("div", { className: "space-y-4", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 p-2", children: [
+      /* @__PURE__ */ jsx(Skeleton, { variant: "circle", width: "40px", height: "40px", shimmer: true }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+        /* @__PURE__ */ jsx(Skeleton, { width: "80px", height: "16px", shimmer: true, className: "mb-2" }),
+        /* @__PURE__ */ jsx(Skeleton, { width: "128px", height: "12px", shimmer: true })
+      ] }),
+      /* @__PURE__ */ jsx(Skeleton, { width: "64px", height: "16px", shimmer: true })
+    ] }, i)) }) : filteredTokens.length > 0 ? filteredTokens.map((token, index) => /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: { opacity: 0, y: 20 },
+        animate: { opacity: 1, y: 0 },
+        transition: {
+          duration: 0.4,
+          delay: index * 0.1,
+          ease: "easeOut"
+        },
+        children: /* @__PURE__ */ 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__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsxs("div", { className: "relative w-10 h-10", children: [
+                /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: token.logoUrl,
+                    alt: token.name,
+                    className: "w-10 h-10 rounded-full object-cover"
+                  }
+                ),
+                token.networkLogoUrl && /* @__PURE__ */ 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__ */ jsxs(ListItemContent, { className: "ml-4", children: [
+                /* @__PURE__ */ jsx(TextBody, { children: token.symbol }),
+                /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-[var(--deframe-widget-color-text-secondary)]", children: token.name })
+              ] }),
+              /* @__PURE__ */ jsx(ListItemRightSide, { className: "flex flex-col items-end", children: token.isUpdating ? /* @__PURE__ */ jsx(LoadingDots, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(TextBody, { className: "font-semibold", children: token.formattedFiatValue }),
+                /* @__PURE__ */ jsxs(TextBody, { variant: "text-small", className: "text-[var(--deframe-widget-color-text-secondary)]", children: [
+                  token.formattedAmount,
+                  " ",
+                  token.symbol
+                ] })
+              ] }) })
+            ]
+          }
+        )
+      },
+      token.id || index
+    )) : /* @__PURE__ */ jsx(
+      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__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ 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__ */ jsx(MdOutlineSearch, { className: "w-10 h-10 text-[var(--deframe-widget-color-text-secondary)]" }) }),
+          /* @__PURE__ */ jsx(TextHeading, { className: "text-center mb-4", children: "Nenhum token encontrado" }),
+          /* @__PURE__ */ jsx(TextBody, { variant: "text-large", className: "text-center mb-4", children: "Tente buscar por outro nome ou s\xEDmbolo." })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ 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__ */ jsx(MdQrCodeScanner, { className: "w-10 h-10 text-[var(--deframe-widget-color-text-secondary)]" }) }),
+          /* @__PURE__ */ jsx(TextHeading, { className: "text-center mb-4", children: "Deposite e comece a usar a wallet" }),
+          /* @__PURE__ */ jsx(TextBody, { variant: "text-large", className: "text-center mb-4", children: "Use Pix para adicionar saldo instantaneamente na sua carteira." }),
+          onDepositClick && /* @__PURE__ */ jsx("button", { type: "button", onClick: onDepositClick, children: /* @__PURE__ */ jsx(PrimaryButton, { children: "Depositar via Pix" }) })
+        ] })
+      }
+    ) })
+  ] });
+  if (showCard) {
+    return /* @__PURE__ */ jsx(DashboardCard, { className: `p-6 bg-[var(--deframe-widget-color-bg-subtle)] ${className || ""}`, children: content });
+  }
+  return /* @__PURE__ */ jsx("div", { className, children: content });
+};
+var DashboardStrategiesListView = ({
+  strategies,
+  isLoading,
+  searchQuery = "",
+  limit = 5,
+  onStrategyClick
+}) => {
+  if (isLoading) {
+    return /* @__PURE__ */ jsx("div", { "data-test-id": "dashboard-strategies-list-loading", className: "space-y-4", children: Array.from({ length: limit }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 p-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded-full bg-[var(--deframe-widget-color-bg-muted)] animate-pulse" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+        /* @__PURE__ */ jsx("div", { className: "h-4 bg-[var(--deframe-widget-color-bg-muted)] rounded w-20 mb-2 animate-pulse" }),
+        /* @__PURE__ */ jsx("div", { className: "h-3 bg-[var(--deframe-widget-color-bg-muted)] rounded w-32 animate-pulse" })
+      ] }),
+      /* @__PURE__ */ 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__ */ jsx(
+      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__ */ jsx(TextBody, { className: "text-[var(--deframe-widget-color-text-secondary)]", children: searchQuery ? "Nenhuma estrat\xE9gia encontrada" : "Nenhum investimento encontrado" })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { "data-test-id": "dashboard-strategies-list", children: displayStrategies.map((strategy, index) => /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      initial: { opacity: 0, y: 20 },
+      animate: { opacity: 1, y: 0 },
+      transition: {
+        duration: 0.4,
+        delay: index * 0.1,
+        ease: "easeOut"
+      },
+      children: /* @__PURE__ */ jsxs(
+        ListItem,
+        {
+          containerClassName: `${index > 0 ? "mt-4" : ""}`,
+          onClick: () => onStrategyClick(strategy.id),
+          children: [
+            /* @__PURE__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: strategy.logoUrl,
+                alt: strategy.assetName,
+                className: "w-10 h-10 rounded-full object-cover"
+              }
+            ) }),
+            /* @__PURE__ */ jsxs(ListItemContent, { className: "ml-4", children: [
+              /* @__PURE__ */ jsxs(TextBody, { children: [
+                "Rendimento ",
+                strategy.assetName
+              ] }),
+              /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-[var(--deframe-widget-color-text-secondary)]", children: strategy.protocol })
+            ] }),
+            /* @__PURE__ */ jsxs(ListItemRightSide, { className: "flex flex-col items-end", children: [
+              /* @__PURE__ */ jsx(TextBody, { className: "text-[var(--deframe-widget-color-text-secondary)]" }),
+              strategy.apyFormatted !== void 0 && /* @__PURE__ */ 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__ */ jsx(DashboardCard, { className: "p-6 bg-[var(--deframe-widget-color-bg-subtle)]", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col w-full h-full", children: [
+    /* @__PURE__ */ jsx(TextBody, { className: "mb-6", children: "Portf\xF3lio" }),
+    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 mb-2", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: isLoading ? /* @__PURE__ */ jsx("div", { className: "h-8 bg-[var(--deframe-widget-color-bg-muted)] rounded w-64 animate-pulse" }, "skeleton") : /* @__PURE__ */ jsx(
+      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__ */ jsxs("div", { className: "flex lg:hidden flex-row gap-2 sm:gap-4 mt-6 w-full", children: [
+      /* @__PURE__ */ jsx(Link2, { "data-testid": "dashboard-quick-action-deposit-mobile", href: "/dashboard/deposit", className: "flex-1 min-w-0 cursor-pointer", onClick: 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-mobile", href: "/dashboard/withdraw", className: "flex-1 min-w-0 cursor-pointer", onClick: 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-mobile", href: "/dashboard/swap", className: "flex-1 min-w-0 cursor-pointer", onClick: onSwapClick, children: /* @__PURE__ */ jsxs(PrimaryButton, { children: [
+        /* @__PURE__ */ jsx(MdOutlineSwapHoriz, { className: "w-4 h-4 shrink-0" }),
+        "Trocar"
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "lg:hidden", children: /* @__PURE__ */ jsx(
+      DashboardBalancesBreakdown,
+      {
+        isLoadingBalances: isLoading,
+        formattedTokenPositions,
+        formattedEarnPositions,
+        layout: "vertical"
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: "hidden lg:block", children: /* @__PURE__ */ jsx(
+      DashboardBalancesBreakdown,
+      {
+        isLoadingBalances: isLoading,
+        formattedTokenPositions,
+        formattedEarnPositions,
+        layout: "horizontal"
+      }
+    ) })
+  ] }) });
+};
+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,
+        onValueChange: (value) => onTabChange(value),
+        children: [
+          /* @__PURE__ */ jsxs(TabsList, { className: "w-full mb-3 flex justify-center", children: [
+            /* @__PURE__ */ jsx(TabsTrigger, { value: "tokens", children: "Cripto" }),
+            /* @__PURE__ */ jsx(TabsTrigger, { value: "strategies", children: "Investimentos" })
+          ] }),
+          /* @__PURE__ */ jsxs(TabsContent, { value: "tokens", children: [
+            /* @__PURE__ */ jsx(TextBody, { className: "mb-6", children: "Seus tokens" }),
+            /* @__PURE__ */ jsx(DashboardTokenListView, { tokens: regularTokens, isLoading: isLoadingBalances, showCard: false })
+          ] }),
+          /* @__PURE__ */ jsx(TabsContent, { value: "strategies", children: strategiesContent })
+        ]
+      }
+    ) })
+  ] });
+};
+var DashboardRecentTransactionsView = ({
+  isLoading,
+  isEmpty,
+  transactions,
+  onViewAllClick
+}) => {
+  return /* @__PURE__ */ jsx(DashboardCard, { className: "p-6 bg-[var(--deframe-widget-color-bg-subtle)]", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-start", children: [
+      /* @__PURE__ */ jsx(TextBody, { className: "mb-6", children: "Transa\xE7\xF5es recentes" }),
+      /* @__PURE__ */ jsx(Link2, { href: "/dashboard/history", onClick: onViewAllClick, children: /* @__PURE__ */ jsx(TextBody, { className: "text-[var(--deframe-widget-color-brand-primary)] cursor-pointer hover:underline", children: "Ver todas" }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-2 mt-[-16px]", children: isLoading ? /* @__PURE__ */ jsx("div", { className: "space-y-4", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 p-2", children: [
+      /* @__PURE__ */ jsx(Skeleton, { variant: "circle", width: "40px", height: "40px", shimmer: true }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+        /* @__PURE__ */ jsx(Skeleton, { width: "160px", height: "14px", shimmer: true, className: "mb-2" }),
+        /* @__PURE__ */ jsx(Skeleton, { width: "220px", height: "12px", shimmer: true })
+      ] }),
+      /* @__PURE__ */ jsx(Skeleton, { width: "96px", height: "14px", shimmer: true })
+    ] }, i)) }) : isEmpty ? /* @__PURE__ */ jsx(DashboardTransactionsPlaceholder, {}) : transactions.map((item) => {
+      const MainIcon = item.mainIcon;
+      const TypeIcon = item.typeIcon;
+      return /* @__PURE__ */ jsxs(
+        ListItem,
+        {
+          containerClassName: "p-2 mt-4 bg-[var(--deframe-widget-color-bg-secondary)] 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__ */ jsxs(ListItemContent, { className: "ml-4", children: [
+              /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: item.formattedDate }),
+              /* @__PURE__ */ jsx(TextBody, { className: "text-xs text-[var(--deframe-widget-color-text-secondary)]", children: item.label })
+            ] }),
+            /* @__PURE__ */ jsxs(ListItemRightSide, { className: "text-right", children: [
+              /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: item.rightPrimary }),
+              /* @__PURE__ */ 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__ */ 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__ */ 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 }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: strategiesContent }),
+    /* @__PURE__ */ jsx(Link2, { href: "/dashboard/earn", className: "w-full", onClick: onViewAllStrategiesClick, children: /* @__PURE__ */ jsx(SecondaryButton, { children: "Ver todas as estrat\xE9gias" }) })
+  ] }) });
+};
+var DashboardView = ({
+  portfolio,
+  tokens,
+  recentTransactions,
+  investmentOpportunities,
+  quickActions,
+  banner
+}) => {
+  return /* @__PURE__ */ jsx("div", { "data-test-id": "dashboard-page", className: "w-full relative overflow-hidden mx-auto rounded p-6 lg:p-12", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6 max-w-[1400px] mx-auto", children: [
+    /* @__PURE__ */ jsxs("div", { className: "lg:col-span-2 space-y-6", children: [
+      /* @__PURE__ */ jsx(DashboardPortfolioView, __spreadValues({}, portfolio)),
+      /* @__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(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(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(MdOutlineSwapHoriz, { className: "w-4 h-4 shrink-0" }),
+            "Trocar"
+          ] }) })
+        ] })
+      ] }) }),
+      /* @__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,
+          className: "w-full h-[90%] object-cover rounded"
+        }
+      ) }),
+      /* @__PURE__ */ jsx(DashboardTokensView, __spreadValues({}, tokens)),
+      /* @__PURE__ */ jsx(DashboardRecentTransactionsView, __spreadValues({}, recentTransactions))
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "lg:col-span-1 space-y-6", children: /* @__PURE__ */ jsx(DashboardInvestmentOpportunitiesView, __spreadValues({}, investmentOpportunities)) })
+  ] }) });
+};
 
-export { ActionButton, ActionSheet, AddressDisplay, ApyRange, BackButton, BackgroundContainer, BannerNotification, ChooseANetworkView, ChooseAStrategyActionsheetView, ChooseAnAssetSwapView, ChooseNetworkAndAssetViewSimple, CloseButton_default as CloseButton, CollapsibleInfoRow, CollapsibleSection, ConfirmSwapButtonView, ConfirmSwapButtonViewSimple, ConnectWalletList, Currency, 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, 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 };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map