@deframe-sdk/components 0.1.25 → 0.1.27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -1562,7 +1562,7 @@ var Skeleton = (_a) => {
1562
1562
  width = "100%",
1563
1563
  height = "1rem",
1564
1564
  variant = "text",
1565
- shimmer = true,
1565
+ shimmer: shimmer2 = true,
1566
1566
  className,
1567
1567
  style
1568
1568
  } = _b, props = __objRest(_b, [
@@ -1588,7 +1588,7 @@ var Skeleton = (_a) => {
1588
1588
  background: defaultGradient
1589
1589
  }, style)
1590
1590
  }, props), {
1591
- children: shimmer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 animate-shimmer bg-gradient-to-r from-transparent via-[color-mix(in srgb, var(--deframe-widget-color-bg-tertiary) 92%, transparent)] to-transparent" })
1591
+ children: shimmer2 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 animate-shimmer bg-gradient-to-r from-transparent via-[color-mix(in srgb, var(--deframe-widget-color-bg-tertiary) 92%, transparent)] to-transparent" })
1592
1592
  })
1593
1593
  );
1594
1594
  };
@@ -2957,10 +2957,10 @@ var StrategyDetailsView = ({
2957
2957
  notFoundMessage
2958
2958
  }) => {
2959
2959
  if (error) {
2960
- return /* @__PURE__ */ jsxRuntime.jsx(BackgroundContainer, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-text-secondary dark:text-text-secondary-dark p-md", children: error }) });
2960
+ return /* @__PURE__ */ jsxRuntime.jsx(BackgroundContainer, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[color:var(--deframe-widget-color-text-secondary)] dark:text-[color:var(--deframe-widget-color-text-secondary-dark)] p-md", children: error }) });
2961
2961
  }
2962
2962
  if (notFoundMessage) {
2963
- return /* @__PURE__ */ jsxRuntime.jsx(BackgroundContainer, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-text-secondary dark:text-text-secondary-dark p-md", children: notFoundMessage }) });
2963
+ return /* @__PURE__ */ jsxRuntime.jsx(BackgroundContainer, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[color:var(--deframe-widget-color-text-secondary)] dark:text-[color:var(--deframe-widget-color-text-secondary-dark)] p-md", children: notFoundMessage }) });
2964
2964
  }
2965
2965
  return /* @__PURE__ */ jsxRuntime.jsxs(BackgroundContainer, { children: [
2966
2966
  /* @__PURE__ */ jsxRuntime.jsx(DetailsHeader, { title: headerTitle, onBack, backAriaLabel }),
@@ -4481,13 +4481,13 @@ var SwapFromCardView = ({
4481
4481
  TextBody,
4482
4482
  {
4483
4483
  variant: "text-small",
4484
- className: "text-text-tertiary dark:text-text-tertiary-dark",
4484
+ className: "text-[color:var(--deframe-widget-color-text-tertiary)] dark:text-[color:var(--deframe-widget-color-text-tertiary-dark)]",
4485
4485
  children: onBalanceClick ? /* @__PURE__ */ jsxRuntime.jsxs(
4486
4486
  "button",
4487
4487
  {
4488
4488
  type: "button",
4489
4489
  onClick: onBalanceClick,
4490
- className: "cursor-pointer hover:text-text-secondary dark:hover:text-text-secondary-dark transition-colors",
4490
+ className: "cursor-pointer hover:text-[color:var(--deframe-widget-color-text-secondary)] dark:hover:text-[color:var(--deframe-widget-color-text-secondary-dark)] transition-colors",
4491
4491
  "data-testid": "swap-from-balance",
4492
4492
  children: [
4493
4493
  labels.balanceLabel,
@@ -4536,7 +4536,7 @@ var SwapFromCardView = ({
4536
4536
  {
4537
4537
  as: "span",
4538
4538
  variant: "text-small",
4539
- className: amountHasError ? "text-state-error dark:text-state-error" : "text-text-tertiary dark:text-text-tertiary-dark",
4539
+ className: amountHasError ? "text-[color:var(--deframe-widget-color-state-error)] dark:text-[color:var(--deframe-widget-color-state-error)]" : "text-[color:var(--deframe-widget-color-text-tertiary)] dark:text-[color:var(--deframe-widget-color-text-tertiary-dark)]",
4540
4540
  children: isAmountUsdLoading ? /* @__PURE__ */ jsxRuntime.jsx(LoadingDots, {}) : amountUsdFormatted
4541
4541
  }
4542
4542
  )
@@ -4586,7 +4586,7 @@ var SwapToCardView = ({
4586
4586
  TextBody,
4587
4587
  {
4588
4588
  variant: "text-small",
4589
- className: "text-text-tertiary dark:text-text-tertiary-dark",
4589
+ className: "text-[color:var(--deframe-widget-color-text-tertiary)] dark:text-[color:var(--deframe-widget-color-text-tertiary-dark)]",
4590
4590
  children: /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-testid": "swap-to-balance", children: [
4591
4591
  labels.balanceLabel,
4592
4592
  ": ",
@@ -4623,7 +4623,7 @@ var SwapToCardView = ({
4623
4623
  {
4624
4624
  as: "span",
4625
4625
  variant: "text-small",
4626
- className: "text-text-tertiary dark:text-text-tertiary-dark",
4626
+ className: "text-[color:var(--deframe-widget-color-text-tertiary)] dark:text-[color:var(--deframe-widget-color-text-tertiary-dark)]",
4627
4627
  children: isOutputUsdLoading ? /* @__PURE__ */ jsxRuntime.jsx(LoadingDots, {}) : outputUsdFormatted
4628
4628
  }
4629
4629
  )
@@ -4899,7 +4899,7 @@ var SwapFormView = ({
4899
4899
  {
4900
4900
  "data-testid": "swap-form-view",
4901
4901
  className: "flex-1 min-h-0 overflow-y-auto swap-flow-content pr-sm",
4902
- children: /* @__PURE__ */ jsxRuntime.jsx("form", { ref: formRef, onSubmit, "data-testid": "swap-flow-form", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-md text-text-secondary dark:text-text-secondary-dark", children: [
4902
+ children: /* @__PURE__ */ jsxRuntime.jsx("form", { ref: formRef, onSubmit, "data-testid": "swap-flow-form", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-md text-[color:var(--deframe-widget-color-text-secondary)] dark:text-[color:var(--deframe-widget-color-text-secondary-dark)]", children: [
4903
4903
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-md", children: [
4904
4904
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-sm", children: [
4905
4905
  /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h5", className: "!text-[21px]", children: /* @__PURE__ */ jsxRuntime.jsx("span", { "data-testid": "swap-flow-title", children: labels.title }) }),
@@ -4911,7 +4911,7 @@ var SwapFormView = ({
4911
4911
  "data-testid": "swap-history-button",
4912
4912
  type: "button",
4913
4913
  onClick: onHistoryClick,
4914
- className: "flex items-center justify-center w-12 h-12 transition-colors rounded-full cursor-pointer text-text-secondary dark:text-text-secondary-dark hover:text-brand-primary",
4914
+ className: "flex items-center justify-center w-12 h-12 transition-colors rounded-full cursor-pointer text-[color:var(--deframe-widget-color-text-secondary)] dark:text-[color:var(--deframe-widget-color-text-secondary-dark)] hover:text-brand-primary",
4915
4915
  "aria-label": labels.historyAriaLabel,
4916
4916
  children: /* @__PURE__ */ jsxRuntime.jsx(md.MdHistory, { className: "w-6 h-6" })
4917
4917
  }
@@ -4925,7 +4925,7 @@ var SwapFormView = ({
4925
4925
  "data-testid": "swap-switch-tokens-button",
4926
4926
  type: "button",
4927
4927
  onClick: onSwitchTokens,
4928
- className: "w-10 h-10 rounded-full bg-brand-secondary shadow-md flex items-center justify-center text-text-primary hover:shadow-lg transition-shadow focus:outline-none focus:ring-2 focus:ring-brand-secondary cursor-pointer",
4928
+ className: "w-10 h-10 rounded-full bg-brand-secondary shadow-md flex items-center justify-center text-[color:var(--deframe-widget-color-text-primary)] hover:shadow-lg transition-shadow focus:outline-none focus:ring-2 focus:ring-brand-secondary cursor-pointer",
4929
4929
  "aria-label": switchTokensAriaLabel,
4930
4930
  children: /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineSwapVert, { className: "w-5 h-5" })
4931
4931
  }
@@ -4941,7 +4941,7 @@ var SwapFormView = ({
4941
4941
  "div",
4942
4942
  {
4943
4943
  "data-testid": "swap-flow-footer",
4944
- className: "border-t p-md border-border-default dark:border-border-default-dark bg-bg-primary dark:bg-bg-primary-dark",
4944
+ className: "border-t p-md border-[color:var(--deframe-widget-color-border-secondary)] dark:border-[color:var(--deframe-widget-color-border-secondary-dark)] bg-[var(--deframe-widget-color-bg-primary)] dark:bg-[var(--deframe-widget-color-bg-primary-dark)]",
4945
4945
  children: /* @__PURE__ */ jsxRuntime.jsx(ConfirmSwapButtonView, __spreadValues({}, confirmButton))
4946
4946
  }
4947
4947
  )
@@ -7482,27 +7482,27 @@ var ApyRange = ({ children }) => {
7482
7482
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right justify-center text-text-highlight text-xs font-normal leading-4", children });
7483
7483
  };
7484
7484
  var variantStyles = {
7485
- primary: "text-text-primary dark:text-text-primary-dark text-text-md",
7486
- secondary: "text-text-secondary dark:text-text-secondary-dark text-text-sm font-poppins"
7485
+ primary: "text-[color:var(--deframe-widget-color-text-primary)] dark:text-[color:var(--deframe-widget-color-text-primary-dark)] text-text-md",
7486
+ secondary: "text-[color:var(--deframe-widget-color-text-secondary)] dark:text-[color:var(--deframe-widget-color-text-secondary-dark)] text-text-sm font-poppins"
7487
7487
  };
7488
7488
  var Label = ({ children, variant = "primary", className }) => {
7489
7489
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: tailwindMerge.twMerge(variantStyles[variant], className), children });
7490
7490
  };
7491
7491
  var HistoryItemSkeleton = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full bg-[var(--deframe-widget-color-bg-subtle)] rounded-xs min-h-[72px] flex items-center justify-between px-md py-sm", children: [
7492
7492
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-sm flex-1 min-w-0", children: [
7493
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-xl bg-bg-muted dark:bg-bg-muted-dark animate-pulse flex-shrink-0" }),
7493
+ /* @__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)] animate-pulse flex-shrink-0" }),
7494
7494
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-xs flex-1 min-w-0", children: [
7495
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-32 h-4 bg-bg-muted dark:bg-bg-muted-dark rounded animate-pulse" }),
7496
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-24 h-3 bg-bg-muted dark:bg-bg-muted-dark rounded animate-pulse" })
7495
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-32 h-4 bg-[var(--deframe-widget-color-bg-tertiary)] dark:bg-[var(--deframe-widget-color-bg-tertiary-dark)] rounded animate-pulse" }),
7496
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-24 h-3 bg-[var(--deframe-widget-color-bg-tertiary)] dark:bg-[var(--deframe-widget-color-bg-tertiary-dark)] rounded animate-pulse" })
7497
7497
  ] })
7498
7498
  ] }),
7499
7499
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end gap-xs flex-shrink-0 ml-sm", children: [
7500
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-20 h-4 bg-bg-muted dark:bg-bg-muted-dark rounded animate-pulse" }),
7501
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-16 h-3 bg-bg-muted dark:bg-bg-muted-dark rounded animate-pulse" })
7500
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-20 h-4 bg-[var(--deframe-widget-color-bg-tertiary)] dark:bg-[var(--deframe-widget-color-bg-tertiary-dark)] rounded animate-pulse" }),
7501
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-16 h-3 bg-[var(--deframe-widget-color-bg-tertiary)] dark:bg-[var(--deframe-widget-color-bg-tertiary-dark)] rounded animate-pulse" })
7502
7502
  ] })
7503
7503
  ] });
7504
7504
  var HistoryGroupSkeleton = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "self-stretch flex flex-col gap-xs", children: [
7505
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-40 h-4 bg-bg-muted dark:bg-bg-muted-dark rounded animate-pulse" }),
7505
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-40 h-4 bg-[var(--deframe-widget-color-bg-tertiary)] dark:bg-[var(--deframe-widget-color-bg-tertiary-dark)] rounded animate-pulse" }),
7506
7506
  /* @__PURE__ */ jsxRuntime.jsx(HistoryItemSkeleton, {}),
7507
7507
  /* @__PURE__ */ jsxRuntime.jsx(HistoryItemSkeleton, {})
7508
7508
  ] });
@@ -7520,9 +7520,9 @@ var WalletBalances = ({ cards, variant = "subtle", className }) => {
7520
7520
  ] }) : /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h3", children: card.value })
7521
7521
  ] }, card.label)) });
7522
7522
  };
7523
- var HistoryTabEmpty = ({ title, description }) => /* @__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: [
7523
+ var HistoryTabEmpty = ({ title, description }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-[90vh] py-md bg-[var(--deframe-widget-color-bg-primary)] dark:bg-[var(--deframe-widget-color-bg-primary-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: [
7524
7524
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-center items-center gap-md text-center", children: [
7525
- /* @__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" }) }),
7525
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-20 h-20 bg-[var(--deframe-widget-color-bg-tertiary)] dark:bg-[var(--deframe-widget-color-bg-tertiary-dark)] rounded-full flex justify-center items-center", children: /* @__PURE__ */ jsxRuntime.jsx(pi.PiClockCountdownBold, { className: "w-10 h-10 text-[color:var(--deframe-widget-color-text-tertiary)] dark:text-[color:var(--deframe-widget-color-text-tertiary-dark)]" }) }),
7526
7526
  /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h3", children: title })
7527
7527
  ] }),
7528
7528
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "self-stretch text-center", children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: description }) })
@@ -7603,7 +7603,7 @@ var EarnBalanceCard = ({
7603
7603
  ] })
7604
7604
  ] });
7605
7605
  };
