@deframe-sdk/components 0.1.29 → 0.1.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/index.d.mts +212 -107
  2. package/dist/index.d.ts +212 -107
  3. package/dist/index.js +2576 -788
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +2570 -789
  6. package/dist/index.mjs.map +1 -1
  7. package/dist/styles.css +83 -6
  8. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -1783,7 +1783,7 @@ var BannerNotification = (_a) => {
1783
1783
  const bannerClasses = tailwindMerge.twMerge(
1784
1784
  baseClasses,
1785
1785
  typeClasses[t],
1786
- variantTextClasses[v],
1786
+ t === "toast" ? "text-white" : variantTextClasses[v],
1787
1787
  isExiting && "opacity-0 -translate-y-2",
1788
1788
  className
1789
1789
  );
@@ -7617,6 +7617,68 @@ var StrategyGridCard = ({
7617
7617
  ]
7618
7618
  }
7619
7619
  );
7620
+ var strategyCardClasses = [
7621
+ "w-full",
7622
+ "bg-[var(--deframe-widget-color-bg-secondary)]",
7623
+ "border border-[color:var(--deframe-widget-color-border-secondary)]",
7624
+ "rounded-[var(--deframe-widget-size-radius-md)]",
7625
+ "p-[var(--deframe-widget-size-padding-x-md)]",
7626
+ "flex flex-row items-center justify-between",
7627
+ "gap-[var(--deframe-widget-size-gap-md)]",
7628
+ "hover:border-[color:var(--deframe-widget-color-border-primary)]",
7629
+ "transition-colors"
7630
+ ].join(" ");
7631
+ var StrategyGridCardSimple = ({
7632
+ logoUrl,
7633
+ title,
7634
+ chainName,
7635
+ apyFormatted,
7636
+ riskLevel,
7637
+ onInvestClick,
7638
+ labels
7639
+ }) => {
7640
+ var _a, _b, _c, _d, _e;
7641
+ const investLabel = (_a = labels == null ? void 0 : labels.investLabel) != null ? _a : "Depositar";
7642
+ const riskBadgeMap = {
7643
+ low: /* @__PURE__ */ jsxRuntime.jsx(LowRiskBadge, { label: (_b = labels == null ? void 0 : labels.riskLow) != null ? _b : "Risco Baixo" }),
7644
+ medium: /* @__PURE__ */ jsxRuntime.jsx(MediumRiskBadge, { label: (_c = labels == null ? void 0 : labels.riskMedium) != null ? _c : "Risco M\xE9dio" }),
7645
+ high: /* @__PURE__ */ jsxRuntime.jsx(HighRiskBadge, { label: (_d = labels == null ? void 0 : labels.riskHigh) != null ? _d : "Risco Alto" })
7646
+ };
7647
+ return /* @__PURE__ */ jsxRuntime.jsxs(
7648
+ "article",
7649
+ {
7650
+ "data-slot": "strategy-grid-card-simple",
7651
+ "data-test-id": "strategy-grid-card-simple",
7652
+ className: strategyCardClasses,
7653
+ children: [
7654
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)] min-w-0", children: [
7655
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-full bg-[var(--deframe-widget-color-bg-tertiary)] flex items-center justify-center overflow-hidden shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("img", { alt: title, src: logoUrl, referrerPolicy: "no-referrer", className: "w-full h-full object-contain" }) }),
7656
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col min-w-0", children: [
7657
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)] leading-[var(--deframe-widget-font-leading-sm)] font-[var(--deframe-widget-font-family)] truncate", children: title }),
7658
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-xs)] text-[color:var(--deframe-widget-color-text-secondary)] leading-[var(--deframe-widget-font-leading-xs)]", children: chainName })
7659
+ ] })
7660
+ ] }),
7661
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
7662
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-xs)] [font-weight:var(--deframe-widget-font-weight-medium)] uppercase tracking-[0.08em] text-[color:var(--deframe-widget-color-text-tertiary)]", children: (_e = labels == null ? void 0 : labels.apyLabel) != null ? _e : "Rendimento" }),
7663
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-lg)] [font-weight:var(--deframe-widget-font-weight-bold)] text-[color:var(--deframe-widget-color-brand-primary)] font-[var(--deframe-widget-font-family)] leading-none mt-[2px]", children: apyFormatted })
7664
+ ] }),
7665
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)] flex-shrink-0", children: [
7666
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 whitespace-nowrap", children: riskBadgeMap[riskLevel] }),
7667
+ /* @__PURE__ */ jsxRuntime.jsx(
7668
+ PrimaryButton,
7669
+ {
7670
+ "data-test-id": "strategy-grid-card-simple-invest",
7671
+ "aria-label": `${investLabel} ${title}`,
7672
+ onClick: onInvestClick,
7673
+ className: "h-9 text-[13px] px-[var(--deframe-widget-size-padding-x-md)]",
7674
+ children: investLabel
7675
+ }
7676
+ )
7677
+ ] })
7678
+ ]
7679
+ }
7680
+ );
7681
+ };
7620
7682
  var BackButton = ({ onClick, ariaLabel = "Back", className }) => {
7621
7683
  const baseClasses = "w-12 h-12 rounded-[var(--deframe-widget-size-radius-full)] flex items-center justify-center text-[color:var(--deframe-widget-color-text-secondary)] hover:text-[color:var(--deframe-widget-color-brand-primary)] transition-colors cursor-pointer";
7622
7684
  return /* @__PURE__ */ jsxRuntime.jsx(
@@ -7778,551 +7840,1315 @@ var GroupedStrategyListView = ({
7778
7840
  ] })
7779
7841
  ] });
7780
7842
  };
7781
- var DateLabel = ({ children }) => {
7782
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-text-sm-mobile font-poppins text-[color:var(--deframe-widget-color-text-secondary)] dark:text-[color:var(--deframe-widget-color-text-secondary-dark)]", children });
7783
- };
7784
- var ArrowBadge = ({ isDeposit }) => {
7785
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-[-2px] right-[-2px] w-[15px] h-[15px] rounded-full bg-[var(--deframe-widget-color-bg-secondary)] dark:bg-[var(--deframe-widget-color-bg-secondary-dark)] flex items-center justify-center border border-[color:var(--deframe-widget-color-bg-secondary)] dark:border-[color:var(--deframe-widget-color-bg-secondary-dark)]", children: isDeposit ? /* @__PURE__ */ jsxRuntime.jsx(md.MdArrowDownward, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-primary)] dark:text-[color:var(--deframe-widget-color-text-primary-dark)]" }) : /* @__PURE__ */ jsxRuntime.jsx(md.MdArrowUpward, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-primary)] dark:text-[color:var(--deframe-widget-color-text-primary-dark)]" }) });
7786
- };
7787
- var TokenIconWithBadge2 = ({ src, alt, isDeposit }) => {
7788
- const fallbackText = encodeURIComponent((alt || "TOK").slice(0, 3).toUpperCase());
7789
- const fallbackSrc = `https://placehold.co/40x40?text=${fallbackText}`;
7790
- const resolvedSrc = src || fallbackSrc;
7791
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-shrink-0", children: [
7792
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-xl bg-[var(--deframe-widget-color-bg-tertiary)] dark:bg-[var(--deframe-widget-color-bg-tertiary-dark)] flex items-center justify-center overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
7793
- "img",
7794
- {
7795
- src: resolvedSrc,
7796
- alt,
7797
- className: "w-full h-full object-cover",
7798
- onError: (e) => {
7799
- e.target.src = fallbackSrc;
7800
- }
7801
- }
7802
- ) }),
7803
- /* @__PURE__ */ jsxRuntime.jsx(ArrowBadge, { isDeposit })
7804
- ] });
7805
- };
7806
- var SwapIconWithBadge = ({ src, alt }) => {
7807
- const fallbackText = encodeURIComponent((alt || "TOK").slice(0, 3).toUpperCase());
7808
- const fallbackSrc = `https://placehold.co/40x40?text=${fallbackText}`;
7809
- const resolvedSrc = src || fallbackSrc;
7810
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-shrink-0", children: [
7811
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-xl bg-[var(--deframe-widget-color-bg-tertiary)] dark:bg-[var(--deframe-widget-color-bg-tertiary-dark)] flex items-center justify-center overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
7812
- "img",
7813
- {
7814
- src: resolvedSrc,
7815
- alt,
7816
- className: "w-full h-full object-cover",
7817
- onError: (e) => {
7818
- e.target.src = fallbackSrc;
7819
- }
7820
- }
7821
- ) }),
7822
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-[-2px] right-[-2px] w-[15px] h-[15px] rounded-full bg-[var(--deframe-widget-color-bg-secondary)] dark:bg-[var(--deframe-widget-color-bg-secondary-dark)] flex items-center justify-center border border-[color:var(--deframe-widget-color-bg-secondary)] dark:border-[color:var(--deframe-widget-color-bg-secondary-dark)]", children: /* @__PURE__ */ jsxRuntime.jsx(md.MdArrowUpward, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-primary)] dark:text-[color:var(--deframe-widget-color-text-primary-dark)]" }) })
7823
- ] });
7824
- };
7825
- var AmountDisplay = ({ amount, usdAmount }) => {
7826
- return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
7827
- /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-accent-sm-mobile whitespace-nowrap", children: amount }),
7828
- usdAmount ? /* @__PURE__ */ jsxRuntime.jsx(Label, { variant: "secondary", className: "whitespace-nowrap", children: usdAmount }) : null
7829
- ] });
7830
- };
7831
- var HistoryListView = ({
7832
- groups,
7833
- showLoadMore,
7834
- onLoadMore,
7835
- loadMoreLabel,
7836
- itemClassName
7843
+ var DEFAULT_COLOR_TOKEN = "var(--deframe-widget-color-brand-primary)";
7844
+ var ImageBannerCard = ({
7845
+ imageUrl,
7846
+ alt,
7847
+ onClick,
7848
+ apyFormatted,
7849
+ description,
7850
+ colorToken = DEFAULT_COLOR_TOKEN
7837
7851
  }) => {
7838
- if (groups.length === 0) {
7839
- return null;
7840
- }
7841
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "self-stretch flex flex-col gap-[16px]", children: [
7842
- groups.map((group) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "self-stretch flex flex-col gap-sm", children: [
7843
- /* @__PURE__ */ jsxRuntime.jsx(DateLabel, { children: group.dateLabel }),
7844
- group.items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
7845
- ListItem,
7846
- {
7847
- onClick: () => item.onClick(),
7848
- containerClassName: tailwindMerge.twMerge("!rounded-xs !border-0 !min-h-[72px]", itemClassName),
7849
- children: [
7850
- /* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: item.isSwap ? /* @__PURE__ */ jsxRuntime.jsx(SwapIconWithBadge, { src: item.iconUrl, alt: item.iconAlt }) : /* @__PURE__ */ jsxRuntime.jsx(
7851
- TokenIconWithBadge2,
7852
- {
7853
- src: item.iconUrl,
7854
- alt: item.iconAlt,
7855
- isDeposit: item.isDeposit
7856
- }
7857
- ) }),
7858
- /* @__PURE__ */ jsxRuntime.jsxs(ListItemContent, { children: [
7859
- /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-text-lg-mobile", children: item.title }),
7860
- /* @__PURE__ */ jsxRuntime.jsx(Label, { variant: "secondary", className: "text-[color:var(--deframe-widget-color-text-tertiary)] dark:text-[color:var(--deframe-widget-color-text-tertiary-dark)]", children: item.subtitle }),
7861
- item.status === "PENDING" && item.statusLabel ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-[6px]", children: /* @__PURE__ */ jsxRuntime.jsx(
7862
- ProcessingBadge,
7852
+ const isClickable = !!onClick;
7853
+ return /* @__PURE__ */ jsxRuntime.jsx(
7854
+ "button",
7855
+ {
7856
+ type: "button",
7857
+ "data-slot": "image-banner-card",
7858
+ "data-test-id": "image-banner-card",
7859
+ "aria-label": alt,
7860
+ onClick,
7861
+ className: tailwindMerge.twMerge(
7862
+ "relative w-full overflow-hidden text-left",
7863
+ "rounded-[var(--deframe-widget-size-radius-md)]",
7864
+ "border",
7865
+ "transition-[transform,opacity] duration-150",
7866
+ isClickable ? "cursor-pointer active:scale-[0.98]" : "cursor-default"
7867
+ ),
7868
+ style: {
7869
+ background: `linear-gradient(to right, color-mix(in srgb, ${colorToken} 10%, #080a0e) 0%, #080a0e 55%, #050507 100%)`,
7870
+ borderColor: `color-mix(in srgb, ${colorToken} 22%, transparent)`
7871
+ },
7872
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-row items-stretch w-full", children: [
7873
+ /* @__PURE__ */ jsxRuntime.jsxs(
7874
+ "div",
7875
+ {
7876
+ className: "flex flex-col gap-[var(--deframe-widget-size-gap-xs)] z-[1] px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-xl)]",
7877
+ style: { flex: imageUrl ? "0 0 55%" : "1 1 auto" },
7878
+ children: [
7879
+ /* @__PURE__ */ jsxRuntime.jsx(
7880
+ "span",
7863
7881
  {
7864
- label: item.statusLabel,
7865
- title: item.statusTitle,
7866
- size: "compact"
7882
+ "data-test-id": "image-banner-card-name",
7883
+ className: "text-[length:var(--deframe-widget-font-size-xs)] [font-weight:var(--deframe-widget-font-weight-medium)] font-[var(--deframe-widget-font-family)] uppercase tracking-[0.08em]",
7884
+ style: { color: `color-mix(in srgb, ${colorToken} 80%, var(--deframe-widget-color-text-secondary))` },
7885
+ children: alt
7867
7886
  }
7868
- ) }) : null
7869
- ] }),
7870
- /* @__PURE__ */ jsxRuntime.jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxRuntime.jsx(AmountDisplay, { amount: item.amountFormatted, usdAmount: item.amountUsd }) })
7871
- ]
7872
- },
7873
- item.id
7874
- ))
7875
- ] }, group.dateLabel)),
7876
- showLoadMore && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center pt-sm", children: /* @__PURE__ */ jsxRuntime.jsx(TertiaryButton, { onClick: onLoadMore, children: loadMoreLabel }) })
7877
- ] });
7878
- };
7879
- var OverviewEarnWidgetTabSkeleton = () => {
7880
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex flex-col gap-md", children: [
7881
- /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "100%", height: "40px", variant: "rect" }),
7882
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-sm", children: [
7883
- /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "100%", height: "144px", variant: "rect" }),
7884
- /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "100%", height: "144px", variant: "rect" })
7885
- ] }),
7886
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
7887
- /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "128px", height: "20px", variant: "text", className: "mb-sm" }),
7888
- /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "100%", height: "80px", variant: "rect" })
7889
- ] }),
7890
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
7891
- /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "96px", height: "20px", variant: "text", className: "mb-sm" }),
7892
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-sm", children: [
7893
- /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "100%", height: "64px", variant: "rect" }),
7894
- /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "100%", height: "64px", variant: "rect" }),
7895
- /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "100%", height: "64px", variant: "rect" }),
7896
- /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "100%", height: "64px", variant: "rect" })
7887
+ ),
7888
+ apyFormatted && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": "image-banner-card-apy", className: "flex items-baseline gap-[4px]", children: [
7889
+ /* @__PURE__ */ jsxRuntime.jsx(
7890
+ "span",
7891
+ {
7892
+ className: "text-[38px] [font-weight:var(--deframe-widget-font-weight-bold)] font-[var(--deframe-widget-font-family)] leading-[1]",
7893
+ style: { color: colorToken },
7894
+ children: apyFormatted
7895
+ }
7896
+ ),
7897
+ /* @__PURE__ */ jsxRuntime.jsx(
7898
+ "span",
7899
+ {
7900
+ className: "text-[length:var(--deframe-widget-font-size-xs)] [font-weight:var(--deframe-widget-font-weight-semibold)] font-[var(--deframe-widget-font-family)] uppercase tracking-[0.1em]",
7901
+ style: { color: `color-mix(in srgb, ${colorToken} 60%, transparent)` },
7902
+ children: "APY"
7903
+ }
7904
+ )
7905
+ ] }),
7906
+ description && /* @__PURE__ */ jsxRuntime.jsx(
7907
+ "span",
7908
+ {
7909
+ "data-test-id": "image-banner-card-description",
7910
+ className: "text-[length:var(--deframe-widget-font-size-xs)] leading-[var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]",
7911
+ children: description
7912
+ }
7913
+ )
7914
+ ]
7915
+ }
7916
+ ),
7917
+ imageUrl && /* @__PURE__ */ jsxRuntime.jsxs(
7918
+ "div",
7919
+ {
7920
+ "data-test-id": "image-banner-card-image-wrapper",
7921
+ className: "relative flex-1 overflow-hidden",
7922
+ style: { minHeight: 160 },
7923
+ children: [
7924
+ /* @__PURE__ */ jsxRuntime.jsx(
7925
+ "img",
7926
+ {
7927
+ "data-test-id": "image-banner-card-image",
7928
+ src: imageUrl,
7929
+ alt: "",
7930
+ "aria-hidden": "true",
7931
+ className: "absolute inset-0 w-full h-full object-cover object-center"
7932
+ }
7933
+ ),
7934
+ /* @__PURE__ */ jsxRuntime.jsx(
7935
+ "div",
7936
+ {
7937
+ className: "absolute inset-0",
7938
+ style: {
7939
+ background: "linear-gradient(to right, #080a0e 0%, transparent 40%)"
7940
+ }
7941
+ }
7942
+ )
7943
+ ]
7944
+ }
7945
+ )
7897
7946
  ] })
7898
- ] })
7899
- ] });
7947
+ }
7948
+ );
7900
7949
  };
7901
- var EarnOverviewView = ({
7902
- selectedTab,
7903
- onTabChange,
7904
- labels,
7905
- overview,
7906
- explore,
7907
- history
7950
+ var GRID_COLS = "grid grid-cols-[1fr_100px_130px] gap-x-[var(--deframe-widget-size-gap-md)]";
7951
+ var HISTORY_PAGE_SIZE = 5;
7952
+ var HISTORY_CONFIG = {
7953
+ deposit: { label: "Depositado", color: "var(--deframe-widget-color-state-info)" },
7954
+ withdraw: { label: "Sacado", color: "var(--deframe-widget-color-text-secondary)" },
7955
+ interest: { label: "Juros Recebidos", color: "var(--deframe-widget-color-brand-primary)" }
7956
+ };
7957
+ var EarnHubStrategyCard = ({
7958
+ logoUrl,
7959
+ assetName,
7960
+ network,
7961
+ investedFormatted,
7962
+ earningsFormatted,
7963
+ isLoading,
7964
+ onInvestClick,
7965
+ onWithdrawClick,
7966
+ history = [],
7967
+ labels
7908
7968
  }) => {
7909
- return /* @__PURE__ */ jsxRuntime.jsx(BackgroundContainer, { className: "flex flex-col flex-1 min-h-0 px-0", children: /* @__PURE__ */ jsxRuntime.jsxs(Tabs, { value: selectedTab, onValueChange: onTabChange, variant: "default", className: "flex flex-col flex-1 min-h-0", children: [
7910
- /* @__PURE__ */ jsxRuntime.jsxs(TabsList, { className: "justify-between w-full", children: [
7911
- /* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { value: "overview", className: "flex-1", children: labels.tabs.overview }),
7912
- /* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { value: "explore", className: "flex-1", children: labels.tabs.explore }),
7913
- /* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { value: "history", className: "flex-1", children: labels.tabs.history })
7914
- ] }),
7915
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col flex-1 w-full min-h-0 px-md pt-md", children: [
7916
- /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "overview", className: "flex flex-col flex-1 min-h-0", children: overview.isLoading ? /* @__PURE__ */ jsxRuntime.jsx(OverviewEarnWidgetTabSkeleton, {}) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
7917
- /* @__PURE__ */ jsxRuntime.jsx(WalletBalances, { cards: overview.walletBalances }),
7918
- /* @__PURE__ */ jsxRuntime.jsx(GroupedStrategyListView, __spreadValues({}, overview.groupedStrategies))
7919
- ] }) }),
7920
- /* @__PURE__ */ jsxRuntime.jsxs(TabsContent, { value: "explore", children: [
7921
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 w-full mb-4 h-12", children: /* @__PURE__ */ jsxRuntime.jsx(
7922
- SearchInput,
7969
+ var _a, _b, _c, _d, _e;
7970
+ const [expanded, setExpanded] = React6__namespace.default.useState(false);
7971
+ const [showAll, setShowAll] = React6__namespace.default.useState(false);
7972
+ const investLabel = (_a = labels == null ? void 0 : labels.investLabel) != null ? _a : "Depositar";
7973
+ const withdrawLabel = (_b = labels == null ? void 0 : labels.withdrawLabel) != null ? _b : "Sacar";
7974
+ const historyTitle = (_c = labels == null ? void 0 : labels.historyTitle) != null ? _c : "Hist\xF3rico";
7975
+ const visibleHistory = showAll ? history : history.slice(0, HISTORY_PAGE_SIZE);
7976
+ const hasMore = history.length > HISTORY_PAGE_SIZE && !showAll;
7977
+ return /* @__PURE__ */ jsxRuntime.jsxs(
7978
+ "li",
7979
+ {
7980
+ "data-slot": "earn-hub-strategy-card",
7981
+ "data-test-id": "earn-hub-strategy-card",
7982
+ className: "border-t border-[color:var(--deframe-widget-color-border-secondary)] list-none",
7983
+ children: [
7984
+ /* @__PURE__ */ jsxRuntime.jsxs(
7985
+ "div",
7923
7986
  {
7924
- value: explore.searchValue,
7925
- onChange: (value) => explore.onSearchChange(value),
7926
- placeholder: explore.searchPlaceholder
7987
+ "data-slot": "earn-hub-strategy-card-main",
7988
+ onClick: () => setExpanded((v) => !v),
7989
+ className: tailwindMerge.twMerge(
7990
+ GRID_COLS,
7991
+ "items-center cursor-pointer",
7992
+ "px-[var(--deframe-widget-size-padding-x-md)] py-[13px]",
7993
+ "transition-colors duration-150",
7994
+ "hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_60%,transparent)]"
7995
+ ),
7996
+ children: [
7997
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)] min-w-0", children: [
7998
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[36px] h-[36px] rounded-full bg-[var(--deframe-widget-color-bg-tertiary)] flex items-center justify-center overflow-hidden shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("img", { alt: assetName, src: logoUrl, referrerPolicy: "no-referrer", className: "w-full h-full object-contain" }) }),
7999
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col min-w-0", children: [
8000
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)] leading-[var(--deframe-widget-font-leading-sm)] font-[var(--deframe-widget-font-family)] truncate", children: assetName }),
8001
+ network && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-xs)] text-[color:var(--deframe-widget-color-text-secondary)] leading-[var(--deframe-widget-font-leading-xs)]", children: network })
8002
+ ] })
8003
+ ] }),
8004
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center", children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant: "rect", width: 40, height: 16 }) : /* @__PURE__ */ jsxRuntime.jsx(
8005
+ "span",
8006
+ {
8007
+ className: "text-[length:var(--deframe-widget-font-size-md)] [font-weight:var(--deframe-widget-font-weight-bold)] font-[var(--deframe-widget-font-family)] leading-none",
8008
+ style: { color: "var(--deframe-widget-color-brand-primary)" },
8009
+ children: earningsFormatted
8010
+ }
8011
+ ) }),
8012
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-[var(--deframe-widget-size-gap-xs)]", children: [
8013
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-end", children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant: "rect", width: 60, height: 16 }) : investedFormatted ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
8014
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)] leading-[var(--deframe-widget-font-leading-sm)] font-[var(--deframe-widget-font-family)]", children: investedFormatted }),
8015
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-xs)] text-[color:var(--deframe-widget-color-text-secondary)] leading-[var(--deframe-widget-font-leading-xs)]", children: (_d = labels == null ? void 0 : labels.investedLabel) != null ? _d : "investido" })
8016
+ ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-xs)] text-[color:var(--deframe-widget-color-text-tertiary)]", children: "\u2014" }) }),
8017
+ /* @__PURE__ */ jsxRuntime.jsx(
8018
+ "svg",
8019
+ {
8020
+ width: "16",
8021
+ height: "16",
8022
+ viewBox: "0 0 16 16",
8023
+ fill: "none",
8024
+ "aria-hidden": "true",
8025
+ className: tailwindMerge.twMerge(
8026
+ "flex-shrink-0 text-[color:var(--deframe-widget-color-text-tertiary)] transition-transform duration-200",
8027
+ expanded && "rotate-180"
8028
+ ),
8029
+ children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 6L8 10L12 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
8030
+ }
8031
+ )
8032
+ ] })
8033
+ ]
7927
8034
  }
