@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.
Files changed (8) hide show
  1. package/dist/index.d.mts +715 -6
  2. package/dist/index.d.ts +715 -6
  3. package/dist/index.js +2005 -34
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +1970 -37
  6. package/dist/index.mjs.map +1 -1
  7. package/dist/styles.css +343 -113
  8. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -7,6 +7,7 @@ var React6 = require('react');
7
7
  var framerMotion = require('framer-motion');
8
8
  var md = require('react-icons/md');
9
9
  var io5 = require('react-icons/io5');
10
+ var pi = require('react-icons/pi');
10
11
 
11
12
  function _interopNamespace(e) {
12
13
  if (e && e.__esModule) return e;
@@ -188,14 +189,14 @@ function PrimaryButton(_a) {
188
189
  /** enabled state */
189
190
  enabled: [
190
191
  "hover:opacity-90",
191
- "text-[var(--deframe-widget-color-text-primary)]",
192
+ "text-[color:var(--deframe-widget-color-text-inverse)]",
192
193
  "bg-[var(--deframe-widget-color-brand-primary)]",
193
194
  "border-[color:var(--deframe-widget-color-border-primary)]",
194
195
  "cursor-pointer"
195
196
  ].join(" "),
196
197
  /** disabled state */
197
198
  disabled: [
198
- "text-[var(--deframe-widget-color-text-primary-disabled)]",
199
+ "text-[color:var(--deframe-widget-color-text-inverse-disabled)]",
199
200
  "bg-[var(--deframe-widget-color-brand-primary-disabled)]",
200
201
  "border-[color:var(--deframe-widget-color-border-primary-disabled)]",
201
202
  "cursor-not-allowed"
@@ -251,7 +252,7 @@ function SecondaryButton(_a) {
251
252
  ].join(" ");
252
253
  const stateClasses = {
253
254
  enabled: [
254
- "text-[color:var(--deframe-widget-color-brand-secondary)]",
255
+ "text-[color:var(--deframe-widget-color-text-secondary)]",
255
256
  "border-[color:var(--deframe-widget-color-border-secondary)]",
256
257
  "hover:opacity-90",
257
258
  "cursor-pointer"
@@ -311,7 +312,7 @@ function TertiaryButton(_a) {
311
312
  ].join(" ");
312
313
  const stateClasses = {
313
314
  enabled: [
314
- "text-[color:var(--deframe-widget-color-brand-tertiary)]",
315
+ "text-[color:var(--deframe-widget-color-text-tertiary)]",
315
316
  "hover:opacity-90",
316
317
  "cursor-pointer"
317
318
  ].join(" "),
@@ -438,12 +439,12 @@ function Link(_a) {
438
439
  ].join(" ");
439
440
  const stateClasses = {
440
441
  enabled: [
441
- "text-[color:var(--deframe-widget-color-brand-primary)]",
442
+ "text-[color:var(--deframe-widget-color-text-highlight)]",
442
443
  "underline",
443
444
  "cursor-pointer"
444
445
  ].join(" "),
445
446
  disabled: [
446
- "text-[var(--deframe-widget-color-brand-primary-disabled)]",
447
+ "text-[color:var(--deframe-widget-color-text-highlight-disabled)]",
447
448
  "cursor-not-allowed",
448
449
  "pointer-events-none"
449
450
  ].join(" ")
@@ -905,25 +906,35 @@ var Text = React6__namespace.forwardRef(
905
906
  var _b = _a, {
906
907
  children,
907
908
  as: Component = "p",
909
+ disabled = false,
908
910
  className = ""
909
911
  } = _b, props = __objRest(_b, [
910
912
  "children",
911
913
  "as",
914
+ "disabled",
912
915
  "className"
913
916
  ]);
914
917
  const baseClasses = [
915
918
  "[font-family:var(--deframe-widget-font-family)]",
916
919
  "[font-size:var(--deframe-widget-font-size-md)]",
917
920
  "[line-height:var(--deframe-widget-font-leading-md)]",
918
- "[font-weight:var(--deframe-widget-font-weight-regular)]",
919
- "text-[color:var(--deframe-widget-color-text-primary)]"
921
+ "[font-weight:var(--deframe-widget-font-weight-regular)]"
920
922
  ].join(" ");
921
- const textClasses = tailwindMerge.twMerge(baseClasses, className);
923
+ const stateClasses = {
924
+ enabled: "text-[color:var(--deframe-widget-color-text-primary)]",
925
+ disabled: "text-[color:var(--deframe-widget-color-text-primary-disabled)]"
926
+ };
927
+ const textClasses = tailwindMerge.twMerge(
928
+ baseClasses,
929
+ stateClasses[disabled ? "disabled" : "enabled"],
930
+ className
931
+ );
922
932
  return React6__namespace.createElement(
923
933
  Component,
924
934
  __spreadValues({
925
935
  ref,
926
- className: textClasses
936
+ className: textClasses,
937
+ "aria-disabled": disabled || void 0
927
938
  }, props),
928
939
  children
929
940
  );
@@ -936,10 +947,12 @@ var TextAccent = React6__namespace.forwardRef(
936
947
  var _b = _a, {
937
948
  as = "span",
938
949
  variant = "accent-medium",
950
+ disabled = false,
939
951
  className = ""
940
952
  } = _b, props = __objRest(_b, [
941
953
  "as",
942
954
  "variant",
955
+ "disabled",
943
956
  "className"
944
957
  ]);
945
958
  const accentVariants = {
@@ -959,8 +972,16 @@ var TextAccent = React6__namespace.forwardRef(
959
972
  "[font-weight:var(--deframe-widget-font-weight-semibold)]"
960
973
  ].join(" ")
961
974
  };
975
+ const stateClasses = {
976
+ enabled: "text-[color:var(--deframe-widget-color-text-primary)]",
977
+ disabled: "text-[color:var(--deframe-widget-color-text-primary-disabled)]"
978
+ };
962
979
  const variantClass = accentVariants[variant];
963
- const accentClasses = tailwindMerge.twMerge(variantClass, className);
980
+ const accentClasses = tailwindMerge.twMerge(
981
+ variantClass,
982
+ stateClasses[disabled ? "disabled" : "enabled"],
983
+ className
984
+ );
964
985
  return /* @__PURE__ */ jsxRuntime.jsx(
965
986
  Text_default,
966
987
  __spreadValues({
@@ -968,7 +989,8 @@ var TextAccent = React6__namespace.forwardRef(
968
989
  as,
969
990
  className: accentClasses,
970
991
  "data-slot": "text-accent",
971
- "data-test-id": "text-accent"
992
+ "data-test-id": "text-accent",
993
+ "aria-disabled": disabled || void 0
972
994
  }, props)
973
995
  );
974
996
  }
@@ -979,18 +1001,15 @@ var TextBody = React6__namespace.forwardRef(
979
1001
  var _b = _a, {
980
1002
  as = "p",
981
1003
  variant = "text-medium",
1004
+ disabled = false,
982
1005
  className = ""
983
1006
  } = _b, props = __objRest(_b, [
984
1007
  "as",
985
1008
  "variant",
1009
+ "disabled",
986
1010
  "className"
987
1011
  ]);
988
1012
  const bodyVariants = {
989
- "[font-size:var(--deframe-widget-font-size-lg)] [line-height:var(--deframe-widget-font-leading-lg)]": [
990
- "[font-size:var(--deframe-widget-font-size-lg)]",
991
- "[line-height:var(--deframe-widget-font-leading-lg)]",
992
- "[font-weight:var(--deframe-widget-font-weight-regular)]"
993
- ].join(" "),
994
1013
  "text-large": [
995
1014
  "[font-size:var(--deframe-widget-font-size-lg)]",
996
1015
  "[line-height:var(--deframe-widget-font-leading-lg)]",
@@ -1007,8 +1026,16 @@ var TextBody = React6__namespace.forwardRef(
1007
1026
  "[font-weight:var(--deframe-widget-font-weight-regular)]"
1008
1027
  ].join(" ")
1009
1028
  };
1029
+ const stateClasses = {
1030
+ enabled: "text-[color:var(--deframe-widget-color-text-primary)]",
1031
+ disabled: "text-[color:var(--deframe-widget-color-text-primary-disabled)]"
1032
+ };
1010
1033
  const variantClass = bodyVariants[variant];
1011
- const bodyClasses = tailwindMerge.twMerge(variantClass, className);
1034
+ const bodyClasses = tailwindMerge.twMerge(
1035
+ variantClass,
1036
+ stateClasses[disabled ? "disabled" : "enabled"],
1037
+ className
1038
+ );
1012
1039
  return /* @__PURE__ */ jsxRuntime.jsx(
1013
1040
  Text_default,
1014
1041
  __spreadValues({
@@ -1016,7 +1043,8 @@ var TextBody = React6__namespace.forwardRef(
1016
1043
  as,
1017
1044
  className: bodyClasses,
1018
1045
  "data-slot": "text-body",
1019
- "data-test-id": "text-body"
1046
+ "data-test-id": "text-body",
1047
+ "aria-disabled": disabled || void 0
1020
1048
  }, props)
1021
1049
  );
1022
1050
  }
@@ -1027,10 +1055,12 @@ var TextHeading = React6__namespace.forwardRef(
1027
1055
  var _b = _a, {
1028
1056
  as,
1029
1057
  variant = "h2",
1058
+ disabled = false,
1030
1059
  className = ""
1031
1060
  } = _b, props = __objRest(_b, [
1032
1061
  "as",
1033
1062
  "variant",
1063
+ "disabled",
1034
1064
  "className"
1035
1065
  ]);
1036
1066
  const headingVariants = {
@@ -1065,8 +1095,16 @@ var TextHeading = React6__namespace.forwardRef(
1065
1095
  "[font-weight:var(--deframe-widget-font-weight-bold)]"
1066
1096
  ].join(" ")
1067
1097
  };
1098
+ const stateClasses = {
1099
+ enabled: "text-[color:var(--deframe-widget-color-text-primary)]",
1100
+ disabled: "text-[color:var(--deframe-widget-color-text-primary-disabled)]"
1101
+ };
1068
1102
  const variantClass = headingVariants[variant];
1069
- const headingClasses = tailwindMerge.twMerge(variantClass, className);
1103
+ const headingClasses = tailwindMerge.twMerge(
1104
+ variantClass,
1105
+ stateClasses[disabled ? "disabled" : "enabled"],
1106
+ className
1107
+ );
1070
1108
  return /* @__PURE__ */ jsxRuntime.jsx(
1071
1109
  Text_default,
1072
1110
  __spreadValues({
@@ -1074,7 +1112,8 @@ var TextHeading = React6__namespace.forwardRef(
1074
1112
  as: variant === "h-large" ? "h1" : variant,
1075
1113
  className: headingClasses,
1076
1114
  "data-slot": "text-heading",
1077
- "data-test-id": "text-heading"
1115
+ "data-test-id": "text-heading",
1116
+ "aria-disabled": disabled || void 0
1078
1117
  }, props)
1079
1118
  );
1080
1119
  }
@@ -1593,7 +1632,7 @@ function BannerNotificationMessage(_a) {
1593
1632
  return /* @__PURE__ */ jsxRuntime.jsx(
1594
1633
  TextBody,
1595
1634
  __spreadValues({
1596
- variant: "[font-size:var(--deframe-widget-font-size-md)] [line-height:var(--deframe-widget-font-leading-md)]",
1635
+ variant: "text-medium",
1597
1636
  "data-slot": "banner-notification-message",
1598
1637
  "data-test-id": "banner-notification-message",
1599
1638
  className: tailwindMerge.twMerge("text-inherit", className)
@@ -1899,7 +1938,7 @@ var SummaryDetails = ({
1899
1938
  /* @__PURE__ */ jsxRuntime.jsx(
1900
1939
  TextBody,
1901
1940
  {
1902
- variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]",
1941
+ variant: "text-small",
1903
1942
  className: tailwindMerge.twMerge("text-[color:var(--deframe-widget-color-text-tertiary)]", item.labelClassName),
1904
1943
  children: item.label
1905
1944
  }
@@ -1907,7 +1946,7 @@ var SummaryDetails = ({
1907
1946
  typeof item.value === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
1908
1947
  TextBody,
1909
1948
  {
1910
- variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]",
1949
+ variant: "text-small",
1911
1950
  className: tailwindMerge.twMerge("text-[color:var(--deframe-widget-color-text-primary)] [font-weight:var(--deframe-widget-font-weight-medium)]", item.valueClassName),
1912
1951
  children: item.value
1913
1952
  }
@@ -2412,6 +2451,7 @@ var TwoLineValue = ({ primary, secondary }) => /* @__PURE__ */ jsxRuntime.jsxs(H
2412
2451
  /* @__PURE__ */ jsxRuntime.jsx("p", { "data-test-id": "two-line-value-primary", className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-secondary)] [font-weight:var(--deframe-widget-font-weight-semibold)]", children: primary }),
2413
2452
  /* @__PURE__ */ jsxRuntime.jsx("p", { "data-test-id": "two-line-value-secondary", className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-secondary)]", children: secondary })
2414
2453
  ] });
2454
+ var NotFoundMessage = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "not-found-message", className: "flex flex-col items-center justify-center h-full", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[color:var(--deframe-widget-color-text-primary)]", children }) });
2415
2455
  var HistoryDepositDetailsView = ({
2416
2456
  transactionTypeLabel,
2417
2457
  symbol,
@@ -2602,7 +2642,7 @@ var SwapNetworkSelectorView = ({
2602
2642
  }) => {
2603
2643
  const baseClasses = "flex flex-row items-center gap-[var(--deframe-widget-size-gap-xs)]";
2604
2644
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": testId, className: tailwindMerge.twMerge(baseClasses, className), children: [
2605
- /* @__PURE__ */ jsxRuntime.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 }),
2645
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", variant: "text-small", className: "tracking-wide text-[color:var(--deframe-widget-color-text-tertiary)]", children: directionLabel }),
2606
2646
  /* @__PURE__ */ jsxRuntime.jsxs(
2607
2647
  "button",
2608
2648
  {
@@ -2627,7 +2667,7 @@ var SwapQuoteHeaderView = ({
2627
2667
  }) => {
2628
2668
  const baseClasses = "border-b border-[color:var(--deframe-widget-color-border-secondary)] pb-[var(--deframe-widget-size-padding-y-sm)]";
2629
2669
  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "swap-quote-header", className: tailwindMerge.twMerge(baseClasses, className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
2630
- /* @__PURE__ */ jsxRuntime.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 }),
2670
+ /* @__PURE__ */ jsxRuntime.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 }),
2631
2671
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-md)]", children: timerElement })
2632
2672
  ] }) });
2633
2673
  };
@@ -2696,7 +2736,7 @@ var SwapOutputAmountView = ({
2696
2736
  className
2697
2737
  }) => {
2698
2738
  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)]";
2699
- return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "swap-flow-output-amount", className: tailwindMerge.twMerge(baseClasses, className), children: isLoading ? /* @__PURE__ */ jsxRuntime.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 });
2739
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "swap-flow-output-amount", className: tailwindMerge.twMerge(baseClasses, className), children: isLoading ? /* @__PURE__ */ jsxRuntime.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 });
2700
2740
  };
2701
2741
  var SwapQuoteErrorsView = ({
2702
2742
  hasQuoteError,
@@ -2851,7 +2891,7 @@ var ChooseAStrategyActionsheetView = ({
2851
2891
  /* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: logoUrl, alt: assetName, className: "w-10 h-10 rounded-[var(--deframe-widget-size-radius-full)]" }) }),
2852
2892
  /* @__PURE__ */ jsxRuntime.jsxs(ListItemContent, { className: "gap-[var(--deframe-widget-size-gap-xs)]", children: [
2853
2893
  /* @__PURE__ */ jsxRuntime.jsx(TextBody, { children: resolvedYieldLabel }),
2854
- /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", children: Badge })
2894
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: Badge })
2855
2895
  ] }),
2856
2896
  /* @__PURE__ */ jsxRuntime.jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-center items-center gap-[var(--deframe-widget-size-gap-xs)]", children: [
2857
2897
  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[color:var(--deframe-widget-color-state-success)]", children: [
@@ -2886,7 +2926,7 @@ var StrategyDetailsView = ({
2886
2926
  /* @__PURE__ */ jsxRuntime.jsx("img", { "data-test-id": "strategy-logo", src: logoUrl, alt: title, className: "w-20 h-20 rounded-[var(--deframe-widget-size-radius-full)]" }),
2887
2927
  /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h5", children: title })
2888
2928
  ] }),
2889
- /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", children: description }),
2929
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: description }),
2890
2930
  /* @__PURE__ */ jsxRuntime.jsx(
2891
2931
  SummaryDetails,
2892
2932
  {
@@ -2979,7 +3019,7 @@ var SearchEmptyState = ({
2979
3019
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-20 h-20 bg-[var(--deframe-widget-color-bg-tertiary)] rounded-[var(--deframe-widget-size-radius-full)] flex justify-center items-center", children: /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineSearchOff, { className: "w-10 h-10 text-[color:var(--deframe-widget-color-text-tertiary)]" }) }),
2980
3020
  /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h3", children: title })
2981
3021
  ] }),
2982
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "self-stretch text-center", children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", children: description }) })
3022
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "self-stretch text-center", children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: description }) })
2983
3023
  ] }) });