7606
- var GroupLabel = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-text-secondary dark:text-text-secondary-dark text-sm font-medium font-poppins py-3", children });
7606
+ var GroupLabel = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[color:var(--deframe-widget-color-text-secondary)] dark:text-[color:var(--deframe-widget-color-text-secondary-dark)] text-sm font-medium font-poppins py-3", children });
7607
7607
  var GroupedStrategyListView = ({
7608
7608
  isLoading,
7609
7609
  loadingLabel,
@@ -7724,17 +7724,17 @@ var GroupedStrategyListView = ({
7724
7724
  ] });
7725
7725
  };
7726
7726
  var DateLabel = ({ children }) => {
7727
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-text-sm-mobile font-poppins text-text-secondary dark:text-text-secondary-dark", children });
7727
+ 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 });
7728
7728
  };
7729
7729
  var ArrowBadge = ({ isDeposit }) => {
7730
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-[-2px] right-[-2px] w-[15px] h-[15px] rounded-full bg-bg-subtle dark:bg-bg-subtle-dark flex items-center justify-center border border-bg-subtle dark:border-bg-subtle-dark", children: isDeposit ? /* @__PURE__ */ jsxRuntime.jsx(md.MdArrowDownward, { className: "w-3 h-3 text-text-primary dark:text-text-primary-dark" }) : /* @__PURE__ */ jsxRuntime.jsx(md.MdArrowUpward, { className: "w-3 h-3 text-text-primary dark:text-text-primary-dark" }) });
7730
+ 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)]" }) });
7731
7731
  };