7928
- ) }),
7929
- explore.isLoading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
7930
- explore.loadingLabel,
7931
- /* @__PURE__ */ jsxRuntime.jsx(LoadingDots, {})
7932
- ] }) : explore.error ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 text-center text-red-500", children: [
7933
- explore.errorLabel,
7934
- ": ",
7935
- explore.error.message
7936
- ] }) : explore.hasFilters && explore.strategies.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full py-md bg-bg-default dark:bg-bg-default-dark rounded-lg flex flex-col gap-sm flex-shrink-0", children: [
7937
- /* @__PURE__ */ jsxRuntime.jsx(
7938
- ChipGroup,
7939
- {
7940
- options: explore.chipOptions,
7941
- selected: explore.selectedCategory,
7942
- onSelect: (value) => explore.onCategorySelect(value)
7943
- }
7944
- ),
7945
- /* @__PURE__ */ jsxRuntime.jsx(SearchEmptyState, { title: explore.emptySearchTitle, description: explore.emptySearchDescription })
7946
- ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full py-md bg-bg-default dark:bg-bg-default-dark rounded-lg flex flex-col gap-sm flex-shrink-0", children: [
7947
- /* @__PURE__ */ jsxRuntime.jsx(
7948
- ChipGroup,
7949
- {
7950
- options: explore.chipOptions,
7951
- selected: explore.selectedCategory,
7952
- onSelect: (value) => explore.onCategorySelect(value)
7953
- }
7954
- ),
7955
- /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h5", children: explore.bestPerformanceLabel }),
7956
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-sm", children: explore.strategies.map((s) => /* @__PURE__ */ jsxRuntime.jsxs(ListItem, { onClick: () => s.onClick(), children: [
7957
- /* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: s.logoUrl, alt: s.subtitle, className: "w-10 h-10 rounded-full" }) }),
7958
- /* @__PURE__ */ jsxRuntime.jsxs(ListItemContent, { children: [
7959
- /* @__PURE__ */ jsxRuntime.jsx(TextBody, { children: s.title }),
7960
- /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: s.subtitle })
7961
- ] }),
7962
- /* @__PURE__ */ jsxRuntime.jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { children: s.apyFormatted }) })
7963
- ] }, s.id)) })
7964
- ] })
7965
- ] }),
7966
- /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "history", children: history.isLoading ? /* @__PURE__ */ jsxRuntime.jsx(HistoryListSkeleton, {}) : history.isEmpty ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-[90vh] py-md bg-bg-default dark:bg-bg-default-dark rounded-lg flex flex-col justify-center items-center gap-sm overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex flex-col justify-center items-center gap-md", children: [
7967
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-center items-center gap-md text-center", children: [
7968
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-20 h-20 bg-bg-muted dark:bg-bg-muted-dark rounded-full flex justify-center items-center", children: /* @__PURE__ */ jsxRuntime.jsx(pi.PiClockCountdownBold, { className: "w-10 h-10 text-text-tertiary dark:text-text-tertiary-dark" }) }),
7969
- /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h3", children: history.emptyTitle })
7970
- ] }),
7971
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "self-stretch text-center", children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: history.emptyDescription }) })
7972
- ] }) }) : /* @__PURE__ */ jsxRuntime.jsx(
7973
- HistoryListView,
7974
- {
7975
- groups: history.groups,
7976
- showLoadMore: history.showLoadMore,
7977
- onLoadMore: () => history.onLoadMore(),
7978
- loadMoreLabel: history.loadMoreLabel
7979
- }
7980
- ) })
7981
- ] })
7982
- ] }) });
7983
- };
7984
- var EarnInvestmentSummaryView = ({
7985
- overviewDescription,
7986
- totalInvestedLabel,
7987
- totalInvestedValue,
7988
- totalReturnLabel,
7989
- totalReturnValue,
7990
- processingBadgeLabel,
7991
- processingBadgeTitle,
7992
- className
7993
- }) => {
7994
- return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: tailwindMerge.twMerge("flex flex-col gap-md p-lg bg-[var(--deframe-widget-color-bg-subtle)] rounded", className), children: [
7995
- /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)] dark:text-[color:var(--deframe-widget-color-text-secondary-dark)]", children: overviewDescription }),
7996
- /* @__PURE__ */ jsxRuntime.jsx(
7997
- WalletBalances,
7998
- {
7999
- cards: [
8035
+ ),
8036
+ expanded && /* @__PURE__ */ jsxRuntime.jsxs(
8037
+ "div",
8000
8038
  {
8001
- label: totalInvestedLabel,
8002
- value: totalInvestedValue,
8003
- badge: processingBadgeLabel ? /* @__PURE__ */ jsxRuntime.jsx(
8004
- ProcessingBadge,
8005
- {
8006
- label: processingBadgeLabel,
8007
- title: processingBadgeTitle
8008
- }
8009
- ) : void 0
8010
- },
8011
- { label: totalReturnLabel, value: totalReturnValue }
8012
- ],
8013
- variant: "raised",
8014
- className: "grid grid-cols-2 gap-md !mt-0"
8015
- }
8016
- )
8017
- ] });
8039
+ "data-test-id": "earn-hub-strategy-card-detail",
8040
+ className: "px-[var(--deframe-widget-size-padding-x-md)] pb-[var(--deframe-widget-size-padding-y-md)]",
8041
+ children: [
8042
+ /* @__PURE__ */ jsxRuntime.jsxs(
8043
+ "div",
8044
+ {
8045
+ className: "flex gap-[var(--deframe-widget-size-gap-sm)] mb-[var(--deframe-widget-size-gap-md)]",
8046
+ onClick: (e) => e.stopPropagation(),
8047
+ children: [
8048
+ onWithdrawClick != null && /* @__PURE__ */ jsxRuntime.jsx(
8049
+ SecondaryButton,
8050
+ {
8051
+ className: "h-9 text-[13px] flex-1",
8052
+ onClick: onWithdrawClick,
8053
+ children: withdrawLabel
8054
+ }
8055
+ ),
8056
+ onInvestClick != null && /* @__PURE__ */ jsxRuntime.jsx(
8057
+ PrimaryButton,
8058
+ {
8059
+ className: "h-9 text-[13px] flex-1",
8060
+ onClick: onInvestClick,
8061
+ children: investLabel
8062
+ }
8063
+ )
8064
+ ]
8065
+ }
8066
+ ),
8067
+ history.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": "earn-hub-strategy-card-history", children: [
8068
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-xs)] [font-weight:var(--deframe-widget-font-weight-medium)] uppercase tracking-[0.08em] text-[color:var(--deframe-widget-color-text-tertiary)]", children: historyTitle }),
8069
+ /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "list-none m-0 p-0", children: visibleHistory.map((entry) => {
8070
+ var _a2;
8071
+ const config = (_a2 = HISTORY_CONFIG[entry.type]) != null ? _a2 : HISTORY_CONFIG.deposit;
8072
+ const isClickable = !!entry.onClick;
8073
+ return /* @__PURE__ */ jsxRuntime.jsxs(
8074
+ "li",
8075
+ {
8076
+ "data-test-id": "earn-hub-strategy-card-history-entry",
8077
+ onClick: entry.onClick ? () => entry.onClick() : void 0,
8078
+ className: tailwindMerge.twMerge(
8079
+ "flex items-center justify-between gap-[var(--deframe-widget-size-gap-md)]",
8080
+ "py-[10px]",
8081
+ "border-t border-[color:var(--deframe-widget-color-border-tertiary)]",
8082
+ isClickable && "cursor-pointer hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_40%,transparent)] rounded-[var(--deframe-widget-size-radius-xs)]"
8083
+ ),
8084
+ children: [
8085
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)] min-w-0", children: [
8086
+ /* @__PURE__ */ jsxRuntime.jsx(
8087
+ "span",
8088
+ {
8089
+ className: "w-[6px] h-[6px] rounded-full flex-shrink-0",
8090
+ style: { background: config.color }
8091
+ }
8092
+ ),
8093
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-xs)] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)] leading-none flex-shrink-0", children: entry.date }),
8094
+ /* @__PURE__ */ jsxRuntime.jsx(
8095
+ "span",
8096
+ {
8097
+ className: "text-[length:var(--deframe-widget-font-size-xs)] [font-weight:var(--deframe-widget-font-weight-medium)] font-[var(--deframe-widget-font-family)] leading-none",
8098
+ style: { color: config.color },
8099
+ children: config.label
8100
+ }
8101
+ )
8102
+ ] }),
8103
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-xs)] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)] font-[var(--deframe-widget-font-family)] leading-none flex-shrink-0", children: entry.amount })
8104
+ ]
8105
+ },
8106
+ entry.id
8107
+ );
8108
+ }) }),
8109
+ hasMore && /* @__PURE__ */ jsxRuntime.jsx(
8110
+ "button",
8111
+ {
8112
+ type: "button",
8113
+ onClick: () => setShowAll(true),
8114
+ className: tailwindMerge.twMerge(
8115
+ "mt-[var(--deframe-widget-size-gap-sm)] w-full",
8116
+ "text-[length:var(--deframe-widget-font-size-xs)] [font-weight:var(--deframe-widget-font-weight-medium)]",
8117
+ "text-[color:var(--deframe-widget-color-text-secondary)]",
8118
+ "font-[var(--deframe-widget-font-family)]",
8119
+ "hover:text-[color:var(--deframe-widget-color-brand-primary)]",
8120
+ "transition-colors duration-150 cursor-pointer",
8121
+ "py-[var(--deframe-widget-size-padding-y-xs)]",
8122
+ "border-t border-[color:var(--deframe-widget-color-border-tertiary)]",
8123
+ "outline-none bg-transparent border-x-0 border-b-0"
8124
+ ),
8125
+ children: (_e = labels == null ? void 0 : labels.showMoreLabel) != null ? _e : `Ver mais (${history.length - HISTORY_PAGE_SIZE} itens)`
8126
+ }
8127
+ )
8128
+ ] })
8129
+ ]
8130
+ }
8131
+ )
8132
+ ]
8133
+ }
8134
+ );
8018
8135
  };
8019
- var EarnInvestedSectionView = ({
8020
- sectionTitle,
8021
- items,
8022
- onItemClick,
8023
- className
8024
- }) => {
8025
- if (items.length === 0) {
8026
- return null;
8027
- }
8136
+ var SimpleEmptyState = () => {
8028
8137
  return /* @__PURE__ */ jsxRuntime.jsxs(
8029
- "section",
8138
+ "div",
8030
8139
  {
8031
- className: tailwindMerge.twMerge(
8032
- "flex flex-col gap-[var(--deframe-widget-size-gap-md)] p-[var(--deframe-widget-size-padding-x-lg)]",
8033
- "bg-[var(--deframe-widget-color-bg-subtle)] rounded-[var(--deframe-widget-size-radius-sm)]",
8034
- className
8035
- ),
8140
+ "data-slot": "earn-empty-state",
8141
+ "data-test-id": "earn-empty-state",
8142
+ className: "flex flex-col items-center justify-center gap-[var(--deframe-widget-size-gap-sm)] px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-xl)] border-t border-[color:var(--deframe-widget-color-border-secondary)]",
8036
8143
  children: [
8037
- /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: sectionTitle }),
8038
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-md)]", children: items.map((item, index) => {
8039
- const isLast = index === items.length - 1;
8040
- return /* @__PURE__ */ jsxRuntime.jsxs(
8041
- "button",
8042
- {
8043
- type: "button",
8044
- onClick: () => onItemClick == null ? void 0 : onItemClick(item.strategyId),
8045
- className: tailwindMerge.twMerge(
8046
- "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)]",
8047
- "transition-colors cursor-pointer text-left w-full",
8048
- !isLast && "border-b border-[var(--deframe-widget-color-border-secondary)]"
8049
- ),
8050
- children: [
8051
- /* @__PURE__ */ jsxRuntime.jsx(
8052
- "img",
8053
- {
8054
- src: item.logoUrl,
8055
- alt: item.assetName,
8056
- className: "w-10 h-10 rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0"
8057
- }
8058
- ),
8059
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col flex-1 min-w-0", children: [
8060
- /* @__PURE__ */ jsxRuntime.jsx(TextBody, { className: "font-medium truncate", children: item.assetName }),
8061
- /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-tertiary)] truncate", children: item.subtitle })
8062
- ] }),
8063
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end flex-shrink-0", children: [
8064
- /* @__PURE__ */ jsxRuntime.jsx(TextBody, { className: "font-medium", children: item.balanceFormatted }),
8065
- /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: item.profitFormatted })
8066
- ] })
8067
- ]
8144
+ /* @__PURE__ */ jsxRuntime.jsx(
8145
+ "div",
8146
+ {
8147
+ className: "flex h-[48px] w-[48px] items-center justify-center rounded-full",
8148
+ style: {
8149
+ background: "color-mix(in srgb, var(--deframe-widget-color-brand-primary) 10%, transparent)",
8150
+ color: "var(--deframe-widget-color-brand-primary)"
8068
8151
  },
8069
- item.strategyId
8070
- );
8071
- }) })
8152
+ children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
8153
+ /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "8", r: "4", stroke: "currentColor", strokeWidth: "1.5" }),
8154
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 20c0-4 3.6-7 8-7s8 3 8 7", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
8155
+ ] })
8156
+ }
8157
+ ),
8158
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-[var(--deframe-widget-size-gap-xs)] text-center", children: [
8159
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-md)] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)] font-[var(--deframe-widget-font-family)]", children: "Nenhuma caixinha ativa" }),
8160
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "max-w-[240px] text-[length:var(--deframe-widget-font-size-sm)] leading-[var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]", children: "Escolha uma das caixinhas acima para come\xE7ar a render." })
8161
+ ] })
8072
8162
  ]
8073
8163
  }
8074
8164
  );
8075
8165
  };
8076
- var EarnExploreGridView = ({
8077
- sectionTitle,
8078
- loadingLabel,
8079
- errorLabel,
8080
- emptySearchTitle,
8081
- emptySearchDescription,
8166
+ var EARN_CATEGORY_DEFINITIONS = [
8167
+ {
8168
+ id: "dolar",
8169
+ imageUrl: "/mascot-usd.png",
8170
+ alt: "Caixinha de D\xF3lar",
8171
+ title: "Caixinha de D\xF3lar",
8172
+ assetFilter: ["USDC", "USDT", "DAI", "thbill"]
8173
+ },
8174
+ {
8175
+ id: "real",
8176
+ imageUrl: "/mascot-brl.png",
8177
+ alt: "Caixinha de Real",
8178
+ title: "Caixinha de Real",
8179
+ assetFilter: ["BRLA"]
8180
+ }
8181
+ ];
8182
+ var wrapperBaseClasses = [
8183
+ "w-full max-w-[900px] mx-auto flex flex-col",
8184
+ "gap-[var(--deframe-widget-size-gap-md)]"
8185
+ ].join(" ");
8186
+ var statCardClasses = [
8187
+ "w-full self-start flex flex-col gap-[var(--deframe-widget-size-gap-sm)]",
8188
+ "bg-[var(--deframe-widget-color-bg-secondary)]",
8189
+ "border border-[color:var(--deframe-widget-color-border-secondary)]",
8190
+ "rounded-[var(--deframe-widget-size-radius-md)]",
8191
+ "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]"
8192
+ ].join(" ");
8193
+ var statCardLabelClasses = [
8194
+ "text-[color:var(--deframe-widget-color-text-tertiary)]",
8195
+ "text-[11px] [font-weight:var(--deframe-widget-font-weight-medium)]",
8196
+ "uppercase tracking-[0.08em] [line-height:1.4]"
8197
+ ].join(" ");
8198
+ var statCardValueDefaultClasses = [
8199
+ "text-[color:var(--deframe-widget-color-text-primary)]",
8200
+ "text-[28px] [font-weight:var(--deframe-widget-font-weight-bold)] [line-height:1.15]"
8201
+ ].join(" ");
8202
+ var statCardValuePositiveClasses = [
8203
+ "text-[color:var(--deframe-widget-color-brand-primary)]",
8204
+ "text-[28px] [font-weight:var(--deframe-widget-font-weight-bold)] [line-height:1.15]"
8205
+ ].join(" ");
8206
+ var statCardDescriptionClasses = [
8207
+ "text-[color:var(--deframe-widget-color-text-secondary)]",
8208
+ "text-[13px] [line-height:1.45]"
8209
+ ].join(" ");
8210
+ var listPanelClasses = [
8211
+ "w-full self-start flex flex-col",
8212
+ "bg-[var(--deframe-widget-color-bg-secondary)]",
8213
+ "border border-[color:var(--deframe-widget-color-border-secondary)]",
8214
+ "rounded-[var(--deframe-widget-size-radius-md)]",
8215
+ "overflow-hidden"
8216
+ ].join(" ");
8217
+ var sectionHeaderClasses = [
8218
+ "flex items-center justify-between",
8219
+ "px-[var(--deframe-widget-size-padding-x-md)]",
8220
+ "pt-[var(--deframe-widget-size-padding-y-md)]",
8221
+ "pb-[var(--deframe-widget-size-padding-y-sm)]"
8222
+ ].join(" ");
8223
+ var sectionTitleClasses = [
8224
+ "text-[color:var(--deframe-widget-color-text-primary)]",
8225
+ "text-[length:var(--deframe-widget-font-size-md)]",
8226
+ "[font-weight:var(--deframe-widget-font-weight-semibold)]",
8227
+ "font-[var(--deframe-widget-font-family)]",
8228
+ "leading-[var(--deframe-widget-font-leading-md)]"
8229
+ ].join(" ");
8230
+ var columnHeaderClasses = [
8231
+ "text-[length:var(--deframe-widget-font-size-xs)]",
8232
+ "[font-weight:var(--deframe-widget-font-weight-medium)]",
8233
+ "uppercase tracking-[0.08em]",
8234
+ "text-[color:var(--deframe-widget-color-text-tertiary)]",
8235
+ "leading-[var(--deframe-widget-font-leading-xs)]"
8236
+ ].join(" ");
8237
+ var GRID_COLS2 = "grid grid-cols-[1fr_100px_130px] gap-x-[var(--deframe-widget-size-gap-md)]";
8238
+ var BANNER_COLORS = [
8239
+ "var(--deframe-widget-color-brand-primary)",
8240
+ "var(--deframe-widget-color-brand-secondary)"
8241
+ ];
8242
+ var STABLECOIN_SYMBOLS = /* @__PURE__ */ new Set(["USDC", "USDT", "DAI"]);
8243
+ var DEFAULT_POSITIONS = { positions: [], summary: { totalUnderlyingBalanceUSD: 0, totalProfitInUSD: 0 } };
8244
+ var defaultFormatCurrency = (amount) => `$${amount.toFixed(2)}`;
8245
+ var EarnDesktopViewSimple = ({
8246
+ positions = DEFAULT_POSITIONS,
8247
+ strategies = [],
8248
+ historyItems = [],
8249
+ formatCurrency = defaultFormatCurrency,
8250
+ locale = "pt-BR",
8251
+ onDeposit,
8252
+ onWithdraw,
8253
+ onDetails,
8254
+ onHistoryDetail,
8255
+ onHistory,
8082
8256
  isLoading,
8083
- error,
8084
- strategies,
8085
- searchBar,
8086
- chipGroup,
8087
- hasFilters,
8088
- onStrategyClick,
8089
8257
  className
8090
8258
  }) => {
8091
- const showEmptyState = hasFilters && strategies.length === 0;
8092
- if (isLoading) {
8093
- return /* @__PURE__ */ jsxRuntime.jsxs(
8094
- "section",
8095
- {
8096
- className: tailwindMerge.twMerge(
8097
- "flex flex-col gap-[var(--deframe-widget-size-gap-md)] p-[var(--deframe-widget-size-padding-x-lg)]",
8098
- "bg-[var(--deframe-widget-color-bg-subtle)] rounded-[var(--deframe-widget-size-radius-sm)]",
8099
- className
8100
- ),
8101
- children: [
8102
- /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: sectionTitle }),
8103
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-[color:var(--deframe-widget-color-text-secondary)] flex items-center gap-[var(--deframe-widget-size-gap-sm)]", children: [
8104
- loadingLabel,
8105
- /* @__PURE__ */ jsxRuntime.jsx(LoadingDots, {})
8106
- ] })
8107
- ]
8259
+ const [activeCategoryId, setActiveCategoryId] = React6__namespace.default.useState(null);
8260
+ const totalEarnings = React6__namespace.default.useMemo(
8261
+ () => positions.positions.reduce((sum, p) => sum + p.spotPosition.profitInUSD, 0),
8262
+ [positions.positions]
8263
+ );
8264
+ const statsCards = React6__namespace.default.useMemo(() => [
8265
+ { label: "Total Investido", value: formatCurrency(positions.summary.totalUnderlyingBalanceUSD), badge: "Soma de todos os dep\xF3sitos ativos." },
8266
+ { label: "Juros Acumulados", value: formatCurrency(totalEarnings), badge: "Rendimentos acumulados desde o in\xEDcio." }
8267
+ ], [positions.summary.totalUnderlyingBalanceUSD, totalEarnings, formatCurrency]);
8268
+ const categoryBanners = React6__namespace.default.useMemo(() => {
8269
+ return EARN_CATEGORY_DEFINITIONS.map((cat) => {
8270
+ var _a;
8271
+ const upperFilter = new Set(cat.assetFilter.map((a) => a.toUpperCase()));
8272
+ let bestApy = null;
8273
+ for (const s of strategies) {
8274
+ if (upperFilter.has(s.assetName.toUpperCase()) && s.apy > ((_a = bestApy == null ? void 0 : bestApy.apy) != null ? _a : 0)) {
8275
+ bestApy = s;
8276
+ }
8108
8277
  }
8109
- );
8278
+ const isStablecoin = cat.assetFilter.some((a) => STABLECOIN_SYMBOLS.has(a.toUpperCase()));
8279
+ return {
8280
+ id: cat.id,
8281
+ imageUrl: cat.imageUrl,
8282
+ alt: cat.title,
8283
+ apyFormatted: bestApy == null ? void 0 : bestApy.apyFormatted,
8284
+ description: isStablecoin ? "Rendimento em stablecoins" : "Rendimento em reais",
8285
+ handleClick: () => setActiveCategoryId(cat.id)
8286
+ };
8287
+ });
8288
+ }, [strategies]);
8289
+ const historyByAsset = React6__namespace.default.useMemo(() => {
8290
+ var _a, _b, _c, _d;
8291
+ const map = /* @__PURE__ */ new Map();
8292
+ for (const item of historyItems) {
8293
+ const isDeposit = item.type.includes("DEPOSIT");
8294
+ const assetIn = (_a = item.amounts) == null ? void 0 : _a.assetIn;
8295
+ const symbol = (_d = assetIn && "token" in assetIn ? (_c = (_b = assetIn.token) == null ? void 0 : _b.symbol) == null ? void 0 : _c.toUpperCase() : null) != null ? _d : "";
8296
+ if (!symbol) continue;
8297
+ const amount = assetIn && "amountInUSD" in assetIn && assetIn.amountInUSD ? formatCurrency(parseFloat(assetIn.amountInUSD)) : assetIn && "amountHumanized" in assetIn ? `${assetIn.amountHumanized} ${symbol}` : "";
8298
+ const date = new Date(item.createdAt).toLocaleString(locale, {
8299
+ day: "2-digit",
8300
+ month: "2-digit",
8301
+ year: "numeric",
8302
+ hour: "2-digit",
8303
+ minute: "2-digit"
8304
+ });
8305
+ const entry = {
8306
+ id: item.id,
8307
+ date,
8308
+ type: isDeposit ? "deposit" : "withdraw",
8309
+ amount,
8310
+ onClick: onHistoryDetail ? () => onHistoryDetail(item.id, isDeposit) : void 0
8311
+ };
8312
+ if (!map.has(symbol)) map.set(symbol, []);
8313
+ map.get(symbol).push(entry);
8314
+ }
8315
+ return map;
8316
+ }, [historyItems, locale, formatCurrency, onHistoryDetail]);
8317
+ const strategyRows = React6__namespace.default.useMemo(() => {
8318
+ return positions.positions.filter((p) => p.spotPosition.underlyingBalanceUSD > 0.01).map((p) => {
8319
+ var _a;
8320
+ return {
8321
+ logoUrl: p.strategy.logourl,
8322
+ assetName: p.strategy.assetName,
8323
+ network: p.strategy.network,
8324
+ investedFormatted: formatCurrency(p.spotPosition.underlyingBalanceUSD),
8325
+ earningsFormatted: `${(p.spotPosition.apy * 100).toFixed(2)}%`,
8326
+ isLoading: false,
8327
+ history: (_a = historyByAsset.get(p.strategy.assetName.toUpperCase())) != null ? _a : [],
8328
+ onInvestClick: onDeposit ? () => onDeposit(p.strategy.id) : () => {
8329
+ },
8330
+ onWithdrawClick: onWithdraw ? () => onWithdraw(p.strategy.id) : () => {
8331
+ },
8332
+ onDetailsClick: onDetails ? () => onDetails(p.strategy.id) : () => {
8333
+ }
8334
+ };
8335
+ });
8336
+ }, [positions.positions, formatCurrency, historyByAsset, onDeposit, onWithdraw, onDetails]);
8337
+ if (isLoading) {
8338
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": "earn-hub-view-simple-loading", className: tailwindMerge.twMerge(wrapperBaseClasses, className), children: [
8339
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-[var(--deframe-widget-size-gap-sm)]", children: [0, 1].map((i) => /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant: "rect", width: "100%", height: 100 }, i)) }),
8340
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-[var(--deframe-widget-size-gap-sm)]", children: [0, 1].map((i) => /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant: "rect", width: "100%", height: 160 }, i)) }),
8341
+ /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant: "rect", width: "100%", height: 200 })
8342
+ ] });
8110
8343
  }
