@hfunlabs/hypurr-connect 0.1.16 → 0.1.19

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 (18) hide show
  1. package/dist/index.d.ts +4 -2
  2. package/dist/index.js +503 -546
  3. package/dist/index.js.map +1 -1
  4. package/package.json +1 -1
  5. package/src/AddWalletModal.tsx +37 -30
  6. package/src/DeleteWalletModal.tsx +5 -8
  7. package/src/HypurrConnectProvider.tsx +1 -0
  8. package/src/LoginModal.tsx +2 -26
  9. package/src/RenameWalletModal.tsx +14 -24
  10. package/src/RenewAgentModal.tsx +26 -21
  11. package/src/UserProfileModal.tsx +36 -63
  12. package/src/WalletSelectorDropdown.tsx +40 -28
  13. package/src/index.ts +4 -1
  14. package/src/profileStyles.ts +51 -30
  15. package/src/styles.css +1 -1
  16. package/src/tailwind.css +289 -23
  17. package/src/types.ts +6 -1
  18. package/src/useIsMobile.ts +22 -0
package/dist/index.js CHANGED
@@ -21,7 +21,7 @@ function styleInject(css, { insertAt } = {}) {
21
21
  }
22
22
 
23
23
  // src/styles.css
24
- styleInject(".hypurr-connect .btn-raised {\n background-color: #0d1219;\n background-image:\n linear-gradient(\n 180deg,\n hsla(0, 0%, 100%, .03),\n transparent);\n box-shadow:\n inset 0 1px 0 hsla(0, 0%, 100%, .1),\n inset 0 -1px 0 rgba(0, 0, 0, .35),\n inset 0 0 0 1px #262a30;\n color: #aab1c1;\n transition:\n background-color .15s,\n color .15s,\n background-image .15s,\n box-shadow .15s;\n}\n.hypurr-connect .btn-raised:hover:not(:disabled) {\n background-color: #15171a;\n background-image:\n linear-gradient(\n 180deg,\n hsla(0, 0%, 100%, .04),\n transparent);\n box-shadow:\n inset 0 1px 0 hsla(0, 0%, 100%, .14),\n inset 0 -1px 0 rgba(0, 0, 0, .4),\n inset 0 0 0 1px #444548;\n color: #d1d5db;\n}\n.hypurr-connect .btn-raised-active {\n background-color: #1e2124;\n background-image:\n linear-gradient(\n 180deg,\n hsla(0, 0%, 100%, .05),\n transparent);\n box-shadow:\n inset 0 1px 0 hsla(0, 0%, 100%, .18),\n inset 0 -1px 0 rgba(0, 0, 0, .45),\n inset 0 0 0 1px #4b4d50,\n 0 1px 2px rgba(0, 0, 0, .5);\n color: #fff;\n}\n.hypurr-connect .btn-raised-active,\n.hypurr-connect .btn-raised-disabled {\n transition:\n background-color .15s,\n color .15s,\n background-image .15s,\n box-shadow .15s;\n}\n.hypurr-connect .btn-raised-disabled {\n background-color: #0d1219;\n background-image:\n linear-gradient(\n 180deg,\n hsla(0, 0%, 100%, .02),\n transparent);\n box-shadow:\n inset 0 1px 0 hsla(0, 0%, 100%, .05),\n inset 0 -1px 0 rgba(0, 0, 0, .25),\n inset 0 0 0 1px #1c2026;\n color: #7d8597;\n cursor: not-allowed;\n}\n.hypurr-connect .\\!visible {\n visibility: visible !important;\n}\n.hypurr-connect .visible {\n visibility: visible;\n}\n.hypurr-connect .fixed {\n position: fixed;\n}\n.hypurr-connect .absolute {\n position: absolute;\n}\n.hypurr-connect .relative {\n position: relative;\n}\n.hypurr-connect .inset-0 {\n inset: 0;\n}\n.hypurr-connect .right-2 {\n right: .5rem;\n}\n.hypurr-connect .right-6 {\n right: 1.5rem;\n}\n.hypurr-connect .top-1\\/2 {\n top: 50%;\n}\n.hypurr-connect .z-\\[100\\] {\n z-index: 100;\n}\n.hypurr-connect .z-\\[101\\] {\n z-index: 101;\n}\n.hypurr-connect .z-\\[110\\] {\n z-index: 110;\n}\n.hypurr-connect .z-\\[111\\] {\n z-index: 111;\n}\n.hypurr-connect .mb-1\\.5 {\n margin-bottom: .375rem;\n}\n.hypurr-connect .mb-2 {\n margin-bottom: .5rem;\n}\n.hypurr-connect .mt-0\\.5 {\n margin-top: .125rem;\n}\n.hypurr-connect .mt-1 {\n margin-top: .25rem;\n}\n.hypurr-connect .mt-1\\.5 {\n margin-top: .375rem;\n}\n.hypurr-connect .block {\n display: block;\n}\n.hypurr-connect .inline-block {\n display: inline-block;\n}\n.hypurr-connect .inline {\n display: inline;\n}\n.hypurr-connect .flex {\n display: flex;\n}\n.hypurr-connect .inline-flex {\n display: inline-flex;\n}\n.hypurr-connect .grid {\n display: grid;\n}\n.hypurr-connect .contents {\n display: contents;\n}\n.hypurr-connect .hidden {\n display: none;\n}\n.hypurr-connect .h-8 {\n height: 2rem;\n}\n.hypurr-connect .w-8 {\n width: 2rem;\n}\n.hypurr-connect .w-full {\n width: 100%;\n}\n.hypurr-connect .min-w-0 {\n min-width: 0;\n}\n.hypurr-connect .max-w-md {\n max-width: 28rem;\n}\n.hypurr-connect .flex-1 {\n flex: 1 1 0%;\n}\n.hypurr-connect .flex-shrink-0 {\n flex-shrink: 0;\n}\n.hypurr-connect .-translate-y-1\\/2 {\n --tw-translate-y:-50%;\n}\n.hypurr-connect .-translate-y-1\\/2,\n.hypurr-connect .transform {\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.hypurr-connect .cursor-not-allowed {\n cursor: not-allowed;\n}\n.hypurr-connect .grid-cols-4 {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n}\n.hypurr-connect .items-start {\n align-items: flex-start;\n}\n.hypurr-connect .items-center {\n align-items: center;\n}\n.hypurr-connect .justify-center {\n justify-content: center;\n}\n.hypurr-connect .justify-between {\n justify-content: space-between;\n}\n.hypurr-connect .gap-1\\.5 {\n gap: .375rem;\n}\n.hypurr-connect .gap-2 {\n gap: .5rem;\n}\n.hypurr-connect .gap-3 {\n gap: .75rem;\n}\n.hypurr-connect :is(.space-y-2 > :not([hidden]) ~ :not([hidden])) {\n --tw-space-y-reverse:0;\n margin-top: calc(.5rem*(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(.5rem*var(--tw-space-y-reverse));\n}\n.hypurr-connect :is(.space-y-3 > :not([hidden]) ~ :not([hidden])) {\n --tw-space-y-reverse:0;\n margin-top: calc(.75rem*(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(.75rem*var(--tw-space-y-reverse));\n}\n.hypurr-connect :is(.space-y-4 > :not([hidden]) ~ :not([hidden])) {\n --tw-space-y-reverse:0;\n margin-top: calc(1rem*(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1rem*var(--tw-space-y-reverse));\n}\n.hypurr-connect .overflow-hidden {\n overflow: hidden;\n}\n.hypurr-connect .truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.hypurr-connect .break-all {\n word-break: break-all;\n}\n.hypurr-connect .rounded {\n border-radius: .25rem;\n}\n.hypurr-connect .rounded-lg {\n border-radius: .5rem;\n}\n.hypurr-connect .rounded-md {\n border-radius: .375rem;\n}\n.hypurr-connect .border {\n border-width: 1px;\n}\n.hypurr-connect .border-b {\n border-bottom-width: 1px;\n}\n.hypurr-connect .border-amber-500\\/25 {\n border-color: rgba(245, 158, 11, .25);\n}\n.hypurr-connect .border-gray-700 {\n --tw-border-opacity:1;\n border-color: rgb(55 65 81/var(--tw-border-opacity,1));\n}\n.hypurr-connect .border-purple-500 {\n --tw-border-opacity:1;\n border-color: rgb(185 125 241/var(--tw-border-opacity,1));\n}\n.hypurr-connect .border-surface-bd {\n --tw-border-opacity:1;\n border-color: rgb(38 42 48/var(--tw-border-opacity,1));\n}\n.hypurr-connect .border-trade-down\\/20 {\n border-color: hsla(0, 91%, 71%, .2);\n}\n.hypurr-connect .border-trade-down\\/50 {\n border-color: hsla(0, 91%, 71%, .5);\n}\n.hypurr-connect .border-white\\/\\[0\\.06\\] {\n border-color: hsla(0, 0%, 100%, .06);\n}\n.hypurr-connect .border-white\\/\\[0\\.08\\] {\n border-color: hsla(0, 0%, 100%, .08);\n}\n.hypurr-connect .bg-amber-500\\/\\[0\\.08\\] {\n background-color: rgba(245, 158, 11, .08);\n}\n.hypurr-connect .bg-black\\/70 {\n background-color: rgba(0, 0, 0, .7);\n}\n.hypurr-connect .bg-surface-btn\\/90 {\n background-color: rgba(13, 18, 25, .9);\n}\n.hypurr-connect .bg-surface-modal {\n --tw-bg-opacity:1;\n background-color: rgb(14 18 24/var(--tw-bg-opacity,1));\n}\n.hypurr-connect .bg-trade-down\\/\\[0\\.08\\] {\n background-color: hsla(0, 91%, 71%, .08);\n}\n.hypurr-connect .bg-transparent {\n background-color: transparent;\n}\n.hypurr-connect .bg-white\\/\\[0\\.03\\] {\n background-color: hsla(0, 0%, 100%, .03);\n}\n.hypurr-connect .bg-white\\/\\[0\\.06\\] {\n background-color: hsla(0, 0%, 100%, .06);\n}\n.hypurr-connect .p-1\\.5 {\n padding: .375rem;\n}\n.hypurr-connect .p-3 {\n padding: .75rem;\n}\n.hypurr-connect .p-4 {\n padding: 1rem;\n}\n.hypurr-connect .px-3 {\n padding-left: .75rem;\n padding-right: .75rem;\n}\n.hypurr-connect .px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n.hypurr-connect .py-1\\.5 {\n padding-top: .375rem;\n padding-bottom: .375rem;\n}\n.hypurr-connect .py-2 {\n padding-top: .5rem;\n padding-bottom: .5rem;\n}\n.hypurr-connect .py-2\\.5 {\n padding-top: .625rem;\n padding-bottom: .625rem;\n}\n.hypurr-connect .py-5 {\n padding-top: 1.25rem;\n}\n.hypurr-connect .pb-5,\n.hypurr-connect .py-5 {\n padding-bottom: 1.25rem;\n}\n.hypurr-connect .pb-6 {\n padding-bottom: 1.5rem;\n}\n.hypurr-connect .pr-11 {\n padding-right: 2.75rem;\n}\n.hypurr-connect .pt-5 {\n padding-top: 1.25rem;\n}\n.hypurr-connect .pt-6 {\n padding-top: 1.5rem;\n}\n.hypurr-connect .font-mono {\n font-family:\n Google Sans Code,\n Roboto Mono,\n ui-monospace,\n SFMono-Regular,\n Menlo,\n Monaco,\n Consolas,\n monospace;\n}\n.hypurr-connect .font-sans {\n font-family:\n Inter,\n ui-sans-serif,\n system-ui,\n -apple-system,\n BlinkMacSystemFont,\n Segoe UI,\n Roboto,\n Helvetica Neue,\n Arial,\n sans-serif;\n}\n.hypurr-connect .text-base {\n font-size: 12.5px;\n line-height: 1rem;\n}\n.hypurr-connect .text-lg {\n font-size: 14px;\n line-height: 1.25rem;\n}\n.hypurr-connect .font-medium {\n font-weight: 500;\n}\n.hypurr-connect .font-semibold {\n font-weight: 600;\n}\n.hypurr-connect .uppercase {\n text-transform: uppercase;\n}\n.hypurr-connect .tabular-nums {\n --tw-numeric-spacing:tabular-nums;\n font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);\n}\n.hypurr-connect .tracking-\\[0\\.1em\\] {\n letter-spacing: .1em;\n}\n.hypurr-connect .text-amber-200 {\n --tw-text-opacity:1;\n color: rgb(253 230 138/var(--tw-text-opacity,1));\n}\n.hypurr-connect .text-amber-400 {\n --tw-text-opacity:1;\n color: rgb(251 191 36/var(--tw-text-opacity,1));\n}\n.hypurr-connect .text-gray-400 {\n --tw-text-opacity:1;\n color: rgb(170 177 193/var(--tw-text-opacity,1));\n}\n.hypurr-connect .text-gray-500 {\n --tw-text-opacity:1;\n color: rgb(107 114 128/var(--tw-text-opacity,1));\n}\n.hypurr-connect .text-gray-600 {\n --tw-text-opacity:1;\n color: rgb(125 133 151/var(--tw-text-opacity,1));\n}\n.hypurr-connect .text-purple-400 {\n --tw-text-opacity:1;\n color: rgb(216 180 254/var(--tw-text-opacity,1));\n}\n.hypurr-connect .text-trade-down {\n --tw-text-opacity:1;\n color: rgb(248 113 113/var(--tw-text-opacity,1));\n}\n.hypurr-connect .text-trade-up {\n --tw-text-opacity:1;\n color: rgb(52 211 153/var(--tw-text-opacity,1));\n}\n.hypurr-connect .text-white {\n --tw-text-opacity:1;\n color: rgb(255 255 255/var(--tw-text-opacity,1));\n}\n.hypurr-connect .placeholder-gray-600::-moz-placeholder {\n --tw-placeholder-opacity:1;\n color: rgb(125 133 151/var(--tw-placeholder-opacity,1));\n}\n.hypurr-connect .placeholder-gray-600::placeholder {\n --tw-placeholder-opacity:1;\n color: rgb(125 133 151/var(--tw-placeholder-opacity,1));\n}\n.hypurr-connect .shadow-modal {\n --tw-shadow:0 25px 50px -12px rgba(0,0,0,.6);\n --tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);\n box-shadow:\n var(--tw-ring-offset-shadow,0 0 #0000),\n var(--tw-ring-shadow,0 0 #0000),\n var(--tw-shadow);\n}\n.hypurr-connect .outline {\n outline-style: solid;\n}\n.hypurr-connect .blur {\n --tw-blur:blur(8px);\n}\n.hypurr-connect .blur,\n.hypurr-connect .drop-shadow {\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.hypurr-connect .drop-shadow {\n --tw-drop-shadow:drop-shadow(0 1px 2px rgba(0,0,0,.1)) drop-shadow(0 1px 1px rgba(0,0,0,.06));\n}\n.hypurr-connect .filter {\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.hypurr-connect .backdrop-blur-sm {\n --tw-backdrop-blur:blur(4px);\n -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n}\n.hypurr-connect .transition {\n transition-property:\n color,\n background-color,\n border-color,\n text-decoration-color,\n fill,\n stroke,\n opacity,\n box-shadow,\n transform,\n filter,\n -webkit-backdrop-filter;\n transition-property:\n color,\n background-color,\n border-color,\n text-decoration-color,\n fill,\n stroke,\n opacity,\n box-shadow,\n transform,\n filter,\n backdrop-filter;\n transition-property:\n color,\n background-color,\n border-color,\n text-decoration-color,\n fill,\n stroke,\n opacity,\n box-shadow,\n transform,\n filter,\n backdrop-filter,\n -webkit-backdrop-filter;\n transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n transition-duration: .15s;\n}\n.hypurr-connect .transition-colors {\n transition-property:\n color,\n background-color,\n border-color,\n text-decoration-color,\n fill,\n stroke;\n transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n transition-duration: .15s;\n}\n.hypurr-connect .hover\\:bg-purple-500\\/10:hover {\n background-color: rgba(185, 125, 241, .1);\n}\n.hypurr-connect .hover\\:text-gray-300:hover {\n --tw-text-opacity:1;\n color: rgb(209 213 219/var(--tw-text-opacity,1));\n}\n.hypurr-connect .hover\\:text-white:hover {\n --tw-text-opacity:1;\n color: rgb(255 255 255/var(--tw-text-opacity,1));\n}\n.hypurr-connect .focus\\:outline-none:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n.hypurr-connect .disabled\\:cursor-not-allowed:disabled {\n cursor: not-allowed;\n}\n.hypurr-connect .disabled\\:opacity-40:disabled {\n opacity: .4;\n}\n.hypurr-connect .disabled\\:opacity-50:disabled {\n opacity: .5;\n}\n");
24
+ styleInject(".hypurr-connect .btn-raised {\n background-color: rgb(var(--btn-bg));\n background-image:\n linear-gradient(\n to bottom,\n rgb(var(--btn-bevel)/.03),\n transparent);\n box-shadow:\n inset 0 1px 0 rgb(var(--btn-bevel)/.1),\n inset 0 -1px 0 rgba(0, 0, 0, .35),\n inset 0 0 0 1px rgb(var(--btn-ring));\n color: rgb(var(--btn-fg));\n transition:\n background-color .15s,\n color .15s,\n background-image .15s,\n box-shadow .15s;\n}\n.hypurr-connect .btn-raised:hover:not(:disabled) {\n background-color: rgb(var(--surface-btn-hover));\n background-image:\n linear-gradient(\n to bottom,\n rgb(var(--btn-bevel)/.04),\n transparent);\n box-shadow:\n inset 0 1px 0 rgb(var(--btn-bevel)/.14),\n inset 0 -1px 0 rgba(0, 0, 0, .4),\n inset 0 0 0 1px rgb(var(--surface-bd-hover));\n color: rgb(var(--content-tertiary));\n}\n.hypurr-connect .btn-raised-active {\n background-color: rgb(var(--surface-btn-active));\n background-image:\n linear-gradient(\n to bottom,\n rgb(var(--btn-bevel)/.05),\n transparent);\n box-shadow:\n inset 0 1px 0 rgb(var(--btn-bevel)/.18),\n inset 0 -1px 0 rgba(0, 0, 0, .45),\n inset 0 0 0 1px rgb(var(--surface-bd-active)),\n 0 1px 2px rgba(0, 0, 0, .5);\n color: rgb(var(--content));\n}\n.hypurr-connect .btn-raised-accent,\n.hypurr-connect .btn-raised-active {\n transition:\n background-color .15s,\n color .15s,\n background-image .15s,\n box-shadow .15s;\n}\n.hypurr-connect .btn-raised-accent {\n background-color: rgb(var(--accent-btn-bg));\n background-image:\n linear-gradient(\n to bottom,\n rgb(var(--btn-bevel)/.03),\n transparent);\n box-shadow: inset 0 1px 0 rgb(var(--btn-bevel)/.1), inset 0 -1px 0 rgb(var(--accent-btn-inset)/.75);\n color: rgb(var(--accent-btn-fg));\n}\n.hypurr-connect .btn-raised-accent:hover:not(:disabled) {\n background-color: rgb(var(--accent-btn-bg-hover));\n background-image:\n linear-gradient(\n to bottom,\n rgb(var(--btn-bevel)/.04),\n transparent);\n box-shadow: inset 0 1px 0 rgb(var(--btn-bevel)/.14), inset 0 -1px 0 rgb(var(--accent-btn-inset)/.8);\n color: rgb(var(--accent-btn-fg-hover));\n}\n.hypurr-connect .btn-raised-disabled {\n background-color: rgb(var(--btn-bg));\n background-image:\n linear-gradient(\n to bottom,\n rgb(var(--btn-bevel)/.02),\n transparent);\n box-shadow:\n inset 0 1px 0 rgb(var(--btn-bevel)/.05),\n inset 0 -1px 0 rgba(0, 0, 0, .25),\n inset 0 0 0 1px rgb(var(--btn-ring)/.6);\n color: rgb(var(--content-faint));\n cursor: not-allowed;\n transition:\n background-color .15s,\n color .15s,\n background-image .15s,\n box-shadow .15s;\n}\n.light .hypurr-connect .btn-raised {\n background-image:\n linear-gradient(\n to bottom,\n #fff,\n rgb(var(--surface-btn)));\n box-shadow:\n 0 1px 2px rgba(15, 23, 42, .08),\n 0 1px 1px rgba(15, 23, 42, .04),\n inset 0 0 0 1px rgb(var(--surface-bd));\n}\n.light .hypurr-connect .btn-raised:hover:not(:disabled) {\n background-image:\n linear-gradient(\n to bottom,\n #fff,\n rgb(var(--surface-btn-hover)));\n box-shadow:\n 0 2px 6px rgba(15, 23, 42, .12),\n 0 1px 2px rgba(15, 23, 42, .06),\n inset 0 0 0 1px rgb(var(--surface-bd-hover));\n}\n.light .hypurr-connect .btn-raised-active {\n background-image: none;\n background-color: rgb(var(--surface-btn-active));\n box-shadow: inset 0 1px 2px rgba(15, 23, 42, .12), inset 0 0 0 1px rgb(var(--surface-bd-active));\n}\n.light .hypurr-connect .btn-raised-disabled {\n background-image: none;\n box-shadow: inset 0 0 0 1px rgb(var(--surface-bd));\n}\n.light .hypurr-connect .btn-raised-accent {\n box-shadow: 0 1px 2px rgba(124, 58, 237, .18), inset 0 0 0 1px rgba(124, 58, 237, .22);\n}\n.light .hypurr-connect .btn-raised-accent:hover:not(:disabled) {\n box-shadow: 0 2px 6px rgba(124, 58, 237, .24), inset 0 0 0 1px rgba(124, 58, 237, .28);\n}\n.hypurr-connect .input {\n background-color: rgb(var(--input-bg));\n box-shadow:\n inset 0 2px 4px rgba(0, 0, 0, .5),\n inset 0 -1px 0 rgb(var(--btn-bevel)/.05),\n inset 0 0 0 1px rgb(var(--input-ring));\n color: rgb(var(--content));\n transition: box-shadow .15s, background-color .15s;\n}\n.hypurr-connect .input::-moz-placeholder {\n color: rgb(var(--content-faint));\n opacity: 1;\n}\n.hypurr-connect .input::placeholder {\n color: rgb(var(--content-faint));\n opacity: 1;\n}\n.hypurr-connect .input:focus,\n.hypurr-connect .input:focus-within {\n background-color: rgb(var(--input-bg-focus));\n box-shadow:\n inset 0 2px 4px rgba(0, 0, 0, .45),\n inset 0 -1px 0 rgb(var(--btn-bevel)/.06),\n inset 0 0 0 1px rgb(var(--input-ring-focus));\n}\n.hypurr-connect .input-error,\n.hypurr-connect .input-error:focus,\n.hypurr-connect .input-error:focus-within {\n box-shadow:\n inset 0 2px 4px rgba(0, 0, 0, .5),\n inset 0 -1px 0 rgb(var(--btn-bevel)/.05),\n inset 0 0 0 1px hsla(0, 91%, 71%, .7);\n}\n.light .hypurr-connect .input {\n box-shadow: inset 0 2px 3px rgba(15, 23, 42, .08), inset 0 0 0 1px rgb(var(--input-ring));\n}\n.light .hypurr-connect .input:focus,\n.light .hypurr-connect .input:focus-within {\n box-shadow: inset 0 2px 4px rgba(15, 23, 42, .1), inset 0 0 0 1px rgb(var(--input-ring-focus));\n}\n.light .hypurr-connect .input-error,\n.light .hypurr-connect .input-error:focus,\n.light .hypurr-connect .input-error:focus-within {\n box-shadow: inset 0 2px 3px rgba(15, 23, 42, .08), inset 0 0 0 1px rgba(220, 38, 38, .7);\n}\n.hypurr-connect .\\!visible {\n visibility: visible !important;\n}\n.hypurr-connect .visible {\n visibility: visible;\n}\n.hypurr-connect .fixed {\n position: fixed;\n}\n.hypurr-connect .absolute {\n position: absolute;\n}\n.hypurr-connect .relative {\n position: relative;\n}\n.hypurr-connect .inset-0 {\n inset: 0;\n}\n.hypurr-connect .right-2 {\n right: .5rem;\n}\n.hypurr-connect .right-6 {\n right: 1.5rem;\n}\n.hypurr-connect .top-1\\/2 {\n top: 50%;\n}\n.hypurr-connect .z-\\[100\\] {\n z-index: 100;\n}\n.hypurr-connect .z-\\[101\\] {\n z-index: 101;\n}\n.hypurr-connect .z-\\[110\\] {\n z-index: 110;\n}\n.hypurr-connect .z-\\[111\\] {\n z-index: 111;\n}\n.hypurr-connect .mb-1\\.5 {\n margin-bottom: .375rem;\n}\n.hypurr-connect .mb-2 {\n margin-bottom: .5rem;\n}\n.hypurr-connect .mt-0\\.5 {\n margin-top: .125rem;\n}\n.hypurr-connect .mt-1 {\n margin-top: .25rem;\n}\n.hypurr-connect .mt-1\\.5 {\n margin-top: .375rem;\n}\n.hypurr-connect .block {\n display: block;\n}\n.hypurr-connect .inline-block {\n display: inline-block;\n}\n.hypurr-connect .inline {\n display: inline;\n}\n.hypurr-connect .flex {\n display: flex;\n}\n.hypurr-connect .inline-flex {\n display: inline-flex;\n}\n.hypurr-connect .grid {\n display: grid;\n}\n.hypurr-connect .contents {\n display: contents;\n}\n.hypurr-connect .hidden {\n display: none;\n}\n.hypurr-connect .h-8 {\n height: 2rem;\n}\n.hypurr-connect .w-8 {\n width: 2rem;\n}\n.hypurr-connect .w-full {\n width: 100%;\n}\n.hypurr-connect .min-w-0 {\n min-width: 0;\n}\n.hypurr-connect .max-w-md {\n max-width: 28rem;\n}\n.hypurr-connect .flex-1 {\n flex: 1 1 0%;\n}\n.hypurr-connect .flex-shrink-0 {\n flex-shrink: 0;\n}\n.hypurr-connect .-translate-y-1\\/2 {\n --tw-translate-y:-50%;\n}\n.hypurr-connect .-translate-y-1\\/2,\n.hypurr-connect .transform {\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.hypurr-connect .grid-cols-4 {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n}\n.hypurr-connect .items-start {\n align-items: flex-start;\n}\n.hypurr-connect .items-center {\n align-items: center;\n}\n.hypurr-connect .justify-center {\n justify-content: center;\n}\n.hypurr-connect .justify-between {\n justify-content: space-between;\n}\n.hypurr-connect .gap-1\\.5 {\n gap: .375rem;\n}\n.hypurr-connect .gap-2 {\n gap: .5rem;\n}\n.hypurr-connect .gap-3 {\n gap: .75rem;\n}\n.hypurr-connect :is(.space-y-2 > :not([hidden]) ~ :not([hidden])) {\n --tw-space-y-reverse:0;\n margin-top: calc(.5rem*(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(.5rem*var(--tw-space-y-reverse));\n}\n.hypurr-connect :is(.space-y-3 > :not([hidden]) ~ :not([hidden])) {\n --tw-space-y-reverse:0;\n margin-top: calc(.75rem*(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(.75rem*var(--tw-space-y-reverse));\n}\n.hypurr-connect :is(.space-y-4 > :not([hidden]) ~ :not([hidden])) {\n --tw-space-y-reverse:0;\n margin-top: calc(1rem*(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1rem*var(--tw-space-y-reverse));\n}\n.hypurr-connect .overflow-hidden {\n overflow: hidden;\n}\n.hypurr-connect .truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.hypurr-connect .break-all {\n word-break: break-all;\n}\n.hypurr-connect .rounded {\n border-radius: .25rem;\n}\n.hypurr-connect .rounded-lg {\n border-radius: .5rem;\n}\n.hypurr-connect .rounded-md {\n border-radius: .375rem;\n}\n.hypurr-connect .border {\n border-width: 1px;\n}\n.hypurr-connect .border-b {\n border-bottom-width: 1px;\n}\n.hypurr-connect .border-amber-500\\/25 {\n border-color: rgb(var(--amber-500)/.25);\n}\n.hypurr-connect .border-line {\n --tw-border-opacity:1;\n border-color: rgb(var(--line)/var(--tw-border-opacity,1));\n}\n.hypurr-connect .border-line-strong {\n --tw-border-opacity:1;\n border-color: rgb(var(--line-strong)/var(--tw-border-opacity,1));\n}\n.hypurr-connect .border-surface-bd {\n --tw-border-opacity:1;\n border-color: rgb(var(--surface-bd)/var(--tw-border-opacity,1));\n}\n.hypurr-connect .border-surface-bd-active {\n --tw-border-opacity:1;\n border-color: rgb(var(--surface-bd-active)/var(--tw-border-opacity,1));\n}\n.hypurr-connect .border-trade-down\\/20 {\n border-color: rgb(var(--trade-down)/.2);\n}\n.hypurr-connect .bg-amber-500\\/\\[0\\.08\\] {\n background-color: rgb(var(--amber-500)/.08);\n}\n.hypurr-connect .bg-overlay\\/70 {\n background-color: rgb(var(--overlay)/.7);\n}\n.hypurr-connect .bg-surface-btn {\n --tw-bg-opacity:1;\n background-color: rgb(var(--surface-btn)/var(--tw-bg-opacity,1));\n}\n.hypurr-connect .bg-surface-btn-active {\n --tw-bg-opacity:1;\n background-color: rgb(var(--surface-btn-active)/var(--tw-bg-opacity,1));\n}\n.hypurr-connect .bg-surface-btn-hover {\n --tw-bg-opacity:1;\n background-color: rgb(var(--surface-btn-hover)/var(--tw-bg-opacity,1));\n}\n.hypurr-connect .bg-surface-modal {\n --tw-bg-opacity:1;\n background-color: rgb(var(--surface-modal)/var(--tw-bg-opacity,1));\n}\n.hypurr-connect .bg-trade-down\\/\\[0\\.08\\] {\n background-color: rgb(var(--trade-down)/.08);\n}\n.hypurr-connect .p-1\\.5 {\n padding: .375rem;\n}\n.hypurr-connect .p-3 {\n padding: .75rem;\n}\n.hypurr-connect .p-4 {\n padding: 1rem;\n}\n.hypurr-connect .px-2 {\n padding-left: .5rem;\n padding-right: .5rem;\n}\n.hypurr-connect .px-3 {\n padding-left: .75rem;\n padding-right: .75rem;\n}\n.hypurr-connect .px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n.hypurr-connect .py-1 {\n padding-top: .25rem;\n padding-bottom: .25rem;\n}\n.hypurr-connect .py-1\\.5 {\n padding-top: .375rem;\n padding-bottom: .375rem;\n}\n.hypurr-connect .py-2 {\n padding-top: .5rem;\n padding-bottom: .5rem;\n}\n.hypurr-connect .py-2\\.5 {\n padding-top: .625rem;\n padding-bottom: .625rem;\n}\n.hypurr-connect .py-5 {\n padding-top: 1.25rem;\n}\n.hypurr-connect .pb-5,\n.hypurr-connect .py-5 {\n padding-bottom: 1.25rem;\n}\n.hypurr-connect .pb-6 {\n padding-bottom: 1.5rem;\n}\n.hypurr-connect .pr-11 {\n padding-right: 2.75rem;\n}\n.hypurr-connect .pt-5 {\n padding-top: 1.25rem;\n}\n.hypurr-connect .pt-6 {\n padding-top: 1.5rem;\n}\n.hypurr-connect .font-mono {\n font-family:\n Google Sans Code,\n Roboto Mono,\n ui-monospace,\n SFMono-Regular,\n Menlo,\n Monaco,\n Consolas,\n monospace;\n}\n.hypurr-connect .font-sans {\n font-family:\n Inter,\n ui-sans-serif,\n system-ui,\n -apple-system,\n BlinkMacSystemFont,\n Segoe UI,\n Roboto,\n Helvetica Neue,\n Arial,\n sans-serif;\n}\n.hypurr-connect .text-base {\n font-size: 12.5px;\n line-height: 1rem;\n}\n.hypurr-connect .text-lg {\n font-size: 14px;\n line-height: 1.25rem;\n}\n.hypurr-connect .font-medium {\n font-weight: 500;\n}\n.hypurr-connect .uppercase {\n text-transform: uppercase;\n}\n.hypurr-connect .tabular-nums {\n --tw-numeric-spacing:tabular-nums;\n font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);\n}\n.hypurr-connect .tracking-\\[0\\.1em\\] {\n letter-spacing: .1em;\n}\n.hypurr-connect .text-amber-200 {\n --tw-text-opacity:1;\n color: rgb(var(--amber-200)/var(--tw-text-opacity,1));\n}\n.hypurr-connect .text-amber-400 {\n --tw-text-opacity:1;\n color: rgb(var(--amber-400)/var(--tw-text-opacity,1));\n}\n.hypurr-connect .text-content {\n --tw-text-opacity:1;\n color: rgb(var(--content)/var(--tw-text-opacity,1));\n}\n.hypurr-connect .text-content-faint {\n --tw-text-opacity:1;\n color: rgb(var(--content-faint)/var(--tw-text-opacity,1));\n}\n.hypurr-connect .text-content-muted {\n --tw-text-opacity:1;\n color: rgb(var(--content-muted)/var(--tw-text-opacity,1));\n}\n.hypurr-connect .text-content-subtle {\n --tw-text-opacity:1;\n color: rgb(var(--content-subtle)/var(--tw-text-opacity,1));\n}\n.hypurr-connect .text-trade-down {\n --tw-text-opacity:1;\n color: rgb(var(--trade-down)/var(--tw-text-opacity,1));\n}\n.hypurr-connect .text-trade-up {\n --tw-text-opacity:1;\n color: rgb(var(--trade-up)/var(--tw-text-opacity,1));\n}\n.hypurr-connect .placeholder-content-faint::-moz-placeholder {\n --tw-placeholder-opacity:1;\n color: rgb(var(--content-faint)/var(--tw-placeholder-opacity,1));\n}\n.hypurr-connect .placeholder-content-faint::placeholder {\n --tw-placeholder-opacity:1;\n color: rgb(var(--content-faint)/var(--tw-placeholder-opacity,1));\n}\n.hypurr-connect .shadow-modal {\n --tw-shadow:var(--shadow-modal);\n --tw-shadow-colored:var(--shadow-modal);\n box-shadow:\n var(--tw-ring-offset-shadow,0 0 #0000),\n var(--tw-ring-shadow,0 0 #0000),\n var(--tw-shadow);\n}\n.hypurr-connect .outline {\n outline-style: solid;\n}\n.hypurr-connect .blur {\n --tw-blur:blur(8px);\n}\n.hypurr-connect .blur,\n.hypurr-connect .drop-shadow {\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.hypurr-connect .drop-shadow {\n --tw-drop-shadow:drop-shadow(0 1px 2px rgba(0,0,0,.1)) drop-shadow(0 1px 1px rgba(0,0,0,.06));\n}\n.hypurr-connect .filter {\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.hypurr-connect .backdrop-blur-sm {\n --tw-backdrop-blur:blur(4px);\n -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n}\n.hypurr-connect .transition {\n transition-property:\n color,\n background-color,\n border-color,\n text-decoration-color,\n fill,\n stroke,\n opacity,\n box-shadow,\n transform,\n filter,\n -webkit-backdrop-filter;\n transition-property:\n color,\n background-color,\n border-color,\n text-decoration-color,\n fill,\n stroke,\n opacity,\n box-shadow,\n transform,\n filter,\n backdrop-filter;\n transition-property:\n color,\n background-color,\n border-color,\n text-decoration-color,\n fill,\n stroke,\n opacity,\n box-shadow,\n transform,\n filter,\n backdrop-filter,\n -webkit-backdrop-filter;\n transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n transition-duration: .15s;\n}\n.hypurr-connect .transition-colors {\n transition-property:\n color,\n background-color,\n border-color,\n text-decoration-color,\n fill,\n stroke;\n transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n transition-duration: .15s;\n}\n:root {\n --surface-btn:13 18 25;\n --surface-btn-hover:21 23 26;\n --surface-btn-active:30 33 36;\n --surface-bd:38 42 48;\n --surface-bd-hover:68 69 72;\n --surface-bd-active:75 77 80;\n --surface-modal:14 18 24;\n --surface-dropdown:17 24 32;\n --surface-base:11 14 17;\n --surface-deep:9 11 14;\n --surface-raised:17 24 39;\n --surface-elevated:31 41 55;\n --surface-inset:55 65 81;\n --surface-inverse:255 255 255;\n --content:243 244 246;\n --content-secondary:229 231 235;\n --content-tertiary:209 213 219;\n --content-muted:170 177 193;\n --content-subtle:125 133 151;\n --content-faint:107 114 128;\n --content-disabled:55 65 81;\n --line:31 41 55;\n --line-strong:55 65 81;\n --line-subtle:17 24 39;\n --line-inverse:255 255 255;\n --overlay:0 0 0;\n --accent:168 85 247;\n --trade-up:52 211 153;\n --trade-down:248 113 113;\n --purple-400:216 180 254;\n --purple-500:185 125 241;\n --blue-500:90 153 255;\n --green-400:83 203 127;\n --amber-200:253 230 138;\n --amber-400:251 191 36;\n --amber-500:245 158 11;\n --btn-bg:13 18 25;\n --btn-fg:170 177 193;\n --btn-ring:38 42 48;\n --btn-bevel:255 255 255;\n --accent-btn-bg:37 28 57;\n --accent-btn-bg-hover:52 35 80;\n --accent-btn-fg:216 180 254;\n --accent-btn-fg-hover:233 213 255;\n --accent-btn-inset:15 5 35;\n --input-bg:18 23 31;\n --input-bg-focus:26 33 44;\n --input-ring:45 53 64;\n --input-ring-focus:59 69 82;\n --shadow-modal:0 25px 50px -12px rgba(0,0,0,.6);\n --shadow-dropdown:0 8px 40px rgba(0,0,0,.85);\n}\n.light {\n --surface-btn:244 246 249;\n --surface-btn-hover:236 239 243;\n --surface-btn-active:226 230 236;\n --surface-bd:214 220 228;\n --surface-bd-hover:194 201 211;\n --surface-bd-active:168 176 191;\n --surface-modal:255 255 255;\n --surface-dropdown:255 255 255;\n --surface-base:245 244 249;\n --surface-deep:233 236 242;\n --surface-raised:255 255 255;\n --surface-elevated:228 231 237;\n --surface-inset:225 229 235;\n --surface-inverse:17 24 39;\n --content:17 24 39;\n --content-secondary:31 41 55;\n --content-tertiary:55 65 81;\n --content-muted:91 101 115;\n --content-subtle:107 114 128;\n --content-faint:148 163 184;\n --content-disabled:179 185 196;\n --line:222 226 234;\n --line-strong:205 211 220;\n --line-subtle:238 240 243;\n --line-inverse:17 24 39;\n --overlay:0 0 0;\n --accent:147 51 234;\n --trade-up:5 150 105;\n --trade-down:220 38 38;\n --purple-400:124 58 237;\n --purple-500:109 40 217;\n --blue-500:37 99 235;\n --green-400:22 163 74;\n --amber-200:161 98 7;\n --amber-400:180 83 9;\n --amber-500:180 83 9;\n --btn-bg:255 255 255;\n --btn-fg:71 85 105;\n --btn-ring:217 221 228;\n --btn-bevel:15 23 42;\n --accent-btn-bg:243 232 255;\n --accent-btn-bg-hover:233 213 255;\n --accent-btn-fg:109 40 217;\n --accent-btn-fg-hover:88 28 135;\n --accent-btn-inset:147 51 234;\n --input-bg:238 240 246;\n --input-bg-focus:230 232 240;\n --input-ring:200 206 218;\n --input-ring-focus:168 175 192;\n --shadow-modal:0 16px 40px -12px rgba(15,23,42,.24),0 4px 12px -4px rgba(15,23,42,.12);\n --shadow-dropdown:0 12px 28px -8px rgba(15,23,42,.2),0 2px 8px -2px rgba(15,23,42,.1);\n}\n.hypurr-connect .hover\\:border-surface-bd-hover:hover {\n --tw-border-opacity:1;\n border-color: rgb(var(--surface-bd-hover)/var(--tw-border-opacity,1));\n}\n.hypurr-connect .hover\\:bg-surface-btn-hover:hover {\n --tw-bg-opacity:1;\n background-color: rgb(var(--surface-btn-hover)/var(--tw-bg-opacity,1));\n}\n.hypurr-connect .hover\\:text-content:hover {\n --tw-text-opacity:1;\n color: rgb(var(--content)/var(--tw-text-opacity,1));\n}\n.hypurr-connect .hover\\:text-content-tertiary:hover {\n --tw-text-opacity:1;\n color: rgb(var(--content-tertiary)/var(--tw-text-opacity,1));\n}\n.hypurr-connect .focus\\:outline-none:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n.hypurr-connect .disabled\\:cursor-not-allowed:disabled {\n cursor: not-allowed;\n}\n.hypurr-connect .disabled\\:opacity-40:disabled {\n opacity: .4;\n}\n.hypurr-connect .disabled\\:opacity-50:disabled {\n opacity: .5;\n}\n");
25
25
 
