@deframe-sdk/components 0.1.12 → 0.1.14
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 +748 -7
- package/dist/index.d.ts +748 -7
- package/dist/index.js +2308 -17
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +2268 -19
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +357 -0
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -2,11 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
var tailwindMerge = require('tailwind-merge');
|
|
4
4
|
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
+
var hi2 = require('react-icons/hi2');
|
|
5
6
|
var React6 = require('react');
|
|
6
7
|
var framerMotion = require('framer-motion');
|
|
7
8
|
var md = require('react-icons/md');
|
|
8
|
-
var hi2 = require('react-icons/hi2');
|
|
9
9
|
var io5 = require('react-icons/io5');
|
|
10
|
+
var pi = require('react-icons/pi');
|
|
10
11
|
|
|
11
12
|
function _interopNamespace(e) {
|
|
12
13
|
if (e && e.__esModule) return e;
|
|
@@ -108,6 +109,20 @@ function ActionButton(_a) {
|
|
|
108
109
|
})
|
|
109
110
|
);
|
|
110
111
|
}
|
|
112
|
+
var CloseButton = ({ onClick, testId, ariaLabel = "Close", className }) => {
|
|
113
|
+
const baseClasses = "w-12 h-12 rounded-[var(--deframe-widget-size-radius-full)] flex items-center justify-center text-[color:var(--deframe-widget-color-text-secondary)] hover:text-[color:var(--deframe-widget-color-brand-primary)] transition-colors cursor-pointer";
|
|
114
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
115
|
+
"button",
|
|
116
|
+
{
|
|
117
|
+
"data-test-id": testId != null ? testId : "close-button",
|
|
118
|
+
onClick,
|
|
119
|
+
className: tailwindMerge.twMerge(baseClasses, className),
|
|
120
|
+
"aria-label": ariaLabel,
|
|
121
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(hi2.HiXMark, { className: "w-6 h-6" })
|
|
122
|
+
}
|
|
123
|
+
);
|
|
124
|
+
};
|
|
125
|
+
var CloseButton_default = CloseButton;
|
|
111
126
|
function PercentageButton(_a) {
|
|
112
127
|
var _b = _a, {
|
|
113
128
|
children,
|
|
@@ -2398,6 +2413,7 @@ var TwoLineValue = ({ primary, secondary }) => /* @__PURE__ */ jsxRuntime.jsxs(H
|
|
|
2398
2413
|
/* @__PURE__ */ jsxRuntime.jsx("p", { "data-test-id": "two-line-value-primary", className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-secondary)] [font-weight:var(--deframe-widget-font-weight-semibold)]", children: primary }),
|
|
2399
2414
|
/* @__PURE__ */ jsxRuntime.jsx("p", { "data-test-id": "two-line-value-secondary", className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-secondary)]", children: secondary })
|
|
2400
2415
|
] });
|
|
2416
|
+
var NotFoundMessage = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "not-found-message", className: "flex flex-col items-center justify-center h-full", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[color:var(--deframe-widget-color-text-primary)]", children }) });
|
|
2401
2417
|
var HistoryDepositDetailsView = ({
|
|
2402
2418
|
transactionTypeLabel,
|
|
2403
2419
|
symbol,
|
|
@@ -2795,19 +2811,6 @@ var SwapQuoteBlockchainCostsView = ({
|
|
|
2795
2811
|
}
|
|
2796
2812
|
) });
|
|
2797
2813
|
};
|
|
2798
|
-
var CloseButton = ({ onClick, testId, ariaLabel = "Close", className }) => {
|
|
2799
|
-
const baseClasses = "w-12 h-12 rounded-[var(--deframe-widget-size-radius-full)] flex items-center justify-center text-[color:var(--deframe-widget-color-text-secondary)] hover:text-[color:var(--deframe-widget-color-brand-primary)] transition-colors cursor-pointer";
|
|
2800
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2801
|
-
"button",
|
|
2802
|
-
{
|
|
2803
|
-
"data-test-id": testId != null ? testId : "close-button",
|
|
2804
|
-
onClick,
|
|
2805
|
-
className: tailwindMerge.twMerge(baseClasses, className),
|
|
2806
|
-
"aria-label": ariaLabel,
|
|
2807
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(hi2.HiXMark, { className: "w-6 h-6" })
|
|
2808
|
-
}
|
|
2809
|
-
);
|
|
2810
|
-
};
|
|
2811
2814
|
var ChooseAStrategyActionsheetView = ({
|
|
2812
2815
|
isOpen,
|
|
2813
2816
|
currentActionSheetId,
|
|
@@ -2840,7 +2843,7 @@ var ChooseAStrategyActionsheetView = ({
|
|
|
2840
2843
|
height: "full",
|
|
2841
2844
|
contentClassName: "w-full max-w-[620px] mx-auto",
|
|
2842
2845
|
children: /* @__PURE__ */ jsxRuntime.jsxs(BackgroundContainer, { className: "flex flex-col h-full", children: [
|
|
2843
|
-
/* @__PURE__ */ jsxRuntime.jsx(Navbar, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2846
|
+
/* @__PURE__ */ jsxRuntime.jsx(Navbar, { children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton_default, { onClick: onClose, ariaLabel: closeAriaLabel }) }),
|
|
2844
2847
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col flex-1 w-full px-[var(--deframe-widget-size-padding-x-lg)] py-[var(--deframe-widget-size-padding-y-lg)] overflow-hidden", children: [
|
|
2845
2848
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-shrink-0", children: [
|
|
2846
2849
|
/* @__PURE__ */ jsxRuntime.jsx(TextHeading, { children: resolvedYieldLabel }),
|
|
@@ -3070,7 +3073,7 @@ var TransactionScreen = ({
|
|
|
3070
3073
|
}) => {
|
|
3071
3074
|
return /* @__PURE__ */ jsxRuntime.jsx(BackgroundContainer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-full", children: [
|
|
3072
3075
|
onBack && /* @__PURE__ */ jsxRuntime.jsx(DetailsHeader, { title: backTitle, onBack }),
|
|
3073
|
-
onClose && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": testId, className: "flex justify-start px-[var(--deframe-widget-size-padding-x-md)] pt-md", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
3076
|
+
onClose && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": testId, className: "flex justify-start px-[var(--deframe-widget-size-padding-x-md)] pt-md", children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton_default, { onClick: onClose }) }),
|
|
3074
3077
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full px-[var(--deframe-widget-size-padding-x-md)] pt-[var(--deframe-widget-size-padding-y-sm)]", children: /* @__PURE__ */ jsxRuntime.jsx(ProgressIndicator, { progress }) }),
|
|
3075
3078
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-lg)] flex flex-col gap-[var(--deframe-widget-size-gap-lg)]", children: [
|
|
3076
3079
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-[var(--deframe-widget-size-gap-md)] pt-lg", children: [
|
|
@@ -3308,6 +3311,144 @@ var SwapProcessingView = ({
|
|
|
3308
3311
|
}
|
|
3309
3312
|
);
|
|
3310
3313
|
};
|
|
3314
|
+
function LoadingIcon() {
|
|
3315
|
+
const green = "var(--deframe-widget-color-brand-primary)";
|
|
3316
|
+
const trackColor = "color-mix(in srgb, var(--deframe-widget-color-brand-primary) 12%, transparent)";
|
|
3317
|
+
const sw = 2.8;
|
|
3318
|
+
const aw = 2.4;
|
|
3319
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3320
|
+
framerMotion.motion.svg,
|
|
3321
|
+
{
|
|
3322
|
+
"data-test-id": "swap-processing-simple-loading-icon",
|
|
3323
|
+
width: "56",
|
|
3324
|
+
height: "56",
|
|
3325
|
+
viewBox: "0 0 56 56",
|
|
3326
|
+
fill: "none",
|
|
3327
|
+
"aria-hidden": "true",
|
|
3328
|
+
animate: { rotate: 360 },
|
|
3329
|
+
transition: { duration: 1.6, repeat: Infinity, ease: "linear" },
|
|
3330
|
+
children: [
|
|
3331
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "28", cy: "28", r: "22", stroke: trackColor, strokeWidth: sw }),
|
|
3332
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3333
|
+
"path",
|
|
3334
|
+
{
|
|
3335
|
+
d: "M 6.75 22.31 A 22 22 0 0 1 49.25 22.31",
|
|
3336
|
+
stroke: green,
|
|
3337
|
+
strokeWidth: sw,
|
|
3338
|
+
strokeLinecap: "round"
|
|
3339
|
+
}
|
|
3340
|
+
),
|
|
3341
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3342
|
+
"path",
|
|
3343
|
+
{
|
|
3344
|
+
d: "M 45.0 18.1 L 49.25 22.31 L 51.0 16.5",
|
|
3345
|
+
stroke: green,
|
|
3346
|
+
strokeWidth: aw,
|
|
3347
|
+
strokeLinecap: "round",
|
|
3348
|
+
strokeLinejoin: "round"
|
|
3349
|
+
}
|
|
3350
|
+
),
|
|
3351
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3352
|
+
"path",
|
|
3353
|
+
{
|
|
3354
|
+
d: "M 49.25 33.69 A 22 22 0 0 1 6.75 33.69",
|
|
3355
|
+
stroke: green,
|
|
3356
|
+
strokeWidth: sw,
|
|
3357
|
+
strokeLinecap: "round"
|
|
3358
|
+
}
|
|
3359
|
+
),
|
|
3360
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3361
|
+
"path",
|
|
3362
|
+
{
|
|
3363
|
+
d: "M 11.0 37.9 L 6.75 33.69 L 5.0 39.5",
|
|
3364
|
+
stroke: green,
|
|
3365
|
+
strokeWidth: aw,
|
|
3366
|
+
strokeLinecap: "round",
|
|
3367
|
+
strokeLinejoin: "round"
|
|
3368
|
+
}
|
|
3369
|
+
)
|
|
3370
|
+
]
|
|
3371
|
+
}
|
|
3372
|
+
);
|
|
3373
|
+
}
|
|
3374
|
+
var SwapProcessingViewSimple = ({
|
|
3375
|
+
titleText,
|
|
3376
|
+
descriptionPrefix,
|
|
3377
|
+
activityHistoryText,
|
|
3378
|
+
onGoToHistory
|
|
3379
|
+
}) => {
|
|
3380
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3381
|
+
"div",
|
|
3382
|
+
{
|
|
3383
|
+
"data-test-id": "swap-processing-simple-screen",
|
|
3384
|
+
className: tailwindMerge.twMerge(
|
|
3385
|
+
"absolute inset-0 z-10",
|
|
3386
|
+
"flex flex-col items-center justify-center",
|
|
3387
|
+
"gap-[var(--deframe-widget-size-gap-lg)]",
|
|
3388
|
+
"px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-lg)]",
|
|
3389
|
+
"rounded-[inherit]",
|
|
3390
|
+
"backdrop-blur-[12px] [-webkit-backdrop-filter:blur(12px)]",
|
|
3391
|
+
"bg-[color-mix(in_srgb,var(--deframe-widget-color-bg-primary)_88%,transparent)]"
|
|
3392
|
+
),
|
|
3393
|
+
children: [
|
|
3394
|
+
/* @__PURE__ */ jsxRuntime.jsx(LoadingIcon, {}),
|
|
3395
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
3396
|
+
"div",
|
|
3397
|
+
{
|
|
3398
|
+
"data-test-id": "swap-processing-simple-copy",
|
|
3399
|
+
className: "flex flex-col items-center gap-[var(--deframe-widget-size-gap-sm)] text-center",
|
|
3400
|
+
children: [
|
|
3401
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3402
|
+
"span",
|
|
3403
|
+
{
|
|
3404
|
+
"data-test-id": "swap-processing-simple-title",
|
|
3405
|
+
className: tailwindMerge.twMerge(
|
|
3406
|
+
"[font-size:12px] [line-height:1.25] [letter-spacing:0.10em] uppercase",
|
|
3407
|
+
"[font-weight:var(--deframe-widget-font-weight-semibold)]",
|
|
3408
|
+
"font-[var(--deframe-widget-font-family)]",
|
|
3409
|
+
"text-[color:var(--deframe-widget-color-brand-primary)]"
|
|
3410
|
+
),
|
|
3411
|
+
children: titleText
|
|
3412
|
+
}
|
|
3413
|
+
),
|
|
3414
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
3415
|
+
"span",
|
|
3416
|
+
{
|
|
3417
|
+
"data-test-id": "swap-processing-simple-subtitle",
|
|
3418
|
+
className: tailwindMerge.twMerge(
|
|
3419
|
+
"[font-size:var(--deframe-widget-font-size-md)] [line-height:1.6]",
|
|
3420
|
+
"[font-weight:var(--deframe-widget-font-weight-regular)]",
|
|
3421
|
+
"font-[var(--deframe-widget-font-family)]",
|
|
3422
|
+
"text-[color:var(--deframe-widget-color-text-secondary)]",
|
|
3423
|
+
"max-w-[260px]"
|
|
3424
|
+
),
|
|
3425
|
+
children: [
|
|
3426
|
+
descriptionPrefix,
|
|
3427
|
+
" ",
|
|
3428
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3429
|
+
"button",
|
|
3430
|
+
{
|
|
3431
|
+
"data-test-id": "swap-processing-simple-history-link",
|
|
3432
|
+
onClick: onGoToHistory,
|
|
3433
|
+
"aria-label": activityHistoryText,
|
|
3434
|
+
className: tailwindMerge.twMerge(
|
|
3435
|
+
"bg-transparent border-0 p-0 cursor-pointer",
|
|
3436
|
+
"[font-weight:var(--deframe-widget-font-weight-semibold)]",
|
|
3437
|
+
"text-[color:var(--deframe-widget-color-brand-primary)]"
|
|
3438
|
+
),
|
|
3439
|
+
children: activityHistoryText
|
|
3440
|
+
}
|
|
3441
|
+
)
|
|
3442
|
+
]
|
|
3443
|
+
}
|
|
3444
|
+
)
|
|
3445
|
+
]
|
|
3446
|
+
}
|
|
3447
|
+
)
|
|
3448
|
+
]
|
|
3449
|
+
}
|
|
3450
|
+
);
|
|
3451
|
+
};
|
|
3311
3452
|
var SwapCrossChainProcessingView = ({
|
|
3312
3453
|
fromTokenSymbol,
|
|
3313
3454
|
fromTokenIcon,
|
|
@@ -3567,6 +3708,113 @@ var SwapSuccessView = ({
|
|
|
3567
3708
|
}
|
|
3568
3709
|
);
|
|
3569
3710
|
};
|
|
3711
|
+
function SuccessIcon() {
|
|
3712
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
3713
|
+
framerMotion.motion.div,
|
|
3714
|
+
{
|
|
3715
|
+
"data-test-id": "swap-success-simple-icon",
|
|
3716
|
+
initial: { scale: 0.55, opacity: 0 },
|
|
3717
|
+
animate: { scale: 1, opacity: 1 },
|
|
3718
|
+
transition: { type: "spring", stiffness: 300, damping: 20, delay: 0.05 },
|
|
3719
|
+
className: tailwindMerge.twMerge(
|
|
3720
|
+
"w-[84px] h-[84px] rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0",
|
|
3721
|
+
"flex items-center justify-center",
|
|
3722
|
+
"bg-[var(--deframe-widget-color-state-success)]",
|
|
3723
|
+
"shadow-[0_0_0_10px_color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_12%,transparent),0_0_32px_color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_22%,transparent)]"
|
|
3724
|
+
),
|
|
3725
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "44", height: "44", viewBox: "0 0 44 44", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
3726
|
+
framerMotion.motion.path,
|
|
3727
|
+
{
|
|
3728
|
+
d: "M10 22 L18 30 L34 14",
|
|
3729
|
+
stroke: "white",
|
|
3730
|
+
strokeWidth: "3.5",
|
|
3731
|
+
strokeLinecap: "round",
|
|
3732
|
+
strokeLinejoin: "round",
|
|
3733
|
+
initial: { pathLength: 0 },
|
|
3734
|
+
animate: { pathLength: 1 },
|
|
3735
|
+
transition: { duration: 0.45, delay: 0.2, ease: "easeOut" }
|
|
3736
|
+
}
|
|
3737
|
+
) })
|
|
3738
|
+
}
|
|
3739
|
+
);
|
|
3740
|
+
}
|
|
3741
|
+
var SwapSuccessViewSimple = ({
|
|
3742
|
+
onGoToWallet,
|
|
3743
|
+
labels
|
|
3744
|
+
}) => {
|
|
3745
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3746
|
+
"div",
|
|
3747
|
+
{
|
|
3748
|
+
"data-test-id": "swap-success-simple-screen",
|
|
3749
|
+
className: tailwindMerge.twMerge(
|
|
3750
|
+
"absolute inset-0 z-10",
|
|
3751
|
+
"flex flex-col items-center justify-center",
|
|
3752
|
+
"gap-[var(--deframe-widget-size-gap-lg)]",
|
|
3753
|
+
"px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-lg)]",
|
|
3754
|
+
"rounded-[inherit]",
|
|
3755
|
+
"backdrop-blur-[12px] [-webkit-backdrop-filter:blur(12px)]",
|
|
3756
|
+
"bg-[color-mix(in_srgb,var(--deframe-widget-color-bg-primary)_88%,transparent)]"
|
|
3757
|
+
),
|
|
3758
|
+
children: [
|
|
3759
|
+
/* @__PURE__ */ jsxRuntime.jsx(SuccessIcon, {}),
|
|
3760
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
3761
|
+
"div",
|
|
3762
|
+
{
|
|
3763
|
+
"data-test-id": "swap-success-simple-copy",
|
|
3764
|
+
className: "flex flex-col items-center gap-[var(--deframe-widget-size-gap-sm)] text-center",
|
|
3765
|
+
children: [
|
|
3766
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3767
|
+
"span",
|
|
3768
|
+
{
|
|
3769
|
+
"data-test-id": "swap-success-simple-title",
|
|
3770
|
+
className: tailwindMerge.twMerge(
|
|
3771
|
+
"[font-size:var(--deframe-widget-font-size-xl)]",
|
|
3772
|
+
"[line-height:var(--deframe-widget-font-leading-xl)]",
|
|
3773
|
+
"[font-weight:var(--deframe-widget-font-weight-bold)]",
|
|
3774
|
+
"font-[var(--deframe-widget-font-family)]",
|
|
3775
|
+
"text-[color:var(--deframe-widget-color-text-primary)]"
|
|
3776
|
+
),
|
|
3777
|
+
children: labels == null ? void 0 : labels.title
|
|
3778
|
+
}
|
|
3779
|
+
),
|
|
3780
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
3781
|
+
"span",
|
|
3782
|
+
{
|
|
3783
|
+
"data-test-id": "swap-success-simple-subtitle",
|
|
3784
|
+
className: tailwindMerge.twMerge(
|
|
3785
|
+
"[font-size:var(--deframe-widget-font-size-md)] [line-height:1.6]",
|
|
3786
|
+
"[font-weight:var(--deframe-widget-font-weight-regular)]",
|
|
3787
|
+
"font-[var(--deframe-widget-font-family)]",
|
|
3788
|
+
"text-[color:var(--deframe-widget-color-text-secondary)]",
|
|
3789
|
+
"max-w-[260px]"
|
|
3790
|
+
),
|
|
3791
|
+
children: [
|
|
3792
|
+
labels == null ? void 0 : labels.descriptionSuffix,
|
|
3793
|
+
" ",
|
|
3794
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3795
|
+
"button",
|
|
3796
|
+
{
|
|
3797
|
+
"data-test-id": "swap-success-simple-wallet-link",
|
|
3798
|
+
onClick: onGoToWallet,
|
|
3799
|
+
"aria-label": labels == null ? void 0 : labels.walletLinkText,
|
|
3800
|
+
className: tailwindMerge.twMerge(
|
|
3801
|
+
"bg-transparent border-0 p-0 cursor-pointer",
|
|
3802
|
+
"[font-weight:var(--deframe-widget-font-weight-semibold)]",
|
|
3803
|
+
"text-[color:var(--deframe-widget-color-brand-primary)]"
|
|
3804
|
+
),
|
|
3805
|
+
children: labels == null ? void 0 : labels.walletLinkText
|
|
3806
|
+
}
|
|
3807
|
+
)
|
|
3808
|
+
]
|
|
3809
|
+
}
|
|
3810
|
+
)
|
|
3811
|
+
]
|
|
3812
|
+
}
|
|
3813
|
+
)
|
|
3814
|
+
]
|
|
3815
|
+
}
|
|
3816
|
+
);
|
|
3817
|
+
};
|
|
3570
3818
|
var SwapTransactionFailedView = ({
|
|
3571
3819
|
fromTokenSymbol,
|
|
3572
3820
|
fromTokenIcon,
|
|
@@ -3643,6 +3891,114 @@ var SwapTransactionFailedView = ({
|
|
|
3643
3891
|
}
|
|
3644
3892
|
);
|
|
3645
3893
|
};
|
|
3894
|
+
function ErrorIcon() {
|
|
3895
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
3896
|
+
framerMotion.motion.div,
|
|
3897
|
+
{
|
|
3898
|
+
"data-test-id": "swap-failed-simple-icon",
|
|
3899
|
+
initial: { scale: 0.55, opacity: 0 },
|
|
3900
|
+
animate: { scale: 1, opacity: 1 },
|
|
3901
|
+
transition: { type: "spring", stiffness: 300, damping: 20, delay: 0.05 },
|
|
3902
|
+
className: tailwindMerge.twMerge(
|
|
3903
|
+
"w-[84px] h-[84px] rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0",
|
|
3904
|
+
"flex items-center justify-center",
|
|
3905
|
+
"bg-[var(--deframe-widget-color-state-error)]",
|
|
3906
|
+
"shadow-[0_0_0_10px_color-mix(in_srgb,var(--deframe-widget-color-state-error)_12%,transparent),0_0_32px_color-mix(in_srgb,var(--deframe-widget-color-state-error)_22%,transparent)]"
|
|
3907
|
+
),
|
|
3908
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "44", height: "44", viewBox: "0 0 44 44", fill: "none", "aria-hidden": "true", children: [
|
|
3909
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3910
|
+
framerMotion.motion.line,
|
|
3911
|
+
{
|
|
3912
|
+
x1: "14",
|
|
3913
|
+
y1: "14",
|
|
3914
|
+
x2: "30",
|
|
3915
|
+
y2: "30",
|
|
3916
|
+
stroke: "white",
|
|
3917
|
+
strokeWidth: "3.5",
|
|
3918
|
+
strokeLinecap: "round",
|
|
3919
|
+
initial: { pathLength: 0 },
|
|
3920
|
+
animate: { pathLength: 1 },
|
|
3921
|
+
transition: { duration: 0.25, delay: 0.2, ease: "easeOut" }
|
|
3922
|
+
}
|
|
3923
|
+
),
|
|
3924
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3925
|
+
framerMotion.motion.line,
|
|
3926
|
+
{
|
|
3927
|
+
x1: "30",
|
|
3928
|
+
y1: "14",
|
|
3929
|
+
x2: "14",
|
|
3930
|
+
y2: "30",
|
|
3931
|
+
stroke: "white",
|
|
3932
|
+
strokeWidth: "3.5",
|
|
3933
|
+
strokeLinecap: "round",
|
|
3934
|
+
initial: { pathLength: 0 },
|
|
3935
|
+
animate: { pathLength: 1 },
|
|
3936
|
+
transition: { duration: 0.25, delay: 0.38, ease: "easeOut" }
|
|
3937
|
+
}
|
|
3938
|
+
)
|
|
3939
|
+
] })
|
|
3940
|
+
}
|
|
3941
|
+
);
|
|
3942
|
+
}
|
|
3943
|
+
var SwapTransactionFailedViewSimple = ({
|
|
3944
|
+
errorTitle,
|
|
3945
|
+
errorDescription
|
|
3946
|
+
}) => {
|
|
3947
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3948
|
+
"div",
|
|
3949
|
+
{
|
|
3950
|
+
"data-test-id": "swap-failed-simple-screen",
|
|
3951
|
+
className: tailwindMerge.twMerge(
|
|
3952
|
+
"absolute inset-0 z-10",
|
|
3953
|
+
"flex flex-col items-center justify-center",
|
|
3954
|
+
"gap-[var(--deframe-widget-size-gap-lg)]",
|
|
3955
|
+
"px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-lg)]",
|
|
3956
|
+
"rounded-[inherit]",
|
|
3957
|
+
"backdrop-blur-[12px] [-webkit-backdrop-filter:blur(12px)]",
|
|
3958
|
+
"bg-[color-mix(in_srgb,var(--deframe-widget-color-bg-primary)_88%,transparent)]"
|
|
3959
|
+
),
|
|
3960
|
+
children: [
|
|
3961
|
+
/* @__PURE__ */ jsxRuntime.jsx(ErrorIcon, {}),
|
|
3962
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
3963
|
+
"div",
|
|
3964
|
+
{
|
|
3965
|
+
"data-test-id": "swap-failed-simple-copy",
|
|
3966
|
+
className: "flex flex-col items-center gap-[var(--deframe-widget-size-gap-sm)] text-center",
|
|
3967
|
+
children: [
|
|
3968
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3969
|
+
"span",
|
|
3970
|
+
{
|
|
3971
|
+
"data-test-id": "swap-failed-simple-title",
|
|
3972
|
+
className: tailwindMerge.twMerge(
|
|
3973
|
+
"[font-size:22px] [line-height:1.25]",
|
|
3974
|
+
"[font-weight:var(--deframe-widget-font-weight-bold)]",
|
|
3975
|
+
"font-[var(--deframe-widget-font-family)]",
|
|
3976
|
+
"text-[color:var(--deframe-widget-color-text-primary)]"
|
|
3977
|
+
),
|
|
3978
|
+
children: errorTitle
|
|
3979
|
+
}
|
|
3980
|
+
),
|
|
3981
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3982
|
+
"span",
|
|
3983
|
+
{
|
|
3984
|
+
"data-test-id": "swap-failed-simple-subtitle",
|
|
3985
|
+
className: tailwindMerge.twMerge(
|
|
3986
|
+
"[font-size:var(--deframe-widget-font-size-md)] [line-height:1.6]",
|
|
3987
|
+
"[font-weight:var(--deframe-widget-font-weight-regular)]",
|
|
3988
|
+
"font-[var(--deframe-widget-font-family)]",
|
|
3989
|
+
"text-[color:var(--deframe-widget-color-text-secondary)]",
|
|
3990
|
+
"max-w-[260px]"
|
|
3991
|
+
),
|
|
3992
|
+
children: errorDescription
|
|
3993
|
+
}
|
|
3994
|
+
)
|
|
3995
|
+
]
|
|
3996
|
+
}
|
|
3997
|
+
)
|
|
3998
|
+
]
|
|
3999
|
+
}
|
|
4000
|
+
);
|
|
4001
|
+
};
|
|
3646
4002
|
var ChooseAnAssetSwapView = ({
|
|
3647
4003
|
actionSheetId,
|
|
3648
4004
|
isOpen,
|
|
@@ -3676,7 +4032,7 @@ var ChooseAnAssetSwapView = ({
|
|
|
3676
4032
|
height: "full",
|
|
3677
4033
|
contentClassName: "w-full max-w-[620px] mx-auto",
|
|
3678
4034
|
children: /* @__PURE__ */ jsxRuntime.jsxs(BackgroundContainer, { className: "flex flex-col h-full", children: [
|
|
3679
|
-
/* @__PURE__ */ jsxRuntime.jsx(Navbar, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
4035
|
+
/* @__PURE__ */ jsxRuntime.jsx(Navbar, { children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton_default, { testId: `swap-token-actionsheet-close-${actionSheetId}`, onClick: onClose }) }),
|
|
3680
4036
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col flex-1 w-full px-[var(--deframe-widget-size-padding-x-lg)] py-[var(--deframe-widget-size-padding-y-lg)] overflow-hidden", children: [
|
|
3681
4037
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-shrink-0", children: [
|
|
3682
4038
|
/* @__PURE__ */ jsxRuntime.jsx(TextHeading, { children: labels.title }),
|
|
@@ -4112,14 +4468,1911 @@ var ConfirmSwapButtonView = ({
|
|
|
4112
4468
|
}
|
|
4113
4469
|
) });
|
|
4114
4470
|
};
|
|
4471
|
+
var ChooseANetworkView = ({
|
|
4472
|
+
labels,
|
|
4473
|
+
autoFocus = true,
|
|
4474
|
+
chains,
|
|
4475
|
+
pageSize = 10,
|
|
4476
|
+
onChainClick
|
|
4477
|
+
}) => {
|
|
4478
|
+
const [searchValue, setSearchValue] = React6.useState("");
|
|
4479
|
+
const [page, setPage] = React6.useState(1);
|
|
4480
|
+
React6.useEffect(() => {
|
|
4481
|
+
setPage(1);
|
|
4482
|
+
}, [searchValue]);
|
|
4483
|
+
const filteredChains = chains.filter(
|
|
4484
|
+
(chain) => chain.name.toLowerCase().includes(searchValue.toLowerCase())
|
|
4485
|
+
);
|
|
4486
|
+
const displayedChains = filteredChains.slice(0, page * pageSize);
|
|
4487
|
+
const hasMore = filteredChains.length > page * pageSize;
|
|
4488
|
+
return /* @__PURE__ */ jsxRuntime.jsx(BackgroundContainer, { className: "flex flex-col h-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col flex-1 w-full p-[var(--deframe-widget-size-padding-x-lg)] overflow-hidden", children: [
|
|
4489
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-shrink-0", children: [
|
|
4490
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextHeading, { children: labels.title }),
|
|
4491
|
+
/* @__PURE__ */ jsxRuntime.jsx("br", {}),
|
|
4492
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4493
|
+
SearchInput,
|
|
4494
|
+
{
|
|
4495
|
+
value: searchValue,
|
|
4496
|
+
onChange: setSearchValue,
|
|
4497
|
+
placeholder: labels.searchPlaceholder,
|
|
4498
|
+
autoFocus
|
|
4499
|
+
}
|
|
4500
|
+
)
|
|
4501
|
+
] }),
|
|
4502
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
4503
|
+
"div",
|
|
4504
|
+
{
|
|
4505
|
+
"data-testid": "choose-a-network-list",
|
|
4506
|
+
className: "flex flex-col gap-[var(--deframe-widget-size-gap-xs)] w-full mt-[var(--deframe-widget-size-gap-md)] overflow-y-auto flex-1 min-h-0",
|
|
4507
|
+
children: [
|
|
4508
|
+
displayedChains.map((chain) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
4509
|
+
ListItem,
|
|
4510
|
+
{
|
|
4511
|
+
className: "w-full flex-shrink-0",
|
|
4512
|
+
onClick: () => onChainClick(chain.chainId),
|
|
4513
|
+
"data-testid": `choose-network-item-${chain.chainId}`,
|
|
4514
|
+
"data-chain-id": chain.chainId,
|
|
4515
|
+
children: [
|
|
4516
|
+
/* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
4517
|
+
"img",
|
|
4518
|
+
{
|
|
4519
|
+
src: chain.imageUrl,
|
|
4520
|
+
alt: chain.name,
|
|
4521
|
+
className: "w-10 h-10 rounded-[var(--deframe-widget-size-radius-full)]"
|
|
4522
|
+
}
|
|
4523
|
+
) }),
|
|
4524
|
+
/* @__PURE__ */ jsxRuntime.jsx(ListItemContent, { children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { children: chain.name }) })
|
|
4525
|
+
]
|
|
4526
|
+
},
|
|
4527
|
+
`chain-${chain.chainId}`
|
|
4528
|
+
)),
|
|
4529
|
+
hasMore && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center items-center w-full py-[var(--deframe-widget-size-padding-y-md)] flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(TertiaryButton, { onClick: () => setPage(page + 1), children: labels.loadMoreLabel }) })
|
|
4530
|
+
]
|
|
4531
|
+
}
|
|
4532
|
+
)
|
|
4533
|
+
] }) });
|
|
4534
|
+
};
|
|
4535
|
+
var SkeletonItem = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full bg-[var(--deframe-widget-color-bg-secondary)] rounded-[var(--deframe-widget-size-radius-xs)] min-h-[72px] flex items-center justify-between px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-sm)]", children: [
|
|
4536
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)] flex-1 min-w-0", children: [
|
|
4537
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-xl bg-[var(--deframe-widget-color-bg-tertiary)] animate-pulse flex-shrink-0" }),
|
|
4538
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-xs)] flex-1 min-w-0", children: [
|
|
4539
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-32 h-4 bg-[var(--deframe-widget-color-bg-tertiary)] rounded animate-pulse" }),
|
|
4540
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-24 h-3 bg-[var(--deframe-widget-color-bg-tertiary)] rounded animate-pulse" })
|
|
4541
|
+
] })
|
|
4542
|
+
] }),
|
|
4543
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end gap-[var(--deframe-widget-size-gap-xs)] flex-shrink-0 ml-[var(--deframe-widget-size-gap-sm)]", children: [
|
|
4544
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-20 h-4 bg-[var(--deframe-widget-color-bg-tertiary)] rounded animate-pulse" }),
|
|
4545
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-16 h-3 bg-[var(--deframe-widget-color-bg-tertiary)] rounded animate-pulse" })
|
|
4546
|
+
] })
|
|
4547
|
+
] });
|
|
4548
|
+
var SkeletonGroup = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "self-stretch flex flex-col gap-[var(--deframe-widget-size-gap-xs)]", children: [
|
|
4549
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-40 h-4 bg-[var(--deframe-widget-color-bg-tertiary)] rounded animate-pulse" }),
|
|
4550
|
+
/* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, {}),
|
|
4551
|
+
/* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, {})
|
|
4552
|
+
] });
|
|
4553
|
+
var LoadingSkeleton = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "self-stretch flex flex-col gap-[var(--deframe-widget-size-gap-md)]", children: [
|
|
4554
|
+
/* @__PURE__ */ jsxRuntime.jsx(SkeletonGroup, {}),
|
|
4555
|
+
/* @__PURE__ */ jsxRuntime.jsx(SkeletonGroup, {})
|
|
4556
|
+
] });
|
|
4557
|
+
var EmptyState = ({ title, description }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full flex-1 py-[var(--deframe-widget-size-padding-y-md)] flex flex-col justify-center items-center gap-[var(--deframe-widget-size-gap-sm)] overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex flex-col justify-center items-center gap-[var(--deframe-widget-size-gap-md)]", children: [
|
|
4558
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-center items-center gap-[var(--deframe-widget-size-gap-md)] text-center", children: [
|
|
4559
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-20 h-20 bg-[var(--deframe-widget-color-bg-tertiary)] rounded-[var(--deframe-widget-size-radius-full)] flex justify-center items-center", children: /* @__PURE__ */ jsxRuntime.jsx(pi.PiClockCountdownBold, { className: "w-10 h-10 text-[var(--deframe-widget-color-text-tertiary)]" }) }),
|
|
4560
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h3", children: title })
|
|
4561
|
+
] }),
|
|
4562
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "self-stretch text-center", children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: description }) })
|
|
4563
|
+
] }) });
|
|
4564
|
+
var SwapItemIcon = ({ src, alt }) => {
|
|
4565
|
+
const fallbackText = encodeURIComponent((alt || "TOK").slice(0, 3).toUpperCase());
|
|
4566
|
+
const fallbackSrc = `https://placehold.co/40x40?text=${fallbackText}`;
|
|
4567
|
+
const resolvedSrc = src || fallbackSrc;
|
|
4568
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-shrink-0", children: [
|
|
4569
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-xl bg-[var(--deframe-widget-color-bg-tertiary)] flex items-center justify-center overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
4570
|
+
"img",
|
|
4571
|
+
{
|
|
4572
|
+
src: resolvedSrc,
|
|
4573
|
+
alt,
|
|
4574
|
+
className: "w-full h-full object-cover",
|
|
4575
|
+
onError: (e) => {
|
|
4576
|
+
e.target.src = fallbackSrc;
|
|
4577
|
+
}
|
|
4578
|
+
}
|
|
4579
|
+
) }),
|
|
4580
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-[-2px] right-[-2px] w-[15px] h-[15px] rounded-[var(--deframe-widget-size-radius-full)] bg-[var(--deframe-widget-color-bg-secondary)] flex items-center justify-center border border-[var(--deframe-widget-color-bg-secondary)]", children: /* @__PURE__ */ jsxRuntime.jsx(md.MdArrowUpward, { className: "w-3 h-3 text-[var(--deframe-widget-color-text-primary)]" }) })
|
|
4581
|
+
] });
|
|
4582
|
+
};
|
|
4583
|
+
var SwapHistoryView = ({
|
|
4584
|
+
labels,
|
|
4585
|
+
isLoading,
|
|
4586
|
+
items,
|
|
4587
|
+
onItemClick,
|
|
4588
|
+
pageSize = 10
|
|
4589
|
+
}) => {
|
|
4590
|
+
const [visibleCount, setVisibleCount] = React6__namespace.default.useState(pageSize);
|
|
4591
|
+
if (isLoading) {
|
|
4592
|
+
return /* @__PURE__ */ jsxRuntime.jsx(BackgroundContainer, { className: "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)] flex flex-col min-h-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(LoadingSkeleton, {}) });
|
|
4593
|
+
}
|
|
4594
|
+
if (items.length === 0) {
|
|
4595
|
+
return /* @__PURE__ */ jsxRuntime.jsx(BackgroundContainer, { className: "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)] flex flex-col min-h-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(EmptyState, { title: labels.emptyTitle, description: labels.emptyDescription }) });
|
|
4596
|
+
}
|
|
4597
|
+
const visibleItems = items.slice(0, visibleCount);
|
|
4598
|
+
const grouped = /* @__PURE__ */ new Map();
|
|
4599
|
+
for (const item of visibleItems) {
|
|
4600
|
+
const group = grouped.get(item.dateKey);
|
|
4601
|
+
if (group) {
|
|
4602
|
+
group.push(item);
|
|
4603
|
+
} else {
|
|
4604
|
+
grouped.set(item.dateKey, [item]);
|
|
4605
|
+
}
|
|
4606
|
+
}
|
|
4607
|
+
const sortedDates = Array.from(grouped.keys()).sort((a, b) => b.localeCompare(a));
|
|
4608
|
+
const hasMore = items.length > visibleCount;
|
|
4609
|
+
return /* @__PURE__ */ jsxRuntime.jsx(BackgroundContainer, { className: "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)] flex flex-col min-h-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "self-stretch flex flex-col gap-[16px]", children: [
|
|
4610
|
+
sortedDates.map((dateKey) => {
|
|
4611
|
+
const groupItems = grouped.get(dateKey);
|
|
4612
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "self-stretch flex flex-col gap-[var(--deframe-widget-size-gap-sm)]", children: [
|
|
4613
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-secondary)]", children: groupItems[0].dateLabel }),
|
|
4614
|
+
groupItems.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
4615
|
+
ListItem,
|
|
4616
|
+
{
|
|
4617
|
+
onClick: () => onItemClick(item.id),
|
|
4618
|
+
containerClassName: "!rounded-[var(--deframe-widget-size-radius-xs)] !border-0 !min-h-[72px]",
|
|
4619
|
+
children: [
|
|
4620
|
+
/* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsxRuntime.jsx(SwapItemIcon, { src: item.iconUrl, alt: item.iconAlt }) }),
|
|
4621
|
+
/* @__PURE__ */ jsxRuntime.jsxs(ListItemContent, { children: [
|
|
4622
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "[font-size:var(--deframe-widget-font-size-md)] [line-height:var(--deframe-widget-font-leading-md)] [font-weight:var(--deframe-widget-font-weight-medium)] text-[color:var(--deframe-widget-color-text-primary)]", children: item.title }),
|
|
4623
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-tertiary)]", children: item.subtitle })
|
|
4624
|
+
] }),
|
|
4625
|
+
/* @__PURE__ */ jsxRuntime.jsxs(ListItemRightSide, { children: [
|
|
4626
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] [font-weight:var(--deframe-widget-font-weight-medium)] text-[color:var(--deframe-widget-color-text-primary)] whitespace-nowrap", children: item.amountFormatted }),
|
|
4627
|
+
item.amountUsd && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-secondary)] whitespace-nowrap", children: item.amountUsd })
|
|
4628
|
+
] })
|
|
4629
|
+
]
|
|
4630
|
+
},
|
|
4631
|
+
item.id
|
|
4632
|
+
))
|
|
4633
|
+
] }, dateKey);
|
|
4634
|
+
}),
|
|
4635
|
+
hasMore && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center pt-[var(--deframe-widget-size-padding-y-sm)]", children: /* @__PURE__ */ jsxRuntime.jsx(TertiaryButton, { onClick: () => setVisibleCount((c) => c + pageSize), children: labels.loadMoreLabel }) })
|
|
4636
|
+
] }) });
|
|
4637
|
+
};
|
|
4638
|
+
var HistorySwapDetailsView = (props) => {
|
|
4639
|
+
const { labels, onBack, status } = props;
|
|
4640
|
+
if (status === "not-found") {
|
|
4641
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(BackgroundContainer, { children: [
|
|
4642
|
+
/* @__PURE__ */ jsxRuntime.jsx(DetailsHeader, { title: labels.headerTitle, onBack }),
|
|
4643
|
+
/* @__PURE__ */ jsxRuntime.jsx(NotFoundMessage, { children: labels.notFoundMessage })
|
|
4644
|
+
] });
|
|
4645
|
+
}
|
|
4646
|
+
if (status === "unavailable") {
|
|
4647
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(BackgroundContainer, { children: [
|
|
4648
|
+
/* @__PURE__ */ jsxRuntime.jsx(DetailsHeader, { title: labels.headerTitle, onBack }),
|
|
4649
|
+
/* @__PURE__ */ jsxRuntime.jsx(NotFoundMessage, { children: labels.detailsUnavailableMessage })
|
|
4650
|
+
] });
|
|
4651
|
+
}
|
|
4652
|
+
const {
|
|
4653
|
+
symbolIn,
|
|
4654
|
+
amountInFormatted,
|
|
4655
|
+
amountInUsd,
|
|
4656
|
+
tokenInLogoUrl,
|
|
4657
|
+
chainInName,
|
|
4658
|
+
symbolOut,
|
|
4659
|
+
amountOutFormatted,
|
|
4660
|
+
amountOutUsd,
|
|
4661
|
+
tokenOutLogoUrl,
|
|
4662
|
+
chainOutName,
|
|
4663
|
+
routeOrNetworkLabel,
|
|
4664
|
+
routeOrNetworkValue,
|
|
4665
|
+
statusLabel,
|
|
4666
|
+
txHash,
|
|
4667
|
+
dateFormatted,
|
|
4668
|
+
explorerUrl
|
|
4669
|
+
} = props;
|
|
4670
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(BackgroundContainer, { children: [
|
|
4671
|
+
/* @__PURE__ */ jsxRuntime.jsx(DetailsHeader, { title: labels.headerTitle, onBack }),
|
|
4672
|
+
/* @__PURE__ */ jsxRuntime.jsx(ScrollableContent, { children: /* @__PURE__ */ jsxRuntime.jsxs(FlexCol, { gap: "lg", children: [
|
|
4673
|
+
/* @__PURE__ */ jsxRuntime.jsx(SectionCard, { className: "!p-[24px]", children: /* @__PURE__ */ jsxRuntime.jsxs(FlexCol, { gap: "xs", children: [
|
|
4674
|
+
/* @__PURE__ */ jsxRuntime.jsx(TransactionTypeLabel, { children: labels.swapLabel }),
|
|
4675
|
+
/* @__PURE__ */ jsxRuntime.jsxs(FlexCol, { gap: "sm", children: [
|
|
4676
|
+
/* @__PURE__ */ jsxRuntime.jsxs(FlexRow, { gap: "sm", children: [
|
|
4677
|
+
/* @__PURE__ */ jsxRuntime.jsx(TokenIcon, { src: tokenInLogoUrl, alt: symbolIn }),
|
|
4678
|
+
/* @__PURE__ */ jsxRuntime.jsxs(FlexCol, { children: [
|
|
4679
|
+
/* @__PURE__ */ jsxRuntime.jsx(Amount, { children: amountInFormatted }),
|
|
4680
|
+
amountInUsd ? /* @__PURE__ */ jsxRuntime.jsx(AmountInUsd, { children: amountInUsd }) : chainInName ? /* @__PURE__ */ jsxRuntime.jsx(AmountInUsd, { children: chainInName }) : null
|
|
4681
|
+
] })
|
|
4682
|
+
] }),
|
|
4683
|
+
/* @__PURE__ */ jsxRuntime.jsxs(FlexRow, { gap: "sm", children: [
|
|
4684
|
+
/* @__PURE__ */ jsxRuntime.jsx(TokenIcon, { src: tokenOutLogoUrl, alt: symbolOut }),
|
|
4685
|
+
/* @__PURE__ */ jsxRuntime.jsxs(FlexCol, { children: [
|
|
4686
|
+
/* @__PURE__ */ jsxRuntime.jsx(Amount, { children: amountOutFormatted }),
|
|
4687
|
+
amountOutUsd ? /* @__PURE__ */ jsxRuntime.jsx(AmountInUsd, { children: amountOutUsd }) : chainOutName ? /* @__PURE__ */ jsxRuntime.jsx(AmountInUsd, { children: chainOutName }) : null
|
|
4688
|
+
] })
|
|
4689
|
+
] })
|
|
4690
|
+
] })
|
|
4691
|
+
] }) }),
|
|
4692
|
+
/* @__PURE__ */ jsxRuntime.jsx(SectionCard, { className: "!p-[var(--deframe-widget-size-padding-x-md)]", children: /* @__PURE__ */ jsxRuntime.jsxs(FlexCol, { gap: "sm", children: [
|
|
4693
|
+
/* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { borderBottom: true, children: [
|
|
4694
|
+
/* @__PURE__ */ jsxRuntime.jsx(InfoLabel, { className: "font-[var(--deframe-widget-font-family)]", children: routeOrNetworkLabel }),
|
|
4695
|
+
/* @__PURE__ */ jsxRuntime.jsx(InfoValue, { className: "font-[var(--deframe-widget-font-family)]", children: routeOrNetworkValue })
|
|
4696
|
+
] }),
|
|
4697
|
+
/* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { borderBottom: true, children: [
|
|
4698
|
+
/* @__PURE__ */ jsxRuntime.jsx(InfoLabel, { className: "font-[var(--deframe-widget-font-family)]", children: labels.sentLabel }),
|
|
4699
|
+
/* @__PURE__ */ jsxRuntime.jsx(TwoLineValue, { primary: amountInFormatted, secondary: amountInUsd != null ? amountInUsd : "-" })
|
|
4700
|
+
] }),
|
|
4701
|
+
/* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { borderBottom: true, children: [
|
|
4702
|
+
/* @__PURE__ */ jsxRuntime.jsx(InfoLabel, { className: "font-[var(--deframe-widget-font-family)]", children: labels.receivedLabel }),
|
|
4703
|
+
/* @__PURE__ */ jsxRuntime.jsx(TwoLineValue, { primary: amountOutFormatted, secondary: amountOutUsd != null ? amountOutUsd : "-" })
|
|
4704
|
+
] }),
|
|
4705
|
+
/* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { borderBottom: true, children: [
|
|
4706
|
+
/* @__PURE__ */ jsxRuntime.jsx(InfoLabel, { className: "font-[var(--deframe-widget-font-family)]", children: labels.statusLabel }),
|
|
4707
|
+
/* @__PURE__ */ jsxRuntime.jsx(SuccessBadge, { children: statusLabel })
|
|
4708
|
+
] }),
|
|
4709
|
+
/* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { borderBottom: true, children: [
|
|
4710
|
+
/* @__PURE__ */ jsxRuntime.jsx(InfoLabel, { className: "font-[var(--deframe-widget-font-family)]", children: labels.txIdLabel }),
|
|
4711
|
+
/* @__PURE__ */ jsxRuntime.jsx(TransactionId, { hash: txHash })
|
|
4712
|
+
] }),
|
|
4713
|
+
/* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { borderBottom: true, children: [
|
|
4714
|
+
/* @__PURE__ */ jsxRuntime.jsx(InfoLabel, { className: "font-[var(--deframe-widget-font-family)]", children: labels.dateLabel }),
|
|
4715
|
+
/* @__PURE__ */ jsxRuntime.jsx(InfoValue, { className: "font-[var(--deframe-widget-font-family)]", children: dateFormatted })
|
|
4716
|
+
] }),
|
|
4717
|
+
explorerUrl && /* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { children: [
|
|
4718
|
+
/* @__PURE__ */ jsxRuntime.jsx(InfoLabel, { className: "font-[var(--deframe-widget-font-family)]", children: labels.transactionLabel }),
|
|
4719
|
+
/* @__PURE__ */ jsxRuntime.jsx(ExplorerLink, { href: explorerUrl, children: labels.viewOnExplorerLabel })
|
|
4720
|
+
] })
|
|
4721
|
+
] }) })
|
|
4722
|
+
] }) })
|
|
4723
|
+
] });
|
|
4724
|
+
};
|
|
4725
|
+
var SwapWidgetFallbackView = ({
|
|
4726
|
+
title,
|
|
4727
|
+
description,
|
|
4728
|
+
buttonLabel,
|
|
4729
|
+
onButtonClick
|
|
4730
|
+
}) => {
|
|
4731
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
4732
|
+
"div",
|
|
4733
|
+
{
|
|
4734
|
+
"data-testid": "swap-widget-fallback",
|
|
4735
|
+
className: "flex flex-col items-center justify-center h-full px-[var(--deframe-widget-size-padding-x-md)] text-center gap-[var(--deframe-widget-size-gap-md)]",
|
|
4736
|
+
children: [
|
|
4737
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h-large", children: title }),
|
|
4738
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: description }),
|
|
4739
|
+
/* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { className: "w-full", onClick: onButtonClick, children: buttonLabel })
|
|
4740
|
+
]
|
|
4741
|
+
}
|
|
4742
|
+
);
|
|
4743
|
+
};
|
|
4744
|
+
var ApyRange = ({ children }) => {
|
|
4745
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right justify-center text-text-highlight text-xs font-normal leading-4", children });
|
|
4746
|
+
};
|
|
4747
|
+
var variantStyles = {
|
|
4748
|
+
primary: "text-text-primary dark:text-text-primary-dark text-text-md",
|
|
4749
|
+
secondary: "text-text-secondary dark:text-text-secondary-dark text-text-sm font-poppins"
|
|
4750
|
+
};
|
|
4751
|
+
var Label = ({ children, variant = "primary", className }) => {
|
|
4752
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: tailwindMerge.twMerge(variantStyles[variant], className), children });
|
|
4753
|
+
};
|
|
4754
|
+
var HistoryItemSkeleton = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full bg-bg-subtle dark:bg-bg-subtle-dark rounded-xs min-h-[72px] flex items-center justify-between px-md py-sm", children: [
|
|
4755
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-sm flex-1 min-w-0", children: [
|
|
4756
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-xl bg-bg-muted dark:bg-bg-muted-dark animate-pulse flex-shrink-0" }),
|
|
4757
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-xs flex-1 min-w-0", children: [
|
|
4758
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-32 h-4 bg-bg-muted dark:bg-bg-muted-dark rounded animate-pulse" }),
|
|
4759
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-24 h-3 bg-bg-muted dark:bg-bg-muted-dark rounded animate-pulse" })
|
|
4760
|
+
] })
|
|
4761
|
+
] }),
|
|
4762
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end gap-xs flex-shrink-0 ml-sm", children: [
|
|
4763
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-20 h-4 bg-bg-muted dark:bg-bg-muted-dark rounded animate-pulse" }),
|
|
4764
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-16 h-3 bg-bg-muted dark:bg-bg-muted-dark rounded animate-pulse" })
|
|
4765
|
+
] })
|
|
4766
|
+
] });
|
|
4767
|
+
var HistoryGroupSkeleton = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "self-stretch flex flex-col gap-xs", children: [
|
|
4768
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-40 h-4 bg-bg-muted dark:bg-bg-muted-dark rounded animate-pulse" }),
|
|
4769
|
+
/* @__PURE__ */ jsxRuntime.jsx(HistoryItemSkeleton, {}),
|
|
4770
|
+
/* @__PURE__ */ jsxRuntime.jsx(HistoryItemSkeleton, {})
|
|
4771
|
+
] });
|
|
4772
|
+
var HistoryListSkeleton = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "self-stretch flex flex-col gap-md", children: [
|
|
4773
|
+
/* @__PURE__ */ jsxRuntime.jsx(HistoryGroupSkeleton, {}),
|
|
4774
|
+
/* @__PURE__ */ jsxRuntime.jsx(HistoryGroupSkeleton, {})
|
|
4775
|
+
] });
|
|
4776
|
+
var WalletBalances = ({ cards, variant = "subtle", className }) => {
|
|
4777
|
+
const bgClass = variant === "raised" ? "bg-bg-raised dark:bg-bg-raised-dark" : "bg-bg-subtle dark:bg-bg-subtle-dark";
|
|
4778
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("w-full flex flex-row gap-4 mt-md", className), children: cards.map((card) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("flex-1 h-auto px-6 py-4 rounded shadow-sm flex flex-col items-start justify-start gap-xs", bgClass), children: [
|
|
4779
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: card.label }),
|
|
4780
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h3", children: card.value })
|
|
4781
|
+
] }, card.label)) });
|
|
4782
|
+
};
|
|
4783
|
+
var HistoryTabEmpty = ({ title, description }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-[90vh] py-md bg-bg-default dark:bg-bg-default-dark rounded-lg flex flex-col justify-center items-center gap-sm overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex flex-col justify-center items-center gap-md", children: [
|
|
4784
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-center items-center gap-md text-center", children: [
|
|
4785
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-20 h-20 bg-bg-muted dark:bg-bg-muted-dark rounded-full flex justify-center items-center", children: /* @__PURE__ */ jsxRuntime.jsx(pi.PiClockCountdownBold, { className: "w-10 h-10 text-text-tertiary dark:text-text-tertiary-dark" }) }),
|
|
4786
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h3", children: title })
|
|
4787
|
+
] }),
|
|
4788
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "self-stretch text-center", children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: description }) })
|
|
4789
|
+
] }) });
|
|
4790
|
+
var StrategyGridCard = ({
|
|
4791
|
+
logoUrl,
|
|
4792
|
+
title,
|
|
4793
|
+
subtitle,
|
|
4794
|
+
apyFormatted,
|
|
4795
|
+
apyLabel,
|
|
4796
|
+
onClick,
|
|
4797
|
+
className
|
|
4798
|
+
}) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
4799
|
+
"button",
|
|
4800
|
+
{
|
|
4801
|
+
type: "button",
|
|
4802
|
+
onClick,
|
|
4803
|
+
"data-test-id": "strategy-grid-card",
|
|
4804
|
+
className: tailwindMerge.twMerge(
|
|
4805
|
+
"flex flex-col gap-[var(--deframe-widget-size-gap-md)] p-[var(--deframe-widget-size-padding-x-md)] rounded-[var(--deframe-widget-size-radius-sm)] h-[136px] min-h-[136px] flex-shrink-0",
|
|
4806
|
+
"bg-[var(--deframe-widget-color-bg-primary)]",
|
|
4807
|
+
"hover:bg-[var(--deframe-widget-color-bg-tertiary)]",
|
|
4808
|
+
"transition-colors cursor-pointer text-left w-full",
|
|
4809
|
+
className
|
|
4810
|
+
),
|
|
4811
|
+
children: [
|
|
4812
|
+
/* @__PURE__ */ jsxRuntime.jsx("img", { src: logoUrl, alt: title, className: "w-10 h-10 rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0" }),
|
|
4813
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-end justify-between w-full", children: [
|
|
4814
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-xs)]", children: [
|
|
4815
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { className: "font-medium", children: title }),
|
|
4816
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-tertiary)]", children: subtitle })
|
|
4817
|
+
] }),
|
|
4818
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end gap-[var(--deframe-widget-size-gap-xs)]", children: [
|
|
4819
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-primary-disabled)] text-right", children: apyLabel }),
|
|
4820
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { className: "text-[color:var(--deframe-widget-color-brand-primary)]", children: apyFormatted })
|
|
4821
|
+
] })
|
|
4822
|
+
] })
|
|
4823
|
+
]
|
|
4824
|
+
}
|
|
4825
|
+
);
|
|
4826
|
+
var BackButton = ({ onClick, ariaLabel = "Back", className }) => {
|
|
4827
|
+
const baseClasses = "w-12 h-12 rounded-[var(--deframe-widget-size-radius-full)] flex items-center justify-center text-[color:var(--deframe-widget-color-text-secondary)] hover:text-[color:var(--deframe-widget-color-brand-primary)] transition-colors cursor-pointer";
|
|
4828
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
4829
|
+
"button",
|
|
4830
|
+
{
|
|
4831
|
+
"data-test-id": "back-button",
|
|
4832
|
+
onClick,
|
|
4833
|
+
className: tailwindMerge.twMerge(baseClasses, className),
|
|
4834
|
+
"aria-label": ariaLabel,
|
|
4835
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(hi2.HiArrowLeft, { className: "w-6 h-6" })
|
|
4836
|
+
}
|
|
4837
|
+
);
|
|
4838
|
+
};
|
|
4839
|
+
var EarnBalanceCard = ({
|
|
4840
|
+
tokenIcon,
|
|
4841
|
+
fiatBalance,
|
|
4842
|
+
profitAmount,
|
|
4843
|
+
tokenAmount,
|
|
4844
|
+
investedLabel,
|
|
4845
|
+
earningsLabel,
|
|
4846
|
+
isFetching = false
|
|
4847
|
+
}) => {
|
|
4848
|
+
const displayedTokenAmount = isFetching ? "..." : tokenAmount;
|
|
4849
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex flex-row gap-[var(--deframe-widget-size-gap-md)]", children: [
|
|
4850
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 h-24 px-[var(--deframe-widget-size-padding-x-lg)] bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-primary)] rounded shadow-sm flex flex-col items-start justify-center gap-[var(--deframe-widget-size-gap-xs)]", children: [
|
|
4851
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: investedLabel }),
|
|
4852
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-xs)]", children: [
|
|
4853
|
+
tokenIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-5 h-5", children: typeof tokenIcon === "string" ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: tokenIcon, alt: "Token", className: "w-5 h-5 rounded-full" }) : tokenIcon }),
|
|
4854
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h3", children: displayedTokenAmount })
|
|
4855
|
+
] }),
|
|
4856
|
+
/* @__PURE__ */ jsxRuntime.jsxs(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-tertiary)]", children: [
|
|
4857
|
+
"~",
|
|
4858
|
+
fiatBalance
|
|
4859
|
+
] })
|
|
4860
|
+
] }),
|
|
4861
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 h-24 px-[var(--deframe-widget-size-padding-x-lg)] bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-primary)] rounded shadow-sm flex flex-col items-start justify-center gap-[var(--deframe-widget-size-gap-xs)]", children: [
|
|
4862
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: earningsLabel }),
|
|
4863
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h3", children: profitAmount })
|
|
4864
|
+
] })
|
|
4865
|
+
] });
|
|
4866
|
+
};
|
|
4867
|
+
var EarnInvestmentSummaryView = ({
|
|
4868
|
+
overviewDescription,
|
|
4869
|
+
totalInvestedLabel,
|
|
4870
|
+
totalInvestedValue,
|
|
4871
|
+
totalReturnLabel,
|
|
4872
|
+
totalReturnValue,
|
|
4873
|
+
className
|
|
4874
|
+
}) => {
|
|
4875
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: tailwindMerge.twMerge("flex flex-col gap-md p-lg bg-bg-subtle dark:bg-bg-subtle-dark rounded", className), children: [
|
|
4876
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-text-secondary dark:text-text-secondary-dark", children: overviewDescription }),
|
|
4877
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4878
|
+
WalletBalances,
|
|
4879
|
+
{
|
|
4880
|
+
cards: [
|
|
4881
|
+
{ label: totalInvestedLabel, value: totalInvestedValue },
|
|
4882
|
+
{ label: totalReturnLabel, value: totalReturnValue }
|
|
4883
|
+
],
|
|
4884
|
+
variant: "raised",
|
|
4885
|
+
className: "grid grid-cols-2 gap-md !mt-0"
|
|
4886
|
+
}
|
|
4887
|
+
)
|
|
4888
|
+
] });
|
|
4889
|
+
};
|
|
4890
|
+
var EarnInvestedSectionView = ({
|
|
4891
|
+
sectionTitle,
|
|
4892
|
+
items,
|
|
4893
|
+
onItemClick,
|
|
4894
|
+
className
|
|
4895
|
+
}) => {
|
|
4896
|
+
if (items.length === 0) {
|
|
4897
|
+
return null;
|
|
4898
|
+
}
|
|
4899
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
4900
|
+
"section",
|
|
4901
|
+
{
|
|
4902
|
+
className: tailwindMerge.twMerge(
|
|
4903
|
+
"flex flex-col gap-[var(--deframe-widget-size-gap-md)] p-[var(--deframe-widget-size-padding-x-lg)]",
|
|
4904
|
+
"bg-[var(--deframe-widget-color-bg-secondary)] rounded-[var(--deframe-widget-size-radius-sm)]",
|
|
4905
|
+
className
|
|
4906
|
+
),
|
|
4907
|
+
children: [
|
|
4908
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: sectionTitle }),
|
|
4909
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-md)]", children: items.map((item, index) => {
|
|
4910
|
+
const isLast = index === items.length - 1;
|
|
4911
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
4912
|
+
"button",
|
|
4913
|
+
{
|
|
4914
|
+
type: "button",
|
|
4915
|
+
onClick: () => onItemClick == null ? void 0 : onItemClick(item.strategyId),
|
|
4916
|
+
className: tailwindMerge.twMerge(
|
|
4917
|
+
"flex items-center gap-[var(--deframe-widget-size-gap-md)] p-[var(--deframe-widget-size-padding-x-md)] bg-[var(--deframe-widget-color-bg-primary)] rounded-[var(--deframe-widget-size-radius-sm)]",
|
|
4918
|
+
"hover:bg-[var(--deframe-widget-color-bg-tertiary)]",
|
|
4919
|
+
"transition-colors cursor-pointer text-left w-full",
|
|
4920
|
+
!isLast && "border-b border-[var(--deframe-widget-color-border-secondary)]"
|
|
4921
|
+
),
|
|
4922
|
+
children: [
|
|
4923
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4924
|
+
"img",
|
|
4925
|
+
{
|
|
4926
|
+
src: item.logoUrl,
|
|
4927
|
+
alt: item.assetName,
|
|
4928
|
+
className: "w-10 h-10 rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0"
|
|
4929
|
+
}
|
|
4930
|
+
),
|
|
4931
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col flex-1 min-w-0", children: [
|
|
4932
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { className: "font-medium truncate", children: item.assetName }),
|
|
4933
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-tertiary)] truncate", children: item.subtitle })
|
|
4934
|
+
] }),
|
|
4935
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end flex-shrink-0", children: [
|
|
4936
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { className: "font-medium", children: item.balanceFormatted }),
|
|
4937
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: item.profitFormatted })
|
|
4938
|
+
] })
|
|
4939
|
+
]
|
|
4940
|
+
},
|
|
4941
|
+
item.strategyId
|
|
4942
|
+
);
|
|
4943
|
+
}) })
|
|
4944
|
+
]
|
|
4945
|
+
}
|
|
4946
|
+
);
|
|
4947
|
+
};
|
|
4948
|
+
var EarnExploreGridView = ({
|
|
4949
|
+
sectionTitle,
|
|
4950
|
+
loadingLabel,
|
|
4951
|
+
errorLabel,
|
|
4952
|
+
emptySearchTitle,
|
|
4953
|
+
emptySearchDescription,
|
|
4954
|
+
isLoading,
|
|
4955
|
+
error,
|
|
4956
|
+
strategies,
|
|
4957
|
+
searchBar,
|
|
4958
|
+
chipGroup,
|
|
4959
|
+
hasFilters,
|
|
4960
|
+
onStrategyClick,
|
|
4961
|
+
className
|
|
4962
|
+
}) => {
|
|
4963
|
+
const showEmptyState = hasFilters && strategies.length === 0;
|
|
4964
|
+
if (isLoading) {
|
|
4965
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
4966
|
+
"section",
|
|
4967
|
+
{
|
|
4968
|
+
className: tailwindMerge.twMerge(
|
|
4969
|
+
"flex flex-col gap-[var(--deframe-widget-size-gap-md)] p-[var(--deframe-widget-size-padding-x-lg)]",
|
|
4970
|
+
"bg-[var(--deframe-widget-color-bg-secondary)] rounded-[var(--deframe-widget-size-radius-sm)]",
|
|
4971
|
+
className
|
|
4972
|
+
),
|
|
4973
|
+
children: [
|
|
4974
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: sectionTitle }),
|
|
4975
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-[color:var(--deframe-widget-color-text-secondary)] flex items-center gap-[var(--deframe-widget-size-gap-sm)]", children: [
|
|
4976
|
+
loadingLabel,
|
|
4977
|
+
/* @__PURE__ */ jsxRuntime.jsx(LoadingDots, {})
|
|
4978
|
+
] })
|
|
4979
|
+
]
|
|
4980
|
+
}
|
|
4981
|
+
);
|
|
4982
|
+
}
|
|
4983
|
+
if (error) {
|
|
4984
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
4985
|
+
"section",
|
|
4986
|
+
{
|
|
4987
|
+
className: tailwindMerge.twMerge(
|
|
4988
|
+
"flex flex-col gap-[var(--deframe-widget-size-gap-md)] p-[var(--deframe-widget-size-padding-x-lg)]",
|
|
4989
|
+
"bg-[var(--deframe-widget-color-bg-secondary)] rounded-[var(--deframe-widget-size-radius-sm)]",
|
|
4990
|
+
className
|
|
4991
|
+
),
|
|
4992
|
+
children: [
|
|
4993
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: sectionTitle }),
|
|
4994
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[color:var(--deframe-widget-color-state-error)]", children: errorLabel })
|
|
4995
|
+
]
|
|
4996
|
+
}
|
|
4997
|
+
);
|
|
4998
|
+
}
|
|
4999
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
5000
|
+
"section",
|
|
5001
|
+
{
|
|
5002
|
+
className: tailwindMerge.twMerge(
|
|
5003
|
+
"flex flex-col gap-[var(--deframe-widget-size-gap-md)] p-[var(--deframe-widget-size-padding-x-lg)]",
|
|
5004
|
+
"bg-[var(--deframe-widget-color-bg-secondary)] rounded-[var(--deframe-widget-size-radius-sm)]",
|
|
5005
|
+
className
|
|
5006
|
+
),
|
|
5007
|
+
children: [
|
|
5008
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: sectionTitle }),
|
|
5009
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-md)]", children: [
|
|
5010
|
+
searchBar,
|
|
5011
|
+
chipGroup
|
|
5012
|
+
] }),
|
|
5013
|
+
showEmptyState && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:h-[440px] flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(SearchEmptyState, { title: emptySearchTitle, description: emptySearchDescription }) }),
|
|
5014
|
+
!showEmptyState && /* @__PURE__ */ jsxRuntime.jsx(
|
|
5015
|
+
"div",
|
|
5016
|
+
{
|
|
5017
|
+
className: "explore-strategies-grid grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-[var(--deframe-widget-size-gap-md)] overflow-y-auto pr-[var(--deframe-widget-size-padding-x-sm)] h-[440px] auto-rows-[136px]",
|
|
5018
|
+
children: strategies.map((strategy) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
5019
|
+
StrategyGridCard,
|
|
5020
|
+
{
|
|
5021
|
+
logoUrl: strategy.logoUrl,
|
|
5022
|
+
title: strategy.title,
|
|
5023
|
+
subtitle: strategy.subtitle,
|
|
5024
|
+
apyFormatted: strategy.apyFormatted,
|
|
5025
|
+
apyLabel: strategy.apyLabel,
|
|
5026
|
+
onClick: () => onStrategyClick == null ? void 0 : onStrategyClick(strategy.id)
|
|
5027
|
+
},
|
|
5028
|
+
strategy.id
|
|
5029
|
+
))
|
|
5030
|
+
}
|
|
5031
|
+
)
|
|
5032
|
+
]
|
|
5033
|
+
}
|
|
5034
|
+
);
|
|
5035
|
+
};
|
|
5036
|
+
var EarnRecentTransactionsView = ({
|
|
5037
|
+
sectionTitle,
|
|
5038
|
+
viewAllLabel,
|
|
5039
|
+
isLoading,
|
|
5040
|
+
hasMore,
|
|
5041
|
+
hasItems,
|
|
5042
|
+
historyList,
|
|
5043
|
+
emptyTitle,
|
|
5044
|
+
emptyDescription,
|
|
5045
|
+
onViewAll,
|
|
5046
|
+
className
|
|
5047
|
+
}) => {
|
|
5048
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
5049
|
+
"section",
|
|
5050
|
+
{
|
|
5051
|
+
className: tailwindMerge.twMerge(
|
|
5052
|
+
"flex flex-col gap-md p-lg",
|
|
5053
|
+
"bg-bg-subtle dark:bg-bg-subtle-dark rounded",
|
|
5054
|
+
className
|
|
5055
|
+
),
|
|
5056
|
+
children: [
|
|
5057
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
|
|
5058
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-text-secondary dark:text-text-secondary-dark", children: sectionTitle }),
|
|
5059
|
+
hasMore && onViewAll && /* @__PURE__ */ jsxRuntime.jsx(
|
|
5060
|
+
"button",
|
|
5061
|
+
{
|
|
5062
|
+
type: "button",
|
|
5063
|
+
onClick: onViewAll,
|
|
5064
|
+
className: "text-brand-primary dark:text-brand-primary-dark hover:underline",
|
|
5065
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: viewAllLabel })
|
|
5066
|
+
}
|
|
5067
|
+
)
|
|
5068
|
+
] }),
|
|
5069
|
+
isLoading ? /* @__PURE__ */ jsxRuntime.jsx(HistoryListSkeleton, {}) : hasItems ? historyList : /* @__PURE__ */ jsxRuntime.jsx(HistoryTabEmpty, { title: emptyTitle, description: emptyDescription })
|
|
5070
|
+
]
|
|
5071
|
+
}
|
|
5072
|
+
);
|
|
5073
|
+
};
|
|
5074
|
+
var EarnDesktopView = ({
|
|
5075
|
+
isLoading,
|
|
5076
|
+
loadingSkeleton,
|
|
5077
|
+
summary,
|
|
5078
|
+
invested,
|
|
5079
|
+
explore,
|
|
5080
|
+
transactions
|
|
5081
|
+
}) => {
|
|
5082
|
+
if (isLoading) {
|
|
5083
|
+
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: loadingSkeleton });
|
|
5084
|
+
}
|
|
5085
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-[color:var(--deframe-widget-color-text-primary)] flex flex-col relative overflow-y-auto w-full flex-1 min-h-0 pb-[var(--deframe-widget-size-padding-y-lg)] gap-[var(--deframe-widget-size-gap-md)]", children: [
|
|
5086
|
+
/* @__PURE__ */ jsxRuntime.jsx(EarnInvestmentSummaryView, __spreadValues({}, summary)),
|
|
5087
|
+
/* @__PURE__ */ jsxRuntime.jsx(EarnInvestedSectionView, __spreadValues({}, invested)),
|
|
5088
|
+
/* @__PURE__ */ jsxRuntime.jsx(EarnExploreGridView, __spreadValues({}, explore)),
|
|
5089
|
+
/* @__PURE__ */ jsxRuntime.jsx(EarnRecentTransactionsView, __spreadValues({}, transactions))
|
|
5090
|
+
] });
|
|
5091
|
+
};
|
|
5092
|
+
var EarnInvestmentDetailsView = ({
|
|
5093
|
+
title,
|
|
5094
|
+
onBack,
|
|
5095
|
+
tokenIcon,
|
|
5096
|
+
fiatBalance,
|
|
5097
|
+
profitAmount,
|
|
5098
|
+
tokenAmount,
|
|
5099
|
+
investedLabel,
|
|
5100
|
+
earningsLabel,
|
|
5101
|
+
summaryTitle,
|
|
5102
|
+
summaryItems,
|
|
5103
|
+
pastActivitiesTitle,
|
|
5104
|
+
transactions,
|
|
5105
|
+
onTransactionClick,
|
|
5106
|
+
showMoreButton,
|
|
5107
|
+
onLoadMore,
|
|
5108
|
+
loadMoreLabel,
|
|
5109
|
+
depositLabel,
|
|
5110
|
+
onDeposit,
|
|
5111
|
+
withdrawLabel,
|
|
5112
|
+
onWithdraw
|
|
5113
|
+
}) => {
|
|
5114
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(BackgroundContainer, { children: [
|
|
5115
|
+
/* @__PURE__ */ jsxRuntime.jsxs(Navbar, { children: [
|
|
5116
|
+
/* @__PURE__ */ jsxRuntime.jsx(BackButton, { onClick: onBack }),
|
|
5117
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h1", children: title })
|
|
5118
|
+
] }),
|
|
5119
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col min-h-0 px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-sm)] gap-[var(--deframe-widget-size-gap-md)]", children: [
|
|
5120
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5121
|
+
EarnBalanceCard,
|
|
5122
|
+
{
|
|
5123
|
+
tokenIcon,
|
|
5124
|
+
fiatBalance,
|
|
5125
|
+
profitAmount,
|
|
5126
|
+
tokenAmount,
|
|
5127
|
+
investedLabel,
|
|
5128
|
+
earningsLabel
|
|
5129
|
+
}
|
|
5130
|
+
),
|
|
5131
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5132
|
+
SummaryDetails,
|
|
5133
|
+
{
|
|
5134
|
+
title: summaryTitle,
|
|
5135
|
+
items: summaryItems,
|
|
5136
|
+
defaultOpen: true,
|
|
5137
|
+
className: "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-primary)]"
|
|
5138
|
+
}
|
|
5139
|
+
),
|
|
5140
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full rounded-[var(--deframe-widget-size-radius-sm)] flex flex-col gap-[var(--deframe-widget-size-gap-sm)] flex-shrink-0", children: [
|
|
5141
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h5", children: pastActivitiesTitle }),
|
|
5142
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "investment-activities-list flex flex-col gap-[var(--deframe-widget-size-gap-sm)] overflow-y-auto max-h-[280px] pr-[var(--deframe-widget-size-padding-x-sm)]", children: [
|
|
5143
|
+
transactions.map((tx) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
5144
|
+
ListItem,
|
|
5145
|
+
{
|
|
5146
|
+
onClick: () => onTransactionClick(tx.id),
|
|
5147
|
+
children: [
|
|
5148
|
+
/* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: tokenIcon, alt: "Token", className: "w-10 h-10 rounded-[var(--deframe-widget-size-radius-full)]" }) }),
|
|
5149
|
+
/* @__PURE__ */ jsxRuntime.jsxs(ListItemContent, { children: [
|
|
5150
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { children: tx.action }),
|
|
5151
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: tx.date })
|
|
5152
|
+
] }),
|
|
5153
|
+
/* @__PURE__ */ jsxRuntime.jsxs(ListItemRightSide, { children: [
|
|
5154
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { children: tx.usdAmount }),
|
|
5155
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: tx.tokenAmount })
|
|
5156
|
+
] })
|
|
5157
|
+
]
|
|
5158
|
+
},
|
|
5159
|
+
`tx-history-${tx.id}`
|
|
5160
|
+
)),
|
|
5161
|
+
showMoreButton && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center items-center w-full py-4 flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(TertiaryButton, { onClick: onLoadMore, children: loadMoreLabel }) })
|
|
5162
|
+
] })
|
|
5163
|
+
] })
|
|
5164
|
+
] }),
|
|
5165
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky bottom-0 left-0 right-0 border-t border-[var(--deframe-widget-color-border-secondary)] px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between gap-[var(--deframe-widget-size-gap-md)]", children: [
|
|
5166
|
+
/* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { onClick: onDeposit, className: "w-full", children: depositLabel }),
|
|
5167
|
+
/* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { onClick: onWithdraw, className: "w-full", children: withdrawLabel })
|
|
5168
|
+
] }) })
|
|
5169
|
+
] });
|
|
5170
|
+
};
|
|
5171
|
+
var GroupLabel = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-text-secondary dark:text-text-secondary-dark text-sm font-medium font-poppins py-3", children });
|
|
5172
|
+
var GroupedStrategyListView = ({
|
|
5173
|
+
isLoading,
|
|
5174
|
+
loadingLabel,
|
|
5175
|
+
error,
|
|
5176
|
+
errorLabel,
|
|
5177
|
+
investedLabel,
|
|
5178
|
+
investedItems,
|
|
5179
|
+
bestPerformanceLabel,
|
|
5180
|
+
bestPerformanceItems,
|
|
5181
|
+
allStrategiesLabel,
|
|
5182
|
+
allStrategiesItems
|
|
5183
|
+
}) => {
|
|
5184
|
+
const hasInvested = investedItems.length > 0;
|
|
5185
|
+
const hasBestPerformance = bestPerformanceItems.length > 0;
|
|
5186
|
+
const hasAllStrategies = allStrategiesItems.length > 0;
|
|
5187
|
+
if (isLoading) {
|
|
5188
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center py-md", children: [
|
|
5189
|
+
loadingLabel,
|
|
5190
|
+
" ",
|
|
5191
|
+
/* @__PURE__ */ jsxRuntime.jsx(LoadingDots, {})
|
|
5192
|
+
] });
|
|
5193
|
+
}
|
|
5194
|
+
if (error) {
|
|
5195
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 text-center text-red-500", children: [
|
|
5196
|
+
errorLabel,
|
|
5197
|
+
": ",
|
|
5198
|
+
error.message
|
|
5199
|
+
] });
|
|
5200
|
+
}
|
|
5201
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex flex-col gap-sm flex-1 min-h-0 overflow-y-auto", children: [
|
|
5202
|
+
hasInvested && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
5203
|
+
/* @__PURE__ */ jsxRuntime.jsx(GroupLabel, { children: investedLabel }),
|
|
5204
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-sm", children: investedItems.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
5205
|
+
ListItem,
|
|
5206
|
+
{
|
|
5207
|
+
onClick: () => item.onClick(),
|
|
5208
|
+
children: [
|
|
5209
|
+
/* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
5210
|
+
"img",
|
|
5211
|
+
{
|
|
5212
|
+
src: item.logoUrl,
|
|
5213
|
+
alt: item.subtitle,
|
|
5214
|
+
className: "w-10 h-10 rounded-full"
|
|
5215
|
+
}
|
|
5216
|
+
) }),
|
|
5217
|
+
/* @__PURE__ */ jsxRuntime.jsxs(ListItemContent, { children: [
|
|
5218
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { children: item.title }),
|
|
5219
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: item.subtitle })
|
|
5220
|
+
] }),
|
|
5221
|
+
/* @__PURE__ */ jsxRuntime.jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row justify-between items-center", children: [
|
|
5222
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end", children: [
|
|
5223
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { children: item.balanceFormatted }),
|
|
5224
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: item.profitFormatted })
|
|
5225
|
+
] }),
|
|
5226
|
+
/* @__PURE__ */ jsxRuntime.jsx(md.MdArrowRight, { className: "w-6 h-6" })
|
|
5227
|
+
] }) })
|
|
5228
|
+
]
|
|
5229
|
+
},
|
|
5230
|
+
`invested-${item.id}`
|
|
5231
|
+
)) })
|
|
5232
|
+
] }),
|
|
5233
|
+
hasBestPerformance && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
5234
|
+
/* @__PURE__ */ jsxRuntime.jsx(GroupLabel, { children: bestPerformanceLabel }),
|
|
5235
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-sm", children: bestPerformanceItems.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
5236
|
+
ListItem,
|
|
5237
|
+
{
|
|
5238
|
+
onClick: () => item.onClick(),
|
|
5239
|
+
children: [
|
|
5240
|
+
/* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
5241
|
+
"img",
|
|
5242
|
+
{
|
|
5243
|
+
src: item.logoUrl,
|
|
5244
|
+
alt: item.subtitle,
|
|
5245
|
+
className: "w-10 h-10 rounded-full"
|
|
5246
|
+
}
|
|
5247
|
+
) }),
|
|
5248
|
+
/* @__PURE__ */ jsxRuntime.jsxs(ListItemContent, { children: [
|
|
5249
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { children: item.title }),
|
|
5250
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: item.subtitle })
|
|
5251
|
+
] }),
|
|
5252
|
+
/* @__PURE__ */ jsxRuntime.jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row justify-between items-center", children: [
|
|
5253
|
+
/* @__PURE__ */ jsxRuntime.jsx(ApyRange, { children: item.apyFormatted }),
|
|
5254
|
+
/* @__PURE__ */ jsxRuntime.jsx(md.MdArrowRight, { className: "w-6 h-6" })
|
|
5255
|
+
] }) })
|
|
5256
|
+
]
|
|
5257
|
+
},
|
|
5258
|
+
`best-${item.id}`
|
|
5259
|
+
)) })
|
|
5260
|
+
] }),
|
|
5261
|
+
hasAllStrategies && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
5262
|
+
/* @__PURE__ */ jsxRuntime.jsx(GroupLabel, { children: allStrategiesLabel }),
|
|
5263
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-sm", children: allStrategiesItems.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
5264
|
+
ListItem,
|
|
5265
|
+
{
|
|
5266
|
+
onClick: () => item.onClick(),
|
|
5267
|
+
children: [
|
|
5268
|
+
/* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
5269
|
+
"img",
|
|
5270
|
+
{
|
|
5271
|
+
src: item.logoUrl,
|
|
5272
|
+
alt: item.subtitle,
|
|
5273
|
+
className: "w-10 h-10 rounded-full"
|
|
5274
|
+
}
|
|
5275
|
+
) }),
|
|
5276
|
+
/* @__PURE__ */ jsxRuntime.jsxs(ListItemContent, { children: [
|
|
5277
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { children: item.title }),
|
|
5278
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: item.subtitle })
|
|
5279
|
+
] }),
|
|
5280
|
+
/* @__PURE__ */ jsxRuntime.jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row justify-between items-center", children: [
|
|
5281
|
+
/* @__PURE__ */ jsxRuntime.jsx(ApyRange, { children: item.apyFormatted }),
|
|
5282
|
+
/* @__PURE__ */ jsxRuntime.jsx(md.MdArrowRight, { className: "w-6 h-6" })
|
|
5283
|
+
] }) })
|
|
5284
|
+
]
|
|
5285
|
+
},
|
|
5286
|
+
`all-${item.id}`
|
|
5287
|
+
)) })
|
|
5288
|
+
] })
|
|
5289
|
+
] });
|
|
5290
|
+
};
|
|
5291
|
+
var DateLabel = ({ children }) => {
|
|
5292
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-text-sm-mobile font-poppins text-text-secondary dark:text-text-secondary-dark", children });
|
|
5293
|
+
};
|
|
5294
|
+
var ArrowBadge = ({ isDeposit }) => {
|
|
5295
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-[-2px] right-[-2px] w-[15px] h-[15px] rounded-full bg-bg-subtle dark:bg-bg-subtle-dark flex items-center justify-center border border-bg-subtle dark:border-bg-subtle-dark", children: isDeposit ? /* @__PURE__ */ jsxRuntime.jsx(md.MdArrowDownward, { className: "w-3 h-3 text-text-primary dark:text-text-primary-dark" }) : /* @__PURE__ */ jsxRuntime.jsx(md.MdArrowUpward, { className: "w-3 h-3 text-text-primary dark:text-text-primary-dark" }) });
|
|
5296
|
+
};
|
|
5297
|
+
var TokenIconWithBadge = ({ src, alt, isDeposit }) => {
|
|
5298
|
+
const fallbackText = encodeURIComponent((alt || "TOK").slice(0, 3).toUpperCase());
|
|
5299
|
+
const fallbackSrc = `https://placehold.co/40x40?text=${fallbackText}`;
|
|
5300
|
+
const resolvedSrc = src || fallbackSrc;
|
|
5301
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-shrink-0", children: [
|
|
5302
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-xl bg-bg-muted dark:bg-bg-muted-dark flex items-center justify-center overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
5303
|
+
"img",
|
|
5304
|
+
{
|
|
5305
|
+
src: resolvedSrc,
|
|
5306
|
+
alt,
|
|
5307
|
+
className: "w-full h-full object-cover",
|
|
5308
|
+
onError: (e) => {
|
|
5309
|
+
e.target.src = fallbackSrc;
|
|
5310
|
+
}
|
|
5311
|
+
}
|
|
5312
|
+
) }),
|
|
5313
|
+
/* @__PURE__ */ jsxRuntime.jsx(ArrowBadge, { isDeposit })
|
|
5314
|
+
] });
|
|
5315
|
+
};
|
|
5316
|
+
var SwapIconWithBadge = ({ src, alt }) => {
|
|
5317
|
+
const fallbackText = encodeURIComponent((alt || "TOK").slice(0, 3).toUpperCase());
|
|
5318
|
+
const fallbackSrc = `https://placehold.co/40x40?text=${fallbackText}`;
|
|
5319
|
+
const resolvedSrc = src || fallbackSrc;
|
|
5320
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-shrink-0", children: [
|
|
5321
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-xl bg-bg-muted dark:bg-bg-muted-dark flex items-center justify-center overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
5322
|
+
"img",
|
|
5323
|
+
{
|
|
5324
|
+
src: resolvedSrc,
|
|
5325
|
+
alt,
|
|
5326
|
+
className: "w-full h-full object-cover",
|
|
5327
|
+
onError: (e) => {
|
|
5328
|
+
e.target.src = fallbackSrc;
|
|
5329
|
+
}
|
|
5330
|
+
}
|
|
5331
|
+
) }),
|
|
5332
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-[-2px] right-[-2px] w-[15px] h-[15px] rounded-full bg-bg-subtle dark:bg-bg-subtle-dark flex items-center justify-center border border-bg-subtle dark:border-bg-subtle-dark", children: /* @__PURE__ */ jsxRuntime.jsx(md.MdArrowUpward, { className: "w-3 h-3 text-text-primary dark:text-text-primary-dark" }) })
|
|
5333
|
+
] });
|
|
5334
|
+
};
|
|
5335
|
+
var AmountDisplay = ({ amount, usdAmount }) => {
|
|
5336
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
5337
|
+
/* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-accent-sm-mobile whitespace-nowrap", children: amount }),
|
|
5338
|
+
usdAmount ? /* @__PURE__ */ jsxRuntime.jsx(Label, { variant: "secondary", className: "whitespace-nowrap", children: usdAmount }) : null
|
|
5339
|
+
] });
|
|
5340
|
+
};
|
|
5341
|
+
var HistoryListView = ({
|
|
5342
|
+
groups,
|
|
5343
|
+
showLoadMore,
|
|
5344
|
+
onLoadMore,
|
|
5345
|
+
loadMoreLabel,
|
|
5346
|
+
itemClassName
|
|
5347
|
+
}) => {
|
|
5348
|
+
if (groups.length === 0) {
|
|
5349
|
+
return null;
|
|
5350
|
+
}
|
|
5351
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "self-stretch flex flex-col gap-[16px]", children: [
|
|
5352
|
+
groups.map((group) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "self-stretch flex flex-col gap-sm", children: [
|
|
5353
|
+
/* @__PURE__ */ jsxRuntime.jsx(DateLabel, { children: group.dateLabel }),
|
|
5354
|
+
group.items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
5355
|
+
ListItem,
|
|
5356
|
+
{
|
|
5357
|
+
onClick: () => item.onClick(),
|
|
5358
|
+
containerClassName: tailwindMerge.twMerge("!rounded-xs !border-0 !min-h-[72px]", itemClassName),
|
|
5359
|
+
children: [
|
|
5360
|
+
/* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: item.isSwap ? /* @__PURE__ */ jsxRuntime.jsx(SwapIconWithBadge, { src: item.iconUrl, alt: item.iconAlt }) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
5361
|
+
TokenIconWithBadge,
|
|
5362
|
+
{
|
|
5363
|
+
src: item.iconUrl,
|
|
5364
|
+
alt: item.iconAlt,
|
|
5365
|
+
isDeposit: item.isDeposit
|
|
5366
|
+
}
|
|
5367
|
+
) }),
|
|
5368
|
+
/* @__PURE__ */ jsxRuntime.jsxs(ListItemContent, { children: [
|
|
5369
|
+
/* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-text-lg-mobile", children: item.title }),
|
|
5370
|
+
/* @__PURE__ */ jsxRuntime.jsx(Label, { variant: "secondary", className: "text-text-tertiary dark:text-text-tertiary-dark", children: item.subtitle })
|
|
5371
|
+
] }),
|
|
5372
|
+
/* @__PURE__ */ jsxRuntime.jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxRuntime.jsx(AmountDisplay, { amount: item.amountFormatted, usdAmount: item.amountUsd }) })
|
|
5373
|
+
]
|
|
5374
|
+
},
|
|
5375
|
+
item.id
|
|
5376
|
+
))
|
|
5377
|
+
] }, group.dateLabel)),
|
|
5378
|
+
showLoadMore && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center pt-sm", children: /* @__PURE__ */ jsxRuntime.jsx(TertiaryButton, { onClick: onLoadMore, children: loadMoreLabel }) })
|
|
5379
|
+
] });
|
|
5380
|
+
};
|
|
5381
|
+
var EarnTokenSelectorView = ({
|
|
5382
|
+
selectedToken,
|
|
5383
|
+
onTokenClick,
|
|
5384
|
+
isLoading,
|
|
5385
|
+
selectTokenLabel,
|
|
5386
|
+
chainLabel,
|
|
5387
|
+
chainImage,
|
|
5388
|
+
chainDirectionLabel,
|
|
5389
|
+
chainDisabledTitle
|
|
5390
|
+
}) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[10px]", children: [
|
|
5391
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-[10px] w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
5392
|
+
"button",
|
|
5393
|
+
{
|
|
5394
|
+
type: "button",
|
|
5395
|
+
onClick: onTokenClick,
|
|
5396
|
+
className: "flex-1 h-[56px] border border-[var(--deframe-widget-color-border-primary)] rounded overflow-hidden hover:border-[var(--deframe-widget-color-border-primary)] transition-colors",
|
|
5397
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full items-center justify-between px-[var(--deframe-widget-size-padding-x-sm)] py-[6px]", children: [
|
|
5398
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] items-center", children: (selectedToken == null ? void 0 : selectedToken.logoURI) ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
5399
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5400
|
+
"img",
|
|
5401
|
+
{
|
|
5402
|
+
src: selectedToken.logoURI,
|
|
5403
|
+
alt: selectedToken.symbol,
|
|
5404
|
+
className: "w-6 h-6 rounded-full"
|
|
5405
|
+
}
|
|
5406
|
+
),
|
|
5407
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", className: "text-[color:var(--deframe-widget-color-text-primary)]", children: selectedToken.symbol })
|
|
5408
|
+
] }) : isLoading ? /* @__PURE__ */ jsxRuntime.jsx(LoadingDots, {}) : /* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: selectTokenLabel }) }),
|
|
5409
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[18px] h-[18px] flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(hi2.HiChevronDown, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-tertiary)]" }) })
|
|
5410
|
+
] })
|
|
5411
|
+
}
|
|
5412
|
+
) }),
|
|
5413
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] items-center", children: [
|
|
5414
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-tertiary)]", children: chainDirectionLabel }),
|
|
5415
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
5416
|
+
"button",
|
|
5417
|
+
{
|
|
5418
|
+
type: "button",
|
|
5419
|
+
disabled: true,
|
|
5420
|
+
title: chainDisabledTitle,
|
|
5421
|
+
className: "bg-[var(--deframe-widget-color-bg-tertiary)] border border-[var(--deframe-widget-color-border-secondary)] rounded-lg flex gap-[var(--deframe-widget-size-gap-xs)] items-center px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)] opacity-60 cursor-not-allowed",
|
|
5422
|
+
children: [
|
|
5423
|
+
chainImage && /* @__PURE__ */ jsxRuntime.jsx("img", { src: chainImage, alt: "", className: "w-3 h-3 rounded-full" }),
|
|
5424
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: chainLabel }),
|
|
5425
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[18px] h-[18px] flex items-center justify-center opacity-50", children: /* @__PURE__ */ jsxRuntime.jsx(hi2.HiChevronDown, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-tertiary)]" }) })
|
|
5426
|
+
]
|
|
5427
|
+
}
|
|
5428
|
+
)
|
|
5429
|
+
] })
|
|
5430
|
+
] });
|
|
5431
|
+
var EarnAmountInputView = ({
|
|
5432
|
+
value,
|
|
5433
|
+
onChange,
|
|
5434
|
+
ariaLabel,
|
|
5435
|
+
dollarAmountFormatted,
|
|
5436
|
+
availableBalanceFormatted
|
|
5437
|
+
}) => {
|
|
5438
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col items-end justify-between min-h-[86px] text-right", children: [
|
|
5439
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end text-[color:var(--deframe-widget-color-text-secondary)]", children: [
|
|
5440
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5441
|
+
"input",
|
|
5442
|
+
{
|
|
5443
|
+
placeholder: "0.00",
|
|
5444
|
+
type: "text",
|
|
5445
|
+
inputMode: "decimal",
|
|
5446
|
+
autoComplete: "off",
|
|
5447
|
+
"aria-label": ariaLabel,
|
|
5448
|
+
value,
|
|
5449
|
+
min: "0",
|
|
5450
|
+
step: "any",
|
|
5451
|
+
className: "[font-size:var(--deframe-widget-font-size-xxl)] [font-weight:var(--deframe-widget-font-weight-extrabold)] bg-transparent outline-none text-right w-full min-w-[105px] placeholder:text-[color:var(--deframe-widget-color-text-primary-disabled)] [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
|
|
5452
|
+
onChange,
|
|
5453
|
+
onWheel: (event) => {
|
|
5454
|
+
event.currentTarget.blur();
|
|
5455
|
+
}
|
|
5456
|
+
}
|
|
5457
|
+
),
|
|
5458
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", variant: "text-small", children: dollarAmountFormatted })
|
|
5459
|
+
] }),
|
|
5460
|
+
availableBalanceFormatted && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "[font-size:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-tertiary)] whitespace-nowrap", children: availableBalanceFormatted })
|
|
5461
|
+
] });
|
|
5462
|
+
};
|
|
5463
|
+
var EarnPercentageButtonsView = ({
|
|
5464
|
+
onPercentageClick,
|
|
5465
|
+
maxLabel
|
|
5466
|
+
}) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[var(--deframe-widget-size-padding-x-md)] mt-[var(--deframe-widget-size-gap-md)] w-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] w-full", children: [
|
|
5467
|
+
/* @__PURE__ */ jsxRuntime.jsx(PercentageButton, { onClick: () => onPercentageClick(2500), children: "25%" }),
|
|
5468
|
+
/* @__PURE__ */ jsxRuntime.jsx(PercentageButton, { onClick: () => onPercentageClick(5e3), children: "50%" }),
|
|
5469
|
+
/* @__PURE__ */ jsxRuntime.jsx(PercentageButton, { onClick: () => onPercentageClick(7500), children: "75%" }),
|
|
5470
|
+
/* @__PURE__ */ jsxRuntime.jsx(PercentageButton, { onClick: () => onPercentageClick(1e4), children: maxLabel })
|
|
5471
|
+
] }) });
|
|
5472
|
+
var EarnWithdrawTokenSelectorView = ({
|
|
5473
|
+
selectedToken,
|
|
5474
|
+
onTokenClick,
|
|
5475
|
+
selectTokenLabel,
|
|
5476
|
+
chainLabel,
|
|
5477
|
+
chainImage,
|
|
5478
|
+
chainDirectionLabel,
|
|
5479
|
+
chainDisabledTitle
|
|
5480
|
+
}) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[10px]", children: [
|
|
5481
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-[10px] w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
5482
|
+
"button",
|
|
5483
|
+
{
|
|
5484
|
+
type: "button",
|
|
5485
|
+
onClick: onTokenClick,
|
|
5486
|
+
className: "flex-1 h-[56px] border border-[var(--deframe-widget-color-border-primary)] rounded overflow-hidden hover:border-[var(--deframe-widget-color-border-primary)] transition-colors",
|
|
5487
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full items-center justify-between px-[var(--deframe-widget-size-padding-x-sm)] py-[6px]", children: [
|
|
5488
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] items-center", children: (selectedToken == null ? void 0 : selectedToken.symbol) ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
5489
|
+
selectedToken.logoURI && /* @__PURE__ */ jsxRuntime.jsx(
|
|
5490
|
+
"img",
|
|
5491
|
+
{
|
|
5492
|
+
src: selectedToken.logoURI,
|
|
5493
|
+
alt: selectedToken.symbol,
|
|
5494
|
+
className: "w-6 h-6 rounded-full"
|
|
5495
|
+
}
|
|
5496
|
+
),
|
|
5497
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", className: "text-[color:var(--deframe-widget-color-text-primary)]", children: selectedToken.symbol })
|
|
5498
|
+
] }) : /* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: selectTokenLabel }) }),
|
|
5499
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[18px] h-[18px] flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(md.MdArrowDropDown, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-tertiary)]" }) })
|
|
5500
|
+
] })
|
|
5501
|
+
}
|
|
5502
|
+
) }),
|
|
5503
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] items-center", children: [
|
|
5504
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-tertiary)]", children: chainDirectionLabel }),
|
|
5505
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
5506
|
+
"button",
|
|
5507
|
+
{
|
|
5508
|
+
type: "button",
|
|
5509
|
+
disabled: true,
|
|
5510
|
+
title: chainDisabledTitle,
|
|
5511
|
+
className: "bg-[var(--deframe-widget-color-bg-tertiary)] border border-[var(--deframe-widget-color-border-secondary)] rounded-lg flex gap-[var(--deframe-widget-size-gap-xs)] items-center px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)] opacity-60 cursor-not-allowed",
|
|
5512
|
+
children: [
|
|
5513
|
+
chainImage && /* @__PURE__ */ jsxRuntime.jsx("img", { src: chainImage, alt: "", className: "w-3 h-3 rounded-full" }),
|
|
5514
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: chainLabel }),
|
|
5515
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[18px] h-[18px] flex items-center justify-center opacity-50", children: /* @__PURE__ */ jsxRuntime.jsx(md.MdArrowDropDown, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-tertiary)]" }) })
|
|
5516
|
+
]
|
|
5517
|
+
}
|
|
5518
|
+
)
|
|
5519
|
+
] })
|
|
5520
|
+
] });
|
|
5521
|
+
var EarnNoBalanceNotificationView = ({
|
|
5522
|
+
prompt,
|
|
5523
|
+
actionLabel,
|
|
5524
|
+
onAction
|
|
5525
|
+
}) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[var(--deframe-widget-size-padding-x-md)] mt-[var(--deframe-widget-size-gap-md)]", children: /* @__PURE__ */ jsxRuntime.jsx(SectionCard, { className: "bg-[var(--deframe-widget-color-state-warning)]/10 border border-[var(--deframe-widget-color-state-warning)]/20", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)]", children: [
|
|
5526
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-[var(--deframe-widget-size-gap-sm)]", children: [
|
|
5527
|
+
/* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-5 h-5 text-[color:var(--deframe-widget-color-state-warning)] flex-shrink-0 mt-0.5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) }),
|
|
5528
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-primary)]", children: prompt }) })
|
|
5529
|
+
] }),
|
|
5530
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5531
|
+
PrimaryButton,
|
|
5532
|
+
{
|
|
5533
|
+
type: "button",
|
|
5534
|
+
onClick: onAction,
|
|
5535
|
+
className: "w-full mt-[var(--deframe-widget-size-gap-sm)]",
|
|
5536
|
+
children: actionLabel
|
|
5537
|
+
}
|
|
5538
|
+
)
|
|
5539
|
+
] }) }) });
|
|
5540
|
+
var EarnTxStatusCardView = ({
|
|
5541
|
+
statusLabel,
|
|
5542
|
+
isProcessing,
|
|
5543
|
+
successMessage,
|
|
5544
|
+
errorMessage
|
|
5545
|
+
}) => /* @__PURE__ */ jsxRuntime.jsxs(SectionCard, { children: [
|
|
5546
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)]", children: [
|
|
5547
|
+
isProcessing && /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "h-5 w-5 animate-spin text-[color:var(--deframe-widget-color-brand-primary)]", viewBox: "0 0 24 24", children: [
|
|
5548
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4", fill: "none" }),
|
|
5549
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" })
|
|
5550
|
+
] }),
|
|
5551
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[color:var(--deframe-widget-color-text-secondary)] [font-size:var(--deframe-widget-font-size-sm)] font-[var(--deframe-widget-font-family)]", children: statusLabel })
|
|
5552
|
+
] }) }),
|
|
5553
|
+
successMessage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-[var(--deframe-widget-size-gap-sm)] rounded px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)] bg-[var(--deframe-widget-color-state-success)]/10 text-[color:var(--deframe-widget-color-state-success)] [font-size:var(--deframe-widget-font-size-sm)] font-[var(--deframe-widget-font-family)]", children: successMessage }),
|
|
5554
|
+
errorMessage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-[var(--deframe-widget-size-gap-sm)] rounded px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)] bg-[var(--deframe-widget-color-state-error)]/10 text-[color:var(--deframe-widget-color-state-error)] [font-size:var(--deframe-widget-font-size-sm)] font-[var(--deframe-widget-font-family)]", children: errorMessage })
|
|
5555
|
+
] });
|
|
5556
|
+
var EarnBytecodeErrorView = ({
|
|
5557
|
+
errorTitle,
|
|
5558
|
+
errorMessage
|
|
5559
|
+
}) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-sm)] bg-[var(--deframe-widget-color-state-error)]/10 border border-[var(--deframe-widget-color-state-error)]/20", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-[var(--deframe-widget-size-gap-sm)]", children: [
|
|
5560
|
+
/* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-5 h-5 text-[color:var(--deframe-widget-color-state-error)] flex-shrink-0", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z", clipRule: "evenodd" }) }),
|
|
5561
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
|
|
5562
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[color:var(--deframe-widget-color-state-error)] [font-weight:var(--deframe-widget-font-weight-medium)] [font-size:var(--deframe-widget-font-size-sm)] font-[var(--deframe-widget-font-family)] mb-[var(--deframe-widget-size-gap-xs)]", children: errorTitle }),
|
|
5563
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[color:var(--deframe-widget-color-text-primary)] [font-size:var(--deframe-widget-font-size-sm)] font-[var(--deframe-widget-font-family)]", children: errorMessage })
|
|
5564
|
+
] })
|
|
5565
|
+
] }) });
|
|
5566
|
+
var EarnPositionCardView = ({
|
|
5567
|
+
balanceUSD,
|
|
5568
|
+
balanceToken,
|
|
5569
|
+
icon,
|
|
5570
|
+
iconAlt
|
|
5571
|
+
}) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[var(--deframe-widget-size-padding-x-md)]", children: /* @__PURE__ */ jsxRuntime.jsx(SectionCard, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-start", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)]", children: [
|
|
5572
|
+
icon && /* @__PURE__ */ jsxRuntime.jsx(
|
|
5573
|
+
"img",
|
|
5574
|
+
{
|
|
5575
|
+
src: icon,
|
|
5576
|
+
alt: iconAlt,
|
|
5577
|
+
className: "w-6 h-6 rounded-full"
|
|
5578
|
+
}
|
|
5579
|
+
),
|
|
5580
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
|
|
5581
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "[font-size:var(--deframe-widget-font-size-xxl)] [font-weight:var(--deframe-widget-font-weight-extrabold)] text-[color:var(--deframe-widget-color-text-secondary)]", children: balanceUSD }),
|
|
5582
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-tertiary)]", children: balanceToken })
|
|
5583
|
+
] })
|
|
5584
|
+
] }) }) }) });
|
|
5585
|
+
var EarnDepositFormView = ({
|
|
5586
|
+
// Header / Layout
|
|
5587
|
+
headerTitle,
|
|
5588
|
+
onBack,
|
|
5589
|
+
progress,
|
|
5590
|
+
pageTitle,
|
|
5591
|
+
subtitle,
|
|
5592
|
+
onSubmit,
|
|
5593
|
+
// Token selector
|
|
5594
|
+
selectedToken,
|
|
5595
|
+
onTokenClick,
|
|
5596
|
+
isLoadingToken,
|
|
5597
|
+
selectTokenLabel,
|
|
5598
|
+
// Chain selector
|
|
5599
|
+
chainLabel,
|
|
5600
|
+
chainImage,
|
|
5601
|
+
chainDirectionLabel,
|
|
5602
|
+
chainDisabledTitle,
|
|
5603
|
+
// Amount input
|
|
5604
|
+
amountValue,
|
|
5605
|
+
onAmountChange,
|
|
5606
|
+
amountAriaLabel,
|
|
5607
|
+
dollarAmountFormatted,
|
|
5608
|
+
availableBalanceFormatted,
|
|
5609
|
+
// No balance notification
|
|
5610
|
+
showNoBalanceNotification,
|
|
5611
|
+
noBalancePrompt,
|
|
5612
|
+
goToSwapLabel,
|
|
5613
|
+
onGoToSwap,
|
|
5614
|
+
// Percentage buttons
|
|
5615
|
+
onPercentageClick,
|
|
5616
|
+
maxLabel,
|
|
5617
|
+
// TX status
|
|
5618
|
+
showTxStatus,
|
|
5619
|
+
txStatusLabel,
|
|
5620
|
+
isTxProcessing,
|
|
5621
|
+
isTxSuccess,
|
|
5622
|
+
isTxError,
|
|
5623
|
+
txSuccessMessage,
|
|
5624
|
+
txErrorMessage,
|
|
5625
|
+
// Bytecode error
|
|
5626
|
+
bytecodeErrorMessage,
|
|
5627
|
+
transactionErrorLabel,
|
|
5628
|
+
// Quote details
|
|
5629
|
+
isQuoteValid,
|
|
5630
|
+
isFetchingQuote,
|
|
5631
|
+
quoteDetails,
|
|
5632
|
+
// Submit button
|
|
5633
|
+
submitDisabled,
|
|
5634
|
+
submitButtonText
|
|
5635
|
+
}) => /* @__PURE__ */ jsxRuntime.jsxs(BackgroundContainer, { children: [
|
|
5636
|
+
/* @__PURE__ */ jsxRuntime.jsx(DetailsHeader, { title: headerTitle, onBack }),
|
|
5637
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-md)] text-[color:var(--deframe-widget-color-text-secondary)] pb-[var(--deframe-widget-size-padding-y-md)]", children: [
|
|
5638
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full px-[var(--deframe-widget-size-padding-x-md)]", children: /* @__PURE__ */ jsxRuntime.jsx(ProgressIndicator, { progress }) }),
|
|
5639
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)] px-[var(--deframe-widget-size-padding-x-md)]", children: [
|
|
5640
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h5", children: pageTitle }),
|
|
5641
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: subtitle })
|
|
5642
|
+
] }),
|
|
5643
|
+
/* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit, children: [
|
|
5644
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[var(--deframe-widget-size-padding-x-md)]", children: /* @__PURE__ */ jsxRuntime.jsx(SectionCard, { className: "focus-within:bg-[var(--deframe-widget-color-bg-tertiary)] transition-colors", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-[var(--deframe-widget-size-gap-md)]", children: [
|
|
5645
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5646
|
+
EarnTokenSelectorView,
|
|
5647
|
+
{
|
|
5648
|
+
selectedToken,
|
|
5649
|
+
onTokenClick,
|
|
5650
|
+
isLoading: isLoadingToken,
|
|
5651
|
+
selectTokenLabel,
|
|
5652
|
+
chainLabel,
|
|
5653
|
+
chainImage,
|
|
5654
|
+
chainDirectionLabel,
|
|
5655
|
+
chainDisabledTitle
|
|
5656
|
+
}
|
|
5657
|
+
),
|
|
5658
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5659
|
+
EarnAmountInputView,
|
|
5660
|
+
{
|
|
5661
|
+
value: amountValue,
|
|
5662
|
+
onChange: onAmountChange,
|
|
5663
|
+
ariaLabel: amountAriaLabel,
|
|
5664
|
+
dollarAmountFormatted,
|
|
5665
|
+
availableBalanceFormatted
|
|
5666
|
+
}
|
|
5667
|
+
)
|
|
5668
|
+
] }) }) }),
|
|
5669
|
+
showNoBalanceNotification && /* @__PURE__ */ jsxRuntime.jsx(
|
|
5670
|
+
EarnNoBalanceNotificationView,
|
|
5671
|
+
{
|
|
5672
|
+
prompt: noBalancePrompt,
|
|
5673
|
+
actionLabel: goToSwapLabel,
|
|
5674
|
+
onAction: onGoToSwap
|
|
5675
|
+
}
|
|
5676
|
+
),
|
|
5677
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5678
|
+
EarnPercentageButtonsView,
|
|
5679
|
+
{
|
|
5680
|
+
onPercentageClick,
|
|
5681
|
+
maxLabel
|
|
5682
|
+
}
|
|
5683
|
+
),
|
|
5684
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-md)] px-[var(--deframe-widget-size-padding-x-md)] pb-[var(--deframe-widget-size-padding-y-xl)] mt-[var(--deframe-widget-size-gap-md)]", children: [
|
|
5685
|
+
showTxStatus && /* @__PURE__ */ jsxRuntime.jsx(
|
|
5686
|
+
EarnTxStatusCardView,
|
|
5687
|
+
{
|
|
5688
|
+
statusLabel: txStatusLabel,
|
|
5689
|
+
isProcessing: isTxProcessing,
|
|
5690
|
+
successMessage: isTxSuccess ? txSuccessMessage : void 0,
|
|
5691
|
+
errorMessage: isTxError ? txErrorMessage : void 0
|
|
5692
|
+
}
|
|
5693
|
+
),
|
|
5694
|
+
bytecodeErrorMessage && /* @__PURE__ */ jsxRuntime.jsx(
|
|
5695
|
+
EarnBytecodeErrorView,
|
|
5696
|
+
{
|
|
5697
|
+
errorTitle: transactionErrorLabel,
|
|
5698
|
+
errorMessage: bytecodeErrorMessage
|
|
5699
|
+
}
|
|
5700
|
+
),
|
|
5701
|
+
isQuoteValid && !isFetchingQuote && !bytecodeErrorMessage && /* @__PURE__ */ jsxRuntime.jsx(SectionCard, { children: quoteDetails.map((detail, idx) => /* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { borderBottom: detail.borderBottom, children: [
|
|
5702
|
+
/* @__PURE__ */ jsxRuntime.jsx(InfoLabel, { children: detail.label }),
|
|
5703
|
+
/* @__PURE__ */ jsxRuntime.jsx(InfoValue, { children: detail.value })
|
|
5704
|
+
] }, `${detail.label}-${idx}`)) })
|
|
5705
|
+
] }),
|
|
5706
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-[var(--deframe-widget-size-padding-y-md)] px-[var(--deframe-widget-size-padding-x-md)] w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
5707
|
+
PrimaryButton,
|
|
5708
|
+
{
|
|
5709
|
+
type: "submit",
|
|
5710
|
+
className: "w-full text-[#252050]",
|
|
5711
|
+
disabled: submitDisabled,
|
|
5712
|
+
"aria-disabled": submitDisabled,
|
|
5713
|
+
children: submitButtonText
|
|
5714
|
+
}
|
|
5715
|
+
) })
|
|
5716
|
+
] })
|
|
5717
|
+
] }) })
|
|
5718
|
+
] });
|
|
5719
|
+
var EarnWithdrawFormView = ({
|
|
5720
|
+
// Header / Layout
|
|
5721
|
+
headerTitle,
|
|
5722
|
+
onBack,
|
|
5723
|
+
progress,
|
|
5724
|
+
pageTitle,
|
|
5725
|
+
subtitle,
|
|
5726
|
+
onSubmit,
|
|
5727
|
+
// Position card
|
|
5728
|
+
positionBalanceUSD,
|
|
5729
|
+
positionBalanceToken,
|
|
5730
|
+
strategyIcon,
|
|
5731
|
+
strategyName,
|
|
5732
|
+
// Token selector
|
|
5733
|
+
selectedToken,
|
|
5734
|
+
onTokenClick,
|
|
5735
|
+
selectTokenLabel,
|
|
5736
|
+
// Chain selector
|
|
5737
|
+
chainLabel,
|
|
5738
|
+
chainImage,
|
|
5739
|
+
chainDirectionLabel,
|
|
5740
|
+
chainDisabledTitle,
|
|
5741
|
+
// Amount input
|
|
5742
|
+
amountValue,
|
|
5743
|
+
onAmountChange,
|
|
5744
|
+
amountAriaLabel,
|
|
5745
|
+
dollarAmountFormatted,
|
|
5746
|
+
// Percentage buttons
|
|
5747
|
+
onPercentageClick,
|
|
5748
|
+
maxLabel,
|
|
5749
|
+
// TX status
|
|
5750
|
+
showTxStatus,
|
|
5751
|
+
txStatusLabel,
|
|
5752
|
+
isTxProcessing,
|
|
5753
|
+
isTxSuccess,
|
|
5754
|
+
isTxError,
|
|
5755
|
+
txSuccessMessage,
|
|
5756
|
+
txErrorMessage,
|
|
5757
|
+
// Bytecode error
|
|
5758
|
+
bytecodeErrorMessage,
|
|
5759
|
+
transactionErrorLabel,
|
|
5760
|
+
// Quote details
|
|
5761
|
+
isQuoteValid,
|
|
5762
|
+
isFetchingQuote,
|
|
5763
|
+
summaryTitle,
|
|
5764
|
+
summaryItems,
|
|
5765
|
+
// Submit button
|
|
5766
|
+
submitDisabled,
|
|
5767
|
+
submitButtonText
|
|
5768
|
+
}) => /* @__PURE__ */ jsxRuntime.jsxs(BackgroundContainer, { children: [
|
|
5769
|
+
/* @__PURE__ */ jsxRuntime.jsx(DetailsHeader, { title: headerTitle, onBack }),
|
|
5770
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-md)] text-[color:var(--deframe-widget-color-text-secondary)] pb-[var(--deframe-widget-size-padding-y-md)]", children: [
|
|
5771
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full px-[var(--deframe-widget-size-padding-x-md)]", children: /* @__PURE__ */ jsxRuntime.jsx(ProgressIndicator, { progress }) }),
|
|
5772
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)] px-[var(--deframe-widget-size-padding-x-md)]", children: [
|
|
5773
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h5", children: pageTitle }),
|
|
5774
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: subtitle })
|
|
5775
|
+
] }),
|
|
5776
|
+
/* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit, children: [
|
|
5777
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5778
|
+
EarnPositionCardView,
|
|
5779
|
+
{
|
|
5780
|
+
balanceUSD: positionBalanceUSD,
|
|
5781
|
+
balanceToken: positionBalanceToken,
|
|
5782
|
+
icon: strategyIcon,
|
|
5783
|
+
iconAlt: strategyName
|
|
5784
|
+
}
|
|
5785
|
+
),
|
|
5786
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[var(--deframe-widget-size-padding-x-md)] mt-[var(--deframe-widget-size-gap-sm)]", children: /* @__PURE__ */ jsxRuntime.jsx(SectionCard, { className: "focus-within:bg-[var(--deframe-widget-color-bg-tertiary)] transition-colors", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-[var(--deframe-widget-size-gap-md)]", children: [
|
|
5787
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5788
|
+
EarnWithdrawTokenSelectorView,
|
|
5789
|
+
{
|
|
5790
|
+
selectedToken,
|
|
5791
|
+
onTokenClick,
|
|
5792
|
+
selectTokenLabel,
|
|
5793
|
+
chainLabel,
|
|
5794
|
+
chainImage,
|
|
5795
|
+
chainDirectionLabel,
|
|
5796
|
+
chainDisabledTitle
|
|
5797
|
+
}
|
|
5798
|
+
),
|
|
5799
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5800
|
+
EarnAmountInputView,
|
|
5801
|
+
{
|
|
5802
|
+
value: amountValue,
|
|
5803
|
+
onChange: onAmountChange,
|
|
5804
|
+
ariaLabel: amountAriaLabel,
|
|
5805
|
+
dollarAmountFormatted
|
|
5806
|
+
}
|
|
5807
|
+
)
|
|
5808
|
+
] }) }) }),
|
|
5809
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5810
|
+
EarnPercentageButtonsView,
|
|
5811
|
+
{
|
|
5812
|
+
onPercentageClick,
|
|
5813
|
+
maxLabel
|
|
5814
|
+
}
|
|
5815
|
+
),
|
|
5816
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-md)] px-[var(--deframe-widget-size-padding-x-md)] pb-[var(--deframe-widget-size-padding-y-xl)] mt-[var(--deframe-widget-size-gap-md)]", children: [
|
|
5817
|
+
showTxStatus && /* @__PURE__ */ jsxRuntime.jsx(
|
|
5818
|
+
EarnTxStatusCardView,
|
|
5819
|
+
{
|
|
5820
|
+
statusLabel: txStatusLabel,
|
|
5821
|
+
isProcessing: isTxProcessing,
|
|
5822
|
+
successMessage: isTxSuccess ? txSuccessMessage : void 0,
|
|
5823
|
+
errorMessage: isTxError ? txErrorMessage : void 0
|
|
5824
|
+
}
|
|
5825
|
+
),
|
|
5826
|
+
bytecodeErrorMessage && /* @__PURE__ */ jsxRuntime.jsx(
|
|
5827
|
+
EarnBytecodeErrorView,
|
|
5828
|
+
{
|
|
5829
|
+
errorTitle: transactionErrorLabel,
|
|
5830
|
+
errorMessage: bytecodeErrorMessage
|
|
5831
|
+
}
|
|
5832
|
+
),
|
|
5833
|
+
isQuoteValid && !isFetchingQuote && !bytecodeErrorMessage && /* @__PURE__ */ jsxRuntime.jsx(
|
|
5834
|
+
SummaryDetails,
|
|
5835
|
+
{
|
|
5836
|
+
title: summaryTitle,
|
|
5837
|
+
items: summaryItems,
|
|
5838
|
+
defaultOpen: false,
|
|
5839
|
+
className: "bg-[var(--deframe-widget-color-bg-secondary)]"
|
|
5840
|
+
}
|
|
5841
|
+
)
|
|
5842
|
+
] }),
|
|
5843
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-[var(--deframe-widget-size-padding-y-md)] px-[var(--deframe-widget-size-padding-x-md)] w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
5844
|
+
PrimaryButton,
|
|
5845
|
+
{
|
|
5846
|
+
type: "submit",
|
|
5847
|
+
className: "w-full",
|
|
5848
|
+
disabled: submitDisabled,
|
|
5849
|
+
"aria-disabled": submitDisabled,
|
|
5850
|
+
children: submitButtonText
|
|
5851
|
+
}
|
|
5852
|
+
) })
|
|
5853
|
+
] })
|
|
5854
|
+
] }) })
|
|
5855
|
+
] });
|
|
5856
|
+
var EarnDepositProcessingView = ({
|
|
5857
|
+
progress,
|
|
5858
|
+
title,
|
|
5859
|
+
descriptionPrefix,
|
|
5860
|
+
activityHistoryText,
|
|
5861
|
+
onGoToHistory,
|
|
5862
|
+
onBack,
|
|
5863
|
+
strategyName,
|
|
5864
|
+
apyLabel,
|
|
5865
|
+
apyValue,
|
|
5866
|
+
iconSrc,
|
|
5867
|
+
iconAlt,
|
|
5868
|
+
amountUSD,
|
|
5869
|
+
amountToken,
|
|
5870
|
+
transactionSteps,
|
|
5871
|
+
processingDetailsLabels
|
|
5872
|
+
}) => {
|
|
5873
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
5874
|
+
TransactionScreen,
|
|
5875
|
+
{
|
|
5876
|
+
progress,
|
|
5877
|
+
iconType: "processing",
|
|
5878
|
+
title,
|
|
5879
|
+
description: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
5880
|
+
descriptionPrefix,
|
|
5881
|
+
" ",
|
|
5882
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5883
|
+
"span",
|
|
5884
|
+
{
|
|
5885
|
+
className: "[font-weight:var(--deframe-widget-font-weight-semibold)] underline underline-offset-2 cursor-pointer text-[color:var(--deframe-widget-color-brand-primary)]",
|
|
5886
|
+
onClick: onGoToHistory,
|
|
5887
|
+
children: activityHistoryText
|
|
5888
|
+
}
|
|
5889
|
+
)
|
|
5890
|
+
] }),
|
|
5891
|
+
onBack,
|
|
5892
|
+
children: [
|
|
5893
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5894
|
+
TransactionScreenInvestmentCard,
|
|
5895
|
+
{
|
|
5896
|
+
strategyName,
|
|
5897
|
+
apyLabel,
|
|
5898
|
+
apyValue,
|
|
5899
|
+
iconSrc,
|
|
5900
|
+
iconAlt,
|
|
5901
|
+
amountUSD,
|
|
5902
|
+
amountToken
|
|
5903
|
+
}
|
|
5904
|
+
),
|
|
5905
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5906
|
+
TransactionProcessingDetails,
|
|
5907
|
+
{
|
|
5908
|
+
steps: transactionSteps,
|
|
5909
|
+
defaultOpen: true,
|
|
5910
|
+
className: "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-primary)]",
|
|
5911
|
+
labels: processingDetailsLabels
|
|
5912
|
+
}
|
|
5913
|
+
)
|
|
5914
|
+
]
|
|
5915
|
+
}
|
|
5916
|
+
);
|
|
5917
|
+
};
|
|
5918
|
+
var EarnDepositSuccessView = ({
|
|
5919
|
+
title,
|
|
5920
|
+
descriptionPrefix,
|
|
5921
|
+
formattedAmount,
|
|
5922
|
+
tokenSymbol,
|
|
5923
|
+
descriptionSuffix,
|
|
5924
|
+
descriptionLinkText,
|
|
5925
|
+
onClose,
|
|
5926
|
+
exploreMoreLabel,
|
|
5927
|
+
strategyName,
|
|
5928
|
+
apyLabel,
|
|
5929
|
+
apyValue,
|
|
5930
|
+
iconSrc,
|
|
5931
|
+
iconAlt,
|
|
5932
|
+
amountUSD,
|
|
5933
|
+
amountToken,
|
|
5934
|
+
transactionSteps,
|
|
5935
|
+
processingDetailsLabels
|
|
5936
|
+
}) => {
|
|
5937
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
5938
|
+
TransactionScreen,
|
|
5939
|
+
{
|
|
5940
|
+
progress: 100,
|
|
5941
|
+
iconType: "success",
|
|
5942
|
+
title,
|
|
5943
|
+
description: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
5944
|
+
descriptionPrefix,
|
|
5945
|
+
/* @__PURE__ */ jsxRuntime.jsxs("strong", { className: "[font-weight:var(--deframe-widget-font-weight-semibold)]", children: [
|
|
5946
|
+
" ",
|
|
5947
|
+
formattedAmount,
|
|
5948
|
+
" ",
|
|
5949
|
+
tokenSymbol,
|
|
5950
|
+
" "
|
|
5951
|
+
] }),
|
|
5952
|
+
descriptionSuffix,
|
|
5953
|
+
" ",
|
|
5954
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5955
|
+
"strong",
|
|
5956
|
+
{
|
|
5957
|
+
className: "[font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-brand-primary)] cursor-pointer",
|
|
5958
|
+
onClick: onClose,
|
|
5959
|
+
children: descriptionLinkText
|
|
5960
|
+
}
|
|
5961
|
+
)
|
|
5962
|
+
] }),
|
|
5963
|
+
onClose,
|
|
5964
|
+
actions: /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { className: "w-full", onClick: onClose, children: exploreMoreLabel }),
|
|
5965
|
+
children: [
|
|
5966
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5967
|
+
TransactionScreenInvestmentCard,
|
|
5968
|
+
{
|
|
5969
|
+
strategyName,
|
|
5970
|
+
apyLabel,
|
|
5971
|
+
apyValue,
|
|
5972
|
+
iconSrc,
|
|
5973
|
+
iconAlt,
|
|
5974
|
+
amountUSD,
|
|
5975
|
+
amountToken
|
|
5976
|
+
}
|
|
5977
|
+
),
|
|
5978
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5979
|
+
TransactionProcessingDetails,
|
|
5980
|
+
{
|
|
5981
|
+
steps: transactionSteps,
|
|
5982
|
+
defaultOpen: true,
|
|
5983
|
+
className: "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-primary)]",
|
|
5984
|
+
labels: processingDetailsLabels
|
|
5985
|
+
}
|
|
5986
|
+
)
|
|
5987
|
+
]
|
|
5988
|
+
}
|
|
5989
|
+
);
|
|
5990
|
+
};
|
|
5991
|
+
var EarnDepositWarningView = ({
|
|
5992
|
+
progress,
|
|
5993
|
+
title,
|
|
5994
|
+
description,
|
|
5995
|
+
backTitle,
|
|
5996
|
+
onBack,
|
|
5997
|
+
cancelLabel,
|
|
5998
|
+
onCancel,
|
|
5999
|
+
retryLabel,
|
|
6000
|
+
onRetry,
|
|
6001
|
+
strategyName,
|
|
6002
|
+
apyLabel,
|
|
6003
|
+
apyValue,
|
|
6004
|
+
iconSrc,
|
|
6005
|
+
iconAlt,
|
|
6006
|
+
amountUSD,
|
|
6007
|
+
amountToken,
|
|
6008
|
+
transactionSteps,
|
|
6009
|
+
processingDetailsLabels
|
|
6010
|
+
}) => {
|
|
6011
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
6012
|
+
TransactionScreen,
|
|
6013
|
+
{
|
|
6014
|
+
progress,
|
|
6015
|
+
iconType: "warning",
|
|
6016
|
+
title,
|
|
6017
|
+
description,
|
|
6018
|
+
onBack,
|
|
6019
|
+
backTitle,
|
|
6020
|
+
actions: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] w-full", children: [
|
|
6021
|
+
/* @__PURE__ */ jsxRuntime.jsx(SecondaryButton, { className: "flex-1", onClick: onCancel, children: cancelLabel }),
|
|
6022
|
+
/* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { className: "flex-1", onClick: onRetry, children: retryLabel })
|
|
6023
|
+
] }),
|
|
6024
|
+
children: [
|
|
6025
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
6026
|
+
TransactionScreenInvestmentCard,
|
|
6027
|
+
{
|
|
6028
|
+
strategyName,
|
|
6029
|
+
apyLabel,
|
|
6030
|
+
apyValue,
|
|
6031
|
+
iconSrc,
|
|
6032
|
+
iconAlt,
|
|
6033
|
+
amountUSD,
|
|
6034
|
+
amountToken
|
|
6035
|
+
}
|
|
6036
|
+
),
|
|
6037
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
6038
|
+
TransactionProcessingDetails,
|
|
6039
|
+
{
|
|
6040
|
+
steps: transactionSteps,
|
|
6041
|
+
defaultOpen: true,
|
|
6042
|
+
className: "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-primary)]",
|
|
6043
|
+
labels: processingDetailsLabels
|
|
6044
|
+
}
|
|
6045
|
+
)
|
|
6046
|
+
]
|
|
6047
|
+
}
|
|
6048
|
+
);
|
|
6049
|
+
};
|
|
6050
|
+
var EarnDepositFailedView = ({
|
|
6051
|
+
progress,
|
|
6052
|
+
title,
|
|
6053
|
+
description,
|
|
6054
|
+
backTitle,
|
|
6055
|
+
onBack,
|
|
6056
|
+
viewExplorerLabel,
|
|
6057
|
+
onViewExplorer,
|
|
6058
|
+
viewExplorerDisabled,
|
|
6059
|
+
retryLabel,
|
|
6060
|
+
onRetry,
|
|
6061
|
+
strategyName,
|
|
6062
|
+
apyLabel,
|
|
6063
|
+
apyValue,
|
|
6064
|
+
iconSrc,
|
|
6065
|
+
iconAlt,
|
|
6066
|
+
iconGradient,
|
|
6067
|
+
amountUSD,
|
|
6068
|
+
amountToken,
|
|
6069
|
+
transactionSteps,
|
|
6070
|
+
processingDetailsLabels
|
|
6071
|
+
}) => {
|
|
6072
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
6073
|
+
TransactionScreen,
|
|
6074
|
+
{
|
|
6075
|
+
progress,
|
|
6076
|
+
iconType: "warning",
|
|
6077
|
+
iconGradient,
|
|
6078
|
+
title,
|
|
6079
|
+
description,
|
|
6080
|
+
onBack,
|
|
6081
|
+
backTitle,
|
|
6082
|
+
actions: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] w-full", children: [
|
|
6083
|
+
/* @__PURE__ */ jsxRuntime.jsx(SecondaryButton, { className: "flex-1", onClick: onViewExplorer, disabled: viewExplorerDisabled, children: viewExplorerLabel }),
|
|
6084
|
+
/* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { className: "flex-1", onClick: onRetry, children: retryLabel })
|
|
6085
|
+
] }),
|
|
6086
|
+
children: [
|
|
6087
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
6088
|
+
TransactionScreenInvestmentCard,
|
|
6089
|
+
{
|
|
6090
|
+
strategyName,
|
|
6091
|
+
apyLabel,
|
|
6092
|
+
apyValue,
|
|
6093
|
+
iconSrc,
|
|
6094
|
+
iconAlt,
|
|
6095
|
+
amountUSD,
|
|
6096
|
+
amountToken
|
|
6097
|
+
}
|
|
6098
|
+
),
|
|
6099
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
6100
|
+
TransactionProcessingDetails,
|
|
6101
|
+
{
|
|
6102
|
+
steps: transactionSteps,
|
|
6103
|
+
defaultOpen: true,
|
|
6104
|
+
className: "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-primary)]",
|
|
6105
|
+
labels: processingDetailsLabels
|
|
6106
|
+
}
|
|
6107
|
+
)
|
|
6108
|
+
]
|
|
6109
|
+
}
|
|
6110
|
+
);
|
|
6111
|
+
};
|
|
6112
|
+
var EarnWithdrawProcessingView = ({
|
|
6113
|
+
progress,
|
|
6114
|
+
title,
|
|
6115
|
+
descriptionPrefix,
|
|
6116
|
+
activityHistoryText,
|
|
6117
|
+
descriptionSuffix,
|
|
6118
|
+
onGoToHistory,
|
|
6119
|
+
onBack,
|
|
6120
|
+
strategyName,
|
|
6121
|
+
apyLabel,
|
|
6122
|
+
apyValue,
|
|
6123
|
+
iconSrc,
|
|
6124
|
+
iconAlt,
|
|
6125
|
+
amountUSD,
|
|
6126
|
+
amountToken,
|
|
6127
|
+
transactionSteps,
|
|
6128
|
+
processingDetailsLabels
|
|
6129
|
+
}) => {
|
|
6130
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
6131
|
+
TransactionScreen,
|
|
6132
|
+
{
|
|
6133
|
+
progress,
|
|
6134
|
+
iconType: "processing",
|
|
6135
|
+
title,
|
|
6136
|
+
description: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
6137
|
+
descriptionPrefix,
|
|
6138
|
+
" ",
|
|
6139
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
6140
|
+
"span",
|
|
6141
|
+
{
|
|
6142
|
+
className: "[font-weight:var(--deframe-widget-font-weight-semibold)] underline underline-offset-2 cursor-pointer text-[color:var(--deframe-widget-color-brand-primary)]",
|
|
6143
|
+
onClick: onGoToHistory,
|
|
6144
|
+
children: activityHistoryText
|
|
6145
|
+
}
|
|
6146
|
+
),
|
|
6147
|
+
" ",
|
|
6148
|
+
descriptionSuffix
|
|
6149
|
+
] }),
|
|
6150
|
+
onBack,
|
|
6151
|
+
children: [
|
|
6152
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
6153
|
+
TransactionScreenInvestmentCard,
|
|
6154
|
+
{
|
|
6155
|
+
strategyName,
|
|
6156
|
+
apyLabel,
|
|
6157
|
+
apyValue,
|
|
6158
|
+
iconSrc,
|
|
6159
|
+
iconAlt,
|
|
6160
|
+
amountUSD,
|
|
6161
|
+
amountToken
|
|
6162
|
+
}
|
|
6163
|
+
),
|
|
6164
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
6165
|
+
TransactionProcessingDetails,
|
|
6166
|
+
{
|
|
6167
|
+
steps: transactionSteps,
|
|
6168
|
+
defaultOpen: true,
|
|
6169
|
+
className: "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-primary)]",
|
|
6170
|
+
labels: processingDetailsLabels
|
|
6171
|
+
}
|
|
6172
|
+
)
|
|
6173
|
+
]
|
|
6174
|
+
}
|
|
6175
|
+
);
|
|
6176
|
+
};
|
|
6177
|
+
var EarnWithdrawSuccessView = ({
|
|
6178
|
+
title,
|
|
6179
|
+
descriptionPrefix,
|
|
6180
|
+
formattedAmount,
|
|
6181
|
+
tokenSymbol,
|
|
6182
|
+
descriptionSuffix,
|
|
6183
|
+
descriptionLinkText,
|
|
6184
|
+
onClose,
|
|
6185
|
+
exploreMoreLabel,
|
|
6186
|
+
strategyName,
|
|
6187
|
+
apyLabel,
|
|
6188
|
+
apyValue,
|
|
6189
|
+
iconSrc,
|
|
6190
|
+
iconAlt,
|
|
6191
|
+
amountUSD,
|
|
6192
|
+
amountToken,
|
|
6193
|
+
transactionSteps,
|
|
6194
|
+
processingDetailsLabels
|
|
6195
|
+
}) => {
|
|
6196
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
6197
|
+
TransactionScreen,
|
|
6198
|
+
{
|
|
6199
|
+
progress: 100,
|
|
6200
|
+
iconType: "success",
|
|
6201
|
+
title,
|
|
6202
|
+
description: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
6203
|
+
descriptionPrefix,
|
|
6204
|
+
/* @__PURE__ */ jsxRuntime.jsxs("strong", { className: "[font-weight:var(--deframe-widget-font-weight-semibold)]", children: [
|
|
6205
|
+
" ",
|
|
6206
|
+
formattedAmount,
|
|
6207
|
+
" ",
|
|
6208
|
+
tokenSymbol,
|
|
6209
|
+
" "
|
|
6210
|
+
] }),
|
|
6211
|
+
descriptionSuffix,
|
|
6212
|
+
" ",
|
|
6213
|
+
/* @__PURE__ */ jsxRuntime.jsx("strong", { className: "[font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-brand-primary)]", children: descriptionLinkText })
|
|
6214
|
+
] }),
|
|
6215
|
+
onClose,
|
|
6216
|
+
actions: /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { className: "w-full", onClick: onClose, children: exploreMoreLabel }),
|
|
6217
|
+
children: [
|
|
6218
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
6219
|
+
TransactionScreenInvestmentCard,
|
|
6220
|
+
{
|
|
6221
|
+
strategyName,
|
|
6222
|
+
apyLabel,
|
|
6223
|
+
apyValue,
|
|
6224
|
+
iconSrc,
|
|
6225
|
+
iconAlt,
|
|
6226
|
+
amountUSD,
|
|
6227
|
+
amountToken
|
|
6228
|
+
}
|
|
6229
|
+
),
|
|
6230
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
6231
|
+
TransactionProcessingDetails,
|
|
6232
|
+
{
|
|
6233
|
+
steps: transactionSteps,
|
|
6234
|
+
defaultOpen: true,
|
|
6235
|
+
className: "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-primary)]",
|
|
6236
|
+
labels: processingDetailsLabels
|
|
6237
|
+
}
|
|
6238
|
+
)
|
|
6239
|
+
]
|
|
6240
|
+
}
|
|
6241
|
+
);
|
|
6242
|
+
};
|
|
6243
|
+
var EarnWithdrawWarningView = ({
|
|
6244
|
+
progress,
|
|
6245
|
+
title,
|
|
6246
|
+
description,
|
|
6247
|
+
backTitle,
|
|
6248
|
+
onBack,
|
|
6249
|
+
cancelLabel,
|
|
6250
|
+
onCancel,
|
|
6251
|
+
retryLabel,
|
|
6252
|
+
onRetry,
|
|
6253
|
+
strategyName,
|
|
6254
|
+
apyLabel,
|
|
6255
|
+
apyValue,
|
|
6256
|
+
iconSrc,
|
|
6257
|
+
iconAlt,
|
|
6258
|
+
amountUSD,
|
|
6259
|
+
amountToken,
|
|
6260
|
+
transactionSteps,
|
|
6261
|
+
processingDetailsLabels
|
|
6262
|
+
}) => {
|
|
6263
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
6264
|
+
TransactionScreen,
|
|
6265
|
+
{
|
|
6266
|
+
progress,
|
|
6267
|
+
iconType: "warning",
|
|
6268
|
+
title,
|
|
6269
|
+
description,
|
|
6270
|
+
onBack,
|
|
6271
|
+
backTitle,
|
|
6272
|
+
actions: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] w-full", children: [
|
|
6273
|
+
/* @__PURE__ */ jsxRuntime.jsx(SecondaryButton, { className: "flex-1", onClick: onCancel, children: cancelLabel }),
|
|
6274
|
+
/* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { className: "flex-1", onClick: onRetry, children: retryLabel })
|
|
6275
|
+
] }),
|
|
6276
|
+
children: [
|
|
6277
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
6278
|
+
TransactionScreenInvestmentCard,
|
|
6279
|
+
{
|
|
6280
|
+
strategyName,
|
|
6281
|
+
apyLabel,
|
|
6282
|
+
apyValue,
|
|
6283
|
+
iconSrc,
|
|
6284
|
+
iconAlt,
|
|
6285
|
+
amountUSD,
|
|
6286
|
+
amountToken
|
|
6287
|
+
}
|
|
6288
|
+
),
|
|
6289
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
6290
|
+
TransactionProcessingDetails,
|
|
6291
|
+
{
|
|
6292
|
+
steps: transactionSteps,
|
|
6293
|
+
defaultOpen: true,
|
|
6294
|
+
className: "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-primary)]",
|
|
6295
|
+
labels: processingDetailsLabels
|
|
6296
|
+
}
|
|
6297
|
+
)
|
|
6298
|
+
]
|
|
6299
|
+
}
|
|
6300
|
+
);
|
|
6301
|
+
};
|
|
6302
|
+
var EarnWithdrawFailedView = ({
|
|
6303
|
+
progress,
|
|
6304
|
+
title,
|
|
6305
|
+
description,
|
|
6306
|
+
backTitle,
|
|
6307
|
+
onBack,
|
|
6308
|
+
viewExplorerLabel,
|
|
6309
|
+
onViewExplorer,
|
|
6310
|
+
viewExplorerDisabled,
|
|
6311
|
+
retryLabel,
|
|
6312
|
+
onRetry,
|
|
6313
|
+
strategyName,
|
|
6314
|
+
apyLabel,
|
|
6315
|
+
apyValue,
|
|
6316
|
+
iconSrc,
|
|
6317
|
+
iconAlt,
|
|
6318
|
+
iconGradient,
|
|
6319
|
+
amountUSD,
|
|
6320
|
+
amountToken,
|
|
6321
|
+
transactionSteps,
|
|
6322
|
+
processingDetailsLabels
|
|
6323
|
+
}) => {
|
|
6324
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
6325
|
+
TransactionScreen,
|
|
6326
|
+
{
|
|
6327
|
+
progress,
|
|
6328
|
+
iconType: "warning",
|
|
6329
|
+
iconGradient,
|
|
6330
|
+
title,
|
|
6331
|
+
description,
|
|
6332
|
+
onBack,
|
|
6333
|
+
backTitle,
|
|
6334
|
+
actions: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] w-full", children: [
|
|
6335
|
+
/* @__PURE__ */ jsxRuntime.jsx(SecondaryButton, { className: "flex-1", onClick: onViewExplorer, disabled: viewExplorerDisabled, children: viewExplorerLabel }),
|
|
6336
|
+
/* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { className: "flex-1", onClick: onRetry, children: retryLabel })
|
|
6337
|
+
] }),
|
|
6338
|
+
children: [
|
|
6339
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
6340
|
+
TransactionScreenInvestmentCard,
|
|
6341
|
+
{
|
|
6342
|
+
strategyName,
|
|
6343
|
+
apyLabel,
|
|
6344
|
+
apyValue,
|
|
6345
|
+
iconSrc,
|
|
6346
|
+
iconAlt,
|
|
6347
|
+
amountUSD,
|
|
6348
|
+
amountToken
|
|
6349
|
+
}
|
|
6350
|
+
),
|
|
6351
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
6352
|
+
TransactionProcessingDetails,
|
|
6353
|
+
{
|
|
6354
|
+
steps: transactionSteps,
|
|
6355
|
+
defaultOpen: true,
|
|
6356
|
+
className: "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-primary)]",
|
|
6357
|
+
labels: processingDetailsLabels
|
|
6358
|
+
}
|
|
6359
|
+
)
|
|
6360
|
+
]
|
|
6361
|
+
}
|
|
6362
|
+
);
|
|
6363
|
+
};
|
|
4115
6364
|
|
|
4116
6365
|
exports.ActionButton = ActionButton;
|
|
4117
6366
|
exports.ActionSheet = ActionSheet;
|
|
4118
6367
|
exports.AddressDisplay = AddressDisplay;
|
|
6368
|
+
exports.ApyRange = ApyRange;
|
|
6369
|
+
exports.BackButton = BackButton;
|
|
4119
6370
|
exports.BackgroundContainer = BackgroundContainer;
|
|
4120
6371
|
exports.BannerNotification = BannerNotification;
|
|
6372
|
+
exports.ChooseANetworkView = ChooseANetworkView;
|
|
4121
6373
|
exports.ChooseAStrategyActionsheetView = ChooseAStrategyActionsheetView;
|
|
4122
6374
|
exports.ChooseAnAssetSwapView = ChooseAnAssetSwapView;
|
|
6375
|
+
exports.CloseButton = CloseButton_default;
|
|
4123
6376
|
exports.CollapsibleInfoRow = CollapsibleInfoRow;
|
|
4124
6377
|
exports.CollapsibleSection = CollapsibleSection;
|
|
4125
6378
|
exports.ConfirmSwapButtonView = ConfirmSwapButtonView;
|
|
@@ -4127,11 +6380,41 @@ exports.ConnectWalletList = ConnectWalletList;
|
|
|
4127
6380
|
exports.Currency = Currency;
|
|
4128
6381
|
exports.DeframeComponentsProvider = DeframeComponentsProvider;
|
|
4129
6382
|
exports.DetailsHeader = DetailsHeader;
|
|
6383
|
+
exports.EarnAmountInputView = EarnAmountInputView;
|
|
6384
|
+
exports.EarnBalanceCard = EarnBalanceCard;
|
|
6385
|
+
exports.EarnBytecodeErrorView = EarnBytecodeErrorView;
|
|
6386
|
+
exports.EarnDepositFailedView = EarnDepositFailedView;
|
|
6387
|
+
exports.EarnDepositFormView = EarnDepositFormView;
|
|
6388
|
+
exports.EarnDepositProcessingView = EarnDepositProcessingView;
|
|
6389
|
+
exports.EarnDepositSuccessView = EarnDepositSuccessView;
|
|
6390
|
+
exports.EarnDepositWarningView = EarnDepositWarningView;
|
|
6391
|
+
exports.EarnDesktopView = EarnDesktopView;
|
|
6392
|
+
exports.EarnExploreGridView = EarnExploreGridView;
|
|
6393
|
+
exports.EarnInvestedSectionView = EarnInvestedSectionView;
|
|
6394
|
+
exports.EarnInvestmentDetailsView = EarnInvestmentDetailsView;
|
|
6395
|
+
exports.EarnInvestmentSummaryView = EarnInvestmentSummaryView;
|
|
6396
|
+
exports.EarnNoBalanceNotificationView = EarnNoBalanceNotificationView;
|
|
6397
|
+
exports.EarnPercentageButtonsView = EarnPercentageButtonsView;
|
|
6398
|
+
exports.EarnPositionCardView = EarnPositionCardView;
|
|
6399
|
+
exports.EarnRecentTransactionsView = EarnRecentTransactionsView;
|
|
6400
|
+
exports.EarnTokenSelectorView = EarnTokenSelectorView;
|
|
6401
|
+
exports.EarnTxStatusCardView = EarnTxStatusCardView;
|
|
6402
|
+
exports.EarnWithdrawFailedView = EarnWithdrawFailedView;
|
|
6403
|
+
exports.EarnWithdrawFormView = EarnWithdrawFormView;
|
|
6404
|
+
exports.EarnWithdrawProcessingView = EarnWithdrawProcessingView;
|
|
6405
|
+
exports.EarnWithdrawSuccessView = EarnWithdrawSuccessView;
|
|
6406
|
+
exports.EarnWithdrawTokenSelectorView = EarnWithdrawTokenSelectorView;
|
|
6407
|
+
exports.EarnWithdrawWarningView = EarnWithdrawWarningView;
|
|
4130
6408
|
exports.Fiat = Currency;
|
|
4131
6409
|
exports.FlexCol = FlexCol;
|
|
4132
6410
|
exports.FlexRow = FlexRow;
|
|
6411
|
+
exports.GroupedStrategyListView = GroupedStrategyListView;
|
|
4133
6412
|
exports.HighRiskBadge = HighRiskBadge;
|
|
4134
6413
|
exports.HistoryDepositDetailsView = HistoryDepositDetailsView;
|
|
6414
|
+
exports.HistoryListSkeleton = HistoryListSkeleton;
|
|
6415
|
+
exports.HistoryListView = HistoryListView;
|
|
6416
|
+
exports.HistorySwapDetailsView = HistorySwapDetailsView;
|
|
6417
|
+
exports.HistoryTabEmpty = HistoryTabEmpty;
|
|
4135
6418
|
exports.HistoryWithdrawDetailsView = HistoryWithdrawDetailsView;
|
|
4136
6419
|
exports.InfoLabel = InfoLabel;
|
|
4137
6420
|
exports.InfoRow = InfoRow;
|
|
@@ -4140,6 +6423,7 @@ exports.InfoRowIconValue = InfoRowIconValue;
|
|
|
4140
6423
|
exports.InfoRowWithIcon = InfoRowWithIcon;
|
|
4141
6424
|
exports.InfoValue = InfoValue;
|
|
4142
6425
|
exports.Input = Input2;
|
|
6426
|
+
exports.Label = Label;
|
|
4143
6427
|
exports.Link = Link;
|
|
4144
6428
|
exports.ListItem = ListItem;
|
|
4145
6429
|
exports.ListItemContent = ListItemContent;
|
|
@@ -4166,6 +6450,7 @@ exports.StepDisplay = StepDisplay;
|
|
|
4166
6450
|
exports.StepStatusIcon = StepStatusIcon;
|
|
4167
6451
|
exports.StepStatusText = StepStatusText;
|
|
4168
6452
|
exports.StrategyDetailsView = StrategyDetailsView;
|
|
6453
|
+
exports.StrategyGridCard = StrategyGridCard;
|
|
4169
6454
|
exports.SummaryDetails = SummaryDetails;
|
|
4170
6455
|
exports.SummaryDetailsCryptoControlV2 = SummaryDetailsCryptoControlV2;
|
|
4171
6456
|
exports.SwapAdvancedSettingsView = SwapAdvancedSettingsView;
|
|
@@ -4173,9 +6458,11 @@ exports.SwapAmountInputView = SwapAmountInputView;
|
|
|
4173
6458
|
exports.SwapCrossChainProcessingView = SwapCrossChainProcessingView;
|
|
4174
6459
|
exports.SwapFormView = SwapFormView;
|
|
4175
6460
|
exports.SwapFromCardView = SwapFromCardView;
|
|
6461
|
+
exports.SwapHistoryView = SwapHistoryView;
|
|
4176
6462
|
exports.SwapNetworkSelectorView = SwapNetworkSelectorView;
|
|
4177
6463
|
exports.SwapOutputAmountView = SwapOutputAmountView;
|
|
4178
6464
|
exports.SwapProcessingView = SwapProcessingView;
|
|
6465
|
+
exports.SwapProcessingViewSimple = SwapProcessingViewSimple;
|
|
4179
6466
|
exports.SwapQuoteBlockchainCostsView = SwapQuoteBlockchainCostsView;
|
|
4180
6467
|
exports.SwapQuoteDetailsView = SwapQuoteDetailsView;
|
|
4181
6468
|
exports.SwapQuoteErrorsView = SwapQuoteErrorsView;
|
|
@@ -4183,9 +6470,12 @@ exports.SwapQuoteHeaderView = SwapQuoteHeaderView;
|
|
|
4183
6470
|
exports.SwapSignatureWarningView = SwapSignatureWarningView;
|
|
4184
6471
|
exports.SwapSlippageToleranceButtonsView = SwapSlippageToleranceButtonsView;
|
|
4185
6472
|
exports.SwapSuccessView = SwapSuccessView;
|
|
6473
|
+
exports.SwapSuccessViewSimple = SwapSuccessViewSimple;
|
|
4186
6474
|
exports.SwapToCardView = SwapToCardView;
|
|
4187
6475
|
exports.SwapTokenSelectorView = SwapTokenSelectorView;
|
|
4188
6476
|
exports.SwapTransactionFailedView = SwapTransactionFailedView;
|
|
6477
|
+
exports.SwapTransactionFailedViewSimple = SwapTransactionFailedViewSimple;
|
|
6478
|
+
exports.SwapWidgetFallbackView = SwapWidgetFallbackView;
|
|
4189
6479
|
exports.Tabs = Tabs;
|
|
4190
6480
|
exports.TabsContent = TabsContent;
|
|
4191
6481
|
exports.TabsList = TabsList;
|
|
@@ -4201,6 +6491,7 @@ exports.TransactionProcessingDetails = TransactionProcessingDetails;
|
|
|
4201
6491
|
exports.TransactionScreen = TransactionScreen;
|
|
4202
6492
|
exports.TransactionScreenIcon = TransactionScreenIcon;
|
|
4203
6493
|
exports.TransactionScreenInvestmentCard = TransactionScreenInvestmentCard;
|
|
6494
|
+
exports.WalletBalances = WalletBalances;
|
|
4204
6495
|
exports.WalletConnectPanel = WalletConnectPanel;
|
|
4205
6496
|
exports.WalletItem = WalletItem;
|
|
4206
6497
|
exports.WalletList = ConnectWalletList;
|