8111
- if (error) {
8112
- return /* @__PURE__ */ jsxRuntime.jsxs(
8113
- "section",
8344
+ if (activeCategoryId) {
8345
+ return /* @__PURE__ */ jsxRuntime.jsx(
8346
+ GroupedStrategyListViewSimple,
8114
8347
  {
8115
- className: tailwindMerge.twMerge(
8116
- "flex flex-col gap-[var(--deframe-widget-size-gap-md)] p-[var(--deframe-widget-size-padding-x-lg)]",
8117
- "bg-[var(--deframe-widget-color-bg-subtle)] rounded-[var(--deframe-widget-size-radius-sm)]",
8118
- className
8119
- ),
8120
- children: [
8121
- /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: sectionTitle }),
8122
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[color:var(--deframe-widget-color-state-error)]", children: errorLabel })
8123
- ]
8348
+ categoryId: activeCategoryId,
8349
+ strategies,
8350
+ isLoading,
8351
+ onBack: () => setActiveCategoryId(null),
8352
+ onDeposit,
8353
+ onWithdraw,
8354
+ className
8124
8355
  }
8125
8356
  );
8126
8357
  }
8127
- return /* @__PURE__ */ jsxRuntime.jsxs(
8128
- "section",
8129
- {
8130
- className: tailwindMerge.twMerge(
8131
- "flex flex-col gap-[var(--deframe-widget-size-gap-md)] p-[var(--deframe-widget-size-padding-x-lg)]",
8132
- "bg-[var(--deframe-widget-color-bg-subtle)] rounded-[var(--deframe-widget-size-radius-sm)]",
8133
- className
8134
- ),
8135
- children: [
8136
- /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: sectionTitle }),
8137
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-md)]", children: [
8138
- searchBar,
8139
- chipGroup
8140
- ] }),
8141
- showEmptyState && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:h-[440px] flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(SearchEmptyState, { title: emptySearchTitle, description: emptySearchDescription }) }),
8142
- !showEmptyState && /* @__PURE__ */ jsxRuntime.jsx(
8358
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": "earn-hub-view-simple", className: tailwindMerge.twMerge(wrapperBaseClasses, className), children: [
8359
+ /* @__PURE__ */ jsxRuntime.jsx(
8360
+ "div",
8361
+ {
8362
+ "data-test-id": "earn-hub-view-simple-header",
8363
+ className: "flex items-center justify-between gap-[var(--deframe-widget-size-gap-md)]",
8364
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-xs)]", children: [
8365
+ /* @__PURE__ */ jsxRuntime.jsx(
8366
+ "h1",
8367
+ {
8368
+ "data-test-id": "earn-hub-view-simple-title",
8369
+ 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)]",
8370
+ children: "Caixinha"
8371
+ }
8372
+ ),
8373
+ /* @__PURE__ */ jsxRuntime.jsx(
8374
+ "p",
8375
+ {
8376
+ "data-test-id": "earn-hub-view-simple-subtitle",
8377
+ 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)]",
8378
+ children: "Invista e deixe seu dinheiro render."
8379
+ }
8380
+ )
8381
+ ] })
8382
+ }
8383
+ ),
8384
+ /* @__PURE__ */ jsxRuntime.jsx(
8385
+ "div",
8386
+ {
8387
+ "data-test-id": "earn-hub-view-simple-stats",
8388
+ className: "grid grid-cols-2 gap-[var(--deframe-widget-size-gap-sm)]",
8389
+ children: statsCards.map((card, i) => /* @__PURE__ */ jsxRuntime.jsxs("article", { className: tailwindMerge.twMerge(statCardClasses, "self-stretch"), children: [
8390
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: statCardLabelClasses, children: card.label }),
8391
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: i > 0 ? statCardValuePositiveClasses : statCardValueDefaultClasses, children: card.value }),
8392
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: statCardDescriptionClasses, children: card.badge })
8393
+ ] }, card.label))
8394
+ }
8395
+ ),
8396
+ /* @__PURE__ */ jsxRuntime.jsx(
8397
+ "div",
8398
+ {
8399
+ "data-test-id": "earn-hub-view-simple-categories",
8400
+ className: "grid grid-cols-2 gap-[var(--deframe-widget-size-gap-sm)]",
8401
+ children: categoryBanners.map((cat, i) => /* @__PURE__ */ jsxRuntime.jsx(
8402
+ ImageBannerCard,
8403
+ {
8404
+ imageUrl: cat.imageUrl,
8405
+ alt: cat.alt,
8406
+ apyFormatted: cat.apyFormatted,
8407
+ description: cat.description,
8408
+ onClick: cat.handleClick,
8409
+ colorToken: BANNER_COLORS[i % BANNER_COLORS.length]
8410
+ },
8411
+ cat.alt
8412
+ ))
8413
+ }
8414
+ ),
8415
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: listPanelClasses, children: [
8416
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: sectionHeaderClasses, children: [
8417
+ /* @__PURE__ */ jsxRuntime.jsx("h3", { "data-test-id": "earn-hub-view-simple-strategies-title", className: sectionTitleClasses, children: "Suas Caixinhas" }),
8418
+ onHistory && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)] flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
8419
+ "button",
8420
+ {
8421
+ type: "button",
8422
+ "aria-label": "Hist\xF3rico",
8423
+ "data-test-id": "earn-hub-simple-history-button",
8424
+ onClick: onHistory,
8425
+ className: tailwindMerge.twMerge(
8426
+ "inline-flex items-center justify-center",
8427
+ "w-9 h-9",
8428
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
8429
+ "border-none bg-transparent",
8430
+ "cursor-pointer outline-none flex-shrink-0",
8431
+ "text-[color:var(--deframe-widget-color-text-secondary)]",
8432
+ "hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_92%,transparent)]",
8433
+ "transition-[background] duration-150"
8434
+ ),
8435
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
8436
+ "svg",
8437
+ {
8438
+ viewBox: "0 0 24 24",
8439
+ width: "20",
8440
+ height: "20",
8441
+ fill: "none",
8442
+ stroke: "currentColor",
8443
+ strokeWidth: "2",
8444
+ strokeLinecap: "round",
8445
+ strokeLinejoin: "round",
8446
+ "aria-hidden": "true",
8447
+ children: [
8448
+ /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
8449
+ /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "12 6 12 12 16 14" })
8450
+ ]
8451
+ }
8452
+ )
8453
+ }
8454
+ ) })
8455
+ ] }),
8456
+ strategyRows.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(SimpleEmptyState, {}) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
8457
+ /* @__PURE__ */ jsxRuntime.jsx(
8143
8458
  "div",
8144
8459
  {
8145
- className: "explore-strategies-grid grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-[var(--deframe-widget-size-gap-md)] overflow-y-auto pr-[var(--deframe-widget-size-padding-x-sm)] h-[440px] auto-rows-[136px]",
8146
- children: strategies.map((strategy) => /* @__PURE__ */ jsxRuntime.jsx(
8147
- StrategyGridCard,
8460
+ "data-test-id": "earn-hub-view-simple-columns",
8461
+ className: tailwindMerge.twMerge(
8462
+ GRID_COLS2,
8463
+ "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-sm)]",
8464
+ "border-t border-[color:var(--deframe-widget-color-border-secondary)]"
8465
+ ),
8466
+ children: ["CAIXINHA", "RENDIMENTO", "INVESTIDO"].map((label, i) => /* @__PURE__ */ jsxRuntime.jsx(
8467
+ "span",
8148
8468
  {
8149
- logoUrl: strategy.logoUrl,
8150
- title: strategy.title,
8151
- subtitle: strategy.subtitle,
8152
- apyFormatted: strategy.apyFormatted,
8153
- apyLabel: strategy.apyLabel,
8154
- onClick: () => onStrategyClick == null ? void 0 : onStrategyClick(strategy.id)
8469
+ className: tailwindMerge.twMerge(
8470
+ columnHeaderClasses,
8471
+ i === 1 && "text-center",
8472
+ i === 2 && "text-right"
8473
+ ),
8474
+ children: label
8155
8475
  },
8156
- strategy.id
8476
+ label
8157
8477
  ))
8158
8478
  }
8159
- )
8160
- ]
8161
- }
8162
- );
8479
+ ),
8480
+ /* @__PURE__ */ jsxRuntime.jsx("ol", { "data-test-id": "earn-hub-view-simple-strategy-list", className: "list-none m-0 p-0", children: strategyRows.map((s) => /* @__PURE__ */ jsxRuntime.jsx(EarnHubStrategyCard, __spreadValues({}, s), s.assetName)) })
8481
+ ] })
8482
+ ] })
8483
+ ] });
8163
8484
  };
8164
- var EarnRecentTransactionsView = ({
8165
- sectionTitle,
8166
- viewAllLabel,
8485
+ var wrapperBaseClasses2 = [
8486
+ "w-full flex flex-col",
8487
+ "gap-[var(--deframe-widget-size-gap-md)]",
8488
+ "font-[var(--deframe-widget-font-family)]"
8489
+ ].join(" ");
8490
+ var titleClasses = [
8491
+ "text-[color:var(--deframe-widget-color-text-primary)]",
8492
+ "text-[length:var(--deframe-widget-font-size-xxl)]",
8493
+ "[font-weight:var(--deframe-widget-font-weight-bold)]",
8494
+ "leading-[var(--deframe-widget-font-leading-xxl)]",
8495
+ "font-[var(--deframe-widget-font-family)]"
8496
+ ].join(" ");
8497
+ var backButtonClasses = [
8498
+ "inline-flex items-center gap-[var(--deframe-widget-size-gap-xs)]",
8499
+ "text-[color:var(--deframe-widget-color-text-secondary)]",
8500
+ "hover:text-[color:var(--deframe-widget-color-text-primary)]",
8501
+ "text-[length:var(--deframe-widget-font-size-sm)]",
8502
+ "[font-weight:var(--deframe-widget-font-weight-medium)]",
8503
+ "transition-colors cursor-pointer",
8504
+ "font-[var(--deframe-widget-font-family)]",
8505
+ "border-none bg-transparent outline-none p-0"
8506
+ ].join(" ");
8507
+ var emptyBoxClasses = [
8508
+ "w-full flex flex-col items-center justify-center",
8509
+ "gap-[var(--deframe-widget-size-gap-sm)]",
8510
+ "px-[var(--deframe-widget-size-padding-x-md)]",
8511
+ "py-[var(--deframe-widget-size-padding-y-xl)]",
8512
+ "rounded-[var(--deframe-widget-size-radius-md)]",
8513
+ "border border-dashed border-[color:var(--deframe-widget-color-border-secondary)]",
8514
+ "bg-[color:var(--deframe-widget-color-bg-secondary)]"
8515
+ ].join(" ");
8516
+ var GroupedStrategyListViewSimple = ({
8517
+ categoryId,
8518
+ strategies = [],
8167
8519
  isLoading,
8168
- hasMore,
8169
- hasItems,
8170
- historyList,
8171
- emptyTitle,
8172
- emptyDescription,
8173
- onViewAll,
8520
+ onBack,
8521
+ onDeposit,
8522
+ onWithdraw,
8174
8523
  className
8175
8524
  }) => {
8176
- return /* @__PURE__ */ jsxRuntime.jsxs(
8177
- "section",
8178
- {
8179
- className: tailwindMerge.twMerge(
8180
- "flex flex-col gap-md p-lg",
8181
- "bg-[var(--deframe-widget-color-bg-subtle)] rounded",
8182
- className
8183
- ),
8184
- children: [
8185
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
8186
- /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)] dark:text-[color:var(--deframe-widget-color-text-secondary-dark)]", children: sectionTitle }),
8187
- hasMore && onViewAll && /* @__PURE__ */ jsxRuntime.jsx(
8188
- "button",
8189
- {
8190
- type: "button",
8191
- onClick: onViewAll,
8192
- className: "text-brand-primary dark:text-brand-primary-dark hover:underline",
8193
- children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: viewAllLabel })
8194
- }
8195
- )
8196
- ] }),
8197
- isLoading ? /* @__PURE__ */ jsxRuntime.jsx(HistoryListSkeleton, {}) : hasItems ? historyList : /* @__PURE__ */ jsxRuntime.jsx(HistoryTabEmpty, { title: emptyTitle, description: emptyDescription })
8198
- ]
8525
+ var _a;
8526
+ const category = EARN_CATEGORY_DEFINITIONS.find((c) => c.id === categoryId);
8527
+ const categoryTitle = (_a = category == null ? void 0 : category.title) != null ? _a : "Estrat\xE9gias";
8528
+ const allClaimedAssets = React6__namespace.default.useMemo(() => {
8529
+ const claimed = /* @__PURE__ */ new Set();
8530
+ for (const cat of EARN_CATEGORY_DEFINITIONS) {
8531
+ if (cat.assetFilter.length > 0) {
8532
+ for (const symbol of cat.assetFilter) {
8533
+ claimed.add(symbol.toUpperCase());
8534
+ }
8535
+ }
8199
8536
  }
8200
- );
8201
- };
8202
- var EarnDesktopView = ({
8203
- isLoading,
8204
- loadingSkeleton,
8205
- summary,
8206
- invested,
8207
- explore,
8208
- transactions
8209
- }) => {
8537
+ return claimed;
8538
+ }, []);
8539
+ const filteredStrategies = React6__namespace.default.useMemo(() => {
8540
+ const assetFilter = category == null ? void 0 : category.assetFilter;
8541
+ if (!assetFilter || assetFilter.length === 0) {
8542
+ return strategies.filter((s) => !allClaimedAssets.has(s.assetName.toUpperCase()));
8543
+ }
8544
+ const upperFilter = new Set(assetFilter.map((a) => a.toUpperCase()));
8545
+ return strategies.filter((s) => upperFilter.has(s.assetName.toUpperCase()));
8546
+ }, [strategies, category, allClaimedAssets]);
8210
8547
  if (isLoading) {
8211
- if (loadingSkeleton) {
8212
- return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: loadingSkeleton });
8213
- }
8214
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-md)] w-full flex-1 min-h-0 animate-pulse px-[var(--deframe-widget-size-padding-x-lg)] py-[var(--deframe-widget-size-padding-y-lg)]", children: [
8215
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-24 rounded bg-[var(--deframe-widget-color-bg-secondary)]" }),
8216
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-40 rounded bg-[var(--deframe-widget-color-bg-secondary)]" }),
8217
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-60 rounded bg-[var(--deframe-widget-color-bg-secondary)]" })
8548
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": "grouped-strategy-list-view-simple-loading", className: tailwindMerge.twMerge(wrapperBaseClasses2, className), children: [
8549
+ /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant: "rect", width: "40%", height: 24 }),
8550
+ /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant: "rect", width: "100%", height: 80 }),
8551
+ /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant: "rect", width: "100%", height: 80 })
8218
8552
  ] });
8219
8553
  }
8220
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-[color:var(--deframe-widget-color-text-primary)] flex flex-col relative overflow-y-auto w-full flex-1 min-h-0 pb-[var(--deframe-widget-size-padding-y-lg)] gap-[var(--deframe-widget-size-gap-md)]", children: [
8221
- /* @__PURE__ */ jsxRuntime.jsx(EarnInvestmentSummaryView, __spreadValues({}, summary)),
8222
- /* @__PURE__ */ jsxRuntime.jsx(EarnInvestedSectionView, __spreadValues({}, invested)),
8223
- /* @__PURE__ */ jsxRuntime.jsx(EarnExploreGridView, __spreadValues({}, explore)),
8224
- /* @__PURE__ */ jsxRuntime.jsx(EarnRecentTransactionsView, __spreadValues({}, transactions))
8225
- ] });
8226
- };
8227
- var EarnInvestmentDetailsView = (props) => {
8228
- if (props.isLoading) {
8229
- return /* @__PURE__ */ jsxRuntime.jsx(BackgroundContainer, { children: props.loadingSkeleton });
8230
- }
8231
- const {
8232
- title,
8233
- onBack,
8234
- tokenIcon,
8235
- fiatBalance,
8236
- profitAmount,
8237
- tokenAmount,
8238
- investedLabel,
8239
- earningsLabel,
8240
- summaryTitle,
8241
- summaryItems,
8242
- pastActivitiesTitle,
8243
- transactions,
8244
- onTransactionClick,
8245
- showMoreButton,
8246
- onLoadMore,
8247
- loadMoreLabel,
8248
- depositLabel,
8249
- onDeposit,
8250
- withdrawLabel,
8251
- onWithdraw
8252
- } = props;
8253
- return /* @__PURE__ */ jsxRuntime.jsxs(BackgroundContainer, { children: [
8254
- /* @__PURE__ */ jsxRuntime.jsxs(Navbar, { children: [
8255
- /* @__PURE__ */ jsxRuntime.jsx(BackButton, { onClick: onBack }),
8256
- /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h1", children: title })
8257
- ] }),
8258
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col min-h-0 px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-sm)] gap-[var(--deframe-widget-size-gap-md)]", children: [
8259
- /* @__PURE__ */ jsxRuntime.jsx(
8260
- EarnBalanceCard,
8554
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": "grouped-strategy-list-view-simple", className: tailwindMerge.twMerge(wrapperBaseClasses2, className), children: [
8555
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": "grouped-strategy-list-view-simple-header", children: [
8556
+ /* @__PURE__ */ jsxRuntime.jsxs(
8557
+ "button",
8261
8558
  {
8262
- tokenIcon,
8263
- fiatBalance,
8264
- profitAmount,
8265
- tokenAmount,
8266
- investedLabel,
8267
- earningsLabel
8559
+ type: "button",
8560
+ "data-test-id": "grouped-strategy-list-view-simple-back",
8561
+ "aria-label": "Voltar",
8562
+ onClick: onBack,
8563
+ className: backButtonClasses,
8564
+ children: [
8565
+ /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 4L6 8L10 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
8566
+ "Voltar"
8567
+ ]
8268
8568
  }
8269
8569
  ),
8570
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { "data-test-id": "grouped-strategy-list-view-simple-title", className: tailwindMerge.twMerge(titleClasses, "mt-[var(--deframe-widget-size-gap-sm)]"), children: categoryTitle }),
8270
8571
  /* @__PURE__ */ jsxRuntime.jsx(
8271
- SummaryDetails,
8572
+ TextBody,
8272
8573
  {
8273
- title: summaryTitle,
8274
- items: summaryItems,
8275
- defaultOpen: true,
8276
- className: "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-primary)]"
8574
+ "data-test-id": "grouped-strategy-list-view-simple-subtitle",
8575
+ variant: "text-small",
8576
+ className: "text-[color:var(--deframe-widget-color-text-secondary)] mt-[var(--deframe-widget-size-gap-xs)]",
8577
+ children: "Escolha uma estrat\xE9gia para investir."
8277
8578
  }
8278
- ),
8279
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full rounded-[var(--deframe-widget-size-radius-sm)] flex flex-col gap-[var(--deframe-widget-size-gap-sm)] flex-shrink-0", children: [
8280
- /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h5", children: pastActivitiesTitle }),
8281
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "investment-activities-list flex flex-col gap-[var(--deframe-widget-size-gap-sm)] overflow-y-auto max-h-[280px] pr-[var(--deframe-widget-size-padding-x-sm)]", children: [
8282
- transactions.map((tx) => /* @__PURE__ */ jsxRuntime.jsxs(
8283
- ListItem,
8284
- {
8285
- onClick: () => onTransactionClick(tx.id),
8286
- children: [
8287
- /* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: tokenIcon, alt: "Token", className: "w-10 h-10 rounded-[var(--deframe-widget-size-radius-full)]" }) }),
8288
- /* @__PURE__ */ jsxRuntime.jsxs(ListItemContent, { children: [
8289
- /* @__PURE__ */ jsxRuntime.jsx(TextBody, { children: tx.action }),
8290
- /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: tx.date })
8291
- ] }),
8292
- /* @__PURE__ */ jsxRuntime.jsxs(ListItemRightSide, { children: [
8293
- /* @__PURE__ */ jsxRuntime.jsx(TextBody, { children: tx.usdAmount }),
8294
- /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: tx.tokenAmount })
8295
- ] })
8296
- ]
8297
- },
8298
- `tx-history-${tx.id}`
8299
- )),
8300
- showMoreButton && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center items-center w-full py-4 flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(TertiaryButton, { onClick: onLoadMore, children: loadMoreLabel }) })
8301
- ] })
8302
- ] })
8579
+ )
8303
8580
  ] }),