7732
7732
  var TokenIconWithBadge2 = ({ src, alt, isDeposit }) => {
7733
7733
  const fallbackText = encodeURIComponent((alt || "TOK").slice(0, 3).toUpperCase());
7734
7734
  const fallbackSrc = `https://placehold.co/40x40?text=${fallbackText}`;
7735
7735
  const resolvedSrc = src || fallbackSrc;
7736
7736
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-shrink-0", children: [
7737
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-xl bg-bg-muted dark:bg-bg-muted-dark flex items-center justify-center overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
7737
+ /* @__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(
7738
7738
  "img",
7739
7739
  {
7740
7740
  src: resolvedSrc,
@@ -7753,7 +7753,7 @@ var SwapIconWithBadge = ({ src, alt }) => {
7753
7753
  const fallbackSrc = `https://placehold.co/40x40?text=${fallbackText}`;
7754
7754
  const resolvedSrc = src || fallbackSrc;
7755
7755
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-shrink-0", children: [
7756
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-xl bg-bg-muted dark:bg-bg-muted-dark flex items-center justify-center overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
7756
+ /* @__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(
7757
7757
  "img",
7758
7758
  {
7759
7759
  src: resolvedSrc,
@@ -7764,7 +7764,7 @@ var SwapIconWithBadge = ({ src, alt }) => {
7764
7764
  }
7765
7765
  }
7766
7766
  ) }),
7767
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-[-2px] right-[-2px] w-[15px] h-[15px] rounded-full bg-bg-subtle dark:bg-bg-subtle-dark flex items-center justify-center border border-bg-subtle dark:border-bg-subtle-dark", children: /* @__PURE__ */ jsxRuntime.jsx(md.MdArrowUpward, { className: "w-3 h-3 text-text-primary dark:text-text-primary-dark" }) })
7767
+ /* @__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)]" }) })
7768
7768
  ] });
7769
7769
  };
7770
7770
  var AmountDisplay = ({ amount, usdAmount }) => {
@@ -7802,7 +7802,7 @@ var HistoryListView = ({
7802
7802
  ) }),
7803
7803
  /* @__PURE__ */ jsxRuntime.jsxs(ListItemContent, { children: [
7804
7804
  /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-text-lg-mobile", children: item.title }),
7805
- /* @__PURE__ */ jsxRuntime.jsx(Label, { variant: "secondary", className: "text-text-tertiary dark:text-text-tertiary-dark", children: item.subtitle }),
7805
+ /* @__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 }),
7806
7806
  item.status === "PENDING" && item.statusLabel ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-[6px]", children: /* @__PURE__ */ jsxRuntime.jsx(
7807
7807
  ProcessingBadge,
7808
7808
  {
@@ -7937,7 +7937,7 @@ var EarnInvestmentSummaryView = ({
7937
7937
  className
7938
7938
  }) => {
7939
7939
  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: [
7940
- /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-text-secondary dark:text-text-secondary-dark", children: overviewDescription }),
7940
+ /* @__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 }),
7941
7941
  /* @__PURE__ */ jsxRuntime.jsx(
7942
7942
  WalletBalances,
7943
7943
  {
@@ -8128,7 +8128,7 @@ var EarnRecentTransactionsView = ({
8128
8128
  ),
8129
8129
  children: [
8130
8130
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
8131
- /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-text-secondary dark:text-text-secondary-dark", children: sectionTitle }),
8131
+ /* @__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 }),
8132
8132
  hasMore && onViewAll && /* @__PURE__ */ jsxRuntime.jsx(
8133
8133
  "button",
8134
8134
  {
@@ -8464,6 +8464,35 @@ var EarnPositionCardView = ({
8464
8464
  /* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-tertiary)]", children: balanceToken })
8465
8465
  ] })
8466
8466
  ] }) }) }) });
8467
+ var shimmer = "animate-pulse rounded-[var(--deframe-widget-size-radius-sm)]";
8468
+ var bg = "bg-[var(--deframe-widget-color-bg-tertiary)]";
8469
+ var EarnFlowSkeletonSimple = () => {
8470
+ const panelClasses = [
8471
+ "relative flex flex-col overflow-hidden w-[420px]",
8472
+ "rounded-[var(--deframe-widget-size-radius-md)]",
8473
+ "border border-[color:var(--deframe-widget-color-border-secondary)]",
8474
+ "font-[var(--deframe-widget-font-family)]"
8475
+ ].join(" ");
8476
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": "earn-flow-skeleton-simple", className: panelClasses, children: [
8477
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-24 h-5 ${shimmer} ${bg}` }) }),
8478
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px bg-[var(--deframe-widget-color-border-secondary)]" }),
8479
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-md)] px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-[var(--deframe-widget-size-radius-sm)] border border-[color:var(--deframe-widget-color-border-secondary)] bg-[var(--deframe-widget-color-bg-secondary)] px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]", children: [
8480
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)]", children: [
8481
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-[120px] h-[42px] ${shimmer} ${bg} flex-shrink-0` }),
8482
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-10 bg-[var(--deframe-widget-color-border-secondary)] flex-shrink-0" }),
8483
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end flex-1 min-w-0 gap-1", children: [
8484
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-20 h-9 ${shimmer} ${bg}` }),
8485
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-12 h-4 ${shimmer} ${bg}` })
8486
+ ] })
8487
+ ] }),
8488
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-[var(--deframe-widget-size-gap-sm)]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-32 h-4 ${shimmer} ${bg}` }) })
8489
+ ] }) }),
8490
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] px-[var(--deframe-widget-size-padding-x-md)] pb-[var(--deframe-widget-size-padding-y-md)]", children: [
8491
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex-1 h-12 ${shimmer} ${bg}` }),
8492
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex-1 h-12 ${shimmer} ${bg}` })
8493
+ ] })
8494
+ ] });
8495
+ };
8467
8496
  var EarnDepositFormView = ({
8468
8497
  // Header / Layout
8469
8498
  headerTitle,
@@ -8604,36 +8633,381 @@ var EarnDepositFormView = ({
8604
8633
  ] })
8605
8634
  ] }) })
8606
8635
  ] });
8607
- var EarnWithdrawFormView = ({
8636
+ var EarnTokenSelectorSimpleView = ({
8637
+ selectedToken,
8638
+ onTokenClick,
8639
+ isLoading,
8640
+ selectTokenLabel,
8641
+ chainLabel,
8642
+ chainImage
8643
+ }) => {
8644
+ const hasToken = selectedToken != null;
8645
+ const isInteractive = !!onTokenClick;
8646
+ const baseClasses = [
8647
+ "inline-flex items-center gap-[10px]",
8648
+ "h-[54px] px-[10px]",
8649
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
8650
+ "bg-[var(--deframe-widget-color-bg-tertiary)]",
8651
+ "border-none outline-none",
8652
+ "transition-[background] duration-150",
8653
+ "flex-shrink-0"
8654
+ ].join(" ");
8655
+ const stateClasses = {
8656
+ interactive: "cursor-pointer hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_72%,transparent)]",
8657
+ static: "cursor-default"
8658
+ };
8659
+ const selectorClasses = tailwindMerge.twMerge(
8660
+ baseClasses,
8661
+ stateClasses[isInteractive ? "interactive" : "static"]
8662
+ );
8663
+ return /* @__PURE__ */ jsxRuntime.jsx(
8664
+ "button",
8665
+ {
8666
+ type: "button",
8667
+ "data-slot": "token-selector-simple",
8668
+ "data-test-id": "earn-token-selector-simple-view",
8669
+ onClick: onTokenClick,
8670
+ disabled: !isInteractive,
8671
+ "aria-label": hasToken ? `Select token \u2014 currently ${selectedToken.symbol} on ${chainLabel}` : selectTokenLabel,
8672
+ className: selectorClasses,
8673
+ children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(LoadingDots, {}) : hasToken ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
8674
+ /* @__PURE__ */ jsxRuntime.jsxs(
8675
+ "div",
8676
+ {
8677
+ "data-slot": "token-selector-simple-icon",
8678
+ "data-test-id": "earn-token-selector-simple-view-icon",
8679
+ className: "relative flex-shrink-0 w-[38px] h-[38px]",
8680
+ children: [
8681
+ selectedToken.logoURI ? /* @__PURE__ */ jsxRuntime.jsx(
8682
+ "img",
8683
+ {
8684
+ src: selectedToken.logoURI,
8685
+ alt: selectedToken.symbol,
8686
+ className: "w-full h-full rounded-[var(--deframe-widget-size-radius-full)] object-cover"
8687
+ }
8688
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
8689
+ "div",
8690
+ {
8691
+ "data-test-id": "earn-token-selector-simple-view-icon-fallback",
8692
+ "data-slot": "token-selector-simple-icon-fallback",
8693
+ className: [
8694
+ "w-full h-full",
8695
+ "rounded-[var(--deframe-widget-size-radius-full)]",
8696
+ "flex items-center justify-center",
8697
+ "bg-[var(--deframe-widget-color-bg-tertiary)]",
8698
+ "[font-weight:var(--deframe-widget-font-weight-bold)]",
8699
+ "text-[color:var(--deframe-widget-color-text-primary)]",
8700
+ "text-[12px]"
8701
+ ].join(" "),
8702
+ children: selectedToken.symbol.slice(0, 2).toUpperCase()
8703
+ }
8704
+ ),
8705
+ chainImage && /* @__PURE__ */ jsxRuntime.jsx(
8706
+ "div",
8707
+ {
8708
+ "data-slot": "token-selector-simple-chain-badge",
8709
+ "data-test-id": "earn-token-selector-simple-view-chain-badge",
8710
+ className: "absolute -bottom-0.5 -right-0.5 w-4 h-4 rounded-[var(--deframe-widget-size-radius-full)] shadow-[0_0_0_2px_var(--deframe-widget-color-bg-secondary)]",
8711
+ children: /* @__PURE__ */ jsxRuntime.jsx(
8712
+ "img",
8713
+ {
8714
+ src: chainImage,
8715
+ alt: chainLabel,
8716
+ className: "w-full h-full rounded-[var(--deframe-widget-size-radius-full)] object-cover"
8717
+ }
8718
+ )
8719
+ }
8720
+ )
8721
+ ]
8722
+ }
8723
+ ),
8724
+ /* @__PURE__ */ jsxRuntime.jsxs(
8725
+ "div",
8726
+ {
8727
+ "data-slot": "token-selector-simple-info",
8728
+ "data-test-id": "earn-token-selector-simple-view-info",
8729
+ className: "flex flex-col items-start min-w-0",
8730
+ children: [
8731
+ /* @__PURE__ */ jsxRuntime.jsx(
8732
+ "span",
8733
+ {
8734
+ "data-slot": "token-selector-simple-symbol",
8735
+ "data-test-id": "earn-token-selector-simple-view-symbol",
8736
+ className: "text-[16px] [font-weight:var(--deframe-widget-font-weight-semibold)] leading-[1.2] font-[var(--deframe-widget-font-family)] text-[color:var(--deframe-widget-color-text-primary)]",
8737
+ children: selectedToken.symbol
8738
+ }
8739
+ ),
8740
+ /* @__PURE__ */ jsxRuntime.jsx(
8741
+ "span",
8742
+ {
8743
+ "data-slot": "token-selector-simple-network",
8744
+ "data-test-id": "earn-token-selector-simple-view-network",
8745
+ className: "text-[11px] [font-weight:var(--deframe-widget-font-weight-medium)] text-[color:var(--deframe-widget-color-text-tertiary)] uppercase tracking-[0.04em] font-[var(--deframe-widget-font-family)] leading-[1.2]",
8746
+ children: chainLabel
8747
+ }
8748
+ )
8749
+ ]
8750
+ }
8751
+ ),
8752
+ isInteractive && /* @__PURE__ */ jsxRuntime.jsx(
8753
+ hi2.HiChevronDown,
8754
+ {
8755
+ "data-test-id": "earn-token-selector-simple-view-chevron",
8756
+ className: "flex-shrink-0 w-[14px] h-[14px] text-[color:var(--deframe-widget-color-text-secondary)]",
8757
+ "aria-hidden": "true"
8758
+ }
8759
+ )
8760
+ ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
8761
+ /* @__PURE__ */ jsxRuntime.jsx(
8762
+ "span",
8763
+ {
8764
+ "data-test-id": "earn-token-selector-simple-view-placeholder",
8765
+ className: "text-[11px] uppercase [font-weight:var(--deframe-widget-font-weight-regular)] text-[color:var(--deframe-widget-color-text-secondary)] font-[var(--deframe-widget-font-family)] whitespace-nowrap",
8766
+ children: selectTokenLabel
8767
+ }
8768
+ ),
8769
+ isInteractive && /* @__PURE__ */ jsxRuntime.jsx(
8770
+ hi2.HiChevronDown,
8771
+ {
8772
+ "data-test-id": "earn-token-selector-simple-view-placeholder-chevron",
8773
+ className: "flex-shrink-0 w-[14px] h-[14px] text-[color:var(--deframe-widget-color-text-secondary)]",
8774
+ "aria-hidden": "true"
8775
+ }
8776
+ )
8777
+ ] })
8778
+ }
8779
+ );
8780
+ };
8781
+ var EarnAmountInputSimpleView = ({
8782
+ value,
8783
+ onChange,
8784
+ ariaLabel,
8785
+ dollarAmountFormatted
8786
+ }) => {
8787
+ const isEmpty = !value || value === "0";
8788
+ const inputBaseClasses = [
8789
+ "bg-transparent border-none outline-none text-right",
8790
+ "text-[36px] [font-weight:var(--deframe-widget-font-weight-semibold)] [line-height:1.1]",
8791
+ "w-full",
8792
+ "px-[var(--deframe-widget-size-padding-x-none)] py-[var(--deframe-widget-size-padding-y-none)]",
8793
+ "font-[var(--deframe-widget-font-family)]",
8794
+ "placeholder:text-[color:var(--deframe-widget-color-text-tertiary)]",
8795
+ "[appearance:textfield]",
8796
+ "[&::-webkit-outer-spin-button]:appearance-none",
8797
+ "[&::-webkit-inner-spin-button]:appearance-none"
8798
+ ].join(" ");
8799
+ const inputStateClasses = {
8800
+ empty: "text-[color:var(--deframe-widget-color-text-tertiary)]",
8801
+ filled: "text-[color:var(--deframe-widget-color-text-primary)]"
8802
+ };
8803
+ const inputClasses = tailwindMerge.twMerge(
8804
+ inputBaseClasses,
8805
+ inputStateClasses[isEmpty ? "empty" : "filled"]
8806
+ );
8807
+ return /* @__PURE__ */ jsxRuntime.jsxs(
8808
+ "div",
8809
+ {
8810
+ "data-slot": "amount-input-simple-wrapper",
8811
+ "data-test-id": "earn-amount-input-simple-view",
8812
+ className: "flex flex-col items-end flex-1 min-w-0",
8813
+ children: [
8814
+ /* @__PURE__ */ jsxRuntime.jsx(
8815
+ "input",
8816
+ {
8817
+ "data-slot": "amount-input-simple",
8818
+ "data-test-id": "earn-amount-input-simple-view-input",
8819
+ type: "text",
8820
+ inputMode: "decimal",
8821
+ autoComplete: "off",
8822
+ placeholder: "0",
8823
+ "aria-label": ariaLabel,
8824
+ value,
8825
+ onChange,
8826
+ onWheel: (e) => e.currentTarget.blur(),
8827
+ className: inputClasses
8828
+ }
8829
+ ),
8830
+ dollarAmountFormatted && /* @__PURE__ */ jsxRuntime.jsx(
8831
+ "span",
8832
+ {
8833
+ "data-slot": "amount-input-simple-conversion",
8834
+ "data-test-id": "earn-amount-input-simple-view-conversion",
8835
+ className: "text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]",
8836
+ children: dollarAmountFormatted
8837
+ }
8838
+ )
8839
+ ]
8840
+ }
8841
+ );
8842
+ };
8843
+ var EarnPercentageButtonsSimpleView = ({
8844
+ onPercentageClick,
8845
+ maxLabel
8846
+ }) => {
8847
+ const [selectedBasisPoints, setSelectedBasisPoints] = React6__namespace.default.useState(null);
8848
+ const options = [
8849
+ { label: "25%", basisPoints: 2500 },
8850
+ { label: "50%", basisPoints: 5e3 },
8851
+ { label: "75%", basisPoints: 7500 },
8852
+ { label: maxLabel, basisPoints: 1e4 }
8853
+ ];
8854
+ function handleClick(basisPoints) {
8855
+ setSelectedBasisPoints(basisPoints);
8856
+ onPercentageClick(basisPoints);
8857
+ }
8858
+ const chipBaseClassName = [
8859
+ // Layout overrides
8860
+ "flex-none",
8861
+ "py-[3px] px-[10px]",
8862
+ "rounded-[var(--deframe-widget-size-radius-full)]",
8863
+ "whitespace-nowrap",
8864
+ "cursor-pointer",
8865
+ // Typography — use arbitrary property syntax to override PercentageButton defaults
8866
+ "[font-size:12px] [line-height:1]",
8867
+ "font-[var(--deframe-widget-font-family)]",
8868
+ // Transitions
8869
+ "transition-all duration-150",
8870
+ "outline-none",
8871
+ "focus:ring-0"
8872
+ ].join(" ");
8873
+ const chipDefaultClassName = [
8874
+ "[font-weight:var(--deframe-widget-font-weight-regular)]",
8875
+ "border-[color:var(--deframe-widget-color-border-secondary)]",
8876
+ "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_84%,transparent)]",
8877
+ "text-[color:var(--deframe-widget-color-text-secondary)]",
8878
+ "hover:border-[color:var(--deframe-widget-color-border-primary)]",
8879
+ "hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_92%,transparent)]",
8880
+ "hover:text-[color:var(--deframe-widget-color-text-primary)]"
8881
+ ].join(" ");
8882
+ const chipActiveClassName = [
8883
+ "[font-weight:var(--deframe-widget-font-weight-semibold)]",
8884
+ "border-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_32%,transparent)]",
8885
+ "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_12%,transparent)]",
8886
+ "text-[color:var(--deframe-widget-color-brand-primary)]"
8887
+ ].join(" ");
8888
+ return /* @__PURE__ */ jsxRuntime.jsx(
8889
+ "div",
8890
+ {
8891
+ "data-slot": "percentage-chips-simple",
8892
+ "data-test-id": "earn-percentage-buttons-simple-view",
8893
+ className: "flex gap-[6px] items-center",
8894
+ children: options.map(({ label, basisPoints }) => {
8895
+ const isActive = basisPoints === selectedBasisPoints;
8896
+ const chipClassName = [
8897
+ chipBaseClassName,
8898
+ isActive ? chipActiveClassName : chipDefaultClassName
8899
+ ].join(" ");
8900
+ return /* @__PURE__ */ jsxRuntime.jsx(
8901
+ PercentageButton,
8902
+ {
8903
+ className: chipClassName,
8904
+ onClick: () => handleClick(basisPoints),
8905
+ children: /* @__PURE__ */ jsxRuntime.jsx(
8906
+ "span",
8907
+ {
8908
+ "data-slot": "chip-pill-label",
8909
+ "data-test-id": "earn-percentage-buttons-simple-view-chip-label",
8910
+ children: label
8911
+ }
8912
+ )
8913
+ },
8914
+ basisPoints
8915
+ );
8916
+ })
8917
+ }
8918
+ );
8919
+ };
8920
+ var variantWrapperClasses = {
8921
+ error: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-error)_16%,transparent)] border-[color:color-mix(in_srgb,var(--deframe-widget-color-state-error)_32%,transparent)]",
8922
+ warning: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-warning)_16%,transparent)] border-[color:color-mix(in_srgb,var(--deframe-widget-color-state-warning)_32%,transparent)]",
8923
+ info: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-info)_16%,transparent)] border-[color:color-mix(in_srgb,var(--deframe-widget-color-state-info)_32%,transparent)]",
8924
+ success: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_12%,transparent)] border-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_32%,transparent)]"
8925
+ };
8926
+ var variantAccentClasses = {
8927
+ error: "bg-[var(--deframe-widget-color-state-error)]",
8928
+ warning: "bg-[var(--deframe-widget-color-state-warning)]",
8929
+ info: "bg-[var(--deframe-widget-color-state-info)]",
8930
+ success: "bg-[var(--deframe-widget-color-brand-primary)]"
8931
+ };
8932
+ var EarnInlineNotificationSimpleView = ({
8933
+ variant,
8934
+ message
8935
+ }) => {
8936
+ const baseClasses = [
8937
+ "relative flex items-center gap-[var(--deframe-widget-size-gap-sm)]",
8938
+ "py-[7px] pr-[10px] pl-[14px]",
8939
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
8940
+ "border",
8941
+ "overflow-hidden"
8942
+ ].join(" ");
8943
+ const wrapperClasses = tailwindMerge.twMerge(baseClasses, variantWrapperClasses[variant]);
8944
+ return /* @__PURE__ */ jsxRuntime.jsxs(
8945
+ "div",
8946
+ {
8947
+ "data-slot": "inline-notification-simple",
8948
+ "data-test-id": "earn-inline-notification-simple-view",
8949
+ role: "alert",
8950
+ className: wrapperClasses,
8951
+ children: [
8952
+ /* @__PURE__ */ jsxRuntime.jsx(
8953
+ "div",
8954
+ {
8955
+ "data-slot": "inline-notification-simple-accent",
8956
+ "data-test-id": "earn-inline-notification-simple-view-accent",
8957
+ className: tailwindMerge.twMerge(
8958
+ "absolute left-0 top-0 bottom-0 w-[3px] rounded-[var(--deframe-widget-size-radius-sm)_0_0_var(--deframe-widget-size-radius-sm)]",
8959
+ variantAccentClasses[variant]
8960
+ )
8961
+ }
8962
+ ),
8963
+ /* @__PURE__ */ jsxRuntime.jsx(
8964
+ "div",
8965
+ {
8966
+ "data-slot": "inline-notification-simple-dot",
8967
+ "data-test-id": "earn-inline-notification-simple-view-dot",
8968
+ className: tailwindMerge.twMerge(
8969
+ "w-[6px] h-[6px] rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0",
8970
+ variantAccentClasses[variant]
8971
+ )
8972
+ }
8973
+ ),
8974
+ /* @__PURE__ */ jsxRuntime.jsx(
8975
+ "span",
8976
+ {
8977
+ "data-slot": "inline-notification-simple-message",
8978
+ "data-test-id": "earn-inline-notification-simple-view-message",
8979
+ className: "flex-1 text-[13px] text-[color:var(--deframe-widget-color-text-secondary)] font-[var(--deframe-widget-font-family)] leading-[1.4]",
8980
+ children: message
8981
+ }
8982
+ )
8983
+ ]
8984
+ }
8985
+ );
8986
+ };
8987
+ var EarnDepositFormViewSimple = ({
8608
8988
  // Header / Layout
8609
8989
  headerTitle,
8610
8990
  onBack,
8611
- progress,
8612
- pageTitle,
8613
- subtitle,
8614
8991
  onSubmit,
8615
- // Position card
8616
- positionBalanceUSD,
8617
- positionBalanceToken,
8618
- strategyIcon,
8619
- strategyName,
8620
8992
  // Token selector
8621
8993
  selectedToken,
8622
8994
  onTokenClick,
8995
+ isLoadingToken,
8623
8996
  selectTokenLabel,
8624
8997
  // Chain selector
8625
8998
  chainLabel,
8626
8999
  chainImage,
8627
- chainDirectionLabel,
8628
- chainDisabledTitle,
8629
- onNetworkClick,
8630
- isNetworkDisabled,
8631
- currentNetworkSelected,
8632
9000
  // Amount input
8633
9001
  amountValue,
8634
9002
  onAmountChange,
8635
9003
  amountAriaLabel,
8636
9004
  dollarAmountFormatted,
9005
+ availableBalanceFormatted,
9006
+ // No balance notification
9007
+ showNoBalanceNotification,
9008
+ noBalancePrompt,
9009
+ goToSwapLabel,
9010
+ onGoToSwap,
8637
9011
  // Percentage buttons
8638
9012
  onPercentageClick,
8639
9013
  maxLabel,
@@ -8647,48 +9021,370 @@ var EarnWithdrawFormView = ({
8647
9021
  txErrorMessage,
8648
9022
  // Bytecode error
8649
9023
  bytecodeErrorMessage,
8650
- transactionErrorLabel,
8651
- // Quote details
8652
- isQuoteValid,
8653
- isFetchingQuote,
8654
- summaryTitle,
8655
- summaryItems,
8656
9024
  // Submit button
8657
9025
  submitDisabled,
8658
9026
  submitButtonText
8659
- }) => /* @__PURE__ */ jsxRuntime.jsxs(BackgroundContainer, { children: [
8660
- /* @__PURE__ */ jsxRuntime.jsx(DetailsHeader, { title: headerTitle, onBack }),
8661
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-md)] text-[color:var(--deframe-widget-color-text-secondary)] pb-[var(--deframe-widget-size-padding-y-md)]", children: [
8662
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full px-[var(--deframe-widget-size-padding-x-md)]", children: /* @__PURE__ */ jsxRuntime.jsx(ProgressIndicator, { progress }) }),
8663
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)] px-[var(--deframe-widget-size-padding-x-md)]", children: [
8664
- /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h5", children: pageTitle }),
8665
- /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: subtitle })
8666
- ] }),
8667
- /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit, children: [
8668
- /* @__PURE__ */ jsxRuntime.jsx(
8669
- EarnPositionCardView,
8670
- {
8671
- balanceUSD: positionBalanceUSD,
8672
- balanceToken: positionBalanceToken,
8673
- icon: strategyIcon,
8674
- iconAlt: strategyName
8675
- }
8676
- ),
8677
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[var(--deframe-widget-size-padding-x-md)] mt-[var(--deframe-widget-size-gap-sm)]", children: /* @__PURE__ */ jsxRuntime.jsx(SectionCard, { className: "focus-within:bg-[var(--deframe-widget-color-bg-tertiary)] transition-colors", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-[var(--deframe-widget-size-gap-md)]", children: [
8678
- /* @__PURE__ */ jsxRuntime.jsx(
8679
- EarnWithdrawTokenSelectorView,
8680
- {
8681
- selectedToken,
8682
- onTokenClick,
8683
- selectTokenLabel,
8684
- chainLabel,
8685
- chainImage,
8686
- chainDirectionLabel,
8687
- chainDisabledTitle,
8688
- onNetworkClick,
8689
- isNetworkDisabled,
8690
- currentNetworkSelected
8691
- }
9027
+ }) => {
9028
+ const hasToken = selectedToken != null;
9029
+ const hasError = !!bytecodeErrorMessage;
9030
+ const isSubmitDisabled = !hasToken || submitDisabled || !amountValue || amountValue === "0" || amountValue === "";
9031
+ const [cardHovered, setCardHovered] = React6__namespace.default.useState(false);
9032
+ const hideTimerRef = React6__namespace.default.useRef(void 0);
9033
+ function handleHoverStart() {
9034
+ clearTimeout(hideTimerRef.current);
9035
+ setCardHovered(true);
9036
+ }
9037
+ function handleHoverEnd() {
9038
+ hideTimerRef.current = setTimeout(() => setCardHovered(false), 150);
9039
+ }
9040
+ React6__namespace.default.useEffect(() => () => clearTimeout(hideTimerRef.current), []);
9041
+ const panelBaseClasses = [
9042
+ "relative flex flex-col overflow-hidden w-[420px]",
9043
+ "rounded-[var(--deframe-widget-size-radius-md)]",
9044
+ "border border-[color:var(--deframe-widget-color-border-secondary)]",
9045
+ "font-[var(--deframe-widget-font-family)]"
9046
+ ].join(" ");
9047
+ const headerBaseClasses = [
9048
+ "flex items-center",
9049
+ "px-[var(--deframe-widget-size-padding-x-md)]",
9050
+ "py-[var(--deframe-widget-size-padding-y-md)]"
9051
+ ].join(" ");
9052
+ const titleBaseClasses = [
9053
+ "flex-1",
9054
+ "text-[15px]",
9055
+ "[font-weight:var(--deframe-widget-font-weight-semibold)]",
9056
+ "text-[color:var(--deframe-widget-color-text-primary)]"
9057
+ ].join(" ");
9058
+ const dividerClasses = "h-px bg-[var(--deframe-widget-color-border-secondary)]";
9059
+ const bodyBaseClasses = [
9060
+ "flex flex-col",
9061
+ "gap-[var(--deframe-widget-size-gap-md)]",
9062
+ "px-[var(--deframe-widget-size-padding-x-md)]",
9063
+ "py-[var(--deframe-widget-size-padding-y-md)]"
9064
+ ].join(" ");
9065
+ const inputCardClasses = tailwindMerge.twMerge(
9066
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
9067
+ "border",
9068
+ "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]",
9069
+ "transition-[border-color,background] duration-200",
9070
+ hasError ? "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)]"
9071
+ );
9072
+ const footerBaseClasses = [
9073
+ "flex gap-[var(--deframe-widget-size-gap-sm)]",
9074
+ "px-[var(--deframe-widget-size-padding-x-md)]",
9075
+ "pb-[var(--deframe-widget-size-padding-y-md)]"
9076
+ ].join(" ");
9077
+ return /* @__PURE__ */ jsxRuntime.jsxs(
9078
+ "div",
9079
+ {
9080
+ "data-slot": "deposit-panel-simple",
9081
+ "data-test-id": "earn-deposit-form-view-simple",
9082
+ className: panelBaseClasses,
9083
+ children: [
9084
+ /* @__PURE__ */ jsxRuntime.jsx(
9085
+ "header",
9086
+ {
9087
+ "data-slot": "deposit-panel-simple-header",
9088
+ "data-test-id": "earn-deposit-form-view-simple-header",
9089
+ className: headerBaseClasses,
9090
+ children: /* @__PURE__ */ jsxRuntime.jsx(
9091
+ "span",
9092
+ {
9093
+ "data-slot": "deposit-panel-simple-title",
9094
+ "data-test-id": "earn-deposit-form-view-simple-title",
9095
+ className: titleBaseClasses,
9096
+ children: headerTitle
9097
+ }
9098
+ )
9099
+ }
9100
+ ),
9101
+ /* @__PURE__ */ jsxRuntime.jsx(
9102
+ "div",
9103
+ {
9104
+ "data-slot": "deposit-panel-simple-divider",
9105
+ "data-test-id": "earn-deposit-form-view-simple-divider",
9106
+ className: dividerClasses
9107
+ }
9108
+ ),
9109
+ /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit, children: [
9110
+ /* @__PURE__ */ jsxRuntime.jsx(
9111
+ "div",
9112
+ {
9113
+ "data-slot": "deposit-panel-simple-body",
9114
+ "data-test-id": "earn-deposit-form-view-simple-body",
9115
+ className: bodyBaseClasses,
9116
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
9117
+ "div",
9118
+ {
9119
+ "data-slot": "deposit-panel-simple-input-card",
9120
+ "data-test-id": "earn-deposit-form-view-simple-input-card",
9121
+ onMouseEnter: hasToken ? handleHoverStart : void 0,
9122
+ onMouseLeave: hasToken ? handleHoverEnd : void 0,
9123
+ className: inputCardClasses,
9124
+ children: [
9125
+ /* @__PURE__ */ jsxRuntime.jsxs(
9126
+ "div",
9127
+ {
9128
+ "data-slot": "deposit-panel-simple-input-top-row",
9129
+ "data-test-id": "earn-deposit-form-view-simple-top-row",
9130
+ className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)]",
9131
+ children: [
9132
+ /* @__PURE__ */ jsxRuntime.jsx(
9133
+ EarnTokenSelectorSimpleView,
9134
+ {
9135
+ selectedToken,
9136
+ onTokenClick,
9137
+ isLoading: isLoadingToken,
9138
+ selectTokenLabel,
9139
+ chainLabel,
9140
+ chainImage
9141
+ }
9142
+ ),
9143
+ /* @__PURE__ */ jsxRuntime.jsx(
9144
+ "div",
9145
+ {
9146
+ "data-test-id": "earn-deposit-form-view-simple-input-divider",
9147
+ className: "w-px h-10 bg-[var(--deframe-widget-color-border-secondary)] flex-shrink-0"
9148
+ }
9149
+ ),
9150
+ /* @__PURE__ */ jsxRuntime.jsx(
9151
+ EarnAmountInputSimpleView,
9152
+ {
9153
+ value: amountValue,
9154
+ onChange: onAmountChange,
9155
+ ariaLabel: amountAriaLabel,
9156
+ dollarAmountFormatted
9157
+ }
9158
+ )
9159
+ ]
9160
+ }
9161
+ ),
9162
+ hasToken && availableBalanceFormatted && /* @__PURE__ */ jsxRuntime.jsx(
9163
+ "div",
9164
+ {
9165
+ "data-slot": "deposit-simple-balance-row",
9166
+ "data-test-id": "earn-deposit-form-view-simple-balance-row",
9167
+ className: "mt-[var(--deframe-widget-size-gap-sm)]",
9168
+ children: /* @__PURE__ */ jsxRuntime.jsx(
9169
+ "span",
9170
+ {
9171
+ className: tailwindMerge.twMerge(
9172
+ "text-[13px] font-[var(--deframe-widget-font-family)]",
9173
+ hasError ? "text-[color:var(--deframe-widget-color-state-error)]" : "text-[color:var(--deframe-widget-color-text-tertiary)]"
9174
+ ),
9175
+ children: availableBalanceFormatted
9176
+ }
9177
+ )
9178
+ }
9179
+ ),
9180
+ !hasToken && !isLoadingToken && /* @__PURE__ */ jsxRuntime.jsx(
9181
+ "p",
9182
+ {
9183
+ "data-slot": "deposit-simple-empty-hint",
9184
+ "data-test-id": "earn-deposit-form-view-simple-empty-hint",
9185
+ className: "mt-[var(--deframe-widget-size-gap-sm)] text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]",
9186
+ children: selectTokenLabel
9187
+ }
9188
+ ),
9189
+ /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: hasToken && cardHovered && /* @__PURE__ */ jsxRuntime.jsx(
9190
+ framerMotion.motion.div,
9191
+ {
9192
+ "data-slot": "deposit-simple-chips-row",
9193
+ "data-test-id": "earn-deposit-form-view-simple-chips-row",
9194
+ initial: { opacity: 0, height: 0, marginTop: 0 },
9195
+ animate: { opacity: 1, height: "auto", marginTop: "var(--deframe-widget-size-gap-sm)" },
9196
+ exit: { opacity: 0, height: 0, marginTop: 0 },
9197
+ transition: { duration: 0.15, ease: "easeOut" },
9198
+ style: { overflow: "hidden" },
9199
+ onMouseEnter: handleHoverStart,
9200
+ onMouseLeave: handleHoverEnd,
9201
+ children: /* @__PURE__ */ jsxRuntime.jsx(
9202
+ EarnPercentageButtonsSimpleView,
9203
+ {
9204
+ onPercentageClick,
9205
+ maxLabel
9206
+ }
9207
+ )
9208
+ }
9209
+ ) }),
9210
+ showNoBalanceNotification && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-[var(--deframe-widget-size-gap-sm)]", children: /* @__PURE__ */ jsxRuntime.jsx(
9211
+ EarnNoBalanceNotificationView,
9212
+ {
9213
+ prompt: noBalancePrompt,
9214
+ actionLabel: goToSwapLabel,
9215
+ onAction: onGoToSwap
9216
+ }
9217
+ ) }),
9218
+ bytecodeErrorMessage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-[var(--deframe-widget-size-gap-sm)]", children: /* @__PURE__ */ jsxRuntime.jsx(
9219
+ EarnInlineNotificationSimpleView,
9220
+ {
9221
+ variant: "error",
9222
+ message: bytecodeErrorMessage
9223
+ }
9224
+ ) })
9225
+ ]
9226
+ }
9227
+ )
9228
+ }
9229
+ ),
9230
+ /* @__PURE__ */ jsxRuntime.jsxs(
9231
+ "footer",
9232
+ {
9233
+ "data-slot": "deposit-panel-simple-footer",
9234
+ "data-test-id": "earn-deposit-form-view-simple-footer",
9235
+ className: footerBaseClasses,
9236
+ children: [
9237
+ onBack && /* @__PURE__ */ jsxRuntime.jsx(
9238
+ SecondaryButton,
9239
+ {
9240
+ type: "button",
9241
+ className: [
9242
+ "flex-1 h-12 rounded-[var(--deframe-widget-size-radius-sm)]",
9243
+ "text-[15px] text-[color:var(--deframe-widget-color-text-secondary)]",
9244
+ "border-[color:var(--deframe-widget-color-border-secondary)]",
9245
+ "outline-none",
9246
+ "transition-[background,color,border-color] duration-150",
9247
+ "hover:opacity-100",
9248
+ "hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_60%,transparent)]",
9249
+ "hover:text-[color:var(--deframe-widget-color-text-primary)]"
9250
+ ].join(" "),
9251
+ onClick: onBack,
9252
+ "aria-label": "Cancel deposit",
9253
+ children: "Cancel"
9254
+ }
9255
+ ),
9256
+ /* @__PURE__ */ jsxRuntime.jsx(
9257
+ PrimaryButton,
9258
+ {
9259
+ type: "submit",
9260
+ className: [
9261
+ "flex-1 h-12 rounded-[var(--deframe-widget-size-radius-sm)]",
9262
+ "border-none",
9263
+ "text-[15px]",
9264
+ isSubmitDisabled ? "text-[color:var(--deframe-widget-color-text-primary-disabled)]" : "text-[color:var(--deframe-widget-color-text-primary-dark)]",
9265
+ "outline-none",
9266
+ "transition-[background,color] duration-200"
9267
+ ].join(" "),
9268
+ disabled: isSubmitDisabled,
9269
+ "aria-disabled": isSubmitDisabled,
9270
+ "aria-label": submitButtonText,
9271
+ children: submitButtonText
9272
+ }
9273
+ )
9274
+ ]
9275
+ }
9276
+ )
9277
+ ] }),
9278
+ /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: showTxStatus && /* @__PURE__ */ jsxRuntime.jsx(
9279
+ framerMotion.motion.div,
9280
+ {
9281
+ "data-slot": "deposit-simple-tx-overlay",
9282
+ "data-test-id": "earn-deposit-form-view-simple-tx-overlay",
9283
+ initial: { opacity: 0 },
9284
+ animate: { opacity: 1 },
9285
+ exit: { opacity: 0 },
9286
+ transition: { duration: 0.2, ease: "easeOut" },
9287
+ className: "absolute inset-0 z-10 flex items-center justify-center bg-[var(--deframe-widget-color-bg-primary)]",
9288
+ children: /* @__PURE__ */ jsxRuntime.jsx(
9289
+ EarnTxStatusCardView,
9290
+ {
9291
+ statusLabel: txStatusLabel,
9292
+ isProcessing: isTxProcessing,
9293
+ successMessage: isTxSuccess ? txSuccessMessage : void 0,
9294
+ errorMessage: isTxError ? txErrorMessage : void 0
9295
+ }
9296
+ )
9297
+ }
9298
+ ) })
9299
+ ]
9300
+ }
9301
+ );
9302
+ };
9303
+ var EarnWithdrawFormView = ({
9304
+ // Header / Layout
9305
+ headerTitle,
9306
+ onBack,
9307
+ progress,
9308
+ pageTitle,
9309
+ subtitle,
9310
+ onSubmit,
9311
+ // Position card
9312
+ positionBalanceUSD,
9313
+ positionBalanceToken,
9314
+ strategyIcon,
9315
+ strategyName,
9316
+ // Token selector
9317
+ selectedToken,
9318
+ onTokenClick,
9319
+ selectTokenLabel,
9320
+ // Chain selector
9321
+ chainLabel,
9322
+ chainImage,
9323
+ chainDirectionLabel,
9324
+ chainDisabledTitle,
9325
+ onNetworkClick,
9326
+ isNetworkDisabled,
9327
+ currentNetworkSelected,
9328
+ // Amount input
9329
+ amountValue,
9330
+ onAmountChange,
9331
+ amountAriaLabel,
9332
+ dollarAmountFormatted,
9333
+ // Percentage buttons
9334
+ onPercentageClick,
9335
+ maxLabel,
9336
+ // TX status
9337
+ showTxStatus,
9338
+ txStatusLabel,
9339
+ isTxProcessing,
9340
+ isTxSuccess,
9341
+ isTxError,
9342
+ txSuccessMessage,
9343
+ txErrorMessage,
9344
+ // Bytecode error
9345
+ bytecodeErrorMessage,
9346
+ transactionErrorLabel,
9347
+ // Quote details
9348
+ isQuoteValid,
9349
+ isFetchingQuote,
9350
+ summaryTitle,
9351
+ summaryItems,
9352
+ // Submit button
9353
+ submitDisabled,
9354
+ submitButtonText
9355
+ }) => /* @__PURE__ */ jsxRuntime.jsxs(BackgroundContainer, { children: [
9356
+ /* @__PURE__ */ jsxRuntime.jsx(DetailsHeader, { title: headerTitle, onBack }),
9357
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-md)] text-[color:var(--deframe-widget-color-text-secondary)] pb-[var(--deframe-widget-size-padding-y-md)]", children: [
9358
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full px-[var(--deframe-widget-size-padding-x-md)]", children: /* @__PURE__ */ jsxRuntime.jsx(ProgressIndicator, { progress }) }),
9359
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)] px-[var(--deframe-widget-size-padding-x-md)]", children: [
9360
+ /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h5", children: pageTitle }),
9361
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: subtitle })
9362
+ ] }),
9363
+ /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit, children: [
9364
+ /* @__PURE__ */ jsxRuntime.jsx(
9365
+ EarnPositionCardView,
9366
+ {
9367
+ balanceUSD: positionBalanceUSD,
9368
+ balanceToken: positionBalanceToken,
9369
+ icon: strategyIcon,
9370
+ iconAlt: strategyName
9371
+ }
9372
+ ),
9373
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[var(--deframe-widget-size-padding-x-md)] mt-[var(--deframe-widget-size-gap-sm)]", children: /* @__PURE__ */ jsxRuntime.jsx(SectionCard, { className: "focus-within:bg-[var(--deframe-widget-color-bg-tertiary)] transition-colors", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-[var(--deframe-widget-size-gap-md)]", children: [
9374
+ /* @__PURE__ */ jsxRuntime.jsx(
9375
+ EarnWithdrawTokenSelectorView,
9376
+ {
9377
+ selectedToken,
9378
+ onTokenClick,
9379
+ selectTokenLabel,
9380
+ chainLabel,
9381
+ chainImage,
9382
+ chainDirectionLabel,
9383
+ chainDisabledTitle,
9384
+ onNetworkClick,
9385
+ isNetworkDisabled,
9386
+ currentNetworkSelected
9387
+ }
8692
9388
  ),
8693
9389
  /* @__PURE__ */ jsxRuntime.jsx(
8694
9390
  EarnAmountInputView,
@@ -8747,6 +9443,306 @@ var EarnWithdrawFormView = ({
8747
9443
  ] })
8748
9444
  ] }) })