26
26
  // src/HypurrConnectProvider.tsx
27
27
  import {
@@ -698,7 +698,8 @@ function HypurrConnectProvider({
698
698
  authMethod: "telegram",
699
699
  telegramId: String(tgUser.telegramId),
700
700
  hfunScore: tgUser?.reputation?.hfunScore,
701
- reputationScore: tgUser?.reputation?.reputationScore
701
+ reputationScore: tgUser?.reputation?.reputationScore,
702
+ addressBook: tgUser.addressBook
702
703
  };
703
704
  }
704
705
  if (eoaAddress && authMethod === "eoa") {
@@ -1548,10 +1549,22 @@ import {
1548
1549
  motion,
1549
1550
  useAnimationControls
1550
1551
  } from "framer-motion";
1551
- import {
1552
- useCallback as useCallback2,
1553
- useSyncExternalStore
1554
- } from "react";
1552
+ import { useCallback as useCallback2 } from "react";
1553
+
1554
+ // src/useIsMobile.ts
1555
+ import { useSyncExternalStore } from "react";
1556
+ var MOBILE_BREAKPOINT = 640;
1557
+ var mobileQuery = typeof window !== "undefined" ? window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT}px)`) : null;
1558
+ function subscribeMobile(cb) {
1559
+ mobileQuery?.addEventListener("change", cb);
1560
+ return () => mobileQuery?.removeEventListener("change", cb);
1561
+ }
1562
+ function getSnapshotMobile() {
1563
+ return mobileQuery?.matches ?? false;
1564
+ }
1565
+ function useIsMobile() {
1566
+ return useSyncExternalStore(subscribeMobile, getSnapshotMobile, () => false);
1567
+ }
1555
1568
 
1556
1569
  // src/icons/MetaMaskColorIcon.tsx
1557
1570
  import { jsx as jsx2, jsxs } from "react/jsx-runtime";
@@ -1682,7 +1695,6 @@ function TelegramColorIcon({ style }) {
1682
1695
 
1683
1696
  // src/LoginModal.tsx
1684
1697
  import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
1685
- var MOBILE_BREAKPOINT = 640;
1686
1698
  var DEFAULT_BACKGROUND_COLOR = "rgba(20,20,20,0.95)";
1687
1699
  var btnStyle = {
1688
1700
  display: "flex",
@@ -1744,17 +1756,6 @@ var dividerStyle = {
1744
1756
  background: "rgba(255,255,255,0.05)"
1745
1757
  };
1746
1758
  var iconSize = { width: 26, height: 26 };
1747
- var mobileQuery = typeof window !== "undefined" ? window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT}px)`) : null;
1748
- function subscribeMobile(cb) {
1749
- mobileQuery?.addEventListener("change", cb);
1750
- return () => mobileQuery?.removeEventListener("change", cb);
1751
- }
1752
- function getSnapshotMobile() {
1753
- return mobileQuery?.matches ?? false;
1754
- }
1755
- function useIsMobile() {
1756
- return useSyncExternalStore(subscribeMobile, getSnapshotMobile, () => false);
1757
- }
1758
1759
  function HoverButton({
1759
1760
  onClick,
1760
1761
  children
@@ -2168,7 +2169,7 @@ function createAuthSignatureRequest(chainId, hyperliquidChain, agentAddress, app
2168
2169
  };
2169
2170
  }
2170
2171
  var tabClass = (selected) => `flex-1 py-1.5 rounded text-base font-medium flex items-center justify-center gap-1.5 ${selected ? "btn-raised-active" : "btn-raised"}`;
2171
- var inputClass = (hasError) => `w-full bg-surface-btn/90 border ${hasError ? "border-trade-down/50" : "border-surface-bd"} rounded-lg px-3 py-2.5 text-white placeholder-gray-600 focus:outline-none font-mono text-base`;
2172
+ var inputClass = (hasError) => `input ${hasError ? "input-error" : ""} w-full rounded-lg px-3 py-2.5 text-content placeholder-content-faint focus:outline-none font-mono text-base`;
2172
2173
  var formatAddress = (address) => `${address.slice(0, 6)}...${address.slice(-4)}`;
2173
2174
  function AddWalletModal({
2174
2175
  isOpen,
@@ -2412,7 +2413,7 @@ function AddWalletModal({
2412
2413
  /* @__PURE__ */ jsx6(
2413
2414
  motion2.div,
2414
2415
  {
2415
- className: "fixed inset-0 z-[100] bg-black/70 backdrop-blur-sm",
2416
+ className: "fixed inset-0 z-[100] bg-overlay/70 backdrop-blur-sm",
2416
2417
  initial: { opacity: 0 },
2417
2418
  animate: { opacity: 1 },
2418
2419
  exit: { opacity: 0 },
@@ -2420,250 +2421,257 @@ function AddWalletModal({
2420
2421
  onClick: handleClose
2421
2422
  }
2422
2423
  ),
2423
- /* @__PURE__ */ jsx6("div", { className: "fixed inset-0 z-[101] flex items-center justify-center p-4", children: /* @__PURE__ */ jsxs5(
2424
- motion2.div,
2424
+ /* @__PURE__ */ jsx6(
2425
+ "div",
2425
2426
  {
2426
- className: "relative w-full max-w-md overflow-hidden rounded-lg border border-surface-bd bg-surface-modal font-sans shadow-modal",
2427
- initial: { opacity: 0, y: 8 },
2428
- animate: { opacity: 1, y: 0 },
2429
- exit: { opacity: 0, y: 8 },
2430
- transition: { duration: 0.18, ease: "easeOut" },
2431
- onClick: (event) => event.stopPropagation(),
2432
- children: [
2433
- /* @__PURE__ */ jsxs5("div", { className: "relative flex items-center justify-center border-b border-white/[0.06] px-6 pb-5 pt-6", children: [
2434
- /* @__PURE__ */ jsx6("h3", { className: "text-lg font-semibold text-white", children: "Add Wallet" }),
2435
- /* @__PURE__ */ jsx6(
2436
- "button",
2437
- {
2438
- onClick: handleClose,
2439
- disabled: isProcessing,
2440
- className: "absolute right-6 text-gray-400 transition-colors hover:text-white disabled:cursor-not-allowed disabled:opacity-40",
2441
- "aria-label": "Close",
2442
- children: /* @__PURE__ */ jsx6(X, { size: 16 })
2443
- }
2444
- )
2445
- ] }),
2446
- /* @__PURE__ */ jsx6("div", { className: "flex gap-1.5 px-6 pt-5", children: tabKeys.map((tab) => /* @__PURE__ */ jsx6(
2447
- "button",
2448
- {
2449
- type: "button",
2450
- onClick: () => {
2451
- setError(null);
2452
- setActiveTab(tab);
2453
- },
2454
- className: tabClass(activeTab === tab),
2455
- children: tab === "generate" ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
2456
- /* @__PURE__ */ jsx6(Plus, { size: 13 }),
2457
- " New"
2458
- ] }) : tab === "import" ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
2459
- /* @__PURE__ */ jsx6(KeyRound, { size: 13 }),
2460
- " Import"
2461
- ] }) : tab === "api" ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
2462
- /* @__PURE__ */ jsx6(Wallet, { size: 13 }),
2463
- " Link"
2464
- ] }) : /* @__PURE__ */ jsxs5(Fragment2, { children: [
2465
- /* @__PURE__ */ jsx6(Eye, { size: 13 }),
2466
- " Watch"
2467
- ] })
2468
- },
2469
- tab
2470
- )) }),
2471
- /* @__PURE__ */ jsxs5("div", { className: "px-6 pb-6 pt-5", children: [
2472
- activeTab === "generate" && /* @__PURE__ */ jsxs5("section", { className: "space-y-4", children: [
2473
- /* @__PURE__ */ jsx6("p", { className: "text-base text-gray-400", children: "Create a new Hyperliquid wallet." }),
2474
- /* @__PURE__ */ jsx6(
2475
- WalletNameInput,
2476
- {
2477
- value: newWalletName,
2478
- setValue: setNewWalletName,
2479
- isValid: isValidNewWalletName,
2480
- clearError: () => setError(null),
2481
- placeholder: "MyNewWallet"
2482
- }
2483
- ),
2484
- /* @__PURE__ */ jsx6(
2427
+ className: "fixed inset-0 z-[101] flex items-center justify-center p-4",
2428
+ onClick: handleClose,
2429
+ children: /* @__PURE__ */ jsxs5(
2430
+ motion2.div,
2431
+ {
2432
+ className: "relative w-full max-w-md overflow-hidden rounded-lg border border-line bg-surface-modal font-sans shadow-modal",
2433
+ initial: { opacity: 0, y: 8 },
2434
+ animate: { opacity: 1, y: 0 },
2435
+ exit: { opacity: 0, y: 8 },
2436
+ transition: { duration: 0.18, ease: "easeOut" },
2437
+ onClick: (event) => event.stopPropagation(),
2438
+ children: [
2439
+ /* @__PURE__ */ jsxs5("div", { className: "relative flex items-center justify-center border-b border-line px-6 pb-5 pt-6", children: [
2440
+ /* @__PURE__ */ jsx6("h3", { className: "text-lg font-medium text-content", children: "Add Wallet" }),
2441
+ /* @__PURE__ */ jsx6(
2442
+ "button",
2443
+ {
2444
+ onClick: handleClose,
2445
+ disabled: isProcessing,
2446
+ className: "absolute right-6 text-content-muted transition-colors hover:text-content disabled:cursor-not-allowed disabled:opacity-40",
2447
+ "aria-label": "Close",
2448
+ children: /* @__PURE__ */ jsx6(X, { size: 16 })
2449
+ }
2450
+ )
2451
+ ] }),
2452
+ /* @__PURE__ */ jsx6("div", { className: "flex gap-1.5 px-6 pt-5", children: tabKeys.map((tab) => /* @__PURE__ */ jsx6(
2485
2453
  "button",
2486
2454
  {
2487
- onClick: handleCreateWallet,
2488
- disabled: isProcessing || !isValidNewWalletName,
2489
- className: `flex w-full items-center justify-center gap-2 rounded-lg py-2 text-base font-medium ${!isProcessing && isValidNewWalletName ? "btn-raised" : "btn-raised-disabled"}`,
2490
- children: isProcessing ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
2491
- /* @__PURE__ */ jsx6(Loader2, { size: 14 }),
2492
- " Creating..."
2455
+ type: "button",
2456
+ onClick: () => {
2457
+ setError(null);
2458
+ setActiveTab(tab);
2459
+ },
2460
+ className: tabClass(activeTab === tab),
2461
+ children: tab === "generate" ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
2462
+ /* @__PURE__ */ jsx6(Plus, { size: 13 }),
2463
+ " New"
2464
+ ] }) : tab === "import" ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
2465
+ /* @__PURE__ */ jsx6(KeyRound, { size: 13 }),
2466
+ " Import"
2467
+ ] }) : tab === "api" ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
2468
+ /* @__PURE__ */ jsx6(Wallet, { size: 13 }),
2469
+ " Link"
2493
2470
  ] }) : /* @__PURE__ */ jsxs5(Fragment2, { children: [
2494
- /* @__PURE__ */ jsx6(Plus, { size: 14 }),
2495
- " Create Wallet"
2471
+ /* @__PURE__ */ jsx6(Eye, { size: 13 }),
2472
+ " Watch"
2496
2473
  ] })
2497
- }
2498
- ),
2499
- error && /* @__PURE__ */ jsx6(ErrorBox, { message: error })
2500
- ] }),
2501
- activeTab === "import" && /* @__PURE__ */ jsxs5("section", { className: "space-y-4", children: [
2502
- /* @__PURE__ */ jsx6("p", { className: "text-base text-gray-400", children: "Import a Hyperliquid wallet with its private key." }),
2503
- /* @__PURE__ */ jsx6(
2504
- WalletNameInput,
2505
- {
2506
- value: importWalletName,
2507
- setValue: setImportWalletName,
2508
- isValid: isValidImportWalletName,
2509
- clearError: () => setError(null),
2510
- placeholder: "MyImportedWallet"
2511
- }
2512
- ),
2513
- /* @__PURE__ */ jsxs5("div", { children: [
2514
- /* @__PURE__ */ jsx6("label", { className: "mb-2 block text-base uppercase tracking-[0.1em] text-gray-400", children: "Private Key" }),
2515
- /* @__PURE__ */ jsxs5("div", { className: "relative", children: [
2474
+ },
2475
+ tab
2476
+ )) }),
2477
+ /* @__PURE__ */ jsxs5("div", { className: "px-6 pb-6 pt-5", children: [
2478
+ activeTab === "generate" && /* @__PURE__ */ jsxs5("section", { className: "space-y-4", children: [
2479
+ /* @__PURE__ */ jsx6("p", { className: "text-base text-content-muted", children: "Create a new Hyperliquid wallet." }),
2516
2480
  /* @__PURE__ */ jsx6(
2517
- "input",
2481
+ WalletNameInput,
2518
2482
  {
2519
- type: showImportPrivateKey ? "text" : "password",
2520
- value: importPrivateKey,
2521
- onChange: (event) => {
2522
- setImportPrivateKey(event.target.value);
2523
- setError(null);
2524
- },
2525
- placeholder: "0x...",
2526
- spellCheck: false,
2527
- autoComplete: "off",
2528
- className: `${inputClass(
2529
- !!importPrivateKey && !isValidImportPrivateKey
2530
- )} pr-11`
2483
+ value: newWalletName,
2484
+ setValue: setNewWalletName,
2485
+ isValid: isValidNewWalletName,
2486
+ clearError: () => setError(null),
2487
+ placeholder: "MyNewWallet"
2531
2488
  }
2532
2489
  ),
2533
2490
  /* @__PURE__ */ jsx6(
2534
2491
  "button",
2535
2492
  {
2536
- type: "button",
2537
- onClick: () => setShowImportPrivateKey((visible) => !visible),
2538
- className: "absolute right-2 top-1/2 -translate-y-1/2 p-1.5 text-gray-500 transition-colors hover:text-gray-300",
2539
- "aria-label": showImportPrivateKey ? "Hide private key" : "Show private key",
2540
- children: showImportPrivateKey ? /* @__PURE__ */ jsx6(EyeOff, { size: 15 }) : /* @__PURE__ */ jsx6(Eye, { size: 15 })
2493
+ onClick: handleCreateWallet,
2494
+ disabled: isProcessing || !isValidNewWalletName,
2495
+ className: `flex w-full items-center justify-center gap-2 rounded-lg py-2 text-base font-medium ${!isProcessing && isValidNewWalletName ? "btn-raised" : "btn-raised-disabled"}`,
2496
+ children: isProcessing ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
2497
+ /* @__PURE__ */ jsx6(Loader2, { size: 14 }),
2498
+ " Creating..."
2499
+ ] }) : /* @__PURE__ */ jsxs5(Fragment2, { children: [
2500
+ /* @__PURE__ */ jsx6(Plus, { size: 14 }),
2501
+ " Create Wallet"
2502
+ ] })
2541
2503
  }
2542
- )
2543
- ] })
2544
- ] }),
2545
- /* @__PURE__ */ jsx6(
2546
- "button",
2547
- {
2548
- onClick: handleImportWallet,
2549
- disabled: isProcessing || !isValidImportWalletName || !isValidImportPrivateKey,
2550
- className: `flex w-full items-center justify-center gap-2 rounded-lg border bg-transparent py-2 text-base font-medium transition-colors ${!isProcessing && isValidImportWalletName && isValidImportPrivateKey ? "border-purple-500 text-purple-400 hover:bg-purple-500/10" : "cursor-not-allowed border-gray-700 text-gray-600"}`,
2551
- children: isProcessing ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
2552
- /* @__PURE__ */ jsx6(Loader2, { size: 14 }),
2553
- " Importing..."
2554
- ] }) : /* @__PURE__ */ jsxs5(Fragment2, { children: [
2555
- /* @__PURE__ */ jsx6(KeyRound, { size: 14 }),
2556
- " Import Wallet"
2557
- ] })
2558
- }
2559
- ),
2560
- error && /* @__PURE__ */ jsx6(ErrorBox, { message: error })
2561
- ] }),
2562
- activeTab === "api" && /* @__PURE__ */ jsxs5("section", { className: "space-y-4", children: [
2563
- /* @__PURE__ */ jsx6("p", { className: "text-base text-gray-400", children: "Connect your wallet and sign to link it for trading." }),
2564
- !isWalletConnected || !ownerAddress ? /* @__PURE__ */ jsxs5(
2565
- "button",
2566
- {
2567
- onClick: onConnectWallet,
2568
- className: "btn-raised flex w-full items-center justify-center gap-2 rounded-lg py-2 text-base font-medium",
2569
- children: [
2570
- /* @__PURE__ */ jsx6(Wallet, { size: 14 }),
2571
- " Connect Wallet"
2572
- ]
2573
- }
2574
- ) : /* @__PURE__ */ jsxs5(Fragment2, { children: [
2575
- /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-3 rounded-lg border border-white/[0.06] bg-white/[0.03] px-3 py-2.5", children: [
2576
- /* @__PURE__ */ jsx6("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md border border-white/[0.08] bg-white/[0.06]", children: /* @__PURE__ */ jsx6(Wallet, { size: 14, className: "text-gray-400" }) }),
2577
- /* @__PURE__ */ jsxs5("div", { className: "min-w-0 flex-1", children: [
2578
- /* @__PURE__ */ jsx6("p", { className: "text-base text-gray-400", children: "Connected" }),
2579
- /* @__PURE__ */ jsx6("p", { className: "font-mono text-base text-white", children: formatAddress(ownerAddress) })
2504
+ ),
2505
+ error && /* @__PURE__ */ jsx6(ErrorBox, { message: error })
2506
+ ] }),
2507
+ activeTab === "import" && /* @__PURE__ */ jsxs5("section", { className: "space-y-4", children: [
2508
+ /* @__PURE__ */ jsx6("p", { className: "text-base text-content-muted", children: "Import a Hyperliquid wallet with its private key." }),
2509
+ /* @__PURE__ */ jsx6(
2510
+ WalletNameInput,
2511
+ {
2512
+ value: importWalletName,
2513
+ setValue: setImportWalletName,
2514
+ isValid: isValidImportWalletName,
2515
+ clearError: () => setError(null),
2516
+ placeholder: "MyImportedWallet"
2517
+ }
2518
+ ),
2519
+ /* @__PURE__ */ jsxs5("div", { children: [
2520
+ /* @__PURE__ */ jsx6("label", { className: "mb-2 block text-base uppercase tracking-[0.1em] text-content-muted", children: "Private Key" }),
2521
+ /* @__PURE__ */ jsxs5("div", { className: "relative", children: [
2522
+ /* @__PURE__ */ jsx6(
2523
+ "input",
2524
+ {
2525
+ type: showImportPrivateKey ? "text" : "password",
2526
+ value: importPrivateKey,
2527
+ onChange: (event) => {
2528
+ setImportPrivateKey(event.target.value);
2529
+ setError(null);
2530
+ },
2531
+ placeholder: "0x...",
2532
+ spellCheck: false,
2533
+ autoComplete: "off",
2534
+ className: `${inputClass(
2535
+ !!importPrivateKey && !isValidImportPrivateKey
2536
+ )} pr-11`
2537
+ }
2538
+ ),
2539
+ /* @__PURE__ */ jsx6(
2540
+ "button",
2541
+ {
2542
+ type: "button",
2543
+ onClick: () => setShowImportPrivateKey((visible) => !visible),
2544
+ className: "absolute right-2 top-1/2 -translate-y-1/2 p-1.5 text-content-subtle transition-colors hover:text-content-tertiary",
2545
+ "aria-label": showImportPrivateKey ? "Hide private key" : "Show private key",
2546
+ children: showImportPrivateKey ? /* @__PURE__ */ jsx6(EyeOff, { size: 15 }) : /* @__PURE__ */ jsx6(Eye, { size: 15 })
2547
+ }
2548
+ )
2549
+ ] })
2580
2550
  ] }),
2581
2551
  /* @__PURE__ */ jsx6(
2582
- Check,
2552
+ "button",
2583
2553
  {
2584
- size: 16,
2585
- className: "flex-shrink-0 text-trade-up"
2554
+ onClick: handleImportWallet,
2555
+ disabled: isProcessing || !isValidImportWalletName || !isValidImportPrivateKey,
2556
+ className: `flex w-full items-center justify-center gap-2 rounded-lg py-2 text-base font-medium ${!isProcessing && isValidImportWalletName && isValidImportPrivateKey ? "btn-raised-accent" : "btn-raised-disabled"}`,
2557
+ children: isProcessing ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
2558
+ /* @__PURE__ */ jsx6(Loader2, { size: 14 }),
2559
+ " Importing..."
2560
+ ] }) : /* @__PURE__ */ jsxs5(Fragment2, { children: [
2561
+ /* @__PURE__ */ jsx6(KeyRound, { size: 14 }),
2562
+ " Import Wallet"
2563
+ ] })
2586
2564
  }
2587
- )
2565
+ ),
2566
+ error && /* @__PURE__ */ jsx6(ErrorBox, { message: error })
2588
2567
  ] }),