8304
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky bottom-0 left-0 right-0 border-t border-[var(--deframe-widget-color-border-secondary)] px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between gap-[var(--deframe-widget-size-gap-md)]", children: [
8305
- /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { onClick: onDeposit, className: "w-full", children: depositLabel }),
8306
- /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { onClick: onWithdraw, className: "w-full", children: withdrawLabel })
8307
- ] }) })
8581
+ filteredStrategies.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "grouped-strategy-list-view-simple-empty", className: emptyBoxClasses, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]", children: "Nenhuma estrat\xE9gia dispon\xEDvel no momento." }) }) : /* @__PURE__ */ jsxRuntime.jsx(
8582
+ "div",
8583
+ {
8584
+ "data-test-id": "grouped-strategy-list-view-simple-items",
8585
+ className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)]",
8586
+ children: filteredStrategies.map((s) => /* @__PURE__ */ jsxRuntime.jsx(
8587
+ StrategyGridCardSimple,
8588
+ {
8589
+ logoUrl: s.logourl,
8590
+ title: s.assetName,
8591
+ subtitle: s.assetName,
8592
+ chainName: s.network,
8593
+ apyFormatted: s.apyFormatted,
8594
+ apyLabel: "Rendimento",
8595
+ riskLevel: "low",
8596
+ onInvestClick: onDeposit ? () => onDeposit(s.id) : () => {
8597
+ },
8598
+ onWithdrawClick: onWithdraw ? () => onWithdraw(s.id) : () => {
8599
+ }
8600
+ },
8601
+ s.id
8602
+ ))
8603
+ }
8604
+ )
8308
8605
  ] });
8309
8606
  };
8310
- var EarnTokenSelectorView = ({
8311
- selectedToken,
8312
- onTokenClick,
8313
- onNetworkAndAssetClick,
8314
- onNetworkClick,
8315
- isLoading,
8316
- selectTokenLabel,
8317
- chainLabel,
8318
- chainImage,
8319
- chainDirectionLabel,
8320
- chainDisabledTitle,
8321
- isNetworkDisabled = false,
8322
- currentNetworkSelected
8323
- }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[10px]", children: [
8324
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-[10px] w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
8325
- "button",
8607
+ var DateLabel = ({ children }) => {
8608
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-text-sm-mobile font-poppins text-[color:var(--deframe-widget-color-text-secondary)] dark:text-[color:var(--deframe-widget-color-text-secondary-dark)]", children });
8609
+ };
8610
+ var ArrowBadge = ({ isDeposit }) => {
8611
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-[-2px] right-[-2px] w-[15px] h-[15px] rounded-full bg-[var(--deframe-widget-color-bg-secondary)] dark:bg-[var(--deframe-widget-color-bg-secondary-dark)] flex items-center justify-center border border-[color:var(--deframe-widget-color-bg-secondary)] dark:border-[color:var(--deframe-widget-color-bg-secondary-dark)]", children: isDeposit ? /* @__PURE__ */ jsxRuntime.jsx(md.MdArrowDownward, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-primary)] dark:text-[color:var(--deframe-widget-color-text-primary-dark)]" }) : /* @__PURE__ */ jsxRuntime.jsx(md.MdArrowUpward, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-primary)] dark:text-[color:var(--deframe-widget-color-text-primary-dark)]" }) });
8612
+ };
8613
+ var TokenIconWithBadge2 = ({ src, alt, isDeposit }) => {
8614
+ const fallbackText = encodeURIComponent((alt || "TOK").slice(0, 3).toUpperCase());
8615
+ const fallbackSrc = `https://placehold.co/40x40?text=${fallbackText}`;
8616
+ const resolvedSrc = src || fallbackSrc;
8617
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-shrink-0", children: [
8618
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-xl bg-[var(--deframe-widget-color-bg-tertiary)] dark:bg-[var(--deframe-widget-color-bg-tertiary-dark)] flex items-center justify-center overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
8619
+ "img",
8620
+ {
8621
+ src: resolvedSrc,
8622
+ alt,
8623
+ className: "w-full h-full object-cover",
8624
+ onError: (e) => {
8625
+ e.target.src = fallbackSrc;
8626
+ }
8627
+ }
8628
+ ) }),
8629
+ /* @__PURE__ */ jsxRuntime.jsx(ArrowBadge, { isDeposit })
8630
+ ] });
8631
+ };
8632
+ var SwapIconWithBadge = ({ src, alt }) => {
8633
+ const fallbackText = encodeURIComponent((alt || "TOK").slice(0, 3).toUpperCase());
8634
+ const fallbackSrc = `https://placehold.co/40x40?text=${fallbackText}`;
8635
+ const resolvedSrc = src || fallbackSrc;
8636
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-shrink-0", children: [
8637
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-xl bg-[var(--deframe-widget-color-bg-tertiary)] dark:bg-[var(--deframe-widget-color-bg-tertiary-dark)] flex items-center justify-center overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
8638
+ "img",
8639
+ {
8640
+ src: resolvedSrc,
8641
+ alt,
8642
+ className: "w-full h-full object-cover",
8643
+ onError: (e) => {
8644
+ e.target.src = fallbackSrc;
8645
+ }
8646
+ }
8647
+ ) }),
8648
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-[-2px] right-[-2px] w-[15px] h-[15px] rounded-full bg-[var(--deframe-widget-color-bg-secondary)] dark:bg-[var(--deframe-widget-color-bg-secondary-dark)] flex items-center justify-center border border-[color:var(--deframe-widget-color-bg-secondary)] dark:border-[color:var(--deframe-widget-color-bg-secondary-dark)]", children: /* @__PURE__ */ jsxRuntime.jsx(md.MdArrowUpward, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-primary)] dark:text-[color:var(--deframe-widget-color-text-primary-dark)]" }) })
8649
+ ] });
8650
+ };
8651
+ var AmountDisplay = ({ amount, usdAmount }) => {
8652
+ return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
8653
+ /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-accent-sm-mobile whitespace-nowrap", children: amount }),
8654
+ usdAmount ? /* @__PURE__ */ jsxRuntime.jsx(Label, { variant: "secondary", className: "whitespace-nowrap", children: usdAmount }) : null
8655
+ ] });
8656
+ };
8657
+ var HistoryListView = ({
8658
+ groups,
8659
+ showLoadMore,
8660
+ onLoadMore,
8661
+ loadMoreLabel,
8662
+ itemClassName
8663
+ }) => {
8664
+ if (groups.length === 0) {
8665
+ return null;
8666
+ }
8667
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "self-stretch flex flex-col gap-[16px]", children: [
8668
+ groups.map((group) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "self-stretch flex flex-col gap-sm", children: [
8669
+ /* @__PURE__ */ jsxRuntime.jsx(DateLabel, { children: group.dateLabel }),
8670
+ group.items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
8671
+ ListItem,
8672
+ {
8673
+ onClick: () => item.onClick(),
8674
+ containerClassName: tailwindMerge.twMerge("!rounded-xs !border-0 !min-h-[72px]", itemClassName),
8675
+ children: [
8676
+ /* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: item.isSwap ? /* @__PURE__ */ jsxRuntime.jsx(SwapIconWithBadge, { src: item.iconUrl, alt: item.iconAlt }) : /* @__PURE__ */ jsxRuntime.jsx(
8677
+ TokenIconWithBadge2,
8678
+ {
8679
+ src: item.iconUrl,
8680
+ alt: item.iconAlt,
8681
+ isDeposit: item.isDeposit
8682
+ }
8683
+ ) }),
8684
+ /* @__PURE__ */ jsxRuntime.jsxs(ListItemContent, { children: [
8685
+ /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-text-lg-mobile", children: item.title }),
8686
+ /* @__PURE__ */ jsxRuntime.jsx(Label, { variant: "secondary", className: "text-[color:var(--deframe-widget-color-text-tertiary)] dark:text-[color:var(--deframe-widget-color-text-tertiary-dark)]", children: item.subtitle }),
8687
+ item.status === "PENDING" && item.statusLabel ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-[6px]", children: /* @__PURE__ */ jsxRuntime.jsx(
8688
+ ProcessingBadge,
8689
+ {
8690
+ label: item.statusLabel,
8691
+ title: item.statusTitle,
8692
+ size: "compact"
8693
+ }
8694
+ ) }) : null
8695
+ ] }),
8696
+ /* @__PURE__ */ jsxRuntime.jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxRuntime.jsx(AmountDisplay, { amount: item.amountFormatted, usdAmount: item.amountUsd }) })
8697
+ ]
8698
+ },
8699
+ item.id
8700
+ ))
8701
+ ] }, group.dateLabel)),
8702
+ showLoadMore && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center pt-sm", children: /* @__PURE__ */ jsxRuntime.jsx(TertiaryButton, { onClick: onLoadMore, children: loadMoreLabel }) })
8703
+ ] });
8704
+ };
8705
+ var OverviewEarnWidgetTabSkeleton = () => {
8706
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex flex-col gap-md", children: [
8707
+ /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "100%", height: "40px", variant: "rect" }),
8708
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-sm", children: [
8709
+ /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "100%", height: "144px", variant: "rect" }),
8710
+ /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "100%", height: "144px", variant: "rect" })
8711
+ ] }),
8712
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
8713
+ /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "128px", height: "20px", variant: "text", className: "mb-sm" }),
8714
+ /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "100%", height: "80px", variant: "rect" })
8715
+ ] }),
8716
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
8717
+ /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "96px", height: "20px", variant: "text", className: "mb-sm" }),
8718
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-sm", children: [
8719
+ /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "100%", height: "64px", variant: "rect" }),
8720
+ /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "100%", height: "64px", variant: "rect" }),
8721
+ /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "100%", height: "64px", variant: "rect" }),
8722
+ /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "100%", height: "64px", variant: "rect" })
8723
+ ] })
8724
+ ] })
8725
+ ] });
8726
+ };
8727
+ var EarnOverviewView = ({
8728
+ selectedTab,
8729
+ onTabChange,
8730
+ labels,
8731
+ overview,
8732
+ explore,
8733
+ history
8734
+ }) => {
8735
+ return /* @__PURE__ */ jsxRuntime.jsx(BackgroundContainer, { className: "flex flex-col flex-1 min-h-0 px-0", children: /* @__PURE__ */ jsxRuntime.jsxs(Tabs, { value: selectedTab, onValueChange: onTabChange, variant: "default", className: "flex flex-col flex-1 min-h-0", children: [
8736
+ /* @__PURE__ */ jsxRuntime.jsxs(TabsList, { className: "justify-between w-full", children: [
8737
+ /* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { value: "overview", className: "flex-1", children: labels.tabs.overview }),
8738
+ /* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { value: "explore", className: "flex-1", children: labels.tabs.explore }),
8739
+ /* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { value: "history", className: "flex-1", children: labels.tabs.history })
8740
+ ] }),
8741
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col flex-1 w-full min-h-0 px-md pt-md", children: [
8742
+ /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "overview", className: "flex flex-col flex-1 min-h-0", children: overview.isLoading ? /* @__PURE__ */ jsxRuntime.jsx(OverviewEarnWidgetTabSkeleton, {}) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
8743
+ /* @__PURE__ */ jsxRuntime.jsx(WalletBalances, { cards: overview.walletBalances }),
8744
+ /* @__PURE__ */ jsxRuntime.jsx(GroupedStrategyListView, __spreadValues({}, overview.groupedStrategies))
8745
+ ] }) }),
8746
+ /* @__PURE__ */ jsxRuntime.jsxs(TabsContent, { value: "explore", children: [
8747
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 w-full mb-4 h-12", children: /* @__PURE__ */ jsxRuntime.jsx(
8748
+ SearchInput,
8749
+ {
8750
+ value: explore.searchValue,
8751
+ onChange: (value) => explore.onSearchChange(value),
8752
+ placeholder: explore.searchPlaceholder
8753
+ }
8754
+ ) }),
8755
+ explore.isLoading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
8756
+ explore.loadingLabel,
8757
+ /* @__PURE__ */ jsxRuntime.jsx(LoadingDots, {})
8758
+ ] }) : explore.error ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 text-center text-red-500", children: [
8759
+ explore.errorLabel,
8760
+ ": ",
8761
+ explore.error.message
8762
+ ] }) : explore.hasFilters && explore.strategies.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full py-md bg-bg-default dark:bg-bg-default-dark rounded-lg flex flex-col gap-sm flex-shrink-0", children: [
8763
+ /* @__PURE__ */ jsxRuntime.jsx(
8764
+ ChipGroup,
8765
+ {
8766
+ options: explore.chipOptions,
8767
+ selected: explore.selectedCategory,
8768
+ onSelect: (value) => explore.onCategorySelect(value)
8769
+ }
8770
+ ),
8771
+ /* @__PURE__ */ jsxRuntime.jsx(SearchEmptyState, { title: explore.emptySearchTitle, description: explore.emptySearchDescription })
8772
+ ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full py-md bg-bg-default dark:bg-bg-default-dark rounded-lg flex flex-col gap-sm flex-shrink-0", children: [
8773
+ /* @__PURE__ */ jsxRuntime.jsx(
8774
+ ChipGroup,
8775
+ {
8776
+ options: explore.chipOptions,
8777
+ selected: explore.selectedCategory,
8778
+ onSelect: (value) => explore.onCategorySelect(value)
8779
+ }
8780
+ ),
8781
+ /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h5", children: explore.bestPerformanceLabel }),
8782
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-sm", children: explore.strategies.map((s) => /* @__PURE__ */ jsxRuntime.jsxs(ListItem, { onClick: () => s.onClick(), children: [
8783
+ /* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: s.logoUrl, alt: s.subtitle, className: "w-10 h-10 rounded-full" }) }),
8784
+ /* @__PURE__ */ jsxRuntime.jsxs(ListItemContent, { children: [
8785
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { children: s.title }),
8786
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: s.subtitle })
8787
+ ] }),
8788
+ /* @__PURE__ */ jsxRuntime.jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { children: s.apyFormatted }) })
8789
+ ] }, s.id)) })
8790
+ ] })
8791
+ ] }),
8792
+ /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "history", children: history.isLoading ? /* @__PURE__ */ jsxRuntime.jsx(HistoryListSkeleton, {}) : history.isEmpty ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-[90vh] py-md bg-bg-default dark:bg-bg-default-dark rounded-lg flex flex-col justify-center items-center gap-sm overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex flex-col justify-center items-center gap-md", children: [
8793
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-center items-center gap-md text-center", children: [
8794
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-20 h-20 bg-bg-muted dark:bg-bg-muted-dark rounded-full flex justify-center items-center", children: /* @__PURE__ */ jsxRuntime.jsx(pi.PiClockCountdownBold, { className: "w-10 h-10 text-text-tertiary dark:text-text-tertiary-dark" }) }),
8795
+ /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h3", children: history.emptyTitle })
8796
+ ] }),
8797
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "self-stretch text-center", children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: history.emptyDescription }) })
8798
+ ] }) }) : /* @__PURE__ */ jsxRuntime.jsx(
8799
+ HistoryListView,
8800
+ {
8801
+ groups: history.groups,
8802
+ showLoadMore: history.showLoadMore,
8803
+ onLoadMore: () => history.onLoadMore(),
8804
+ loadMoreLabel: history.loadMoreLabel
8805
+ }
8806
+ ) })
8807
+ ] })
8808
+ ] }) });
8809
+ };
8810
+ var EarnInvestmentSummaryView = ({
8811
+ overviewDescription,
8812
+ totalInvestedLabel,
8813
+ totalInvestedValue,
8814
+ totalReturnLabel,
8815
+ totalReturnValue,
8816
+ processingBadgeLabel,
8817
+ processingBadgeTitle,
8818
+ className
8819
+ }) => {
8820
+ return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: tailwindMerge.twMerge("flex flex-col gap-md p-lg bg-[var(--deframe-widget-color-bg-subtle)] rounded", className), children: [
8821
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)] dark:text-[color:var(--deframe-widget-color-text-secondary-dark)]", children: overviewDescription }),
8822
+ /* @__PURE__ */ jsxRuntime.jsx(
8823
+ WalletBalances,
8824
+ {
8825
+ cards: [
8826
+ {
8827
+ label: totalInvestedLabel,
8828
+ value: totalInvestedValue,
8829
+ badge: processingBadgeLabel ? /* @__PURE__ */ jsxRuntime.jsx(
8830
+ ProcessingBadge,
8831
+ {
8832
+ label: processingBadgeLabel,
8833
+ title: processingBadgeTitle
8834
+ }
8835
+ ) : void 0
8836
+ },
8837
+ { label: totalReturnLabel, value: totalReturnValue }
8838
+ ],
8839
+ variant: "raised",
8840
+ className: "grid grid-cols-2 gap-md !mt-0"
8841
+ }
8842
+ )
8843
+ ] });
8844
+ };
8845
+ var EarnInvestedSectionView = ({
8846
+ sectionTitle,
8847
+ items,
8848
+ onItemClick,
8849
+ className
8850
+ }) => {
8851
+ if (items.length === 0) {
8852
+ return null;
8853
+ }
8854
+ return /* @__PURE__ */ jsxRuntime.jsxs(
8855
+ "section",
8856
+ {
8857
+ className: tailwindMerge.twMerge(
8858
+ "flex flex-col gap-[var(--deframe-widget-size-gap-md)] p-[var(--deframe-widget-size-padding-x-lg)]",
8859
+ "bg-[var(--deframe-widget-color-bg-subtle)] rounded-[var(--deframe-widget-size-radius-sm)]",
8860
+ className
8861
+ ),
8862
+ children: [
8863
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: sectionTitle }),
8864
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-md)]", children: items.map((item, index) => {
8865
+ const isLast = index === items.length - 1;
8866
+ return /* @__PURE__ */ jsxRuntime.jsxs(
8867
+ "button",
8868
+ {
8869
+ type: "button",
8870
+ onClick: () => onItemClick == null ? void 0 : onItemClick(item.strategyId),
8871
+ className: tailwindMerge.twMerge(
8872
+ "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)]",
8873
+ "transition-colors cursor-pointer text-left w-full",
8874
+ !isLast && "border-b border-[var(--deframe-widget-color-border-secondary)]"
8875
+ ),
8876
+ children: [
8877
+ /* @__PURE__ */ jsxRuntime.jsx(
8878
+ "img",
8879
+ {
8880
+ src: item.logoUrl,
8881
+ alt: item.assetName,
8882
+ className: "w-10 h-10 rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0"
8883
+ }
8884
+ ),
8885
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col flex-1 min-w-0", children: [
8886
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { className: "font-medium truncate", children: item.assetName }),
8887
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-tertiary)] truncate", children: item.subtitle })
8888
+ ] }),
8889
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end flex-shrink-0", children: [
8890
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { className: "font-medium", children: item.balanceFormatted }),
8891
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: item.profitFormatted })
8892
+ ] })
8893
+ ]
8894
+ },
8895
+ item.strategyId
8896
+ );
8897
+ }) })
8898
+ ]
8899
+ }
8900
+ );
8901
+ };
8902
+ var EarnExploreGridView = ({
8903
+ sectionTitle,
8904
+ loadingLabel,
8905
+ errorLabel,
8906
+ emptySearchTitle,
8907
+ emptySearchDescription,
8908
+ isLoading,
8909
+ error,
8910
+ strategies,
8911
+ searchBar,
8912
+ chipGroup,
8913
+ hasFilters,
8914
+ onStrategyClick,
8915
+ className
8916
+ }) => {
8917
+ const showEmptyState = hasFilters && strategies.length === 0;
8918
+ if (isLoading) {
8919
+ return /* @__PURE__ */ jsxRuntime.jsxs(
8920
+ "section",
8921
+ {
8922
+ className: tailwindMerge.twMerge(
8923
+ "flex flex-col gap-[var(--deframe-widget-size-gap-md)] p-[var(--deframe-widget-size-padding-x-lg)]",
8924
+ "bg-[var(--deframe-widget-color-bg-subtle)] rounded-[var(--deframe-widget-size-radius-sm)]",
8925
+ className
8926
+ ),
8927
+ children: [
8928
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: sectionTitle }),
8929
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-[color:var(--deframe-widget-color-text-secondary)] flex items-center gap-[var(--deframe-widget-size-gap-sm)]", children: [
8930
+ loadingLabel,
8931
+ /* @__PURE__ */ jsxRuntime.jsx(LoadingDots, {})
8932
+ ] })
8933
+ ]
8934
+ }
8935
+ );
8936
+ }
8937
+ if (error) {
8938
+ return /* @__PURE__ */ jsxRuntime.jsxs(
8939
+ "section",
8940
+ {
8941
+ className: tailwindMerge.twMerge(
8942
+ "flex flex-col gap-[var(--deframe-widget-size-gap-md)] p-[var(--deframe-widget-size-padding-x-lg)]",
8943
+ "bg-[var(--deframe-widget-color-bg-subtle)] rounded-[var(--deframe-widget-size-radius-sm)]",
8944
+ className
8945
+ ),
8946
+ children: [
8947
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: sectionTitle }),
8948
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[color:var(--deframe-widget-color-state-error)]", children: errorLabel })
8949
+ ]
8950
+ }
8951
+ );
8952
+ }
8953
+ return /* @__PURE__ */ jsxRuntime.jsxs(
8954
+ "section",
8955
+ {
8956
+ className: tailwindMerge.twMerge(
8957
+ "flex flex-col gap-[var(--deframe-widget-size-gap-md)] p-[var(--deframe-widget-size-padding-x-lg)]",
8958
+ "bg-[var(--deframe-widget-color-bg-subtle)] rounded-[var(--deframe-widget-size-radius-sm)]",
8959
+ className
8960
+ ),
8961
+ children: [
8962
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: sectionTitle }),
8963
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-md)]", children: [
8964
+ searchBar,
8965
+ chipGroup
8966
+ ] }),
8967
+ showEmptyState && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:h-[440px] flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(SearchEmptyState, { title: emptySearchTitle, description: emptySearchDescription }) }),
8968
+ !showEmptyState && /* @__PURE__ */ jsxRuntime.jsx(
8969
+ "div",
8970
+ {
8971
+ className: "explore-strategies-grid grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-[var(--deframe-widget-size-gap-md)] overflow-y-auto pr-[var(--deframe-widget-size-padding-x-sm)] h-[440px] auto-rows-[136px]",
8972
+ children: strategies.map((strategy) => /* @__PURE__ */ jsxRuntime.jsx(
8973
+ StrategyGridCard,
8974
+ {
8975
+ logoUrl: strategy.logoUrl,
8976
+ title: strategy.title,
8977
+ subtitle: strategy.subtitle,
8978
+ apyFormatted: strategy.apyFormatted,
8979
+ apyLabel: strategy.apyLabel,
8980
+ onClick: () => onStrategyClick == null ? void 0 : onStrategyClick(strategy.id)
8981
+ },
8982
+ strategy.id
8983
+ ))
8984
+ }
8985
+ )
8986
+ ]
8987
+ }
8988
+ );
8989
+ };
8990
+ var EarnRecentTransactionsView = ({
8991
+ sectionTitle,
8992
+ viewAllLabel,
8993
+ isLoading,
8994
+ hasMore,
8995
+ hasItems,
8996
+ historyList,
8997
+ emptyTitle,
8998
+ emptyDescription,
8999
+ onViewAll,
9000
+ className
9001
+ }) => {
9002
+ return /* @__PURE__ */ jsxRuntime.jsxs(
9003
+ "section",
9004
+ {
9005
+ className: tailwindMerge.twMerge(
9006
+ "flex flex-col gap-md p-lg",
9007
+ "bg-[var(--deframe-widget-color-bg-subtle)] rounded",
9008
+ className
9009
+ ),
9010
+ children: [
9011
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
9012
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)] dark:text-[color:var(--deframe-widget-color-text-secondary-dark)]", children: sectionTitle }),
9013
+ hasMore && onViewAll && /* @__PURE__ */ jsxRuntime.jsx(
9014
+ "button",
9015
+ {
9016
+ type: "button",
9017
+ onClick: onViewAll,
9018
+ className: "text-brand-primary dark:text-brand-primary-dark hover:underline",
9019
+ children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: viewAllLabel })
9020
+ }
9021
+ )
9022
+ ] }),
9023
+ isLoading ? /* @__PURE__ */ jsxRuntime.jsx(HistoryListSkeleton, {}) : hasItems ? historyList : /* @__PURE__ */ jsxRuntime.jsx(HistoryTabEmpty, { title: emptyTitle, description: emptyDescription })
9024
+ ]
9025
+ }
9026
+ );
9027
+ };
9028
+ var EarnDesktopView = ({
9029
+ isLoading,
9030
+ loadingSkeleton,
9031
+ summary,
9032
+ invested,
9033
+ explore,
9034
+ transactions
9035
+ }) => {
9036
+ if (isLoading) {
9037
+ if (loadingSkeleton) {
9038
+ return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: loadingSkeleton });
9039
+ }
9040
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-md)] w-full flex-1 min-h-0 animate-pulse px-[var(--deframe-widget-size-padding-x-lg)] py-[var(--deframe-widget-size-padding-y-lg)]", children: [
9041
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-24 rounded bg-[var(--deframe-widget-color-bg-secondary)]" }),
9042
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-40 rounded bg-[var(--deframe-widget-color-bg-secondary)]" }),
9043
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-60 rounded bg-[var(--deframe-widget-color-bg-secondary)]" })
9044
+ ] });
9045
+ }
9046
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-[color:var(--deframe-widget-color-text-primary)] flex flex-col relative overflow-y-auto w-full flex-1 min-h-0 pb-[var(--deframe-widget-size-padding-y-lg)] gap-[var(--deframe-widget-size-gap-md)]", children: [
9047
+ /* @__PURE__ */ jsxRuntime.jsx(EarnInvestmentSummaryView, __spreadValues({}, summary)),
9048
+ /* @__PURE__ */ jsxRuntime.jsx(EarnInvestedSectionView, __spreadValues({}, invested)),
9049
+ /* @__PURE__ */ jsxRuntime.jsx(EarnExploreGridView, __spreadValues({}, explore)),
9050
+ /* @__PURE__ */ jsxRuntime.jsx(EarnRecentTransactionsView, __spreadValues({}, transactions))
9051
+ ] });
9052
+ };
9053
+ var EarnInvestmentDetailsView = (props) => {
9054
+ if (props.isLoading) {
9055
+ return /* @__PURE__ */ jsxRuntime.jsx(BackgroundContainer, { children: props.loadingSkeleton });
9056
+ }
9057
+ const {
9058
+ title,
9059
+ onBack,
9060
+ tokenIcon,
9061
+ fiatBalance,
9062
+ profitAmount,
9063
+ tokenAmount,
9064
+ investedLabel,
9065
+ earningsLabel,
9066
+ summaryTitle,
9067
+ summaryItems,
9068
+ pastActivitiesTitle,
9069
+ transactions,
9070
+ onTransactionClick,
9071
+ showMoreButton,
9072
+ onLoadMore,
9073
+ loadMoreLabel,
9074
+ depositLabel,
9075
+ onDeposit,
9076
+ withdrawLabel,
9077
+ onWithdraw
9078
+ } = props;
9079
+ return /* @__PURE__ */ jsxRuntime.jsxs(BackgroundContainer, { children: [
9080
+ /* @__PURE__ */ jsxRuntime.jsxs(Navbar, { children: [
9081
+ /* @__PURE__ */ jsxRuntime.jsx(BackButton, { onClick: onBack }),
9082
+ /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h1", children: title })
9083
+ ] }),
9084
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col min-h-0 px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-sm)] gap-[var(--deframe-widget-size-gap-md)]", children: [
9085
+ /* @__PURE__ */ jsxRuntime.jsx(
9086
+ EarnBalanceCard,
9087
+ {
9088
+ tokenIcon,
9089
+ fiatBalance,
9090
+ profitAmount,
9091
+ tokenAmount,
9092
+ investedLabel,
9093
+ earningsLabel
9094
+ }
9095
+ ),
9096
+ /* @__PURE__ */ jsxRuntime.jsx(
9097
+ SummaryDetails,
9098
+ {
9099
+ title: summaryTitle,
9100
+ items: summaryItems,
9101
+ defaultOpen: true,
9102
+ className: "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-primary)]"
9103
+ }
9104
+ ),
9105
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full rounded-[var(--deframe-widget-size-radius-sm)] flex flex-col gap-[var(--deframe-widget-size-gap-sm)] flex-shrink-0", children: [
9106
+ /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h5", children: pastActivitiesTitle }),
9107
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "investment-activities-list flex flex-col gap-[var(--deframe-widget-size-gap-sm)] overflow-y-auto max-h-[280px] pr-[var(--deframe-widget-size-padding-x-sm)]", children: [
9108
+ transactions.map((tx) => /* @__PURE__ */ jsxRuntime.jsxs(
9109
+ ListItem,
9110
+ {
9111
+ onClick: () => onTransactionClick(tx.id),
9112
+ children: [
9113
+ /* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: tokenIcon, alt: "Token", className: "w-10 h-10 rounded-[var(--deframe-widget-size-radius-full)]" }) }),
9114
+ /* @__PURE__ */ jsxRuntime.jsxs(ListItemContent, { children: [
9115
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { children: tx.action }),
9116
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: tx.date })
9117
+ ] }),
9118
+ /* @__PURE__ */ jsxRuntime.jsxs(ListItemRightSide, { children: [
9119
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { children: tx.usdAmount }),
9120
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: tx.tokenAmount })
9121
+ ] })
9122
+ ]
9123
+ },
9124
+ `tx-history-${tx.id}`
9125
+ )),
9126
+ showMoreButton && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center items-center w-full py-4 flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(TertiaryButton, { onClick: onLoadMore, children: loadMoreLabel }) })
9127
+ ] })
9128
+ ] })
9129
+ ] }),
9130
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky bottom-0 left-0 right-0 border-t border-[var(--deframe-widget-color-border-secondary)] px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between gap-[var(--deframe-widget-size-gap-md)]", children: [
9131
+ /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { onClick: onDeposit, className: "w-full", children: depositLabel }),
9132
+ /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { onClick: onWithdraw, className: "w-full", children: withdrawLabel })
9133
+ ] }) })
9134
+ ] });
9135
+ };
9136
+ var EarnTokenSelectorView = ({
9137
+ selectedToken,
9138
+ onTokenClick,
9139
+ onNetworkAndAssetClick,
9140
+ onNetworkClick,
9141
+ isLoading,
9142
+ selectTokenLabel,
9143
+ chainLabel,
9144
+ chainImage,
9145
+ chainDirectionLabel,
9146
+ chainDisabledTitle,
9147
+ isNetworkDisabled = false,
9148
+ currentNetworkSelected
9149
+ }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[10px]", children: [
9150
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-[10px] w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
9151
+ "button",
8326
9152
  {
8327
9153
  type: "button",
8328
9154
  onClick: onNetworkAndAssetClick != null ? onNetworkAndAssetClick : onTokenClick,
@@ -9876,7 +10702,7 @@ function EarnFormSkeleton() {
9876
10702
  "px-[var(--deframe-widget-size-padding-x-md)]",
9877
10703
  "py-[var(--deframe-widget-size-padding-y-md)]"
9878
10704
  ].join(" ");
9879
- const titleClasses = [
10705
+ const titleClasses2 = [
9880
10706
  "flex-1",
9881
10707
  "text-[15px]",
9882
10708
  "[font-weight:var(--deframe-widget-font-weight-semibold)]",
@@ -9906,7 +10732,7 @@ function EarnFormSkeleton() {
9906
10732
  "data-test-id": "earn-form-skeleton",
9907
10733
  className: "flex flex-col font-[var(--deframe-widget-font-family)]",
9908
10734
  children: [
9909
- /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "earn-form-skeleton-header", className: headerClasses, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: titleClasses, children: "Deposit" }) }),
10735
+ /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "earn-form-skeleton-header", className: headerClasses, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: titleClasses2, children: "Deposit" }) }),
9910
10736
  /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "earn-form-skeleton-divider", className: dividerClasses }),
