@deframe-sdk/components 0.1.24 → 0.1.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/index.d.mts +22 -2
  2. package/dist/index.d.ts +22 -2
  3. package/dist/index.js +1768 -219
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +1672 -130
  6. package/dist/index.mjs.map +1 -1
  7. package/dist/styles.css +232 -21
  8. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -8,9 +8,6 @@ var framerMotion = require('framer-motion');
8
8
  var md = require('react-icons/md');
9
9
  var io5 = require('react-icons/io5');
10
10
  var pi = require('react-icons/pi');
11
- var Link2 = require('next/link');
12
-
13
- function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
14
11
 
15
12
  function _interopNamespace(e) {
16
13
  if (e && e.__esModule) return e;
@@ -31,7 +28,6 @@ function _interopNamespace(e) {
31
28
  }
32
29
 
33
30
  var React6__namespace = /*#__PURE__*/_interopNamespace(React6);
34
- var Link2__default = /*#__PURE__*/_interopDefault(Link2);
35
31
 
36
32
  var __defProp = Object.defineProperty;
37
33
  var __defProps = Object.defineProperties;
@@ -2961,10 +2957,10 @@ var StrategyDetailsView = ({
2961
2957
  notFoundMessage
2962
2958
  }) => {
2963
2959
  if (error) {
2964
- 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 }) });
2965
2961
  }
2966
2962
  if (notFoundMessage) {
2967
- 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 }) });
2968
2964
  }
2969
2965
  return /* @__PURE__ */ jsxRuntime.jsxs(BackgroundContainer, { children: [
2970
2966
  /* @__PURE__ */ jsxRuntime.jsx(DetailsHeader, { title: headerTitle, onBack, backAriaLabel }),
@@ -4485,13 +4481,13 @@ var SwapFromCardView = ({
4485
4481
  TextBody,
4486
4482
  {
4487
4483
  variant: "text-small",
4488
- 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)]",
4489
4485
  children: onBalanceClick ? /* @__PURE__ */ jsxRuntime.jsxs(
4490
4486
  "button",
4491
4487
  {
4492
4488
  type: "button",
4493
4489
  onClick: onBalanceClick,
4494
- 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",
4495
4491
  "data-testid": "swap-from-balance",
4496
4492
  children: [
4497
4493
  labels.balanceLabel,
@@ -4540,7 +4536,7 @@ var SwapFromCardView = ({
4540
4536
  {
4541
4537
  as: "span",
4542
4538
  variant: "text-small",
4543
- 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)]",
4544
4540
  children: isAmountUsdLoading ? /* @__PURE__ */ jsxRuntime.jsx(LoadingDots, {}) : amountUsdFormatted
4545
4541
  }
4546
4542
  )
@@ -4590,7 +4586,7 @@ var SwapToCardView = ({
4590
4586
  TextBody,
4591
4587
  {
4592
4588
  variant: "text-small",
4593
- 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)]",
4594
4590
  children: /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-testid": "swap-to-balance", children: [
4595
4591
  labels.balanceLabel,
4596
4592
  ": ",
@@ -4627,7 +4623,7 @@ var SwapToCardView = ({
4627
4623
  {
4628
4624
  as: "span",
4629
4625
  variant: "text-small",
4630
- 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)]",
4631
4627
  children: isOutputUsdLoading ? /* @__PURE__ */ jsxRuntime.jsx(LoadingDots, {}) : outputUsdFormatted
4632
4628
  }
4633
4629
  )
@@ -4903,7 +4899,7 @@ var SwapFormView = ({
4903
4899
  {
4904
4900
  "data-testid": "swap-form-view",
4905
4901
  className: "flex-1 min-h-0 overflow-y-auto swap-flow-content pr-sm",
4906
- 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: [
4907
4903
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-md", children: [
4908
4904
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-sm", children: [
4909
4905
  /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h5", className: "!text-[21px]", children: /* @__PURE__ */ jsxRuntime.jsx("span", { "data-testid": "swap-flow-title", children: labels.title }) }),
@@ -4915,7 +4911,7 @@ var SwapFormView = ({
4915
4911
  "data-testid": "swap-history-button",
4916
4912
  type: "button",
4917
4913
  onClick: onHistoryClick,
4918
- 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",
4919
4915
  "aria-label": labels.historyAriaLabel,
4920
4916
  children: /* @__PURE__ */ jsxRuntime.jsx(md.MdHistory, { className: "w-6 h-6" })
4921
4917
  }
@@ -4929,7 +4925,7 @@ var SwapFormView = ({
4929
4925
  "data-testid": "swap-switch-tokens-button",
4930
4926
  type: "button",
4931
4927
  onClick: onSwitchTokens,
4932
- 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",
4933
4929
  "aria-label": switchTokensAriaLabel,
4934
4930
  children: /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineSwapVert, { className: "w-5 h-5" })
4935
4931
  }
@@ -4945,7 +4941,7 @@ var SwapFormView = ({
4945
4941
  "div",
4946
4942
  {
4947
4943
  "data-testid": "swap-flow-footer",
4948
- 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)]",
4949
4945
  children: /* @__PURE__ */ jsxRuntime.jsx(ConfirmSwapButtonView, __spreadValues({}, confirmButton))
4950
4946
  }
4951
4947
  )
@@ -7486,27 +7482,27 @@ var ApyRange = ({ children }) => {
7486
7482
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right justify-center text-text-highlight text-xs font-normal leading-4", children });
7487
7483
  };
7488
7484
  var variantStyles = {
7489
- primary: "text-text-primary dark:text-text-primary-dark text-text-md",
7490
- 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"
7491
7487
  };
7492
7488
  var Label = ({ children, variant = "primary", className }) => {
7493
7489
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: tailwindMerge.twMerge(variantStyles[variant], className), children });
7494
7490
  };
7495
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: [
7496
7492
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-sm flex-1 min-w-0", children: [
7497
- /* @__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" }),
7498
7494
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-xs flex-1 min-w-0", children: [
7499
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-32 h-4 bg-bg-muted dark:bg-bg-muted-dark rounded animate-pulse" }),
7500
- /* @__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" })
7501
7497
  ] })
7502
7498
  ] }),
7503
7499
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end gap-xs flex-shrink-0 ml-sm", children: [
7504
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-20 h-4 bg-bg-muted dark:bg-bg-muted-dark rounded animate-pulse" }),
7505
- /* @__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" })
7506
7502
  ] })
7507
7503
  ] });
7508
7504
  var HistoryGroupSkeleton = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "self-stretch flex flex-col gap-xs", children: [
7509
- /* @__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" }),
7510
7506
  /* @__PURE__ */ jsxRuntime.jsx(HistoryItemSkeleton, {}),
7511
7507
  /* @__PURE__ */ jsxRuntime.jsx(HistoryItemSkeleton, {})
7512
7508
  ] });
@@ -7524,9 +7520,9 @@ var WalletBalances = ({ cards, variant = "subtle", className }) => {
7524
7520
  ] }) : /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h3", children: card.value })
7525
7521
  ] }, card.label)) });
7526
7522
  };
