@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.mjs
CHANGED
|
@@ -2936,10 +2936,10 @@ var StrategyDetailsView = ({
|
|
|
2936
2936
|
notFoundMessage
|
|
2937
2937
|
}) => {
|
|
2938
2938
|
if (error) {
|
|
2939
|
-
return /* @__PURE__ */ jsx(BackgroundContainer, { children: /* @__PURE__ */ jsx("div", { className: "text-text-secondary dark:text-text-secondary-dark p-md", children: error }) });
|
|
2939
|
+
return /* @__PURE__ */ jsx(BackgroundContainer, { children: /* @__PURE__ */ 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 }) });
|
|
2940
2940
|
}
|
|
2941
2941
|
if (notFoundMessage) {
|
|
2942
|
-
return /* @__PURE__ */ jsx(BackgroundContainer, { children: /* @__PURE__ */ jsx("div", { className: "text-text-secondary dark:text-text-secondary-dark p-md", children: notFoundMessage }) });
|
|
2942
|
+
return /* @__PURE__ */ jsx(BackgroundContainer, { children: /* @__PURE__ */ 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 }) });
|
|
2943
2943
|
}
|
|
2944
2944
|
return /* @__PURE__ */ jsxs(BackgroundContainer, { children: [
|
|
2945
2945
|
/* @__PURE__ */ jsx(DetailsHeader, { title: headerTitle, onBack, backAriaLabel }),
|
|
@@ -4460,13 +4460,13 @@ var SwapFromCardView = ({
|
|
|
4460
4460
|
TextBody,
|
|
4461
4461
|
{
|
|
4462
4462
|
variant: "text-small",
|
|
4463
|
-
className: "text-text-tertiary dark:text-text-tertiary-dark",
|
|
4463
|
+
className: "text-[color:var(--deframe-widget-color-text-tertiary)] dark:text-[color:var(--deframe-widget-color-text-tertiary-dark)]",
|
|
4464
4464
|
children: onBalanceClick ? /* @__PURE__ */ jsxs(
|
|
4465
4465
|
"button",
|
|
4466
4466
|
{
|
|
4467
4467
|
type: "button",
|
|
4468
4468
|
onClick: onBalanceClick,
|
|
4469
|
-
className: "cursor-pointer hover:text-text-secondary dark:hover:text-text-secondary-dark transition-colors",
|
|
4469
|
+
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",
|
|
4470
4470
|
"data-testid": "swap-from-balance",
|
|
4471
4471
|
children: [
|
|
4472
4472
|
labels.balanceLabel,
|
|
@@ -4515,7 +4515,7 @@ var SwapFromCardView = ({
|
|
|
4515
4515
|
{
|
|
4516
4516
|
as: "span",
|
|
4517
4517
|
variant: "text-small",
|
|
4518
|
-
className: amountHasError ? "text-state-error dark:text-state-error" : "text-text-tertiary dark:text-text-tertiary-dark",
|
|
4518
|
+
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)]",
|
|
4519
4519
|
children: isAmountUsdLoading ? /* @__PURE__ */ jsx(LoadingDots, {}) : amountUsdFormatted
|
|
4520
4520
|
}
|
|
4521
4521
|
)
|
|
@@ -4565,7 +4565,7 @@ var SwapToCardView = ({
|
|
|
4565
4565
|
TextBody,
|
|
4566
4566
|
{
|
|
4567
4567
|
variant: "text-small",
|
|
4568
|
-
className: "text-text-tertiary dark:text-text-tertiary-dark",
|
|
4568
|
+
className: "text-[color:var(--deframe-widget-color-text-tertiary)] dark:text-[color:var(--deframe-widget-color-text-tertiary-dark)]",
|
|
4569
4569
|
children: /* @__PURE__ */ jsxs("span", { "data-testid": "swap-to-balance", children: [
|
|
4570
4570
|
labels.balanceLabel,
|
|
4571
4571
|
": ",
|
|
@@ -4602,7 +4602,7 @@ var SwapToCardView = ({
|
|
|
4602
4602
|
{
|
|
4603
4603
|
as: "span",
|
|
4604
4604
|
variant: "text-small",
|
|
4605
|
-
className: "text-text-tertiary dark:text-text-tertiary-dark",
|
|
4605
|
+
className: "text-[color:var(--deframe-widget-color-text-tertiary)] dark:text-[color:var(--deframe-widget-color-text-tertiary-dark)]",
|
|
4606
4606
|
children: isOutputUsdLoading ? /* @__PURE__ */ jsx(LoadingDots, {}) : outputUsdFormatted
|
|
4607
4607
|
}
|
|
4608
4608
|
)
|
|
@@ -4878,7 +4878,7 @@ var SwapFormView = ({
|
|
|
4878
4878
|
{
|
|
4879
4879
|
"data-testid": "swap-form-view",
|
|
4880
4880
|
className: "flex-1 min-h-0 overflow-y-auto swap-flow-content pr-sm",
|
|
4881
|
-
children: /* @__PURE__ */ jsx("form", { ref: formRef, onSubmit, "data-testid": "swap-flow-form", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-md text-text-secondary dark:text-text-secondary-dark", children: [
|
|
4881
|
+
children: /* @__PURE__ */ jsx("form", { ref: formRef, onSubmit, "data-testid": "swap-flow-form", children: /* @__PURE__ */ 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: [
|
|
4882
4882
|
/* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-md", children: [
|
|
4883
4883
|
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-sm", children: [
|
|
4884
4884
|
/* @__PURE__ */ jsx(TextHeading, { variant: "h5", className: "!text-[21px]", children: /* @__PURE__ */ jsx("span", { "data-testid": "swap-flow-title", children: labels.title }) }),
|
|
@@ -4890,7 +4890,7 @@ var SwapFormView = ({
|
|
|
4890
4890
|
"data-testid": "swap-history-button",
|
|
4891
4891
|
type: "button",
|
|
4892
4892
|
onClick: onHistoryClick,
|
|
4893
|
-
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",
|
|
4893
|
+
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",
|
|
4894
4894
|
"aria-label": labels.historyAriaLabel,
|
|
4895
4895
|
children: /* @__PURE__ */ jsx(MdHistory, { className: "w-6 h-6" })
|
|
4896
4896
|
}
|
|
@@ -4904,7 +4904,7 @@ var SwapFormView = ({
|
|
|
4904
4904
|
"data-testid": "swap-switch-tokens-button",
|
|
4905
4905
|
type: "button",
|
|
4906
4906
|
onClick: onSwitchTokens,
|
|
4907
|
-
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",
|
|
4907
|
+
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",
|
|
4908
4908
|
"aria-label": switchTokensAriaLabel,
|
|
4909
4909
|
children: /* @__PURE__ */ jsx(MdOutlineSwapVert, { className: "w-5 h-5" })
|
|
4910
4910
|
}
|
|
@@ -4920,7 +4920,7 @@ var SwapFormView = ({
|
|
|
4920
4920
|
"div",
|
|
4921
4921
|
{
|
|
4922
4922
|
"data-testid": "swap-flow-footer",
|
|
4923
|
-
className: "border-t p-md border-border-
|
|
4923
|
+
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)]",
|
|
4924
4924
|
children: /* @__PURE__ */ jsx(ConfirmSwapButtonView, __spreadValues({}, confirmButton))
|
|
4925
4925
|
}
|
|
4926
4926
|
)
|
|
@@ -7461,27 +7461,27 @@ var ApyRange = ({ children }) => {
|
|
|
7461
7461
|
return /* @__PURE__ */ jsx("div", { className: "text-right justify-center text-text-highlight text-xs font-normal leading-4", children });
|
|
7462
7462
|
};
|
|
7463
7463
|
var variantStyles = {
|
|
7464
|
-
primary: "text-text-primary dark:text-text-primary-dark text-text-md",
|
|
7465
|
-
secondary: "text-text-secondary dark:text-text-secondary-dark text-text-sm font-poppins"
|
|
7464
|
+
primary: "text-[color:var(--deframe-widget-color-text-primary)] dark:text-[color:var(--deframe-widget-color-text-primary-dark)] text-text-md",
|
|
7465
|
+
secondary: "text-[color:var(--deframe-widget-color-text-secondary)] dark:text-[color:var(--deframe-widget-color-text-secondary-dark)] text-text-sm font-poppins"
|
|
7466
7466
|
};
|
|
7467
7467
|
var Label = ({ children, variant = "primary", className }) => {
|
|
7468
7468
|
return /* @__PURE__ */ jsx("div", { className: twMerge(variantStyles[variant], className), children });
|
|
7469
7469
|
};
|
|
7470
7470
|
var HistoryItemSkeleton = () => /* @__PURE__ */ 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: [
|
|
7471
7471
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-sm flex-1 min-w-0", children: [
|
|
7472
|
-
/* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded-xl bg-bg-
|
|
7472
|
+
/* @__PURE__ */ 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" }),
|
|
7473
7473
|
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-xs flex-1 min-w-0", children: [
|
|
7474
|
-
/* @__PURE__ */ jsx("div", { className: "w-32 h-4 bg-bg-
|
|
7475
|
-
/* @__PURE__ */ jsx("div", { className: "w-24 h-3 bg-bg-
|
|
7474
|
+
/* @__PURE__ */ 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" }),
|
|
7475
|
+
/* @__PURE__ */ 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" })
|
|
7476
7476
|
] })
|
|
7477
7477
|
] }),
|
|
7478
7478
|
/* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end gap-xs flex-shrink-0 ml-sm", children: [
|
|
7479
|
-
/* @__PURE__ */ jsx("div", { className: "w-20 h-4 bg-bg-
|
|
7480
|
-
/* @__PURE__ */ jsx("div", { className: "w-16 h-3 bg-bg-
|
|
7479
|
+
/* @__PURE__ */ 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" }),
|
|
7480
|
+
/* @__PURE__ */ 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" })
|
|
7481
7481
|
] })
|
|
7482
7482
|
] });
|
|
7483
7483
|
var HistoryGroupSkeleton = () => /* @__PURE__ */ jsxs("div", { className: "self-stretch flex flex-col gap-xs", children: [
|
|
7484
|
-
/* @__PURE__ */ jsx("div", { className: "w-40 h-4 bg-bg-
|
|
7484
|
+
/* @__PURE__ */ 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" }),
|
|
7485
7485
|
/* @__PURE__ */ jsx(HistoryItemSkeleton, {}),
|
|
7486
7486
|
/* @__PURE__ */ jsx(HistoryItemSkeleton, {})
|
|
7487
7487
|
] });
|
|
@@ -7499,9 +7499,9 @@ var WalletBalances = ({ cards, variant = "subtle", className }) => {
|
|
|
7499
7499
|
] }) : /* @__PURE__ */ jsx(TextHeading, { variant: "h3", children: card.value })
|
|
7500
7500
|
] }, card.label)) });
|
|
7501
7501
|
};
|
|
7502
|
-
var HistoryTabEmpty = ({ title, description }) => /* @__PURE__ */ jsx("div", { className: "w-full h-[90vh] py-md bg-bg-
|
|
7502
|
+
var HistoryTabEmpty = ({ title, description }) => /* @__PURE__ */ 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__ */ jsxs("div", { className: "w-full flex flex-col justify-center items-center gap-md", children: [
|
|
7503
7503
|
/* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-center items-center gap-md text-center", children: [
|
|
7504
|
-
/* @__PURE__ */ jsx("div", { className: "w-20 h-20 bg-bg-
|
|
7504
|
+
/* @__PURE__ */ 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__ */ jsx(PiClockCountdownBold, { className: "w-10 h-10 text-[color:var(--deframe-widget-color-text-tertiary)] dark:text-[color:var(--deframe-widget-color-text-tertiary-dark)]" }) }),
|
|
7505
7505
|
/* @__PURE__ */ jsx(TextHeading, { variant: "h3", children: title })
|
|
7506
7506
|
] }),
|
|
7507
7507
|
/* @__PURE__ */ jsx("div", { className: "self-stretch text-center", children: /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: description }) })
|
|
@@ -7582,7 +7582,7 @@ var EarnBalanceCard = ({
|
|
|
7582
7582
|
] })
|
|
7583
7583
|
] });
|
|
7584
7584
|
};
|
|
7585
|
-
var GroupLabel = ({ children }) => /* @__PURE__ */ jsx("div", { className: "text-text-secondary dark:text-text-secondary-dark text-sm font-medium font-poppins py-3", children });
|
|
7585
|
+
var GroupLabel = ({ children }) => /* @__PURE__ */ 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 });
|
|
7586
7586
|
var GroupedStrategyListView = ({
|
|
7587
7587
|
isLoading,
|
|
7588
7588
|
loadingLabel,
|
|
@@ -7703,17 +7703,17 @@ var GroupedStrategyListView = ({
|
|
|
7703
7703
|
] });
|
|
7704
7704
|
};
|
|
7705
7705
|
var DateLabel = ({ children }) => {
|
|
7706
|
-
return /* @__PURE__ */ jsx("div", { className: "text-text-sm-mobile font-poppins text-text-secondary dark:text-text-secondary-dark", children });
|
|
7706
|
+
return /* @__PURE__ */ 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 });
|
|
7707
7707
|
};
|
|
7708
7708
|
var ArrowBadge = ({ isDeposit }) => {
|
|
7709
|
-
return /* @__PURE__ */ jsx("div", { className: "absolute bottom-[-2px] right-[-2px] w-[15px] h-[15px] rounded-full bg-bg-
|
|
7709
|
+
return /* @__PURE__ */ 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__ */ jsx(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__ */ jsx(MdArrowUpward, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-primary)] dark:text-[color:var(--deframe-widget-color-text-primary-dark)]" }) });
|
|
7710
7710
|
};
|
|
7711
7711
|
var TokenIconWithBadge2 = ({ src, alt, isDeposit }) => {
|
|
7712
7712
|
const fallbackText = encodeURIComponent((alt || "TOK").slice(0, 3).toUpperCase());
|
|
7713
7713
|
const fallbackSrc = `https://placehold.co/40x40?text=${fallbackText}`;
|
|
7714
7714
|
const resolvedSrc = src || fallbackSrc;
|
|
7715
7715
|
return /* @__PURE__ */ jsxs("div", { className: "relative flex-shrink-0", children: [
|
|
7716
|
-
/* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded-xl bg-bg-
|
|
7716
|
+
/* @__PURE__ */ 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__ */ jsx(
|
|
7717
7717
|
"img",
|
|
7718
7718
|
{
|
|
7719
7719
|
src: resolvedSrc,
|
|
@@ -7732,7 +7732,7 @@ var SwapIconWithBadge = ({ src, alt }) => {
|
|
|
7732
7732
|
const fallbackSrc = `https://placehold.co/40x40?text=${fallbackText}`;
|
|
7733
7733
|
const resolvedSrc = src || fallbackSrc;
|
|
7734
7734
|
return /* @__PURE__ */ jsxs("div", { className: "relative flex-shrink-0", children: [
|
|
7735
|
-
/* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded-xl bg-bg-
|
|
7735
|
+
/* @__PURE__ */ 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__ */ jsx(
|
|
7736
7736
|
"img",
|
|
7737
7737
|
{
|
|
7738
7738
|
src: resolvedSrc,
|
|
@@ -7743,7 +7743,7 @@ var SwapIconWithBadge = ({ src, alt }) => {
|
|
|
7743
7743
|
}
|
|
7744
7744
|
}
|
|
7745
7745
|
) }),
|
|
7746
|
-
/* @__PURE__ */ jsx("div", { className: "absolute bottom-[-2px] right-[-2px] w-[15px] h-[15px] rounded-full bg-bg-
|
|
7746
|
+
/* @__PURE__ */ 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__ */ jsx(MdArrowUpward, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-primary)] dark:text-[color:var(--deframe-widget-color-text-primary-dark)]" }) })
|
|
7747
7747
|
] });
|
|
7748
7748
|
};
|
|
7749
7749
|
var AmountDisplay = ({ amount, usdAmount }) => {
|
|
@@ -7781,7 +7781,7 @@ var HistoryListView = ({
|
|
|
7781
7781
|
) }),
|
|
7782
7782
|
/* @__PURE__ */ jsxs(ListItemContent, { children: [
|
|
7783
7783
|
/* @__PURE__ */ jsx(Label, { className: "text-text-lg-mobile", children: item.title }),
|
|
7784
|
-
/* @__PURE__ */ jsx(Label, { variant: "secondary", className: "text-text-tertiary dark:text-text-tertiary-dark", children: item.subtitle }),
|
|
7784
|
+
/* @__PURE__ */ 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 }),
|
|
7785
7785
|
item.status === "PENDING" && item.statusLabel ? /* @__PURE__ */ jsx("div", { className: "mt-[6px]", children: /* @__PURE__ */ jsx(
|
|
7786
7786
|
ProcessingBadge,
|
|
7787
7787
|
{
|
|
@@ -7916,7 +7916,7 @@ var EarnInvestmentSummaryView = ({
|
|
|
7916
7916
|
className
|
|
7917
7917
|
}) => {
|
|
7918
7918
|
return /* @__PURE__ */ jsxs("section", { className: twMerge("flex flex-col gap-md p-lg bg-[var(--deframe-widget-color-bg-subtle)] rounded", className), children: [
|
|
7919
|
-
/* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-text-secondary dark:text-text-secondary-dark", children: overviewDescription }),
|
|
7919
|
+
/* @__PURE__ */ 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 }),
|
|
7920
7920
|
/* @__PURE__ */ jsx(
|
|
7921
7921
|
WalletBalances,
|
|
7922
7922
|
{
|
|
@@ -8107,7 +8107,7 @@ var EarnRecentTransactionsView = ({
|
|
|
8107
8107
|
),
|
|
8108
8108
|
children: [
|
|
8109
8109
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
|
|
8110
|
-
/* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-text-secondary dark:text-text-secondary-dark", children: sectionTitle }),
|
|
8110
|
+
/* @__PURE__ */ 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 }),
|
|
8111
8111
|
hasMore && onViewAll && /* @__PURE__ */ jsx(
|
|
8112
8112
|
"button",
|
|
8113
8113
|
{
|
|
@@ -8583,36 +8583,380 @@ var EarnDepositFormView = ({
|
|
|
8583
8583
|
] })
|
|
8584
8584
|
] }) })
|
|
8585
8585
|
] });
|
|
8586
|
-
var
|
|
8586
|
+
var EarnTokenSelectorSimpleView = ({
|
|
8587
|
+
selectedToken,
|
|
8588
|
+
onTokenClick,
|
|
8589
|
+
isLoading,
|
|
8590
|
+
selectTokenLabel,
|
|
8591
|
+
chainLabel,
|
|
8592
|
+
chainImage
|
|
8593
|
+
}) => {
|
|
8594
|
+
const hasToken = selectedToken != null;
|
|
8595
|
+
const isInteractive = !!onTokenClick;
|
|
8596
|
+
const baseClasses = [
|
|
8597
|
+
"inline-flex items-center gap-[10px]",
|
|
8598
|
+
"py-[var(--deframe-widget-size-padding-y-sm)] px-[10px]",
|
|
8599
|
+
"rounded-[var(--deframe-widget-size-radius-sm)]",
|
|
8600
|
+
"bg-[var(--deframe-widget-color-bg-tertiary)]",
|
|
8601
|
+
"border-none outline-none",
|
|
8602
|
+
"transition-[background] duration-150",
|
|
8603
|
+
"flex-shrink-0"
|
|
8604
|
+
].join(" ");
|
|
8605
|
+
const stateClasses = {
|
|
8606
|
+
interactive: "cursor-pointer hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_80%,var(--deframe-widget-color-border-secondary))]",
|
|
8607
|
+
static: "cursor-default"
|
|
8608
|
+
};
|
|
8609
|
+
const selectorClasses = twMerge(
|
|
8610
|
+
baseClasses,
|
|
8611
|
+
stateClasses[isInteractive ? "interactive" : "static"]
|
|
8612
|
+
);
|
|
8613
|
+
return /* @__PURE__ */ jsx(
|
|
8614
|
+
"button",
|
|
8615
|
+
{
|
|
8616
|
+
type: "button",
|
|
8617
|
+
"data-slot": "token-selector-simple",
|
|
8618
|
+
"data-test-id": "earn-token-selector-simple-view",
|
|
8619
|
+
onClick: onTokenClick,
|
|
8620
|
+
disabled: !isInteractive,
|
|
8621
|
+
"aria-label": hasToken ? `Select token \u2014 currently ${selectedToken.symbol} on ${chainLabel}` : selectTokenLabel,
|
|
8622
|
+
className: selectorClasses,
|
|
8623
|
+
children: isLoading ? /* @__PURE__ */ jsx(LoadingDots, {}) : hasToken ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
8624
|
+
/* @__PURE__ */ jsxs(
|
|
8625
|
+
"div",
|
|
8626
|
+
{
|
|
8627
|
+
"data-slot": "token-selector-simple-icon",
|
|
8628
|
+
"data-test-id": "earn-token-selector-simple-view-icon",
|
|
8629
|
+
className: "relative flex-shrink-0 w-[38px] h-[38px]",
|
|
8630
|
+
children: [
|
|
8631
|
+
selectedToken.logoURI ? /* @__PURE__ */ jsx(
|
|
8632
|
+
"img",
|
|
8633
|
+
{
|
|
8634
|
+
src: selectedToken.logoURI,
|
|
8635
|
+
alt: selectedToken.symbol,
|
|
8636
|
+
className: "w-full h-full rounded-[var(--deframe-widget-size-radius-full)] object-cover"
|
|
8637
|
+
}
|
|
8638
|
+
) : /* @__PURE__ */ jsx(
|
|
8639
|
+
"div",
|
|
8640
|
+
{
|
|
8641
|
+
"data-test-id": "earn-token-selector-simple-view-icon-fallback",
|
|
8642
|
+
"data-slot": "token-selector-simple-icon-fallback",
|
|
8643
|
+
className: [
|
|
8644
|
+
"w-full h-full",
|
|
8645
|
+
"rounded-[var(--deframe-widget-size-radius-full)]",
|
|
8646
|
+
"flex items-center justify-center",
|
|
8647
|
+
"bg-[var(--deframe-widget-color-bg-tertiary)]",
|
|
8648
|
+
"[font-weight:var(--deframe-widget-font-weight-bold)]",
|
|
8649
|
+
"text-[color:var(--deframe-widget-color-text-primary)]",
|
|
8650
|
+
"text-[12px]"
|
|
8651
|
+
].join(" "),
|
|
8652
|
+
children: selectedToken.symbol.slice(0, 2).toUpperCase()
|
|
8653
|
+
}
|
|
8654
|
+
),
|
|
8655
|
+
chainImage && /* @__PURE__ */ jsx(
|
|
8656
|
+
"div",
|
|
8657
|
+
{
|
|
8658
|
+
"data-slot": "token-selector-simple-chain-badge",
|
|
8659
|
+
"data-test-id": "earn-token-selector-simple-view-chain-badge",
|
|
8660
|
+
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)]",
|
|
8661
|
+
children: /* @__PURE__ */ jsx(
|
|
8662
|
+
"img",
|
|
8663
|
+
{
|
|
8664
|
+
src: chainImage,
|
|
8665
|
+
alt: chainLabel,
|
|
8666
|
+
className: "w-full h-full rounded-[var(--deframe-widget-size-radius-full)] object-cover"
|
|
8667
|
+
}
|
|
8668
|
+
)
|
|
8669
|
+
}
|
|
8670
|
+
)
|
|
8671
|
+
]
|
|
8672
|
+
}
|
|
8673
|
+
),
|
|
8674
|
+
/* @__PURE__ */ jsxs(
|
|
8675
|
+
"div",
|
|
8676
|
+
{
|
|
8677
|
+
"data-slot": "token-selector-simple-info",
|
|
8678
|
+
"data-test-id": "earn-token-selector-simple-view-info",
|
|
8679
|
+
className: "flex flex-col items-start min-w-0",
|
|
8680
|
+
children: [
|
|
8681
|
+
/* @__PURE__ */ jsx(
|
|
8682
|
+
"span",
|
|
8683
|
+
{
|
|
8684
|
+
"data-slot": "token-selector-simple-symbol",
|
|
8685
|
+
"data-test-id": "earn-token-selector-simple-view-symbol",
|
|
8686
|
+
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)]",
|
|
8687
|
+
children: selectedToken.symbol
|
|
8688
|
+
}
|
|
8689
|
+
),
|
|
8690
|
+
/* @__PURE__ */ jsx(
|
|
8691
|
+
"span",
|
|
8692
|
+
{
|
|
8693
|
+
"data-slot": "token-selector-simple-network",
|
|
8694
|
+
"data-test-id": "earn-token-selector-simple-view-network",
|
|
8695
|
+
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]",
|
|
8696
|
+
children: chainLabel
|
|
8697
|
+
}
|
|
8698
|
+
)
|
|
8699
|
+
]
|
|
8700
|
+
}
|
|
8701
|
+
),
|
|
8702
|
+
isInteractive && /* @__PURE__ */ jsx(
|
|
8703
|
+
HiChevronDown,
|
|
8704
|
+
{
|
|
8705
|
+
"data-test-id": "earn-token-selector-simple-view-chevron",
|
|
8706
|
+
className: "flex-shrink-0 w-[14px] h-[14px] text-[color:var(--deframe-widget-color-text-secondary)]",
|
|
8707
|
+
"aria-hidden": "true"
|
|
8708
|
+
}
|
|
8709
|
+
)
|
|
8710
|
+
] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
8711
|
+
/* @__PURE__ */ jsx(
|
|
8712
|
+
"span",
|
|
8713
|
+
{
|
|
8714
|
+
"data-test-id": "earn-token-selector-simple-view-placeholder",
|
|
8715
|
+
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",
|
|
8716
|
+
children: selectTokenLabel
|
|
8717
|
+
}
|
|
8718
|
+
),
|
|
8719
|
+
isInteractive && /* @__PURE__ */ jsx(
|
|
8720
|
+
HiChevronDown,
|
|
8721
|
+
{
|
|
8722
|
+
"data-test-id": "earn-token-selector-simple-view-placeholder-chevron",
|
|
8723
|
+
className: "flex-shrink-0 w-[14px] h-[14px] text-[color:var(--deframe-widget-color-text-secondary)]",
|
|
8724
|
+
"aria-hidden": "true"
|
|
8725
|
+
}
|
|
8726
|
+
)
|
|
8727
|
+
] })
|
|
8728
|
+
}
|
|
8729
|
+
);
|
|
8730
|
+
};
|
|
8731
|
+
var EarnAmountInputSimpleView = ({
|
|
8732
|
+
value,
|
|
8733
|
+
onChange,
|
|
8734
|
+
ariaLabel,
|
|
8735
|
+
dollarAmountFormatted
|
|
8736
|
+
}) => {
|
|
8737
|
+
const isEmpty = !value || value === "0";
|
|
8738
|
+
const inputBaseClasses = [
|
|
8739
|
+
"bg-transparent border-none outline-none text-right",
|
|
8740
|
+
"text-[36px] [font-weight:var(--deframe-widget-font-weight-semibold)] [line-height:1.1]",
|
|
8741
|
+
"w-full",
|
|
8742
|
+
"px-[var(--deframe-widget-size-padding-x-none)] py-[var(--deframe-widget-size-padding-y-none)]",
|
|
8743
|
+
"font-[var(--deframe-widget-font-family)]",
|
|
8744
|
+
"[appearance:textfield]",
|
|
8745
|
+
"[&::-webkit-outer-spin-button]:appearance-none",
|
|
8746
|
+
"[&::-webkit-inner-spin-button]:appearance-none"
|
|
8747
|
+
].join(" ");
|
|
8748
|
+
const inputStateClasses = {
|
|
8749
|
+
empty: "text-[color:var(--deframe-widget-color-text-tertiary)]",
|
|
8750
|
+
filled: "text-[color:var(--deframe-widget-color-text-primary)]"
|
|
8751
|
+
};
|
|
8752
|
+
const inputClasses = twMerge(
|
|
8753
|
+
inputBaseClasses,
|
|
8754
|
+
inputStateClasses[isEmpty ? "empty" : "filled"]
|
|
8755
|
+
);
|
|
8756
|
+
return /* @__PURE__ */ jsxs(
|
|
8757
|
+
"div",
|
|
8758
|
+
{
|
|
8759
|
+
"data-slot": "amount-input-simple-wrapper",
|
|
8760
|
+
"data-test-id": "earn-amount-input-simple-view",
|
|
8761
|
+
className: "flex flex-col items-end flex-1 min-w-0",
|
|
8762
|
+
children: [
|
|
8763
|
+
/* @__PURE__ */ jsx(
|
|
8764
|
+
"input",
|
|
8765
|
+
{
|
|
8766
|
+
"data-slot": "amount-input-simple",
|
|
8767
|
+
"data-test-id": "earn-amount-input-simple-view-input",
|
|
8768
|
+
type: "text",
|
|
8769
|
+
inputMode: "decimal",
|
|
8770
|
+
autoComplete: "off",
|
|
8771
|
+
placeholder: "0",
|
|
8772
|
+
"aria-label": ariaLabel,
|
|
8773
|
+
value,
|
|
8774
|
+
onChange,
|
|
8775
|
+
onWheel: (e) => e.currentTarget.blur(),
|
|
8776
|
+
className: inputClasses
|
|
8777
|
+
}
|
|
8778
|
+
),
|
|
8779
|
+
dollarAmountFormatted && /* @__PURE__ */ jsx(
|
|
8780
|
+
"span",
|
|
8781
|
+
{
|
|
8782
|
+
"data-slot": "amount-input-simple-conversion",
|
|
8783
|
+
"data-test-id": "earn-amount-input-simple-view-conversion",
|
|
8784
|
+
className: "text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]",
|
|
8785
|
+
children: dollarAmountFormatted
|
|
8786
|
+
}
|
|
8787
|
+
)
|
|
8788
|
+
]
|
|
8789
|
+
}
|
|
8790
|
+
);
|
|
8791
|
+
};
|
|
8792
|
+
var EarnPercentageButtonsSimpleView = ({
|
|
8793
|
+
onPercentageClick,
|
|
8794
|
+
maxLabel
|
|
8795
|
+
}) => {
|
|
8796
|
+
const [selectedBasisPoints, setSelectedBasisPoints] = React6__default.useState(null);
|
|
8797
|
+
const options = [
|
|
8798
|
+
{ label: "25%", basisPoints: 2500 },
|
|
8799
|
+
{ label: "50%", basisPoints: 5e3 },
|
|
8800
|
+
{ label: "75%", basisPoints: 7500 },
|
|
8801
|
+
{ label: maxLabel, basisPoints: 1e4 }
|
|
8802
|
+
];
|
|
8803
|
+
function handleClick(basisPoints) {
|
|
8804
|
+
setSelectedBasisPoints(basisPoints);
|
|
8805
|
+
onPercentageClick(basisPoints);
|
|
8806
|
+
}
|
|
8807
|
+
const chipBaseClassName = [
|
|
8808
|
+
// Layout overrides
|
|
8809
|
+
"flex-none",
|
|
8810
|
+
"py-[3px] px-[10px]",
|
|
8811
|
+
"rounded-[var(--deframe-widget-size-radius-full)]",
|
|
8812
|
+
"whitespace-nowrap",
|
|
8813
|
+
"cursor-pointer",
|
|
8814
|
+
// Typography — use arbitrary property syntax to override PercentageButton defaults
|
|
8815
|
+
"[font-size:12px] [line-height:1]",
|
|
8816
|
+
"font-[var(--deframe-widget-font-family)]",
|
|
8817
|
+
// Transitions
|
|
8818
|
+
"transition-all duration-150",
|
|
8819
|
+
"outline-none",
|
|
8820
|
+
"focus:ring-0"
|
|
8821
|
+
].join(" ");
|
|
8822
|
+
const chipDefaultClassName = [
|
|
8823
|
+
"[font-weight:var(--deframe-widget-font-weight-regular)]",
|
|
8824
|
+
"border-[color:var(--deframe-widget-color-border-secondary)]",
|
|
8825
|
+
"bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_84%,transparent)]",
|
|
8826
|
+
"text-[color:var(--deframe-widget-color-text-secondary)]",
|
|
8827
|
+
"hover:border-[color:var(--deframe-widget-color-border-primary)]",
|
|
8828
|
+
"hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_92%,transparent)]",
|
|
8829
|
+
"hover:text-[color:var(--deframe-widget-color-text-primary)]"
|
|
8830
|
+
].join(" ");
|
|
8831
|
+
const chipActiveClassName = [
|
|
8832
|
+
"[font-weight:var(--deframe-widget-font-weight-semibold)]",
|
|
8833
|
+
"border-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_32%,transparent)]",
|
|
8834
|
+
"bg-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_12%,transparent)]",
|
|
8835
|
+
"text-[color:var(--deframe-widget-color-brand-primary)]"
|
|
8836
|
+
].join(" ");
|
|
8837
|
+
return /* @__PURE__ */ jsx(
|
|
8838
|
+
"div",
|
|
8839
|
+
{
|
|
8840
|
+
"data-slot": "percentage-chips-simple",
|
|
8841
|
+
"data-test-id": "earn-percentage-buttons-simple-view",
|
|
8842
|
+
className: "flex gap-[6px] items-center",
|
|
8843
|
+
children: options.map(({ label, basisPoints }) => {
|
|
8844
|
+
const isActive = basisPoints === selectedBasisPoints;
|
|
8845
|
+
const chipClassName = [
|
|
8846
|
+
chipBaseClassName,
|
|
8847
|
+
isActive ? chipActiveClassName : chipDefaultClassName
|
|
8848
|
+
].join(" ");
|
|
8849
|
+
return /* @__PURE__ */ jsx(
|
|
8850
|
+
PercentageButton,
|
|
8851
|
+
{
|
|
8852
|
+
className: chipClassName,
|
|
8853
|
+
onClick: () => handleClick(basisPoints),
|
|
8854
|
+
children: /* @__PURE__ */ jsx(
|
|
8855
|
+
"span",
|
|
8856
|
+
{
|
|
8857
|
+
"data-slot": "chip-pill-label",
|
|
8858
|
+
"data-test-id": "earn-percentage-buttons-simple-view-chip-label",
|
|
8859
|
+
children: label
|
|
8860
|
+
}
|
|
8861
|
+
)
|
|
8862
|
+
},
|
|
8863
|
+
basisPoints
|
|
8864
|
+
);
|
|
8865
|
+
})
|
|
8866
|
+
}
|
|
8867
|
+
);
|
|
8868
|
+
};
|
|
8869
|
+
var variantWrapperClasses = {
|
|
8870
|
+
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)]",
|
|
8871
|
+
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)]",
|
|
8872
|
+
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)]",
|
|
8873
|
+
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)]"
|
|
8874
|
+
};
|
|
8875
|
+
var variantAccentClasses = {
|
|
8876
|
+
error: "bg-[var(--deframe-widget-color-state-error)]",
|
|
8877
|
+
warning: "bg-[var(--deframe-widget-color-state-warning)]",
|
|
8878
|
+
info: "bg-[var(--deframe-widget-color-state-info)]",
|
|
8879
|
+
success: "bg-[var(--deframe-widget-color-brand-primary)]"
|
|
8880
|
+
};
|
|
8881
|
+
var EarnInlineNotificationSimpleView = ({
|
|
8882
|
+
variant,
|
|
8883
|
+
message
|
|
8884
|
+
}) => {
|
|
8885
|
+
const baseClasses = [
|
|
8886
|
+
"relative flex items-center gap-[var(--deframe-widget-size-gap-sm)]",
|
|
8887
|
+
"py-[7px] pr-[10px] pl-[14px]",
|
|
8888
|
+
"rounded-[var(--deframe-widget-size-radius-sm)]",
|
|
8889
|
+
"border",
|
|
8890
|
+
"overflow-hidden"
|
|
8891
|
+
].join(" ");
|
|
8892
|
+
const wrapperClasses = twMerge(baseClasses, variantWrapperClasses[variant]);
|
|
8893
|
+
return /* @__PURE__ */ jsxs(
|
|
8894
|
+
"div",
|
|
8895
|
+
{
|
|
8896
|
+
"data-slot": "inline-notification-simple",
|
|
8897
|
+
"data-test-id": "earn-inline-notification-simple-view",
|
|
8898
|
+
role: "alert",
|
|
8899
|
+
className: wrapperClasses,
|
|
8900
|
+
children: [
|
|
8901
|
+
/* @__PURE__ */ jsx(
|
|
8902
|
+
"div",
|
|
8903
|
+
{
|
|
8904
|
+
"data-slot": "inline-notification-simple-accent",
|
|
8905
|
+
"data-test-id": "earn-inline-notification-simple-view-accent",
|
|
8906
|
+
className: twMerge(
|
|
8907
|
+
"absolute left-0 top-0 bottom-0 w-[3px] rounded-[var(--deframe-widget-size-radius-sm)_0_0_var(--deframe-widget-size-radius-sm)]",
|
|
8908
|
+
variantAccentClasses[variant]
|
|
8909
|
+
)
|
|
8910
|
+
}
|
|
8911
|
+
),
|
|
8912
|
+
/* @__PURE__ */ jsx(
|
|
8913
|
+
"div",
|
|
8914
|
+
{
|
|
8915
|
+
"data-slot": "inline-notification-simple-dot",
|
|
8916
|
+
"data-test-id": "earn-inline-notification-simple-view-dot",
|
|
8917
|
+
className: twMerge(
|
|
8918
|
+
"w-[6px] h-[6px] rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0",
|
|
8919
|
+
variantAccentClasses[variant]
|
|
8920
|
+
)
|
|
8921
|
+
}
|
|
8922
|
+
),
|
|
8923
|
+
/* @__PURE__ */ jsx(
|
|
8924
|
+
"span",
|
|
8925
|
+
{
|
|
8926
|
+
"data-slot": "inline-notification-simple-message",
|
|
8927
|
+
"data-test-id": "earn-inline-notification-simple-view-message",
|
|
8928
|
+
className: "flex-1 text-[13px] text-[color:var(--deframe-widget-color-text-secondary)] font-[var(--deframe-widget-font-family)] leading-[1.4]",
|
|
8929
|
+
children: message
|
|
8930
|
+
}
|
|
8931
|
+
)
|
|
8932
|
+
]
|
|
8933
|
+
}
|
|
8934
|
+
);
|
|
8935
|
+
};
|
|
8936
|
+
var EarnDepositFormViewSimple = ({
|
|
8587
8937
|
// Header / Layout
|
|
8588
8938
|
headerTitle,
|
|
8589
8939
|
onBack,
|
|
8590
|
-
progress,
|
|
8591
|
-
pageTitle,
|
|
8592
|
-
subtitle,
|
|
8593
8940
|
onSubmit,
|
|
8594
|
-
// Position card
|
|
8595
|
-
positionBalanceUSD,
|
|
8596
|
-
positionBalanceToken,
|
|
8597
|
-
strategyIcon,
|
|
8598
|
-
strategyName,
|
|
8599
8941
|
// Token selector
|
|
8600
8942
|
selectedToken,
|
|
8601
8943
|
onTokenClick,
|
|
8944
|
+
isLoadingToken,
|
|
8602
8945
|
selectTokenLabel,
|
|
8603
8946
|
// Chain selector
|
|
8604
8947
|
chainLabel,
|
|
8605
8948
|
chainImage,
|
|
8606
|
-
chainDirectionLabel,
|
|
8607
|
-
chainDisabledTitle,
|
|
8608
|
-
onNetworkClick,
|
|
8609
|
-
isNetworkDisabled,
|
|
8610
|
-
currentNetworkSelected,
|
|
8611
8949
|
// Amount input
|
|
8612
8950
|
amountValue,
|
|
8613
8951
|
onAmountChange,
|
|
8614
8952
|
amountAriaLabel,
|
|
8615
8953
|
dollarAmountFormatted,
|
|
8954
|
+
availableBalanceFormatted,
|
|
8955
|
+
// No balance notification
|
|
8956
|
+
showNoBalanceNotification,
|
|
8957
|
+
noBalancePrompt,
|
|
8958
|
+
goToSwapLabel,
|
|
8959
|
+
onGoToSwap,
|
|
8616
8960
|
// Percentage buttons
|
|
8617
8961
|
onPercentageClick,
|
|
8618
8962
|
maxLabel,
|
|
@@ -8626,57 +8970,378 @@ var EarnWithdrawFormView = ({
|
|
|
8626
8970
|
txErrorMessage,
|
|
8627
8971
|
// Bytecode error
|
|
8628
8972
|
bytecodeErrorMessage,
|
|
8629
|
-
transactionErrorLabel,
|
|
8630
|
-
// Quote details
|
|
8631
|
-
isQuoteValid,
|
|
8632
|
-
isFetchingQuote,
|
|
8633
|
-
summaryTitle,
|
|
8634
|
-
summaryItems,
|
|
8635
8973
|
// Submit button
|
|
8636
8974
|
submitDisabled,
|
|
8637
8975
|
submitButtonText
|
|
8638
|
-
}) =>
|
|
8639
|
-
|
|
8640
|
-
|
|
8641
|
-
|
|
8642
|
-
|
|
8643
|
-
|
|
8644
|
-
|
|
8645
|
-
|
|
8646
|
-
|
|
8647
|
-
|
|
8648
|
-
|
|
8649
|
-
|
|
8650
|
-
|
|
8651
|
-
|
|
8652
|
-
|
|
8653
|
-
|
|
8654
|
-
|
|
8655
|
-
|
|
8656
|
-
|
|
8657
|
-
|
|
8658
|
-
|
|
8659
|
-
|
|
8660
|
-
|
|
8661
|
-
|
|
8662
|
-
|
|
8663
|
-
|
|
8664
|
-
|
|
8665
|
-
|
|
8666
|
-
|
|
8667
|
-
|
|
8668
|
-
|
|
8669
|
-
|
|
8670
|
-
|
|
8671
|
-
|
|
8672
|
-
|
|
8673
|
-
|
|
8674
|
-
|
|
8675
|
-
|
|
8676
|
-
|
|
8677
|
-
|
|
8678
|
-
|
|
8679
|
-
|
|
8976
|
+
}) => {
|
|
8977
|
+
const hasToken = selectedToken != null;
|
|
8978
|
+
const hasError = !!bytecodeErrorMessage;
|
|
8979
|
+
const isSubmitDisabled = !hasToken || submitDisabled || !amountValue || amountValue === "0" || amountValue === "";
|
|
8980
|
+
const [cardHovered, setCardHovered] = React6__default.useState(false);
|
|
8981
|
+
const hideTimerRef = React6__default.useRef(void 0);
|
|
8982
|
+
function handleHoverStart() {
|
|
8983
|
+
clearTimeout(hideTimerRef.current);
|
|
8984
|
+
setCardHovered(true);
|
|
8985
|
+
}
|
|
8986
|
+
function handleHoverEnd() {
|
|
8987
|
+
hideTimerRef.current = setTimeout(() => setCardHovered(false), 150);
|
|
8988
|
+
}
|
|
8989
|
+
React6__default.useEffect(() => () => clearTimeout(hideTimerRef.current), []);
|
|
8990
|
+
const panelBaseClasses = [
|
|
8991
|
+
"relative flex flex-col overflow-hidden w-[420px]",
|
|
8992
|
+
"rounded-[var(--deframe-widget-size-radius-md)]",
|
|
8993
|
+
"bg-[var(--deframe-widget-color-bg-primary)]",
|
|
8994
|
+
"border border-[color:var(--deframe-widget-color-border-secondary)]",
|
|
8995
|
+
"font-[var(--deframe-widget-font-family)]"
|
|
8996
|
+
].join(" ");
|
|
8997
|
+
const headerBaseClasses = [
|
|
8998
|
+
"flex items-center",
|
|
8999
|
+
"px-[var(--deframe-widget-size-padding-x-md)]",
|
|
9000
|
+
"py-[var(--deframe-widget-size-padding-y-md)]"
|
|
9001
|
+
].join(" ");
|
|
9002
|
+
const titleBaseClasses = [
|
|
9003
|
+
"flex-1",
|
|
9004
|
+
"text-[15px]",
|
|
9005
|
+
"[font-weight:var(--deframe-widget-font-weight-semibold)]",
|
|
9006
|
+
"text-[color:var(--deframe-widget-color-text-primary)]"
|
|
9007
|
+
].join(" ");
|
|
9008
|
+
const dividerClasses = "h-px bg-[var(--deframe-widget-color-border-secondary)]";
|
|
9009
|
+
const bodyBaseClasses = [
|
|
9010
|
+
"flex flex-col",
|
|
9011
|
+
"gap-[var(--deframe-widget-size-gap-md)]",
|
|
9012
|
+
"px-[var(--deframe-widget-size-padding-x-md)]",
|
|
9013
|
+
"py-[var(--deframe-widget-size-padding-y-md)]"
|
|
9014
|
+
].join(" ");
|
|
9015
|
+
const inputCardClasses = twMerge(
|
|
9016
|
+
"rounded-[var(--deframe-widget-size-radius-sm)]",
|
|
9017
|
+
"border",
|
|
9018
|
+
"px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]",
|
|
9019
|
+
"transition-[border-color,background] duration-200",
|
|
9020
|
+
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)]"
|
|
9021
|
+
);
|
|
9022
|
+
const footerBaseClasses = [
|
|
9023
|
+
"flex gap-[var(--deframe-widget-size-gap-sm)]",
|
|
9024
|
+
"px-[var(--deframe-widget-size-padding-x-md)]",
|
|
9025
|
+
"pb-[var(--deframe-widget-size-padding-y-md)]"
|
|
9026
|
+
].join(" ");
|
|
9027
|
+
return /* @__PURE__ */ jsxs(
|
|
9028
|
+
"div",
|
|
9029
|
+
{
|
|
9030
|
+
"data-slot": "deposit-panel-simple",
|
|
9031
|
+
"data-test-id": "earn-deposit-form-view-simple",
|
|
9032
|
+
className: panelBaseClasses,
|
|
9033
|
+
children: [
|
|
9034
|
+
/* @__PURE__ */ jsx(
|
|
9035
|
+
"header",
|
|
9036
|
+
{
|
|
9037
|
+
"data-slot": "deposit-panel-simple-header",
|
|
9038
|
+
"data-test-id": "earn-deposit-form-view-simple-header",
|
|
9039
|
+
className: headerBaseClasses,
|
|
9040
|
+
children: /* @__PURE__ */ jsx(
|
|
9041
|
+
"span",
|
|
9042
|
+
{
|
|
9043
|
+
"data-slot": "deposit-panel-simple-title",
|
|
9044
|
+
"data-test-id": "earn-deposit-form-view-simple-title",
|
|
9045
|
+
className: titleBaseClasses,
|
|
9046
|
+
children: headerTitle
|
|
9047
|
+
}
|
|
9048
|
+
)
|
|
9049
|
+
}
|
|
9050
|
+
),
|
|
9051
|
+
/* @__PURE__ */ jsx(
|
|
9052
|
+
"div",
|
|
9053
|
+
{
|
|
9054
|
+
"data-slot": "deposit-panel-simple-divider",
|
|
9055
|
+
"data-test-id": "earn-deposit-form-view-simple-divider",
|
|
9056
|
+
className: dividerClasses
|
|
9057
|
+
}
|
|
9058
|
+
),
|
|
9059
|
+
/* @__PURE__ */ jsxs("form", { onSubmit, children: [
|
|
9060
|
+
/* @__PURE__ */ jsx(
|
|
9061
|
+
"div",
|
|
9062
|
+
{
|
|
9063
|
+
"data-slot": "deposit-panel-simple-body",
|
|
9064
|
+
"data-test-id": "earn-deposit-form-view-simple-body",
|
|
9065
|
+
className: bodyBaseClasses,
|
|
9066
|
+
children: /* @__PURE__ */ jsxs(
|
|
9067
|
+
"div",
|
|
9068
|
+
{
|
|
9069
|
+
"data-slot": "deposit-panel-simple-input-card",
|
|
9070
|
+
"data-test-id": "earn-deposit-form-view-simple-input-card",
|
|
9071
|
+
onMouseEnter: hasToken ? handleHoverStart : void 0,
|
|
9072
|
+
onMouseLeave: hasToken ? handleHoverEnd : void 0,
|
|
9073
|
+
className: inputCardClasses,
|
|
9074
|
+
children: [
|
|
9075
|
+
/* @__PURE__ */ jsxs(
|
|
9076
|
+
"div",
|
|
9077
|
+
{
|
|
9078
|
+
"data-slot": "deposit-panel-simple-input-top-row",
|
|
9079
|
+
"data-test-id": "earn-deposit-form-view-simple-top-row",
|
|
9080
|
+
className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)]",
|
|
9081
|
+
children: [
|
|
9082
|
+
/* @__PURE__ */ jsx(
|
|
9083
|
+
EarnTokenSelectorSimpleView,
|
|
9084
|
+
{
|
|
9085
|
+
selectedToken,
|
|
9086
|
+
onTokenClick,
|
|
9087
|
+
isLoading: isLoadingToken,
|
|
9088
|
+
selectTokenLabel,
|
|
9089
|
+
chainLabel,
|
|
9090
|
+
chainImage
|
|
9091
|
+
}
|
|
9092
|
+
),
|
|
9093
|
+
/* @__PURE__ */ jsx(
|
|
9094
|
+
"div",
|
|
9095
|
+
{
|
|
9096
|
+
"data-test-id": "earn-deposit-form-view-simple-input-divider",
|
|
9097
|
+
className: "w-px h-10 bg-[var(--deframe-widget-color-border-secondary)] flex-shrink-0"
|
|
9098
|
+
}
|
|
9099
|
+
),
|
|
9100
|
+
/* @__PURE__ */ jsx(
|
|
9101
|
+
EarnAmountInputSimpleView,
|
|
9102
|
+
{
|
|
9103
|
+
value: amountValue,
|
|
9104
|
+
onChange: onAmountChange,
|
|
9105
|
+
ariaLabel: amountAriaLabel,
|
|
9106
|
+
dollarAmountFormatted
|
|
9107
|
+
}
|
|
9108
|
+
)
|
|
9109
|
+
]
|
|
9110
|
+
}
|
|
9111
|
+
),
|
|
9112
|
+
hasToken && availableBalanceFormatted && /* @__PURE__ */ jsx(
|
|
9113
|
+
"div",
|
|
9114
|
+
{
|
|
9115
|
+
"data-slot": "deposit-simple-balance-row",
|
|
9116
|
+
"data-test-id": "earn-deposit-form-view-simple-balance-row",
|
|
9117
|
+
className: "mt-[var(--deframe-widget-size-gap-sm)]",
|
|
9118
|
+
children: /* @__PURE__ */ jsx(
|
|
9119
|
+
"span",
|
|
9120
|
+
{
|
|
9121
|
+
className: twMerge(
|
|
9122
|
+
"text-[13px] font-[var(--deframe-widget-font-family)]",
|
|
9123
|
+
hasError ? "text-[color:var(--deframe-widget-color-state-error)]" : "text-[color:var(--deframe-widget-color-text-tertiary)]"
|
|
9124
|
+
),
|
|
9125
|
+
children: availableBalanceFormatted
|
|
9126
|
+
}
|
|
9127
|
+
)
|
|
9128
|
+
}
|
|
9129
|
+
),
|
|
9130
|
+
!hasToken && !isLoadingToken && /* @__PURE__ */ jsx(
|
|
9131
|
+
"p",
|
|
9132
|
+
{
|
|
9133
|
+
"data-slot": "deposit-simple-empty-hint",
|
|
9134
|
+
"data-test-id": "earn-deposit-form-view-simple-empty-hint",
|
|
9135
|
+
className: "mt-[var(--deframe-widget-size-gap-sm)] text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]",
|
|
9136
|
+
children: selectTokenLabel
|
|
9137
|
+
}
|
|
9138
|
+
),
|
|
9139
|
+
/* @__PURE__ */ jsx(AnimatePresence, { children: hasToken && cardHovered && /* @__PURE__ */ jsx(
|
|
9140
|
+
motion.div,
|
|
9141
|
+
{
|
|
9142
|
+
"data-slot": "deposit-simple-chips-row",
|
|
9143
|
+
"data-test-id": "earn-deposit-form-view-simple-chips-row",
|
|
9144
|
+
initial: { opacity: 0, height: 0, marginTop: 0 },
|
|
9145
|
+
animate: { opacity: 1, height: "auto", marginTop: "var(--deframe-widget-size-gap-sm)" },
|
|
9146
|
+
exit: { opacity: 0, height: 0, marginTop: 0 },
|
|
9147
|
+
transition: { duration: 0.15, ease: "easeOut" },
|
|
9148
|
+
style: { overflow: "hidden" },
|
|
9149
|
+
onMouseEnter: handleHoverStart,
|
|
9150
|
+
onMouseLeave: handleHoverEnd,
|
|
9151
|
+
children: /* @__PURE__ */ jsx(
|
|
9152
|
+
EarnPercentageButtonsSimpleView,
|
|
9153
|
+
{
|
|
9154
|
+
onPercentageClick,
|
|
9155
|
+
maxLabel
|
|
9156
|
+
}
|
|
9157
|
+
)
|
|
9158
|
+
}
|
|
9159
|
+
) }),
|
|
9160
|
+
showNoBalanceNotification && /* @__PURE__ */ jsx("div", { className: "mt-[var(--deframe-widget-size-gap-sm)]", children: /* @__PURE__ */ jsx(
|
|
9161
|
+
EarnNoBalanceNotificationView,
|
|
9162
|
+
{
|
|
9163
|
+
prompt: noBalancePrompt,
|
|
9164
|
+
actionLabel: goToSwapLabel,
|
|
9165
|
+
onAction: onGoToSwap
|
|
9166
|
+
}
|
|
9167
|
+
) }),
|
|
9168
|
+
bytecodeErrorMessage && /* @__PURE__ */ jsx("div", { className: "mt-[var(--deframe-widget-size-gap-sm)]", children: /* @__PURE__ */ jsx(
|
|
9169
|
+
EarnInlineNotificationSimpleView,
|
|
9170
|
+
{
|
|
9171
|
+
variant: "error",
|
|
9172
|
+
message: bytecodeErrorMessage
|
|
9173
|
+
}
|
|
9174
|
+
) })
|
|
9175
|
+
]
|
|
9176
|
+
}
|
|
9177
|
+
)
|
|
9178
|
+
}
|
|
9179
|
+
),
|
|
9180
|
+
/* @__PURE__ */ jsxs(
|
|
9181
|
+
"footer",
|
|
9182
|
+
{
|
|
9183
|
+
"data-slot": "deposit-panel-simple-footer",
|
|
9184
|
+
"data-test-id": "earn-deposit-form-view-simple-footer",
|
|
9185
|
+
className: footerBaseClasses,
|
|
9186
|
+
children: [
|
|
9187
|
+
onBack && /* @__PURE__ */ jsx(
|
|
9188
|
+
SecondaryButton,
|
|
9189
|
+
{
|
|
9190
|
+
type: "button",
|
|
9191
|
+
className: [
|
|
9192
|
+
"flex-1 h-12 rounded-[var(--deframe-widget-size-radius-sm)]",
|
|
9193
|
+
"text-[15px] text-[color:var(--deframe-widget-color-text-secondary)]",
|
|
9194
|
+
"border-[color:var(--deframe-widget-color-border-secondary)]",
|
|
9195
|
+
"outline-none",
|
|
9196
|
+
"transition-[background,color,border-color] duration-150",
|
|
9197
|
+
"hover:opacity-100",
|
|
9198
|
+
"hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_60%,transparent)]",
|
|
9199
|
+
"hover:text-[color:var(--deframe-widget-color-text-primary)]"
|
|
9200
|
+
].join(" "),
|
|
9201
|
+
onClick: onBack,
|
|
9202
|
+
"aria-label": "Cancel deposit",
|
|
9203
|
+
children: "Cancel"
|
|
9204
|
+
}
|
|
9205
|
+
),
|
|
9206
|
+
/* @__PURE__ */ jsx(
|
|
9207
|
+
PrimaryButton,
|
|
9208
|
+
{
|
|
9209
|
+
type: "submit",
|
|
9210
|
+
className: [
|
|
9211
|
+
"flex-1 h-12 rounded-[var(--deframe-widget-size-radius-sm)]",
|
|
9212
|
+
"text-[15px] text-[color:var(--deframe-widget-color-text-primary-dark)]",
|
|
9213
|
+
"outline-none",
|
|
9214
|
+
"transition-[background,color,opacity] duration-150"
|
|
9215
|
+
].join(" "),
|
|
9216
|
+
disabled: isSubmitDisabled,
|
|
9217
|
+
"aria-disabled": isSubmitDisabled,
|
|
9218
|
+
"aria-label": submitButtonText,
|
|
9219
|
+
children: submitButtonText
|
|
9220
|
+
}
|
|
9221
|
+
)
|
|
9222
|
+
]
|
|
9223
|
+
}
|
|
9224
|
+
)
|
|
9225
|
+
] }),
|
|
9226
|
+
/* @__PURE__ */ jsx(AnimatePresence, { children: showTxStatus && /* @__PURE__ */ jsx(
|
|
9227
|
+
motion.div,
|
|
9228
|
+
{
|
|
9229
|
+
"data-slot": "deposit-simple-tx-overlay",
|
|
9230
|
+
"data-test-id": "earn-deposit-form-view-simple-tx-overlay",
|
|
9231
|
+
initial: { opacity: 0 },
|
|
9232
|
+
animate: { opacity: 1 },
|
|
9233
|
+
exit: { opacity: 0 },
|
|
9234
|
+
transition: { duration: 0.2, ease: "easeOut" },
|
|
9235
|
+
className: "absolute inset-0 z-10 flex items-center justify-center bg-[var(--deframe-widget-color-bg-primary)]",
|
|
9236
|
+
children: /* @__PURE__ */ jsx(
|
|
9237
|
+
EarnTxStatusCardView,
|
|
9238
|
+
{
|
|
9239
|
+
statusLabel: txStatusLabel,
|
|
9240
|
+
isProcessing: isTxProcessing,
|
|
9241
|
+
successMessage: isTxSuccess ? txSuccessMessage : void 0,
|
|
9242
|
+
errorMessage: isTxError ? txErrorMessage : void 0
|
|
9243
|
+
}
|
|
9244
|
+
)
|
|
9245
|
+
}
|
|
9246
|
+
) })
|
|
9247
|
+
]
|
|
9248
|
+
}
|
|
9249
|
+
);
|
|
9250
|
+
};
|
|
9251
|
+
var EarnWithdrawFormView = ({
|
|
9252
|
+
// Header / Layout
|
|
9253
|
+
headerTitle,
|
|
9254
|
+
onBack,
|
|
9255
|
+
progress,
|
|
9256
|
+
pageTitle,
|
|
9257
|
+
subtitle,
|
|
9258
|
+
onSubmit,
|
|
9259
|
+
// Position card
|
|
9260
|
+
positionBalanceUSD,
|
|
9261
|
+
positionBalanceToken,
|
|
9262
|
+
strategyIcon,
|
|
9263
|
+
strategyName,
|
|
9264
|
+
// Token selector
|
|
9265
|
+
selectedToken,
|
|
9266
|
+
onTokenClick,
|
|
9267
|
+
selectTokenLabel,
|
|
9268
|
+
// Chain selector
|
|
9269
|
+
chainLabel,
|
|
9270
|
+
chainImage,
|
|
9271
|
+
chainDirectionLabel,
|
|
9272
|
+
chainDisabledTitle,
|
|
9273
|
+
onNetworkClick,
|
|
9274
|
+
isNetworkDisabled,
|
|
9275
|
+
currentNetworkSelected,
|
|
9276
|
+
// Amount input
|
|
9277
|
+
amountValue,
|
|
9278
|
+
onAmountChange,
|
|
9279
|
+
amountAriaLabel,
|
|
9280
|
+
dollarAmountFormatted,
|
|
9281
|
+
// Percentage buttons
|
|
9282
|
+
onPercentageClick,
|
|
9283
|
+
maxLabel,
|
|
9284
|
+
// TX status
|
|
9285
|
+
showTxStatus,
|
|
9286
|
+
txStatusLabel,
|
|
9287
|
+
isTxProcessing,
|
|
9288
|
+
isTxSuccess,
|
|
9289
|
+
isTxError,
|
|
9290
|
+
txSuccessMessage,
|
|
9291
|
+
txErrorMessage,
|
|
9292
|
+
// Bytecode error
|
|
9293
|
+
bytecodeErrorMessage,
|
|
9294
|
+
transactionErrorLabel,
|
|
9295
|
+
// Quote details
|
|
9296
|
+
isQuoteValid,
|
|
9297
|
+
isFetchingQuote,
|
|
9298
|
+
summaryTitle,
|
|
9299
|
+
summaryItems,
|
|
9300
|
+
// Submit button
|
|
9301
|
+
submitDisabled,
|
|
9302
|
+
submitButtonText
|
|
9303
|
+
}) => /* @__PURE__ */ jsxs(BackgroundContainer, { children: [
|
|
9304
|
+
/* @__PURE__ */ jsx(DetailsHeader, { title: headerTitle, onBack }),
|
|
9305
|
+
/* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 overflow-y-auto", children: /* @__PURE__ */ 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: [
|
|
9306
|
+
/* @__PURE__ */ jsx("div", { className: "w-full px-[var(--deframe-widget-size-padding-x-md)]", children: /* @__PURE__ */ jsx(ProgressIndicator, { progress }) }),
|
|
9307
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)] px-[var(--deframe-widget-size-padding-x-md)]", children: [
|
|
9308
|
+
/* @__PURE__ */ jsx(TextHeading, { variant: "h5", children: pageTitle }),
|
|
9309
|
+
/* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: subtitle })
|
|
9310
|
+
] }),
|
|
9311
|
+
/* @__PURE__ */ jsxs("form", { onSubmit, children: [
|
|
9312
|
+
/* @__PURE__ */ jsx(
|
|
9313
|
+
EarnPositionCardView,
|
|
9314
|
+
{
|
|
9315
|
+
balanceUSD: positionBalanceUSD,
|
|
9316
|
+
balanceToken: positionBalanceToken,
|
|
9317
|
+
icon: strategyIcon,
|
|
9318
|
+
iconAlt: strategyName
|
|
9319
|
+
}
|
|
9320
|
+
),
|
|
9321
|
+
/* @__PURE__ */ jsx("div", { className: "px-[var(--deframe-widget-size-padding-x-md)] mt-[var(--deframe-widget-size-gap-sm)]", children: /* @__PURE__ */ jsx(SectionCard, { className: "focus-within:bg-[var(--deframe-widget-color-bg-tertiary)] transition-colors", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-[var(--deframe-widget-size-gap-md)]", children: [
|
|
9322
|
+
/* @__PURE__ */ jsx(
|
|
9323
|
+
EarnWithdrawTokenSelectorView,
|
|
9324
|
+
{
|
|
9325
|
+
selectedToken,
|
|
9326
|
+
onTokenClick,
|
|
9327
|
+
selectTokenLabel,
|
|
9328
|
+
chainLabel,
|
|
9329
|
+
chainImage,
|
|
9330
|
+
chainDirectionLabel,
|
|
9331
|
+
chainDisabledTitle,
|
|
9332
|
+
onNetworkClick,
|
|
9333
|
+
isNetworkDisabled,
|
|
9334
|
+
currentNetworkSelected
|
|
9335
|
+
}
|
|
9336
|
+
),
|
|
9337
|
+
/* @__PURE__ */ jsx(
|
|
9338
|
+
EarnAmountInputView,
|
|
9339
|
+
{
|
|
9340
|
+
value: amountValue,
|
|
9341
|
+
onChange: onAmountChange,
|
|
9342
|
+
ariaLabel: amountAriaLabel,
|
|
9343
|
+
dollarAmountFormatted
|
|
9344
|
+
}
|
|
8680
9345
|
)
|
|
8681
9346
|
] }) }) }),
|
|
8682
9347
|
/* @__PURE__ */ jsx(
|
|
@@ -8726,6 +9391,305 @@ var EarnWithdrawFormView = ({
|
|
|
8726
9391
|
] })
|
|
8727
9392
|
] }) })
|
|
8728
9393
|
] });
|
|
9394
|
+
var EarnWithdrawFormViewSimple = ({
|
|
9395
|
+
// Header / Layout
|
|
9396
|
+
headerTitle,
|
|
9397
|
+
onBack,
|
|
9398
|
+
onSubmit,
|
|
9399
|
+
// Position card (used for inline balance row)
|
|
9400
|
+
positionBalanceToken,
|
|
9401
|
+
// Token selector
|
|
9402
|
+
selectedToken,
|
|
9403
|
+
onTokenClick,
|
|
9404
|
+
selectTokenLabel,
|
|
9405
|
+
// Chain selector
|
|
9406
|
+
chainLabel,
|
|
9407
|
+
chainImage,
|
|
9408
|
+
// Amount input
|
|
9409
|
+
amountValue,
|
|
9410
|
+
onAmountChange,
|
|
9411
|
+
amountAriaLabel,
|
|
9412
|
+
dollarAmountFormatted,
|
|
9413
|
+
// Percentage buttons
|
|
9414
|
+
onPercentageClick,
|
|
9415
|
+
maxLabel,
|
|
9416
|
+
// TX status
|
|
9417
|
+
showTxStatus,
|
|
9418
|
+
txStatusLabel,
|
|
9419
|
+
isTxProcessing,
|
|
9420
|
+
isTxSuccess,
|
|
9421
|
+
isTxError,
|
|
9422
|
+
txSuccessMessage,
|
|
9423
|
+
txErrorMessage,
|
|
9424
|
+
// Bytecode error
|
|
9425
|
+
bytecodeErrorMessage,
|
|
9426
|
+
// Submit button
|
|
9427
|
+
submitDisabled,
|
|
9428
|
+
submitButtonText
|
|
9429
|
+
}) => {
|
|
9430
|
+
const hasToken = selectedToken != null;
|
|
9431
|
+
const hasError = !!bytecodeErrorMessage;
|
|
9432
|
+
const isSubmitDisabled = !hasToken || submitDisabled || !amountValue || amountValue === "0" || amountValue === "";
|
|
9433
|
+
const [cardHovered, setCardHovered] = React6__default.useState(false);
|
|
9434
|
+
const hideTimerRef = React6__default.useRef(void 0);
|
|
9435
|
+
function handleHoverStart() {
|
|
9436
|
+
clearTimeout(hideTimerRef.current);
|
|
9437
|
+
setCardHovered(true);
|
|
9438
|
+
}
|
|
9439
|
+
function handleHoverEnd() {
|
|
9440
|
+
hideTimerRef.current = setTimeout(() => setCardHovered(false), 150);
|
|
9441
|
+
}
|
|
9442
|
+
React6__default.useEffect(() => () => clearTimeout(hideTimerRef.current), []);
|
|
9443
|
+
const panelBaseClasses = [
|
|
9444
|
+
"relative flex flex-col overflow-hidden w-[420px]",
|
|
9445
|
+
"rounded-[var(--deframe-widget-size-radius-md)]",
|
|
9446
|
+
"bg-[var(--deframe-widget-color-bg-primary)]",
|
|
9447
|
+
"border border-[color:var(--deframe-widget-color-border-secondary)]",
|
|
9448
|
+
"font-[var(--deframe-widget-font-family)]"
|
|
9449
|
+
].join(" ");
|
|
9450
|
+
const headerBaseClasses = [
|
|
9451
|
+
"flex items-center",
|
|
9452
|
+
"px-[var(--deframe-widget-size-padding-x-md)]",
|
|
9453
|
+
"py-[var(--deframe-widget-size-padding-y-md)]"
|
|
9454
|
+
].join(" ");
|
|
9455
|
+
const titleBaseClasses = [
|
|
9456
|
+
"flex-1",
|
|
9457
|
+
"text-[15px]",
|
|
9458
|
+
"[font-weight:var(--deframe-widget-font-weight-semibold)]",
|
|
9459
|
+
"text-[color:var(--deframe-widget-color-text-primary)]"
|
|
9460
|
+
].join(" ");
|
|
9461
|
+
const dividerClasses = "h-px bg-[var(--deframe-widget-color-border-secondary)]";
|
|
9462
|
+
const bodyBaseClasses = [
|
|
9463
|
+
"flex flex-col",
|
|
9464
|
+
"gap-[var(--deframe-widget-size-gap-md)]",
|
|
9465
|
+
"px-[var(--deframe-widget-size-padding-x-md)]",
|
|
9466
|
+
"py-[var(--deframe-widget-size-padding-y-md)]"
|
|
9467
|
+
].join(" ");
|
|
9468
|
+
const inputCardClasses = twMerge(
|
|
9469
|
+
"rounded-[var(--deframe-widget-size-radius-sm)]",
|
|
9470
|
+
"border",
|
|
9471
|
+
"px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]",
|
|
9472
|
+
"transition-[border-color,background] duration-200",
|
|
9473
|
+
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)]"
|
|
9474
|
+
);
|
|
9475
|
+
const footerBaseClasses = [
|
|
9476
|
+
"flex gap-[var(--deframe-widget-size-gap-sm)]",
|
|
9477
|
+
"px-[var(--deframe-widget-size-padding-x-md)]",
|
|
9478
|
+
"pb-[var(--deframe-widget-size-padding-y-md)]"
|
|
9479
|
+
].join(" ");
|
|
9480
|
+
return /* @__PURE__ */ jsxs(
|
|
9481
|
+
"div",
|
|
9482
|
+
{
|
|
9483
|
+
"data-slot": "withdraw-panel-simple",
|
|
9484
|
+
"data-test-id": "earn-withdraw-form-view-simple",
|
|
9485
|
+
className: panelBaseClasses,
|
|
9486
|
+
children: [
|
|
9487
|
+
/* @__PURE__ */ jsx(
|
|
9488
|
+
"header",
|
|
9489
|
+
{
|
|
9490
|
+
"data-slot": "withdraw-panel-simple-header",
|
|
9491
|
+
"data-test-id": "earn-withdraw-form-view-simple-header",
|
|
9492
|
+
className: headerBaseClasses,
|
|
9493
|
+
children: /* @__PURE__ */ jsx(
|
|
9494
|
+
"span",
|
|
9495
|
+
{
|
|
9496
|
+
"data-slot": "withdraw-panel-simple-title",
|
|
9497
|
+
"data-test-id": "earn-withdraw-form-view-simple-title",
|
|
9498
|
+
className: titleBaseClasses,
|
|
9499
|
+
children: headerTitle
|
|
9500
|
+
}
|
|
9501
|
+
)
|
|
9502
|
+
}
|
|
9503
|
+
),
|
|
9504
|
+
/* @__PURE__ */ jsx(
|
|
9505
|
+
"div",
|
|
9506
|
+
{
|
|
9507
|
+
"data-slot": "withdraw-panel-simple-divider",
|
|
9508
|
+
"data-test-id": "earn-withdraw-form-view-simple-divider",
|
|
9509
|
+
className: dividerClasses
|
|
9510
|
+
}
|
|
9511
|
+
),
|
|
9512
|
+
/* @__PURE__ */ jsxs("form", { onSubmit, children: [
|
|
9513
|
+
/* @__PURE__ */ jsx(
|
|
9514
|
+
"div",
|
|
9515
|
+
{
|
|
9516
|
+
"data-slot": "withdraw-panel-simple-body",
|
|
9517
|
+
"data-test-id": "earn-withdraw-form-view-simple-body",
|
|
9518
|
+
className: bodyBaseClasses,
|
|
9519
|
+
children: /* @__PURE__ */ jsxs(
|
|
9520
|
+
"div",
|
|
9521
|
+
{
|
|
9522
|
+
"data-slot": "withdraw-panel-simple-input-card",
|
|
9523
|
+
"data-test-id": "earn-withdraw-form-view-simple-input-card",
|
|
9524
|
+
onMouseEnter: hasToken ? handleHoverStart : void 0,
|
|
9525
|
+
onMouseLeave: hasToken ? handleHoverEnd : void 0,
|
|
9526
|
+
className: inputCardClasses,
|
|
9527
|
+
children: [
|
|
9528
|
+
/* @__PURE__ */ jsxs(
|
|
9529
|
+
"div",
|
|
9530
|
+
{
|
|
9531
|
+
"data-slot": "withdraw-panel-simple-input-top-row",
|
|
9532
|
+
"data-test-id": "earn-withdraw-form-view-simple-top-row",
|
|
9533
|
+
className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)]",
|
|
9534
|
+
children: [
|
|
9535
|
+
/* @__PURE__ */ jsx(
|
|
9536
|
+
EarnTokenSelectorSimpleView,
|
|
9537
|
+
{
|
|
9538
|
+
selectedToken,
|
|
9539
|
+
onTokenClick,
|
|
9540
|
+
isLoading: false,
|
|
9541
|
+
selectTokenLabel,
|
|
9542
|
+
chainLabel,
|
|
9543
|
+
chainImage
|
|
9544
|
+
}
|
|
9545
|
+
),
|
|
9546
|
+
/* @__PURE__ */ jsx(
|
|
9547
|
+
"div",
|
|
9548
|
+
{
|
|
9549
|
+
"data-test-id": "earn-withdraw-form-view-simple-input-divider",
|
|
9550
|
+
className: "w-px h-10 bg-[var(--deframe-widget-color-border-secondary)] flex-shrink-0"
|
|
9551
|
+
}
|
|
9552
|
+
),
|
|
9553
|
+
/* @__PURE__ */ jsx(
|
|
9554
|
+
EarnAmountInputSimpleView,
|
|
9555
|
+
{
|
|
9556
|
+
value: amountValue,
|
|
9557
|
+
onChange: onAmountChange,
|
|
9558
|
+
ariaLabel: amountAriaLabel,
|
|
9559
|
+
dollarAmountFormatted
|
|
9560
|
+
}
|
|
9561
|
+
)
|
|
9562
|
+
]
|
|
9563
|
+
}
|
|
9564
|
+
),
|
|
9565
|
+
hasToken && positionBalanceToken && /* @__PURE__ */ jsx(
|
|
9566
|
+
"div",
|
|
9567
|
+
{
|
|
9568
|
+
"data-slot": "withdraw-simple-balance-row",
|
|
9569
|
+
"data-test-id": "earn-withdraw-form-view-simple-balance-row",
|
|
9570
|
+
className: "mt-[var(--deframe-widget-size-gap-sm)]",
|
|
9571
|
+
children: /* @__PURE__ */ jsx("span", { className: "text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]", children: /* @__PURE__ */ jsx(
|
|
9572
|
+
"span",
|
|
9573
|
+
{
|
|
9574
|
+
className: hasError ? "text-[color:var(--deframe-widget-color-state-error)]" : "text-[color:var(--deframe-widget-color-text-secondary)]",
|
|
9575
|
+
children: positionBalanceToken
|
|
9576
|
+
}
|
|
9577
|
+
) })
|
|
9578
|
+
}
|
|
9579
|
+
),
|
|
9580
|
+
!hasToken && /* @__PURE__ */ jsx(
|
|
9581
|
+
"p",
|
|
9582
|
+
{
|
|
9583
|
+
"data-slot": "withdraw-simple-empty-hint",
|
|
9584
|
+
"data-test-id": "earn-withdraw-form-view-simple-empty-hint",
|
|
9585
|
+
className: "mt-[var(--deframe-widget-size-gap-sm)] text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]",
|
|
9586
|
+
children: selectTokenLabel
|
|
9587
|
+
}
|
|
9588
|
+
),
|
|
9589
|
+
/* @__PURE__ */ jsx(AnimatePresence, { children: hasToken && cardHovered && /* @__PURE__ */ jsx(
|
|
9590
|
+
motion.div,
|
|
9591
|
+
{
|
|
9592
|
+
"data-slot": "withdraw-simple-chips-row",
|
|
9593
|
+
"data-test-id": "earn-withdraw-form-view-simple-chips-row",
|
|
9594
|
+
initial: { opacity: 0, height: 0, marginTop: 0 },
|
|
9595
|
+
animate: { opacity: 1, height: "auto", marginTop: "var(--deframe-widget-size-gap-sm)" },
|
|
9596
|
+
exit: { opacity: 0, height: 0, marginTop: 0 },
|
|
9597
|
+
transition: { duration: 0.15, ease: "easeOut" },
|
|
9598
|
+
style: { overflow: "hidden" },
|
|
9599
|
+
onMouseEnter: handleHoverStart,
|
|
9600
|
+
onMouseLeave: handleHoverEnd,
|
|
9601
|
+
children: /* @__PURE__ */ jsx(
|
|
9602
|
+
EarnPercentageButtonsSimpleView,
|
|
9603
|
+
{
|
|
9604
|
+
onPercentageClick,
|
|
9605
|
+
maxLabel
|
|
9606
|
+
}
|
|
9607
|
+
)
|
|
9608
|
+
}
|
|
9609
|
+
) }),
|
|
9610
|
+
bytecodeErrorMessage && /* @__PURE__ */ jsx("div", { className: "mt-[var(--deframe-widget-size-gap-sm)]", children: /* @__PURE__ */ jsx(
|
|
9611
|
+
EarnInlineNotificationSimpleView,
|
|
9612
|
+
{
|
|
9613
|
+
variant: "error",
|
|
9614
|
+
message: bytecodeErrorMessage
|
|
9615
|
+
}
|
|
9616
|
+
) })
|
|
9617
|
+
]
|
|
9618
|
+
}
|
|
9619
|
+
)
|
|
9620
|
+
}
|
|
9621
|
+
),
|
|
9622
|
+
/* @__PURE__ */ jsxs(
|
|
9623
|
+
"footer",
|
|
9624
|
+
{
|
|
9625
|
+
"data-slot": "withdraw-panel-simple-footer",
|
|
9626
|
+
"data-test-id": "earn-withdraw-form-view-simple-footer",
|
|
9627
|
+
className: footerBaseClasses,
|
|
9628
|
+
children: [
|
|
9629
|
+
onBack && /* @__PURE__ */ jsx(
|
|
9630
|
+
SecondaryButton,
|
|
9631
|
+
{
|
|
9632
|
+
type: "button",
|
|
9633
|
+
className: [
|
|
9634
|
+
"flex-1 h-12 rounded-[var(--deframe-widget-size-radius-sm)]",
|
|
9635
|
+
"text-[15px] text-[color:var(--deframe-widget-color-text-secondary)]",
|
|
9636
|
+
"border-[color:var(--deframe-widget-color-border-secondary)]",
|
|
9637
|
+
"outline-none",
|
|
9638
|
+
"transition-[background,color,border-color] duration-150",
|
|
9639
|
+
"hover:opacity-100",
|
|
9640
|
+
"hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_60%,transparent)]",
|
|
9641
|
+
"hover:text-[color:var(--deframe-widget-color-text-primary)]"
|
|
9642
|
+
].join(" "),
|
|
9643
|
+
onClick: onBack,
|
|
9644
|
+
"aria-label": "Cancel withdrawal",
|
|
9645
|
+
children: "Cancel"
|
|
9646
|
+
}
|
|
9647
|
+
),
|
|
9648
|
+
/* @__PURE__ */ jsx(
|
|
9649
|
+
PrimaryButton,
|
|
9650
|
+
{
|
|
9651
|
+
type: "submit",
|
|
9652
|
+
className: [
|
|
9653
|
+
"flex-1 h-12 rounded-[var(--deframe-widget-size-radius-sm)]",
|
|
9654
|
+
"text-[15px] text-[color:var(--deframe-widget-color-text-primary-dark)]",
|
|
9655
|
+
"outline-none",
|
|
9656
|
+
"transition-[background,color,opacity] duration-150"
|
|
9657
|
+
].join(" "),
|
|
9658
|
+
disabled: isSubmitDisabled,
|
|
9659
|
+
"aria-disabled": isSubmitDisabled,
|
|
9660
|
+
"aria-label": submitButtonText,
|
|
9661
|
+
children: submitButtonText
|
|
9662
|
+
}
|
|
9663
|
+
)
|
|
9664
|
+
]
|
|
9665
|
+
}
|
|
9666
|
+
)
|
|
9667
|
+
] }),
|
|
9668
|
+
/* @__PURE__ */ jsx(AnimatePresence, { children: showTxStatus && /* @__PURE__ */ jsx(
|
|
9669
|
+
motion.div,
|
|
9670
|
+
{
|
|
9671
|
+
"data-slot": "withdraw-simple-tx-overlay",
|
|
9672
|
+
"data-test-id": "earn-withdraw-form-view-simple-tx-overlay",
|
|
9673
|
+
initial: { opacity: 0 },
|
|
9674
|
+
animate: { opacity: 1 },
|
|
9675
|
+
exit: { opacity: 0 },
|
|
9676
|
+
transition: { duration: 0.2, ease: "easeOut" },
|
|
9677
|
+
className: "absolute inset-0 z-10 flex items-center justify-center bg-[var(--deframe-widget-color-bg-primary)]",
|
|
9678
|
+
children: /* @__PURE__ */ jsx(
|
|
9679
|
+
EarnTxStatusCardView,
|
|
9680
|
+
{
|
|
9681
|
+
statusLabel: txStatusLabel,
|
|
9682
|
+
isProcessing: isTxProcessing,
|
|
9683
|
+
successMessage: isTxSuccess ? txSuccessMessage : void 0,
|
|
9684
|
+
errorMessage: isTxError ? txErrorMessage : void 0
|
|
9685
|
+
}
|
|
9686
|
+
)
|
|
9687
|
+
}
|
|
9688
|
+
) })
|
|
9689
|
+
]
|
|
9690
|
+
}
|
|
9691
|
+
);
|
|
9692
|
+
};
|
|
8729
9693
|
var EarnDepositProcessingView = ({
|
|
8730
9694
|
progress,
|
|
8731
9695
|
title,
|
|
@@ -8744,49 +9708,501 @@ var EarnDepositProcessingView = ({
|
|
|
8744
9708
|
processingDetailsLabels
|
|
8745
9709
|
}) => {
|
|
8746
9710
|
return /* @__PURE__ */ jsxs(
|
|
8747
|
-
TransactionScreen,
|
|
9711
|
+
TransactionScreen,
|
|
9712
|
+
{
|
|
9713
|
+
progress,
|
|
9714
|
+
iconType: "processing",
|
|
9715
|
+
title,
|
|
9716
|
+
description: /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
9717
|
+
descriptionPrefix,
|
|
9718
|
+
" ",
|
|
9719
|
+
/* @__PURE__ */ jsx(
|
|
9720
|
+
"span",
|
|
9721
|
+
{
|
|
9722
|
+
className: "[font-weight:var(--deframe-widget-font-weight-semibold)] underline underline-offset-2 cursor-pointer text-[color:var(--deframe-widget-color-brand-primary)]",
|
|
9723
|
+
onClick: onGoToHistory,
|
|
9724
|
+
children: activityHistoryText
|
|
9725
|
+
}
|
|
9726
|
+
)
|
|
9727
|
+
] }),
|
|
9728
|
+
onBack,
|
|
9729
|
+
children: [
|
|
9730
|
+
/* @__PURE__ */ jsx(
|
|
9731
|
+
TransactionScreenInvestmentCard,
|
|
9732
|
+
{
|
|
9733
|
+
strategyName,
|
|
9734
|
+
apyLabel,
|
|
9735
|
+
apyValue,
|
|
9736
|
+
iconSrc,
|
|
9737
|
+
iconAlt,
|
|
9738
|
+
amountUSD,
|
|
9739
|
+
amountToken
|
|
9740
|
+
}
|
|
9741
|
+
),
|
|
9742
|
+
/* @__PURE__ */ jsx(
|
|
9743
|
+
TransactionProcessingDetails,
|
|
9744
|
+
{
|
|
9745
|
+
steps: transactionSteps,
|
|
9746
|
+
defaultOpen: true,
|
|
9747
|
+
className: "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-primary)]",
|
|
9748
|
+
labels: processingDetailsLabels
|
|
9749
|
+
}
|
|
9750
|
+
)
|
|
9751
|
+
]
|
|
9752
|
+
}
|
|
9753
|
+
);
|
|
9754
|
+
};
|
|
9755
|
+
function EarnFormSkeleton() {
|
|
9756
|
+
const headerClasses = [
|
|
9757
|
+
"flex items-center",
|
|
9758
|
+
"px-[var(--deframe-widget-size-padding-x-md)]",
|
|
9759
|
+
"py-[var(--deframe-widget-size-padding-y-md)]"
|
|
9760
|
+
].join(" ");
|
|
9761
|
+
const titleClasses = [
|
|
9762
|
+
"flex-1",
|
|
9763
|
+
"text-[15px]",
|
|
9764
|
+
"[font-weight:var(--deframe-widget-font-weight-semibold)]",
|
|
9765
|
+
"text-[color:var(--deframe-widget-color-text-primary)]"
|
|
9766
|
+
].join(" ");
|
|
9767
|
+
const dividerClasses = "h-px bg-[var(--deframe-widget-color-border-secondary)]";
|
|
9768
|
+
const bodyClasses = [
|
|
9769
|
+
"flex flex-col",
|
|
9770
|
+
"gap-[var(--deframe-widget-size-gap-md)]",
|
|
9771
|
+
"px-[var(--deframe-widget-size-padding-x-md)]",
|
|
9772
|
+
"py-[var(--deframe-widget-size-padding-y-md)]"
|
|
9773
|
+
].join(" ");
|
|
9774
|
+
const inputCardClasses = twMerge(
|
|
9775
|
+
"rounded-[var(--deframe-widget-size-radius-sm)]",
|
|
9776
|
+
"border border-[color:var(--deframe-widget-color-border-secondary)]",
|
|
9777
|
+
"bg-[var(--deframe-widget-color-bg-secondary)]",
|
|
9778
|
+
"px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]"
|
|
9779
|
+
);
|
|
9780
|
+
const footerClasses = [
|
|
9781
|
+
"flex gap-[var(--deframe-widget-size-gap-sm)]",
|
|
9782
|
+
"px-[var(--deframe-widget-size-padding-x-md)]",
|
|
9783
|
+
"pb-[var(--deframe-widget-size-padding-y-md)]"
|
|
9784
|
+
].join(" ");
|
|
9785
|
+
return /* @__PURE__ */ jsxs(
|
|
9786
|
+
"div",
|
|
9787
|
+
{
|
|
9788
|
+
"data-test-id": "earn-form-skeleton",
|
|
9789
|
+
className: "flex flex-col font-[var(--deframe-widget-font-family)]",
|
|
9790
|
+
children: [
|
|
9791
|
+
/* @__PURE__ */ jsx("div", { "data-test-id": "earn-form-skeleton-header", className: headerClasses, children: /* @__PURE__ */ jsx("span", { className: titleClasses, children: "Deposit" }) }),
|
|
9792
|
+
/* @__PURE__ */ jsx("div", { "data-test-id": "earn-form-skeleton-divider", className: dividerClasses }),
|
|
9793
|
+
/* @__PURE__ */ jsx("div", { "data-test-id": "earn-form-skeleton-body", className: bodyClasses, children: /* @__PURE__ */ jsxs("div", { "data-test-id": "earn-form-skeleton-input-card", className: inputCardClasses, children: [
|
|
9794
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)]", children: [
|
|
9795
|
+
/* @__PURE__ */ jsxs(
|
|
9796
|
+
"div",
|
|
9797
|
+
{
|
|
9798
|
+
className: twMerge(
|
|
9799
|
+
"inline-flex items-center gap-[10px]",
|
|
9800
|
+
"py-[var(--deframe-widget-size-padding-y-sm)] px-[10px]",
|
|
9801
|
+
"rounded-[var(--deframe-widget-size-radius-sm)]",
|
|
9802
|
+
"bg-[var(--deframe-widget-color-bg-tertiary)]",
|
|
9803
|
+
"flex-shrink-0"
|
|
9804
|
+
),
|
|
9805
|
+
children: [
|
|
9806
|
+
/* @__PURE__ */ jsxs("div", { className: "relative flex-shrink-0 w-[38px] h-[38px]", children: [
|
|
9807
|
+
/* @__PURE__ */ jsx(
|
|
9808
|
+
"div",
|
|
9809
|
+
{
|
|
9810
|
+
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)]",
|
|
9811
|
+
children: "US"
|
|
9812
|
+
}
|
|
9813
|
+
),
|
|
9814
|
+
/* @__PURE__ */ 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)]" })
|
|
9815
|
+
] }),
|
|
9816
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start min-w-0", children: [
|
|
9817
|
+
/* @__PURE__ */ 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" }),
|
|
9818
|
+
/* @__PURE__ */ 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" })
|
|
9819
|
+
] })
|
|
9820
|
+
]
|
|
9821
|
+
}
|
|
9822
|
+
),
|
|
9823
|
+
/* @__PURE__ */ jsx("div", { className: "w-px h-10 bg-[var(--deframe-widget-color-border-secondary)] flex-shrink-0" }),
|
|
9824
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end flex-1 min-w-0", children: [
|
|
9825
|
+
/* @__PURE__ */ 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" }),
|
|
9826
|
+
/* @__PURE__ */ jsx("span", { className: "text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]", children: "\u2248 $499.87" })
|
|
9827
|
+
] })
|
|
9828
|
+
] }),
|
|
9829
|
+
/* @__PURE__ */ jsx("div", { className: "mt-[var(--deframe-widget-size-gap-sm)]", children: /* @__PURE__ */ jsx("span", { className: "text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)]", children: "Available: 1,250.00 USDC" }) })
|
|
9830
|
+
] }) }),
|
|
9831
|
+
/* @__PURE__ */ jsxs("div", { "data-test-id": "earn-form-skeleton-footer", className: footerClasses, children: [
|
|
9832
|
+
/* @__PURE__ */ jsx(
|
|
9833
|
+
"div",
|
|
9834
|
+
{
|
|
9835
|
+
"data-test-id": "earn-form-skeleton-cancel-btn",
|
|
9836
|
+
className: twMerge(
|
|
9837
|
+
"flex-1 h-12",
|
|
9838
|
+
"rounded-[var(--deframe-widget-size-radius-sm)]",
|
|
9839
|
+
"border border-[color:var(--deframe-widget-color-border-secondary)]",
|
|
9840
|
+
"flex items-center justify-center",
|
|
9841
|
+
"text-[15px] [font-weight:var(--deframe-widget-font-weight-semibold)]",
|
|
9842
|
+
"text-[color:var(--deframe-widget-color-text-secondary)]"
|
|
9843
|
+
),
|
|
9844
|
+
children: "Cancel"
|
|
9845
|
+
}
|
|
9846
|
+
),
|
|
9847
|
+
/* @__PURE__ */ jsx(
|
|
9848
|
+
"div",
|
|
9849
|
+
{
|
|
9850
|
+
"data-test-id": "earn-form-skeleton-submit-btn",
|
|
9851
|
+
className: twMerge(
|
|
9852
|
+
"flex-1 h-12",
|
|
9853
|
+
"rounded-[var(--deframe-widget-size-radius-sm)]",
|
|
9854
|
+
"bg-[var(--deframe-widget-color-brand-primary)]",
|
|
9855
|
+
"flex items-center justify-center",
|
|
9856
|
+
"text-[15px] [font-weight:var(--deframe-widget-font-weight-semibold)]",
|
|
9857
|
+
"text-[color:var(--deframe-widget-color-text-primary-dark)]"
|
|
9858
|
+
),
|
|
9859
|
+
children: "Deposit"
|
|
9860
|
+
}
|
|
9861
|
+
)
|
|
9862
|
+
] })
|
|
9863
|
+
]
|
|
9864
|
+
}
|
|
9865
|
+
);
|
|
9866
|
+
}
|
|
9867
|
+
function EarnFeedbackOverlaySimpleView({
|
|
9868
|
+
variant,
|
|
9869
|
+
title,
|
|
9870
|
+
subtitle
|
|
9871
|
+
}) {
|
|
9872
|
+
const isLoading = variant === "loading";
|
|
9873
|
+
const wrapperClasses = twMerge(
|
|
9874
|
+
"relative flex flex-col overflow-hidden w-[420px]",
|
|
9875
|
+
"rounded-[var(--deframe-widget-size-radius-md)]",
|
|
9876
|
+
"bg-[var(--deframe-widget-color-bg-primary)]",
|
|
9877
|
+
"border border-[color:var(--deframe-widget-color-border-secondary)]",
|
|
9878
|
+
"font-[var(--deframe-widget-font-family)]"
|
|
9879
|
+
);
|
|
9880
|
+
const overlayClasses = twMerge(
|
|
9881
|
+
"absolute inset-0 z-10",
|
|
9882
|
+
"flex flex-col items-center justify-center",
|
|
9883
|
+
"gap-[var(--deframe-widget-size-gap-lg)]",
|
|
9884
|
+
"px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-lg)]",
|
|
9885
|
+
"rounded-[inherit]",
|
|
9886
|
+
"backdrop-blur-[12px] [-webkit-backdrop-filter:blur(12px)]",
|
|
9887
|
+
"bg-[color-mix(in_srgb,var(--deframe-widget-color-bg-primary)_88%,transparent)]"
|
|
9888
|
+
);
|
|
9889
|
+
const textSectionClasses = twMerge(
|
|
9890
|
+
"flex flex-col items-center",
|
|
9891
|
+
"gap-[var(--deframe-widget-size-gap-sm)] text-center"
|
|
9892
|
+
);
|
|
9893
|
+
const titleClasses = twMerge(
|
|
9894
|
+
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]"
|
|
9895
|
+
);
|
|
9896
|
+
const subtitleClasses = twMerge(
|
|
9897
|
+
"[font-size:var(--deframe-widget-font-size-md)] [line-height:1.6]",
|
|
9898
|
+
"[font-weight:var(--deframe-widget-font-weight-regular)]",
|
|
9899
|
+
"font-[var(--deframe-widget-font-family)]",
|
|
9900
|
+
"text-[color:var(--deframe-widget-color-text-secondary)]",
|
|
9901
|
+
"max-w-[260px]"
|
|
9902
|
+
);
|
|
9903
|
+
return /* @__PURE__ */ jsxs(
|
|
9904
|
+
"div",
|
|
9905
|
+
{
|
|
9906
|
+
"data-test-id": "earn-feedback-overlay-wrapper",
|
|
9907
|
+
"data-slot": "earn-feedback-overlay-wrapper",
|
|
9908
|
+
className: wrapperClasses,
|
|
9909
|
+
children: [
|
|
9910
|
+
/* @__PURE__ */ jsx("div", { "data-test-id": "earn-feedback-overlay-skeleton", children: /* @__PURE__ */ jsx(EarnFormSkeleton, {}) }),
|
|
9911
|
+
/* @__PURE__ */ jsxs(
|
|
9912
|
+
motion.div,
|
|
9913
|
+
{
|
|
9914
|
+
"data-test-id": "earn-feedback-overlay",
|
|
9915
|
+
"data-slot": "earn-feedback-overlay",
|
|
9916
|
+
initial: { opacity: 0 },
|
|
9917
|
+
animate: { opacity: 1 },
|
|
9918
|
+
exit: { opacity: 0 },
|
|
9919
|
+
transition: { duration: 0.2 },
|
|
9920
|
+
className: overlayClasses,
|
|
9921
|
+
children: [
|
|
9922
|
+
isLoading && /* @__PURE__ */ jsx(LoadingIcon2, {}),
|
|
9923
|
+
variant === "success" && /* @__PURE__ */ jsx(SuccessIcon2, {}),
|
|
9924
|
+
variant === "warning" && /* @__PURE__ */ jsx(WarningIcon2, {}),
|
|
9925
|
+
variant === "error" && /* @__PURE__ */ jsx(ErrorIcon2, {}),
|
|
9926
|
+
/* @__PURE__ */ jsxs(
|
|
9927
|
+
"div",
|
|
9928
|
+
{
|
|
9929
|
+
"data-test-id": "earn-feedback-text",
|
|
9930
|
+
"data-slot": "earn-feedback-text",
|
|
9931
|
+
className: textSectionClasses,
|
|
9932
|
+
children: [
|
|
9933
|
+
/* @__PURE__ */ jsx(
|
|
9934
|
+
"span",
|
|
9935
|
+
{
|
|
9936
|
+
"data-test-id": "earn-feedback-title",
|
|
9937
|
+
"data-slot": "earn-feedback-title",
|
|
9938
|
+
className: titleClasses,
|
|
9939
|
+
children: title
|
|
9940
|
+
}
|
|
9941
|
+
),
|
|
9942
|
+
subtitle && /* @__PURE__ */ jsx(
|
|
9943
|
+
"span",
|
|
9944
|
+
{
|
|
9945
|
+
"data-test-id": "earn-feedback-subtitle",
|
|
9946
|
+
"data-slot": "earn-feedback-subtitle",
|
|
9947
|
+
className: subtitleClasses,
|
|
9948
|
+
children: subtitle
|
|
9949
|
+
}
|
|
9950
|
+
)
|
|
9951
|
+
]
|
|
9952
|
+
}
|
|
9953
|
+
)
|
|
9954
|
+
]
|
|
9955
|
+
},
|
|
9956
|
+
"earn-feedback-overlay"
|
|
9957
|
+
)
|
|
9958
|
+
]
|
|
9959
|
+
}
|
|
9960
|
+
);
|
|
9961
|
+
}
|
|
9962
|
+
function LoadingIcon2() {
|
|
9963
|
+
const green = "var(--deframe-widget-color-brand-primary)";
|
|
9964
|
+
const trackColor = "color-mix(in srgb, var(--deframe-widget-color-brand-primary) 12%, transparent)";
|
|
9965
|
+
const sw = 2.8;
|
|
9966
|
+
const aw = 2.4;
|
|
9967
|
+
return /* @__PURE__ */ jsxs(
|
|
9968
|
+
motion.svg,
|
|
8748
9969
|
{
|
|
8749
|
-
|
|
8750
|
-
|
|
8751
|
-
|
|
8752
|
-
|
|
8753
|
-
|
|
8754
|
-
|
|
9970
|
+
"data-test-id": "earn-feedback-loading-icon",
|
|
9971
|
+
"data-slot": "earn-feedback-loading-icon",
|
|
9972
|
+
width: "56",
|
|
9973
|
+
height: "56",
|
|
9974
|
+
viewBox: "0 0 56 56",
|
|
9975
|
+
fill: "none",
|
|
9976
|
+
"aria-hidden": "true",
|
|
9977
|
+
animate: { rotate: 360 },
|
|
9978
|
+
transition: { duration: 1.6, repeat: Infinity, ease: "linear" },
|
|
9979
|
+
children: [
|
|
9980
|
+
/* @__PURE__ */ jsx("circle", { cx: "28", cy: "28", r: "22", stroke: trackColor, strokeWidth: sw }),
|
|
8755
9981
|
/* @__PURE__ */ jsx(
|
|
8756
|
-
"
|
|
9982
|
+
"path",
|
|
8757
9983
|
{
|
|
8758
|
-
|
|
8759
|
-
|
|
8760
|
-
|
|
9984
|
+
d: "M 6.75 22.31 A 22 22 0 0 1 49.25 22.31",
|
|
9985
|
+
stroke: green,
|
|
9986
|
+
strokeWidth: sw,
|
|
9987
|
+
strokeLinecap: "round"
|
|
8761
9988
|
}
|
|
8762
|
-
)
|
|
8763
|
-
] }),
|
|
8764
|
-
onBack,
|
|
8765
|
-
children: [
|
|
9989
|
+
),
|
|
8766
9990
|
/* @__PURE__ */ jsx(
|
|
8767
|
-
|
|
9991
|
+
"path",
|
|
8768
9992
|
{
|
|
8769
|
-
|
|
8770
|
-
|
|
8771
|
-
|
|
8772
|
-
|
|
8773
|
-
|
|
8774
|
-
amountUSD,
|
|
8775
|
-
amountToken
|
|
9993
|
+
d: "M 45.0 18.1 L 49.25 22.31 L 51.0 16.5",
|
|
9994
|
+
stroke: green,
|
|
9995
|
+
strokeWidth: aw,
|
|
9996
|
+
strokeLinecap: "round",
|
|
9997
|
+
strokeLinejoin: "round"
|
|
8776
9998
|
}
|
|
8777
9999
|
),
|
|
8778
10000
|
/* @__PURE__ */ jsx(
|
|
8779
|
-
|
|
10001
|
+
"path",
|
|
8780
10002
|
{
|
|
8781
|
-
|
|
8782
|
-
|
|
8783
|
-
|
|
8784
|
-
|
|
10003
|
+
d: "M 49.25 33.69 A 22 22 0 0 1 6.75 33.69",
|
|
10004
|
+
stroke: green,
|
|
10005
|
+
strokeWidth: sw,
|
|
10006
|
+
strokeLinecap: "round"
|
|
10007
|
+
}
|
|
10008
|
+
),
|
|
10009
|
+
/* @__PURE__ */ jsx(
|
|
10010
|
+
"path",
|
|
10011
|
+
{
|
|
10012
|
+
d: "M 11.0 37.9 L 6.75 33.69 L 5.0 39.5",
|
|
10013
|
+
stroke: green,
|
|
10014
|
+
strokeWidth: aw,
|
|
10015
|
+
strokeLinecap: "round",
|
|
10016
|
+
strokeLinejoin: "round"
|
|
8785
10017
|
}
|
|
8786
10018
|
)
|
|
8787
10019
|
]
|
|
8788
10020
|
}
|
|
8789
10021
|
);
|
|
10022
|
+
}
|
|
10023
|
+
function SuccessIcon2() {
|
|
10024
|
+
return /* @__PURE__ */ jsx(
|
|
10025
|
+
motion.div,
|
|
10026
|
+
{
|
|
10027
|
+
"data-test-id": "earn-feedback-success-icon",
|
|
10028
|
+
"data-slot": "earn-feedback-success-icon",
|
|
10029
|
+
initial: { scale: 0.55, opacity: 0 },
|
|
10030
|
+
animate: { scale: 1, opacity: 1 },
|
|
10031
|
+
transition: { type: "spring", stiffness: 300, damping: 20, delay: 0.05 },
|
|
10032
|
+
className: twMerge(
|
|
10033
|
+
"flex items-center justify-center shrink-0",
|
|
10034
|
+
"w-[64px] h-[64px] rounded-full"
|
|
10035
|
+
),
|
|
10036
|
+
style: {
|
|
10037
|
+
background: "var(--deframe-widget-color-state-success)",
|
|
10038
|
+
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)"
|
|
10039
|
+
},
|
|
10040
|
+
children: /* @__PURE__ */ jsx(
|
|
10041
|
+
"svg",
|
|
10042
|
+
{
|
|
10043
|
+
width: "36",
|
|
10044
|
+
height: "36",
|
|
10045
|
+
viewBox: "0 0 44 44",
|
|
10046
|
+
fill: "none",
|
|
10047
|
+
"aria-hidden": "true",
|
|
10048
|
+
children: /* @__PURE__ */ jsx(
|
|
10049
|
+
motion.path,
|
|
10050
|
+
{
|
|
10051
|
+
d: "M10 22 L18 30 L34 14",
|
|
10052
|
+
stroke: "white",
|
|
10053
|
+
strokeWidth: "3.5",
|
|
10054
|
+
strokeLinecap: "round",
|
|
10055
|
+
strokeLinejoin: "round",
|
|
10056
|
+
initial: { pathLength: 0 },
|
|
10057
|
+
animate: { pathLength: 1 },
|
|
10058
|
+
transition: { duration: 0.45, delay: 0.2, ease: "easeOut" }
|
|
10059
|
+
}
|
|
10060
|
+
)
|
|
10061
|
+
}
|
|
10062
|
+
)
|
|
10063
|
+
}
|
|
10064
|
+
);
|
|
10065
|
+
}
|
|
10066
|
+
function ErrorIcon2() {
|
|
10067
|
+
return /* @__PURE__ */ jsx(
|
|
10068
|
+
motion.div,
|
|
10069
|
+
{
|
|
10070
|
+
"data-test-id": "earn-feedback-error-icon",
|
|
10071
|
+
"data-slot": "earn-feedback-error-icon",
|
|
10072
|
+
initial: { scale: 0.55, opacity: 0 },
|
|
10073
|
+
animate: { scale: 1, opacity: 1 },
|
|
10074
|
+
transition: { type: "spring", stiffness: 300, damping: 20, delay: 0.05 },
|
|
10075
|
+
className: twMerge(
|
|
10076
|
+
"flex items-center justify-center shrink-0",
|
|
10077
|
+
"w-[64px] h-[64px] rounded-full"
|
|
10078
|
+
),
|
|
10079
|
+
style: {
|
|
10080
|
+
background: "var(--deframe-widget-color-state-error)",
|
|
10081
|
+
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)"
|
|
10082
|
+
},
|
|
10083
|
+
children: /* @__PURE__ */ jsxs(
|
|
10084
|
+
"svg",
|
|
10085
|
+
{
|
|
10086
|
+
width: "36",
|
|
10087
|
+
height: "36",
|
|
10088
|
+
viewBox: "0 0 44 44",
|
|
10089
|
+
fill: "none",
|
|
10090
|
+
"aria-hidden": "true",
|
|
10091
|
+
children: [
|
|
10092
|
+
/* @__PURE__ */ jsx(
|
|
10093
|
+
motion.line,
|
|
10094
|
+
{
|
|
10095
|
+
x1: "14",
|
|
10096
|
+
y1: "14",
|
|
10097
|
+
x2: "30",
|
|
10098
|
+
y2: "30",
|
|
10099
|
+
stroke: "white",
|
|
10100
|
+
strokeWidth: "3.5",
|
|
10101
|
+
strokeLinecap: "round",
|
|
10102
|
+
initial: { pathLength: 0 },
|
|
10103
|
+
animate: { pathLength: 1 },
|
|
10104
|
+
transition: { duration: 0.25, delay: 0.2, ease: "easeOut" }
|
|
10105
|
+
}
|
|
10106
|
+
),
|
|
10107
|
+
/* @__PURE__ */ jsx(
|
|
10108
|
+
motion.line,
|
|
10109
|
+
{
|
|
10110
|
+
x1: "30",
|
|
10111
|
+
y1: "14",
|
|
10112
|
+
x2: "14",
|
|
10113
|
+
y2: "30",
|
|
10114
|
+
stroke: "white",
|
|
10115
|
+
strokeWidth: "3.5",
|
|
10116
|
+
strokeLinecap: "round",
|
|
10117
|
+
initial: { pathLength: 0 },
|
|
10118
|
+
animate: { pathLength: 1 },
|
|
10119
|
+
transition: { duration: 0.25, delay: 0.38, ease: "easeOut" }
|
|
10120
|
+
}
|
|
10121
|
+
)
|
|
10122
|
+
]
|
|
10123
|
+
}
|
|
10124
|
+
)
|
|
10125
|
+
}
|
|
10126
|
+
);
|
|
10127
|
+
}
|
|
10128
|
+
function WarningIcon2() {
|
|
10129
|
+
const amber = "var(--deframe-widget-color-state-warning)";
|
|
10130
|
+
const amberGlow = "color-mix(in srgb, var(--deframe-widget-color-state-warning) 12%, transparent)";
|
|
10131
|
+
const amberGlow2 = "color-mix(in srgb, var(--deframe-widget-color-state-warning) 22%, transparent)";
|
|
10132
|
+
return /* @__PURE__ */ jsx(
|
|
10133
|
+
motion.div,
|
|
10134
|
+
{
|
|
10135
|
+
"data-test-id": "earn-feedback-warning-icon",
|
|
10136
|
+
"data-slot": "earn-feedback-warning-icon",
|
|
10137
|
+
initial: { scale: 0.55, opacity: 0 },
|
|
10138
|
+
animate: { scale: 1, opacity: 1 },
|
|
10139
|
+
transition: { type: "spring", stiffness: 300, damping: 20, delay: 0.05 },
|
|
10140
|
+
className: twMerge(
|
|
10141
|
+
"flex items-center justify-center shrink-0",
|
|
10142
|
+
"w-[64px] h-[64px] rounded-full"
|
|
10143
|
+
),
|
|
10144
|
+
style: {
|
|
10145
|
+
background: amber,
|
|
10146
|
+
boxShadow: `0 0 0 7px ${amberGlow}, 0 0 24px ${amberGlow2}`
|
|
10147
|
+
},
|
|
10148
|
+
children: /* @__PURE__ */ jsxs(
|
|
10149
|
+
"svg",
|
|
10150
|
+
{
|
|
10151
|
+
width: "36",
|
|
10152
|
+
height: "36",
|
|
10153
|
+
viewBox: "0 0 44 44",
|
|
10154
|
+
fill: "none",
|
|
10155
|
+
"aria-hidden": "true",
|
|
10156
|
+
children: [
|
|
10157
|
+
/* @__PURE__ */ jsx("circle", { cx: "22", cy: "22", r: "13", stroke: "white", strokeWidth: "2.5" }),
|
|
10158
|
+
/* @__PURE__ */ jsx(
|
|
10159
|
+
motion.line,
|
|
10160
|
+
{
|
|
10161
|
+
x1: "22",
|
|
10162
|
+
y1: "22",
|
|
10163
|
+
x2: "22",
|
|
10164
|
+
y2: "13",
|
|
10165
|
+
stroke: "white",
|
|
10166
|
+
strokeWidth: "2.5",
|
|
10167
|
+
strokeLinecap: "round",
|
|
10168
|
+
initial: { pathLength: 0 },
|
|
10169
|
+
animate: { pathLength: 1 },
|
|
10170
|
+
transition: { duration: 0.3, delay: 0.2, ease: "easeOut" }
|
|
10171
|
+
}
|
|
10172
|
+
),
|
|
10173
|
+
/* @__PURE__ */ jsx(
|
|
10174
|
+
motion.line,
|
|
10175
|
+
{
|
|
10176
|
+
x1: "22",
|
|
10177
|
+
y1: "22",
|
|
10178
|
+
x2: "31",
|
|
10179
|
+
y2: "22",
|
|
10180
|
+
stroke: "white",
|
|
10181
|
+
strokeWidth: "2.5",
|
|
10182
|
+
strokeLinecap: "round",
|
|
10183
|
+
initial: { pathLength: 0 },
|
|
10184
|
+
animate: { pathLength: 1 },
|
|
10185
|
+
transition: { duration: 0.3, delay: 0.38, ease: "easeOut" }
|
|
10186
|
+
}
|
|
10187
|
+
)
|
|
10188
|
+
]
|
|
10189
|
+
}
|
|
10190
|
+
)
|
|
10191
|
+
}
|
|
10192
|
+
);
|
|
10193
|
+
}
|
|
10194
|
+
var EarnDepositProcessingSimpleView = ({
|
|
10195
|
+
title,
|
|
10196
|
+
descriptionPrefix
|
|
10197
|
+
}) => {
|
|
10198
|
+
return /* @__PURE__ */ jsx("div", { "data-test-id": "earn-deposit-processing-simple-view", children: /* @__PURE__ */ jsx(
|
|
10199
|
+
EarnFeedbackOverlaySimpleView,
|
|
10200
|
+
{
|
|
10201
|
+
variant: "loading",
|
|
10202
|
+
title,
|
|
10203
|
+
subtitle: descriptionPrefix
|
|
10204
|
+
}
|
|
10205
|
+
) });
|
|
8790
10206
|
};
|
|
8791
10207
|
var EarnDepositSuccessView = ({
|
|
8792
10208
|
title,
|
|
@@ -8861,6 +10277,25 @@ var EarnDepositSuccessView = ({
|
|
|
8861
10277
|
}
|
|
8862
10278
|
);
|
|
8863
10279
|
};
|
|
10280
|
+
var EarnDepositSuccessSimpleView = ({
|
|
10281
|
+
title,
|
|
10282
|
+
descriptionSuffix,
|
|
10283
|
+
onClose
|
|
10284
|
+
}) => {
|
|
10285
|
+
React6__default.useEffect(() => {
|
|
10286
|
+
if (!onClose) return;
|
|
10287
|
+
const timer = setTimeout(onClose, 5e3);
|
|
10288
|
+
return () => clearTimeout(timer);
|
|
10289
|
+
}, [onClose]);
|
|
10290
|
+
return /* @__PURE__ */ jsx("div", { "data-test-id": "earn-deposit-success-simple-view", children: /* @__PURE__ */ jsx(
|
|
10291
|
+
EarnFeedbackOverlaySimpleView,
|
|
10292
|
+
{
|
|
10293
|
+
variant: "success",
|
|
10294
|
+
title,
|
|
10295
|
+
subtitle: descriptionSuffix
|
|
10296
|
+
}
|
|
10297
|
+
) });
|
|
10298
|
+
};
|
|
8864
10299
|
var EarnDepositWarningView = ({
|
|
8865
10300
|
progress,
|
|
8866
10301
|
title,
|
|
@@ -8920,6 +10355,25 @@ var EarnDepositWarningView = ({
|
|
|
8920
10355
|
}
|
|
8921
10356
|
);
|
|
8922
10357
|
};
|
|
10358
|
+
var EarnDepositWarningSimpleView = ({
|
|
10359
|
+
title,
|
|
10360
|
+
description,
|
|
10361
|
+
onBack
|
|
10362
|
+
}) => {
|
|
10363
|
+
React6__default.useEffect(() => {
|
|
10364
|
+
if (!onBack) return;
|
|
10365
|
+
const timer = setTimeout(onBack, 5e3);
|
|
10366
|
+
return () => clearTimeout(timer);
|
|
10367
|
+
}, [onBack]);
|
|
10368
|
+
return /* @__PURE__ */ jsx("div", { "data-test-id": "earn-deposit-warning-simple-view", children: /* @__PURE__ */ jsx(
|
|
10369
|
+
EarnFeedbackOverlaySimpleView,
|
|
10370
|
+
{
|
|
10371
|
+
variant: "warning",
|
|
10372
|
+
title,
|
|
10373
|
+
subtitle: description
|
|
10374
|
+
}
|
|
10375
|
+
) });
|
|
10376
|
+
};
|
|
8923
10377
|
var EarnDepositFailedView = ({
|
|
8924
10378
|
progress,
|
|
8925
10379
|
title,
|
|
@@ -8982,6 +10436,25 @@ var EarnDepositFailedView = ({
|
|
|
8982
10436
|
}
|
|
8983
10437
|
);
|
|
8984
10438
|
};
|
|
10439
|
+
var EarnDepositFailedSimpleView = ({
|
|
10440
|
+
title,
|
|
10441
|
+
description,
|
|
10442
|
+
onBack
|
|
10443
|
+
}) => {
|
|
10444
|
+
React6__default.useEffect(() => {
|
|
10445
|
+
if (!onBack) return;
|
|
10446
|
+
const timer = setTimeout(onBack, 5e3);
|
|
10447
|
+
return () => clearTimeout(timer);
|
|
10448
|
+
}, [onBack]);
|
|
10449
|
+
return /* @__PURE__ */ jsx("div", { "data-test-id": "earn-deposit-failed-simple-view", children: /* @__PURE__ */ jsx(
|
|
10450
|
+
EarnFeedbackOverlaySimpleView,
|
|
10451
|
+
{
|
|
10452
|
+
variant: "error",
|
|
10453
|
+
title,
|
|
10454
|
+
subtitle: description
|
|
10455
|
+
}
|
|
10456
|
+
) });
|
|
10457
|
+
};
|
|
8985
10458
|
var EarnWithdrawProcessingView = ({
|
|
8986
10459
|
progress,
|
|
8987
10460
|
title,
|
|
@@ -9047,6 +10520,19 @@ var EarnWithdrawProcessingView = ({
|
|
|
9047
10520
|
}
|
|
9048
10521
|
);
|
|
9049
10522
|
};
|
|
10523
|
+
var EarnWithdrawProcessingSimpleView = ({
|
|
10524
|
+
title,
|
|
10525
|
+
descriptionPrefix
|
|
10526
|
+
}) => {
|
|
10527
|
+
return /* @__PURE__ */ jsx("div", { "data-test-id": "earn-withdraw-processing-simple-view", children: /* @__PURE__ */ jsx(
|
|
10528
|
+
EarnFeedbackOverlaySimpleView,
|
|
10529
|
+
{
|
|
10530
|
+
variant: "loading",
|
|
10531
|
+
title,
|
|
10532
|
+
subtitle: descriptionPrefix
|
|
10533
|
+
}
|
|
10534
|
+
) });
|
|
10535
|
+
};
|
|
9050
10536
|
var EarnWithdrawSuccessView = ({
|
|
9051
10537
|
title,
|
|
9052
10538
|
descriptionPrefix,
|
|
@@ -9113,6 +10599,25 @@ var EarnWithdrawSuccessView = ({
|
|
|
9113
10599
|
}
|
|
9114
10600
|
);
|
|
9115
10601
|
};
|
|
10602
|
+
var EarnWithdrawSuccessSimpleView = ({
|
|
10603
|
+
title,
|
|
10604
|
+
descriptionSuffix,
|
|
10605
|
+
onClose
|
|
10606
|
+
}) => {
|
|
10607
|
+
React6__default.useEffect(() => {
|
|
10608
|
+
if (!onClose) return;
|
|
10609
|
+
const timer = setTimeout(onClose, 5e3);
|
|
10610
|
+
return () => clearTimeout(timer);
|
|
10611
|
+
}, [onClose]);
|
|
10612
|
+
return /* @__PURE__ */ jsx("div", { "data-test-id": "earn-withdraw-success-simple-view", children: /* @__PURE__ */ jsx(
|
|
10613
|
+
EarnFeedbackOverlaySimpleView,
|
|
10614
|
+
{
|
|
10615
|
+
variant: "success",
|
|
10616
|
+
title,
|
|
10617
|
+
subtitle: descriptionSuffix
|
|
10618
|
+
}
|
|
10619
|
+
) });
|
|
10620
|
+
};
|
|
9116
10621
|
var EarnWithdrawWarningView = ({
|
|
9117
10622
|
progress,
|
|
9118
10623
|
title,
|
|
@@ -9172,6 +10677,25 @@ var EarnWithdrawWarningView = ({
|
|
|
9172
10677
|
}
|
|
9173
10678
|
);
|
|
9174
10679
|
};
|
|
10680
|
+
var EarnWithdrawWarningSimpleView = ({
|
|
10681
|
+
title,
|
|
10682
|
+
description,
|
|
10683
|
+
onBack
|
|
10684
|
+
}) => {
|
|
10685
|
+
React6__default.useEffect(() => {
|
|
10686
|
+
if (!onBack) return;
|
|
10687
|
+
const timer = setTimeout(onBack, 5e3);
|
|
10688
|
+
return () => clearTimeout(timer);
|
|
10689
|
+
}, [onBack]);
|
|
10690
|
+
return /* @__PURE__ */ jsx("div", { "data-test-id": "earn-withdraw-warning-simple-view", children: /* @__PURE__ */ jsx(
|
|
10691
|
+
EarnFeedbackOverlaySimpleView,
|
|
10692
|
+
{
|
|
10693
|
+
variant: "warning",
|
|
10694
|
+
title,
|
|
10695
|
+
subtitle: description
|
|
10696
|
+
}
|
|
10697
|
+
) });
|
|
10698
|
+
};
|
|
9175
10699
|
var EarnWithdrawFailedView = ({
|
|
9176
10700
|
progress,
|
|
9177
10701
|
title,
|
|
@@ -9234,6 +10758,25 @@ var EarnWithdrawFailedView = ({
|
|
|
9234
10758
|
}
|
|
9235
10759
|
);
|
|
9236
10760
|
};
|
|
10761
|
+
var EarnWithdrawFailedSimpleView = ({
|
|
10762
|
+
title,
|
|
10763
|
+
description,
|
|
10764
|
+
onBack
|
|
10765
|
+
}) => {
|
|
10766
|
+
React6__default.useEffect(() => {
|
|
10767
|
+
if (!onBack) return;
|
|
10768
|
+
const timer = setTimeout(onBack, 5e3);
|
|
10769
|
+
return () => clearTimeout(timer);
|
|
10770
|
+
}, [onBack]);
|
|
10771
|
+
return /* @__PURE__ */ jsx("div", { "data-test-id": "earn-withdraw-failed-simple-view", children: /* @__PURE__ */ jsx(
|
|
10772
|
+
EarnFeedbackOverlaySimpleView,
|
|
10773
|
+
{
|
|
10774
|
+
variant: "error",
|
|
10775
|
+
title,
|
|
10776
|
+
subtitle: description
|
|
10777
|
+
}
|
|
10778
|
+
) });
|
|
10779
|
+
};
|
|
9237
10780
|
var DashboardCard = ({ children, className }) => {
|
|
9238
10781
|
return /* @__PURE__ */ jsx("div", { "data-test-id": "dashboard-card", className: twMerge("bg-[var(--deframe-widget-color-bg-subtle)] rounded", className), children });
|
|
9239
10782
|
};
|
|
@@ -10519,6 +12062,6 @@ var DashboardViewSimple = ({
|
|
|
10519
12062
|
);
|
|
10520
12063
|
};
|
|
10521
12064
|
|
|
10522
|
-
export { ActionButton, ActionSheet, AddressDisplay, ApyRange, BackButton, BackgroundContainer, BannerNotification, Chip, ChipGroup, ChooseANetworkView, ChooseAStrategyActionsheetView, ChooseAnAssetSwapView, ChooseNetworkAndAssetViewSimple, CloseButton_default as CloseButton, CollapsibleInfoRow, CollapsibleSection, ConfirmSwapButtonView, ConfirmSwapButtonViewSimple, ConnectWalletList, Currency, DashboardBalancesBreakdown, DashboardCard, DashboardInvestmentOpportunitiesView, DashboardPortfolioView, DashboardPortfolioViewSimple, DashboardRecentTransactionsView, DashboardRecentTransactionsViewSimple, DashboardStrategiesListView, DashboardTokenListView, DashboardTokensView, DashboardTokensViewSimple, DashboardTransactionsPlaceholder, DashboardView, DashboardViewSimple, DeframeComponentsProvider, DetailsHeader, EarnAmountInputView, EarnBalanceCard, EarnBytecodeErrorView, EarnDepositFailedView, EarnDepositFormView, EarnDepositProcessingView, EarnDepositSuccessView, EarnDepositWarningView, EarnDesktopView, EarnExploreGridView, EarnInvestedSectionView, EarnInvestmentDetailsView, EarnInvestmentSummaryView, EarnNoBalanceNotificationView, EarnOverviewView, EarnPercentageButtonsView, EarnPositionCardView, EarnRecentTransactionsView, EarnTokenSelectorView, EarnTxStatusCardView, EarnWithdrawFailedView, EarnWithdrawFormView, EarnWithdrawProcessingView, EarnWithdrawSuccessView, EarnWithdrawTokenSelectorView, EarnWithdrawWarningView, Currency as Fiat, FlexCol, FlexRow, GroupedStrategyListView, HighRiskBadge, HistoryDepositDetailsView, HistoryListSkeleton, HistoryListView, HistorySwapDetailsView, HistoryTabEmpty, HistoryWithdrawDetailsView, InfoLabel, InfoRow, InfoRowIconLabel, InfoRowIconValue, InfoRowWithIcon, InfoValue, Input2 as Input, InvestmentCrossChainProcessingView, Label, Link, ListItem, ListItemContent, ListItemLeftSide, ListItemRightSide, LoadingDots, LowRiskBadge, MediumRiskBadge, Navbar, PercentageButton, PrimaryButton, ProcessingBadge, ProgressIndicator, ScrollableContent, SearchEmptyState, SearchInput, SecondaryButton, SectionCard, Select, SelectContent, SelectItem, SelectTrigger, Skeleton, StepDisplay, StepStatusIcon, StepStatusText, StrategyDetailsView, StrategyGridCard, SummaryDetails, SummaryDetailsCryptoControlV2, SwapAdvancedSettingsView, SwapAmountInputView, SwapCrossChainProcessingView, SwapFormView, SwapFormViewSimple, SwapFromCardView, SwapFromCardViewSimple, SwapHistoryView, SwapProcessingView, SwapProcessingViewSimple, SwapQuoteDetailsView, SwapSignatureWarningView, SwapSignatureWarningViewSimple, SwapSuccessView, SwapSuccessViewSimple, SwapToCardView, SwapToCardViewSimple, SwapTransactionFailedView, SwapTransactionFailedViewSimple, SwapWidgetFallbackView, Tabs, TabsContent, TabsList, TabsTrigger, TertiaryButton, Text_default as Text, TextAccent, TextBody, TextHeading, Title, TokenWithChainBadge, TransactionProcessingDetails, TransactionScreen, TransactionScreenIcon, TransactionScreenInvestmentCard, WalletBalances, WalletConnectPanel, WalletItem, ConnectWalletList as WalletList, WalletListContainer, isDustValue };
|
|
12065
|
+
export { ActionButton, ActionSheet, AddressDisplay, ApyRange, BackButton, BackgroundContainer, BannerNotification, Chip, ChipGroup, ChooseANetworkView, ChooseAStrategyActionsheetView, ChooseAnAssetSwapView, ChooseNetworkAndAssetViewSimple, CloseButton_default as CloseButton, CollapsibleInfoRow, CollapsibleSection, ConfirmSwapButtonView, ConfirmSwapButtonViewSimple, ConnectWalletList, Currency, DashboardBalancesBreakdown, DashboardCard, DashboardInvestmentOpportunitiesView, DashboardPortfolioView, DashboardPortfolioViewSimple, DashboardRecentTransactionsView, DashboardRecentTransactionsViewSimple, DashboardStrategiesListView, DashboardTokenListView, DashboardTokensView, DashboardTokensViewSimple, DashboardTransactionsPlaceholder, DashboardView, DashboardViewSimple, DeframeComponentsProvider, DetailsHeader, EarnAmountInputView, EarnBalanceCard, EarnBytecodeErrorView, EarnDepositFailedSimpleView, EarnDepositFailedView, EarnDepositFormView, EarnDepositFormViewSimple, EarnDepositProcessingSimpleView, EarnDepositProcessingView, EarnDepositSuccessSimpleView, EarnDepositSuccessView, EarnDepositWarningSimpleView, EarnDepositWarningView, EarnDesktopView, EarnExploreGridView, EarnInvestedSectionView, EarnInvestmentDetailsView, EarnInvestmentSummaryView, EarnNoBalanceNotificationView, EarnOverviewView, EarnPercentageButtonsView, EarnPositionCardView, EarnRecentTransactionsView, EarnTokenSelectorView, EarnTxStatusCardView, EarnWithdrawFailedSimpleView, EarnWithdrawFailedView, EarnWithdrawFormView, EarnWithdrawFormViewSimple, EarnWithdrawProcessingSimpleView, EarnWithdrawProcessingView, EarnWithdrawSuccessSimpleView, EarnWithdrawSuccessView, EarnWithdrawTokenSelectorView, EarnWithdrawWarningSimpleView, EarnWithdrawWarningView, Currency as Fiat, FlexCol, FlexRow, GroupedStrategyListView, HighRiskBadge, HistoryDepositDetailsView, HistoryListSkeleton, HistoryListView, HistorySwapDetailsView, HistoryTabEmpty, HistoryWithdrawDetailsView, InfoLabel, InfoRow, InfoRowIconLabel, InfoRowIconValue, InfoRowWithIcon, InfoValue, Input2 as Input, InvestmentCrossChainProcessingView, Label, Link, ListItem, ListItemContent, ListItemLeftSide, ListItemRightSide, LoadingDots, LowRiskBadge, MediumRiskBadge, Navbar, PercentageButton, PrimaryButton, ProcessingBadge, ProgressIndicator, ScrollableContent, SearchEmptyState, SearchInput, SecondaryButton, SectionCard, Select, SelectContent, SelectItem, SelectTrigger, Skeleton, StepDisplay, StepStatusIcon, StepStatusText, StrategyDetailsView, StrategyGridCard, SummaryDetails, SummaryDetailsCryptoControlV2, SwapAdvancedSettingsView, SwapAmountInputView, SwapCrossChainProcessingView, SwapFormView, SwapFormViewSimple, SwapFromCardView, SwapFromCardViewSimple, SwapHistoryView, SwapProcessingView, SwapProcessingViewSimple, SwapQuoteDetailsView, SwapSignatureWarningView, SwapSignatureWarningViewSimple, SwapSuccessView, SwapSuccessViewSimple, SwapToCardView, SwapToCardViewSimple, SwapTransactionFailedView, SwapTransactionFailedViewSimple, SwapWidgetFallbackView, Tabs, TabsContent, TabsList, TabsTrigger, TertiaryButton, Text_default as Text, TextAccent, TextBody, TextHeading, Title, TokenWithChainBadge, TransactionProcessingDetails, TransactionScreen, TransactionScreenIcon, TransactionScreenInvestmentCard, WalletBalances, WalletConnectPanel, WalletItem, ConnectWalletList as WalletList, WalletListContainer, isDustValue };
|
|
10523
12066
|
//# sourceMappingURL=index.mjs.map
|
|
10524
12067
|
//# sourceMappingURL=index.mjs.map
|