9911
10737
  /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "earn-form-skeleton-body", className: bodyClasses, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": "earn-form-skeleton-input-card", className: inputCardClasses, children: [
9912
10738
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)]", children: [
@@ -10007,7 +10833,7 @@ function EarnFeedbackOverlaySimpleView({
10007
10833
  "flex flex-col items-center",
10008
10834
  "gap-[var(--deframe-widget-size-gap-sm)] text-center"
10009
10835
  );
10010
- const titleClasses = tailwindMerge.twMerge(
10836
+ const titleClasses2 = tailwindMerge.twMerge(
10011
10837
  isLoading ? "[font-size:12px] [line-height:1.25] [letter-spacing:0.10em] uppercase [font-weight:var(--deframe-widget-font-weight-semibold)] font-[var(--deframe-widget-font-family)] text-[color:var(--deframe-widget-color-brand-primary)]" : "text-[22px] font-bold text-[color:var(--deframe-widget-color-text-primary)] leading-[1.25]"
10012
10838
  );
10013
10839
  const subtitleClasses = tailwindMerge.twMerge(
@@ -10052,7 +10878,7 @@ function EarnFeedbackOverlaySimpleView({
10052
10878
  {
10053
10879
  "data-test-id": "earn-feedback-title",
10054
10880
  "data-slot": "earn-feedback-title",
10055
- className: titleClasses,
10881
+ className: titleClasses2,
10056
10882
  children: title
10057
10883
  }
10058
10884
  ),
@@ -11080,10 +11906,304 @@ function OnchainDepositFormView({
11080
11906
  children: submitLabel
11081
11907
  }
11082
11908
  )
11083
- ] })
11909
+ ] })
11910
+ }
11911
+ );
11912
+ }
11913
+ var OnchainDepositFormSimpleView = ({
11914
+ // Token selector
11915
+ selectedToken,
11916
+ onTokenClick,
11917
+ selectedChain,
11918
+ // Address
11919
+ depositAddress,
11920
+ onAddressCopy,
11921
+ // Navigation
11922
+ onBack,
11923
+ onClose,
11924
+ // Labels
11925
+ labels,
11926
+ // Tab switcher
11927
+ activeTab,
11928
+ cryptoHref,
11929
+ pixHref
11930
+ }) => {
11931
+ var _a;
11932
+ const hasToken = selectedToken != null;
11933
+ const showAddressSection = hasToken && !!depositAddress;
11934
+ const panelBaseClasses = [
11935
+ "relative flex flex-col overflow-hidden w-[420px]",
11936
+ "rounded-[var(--deframe-widget-size-radius-md)]",
11937
+ "border border-[color:var(--deframe-widget-color-border-secondary)]",
11938
+ "font-[var(--deframe-widget-font-family)]"
11939
+ ].join(" ");
11940
+ const headerBaseClasses = [
11941
+ "flex items-center",
11942
+ "px-[var(--deframe-widget-size-padding-x-md)]",
11943
+ "py-[var(--deframe-widget-size-padding-y-md)]"
11944
+ ].join(" ");
11945
+ const titleBaseClasses = [
11946
+ "flex-1",
11947
+ "text-[15px]",
11948
+ "[font-weight:var(--deframe-widget-font-weight-semibold)]",
11949
+ "text-[color:var(--deframe-widget-color-text-primary)]"
11950
+ ].join(" ");
11951
+ const dividerClasses = "h-px bg-[var(--deframe-widget-color-border-secondary)]";
11952
+ const bodyBaseClasses = [
11953
+ "flex flex-col",
11954
+ "gap-[var(--deframe-widget-size-gap-md)]",
11955
+ "px-[var(--deframe-widget-size-padding-x-md)]",
11956
+ "py-[var(--deframe-widget-size-padding-y-md)]"
11957
+ ].join(" ");
11958
+ return /* @__PURE__ */ jsxRuntime.jsxs(
11959
+ "div",
11960
+ {
11961
+ "data-slot": "onchain-deposit-simple-panel",
11962
+ "data-test-id": "onchain-deposit-form-simple-view",
11963
+ className: panelBaseClasses,
11964
+ children: [
11965
+ /* @__PURE__ */ jsxRuntime.jsxs(
11966
+ "header",
11967
+ {
11968
+ "data-slot": "onchain-deposit-simple-header",
11969
+ "data-test-id": "onchain-deposit-form-simple-view-header",
11970
+ className: headerBaseClasses,
11971
+ children: [
11972
+ /* @__PURE__ */ jsxRuntime.jsx(
11973
+ "span",
11974
+ {
11975
+ "data-slot": "onchain-deposit-simple-title",
11976
+ "data-test-id": "onchain-deposit-form-simple-view-title",
11977
+ className: titleBaseClasses,
11978
+ children: labels.title
11979
+ }
11980
+ ),
11981
+ onClose && /* @__PURE__ */ jsxRuntime.jsx(
11982
+ CloseButton_default,
11983
+ {
11984
+ onClick: onClose,
11985
+ ariaLabel: "Close deposit panel",
11986
+ testId: "onchain-deposit-form-simple-view-close"
11987
+ }
11988
+ )
11989
+ ]
11990
+ }
11991
+ ),
11992
+ /* @__PURE__ */ jsxRuntime.jsx(
11993
+ "div",
11994
+ {
11995
+ "data-slot": "onchain-deposit-simple-divider",
11996
+ "data-test-id": "onchain-deposit-form-simple-view-divider",
11997
+ className: dividerClasses
11998
+ }
11999
+ ),
12000
+ /* @__PURE__ */ jsxRuntime.jsx(
12001
+ "nav",
12002
+ {
12003
+ "data-slot": "onchain-deposit-simple-tabs",
12004
+ "data-test-id": "onchain-deposit-form-simple-view-tabs",
12005
+ className: "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-sm)]",
12006
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
12007
+ "div",
12008
+ {
12009
+ role: "tablist",
12010
+ "data-test-id": "onchain-deposit-form-simple-view-tablist",
12011
+ className: tailwindMerge.twMerge(
12012
+ "inline-flex w-full rounded-[var(--deframe-widget-size-radius-md)]",
12013
+ "bg-[var(--deframe-widget-color-bg-secondary)]",
12014
+ "border border-[color:var(--deframe-widget-color-border-secondary)]",
12015
+ "p-[3px] gap-[2px]"
12016
+ ),
12017
+ children: [
12018
+ /* @__PURE__ */ jsxRuntime.jsx(
12019
+ "a",
12020
+ {
12021
+ href: cryptoHref != null ? cryptoHref : "/dashboard/deposit/onchain",
12022
+ role: "tab",
12023
+ "aria-selected": activeTab === "crypto",
12024
+ "aria-current": activeTab === "crypto" ? "page" : void 0,
12025
+ "aria-label": "Cripto",
12026
+ "data-test-id": "onchain-deposit-form-simple-view-tab-crypto",
12027
+ className: tailwindMerge.twMerge(
12028
+ "inline-flex flex-1 items-center justify-center",
12029
+ "gap-[var(--deframe-widget-size-gap-xs)]",
12030
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
12031
+ "border-[length:var(--deframe-widget-size-border-sm)] border-solid border-transparent",
12032
+ "outline-none whitespace-nowrap transition-[background,color,border-color] duration-150",
12033
+ "font-[var(--deframe-widget-font-family)] [font-weight:var(--deframe-widget-font-weight-medium)]",
12034
+ "py-[5px] px-[var(--deframe-widget-size-padding-x-lg)]",
12035
+ "[font-size:var(--deframe-widget-font-size-md)] [line-height:var(--deframe-widget-font-leading-md)]",
12036
+ activeTab === "crypto" ? "text-[color:var(--deframe-widget-color-brand-primary)]" : "text-[color:var(--deframe-widget-color-text-secondary)] hover:bg-[var(--deframe-widget-color-bg-tertiary)]"
12037
+ ),
12038
+ children: "Cripto"
12039
+ }
12040
+ ),
12041
+ /* @__PURE__ */ jsxRuntime.jsx(
12042
+ "a",
12043
+ {
12044
+ href: pixHref != null ? pixHref : "/dashboard/deposit/onramp",
12045
+ role: "tab",
12046
+ "aria-selected": activeTab === "pix",
12047
+ "aria-current": activeTab === "pix" ? "page" : void 0,
12048
+ "aria-label": "PIX",
12049
+ "data-test-id": "onchain-deposit-form-simple-view-tab-pix",
12050
+ className: tailwindMerge.twMerge(
12051
+ "inline-flex flex-1 items-center justify-center",
12052
+ "gap-[var(--deframe-widget-size-gap-xs)]",
12053
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
12054
+ "border-[length:var(--deframe-widget-size-border-sm)] border-solid border-transparent",
12055
+ "outline-none whitespace-nowrap transition-[background,color,border-color] duration-150",
12056
+ "font-[var(--deframe-widget-font-family)] [font-weight:var(--deframe-widget-font-weight-medium)]",
12057
+ "py-[5px] px-[var(--deframe-widget-size-padding-x-lg)]",
12058
+ "[font-size:var(--deframe-widget-font-size-md)] [line-height:var(--deframe-widget-font-leading-md)]",
12059
+ activeTab === "pix" ? "text-[color:var(--deframe-widget-color-brand-primary)]" : "text-[color:var(--deframe-widget-color-text-secondary)] hover:bg-[var(--deframe-widget-color-bg-tertiary)]"
12060
+ ),
12061
+ children: "PIX"
12062
+ }
12063
+ )
12064
+ ]
12065
+ }
12066
+ )
12067
+ }
12068
+ ),
12069
+ /* @__PURE__ */ jsxRuntime.jsx(
12070
+ "div",
12071
+ {
12072
+ "data-slot": "onchain-deposit-simple-divider-tabs",
12073
+ "data-test-id": "onchain-deposit-form-simple-view-divider-tabs",
12074
+ className: dividerClasses
12075
+ }
12076
+ ),
12077
+ /* @__PURE__ */ jsxRuntime.jsxs(
12078
+ "div",
12079
+ {
12080
+ "data-slot": "onchain-deposit-simple-body",
12081
+ "data-test-id": "onchain-deposit-form-simple-view-body",
12082
+ className: bodyBaseClasses,
12083
+ children: [
12084
+ /* @__PURE__ */ jsxRuntime.jsxs(
12085
+ "div",
12086
+ {
12087
+ "data-slot": "onchain-deposit-simple-token-card",
12088
+ "data-test-id": "onchain-deposit-form-simple-view-token-card",
12089
+ className: tailwindMerge.twMerge(
12090
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
12091
+ "border border-[color:var(--deframe-widget-color-border-secondary)]",
12092
+ "bg-[var(--deframe-widget-color-bg-secondary)]",
12093
+ "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]"
12094
+ ),
12095
+ children: [
12096
+ /* @__PURE__ */ jsxRuntime.jsx(
12097
+ EarnTokenSelectorSimpleView,
12098
+ {
12099
+ selectedToken,
12100
+ onTokenClick,
12101
+ onNetworkAndAssetClick: onTokenClick,
12102
+ isLoading: false,
12103
+ selectTokenLabel: "SELECIONE AQUI",
12104
+ chainLabel: (_a = selectedChain == null ? void 0 : selectedChain.name) != null ? _a : "",
12105
+ chainImage: selectedChain == null ? void 0 : selectedChain.iconUrl
12106
+ }
12107
+ ),
12108
+ !hasToken && /* @__PURE__ */ jsxRuntime.jsx(
12109
+ "p",
12110
+ {
12111
+ "data-slot": "onchain-deposit-simple-empty-hint",
12112
+ "data-test-id": "onchain-deposit-form-simple-view-empty-hint",
12113
+ className: "mt-[var(--deframe-widget-size-gap-sm)] text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]",
12114
+ children: labels.tokenPlaceholder
12115
+ }
12116
+ )
12117
+ ]
12118
+ }
12119
+ ),
12120
+ /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: showAddressSection && /* @__PURE__ */ jsxRuntime.jsxs(
12121
+ framerMotion.motion.div,
12122
+ {
12123
+ "data-slot": "onchain-deposit-simple-address-section",
12124
+ "data-test-id": "onchain-deposit-form-simple-view-address-section",
12125
+ initial: { opacity: 0, height: 0 },
12126
+ animate: { opacity: 1, height: "auto" },
12127
+ exit: { opacity: 0, height: 0 },
12128
+ transition: { duration: 0.2, ease: "easeOut" },
12129
+ style: { overflow: "hidden" },
12130
+ className: "flex flex-col gap-[var(--deframe-widget-size-gap-md)]",
12131
+ children: [
12132
+ /* @__PURE__ */ jsxRuntime.jsxs(
12133
+ "div",
12134
+ {
12135
+ "data-slot": "onchain-deposit-simple-address-card",
12136
+ "data-test-id": "onchain-deposit-form-simple-view-address-card",
12137
+ className: tailwindMerge.twMerge(
12138
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
12139
+ "border border-[color:var(--deframe-widget-color-border-secondary)]",
12140
+ "bg-[var(--deframe-widget-color-bg-secondary)]",
12141
+ "px-[var(--deframe-widget-size-padding-x-md)] pt-[var(--deframe-widget-size-padding-y-sm)] pb-[var(--deframe-widget-size-padding-y-md)]"
12142
+ ),
12143
+ children: [
12144
+ /* @__PURE__ */ jsxRuntime.jsx(
12145
+ "p",
12146
+ {
12147
+ "data-test-id": "onchain-deposit-form-simple-view-address-label",
12148
+ className: "mb-[var(--deframe-widget-size-gap-sm)] text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]",
12149
+ children: "Endere\xE7o de dep\xF3sito"
12150
+ }
12151
+ ),
12152
+ /* @__PURE__ */ jsxRuntime.jsx(
12153
+ AddressDisplay,
12154
+ {
12155
+ address: depositAddress,
12156
+ onCopy: onAddressCopy
12157
+ }
12158
+ )
12159
+ ]
12160
+ }
12161
+ ),
12162
+ /* @__PURE__ */ jsxRuntime.jsx(
12163
+ EarnInlineNotificationSimpleView,
12164
+ {
12165
+ variant: "warning",
12166
+ message: labels.warnBannerTokenChain
12167
+ }
12168
+ )
12169
+ ]
12170
+ }
12171
+ ) })
12172
+ ]
12173
+ }
12174
+ ),
12175
+ /* @__PURE__ */ jsxRuntime.jsx(
12176
+ "footer",
12177
+ {
12178
+ "data-slot": "onchain-deposit-simple-footer",
12179
+ "data-test-id": "onchain-deposit-form-simple-view-footer",
12180
+ className: "px-[var(--deframe-widget-size-padding-x-md)] pb-[var(--deframe-widget-size-padding-y-md)]",
12181
+ children: /* @__PURE__ */ jsxRuntime.jsx(
12182
+ SecondaryButton,
12183
+ {
12184
+ type: "button",
12185
+ className: [
12186
+ "w-full h-12 rounded-[var(--deframe-widget-size-radius-sm)]",
12187
+ "text-[15px] text-[color:var(--deframe-widget-color-text-secondary)]",
12188
+ "border-[color:var(--deframe-widget-color-border-secondary)]",
12189
+ "outline-none",
12190
+ "transition-[background,color,border-color] duration-150",
12191
+ "hover:opacity-100",
12192
+ "hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_60%,transparent)]",
12193
+ "hover:text-[color:var(--deframe-widget-color-text-primary)]"
12194
+ ].join(" "),
12195
+ onClick: onBack,
12196
+ "aria-label": labels.backLabel,
12197
+ "data-test-id": "onchain-deposit-form-simple-view-cancel",
12198
+ children: labels.backLabel
12199
+ }
12200
+ )
12201
+ }
12202
+ )
12203
+ ]
11084
12204
  }