7527
- 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: [
7528
7524
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-center items-center gap-md text-center", children: [
7529
- /* @__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)]" }) }),
7530
7526
  /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h3", children: title })
7531
7527
  ] }),
7532
7528
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "self-stretch text-center", children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: description }) })
@@ -7607,7 +7603,7 @@ var EarnBalanceCard = ({
7607
7603
  ] })
7608
7604
  ] });
7609
7605
  };
7610
- 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 });
7611
7607
  var GroupedStrategyListView = ({
7612
7608
  isLoading,
7613
7609
  loadingLabel,
@@ -7728,17 +7724,17 @@ var GroupedStrategyListView = ({
7728
7724
  ] });
7729
7725
  };
7730
7726
  var DateLabel = ({ children }) => {
7731
- 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 });
7732
7728
  };
7733
7729
  var ArrowBadge = ({ isDeposit }) => {
7734
- 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)]" }) });
7735
7731
  };
7736
7732
  var TokenIconWithBadge2 = ({ src, alt, isDeposit }) => {
7737
7733
  const fallbackText = encodeURIComponent((alt || "TOK").slice(0, 3).toUpperCase());
7738
7734
  const fallbackSrc = `https://placehold.co/40x40?text=${fallbackText}`;
7739
7735
  const resolvedSrc = src || fallbackSrc;
7740
7736
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-shrink-0", children: [
7741
- /* @__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(
7742
7738
  "img",
7743
7739
  {
7744
7740
  src: resolvedSrc,
@@ -7757,7 +7753,7 @@ var SwapIconWithBadge = ({ src, alt }) => {
7757
7753
  const fallbackSrc = `https://placehold.co/40x40?text=${fallbackText}`;
7758
7754
  const resolvedSrc = src || fallbackSrc;
7759
7755
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-shrink-0", children: [
7760
- /* @__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(
7761
7757
  "img",
7762
7758
  {
7763
7759
  src: resolvedSrc,
@@ -7768,7 +7764,7 @@ var SwapIconWithBadge = ({ src, alt }) => {
7768
7764
  }
7769
7765
  }
7770
7766
  ) }),
7771
- /* @__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)]" }) })
7772
7768
  ] });
7773
7769
  };
7774
7770
  var AmountDisplay = ({ amount, usdAmount }) => {
@@ -7806,7 +7802,7 @@ var HistoryListView = ({
7806
7802
  ) }),
7807
7803
  /* @__PURE__ */ jsxRuntime.jsxs(ListItemContent, { children: [
7808
7804
  /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-text-lg-mobile", children: item.title }),
7809
- /* @__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 }),
7810
7806
  item.status === "PENDING" && item.statusLabel ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-[6px]", children: /* @__PURE__ */ jsxRuntime.jsx(
7811
7807
  ProcessingBadge,
7812
7808
  {
@@ -7941,7 +7937,7 @@ var EarnInvestmentSummaryView = ({
7941
7937
  className
7942
7938
  }) => {
7943
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: [
7944
- /* @__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 }),
7945
7941
  /* @__PURE__ */ jsxRuntime.jsx(
7946
7942
  WalletBalances,
7947
7943
  {
@@ -8132,7 +8128,7 @@ var EarnRecentTransactionsView = ({
8132
8128
  ),
8133
8129
  children: [
8134
8130
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
8135
- /* @__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 }),
8136
8132
  hasMore && onViewAll && /* @__PURE__ */ jsxRuntime.jsx(
8137
8133
  "button",
8138
8134
  {
@@ -8608,215 +8604,1631 @@ var EarnDepositFormView = ({
8608
8604
  ] })
8609
8605
  ] }) })
8610
8606
  ] });
8611
- var EarnWithdrawFormView = ({
8612
- // Header / Layout
8613
- headerTitle,
8614
- onBack,
8615
- progress,
8616
- pageTitle,
8617
- subtitle,
8618
- onSubmit,
8619
- // Position card
8620
- positionBalanceUSD,
8621
- positionBalanceToken,
8622
- strategyIcon,
8623
- strategyName,
8624
- // Token selector
8607
+ var EarnTokenSelectorSimpleView = ({
8625
8608
  selectedToken,
8626
8609
  onTokenClick,
8610
+ isLoading,
8627
8611
  selectTokenLabel,
8628
- // Chain selector
8629
8612
  chainLabel,
8630
- chainImage,
8631
- chainDirectionLabel,
8632
- chainDisabledTitle,
8633
- onNetworkClick,
8634
- isNetworkDisabled,
8635
- currentNetworkSelected,
8636
- // Amount input
8637
- amountValue,
8638
- onAmountChange,
8639
- amountAriaLabel,
8640
- dollarAmountFormatted,
8641
- // Percentage buttons
8642
- onPercentageClick,
8643
- maxLabel,
8644
- // TX status
8645
- showTxStatus,
8646
- txStatusLabel,
8647
- isTxProcessing,
8648
- isTxSuccess,
8649
- isTxError,
8650
- txSuccessMessage,
8651
- txErrorMessage,
8652
- // Bytecode error
8653
- bytecodeErrorMessage,
8654
- transactionErrorLabel,
8655
- // Quote details
8656
- isQuoteValid,
8657
- isFetchingQuote,
8658
- summaryTitle,
8659
- summaryItems,
8660
- // Submit button
8661
- submitDisabled,
8662
- submitButtonText
8663
- }) => /* @__PURE__ */ jsxRuntime.jsxs(BackgroundContainer, { children: [
8664
- /* @__PURE__ */ jsxRuntime.jsx(DetailsHeader, { title: headerTitle, onBack }),
8665
- /* @__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: [
8666
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full px-[var(--deframe-widget-size-padding-x-md)]", children: /* @__PURE__ */ jsxRuntime.jsx(ProgressIndicator, { progress }) }),
8667
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)] px-[var(--deframe-widget-size-padding-x-md)]", children: [
8668
- /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h5", children: pageTitle }),
8669
- /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: subtitle })
8670
- ] }),
8671
- /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit, children: [
8672
- /* @__PURE__ */ jsxRuntime.jsx(
8673
- EarnPositionCardView,
8674
- {
8675
- balanceUSD: positionBalanceUSD,
8676
- balanceToken: positionBalanceToken,
8677
- icon: strategyIcon,
8678
- iconAlt: strategyName
8679
- }
8680
- ),
8681
- /* @__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: [
8682
- /* @__PURE__ */ jsxRuntime.jsx(
8683
- EarnWithdrawTokenSelectorView,
8613
+ chainImage
8614
+ }) => {
8615
+ const hasToken = selectedToken != null;
8616
+ const isInteractive = !!onTokenClick;
8617
+ const baseClasses = [
8618
+ "inline-flex items-center gap-[10px]",
8619
+ "py-[var(--deframe-widget-size-padding-y-sm)] px-[10px]",
8620
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
8621
+ "bg-[var(--deframe-widget-color-bg-tertiary)]",
8622
+ "border-none outline-none",
8623
+ "transition-[background] duration-150",
8624
+ "flex-shrink-0"
8625
+ ].join(" ");
8626
+ const stateClasses = {
8627
+ interactive: "cursor-pointer hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_80%,var(--deframe-widget-color-border-secondary))]",
8628
+ static: "cursor-default"
8629
+ };
8630
+ const selectorClasses = tailwindMerge.twMerge(
8631
+ baseClasses,
8632
+ stateClasses[isInteractive ? "interactive" : "static"]
8633
+ );
8634
+ return /* @__PURE__ */ jsxRuntime.jsx(
8635
+ "button",
8636
+ {
8637
+ type: "button",
8638
+ "data-slot": "token-selector-simple",
8639
+ "data-test-id": "earn-token-selector-simple-view",
8640
+ onClick: onTokenClick,
8641
+ disabled: !isInteractive,
8642
+ "aria-label": hasToken ? `Select token \u2014 currently ${selectedToken.symbol} on ${chainLabel}` : selectTokenLabel,
8643
+ className: selectorClasses,
8644
+ children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(LoadingDots, {}) : hasToken ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
8645
+ /* @__PURE__ */ jsxRuntime.jsxs(
8646
+ "div",
8684
8647
  {
8685
- selectedToken,
8686
- onTokenClick,
8687
- selectTokenLabel,
8688
- chainLabel,
8689
- chainImage,
8690
- chainDirectionLabel,
8691
- chainDisabledTitle,
8692
- onNetworkClick,
8693
- isNetworkDisabled,
8694
- currentNetworkSelected
8648
+ "data-slot": "token-selector-simple-icon",
8649
+ "data-test-id": "earn-token-selector-simple-view-icon",
8650
+ className: "relative flex-shrink-0 w-[38px] h-[38px]",
8651
+ children: [
8652
+ selectedToken.logoURI ? /* @__PURE__ */ jsxRuntime.jsx(
8653
+ "img",
8654
+ {
8655
+ src: selectedToken.logoURI,
8656
+ alt: selectedToken.symbol,
8657
+ className: "w-full h-full rounded-[var(--deframe-widget-size-radius-full)] object-cover"
8658
+ }
8659
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
8660
+ "div",
8661
+ {
8662
+ "data-test-id": "earn-token-selector-simple-view-icon-fallback",
8663
+ "data-slot": "token-selector-simple-icon-fallback",
8664
+ className: [
8665
+ "w-full h-full",
8666
+ "rounded-[var(--deframe-widget-size-radius-full)]",
8667
+ "flex items-center justify-center",
8668
+ "bg-[var(--deframe-widget-color-bg-tertiary)]",
8669
+ "[font-weight:var(--deframe-widget-font-weight-bold)]",
8670
+ "text-[color:var(--deframe-widget-color-text-primary)]",
8671
+ "text-[12px]"
8672
+ ].join(" "),
8673
+ children: selectedToken.symbol.slice(0, 2).toUpperCase()
8674
+ }
8675
+ ),
8676
+ chainImage && /* @__PURE__ */ jsxRuntime.jsx(
8677
+ "div",
8678
+ {
8679
+ "data-slot": "token-selector-simple-chain-badge",
8680
+ "data-test-id": "earn-token-selector-simple-view-chain-badge",
8681
+ 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)]",
8682
+ children: /* @__PURE__ */ jsxRuntime.jsx(
8683
+ "img",
8684
+ {
8685
+ src: chainImage,
8686
+ alt: chainLabel,
8687
+ className: "w-full h-full rounded-[var(--deframe-widget-size-radius-full)] object-cover"
8688
+ }
8689
+ )
8690
+ }
8691
+ )
8692
+ ]
8695
8693
  }
8696
8694
  ),
8697
- /* @__PURE__ */ jsxRuntime.jsx(
8698
- EarnAmountInputView,
8695
+ /* @__PURE__ */ jsxRuntime.jsxs(
8696
+ "div",
8699
8697
  {
8700
- value: amountValue,
8701
- onChange: onAmountChange,
8702
- ariaLabel: amountAriaLabel,
8703
- dollarAmountFormatted
8698
+ "data-slot": "token-selector-simple-info",
8699
+ "data-test-id": "earn-token-selector-simple-view-info",
8700
+ className: "flex flex-col items-start min-w-0",
8701
+ children: [
8702
+ /* @__PURE__ */ jsxRuntime.jsx(
8703
+ "span",
8704
+ {
8705
+ "data-slot": "token-selector-simple-symbol",
8706
+ "data-test-id": "earn-token-selector-simple-view-symbol",
8707
+ 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)]",
8708
+ children: selectedToken.symbol
8709
+ }
8710
+ ),
8711
+ /* @__PURE__ */ jsxRuntime.jsx(
8712
+ "span",
8713
+ {
8714
+ "data-slot": "token-selector-simple-network",
8715
+ "data-test-id": "earn-token-selector-simple-view-network",
8716
+ 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]",
8717
+ children: chainLabel
8718
+ }
8719
+ )
8720
+ ]
8704
8721
  }
8705
- )
8706
- ] }) }) }),
8707
- /* @__PURE__ */ jsxRuntime.jsx(
8708
- EarnPercentageButtonsView,
8709
- {
8710
- onPercentageClick,
8711
- maxLabel
8712
- }
8713
- ),
8714
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-md)] px-[var(--deframe-widget-size-padding-x-md)] pb-[var(--deframe-widget-size-padding-y-xl)] mt-[var(--deframe-widget-size-gap-md)]", children: [
8715
- showTxStatus && /* @__PURE__ */ jsxRuntime.jsx(
8716
- EarnTxStatusCardView,
8722
+ ),
8723
+ isInteractive && /* @__PURE__ */ jsxRuntime.jsx(
8724
+ hi2.HiChevronDown,
8717
8725
  {
8718
- statusLabel: txStatusLabel,
8719
- isProcessing: isTxProcessing,
8720
- successMessage: isTxSuccess ? txSuccessMessage : void 0,
8721
- errorMessage: isTxError ? txErrorMessage : void 0
8726
+ "data-test-id": "earn-token-selector-simple-view-chevron",
8727
+ className: "flex-shrink-0 w-[14px] h-[14px] text-[color:var(--deframe-widget-color-text-secondary)]",
8728
+ "aria-hidden": "true"
8722
8729
  }
8723
- ),
8724
- bytecodeErrorMessage && /* @__PURE__ */ jsxRuntime.jsx(
8725
- EarnBytecodeErrorView,
8730
+ )
8731
+ ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
8732
+ /* @__PURE__ */ jsxRuntime.jsx(
8733
+ "span",
8726
8734
  {
8727
- errorTitle: transactionErrorLabel,
8728
- errorMessage: bytecodeErrorMessage
8735
+ "data-test-id": "earn-token-selector-simple-view-placeholder",
8736
+ className: "text-[12px] tracking-[0.08em] uppercase [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)] leading-[1] whitespace-nowrap",
8737
+ children: selectTokenLabel
8729
8738
  }
8730
8739
  ),
8731
- isQuoteValid && !isFetchingQuote && !bytecodeErrorMessage && /* @__PURE__ */ jsxRuntime.jsx(
8732
- SummaryDetails,
8740
+ isInteractive && /* @__PURE__ */ jsxRuntime.jsx(
8741
+ hi2.HiChevronDown,
8733
8742
  {
8734
- title: summaryTitle,
8735
- items: summaryItems,
8736
- defaultOpen: false,
8737
- className: "bg-[var(--deframe-widget-color-bg-secondary)]"
8743
+ "data-test-id": "earn-token-selector-simple-view-placeholder-chevron",
8744
+ className: "flex-shrink-0 w-[14px] h-[14px] text-[color:var(--deframe-widget-color-text-secondary)]",
8745
+ "aria-hidden": "true"
8738
8746
  }
8739
8747
  )
8740
- ] }),
8741
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-[var(--deframe-widget-size-padding-y-md)] px-[var(--deframe-widget-size-padding-x-md)] w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
8742
- PrimaryButton,
8743
- {
8744
- type: "submit",
8745
- className: "w-full",
8746
- disabled: submitDisabled,
8747
- "aria-disabled": submitDisabled,
8748
- children: submitButtonText
8749
- }
8750
- ) })
8751
- ] })
8752
- ] }) })
8753
- ] });
8754
- var EarnDepositProcessingView = ({
8755
- progress,
8756
- title,
8757
- descriptionPrefix,
8758
- activityHistoryText,
8759
- onGoToHistory,
8760
- onBack,
8761
- strategyName,
8762
- apyLabel,
8763
- apyValue,
8764
- iconSrc,
8765
- iconAlt,
8766
- amountUSD,
8767
- amountToken,
8768
- transactionSteps,
8769
- processingDetailsLabels
8748
+ ] })
8749
+ }
8750
+ );
8751
+ };
8752
+ var EarnAmountInputSimpleView = ({
8753
+ value,
8754
+ onChange,
8755
+ ariaLabel,
8756
+ dollarAmountFormatted
8770
8757
  }) => {
8758
+ const isEmpty = !value || value === "0";
8759
+ const inputBaseClasses = [
8760
+ "bg-transparent border-none outline-none text-right",
8761
+ "text-[36px] [font-weight:var(--deframe-widget-font-weight-semibold)] [line-height:1.1]",
8762
+ "w-full",
8763
+ "px-[var(--deframe-widget-size-padding-x-none)] py-[var(--deframe-widget-size-padding-y-none)]",
8764
+ "font-[var(--deframe-widget-font-family)]",
8765
+ "[appearance:textfield]",
8766
+ "[&::-webkit-outer-spin-button]:appearance-none",
8767
+ "[&::-webkit-inner-spin-button]:appearance-none"
8768
+ ].join(" ");
8769
+ const inputStateClasses = {
8770
+ empty: "text-[color:var(--deframe-widget-color-text-tertiary)]",
8771
+ filled: "text-[color:var(--deframe-widget-color-text-primary)]"
8772
+ };
8773
+ const inputClasses = tailwindMerge.twMerge(
8774
+ inputBaseClasses,
8775
+ inputStateClasses[isEmpty ? "empty" : "filled"]
8776
+ );
8771
8777
  return /* @__PURE__ */ jsxRuntime.jsxs(
8772
- TransactionScreen,
8778
+ "div",
8773
8779
  {
8774
- progress,
8775
- iconType: "processing",
8776
- title,
8777
- description: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
8778
- descriptionPrefix,
8779
- " ",
8780
- /* @__PURE__ */ jsxRuntime.jsx(
8781
- "span",
8782
- {
8783
- className: "[font-weight:var(--deframe-widget-font-weight-semibold)] underline underline-offset-2 cursor-pointer text-[color:var(--deframe-widget-color-brand-primary)]",
8784
- onClick: onGoToHistory,
8785
- children: activityHistoryText
8786
- }
8787
- )
8788
- ] }),
8789
- onBack,
8780
+ "data-slot": "amount-input-simple-wrapper",
8781
+ "data-test-id": "earn-amount-input-simple-view",
8782
+ className: "flex flex-col items-end flex-1 min-w-0",
8790
8783
  children: [
8791
8784
  /* @__PURE__ */ jsxRuntime.jsx(
8792
- TransactionScreenInvestmentCard,
8785
+ "input",
8793
8786
  {
8794
- strategyName,
8795
- apyLabel,
8796
- apyValue,
8797
- iconSrc,
8798
- iconAlt,
8799
- amountUSD,
8800
- amountToken
8787
+ "data-slot": "amount-input-simple",
8788
+ "data-test-id": "earn-amount-input-simple-view-input",
8789
+ type: "text",
8790
+ inputMode: "decimal",
8791
+ autoComplete: "off",
8792
+ placeholder: "0",
8793
+ "aria-label": ariaLabel,
8794
+ value,
8795
+ onChange,
8796
+ onWheel: (e) => e.currentTarget.blur(),
8797
+ className: inputClasses
8801
8798
  }
8802
8799
  ),
8803
- /* @__PURE__ */ jsxRuntime.jsx(
8804
- TransactionProcessingDetails,
8800
+ dollarAmountFormatted && /* @__PURE__ */ jsxRuntime.jsx(
8801
+ "span",
8805
8802
  {
8806
- steps: transactionSteps,
8807
- defaultOpen: true,
8808
- className: "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-primary)]",
8809
- labels: processingDetailsLabels
8803
+ "data-slot": "amount-input-simple-conversion",
8804
+ "data-test-id": "earn-amount-input-simple-view-conversion",
8805
+ className: "text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]",
8806
+ children: dollarAmountFormatted
8810
8807
  }
8811
8808
  )
8812
8809
  ]
8813
8810
  }
