@deframe-sdk/components 0.1.22 → 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.
package/dist/index.mjs CHANGED
@@ -2,11 +2,12 @@ import { twMerge } from 'tailwind-merge';
2
2
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
3
3
  import { HiXMark, HiChevronUp, HiChevronDown, HiChevronLeft, HiOutlineClock, HiArrowRight, HiArrowLeft } from 'react-icons/hi2';
4
4
  import * as React6 from 'react';
5
- import React6__default, { useState, useEffect, useRef, useCallback } from 'react';
5
+ import React6__default, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
6
6
  import { motion, AnimatePresence } from 'framer-motion';
7
- import { MdClose, MdOutlineSearch, MdOutlineSearchOff, MdOutlineSwapHoriz, MdHistory, MdOutlineSwapVert, MdArrowRight, MdArrowDropDown, MdCheckCircleOutline, MdErrorOutline, MdWarningAmber, MdInfoOutline, MdArrowUpward, MdArrowDownward } from 'react-icons/md';
7
+ import { MdClose, MdOutlineSearch, MdOutlineSearchOff, MdOutlineSwapHoriz, MdHistory, MdOutlineSwapVert, MdArrowRight, MdArrowDropDown, MdQrCodeScanner, MdOutlineArrowUpward, MdOutlineArrowDownward, MdCheckCircleOutline, MdErrorOutline, MdWarningAmber, MdInfoOutline, MdArrowUpward, MdArrowDownward } from 'react-icons/md';
8
8
  import { IoAlertCircleOutline, IoTimeOutline, IoCheckmarkOutline } from 'react-icons/io5';
9
9
  import { PiClockCountdownBold } from 'react-icons/pi';
10
+ import Link2 from 'next/link';
10
11
 
11
12
  var __defProp = Object.defineProperty;
12
13
  var __defProps = Object.defineProperties;
@@ -7418,6 +7419,45 @@ var SwapWidgetFallbackView = ({
7418
7419
  }
7419
7420
  );
7420
7421
  };
7422
+ var Chip = ({
7423
+ label,
7424
+ selected = false,
7425
+ onClick,
7426
+ className
7427
+ }) => {
7428
+ const baseStyles = [
7429
+ "h-8 px-4 rounded-sm",
7430
+ "flex items-center justify-center gap-2",
7431
+ "text-xs font-normal font-poppins leading-5",
7432
+ "transition-colors duration-200 cursor-pointer"
7433
+ ].join(" ");
7434
+ 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)]";
7435
+ return /* @__PURE__ */ jsx(
7436
+ "button",
7437
+ {
7438
+ type: "button",
7439
+ onClick,
7440
+ className: twMerge(baseStyles, selectedStyles, className),
7441
+ children: label
7442
+ }
7443
+ );
7444
+ };
7445
+ var ChipGroup = ({
7446
+ options,
7447
+ selected,
7448
+ onSelect,
7449
+ className
7450
+ }) => {
7451
+ return /* @__PURE__ */ jsx("div", { className: twMerge("flex flex-row flex-wrap gap-2", className), children: options.map((option) => /* @__PURE__ */ jsx(
7452
+ Chip,
7453
+ {
7454
+ label: option.label,
7455
+ selected: selected === option.value,
7456
+ onClick: () => onSelect(option.value)
7457
+ },
7458
+ option.value
7459
+ )) });
7460
+ };
7421
7461
  var ApyRange = ({ children }) => {
7422
7462
  return /* @__PURE__ */ jsx("div", { className: "text-right justify-center text-text-highlight text-xs font-normal leading-4", children });
7423
7463
  };
@@ -7543,81 +7583,404 @@ var EarnBalanceCard = ({
7543
7583
  ] })
7544
7584
  ] });
7545
7585
  };
7546
- var EarnInvestmentSummaryView = ({
7547
- overviewDescription,
7548
- totalInvestedLabel,
7549
- totalInvestedValue,
7550
- totalReturnLabel,
7551
- totalReturnValue,
7552
- processingBadgeLabel,
7553
- processingBadgeTitle,
7554
- className
7586
+ var GroupLabel = ({ children }) => /* @__PURE__ */ jsx("div", { className: "text-text-secondary dark:text-text-secondary-dark text-sm font-medium font-poppins py-3", children });
7587
+ var GroupedStrategyListView = ({
7588
+ isLoading,
7589
+ loadingLabel,
7590
+ error,
7591
+ errorLabel,
7592
+ investedLabel,
7593
+ investedItems,
7594
+ bestPerformanceLabel,
7595
+ bestPerformanceItems,
7596
+ allStrategiesLabel,
7597
+ allStrategiesItems
7555
7598
  }) => {
7556
- return /* @__PURE__ */ jsxs("section", { className: twMerge("flex flex-col gap-md p-lg bg-[var(--deframe-widget-color-bg-subtle)] rounded", className), children: [
7557
- /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-text-secondary dark:text-text-secondary-dark", children: overviewDescription }),
7558
- /* @__PURE__ */ jsx(
7559
- WalletBalances,
7560
- {
7561
- cards: [
7562
- {
7563
- label: totalInvestedLabel,
7564
- value: totalInvestedValue,
7565
- badge: processingBadgeLabel ? /* @__PURE__ */ jsx(
7566
- ProcessingBadge,
7599
+ const hasInvested = investedItems.length > 0;
7600
+ const hasBestPerformance = bestPerformanceItems.length > 0;
7601
+ const hasAllStrategies = allStrategiesItems.length > 0;
7602
+ if (isLoading) {
7603
+ return /* @__PURE__ */ jsxs("div", { className: "flex items-center py-md", children: [
7604
+ loadingLabel,
7605
+ " ",
7606
+ /* @__PURE__ */ jsx(LoadingDots, {})
7607
+ ] });
7608
+ }
7609
+ if (error) {
7610
+ return /* @__PURE__ */ jsxs("div", { className: "p-4 text-center text-red-500", children: [
7611
+ errorLabel,
7612
+ ": ",
7613
+ error.message
7614
+ ] });
7615
+ }
7616
+ return /* @__PURE__ */ jsxs("div", { className: "w-full flex flex-col gap-sm flex-1 min-h-0 overflow-y-auto", children: [
7617
+ hasInvested && /* @__PURE__ */ jsxs(Fragment, { children: [
7618
+ /* @__PURE__ */ jsx(GroupLabel, { children: investedLabel }),
7619
+ /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-sm", children: investedItems.map((item) => /* @__PURE__ */ jsxs(
7620
+ ListItem,
7621
+ {
7622
+ onClick: () => item.onClick(),
7623
+ children: [
7624
+ /* @__PURE__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsx(
7625
+ "img",
7567
7626
  {
7568
- label: processingBadgeLabel,
7569
- title: processingBadgeTitle
7627
+ src: item.logoUrl,
7628
+ alt: item.subtitle,
7629
+ className: "w-10 h-10 rounded-full"
7570
7630
  }
7571
- ) : void 0
7572
- },
7573
- { label: totalReturnLabel, value: totalReturnValue }
7574
- ],
7575
- variant: "raised",
7576
- className: "grid grid-cols-2 gap-md !mt-0"
7631
+ ) }),
7632
+ /* @__PURE__ */ jsxs(ListItemContent, { children: [
7633
+ /* @__PURE__ */ jsx(TextBody, { children: item.title }),
7634
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: item.subtitle })
7635
+ ] }),
7636
+ /* @__PURE__ */ jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-row justify-between items-center", children: [
7637
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end", children: [
7638
+ /* @__PURE__ */ jsx(TextBody, { children: item.balanceFormatted }),
7639
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: item.profitFormatted })
7640
+ ] }),
7641
+ /* @__PURE__ */ jsx(MdArrowRight, { className: "w-6 h-6" })
7642
+ ] }) })
7643
+ ]
7644
+ },
7645
+ `invested-${item.id}`
7646
+ )) })
7647
+ ] }),
7648
+ hasBestPerformance && /* @__PURE__ */ jsxs(Fragment, { children: [
7649
+ /* @__PURE__ */ jsx(GroupLabel, { children: bestPerformanceLabel }),
7650
+ /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-sm", children: bestPerformanceItems.map((item) => /* @__PURE__ */ jsxs(
7651
+ ListItem,
7652
+ {
7653
+ onClick: () => item.onClick(),
7654
+ children: [
7655
+ /* @__PURE__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsx(
7656
+ "img",
7657
+ {
7658
+ src: item.logoUrl,
7659
+ alt: item.subtitle,
7660
+ className: "w-10 h-10 rounded-full"
7661
+ }
7662
+ ) }),
7663
+ /* @__PURE__ */ jsxs(ListItemContent, { children: [
7664
+ /* @__PURE__ */ jsx(TextBody, { children: item.title }),
7665
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: item.subtitle })
7666
+ ] }),
7667
+ /* @__PURE__ */ jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-row justify-between items-center", children: [
7668
+ /* @__PURE__ */ jsx(ApyRange, { children: item.apyFormatted }),
7669
+ /* @__PURE__ */ jsx(MdArrowRight, { className: "w-6 h-6" })
7670
+ ] }) })
7671
+ ]
7672
+ },
7673
+ `best-${item.id}`
7674
+ )) })
7675
+ ] }),
7676
+ hasAllStrategies && /* @__PURE__ */ jsxs(Fragment, { children: [
7677
+ /* @__PURE__ */ jsx(GroupLabel, { children: allStrategiesLabel }),
7678
+ /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-sm", children: allStrategiesItems.map((item) => /* @__PURE__ */ jsxs(
7679
+ ListItem,
7680
+ {
7681
+ onClick: () => item.onClick(),
7682
+ children: [
7683
+ /* @__PURE__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsx(
7684
+ "img",
7685
+ {
7686
+ src: item.logoUrl,
7687
+ alt: item.subtitle,
7688
+ className: "w-10 h-10 rounded-full"
7689
+ }
7690
+ ) }),
7691
+ /* @__PURE__ */ jsxs(ListItemContent, { children: [
7692
+ /* @__PURE__ */ jsx(TextBody, { children: item.title }),
7693
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: item.subtitle })
7694
+ ] }),
7695
+ /* @__PURE__ */ jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-row justify-between items-center", children: [
7696
+ /* @__PURE__ */ jsx(ApyRange, { children: item.apyFormatted }),
7697
+ /* @__PURE__ */ jsx(MdArrowRight, { className: "w-6 h-6" })
7698
+ ] }) })
7699
+ ]
7700
+ },
7701
+ `all-${item.id}`
7702
+ )) })
7703
+ ] })
7704
+ ] });
7705
+ };
7706
+ var DateLabel = ({ children }) => {
7707
+ return /* @__PURE__ */ jsx("div", { className: "text-text-sm-mobile font-poppins text-text-secondary dark:text-text-secondary-dark", children });
7708
+ };
7709
+ var ArrowBadge = ({ isDeposit }) => {
7710
+ 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" }) });
7711
+ };
7712
+ var TokenIconWithBadge2 = ({ src, alt, isDeposit }) => {
7713
+ const fallbackText = encodeURIComponent((alt || "TOK").slice(0, 3).toUpperCase());
7714
+ const fallbackSrc = `https://placehold.co/40x40?text=${fallbackText}`;
7715
+ const resolvedSrc = src || fallbackSrc;
7716
+ return /* @__PURE__ */ jsxs("div", { className: "relative flex-shrink-0", children: [
7717
+ /* @__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(
7718
+ "img",
7719
+ {
7720
+ src: resolvedSrc,
7721
+ alt,
7722
+ className: "w-full h-full object-cover",
7723
+ onError: (e) => {
7724
+ e.target.src = fallbackSrc;
7725
+ }
7577
7726
  }
7578
- )
7727
+ ) }),
7728
+ /* @__PURE__ */ jsx(ArrowBadge, { isDeposit })
7579
7729
  ] });
7580
7730
  };
