@deframe-sdk/components 0.1.25 → 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.
- package/dist/index.d.mts +22 -2
- package/dist/index.d.ts +22 -2
- package/dist/index.js +1673 -120
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1664 -121
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +232 -21
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -2957,10 +2957,10 @@ var StrategyDetailsView = ({
|
|
|
2957
2957
|
notFoundMessage
|
|
2958
2958
|
}) => {
|
|
2959
2959
|
if (error) {
|
|
2960
|
-
return /* @__PURE__ */ jsxRuntime.jsx(BackgroundContainer, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-text-secondary dark:text-text-secondary-dark p-md", children: error }) });
|
|
2960
|
+
return /* @__PURE__ */ jsxRuntime.jsx(BackgroundContainer, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[color:var(--deframe-widget-color-text-secondary)] dark:text-[color:var(--deframe-widget-color-text-secondary-dark)] p-md", children: error }) });
|
|
2961
2961
|
}
|
|
2962
2962
|
if (notFoundMessage) {
|
|
2963
|
-
return /* @__PURE__ */ jsxRuntime.jsx(BackgroundContainer, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-text-secondary dark:text-text-secondary-dark p-md", children: notFoundMessage }) });
|
|
2963
|
+
return /* @__PURE__ */ jsxRuntime.jsx(BackgroundContainer, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[color:var(--deframe-widget-color-text-secondary)] dark:text-[color:var(--deframe-widget-color-text-secondary-dark)] p-md", children: notFoundMessage }) });
|
|
2964
2964
|
}
|
|
2965
2965
|
return /* @__PURE__ */ jsxRuntime.jsxs(BackgroundContainer, { children: [
|
|
2966
2966
|
/* @__PURE__ */ jsxRuntime.jsx(DetailsHeader, { title: headerTitle, onBack, backAriaLabel }),
|
|
@@ -4481,13 +4481,13 @@ var SwapFromCardView = ({
|
|
|
4481
4481
|
TextBody,
|
|
4482
4482
|
{
|
|
4483
4483
|
variant: "text-small",
|
|
4484
|
-
className: "text-text-tertiary dark:text-text-tertiary-dark",
|
|
4484
|
+
className: "text-[color:var(--deframe-widget-color-text-tertiary)] dark:text-[color:var(--deframe-widget-color-text-tertiary-dark)]",
|
|
4485
4485
|
children: onBalanceClick ? /* @__PURE__ */ jsxRuntime.jsxs(
|
|
4486
4486
|
"button",
|
|
4487
4487
|
{
|
|
4488
4488
|
type: "button",
|
|
4489
4489
|
onClick: onBalanceClick,
|
|
4490
|
-
className: "cursor-pointer hover:text-text-secondary dark:hover:text-text-secondary-dark transition-colors",
|
|
4490
|
+
className: "cursor-pointer hover:text-[color:var(--deframe-widget-color-text-secondary)] dark:hover:text-[color:var(--deframe-widget-color-text-secondary-dark)] transition-colors",
|
|
4491
4491
|
"data-testid": "swap-from-balance",
|
|
4492
4492
|
children: [
|
|
4493
4493
|
labels.balanceLabel,
|
|
@@ -4536,7 +4536,7 @@ var SwapFromCardView = ({
|
|
|
4536
4536
|
{
|
|
4537
4537
|
as: "span",
|
|
4538
4538
|
variant: "text-small",
|
|
4539
|
-
className: amountHasError ? "text-state-error dark:text-state-error" : "text-text-tertiary dark:text-text-tertiary-dark",
|
|
4539
|
+
className: amountHasError ? "text-[color:var(--deframe-widget-color-state-error)] dark:text-[color:var(--deframe-widget-color-state-error)]" : "text-[color:var(--deframe-widget-color-text-tertiary)] dark:text-[color:var(--deframe-widget-color-text-tertiary-dark)]",
|
|
4540
4540
|
children: isAmountUsdLoading ? /* @__PURE__ */ jsxRuntime.jsx(LoadingDots, {}) : amountUsdFormatted
|
|
4541
4541
|
}
|
|
4542
4542
|
)
|
|
@@ -4586,7 +4586,7 @@ var SwapToCardView = ({
|
|
|
4586
4586
|
TextBody,
|
|
4587
4587
|
{
|
|
4588
4588
|
variant: "text-small",
|
|
4589
|
-
className: "text-text-tertiary dark:text-text-tertiary-dark",
|
|
4589
|
+
className: "text-[color:var(--deframe-widget-color-text-tertiary)] dark:text-[color:var(--deframe-widget-color-text-tertiary-dark)]",
|
|
4590
4590
|
children: /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-testid": "swap-to-balance", children: [
|
|
4591
4591
|
labels.balanceLabel,
|
|
4592
4592
|
": ",
|
|
@@ -4623,7 +4623,7 @@ var SwapToCardView = ({
|
|
|
4623
4623
|
{
|
|
4624
4624
|
as: "span",
|
|
4625
4625
|
variant: "text-small",
|
|
4626
|
-
className: "text-text-tertiary dark:text-text-tertiary-dark",
|
|
4626
|
+
className: "text-[color:var(--deframe-widget-color-text-tertiary)] dark:text-[color:var(--deframe-widget-color-text-tertiary-dark)]",
|
|
4627
4627
|
children: isOutputUsdLoading ? /* @__PURE__ */ jsxRuntime.jsx(LoadingDots, {}) : outputUsdFormatted
|
|
4628
4628
|
}
|
|
4629
4629
|
)
|
|
@@ -4899,7 +4899,7 @@ var SwapFormView = ({
|
|
|
4899
4899
|
{
|
|
4900
4900
|
"data-testid": "swap-form-view",
|
|
4901
4901
|
className: "flex-1 min-h-0 overflow-y-auto swap-flow-content pr-sm",
|
|
4902
|
-
children: /* @__PURE__ */ jsxRuntime.jsx("form", { ref: formRef, onSubmit, "data-testid": "swap-flow-form", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-md text-text-secondary dark:text-text-secondary-dark", children: [
|
|
4902
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("form", { ref: formRef, onSubmit, "data-testid": "swap-flow-form", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-md text-[color:var(--deframe-widget-color-text-secondary)] dark:text-[color:var(--deframe-widget-color-text-secondary-dark)]", children: [
|
|
4903
4903
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-md", children: [
|
|
4904
4904
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-sm", children: [
|
|
4905
4905
|
/* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h5", className: "!text-[21px]", children: /* @__PURE__ */ jsxRuntime.jsx("span", { "data-testid": "swap-flow-title", children: labels.title }) }),
|
|
@@ -4911,7 +4911,7 @@ var SwapFormView = ({
|
|
|
4911
4911
|
"data-testid": "swap-history-button",
|
|
4912
4912
|
type: "button",
|
|
4913
4913
|
onClick: onHistoryClick,
|
|
4914
|
-
className: "flex items-center justify-center w-12 h-12 transition-colors rounded-full cursor-pointer text-text-secondary dark:text-text-secondary-dark hover:text-brand-primary",
|
|
4914
|
+
className: "flex items-center justify-center w-12 h-12 transition-colors rounded-full cursor-pointer text-[color:var(--deframe-widget-color-text-secondary)] dark:text-[color:var(--deframe-widget-color-text-secondary-dark)] hover:text-brand-primary",
|
|
4915
4915
|
"aria-label": labels.historyAriaLabel,
|
|
4916
4916
|
children: /* @__PURE__ */ jsxRuntime.jsx(md.MdHistory, { className: "w-6 h-6" })
|
|
4917
4917
|
}
|
|
@@ -4925,7 +4925,7 @@ var SwapFormView = ({
|
|
|
4925
4925
|
"data-testid": "swap-switch-tokens-button",
|
|
4926
4926
|
type: "button",
|
|
4927
4927
|
onClick: onSwitchTokens,
|
|
4928
|
-
className: "w-10 h-10 rounded-full bg-brand-secondary shadow-md flex items-center justify-center text-text-primary hover:shadow-lg transition-shadow focus:outline-none focus:ring-2 focus:ring-brand-secondary cursor-pointer",
|
|
4928
|
+
className: "w-10 h-10 rounded-full bg-brand-secondary shadow-md flex items-center justify-center text-[color:var(--deframe-widget-color-text-primary)] hover:shadow-lg transition-shadow focus:outline-none focus:ring-2 focus:ring-brand-secondary cursor-pointer",
|
|
4929
4929
|
"aria-label": switchTokensAriaLabel,
|
|
4930
4930
|
children: /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineSwapVert, { className: "w-5 h-5" })
|
|
4931
4931
|
}
|
|
@@ -4941,7 +4941,7 @@ var SwapFormView = ({
|
|
|
4941
4941
|
"div",
|
|
4942
4942
|
{
|
|
4943
4943
|
"data-testid": "swap-flow-footer",
|
|
4944
|
-
className: "border-t p-md border-border-
|
|
4944
|
+
className: "border-t p-md border-[color:var(--deframe-widget-color-border-secondary)] dark:border-[color:var(--deframe-widget-color-border-secondary-dark)] bg-[var(--deframe-widget-color-bg-primary)] dark:bg-[var(--deframe-widget-color-bg-primary-dark)]",
|
|
4945
4945
|
children: /* @__PURE__ */ jsxRuntime.jsx(ConfirmSwapButtonView, __spreadValues({}, confirmButton))
|
|
4946
4946
|
}
|
|
4947
4947
|
)
|
|
@@ -7482,27 +7482,27 @@ var ApyRange = ({ children }) => {
|
|
|
7482
7482
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right justify-center text-text-highlight text-xs font-normal leading-4", children });
|
|
7483
7483
|
};
|
|
7484
7484
|
var variantStyles = {
|
|
7485
|
-
primary: "text-text-primary dark:text-text-primary-dark text-text-md",
|
|
7486
|
-
secondary: "text-text-secondary dark:text-text-secondary-dark text-text-sm font-poppins"
|
|
7485
|
+
primary: "text-[color:var(--deframe-widget-color-text-primary)] dark:text-[color:var(--deframe-widget-color-text-primary-dark)] text-text-md",
|
|
7486
|
+
secondary: "text-[color:var(--deframe-widget-color-text-secondary)] dark:text-[color:var(--deframe-widget-color-text-secondary-dark)] text-text-sm font-poppins"
|
|
7487
7487
|
};
|
|
7488
7488
|
var Label = ({ children, variant = "primary", className }) => {
|
|
7489
7489
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: tailwindMerge.twMerge(variantStyles[variant], className), children });
|
|
7490
7490
|
};
|
|
7491
7491
|
var HistoryItemSkeleton = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full bg-[var(--deframe-widget-color-bg-subtle)] rounded-xs min-h-[72px] flex items-center justify-between px-md py-sm", children: [
|
|
7492
7492
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-sm flex-1 min-w-0", children: [
|
|
7493
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-xl bg-bg-
|
|
7493
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-xl bg-[var(--deframe-widget-color-bg-tertiary)] dark:bg-[var(--deframe-widget-color-bg-tertiary-dark)] animate-pulse flex-shrink-0" }),
|
|
7494
7494
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-xs flex-1 min-w-0", children: [
|
|
7495
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-32 h-4 bg-bg-
|
|
7496
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-24 h-3 bg-bg-
|
|
7495
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-32 h-4 bg-[var(--deframe-widget-color-bg-tertiary)] dark:bg-[var(--deframe-widget-color-bg-tertiary-dark)] rounded animate-pulse" }),
|
|
7496
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-24 h-3 bg-[var(--deframe-widget-color-bg-tertiary)] dark:bg-[var(--deframe-widget-color-bg-tertiary-dark)] rounded animate-pulse" })
|
|
7497
7497
|
] })
|
|
7498
7498
|
] }),
|
|
7499
7499
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end gap-xs flex-shrink-0 ml-sm", children: [
|
|
7500
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-20 h-4 bg-bg-
|
|
7501
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-16 h-3 bg-bg-
|
|
7500
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-20 h-4 bg-[var(--deframe-widget-color-bg-tertiary)] dark:bg-[var(--deframe-widget-color-bg-tertiary-dark)] rounded animate-pulse" }),
|
|
7501
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-16 h-3 bg-[var(--deframe-widget-color-bg-tertiary)] dark:bg-[var(--deframe-widget-color-bg-tertiary-dark)] rounded animate-pulse" })
|
|
7502
7502
|
] })
|
|
7503
7503
|
] });
|
|
7504
7504
|
var HistoryGroupSkeleton = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "self-stretch flex flex-col gap-xs", children: [
|
|
7505
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-40 h-4 bg-bg-
|
|
7505
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-40 h-4 bg-[var(--deframe-widget-color-bg-tertiary)] dark:bg-[var(--deframe-widget-color-bg-tertiary-dark)] rounded animate-pulse" }),
|
|
7506
7506
|
/* @__PURE__ */ jsxRuntime.jsx(HistoryItemSkeleton, {}),
|
|
7507
7507
|
/* @__PURE__ */ jsxRuntime.jsx(HistoryItemSkeleton, {})
|
|
7508
7508
|
] });
|
|
@@ -7520,9 +7520,9 @@ var WalletBalances = ({ cards, variant = "subtle", className }) => {
|
|
|
7520
7520
|
] }) : /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h3", children: card.value })
|
|
7521
7521
|
] }, card.label)) });
|
|
7522
7522
|
};
|
|
7523
|
-
var HistoryTabEmpty = ({ title, description }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-[90vh] py-md bg-bg-
|
|
7523
|
+
var HistoryTabEmpty = ({ title, description }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-[90vh] py-md bg-[var(--deframe-widget-color-bg-primary)] dark:bg-[var(--deframe-widget-color-bg-primary-dark)] rounded-lg flex flex-col justify-center items-center gap-sm overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex flex-col justify-center items-center gap-md", children: [
|
|
7524
7524
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-center items-center gap-md text-center", children: [
|
|
7525
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-20 h-20 bg-bg-
|
|
7525
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-20 h-20 bg-[var(--deframe-widget-color-bg-tertiary)] dark:bg-[var(--deframe-widget-color-bg-tertiary-dark)] rounded-full flex justify-center items-center", children: /* @__PURE__ */ jsxRuntime.jsx(pi.PiClockCountdownBold, { className: "w-10 h-10 text-[color:var(--deframe-widget-color-text-tertiary)] dark:text-[color:var(--deframe-widget-color-text-tertiary-dark)]" }) }),
|
|
7526
7526
|
/* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h3", children: title })
|
|
7527
7527
|
] }),
|
|
7528
7528
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "self-stretch text-center", children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: description }) })
|
|
@@ -7603,7 +7603,7 @@ var EarnBalanceCard = ({
|
|
|
7603
7603
|
] })
|
|
7604
7604
|
] });
|
|
7605
7605
|
};
|
|
7606
|
-
var GroupLabel = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-text-secondary dark:text-text-secondary-dark text-sm font-medium font-poppins py-3", children });
|
|
7606
|
+
var GroupLabel = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[color:var(--deframe-widget-color-text-secondary)] dark:text-[color:var(--deframe-widget-color-text-secondary-dark)] text-sm font-medium font-poppins py-3", children });
|
|
7607
7607
|
var GroupedStrategyListView = ({
|
|
7608
7608
|
isLoading,
|
|
7609
7609
|
loadingLabel,
|
|
@@ -7724,17 +7724,17 @@ var GroupedStrategyListView = ({
|
|
|
7724
7724
|
] });
|
|
7725
7725
|
};
|
|
7726
7726
|
var DateLabel = ({ children }) => {
|
|
7727
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-text-sm-mobile font-poppins text-text-secondary dark:text-text-secondary-dark", children });
|
|
7727
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-text-sm-mobile font-poppins text-[color:var(--deframe-widget-color-text-secondary)] dark:text-[color:var(--deframe-widget-color-text-secondary-dark)]", children });
|
|
7728
7728
|
};
|
|
7729
7729
|
var ArrowBadge = ({ isDeposit }) => {
|
|
7730
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-[-2px] right-[-2px] w-[15px] h-[15px] rounded-full bg-bg-
|
|
7730
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-[-2px] right-[-2px] w-[15px] h-[15px] rounded-full bg-[var(--deframe-widget-color-bg-secondary)] dark:bg-[var(--deframe-widget-color-bg-secondary-dark)] flex items-center justify-center border border-[color:var(--deframe-widget-color-bg-secondary)] dark:border-[color:var(--deframe-widget-color-bg-secondary-dark)]", children: isDeposit ? /* @__PURE__ */ jsxRuntime.jsx(md.MdArrowDownward, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-primary)] dark:text-[color:var(--deframe-widget-color-text-primary-dark)]" }) : /* @__PURE__ */ jsxRuntime.jsx(md.MdArrowUpward, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-primary)] dark:text-[color:var(--deframe-widget-color-text-primary-dark)]" }) });
|
|
7731
7731
|
};
|
|
7732
7732
|
var TokenIconWithBadge2 = ({ src, alt, isDeposit }) => {
|
|
7733
7733
|
const fallbackText = encodeURIComponent((alt || "TOK").slice(0, 3).toUpperCase());
|
|
7734
7734
|
const fallbackSrc = `https://placehold.co/40x40?text=${fallbackText}`;
|
|
7735
7735
|
const resolvedSrc = src || fallbackSrc;
|
|
7736
7736
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-shrink-0", children: [
|
|
7737
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-xl bg-bg-
|
|
7737
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-xl bg-[var(--deframe-widget-color-bg-tertiary)] dark:bg-[var(--deframe-widget-color-bg-tertiary-dark)] flex items-center justify-center overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
7738
7738
|
"img",
|
|
7739
7739
|
{
|
|
7740
7740
|
src: resolvedSrc,
|
|
@@ -7753,7 +7753,7 @@ var SwapIconWithBadge = ({ src, alt }) => {
|
|
|
7753
7753
|
const fallbackSrc = `https://placehold.co/40x40?text=${fallbackText}`;
|
|
7754
7754
|
const resolvedSrc = src || fallbackSrc;
|
|
7755
7755
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-shrink-0", children: [
|
|
7756
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-xl bg-bg-
|
|
7756
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-xl bg-[var(--deframe-widget-color-bg-tertiary)] dark:bg-[var(--deframe-widget-color-bg-tertiary-dark)] flex items-center justify-center overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
7757
7757
|
"img",
|
|
7758
7758
|
{
|
|
7759
7759
|
src: resolvedSrc,
|
|
@@ -7764,7 +7764,7 @@ var SwapIconWithBadge = ({ src, alt }) => {
|
|
|
7764
7764
|
}
|
|
7765
7765
|
}
|
|
7766
7766
|
) }),
|
|
7767
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-[-2px] right-[-2px] w-[15px] h-[15px] rounded-full bg-bg-
|
|
7767
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-[-2px] right-[-2px] w-[15px] h-[15px] rounded-full bg-[var(--deframe-widget-color-bg-secondary)] dark:bg-[var(--deframe-widget-color-bg-secondary-dark)] flex items-center justify-center border border-[color:var(--deframe-widget-color-bg-secondary)] dark:border-[color:var(--deframe-widget-color-bg-secondary-dark)]", children: /* @__PURE__ */ jsxRuntime.jsx(md.MdArrowUpward, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-primary)] dark:text-[color:var(--deframe-widget-color-text-primary-dark)]" }) })
|
|
7768
7768
|
] });
|
|
7769
7769
|
};
|
|
7770
7770
|
var AmountDisplay = ({ amount, usdAmount }) => {
|
|
@@ -7802,7 +7802,7 @@ var HistoryListView = ({
|
|
|
7802
7802
|
) }),
|
|
7803
7803
|
/* @__PURE__ */ jsxRuntime.jsxs(ListItemContent, { children: [
|
|
7804
7804
|
/* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-text-lg-mobile", children: item.title }),
|
|
7805
|
-
/* @__PURE__ */ jsxRuntime.jsx(Label, { variant: "secondary", className: "text-text-tertiary dark:text-text-tertiary-dark", children: item.subtitle }),
|
|
7805
|
+
/* @__PURE__ */ jsxRuntime.jsx(Label, { variant: "secondary", className: "text-[color:var(--deframe-widget-color-text-tertiary)] dark:text-[color:var(--deframe-widget-color-text-tertiary-dark)]", children: item.subtitle }),
|
|
7806
7806
|
item.status === "PENDING" && item.statusLabel ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-[6px]", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
7807
7807
|
ProcessingBadge,
|
|
7808
7808
|
{
|
|
@@ -7937,7 +7937,7 @@ var EarnInvestmentSummaryView = ({
|
|
|
7937
7937
|
className
|
|
7938
7938
|
}) => {
|
|
7939
7939
|
return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: tailwindMerge.twMerge("flex flex-col gap-md p-lg bg-[var(--deframe-widget-color-bg-subtle)] rounded", className), children: [
|
|
7940
|
-
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-text-secondary dark:text-text-secondary-dark", children: overviewDescription }),
|
|
7940
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)] dark:text-[color:var(--deframe-widget-color-text-secondary-dark)]", children: overviewDescription }),
|
|
7941
7941
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
7942
7942
|
WalletBalances,
|
|
7943
7943
|
{
|
|
@@ -8128,7 +8128,7 @@ var EarnRecentTransactionsView = ({
|
|
|
8128
8128
|
),
|
|
8129
8129
|
children: [
|
|
8130
8130
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
|
|
8131
|
-
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-text-secondary dark:text-text-secondary-dark", children: sectionTitle }),
|
|
8131
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)] dark:text-[color:var(--deframe-widget-color-text-secondary-dark)]", children: sectionTitle }),
|
|
8132
8132
|
hasMore && onViewAll && /* @__PURE__ */ jsxRuntime.jsx(
|
|
8133
8133
|
"button",
|
|
8134
8134
|
{
|
|
@@ -8604,36 +8604,380 @@ var EarnDepositFormView = ({
|
|
|
8604
8604
|
] })
|
|
8605
8605
|
] }) })
|
|
8606
8606
|
] });
|
|
8607
|
-
var
|
|
8607
|
+
var EarnTokenSelectorSimpleView = ({
|
|
8608
|
+
selectedToken,
|
|
8609
|
+
onTokenClick,
|
|
8610
|
+
isLoading,
|
|
8611
|
+
selectTokenLabel,
|
|
8612
|
+
chainLabel,
|
|
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",
|
|
8647
|
+
{
|
|
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
|
+
]
|
|
8693
|
+
}
|
|
8694
|
+
),
|
|
8695
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
8696
|
+
"div",
|
|
8697
|
+
{
|
|
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
|
+
]
|
|
8721
|
+
}
|
|
8722
|
+
),
|
|
8723
|
+
isInteractive && /* @__PURE__ */ jsxRuntime.jsx(
|
|
8724
|
+
hi2.HiChevronDown,
|
|
8725
|
+
{
|
|
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"
|
|
8729
|
+
}
|
|
8730
|
+
)
|
|
8731
|
+
] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
8732
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
8733
|
+
"span",
|
|
8734
|
+
{
|
|
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
|
|
8738
|
+
}
|
|
8739
|
+
),
|
|
8740
|
+
isInteractive && /* @__PURE__ */ jsxRuntime.jsx(
|
|
8741
|
+
hi2.HiChevronDown,
|
|
8742
|
+
{
|
|
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"
|
|
8746
|
+
}
|
|
8747
|
+
)
|
|
8748
|
+
] })
|
|
8749
|
+
}
|
|
8750
|
+
);
|
|
8751
|
+
};
|
|
8752
|
+
var EarnAmountInputSimpleView = ({
|
|
8753
|
+
value,
|
|
8754
|
+
onChange,
|
|
8755
|
+
ariaLabel,
|
|
8756
|
+
dollarAmountFormatted
|
|
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
|
+
);
|
|
8777
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
8778
|
+
"div",
|
|
8779
|
+
{
|
|
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",
|
|
8783
|
+
children: [
|
|
8784
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
8785
|
+
"input",
|
|
8786
|
+
{
|
|
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
|
|
8798
|
+
}
|
|
8799
|
+
),
|
|
8800
|
+
dollarAmountFormatted && /* @__PURE__ */ jsxRuntime.jsx(
|
|
8801
|
+
"span",
|
|
8802
|
+
{
|
|
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
|
|
8807
|
+
}
|
|
8808
|
+
)
|
|
8809
|
+
]
|
|
8810
|
+
}
|
|
8811
|
+
);
|
|
8812
|
+
};
|
|
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 = ({
|
|
8608
8958
|
// Header / Layout
|
|
8609
8959
|
headerTitle,
|
|
8610
8960
|
onBack,
|
|
8611
|
-
progress,
|
|
8612
|
-
pageTitle,
|
|
8613
|
-
subtitle,
|
|
8614
8961
|
onSubmit,
|
|
8615
|
-
// Position card
|
|
8616
|
-
positionBalanceUSD,
|
|
8617
|
-
positionBalanceToken,
|
|
8618
|
-
strategyIcon,
|
|
8619
|
-
strategyName,
|
|
8620
8962
|
// Token selector
|
|
8621
8963
|
selectedToken,
|
|
8622
8964
|
onTokenClick,
|
|
8965
|
+
isLoadingToken,
|
|
8623
8966
|
selectTokenLabel,
|
|
8624
8967
|
// Chain selector
|
|
8625
8968
|
chainLabel,
|
|
8626
8969
|
chainImage,
|
|
8627
|
-
chainDirectionLabel,
|
|
8628
|
-
chainDisabledTitle,
|
|
8629
|
-
onNetworkClick,
|
|
8630
|
-
isNetworkDisabled,
|
|
8631
|
-
currentNetworkSelected,
|
|
8632
8970
|
// Amount input
|
|
8633
8971
|
amountValue,
|
|
8634
8972
|
onAmountChange,
|
|
8635
8973
|
amountAriaLabel,
|
|
8636
8974
|
dollarAmountFormatted,
|
|
8975
|
+
availableBalanceFormatted,
|
|
8976
|
+
// No balance notification
|
|
8977
|
+
showNoBalanceNotification,
|
|
8978
|
+
noBalancePrompt,
|
|
8979
|
+
goToSwapLabel,
|
|
8980
|
+
onGoToSwap,
|
|
8637
8981
|
// Percentage buttons
|
|
8638
8982
|
onPercentageClick,
|
|
8639
8983
|
maxLabel,
|
|
@@ -8647,57 +8991,378 @@ var EarnWithdrawFormView = ({
|
|
|
8647
8991
|
txErrorMessage,
|
|
8648
8992
|
// Bytecode error
|
|
8649
8993
|
bytecodeErrorMessage,
|
|
8650
|
-
transactionErrorLabel,
|
|
8651
|
-
// Quote details
|
|
8652
|
-
isQuoteValid,
|
|
8653
|
-
isFetchingQuote,
|
|
8654
|
-
summaryTitle,
|
|
8655
|
-
summaryItems,
|
|
8656
8994
|
// Submit button
|
|
8657
8995
|
submitDisabled,
|
|
8658
8996
|
submitButtonText
|
|
8659
|
-
}) =>
|
|
8660
|
-
|
|
8661
|
-
|
|
8662
|
-
|
|
8663
|
-
|
|
8664
|
-
|
|
8665
|
-
|
|
8666
|
-
|
|
8667
|
-
|
|
8668
|
-
|
|
8669
|
-
|
|
8670
|
-
|
|
8671
|
-
|
|
8672
|
-
|
|
8673
|
-
|
|
8674
|
-
|
|
8675
|
-
|
|
8676
|
-
|
|
8677
|
-
|
|
8678
|
-
|
|
8679
|
-
|
|
8680
|
-
|
|
8681
|
-
|
|
8682
|
-
|
|
8683
|
-
|
|
8684
|
-
|
|
8685
|
-
|
|
8686
|
-
|
|
8687
|
-
|
|
8688
|
-
|
|
8689
|
-
|
|
8690
|
-
|
|
8691
|
-
|
|
8692
|
-
|
|
8693
|
-
|
|
8694
|
-
|
|
8695
|
-
|
|
8696
|
-
|
|
8697
|
-
|
|
8698
|
-
|
|
8699
|
-
|
|
8700
|
-
|
|
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
|
+
}
|
|
8701
9366
|
)
|
|
8702
9367
|
] }) }) }),
|
|
8703
9368
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -8747,6 +9412,305 @@ var EarnWithdrawFormView = ({
|
|
|
8747
9412
|
] })
|
|
8748
9413
|
] }) })
|
|
8749
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
|
+
};
|
|
8750
9714
|
var EarnDepositProcessingView = ({
|
|
8751
9715
|
progress,
|
|
8752
9716
|
title,
|
|
@@ -8765,49 +9729,501 @@ var EarnDepositProcessingView = ({
|
|
|
8765
9729
|
processingDetailsLabels
|
|
8766
9730
|
}) => {
|
|
8767
9731
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
8768
|
-
TransactionScreen,
|
|
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,
|
|
8769
9990
|
{
|
|
8770
|
-
|
|
8771
|
-
|
|
8772
|
-
|
|
8773
|
-
|
|
8774
|
-
|
|
8775
|
-
|
|
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 }),
|
|
8776
10002
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
8777
|
-
"
|
|
10003
|
+
"path",
|
|
8778
10004
|
{
|
|
8779
|
-
|
|
8780
|
-
|
|
8781
|
-
|
|
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"
|
|
8782
10009
|
}
|
|
8783
|
-
)
|
|
8784
|
-
] }),
|
|
8785
|
-
onBack,
|
|
8786
|
-
children: [
|
|
10010
|
+
),
|
|
8787
10011
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
8788
|
-
|
|
10012
|
+
"path",
|
|
8789
10013
|
{
|
|
8790
|
-
|
|
8791
|
-
|
|
8792
|
-
|
|
8793
|
-
|
|
8794
|
-
|
|
8795
|
-
amountUSD,
|
|
8796
|
-
amountToken
|
|
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"
|
|
8797
10019
|
}
|
|
8798
10020
|
),
|
|
8799
10021
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
8800
|
-
|
|
10022
|
+
"path",
|
|
8801
10023
|
{
|
|
8802
|
-
|
|
8803
|
-
|
|
8804
|
-
|
|
8805
|
-
|
|
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"
|
|
8806
10038
|
}
|
|
8807
10039
|
)
|
|
8808
10040
|
]
|
|
8809
10041
|
}
|
|
8810
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
|
+
) });
|
|
8811
10227
|
};
|
|
8812
10228
|
var EarnDepositSuccessView = ({
|
|
8813
10229
|
title,
|
|
@@ -8882,6 +10298,25 @@ var EarnDepositSuccessView = ({
|
|
|
8882
10298
|
}
|
|
8883
10299
|
);
|
|
8884
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
|
+
};
|
|
8885
10320
|
var EarnDepositWarningView = ({
|
|
8886
10321
|
progress,
|
|
8887
10322
|
title,
|
|
@@ -8941,6 +10376,25 @@ var EarnDepositWarningView = ({
|
|
|
8941
10376
|
}
|
|
8942
10377
|
);
|
|
8943
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
|
+
};
|
|
8944
10398
|
var EarnDepositFailedView = ({
|
|
8945
10399
|
progress,
|
|
8946
10400
|
title,
|
|
@@ -9003,6 +10457,25 @@ var EarnDepositFailedView = ({
|
|
|
9003
10457
|
}
|
|
9004
10458
|
);
|
|
9005
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
|
+
};
|
|
9006
10479
|
var EarnWithdrawProcessingView = ({
|
|
9007
10480
|
progress,
|
|
9008
10481
|
title,
|
|
@@ -9068,6 +10541,19 @@ var EarnWithdrawProcessingView = ({
|
|
|
9068
10541
|
}
|
|
9069
10542
|
);
|
|
9070
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
|
+
};
|
|
9071
10557
|
var EarnWithdrawSuccessView = ({
|
|
9072
10558
|
title,
|
|
9073
10559
|
descriptionPrefix,
|
|
@@ -9134,6 +10620,25 @@ var EarnWithdrawSuccessView = ({
|
|
|
9134
10620
|
}
|
|
9135
10621
|
);
|
|
9136
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
|
+
};
|
|
9137
10642
|
var EarnWithdrawWarningView = ({
|
|
9138
10643
|
progress,
|
|
9139
10644
|
title,
|
|
@@ -9193,6 +10698,25 @@ var EarnWithdrawWarningView = ({
|
|
|
9193
10698
|
}
|
|
9194
10699
|
);
|
|
9195
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
|
+
};
|
|
9196
10720
|
var EarnWithdrawFailedView = ({
|
|
9197
10721
|
progress,
|
|
9198
10722
|
title,
|
|
@@ -9255,6 +10779,25 @@ var EarnWithdrawFailedView = ({
|
|
|
9255
10779
|
}
|
|
9256
10780
|
);
|
|
9257
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
|
+
};
|
|
9258
10801
|
var DashboardCard = ({ children, className }) => {
|
|
9259
10802
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "dashboard-card", className: tailwindMerge.twMerge("bg-[var(--deframe-widget-color-bg-subtle)] rounded", className), children });
|
|
9260
10803
|
};
|
|
@@ -10579,10 +12122,15 @@ exports.DetailsHeader = DetailsHeader;
|
|
|
10579
12122
|
exports.EarnAmountInputView = EarnAmountInputView;
|
|
10580
12123
|
exports.EarnBalanceCard = EarnBalanceCard;
|
|
10581
12124
|
exports.EarnBytecodeErrorView = EarnBytecodeErrorView;
|
|
12125
|
+
exports.EarnDepositFailedSimpleView = EarnDepositFailedSimpleView;
|
|
10582
12126
|
exports.EarnDepositFailedView = EarnDepositFailedView;
|
|
10583
12127
|
exports.EarnDepositFormView = EarnDepositFormView;
|
|
12128
|
+
exports.EarnDepositFormViewSimple = EarnDepositFormViewSimple;
|
|
12129
|
+
exports.EarnDepositProcessingSimpleView = EarnDepositProcessingSimpleView;
|
|
10584
12130
|
exports.EarnDepositProcessingView = EarnDepositProcessingView;
|
|
12131
|
+
exports.EarnDepositSuccessSimpleView = EarnDepositSuccessSimpleView;
|
|
10585
12132
|
exports.EarnDepositSuccessView = EarnDepositSuccessView;
|
|
12133
|
+
exports.EarnDepositWarningSimpleView = EarnDepositWarningSimpleView;
|
|
10586
12134
|
exports.EarnDepositWarningView = EarnDepositWarningView;
|
|
10587
12135
|
exports.EarnDesktopView = EarnDesktopView;
|
|
10588
12136
|
exports.EarnExploreGridView = EarnExploreGridView;
|
|
@@ -10596,11 +12144,16 @@ exports.EarnPositionCardView = EarnPositionCardView;
|
|
|
10596
12144
|
exports.EarnRecentTransactionsView = EarnRecentTransactionsView;
|
|
10597
12145
|
exports.EarnTokenSelectorView = EarnTokenSelectorView;
|
|
10598
12146
|
exports.EarnTxStatusCardView = EarnTxStatusCardView;
|
|
12147
|
+
exports.EarnWithdrawFailedSimpleView = EarnWithdrawFailedSimpleView;
|
|
10599
12148
|
exports.EarnWithdrawFailedView = EarnWithdrawFailedView;
|
|
10600
12149
|
exports.EarnWithdrawFormView = EarnWithdrawFormView;
|
|
12150
|
+
exports.EarnWithdrawFormViewSimple = EarnWithdrawFormViewSimple;
|
|
12151
|
+
exports.EarnWithdrawProcessingSimpleView = EarnWithdrawProcessingSimpleView;
|
|
10601
12152
|
exports.EarnWithdrawProcessingView = EarnWithdrawProcessingView;
|
|
12153
|
+
exports.EarnWithdrawSuccessSimpleView = EarnWithdrawSuccessSimpleView;
|
|
10602
12154
|
exports.EarnWithdrawSuccessView = EarnWithdrawSuccessView;
|
|
10603
12155
|
exports.EarnWithdrawTokenSelectorView = EarnWithdrawTokenSelectorView;
|
|
12156
|
+
exports.EarnWithdrawWarningSimpleView = EarnWithdrawWarningSimpleView;
|
|
10604
12157
|
exports.EarnWithdrawWarningView = EarnWithdrawWarningView;
|
|
10605
12158
|
exports.Fiat = Currency;
|
|
10606
12159
|
exports.FlexCol = FlexCol;
|