@deframe-sdk/components 0.1.13 → 0.1.15

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 } from 'react-icons/hi2';
3
+ import { HiXMark, HiChevronUp, HiChevronDown, HiChevronLeft, HiArrowRight, HiArrowLeft } from 'react-icons/hi2';
4
4
  import * as React6 from 'react';
5
5
  import React6__default, { useState, useEffect } from 'react';
6
6
  import { motion, AnimatePresence } from 'framer-motion';
7
- import { MdClose, MdOutlineSearch, MdOutlineSearchOff, MdOutlineSwapHoriz, MdHistory, MdCheckCircleOutline, MdErrorOutline, MdWarningAmber, MdInfoOutline } from 'react-icons/md';
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;
@@ -167,14 +168,14 @@ function PrimaryButton(_a) {
167
168
  /** enabled state */
168
169
  enabled: [
169
170
  "hover:opacity-90",
170
- "text-[var(--deframe-widget-color-text-primary)]",
171
+ "text-[color:var(--deframe-widget-color-text-inverse)]",
171
172
  "bg-[var(--deframe-widget-color-brand-primary)]",
172
173
  "border-[color:var(--deframe-widget-color-border-primary)]",
173
174
  "cursor-pointer"
174
175
  ].join(" "),
175
176
  /** disabled state */
176
177
  disabled: [
177
- "text-[var(--deframe-widget-color-text-primary-disabled)]",
178
+ "text-[color:var(--deframe-widget-color-text-inverse-disabled)]",
178
179
  "bg-[var(--deframe-widget-color-brand-primary-disabled)]",
179
180
  "border-[color:var(--deframe-widget-color-border-primary-disabled)]",
180
181
  "cursor-not-allowed"
@@ -230,7 +231,7 @@ function SecondaryButton(_a) {
230
231
  ].join(" ");
231
232
  const stateClasses = {
232
233
  enabled: [
233
- "text-[color:var(--deframe-widget-color-brand-secondary)]",
234
+ "text-[color:var(--deframe-widget-color-text-secondary)]",
234
235
  "border-[color:var(--deframe-widget-color-border-secondary)]",
235
236
  "hover:opacity-90",
236
237
  "cursor-pointer"
@@ -290,7 +291,7 @@ function TertiaryButton(_a) {
290
291
  ].join(" ");
291
292
  const stateClasses = {
292
293
  enabled: [
293
- "text-[color:var(--deframe-widget-color-brand-tertiary)]",
294
+ "text-[color:var(--deframe-widget-color-text-tertiary)]",
294
295
  "hover:opacity-90",
295
296
  "cursor-pointer"
296
297
  ].join(" "),
@@ -417,12 +418,12 @@ function Link(_a) {
417
418
  ].join(" ");
418
419
  const stateClasses = {
419
420
  enabled: [
420
- "text-[color:var(--deframe-widget-color-brand-primary)]",
421
+ "text-[color:var(--deframe-widget-color-text-highlight)]",
421
422
  "underline",
422
423
  "cursor-pointer"
423
424
  ].join(" "),
424
425
  disabled: [
425
- "text-[var(--deframe-widget-color-brand-primary-disabled)]",
426
+ "text-[color:var(--deframe-widget-color-text-highlight-disabled)]",
426
427
  "cursor-not-allowed",
427
428
  "pointer-events-none"
428
429
  ].join(" ")
@@ -884,25 +885,35 @@ var Text = React6.forwardRef(
884
885
  var _b = _a, {
885
886
  children,
886
887
  as: Component = "p",
888
+ disabled = false,
887
889
  className = ""
888
890
  } = _b, props = __objRest(_b, [
889
891
  "children",
890
892
  "as",
893
+ "disabled",
891
894
  "className"
892
895
  ]);
893
896
  const baseClasses = [
894
897
  "[font-family:var(--deframe-widget-font-family)]",
895
898
  "[font-size:var(--deframe-widget-font-size-md)]",
896
899
  "[line-height:var(--deframe-widget-font-leading-md)]",
897
- "[font-weight:var(--deframe-widget-font-weight-regular)]",
898
- "text-[color:var(--deframe-widget-color-text-primary)]"
900
+ "[font-weight:var(--deframe-widget-font-weight-regular)]"
899
901
  ].join(" ");
900
- const textClasses = twMerge(baseClasses, className);
902
+ const stateClasses = {
903
+ enabled: "text-[color:var(--deframe-widget-color-text-primary)]",
904
+ disabled: "text-[color:var(--deframe-widget-color-text-primary-disabled)]"
905
+ };
906
+ const textClasses = twMerge(
907
+ baseClasses,
908
+ stateClasses[disabled ? "disabled" : "enabled"],
909
+ className
910
+ );
901
911
  return React6.createElement(
902
912
  Component,
903
913
  __spreadValues({
904
914
  ref,
905
- className: textClasses
915
+ className: textClasses,
916
+ "aria-disabled": disabled || void 0
906
917
  }, props),
907
918
  children
908
919
  );
@@ -915,10 +926,12 @@ var TextAccent = React6.forwardRef(
915
926
  var _b = _a, {
916
927
  as = "span",
917
928
  variant = "accent-medium",
929
+ disabled = false,
918
930
  className = ""
919
931
  } = _b, props = __objRest(_b, [
920
932
  "as",
921
933
  "variant",
934
+ "disabled",
922
935
  "className"
923
936
  ]);
924
937
  const accentVariants = {
@@ -938,8 +951,16 @@ var TextAccent = React6.forwardRef(
938
951
  "[font-weight:var(--deframe-widget-font-weight-semibold)]"
939
952
  ].join(" ")
940
953
  };
954
+ const stateClasses = {
955
+ enabled: "text-[color:var(--deframe-widget-color-text-primary)]",
956
+ disabled: "text-[color:var(--deframe-widget-color-text-primary-disabled)]"
957
+ };
941
958
  const variantClass = accentVariants[variant];
942
- const accentClasses = twMerge(variantClass, className);
959
+ const accentClasses = twMerge(
960
+ variantClass,
961
+ stateClasses[disabled ? "disabled" : "enabled"],
962
+ className
963
+ );
943
964
  return /* @__PURE__ */ jsx(
944
965
  Text_default,
945
966
  __spreadValues({
@@ -947,7 +968,8 @@ var TextAccent = React6.forwardRef(
947
968
  as,
948
969
  className: accentClasses,
949
970
  "data-slot": "text-accent",
950
- "data-test-id": "text-accent"
971
+ "data-test-id": "text-accent",
972
+ "aria-disabled": disabled || void 0
951
973
  }, props)
952
974
  );
953
975
  }
@@ -958,18 +980,15 @@ var TextBody = React6.forwardRef(
958
980
  var _b = _a, {
959
981
  as = "p",
960
982
  variant = "text-medium",
983
+ disabled = false,
961
984
  className = ""
962
985
  } = _b, props = __objRest(_b, [
963
986
  "as",
964
987
  "variant",
988
+ "disabled",
965
989
  "className"
966
990
  ]);
967
991
  const bodyVariants = {
968
- "[font-size:var(--deframe-widget-font-size-lg)] [line-height:var(--deframe-widget-font-leading-lg)]": [
969
- "[font-size:var(--deframe-widget-font-size-lg)]",
970
- "[line-height:var(--deframe-widget-font-leading-lg)]",
971
- "[font-weight:var(--deframe-widget-font-weight-regular)]"
972
- ].join(" "),
973
992
  "text-large": [
974
993
  "[font-size:var(--deframe-widget-font-size-lg)]",
975
994
  "[line-height:var(--deframe-widget-font-leading-lg)]",
@@ -986,8 +1005,16 @@ var TextBody = React6.forwardRef(
986
1005
  "[font-weight:var(--deframe-widget-font-weight-regular)]"
987
1006
  ].join(" ")
988
1007
  };
1008
+ const stateClasses = {
1009
+ enabled: "text-[color:var(--deframe-widget-color-text-primary)]",
1010
+ disabled: "text-[color:var(--deframe-widget-color-text-primary-disabled)]"
1011
+ };
989
1012
  const variantClass = bodyVariants[variant];
990
- const bodyClasses = twMerge(variantClass, className);
1013
+ const bodyClasses = twMerge(
1014
+ variantClass,
1015
+ stateClasses[disabled ? "disabled" : "enabled"],
1016
+ className
1017
+ );
991
1018
  return /* @__PURE__ */ jsx(
992
1019
  Text_default,
993
1020
  __spreadValues({
@@ -995,7 +1022,8 @@ var TextBody = React6.forwardRef(
995
1022
  as,
996
1023
  className: bodyClasses,
997
1024
  "data-slot": "text-body",
998
- "data-test-id": "text-body"
1025
+ "data-test-id": "text-body",
1026
+ "aria-disabled": disabled || void 0
999
1027
  }, props)
1000
1028
  );
1001
1029
  }
@@ -1006,10 +1034,12 @@ var TextHeading = React6.forwardRef(
1006
1034
  var _b = _a, {
1007
1035
  as,
1008
1036
  variant = "h2",
1037
+ disabled = false,
1009
1038
  className = ""
1010
1039
  } = _b, props = __objRest(_b, [
1011
1040
  "as",
1012
1041
  "variant",
1042
+ "disabled",
1013
1043
  "className"
1014
1044
  ]);
1015
1045
  const headingVariants = {
@@ -1044,8 +1074,16 @@ var TextHeading = React6.forwardRef(
1044
1074
  "[font-weight:var(--deframe-widget-font-weight-bold)]"
1045
1075
  ].join(" ")
1046
1076
  };
1077
+ const stateClasses = {
1078
+ enabled: "text-[color:var(--deframe-widget-color-text-primary)]",
1079
+ disabled: "text-[color:var(--deframe-widget-color-text-primary-disabled)]"
1080
+ };
1047
1081
  const variantClass = headingVariants[variant];
1048
- const headingClasses = twMerge(variantClass, className);
1082
+ const headingClasses = twMerge(
1083
+ variantClass,
1084
+ stateClasses[disabled ? "disabled" : "enabled"],
1085
+ className
1086
+ );
1049
1087
  return /* @__PURE__ */ jsx(
1050
1088
  Text_default,
1051
1089
  __spreadValues({
@@ -1053,7 +1091,8 @@ var TextHeading = React6.forwardRef(
1053
1091
  as: variant === "h-large" ? "h1" : variant,
1054
1092
  className: headingClasses,
1055
1093
  "data-slot": "text-heading",
1056
- "data-test-id": "text-heading"
1094
+ "data-test-id": "text-heading",
1095
+ "aria-disabled": disabled || void 0
1057
1096
  }, props)
1058
1097
  );
1059
1098
  }
@@ -1572,7 +1611,7 @@ function BannerNotificationMessage(_a) {
1572
1611
  return /* @__PURE__ */ jsx(
1573
1612
  TextBody,
1574
1613
  __spreadValues({
1575
- variant: "[font-size:var(--deframe-widget-font-size-md)] [line-height:var(--deframe-widget-font-leading-md)]",
1614
+ variant: "text-medium",
1576
1615
  "data-slot": "banner-notification-message",
1577
1616
  "data-test-id": "banner-notification-message",
1578
1617
  className: twMerge("text-inherit", className)
@@ -1878,7 +1917,7 @@ var SummaryDetails = ({
1878
1917
  /* @__PURE__ */ jsx(
1879
1918
  TextBody,
1880
1919
  {
1881
- variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]",
1920
+ variant: "text-small",
1882
1921
  className: twMerge("text-[color:var(--deframe-widget-color-text-tertiary)]", item.labelClassName),
1883
1922
  children: item.label
1884
1923
  }
@@ -1886,7 +1925,7 @@ var SummaryDetails = ({
1886
1925
  typeof item.value === "string" ? /* @__PURE__ */ jsx(
1887
1926
  TextBody,
1888
1927
  {
1889
- variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]",
1928
+ variant: "text-small",
1890
1929
  className: twMerge("text-[color:var(--deframe-widget-color-text-primary)] [font-weight:var(--deframe-widget-font-weight-medium)]", item.valueClassName),
1891
1930
  children: item.value
1892
1931
  }
@@ -2391,6 +2430,7 @@ var TwoLineValue = ({ primary, secondary }) => /* @__PURE__ */ jsxs(HistoryFlexC
2391
2430
  /* @__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 }),
2392
2431
  /* @__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 })
2393
2432
  ] });
2433
+ 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 }) });
2394
2434
  var HistoryDepositDetailsView = ({
2395
2435
  transactionTypeLabel,
2396
2436
  symbol,
@@ -2581,7 +2621,7 @@ var SwapNetworkSelectorView = ({
2581
2621
  }) => {
2582
2622
  const baseClasses = "flex flex-row items-center gap-[var(--deframe-widget-size-gap-xs)]";
2583
2623
  return /* @__PURE__ */ jsxs("div", { "data-test-id": testId, className: twMerge(baseClasses, className), children: [
2584
- /* @__PURE__ */ jsx(TextBody, { as: "span", variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", className: "tracking-wide text-[color:var(--deframe-widget-color-text-tertiary)]", children: directionLabel }),
2624
+ /* @__PURE__ */ jsx(TextBody, { as: "span", variant: "text-small", className: "tracking-wide text-[color:var(--deframe-widget-color-text-tertiary)]", children: directionLabel }),
2585
2625
  /* @__PURE__ */ jsxs(
2586
2626
  "button",
2587
2627
  {
@@ -2606,7 +2646,7 @@ var SwapQuoteHeaderView = ({
2606
2646
  }) => {
2607
2647
  const baseClasses = "border-b border-[color:var(--deframe-widget-color-border-secondary)] pb-[var(--deframe-widget-size-padding-y-sm)]";
2608
2648
  return /* @__PURE__ */ jsx("div", { "data-test-id": "swap-quote-header", className: twMerge(baseClasses, className), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
2609
- /* @__PURE__ */ jsx(TextBody, { as: "span", variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", className: "[font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-secondary)] inline-flex items-center", children: label }),
2649
+ /* @__PURE__ */ jsx(TextBody, { as: "span", variant: "text-small", className: "[font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-secondary)] inline-flex items-center", children: label }),
2610
2650
  /* @__PURE__ */ jsx("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-md)]", children: timerElement })
2611
2651
  ] }) });
2612
2652
  };
@@ -2675,7 +2715,7 @@ var SwapOutputAmountView = ({
2675
2715
  className
2676
2716
  }) => {
2677
2717
  const baseClasses = "[font-size:var(--deframe-widget-font-size-xxl)] [line-height:var(--deframe-widget-font-leading-xxl)] [font-weight:var(--deframe-widget-font-weight-extrabold)] text-right w-full min-w-[120px] text-[color:var(--deframe-widget-color-text-primary)]";
2678
- return /* @__PURE__ */ jsx("div", { "data-test-id": "swap-flow-output-amount", className: twMerge(baseClasses, className), children: isLoading ? /* @__PURE__ */ jsx(TextBody, { as: "span", variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", className: "text-[color:var(--deframe-widget-color-text-primary-disabled)] inline-flex items-center", children: loadingElement != null ? loadingElement : searchingQuoteLabel }) : displayOutput });
2718
+ return /* @__PURE__ */ jsx("div", { "data-test-id": "swap-flow-output-amount", className: twMerge(baseClasses, className), children: isLoading ? /* @__PURE__ */ jsx(TextBody, { as: "span", variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-primary-disabled)] inline-flex items-center", children: loadingElement != null ? loadingElement : searchingQuoteLabel }) : displayOutput });
2679
2719
  };
2680
2720
  var SwapQuoteErrorsView = ({
2681
2721
  hasQuoteError,
@@ -2830,7 +2870,7 @@ var ChooseAStrategyActionsheetView = ({
2830
2870
  /* @__PURE__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsx("img", { src: logoUrl, alt: assetName, className: "w-10 h-10 rounded-[var(--deframe-widget-size-radius-full)]" }) }),
2831
2871
  /* @__PURE__ */ jsxs(ListItemContent, { className: "gap-[var(--deframe-widget-size-gap-xs)]", children: [
2832
2872
  /* @__PURE__ */ jsx(TextBody, { children: resolvedYieldLabel }),
2833
- /* @__PURE__ */ jsx(TextBody, { variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", children: Badge })
2873
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: Badge })
2834
2874
  ] }),
2835
2875
  /* @__PURE__ */ jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-center items-center gap-[var(--deframe-widget-size-gap-xs)]", children: [
2836
2876
  /* @__PURE__ */ jsxs("span", { className: "text-[color:var(--deframe-widget-color-state-success)]", children: [
@@ -2865,7 +2905,7 @@ var StrategyDetailsView = ({
2865
2905
  /* @__PURE__ */ jsx("img", { "data-test-id": "strategy-logo", src: logoUrl, alt: title, className: "w-20 h-20 rounded-[var(--deframe-widget-size-radius-full)]" }),
2866
2906
  /* @__PURE__ */ jsx(TextHeading, { variant: "h5", children: title })
2867
2907
  ] }),
2868
- /* @__PURE__ */ jsx(TextBody, { variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", children: description }),
2908
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: description }),
2869
2909
  /* @__PURE__ */ jsx(
2870
2910
  SummaryDetails,
2871
2911
  {
@@ -2958,7 +2998,7 @@ var SearchEmptyState = ({
2958
2998
  /* @__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(MdOutlineSearchOff, { className: "w-10 h-10 text-[color:var(--deframe-widget-color-text-tertiary)]" }) }),
2959
2999
  /* @__PURE__ */ jsx(TextHeading, { variant: "h3", children: title })
2960
3000
  ] }),
2961
- /* @__PURE__ */ jsx("div", { className: "self-stretch text-center", children: /* @__PURE__ */ jsx(TextBody, { variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", children: description }) })
3001
+ /* @__PURE__ */ jsx("div", { className: "self-stretch text-center", children: /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: description }) })
2962
3002
  ] }) });
2963
3003
  };
2964
3004
  var CollapsibleSection = ({
@@ -2993,7 +3033,7 @@ var CollapsibleSection = ({
2993
3033
  children: [
2994
3034
  /* @__PURE__ */ jsx("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-xs)]", children: /* @__PURE__ */ jsx(TextBody, { className: "text-[color:var(--deframe-widget-color-text-primary-dark)] [font-weight:var(--deframe-widget-font-weight-medium)]", children: title }) }),
2995
3035
  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-xs)]", children: [
2996
- subtitle && /* @__PURE__ */ jsx(TextBody, { variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", children: subtitle }),
3036
+ subtitle && /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: subtitle }),
2997
3037
  /* @__PURE__ */ jsx(
2998
3038
  motion.svg,
2999
3039
  {
@@ -4028,7 +4068,7 @@ var ChooseAnAssetSwapView = ({
4028
4068
  ] }),
4029
4069
  searchValue && displayedTokens.length === 0 && !isFetching ? /* @__PURE__ */ jsx(SearchEmptyState, { title: labels.searchEmptyTitle, description: labels.searchEmptyDescription }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)] w-full mt-[var(--deframe-widget-size-gap-md)] overflow-y-auto flex-1 min-h-0", children: [
4030
4070
  isFetching && /* @__PURE__ */ jsx("div", { className: "flex justify-center items-center w-full py-[var(--deframe-widget-size-padding-y-md)]", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-xs)]", children: [
4031
- /* @__PURE__ */ jsx(TextBody, { variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.searchingText }),
4071
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.searchingText }),
4032
4072
  /* @__PURE__ */ jsx(LoadingDots, {})
4033
4073
  ] }) }),
4034
4074
  displayedTokens.map((token, index) => {
@@ -4048,11 +4088,11 @@ var ChooseAnAssetSwapView = ({
4048
4088
  /* @__PURE__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsx("img", { src: token.logoURI || "", alt: token.name, className: "w-10 h-10 rounded-[var(--deframe-widget-size-radius-full)]" }) }),
4049
4089
  /* @__PURE__ */ jsxs(ListItemContent, { children: [
4050
4090
  /* @__PURE__ */ jsx(TextBody, { children: token.name }),
4051
- /* @__PURE__ */ jsx(TextBody, { variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", children: token.symbol })
4091
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: token.symbol })
4052
4092
  ] }),
4053
4093
  /* @__PURE__ */ jsxs(ListItemRightSide, { children: [
4054
4094
  /* @__PURE__ */ jsx(TextBody, { children: formattedBalance }),
4055
- /* @__PURE__ */ jsx(TextBody, { variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", children: formatCurrencyValue(Number(balance == null ? void 0 : balance.amountInUSD) || 0) })
4095
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: formatCurrencyValue(Number(balance == null ? void 0 : balance.amountInUSD) || 0) })
4056
4096
  ] })
4057
4097
  ]
4058
4098
  },
@@ -4445,7 +4485,1900 @@ var ConfirmSwapButtonView = ({
4445
4485
  }
4446
4486
  ) });
4447
4487
  };
4488
+ var ChooseANetworkView = ({
4489
+ labels,
4490
+ autoFocus = true,
4491
+ chains,
4492
+ pageSize = 10,
4493
+ onChainClick
4494
+ }) => {
4495
+ const [searchValue, setSearchValue] = useState("");
4496
+ const [page, setPage] = useState(1);
4497
+ useEffect(() => {
4498
+ setPage(1);
4499
+ }, [searchValue]);
4500
+ const filteredChains = chains.filter(
4501
+ (chain) => chain.name.toLowerCase().includes(searchValue.toLowerCase())
4502
+ );
4503
+ const displayedChains = filteredChains.slice(0, page * pageSize);
4504
+ const hasMore = filteredChains.length > page * pageSize;
4505
+ 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: [
4506
+ /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0", children: [
4507
+ /* @__PURE__ */ jsx(TextHeading, { children: labels.title }),
4508
+ /* @__PURE__ */ jsx("br", {}),
4509
+ /* @__PURE__ */ jsx(
4510
+ SearchInput,
4511
+ {
4512
+ value: searchValue,
4513
+ onChange: setSearchValue,
4514
+ placeholder: labels.searchPlaceholder,
4515
+ autoFocus
4516
+ }
4517
+ )
4518
+ ] }),
4519
+ /* @__PURE__ */ jsxs(
4520
+ "div",
4521
+ {
4522
+ "data-testid": "choose-a-network-list",
4523
+ 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",
4524
+ children: [
4525
+ displayedChains.map((chain) => /* @__PURE__ */ jsxs(
4526
+ ListItem,
4527
+ {
4528
+ className: "w-full flex-shrink-0",
4529
+ onClick: () => onChainClick(chain.chainId),
4530
+ "data-testid": `choose-network-item-${chain.chainId}`,
4531
+ "data-chain-id": chain.chainId,
4532
+ children: [
4533
+ /* @__PURE__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsx(
4534
+ "img",
4535
+ {
4536
+ src: chain.imageUrl,
4537
+ alt: chain.name,
4538
+ className: "w-10 h-10 rounded-[var(--deframe-widget-size-radius-full)]"
4539
+ }
4540
+ ) }),
4541
+ /* @__PURE__ */ jsx(ListItemContent, { children: /* @__PURE__ */ jsx(TextBody, { children: chain.name }) })
4542
+ ]
4543
+ },
4544
+ `chain-${chain.chainId}`
4545
+ )),
4546
+ 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 }) })
4547
+ ]
4548
+ }
4549
+ )
4550
+ ] }) });
4551
+ };
4552
+ 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: [
4553
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)] flex-1 min-w-0", children: [
4554
+ /* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded-xl bg-[var(--deframe-widget-color-bg-tertiary)] animate-pulse flex-shrink-0" }),
4555
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-xs)] flex-1 min-w-0", children: [
4556
+ /* @__PURE__ */ jsx("div", { className: "w-32 h-4 bg-[var(--deframe-widget-color-bg-tertiary)] rounded animate-pulse" }),
4557
+ /* @__PURE__ */ jsx("div", { className: "w-24 h-3 bg-[var(--deframe-widget-color-bg-tertiary)] rounded animate-pulse" })
4558
+ ] })
4559
+ ] }),
4560
+ /* @__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: [
4561
+ /* @__PURE__ */ jsx("div", { className: "w-20 h-4 bg-[var(--deframe-widget-color-bg-tertiary)] rounded animate-pulse" }),
4562
+ /* @__PURE__ */ jsx("div", { className: "w-16 h-3 bg-[var(--deframe-widget-color-bg-tertiary)] rounded animate-pulse" })
4563
+ ] })
4564
+ ] });
4565
+ var SkeletonGroup = () => /* @__PURE__ */ jsxs("div", { className: "self-stretch flex flex-col gap-[var(--deframe-widget-size-gap-xs)]", children: [
4566
+ /* @__PURE__ */ jsx("div", { className: "w-40 h-4 bg-[var(--deframe-widget-color-bg-tertiary)] rounded animate-pulse" }),
4567
+ /* @__PURE__ */ jsx(SkeletonItem, {}),
4568
+ /* @__PURE__ */ jsx(SkeletonItem, {})
4569
+ ] });
4570
+ var LoadingSkeleton = () => /* @__PURE__ */ jsxs("div", { className: "self-stretch flex flex-col gap-[var(--deframe-widget-size-gap-md)]", children: [
4571
+ /* @__PURE__ */ jsx(SkeletonGroup, {}),
4572
+ /* @__PURE__ */ jsx(SkeletonGroup, {})
4573
+ ] });
4574
+ 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: [
4575
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-center items-center gap-[var(--deframe-widget-size-gap-md)] text-center", children: [
4576
+ /* @__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)]" }) }),
4577
+ /* @__PURE__ */ jsx(TextHeading, { variant: "h3", children: title })
4578
+ ] }),
4579
+ /* @__PURE__ */ jsx("div", { className: "self-stretch text-center", children: /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: description }) })
4580
+ ] }) });
4581
+ var SwapItemIcon = ({ src, alt }) => {
4582
+ const fallbackText = encodeURIComponent((alt || "TOK").slice(0, 3).toUpperCase());
4583
+ const fallbackSrc = `https://placehold.co/40x40?text=${fallbackText}`;
4584
+ const resolvedSrc = src || fallbackSrc;
4585
+ return /* @__PURE__ */ jsxs("div", { className: "relative flex-shrink-0", children: [
4586
+ /* @__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(
4587
+ "img",
4588
+ {
4589
+ src: resolvedSrc,
4590
+ alt,
4591
+ className: "w-full h-full object-cover",
4592
+ onError: (e) => {
4593
+ e.target.src = fallbackSrc;
4594
+ }
4595
+ }
4596
+ ) }),
4597
+ /* @__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)]" }) })
4598
+ ] });
4599
+ };
4600
+ var SwapHistoryView = ({
4601
+ labels,
4602
+ isLoading,
4603
+ items,
4604
+ onItemClick,
4605
+ pageSize = 10
4606
+ }) => {
4607
+ const [visibleCount, setVisibleCount] = React6__default.useState(pageSize);
4608
+ if (isLoading) {
4609
+ 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, {}) });
4610
+ }
4611
+ if (items.length === 0) {
4612
+ 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 }) });
4613
+ }
4614
+ const visibleItems = items.slice(0, visibleCount);
4615
+ const grouped = /* @__PURE__ */ new Map();
4616
+ for (const item of visibleItems) {
4617
+ const group = grouped.get(item.dateKey);
4618
+ if (group) {
4619
+ group.push(item);
4620
+ } else {
4621
+ grouped.set(item.dateKey, [item]);
4622
+ }
4623
+ }
4624
+ const sortedDates = Array.from(grouped.keys()).sort((a, b) => b.localeCompare(a));
4625
+ const hasMore = items.length > visibleCount;
4626
+ 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: [
4627
+ sortedDates.map((dateKey) => {
4628
+ const groupItems = grouped.get(dateKey);
4629
+ return /* @__PURE__ */ jsxs("div", { className: "self-stretch flex flex-col gap-[var(--deframe-widget-size-gap-sm)]", children: [
4630
+ /* @__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 }),
4631
+ groupItems.map((item) => /* @__PURE__ */ jsxs(
4632
+ ListItem,
4633
+ {
4634
+ onClick: () => onItemClick(item.id),
4635
+ containerClassName: "!rounded-[var(--deframe-widget-size-radius-xs)] !border-0 !min-h-[72px]",
4636
+ children: [
4637
+ /* @__PURE__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsx(SwapItemIcon, { src: item.iconUrl, alt: item.iconAlt }) }),
4638
+ /* @__PURE__ */ jsxs(ListItemContent, { children: [
4639
+ /* @__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 }),
4640
+ /* @__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 })
4641
+ ] }),
4642
+ /* @__PURE__ */ jsxs(ListItemRightSide, { children: [
4643
+ /* @__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 }),
4644
+ 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 })
4645
+ ] })
4646
+ ]
4647
+ },
4648
+ item.id
4649
+ ))
4650
+ ] }, dateKey);
4651
+ }),
4652
+ 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 }) })
4653
+ ] }) });
4654
+ };
4655
+ var HistorySwapDetailsView = (props) => {
4656
+ const { labels, onBack, status } = props;
4657
+ if (status === "not-found") {
4658
+ return /* @__PURE__ */ jsxs(BackgroundContainer, { children: [
4659
+ /* @__PURE__ */ jsx(DetailsHeader, { title: labels.headerTitle, onBack }),
4660
+ /* @__PURE__ */ jsx(NotFoundMessage, { children: labels.notFoundMessage })
4661
+ ] });
4662
+ }
4663
+ if (status === "unavailable") {
4664
+ return /* @__PURE__ */ jsxs(BackgroundContainer, { children: [
4665
+ /* @__PURE__ */ jsx(DetailsHeader, { title: labels.headerTitle, onBack }),
4666
+ /* @__PURE__ */ jsx(NotFoundMessage, { children: labels.detailsUnavailableMessage })
4667
+ ] });
4668
+ }
4669
+ const {
4670
+ symbolIn,
4671
+ amountInFormatted,
4672
+ amountInUsd,
4673
+ tokenInLogoUrl,
4674
+ chainInName,
4675
+ symbolOut,
4676
+ amountOutFormatted,
4677
+ amountOutUsd,
4678
+ tokenOutLogoUrl,
4679
+ chainOutName,
4680
+ routeOrNetworkLabel,
4681
+ routeOrNetworkValue,
4682
+ statusLabel,
4683
+ txHash,
4684
+ dateFormatted,
4685
+ explorerUrl
4686
+ } = props;
4687
+ return /* @__PURE__ */ jsxs(BackgroundContainer, { children: [
4688
+ /* @__PURE__ */ jsx(DetailsHeader, { title: labels.headerTitle, onBack }),
4689
+ /* @__PURE__ */ jsx(ScrollableContent, { children: /* @__PURE__ */ jsxs(FlexCol, { gap: "lg", children: [
4690
+ /* @__PURE__ */ jsx(SectionCard, { className: "!p-[24px]", children: /* @__PURE__ */ jsxs(FlexCol, { gap: "xs", children: [
4691
+ /* @__PURE__ */ jsx(TransactionTypeLabel, { children: labels.swapLabel }),
4692
+ /* @__PURE__ */ jsxs(FlexCol, { gap: "sm", children: [
4693
+ /* @__PURE__ */ jsxs(FlexRow, { gap: "sm", children: [
4694
+ /* @__PURE__ */ jsx(TokenIcon, { src: tokenInLogoUrl, alt: symbolIn }),
4695
+ /* @__PURE__ */ jsxs(FlexCol, { children: [
4696
+ /* @__PURE__ */ jsx(Amount, { children: amountInFormatted }),
4697
+ amountInUsd ? /* @__PURE__ */ jsx(AmountInUsd, { children: amountInUsd }) : chainInName ? /* @__PURE__ */ jsx(AmountInUsd, { children: chainInName }) : null
4698
+ ] })
4699
+ ] }),
4700
+ /* @__PURE__ */ jsxs(FlexRow, { gap: "sm", children: [
4701
+ /* @__PURE__ */ jsx(TokenIcon, { src: tokenOutLogoUrl, alt: symbolOut }),
4702
+ /* @__PURE__ */ jsxs(FlexCol, { children: [
4703
+ /* @__PURE__ */ jsx(Amount, { children: amountOutFormatted }),
4704
+ amountOutUsd ? /* @__PURE__ */ jsx(AmountInUsd, { children: amountOutUsd }) : chainOutName ? /* @__PURE__ */ jsx(AmountInUsd, { children: chainOutName }) : null
4705
+ ] })
4706
+ ] })
4707
+ ] })
4708
+ ] }) }),
4709
+ /* @__PURE__ */ jsx(SectionCard, { className: "!p-[var(--deframe-widget-size-padding-x-md)]", children: /* @__PURE__ */ jsxs(FlexCol, { gap: "sm", children: [
4710
+ /* @__PURE__ */ jsxs(InfoRow, { borderBottom: true, children: [
4711
+ /* @__PURE__ */ jsx(InfoLabel, { className: "font-[var(--deframe-widget-font-family)]", children: routeOrNetworkLabel }),
4712
+ /* @__PURE__ */ jsx(InfoValue, { className: "font-[var(--deframe-widget-font-family)]", children: routeOrNetworkValue })
4713
+ ] }),
4714
+ /* @__PURE__ */ jsxs(InfoRow, { borderBottom: true, children: [
4715
+ /* @__PURE__ */ jsx(InfoLabel, { className: "font-[var(--deframe-widget-font-family)]", children: labels.sentLabel }),
4716
+ /* @__PURE__ */ jsx(TwoLineValue, { primary: amountInFormatted, secondary: amountInUsd != null ? amountInUsd : "-" })
4717
+ ] }),
4718
+ /* @__PURE__ */ jsxs(InfoRow, { borderBottom: true, children: [
4719
+ /* @__PURE__ */ jsx(InfoLabel, { className: "font-[var(--deframe-widget-font-family)]", children: labels.receivedLabel }),
4720
+ /* @__PURE__ */ jsx(TwoLineValue, { primary: amountOutFormatted, secondary: amountOutUsd != null ? amountOutUsd : "-" })
4721
+ ] }),
4722
+ /* @__PURE__ */ jsxs(InfoRow, { borderBottom: true, children: [
4723
+ /* @__PURE__ */ jsx(InfoLabel, { className: "font-[var(--deframe-widget-font-family)]", children: labels.statusLabel }),
4724
+ /* @__PURE__ */ jsx(SuccessBadge, { children: statusLabel })
4725
+ ] }),
4726
+ /* @__PURE__ */ jsxs(InfoRow, { borderBottom: true, children: [
4727
+ /* @__PURE__ */ jsx(InfoLabel, { className: "font-[var(--deframe-widget-font-family)]", children: labels.txIdLabel }),
4728
+ /* @__PURE__ */ jsx(TransactionId, { hash: txHash })
4729
+ ] }),
4730
+ /* @__PURE__ */ jsxs(InfoRow, { borderBottom: true, children: [
4731
+ /* @__PURE__ */ jsx(InfoLabel, { className: "font-[var(--deframe-widget-font-family)]", children: labels.dateLabel }),
4732
+ /* @__PURE__ */ jsx(InfoValue, { className: "font-[var(--deframe-widget-font-family)]", children: dateFormatted })
4733
+ ] }),
4734
+ explorerUrl && /* @__PURE__ */ jsxs(InfoRow, { children: [
4735
+ /* @__PURE__ */ jsx(InfoLabel, { className: "font-[var(--deframe-widget-font-family)]", children: labels.transactionLabel }),
4736
+ /* @__PURE__ */ jsx(ExplorerLink, { href: explorerUrl, children: labels.viewOnExplorerLabel })
4737
+ ] })
4738
+ ] }) })
4739
+ ] }) })
4740
+ ] });
4741
+ };
4742
+ var SwapWidgetFallbackView = ({
4743
+ title,
4744
+ description,
4745
+ buttonLabel,
4746
+ onButtonClick
4747
+ }) => {
4748
+ return /* @__PURE__ */ jsxs(
4749
+ "div",
4750
+ {
4751
+ "data-testid": "swap-widget-fallback",
4752
+ 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)]",
4753
+ children: [
4754
+ /* @__PURE__ */ jsx(TextHeading, { variant: "h-large", children: title }),
4755
+ /* @__PURE__ */ jsx(TextBody, { className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: description }),
4756
+ /* @__PURE__ */ jsx(PrimaryButton, { className: "w-full", onClick: onButtonClick, children: buttonLabel })
4757
+ ]
4758
+ }
4759
+ );
4760
+ };
4761
+ var ApyRange = ({ children }) => {
4762
+ return /* @__PURE__ */ jsx("div", { className: "text-right justify-center text-text-highlight text-xs font-normal leading-4", children });
4763
+ };
4764
+ var variantStyles = {
4765
+ primary: "text-text-primary dark:text-text-primary-dark text-text-md",
4766
+ secondary: "text-text-secondary dark:text-text-secondary-dark text-text-sm font-poppins"
4767
+ };
4768
+ var Label = ({ children, variant = "primary", className }) => {
4769
+ return /* @__PURE__ */ jsx("div", { className: twMerge(variantStyles[variant], className), children });
4770
+ };
4771
+ 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: [
4772
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-sm flex-1 min-w-0", children: [
4773
+ /* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded-xl bg-bg-muted dark:bg-bg-muted-dark animate-pulse flex-shrink-0" }),
4774
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-xs flex-1 min-w-0", children: [
4775
+ /* @__PURE__ */ jsx("div", { className: "w-32 h-4 bg-bg-muted dark:bg-bg-muted-dark rounded animate-pulse" }),
4776
+ /* @__PURE__ */ jsx("div", { className: "w-24 h-3 bg-bg-muted dark:bg-bg-muted-dark rounded animate-pulse" })
4777
+ ] })
4778
+ ] }),
4779
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end gap-xs flex-shrink-0 ml-sm", children: [
4780
+ /* @__PURE__ */ jsx("div", { className: "w-20 h-4 bg-bg-muted dark:bg-bg-muted-dark rounded animate-pulse" }),
4781
+ /* @__PURE__ */ jsx("div", { className: "w-16 h-3 bg-bg-muted dark:bg-bg-muted-dark rounded animate-pulse" })
4782
+ ] })
4783
+ ] });
4784
+ var HistoryGroupSkeleton = () => /* @__PURE__ */ jsxs("div", { className: "self-stretch flex flex-col gap-xs", children: [
4785
+ /* @__PURE__ */ jsx("div", { className: "w-40 h-4 bg-bg-muted dark:bg-bg-muted-dark rounded animate-pulse" }),
4786
+ /* @__PURE__ */ jsx(HistoryItemSkeleton, {}),
4787
+ /* @__PURE__ */ jsx(HistoryItemSkeleton, {})
4788
+ ] });
4789
+ var HistoryListSkeleton = () => /* @__PURE__ */ jsxs("div", { className: "self-stretch flex flex-col gap-md", children: [
4790
+ /* @__PURE__ */ jsx(HistoryGroupSkeleton, {}),
4791
+ /* @__PURE__ */ jsx(HistoryGroupSkeleton, {})
4792
+ ] });
4793
+ var WalletBalances = ({ cards, variant = "subtle", className }) => {
4794
+ const bgClass = variant === "raised" ? "bg-bg-raised dark:bg-bg-raised-dark" : "bg-bg-subtle dark:bg-bg-subtle-dark";
4795
+ 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: [
4796
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: card.label }),
4797
+ /* @__PURE__ */ jsx(TextHeading, { variant: "h3", children: card.value })
4798
+ ] }, card.label)) });
4799
+ };
4800
+ 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: [
4801
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-center items-center gap-md text-center", children: [
4802
+ /* @__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" }) }),
4803
+ /* @__PURE__ */ jsx(TextHeading, { variant: "h3", children: title })
4804
+ ] }),
4805
+ /* @__PURE__ */ jsx("div", { className: "self-stretch text-center", children: /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: description }) })
4806
+ ] }) });
4807
+ var StrategyGridCard = ({
4808
+ logoUrl,
4809
+ title,
4810
+ subtitle,
4811
+ apyFormatted,
4812
+ apyLabel,
4813
+ onClick,
4814
+ className
4815
+ }) => /* @__PURE__ */ jsxs(
4816
+ "button",
4817
+ {
4818
+ type: "button",
4819
+ onClick,
4820
+ "data-test-id": "strategy-grid-card",
4821
+ className: twMerge(
4822
+ "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",
4823
+ "bg-[var(--deframe-widget-color-bg-primary)]",
4824
+ "hover:bg-[var(--deframe-widget-color-bg-tertiary)]",
4825
+ "transition-colors cursor-pointer text-left w-full",
4826
+ className
4827
+ ),
4828
+ children: [
4829
+ /* @__PURE__ */ jsx("img", { src: logoUrl, alt: title, className: "w-10 h-10 rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0" }),
4830
+ /* @__PURE__ */ jsxs("div", { className: "flex items-end justify-between w-full", children: [
4831
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-xs)]", children: [
4832
+ /* @__PURE__ */ jsx(TextBody, { className: "font-medium", children: title }),
4833
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-tertiary)]", children: subtitle })
4834
+ ] }),
4835
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end gap-[var(--deframe-widget-size-gap-xs)]", children: [
4836
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-primary-disabled)] text-right", children: apyLabel }),
4837
+ /* @__PURE__ */ jsx(TextBody, { className: "text-[color:var(--deframe-widget-color-brand-primary)]", children: apyFormatted })
4838
+ ] })
4839
+ ] })
4840
+ ]
4841
+ }
4842
+ );
4843
+ var BackButton = ({ onClick, ariaLabel = "Back", className }) => {
4844
+ 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";
4845
+ return /* @__PURE__ */ jsx(
4846
+ "button",
4847
+ {
4848
+ "data-test-id": "back-button",
4849
+ onClick,
4850
+ className: twMerge(baseClasses, className),
4851
+ "aria-label": ariaLabel,
4852
+ children: /* @__PURE__ */ jsx(HiArrowLeft, { className: "w-6 h-6" })
4853
+ }
4854
+ );
4855
+ };
4856
+ var EarnBalanceCard = ({
4857
+ tokenIcon,
4858
+ fiatBalance,
4859
+ profitAmount,
4860
+ tokenAmount,
4861
+ investedLabel,
4862
+ earningsLabel,
4863
+ isFetching = false
4864
+ }) => {
4865
+ const displayedTokenAmount = isFetching ? "..." : tokenAmount;
4866
+ return /* @__PURE__ */ jsxs("div", { className: "w-full flex flex-row gap-[var(--deframe-widget-size-gap-md)]", children: [
4867
+ /* @__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: [
4868
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: investedLabel }),
4869
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-xs)]", children: [
4870
+ 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 }),
4871
+ /* @__PURE__ */ jsx(TextHeading, { variant: "h3", children: displayedTokenAmount })
4872
+ ] }),
4873
+ /* @__PURE__ */ jsxs(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-tertiary)]", children: [
4874
+ "~",
4875
+ fiatBalance
4876
+ ] })
4877
+ ] }),
4878
+ /* @__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: [
4879
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: earningsLabel }),
4880
+ /* @__PURE__ */ jsx(TextHeading, { variant: "h3", children: profitAmount })
4881
+ ] })
4882
+ ] });
4883
+ };
4884
+ var EarnInvestmentSummaryView = ({
4885
+ overviewDescription,
4886
+ totalInvestedLabel,
4887
+ totalInvestedValue,
4888
+ totalReturnLabel,
4889
+ totalReturnValue,
4890
+ className
4891
+ }) => {
4892
+ return /* @__PURE__ */ jsxs("section", { className: twMerge("flex flex-col gap-md p-lg bg-bg-subtle dark:bg-bg-subtle-dark rounded", className), children: [
4893
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-text-secondary dark:text-text-secondary-dark", children: overviewDescription }),
4894
+ /* @__PURE__ */ jsx(
4895
+ WalletBalances,
4896
+ {
4897
+ cards: [
4898
+ { label: totalInvestedLabel, value: totalInvestedValue },
4899
+ { label: totalReturnLabel, value: totalReturnValue }
4900
+ ],
4901
+ variant: "raised",
4902
+ className: "grid grid-cols-2 gap-md !mt-0"
4903
+ }
4904
+ )
4905
+ ] });
4906
+ };
4907
+ var EarnInvestedSectionView = ({
4908
+ sectionTitle,
4909
+ items,
4910
+ onItemClick,
4911
+ className
4912
+ }) => {
4913
+ if (items.length === 0) {
4914
+ return null;
4915
+ }
4916
+ return /* @__PURE__ */ jsxs(
4917
+ "section",
4918
+ {
4919
+ className: twMerge(
4920
+ "flex flex-col gap-[var(--deframe-widget-size-gap-md)] p-[var(--deframe-widget-size-padding-x-lg)]",
4921
+ "bg-[var(--deframe-widget-color-bg-secondary)] rounded-[var(--deframe-widget-size-radius-sm)]",
4922
+ className
4923
+ ),
4924
+ children: [
4925
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: sectionTitle }),
4926
+ /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-md)]", children: items.map((item, index) => {
4927
+ const isLast = index === items.length - 1;
4928
+ return /* @__PURE__ */ jsxs(
4929
+ "button",
4930
+ {
4931
+ type: "button",
4932
+ onClick: () => onItemClick == null ? void 0 : onItemClick(item.strategyId),
4933
+ className: twMerge(
4934
+ "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)]",
4935
+ "hover:bg-[var(--deframe-widget-color-bg-tertiary)]",
4936
+ "transition-colors cursor-pointer text-left w-full",
4937
+ !isLast && "border-b border-[var(--deframe-widget-color-border-secondary)]"
4938
+ ),
4939
+ children: [
4940
+ /* @__PURE__ */ jsx(
4941
+ "img",
4942
+ {
4943
+ src: item.logoUrl,
4944
+ alt: item.assetName,
4945
+ className: "w-10 h-10 rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0"
4946
+ }
4947
+ ),
4948
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1 min-w-0", children: [
4949
+ /* @__PURE__ */ jsx(TextBody, { className: "font-medium truncate", children: item.assetName }),
4950
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-tertiary)] truncate", children: item.subtitle })
4951
+ ] }),
4952
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end flex-shrink-0", children: [
4953
+ /* @__PURE__ */ jsx(TextBody, { className: "font-medium", children: item.balanceFormatted }),
4954
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: item.profitFormatted })
4955
+ ] })
4956
+ ]
4957
+ },
4958
+ item.strategyId
4959
+ );
4960
+ }) })
4961
+ ]
4962
+ }
4963
+ );
4964
+ };
4965
+ var EarnExploreGridView = ({
4966
+ sectionTitle,
4967
+ loadingLabel,
4968
+ errorLabel,
4969
+ emptySearchTitle,
4970
+ emptySearchDescription,
4971
+ isLoading,
4972
+ error,
4973
+ strategies,
4974
+ searchBar,
4975
+ chipGroup,
4976
+ hasFilters,
4977
+ onStrategyClick,
4978
+ className
4979
+ }) => {
4980
+ const showEmptyState = hasFilters && strategies.length === 0;
4981
+ if (isLoading) {
4982
+ return /* @__PURE__ */ jsxs(
4983
+ "section",
4984
+ {
4985
+ className: twMerge(
4986
+ "flex flex-col gap-[var(--deframe-widget-size-gap-md)] p-[var(--deframe-widget-size-padding-x-lg)]",
4987
+ "bg-[var(--deframe-widget-color-bg-secondary)] rounded-[var(--deframe-widget-size-radius-sm)]",
4988
+ className
4989
+ ),
4990
+ children: [
4991
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: sectionTitle }),
4992
+ /* @__PURE__ */ jsxs("div", { className: "text-[color:var(--deframe-widget-color-text-secondary)] flex items-center gap-[var(--deframe-widget-size-gap-sm)]", children: [
4993
+ loadingLabel,
4994
+ /* @__PURE__ */ jsx(LoadingDots, {})
4995
+ ] })
4996
+ ]
4997
+ }
4998
+ );
4999
+ }
5000
+ if (error) {
5001
+ return /* @__PURE__ */ jsxs(
5002
+ "section",
5003
+ {
5004
+ className: twMerge(
5005
+ "flex flex-col gap-[var(--deframe-widget-size-gap-md)] p-[var(--deframe-widget-size-padding-x-lg)]",
5006
+ "bg-[var(--deframe-widget-color-bg-secondary)] rounded-[var(--deframe-widget-size-radius-sm)]",
5007
+ className
5008
+ ),
5009
+ children: [
5010
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: sectionTitle }),
5011
+ /* @__PURE__ */ jsx("div", { className: "text-[color:var(--deframe-widget-color-state-error)]", children: errorLabel })
5012
+ ]
5013
+ }
5014
+ );
5015
+ }
5016
+ return /* @__PURE__ */ jsxs(
5017
+ "section",
5018
+ {
5019
+ className: twMerge(
5020
+ "flex flex-col gap-[var(--deframe-widget-size-gap-md)] p-[var(--deframe-widget-size-padding-x-lg)]",
5021
+ "bg-[var(--deframe-widget-color-bg-secondary)] rounded-[var(--deframe-widget-size-radius-sm)]",
5022
+ className
5023
+ ),
5024
+ children: [
5025
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: sectionTitle }),
5026
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-md)]", children: [
5027
+ searchBar,
5028
+ chipGroup
5029
+ ] }),
5030
+ showEmptyState && /* @__PURE__ */ jsx("div", { className: "lg:h-[440px] flex items-center justify-center", children: /* @__PURE__ */ jsx(SearchEmptyState, { title: emptySearchTitle, description: emptySearchDescription }) }),
5031
+ !showEmptyState && /* @__PURE__ */ jsx(
5032
+ "div",
5033
+ {
5034
+ 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]",
5035
+ children: strategies.map((strategy) => /* @__PURE__ */ jsx(
5036
+ StrategyGridCard,
5037
+ {
5038
+ logoUrl: strategy.logoUrl,
5039
+ title: strategy.title,
5040
+ subtitle: strategy.subtitle,
5041
+ apyFormatted: strategy.apyFormatted,
5042
+ apyLabel: strategy.apyLabel,
5043
+ onClick: () => onStrategyClick == null ? void 0 : onStrategyClick(strategy.id)
5044
+ },
5045
+ strategy.id
5046
+ ))
5047
+ }
5048
+ )
5049
+ ]
5050
+ }
5051
+ );
5052
+ };
5053
+ var EarnRecentTransactionsView = ({
5054
+ sectionTitle,
5055
+ viewAllLabel,
5056
+ isLoading,
5057
+ hasMore,
5058
+ hasItems,
5059
+ historyList,
5060
+ emptyTitle,
5061
+ emptyDescription,
5062
+ onViewAll,
5063
+ className
5064
+ }) => {
5065
+ return /* @__PURE__ */ jsxs(
5066
+ "section",
5067
+ {
5068
+ className: twMerge(
5069
+ "flex flex-col gap-md p-lg",
5070
+ "bg-bg-subtle dark:bg-bg-subtle-dark rounded",
5071
+ className
5072
+ ),
5073
+ children: [
5074
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
5075
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-text-secondary dark:text-text-secondary-dark", children: sectionTitle }),
5076
+ hasMore && onViewAll && /* @__PURE__ */ jsx(
5077
+ "button",
5078
+ {
5079
+ type: "button",
5080
+ onClick: onViewAll,
5081
+ className: "text-brand-primary dark:text-brand-primary-dark hover:underline",
5082
+ children: /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: viewAllLabel })
5083
+ }
5084
+ )
5085
+ ] }),
5086
+ isLoading ? /* @__PURE__ */ jsx(HistoryListSkeleton, {}) : hasItems ? historyList : /* @__PURE__ */ jsx(HistoryTabEmpty, { title: emptyTitle, description: emptyDescription })
5087
+ ]
5088
+ }
5089
+ );
5090
+ };
5091
+ var EarnDesktopView = ({
5092
+ isLoading,
5093
+ loadingSkeleton,
5094
+ summary,
5095
+ invested,
5096
+ explore,
5097
+ transactions
5098
+ }) => {
5099
+ if (isLoading) {
5100
+ return /* @__PURE__ */ jsx(Fragment, { children: loadingSkeleton });
5101
+ }
5102
+ 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: [
5103
+ /* @__PURE__ */ jsx(EarnInvestmentSummaryView, __spreadValues({}, summary)),
5104
+ /* @__PURE__ */ jsx(EarnInvestedSectionView, __spreadValues({}, invested)),
5105
+ /* @__PURE__ */ jsx(EarnExploreGridView, __spreadValues({}, explore)),
5106
+ /* @__PURE__ */ jsx(EarnRecentTransactionsView, __spreadValues({}, transactions))
5107
+ ] });
5108
+ };
5109
+ var EarnInvestmentDetailsView = ({
5110
+ title,
5111
+ onBack,
5112
+ tokenIcon,
5113
+ fiatBalance,
5114
+ profitAmount,
5115
+ tokenAmount,
5116
+ investedLabel,
5117
+ earningsLabel,
5118
+ summaryTitle,
5119
+ summaryItems,
5120
+ pastActivitiesTitle,
5121
+ transactions,
5122
+ onTransactionClick,
5123
+ showMoreButton,
5124
+ onLoadMore,
5125
+ loadMoreLabel,
5126
+ depositLabel,
5127
+ onDeposit,
5128
+ withdrawLabel,
5129
+ onWithdraw
5130
+ }) => {
5131
+ return /* @__PURE__ */ jsxs(BackgroundContainer, { children: [
5132
+ /* @__PURE__ */ jsxs(Navbar, { children: [
5133
+ /* @__PURE__ */ jsx(BackButton, { onClick: onBack }),
5134
+ /* @__PURE__ */ jsx(TextHeading, { variant: "h1", children: title })
5135
+ ] }),
5136
+ /* @__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: [
5137
+ /* @__PURE__ */ jsx(
5138
+ EarnBalanceCard,
5139
+ {
5140
+ tokenIcon,
5141
+ fiatBalance,
5142
+ profitAmount,
5143
+ tokenAmount,
5144
+ investedLabel,
5145
+ earningsLabel
5146
+ }
5147
+ ),
5148
+ /* @__PURE__ */ jsx(
5149
+ SummaryDetails,
5150
+ {
5151
+ title: summaryTitle,
5152
+ items: summaryItems,
5153
+ defaultOpen: true,
5154
+ className: "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-primary)]"
5155
+ }
5156
+ ),
5157
+ /* @__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: [
5158
+ /* @__PURE__ */ jsx(TextHeading, { variant: "h5", children: pastActivitiesTitle }),
5159
+ /* @__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: [
5160
+ transactions.map((tx) => /* @__PURE__ */ jsxs(
5161
+ ListItem,
5162
+ {
5163
+ onClick: () => onTransactionClick(tx.id),
5164
+ children: [
5165
+ /* @__PURE__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsx("img", { src: tokenIcon, alt: "Token", className: "w-10 h-10 rounded-[var(--deframe-widget-size-radius-full)]" }) }),
5166
+ /* @__PURE__ */ jsxs(ListItemContent, { children: [
5167
+ /* @__PURE__ */ jsx(TextBody, { children: tx.action }),
5168
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: tx.date })
5169
+ ] }),
5170
+ /* @__PURE__ */ jsxs(ListItemRightSide, { children: [
5171
+ /* @__PURE__ */ jsx(TextBody, { children: tx.usdAmount }),
5172
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: tx.tokenAmount })
5173
+ ] })
5174
+ ]
5175
+ },
5176
+ `tx-history-${tx.id}`
5177
+ )),
5178
+ 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 }) })
5179
+ ] })
5180
+ ] })
5181
+ ] }),
5182
+ /* @__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: [
5183
+ /* @__PURE__ */ jsx(PrimaryButton, { onClick: onDeposit, className: "w-full", children: depositLabel }),
5184
+ /* @__PURE__ */ jsx(PrimaryButton, { onClick: onWithdraw, className: "w-full", children: withdrawLabel })
5185
+ ] }) })
5186
+ ] });
5187
+ };
5188
+ var GroupLabel = ({ children }) => /* @__PURE__ */ jsx("div", { className: "text-text-secondary dark:text-text-secondary-dark text-sm font-medium font-poppins py-3", children });
5189
+ var GroupedStrategyListView = ({
5190
+ isLoading,
5191
+ loadingLabel,
5192
+ error,
5193
+ errorLabel,
5194
+ investedLabel,
5195
+ investedItems,
5196
+ bestPerformanceLabel,
5197
+ bestPerformanceItems,
5198
+ allStrategiesLabel,
5199
+ allStrategiesItems
5200
+ }) => {
5201
+ const hasInvested = investedItems.length > 0;
5202
+ const hasBestPerformance = bestPerformanceItems.length > 0;
5203
+ const hasAllStrategies = allStrategiesItems.length > 0;
5204
+ if (isLoading) {
5205
+ return /* @__PURE__ */ jsxs("div", { className: "flex items-center py-md", children: [
5206
+ loadingLabel,
5207
+ " ",
5208
+ /* @__PURE__ */ jsx(LoadingDots, {})
5209
+ ] });
5210
+ }
5211
+ if (error) {
5212
+ return /* @__PURE__ */ jsxs("div", { className: "p-4 text-center text-red-500", children: [
5213
+ errorLabel,
5214
+ ": ",
5215
+ error.message
5216
+ ] });
5217
+ }
5218
+ return /* @__PURE__ */ jsxs("div", { className: "w-full flex flex-col gap-sm flex-1 min-h-0 overflow-y-auto", children: [
5219
+ hasInvested && /* @__PURE__ */ jsxs(Fragment, { children: [
5220
+ /* @__PURE__ */ jsx(GroupLabel, { children: investedLabel }),
5221
+ /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-sm", children: investedItems.map((item) => /* @__PURE__ */ jsxs(
5222
+ ListItem,
5223
+ {
5224
+ onClick: () => item.onClick(),
5225
+ children: [
5226
+ /* @__PURE__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsx(
5227
+ "img",
5228
+ {
5229
+ src: item.logoUrl,
5230
+ alt: item.subtitle,
5231
+ className: "w-10 h-10 rounded-full"
5232
+ }
5233
+ ) }),
5234
+ /* @__PURE__ */ jsxs(ListItemContent, { children: [
5235
+ /* @__PURE__ */ jsx(TextBody, { children: item.title }),
5236
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: item.subtitle })
5237
+ ] }),
5238
+ /* @__PURE__ */ jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-row justify-between items-center", children: [
5239
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end", children: [
5240
+ /* @__PURE__ */ jsx(TextBody, { children: item.balanceFormatted }),
5241
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: item.profitFormatted })
5242
+ ] }),
5243
+ /* @__PURE__ */ jsx(MdArrowRight, { className: "w-6 h-6" })
5244
+ ] }) })
5245
+ ]
5246
+ },
5247
+ `invested-${item.id}`
5248
+ )) })
5249
+ ] }),
5250
+ hasBestPerformance && /* @__PURE__ */ jsxs(Fragment, { children: [
5251
+ /* @__PURE__ */ jsx(GroupLabel, { children: bestPerformanceLabel }),
5252
+ /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-sm", children: bestPerformanceItems.map((item) => /* @__PURE__ */ jsxs(
5253
+ ListItem,
5254
+ {
5255
+ onClick: () => item.onClick(),
5256
+ children: [
5257
+ /* @__PURE__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsx(
5258
+ "img",
5259
+ {
5260
+ src: item.logoUrl,
5261
+ alt: item.subtitle,
5262
+ className: "w-10 h-10 rounded-full"
5263
+ }
5264
+ ) }),
5265
+ /* @__PURE__ */ jsxs(ListItemContent, { children: [
5266
+ /* @__PURE__ */ jsx(TextBody, { children: item.title }),
5267
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: item.subtitle })
5268
+ ] }),
5269
+ /* @__PURE__ */ jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-row justify-between items-center", children: [
5270
+ /* @__PURE__ */ jsx(ApyRange, { children: item.apyFormatted }),
5271
+ /* @__PURE__ */ jsx(MdArrowRight, { className: "w-6 h-6" })
5272
+ ] }) })
5273
+ ]
5274
+ },
5275
+ `best-${item.id}`
5276
+ )) })
5277
+ ] }),
5278
+ hasAllStrategies && /* @__PURE__ */ jsxs(Fragment, { children: [
5279
+ /* @__PURE__ */ jsx(GroupLabel, { children: allStrategiesLabel }),
5280
+ /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-sm", children: allStrategiesItems.map((item) => /* @__PURE__ */ jsxs(
5281
+ ListItem,
5282
+ {
5283
+ onClick: () => item.onClick(),
5284
+ children: [
5285
+ /* @__PURE__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsx(
5286
+ "img",
5287
+ {
5288
+ src: item.logoUrl,
5289
+ alt: item.subtitle,
5290
+ className: "w-10 h-10 rounded-full"
5291
+ }
5292
+ ) }),
5293
+ /* @__PURE__ */ jsxs(ListItemContent, { children: [
5294
+ /* @__PURE__ */ jsx(TextBody, { children: item.title }),
5295
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: item.subtitle })
5296
+ ] }),
5297
+ /* @__PURE__ */ jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-row justify-between items-center", children: [
5298
+ /* @__PURE__ */ jsx(ApyRange, { children: item.apyFormatted }),
5299
+ /* @__PURE__ */ jsx(MdArrowRight, { className: "w-6 h-6" })
5300
+ ] }) })
5301
+ ]
5302
+ },
5303
+ `all-${item.id}`
5304
+ )) })
5305
+ ] })
5306
+ ] });
5307
+ };
5308
+ var DateLabel = ({ children }) => {
5309
+ return /* @__PURE__ */ jsx("div", { className: "text-text-sm-mobile font-poppins text-text-secondary dark:text-text-secondary-dark", children });
5310
+ };
5311
+ var ArrowBadge = ({ isDeposit }) => {
5312
+ 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" }) });
5313
+ };
5314
+ var TokenIconWithBadge = ({ src, alt, isDeposit }) => {
5315
+ const fallbackText = encodeURIComponent((alt || "TOK").slice(0, 3).toUpperCase());
5316
+ const fallbackSrc = `https://placehold.co/40x40?text=${fallbackText}`;
5317
+ const resolvedSrc = src || fallbackSrc;
5318
+ return /* @__PURE__ */ jsxs("div", { className: "relative flex-shrink-0", children: [
5319
+ /* @__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(
5320
+ "img",
5321
+ {
5322
+ src: resolvedSrc,
5323
+ alt,
5324
+ className: "w-full h-full object-cover",
5325
+ onError: (e) => {
5326
+ e.target.src = fallbackSrc;
5327
+ }
5328
+ }
5329
+ ) }),
5330
+ /* @__PURE__ */ jsx(ArrowBadge, { isDeposit })
5331
+ ] });
5332
+ };
5333
+ var SwapIconWithBadge = ({ src, alt }) => {
5334
+ const fallbackText = encodeURIComponent((alt || "TOK").slice(0, 3).toUpperCase());
5335
+ const fallbackSrc = `https://placehold.co/40x40?text=${fallbackText}`;
5336
+ const resolvedSrc = src || fallbackSrc;
5337
+ return /* @__PURE__ */ jsxs("div", { className: "relative flex-shrink-0", children: [
5338
+ /* @__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(
5339
+ "img",
5340
+ {
5341
+ src: resolvedSrc,
5342
+ alt,
5343
+ className: "w-full h-full object-cover",
5344
+ onError: (e) => {
5345
+ e.target.src = fallbackSrc;
5346
+ }
5347
+ }
5348
+ ) }),
5349
+ /* @__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" }) })
5350
+ ] });
5351
+ };
5352
+ var AmountDisplay = ({ amount, usdAmount }) => {
5353
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
5354
+ /* @__PURE__ */ jsx(Label, { className: "text-accent-sm-mobile whitespace-nowrap", children: amount }),
5355
+ usdAmount ? /* @__PURE__ */ jsx(Label, { variant: "secondary", className: "whitespace-nowrap", children: usdAmount }) : null
5356
+ ] });
5357
+ };
5358
+ var HistoryListView = ({
5359
+ groups,
5360
+ showLoadMore,
5361
+ onLoadMore,
5362
+ loadMoreLabel,
5363
+ itemClassName
5364
+ }) => {
5365
+ if (groups.length === 0) {
5366
+ return null;
5367
+ }
5368
+ return /* @__PURE__ */ jsxs("div", { className: "self-stretch flex flex-col gap-[16px]", children: [
5369
+ groups.map((group) => /* @__PURE__ */ jsxs("div", { className: "self-stretch flex flex-col gap-sm", children: [
5370
+ /* @__PURE__ */ jsx(DateLabel, { children: group.dateLabel }),
5371
+ group.items.map((item) => /* @__PURE__ */ jsxs(
5372
+ ListItem,
5373
+ {
5374
+ onClick: () => item.onClick(),
5375
+ containerClassName: twMerge("!rounded-xs !border-0 !min-h-[72px]", itemClassName),
5376
+ children: [
5377
+ /* @__PURE__ */ jsx(ListItemLeftSide, { children: item.isSwap ? /* @__PURE__ */ jsx(SwapIconWithBadge, { src: item.iconUrl, alt: item.iconAlt }) : /* @__PURE__ */ jsx(
5378
+ TokenIconWithBadge,
5379
+ {
5380
+ src: item.iconUrl,
5381
+ alt: item.iconAlt,
5382
+ isDeposit: item.isDeposit
5383
+ }
5384
+ ) }),
5385
+ /* @__PURE__ */ jsxs(ListItemContent, { children: [
5386
+ /* @__PURE__ */ jsx(Label, { className: "text-text-lg-mobile", children: item.title }),
5387
+ /* @__PURE__ */ jsx(Label, { variant: "secondary", className: "text-text-tertiary dark:text-text-tertiary-dark", children: item.subtitle })
5388
+ ] }),
5389
+ /* @__PURE__ */ jsx(ListItemRightSide, { children: /* @__PURE__ */ jsx(AmountDisplay, { amount: item.amountFormatted, usdAmount: item.amountUsd }) })
5390
+ ]
5391
+ },
5392
+ item.id
5393
+ ))
5394
+ ] }, group.dateLabel)),
5395
+ showLoadMore && /* @__PURE__ */ jsx("div", { className: "flex justify-center pt-sm", children: /* @__PURE__ */ jsx(TertiaryButton, { onClick: onLoadMore, children: loadMoreLabel }) })
5396
+ ] });
5397
+ };
5398
+ var EarnTokenSelectorView = ({
5399
+ selectedToken,
5400
+ onTokenClick,
5401
+ isLoading,
5402
+ selectTokenLabel,
5403
+ chainLabel,
5404
+ chainImage,
5405
+ chainDirectionLabel,
5406
+ chainDisabledTitle
5407
+ }) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[10px]", children: [
5408
+ /* @__PURE__ */ jsx("div", { className: "flex gap-[10px] w-full", children: /* @__PURE__ */ jsx(
5409
+ "button",
5410
+ {
5411
+ type: "button",
5412
+ onClick: onTokenClick,
5413
+ 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",
5414
+ children: /* @__PURE__ */ jsxs("div", { className: "flex h-full items-center justify-between px-[var(--deframe-widget-size-padding-x-sm)] py-[6px]", children: [
5415
+ /* @__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: [
5416
+ /* @__PURE__ */ jsx(
5417
+ "img",
5418
+ {
5419
+ src: selectedToken.logoURI,
5420
+ alt: selectedToken.symbol,
5421
+ className: "w-6 h-6 rounded-full"
5422
+ }
5423
+ ),
5424
+ /* @__PURE__ */ jsx(TextBody, { as: "span", className: "text-[color:var(--deframe-widget-color-text-primary)]", children: selectedToken.symbol })
5425
+ ] }) : isLoading ? /* @__PURE__ */ jsx(LoadingDots, {}) : /* @__PURE__ */ jsx(TextBody, { as: "span", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: selectTokenLabel }) }),
5426
+ /* @__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)]" }) })
5427
+ ] })
5428
+ }
5429
+ ) }),
5430
+ /* @__PURE__ */ jsxs("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] items-center", children: [
5431
+ /* @__PURE__ */ jsx(TextBody, { as: "span", variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-tertiary)]", children: chainDirectionLabel }),
5432
+ /* @__PURE__ */ jsxs(
5433
+ "button",
5434
+ {
5435
+ type: "button",
5436
+ disabled: true,
5437
+ title: chainDisabledTitle,
5438
+ 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",
5439
+ children: [
5440
+ chainImage && /* @__PURE__ */ jsx("img", { src: chainImage, alt: "", className: "w-3 h-3 rounded-full" }),
5441
+ /* @__PURE__ */ jsx(TextBody, { as: "span", variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: chainLabel }),
5442
+ /* @__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)]" }) })
5443
+ ]
5444
+ }
5445
+ )
5446
+ ] })
5447
+ ] });
5448
+ var EarnAmountInputView = ({
5449
+ value,
5450
+ onChange,
5451
+ ariaLabel,
5452
+ dollarAmountFormatted,
5453
+ availableBalanceFormatted
5454
+ }) => {
5455
+ return /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col items-end justify-between min-h-[86px] text-right", children: [
5456
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end text-[color:var(--deframe-widget-color-text-secondary)]", children: [
5457
+ /* @__PURE__ */ jsx(
5458
+ "input",
5459
+ {
5460
+ placeholder: "0.00",
5461
+ type: "text",
5462
+ inputMode: "decimal",
5463
+ autoComplete: "off",
5464
+ "aria-label": ariaLabel,
5465
+ value,
5466
+ min: "0",
5467
+ step: "any",
5468
+ 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",
5469
+ onChange,
5470
+ onWheel: (event) => {
5471
+ event.currentTarget.blur();
5472
+ }
5473
+ }
5474
+ ),
5475
+ /* @__PURE__ */ jsx(TextBody, { as: "span", variant: "text-small", children: dollarAmountFormatted })
5476
+ ] }),
5477
+ 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 })
5478
+ ] });
5479
+ };
5480
+ var EarnPercentageButtonsView = ({
5481
+ onPercentageClick,
5482
+ maxLabel
5483
+ }) => /* @__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: [
5484
+ /* @__PURE__ */ jsx(PercentageButton, { onClick: () => onPercentageClick(2500), children: "25%" }),
5485
+ /* @__PURE__ */ jsx(PercentageButton, { onClick: () => onPercentageClick(5e3), children: "50%" }),
5486
+ /* @__PURE__ */ jsx(PercentageButton, { onClick: () => onPercentageClick(7500), children: "75%" }),
5487
+ /* @__PURE__ */ jsx(PercentageButton, { onClick: () => onPercentageClick(1e4), children: maxLabel })
5488
+ ] }) });
5489
+ var EarnWithdrawTokenSelectorView = ({
5490
+ selectedToken,
5491
+ onTokenClick,
5492
+ selectTokenLabel,
5493
+ chainLabel,
5494
+ chainImage,
5495
+ chainDirectionLabel,
5496
+ chainDisabledTitle
5497
+ }) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[10px]", children: [
5498
+ /* @__PURE__ */ jsx("div", { className: "flex gap-[10px] w-full", children: /* @__PURE__ */ jsx(
5499
+ "button",
5500
+ {
5501
+ type: "button",
5502
+ onClick: onTokenClick,
5503
+ 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",
5504
+ children: /* @__PURE__ */ jsxs("div", { className: "flex h-full items-center justify-between px-[var(--deframe-widget-size-padding-x-sm)] py-[6px]", children: [
5505
+ /* @__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: [
5506
+ selectedToken.logoURI && /* @__PURE__ */ jsx(
5507
+ "img",
5508
+ {
5509
+ src: selectedToken.logoURI,
5510
+ alt: selectedToken.symbol,
5511
+ className: "w-6 h-6 rounded-full"
5512
+ }
5513
+ ),
5514
+ /* @__PURE__ */ jsx(TextBody, { as: "span", className: "text-[color:var(--deframe-widget-color-text-primary)]", children: selectedToken.symbol })
5515
+ ] }) : /* @__PURE__ */ jsx(TextBody, { as: "span", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: selectTokenLabel }) }),
5516
+ /* @__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)]" }) })
5517
+ ] })
5518
+ }
5519
+ ) }),
5520
+ /* @__PURE__ */ jsxs("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] items-center", children: [
5521
+ /* @__PURE__ */ jsx(TextBody, { as: "span", variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-tertiary)]", children: chainDirectionLabel }),
5522
+ /* @__PURE__ */ jsxs(
5523
+ "button",
5524
+ {
5525
+ type: "button",
5526
+ disabled: true,
5527
+ title: chainDisabledTitle,
5528
+ 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",
5529
+ children: [
5530
+ chainImage && /* @__PURE__ */ jsx("img", { src: chainImage, alt: "", className: "w-3 h-3 rounded-full" }),
5531
+ /* @__PURE__ */ jsx(TextBody, { as: "span", variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: chainLabel }),
5532
+ /* @__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)]" }) })
5533
+ ]
5534
+ }
5535
+ )
5536
+ ] })
5537
+ ] });
5538
+ var EarnNoBalanceNotificationView = ({
5539
+ prompt,
5540
+ actionLabel,
5541
+ onAction
5542
+ }) => /* @__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: [
5543
+ /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-[var(--deframe-widget-size-gap-sm)]", children: [
5544
+ /* @__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" }) }),
5545
+ /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-primary)]", children: prompt }) })
5546
+ ] }),
5547
+ /* @__PURE__ */ jsx(
5548
+ PrimaryButton,
5549
+ {
5550
+ type: "button",
5551
+ onClick: onAction,
5552
+ className: "w-full mt-[var(--deframe-widget-size-gap-sm)]",
5553
+ children: actionLabel
5554
+ }
5555
+ )
5556
+ ] }) }) });
5557
+ var EarnTxStatusCardView = ({
5558
+ statusLabel,
5559
+ isProcessing,
5560
+ successMessage,
5561
+ errorMessage
5562
+ }) => /* @__PURE__ */ jsxs(SectionCard, { children: [
5563
+ /* @__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: [
5564
+ 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: [
5565
+ /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4", fill: "none" }),
5566
+ /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" })
5567
+ ] }),
5568
+ /* @__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 })
5569
+ ] }) }),
5570
+ 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 }),
5571
+ 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 })
5572
+ ] });
5573
+ var EarnBytecodeErrorView = ({
5574
+ errorTitle,
5575
+ errorMessage
5576
+ }) => /* @__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: [
5577
+ /* @__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" }) }),
5578
+ /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
5579
+ /* @__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 }),
5580
+ /* @__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 })
5581
+ ] })
5582
+ ] }) });
5583
+ var EarnPositionCardView = ({
5584
+ balanceUSD,
5585
+ balanceToken,
5586
+ icon,
5587
+ iconAlt
5588
+ }) => /* @__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: [
5589
+ icon && /* @__PURE__ */ jsx(
5590
+ "img",
5591
+ {
5592
+ src: icon,
5593
+ alt: iconAlt,
5594
+ className: "w-6 h-6 rounded-full"
5595
+ }
5596
+ ),
5597
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
5598
+ /* @__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 }),
5599
+ /* @__PURE__ */ jsx(TextBody, { as: "span", variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-tertiary)]", children: balanceToken })
5600
+ ] })
5601
+ ] }) }) }) });
5602
+ var EarnDepositFormView = ({
5603
+ // Header / Layout
5604
+ headerTitle,
5605
+ onBack,
5606
+ progress,
5607
+ pageTitle,
5608
+ subtitle,
5609
+ onSubmit,
5610
+ // Token selector
5611
+ selectedToken,
5612
+ onTokenClick,
5613
+ isLoadingToken,
5614
+ selectTokenLabel,
5615
+ // Chain selector
5616
+ chainLabel,
5617
+ chainImage,
5618
+ chainDirectionLabel,
5619
+ chainDisabledTitle,
5620
+ // Amount input
5621
+ amountValue,
5622
+ onAmountChange,
5623
+ amountAriaLabel,
5624
+ dollarAmountFormatted,
5625
+ availableBalanceFormatted,
5626
+ // No balance notification
5627
+ showNoBalanceNotification,
5628
+ noBalancePrompt,
5629
+ goToSwapLabel,
5630
+ onGoToSwap,
5631
+ // Percentage buttons
5632
+ onPercentageClick,
5633
+ maxLabel,
5634
+ // TX status
5635
+ showTxStatus,
5636
+ txStatusLabel,
5637
+ isTxProcessing,
5638
+ isTxSuccess,
5639
+ isTxError,
5640
+ txSuccessMessage,
5641
+ txErrorMessage,
5642
+ // Bytecode error
5643
+ bytecodeErrorMessage,
5644
+ transactionErrorLabel,
5645
+ // Quote details
5646
+ isQuoteValid,
5647
+ isFetchingQuote,
5648
+ quoteDetails,
5649
+ // Submit button
5650
+ submitDisabled,
5651
+ submitButtonText
5652
+ }) => /* @__PURE__ */ jsxs(BackgroundContainer, { children: [
5653
+ /* @__PURE__ */ jsx(DetailsHeader, { title: headerTitle, onBack }),
5654
+ /* @__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: [
5655
+ /* @__PURE__ */ jsx("div", { className: "w-full px-[var(--deframe-widget-size-padding-x-md)]", children: /* @__PURE__ */ jsx(ProgressIndicator, { progress }) }),
5656
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)] px-[var(--deframe-widget-size-padding-x-md)]", children: [
5657
+ /* @__PURE__ */ jsx(TextHeading, { variant: "h5", children: pageTitle }),
5658
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: subtitle })
5659
+ ] }),
5660
+ /* @__PURE__ */ jsxs("form", { onSubmit, children: [
5661
+ /* @__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: [
5662
+ /* @__PURE__ */ jsx(
5663
+ EarnTokenSelectorView,
5664
+ {
5665
+ selectedToken,
5666
+ onTokenClick,
5667
+ isLoading: isLoadingToken,
5668
+ selectTokenLabel,
5669
+ chainLabel,
5670
+ chainImage,
5671
+ chainDirectionLabel,
5672
+ chainDisabledTitle
5673
+ }
5674
+ ),
5675
+ /* @__PURE__ */ jsx(
5676
+ EarnAmountInputView,
5677
+ {
5678
+ value: amountValue,
5679
+ onChange: onAmountChange,
5680
+ ariaLabel: amountAriaLabel,
5681
+ dollarAmountFormatted,
5682
+ availableBalanceFormatted
5683
+ }
5684
+ )
5685
+ ] }) }) }),
5686
+ showNoBalanceNotification && /* @__PURE__ */ jsx(
5687
+ EarnNoBalanceNotificationView,
5688
+ {
5689
+ prompt: noBalancePrompt,
5690
+ actionLabel: goToSwapLabel,
5691
+ onAction: onGoToSwap
5692
+ }
5693
+ ),
5694
+ /* @__PURE__ */ jsx(
5695
+ EarnPercentageButtonsView,
5696
+ {
5697
+ onPercentageClick,
5698
+ maxLabel
5699
+ }
5700
+ ),
5701
+ /* @__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: [
5702
+ showTxStatus && /* @__PURE__ */ jsx(
5703
+ EarnTxStatusCardView,
5704
+ {
5705
+ statusLabel: txStatusLabel,
5706
+ isProcessing: isTxProcessing,
5707
+ successMessage: isTxSuccess ? txSuccessMessage : void 0,
5708
+ errorMessage: isTxError ? txErrorMessage : void 0
5709
+ }
5710
+ ),
5711
+ bytecodeErrorMessage && /* @__PURE__ */ jsx(
5712
+ EarnBytecodeErrorView,
5713
+ {
5714
+ errorTitle: transactionErrorLabel,
5715
+ errorMessage: bytecodeErrorMessage
5716
+ }
5717
+ ),
5718
+ isQuoteValid && !isFetchingQuote && !bytecodeErrorMessage && /* @__PURE__ */ jsx(SectionCard, { children: quoteDetails.map((detail, idx) => /* @__PURE__ */ jsxs(InfoRow, { borderBottom: detail.borderBottom, children: [
5719
+ /* @__PURE__ */ jsx(InfoLabel, { children: detail.label }),
5720
+ /* @__PURE__ */ jsx(InfoValue, { children: detail.value })
5721
+ ] }, `${detail.label}-${idx}`)) })
5722
+ ] }),
5723
+ /* @__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(
5724
+ PrimaryButton,
5725
+ {
5726
+ type: "submit",
5727
+ className: "w-full text-[#252050]",
5728
+ disabled: submitDisabled,
5729
+ "aria-disabled": submitDisabled,
5730
+ children: submitButtonText
5731
+ }
5732
+ ) })
5733
+ ] })
5734
+ ] }) })
5735
+ ] });
5736
+ var EarnWithdrawFormView = ({
5737
+ // Header / Layout
5738
+ headerTitle,
5739
+ onBack,
5740
+ progress,
5741
+ pageTitle,
5742
+ subtitle,
5743
+ onSubmit,
5744
+ // Position card
5745
+ positionBalanceUSD,
5746
+ positionBalanceToken,
5747
+ strategyIcon,
5748
+ strategyName,
5749
+ // Token selector
5750
+ selectedToken,
5751
+ onTokenClick,
5752
+ selectTokenLabel,
5753
+ // Chain selector
5754
+ chainLabel,
5755
+ chainImage,
5756
+ chainDirectionLabel,
5757
+ chainDisabledTitle,
5758
+ // Amount input
5759
+ amountValue,
5760
+ onAmountChange,
5761
+ amountAriaLabel,
5762
+ dollarAmountFormatted,
5763
+ // Percentage buttons
5764
+ onPercentageClick,
5765
+ maxLabel,
5766
+ // TX status
5767
+ showTxStatus,
5768
+ txStatusLabel,
5769
+ isTxProcessing,
5770
+ isTxSuccess,
5771
+ isTxError,
5772
+ txSuccessMessage,
5773
+ txErrorMessage,
5774
+ // Bytecode error
5775
+ bytecodeErrorMessage,
5776
+ transactionErrorLabel,
5777
+ // Quote details
5778
+ isQuoteValid,
5779
+ isFetchingQuote,
5780
+ summaryTitle,
5781
+ summaryItems,
5782
+ // Submit button
5783
+ submitDisabled,
5784
+ submitButtonText
5785
+ }) => /* @__PURE__ */ jsxs(BackgroundContainer, { children: [
5786
+ /* @__PURE__ */ jsx(DetailsHeader, { title: headerTitle, onBack }),
5787
+ /* @__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: [
5788
+ /* @__PURE__ */ jsx("div", { className: "w-full px-[var(--deframe-widget-size-padding-x-md)]", children: /* @__PURE__ */ jsx(ProgressIndicator, { progress }) }),
5789
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)] px-[var(--deframe-widget-size-padding-x-md)]", children: [
5790
+ /* @__PURE__ */ jsx(TextHeading, { variant: "h5", children: pageTitle }),
5791
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: subtitle })
5792
+ ] }),
5793
+ /* @__PURE__ */ jsxs("form", { onSubmit, children: [
5794
+ /* @__PURE__ */ jsx(
5795
+ EarnPositionCardView,
5796
+ {
5797
+ balanceUSD: positionBalanceUSD,
5798
+ balanceToken: positionBalanceToken,
5799
+ icon: strategyIcon,
5800
+ iconAlt: strategyName
5801
+ }
5802
+ ),
5803
+ /* @__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: [
5804
+ /* @__PURE__ */ jsx(
5805
+ EarnWithdrawTokenSelectorView,
5806
+ {
5807
+ selectedToken,
5808
+ onTokenClick,
5809
+ selectTokenLabel,
5810
+ chainLabel,
5811
+ chainImage,
5812
+ chainDirectionLabel,
5813
+ chainDisabledTitle
5814
+ }
5815
+ ),
5816
+ /* @__PURE__ */ jsx(
5817
+ EarnAmountInputView,
5818
+ {
5819
+ value: amountValue,
5820
+ onChange: onAmountChange,
5821
+ ariaLabel: amountAriaLabel,
5822
+ dollarAmountFormatted
5823
+ }
5824
+ )
5825
+ ] }) }) }),
5826
+ /* @__PURE__ */ jsx(
5827
+ EarnPercentageButtonsView,
5828
+ {
5829
+ onPercentageClick,
5830
+ maxLabel
5831
+ }
5832
+ ),
5833
+ /* @__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: [
5834
+ showTxStatus && /* @__PURE__ */ jsx(
5835
+ EarnTxStatusCardView,
5836
+ {
5837
+ statusLabel: txStatusLabel,
5838
+ isProcessing: isTxProcessing,
5839
+ successMessage: isTxSuccess ? txSuccessMessage : void 0,
5840
+ errorMessage: isTxError ? txErrorMessage : void 0
5841
+ }
5842
+ ),
5843
+ bytecodeErrorMessage && /* @__PURE__ */ jsx(
5844
+ EarnBytecodeErrorView,
5845
+ {
5846
+ errorTitle: transactionErrorLabel,
5847
+ errorMessage: bytecodeErrorMessage
5848
+ }
5849
+ ),
5850
+ isQuoteValid && !isFetchingQuote && !bytecodeErrorMessage && /* @__PURE__ */ jsx(
5851
+ SummaryDetails,
5852
+ {
5853
+ title: summaryTitle,
5854
+ items: summaryItems,
5855
+ defaultOpen: false,
5856
+ className: "bg-[var(--deframe-widget-color-bg-secondary)]"
5857
+ }
5858
+ )
5859
+ ] }),
5860
+ /* @__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(
5861
+ PrimaryButton,
5862
+ {
5863
+ type: "submit",
5864
+ className: "w-full",
5865
+ disabled: submitDisabled,
5866
+ "aria-disabled": submitDisabled,
5867
+ children: submitButtonText
5868
+ }
5869
+ ) })
5870
+ ] })
5871
+ ] }) })
5872
+ ] });
5873
+ var EarnDepositProcessingView = ({
5874
+ progress,
5875
+ title,
5876
+ descriptionPrefix,
5877
+ activityHistoryText,
5878
+ onGoToHistory,
5879
+ onBack,
5880
+ strategyName,
5881
+ apyLabel,
5882
+ apyValue,
5883
+ iconSrc,
5884
+ iconAlt,
5885
+ amountUSD,
5886
+ amountToken,
5887
+ transactionSteps,
5888
+ processingDetailsLabels
5889
+ }) => {
5890
+ return /* @__PURE__ */ jsxs(
5891
+ TransactionScreen,
5892
+ {
5893
+ progress,
5894
+ iconType: "processing",
5895
+ title,
5896
+ description: /* @__PURE__ */ jsxs(Fragment, { children: [
5897
+ descriptionPrefix,
5898
+ " ",
5899
+ /* @__PURE__ */ jsx(
5900
+ "span",
5901
+ {
5902
+ className: "[font-weight:var(--deframe-widget-font-weight-semibold)] underline underline-offset-2 cursor-pointer text-[color:var(--deframe-widget-color-brand-primary)]",
5903
+ onClick: onGoToHistory,
5904
+ children: activityHistoryText
5905
+ }
5906
+ )
5907
+ ] }),
5908
+ onBack,
5909
+ children: [
5910
+ /* @__PURE__ */ jsx(
5911
+ TransactionScreenInvestmentCard,
5912
+ {
5913
+ strategyName,
5914
+ apyLabel,
5915
+ apyValue,
5916
+ iconSrc,
5917
+ iconAlt,
5918
+ amountUSD,
5919
+ amountToken
5920
+ }
5921
+ ),
5922
+ /* @__PURE__ */ jsx(
5923
+ TransactionProcessingDetails,
5924
+ {
5925
+ steps: transactionSteps,
5926
+ defaultOpen: true,
5927
+ className: "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-primary)]",
5928
+ labels: processingDetailsLabels
5929
+ }
5930
+ )
5931
+ ]
5932
+ }
5933
+ );
5934
+ };
5935
+ var EarnDepositSuccessView = ({
5936
+ title,
5937
+ descriptionPrefix,
5938
+ formattedAmount,
5939
+ tokenSymbol,
5940
+ descriptionSuffix,
5941
+ descriptionLinkText,
5942
+ onClose,
5943
+ exploreMoreLabel,
5944
+ strategyName,
5945
+ apyLabel,
5946
+ apyValue,
5947
+ iconSrc,
5948
+ iconAlt,
5949
+ amountUSD,
5950
+ amountToken,
5951
+ transactionSteps,
5952
+ processingDetailsLabels
5953
+ }) => {
5954
+ return /* @__PURE__ */ jsxs(
5955
+ TransactionScreen,
5956
+ {
5957
+ progress: 100,
5958
+ iconType: "success",
5959
+ title,
5960
+ description: /* @__PURE__ */ jsxs(Fragment, { children: [
5961
+ descriptionPrefix,
5962
+ /* @__PURE__ */ jsxs("strong", { className: "[font-weight:var(--deframe-widget-font-weight-semibold)]", children: [
5963
+ " ",
5964
+ formattedAmount,
5965
+ " ",
5966
+ tokenSymbol,
5967
+ " "
5968
+ ] }),
5969
+ descriptionSuffix,
5970
+ " ",
5971
+ /* @__PURE__ */ jsx(
5972
+ "strong",
5973
+ {
5974
+ className: "[font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-brand-primary)] cursor-pointer",
5975
+ onClick: onClose,
5976
+ children: descriptionLinkText
5977
+ }
5978
+ )
5979
+ ] }),
5980
+ onClose,
5981
+ actions: /* @__PURE__ */ jsx(PrimaryButton, { className: "w-full", onClick: onClose, children: exploreMoreLabel }),
5982
+ children: [
5983
+ /* @__PURE__ */ jsx(
5984
+ TransactionScreenInvestmentCard,
5985
+ {
5986
+ strategyName,
5987
+ apyLabel,
5988
+ apyValue,
5989
+ iconSrc,
5990
+ iconAlt,
5991
+ amountUSD,
5992
+ amountToken
5993
+ }
5994
+ ),
5995
+ /* @__PURE__ */ jsx(
5996
+ TransactionProcessingDetails,
5997
+ {
5998
+ steps: transactionSteps,
5999
+ defaultOpen: true,
6000
+ className: "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-primary)]",
6001
+ labels: processingDetailsLabels
6002
+ }
6003
+ )
6004
+ ]
6005
+ }
6006
+ );
6007
+ };
6008
+ var EarnDepositWarningView = ({
6009
+ progress,
6010
+ title,
6011
+ description,
6012
+ backTitle,
6013
+ onBack,
6014
+ cancelLabel,
6015
+ onCancel,
6016
+ retryLabel,
6017
+ onRetry,
6018
+ strategyName,
6019
+ apyLabel,
6020
+ apyValue,
6021
+ iconSrc,
6022
+ iconAlt,
6023
+ amountUSD,
6024
+ amountToken,
6025
+ transactionSteps,
6026
+ processingDetailsLabels
6027
+ }) => {
6028
+ return /* @__PURE__ */ jsxs(
6029
+ TransactionScreen,
6030
+ {
6031
+ progress,
6032
+ iconType: "warning",
6033
+ title,
6034
+ description,
6035
+ onBack,
6036
+ backTitle,
6037
+ actions: /* @__PURE__ */ jsxs("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] w-full", children: [
6038
+ /* @__PURE__ */ jsx(SecondaryButton, { className: "flex-1", onClick: onCancel, children: cancelLabel }),
6039
+ /* @__PURE__ */ jsx(PrimaryButton, { className: "flex-1", onClick: onRetry, children: retryLabel })
6040
+ ] }),
6041
+ children: [
6042
+ /* @__PURE__ */ jsx(
6043
+ TransactionScreenInvestmentCard,
6044
+ {
6045
+ strategyName,
6046
+ apyLabel,
6047
+ apyValue,
6048
+ iconSrc,
6049
+ iconAlt,
6050
+ amountUSD,
6051
+ amountToken
6052
+ }
6053
+ ),
6054
+ /* @__PURE__ */ jsx(
6055
+ TransactionProcessingDetails,
6056
+ {
6057
+ steps: transactionSteps,
6058
+ defaultOpen: true,
6059
+ className: "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-primary)]",
6060
+ labels: processingDetailsLabels
6061
+ }
6062
+ )
6063
+ ]
6064
+ }
6065
+ );
6066
+ };
6067
+ var EarnDepositFailedView = ({
6068
+ progress,
6069
+ title,
6070
+ description,
6071
+ backTitle,
6072
+ onBack,
6073
+ viewExplorerLabel,
6074
+ onViewExplorer,
6075
+ viewExplorerDisabled,
6076
+ retryLabel,
6077
+ onRetry,
6078
+ strategyName,
6079
+ apyLabel,
6080
+ apyValue,
6081
+ iconSrc,
6082
+ iconAlt,
6083
+ iconGradient,
6084
+ amountUSD,
6085
+ amountToken,
6086
+ transactionSteps,
6087
+ processingDetailsLabels
6088
+ }) => {
6089
+ return /* @__PURE__ */ jsxs(
6090
+ TransactionScreen,
6091
+ {
6092
+ progress,
6093
+ iconType: "warning",
6094
+ iconGradient,
6095
+ title,
6096
+ description,
6097
+ onBack,
6098
+ backTitle,
6099
+ actions: /* @__PURE__ */ jsxs("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] w-full", children: [
6100
+ /* @__PURE__ */ jsx(SecondaryButton, { className: "flex-1", onClick: onViewExplorer, disabled: viewExplorerDisabled, children: viewExplorerLabel }),
6101
+ /* @__PURE__ */ jsx(PrimaryButton, { className: "flex-1", onClick: onRetry, children: retryLabel })
6102
+ ] }),
6103
+ children: [
6104
+ /* @__PURE__ */ jsx(
6105
+ TransactionScreenInvestmentCard,
6106
+ {
6107
+ strategyName,
6108
+ apyLabel,
6109
+ apyValue,
6110
+ iconSrc,
6111
+ iconAlt,
6112
+ amountUSD,
6113
+ amountToken
6114
+ }
6115
+ ),
6116
+ /* @__PURE__ */ jsx(
6117
+ TransactionProcessingDetails,
6118
+ {
6119
+ steps: transactionSteps,
6120
+ defaultOpen: true,
6121
+ className: "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-primary)]",
6122
+ labels: processingDetailsLabels
6123
+ }
6124
+ )
6125
+ ]
6126
+ }
6127
+ );
6128
+ };
6129
+ var EarnWithdrawProcessingView = ({
6130
+ progress,
6131
+ title,
6132
+ descriptionPrefix,
6133
+ activityHistoryText,
6134
+ descriptionSuffix,
6135
+ onGoToHistory,
6136
+ onBack,
6137
+ strategyName,
6138
+ apyLabel,
6139
+ apyValue,
6140
+ iconSrc,
6141
+ iconAlt,
6142
+ amountUSD,
6143
+ amountToken,
6144
+ transactionSteps,
6145
+ processingDetailsLabels
6146
+ }) => {
6147
+ return /* @__PURE__ */ jsxs(
6148
+ TransactionScreen,
6149
+ {
6150
+ progress,
6151
+ iconType: "processing",
6152
+ title,
6153
+ description: /* @__PURE__ */ jsxs(Fragment, { children: [
6154
+ descriptionPrefix,
6155
+ " ",
6156
+ /* @__PURE__ */ jsx(
6157
+ "span",
6158
+ {
6159
+ className: "[font-weight:var(--deframe-widget-font-weight-semibold)] underline underline-offset-2 cursor-pointer text-[color:var(--deframe-widget-color-brand-primary)]",
6160
+ onClick: onGoToHistory,
6161
+ children: activityHistoryText
6162
+ }
6163
+ ),
6164
+ " ",
6165
+ descriptionSuffix
6166
+ ] }),
6167
+ onBack,
6168
+ children: [
6169
+ /* @__PURE__ */ jsx(
6170
+ TransactionScreenInvestmentCard,
6171
+ {
6172
+ strategyName,
6173
+ apyLabel,
6174
+ apyValue,
6175
+ iconSrc,
6176
+ iconAlt,
6177
+ amountUSD,
6178
+ amountToken
6179
+ }
6180
+ ),
6181
+ /* @__PURE__ */ jsx(
6182
+ TransactionProcessingDetails,
6183
+ {
6184
+ steps: transactionSteps,
6185
+ defaultOpen: true,
6186
+ className: "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-primary)]",
6187
+ labels: processingDetailsLabels
6188
+ }
6189
+ )
6190
+ ]
6191
+ }
6192
+ );
6193
+ };
6194
+ var EarnWithdrawSuccessView = ({
6195
+ title,
6196
+ descriptionPrefix,
6197
+ formattedAmount,
6198
+ tokenSymbol,
6199
+ descriptionSuffix,
6200
+ descriptionLinkText,
6201
+ onClose,
6202
+ exploreMoreLabel,
6203
+ strategyName,
6204
+ apyLabel,
6205
+ apyValue,
6206
+ iconSrc,
6207
+ iconAlt,
6208
+ amountUSD,
6209
+ amountToken,
6210
+ transactionSteps,
6211
+ processingDetailsLabels
6212
+ }) => {
6213
+ return /* @__PURE__ */ jsxs(
6214
+ TransactionScreen,
6215
+ {
6216
+ progress: 100,
6217
+ iconType: "success",
6218
+ title,
6219
+ description: /* @__PURE__ */ jsxs(Fragment, { children: [
6220
+ descriptionPrefix,
6221
+ /* @__PURE__ */ jsxs("strong", { className: "[font-weight:var(--deframe-widget-font-weight-semibold)]", children: [
6222
+ " ",
6223
+ formattedAmount,
6224
+ " ",
6225
+ tokenSymbol,
6226
+ " "
6227
+ ] }),
6228
+ descriptionSuffix,
6229
+ " ",
6230
+ /* @__PURE__ */ jsx("strong", { className: "[font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-brand-primary)]", children: descriptionLinkText })
6231
+ ] }),
6232
+ onClose,
6233
+ actions: /* @__PURE__ */ jsx(PrimaryButton, { className: "w-full", onClick: onClose, children: exploreMoreLabel }),
6234
+ children: [
6235
+ /* @__PURE__ */ jsx(
6236
+ TransactionScreenInvestmentCard,
6237
+ {
6238
+ strategyName,
6239
+ apyLabel,
6240
+ apyValue,
6241
+ iconSrc,
6242
+ iconAlt,
6243
+ amountUSD,
6244
+ amountToken
6245
+ }
6246
+ ),
6247
+ /* @__PURE__ */ jsx(
6248
+ TransactionProcessingDetails,
6249
+ {
6250
+ steps: transactionSteps,
6251
+ defaultOpen: true,
6252
+ className: "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-primary)]",
6253
+ labels: processingDetailsLabels
6254
+ }
6255
+ )
6256
+ ]
6257
+ }
6258
+ );
6259
+ };
6260
+ var EarnWithdrawWarningView = ({
6261
+ progress,
6262
+ title,
6263
+ description,
6264
+ backTitle,
6265
+ onBack,
6266
+ cancelLabel,
6267
+ onCancel,
6268
+ retryLabel,
6269
+ onRetry,
6270
+ strategyName,
6271
+ apyLabel,
6272
+ apyValue,
6273
+ iconSrc,
6274
+ iconAlt,
6275
+ amountUSD,
6276
+ amountToken,
6277
+ transactionSteps,
6278
+ processingDetailsLabels
6279
+ }) => {
6280
+ return /* @__PURE__ */ jsxs(
6281
+ TransactionScreen,
6282
+ {
6283
+ progress,
6284
+ iconType: "warning",
6285
+ title,
6286
+ description,
6287
+ onBack,
6288
+ backTitle,
6289
+ actions: /* @__PURE__ */ jsxs("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] w-full", children: [
6290
+ /* @__PURE__ */ jsx(SecondaryButton, { className: "flex-1", onClick: onCancel, children: cancelLabel }),
6291
+ /* @__PURE__ */ jsx(PrimaryButton, { className: "flex-1", onClick: onRetry, children: retryLabel })
6292
+ ] }),
6293
+ children: [
6294
+ /* @__PURE__ */ jsx(
6295
+ TransactionScreenInvestmentCard,
6296
+ {
6297
+ strategyName,
6298
+ apyLabel,
6299
+ apyValue,
6300
+ iconSrc,
6301
+ iconAlt,
6302
+ amountUSD,
6303
+ amountToken
6304
+ }
6305
+ ),
6306
+ /* @__PURE__ */ jsx(
6307
+ TransactionProcessingDetails,
6308
+ {
6309
+ steps: transactionSteps,
6310
+ defaultOpen: true,
6311
+ className: "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-primary)]",
6312
+ labels: processingDetailsLabels
6313
+ }
6314
+ )
6315
+ ]
6316
+ }
6317
+ );
6318
+ };
6319
+ var EarnWithdrawFailedView = ({
6320
+ progress,
6321
+ title,
6322
+ description,
6323
+ backTitle,
6324
+ onBack,
6325
+ viewExplorerLabel,
6326
+ onViewExplorer,
6327
+ viewExplorerDisabled,
6328
+ retryLabel,
6329
+ onRetry,
6330
+ strategyName,
6331
+ apyLabel,
6332
+ apyValue,
6333
+ iconSrc,
6334
+ iconAlt,
6335
+ iconGradient,
6336
+ amountUSD,
6337
+ amountToken,
6338
+ transactionSteps,
6339
+ processingDetailsLabels
6340
+ }) => {
6341
+ return /* @__PURE__ */ jsxs(
6342
+ TransactionScreen,
6343
+ {
6344
+ progress,
6345
+ iconType: "warning",
6346
+ iconGradient,
6347
+ title,
6348
+ description,
6349
+ onBack,
6350
+ backTitle,
6351
+ actions: /* @__PURE__ */ jsxs("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] w-full", children: [
6352
+ /* @__PURE__ */ jsx(SecondaryButton, { className: "flex-1", onClick: onViewExplorer, disabled: viewExplorerDisabled, children: viewExplorerLabel }),
6353
+ /* @__PURE__ */ jsx(PrimaryButton, { className: "flex-1", onClick: onRetry, children: retryLabel })
6354
+ ] }),
6355
+ children: [
6356
+ /* @__PURE__ */ jsx(
6357
+ TransactionScreenInvestmentCard,
6358
+ {
6359
+ strategyName,
6360
+ apyLabel,
6361
+ apyValue,
6362
+ iconSrc,
6363
+ iconAlt,
6364
+ amountUSD,
6365
+ amountToken
6366
+ }
6367
+ ),
6368
+ /* @__PURE__ */ jsx(
6369
+ TransactionProcessingDetails,
6370
+ {
6371
+ steps: transactionSteps,
6372
+ defaultOpen: true,
6373
+ className: "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-primary)]",
6374
+ labels: processingDetailsLabels
6375
+ }
6376
+ )
6377
+ ]
6378
+ }
6379
+ );
6380
+ };
4448
6381
 
4449
- export { ActionButton, ActionSheet, AddressDisplay, BackgroundContainer, BannerNotification, ChooseAStrategyActionsheetView, ChooseAnAssetSwapView, CloseButton_default as CloseButton, 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, SwapProcessingViewSimple, SwapQuoteBlockchainCostsView, SwapQuoteDetailsView, SwapQuoteErrorsView, SwapQuoteHeaderView, SwapSignatureWarningView, SwapSlippageToleranceButtonsView, SwapSuccessView, SwapSuccessViewSimple, SwapToCardView, SwapTokenSelectorView, SwapTransactionFailedView, SwapTransactionFailedViewSimple, Tabs, TabsContent, TabsList, TabsTrigger, TertiaryButton, Text_default as Text, TextAccent, TextBody, TextHeading, Title, TokenWithChainBadge, TransactionProcessingDetails, TransactionScreen, TransactionScreenIcon, TransactionScreenInvestmentCard, WalletConnectPanel, WalletItem, ConnectWalletList as WalletList, WalletListContainer };
6382
+ 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 };
4450
6383
  //# sourceMappingURL=index.mjs.map
4451
6384
  //# sourceMappingURL=index.mjs.map