2589
- /* @__PURE__ */ jsx6(
2590
- WalletNameInput,
2591
- {
2592
- value: walletName,
2593
- setValue: setWalletName,
2594
- isValid: isValidWalletName,
2595
- clearError: () => setError(null),
2596
- placeholder: "MyWallet"
2597
- }
2598
- ),
2599
- /* @__PURE__ */ jsx6(
2600
- ApprovalDurationPicker,
2601
- {
2602
- value: agentApprovalDurationMs,
2603
- onChange: setAgentApprovalDurationMs,
2604
- options: durationOptions,
2605
- disabled: isProcessing
2606
- }
2607
- ),
2608
- /* @__PURE__ */ jsx6(
2609
- "button",
2610
- {
2611
- onClick: handleSignAndAdd,
2612
- disabled: isProcessing || !isValidWalletName,
2613
- className: `flex w-full items-center justify-center gap-2 rounded-lg py-2 text-base font-medium ${!isProcessing && isValidWalletName ? "btn-raised" : "btn-raised-disabled"}`,
2614
- children: isProcessing ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
2615
- /* @__PURE__ */ jsx6(Loader2, { size: 14 }),
2616
- " Signing..."
2617
- ] }) : "Sign & Add Wallet"
2618
- }
2619
- ),
2620
- onDisconnectWallet && /* @__PURE__ */ jsx6(
2621
- "button",
2622
- {
2623
- onClick: onDisconnectWallet,
2624
- className: "w-full py-1.5 text-base text-gray-400 transition-colors hover:text-gray-300",
2625
- children: "Disconnect & use different wallet"
2626
- }
2627
- )
2628
- ] }),
2629
- error && /* @__PURE__ */ jsx6(ErrorBox, { message: error })
2630
- ] }),
2631
- activeTab === "readonly" && onAddReadOnlyWallet && /* @__PURE__ */ jsxs5("section", { className: "space-y-4", children: [
2632
- /* @__PURE__ */ jsx6("p", { className: "text-base text-gray-400", children: "View positions and balances without trading access." }),
2633
- /* @__PURE__ */ jsxs5("div", { children: [
2634
- /* @__PURE__ */ jsx6("label", { className: "mb-2 block text-base uppercase tracking-[0.1em] text-gray-400", children: "Wallet Address" }),
2635
- /* @__PURE__ */ jsx6(
2636
- "input",
2637
- {
2638
- type: "text",
2639
- value: readOnlyAddress,
2640
- onChange: (event) => setReadOnlyAddress(event.target.value),
2641
- placeholder: "0x...",
2642
- className: inputClass()
2643
- }
2644
- )
2645
- ] }),
2646
- /* @__PURE__ */ jsx6(
2647
- "button",
2648
- {
2649
- onClick: handleAddReadOnly,
2650
- disabled: isProcessing || !readOnlyAddress.trim(),
2651
- className: `flex w-full items-center justify-center gap-2 rounded-lg py-2 text-base font-medium ${!isProcessing && readOnlyAddress.trim() ? "btn-raised" : "btn-raised-disabled"}`,
2652
- children: isProcessing ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
2653
- /* @__PURE__ */ jsx6(Loader2, { size: 14 }),
2654
- " Adding..."
2655
- ] }) : /* @__PURE__ */ jsxs5(Fragment2, { children: [
2656
- /* @__PURE__ */ jsx6(Eye, { size: 14 }),
2657
- " Add Watch Wallet"
2658
- ] })
2659
- }
2660
- ),
2661
- error && /* @__PURE__ */ jsx6(ErrorBox, { message: error })
2662
- ] })
2663
- ] })
2664
- ]
2568
+ activeTab === "api" && /* @__PURE__ */ jsxs5("section", { className: "space-y-4", children: [
2569
+ /* @__PURE__ */ jsx6("p", { className: "text-base text-content-muted", children: "Connect your wallet and sign to link it for trading." }),
2570
+ !isWalletConnected || !ownerAddress ? /* @__PURE__ */ jsxs5(
2571
+ "button",
2572
+ {
2573
+ onClick: onConnectWallet,
2574
+ className: "btn-raised flex w-full items-center justify-center gap-2 rounded-lg py-2 text-base font-medium",
2575
+ children: [
2576
+ /* @__PURE__ */ jsx6(Wallet, { size: 14 }),
2577
+ " Connect Wallet"
2578
+ ]
2579
+ }
2580
+ ) : /* @__PURE__ */ jsxs5(Fragment2, { children: [
2581
+ /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-3 rounded-lg border border-line bg-surface-btn px-3 py-2.5", children: [
2582
+ /* @__PURE__ */ jsx6("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md border border-line-strong bg-surface-btn-hover", children: /* @__PURE__ */ jsx6(Wallet, { size: 14, className: "text-content-muted" }) }),
2583
+ /* @__PURE__ */ jsxs5("div", { className: "min-w-0 flex-1", children: [
2584
+ /* @__PURE__ */ jsx6("p", { className: "text-base text-content-muted", children: "Connected" }),
2585
+ /* @__PURE__ */ jsx6("p", { className: "font-mono text-base text-content", children: formatAddress(ownerAddress) })
2586
+ ] }),
2587
+ /* @__PURE__ */ jsx6(
2588
+ Check,
2589
+ {
2590
+ size: 16,
2591
+ className: "flex-shrink-0 text-trade-up"
2592
+ }
2593
+ )
2594
+ ] }),
2595
+ /* @__PURE__ */ jsx6(
2596
+ WalletNameInput,
2597
+ {
2598
+ value: walletName,
2599
+ setValue: setWalletName,
2600
+ isValid: isValidWalletName,
2601
+ clearError: () => setError(null),
2602
+ placeholder: "MyWallet"
2603
+ }
2604
+ ),
2605
+ /* @__PURE__ */ jsx6(
2606
+ ApprovalDurationPicker,
2607
+ {
2608
+ value: agentApprovalDurationMs,
2609
+ onChange: setAgentApprovalDurationMs,
2610
+ options: durationOptions,
2611
+ disabled: isProcessing
2612
+ }
2613
+ ),
2614
+ /* @__PURE__ */ jsx6(
2615
+ "button",
2616
+ {
2617
+ onClick: handleSignAndAdd,
2618
+ disabled: isProcessing || !isValidWalletName,
2619
+ className: `flex w-full items-center justify-center gap-2 rounded-lg py-2 text-base font-medium ${!isProcessing && isValidWalletName ? "btn-raised" : "btn-raised-disabled"}`,
2620
+ children: isProcessing ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
2621
+ /* @__PURE__ */ jsx6(Loader2, { size: 14 }),
2622
+ " Signing..."
2623
+ ] }) : "Sign & Add Wallet"
2624
+ }
2625
+ ),
2626
+ onDisconnectWallet && /* @__PURE__ */ jsx6(
2627
+ "button",
2628
+ {
2629
+ onClick: onDisconnectWallet,
2630
+ className: "w-full py-1.5 text-base text-content-muted transition-colors hover:text-content-tertiary",
2631
+ children: "Disconnect & use different wallet"
2632
+ }
2633
+ )
2634
+ ] }),
2635
+ error && /* @__PURE__ */ jsx6(ErrorBox, { message: error })
2636
+ ] }),
2637
+ activeTab === "readonly" && onAddReadOnlyWallet && /* @__PURE__ */ jsxs5("section", { className: "space-y-4", children: [
2638
+ /* @__PURE__ */ jsx6("p", { className: "text-base text-content-muted", children: "View positions and balances without trading access." }),
2639
+ /* @__PURE__ */ jsxs5("div", { children: [
2640
+ /* @__PURE__ */ jsx6("label", { className: "mb-2 block text-base uppercase tracking-[0.1em] text-content-muted", children: "Wallet Address" }),
2641
+ /* @__PURE__ */ jsx6(
2642
+ "input",
2643
+ {
2644
+ type: "text",
2645
+ value: readOnlyAddress,
2646
+ onChange: (event) => setReadOnlyAddress(event.target.value),
2647
+ placeholder: "0x...",
2648
+ className: inputClass()
2649
+ }
2650
+ )
2651
+ ] }),
2652
+ /* @__PURE__ */ jsx6(
2653
+ "button",
2654
+ {
2655
+ onClick: handleAddReadOnly,
2656
+ disabled: isProcessing || !readOnlyAddress.trim(),
2657
+ className: `flex w-full items-center justify-center gap-2 rounded-lg py-2 text-base font-medium ${!isProcessing && readOnlyAddress.trim() ? "btn-raised" : "btn-raised-disabled"}`,
2658
+ children: isProcessing ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
2659
+ /* @__PURE__ */ jsx6(Loader2, { size: 14 }),
2660
+ " Adding..."
2661
+ ] }) : /* @__PURE__ */ jsxs5(Fragment2, { children: [
2662
+ /* @__PURE__ */ jsx6(Eye, { size: 14 }),
2663
+ " Add Watch Wallet"
2664
+ ] })
2665
+ }
2666
+ ),
2667
+ error && /* @__PURE__ */ jsx6(ErrorBox, { message: error })
2668
+ ] })
2669
+ ] })
2670
+ ]
2671
+ }
2672
+ )
2665
2673
  }
