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