7581
- var EarnInvestedSectionView = ({
7582
- sectionTitle,
7583
- items,
7584
- onItemClick,
7585
- className
7731
+ var SwapIconWithBadge = ({ src, alt }) => {
7732
+ const fallbackText = encodeURIComponent((alt || "TOK").slice(0, 3).toUpperCase());
7733
+ const fallbackSrc = `https://placehold.co/40x40?text=${fallbackText}`;
7734
+ const resolvedSrc = src || fallbackSrc;
7735
+ return /* @__PURE__ */ jsxs("div", { className: "relative flex-shrink-0", children: [
7736
+ /* @__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(
7737
+ "img",
7738
+ {
7739
+ src: resolvedSrc,
7740
+ alt,
7741
+ className: "w-full h-full object-cover",
7742
+ onError: (e) => {
7743
+ e.target.src = fallbackSrc;
7744
+ }
7745
+ }
7746
+ ) }),
7747
+ /* @__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" }) })
7748
+ ] });
7749
+ };
7750
+ var AmountDisplay = ({ amount, usdAmount }) => {
7751
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
7752
+ /* @__PURE__ */ jsx(Label, { className: "text-accent-sm-mobile whitespace-nowrap", children: amount }),
7753
+ usdAmount ? /* @__PURE__ */ jsx(Label, { variant: "secondary", className: "whitespace-nowrap", children: usdAmount }) : null
7754
+ ] });
7755
+ };
7756
+ var HistoryListView = ({
7757
+ groups,
7758
+ showLoadMore,
7759
+ onLoadMore,
7760
+ loadMoreLabel,
7761
+ itemClassName
7586
7762
  }) => {
7587
- if (items.length === 0) {
7763
+ if (groups.length === 0) {
7588
7764
  return null;
7589
7765
  }
7590
- return /* @__PURE__ */ jsxs(
7591
- "section",
7592
- {
7593
- className: twMerge(
7594
- "flex flex-col gap-[var(--deframe-widget-size-gap-md)] p-[var(--deframe-widget-size-padding-x-lg)]",
7595
- "bg-[var(--deframe-widget-color-bg-subtle)] rounded-[var(--deframe-widget-size-radius-sm)]",
7596
- className
7597
- ),
7598
- children: [
7599
- /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: sectionTitle }),
7600
- /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-md)]", children: items.map((item, index) => {
7601
- const isLast = index === items.length - 1;
7602
- return /* @__PURE__ */ jsxs(
7603
- "button",
7604
- {
7605
- type: "button",
7606
- onClick: () => onItemClick == null ? void 0 : onItemClick(item.strategyId),
7607
- className: twMerge(
7608
- "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)]",
7609
- "transition-colors cursor-pointer text-left w-full",
7610
- !isLast && "border-b border-[var(--deframe-widget-color-border-secondary)]"
7611
- ),
7612
- children: [
7613
- /* @__PURE__ */ jsx(
7614
- "img",
7615
- {
7616
- src: item.logoUrl,
7617
- alt: item.assetName,
7618
- className: "w-10 h-10 rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0"
7619
- }
7620
- ),
7766
+ return /* @__PURE__ */ jsxs("div", { className: "self-stretch flex flex-col gap-[16px]", children: [
7767
+ groups.map((group) => /* @__PURE__ */ jsxs("div", { className: "self-stretch flex flex-col gap-sm", children: [
7768
+ /* @__PURE__ */ jsx(DateLabel, { children: group.dateLabel }),
7769
+ group.items.map((item) => /* @__PURE__ */ jsxs(
7770
+ ListItem,
7771
+ {
7772
+ onClick: () => item.onClick(),
7773
+ containerClassName: twMerge("!rounded-xs !border-0 !min-h-[72px]", itemClassName),
7774
+ children: [
7775
+ /* @__PURE__ */ jsx(ListItemLeftSide, { children: item.isSwap ? /* @__PURE__ */ jsx(SwapIconWithBadge, { src: item.iconUrl, alt: item.iconAlt }) : /* @__PURE__ */ jsx(
7776
+ TokenIconWithBadge2,
7777
+ {
7778
+ src: item.iconUrl,
7779
+ alt: item.iconAlt,
7780
+ isDeposit: item.isDeposit
7781
+ }
7782
+ ) }),
7783
+ /* @__PURE__ */ jsxs(ListItemContent, { children: [
7784
+ /* @__PURE__ */ jsx(Label, { className: "text-text-lg-mobile", children: item.title }),
7785
+ /* @__PURE__ */ jsx(Label, { variant: "secondary", className: "text-text-tertiary dark:text-text-tertiary-dark", children: item.subtitle }),
7786
+ item.status === "PENDING" && item.statusLabel ? /* @__PURE__ */ jsx("div", { className: "mt-[6px]", children: /* @__PURE__ */ jsx(
7787
+ ProcessingBadge,
7788
+ {
7789
+ label: item.statusLabel,
7790
+ title: item.statusTitle,
7791
+ size: "compact"
7792
+ }
7793
+ ) }) : null
7794
+ ] }),
7795
+ /* @__PURE__ */ jsx(ListItemRightSide, { children: /* @__PURE__ */ jsx(AmountDisplay, { amount: item.amountFormatted, usdAmount: item.amountUsd }) })
7796
+ ]
7797
+ },
7798
+ item.id
7799
+ ))
7800
+ ] }, group.dateLabel)),
7801
+ showLoadMore && /* @__PURE__ */ jsx("div", { className: "flex justify-center pt-sm", children: /* @__PURE__ */ jsx(TertiaryButton, { onClick: onLoadMore, children: loadMoreLabel }) })
7802
+ ] });
7803
+ };
7804
+ var OverviewEarnWidgetTabSkeleton = () => {
7805
+ return /* @__PURE__ */ jsxs("div", { className: "w-full flex flex-col gap-md", children: [
7806
+ /* @__PURE__ */ jsx(Skeleton, { width: "100%", height: "40px", variant: "rect" }),
7807
+ /* @__PURE__ */ jsxs("div", { className: "flex gap-sm", children: [
7808
+ /* @__PURE__ */ jsx(Skeleton, { width: "100%", height: "144px", variant: "rect" }),
7809
+ /* @__PURE__ */ jsx(Skeleton, { width: "100%", height: "144px", variant: "rect" })
7810
+ ] }),
7811
+ /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
7812
+ /* @__PURE__ */ jsx(Skeleton, { width: "128px", height: "20px", variant: "text", className: "mb-sm" }),
7813
+ /* @__PURE__ */ jsx(Skeleton, { width: "100%", height: "80px", variant: "rect" })
7814
+ ] }),
7815
+ /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
7816
+ /* @__PURE__ */ jsx(Skeleton, { width: "96px", height: "20px", variant: "text", className: "mb-sm" }),
7817
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-sm", children: [
7818
+ /* @__PURE__ */ jsx(Skeleton, { width: "100%", height: "64px", variant: "rect" }),
7819
+ /* @__PURE__ */ jsx(Skeleton, { width: "100%", height: "64px", variant: "rect" }),
7820
+ /* @__PURE__ */ jsx(Skeleton, { width: "100%", height: "64px", variant: "rect" }),
7821
+ /* @__PURE__ */ jsx(Skeleton, { width: "100%", height: "64px", variant: "rect" })
7822
+ ] })
7823
+ ] })
7824
+ ] });
7825
+ };
7826
+ var EarnOverviewView = ({
7827
+ selectedTab,
7828
+ onTabChange,
7829
+ labels,
7830
+ overview,
7831
+ explore,
7832
+ history
7833
+ }) => {
7834
+ 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: [
7835
+ /* @__PURE__ */ jsxs(TabsList, { className: "justify-between w-full", children: [
7836
+ /* @__PURE__ */ jsx(TabsTrigger, { value: "overview", className: "flex-1", children: labels.tabs.overview }),
7837
+ /* @__PURE__ */ jsx(TabsTrigger, { value: "explore", className: "flex-1", children: labels.tabs.explore }),
7838
+ /* @__PURE__ */ jsx(TabsTrigger, { value: "history", className: "flex-1", children: labels.tabs.history })
7839
+ ] }),
7840
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1 w-full min-h-0 px-md pt-md", children: [
7841
+ /* @__PURE__ */ jsx(TabsContent, { value: "overview", className: "flex flex-col flex-1 min-h-0", children: overview.isLoading ? /* @__PURE__ */ jsx(OverviewEarnWidgetTabSkeleton, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
7842
+ /* @__PURE__ */ jsx(WalletBalances, { cards: overview.walletBalances }),
7843
+ /* @__PURE__ */ jsx(GroupedStrategyListView, __spreadValues({}, overview.groupedStrategies))
7844
+ ] }) }),
7845
+ /* @__PURE__ */ jsxs(TabsContent, { value: "explore", children: [
7846
+ /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 w-full mb-4 h-12", children: /* @__PURE__ */ jsx(
7847
+ SearchInput,
7848
+ {
7849
+ value: explore.searchValue,
7850
+ onChange: (value) => explore.onSearchChange(value),
7851
+ placeholder: explore.searchPlaceholder
7852
+ }
7853
+ ) }),
7854
+ explore.isLoading ? /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
7855
+ explore.loadingLabel,
7856
+ /* @__PURE__ */ jsx(LoadingDots, {})
7857
+ ] }) : explore.error ? /* @__PURE__ */ jsxs("div", { className: "p-4 text-center text-red-500", children: [
7858
+ explore.errorLabel,
7859
+ ": ",
7860
+ explore.error.message
7861
+ ] }) : 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: [
7862
+ /* @__PURE__ */ jsx(
7863
+ ChipGroup,
7864
+ {
7865
+ options: explore.chipOptions,
7866
+ selected: explore.selectedCategory,
7867
+ onSelect: (value) => explore.onCategorySelect(value)
7868
+ }
7869
+ ),
7870
+ /* @__PURE__ */ jsx(SearchEmptyState, { title: explore.emptySearchTitle, description: explore.emptySearchDescription })
7871
+ ] }) : /* @__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: [
7872
+ /* @__PURE__ */ jsx(
7873
+ ChipGroup,
7874
+ {
7875
+ options: explore.chipOptions,
7876
+ selected: explore.selectedCategory,
7877
+ onSelect: (value) => explore.onCategorySelect(value)
7878
+ }
7879
+ ),
7880
+ /* @__PURE__ */ jsx(TextHeading, { variant: "h5", children: explore.bestPerformanceLabel }),
7881
+ /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-sm", children: explore.strategies.map((s) => /* @__PURE__ */ jsxs(ListItem, { onClick: () => s.onClick(), children: [
7882
+ /* @__PURE__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsx("img", { src: s.logoUrl, alt: s.subtitle, className: "w-10 h-10 rounded-full" }) }),
7883
+ /* @__PURE__ */ jsxs(ListItemContent, { children: [
7884
+ /* @__PURE__ */ jsx(TextBody, { children: s.title }),
7885
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: s.subtitle })
7886
+ ] }),
7887
+ /* @__PURE__ */ jsx(ListItemRightSide, { children: /* @__PURE__ */ jsx(TextBody, { children: s.apyFormatted }) })
7888
+ ] }, s.id)) })
7889
+ ] })
7890
+ ] }),
7891
+ /* @__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: [
7892
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-center items-center gap-md text-center", children: [
7893
+ /* @__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" }) }),
7894
+ /* @__PURE__ */ jsx(TextHeading, { variant: "h3", children: history.emptyTitle })
7895
+ ] }),
7896
+ /* @__PURE__ */ jsx("div", { className: "self-stretch text-center", children: /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: history.emptyDescription }) })
7897
+ ] }) }) : /* @__PURE__ */ jsx(
7898
+ HistoryListView,
7899
+ {
7900
+ groups: history.groups,
7901
+ showLoadMore: history.showLoadMore,
7902
+ onLoadMore: () => history.onLoadMore(),
7903
+ loadMoreLabel: history.loadMoreLabel
7904
+ }
7905
+ ) })
7906
+ ] })
7907
+ ] }) });
7908
+ };
7909
+ var EarnInvestmentSummaryView = ({
7910
+ overviewDescription,
7911
+ totalInvestedLabel,
7912
+ totalInvestedValue,
7913
+ totalReturnLabel,
7914
+ totalReturnValue,
7915
+ processingBadgeLabel,
7916
+ processingBadgeTitle,
7917
+ className
7918
+ }) => {
7919
+ return /* @__PURE__ */ jsxs("section", { className: twMerge("flex flex-col gap-md p-lg bg-[var(--deframe-widget-color-bg-subtle)] rounded", className), children: [
7920
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-text-secondary dark:text-text-secondary-dark", children: overviewDescription }),
7921
+ /* @__PURE__ */ jsx(
7922
+ WalletBalances,
7923
+ {
7924
+ cards: [
7925
+ {
7926
+ label: totalInvestedLabel,
7927
+ value: totalInvestedValue,
7928
+ badge: processingBadgeLabel ? /* @__PURE__ */ jsx(
7929
+ ProcessingBadge,
7930
+ {
7931
+ label: processingBadgeLabel,
7932
+ title: processingBadgeTitle
7933
+ }
7934
+ ) : void 0
7935
+ },
7936
+ { label: totalReturnLabel, value: totalReturnValue }
7937
+ ],
7938
+ variant: "raised",
7939
+ className: "grid grid-cols-2 gap-md !mt-0"
7940
+ }
7941
+ )
7942
+ ] });
7943
+ };
7944
+ var EarnInvestedSectionView = ({
7945
+ sectionTitle,
7946
+ items,
7947
+ onItemClick,
7948
+ className
7949
+ }) => {
7950
+ if (items.length === 0) {
7951
+ return null;
7952
+ }
7953
+ return /* @__PURE__ */ jsxs(
7954
+ "section",
7955
+ {
7956
+ className: twMerge(
7957
+ "flex flex-col gap-[var(--deframe-widget-size-gap-md)] p-[var(--deframe-widget-size-padding-x-lg)]",
7958
+ "bg-[var(--deframe-widget-color-bg-subtle)] rounded-[var(--deframe-widget-size-radius-sm)]",
7959
+ className
7960
+ ),
7961
+ children: [
7962
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: sectionTitle }),
7963
+ /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-md)]", children: items.map((item, index) => {
7964
+ const isLast = index === items.length - 1;
7965
+ return /* @__PURE__ */ jsxs(
7966
+ "button",
7967
+ {
7968
+ type: "button",
7969
+ onClick: () => onItemClick == null ? void 0 : onItemClick(item.strategyId),
7970
+ className: twMerge(
7971
+ "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)]",
7972
+ "transition-colors cursor-pointer text-left w-full",
7973
+ !isLast && "border-b border-[var(--deframe-widget-color-border-secondary)]"
7974
+ ),
7975
+ children: [
7976
+ /* @__PURE__ */ jsx(
7977
+ "img",
7978
+ {
7979
+ src: item.logoUrl,
7980
+ alt: item.assetName,
7981
+ className: "w-10 h-10 rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0"
7982
+ }
7983
+ ),
7621
7984
  /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1 min-w-0", children: [
7622
7985
  /* @__PURE__ */ jsx(TextBody, { className: "font-medium truncate", children: item.assetName }),
7623
7986
  /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-tertiary)] truncate", children: item.subtitle })
@@ -7869,289 +8232,71 @@ var EarnInvestmentDetailsView = (props) => {
7869
8232
  ] }) })