8814
8811
  );
8815
8812
  };
8816
- var EarnDepositSuccessView = ({
8817
- title,
8818
- descriptionPrefix,
8819
- formattedAmount,
8813
+ var EarnPercentageButtonsSimpleView = ({
8814
+ onPercentageClick,
8815
+ maxLabel
8816
+ }) => {
8817
+ const [selectedBasisPoints, setSelectedBasisPoints] = React6__namespace.default.useState(null);
8818
+ const options = [
8819
+ { label: "25%", basisPoints: 2500 },
8820
+ { label: "50%", basisPoints: 5e3 },
8821
+ { label: "75%", basisPoints: 7500 },
8822
+ { label: maxLabel, basisPoints: 1e4 }
8823
+ ];
8824
+ function handleClick(basisPoints) {
8825
+ setSelectedBasisPoints(basisPoints);
8826
+ onPercentageClick(basisPoints);
8827
+ }
8828
+ const chipBaseClassName = [
8829
+ // Layout overrides
8830
+ "flex-none",
8831
+ "py-[3px] px-[10px]",
8832
+ "rounded-[var(--deframe-widget-size-radius-full)]",
8833
+ "whitespace-nowrap",
8834
+ "cursor-pointer",
8835
+ // Typography — use arbitrary property syntax to override PercentageButton defaults
8836
+ "[font-size:12px] [line-height:1]",
8837
+ "font-[var(--deframe-widget-font-family)]",
8838
+ // Transitions
8839
+ "transition-all duration-150",
8840
+ "outline-none",
8841
+ "focus:ring-0"
8842
+ ].join(" ");
8843
+ const chipDefaultClassName = [
8844
+ "[font-weight:var(--deframe-widget-font-weight-regular)]",
8845
+ "border-[color:var(--deframe-widget-color-border-secondary)]",
8846
+ "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_84%,transparent)]",
8847
+ "text-[color:var(--deframe-widget-color-text-secondary)]",
8848
+ "hover:border-[color:var(--deframe-widget-color-border-primary)]",
8849
+ "hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_92%,transparent)]",
8850
+ "hover:text-[color:var(--deframe-widget-color-text-primary)]"
8851
+ ].join(" ");
8852
+ const chipActiveClassName = [
8853
+ "[font-weight:var(--deframe-widget-font-weight-semibold)]",
8854
+ "border-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_32%,transparent)]",
8855
+ "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_12%,transparent)]",
8856
+ "text-[color:var(--deframe-widget-color-brand-primary)]"
8857
+ ].join(" ");
8858
+ return /* @__PURE__ */ jsxRuntime.jsx(
8859
+ "div",
8860
+ {
8861
+ "data-slot": "percentage-chips-simple",
8862
+ "data-test-id": "earn-percentage-buttons-simple-view",
8863
+ className: "flex gap-[6px] items-center",
8864
+ children: options.map(({ label, basisPoints }) => {
8865
+ const isActive = basisPoints === selectedBasisPoints;
8866
+ const chipClassName = [
8867
+ chipBaseClassName,
8868
+ isActive ? chipActiveClassName : chipDefaultClassName
8869
+ ].join(" ");
8870
+ return /* @__PURE__ */ jsxRuntime.jsx(
8871
+ PercentageButton,
8872
+ {
8873
+ className: chipClassName,
8874
+ onClick: () => handleClick(basisPoints),
8875
+ children: /* @__PURE__ */ jsxRuntime.jsx(
8876
+ "span",
8877
+ {
8878
+ "data-slot": "chip-pill-label",
8879
+ "data-test-id": "earn-percentage-buttons-simple-view-chip-label",
8880
+ children: label
8881
+ }
8882
+ )
8883
+ },
8884
+ basisPoints
8885
+ );
8886
+ })
8887
+ }
8888
+ );
8889
+ };
8890
+ var variantWrapperClasses = {
8891
+ 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)]",
8892
+ 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)]",
8893
+ 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)]",
8894
+ 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)]"
8895
+ };
8896
+ var variantAccentClasses = {
8897
+ error: "bg-[var(--deframe-widget-color-state-error)]",
8898
+ warning: "bg-[var(--deframe-widget-color-state-warning)]",
8899
+ info: "bg-[var(--deframe-widget-color-state-info)]",
8900
+ success: "bg-[var(--deframe-widget-color-brand-primary)]"
8901
+ };
8902
+ var EarnInlineNotificationSimpleView = ({
8903
+ variant,
8904
+ message
8905
+ }) => {
8906
+ const baseClasses = [
8907
+ "relative flex items-center gap-[var(--deframe-widget-size-gap-sm)]",
8908
+ "py-[7px] pr-[10px] pl-[14px]",
8909
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
8910
+ "border",
8911
+ "overflow-hidden"
8912
+ ].join(" ");
8913
+ const wrapperClasses = tailwindMerge.twMerge(baseClasses, variantWrapperClasses[variant]);
8914
+ return /* @__PURE__ */ jsxRuntime.jsxs(
8915
+ "div",
8916
+ {
8917
+ "data-slot": "inline-notification-simple",
8918
+ "data-test-id": "earn-inline-notification-simple-view",
8919
+ role: "alert",
8920
+ className: wrapperClasses,
8921
+ children: [
8922
+ /* @__PURE__ */ jsxRuntime.jsx(
8923
+ "div",
8924
+ {
8925
+ "data-slot": "inline-notification-simple-accent",
8926
+ "data-test-id": "earn-inline-notification-simple-view-accent",
8927
+ className: tailwindMerge.twMerge(
8928
+ "absolute left-0 top-0 bottom-0 w-[3px] rounded-[var(--deframe-widget-size-radius-sm)_0_0_var(--deframe-widget-size-radius-sm)]",
8929
+ variantAccentClasses[variant]
8930
+ )
8931
+ }
8932
+ ),
8933
+ /* @__PURE__ */ jsxRuntime.jsx(
8934
+ "div",
8935
+ {
8936
+ "data-slot": "inline-notification-simple-dot",
8937
+ "data-test-id": "earn-inline-notification-simple-view-dot",
8938
+ className: tailwindMerge.twMerge(
8939
+ "w-[6px] h-[6px] rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0",
8940
+ variantAccentClasses[variant]
8941
+ )
8942
+ }
8943
+ ),
8944
+ /* @__PURE__ */ jsxRuntime.jsx(
8945
+ "span",
8946
+ {
8947
+ "data-slot": "inline-notification-simple-message",
8948
+ "data-test-id": "earn-inline-notification-simple-view-message",
8949
+ className: "flex-1 text-[13px] text-[color:var(--deframe-widget-color-text-secondary)] font-[var(--deframe-widget-font-family)] leading-[1.4]",
8950
+ children: message
8951
+ }
8952
+ )
8953
+ ]
8954
+ }
8955
+ );
8956
+ };
8957
+ var EarnDepositFormViewSimple = ({
8958
+ // Header / Layout
8959
+ headerTitle,
8960
+ onBack,
8961
+ onSubmit,
8962
+ // Token selector
8963
+ selectedToken,
8964
+ onTokenClick,
8965
+ isLoadingToken,
8966
+ selectTokenLabel,
8967
+ // Chain selector
8968
+ chainLabel,
8969
+ chainImage,
8970
+ // Amount input
8971
+ amountValue,
8972
+ onAmountChange,
8973
+ amountAriaLabel,
8974
+ dollarAmountFormatted,
8975
+ availableBalanceFormatted,
8976
+ // No balance notification
8977
+ showNoBalanceNotification,
8978
+ noBalancePrompt,
8979
+ goToSwapLabel,
8980
+ onGoToSwap,
8981
+ // Percentage buttons
8982
+ onPercentageClick,
8983
+ maxLabel,
8984
+ // TX status
8985
+ showTxStatus,
8986
+ txStatusLabel,
8987
+ isTxProcessing,
8988
+ isTxSuccess,
8989
+ isTxError,
8990
+ txSuccessMessage,
8991
+ txErrorMessage,
8992
+ // Bytecode error
8993
+ bytecodeErrorMessage,
8994
+ // Submit button
8995
+ submitDisabled,
8996
+ submitButtonText
8997
+ }) => {
8998
+ const hasToken = selectedToken != null;
8999
+ const hasError = !!bytecodeErrorMessage;
9000
+ const isSubmitDisabled = !hasToken || submitDisabled || !amountValue || amountValue === "0" || amountValue === "";
9001
+ const [cardHovered, setCardHovered] = React6__namespace.default.useState(false);
9002
+ const hideTimerRef = React6__namespace.default.useRef(void 0);
9003
+ function handleHoverStart() {
9004
+ clearTimeout(hideTimerRef.current);
9005
+ setCardHovered(true);
9006
+ }
9007
+ function handleHoverEnd() {
9008
+ hideTimerRef.current = setTimeout(() => setCardHovered(false), 150);
9009
+ }
9010
+ React6__namespace.default.useEffect(() => () => clearTimeout(hideTimerRef.current), []);
9011
+ const panelBaseClasses = [
9012
+ "relative flex flex-col overflow-hidden w-[420px]",
9013
+ "rounded-[var(--deframe-widget-size-radius-md)]",
9014
+ "bg-[var(--deframe-widget-color-bg-primary)]",
9015
+ "border border-[color:var(--deframe-widget-color-border-secondary)]",
9016
+ "font-[var(--deframe-widget-font-family)]"
9017
+ ].join(" ");
9018
+ const headerBaseClasses = [
9019
+ "flex items-center",
9020
+ "px-[var(--deframe-widget-size-padding-x-md)]",
9021
+ "py-[var(--deframe-widget-size-padding-y-md)]"
9022
+ ].join(" ");
9023
+ const titleBaseClasses = [
9024
+ "flex-1",
9025
+ "text-[15px]",
9026
+ "[font-weight:var(--deframe-widget-font-weight-semibold)]",
9027
+ "text-[color:var(--deframe-widget-color-text-primary)]"
9028
+ ].join(" ");
9029
+ const dividerClasses = "h-px bg-[var(--deframe-widget-color-border-secondary)]";
9030
+ const bodyBaseClasses = [
9031
+ "flex flex-col",
9032
+ "gap-[var(--deframe-widget-size-gap-md)]",
9033
+ "px-[var(--deframe-widget-size-padding-x-md)]",
9034
+ "py-[var(--deframe-widget-size-padding-y-md)]"
9035
+ ].join(" ");
9036
+ const inputCardClasses = tailwindMerge.twMerge(
9037
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
9038
+ "border",
9039
+ "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]",
9040
+ "transition-[border-color,background] duration-200",
9041
+ 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)]"
9042
+ );
9043
+ const footerBaseClasses = [
9044
+ "flex gap-[var(--deframe-widget-size-gap-sm)]",
9045
+ "px-[var(--deframe-widget-size-padding-x-md)]",
9046
+ "pb-[var(--deframe-widget-size-padding-y-md)]"
9047
+ ].join(" ");
9048
+ return /* @__PURE__ */ jsxRuntime.jsxs(
9049
+ "div",
9050
+ {
9051
+ "data-slot": "deposit-panel-simple",
9052
+ "data-test-id": "earn-deposit-form-view-simple",
9053
+ className: panelBaseClasses,
9054
+ children: [
9055
+ /* @__PURE__ */ jsxRuntime.jsx(
9056
+ "header",
9057
+ {
9058
+ "data-slot": "deposit-panel-simple-header",
9059
+ "data-test-id": "earn-deposit-form-view-simple-header",
9060
+ className: headerBaseClasses,
9061
+ children: /* @__PURE__ */ jsxRuntime.jsx(
9062
+ "span",
9063
+ {
9064
+ "data-slot": "deposit-panel-simple-title",
9065
+ "data-test-id": "earn-deposit-form-view-simple-title",
9066
+ className: titleBaseClasses,
9067
+ children: headerTitle
9068
+ }
9069
+ )
9070
+ }
9071
+ ),
9072
+ /* @__PURE__ */ jsxRuntime.jsx(
9073
+ "div",
9074
+ {
9075
+ "data-slot": "deposit-panel-simple-divider",
9076
+ "data-test-id": "earn-deposit-form-view-simple-divider",
9077
+ className: dividerClasses
9078
+ }
9079
+ ),
9080
+ /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit, children: [
9081
+ /* @__PURE__ */ jsxRuntime.jsx(
9082
+ "div",
9083
+ {
9084
+ "data-slot": "deposit-panel-simple-body",
9085
+ "data-test-id": "earn-deposit-form-view-simple-body",
9086
+ className: bodyBaseClasses,
9087
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
9088
+ "div",
9089
+ {
9090
+ "data-slot": "deposit-panel-simple-input-card",
9091
+ "data-test-id": "earn-deposit-form-view-simple-input-card",
9092
+ onMouseEnter: hasToken ? handleHoverStart : void 0,
9093
+ onMouseLeave: hasToken ? handleHoverEnd : void 0,
9094
+ className: inputCardClasses,
9095
+ children: [
9096
+ /* @__PURE__ */ jsxRuntime.jsxs(
9097
+ "div",
9098
+ {
9099
+ "data-slot": "deposit-panel-simple-input-top-row",
9100
+ "data-test-id": "earn-deposit-form-view-simple-top-row",
9101
+ className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)]",
9102
+ children: [
9103
+ /* @__PURE__ */ jsxRuntime.jsx(
9104
+ EarnTokenSelectorSimpleView,
9105
+ {
9106
+ selectedToken,
9107
+ onTokenClick,
9108
+ isLoading: isLoadingToken,
9109
+ selectTokenLabel,
9110
+ chainLabel,
9111
+ chainImage
9112
+ }
9113
+ ),
9114
+ /* @__PURE__ */ jsxRuntime.jsx(
9115
+ "div",
9116
+ {
9117
+ "data-test-id": "earn-deposit-form-view-simple-input-divider",
9118
+ className: "w-px h-10 bg-[var(--deframe-widget-color-border-secondary)] flex-shrink-0"
9119
+ }
9120
+ ),
9121
+ /* @__PURE__ */ jsxRuntime.jsx(
9122
+ EarnAmountInputSimpleView,
9123
+ {
9124
+ value: amountValue,
9125
+ onChange: onAmountChange,
9126
+ ariaLabel: amountAriaLabel,
9127
+ dollarAmountFormatted
9128
+ }
9129
+ )
9130
+ ]
9131
+ }
9132
+ ),
9133
+ hasToken && availableBalanceFormatted && /* @__PURE__ */ jsxRuntime.jsx(
9134
+ "div",
9135
+ {
9136
+ "data-slot": "deposit-simple-balance-row",
9137
+ "data-test-id": "earn-deposit-form-view-simple-balance-row",
9138
+ className: "mt-[var(--deframe-widget-size-gap-sm)]",
9139
+ children: /* @__PURE__ */ jsxRuntime.jsx(
9140
+ "span",
9141
+ {
9142
+ className: tailwindMerge.twMerge(
9143
+ "text-[13px] font-[var(--deframe-widget-font-family)]",
9144
+ hasError ? "text-[color:var(--deframe-widget-color-state-error)]" : "text-[color:var(--deframe-widget-color-text-tertiary)]"
9145
+ ),
9146
+ children: availableBalanceFormatted
9147
+ }
9148
+ )
9149
+ }
9150
+ ),
9151
+ !hasToken && !isLoadingToken && /* @__PURE__ */ jsxRuntime.jsx(
9152
+ "p",
9153
+ {
9154
+ "data-slot": "deposit-simple-empty-hint",
9155
+ "data-test-id": "earn-deposit-form-view-simple-empty-hint",
9156
+ className: "mt-[var(--deframe-widget-size-gap-sm)] text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]",
9157
+ children: selectTokenLabel
9158
+ }
9159
+ ),
9160
+ /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: hasToken && cardHovered && /* @__PURE__ */ jsxRuntime.jsx(
9161
+ framerMotion.motion.div,
9162
+ {
9163
+ "data-slot": "deposit-simple-chips-row",
9164
+ "data-test-id": "earn-deposit-form-view-simple-chips-row",
9165
+ initial: { opacity: 0, height: 0, marginTop: 0 },
9166
+ animate: { opacity: 1, height: "auto", marginTop: "var(--deframe-widget-size-gap-sm)" },
9167
+ exit: { opacity: 0, height: 0, marginTop: 0 },
9168
+ transition: { duration: 0.15, ease: "easeOut" },
9169
+ style: { overflow: "hidden" },
9170
+ onMouseEnter: handleHoverStart,
9171
+ onMouseLeave: handleHoverEnd,
9172
+ children: /* @__PURE__ */ jsxRuntime.jsx(
9173
+ EarnPercentageButtonsSimpleView,
9174
+ {
9175
+ onPercentageClick,
9176
+ maxLabel
9177
+ }
9178
+ )
9179
+ }
9180
+ ) }),
9181
+ showNoBalanceNotification && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-[var(--deframe-widget-size-gap-sm)]", children: /* @__PURE__ */ jsxRuntime.jsx(
9182
+ EarnNoBalanceNotificationView,
9183
+ {
9184
+ prompt: noBalancePrompt,
9185
+ actionLabel: goToSwapLabel,
9186
+ onAction: onGoToSwap
9187
+ }
9188
+ ) }),
9189
+ bytecodeErrorMessage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-[var(--deframe-widget-size-gap-sm)]", children: /* @__PURE__ */ jsxRuntime.jsx(
9190
+ EarnInlineNotificationSimpleView,
9191
+ {
9192
+ variant: "error",
9193
+ message: bytecodeErrorMessage
9194
+ }
9195
+ ) })
9196
+ ]
9197
+ }
9198
+ )
9199
+ }
9200
+ ),
9201
+ /* @__PURE__ */ jsxRuntime.jsxs(
9202
+ "footer",
9203
+ {
9204
+ "data-slot": "deposit-panel-simple-footer",
9205
+ "data-test-id": "earn-deposit-form-view-simple-footer",
9206
+ className: footerBaseClasses,
9207
+ children: [
9208
+ onBack && /* @__PURE__ */ jsxRuntime.jsx(
9209
+ SecondaryButton,
9210
+ {
9211
+ type: "button",
9212
+ className: [
9213
+ "flex-1 h-12 rounded-[var(--deframe-widget-size-radius-sm)]",
9214
+ "text-[15px] text-[color:var(--deframe-widget-color-text-secondary)]",
9215
+ "border-[color:var(--deframe-widget-color-border-secondary)]",
9216
+ "outline-none",
9217
+ "transition-[background,color,border-color] duration-150",
9218
+ "hover:opacity-100",
9219
+ "hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_60%,transparent)]",
9220
+ "hover:text-[color:var(--deframe-widget-color-text-primary)]"
9221
+ ].join(" "),
9222
+ onClick: onBack,
9223
+ "aria-label": "Cancel deposit",
9224
+ children: "Cancel"
9225
+ }
9226
+ ),
9227
+ /* @__PURE__ */ jsxRuntime.jsx(
9228
+ PrimaryButton,
9229
+ {
9230
+ type: "submit",
9231
+ className: [
9232
+ "flex-1 h-12 rounded-[var(--deframe-widget-size-radius-sm)]",
9233
+ "text-[15px] text-[color:var(--deframe-widget-color-text-primary-dark)]",
9234
+ "outline-none",
9235
+ "transition-[background,color,opacity] duration-150"
9236
+ ].join(" "),
9237
+ disabled: isSubmitDisabled,
9238
+ "aria-disabled": isSubmitDisabled,
9239
+ "aria-label": submitButtonText,
9240
+ children: submitButtonText
9241
+ }
9242
+ )
9243
+ ]
9244
+ }
9245
+ )
9246
+ ] }),
9247
+ /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: showTxStatus && /* @__PURE__ */ jsxRuntime.jsx(
9248
+ framerMotion.motion.div,
9249
+ {
9250
+ "data-slot": "deposit-simple-tx-overlay",
9251
+ "data-test-id": "earn-deposit-form-view-simple-tx-overlay",
9252
+ initial: { opacity: 0 },
9253
+ animate: { opacity: 1 },
9254
+ exit: { opacity: 0 },
9255
+ transition: { duration: 0.2, ease: "easeOut" },
9256
+ className: "absolute inset-0 z-10 flex items-center justify-center bg-[var(--deframe-widget-color-bg-primary)]",
9257
+ children: /* @__PURE__ */ jsxRuntime.jsx(
9258
+ EarnTxStatusCardView,
9259
+ {
9260
+ statusLabel: txStatusLabel,
9261
+ isProcessing: isTxProcessing,
9262
+ successMessage: isTxSuccess ? txSuccessMessage : void 0,
9263
+ errorMessage: isTxError ? txErrorMessage : void 0
9264
+ }
9265
+ )
9266
+ }
9267
+ ) })
9268
+ ]
9269
+ }
9270
+ );
9271
+ };
9272
+ var EarnWithdrawFormView = ({
9273
+ // Header / Layout
9274
+ headerTitle,
9275
+ onBack,
9276
+ progress,
9277
+ pageTitle,
9278
+ subtitle,
9279
+ onSubmit,
9280
+ // Position card
9281
+ positionBalanceUSD,
9282
+ positionBalanceToken,
9283
+ strategyIcon,
9284
+ strategyName,
9285
+ // Token selector
9286
+ selectedToken,
9287
+ onTokenClick,
9288
+ selectTokenLabel,
9289
+ // Chain selector
9290
+ chainLabel,
9291
+ chainImage,
9292
+ chainDirectionLabel,
9293
+ chainDisabledTitle,
9294
+ onNetworkClick,
9295
+ isNetworkDisabled,
9296
+ currentNetworkSelected,
9297
+ // Amount input
9298
+ amountValue,
9299
+ onAmountChange,
9300
+ amountAriaLabel,
9301
+ dollarAmountFormatted,
9302
+ // Percentage buttons
9303
+ onPercentageClick,
9304
+ maxLabel,
9305
+ // TX status
9306
+ showTxStatus,
9307
+ txStatusLabel,
9308
+ isTxProcessing,
9309
+ isTxSuccess,
9310
+ isTxError,
9311
+ txSuccessMessage,
9312
+ txErrorMessage,
9313
+ // Bytecode error
9314
+ bytecodeErrorMessage,
9315
+ transactionErrorLabel,
9316
+ // Quote details
9317
+ isQuoteValid,
9318
+ isFetchingQuote,
9319
+ summaryTitle,
9320
+ summaryItems,
9321
+ // Submit button
9322
+ submitDisabled,
9323
+ submitButtonText
9324
+ }) => /* @__PURE__ */ jsxRuntime.jsxs(BackgroundContainer, { children: [
9325
+ /* @__PURE__ */ jsxRuntime.jsx(DetailsHeader, { title: headerTitle, onBack }),
9326
+ /* @__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: [
9327
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full px-[var(--deframe-widget-size-padding-x-md)]", children: /* @__PURE__ */ jsxRuntime.jsx(ProgressIndicator, { progress }) }),
9328
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)] px-[var(--deframe-widget-size-padding-x-md)]", children: [
9329
+ /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h5", children: pageTitle }),
9330
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: subtitle })
9331
+ ] }),
9332
+ /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit, children: [
9333
+ /* @__PURE__ */ jsxRuntime.jsx(
9334
+ EarnPositionCardView,
9335
+ {
9336
+ balanceUSD: positionBalanceUSD,
9337
+ balanceToken: positionBalanceToken,
9338
+ icon: strategyIcon,
9339
+ iconAlt: strategyName
9340
+ }
9341
+ ),
9342
+ /* @__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: [
9343
+ /* @__PURE__ */ jsxRuntime.jsx(
9344
+ EarnWithdrawTokenSelectorView,
9345
+ {
9346
+ selectedToken,
9347
+ onTokenClick,
9348
+ selectTokenLabel,
9349
+ chainLabel,
9350
+ chainImage,
9351
+ chainDirectionLabel,
9352
+ chainDisabledTitle,
9353
+ onNetworkClick,
9354
+ isNetworkDisabled,
9355
+ currentNetworkSelected
9356
+ }
9357
+ ),
9358
+ /* @__PURE__ */ jsxRuntime.jsx(
9359
+ EarnAmountInputView,
9360
+ {
9361
+ value: amountValue,
9362
+ onChange: onAmountChange,
9363
+ ariaLabel: amountAriaLabel,
9364
+ dollarAmountFormatted
9365
+ }
9366
+ )
9367
+ ] }) }) }),
9368
+ /* @__PURE__ */ jsxRuntime.jsx(
9369
+ EarnPercentageButtonsView,
9370
+ {
9371
+ onPercentageClick,
9372
+ maxLabel
9373
+ }
9374
+ ),
9375
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-md)] px-[var(--deframe-widget-size-padding-x-md)] pb-[var(--deframe-widget-size-padding-y-xl)] mt-[var(--deframe-widget-size-gap-md)]", children: [
9376
+ showTxStatus && /* @__PURE__ */ jsxRuntime.jsx(
9377
+ EarnTxStatusCardView,
9378
+ {
9379
+ statusLabel: txStatusLabel,
9380
+ isProcessing: isTxProcessing,
9381
+ successMessage: isTxSuccess ? txSuccessMessage : void 0,
9382
+ errorMessage: isTxError ? txErrorMessage : void 0
9383
+ }
9384
+ ),
9385
+ bytecodeErrorMessage && /* @__PURE__ */ jsxRuntime.jsx(
9386
+ EarnBytecodeErrorView,
9387
+ {
9388
+ errorTitle: transactionErrorLabel,
9389
+ errorMessage: bytecodeErrorMessage
9390
+ }
9391
+ ),
9392
+ isQuoteValid && !isFetchingQuote && !bytecodeErrorMessage && /* @__PURE__ */ jsxRuntime.jsx(
9393
+ SummaryDetails,
9394
+ {
9395
+ title: summaryTitle,
9396
+ items: summaryItems,
9397
+ defaultOpen: false,
9398
+ className: "bg-[var(--deframe-widget-color-bg-secondary)]"
9399
+ }
9400
+ )
9401
+ ] }),
9402
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-[var(--deframe-widget-size-padding-y-md)] px-[var(--deframe-widget-size-padding-x-md)] w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
9403
+ PrimaryButton,
9404
+ {
9405
+ type: "submit",
9406
+ className: "w-full",
9407
+ disabled: submitDisabled,
9408
+ "aria-disabled": submitDisabled,
9409
+ children: submitButtonText
9410
+ }
9411
+ ) })
9412
+ ] })
9413
+ ] }) })
9414
+ ] });
9415
+ var EarnWithdrawFormViewSimple = ({
9416
+ // Header / Layout
9417
+ headerTitle,
9418
+ onBack,
9419
+ onSubmit,
9420
+ // Position card (used for inline balance row)
9421
+ positionBalanceToken,
9422
+ // Token selector
9423
+ selectedToken,
9424
+ onTokenClick,
9425
+ selectTokenLabel,
9426
+ // Chain selector
9427
+ chainLabel,
9428
+ chainImage,
9429
+ // Amount input
9430
+ amountValue,
9431
+ onAmountChange,
9432
+ amountAriaLabel,
9433
+ dollarAmountFormatted,
9434
+ // Percentage buttons
9435
+ onPercentageClick,
9436
+ maxLabel,
9437
+ // TX status
9438
+ showTxStatus,
9439
+ txStatusLabel,
9440
+ isTxProcessing,
9441
+ isTxSuccess,
9442
+ isTxError,
9443
+ txSuccessMessage,
9444
+ txErrorMessage,
9445
+ // Bytecode error
9446
+ bytecodeErrorMessage,
9447
+ // Submit button
9448
+ submitDisabled,
9449
+ submitButtonText
9450
+ }) => {
9451
+ const hasToken = selectedToken != null;
9452
+ const hasError = !!bytecodeErrorMessage;
9453
+ const isSubmitDisabled = !hasToken || submitDisabled || !amountValue || amountValue === "0" || amountValue === "";
9454
+ const [cardHovered, setCardHovered] = React6__namespace.default.useState(false);
9455
+ const hideTimerRef = React6__namespace.default.useRef(void 0);
9456
+ function handleHoverStart() {
9457
+ clearTimeout(hideTimerRef.current);
9458
+ setCardHovered(true);
9459
+ }
9460
+ function handleHoverEnd() {
9461
+ hideTimerRef.current = setTimeout(() => setCardHovered(false), 150);
9462
+ }
9463
+ React6__namespace.default.useEffect(() => () => clearTimeout(hideTimerRef.current), []);
9464
+ const panelBaseClasses = [
9465
+ "relative flex flex-col overflow-hidden w-[420px]",
9466
+ "rounded-[var(--deframe-widget-size-radius-md)]",
9467
+ "bg-[var(--deframe-widget-color-bg-primary)]",
9468
+ "border border-[color:var(--deframe-widget-color-border-secondary)]",
9469
+ "font-[var(--deframe-widget-font-family)]"
9470
+ ].join(" ");
9471
+ const headerBaseClasses = [
9472
+ "flex items-center",
9473
+ "px-[var(--deframe-widget-size-padding-x-md)]",
9474
+ "py-[var(--deframe-widget-size-padding-y-md)]"
9475
+ ].join(" ");
9476
+ const titleBaseClasses = [
9477
+ "flex-1",
9478
+ "text-[15px]",
9479
+ "[font-weight:var(--deframe-widget-font-weight-semibold)]",
9480
+ "text-[color:var(--deframe-widget-color-text-primary)]"
9481
+ ].join(" ");
9482
+ const dividerClasses = "h-px bg-[var(--deframe-widget-color-border-secondary)]";
9483
+ const bodyBaseClasses = [
9484
+ "flex flex-col",
9485
+ "gap-[var(--deframe-widget-size-gap-md)]",
9486
+ "px-[var(--deframe-widget-size-padding-x-md)]",
9487
+ "py-[var(--deframe-widget-size-padding-y-md)]"
9488
+ ].join(" ");
9489
+ const inputCardClasses = tailwindMerge.twMerge(
9490
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
9491
+ "border",
9492
+ "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]",
9493
+ "transition-[border-color,background] duration-200",
9494
+ 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)]"
9495
+ );
9496
+ const footerBaseClasses = [
9497
+ "flex gap-[var(--deframe-widget-size-gap-sm)]",
9498
+ "px-[var(--deframe-widget-size-padding-x-md)]",
9499
+ "pb-[var(--deframe-widget-size-padding-y-md)]"
9500
+ ].join(" ");
9501
+ return /* @__PURE__ */ jsxRuntime.jsxs(
9502
+ "div",
9503
+ {
9504
+ "data-slot": "withdraw-panel-simple",
9505
+ "data-test-id": "earn-withdraw-form-view-simple",
9506
+ className: panelBaseClasses,
9507
+ children: [
9508
+ /* @__PURE__ */ jsxRuntime.jsx(
9509
+ "header",
9510
+ {
9511
+ "data-slot": "withdraw-panel-simple-header",
9512
+ "data-test-id": "earn-withdraw-form-view-simple-header",
9513
+ className: headerBaseClasses,
9514
+ children: /* @__PURE__ */ jsxRuntime.jsx(
9515
+ "span",
9516
+ {
9517
+ "data-slot": "withdraw-panel-simple-title",
9518
+ "data-test-id": "earn-withdraw-form-view-simple-title",
9519
+ className: titleBaseClasses,
9520
+ children: headerTitle
9521
+ }
9522
+ )
9523
+ }
9524
+ ),
9525
+ /* @__PURE__ */ jsxRuntime.jsx(
9526
+ "div",
9527
+ {
9528
+ "data-slot": "withdraw-panel-simple-divider",
9529
+ "data-test-id": "earn-withdraw-form-view-simple-divider",
9530
+ className: dividerClasses
9531
+ }
9532
+ ),
9533
+ /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit, children: [
9534
+ /* @__PURE__ */ jsxRuntime.jsx(
9535
+ "div",
9536
+ {
9537
+ "data-slot": "withdraw-panel-simple-body",
9538
+ "data-test-id": "earn-withdraw-form-view-simple-body",
9539
+ className: bodyBaseClasses,
9540
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
9541
+ "div",
9542
+ {
9543
+ "data-slot": "withdraw-panel-simple-input-card",
9544
+ "data-test-id": "earn-withdraw-form-view-simple-input-card",
9545
+ onMouseEnter: hasToken ? handleHoverStart : void 0,
9546
+ onMouseLeave: hasToken ? handleHoverEnd : void 0,
9547
+ className: inputCardClasses,
9548
+ children: [
9549
+ /* @__PURE__ */ jsxRuntime.jsxs(
9550
+ "div",
9551
+ {
9552
+ "data-slot": "withdraw-panel-simple-input-top-row",
9553
+ "data-test-id": "earn-withdraw-form-view-simple-top-row",
9554
+ className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)]",
9555
+ children: [
9556
+ /* @__PURE__ */ jsxRuntime.jsx(
9557
+ EarnTokenSelectorSimpleView,
9558
+ {
9559
+ selectedToken,
9560
+ onTokenClick,
9561
+ isLoading: false,
9562
+ selectTokenLabel,
9563
+ chainLabel,
9564
+ chainImage
9565
+ }
9566
+ ),
9567
+ /* @__PURE__ */ jsxRuntime.jsx(
9568
+ "div",
9569
+ {
9570
+ "data-test-id": "earn-withdraw-form-view-simple-input-divider",
9571
+ className: "w-px h-10 bg-[var(--deframe-widget-color-border-secondary)] flex-shrink-0"
9572
+ }
9573
+ ),
9574
+ /* @__PURE__ */ jsxRuntime.jsx(
9575
+ EarnAmountInputSimpleView,
9576
+ {
9577
+ value: amountValue,
9578
+ onChange: onAmountChange,
9579
+ ariaLabel: amountAriaLabel,
9580
+ dollarAmountFormatted
9581
+ }
9582
+ )
9583
+ ]
9584
+ }
9585
+ ),
9586
+ hasToken && positionBalanceToken && /* @__PURE__ */ jsxRuntime.jsx(
9587
+ "div",
9588
+ {
9589
+ "data-slot": "withdraw-simple-balance-row",
9590
+ "data-test-id": "earn-withdraw-form-view-simple-balance-row",
9591
+ className: "mt-[var(--deframe-widget-size-gap-sm)]",
9592
+ 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(
9593
+ "span",
9594
+ {
9595
+ className: hasError ? "text-[color:var(--deframe-widget-color-state-error)]" : "text-[color:var(--deframe-widget-color-text-secondary)]",
9596
+ children: positionBalanceToken
9597
+ }
9598
+ ) })
9599
+ }
9600
+ ),
9601
+ !hasToken && /* @__PURE__ */ jsxRuntime.jsx(
9602
+ "p",
9603
+ {
9604
+ "data-slot": "withdraw-simple-empty-hint",
9605
+ "data-test-id": "earn-withdraw-form-view-simple-empty-hint",
9606
+ className: "mt-[var(--deframe-widget-size-gap-sm)] text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]",
9607
+ children: selectTokenLabel
9608
+ }
9609
+ ),
9610
+ /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: hasToken && cardHovered && /* @__PURE__ */ jsxRuntime.jsx(
9611
+ framerMotion.motion.div,
9612
+ {
9613
+ "data-slot": "withdraw-simple-chips-row",
9614
+ "data-test-id": "earn-withdraw-form-view-simple-chips-row",
9615
+ initial: { opacity: 0, height: 0, marginTop: 0 },
9616
+ animate: { opacity: 1, height: "auto", marginTop: "var(--deframe-widget-size-gap-sm)" },
9617
+ exit: { opacity: 0, height: 0, marginTop: 0 },
9618
+ transition: { duration: 0.15, ease: "easeOut" },
9619
+ style: { overflow: "hidden" },
9620
+ onMouseEnter: handleHoverStart,
9621
+ onMouseLeave: handleHoverEnd,
9622
+ children: /* @__PURE__ */ jsxRuntime.jsx(
9623
+ EarnPercentageButtonsSimpleView,
9624
+ {
9625
+ onPercentageClick,
9626
+ maxLabel
9627
+ }
9628
+ )
9629
+ }
9630
+ ) }),
9631
+ bytecodeErrorMessage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-[var(--deframe-widget-size-gap-sm)]", children: /* @__PURE__ */ jsxRuntime.jsx(
9632
+ EarnInlineNotificationSimpleView,
9633
+ {
9634
+ variant: "error",
9635
+ message: bytecodeErrorMessage
9636
+ }
9637
+ ) })
9638
+ ]
9639
+ }
9640
+ )
9641
+ }
9642
+ ),
9643
+ /* @__PURE__ */ jsxRuntime.jsxs(
9644
+ "footer",
9645
+ {
9646
+ "data-slot": "withdraw-panel-simple-footer",
9647
+ "data-test-id": "earn-withdraw-form-view-simple-footer",
9648
+ className: footerBaseClasses,
9649
+ children: [
9650
+ onBack && /* @__PURE__ */ jsxRuntime.jsx(
9651
+ SecondaryButton,
9652
+ {
9653
+ type: "button",
9654
+ className: [
9655
+ "flex-1 h-12 rounded-[var(--deframe-widget-size-radius-sm)]",
9656
+ "text-[15px] text-[color:var(--deframe-widget-color-text-secondary)]",
9657
+ "border-[color:var(--deframe-widget-color-border-secondary)]",
9658
+ "outline-none",
9659
+ "transition-[background,color,border-color] duration-150",
9660
+ "hover:opacity-100",
9661
+ "hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_60%,transparent)]",
9662
+ "hover:text-[color:var(--deframe-widget-color-text-primary)]"
9663
+ ].join(" "),
9664
+ onClick: onBack,
9665
+ "aria-label": "Cancel withdrawal",
9666
+ children: "Cancel"
9667
+ }
9668
+ ),
9669
+ /* @__PURE__ */ jsxRuntime.jsx(
9670
+ PrimaryButton,
9671
+ {
9672
+ type: "submit",
9673
+ className: [
9674
+ "flex-1 h-12 rounded-[var(--deframe-widget-size-radius-sm)]",
9675
+ "text-[15px] text-[color:var(--deframe-widget-color-text-primary-dark)]",
9676
+ "outline-none",
9677
+ "transition-[background,color,opacity] duration-150"
9678
+ ].join(" "),
9679
+ disabled: isSubmitDisabled,
9680
+ "aria-disabled": isSubmitDisabled,
9681
+ "aria-label": submitButtonText,
9682
+ children: submitButtonText
9683
+ }
9684
+ )
9685
+ ]
9686
+ }
9687
+ )
9688
+ ] }),
9689
+ /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: showTxStatus && /* @__PURE__ */ jsxRuntime.jsx(
9690
+ framerMotion.motion.div,
9691
+ {
9692
+ "data-slot": "withdraw-simple-tx-overlay",
9693
+ "data-test-id": "earn-withdraw-form-view-simple-tx-overlay",
9694
+ initial: { opacity: 0 },
9695
+ animate: { opacity: 1 },
9696
+ exit: { opacity: 0 },
9697
+ transition: { duration: 0.2, ease: "easeOut" },
9698
+ className: "absolute inset-0 z-10 flex items-center justify-center bg-[var(--deframe-widget-color-bg-primary)]",
9699
+ children: /* @__PURE__ */ jsxRuntime.jsx(
9700
+ EarnTxStatusCardView,
9701
+ {
9702
+ statusLabel: txStatusLabel,
9703
+ isProcessing: isTxProcessing,
9704
+ successMessage: isTxSuccess ? txSuccessMessage : void 0,
9705
+ errorMessage: isTxError ? txErrorMessage : void 0
9706
+ }
9707
+ )
9708
+ }
9709
+ ) })
9710
+ ]
9711
+ }
9712
+ );
9713
+ };
9714
+ var EarnDepositProcessingView = ({
9715
+ progress,
9716
+ title,
9717
+ descriptionPrefix,
9718
+ activityHistoryText,
9719
+ onGoToHistory,
9720
+ onBack,
9721
+ strategyName,
9722
+ apyLabel,
9723
+ apyValue,
9724
+ iconSrc,
9725
+ iconAlt,
9726
+ amountUSD,
9727
+ amountToken,
9728
+ transactionSteps,
9729
+ processingDetailsLabels
9730
+ }) => {
9731
+ return /* @__PURE__ */ jsxRuntime.jsxs(
9732
+ TransactionScreen,
9733
+ {
9734
+ progress,
9735
+ iconType: "processing",
9736
+ title,
9737
+ description: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
9738
+ descriptionPrefix,
9739
+ " ",
9740
+ /* @__PURE__ */ jsxRuntime.jsx(
9741
+ "span",
9742
+ {
9743
+ className: "[font-weight:var(--deframe-widget-font-weight-semibold)] underline underline-offset-2 cursor-pointer text-[color:var(--deframe-widget-color-brand-primary)]",
9744
+ onClick: onGoToHistory,
9745
+ children: activityHistoryText
9746
+ }
9747
+ )
9748
+ ] }),
9749
+ onBack,
9750
+ children: [
9751
+ /* @__PURE__ */ jsxRuntime.jsx(
9752
+ TransactionScreenInvestmentCard,
9753
+ {
9754
+ strategyName,
9755
+ apyLabel,
9756
+ apyValue,
9757
+ iconSrc,
9758
+ iconAlt,
9759
+ amountUSD,
9760
+ amountToken
9761
+ }
9762
+ ),
9763
+ /* @__PURE__ */ jsxRuntime.jsx(
9764
+ TransactionProcessingDetails,
9765
+ {
9766
+ steps: transactionSteps,
9767
+ defaultOpen: true,
9768
+ className: "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-primary)]",
9769
+ labels: processingDetailsLabels
9770
+ }
9771
+ )
9772
+ ]
9773
+ }
9774
+ );
9775
+ };
9776
+ function EarnFormSkeleton() {
9777
+ const headerClasses = [
9778
+ "flex items-center",
9779
+ "px-[var(--deframe-widget-size-padding-x-md)]",
9780
+ "py-[var(--deframe-widget-size-padding-y-md)]"
9781
+ ].join(" ");
9782
+ const titleClasses = [
9783
+ "flex-1",
9784
+ "text-[15px]",
9785
+ "[font-weight:var(--deframe-widget-font-weight-semibold)]",
9786
+ "text-[color:var(--deframe-widget-color-text-primary)]"
9787
+ ].join(" ");
9788
+ const dividerClasses = "h-px bg-[var(--deframe-widget-color-border-secondary)]";
9789
+ const bodyClasses = [
9790
+ "flex flex-col",
9791
+ "gap-[var(--deframe-widget-size-gap-md)]",
9792
+ "px-[var(--deframe-widget-size-padding-x-md)]",
9793
+ "py-[var(--deframe-widget-size-padding-y-md)]"
9794
+ ].join(" ");
9795
+ const inputCardClasses = tailwindMerge.twMerge(
9796
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
9797
+ "border border-[color:var(--deframe-widget-color-border-secondary)]",
9798
+ "bg-[var(--deframe-widget-color-bg-secondary)]",
9799
+ "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]"
9800
+ );
9801
+ const footerClasses = [
9802
+ "flex gap-[var(--deframe-widget-size-gap-sm)]",
9803
+ "px-[var(--deframe-widget-size-padding-x-md)]",
9804
+ "pb-[var(--deframe-widget-size-padding-y-md)]"
9805
+ ].join(" ");
9806
+ return /* @__PURE__ */ jsxRuntime.jsxs(
9807
+ "div",
9808
+ {
9809
+ "data-test-id": "earn-form-skeleton",
9810
+ className: "flex flex-col font-[var(--deframe-widget-font-family)]",
9811
+ children: [
9812
+ /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "earn-form-skeleton-header", className: headerClasses, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: titleClasses, children: "Deposit" }) }),
9813
+ /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "earn-form-skeleton-divider", className: dividerClasses }),
9814
+ /* @__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: [
9815
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)]", children: [
9816
+ /* @__PURE__ */ jsxRuntime.jsxs(
9817
+ "div",
9818
+ {
9819
+ className: tailwindMerge.twMerge(
9820
+ "inline-flex items-center gap-[10px]",
9821
+ "py-[var(--deframe-widget-size-padding-y-sm)] px-[10px]",
9822
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
9823
+ "bg-[var(--deframe-widget-color-bg-tertiary)]",
9824
+ "flex-shrink-0"
9825
+ ),
9826
+ children: [
9827
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-shrink-0 w-[38px] h-[38px]", children: [
9828
+ /* @__PURE__ */ jsxRuntime.jsx(
9829
+ "div",
9830
+ {
9831
+ 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)]",
9832
+ children: "US"
9833
+ }
9834
+ ),
9835
+ /* @__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)]" })
9836
+ ] }),
9837
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start min-w-0", children: [
9838
+ /* @__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" }),
9839
+ /* @__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" })
9840
+ ] })
9841
+ ]
9842
+ }
9843
+ ),
9844
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-10 bg-[var(--deframe-widget-color-border-secondary)] flex-shrink-0" }),
9845
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end flex-1 min-w-0", children: [
9846
+ /* @__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" }),
9847
+ /* @__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" })
9848
+ ] })
9849
+ ] }),
9850
+ /* @__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" }) })
9851
+ ] }) }),
9852
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": "earn-form-skeleton-footer", className: footerClasses, children: [
9853
+ /* @__PURE__ */ jsxRuntime.jsx(
9854
+ "div",
9855
+ {
9856
+ "data-test-id": "earn-form-skeleton-cancel-btn",
9857
+ className: tailwindMerge.twMerge(
9858
+ "flex-1 h-12",
9859
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
9860
+ "border border-[color:var(--deframe-widget-color-border-secondary)]",
9861
+ "flex items-center justify-center",
9862
+ "text-[15px] [font-weight:var(--deframe-widget-font-weight-semibold)]",
9863
+ "text-[color:var(--deframe-widget-color-text-secondary)]"
9864
+ ),
9865
+ children: "Cancel"
9866
+ }
9867
+ ),
9868
+ /* @__PURE__ */ jsxRuntime.jsx(
9869
+ "div",
9870
+ {
9871
+ "data-test-id": "earn-form-skeleton-submit-btn",
9872
+ className: tailwindMerge.twMerge(
9873
+ "flex-1 h-12",
9874
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
9875
+ "bg-[var(--deframe-widget-color-brand-primary)]",
9876
+ "flex items-center justify-center",
9877
+ "text-[15px] [font-weight:var(--deframe-widget-font-weight-semibold)]",
9878
+ "text-[color:var(--deframe-widget-color-text-primary-dark)]"
9879
+ ),
9880
+ children: "Deposit"
9881
+ }
9882
+ )
9883
+ ] })
9884
+ ]
9885
+ }
9886
+ );
9887
+ }
9888
+ function EarnFeedbackOverlaySimpleView({
9889
+ variant,
9890
+ title,
9891
+ subtitle
9892
+ }) {
9893
+ const isLoading = variant === "loading";
9894
+ const wrapperClasses = tailwindMerge.twMerge(
9895
+ "relative flex flex-col overflow-hidden w-[420px]",
9896
+ "rounded-[var(--deframe-widget-size-radius-md)]",
9897
+ "bg-[var(--deframe-widget-color-bg-primary)]",
9898
+ "border border-[color:var(--deframe-widget-color-border-secondary)]",
9899
+ "font-[var(--deframe-widget-font-family)]"
9900
+ );
9901
+ const overlayClasses = tailwindMerge.twMerge(
9902
+ "absolute inset-0 z-10",
9903
+ "flex flex-col items-center justify-center",
9904
+ "gap-[var(--deframe-widget-size-gap-lg)]",
9905
+ "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-lg)]",
9906
+ "rounded-[inherit]",
9907
+ "backdrop-blur-[12px] [-webkit-backdrop-filter:blur(12px)]",
9908
+ "bg-[color-mix(in_srgb,var(--deframe-widget-color-bg-primary)_88%,transparent)]"
9909
+ );
9910
+ const textSectionClasses = tailwindMerge.twMerge(
9911
+ "flex flex-col items-center",
9912
+ "gap-[var(--deframe-widget-size-gap-sm)] text-center"
9913
+ );
9914
+ const titleClasses = tailwindMerge.twMerge(
9915
+ 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]"
9916
+ );
9917
+ const subtitleClasses = tailwindMerge.twMerge(
9918
+ "[font-size:var(--deframe-widget-font-size-md)] [line-height:1.6]",
9919
+ "[font-weight:var(--deframe-widget-font-weight-regular)]",
9920
+ "font-[var(--deframe-widget-font-family)]",
9921
+ "text-[color:var(--deframe-widget-color-text-secondary)]",
9922
+ "max-w-[260px]"
9923
+ );
9924
+ return /* @__PURE__ */ jsxRuntime.jsxs(
9925
+ "div",
9926
+ {
9927
+ "data-test-id": "earn-feedback-overlay-wrapper",
9928
+ "data-slot": "earn-feedback-overlay-wrapper",
9929
+ className: wrapperClasses,
9930
+ children: [
9931
+ /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "earn-feedback-overlay-skeleton", children: /* @__PURE__ */ jsxRuntime.jsx(EarnFormSkeleton, {}) }),
9932
+ /* @__PURE__ */ jsxRuntime.jsxs(
9933
+ framerMotion.motion.div,
9934
+ {
9935
+ "data-test-id": "earn-feedback-overlay",
9936
+ "data-slot": "earn-feedback-overlay",
9937
+ initial: { opacity: 0 },
9938
+ animate: { opacity: 1 },
9939
+ exit: { opacity: 0 },
9940
+ transition: { duration: 0.2 },
9941
+ className: overlayClasses,
9942
+ children: [
9943
+ isLoading && /* @__PURE__ */ jsxRuntime.jsx(LoadingIcon2, {}),
9944
+ variant === "success" && /* @__PURE__ */ jsxRuntime.jsx(SuccessIcon2, {}),
9945
+ variant === "warning" && /* @__PURE__ */ jsxRuntime.jsx(WarningIcon2, {}),
9946
+ variant === "error" && /* @__PURE__ */ jsxRuntime.jsx(ErrorIcon2, {}),
9947
+ /* @__PURE__ */ jsxRuntime.jsxs(
9948
+ "div",
9949
+ {
9950
+ "data-test-id": "earn-feedback-text",
9951
+ "data-slot": "earn-feedback-text",
9952
+ className: textSectionClasses,
9953
+ children: [
9954
+ /* @__PURE__ */ jsxRuntime.jsx(
9955
+ "span",
9956
+ {
9957
+ "data-test-id": "earn-feedback-title",
9958
+ "data-slot": "earn-feedback-title",
9959
+ className: titleClasses,
9960
+ children: title
9961
+ }
9962
+ ),
9963
+ subtitle && /* @__PURE__ */ jsxRuntime.jsx(
9964
+ "span",
9965
+ {
9966
+ "data-test-id": "earn-feedback-subtitle",
9967
+ "data-slot": "earn-feedback-subtitle",
9968
+ className: subtitleClasses,
9969
+ children: subtitle
9970
+ }
9971
+ )
9972
+ ]
9973
+ }
9974
+ )
9975
+ ]
9976
+ },
9977
+ "earn-feedback-overlay"
9978
+ )
9979
+ ]
9980
+ }
9981
+ );
9982
+ }
9983
+ function LoadingIcon2() {
9984
+ const green = "var(--deframe-widget-color-brand-primary)";
9985
+ const trackColor = "color-mix(in srgb, var(--deframe-widget-color-brand-primary) 12%, transparent)";
9986
+ const sw = 2.8;
9987
+ const aw = 2.4;
9988
+ return /* @__PURE__ */ jsxRuntime.jsxs(
9989
+ framerMotion.motion.svg,
9990
+ {
9991
+ "data-test-id": "earn-feedback-loading-icon",
9992
+ "data-slot": "earn-feedback-loading-icon",
9993
+ width: "56",
9994
+ height: "56",
9995
+ viewBox: "0 0 56 56",
9996
+ fill: "none",
9997
+ "aria-hidden": "true",
9998
+ animate: { rotate: 360 },
9999
+ transition: { duration: 1.6, repeat: Infinity, ease: "linear" },
10000
+ children: [
10001
+ /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "28", cy: "28", r: "22", stroke: trackColor, strokeWidth: sw }),
10002
+ /* @__PURE__ */ jsxRuntime.jsx(
10003
+ "path",
10004
+ {
10005
+ d: "M 6.75 22.31 A 22 22 0 0 1 49.25 22.31",
10006
+ stroke: green,
10007
+ strokeWidth: sw,
10008
+ strokeLinecap: "round"
10009
+ }
10010
+ ),
10011
+ /* @__PURE__ */ jsxRuntime.jsx(
10012
+ "path",
10013
+ {
10014
+ d: "M 45.0 18.1 L 49.25 22.31 L 51.0 16.5",
10015
+ stroke: green,
10016
+ strokeWidth: aw,
10017
+ strokeLinecap: "round",
10018
+ strokeLinejoin: "round"
10019
+ }
10020
+ ),
10021
+ /* @__PURE__ */ jsxRuntime.jsx(
10022
+ "path",
10023
+ {
10024
+ d: "M 49.25 33.69 A 22 22 0 0 1 6.75 33.69",
10025
+ stroke: green,
10026
+ strokeWidth: sw,
10027
+ strokeLinecap: "round"
10028
+ }
10029
+ ),
10030
+ /* @__PURE__ */ jsxRuntime.jsx(
10031
+ "path",
10032
+ {
10033
+ d: "M 11.0 37.9 L 6.75 33.69 L 5.0 39.5",
10034
+ stroke: green,
10035
+ strokeWidth: aw,
10036
+ strokeLinecap: "round",
10037
+ strokeLinejoin: "round"
10038
+ }
10039
+ )
10040
+ ]
10041
+ }
10042
+ );
10043
+ }
10044
+ function SuccessIcon2() {
10045
+ return /* @__PURE__ */ jsxRuntime.jsx(
10046
+ framerMotion.motion.div,
10047
+ {
10048
+ "data-test-id": "earn-feedback-success-icon",
10049
+ "data-slot": "earn-feedback-success-icon",
10050
+ initial: { scale: 0.55, opacity: 0 },
10051
+ animate: { scale: 1, opacity: 1 },
10052
+ transition: { type: "spring", stiffness: 300, damping: 20, delay: 0.05 },
10053
+ className: tailwindMerge.twMerge(
10054
+ "flex items-center justify-center shrink-0",
10055
+ "w-[64px] h-[64px] rounded-full"
10056
+ ),
10057
+ style: {
10058
+ background: "var(--deframe-widget-color-state-success)",
10059
+ 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)"
10060
+ },
10061
+ children: /* @__PURE__ */ jsxRuntime.jsx(
10062
+ "svg",
10063
+ {
10064
+ width: "36",
10065
+ height: "36",
10066
+ viewBox: "0 0 44 44",
10067
+ fill: "none",
10068
+ "aria-hidden": "true",
10069
+ children: /* @__PURE__ */ jsxRuntime.jsx(
10070
+ framerMotion.motion.path,
10071
+ {
10072
+ d: "M10 22 L18 30 L34 14",
10073
+ stroke: "white",
10074
+ strokeWidth: "3.5",
10075
+ strokeLinecap: "round",
10076
+ strokeLinejoin: "round",
10077
+ initial: { pathLength: 0 },
10078
+ animate: { pathLength: 1 },
10079
+ transition: { duration: 0.45, delay: 0.2, ease: "easeOut" }
10080
+ }
10081
+ )
10082
+ }
10083
+ )
10084
+ }
10085
+ );
10086
+ }
10087
+ function ErrorIcon2() {
10088
+ return /* @__PURE__ */ jsxRuntime.jsx(
10089
+ framerMotion.motion.div,
10090
+ {
10091
+ "data-test-id": "earn-feedback-error-icon",
10092
+ "data-slot": "earn-feedback-error-icon",
10093
+ initial: { scale: 0.55, opacity: 0 },
10094
+ animate: { scale: 1, opacity: 1 },
10095
+ transition: { type: "spring", stiffness: 300, damping: 20, delay: 0.05 },
10096
+ className: tailwindMerge.twMerge(
10097
+ "flex items-center justify-center shrink-0",
10098
+ "w-[64px] h-[64px] rounded-full"
10099
+ ),
10100
+ style: {
10101
+ background: "var(--deframe-widget-color-state-error)",
10102
+ 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)"
10103
+ },
10104
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
10105
+ "svg",
10106
+ {
10107
+ width: "36",
10108
+ height: "36",
10109
+ viewBox: "0 0 44 44",
10110
+ fill: "none",
10111
+ "aria-hidden": "true",
10112
+ children: [
10113
+ /* @__PURE__ */ jsxRuntime.jsx(
10114
+ framerMotion.motion.line,
10115
+ {
10116
+ x1: "14",
10117
+ y1: "14",
10118
+ x2: "30",
10119
+ y2: "30",
10120
+ stroke: "white",
10121
+ strokeWidth: "3.5",
10122
+ strokeLinecap: "round",
10123
+ initial: { pathLength: 0 },
10124
+ animate: { pathLength: 1 },
10125
+ transition: { duration: 0.25, delay: 0.2, ease: "easeOut" }
10126
+ }
10127
+ ),
10128
+ /* @__PURE__ */ jsxRuntime.jsx(
10129
+ framerMotion.motion.line,
10130
+ {
10131
+ x1: "30",
10132
+ y1: "14",
10133
+ x2: "14",
10134
+ y2: "30",
10135
+ stroke: "white",
10136
+ strokeWidth: "3.5",
10137
+ strokeLinecap: "round",
10138
+ initial: { pathLength: 0 },
10139
+ animate: { pathLength: 1 },
10140
+ transition: { duration: 0.25, delay: 0.38, ease: "easeOut" }
10141
+ }
10142
+ )
10143
+ ]
10144
+ }
10145
+ )
10146
+ }
10147
+ );
10148
+ }
10149
+ function WarningIcon2() {
10150
+ const amber = "var(--deframe-widget-color-state-warning)";
10151
+ const amberGlow = "color-mix(in srgb, var(--deframe-widget-color-state-warning) 12%, transparent)";
10152
+ const amberGlow2 = "color-mix(in srgb, var(--deframe-widget-color-state-warning) 22%, transparent)";
10153
+ return /* @__PURE__ */ jsxRuntime.jsx(
10154
+ framerMotion.motion.div,
10155
+ {
10156
+ "data-test-id": "earn-feedback-warning-icon",
10157
+ "data-slot": "earn-feedback-warning-icon",
10158
+ initial: { scale: 0.55, opacity: 0 },
10159
+ animate: { scale: 1, opacity: 1 },
10160
+ transition: { type: "spring", stiffness: 300, damping: 20, delay: 0.05 },
10161
+ className: tailwindMerge.twMerge(
10162
+ "flex items-center justify-center shrink-0",
10163
+ "w-[64px] h-[64px] rounded-full"
10164
+ ),
10165
+ style: {
10166
+ background: amber,
10167
+ boxShadow: `0 0 0 7px ${amberGlow}, 0 0 24px ${amberGlow2}`
10168
+ },
10169
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
10170
+ "svg",
10171
+ {
10172
+ width: "36",
10173
+ height: "36",
10174
+ viewBox: "0 0 44 44",
10175
+ fill: "none",
10176
+ "aria-hidden": "true",
10177
+ children: [
10178
+ /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "22", cy: "22", r: "13", stroke: "white", strokeWidth: "2.5" }),
10179
+ /* @__PURE__ */ jsxRuntime.jsx(
10180
+ framerMotion.motion.line,
10181
+ {
10182
+ x1: "22",
10183
+ y1: "22",
10184
+ x2: "22",
10185
+ y2: "13",
10186
+ stroke: "white",
10187
+ strokeWidth: "2.5",
10188
+ strokeLinecap: "round",
10189
+ initial: { pathLength: 0 },
10190
+ animate: { pathLength: 1 },
10191
+ transition: { duration: 0.3, delay: 0.2, ease: "easeOut" }
10192
+ }
10193
+ ),
10194
+ /* @__PURE__ */ jsxRuntime.jsx(
10195
+ framerMotion.motion.line,
10196
+ {
10197
+ x1: "22",
10198
+ y1: "22",
10199
+ x2: "31",
10200
+ y2: "22",
10201
+ stroke: "white",
10202
+ strokeWidth: "2.5",
10203
+ strokeLinecap: "round",
10204
+ initial: { pathLength: 0 },
10205
+ animate: { pathLength: 1 },
10206
+ transition: { duration: 0.3, delay: 0.38, ease: "easeOut" }
10207
+ }
10208
+ )
10209
+ ]
10210
+ }
10211
+ )
10212
+ }
10213
+ );
10214
+ }
10215
+ var EarnDepositProcessingSimpleView = ({
10216
+ title,
10217
+ descriptionPrefix
10218
+ }) => {
10219
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "earn-deposit-processing-simple-view", children: /* @__PURE__ */ jsxRuntime.jsx(
10220
+ EarnFeedbackOverlaySimpleView,
10221
+ {
10222
+ variant: "loading",
10223
+ title,
10224
+ subtitle: descriptionPrefix
10225
+ }
10226
+ ) });
10227
+ };
10228
+ var EarnDepositSuccessView = ({
10229
+ title,
10230
+ descriptionPrefix,
10231
+ formattedAmount,
8820
10232
  tokenSymbol,
8821
10233
  descriptionSuffix,
8822
10234
  descriptionLinkText,
@@ -8886,6 +10298,25 @@ var EarnDepositSuccessView = ({
8886
10298
  }
8887
10299
  );
8888
10300
  };
10301
+ var EarnDepositSuccessSimpleView = ({
10302
+ title,
10303
+ descriptionSuffix,
10304
+ onClose
10305
+ }) => {
10306
+ React6__namespace.default.useEffect(() => {
10307
+ if (!onClose) return;
10308
+ const timer = setTimeout(onClose, 5e3);
10309
+ return () => clearTimeout(timer);
10310
+ }, [onClose]);
10311
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "earn-deposit-success-simple-view", children: /* @__PURE__ */ jsxRuntime.jsx(
10312
+ EarnFeedbackOverlaySimpleView,
10313
+ {
10314
+ variant: "success",
10315
+ title,
10316
+ subtitle: descriptionSuffix
10317
+ }
10318
+ ) });
10319
+ };
8889
10320
  var EarnDepositWarningView = ({
8890
10321
  progress,
8891
10322
  title,
@@ -8945,6 +10376,25 @@ var EarnDepositWarningView = ({
8945
10376
  }
8946
10377
  );
8947
10378
  };
10379
+ var EarnDepositWarningSimpleView = ({
10380
+ title,
10381
+ description,
10382
+ onBack
10383
+ }) => {
10384
+ React6__namespace.default.useEffect(() => {
10385
+ if (!onBack) return;
10386
+ const timer = setTimeout(onBack, 5e3);
10387
+ return () => clearTimeout(timer);
10388
+ }, [onBack]);
10389
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "earn-deposit-warning-simple-view", children: /* @__PURE__ */ jsxRuntime.jsx(
10390
+ EarnFeedbackOverlaySimpleView,
10391
+ {
10392
+ variant: "warning",
10393
+ title,
10394
+ subtitle: description
10395
+ }
10396
+ ) });
10397
+ };
8948
10398
  var EarnDepositFailedView = ({
8949
10399
  progress,
8950
10400
  title,
@@ -9007,6 +10457,25 @@ var EarnDepositFailedView = ({
9007
10457
  }
9008
10458
  );
9009
10459
  };
10460
+ var EarnDepositFailedSimpleView = ({
10461
+ title,
10462
+ description,
10463
+ onBack
10464
+ }) => {
10465
+ React6__namespace.default.useEffect(() => {
10466
+ if (!onBack) return;
10467
+ const timer = setTimeout(onBack, 5e3);
10468
+ return () => clearTimeout(timer);
10469
+ }, [onBack]);
10470
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "earn-deposit-failed-simple-view", children: /* @__PURE__ */ jsxRuntime.jsx(
10471
+ EarnFeedbackOverlaySimpleView,
10472
+ {
10473
+ variant: "error",
10474
+ title,
10475
+ subtitle: description
10476
+ }
10477
+ ) });
10478
+ };
9010
10479
  var EarnWithdrawProcessingView = ({
9011
10480
  progress,
9012
10481
  title,
@@ -9072,6 +10541,19 @@ var EarnWithdrawProcessingView = ({
9072
10541
  }
9073
10542
  );
9074
10543
  };
10544
+ var EarnWithdrawProcessingSimpleView = ({
10545
+ title,
10546
+ descriptionPrefix
10547
+ }) => {
10548
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "earn-withdraw-processing-simple-view", children: /* @__PURE__ */ jsxRuntime.jsx(
10549
+ EarnFeedbackOverlaySimpleView,
10550
+ {
10551
+ variant: "loading",
10552
+ title,
10553
+ subtitle: descriptionPrefix
10554
+ }
10555
+ ) });
10556
+ };
9075
10557
  var EarnWithdrawSuccessView = ({
9076
10558
  title,
9077
10559
  descriptionPrefix,
@@ -9138,6 +10620,25 @@ var EarnWithdrawSuccessView = ({
9138
10620
  }
9139
10621
  );
9140
10622
  };
10623
+ var EarnWithdrawSuccessSimpleView = ({
10624
+ title,
10625
+ descriptionSuffix,
10626
+ onClose
10627
+ }) => {
10628
+ React6__namespace.default.useEffect(() => {
10629
+ if (!onClose) return;
10630
+ const timer = setTimeout(onClose, 5e3);
10631
+ return () => clearTimeout(timer);
10632
+ }, [onClose]);
10633
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "earn-withdraw-success-simple-view", children: /* @__PURE__ */ jsxRuntime.jsx(
10634
+ EarnFeedbackOverlaySimpleView,
10635
+ {
10636
+ variant: "success",
10637
+ title,
10638
+ subtitle: descriptionSuffix
10639
+ }
10640
+ ) });
10641
+ };
9141
10642
  var EarnWithdrawWarningView = ({
9142
10643
  progress,
9143
10644
  title,
@@ -9197,6 +10698,25 @@ var EarnWithdrawWarningView = ({
9197
10698
  }
9198
10699
  );
9199
10700
  };
10701
+ var EarnWithdrawWarningSimpleView = ({
10702
+ title,
10703
+ description,
10704
+ onBack
10705
+ }) => {
10706
+ React6__namespace.default.useEffect(() => {
10707
+ if (!onBack) return;
10708
+ const timer = setTimeout(onBack, 5e3);
10709
+ return () => clearTimeout(timer);
10710
+ }, [onBack]);
10711
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "earn-withdraw-warning-simple-view", children: /* @__PURE__ */ jsxRuntime.jsx(
10712
+ EarnFeedbackOverlaySimpleView,
10713
+ {
10714
+ variant: "warning",
10715
+ title,
10716
+ subtitle: description
10717
+ }
10718
+ ) });
10719
+ };
9200
10720
  var EarnWithdrawFailedView = ({
9201
10721
  progress,
9202
10722
  title,
@@ -9259,6 +10779,25 @@ var EarnWithdrawFailedView = ({
9259
10779
  }
9260
10780
  );
9261
10781
  };
10782
+ var EarnWithdrawFailedSimpleView = ({
10783
+ title,
10784
+ description,
10785
+ onBack
10786
+ }) => {
10787
+ React6__namespace.default.useEffect(() => {
10788
+ if (!onBack) return;
10789
+ const timer = setTimeout(onBack, 5e3);
10790
+ return () => clearTimeout(timer);
10791
+ }, [onBack]);
10792
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "earn-withdraw-failed-simple-view", children: /* @__PURE__ */ jsxRuntime.jsx(
10793
+ EarnFeedbackOverlaySimpleView,
10794
+ {
10795
+ variant: "error",
10796
+ title,
10797
+ subtitle: description
10798
+ }
10799
+ ) });
10800
+ };
9262
10801
  var DashboardCard = ({ children, className }) => {
9263
10802
  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "dashboard-card", className: tailwindMerge.twMerge("bg-[var(--deframe-widget-color-bg-subtle)] rounded", className), children });
