@compass-labs/widgets 0.1.8 → 0.1.9

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 (12) hide show
  1. package/dist/index.d.mts +109 -39
  2. package/dist/index.d.ts +109 -39
  3. package/dist/index.js +763 -428
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +763 -429
  6. package/dist/index.mjs.map +1 -1
  7. package/dist/server/index.js +0 -42
  8. package/dist/server/index.js.map +1 -1
  9. package/dist/server/index.mjs +0 -42
  10. package/dist/server/index.mjs.map +1 -1
  11. package/dist/styles.css +24 -7
  12. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -258,10 +258,10 @@ var highContrastTypography = {
258
258
  }
259
259
  };
260
260
  var baseSpacing = {
261
- unit: "4px",
262
- containerPadding: "1.5rem",
263
- cardPadding: "1.25rem",
264
- inputPadding: "0.75rem 1rem"
261
+ unit: "12px",
262
+ containerPadding: "1rem",
263
+ cardPadding: "15px",
264
+ inputPadding: "0.5rem 0.75rem"
265
265
  };
266
266
  var baseTransitions = {
267
267
  fast: "150ms ease-out",
@@ -284,6 +284,7 @@ var compassDark = {
284
284
  // wallet-earn: --accent-primary: #6366f1, --accent-secondary: #8b5cf6
285
285
  primary: "#6366f1",
286
286
  primaryHover: "#818cf8",
287
+ primaryMuted: "rgba(99, 102, 241, 0.15)",
287
288
  primaryText: "#ffffff",
288
289
  secondary: "#8b5cf6",
289
290
  secondaryHover: "#a78bfa"
@@ -361,6 +362,7 @@ var compassLight = {
361
362
  brand: {
362
363
  primary: "#6366f1",
363
364
  primaryHover: "#4f46e5",
365
+ primaryMuted: "rgba(99, 102, 241, 0.1)",
364
366
  primaryText: "#ffffff",
365
367
  secondary: "#4f46e5",
366
368
  secondaryHover: "#4338ca"
@@ -434,6 +436,7 @@ var minimalDark = {
434
436
  brand: {
435
437
  primary: "#ffffff",
436
438
  primaryHover: "#e5e5e5",
439
+ primaryMuted: "rgba(255, 255, 255, 0.1)",
437
440
  primaryText: "#0a0a0a",
438
441
  secondary: "#a3a3a3",
439
442
  secondaryHover: "#d4d4d4"
@@ -507,6 +510,7 @@ var minimalLight = {
507
510
  brand: {
508
511
  primary: "#0a0a0a",
509
512
  primaryHover: "#262626",
513
+ primaryMuted: "rgba(10, 10, 10, 0.1)",
510
514
  primaryText: "#ffffff",
511
515
  secondary: "#525252",
512
516
  secondaryHover: "#404040"
@@ -580,6 +584,7 @@ var highContrastDark = {
580
584
  brand: {
581
585
  primary: "#3b82f6",
582
586
  primaryHover: "#60a5fa",
587
+ primaryMuted: "rgba(59, 130, 246, 0.2)",
583
588
  primaryText: "#ffffff",
584
589
  secondary: "#60a5fa",
585
590
  secondaryHover: "#93c5fd"
@@ -653,6 +658,7 @@ var highContrastLight = {
653
658
  brand: {
654
659
  primary: "#1d4ed8",
655
660
  primaryHover: "#1e40af",
661
+ primaryMuted: "rgba(29, 78, 216, 0.15)",
656
662
  primaryText: "#ffffff",
657
663
  secondary: "#1e40af",
658
664
  secondaryHover: "#1e3a8a"
@@ -754,11 +760,11 @@ function colorsToCssVariables(colors) {
754
760
  }
755
761
  function typographyScaleToCssVariables(name, scale) {
756
762
  const vars = {};
757
- vars[cssVarPath("font", name, "size")] = scale.fontSize;
758
- vars[cssVarPath("font", name, "line-height")] = String(scale.lineHeight);
759
- vars[cssVarPath("font", name, "weight")] = String(scale.fontWeight);
763
+ vars[`--compass-font-size-${name}`] = scale.fontSize;
764
+ vars[`--compass-font-line-height-${name}`] = String(scale.lineHeight);
765
+ vars[`--compass-font-weight-${name}`] = String(scale.fontWeight);
760
766
  if (scale.letterSpacing) {
761
- vars[cssVarPath("font", name, "letter-spacing")] = scale.letterSpacing;
767
+ vars[`--compass-font-letter-spacing-${name}`] = scale.letterSpacing;
762
768
  }
763
769
  return vars;
764
770
  }
@@ -782,6 +788,7 @@ function typographyToCssVariables(typography) {
782
788
  );
783
789
  }
784
790
  }
791
+ vars["--compass-font-size-small"] = typography.caption.fontSize;
785
792
  return vars;
786
793
  }
787
794
  function spacingToCssVariables(spacing) {
@@ -795,7 +802,10 @@ function spacingToCssVariables(spacing) {
795
802
  function shapeToCssVariables(shape) {
796
803
  const vars = {};
797
804
  for (const [key, value] of Object.entries(shape.borderRadius)) {
798
- vars[cssVarPath("radius", key)] = value;
805
+ if (key === "md") {
806
+ vars["--compass-border-radius"] = value;
807
+ }
808
+ vars[`--compass-border-radius-${key}`] = value;
799
809
  }
800
810
  vars["--compass-border-width"] = shape.borderWidth;
801
811
  return vars;
@@ -865,8 +875,11 @@ function resolveTheme(input) {
865
875
  }
866
876
  return input;
867
877
  }
868
- function ThemeProvider({ children, theme: initialTheme }) {
869
- const [themeInput, setThemeInput] = react.useState(initialTheme);
878
+ function ThemeProvider({ children, theme: themeProp }) {
879
+ const [themeInput, setThemeInput] = react.useState(themeProp);
880
+ react.useEffect(() => {
881
+ setThemeInput(themeProp);
882
+ }, [themeProp]);
870
883
  const theme = react.useMemo(() => resolveTheme(themeInput), [themeInput]);
871
884
  const cssVariables = react.useMemo(() => injectCssVariables(theme, ".compass-widget"), [theme]);
872
885
  react.useEffect(() => {
@@ -941,26 +954,43 @@ function ChainSwitcher() {
941
954
  icon: "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/arbitrum/info/logo.png"
942
955
  }
943
956
  };
944
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-1 p-1 rounded-lg", style: { backgroundColor: "var(--compass-color-surface)" }, children: SUPPORTED_CHAINS.map((id) => {
945
- const config = chainConfigs[id];
946
- const isActive = chainId === id;
947
- return /* @__PURE__ */ jsxRuntime.jsxs(
948
- "button",
949
- {
950
- onClick: () => setChain(id),
951
- className: "flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-all",
952
- style: {
953
- backgroundColor: isActive ? "var(--compass-color-primary)" : "transparent",
954
- color: isActive ? "var(--compass-color-primary-text)" : "var(--compass-color-text-secondary)"
955
- },
956
- children: [
957
- /* @__PURE__ */ jsxRuntime.jsx("img", { src: config.icon, alt: config.name, className: "w-4 h-4" }),
958
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: config.name })
959
- ]
957
+ return /* @__PURE__ */ jsxRuntime.jsx(
958
+ "div",
959
+ {
960
+ className: "flex",
961
+ style: {
962
+ backgroundColor: "var(--compass-color-surface)",
963
+ borderRadius: "var(--compass-border-radius-lg)",
964
+ fontFamily: "var(--compass-font-family)",
965
+ padding: "calc(var(--compass-spacing-unit) * 0.25)",
966
+ gap: "calc(var(--compass-spacing-unit) * 0.25)"
960
967
  },
961
- id
962
- );
963
- }) });
968
+ children: SUPPORTED_CHAINS.map((id) => {
969
+ const config = chainConfigs[id];
970
+ const isActive = chainId === id;
971
+ return /* @__PURE__ */ jsxRuntime.jsxs(
972
+ "button",
973
+ {
974
+ onClick: () => setChain(id),
975
+ className: "flex items-center text-sm font-medium",
976
+ style: {
977
+ backgroundColor: isActive ? "var(--compass-color-primary)" : "transparent",
978
+ color: isActive ? "var(--compass-color-primary-text)" : "var(--compass-color-text-secondary)",
979
+ borderRadius: "var(--compass-border-radius-md)",
980
+ padding: "calc(var(--compass-spacing-unit) * 0.375) calc(var(--compass-spacing-unit) * 0.75)",
981
+ gap: "calc(var(--compass-spacing-unit) * 0.375)",
982
+ transition: "var(--compass-transition-normal)"
983
+ },
984
+ children: [
985
+ /* @__PURE__ */ jsxRuntime.jsx("img", { src: config.icon, alt: config.name, className: "w-4 h-4" }),
986
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: config.name })
987
+ ]
988
+ },
989
+ id
990
+ );
991
+ })
992
+ }
993
+ );
964
994
  }
965
995
  function truncateAddress(address) {
966
996
  return `${address.slice(0, 6)}...${address.slice(-4)}`;
@@ -981,10 +1011,15 @@ function WalletStatus({
981
1011
  "button",
982
1012
  {
983
1013
  onClick: () => connectFn(),
984
- className: `flex items-center gap-2 rounded-lg font-medium transition-colors hover:opacity-90 ${compact ? "px-2 py-1.5" : "px-4 py-2"}`,
1014
+ className: "flex items-center font-medium hover:opacity-90",
985
1015
  style: {
986
1016
  backgroundColor: "var(--compass-color-primary)",
987
- color: "var(--compass-color-primary-text)"
1017
+ color: "var(--compass-color-primary-text)",
1018
+ borderRadius: "var(--compass-border-radius-lg)",
1019
+ fontFamily: "var(--compass-font-family)",
1020
+ padding: compact ? "calc(var(--compass-spacing-unit) * 0.375) calc(var(--compass-spacing-unit) * 0.5)" : "calc(var(--compass-spacing-unit) * 0.5) var(--compass-spacing-card)",
1021
+ gap: "calc(var(--compass-spacing-unit) * 0.5)",
1022
+ transition: "var(--compass-transition-normal)"
988
1023
  },
989
1024
  children: [
990
1025
  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Wallet, { size: compact ? 14 : 16 }),
@@ -996,10 +1031,14 @@ function WalletStatus({
996
1031
  return /* @__PURE__ */ jsxRuntime.jsxs(
997
1032
  "div",
998
1033
  {
999
- className: `flex items-center gap-2 rounded-lg ${compact ? "px-2 py-1.5" : "px-3 py-2"}`,
1034
+ className: "flex items-center",
1000
1035
  style: {
1001
1036
  backgroundColor: "var(--compass-color-surface)",
1002
- color: "var(--compass-color-text-secondary)"
1037
+ color: "var(--compass-color-text-secondary)",
1038
+ borderRadius: "var(--compass-border-radius-lg)",
1039
+ fontFamily: "var(--compass-font-family)",
1040
+ padding: compact ? "calc(var(--compass-spacing-unit) * 0.375) calc(var(--compass-spacing-unit) * 0.5)" : "calc(var(--compass-spacing-unit) * 0.5) calc(var(--compass-spacing-unit) * 0.75)",
1041
+ gap: "calc(var(--compass-spacing-unit) * 0.5)"
1003
1042
  },
1004
1043
  children: [
1005
1044
  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Wallet, { size: compact ? 14 : 16 }),
@@ -1011,17 +1050,24 @@ function WalletStatus({
1011
1050
  return /* @__PURE__ */ jsxRuntime.jsxs(
1012
1051
  "div",
1013
1052
  {
1014
- className: `flex items-center gap-2 rounded-lg ${compact ? "px-2 py-1.5" : "px-3 py-2"}`,
1053
+ className: "flex items-center",
1015
1054
  style: {
1016
1055
  backgroundColor: "var(--compass-color-surface)",
1017
- border: "1px solid var(--compass-color-border)"
1056
+ border: "1px solid var(--compass-color-border)",
1057
+ borderRadius: "var(--compass-border-radius-lg)",
1058
+ fontFamily: "var(--compass-font-family)",
1059
+ padding: compact ? "calc(var(--compass-spacing-unit) * 0.375) calc(var(--compass-spacing-unit) * 0.5)" : "calc(var(--compass-spacing-unit) * 0.5) calc(var(--compass-spacing-unit) * 0.75)",
1060
+ gap: "calc(var(--compass-spacing-unit) * 0.5)"
1018
1061
  },
1019
1062
  children: [
1020
1063
  /* @__PURE__ */ jsxRuntime.jsx(
1021
1064
  "div",
1022
1065
  {
1023
- className: "w-2 h-2 rounded-full flex-shrink-0",
1024
- style: { backgroundColor: "var(--compass-color-success)" }
1066
+ className: "w-2 h-2 flex-shrink-0",
1067
+ style: {
1068
+ backgroundColor: "var(--compass-color-success)",
1069
+ borderRadius: "var(--compass-border-radius-full)"
1070
+ }
1025
1071
  }
1026
1072
  ),
1027
1073
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -1036,8 +1082,13 @@ function WalletStatus({
1036
1082
  "button",
1037
1083
  {
1038
1084
  onClick: () => disconnectFn(),
1039
- className: `rounded hover:bg-white/10 transition-all flex-shrink-0 ${compact ? "p-1" : "p-1.5"}`,
1085
+ className: "hover:bg-white/10 flex-shrink-0",
1040
1086
  title: "Disconnect wallet",
1087
+ style: {
1088
+ borderRadius: "var(--compass-border-radius-sm)",
1089
+ padding: compact ? "calc(var(--compass-spacing-unit) * 0.25)" : "calc(var(--compass-spacing-unit) * 0.375)",
1090
+ transition: "var(--compass-transition-normal)"
1091
+ },
1041
1092
  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LogOut, { size: 14, style: { color: "var(--compass-color-text-secondary)" } })
1042
1093
  }
1043
1094
  )
@@ -1072,17 +1123,22 @@ function ActionModal({ isOpen, onClose, title, children }) {
1072
1123
  /* @__PURE__ */ jsxRuntime.jsxs(
1073
1124
  "div",
1074
1125
  {
1075
- className: "relative w-full max-w-md mx-4 rounded-xl overflow-hidden",
1126
+ className: "relative w-full max-w-md mx-4 overflow-hidden",
1076
1127
  style: {
1077
1128
  backgroundColor: "var(--compass-color-surface)",
1078
- boxShadow: "var(--compass-shadow-lg)"
1129
+ boxShadow: "var(--compass-shadow-lg)",
1130
+ borderRadius: "var(--compass-border-radius-xl)",
1131
+ fontFamily: "var(--compass-font-family)"
1079
1132
  },
1080
1133
  children: [
1081
1134
  /* @__PURE__ */ jsxRuntime.jsxs(
1082
1135
  "div",
1083
1136
  {
1084
- className: "flex items-center justify-between px-4 py-3 border-b",
1085
- style: { borderColor: "var(--compass-color-border)" },
1137
+ className: "flex items-center justify-between border-b",
1138
+ style: {
1139
+ borderColor: "var(--compass-color-border)",
1140
+ padding: "calc(var(--compass-spacing-card) * 0.75) var(--compass-spacing-card)"
1141
+ },
1086
1142
  children: [
1087
1143
  /* @__PURE__ */ jsxRuntime.jsx(
1088
1144
  "h2",
@@ -1099,15 +1155,20 @@ function ActionModal({ isOpen, onClose, title, children }) {
1099
1155
  "button",
1100
1156
  {
1101
1157
  onClick: onClose,
1102
- className: "p-1 rounded-md transition-colors hover:opacity-70",
1103
- style: { color: "var(--compass-color-text-secondary)" },
1158
+ className: "hover:opacity-70",
1159
+ style: {
1160
+ color: "var(--compass-color-text-secondary)",
1161
+ borderRadius: "var(--compass-border-radius-md)",
1162
+ padding: "calc(var(--compass-spacing-unit) * 0.25)",
1163
+ transition: "var(--compass-transition-normal)"
1164
+ },
1104
1165
  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 20 })
1105
1166
  }
1106
1167
  )
1107
1168
  ]
1108
1169
  }
1109
1170
  ),
1110
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children })
1171
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "var(--compass-spacing-card)" }, children })
1111
1172
  ]
1112
1173
  }
1113
1174
  )
@@ -1136,10 +1197,12 @@ function PnLSummary({ pnl, tokenSymbol, tokenPrice }) {
1136
1197
  "button",
1137
1198
  {
1138
1199
  onClick: () => setIsExpanded(!isExpanded),
1139
- className: "flex items-center justify-between w-full px-3 py-2 rounded-lg border transition-colors",
1200
+ className: "flex items-center justify-between w-full px-3 py-2 border transition-colors",
1140
1201
  style: {
1141
1202
  backgroundColor: "var(--compass-color-surface)",
1142
- borderColor: "var(--compass-color-border)"
1203
+ borderColor: "var(--compass-color-border)",
1204
+ borderRadius: "var(--compass-border-radius-lg)",
1205
+ fontFamily: "var(--compass-font-family)"
1143
1206
  },
1144
1207
  children: [
1145
1208
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -1178,10 +1241,11 @@ function PnLSummary({ pnl, tokenSymbol, tokenPrice }) {
1178
1241
  isExpanded && /* @__PURE__ */ jsxRuntime.jsxs(
1179
1242
  "div",
1180
1243
  {
1181
- className: "mt-2 p-3 rounded-lg border",
1244
+ className: "mt-2 p-3 border",
1182
1245
  style: {
1183
1246
  backgroundColor: "var(--compass-color-surface)",
1184
- borderColor: "var(--compass-color-border)"
1247
+ borderColor: "var(--compass-color-border)",
1248
+ borderRadius: "var(--compass-border-radius-lg)"
1185
1249
  },
1186
1250
  children: [
1187
1251
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
@@ -1305,13 +1369,15 @@ function TokenSelector({
1305
1369
  type: "button",
1306
1370
  onClick: () => !disabled && setIsOpen(!isOpen),
1307
1371
  disabled,
1308
- className: "flex items-center gap-2 px-3 py-2 rounded-lg border transition-colors min-w-[120px]",
1372
+ className: "flex items-center gap-2 px-3 py-2 border transition-colors min-w-[120px]",
1309
1373
  style: {
1310
1374
  backgroundColor: "var(--compass-color-background)",
1311
1375
  borderColor: isOpen ? "var(--compass-color-primary)" : "var(--compass-color-border)",
1312
1376
  color: "var(--compass-color-text)",
1313
1377
  cursor: disabled ? "not-allowed" : "pointer",
1314
- opacity: disabled ? 0.5 : 1
1378
+ opacity: disabled ? 0.5 : 1,
1379
+ borderRadius: "var(--compass-border-radius-lg)",
1380
+ fontFamily: "var(--compass-font-family)"
1315
1381
  },
1316
1382
  children: [
1317
1383
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium flex-1 text-left", children: selectedToken }),
@@ -1332,12 +1398,13 @@ function TokenSelector({
1332
1398
  isOpen && /* @__PURE__ */ jsxRuntime.jsx(
1333
1399
  "div",
1334
1400
  {
1335
- className: "absolute z-50 mt-1 w-full min-w-[160px] rounded-lg border overflow-y-auto",
1401
+ className: "absolute z-50 mt-1 w-full min-w-[160px] border overflow-y-auto",
1336
1402
  style: {
1337
1403
  backgroundColor: "var(--compass-color-surface)",
1338
1404
  borderColor: "var(--compass-color-border)",
1339
1405
  boxShadow: "var(--compass-shadow-lg)",
1340
- maxHeight: "200px"
1406
+ maxHeight: "200px",
1407
+ borderRadius: "var(--compass-border-radius-lg)"
1341
1408
  },
1342
1409
  children: tokens.map((token) => {
1343
1410
  const balance = balances?.[token];
@@ -1580,7 +1647,6 @@ function DepositWithdrawForm({
1580
1647
  queryClient.invalidateQueries({ queryKey: ["pendleMarkets"] });
1581
1648
  setTimeout(() => setStatusMessage(""), 3e3);
1582
1649
  } catch (err) {
1583
- console.error("Transaction failed:", err);
1584
1650
  const errorMessage = err instanceof Error ? err.message : "Transaction failed";
1585
1651
  setError(errorMessage);
1586
1652
  onError?.(err);
@@ -1608,10 +1674,14 @@ function DepositWithdrawForm({
1608
1674
  return /* @__PURE__ */ jsxRuntime.jsxs(
1609
1675
  "div",
1610
1676
  {
1611
- className: "flex flex-col items-center gap-3 py-6 px-4 rounded-lg",
1677
+ className: "flex flex-col items-center",
1612
1678
  style: {
1613
1679
  backgroundColor: "var(--compass-color-surface)",
1614
- border: "1px solid var(--compass-color-border)"
1680
+ border: "1px solid var(--compass-color-border)",
1681
+ borderRadius: "var(--compass-border-radius-lg)",
1682
+ fontFamily: "var(--compass-font-family)",
1683
+ padding: "calc(var(--compass-spacing-unit) * 1.5) var(--compass-spacing-card)",
1684
+ gap: "calc(var(--compass-spacing-unit) * 0.75)"
1615
1685
  },
1616
1686
  children: [
1617
1687
  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { size: 24, style: { color: "var(--compass-color-text-tertiary)" } }),
@@ -1627,12 +1697,18 @@ function DepositWithdrawForm({
1627
1697
  }
1628
1698
  );
1629
1699
  }
1630
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
1700
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", style: { gap: "var(--compass-spacing-card)" }, children: [
1631
1701
  /* @__PURE__ */ jsxRuntime.jsx(
1632
1702
  "div",
1633
1703
  {
1634
- className: "flex gap-1 p-1 rounded-lg",
1635
- style: { backgroundColor: "var(--compass-color-background)" },
1704
+ className: "flex",
1705
+ style: {
1706
+ backgroundColor: "var(--compass-color-background)",
1707
+ borderRadius: "var(--compass-border-radius-lg)",
1708
+ fontFamily: "var(--compass-font-family)",
1709
+ padding: "calc(var(--compass-spacing-unit) * 0.25)",
1710
+ gap: "calc(var(--compass-spacing-unit) * 0.25)"
1711
+ },
1636
1712
  children: ["deposit", "withdraw"].map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
1637
1713
  "button",
1638
1714
  {
@@ -1642,10 +1718,13 @@ function DepositWithdrawForm({
1642
1718
  setError(null);
1643
1719
  setStatusMessage("");
1644
1720
  },
1645
- className: "flex-1 py-2 rounded-md text-sm font-medium capitalize transition-all",
1721
+ className: "flex-1 text-sm font-medium capitalize",
1646
1722
  style: {
1647
1723
  backgroundColor: activeTab === tab ? "var(--compass-color-surface)" : "transparent",
1648
- color: activeTab === tab ? "var(--compass-color-text)" : "var(--compass-color-text-secondary)"
1724
+ color: activeTab === tab ? "var(--compass-color-text)" : "var(--compass-color-text-secondary)",
1725
+ borderRadius: "var(--compass-border-radius-md)",
1726
+ padding: "calc(var(--compass-spacing-unit) * 0.5)",
1727
+ transition: "var(--compass-transition-normal)"
1649
1728
  },
1650
1729
  children: tab
1651
1730
  },
@@ -1675,10 +1754,13 @@ function DepositWithdrawForm({
1675
1754
  needsSwap && /* @__PURE__ */ jsxRuntime.jsxs(
1676
1755
  "div",
1677
1756
  {
1678
- className: "flex items-center gap-2 p-2 rounded-lg text-sm",
1757
+ className: "flex items-center text-sm",
1679
1758
  style: {
1680
1759
  backgroundColor: "var(--compass-color-primary-muted)",
1681
- color: "var(--compass-color-primary)"
1760
+ color: "var(--compass-color-primary)",
1761
+ borderRadius: "var(--compass-border-radius-lg)",
1762
+ padding: "calc(var(--compass-spacing-unit) * 0.5)",
1763
+ gap: "calc(var(--compass-spacing-unit) * 0.5)"
1682
1764
  },
1683
1765
  children: [
1684
1766
  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRight, { size: 14 }),
@@ -1712,10 +1794,13 @@ function DepositWithdrawForm({
1712
1794
  /* @__PURE__ */ jsxRuntime.jsxs(
1713
1795
  "div",
1714
1796
  {
1715
- className: "flex items-center gap-2 p-3 rounded-lg border",
1797
+ className: "flex items-center border",
1716
1798
  style: {
1717
1799
  backgroundColor: "var(--compass-color-background)",
1718
- borderColor: "var(--compass-color-border)"
1800
+ borderColor: "var(--compass-color-border)",
1801
+ borderRadius: "var(--compass-border-radius-lg)",
1802
+ padding: "calc(var(--compass-spacing-unit) * 0.75)",
1803
+ gap: "calc(var(--compass-spacing-unit) * 0.5)"
1719
1804
  },
1720
1805
  children: [
1721
1806
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -1729,7 +1814,10 @@ function DepositWithdrawForm({
1729
1814
  },
1730
1815
  placeholder: "0.00",
1731
1816
  className: "flex-1 bg-transparent outline-none text-lg font-mono",
1732
- style: { color: "var(--compass-color-text)" }
1817
+ style: {
1818
+ color: "var(--compass-color-text)",
1819
+ fontFamily: "var(--compass-font-family)"
1820
+ }
1733
1821
  }
1734
1822
  ),
1735
1823
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -1744,14 +1832,17 @@ function DepositWithdrawForm({
1744
1832
  }
1745
1833
  )
1746
1834
  ] }),
1747
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-2", children: [0.25, 0.5, 1].map((pct) => /* @__PURE__ */ jsxRuntime.jsx(
1835
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [0.25, 0.5, 1].map((pct) => /* @__PURE__ */ jsxRuntime.jsx(
1748
1836
  "button",
1749
1837
  {
1750
1838
  onClick: () => handleQuickAmount(pct),
1751
- className: "flex-1 py-1.5 rounded-md text-xs font-medium transition-colors",
1839
+ className: "flex-1 text-xs font-medium",
1752
1840
  style: {
1753
1841
  backgroundColor: "var(--compass-color-secondary)",
1754
- color: "var(--compass-color-text-secondary)"
1842
+ color: "var(--compass-color-text-secondary)",
1843
+ borderRadius: "var(--compass-border-radius-md)",
1844
+ padding: "calc(var(--compass-spacing-unit) * 0.375)",
1845
+ transition: "var(--compass-transition-fast)"
1755
1846
  },
1756
1847
  children: pct === 1 ? "Max" : `${pct * 100}%`
1757
1848
  },
@@ -1760,10 +1851,12 @@ function DepositWithdrawForm({
1760
1851
  error && /* @__PURE__ */ jsxRuntime.jsx(
1761
1852
  "div",
1762
1853
  {
1763
- className: "p-3 rounded-lg text-sm",
1854
+ className: "text-sm",
1764
1855
  style: {
1765
1856
  backgroundColor: "var(--compass-color-error-muted)",
1766
- color: "var(--compass-color-error)"
1857
+ color: "var(--compass-color-error)",
1858
+ borderRadius: "var(--compass-border-radius-lg)",
1859
+ padding: "calc(var(--compass-spacing-unit) * 0.75)"
1767
1860
  },
1768
1861
  children: error
1769
1862
  }
@@ -1771,10 +1864,12 @@ function DepositWithdrawForm({
1771
1864
  statusMessage && !error && /* @__PURE__ */ jsxRuntime.jsx(
1772
1865
  "div",
1773
1866
  {
1774
- className: "p-3 rounded-lg text-sm text-center",
1867
+ className: "text-sm text-center",
1775
1868
  style: {
1776
1869
  backgroundColor: "var(--compass-color-success-muted)",
1777
- color: "var(--compass-color-success)"
1870
+ color: "var(--compass-color-success)",
1871
+ borderRadius: "var(--compass-border-radius-lg)",
1872
+ padding: "calc(var(--compass-spacing-unit) * 0.75)"
1778
1873
  },
1779
1874
  children: statusMessage
1780
1875
  }
@@ -1784,10 +1879,15 @@ function DepositWithdrawForm({
1784
1879
  {
1785
1880
  onClick: handleSubmit,
1786
1881
  disabled: isSubmitting || !amount || parseFloat(amount) <= 0,
1787
- className: "w-full py-3 rounded-lg font-medium transition-colors flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed",
1882
+ className: "w-full font-medium flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed",
1788
1883
  style: {
1789
1884
  backgroundColor: "var(--compass-color-primary)",
1790
- color: "var(--compass-color-primary-text)"
1885
+ color: "var(--compass-color-primary-text)",
1886
+ borderRadius: "var(--compass-border-radius-lg)",
1887
+ fontFamily: "var(--compass-font-family)",
1888
+ padding: "calc(var(--compass-spacing-unit) * 0.75)",
1889
+ gap: "calc(var(--compass-spacing-unit) * 0.5)",
1890
+ transition: "var(--compass-transition-normal)"
1791
1891
  },
1792
1892
  children: [
1793
1893
  isSubmitting && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 18, className: "animate-spin" }),
@@ -1822,10 +1922,12 @@ function TransactionHistory({
1822
1922
  "button",
1823
1923
  {
1824
1924
  onClick: () => setIsExpanded(!isExpanded),
1825
- className: "flex items-center justify-between w-full px-3 py-2 rounded-lg border transition-colors",
1925
+ className: "flex items-center justify-between w-full px-3 py-2 border transition-colors",
1826
1926
  style: {
1827
1927
  backgroundColor: "var(--compass-color-surface)",
1828
- borderColor: "var(--compass-color-border)"
1928
+ borderColor: "var(--compass-color-border)",
1929
+ borderRadius: "var(--compass-border-radius-lg)",
1930
+ fontFamily: "var(--compass-font-family)"
1829
1931
  },
1830
1932
  children: [
1831
1933
  /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1854,8 +1956,11 @@ function TransactionHistory({
1854
1956
  isExpanded && /* @__PURE__ */ jsxRuntime.jsx(
1855
1957
  "div",
1856
1958
  {
1857
- className: "mt-2 max-h-48 overflow-y-auto rounded-lg border",
1858
- style: { borderColor: "var(--compass-color-border)" },
1959
+ className: "mt-2 max-h-48 overflow-y-auto border",
1960
+ style: {
1961
+ borderColor: "var(--compass-color-border)",
1962
+ borderRadius: "var(--compass-border-radius-lg)"
1963
+ },
1859
1964
  children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: allEvents.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
1860
1965
  "div",
1861
1966
  {
@@ -1869,15 +1974,21 @@ function TransactionHistory({
1869
1974
  item.type === "deposit" ? /* @__PURE__ */ jsxRuntime.jsx(
1870
1975
  "div",
1871
1976
  {
1872
- className: "p-1 rounded-full",
1873
- style: { backgroundColor: "var(--compass-color-success-muted)" },
1977
+ className: "p-1",
1978
+ style: {
1979
+ backgroundColor: "var(--compass-color-success-muted)",
1980
+ borderRadius: "var(--compass-border-radius-full)"
1981
+ },
1874
1982
  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDownLeft, { size: 12, style: { color: "var(--compass-color-success)" } })
1875
1983
  }
1876
1984
  ) : /* @__PURE__ */ jsxRuntime.jsx(
1877
1985
  "div",
1878
1986
  {
1879
- className: "p-1 rounded-full",
1880
- style: { backgroundColor: "var(--compass-color-warning-muted)" },
1987
+ className: "p-1",
1988
+ style: {
1989
+ backgroundColor: "var(--compass-color-warning-muted)",
1990
+ borderRadius: "var(--compass-border-radius-full)"
1991
+ },
1881
1992
  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpRight, { size: 12, style: { color: "var(--compass-color-warning)" } })
1882
1993
  }
1883
1994
  ),
@@ -1925,8 +2036,9 @@ function TransactionHistory({
1925
2036
  href: getExplorerUrl(item.event.txHash, chainId),
1926
2037
  target: "_blank",
1927
2038
  rel: "noopener noreferrer",
1928
- className: "p-1 rounded hover:opacity-70 transition-opacity",
2039
+ className: "p-1 hover:opacity-70 transition-opacity",
1929
2040
  title: "View on explorer",
2041
+ style: { borderRadius: "var(--compass-border-radius-sm)" },
1930
2042
  children: /* @__PURE__ */ jsxRuntime.jsx(
1931
2043
  lucideReact.ExternalLink,
1932
2044
  {
@@ -1957,9 +2069,11 @@ function EarnAccountGuard({
1957
2069
  return /* @__PURE__ */ jsxRuntime.jsxs(
1958
2070
  "div",
1959
2071
  {
1960
- className: "compass-earn-guard p-6 text-center rounded-xl",
2072
+ className: "compass-earn-guard p-6 text-center",
1961
2073
  style: {
1962
- backgroundColor: "var(--compass-color-surface)"
2074
+ backgroundColor: "var(--compass-color-surface)",
2075
+ borderRadius: "var(--compass-border-radius-xl)",
2076
+ fontFamily: "var(--compass-font-family)"
1963
2077
  },
1964
2078
  children: [
1965
2079
  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm mb-4", style: { color: "var(--compass-color-text-secondary)" }, children: "Connect your wallet to continue" }),
@@ -1967,10 +2081,11 @@ function EarnAccountGuard({
1967
2081
  "button",
1968
2082
  {
1969
2083
  onClick: login,
1970
- className: "px-4 py-2 rounded-lg font-medium transition-colors",
2084
+ className: "px-4 py-2 font-medium transition-colors",
1971
2085
  style: {
1972
2086
  backgroundColor: "var(--compass-color-primary)",
1973
- color: "var(--compass-color-primary-text)"
2087
+ color: "var(--compass-color-primary-text)",
2088
+ borderRadius: "var(--compass-border-radius-lg)"
1974
2089
  },
1975
2090
  children: "Connect Wallet"
1976
2091
  }
@@ -1986,8 +2101,12 @@ function EarnAccountGuard({
1986
2101
  return /* @__PURE__ */ jsxRuntime.jsxs(
1987
2102
  "div",
1988
2103
  {
1989
- className: "compass-earn-guard p-6 text-center rounded-xl",
1990
- style: { backgroundColor: "var(--compass-color-surface)" },
2104
+ className: "compass-earn-guard p-6 text-center",
2105
+ style: {
2106
+ backgroundColor: "var(--compass-color-surface)",
2107
+ borderRadius: "var(--compass-border-radius-xl)",
2108
+ fontFamily: "var(--compass-font-family)"
2109
+ },
1991
2110
  children: [
1992
2111
  /* @__PURE__ */ jsxRuntime.jsx(
1993
2112
  lucideReact.Loader2,
@@ -2019,17 +2138,23 @@ function EarnAccountGuard({
2019
2138
  return /* @__PURE__ */ jsxRuntime.jsxs(
2020
2139
  "div",
2021
2140
  {
2022
- className: "compass-earn-guard p-6 text-center rounded-xl border",
2141
+ className: "compass-earn-guard p-6 text-center border",
2023
2142
  style: {
2024
2143
  backgroundColor: "var(--compass-color-surface)",
2025
- borderColor: "var(--compass-color-border)"
2144
+ borderColor: "var(--compass-color-border)",
2145
+ borderRadius: "var(--compass-border-radius-xl)",
2146
+ fontFamily: "var(--compass-font-family)"
2026
2147
  },
2027
2148
  children: [
2028
2149
  /* @__PURE__ */ jsxRuntime.jsx(
2029
2150
  "div",
2030
2151
  {
2031
- className: "w-14 h-14 rounded-full flex items-center justify-center mx-auto mb-4",
2032
- style: { backgroundColor: "var(--compass-color-primary-muted, rgba(99, 102, 241, 0.15))" },
2152
+ className: "w-12 h-12 flex items-center justify-center mx-auto mb-4",
2153
+ style: {
2154
+ backgroundColor: "var(--compass-color-primary)",
2155
+ opacity: 0.15,
2156
+ borderRadius: "var(--compass-border-radius-full)"
2157
+ },
2033
2158
  children: /* @__PURE__ */ jsxRuntime.jsxs(
2034
2159
  "svg",
2035
2160
  {
@@ -2085,11 +2210,12 @@ function EarnAccountGuard({
2085
2210
  {
2086
2211
  onClick: handleCreate,
2087
2212
  disabled: isCreating,
2088
- className: "px-8 py-3 rounded-xl font-semibold transition-all inline-flex items-center gap-2",
2213
+ className: "px-6 py-3 font-medium transition-all inline-flex items-center gap-2",
2089
2214
  style: {
2090
2215
  backgroundColor: isCreating ? "var(--compass-color-surface-hover)" : "var(--compass-color-primary)",
2091
2216
  color: isCreating ? "var(--compass-color-text-secondary)" : "white",
2092
- cursor: isCreating ? "not-allowed" : "pointer"
2217
+ cursor: isCreating ? "not-allowed" : "pointer",
2218
+ borderRadius: "var(--compass-border-radius-lg)"
2093
2219
  },
2094
2220
  children: [
2095
2221
  isCreating && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 18, className: "animate-spin" }),
@@ -2151,17 +2277,22 @@ function AccountBalancesModal({
2151
2277
  /* @__PURE__ */ jsxRuntime.jsxs(
2152
2278
  "div",
2153
2279
  {
2154
- className: "relative w-full max-w-md mx-4 rounded-xl overflow-hidden",
2280
+ className: "relative w-full max-w-md mx-4 overflow-hidden",
2155
2281
  style: {
2156
2282
  backgroundColor: "var(--compass-color-surface)",
2157
- boxShadow: "var(--compass-shadow-lg)"
2283
+ boxShadow: "var(--compass-shadow-lg)",
2284
+ borderRadius: "var(--compass-border-radius-xl)",
2285
+ fontFamily: "var(--compass-font-family)"
2158
2286
  },
2159
2287
  children: [
2160
2288
  /* @__PURE__ */ jsxRuntime.jsxs(
2161
2289
  "div",
2162
2290
  {
2163
- className: "flex items-center justify-between px-4 py-3 border-b",
2164
- style: { borderColor: "var(--compass-color-border)" },
2291
+ className: "flex items-center justify-between border-b",
2292
+ style: {
2293
+ borderColor: "var(--compass-color-border)",
2294
+ padding: "calc(var(--compass-spacing-unit) * 0.75) var(--compass-spacing-card)"
2295
+ },
2165
2296
  children: [
2166
2297
  /* @__PURE__ */ jsxRuntime.jsxs(
2167
2298
  "h2",
@@ -2181,16 +2312,21 @@ function AccountBalancesModal({
2181
2312
  "button",
2182
2313
  {
2183
2314
  onClick: onClose,
2184
- className: "p-1 rounded-md transition-colors hover:opacity-70",
2185
- style: { color: "var(--compass-color-text-secondary)" },
2315
+ className: "hover:opacity-70",
2316
+ style: {
2317
+ color: "var(--compass-color-text-secondary)",
2318
+ borderRadius: "var(--compass-border-radius-md)",
2319
+ padding: "calc(var(--compass-spacing-unit) * 0.25)",
2320
+ transition: "var(--compass-transition-normal)"
2321
+ },
2186
2322
  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 20 })
2187
2323
  }
2188
2324
  )
2189
2325
  ]
2190
2326
  }
2191
2327
  ),
2192
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4", children: [
2193
- isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsxRuntime.jsx(
2328
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "var(--compass-spacing-card)" }, children: [
2329
+ isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", style: { padding: "calc(var(--compass-spacing-unit) * 2) 0" }, children: /* @__PURE__ */ jsxRuntime.jsx(
2194
2330
  lucideReact.Loader2,
2195
2331
  {
2196
2332
  size: 24,
@@ -2200,25 +2336,30 @@ function AccountBalancesModal({
2200
2336
  ) }) : balances.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(
2201
2337
  "div",
2202
2338
  {
2203
- className: "text-center py-8",
2204
- style: { color: "var(--compass-color-text-secondary)" },
2339
+ className: "text-center",
2340
+ style: { color: "var(--compass-color-text-secondary)", padding: "calc(var(--compass-spacing-unit) * 2) 0" },
2205
2341
  children: "No token balances found"
2206
2342
  }
2207
- ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
2343
+ ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
2208
2344
  balances.map((token) => /* @__PURE__ */ jsxRuntime.jsxs(
2209
2345
  "div",
2210
2346
  {
2211
- className: "flex items-center justify-between p-3 rounded-lg",
2212
- style: { backgroundColor: "var(--compass-color-background)" },
2347
+ className: "flex items-center justify-between",
2348
+ style: {
2349
+ backgroundColor: "var(--compass-color-background)",
2350
+ borderRadius: "var(--compass-border-radius-lg)",
2351
+ padding: "calc(var(--compass-spacing-unit) * 0.75)"
2352
+ },
2213
2353
  children: [
2214
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
2354
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.75)" }, children: [
2215
2355
  /* @__PURE__ */ jsxRuntime.jsx(
2216
2356
  "div",
2217
2357
  {
2218
- className: "w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold",
2358
+ className: "w-8 h-8 flex items-center justify-center text-xs font-bold",
2219
2359
  style: {
2220
2360
  backgroundColor: "var(--compass-color-primary-muted)",
2221
- color: "var(--compass-color-primary)"
2361
+ color: "var(--compass-color-primary)",
2362
+ borderRadius: "var(--compass-border-radius-full)"
2222
2363
  },
2223
2364
  children: token.symbol.slice(0, 2)
2224
2365
  }
@@ -2257,10 +2398,13 @@ function AccountBalancesModal({
2257
2398
  /* @__PURE__ */ jsxRuntime.jsxs(
2258
2399
  "div",
2259
2400
  {
2260
- className: "flex items-center justify-between p-3 mt-2 rounded-lg border",
2401
+ className: "flex items-center justify-between border",
2261
2402
  style: {
2262
2403
  borderColor: "var(--compass-color-border)",
2263
- backgroundColor: "var(--compass-color-surface)"
2404
+ backgroundColor: "var(--compass-color-surface)",
2405
+ borderRadius: "var(--compass-border-radius-lg)",
2406
+ padding: "calc(var(--compass-spacing-unit) * 0.75)",
2407
+ marginTop: "calc(var(--compass-spacing-unit) * 0.5)"
2264
2408
  },
2265
2409
  children: [
2266
2410
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -2286,8 +2430,12 @@ function AccountBalancesModal({
2286
2430
  earnAccountAddress && /* @__PURE__ */ jsxRuntime.jsx(
2287
2431
  "div",
2288
2432
  {
2289
- className: "mt-4 pt-4 border-t text-center",
2290
- style: { borderColor: "var(--compass-color-border)" },
2433
+ className: "border-t text-center",
2434
+ style: {
2435
+ borderColor: "var(--compass-color-border)",
2436
+ marginTop: "var(--compass-spacing-card)",
2437
+ paddingTop: "var(--compass-spacing-card)"
2438
+ },
2291
2439
  children: /* @__PURE__ */ jsxRuntime.jsxs(
2292
2440
  "span",
2293
2441
  {
@@ -2528,7 +2676,6 @@ function EarnAccountBalance({
2528
2676
  resetForm();
2529
2677
  }, 2e3);
2530
2678
  } catch (err) {
2531
- console.error("Transfer failed:", err);
2532
2679
  setTransferState("error");
2533
2680
  setError(err instanceof Error ? err.message : "Transfer failed");
2534
2681
  }
@@ -2554,10 +2701,12 @@ function EarnAccountBalance({
2554
2701
  return /* @__PURE__ */ jsxRuntime.jsxs(
2555
2702
  "div",
2556
2703
  {
2557
- className: `flex items-center gap-2 rounded-lg border ${compact ? "px-2 py-1.5" : "px-3 py-2"}`,
2704
+ className: `flex items-center gap-2 border ${compact ? "px-2 py-1.5" : "px-3 py-2"}`,
2558
2705
  style: {
2559
2706
  backgroundColor: "var(--compass-color-surface)",
2560
- borderColor: "var(--compass-color-border)"
2707
+ borderColor: "var(--compass-color-border)",
2708
+ borderRadius: "var(--compass-border-radius-lg)",
2709
+ fontFamily: "var(--compass-font-family)"
2561
2710
  },
2562
2711
  children: [
2563
2712
  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Wallet, { size: compact ? 14 : 16, style: { color: "var(--compass-color-text-secondary)" } }),
@@ -2578,11 +2727,13 @@ function EarnAccountBalance({
2578
2727
  "button",
2579
2728
  {
2580
2729
  onClick: () => setIsBalancesModalOpen(true),
2581
- className: `flex items-center gap-2 rounded-lg border transition-colors hover:border-[var(--compass-color-primary)] ${compact ? "px-2 py-1.5" : "px-3 py-2"}`,
2730
+ className: `flex items-center gap-2 border transition-colors hover:border-[var(--compass-color-primary)] ${compact ? "px-2 py-1.5" : "px-3 py-2"}`,
2582
2731
  style: {
2583
2732
  backgroundColor: "var(--compass-color-surface)",
2584
2733
  borderColor: "var(--compass-color-border)",
2585
- cursor: "pointer"
2734
+ cursor: "pointer",
2735
+ borderRadius: "var(--compass-border-radius-lg)",
2736
+ fontFamily: "var(--compass-font-family)"
2586
2737
  },
2587
2738
  children: [
2588
2739
  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Wallet, { size: compact ? 14 : 16, style: { color: "var(--compass-color-primary)" } }),
@@ -2601,10 +2752,11 @@ function EarnAccountBalance({
2601
2752
  "button",
2602
2753
  {
2603
2754
  onClick: handleOpenModal,
2604
- className: `rounded-md font-medium transition-colors ${compact ? "px-2 py-1 text-xs" : "px-3 py-1.5 text-sm"}`,
2755
+ className: `font-medium transition-colors ${compact ? "px-2 py-1 text-xs" : "px-3 py-1.5 text-sm"}`,
2605
2756
  style: {
2606
2757
  backgroundColor: "var(--compass-color-primary)",
2607
- color: "var(--compass-color-primary-text)"
2758
+ color: "var(--compass-color-primary-text)",
2759
+ borderRadius: "var(--compass-border-radius-md)"
2608
2760
  },
2609
2761
  children: "Fund"
2610
2762
  }
@@ -2630,17 +2782,22 @@ function EarnAccountBalance({
2630
2782
  /* @__PURE__ */ jsxRuntime.jsx(
2631
2783
  "div",
2632
2784
  {
2633
- className: "flex gap-1 p-1 rounded-lg",
2634
- style: { backgroundColor: "var(--compass-color-background)" },
2785
+ className: "flex gap-1 p-1",
2786
+ style: {
2787
+ backgroundColor: "var(--compass-color-background)",
2788
+ borderRadius: "var(--compass-border-radius-lg)",
2789
+ fontFamily: "var(--compass-font-family)"
2790
+ },
2635
2791
  children: ["deposit", "withdraw"].map((action) => /* @__PURE__ */ jsxRuntime.jsxs(
2636
2792
  "button",
2637
2793
  {
2638
2794
  onClick: () => handleActionChange(action),
2639
2795
  disabled: isProcessing,
2640
- className: "flex-1 py-2 rounded-md text-sm font-medium capitalize transition-all flex items-center justify-center gap-2",
2796
+ className: "flex-1 py-2 text-sm font-medium capitalize transition-all flex items-center justify-center gap-2",
2641
2797
  style: {
2642
2798
  backgroundColor: activeAction === action ? "var(--compass-color-surface)" : "transparent",
2643
- color: activeAction === action ? "var(--compass-color-text)" : "var(--compass-color-text-secondary)"
2799
+ color: activeAction === action ? "var(--compass-color-text)" : "var(--compass-color-text-secondary)",
2800
+ borderRadius: "var(--compass-border-radius-md)"
2644
2801
  },
2645
2802
  children: [
2646
2803
  action === "deposit" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDownLeft, { size: 14 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpRight, { size: 14 }),
@@ -2691,10 +2848,11 @@ function EarnAccountBalance({
2691
2848
  /* @__PURE__ */ jsxRuntime.jsxs(
2692
2849
  "div",
2693
2850
  {
2694
- className: "flex items-center gap-2 p-3 rounded-lg border",
2851
+ className: "flex items-center gap-2 p-3 border",
2695
2852
  style: {
2696
2853
  backgroundColor: "var(--compass-color-background)",
2697
- borderColor: "var(--compass-color-border)"
2854
+ borderColor: "var(--compass-color-border)",
2855
+ borderRadius: "var(--compass-border-radius-lg)"
2698
2856
  },
2699
2857
  children: [
2700
2858
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -2729,10 +2887,11 @@ function EarnAccountBalance({
2729
2887
  {
2730
2888
  onClick: () => handleQuickAmount(pct),
2731
2889
  disabled: isProcessing,
2732
- className: "flex-1 py-1.5 rounded-md text-xs font-medium transition-colors",
2890
+ className: "flex-1 py-1.5 text-xs font-medium transition-colors",
2733
2891
  style: {
2734
2892
  backgroundColor: "var(--compass-color-secondary)",
2735
- color: "var(--compass-color-text-secondary)"
2893
+ color: "var(--compass-color-text-secondary)",
2894
+ borderRadius: "var(--compass-border-radius-md)"
2736
2895
  },
2737
2896
  children: pct === 1 ? "Max" : `${pct * 100}%`
2738
2897
  },
@@ -2741,10 +2900,11 @@ function EarnAccountBalance({
2741
2900
  error && /* @__PURE__ */ jsxRuntime.jsx(
2742
2901
  "div",
2743
2902
  {
2744
- className: "p-3 rounded-lg text-sm",
2903
+ className: "p-3 text-sm",
2745
2904
  style: {
2746
2905
  backgroundColor: "var(--compass-color-error-muted)",
2747
- color: "var(--compass-color-error)"
2906
+ color: "var(--compass-color-error)",
2907
+ borderRadius: "var(--compass-border-radius-lg)"
2748
2908
  },
2749
2909
  children: error
2750
2910
  }
@@ -2752,10 +2912,11 @@ function EarnAccountBalance({
2752
2912
  statusMessage && !error && /* @__PURE__ */ jsxRuntime.jsx(
2753
2913
  "div",
2754
2914
  {
2755
- className: "p-3 rounded-lg text-sm text-center",
2915
+ className: "p-3 text-sm text-center",
2756
2916
  style: {
2757
2917
  backgroundColor: transferState === "success" ? "var(--compass-color-success-muted)" : "var(--compass-color-primary-muted)",
2758
- color: transferState === "success" ? "var(--compass-color-success)" : "var(--compass-color-primary)"
2918
+ color: transferState === "success" ? "var(--compass-color-success)" : "var(--compass-color-primary)",
2919
+ borderRadius: "var(--compass-border-radius-lg)"
2759
2920
  },
2760
2921
  children: statusMessage
2761
2922
  }
@@ -2765,10 +2926,12 @@ function EarnAccountBalance({
2765
2926
  {
2766
2927
  onClick: handleTransfer,
2767
2928
  disabled: isProcessing || !amount || parseFloat(amount) <= 0,
2768
- className: "w-full py-3 rounded-lg font-medium transition-colors flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed",
2929
+ className: "w-full py-3 font-medium transition-colors flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed",
2769
2930
  style: {
2770
2931
  backgroundColor: "var(--compass-color-primary)",
2771
- color: "var(--compass-color-primary-text)"
2932
+ color: "var(--compass-color-primary-text)",
2933
+ borderRadius: "var(--compass-border-radius-lg)",
2934
+ fontFamily: "var(--compass-font-family)"
2772
2935
  },
2773
2936
  children: [
2774
2937
  isProcessing && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 18, className: "animate-spin" }),
@@ -2830,10 +2993,14 @@ function VaultCard({
2830
2993
  "button",
2831
2994
  {
2832
2995
  onClick,
2833
- className: "w-full p-4 rounded-xl border transition-all text-left hover:scale-[1.01]",
2996
+ className: "w-full border text-left hover:scale-[1.01]",
2834
2997
  style: {
2835
2998
  backgroundColor: "var(--compass-color-surface)",
2836
- borderColor: hasPosition ? "var(--compass-color-primary)" : "var(--compass-color-border)"
2999
+ borderColor: hasPosition ? "var(--compass-color-primary)" : "var(--compass-color-border)",
3000
+ borderRadius: "var(--compass-border-radius-xl)",
3001
+ fontFamily: "var(--compass-font-family)",
3002
+ padding: "var(--compass-spacing-card)",
3003
+ transition: "var(--compass-transition-normal)"
2837
3004
  },
2838
3005
  children: [
2839
3006
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
@@ -2883,48 +3050,59 @@ function VaultCard({
2883
3050
  )
2884
3051
  ] })
2885
3052
  ] }),
2886
- (showTvl || showUserPosition && hasPosition) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mt-3 pt-3 border-t", style: { borderColor: "var(--compass-color-border)" }, children: [
2887
- showTvl && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
2888
- /* @__PURE__ */ jsxRuntime.jsx(
2889
- "span",
2890
- {
2891
- className: "text-xs",
2892
- style: { color: "var(--compass-color-text-tertiary)" },
2893
- children: "TVL"
2894
- }
2895
- ),
2896
- /* @__PURE__ */ jsxRuntime.jsx(
2897
- "span",
2898
- {
2899
- className: "font-mono text-sm",
2900
- style: { color: "var(--compass-color-text-secondary)" },
2901
- children: formatTVL(vault.tvlUsd)
2902
- }
2903
- )
2904
- ] }),
2905
- showUserPosition && hasPosition && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
2906
- /* @__PURE__ */ jsxRuntime.jsx(
2907
- "span",
2908
- {
2909
- className: "text-xs",
2910
- style: { color: "var(--compass-color-text-tertiary)" },
2911
- children: "Position"
2912
- }
2913
- ),
2914
- /* @__PURE__ */ jsxRuntime.jsxs(
2915
- "span",
2916
- {
2917
- className: "font-mono text-sm font-medium",
2918
- style: { color: "var(--compass-color-primary)" },
2919
- children: [
2920
- parseFloat(vault.userPosition.balance).toFixed(4),
2921
- " ",
2922
- vault.assetSymbol
2923
- ]
2924
- }
2925
- )
2926
- ] })
2927
- ] })
3053
+ (showTvl || showUserPosition && hasPosition) && /* @__PURE__ */ jsxRuntime.jsxs(
3054
+ "div",
3055
+ {
3056
+ className: "flex items-center justify-between border-t",
3057
+ style: {
3058
+ borderColor: "var(--compass-color-border)",
3059
+ marginTop: "calc(var(--compass-spacing-unit) * 2)",
3060
+ paddingTop: "calc(var(--compass-spacing-unit) * 2)"
3061
+ },
3062
+ children: [
3063
+ showTvl && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
3064
+ /* @__PURE__ */ jsxRuntime.jsx(
3065
+ "span",
3066
+ {
3067
+ className: "text-xs",
3068
+ style: { color: "var(--compass-color-text-tertiary)" },
3069
+ children: "TVL"
3070
+ }
3071
+ ),
3072
+ /* @__PURE__ */ jsxRuntime.jsx(
3073
+ "span",
3074
+ {
3075
+ className: "font-mono text-sm",
3076
+ style: { color: "var(--compass-color-text-secondary)" },
3077
+ children: formatTVL(vault.tvlUsd)
3078
+ }
3079
+ )
3080
+ ] }),
3081
+ showUserPosition && hasPosition && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
3082
+ /* @__PURE__ */ jsxRuntime.jsx(
3083
+ "span",
3084
+ {
3085
+ className: "text-xs",
3086
+ style: { color: "var(--compass-color-text-tertiary)" },
3087
+ children: "Position"
3088
+ }
3089
+ ),
3090
+ /* @__PURE__ */ jsxRuntime.jsxs(
3091
+ "span",
3092
+ {
3093
+ className: "font-mono text-sm font-medium",
3094
+ style: { color: "var(--compass-color-primary)" },
3095
+ children: [
3096
+ parseFloat(vault.userPosition.balance).toFixed(4),
3097
+ " ",
3098
+ vault.assetSymbol
3099
+ ]
3100
+ }
3101
+ )
3102
+ ] })
3103
+ ]
3104
+ }
3105
+ )
2928
3106
  ]
2929
3107
  }
2930
3108
  );
@@ -3085,23 +3263,27 @@ function VaultsList({
3085
3263
  }
3086
3264
  refetch();
3087
3265
  };
3088
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
3089
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2 flex-wrap", children: [
3266
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", style: { gap: "var(--compass-spacing-card)" }, children: [
3267
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between flex-wrap", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
3090
3268
  /* @__PURE__ */ jsxRuntime.jsx(ChainSwitcher, {}),
3091
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
3269
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
3092
3270
  /* @__PURE__ */ jsxRuntime.jsx(EarnAccountBalance, { compact: true }),
3093
3271
  /* @__PURE__ */ jsxRuntime.jsx(WalletStatus, { compact: true })
3094
3272
  ] })
3095
3273
  ] }),
3096
- (showSearch || showSort || showTvlFilter) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
3097
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
3274
+ (showSearch || showSort || showTvlFilter) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
3275
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
3098
3276
  showSearch && /* @__PURE__ */ jsxRuntime.jsxs(
3099
3277
  "div",
3100
3278
  {
3101
- className: "flex-1 flex items-center gap-2 px-3 py-2 rounded-lg border",
3279
+ className: "flex-1 flex items-center border",
3102
3280
  style: {
3103
3281
  backgroundColor: "var(--compass-color-background)",
3104
- borderColor: "var(--compass-color-border)"
3282
+ borderColor: "var(--compass-color-border)",
3283
+ borderRadius: "var(--compass-border-radius-lg)",
3284
+ fontFamily: "var(--compass-font-family)",
3285
+ padding: "var(--compass-spacing-input)",
3286
+ gap: "calc(var(--compass-spacing-unit) * 0.5)"
3105
3287
  },
3106
3288
  children: [
3107
3289
  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { size: 16, style: { color: "var(--compass-color-text-tertiary)" } }),
@@ -3124,11 +3306,14 @@ function VaultsList({
3124
3306
  {
3125
3307
  value: sortBy,
3126
3308
  onChange: (e) => setSortBy(e.target.value),
3127
- className: "px-3 py-2 rounded-lg border text-sm cursor-pointer",
3309
+ className: "border text-sm cursor-pointer",
3128
3310
  style: {
3129
3311
  backgroundColor: "var(--compass-color-background)",
3130
3312
  borderColor: "var(--compass-color-border)",
3131
- color: "var(--compass-color-text)"
3313
+ color: "var(--compass-color-text)",
3314
+ borderRadius: "var(--compass-border-radius-lg)",
3315
+ fontFamily: "var(--compass-font-family)",
3316
+ padding: "var(--compass-spacing-input)"
3132
3317
  },
3133
3318
  children: [
3134
3319
  /* @__PURE__ */ jsxRuntime.jsx("option", { value: "apy_7d", children: "APY (7D)" }),
@@ -3142,11 +3327,16 @@ function VaultsList({
3142
3327
  "button",
3143
3328
  {
3144
3329
  onClick: () => setShowFilterPanel(!showFilterPanel),
3145
- className: "px-3 py-2 rounded-lg border text-sm flex items-center gap-2",
3330
+ className: "border text-sm flex items-center",
3146
3331
  style: {
3147
3332
  backgroundColor: showFilterPanel || minTvlFilter ? "var(--compass-color-primary-muted)" : "var(--compass-color-background)",
3148
3333
  borderColor: showFilterPanel || minTvlFilter ? "var(--compass-color-primary)" : "var(--compass-color-border)",
3149
- color: showFilterPanel || minTvlFilter ? "var(--compass-color-primary)" : "var(--compass-color-text)"
3334
+ color: showFilterPanel || minTvlFilter ? "var(--compass-color-primary)" : "var(--compass-color-text)",
3335
+ borderRadius: "var(--compass-border-radius-lg)",
3336
+ fontFamily: "var(--compass-font-family)",
3337
+ padding: "var(--compass-spacing-input)",
3338
+ gap: "calc(var(--compass-spacing-unit) * 0.5)",
3339
+ transition: "var(--compass-transition-normal)"
3150
3340
  },
3151
3341
  children: [
3152
3342
  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SlidersHorizontal, { size: 14 }),
@@ -3158,10 +3348,14 @@ function VaultsList({
3158
3348
  showTvlFilter && showFilterPanel && /* @__PURE__ */ jsxRuntime.jsxs(
3159
3349
  "div",
3160
3350
  {
3161
- className: "flex items-center gap-3 p-3 rounded-lg border",
3351
+ className: "flex items-center border",
3162
3352
  style: {
3163
3353
  backgroundColor: "var(--compass-color-surface)",
3164
- borderColor: "var(--compass-color-border)"
3354
+ borderColor: "var(--compass-color-border)",
3355
+ borderRadius: "var(--compass-border-radius-lg)",
3356
+ fontFamily: "var(--compass-font-family)",
3357
+ padding: "calc(var(--compass-spacing-unit) * 0.75)",
3358
+ gap: "calc(var(--compass-spacing-unit) * 0.75)"
3165
3359
  },
3166
3360
  children: [
3167
3361
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -3172,7 +3366,7 @@ function VaultsList({
3172
3366
  children: "Min TVL:"
3173
3367
  }
3174
3368
  ),
3175
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
3369
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
3176
3370
  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--compass-color-text-tertiary)" }, children: "$" }),
3177
3371
  /* @__PURE__ */ jsxRuntime.jsx(
3178
3372
  "input",
@@ -3181,10 +3375,13 @@ function VaultsList({
3181
3375
  placeholder: "0",
3182
3376
  value: minTvlFilter || "",
3183
3377
  onChange: (e) => handleMinTvlChange(e.target.value),
3184
- className: "w-24 px-2 py-1 rounded border text-sm bg-transparent",
3378
+ className: "w-24 border text-sm bg-transparent",
3185
3379
  style: {
3186
3380
  borderColor: "var(--compass-color-border)",
3187
- color: "var(--compass-color-text)"
3381
+ color: "var(--compass-color-text)",
3382
+ borderRadius: "var(--compass-border-radius-sm)",
3383
+ fontFamily: "var(--compass-font-family)",
3384
+ padding: "calc(var(--compass-spacing-unit) * 0.25) calc(var(--compass-spacing-unit) * 0.5)"
3188
3385
  }
3189
3386
  }
3190
3387
  )
@@ -3193,10 +3390,13 @@ function VaultsList({
3193
3390
  "button",
3194
3391
  {
3195
3392
  onClick: () => setMinTvlFilter(void 0),
3196
- className: "text-xs px-2 py-1 rounded",
3393
+ className: "text-xs",
3197
3394
  style: {
3198
3395
  backgroundColor: "var(--compass-color-error-muted)",
3199
- color: "var(--compass-color-error)"
3396
+ color: "var(--compass-color-error)",
3397
+ borderRadius: "var(--compass-border-radius-sm)",
3398
+ padding: "calc(var(--compass-spacing-unit) * 0.25) calc(var(--compass-spacing-unit) * 0.5)",
3399
+ transition: "var(--compass-transition-fast)"
3200
3400
  },
3201
3401
  children: "Clear"
3202
3402
  }
@@ -3205,24 +3405,26 @@ function VaultsList({
3205
3405
  }
3206
3406
  )
3207
3407
  ] }),
3208
- isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 24, className: "animate-spin", style: { color: "var(--compass-color-primary)" } }) }) : isError ? /* @__PURE__ */ jsxRuntime.jsx(
3408
+ isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", style: { padding: "calc(var(--compass-spacing-unit) * 3) 0" }, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 24, className: "animate-spin", style: { color: "var(--compass-color-primary)" } }) }) : isError ? /* @__PURE__ */ jsxRuntime.jsx(
3209
3409
  "div",
3210
3410
  {
3211
- className: "p-4 rounded-lg text-center",
3411
+ className: "text-center",
3212
3412
  style: {
3213
3413
  backgroundColor: "var(--compass-color-error-muted)",
3214
- color: "var(--compass-color-error)"
3414
+ color: "var(--compass-color-error)",
3415
+ borderRadius: "var(--compass-border-radius-lg)",
3416
+ padding: "var(--compass-spacing-card)"
3215
3417
  },
3216
3418
  children: "Failed to load vaults. Please try again."
3217
3419
  }
3218
3420
  ) : filteredVaults.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(
3219
3421
  "div",
3220
3422
  {
3221
- className: "p-8 text-center",
3222
- style: { color: "var(--compass-color-text-secondary)" },
3423
+ className: "text-center",
3424
+ style: { color: "var(--compass-color-text-secondary)", padding: "calc(var(--compass-spacing-unit) * 2)" },
3223
3425
  children: "No vaults found"
3224
3426
  }
3225
- ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-3", children: filteredVaults.map((vault) => /* @__PURE__ */ jsxRuntime.jsx(
3427
+ ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col", style: { gap: "calc(var(--compass-spacing-unit) * 0.75)" }, children: filteredVaults.map((vault) => /* @__PURE__ */ jsxRuntime.jsx(
3226
3428
  VaultCard,
3227
3429
  {
3228
3430
  vault,
@@ -3240,7 +3442,7 @@ function VaultsList({
3240
3442
  isOpen: !!selectedVault,
3241
3443
  onClose: () => setSelectedVault(null),
3242
3444
  title: selectedVault.name,
3243
- children: /* @__PURE__ */ jsxRuntime.jsx(EarnAccountGuard, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
3445
+ children: /* @__PURE__ */ jsxRuntime.jsx(EarnAccountGuard, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", style: { gap: "var(--compass-spacing-card)" }, children: [
3244
3446
  showPnL && selectedVault.userPosition?.pnl && /* @__PURE__ */ jsxRuntime.jsx(
3245
3447
  PnLSummary,
3246
3448
  {
@@ -3405,10 +3607,10 @@ function AaveMarketsList({
3405
3607
  }
3406
3608
  refetch();
3407
3609
  };
3408
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
3409
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2 flex-wrap", children: [
3610
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", style: { gap: "var(--compass-spacing-card)" }, children: [
3611
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between flex-wrap", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
3410
3612
  /* @__PURE__ */ jsxRuntime.jsx(ChainSwitcher, {}),
3411
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
3613
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
3412
3614
  /* @__PURE__ */ jsxRuntime.jsx(EarnAccountBalance, { compact: true }),
3413
3615
  /* @__PURE__ */ jsxRuntime.jsx(WalletStatus, { compact: true })
3414
3616
  ] })
@@ -3416,10 +3618,14 @@ function AaveMarketsList({
3416
3618
  showSearch && /* @__PURE__ */ jsxRuntime.jsxs(
3417
3619
  "div",
3418
3620
  {
3419
- className: "flex items-center gap-2 px-3 py-2 rounded-lg border",
3621
+ className: "flex items-center border",
3420
3622
  style: {
3421
3623
  backgroundColor: "var(--compass-color-background)",
3422
- borderColor: "var(--compass-color-border)"
3624
+ borderColor: "var(--compass-color-border)",
3625
+ borderRadius: "var(--compass-border-radius-lg)",
3626
+ fontFamily: "var(--compass-font-family)",
3627
+ padding: "var(--compass-spacing-input)",
3628
+ gap: "calc(var(--compass-spacing-unit) * 0.5)"
3423
3629
  },
3424
3630
  children: [
3425
3631
  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { size: 16, style: { color: "var(--compass-color-text-tertiary)" } }),
@@ -3437,37 +3643,43 @@ function AaveMarketsList({
3437
3643
  ]
3438
3644
  }
3439
3645
  ),
3440
- isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 24, className: "animate-spin", style: { color: "var(--compass-color-primary)" } }) }) : isError ? /* @__PURE__ */ jsxRuntime.jsx(
3646
+ isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", style: { padding: "calc(var(--compass-spacing-unit) * 3) 0" }, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 24, className: "animate-spin", style: { color: "var(--compass-color-primary)" } }) }) : isError ? /* @__PURE__ */ jsxRuntime.jsx(
3441
3647
  "div",
3442
3648
  {
3443
- className: "p-4 rounded-lg text-center",
3649
+ className: "text-center",
3444
3650
  style: {
3445
3651
  backgroundColor: "var(--compass-color-error-muted)",
3446
- color: "var(--compass-color-error)"
3652
+ color: "var(--compass-color-error)",
3653
+ borderRadius: "var(--compass-border-radius-lg)",
3654
+ padding: "var(--compass-spacing-card)"
3447
3655
  },
3448
3656
  children: "Failed to load Aave markets. Please try again."
3449
3657
  }
3450
3658
  ) : filteredMarkets.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(
3451
3659
  "div",
3452
3660
  {
3453
- className: "p-8 text-center",
3454
- style: { color: "var(--compass-color-text-secondary)" },
3661
+ className: "text-center",
3662
+ style: { color: "var(--compass-color-text-secondary)", padding: "calc(var(--compass-spacing-unit) * 2)" },
3455
3663
  children: "No markets found"
3456
3664
  }
3457
- ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-3", children: filteredMarkets.map((market) => {
3665
+ ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col", style: { gap: "calc(var(--compass-spacing-unit) * 0.75)" }, children: filteredMarkets.map((market) => {
3458
3666
  const hasPosition = market.userPosition && parseFloat(market.userPosition.balance) > 0;
3459
3667
  return /* @__PURE__ */ jsxRuntime.jsxs(
3460
3668
  "button",
3461
3669
  {
3462
3670
  onClick: () => handleMarketClick(market),
3463
- className: "w-full p-4 rounded-xl border transition-all text-left hover:scale-[1.01]",
3671
+ className: "w-full border text-left hover:scale-[1.01]",
3464
3672
  style: {
3465
3673
  backgroundColor: "var(--compass-color-surface)",
3466
- borderColor: hasPosition ? "var(--compass-color-primary)" : "var(--compass-color-border)"
3674
+ borderColor: hasPosition ? "var(--compass-color-primary)" : "var(--compass-color-border)",
3675
+ borderRadius: "var(--compass-border-radius-xl)",
3676
+ fontFamily: "var(--compass-font-family)",
3677
+ padding: "var(--compass-spacing-card)",
3678
+ transition: "var(--compass-transition-normal)"
3467
3679
  },
3468
3680
  children: [
3469
3681
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between", children: [
3470
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
3682
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", style: { gap: "calc(var(--compass-spacing-unit) * 0.25)" }, children: [
3471
3683
  /* @__PURE__ */ jsxRuntime.jsx(
3472
3684
  "h3",
3473
3685
  {
@@ -3488,7 +3700,7 @@ function AaveMarketsList({
3488
3700
  }
3489
3701
  )
3490
3702
  ] }),
3491
- showApy && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
3703
+ showApy && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.25)" }, children: [
3492
3704
  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingUp, { size: 14, style: { color: "var(--compass-color-success)" } }),
3493
3705
  /* @__PURE__ */ jsxRuntime.jsx(
3494
3706
  "span",
@@ -3500,28 +3712,39 @@ function AaveMarketsList({
3500
3712
  )
3501
3713
  ] })
3502
3714
  ] }),
3503
- showUserPosition && hasPosition && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-end mt-3 pt-3 border-t", style: { borderColor: "var(--compass-color-border)" }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end", children: [
3504
- /* @__PURE__ */ jsxRuntime.jsx(
3505
- "span",
3506
- {
3507
- className: "text-xs",
3508
- style: { color: "var(--compass-color-text-tertiary)" },
3509
- children: "Your Position"
3510
- }
3511
- ),
3512
- /* @__PURE__ */ jsxRuntime.jsxs(
3513
- "span",
3514
- {
3515
- className: "font-mono text-sm font-medium",
3516
- style: { color: "var(--compass-color-primary)" },
3517
- children: [
3518
- parseFloat(market.userPosition.balance).toFixed(4),
3519
- " ",
3520
- market.underlyingSymbol
3521
- ]
3522
- }
3523
- )
3524
- ] }) })
3715
+ showUserPosition && hasPosition && /* @__PURE__ */ jsxRuntime.jsx(
3716
+ "div",
3717
+ {
3718
+ className: "flex items-center justify-end border-t",
3719
+ style: {
3720
+ borderColor: "var(--compass-color-border)",
3721
+ marginTop: "calc(var(--compass-spacing-unit) * 0.75)",
3722
+ paddingTop: "calc(var(--compass-spacing-unit) * 0.75)"
3723
+ },
3724
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end", children: [
3725
+ /* @__PURE__ */ jsxRuntime.jsx(
3726
+ "span",
3727
+ {
3728
+ className: "text-xs",
3729
+ style: { color: "var(--compass-color-text-tertiary)" },
3730
+ children: "Your Position"
3731
+ }
3732
+ ),
3733
+ /* @__PURE__ */ jsxRuntime.jsxs(
3734
+ "span",
3735
+ {
3736
+ className: "font-mono text-sm font-medium",
3737
+ style: { color: "var(--compass-color-primary)" },
3738
+ children: [
3739
+ parseFloat(market.userPosition.balance).toFixed(4),
3740
+ " ",
3741
+ market.underlyingSymbol
3742
+ ]
3743
+ }
3744
+ )
3745
+ ] })
3746
+ }
3747
+ )
3525
3748
  ]
3526
3749
  },
3527
3750
  market.marketAddress
@@ -3533,7 +3756,7 @@ function AaveMarketsList({
3533
3756
  isOpen: !!selectedMarket,
3534
3757
  onClose: () => setSelectedMarket(null),
3535
3758
  title: `${selectedMarket.underlyingSymbol} - Aave`,
3536
- children: /* @__PURE__ */ jsxRuntime.jsx(EarnAccountGuard, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
3759
+ children: /* @__PURE__ */ jsxRuntime.jsx(EarnAccountGuard, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", style: { gap: "var(--compass-spacing-card)" }, children: [
3537
3760
  showPnL && selectedMarket.userPosition?.pnl && /* @__PURE__ */ jsxRuntime.jsx(
3538
3761
  PnLSummary,
3539
3762
  {
@@ -3588,8 +3811,13 @@ function formatAmount2(value) {
3588
3811
  return num.toFixed(6).replace(/\.?0+$/, "");
3589
3812
  }
3590
3813
  function EarnAccount({
3814
+ showHeader = true,
3815
+ showInterestRate = true,
3591
3816
  showPnL = true,
3592
- showHistory = true,
3817
+ showFundButton = true,
3818
+ showTrustBadge = true,
3819
+ compact = false,
3820
+ title = "Savings Account",
3593
3821
  onSupply,
3594
3822
  onWithdraw
3595
3823
  }) {
@@ -3899,7 +4127,6 @@ function EarnAccount({
3899
4127
  setFundToken("USDC");
3900
4128
  }, 2e3);
3901
4129
  } catch (err) {
3902
- console.error("Fund transfer failed:", err);
3903
4130
  setFundError(err instanceof Error ? err.message : "Transfer failed");
3904
4131
  setFundStatus("");
3905
4132
  } finally {
@@ -3975,7 +4202,6 @@ function EarnAccount({
3975
4202
  }
3976
4203
  setTimeout(() => setStatusMessage(""), 3e3);
3977
4204
  } catch (err) {
3978
- console.error("Transaction failed:", err);
3979
4205
  setError(err instanceof Error ? err.message : "Transaction failed");
3980
4206
  setStatusMessage("");
3981
4207
  } finally {
@@ -3999,14 +4225,19 @@ function EarnAccount({
3999
4225
  }
4000
4226
  );
4001
4227
  }
4002
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6", children: [
4003
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
4228
+ const spacing = compact ? "calc(var(--compass-spacing-unit) * 0.75)" : "var(--compass-spacing-card)";
4229
+ const gapSize = compact ? "calc(var(--compass-spacing-unit) * 0.75)" : "calc(var(--compass-spacing-unit) * 1.5)";
4230
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", style: { gap: gapSize, fontFamily: "var(--compass-font-family)" }, children: [
4231
+ showHeader && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
4004
4232
  /* @__PURE__ */ jsxRuntime.jsx(
4005
4233
  "h2",
4006
4234
  {
4007
- className: "text-lg font-semibold",
4008
- style: { color: "var(--compass-color-text)" },
4009
- children: "Savings Account"
4235
+ className: "font-semibold",
4236
+ style: {
4237
+ color: "var(--compass-color-text)",
4238
+ fontSize: "var(--compass-font-size-subheading, 1.125rem)"
4239
+ },
4240
+ children: title
4010
4241
  }
4011
4242
  ),
4012
4243
  /* @__PURE__ */ jsxRuntime.jsx(WalletStatus, { compact: true })
@@ -4015,46 +4246,49 @@ function EarnAccount({
4015
4246
  /* @__PURE__ */ jsxRuntime.jsxs(
4016
4247
  "div",
4017
4248
  {
4018
- className: "p-6 rounded-2xl",
4019
4249
  style: {
4020
- background: "linear-gradient(135deg, var(--compass-color-primary) 0%, var(--compass-color-primary-hover, var(--compass-color-primary)) 100%)"
4250
+ background: "linear-gradient(135deg, var(--compass-color-primary) 0%, var(--compass-color-primary-hover, var(--compass-color-primary)) 100%)",
4251
+ borderRadius: "var(--compass-border-radius-xl)",
4252
+ padding: compact ? "var(--compass-spacing-card)" : "calc(var(--compass-spacing-card) * 1.5)"
4021
4253
  },
4022
4254
  children: [
4023
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 mb-6", children: [
4255
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", style: { gap: "calc(var(--compass-spacing-unit) * 0.25)", marginBottom: compact ? "var(--compass-spacing-card)" : "calc(var(--compass-spacing-card) * 1.5)" }, children: [
4024
4256
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", style: { color: "rgba(255,255,255,0.7)" }, children: "Total Balance" }),
4025
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold", style: { color: "white", fontSize: "2.75rem", lineHeight: "1" }, children: formatCurrency(totalBalance) })
4257
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold", style: { color: "white", fontSize: compact ? "2rem" : "2.75rem", lineHeight: "1" }, children: formatCurrency(totalBalance) })
4026
4258
  ] }),
4027
4259
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
4028
4260
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
4029
4261
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", style: { color: "rgba(255,255,255,0.6)" }, children: "Available" }),
4030
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xl font-semibold", style: { color: "white" }, children: formatCurrency(available) })
4262
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", style: { color: "white", fontSize: compact ? "1rem" : "1.25rem" }, children: formatCurrency(available) })
4031
4263
  ] }),
4032
4264
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end", children: [
4033
4265
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", style: { color: "rgba(255,255,255,0.6)" }, children: "Earning Interest" }),
4034
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xl font-semibold", style: { color: "white" }, children: formatCurrency(depositedBalance) })
4266
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", style: { color: "white", fontSize: compact ? "1rem" : "1.25rem" }, children: formatCurrency(depositedBalance) })
4035
4267
  ] })
4036
4268
  ] })
4037
4269
  ]
4038
4270
  }
4039
4271
  ),
4040
- /* @__PURE__ */ jsxRuntime.jsxs(
4272
+ showInterestRate && /* @__PURE__ */ jsxRuntime.jsxs(
4041
4273
  "div",
4042
4274
  {
4043
- className: "flex items-center justify-between p-4 rounded-xl",
4275
+ className: "flex items-center justify-between",
4044
4276
  style: {
4045
4277
  backgroundColor: "var(--compass-color-success-muted, rgba(34, 197, 94, 0.1))",
4046
- border: "1px solid var(--compass-color-success)"
4278
+ border: "1px solid var(--compass-color-success)",
4279
+ borderRadius: "var(--compass-border-radius-lg)",
4280
+ padding: spacing
4047
4281
  },
4048
4282
  children: [
4049
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
4050
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingUp, { size: 18, style: { color: "var(--compass-color-success)" } }),
4051
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", style: { color: "var(--compass-color-text)" }, children: "Annual Interest Rate" })
4283
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
4284
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingUp, { size: compact ? 16 : 18, style: { color: "var(--compass-color-success)" } }),
4285
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", style: { color: "var(--compass-color-text)", fontSize: compact ? "0.875rem" : "1rem" }, children: "Annual Interest Rate" })
4052
4286
  ] }),
4053
4287
  /* @__PURE__ */ jsxRuntime.jsxs(
4054
4288
  "span",
4055
4289
  {
4056
- className: "text-xl font-bold",
4057
- style: { color: "var(--compass-color-success)" },
4290
+ className: "font-bold",
4291
+ style: { color: "var(--compass-color-success)", fontSize: compact ? "1rem" : "1.25rem" },
4058
4292
  children: [
4059
4293
  formatAPY3(market.supplyApy),
4060
4294
  "%"
@@ -4064,13 +4298,15 @@ function EarnAccount({
4064
4298
  ]
4065
4299
  }
4066
4300
  ),
4067
- earnings > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
4301
+ showPnL && earnings > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
4068
4302
  "div",
4069
4303
  {
4070
- className: "flex items-center justify-between p-4 rounded-xl",
4304
+ className: "flex items-center justify-between",
4071
4305
  style: {
4072
4306
  backgroundColor: "var(--compass-color-surface)",
4073
- border: "1px solid var(--compass-color-border)"
4307
+ border: "1px solid var(--compass-color-border)",
4308
+ borderRadius: "var(--compass-border-radius-lg)",
4309
+ padding: spacing
4074
4310
  },
4075
4311
  children: [
4076
4312
  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--compass-color-text-secondary)" }, children: "Total Earnings" }),
@@ -4091,8 +4327,12 @@ function EarnAccount({
4091
4327
  /* @__PURE__ */ jsxRuntime.jsxs(
4092
4328
  "div",
4093
4329
  {
4094
- className: "flex p-1 rounded-xl",
4095
- style: { backgroundColor: "var(--compass-color-surface)" },
4330
+ className: "flex",
4331
+ style: {
4332
+ backgroundColor: "var(--compass-color-surface)",
4333
+ borderRadius: "var(--compass-border-radius-lg)",
4334
+ padding: "calc(var(--compass-spacing-unit) * 0.25)"
4335
+ },
4096
4336
  children: [
4097
4337
  /* @__PURE__ */ jsxRuntime.jsxs(
4098
4338
  "button",
@@ -4101,13 +4341,17 @@ function EarnAccount({
4101
4341
  setActiveTab("deposit");
4102
4342
  setError(null);
4103
4343
  },
4104
- className: "flex-1 flex items-center justify-center gap-2 py-3 rounded-lg font-medium transition-all",
4344
+ className: "flex-1 flex items-center justify-center font-medium transition-all",
4105
4345
  style: {
4106
4346
  backgroundColor: activeTab === "deposit" ? "var(--compass-color-primary)" : "transparent",
4107
- color: activeTab === "deposit" ? "white" : "var(--compass-color-text-secondary)"
4347
+ color: activeTab === "deposit" ? "var(--compass-color-primary-text, white)" : "var(--compass-color-text-secondary)",
4348
+ borderRadius: "var(--compass-border-radius-md)",
4349
+ padding: compact ? "calc(var(--compass-spacing-unit) * 0.5)" : "calc(var(--compass-spacing-unit) * 0.75)",
4350
+ gap: "calc(var(--compass-spacing-unit) * 0.5)",
4351
+ transition: "var(--compass-transition-normal)"
4108
4352
  },
4109
4353
  children: [
4110
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { size: 18 }),
4354
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { size: compact ? 16 : 18 }),
4111
4355
  "Add Money"
4112
4356
  ]
4113
4357
  }
@@ -4119,13 +4363,17 @@ function EarnAccount({
4119
4363
  setActiveTab("withdraw");
4120
4364
  setError(null);
4121
4365
  },
4122
- className: "flex-1 flex items-center justify-center gap-2 py-3 rounded-lg font-medium transition-all",
4366
+ className: "flex-1 flex items-center justify-center font-medium transition-all",
4123
4367
  style: {
4124
4368
  backgroundColor: activeTab === "withdraw" ? "var(--compass-color-primary)" : "transparent",
4125
- color: activeTab === "withdraw" ? "white" : "var(--compass-color-text-secondary)"
4369
+ color: activeTab === "withdraw" ? "var(--compass-color-primary-text, white)" : "var(--compass-color-text-secondary)",
4370
+ borderRadius: "var(--compass-border-radius-md)",
4371
+ padding: compact ? "calc(var(--compass-spacing-unit) * 0.5)" : "calc(var(--compass-spacing-unit) * 0.75)",
4372
+ gap: "calc(var(--compass-spacing-unit) * 0.5)",
4373
+ transition: "var(--compass-transition-normal)"
4126
4374
  },
4127
4375
  children: [
4128
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minus, { size: 18 }),
4376
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minus, { size: compact ? 16 : 18 }),
4129
4377
  "Withdraw"
4130
4378
  ]
4131
4379
  }
@@ -4133,21 +4381,23 @@ function EarnAccount({
4133
4381
  ]
4134
4382
  }
4135
4383
  ),
4136
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
4384
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", style: { gap: "calc(var(--compass-spacing-unit) * 0.75)" }, children: [
4137
4385
  /* @__PURE__ */ jsxRuntime.jsxs(
4138
4386
  "div",
4139
4387
  {
4140
- className: "flex items-center p-4 rounded-xl",
4388
+ className: "flex items-center",
4141
4389
  style: {
4142
4390
  backgroundColor: "var(--compass-color-surface)",
4143
- border: "1px solid var(--compass-color-border)"
4391
+ border: "1px solid var(--compass-color-border)",
4392
+ borderRadius: "var(--compass-border-radius-lg)",
4393
+ padding: spacing
4144
4394
  },
4145
4395
  children: [
4146
4396
  /* @__PURE__ */ jsxRuntime.jsx(
4147
4397
  "span",
4148
4398
  {
4149
- className: "text-2xl font-bold mr-2",
4150
- style: { color: "var(--compass-color-text-secondary)" },
4399
+ className: "font-bold",
4400
+ style: { color: "var(--compass-color-text-secondary)", fontSize: compact ? "1.25rem" : "1.5rem", marginRight: "calc(var(--compass-spacing-unit) * 0.5)" },
4151
4401
  children: "$"
4152
4402
  }
4153
4403
  ),
@@ -4162,8 +4412,8 @@ function EarnAccount({
4162
4412
  },
4163
4413
  placeholder: "0.00",
4164
4414
  disabled: isProcessing,
4165
- className: "flex-1 text-2xl font-bold bg-transparent outline-none",
4166
- style: { color: "var(--compass-color-text)" }
4415
+ className: "flex-1 font-bold bg-transparent outline-none",
4416
+ style: { color: "var(--compass-color-text)", fontSize: compact ? "1.25rem" : "1.5rem" }
4167
4417
  }
4168
4418
  ),
4169
4419
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -4171,10 +4421,12 @@ function EarnAccount({
4171
4421
  {
4172
4422
  onClick: () => setAmount(maxAmount.toString()),
4173
4423
  disabled: isProcessing,
4174
- className: "px-3 py-1 rounded-lg text-sm font-medium",
4424
+ className: "text-sm font-medium",
4175
4425
  style: {
4176
4426
  backgroundColor: "var(--compass-color-primary-muted, rgba(99, 102, 241, 0.1))",
4177
- color: "var(--compass-color-primary)"
4427
+ color: "var(--compass-color-primary)",
4428
+ borderRadius: "var(--compass-border-radius-md)",
4429
+ padding: "calc(var(--compass-spacing-unit) * 0.25) calc(var(--compass-spacing-unit) * 0.75)"
4178
4430
  },
4179
4431
  children: "Max"
4180
4432
  }
@@ -4182,7 +4434,7 @@ function EarnAccount({
4182
4434
  ]
4183
4435
  }
4184
4436
  ),
4185
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between px-1", children: [
4437
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", style: { padding: "0 calc(var(--compass-spacing-unit) * 0.25)" }, children: [
4186
4438
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", style: { color: "var(--compass-color-text-tertiary)" }, children: activeTab === "deposit" ? "Available to add" : "Available to withdraw" }),
4187
4439
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", style: { color: "var(--compass-color-text-secondary)" }, children: formatCurrency(maxAmount) })
4188
4440
  ] })
@@ -4190,10 +4442,12 @@ function EarnAccount({
4190
4442
  error && /* @__PURE__ */ jsxRuntime.jsx(
4191
4443
  "div",
4192
4444
  {
4193
- className: "p-3 rounded-xl text-sm",
4445
+ className: "text-sm",
4194
4446
  style: {
4195
4447
  backgroundColor: "var(--compass-color-error-muted)",
4196
- color: "var(--compass-color-error)"
4448
+ color: "var(--compass-color-error)",
4449
+ borderRadius: "var(--compass-border-radius-lg)",
4450
+ padding: "calc(var(--compass-spacing-unit) * 0.75)"
4197
4451
  },
4198
4452
  children: error
4199
4453
  }
@@ -4203,13 +4457,17 @@ function EarnAccount({
4203
4457
  {
4204
4458
  onClick: handleAction,
4205
4459
  disabled: isProcessing || !amount || parseFloat(amount) <= 0 || parseFloat(amount) > maxAmount,
4206
- className: "w-full py-4 rounded-xl font-semibold text-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed",
4460
+ className: "w-full font-semibold transition-all disabled:opacity-50 disabled:cursor-not-allowed",
4207
4461
  style: {
4208
4462
  backgroundColor: "var(--compass-color-primary)",
4209
- color: "white"
4463
+ color: "var(--compass-color-primary-text, white)",
4464
+ borderRadius: "var(--compass-border-radius-lg)",
4465
+ padding: compact ? "calc(var(--compass-spacing-unit) * 0.75)" : "var(--compass-spacing-card)",
4466
+ fontSize: compact ? "0.875rem" : "1.125rem",
4467
+ transition: "var(--compass-transition-normal)"
4210
4468
  },
4211
- children: isProcessing ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center justify-center gap-2", children: [
4212
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 20, className: "animate-spin" }),
4469
+ children: isProcessing ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center justify-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
4470
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: compact ? 16 : 20, className: "animate-spin" }),
4213
4471
  "Processing..."
4214
4472
  ] }) : activeTab === "deposit" ? "Add to Savings" : "Withdraw to Account"
4215
4473
  }
@@ -4217,36 +4475,46 @@ function EarnAccount({
4217
4475
  statusMessage && !error && /* @__PURE__ */ jsxRuntime.jsx(
4218
4476
  "div",
4219
4477
  {
4220
- className: "p-3 rounded-xl text-sm text-center",
4478
+ className: "text-sm text-center",
4221
4479
  style: {
4222
4480
  backgroundColor: statusMessage.includes("successful") ? "var(--compass-color-success-muted)" : "var(--compass-color-primary-muted, rgba(99, 102, 241, 0.1))",
4223
- color: statusMessage.includes("successful") ? "var(--compass-color-success)" : "var(--compass-color-primary)"
4481
+ color: statusMessage.includes("successful") ? "var(--compass-color-success)" : "var(--compass-color-primary)",
4482
+ borderRadius: "var(--compass-border-radius-lg)",
4483
+ padding: "calc(var(--compass-spacing-unit) * 0.75)"
4224
4484
  },
4225
4485
  children: statusMessage
4226
4486
  }
4227
4487
  ),
4228
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2 pt-2", children: [
4488
+ showTrustBadge && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)", paddingTop: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
4229
4489
  /* @__PURE__ */ jsxRuntime.jsx(
4230
4490
  "div",
4231
4491
  {
4232
- className: "w-2 h-2 rounded-full",
4233
- style: { backgroundColor: "var(--compass-color-success)" }
4492
+ style: {
4493
+ width: "0.5rem",
4494
+ height: "0.5rem",
4495
+ borderRadius: "var(--compass-border-radius-full)",
4496
+ backgroundColor: "var(--compass-color-success)"
4497
+ }
4234
4498
  }
4235
4499
  ),
4236
4500
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: "Secured & Insured" })
4237
4501
  ] }),
4238
- /* @__PURE__ */ jsxRuntime.jsxs(
4502
+ showFundButton && /* @__PURE__ */ jsxRuntime.jsxs(
4239
4503
  "button",
4240
4504
  {
4241
4505
  onClick: () => setIsFundModalOpen(true),
4242
- className: "w-full py-3 rounded-xl font-medium flex items-center justify-center gap-2 transition-all",
4506
+ className: "w-full font-medium flex items-center justify-center transition-all",
4243
4507
  style: {
4244
4508
  backgroundColor: "var(--compass-color-surface)",
4245
4509
  border: "1px solid var(--compass-color-border)",
4246
- color: "var(--compass-color-text)"
4510
+ color: "var(--compass-color-text)",
4511
+ borderRadius: "var(--compass-border-radius-lg)",
4512
+ padding: compact ? "calc(var(--compass-spacing-unit) * 0.5)" : "calc(var(--compass-spacing-unit) * 0.75)",
4513
+ gap: "calc(var(--compass-spacing-unit) * 0.5)",
4514
+ transition: "var(--compass-transition-normal)"
4247
4515
  },
4248
4516
  children: [
4249
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Wallet, { size: 18 }),
4517
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Wallet, { size: compact ? 16 : 18 }),
4250
4518
  "Transfer from Wallet"
4251
4519
  ]
4252
4520
  }
@@ -4614,23 +4882,27 @@ function PendleMarketsList({
4614
4882
  }
4615
4883
  refetch();
4616
4884
  };
4617
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
4618
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2 flex-wrap", children: [
4885
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", style: { gap: "var(--compass-spacing-card)" }, children: [
4886
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between flex-wrap", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
4619
4887
  /* @__PURE__ */ jsxRuntime.jsx(ChainSwitcher, {}),
4620
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
4888
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
4621
4889
  /* @__PURE__ */ jsxRuntime.jsx(EarnAccountBalance, { compact: true }),
4622
4890
  /* @__PURE__ */ jsxRuntime.jsx(WalletStatus, { compact: true })
4623
4891
  ] })
4624
4892
  ] }),
4625
- (showSearch || showSort || showTvlFilter) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
4626
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
4893
+ (showSearch || showSort || showTvlFilter) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
4894
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
4627
4895
  showSearch && /* @__PURE__ */ jsxRuntime.jsxs(
4628
4896
  "div",
4629
4897
  {
4630
- className: "flex-1 flex items-center gap-2 px-3 py-2 rounded-lg border",
4898
+ className: "flex-1 flex items-center border",
4631
4899
  style: {
4632
4900
  backgroundColor: "var(--compass-color-background)",
4633
- borderColor: "var(--compass-color-border)"
4901
+ borderColor: "var(--compass-color-border)",
4902
+ borderRadius: "var(--compass-border-radius-lg)",
4903
+ fontFamily: "var(--compass-font-family)",
4904
+ padding: "var(--compass-spacing-input)",
4905
+ gap: "calc(var(--compass-spacing-unit) * 0.5)"
4634
4906
  },
4635
4907
  children: [
4636
4908
  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { size: 16, style: { color: "var(--compass-color-text-tertiary)" } }),
@@ -4653,11 +4925,14 @@ function PendleMarketsList({
4653
4925
  {
4654
4926
  value: sortBy,
4655
4927
  onChange: (e) => setSortBy(e.target.value),
4656
- className: "px-3 py-2 rounded-lg border text-sm cursor-pointer",
4928
+ className: "border text-sm cursor-pointer",
4657
4929
  style: {
4658
4930
  backgroundColor: "var(--compass-color-background)",
4659
4931
  borderColor: "var(--compass-color-border)",
4660
- color: "var(--compass-color-text)"
4932
+ color: "var(--compass-color-text)",
4933
+ borderRadius: "var(--compass-border-radius-lg)",
4934
+ fontFamily: "var(--compass-font-family)",
4935
+ padding: "var(--compass-spacing-input)"
4661
4936
  },
4662
4937
  children: [
4663
4938
  /* @__PURE__ */ jsxRuntime.jsx("option", { value: "fixed_apy", children: "Fixed APY" }),
@@ -4670,11 +4945,16 @@ function PendleMarketsList({
4670
4945
  "button",
4671
4946
  {
4672
4947
  onClick: () => setShowFilterPanel(!showFilterPanel),
4673
- className: "px-3 py-2 rounded-lg border text-sm flex items-center gap-2",
4948
+ className: "border text-sm flex items-center",
4674
4949
  style: {
4675
4950
  backgroundColor: showFilterPanel || minTvlFilter ? "var(--compass-color-primary-muted)" : "var(--compass-color-background)",
4676
4951
  borderColor: showFilterPanel || minTvlFilter ? "var(--compass-color-primary)" : "var(--compass-color-border)",
4677
- color: showFilterPanel || minTvlFilter ? "var(--compass-color-primary)" : "var(--compass-color-text)"
4952
+ color: showFilterPanel || minTvlFilter ? "var(--compass-color-primary)" : "var(--compass-color-text)",
4953
+ borderRadius: "var(--compass-border-radius-lg)",
4954
+ fontFamily: "var(--compass-font-family)",
4955
+ padding: "var(--compass-spacing-input)",
4956
+ gap: "calc(var(--compass-spacing-unit) * 0.5)",
4957
+ transition: "var(--compass-transition-normal)"
4678
4958
  },
4679
4959
  children: [
4680
4960
  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SlidersHorizontal, { size: 14 }),
@@ -4686,10 +4966,14 @@ function PendleMarketsList({
4686
4966
  showTvlFilter && showFilterPanel && /* @__PURE__ */ jsxRuntime.jsxs(
4687
4967
  "div",
4688
4968
  {
4689
- className: "flex items-center gap-3 p-3 rounded-lg border",
4969
+ className: "flex items-center border",
4690
4970
  style: {
4691
4971
  backgroundColor: "var(--compass-color-surface)",
4692
- borderColor: "var(--compass-color-border)"
4972
+ borderColor: "var(--compass-color-border)",
4973
+ borderRadius: "var(--compass-border-radius-lg)",
4974
+ fontFamily: "var(--compass-font-family)",
4975
+ padding: "calc(var(--compass-spacing-unit) * 0.75)",
4976
+ gap: "calc(var(--compass-spacing-unit) * 0.75)"
4693
4977
  },
4694
4978
  children: [
4695
4979
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -4700,7 +4984,7 @@ function PendleMarketsList({
4700
4984
  children: "Min TVL:"
4701
4985
  }
4702
4986
  ),
4703
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
4987
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
4704
4988
  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--compass-color-text-tertiary)" }, children: "$" }),
4705
4989
  /* @__PURE__ */ jsxRuntime.jsx(
4706
4990
  "input",
@@ -4709,10 +4993,13 @@ function PendleMarketsList({
4709
4993
  placeholder: "0",
4710
4994
  value: minTvlFilter || "",
4711
4995
  onChange: (e) => handleMinTvlChange(e.target.value),
4712
- className: "w-24 px-2 py-1 rounded border text-sm bg-transparent",
4996
+ className: "w-24 border text-sm bg-transparent",
4713
4997
  style: {
4714
4998
  borderColor: "var(--compass-color-border)",
4715
- color: "var(--compass-color-text)"
4999
+ color: "var(--compass-color-text)",
5000
+ borderRadius: "var(--compass-border-radius-sm)",
5001
+ fontFamily: "var(--compass-font-family)",
5002
+ padding: "calc(var(--compass-spacing-unit) * 0.25) calc(var(--compass-spacing-unit) * 0.5)"
4716
5003
  }
4717
5004
  }
4718
5005
  )
@@ -4721,10 +5008,13 @@ function PendleMarketsList({
4721
5008
  "button",
4722
5009
  {
4723
5010
  onClick: () => setMinTvlFilter(void 0),
4724
- className: "text-xs px-2 py-1 rounded",
5011
+ className: "text-xs",
4725
5012
  style: {
4726
5013
  backgroundColor: "var(--compass-color-error-muted)",
4727
- color: "var(--compass-color-error)"
5014
+ color: "var(--compass-color-error)",
5015
+ borderRadius: "var(--compass-border-radius-sm)",
5016
+ padding: "calc(var(--compass-spacing-unit) * 0.25) calc(var(--compass-spacing-unit) * 0.5)",
5017
+ transition: "var(--compass-transition-fast)"
4728
5018
  },
4729
5019
  children: "Clear"
4730
5020
  }
@@ -4733,37 +5023,43 @@ function PendleMarketsList({
4733
5023
  }
4734
5024
  )
4735
5025
  ] }),
4736
- isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 24, className: "animate-spin", style: { color: "var(--compass-color-primary)" } }) }) : isError ? /* @__PURE__ */ jsxRuntime.jsx(
5026
+ isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", style: { padding: "calc(var(--compass-spacing-unit) * 3) 0" }, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 24, className: "animate-spin", style: { color: "var(--compass-color-primary)" } }) }) : isError ? /* @__PURE__ */ jsxRuntime.jsx(
4737
5027
  "div",
4738
5028
  {
4739
- className: "p-4 rounded-lg text-center",
5029
+ className: "text-center",
4740
5030
  style: {
4741
5031
  backgroundColor: "var(--compass-color-error-muted)",
4742
- color: "var(--compass-color-error)"
5032
+ color: "var(--compass-color-error)",
5033
+ borderRadius: "var(--compass-border-radius-lg)",
5034
+ padding: "var(--compass-spacing-card)"
4743
5035
  },
4744
5036
  children: "Failed to load Pendle markets. Please try again."
4745
5037
  }
4746
5038
  ) : filteredMarkets.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(
4747
5039
  "div",
4748
5040
  {
4749
- className: "p-8 text-center",
4750
- style: { color: "var(--compass-color-text-secondary)" },
5041
+ className: "text-center",
5042
+ style: { color: "var(--compass-color-text-secondary)", padding: "calc(var(--compass-spacing-unit) * 2)" },
4751
5043
  children: "No active markets found"
4752
5044
  }
4753
- ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-3", children: filteredMarkets.map((market) => {
5045
+ ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col", style: { gap: "calc(var(--compass-spacing-unit) * 0.75)" }, children: filteredMarkets.map((market) => {
4754
5046
  const hasPosition = market.userPosition && parseFloat(market.userPosition.balance) > 0;
4755
5047
  return /* @__PURE__ */ jsxRuntime.jsxs(
4756
5048
  "button",
4757
5049
  {
4758
5050
  onClick: () => handleMarketClick(market),
4759
- className: "w-full p-4 rounded-xl border transition-all text-left hover:scale-[1.01]",
5051
+ className: "w-full border text-left hover:scale-[1.01]",
4760
5052
  style: {
4761
5053
  backgroundColor: "var(--compass-color-surface)",
4762
- borderColor: hasPosition ? "var(--compass-color-primary)" : "var(--compass-color-border)"
5054
+ borderColor: hasPosition ? "var(--compass-color-primary)" : "var(--compass-color-border)",
5055
+ borderRadius: "var(--compass-border-radius-xl)",
5056
+ fontFamily: "var(--compass-font-family)",
5057
+ padding: "var(--compass-spacing-card)",
5058
+ transition: "var(--compass-transition-normal)"
4763
5059
  },
4764
5060
  children: [
4765
5061
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between", children: [
4766
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
5062
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", style: { gap: "calc(var(--compass-spacing-unit) * 0.25)" }, children: [
4767
5063
  /* @__PURE__ */ jsxRuntime.jsx(
4768
5064
  "h3",
4769
5065
  {
@@ -4784,7 +5080,7 @@ function PendleMarketsList({
4784
5080
  }
4785
5081
  )
4786
5082
  ] }),
4787
- showApy && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
5083
+ showApy && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.25)" }, children: [
4788
5084
  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingUp, { size: 14, style: { color: "var(--compass-color-success)" } }),
4789
5085
  /* @__PURE__ */ jsxRuntime.jsx(
4790
5086
  "span",
@@ -4796,70 +5092,81 @@ function PendleMarketsList({
4796
5092
  )
4797
5093
  ] })
4798
5094
  ] }),
4799
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mt-3 pt-3 border-t", style: { borderColor: "var(--compass-color-border)" }, children: [
4800
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
4801
- showTvl && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
4802
- /* @__PURE__ */ jsxRuntime.jsx(
4803
- "span",
4804
- {
4805
- className: "text-xs",
4806
- style: { color: "var(--compass-color-text-tertiary)" },
4807
- children: "TVL"
4808
- }
4809
- ),
4810
- /* @__PURE__ */ jsxRuntime.jsx(
4811
- "span",
4812
- {
4813
- className: "font-mono text-sm",
4814
- style: { color: "var(--compass-color-text-secondary)" },
4815
- children: formatTVL2(market.tvlUsd)
4816
- }
4817
- )
4818
- ] }),
4819
- showExpiry && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
4820
- /* @__PURE__ */ jsxRuntime.jsx(
4821
- "span",
4822
- {
4823
- className: "text-xs",
4824
- style: { color: "var(--compass-color-text-tertiary)" },
4825
- children: "Expiry"
4826
- }
4827
- ),
4828
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
4829
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, { size: 12, style: { color: "var(--compass-color-text-secondary)" } }),
5095
+ /* @__PURE__ */ jsxRuntime.jsxs(
5096
+ "div",
5097
+ {
5098
+ className: "flex items-center justify-between border-t",
5099
+ style: {
5100
+ borderColor: "var(--compass-color-border)",
5101
+ marginTop: "calc(var(--compass-spacing-unit) * 0.75)",
5102
+ paddingTop: "calc(var(--compass-spacing-unit) * 0.75)"
5103
+ },
5104
+ children: [
5105
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex", style: { gap: "var(--compass-spacing-card)" }, children: [
5106
+ showTvl && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
5107
+ /* @__PURE__ */ jsxRuntime.jsx(
5108
+ "span",
5109
+ {
5110
+ className: "text-xs",
5111
+ style: { color: "var(--compass-color-text-tertiary)" },
5112
+ children: "TVL"
5113
+ }
5114
+ ),
5115
+ /* @__PURE__ */ jsxRuntime.jsx(
5116
+ "span",
5117
+ {
5118
+ className: "font-mono text-sm",
5119
+ style: { color: "var(--compass-color-text-secondary)" },
5120
+ children: formatTVL2(market.tvlUsd)
5121
+ }
5122
+ )
5123
+ ] }),
5124
+ showExpiry && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
5125
+ /* @__PURE__ */ jsxRuntime.jsx(
5126
+ "span",
5127
+ {
5128
+ className: "text-xs",
5129
+ style: { color: "var(--compass-color-text-tertiary)" },
5130
+ children: "Expiry"
5131
+ }
5132
+ ),
5133
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.25)" }, children: [
5134
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, { size: 12, style: { color: "var(--compass-color-text-secondary)" } }),
5135
+ /* @__PURE__ */ jsxRuntime.jsx(
5136
+ "span",
5137
+ {
5138
+ className: "font-mono text-sm",
5139
+ style: { color: "var(--compass-color-text-secondary)" },
5140
+ children: formatExpiry(market.expiry)
5141
+ }
5142
+ )
5143
+ ] })
5144
+ ] })
5145
+ ] }),
5146
+ showUserPosition && hasPosition && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end", children: [
4830
5147
  /* @__PURE__ */ jsxRuntime.jsx(
4831
5148
  "span",
4832
5149
  {
4833
- className: "font-mono text-sm",
4834
- style: { color: "var(--compass-color-text-secondary)" },
4835
- children: formatExpiry(market.expiry)
5150
+ className: "text-xs",
5151
+ style: { color: "var(--compass-color-text-tertiary)" },
5152
+ children: "Your Position"
5153
+ }
5154
+ ),
5155
+ /* @__PURE__ */ jsxRuntime.jsxs(
5156
+ "span",
5157
+ {
5158
+ className: "font-mono text-sm font-medium",
5159
+ style: { color: "var(--compass-color-primary)" },
5160
+ children: [
5161
+ parseFloat(market.userPosition.balance).toFixed(4),
5162
+ " PT"
5163
+ ]
4836
5164
  }
4837
5165
  )
4838
5166
  ] })
4839
- ] })
4840
- ] }),
4841
- showUserPosition && hasPosition && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end", children: [
4842
- /* @__PURE__ */ jsxRuntime.jsx(
4843
- "span",
4844
- {
4845
- className: "text-xs",
4846
- style: { color: "var(--compass-color-text-tertiary)" },
4847
- children: "Your Position"
4848
- }
4849
- ),
4850
- /* @__PURE__ */ jsxRuntime.jsxs(
4851
- "span",
4852
- {
4853
- className: "font-mono text-sm font-medium",
4854
- style: { color: "var(--compass-color-primary)" },
4855
- children: [
4856
- parseFloat(market.userPosition.balance).toFixed(4),
4857
- " PT"
4858
- ]
4859
- }
4860
- )
4861
- ] })
4862
- ] })
5167
+ ]
5168
+ }
5169
+ )
4863
5170
  ]
4864
5171
  },
4865
5172
  market.marketAddress
@@ -4871,7 +5178,7 @@ function PendleMarketsList({
4871
5178
  isOpen: !!selectedMarket,
4872
5179
  onClose: () => setSelectedMarket(null),
4873
5180
  title: selectedMarket.name,
4874
- children: /* @__PURE__ */ jsxRuntime.jsx(EarnAccountGuard, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
5181
+ children: /* @__PURE__ */ jsxRuntime.jsx(EarnAccountGuard, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", style: { gap: "var(--compass-spacing-card)" }, children: [
4875
5182
  showPnL && selectedMarket.userPosition?.pnl && /* @__PURE__ */ jsxRuntime.jsx(
4876
5183
  PnLSummary,
4877
5184
  {
@@ -4936,7 +5243,6 @@ function useSwapQuote({ fromToken, toToken, amount, enabled = true }) {
4936
5243
  rate: inputAmountNum > 0 ? (outputAmountNum / inputAmountNum).toString() : "0"
4937
5244
  };
4938
5245
  } catch (error) {
4939
- console.error("Failed to get swap quote:", error);
4940
5246
  throw error;
4941
5247
  }
4942
5248
  },
@@ -4953,12 +5259,14 @@ function useSwapQuote({ fromToken, toToken, amount, enabled = true }) {
4953
5259
  refetch: query.refetch
4954
5260
  };
4955
5261
  }
4956
- var DEFAULT_TOKENS = ["USDC", "ETH", "WETH", "WBTC", "DAI", "USDT", "AUSD", "SBC"];
5262
+
5263
+ // src/components/SwapWidget/types.ts
5264
+ var DEFAULT_SWAP_TOKENS = ["USDC", "ETH", "WETH", "WBTC", "DAI", "USDT", "AUSD", "SBC"];
4957
5265
  function SwapWidget({
4958
5266
  layout = "full",
4959
5267
  defaultFromToken = "ETH",
4960
5268
  defaultToToken = "USDC",
4961
- allowedTokens = DEFAULT_TOKENS,
5269
+ allowedTokens = [...DEFAULT_SWAP_TOKENS],
4962
5270
  showReverseButton = true,
4963
5271
  showSettings = false,
4964
5272
  onSwapSuccess,
@@ -5036,25 +5344,24 @@ function SwapWidget({
5036
5344
  setFromAmount("");
5037
5345
  setTimeout(() => setSwapStatus(""), 3e3);
5038
5346
  } catch (error) {
5039
- console.error("Swap failed:", error);
5040
5347
  setSwapStatus("");
5041
5348
  onSwapError?.(error);
5042
5349
  } finally {
5043
5350
  setIsSwapping(false);
5044
5351
  }
5045
5352
  }, [address, fromAmount, quote, chainId, fromToken, toToken, signTypedData, onSwapSuccess, onSwapError]);
5046
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
5047
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2 flex-wrap", children: [
5353
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", style: { gap: "var(--compass-spacing-card)" }, children: [
5354
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between flex-wrap", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
5048
5355
  /* @__PURE__ */ jsxRuntime.jsx(ChainSwitcher, {}),
5049
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
5356
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
5050
5357
  /* @__PURE__ */ jsxRuntime.jsx(EarnAccountBalance, { compact: true }),
5051
5358
  /* @__PURE__ */ jsxRuntime.jsx(WalletStatus, { compact: true })
5052
5359
  ] })
5053
5360
  ] }),
5054
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
5055
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 rounded-xl border relative", style: { backgroundColor: "var(--compass-color-surface)", borderColor: "var(--compass-color-border)" }, children: [
5056
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between mb-2", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: "From" }) }),
5057
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
5361
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
5362
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border relative", style: { backgroundColor: "var(--compass-color-surface)", borderColor: "var(--compass-color-border)", borderRadius: "var(--compass-border-radius-xl)", fontFamily: "var(--compass-font-family)", padding: "var(--compass-spacing-card)" }, children: [
5363
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between", style: { marginBottom: "calc(var(--compass-spacing-unit) * 0.5)" }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: "From" }) }),
5364
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.75)" }, children: [
5058
5365
  /* @__PURE__ */ jsxRuntime.jsx(
5059
5366
  "input",
5060
5367
  {
@@ -5071,25 +5378,25 @@ function SwapWidget({
5071
5378
  {
5072
5379
  value: fromToken,
5073
5380
  onChange: (e) => setFromToken(e.target.value),
5074
- className: "px-3 py-2 rounded-lg border text-sm font-medium cursor-pointer flex-shrink-0",
5075
- style: { backgroundColor: "var(--compass-color-background)", borderColor: "var(--compass-color-border)", color: "var(--compass-color-text)" },
5381
+ className: "border text-sm font-medium cursor-pointer flex-shrink-0",
5382
+ style: { backgroundColor: "var(--compass-color-background)", borderColor: "var(--compass-color-border)", color: "var(--compass-color-text)", borderRadius: "var(--compass-border-radius-lg)", padding: "var(--compass-spacing-input)" },
5076
5383
  children: allowedTokens.filter((t) => t !== toToken).map((token) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: token, children: token }, token))
5077
5384
  }
5078
5385
  )
5079
5386
  ] })
5080
5387
  ] }),
5081
- showReverseButton && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center -my-1 relative z-10", children: /* @__PURE__ */ jsxRuntime.jsx(
5388
+ showReverseButton && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center relative z-10", style: { margin: "calc(var(--compass-spacing-unit) * -0.25) 0" }, children: /* @__PURE__ */ jsxRuntime.jsx(
5082
5389
  "button",
5083
5390
  {
5084
5391
  onClick: handleReverse,
5085
- className: "p-2 rounded-full border transition-colors hover:opacity-80",
5086
- style: { backgroundColor: "var(--compass-color-surface)", borderColor: "var(--compass-color-border)" },
5392
+ className: "border hover:opacity-80",
5393
+ style: { backgroundColor: "var(--compass-color-surface)", borderColor: "var(--compass-color-border)", borderRadius: "var(--compass-border-radius-full)", padding: "calc(var(--compass-spacing-unit) * 0.5)", transition: "var(--compass-transition-normal)" },
5087
5394
  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDownUp, { size: 16, style: { color: "var(--compass-color-text-secondary)" } })
5088
5395
  }
5089
5396
  ) }),
5090
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 rounded-xl border", style: { backgroundColor: "var(--compass-color-surface)", borderColor: "var(--compass-color-border)" }, children: [
5091
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between mb-2", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: "To" }) }),
5092
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
5397
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border", style: { backgroundColor: "var(--compass-color-surface)", borderColor: "var(--compass-color-border)", borderRadius: "var(--compass-border-radius-xl)", fontFamily: "var(--compass-font-family)", padding: "var(--compass-spacing-card)" }, children: [
5398
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between", style: { marginBottom: "calc(var(--compass-spacing-unit) * 0.5)" }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: "To" }) }),
5399
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.75)" }, children: [
5093
5400
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 text-2xl font-mono", style: { color: isQuoteLoading ? "var(--compass-color-text-tertiary)" : "var(--compass-color-text)" }, children: isQuoteLoading ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [
5094
5401
  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 16, className: "animate-spin" }),
5095
5402
  "Loading..."
@@ -5099,8 +5406,8 @@ function SwapWidget({
5099
5406
  {
5100
5407
  value: toToken,
5101
5408
  onChange: (e) => setToToken(e.target.value),
5102
- className: "px-3 py-2 rounded-lg border text-sm font-medium cursor-pointer",
5103
- style: { backgroundColor: "var(--compass-color-background)", borderColor: "var(--compass-color-border)", color: "var(--compass-color-text)" },
5409
+ className: "border text-sm font-medium cursor-pointer",
5410
+ style: { backgroundColor: "var(--compass-color-background)", borderColor: "var(--compass-color-border)", color: "var(--compass-color-text)", borderRadius: "var(--compass-border-radius-lg)", padding: "var(--compass-spacing-input)" },
5104
5411
  children: allowedTokens.filter((t) => t !== fromToken).map((token) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: token, children: token }, token))
5105
5412
  }
5106
5413
  )
@@ -5121,10 +5428,13 @@ function SwapWidget({
5121
5428
  quoteError && /* @__PURE__ */ jsxRuntime.jsxs(
5122
5429
  "div",
5123
5430
  {
5124
- className: "flex items-center gap-2 p-3 rounded-lg text-sm",
5431
+ className: "flex items-center text-sm",
5125
5432
  style: {
5126
5433
  backgroundColor: "var(--compass-color-error-muted)",
5127
- color: "var(--compass-color-error)"
5434
+ color: "var(--compass-color-error)",
5435
+ borderRadius: "var(--compass-border-radius-lg)",
5436
+ padding: "calc(var(--compass-spacing-unit) * 0.75)",
5437
+ gap: "calc(var(--compass-spacing-unit) * 0.5)"
5128
5438
  },
5129
5439
  children: [
5130
5440
  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { size: 16 }),
@@ -5135,10 +5445,13 @@ function SwapWidget({
5135
5445
  swapStatus && /* @__PURE__ */ jsxRuntime.jsxs(
5136
5446
  "div",
5137
5447
  {
5138
- className: "flex items-center gap-2 p-3 rounded-lg text-sm",
5448
+ className: "flex items-center text-sm",
5139
5449
  style: {
5140
5450
  backgroundColor: swapStatus.includes("successful") ? "var(--compass-color-success-muted)" : "var(--compass-color-surface)",
5141
- color: swapStatus.includes("successful") ? "var(--compass-color-success)" : "var(--compass-color-text-secondary)"
5451
+ color: swapStatus.includes("successful") ? "var(--compass-color-success)" : "var(--compass-color-text-secondary)",
5452
+ borderRadius: "var(--compass-border-radius-lg)",
5453
+ padding: "calc(var(--compass-spacing-unit) * 0.75)",
5454
+ gap: "calc(var(--compass-spacing-unit) * 0.5)"
5142
5455
  },
5143
5456
  children: [
5144
5457
  !swapStatus.includes("successful") && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 14, className: "animate-spin" }),
@@ -5149,10 +5462,14 @@ function SwapWidget({
5149
5462
  !isConnected ? /* @__PURE__ */ jsxRuntime.jsxs(
5150
5463
  "div",
5151
5464
  {
5152
- className: "flex flex-col items-center gap-3 py-6 px-4 rounded-lg",
5465
+ className: "flex flex-col items-center",
5153
5466
  style: {
5154
5467
  backgroundColor: "var(--compass-color-surface)",
5155
- border: "1px solid var(--compass-color-border)"
5468
+ border: "1px solid var(--compass-color-border)",
5469
+ borderRadius: "var(--compass-border-radius-lg)",
5470
+ fontFamily: "var(--compass-font-family)",
5471
+ padding: "calc(var(--compass-spacing-unit) * 1.5) var(--compass-spacing-card)",
5472
+ gap: "calc(var(--compass-spacing-unit) * 0.75)"
5156
5473
  },
5157
5474
  children: [
5158
5475
  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { size: 24, style: { color: "var(--compass-color-text-tertiary)" } }),
@@ -5171,8 +5488,16 @@ function SwapWidget({
5171
5488
  {
5172
5489
  onClick: handleSwap,
5173
5490
  disabled: isSwapping || !quote || !fromAmount || parseFloat(fromAmount) <= 0,
5174
- className: "w-full py-3 rounded-lg font-medium transition-colors flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed",
5175
- style: { backgroundColor: "var(--compass-color-primary)", color: "var(--compass-color-primary-text)" },
5491
+ className: "w-full font-medium flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed",
5492
+ style: {
5493
+ backgroundColor: "var(--compass-color-primary)",
5494
+ color: "var(--compass-color-primary-text)",
5495
+ borderRadius: "var(--compass-border-radius-lg)",
5496
+ fontFamily: "var(--compass-font-family)",
5497
+ padding: "calc(var(--compass-spacing-unit) * 0.75)",
5498
+ gap: "calc(var(--compass-spacing-unit) * 0.5)",
5499
+ transition: "var(--compass-transition-normal)"
5500
+ },
5176
5501
  children: [
5177
5502
  isSwapping && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 18, className: "animate-spin" }),
5178
5503
  isSwapping ? "Swapping..." : "Swap"
@@ -6170,22 +6495,31 @@ function CompassEarnWidget({
6170
6495
  setActiveTab(tab);
6171
6496
  onTabChange?.(tab);
6172
6497
  };
6173
- const showTabs = enabledTabs.length > 1;
6174
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
6175
- showHeader && /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "font-bold text-xl", style: { color: "var(--compass-color-text)" }, children: "Compass Earn" }),
6176
- showTabs && /* @__PURE__ */ jsxRuntime.jsx(
6498
+ enabledTabs.length > 1;
6499
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", style: { gap: "var(--compass-spacing-card)" }, children: [
6500
+ /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "font-bold text-xl", style: { color: "var(--compass-color-text)", fontFamily: "var(--compass-font-family)" }, children: "Compass Earn" }),
6501
+ /* @__PURE__ */ jsxRuntime.jsx(
6177
6502
  "div",
6178
6503
  {
6179
- className: "flex gap-1 p-1 rounded-lg",
6180
- style: { backgroundColor: "var(--compass-color-surface)" },
6181
- children: enabledTabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
6504
+ className: "flex",
6505
+ style: {
6506
+ backgroundColor: "var(--compass-color-surface)",
6507
+ borderRadius: "var(--compass-border-radius-lg)",
6508
+ fontFamily: "var(--compass-font-family)",
6509
+ padding: "calc(var(--compass-spacing-unit) * 0.25)",
6510
+ gap: "calc(var(--compass-spacing-unit) * 0.25)"
6511
+ },
6512
+ children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
6182
6513
  "button",
6183
6514
  {
6184
6515
  onClick: () => handleTabChange(tab.id),
6185
- className: "flex-1 py-2 px-3 rounded-md text-sm font-medium transition-all",
6516
+ className: "flex-1 text-sm font-medium",
6186
6517
  style: {
6187
6518
  backgroundColor: activeTab === tab.id ? "var(--compass-color-primary)" : "transparent",
6188
- color: activeTab === tab.id ? "var(--compass-color-primary-text)" : "var(--compass-color-text-secondary)"
6519
+ color: activeTab === tab.id ? "var(--compass-color-primary-text)" : "var(--compass-color-text-secondary)",
6520
+ borderRadius: "var(--compass-border-radius-md)",
6521
+ padding: "calc(var(--compass-spacing-unit) * 0.5) calc(var(--compass-spacing-unit) * 0.75)",
6522
+ transition: "var(--compass-transition-normal)"
6189
6523
  },
6190
6524
  children: tab.label
6191
6525
  },
@@ -6261,6 +6595,7 @@ exports.CHAINS = CHAINS;
6261
6595
  exports.ChainSwitcher = ChainSwitcher;
6262
6596
  exports.CompassEarnWidget = CompassEarnWidget;
6263
6597
  exports.CompassProvider = CompassProvider;
6598
+ exports.DEFAULT_SWAP_TOKENS = DEFAULT_SWAP_TOKENS;
6264
6599
  exports.DepositWithdrawForm = DepositWithdrawForm;
6265
6600
  exports.EarnAccount = EarnAccount;
6266
6601
  exports.EarnAccountBalance = EarnAccountBalance;