@hfunlabs/hypurr-connect 0.1.20 → 0.1.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/README.md +6 -4
  2. package/dist/index.d.ts +2 -0
  3. package/dist/index.js +29 -5
  4. package/dist/index.js.map +1 -1
  5. package/package.json +3 -2
  6. package/src/HypurrConnectProvider.tsx +27 -0
  7. package/src/UserProfileModal.tsx +3 -3
  8. package/src/WalletSelectorDropdown.tsx +2 -2
  9. package/src/grpc.ts +5 -1
  10. package/src/styles.css +1 -1
  11. package/src/tailwind.css +13 -0
  12. package/src/types.ts +2 -0
package/README.md CHANGED
@@ -44,6 +44,7 @@ pnpm add @hfunlabs/hyperliquid @protobuf-ts/grpcweb-transport @protobuf-ts/runti
44
44
  import { HypurrConnectProvider } from "@hfunlabs/hypurr-connect";
45
45
 
46
46
  const config = {
47
+ client_id: "your-client-id",
47
48
  isTestnet: false,
48
49
  grpcUrl: "https://grpc.hypurr.fun",
49
50
  telegram: {
@@ -118,6 +119,7 @@ function AppShell() {
118
119
 
119
120
  ```typescript
120
121
  interface HypurrConnectConfig {
122
+ client_id: string; // Auth hub client identifier
121
123
  grpcUrl?: string; // gRPC-web base URL (default: https://grpc.hypurr.fun)
122
124
  mediaUrl?: string; // Media base URL (default: https://media.hypurr.fun)
123
125
  grpcTimeout?: number; // Request timeout in ms (default: 15000)
@@ -144,8 +146,8 @@ for generated protobuf service clients.
144
146
  ### Telegram Login
145
147
 
146
148
  1. User clicks "Telegram" in the `LoginModal`.
147
- 2. The SDK opens the configured auth hub in a popup with `return_to`, `state`,
148
- and requested `scope`.
149
+ 2. The SDK opens the configured auth hub in a popup with `client_id`,
150
+ `return_to`, `state`, and requested `scope`.
149
151
  3. The auth hub performs Telegram login and redirects back to `return_to` with
150
152
  a scoped JWT.
151
153
  4. The popup callback page posts `{ token, state }` to the opener with
@@ -579,8 +581,8 @@ Creates a gRPC-Web client for the Telegram service.
579
581
 
580
582
  Creates a gRPC-Web client for the Static service.
581
583
 
582
- Both use `GrpcWebFetchTransport` with `config.grpcUrl` as `baseUrl` and
583
- `config.grpcTimeout` as `timeout`.
584
+ Both use `GrpcWebFetchTransport` with `config.grpcUrl` or the default gRPC URL
585
+ as `baseUrl`, and `config.grpcTimeout` as `timeout`.
584
586
 
585
587
  ## localStorage Keys
586
588
 
package/dist/index.d.ts CHANGED
@@ -14,6 +14,8 @@ export { HyperliquidWallet } from 'hypurr-grpc/ts/hypurr/wallet';
14
14
  import { AbstractViemLocalAccount } from '@hfunlabs/hyperliquid/signing';
15
15
 
16
16
  interface HypurrConnectConfig {
17
+ /** Auth hub client identifier. Sent as `client_id` during Telegram login. */
18
+ client_id: string;
17
19
  /** gRPC-web base URL. Defaults to https://grpc.hypurr.fun. */
18
20
  grpcUrl?: string;
19
21
  /** Media base URL for user-uploaded assets. Defaults to https://media.hypurr.fun. */
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 {
@@ -140,9 +140,12 @@ import { GrpcWebFetchTransport } from "@protobuf-ts/grpcweb-transport";
140
140
  import { StaticClient } from "hypurr-grpc/ts/hypurr/static/static_service.client";
141
141
  import { TelegramClient } from "hypurr-grpc/ts/hypurr/telegram/telegram_service.client";
142
142
  var DEFAULT_GRPC_URL = "https://grpc.hypurr.fun";
143
+ function resolveGrpcUrl(config) {
144
+ return config.grpcUrl?.trim() || DEFAULT_GRPC_URL;
145
+ }
143
146
  function createTransport(config) {
144
147
  return new GrpcWebFetchTransport({
145
- baseUrl: config.grpcUrl ?? DEFAULT_GRPC_URL,
148
+ baseUrl: resolveGrpcUrl(config),
146
149
  timeout: config.grpcTimeout ?? 15e3
147
150
  });
148
151
  }
@@ -448,6 +451,13 @@ function normalizeScopes(scope) {
448
451
  if (Array.isArray(scope)) return scope.join(" ");
449
452
  return scope?.trim() || DEFAULT_TELEGRAM_SCOPES.join(" ");
450
453
  }
454
+ function normalizeClientId(clientId) {
455
+ const normalized = typeof clientId === "string" ? clientId.trim() : "";
456
+ if (!normalized) {
457
+ throw new Error("[HypurrConnect] config.client_id is required.");
458
+ }
459
+ return normalized;
460
+ }
451
461
  function isTelegramAuthMessage(data) {
452
462
  return typeof data === "object" && data !== null && "type" in data && "token" in data && "state" in data && data.type === TELEGRAM_AUTH_MESSAGE && typeof data.token === "string" && typeof data.state === "string";
453
463
  }
@@ -507,6 +517,18 @@ function HypurrConnectProvider({
507
517
  localStorage.setItem(TELEGRAM_STORAGE_KEY, token);
508
518
  localStorage.removeItem(LEGACY_TELEGRAM_STORAGE_KEY);
509
519
  }, []);
520
+ useEffect(() => {
521
+ if (typeof document === "undefined" || !document.fonts) return;
522
+ for (const face of [
523
+ "500 1em 'Google Sans Code'",
524
+ "700 1em 'Google Sans Code'",
525
+ "600 1em Inter",
526
+ "700 1em Inter"
527
+ ]) {
528
+ void document.fonts.load(face).catch(() => {
529
+ });
530
+ }
531
+ }, []);
510
532
  useEffect(() => {
511
533
  const params = new URLSearchParams(window.location.search);
512
534
  const token = params.get("token");
@@ -1301,6 +1323,7 @@ function HypurrConnectProvider({
1301
1323
  const authUrl = new URL(
1302
1324
  config.telegram?.authHubUrl || DEFAULT_AUTH_HUB_URL
1303
1325
  );
1326
+ authUrl.searchParams.set("client_id", normalizeClientId(config.client_id));
1304
1327
  authUrl.searchParams.set("return_to", returnTo);
1305
1328
  authUrl.searchParams.set("state", state);
1306
1329
  authUrl.searchParams.set("scope", normalizeScopes(config.telegram?.scope));
@@ -1326,6 +1349,7 @@ function HypurrConnectProvider({
1326
1349
  }
1327
1350
  window.location.assign(authUrl.toString());
1328
1351
  }, [
1352
+ config.client_id,
1329
1353
  config.telegram?.authHubUrl,
1330
1354
  config.telegram?.returnTo,
1331
1355
  config.telegram?.scope
@@ -4135,7 +4159,7 @@ function UserProfileModal({
4135
4159
  navigator.clipboard.writeText(displayName);
4136
4160
  onNotify?.({ type: "success", message: "Address copied" });
4137
4161
  }, [displayName, onNotify]);
4138
- return /* @__PURE__ */ jsxs10(Fragment7, { children: [
4162
+ return /* @__PURE__ */ jsxs10("div", { className: "hypurr-connect", style: { display: "contents" }, children: [
4139
4163
  /* @__PURE__ */ jsx11(AnimatePresence6, { children: isOpen && /* @__PURE__ */ jsxs10(Fragment7, { children: [
4140
4164
  /* @__PURE__ */ jsx11(SpinKeyframes, {}),
4141
4165
  /* @__PURE__ */ jsx11(
@@ -4914,7 +4938,7 @@ function IconBtn({
4914
4938
  borderRadius: 4,
4915
4939
  background: hovered ? hoverBackgroundColor ?? "transparent" : "transparent",
4916
4940
  border: "none",
4917
- color: hovered ? color : profileColors.disabled,
4941
+ color: hovered ? color : profileColors.muted,
4918
4942
  cursor: "pointer",
4919
4943
  display: "flex",
4920
4944
  alignItems: "center",
@@ -5122,7 +5146,7 @@ function WalletSelectorDropdown({
5122
5146
  wallet.id
5123
5147
  );
5124
5148
  };
5125
- return /* @__PURE__ */ jsxs11(Fragment9, { children: [
5149
+ return /* @__PURE__ */ jsxs11("div", { className: "hypurr-connect", style: { display: "contents" }, children: [
5126
5150
  /* @__PURE__ */ jsx12(AnimatePresence7, { children: isOpen && /* @__PURE__ */ jsxs11(
5127
5151
  motion7.div,
5128
5152
  {