2984
3024
  };
2985
3025
  var CollapsibleSection = ({
@@ -3014,7 +3054,7 @@ var CollapsibleSection = ({
3014
3054
  children: [
3015
3055
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-xs)]", children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { className: "text-[color:var(--deframe-widget-color-text-primary-dark)] [font-weight:var(--deframe-widget-font-weight-medium)]", children: title }) }),
3016
3056
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-xs)]", children: [
3017
- subtitle && /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", children: subtitle }),
3057
+ subtitle && /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: subtitle }),
3018
3058
  /* @__PURE__ */ jsxRuntime.jsx(
3019
3059
  framerMotion.motion.svg,
3020
3060
  {
@@ -4049,7 +4089,7 @@ var ChooseAnAssetSwapView = ({
4049
4089
  ] }),
4050
4090
  searchValue && displayedTokens.length === 0 && !isFetching ? /* @__PURE__ */ jsxRuntime.jsx(SearchEmptyState, { title: labels.searchEmptyTitle, description: labels.searchEmptyDescription }) : /* @__PURE__ */ jsxRuntime.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: [
4051
4091
  isFetching && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center items-center w-full py-[var(--deframe-widget-size-padding-y-md)]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-xs)]", children: [
4052
- /* @__PURE__ */ jsxRuntime.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 }),
4092
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.searchingText }),
4053
4093
  /* @__PURE__ */ jsxRuntime.jsx(LoadingDots, {})
4054
4094
  ] }) }),
4055
4095
  displayedTokens.map((token, index) => {
@@ -4069,11 +4109,11 @@ var ChooseAnAssetSwapView = ({
4069
4109
  /* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: token.logoURI || "", alt: token.name, className: "w-10 h-10 rounded-[var(--deframe-widget-size-radius-full)]" }) }),
4070
4110
  /* @__PURE__ */ jsxRuntime.jsxs(ListItemContent, { children: [
4071
4111
  /* @__PURE__ */ jsxRuntime.jsx(TextBody, { children: token.name }),
4072
- /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", children: token.symbol })
4112
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: token.symbol })
4073
4113
  ] }),
4074
4114
  /* @__PURE__ */ jsxRuntime.jsxs(ListItemRightSide, { children: [
4075
4115
  /* @__PURE__ */ jsxRuntime.jsx(TextBody, { children: formattedBalance }),
4076
- /* @__PURE__ */ jsxRuntime.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) })
4116
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: formatCurrencyValue(Number(balance == null ? void 0 : balance.amountInUSD) || 0) })
4077
4117
  ] })
4078
4118
  ]
4079
4119
  },
@@ -4466,12 +4506,1908 @@ var ConfirmSwapButtonView = ({
4466
4506
  }
4467
4507
  ) });
4468
4508
  };
