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