11085
12205
  );
11086
- }
12206
+ };
11087
12207
 
11088
12208
  // src/utils/truncate-address.ts
11089
12209
  function truncateAddress(address, startChars = 6, endChars = 4) {
@@ -11217,333 +12337,703 @@ function OnchainDepositSuccessView({
11217
12337
  /* @__PURE__ */ jsxRuntime.jsxs(
11218
12338
  "div",
11219
12339
  {
11220
- className: "w-full mt-4 bg-[var(--deframe-widget-color-bg-tertiary)] rounded",
11221
- "data-test-id": "onchain-deposit-success-details",
11222
- children: [
11223
- /* @__PURE__ */ jsxRuntime.jsxs(
11224
- "button",
12340
+ className: "w-full mt-4 bg-[var(--deframe-widget-color-bg-tertiary)] rounded",
12341
+ "data-test-id": "onchain-deposit-success-details",
12342
+ children: [
12343
+ /* @__PURE__ */ jsxRuntime.jsxs(
12344
+ "button",
12345
+ {
12346
+ onClick: () => setShowDetails(!showDetails),
12347
+ className: "flex justify-between items-center w-full text-left cursor-pointer p-4",
12348
+ "aria-label": labels.detailsTitle,
12349
+ "data-test-id": "onchain-deposit-success-details-toggle",
12350
+ children: [
12351
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] font-semibold", children: labels.detailsTitle }),
12352
+ /* @__PURE__ */ jsxRuntime.jsx(
12353
+ md.MdOutlineExpandMore,
12354
+ {
12355
+ className: tailwindMerge.twMerge(
12356
+ "transition-transform text-[color:var(--deframe-widget-color-text-secondary)]",
12357
+ showDetails && "rotate-180"
12358
+ )
12359
+ }
12360
+ )
12361
+ ]
12362
+ }
12363
+ ),
12364
+ showDetails && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 pb-4", children: [
12365
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-4 w-full", children: [
12366
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[length:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-primary)] font-medium", children: labels.estimatedTimeLabel }),
12367
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.estimatedTimeValue })
12368
+ ] }),
12369
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 flex flex-col", children: labels.steps.map((step, index) => {
12370
+ var _a, _b;
12371
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [
12372
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
12373
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-6 h-6 rounded-full bg-[var(--deframe-widget-color-bg-tertiary)] flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(io5.IoCheckmarkOutline, { className: "w-4 h-4 text-[color:var(--deframe-widget-color-state-success)]" }) }),
12374
+ index < labels.steps.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[2px] h-6 bg-[var(--deframe-widget-color-state-success)]" })
12375
+ ] }),
12376
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("flex flex-col", index < labels.steps.length - 1 && "pb-2"), children: [
12377
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: step.label }),
12378
+ /* @__PURE__ */ jsxRuntime.jsx(
12379
+ "span",
12380
+ {
12381
+ className: tailwindMerge.twMerge(
12382
+ "text-[12px] font-semibold",
12383
+ step.statusText && "text-[color:var(--deframe-widget-color-state-success)]"
12384
+ ),
12385
+ children: (_b = step.statusText) != null ? _b : (_a = labels.steps[index]) == null ? void 0 : _a.label
12386
+ }
12387
+ )
12388
+ ] })
12389
+ ] }, step.label);
12390
+ }) })
12391
+ ] })
12392
+ ]
12393
+ }
12394
+ ),
12395
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full mt-8", children: /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { onClick: onViewHistory, "data-test-id": "onchain-deposit-success-action", children: labels.viewHistoryLabel }) })
12396
+ ] }) })
12397
+ ]
12398
+ }
12399
+ );
12400
+ }
12401
+ var OnchainDepositSuccessSimpleView = ({
12402
+ onClose
12403
+ }) => {
12404
+ React6__namespace.useEffect(() => {
12405
+ if (!onClose) return;
12406
+ const timer = setTimeout(onClose, 5e3);
12407
+ return () => clearTimeout(timer);
12408
+ }, [onClose]);
12409
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "onchain-deposit-success-simple-view", children: /* @__PURE__ */ jsxRuntime.jsx(
12410
+ EarnFeedbackOverlaySimpleView,
12411
+ {
12412
+ variant: "success",
12413
+ title: "Dep\xF3sito Confirmado!",
12414
+ subtitle: "Seu saldo foi atualizado."
12415
+ }
12416
+ ) });
12417
+ };
12418
+ function OnchainWithdrawFormView({
12419
+ selectedToken,
12420
+ onTokenClick,
12421
+ isProcessing,
12422
+ chainCount,
12423
+ selectedChain,
12424
+ onNetworkClick,
12425
+ formattedBalance,
12426
+ amount,
12427
+ onAmountChange,
12428
+ isAmountInputDisabled,
12429
+ onMaxClick,
12430
+ showMaxButton,
12431
+ formattedAmountUsd,
12432
+ destinationNetwork,
12433
+ destinationAddress,
12434
+ onDestinationAddressChange,
12435
+ txDetails,
12436
+ isBelowMinAmount,
12437
+ walletError,
12438
+ transferError,
12439
+ showWarning,
12440
+ warningLabel,
12441
+ isSubmitDisabled,
12442
+ onSubmit,
12443
+ submitLabel,
12444
+ onBack,
12445
+ labels,
12446
+ className
12447
+ }) {
12448
+ const [showTxDetails, setShowTxDetails] = React6.useState(false);
12449
+ return /* @__PURE__ */ jsxRuntime.jsx(
12450
+ "div",
12451
+ {
12452
+ className: tailwindMerge.twMerge(
12453
+ "w-full max-w-[620px] relative bg-[var(--deframe-widget-color-bg-primary)] lg:bg-[var(--deframe-widget-color-bg-secondary)] overflow-hidden mx-auto lg:my-[75px] rounded p-6 lg:p-12",
12454
+ className
12455
+ ),
12456
+ "data-test-id": "onchain-withdraw-form-view",
12457
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col w-full px-2 py-0.5 rounded gap-1", children: [
12458
+ /* @__PURE__ */ jsxRuntime.jsx(
12459
+ SecondaryButton,
12460
+ {
12461
+ onClick: onBack,
12462
+ className: "mb-4 !border-0 max-w-[84px]",
12463
+ "aria-label": labels.backLabel,
12464
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
12465
+ /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineArrowBack, { className: "w-5 h-5 text-[color:var(--deframe-widget-color-text-primary)]" }),
12466
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-primary)]", children: labels.backLabel })
12467
+ ] })
12468
+ }
12469
+ ),
12470
+ /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h2", children: labels.title }),
12471
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: labels.subtitle }),
12472
+ /* @__PURE__ */ jsxRuntime.jsx(
12473
+ "div",
12474
+ {
12475
+ className: "my-4 p-[var(--deframe-widget-size-padding-x-md)] w-full bg-[var(--deframe-widget-color-bg-tertiary)] rounded",
12476
+ "data-test-id": "onchain-withdraw-token-card",
12477
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row gap-[var(--deframe-widget-size-gap-md)] items-center", children: [
12478
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)] flex-1", children: [
12479
+ /* @__PURE__ */ jsxRuntime.jsxs(
12480
+ "button",
12481
+ {
12482
+ onClick: onTokenClick,
12483
+ disabled: isProcessing,
12484
+ className: "h-[56px] border border-[var(--deframe-widget-color-border-secondary)] rounded overflow-hidden transition-colors flex items-center px-[var(--deframe-widget-size-padding-x-sm)] py-[6px] w-full cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed",
12485
+ "data-test-id": "onchain-withdraw-token-button",
12486
+ "aria-label": labels.tokenPlaceholder,
12487
+ children: [
12488
+ selectedToken ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)] flex-1", children: [
12489
+ /* @__PURE__ */ jsxRuntime.jsx(
12490
+ "img",
12491
+ {
12492
+ src: selectedToken.logoURI || "",
12493
+ alt: selectedToken.symbol,
12494
+ className: "w-6 h-6 rounded-full object-cover"
12495
+ }
12496
+ ),
12497
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-left", children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-large", className: "font-semibold", children: selectedToken.symbol }) })
12498
+ ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)] flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.tokenPlaceholder }) }),
12499
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center w-[18px] h-[18px]", children: /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineArrowDropDown, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-tertiary)]" }) })
12500
+ ]
12501
+ }
12502
+ ),
12503
+ /* @__PURE__ */ jsxRuntime.jsxs(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-tertiary)]", children: [
12504
+ labels.balancePrefix,
12505
+ ": ",
12506
+ formattedBalance
12507
+ ] }),
12508
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row items-center gap-[var(--deframe-widget-size-gap-xs)]", children: [
12509
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "tracking-wide text-[color:var(--deframe-widget-color-text-tertiary)]", children: labels.chainDirectionLabel }),
12510
+ chainCount === 0 || !selectedChain ? /* @__PURE__ */ jsxRuntime.jsxs(
12511
+ "button",
12512
+ {
12513
+ disabled: true,
12514
+ className: "ml-6 bg-[var(--deframe-widget-color-bg-tertiary)] rounded-full flex items-center gap-[var(--deframe-widget-size-gap-xs)] px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)] opacity-50 cursor-not-allowed",
12515
+ "data-test-id": "onchain-withdraw-chain-disabled",
12516
+ children: [
12517
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.chainPlaceholder }),
12518
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center w-[18px] h-[18px]", children: /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineArrowDropDown, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-tertiary)]" }) })
12519
+ ]
12520
+ }
12521
+ ) : chainCount > 1 ? /* @__PURE__ */ jsxRuntime.jsxs(
12522
+ "button",
12523
+ {
12524
+ onClick: onNetworkClick,
12525
+ className: "ml-6 bg-[var(--deframe-widget-color-bg-tertiary)] border border-[var(--deframe-widget-color-border-tertiary)] rounded-full flex items-center gap-[var(--deframe-widget-size-gap-xs)] px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)] transition-colors cursor-pointer",
12526
+ "data-test-id": "onchain-withdraw-chain-dropdown",
12527
+ "aria-label": labels.chainPlaceholder,
12528
+ children: [
12529
+ /* @__PURE__ */ jsxRuntime.jsx(
12530
+ "img",
12531
+ {
12532
+ src: selectedChain.iconUrl,
12533
+ alt: selectedChain.name,
12534
+ className: "w-3 h-3 rounded-full object-cover"
12535
+ }
12536
+ ),
12537
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-secondary)]", children: selectedChain.name }),
12538
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center w-[18px] h-[18px]", children: /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineArrowDropDown, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-tertiary)]" }) })
12539
+ ]
12540
+ }
12541
+ ) : /* @__PURE__ */ jsxRuntime.jsxs(
12542
+ "div",
12543
+ {
12544
+ className: "ml-6 bg-[var(--deframe-widget-color-bg-tertiary)] border border-[var(--deframe-widget-color-border-tertiary)] rounded-lg flex items-center gap-[var(--deframe-widget-size-gap-xs)] px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)]",
12545
+ "data-test-id": "onchain-withdraw-chain-static",
12546
+ children: [
12547
+ /* @__PURE__ */ jsxRuntime.jsx(
12548
+ "img",
12549
+ {
12550
+ src: selectedChain.iconUrl,
12551
+ alt: selectedChain.name,
12552
+ className: "w-3 h-3 rounded-full object-cover"
12553
+ }
12554
+ ),
12555
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-secondary)]", children: selectedChain.name })
12556
+ ]
12557
+ }
12558
+ )
12559
+ ] })
12560
+ ] }),
12561
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col flex-1 items-end justify-center gap-[var(--deframe-widget-size-gap-xs)] relative", children: [
12562
+ /* @__PURE__ */ jsxRuntime.jsx(
12563
+ Input2,
12564
+ {
12565
+ id: "withdraw-amount-input",
12566
+ placeholder: "0.00",
12567
+ inputMode: "decimal",
12568
+ autoComplete: "off",
12569
+ "aria-label": "Amount to withdraw",
12570
+ min: "0",
12571
+ step: "any",
12572
+ type: "number",
12573
+ value: amount,
12574
+ onChange: (e) => onAmountChange(e.target.value),
12575
+ onWheel: (event) => {
12576
+ event.currentTarget.blur();
12577
+ },
12578
+ disabled: isAmountInputDisabled,
12579
+ className: "text-h2-mobile font-extrabold bg-transparent outline-none text-right w-full min-w-[120px] placeholder:text-[color:var(--deframe-widget-color-placeholder-primary)] text-[color:var(--deframe-widget-color-text-primary)] [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none disabled:opacity-50 disabled:cursor-not-allowed",
12580
+ "data-test-id": "onchain-withdraw-amount-input"
12581
+ }
12582
+ ),
12583
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-tertiary)]", children: formattedAmountUsd }),
12584
+ showMaxButton && /* @__PURE__ */ jsxRuntime.jsx(
12585
+ "button",
12586
+ {
12587
+ onClick: onMaxClick,
12588
+ className: "absolute top-0 right-0 text-[length:var(--deframe-widget-font-size-xs)] text-[color:var(--deframe-widget-color-brand-primary)] cursor-pointer -translate-y-6",
12589
+ "data-test-id": "onchain-withdraw-max-button",
12590
+ "aria-label": "Max",
12591
+ children: "Max"
12592
+ }
12593
+ )
12594
+ ] })
12595
+ ] })
12596
+ }
12597
+ ),
12598
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", "data-test-id": "onchain-withdraw-destination-network", children: [
12599
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "mb-2", children: labels.destinationNetworkLabel }),
12600
+ /* @__PURE__ */ jsxRuntime.jsx(
12601
+ "div",
12602
+ {
12603
+ className: tailwindMerge.twMerge(
12604
+ "flex items-center gap-2 border border-[var(--deframe-widget-color-border-secondary)] rounded p-4 w-full",
12605
+ !destinationNetwork ? "opacity-50 cursor-not-allowed" : "bg-[var(--deframe-widget-color-bg-tertiary)]"
12606
+ ),
12607
+ children: destinationNetwork ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
12608
+ /* @__PURE__ */ jsxRuntime.jsx(
12609
+ "img",
11225
12610
  {
11226
- onClick: () => setShowDetails(!showDetails),
11227
- className: "flex justify-between items-center w-full text-left cursor-pointer p-4",
11228
- "aria-label": labels.detailsTitle,
11229
- "data-test-id": "onchain-deposit-success-details-toggle",
11230
- children: [
11231
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] font-semibold", children: labels.detailsTitle }),
11232
- /* @__PURE__ */ jsxRuntime.jsx(
11233
- md.MdOutlineExpandMore,
11234
- {
11235
- className: tailwindMerge.twMerge(
11236
- "transition-transform text-[color:var(--deframe-widget-color-text-secondary)]",
11237
- showDetails && "rotate-180"
11238
- )
11239
- }
11240
- )
11241
- ]
12611
+ src: destinationNetwork.iconUrl,
12612
+ alt: destinationNetwork.name,
12613
+ className: "w-5 h-5 rounded-full object-cover"
11242
12614
  }
11243
12615
  ),
11244
- showDetails && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 pb-4", children: [
11245
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-4 w-full", children: [
11246
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[length:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-primary)] font-medium", children: labels.estimatedTimeLabel }),
11247
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.estimatedTimeValue })
11248
- ] }),
11249
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 flex flex-col", children: labels.steps.map((step, index) => {
11250
- var _a, _b;
11251
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [
11252
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
11253
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-6 h-6 rounded-full bg-[var(--deframe-widget-color-bg-tertiary)] flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(io5.IoCheckmarkOutline, { className: "w-4 h-4 text-[color:var(--deframe-widget-color-state-success)]" }) }),
11254
- index < labels.steps.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[2px] h-6 bg-[var(--deframe-widget-color-state-success)]" })
11255
- ] }),
11256
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("flex flex-col", index < labels.steps.length - 1 && "pb-2"), children: [
11257
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: step.label }),
11258
- /* @__PURE__ */ jsxRuntime.jsx(
11259
- "span",
11260
- {
11261
- className: tailwindMerge.twMerge(
11262
- "text-[12px] font-semibold",
11263
- step.statusText && "text-[color:var(--deframe-widget-color-state-success)]"
11264
- ),
11265
- children: (_b = step.statusText) != null ? _b : (_a = labels.steps[index]) == null ? void 0 : _a.label
11266
- }
11267
- )
11268
- ] })
11269
- ] }, step.label);
11270
- }) })
11271
- ] })
11272
- ]
12616
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: destinationNetwork.name }),
12617
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto text-[length:var(--deframe-widget-font-size-xs)] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.destinationNetworkSameHint })
12618
+ ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.destinationNetworkEmpty })
11273
12619
  }
11274
- ),
11275
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full mt-8", children: /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { onClick: onViewHistory, "data-test-id": "onchain-deposit-success-action", children: labels.viewHistoryLabel }) })
11276
- ] }) })
11277
- ]
12620
+ )
12621
+ ] }),
12622
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", "data-test-id": "onchain-withdraw-destination-address", children: /* @__PURE__ */ jsxRuntime.jsx(
12623
+ Input2,
12624
+ {
12625
+ type: "text",
12626
+ label: labels.destinationAddressLabel,
12627
+ placeholder: labels.destinationAddressPlaceholder,
12628
+ value: destinationAddress,
12629
+ onChange: (e) => onDestinationAddressChange(e.target.value),
12630
+ disabled: isProcessing,
12631
+ className: "w-full px-4 py-3 bg-[var(--deframe-widget-color-bg-secondary)] border border-[var(--deframe-widget-color-border-secondary)] rounded outline-none disabled:opacity-50 disabled:cursor-not-allowed"
12632
+ }
12633
+ ) }),
12634
+ /* @__PURE__ */ jsxRuntime.jsx(BannerNotification, { message: labels.infoBanner, variant: "info", className: "gap-3" }),
12635
+ isBelowMinAmount && /* @__PURE__ */ jsxRuntime.jsx(BannerNotification, { message: labels.minAmountWarning, variant: "warning", className: "gap-3" }),
12636
+ txDetails !== null && /* @__PURE__ */ jsxRuntime.jsxs(
12637
+ "div",
12638
+ {
12639
+ className: "my-4 p-6 w-full bg-[var(--deframe-widget-color-bg-tertiary)] rounded",
12640
+ "data-test-id": "onchain-withdraw-tx-details",
12641
+ children: [
12642
+ /* @__PURE__ */ jsxRuntime.jsxs(
12643
+ "button",
12644
+ {
12645
+ onClick: () => setShowTxDetails((v) => !v),
12646
+ className: "flex justify-between items-center w-full text-left cursor-pointer",
12647
+ "aria-label": labels.txDetailsTitle,
12648
+ "data-test-id": "onchain-withdraw-tx-details-toggle",
12649
+ children: [
12650
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-large", className: "font-semibold", children: labels.txDetailsTitle }),
12651
+ /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineExpandMore, { className: tailwindMerge.twMerge("transition-transform", showTxDetails && "rotate-180") })
12652
+ ]
12653
+ }
12654
+ ),
12655
+ showTxDetails && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 space-y-3", children: [
12656
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [
12657
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.txDetailsAmountLabel }),
12658
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "font-semibold", children: txDetails.formattedAmount })
12659
+ ] }),
12660
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [
12661
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.txDetailsFeeLabel }),
12662
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "font-semibold", children: txDetails.formattedFee })
12663
+ ] }),
12664
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-[var(--deframe-widget-color-border-secondary)] pt-3 flex justify-between items-center", children: [
12665
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.txDetailsReceiveLabel }),
12666
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-large", className: "font-bold", children: txDetails.formattedReceive })
12667
+ ] })
12668
+ ] })
12669
+ ]
12670
+ }
12671
+ ),
12672
+ walletError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(BannerNotification, { message: walletError, variant: "error" }) }),
12673
+ transferError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(BannerNotification, { message: transferError, variant: "error", className: "gap-3" }) }),
12674
+ showWarning && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(BannerNotification, { message: warningLabel, variant: "warning" }) }),
12675
+ /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { disabled: isSubmitDisabled, onClick: onSubmit, "data-test-id": "onchain-withdraw-submit", children: isProcessing ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
12676
+ submitLabel,
12677
+ " ",
12678
+ /* @__PURE__ */ jsxRuntime.jsx(LoadingDots, {})
12679
+ ] }) : submitLabel })
12680
+ ] })
11278
12681
  }
11279
12682
  );
11280
12683
  }