7870
8233
  ] });
7871
8234
  };
7872
- var GroupLabel = ({ children }) => /* @__PURE__ */ jsx("div", { className: "text-text-secondary dark:text-text-secondary-dark text-sm font-medium font-poppins py-3", children });
7873
- var GroupedStrategyListView = ({
8235
+ var EarnTokenSelectorView = ({
8236
+ selectedToken,
8237
+ onTokenClick,
8238
+ onNetworkClick,
7874
8239
  isLoading,
7875
- loadingLabel,
7876
- error,
7877
- errorLabel,
7878
- investedLabel,
7879
- investedItems,
7880
- bestPerformanceLabel,
7881
- bestPerformanceItems,
7882
- allStrategiesLabel,
7883
- allStrategiesItems
8240
+ selectTokenLabel,
8241
+ chainLabel,
8242
+ chainImage,
8243
+ chainDirectionLabel,
8244
+ chainDisabledTitle,
8245
+ isNetworkDisabled = false,
8246
+ currentNetworkSelected
8247
+ }) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[10px]", children: [
8248
+ /* @__PURE__ */ jsx("div", { className: "flex gap-[10px] w-full", children: /* @__PURE__ */ jsx(
8249
+ "button",
8250
+ {
8251
+ type: "button",
8252
+ onClick: onTokenClick,
8253
+ 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",
8254
+ children: /* @__PURE__ */ jsxs("div", { className: "flex h-full items-center justify-between px-[var(--deframe-widget-size-padding-x-sm)] py-[6px]", children: [
8255
+ /* @__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: [
8256
+ /* @__PURE__ */ jsx(
8257
+ "img",
8258
+ {
8259
+ src: selectedToken.logoURI,
8260
+ alt: selectedToken.symbol,
8261
+ className: "w-6 h-6 rounded-full"
8262
+ }
8263
+ ),
8264
+ /* @__PURE__ */ jsx(TextBody, { as: "span", className: "text-[color:var(--deframe-widget-color-text-primary)]", children: selectedToken.symbol })
8265
+ ] }) : isLoading ? /* @__PURE__ */ jsx(LoadingDots, {}) : /* @__PURE__ */ jsx(TextBody, { as: "span", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: selectTokenLabel }) }),
8266
+ /* @__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)]" }) })
8267
+ ] })
8268
+ }
8269
+ ) }),
8270
+ /* @__PURE__ */ jsxs("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] items-center", children: [
8271
+ /* @__PURE__ */ jsx(TextBody, { as: "span", variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-tertiary)]", children: chainDirectionLabel }),
8272
+ /* @__PURE__ */ jsxs(
8273
+ "button",
8274
+ {
8275
+ type: "button",
8276
+ onClick: () => onNetworkClick == null ? void 0 : onNetworkClick(currentNetworkSelected),
8277
+ disabled: isNetworkDisabled,
8278
+ title: chainDisabledTitle,
8279
+ 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)]"}`,
8280
+ children: [
8281
+ chainImage && /* @__PURE__ */ jsx("img", { src: chainImage, alt: "", className: "w-3 h-3 rounded-full" }),
8282
+ /* @__PURE__ */ jsx(TextBody, { as: "span", variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: chainLabel }),
8283
+ /* @__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)]" }) })
8284
+ ]
8285
+ }
8286
+ )
8287
+ ] })
8288
+ ] });
8289
+ var EarnAmountInputView = ({
8290
+ value,
8291
+ onChange,
8292
+ ariaLabel,
8293
+ dollarAmountFormatted,
8294
+ availableBalanceFormatted
7884
8295
  }) => {
7885
- const hasInvested = investedItems.length > 0;
7886
- const hasBestPerformance = bestPerformanceItems.length > 0;
7887
- const hasAllStrategies = allStrategiesItems.length > 0;
7888
- if (isLoading) {
7889
- return /* @__PURE__ */ jsxs("div", { className: "flex items-center py-md", children: [
7890
- loadingLabel,
7891
- " ",
7892
- /* @__PURE__ */ jsx(LoadingDots, {})
7893
- ] });
7894
- }
7895
- if (error) {
7896
- return /* @__PURE__ */ jsxs("div", { className: "p-4 text-center text-red-500", children: [
7897
- errorLabel,
7898
- ": ",
7899
- error.message
7900
- ] });
7901
- }
7902
- return /* @__PURE__ */ jsxs("div", { className: "w-full flex flex-col gap-sm flex-1 min-h-0 overflow-y-auto", children: [
7903
- hasInvested && /* @__PURE__ */ jsxs(Fragment, { children: [
7904
- /* @__PURE__ */ jsx(GroupLabel, { children: investedLabel }),
7905
- /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-sm", children: investedItems.map((item) => /* @__PURE__ */ jsxs(
7906
- ListItem,
7907
- {
7908
- onClick: () => item.onClick(),
7909
- children: [
7910
- /* @__PURE__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsx(
7911
- "img",
7912
- {
7913
- src: item.logoUrl,
7914
- alt: item.subtitle,
7915
- className: "w-10 h-10 rounded-full"
7916
- }
7917
- ) }),
7918
- /* @__PURE__ */ jsxs(ListItemContent, { children: [
7919
- /* @__PURE__ */ jsx(TextBody, { children: item.title }),
7920
- /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: item.subtitle })
7921
- ] }),
7922
- /* @__PURE__ */ jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-row justify-between items-center", children: [
7923
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end", children: [
7924
- /* @__PURE__ */ jsx(TextBody, { children: item.balanceFormatted }),
7925
- /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: item.profitFormatted })
7926
- ] }),
7927
- /* @__PURE__ */ jsx(MdArrowRight, { className: "w-6 h-6" })
7928
- ] }) })
7929
- ]
7930
- },
7931
- `invested-${item.id}`
7932
- )) })
7933
- ] }),
7934
- hasBestPerformance && /* @__PURE__ */ jsxs(Fragment, { children: [
7935
- /* @__PURE__ */ jsx(GroupLabel, { children: bestPerformanceLabel }),
7936
- /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-sm", children: bestPerformanceItems.map((item) => /* @__PURE__ */ jsxs(
7937
- ListItem,
7938
- {
7939
- onClick: () => item.onClick(),
7940
- children: [
7941
- /* @__PURE__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsx(
7942
- "img",
7943
- {
7944
- src: item.logoUrl,
7945
- alt: item.subtitle,
7946
- className: "w-10 h-10 rounded-full"
7947
- }
7948
- ) }),
7949
- /* @__PURE__ */ jsxs(ListItemContent, { children: [
7950
- /* @__PURE__ */ jsx(TextBody, { children: item.title }),
7951
- /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: item.subtitle })
7952
- ] }),
7953
- /* @__PURE__ */ jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-row justify-between items-center", children: [
7954
- /* @__PURE__ */ jsx(ApyRange, { children: item.apyFormatted }),
7955
- /* @__PURE__ */ jsx(MdArrowRight, { className: "w-6 h-6" })
7956
- ] }) })
7957
- ]
7958
- },
7959
- `best-${item.id}`
7960
- )) })
7961
- ] }),
7962
- hasAllStrategies && /* @__PURE__ */ jsxs(Fragment, { children: [
7963
- /* @__PURE__ */ jsx(GroupLabel, { children: allStrategiesLabel }),
7964
- /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-sm", children: allStrategiesItems.map((item) => /* @__PURE__ */ jsxs(
7965
- ListItem,
7966
- {
7967
- onClick: () => item.onClick(),
7968
- children: [
7969
- /* @__PURE__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsx(
7970
- "img",
7971
- {
7972
- src: item.logoUrl,
7973
- alt: item.subtitle,
7974
- className: "w-10 h-10 rounded-full"
7975
- }
7976
- ) }),
7977
- /* @__PURE__ */ jsxs(ListItemContent, { children: [
7978
- /* @__PURE__ */ jsx(TextBody, { children: item.title }),
7979
- /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: item.subtitle })
7980
- ] }),
7981
- /* @__PURE__ */ jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-row justify-between items-center", children: [
7982
- /* @__PURE__ */ jsx(ApyRange, { children: item.apyFormatted }),
7983
- /* @__PURE__ */ jsx(MdArrowRight, { className: "w-6 h-6" })
7984
- ] }) })
7985
- ]
7986
- },
7987
- `all-${item.id}`
7988
- )) })
7989
- ] })
7990
- ] });
7991
- };
7992
- var DateLabel = ({ children }) => {
7993
- return /* @__PURE__ */ jsx("div", { className: "text-text-sm-mobile font-poppins text-text-secondary dark:text-text-secondary-dark", children });
7994
- };
7995
- var ArrowBadge = ({ isDeposit }) => {
7996
- 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" }) });
7997
- };
7998
- var TokenIconWithBadge2 = ({ src, alt, isDeposit }) => {
7999
- const fallbackText = encodeURIComponent((alt || "TOK").slice(0, 3).toUpperCase());
8000
- const fallbackSrc = `https://placehold.co/40x40?text=${fallbackText}`;
8001
- const resolvedSrc = src || fallbackSrc;
8002
- return /* @__PURE__ */ jsxs("div", { className: "relative flex-shrink-0", children: [
8003
- /* @__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(
8004
- "img",
8005
- {
8006
- src: resolvedSrc,
8007
- alt,
8008
- className: "w-full h-full object-cover",
8009
- onError: (e) => {
8010
- e.target.src = fallbackSrc;
8011
- }
8012
- }
8013
- ) }),
8014
- /* @__PURE__ */ jsx(ArrowBadge, { isDeposit })
8015
- ] });
8016
- };
8017
- var SwapIconWithBadge = ({ src, alt }) => {
8018
- const fallbackText = encodeURIComponent((alt || "TOK").slice(0, 3).toUpperCase());
8019
- const fallbackSrc = `https://placehold.co/40x40?text=${fallbackText}`;
8020
- const resolvedSrc = src || fallbackSrc;
8021
- return /* @__PURE__ */ jsxs("div", { className: "relative flex-shrink-0", children: [
8022
- /* @__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(
8023
- "img",
8024
- {
8025
- src: resolvedSrc,
8026
- alt,
8027
- className: "w-full h-full object-cover",
8028
- onError: (e) => {
8029
- e.target.src = fallbackSrc;
8030
- }
8031
- }
8032
- ) }),
8033
- /* @__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" }) })
8034
- ] });
8035
- };
8036
- var AmountDisplay = ({ amount, usdAmount }) => {
8037
- return /* @__PURE__ */ jsxs(Fragment, { children: [
8038
- /* @__PURE__ */ jsx(Label, { className: "text-accent-sm-mobile whitespace-nowrap", children: amount }),
8039
- usdAmount ? /* @__PURE__ */ jsx(Label, { variant: "secondary", className: "whitespace-nowrap", children: usdAmount }) : null
8040
- ] });
8041
- };
8042
- var HistoryListView = ({
8043
- groups,
8044
- showLoadMore,
8045
- onLoadMore,
8046
- loadMoreLabel,
8047
- itemClassName
8048
- }) => {
8049
- if (groups.length === 0) {
8050
- return null;
8051
- }
8052
- return /* @__PURE__ */ jsxs("div", { className: "self-stretch flex flex-col gap-[16px]", children: [
8053
- groups.map((group) => /* @__PURE__ */ jsxs("div", { className: "self-stretch flex flex-col gap-sm", children: [
8054
- /* @__PURE__ */ jsx(DateLabel, { children: group.dateLabel }),
8055
- group.items.map((item) => /* @__PURE__ */ jsxs(
8056
- ListItem,
8057
- {
8058
- onClick: () => item.onClick(),
8059
- containerClassName: twMerge("!rounded-xs !border-0 !min-h-[72px]", itemClassName),
8060
- children: [
8061
- /* @__PURE__ */ jsx(ListItemLeftSide, { children: item.isSwap ? /* @__PURE__ */ jsx(SwapIconWithBadge, { src: item.iconUrl, alt: item.iconAlt }) : /* @__PURE__ */ jsx(
8062
- TokenIconWithBadge2,
8063
- {
8064
- src: item.iconUrl,
8065
- alt: item.iconAlt,
8066
- isDeposit: item.isDeposit
8067
- }
8068
- ) }),
8069
- /* @__PURE__ */ jsxs(ListItemContent, { children: [
8070
- /* @__PURE__ */ jsx(Label, { className: "text-text-lg-mobile", children: item.title }),
8071
- /* @__PURE__ */ jsx(Label, { variant: "secondary", className: "text-text-tertiary dark:text-text-tertiary-dark", children: item.subtitle }),
8072
- item.status === "PENDING" && item.statusLabel ? /* @__PURE__ */ jsx("div", { className: "mt-[6px]", children: /* @__PURE__ */ jsx(
8073
- ProcessingBadge,
8074
- {
8075
- label: item.statusLabel,
8076
- title: item.statusTitle,
8077
- size: "compact"
8078
- }
8079
- ) }) : null
8080
- ] }),
8081
- /* @__PURE__ */ jsx(ListItemRightSide, { children: /* @__PURE__ */ jsx(AmountDisplay, { amount: item.amountFormatted, usdAmount: item.amountUsd }) })
8082
- ]
8083
- },
8084
- item.id
8085
- ))
8086
- ] }, group.dateLabel)),
8087
- showLoadMore && /* @__PURE__ */ jsx("div", { className: "flex justify-center pt-sm", children: /* @__PURE__ */ jsx(TertiaryButton, { onClick: onLoadMore, children: loadMoreLabel }) })
8088
- ] });
8089
- };
8090
- var EarnTokenSelectorView = ({
8091
- selectedToken,
8092
- onTokenClick,
8093
- onNetworkClick,
8094
- isLoading,
8095
- selectTokenLabel,
8096
- chainLabel,
8097
- chainImage,
8098
- chainDirectionLabel,
8099
- chainDisabledTitle,
8100
- isNetworkDisabled = false,
8101
- currentNetworkSelected
8102
- }) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[10px]", children: [
8103
- /* @__PURE__ */ jsx("div", { className: "flex gap-[10px] w-full", children: /* @__PURE__ */ jsx(
8104
- "button",
8105
- {
8106
- type: "button",
8107
- onClick: onTokenClick,
8108
- 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",
8109
- children: /* @__PURE__ */ jsxs("div", { className: "flex h-full items-center justify-between px-[var(--deframe-widget-size-padding-x-sm)] py-[6px]", children: [
8110
- /* @__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: [
8111
- /* @__PURE__ */ jsx(
8112
- "img",
8113
- {
8114
- src: selectedToken.logoURI,
8115
- alt: selectedToken.symbol,
8116
- className: "w-6 h-6 rounded-full"
8117
- }
8118
- ),
8119
- /* @__PURE__ */ jsx(TextBody, { as: "span", className: "text-[color:var(--deframe-widget-color-text-primary)]", children: selectedToken.symbol })
8120
- ] }) : isLoading ? /* @__PURE__ */ jsx(LoadingDots, {}) : /* @__PURE__ */ jsx(TextBody, { as: "span", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: selectTokenLabel }) }),
8121
- /* @__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)]" }) })
8122
- ] })
8123
- }
8124
- ) }),
8125
- /* @__PURE__ */ jsxs("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] items-center", children: [
8126
- /* @__PURE__ */ jsx(TextBody, { as: "span", variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-tertiary)]", children: chainDirectionLabel }),
8127
- /* @__PURE__ */ jsxs(
8128
- "button",
8129
- {
8130
- type: "button",
8131
- onClick: () => onNetworkClick == null ? void 0 : onNetworkClick(currentNetworkSelected),
8132
- disabled: isNetworkDisabled,
8133
- title: chainDisabledTitle,
8134
- 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)]"}`,
8135
- children: [
8136
- chainImage && /* @__PURE__ */ jsx("img", { src: chainImage, alt: "", className: "w-3 h-3 rounded-full" }),
8137
- /* @__PURE__ */ jsx(TextBody, { as: "span", variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: chainLabel }),
8138
- /* @__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)]" }) })
8139
- ]
8140
- }
8141
- )
8142
- ] })
8143
- ] });
8144
- var EarnAmountInputView = ({
8145
- value,
8146
- onChange,
8147
- ariaLabel,
8148
- dollarAmountFormatted,
8149
- availableBalanceFormatted
8150
- }) => {
8151
- return /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col items-end justify-between min-h-[86px] text-right", children: [
8152
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end text-[color:var(--deframe-widget-color-text-secondary)]", children: [
8153
- /* @__PURE__ */ jsx(
8154
- "input",
8296
+ return /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col items-end justify-between min-h-[86px] text-right", children: [
8297
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end text-[color:var(--deframe-widget-color-text-secondary)]", children: [
8298
+ /* @__PURE__ */ jsx(
8299
+ "input",
8155
8300
  {
8156
8301
  placeholder: "0.00",
8157
8302
  type: "text",
@@ -9090,7 +9235,1291 @@ var EarnWithdrawFailedView = ({
9090
9235
  }
9091
9236
  );
9092
9237
  };
9238
+ var DashboardCard = ({ children, className }) => {
9239
+ return /* @__PURE__ */ jsx("div", { "data-test-id": "dashboard-card", className: twMerge("bg-[var(--deframe-widget-color-bg-subtle)] rounded", className), children });
9240
+ };
9241
+ var DashboardTransactionsPlaceholder = () => {
9242
+ return /* @__PURE__ */ jsxs("div", { "data-test-id": "dashboard-transactions-placeholder", className: "flex flex-col items-center justify-center py-16 gap-4", children: [
9243
+ /* @__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)]" }) }),
9244
+ /* @__PURE__ */ jsx(TextHeading, { variant: "h3", children: "Nenhuma transa\xE7\xE3o ainda" }),
9245
+ /* @__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." })
9246
+ ] });
9247
+ };
9248
+ var DashboardBalancesBreakdown = ({
9249
+ isLoadingBalances,
9250
+ formattedTokenPositions,
9251
+ formattedEarnPositions,
9252
+ layout = "vertical"
9253
+ }) => {
9254
+ if (layout === "horizontal") {
9255
+ 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: [
9256
+ /* @__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: [
9257
+ /* @__PURE__ */ jsx(Text_default, { children: "Cripto" }),
9258
+ /* @__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(
9259
+ motion.div,
9260
+ {
9261
+ initial: { opacity: 0, x: 10 },
9262
+ animate: { opacity: 1, x: 0 },
9263
+ exit: { opacity: 0, x: -10 },
9264
+ transition: { duration: 0.4, delay: 0.1, ease: "easeOut" },
9265
+ className: "mt-2",
9266
+ children: /* @__PURE__ */ jsx(Text_default, { children: formattedTokenPositions })
9267
+ },
9268
+ "crypto-value"
9269
+ ) })
9270
+ ] }),
9271
+ /* @__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: [
9272
+ /* @__PURE__ */ jsx(Text_default, { children: "Investimentos" }),
9273
+ /* @__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(
9274
+ motion.div,
9275
+ {
9276
+ initial: { opacity: 0, x: 10 },
9277
+ animate: { opacity: 1, x: 0 },
9278
+ exit: { opacity: 0, x: -10 },
9279
+ transition: { duration: 0.4, delay: 0.2, ease: "easeOut" },
9280
+ className: "mt-2",
9281
+ children: /* @__PURE__ */ jsx(Text_default, { children: formattedEarnPositions })
9282
+ },
9283
+ "earn-value"
9284
+ ) })
9285
+ ] })
9286
+ ] }) });
9287
+ }
9288
+ return /* @__PURE__ */ jsxs("div", { "data-test-id": "dashboard-balances-breakdown-vertical", className: "lg:hidden w-full mt-8", children: [
9289
+ /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center w-full mb-6", children: [
9290
+ /* @__PURE__ */ jsx(Text_default, { children: "Cripto" }),
9291
+ /* @__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(
9292
+ motion.div,
9293
+ {
9294
+ initial: { opacity: 0, x: 10 },
9295
+ animate: { opacity: 1, x: 0 },
9296
+ exit: { opacity: 0, x: -10 },
9297
+ transition: { duration: 0.4, delay: 0.1, ease: "easeOut" },
9298
+ children: /* @__PURE__ */ jsx(Text_default, { children: formattedTokenPositions })
9299
+ },
9300
+ "crypto-value"
9301
+ ) })
9302
+ ] }),
9303
+ /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center w-full", children: [
9304
+ /* @__PURE__ */ jsx(Text_default, { children: "Investimentos" }),
9305
+ /* @__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(
9306
+ motion.div,
9307
+ {
9308
+ initial: { opacity: 0, x: 10 },
9309
+ animate: { opacity: 1, x: 0 },
9310
+ exit: { opacity: 0, x: -10 },
9311
+ transition: { duration: 0.4, delay: 0.2, ease: "easeOut" },
9312
+ children: /* @__PURE__ */ jsx(Text_default, { children: formattedEarnPositions })
9313
+ },
9314
+ "earn-value"
9315
+ ) })
9316
+ ] })
9317
+ ] });
9318
+ };
9319
+ var DashboardTokenListView = ({
9320
+ tokens,
9321
+ isLoading,
9322
+ className,
9323
+ showCard = true,
9324
+ onDepositClick
9325
+ }) => {
9326
+ const [searchQuery, setSearchQuery] = useState("");
9327
+ const filteredTokens = tokens.filter((token) => {
9328
+ if (isNaN(token.amountInUSD) || token.amountInUSD < 0.01) return false;
9329
+ if (!searchQuery) return true;
9330
+ const query = searchQuery.toLowerCase();
9331
+ return token.symbol.toLowerCase().includes(query) || token.name.toLowerCase().includes(query);
9332
+ });
9333
+ const content = /* @__PURE__ */ jsxs("div", { "data-test-id": "dashboard-token-list", children: [
9334
+ showCard && /* @__PURE__ */ jsx(TextBody, { className: "mb-6", children: "Seus tokens" }),
9335
+ !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: [
9336
+ /* @__PURE__ */ jsx(
9337
+ Input2,
9338
+ {
9339
+ "data-test-id": "dashboard-token-search-input",
9340
+ type: "text",
9341
+ placeholder: "Pesquisar aqui...",
9342
+ value: searchQuery,
9343
+ onChange: (e) => setSearchQuery(e.target.value),
9344
+ className: "w-full h-full p-4 pr-12"
9345
+ }
9346
+ ),
9347
+ /* @__PURE__ */ jsx(MdOutlineSearch, { className: "w-4 h-4 text-[var(--deframe-widget-color-text-secondary)] absolute right-4" })
9348
+ ] }) }),
9349
+ /* @__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: [
9350
+ /* @__PURE__ */ jsx(Skeleton, { variant: "circle", width: "40px", height: "40px", shimmer: true }),
9351
+ /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
9352
+ /* @__PURE__ */ jsx(Skeleton, { width: "80px", height: "16px", shimmer: true, className: "mb-2" }),
9353
+ /* @__PURE__ */ jsx(Skeleton, { width: "128px", height: "12px", shimmer: true })
9354
+ ] }),
9355
+ /* @__PURE__ */ jsx(Skeleton, { width: "64px", height: "16px", shimmer: true })
9356
+ ] }, i)) }) : filteredTokens.length > 0 ? filteredTokens.map((token, index) => /* @__PURE__ */ jsx(
9357
+ motion.div,
9358
+ {
9359
+ initial: { opacity: 0, y: 20 },
9360
+ animate: { opacity: 1, y: 0 },
9361
+ transition: {
9362
+ duration: 0.4,
9363
+ delay: index * 0.1,
9364
+ ease: "easeOut"
9365
+ },
9366
+ children: /* @__PURE__ */ jsxs(
9367
+ ListItem,
9368
+ {
9369
+ "data-test-id": `dashboard-token-item-${token.symbol.toLowerCase()}`,
9370
+ containerClassName: `p-2 ${index > 0 ? "mt-4" : ""} bg-[var(--deframe-widget-color-bg-raised)] cursor-pointer`,
9371
+ children: [
9372
+ /* @__PURE__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsxs("div", { className: "relative w-10 h-10", children: [
9373
+ /* @__PURE__ */ jsx(
9374
+ "img",
9375
+ {
9376
+ src: token.logoUrl,
9377
+ alt: token.name,
9378
+ className: "w-10 h-10 rounded-full object-cover"
9379
+ }
9380
+ ),
9381
+ token.networkLogoUrl && /* @__PURE__ */ jsx(
9382
+ "img",
9383
+ {
9384
+ src: token.networkLogoUrl,
9385
+ alt: token.networkName || "",
9386
+ className: "absolute -bottom-1 border border-bg-default p-px -right-1 w-6 h-6 rounded-full object-cover bg-white"
9387
+ }
9388
+ )
9389
+ ] }) }),
9390
+ /* @__PURE__ */ jsxs(ListItemContent, { className: "ml-4", children: [
9391
+ /* @__PURE__ */ jsx(TextBody, { children: token.symbol }),
9392
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-[var(--deframe-widget-color-text-secondary)]", children: token.name })
9393
+ ] }),
9394
+ /* @__PURE__ */ jsx(ListItemRightSide, { className: "flex flex-col items-end", children: token.isUpdating ? /* @__PURE__ */ jsx(LoadingDots, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
9395
+ /* @__PURE__ */ jsx(TextBody, { className: "font-semibold", children: token.formattedFiatValue }),
9396
+ /* @__PURE__ */ jsxs(TextBody, { variant: "text-small", className: "text-[var(--deframe-widget-color-text-secondary)]", children: [
9397
+ token.formattedAmount,
9398
+ " ",
9399
+ token.symbol
9400
+ ] })
9401
+ ] }) })
9402
+ ]
9403
+ }
9404
+ )
9405
+ },
9406
+ token.id || index
9407
+ )) : /* @__PURE__ */ jsx(
9408
+ motion.div,
9409
+ {
9410
+ initial: { opacity: 0, y: 20 },
9411
+ animate: { opacity: 1, y: 0 },
9412
+ transition: { duration: 0.4 },
9413
+ className: "flex flex-col items-center justify-center",
9414
+ children: searchQuery ? /* @__PURE__ */ jsxs(Fragment, { children: [
9415
+ /* @__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)]" }) }),
9416
+ /* @__PURE__ */ jsx(TextHeading, { className: "text-center mb-4", children: "Nenhum token encontrado" }),
9417
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-large", className: "text-center mb-4", children: "Tente buscar por outro nome ou s\xEDmbolo." })
9418
+ ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
9419
+ /* @__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)]" }) }),
9420
+ /* @__PURE__ */ jsx(TextHeading, { className: "text-center mb-4", children: "Deposite e comece a usar a wallet" }),
9421
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-large", className: "text-center mb-4", children: "Use Pix para adicionar saldo instantaneamente na sua carteira." }),
9422
+ onDepositClick && /* @__PURE__ */ jsx("button", { type: "button", onClick: onDepositClick, children: /* @__PURE__ */ jsx(PrimaryButton, { children: "Depositar via Pix" }) })
9423
+ ] })
9424
+ }
9425
+ ) })
9426
+ ] });
9427
+ if (showCard) {
9428
+ return /* @__PURE__ */ jsx(DashboardCard, { className: `p-6 bg-[var(--deframe-widget-color-bg-subtle)] ${className || ""}`, children: content });
9429
+ }
9430
+ return /* @__PURE__ */ jsx("div", { className, children: content });
9431
+ };
9432
+ var DashboardStrategiesListView = ({
9433
+ strategies,
9434
+ isLoading,
9435
+ searchQuery = "",
9436
+ limit = 5,
9437
+ onStrategyClick
9438
+ }) => {
9439
+ if (isLoading) {
9440
+ 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: [
9441
+ /* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded-full bg-[var(--deframe-widget-color-bg-muted)] animate-pulse" }),
9442
+ /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
9443
+ /* @__PURE__ */ jsx("div", { className: "h-4 bg-[var(--deframe-widget-color-bg-muted)] rounded w-20 mb-2 animate-pulse" }),
9444
+ /* @__PURE__ */ jsx("div", { className: "h-3 bg-[var(--deframe-widget-color-bg-muted)] rounded w-32 animate-pulse" })
9445
+ ] }),
9446
+ /* @__PURE__ */ jsx("div", { className: "h-4 bg-[var(--deframe-widget-color-bg-muted)] rounded w-16 animate-pulse" })
9447
+ ] }, i)) });
9448
+ }
9449
+ const query = searchQuery.trim().toLowerCase();
9450
+ const filteredStrategies = strategies.filter((strategy) => {
9451
+ if (!query) return true;
9452
+ return strategy.assetName.toLowerCase().includes(query) || strategy.protocol.toLowerCase().includes(query);
9453
+ });
9454
+ const displayStrategies = filteredStrategies.slice(0, limit);
9455
+ if (displayStrategies.length === 0) {
9456
+ return /* @__PURE__ */ jsx(
9457
+ motion.div,
9458
+ {
9459
+ initial: { opacity: 0, y: 20 },
9460
+ animate: { opacity: 1, y: 0 },
9461
+ transition: { duration: 0.4 },
9462
+ className: "flex flex-col items-center justify-center py-12",
9463
+ children: /* @__PURE__ */ jsx(TextBody, { className: "text-[var(--deframe-widget-color-text-secondary)]", children: searchQuery ? "Nenhuma estrat\xE9gia encontrada" : "Nenhum investimento encontrado" })
9464
+ }
9465
+ );
9466
+ }
9467
+ return /* @__PURE__ */ jsx("div", { "data-test-id": "dashboard-strategies-list", children: displayStrategies.map((strategy, index) => /* @__PURE__ */ jsx(
9468
+ motion.div,
9469
+ {
9470
+ initial: { opacity: 0, y: 20 },
9471
+ animate: { opacity: 1, y: 0 },
9472
+ transition: {
9473
+ duration: 0.4,
9474
+ delay: index * 0.1,
9475
+ ease: "easeOut"
9476
+ },
9477
+ children: /* @__PURE__ */ jsxs(
9478
+ ListItem,
9479
+ {
9480
+ containerClassName: `bg-[var(--deframe-widget-color-bg-raised)] ${index > 0 ? "mt-4" : ""}`,
9481
+ onClick: () => onStrategyClick(strategy.id),
9482
+ children: [
9483
+ /* @__PURE__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsx(
9484
+ "img",
9485
+ {
9486
+ src: strategy.logoUrl,
9487
+ alt: strategy.assetName,
9488
+ className: "w-10 h-10 rounded-full object-cover"
9489
+ }
9490
+ ) }),
9491
+ /* @__PURE__ */ jsxs(ListItemContent, { className: "ml-4", children: [
9492
+ /* @__PURE__ */ jsxs(TextBody, { children: [
9493
+ "Rendimento ",
9494
+ strategy.assetName
9495
+ ] }),
9496
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-[var(--deframe-widget-color-text-secondary)]", children: strategy.protocol })
9497
+ ] }),
9498
+ /* @__PURE__ */ jsxs(ListItemRightSide, { className: "flex flex-col items-end", children: [
9499
+ /* @__PURE__ */ jsx(TextBody, { className: "text-[var(--deframe-widget-color-text-secondary)]" }),
9500
+ strategy.apyFormatted !== void 0 && /* @__PURE__ */ jsxs(TextBody, { variant: "text-small", className: "text-[var(--deframe-widget-color-brand-primary)]", children: [
9501
+ "APY ",
9502
+ strategy.apyFormatted
9503
+ ] })
9504
+ ] })
9505
+ ]
9506
+ }
9507
+ )
9508
+ },
9509
+ strategy.id || index
9510
+ )) });
9511
+ };
9512
+ var DashboardPortfolioView = ({
9513
+ formattedTotalValue,
9514
+ isLoading,
9515
+ onDepositClick,
9516
+ onWithdrawClick,
9517
+ onSwapClick,
9518
+ formattedTokenPositions,
9519
+ formattedEarnPositions
9520
+ }) => {
9521
+ 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: [
9522
+ /* @__PURE__ */ jsx(TextBody, { className: "mb-6", children: "Portf\xF3lio" }),
9523
+ /* @__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(
9524
+ motion.p,
9525
+ {
9526
+ initial: { opacity: 0, y: 10 },
9527
+ animate: { opacity: 1, y: 0 },
9528
+ exit: { opacity: 0, y: -10 },
9529
+ transition: { duration: 0.5, ease: "easeOut" },
9530
+ className: "text-2xl font-bold text-[var(--deframe-widget-color-text-primary)] flex items-center gap-2",
9531
+ children: formattedTotalValue
9532
+ },
9533
+ "value"
9534
+ ) }) }),
9535
+ /* @__PURE__ */ jsxs("div", { className: "flex lg:hidden flex-row gap-2 sm:gap-4 mt-6 w-full", children: [
9536
+ /* @__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: [
9537
+ /* @__PURE__ */ jsx(MdOutlineArrowUpward, { className: "w-4 h-4 shrink-0" }),
9538
+ "Depositar"
9539
+ ] }) }),
9540
+ /* @__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: [
9541
+ /* @__PURE__ */ jsx(MdOutlineArrowDownward, { className: "w-4 h-4 shrink-0" }),
9542
+ "Sacar"
9543
+ ] }) }),
9544
+ /* @__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: [
9545
+ /* @__PURE__ */ jsx(MdOutlineSwapHoriz, { className: "w-4 h-4 shrink-0" }),
9546
+ "Trocar"
9547
+ ] }) })
9548
+ ] }),
9549
+ /* @__PURE__ */ jsx("div", { className: "lg:hidden", children: /* @__PURE__ */ jsx(
9550
+ DashboardBalancesBreakdown,
9551
+ {
9552
+ isLoadingBalances: isLoading,
9553
+ formattedTokenPositions,
9554
+ formattedEarnPositions,
9555
+ layout: "vertical"
9556
+ }
9557
+ ) }),
9558
+ /* @__PURE__ */ jsx("div", { className: "hidden lg:block", children: /* @__PURE__ */ jsx(
9559
+ DashboardBalancesBreakdown,
9560
+ {
9561
+ isLoadingBalances: isLoading,
9562
+ formattedTokenPositions,
9563
+ formattedEarnPositions,
9564
+ layout: "horizontal"
9565
+ }
9566
+ ) })
9567
+ ] }) });
9568
+ };
9569
+ var cardClasses = twMerge(
9570
+ "w-full self-start flex flex-col gap-[var(--deframe-widget-size-gap-sm)]",
9571
+ "bg-[var(--deframe-widget-color-bg-secondary)] border border-[color:var(--deframe-widget-color-border-secondary)]",
9572
+ "rounded-[var(--deframe-widget-size-radius-md)]",
9573
+ "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]"
9574
+ );
9575
+ var labelClasses = twMerge(
9576
+ "text-[color:var(--deframe-widget-color-text-tertiary)]",
9577
+ "text-[11px] [font-weight:var(--deframe-widget-font-weight-medium)] uppercase tracking-[0.08em]",
9578
+ "[line-height:1.4]"
9579
+ );
9580
+ var valueLgClasses = twMerge(
9581
+ "text-[38px] [font-weight:var(--deframe-widget-font-weight-bold)] [line-height:1.15]",
9582
+ "text-[color:var(--deframe-widget-color-text-primary)]"
9583
+ );
9584
+ var descriptionClasses = "text-[color:var(--deframe-widget-color-text-secondary)] text-[13px] [line-height:1.45]";
9585
+ function StatCardSkeletonBlock({ showDescription, className }) {
9586
+ return /* @__PURE__ */ jsxs(
9587
+ "article",
9588
+ {
9589
+ "data-test-id": "stat-card-skeleton",
9590
+ "aria-busy": "true",
9591
+ className: twMerge(cardClasses, "self-stretch", className),
9592
+ children: [
9593
+ /* @__PURE__ */ jsx(Skeleton, { variant: "rect", width: 140, height: 11 }),
9594
+ /* @__PURE__ */ jsx(Skeleton, { variant: "rect", width: "60%", height: 44 }),
9595
+ showDescription && /* @__PURE__ */ jsx(Skeleton, { variant: "rect", width: "80%", height: 13 })
9596
+ ]
9597
+ }
9598
+ );
9599
+ }
9600
+ var DashboardPortfolioViewSimple = ({
9601
+ formattedTotalValue,
9602
+ isLoading,
9603
+ assetCount
9604
+ }) => {
9605
+ if (isLoading) {
9606
+ return /* @__PURE__ */ jsxs(
9607
+ "div",
9608
+ {
9609
+ "data-test-id": "dashboard-portfolio-simple",
9610
+ className: "grid grid-cols-[1fr_auto] gap-[var(--deframe-widget-size-gap-sm)]",
9611
+ children: [
9612
+ /* @__PURE__ */ jsx(StatCardSkeletonBlock, { showDescription: true }),
9613
+ /* @__PURE__ */ jsx(StatCardSkeletonBlock, { className: "min-w-[160px]" })
9614
+ ]
9615
+ }
9616
+ );
9617
+ }
9618
+ return /* @__PURE__ */ jsxs(
9619
+ "div",
9620
+ {
9621
+ "data-test-id": "dashboard-portfolio-simple",
9622
+ className: twMerge(
9623
+ "grid gap-[var(--deframe-widget-size-gap-sm)]",
9624
+ assetCount != null ? "grid-cols-[1fr_auto]" : "grid-cols-1"
9625
+ ),
9626
+ children: [
9627
+ /* @__PURE__ */ jsxs("article", { className: twMerge(cardClasses, "self-stretch"), children: [
9628
+ /* @__PURE__ */ jsx("p", { "data-test-id": "stat-card-label", className: labelClasses, children: "Total da Carteira (USD)" }),
9629
+ /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
9630
+ motion.p,
9631
+ {
9632
+ "data-test-id": "stat-card-value",
9633
+ initial: { opacity: 0, y: 10 },
9634
+ animate: { opacity: 1, y: 0 },
9635
+ exit: { opacity: 0, y: -10 },
9636
+ transition: { duration: 0.5, ease: "easeOut" },
9637
+ className: valueLgClasses,
9638
+ children: formattedTotalValue
9639
+ },
9640
+ "value"
9641
+ ) }),
9642
+ /* @__PURE__ */ jsx("p", { "data-test-id": "stat-card-description", className: descriptionClasses, children: "Soma do saldo por token (em USD)." })
9643
+ ] }),
9644
+ assetCount != null && /* @__PURE__ */ jsxs("article", { className: twMerge(cardClasses, "self-stretch min-w-[160px]"), children: [
9645
+ /* @__PURE__ */ jsx("p", { "data-test-id": "stat-card-label", className: labelClasses, children: "Ativos" }),
9646
+ /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
9647
+ motion.p,
9648
+ {
9649
+ "data-test-id": "stat-card-value",
9650
+ initial: { opacity: 0, y: 10 },
9651
+ animate: { opacity: 1, y: 0 },
9652
+ exit: { opacity: 0, y: -10 },
9653
+ transition: { duration: 0.5, ease: "easeOut" },
9654
+ className: valueLgClasses,
9655
+ children: assetCount
9656
+ },
9657
+ "count-value"
9658
+ ) })
9659
+ ] })
9660
+ ]
9661
+ }
9662
+ );
9663
+ };
9664
+ var DashboardTokensView = ({
9665
+ sortedRegularTokens,
9666
+ regularTokens,
9667
+ isLoadingBalances,
9668
+ activeTab,
9669
+ onTabChange,
9670
+ strategiesContent
9671
+ }) => {
9672
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
9673
+ /* @__PURE__ */ jsx(DashboardTokenListView, { tokens: sortedRegularTokens, isLoading: isLoadingBalances, className: "hidden lg:block" }),
9674
+ /* @__PURE__ */ jsx(DashboardCard, { className: "lg:hidden p-6 bg-[var(--deframe-widget-color-bg-subtle)]", children: /* @__PURE__ */ jsxs(
9675
+ Tabs,
9676
+ {
9677
+ value: activeTab,
9678
+ onValueChange: (value) => onTabChange(value),
9679
+ children: [
9680
+ /* @__PURE__ */ jsxs(TabsList, { className: "w-full mb-3 flex justify-center", children: [
9681
+ /* @__PURE__ */ jsx(TabsTrigger, { value: "tokens", children: "Cripto" }),
9682
+ /* @__PURE__ */ jsx(TabsTrigger, { value: "strategies", children: "Investimentos" })
9683
+ ] }),
9684
+ /* @__PURE__ */ jsxs(TabsContent, { value: "tokens", children: [
9685
+ /* @__PURE__ */ jsx(TextBody, { className: "mb-6", children: "Seus tokens" }),
9686
+ /* @__PURE__ */ jsx(DashboardTokenListView, { tokens: regularTokens, isLoading: isLoadingBalances, showCard: false })
9687
+ ] }),
9688
+ /* @__PURE__ */ jsx(TabsContent, { value: "strategies", children: strategiesContent })
9689
+ ]
9690
+ }
9691
+ ) })
9692
+ ] });
9693
+ };
9694
+
9695
+ // src/utils/isDustValue.ts
9696
+ var DUST_THRESHOLD_USD = 0.01;
9697
+ function isDustValue(amountInUSD) {
9698
+ return isNaN(amountInUSD) || amountInUSD < DUST_THRESHOLD_USD;
9699
+ }
9700
+ function HistoryButton2({ onClick }) {
9701
+ return /* @__PURE__ */ jsx(
9702
+ "button",
9703
+ {
9704
+ type: "button",
9705
+ "aria-label": "Hist\xF3rico de transa\xE7\xF5es",
9706
+ "data-test-id": "dashboard-home-history-button",
9707
+ onClick,
9708
+ className: twMerge(
9709
+ "inline-flex items-center justify-center",
9710
+ "w-9 h-9",
9711
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
9712
+ "border-none bg-transparent",
9713
+ "cursor-pointer outline-none flex-shrink-0",
9714
+ "text-[color:var(--deframe-widget-color-text-secondary)]",
9715
+ "hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_92%,transparent)]",
9716
+ "transition-[background] duration-150"
9717
+ ),
9718
+ children: /* @__PURE__ */ jsxs(
9719
+ "svg",
9720
+ {
9721
+ viewBox: "0 0 24 24",
9722
+ width: "20",
9723
+ height: "20",
9724
+ fill: "none",
9725
+ stroke: "currentColor",
9726
+ strokeWidth: "2",
9727
+ strokeLinecap: "round",
9728
+ strokeLinejoin: "round",
9729
+ "aria-hidden": "true",
9730
+ children: [
9731
+ /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
9732
+ /* @__PURE__ */ jsx("polyline", { points: "12 6 12 12 16 14" })
9733
+ ]
9734
+ }
9735
+ )
9736
+ }
9737
+ );
9738
+ }
9739
+ 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)]";
9740
+ function IconCircle3({ item, size = 36, className }) {
9741
+ const [imgError, setImgError] = React6__default.useState(false);
9742
+ if (item.iconUrl && !imgError) {
9743
+ return /* @__PURE__ */ jsx(
9744
+ "img",
9745
+ {
9746
+ "data-test-id": "icon-circle-img",
9747
+ src: item.iconUrl,
9748
+ alt: item.name,
9749
+ width: size,
9750
+ height: size,
9751
+ className: twMerge("rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0 object-cover", className),
9752
+ onError: () => setImgError(true)
9753
+ }
9754
+ );
9755
+ }
9756
+ return /* @__PURE__ */ jsx(
9757
+ "div",
9758
+ {
9759
+ "data-test-id": "icon-circle-fallback",
9760
+ className: twMerge(
9761
+ "rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0 flex items-center justify-center",
9762
+ "[font-weight:var(--deframe-widget-font-weight-bold)] text-[color:var(--deframe-widget-color-text-primary-dark)]",
9763
+ className
9764
+ ),
9765
+ style: {
9766
+ width: size,
9767
+ height: size,
9768
+ background: item.color,
9769
+ fontSize: size * 0.33,
9770
+ letterSpacing: "-0.01em"
9771
+ },
9772
+ children: item.name.slice(0, 2).toUpperCase()
9773
+ }
9774
+ );
9775
+ }
9776
+ function TokenIcon3({ token, size = 36, badge, badgeSize = 14, className }) {
9777
+ return /* @__PURE__ */ jsxs(
9778
+ "div",
9779
+ {
9780
+ "data-test-id": "token-icon",
9781
+ className: twMerge("relative flex-shrink-0", className),
9782
+ style: { width: size, height: size },
9783
+ children: [
9784
+ /* @__PURE__ */ jsx(IconCircle3, { item: token, size }),
9785
+ badge && /* @__PURE__ */ jsx(
9786
+ "div",
9787
+ {
9788
+ "data-test-id": "token-icon-badge",
9789
+ 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)]",
9790
+ children: /* @__PURE__ */ jsx(IconCircle3, { item: badge, size: badgeSize })
9791
+ }
9792
+ )
9793
+ ]
9794
+ }
9795
+ );
9796
+ }
9797
+ var directionClasses = {
9798
+ 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)]",
9799
+ 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)]",
9800
+ 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)]"
9801
+ };
9802
+ var arrowIcons = {
9803
+ 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" }) }),
9804
+ 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" }) }),
9805
+ 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" }) })
9806
+ };
9807
+ function AssetTrendBadge({ direction, value, className }) {
9808
+ return /* @__PURE__ */ jsxs(
9809
+ "span",
9810
+ {
9811
+ "data-test-id": "asset-trend-badge",
9812
+ className: twMerge(
9813
+ "inline-flex items-center gap-[var(--deframe-widget-size-gap-xs)]",
9814
+ "px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)]",
9815
+ "rounded-[var(--deframe-widget-size-radius-full)] border",
9816
+ "text-[length:var(--deframe-widget-font-size-xs)] [font-weight:var(--deframe-widget-font-weight-medium)] leading-[var(--deframe-widget-font-leading-xs)]",
9817
+ "font-[var(--deframe-widget-font-family)]",
9818
+ "whitespace-nowrap",
9819
+ directionClasses[direction],
9820
+ className
9821
+ ),
9822
+ children: [
9823
+ arrowIcons[direction],
9824
+ value
9825
+ ]
9826
+ }
9827
+ );
9828
+ }
9829
+ var SKELETON_NAME_WIDTHS = [100, 88, 112, 96, 104, 80];
9830
+ var SKELETON_SYMBOL_WIDTHS = [56, 64, 52, 68, 60, 72];
9831
+ var SKELETON_BALANCE_WIDTHS = [72, 64, 80, 68, 76, 60];
9832
+ function AssetListSkeletonRow({ index }) {
9833
+ const w = index % SKELETON_NAME_WIDTHS.length;
9834
+ return /* @__PURE__ */ jsxs(
9835
+ "div",
9836
+ {
9837
+ "data-test-id": "asset-list-skeleton-row",
9838
+ className: twMerge(
9839
+ GRID_COLS,
9840
+ "items-center",
9841
+ "px-[var(--deframe-widget-size-padding-x-md)] py-[11px]",
9842
+ "border-t border-[color:var(--deframe-widget-color-border-secondary)]"
9843
+ ),
9844
+ children: [
9845
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)]", children: [
9846
+ /* @__PURE__ */ jsx(Skeleton, { variant: "circle", width: 36, height: 36 }),
9847
+ /* @__PURE__ */ jsxs("div", { className: "hidden sm:flex flex-col gap-[var(--deframe-widget-size-gap-xs)]", children: [
9848
+ /* @__PURE__ */ jsx(Skeleton, { variant: "rect", width: SKELETON_NAME_WIDTHS[w], height: 14 }),
9849
+ /* @__PURE__ */ jsx(Skeleton, { variant: "rect", width: SKELETON_SYMBOL_WIDTHS[w], height: 11 })
9850
+ ] })
9851
+ ] }),
9852
+ /* @__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)]" }) }),
9853
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end gap-[var(--deframe-widget-size-gap-xs)]", children: [
9854
+ /* @__PURE__ */ jsx(Skeleton, { variant: "rect", width: SKELETON_BALANCE_WIDTHS[w], height: 14 }),
9855
+ /* @__PURE__ */ jsx(Skeleton, { variant: "rect", width: SKELETON_BALANCE_WIDTHS[w] - 12, height: 11 })
9856
+ ] })
9857
+ ]
9858
+ }
9859
+ );
9860
+ }
9861
+ function AssetListSkeletonContent() {
9862
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
9863
+ /* @__PURE__ */ jsxs(
9864
+ "div",
9865
+ {
9866
+ className: twMerge(
9867
+ "flex items-center justify-between",
9868
+ "px-[var(--deframe-widget-size-padding-x-md)] pt-[var(--deframe-widget-size-padding-y-md)] pb-[var(--deframe-widget-size-padding-y-sm)]"
9869
+ ),
9870
+ children: [
9871
+ /* @__PURE__ */ jsx(Skeleton, { variant: "rect", width: 108, height: 18 }),
9872
+ /* @__PURE__ */ jsx(Skeleton, { variant: "rect", width: 36, height: 36, className: "rounded-[var(--deframe-widget-size-radius-sm)]" })
9873
+ ]
9874
+ }
9875
+ ),
9876
+ /* @__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: [
9877
+ /* @__PURE__ */ jsx(Skeleton, { variant: "rect", width: 60, height: 26, className: "rounded-[var(--deframe-widget-size-radius-full)]" }),
9878
+ /* @__PURE__ */ jsx(Skeleton, { variant: "rect", width: 104, height: 26, className: "rounded-[var(--deframe-widget-size-radius-full)]" }),
9879
+ /* @__PURE__ */ jsx(Skeleton, { variant: "rect", width: 64, height: 26, className: "rounded-[var(--deframe-widget-size-radius-full)]" })
9880
+ ] }),
9881
+ /* @__PURE__ */ jsxs(
9882
+ "div",
9883
+ {
9884
+ className: twMerge(
9885
+ GRID_COLS,
9886
+ "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-sm)]",
9887
+ "border-t border-[color:var(--deframe-widget-color-border-secondary)]"
9888
+ ),
9889
+ children: [
9890
+ /* @__PURE__ */ jsx(Skeleton, { variant: "rect", width: 40, height: 10, className: "hidden sm:block" }),
9891
+ /* @__PURE__ */ jsx(Skeleton, { variant: "rect", width: 72, height: 10, className: "hidden sm:block mx-auto" }),
9892
+ /* @__PURE__ */ jsx(Skeleton, { variant: "rect", width: 40, height: 10, className: "hidden sm:block ml-auto" })
9893
+ ]
9894
+ }
9895
+ ),
9896
+ Array.from({ length: 6 }, (_, i) => /* @__PURE__ */ jsx(AssetListSkeletonRow, { index: i }, i))
9897
+ ] });
9898
+ }
9899
+ var DashboardTokensViewSimple = ({
9900
+ sortedRegularTokens,
9901
+ isLoadingBalances,
9902
+ filters,
9903
+ selectedFilter,
9904
+ onFilterSelect,
9905
+ onHistoryClick
9906
+ }) => {
9907
+ if (isLoadingBalances) {
9908
+ return /* @__PURE__ */ jsx(
9909
+ "div",
9910
+ {
9911
+ "data-test-id": "asset-list-skeleton",
9912
+ "aria-busy": "true",
9913
+ "aria-label": "Carregando ativos\u2026",
9914
+ className: twMerge(
9915
+ "w-full self-start flex flex-col",
9916
+ "bg-[var(--deframe-widget-color-bg-secondary)] border border-[color:var(--deframe-widget-color-border-secondary)]",
9917
+ "rounded-[var(--deframe-widget-size-radius-md)]",
9918
+ "overflow-hidden"
9919
+ ),
9920
+ children: /* @__PURE__ */ jsx(AssetListSkeletonContent, {})
9921
+ }
9922
+ );
9923
+ }
9924
+ return /* @__PURE__ */ jsxs(
9925
+ "div",
9926
+ {
9927
+ "data-test-id": "asset-list",
9928
+ className: twMerge(
9929
+ "w-full self-start flex flex-col",
9930
+ "bg-[var(--deframe-widget-color-bg-secondary)] border border-[color:var(--deframe-widget-color-border-secondary)]",
9931
+ "rounded-[var(--deframe-widget-size-radius-md)]",
9932
+ "overflow-hidden"
9933
+ ),
9934
+ children: [
9935
+ /* @__PURE__ */ jsxs(
9936
+ "div",
9937
+ {
9938
+ "data-test-id": "asset-list-header",
9939
+ className: twMerge(
9940
+ "flex items-center justify-between",
9941
+ "px-[var(--deframe-widget-size-padding-x-md)] pt-[var(--deframe-widget-size-padding-y-md)] pb-[var(--deframe-widget-size-padding-y-sm)]"
9942
+ ),
9943
+ children: [
9944
+ /* @__PURE__ */ jsx(
9945
+ "h3",
9946
+ {
9947
+ 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)]",
9948
+ children: "Seus ativos"
9949
+ }
9950
+ ),
9951
+ onHistoryClick != null && /* @__PURE__ */ jsx(HistoryButton2, { onClick: onHistoryClick })
9952
+ ]
9953
+ }
9954
+ ),
9955
+ filters && filters.length > 0 && /* @__PURE__ */ jsx(
9956
+ "div",
9957
+ {
9958
+ "data-test-id": "asset-list-filter",
9959
+ className: twMerge(
9960
+ "flex items-center gap-[var(--deframe-widget-size-gap-sm)]",
9961
+ "px-[var(--deframe-widget-size-padding-x-md)] pb-[var(--deframe-widget-size-padding-y-sm)]",
9962
+ "overflow-x-auto [scrollbar-width:none]"
9963
+ ),
9964
+ children: filters.map((filter) => {
9965
+ const isSelected = filter.id === selectedFilter;
9966
+ return /* @__PURE__ */ jsx(
9967
+ "button",
9968
+ {
9969
+ type: "button",
9970
+ "data-test-id": "asset-list-filter-pill",
9971
+ onClick: () => onFilterSelect == null ? void 0 : onFilterSelect(filter.id),
9972
+ className: twMerge(
9973
+ "inline-flex items-center",
9974
+ "px-[var(--deframe-widget-size-padding-x-sm)] py-[5px]",
9975
+ "rounded-[var(--deframe-widget-size-radius-full)] border",
9976
+ "text-[length:var(--deframe-widget-font-size-xs)] [font-weight:var(--deframe-widget-font-weight-medium)] leading-[var(--deframe-widget-font-leading-xs)]",
9977
+ "font-[var(--deframe-widget-font-family)]",
9978
+ "cursor-pointer whitespace-nowrap flex-shrink-0",
9979
+ "outline-none transition-all duration-150",
9980
+ 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)]"
9981
+ ),
9982
+ children: filter.label
9983
+ },
9984
+ filter.id
9985
+ );
9986
+ })
9987
+ }
9988
+ ),
9989
+ /* @__PURE__ */ jsxs(
9990
+ "div",
9991
+ {
9992
+ "data-test-id": "asset-list-columns",
9993
+ className: twMerge(
9994
+ GRID_COLS,
9995
+ "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-sm)]",
9996
+ "border-t border-[color:var(--deframe-widget-color-border-secondary)]"
9997
+ ),
9998
+ children: [
9999
+ /* @__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" }),
10000
+ /* @__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" }),
10001
+ /* @__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" })
10002
+ ]
10003
+ }
10004
+ ),
10005
+ sortedRegularTokens.filter((t) => !isDustValue(t.amountInUSD)).map((item) => {
10006
+ var _a, _b;
10007
+ const m = item.metadata;
10008
+ const color = (_a = m == null ? void 0 : m.color) != null ? _a : "#888";
10009
+ const trendDirection = m == null ? void 0 : m.trendDirection;
10010
+ const trendValue = m == null ? void 0 : m.trendValue;
10011
+ const networkColor = (_b = m == null ? void 0 : m.networkColor) != null ? _b : "var(--deframe-widget-color-bg-tertiary)";
10012
+ const networkBadge = item.networkName ? { name: item.networkName, color: networkColor, iconUrl: item.networkLogoUrl } : void 0;
10013
+ const handleItemClick = item.onClick;
10014
+ return /* @__PURE__ */ jsxs(
10015
+ "div",
10016
+ {
10017
+ "data-test-id": "asset-list-item",
10018
+ onClick: handleItemClick,
10019
+ className: twMerge(
10020
+ GRID_COLS,
10021
+ "items-center",
10022
+ "px-[var(--deframe-widget-size-padding-x-md)] py-[11px]",
10023
+ "border-t border-[color:var(--deframe-widget-color-border-secondary)]",
10024
+ "transition-colors duration-150",
10025
+ "hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_60%,transparent)]",
10026
+ handleItemClick && "cursor-pointer"
10027
+ ),
10028
+ children: [
10029
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)] min-w-0", children: [
10030
+ /* @__PURE__ */ jsx(TokenIcon3, { token: { name: item.name, color, iconUrl: item.logoUrl }, size: 36, badge: networkBadge, badgeSize: 14 }),
10031
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0", children: [
10032
+ /* @__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 }),
10033
+ /* @__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 })
10034
+ ] })
10035
+ ] }),
10036
+ /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: trendDirection && trendValue ? /* @__PURE__ */ jsx(AssetTrendBadge, { direction: trendDirection, value: trendValue }) : null }),
10037
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end text-right", children: [
10038
+ /* @__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 }),
10039
+ /* @__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: [
10040
+ item.formattedAmount,
10041
+ " ",
10042
+ item.symbol
10043
+ ] })
10044
+ ] })
10045
+ ]
10046
+ },
10047
+ item.id
10048
+ );
10049
+ })
10050
+ ]
10051
+ }
10052
+ );
10053
+ };
10054
+ var DashboardRecentTransactionsView = ({
10055
+ isLoading,
10056
+ isEmpty,
10057
+ transactions,
10058
+ onViewAllClick
10059
+ }) => {
10060
+ return /* @__PURE__ */ jsx(DashboardCard, { className: "p-6 bg-[var(--deframe-widget-color-bg-subtle)]", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
10061
+ /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-start", children: [
10062
+ /* @__PURE__ */ jsx(TextBody, { className: "mb-6", children: "Transa\xE7\xF5es recentes" }),
10063
+ /* @__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" }) })
10064
+ ] }),
10065
+ /* @__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: [
10066
+ /* @__PURE__ */ jsx(Skeleton, { variant: "circle", width: "40px", height: "40px", shimmer: true }),
10067
+ /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
10068
+ /* @__PURE__ */ jsx(Skeleton, { width: "160px", height: "14px", shimmer: true, className: "mb-2" }),
10069
+ /* @__PURE__ */ jsx(Skeleton, { width: "220px", height: "12px", shimmer: true })
10070
+ ] }),
10071
+ /* @__PURE__ */ jsx(Skeleton, { width: "96px", height: "14px", shimmer: true })
10072
+ ] }, i)) }) : isEmpty ? /* @__PURE__ */ jsx(DashboardTransactionsPlaceholder, {}) : transactions.map((item) => {
10073
+ const MainIcon = item.mainIcon;
10074
+ const TypeIcon = item.typeIcon;
10075
+ return /* @__PURE__ */ jsxs(
10076
+ ListItem,
10077
+ {
10078
+ containerClassName: "p-2 mt-4 bg-[var(--deframe-widget-color-bg-raised)] cursor-pointer",
10079
+ onClick: () => item.onClick(),
10080
+ children: [
10081
+ /* @__PURE__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
10082
+ /* @__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 }) }),
10083
+ /* @__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 }) })
10084
+ ] }) }),
10085
+ /* @__PURE__ */ jsxs(ListItemContent, { className: "ml-4", children: [
10086
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: item.formattedDate }),
10087
+ /* @__PURE__ */ jsx(TextBody, { className: "text-xs text-[var(--deframe-widget-color-text-secondary)]", children: item.label })
10088
+ ] }),
10089
+ /* @__PURE__ */ jsxs(ListItemRightSide, { className: "text-right", children: [
10090
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: item.rightPrimary }),
10091
+ /* @__PURE__ */ jsx(TextBody, { className: "text-xs text-[var(--deframe-widget-color-text-secondary)]", children: item.rightSecondary })
10092
+ ] })
10093
+ ]
10094
+ },
10095
+ item.id
10096
+ );
10097
+ }) })
10098
+ ] }) });
10099
+ };
10100
+ var variantConfig = {
10101
+ pending: {
10102
+ 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)]",
10103
+ dotClass: "bg-[var(--deframe-widget-color-state-warning)]",
10104
+ labelClass: "text-[color:var(--deframe-widget-color-state-warning)]",
10105
+ label: "Pendente"
10106
+ },
10107
+ confirmed: {
10108
+ 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)]",
10109
+ dotClass: "bg-[var(--deframe-widget-color-brand-primary)]",
10110
+ labelClass: "text-[color:var(--deframe-widget-color-brand-primary)]",
10111
+ label: "Confirmado"
10112
+ },
10113
+ approved: {
10114
+ 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)]",
10115
+ dotClass: "bg-[var(--deframe-widget-color-brand-primary)]",
10116
+ labelClass: "text-[color:var(--deframe-widget-color-brand-primary)]",
10117
+ label: "Aprovada"
10118
+ },
10119
+ failed: {
10120
+ 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)]",
10121
+ dotClass: "bg-[var(--deframe-widget-color-state-error)]",
10122
+ labelClass: "text-[color:var(--deframe-widget-color-state-error)]",
10123
+ label: "Falhou"
10124
+ },
10125
+ processing: {
10126
+ 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)]",
10127
+ dotClass: "bg-[var(--deframe-widget-color-brand-secondary)]",
10128
+ labelClass: "text-[color:var(--deframe-widget-color-brand-secondary)]",
10129
+ label: "Processando"
10130
+ }
10131
+ };
10132
+ function StatusBadge2({ status, label, className }) {
10133
+ const config = variantConfig[status];
10134
+ return /* @__PURE__ */ jsxs(
10135
+ "span",
10136
+ {
10137
+ "data-test-id": "status-badge",
10138
+ className: twMerge(
10139
+ "inline-flex items-center gap-[5px]",
10140
+ "py-[3px] pr-[10px] pl-[7px]",
10141
+ "rounded-[var(--deframe-widget-size-radius-full)]",
10142
+ "border",
10143
+ config.wrapper,
10144
+ className
10145
+ ),
10146
+ children: [
10147
+ /* @__PURE__ */ jsx(
10148
+ "span",
10149
+ {
10150
+ "data-test-id": "status-badge-dot",
10151
+ className: twMerge(
10152
+ "w-[7px] h-[7px] rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0 inline-block",
10153
+ config.dotClass
10154
+ )
10155
+ }
10156
+ ),
10157
+ /* @__PURE__ */ jsx(
10158
+ "span",
10159
+ {
10160
+ "data-test-id": "status-badge-label",
10161
+ className: twMerge(
10162
+ "text-[11px] [font-weight:var(--deframe-widget-font-weight-medium)] font-[var(--deframe-widget-font-family)]",
10163
+ config.labelClass
10164
+ ),
10165
+ children: label != null ? label : config.label
10166
+ }
10167
+ )
10168
+ ]
10169
+ }
10170
+ );
10171
+ }
10172
+ var DashboardRecentTransactionsViewSimple = ({
10173
+ isLoading,
10174
+ isEmpty,
10175
+ transactions,
10176
+ onClose
10177
+ }) => {
10178
+ const [query, setQuery] = useState("");
10179
+ const filtered = useMemo(() => {
10180
+ const q = query.trim().toLowerCase();
10181
+ if (!q) return transactions;
10182
+ return transactions.filter(
10183
+ (tx) => tx.label.toLowerCase().includes(q) || tx.formattedDate.toLowerCase().includes(q) || tx.rightPrimary.toLowerCase().includes(q) || tx.rightSecondary.toLowerCase().includes(q)
10184
+ );
10185
+ }, [transactions, query]);
10186
+ return /* @__PURE__ */ jsxs(
10187
+ "div",
10188
+ {
10189
+ "data-test-id": "dashboard-recent-transactions-simple",
10190
+ className: twMerge(
10191
+ "bg-[var(--deframe-widget-color-bg-secondary)]",
10192
+ "rounded-[var(--deframe-widget-size-radius-md)]",
10193
+ "border border-[color:var(--deframe-widget-color-border-secondary)]",
10194
+ "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]",
10195
+ "flex flex-col gap-[var(--deframe-widget-size-gap-md)] w-full",
10196
+ "font-[var(--deframe-widget-font-family)]"
10197
+ ),
10198
+ children: [
10199
+ /* @__PURE__ */ jsxs(
10200
+ "div",
10201
+ {
10202
+ "data-test-id": "dashboard-recent-transactions-simple-header",
10203
+ className: "flex items-start justify-between gap-[var(--deframe-widget-size-gap-sm)]",
10204
+ children: [
10205
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[4px]", children: [
10206
+ /* @__PURE__ */ jsx(
10207
+ "h2",
10208
+ {
10209
+ "data-test-id": "dashboard-recent-transactions-simple-title",
10210
+ className: twMerge(
10211
+ "m-0 text-[20px] leading-[1.25]",
10212
+ "[font-weight:var(--deframe-widget-font-weight-bold)]",
10213
+ "text-[color:var(--deframe-widget-color-text-primary)]"
10214
+ ),
10215
+ children: "Hist\xF3rico"
10216
+ }
10217
+ ),
10218
+ /* @__PURE__ */ jsx(
10219
+ "p",
10220
+ {
10221
+ "data-test-id": "dashboard-recent-transactions-simple-subtitle",
10222
+ className: "m-0 text-[13px] text-[color:var(--deframe-widget-color-text-secondary)] leading-[1.4]",
10223
+ children: "\xDAltimas transa\xE7\xF5es executadas"
10224
+ }
10225
+ )
10226
+ ] }),
10227
+ onClose && /* @__PURE__ */ jsx(
10228
+ CloseButton_default,
10229
+ {
10230
+ onClick: onClose,
10231
+ ariaLabel: "Fechar",
10232
+ className: "flex-shrink-0 mt-[-4px]"
10233
+ }
10234
+ )
10235
+ ]
10236
+ }
10237
+ ),
10238
+ /* @__PURE__ */ jsx("div", { className: "h-px bg-[var(--deframe-widget-color-border-secondary)]" }),
10239
+ /* @__PURE__ */ jsxs(
10240
+ "div",
10241
+ {
10242
+ "data-test-id": "dashboard-recent-transactions-simple-search",
10243
+ className: "relative",
10244
+ children: [
10245
+ /* @__PURE__ */ jsx(
10246
+ "input",
10247
+ {
10248
+ "data-test-id": "dashboard-recent-transactions-simple-search-input",
10249
+ type: "text",
10250
+ value: query,
10251
+ onChange: (e) => setQuery(e.target.value),
10252
+ placeholder: "Buscar por status, moeda, rede ou tx...",
10253
+ "aria-label": "Buscar transa\xE7\xE3o",
10254
+ className: [
10255
+ "w-full box-border h-10",
10256
+ "bg-[var(--deframe-widget-color-bg-tertiary)]",
10257
+ "border border-[color:var(--deframe-widget-color-border-secondary)]",
10258
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
10259
+ "py-0 pr-[var(--deframe-widget-size-padding-x-xl)] pl-[14px]",
10260
+ "text-[14px] text-[color:var(--deframe-widget-color-text-primary)]",
10261
+ "outline-none focus:outline-none",
10262
+ "focus:border-[color:var(--deframe-widget-color-brand-primary)]",
10263
+ "transition-colors duration-150",
10264
+ "font-[var(--deframe-widget-font-family)]",
10265
+ "placeholder:text-[color:var(--deframe-widget-color-text-tertiary)]"
10266
+ ].join(" ")
10267
+ }
10268
+ ),
10269
+ /* @__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(
10270
+ "svg",
10271
+ {
10272
+ width: "15",
10273
+ height: "15",
10274
+ viewBox: "0 0 24 24",
10275
+ fill: "none",
10276
+ stroke: "currentColor",
10277
+ strokeWidth: "2",
10278
+ strokeLinecap: "round",
10279
+ "aria-hidden": "true",
10280
+ children: [
10281
+ /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
10282
+ /* @__PURE__ */ jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
10283
+ ]
10284
+ }
10285
+ ) })
10286
+ ]
10287
+ }
10288
+ ),
10289
+ /* @__PURE__ */ jsx(
10290
+ "div",
10291
+ {
10292
+ "data-test-id": "dashboard-recent-transactions-simple-list",
10293
+ className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)]",
10294
+ children: isLoading ? [1, 2, 3].map((i) => /* @__PURE__ */ jsxs(
10295
+ "div",
10296
+ {
10297
+ className: twMerge(
10298
+ "flex flex-col gap-[6px]",
10299
+ "px-[var(--deframe-widget-size-padding-x-md)] py-[14px]",
10300
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
10301
+ "border border-[color:var(--deframe-widget-color-border-secondary)]"
10302
+ ),
10303
+ children: [
10304
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
10305
+ /* @__PURE__ */ jsx(Skeleton, { width: "100px", height: "12px", shimmer: true }),
10306
+ /* @__PURE__ */ jsx(Skeleton, { width: "80px", height: "20px", shimmer: true, className: "rounded-full" })
10307
+ ] }),
10308
+ /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
10309
+ /* @__PURE__ */ jsx(Skeleton, { width: "160px", height: "18px", shimmer: true }),
10310
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end gap-[4px]", children: [
10311
+ /* @__PURE__ */ jsx(Skeleton, { width: "96px", height: "14px", shimmer: true }),
10312
+ /* @__PURE__ */ jsx(Skeleton, { width: "72px", height: "12px", shimmer: true })
10313
+ ] })
10314
+ ] })
10315
+ ]
10316
+ },
10317
+ i
10318
+ )) : isEmpty ? /* @__PURE__ */ jsx(DashboardTransactionsPlaceholder, {}) : filtered.length === 0 ? /* @__PURE__ */ jsx(
10319
+ "div",
10320
+ {
10321
+ "data-test-id": "dashboard-recent-transactions-simple-no-results",
10322
+ className: "py-[var(--deframe-widget-size-padding-y-xl)] text-center text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)]",
10323
+ children: "Nenhuma transa\xE7\xE3o encontrada"
10324
+ }
10325
+ ) : filtered.map((item) => /* @__PURE__ */ jsxs(
10326
+ "div",
10327
+ {
10328
+ "data-test-id": "dashboard-recent-transactions-simple-item",
10329
+ className: twMerge(
10330
+ "w-full flex flex-col gap-[6px]",
10331
+ "bg-[var(--deframe-widget-color-bg-secondary)]",
10332
+ "border border-[color:var(--deframe-widget-color-border-secondary)]",
10333
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
10334
+ "px-[var(--deframe-widget-size-padding-x-md)] py-[14px]"
10335
+ ),
10336
+ children: [
10337
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-[var(--deframe-widget-size-gap-sm)]", children: [
10338
+ /* @__PURE__ */ jsx(
10339
+ "span",
10340
+ {
10341
+ "data-test-id": "dashboard-recent-transactions-simple-item-date",
10342
+ className: "text-[12px] text-[color:var(--deframe-widget-color-text-tertiary)] leading-none",
10343
+ children: item.formattedDate
10344
+ }
10345
+ ),
10346
+ /* @__PURE__ */ jsx(StatusBadge2, { status: "approved" })
10347
+ ] }),
10348
+ /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-[var(--deframe-widget-size-gap-sm)]", children: [
10349
+ /* @__PURE__ */ jsx(
10350
+ "span",
10351
+ {
10352
+ "data-test-id": "dashboard-recent-transactions-simple-item-label",
10353
+ className: twMerge(
10354
+ "text-[18px] leading-[1.2]",
10355
+ "[font-weight:var(--deframe-widget-font-weight-bold)]",
10356
+ "text-[color:var(--deframe-widget-color-text-primary)]"
10357
+ ),
10358
+ children: item.label
10359
+ }
10360
+ ),
10361
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end gap-[2px] flex-shrink-0", children: [
10362
+ /* @__PURE__ */ jsx(
10363
+ "span",
10364
+ {
10365
+ "data-test-id": "dashboard-recent-transactions-simple-item-primary",
10366
+ className: twMerge(
10367
+ "text-[13px] leading-[1.3]",
10368
+ "[font-weight:var(--deframe-widget-font-weight-semibold)]",
10369
+ "text-[color:var(--deframe-widget-color-text-primary)]"
10370
+ ),
10371
+ children: item.rightPrimary
10372
+ }
10373
+ ),
10374
+ item.rightSecondary && /* @__PURE__ */ jsx(
10375
+ "span",
10376
+ {
10377
+ "data-test-id": "dashboard-recent-transactions-simple-item-secondary",
10378
+ className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)] leading-none",
10379
+ children: item.rightSecondary
10380
+ }
10381
+ )
10382
+ ] })
10383
+ ] })
10384
+ ]
10385
+ },
10386
+ item.id
10387
+ ))
10388
+ }
10389
+ )
10390
+ ]
10391
+ }
10392
+ );
10393
+ };
10394
+ var DashboardInvestmentOpportunitiesView = ({
10395
+ isLoadingBalances,
10396
+ formattedTotalProfit,
10397
+ strategiesContent,
10398
+ onViewAllStrategiesClick
10399
+ }) => {
10400
+ return /* @__PURE__ */ jsx(DashboardCard, { className: "hidden lg:block p-6", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-4", children: [
10401
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-large", children: "Oportunidades de investimento" }),
10402
+ /* @__PURE__ */ jsxs(DashboardCard, { className: "bg-[var(--deframe-widget-color-bg-raised)] flex flex-col space-y-2 p-4", children: [
10403
+ /* @__PURE__ */ jsx(TextBody, { children: "Rendimentos" }),
10404
+ 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 }) })
10405
+ ] }),
10406
+ /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: strategiesContent }),
10407
+ /* @__PURE__ */ jsx(Link2, { href: "/dashboard/earn", className: "w-full", onClick: onViewAllStrategiesClick, children: /* @__PURE__ */ jsx(SecondaryButton, { children: "Ver todas as estrat\xE9gias" }) })
10408
+ ] }) });
10409
+ };
10410
+ var DashboardView = ({
10411
+ portfolio,
10412
+ tokens,
10413
+ recentTransactions,
10414
+ investmentOpportunities,
10415
+ quickActions,
10416
+ banner
10417
+ }) => {
10418
+ 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: [
10419
+ /* @__PURE__ */ jsxs("div", { className: "lg:col-span-2 space-y-6", children: [
10420
+ /* @__PURE__ */ jsx(DashboardPortfolioView, __spreadValues({}, portfolio)),
10421
+ /* @__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: [
10422
+ /* @__PURE__ */ jsx(TextBody, { className: "mb-6", children: "A\xE7\xF5es r\xE1pidas" }),
10423
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-4 w-full", children: [
10424
+ /* @__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: [
10425
+ /* @__PURE__ */ jsx(MdOutlineArrowUpward, { className: "w-4 h-4 shrink-0" }),
10426
+ "Depositar"
10427
+ ] }) }),
10428
+ /* @__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: [
10429
+ /* @__PURE__ */ jsx(MdOutlineArrowDownward, { className: "w-4 h-4 shrink-0" }),
10430
+ "Sacar"
10431
+ ] }) }),
10432
+ /* @__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: [
10433
+ /* @__PURE__ */ jsx(MdOutlineSwapHoriz, { className: "w-4 h-4 shrink-0" }),
10434
+ "Trocar"
10435
+ ] }) })
10436
+ ] })
10437
+ ] }) }),
10438
+ /* @__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(
10439
+ "img",
10440
+ {
10441
+ src: banner == null ? void 0 : banner.imageUrl,
10442
+ alt: banner == null ? void 0 : banner.altText,
10443
+ className: "w-full h-[90%] object-cover rounded"
10444
+ }
10445
+ ) }),
10446
+ /* @__PURE__ */ jsx(DashboardTokensView, __spreadValues({}, tokens)),
10447
+ recentTransactions && /* @__PURE__ */ jsx(DashboardRecentTransactionsView, __spreadValues({}, recentTransactions))
10448
+ ] }),
10449
+ investmentOpportunities && /* @__PURE__ */ jsx("div", { className: "lg:col-span-1 space-y-6", children: /* @__PURE__ */ jsx(DashboardInvestmentOpportunitiesView, __spreadValues({}, investmentOpportunities)) })
10450
+ ] }) });
10451
+ };
10452
+ var DashboardViewSimple = ({
10453
+ portfolio,
10454
+ tokens,
10455
+ quickActions
10456
+ }) => {
10457
+ const assetCount = tokens.sortedRegularTokens.filter((t) => !isDustValue(t.amountInUSD)).length;
10458
+ return /* @__PURE__ */ jsxs(
10459
+ "div",
10460
+ {
10461
+ "data-test-id": "dashboard-page-simple",
10462
+ className: "w-full flex flex-col gap-[var(--deframe-widget-size-gap-md)]",
10463
+ children: [
10464
+ /* @__PURE__ */ jsxs(
10465
+ "div",
10466
+ {
10467
+ "data-test-id": "dashboard-home-header",
10468
+ className: "flex items-center justify-between gap-[var(--deframe-widget-size-gap-md)]",
10469
+ children: [
10470
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-xs)]", children: [
10471
+ /* @__PURE__ */ jsx(
10472
+ "h1",
10473
+ {
10474
+ "data-test-id": "dashboard-home-title",
10475
+ 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)]",
10476
+ children: "Wallet"
10477
+ }
10478
+ ),
10479
+ /* @__PURE__ */ jsx(
10480
+ "p",
10481
+ {
10482
+ "data-test-id": "dashboard-home-subtitle",
10483
+ 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)]",
10484
+ children: "Resumo da sua carteira e movimenta\xE7\xF5es."
10485
+ }
10486
+ )
10487
+ ] }),
10488
+ /* @__PURE__ */ jsxs(
10489
+ "div",
10490
+ {
10491
+ "data-test-id": "dashboard-home-actions",
10492
+ className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)] flex-shrink-0",
10493
+ children: [
10494
+ /* @__PURE__ */ jsx(
10495
+ PrimaryButton,
10496
+ {
10497
+ className: "w-auto py-[var(--deframe-widget-size-padding-y-sm)] [font-weight:var(--deframe-widget-font-weight-medium)]",
10498
+ onClick: () => quickActions == null ? void 0 : quickActions.onDepositClick(),
10499
+ children: "Depositar"
10500
+ }
10501
+ ),
10502
+ /* @__PURE__ */ jsx(
10503
+ SecondaryButton,
10504
+ {
10505
+ className: "w-auto py-[var(--deframe-widget-size-padding-y-sm)] [font-weight:var(--deframe-widget-font-weight-medium)]",
10506
+ onClick: () => quickActions == null ? void 0 : quickActions.onWithdrawClick(),
10507
+ children: "Sacar"
10508
+ }
10509
+ )
10510
+ ]
10511
+ }
10512
+ )
10513
+ ]
10514
+ }
10515
+ ),
10516
+ /* @__PURE__ */ jsx(DashboardPortfolioViewSimple, __spreadProps(__spreadValues({}, portfolio), { assetCount })),
10517
+ /* @__PURE__ */ jsx(DashboardTokensViewSimple, __spreadValues({}, tokens))
10518
+ ]
10519
+ }
10520
+ );
10521
+ };
9093
10522
 
9094
- 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 };
10523
+ 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 };
9095
10524
  //# sourceMappingURL=index.mjs.map
9096
10525
  //# sourceMappingURL=index.mjs.map