8749
9445
  ] });
9446
+ var EarnWithdrawFormViewSimple = ({
9447
+ // Header / Layout
9448
+ headerTitle,
9449
+ onBack,
9450
+ onSubmit,
9451
+ // Position card (used for inline balance row)
9452
+ positionBalanceToken,
9453
+ // Token selector
9454
+ selectedToken,
9455
+ onTokenClick,
9456
+ selectTokenLabel,
9457
+ // Chain selector
9458
+ chainLabel,
9459
+ chainImage,
9460
+ // Amount input
9461
+ amountValue,
9462
+ onAmountChange,
9463
+ amountAriaLabel,
9464
+ dollarAmountFormatted,
9465
+ // Percentage buttons
9466
+ onPercentageClick,
9467
+ maxLabel,
9468
+ // TX status
9469
+ showTxStatus,
9470
+ txStatusLabel,
9471
+ isTxProcessing,
9472
+ isTxSuccess,
9473
+ isTxError,
9474
+ txSuccessMessage,
9475
+ txErrorMessage,
9476
+ // Bytecode error
9477
+ bytecodeErrorMessage,
9478
+ // Submit button
9479
+ submitDisabled,
9480
+ submitButtonText
9481
+ }) => {
9482
+ const hasToken = selectedToken != null;
9483
+ const hasError = !!bytecodeErrorMessage;
9484
+ const isSubmitDisabled = !hasToken || submitDisabled || !amountValue || amountValue === "0" || amountValue === "";
9485
+ const [cardHovered, setCardHovered] = React6__namespace.default.useState(false);
9486
+ const hideTimerRef = React6__namespace.default.useRef(void 0);
9487
+ function handleHoverStart() {
9488
+ clearTimeout(hideTimerRef.current);
9489
+ setCardHovered(true);
9490
+ }
9491
+ function handleHoverEnd() {
9492
+ hideTimerRef.current = setTimeout(() => setCardHovered(false), 150);
9493
+ }
9494
+ React6__namespace.default.useEffect(() => () => clearTimeout(hideTimerRef.current), []);
9495
+ const panelBaseClasses = [
9496
+ "relative flex flex-col overflow-hidden w-[420px]",
9497
+ "rounded-[var(--deframe-widget-size-radius-md)]",
9498
+ "border border-[color:var(--deframe-widget-color-border-secondary)]",
9499
+ "font-[var(--deframe-widget-font-family)]"
9500
+ ].join(" ");
9501
+ const headerBaseClasses = [
9502
+ "flex items-center",
9503
+ "px-[var(--deframe-widget-size-padding-x-md)]",
9504
+ "py-[var(--deframe-widget-size-padding-y-md)]"
9505
+ ].join(" ");
9506
+ const titleBaseClasses = [
9507
+ "flex-1",
9508
+ "text-[15px]",
9509
+ "[font-weight:var(--deframe-widget-font-weight-semibold)]",
9510
+ "text-[color:var(--deframe-widget-color-text-primary)]"
9511
+ ].join(" ");
9512
+ const dividerClasses = "h-px bg-[var(--deframe-widget-color-border-secondary)]";
9513
+ const bodyBaseClasses = [
9514
+ "flex flex-col",
9515
+ "gap-[var(--deframe-widget-size-gap-md)]",
9516
+ "px-[var(--deframe-widget-size-padding-x-md)]",
9517
+ "py-[var(--deframe-widget-size-padding-y-md)]"
9518
+ ].join(" ");
9519
+ const inputCardClasses = tailwindMerge.twMerge(
9520
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
9521
+ "border",
9522
+ "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]",
9523
+ "transition-[border-color,background] duration-200",
9524
+ hasError ? "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)]"
9525
+ );
9526
+ const footerBaseClasses = [
9527
+ "flex gap-[var(--deframe-widget-size-gap-sm)]",
9528
+ "px-[var(--deframe-widget-size-padding-x-md)]",
9529
+ "pb-[var(--deframe-widget-size-padding-y-md)]"
9530
+ ].join(" ");
9531
+ return /* @__PURE__ */ jsxRuntime.jsxs(
9532
+ "div",
9533
+ {
9534
+ "data-slot": "withdraw-panel-simple",
9535
+ "data-test-id": "earn-withdraw-form-view-simple",
9536
+ className: panelBaseClasses,
9537
+ children: [
9538
+ /* @__PURE__ */ jsxRuntime.jsx(
9539
+ "header",
9540
+ {
9541
+ "data-slot": "withdraw-panel-simple-header",
9542
+ "data-test-id": "earn-withdraw-form-view-simple-header",
9543
+ className: headerBaseClasses,
9544
+ children: /* @__PURE__ */ jsxRuntime.jsx(
9545
+ "span",
9546
+ {
9547
+ "data-slot": "withdraw-panel-simple-title",
9548
+ "data-test-id": "earn-withdraw-form-view-simple-title",
9549
+ className: titleBaseClasses,
9550
+ children: headerTitle
9551
+ }
9552
+ )
9553
+ }
9554
+ ),
9555
+ /* @__PURE__ */ jsxRuntime.jsx(
9556
+ "div",
9557
+ {
9558
+ "data-slot": "withdraw-panel-simple-divider",
9559
+ "data-test-id": "earn-withdraw-form-view-simple-divider",
9560
+ className: dividerClasses
9561
+ }
9562
+ ),
9563
+ /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit, children: [
9564
+ /* @__PURE__ */ jsxRuntime.jsx(
9565
+ "div",
9566
+ {
9567
+ "data-slot": "withdraw-panel-simple-body",
9568
+ "data-test-id": "earn-withdraw-form-view-simple-body",
9569
+ className: bodyBaseClasses,
9570
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
9571
+ "div",
9572
+ {
9573
+ "data-slot": "withdraw-panel-simple-input-card",
9574
+ "data-test-id": "earn-withdraw-form-view-simple-input-card",
9575
+ onMouseEnter: hasToken ? handleHoverStart : void 0,
9576
+ onMouseLeave: hasToken ? handleHoverEnd : void 0,
9577
+ className: inputCardClasses,
9578
+ children: [
9579
+ /* @__PURE__ */ jsxRuntime.jsxs(
9580
+ "div",
9581
+ {
9582
+ "data-slot": "withdraw-panel-simple-input-top-row",
9583
+ "data-test-id": "earn-withdraw-form-view-simple-top-row",
9584
+ className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)]",
9585
+ children: [
9586
+ /* @__PURE__ */ jsxRuntime.jsx(
9587
+ EarnTokenSelectorSimpleView,
9588
+ {
9589
+ selectedToken,
9590
+ onTokenClick,
9591
+ isLoading: false,
9592
+ selectTokenLabel,
9593
+ chainLabel,
9594
+ chainImage
9595
+ }
9596
+ ),
9597
+ /* @__PURE__ */ jsxRuntime.jsx(
9598
+ "div",
9599
+ {
9600
+ "data-test-id": "earn-withdraw-form-view-simple-input-divider",
9601
+ className: "w-px h-10 bg-[var(--deframe-widget-color-border-secondary)] flex-shrink-0"
9602
+ }
9603
+ ),
9604
+ /* @__PURE__ */ jsxRuntime.jsx(
9605
+ EarnAmountInputSimpleView,
9606
+ {
9607
+ value: amountValue,
9608
+ onChange: onAmountChange,
9609
+ ariaLabel: amountAriaLabel,
9610
+ dollarAmountFormatted
9611
+ }
9612
+ )
9613
+ ]
9614
+ }
9615
+ ),
9616
+ hasToken && positionBalanceToken && /* @__PURE__ */ jsxRuntime.jsx(
9617
+ "div",
9618
+ {
9619
+ "data-slot": "withdraw-simple-balance-row",
9620
+ "data-test-id": "earn-withdraw-form-view-simple-balance-row",
9621
+ className: "mt-[var(--deframe-widget-size-gap-sm)]",
9622
+ 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.jsx(
9623
+ "span",
9624
+ {
9625
+ className: hasError ? "text-[color:var(--deframe-widget-color-state-error)]" : "text-[color:var(--deframe-widget-color-text-secondary)]",
9626
+ children: positionBalanceToken
9627
+ }
9628
+ ) })
9629
+ }
9630
+ ),
9631
+ !hasToken && /* @__PURE__ */ jsxRuntime.jsx(
9632
+ "p",
9633
+ {
9634
+ "data-slot": "withdraw-simple-empty-hint",
9635
+ "data-test-id": "earn-withdraw-form-view-simple-empty-hint",
9636
+ className: "mt-[var(--deframe-widget-size-gap-sm)] text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]",
9637
+ children: selectTokenLabel
9638
+ }
9639
+ ),
9640
+ /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: hasToken && cardHovered && /* @__PURE__ */ jsxRuntime.jsx(
9641
+ framerMotion.motion.div,
9642
+ {
9643
+ "data-slot": "withdraw-simple-chips-row",
9644
+ "data-test-id": "earn-withdraw-form-view-simple-chips-row",
9645
+ initial: { opacity: 0, height: 0, marginTop: 0 },
9646
+ animate: { opacity: 1, height: "auto", marginTop: "var(--deframe-widget-size-gap-sm)" },
9647
+ exit: { opacity: 0, height: 0, marginTop: 0 },
9648
+ transition: { duration: 0.15, ease: "easeOut" },
9649
+ style: { overflow: "hidden" },
9650
+ onMouseEnter: handleHoverStart,
9651
+ onMouseLeave: handleHoverEnd,
9652
+ children: /* @__PURE__ */ jsxRuntime.jsx(
9653
+ EarnPercentageButtonsSimpleView,
9654
+ {
9655
+ onPercentageClick,
9656
+ maxLabel
9657
+ }
9658
+ )
9659
+ }
9660
+ ) }),
9661
+ bytecodeErrorMessage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-[var(--deframe-widget-size-gap-sm)]", children: /* @__PURE__ */ jsxRuntime.jsx(
9662
+ EarnInlineNotificationSimpleView,
9663
+ {
9664
+ variant: "error",
9665
+ message: bytecodeErrorMessage
9666
+ }
9667
+ ) })
9668
+ ]
9669
+ }
9670
+ )
9671
+ }
9672
+ ),
9673
+ /* @__PURE__ */ jsxRuntime.jsxs(
9674
+ "footer",
9675
+ {
9676
+ "data-slot": "withdraw-panel-simple-footer",
9677
+ "data-test-id": "earn-withdraw-form-view-simple-footer",
9678
+ className: footerBaseClasses,
9679
+ children: [
9680
+ onBack && /* @__PURE__ */ jsxRuntime.jsx(
9681
+ SecondaryButton,
9682
+ {
9683
+ type: "button",
9684
+ className: [
9685
+ "flex-1 h-12 rounded-[var(--deframe-widget-size-radius-sm)]",
9686
+ "text-[15px] text-[color:var(--deframe-widget-color-text-secondary)]",
9687
+ "border-[color:var(--deframe-widget-color-border-secondary)]",
9688
+ "outline-none",
9689
+ "transition-[background,color,border-color] duration-150",
9690
+ "hover:opacity-100",
9691
+ "hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_60%,transparent)]",
9692
+ "hover:text-[color:var(--deframe-widget-color-text-primary)]"
9693
+ ].join(" "),
9694
+ onClick: onBack,
9695
+ "aria-label": "Cancel withdrawal",
9696
+ children: "Cancel"
9697
+ }
9698
+ ),
9699
+ /* @__PURE__ */ jsxRuntime.jsx(
9700
+ PrimaryButton,
9701
+ {
9702
+ type: "submit",
9703
+ className: [
9704
+ "flex-1 h-12 rounded-[var(--deframe-widget-size-radius-sm)]",
9705
+ "border-none",
9706
+ "text-[15px]",
9707
+ isSubmitDisabled ? "text-[color:var(--deframe-widget-color-text-primary-disabled)]" : "text-[color:var(--deframe-widget-color-text-primary-dark)]",
9708
+ "outline-none",
9709
+ "transition-[background,color] duration-200"
9710
+ ].join(" "),
9711
+ disabled: isSubmitDisabled,
9712
+ "aria-disabled": isSubmitDisabled,
9713
+ "aria-label": submitButtonText,
9714
+ children: submitButtonText
9715
+ }
9716
+ )
9717
+ ]
9718
+ }
9719
+ )
9720
+ ] }),
9721
+ /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: showTxStatus && /* @__PURE__ */ jsxRuntime.jsx(
9722
+ framerMotion.motion.div,
9723
+ {
9724
+ "data-slot": "withdraw-simple-tx-overlay",
9725
+ "data-test-id": "earn-withdraw-form-view-simple-tx-overlay",
9726
+ initial: { opacity: 0 },
9727
+ animate: { opacity: 1 },
9728
+ exit: { opacity: 0 },
9729
+ transition: { duration: 0.2, ease: "easeOut" },
9730
+ className: "absolute inset-0 z-10 flex items-center justify-center bg-[var(--deframe-widget-color-bg-primary)]",
9731
+ children: /* @__PURE__ */ jsxRuntime.jsx(
9732
+ EarnTxStatusCardView,
9733
+ {
9734
+ statusLabel: txStatusLabel,
9735
+ isProcessing: isTxProcessing,
9736
+ successMessage: isTxSuccess ? txSuccessMessage : void 0,
9737
+ errorMessage: isTxError ? txErrorMessage : void 0
9738
+ }
9739
+ )
9740
+ }
9741
+ ) })
9742
+ ]
9743
+ }
9744
+ );
9745
+ };
8750
9746
  var EarnDepositProcessingView = ({
8751
9747
  progress,
8752
9748
  title,
@@ -8765,49 +9761,500 @@ var EarnDepositProcessingView = ({
8765
9761
  processingDetailsLabels
8766
9762
  }) => {
8767
9763
  return /* @__PURE__ */ jsxRuntime.jsxs(
8768
- TransactionScreen,
9764
+ TransactionScreen,
9765
+ {
9766
+ progress,
9767
+ iconType: "processing",
9768
+ title,
9769
+ description: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
9770
+ descriptionPrefix,
9771
+ " ",
9772
+ /* @__PURE__ */ jsxRuntime.jsx(
9773
+ "span",
9774
+ {
9775
+ className: "[font-weight:var(--deframe-widget-font-weight-semibold)] underline underline-offset-2 cursor-pointer text-[color:var(--deframe-widget-color-brand-primary)]",
9776
+ onClick: onGoToHistory,
9777
+ children: activityHistoryText
9778
+ }
9779
+ )
9780
+ ] }),
9781
+ onBack,
9782
+ children: [
9783
+ /* @__PURE__ */ jsxRuntime.jsx(
9784
+ TransactionScreenInvestmentCard,
9785
+ {
9786
+ strategyName,
9787
+ apyLabel,
9788
+ apyValue,
9789
+ iconSrc,
9790
+ iconAlt,
9791
+ amountUSD,
9792
+ amountToken
9793
+ }
9794
+ ),
9795
+ /* @__PURE__ */ jsxRuntime.jsx(
9796
+ TransactionProcessingDetails,
9797
+ {
9798
+ steps: transactionSteps,
9799
+ defaultOpen: true,
9800
+ className: "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-primary)]",
9801
+ labels: processingDetailsLabels
9802
+ }
9803
+ )
9804
+ ]
9805
+ }
9806
+ );
9807
+ };
9808
+ function EarnFormSkeleton() {
9809
+ const headerClasses = [
9810
+ "flex items-center",
9811
+ "px-[var(--deframe-widget-size-padding-x-md)]",
9812
+ "py-[var(--deframe-widget-size-padding-y-md)]"
9813
+ ].join(" ");
9814
+ const titleClasses = [
9815
+ "flex-1",
9816
+ "text-[15px]",
9817
+ "[font-weight:var(--deframe-widget-font-weight-semibold)]",
9818
+ "text-[color:var(--deframe-widget-color-text-primary)]"
9819
+ ].join(" ");
9820
+ const dividerClasses = "h-px bg-[var(--deframe-widget-color-border-secondary)]";
9821
+ const bodyClasses = [
9822
+ "flex flex-col",
9823
+ "gap-[var(--deframe-widget-size-gap-md)]",
9824
+ "px-[var(--deframe-widget-size-padding-x-md)]",
9825
+ "py-[var(--deframe-widget-size-padding-y-md)]"
9826
+ ].join(" ");
9827
+ const inputCardClasses = tailwindMerge.twMerge(
9828
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
9829
+ "border border-[color:var(--deframe-widget-color-border-secondary)]",
9830
+ "bg-[var(--deframe-widget-color-bg-secondary)]",
9831
+ "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]"
9832
+ );
9833
+ const footerClasses = [
9834
+ "flex gap-[var(--deframe-widget-size-gap-sm)]",
9835
+ "px-[var(--deframe-widget-size-padding-x-md)]",
9836
+ "pb-[var(--deframe-widget-size-padding-y-md)]"
9837
+ ].join(" ");
9838
+ return /* @__PURE__ */ jsxRuntime.jsxs(
9839
+ "div",
9840
+ {
9841
+ "data-test-id": "earn-form-skeleton",
9842
+ className: "flex flex-col font-[var(--deframe-widget-font-family)]",
9843
+ children: [
9844
+ /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "earn-form-skeleton-header", className: headerClasses, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: titleClasses, children: "Deposit" }) }),
9845
+ /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "earn-form-skeleton-divider", className: dividerClasses }),
9846
+ /* @__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: [
9847
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)]", children: [
9848
+ /* @__PURE__ */ jsxRuntime.jsxs(
9849
+ "div",
9850
+ {
9851
+ className: tailwindMerge.twMerge(
9852
+ "inline-flex items-center gap-[10px]",
9853
+ "py-[var(--deframe-widget-size-padding-y-sm)] px-[10px]",
9854
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
9855
+ "bg-[var(--deframe-widget-color-bg-tertiary)]",
9856
+ "flex-shrink-0"
9857
+ ),
9858
+ children: [
9859
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-shrink-0 w-[38px] h-[38px]", children: [
9860
+ /* @__PURE__ */ jsxRuntime.jsx(
9861
+ "div",
9862
+ {
9863
+ className: "w-full h-full rounded-[var(--deframe-widget-size-radius-full)] bg-[var(--deframe-widget-color-bg-tertiary)] flex items-center justify-center text-[12px] [font-weight:var(--deframe-widget-font-weight-bold)] text-[color:var(--deframe-widget-color-text-primary)]",
9864
+ children: "US"
9865
+ }
9866
+ ),
9867
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -bottom-0.5 -right-0.5 w-4 h-4 rounded-[var(--deframe-widget-size-radius-full)] bg-[var(--deframe-widget-color-bg-tertiary)] shadow-[0_0_0_2px_var(--deframe-widget-color-bg-secondary)]" })
9868
+ ] }),
9869
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start min-w-0", children: [
9870
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[16px] [font-weight:var(--deframe-widget-font-weight-semibold)] leading-[1.2] font-[var(--deframe-widget-font-family)] text-[color:var(--deframe-widget-color-text-primary)]", children: "USDC" }),
9871
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] [font-weight:var(--deframe-widget-font-weight-medium)] text-[color:var(--deframe-widget-color-text-tertiary)] uppercase tracking-[0.04em] font-[var(--deframe-widget-font-family)] leading-[1.2]", children: "Arbitrum" })
9872
+ ] })
9873
+ ]
9874
+ }
9875
+ ),
9876
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-10 bg-[var(--deframe-widget-color-border-secondary)] flex-shrink-0" }),
9877
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end flex-1 min-w-0", children: [
9878
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[36px] [font-weight:var(--deframe-widget-font-weight-semibold)] [line-height:1.1] text-[color:var(--deframe-widget-color-text-primary)] text-right w-full font-[var(--deframe-widget-font-family)]", children: "500" }),
9879
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]", children: "\u2248 $499.87" })
9880
+ ] })
9881
+ ] }),
9882
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-[var(--deframe-widget-size-gap-sm)]", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)]", children: "Available: 1,250.00 USDC" }) })
9883
+ ] }) }),
9884
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": "earn-form-skeleton-footer", className: footerClasses, children: [
9885
+ /* @__PURE__ */ jsxRuntime.jsx(
9886
+ "div",
9887
+ {
9888
+ "data-test-id": "earn-form-skeleton-cancel-btn",
9889
+ className: tailwindMerge.twMerge(
9890
+ "flex-1 h-12",
9891
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
9892
+ "border border-[color:var(--deframe-widget-color-border-secondary)]",
9893
+ "flex items-center justify-center",
9894
+ "text-[15px] [font-weight:var(--deframe-widget-font-weight-semibold)]",
9895
+ "text-[color:var(--deframe-widget-color-text-secondary)]"
9896
+ ),
9897
+ children: "Cancel"
9898
+ }
9899
+ ),
9900
+ /* @__PURE__ */ jsxRuntime.jsx(
9901
+ "div",
9902
+ {
9903
+ "data-test-id": "earn-form-skeleton-submit-btn",
9904
+ className: tailwindMerge.twMerge(
9905
+ "flex-1 h-12",
9906
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
9907
+ "bg-[var(--deframe-widget-color-brand-primary)]",
9908
+ "flex items-center justify-center",
9909
+ "text-[15px] [font-weight:var(--deframe-widget-font-weight-semibold)]",
9910
+ "text-[color:var(--deframe-widget-color-text-primary-dark)]"
9911
+ ),
9912
+ children: "Deposit"
9913
+ }
9914
+ )
9915
+ ] })
9916
+ ]
9917
+ }
9918
+ );
9919
+ }
9920
+ function EarnFeedbackOverlaySimpleView({
9921
+ variant,
9922
+ title,
9923
+ subtitle
9924
+ }) {
9925
+ const isLoading = variant === "loading";
9926
+ const wrapperClasses = tailwindMerge.twMerge(
9927
+ "relative flex flex-col overflow-hidden w-[420px]",
9928
+ "rounded-[var(--deframe-widget-size-radius-md)]",
9929
+ "border border-[color:var(--deframe-widget-color-border-secondary)]",
9930
+ "font-[var(--deframe-widget-font-family)]"
9931
+ );
9932
+ const overlayClasses = tailwindMerge.twMerge(
9933
+ "absolute inset-0 z-10",
9934
+ "flex flex-col items-center justify-center",
9935
+ "gap-[var(--deframe-widget-size-gap-lg)]",
9936
+ "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-lg)]",
9937
+ "rounded-[inherit]",
9938
+ "backdrop-blur-[12px] [-webkit-backdrop-filter:blur(12px)]",
9939
+ "bg-[color-mix(in_srgb,var(--deframe-widget-color-bg-primary)_88%,transparent)]"
9940
+ );
9941
+ const textSectionClasses = tailwindMerge.twMerge(
9942
+ "flex flex-col items-center",
9943
+ "gap-[var(--deframe-widget-size-gap-sm)] text-center"
9944
+ );
9945
+ const titleClasses = tailwindMerge.twMerge(
9946
+ 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]"
9947
+ );
9948
+ const subtitleClasses = tailwindMerge.twMerge(
9949
+ "[font-size:var(--deframe-widget-font-size-md)] [line-height:1.6]",
9950
+ "[font-weight:var(--deframe-widget-font-weight-regular)]",
9951
+ "font-[var(--deframe-widget-font-family)]",
9952
+ "text-[color:var(--deframe-widget-color-text-secondary)]",
9953
+ "max-w-[260px]"
9954
+ );
9955
+ return /* @__PURE__ */ jsxRuntime.jsxs(
9956
+ "div",
9957
+ {
9958
+ "data-test-id": "earn-feedback-overlay-wrapper",
9959
+ "data-slot": "earn-feedback-overlay-wrapper",
9960
+ className: wrapperClasses,
9961
+ children: [
9962
+ /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "earn-feedback-overlay-skeleton", children: /* @__PURE__ */ jsxRuntime.jsx(EarnFormSkeleton, {}) }),
9963
+ /* @__PURE__ */ jsxRuntime.jsxs(
9964
+ framerMotion.motion.div,
9965
+ {
9966
+ "data-test-id": "earn-feedback-overlay",
9967
+ "data-slot": "earn-feedback-overlay",
9968
+ initial: { opacity: 0 },
9969
+ animate: { opacity: 1 },
9970
+ exit: { opacity: 0 },
9971
+ transition: { duration: 0.2 },
9972
+ className: overlayClasses,
9973
+ children: [
9974
+ isLoading && /* @__PURE__ */ jsxRuntime.jsx(LoadingIcon2, {}),
9975
+ variant === "success" && /* @__PURE__ */ jsxRuntime.jsx(SuccessIcon2, {}),
9976
+ variant === "warning" && /* @__PURE__ */ jsxRuntime.jsx(WarningIcon2, {}),
9977
+ variant === "error" && /* @__PURE__ */ jsxRuntime.jsx(ErrorIcon2, {}),
9978
+ /* @__PURE__ */ jsxRuntime.jsxs(
9979
+ "div",
9980
+ {
9981
+ "data-test-id": "earn-feedback-text",
9982
+ "data-slot": "earn-feedback-text",
9983
+ className: textSectionClasses,
9984
+ children: [
9985
+ /* @__PURE__ */ jsxRuntime.jsx(
9986
+ "span",
9987
+ {
9988
+ "data-test-id": "earn-feedback-title",
9989
+ "data-slot": "earn-feedback-title",
9990
+ className: titleClasses,
9991
+ children: title
9992
+ }
9993
+ ),
9994
+ subtitle && /* @__PURE__ */ jsxRuntime.jsx(
9995
+ "span",
9996
+ {
9997
+ "data-test-id": "earn-feedback-subtitle",
9998
+ "data-slot": "earn-feedback-subtitle",
9999
+ className: subtitleClasses,
10000
+ children: subtitle
10001
+ }
10002
+ )
10003
+ ]
10004
+ }
10005
+ )
10006
+ ]
10007
+ },
10008
+ "earn-feedback-overlay"
10009
+ )
10010
+ ]
10011
+ }
10012
+ );
10013
+ }
10014
+ function LoadingIcon2() {
10015
+ const green = "var(--deframe-widget-color-brand-primary)";
10016
+ const trackColor = "color-mix(in srgb, var(--deframe-widget-color-brand-primary) 12%, transparent)";
10017
+ const sw = 2.8;
10018
+ const aw = 2.4;
10019
+ return /* @__PURE__ */ jsxRuntime.jsxs(
10020
+ framerMotion.motion.svg,
8769
10021
  {
8770
- progress,
8771
- iconType: "processing",
8772
- title,
8773
- description: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
8774
- descriptionPrefix,
8775
- " ",
10022
+ "data-test-id": "earn-feedback-loading-icon",
10023
+ "data-slot": "earn-feedback-loading-icon",
10024
+ width: "56",
10025
+ height: "56",
10026
+ viewBox: "0 0 56 56",
10027
+ fill: "none",
10028
+ "aria-hidden": "true",
10029
+ animate: { rotate: 360 },
10030
+ transition: { duration: 1.6, repeat: Infinity, ease: "linear" },
10031
+ children: [
10032
+ /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "28", cy: "28", r: "22", stroke: trackColor, strokeWidth: sw }),
8776
10033
  /* @__PURE__ */ jsxRuntime.jsx(
8777
- "span",
10034
+ "path",
8778
10035
  {
8779
- className: "[font-weight:var(--deframe-widget-font-weight-semibold)] underline underline-offset-2 cursor-pointer text-[color:var(--deframe-widget-color-brand-primary)]",
8780
- onClick: onGoToHistory,
8781
- children: activityHistoryText
10036
+ d: "M 6.75 22.31 A 22 22 0 0 1 49.25 22.31",
10037
+ stroke: green,
10038
+ strokeWidth: sw,
10039
+ strokeLinecap: "round"
8782
10040
  }
8783
- )
8784
- ] }),
8785
- onBack,
8786
- children: [
10041
+ ),
8787
10042
  /* @__PURE__ */ jsxRuntime.jsx(
8788
- TransactionScreenInvestmentCard,
10043
+ "path",
8789
10044
  {
8790
- strategyName,
8791
- apyLabel,
8792
- apyValue,
8793
- iconSrc,
8794
- iconAlt,
8795
- amountUSD,
8796
- amountToken
10045
+ d: "M 45.0 18.1 L 49.25 22.31 L 51.0 16.5",
10046
+ stroke: green,
10047
+ strokeWidth: aw,
10048
+ strokeLinecap: "round",
10049
+ strokeLinejoin: "round"
8797
10050
  }
8798
10051
  ),