11281
- function OnchainWithdrawFormView({
12684
+ var OnchainWithdrawFormSimpleView = ({
12685
+ // Token selector
11282
12686
  selectedToken,
11283
12687
  onTokenClick,
11284
- isProcessing,
11285
- chainCount,
11286
12688
  selectedChain,
11287
- onNetworkClick,
11288
- formattedBalance,
12689
+ // Amount
11289
12690
  amount,
11290
12691
  onAmountChange,
11291
- isAmountInputDisabled,
11292
- onMaxClick,
11293
- showMaxButton,
11294
12692
  formattedAmountUsd,
11295
- destinationNetwork,
12693
+ formattedBalance,
12694
+ // Percentage (new optional props)
12695
+ onPercentageClick,
12696
+ maxLabel,
12697
+ // Destination address
11296
12698
  destinationAddress,
11297
12699
  onDestinationAddressChange,
11298
- txDetails,
12700
+ // Errors
11299
12701
  isBelowMinAmount,
11300
12702
  walletError,
11301
12703
  transferError,
11302
- showWarning,
11303
- warningLabel,
12704
+ // Submit
11304
12705
  isSubmitDisabled,
12706
+ isProcessing,
11305
12707
  onSubmit,
11306
12708
  submitLabel,
12709
+ // Navigation
11307
12710
  onBack,
11308
- labels,
11309
- className
11310
- }) {
11311
- const [showTxDetails, setShowTxDetails] = React6.useState(false);
11312
- return /* @__PURE__ */ jsxRuntime.jsx(
12711
+ onClose,
12712
+ // Labels
12713
+ labels
12714
+ }) => {
12715
+ var _a;
12716
+ const hasToken = selectedToken != null;
12717
+ const hasAmountError = !!walletError || isBelowMinAmount;
12718
+ const hasAddressError = !!transferError;
12719
+ const isSubmitDisabledInternal = !hasToken || isSubmitDisabled || isProcessing || !amount || amount === "0" || amount === "" || !destinationAddress.trim();
12720
+ const [cardHovered, setCardHovered] = React6__namespace.default.useState(false);
12721
+ const hideTimerRef = React6__namespace.default.useRef(void 0);
12722
+ function handleHoverStart() {
12723
+ clearTimeout(hideTimerRef.current);
12724
+ setCardHovered(true);
12725
+ }
12726
+ function handleHoverEnd() {
12727
+ hideTimerRef.current = setTimeout(() => setCardHovered(false), 150);
12728
+ }
12729
+ React6__namespace.default.useEffect(() => () => clearTimeout(hideTimerRef.current), []);
12730
+ const panelBaseClasses = [
12731
+ "relative flex flex-col overflow-hidden w-[420px]",
12732
+ "rounded-[var(--deframe-widget-size-radius-md)]",
12733
+ "border border-[color:var(--deframe-widget-color-border-secondary)]",
12734
+ "font-[var(--deframe-widget-font-family)]"
12735
+ ].join(" ");
12736
+ const headerBaseClasses = [
12737
+ "flex items-center",
12738
+ "px-[var(--deframe-widget-size-padding-x-md)]",
12739
+ "py-[var(--deframe-widget-size-padding-y-md)]"
12740
+ ].join(" ");
12741
+ const titleBaseClasses = [
12742
+ "flex-1",
12743
+ "text-[15px]",
12744
+ "[font-weight:var(--deframe-widget-font-weight-semibold)]",
12745
+ "text-[color:var(--deframe-widget-color-text-primary)]"
12746
+ ].join(" ");
12747
+ const dividerClasses = "h-px bg-[var(--deframe-widget-color-border-secondary)]";
12748
+ const bodyBaseClasses = [
12749
+ "flex flex-col",
12750
+ "gap-[var(--deframe-widget-size-gap-md)]",
12751
+ "px-[var(--deframe-widget-size-padding-x-md)]",
12752
+ "py-[var(--deframe-widget-size-padding-y-md)]"
12753
+ ].join(" ");
12754
+ const inputCardClasses = tailwindMerge.twMerge(
12755
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
12756
+ "border",
12757
+ "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]",
12758
+ "transition-[border-color,background] duration-200",
12759
+ hasAmountError ? "border-[color:color-mix(in_srgb,var(--deframe-widget-color-state-error)_32%,transparent)] bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-error)_16%,transparent)]" : "border-[color:var(--deframe-widget-color-border-secondary)] bg-[var(--deframe-widget-color-bg-secondary)]"
12760
+ );
12761
+ const addressCardClasses = tailwindMerge.twMerge(
12762
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
12763
+ "border",
12764
+ "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]",
12765
+ "transition-[border-color,background] duration-200",
12766
+ hasAddressError ? "border-[color:color-mix(in_srgb,var(--deframe-widget-color-state-error)_32%,transparent)] bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-error)_16%,transparent)]" : "border-[color:var(--deframe-widget-color-border-secondary)] bg-[var(--deframe-widget-color-bg-secondary)]"
12767
+ );
12768
+ const footerBaseClasses = [
12769
+ "flex gap-[var(--deframe-widget-size-gap-sm)]",
12770
+ "px-[var(--deframe-widget-size-padding-x-md)]",
12771
+ "pb-[var(--deframe-widget-size-padding-y-md)]"
12772
+ ].join(" ");
12773
+ const cancelButtonClasses = [
12774
+ "flex-1 h-12 rounded-[var(--deframe-widget-size-radius-sm)]",
12775
+ "text-[15px] text-[color:var(--deframe-widget-color-text-secondary)]",
12776
+ "border-[color:var(--deframe-widget-color-border-secondary)]",
12777
+ "outline-none",
12778
+ "transition-[background,color,border-color] duration-150",
12779
+ "hover:opacity-100",
12780
+ "hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_60%,transparent)]",
12781
+ "hover:text-[color:var(--deframe-widget-color-text-primary)]"
12782
+ ].join(" ");
12783
+ const submitButtonClasses = [
12784
+ "flex-1 h-12 rounded-[var(--deframe-widget-size-radius-sm)]",
12785
+ "border-none",
12786
+ "text-[15px]",
12787
+ isSubmitDisabledInternal ? "text-[color:var(--deframe-widget-color-text-primary-disabled)]" : "text-[color:var(--deframe-widget-color-text-primary-dark)]",
12788
+ "outline-none",
12789
+ "transition-[background,color] duration-200"
12790
+ ].join(" ");
12791
+ return /* @__PURE__ */ jsxRuntime.jsxs(
11313
12792
  "div",
11314
12793
  {
11315
- className: tailwindMerge.twMerge(
11316
- "w-full max-w-[620px] relative bg-[var(--deframe-widget-color-bg-primary)] lg:bg-[var(--deframe-widget-color-bg-secondary)] overflow-hidden mx-auto lg:my-[75px] rounded p-6 lg:p-12",
11317
- className
11318
- ),
11319
- "data-test-id": "onchain-withdraw-form-view",
11320
- children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col w-full px-2 py-0.5 rounded gap-1", children: [
11321
- /* @__PURE__ */ jsxRuntime.jsx(
11322
- SecondaryButton,
12794
+ "data-slot": "onchain-withdraw-simple-panel",
12795
+ "data-test-id": "onchain-withdraw-form-simple-view",
12796
+ className: panelBaseClasses,
12797
+ children: [
12798
+ /* @__PURE__ */ jsxRuntime.jsxs(
12799
+ "header",
11323
12800
  {
11324
- onClick: onBack,
11325
- className: "mb-4 !border-0 max-w-[84px]",
11326
- "aria-label": labels.backLabel,
11327
- children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
11328
- /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineArrowBack, { className: "w-5 h-5 text-[color:var(--deframe-widget-color-text-primary)]" }),
11329
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-primary)]", children: labels.backLabel })
11330
- ] })
12801
+ "data-slot": "onchain-withdraw-simple-header",
12802
+ "data-test-id": "onchain-withdraw-form-simple-view-header",
12803
+ className: headerBaseClasses,
12804
+ children: [
12805
+ /* @__PURE__ */ jsxRuntime.jsx(
12806
+ "span",
12807
+ {
12808
+ "data-slot": "onchain-withdraw-simple-title",
12809
+ "data-test-id": "onchain-withdraw-form-simple-view-title",
12810
+ className: titleBaseClasses,
12811
+ children: labels.title
12812
+ }
12813
+ ),
12814
+ onClose && /* @__PURE__ */ jsxRuntime.jsx(
12815
+ CloseButton_default,
12816
+ {
12817
+ onClick: onClose,
12818
+ ariaLabel: "Close withdrawal panel",
12819
+ testId: "onchain-withdraw-form-simple-view-close"
12820
+ }
12821
+ )
12822
+ ]
11331
12823
  }
11332
12824
  ),
11333
- /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h2", children: labels.title }),
11334
- /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: labels.subtitle }),
11335
12825
  /* @__PURE__ */ jsxRuntime.jsx(
11336
12826
  "div",
11337
12827
  {
11338
- className: "my-4 p-[var(--deframe-widget-size-padding-x-md)] w-full bg-[var(--deframe-widget-color-bg-tertiary)] rounded",
11339
- "data-test-id": "onchain-withdraw-token-card",
11340
- children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row gap-[var(--deframe-widget-size-gap-md)] items-center", children: [
11341
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)] flex-1", children: [
11342
- /* @__PURE__ */ jsxRuntime.jsxs(
11343
- "button",
11344
- {
11345
- onClick: onTokenClick,
11346
- disabled: isProcessing,
11347
- className: "h-[56px] border border-[var(--deframe-widget-color-border-secondary)] rounded overflow-hidden transition-colors flex items-center px-[var(--deframe-widget-size-padding-x-sm)] py-[6px] w-full cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed",
11348
- "data-test-id": "onchain-withdraw-token-button",
11349
- "aria-label": labels.tokenPlaceholder,
11350
- children: [
11351
- selectedToken ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)] flex-1", children: [
11352
- /* @__PURE__ */ jsxRuntime.jsx(
11353
- "img",
11354
- {
11355
- src: selectedToken.logoURI || "",
11356
- alt: selectedToken.symbol,
11357
- className: "w-6 h-6 rounded-full object-cover"
11358
- }
11359
- ),
11360
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-left", children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-large", className: "font-semibold", children: selectedToken.symbol }) })
11361
- ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)] flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.tokenPlaceholder }) }),
11362
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center w-[18px] h-[18px]", children: /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineArrowDropDown, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-tertiary)]" }) })
11363
- ]
11364
- }
11365
- ),
11366
- /* @__PURE__ */ jsxRuntime.jsxs(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-tertiary)]", children: [
11367
- labels.balancePrefix,
11368
- ": ",
11369
- formattedBalance
11370
- ] }),
11371
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row items-center gap-[var(--deframe-widget-size-gap-xs)]", children: [
11372
- /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "tracking-wide text-[color:var(--deframe-widget-color-text-tertiary)]", children: labels.chainDirectionLabel }),
11373
- chainCount === 0 || !selectedChain ? /* @__PURE__ */ jsxRuntime.jsxs(
11374
- "button",
11375
- {
11376
- disabled: true,
11377
- className: "ml-6 bg-[var(--deframe-widget-color-bg-tertiary)] rounded-full flex items-center gap-[var(--deframe-widget-size-gap-xs)] px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)] opacity-50 cursor-not-allowed",
11378
- "data-test-id": "onchain-withdraw-chain-disabled",
11379
- children: [
11380
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.chainPlaceholder }),
11381
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center w-[18px] h-[18px]", children: /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineArrowDropDown, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-tertiary)]" }) })
11382
- ]
11383
- }
11384
- ) : chainCount > 1 ? /* @__PURE__ */ jsxRuntime.jsxs(
11385
- "button",
11386
- {
11387
- onClick: onNetworkClick,
11388
- className: "ml-6 bg-[var(--deframe-widget-color-bg-tertiary)] border border-[var(--deframe-widget-color-border-tertiary)] rounded-full flex items-center gap-[var(--deframe-widget-size-gap-xs)] px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)] transition-colors cursor-pointer",
11389
- "data-test-id": "onchain-withdraw-chain-dropdown",
11390
- "aria-label": labels.chainPlaceholder,
11391
- children: [
11392
- /* @__PURE__ */ jsxRuntime.jsx(
11393
- "img",
12828
+ "data-slot": "onchain-withdraw-simple-divider",
12829
+ "data-test-id": "onchain-withdraw-form-simple-view-divider",
12830
+ className: dividerClasses
12831
+ }
12832
+ ),
12833
+ /* @__PURE__ */ jsxRuntime.jsxs(
12834
+ "div",
12835
+ {
12836
+ "data-slot": "onchain-withdraw-simple-body",
12837
+ "data-test-id": "onchain-withdraw-form-simple-view-body",
12838
+ className: bodyBaseClasses,
12839
+ children: [
12840
+ /* @__PURE__ */ jsxRuntime.jsxs(
12841
+ "div",
12842
+ {
12843
+ "data-slot": "onchain-withdraw-simple-input-card",
12844
+ "data-test-id": "onchain-withdraw-form-simple-view-input-card",
12845
+ onMouseEnter: hasToken ? handleHoverStart : void 0,
12846
+ onMouseLeave: hasToken ? handleHoverEnd : void 0,
12847
+ className: inputCardClasses,
12848
+ children: [
12849
+ /* @__PURE__ */ jsxRuntime.jsxs(
12850
+ "div",
12851
+ {
12852
+ "data-slot": "onchain-withdraw-simple-input-top-row",
12853
+ "data-test-id": "onchain-withdraw-form-simple-view-top-row",
12854
+ className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)]",
12855
+ children: [
12856
+ /* @__PURE__ */ jsxRuntime.jsx(
12857
+ EarnTokenSelectorSimpleView,
12858
+ {
12859
+ selectedToken,
12860
+ onTokenClick,
12861
+ onNetworkAndAssetClick: onTokenClick,
12862
+ isLoading: false,
12863
+ selectTokenLabel: "SELECIONE AQUI",
12864
+ chainLabel: (_a = selectedChain == null ? void 0 : selectedChain.name) != null ? _a : "",
12865
+ chainImage: selectedChain == null ? void 0 : selectedChain.iconUrl
12866
+ }
12867
+ ),
12868
+ /* @__PURE__ */ jsxRuntime.jsx(
12869
+ "div",
12870
+ {
12871
+ "data-test-id": "onchain-withdraw-form-simple-view-input-divider",
12872
+ className: "w-px h-10 bg-[var(--deframe-widget-color-border-secondary)] flex-shrink-0"
12873
+ }
12874
+ ),
12875
+ /* @__PURE__ */ jsxRuntime.jsx(
12876
+ EarnAmountInputSimpleView,
12877
+ {
12878
+ value: amount,
12879
+ onChange: (e) => onAmountChange(e.target.value),
12880
+ ariaLabel: "Amount to withdraw",
12881
+ dollarAmountFormatted: formattedAmountUsd
12882
+ }
12883
+ )
12884
+ ]
12885
+ }
12886
+ ),
12887
+ hasToken && formattedBalance && /* @__PURE__ */ jsxRuntime.jsx(
12888
+ "div",
12889
+ {
12890
+ "data-slot": "onchain-withdraw-simple-balance-row",
12891
+ "data-test-id": "onchain-withdraw-form-simple-view-balance-row",
12892
+ className: "mt-[var(--deframe-widget-size-gap-sm)]",
12893
+ children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]", children: /* @__PURE__ */ jsxRuntime.jsxs(
12894
+ "span",
11394
12895
  {
11395
- src: selectedChain.iconUrl,
11396
- alt: selectedChain.name,
11397
- className: "w-3 h-3 rounded-full object-cover"
12896
+ className: hasAmountError ? "text-[color:var(--deframe-widget-color-state-error)]" : "text-[color:var(--deframe-widget-color-text-secondary)]",
12897
+ children: [
12898
+ labels.balancePrefix,
12899
+ ": ",
12900
+ formattedBalance
12901
+ ]
11398
12902
  }
11399
- ),
11400
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-secondary)]", children: selectedChain.name }),
11401
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center w-[18px] h-[18px]", children: /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineArrowDropDown, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-tertiary)]" }) })
11402
- ]
11403
- }
11404
- ) : /* @__PURE__ */ jsxRuntime.jsxs(
11405
- "div",
11406
- {
11407
- className: "ml-6 bg-[var(--deframe-widget-color-bg-tertiary)] border border-[var(--deframe-widget-color-border-tertiary)] rounded-lg flex items-center gap-[var(--deframe-widget-size-gap-xs)] px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)]",
11408
- "data-test-id": "onchain-withdraw-chain-static",
11409
- children: [
11410
- /* @__PURE__ */ jsxRuntime.jsx(
11411
- "img",
12903
+ ) })
12904
+ }
12905
+ ),
12906
+ !hasToken && /* @__PURE__ */ jsxRuntime.jsx(
12907
+ "p",
12908
+ {
12909
+ "data-slot": "onchain-withdraw-simple-empty-hint",
12910
+ "data-test-id": "onchain-withdraw-form-simple-view-empty-hint",
12911
+ className: "mt-[var(--deframe-widget-size-gap-sm)] text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]",
12912
+ children: labels.tokenPlaceholder
12913
+ }
12914
+ ),
12915
+ /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: hasToken && onPercentageClick && cardHovered && /* @__PURE__ */ jsxRuntime.jsx(
12916
+ framerMotion.motion.div,
12917
+ {
12918
+ "data-slot": "onchain-withdraw-simple-chips-row",
12919
+ "data-test-id": "onchain-withdraw-form-simple-view-chips-row",
12920
+ initial: { opacity: 0, height: 0, marginTop: 0 },
12921
+ animate: { opacity: 1, height: "auto", marginTop: "var(--deframe-widget-size-gap-sm)" },
12922
+ exit: { opacity: 0, height: 0, marginTop: 0 },
12923
+ transition: { duration: 0.15, ease: "easeOut" },
12924
+ style: { overflow: "hidden" },
12925
+ onMouseEnter: handleHoverStart,
12926
+ onMouseLeave: handleHoverEnd,
12927
+ children: /* @__PURE__ */ jsxRuntime.jsx(
12928
+ EarnPercentageButtonsSimpleView,
11412
12929
  {
11413
- src: selectedChain.iconUrl,
11414
- alt: selectedChain.name,
11415
- className: "w-3 h-3 rounded-full object-cover"
12930
+ onPercentageClick,
12931
+ maxLabel: maxLabel != null ? maxLabel : "M\xE1x."
11416
12932
  }
12933
+ )
12934
+ }
12935
+ ) }),
12936
+ (walletError || isBelowMinAmount) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-[var(--deframe-widget-size-gap-sm)]", children: /* @__PURE__ */ jsxRuntime.jsx(
12937
+ EarnInlineNotificationSimpleView,
12938
+ {
12939
+ variant: "error",
12940
+ message: walletError != null ? walletError : labels.minAmountWarning
12941
+ }
12942
+ ) })
12943
+ ]
12944
+ }
12945
+ ),
12946
+ /* @__PURE__ */ jsxRuntime.jsxs(
12947
+ "div",
12948
+ {
12949
+ "data-slot": "onchain-withdraw-simple-address-card",
12950
+ "data-test-id": "onchain-withdraw-form-simple-view-address-card",
12951
+ className: addressCardClasses,
12952
+ children: [
12953
+ /* @__PURE__ */ jsxRuntime.jsx(
12954
+ "p",
12955
+ {
12956
+ "data-slot": "onchain-withdraw-simple-address-label",
12957
+ "data-test-id": "onchain-withdraw-form-simple-view-address-label",
12958
+ className: "mb-[var(--deframe-widget-size-gap-sm)] text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]",
12959
+ children: labels.destinationAddressLabel
12960
+ }
12961
+ ),
12962
+ /* @__PURE__ */ jsxRuntime.jsx(
12963
+ "input",
12964
+ {
12965
+ "data-slot": "onchain-withdraw-simple-address-input",
12966
+ "data-test-id": "onchain-withdraw-form-simple-view-address-input",
12967
+ type: "text",
12968
+ value: destinationAddress,
12969
+ onChange: (e) => onDestinationAddressChange(e.target.value),
12970
+ placeholder: labels.destinationAddressPlaceholder,
12971
+ disabled: isProcessing,
12972
+ "aria-label": labels.destinationAddressLabel,
12973
+ className: tailwindMerge.twMerge(
12974
+ "w-full bg-transparent outline-none",
12975
+ "text-[13px] [font-weight:var(--deframe-widget-font-weight-regular)]",
12976
+ "font-[var(--deframe-widget-font-family)]",
12977
+ "placeholder:text-[color:var(--deframe-widget-color-text-tertiary)]",
12978
+ "text-[color:var(--deframe-widget-color-text-primary)]",
12979
+ '[font-feature-settings:"tnum"]',
12980
+ "disabled:opacity-50 disabled:cursor-not-allowed"
11417
12981
  ),
11418
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-secondary)]", children: selectedChain.name })
11419
- ]
11420
- }
11421
- )
11422
- ] })
11423
- ] }),
11424
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col flex-1 items-end justify-center gap-[var(--deframe-widget-size-gap-xs)] relative", children: [
11425
- /* @__PURE__ */ jsxRuntime.jsx(
11426
- Input2,
11427
- {
11428
- id: "withdraw-amount-input",
11429
- placeholder: "0.00",
11430
- inputMode: "decimal",
11431
- autoComplete: "off",
11432
- "aria-label": "Amount to withdraw",
11433
- min: "0",
11434
- step: "any",
11435
- type: "number",
11436
- value: amount,
11437
- onChange: (e) => onAmountChange(e.target.value),
11438
- onWheel: (event) => {
11439
- event.currentTarget.blur();
11440
- },
11441
- disabled: isAmountInputDisabled,
11442
- className: "text-h2-mobile font-extrabold bg-transparent outline-none text-right w-full min-w-[120px] placeholder:text-[color:var(--deframe-widget-color-placeholder-primary)] text-[color:var(--deframe-widget-color-text-primary)] [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none disabled:opacity-50 disabled:cursor-not-allowed",
11443
- "data-test-id": "onchain-withdraw-amount-input"
11444
- }
11445
- ),
11446
- /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-tertiary)]", children: formattedAmountUsd }),
11447
- showMaxButton && /* @__PURE__ */ jsxRuntime.jsx(
11448
- "button",
11449
- {
11450
- onClick: onMaxClick,
11451
- className: "absolute top-0 right-0 text-[length:var(--deframe-widget-font-size-xs)] text-[color:var(--deframe-widget-color-brand-primary)] cursor-pointer -translate-y-6",
11452
- "data-test-id": "onchain-withdraw-max-button",
11453
- "aria-label": "Max",
11454
- children: "Max"
11455
- }
11456
- )
11457
- ] })
11458
- ] })
11459
- }
11460
- ),
11461
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", "data-test-id": "onchain-withdraw-destination-network", children: [
11462
- /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "mb-2", children: labels.destinationNetworkLabel }),
11463
- /* @__PURE__ */ jsxRuntime.jsx(
11464
- "div",
11465
- {
11466
- className: tailwindMerge.twMerge(
11467
- "flex items-center gap-2 border border-[var(--deframe-widget-color-border-secondary)] rounded p-4 w-full",
11468
- !destinationNetwork ? "opacity-50 cursor-not-allowed" : "bg-[var(--deframe-widget-color-bg-tertiary)]"
12982
+ spellCheck: false,
12983
+ autoComplete: "off"
12984
+ }
12985
+ ),
12986
+ transferError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-[var(--deframe-widget-size-gap-sm)]", children: /* @__PURE__ */ jsxRuntime.jsx(EarnInlineNotificationSimpleView, { variant: "error", message: transferError }) })
12987
+ ]
12988
+ }
11469
12989
  ),