4509
+ var ChooseANetworkView = ({
4510
+ labels,
4511
+ autoFocus = true,
4512
+ chains,
4513
+ pageSize = 10,
4514
+ onChainClick
4515
+ }) => {
4516
+ const [searchValue, setSearchValue] = React6.useState("");
4517
+ const [page, setPage] = React6.useState(1);
4518
+ React6.useEffect(() => {
4519
+ setPage(1);
4520
+ }, [searchValue]);
4521
+ const filteredChains = chains.filter(
4522
+ (chain) => chain.name.toLowerCase().includes(searchValue.toLowerCase())
4523
+ );
4524
+ const displayedChains = filteredChains.slice(0, page * pageSize);
4525
+ const hasMore = filteredChains.length > page * pageSize;
4526
+ return /* @__PURE__ */ jsxRuntime.jsx(BackgroundContainer, { className: "flex flex-col h-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col flex-1 w-full p-[var(--deframe-widget-size-padding-x-lg)] overflow-hidden", children: [
4527
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-shrink-0", children: [
4528
+ /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { children: labels.title }),
4529
+ /* @__PURE__ */ jsxRuntime.jsx("br", {}),
4530
+ /* @__PURE__ */ jsxRuntime.jsx(
4531
+ SearchInput,
4532
+ {
4533
+ value: searchValue,
4534
+ onChange: setSearchValue,
4535
+ placeholder: labels.searchPlaceholder,
4536
+ autoFocus
4537
+ }
4538
+ )
4539
+ ] }),
4540
+ /* @__PURE__ */ jsxRuntime.jsxs(
4541
+ "div",
4542
+ {
4543
+ "data-testid": "choose-a-network-list",
4544
+ 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",
4545
+ children: [
4546
+ displayedChains.map((chain) => /* @__PURE__ */ jsxRuntime.jsxs(
4547
+ ListItem,
4548
+ {
4549
+ className: "w-full flex-shrink-0",
4550
+ onClick: () => onChainClick(chain.chainId),
4551
+ "data-testid": `choose-network-item-${chain.chainId}`,
4552
+ "data-chain-id": chain.chainId,
4553
+ children: [
4554
+ /* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsxRuntime.jsx(
4555
+ "img",
4556
+ {
4557
+ src: chain.imageUrl,
4558
+ alt: chain.name,
4559
+ className: "w-10 h-10 rounded-[var(--deframe-widget-size-radius-full)]"
4560
+ }
4561
+ ) }),
4562
+ /* @__PURE__ */ jsxRuntime.jsx(ListItemContent, { children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { children: chain.name }) })
4563
+ ]
4564
+ },
4565
+ `chain-${chain.chainId}`
4566
+ )),
4567
+ hasMore && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center items-center w-full py-[var(--deframe-widget-size-padding-y-md)] flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(TertiaryButton, { onClick: () => setPage(page + 1), children: labels.loadMoreLabel }) })
4568
+ ]
4569
+ }
4570
+ )
4571
+ ] }) });
4572
+ };
4573
+ var SkeletonItem = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full bg-[var(--deframe-widget-color-bg-secondary)] rounded-[var(--deframe-widget-size-radius-xs)] min-h-[72px] flex items-center justify-between px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-sm)]", children: [
4574
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)] flex-1 min-w-0", children: [
4575
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-xl bg-[var(--deframe-widget-color-bg-tertiary)] animate-pulse flex-shrink-0" }),
4576
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-xs)] flex-1 min-w-0", children: [
4577
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-32 h-4 bg-[var(--deframe-widget-color-bg-tertiary)] rounded animate-pulse" }),
4578
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-24 h-3 bg-[var(--deframe-widget-color-bg-tertiary)] rounded animate-pulse" })
4579
+ ] })
4580
+ ] }),
4581
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end gap-[var(--deframe-widget-size-gap-xs)] flex-shrink-0 ml-[var(--deframe-widget-size-gap-sm)]", children: [
4582
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-20 h-4 bg-[var(--deframe-widget-color-bg-tertiary)] rounded animate-pulse" }),
4583
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-16 h-3 bg-[var(--deframe-widget-color-bg-tertiary)] rounded animate-pulse" })
4584
+ ] })
4585
+ ] });
4586
+ var SkeletonGroup = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "self-stretch flex flex-col gap-[var(--deframe-widget-size-gap-xs)]", children: [
4587
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-40 h-4 bg-[var(--deframe-widget-color-bg-tertiary)] rounded animate-pulse" }),
4588
+ /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, {}),
4589
+ /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, {})
4590
+ ] });
4591
+ var LoadingSkeleton = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "self-stretch flex flex-col gap-[var(--deframe-widget-size-gap-md)]", children: [
4592
+ /* @__PURE__ */ jsxRuntime.jsx(SkeletonGroup, {}),
4593
+ /* @__PURE__ */ jsxRuntime.jsx(SkeletonGroup, {})
4594
+ ] });
4595
+ var EmptyState = ({ title, description }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full flex-1 py-[var(--deframe-widget-size-padding-y-md)] flex flex-col justify-center items-center gap-[var(--deframe-widget-size-gap-sm)] overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex flex-col justify-center items-center gap-[var(--deframe-widget-size-gap-md)]", children: [
4596
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-center items-center gap-[var(--deframe-widget-size-gap-md)] text-center", children: [
4597
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-20 h-20 bg-[var(--deframe-widget-color-bg-tertiary)] rounded-[var(--deframe-widget-size-radius-full)] flex justify-center items-center", children: /* @__PURE__ */ jsxRuntime.jsx(pi.PiClockCountdownBold, { className: "w-10 h-10 text-[var(--deframe-widget-color-text-tertiary)]" }) }),
4598
+ /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h3", children: title })
4599
+ ] }),
4600
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "self-stretch text-center", children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: description }) })
4601
+ ] }) });
4602
+ var SwapItemIcon = ({ src, alt }) => {
4603
+ const fallbackText = encodeURIComponent((alt || "TOK").slice(0, 3).toUpperCase());
4604
+ const fallbackSrc = `https://placehold.co/40x40?text=${fallbackText}`;
4605
+ const resolvedSrc = src || fallbackSrc;
4606
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-shrink-0", children: [
4607
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-xl bg-[var(--deframe-widget-color-bg-tertiary)] flex items-center justify-center overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
4608
+ "img",
4609
+ {
4610
+ src: resolvedSrc,
4611
+ alt,
4612
+ className: "w-full h-full object-cover",
4613
+ onError: (e) => {
4614
+ e.target.src = fallbackSrc;
4615
+ }
4616
+ }
4617
+ ) }),
4618
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-[-2px] right-[-2px] w-[15px] h-[15px] rounded-[var(--deframe-widget-size-radius-full)] bg-[var(--deframe-widget-color-bg-secondary)] flex items-center justify-center border border-[var(--deframe-widget-color-bg-secondary)]", children: /* @__PURE__ */ jsxRuntime.jsx(md.MdArrowUpward, { className: "w-3 h-3 text-[var(--deframe-widget-color-text-primary)]" }) })
4619
+ ] });
4620
+ };
4621
+ var SwapHistoryView = ({
4622
+ labels,
4623
+ isLoading,
4624
+ items,
4625
+ onItemClick,
4626
+ pageSize = 10
4627
+ }) => {
4628
+ const [visibleCount, setVisibleCount] = React6__namespace.default.useState(pageSize);
4629
+ if (isLoading) {
4630
+ return /* @__PURE__ */ jsxRuntime.jsx(BackgroundContainer, { className: "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)] flex flex-col min-h-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(LoadingSkeleton, {}) });
4631
+ }
4632
+ if (items.length === 0) {
4633
+ return /* @__PURE__ */ jsxRuntime.jsx(BackgroundContainer, { className: "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)] flex flex-col min-h-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(EmptyState, { title: labels.emptyTitle, description: labels.emptyDescription }) });
4634
+ }
4635
+ const visibleItems = items.slice(0, visibleCount);
4636
+ const grouped = /* @__PURE__ */ new Map();
4637
+ for (const item of visibleItems) {
4638
+ const group = grouped.get(item.dateKey);
4639
+ if (group) {
4640
+ group.push(item);
4641
+ } else {
4642
+ grouped.set(item.dateKey, [item]);
4643
+ }
4644
+ }
4645
+ const sortedDates = Array.from(grouped.keys()).sort((a, b) => b.localeCompare(a));
4646
+ const hasMore = items.length > visibleCount;
4647
+ return /* @__PURE__ */ jsxRuntime.jsx(BackgroundContainer, { className: "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)] flex flex-col min-h-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "self-stretch flex flex-col gap-[16px]", children: [
4648
+ sortedDates.map((dateKey) => {
4649
+ const groupItems = grouped.get(dateKey);
4650
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "self-stretch flex flex-col gap-[var(--deframe-widget-size-gap-sm)]", children: [
4651
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-secondary)]", children: groupItems[0].dateLabel }),
4652
+ groupItems.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
4653
+ ListItem,
4654
+ {
4655
+ onClick: () => onItemClick(item.id),
4656
+ containerClassName: "!rounded-[var(--deframe-widget-size-radius-xs)] !border-0 !min-h-[72px]",
4657
+ children: [
4658
+ /* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsxRuntime.jsx(SwapItemIcon, { src: item.iconUrl, alt: item.iconAlt }) }),
4659
+ /* @__PURE__ */ jsxRuntime.jsxs(ListItemContent, { children: [
4660
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "[font-size:var(--deframe-widget-font-size-md)] [line-height:var(--deframe-widget-font-leading-md)] [font-weight:var(--deframe-widget-font-weight-medium)] text-[color:var(--deframe-widget-color-text-primary)]", children: item.title }),
4661
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-tertiary)]", children: item.subtitle })
4662
+ ] }),
4663
+ /* @__PURE__ */ jsxRuntime.jsxs(ListItemRightSide, { children: [
4664
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] [font-weight:var(--deframe-widget-font-weight-medium)] text-[color:var(--deframe-widget-color-text-primary)] whitespace-nowrap", children: item.amountFormatted }),
4665
+ item.amountUsd && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-secondary)] whitespace-nowrap", children: item.amountUsd })
4666
+ ] })
4667
+ ]
4668
+ },
4669
+ item.id
4670
+ ))
4671
+ ] }, dateKey);
4672
+ }),
4673
+ hasMore && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center pt-[var(--deframe-widget-size-padding-y-sm)]", children: /* @__PURE__ */ jsxRuntime.jsx(TertiaryButton, { onClick: () => setVisibleCount((c) => c + pageSize), children: labels.loadMoreLabel }) })
4674
+ ] }) });
4675
+ };
4676
+ var HistorySwapDetailsView = (props) => {
4677
+ const { labels, onBack, status } = props;
4678
+ if (status === "not-found") {
4679
+ return /* @__PURE__ */ jsxRuntime.jsxs(BackgroundContainer, { children: [
4680
+ /* @__PURE__ */ jsxRuntime.jsx(DetailsHeader, { title: labels.headerTitle, onBack }),
4681
+ /* @__PURE__ */ jsxRuntime.jsx(NotFoundMessage, { children: labels.notFoundMessage })
4682
+ ] });
4683
+ }
4684
+ if (status === "unavailable") {
4685
+ return /* @__PURE__ */ jsxRuntime.jsxs(BackgroundContainer, { children: [
4686
+ /* @__PURE__ */ jsxRuntime.jsx(DetailsHeader, { title: labels.headerTitle, onBack }),
4687
+ /* @__PURE__ */ jsxRuntime.jsx(NotFoundMessage, { children: labels.detailsUnavailableMessage })
4688
+ ] });
4689
+ }
4690
+ const {
4691
+ symbolIn,
4692
+ amountInFormatted,
4693
+ amountInUsd,
4694
+ tokenInLogoUrl,
4695
+ chainInName,
4696
+ symbolOut,
4697
+ amountOutFormatted,
4698
+ amountOutUsd,
4699
+ tokenOutLogoUrl,
4700
+ chainOutName,
4701
+ routeOrNetworkLabel,
4702
+ routeOrNetworkValue,
4703
+ statusLabel,
4704
+ txHash,
4705
+ dateFormatted,
4706
+ explorerUrl
4707
+ } = props;
4708
+ return /* @__PURE__ */ jsxRuntime.jsxs(BackgroundContainer, { children: [
4709
+ /* @__PURE__ */ jsxRuntime.jsx(DetailsHeader, { title: labels.headerTitle, onBack }),
4710
+ /* @__PURE__ */ jsxRuntime.jsx(ScrollableContent, { children: /* @__PURE__ */ jsxRuntime.jsxs(FlexCol, { gap: "lg", children: [
4711
+ /* @__PURE__ */ jsxRuntime.jsx(SectionCard, { className: "!p-[24px]", children: /* @__PURE__ */ jsxRuntime.jsxs(FlexCol, { gap: "xs", children: [
4712
+ /* @__PURE__ */ jsxRuntime.jsx(TransactionTypeLabel, { children: labels.swapLabel }),
4713
+ /* @__PURE__ */ jsxRuntime.jsxs(FlexCol, { gap: "sm", children: [
4714
+ /* @__PURE__ */ jsxRuntime.jsxs(FlexRow, { gap: "sm", children: [
4715
+ /* @__PURE__ */ jsxRuntime.jsx(TokenIcon, { src: tokenInLogoUrl, alt: symbolIn }),
4716
+ /* @__PURE__ */ jsxRuntime.jsxs(FlexCol, { children: [
4717
+ /* @__PURE__ */ jsxRuntime.jsx(Amount, { children: amountInFormatted }),
4718
+ amountInUsd ? /* @__PURE__ */ jsxRuntime.jsx(AmountInUsd, { children: amountInUsd }) : chainInName ? /* @__PURE__ */ jsxRuntime.jsx(AmountInUsd, { children: chainInName }) : null
4719
+ ] })
4720
+ ] }),
4721
+ /* @__PURE__ */ jsxRuntime.jsxs(FlexRow, { gap: "sm", children: [
4722
+ /* @__PURE__ */ jsxRuntime.jsx(TokenIcon, { src: tokenOutLogoUrl, alt: symbolOut }),
4723
+ /* @__PURE__ */ jsxRuntime.jsxs(FlexCol, { children: [
4724
+ /* @__PURE__ */ jsxRuntime.jsx(Amount, { children: amountOutFormatted }),
4725
+ amountOutUsd ? /* @__PURE__ */ jsxRuntime.jsx(AmountInUsd, { children: amountOutUsd }) : chainOutName ? /* @__PURE__ */ jsxRuntime.jsx(AmountInUsd, { children: chainOutName }) : null
4726
+ ] })
4727
+ ] })
4728
+ ] })
4729
+ ] }) }),
4730
+ /* @__PURE__ */ jsxRuntime.jsx(SectionCard, { className: "!p-[var(--deframe-widget-size-padding-x-md)]", children: /* @__PURE__ */ jsxRuntime.jsxs(FlexCol, { gap: "sm", children: [
4731
+ /* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { borderBottom: true, children: [
4732
+ /* @__PURE__ */ jsxRuntime.jsx(InfoLabel, { className: "font-[var(--deframe-widget-font-family)]", children: routeOrNetworkLabel }),
4733
+ /* @__PURE__ */ jsxRuntime.jsx(InfoValue, { className: "font-[var(--deframe-widget-font-family)]", children: routeOrNetworkValue })
4734
+ ] }),
4735
+ /* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { borderBottom: true, children: [
4736
+ /* @__PURE__ */ jsxRuntime.jsx(InfoLabel, { className: "font-[var(--deframe-widget-font-family)]", children: labels.sentLabel }),
4737
+ /* @__PURE__ */ jsxRuntime.jsx(TwoLineValue, { primary: amountInFormatted, secondary: amountInUsd != null ? amountInUsd : "-" })
4738
+ ] }),
4739
+ /* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { borderBottom: true, children: [
4740
+ /* @__PURE__ */ jsxRuntime.jsx(InfoLabel, { className: "font-[var(--deframe-widget-font-family)]", children: labels.receivedLabel }),
4741
+ /* @__PURE__ */ jsxRuntime.jsx(TwoLineValue, { primary: amountOutFormatted, secondary: amountOutUsd != null ? amountOutUsd : "-" })
4742
+ ] }),
4743
+ /* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { borderBottom: true, children: [
4744
+ /* @__PURE__ */ jsxRuntime.jsx(InfoLabel, { className: "font-[var(--deframe-widget-font-family)]", children: labels.statusLabel }),
4745
+ /* @__PURE__ */ jsxRuntime.jsx(SuccessBadge, { children: statusLabel })
4746
+ ] }),
4747
+ /* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { borderBottom: true, children: [
4748
+ /* @__PURE__ */ jsxRuntime.jsx(InfoLabel, { className: "font-[var(--deframe-widget-font-family)]", children: labels.txIdLabel }),
4749
+ /* @__PURE__ */ jsxRuntime.jsx(TransactionId, { hash: txHash })
4750
+ ] }),
4751
+ /* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { borderBottom: true, children: [
4752
+ /* @__PURE__ */ jsxRuntime.jsx(InfoLabel, { className: "font-[var(--deframe-widget-font-family)]", children: labels.dateLabel }),
4753
+ /* @__PURE__ */ jsxRuntime.jsx(InfoValue, { className: "font-[var(--deframe-widget-font-family)]", children: dateFormatted })
4754
+ ] }),
4755
+ explorerUrl && /* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { children: [
4756
+ /* @__PURE__ */ jsxRuntime.jsx(InfoLabel, { className: "font-[var(--deframe-widget-font-family)]", children: labels.transactionLabel }),
4757
+ /* @__PURE__ */ jsxRuntime.jsx(ExplorerLink, { href: explorerUrl, children: labels.viewOnExplorerLabel })
4758
+ ] })
4759
+ ] }) })
4760
+ ] }) })
4761
+ ] });
4762
+ };
4763
+ var SwapWidgetFallbackView = ({
4764
+ title,
4765
+ description,
4766
+ buttonLabel,
4767
+ onButtonClick
4768
+ }) => {
4769
+ return /* @__PURE__ */ jsxRuntime.jsxs(
4770
+ "div",
4771
+ {
4772
+ "data-testid": "swap-widget-fallback",
4773
+ 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)]",
4774
+ children: [
4775
+ /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h-large", children: title }),
4776
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: description }),
4777
+ /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { className: "w-full", onClick: onButtonClick, children: buttonLabel })
4778
+ ]
4779
+ }
4780
+ );
4781
+ };
4782
+ var ApyRange = ({ children }) => {
4783
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right justify-center text-text-highlight text-xs font-normal leading-4", children });
4784
+ };
4785
+ var variantStyles = {
4786
+ primary: "text-text-primary dark:text-text-primary-dark text-text-md",
4787
+ secondary: "text-text-secondary dark:text-text-secondary-dark text-text-sm font-poppins"
4788
+ };
4789
+ var Label = ({ children, variant = "primary", className }) => {
4790
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: tailwindMerge.twMerge(variantStyles[variant], className), children });
4791
+ };
4792
+ var HistoryItemSkeleton = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full bg-bg-subtle dark:bg-bg-subtle-dark rounded-xs min-h-[72px] flex items-center justify-between px-md py-sm", children: [
4793
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-sm flex-1 min-w-0", children: [
4794
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-xl bg-bg-muted dark:bg-bg-muted-dark animate-pulse flex-shrink-0" }),
4795
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-xs flex-1 min-w-0", children: [
4796
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-32 h-4 bg-bg-muted dark:bg-bg-muted-dark rounded animate-pulse" }),
4797
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-24 h-3 bg-bg-muted dark:bg-bg-muted-dark rounded animate-pulse" })
4798
+ ] })
4799
+ ] }),
4800
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end gap-xs flex-shrink-0 ml-sm", children: [
4801
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-20 h-4 bg-bg-muted dark:bg-bg-muted-dark rounded animate-pulse" }),
4802
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-16 h-3 bg-bg-muted dark:bg-bg-muted-dark rounded animate-pulse" })
4803
+ ] })
4804
+ ] });
4805
+ var HistoryGroupSkeleton = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "self-stretch flex flex-col gap-xs", children: [
4806
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-40 h-4 bg-bg-muted dark:bg-bg-muted-dark rounded animate-pulse" }),
4807
+ /* @__PURE__ */ jsxRuntime.jsx(HistoryItemSkeleton, {}),
4808
+ /* @__PURE__ */ jsxRuntime.jsx(HistoryItemSkeleton, {})
4809
+ ] });
4810
+ var HistoryListSkeleton = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "self-stretch flex flex-col gap-md", children: [
4811
+ /* @__PURE__ */ jsxRuntime.jsx(HistoryGroupSkeleton, {}),
4812
+ /* @__PURE__ */ jsxRuntime.jsx(HistoryGroupSkeleton, {})
4813
+ ] });
4814
+ var WalletBalances = ({ cards, variant = "subtle", className }) => {
4815
+ const bgClass = variant === "raised" ? "bg-bg-raised dark:bg-bg-raised-dark" : "bg-bg-subtle dark:bg-bg-subtle-dark";
4816
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("w-full flex flex-row gap-4 mt-md", className), children: cards.map((card) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("flex-1 h-auto px-6 py-4 rounded shadow-sm flex flex-col items-start justify-start gap-xs", bgClass), children: [
4817
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: card.label }),
4818
+ /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h3", children: card.value })
4819
+ ] }, card.label)) });
4820
+ };
4821
+ var HistoryTabEmpty = ({ title, description }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-[90vh] py-md bg-bg-default dark:bg-bg-default-dark rounded-lg flex flex-col justify-center items-center gap-sm overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex flex-col justify-center items-center gap-md", children: [
4822
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-center items-center gap-md text-center", children: [
4823
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-20 h-20 bg-bg-muted dark:bg-bg-muted-dark rounded-full flex justify-center items-center", children: /* @__PURE__ */ jsxRuntime.jsx(pi.PiClockCountdownBold, { className: "w-10 h-10 text-text-tertiary dark:text-text-tertiary-dark" }) }),
4824
+ /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h3", children: title })
4825
+ ] }),
4826
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "self-stretch text-center", children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: description }) })
4827
+ ] }) });
4828
+ var StrategyGridCard = ({
4829
+ logoUrl,
4830
+ title,
4831
+ subtitle,
4832
+ apyFormatted,
4833
+ apyLabel,
4834
+ onClick,
4835
+ className
4836
+ }) => /* @__PURE__ */ jsxRuntime.jsxs(
4837
+ "button",
4838
+ {
4839
+ type: "button",
4840
+ onClick,
4841
+ "data-test-id": "strategy-grid-card",
4842
+ className: tailwindMerge.twMerge(
4843
+ "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",
4844
+ "bg-[var(--deframe-widget-color-bg-primary)]",
4845
+ "hover:bg-[var(--deframe-widget-color-bg-tertiary)]",
4846
+ "transition-colors cursor-pointer text-left w-full",
4847
+ className
4848
+ ),
4849
+ children: [
4850
+ /* @__PURE__ */ jsxRuntime.jsx("img", { src: logoUrl, alt: title, className: "w-10 h-10 rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0" }),
4851
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-end justify-between w-full", children: [
4852
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-xs)]", children: [
4853
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { className: "font-medium", children: title }),
4854
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-tertiary)]", children: subtitle })
4855
+ ] }),
4856
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end gap-[var(--deframe-widget-size-gap-xs)]", children: [
4857
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-primary-disabled)] text-right", children: apyLabel }),
4858
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { className: "text-[color:var(--deframe-widget-color-brand-primary)]", children: apyFormatted })
4859
+ ] })
4860
+ ] })
4861
+ ]
4862
+ }
4863
+ );
4864
+ var BackButton = ({ onClick, ariaLabel = "Back", className }) => {
4865
+ 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";
4866
+ return /* @__PURE__ */ jsxRuntime.jsx(
4867
+ "button",
4868
+ {
4869
+ "data-test-id": "back-button",
4870
+ onClick,
4871
+ className: tailwindMerge.twMerge(baseClasses, className),
4872
+ "aria-label": ariaLabel,
4873
+ children: /* @__PURE__ */ jsxRuntime.jsx(hi2.HiArrowLeft, { className: "w-6 h-6" })
4874
+ }
4875
+ );
4876
+ };
4877
+ var EarnBalanceCard = ({
4878
+ tokenIcon,
4879
+ fiatBalance,
4880
+ profitAmount,
4881
+ tokenAmount,
4882
+ investedLabel,
4883
+ earningsLabel,
4884
+ isFetching = false
4885
+ }) => {
4886
+ const displayedTokenAmount = isFetching ? "..." : tokenAmount;
4887
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex flex-row gap-[var(--deframe-widget-size-gap-md)]", children: [
4888
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 h-24 px-[var(--deframe-widget-size-padding-x-lg)] bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-primary)] rounded shadow-sm flex flex-col items-start justify-center gap-[var(--deframe-widget-size-gap-xs)]", children: [
4889
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: investedLabel }),
4890
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-xs)]", children: [
4891
+ tokenIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-5 h-5", children: typeof tokenIcon === "string" ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: tokenIcon, alt: "Token", className: "w-5 h-5 rounded-full" }) : tokenIcon }),
4892
+ /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h3", children: displayedTokenAmount })
4893
+ ] }),
4894
+ /* @__PURE__ */ jsxRuntime.jsxs(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-tertiary)]", children: [
4895
+ "~",
4896
+ fiatBalance
4897
+ ] })
4898
+ ] }),
4899
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 h-24 px-[var(--deframe-widget-size-padding-x-lg)] bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-primary)] rounded shadow-sm flex flex-col items-start justify-center gap-[var(--deframe-widget-size-gap-xs)]", children: [
4900
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: earningsLabel }),
4901
+ /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h3", children: profitAmount })
4902
+ ] })
4903
+ ] });
4904
+ };
4905
+ var EarnInvestmentSummaryView = ({
4906
+ overviewDescription,
4907
+ totalInvestedLabel,
4908
+ totalInvestedValue,
4909
+ totalReturnLabel,
4910
+ totalReturnValue,
4911
+ className
4912
+ }) => {
4913
+ return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: tailwindMerge.twMerge("flex flex-col gap-md p-lg bg-bg-subtle dark:bg-bg-subtle-dark rounded", className), children: [
4914
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-text-secondary dark:text-text-secondary-dark", children: overviewDescription }),
4915
+ /* @__PURE__ */ jsxRuntime.jsx(
4916
+ WalletBalances,
4917
+ {
4918
+ cards: [
4919
+ { label: totalInvestedLabel, value: totalInvestedValue },
4920
+ { label: totalReturnLabel, value: totalReturnValue }
4921
+ ],
4922
+ variant: "raised",
4923
+ className: "grid grid-cols-2 gap-md !mt-0"
4924
+ }
4925
+ )
4926
+ ] });
4927
+ };
4928
+ var EarnInvestedSectionView = ({
4929
+ sectionTitle,
4930
+ items,
4931
+ onItemClick,
4932
+ className
4933
+ }) => {
4934
+ if (items.length === 0) {
4935
+ return null;
4936
+ }
4937
+ return /* @__PURE__ */ jsxRuntime.jsxs(
4938
+ "section",
4939
+ {
4940
+ className: tailwindMerge.twMerge(
4941
+ "flex flex-col gap-[var(--deframe-widget-size-gap-md)] p-[var(--deframe-widget-size-padding-x-lg)]",
4942
+ "bg-[var(--deframe-widget-color-bg-secondary)] rounded-[var(--deframe-widget-size-radius-sm)]",
4943
+ className
4944
+ ),
4945
+ children: [
4946
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: sectionTitle }),
4947
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-md)]", children: items.map((item, index) => {
4948
+ const isLast = index === items.length - 1;
4949
+ return /* @__PURE__ */ jsxRuntime.jsxs(
4950
+ "button",
4951
+ {
4952
+ type: "button",
4953
+ onClick: () => onItemClick == null ? void 0 : onItemClick(item.strategyId),
4954
+ className: tailwindMerge.twMerge(
4955
+ "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)]",
4956
+ "hover:bg-[var(--deframe-widget-color-bg-tertiary)]",
4957
+ "transition-colors cursor-pointer text-left w-full",
4958
+ !isLast && "border-b border-[var(--deframe-widget-color-border-secondary)]"
4959
+ ),
4960
+ children: [
4961
+ /* @__PURE__ */ jsxRuntime.jsx(
4962
+ "img",
4963
+ {
4964
+ src: item.logoUrl,
4965
+ alt: item.assetName,
4966
+ className: "w-10 h-10 rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0"
4967
+ }
4968
+ ),
4969
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col flex-1 min-w-0", children: [
4970
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { className: "font-medium truncate", children: item.assetName }),
4971
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-tertiary)] truncate", children: item.subtitle })
4972
+ ] }),
4973
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end flex-shrink-0", children: [
4974
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { className: "font-medium", children: item.balanceFormatted }),
4975
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: item.profitFormatted })
4976
+ ] })
4977
+ ]
4978
+ },
4979
+ item.strategyId
4980
+ );
4981
+ }) })
4982
+ ]
4983
+ }
4984
+ );
4985
+ };
4986
+ var EarnExploreGridView = ({
4987
+ sectionTitle,
4988
+ loadingLabel,
4989
+ errorLabel,
4990
+ emptySearchTitle,
4991
+ emptySearchDescription,
4992
+ isLoading,
4993
+ error,
4994
+ strategies,
4995
+ searchBar,
4996
+ chipGroup,
4997
+ hasFilters,
4998
+ onStrategyClick,
4999
+ className
5000
+ }) => {
5001
+ const showEmptyState = hasFilters && strategies.length === 0;
5002
+ if (isLoading) {
5003
+ return /* @__PURE__ */ jsxRuntime.jsxs(
5004
+ "section",
5005
+ {
5006
+ className: tailwindMerge.twMerge(
5007
+ "flex flex-col gap-[var(--deframe-widget-size-gap-md)] p-[var(--deframe-widget-size-padding-x-lg)]",
5008
+ "bg-[var(--deframe-widget-color-bg-secondary)] rounded-[var(--deframe-widget-size-radius-sm)]",
5009
+ className
5010
+ ),
5011
+ children: [
5012
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: sectionTitle }),
5013
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-[color:var(--deframe-widget-color-text-secondary)] flex items-center gap-[var(--deframe-widget-size-gap-sm)]", children: [
5014
+ loadingLabel,
5015
+ /* @__PURE__ */ jsxRuntime.jsx(LoadingDots, {})
5016
+ ] })
5017
+ ]
5018
+ }
5019
+ );
5020
+ }
5021
+ if (error) {
5022
+ return /* @__PURE__ */ jsxRuntime.jsxs(
5023
+ "section",
5024
+ {
5025
+ className: tailwindMerge.twMerge(
5026
+ "flex flex-col gap-[var(--deframe-widget-size-gap-md)] p-[var(--deframe-widget-size-padding-x-lg)]",
5027
+ "bg-[var(--deframe-widget-color-bg-secondary)] rounded-[var(--deframe-widget-size-radius-sm)]",
5028
+ className
5029
+ ),
5030
+ children: [
5031
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: sectionTitle }),
5032
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[color:var(--deframe-widget-color-state-error)]", children: errorLabel })
5033
+ ]
5034
+ }
5035
+ );
5036
+ }
5037
+ return /* @__PURE__ */ jsxRuntime.jsxs(
5038
+ "section",
5039
+ {
5040
+ className: tailwindMerge.twMerge(
5041
+ "flex flex-col gap-[var(--deframe-widget-size-gap-md)] p-[var(--deframe-widget-size-padding-x-lg)]",
5042
+ "bg-[var(--deframe-widget-color-bg-secondary)] rounded-[var(--deframe-widget-size-radius-sm)]",
5043
+ className
5044
+ ),
5045
+ children: [
5046
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: sectionTitle }),
5047
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-md)]", children: [
5048
+ searchBar,
5049
+ chipGroup
5050
+ ] }),
5051
+ showEmptyState && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:h-[440px] flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(SearchEmptyState, { title: emptySearchTitle, description: emptySearchDescription }) }),
5052
+ !showEmptyState && /* @__PURE__ */ jsxRuntime.jsx(
5053
+ "div",
5054
+ {
5055
+ 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]",
5056
+ children: strategies.map((strategy) => /* @__PURE__ */ jsxRuntime.jsx(
5057
+ StrategyGridCard,
5058
+ {
5059
+ logoUrl: strategy.logoUrl,
5060
+ title: strategy.title,
5061
+ subtitle: strategy.subtitle,
5062
+ apyFormatted: strategy.apyFormatted,
5063
+ apyLabel: strategy.apyLabel,
5064
+ onClick: () => onStrategyClick == null ? void 0 : onStrategyClick(strategy.id)
5065
+ },
5066
+ strategy.id
5067
+ ))
5068
+ }
5069
+ )
5070
+ ]
5071
+ }
5072
+ );
5073
+ };
5074
+ var EarnRecentTransactionsView = ({
5075
+ sectionTitle,
5076
+ viewAllLabel,
5077
+ isLoading,
5078
+ hasMore,
5079
+ hasItems,
5080
+ historyList,
5081
+ emptyTitle,
5082
+ emptyDescription,
5083
+ onViewAll,
5084
+ className
5085
+ }) => {
5086
+ return /* @__PURE__ */ jsxRuntime.jsxs(
5087
+ "section",
5088
+ {
5089
+ className: tailwindMerge.twMerge(
5090
+ "flex flex-col gap-md p-lg",
5091
+ "bg-bg-subtle dark:bg-bg-subtle-dark rounded",
5092
+ className
5093
+ ),
5094
+ children: [
5095
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
5096
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-text-secondary dark:text-text-secondary-dark", children: sectionTitle }),
5097
+ hasMore && onViewAll && /* @__PURE__ */ jsxRuntime.jsx(
5098
+ "button",
5099
+ {
5100
+ type: "button",
5101
+ onClick: onViewAll,
5102
+ className: "text-brand-primary dark:text-brand-primary-dark hover:underline",
5103
+ children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: viewAllLabel })
5104
+ }
5105
+ )
5106
+ ] }),
5107
+ isLoading ? /* @__PURE__ */ jsxRuntime.jsx(HistoryListSkeleton, {}) : hasItems ? historyList : /* @__PURE__ */ jsxRuntime.jsx(HistoryTabEmpty, { title: emptyTitle, description: emptyDescription })
5108
+ ]
5109
+ }
5110
+ );
5111
+ };
5112
+ var EarnDesktopView = ({
5113
+ isLoading,
5114
+ loadingSkeleton,
5115
+ summary,
5116
+ invested,
5117
+ explore,
5118
+ transactions
5119
+ }) => {
5120
+ if (isLoading) {
5121
+ return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: loadingSkeleton });
5122
+ }
5123
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-[color:var(--deframe-widget-color-text-primary)] flex flex-col relative overflow-y-auto w-full flex-1 min-h-0 pb-[var(--deframe-widget-size-padding-y-lg)] gap-[var(--deframe-widget-size-gap-md)]", children: [
5124
+ /* @__PURE__ */ jsxRuntime.jsx(EarnInvestmentSummaryView, __spreadValues({}, summary)),
5125
+ /* @__PURE__ */ jsxRuntime.jsx(EarnInvestedSectionView, __spreadValues({}, invested)),
5126
+ /* @__PURE__ */ jsxRuntime.jsx(EarnExploreGridView, __spreadValues({}, explore)),
5127
+ /* @__PURE__ */ jsxRuntime.jsx(EarnRecentTransactionsView, __spreadValues({}, transactions))
5128
+ ] });
5129
+ };
5130
+ var EarnInvestmentDetailsView = ({
5131
+ title,
5132
+ onBack,
5133
+ tokenIcon,
5134
+ fiatBalance,
5135
+ profitAmount,
5136
+ tokenAmount,
5137
+ investedLabel,
5138
+ earningsLabel,
5139
+ summaryTitle,
5140
+ summaryItems,
5141
+ pastActivitiesTitle,
5142
+ transactions,
5143
+ onTransactionClick,
5144
+ showMoreButton,
5145
+ onLoadMore,
5146
+ loadMoreLabel,
5147
+ depositLabel,
5148
+ onDeposit,
5149
+ withdrawLabel,
5150
+ onWithdraw
5151
+ }) => {
5152
+ return /* @__PURE__ */ jsxRuntime.jsxs(BackgroundContainer, { children: [
5153
+ /* @__PURE__ */ jsxRuntime.jsxs(Navbar, { children: [
5154
+ /* @__PURE__ */ jsxRuntime.jsx(BackButton, { onClick: onBack }),
5155
+ /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h1", children: title })
5156
+ ] }),
5157
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col min-h-0 px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-sm)] gap-[var(--deframe-widget-size-gap-md)]", children: [
5158
+ /* @__PURE__ */ jsxRuntime.jsx(
5159
+ EarnBalanceCard,
5160
+ {
5161
+ tokenIcon,
5162
+ fiatBalance,
5163
+ profitAmount,
5164
+ tokenAmount,
5165
+ investedLabel,
5166
+ earningsLabel
5167
+ }
5168
+ ),
5169
+ /* @__PURE__ */ jsxRuntime.jsx(
5170
+ SummaryDetails,
5171
+ {
5172
+ title: summaryTitle,
5173
+ items: summaryItems,
5174
+ defaultOpen: true,
5175
+ className: "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-primary)]"
5176
+ }
5177
+ ),
5178
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full rounded-[var(--deframe-widget-size-radius-sm)] flex flex-col gap-[var(--deframe-widget-size-gap-sm)] flex-shrink-0", children: [
5179
+ /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h5", children: pastActivitiesTitle }),
5180
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "investment-activities-list flex flex-col gap-[var(--deframe-widget-size-gap-sm)] overflow-y-auto max-h-[280px] pr-[var(--deframe-widget-size-padding-x-sm)]", children: [
5181
+ transactions.map((tx) => /* @__PURE__ */ jsxRuntime.jsxs(
5182
+ ListItem,
5183
+ {
5184
+ onClick: () => onTransactionClick(tx.id),
5185
+ children: [
5186
+ /* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: tokenIcon, alt: "Token", className: "w-10 h-10 rounded-[var(--deframe-widget-size-radius-full)]" }) }),
5187
+ /* @__PURE__ */ jsxRuntime.jsxs(ListItemContent, { children: [
5188
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { children: tx.action }),
5189
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: tx.date })
5190
+ ] }),
5191
+ /* @__PURE__ */ jsxRuntime.jsxs(ListItemRightSide, { children: [
5192
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { children: tx.usdAmount }),
5193
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: tx.tokenAmount })
5194
+ ] })
5195
+ ]
5196
+ },
5197
+ `tx-history-${tx.id}`
5198
+ )),
5199
+ showMoreButton && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center items-center w-full py-4 flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(TertiaryButton, { onClick: onLoadMore, children: loadMoreLabel }) })
5200
+ ] })
5201
+ ] })
5202
+ ] }),
5203
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky bottom-0 left-0 right-0 border-t border-[var(--deframe-widget-color-border-secondary)] px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between gap-[var(--deframe-widget-size-gap-md)]", children: [
5204
+ /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { onClick: onDeposit, className: "w-full", children: depositLabel }),
5205
+ /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { onClick: onWithdraw, className: "w-full", children: withdrawLabel })
5206
+ ] }) })
5207
+ ] });
5208
+ };
5209
+ var GroupLabel = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-text-secondary dark:text-text-secondary-dark text-sm font-medium font-poppins py-3", children });
5210
+ var GroupedStrategyListView = ({
5211
+ isLoading,
5212
+ loadingLabel,
5213
+ error,
5214
+ errorLabel,
5215
+ investedLabel,
5216
+ investedItems,
5217
+ bestPerformanceLabel,
5218
+ bestPerformanceItems,
5219
+ allStrategiesLabel,
5220
+ allStrategiesItems
5221
+ }) => {
5222
+ const hasInvested = investedItems.length > 0;
5223
+ const hasBestPerformance = bestPerformanceItems.length > 0;
5224
+ const hasAllStrategies = allStrategiesItems.length > 0;
5225
+ if (isLoading) {
5226
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center py-md", children: [
5227
+ loadingLabel,
5228
+ " ",
5229
+ /* @__PURE__ */ jsxRuntime.jsx(LoadingDots, {})
5230
+ ] });
5231
+ }
5232
+ if (error) {
5233
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 text-center text-red-500", children: [
5234
+ errorLabel,
5235
+ ": ",
5236
+ error.message
5237
+ ] });
5238
+ }
5239
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex flex-col gap-sm flex-1 min-h-0 overflow-y-auto", children: [
5240
+ hasInvested && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
5241
+ /* @__PURE__ */ jsxRuntime.jsx(GroupLabel, { children: investedLabel }),
5242
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-sm", children: investedItems.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
5243
+ ListItem,
5244
+ {
5245
+ onClick: () => item.onClick(),
5246
+ children: [
5247
+ /* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsxRuntime.jsx(
5248
+ "img",
5249
+ {
5250
+ src: item.logoUrl,
5251
+ alt: item.subtitle,
5252
+ className: "w-10 h-10 rounded-full"
5253
+ }
5254
+ ) }),
5255
+ /* @__PURE__ */ jsxRuntime.jsxs(ListItemContent, { children: [
5256
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { children: item.title }),
5257
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: item.subtitle })
5258
+ ] }),
5259
+ /* @__PURE__ */ jsxRuntime.jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row justify-between items-center", children: [
5260
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end", children: [
5261
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { children: item.balanceFormatted }),
5262
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: item.profitFormatted })
5263
+ ] }),
5264
+ /* @__PURE__ */ jsxRuntime.jsx(md.MdArrowRight, { className: "w-6 h-6" })
5265
+ ] }) })
5266
+ ]
5267
+ },
5268
+ `invested-${item.id}`
5269
+ )) })
5270
+ ] }),
5271
+ hasBestPerformance && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
5272
+ /* @__PURE__ */ jsxRuntime.jsx(GroupLabel, { children: bestPerformanceLabel }),
5273
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-sm", children: bestPerformanceItems.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
5274
+ ListItem,
5275
+ {
5276
+ onClick: () => item.onClick(),
5277
+ children: [
5278
+ /* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsxRuntime.jsx(
5279
+ "img",
5280
+ {
5281
+ src: item.logoUrl,
5282
+ alt: item.subtitle,
5283
+ className: "w-10 h-10 rounded-full"
5284
+ }
5285
+ ) }),
5286
+ /* @__PURE__ */ jsxRuntime.jsxs(ListItemContent, { children: [
5287
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { children: item.title }),
5288
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: item.subtitle })
5289
+ ] }),
5290
+ /* @__PURE__ */ jsxRuntime.jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row justify-between items-center", children: [
5291
+ /* @__PURE__ */ jsxRuntime.jsx(ApyRange, { children: item.apyFormatted }),
5292
+ /* @__PURE__ */ jsxRuntime.jsx(md.MdArrowRight, { className: "w-6 h-6" })
5293
+ ] }) })
5294
+ ]
5295
+ },
5296
+ `best-${item.id}`
5297
+ )) })
5298
+ ] }),
5299
+ hasAllStrategies && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
5300
+ /* @__PURE__ */ jsxRuntime.jsx(GroupLabel, { children: allStrategiesLabel }),
5301
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-sm", children: allStrategiesItems.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
5302
+ ListItem,
5303
+ {
5304
+ onClick: () => item.onClick(),
5305
+ children: [
5306
+ /* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsxRuntime.jsx(
5307
+ "img",
5308
+ {
5309
+ src: item.logoUrl,
5310
+ alt: item.subtitle,
5311
+ className: "w-10 h-10 rounded-full"
5312
+ }
5313
+ ) }),
5314
+ /* @__PURE__ */ jsxRuntime.jsxs(ListItemContent, { children: [
5315
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { children: item.title }),
5316
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: item.subtitle })
5317
+ ] }),
5318
+ /* @__PURE__ */ jsxRuntime.jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row justify-between items-center", children: [
5319
+ /* @__PURE__ */ jsxRuntime.jsx(ApyRange, { children: item.apyFormatted }),
5320
+ /* @__PURE__ */ jsxRuntime.jsx(md.MdArrowRight, { className: "w-6 h-6" })
5321
+ ] }) })
5322
+ ]
5323
+ },
5324
+ `all-${item.id}`
5325
+ )) })
5326
+ ] })
5327
+ ] });
5328
+ };
5329
+ var DateLabel = ({ children }) => {
5330
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-text-sm-mobile font-poppins text-text-secondary dark:text-text-secondary-dark", children });
5331
+ };
5332
+ var ArrowBadge = ({ isDeposit }) => {
5333
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-[-2px] right-[-2px] w-[15px] h-[15px] rounded-full bg-bg-subtle dark:bg-bg-subtle-dark flex items-center justify-center border border-bg-subtle dark:border-bg-subtle-dark", children: isDeposit ? /* @__PURE__ */ jsxRuntime.jsx(md.MdArrowDownward, { className: "w-3 h-3 text-text-primary dark:text-text-primary-dark" }) : /* @__PURE__ */ jsxRuntime.jsx(md.MdArrowUpward, { className: "w-3 h-3 text-text-primary dark:text-text-primary-dark" }) });
5334
+ };
5335
+ var TokenIconWithBadge = ({ src, alt, isDeposit }) => {
5336
+ const fallbackText = encodeURIComponent((alt || "TOK").slice(0, 3).toUpperCase());
5337
+ const fallbackSrc = `https://placehold.co/40x40?text=${fallbackText}`;
5338
+ const resolvedSrc = src || fallbackSrc;
5339
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-shrink-0", children: [
5340
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-xl bg-bg-muted dark:bg-bg-muted-dark flex items-center justify-center overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
5341
+ "img",
5342
+ {
5343
+ src: resolvedSrc,
5344
+ alt,
5345
+ className: "w-full h-full object-cover",
5346
+ onError: (e) => {
5347
+ e.target.src = fallbackSrc;
5348
+ }
5349
+ }
5350
+ ) }),
5351
+ /* @__PURE__ */ jsxRuntime.jsx(ArrowBadge, { isDeposit })
5352
+ ] });
5353
+ };
5354
+ var SwapIconWithBadge = ({ src, alt }) => {
5355
+ const fallbackText = encodeURIComponent((alt || "TOK").slice(0, 3).toUpperCase());
5356
+ const fallbackSrc = `https://placehold.co/40x40?text=${fallbackText}`;
5357
+ const resolvedSrc = src || fallbackSrc;
5358
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-shrink-0", children: [
5359
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-xl bg-bg-muted dark:bg-bg-muted-dark flex items-center justify-center overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
5360
+ "img",
5361
+ {
5362
+ src: resolvedSrc,
5363
+ alt,
5364
+ className: "w-full h-full object-cover",
5365
+ onError: (e) => {
5366
+ e.target.src = fallbackSrc;
5367
+ }
5368
+ }
5369
+ ) }),
5370
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-[-2px] right-[-2px] w-[15px] h-[15px] rounded-full bg-bg-subtle dark:bg-bg-subtle-dark flex items-center justify-center border border-bg-subtle dark:border-bg-subtle-dark", children: /* @__PURE__ */ jsxRuntime.jsx(md.MdArrowUpward, { className: "w-3 h-3 text-text-primary dark:text-text-primary-dark" }) })
5371
+ ] });
5372
+ };
5373
+ var AmountDisplay = ({ amount, usdAmount }) => {
5374
+ return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
5375
+ /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-accent-sm-mobile whitespace-nowrap", children: amount }),
5376
+ usdAmount ? /* @__PURE__ */ jsxRuntime.jsx(Label, { variant: "secondary", className: "whitespace-nowrap", children: usdAmount }) : null
5377
+ ] });
5378
+ };
5379
+ var HistoryListView = ({
5380
+ groups,
5381
+ showLoadMore,
5382
+ onLoadMore,
5383
+ loadMoreLabel,
5384
+ itemClassName
5385
+ }) => {
5386
+ if (groups.length === 0) {
5387
+ return null;
5388
+ }
5389
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "self-stretch flex flex-col gap-[16px]", children: [
5390
+ groups.map((group) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "self-stretch flex flex-col gap-sm", children: [
5391
+ /* @__PURE__ */ jsxRuntime.jsx(DateLabel, { children: group.dateLabel }),
5392
+ group.items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
5393
+ ListItem,
5394
+ {
5395
+ onClick: () => item.onClick(),
5396
+ containerClassName: tailwindMerge.twMerge("!rounded-xs !border-0 !min-h-[72px]", itemClassName),
5397
+ children: [
5398
+ /* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: item.isSwap ? /* @__PURE__ */ jsxRuntime.jsx(SwapIconWithBadge, { src: item.iconUrl, alt: item.iconAlt }) : /* @__PURE__ */ jsxRuntime.jsx(
5399
+ TokenIconWithBadge,
5400
+ {
5401
+ src: item.iconUrl,
5402
+ alt: item.iconAlt,
5403
+ isDeposit: item.isDeposit
5404
+ }
5405
+ ) }),
5406
+ /* @__PURE__ */ jsxRuntime.jsxs(ListItemContent, { children: [
5407
+ /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-text-lg-mobile", children: item.title }),
5408
+ /* @__PURE__ */ jsxRuntime.jsx(Label, { variant: "secondary", className: "text-text-tertiary dark:text-text-tertiary-dark", children: item.subtitle })
5409
+ ] }),
5410
+ /* @__PURE__ */ jsxRuntime.jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxRuntime.jsx(AmountDisplay, { amount: item.amountFormatted, usdAmount: item.amountUsd }) })
5411
+ ]
5412
+ },
5413
+ item.id
5414
+ ))
5415
+ ] }, group.dateLabel)),
5416
+ showLoadMore && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center pt-sm", children: /* @__PURE__ */ jsxRuntime.jsx(TertiaryButton, { onClick: onLoadMore, children: loadMoreLabel }) })
5417
+ ] });
5418
+ };
5419
+ var EarnTokenSelectorView = ({
5420
+ selectedToken,
5421
+ onTokenClick,
5422
+ isLoading,
5423
+ selectTokenLabel,
5424
+ chainLabel,
5425
+ chainImage,
5426
+ chainDirectionLabel,
5427
+ chainDisabledTitle
5428
+ }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[10px]", children: [
5429
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-[10px] w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
5430
+ "button",
5431
+ {
5432
+ type: "button",
5433
+ onClick: onTokenClick,
5434
+ 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",
5435
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full items-center justify-between px-[var(--deframe-widget-size-padding-x-sm)] py-[6px]", children: [
5436
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] items-center", children: (selectedToken == null ? void 0 : selectedToken.logoURI) ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
5437
+ /* @__PURE__ */ jsxRuntime.jsx(
5438
+ "img",
5439
+ {
5440
+ src: selectedToken.logoURI,
5441
+ alt: selectedToken.symbol,
5442
+ className: "w-6 h-6 rounded-full"
5443
+ }
5444
+ ),
5445
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", className: "text-[color:var(--deframe-widget-color-text-primary)]", children: selectedToken.symbol })
5446
+ ] }) : isLoading ? /* @__PURE__ */ jsxRuntime.jsx(LoadingDots, {}) : /* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: selectTokenLabel }) }),
5447
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[18px] h-[18px] flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(hi2.HiChevronDown, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-tertiary)]" }) })
5448
+ ] })
5449
+ }
5450
+ ) }),
5451
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] items-center", children: [
5452
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-tertiary)]", children: chainDirectionLabel }),
5453
+ /* @__PURE__ */ jsxRuntime.jsxs(
5454
+ "button",
5455
+ {
5456
+ type: "button",
5457
+ disabled: true,
5458
+ title: chainDisabledTitle,
5459
+ 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",
5460
+ children: [
5461
+ chainImage && /* @__PURE__ */ jsxRuntime.jsx("img", { src: chainImage, alt: "", className: "w-3 h-3 rounded-full" }),
5462
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: chainLabel }),
5463
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[18px] h-[18px] flex items-center justify-center opacity-50", children: /* @__PURE__ */ jsxRuntime.jsx(hi2.HiChevronDown, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-tertiary)]" }) })
5464
+ ]
5465
+ }
5466
+ )
5467
+ ] })
5468
+ ] });
5469
+ var EarnAmountInputView = ({
5470
+ value,
5471
+ onChange,
5472
+ ariaLabel,
5473
+ dollarAmountFormatted,
5474
+ availableBalanceFormatted
5475
+ }) => {
5476
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col items-end justify-between min-h-[86px] text-right", children: [
5477
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end text-[color:var(--deframe-widget-color-text-secondary)]", children: [
5478
+ /* @__PURE__ */ jsxRuntime.jsx(
5479
+ "input",
5480
+ {
5481
+ placeholder: "0.00",
5482
+ type: "text",
5483
+ inputMode: "decimal",
5484
+ autoComplete: "off",
5485
+ "aria-label": ariaLabel,
5486
+ value,
5487
+ min: "0",
5488
+ step: "any",
5489
+ 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",
5490
+ onChange,
5491
+ onWheel: (event) => {
5492
+ event.currentTarget.blur();
5493
+ }
5494
+ }
5495
+ ),
5496
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", variant: "text-small", children: dollarAmountFormatted })
5497
+ ] }),
5498
+ availableBalanceFormatted && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "[font-size:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-tertiary)] whitespace-nowrap", children: availableBalanceFormatted })
5499
+ ] });
5500
+ };
5501
+ var EarnPercentageButtonsView = ({
5502
+ onPercentageClick,
5503
+ maxLabel
5504
+ }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[var(--deframe-widget-size-padding-x-md)] mt-[var(--deframe-widget-size-gap-md)] w-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] w-full", children: [
5505
+ /* @__PURE__ */ jsxRuntime.jsx(PercentageButton, { onClick: () => onPercentageClick(2500), children: "25%" }),
5506
+ /* @__PURE__ */ jsxRuntime.jsx(PercentageButton, { onClick: () => onPercentageClick(5e3), children: "50%" }),
5507
+ /* @__PURE__ */ jsxRuntime.jsx(PercentageButton, { onClick: () => onPercentageClick(7500), children: "75%" }),
5508
+ /* @__PURE__ */ jsxRuntime.jsx(PercentageButton, { onClick: () => onPercentageClick(1e4), children: maxLabel })
5509
+ ] }) });
5510
+ var EarnWithdrawTokenSelectorView = ({
5511
+ selectedToken,
5512
+ onTokenClick,
5513
+ selectTokenLabel,
5514
+ chainLabel,
5515
+ chainImage,
5516
+ chainDirectionLabel,
5517
+ chainDisabledTitle
5518
+ }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[10px]", children: [
5519
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-[10px] w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
5520
+ "button",
5521
+ {
5522
+ type: "button",
5523
+ onClick: onTokenClick,
5524
+ 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",
5525
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full items-center justify-between px-[var(--deframe-widget-size-padding-x-sm)] py-[6px]", children: [
5526
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] items-center", children: (selectedToken == null ? void 0 : selectedToken.symbol) ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
5527
+ selectedToken.logoURI && /* @__PURE__ */ jsxRuntime.jsx(
5528
+ "img",
5529
+ {
5530
+ src: selectedToken.logoURI,
5531
+ alt: selectedToken.symbol,
5532
+ className: "w-6 h-6 rounded-full"
5533
+ }
5534
+ ),
5535
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", className: "text-[color:var(--deframe-widget-color-text-primary)]", children: selectedToken.symbol })
5536
+ ] }) : /* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: selectTokenLabel }) }),
5537
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[18px] h-[18px] flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(md.MdArrowDropDown, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-tertiary)]" }) })
5538
+ ] })
5539
+ }
5540
+ ) }),
5541
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] items-center", children: [
5542
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-tertiary)]", children: chainDirectionLabel }),
5543
+ /* @__PURE__ */ jsxRuntime.jsxs(
5544
+ "button",
5545
+ {
5546
+ type: "button",
5547
+ disabled: true,
5548
+ title: chainDisabledTitle,
5549
+ 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",
5550
+ children: [
5551
+ chainImage && /* @__PURE__ */ jsxRuntime.jsx("img", { src: chainImage, alt: "", className: "w-3 h-3 rounded-full" }),
5552
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: chainLabel }),
5553
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[18px] h-[18px] flex items-center justify-center opacity-50", children: /* @__PURE__ */ jsxRuntime.jsx(md.MdArrowDropDown, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-tertiary)]" }) })
5554
+ ]
5555
+ }
5556
+ )
5557
+ ] })
5558
+ ] });
5559
+ var EarnNoBalanceNotificationView = ({
5560
+ prompt,
5561
+ actionLabel,
5562
+ onAction
5563
+ }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[var(--deframe-widget-size-padding-x-md)] mt-[var(--deframe-widget-size-gap-md)]", children: /* @__PURE__ */ jsxRuntime.jsx(SectionCard, { className: "bg-[var(--deframe-widget-color-state-warning)]/10 border border-[var(--deframe-widget-color-state-warning)]/20", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)]", children: [
5564
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-[var(--deframe-widget-size-gap-sm)]", children: [
5565
+ /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-5 h-5 text-[color:var(--deframe-widget-color-state-warning)] flex-shrink-0 mt-0.5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) }),
5566
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-primary)]", children: prompt }) })
5567
+ ] }),
5568
+ /* @__PURE__ */ jsxRuntime.jsx(
5569
+ PrimaryButton,
5570
+ {
5571
+ type: "button",
5572
+ onClick: onAction,
5573
+ className: "w-full mt-[var(--deframe-widget-size-gap-sm)]",
5574
+ children: actionLabel
5575
+ }
5576
+ )
5577
+ ] }) }) });
5578
+ var EarnTxStatusCardView = ({
5579
+ statusLabel,
5580
+ isProcessing,
5581
+ successMessage,
5582
+ errorMessage
5583
+ }) => /* @__PURE__ */ jsxRuntime.jsxs(SectionCard, { children: [
5584
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)]", children: [
5585
+ isProcessing && /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "h-5 w-5 animate-spin text-[color:var(--deframe-widget-color-brand-primary)]", viewBox: "0 0 24 24", children: [
5586
+ /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4", fill: "none" }),
5587
+ /* @__PURE__ */ jsxRuntime.jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" })
5588
+ ] }),
5589
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[color:var(--deframe-widget-color-text-secondary)] [font-size:var(--deframe-widget-font-size-sm)] font-[var(--deframe-widget-font-family)]", children: statusLabel })
5590
+ ] }) }),
5591
+ successMessage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-[var(--deframe-widget-size-gap-sm)] rounded px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)] bg-[var(--deframe-widget-color-state-success)]/10 text-[color:var(--deframe-widget-color-state-success)] [font-size:var(--deframe-widget-font-size-sm)] font-[var(--deframe-widget-font-family)]", children: successMessage }),
5592
+ errorMessage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-[var(--deframe-widget-size-gap-sm)] rounded px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)] bg-[var(--deframe-widget-color-state-error)]/10 text-[color:var(--deframe-widget-color-state-error)] [font-size:var(--deframe-widget-font-size-sm)] font-[var(--deframe-widget-font-family)]", children: errorMessage })
5593
+ ] });
5594
+ var EarnBytecodeErrorView = ({
5595
+ errorTitle,
5596
+ errorMessage
5597
+ }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-sm)] bg-[var(--deframe-widget-color-state-error)]/10 border border-[var(--deframe-widget-color-state-error)]/20", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-[var(--deframe-widget-size-gap-sm)]", children: [
5598
+ /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-5 h-5 text-[color:var(--deframe-widget-color-state-error)] flex-shrink-0", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z", clipRule: "evenodd" }) }),
5599
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
5600
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[color:var(--deframe-widget-color-state-error)] [font-weight:var(--deframe-widget-font-weight-medium)] [font-size:var(--deframe-widget-font-size-sm)] font-[var(--deframe-widget-font-family)] mb-[var(--deframe-widget-size-gap-xs)]", children: errorTitle }),
5601
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[color:var(--deframe-widget-color-text-primary)] [font-size:var(--deframe-widget-font-size-sm)] font-[var(--deframe-widget-font-family)]", children: errorMessage })
5602
+ ] })
5603
+ ] }) });
5604
+ var EarnPositionCardView = ({
5605
+ balanceUSD,
5606
+ balanceToken,
5607
+ icon,
5608
+ iconAlt
5609
+ }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[var(--deframe-widget-size-padding-x-md)]", children: /* @__PURE__ */ jsxRuntime.jsx(SectionCard, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-start", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)]", children: [
5610
+ icon && /* @__PURE__ */ jsxRuntime.jsx(
5611
+ "img",
5612
+ {
5613
+ src: icon,
5614
+ alt: iconAlt,
5615
+ className: "w-6 h-6 rounded-full"
5616
+ }
5617
+ ),
5618
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
5619
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "[font-size:var(--deframe-widget-font-size-xxl)] [font-weight:var(--deframe-widget-font-weight-extrabold)] text-[color:var(--deframe-widget-color-text-secondary)]", children: balanceUSD }),
5620
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-tertiary)]", children: balanceToken })
5621
+ ] })
5622
+ ] }) }) }) });
5623
+ var EarnDepositFormView = ({
5624
+ // Header / Layout
5625
+ headerTitle,
5626
+ onBack,
5627
+ progress,
5628
+ pageTitle,
5629
+ subtitle,
5630
+ onSubmit,
5631
+ // Token selector
5632
+ selectedToken,
5633
+ onTokenClick,
5634
+ isLoadingToken,
5635
+ selectTokenLabel,
5636
+ // Chain selector
5637
+ chainLabel,
5638
+ chainImage,
5639
+ chainDirectionLabel,
5640
+ chainDisabledTitle,
5641
+ // Amount input
5642
+ amountValue,
5643
+ onAmountChange,
5644
+ amountAriaLabel,
5645
+ dollarAmountFormatted,
5646
+ availableBalanceFormatted,
5647
+ // No balance notification
5648
+ showNoBalanceNotification,
5649
+ noBalancePrompt,
5650
+ goToSwapLabel,
5651
+ onGoToSwap,
5652
+ // Percentage buttons
5653
+ onPercentageClick,
5654
+ maxLabel,
5655
+ // TX status
5656
+ showTxStatus,
5657
+ txStatusLabel,
5658
+ isTxProcessing,
5659
+ isTxSuccess,
5660
+ isTxError,
5661
+ txSuccessMessage,
5662
+ txErrorMessage,
5663
+ // Bytecode error
5664
+ bytecodeErrorMessage,
5665
+ transactionErrorLabel,
5666
+ // Quote details
5667
+ isQuoteValid,
5668
+ isFetchingQuote,
5669
+ quoteDetails,
5670
+ // Submit button
5671
+ submitDisabled,
5672
+ submitButtonText
5673
+ }) => /* @__PURE__ */ jsxRuntime.jsxs(BackgroundContainer, { children: [
5674
+ /* @__PURE__ */ jsxRuntime.jsx(DetailsHeader, { title: headerTitle, onBack }),
5675
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-md)] text-[color:var(--deframe-widget-color-text-secondary)] pb-[var(--deframe-widget-size-padding-y-md)]", children: [
5676
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full px-[var(--deframe-widget-size-padding-x-md)]", children: /* @__PURE__ */ jsxRuntime.jsx(ProgressIndicator, { progress }) }),
5677
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)] px-[var(--deframe-widget-size-padding-x-md)]", children: [
5678
+ /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h5", children: pageTitle }),
5679
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: subtitle })
5680
+ ] }),
5681
+ /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit, children: [
5682
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[var(--deframe-widget-size-padding-x-md)]", children: /* @__PURE__ */ jsxRuntime.jsx(SectionCard, { className: "focus-within:bg-[var(--deframe-widget-color-bg-tertiary)] transition-colors", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-[var(--deframe-widget-size-gap-md)]", children: [
5683
+ /* @__PURE__ */ jsxRuntime.jsx(
5684
+ EarnTokenSelectorView,
5685
+ {
5686
+ selectedToken,
5687
+ onTokenClick,
5688
+ isLoading: isLoadingToken,
5689
+ selectTokenLabel,
5690
+ chainLabel,
5691
+ chainImage,
5692
+ chainDirectionLabel,
5693
+ chainDisabledTitle
5694
+ }
5695
+ ),
5696
+ /* @__PURE__ */ jsxRuntime.jsx(
5697
+ EarnAmountInputView,
5698
+ {
5699
+ value: amountValue,
5700
+ onChange: onAmountChange,
5701
+ ariaLabel: amountAriaLabel,
5702
+ dollarAmountFormatted,
5703
+ availableBalanceFormatted
5704
+ }
5705
+ )
5706
+ ] }) }) }),
5707
+ showNoBalanceNotification && /* @__PURE__ */ jsxRuntime.jsx(
5708
+ EarnNoBalanceNotificationView,
5709
+ {
5710
+ prompt: noBalancePrompt,
5711
+ actionLabel: goToSwapLabel,
5712
+ onAction: onGoToSwap
5713
+ }
5714
+ ),
5715
+ /* @__PURE__ */ jsxRuntime.jsx(
5716
+ EarnPercentageButtonsView,
5717
+ {
5718
+ onPercentageClick,
5719
+ maxLabel
5720
+ }
5721
+ ),
5722
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-md)] px-[var(--deframe-widget-size-padding-x-md)] pb-[var(--deframe-widget-size-padding-y-xl)] mt-[var(--deframe-widget-size-gap-md)]", children: [
5723
+ showTxStatus && /* @__PURE__ */ jsxRuntime.jsx(
5724
+ EarnTxStatusCardView,
5725
+ {
5726
+ statusLabel: txStatusLabel,
5727
+ isProcessing: isTxProcessing,
5728
+ successMessage: isTxSuccess ? txSuccessMessage : void 0,
5729
+ errorMessage: isTxError ? txErrorMessage : void 0
5730
+ }
5731
+ ),
5732
+ bytecodeErrorMessage && /* @__PURE__ */ jsxRuntime.jsx(
5733
+ EarnBytecodeErrorView,
5734
+ {
5735
+ errorTitle: transactionErrorLabel,
5736
+ errorMessage: bytecodeErrorMessage
5737
+ }
5738
+ ),
5739
+ isQuoteValid && !isFetchingQuote && !bytecodeErrorMessage && /* @__PURE__ */ jsxRuntime.jsx(SectionCard, { children: quoteDetails.map((detail, idx) => /* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { borderBottom: detail.borderBottom, children: [
5740
+ /* @__PURE__ */ jsxRuntime.jsx(InfoLabel, { children: detail.label }),
5741
+ /* @__PURE__ */ jsxRuntime.jsx(InfoValue, { children: detail.value })
5742
+ ] }, `${detail.label}-${idx}`)) })
5743
+ ] }),
5744
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-[var(--deframe-widget-size-padding-y-md)] px-[var(--deframe-widget-size-padding-x-md)] w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
5745
+ PrimaryButton,
5746
+ {
5747
+ type: "submit",
5748
+ className: "w-full text-[#252050]",
5749
+ disabled: submitDisabled,
5750
+ "aria-disabled": submitDisabled,
5751
+ children: submitButtonText
5752
+ }
5753
+ ) })
5754
+ ] })
5755
+ ] }) })
5756
+ ] });
5757
+ var EarnWithdrawFormView = ({
5758
+ // Header / Layout
5759
+ headerTitle,
5760
+ onBack,
5761
+ progress,
5762
+ pageTitle,
5763
+ subtitle,
5764
+ onSubmit,
5765
+ // Position card
5766
+ positionBalanceUSD,
5767
+ positionBalanceToken,
5768
+ strategyIcon,
5769
+ strategyName,
5770
+ // Token selector
5771
+ selectedToken,
5772
+ onTokenClick,
5773
+ selectTokenLabel,
5774
+ // Chain selector
5775
+ chainLabel,
5776
+ chainImage,
5777
+ chainDirectionLabel,
5778
+ chainDisabledTitle,
5779
+ // Amount input
5780
+ amountValue,
5781
+ onAmountChange,
5782
+ amountAriaLabel,
5783
+ dollarAmountFormatted,
5784
+ // Percentage buttons
5785
+ onPercentageClick,
5786
+ maxLabel,
5787
+ // TX status
5788
+ showTxStatus,
5789
+ txStatusLabel,
5790
+ isTxProcessing,
5791
+ isTxSuccess,
5792
+ isTxError,
5793
+ txSuccessMessage,
5794
+ txErrorMessage,
5795
+ // Bytecode error
5796
+ bytecodeErrorMessage,
5797
+ transactionErrorLabel,
5798
+ // Quote details
5799
+ isQuoteValid,
5800
+ isFetchingQuote,
5801
+ summaryTitle,
5802
+ summaryItems,
5803
+ // Submit button
5804
+ submitDisabled,
5805
+ submitButtonText
5806
+ }) => /* @__PURE__ */ jsxRuntime.jsxs(BackgroundContainer, { children: [
5807
+ /* @__PURE__ */ jsxRuntime.jsx(DetailsHeader, { title: headerTitle, onBack }),
5808
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-md)] text-[color:var(--deframe-widget-color-text-secondary)] pb-[var(--deframe-widget-size-padding-y-md)]", children: [
5809
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full px-[var(--deframe-widget-size-padding-x-md)]", children: /* @__PURE__ */ jsxRuntime.jsx(ProgressIndicator, { progress }) }),
5810
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)] px-[var(--deframe-widget-size-padding-x-md)]", children: [
5811
+ /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h5", children: pageTitle }),
5812
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: subtitle })
5813
+ ] }),
5814
+ /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit, children: [
5815
+ /* @__PURE__ */ jsxRuntime.jsx(
5816
+ EarnPositionCardView,
5817
+ {
5818
+ balanceUSD: positionBalanceUSD,
5819
+ balanceToken: positionBalanceToken,
5820
+ icon: strategyIcon,
5821
+ iconAlt: strategyName
5822
+ }
5823
+ ),
5824
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[var(--deframe-widget-size-padding-x-md)] mt-[var(--deframe-widget-size-gap-sm)]", children: /* @__PURE__ */ jsxRuntime.jsx(SectionCard, { className: "focus-within:bg-[var(--deframe-widget-color-bg-tertiary)] transition-colors", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-[var(--deframe-widget-size-gap-md)]", children: [
5825
+ /* @__PURE__ */ jsxRuntime.jsx(
5826
+ EarnWithdrawTokenSelectorView,
5827
+ {
5828
+ selectedToken,
5829
+ onTokenClick,
5830
+ selectTokenLabel,
5831
+ chainLabel,
5832
+ chainImage,
5833
+ chainDirectionLabel,
5834
+ chainDisabledTitle
5835
+ }
5836
+ ),
5837
+ /* @__PURE__ */ jsxRuntime.jsx(
5838
+ EarnAmountInputView,
5839
+ {
5840
+ value: amountValue,
5841
+ onChange: onAmountChange,
5842
+ ariaLabel: amountAriaLabel,
5843
+ dollarAmountFormatted
5844
+ }
5845
+ )
5846
+ ] }) }) }),
5847
+ /* @__PURE__ */ jsxRuntime.jsx(
5848
+ EarnPercentageButtonsView,
5849
+ {
5850
+ onPercentageClick,
5851
+ maxLabel
5852
+ }
5853
+ ),
5854
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-md)] px-[var(--deframe-widget-size-padding-x-md)] pb-[var(--deframe-widget-size-padding-y-xl)] mt-[var(--deframe-widget-size-gap-md)]", children: [
5855
+ showTxStatus && /* @__PURE__ */ jsxRuntime.jsx(
5856
+ EarnTxStatusCardView,
5857
+ {
5858
+ statusLabel: txStatusLabel,
5859
+ isProcessing: isTxProcessing,
5860
+ successMessage: isTxSuccess ? txSuccessMessage : void 0,
5861
+ errorMessage: isTxError ? txErrorMessage : void 0
5862
+ }
5863
+ ),
5864
+ bytecodeErrorMessage && /* @__PURE__ */ jsxRuntime.jsx(
5865
+ EarnBytecodeErrorView,
5866
+ {
5867
+ errorTitle: transactionErrorLabel,
5868
+ errorMessage: bytecodeErrorMessage
5869
+ }
5870
+ ),
5871
+ isQuoteValid && !isFetchingQuote && !bytecodeErrorMessage && /* @__PURE__ */ jsxRuntime.jsx(
5872
+ SummaryDetails,
5873
+ {
5874
+ title: summaryTitle,
5875
+ items: summaryItems,
5876
+ defaultOpen: false,
5877
+ className: "bg-[var(--deframe-widget-color-bg-secondary)]"
5878
+ }
5879
+ )
5880
+ ] }),
5881
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-[var(--deframe-widget-size-padding-y-md)] px-[var(--deframe-widget-size-padding-x-md)] w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
5882
+ PrimaryButton,
5883
+ {
5884
+ type: "submit",
5885
+ className: "w-full",
5886
+ disabled: submitDisabled,
5887
+ "aria-disabled": submitDisabled,
5888
+ children: submitButtonText
5889
+ }
5890
+ ) })
5891
+ ] })
5892
+ ] }) })
5893
+ ] });
5894
+ var EarnDepositProcessingView = ({
5895
+ progress,
5896
+ title,
5897
+ descriptionPrefix,
5898
+ activityHistoryText,
5899
+ onGoToHistory,
5900
+ onBack,
5901
+ strategyName,
5902
+ apyLabel,
5903
+ apyValue,
5904
+ iconSrc,
5905
+ iconAlt,
5906
+ amountUSD,
5907
+ amountToken,
5908
+ transactionSteps,
5909
+ processingDetailsLabels
5910
+ }) => {
5911
+ return /* @__PURE__ */ jsxRuntime.jsxs(
5912
+ TransactionScreen,
5913
+ {
5914
+ progress,
5915
+ iconType: "processing",
5916
+ title,
5917
+ description: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
5918
+ descriptionPrefix,
5919
+ " ",
5920
+ /* @__PURE__ */ jsxRuntime.jsx(
5921
+ "span",
5922
+ {
5923
+ className: "[font-weight:var(--deframe-widget-font-weight-semibold)] underline underline-offset-2 cursor-pointer text-[color:var(--deframe-widget-color-brand-primary)]",
5924
+ onClick: onGoToHistory,
5925
+ children: activityHistoryText
5926
+ }
5927
+ )
5928
+ ] }),
5929
+ onBack,
5930
+ children: [
5931
+ /* @__PURE__ */ jsxRuntime.jsx(
5932
+ TransactionScreenInvestmentCard,
5933
+ {
5934
+ strategyName,
5935
+ apyLabel,
5936
+ apyValue,
5937
+ iconSrc,
5938
+ iconAlt,
5939
+ amountUSD,
5940
+ amountToken
5941
+ }
5942
+ ),
5943
+ /* @__PURE__ */ jsxRuntime.jsx(
5944
+ TransactionProcessingDetails,
5945
+ {
5946
+ steps: transactionSteps,
5947
+ defaultOpen: true,
5948
+ className: "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-primary)]",
5949
+ labels: processingDetailsLabels
5950
+ }
5951
+ )
5952
+ ]
5953
+ }
5954
+ );
5955
+ };
5956
+ var EarnDepositSuccessView = ({
5957
+ title,
5958
+ descriptionPrefix,
5959
+ formattedAmount,
5960
+ tokenSymbol,
5961
+ descriptionSuffix,
5962
+ descriptionLinkText,
5963
+ onClose,
5964
+ exploreMoreLabel,
5965
+ strategyName,
5966
+ apyLabel,
5967
+ apyValue,
5968
+ iconSrc,
5969
+ iconAlt,
5970
+ amountUSD,
5971
+ amountToken,
5972
+ transactionSteps,
5973
+ processingDetailsLabels
5974
+ }) => {
5975
+ return /* @__PURE__ */ jsxRuntime.jsxs(
5976
+ TransactionScreen,
5977
+ {
5978
+ progress: 100,
5979
+ iconType: "success",
5980
+ title,
5981
+ description: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
5982
+ descriptionPrefix,
5983
+ /* @__PURE__ */ jsxRuntime.jsxs("strong", { className: "[font-weight:var(--deframe-widget-font-weight-semibold)]", children: [
5984
+ " ",
5985
+ formattedAmount,
5986
+ " ",
5987
+ tokenSymbol,
5988
+ " "
5989
+ ] }),
5990
+ descriptionSuffix,
5991
+ " ",
5992
+ /* @__PURE__ */ jsxRuntime.jsx(
5993
+ "strong",
5994
+ {
5995
+ className: "[font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-brand-primary)] cursor-pointer",
5996
+ onClick: onClose,
5997
+ children: descriptionLinkText
5998
+ }
5999
+ )
6000
+ ] }),
6001
+ onClose,
6002
+ actions: /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { className: "w-full", onClick: onClose, children: exploreMoreLabel }),
6003
+ children: [
6004
+ /* @__PURE__ */ jsxRuntime.jsx(
6005
+ TransactionScreenInvestmentCard,
6006
+ {
6007
+ strategyName,
6008
+ apyLabel,
6009
+ apyValue,
6010
+ iconSrc,
6011
+ iconAlt,
6012
+ amountUSD,
6013
+ amountToken
6014
+ }
6015
+ ),
6016
+ /* @__PURE__ */ jsxRuntime.jsx(
6017
+ TransactionProcessingDetails,
6018
+ {
6019
+ steps: transactionSteps,
6020
+ defaultOpen: true,
6021
+ className: "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-primary)]",
6022
+ labels: processingDetailsLabels
6023
+ }
6024
+ )
6025
+ ]
6026
+ }
6027
+ );
6028
+ };
6029
+ var EarnDepositWarningView = ({
6030
+ progress,
6031
+ title,
6032
+ description,
6033
+ backTitle,
6034
+ onBack,
6035
+ cancelLabel,
6036
+ onCancel,
6037
+ retryLabel,
6038
+ onRetry,
6039
+ strategyName,
6040
+ apyLabel,
6041
+ apyValue,
6042
+ iconSrc,
6043
+ iconAlt,
6044
+ amountUSD,
6045
+ amountToken,
6046
+ transactionSteps,
6047
+ processingDetailsLabels
6048
+ }) => {
6049
+ return /* @__PURE__ */ jsxRuntime.jsxs(
6050
+ TransactionScreen,
6051
+ {
6052
+ progress,
6053
+ iconType: "warning",
6054
+ title,
6055
+ description,
6056
+ onBack,
6057
+ backTitle,
6058
+ actions: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] w-full", children: [
6059
+ /* @__PURE__ */ jsxRuntime.jsx(SecondaryButton, { className: "flex-1", onClick: onCancel, children: cancelLabel }),
6060
+ /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { className: "flex-1", onClick: onRetry, children: retryLabel })
6061
+ ] }),
6062
+ children: [
6063
+ /* @__PURE__ */ jsxRuntime.jsx(
6064
+ TransactionScreenInvestmentCard,
6065
+ {
6066
+ strategyName,
6067
+ apyLabel,
6068
+ apyValue,
6069
+ iconSrc,
6070
+ iconAlt,
6071
+ amountUSD,
6072
+ amountToken
6073
+ }
6074
+ ),
6075
+ /* @__PURE__ */ jsxRuntime.jsx(
6076
+ TransactionProcessingDetails,
6077
+ {
6078
+ steps: transactionSteps,
6079
+ defaultOpen: true,
6080
+ className: "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-primary)]",
6081
+ labels: processingDetailsLabels
6082
+ }
6083
+ )
6084
+ ]
6085
+ }
6086
+ );
6087
+ };
6088
+ var EarnDepositFailedView = ({
6089
+ progress,
6090
+ title,
6091
+ description,
6092
+ backTitle,
6093
+ onBack,
6094
+ viewExplorerLabel,
6095
+ onViewExplorer,
6096
+ viewExplorerDisabled,
6097
+ retryLabel,
6098
+ onRetry,
6099
+ strategyName,
6100
+ apyLabel,
6101
+ apyValue,
6102
+ iconSrc,
6103
+ iconAlt,
6104
+ iconGradient,
6105
+ amountUSD,
6106
+ amountToken,
6107
+ transactionSteps,
6108
+ processingDetailsLabels
6109
+ }) => {
6110
+ return /* @__PURE__ */ jsxRuntime.jsxs(
6111
+ TransactionScreen,
6112
+ {
6113
+ progress,
6114
+ iconType: "warning",
6115
+ iconGradient,
6116
+ title,
6117
+ description,
6118
+ onBack,
6119
+ backTitle,
6120
+ actions: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] w-full", children: [
6121
+ /* @__PURE__ */ jsxRuntime.jsx(SecondaryButton, { className: "flex-1", onClick: onViewExplorer, disabled: viewExplorerDisabled, children: viewExplorerLabel }),
6122
+ /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { className: "flex-1", onClick: onRetry, children: retryLabel })
6123
+ ] }),
6124
+ children: [
6125
+ /* @__PURE__ */ jsxRuntime.jsx(
6126
+ TransactionScreenInvestmentCard,
6127
+ {
6128
+ strategyName,
6129
+ apyLabel,
6130
+ apyValue,
6131
+ iconSrc,
6132
+ iconAlt,
6133
+ amountUSD,
6134
+ amountToken
6135
+ }
6136
+ ),
6137
+ /* @__PURE__ */ jsxRuntime.jsx(
6138
+ TransactionProcessingDetails,
6139
+ {
6140
+ steps: transactionSteps,
6141
+ defaultOpen: true,
6142
+ className: "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-primary)]",
6143
+ labels: processingDetailsLabels
6144
+ }
6145
+ )
6146
+ ]
6147
+ }
6148
+ );
6149
+ };
6150
+ var EarnWithdrawProcessingView = ({
6151
+ progress,
6152
+ title,
6153
+ descriptionPrefix,
6154
+ activityHistoryText,
6155
+ descriptionSuffix,
6156
+ onGoToHistory,
6157
+ onBack,
6158
+ strategyName,
6159
+ apyLabel,
6160
+ apyValue,
6161
+ iconSrc,
6162
+ iconAlt,
6163
+ amountUSD,
6164
+ amountToken,
6165
+ transactionSteps,
6166
+ processingDetailsLabels
6167
+ }) => {
6168
+ return /* @__PURE__ */ jsxRuntime.jsxs(
6169
+ TransactionScreen,
6170
+ {
6171
+ progress,
6172
+ iconType: "processing",
6173
+ title,
6174
+ description: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
6175
+ descriptionPrefix,
6176
+ " ",
6177
+ /* @__PURE__ */ jsxRuntime.jsx(
6178
+ "span",
6179
+ {
6180
+ className: "[font-weight:var(--deframe-widget-font-weight-semibold)] underline underline-offset-2 cursor-pointer text-[color:var(--deframe-widget-color-brand-primary)]",
6181
+ onClick: onGoToHistory,
6182
+ children: activityHistoryText
6183
+ }
6184
+ ),
6185
+ " ",
6186
+ descriptionSuffix
6187
+ ] }),
6188
+ onBack,
6189
+ children: [
6190
+ /* @__PURE__ */ jsxRuntime.jsx(
6191
+ TransactionScreenInvestmentCard,
6192
+ {
6193
+ strategyName,
6194
+ apyLabel,
6195
+ apyValue,
6196
+ iconSrc,
6197
+ iconAlt,
6198
+ amountUSD,
6199
+ amountToken
6200
+ }
6201
+ ),
6202
+ /* @__PURE__ */ jsxRuntime.jsx(
6203
+ TransactionProcessingDetails,
6204
+ {
6205
+ steps: transactionSteps,
6206
+ defaultOpen: true,
6207
+ className: "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-primary)]",
6208
+ labels: processingDetailsLabels
6209
+ }
6210
+ )
6211
+ ]
6212
+ }
6213
+ );
6214
+ };
6215
+ var EarnWithdrawSuccessView = ({
6216
+ title,
6217
+ descriptionPrefix,
6218
+ formattedAmount,
6219
+ tokenSymbol,
6220
+ descriptionSuffix,
6221
+ descriptionLinkText,
6222
+ onClose,
6223
+ exploreMoreLabel,
6224
+ strategyName,
6225
+ apyLabel,
6226
+ apyValue,
6227
+ iconSrc,
6228
+ iconAlt,
6229
+ amountUSD,
6230
+ amountToken,
6231
+ transactionSteps,
6232
+ processingDetailsLabels
6233
+ }) => {
6234
+ return /* @__PURE__ */ jsxRuntime.jsxs(
6235
+ TransactionScreen,
6236
+ {
6237
+ progress: 100,
6238
+ iconType: "success",
6239
+ title,
6240
+ description: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
6241
+ descriptionPrefix,
6242
+ /* @__PURE__ */ jsxRuntime.jsxs("strong", { className: "[font-weight:var(--deframe-widget-font-weight-semibold)]", children: [
6243
+ " ",
6244
+ formattedAmount,
6245
+ " ",
6246
+ tokenSymbol,
6247
+ " "
6248
+ ] }),
6249
+ descriptionSuffix,
6250
+ " ",
6251
+ /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "[font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-brand-primary)]", children: descriptionLinkText })
6252
+ ] }),
6253
+ onClose,
6254
+ actions: /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { className: "w-full", onClick: onClose, children: exploreMoreLabel }),
6255
+ children: [
6256
+ /* @__PURE__ */ jsxRuntime.jsx(
6257
+ TransactionScreenInvestmentCard,
6258
+ {
6259
+ strategyName,
6260
+ apyLabel,
6261
+ apyValue,
6262
+ iconSrc,
6263
+ iconAlt,
6264
+ amountUSD,
6265
+ amountToken
6266
+ }
6267
+ ),
6268
+ /* @__PURE__ */ jsxRuntime.jsx(
6269
+ TransactionProcessingDetails,
6270
+ {
6271
+ steps: transactionSteps,
6272
+ defaultOpen: true,
6273
+ className: "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-primary)]",
6274
+ labels: processingDetailsLabels
6275
+ }
6276
+ )
6277
+ ]
6278
+ }
6279
+ );
6280
+ };
6281
+ var EarnWithdrawWarningView = ({
6282
+ progress,
6283
+ title,
6284
+ description,
6285
+ backTitle,
6286
+ onBack,
6287
+ cancelLabel,
6288
+ onCancel,
6289
+ retryLabel,
6290
+ onRetry,
6291
+ strategyName,
6292
+ apyLabel,
6293
+ apyValue,
6294
+ iconSrc,
6295
+ iconAlt,
6296
+ amountUSD,
6297
+ amountToken,
6298
+ transactionSteps,
6299
+ processingDetailsLabels
6300
+ }) => {
6301
+ return /* @__PURE__ */ jsxRuntime.jsxs(
6302
+ TransactionScreen,
6303
+ {
6304
+ progress,
6305
+ iconType: "warning",
6306
+ title,
6307
+ description,
6308
+ onBack,
6309
+ backTitle,
6310
+ actions: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] w-full", children: [
6311
+ /* @__PURE__ */ jsxRuntime.jsx(SecondaryButton, { className: "flex-1", onClick: onCancel, children: cancelLabel }),
6312
+ /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { className: "flex-1", onClick: onRetry, children: retryLabel })
6313
+ ] }),
6314
+ children: [
6315
+ /* @__PURE__ */ jsxRuntime.jsx(
6316
+ TransactionScreenInvestmentCard,
6317
+ {
6318
+ strategyName,
6319
+ apyLabel,
6320
+ apyValue,
6321
+ iconSrc,
6322
+ iconAlt,
6323
+ amountUSD,
6324
+ amountToken
6325
+ }
6326
+ ),
6327
+ /* @__PURE__ */ jsxRuntime.jsx(
6328
+ TransactionProcessingDetails,
6329
+ {
6330
+ steps: transactionSteps,
6331
+ defaultOpen: true,
6332
+ className: "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-primary)]",
6333
+ labels: processingDetailsLabels
6334
+ }
6335
+ )
6336
+ ]
6337
+ }
6338
+ );
6339
+ };
6340
+ var EarnWithdrawFailedView = ({
6341
+ progress,
6342
+ title,
6343
+ description,
6344
+ backTitle,
6345
+ onBack,
6346
+ viewExplorerLabel,
6347
+ onViewExplorer,
6348
+ viewExplorerDisabled,
6349
+ retryLabel,
6350
+ onRetry,
6351
+ strategyName,
6352
+ apyLabel,
6353
+ apyValue,
6354
+ iconSrc,
6355
+ iconAlt,
6356
+ iconGradient,
6357
+ amountUSD,
6358
+ amountToken,
6359
+ transactionSteps,
6360
+ processingDetailsLabels
6361
+ }) => {
6362
+ return /* @__PURE__ */ jsxRuntime.jsxs(
6363
+ TransactionScreen,
6364
+ {
6365
+ progress,
6366
+ iconType: "warning",
6367
+ iconGradient,
6368
+ title,
6369
+ description,
6370
+ onBack,
6371
+ backTitle,
6372
+ actions: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] w-full", children: [
6373
+ /* @__PURE__ */ jsxRuntime.jsx(SecondaryButton, { className: "flex-1", onClick: onViewExplorer, disabled: viewExplorerDisabled, children: viewExplorerLabel }),
6374
+ /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { className: "flex-1", onClick: onRetry, children: retryLabel })
6375
+ ] }),
6376
+ children: [
6377
+ /* @__PURE__ */ jsxRuntime.jsx(
6378
+ TransactionScreenInvestmentCard,
6379
+ {
6380
+ strategyName,
6381
+ apyLabel,
6382
+ apyValue,
6383
+ iconSrc,
6384
+ iconAlt,
6385
+ amountUSD,
6386
+ amountToken
6387
+ }
6388
+ ),
6389
+ /* @__PURE__ */ jsxRuntime.jsx(
6390
+ TransactionProcessingDetails,
6391
+ {
6392
+ steps: transactionSteps,
6393
+ defaultOpen: true,
6394
+ className: "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-primary)]",
6395
+ labels: processingDetailsLabels
6396
+ }
6397
+ )
6398
+ ]
6399
+ }
6400
+ );
6401
+ };
4469
6402
 