8799
10052
  /* @__PURE__ */ jsxRuntime.jsx(
8800
- TransactionProcessingDetails,
10053
+ "path",
8801
10054
  {
8802
- steps: transactionSteps,
8803
- defaultOpen: true,
8804
- className: "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-primary)]",
8805
- labels: processingDetailsLabels
10055
+ d: "M 49.25 33.69 A 22 22 0 0 1 6.75 33.69",
10056
+ stroke: green,
10057
+ strokeWidth: sw,
10058
+ strokeLinecap: "round"
10059
+ }
10060
+ ),
10061
+ /* @__PURE__ */ jsxRuntime.jsx(
10062
+ "path",
10063
+ {
10064
+ d: "M 11.0 37.9 L 6.75 33.69 L 5.0 39.5",
10065
+ stroke: green,
10066
+ strokeWidth: aw,
10067
+ strokeLinecap: "round",
10068
+ strokeLinejoin: "round"
8806
10069
  }
8807
10070
  )
8808
10071
  ]
8809
10072
  }
8810
10073
  );
10074
+ }
10075
+ function SuccessIcon2() {
10076
+ return /* @__PURE__ */ jsxRuntime.jsx(
10077
+ framerMotion.motion.div,
10078
+ {
10079
+ "data-test-id": "earn-feedback-success-icon",
10080
+ "data-slot": "earn-feedback-success-icon",
10081
+ initial: { scale: 0.55, opacity: 0 },
10082
+ animate: { scale: 1, opacity: 1 },
10083
+ transition: { type: "spring", stiffness: 300, damping: 20, delay: 0.05 },
10084
+ className: tailwindMerge.twMerge(
10085
+ "flex items-center justify-center shrink-0",
10086
+ "w-[64px] h-[64px] rounded-full"
10087
+ ),
10088
+ style: {
10089
+ background: "var(--deframe-widget-color-state-success)",
10090
+ boxShadow: "0 0 0 7px color-mix(in srgb, var(--deframe-widget-color-state-success) 12%, transparent), 0 0 24px color-mix(in srgb, var(--deframe-widget-color-state-success) 22%, transparent)"
10091
+ },
10092
+ children: /* @__PURE__ */ jsxRuntime.jsx(
10093
+ "svg",
10094
+ {
10095
+ width: "36",
10096
+ height: "36",
10097
+ viewBox: "0 0 44 44",
10098
+ fill: "none",
10099
+ "aria-hidden": "true",
10100
+ children: /* @__PURE__ */ jsxRuntime.jsx(
10101
+ framerMotion.motion.path,
10102
+ {
10103
+ d: "M10 22 L18 30 L34 14",
10104
+ stroke: "white",
10105
+ strokeWidth: "3.5",
10106
+ strokeLinecap: "round",
10107
+ strokeLinejoin: "round",
10108
+ initial: { pathLength: 0 },
10109
+ animate: { pathLength: 1 },
10110
+ transition: { duration: 0.45, delay: 0.2, ease: "easeOut" }
10111
+ }
10112
+ )
10113
+ }
10114
+ )
10115
+ }
10116
+ );
10117
+ }
10118
+ function ErrorIcon2() {
10119
+ return /* @__PURE__ */ jsxRuntime.jsx(
10120
+ framerMotion.motion.div,
10121
+ {
10122
+ "data-test-id": "earn-feedback-error-icon",
10123
+ "data-slot": "earn-feedback-error-icon",
10124
+ initial: { scale: 0.55, opacity: 0 },
10125
+ animate: { scale: 1, opacity: 1 },
10126
+ transition: { type: "spring", stiffness: 300, damping: 20, delay: 0.05 },
10127
+ className: tailwindMerge.twMerge(
10128
+ "flex items-center justify-center shrink-0",
10129
+ "w-[64px] h-[64px] rounded-full"
10130
+ ),
10131
+ style: {
10132
+ background: "var(--deframe-widget-color-state-error)",
10133
+ boxShadow: "0 0 0 7px color-mix(in srgb, var(--deframe-widget-color-state-error) 12%, transparent), 0 0 24px color-mix(in srgb, var(--deframe-widget-color-state-error) 22%, transparent)"
10134
+ },
10135
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
10136
+ "svg",
10137
+ {
10138
+ width: "36",
10139
+ height: "36",
10140
+ viewBox: "0 0 44 44",
10141
+ fill: "none",
10142
+ "aria-hidden": "true",
10143
+ children: [
10144
+ /* @__PURE__ */ jsxRuntime.jsx(
10145
+ framerMotion.motion.line,
10146
+ {
10147
+ x1: "14",
10148
+ y1: "14",
10149
+ x2: "30",
10150
+ y2: "30",
10151
+ stroke: "white",
10152
+ strokeWidth: "3.5",
10153
+ strokeLinecap: "round",
10154
+ initial: { pathLength: 0 },
10155
+ animate: { pathLength: 1 },
10156
+ transition: { duration: 0.25, delay: 0.2, ease: "easeOut" }
10157
+ }
10158
+ ),
10159
+ /* @__PURE__ */ jsxRuntime.jsx(
10160
+ framerMotion.motion.line,
10161
+ {
10162
+ x1: "30",
10163
+ y1: "14",
10164
+ x2: "14",
10165
+ y2: "30",
10166
+ stroke: "white",
10167
+ strokeWidth: "3.5",
10168
+ strokeLinecap: "round",
10169
+ initial: { pathLength: 0 },
10170
+ animate: { pathLength: 1 },
10171
+ transition: { duration: 0.25, delay: 0.38, ease: "easeOut" }
10172
+ }
10173
+ )
10174
+ ]
10175
+ }
10176
+ )
10177
+ }
10178
+ );
10179
+ }
10180
+ function WarningIcon2() {
10181
+ const amber = "var(--deframe-widget-color-state-warning)";
10182
+ const amberGlow = "color-mix(in srgb, var(--deframe-widget-color-state-warning) 12%, transparent)";
10183
+ const amberGlow2 = "color-mix(in srgb, var(--deframe-widget-color-state-warning) 22%, transparent)";
10184
+ return /* @__PURE__ */ jsxRuntime.jsx(
10185
+ framerMotion.motion.div,
10186
+ {
10187
+ "data-test-id": "earn-feedback-warning-icon",
10188
+ "data-slot": "earn-feedback-warning-icon",
10189
+ initial: { scale: 0.55, opacity: 0 },
10190
+ animate: { scale: 1, opacity: 1 },
10191
+ transition: { type: "spring", stiffness: 300, damping: 20, delay: 0.05 },
10192
+ className: tailwindMerge.twMerge(
10193
+ "flex items-center justify-center shrink-0",
10194
+ "w-[64px] h-[64px] rounded-full"
10195
+ ),
10196
+ style: {
10197
+ background: amber,
10198
+ boxShadow: `0 0 0 7px ${amberGlow}, 0 0 24px ${amberGlow2}`
10199
+ },
10200
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
10201
+ "svg",
10202
+ {
10203
+ width: "36",
10204
+ height: "36",
10205
+ viewBox: "0 0 44 44",
10206
+ fill: "none",
10207
+ "aria-hidden": "true",
10208
+ children: [
10209
+ /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "22", cy: "22", r: "13", stroke: "white", strokeWidth: "2.5" }),
10210
+ /* @__PURE__ */ jsxRuntime.jsx(
10211
+ framerMotion.motion.line,
10212
+ {
10213
+ x1: "22",
10214
+ y1: "22",
10215
+ x2: "22",
10216
+ y2: "13",
10217
+ stroke: "white",
10218
+ strokeWidth: "2.5",
10219
+ strokeLinecap: "round",
10220
+ initial: { pathLength: 0 },
10221
+ animate: { pathLength: 1 },
10222
+ transition: { duration: 0.3, delay: 0.2, ease: "easeOut" }
10223
+ }
10224
+ ),
10225
+ /* @__PURE__ */ jsxRuntime.jsx(
10226
+ framerMotion.motion.line,
10227
+ {
10228
+ x1: "22",
10229
+ y1: "22",
10230
+ x2: "31",
10231
+ y2: "22",
10232
+ stroke: "white",
10233
+ strokeWidth: "2.5",
10234
+ strokeLinecap: "round",
10235
+ initial: { pathLength: 0 },
10236
+ animate: { pathLength: 1 },
10237
+ transition: { duration: 0.3, delay: 0.38, ease: "easeOut" }
10238
+ }
10239
+ )
10240
+ ]
10241
+ }
10242
+ )
10243
+ }
10244
+ );
10245
+ }
10246
+ var EarnDepositProcessingSimpleView = ({
10247
+ title,
10248
+ descriptionPrefix
10249
+ }) => {
10250
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "earn-deposit-processing-simple-view", children: /* @__PURE__ */ jsxRuntime.jsx(
10251
+ EarnFeedbackOverlaySimpleView,
10252
+ {
10253
+ variant: "loading",
10254
+ title,
10255
+ subtitle: descriptionPrefix
10256
+ }
10257
+ ) });
8811
10258
  };
