@hfunlabs/hypurr-connect 0.1.15 → 0.1.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +507 -554
- package/dist/index.js.map +1 -1
- package/package.json +5 -1
- package/src/AddWalletModal.tsx +37 -30
- package/src/DeleteWalletModal.tsx +6 -12
- package/src/LoginModal.tsx +2 -26
- package/src/RenameWalletModal.tsx +15 -28
- package/src/RenewAgentModal.tsx +26 -21
- package/src/UserProfileModal.tsx +38 -69
- package/src/WalletSelectorDropdown.tsx +42 -36
- package/src/profileStyles.ts +51 -30
- package/src/styles.css +1 -1
- package/src/tailwind.css +289 -23
- 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 {
|
|
@@ -1548,10 +1548,22 @@ import {
|
|
|
1548
1548
|
motion,
|
|
1549
1549
|
useAnimationControls
|
|
1550
1550
|
} from "framer-motion";
|
|
1551
|
-
import {
|
|
1552
|
-
|
|
1553
|
-
|
|
1554
|
-
} from "react";
|
|
1551
|
+
import { useCallback as useCallback2 } from "react";
|
|
1552
|
+
|
|
1553
|
+
// src/useIsMobile.ts
|
|
1554
|
+
import { useSyncExternalStore } from "react";
|
|
1555
|
+
var MOBILE_BREAKPOINT = 640;
|
|
1556
|
+
var mobileQuery = typeof window !== "undefined" ? window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT}px)`) : null;
|
|
1557
|
+
function subscribeMobile(cb) {
|
|
1558
|
+
mobileQuery?.addEventListener("change", cb);
|
|
1559
|
+
return () => mobileQuery?.removeEventListener("change", cb);
|
|
1560
|
+
}
|
|
1561
|
+
function getSnapshotMobile() {
|
|
1562
|
+
return mobileQuery?.matches ?? false;
|
|
1563
|
+
}
|
|
1564
|
+
function useIsMobile() {
|
|
1565
|
+
return useSyncExternalStore(subscribeMobile, getSnapshotMobile, () => false);
|
|
1566
|
+
}
|
|
1555
1567
|
|
|
1556
1568
|
// src/icons/MetaMaskColorIcon.tsx
|
|
1557
1569
|
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
@@ -1682,7 +1694,6 @@ function TelegramColorIcon({ style }) {
|
|
|
1682
1694
|
|
|
1683
1695
|
// src/LoginModal.tsx
|
|
1684
1696
|
import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
1685
|
-
var MOBILE_BREAKPOINT = 640;
|
|
1686
1697
|
var DEFAULT_BACKGROUND_COLOR = "rgba(20,20,20,0.95)";
|
|
1687
1698
|
var btnStyle = {
|
|
1688
1699
|
display: "flex",
|
|
@@ -1744,17 +1755,6 @@ var dividerStyle = {
|
|
|
1744
1755
|
background: "rgba(255,255,255,0.05)"
|
|
1745
1756
|
};
|
|
1746
1757
|
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
1758
|
function HoverButton({
|
|
1759
1759
|
onClick,
|
|
1760
1760
|
children
|
|
@@ -2168,7 +2168,7 @@ function createAuthSignatureRequest(chainId, hyperliquidChain, agentAddress, app
|
|
|
2168
2168
|
};
|
|
2169
2169
|
}
|
|
2170
2170
|
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) => `
|
|
2171
|
+
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
2172
|
var formatAddress = (address) => `${address.slice(0, 6)}...${address.slice(-4)}`;
|
|
2173
2173
|
function AddWalletModal({
|
|
2174
2174
|
isOpen,
|
|
@@ -2412,7 +2412,7 @@ function AddWalletModal({
|
|
|
2412
2412
|
/* @__PURE__ */ jsx6(
|
|
2413
2413
|
motion2.div,
|
|
2414
2414
|
{
|
|
2415
|
-
className: "fixed inset-0 z-[100] bg-
|
|
2415
|
+
className: "fixed inset-0 z-[100] bg-overlay/70 backdrop-blur-sm",
|
|
2416
2416
|
initial: { opacity: 0 },
|
|
2417
2417
|
animate: { opacity: 1 },
|
|
2418
2418
|
exit: { opacity: 0 },
|
|
@@ -2420,250 +2420,257 @@ function AddWalletModal({
|
|
|
2420
2420
|
onClick: handleClose
|
|
2421
2421
|
}
|
|
2422
2422
|
),
|
|
2423
|
-
/* @__PURE__ */ jsx6(
|
|
2424
|
-
|
|
2423
|
+
/* @__PURE__ */ jsx6(
|
|
2424
|
+
"div",
|
|
2425
2425
|
{
|
|
2426
|
-
className: "
|
|
2427
|
-
|
|
2428
|
-
|
|
2429
|
-
|
|
2430
|
-
|
|
2431
|
-
|
|
2432
|
-
|
|
2433
|
-
|
|
2434
|
-
|
|
2435
|
-
|
|
2436
|
-
|
|
2437
|
-
|
|
2438
|
-
|
|
2439
|
-
|
|
2440
|
-
|
|
2441
|
-
|
|
2442
|
-
|
|
2443
|
-
|
|
2444
|
-
|
|
2445
|
-
|
|
2446
|
-
|
|
2447
|
-
|
|
2448
|
-
|
|
2449
|
-
|
|
2450
|
-
|
|
2451
|
-
|
|
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(
|
|
2426
|
+
className: "fixed inset-0 z-[101] flex items-center justify-center p-4",
|
|
2427
|
+
onClick: handleClose,
|
|
2428
|
+
children: /* @__PURE__ */ jsxs5(
|
|
2429
|
+
motion2.div,
|
|
2430
|
+
{
|
|
2431
|
+
className: "relative w-full max-w-md overflow-hidden rounded-lg border border-line bg-surface-modal font-sans shadow-modal",
|
|
2432
|
+
initial: { opacity: 0, y: 8 },
|
|
2433
|
+
animate: { opacity: 1, y: 0 },
|
|
2434
|
+
exit: { opacity: 0, y: 8 },
|
|
2435
|
+
transition: { duration: 0.18, ease: "easeOut" },
|
|
2436
|
+
onClick: (event) => event.stopPropagation(),
|
|
2437
|
+
children: [
|
|
2438
|
+
/* @__PURE__ */ jsxs5("div", { className: "relative flex items-center justify-center border-b border-line px-6 pb-5 pt-6", children: [
|
|
2439
|
+
/* @__PURE__ */ jsx6("h3", { className: "text-lg font-medium text-content", children: "Add Wallet" }),
|
|
2440
|
+
/* @__PURE__ */ jsx6(
|
|
2441
|
+
"button",
|
|
2442
|
+
{
|
|
2443
|
+
onClick: handleClose,
|
|
2444
|
+
disabled: isProcessing,
|
|
2445
|
+
className: "absolute right-6 text-content-muted transition-colors hover:text-content disabled:cursor-not-allowed disabled:opacity-40",
|
|
2446
|
+
"aria-label": "Close",
|
|
2447
|
+
children: /* @__PURE__ */ jsx6(X, { size: 16 })
|
|
2448
|
+
}
|
|
2449
|
+
)
|
|
2450
|
+
] }),
|
|
2451
|
+
/* @__PURE__ */ jsx6("div", { className: "flex gap-1.5 px-6 pt-5", children: tabKeys.map((tab) => /* @__PURE__ */ jsx6(
|
|
2485
2452
|
"button",
|
|
2486
2453
|
{
|
|
2487
|
-
|
|
2488
|
-
|
|
2489
|
-
|
|
2490
|
-
|
|
2491
|
-
|
|
2492
|
-
|
|
2454
|
+
type: "button",
|
|
2455
|
+
onClick: () => {
|
|
2456
|
+
setError(null);
|
|
2457
|
+
setActiveTab(tab);
|
|
2458
|
+
},
|
|
2459
|
+
className: tabClass(activeTab === tab),
|
|
2460
|
+
children: tab === "generate" ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
|
|
2461
|
+
/* @__PURE__ */ jsx6(Plus, { size: 13 }),
|
|
2462
|
+
" New"
|
|
2463
|
+
] }) : tab === "import" ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
|
|
2464
|
+
/* @__PURE__ */ jsx6(KeyRound, { size: 13 }),
|
|
2465
|
+
" Import"
|
|
2466
|
+
] }) : tab === "api" ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
|
|
2467
|
+
/* @__PURE__ */ jsx6(Wallet, { size: 13 }),
|
|
2468
|
+
" Link"
|
|
2493
2469
|
] }) : /* @__PURE__ */ jsxs5(Fragment2, { children: [
|
|
2494
|
-
/* @__PURE__ */ jsx6(
|
|
2495
|
-
"
|
|
2470
|
+
/* @__PURE__ */ jsx6(Eye, { size: 13 }),
|
|
2471
|
+
" Watch"
|
|
2496
2472
|
] })
|
|
2497
|
-
}
|
|
2498
|
-
|
|
2499
|
-
|
|
2500
|
-
|
|
2501
|
-
|
|
2502
|
-
|
|
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: [
|
|
2473
|
+
},
|
|
2474
|
+
tab
|
|
2475
|
+
)) }),
|
|
2476
|
+
/* @__PURE__ */ jsxs5("div", { className: "px-6 pb-6 pt-5", children: [
|
|
2477
|
+
activeTab === "generate" && /* @__PURE__ */ jsxs5("section", { className: "space-y-4", children: [
|
|
2478
|
+
/* @__PURE__ */ jsx6("p", { className: "text-base text-content-muted", children: "Create a new Hyperliquid wallet." }),
|
|
2516
2479
|
/* @__PURE__ */ jsx6(
|
|
2517
|
-
|
|
2480
|
+
WalletNameInput,
|
|
2518
2481
|
{
|
|
2519
|
-
|
|
2520
|
-
|
|
2521
|
-
|
|
2522
|
-
|
|
2523
|
-
|
|
2524
|
-
},
|
|
2525
|
-
placeholder: "0x...",
|
|
2526
|
-
spellCheck: false,
|
|
2527
|
-
autoComplete: "off",
|
|
2528
|
-
className: `${inputClass(
|
|
2529
|
-
!!importPrivateKey && !isValidImportPrivateKey
|
|
2530
|
-
)} pr-11`
|
|
2482
|
+
value: newWalletName,
|
|
2483
|
+
setValue: setNewWalletName,
|
|
2484
|
+
isValid: isValidNewWalletName,
|
|
2485
|
+
clearError: () => setError(null),
|
|
2486
|
+
placeholder: "MyNewWallet"
|
|
2531
2487
|
}
|
|
2532
2488
|
),
|
|
2533
2489
|
/* @__PURE__ */ jsx6(
|
|
2534
2490
|
"button",
|
|
2535
2491
|
{
|
|
2536
|
-
|
|
2537
|
-
|
|
2538
|
-
className:
|
|
2539
|
-
|
|
2540
|
-
|
|
2492
|
+
onClick: handleCreateWallet,
|
|
2493
|
+
disabled: isProcessing || !isValidNewWalletName,
|
|
2494
|
+
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"}`,
|
|
2495
|
+
children: isProcessing ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
|
|
2496
|
+
/* @__PURE__ */ jsx6(Loader2, { size: 14 }),
|
|
2497
|
+
" Creating..."
|
|
2498
|
+
] }) : /* @__PURE__ */ jsxs5(Fragment2, { children: [
|
|
2499
|
+
/* @__PURE__ */ jsx6(Plus, { size: 14 }),
|
|
2500
|
+
" Create Wallet"
|
|
2501
|
+
] })
|
|
2541
2502
|
}
|
|
2542
|
-
)
|
|
2543
|
-
|
|
2544
|
-
|
|
2545
|
-
|
|
2546
|
-
|
|
2547
|
-
|
|
2548
|
-
|
|
2549
|
-
|
|
2550
|
-
|
|
2551
|
-
|
|
2552
|
-
|
|
2553
|
-
|
|
2554
|
-
|
|
2555
|
-
|
|
2556
|
-
|
|
2557
|
-
|
|
2558
|
-
|
|
2559
|
-
|
|
2560
|
-
|
|
2561
|
-
|
|
2562
|
-
|
|
2563
|
-
|
|
2564
|
-
|
|
2565
|
-
|
|
2566
|
-
|
|
2567
|
-
|
|
2568
|
-
|
|
2569
|
-
|
|
2570
|
-
|
|
2571
|
-
|
|
2572
|
-
|
|
2573
|
-
|
|
2574
|
-
|
|
2575
|
-
|
|
2576
|
-
|
|
2577
|
-
|
|
2578
|
-
|
|
2579
|
-
|
|
2503
|
+
),
|
|
2504
|
+
error && /* @__PURE__ */ jsx6(ErrorBox, { message: error })
|
|
2505
|
+
] }),
|
|
2506
|
+
activeTab === "import" && /* @__PURE__ */ jsxs5("section", { className: "space-y-4", children: [
|
|
2507
|
+
/* @__PURE__ */ jsx6("p", { className: "text-base text-content-muted", children: "Import a Hyperliquid wallet with its private key." }),
|
|
2508
|
+
/* @__PURE__ */ jsx6(
|
|
2509
|
+
WalletNameInput,
|
|
2510
|
+
{
|
|
2511
|
+
value: importWalletName,
|
|
2512
|
+
setValue: setImportWalletName,
|
|
2513
|
+
isValid: isValidImportWalletName,
|
|
2514
|
+
clearError: () => setError(null),
|
|
2515
|
+
placeholder: "MyImportedWallet"
|
|
2516
|
+
}
|
|
2517
|
+
),
|
|
2518
|
+
/* @__PURE__ */ jsxs5("div", { children: [
|
|
2519
|
+
/* @__PURE__ */ jsx6("label", { className: "mb-2 block text-base uppercase tracking-[0.1em] text-content-muted", children: "Private Key" }),
|
|
2520
|
+
/* @__PURE__ */ jsxs5("div", { className: "relative", children: [
|
|
2521
|
+
/* @__PURE__ */ jsx6(
|
|
2522
|
+
"input",
|
|
2523
|
+
{
|
|
2524
|
+
type: showImportPrivateKey ? "text" : "password",
|
|
2525
|
+
value: importPrivateKey,
|
|
2526
|
+
onChange: (event) => {
|
|
2527
|
+
setImportPrivateKey(event.target.value);
|
|
2528
|
+
setError(null);
|
|
2529
|
+
},
|
|
2530
|
+
placeholder: "0x...",
|
|
2531
|
+
spellCheck: false,
|
|
2532
|
+
autoComplete: "off",
|
|
2533
|
+
className: `${inputClass(
|
|
2534
|
+
!!importPrivateKey && !isValidImportPrivateKey
|
|
2535
|
+
)} pr-11`
|
|
2536
|
+
}
|
|
2537
|
+
),
|
|
2538
|
+
/* @__PURE__ */ jsx6(
|
|
2539
|
+
"button",
|
|
2540
|
+
{
|
|
2541
|
+
type: "button",
|
|
2542
|
+
onClick: () => setShowImportPrivateKey((visible) => !visible),
|
|
2543
|
+
className: "absolute right-2 top-1/2 -translate-y-1/2 p-1.5 text-content-subtle transition-colors hover:text-content-tertiary",
|
|
2544
|
+
"aria-label": showImportPrivateKey ? "Hide private key" : "Show private key",
|
|
2545
|
+
children: showImportPrivateKey ? /* @__PURE__ */ jsx6(EyeOff, { size: 15 }) : /* @__PURE__ */ jsx6(Eye, { size: 15 })
|
|
2546
|
+
}
|
|
2547
|
+
)
|
|
2548
|
+
] })
|
|
2580
2549
|
] }),
|
|
2581
2550
|
/* @__PURE__ */ jsx6(
|
|
2582
|
-
|
|
2551
|
+
"button",
|
|
2583
2552
|
{
|
|
2584
|
-
|
|
2585
|
-
|
|
2553
|
+
onClick: handleImportWallet,
|
|
2554
|
+
disabled: isProcessing || !isValidImportWalletName || !isValidImportPrivateKey,
|
|
2555
|
+
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"}`,
|
|
2556
|
+
children: isProcessing ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
|
|
2557
|
+
/* @__PURE__ */ jsx6(Loader2, { size: 14 }),
|
|
2558
|
+
" Importing..."
|
|
2559
|
+
] }) : /* @__PURE__ */ jsxs5(Fragment2, { children: [
|
|
2560
|
+
/* @__PURE__ */ jsx6(KeyRound, { size: 14 }),
|
|
2561
|
+
" Import Wallet"
|
|
2562
|
+
] })
|
|
2586
2563
|
}
|
|
2587
|
-
)
|
|
2564
|
+
),
|
|
2565
|
+
error && /* @__PURE__ */ jsx6(ErrorBox, { message: error })
|
|
2588
2566
|
] }),
|
|
2589
|
-
/* @__PURE__ */
|
|
2590
|
-
|
|
2591
|
-
|
|
2592
|
-
|
|
2593
|
-
|
|
2594
|
-
|
|
2595
|
-
|
|
2596
|
-
|
|
2597
|
-
|
|
2598
|
-
|
|
2599
|
-
|
|
2600
|
-
|
|
2601
|
-
{
|
|
2602
|
-
|
|
2603
|
-
|
|
2604
|
-
|
|
2605
|
-
|
|
2606
|
-
|
|
2607
|
-
|
|
2608
|
-
|
|
2609
|
-
|
|
2610
|
-
|
|
2611
|
-
|
|
2612
|
-
|
|
2613
|
-
|
|
2614
|
-
|
|
2615
|
-
|
|
2616
|
-
|
|
2617
|
-
|
|
2618
|
-
|
|
2619
|
-
|
|
2620
|
-
|
|
2621
|
-
|
|
2622
|
-
|
|
2623
|
-
|
|
2624
|
-
|
|
2625
|
-
|
|
2626
|
-
|
|
2627
|
-
|
|
2628
|
-
|
|
2629
|
-
|
|
2630
|
-
|
|
2631
|
-
|
|
2632
|
-
|
|
2633
|
-
|
|
2634
|
-
|
|
2635
|
-
|
|
2636
|
-
|
|
2637
|
-
|
|
2638
|
-
|
|
2639
|
-
|
|
2640
|
-
|
|
2641
|
-
|
|
2642
|
-
|
|
2643
|
-
|
|
2644
|
-
|
|
2645
|
-
|
|
2646
|
-
|
|
2647
|
-
|
|
2648
|
-
|
|
2649
|
-
|
|
2650
|
-
|
|
2651
|
-
|
|
2652
|
-
|
|
2653
|
-
|
|
2654
|
-
|
|
2655
|
-
] })
|
|
2656
|
-
|
|
2657
|
-
|
|
2658
|
-
|
|
2659
|
-
|
|
2660
|
-
|
|
2661
|
-
|
|
2662
|
-
|
|
2663
|
-
|
|
2664
|
-
|
|
2567
|
+
activeTab === "api" && /* @__PURE__ */ jsxs5("section", { className: "space-y-4", children: [
|
|
2568
|
+
/* @__PURE__ */ jsx6("p", { className: "text-base text-content-muted", children: "Connect your wallet and sign to link it for trading." }),
|
|
2569
|
+
!isWalletConnected || !ownerAddress ? /* @__PURE__ */ jsxs5(
|
|
2570
|
+
"button",
|
|
2571
|
+
{
|
|
2572
|
+
onClick: onConnectWallet,
|
|
2573
|
+
className: "btn-raised flex w-full items-center justify-center gap-2 rounded-lg py-2 text-base font-medium",
|
|
2574
|
+
children: [
|
|
2575
|
+
/* @__PURE__ */ jsx6(Wallet, { size: 14 }),
|
|
2576
|
+
" Connect Wallet"
|
|
2577
|
+
]
|
|
2578
|
+
}
|
|
2579
|
+
) : /* @__PURE__ */ jsxs5(Fragment2, { children: [
|
|
2580
|
+
/* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-3 rounded-lg border border-line bg-surface-btn px-3 py-2.5", children: [
|
|
2581
|
+
/* @__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" }) }),
|
|
2582
|
+
/* @__PURE__ */ jsxs5("div", { className: "min-w-0 flex-1", children: [
|
|
2583
|
+
/* @__PURE__ */ jsx6("p", { className: "text-base text-content-muted", children: "Connected" }),
|
|
2584
|
+
/* @__PURE__ */ jsx6("p", { className: "font-mono text-base text-content", children: formatAddress(ownerAddress) })
|
|
2585
|
+
] }),
|
|
2586
|
+
/* @__PURE__ */ jsx6(
|
|
2587
|
+
Check,
|
|
2588
|
+
{
|
|
2589
|
+
size: 16,
|
|
2590
|
+
className: "flex-shrink-0 text-trade-up"
|
|
2591
|
+
}
|
|
2592
|
+
)
|
|
2593
|
+
] }),
|
|
2594
|
+
/* @__PURE__ */ jsx6(
|
|
2595
|
+
WalletNameInput,
|
|
2596
|
+
{
|
|
2597
|
+
value: walletName,
|
|
2598
|
+
setValue: setWalletName,
|
|
2599
|
+
isValid: isValidWalletName,
|
|
2600
|
+
clearError: () => setError(null),
|
|
2601
|
+
placeholder: "MyWallet"
|
|
2602
|
+
}
|
|
2603
|
+
),
|
|
2604
|
+
/* @__PURE__ */ jsx6(
|
|
2605
|
+
ApprovalDurationPicker,
|
|
2606
|
+
{
|
|
2607
|
+
value: agentApprovalDurationMs,
|
|
2608
|
+
onChange: setAgentApprovalDurationMs,
|
|
2609
|
+
options: durationOptions,
|
|
2610
|
+
disabled: isProcessing
|
|
2611
|
+
}
|
|
2612
|
+
),
|
|
2613
|
+
/* @__PURE__ */ jsx6(
|
|
2614
|
+
"button",
|
|
2615
|
+
{
|
|
2616
|
+
onClick: handleSignAndAdd,
|
|
2617
|
+
disabled: isProcessing || !isValidWalletName,
|
|
2618
|
+
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"}`,
|
|
2619
|
+
children: isProcessing ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
|
|
2620
|
+
/* @__PURE__ */ jsx6(Loader2, { size: 14 }),
|
|
2621
|
+
" Signing..."
|
|
2622
|
+
] }) : "Sign & Add Wallet"
|
|
2623
|
+
}
|
|
2624
|
+
),
|
|
2625
|
+
onDisconnectWallet && /* @__PURE__ */ jsx6(
|
|
2626
|
+
"button",
|
|
2627
|
+
{
|
|
2628
|
+
onClick: onDisconnectWallet,
|
|
2629
|
+
className: "w-full py-1.5 text-base text-content-muted transition-colors hover:text-content-tertiary",
|
|
2630
|
+
children: "Disconnect & use different wallet"
|
|
2631
|
+
}
|
|
2632
|
+
)
|
|
2633
|
+
] }),
|
|
2634
|
+
error && /* @__PURE__ */ jsx6(ErrorBox, { message: error })
|
|
2635
|
+
] }),
|
|
2636
|
+
activeTab === "readonly" && onAddReadOnlyWallet && /* @__PURE__ */ jsxs5("section", { className: "space-y-4", children: [
|
|
2637
|
+
/* @__PURE__ */ jsx6("p", { className: "text-base text-content-muted", children: "View positions and balances without trading access." }),
|
|
2638
|
+
/* @__PURE__ */ jsxs5("div", { children: [
|
|
2639
|
+
/* @__PURE__ */ jsx6("label", { className: "mb-2 block text-base uppercase tracking-[0.1em] text-content-muted", children: "Wallet Address" }),
|
|
2640
|
+
/* @__PURE__ */ jsx6(
|
|
2641
|
+
"input",
|
|
2642
|
+
{
|
|
2643
|
+
type: "text",
|
|
2644
|
+
value: readOnlyAddress,
|
|
2645
|
+
onChange: (event) => setReadOnlyAddress(event.target.value),
|
|
2646
|
+
placeholder: "0x...",
|
|
2647
|
+
className: inputClass()
|
|
2648
|
+
}
|
|
2649
|
+
)
|
|
2650
|
+
] }),
|
|
2651
|
+
/* @__PURE__ */ jsx6(
|
|
2652
|
+
"button",
|
|
2653
|
+
{
|
|
2654
|
+
onClick: handleAddReadOnly,
|
|
2655
|
+
disabled: isProcessing || !readOnlyAddress.trim(),
|
|
2656
|
+
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"}`,
|
|
2657
|
+
children: isProcessing ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
|
|
2658
|
+
/* @__PURE__ */ jsx6(Loader2, { size: 14 }),
|
|
2659
|
+
" Adding..."
|
|
2660
|
+
] }) : /* @__PURE__ */ jsxs5(Fragment2, { children: [
|
|
2661
|
+
/* @__PURE__ */ jsx6(Eye, { size: 14 }),
|
|
2662
|
+
" Add Watch Wallet"
|
|
2663
|
+
] })
|
|
2664
|
+
}
|
|
2665
|
+
),
|
|
2666
|
+
error && /* @__PURE__ */ jsx6(ErrorBox, { message: error })
|
|
2667
|
+
] })
|
|
2668
|
+
] })
|
|
2669
|
+
]
|
|
2670
|
+
}
|
|
2671
|
+
)
|
|
2665
2672
|
}
|
|
2666
|
-
)
|
|
2673
|
+
)
|
|
2667
2674
|
] }) });
|
|
2668
2675
|
}
|
|
2669
2676
|
function WalletNameInput({
|
|
@@ -2674,7 +2681,7 @@ function WalletNameInput({
|
|
|
2674
2681
|
placeholder
|
|
2675
2682
|
}) {
|
|
2676
2683
|
return /* @__PURE__ */ jsxs5("div", { children: [
|
|
2677
|
-
/* @__PURE__ */ jsx6("label", { className: "mb-2 block text-base uppercase tracking-[0.1em] text-
|
|
2684
|
+
/* @__PURE__ */ jsx6("label", { className: "mb-2 block text-base uppercase tracking-[0.1em] text-content-muted", children: "Wallet Name" }),
|
|
2678
2685
|
/* @__PURE__ */ jsx6(
|
|
2679
2686
|
"input",
|
|
2680
2687
|
{
|
|
@@ -2691,7 +2698,7 @@ function WalletNameInput({
|
|
|
2691
2698
|
className: inputClass(!!value && !isValid)
|
|
2692
2699
|
}
|
|
2693
2700
|
),
|
|
2694
|
-
/* @__PURE__ */ jsx6("p", { className: "mt-1.5 text-base text-
|
|
2701
|
+
/* @__PURE__ */ jsx6("p", { className: "mt-1.5 text-base text-content-faint", children: "Letters, numbers, and / only" })
|
|
2695
2702
|
] });
|
|
2696
2703
|
}
|
|
2697
2704
|
function ApprovalDurationPicker({
|
|
@@ -2701,14 +2708,14 @@ function ApprovalDurationPicker({
|
|
|
2701
2708
|
disabled
|
|
2702
2709
|
}) {
|
|
2703
2710
|
return /* @__PURE__ */ jsxs5("div", { children: [
|
|
2704
|
-
/* @__PURE__ */ jsx6("label", { className: "mb-2 block text-base uppercase tracking-[0.1em] text-
|
|
2711
|
+
/* @__PURE__ */ jsx6("label", { className: "mb-2 block text-base uppercase tracking-[0.1em] text-content-muted", children: "Approval Duration" }),
|
|
2705
2712
|
/* @__PURE__ */ jsx6("div", { className: "grid grid-cols-4 gap-1.5", children: options.map((option) => /* @__PURE__ */ jsx6(
|
|
2706
2713
|
"button",
|
|
2707
2714
|
{
|
|
2708
2715
|
type: "button",
|
|
2709
2716
|
onClick: () => onChange(option.durationMs),
|
|
2710
2717
|
disabled,
|
|
2711
|
-
className: `rounded py-1.5 text-base font-medium disabled:cursor-not-allowed disabled:opacity-50 ${value === option.durationMs ? "btn-
|
|
2718
|
+
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
2719
|
children: option.label
|
|
2713
2720
|
},
|
|
2714
2721
|
`${option.label}-${option.durationMs}`
|
|
@@ -2841,7 +2848,7 @@ function RenewAgentModal({
|
|
|
2841
2848
|
/* @__PURE__ */ jsx7(
|
|
2842
2849
|
motion3.div,
|
|
2843
2850
|
{
|
|
2844
|
-
className: "fixed inset-0 z-[110] bg-
|
|
2851
|
+
className: "fixed inset-0 z-[110] bg-overlay/70 backdrop-blur-sm",
|
|
2845
2852
|
initial: { opacity: 0 },
|
|
2846
2853
|
animate: { opacity: 1 },
|
|
2847
2854
|
exit: { opacity: 0 },
|
|
@@ -2849,153 +2856,160 @@ function RenewAgentModal({
|
|
|
2849
2856
|
onClick: handleClose
|
|
2850
2857
|
}
|
|
2851
2858
|
),
|
|
2852
|
-
/* @__PURE__ */ jsx7(
|
|
2853
|
-
|
|
2859
|
+
/* @__PURE__ */ jsx7(
|
|
2860
|
+
"div",
|
|
2854
2861
|
{
|
|
2855
|
-
className: "
|
|
2856
|
-
|
|
2857
|
-
|
|
2858
|
-
|
|
2859
|
-
|
|
2860
|
-
|
|
2861
|
-
|
|
2862
|
-
|
|
2863
|
-
|
|
2864
|
-
|
|
2865
|
-
|
|
2866
|
-
|
|
2867
|
-
|
|
2868
|
-
|
|
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
|
-
] }),
|
|
2862
|
+
className: "fixed inset-0 z-[111] flex items-center justify-center p-4",
|
|
2863
|
+
onClick: handleClose,
|
|
2864
|
+
children: /* @__PURE__ */ jsxs6(
|
|
2865
|
+
motion3.div,
|
|
2866
|
+
{
|
|
2867
|
+
className: "relative w-full max-w-md overflow-hidden rounded-lg border border-line bg-surface-modal font-sans shadow-modal",
|
|
2868
|
+
initial: { opacity: 0, y: 8 },
|
|
2869
|
+
animate: { opacity: 1, y: 0 },
|
|
2870
|
+
exit: { opacity: 0, y: 8 },
|
|
2871
|
+
transition: { duration: 0.18, ease: "easeOut" },
|
|
2872
|
+
onClick: (event) => event.stopPropagation(),
|
|
2873
|
+
children: [
|
|
2874
|
+
/* @__PURE__ */ jsxs6("div", { className: "relative flex items-center justify-center border-b border-line px-6 pb-5 pt-6", children: [
|
|
2875
|
+
/* @__PURE__ */ jsx7("h3", { className: "text-lg font-medium text-content", children: "Renew Agent Wallet" }),
|
|
2895
2876
|
/* @__PURE__ */ jsx7(
|
|
2896
|
-
|
|
2877
|
+
"button",
|
|
2897
2878
|
{
|
|
2898
|
-
|
|
2899
|
-
|
|
2879
|
+
onClick: handleClose,
|
|
2880
|
+
disabled: isRenewing,
|
|
2881
|
+
className: "absolute right-6 text-content-muted transition-colors hover:text-content disabled:cursor-not-allowed disabled:opacity-40",
|
|
2882
|
+
"aria-label": "Close",
|
|
2883
|
+
children: /* @__PURE__ */ jsx7(X, { size: 16 })
|
|
2900
2884
|
}
|
|
2901
2885
|
)
|
|
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
2886
|
] }),
|
|
2910
|
-
/* @__PURE__ */
|
|
2911
|
-
|
|
2912
|
-
|
|
2887
|
+
/* @__PURE__ */ jsxs6("div", { className: "space-y-4 px-6 py-5", children: [
|
|
2888
|
+
/* @__PURE__ */ jsxs6("div", { className: "flex items-start gap-2 rounded-lg border border-amber-500/25 bg-amber-500/[0.08] p-3", children: [
|
|
2889
|
+
/* @__PURE__ */ jsx7(
|
|
2890
|
+
AlertTriangle,
|
|
2891
|
+
{
|
|
2892
|
+
size: 14,
|
|
2893
|
+
className: "mt-0.5 flex-shrink-0 text-amber-400"
|
|
2894
|
+
}
|
|
2895
|
+
),
|
|
2896
|
+
/* @__PURE__ */ jsx7("p", { className: "text-base text-amber-200", children: expiryMessage ?? (currentExpiryMs ? `Current approval expires ${formatAgentExpiry(
|
|
2897
|
+
currentExpiryMs
|
|
2898
|
+
)}. Renew to extend this agent wallet.` : "Renew this agent wallet with a fresh owner approval.") })
|
|
2899
|
+
] }),
|
|
2900
|
+
/* @__PURE__ */ jsxs6("div", { className: "rounded-lg border border-line bg-surface-btn p-3", children: [
|
|
2901
|
+
/* @__PURE__ */ jsx7("p", { className: "mb-1.5 text-base uppercase tracking-[0.1em] text-content-muted", children: "Agent address" }),
|
|
2902
|
+
/* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between gap-3", children: [
|
|
2903
|
+
/* @__PURE__ */ jsxs6("div", { className: "min-w-0", children: [
|
|
2904
|
+
/* @__PURE__ */ jsx7("p", { className: "truncate text-base font-medium text-content", children: wallet.name || "Unnamed Wallet" }),
|
|
2905
|
+
/* @__PURE__ */ jsx7("p", { className: "font-mono text-base text-content-muted", children: hasAgentAddress ? formatAddress2(agentAddress) : "Missing agent address" })
|
|
2906
|
+
] }),
|
|
2907
|
+
/* @__PURE__ */ jsx7(
|
|
2908
|
+
AlertTriangle,
|
|
2909
|
+
{
|
|
2910
|
+
size: 16,
|
|
2911
|
+
className: "flex-shrink-0 text-amber-400"
|
|
2912
|
+
}
|
|
2913
|
+
)
|
|
2914
|
+
] })
|
|
2915
|
+
] }),
|
|
2916
|
+
ownerReady ? /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-3 rounded-lg border border-line bg-surface-btn px-3 py-2.5", children: [
|
|
2917
|
+
/* @__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" }) }),
|
|
2918
|
+
/* @__PURE__ */ jsxs6("div", { className: "min-w-0 flex-1", children: [
|
|
2919
|
+
/* @__PURE__ */ jsx7("p", { className: "text-base text-content-muted", children: "Owner wallet connected" }),
|
|
2920
|
+
/* @__PURE__ */ jsx7("p", { className: "font-mono text-base text-content", children: formatAddress2(ownerAddress) })
|
|
2921
|
+
] }),
|
|
2922
|
+
/* @__PURE__ */ jsx7(Check, { size: 16, className: "flex-shrink-0 text-trade-up" })
|
|
2923
|
+
] }) : hasConnectedOwner && !ownerMatches ? /* @__PURE__ */ jsxs6("div", { className: "space-y-3 rounded-lg border border-trade-down/20 bg-trade-down/[0.08] p-3", children: [
|
|
2924
|
+
/* @__PURE__ */ jsxs6("div", { className: "flex items-start gap-2", children: [
|
|
2925
|
+
/* @__PURE__ */ jsx7(
|
|
2926
|
+
AlertTriangle,
|
|
2927
|
+
{
|
|
2928
|
+
size: 14,
|
|
2929
|
+
className: "mt-0.5 flex-shrink-0 text-trade-down"
|
|
2930
|
+
}
|
|
2931
|
+
),
|
|
2932
|
+
/* @__PURE__ */ jsxs6("div", { className: "min-w-0", children: [
|
|
2933
|
+
/* @__PURE__ */ jsx7("p", { className: "text-base text-trade-down", children: "Wrong owner wallet connected" }),
|
|
2934
|
+
/* @__PURE__ */ jsxs6("p", { className: "mt-1 font-mono text-base text-content-muted", children: [
|
|
2935
|
+
"Connected ",
|
|
2936
|
+
formatAddress2(ownerAddress)
|
|
2937
|
+
] }),
|
|
2938
|
+
/* @__PURE__ */ jsxs6("p", { className: "font-mono text-base text-content-muted", children: [
|
|
2939
|
+
"Required ",
|
|
2940
|
+
formatAddress2(expectedOwnerAddress)
|
|
2941
|
+
] })
|
|
2942
|
+
] })
|
|
2943
|
+
] }),
|
|
2944
|
+
onDisconnectWallet && /* @__PURE__ */ jsx7(
|
|
2945
|
+
"button",
|
|
2946
|
+
{
|
|
2947
|
+
onClick: onDisconnectWallet,
|
|
2948
|
+
disabled: isRenewing,
|
|
2949
|
+
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",
|
|
2950
|
+
children: "Disconnect Wallet"
|
|
2951
|
+
}
|
|
2952
|
+
)
|
|
2953
|
+
] }) : /* @__PURE__ */ jsxs6(
|
|
2954
|
+
"button",
|
|
2955
|
+
{
|
|
2956
|
+
onClick: onConnectWallet,
|
|
2957
|
+
className: "btn-raised flex w-full items-center justify-center gap-2 rounded-lg py-2 text-base font-medium",
|
|
2958
|
+
children: [
|
|
2959
|
+
/* @__PURE__ */ jsx7(Wallet, { size: 14 }),
|
|
2960
|
+
" Connect Owner Wallet",
|
|
2961
|
+
hasExpectedOwner ? ` ${formatAddress2(expectedOwnerAddress)}` : ""
|
|
2962
|
+
]
|
|
2963
|
+
}
|
|
2964
|
+
),
|
|
2913
2965
|
/* @__PURE__ */ jsx7(
|
|
2914
|
-
|
|
2966
|
+
ApprovalDurationPicker2,
|
|
2915
2967
|
{
|
|
2916
|
-
|
|
2917
|
-
|
|
2968
|
+
value: approvalDurationMs,
|
|
2969
|
+
onChange: setApprovalDurationMs,
|
|
2970
|
+
options: durationOptions,
|
|
2971
|
+
disabled: isRenewing
|
|
2918
2972
|
}
|
|
2919
2973
|
),
|
|
2920
|
-
/* @__PURE__ */ jsxs6("div", { className: "
|
|
2921
|
-
/* @__PURE__ */ jsx7(
|
|
2922
|
-
|
|
2923
|
-
|
|
2924
|
-
|
|
2925
|
-
|
|
2926
|
-
|
|
2927
|
-
|
|
2928
|
-
|
|
2929
|
-
] })
|
|
2974
|
+
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: [
|
|
2975
|
+
/* @__PURE__ */ jsx7(
|
|
2976
|
+
AlertTriangle,
|
|
2977
|
+
{
|
|
2978
|
+
size: 14,
|
|
2979
|
+
className: "mt-0.5 flex-shrink-0 text-trade-down"
|
|
2980
|
+
}
|
|
2981
|
+
),
|
|
2982
|
+
/* @__PURE__ */ jsx7("p", { className: "text-base text-trade-down", children: error })
|
|
2930
2983
|
] })
|
|
2931
2984
|
] }),
|
|
2932
|
-
|
|
2933
|
-
|
|
2934
|
-
|
|
2935
|
-
|
|
2936
|
-
|
|
2937
|
-
|
|
2938
|
-
|
|
2939
|
-
|
|
2940
|
-
|
|
2941
|
-
|
|
2942
|
-
|
|
2943
|
-
|
|
2944
|
-
|
|
2945
|
-
|
|
2946
|
-
|
|
2947
|
-
|
|
2948
|
-
|
|
2949
|
-
|
|
2950
|
-
|
|
2951
|
-
|
|
2952
|
-
|
|
2953
|
-
|
|
2954
|
-
|
|
2955
|
-
|
|
2956
|
-
|
|
2957
|
-
|
|
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
|
-
]
|
|
2985
|
+
/* @__PURE__ */ jsxs6("div", { className: "space-y-2 px-6 pb-6", children: [
|
|
2986
|
+
/* @__PURE__ */ jsx7(
|
|
2987
|
+
"button",
|
|
2988
|
+
{
|
|
2989
|
+
onClick: handleRenew,
|
|
2990
|
+
disabled: !canRenew,
|
|
2991
|
+
className: `flex w-full items-center justify-center gap-2 rounded-lg py-2 text-base font-medium ${canRenew ? "btn-raised" : "btn-raised-disabled"}`,
|
|
2992
|
+
children: isRenewing ? /* @__PURE__ */ jsxs6(Fragment3, { children: [
|
|
2993
|
+
/* @__PURE__ */ jsx7(Loader2, { size: 14 }),
|
|
2994
|
+
" Renewing..."
|
|
2995
|
+
] }) : "Renew Agent Wallet"
|
|
2996
|
+
}
|
|
2997
|
+
),
|
|
2998
|
+
ownerReady && onDisconnectWallet && /* @__PURE__ */ jsx7(
|
|
2999
|
+
"button",
|
|
3000
|
+
{
|
|
3001
|
+
onClick: onDisconnectWallet,
|
|
3002
|
+
disabled: isRenewing,
|
|
3003
|
+
className: "w-full py-1.5 text-base text-content-muted transition-colors hover:text-content-tertiary disabled:cursor-not-allowed disabled:opacity-40",
|
|
3004
|
+
children: "Disconnect & use different owner"
|
|
3005
|
+
}
|
|
3006
|
+
)
|
|
3007
|
+
] })
|
|
3008
|
+
]
|
|
3009
|
+
}
|
|
3010
|
+
)
|
|
2997
3011
|
}
|
|
2998
|
-
)
|
|
3012
|
+
)
|
|
2999
3013
|
] }) });
|
|
3000
3014
|
}
|
|
3001
3015
|
function ApprovalDurationPicker2({
|
|
@@ -3005,14 +3019,14 @@ function ApprovalDurationPicker2({
|
|
|
3005
3019
|
disabled
|
|
3006
3020
|
}) {
|
|
3007
3021
|
return /* @__PURE__ */ jsxs6("div", { children: [
|
|
3008
|
-
/* @__PURE__ */ jsx7("label", { className: "mb-2 block text-base uppercase tracking-[0.1em] text-
|
|
3022
|
+
/* @__PURE__ */ jsx7("label", { className: "mb-2 block text-base uppercase tracking-[0.1em] text-content-muted", children: "Approval Duration" }),
|
|
3009
3023
|
/* @__PURE__ */ jsx7("div", { className: "grid grid-cols-4 gap-1.5", children: options.map((option) => /* @__PURE__ */ jsx7(
|
|
3010
3024
|
"button",
|
|
3011
3025
|
{
|
|
3012
3026
|
type: "button",
|
|
3013
3027
|
onClick: () => onChange(option.durationMs),
|
|
3014
3028
|
disabled,
|
|
3015
|
-
className: `rounded py-1.5 text-base font-medium disabled:cursor-not-allowed disabled:opacity-50 ${value === option.durationMs ? "btn-
|
|
3029
|
+
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
3030
|
children: option.label
|
|
3017
3031
|
},
|
|
3018
3032
|
`${option.label}-${option.durationMs}`
|
|
@@ -3143,25 +3157,29 @@ import {
|
|
|
3143
3157
|
|
|
3144
3158
|
// src/profileStyles.ts
|
|
3145
3159
|
var profileColors = {
|
|
3160
|
+
// Accent stays a literal hex — host may override via the accentColor prop
|
|
3161
|
+
// and helpers below expect a parseable color.
|
|
3146
3162
|
accent: "#a855f7",
|
|
3147
|
-
panel: "
|
|
3148
|
-
panelSolid: "
|
|
3149
|
-
backdrop: "
|
|
3150
|
-
border: "
|
|
3151
|
-
surfaceBtn: "
|
|
3152
|
-
surfaceBtnHover: "
|
|
3153
|
-
surfaceBtnActive: "
|
|
3154
|
-
surfaceBd: "
|
|
3155
|
-
surfaceBdHover: "
|
|
3156
|
-
surfaceBdActive: "
|
|
3157
|
-
text: "
|
|
3158
|
-
muted: "
|
|
3159
|
-
subdued: "
|
|
3160
|
-
disabled: "
|
|
3161
|
-
danger: "
|
|
3163
|
+
panel: "rgb(var(--surface-modal) / 0.8)",
|
|
3164
|
+
panelSolid: "rgb(var(--surface-modal))",
|
|
3165
|
+
backdrop: "rgb(var(--overlay) / 0.7)",
|
|
3166
|
+
border: "rgb(var(--line))",
|
|
3167
|
+
surfaceBtn: "rgb(var(--surface-btn))",
|
|
3168
|
+
surfaceBtnHover: "rgb(var(--surface-btn-hover))",
|
|
3169
|
+
surfaceBtnActive: "rgb(var(--surface-btn-active))",
|
|
3170
|
+
surfaceBd: "rgb(var(--surface-bd))",
|
|
3171
|
+
surfaceBdHover: "rgb(var(--surface-bd-hover))",
|
|
3172
|
+
surfaceBdActive: "rgb(var(--surface-bd-active))",
|
|
3173
|
+
text: "rgb(var(--content))",
|
|
3174
|
+
muted: "rgb(var(--content-muted))",
|
|
3175
|
+
subdued: "rgb(var(--content-subtle))",
|
|
3176
|
+
disabled: "rgb(var(--content-disabled))",
|
|
3177
|
+
danger: "rgb(var(--trade-down))",
|
|
3178
|
+
// Keep the punchier red literal for hover backgrounds where we want a
|
|
3179
|
+
// specific warm tint regardless of theme.
|
|
3162
3180
|
dangerStrong: "#ef4444",
|
|
3163
|
-
purple: "
|
|
3164
|
-
yellow: "
|
|
3181
|
+
purple: "rgb(var(--purple-400))",
|
|
3182
|
+
yellow: "rgb(var(--amber-400))"
|
|
3165
3183
|
};
|
|
3166
3184
|
var fontFamily = {
|
|
3167
3185
|
sans: "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif",
|
|
@@ -3200,7 +3218,7 @@ var relativeLuminance = (color) => {
|
|
|
3200
3218
|
});
|
|
3201
3219
|
return 0.2126 * r + 0.7152 * g + 0.0722 * b;
|
|
3202
3220
|
};
|
|
3203
|
-
var pickContrastColor = (background, lightFg =
|
|
3221
|
+
var pickContrastColor = (background, lightFg = "#ffffff", darkFg = "#0a0a0a") => {
|
|
3204
3222
|
const lum = relativeLuminance(background);
|
|
3205
3223
|
if (lum === null) return lightFg;
|
|
3206
3224
|
return lum > 0.5 ? darkFg : lightFg;
|
|
@@ -3260,7 +3278,7 @@ var modalPanelStyle = (solid = false) => ({
|
|
|
3260
3278
|
WebkitBackdropFilter: solid ? void 0 : "blur(10px)",
|
|
3261
3279
|
border: `1px solid ${profileColors.border}`,
|
|
3262
3280
|
borderRadius: 8,
|
|
3263
|
-
boxShadow: "
|
|
3281
|
+
boxShadow: "var(--shadow-modal)",
|
|
3264
3282
|
overflow: "hidden",
|
|
3265
3283
|
fontFamily: fontFamily.sans
|
|
3266
3284
|
});
|
|
@@ -3298,46 +3316,9 @@ var upperLabelStyle = {
|
|
|
3298
3316
|
textTransform: "uppercase",
|
|
3299
3317
|
letterSpacing: "0.1em"
|
|
3300
3318
|
};
|
|
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
3319
|
var dangerOutlineButtonStyle = (enabled, hovered = false) => ({
|
|
3339
3320
|
background: enabled && hovered ? "rgba(248,113,113,0.1)" : "transparent",
|
|
3340
|
-
border: `1px solid ${enabled ? profileColors.danger : "
|
|
3321
|
+
border: `1px solid ${enabled ? profileColors.danger : "rgb(var(--line-strong))"}`,
|
|
3341
3322
|
color: enabled ? profileColors.danger : profileColors.disabled,
|
|
3342
3323
|
cursor: enabled ? "pointer" : "not-allowed"
|
|
3343
3324
|
});
|
|
@@ -3354,7 +3335,7 @@ var panelStyle = {
|
|
|
3354
3335
|
};
|
|
3355
3336
|
var headerStyle = {
|
|
3356
3337
|
...modalHeaderStyle,
|
|
3357
|
-
borderBottom: "1px solid
|
|
3338
|
+
borderBottom: "1px solid rgb(var(--line))"
|
|
3358
3339
|
};
|
|
3359
3340
|
var bodyStyle = {
|
|
3360
3341
|
padding: "20px 24px",
|
|
@@ -3373,8 +3354,8 @@ var warningBoxStyle = {
|
|
|
3373
3354
|
};
|
|
3374
3355
|
var infoBoxStyle = {
|
|
3375
3356
|
padding: "10px 12px",
|
|
3376
|
-
background: "
|
|
3377
|
-
border: "1px solid
|
|
3357
|
+
background: "rgb(var(--btn-bevel) / 0.03)",
|
|
3358
|
+
border: "1px solid rgb(var(--line))",
|
|
3378
3359
|
borderRadius: 8
|
|
3379
3360
|
};
|
|
3380
3361
|
var labelStyle = {
|
|
@@ -3386,18 +3367,14 @@ var labelStyle = {
|
|
|
3386
3367
|
};
|
|
3387
3368
|
var inputStyle = (disabled) => ({
|
|
3388
3369
|
width: "100%",
|
|
3389
|
-
background: "rgba(13,18,25,0.9)",
|
|
3390
|
-
border: `1px solid ${profileColors.surfaceBd}`,
|
|
3391
3370
|
borderRadius: 8,
|
|
3392
3371
|
padding: "10px 12px",
|
|
3393
|
-
color: profileColors.text,
|
|
3394
3372
|
fontFamily: fontFamily.mono,
|
|
3395
3373
|
fontSize: 12.5,
|
|
3396
3374
|
lineHeight: "1rem",
|
|
3397
3375
|
outline: "none",
|
|
3398
3376
|
opacity: disabled ? 0.5 : 1,
|
|
3399
|
-
boxSizing: "border-box"
|
|
3400
|
-
transition: "border-color 150ms, background-color 150ms"
|
|
3377
|
+
boxSizing: "border-box"
|
|
3401
3378
|
});
|
|
3402
3379
|
var footerStyle = {
|
|
3403
3380
|
padding: "0 24px 24px"
|
|
@@ -3428,7 +3405,7 @@ function DeleteWalletModal({
|
|
|
3428
3405
|
const [error, setError] = useState5(null);
|
|
3429
3406
|
const [deleteHovered, setDeleteHovered] = useState5(false);
|
|
3430
3407
|
const walletName = wallet?.name || "Unnamed Wallet";
|
|
3431
|
-
const displayAddress = wallet?.
|
|
3408
|
+
const displayAddress = wallet?.ethereumAddress;
|
|
3432
3409
|
const isNameMatch = confirmName === walletName;
|
|
3433
3410
|
const canDelete = isNameMatch && !isDeleting;
|
|
3434
3411
|
const handleClose = useCallback6(() => {
|
|
@@ -3466,7 +3443,7 @@ function DeleteWalletModal({
|
|
|
3466
3443
|
},
|
|
3467
3444
|
"backdrop"
|
|
3468
3445
|
),
|
|
3469
|
-
/* @__PURE__ */ jsx9("div", { style: wrapperStyle, children: /* @__PURE__ */ jsxs8(
|
|
3446
|
+
/* @__PURE__ */ jsx9("div", { style: wrapperStyle, onClick: handleClose, children: /* @__PURE__ */ jsxs8(
|
|
3470
3447
|
motion4.div,
|
|
3471
3448
|
{
|
|
3472
3449
|
style: panelStyle,
|
|
@@ -3596,6 +3573,7 @@ function DeleteWalletModal({
|
|
|
3596
3573
|
onChange: (e) => setConfirmName(e.target.value),
|
|
3597
3574
|
placeholder: walletName,
|
|
3598
3575
|
disabled: isDeleting,
|
|
3576
|
+
className: "input text-content placeholder-content-faint",
|
|
3599
3577
|
style: inputStyle(isDeleting)
|
|
3600
3578
|
}
|
|
3601
3579
|
)
|
|
@@ -3679,7 +3657,7 @@ var panelStyle2 = {
|
|
|
3679
3657
|
};
|
|
3680
3658
|
var headerStyle2 = {
|
|
3681
3659
|
...modalHeaderStyle,
|
|
3682
|
-
borderBottom: "1px solid
|
|
3660
|
+
borderBottom: "1px solid rgb(var(--line))"
|
|
3683
3661
|
};
|
|
3684
3662
|
var bodyStyle2 = {
|
|
3685
3663
|
padding: "20px 24px",
|
|
@@ -3689,8 +3667,8 @@ var bodyStyle2 = {
|
|
|
3689
3667
|
};
|
|
3690
3668
|
var infoBoxStyle2 = {
|
|
3691
3669
|
padding: "10px 12px",
|
|
3692
|
-
background: "
|
|
3693
|
-
border: "1px solid
|
|
3670
|
+
background: "rgb(var(--btn-bevel) / 0.03)",
|
|
3671
|
+
border: "1px solid rgb(var(--line))",
|
|
3694
3672
|
borderRadius: 8
|
|
3695
3673
|
};
|
|
3696
3674
|
var labelStyle2 = {
|
|
@@ -3700,26 +3678,21 @@ var labelStyle2 = {
|
|
|
3700
3678
|
color: profileColors.muted,
|
|
3701
3679
|
marginBottom: 8
|
|
3702
3680
|
};
|
|
3703
|
-
var inputStyle2 = (
|
|
3681
|
+
var inputStyle2 = (disabled) => ({
|
|
3704
3682
|
width: "100%",
|
|
3705
|
-
background: "rgba(13,18,25,0.9)",
|
|
3706
|
-
border: `1px solid ${hasError ? "rgba(248,113,113,0.5)" : profileColors.surfaceBd}`,
|
|
3707
3683
|
borderRadius: 8,
|
|
3708
3684
|
padding: "10px 12px",
|
|
3709
|
-
color: profileColors.text,
|
|
3710
3685
|
fontFamily: fontFamily.mono,
|
|
3711
3686
|
fontSize: 12.5,
|
|
3712
3687
|
lineHeight: "1rem",
|
|
3713
3688
|
outline: "none",
|
|
3714
3689
|
opacity: disabled ? 0.5 : 1,
|
|
3715
|
-
boxSizing: "border-box"
|
|
3716
|
-
transition: "border-color 150ms, background-color 150ms"
|
|
3690
|
+
boxSizing: "border-box"
|
|
3717
3691
|
});
|
|
3718
3692
|
var footerStyle2 = {
|
|
3719
3693
|
padding: "0 24px 24px"
|
|
3720
3694
|
};
|
|
3721
|
-
var saveButtonStyle =
|
|
3722
|
-
...raisedButtonStyle(enabled ? hovered ? "hover" : "default" : "disabled"),
|
|
3695
|
+
var saveButtonStyle = {
|
|
3723
3696
|
width: "100%",
|
|
3724
3697
|
padding: "8px 0",
|
|
3725
3698
|
borderRadius: 8,
|
|
@@ -3730,7 +3703,7 @@ var saveButtonStyle = (enabled, hovered) => ({
|
|
|
3730
3703
|
alignItems: "center",
|
|
3731
3704
|
justifyContent: "center",
|
|
3732
3705
|
gap: 8
|
|
3733
|
-
}
|
|
3706
|
+
};
|
|
3734
3707
|
function RenameWalletModal({
|
|
3735
3708
|
isOpen,
|
|
3736
3709
|
onClose,
|
|
@@ -3741,9 +3714,8 @@ function RenameWalletModal({
|
|
|
3741
3714
|
const [name, setName] = useState6("");
|
|
3742
3715
|
const [isRenaming, setIsRenaming] = useState6(false);
|
|
3743
3716
|
const [error, setError] = useState6(null);
|
|
3744
|
-
const [saveHovered, setSaveHovered] = useState6(false);
|
|
3745
3717
|
const currentName = wallet?.name || "Unnamed";
|
|
3746
|
-
const displayAddress = wallet?.
|
|
3718
|
+
const displayAddress = wallet?.ethereumAddress;
|
|
3747
3719
|
const trimmedName = name.trim();
|
|
3748
3720
|
const isNameChanged = trimmedName !== currentName;
|
|
3749
3721
|
const isNameValid = WALLET_NAME_REGEX2.test(trimmedName);
|
|
@@ -3794,7 +3766,7 @@ function RenameWalletModal({
|
|
|
3794
3766
|
},
|
|
3795
3767
|
"backdrop"
|
|
3796
3768
|
),
|
|
3797
|
-
/* @__PURE__ */ jsx10("div", { style: wrapperStyle2, children: /* @__PURE__ */ jsxs9(
|
|
3769
|
+
/* @__PURE__ */ jsx10("div", { style: wrapperStyle2, onClick: handleClose, children: /* @__PURE__ */ jsxs9(
|
|
3798
3770
|
motion5.div,
|
|
3799
3771
|
{
|
|
3800
3772
|
style: panelStyle2,
|
|
@@ -3874,8 +3846,9 @@ function RenameWalletModal({
|
|
|
3874
3846
|
if (e.key === "Escape") handleClose();
|
|
3875
3847
|
},
|
|
3876
3848
|
disabled: isRenaming,
|
|
3877
|
-
|
|
3878
|
-
|
|
3849
|
+
placeholder: "Wallet name",
|
|
3850
|
+
className: `input text-content placeholder-content-faint ${error ? "input-error" : ""}`,
|
|
3851
|
+
style: inputStyle2(isRenaming)
|
|
3879
3852
|
}
|
|
3880
3853
|
),
|
|
3881
3854
|
/* @__PURE__ */ jsx10(
|
|
@@ -3933,9 +3906,8 @@ function RenameWalletModal({
|
|
|
3933
3906
|
{
|
|
3934
3907
|
onClick: handleRename,
|
|
3935
3908
|
disabled: !canSubmit,
|
|
3936
|
-
|
|
3937
|
-
|
|
3938
|
-
style: saveButtonStyle(canSubmit, saveHovered),
|
|
3909
|
+
className: canSubmit ? "btn-raised" : "btn-raised-disabled",
|
|
3910
|
+
style: saveButtonStyle,
|
|
3939
3911
|
children: isRenaming ? /* @__PURE__ */ jsxs9(Fragment6, { children: [
|
|
3940
3912
|
/* @__PURE__ */ jsx10(Loader2, { size: 14 }),
|
|
3941
3913
|
" Saving..."
|
|
@@ -3963,7 +3935,7 @@ var DEFAULT_SLIPPAGE_OPTIONS = [
|
|
|
3963
3935
|
];
|
|
3964
3936
|
var backdropStyle4 = modalBackdropStyle(100);
|
|
3965
3937
|
var wrapperStyle3 = modalWrapperStyle2(101);
|
|
3966
|
-
var panelStyle3 = modalPanelStyle(
|
|
3938
|
+
var panelStyle3 = modalPanelStyle(true);
|
|
3967
3939
|
var headerStyle3 = modalHeaderStyle;
|
|
3968
3940
|
var profileSectionStyle = {
|
|
3969
3941
|
padding: "20px 24px",
|
|
@@ -3992,22 +3964,14 @@ var tabButtonLayoutStyle = {
|
|
|
3992
3964
|
transition: "background-color 150ms, color 150ms, box-shadow 150ms"
|
|
3993
3965
|
};
|
|
3994
3966
|
var statBoxStyle = {
|
|
3995
|
-
background: "
|
|
3967
|
+
background: "rgb(var(--btn-bevel) / 0.03)",
|
|
3996
3968
|
borderRadius: 8,
|
|
3997
3969
|
padding: 12,
|
|
3998
3970
|
border: `1px solid ${profileColors.border}`
|
|
3999
3971
|
};
|
|
4000
|
-
var
|
|
4001
|
-
|
|
4002
|
-
|
|
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
|
-
};
|
|
3972
|
+
var slippageBtnBaseClass = "flex-1 rounded border px-2 py-1 font-mono font-medium text-base transition-colors";
|
|
3973
|
+
var slippageBtnSelectedClass = "bg-surface-btn-active text-content border-surface-bd-active";
|
|
3974
|
+
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
3975
|
var walletRowStyle = {
|
|
4012
3976
|
display: "flex",
|
|
4013
3977
|
alignItems: "center",
|
|
@@ -4022,26 +3986,26 @@ function getWalletTypeMeta(wallet) {
|
|
|
4022
3986
|
if (wallet.isAgent) {
|
|
4023
3987
|
return {
|
|
4024
3988
|
label: "Agent wallet",
|
|
4025
|
-
color: "
|
|
4026
|
-
background: "
|
|
4027
|
-
border: "
|
|
3989
|
+
color: "rgb(var(--blue-500))",
|
|
3990
|
+
background: "rgb(var(--blue-500) / 0.16)",
|
|
3991
|
+
border: "rgb(var(--blue-500) / 0.34)",
|
|
4028
3992
|
icon: /* @__PURE__ */ jsx11(Bot, { size: 10 })
|
|
4029
3993
|
};
|
|
4030
3994
|
}
|
|
4031
3995
|
if (wallet.isReadOnly) {
|
|
4032
3996
|
return {
|
|
4033
3997
|
label: "Read-only wallet",
|
|
4034
|
-
color: "
|
|
4035
|
-
background: "
|
|
4036
|
-
border: "
|
|
3998
|
+
color: "rgb(var(--purple-400))",
|
|
3999
|
+
background: "rgb(var(--purple-400) / 0.16)",
|
|
4000
|
+
border: "rgb(var(--purple-400) / 0.34)",
|
|
4037
4001
|
icon: /* @__PURE__ */ jsx11(Eye, { size: 10 })
|
|
4038
4002
|
};
|
|
4039
4003
|
}
|
|
4040
4004
|
return {
|
|
4041
4005
|
label: "Private-key wallet",
|
|
4042
|
-
color: "
|
|
4043
|
-
background: "
|
|
4044
|
-
border: "
|
|
4006
|
+
color: "rgb(var(--green-400))",
|
|
4007
|
+
background: "rgb(var(--green-400) / 0.16)",
|
|
4008
|
+
border: "rgb(var(--green-400) / 0.34)",
|
|
4045
4009
|
icon: /* @__PURE__ */ jsx11(KeyRound, { size: 10 })
|
|
4046
4010
|
};
|
|
4047
4011
|
}
|
|
@@ -4064,7 +4028,7 @@ function ToggleSwitch({
|
|
|
4064
4028
|
alignItems: "center",
|
|
4065
4029
|
borderRadius: 9999,
|
|
4066
4030
|
border: "none",
|
|
4067
|
-
background: checked ? accentColor : "
|
|
4031
|
+
background: checked ? colorWithAlpha(accentColor, 0.85) : "rgb(var(--btn-bevel) / 0.08)",
|
|
4068
4032
|
cursor: "pointer",
|
|
4069
4033
|
padding: 0,
|
|
4070
4034
|
transition: "background 150ms"
|
|
@@ -4092,21 +4056,13 @@ function RaisedButton({
|
|
|
4092
4056
|
children,
|
|
4093
4057
|
style
|
|
4094
4058
|
}) {
|
|
4095
|
-
const [hovered, setHovered] = useState7(false);
|
|
4096
4059
|
return /* @__PURE__ */ jsx11(
|
|
4097
4060
|
"button",
|
|
4098
4061
|
{
|
|
4099
4062
|
type: "button",
|
|
4100
4063
|
onClick,
|
|
4101
|
-
|
|
4102
|
-
|
|
4103
|
-
style: {
|
|
4104
|
-
...tabButtonLayoutStyle,
|
|
4105
|
-
...raisedButtonStyle(
|
|
4106
|
-
selected ? "active" : hovered ? "hover" : "default"
|
|
4107
|
-
),
|
|
4108
|
-
...style
|
|
4109
|
-
},
|
|
4064
|
+
className: selected ? "btn-raised-active" : "btn-raised",
|
|
4065
|
+
style: { ...tabButtonLayoutStyle, ...style },
|
|
4110
4066
|
children
|
|
4111
4067
|
}
|
|
4112
4068
|
);
|
|
@@ -4116,20 +4072,12 @@ function SlippageButton({
|
|
|
4116
4072
|
onClick,
|
|
4117
4073
|
children
|
|
4118
4074
|
}) {
|
|
4119
|
-
const [hovered, setHovered] = useState7(false);
|
|
4120
4075
|
return /* @__PURE__ */ jsx11(
|
|
4121
4076
|
"button",
|
|
4122
4077
|
{
|
|
4123
4078
|
type: "button",
|
|
4124
4079
|
onClick,
|
|
4125
|
-
|
|
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
|
-
},
|
|
4080
|
+
className: `${slippageBtnBaseClass} ${selected ? slippageBtnSelectedClass : slippageBtnIdleClass}`,
|
|
4133
4081
|
children
|
|
4134
4082
|
}
|
|
4135
4083
|
);
|
|
@@ -4229,7 +4177,7 @@ function UserProfileModal({
|
|
|
4229
4177
|
{
|
|
4230
4178
|
style: {
|
|
4231
4179
|
padding: "10px 12px",
|
|
4232
|
-
background: "
|
|
4180
|
+
background: "rgb(var(--btn-bevel) / 0.03)",
|
|
4233
4181
|
border: `1px solid ${profileColors.border}`,
|
|
4234
4182
|
borderRadius: 8
|
|
4235
4183
|
},
|
|
@@ -4385,11 +4333,18 @@ function UserProfileModal({
|
|
|
4385
4333
|
display: "flex",
|
|
4386
4334
|
alignItems: "center",
|
|
4387
4335
|
gap: 6,
|
|
4388
|
-
color: "
|
|
4336
|
+
color: "rgb(var(--amber-400))",
|
|
4389
4337
|
marginBottom: 6
|
|
4390
4338
|
},
|
|
4391
4339
|
children: [
|
|
4392
|
-
/* @__PURE__ */ jsx11(
|
|
4340
|
+
/* @__PURE__ */ jsx11(
|
|
4341
|
+
Star,
|
|
4342
|
+
{
|
|
4343
|
+
size: 13,
|
|
4344
|
+
color: "rgb(var(--amber-400))",
|
|
4345
|
+
fill: "rgb(var(--amber-400))"
|
|
4346
|
+
}
|
|
4347
|
+
),
|
|
4393
4348
|
/* @__PURE__ */ jsx11("span", { style: upperLabelStyle, children: "Hfun Score" })
|
|
4394
4349
|
]
|
|
4395
4350
|
}
|
|
@@ -4628,7 +4583,7 @@ function UserProfileModal({
|
|
|
4628
4583
|
width: 40,
|
|
4629
4584
|
height: 40,
|
|
4630
4585
|
borderRadius: "50%",
|
|
4631
|
-
background: "
|
|
4586
|
+
background: "rgb(var(--btn-bevel) / 0.04)",
|
|
4632
4587
|
display: "flex",
|
|
4633
4588
|
alignItems: "center",
|
|
4634
4589
|
justifyContent: "center",
|
|
@@ -4701,8 +4656,8 @@ function UserProfileModal({
|
|
|
4701
4656
|
"button",
|
|
4702
4657
|
{
|
|
4703
4658
|
onClick: onClose,
|
|
4659
|
+
className: "btn-raised",
|
|
4704
4660
|
style: {
|
|
4705
|
-
...raisedButtonStyle("default"),
|
|
4706
4661
|
width: "100%",
|
|
4707
4662
|
padding: "6px 0",
|
|
4708
4663
|
fontSize: 12.5,
|
|
@@ -4753,7 +4708,6 @@ function WalletRow({
|
|
|
4753
4708
|
const [hovered, setHovered] = useState7(false);
|
|
4754
4709
|
const agentExpiryTitle = getAgentExpiryTitle(wallet);
|
|
4755
4710
|
const isAgentExpired = !!agentExpiryTitle;
|
|
4756
|
-
const displayAddress = wallet.isAgent && wallet.agentEthereumAddress?.value ? wallet.agentEthereumAddress.value : wallet.ethereumAddress;
|
|
4757
4711
|
const typeMeta = getWalletTypeMeta(wallet);
|
|
4758
4712
|
return /* @__PURE__ */ jsxs10(
|
|
4759
4713
|
"div",
|
|
@@ -4813,7 +4767,7 @@ function WalletRow({
|
|
|
4813
4767
|
color: typeMeta.color,
|
|
4814
4768
|
background: typeMeta.background,
|
|
4815
4769
|
border: `1px solid ${typeMeta.border}`,
|
|
4816
|
-
boxShadow: "0 1px 4px
|
|
4770
|
+
boxShadow: "0 1px 4px rgb(var(--btn-bevel) / 0.18)"
|
|
4817
4771
|
},
|
|
4818
4772
|
children: typeMeta.icon
|
|
4819
4773
|
}
|
|
@@ -4860,9 +4814,9 @@ function WalletRow({
|
|
|
4860
4814
|
fontFamily: fontFamily.mono
|
|
4861
4815
|
},
|
|
4862
4816
|
children: [
|
|
4863
|
-
|
|
4817
|
+
wallet.ethereumAddress?.slice(0, 6),
|
|
4864
4818
|
"...",
|
|
4865
|
-
|
|
4819
|
+
wallet.ethereumAddress?.slice(-4)
|
|
4866
4820
|
]
|
|
4867
4821
|
}
|
|
4868
4822
|
)
|
|
@@ -4973,7 +4927,7 @@ function IconBtn({
|
|
|
4973
4927
|
|
|
4974
4928
|
// src/WalletSelectorDropdown.tsx
|
|
4975
4929
|
import { Fragment as Fragment9, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
4976
|
-
var DEFAULT_BACKGROUND_COLOR2 = "
|
|
4930
|
+
var DEFAULT_BACKGROUND_COLOR2 = "rgb(var(--surface-dropdown))";
|
|
4977
4931
|
var getWalletNameParts = (name) => (name ?? "").split("/").map((part) => part.trim()).filter(Boolean);
|
|
4978
4932
|
var buildWalletListEntries = (wallets) => {
|
|
4979
4933
|
const standalone = [];
|
|
@@ -5042,7 +4996,6 @@ var formatCompactAddress = (addr) => {
|
|
|
5042
4996
|
if (!addr) return "";
|
|
5043
4997
|
return `${addr.slice(0, 4)}...${addr.slice(-2)}`;
|
|
5044
4998
|
};
|
|
5045
|
-
var getDisplayAddress = (wallet) => wallet.isAgent && wallet.agentEthereumAddress?.value ? wallet.agentEthereumAddress.value : wallet.ethereumAddress;
|
|
5046
4999
|
function getWalletTypeMeta2(wallet) {
|
|
5047
5000
|
if (wallet.isAgent) {
|
|
5048
5001
|
return {
|
|
@@ -5069,21 +5022,19 @@ var rootStyle = {
|
|
|
5069
5022
|
right: 0,
|
|
5070
5023
|
top: "calc(100% + 4px)",
|
|
5071
5024
|
width: 240,
|
|
5072
|
-
backdropFilter: "blur(10px)",
|
|
5073
|
-
WebkitBackdropFilter: "blur(10px)",
|
|
5074
5025
|
borderRadius: 9,
|
|
5075
|
-
boxShadow: "
|
|
5076
|
-
border: "1px solid
|
|
5026
|
+
boxShadow: "var(--shadow-dropdown)",
|
|
5027
|
+
border: "1px solid rgb(var(--line))",
|
|
5077
5028
|
zIndex: 50,
|
|
5078
5029
|
transformOrigin: "top right",
|
|
5079
5030
|
overflow: "hidden"
|
|
5080
5031
|
};
|
|
5081
|
-
var sectionBorder = "1px solid
|
|
5032
|
+
var sectionBorder = "1px solid rgb(var(--line))";
|
|
5082
5033
|
var sectionHeaderStyle = {
|
|
5083
5034
|
padding: "8px 16px",
|
|
5084
5035
|
fontSize: 12,
|
|
5085
5036
|
fontWeight: 600,
|
|
5086
|
-
color: "
|
|
5037
|
+
color: "rgb(var(--content-muted))",
|
|
5087
5038
|
textTransform: "uppercase",
|
|
5088
5039
|
letterSpacing: "0.05em"
|
|
5089
5040
|
};
|
|
@@ -5098,7 +5049,7 @@ var footerBtnStyle = {
|
|
|
5098
5049
|
display: "flex",
|
|
5099
5050
|
alignItems: "center",
|
|
5100
5051
|
gap: 8,
|
|
5101
|
-
color: "
|
|
5052
|
+
color: "rgb(var(--content-muted))",
|
|
5102
5053
|
transition: "background 120ms, color 120ms"
|
|
5103
5054
|
};
|
|
5104
5055
|
function WalletSelectorDropdown({
|
|
@@ -5153,8 +5104,7 @@ function WalletSelectorDropdown({
|
|
|
5153
5104
|
const renderWalletRow = (item, depth) => {
|
|
5154
5105
|
const { wallet, label } = item;
|
|
5155
5106
|
const isSelected = wallet.id === selectedWalletId;
|
|
5156
|
-
const
|
|
5157
|
-
const compactAddress = formatCompactAddress(displayAddress);
|
|
5107
|
+
const compactAddress = formatCompactAddress(wallet.ethereumAddress);
|
|
5158
5108
|
const agentExpiryTitle = getAgentExpiryTitle({
|
|
5159
5109
|
isAgent: !!wallet.isAgent,
|
|
5160
5110
|
agentExpiresAt: wallet.agentExpiresAt
|
|
@@ -5175,7 +5125,7 @@ function WalletSelectorDropdown({
|
|
|
5175
5125
|
onShowPortfolio(wallet);
|
|
5176
5126
|
onClose();
|
|
5177
5127
|
} : void 0,
|
|
5178
|
-
onCopy: () => handleCopyAddress(
|
|
5128
|
+
onCopy: () => handleCopyAddress(wallet.ethereumAddress),
|
|
5179
5129
|
agentExpiryTitle,
|
|
5180
5130
|
onRenewAgentWallet: wallet.isAgent && onRenewAgentWallet ? () => {
|
|
5181
5131
|
onRenewAgentWallet(wallet);
|
|
@@ -5209,14 +5159,14 @@ function WalletSelectorDropdown({
|
|
|
5209
5159
|
gap: 12,
|
|
5210
5160
|
background: "transparent",
|
|
5211
5161
|
border: "none",
|
|
5212
|
-
borderBottomColor: "
|
|
5162
|
+
borderBottomColor: "rgb(var(--btn-bevel) / 0.06)",
|
|
5213
5163
|
borderBottomStyle: "solid",
|
|
5214
5164
|
borderBottomWidth: 1,
|
|
5215
5165
|
cursor: "pointer",
|
|
5216
5166
|
textAlign: "left",
|
|
5217
5167
|
transition: "background 120ms"
|
|
5218
5168
|
},
|
|
5219
|
-
onMouseEnter: (e) => e.currentTarget.style.background = "
|
|
5169
|
+
onMouseEnter: (e) => e.currentTarget.style.background = "rgb(var(--btn-bevel) / 0.06)",
|
|
5220
5170
|
onMouseLeave: (e) => e.currentTarget.style.background = "transparent",
|
|
5221
5171
|
children: [
|
|
5222
5172
|
profilePic ? /* @__PURE__ */ jsxs11(
|
|
@@ -5318,7 +5268,7 @@ function WalletSelectorDropdown({
|
|
|
5318
5268
|
margin: 0,
|
|
5319
5269
|
fontSize: 14,
|
|
5320
5270
|
fontWeight: 500,
|
|
5321
|
-
color: "
|
|
5271
|
+
color: "rgb(var(--content))",
|
|
5322
5272
|
overflow: "hidden",
|
|
5323
5273
|
textOverflow: "ellipsis",
|
|
5324
5274
|
whiteSpace: "nowrap"
|
|
@@ -5380,7 +5330,7 @@ function WalletSelectorDropdown({
|
|
|
5380
5330
|
fontWeight: 600,
|
|
5381
5331
|
textTransform: "uppercase",
|
|
5382
5332
|
letterSpacing: "0.05em",
|
|
5383
|
-
color: isSelectedGroup ? "
|
|
5333
|
+
color: isSelectedGroup ? "rgb(var(--content-secondary))" : "rgb(var(--content-faint))"
|
|
5384
5334
|
},
|
|
5385
5335
|
children: [
|
|
5386
5336
|
/* @__PURE__ */ jsx12(Folder, { size: 12, style: { flexShrink: 0 } }),
|
|
@@ -5403,7 +5353,7 @@ function WalletSelectorDropdown({
|
|
|
5403
5353
|
style: {
|
|
5404
5354
|
flexShrink: 0,
|
|
5405
5355
|
fontVariantNumeric: "tabular-nums",
|
|
5406
|
-
color: "
|
|
5356
|
+
color: "rgb(var(--content-disabled))"
|
|
5407
5357
|
},
|
|
5408
5358
|
children: entry.items.length
|
|
5409
5359
|
}
|
|
@@ -5437,7 +5387,7 @@ function WalletSelectorDropdown({
|
|
|
5437
5387
|
color: colors.accentText,
|
|
5438
5388
|
transition: "background 120ms"
|
|
5439
5389
|
},
|
|
5440
|
-
onMouseEnter: (e) => e.currentTarget.style.background = "
|
|
5390
|
+
onMouseEnter: (e) => e.currentTarget.style.background = "rgb(var(--btn-bevel) / 0.06)",
|
|
5441
5391
|
onMouseLeave: (e) => e.currentTarget.style.background = "transparent",
|
|
5442
5392
|
children: [
|
|
5443
5393
|
/* @__PURE__ */ jsx12(Plus, { size: 14 }),
|
|
@@ -5506,7 +5456,7 @@ function FooterBtn({
|
|
|
5506
5456
|
onClick,
|
|
5507
5457
|
icon,
|
|
5508
5458
|
label,
|
|
5509
|
-
hoverColor = "
|
|
5459
|
+
hoverColor = "rgb(var(--content))"
|
|
5510
5460
|
}) {
|
|
5511
5461
|
return /* @__PURE__ */ jsxs11(
|
|
5512
5462
|
"button",
|
|
@@ -5514,12 +5464,12 @@ function FooterBtn({
|
|
|
5514
5464
|
onClick,
|
|
5515
5465
|
style: footerBtnStyle,
|
|
5516
5466
|
onMouseEnter: (e) => {
|
|
5517
|
-
e.currentTarget.style.background = "
|
|
5467
|
+
e.currentTarget.style.background = "rgb(var(--btn-bevel) / 0.06)";
|
|
5518
5468
|
e.currentTarget.style.color = hoverColor;
|
|
5519
5469
|
},
|
|
5520
5470
|
onMouseLeave: (e) => {
|
|
5521
5471
|
e.currentTarget.style.background = "transparent";
|
|
5522
|
-
e.currentTarget.style.color = "
|
|
5472
|
+
e.currentTarget.style.color = "rgb(var(--content-muted))";
|
|
5523
5473
|
},
|
|
5524
5474
|
children: [
|
|
5525
5475
|
icon,
|
|
@@ -5542,8 +5492,9 @@ function WalletRow2({
|
|
|
5542
5492
|
colors
|
|
5543
5493
|
}) {
|
|
5544
5494
|
const isAgentExpired = !!agentExpiryTitle;
|
|
5545
|
-
const walletTextColor = isAgentExpired ? EXPIRED_AGENT_COLOR : "
|
|
5546
|
-
const mutedTextColor = isAgentExpired ? "rgba(245,158,11,0.78)" : "
|
|
5495
|
+
const walletTextColor = isAgentExpired ? EXPIRED_AGENT_COLOR : "rgb(var(--content-tertiary))";
|
|
5496
|
+
const mutedTextColor = isAgentExpired ? "rgba(245,158,11,0.78)" : "rgb(var(--content-faint))";
|
|
5497
|
+
const isMobile = useIsMobile();
|
|
5547
5498
|
return /* @__PURE__ */ jsxs11(
|
|
5548
5499
|
"div",
|
|
5549
5500
|
{
|
|
@@ -5557,16 +5508,18 @@ function WalletRow2({
|
|
|
5557
5508
|
color: walletTextColor,
|
|
5558
5509
|
display: "flex",
|
|
5559
5510
|
alignItems: "center",
|
|
5560
|
-
background: isSelected ? "
|
|
5511
|
+
background: isSelected ? "rgb(var(--btn-bevel) / 0.06)" : "transparent",
|
|
5561
5512
|
transition: "background 120ms"
|
|
5562
5513
|
},
|
|
5563
5514
|
onMouseEnter: (e) => {
|
|
5564
|
-
e.currentTarget.style.background = "
|
|
5515
|
+
e.currentTarget.style.background = "rgb(var(--btn-bevel) / 0.06)";
|
|
5516
|
+
if (isMobile) return;
|
|
5565
5517
|
const actions = e.currentTarget.querySelector("[data-row-actions]");
|
|
5566
5518
|
if (actions) actions.style.opacity = "1";
|
|
5567
5519
|
},
|
|
5568
5520
|
onMouseLeave: (e) => {
|
|
5569
|
-
e.currentTarget.style.background = isSelected ? "
|
|
5521
|
+
e.currentTarget.style.background = isSelected ? "rgb(var(--btn-bevel) / 0.06)" : "transparent";
|
|
5522
|
+
if (isMobile) return;
|
|
5570
5523
|
const actions = e.currentTarget.querySelector("[data-row-actions]");
|
|
5571
5524
|
if (actions) actions.style.opacity = "0";
|
|
5572
5525
|
},
|
|
@@ -5612,7 +5565,7 @@ function WalletRow2({
|
|
|
5612
5565
|
overflow: "hidden",
|
|
5613
5566
|
textOverflow: "ellipsis",
|
|
5614
5567
|
whiteSpace: "nowrap",
|
|
5615
|
-
color: isAgentExpired ? walletTextColor : isSelected ? "
|
|
5568
|
+
color: isAgentExpired ? walletTextColor : isSelected ? "rgb(var(--content))" : void 0,
|
|
5616
5569
|
fontWeight: isSelected ? 500 : void 0
|
|
5617
5570
|
},
|
|
5618
5571
|
children: label
|
|
@@ -5639,7 +5592,7 @@ function WalletRow2({
|
|
|
5639
5592
|
{
|
|
5640
5593
|
style: {
|
|
5641
5594
|
fontSize: 12,
|
|
5642
|
-
color: isAgentExpired ? walletTextColor : isSelected ? "
|
|
5595
|
+
color: isAgentExpired ? walletTextColor : isSelected ? "rgb(var(--content))" : "rgb(var(--content-muted))",
|
|
5643
5596
|
fontWeight: isSelected ? 500 : void 0
|
|
5644
5597
|
},
|
|
5645
5598
|
children: compactAddress
|
|
@@ -5662,7 +5615,7 @@ function WalletRow2({
|
|
|
5662
5615
|
style: {
|
|
5663
5616
|
display: "flex",
|
|
5664
5617
|
alignItems: "center",
|
|
5665
|
-
opacity: 0,
|
|
5618
|
+
opacity: isMobile ? 1 : 0,
|
|
5666
5619
|
transition: "opacity 120ms"
|
|
5667
5620
|
},
|
|
5668
5621
|
children: [
|
|
@@ -5725,7 +5678,7 @@ function RowIconBtn({
|
|
|
5725
5678
|
marginLeft: 4,
|
|
5726
5679
|
background: "transparent",
|
|
5727
5680
|
border: "none",
|
|
5728
|
-
color: "
|
|
5681
|
+
color: "rgb(var(--content-disabled))",
|
|
5729
5682
|
cursor: "pointer",
|
|
5730
5683
|
display: "flex",
|
|
5731
5684
|
alignItems: "center",
|
|
@@ -5733,7 +5686,7 @@ function RowIconBtn({
|
|
|
5733
5686
|
transition: "color 120ms"
|
|
5734
5687
|
},
|
|
5735
5688
|
onMouseEnter: (e) => e.currentTarget.style.color = hoverColor,
|
|
5736
|
-
onMouseLeave: (e) => e.currentTarget.style.color = "
|
|
5689
|
+
onMouseLeave: (e) => e.currentTarget.style.color = "rgb(var(--content-disabled))",
|
|
5737
5690
|
children
|
|
5738
5691
|
}
|
|
5739
5692
|
);
|