4470
6403
  exports.ActionButton = ActionButton;
4471
6404
  exports.ActionSheet = ActionSheet;
4472
6405
  exports.AddressDisplay = AddressDisplay;
6406
+ exports.ApyRange = ApyRange;
6407
+ exports.BackButton = BackButton;
4473
6408
  exports.BackgroundContainer = BackgroundContainer;
4474
6409
  exports.BannerNotification = BannerNotification;
6410
+ exports.ChooseANetworkView = ChooseANetworkView;
4475
6411
  exports.ChooseAStrategyActionsheetView = ChooseAStrategyActionsheetView;
4476
6412
  exports.ChooseAnAssetSwapView = ChooseAnAssetSwapView;
4477
6413
  exports.CloseButton = CloseButton_default;
@@ -4482,11 +6418,41 @@ exports.ConnectWalletList = ConnectWalletList;
4482
6418
  exports.Currency = Currency;
4483
6419
  exports.DeframeComponentsProvider = DeframeComponentsProvider;
4484
6420
  exports.DetailsHeader = DetailsHeader;
6421
+ exports.EarnAmountInputView = EarnAmountInputView;
6422
+ exports.EarnBalanceCard = EarnBalanceCard;
6423
+ exports.EarnBytecodeErrorView = EarnBytecodeErrorView;
6424
+ exports.EarnDepositFailedView = EarnDepositFailedView;
6425
+ exports.EarnDepositFormView = EarnDepositFormView;
6426
+ exports.EarnDepositProcessingView = EarnDepositProcessingView;
6427
+ exports.EarnDepositSuccessView = EarnDepositSuccessView;
6428
+ exports.EarnDepositWarningView = EarnDepositWarningView;
6429
+ exports.EarnDesktopView = EarnDesktopView;
6430
+ exports.EarnExploreGridView = EarnExploreGridView;
6431
+ exports.EarnInvestedSectionView = EarnInvestedSectionView;
6432
+ exports.EarnInvestmentDetailsView = EarnInvestmentDetailsView;
6433
+ exports.EarnInvestmentSummaryView = EarnInvestmentSummaryView;
6434
+ exports.EarnNoBalanceNotificationView = EarnNoBalanceNotificationView;
6435
+ exports.EarnPercentageButtonsView = EarnPercentageButtonsView;
6436
+ exports.EarnPositionCardView = EarnPositionCardView;
6437
+ exports.EarnRecentTransactionsView = EarnRecentTransactionsView;
6438
+ exports.EarnTokenSelectorView = EarnTokenSelectorView;
6439
+ exports.EarnTxStatusCardView = EarnTxStatusCardView;
6440
+ exports.EarnWithdrawFailedView = EarnWithdrawFailedView;
6441
+ exports.EarnWithdrawFormView = EarnWithdrawFormView;
6442
+ exports.EarnWithdrawProcessingView = EarnWithdrawProcessingView;
6443
+ exports.EarnWithdrawSuccessView = EarnWithdrawSuccessView;
6444
+ exports.EarnWithdrawTokenSelectorView = EarnWithdrawTokenSelectorView;
6445
+ exports.EarnWithdrawWarningView = EarnWithdrawWarningView;
4485
6446
  exports.Fiat = Currency;
