@hfunlabs/hypurr-connect 0.1.12 → 0.1.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -544,7 +544,10 @@ function HypurrConnectProvider({
544
544
  address: selectedWallet.ethereumAddress,
545
545
  walletId: selectedWallet.id,
546
546
  displayName: tgUser.telegramUsername ? `@${tgUser.telegramUsername}` : `Telegram ${tgUser.telegramId}`,
547
- photoUrl: tgUser.pictureFileId ? `${mediaUrl}/${tgUser.pictureFileId}` : void 0,
547
+ photoUrl: (() => {
548
+ const fileId = tgUser.pictureFileId;
549
+ return fileId ? `${mediaUrl}/${fileId}` : void 0;
550
+ })(),
548
551
  authMethod: "telegram",
549
552
  telegramId: String(tgUser.telegramId),
550
553
  hfunScore: tgUser?.reputation?.hfunScore,
@@ -860,6 +863,20 @@ function HypurrConnectProvider({
860
863
  },
861
864
  [tgClient, telegramRpcOptions, selectedWalletId, wallets, refreshWallets]
862
865
  );
866
+ const renameWallet = useCallback(
867
+ async (walletId, name) => {
868
+ await tgClient.hyperliquidWalletUpdate(
869
+ {
870
+ authData: {},
871
+ walletId,
872
+ name
873
+ },
874
+ telegramRpcOptions
875
+ );
876
+ refreshWallets();
877
+ },
878
+ [tgClient, telegramRpcOptions, refreshWallets]
879
+ );
863
880
  const createWalletPack = useCallback(
864
881
  async (name) => {
865
882
  const { response } = await tgClient.telegramChatWalletPackCreate(
@@ -1033,12 +1050,14 @@ function HypurrConnectProvider({
1033
1050
  const loginTelegram = useCallback(() => {
1034
1051
  const state = randomState();
1035
1052
  sessionStorage.setItem(TELEGRAM_AUTH_STATE_KEY, state);
1036
- const configuredReturnTo = config.telegram.returnTo;
1053
+ const configuredReturnTo = config.telegram?.returnTo;
1037
1054
  const returnTo = typeof configuredReturnTo === "function" ? configuredReturnTo() : configuredReturnTo || currentReturnTo();
1038
- const authUrl = new URL(config.telegram.authHubUrl || DEFAULT_AUTH_HUB_URL);
1055
+ const authUrl = new URL(
1056
+ config.telegram?.authHubUrl || DEFAULT_AUTH_HUB_URL
1057
+ );
1039
1058
  authUrl.searchParams.set("return_to", returnTo);
1040
1059
  authUrl.searchParams.set("state", state);
1041
- authUrl.searchParams.set("scope", normalizeScopes(config.telegram.scope));
1060
+ authUrl.searchParams.set("scope", normalizeScopes(config.telegram?.scope));
1042
1061
  const width = 520;
1043
1062
  const height = 720;
1044
1063
  const left = window.screenX + Math.max(0, (window.outerWidth - width) / 2);
@@ -1061,9 +1080,9 @@ function HypurrConnectProvider({
1061
1080
  }
1062
1081
  window.location.assign(authUrl.toString());
1063
1082
  }, [
1064
- config.telegram.authHubUrl,
1065
- config.telegram.returnTo,
1066
- config.telegram.scope
1083
+ config.telegram?.authHubUrl,
1084
+ config.telegram?.returnTo,
1085
+ config.telegram?.scope
1067
1086
  ]);
1068
1087
  const connectEoa = useCallback(
1069
1088
  (address, signer) => {
@@ -1201,6 +1220,7 @@ function HypurrConnectProvider({
1201
1220
  selectWallet,
1202
1221
  createWallet,
1203
1222
  deleteWallet,
1223
+ renameWallet,
1204
1224
  refreshWallets,
1205
1225
  packs,
1206
1226
  createWalletPack,
@@ -1223,9 +1243,6 @@ function HypurrConnectProvider({
1223
1243
  agent,
1224
1244
  agentReady,
1225
1245
  clearAgent: handleClearAgent,
1226
- botId: config.telegram?.botId ?? "",
1227
- botUsername: config.telegram?.botUsername ?? "",
1228
- useWidget: config.telegram?.useWidget ?? false,
1229
1246
  authDataMap,
1230
1247
  authToken: tgAuthToken,
1231
1248
  telegramRpcOptions,
@@ -1245,6 +1262,7 @@ function HypurrConnectProvider({
1245
1262
  selectWallet,
1246
1263
  createWallet,
1247
1264
  deleteWallet,
1265
+ renameWallet,
1248
1266
  refreshWallets,
1249
1267
  packs,
1250
1268
  createWalletPack,
@@ -1267,9 +1285,6 @@ function HypurrConnectProvider({
1267
1285
  agent,
1268
1286
  agentReady,
1269
1287
  handleClearAgent,
1270
- config.telegram?.botId,
1271
- config.telegram?.botUsername,
1272
- config.telegram?.useWidget,
1273
1288
  authDataMap,
1274
1289
  tgAuthToken,
1275
1290
  telegramRpcOptions,
@@ -1421,6 +1436,7 @@ function TelegramColorIcon({ style }) {
1421
1436
  // src/LoginModal.tsx
1422
1437
  import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
1423
1438
  var MOBILE_BREAKPOINT = 640;
1439
+ var DEFAULT_BACKGROUND_COLOR = "rgba(20,20,20,0.95)";
1424
1440
  var btnStyle = {
1425
1441
  display: "flex",
1426
1442
  height: 53,
@@ -1466,7 +1482,6 @@ var modalBoxStyle = {
1466
1482
  overflow: "hidden",
1467
1483
  borderRadius: 12,
1468
1484
  border: "1px solid rgba(255,255,255,0.1)",
1469
- background: "#282828",
1470
1485
  padding: 24
1471
1486
  };
1472
1487
  var headingStyle = {
@@ -1508,7 +1523,11 @@ function HoverButton({
1508
1523
  }
1509
1524
  );
1510
1525
  }
1511
- function LoginModal({ onConnectWallet, walletIcon }) {
1526
+ function LoginModal({
1527
+ onConnectWallet,
1528
+ walletIcon,
1529
+ backgroundColor = DEFAULT_BACKGROUND_COLOR
1530
+ }) {
1512
1531
  const { loginTelegram, loginModalOpen, closeLoginModal } = useHypurrConnectInternal();
1513
1532
  const handleTelegramAuth = useCallback2(() => {
1514
1533
  closeLoginModal();
@@ -1548,7 +1567,15 @@ function LoginModal({ onConnectWallet, walletIcon }) {
1548
1567
  }
1549
1568
  )
1550
1569
  ] });
1551
- return /* @__PURE__ */ jsx4(AnimatePresence, { children: loginModalOpen && (isMobile ? /* @__PURE__ */ jsx4(MobileDrawer, { onClose: closeLoginModal, children: modalContent }, "drawer") : /* @__PURE__ */ jsxs3(Fragment, { children: [
1570
+ return /* @__PURE__ */ jsx4(AnimatePresence, { children: loginModalOpen && (isMobile ? /* @__PURE__ */ jsx4(
1571
+ MobileDrawer,
1572
+ {
1573
+ onClose: closeLoginModal,
1574
+ backgroundColor,
1575
+ children: modalContent
1576
+ },
1577
+ "drawer"
1578
+ ) : /* @__PURE__ */ jsxs3(Fragment, { children: [
1552
1579
  /* @__PURE__ */ jsx4(
1553
1580
  motion.div,
1554
1581
  {
@@ -1573,7 +1600,7 @@ function LoginModal({ onConnectWallet, walletIcon }) {
1573
1600
  children: /* @__PURE__ */ jsxs3(
1574
1601
  motion.div,
1575
1602
  {
1576
- style: modalBoxStyle,
1603
+ style: { ...modalBoxStyle, background: backgroundColor },
1577
1604
  initial: { scale: 0.96, opacity: 0, y: 8 },
1578
1605
  animate: { scale: 1, opacity: 1, y: 0 },
1579
1606
  exit: { scale: 0.96, opacity: 0, y: 8 },
@@ -1605,7 +1632,6 @@ var drawerSheetStyle = {
1605
1632
  borderLeft: "1px solid rgba(255,255,255,0.1)",
1606
1633
  borderRight: "1px solid rgba(255,255,255,0.1)",
1607
1634
  borderTop: "1px solid rgba(255,255,255,0.1)",
1608
- background: "#282828",
1609
1635
  padding: "12px 24px max(24px, env(safe-area-inset-bottom))"
1610
1636
  };
1611
1637
  var drawerBgStyle = {
@@ -1615,7 +1641,6 @@ var drawerBgStyle = {
1615
1641
  top: 0,
1616
1642
  bottom: "-100vh",
1617
1643
  zIndex: -1,
1618
- background: "#282828",
1619
1644
  borderTopLeftRadius: 12,
1620
1645
  borderTopRightRadius: 12
1621
1646
  };
@@ -1633,7 +1658,8 @@ var grabHandleStyle = {
1633
1658
  };
1634
1659
  function MobileDrawer({
1635
1660
  children,
1636
- onClose
1661
+ onClose,
1662
+ backgroundColor
1637
1663
  }) {
1638
1664
  const controls = useAnimationControls();
1639
1665
  const handleDragEnd = useCallback2(
@@ -1662,7 +1688,7 @@ function MobileDrawer({
1662
1688
  /* @__PURE__ */ jsxs3(
1663
1689
  motion.div,
1664
1690
  {
1665
- style: drawerSheetStyle,
1691
+ style: { ...drawerSheetStyle, background: backgroundColor },
1666
1692
  initial: { y: "100%" },
1667
1693
  animate: { y: 0 },
1668
1694
  exit: { y: "100%" },
@@ -1672,7 +1698,7 @@ function MobileDrawer({
1672
1698
  dragElastic: { top: 0, bottom: 0.4 },
1673
1699
  onDragEnd: handleDragEnd,
1674
1700
  children: [
1675
- /* @__PURE__ */ jsx4("div", { style: drawerBgStyle }),
1701
+ /* @__PURE__ */ jsx4("div", { style: { ...drawerBgStyle, background: backgroundColor } }),
1676
1702
  /* @__PURE__ */ jsx4("div", { style: grabHandleAreaStyle, children: /* @__PURE__ */ jsx4("div", { style: grabHandleStyle }) }),
1677
1703
  /* @__PURE__ */ jsx4("p", { style: headingStyle, children: "Connect" }),
1678
1704
  children
@@ -1683,6 +1709,2544 @@ function MobileDrawer({
1683
1709
  ] });
1684
1710
  }
1685
1711
 
1712
+ // src/WalletSelectorDropdown.tsx
1713
+ import { AnimatePresence as AnimatePresence5, motion as motion5 } from "framer-motion";
1714
+ import {
1715
+ Fragment as Fragment5,
1716
+ useCallback as useCallback6,
1717
+ useMemo as useMemo2,
1718
+ useState as useState5
1719
+ } from "react";
1720
+
1721
+ // src/UserProfileModal.tsx
1722
+ import { AnimatePresence as AnimatePresence4, motion as motion4 } from "framer-motion";
1723
+ import {
1724
+ useCallback as useCallback5,
1725
+ useState as useState4
1726
+ } from "react";
1727
+
1728
+ // src/DeleteWalletModal.tsx
1729
+ import { AnimatePresence as AnimatePresence2, motion as motion2 } from "framer-motion";
1730
+ import {
1731
+ useCallback as useCallback3,
1732
+ useState as useState2
1733
+ } from "react";
1734
+
1735
+ // src/icons/lucide.tsx
1736
+ import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
1737
+ function svgBase({
1738
+ size = 16,
1739
+ color = "currentColor",
1740
+ fill = "none",
1741
+ ...rest
1742
+ }) {
1743
+ return {
1744
+ width: size,
1745
+ height: size,
1746
+ viewBox: "0 0 24 24",
1747
+ fill,
1748
+ stroke: color,
1749
+ strokeWidth: 2,
1750
+ strokeLinecap: "round",
1751
+ strokeLinejoin: "round",
1752
+ ...rest
1753
+ };
1754
+ }
1755
+ function Copy(props) {
1756
+ return /* @__PURE__ */ jsxs4("svg", { ...svgBase(props), children: [
1757
+ /* @__PURE__ */ jsx5("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
1758
+ /* @__PURE__ */ jsx5("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
1759
+ ] });
1760
+ }
1761
+ function Star(props) {
1762
+ return /* @__PURE__ */ jsx5("svg", { ...svgBase(props), children: /* @__PURE__ */ jsx5("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" }) });
1763
+ }
1764
+ function User(props) {
1765
+ return /* @__PURE__ */ jsxs4("svg", { ...svgBase(props), children: [
1766
+ /* @__PURE__ */ jsx5("path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }),
1767
+ /* @__PURE__ */ jsx5("circle", { cx: "12", cy: "7", r: "4" })
1768
+ ] });
1769
+ }
1770
+ function Zap(props) {
1771
+ return /* @__PURE__ */ jsx5("svg", { ...svgBase(props), children: /* @__PURE__ */ jsx5("polygon", { points: "13 2 3 14 12 14 11 22 21 10 12 10 13 2" }) });
1772
+ }
1773
+ function Wallet(props) {
1774
+ return /* @__PURE__ */ jsxs4("svg", { ...svgBase(props), children: [
1775
+ /* @__PURE__ */ jsx5("path", { d: "M20 12V8H6a2 2 0 0 1-2-2c0-1.1.9-2 2-2h12v4" }),
1776
+ /* @__PURE__ */ jsx5("path", { d: "M4 6v12c0 1.1.9 2 2 2h14v-4" }),
1777
+ /* @__PURE__ */ jsx5("path", { d: "M18 12a2 2 0 0 0-2 2c0 1.1.9 2 2 2h4v-4z" })
1778
+ ] });
1779
+ }
1780
+ function TrendingUp(props) {
1781
+ return /* @__PURE__ */ jsxs4("svg", { ...svgBase(props), children: [
1782
+ /* @__PURE__ */ jsx5("polyline", { points: "22 7 13.5 15.5 8.5 10.5 2 17" }),
1783
+ /* @__PURE__ */ jsx5("polyline", { points: "16 7 22 7 22 13" })
1784
+ ] });
1785
+ }
1786
+ function Trash2(props) {
1787
+ return /* @__PURE__ */ jsxs4("svg", { ...svgBase(props), children: [
1788
+ /* @__PURE__ */ jsx5("path", { d: "M3 6h18" }),
1789
+ /* @__PURE__ */ jsx5("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" }),
1790
+ /* @__PURE__ */ jsx5("path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" }),
1791
+ /* @__PURE__ */ jsx5("line", { x1: "10", x2: "10", y1: "11", y2: "17" }),
1792
+ /* @__PURE__ */ jsx5("line", { x1: "14", x2: "14", y1: "11", y2: "17" })
1793
+ ] });
1794
+ }
1795
+ function Pencil(props) {
1796
+ return /* @__PURE__ */ jsxs4("svg", { ...svgBase(props), children: [
1797
+ /* @__PURE__ */ jsx5("path", { d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" }),
1798
+ /* @__PURE__ */ jsx5("path", { d: "m15 5 4 4" })
1799
+ ] });
1800
+ }
1801
+ function LayoutDashboard(props) {
1802
+ return /* @__PURE__ */ jsxs4("svg", { ...svgBase(props), children: [
1803
+ /* @__PURE__ */ jsx5("rect", { width: "7", height: "9", x: "3", y: "3", rx: "1" }),
1804
+ /* @__PURE__ */ jsx5("rect", { width: "7", height: "5", x: "14", y: "3", rx: "1" }),
1805
+ /* @__PURE__ */ jsx5("rect", { width: "7", height: "9", x: "14", y: "12", rx: "1" }),
1806
+ /* @__PURE__ */ jsx5("rect", { width: "7", height: "5", x: "3", y: "16", rx: "1" })
1807
+ ] });
1808
+ }
1809
+ function AlertTriangle(props) {
1810
+ return /* @__PURE__ */ jsxs4("svg", { ...svgBase(props), children: [
1811
+ /* @__PURE__ */ jsx5("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }),
1812
+ /* @__PURE__ */ jsx5("line", { x1: "12", x2: "12", y1: "9", y2: "13" }),
1813
+ /* @__PURE__ */ jsx5("line", { x1: "12", x2: "12.01", y1: "17", y2: "17" })
1814
+ ] });
1815
+ }
1816
+ function Loader2(props) {
1817
+ const { size = 16, color = "currentColor", style, ...rest } = props;
1818
+ return /* @__PURE__ */ jsx5(
1819
+ "svg",
1820
+ {
1821
+ width: size,
1822
+ height: size,
1823
+ viewBox: "0 0 24 24",
1824
+ fill: "none",
1825
+ stroke: color,
1826
+ strokeWidth: 2,
1827
+ strokeLinecap: "round",
1828
+ strokeLinejoin: "round",
1829
+ style: {
1830
+ animation: "hypurr-spin 1s linear infinite",
1831
+ ...style
1832
+ },
1833
+ ...rest,
1834
+ children: /* @__PURE__ */ jsx5("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
1835
+ }
1836
+ );
1837
+ }
1838
+ function Crown(props) {
1839
+ return /* @__PURE__ */ jsxs4("svg", { ...svgBase(props), children: [
1840
+ /* @__PURE__ */ jsx5("path", { d: "M11.562 3.266a.5.5 0 0 1 .876 0L15.39 8.87a1 1 0 0 0 1.516.294L21.183 5.5a.5.5 0 0 1 .798.519l-2.834 10.246a1 1 0 0 1-.956.734H5.81a1 1 0 0 1-.957-.734L2.02 6.02a.5.5 0 0 1 .798-.519l4.276 3.664a1 1 0 0 0 1.516-.294z" }),
1841
+ /* @__PURE__ */ jsx5("path", { d: "M5 21h14" })
1842
+ ] });
1843
+ }
1844
+ function Folder(props) {
1845
+ return /* @__PURE__ */ jsx5("svg", { ...svgBase(props), children: /* @__PURE__ */ jsx5("path", { d: "M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" }) });
1846
+ }
1847
+ function LogOut(props) {
1848
+ return /* @__PURE__ */ jsxs4("svg", { ...svgBase(props), children: [
1849
+ /* @__PURE__ */ jsx5("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }),
1850
+ /* @__PURE__ */ jsx5("polyline", { points: "16 17 21 12 16 7" }),
1851
+ /* @__PURE__ */ jsx5("line", { x1: "21", x2: "9", y1: "12", y2: "12" })
1852
+ ] });
1853
+ }
1854
+ function Plus(props) {
1855
+ return /* @__PURE__ */ jsxs4("svg", { ...svgBase(props), children: [
1856
+ /* @__PURE__ */ jsx5("path", { d: "M5 12h14" }),
1857
+ /* @__PURE__ */ jsx5("path", { d: "M12 5v14" })
1858
+ ] });
1859
+ }
1860
+ function X(props) {
1861
+ return /* @__PURE__ */ jsxs4("svg", { ...svgBase(props), children: [
1862
+ /* @__PURE__ */ jsx5("path", { d: "M18 6 6 18" }),
1863
+ /* @__PURE__ */ jsx5("path", { d: "m6 6 12 12" })
1864
+ ] });
1865
+ }
1866
+ function SpinKeyframes() {
1867
+ return /* @__PURE__ */ jsx5("style", { children: `@keyframes hypurr-spin { to { transform: rotate(360deg); } }` });
1868
+ }
1869
+
1870
+ // src/profileStyles.ts
1871
+ var profileColors = {
1872
+ accent: "#a855f7",
1873
+ panel: "rgba(14,18,24,0.8)",
1874
+ panelSolid: "#0e1218",
1875
+ backdrop: "rgba(0,0,0,0.7)",
1876
+ border: "#1f2937",
1877
+ surfaceBtn: "#0D1219",
1878
+ surfaceBtnHover: "#15171A",
1879
+ surfaceBtnActive: "#1E2124",
1880
+ surfaceBd: "#262A30",
1881
+ surfaceBdHover: "#444548",
1882
+ surfaceBdActive: "#4B4D50",
1883
+ text: "#ffffff",
1884
+ muted: "#aab1c1",
1885
+ subdued: "#7d8597",
1886
+ disabled: "#4b5563",
1887
+ danger: "#f87171",
1888
+ dangerStrong: "#ef4444",
1889
+ purple: "#d8b4fe",
1890
+ yellow: "#eab308"
1891
+ };
1892
+ var fontFamily = {
1893
+ sans: "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif",
1894
+ mono: "Google Sans Code, Roboto Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace"
1895
+ };
1896
+ var colorWithAlpha = (color, alpha) => {
1897
+ const hex = color.trim();
1898
+ const shortHex = /^#([0-9a-f]{3})$/i.exec(hex);
1899
+ const longHex = /^#([0-9a-f]{6})$/i.exec(hex);
1900
+ if (shortHex) {
1901
+ const [r, g, b] = shortHex[1].split("").map((value) => value + value);
1902
+ return `rgba(${parseInt(r, 16)},${parseInt(g, 16)},${parseInt(b, 16)},${alpha})`;
1903
+ }
1904
+ if (longHex) {
1905
+ const value = longHex[1];
1906
+ return `rgba(${parseInt(value.slice(0, 2), 16)},${parseInt(
1907
+ value.slice(2, 4),
1908
+ 16
1909
+ )},${parseInt(value.slice(4, 6), 16)},${alpha})`;
1910
+ }
1911
+ return `color-mix(in srgb, ${color} ${Math.round(alpha * 100)}%, transparent)`;
1912
+ };
1913
+ var resolvePrincipalColors = (accentColor, overrides = {}) => {
1914
+ const hasCustomAccent = !!accentColor || !!overrides.accent;
1915
+ const accent = overrides.accent ?? accentColor ?? profileColors.accent;
1916
+ const accentText = overrides.accentText ?? (hasCustomAccent ? accent : profileColors.purple);
1917
+ return {
1918
+ accent,
1919
+ accentText,
1920
+ accentBackground: overrides.accentBackground ?? colorWithAlpha(accent, 0.1),
1921
+ accentBorder: overrides.accentBorder ?? colorWithAlpha(accent, 0.25),
1922
+ accentHoverBackground: overrides.accentHoverBackground ?? colorWithAlpha(accent, 0.1)
1923
+ };
1924
+ };
1925
+ var modalBackdropStyle = (zIndex) => ({
1926
+ position: "fixed",
1927
+ inset: 0,
1928
+ zIndex,
1929
+ background: profileColors.backdrop,
1930
+ backdropFilter: "blur(4px)",
1931
+ WebkitBackdropFilter: "blur(4px)"
1932
+ });
1933
+ var modalWrapperStyle2 = (zIndex, padding = 0) => ({
1934
+ position: "fixed",
1935
+ inset: 0,
1936
+ zIndex,
1937
+ display: "flex",
1938
+ alignItems: "center",
1939
+ justifyContent: "center",
1940
+ padding
1941
+ });
1942
+ var modalPanelStyle = (solid = false) => ({
1943
+ position: "relative",
1944
+ width: "100%",
1945
+ maxWidth: 448,
1946
+ background: solid ? profileColors.panelSolid : profileColors.panel,
1947
+ backdropFilter: solid ? void 0 : "blur(10px)",
1948
+ WebkitBackdropFilter: solid ? void 0 : "blur(10px)",
1949
+ border: `1px solid ${profileColors.border}`,
1950
+ borderRadius: 8,
1951
+ boxShadow: "0 25px 50px -12px rgba(0,0,0,0.6)",
1952
+ overflow: "hidden",
1953
+ fontFamily: fontFamily.sans
1954
+ });
1955
+ var modalHeaderStyle = {
1956
+ position: "relative",
1957
+ display: "flex",
1958
+ alignItems: "center",
1959
+ justifyContent: "center",
1960
+ padding: "24px 24px 20px",
1961
+ borderBottom: `1px solid ${profileColors.border}`
1962
+ };
1963
+ var titleStyle = {
1964
+ margin: 0,
1965
+ fontSize: 14,
1966
+ lineHeight: "1.25rem",
1967
+ fontWeight: 600,
1968
+ color: profileColors.text
1969
+ };
1970
+ var closeBtnStyle = (disabled = false) => ({
1971
+ position: "absolute",
1972
+ right: 24,
1973
+ background: "transparent",
1974
+ border: "none",
1975
+ color: profileColors.muted,
1976
+ cursor: disabled ? "not-allowed" : "pointer",
1977
+ padding: 0,
1978
+ display: "flex",
1979
+ opacity: disabled ? 0.4 : 1,
1980
+ transition: "color 150ms"
1981
+ });
1982
+ var upperLabelStyle = {
1983
+ fontSize: 11,
1984
+ lineHeight: "1rem",
1985
+ fontWeight: 500,
1986
+ textTransform: "uppercase",
1987
+ letterSpacing: "0.1em"
1988
+ };
1989
+ var raisedButtonStyle = (state = "default") => {
1990
+ if (state === "active") {
1991
+ return {
1992
+ backgroundColor: profileColors.surfaceBtnActive,
1993
+ backgroundImage: "linear-gradient(to bottom, rgba(255,255,255,0.05), transparent)",
1994
+ boxShadow: "inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.45), inset 0 0 0 1px #4B4D50, 0 1px 2px rgba(0,0,0,0.5)",
1995
+ color: profileColors.text,
1996
+ border: "none"
1997
+ };
1998
+ }
1999
+ if (state === "disabled") {
2000
+ return {
2001
+ backgroundColor: profileColors.surfaceBtn,
2002
+ backgroundImage: "linear-gradient(to bottom, rgba(255,255,255,0.02), transparent)",
2003
+ boxShadow: "inset 0 1px 0 rgba(255,255,255,0.05), inset 0 -1px 0 rgba(0,0,0,0.25), inset 0 0 0 1px #1c2026",
2004
+ color: profileColors.subdued,
2005
+ border: "none",
2006
+ cursor: "not-allowed"
2007
+ };
2008
+ }
2009
+ if (state === "hover") {
2010
+ return {
2011
+ backgroundColor: profileColors.surfaceBtnHover,
2012
+ backgroundImage: "linear-gradient(to bottom, rgba(255,255,255,0.04), transparent)",
2013
+ boxShadow: "inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(0,0,0,0.40), inset 0 0 0 1px #444548",
2014
+ color: "#d1d5db",
2015
+ border: "none"
2016
+ };
2017
+ }
2018
+ return {
2019
+ backgroundColor: profileColors.surfaceBtn,
2020
+ backgroundImage: "linear-gradient(to bottom, rgba(255,255,255,0.03), transparent)",
2021
+ boxShadow: "inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -1px 0 rgba(0,0,0,0.35), inset 0 0 0 1px #262A30",
2022
+ color: profileColors.muted,
2023
+ border: "none"
2024
+ };
2025
+ };
2026
+ var dangerOutlineButtonStyle = (enabled, hovered = false) => ({
2027
+ background: enabled && hovered ? "rgba(248,113,113,0.1)" : "transparent",
2028
+ border: `1px solid ${enabled ? profileColors.danger : "#374151"}`,
2029
+ color: enabled ? profileColors.danger : profileColors.disabled,
2030
+ cursor: enabled ? "pointer" : "not-allowed"
2031
+ });
2032
+
2033
+ // src/DeleteWalletModal.tsx
2034
+ import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
2035
+ var DANGER_BG = "rgba(248,113,113,0.07)";
2036
+ var DANGER_BORDER = "rgba(248,113,113,0.2)";
2037
+ var backdropStyle2 = modalBackdropStyle(110);
2038
+ var wrapperStyle = modalWrapperStyle2(111, 16);
2039
+ var panelStyle = {
2040
+ ...modalPanelStyle(true),
2041
+ border: `1px solid ${profileColors.surfaceBd}`
2042
+ };
2043
+ var headerStyle = {
2044
+ ...modalHeaderStyle,
2045
+ borderBottom: "1px solid rgba(255,255,255,0.06)"
2046
+ };
2047
+ var bodyStyle = {
2048
+ padding: "20px 24px",
2049
+ display: "flex",
2050
+ flexDirection: "column",
2051
+ gap: 16
2052
+ };
2053
+ var warningBoxStyle = {
2054
+ display: "flex",
2055
+ alignItems: "flex-start",
2056
+ gap: 12,
2057
+ padding: 14,
2058
+ background: DANGER_BG,
2059
+ border: `1px solid ${DANGER_BORDER}`,
2060
+ borderRadius: 8
2061
+ };
2062
+ var infoBoxStyle = {
2063
+ padding: "10px 12px",
2064
+ background: "rgba(255,255,255,0.03)",
2065
+ border: "1px solid rgba(255,255,255,0.06)",
2066
+ borderRadius: 8
2067
+ };
2068
+ var labelStyle = {
2069
+ display: "block",
2070
+ fontSize: 12.5,
2071
+ lineHeight: "1rem",
2072
+ color: profileColors.muted,
2073
+ marginBottom: 8
2074
+ };
2075
+ var inputStyle = (disabled) => ({
2076
+ width: "100%",
2077
+ background: "rgba(13,18,25,0.9)",
2078
+ border: `1px solid ${profileColors.surfaceBd}`,
2079
+ borderRadius: 8,
2080
+ padding: "10px 12px",
2081
+ color: profileColors.text,
2082
+ fontFamily: fontFamily.mono,
2083
+ fontSize: 12.5,
2084
+ lineHeight: "1rem",
2085
+ outline: "none",
2086
+ opacity: disabled ? 0.5 : 1,
2087
+ boxSizing: "border-box",
2088
+ transition: "border-color 150ms, background-color 150ms"
2089
+ });
2090
+ var footerStyle = {
2091
+ padding: "0 24px 24px"
2092
+ };
2093
+ var deleteButtonStyle = (enabled, hovered) => ({
2094
+ ...dangerOutlineButtonStyle(enabled, hovered),
2095
+ width: "100%",
2096
+ padding: "8px 0",
2097
+ borderRadius: 8,
2098
+ fontSize: 12.5,
2099
+ lineHeight: "1rem",
2100
+ fontWeight: 500,
2101
+ display: "flex",
2102
+ alignItems: "center",
2103
+ justifyContent: "center",
2104
+ gap: 8,
2105
+ transition: "background-color 150ms, color 150ms, border-color 150ms"
2106
+ });
2107
+ function DeleteWalletModal({
2108
+ isOpen,
2109
+ onClose,
2110
+ wallet,
2111
+ onConfirm,
2112
+ onNotify
2113
+ }) {
2114
+ const [confirmName, setConfirmName] = useState2("");
2115
+ const [isDeleting, setIsDeleting] = useState2(false);
2116
+ const [error, setError] = useState2(null);
2117
+ const [deleteHovered, setDeleteHovered] = useState2(false);
2118
+ const walletName = wallet?.name || "Unnamed Wallet";
2119
+ const isNameMatch = confirmName === walletName;
2120
+ const canDelete = isNameMatch && !isDeleting;
2121
+ const handleClose = useCallback3(() => {
2122
+ if (isDeleting) return;
2123
+ setConfirmName("");
2124
+ setError(null);
2125
+ onClose();
2126
+ }, [isDeleting, onClose]);
2127
+ const handleDelete = useCallback3(async () => {
2128
+ if (!wallet || !isNameMatch) return;
2129
+ setError(null);
2130
+ setIsDeleting(true);
2131
+ try {
2132
+ await onConfirm(wallet.id);
2133
+ setConfirmName("");
2134
+ onNotify?.({ type: "success", message: "Wallet deleted successfully" });
2135
+ onClose();
2136
+ } catch (e) {
2137
+ setError(e instanceof Error ? e.message : "Failed to delete wallet");
2138
+ } finally {
2139
+ setIsDeleting(false);
2140
+ }
2141
+ }, [wallet, isNameMatch, onConfirm, onClose, onNotify]);
2142
+ return /* @__PURE__ */ jsx6(AnimatePresence2, { children: isOpen && wallet && /* @__PURE__ */ jsxs5(Fragment2, { children: [
2143
+ /* @__PURE__ */ jsx6(SpinKeyframes, {}),
2144
+ /* @__PURE__ */ jsx6(
2145
+ motion2.div,
2146
+ {
2147
+ style: backdropStyle2,
2148
+ initial: { opacity: 0 },
2149
+ animate: { opacity: 1 },
2150
+ exit: { opacity: 0 },
2151
+ transition: { duration: 0.15 },
2152
+ onClick: handleClose
2153
+ },
2154
+ "backdrop"
2155
+ ),
2156
+ /* @__PURE__ */ jsx6("div", { style: wrapperStyle, children: /* @__PURE__ */ jsxs5(
2157
+ motion2.div,
2158
+ {
2159
+ style: panelStyle,
2160
+ initial: { opacity: 0, y: 8 },
2161
+ animate: { opacity: 1, y: 0 },
2162
+ exit: { opacity: 0, y: 8 },
2163
+ transition: { duration: 0.18, ease: "easeOut" },
2164
+ onClick: (e) => e.stopPropagation(),
2165
+ children: [
2166
+ /* @__PURE__ */ jsxs5("div", { style: headerStyle, children: [
2167
+ /* @__PURE__ */ jsx6("h3", { style: titleStyle, children: "Delete Wallet" }),
2168
+ /* @__PURE__ */ jsx6(
2169
+ "button",
2170
+ {
2171
+ onClick: handleClose,
2172
+ disabled: isDeleting,
2173
+ style: closeBtnStyle(isDeleting),
2174
+ "aria-label": "Close",
2175
+ children: /* @__PURE__ */ jsx6(X, { size: 16 })
2176
+ }
2177
+ )
2178
+ ] }),
2179
+ /* @__PURE__ */ jsxs5("div", { style: bodyStyle, children: [
2180
+ /* @__PURE__ */ jsxs5("div", { style: warningBoxStyle, children: [
2181
+ /* @__PURE__ */ jsx6(
2182
+ AlertTriangle,
2183
+ {
2184
+ size: 15,
2185
+ color: profileColors.danger,
2186
+ style: { flexShrink: 0, marginTop: 2 }
2187
+ }
2188
+ ),
2189
+ /* @__PURE__ */ jsxs5("div", { children: [
2190
+ /* @__PURE__ */ jsx6(
2191
+ "p",
2192
+ {
2193
+ style: {
2194
+ margin: 0,
2195
+ fontSize: 12.5,
2196
+ lineHeight: "1rem",
2197
+ color: profileColors.danger,
2198
+ fontWeight: 500
2199
+ },
2200
+ children: "This action cannot be undone"
2201
+ }
2202
+ ),
2203
+ /* @__PURE__ */ jsx6(
2204
+ "p",
2205
+ {
2206
+ style: {
2207
+ margin: "2px 0 0",
2208
+ fontSize: 12.5,
2209
+ lineHeight: "1rem",
2210
+ color: "rgba(248,113,113,0.7)"
2211
+ },
2212
+ children: "The private key will be permanently deleted. Any remaining funds will be inaccessible."
2213
+ }
2214
+ )
2215
+ ] })
2216
+ ] }),
2217
+ /* @__PURE__ */ jsxs5("div", { style: infoBoxStyle, children: [
2218
+ /* @__PURE__ */ jsx6(
2219
+ "p",
2220
+ {
2221
+ style: {
2222
+ margin: "0 0 4px",
2223
+ color: profileColors.muted,
2224
+ ...upperLabelStyle
2225
+ },
2226
+ children: "Wallet to delete"
2227
+ }
2228
+ ),
2229
+ /* @__PURE__ */ jsx6(
2230
+ "p",
2231
+ {
2232
+ style: {
2233
+ margin: 0,
2234
+ fontSize: 12.5,
2235
+ lineHeight: "1rem",
2236
+ fontWeight: 500,
2237
+ color: profileColors.text
2238
+ },
2239
+ children: walletName
2240
+ }
2241
+ ),
2242
+ /* @__PURE__ */ jsx6(
2243
+ "p",
2244
+ {
2245
+ style: {
2246
+ margin: "2px 0 0",
2247
+ fontSize: 12.5,
2248
+ lineHeight: "1rem",
2249
+ color: profileColors.muted,
2250
+ fontFamily: fontFamily.mono,
2251
+ wordBreak: "break-all"
2252
+ },
2253
+ children: wallet.ethereumAddress
2254
+ }
2255
+ )
2256
+ ] }),
2257
+ /* @__PURE__ */ jsxs5("div", { children: [
2258
+ /* @__PURE__ */ jsxs5("label", { style: labelStyle, children: [
2259
+ "Type",
2260
+ " ",
2261
+ /* @__PURE__ */ jsxs5(
2262
+ "span",
2263
+ {
2264
+ style: {
2265
+ color: profileColors.text,
2266
+ fontWeight: 500
2267
+ },
2268
+ children: [
2269
+ '"',
2270
+ walletName,
2271
+ '"'
2272
+ ]
2273
+ }
2274
+ ),
2275
+ " ",
2276
+ "to confirm"
2277
+ ] }),
2278
+ /* @__PURE__ */ jsx6(
2279
+ "input",
2280
+ {
2281
+ type: "text",
2282
+ value: confirmName,
2283
+ onChange: (e) => setConfirmName(e.target.value),
2284
+ placeholder: walletName,
2285
+ disabled: isDeleting,
2286
+ style: inputStyle(isDeleting)
2287
+ }
2288
+ )
2289
+ ] }),
2290
+ error && /* @__PURE__ */ jsxs5(
2291
+ "div",
2292
+ {
2293
+ style: {
2294
+ display: "flex",
2295
+ alignItems: "flex-start",
2296
+ gap: 8,
2297
+ padding: 12,
2298
+ background: "rgba(248,113,113,0.08)",
2299
+ border: `1px solid ${DANGER_BORDER}`,
2300
+ borderRadius: 8
2301
+ },
2302
+ children: [
2303
+ /* @__PURE__ */ jsx6(
2304
+ AlertTriangle,
2305
+ {
2306
+ size: 14,
2307
+ color: profileColors.danger,
2308
+ style: { flexShrink: 0, marginTop: 2 }
2309
+ }
2310
+ ),
2311
+ /* @__PURE__ */ jsx6(
2312
+ "p",
2313
+ {
2314
+ style: {
2315
+ margin: 0,
2316
+ fontSize: 12.5,
2317
+ lineHeight: "1rem",
2318
+ color: profileColors.danger
2319
+ },
2320
+ children: error
2321
+ }
2322
+ )
2323
+ ]
2324
+ }
2325
+ )
2326
+ ] }),
2327
+ /* @__PURE__ */ jsx6("div", { style: footerStyle, children: /* @__PURE__ */ jsx6(
2328
+ "button",
2329
+ {
2330
+ onClick: handleDelete,
2331
+ disabled: !canDelete,
2332
+ onMouseEnter: () => setDeleteHovered(true),
2333
+ onMouseLeave: () => setDeleteHovered(false),
2334
+ style: deleteButtonStyle(canDelete, deleteHovered),
2335
+ children: isDeleting ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
2336
+ /* @__PURE__ */ jsx6(Loader2, { size: 14 }),
2337
+ " Deleting..."
2338
+ ] }) : /* @__PURE__ */ jsxs5(Fragment2, { children: [
2339
+ /* @__PURE__ */ jsx6(Trash2, { size: 14 }),
2340
+ " Delete Wallet"
2341
+ ] })
2342
+ }
2343
+ ) })
2344
+ ]
2345
+ },
2346
+ "panel"
2347
+ ) })
2348
+ ] }) });
2349
+ }
2350
+
2351
+ // src/RenameWalletModal.tsx
2352
+ import { AnimatePresence as AnimatePresence3, motion as motion3 } from "framer-motion";
2353
+ import {
2354
+ useCallback as useCallback4,
2355
+ useEffect as useEffect2,
2356
+ useState as useState3
2357
+ } from "react";
2358
+ import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
2359
+ var DANGER_BORDER2 = "rgba(248,113,113,0.2)";
2360
+ var WALLET_NAME_REGEX = /^[a-zA-Z0-9/]+$/;
2361
+ var backdropStyle3 = modalBackdropStyle(110);
2362
+ var wrapperStyle2 = modalWrapperStyle2(111, 16);
2363
+ var panelStyle2 = {
2364
+ ...modalPanelStyle(true),
2365
+ border: `1px solid ${profileColors.surfaceBd}`
2366
+ };
2367
+ var headerStyle2 = {
2368
+ ...modalHeaderStyle,
2369
+ borderBottom: "1px solid rgba(255,255,255,0.06)"
2370
+ };
2371
+ var bodyStyle2 = {
2372
+ padding: "20px 24px",
2373
+ display: "flex",
2374
+ flexDirection: "column",
2375
+ gap: 16
2376
+ };
2377
+ var infoBoxStyle2 = {
2378
+ padding: "10px 12px",
2379
+ background: "rgba(255,255,255,0.03)",
2380
+ border: "1px solid rgba(255,255,255,0.06)",
2381
+ borderRadius: 8
2382
+ };
2383
+ var labelStyle2 = {
2384
+ display: "block",
2385
+ fontSize: 12.5,
2386
+ lineHeight: "1rem",
2387
+ color: profileColors.muted,
2388
+ marginBottom: 8
2389
+ };
2390
+ var inputStyle2 = (hasError, disabled) => ({
2391
+ width: "100%",
2392
+ background: "rgba(13,18,25,0.9)",
2393
+ border: `1px solid ${hasError ? "rgba(248,113,113,0.5)" : profileColors.surfaceBd}`,
2394
+ borderRadius: 8,
2395
+ padding: "10px 12px",
2396
+ color: profileColors.text,
2397
+ fontFamily: fontFamily.mono,
2398
+ fontSize: 12.5,
2399
+ lineHeight: "1rem",
2400
+ outline: "none",
2401
+ opacity: disabled ? 0.5 : 1,
2402
+ boxSizing: "border-box",
2403
+ transition: "border-color 150ms, background-color 150ms"
2404
+ });
2405
+ var footerStyle2 = {
2406
+ padding: "0 24px 24px"
2407
+ };
2408
+ var saveButtonStyle = (enabled, hovered) => ({
2409
+ ...raisedButtonStyle(enabled ? hovered ? "hover" : "default" : "disabled"),
2410
+ width: "100%",
2411
+ padding: "8px 0",
2412
+ borderRadius: 8,
2413
+ fontSize: 12.5,
2414
+ lineHeight: "1rem",
2415
+ fontWeight: 500,
2416
+ display: "flex",
2417
+ alignItems: "center",
2418
+ justifyContent: "center",
2419
+ gap: 8
2420
+ });
2421
+ function RenameWalletModal({
2422
+ isOpen,
2423
+ onClose,
2424
+ wallet,
2425
+ onConfirm,
2426
+ onNotify
2427
+ }) {
2428
+ const [name, setName] = useState3("");
2429
+ const [isRenaming, setIsRenaming] = useState3(false);
2430
+ const [error, setError] = useState3(null);
2431
+ const [saveHovered, setSaveHovered] = useState3(false);
2432
+ const currentName = wallet?.name || "Unnamed";
2433
+ const trimmedName = name.trim();
2434
+ const isNameChanged = trimmedName !== currentName;
2435
+ const isNameValid = WALLET_NAME_REGEX.test(trimmedName);
2436
+ const canSubmit = isNameValid && isNameChanged && !isRenaming;
2437
+ useEffect2(() => {
2438
+ if (!wallet) return;
2439
+ setName(wallet.name || "");
2440
+ setError(null);
2441
+ }, [wallet]);
2442
+ const handleClose = useCallback4(() => {
2443
+ if (isRenaming) return;
2444
+ setError(null);
2445
+ onClose();
2446
+ }, [isRenaming, onClose]);
2447
+ const handleRename = useCallback4(async () => {
2448
+ if (!wallet || !isNameValid || !isNameChanged) return;
2449
+ setError(null);
2450
+ setIsRenaming(true);
2451
+ try {
2452
+ await onConfirm(wallet.id, trimmedName);
2453
+ onNotify?.({ type: "success", message: "Wallet renamed successfully" });
2454
+ onClose();
2455
+ } catch (e) {
2456
+ setError(e instanceof Error ? e.message : "Failed to rename wallet");
2457
+ } finally {
2458
+ setIsRenaming(false);
2459
+ }
2460
+ }, [
2461
+ wallet,
2462
+ isNameValid,
2463
+ isNameChanged,
2464
+ onConfirm,
2465
+ trimmedName,
2466
+ onClose,
2467
+ onNotify
2468
+ ]);
2469
+ return /* @__PURE__ */ jsx7(AnimatePresence3, { children: isOpen && wallet && /* @__PURE__ */ jsxs6(Fragment3, { children: [
2470
+ /* @__PURE__ */ jsx7(SpinKeyframes, {}),
2471
+ /* @__PURE__ */ jsx7(
2472
+ motion3.div,
2473
+ {
2474
+ style: backdropStyle3,
2475
+ initial: { opacity: 0 },
2476
+ animate: { opacity: 1 },
2477
+ exit: { opacity: 0 },
2478
+ transition: { duration: 0.15 },
2479
+ onClick: handleClose
2480
+ },
2481
+ "backdrop"
2482
+ ),
2483
+ /* @__PURE__ */ jsx7("div", { style: wrapperStyle2, children: /* @__PURE__ */ jsxs6(
2484
+ motion3.div,
2485
+ {
2486
+ style: panelStyle2,
2487
+ initial: { opacity: 0, y: 8 },
2488
+ animate: { opacity: 1, y: 0 },
2489
+ exit: { opacity: 0, y: 8 },
2490
+ transition: { duration: 0.18, ease: "easeOut" },
2491
+ onClick: (e) => e.stopPropagation(),
2492
+ children: [
2493
+ /* @__PURE__ */ jsxs6("div", { style: headerStyle2, children: [
2494
+ /* @__PURE__ */ jsx7("h3", { style: titleStyle, children: "Rename Wallet" }),
2495
+ /* @__PURE__ */ jsx7(
2496
+ "button",
2497
+ {
2498
+ onClick: handleClose,
2499
+ disabled: isRenaming,
2500
+ style: closeBtnStyle(isRenaming),
2501
+ "aria-label": "Close",
2502
+ children: /* @__PURE__ */ jsx7(X, { size: 16 })
2503
+ }
2504
+ )
2505
+ ] }),
2506
+ /* @__PURE__ */ jsxs6("div", { style: bodyStyle2, children: [
2507
+ /* @__PURE__ */ jsxs6("div", { style: infoBoxStyle2, children: [
2508
+ /* @__PURE__ */ jsx7(
2509
+ "p",
2510
+ {
2511
+ style: {
2512
+ margin: "0 0 4px",
2513
+ color: profileColors.muted,
2514
+ ...upperLabelStyle
2515
+ },
2516
+ children: "Wallet"
2517
+ }
2518
+ ),
2519
+ /* @__PURE__ */ jsx7(
2520
+ "p",
2521
+ {
2522
+ style: {
2523
+ margin: 0,
2524
+ fontSize: 12.5,
2525
+ lineHeight: "1rem",
2526
+ fontWeight: 500,
2527
+ color: profileColors.text
2528
+ },
2529
+ children: currentName
2530
+ }
2531
+ ),
2532
+ /* @__PURE__ */ jsx7(
2533
+ "p",
2534
+ {
2535
+ style: {
2536
+ margin: "2px 0 0",
2537
+ fontSize: 12.5,
2538
+ lineHeight: "1rem",
2539
+ color: profileColors.muted,
2540
+ fontFamily: fontFamily.mono,
2541
+ wordBreak: "break-all"
2542
+ },
2543
+ children: wallet.ethereumAddress
2544
+ }
2545
+ )
2546
+ ] }),
2547
+ /* @__PURE__ */ jsxs6("div", { children: [
2548
+ /* @__PURE__ */ jsx7("label", { style: labelStyle2, children: "Wallet name" }),
2549
+ /* @__PURE__ */ jsx7(
2550
+ "input",
2551
+ {
2552
+ type: "text",
2553
+ value: name,
2554
+ onChange: (e) => {
2555
+ setName(e.target.value);
2556
+ setError(null);
2557
+ },
2558
+ onKeyDown: (e) => {
2559
+ if (e.key === "Enter") handleRename();
2560
+ if (e.key === "Escape") handleClose();
2561
+ },
2562
+ disabled: isRenaming,
2563
+ autoFocus: true,
2564
+ style: inputStyle2(!!error, isRenaming)
2565
+ }
2566
+ ),
2567
+ /* @__PURE__ */ jsx7(
2568
+ "p",
2569
+ {
2570
+ style: {
2571
+ margin: "8px 0 0",
2572
+ fontSize: 12.5,
2573
+ lineHeight: "1rem",
2574
+ color: profileColors.subdued
2575
+ },
2576
+ children: "Use letters, numbers, and / only."
2577
+ }
2578
+ )
2579
+ ] }),
2580
+ error && /* @__PURE__ */ jsxs6(
2581
+ "div",
2582
+ {
2583
+ style: {
2584
+ display: "flex",
2585
+ alignItems: "flex-start",
2586
+ gap: 8,
2587
+ padding: 12,
2588
+ background: "rgba(248,113,113,0.08)",
2589
+ border: `1px solid ${DANGER_BORDER2}`,
2590
+ borderRadius: 8
2591
+ },
2592
+ children: [
2593
+ /* @__PURE__ */ jsx7(
2594
+ AlertTriangle,
2595
+ {
2596
+ size: 14,
2597
+ color: profileColors.danger,
2598
+ style: { flexShrink: 0, marginTop: 2 }
2599
+ }
2600
+ ),
2601
+ /* @__PURE__ */ jsx7(
2602
+ "p",
2603
+ {
2604
+ style: {
2605
+ margin: 0,
2606
+ fontSize: 12.5,
2607
+ lineHeight: "1rem",
2608
+ color: profileColors.danger
2609
+ },
2610
+ children: error
2611
+ }
2612
+ )
2613
+ ]
2614
+ }
2615
+ )
2616
+ ] }),
2617
+ /* @__PURE__ */ jsx7("div", { style: footerStyle2, children: /* @__PURE__ */ jsx7(
2618
+ "button",
2619
+ {
2620
+ onClick: handleRename,
2621
+ disabled: !canSubmit,
2622
+ onMouseEnter: () => setSaveHovered(true),
2623
+ onMouseLeave: () => setSaveHovered(false),
2624
+ style: saveButtonStyle(canSubmit, saveHovered),
2625
+ children: isRenaming ? /* @__PURE__ */ jsxs6(Fragment3, { children: [
2626
+ /* @__PURE__ */ jsx7(Loader2, { size: 14 }),
2627
+ " Saving..."
2628
+ ] }) : /* @__PURE__ */ jsxs6(Fragment3, { children: [
2629
+ /* @__PURE__ */ jsx7(Pencil, { size: 14 }),
2630
+ " Save Name"
2631
+ ] })
2632
+ }
2633
+ ) })
2634
+ ]
2635
+ },
2636
+ "panel"
2637
+ ) })
2638
+ ] }) });
2639
+ }
2640
+
2641
+ // src/UserProfileModal.tsx
2642
+ import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
2643
+ var DEFAULT_SLIPPAGE_OPTIONS = [
2644
+ { label: "0.5%", value: 5e-3 },
2645
+ { label: "1%", value: 0.01 },
2646
+ { label: "2%", value: 0.02 },
2647
+ { label: "5%", value: 0.05 },
2648
+ { label: "10%", value: 0.1 }
2649
+ ];
2650
+ var backdropStyle4 = modalBackdropStyle(100);
2651
+ var wrapperStyle3 = modalWrapperStyle2(101);
2652
+ var panelStyle3 = modalPanelStyle(false);
2653
+ var headerStyle3 = modalHeaderStyle;
2654
+ var profileSectionStyle = {
2655
+ padding: "20px 24px",
2656
+ borderBottom: `1px solid ${profileColors.border}`
2657
+ };
2658
+ var settingsSectionStyle = {
2659
+ padding: "20px 24px"
2660
+ };
2661
+ var tabRowStyle = {
2662
+ display: "flex",
2663
+ gap: 6,
2664
+ marginBottom: 20
2665
+ };
2666
+ var tabButtonLayoutStyle = {
2667
+ flex: 1,
2668
+ padding: "6px 0",
2669
+ borderRadius: 4,
2670
+ fontSize: 12.5,
2671
+ lineHeight: "1rem",
2672
+ fontWeight: 500,
2673
+ display: "flex",
2674
+ alignItems: "center",
2675
+ justifyContent: "center",
2676
+ gap: 6,
2677
+ cursor: "pointer",
2678
+ transition: "background-color 150ms, color 150ms, box-shadow 150ms"
2679
+ };
2680
+ var statBoxStyle = {
2681
+ background: "rgba(255,255,255,0.03)",
2682
+ borderRadius: 8,
2683
+ padding: 12,
2684
+ border: `1px solid ${profileColors.border}`
2685
+ };
2686
+ var slippageBtnBaseStyle = {
2687
+ flex: 1,
2688
+ padding: "4px 0",
2689
+ borderRadius: 4,
2690
+ fontSize: 12.5,
2691
+ lineHeight: "1rem",
2692
+ fontFamily: fontFamily.mono,
2693
+ fontWeight: 500,
2694
+ cursor: "pointer",
2695
+ transition: "background-color 150ms, color 150ms, border-color 150ms"
2696
+ };
2697
+ var walletRowStyle = {
2698
+ display: "flex",
2699
+ alignItems: "center",
2700
+ gap: 12,
2701
+ padding: "10px 12px",
2702
+ borderRadius: 8,
2703
+ background: profileColors.surfaceBtn,
2704
+ border: `1px solid ${profileColors.surfaceBd}`,
2705
+ transition: "background-color 150ms, border-color 150ms"
2706
+ };
2707
+ function ToggleSwitch({
2708
+ checked,
2709
+ onChange,
2710
+ accentColor
2711
+ }) {
2712
+ return /* @__PURE__ */ jsx8(
2713
+ "button",
2714
+ {
2715
+ onClick: onChange,
2716
+ role: "switch",
2717
+ "aria-checked": checked,
2718
+ style: {
2719
+ position: "relative",
2720
+ display: "inline-flex",
2721
+ height: 20,
2722
+ width: 36,
2723
+ alignItems: "center",
2724
+ borderRadius: 9999,
2725
+ border: "none",
2726
+ background: checked ? accentColor : "rgba(255,255,255,0.08)",
2727
+ cursor: "pointer",
2728
+ padding: 0,
2729
+ transition: "background 150ms"
2730
+ },
2731
+ children: /* @__PURE__ */ jsx8(
2732
+ "span",
2733
+ {
2734
+ style: {
2735
+ display: "inline-block",
2736
+ height: 12,
2737
+ width: 12,
2738
+ borderRadius: "50%",
2739
+ background: profileColors.text,
2740
+ transform: checked ? "translateX(20px)" : "translateX(4px)",
2741
+ transition: "transform 150ms"
2742
+ }
2743
+ }
2744
+ )
2745
+ }
2746
+ );
2747
+ }
2748
+ function RaisedButton({
2749
+ selected = false,
2750
+ onClick,
2751
+ children,
2752
+ style
2753
+ }) {
2754
+ const [hovered, setHovered] = useState4(false);
2755
+ return /* @__PURE__ */ jsx8(
2756
+ "button",
2757
+ {
2758
+ type: "button",
2759
+ onClick,
2760
+ onMouseEnter: () => setHovered(true),
2761
+ onMouseLeave: () => setHovered(false),
2762
+ style: {
2763
+ ...tabButtonLayoutStyle,
2764
+ ...raisedButtonStyle(
2765
+ selected ? "active" : hovered ? "hover" : "default"
2766
+ ),
2767
+ ...style
2768
+ },
2769
+ children
2770
+ }
2771
+ );
2772
+ }
2773
+ function SlippageButton({
2774
+ selected,
2775
+ onClick,
2776
+ children
2777
+ }) {
2778
+ const [hovered, setHovered] = useState4(false);
2779
+ return /* @__PURE__ */ jsx8(
2780
+ "button",
2781
+ {
2782
+ type: "button",
2783
+ onClick,
2784
+ onMouseEnter: () => setHovered(true),
2785
+ onMouseLeave: () => setHovered(false),
2786
+ style: {
2787
+ ...slippageBtnBaseStyle,
2788
+ background: selected ? profileColors.surfaceBtnActive : hovered ? profileColors.surfaceBtnHover : profileColors.surfaceBtn,
2789
+ border: `1px solid ${selected ? profileColors.surfaceBdActive : hovered ? profileColors.surfaceBdHover : profileColors.surfaceBd}`,
2790
+ color: selected ? profileColors.text : hovered ? "#d1d5db" : profileColors.muted
2791
+ },
2792
+ children
2793
+ }
2794
+ );
2795
+ }
2796
+ function UserProfileModal({
2797
+ isOpen,
2798
+ onClose,
2799
+ animationsEnabled,
2800
+ onToggleAnimations,
2801
+ defaultSlippage,
2802
+ onSlippageChange,
2803
+ slippageOptions = DEFAULT_SLIPPAGE_OPTIONS,
2804
+ onWalletDeleted,
2805
+ onWalletRenamed,
2806
+ onShowPortfolio,
2807
+ onNotify,
2808
+ accentColor,
2809
+ principalColors
2810
+ }) {
2811
+ const {
2812
+ user,
2813
+ wallets: userWallets,
2814
+ deleteWallet,
2815
+ renameWallet,
2816
+ authMethod
2817
+ } = useHypurrConnectInternal();
2818
+ const [settingsTab, setSettingsTab] = useState4("ui");
2819
+ const [walletToDelete, setWalletToDelete] = useState4(null);
2820
+ const [walletToRename, setWalletToRename] = useState4(null);
2821
+ const profilePic = user?.photoUrl || "";
2822
+ const displayName = user?.displayName || "";
2823
+ const hfunScore = user?.hfunScore ?? null;
2824
+ const reputationScore = user?.reputationScore ?? null;
2825
+ const telegramId = user?.telegramId;
2826
+ const wallets = userWallets ?? [];
2827
+ const colors = resolvePrincipalColors(accentColor, principalColors);
2828
+ const handleDeleteWallet = useCallback5(
2829
+ async (walletId) => {
2830
+ await deleteWallet(walletId);
2831
+ onWalletDeleted?.(walletId);
2832
+ },
2833
+ [deleteWallet, onWalletDeleted]
2834
+ );
2835
+ const handleRenameWallet = useCallback5(
2836
+ async (walletId, name) => {
2837
+ await renameWallet(walletId, name);
2838
+ onWalletRenamed?.(walletId, name);
2839
+ },
2840
+ [renameWallet, onWalletRenamed]
2841
+ );
2842
+ const handleCopyAddress = useCallback5(() => {
2843
+ if (!displayName) return;
2844
+ navigator.clipboard.writeText(displayName);
2845
+ onNotify?.({ type: "success", message: "Address copied" });
2846
+ }, [displayName, onNotify]);
2847
+ return /* @__PURE__ */ jsxs7(Fragment4, { children: [
2848
+ /* @__PURE__ */ jsx8(AnimatePresence4, { children: isOpen && /* @__PURE__ */ jsxs7(Fragment4, { children: [
2849
+ /* @__PURE__ */ jsx8(SpinKeyframes, {}),
2850
+ /* @__PURE__ */ jsx8(
2851
+ motion4.div,
2852
+ {
2853
+ style: backdropStyle4,
2854
+ initial: { opacity: 0 },
2855
+ animate: { opacity: 1 },
2856
+ exit: { opacity: 0 },
2857
+ transition: { duration: 0.15 },
2858
+ onClick: onClose
2859
+ },
2860
+ "backdrop"
2861
+ ),
2862
+ /* @__PURE__ */ jsx8("div", { style: wrapperStyle3, onClick: onClose, children: /* @__PURE__ */ jsxs7(
2863
+ motion4.div,
2864
+ {
2865
+ style: panelStyle3,
2866
+ initial: { opacity: 0, y: 8 },
2867
+ animate: { opacity: 1, y: 0 },
2868
+ exit: { opacity: 0, y: 8 },
2869
+ transition: { duration: 0.18, ease: "easeOut" },
2870
+ onClick: (e) => e.stopPropagation(),
2871
+ children: [
2872
+ /* @__PURE__ */ jsxs7("div", { style: headerStyle3, children: [
2873
+ /* @__PURE__ */ jsx8("h3", { style: titleStyle, children: "Profile & Settings" }),
2874
+ /* @__PURE__ */ jsx8(
2875
+ "button",
2876
+ {
2877
+ onClick: onClose,
2878
+ style: closeBtnStyle(),
2879
+ "aria-label": "Close",
2880
+ children: /* @__PURE__ */ jsx8(X, { size: 16 })
2881
+ }
2882
+ )
2883
+ ] }),
2884
+ /* @__PURE__ */ jsxs7("div", { style: profileSectionStyle, children: [
2885
+ authMethod === "eoa" && !profilePic ? /* @__PURE__ */ jsxs7(
2886
+ "div",
2887
+ {
2888
+ style: {
2889
+ padding: "10px 12px",
2890
+ background: "rgba(255,255,255,0.03)",
2891
+ border: `1px solid ${profileColors.border}`,
2892
+ borderRadius: 8
2893
+ },
2894
+ children: [
2895
+ /* @__PURE__ */ jsx8(
2896
+ "p",
2897
+ {
2898
+ style: {
2899
+ margin: "0 0 6px",
2900
+ color: profileColors.muted,
2901
+ ...upperLabelStyle
2902
+ },
2903
+ children: "Wallet"
2904
+ }
2905
+ ),
2906
+ /* @__PURE__ */ jsxs7(
2907
+ "div",
2908
+ {
2909
+ style: {
2910
+ display: "flex",
2911
+ alignItems: "center",
2912
+ justifyContent: "space-between",
2913
+ gap: 8
2914
+ },
2915
+ children: [
2916
+ /* @__PURE__ */ jsx8(
2917
+ "p",
2918
+ {
2919
+ style: {
2920
+ margin: 0,
2921
+ fontSize: 12.5,
2922
+ lineHeight: "1rem",
2923
+ color: profileColors.text,
2924
+ fontFamily: fontFamily.mono,
2925
+ wordBreak: "break-all"
2926
+ },
2927
+ children: displayName
2928
+ }
2929
+ ),
2930
+ /* @__PURE__ */ jsx8(
2931
+ "button",
2932
+ {
2933
+ onClick: handleCopyAddress,
2934
+ style: {
2935
+ background: "transparent",
2936
+ border: "none",
2937
+ color: profileColors.muted,
2938
+ cursor: "pointer",
2939
+ flexShrink: 0,
2940
+ display: "flex"
2941
+ },
2942
+ "aria-label": "Copy address",
2943
+ children: /* @__PURE__ */ jsx8(Copy, { size: 13 })
2944
+ }
2945
+ )
2946
+ ]
2947
+ }
2948
+ )
2949
+ ]
2950
+ }
2951
+ ) : /* @__PURE__ */ jsxs7(
2952
+ "div",
2953
+ {
2954
+ style: {
2955
+ display: "flex",
2956
+ alignItems: "center",
2957
+ gap: 16
2958
+ },
2959
+ children: [
2960
+ profilePic ? /* @__PURE__ */ jsx8(
2961
+ "img",
2962
+ {
2963
+ src: profilePic,
2964
+ alt: "Profile",
2965
+ style: {
2966
+ height: 56,
2967
+ width: 56,
2968
+ borderRadius: "50%",
2969
+ border: `1px solid ${profileColors.surfaceBd}`
2970
+ }
2971
+ }
2972
+ ) : /* @__PURE__ */ jsx8(
2973
+ "div",
2974
+ {
2975
+ style: {
2976
+ height: 56,
2977
+ width: 56,
2978
+ borderRadius: "50%",
2979
+ border: `1px solid ${profileColors.surfaceBd}`,
2980
+ background: profileColors.surfaceBd,
2981
+ display: "flex",
2982
+ alignItems: "center",
2983
+ justifyContent: "center",
2984
+ fontSize: 18,
2985
+ lineHeight: "1.75rem",
2986
+ fontWeight: 700,
2987
+ color: profileColors.text
2988
+ },
2989
+ children: displayName?.charAt(0)
2990
+ }
2991
+ ),
2992
+ /* @__PURE__ */ jsxs7("div", { style: { flex: 1, minWidth: 0 }, children: [
2993
+ /* @__PURE__ */ jsx8(
2994
+ "h4",
2995
+ {
2996
+ style: {
2997
+ margin: 0,
2998
+ fontSize: 14,
2999
+ lineHeight: "1.25rem",
3000
+ fontWeight: 600,
3001
+ color: profileColors.text,
3002
+ overflow: "hidden",
3003
+ textOverflow: "ellipsis",
3004
+ whiteSpace: "nowrap"
3005
+ },
3006
+ children: displayName
3007
+ }
3008
+ ),
3009
+ telegramId && /* @__PURE__ */ jsxs7(
3010
+ "p",
3011
+ {
3012
+ style: {
3013
+ margin: "2px 0 0",
3014
+ fontSize: 12.5,
3015
+ lineHeight: "1rem",
3016
+ color: profileColors.muted
3017
+ },
3018
+ children: [
3019
+ "ID: ",
3020
+ telegramId
3021
+ ]
3022
+ }
3023
+ )
3024
+ ] })
3025
+ ]
3026
+ }
3027
+ ),
3028
+ user && /* @__PURE__ */ jsxs7(
3029
+ "div",
3030
+ {
3031
+ style: {
3032
+ marginTop: 16,
3033
+ display: "grid",
3034
+ gridTemplateColumns: "1fr 1fr",
3035
+ gap: 10
3036
+ },
3037
+ children: [
3038
+ /* @__PURE__ */ jsxs7("div", { style: statBoxStyle, children: [
3039
+ /* @__PURE__ */ jsxs7(
3040
+ "div",
3041
+ {
3042
+ style: {
3043
+ display: "flex",
3044
+ alignItems: "center",
3045
+ gap: 6,
3046
+ color: "#eab308",
3047
+ marginBottom: 6
3048
+ },
3049
+ children: [
3050
+ /* @__PURE__ */ jsx8(Star, { size: 13, color: "#eab308", fill: "#eab308" }),
3051
+ /* @__PURE__ */ jsx8("span", { style: upperLabelStyle, children: "Hfun Score" })
3052
+ ]
3053
+ }
3054
+ ),
3055
+ /* @__PURE__ */ jsx8(
3056
+ "p",
3057
+ {
3058
+ style: {
3059
+ margin: 0,
3060
+ fontSize: 18,
3061
+ lineHeight: "1.75rem",
3062
+ fontWeight: 700,
3063
+ color: profileColors.text,
3064
+ fontFamily: fontFamily.mono
3065
+ },
3066
+ children: hfunScore !== null ? hfunScore.toFixed(0) : "--"
3067
+ }
3068
+ )
3069
+ ] }),
3070
+ /* @__PURE__ */ jsxs7("div", { style: statBoxStyle, children: [
3071
+ /* @__PURE__ */ jsxs7(
3072
+ "div",
3073
+ {
3074
+ style: {
3075
+ display: "flex",
3076
+ alignItems: "center",
3077
+ gap: 6,
3078
+ color: profileColors.muted,
3079
+ marginBottom: 6
3080
+ },
3081
+ children: [
3082
+ /* @__PURE__ */ jsx8(User, { size: 13 }),
3083
+ /* @__PURE__ */ jsx8("span", { style: upperLabelStyle, children: "Reputation" })
3084
+ ]
3085
+ }
3086
+ ),
3087
+ /* @__PURE__ */ jsx8(
3088
+ "p",
3089
+ {
3090
+ style: {
3091
+ margin: 0,
3092
+ fontSize: 18,
3093
+ lineHeight: "1.75rem",
3094
+ fontWeight: 700,
3095
+ color: profileColors.text,
3096
+ fontFamily: fontFamily.mono
3097
+ },
3098
+ children: reputationScore !== null ? reputationScore.toFixed(0) : "--"
3099
+ }
3100
+ )
3101
+ ] })
3102
+ ]
3103
+ }
3104
+ )
3105
+ ] }),
3106
+ /* @__PURE__ */ jsxs7("div", { style: settingsSectionStyle, children: [
3107
+ /* @__PURE__ */ jsxs7("div", { style: tabRowStyle, children: [
3108
+ /* @__PURE__ */ jsxs7(
3109
+ RaisedButton,
3110
+ {
3111
+ selected: settingsTab === "ui",
3112
+ onClick: () => setSettingsTab("ui"),
3113
+ children: [
3114
+ /* @__PURE__ */ jsx8(Zap, { size: 13 }),
3115
+ " UI"
3116
+ ]
3117
+ }
3118
+ ),
3119
+ /* @__PURE__ */ jsxs7(
3120
+ RaisedButton,
3121
+ {
3122
+ selected: settingsTab === "trading",
3123
+ onClick: () => setSettingsTab("trading"),
3124
+ children: [
3125
+ /* @__PURE__ */ jsx8(TrendingUp, { size: 13 }),
3126
+ " Trading"
3127
+ ]
3128
+ }
3129
+ ),
3130
+ /* @__PURE__ */ jsxs7(
3131
+ RaisedButton,
3132
+ {
3133
+ selected: settingsTab === "wallets",
3134
+ onClick: () => setSettingsTab("wallets"),
3135
+ children: [
3136
+ /* @__PURE__ */ jsx8(Wallet, { size: 13 }),
3137
+ " Wallets"
3138
+ ]
3139
+ }
3140
+ )
3141
+ ] }),
3142
+ settingsTab === "ui" && /* @__PURE__ */ jsx8(
3143
+ "div",
3144
+ {
3145
+ style: {
3146
+ display: "flex",
3147
+ flexDirection: "column",
3148
+ gap: 12
3149
+ },
3150
+ children: /* @__PURE__ */ jsxs7(
3151
+ "div",
3152
+ {
3153
+ style: {
3154
+ display: "flex",
3155
+ alignItems: "center",
3156
+ justifyContent: "space-between",
3157
+ padding: "8px 0"
3158
+ },
3159
+ children: [
3160
+ /* @__PURE__ */ jsxs7(
3161
+ "div",
3162
+ {
3163
+ style: {
3164
+ display: "flex",
3165
+ alignItems: "center",
3166
+ gap: 12
3167
+ },
3168
+ children: [
3169
+ /* @__PURE__ */ jsx8(Zap, { size: 16, color: profileColors.muted }),
3170
+ /* @__PURE__ */ jsxs7("div", { children: [
3171
+ /* @__PURE__ */ jsx8(
3172
+ "p",
3173
+ {
3174
+ style: {
3175
+ margin: 0,
3176
+ fontSize: 12.5,
3177
+ lineHeight: "1rem",
3178
+ fontWeight: 500,
3179
+ color: profileColors.text
3180
+ },
3181
+ children: "Animations"
3182
+ }
3183
+ ),
3184
+ /* @__PURE__ */ jsx8(
3185
+ "p",
3186
+ {
3187
+ style: {
3188
+ margin: 0,
3189
+ fontSize: 12.5,
3190
+ lineHeight: "1rem",
3191
+ color: profileColors.muted
3192
+ },
3193
+ children: "Enable chart and UI animations"
3194
+ }
3195
+ )
3196
+ ] })
3197
+ ]
3198
+ }
3199
+ ),
3200
+ /* @__PURE__ */ jsx8(
3201
+ ToggleSwitch,
3202
+ {
3203
+ checked: animationsEnabled,
3204
+ onChange: onToggleAnimations,
3205
+ accentColor: colors.accent
3206
+ }
3207
+ )
3208
+ ]
3209
+ }
3210
+ )
3211
+ }
3212
+ ),
3213
+ settingsTab === "trading" && /* @__PURE__ */ jsxs7("div", { style: { padding: "8px 0" }, children: [
3214
+ /* @__PURE__ */ jsxs7(
3215
+ "div",
3216
+ {
3217
+ style: {
3218
+ display: "flex",
3219
+ alignItems: "center",
3220
+ gap: 12,
3221
+ marginBottom: 12
3222
+ },
3223
+ children: [
3224
+ /* @__PURE__ */ jsx8(TrendingUp, { size: 16, color: profileColors.muted }),
3225
+ /* @__PURE__ */ jsxs7("div", { children: [
3226
+ /* @__PURE__ */ jsx8(
3227
+ "p",
3228
+ {
3229
+ style: {
3230
+ margin: 0,
3231
+ fontSize: 12.5,
3232
+ lineHeight: "1rem",
3233
+ fontWeight: 500,
3234
+ color: profileColors.text
3235
+ },
3236
+ children: "Default Slippage"
3237
+ }
3238
+ ),
3239
+ /* @__PURE__ */ jsx8(
3240
+ "p",
3241
+ {
3242
+ style: {
3243
+ margin: 0,
3244
+ fontSize: 12.5,
3245
+ lineHeight: "1rem",
3246
+ color: profileColors.muted
3247
+ },
3248
+ children: "Max price deviation for market orders"
3249
+ }
3250
+ )
3251
+ ] })
3252
+ ]
3253
+ }
3254
+ ),
3255
+ /* @__PURE__ */ jsx8("div", { style: { display: "flex", gap: 6 }, children: slippageOptions.map((option) => /* @__PURE__ */ jsx8(
3256
+ SlippageButton,
3257
+ {
3258
+ onClick: () => onSlippageChange(option.value),
3259
+ selected: defaultSlippage === option.value,
3260
+ children: option.label
3261
+ },
3262
+ option.value
3263
+ )) })
3264
+ ] }),
3265
+ settingsTab === "wallets" && /* @__PURE__ */ jsxs7(
3266
+ "div",
3267
+ {
3268
+ style: {
3269
+ display: "flex",
3270
+ flexDirection: "column",
3271
+ gap: 8
3272
+ },
3273
+ children: [
3274
+ wallets.length === 0 ? /* @__PURE__ */ jsxs7(
3275
+ "div",
3276
+ {
3277
+ style: {
3278
+ textAlign: "center",
3279
+ padding: "32px 0"
3280
+ },
3281
+ children: [
3282
+ /* @__PURE__ */ jsx8(
3283
+ "div",
3284
+ {
3285
+ style: {
3286
+ width: 40,
3287
+ height: 40,
3288
+ borderRadius: "50%",
3289
+ background: "rgba(255,255,255,0.04)",
3290
+ display: "flex",
3291
+ alignItems: "center",
3292
+ justifyContent: "center",
3293
+ margin: "0 auto 12px"
3294
+ },
3295
+ children: /* @__PURE__ */ jsx8(Wallet, { size: 18, color: profileColors.muted })
3296
+ }
3297
+ ),
3298
+ /* @__PURE__ */ jsx8(
3299
+ "p",
3300
+ {
3301
+ style: {
3302
+ margin: 0,
3303
+ fontSize: 12.5,
3304
+ lineHeight: "1rem",
3305
+ color: profileColors.muted
3306
+ },
3307
+ children: "No wallets yet"
3308
+ }
3309
+ )
3310
+ ]
3311
+ }
3312
+ ) : /* @__PURE__ */ jsx8(
3313
+ "div",
3314
+ {
3315
+ style: {
3316
+ maxHeight: 208,
3317
+ overflowY: "auto",
3318
+ display: "flex",
3319
+ flexDirection: "column",
3320
+ gap: 6
3321
+ },
3322
+ children: wallets.map((wallet) => /* @__PURE__ */ jsx8(
3323
+ WalletRow,
3324
+ {
3325
+ wallet,
3326
+ colors,
3327
+ onRename: () => setWalletToRename(wallet),
3328
+ onDelete: () => setWalletToDelete(wallet),
3329
+ onShowPortfolio: onShowPortfolio ? () => onShowPortfolio(wallet) : void 0
3330
+ },
3331
+ wallet.id
3332
+ ))
3333
+ }
3334
+ ),
3335
+ /* @__PURE__ */ jsxs7(
3336
+ "p",
3337
+ {
3338
+ style: {
3339
+ margin: "4px 0 0",
3340
+ fontSize: 12.5,
3341
+ lineHeight: "1rem",
3342
+ color: profileColors.subdued,
3343
+ textAlign: "center"
3344
+ },
3345
+ children: [
3346
+ wallets.length,
3347
+ " wallet",
3348
+ wallets.length !== 1 ? "s" : "",
3349
+ " linked"
3350
+ ]
3351
+ }
3352
+ )
3353
+ ]
3354
+ }
3355
+ )
3356
+ ] }),
3357
+ /* @__PURE__ */ jsx8("div", { style: { padding: "0 24px 24px" }, children: /* @__PURE__ */ jsx8(
3358
+ "button",
3359
+ {
3360
+ onClick: onClose,
3361
+ style: {
3362
+ ...raisedButtonStyle("default"),
3363
+ width: "100%",
3364
+ padding: "6px 0",
3365
+ fontSize: 12.5,
3366
+ lineHeight: "1rem",
3367
+ fontWeight: 500,
3368
+ borderRadius: 8,
3369
+ cursor: "pointer"
3370
+ },
3371
+ children: "Close"
3372
+ }
3373
+ ) })
3374
+ ]
3375
+ },
3376
+ "panel"
3377
+ ) })
3378
+ ] }) }),
3379
+ /* @__PURE__ */ jsx8(
3380
+ DeleteWalletModal,
3381
+ {
3382
+ isOpen: !!walletToDelete,
3383
+ onClose: () => setWalletToDelete(null),
3384
+ wallet: walletToDelete,
3385
+ onConfirm: handleDeleteWallet,
3386
+ onNotify
3387
+ }
3388
+ ),
3389
+ /* @__PURE__ */ jsx8(
3390
+ RenameWalletModal,
3391
+ {
3392
+ isOpen: !!walletToRename,
3393
+ onClose: () => setWalletToRename(null),
3394
+ wallet: walletToRename,
3395
+ onConfirm: handleRenameWallet,
3396
+ onNotify,
3397
+ accentColor: colors.accent
3398
+ }
3399
+ )
3400
+ ] });
3401
+ }
3402
+ function WalletRow({
3403
+ wallet,
3404
+ colors,
3405
+ onRename,
3406
+ onDelete,
3407
+ onShowPortfolio
3408
+ }) {
3409
+ const [hovered, setHovered] = useState4(false);
3410
+ return /* @__PURE__ */ jsxs7(
3411
+ "div",
3412
+ {
3413
+ style: {
3414
+ ...walletRowStyle,
3415
+ background: hovered ? profileColors.surfaceBtnHover : profileColors.surfaceBtn,
3416
+ borderColor: hovered ? profileColors.surfaceBdHover : profileColors.surfaceBd
3417
+ },
3418
+ onMouseEnter: () => setHovered(true),
3419
+ onMouseLeave: () => setHovered(false),
3420
+ children: [
3421
+ /* @__PURE__ */ jsx8(
3422
+ "div",
3423
+ {
3424
+ style: {
3425
+ width: 32,
3426
+ height: 32,
3427
+ borderRadius: 6,
3428
+ background: colors.accentBackground,
3429
+ border: `1px solid ${colors.accentBorder}`,
3430
+ display: "flex",
3431
+ alignItems: "center",
3432
+ justifyContent: "center",
3433
+ flexShrink: 0
3434
+ },
3435
+ children: /* @__PURE__ */ jsx8(
3436
+ "span",
3437
+ {
3438
+ style: {
3439
+ fontSize: 12.5,
3440
+ lineHeight: "1rem",
3441
+ fontWeight: 600,
3442
+ color: colors.accentText
3443
+ },
3444
+ children: (wallet.name || "W")[0].toUpperCase()
3445
+ }
3446
+ )
3447
+ }
3448
+ ),
3449
+ /* @__PURE__ */ jsxs7("div", { style: { flex: 1, minWidth: 0 }, children: [
3450
+ /* @__PURE__ */ jsx8(
3451
+ "p",
3452
+ {
3453
+ style: {
3454
+ margin: 0,
3455
+ fontSize: 12.5,
3456
+ lineHeight: "1rem",
3457
+ fontWeight: 500,
3458
+ color: profileColors.text,
3459
+ overflow: "hidden",
3460
+ textOverflow: "ellipsis",
3461
+ whiteSpace: "nowrap"
3462
+ },
3463
+ children: wallet.name || "Unnamed"
3464
+ }
3465
+ ),
3466
+ /* @__PURE__ */ jsxs7(
3467
+ "p",
3468
+ {
3469
+ style: {
3470
+ margin: 0,
3471
+ fontSize: 12.5,
3472
+ lineHeight: "1rem",
3473
+ color: profileColors.muted,
3474
+ fontFamily: fontFamily.mono
3475
+ },
3476
+ children: [
3477
+ wallet.ethereumAddress?.slice(0, 6),
3478
+ "...",
3479
+ wallet.ethereumAddress?.slice(-4)
3480
+ ]
3481
+ }
3482
+ )
3483
+ ] }),
3484
+ /* @__PURE__ */ jsxs7(
3485
+ "div",
3486
+ {
3487
+ style: {
3488
+ display: "flex",
3489
+ alignItems: "center",
3490
+ gap: 4,
3491
+ flexShrink: 0,
3492
+ opacity: hovered ? 1 : 0,
3493
+ transition: "opacity 120ms"
3494
+ },
3495
+ children: [
3496
+ onShowPortfolio && /* @__PURE__ */ jsx8(
3497
+ IconBtn,
3498
+ {
3499
+ color: colors.accent,
3500
+ hoverBackgroundColor: colors.accentHoverBackground,
3501
+ title: "View portfolio",
3502
+ ariaLabel: `View portfolio for ${wallet.name || "wallet"}`,
3503
+ onClick: onShowPortfolio,
3504
+ children: /* @__PURE__ */ jsx8(LayoutDashboard, { size: 13 })
3505
+ }
3506
+ ),
3507
+ /* @__PURE__ */ jsx8(
3508
+ IconBtn,
3509
+ {
3510
+ color: colors.accent,
3511
+ hoverBackgroundColor: colors.accentHoverBackground,
3512
+ title: "Rename wallet",
3513
+ ariaLabel: `Rename ${wallet.name || "wallet"}`,
3514
+ onClick: onRename,
3515
+ children: /* @__PURE__ */ jsx8(Pencil, { size: 13 })
3516
+ }
3517
+ ),
3518
+ /* @__PURE__ */ jsx8(
3519
+ IconBtn,
3520
+ {
3521
+ color: "#ef4444",
3522
+ hoverBackgroundColor: "rgba(239,68,68,0.1)",
3523
+ title: "Delete wallet",
3524
+ ariaLabel: `Delete ${wallet.name || "wallet"}`,
3525
+ onClick: onDelete,
3526
+ children: /* @__PURE__ */ jsx8(Trash2, { size: 13 })
3527
+ }
3528
+ )
3529
+ ]
3530
+ }
3531
+ )
3532
+ ]
3533
+ }
3534
+ );
3535
+ }
3536
+ function IconBtn({
3537
+ children,
3538
+ color,
3539
+ hoverBackgroundColor,
3540
+ title,
3541
+ ariaLabel,
3542
+ onClick
3543
+ }) {
3544
+ const [hovered, setHovered] = useState4(false);
3545
+ return /* @__PURE__ */ jsx8(
3546
+ "button",
3547
+ {
3548
+ onMouseEnter: () => setHovered(true),
3549
+ onMouseLeave: () => setHovered(false),
3550
+ onClick,
3551
+ title,
3552
+ "aria-label": ariaLabel,
3553
+ style: {
3554
+ padding: 6,
3555
+ borderRadius: 4,
3556
+ background: hovered ? hoverBackgroundColor ?? "transparent" : "transparent",
3557
+ border: "none",
3558
+ color: hovered ? color : profileColors.disabled,
3559
+ cursor: "pointer",
3560
+ display: "flex",
3561
+ alignItems: "center",
3562
+ justifyContent: "center",
3563
+ transition: "color 120ms, background 120ms"
3564
+ },
3565
+ children
3566
+ }
3567
+ );
3568
+ }
3569
+
3570
+ // src/WalletSelectorDropdown.tsx
3571
+ import { Fragment as Fragment6, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
3572
+ var DEFAULT_BACKGROUND_COLOR2 = "rgba(20,20,20,0.95)";
3573
+ var getWalletNameParts = (name) => (name ?? "").split("/").map((part) => part.trim()).filter(Boolean);
3574
+ var buildWalletListEntries = (wallets) => {
3575
+ const standalone = [];
3576
+ const grouped = /* @__PURE__ */ new Map();
3577
+ const walletParts = (wallets ?? []).map((wallet) => ({
3578
+ wallet,
3579
+ parts: getWalletNameParts(wallet.name)
3580
+ }));
3581
+ const prefixCounts = /* @__PURE__ */ new Map();
3582
+ walletParts.forEach(({ parts }) => {
3583
+ for (let index = 1; index < parts.length; index += 1) {
3584
+ const prefix = parts.slice(0, index).join("/");
3585
+ prefixCounts.set(prefix, (prefixCounts.get(prefix) ?? 0) + 1);
3586
+ }
3587
+ });
3588
+ walletParts.forEach(({ wallet, parts }) => {
3589
+ const groupPath = (() => {
3590
+ for (let index = parts.length - 1; index > 0; index -= 1) {
3591
+ const prefix = parts.slice(0, index).join("/");
3592
+ if ((prefixCounts.get(prefix) ?? 0) > 1) {
3593
+ return prefix;
3594
+ }
3595
+ }
3596
+ return null;
3597
+ })();
3598
+ const groupDepth = groupPath ? groupPath.split("/").length : 0;
3599
+ const item = {
3600
+ wallet,
3601
+ label: parts.length > 0 ? parts.slice(groupDepth).join("/") : null
3602
+ };
3603
+ if (!groupPath) {
3604
+ standalone.push(item);
3605
+ return;
3606
+ }
3607
+ const groupItems = grouped.get(groupPath) ?? [];
3608
+ groupItems.push(item);
3609
+ grouped.set(groupPath, groupItems);
3610
+ });
3611
+ const entries = standalone.map((item) => ({
3612
+ type: "wallet",
3613
+ item
3614
+ }));
3615
+ grouped.forEach((items, path) => {
3616
+ if (items.length === 1) {
3617
+ entries.push({
3618
+ type: "wallet",
3619
+ item: { ...items[0], label: `${path}/${items[0].label ?? ""}` }
3620
+ });
3621
+ return;
3622
+ }
3623
+ entries.push({
3624
+ type: "group",
3625
+ path,
3626
+ items: [...items].sort(
3627
+ (a, b) => (a.label ?? "").localeCompare(b.label ?? "")
3628
+ )
3629
+ });
3630
+ });
3631
+ return entries.sort((a, b) => {
3632
+ const aLabel = a.type === "group" ? a.path : a.item.label ?? "";
3633
+ const bLabel = b.type === "group" ? b.path : b.item.label ?? "";
3634
+ return aLabel.localeCompare(bLabel);
3635
+ });
3636
+ };
3637
+ var formatCompactAddress = (addr) => {
3638
+ if (!addr) return "";
3639
+ return `${addr.slice(0, 4)}...${addr.slice(-2)}`;
3640
+ };
3641
+ var rootStyle = {
3642
+ position: "absolute",
3643
+ right: 0,
3644
+ top: "calc(100% + 4px)",
3645
+ width: 240,
3646
+ backdropFilter: "blur(10px)",
3647
+ WebkitBackdropFilter: "blur(10px)",
3648
+ borderRadius: 9,
3649
+ boxShadow: "0 8px 40px rgba(0,0,0,0.85)",
3650
+ border: "1px solid rgba(255,255,255,0.08)",
3651
+ zIndex: 50,
3652
+ transformOrigin: "top right",
3653
+ overflow: "hidden"
3654
+ };
3655
+ var sectionBorder = "1px solid rgba(255,255,255,0.06)";
3656
+ var sectionHeaderStyle = {
3657
+ padding: "8px 16px",
3658
+ fontSize: 12,
3659
+ fontWeight: 600,
3660
+ color: "#9ca3af",
3661
+ textTransform: "uppercase",
3662
+ letterSpacing: "0.05em"
3663
+ };
3664
+ var footerBtnStyle = {
3665
+ width: "100%",
3666
+ textAlign: "left",
3667
+ padding: "10px 16px",
3668
+ fontSize: 14,
3669
+ background: "transparent",
3670
+ border: "none",
3671
+ cursor: "pointer",
3672
+ display: "flex",
3673
+ alignItems: "center",
3674
+ gap: 8,
3675
+ color: "#9ca3af",
3676
+ transition: "background 120ms, color 120ms"
3677
+ };
3678
+ function WalletSelectorDropdown({
3679
+ isOpen,
3680
+ onClose,
3681
+ onAddWallet,
3682
+ onShowPortfolio,
3683
+ onLogout,
3684
+ onNotify,
3685
+ vipThreshold = 10,
3686
+ animationsEnabled,
3687
+ onToggleAnimations,
3688
+ defaultSlippage,
3689
+ onSlippageChange,
3690
+ slippageOptions,
3691
+ onWalletDeleted,
3692
+ onWalletRenamed,
3693
+ accentColor,
3694
+ principalColors,
3695
+ backgroundColor = DEFAULT_BACKGROUND_COLOR2
3696
+ }) {
3697
+ const { user, wallets, selectedWalletId, selectWallet, logout, authMethod } = useHypurrConnectInternal();
3698
+ const [profileOpen, setProfileOpen] = useState5(false);
3699
+ const openProfile = useCallback6(() => {
3700
+ setProfileOpen(true);
3701
+ onClose();
3702
+ }, [onClose]);
3703
+ const walletListEntries = useMemo2(
3704
+ () => buildWalletListEntries(Array.isArray(wallets) ? wallets : void 0),
3705
+ [wallets]
3706
+ );
3707
+ const handleCopyAddress = useCallback6(
3708
+ (address) => {
3709
+ if (!address) return;
3710
+ navigator.clipboard.writeText(address);
3711
+ onNotify?.({ type: "success", message: "Address copied" });
3712
+ },
3713
+ [onNotify]
3714
+ );
3715
+ const handleLogout = useCallback6(() => {
3716
+ onLogout?.();
3717
+ logout();
3718
+ onClose();
3719
+ }, [logout, onClose, onLogout]);
3720
+ const profilePic = user?.photoUrl;
3721
+ const displayName = user?.displayName ?? "";
3722
+ const hfunScore = user?.hfunScore ?? 0;
3723
+ const isVip = hfunScore > vipThreshold;
3724
+ const colors = resolvePrincipalColors(accentColor, principalColors);
3725
+ const renderWalletRow = (item, depth) => {
3726
+ const { wallet, label } = item;
3727
+ const isSelected = wallet.id === selectedWalletId;
3728
+ const compactAddress = formatCompactAddress(wallet.ethereumAddress);
3729
+ return /* @__PURE__ */ jsx9(
3730
+ WalletRow2,
3731
+ {
3732
+ depth,
3733
+ isSelected,
3734
+ label,
3735
+ compactAddress,
3736
+ onSelect: () => {
3737
+ selectWallet(wallet.id);
3738
+ onClose();
3739
+ },
3740
+ onShowPortfolio: onShowPortfolio ? () => {
3741
+ onShowPortfolio(wallet);
3742
+ onClose();
3743
+ } : void 0,
3744
+ onCopy: () => handleCopyAddress(wallet.ethereumAddress),
3745
+ colors
3746
+ },
3747
+ wallet.id
3748
+ );
3749
+ };
3750
+ return /* @__PURE__ */ jsxs8(Fragment6, { children: [
3751
+ /* @__PURE__ */ jsx9(AnimatePresence5, { children: isOpen && /* @__PURE__ */ jsxs8(
3752
+ motion5.div,
3753
+ {
3754
+ style: { ...rootStyle, background: backgroundColor },
3755
+ initial: { opacity: 0, scale: 0.95 },
3756
+ animate: { opacity: 1, scale: 1 },
3757
+ exit: { opacity: 0, scale: 0.95 },
3758
+ transition: { duration: 0.15, ease: "easeOut" },
3759
+ children: [
3760
+ /* @__PURE__ */ jsxs8(
3761
+ "button",
3762
+ {
3763
+ onClick: openProfile,
3764
+ style: {
3765
+ width: "100%",
3766
+ padding: "12px 16px",
3767
+ borderBottom: sectionBorder,
3768
+ display: "flex",
3769
+ alignItems: "center",
3770
+ gap: 12,
3771
+ background: "transparent",
3772
+ border: "none",
3773
+ borderBottomColor: "rgba(255,255,255,0.06)",
3774
+ borderBottomStyle: "solid",
3775
+ borderBottomWidth: 1,
3776
+ cursor: "pointer",
3777
+ textAlign: "left",
3778
+ transition: "background 120ms"
3779
+ },
3780
+ onMouseEnter: (e) => e.currentTarget.style.background = "rgba(255,255,255,0.06)",
3781
+ onMouseLeave: (e) => e.currentTarget.style.background = "transparent",
3782
+ children: [
3783
+ profilePic ? /* @__PURE__ */ jsxs8(
3784
+ "div",
3785
+ {
3786
+ style: {
3787
+ position: "relative",
3788
+ padding: isVip ? 2 : 0,
3789
+ borderRadius: "50%",
3790
+ background: isVip ? "linear-gradient(to right, #fde047, #eab308, #ca8a04)" : "transparent"
3791
+ },
3792
+ children: [
3793
+ /* @__PURE__ */ jsx9(
3794
+ "img",
3795
+ {
3796
+ src: profilePic,
3797
+ alt: "Profile",
3798
+ style: {
3799
+ height: 32,
3800
+ width: 32,
3801
+ borderRadius: "50%",
3802
+ display: "block"
3803
+ }
3804
+ }
3805
+ ),
3806
+ isVip && /* @__PURE__ */ jsx9(
3807
+ Crown,
3808
+ {
3809
+ size: 12,
3810
+ color: "#fde047",
3811
+ fill: "#eab308",
3812
+ style: {
3813
+ position: "absolute",
3814
+ top: -4,
3815
+ right: -2,
3816
+ filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.5))"
3817
+ }
3818
+ }
3819
+ )
3820
+ ]
3821
+ }
3822
+ ) : authMethod === "eoa" ? /* @__PURE__ */ jsx9(
3823
+ "div",
3824
+ {
3825
+ style: {
3826
+ height: 32,
3827
+ width: 32,
3828
+ borderRadius: 7,
3829
+ background: colors.accentBackground,
3830
+ border: `1px solid ${colors.accentBorder}`,
3831
+ display: "flex",
3832
+ alignItems: "center",
3833
+ justifyContent: "center",
3834
+ flexShrink: 0
3835
+ },
3836
+ children: /* @__PURE__ */ jsx9(Wallet, { size: 14, color: colors.accentText })
3837
+ }
3838
+ ) : /* @__PURE__ */ jsxs8(
3839
+ "div",
3840
+ {
3841
+ style: {
3842
+ position: "relative",
3843
+ height: 32,
3844
+ width: 32,
3845
+ borderRadius: "50%",
3846
+ background: isVip ? "linear-gradient(135deg, #ca8a04, #fde047)" : colors.accentBackground,
3847
+ border: `1px solid ${isVip ? "rgba(255,255,255,0.08)" : colors.accentBorder}`,
3848
+ display: "flex",
3849
+ alignItems: "center",
3850
+ justifyContent: "center",
3851
+ color: isVip ? profileColors.text : colors.accentText,
3852
+ fontSize: 14,
3853
+ fontWeight: 700
3854
+ },
3855
+ children: [
3856
+ displayName.charAt(0),
3857
+ isVip && /* @__PURE__ */ jsx9(
3858
+ Crown,
3859
+ {
3860
+ size: 12,
3861
+ color: "#fde047",
3862
+ fill: "#eab308",
3863
+ style: {
3864
+ position: "absolute",
3865
+ top: -4,
3866
+ right: -2,
3867
+ filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.5))"
3868
+ }
3869
+ }
3870
+ )
3871
+ ]
3872
+ }
3873
+ ),
3874
+ /* @__PURE__ */ jsx9("div", { style: { overflow: "hidden", flex: 1 }, children: /* @__PURE__ */ jsxs8("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
3875
+ /* @__PURE__ */ jsx9(
3876
+ "p",
3877
+ {
3878
+ style: {
3879
+ margin: 0,
3880
+ fontSize: 14,
3881
+ fontWeight: 500,
3882
+ color: "#fff",
3883
+ overflow: "hidden",
3884
+ textOverflow: "ellipsis",
3885
+ whiteSpace: "nowrap"
3886
+ },
3887
+ children: displayName
3888
+ }
3889
+ ),
3890
+ hfunScore > 0 && /* @__PURE__ */ jsxs8(
3891
+ "span",
3892
+ {
3893
+ style: {
3894
+ display: "inline-flex",
3895
+ alignItems: "center",
3896
+ gap: 2,
3897
+ fontSize: 12,
3898
+ color: "#eab308",
3899
+ fontWeight: 500,
3900
+ background: "rgba(234,179,8,0.1)",
3901
+ padding: "2px 6px",
3902
+ borderRadius: 4
3903
+ },
3904
+ children: [
3905
+ /* @__PURE__ */ jsx9(Star, { size: 10, color: "#eab308", fill: "#eab308" }),
3906
+ hfunScore.toFixed(0)
3907
+ ]
3908
+ }
3909
+ )
3910
+ ] }) })
3911
+ ]
3912
+ }
3913
+ ),
3914
+ /* @__PURE__ */ jsxs8("div", { style: { borderBottom: sectionBorder }, children: [
3915
+ /* @__PURE__ */ jsx9("div", { style: sectionHeaderStyle, children: "Wallets" }),
3916
+ /* @__PURE__ */ jsx9(
3917
+ "div",
3918
+ {
3919
+ style: {
3920
+ maxHeight: 256,
3921
+ overflowY: "auto",
3922
+ paddingBottom: 4
3923
+ },
3924
+ children: walletListEntries.map((entry) => {
3925
+ if (entry.type === "wallet") {
3926
+ return renderWalletRow(entry.item, 0);
3927
+ }
3928
+ const isSelectedGroup = entry.items.some(
3929
+ (item) => item.wallet.id === selectedWalletId
3930
+ );
3931
+ return /* @__PURE__ */ jsxs8(Fragment5, { children: [
3932
+ /* @__PURE__ */ jsxs8(
3933
+ "div",
3934
+ {
3935
+ style: {
3936
+ display: "flex",
3937
+ alignItems: "center",
3938
+ gap: 6,
3939
+ padding: "8px 16px 4px",
3940
+ fontSize: 11,
3941
+ fontWeight: 600,
3942
+ textTransform: "uppercase",
3943
+ letterSpacing: "0.05em",
3944
+ color: isSelectedGroup ? "#e5e7eb" : "#6b7280"
3945
+ },
3946
+ children: [
3947
+ /* @__PURE__ */ jsx9(Folder, { size: 12, style: { flexShrink: 0 } }),
3948
+ /* @__PURE__ */ jsx9(
3949
+ "span",
3950
+ {
3951
+ style: {
3952
+ minWidth: 0,
3953
+ flex: 1,
3954
+ overflow: "hidden",
3955
+ textOverflow: "ellipsis",
3956
+ whiteSpace: "nowrap"
3957
+ },
3958
+ children: entry.path
3959
+ }
3960
+ ),
3961
+ /* @__PURE__ */ jsx9(
3962
+ "span",
3963
+ {
3964
+ style: {
3965
+ flexShrink: 0,
3966
+ fontVariantNumeric: "tabular-nums",
3967
+ color: "#4b5563"
3968
+ },
3969
+ children: entry.items.length
3970
+ }
3971
+ )
3972
+ ]
3973
+ }
3974
+ ),
3975
+ entry.items.map((item) => renderWalletRow(item, 1))
3976
+ ] }, entry.path);
3977
+ })
3978
+ }
3979
+ ),
3980
+ authMethod !== "eoa" && onAddWallet && /* @__PURE__ */ jsxs8(
3981
+ "button",
3982
+ {
3983
+ onClick: () => {
3984
+ onAddWallet();
3985
+ onClose();
3986
+ },
3987
+ style: {
3988
+ width: "100%",
3989
+ textAlign: "left",
3990
+ padding: "8px 16px",
3991
+ fontSize: 14,
3992
+ background: "transparent",
3993
+ border: "none",
3994
+ cursor: "pointer",
3995
+ display: "flex",
3996
+ alignItems: "center",
3997
+ gap: 8,
3998
+ color: colors.accentText,
3999
+ transition: "background 120ms"
4000
+ },
4001
+ onMouseEnter: (e) => e.currentTarget.style.background = "rgba(255,255,255,0.06)",
4002
+ onMouseLeave: (e) => e.currentTarget.style.background = "transparent",
4003
+ children: [
4004
+ /* @__PURE__ */ jsx9(Plus, { size: 14 }),
4005
+ "Add Wallet"
4006
+ ]
4007
+ }
4008
+ )
4009
+ ] }),
4010
+ /* @__PURE__ */ jsxs8("div", { children: [
4011
+ /* @__PURE__ */ jsx9(
4012
+ FooterBtn,
4013
+ {
4014
+ onClick: openProfile,
4015
+ icon: /* @__PURE__ */ jsx9(User, { size: 14 }),
4016
+ label: "Profile & Settings"
4017
+ }
4018
+ ),
4019
+ /* @__PURE__ */ jsx9(
4020
+ FooterBtn,
4021
+ {
4022
+ onClick: handleLogout,
4023
+ icon: /* @__PURE__ */ jsx9(LogOut, { size: 14 }),
4024
+ label: "Logout",
4025
+ hoverColor: "#ef4444"
4026
+ }
4027
+ )
4028
+ ] })
4029
+ ]
4030
+ }
4031
+ ) }),
4032
+ /* @__PURE__ */ jsx9(
4033
+ UserProfileModal,
4034
+ {
4035
+ isOpen: profileOpen,
4036
+ onClose: () => setProfileOpen(false),
4037
+ animationsEnabled,
4038
+ onToggleAnimations,
4039
+ defaultSlippage,
4040
+ onSlippageChange,
4041
+ slippageOptions,
4042
+ accentColor,
4043
+ principalColors,
4044
+ onWalletDeleted,
4045
+ onWalletRenamed,
4046
+ onShowPortfolio: onShowPortfolio ? (wallet) => {
4047
+ onShowPortfolio(wallet);
4048
+ setProfileOpen(false);
4049
+ } : void 0,
4050
+ onNotify
4051
+ }
4052
+ )
4053
+ ] });
4054
+ }
4055
+ function FooterBtn({
4056
+ onClick,
4057
+ icon,
4058
+ label,
4059
+ hoverColor = "#fff"
4060
+ }) {
4061
+ return /* @__PURE__ */ jsxs8(
4062
+ "button",
4063
+ {
4064
+ onClick,
4065
+ style: footerBtnStyle,
4066
+ onMouseEnter: (e) => {
4067
+ e.currentTarget.style.background = "rgba(255,255,255,0.06)";
4068
+ e.currentTarget.style.color = hoverColor;
4069
+ },
4070
+ onMouseLeave: (e) => {
4071
+ e.currentTarget.style.background = "transparent";
4072
+ e.currentTarget.style.color = "#9ca3af";
4073
+ },
4074
+ children: [
4075
+ icon,
4076
+ label
4077
+ ]
4078
+ }
4079
+ );
4080
+ }
4081
+ function WalletRow2({
4082
+ depth,
4083
+ isSelected,
4084
+ label,
4085
+ compactAddress,
4086
+ onSelect,
4087
+ onShowPortfolio,
4088
+ onCopy,
4089
+ colors
4090
+ }) {
4091
+ return /* @__PURE__ */ jsxs8(
4092
+ "div",
4093
+ {
4094
+ style: {
4095
+ width: "100%",
4096
+ paddingLeft: 16 + depth * 14,
4097
+ paddingRight: 16,
4098
+ paddingTop: 6,
4099
+ paddingBottom: 6,
4100
+ fontSize: 14,
4101
+ color: "#d1d5db",
4102
+ display: "flex",
4103
+ alignItems: "center",
4104
+ background: isSelected ? "rgba(255,255,255,0.06)" : "transparent",
4105
+ transition: "background 120ms"
4106
+ },
4107
+ onMouseEnter: (e) => {
4108
+ e.currentTarget.style.background = "rgba(255,255,255,0.06)";
4109
+ const actions = e.currentTarget.querySelector("[data-row-actions]");
4110
+ if (actions) actions.style.opacity = "1";
4111
+ },
4112
+ onMouseLeave: (e) => {
4113
+ e.currentTarget.style.background = isSelected ? "rgba(255,255,255,0.06)" : "transparent";
4114
+ const actions = e.currentTarget.querySelector("[data-row-actions]");
4115
+ if (actions) actions.style.opacity = "0";
4116
+ },
4117
+ children: [
4118
+ /* @__PURE__ */ jsx9(
4119
+ "button",
4120
+ {
4121
+ onClick: onSelect,
4122
+ style: {
4123
+ flex: 1,
4124
+ textAlign: "left",
4125
+ minWidth: 0,
4126
+ display: "flex",
4127
+ alignItems: "center",
4128
+ gap: 4,
4129
+ background: "transparent",
4130
+ border: "none",
4131
+ color: "inherit",
4132
+ cursor: "pointer",
4133
+ padding: 0
4134
+ },
4135
+ children: label ? /* @__PURE__ */ jsxs8(Fragment6, { children: [
4136
+ /* @__PURE__ */ jsx9(
4137
+ "span",
4138
+ {
4139
+ style: {
4140
+ overflow: "hidden",
4141
+ textOverflow: "ellipsis",
4142
+ whiteSpace: "nowrap",
4143
+ color: isSelected ? "#fff" : void 0,
4144
+ fontWeight: isSelected ? 500 : void 0
4145
+ },
4146
+ children: label
4147
+ }
4148
+ ),
4149
+ /* @__PURE__ */ jsxs8(
4150
+ "span",
4151
+ {
4152
+ style: {
4153
+ fontSize: 12,
4154
+ fontWeight: 400,
4155
+ flexShrink: 0,
4156
+ color: "#6b7280"
4157
+ },
4158
+ children: [
4159
+ "(",
4160
+ compactAddress,
4161
+ ")"
4162
+ ]
4163
+ }
4164
+ )
4165
+ ] }) : /* @__PURE__ */ jsx9(
4166
+ "span",
4167
+ {
4168
+ style: {
4169
+ fontSize: 12,
4170
+ color: isSelected ? "#fff" : "#9ca3af",
4171
+ fontWeight: isSelected ? 500 : void 0
4172
+ },
4173
+ children: compactAddress
4174
+ }
4175
+ )
4176
+ }
4177
+ ),
4178
+ /* @__PURE__ */ jsxs8(
4179
+ "div",
4180
+ {
4181
+ "data-row-actions": true,
4182
+ style: {
4183
+ display: "flex",
4184
+ alignItems: "center",
4185
+ opacity: 0,
4186
+ transition: "opacity 120ms"
4187
+ },
4188
+ children: [
4189
+ onShowPortfolio && /* @__PURE__ */ jsx9(
4190
+ RowIconBtn,
4191
+ {
4192
+ title: "View portfolio",
4193
+ hoverColor: colors.accent,
4194
+ onClick: (e) => {
4195
+ e.stopPropagation();
4196
+ onShowPortfolio();
4197
+ },
4198
+ children: /* @__PURE__ */ jsx9(LayoutDashboard, { size: 12 })
4199
+ }
4200
+ ),
4201
+ /* @__PURE__ */ jsx9(
4202
+ RowIconBtn,
4203
+ {
4204
+ title: "Copy address",
4205
+ hoverColor: colors.accent,
4206
+ onClick: (e) => {
4207
+ e.stopPropagation();
4208
+ onCopy();
4209
+ },
4210
+ children: /* @__PURE__ */ jsx9(Copy, { size: 12 })
4211
+ }
4212
+ )
4213
+ ]
4214
+ }
4215
+ )
4216
+ ]
4217
+ }
4218
+ );
4219
+ }
4220
+ function RowIconBtn({
4221
+ children,
4222
+ title,
4223
+ onClick,
4224
+ hoverColor = profileColors.text
4225
+ }) {
4226
+ return /* @__PURE__ */ jsx9(
4227
+ "button",
4228
+ {
4229
+ onClick,
4230
+ title,
4231
+ style: {
4232
+ padding: 4,
4233
+ marginLeft: 4,
4234
+ background: "transparent",
4235
+ border: "none",
4236
+ color: "#4b5563",
4237
+ cursor: "pointer",
4238
+ display: "flex",
4239
+ alignItems: "center",
4240
+ justifyContent: "center",
4241
+ transition: "color 120ms"
4242
+ },
4243
+ onMouseEnter: (e) => e.currentTarget.style.color = hoverColor,
4244
+ onMouseLeave: (e) => e.currentTarget.style.color = "#4b5563",
4245
+ children
4246
+ }
4247
+ );
4248
+ }
4249
+
1686
4250
  // src/types.ts
1687
4251
  function createEoaSigner(signTypedDataAsync, chainId, options = {}) {
1688
4252
  const resolve = typeof signTypedDataAsync === "function" ? signTypedDataAsync : (args) => signTypedDataAsync.current(args);
@@ -1694,10 +4258,14 @@ function createEoaSigner(signTypedDataAsync, chainId, options = {}) {
1694
4258
  };
1695
4259
  }
1696
4260
  export {
4261
+ DeleteWalletModal,
1697
4262
  GrpcExchangeTransport,
1698
4263
  HypurrConnectProvider,
1699
4264
  LoginModal,
1700
4265
  PrivateKeySigner,
4266
+ RenameWalletModal,
4267
+ UserProfileModal,
4268
+ WalletSelectorDropdown,
1701
4269
  createEoaSigner,
1702
4270
  createStaticClient,
1703
4271
  createTelegramClient,