8812
10259
  var EarnDepositSuccessView = ({
8813
10260
  title,
@@ -8882,6 +10329,25 @@ var EarnDepositSuccessView = ({
8882
10329
  }
8883
10330
  );
8884
10331
  };
10332
+ var EarnDepositSuccessSimpleView = ({
10333
+ title,
10334
+ descriptionSuffix,
10335
+ onClose
10336
+ }) => {
10337
+ React6__namespace.default.useEffect(() => {
10338
+ if (!onClose) return;
10339
+ const timer = setTimeout(onClose, 5e3);
10340
+ return () => clearTimeout(timer);
10341
+ }, [onClose]);
10342
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "earn-deposit-success-simple-view", children: /* @__PURE__ */ jsxRuntime.jsx(
10343
+ EarnFeedbackOverlaySimpleView,
10344
+ {
10345
+ variant: "success",
10346
+ title,
10347
+ subtitle: descriptionSuffix
10348
+ }
10349
+ ) });
10350
+ };
8885
10351
  var EarnDepositWarningView = ({
8886
10352
  progress,
8887
10353
  title,
@@ -8941,6 +10407,25 @@ var EarnDepositWarningView = ({
8941
10407
  }
8942
10408
  );
8943
10409
  };
10410
+ var EarnDepositWarningSimpleView = ({
10411
+ title,
10412
+ description,
10413
+ onBack
10414
+ }) => {
10415
+ React6__namespace.default.useEffect(() => {
10416
+ if (!onBack) return;
10417
+ const timer = setTimeout(onBack, 5e3);
10418
+ return () => clearTimeout(timer);
10419
+ }, [onBack]);
10420
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "earn-deposit-warning-simple-view", children: /* @__PURE__ */ jsxRuntime.jsx(
10421
+ EarnFeedbackOverlaySimpleView,
10422
+ {
10423
+ variant: "warning",
10424
+ title,
10425
+ subtitle: description
10426
+ }
10427
+ ) });
10428
+ };
8944
10429
  var EarnDepositFailedView = ({
8945
10430
  progress,
8946
10431
  title,
@@ -9003,6 +10488,25 @@ var EarnDepositFailedView = ({
9003
10488
  }
9004
10489
  );
9005
10490
  };
10491
+ var EarnDepositFailedSimpleView = ({
10492
+ title,
10493
+ description,
10494
+ onBack
10495
+ }) => {
10496
+ React6__namespace.default.useEffect(() => {
10497
+ if (!onBack) return;
10498
+ const timer = setTimeout(onBack, 5e3);
10499
+ return () => clearTimeout(timer);
10500
+ }, [onBack]);
10501
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "earn-deposit-failed-simple-view", children: /* @__PURE__ */ jsxRuntime.jsx(
10502
+ EarnFeedbackOverlaySimpleView,
10503
+ {
10504
+ variant: "error",
10505
+ title,
10506
+ subtitle: description
10507
+ }
10508
+ ) });
10509
+ };
9006
10510
  var EarnWithdrawProcessingView = ({
9007
10511
  progress,
9008
10512
  title,
@@ -9068,6 +10572,19 @@ var EarnWithdrawProcessingView = ({
9068
10572
  }
9069
10573
  );
9070
10574
  };
10575
+ var EarnWithdrawProcessingSimpleView = ({
10576
+ title,
10577
+ descriptionPrefix
10578
+ }) => {
10579
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "earn-withdraw-processing-simple-view", children: /* @__PURE__ */ jsxRuntime.jsx(
10580
+ EarnFeedbackOverlaySimpleView,
10581
+ {
10582
+ variant: "loading",
10583
+ title,
10584
+ subtitle: descriptionPrefix
10585
+ }
10586
+ ) });
10587
+ };
9071
10588
  var EarnWithdrawSuccessView = ({
9072
10589
  title,
9073
10590
  descriptionPrefix,
@@ -9134,6 +10651,25 @@ var EarnWithdrawSuccessView = ({
9134
10651
  }
9135
10652
  );
9136
10653
  };
10654
+ var EarnWithdrawSuccessSimpleView = ({
10655
+ title,
10656
+ descriptionSuffix,
10657
+ onClose
10658
+ }) => {
10659
+ React6__namespace.default.useEffect(() => {
10660
+ if (!onClose) return;
10661
+ const timer = setTimeout(onClose, 5e3);
10662
+ return () => clearTimeout(timer);
10663
+ }, [onClose]);
10664
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "earn-withdraw-success-simple-view", children: /* @__PURE__ */ jsxRuntime.jsx(
10665
+ EarnFeedbackOverlaySimpleView,
10666
+ {
10667
+ variant: "success",
10668
+ title,
10669
+ subtitle: descriptionSuffix
10670
+ }
10671
+ ) });
10672
+ };
9137
10673
  var EarnWithdrawWarningView = ({
9138
10674
  progress,
9139
10675
  title,
@@ -9193,6 +10729,25 @@ var EarnWithdrawWarningView = ({
9193
10729
  }
9194
10730
  );
9195
10731
  };
10732
+ var EarnWithdrawWarningSimpleView = ({
10733
+ title,
10734
+ description,
10735
+ onBack
10736
+ }) => {
10737
+ React6__namespace.default.useEffect(() => {
10738
+ if (!onBack) return;
10739
+ const timer = setTimeout(onBack, 5e3);
10740
+ return () => clearTimeout(timer);
10741
+ }, [onBack]);
10742
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "earn-withdraw-warning-simple-view", children: /* @__PURE__ */ jsxRuntime.jsx(
10743
+ EarnFeedbackOverlaySimpleView,
10744
+ {
10745
+ variant: "warning",
10746
+ title,
10747
+ subtitle: description
10748
+ }
10749
+ ) });
10750
+ };
9196
10751
  var EarnWithdrawFailedView = ({
9197
10752
  progress,
9198
10753
  title,
@@ -9255,6 +10810,25 @@ var EarnWithdrawFailedView = ({
9255
10810
  }
9256
10811
  );
9257
10812
  };
10813
+ var EarnWithdrawFailedSimpleView = ({
10814
+ title,
10815
+ description,
10816
+ onBack
10817
+ }) => {
10818
+ React6__namespace.default.useEffect(() => {
10819
+ if (!onBack) return;
10820
+ const timer = setTimeout(onBack, 5e3);
10821
+ return () => clearTimeout(timer);
10822
+ }, [onBack]);
10823
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "earn-withdraw-failed-simple-view", children: /* @__PURE__ */ jsxRuntime.jsx(
10824
+ EarnFeedbackOverlaySimpleView,
10825
+ {
10826
+ variant: "error",
10827
+ title,
10828
+ subtitle: description
10829
+ }
10830
+ ) });
10831
+ };
9258
10832
  var DashboardCard = ({ children, className }) => {
9259
10833
  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "dashboard-card", className: tailwindMerge.twMerge("bg-[var(--deframe-widget-color-bg-subtle)] rounded", className), children });