4486
6447
  exports.FlexCol = FlexCol;
4487
6448
  exports.FlexRow = FlexRow;
6449
+ exports.GroupedStrategyListView = GroupedStrategyListView;
4488
6450
  exports.HighRiskBadge = HighRiskBadge;
4489
6451
  exports.HistoryDepositDetailsView = HistoryDepositDetailsView;
6452
+ exports.HistoryListSkeleton = HistoryListSkeleton;
6453
+ exports.HistoryListView = HistoryListView;
6454
+ exports.HistorySwapDetailsView = HistorySwapDetailsView;
6455
+ exports.HistoryTabEmpty = HistoryTabEmpty;
4490
6456
  exports.HistoryWithdrawDetailsView = HistoryWithdrawDetailsView;
4491
6457
  exports.InfoLabel = InfoLabel;
4492
6458
  exports.InfoRow = InfoRow;
@@ -4495,6 +6461,7 @@ exports.InfoRowIconValue = InfoRowIconValue;
4495
6461
  exports.InfoRowWithIcon = InfoRowWithIcon;
4496
6462
  exports.InfoValue = InfoValue;
4497
6463
  exports.Input = Input2;
6464
+ exports.Label = Label;
4498
6465
  exports.Link = Link;
4499
6466
  exports.ListItem = ListItem;
