@hfunlabs/hypurr-connect 0.1.19 → 0.1.21
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 +56 -73
- package/dist/index.js.map +1 -1
- package/package.json +3 -2
- package/src/HypurrConnectProvider.tsx +17 -0
- package/src/UserProfileModal.tsx +3 -3
- package/src/WalletSelectorDropdown.tsx +17 -51
- package/src/styles.css +1 -1
- package/src/tailwind.css +13 -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: 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");
|
|
24
|
+
styleInject('@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Google+Sans+Code:wght@400;500;600;700&display=swap";\n.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.hypurr-connect {\n -webkit-font-smoothing: auto;\n -moz-osx-font-smoothing: auto;\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 {
|
|
@@ -507,6 +507,18 @@ function HypurrConnectProvider({
|
|
|
507
507
|
localStorage.setItem(TELEGRAM_STORAGE_KEY, token);
|
|
508
508
|
localStorage.removeItem(LEGACY_TELEGRAM_STORAGE_KEY);
|
|
509
509
|
}, []);
|
|
510
|
+
useEffect(() => {
|
|
511
|
+
if (typeof document === "undefined" || !document.fonts) return;
|
|
512
|
+
for (const face of [
|
|
513
|
+
"500 1em 'Google Sans Code'",
|
|
514
|
+
"700 1em 'Google Sans Code'",
|
|
515
|
+
"600 1em Inter",
|
|
516
|
+
"700 1em Inter"
|
|
517
|
+
]) {
|
|
518
|
+
void document.fonts.load(face).catch(() => {
|
|
519
|
+
});
|
|
520
|
+
}
|
|
521
|
+
}, []);
|
|
510
522
|
useEffect(() => {
|
|
511
523
|
const params = new URLSearchParams(window.location.search);
|
|
512
524
|
const token = params.get("token");
|
|
@@ -4135,7 +4147,7 @@ function UserProfileModal({
|
|
|
4135
4147
|
navigator.clipboard.writeText(displayName);
|
|
4136
4148
|
onNotify?.({ type: "success", message: "Address copied" });
|
|
4137
4149
|
}, [displayName, onNotify]);
|
|
4138
|
-
return /* @__PURE__ */ jsxs10(
|
|
4150
|
+
return /* @__PURE__ */ jsxs10("div", { className: "hypurr-connect", style: { display: "contents" }, children: [
|
|
4139
4151
|
/* @__PURE__ */ jsx11(AnimatePresence6, { children: isOpen && /* @__PURE__ */ jsxs10(Fragment7, { children: [
|
|
4140
4152
|
/* @__PURE__ */ jsx11(SpinKeyframes, {}),
|
|
4141
4153
|
/* @__PURE__ */ jsx11(
|
|
@@ -4914,7 +4926,7 @@ function IconBtn({
|
|
|
4914
4926
|
borderRadius: 4,
|
|
4915
4927
|
background: hovered ? hoverBackgroundColor ?? "transparent" : "transparent",
|
|
4916
4928
|
border: "none",
|
|
4917
|
-
color: hovered ? color : profileColors.
|
|
4929
|
+
color: hovered ? color : profileColors.muted,
|
|
4918
4930
|
cursor: "pointer",
|
|
4919
4931
|
display: "flex",
|
|
4920
4932
|
alignItems: "center",
|
|
@@ -4997,27 +5009,6 @@ var formatCompactAddress = (addr) => {
|
|
|
4997
5009
|
if (!addr) return "";
|
|
4998
5010
|
return `${addr.slice(0, 4)}...${addr.slice(-2)}`;
|
|
4999
5011
|
};
|
|
5000
|
-
function getWalletTypeMeta2(wallet) {
|
|
5001
|
-
if (wallet.isAgent) {
|
|
5002
|
-
return {
|
|
5003
|
-
label: "Agent wallet",
|
|
5004
|
-
color: "#38bdf8",
|
|
5005
|
-
icon: /* @__PURE__ */ jsx12(Bot, { size: 12 })
|
|
5006
|
-
};
|
|
5007
|
-
}
|
|
5008
|
-
if (wallet.isReadOnly) {
|
|
5009
|
-
return {
|
|
5010
|
-
label: "Read-only wallet",
|
|
5011
|
-
color: "#a78bfa",
|
|
5012
|
-
icon: /* @__PURE__ */ jsx12(Eye, { size: 12 })
|
|
5013
|
-
};
|
|
5014
|
-
}
|
|
5015
|
-
return {
|
|
5016
|
-
label: "Private-key wallet",
|
|
5017
|
-
color: "#34d399",
|
|
5018
|
-
icon: /* @__PURE__ */ jsx12(KeyRound, { size: 12 })
|
|
5019
|
-
};
|
|
5020
|
-
}
|
|
5021
5012
|
var rootStyle = {
|
|
5022
5013
|
position: "absolute",
|
|
5023
5014
|
right: 0,
|
|
@@ -5030,6 +5021,13 @@ var rootStyle = {
|
|
|
5030
5021
|
transformOrigin: "top right",
|
|
5031
5022
|
overflow: "hidden"
|
|
5032
5023
|
};
|
|
5024
|
+
var SCROLLBAR_CLASS = "hpc-wallet-scroll";
|
|
5025
|
+
var scrollbarCss = `
|
|
5026
|
+
.${SCROLLBAR_CLASS}::-webkit-scrollbar { width: 6px; height: 6px; }
|
|
5027
|
+
.${SCROLLBAR_CLASS}::-webkit-scrollbar-track { background: #0b0e11; }
|
|
5028
|
+
.${SCROLLBAR_CLASS}::-webkit-scrollbar-thumb { background: #374151; border-radius: 3px; }
|
|
5029
|
+
.${SCROLLBAR_CLASS}::-webkit-scrollbar-thumb:hover { background: #4b5563; }
|
|
5030
|
+
`;
|
|
5033
5031
|
var sectionBorder = "1px solid rgb(var(--line))";
|
|
5034
5032
|
var sectionHeaderStyle = {
|
|
5035
5033
|
padding: "8px 16px",
|
|
@@ -5116,7 +5114,6 @@ function WalletSelectorDropdown({
|
|
|
5116
5114
|
depth,
|
|
5117
5115
|
isSelected,
|
|
5118
5116
|
label,
|
|
5119
|
-
walletType: getWalletTypeMeta2(wallet),
|
|
5120
5117
|
compactAddress,
|
|
5121
5118
|
onSelect: () => {
|
|
5122
5119
|
selectWallet(wallet.id);
|
|
@@ -5137,7 +5134,7 @@ function WalletSelectorDropdown({
|
|
|
5137
5134
|
wallet.id
|
|
5138
5135
|
);
|
|
5139
5136
|
};
|
|
5140
|
-
return /* @__PURE__ */ jsxs11(
|
|
5137
|
+
return /* @__PURE__ */ jsxs11("div", { className: "hypurr-connect", style: { display: "contents" }, children: [
|
|
5141
5138
|
/* @__PURE__ */ jsx12(AnimatePresence7, { children: isOpen && /* @__PURE__ */ jsxs11(
|
|
5142
5139
|
motion7.div,
|
|
5143
5140
|
{
|
|
@@ -5147,6 +5144,7 @@ function WalletSelectorDropdown({
|
|
|
5147
5144
|
exit: { opacity: 0, scale: 0.95 },
|
|
5148
5145
|
transition: { duration: 0.15, ease: "easeOut" },
|
|
5149
5146
|
children: [
|
|
5147
|
+
/* @__PURE__ */ jsx12("style", { children: scrollbarCss }),
|
|
5150
5148
|
/* @__PURE__ */ jsxs11(
|
|
5151
5149
|
"button",
|
|
5152
5150
|
{
|
|
@@ -5306,10 +5304,13 @@ function WalletSelectorDropdown({
|
|
|
5306
5304
|
/* @__PURE__ */ jsx12(
|
|
5307
5305
|
"div",
|
|
5308
5306
|
{
|
|
5307
|
+
className: SCROLLBAR_CLASS,
|
|
5309
5308
|
style: {
|
|
5310
5309
|
maxHeight: 256,
|
|
5311
5310
|
overflowY: "auto",
|
|
5312
|
-
paddingBottom: 4
|
|
5311
|
+
paddingBottom: 4,
|
|
5312
|
+
scrollbarWidth: "thin",
|
|
5313
|
+
scrollbarColor: "#374151 #0b0e11"
|
|
5313
5314
|
},
|
|
5314
5315
|
children: walletListEntries.map((entry) => {
|
|
5315
5316
|
if (entry.type === "wallet") {
|
|
@@ -5483,7 +5484,6 @@ function WalletRow2({
|
|
|
5483
5484
|
depth,
|
|
5484
5485
|
isSelected,
|
|
5485
5486
|
label,
|
|
5486
|
-
walletType,
|
|
5487
5487
|
compactAddress,
|
|
5488
5488
|
onSelect,
|
|
5489
5489
|
onShowPortfolio,
|
|
@@ -5525,7 +5525,7 @@ function WalletRow2({
|
|
|
5525
5525
|
if (actions) actions.style.opacity = "0";
|
|
5526
5526
|
},
|
|
5527
5527
|
children: [
|
|
5528
|
-
/* @__PURE__ */
|
|
5528
|
+
/* @__PURE__ */ jsx12(
|
|
5529
5529
|
"button",
|
|
5530
5530
|
{
|
|
5531
5531
|
onClick: onSelect,
|
|
@@ -5542,64 +5542,47 @@ function WalletRow2({
|
|
|
5542
5542
|
cursor: "pointer",
|
|
5543
5543
|
padding: 0
|
|
5544
5544
|
},
|
|
5545
|
-
children: [
|
|
5545
|
+
children: label ? /* @__PURE__ */ jsxs11(Fragment9, { children: [
|
|
5546
5546
|
/* @__PURE__ */ jsx12(
|
|
5547
5547
|
"span",
|
|
5548
5548
|
{
|
|
5549
|
-
title: walletType.label,
|
|
5550
|
-
"aria-label": walletType.label,
|
|
5551
5549
|
style: {
|
|
5552
|
-
|
|
5553
|
-
|
|
5554
|
-
|
|
5555
|
-
|
|
5556
|
-
|
|
5550
|
+
overflow: "hidden",
|
|
5551
|
+
textOverflow: "ellipsis",
|
|
5552
|
+
whiteSpace: "nowrap",
|
|
5553
|
+
color: isAgentExpired ? walletTextColor : isSelected ? "rgb(var(--content))" : void 0,
|
|
5554
|
+
fontWeight: isSelected ? 500 : void 0
|
|
5557
5555
|
},
|
|
5558
|
-
children:
|
|
5556
|
+
children: label
|
|
5559
5557
|
}
|
|
5560
5558
|
),
|
|
5561
|
-
|
|
5562
|
-
/* @__PURE__ */ jsx12(
|
|
5563
|
-
"span",
|
|
5564
|
-
{
|
|
5565
|
-
style: {
|
|
5566
|
-
overflow: "hidden",
|
|
5567
|
-
textOverflow: "ellipsis",
|
|
5568
|
-
whiteSpace: "nowrap",
|
|
5569
|
-
color: isAgentExpired ? walletTextColor : isSelected ? "rgb(var(--content))" : void 0,
|
|
5570
|
-
fontWeight: isSelected ? 500 : void 0
|
|
5571
|
-
},
|
|
5572
|
-
children: label
|
|
5573
|
-
}
|
|
5574
|
-
),
|
|
5575
|
-
/* @__PURE__ */ jsxs11(
|
|
5576
|
-
"span",
|
|
5577
|
-
{
|
|
5578
|
-
style: {
|
|
5579
|
-
fontSize: 12,
|
|
5580
|
-
fontWeight: 400,
|
|
5581
|
-
flexShrink: 0,
|
|
5582
|
-
color: mutedTextColor
|
|
5583
|
-
},
|
|
5584
|
-
children: [
|
|
5585
|
-
"(",
|
|
5586
|
-
compactAddress,
|
|
5587
|
-
")"
|
|
5588
|
-
]
|
|
5589
|
-
}
|
|
5590
|
-
)
|
|
5591
|
-
] }) : /* @__PURE__ */ jsx12(
|
|
5559
|
+
/* @__PURE__ */ jsxs11(
|
|
5592
5560
|
"span",
|
|
5593
5561
|
{
|
|
5594
5562
|
style: {
|
|
5595
5563
|
fontSize: 12,
|
|
5596
|
-
|
|
5597
|
-
|
|
5564
|
+
fontWeight: 400,
|
|
5565
|
+
flexShrink: 0,
|
|
5566
|
+
color: mutedTextColor
|
|
5598
5567
|
},
|
|
5599
|
-
children:
|
|
5568
|
+
children: [
|
|
5569
|
+
"(",
|
|
5570
|
+
compactAddress,
|
|
5571
|
+
")"
|
|
5572
|
+
]
|
|
5600
5573
|
}
|
|
5601
5574
|
)
|
|
5602
|
-
]
|
|
5575
|
+
] }) : /* @__PURE__ */ jsx12(
|
|
5576
|
+
"span",
|
|
5577
|
+
{
|
|
5578
|
+
style: {
|
|
5579
|
+
fontSize: 12,
|
|
5580
|
+
color: isAgentExpired ? walletTextColor : isSelected ? "rgb(var(--content))" : "rgb(var(--content-muted))",
|
|
5581
|
+
fontWeight: isSelected ? 500 : void 0
|
|
5582
|
+
},
|
|
5583
|
+
children: compactAddress
|
|
5584
|
+
}
|
|
5585
|
+
)
|
|
5603
5586
|
}
|
|
5604
5587
|
),
|
|
5605
5588
|
agentExpiryTitle && /* @__PURE__ */ jsx12(
|