2666
- ) })
2674
+ )
2667
2675
  ] }) });
2668
2676
  }
2669
2677
  function WalletNameInput({
@@ -2674,7 +2682,7 @@ function WalletNameInput({
2674
2682
  placeholder
2675
2683
  }) {
2676
2684
  return /* @__PURE__ */ jsxs5("div", { children: [
2677
- /* @__PURE__ */ jsx6("label", { className: "mb-2 block text-base uppercase tracking-[0.1em] text-gray-400", children: "Wallet Name" }),
2685
+ /* @__PURE__ */ jsx6("label", { className: "mb-2 block text-base uppercase tracking-[0.1em] text-content-muted", children: "Wallet Name" }),
2678
2686
  /* @__PURE__ */ jsx6(
2679
2687
  "input",
2680
2688
  {
@@ -2691,7 +2699,7 @@ function WalletNameInput({
2691
2699
  className: inputClass(!!value && !isValid)
2692
2700
  }
2693
2701
  ),
2694
- /* @__PURE__ */ jsx6("p", { className: "mt-1.5 text-base text-gray-600", children: "Letters, numbers, and / only" })
2702
+ /* @__PURE__ */ jsx6("p", { className: "mt-1.5 text-base text-content-faint", children: "Letters, numbers, and / only" })
2695
2703
  ] });
2696
2704
  }
2697
2705
  function ApprovalDurationPicker({
@@ -2701,14 +2709,14 @@ function ApprovalDurationPicker({
2701
2709
  disabled
2702
2710
  }) {
2703
2711
  return /* @__PURE__ */ jsxs5("div", { children: [
2704
- /* @__PURE__ */ jsx6("label", { className: "mb-2 block text-base uppercase tracking-[0.1em] text-gray-400", children: "Approval Duration" }),
2712
+ /* @__PURE__ */ jsx6("label", { className: "mb-2 block text-base uppercase tracking-[0.1em] text-content-muted", children: "Approval Duration" }),
2705
2713
  /* @__PURE__ */ jsx6("div", { className: "grid grid-cols-4 gap-1.5", children: options.map((option) => /* @__PURE__ */ jsx6(
2706
2714
  "button",
2707
2715
  {
2708
2716
  type: "button",
2709
2717
  onClick: () => onChange(option.durationMs),
2710
2718
  disabled,
2711
- className: `rounded py-1.5 text-base font-medium disabled:cursor-not-allowed disabled:opacity-50 ${value === option.durationMs ? "btn-raised-active" : "btn-raised"}`,
2719
+ className: `rounded border py-1.5 text-base font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${value === option.durationMs ? "bg-surface-btn-active text-content border-surface-bd-active" : "bg-surface-btn text-content-muted border-surface-bd hover:bg-surface-btn-hover hover:border-surface-bd-hover hover:text-content-tertiary"}`,
2712
2720
  children: option.label
2713
2721
  },
2714
2722
  `${option.label}-${option.durationMs}`
@@ -2841,7 +2849,7 @@ function RenewAgentModal({
2841
2849
  /* @__PURE__ */ jsx7(
2842
2850
  motion3.div,
2843
2851
  {
2844
- className: "fixed inset-0 z-[110] bg-black/70 backdrop-blur-sm",
2852
+ className: "fixed inset-0 z-[110] bg-overlay/70 backdrop-blur-sm",
2845
2853
  initial: { opacity: 0 },
2846
2854
  animate: { opacity: 1 },
2847
2855
  exit: { opacity: 0 },
@@ -2849,153 +2857,160 @@ function RenewAgentModal({
2849
2857
  onClick: handleClose
2850
2858
  }
2851
2859
  ),
2852
- /* @__PURE__ */ jsx7("div", { className: "fixed inset-0 z-[111] flex items-center justify-center p-4", children: /* @__PURE__ */ jsxs6(
2853
- motion3.div,
2860
+ /* @__PURE__ */ jsx7(
2861
+ "div",
2854
2862
  {
2855
- className: "relative w-full max-w-md overflow-hidden rounded-lg border border-surface-bd bg-surface-modal font-sans shadow-modal",
2856
- initial: { opacity: 0, y: 8 },
2857
- animate: { opacity: 1, y: 0 },
2858
- exit: { opacity: 0, y: 8 },
2859
- transition: { duration: 0.18, ease: "easeOut" },
2860
- onClick: (event) => event.stopPropagation(),
2861
- children: [
2862
- /* @__PURE__ */ jsxs6("div", { className: "relative flex items-center justify-center border-b border-white/[0.06] px-6 pb-5 pt-6", children: [
2863
- /* @__PURE__ */ jsx7("h3", { className: "text-lg font-semibold text-white", children: "Renew Agent Wallet" }),
2864
- /* @__PURE__ */ jsx7(
2865
- "button",
2866
- {
2867
- onClick: handleClose,
2868
- disabled: isRenewing,
2869
- className: "absolute right-6 text-gray-400 transition-colors hover:text-white disabled:cursor-not-allowed disabled:opacity-40",
2870
- "aria-label": "Close",
2871
- children: /* @__PURE__ */ jsx7(X, { size: 16 })
2872
- }
2873
- )
2874
- ] }),
2875
- /* @__PURE__ */ jsxs6("div", { className: "space-y-4 px-6 py-5", children: [
2876
- /* @__PURE__ */ jsxs6("div", { className: "flex items-start gap-2 rounded-lg border border-amber-500/25 bg-amber-500/[0.08] p-3", children: [
2877
- /* @__PURE__ */ jsx7(
2878
- AlertTriangle,
2879
- {
2880
- size: 14,
2881
- className: "mt-0.5 flex-shrink-0 text-amber-400"
2882
- }
2883
- ),
2884
- /* @__PURE__ */ jsx7("p", { className: "text-base text-amber-200", children: expiryMessage ?? (currentExpiryMs ? `Current approval expires ${formatAgentExpiry(
2885
- currentExpiryMs
2886
- )}. Renew to extend this agent wallet.` : "Renew this agent wallet with a fresh owner approval.") })
2887
- ] }),
2888
- /* @__PURE__ */ jsxs6("div", { className: "rounded-lg border border-white/[0.06] bg-white/[0.03] p-3", children: [
2889
- /* @__PURE__ */ jsx7("p", { className: "mb-1.5 text-base uppercase tracking-[0.1em] text-gray-400", children: "Agent address" }),
2890
- /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between gap-3", children: [
2891
- /* @__PURE__ */ jsxs6("div", { className: "min-w-0", children: [
2892
- /* @__PURE__ */ jsx7("p", { className: "truncate text-base font-medium text-white", children: wallet.name || "Unnamed Wallet" }),
2893
- /* @__PURE__ */ jsx7("p", { className: "font-mono text-base text-gray-400", children: hasAgentAddress ? formatAddress2(agentAddress) : "Missing agent address" })
2894
- ] }),
2863
+ className: "fixed inset-0 z-[111] flex items-center justify-center p-4",
2864
+ onClick: handleClose,
2865
+ children: /* @__PURE__ */ jsxs6(
2866
+ motion3.div,
2867
+ {
2868
+ className: "relative w-full max-w-md overflow-hidden rounded-lg border border-line bg-surface-modal font-sans shadow-modal",
2869
+ initial: { opacity: 0, y: 8 },
2870
+ animate: { opacity: 1, y: 0 },
2871
+ exit: { opacity: 0, y: 8 },
2872
+ transition: { duration: 0.18, ease: "easeOut" },
2873
+ onClick: (event) => event.stopPropagation(),
2874
+ children: [
2875
+ /* @__PURE__ */ jsxs6("div", { className: "relative flex items-center justify-center border-b border-line px-6 pb-5 pt-6", children: [
2876
+ /* @__PURE__ */ jsx7("h3", { className: "text-lg font-medium text-content", children: "Renew Agent Wallet" }),
2895
2877
  /* @__PURE__ */ jsx7(
2896
- AlertTriangle,
2878
+ "button",
2897
2879
  {
2898
- size: 16,
2899
- className: "flex-shrink-0 text-amber-400"
2880
+ onClick: handleClose,
2881
+ disabled: isRenewing,
2882
+ className: "absolute right-6 text-content-muted transition-colors hover:text-content disabled:cursor-not-allowed disabled:opacity-40",
2883
+ "aria-label": "Close",
2884
+ children: /* @__PURE__ */ jsx7(X, { size: 16 })
2900
2885
  }
2901
2886
  )
2902
- ] })
2903
- ] }),
2904
- ownerReady ? /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-3 rounded-lg border border-white/[0.06] bg-white/[0.03] px-3 py-2.5", children: [
2905
- /* @__PURE__ */ jsx7("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md border border-white/[0.08] bg-white/[0.06]", children: /* @__PURE__ */ jsx7(Wallet, { size: 14, className: "text-gray-400" }) }),
2906
- /* @__PURE__ */ jsxs6("div", { className: "min-w-0 flex-1", children: [
2907
- /* @__PURE__ */ jsx7("p", { className: "text-base text-gray-400", children: "Owner wallet connected" }),
2908
- /* @__PURE__ */ jsx7("p", { className: "font-mono text-base text-white", children: formatAddress2(ownerAddress) })
2909
2887
  ] }),
2910
- /* @__PURE__ */ jsx7(Check, { size: 16, className: "flex-shrink-0 text-trade-up" })
2911
- ] }) : hasConnectedOwner && !ownerMatches ? /* @__PURE__ */ jsxs6("div", { className: "space-y-3 rounded-lg border border-trade-down/20 bg-trade-down/[0.08] p-3", children: [
2912
- /* @__PURE__ */ jsxs6("div", { className: "flex items-start gap-2", children: [
2888
+ /* @__PURE__ */ jsxs6("div", { className: "space-y-4 px-6 py-5", children: [
2889
+ /* @__PURE__ */ jsxs6("div", { className: "flex items-start gap-2 rounded-lg border border-amber-500/25 bg-amber-500/[0.08] p-3", children: [
2890
+ /* @__PURE__ */ jsx7(
2891
+ AlertTriangle,
2892
+ {
2893
+ size: 14,
2894
+ className: "mt-0.5 flex-shrink-0 text-amber-400"
2895
+ }
2896
+ ),
2897
+ /* @__PURE__ */ jsx7("p", { className: "text-base text-amber-200", children: expiryMessage ?? (currentExpiryMs ? `Current approval expires ${formatAgentExpiry(
2898
+ currentExpiryMs
2899
+ )}. Renew to extend this agent wallet.` : "Renew this agent wallet with a fresh owner approval.") })
2900
+ ] }),
2901
+ /* @__PURE__ */ jsxs6("div", { className: "rounded-lg border border-line bg-surface-btn p-3", children: [
2902
+ /* @__PURE__ */ jsx7("p", { className: "mb-1.5 text-base uppercase tracking-[0.1em] text-content-muted", children: "Agent address" }),
2903
+ /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between gap-3", children: [
2904
+ /* @__PURE__ */ jsxs6("div", { className: "min-w-0", children: [
2905
+ /* @__PURE__ */ jsx7("p", { className: "truncate text-base font-medium text-content", children: wallet.name || "Unnamed Wallet" }),
2906
+ /* @__PURE__ */ jsx7("p", { className: "font-mono text-base text-content-muted", children: hasAgentAddress ? formatAddress2(agentAddress) : "Missing agent address" })
2907
+ ] }),
2908
+ /* @__PURE__ */ jsx7(
2909
+ AlertTriangle,
2910
+ {
2911
+ size: 16,
2912
+ className: "flex-shrink-0 text-amber-400"
2913
+ }
2914
+ )
2915
+ ] })
2916
+ ] }),
2917
+ ownerReady ? /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-3 rounded-lg border border-line bg-surface-btn px-3 py-2.5", children: [
2918
+ /* @__PURE__ */ jsx7("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md border border-line-strong bg-surface-btn-hover", children: /* @__PURE__ */ jsx7(Wallet, { size: 14, className: "text-content-muted" }) }),
2919
+ /* @__PURE__ */ jsxs6("div", { className: "min-w-0 flex-1", children: [
2920
+ /* @__PURE__ */ jsx7("p", { className: "text-base text-content-muted", children: "Owner wallet connected" }),
2921
+ /* @__PURE__ */ jsx7("p", { className: "font-mono text-base text-content", children: formatAddress2(ownerAddress) })
2922
+ ] }),
2923
+ /* @__PURE__ */ jsx7(Check, { size: 16, className: "flex-shrink-0 text-trade-up" })
2924
+ ] }) : hasConnectedOwner && !ownerMatches ? /* @__PURE__ */ jsxs6("div", { className: "space-y-3 rounded-lg border border-trade-down/20 bg-trade-down/[0.08] p-3", children: [
2925
+ /* @__PURE__ */ jsxs6("div", { className: "flex items-start gap-2", children: [
2926
+ /* @__PURE__ */ jsx7(
2927
+ AlertTriangle,
2928
+ {
2929
+ size: 14,
2930
+ className: "mt-0.5 flex-shrink-0 text-trade-down"
2931
+ }
2932
+ ),
2933
+ /* @__PURE__ */ jsxs6("div", { className: "min-w-0", children: [
2934
+ /* @__PURE__ */ jsx7("p", { className: "text-base text-trade-down", children: "Wrong owner wallet connected" }),
2935
+ /* @__PURE__ */ jsxs6("p", { className: "mt-1 font-mono text-base text-content-muted", children: [
2936
+ "Connected ",
2937
+ formatAddress2(ownerAddress)
2938
+ ] }),
2939
+ /* @__PURE__ */ jsxs6("p", { className: "font-mono text-base text-content-muted", children: [
2940
+ "Required ",
2941
+ formatAddress2(expectedOwnerAddress)
2942
+ ] })
2943
+ ] })
2944
+ ] }),
2945
+ onDisconnectWallet && /* @__PURE__ */ jsx7(
2946
+ "button",
2947
+ {
2948
+ onClick: onDisconnectWallet,
2949
+ disabled: isRenewing,
2950
+ className: "btn-raised flex w-full items-center justify-center gap-2 rounded-lg py-2 text-base font-medium disabled:cursor-not-allowed disabled:opacity-40",
2951
+ children: "Disconnect Wallet"
2952
+ }
2953
+ )
2954
+ ] }) : /* @__PURE__ */ jsxs6(
2955
+ "button",
2956
+ {
2957
+ onClick: onConnectWallet,
2958
+ className: "btn-raised flex w-full items-center justify-center gap-2 rounded-lg py-2 text-base font-medium",
2959
+ children: [
2960
+ /* @__PURE__ */ jsx7(Wallet, { size: 14 }),
2961
+ " Connect Owner Wallet",
2962
+ hasExpectedOwner ? ` ${formatAddress2(expectedOwnerAddress)}` : ""
2963
+ ]
2964
+ }
2965
+ ),
2913
2966
  /* @__PURE__ */ jsx7(
2914
- AlertTriangle,
2967
+ ApprovalDurationPicker2,
2915
2968
  {
2916
- size: 14,
2917
- className: "mt-0.5 flex-shrink-0 text-trade-down"
2969
+ value: approvalDurationMs,
2970
+ onChange: setApprovalDurationMs,
2971
+ options: durationOptions,
2972
+ disabled: isRenewing
2918
2973
  }
2919
2974
  ),
2920
- /* @__PURE__ */ jsxs6("div", { className: "min-w-0", children: [
2921
- /* @__PURE__ */ jsx7("p", { className: "text-base text-trade-down", children: "Wrong owner wallet connected" }),
2922
- /* @__PURE__ */ jsxs6("p", { className: "mt-1 font-mono text-base text-gray-400", children: [
2923
- "Connected ",
2924
- formatAddress2(ownerAddress)
2925
- ] }),
2926
- /* @__PURE__ */ jsxs6("p", { className: "font-mono text-base text-gray-400", children: [
2927
- "Required ",
2928
- formatAddress2(expectedOwnerAddress)
2929
- ] })
2975
+ error && /* @__PURE__ */ jsxs6("div", { className: "flex items-start gap-2 rounded-lg border border-trade-down/20 bg-trade-down/[0.08] p-3", children: [
2976
+ /* @__PURE__ */ jsx7(
2977
+ AlertTriangle,
2978
+ {
2979
+ size: 14,
2980
+ className: "mt-0.5 flex-shrink-0 text-trade-down"
2981
+ }
2982
+ ),
2983
+ /* @__PURE__ */ jsx7("p", { className: "text-base text-trade-down", children: error })
2930
2984
  ] })
2931
2985
  ] }),
2932
- onDisconnectWallet && /* @__PURE__ */ jsx7(
2933
- "button",
2934
- {
2935
- onClick: onDisconnectWallet,
2936
- disabled: isRenewing,
2937
- className: "btn-raised flex w-full items-center justify-center gap-2 rounded-lg py-2 text-base font-medium disabled:cursor-not-allowed disabled:opacity-40",
2938
- children: "Disconnect Wallet"
2939
- }
2940
- )
2941
- ] }) : /* @__PURE__ */ jsxs6(
2942
- "button",
2943
- {
2944
- onClick: onConnectWallet,
2945
- className: "btn-raised flex w-full items-center justify-center gap-2 rounded-lg py-2 text-base font-medium",
2946
- children: [
2947
- /* @__PURE__ */ jsx7(Wallet, { size: 14 }),
2948
- " Connect Owner Wallet",
2949
- hasExpectedOwner ? ` ${formatAddress2(expectedOwnerAddress)}` : ""
2950
- ]
2951
- }
2952
- ),
2953
- /* @__PURE__ */ jsx7(
2954
- ApprovalDurationPicker2,
2955
- {
2956
- value: approvalDurationMs,
2957
- onChange: setApprovalDurationMs,
2958
- options: durationOptions,
2959
- disabled: isRenewing
2960
- }
2961
- ),
2962
- error && /* @__PURE__ */ jsxs6("div", { className: "flex items-start gap-2 rounded-lg border border-trade-down/20 bg-trade-down/[0.08] p-3", children: [
2963
- /* @__PURE__ */ jsx7(
2964
- AlertTriangle,
2965
- {
2966
- size: 14,
2967
- className: "mt-0.5 flex-shrink-0 text-trade-down"
2968
- }
2969
- ),
2970
- /* @__PURE__ */ jsx7("p", { className: "text-base text-trade-down", children: error })
2971
- ] })
2972
- ] }),
2973
- /* @__PURE__ */ jsxs6("div", { className: "space-y-2 px-6 pb-6", children: [
2974
- /* @__PURE__ */ jsx7(
2975
- "button",
2976
- {
2977
- onClick: handleRenew,
2978
- disabled: !canRenew,
2979
- className: `flex w-full items-center justify-center gap-2 rounded-lg py-2 text-base font-medium ${canRenew ? "btn-raised" : "btn-raised-disabled"}`,
2980
- children: isRenewing ? /* @__PURE__ */ jsxs6(Fragment3, { children: [
2981
- /* @__PURE__ */ jsx7(Loader2, { size: 14 }),
2982
- " Renewing..."
2983
- ] }) : "Renew Agent Wallet"
2984
- }
2985
- ),
2986
- ownerReady && onDisconnectWallet && /* @__PURE__ */ jsx7(
2987
- "button",
2988
- {
2989
- onClick: onDisconnectWallet,
2990
- disabled: isRenewing,
2991
- className: "w-full py-1.5 text-base text-gray-400 transition-colors hover:text-gray-300 disabled:cursor-not-allowed disabled:opacity-40",
2992
- children: "Disconnect & use different owner"
2993
- }
2994
- )
2995
- ] })
2996
- ]
2986
+ /* @__PURE__ */ jsxs6("div", { className: "space-y-2 px-6 pb-6", children: [
2987
+ /* @__PURE__ */ jsx7(
2988
+ "button",
2989
+ {
2990
+ onClick: handleRenew,
2991
+ disabled: !canRenew,
2992
+ className: `flex w-full items-center justify-center gap-2 rounded-lg py-2 text-base font-medium ${canRenew ? "btn-raised" : "btn-raised-disabled"}`,
2993
+ children: isRenewing ? /* @__PURE__ */ jsxs6(Fragment3, { children: [
2994
+ /* @__PURE__ */ jsx7(Loader2, { size: 14 }),
2995
+ " Renewing..."
2996
+ ] }) : "Renew Agent Wallet"
2997
+ }
2998
+ ),
2999
+ ownerReady && onDisconnectWallet && /* @__PURE__ */ jsx7(
3000
+ "button",
3001
+ {
3002
+ onClick: onDisconnectWallet,
3003
+ disabled: isRenewing,
3004
+ className: "w-full py-1.5 text-base text-content-muted transition-colors hover:text-content-tertiary disabled:cursor-not-allowed disabled:opacity-40",
3005
+ children: "Disconnect & use different owner"
3006
+ }
3007
+ )
3008
+ ] })
3009
+ ]
3010
+ }
3011
+ )
2997
3012
  }
2998
- ) })
3013
+ )
2999
3014
  ] }) });
3000
3015
  }
3001
3016
  function ApprovalDurationPicker2({
@@ -3005,14 +3020,14 @@ function ApprovalDurationPicker2({
3005
3020
  disabled
3006
3021
  }) {
3007
3022
  return /* @__PURE__ */ jsxs6("div", { children: [
3008
- /* @__PURE__ */ jsx7("label", { className: "mb-2 block text-base uppercase tracking-[0.1em] text-gray-400", children: "Approval Duration" }),
3023
+ /* @__PURE__ */ jsx7("label", { className: "mb-2 block text-base uppercase tracking-[0.1em] text-content-muted", children: "Approval Duration" }),
3009
3024
  /* @__PURE__ */ jsx7("div", { className: "grid grid-cols-4 gap-1.5", children: options.map((option) => /* @__PURE__ */ jsx7(
3010
3025
  "button",
3011
3026
  {
3012
3027
  type: "button",
3013
3028
  onClick: () => onChange(option.durationMs),
3014
3029
  disabled,
3015
- className: `rounded py-1.5 text-base font-medium disabled:cursor-not-allowed disabled:opacity-50 ${value === option.durationMs ? "btn-raised-active" : "btn-raised"}`,
3030
+ className: `rounded border py-1.5 text-base font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${value === option.durationMs ? "bg-surface-btn-active text-content border-surface-bd-active" : "bg-surface-btn text-content-muted border-surface-bd hover:bg-surface-btn-hover hover:border-surface-bd-hover hover:text-content-tertiary"}`,
3016
3031
  children: option.label
3017
3032
  },
3018
3033
  `${option.label}-${option.durationMs}`
@@ -3143,25 +3158,29 @@ import {
3143
3158
 
3144
3159
  // src/profileStyles.ts
3145
3160
  var profileColors = {
3161
+ // Accent stays a literal hex — host may override via the accentColor prop
3162
+ // and helpers below expect a parseable color.
3146
3163
  accent: "#a855f7",
3147
- panel: "rgba(14,18,24,0.8)",
3148
- panelSolid: "#0e1218",
3149
- backdrop: "rgba(0,0,0,0.7)",
3150
- border: "#1f2937",
3151
- surfaceBtn: "#0D1219",
3152
- surfaceBtnHover: "#15171A",
3153
- surfaceBtnActive: "#1E2124",
3154
- surfaceBd: "#262A30",
3155
- surfaceBdHover: "#444548",
3156
- surfaceBdActive: "#4B4D50",
3157
- text: "#ffffff",
3158
- muted: "#aab1c1",
3159
- subdued: "#7d8597",
3160
- disabled: "#4b5563",
3161
- danger: "#f87171",
3164
+ panel: "rgb(var(--surface-modal) / 0.8)",
3165
+ panelSolid: "rgb(var(--surface-modal))",
3166
+ backdrop: "rgb(var(--overlay) / 0.7)",
3167
+ border: "rgb(var(--line))",
3168
+ surfaceBtn: "rgb(var(--surface-btn))",
3169
+ surfaceBtnHover: "rgb(var(--surface-btn-hover))",
3170
+ surfaceBtnActive: "rgb(var(--surface-btn-active))",
3171
+ surfaceBd: "rgb(var(--surface-bd))",
3172
+ surfaceBdHover: "rgb(var(--surface-bd-hover))",
3173
+ surfaceBdActive: "rgb(var(--surface-bd-active))",
3174
+ text: "rgb(var(--content))",
3175
+ muted: "rgb(var(--content-muted))",
3176
+ subdued: "rgb(var(--content-subtle))",
3177
+ disabled: "rgb(var(--content-disabled))",
3178
+ danger: "rgb(var(--trade-down))",
3179
+ // Keep the punchier red literal for hover backgrounds where we want a
3180
+ // specific warm tint regardless of theme.
3162
3181
  dangerStrong: "#ef4444",
3163
- purple: "#d8b4fe",
3164
- yellow: "#eab308"
3182
+ purple: "rgb(var(--purple-400))",
3183
+ yellow: "rgb(var(--amber-400))"
3165
3184
  };
3166
3185
  var fontFamily = {
3167
3186
  sans: "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif",
@@ -3200,7 +3219,7 @@ var relativeLuminance = (color) => {
3200
3219
  });
3201
3220
  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
3202
3221
  };
3203
- var pickContrastColor = (background, lightFg = profileColors.text, darkFg = "#0a0a0a") => {
3222
+ var pickContrastColor = (background, lightFg = "#ffffff", darkFg = "#0a0a0a") => {
3204
3223
  const lum = relativeLuminance(background);
3205
3224
  if (lum === null) return lightFg;
3206
3225
  return lum > 0.5 ? darkFg : lightFg;
@@ -3260,7 +3279,7 @@ var modalPanelStyle = (solid = false) => ({
3260
3279
  WebkitBackdropFilter: solid ? void 0 : "blur(10px)",
3261
3280
  border: `1px solid ${profileColors.border}`,
3262
3281
  borderRadius: 8,
3263
- boxShadow: "0 25px 50px -12px rgba(0,0,0,0.6)",
3282
+ boxShadow: "var(--shadow-modal)",
3264
3283
  overflow: "hidden",
3265
3284
  fontFamily: fontFamily.sans
3266
3285
  });
@@ -3298,46 +3317,9 @@ var upperLabelStyle = {
3298
3317
  textTransform: "uppercase",
3299
3318
  letterSpacing: "0.1em"
3300
3319
  };
3301
- var raisedButtonStyle = (state = "default") => {
3302
- if (state === "active") {
3303
- return {
3304
- backgroundColor: profileColors.surfaceBtnActive,
3305
- backgroundImage: "linear-gradient(to bottom, rgba(255,255,255,0.05), transparent)",
3306
- 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)",
3307
- color: profileColors.text,
3308
- border: "none"
3309
- };
3310
- }
3311
- if (state === "disabled") {
3312
- return {
3313
- backgroundColor: profileColors.surfaceBtn,
3314
- backgroundImage: "linear-gradient(to bottom, rgba(255,255,255,0.02), transparent)",
3315
- 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",
3316
- color: profileColors.subdued,
3317
- border: "none",
3318
- cursor: "not-allowed"
3319
- };
3320
- }
3321
- if (state === "hover") {
3322
- return {
3323
- backgroundColor: profileColors.surfaceBtnHover,
3324
- backgroundImage: "linear-gradient(to bottom, rgba(255,255,255,0.04), transparent)",
3325
- 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",
3326
- color: "#d1d5db",
3327
- border: "none"
3328
- };
3329
- }
3330
- return {
3331
- backgroundColor: profileColors.surfaceBtn,
3332
- backgroundImage: "linear-gradient(to bottom, rgba(255,255,255,0.03), transparent)",
3333
- 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",
3334
- color: profileColors.muted,
3335
- border: "none"
3336
- };
3337
- };
3338
3320
  var dangerOutlineButtonStyle = (enabled, hovered = false) => ({
3339
3321
  background: enabled && hovered ? "rgba(248,113,113,0.1)" : "transparent",
3340
- border: `1px solid ${enabled ? profileColors.danger : "#374151"}`,
3322
+ border: `1px solid ${enabled ? profileColors.danger : "rgb(var(--line-strong))"}`,
3341
3323
  color: enabled ? profileColors.danger : profileColors.disabled,
3342
3324
  cursor: enabled ? "pointer" : "not-allowed"
3343
3325
  });
@@ -3354,7 +3336,7 @@ var panelStyle = {
3354
3336
  };
3355
3337
  var headerStyle = {
3356
3338
  ...modalHeaderStyle,
3357
- borderBottom: "1px solid rgba(255,255,255,0.06)"
3339
+ borderBottom: "1px solid rgb(var(--line))"
3358
3340
  };
3359
3341
  var bodyStyle = {
3360
3342
  padding: "20px 24px",
@@ -3373,8 +3355,8 @@ var warningBoxStyle = {
3373
3355
  };
3374
3356
  var infoBoxStyle = {
3375
3357
  padding: "10px 12px",
3376
- background: "rgba(255,255,255,0.03)",
3377
- border: "1px solid rgba(255,255,255,0.06)",
3358
+ background: "rgb(var(--btn-bevel) / 0.03)",
3359
+ border: "1px solid rgb(var(--line))",
3378
3360
  borderRadius: 8
3379
3361
  };
3380
3362
  var labelStyle = {
@@ -3386,18 +3368,14 @@ var labelStyle = {
3386
3368
  };
3387
3369
  var inputStyle = (disabled) => ({
3388
3370
  width: "100%",
3389
- background: "rgba(13,18,25,0.9)",
3390
- border: `1px solid ${profileColors.surfaceBd}`,
3391
3371
  borderRadius: 8,
3392
3372
  padding: "10px 12px",
3393
- color: profileColors.text,
3394
3373
  fontFamily: fontFamily.mono,
3395
3374
  fontSize: 12.5,
3396
3375
  lineHeight: "1rem",
3397
3376
  outline: "none",
3398
3377
  opacity: disabled ? 0.5 : 1,
3399
- boxSizing: "border-box",
3400
- transition: "border-color 150ms, background-color 150ms"
3378
+ boxSizing: "border-box"
3401
3379
  });
3402
3380
  var footerStyle = {
3403
3381
  padding: "0 24px 24px"
@@ -3466,7 +3444,7 @@ function DeleteWalletModal({
3466
3444
  },
3467
3445
  "backdrop"
3468
3446
  ),
3469
- /* @__PURE__ */ jsx9("div", { style: wrapperStyle, children: /* @__PURE__ */ jsxs8(
3447
+ /* @__PURE__ */ jsx9("div", { style: wrapperStyle, onClick: handleClose, children: /* @__PURE__ */ jsxs8(
3470
3448
  motion4.div,
3471
3449
  {
3472
3450
  style: panelStyle,
@@ -3596,6 +3574,7 @@ function DeleteWalletModal({
3596
3574
  onChange: (e) => setConfirmName(e.target.value),
3597
3575
  placeholder: walletName,
3598
3576
  disabled: isDeleting,
3577
+ className: "input text-content placeholder-content-faint",
3599
3578
  style: inputStyle(isDeleting)
3600
3579
  }
3601
3580
  )
@@ -3679,7 +3658,7 @@ var panelStyle2 = {
3679
3658
  };
3680
3659
  var headerStyle2 = {
3681
3660
  ...modalHeaderStyle,
3682
- borderBottom: "1px solid rgba(255,255,255,0.06)"
3661
+ borderBottom: "1px solid rgb(var(--line))"
3683
3662
  };
3684
3663
  var bodyStyle2 = {
3685
3664
  padding: "20px 24px",
@@ -3689,8 +3668,8 @@ var bodyStyle2 = {
3689
3668
  };
3690
3669
  var infoBoxStyle2 = {
3691
3670
  padding: "10px 12px",
3692
- background: "rgba(255,255,255,0.03)",
3693
- border: "1px solid rgba(255,255,255,0.06)",
3671
+ background: "rgb(var(--btn-bevel) / 0.03)",
3672
+ border: "1px solid rgb(var(--line))",
3694
3673
  borderRadius: 8
3695
3674
  };
3696
3675
  var labelStyle2 = {
@@ -3700,26 +3679,21 @@ var labelStyle2 = {
3700
3679
  color: profileColors.muted,
3701
3680
  marginBottom: 8
3702
3681
  };
3703
- var inputStyle2 = (hasError, disabled) => ({
3682
+ var inputStyle2 = (disabled) => ({
3704
3683
  width: "100%",
3705
- background: "rgba(13,18,25,0.9)",
3706
- border: `1px solid ${hasError ? "rgba(248,113,113,0.5)" : profileColors.surfaceBd}`,
3707
3684
  borderRadius: 8,
3708
3685
  padding: "10px 12px",
3709
- color: profileColors.text,
3710
3686
  fontFamily: fontFamily.mono,
3711
3687
  fontSize: 12.5,
3712
3688
  lineHeight: "1rem",
3713
3689
  outline: "none",
3714
3690
  opacity: disabled ? 0.5 : 1,
3715
- boxSizing: "border-box",
3716
- transition: "border-color 150ms, background-color 150ms"
3691
+ boxSizing: "border-box"
3717
3692
  });
3718
3693
  var footerStyle2 = {
3719
3694
  padding: "0 24px 24px"
3720
3695
  };
3721
- var saveButtonStyle = (enabled, hovered) => ({
3722
- ...raisedButtonStyle(enabled ? hovered ? "hover" : "default" : "disabled"),
3696
+ var saveButtonStyle = {
3723
3697
  width: "100%",
3724
3698
  padding: "8px 0",
3725
3699
  borderRadius: 8,
@@ -3730,7 +3704,7 @@ var saveButtonStyle = (enabled, hovered) => ({
3730
3704
  alignItems: "center",
3731
3705
  justifyContent: "center",
3732
3706
  gap: 8
3733
- });
3707
+ };
3734
3708
  function RenameWalletModal({
3735
3709
  isOpen,
3736
3710
  onClose,
@@ -3741,7 +3715,6 @@ function RenameWalletModal({
3741
3715
  const [name, setName] = useState6("");
3742
3716
  const [isRenaming, setIsRenaming] = useState6(false);
3743
3717
  const [error, setError] = useState6(null);
3744
- const [saveHovered, setSaveHovered] = useState6(false);
3745
3718
  const currentName = wallet?.name || "Unnamed";
3746
3719
  const displayAddress = wallet?.ethereumAddress;
3747
3720
  const trimmedName = name.trim();
@@ -3794,7 +3767,7 @@ function RenameWalletModal({
3794
3767
  },
3795
3768
  "backdrop"
3796
3769
  ),
3797
- /* @__PURE__ */ jsx10("div", { style: wrapperStyle2, children: /* @__PURE__ */ jsxs9(
3770
+ /* @__PURE__ */ jsx10("div", { style: wrapperStyle2, onClick: handleClose, children: /* @__PURE__ */ jsxs9(
3798
3771
  motion5.div,
3799
3772
  {
3800
3773
  style: panelStyle2,
@@ -3874,8 +3847,9 @@ function RenameWalletModal({
3874
3847
  if (e.key === "Escape") handleClose();
3875
3848
  },
3876
3849
  disabled: isRenaming,
3877
- autoFocus: true,
3878
- style: inputStyle2(!!error, isRenaming)
3850
+ placeholder: "Wallet name",
3851
+ className: `input text-content placeholder-content-faint ${error ? "input-error" : ""}`,
3852
+ style: inputStyle2(isRenaming)
3879
3853
  }
3880
3854
  ),
3881
3855
  /* @__PURE__ */ jsx10(
@@ -3933,9 +3907,8 @@ function RenameWalletModal({
3933
3907
  {
3934
3908
  onClick: handleRename,
3935
3909
  disabled: !canSubmit,
3936
- onMouseEnter: () => setSaveHovered(true),
3937
- onMouseLeave: () => setSaveHovered(false),
3938
- style: saveButtonStyle(canSubmit, saveHovered),
3910
+ className: canSubmit ? "btn-raised" : "btn-raised-disabled",
3911
+ style: saveButtonStyle,
3939
3912
  children: isRenaming ? /* @__PURE__ */ jsxs9(Fragment6, { children: [
3940
3913
  /* @__PURE__ */ jsx10(Loader2, { size: 14 }),
3941
3914
  " Saving..."
@@ -3963,7 +3936,7 @@ var DEFAULT_SLIPPAGE_OPTIONS = [
3963
3936
  ];
3964
3937
  var backdropStyle4 = modalBackdropStyle(100);
3965
3938
  var wrapperStyle3 = modalWrapperStyle2(101);
3966
- var panelStyle3 = modalPanelStyle(false);
3939
+ var panelStyle3 = modalPanelStyle(true);
3967
3940
  var headerStyle3 = modalHeaderStyle;
3968
3941
  var profileSectionStyle = {
3969
3942
  padding: "20px 24px",
@@ -3992,22 +3965,14 @@ var tabButtonLayoutStyle = {
3992
3965
  transition: "background-color 150ms, color 150ms, box-shadow 150ms"
3993
3966
  };
3994
3967
  var statBoxStyle = {
3995
- background: "rgba(255,255,255,0.03)",
3968
+ background: "rgb(var(--btn-bevel) / 0.03)",
3996
3969
  borderRadius: 8,
3997
3970
  padding: 12,
3998
3971
  border: `1px solid ${profileColors.border}`
3999
3972
  };
4000
- var slippageBtnBaseStyle = {
4001
- flex: 1,
4002
- padding: "4px 0",
4003
- borderRadius: 4,
4004
- fontSize: 12.5,
4005
- lineHeight: "1rem",
4006
- fontFamily: fontFamily.mono,
4007
- fontWeight: 500,
4008
- cursor: "pointer",
4009
- transition: "background-color 150ms, color 150ms, border-color 150ms"
4010
- };
3973
+ var slippageBtnBaseClass = "flex-1 rounded border px-2 py-1 font-mono font-medium text-base transition-colors";
3974
+ var slippageBtnSelectedClass = "bg-surface-btn-active text-content border-surface-bd-active";
3975
+ var slippageBtnIdleClass = "bg-surface-btn text-content-muted border-surface-bd hover:bg-surface-btn-hover hover:border-surface-bd-hover hover:text-content-tertiary";
4011
3976
  var walletRowStyle = {
4012
3977
  display: "flex",
4013
3978
  alignItems: "center",
@@ -4022,26 +3987,26 @@ function getWalletTypeMeta(wallet) {
4022
3987
  if (wallet.isAgent) {
4023
3988
  return {
4024
3989
  label: "Agent wallet",
4025
- color: "#38bdf8",
4026
- background: "rgba(56,189,248,0.16)",
4027
- border: "rgba(56,189,248,0.34)",
3990
+ color: "rgb(var(--blue-500))",
3991
+ background: "rgb(var(--blue-500) / 0.16)",
3992
+ border: "rgb(var(--blue-500) / 0.34)",
4028
3993
  icon: /* @__PURE__ */ jsx11(Bot, { size: 10 })
4029
3994
  };
4030
3995
  }
4031
3996
  if (wallet.isReadOnly) {
4032
3997
  return {
4033
3998
  label: "Read-only wallet",
4034
- color: "#a78bfa",
4035
- background: "rgba(167,139,250,0.16)",
4036
- border: "rgba(167,139,250,0.34)",
3999
+ color: "rgb(var(--purple-400))",
4000
+ background: "rgb(var(--purple-400) / 0.16)",
4001
+ border: "rgb(var(--purple-400) / 0.34)",
4037
4002
  icon: /* @__PURE__ */ jsx11(Eye, { size: 10 })
4038
4003
  };
4039
4004
  }
4040
4005
  return {
4041
4006
  label: "Private-key wallet",
4042
- color: "#34d399",
4043
- background: "rgba(52,211,153,0.16)",
4044
- border: "rgba(52,211,153,0.34)",
4007
+ color: "rgb(var(--green-400))",
4008
+ background: "rgb(var(--green-400) / 0.16)",
4009
+ border: "rgb(var(--green-400) / 0.34)",
4045
4010
  icon: /* @__PURE__ */ jsx11(KeyRound, { size: 10 })
4046
4011
  };
4047
4012
  }
@@ -4064,7 +4029,7 @@ function ToggleSwitch({
4064
4029
  alignItems: "center",
4065
4030
  borderRadius: 9999,
4066
4031
  border: "none",
4067
- background: checked ? accentColor : "rgba(255,255,255,0.08)",
4032
+ background: checked ? colorWithAlpha(accentColor, 0.85) : "rgb(var(--btn-bevel) / 0.08)",
4068
4033
  cursor: "pointer",
4069
4034
  padding: 0,
4070
4035
  transition: "background 150ms"
@@ -4092,21 +4057,13 @@ function RaisedButton({
4092
4057
  children,
4093
4058
  style
4094
4059
  }) {
4095
- const [hovered, setHovered] = useState7(false);
4096
4060
  return /* @__PURE__ */ jsx11(
4097
4061
  "button",
4098
4062
  {
4099
4063
  type: "button",
4100
4064
  onClick,
4101
- onMouseEnter: () => setHovered(true),
4102
- onMouseLeave: () => setHovered(false),
4103
- style: {
4104
- ...tabButtonLayoutStyle,
4105
- ...raisedButtonStyle(
4106
- selected ? "active" : hovered ? "hover" : "default"
4107
- ),
4108
- ...style
4109
- },
4065
+ className: selected ? "btn-raised-active" : "btn-raised",
4066
+ style: { ...tabButtonLayoutStyle, ...style },
4110
4067
  children
4111
4068
  }
4112
4069
  );
@@ -4116,20 +4073,12 @@ function SlippageButton({
4116
4073
  onClick,
4117
4074
  children
4118
4075
  }) {
4119
- const [hovered, setHovered] = useState7(false);
4120
4076
  return /* @__PURE__ */ jsx11(
4121
4077
  "button",
4122
4078
  {
4123
4079
  type: "button",
4124
4080
  onClick,
4125
- onMouseEnter: () => setHovered(true),
4126
- onMouseLeave: () => setHovered(false),
4127
- style: {
4128
- ...slippageBtnBaseStyle,
4129
- background: selected ? profileColors.surfaceBtnActive : hovered ? profileColors.surfaceBtnHover : profileColors.surfaceBtn,
4130
- border: `1px solid ${selected ? profileColors.surfaceBdActive : hovered ? profileColors.surfaceBdHover : profileColors.surfaceBd}`,
4131
- color: selected ? profileColors.text : hovered ? "#d1d5db" : profileColors.muted
4132
- },
4081
+ className: `${slippageBtnBaseClass} ${selected ? slippageBtnSelectedClass : slippageBtnIdleClass}`,
4133
4082
  children
4134
4083
  }
4135
4084
  );
@@ -4229,7 +4178,7 @@ function UserProfileModal({
4229
4178
  {
4230
4179
  style: {
4231
4180
  padding: "10px 12px",
4232
- background: "rgba(255,255,255,0.03)",
4181
+ background: "rgb(var(--btn-bevel) / 0.03)",
4233
4182
  border: `1px solid ${profileColors.border}`,
4234
4183
  borderRadius: 8
4235
4184
  },
@@ -4385,11 +4334,18 @@ function UserProfileModal({
4385
4334
  display: "flex",
4386
4335
  alignItems: "center",
4387
4336
  gap: 6,
4388
- color: "#eab308",
4337
+ color: "rgb(var(--amber-400))",
4389
4338
  marginBottom: 6
4390
4339
  },
4391
4340
  children: [
4392
- /* @__PURE__ */ jsx11(Star, { size: 13, color: "#eab308", fill: "#eab308" }),
4341
+ /* @__PURE__ */ jsx11(
4342
+ Star,
4343
+ {
4344
+ size: 13,
4345
+ color: "rgb(var(--amber-400))",
4346
+ fill: "rgb(var(--amber-400))"
4347
+ }
4348
+ ),
4393
4349
  /* @__PURE__ */ jsx11("span", { style: upperLabelStyle, children: "Hfun Score" })
4394
4350
  ]
4395
4351
  }
@@ -4628,7 +4584,7 @@ function UserProfileModal({
4628
4584
  width: 40,
4629
4585
  height: 40,
4630
4586
  borderRadius: "50%",
4631
- background: "rgba(255,255,255,0.04)",
4587
+ background: "rgb(var(--btn-bevel) / 0.04)",
4632
4588
  display: "flex",
4633
4589
  alignItems: "center",
4634
4590
  justifyContent: "center",
@@ -4701,8 +4657,8 @@ function UserProfileModal({
4701
4657
  "button",
4702
4658
  {
4703
4659
  onClick: onClose,
4660
+ className: "btn-raised",
4704
4661
  style: {
4705
- ...raisedButtonStyle("default"),
4706
4662
  width: "100%",
4707
4663
  padding: "6px 0",
4708
4664
  fontSize: 12.5,
@@ -4812,7 +4768,7 @@ function WalletRow({
4812
4768
  color: typeMeta.color,
4813
4769
  background: typeMeta.background,
4814
4770
  border: `1px solid ${typeMeta.border}`,
4815
- boxShadow: "0 1px 4px rgba(0,0,0,0.35)"
4771
+ boxShadow: "0 1px 4px rgb(var(--btn-bevel) / 0.18)"
4816
4772
  },
4817
4773
  children: typeMeta.icon
4818
4774
  }
@@ -4972,7 +4928,7 @@ function IconBtn({
4972
4928
 
4973
4929
  // src/WalletSelectorDropdown.tsx
4974
4930
  import { Fragment as Fragment9, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
4975
- var DEFAULT_BACKGROUND_COLOR2 = "rgba(20,20,20,0.95)";
4931
+ var DEFAULT_BACKGROUND_COLOR2 = "rgb(var(--surface-dropdown))";
4976
4932
  var getWalletNameParts = (name) => (name ?? "").split("/").map((part) => part.trim()).filter(Boolean);
4977
4933
  var buildWalletListEntries = (wallets) => {
4978
4934
  const standalone = [];
@@ -5067,21 +5023,19 @@ var rootStyle = {
5067
5023
  right: 0,
5068
5024
  top: "calc(100% + 4px)",
5069
5025
  width: 240,
5070
- backdropFilter: "blur(10px)",
5071
- WebkitBackdropFilter: "blur(10px)",
5072
5026
  borderRadius: 9,
5073
- boxShadow: "0 8px 40px rgba(0,0,0,0.85)",
5074
- border: "1px solid rgba(255,255,255,0.08)",
5027
+ boxShadow: "var(--shadow-dropdown)",
5028
+ border: "1px solid rgb(var(--line))",
5075
5029
  zIndex: 50,
5076
5030
  transformOrigin: "top right",
5077
5031
  overflow: "hidden"
5078
5032
  };
5079
- var sectionBorder = "1px solid rgba(255,255,255,0.06)";
5033
+ var sectionBorder = "1px solid rgb(var(--line))";
5080
5034
  var sectionHeaderStyle = {
5081
5035
  padding: "8px 16px",
5082
5036
  fontSize: 12,
5083
5037
  fontWeight: 600,
5084
- color: "#9ca3af",
5038
+ color: "rgb(var(--content-muted))",
5085
5039
  textTransform: "uppercase",
5086
5040
  letterSpacing: "0.05em"
5087
5041
  };
@@ -5096,7 +5050,7 @@ var footerBtnStyle = {
5096
5050
  display: "flex",
5097
5051
  alignItems: "center",
5098
5052
  gap: 8,
5099
- color: "#9ca3af",
5053
+ color: "rgb(var(--content-muted))",
5100
5054
  transition: "background 120ms, color 120ms"
5101
5055
  };
5102
5056
  function WalletSelectorDropdown({
@@ -5206,14 +5160,14 @@ function WalletSelectorDropdown({
5206
5160
  gap: 12,
5207
5161
  background: "transparent",
5208
5162
  border: "none",
5209
- borderBottomColor: "rgba(255,255,255,0.06)",
5163
+ borderBottomColor: "rgb(var(--btn-bevel) / 0.06)",
5210
5164
  borderBottomStyle: "solid",
5211
5165
  borderBottomWidth: 1,
5212
5166
  cursor: "pointer",
5213
5167
  textAlign: "left",
5214
5168
  transition: "background 120ms"
5215
5169
  },
5216
- onMouseEnter: (e) => e.currentTarget.style.background = "rgba(255,255,255,0.06)",
5170
+ onMouseEnter: (e) => e.currentTarget.style.background = "rgb(var(--btn-bevel) / 0.06)",
5217
5171
  onMouseLeave: (e) => e.currentTarget.style.background = "transparent",
5218
5172
  children: [
5219
5173
  profilePic ? /* @__PURE__ */ jsxs11(
@@ -5315,7 +5269,7 @@ function WalletSelectorDropdown({
5315
5269
  margin: 0,
5316
5270
  fontSize: 14,
5317
5271
  fontWeight: 500,
5318
- color: "#fff",
5272
+ color: "rgb(var(--content))",
5319
5273
  overflow: "hidden",
5320
5274
  textOverflow: "ellipsis",
5321
5275
  whiteSpace: "nowrap"
@@ -5377,7 +5331,7 @@ function WalletSelectorDropdown({
5377
5331
  fontWeight: 600,
5378
5332
  textTransform: "uppercase",
5379
5333
  letterSpacing: "0.05em",
5380
- color: isSelectedGroup ? "#e5e7eb" : "#6b7280"
5334
+ color: isSelectedGroup ? "rgb(var(--content-secondary))" : "rgb(var(--content-faint))"
5381
5335
  },
5382
5336
  children: [
5383
5337
  /* @__PURE__ */ jsx12(Folder, { size: 12, style: { flexShrink: 0 } }),
@@ -5400,7 +5354,7 @@ function WalletSelectorDropdown({
5400
5354
  style: {
5401
5355
  flexShrink: 0,
5402
5356
  fontVariantNumeric: "tabular-nums",
5403
- color: "#4b5563"
5357
+ color: "rgb(var(--content-disabled))"
5404
5358
  },
5405
5359
  children: entry.items.length
5406
5360
  }
@@ -5434,7 +5388,7 @@ function WalletSelectorDropdown({
5434
5388
  color: colors.accentText,
5435
5389
  transition: "background 120ms"
5436
5390
  },
5437
- onMouseEnter: (e) => e.currentTarget.style.background = "rgba(255,255,255,0.06)",
5391
+ onMouseEnter: (e) => e.currentTarget.style.background = "rgb(var(--btn-bevel) / 0.06)",
5438
5392
  onMouseLeave: (e) => e.currentTarget.style.background = "transparent",
5439
5393
  children: [
5440
5394
  /* @__PURE__ */ jsx12(Plus, { size: 14 }),
@@ -5503,7 +5457,7 @@ function FooterBtn({
5503
5457
  onClick,
5504
5458
  icon,
5505
5459
  label,
5506
- hoverColor = "#fff"
5460
+ hoverColor = "rgb(var(--content))"
5507
5461
  }) {
5508
5462
  return /* @__PURE__ */ jsxs11(
5509
5463
  "button",
@@ -5511,12 +5465,12 @@ function FooterBtn({
5511
5465
  onClick,
5512
5466
  style: footerBtnStyle,
5513
5467
  onMouseEnter: (e) => {
5514
- e.currentTarget.style.background = "rgba(255,255,255,0.06)";
5468
+ e.currentTarget.style.background = "rgb(var(--btn-bevel) / 0.06)";
5515
5469
  e.currentTarget.style.color = hoverColor;
5516
5470
  },
5517
5471
  onMouseLeave: (e) => {
5518
5472
  e.currentTarget.style.background = "transparent";
5519
- e.currentTarget.style.color = "#9ca3af";
5473
+ e.currentTarget.style.color = "rgb(var(--content-muted))";
5520
5474
  },
5521
5475
  children: [
5522
5476
  icon,
@@ -5539,8 +5493,9 @@ function WalletRow2({
5539
5493
  colors
5540
5494
  }) {
5541
5495
  const isAgentExpired = !!agentExpiryTitle;
5542
- const walletTextColor = isAgentExpired ? EXPIRED_AGENT_COLOR : "#d1d5db";
5543
- const mutedTextColor = isAgentExpired ? "rgba(245,158,11,0.78)" : "#6b7280";
5496
+ const walletTextColor = isAgentExpired ? EXPIRED_AGENT_COLOR : "rgb(var(--content-tertiary))";
5497
+ const mutedTextColor = isAgentExpired ? "rgba(245,158,11,0.78)" : "rgb(var(--content-faint))";
5498
+ const isMobile = useIsMobile();
5544
5499
  return /* @__PURE__ */ jsxs11(
5545
5500
  "div",
5546
5501
  {
@@ -5554,16 +5509,18 @@ function WalletRow2({
5554
5509
  color: walletTextColor,
5555
5510
  display: "flex",
5556
5511
  alignItems: "center",
5557
- background: isSelected ? "rgba(255,255,255,0.06)" : "transparent",
5512
+ background: isSelected ? "rgb(var(--btn-bevel) / 0.06)" : "transparent",
5558
5513
  transition: "background 120ms"
5559
5514
  },
5560
5515
  onMouseEnter: (e) => {
5561
- e.currentTarget.style.background = "rgba(255,255,255,0.06)";
5516
+ e.currentTarget.style.background = "rgb(var(--btn-bevel) / 0.06)";
5517
+ if (isMobile) return;
5562
5518
  const actions = e.currentTarget.querySelector("[data-row-actions]");
5563
5519
  if (actions) actions.style.opacity = "1";
5564
5520
  },
5565
5521
  onMouseLeave: (e) => {
5566
- e.currentTarget.style.background = isSelected ? "rgba(255,255,255,0.06)" : "transparent";
5522
+ e.currentTarget.style.background = isSelected ? "rgb(var(--btn-bevel) / 0.06)" : "transparent";
5523
+ if (isMobile) return;
5567
5524
  const actions = e.currentTarget.querySelector("[data-row-actions]");
5568
5525
  if (actions) actions.style.opacity = "0";
5569
5526
  },
@@ -5609,7 +5566,7 @@ function WalletRow2({
5609
5566
  overflow: "hidden",
5610
5567
  textOverflow: "ellipsis",
5611
5568
  whiteSpace: "nowrap",
5612
- color: isAgentExpired ? walletTextColor : isSelected ? "#fff" : void 0,
5569
+ color: isAgentExpired ? walletTextColor : isSelected ? "rgb(var(--content))" : void 0,
5613
5570
  fontWeight: isSelected ? 500 : void 0
5614
5571
  },
5615
5572
  children: label
@@ -5636,7 +5593,7 @@ function WalletRow2({
5636
5593
  {
5637
5594
  style: {
5638
5595
  fontSize: 12,
5639
- color: isAgentExpired ? walletTextColor : isSelected ? "#fff" : "#9ca3af",
5596
+ color: isAgentExpired ? walletTextColor : isSelected ? "rgb(var(--content))" : "rgb(var(--content-muted))",
5640
5597
  fontWeight: isSelected ? 500 : void 0
5641
5598
  },
5642
5599
  children: compactAddress
@@ -5659,7 +5616,7 @@ function WalletRow2({
5659
5616
  style: {
5660
5617
  display: "flex",
5661
5618
  alignItems: "center",
5662
- opacity: 0,
5619
+ opacity: isMobile ? 1 : 0,
5663
5620
  transition: "opacity 120ms"
5664
5621
  },
5665
5622
  children: [
@@ -5722,7 +5679,7 @@ function RowIconBtn({
5722
5679
  marginLeft: 4,
5723
5680
  background: "transparent",
5724
5681
  border: "none",
5725
- color: "#4b5563",
5682
+ color: "rgb(var(--content-disabled))",
5726
5683
  cursor: "pointer",
5727
5684
  display: "flex",
5728
5685
  alignItems: "center",
@@ -5730,7 +5687,7 @@ function RowIconBtn({
5730
5687
  transition: "color 120ms"
5731
5688
  },
5732
5689
  onMouseEnter: (e) => e.currentTarget.style.color = hoverColor,
5733
- onMouseLeave: (e) => e.currentTarget.style.color = "#4b5563",
5690
+ onMouseLeave: (e) => e.currentTarget.style.color = "rgb(var(--content-disabled))",
5734
5691
  children
5735
5692
  }
5736
5693
  );