4500
6467
  exports.ListItemContent = ListItemContent;
@@ -4521,6 +6488,7 @@ exports.StepDisplay = StepDisplay;
4521
6488
  exports.StepStatusIcon = StepStatusIcon;
4522
6489
  exports.StepStatusText = StepStatusText;
4523
6490
  exports.StrategyDetailsView = StrategyDetailsView;
6491
+ exports.StrategyGridCard = StrategyGridCard;
4524
6492
  exports.SummaryDetails = SummaryDetails;
4525
6493
  exports.SummaryDetailsCryptoControlV2 = SummaryDetailsCryptoControlV2;
4526
6494
  exports.SwapAdvancedSettingsView = SwapAdvancedSettingsView;
@@ -4528,6 +6496,7 @@ exports.SwapAmountInputView = SwapAmountInputView;
4528
6496
  exports.SwapCrossChainProcessingView = SwapCrossChainProcessingView;
4529
6497
  exports.SwapFormView = SwapFormView;
4530
6498
  exports.SwapFromCardView = SwapFromCardView;
6499
+ exports.SwapHistoryView = SwapHistoryView;
4531
6500
  exports.SwapNetworkSelectorView = SwapNetworkSelectorView;
4532
6501
  exports.SwapOutputAmountView = SwapOutputAmountView;