11470
- children: destinationNetwork ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
11471
- /* @__PURE__ */ jsxRuntime.jsx(
11472
- "img",
11473
- {
11474
- src: destinationNetwork.iconUrl,
11475
- alt: destinationNetwork.name,
11476
- className: "w-5 h-5 rounded-full object-cover"
11477
- }
11478
- ),
11479
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: destinationNetwork.name }),
11480
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto text-[length:var(--deframe-widget-font-size-xs)] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.destinationNetworkSameHint })
11481
- ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.destinationNetworkEmpty })
11482
- }
11483
- )
11484
- ] }),
11485
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", "data-test-id": "onchain-withdraw-destination-address", children: /* @__PURE__ */ jsxRuntime.jsx(
11486
- Input2,
11487
- {
11488
- type: "text",
11489
- label: labels.destinationAddressLabel,
11490
- placeholder: labels.destinationAddressPlaceholder,
11491
- value: destinationAddress,
11492
- onChange: (e) => onDestinationAddressChange(e.target.value),
11493
- disabled: isProcessing,
11494
- className: "w-full px-4 py-3 bg-[var(--deframe-widget-color-bg-secondary)] border border-[var(--deframe-widget-color-border-secondary)] rounded outline-none disabled:opacity-50 disabled:cursor-not-allowed"
12990
+ /* @__PURE__ */ jsxRuntime.jsx(
12991
+ EarnInlineNotificationSimpleView,
12992
+ {
12993
+ variant: "warning",
12994
+ message: labels.infoBanner
12995
+ }
12996
+ )
12997
+ ]
11495
12998
  }
11496
- ) }),
11497
- /* @__PURE__ */ jsxRuntime.jsx(BannerNotification, { message: labels.infoBanner, variant: "info", className: "gap-3" }),
11498
- isBelowMinAmount && /* @__PURE__ */ jsxRuntime.jsx(BannerNotification, { message: labels.minAmountWarning, variant: "warning", className: "gap-3" }),
11499
- txDetails !== null && /* @__PURE__ */ jsxRuntime.jsxs(
11500
- "div",
12999
+ ),
13000
+ /* @__PURE__ */ jsxRuntime.jsxs(
13001
+ "footer",
11501
13002
  {
11502
- className: "my-4 p-6 w-full bg-[var(--deframe-widget-color-bg-tertiary)] rounded",
11503
- "data-test-id": "onchain-withdraw-tx-details",
13003
+ "data-slot": "onchain-withdraw-simple-footer",
13004
+ "data-test-id": "onchain-withdraw-form-simple-view-footer",
13005
+ className: footerBaseClasses,
11504
13006
  children: [
11505
- /* @__PURE__ */ jsxRuntime.jsxs(
11506
- "button",
13007
+ onBack && /* @__PURE__ */ jsxRuntime.jsx(
13008
+ SecondaryButton,
11507
13009
  {
11508
- onClick: () => setShowTxDetails((v) => !v),
11509
- className: "flex justify-between items-center w-full text-left cursor-pointer",
11510
- "aria-label": labels.txDetailsTitle,
11511
- "data-test-id": "onchain-withdraw-tx-details-toggle",
11512
- children: [
11513
- /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-large", className: "font-semibold", children: labels.txDetailsTitle }),
11514
- /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineExpandMore, { className: tailwindMerge.twMerge("transition-transform", showTxDetails && "rotate-180") })
11515
- ]
13010
+ type: "button",
13011
+ className: cancelButtonClasses,
13012
+ onClick: onBack,
13013
+ "aria-label": "Cancel withdrawal",
13014
+ "data-test-id": "onchain-withdraw-form-simple-view-cancel",
13015
+ children: labels.backLabel
11516
13016
  }
11517
13017
  ),
11518
- showTxDetails && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 space-y-3", children: [
11519
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [
11520
- /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.txDetailsAmountLabel }),
11521
- /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "font-semibold", children: txDetails.formattedAmount })
11522
- ] }),
11523
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [
11524
- /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.txDetailsFeeLabel }),
11525
- /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "font-semibold", children: txDetails.formattedFee })
11526
- ] }),
11527
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-[var(--deframe-widget-color-border-secondary)] pt-3 flex justify-between items-center", children: [
11528
- /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.txDetailsReceiveLabel }),
11529
- /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-large", className: "font-bold", children: txDetails.formattedReceive })
11530
- ] })
11531
- ] })
13018
+ /* @__PURE__ */ jsxRuntime.jsx(
13019
+ PrimaryButton,
13020
+ {
13021
+ type: "button",
13022
+ className: submitButtonClasses,
13023
+ disabled: isSubmitDisabledInternal,
13024
+ onClick: onSubmit,
13025
+ "aria-label": submitLabel,
13026
+ "data-test-id": "onchain-withdraw-form-simple-view-submit",
13027
+ children: submitLabel
13028
+ }
13029
+ )
11532
13030
  ]
11533
13031
  }
11534
- ),
11535
- walletError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(BannerNotification, { message: walletError, variant: "error" }) }),
11536
- transferError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(BannerNotification, { message: transferError, variant: "error", className: "gap-3" }) }),
11537
- showWarning && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(BannerNotification, { message: warningLabel, variant: "warning" }) }),
11538
- /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { disabled: isSubmitDisabled, onClick: onSubmit, "data-test-id": "onchain-withdraw-submit", children: isProcessing ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
11539
- submitLabel,
11540
- " ",
11541
- /* @__PURE__ */ jsxRuntime.jsx(LoadingDots, {})
11542
- ] }) : submitLabel })
11543
- ] })
13032
+ )
13033
+ ]
11544
13034
  }
11545
13035
  );
11546
- }
13036
+ };
11547
13037
  function OnchainWithdrawChainSelectorView({
11548
13038
  actionSheetId,
11549
13039
  isOpen,
@@ -11928,6 +13418,297 @@ function OnchainWithdrawFailedView({
11928
13418
  }
11929
13419
  );
11930
13420
  }
13421
+ var OnchainWithdrawProcessingSimpleView = ({
13422
+ onClose: _onClose
13423
+ }) => {
13424
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "onchain-withdraw-processing-simple-view", children: /* @__PURE__ */ jsxRuntime.jsx(
13425
+ EarnFeedbackOverlaySimpleView,
13426
+ {
13427
+ variant: "loading",
13428
+ title: "PROCESSANDO SAQUE...",
13429
+ subtitle: "Aguarde enquanto sua transa\xE7\xE3o \xE9 confirmada."
13430
+ }
13431
+ ) });
13432
+ };
13433
+ function WithdrawSignatureWarningIcon() {
13434
+ return /* @__PURE__ */ jsxRuntime.jsx(
13435
+ "div",
13436
+ {
13437
+ className: "w-20 h-20 rounded-full flex items-center justify-center",
13438
+ style: { background: "linear-gradient(180deg, #F6A700 0%, #F59E0B 100%)" },
13439
+ "data-test-id": "withdraw-signature-warning-icon",
13440
+ "data-slot": "withdraw-signature-warning-icon",
13441
+ children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-8 h-8", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(
13442
+ "path",
13443
+ {
13444
+ d: "M12 9V13M12 17H12.01M10.29 3.86L1.82 18A2 2 0 003.54 21H20.46A2 2 0 0022.18 18L13.71 3.86A2 2 0 0010.29 3.86Z",
13445
+ stroke: "#121212",
13446
+ strokeWidth: "2",
13447
+ strokeLinecap: "round",
13448
+ strokeLinejoin: "round"
13449
+ }
13450
+ ) })
13451
+ }
13452
+ );
13453
+ }
13454
+ function OnchainWithdrawSignatureWarningView({
13455
+ tokenSymbol,
13456
+ tokenLogoURI,
13457
+ formattedAmount,
13458
+ chainName,
13459
+ chainIconUrl,
13460
+ destinationAddress,
13461
+ blockchainCost,
13462
+ onCancel,
13463
+ onTryAgain,
13464
+ className
13465
+ }) {
13466
+ const [showDetails, setShowDetails] = React6.useState(true);
13467
+ return /* @__PURE__ */ jsxRuntime.jsxs(
13468
+ "div",
13469
+ {
13470
+ className: tailwindMerge.twMerge(
13471
+ "w-full max-w-[620px] relative bg-[var(--deframe-widget-color-bg-primary)] lg:bg-[var(--deframe-widget-color-bg-secondary)] overflow-hidden mx-auto lg:my-[75px] rounded",
13472
+ className
13473
+ ),
13474
+ "data-test-id": "onchain-withdraw-signature-warning-view",
13475
+ children: [
13476
+ /* @__PURE__ */ jsxRuntime.jsx(
13477
+ "button",
13478
+ {
13479
+ onClick: onCancel,
13480
+ className: "absolute top-4 right-4 flex items-center justify-center w-8 h-8 text-[color:var(--deframe-widget-color-text-secondary)] hover:text-[color:var(--deframe-widget-color-text-primary)] transition cursor-pointer",
13481
+ "aria-label": "Fechar",
13482
+ "data-test-id": "onchain-withdraw-signature-warning-close",
13483
+ children: /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineClose, { className: "w-6 h-6" })
13484
+ }
13485
+ ),
13486
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-6 lg:p-12", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col w-full items-center", children: [
13487
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-4", children: [
13488
+ /* @__PURE__ */ jsxRuntime.jsx(WithdrawSignatureWarningIcon, {}),
13489
+ /* @__PURE__ */ jsxRuntime.jsx(
13490
+ "h2",
13491
+ {
13492
+ className: "text-[28px] [font-weight:var(--deframe-widget-font-weight-extrabold)] text-[color:var(--deframe-widget-color-text-primary)] leading-tight",
13493
+ "data-test-id": "onchain-withdraw-signature-warning-title",
13494
+ children: "Saque n\xE3o assinado"
13495
+ }
13496
+ ),
13497
+ /* @__PURE__ */ jsxRuntime.jsx(
13498
+ "p",
13499
+ {
13500
+ className: "text-[length:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-secondary)] text-center",
13501
+ "data-test-id": "onchain-withdraw-signature-warning-subtitle",
13502
+ children: "A assinatura da transa\xE7\xE3o foi cancelada. Nenhum valor foi enviado."
13503
+ }
13504
+ )
13505
+ ] }),
13506
+ /* @__PURE__ */ jsxRuntime.jsx(
13507
+ "div",
13508
+ {
13509
+ className: "w-full mt-8 p-5 bg-[var(--deframe-widget-color-bg-tertiary)] rounded",
13510
+ "data-test-id": "onchain-withdraw-signature-warning-summary",
13511
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-4", children: [
13512
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative shrink-0", "data-test-id": "onchain-withdraw-signature-warning-token-icon", children: [
13513
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[32px] h-[32px] rounded-full bg-[var(--deframe-widget-color-bg-tertiary)] flex items-center justify-center overflow-hidden", children: tokenLogoURI ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: tokenLogoURI, alt: tokenSymbol, className: "w-[32px] h-[32px] object-cover" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] [font-weight:var(--deframe-widget-font-weight-bold)]", children: tokenSymbol.slice(0, 2).toUpperCase() }) }),
13514
+ chainIconUrl && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -bottom-1 -right-1", children: /* @__PURE__ */ jsxRuntime.jsx(
13515
+ "img",
13516
+ {
13517
+ src: chainIconUrl,
13518
+ alt: chainName,
13519
+ className: "w-[16px] h-[16px] rounded-full object-cover",
13520
+ "data-test-id": "onchain-withdraw-signature-warning-chain-icon"
13521
+ }
13522
+ ) })
13523
+ ] }),
13524
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col flex-1 min-w-0", children: [
13525
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[4px]", children: [
13526
+ /* @__PURE__ */ jsxRuntime.jsx(
13527
+ "span",
13528
+ {
13529
+ className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]",
13530
+ "data-test-id": "onchain-withdraw-signature-warning-sending-label",
13531
+ children: "Voc\xEA est\xE1 enviando"
13532
+ }
13533
+ ),
13534
+ /* @__PURE__ */ jsxRuntime.jsxs(
13535
+ "span",
13536
+ {
13537
+ className: "text-[20px] [font-weight:var(--deframe-widget-font-weight-semibold)] leading-tight",
13538
+ "data-test-id": "onchain-withdraw-signature-warning-amount",
13539
+ children: [
13540
+ formattedAmount,
13541
+ " ",
13542
+ tokenSymbol
13543
+ ]
13544
+ }
13545
+ )
13546
+ ] }),
13547
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[4px] mt-4", children: [
13548
+ /* @__PURE__ */ jsxRuntime.jsx(
13549
+ "span",
13550
+ {
13551
+ className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]",
13552
+ "data-test-id": "onchain-withdraw-signature-warning-destination-label",
13553
+ children: "Para o endere\xE7o"
13554
+ }
13555
+ ),
13556
+ /* @__PURE__ */ jsxRuntime.jsx(
13557
+ "span",
13558
+ {
13559
+ className: "text-[length:var(--deframe-widget-font-size-sm)] [font-weight:var(--deframe-widget-font-weight-semibold)] break-all leading-snug",
13560
+ "data-test-id": "onchain-withdraw-signature-warning-destination-address",
13561
+ children: destinationAddress
13562
+ }
13563
+ )
13564
+ ] })
13565
+ ] })
13566
+ ] })
13567
+ }
13568
+ ),
13569
+ /* @__PURE__ */ jsxRuntime.jsxs(
13570
+ "div",
13571
+ {
13572
+ className: "w-full mt-4 bg-[var(--deframe-widget-color-bg-tertiary)] rounded",
13573
+ "data-test-id": "onchain-withdraw-signature-warning-details",
13574
+ children: [
13575
+ /* @__PURE__ */ jsxRuntime.jsxs(
13576
+ "button",
13577
+ {
13578
+ onClick: () => setShowDetails(!showDetails),
13579
+ className: "flex justify-between items-center w-full text-left cursor-pointer p-4",
13580
+ "aria-label": "Detalhes da transa\xE7\xE3o",
13581
+ "data-test-id": "onchain-withdraw-signature-warning-details-toggle",
13582
+ children: [
13583
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] [font-weight:var(--deframe-widget-font-weight-semibold)]", children: "Detalhes da transa\xE7\xE3o" }),
13584
+ /* @__PURE__ */ jsxRuntime.jsx(
13585
+ md.MdOutlineExpandMore,
13586
+ {
13587
+ className: tailwindMerge.twMerge(
13588
+ "transition-transform text-[color:var(--deframe-widget-color-text-secondary)]",
13589
+ showDetails && "rotate-180"
13590
+ )
13591
+ }
13592
+ )
13593
+ ]
13594
+ }
13595
+ ),
13596
+ showDetails && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 pb-4", "data-test-id": "onchain-withdraw-signature-warning-details-content", children: [
13597
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-2 border-b border-[color:var(--deframe-widget-color-border-secondary)]", children: [
13598
+ /* @__PURE__ */ jsxRuntime.jsx(
13599
+ "span",
13600
+ {
13601
+ className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]",
13602
+ "data-test-id": "onchain-withdraw-signature-warning-withdraw-amount-label",
13603
+ children: "Valor de retirada"
13604
+ }
13605
+ ),
13606
+ /* @__PURE__ */ jsxRuntime.jsxs(
13607
+ "span",
13608
+ {
13609
+ className: "text-[12px] [font-weight:var(--deframe-widget-font-weight-semibold)]",
13610
+ "data-test-id": "onchain-withdraw-signature-warning-withdraw-amount-value",
13611
+ children: [
13612
+ formattedAmount,
13613
+ " ",
13614
+ tokenSymbol
13615
+ ]
13616
+ }
13617
+ )
13618
+ ] }),
13619
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-2 border-b border-[color:var(--deframe-widget-color-border-secondary)]", children: [
13620
+ /* @__PURE__ */ jsxRuntime.jsx(
13621
+ "span",
13622
+ {
13623
+ className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]",
13624
+ "data-test-id": "onchain-withdraw-signature-warning-blockchain-cost-label",
13625
+ children: "Custo da blockchain"
13626
+ }
13627
+ ),
13628
+ /* @__PURE__ */ jsxRuntime.jsx(
13629
+ "span",
13630
+ {
13631
+ className: "text-[12px] [font-weight:var(--deframe-widget-font-weight-semibold)]",
13632
+ "data-test-id": "onchain-withdraw-signature-warning-blockchain-cost-value",
13633
+ children: blockchainCost
13634
+ }
13635
+ )
13636
+ ] }),
13637
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-2", children: [
13638
+ /* @__PURE__ */ jsxRuntime.jsx(
13639
+ "span",
13640
+ {
13641
+ className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]",
13642
+ "data-test-id": "onchain-withdraw-signature-warning-receive-label",
13643
+ children: "Voc\xEA receber\xE1"
13644
+ }
13645
+ ),
13646
+ /* @__PURE__ */ jsxRuntime.jsxs(
13647
+ "span",
13648
+ {
13649
+ className: "text-[12px] [font-weight:var(--deframe-widget-font-weight-semibold)]",
13650
+ "data-test-id": "onchain-withdraw-signature-warning-receive-value",
13651
+ children: [
13652
+ formattedAmount,
13653
+ " ",
13654
+ tokenSymbol
13655
+ ]
13656
+ }
13657
+ )
13658
+ ] })
13659
+ ] })
13660
+ ]
13661
+ }
13662
+ ),
13663
+ /* @__PURE__ */ jsxRuntime.jsxs(
13664
+ "div",
13665
+ {
13666
+ className: "w-full mt-8 flex gap-3",
13667
+ "data-test-id": "onchain-withdraw-signature-warning-actions",
13668
+ children: [
13669
+ /* @__PURE__ */ jsxRuntime.jsx(
13670
+ SecondaryButton,
13671
+ {
13672
+ className: "flex-1",
13673
+ onClick: onCancel,
13674
+ "data-test-id": "onchain-withdraw-signature-warning-cancel",
13675
+ children: "Cancelar"
13676
+ }
13677
+ ),
13678
+ /* @__PURE__ */ jsxRuntime.jsx(
13679
+ PrimaryButton,
13680
+ {
13681
+ className: "flex-1",
13682
+ onClick: onTryAgain,
13683
+ "data-test-id": "onchain-withdraw-signature-warning-retry",
13684
+ children: "Tente novamente"
13685
+ }
13686
+ )
13687
+ ]
13688
+ }
13689
+ )
13690
+ ] }) })
13691
+ ]
13692
+ }
13693
+ );
13694
+ }
13695
+ var OnchainWithdrawSignatureWarningSimpleView = ({
13696
+ onCancel
13697
+ }) => {
13698
+ React6__namespace.useEffect(() => {
13699
+ if (!onCancel) return;
13700
+ const timer = setTimeout(onCancel, 5e3);
13701
+ return () => clearTimeout(timer);
13702
+ }, [onCancel]);
13703
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "onchain-withdraw-signature-warning-simple-view", children: /* @__PURE__ */ jsxRuntime.jsx(
13704
+ EarnFeedbackOverlaySimpleView,
13705
+ {
13706
+ variant: "warning",
13707
+ title: "Saque n\xE3o assinado",
13708
+ subtitle: "A assinatura da transa\xE7\xE3o foi cancelada."
13709
+ }
13710
+ ) });
13711
+ };
11931
13712
  var DashboardCard = ({ children, className }) => {
11932
13713
  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "dashboard-card", className: tailwindMerge.twMerge("bg-[var(--deframe-widget-color-bg-subtle)] rounded", className), children });
11933
13714
  };
@@ -12429,7 +14210,7 @@ function HistoryButton2({ onClick }) {
12429
14210
  }
12430
14211
  );
12431
14212
  }
12432
- 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)]";
14213
+ var GRID_COLS3 = "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)]";
12433
14214
  function IconCircle3({ item, size = 36, className }) {
12434
14215
  const [imgError, setImgError] = React6__namespace.default.useState(false);
12435
14216
  if (item.iconUrl && !imgError) {
@@ -12529,7 +14310,7 @@ function AssetListSkeletonRow({ index }) {
12529
14310
  {
12530
14311
  "data-test-id": "asset-list-skeleton-row",
12531
14312
  className: tailwindMerge.twMerge(
12532
- GRID_COLS,
14313
+ GRID_COLS3,
12533
14314
  "items-center",
12534
14315
  "px-[var(--deframe-widget-size-padding-x-md)] py-[11px]",
12535
14316
  "border-t border-[color:var(--deframe-widget-color-border-secondary)]"
@@ -12575,7 +14356,7 @@ function AssetListSkeletonContent() {
12575
14356
  "div",
12576
14357
  {
12577
14358
  className: tailwindMerge.twMerge(
12578
- GRID_COLS,
14359
+ GRID_COLS3,
12579
14360
  "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-sm)]",
12580
14361
  "border-t border-[color:var(--deframe-widget-color-border-secondary)]"
12581
14362
  ),
@@ -12684,7 +14465,7 @@ var DashboardTokensViewSimple = ({
12684
14465
  {
12685
14466
  "data-test-id": "asset-list-columns",
12686
14467
  className: tailwindMerge.twMerge(
12687
- GRID_COLS,
14468
+ GRID_COLS3,
12688
14469
  "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-sm)]",
12689
14470
  "border-t border-[color:var(--deframe-widget-color-border-secondary)]"
12690
14471
  ),
@@ -12710,7 +14491,7 @@ var DashboardTokensViewSimple = ({
12710
14491
  "data-test-id": "asset-list-item",
12711
14492
  onClick: handleItemClick,
12712
14493
  className: tailwindMerge.twMerge(
12713
- GRID_COLS,
14494
+ GRID_COLS3,
12714
14495
  "items-center",
12715
14496
  "px-[var(--deframe-widget-size-padding-x-md)] py-[11px]",
12716
14497
  "border-t border-[color:var(--deframe-widget-color-border-secondary)]",
@@ -13264,6 +15045,7 @@ exports.EarnDepositSuccessView = EarnDepositSuccessView;
13264
15045
  exports.EarnDepositWarningSimpleView = EarnDepositWarningSimpleView;
13265
15046
  exports.EarnDepositWarningView = EarnDepositWarningView;
13266
15047
  exports.EarnDesktopView = EarnDesktopView;
15048
+ exports.EarnDesktopViewSimple = EarnDesktopViewSimple;
13267
15049
  exports.EarnExploreGridView = EarnExploreGridView;
13268
15050
  exports.EarnFlowSkeletonSimple = EarnFlowSkeletonSimple;
13269
15051
  exports.EarnInvestedSectionView = EarnInvestedSectionView;
@@ -13316,11 +15098,17 @@ exports.LoadingDots = LoadingDots;
13316
15098
  exports.LowRiskBadge = LowRiskBadge;
13317
15099
  exports.MediumRiskBadge = MediumRiskBadge;
13318
15100
  exports.Navbar = Navbar;
15101
+ exports.OnchainDepositFormSimpleView = OnchainDepositFormSimpleView;
13319
15102
  exports.OnchainDepositFormView = OnchainDepositFormView;
15103
+ exports.OnchainDepositSuccessSimpleView = OnchainDepositSuccessSimpleView;
13320
15104
  exports.OnchainDepositSuccessView = OnchainDepositSuccessView;
13321
15105
  exports.OnchainWithdrawChainSelectorView = OnchainWithdrawChainSelectorView;
13322
15106
  exports.OnchainWithdrawFailedView = OnchainWithdrawFailedView;
15107
+ exports.OnchainWithdrawFormSimpleView = OnchainWithdrawFormSimpleView;
13323
15108
  exports.OnchainWithdrawFormView = OnchainWithdrawFormView;
15109
+ exports.OnchainWithdrawProcessingSimpleView = OnchainWithdrawProcessingSimpleView;
15110
+ exports.OnchainWithdrawSignatureWarningSimpleView = OnchainWithdrawSignatureWarningSimpleView;
15111
+ exports.OnchainWithdrawSignatureWarningView = OnchainWithdrawSignatureWarningView;
13324
15112
  exports.OnchainWithdrawSuccessView = OnchainWithdrawSuccessView;
13325
15113
  exports.PercentageButton = PercentageButton;
13326
15114
  exports.PrimaryButton = PrimaryButton;