9264
10803
  };
@@ -9557,15 +11096,15 @@ var DashboardPortfolioView = ({
9557
11096
  "value"
9558
11097
  ) }) }),
9559
11098
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex lg:hidden flex-row gap-2 sm:gap-4 mt-6 w-full", children: [
9560
- /* @__PURE__ */ jsxRuntime.jsx(Link2__default.default, { "data-testid": "dashboard-quick-action-deposit-mobile", href: "/dashboard/deposit", className: "flex-1 min-w-0 cursor-pointer", onClick: onDepositClick, children: /* @__PURE__ */ jsxRuntime.jsxs(PrimaryButton, { children: [
11099
+ /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "dashboard-quick-action-deposit-mobile", className: "flex-1 min-w-0 cursor-pointer", onClick: onDepositClick, children: /* @__PURE__ */ jsxRuntime.jsxs(PrimaryButton, { children: [
9561
11100
  /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineArrowUpward, { className: "w-4 h-4 shrink-0" }),
9562
11101
  "Depositar"
9563
11102
  ] }) }),
9564
- /* @__PURE__ */ jsxRuntime.jsx(Link2__default.default, { "data-testid": "dashboard-quick-action-withdraw-mobile", href: "/dashboard/withdraw", className: "flex-1 min-w-0 cursor-pointer", onClick: onWithdrawClick, children: /* @__PURE__ */ jsxRuntime.jsxs(PrimaryButton, { children: [
11103
+ /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "dashboard-quick-action-withdraw-mobile", className: "flex-1 min-w-0 cursor-pointer", onClick: onWithdrawClick, children: /* @__PURE__ */ jsxRuntime.jsxs(PrimaryButton, { children: [
9565
11104
  /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineArrowDownward, { className: "w-4 h-4 shrink-0" }),
9566
11105
  "Sacar"
9567
11106
  ] }) }),
9568
- /* @__PURE__ */ jsxRuntime.jsx(Link2__default.default, { "data-testid": "dashboard-quick-action-swap-mobile", href: "/dashboard/swap", className: "flex-1 min-w-0 cursor-pointer", onClick: onSwapClick, children: /* @__PURE__ */ jsxRuntime.jsxs(PrimaryButton, { children: [
11107
+ /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "dashboard-quick-action-swap-mobile", className: "flex-1 min-w-0 cursor-pointer", onClick: onSwapClick, children: /* @__PURE__ */ jsxRuntime.jsxs(PrimaryButton, { children: [
9569
11108
  /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineSwapHoriz, { className: "w-4 h-4 shrink-0" }),
9570
11109
  "Trocar"
9571
11110
  ] }) })
@@ -10084,7 +11623,7 @@ var DashboardRecentTransactionsView = ({
10084
11623
  return /* @__PURE__ */ jsxRuntime.jsx(DashboardCard, { className: "p-6 bg-[var(--deframe-widget-color-bg-subtle)]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
10085
11624
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-start", children: [
10086
11625
  /* @__PURE__ */ jsxRuntime.jsx(TextBody, { className: "mb-6", children: "Transa\xE7\xF5es recentes" }),
10087
- /* @__PURE__ */ jsxRuntime.jsx(Link2__default.default, { href: "/dashboard/history", onClick: onViewAllClick, children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { className: "text-[var(--deframe-widget-color-brand-primary)] cursor-pointer hover:underline", children: "Ver todas" }) })
11626
+ /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: onViewAllClick, children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { className: "text-[var(--deframe-widget-color-brand-primary)] cursor-pointer hover:underline", children: "Ver todas" }) })
10088
11627
  ] }),
10089
11628
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2 mt-[-16px]", children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 p-2", children: [
10090
11629
  /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant: "circle", width: "40px", height: "40px", shimmer: true }),
@@ -10428,7 +11967,7 @@ var DashboardInvestmentOpportunitiesView = ({
10428
11967
  isLoadingBalances ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-baseline gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "80px", height: "24px", shimmer: true }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-baseline gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-large", children: formattedTotalProfit }) })
10429
11968
  ] }),