4533
6502
  exports.SwapProcessingView = SwapProcessingView;
@@ -4544,6 +6513,7 @@ exports.SwapToCardView = SwapToCardView;
4544
6513
  exports.SwapTokenSelectorView = SwapTokenSelectorView;
4545
6514
  exports.SwapTransactionFailedView = SwapTransactionFailedView;
4546
6515
  exports.SwapTransactionFailedViewSimple = SwapTransactionFailedViewSimple;
6516
+ exports.SwapWidgetFallbackView = SwapWidgetFallbackView;
4547
6517
  exports.Tabs = Tabs;
4548
6518
  exports.TabsContent = TabsContent;
4549
6519
  exports.TabsList = TabsList;
@@ -4559,6 +6529,7 @@ exports.TransactionProcessingDetails = TransactionProcessingDetails;
4559
6529
  exports.TransactionScreen = TransactionScreen;
4560
6530
  exports.TransactionScreenIcon = TransactionScreenIcon;
4561
6531
  exports.TransactionScreenInvestmentCard = TransactionScreenInvestmentCard;
6532
+ exports.WalletBalances = WalletBalances;
4562
6533
  exports.WalletConnectPanel = WalletConnectPanel;
4563
6534
  exports.WalletItem = WalletItem;
4564
6535
  exports.WalletList = ConnectWalletList;