9260
10834
  };
@@ -10579,13 +12153,19 @@ exports.DetailsHeader = DetailsHeader;
10579
12153
  exports.EarnAmountInputView = EarnAmountInputView;
10580
12154
  exports.EarnBalanceCard = EarnBalanceCard;
10581
12155
  exports.EarnBytecodeErrorView = EarnBytecodeErrorView;
12156
+ exports.EarnDepositFailedSimpleView = EarnDepositFailedSimpleView;
10582
12157
  exports.EarnDepositFailedView = EarnDepositFailedView;
10583
12158
  exports.EarnDepositFormView = EarnDepositFormView;
12159
+ exports.EarnDepositFormViewSimple = EarnDepositFormViewSimple;
12160
+ exports.EarnDepositProcessingSimpleView = EarnDepositProcessingSimpleView;
10584
12161
  exports.EarnDepositProcessingView = EarnDepositProcessingView;
12162
+ exports.EarnDepositSuccessSimpleView = EarnDepositSuccessSimpleView;
10585
12163
  exports.EarnDepositSuccessView = EarnDepositSuccessView;
12164
+ exports.EarnDepositWarningSimpleView = EarnDepositWarningSimpleView;
10586
12165
  exports.EarnDepositWarningView = EarnDepositWarningView;
10587
12166
  exports.EarnDesktopView = EarnDesktopView;