10430
11969
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col", children: strategiesContent }),
10431
- /* @__PURE__ */ jsxRuntime.jsx(Link2__default.default, { href: "/dashboard/earn", className: "w-full", onClick: onViewAllStrategiesClick, children: /* @__PURE__ */ jsxRuntime.jsx(SecondaryButton, { children: "Ver todas as estrat\xE9gias" }) })
11970
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", onClick: onViewAllStrategiesClick, children: /* @__PURE__ */ jsxRuntime.jsx(SecondaryButton, { children: "Ver todas as estrat\xE9gias" }) })
10432
11971
  ] }) });
10433
11972
  };
10434
11973
  var DashboardView = ({
@@ -10445,15 +11984,15 @@ var DashboardView = ({
10445
11984
  /* @__PURE__ */ jsxRuntime.jsx(DashboardCard, { "data-testid": "dashboard-quick-actions-card", className: "hidden lg:block p-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-3", children: [
10446
11985
  /* @__PURE__ */ jsxRuntime.jsx(TextBody, { className: "mb-6", children: "A\xE7\xF5es r\xE1pidas" }),
10447
11986
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row gap-4 w-full", children: [
10448
- /* @__PURE__ */ jsxRuntime.jsx(Link2__default.default, { "data-testid": "dashboard-quick-action-deposit", href: "/dashboard/deposit", className: "flex-1 min-w-0 cursor-pointer", onClick: () => quickActions == null ? void 0 : quickActions.onDepositClick(), children: /* @__PURE__ */ jsxRuntime.jsxs(PrimaryButton, { children: [
11987
+ /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "dashboard-quick-action-deposit", className: "flex-1 min-w-0 cursor-pointer", onClick: () => quickActions == null ? void 0 : quickActions.onDepositClick(), children: /* @__PURE__ */ jsxRuntime.jsxs(PrimaryButton, { children: [
10449
11988
  /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineArrowUpward, { className: "w-4 h-4 shrink-0" }),
10450
11989
  "Depositar"
10451
11990
  ] }) }),
10452
- /* @__PURE__ */ jsxRuntime.jsx(Link2__default.default, { "data-testid": "dashboard-quick-action-withdraw", href: "/dashboard/withdraw", className: "flex-1 min-w-0 cursor-pointer", onClick: () => quickActions == null ? void 0 : quickActions.onWithdrawClick(), children: /* @__PURE__ */ jsxRuntime.jsxs(PrimaryButton, { children: [
11991
+ /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "dashboard-quick-action-withdraw", className: "flex-1 min-w-0 cursor-pointer", onClick: () => quickActions == null ? void 0 : quickActions.onWithdrawClick(), children: /* @__PURE__ */ jsxRuntime.jsxs(PrimaryButton, { children: [
10453
11992
  /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineArrowDownward, { className: "w-4 h-4 shrink-0" }),
10454
11993
  "Sacar"
10455
11994
  ] }) }),
10456
- /* @__PURE__ */ jsxRuntime.jsx(Link2__default.default, { "data-testid": "dashboard-quick-action-swap", href: "/dashboard/swap", className: "flex-1 min-w-0 cursor-pointer", onClick: () => quickActions == null ? void 0 : quickActions.onSwapClick(), children: /* @__PURE__ */ jsxRuntime.jsxs(PrimaryButton, { children: [
11995
+ /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "dashboard-quick-action-swap", className: "flex-1 min-w-0 cursor-pointer", onClick: () => quickActions == null ? void 0 : quickActions.onSwapClick(), children: /* @__PURE__ */ jsxRuntime.jsxs(PrimaryButton, { children: [
10457
11996
  /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineSwapHoriz, { className: "w-4 h-4 shrink-0" }),
10458
11997
  "Trocar"
10459
11998
  ] }) })
@@ -10583,10 +12122,15 @@ exports.DetailsHeader = DetailsHeader;
10583
12122
  exports.EarnAmountInputView = EarnAmountInputView;
10584
12123
  exports.EarnBalanceCard = EarnBalanceCard;
10585
12124
  exports.EarnBytecodeErrorView = EarnBytecodeErrorView;
12125
+ exports.EarnDepositFailedSimpleView = EarnDepositFailedSimpleView;
10586
12126
  exports.EarnDepositFailedView = EarnDepositFailedView;
10587
12127
  exports.EarnDepositFormView = EarnDepositFormView;
12128
+ exports.EarnDepositFormViewSimple = EarnDepositFormViewSimple;
12129
+ exports.EarnDepositProcessingSimpleView = EarnDepositProcessingSimpleView;
10588
12130
  exports.EarnDepositProcessingView = EarnDepositProcessingView;
12131
+ exports.EarnDepositSuccessSimpleView = EarnDepositSuccessSimpleView;
10589
12132
  exports.EarnDepositSuccessView = EarnDepositSuccessView;
12133
+ exports.EarnDepositWarningSimpleView = EarnDepositWarningSimpleView;
10590
12134
  exports.EarnDepositWarningView = EarnDepositWarningView;
10591
12135
  exports.EarnDesktopView = EarnDesktopView;
10592
12136
  exports.EarnExploreGridView = EarnExploreGridView;
@@ -10600,11 +12144,16 @@ exports.EarnPositionCardView = EarnPositionCardView;
10600
12144
  exports.EarnRecentTransactionsView = EarnRecentTransactionsView;
10601
12145
  exports.EarnTokenSelectorView = EarnTokenSelectorView;
10602
12146
  exports.EarnTxStatusCardView = EarnTxStatusCardView;
12147
+ exports.EarnWithdrawFailedSimpleView = EarnWithdrawFailedSimpleView;
10603
12148
  exports.EarnWithdrawFailedView = EarnWithdrawFailedView;
10604
12149
  exports.EarnWithdrawFormView = EarnWithdrawFormView;
12150
+ exports.EarnWithdrawFormViewSimple = EarnWithdrawFormViewSimple;
12151
+ exports.EarnWithdrawProcessingSimpleView = EarnWithdrawProcessingSimpleView;
10605
12152
  exports.EarnWithdrawProcessingView = EarnWithdrawProcessingView;
12153
+ exports.EarnWithdrawSuccessSimpleView = EarnWithdrawSuccessSimpleView;
10606
12154
  exports.EarnWithdrawSuccessView = EarnWithdrawSuccessView;
10607
12155
  exports.EarnWithdrawTokenSelectorView = EarnWithdrawTokenSelectorView;
12156
+ exports.EarnWithdrawWarningSimpleView = EarnWithdrawWarningSimpleView;
10608
12157
  exports.EarnWithdrawWarningView = EarnWithdrawWarningView;
10609
12158
  exports.Fiat = Currency;
10610
12159
  exports.FlexCol = FlexCol;