10588
12167
  exports.EarnExploreGridView = EarnExploreGridView;
12168
+ exports.EarnFlowSkeletonSimple = EarnFlowSkeletonSimple;
10589
12169
  exports.EarnInvestedSectionView = EarnInvestedSectionView;
10590
12170
  exports.EarnInvestmentDetailsView = EarnInvestmentDetailsView;
10591
12171
  exports.EarnInvestmentSummaryView = EarnInvestmentSummaryView;
@@ -10596,11 +12176,16 @@ exports.EarnPositionCardView = EarnPositionCardView;
10596
12176
  exports.EarnRecentTransactionsView = EarnRecentTransactionsView;
10597
12177
  exports.EarnTokenSelectorView = EarnTokenSelectorView;
10598
12178
  exports.EarnTxStatusCardView = EarnTxStatusCardView;
12179
+ exports.EarnWithdrawFailedSimpleView = EarnWithdrawFailedSimpleView;
10599
12180
  exports.EarnWithdrawFailedView = EarnWithdrawFailedView;
10600
12181
  exports.EarnWithdrawFormView = EarnWithdrawFormView;
12182
+ exports.EarnWithdrawFormViewSimple = EarnWithdrawFormViewSimple;
12183
+ exports.EarnWithdrawProcessingSimpleView = EarnWithdrawProcessingSimpleView;
10601
12184
  exports.EarnWithdrawProcessingView = EarnWithdrawProcessingView;
12185
+ exports.EarnWithdrawSuccessSimpleView = EarnWithdrawSuccessSimpleView;
10602
12186
  exports.EarnWithdrawSuccessView = EarnWithdrawSuccessView;
10603
12187
  exports.EarnWithdrawTokenSelectorView = EarnWithdrawTokenSelectorView;
12188
+ exports.EarnWithdrawWarningSimpleView = EarnWithdrawWarningSimpleView;
10604
12189
  exports.EarnWithdrawWarningView = EarnWithdrawWarningView;
10605
12190
  exports.Fiat = Currency;
10606
12191
  exports.FlexCol = FlexCol;