@latticexyz/entrykit 2.2.22-f4bb5b5d7d9abbbea0fc57591b58dbd94c85d3aa → 2.2.22-f7aa4c5722bf24103f4cd4ab01b5d9c55f9b2995

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.
@@ -22,7 +22,7 @@ import { forwardRef, useEffect, useRef, useState } from "react";
22
22
  import ReactDOM from "react-dom";
23
23
 
24
24
  // ../../node_modules/.pnpm/tailwindcss@3.4.13/node_modules/tailwindcss/tailwind.css?inline
25
- var tailwind_default = '*, ::before, ::after {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-gradient-from-position: ;\n --tw-gradient-via-position: ;\n --tw-gradient-to-position: ;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(59 130 246 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n --tw-contain-size: ;\n --tw-contain-layout: ;\n --tw-contain-paint: ;\n --tw-contain-style: ;\n}\n\n::backdrop {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-gradient-from-position: ;\n --tw-gradient-via-position: ;\n --tw-gradient-to-position: ;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(59 130 246 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n --tw-contain-size: ;\n --tw-contain-layout: ;\n --tw-contain-paint: ;\n --tw-contain-style: ;\n}/*\n! tailwindcss v3.4.13 | MIT License | https://tailwindcss.com\n*//*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n\n*,\n::before,\n::after {\n box-sizing: border-box; /* 1 */\n border-width: 0; /* 2 */\n border-style: solid; /* 2 */\n border-color: #e5e7eb; /* 2 */\n}\n\n::before,\n::after {\n --tw-content: \'\';\n}\n\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user\'s configured `sans` font-family by default.\n5. Use the user\'s configured `sans` font-feature-settings by default.\n6. Use the user\'s configured `sans` font-variation-settings by default.\n7. Disable tap highlights on iOS\n*/\n\nhtml,\n:host {\n line-height: 1.5; /* 1 */\n -webkit-text-size-adjust: 100%; /* 2 */ /* 3 */\n tab-size: 4; /* 3 */\n font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */\n font-feature-settings: normal; /* 5 */\n font-variation-settings: normal; /* 6 */\n -webkit-tap-highlight-color: transparent; /* 7 */\n}\n\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\n\nbody {\n margin: 0; /* 1 */\n line-height: inherit; /* 2 */\n}\n\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\n\nhr {\n height: 0; /* 1 */\n color: inherit; /* 2 */\n border-top-width: 1px; /* 3 */\n}\n\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n}\n\n/*\nRemove the default font size and weight for headings.\n*/\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-size: inherit;\n font-weight: inherit;\n}\n\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\n\na {\n color: inherit;\n text-decoration: inherit;\n}\n\n/*\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n font-weight: bolder;\n}\n\n/*\n1. Use the user\'s configured `mono` font-family by default.\n2. Use the user\'s configured `mono` font-feature-settings by default.\n3. Use the user\'s configured `mono` font-variation-settings by default.\n4. Correct the odd `em` font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */\n font-feature-settings: normal; /* 2 */\n font-variation-settings: normal; /* 3 */\n font-size: 1em; /* 4 */\n}\n\n/*\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n font-size: 80%;\n}\n\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\n\ntable {\n text-indent: 0; /* 1 */\n border-color: inherit; /* 2 */\n border-collapse: collapse; /* 3 */\n}\n\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit; /* 1 */\n font-feature-settings: inherit; /* 1 */\n font-variation-settings: inherit; /* 1 */\n font-size: 100%; /* 1 */\n font-weight: inherit; /* 1 */\n line-height: inherit; /* 1 */\n letter-spacing: inherit; /* 1 */\n color: inherit; /* 1 */\n margin: 0; /* 2 */\n padding: 0; /* 3 */\n}\n\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\n\nbutton,\nselect {\n text-transform: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\n\nbutton,\ninput:where([type=\'button\']),\ninput:where([type=\'reset\']),\ninput:where([type=\'submit\']) {\n -webkit-appearance: button; /* 1 */\n background-color: transparent; /* 2 */\n background-image: none; /* 2 */\n}\n\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n\n:-moz-focusring {\n outline: auto;\n}\n\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n\n:-moz-ui-invalid {\n box-shadow: none;\n}\n\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n vertical-align: baseline;\n}\n\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n height: auto;\n}\n\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type=\'search\'] {\n -webkit-appearance: textfield; /* 1 */\n outline-offset: -2px; /* 2 */\n}\n\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n\n::-webkit-file-upload-button {\n -webkit-appearance: button; /* 1 */\n font: inherit; /* 2 */\n}\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n display: list-item;\n}\n\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n margin: 0;\n}\n\nfieldset {\n margin: 0;\n padding: 0;\n}\n\nlegend {\n padding: 0;\n}\n\nol,\nul,\nmenu {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n/*\nReset default styling for dialogs.\n*/\ndialog {\n padding: 0;\n}\n\n/*\nPrevent resizing textareas horizontally by default.\n*/\n\ntextarea {\n resize: vertical;\n}\n\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user\'s configured gray 400 color.\n*/\n\ninput::placeholder,\ntextarea::placeholder {\n opacity: 1; /* 1 */\n color: #9ca3af; /* 2 */\n}\n\n/*\nSet the default cursor for buttons.\n*/\n\nbutton,\n[role="button"] {\n cursor: pointer;\n}\n\n/*\nMake sure disabled buttons don\'t get the pointer cursor.\n*/\n:disabled {\n cursor: default;\n}\n\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n This can trigger a poorly considered lint error in some tools but is included by design.\n*/\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n display: block; /* 1 */\n vertical-align: middle; /* 2 */\n}\n\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\n\nimg,\nvideo {\n max-width: 100%;\n height: auto;\n}\n\n/* Make elements with the HTML hidden attribute stay hidden by default */\n[hidden] {\n display: none;\n}\n\n.container {\n width: 100%;\n}\n\n@media (min-width: 640px) {\n\n .container {\n max-width: 640px;\n }\n}\n\n@media (min-width: 768px) {\n\n .container {\n max-width: 768px;\n }\n}\n\n@media (min-width: 1024px) {\n\n .container {\n max-width: 1024px;\n }\n}\n\n@media (min-width: 1280px) {\n\n .container {\n max-width: 1280px;\n }\n}\n\n@media (min-width: 1536px) {\n\n .container {\n max-width: 1536px;\n }\n}\n\n.grid-cols-2.divide-y > :not([hidden]) ~ :not([hidden]):nth-child(-n + 2) {\n border-top-width: 0;\n border-bottom-width: 0;\n}\n\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n\n.pointer-events-none {\n pointer-events: none;\n}\n\n.pointer-events-auto {\n pointer-events: auto;\n}\n\n.fixed {\n position: fixed;\n}\n\n.absolute {\n position: absolute;\n}\n\n.relative {\n position: relative;\n}\n\n.sticky {\n position: sticky;\n}\n\n.inset-0 {\n inset: 0px;\n}\n\n.bottom-0 {\n bottom: 0px;\n}\n\n.left-0 {\n left: 0px;\n}\n\n.right-0 {\n right: 0px;\n}\n\n.top-0 {\n top: 0px;\n}\n\n.col-start-1 {\n grid-column-start: 1;\n}\n\n.row-start-1 {\n grid-row-start: 1;\n}\n\n.m-0 {\n margin: 0px;\n}\n\n.m-2 {\n margin: 0.5rem;\n}\n\n.-mx-0\\.5 {\n margin-left: -0.125rem;\n margin-right: -0.125rem;\n}\n\n.-my-1 {\n margin-top: -0.25rem;\n margin-bottom: -0.25rem;\n}\n\n.-my-\\[0\\.125em\\] {\n margin-top: -0.125em;\n margin-bottom: -0.125em;\n}\n\n.mx-auto {\n margin-left: auto;\n margin-right: auto;\n}\n\n.-ml-3 {\n margin-left: -0.75rem;\n}\n\n.-mr-1 {\n margin-right: -0.25rem;\n}\n\n.-mt-2 {\n margin-top: -0.5rem;\n}\n\n.mt-1 {\n margin-top: 0.25rem;\n}\n\n.mt-4 {\n margin-top: 1rem;\n}\n\n.block {\n display: block;\n}\n\n.inline-block {\n display: inline-block;\n}\n\n.flex {\n display: flex;\n}\n\n.inline-flex {\n display: inline-flex;\n}\n\n.table {\n display: table;\n}\n\n.grid {\n display: grid;\n}\n\n.inline-grid {\n display: inline-grid;\n}\n\n.contents {\n display: contents;\n}\n\n.hidden {\n display: none;\n}\n\n.aspect-square {\n aspect-ratio: 1 / 1;\n}\n\n.h-10 {\n height: 2.5rem;\n}\n\n.h-12 {\n height: 3rem;\n}\n\n.h-16 {\n height: 4rem;\n}\n\n.h-3\\.5 {\n height: 0.875rem;\n}\n\n.h-4 {\n height: 1rem;\n}\n\n.h-6 {\n height: 1.5rem;\n}\n\n.h-64 {\n height: 16rem;\n}\n\n.h-\\[1\\.25em\\] {\n height: 1.25em;\n}\n\n.h-\\[1em\\] {\n height: 1em;\n}\n\n.h-\\[2px\\] {\n height: 2px;\n}\n\n.h-full {\n height: 100%;\n}\n\n.max-h-full {\n max-height: 100%;\n}\n\n.w-10 {\n width: 2.5rem;\n}\n\n.w-16 {\n width: 4rem;\n}\n\n.w-24 {\n width: 6rem;\n}\n\n.w-28 {\n width: 7rem;\n}\n\n.w-3\\.5 {\n width: 0.875rem;\n}\n\n.w-4 {\n width: 1rem;\n}\n\n.w-48 {\n width: 12rem;\n}\n\n.w-6 {\n width: 1.5rem;\n}\n\n.w-60 {\n width: 15rem;\n}\n\n.w-8 {\n width: 2rem;\n}\n\n.w-\\[0\\.6em\\] {\n width: 0.6em;\n}\n\n.w-\\[1\\.25em\\] {\n width: 1.25em;\n}\n\n.w-\\[352px\\] {\n width: 352px;\n}\n\n.w-full {\n width: 100%;\n}\n\n.max-w-\\[26rem\\] {\n max-width: 26rem;\n}\n\n.flex-shrink-0 {\n flex-shrink: 0;\n}\n\n.flex-grow {\n flex-grow: 1;\n}\n\n.-translate-y-2 {\n --tw-translate-y: -0.5rem;\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\n.-translate-y-4 {\n --tw-translate-y: -1rem;\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\n.translate-x-2 {\n --tw-translate-x: 0.5rem;\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\n.translate-y-0 {\n --tw-translate-y: 0px;\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\n.scale-100 {\n --tw-scale-x: 1;\n --tw-scale-y: 1;\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\n.scale-50 {\n --tw-scale-x: .5;\n --tw-scale-y: .5;\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\n.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\n@keyframes spin {\n\n to {\n transform: rotate(360deg);\n }\n}\n\n.animate-spin {\n animation: spin 1s linear infinite;\n}\n\n.cursor-pointer {\n cursor: pointer;\n}\n\n.cursor-text {\n cursor: text;\n}\n\n.grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n\n.grid-cols-\\[1fr_auto_1fr\\] {\n grid-template-columns: 1fr auto 1fr;\n}\n\n.flex-col {\n flex-direction: column;\n}\n\n.place-items-center {\n place-items: center;\n}\n\n.items-end {\n align-items: flex-end;\n}\n\n.items-center {\n align-items: center;\n}\n\n.justify-end {\n justify-content: flex-end;\n}\n\n.justify-center {\n justify-content: center;\n}\n\n.justify-between {\n justify-content: space-between;\n}\n\n.gap-1 {\n gap: 0.25rem;\n}\n\n.gap-2 {\n gap: 0.5rem;\n}\n\n.gap-2\\.5 {\n gap: 0.625rem;\n}\n\n.gap-4 {\n gap: 1rem;\n}\n\n.gap-5 {\n gap: 1.25rem;\n}\n\n.gap-6 {\n gap: 1.5rem;\n}\n\n.space-y-6 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));\n}\n\n.divide-y > :not([hidden]) ~ :not([hidden]) {\n --tw-divide-y-reverse: 0;\n border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));\n border-bottom-width: calc(1px * var(--tw-divide-y-reverse));\n}\n\n.divide-neutral-200 > :not([hidden]) ~ :not([hidden]) {\n --tw-divide-opacity: 1;\n border-color: rgb(229 229 229 / var(--tw-divide-opacity));\n}\n\n.divide-neutral-300 > :not([hidden]) ~ :not([hidden]) {\n --tw-divide-opacity: 1;\n border-color: rgb(212 212 212 / var(--tw-divide-opacity));\n}\n\n.divide-neutral-800 > :not([hidden]) ~ :not([hidden]) {\n --tw-divide-opacity: 1;\n border-color: rgb(38 38 38 / var(--tw-divide-opacity));\n}\n\n.self-auto {\n align-self: auto;\n}\n\n.self-center {\n align-self: center;\n}\n\n.overflow-auto {\n overflow: auto;\n}\n\n.overflow-clip {\n overflow: clip;\n}\n\n.whitespace-pre-wrap {\n white-space: pre-wrap;\n}\n\n.rounded-full {\n border-radius: 9999px;\n}\n\n.border {\n border-width: 1px;\n}\n\n.border-2 {\n border-width: 2px;\n}\n\n.border-4 {\n border-width: 4px;\n}\n\n.border-dashed {\n border-style: dashed;\n}\n\n.border-black\\/20 {\n border-color: rgb(0 0 0 / 0.2);\n}\n\n.border-neutral-300 {\n --tw-border-opacity: 1;\n border-color: rgb(212 212 212 / var(--tw-border-opacity));\n}\n\n.border-transparent {\n border-color: transparent;\n}\n\n.bg-black\\/10 {\n background-color: rgb(0 0 0 / 0.1);\n}\n\n.bg-blue-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(59 130 246 / var(--tw-bg-opacity));\n}\n\n.bg-blue-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(37 99 235 / var(--tw-bg-opacity));\n}\n\n.bg-blue-700 {\n --tw-bg-opacity: 1;\n background-color: rgb(29 78 216 / var(--tw-bg-opacity));\n}\n\n.bg-blue-700\\/60 {\n background-color: rgb(29 78 216 / 0.6);\n}\n\n.bg-green-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(34 197 94 / var(--tw-bg-opacity));\n}\n\n.bg-neutral-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(245 245 245 / var(--tw-bg-opacity));\n}\n\n.bg-neutral-700 {\n --tw-bg-opacity: 1;\n background-color: rgb(64 64 64 / var(--tw-bg-opacity));\n}\n\n.bg-neutral-800 {\n --tw-bg-opacity: 1;\n background-color: rgb(38 38 38 / var(--tw-bg-opacity));\n}\n\n.bg-neutral-800\\/85 {\n background-color: rgb(38 38 38 / 0.85);\n}\n\n.bg-neutral-900 {\n --tw-bg-opacity: 1;\n background-color: rgb(23 23 23 / var(--tw-bg-opacity));\n}\n\n.bg-orange-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(249 115 22 / var(--tw-bg-opacity));\n}\n\n.bg-orange-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(234 88 12 / var(--tw-bg-opacity));\n}\n\n.bg-red-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(239 68 68 / var(--tw-bg-opacity));\n}\n\n.bg-transparent {\n background-color: transparent;\n}\n\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n\n.bg-gradient-to-b {\n background-image: linear-gradient(to bottom, var(--tw-gradient-stops));\n}\n\n.from-transparent {\n --tw-gradient-from: transparent var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n}\n\n.to-blue-700 {\n --tw-gradient-to: #1d4ed8 var(--tw-gradient-to-position);\n}\n\n.bg-cover {\n background-size: cover;\n}\n\n.bg-center {\n background-position: center;\n}\n\n.bg-no-repeat {\n background-repeat: no-repeat;\n}\n\n.object-cover {\n object-fit: cover;\n}\n\n.p-1 {\n padding: 0.25rem;\n}\n\n.p-2 {\n padding: 0.5rem;\n}\n\n.p-2\\.5 {\n padding: 0.625rem;\n}\n\n.p-3 {\n padding: 0.75rem;\n}\n\n.p-4 {\n padding: 1rem;\n}\n\n.p-6 {\n padding: 1.5rem;\n}\n\n.p-\\[\\.75em\\] {\n padding: .75em;\n}\n\n.px-8 {\n padding-left: 2rem;\n padding-right: 2rem;\n}\n\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n\n.py-8 {\n padding-top: 2rem;\n padding-bottom: 2rem;\n}\n\n.pb-2 {\n padding-bottom: 0.5rem;\n}\n\n.pb-8 {\n padding-bottom: 2rem;\n}\n\n.pt-10 {\n padding-top: 2.5rem;\n}\n\n.pt-8 {\n padding-top: 2rem;\n}\n\n.text-left {\n text-align: left;\n}\n\n.text-center {\n text-align: center;\n}\n\n.font-mono {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;\n}\n\n.text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n\n.text-\\[\\.75em\\] {\n font-size: .75em;\n}\n\n.text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n\n.text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n\n.text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n\n.font-bold {\n font-weight: 700;\n}\n\n.font-medium {\n font-weight: 500;\n}\n\n.leading-loose {\n line-height: 2;\n}\n\n.leading-none {\n line-height: 1;\n}\n\n.tracking-\\[-1ch\\] {\n letter-spacing: -1ch;\n}\n\n.text-amber-500 {\n --tw-text-opacity: 1;\n color: rgb(245 158 11 / var(--tw-text-opacity));\n}\n\n.text-black {\n --tw-text-opacity: 1;\n color: rgb(0 0 0 / var(--tw-text-opacity));\n}\n\n.text-green-600 {\n --tw-text-opacity: 1;\n color: rgb(22 163 74 / var(--tw-text-opacity));\n}\n\n.text-neutral-400 {\n --tw-text-opacity: 1;\n color: rgb(163 163 163 / var(--tw-text-opacity));\n}\n\n.text-neutral-500 {\n --tw-text-opacity: 1;\n color: rgb(115 115 115 / var(--tw-text-opacity));\n}\n\n.text-neutral-700 {\n --tw-text-opacity: 1;\n color: rgb(64 64 64 / var(--tw-text-opacity));\n}\n\n.text-orange-500 {\n --tw-text-opacity: 1;\n color: rgb(249 115 22 / var(--tw-text-opacity));\n}\n\n.text-transparent {\n color: transparent;\n}\n\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n\n.text-white\\/20 {\n color: rgb(255 255 255 / 0.2);\n}\n\n.text-white\\/80 {\n color: rgb(255 255 255 / 0.8);\n}\n\n.opacity-0 {\n opacity: 0;\n}\n\n.opacity-100 {\n opacity: 1;\n}\n\n.opacity-25 {\n opacity: 0.25;\n}\n\n.opacity-30 {\n opacity: 0.3;\n}\n\n.opacity-50 {\n opacity: 0.5;\n}\n\n.opacity-75 {\n opacity: 0.75;\n}\n\n.outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n\n.ring-1 {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.ring-2 {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.ring-neutral-700\\/50 {\n --tw-ring-color: rgb(64 64 64 / 0.5);\n}\n\n.ring-transparent {\n --tw-ring-color: transparent;\n}\n\n.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\n.transition {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n\n.transition-colors {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n\n.duration-100 {\n transition-duration: 100ms;\n}\n\n.duration-300 {\n transition-duration: 300ms;\n}\n\n.ease-linear {\n transition-timing-function: linear;\n}\n\n@keyframes enter {\n\n from {\n opacity: var(--tw-enter-opacity, 1);\n transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));\n }\n}\n\n@keyframes exit {\n\n to {\n opacity: var(--tw-exit-opacity, 1);\n transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));\n }\n}\n\n.animate-in {\n animation-name: enter;\n animation-duration: 150ms;\n --tw-enter-opacity: initial;\n --tw-enter-scale: initial;\n --tw-enter-rotate: initial;\n --tw-enter-translate-x: initial;\n --tw-enter-translate-y: initial;\n}\n\n.animate-out {\n animation-name: exit;\n animation-duration: 150ms;\n --tw-exit-opacity: initial;\n --tw-exit-scale: initial;\n --tw-exit-rotate: initial;\n --tw-exit-translate-x: initial;\n --tw-exit-translate-y: initial;\n}\n\n.fade-in {\n --tw-enter-opacity: 0;\n}\n\n.fade-out {\n --tw-exit-opacity: 0;\n}\n\n.slide-in-from-bottom-16 {\n --tw-enter-translate-y: 4rem;\n}\n\n.slide-in-from-bottom-2 {\n --tw-enter-translate-y: 0.5rem;\n}\n\n.slide-in-from-bottom-8 {\n --tw-enter-translate-y: 2rem;\n}\n\n.slide-in-from-top-2 {\n --tw-enter-translate-y: -0.5rem;\n}\n\n.animate-duration-300 {\n animation-duration: 300ms;\n}\n\n.ease-linear {\n animation-timing-function: linear;\n}\n\n@property --tw-border-gradient-angle {\n syntax: \'<angle>\';\n inherits: true;\n initial-value: 0deg;\n}\n\n@property --tw-conic-gradient-angle {\n syntax: \'<angle>\';\n inherits: true;\n initial-value: 0deg;\n}\n\n@keyframes border-gradient {\n\n to {\n --tw-border-gradient-angle: 360deg;\n }\n}\n\n.placeholder\\:text-neutral-400::placeholder {\n --tw-text-opacity: 1;\n color: rgb(163 163 163 / var(--tw-text-opacity));\n}\n\n.after\\:select-none::after {\n content: var(--tw-content);\n -webkit-user-select: none;\n user-select: none;\n}\n\n.after\\:content-\\[\\\'\\2026\\\'\\]::after {\n --tw-content: \'\u2026\';\n content: var(--tw-content);\n}\n\n.focus-within\\:border-transparent:focus-within {\n border-color: transparent;\n}\n\n.focus-within\\:ring-orange-500:focus-within {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(249 115 22 / var(--tw-ring-opacity));\n}\n\n.hover\\:bg-blue-500:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(59 130 246 / var(--tw-bg-opacity));\n}\n\n.hover\\:bg-neutral-200:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(229 229 229 / var(--tw-bg-opacity));\n}\n\n.hover\\:bg-orange-400:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(251 146 60 / var(--tw-bg-opacity));\n}\n\n.hover\\:text-black:hover {\n --tw-text-opacity: 1;\n color: rgb(0 0 0 / var(--tw-text-opacity));\n}\n\n.hover\\:text-white:hover {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n\n.hover\\:text-white\\/40:hover {\n color: rgb(255 255 255 / 0.4);\n}\n\n.hover\\:text-white\\/80:hover {\n color: rgb(255 255 255 / 0.8);\n}\n\n.hover\\:brightness-125:hover {\n --tw-brightness: brightness(1.25);\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\n.focus\\:border-orange-500:focus {\n --tw-border-opacity: 1;\n border-color: rgb(249 115 22 / var(--tw-border-opacity));\n}\n\n.focus\\:border-yellow-400:focus {\n --tw-border-opacity: 1;\n border-color: rgb(250 204 21 / var(--tw-border-opacity));\n}\n\n.focus\\:bg-white:focus {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n\n.active\\:bg-orange-600:active {\n --tw-bg-opacity: 1;\n background-color: rgb(234 88 12 / var(--tw-bg-opacity));\n}\n\n.active\\:brightness-150:active {\n --tw-brightness: brightness(1.5);\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\n.group:hover .group-hover\\:pointer-events-none {\n pointer-events: none;\n}\n\n.group:hover .group-hover\\:pointer-events-auto {\n pointer-events: auto;\n}\n\n.group:hover .group-hover\\:rotate-90 {\n --tw-rotate: 90deg;\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\n.group:hover .group-hover\\:opacity-0 {\n opacity: 0;\n}\n\n.group:hover .group-hover\\:opacity-100 {\n opacity: 1;\n}\n\n.peer:placeholder-shown ~ .peer-placeholder-shown\\:text-neutral-400 {\n --tw-text-opacity: 1;\n color: rgb(163 163 163 / var(--tw-text-opacity));\n}\n\n.aria-busy\\:pointer-events-none[aria-busy="true"] {\n pointer-events: none;\n}\n\n.aria-busy\\:bg-blue-500[aria-busy="true"] {\n --tw-bg-opacity: 1;\n background-color: rgb(59 130 246 / var(--tw-bg-opacity));\n}\n\n.aria-disabled\\:pointer-events-none[aria-disabled="true"] {\n pointer-events: none;\n}\n\n.aria-disabled\\:opacity-50[aria-disabled="true"] {\n opacity: 0.5;\n}\n\n.group[aria-busy="true"] .group-aria-busy\\:inline {\n display: inline;\n}\n\n.group[aria-busy="true"] .group-aria-busy\\:hidden {\n display: none;\n}\n\n.group\\/button[aria-busy="true"] .group-aria-busy\\/button\\:translate-x-0 {\n --tw-translate-x: 0px;\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\n.group[aria-busy="true"] .group-aria-busy\\:scale-100 {\n --tw-scale-x: 1;\n --tw-scale-y: 1;\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\n.group[aria-busy="true"] .group-aria-busy\\:scale-125 {\n --tw-scale-x: 1.25;\n --tw-scale-y: 1.25;\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\n.group\\/button[aria-busy="true"] .group-aria-busy\\/button\\:opacity-100 {\n opacity: 1;\n}\n\n.group[aria-busy="true"] .group-aria-busy\\:opacity-0 {\n opacity: 0;\n}\n\n.group[aria-busy="true"] .group-aria-busy\\:opacity-100 {\n opacity: 1;\n}\n\n.group\\/button[aria-busy="true"] .group-aria-busy\\/button\\:duration-300 {\n transition-duration: 300ms;\n}\n\n.group[aria-expanded="true"] .group-aria-expanded\\:inline {\n display: inline;\n}\n\n.group[aria-expanded="true"] .group-aria-expanded\\:hidden {\n display: none;\n}\n\n.data-\\[highlighted\\]\\:bg-neutral-200[data-highlighted] {\n --tw-bg-opacity: 1;\n background-color: rgb(229 229 229 / var(--tw-bg-opacity));\n}\n\n.data-\\[state\\=checked\\]\\:bg-neutral-200[data-state="checked"] {\n --tw-bg-opacity: 1;\n background-color: rgb(229 229 229 / var(--tw-bg-opacity));\n}\n\n.links\\:font-medium a[href]:not(.links-unset) {\n font-weight: 500;\n}\n\n.links\\:text-white a[href]:not(.links-unset) {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n\n.links\\:underline a[href]:not(.links-unset) {\n text-decoration-line: underline;\n}\n\n.links\\:decoration-neutral-500 a[href]:not(.links-unset) {\n text-decoration-color: #737373;\n}\n\n.links\\:underline-offset-4 a[href]:not(.links-unset) {\n text-underline-offset: 4px;\n}\n\n.hover\\:links\\:decoration-orange-500 a[href]:not(.links-unset):hover {\n text-decoration-color: #f97316;\n}\n\n@media (min-width: 640px) {\n\n .sm\\:items-center {\n align-items: center;\n }\n}\n\n.dark\\:divide-neutral-700:where([data-theme="dark"], [data-theme="dark"] *) > :not([hidden]) ~ :not([hidden]) {\n --tw-divide-opacity: 1;\n border-color: rgb(64 64 64 / var(--tw-divide-opacity));\n}\n\n.dark\\:border-neutral-700:where([data-theme="dark"], [data-theme="dark"] *) {\n --tw-border-opacity: 1;\n border-color: rgb(64 64 64 / var(--tw-border-opacity));\n}\n\n.dark\\:border-white\\/50:where([data-theme="dark"], [data-theme="dark"] *) {\n border-color: rgb(255 255 255 / 0.5);\n}\n\n.dark\\:bg-blue-600:where([data-theme="dark"], [data-theme="dark"] *) {\n --tw-bg-opacity: 1;\n background-color: rgb(37 99 235 / var(--tw-bg-opacity));\n}\n\n.dark\\:bg-green-600:where([data-theme="dark"], [data-theme="dark"] *) {\n --tw-bg-opacity: 1;\n background-color: rgb(22 163 74 / var(--tw-bg-opacity));\n}\n\n.dark\\:bg-neutral-800:where([data-theme="dark"], [data-theme="dark"] *) {\n --tw-bg-opacity: 1;\n background-color: rgb(38 38 38 / var(--tw-bg-opacity));\n}\n\n.dark\\:bg-neutral-900:where([data-theme="dark"], [data-theme="dark"] *) {\n --tw-bg-opacity: 1;\n background-color: rgb(23 23 23 / var(--tw-bg-opacity));\n}\n\n.dark\\:bg-red-600:where([data-theme="dark"], [data-theme="dark"] *) {\n --tw-bg-opacity: 1;\n background-color: rgb(220 38 38 / var(--tw-bg-opacity));\n}\n\n.dark\\:bg-white\\/10:where([data-theme="dark"], [data-theme="dark"] *) {\n background-color: rgb(255 255 255 / 0.1);\n}\n\n.dark\\:text-neutral-300:where([data-theme="dark"], [data-theme="dark"] *) {\n --tw-text-opacity: 1;\n color: rgb(212 212 212 / var(--tw-text-opacity));\n}\n\n.dark\\:text-neutral-400:where([data-theme="dark"], [data-theme="dark"] *) {\n --tw-text-opacity: 1;\n color: rgb(163 163 163 / var(--tw-text-opacity));\n}\n\n.dark\\:text-neutral-500:where([data-theme="dark"], [data-theme="dark"] *) {\n --tw-text-opacity: 1;\n color: rgb(115 115 115 / var(--tw-text-opacity));\n}\n\n.dark\\:text-white:where([data-theme="dark"], [data-theme="dark"] *) {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n\n.dark\\:placeholder\\:text-neutral-500:where([data-theme="dark"], [data-theme="dark"] *)::placeholder {\n --tw-text-opacity: 1;\n color: rgb(115 115 115 / var(--tw-text-opacity));\n}\n\n.dark\\:hover\\:bg-neutral-700:hover:where([data-theme="dark"], [data-theme="dark"] *) {\n --tw-bg-opacity: 1;\n background-color: rgb(64 64 64 / var(--tw-bg-opacity));\n}\n\n.dark\\:hover\\:text-white:hover:where([data-theme="dark"], [data-theme="dark"] *) {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n\n.dark\\:focus\\:bg-neutral-700:focus:where([data-theme="dark"], [data-theme="dark"] *) {\n --tw-bg-opacity: 1;\n background-color: rgb(64 64 64 / var(--tw-bg-opacity));\n}\n\n.peer:placeholder-shown ~ .dark\\:peer-placeholder-shown\\:text-neutral-500:where([data-theme="dark"], [data-theme="dark"] *) {\n --tw-text-opacity: 1;\n color: rgb(115 115 115 / var(--tw-text-opacity));\n}\n\n.dark\\:data-\\[state\\=checked\\]\\:bg-neutral-900[data-state="checked"]:where([data-theme="dark"], [data-theme="dark"] *) {\n --tw-bg-opacity: 1;\n background-color: rgb(23 23 23 / var(--tw-bg-opacity));\n}\n\n.\\[\\&_\\>_\\:is\\(dt\\2c dd\\)\\]\\:px-1 > :is(dt,dd) {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n}\n\n.\\[\\&_\\>_dd\\]\\:text-right > dd {\n text-align: right;\n}\n';
25
+ var tailwind_default = '*, ::before, ::after {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-gradient-from-position: ;\n --tw-gradient-via-position: ;\n --tw-gradient-to-position: ;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(59 130 246 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n --tw-contain-size: ;\n --tw-contain-layout: ;\n --tw-contain-paint: ;\n --tw-contain-style: ;\n}\n\n::backdrop {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-gradient-from-position: ;\n --tw-gradient-via-position: ;\n --tw-gradient-to-position: ;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(59 130 246 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n --tw-contain-size: ;\n --tw-contain-layout: ;\n --tw-contain-paint: ;\n --tw-contain-style: ;\n}/*\n! tailwindcss v3.4.13 | MIT License | https://tailwindcss.com\n*//*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n\n*,\n::before,\n::after {\n box-sizing: border-box; /* 1 */\n border-width: 0; /* 2 */\n border-style: solid; /* 2 */\n border-color: #e5e7eb; /* 2 */\n}\n\n::before,\n::after {\n --tw-content: \'\';\n}\n\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user\'s configured `sans` font-family by default.\n5. Use the user\'s configured `sans` font-feature-settings by default.\n6. Use the user\'s configured `sans` font-variation-settings by default.\n7. Disable tap highlights on iOS\n*/\n\nhtml,\n:host {\n line-height: 1.5; /* 1 */\n -webkit-text-size-adjust: 100%; /* 2 */ /* 3 */\n tab-size: 4; /* 3 */\n font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */\n font-feature-settings: normal; /* 5 */\n font-variation-settings: normal; /* 6 */\n -webkit-tap-highlight-color: transparent; /* 7 */\n}\n\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\n\nbody {\n margin: 0; /* 1 */\n line-height: inherit; /* 2 */\n}\n\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\n\nhr {\n height: 0; /* 1 */\n color: inherit; /* 2 */\n border-top-width: 1px; /* 3 */\n}\n\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n}\n\n/*\nRemove the default font size and weight for headings.\n*/\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-size: inherit;\n font-weight: inherit;\n}\n\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\n\na {\n color: inherit;\n text-decoration: inherit;\n}\n\n/*\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n font-weight: bolder;\n}\n\n/*\n1. Use the user\'s configured `mono` font-family by default.\n2. Use the user\'s configured `mono` font-feature-settings by default.\n3. Use the user\'s configured `mono` font-variation-settings by default.\n4. Correct the odd `em` font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */\n font-feature-settings: normal; /* 2 */\n font-variation-settings: normal; /* 3 */\n font-size: 1em; /* 4 */\n}\n\n/*\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n font-size: 80%;\n}\n\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\n\ntable {\n text-indent: 0; /* 1 */\n border-color: inherit; /* 2 */\n border-collapse: collapse; /* 3 */\n}\n\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit; /* 1 */\n font-feature-settings: inherit; /* 1 */\n font-variation-settings: inherit; /* 1 */\n font-size: 100%; /* 1 */\n font-weight: inherit; /* 1 */\n line-height: inherit; /* 1 */\n letter-spacing: inherit; /* 1 */\n color: inherit; /* 1 */\n margin: 0; /* 2 */\n padding: 0; /* 3 */\n}\n\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\n\nbutton,\nselect {\n text-transform: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\n\nbutton,\ninput:where([type=\'button\']),\ninput:where([type=\'reset\']),\ninput:where([type=\'submit\']) {\n -webkit-appearance: button; /* 1 */\n background-color: transparent; /* 2 */\n background-image: none; /* 2 */\n}\n\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n\n:-moz-focusring {\n outline: auto;\n}\n\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n\n:-moz-ui-invalid {\n box-shadow: none;\n}\n\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n vertical-align: baseline;\n}\n\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n height: auto;\n}\n\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type=\'search\'] {\n -webkit-appearance: textfield; /* 1 */\n outline-offset: -2px; /* 2 */\n}\n\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n\n::-webkit-file-upload-button {\n -webkit-appearance: button; /* 1 */\n font: inherit; /* 2 */\n}\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n display: list-item;\n}\n\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n margin: 0;\n}\n\nfieldset {\n margin: 0;\n padding: 0;\n}\n\nlegend {\n padding: 0;\n}\n\nol,\nul,\nmenu {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n/*\nReset default styling for dialogs.\n*/\ndialog {\n padding: 0;\n}\n\n/*\nPrevent resizing textareas horizontally by default.\n*/\n\ntextarea {\n resize: vertical;\n}\n\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user\'s configured gray 400 color.\n*/\n\ninput::placeholder,\ntextarea::placeholder {\n opacity: 1; /* 1 */\n color: #9ca3af; /* 2 */\n}\n\n/*\nSet the default cursor for buttons.\n*/\n\nbutton,\n[role="button"] {\n cursor: pointer;\n}\n\n/*\nMake sure disabled buttons don\'t get the pointer cursor.\n*/\n:disabled {\n cursor: default;\n}\n\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n This can trigger a poorly considered lint error in some tools but is included by design.\n*/\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n display: block; /* 1 */\n vertical-align: middle; /* 2 */\n}\n\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\n\nimg,\nvideo {\n max-width: 100%;\n height: auto;\n}\n\n/* Make elements with the HTML hidden attribute stay hidden by default */\n[hidden] {\n display: none;\n}\n\n.container {\n width: 100%;\n}\n\n@media (min-width: 640px) {\n\n .container {\n max-width: 640px;\n }\n}\n\n@media (min-width: 768px) {\n\n .container {\n max-width: 768px;\n }\n}\n\n@media (min-width: 1024px) {\n\n .container {\n max-width: 1024px;\n }\n}\n\n@media (min-width: 1280px) {\n\n .container {\n max-width: 1280px;\n }\n}\n\n@media (min-width: 1536px) {\n\n .container {\n max-width: 1536px;\n }\n}\n\n.grid-cols-2.divide-y > :not([hidden]) ~ :not([hidden]):nth-child(-n + 2) {\n border-top-width: 0;\n border-bottom-width: 0;\n}\n\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n\n.pointer-events-none {\n pointer-events: none;\n}\n\n.pointer-events-auto {\n pointer-events: auto;\n}\n\n.fixed {\n position: fixed;\n}\n\n.absolute {\n position: absolute;\n}\n\n.relative {\n position: relative;\n}\n\n.sticky {\n position: sticky;\n}\n\n.inset-0 {\n inset: 0px;\n}\n\n.bottom-0 {\n bottom: 0px;\n}\n\n.left-0 {\n left: 0px;\n}\n\n.right-0 {\n right: 0px;\n}\n\n.top-0 {\n top: 0px;\n}\n\n.col-start-1 {\n grid-column-start: 1;\n}\n\n.row-start-1 {\n grid-row-start: 1;\n}\n\n.m-0 {\n margin: 0px;\n}\n\n.m-2 {\n margin: 0.5rem;\n}\n\n.-mx-0\\.5 {\n margin-left: -0.125rem;\n margin-right: -0.125rem;\n}\n\n.-my-1 {\n margin-top: -0.25rem;\n margin-bottom: -0.25rem;\n}\n\n.-my-\\[0\\.125em\\] {\n margin-top: -0.125em;\n margin-bottom: -0.125em;\n}\n\n.mx-auto {\n margin-left: auto;\n margin-right: auto;\n}\n\n.-ml-3 {\n margin-left: -0.75rem;\n}\n\n.-mt-2 {\n margin-top: -0.5rem;\n}\n\n.block {\n display: block;\n}\n\n.flex {\n display: flex;\n}\n\n.inline-flex {\n display: inline-flex;\n}\n\n.table {\n display: table;\n}\n\n.grid {\n display: grid;\n}\n\n.inline-grid {\n display: inline-grid;\n}\n\n.contents {\n display: contents;\n}\n\n.hidden {\n display: none;\n}\n\n.h-12 {\n height: 3rem;\n}\n\n.h-16 {\n height: 4rem;\n}\n\n.h-4 {\n height: 1rem;\n}\n\n.h-6 {\n height: 1.5rem;\n}\n\n.h-64 {\n height: 16rem;\n}\n\n.h-\\[1\\.25em\\] {\n height: 1.25em;\n}\n\n.h-\\[1em\\] {\n height: 1em;\n}\n\n.h-full {\n height: 100%;\n}\n\n.max-h-full {\n max-height: 100%;\n}\n\n.min-h-\\[22rem\\] {\n min-height: 22rem;\n}\n\n.min-h-\\[26rem\\] {\n min-height: 26rem;\n}\n\n.w-16 {\n width: 4rem;\n}\n\n.w-24 {\n width: 6rem;\n}\n\n.w-28 {\n width: 7rem;\n}\n\n.w-4 {\n width: 1rem;\n}\n\n.w-48 {\n width: 12rem;\n}\n\n.w-6 {\n width: 1.5rem;\n}\n\n.w-60 {\n width: 15rem;\n}\n\n.w-\\[0\\.6em\\] {\n width: 0.6em;\n}\n\n.w-\\[1\\.25em\\] {\n width: 1.25em;\n}\n\n.w-full {\n width: 100%;\n}\n\n.max-w-\\[26rem\\] {\n max-width: 26rem;\n}\n\n.flex-shrink-0 {\n flex-shrink: 0;\n}\n\n.flex-grow {\n flex-grow: 1;\n}\n\n.-translate-y-2 {\n --tw-translate-y: -0.5rem;\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\n.-translate-y-4 {\n --tw-translate-y: -1rem;\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\n.translate-x-2 {\n --tw-translate-x: 0.5rem;\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\n.translate-y-0 {\n --tw-translate-y: 0px;\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\n.scale-100 {\n --tw-scale-x: 1;\n --tw-scale-y: 1;\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\n.scale-50 {\n --tw-scale-x: .5;\n --tw-scale-y: .5;\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\n@keyframes spin {\n\n to {\n transform: rotate(360deg);\n }\n}\n\n.animate-spin {\n animation: spin 1s linear infinite;\n}\n\n.cursor-pointer {\n cursor: pointer;\n}\n\n.grid-cols-\\[1fr_auto_1fr\\] {\n grid-template-columns: 1fr auto 1fr;\n}\n\n.flex-col {\n flex-direction: column;\n}\n\n.place-items-center {\n place-items: center;\n}\n\n.items-end {\n align-items: flex-end;\n}\n\n.items-center {\n align-items: center;\n}\n\n.justify-end {\n justify-content: flex-end;\n}\n\n.justify-center {\n justify-content: center;\n}\n\n.justify-between {\n justify-content: space-between;\n}\n\n.gap-1 {\n gap: 0.25rem;\n}\n\n.gap-2 {\n gap: 0.5rem;\n}\n\n.gap-2\\.5 {\n gap: 0.625rem;\n}\n\n.gap-4 {\n gap: 1rem;\n}\n\n.gap-6 {\n gap: 1.5rem;\n}\n\n.space-y-6 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));\n}\n\n.divide-y > :not([hidden]) ~ :not([hidden]) {\n --tw-divide-y-reverse: 0;\n border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));\n border-bottom-width: calc(1px * var(--tw-divide-y-reverse));\n}\n\n.divide-neutral-800 > :not([hidden]) ~ :not([hidden]) {\n --tw-divide-opacity: 1;\n border-color: rgb(38 38 38 / var(--tw-divide-opacity));\n}\n\n.self-auto {\n align-self: auto;\n}\n\n.self-center {\n align-self: center;\n}\n\n.overflow-auto {\n overflow: auto;\n}\n\n.overflow-clip {\n overflow: clip;\n}\n\n.whitespace-pre-wrap {\n white-space: pre-wrap;\n}\n\n.rounded-full {\n border-radius: 9999px;\n}\n\n.border {\n border-width: 1px;\n}\n\n.border-4 {\n border-width: 4px;\n}\n\n.border-neutral-300 {\n --tw-border-opacity: 1;\n border-color: rgb(212 212 212 / var(--tw-border-opacity));\n}\n\n.border-transparent {\n border-color: transparent;\n}\n\n.bg-black\\/10 {\n background-color: rgb(0 0 0 / 0.1);\n}\n\n.bg-blue-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(37 99 235 / var(--tw-bg-opacity));\n}\n\n.bg-blue-700 {\n --tw-bg-opacity: 1;\n background-color: rgb(29 78 216 / var(--tw-bg-opacity));\n}\n\n.bg-blue-700\\/60 {\n background-color: rgb(29 78 216 / 0.6);\n}\n\n.bg-neutral-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(245 245 245 / var(--tw-bg-opacity));\n}\n\n.bg-neutral-700 {\n --tw-bg-opacity: 1;\n background-color: rgb(64 64 64 / var(--tw-bg-opacity));\n}\n\n.bg-neutral-800 {\n --tw-bg-opacity: 1;\n background-color: rgb(38 38 38 / var(--tw-bg-opacity));\n}\n\n.bg-neutral-800\\/85 {\n background-color: rgb(38 38 38 / 0.85);\n}\n\n.bg-neutral-900 {\n --tw-bg-opacity: 1;\n background-color: rgb(23 23 23 / var(--tw-bg-opacity));\n}\n\n.bg-orange-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(249 115 22 / var(--tw-bg-opacity));\n}\n\n.bg-orange-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(234 88 12 / var(--tw-bg-opacity));\n}\n\n.bg-gradient-to-b {\n background-image: linear-gradient(to bottom, var(--tw-gradient-stops));\n}\n\n.from-transparent {\n --tw-gradient-from: transparent var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n}\n\n.to-blue-700 {\n --tw-gradient-to: #1d4ed8 var(--tw-gradient-to-position);\n}\n\n.bg-cover {\n background-size: cover;\n}\n\n.bg-center {\n background-position: center;\n}\n\n.bg-no-repeat {\n background-repeat: no-repeat;\n}\n\n.object-cover {\n object-fit: cover;\n}\n\n.p-1 {\n padding: 0.25rem;\n}\n\n.p-2 {\n padding: 0.5rem;\n}\n\n.p-3 {\n padding: 0.75rem;\n}\n\n.p-4 {\n padding: 1rem;\n}\n\n.p-6 {\n padding: 1.5rem;\n}\n\n.p-\\[\\.75em\\] {\n padding: .75em;\n}\n\n.px-8 {\n padding-left: 2rem;\n padding-right: 2rem;\n}\n\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n\n.py-8 {\n padding-top: 2rem;\n padding-bottom: 2rem;\n}\n\n.pb-8 {\n padding-bottom: 2rem;\n}\n\n.pt-8 {\n padding-top: 2rem;\n}\n\n.text-left {\n text-align: left;\n}\n\n.text-center {\n text-align: center;\n}\n\n.font-mono {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;\n}\n\n.text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n\n.text-\\[\\.75em\\] {\n font-size: .75em;\n}\n\n.text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n\n.text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n\n.text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n\n.font-bold {\n font-weight: 700;\n}\n\n.font-medium {\n font-weight: 500;\n}\n\n.leading-none {\n line-height: 1;\n}\n\n.tracking-\\[-1ch\\] {\n letter-spacing: -1ch;\n}\n\n.text-black {\n --tw-text-opacity: 1;\n color: rgb(0 0 0 / var(--tw-text-opacity));\n}\n\n.text-neutral-400 {\n --tw-text-opacity: 1;\n color: rgb(163 163 163 / var(--tw-text-opacity));\n}\n\n.text-orange-500 {\n --tw-text-opacity: 1;\n color: rgb(249 115 22 / var(--tw-text-opacity));\n}\n\n.text-transparent {\n color: transparent;\n}\n\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n\n.text-white\\/20 {\n color: rgb(255 255 255 / 0.2);\n}\n\n.text-white\\/80 {\n color: rgb(255 255 255 / 0.8);\n}\n\n.opacity-0 {\n opacity: 0;\n}\n\n.opacity-100 {\n opacity: 1;\n}\n\n.opacity-25 {\n opacity: 0.25;\n}\n\n.opacity-30 {\n opacity: 0.3;\n}\n\n.opacity-75 {\n opacity: 0.75;\n}\n\n.outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n\n.ring-1 {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.ring-neutral-700\\/50 {\n --tw-ring-color: rgb(64 64 64 / 0.5);\n}\n\n.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\n.transition {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n\n.duration-100 {\n transition-duration: 100ms;\n}\n\n.duration-300 {\n transition-duration: 300ms;\n}\n\n@keyframes enter {\n\n from {\n opacity: var(--tw-enter-opacity, 1);\n transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));\n }\n}\n\n@keyframes exit {\n\n to {\n opacity: var(--tw-exit-opacity, 1);\n transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));\n }\n}\n\n.animate-in {\n animation-name: enter;\n animation-duration: 150ms;\n --tw-enter-opacity: initial;\n --tw-enter-scale: initial;\n --tw-enter-rotate: initial;\n --tw-enter-translate-x: initial;\n --tw-enter-translate-y: initial;\n}\n\n.fade-in {\n --tw-enter-opacity: 0;\n}\n\n.slide-in-from-bottom-16 {\n --tw-enter-translate-y: 4rem;\n}\n\n.slide-in-from-bottom-8 {\n --tw-enter-translate-y: 2rem;\n}\n\n.animate-duration-300 {\n animation-duration: 300ms;\n}\n\n@property --tw-border-gradient-angle {\n syntax: \'<angle>\';\n inherits: true;\n initial-value: 0deg;\n}\n\n@property --tw-conic-gradient-angle {\n syntax: \'<angle>\';\n inherits: true;\n initial-value: 0deg;\n}\n\n@keyframes border-gradient {\n\n to {\n --tw-border-gradient-angle: 360deg;\n }\n}\n\n.after\\:select-none::after {\n content: var(--tw-content);\n -webkit-user-select: none;\n user-select: none;\n}\n\n.after\\:content-\\[\\\'\\2026\\\'\\]::after {\n --tw-content: \'\u2026\';\n content: var(--tw-content);\n}\n\n.hover\\:bg-blue-500:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(59 130 246 / var(--tw-bg-opacity));\n}\n\n.hover\\:bg-neutral-200:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(229 229 229 / var(--tw-bg-opacity));\n}\n\n.hover\\:bg-orange-400:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(251 146 60 / var(--tw-bg-opacity));\n}\n\n.hover\\:text-white:hover {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n\n.hover\\:text-white\\/40:hover {\n color: rgb(255 255 255 / 0.4);\n}\n\n.hover\\:brightness-125:hover {\n --tw-brightness: brightness(1.25);\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\n.focus\\:border-orange-500:focus {\n --tw-border-opacity: 1;\n border-color: rgb(249 115 22 / var(--tw-border-opacity));\n}\n\n.focus\\:border-yellow-400:focus {\n --tw-border-opacity: 1;\n border-color: rgb(250 204 21 / var(--tw-border-opacity));\n}\n\n.active\\:bg-orange-600:active {\n --tw-bg-opacity: 1;\n background-color: rgb(234 88 12 / var(--tw-bg-opacity));\n}\n\n.active\\:brightness-150:active {\n --tw-brightness: brightness(1.5);\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\n.group:hover .group-hover\\:rotate-90 {\n --tw-rotate: 90deg;\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\n.aria-busy\\:pointer-events-none[aria-busy="true"] {\n pointer-events: none;\n}\n\n.aria-busy\\:bg-blue-500[aria-busy="true"] {\n --tw-bg-opacity: 1;\n background-color: rgb(59 130 246 / var(--tw-bg-opacity));\n}\n\n.aria-disabled\\:pointer-events-none[aria-disabled="true"] {\n pointer-events: none;\n}\n\n.aria-disabled\\:opacity-50[aria-disabled="true"] {\n opacity: 0.5;\n}\n\n.group[aria-busy="true"] .group-aria-busy\\:inline {\n display: inline;\n}\n\n.group[aria-busy="true"] .group-aria-busy\\:hidden {\n display: none;\n}\n\n.group\\/button[aria-busy="true"] .group-aria-busy\\/button\\:translate-x-0 {\n --tw-translate-x: 0px;\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\n.group[aria-busy="true"] .group-aria-busy\\:scale-100 {\n --tw-scale-x: 1;\n --tw-scale-y: 1;\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\n.group[aria-busy="true"] .group-aria-busy\\:scale-125 {\n --tw-scale-x: 1.25;\n --tw-scale-y: 1.25;\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\n.group\\/button[aria-busy="true"] .group-aria-busy\\/button\\:opacity-100 {\n opacity: 1;\n}\n\n.group[aria-busy="true"] .group-aria-busy\\:opacity-0 {\n opacity: 0;\n}\n\n.group[aria-busy="true"] .group-aria-busy\\:opacity-100 {\n opacity: 1;\n}\n\n.group\\/button[aria-busy="true"] .group-aria-busy\\/button\\:duration-300 {\n transition-duration: 300ms;\n}\n\n.data-\\[highlighted\\]\\:bg-neutral-200[data-highlighted] {\n --tw-bg-opacity: 1;\n background-color: rgb(229 229 229 / var(--tw-bg-opacity));\n}\n\n.links\\:font-medium a[href]:not(.links-unset) {\n font-weight: 500;\n}\n\n.links\\:text-white a[href]:not(.links-unset) {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n\n.links\\:underline a[href]:not(.links-unset) {\n text-decoration-line: underline;\n}\n\n.links\\:decoration-neutral-500 a[href]:not(.links-unset) {\n text-decoration-color: #737373;\n}\n\n.links\\:underline-offset-4 a[href]:not(.links-unset) {\n text-underline-offset: 4px;\n}\n\n.hover\\:links\\:decoration-orange-500 a[href]:not(.links-unset):hover {\n text-decoration-color: #f97316;\n}\n\n@media (min-width: 640px) {\n\n .sm\\:items-center {\n align-items: center;\n }\n}\n\n.dark\\:border-neutral-700:where([data-theme="dark"], [data-theme="dark"] *) {\n --tw-border-opacity: 1;\n border-color: rgb(64 64 64 / var(--tw-border-opacity));\n}\n\n.dark\\:bg-neutral-800:where([data-theme="dark"], [data-theme="dark"] *) {\n --tw-bg-opacity: 1;\n background-color: rgb(38 38 38 / var(--tw-bg-opacity));\n}\n\n.dark\\:bg-white\\/10:where([data-theme="dark"], [data-theme="dark"] *) {\n background-color: rgb(255 255 255 / 0.1);\n}\n\n.dark\\:text-white:where([data-theme="dark"], [data-theme="dark"] *) {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n\n.dark\\:hover\\:bg-neutral-700:hover:where([data-theme="dark"], [data-theme="dark"] *) {\n --tw-bg-opacity: 1;\n background-color: rgb(64 64 64 / var(--tw-bg-opacity));\n}\n';
26
26
 
27
27
  // src/ui/Shadow.tsx
28
28
  import { useResizeObserver } from "usehooks-ts";
@@ -37,11 +37,6 @@ function FrameProvider({ frame, children }) {
37
37
  if (value) throw new Error("`FrameProvider` can only be used once.");
38
38
  return /* @__PURE__ */ jsx(Context.Provider, { value: { frame }, children });
39
39
  }
40
- function useFrame() {
41
- const value = useContext(Context);
42
- if (!value) throw new Error("`useFrame` can only be used within a `FrameProvider`.");
43
- return value;
44
- }
45
40
 
46
41
  // src/useTheme.ts
47
42
  import { useMediaQuery } from "usehooks-ts";
@@ -188,168 +183,21 @@ function userOpExecutor({ executor }) {
188
183
  };
189
184
  }
190
185
 
191
- // src/quarry/transports/methods/getUserOperationReceipt.ts
192
- import {
193
- decodeEventLog,
194
- encodeEventTopics,
195
- numberToHex as numberToHex2,
196
- parseEventLogs as parseEventLogs2,
197
- zeroAddress
198
- } from "viem";
199
- import { entryPoint07Abi as entryPoint07Abi2 } from "viem/account-abstraction";
200
- var userOperationRevertReasonAbi = [
201
- entryPoint07Abi2.find(
202
- (item) => item.type === "event" && item.name === "UserOperationRevertReason"
203
- )
204
- ];
205
- var userOperationEventTopic = encodeEventTopics({
206
- abi: entryPoint07Abi2,
207
- eventName: "UserOperationEvent"
208
- });
209
- function getUserOperationReceipt(userOpHash, receipt) {
210
- const userOperationRevertReasonTopicEvent = encodeEventTopics({
211
- abi: userOperationRevertReasonAbi
212
- })[0];
213
- let entryPoint = zeroAddress;
214
- let revertReason = void 0;
215
- let startIndex = -1;
216
- let endIndex = -1;
217
- receipt.logs.forEach((log, index) => {
218
- if (log?.topics[0] === userOperationEventTopic[0]) {
219
- if (log.topics[1] === userOpHash) {
220
- endIndex = index;
221
- entryPoint = log.address;
222
- } else if (endIndex === -1) {
223
- startIndex = index;
224
- }
225
- }
226
- if (log?.topics[0] === userOperationRevertReasonTopicEvent) {
227
- if (log.topics[1] === userOpHash) {
228
- const decodedLog = decodeEventLog({
229
- abi: userOperationRevertReasonAbi,
230
- data: log.data,
231
- topics: log.topics
232
- });
233
- revertReason = decodedLog.args.revertReason;
234
- }
235
- }
236
- });
237
- if (endIndex === -1) {
238
- throw new Error("fatal: no UserOperationEvent in logs");
239
- }
240
- const logs = receipt.logs.slice(startIndex + 1, endIndex);
241
- const userOperationEvent = parseEventLogs2({
242
- abi: entryPoint07Abi2,
243
- eventName: "UserOperationEvent",
244
- args: {
245
- userOpHash
246
- },
247
- logs: receipt.logs
248
- })[0];
249
- let paymaster = userOperationEvent.args.paymaster;
250
- paymaster = paymaster === zeroAddress ? void 0 : paymaster;
251
- return {
252
- userOpHash,
253
- entryPoint,
254
- sender: userOperationEvent.args.sender,
255
- nonce: numberToHex2(userOperationEvent.args.nonce),
256
- paymaster,
257
- actualGasUsed: numberToHex2(userOperationEvent.args.actualGasUsed),
258
- actualGasCost: numberToHex2(userOperationEvent.args.actualGasCost),
259
- success: userOperationEvent.args.success,
260
- reason: revertReason,
261
- logs,
262
- receipt
263
- };
264
- }
265
-
266
- // src/quarry/transports/wiresaw.ts
267
- function wiresaw(transport) {
268
- return (opts) => {
269
- const { request: originalRequest, ...rest } = transport.wiresaw(opts);
270
- let chainId = null;
271
- const transactionHashes = {};
272
- const transactionReceipts = {};
273
- return {
274
- ...rest,
275
- async request(req) {
276
- if (req.method === "eth_chainId") {
277
- if (chainId != null) return chainId;
278
- return chainId = await originalRequest(req);
279
- }
280
- if (req.method === "eth_estimateGas") {
281
- return originalRequest({ ...req, method: "wiresaw_estimateGas" });
282
- }
283
- if (req.method === "eth_call") {
284
- return originalRequest({ ...req, method: "wiresaw_call" });
285
- }
286
- if (req.method === "eth_getTransactionCount") {
287
- return originalRequest({ ...req, method: "wiresaw_getTransactionCount" });
288
- }
289
- if (req.method === "eth_getTransactionReceipt") {
290
- const transactionHash = req.params[0];
291
- const receipt = transactionReceipts[transactionHash] ?? await originalRequest(req);
292
- transactionReceipts[transactionHash] ??= receipt;
293
- return receipt;
294
- }
295
- if (req.method === "eth_sendUserOperation") {
296
- const { userOpHash, txHash } = await originalRequest({
297
- ...req,
298
- method: "wiresaw_sendUserOperation"
299
- });
300
- transactionHashes[userOpHash] = txHash;
301
- return userOpHash;
302
- }
303
- if (req.method === "eth_getUserOperationReceipt") {
304
- const userOpHash = req.params[0];
305
- const knownTransactionHash = transactionHashes[userOpHash];
306
- if (knownTransactionHash) {
307
- const transactionReceipt = transactionReceipts[knownTransactionHash] ?? await originalRequest({
308
- ...req,
309
- params: [knownTransactionHash],
310
- method: "wiresaw_getTransactionReceipt"
311
- });
312
- transactionReceipts[knownTransactionHash] ??= transactionReceipt;
313
- return transactionReceipt && getUserOperationReceipt(userOpHash, transactionReceipt);
314
- }
315
- const { request: fallbackRequest } = transport.fallbackBundler(opts);
316
- return fallbackRequest(req);
317
- }
318
- if (req.method === "eth_estimateUserOperationGas") {
319
- const { request: fallbackRequest } = transport.fallbackBundler(opts);
320
- return fallbackRequest(req);
321
- }
322
- return originalRequest(req);
323
- }
324
- };
325
- };
326
- }
327
-
328
186
  // src/getBundlerTransport.ts
329
187
  function getBundlerTransport(chain) {
330
188
  const bundlerHttpUrl = chain.rpcUrls.bundler?.http[0];
331
- const wiresawWebSocketUrl = chain.rpcUrls.wiresaw?.webSocket?.[0];
332
- if (wiresawWebSocketUrl) {
333
- return wiresaw({ wiresaw: webSocket(wiresawWebSocketUrl), fallbackBundler: http(bundlerHttpUrl) });
334
- }
335
- const wiresawHttpUrl = chain.rpcUrls.wiresaw?.http[0];
336
- if (wiresawHttpUrl) {
337
- return wiresaw({ wiresaw: http(wiresawHttpUrl), fallbackBundler: http(bundlerHttpUrl) });
338
- }
339
- if (bundlerHttpUrl) {
340
- return http(bundlerHttpUrl);
341
- }
342
- if (chain.id === 31337) {
343
- return userOpExecutor({
344
- executor: createClient({
345
- chain,
346
- transport: fallback([webSocket(), http()]),
347
- account: privateKeyToAccount(keccak256(stringToHex("local user op executor"))),
348
- pollingInterval: 10
349
- }).extend(transactionQueue())
350
- });
189
+ const bundlerTransport = bundlerHttpUrl ? http(bundlerHttpUrl) : chain.id === 31337 ? userOpExecutor({
190
+ executor: createClient({
191
+ chain,
192
+ transport: fallback([webSocket(), http()]),
193
+ account: privateKeyToAccount(keccak256(stringToHex("local user op executor"))),
194
+ pollingInterval: 10
195
+ }).extend(transactionQueue())
196
+ }) : null;
197
+ if (!bundlerTransport) {
198
+ throw new Error(`Chain ${chain.id} config did not include a bundler RPC URL.`);
351
199
  }
352
- throw new Error(`Chain ${chain.id} config did not include a bundler RPC URL.`);
200
+ return bundlerTransport;
353
201
  }
354
202
 
355
203
  // src/EntryKitConfigProvider.tsx
@@ -520,10 +368,10 @@ function useAccountModal() {
520
368
  }
521
369
 
522
370
  // src/AccountModal.tsx
523
- import { twMerge as twMerge19 } from "tailwind-merge";
371
+ import { twMerge as twMerge10 } from "tailwind-merge";
524
372
 
525
373
  // src/AccountModalContent.tsx
526
- import { useAccount as useAccount8, useConnectorClient } from "wagmi";
374
+ import { useAccount as useAccount2, useConnectorClient } from "wagmi";
527
375
 
528
376
  // src/ConnectWallet.tsx
529
377
  import { useAccount } from "wagmi";
@@ -697,42 +545,15 @@ function ConnectWallet() {
697
545
  }
698
546
 
699
547
  // src/onboarding/ConnectedSteps.tsx
700
- import { useEffect as useEffect15, useMemo as useMemo4, useRef as useRef4, useState as useState6 } from "react";
701
- import { twMerge as twMerge17 } from "tailwind-merge";
702
-
703
- // src/onboarding/usePrerequisites.ts
704
- import { useClient as useClient6, useConfig } from "wagmi";
705
- import { getBalanceQueryOptions as getBalanceQueryOptions2 } from "wagmi/query";
706
- import { queryOptions as queryOptions6, skipToken as skipToken6, useQuery as useQuery7, useQueryClient } from "@tanstack/react-query";
707
-
708
- // src/getPaymaster.ts
709
- function getPaymaster(chain) {
710
- const contracts = chain.contracts ?? {};
711
- if ("quarryPaymaster" in contracts && contracts.quarryPaymaster != null) {
712
- if ("address" in contracts.quarryPaymaster) {
713
- return {
714
- type: "quarry",
715
- address: contracts.quarryPaymaster.address,
716
- isGasPass: !!chain.rpcUrls.quarryPassIssuer?.http?.[0]
717
- };
718
- }
719
- }
720
- if ("paymaster" in contracts && contracts.paymaster != null) {
721
- if ("address" in contracts.paymaster) {
722
- return {
723
- type: "simple",
724
- address: contracts.paymaster.address
725
- };
726
- }
727
- }
728
- }
548
+ import { useEffect as useEffect8, useMemo as useMemo2, useRef as useRef2, useState as useState3 } from "react";
549
+ import { twMerge as twMerge7 } from "tailwind-merge";
729
550
 
730
551
  // src/onboarding/quarry/useAllowance.ts
731
552
  import { useClient } from "wagmi";
732
553
  import { queryOptions, skipToken, useQuery as useQuery2 } from "@tanstack/react-query";
733
554
 
734
555
  // src/quarry/getAllowance.ts
735
- import { numberToHex as numberToHex3 } from "viem";
556
+ import { numberToHex as numberToHex2 } from "viem";
736
557
 
737
558
  // src/quarry/common.ts
738
559
  import { defineStore } from "@latticexyz/store";
@@ -740,10 +561,7 @@ import { parseAbi } from "viem";
740
561
  var paymasterAbi = parseAbi([
741
562
  "error SpenderSystem_AlreadyRegistered(address spender, address user)",
742
563
  "error SpenderSystem_HasOwnBalance(address spender)",
743
- "error BalanceSystem_BalanceTooHigh(address user, uint256 balance, uint256 max)",
744
- "error BalanceSystem_InsufficientBalance(address user, uint256 amount, uint256 balance)",
745
- "function registerSpender(address spender)",
746
- "function depositTo(address to) payable"
564
+ "function registerSpender(address spender)"
747
565
  ]);
748
566
  var paymasterConfig = defineStore({
749
567
  namespaces: {
@@ -757,13 +575,6 @@ var paymasterConfig = defineStore({
757
575
  },
758
576
  key: ["user"]
759
577
  },
760
- Balance: {
761
- schema: {
762
- user: "address",
763
- balance: "uint256"
764
- },
765
- key: ["user"]
766
- },
767
578
  Grantor: {
768
579
  schema: {
769
580
  grantor: "address",
@@ -813,6 +624,29 @@ var paymasterTables = paymasterConfig.namespaces.root.tables;
813
624
  import { getRecord, getStaticDataLocation } from "@latticexyz/store/internal";
814
625
  import { getKeyTuple } from "@latticexyz/protocol-parser/internal";
815
626
  import { setStorageAt } from "viem/actions";
627
+
628
+ // src/getPaymaster.ts
629
+ function getPaymaster(chain) {
630
+ const contracts = chain.contracts ?? {};
631
+ if ("quarryPaymaster" in contracts && contracts.quarryPaymaster != null) {
632
+ if ("address" in contracts.quarryPaymaster) {
633
+ return {
634
+ type: "quarry",
635
+ address: contracts.quarryPaymaster.address
636
+ };
637
+ }
638
+ }
639
+ if ("paymaster" in contracts && contracts.paymaster != null) {
640
+ if ("address" in contracts.paymaster) {
641
+ return {
642
+ type: "simple",
643
+ address: contracts.paymaster.address
644
+ };
645
+ }
646
+ }
647
+ }
648
+
649
+ // src/quarry/getAllowance.ts
816
650
  async function getAllowance({ client, userAddress }) {
817
651
  const paymaster = getPaymaster(client.chain);
818
652
  if (paymaster?.type !== "quarry") return null;
@@ -836,7 +670,7 @@ async function setAllowanceSlot({ client, userAddress, allowance }) {
836
670
  {
837
671
  address: paymaster.address,
838
672
  index: slot,
839
- value: numberToHex3(allowance, { size: 32 })
673
+ value: numberToHex2(allowance, { size: 32 })
840
674
  }
841
675
  );
842
676
  }
@@ -938,6 +772,10 @@ function getDelegationQueryOptions({
938
772
  });
939
773
  }
940
774
 
775
+ // src/onboarding/usePrerequisites.ts
776
+ import { queryOptions as queryOptions5, skipToken as skipToken5, useQuery as useQuery6, useQueryClient } from "@tanstack/react-query";
777
+ import { useClient as useClient5, useConfig } from "wagmi";
778
+
941
779
  // src/useSessionAccount.ts
942
780
  import { useClient as useClient4 } from "wagmi";
943
781
  import { queryOptions as queryOptions4, skipToken as skipToken4, useQuery as useQuery5 } from "@tanstack/react-query";
@@ -1013,41 +851,8 @@ function getSessionAccountQueryOptions({
1013
851
  });
1014
852
  }
1015
853
 
1016
- // src/onboarding/quarry/useBalance.ts
1017
- import { useClient as useClient5 } from "wagmi";
1018
- import { queryOptions as queryOptions5, skipToken as skipToken5, useQuery as useQuery6 } from "@tanstack/react-query";
1019
-
1020
- // src/quarry/getBalance.ts
1021
- import { getRecord as getRecord4 } from "@latticexyz/store/internal";
1022
- async function getBalance({ client, userAddress }) {
1023
- const paymaster = getPaymaster(client.chain);
1024
- if (paymaster?.type !== "quarry") return null;
1025
- const record = await getRecord4(client, {
1026
- address: paymaster.address,
1027
- table: paymasterTables.Balance,
1028
- key: { user: userAddress },
1029
- blockTag: "pending"
1030
- });
1031
- return record.balance;
1032
- }
1033
-
1034
- // src/onboarding/quarry/useBalance.ts
1035
- function getBalanceQueryOptions({
1036
- client,
1037
- userAddress
1038
- }) {
1039
- return queryOptions5({
1040
- queryKey: ["getBalance", client?.uid, userAddress],
1041
- queryFn: client && userAddress ? () => getBalance({ client, userAddress }) : skipToken5
1042
- });
1043
- }
1044
- function useBalance(userAddress) {
1045
- const { chainId } = useEntryKitConfig();
1046
- const client = useClient5({ chainId });
1047
- return useQuery6(getBalanceQueryOptions({ client, userAddress }));
1048
- }
1049
-
1050
854
  // src/onboarding/usePrerequisites.ts
855
+ import { getBalanceQueryOptions } from "wagmi/query";
1051
856
  function getPrequisitesQueryOptions({
1052
857
  queryClient,
1053
858
  config,
@@ -1055,37 +860,34 @@ function getPrequisitesQueryOptions({
1055
860
  userAddress,
1056
861
  worldAddress
1057
862
  }) {
1058
- return queryOptions6({
863
+ return queryOptions5({
1059
864
  queryKey: ["getPrerequisites", client?.uid, userAddress],
1060
865
  queryFn: client && userAddress ? async () => {
1061
866
  const paymaster = getPaymaster(client.chain);
1062
867
  const {
1063
868
  account: { address: sessionAddress }
1064
869
  } = await queryClient.fetchQuery(getSessionAccountQueryOptions({ client, userAddress }));
1065
- const [sessionBalance, allowance, spender, quarryBalance, hasDelegation] = await Promise.all([
870
+ const [sessionBalance, allowance, spender, hasDelegation] = await Promise.all([
1066
871
  !paymaster ? queryClient.fetchQuery(
1067
- getBalanceQueryOptions2(config, { chainId: client.chain.id, address: sessionAddress })
872
+ getBalanceQueryOptions(config, { chainId: client.chain.id, address: sessionAddress })
1068
873
  ) : null,
1069
874
  paymaster?.type === "quarry" ? queryClient.fetchQuery(getAllowanceQueryOptions({ client, userAddress })) : null,
1070
875
  paymaster?.type === "quarry" ? queryClient.fetchQuery(getSpenderQueryOptions({ client, userAddress, sessionAddress })) : null,
1071
- paymaster?.type === "quarry" ? queryClient.fetchQuery(getBalanceQueryOptions({ client, userAddress })) : null,
1072
876
  queryClient.fetchQuery(getDelegationQueryOptions({ client, worldAddress, userAddress, sessionAddress }))
1073
877
  ]);
1074
878
  const hasAllowance = allowance == null || allowance > 0n;
1075
879
  const isSpender = spender == null ? true : spender;
1076
880
  const hasGasBalance = sessionBalance == null || sessionBalance.value > 0n;
1077
- const hasQuarryGasBalance = quarryBalance == null || quarryBalance > 0n;
1078
881
  return {
1079
882
  sessionAddress,
1080
883
  hasAllowance,
1081
884
  isSpender,
1082
885
  hasGasBalance,
1083
- hasQuarryGasBalance,
1084
886
  hasDelegation,
1085
887
  // we intentionally don't enforce an allowance/gas balance here
1086
888
  complete: isSpender && hasDelegation
1087
889
  };
1088
- } : skipToken6,
890
+ } : skipToken5,
1089
891
  retry: false
1090
892
  });
1091
893
  }
@@ -1093,8 +895,8 @@ function usePrerequisites(userAddress) {
1093
895
  const queryClient = useQueryClient();
1094
896
  const config = useConfig();
1095
897
  const { chainId, worldAddress } = useEntryKitConfig();
1096
- const client = useClient6({ chainId });
1097
- const prereqs = useQuery7(
898
+ const client = useClient5({ chainId });
899
+ const prereqs = useQuery6(
1098
900
  getPrequisitesQueryOptions({
1099
901
  queryClient,
1100
902
  config,
@@ -1111,10 +913,10 @@ function usePrerequisites(userAddress) {
1111
913
  import { useDisconnect } from "wagmi";
1112
914
 
1113
915
  // src/useENS.ts
1114
- import { useQuery as useQuery8 } from "@tanstack/react-query";
916
+ import { useQuery as useQuery7 } from "@tanstack/react-query";
1115
917
  function useENS(address) {
1116
918
  const normalizedAddress = address?.toLowerCase();
1117
- return useQuery8({
919
+ return useQuery7({
1118
920
  enabled: !!normalizedAddress,
1119
921
  queryKey: ["ens", normalizedAddress],
1120
922
  queryFn: async () => {
@@ -1267,11 +1069,11 @@ async function claimGasPass({ chain, userAddress }) {
1267
1069
  }
1268
1070
 
1269
1071
  // src/onboarding/quarry/useClaimGasPass.ts
1270
- import { useClient as useClient7 } from "wagmi";
1072
+ import { useClient as useClient6 } from "wagmi";
1271
1073
  function useClaimGasPass() {
1272
1074
  const queryClient = useQueryClient2();
1273
1075
  const { chain } = useEntryKitConfig();
1274
- const client = useClient7({ chainId: chain.id });
1076
+ const client = useClient6({ chainId: chain.id });
1275
1077
  const mutationKey = ["claimGasPass", chain.id];
1276
1078
  return useMutation({
1277
1079
  retry: 0,
@@ -1382,9 +1184,6 @@ function Allowance({ isActive, isExpanded, userAddress }) {
1382
1184
  ] });
1383
1185
  }
1384
1186
 
1385
- // src/onboarding/Session.tsx
1386
- import { useEffect as useEffect7 } from "react";
1387
-
1388
1187
  // src/onboarding/useSetupSession.ts
1389
1188
  import { encodeFunctionData } from "viem";
1390
1189
  import { useMutation as useMutation2, useQueryClient as useQueryClient3 } from "@tanstack/react-query";
@@ -1398,7 +1197,7 @@ function defineCall(call) {
1398
1197
  }
1399
1198
 
1400
1199
  // src/onboarding/useSetupSession.ts
1401
- import { useClient as useClient8 } from "wagmi";
1200
+ import { useClient as useClient7 } from "wagmi";
1402
1201
  import { resourceToHex as resourceToHex2 } from "@latticexyz/common";
1403
1202
  import IBaseWorldAbi from "@latticexyz/world/out/IBaseWorld.sol/IBaseWorld.abi.json";
1404
1203
 
@@ -1410,7 +1209,7 @@ import { getAction as getAction3 } from "viem/utils";
1410
1209
  import { toHex } from "viem";
1411
1210
  import { signTypedData } from "viem/actions";
1412
1211
  import { callWithSignatureTypes } from "@latticexyz/world-module-callwithsignature/internal";
1413
- import { getRecord as getRecord5 } from "@latticexyz/store/internal";
1212
+ import { getRecord as getRecord4 } from "@latticexyz/store/internal";
1414
1213
  import moduleConfig from "@latticexyz/world-module-callwithsignature/mud.config";
1415
1214
  import { hexToResource } from "@latticexyz/common";
1416
1215
  import { getAction as getAction2 } from "viem/utils";
@@ -1422,7 +1221,7 @@ async function signCall({
1422
1221
  nonce: initialNonce,
1423
1222
  client
1424
1223
  }) {
1425
- const nonce = initialNonce ?? (client ? (await getRecord5(client, {
1224
+ const nonce = initialNonce ?? (client ? (await getRecord4(client, {
1426
1225
  address: worldAddress,
1427
1226
  table: moduleConfig.tables.CallWithSignatureNonces,
1428
1227
  key: { signer: userClient.account.address },
@@ -1475,7 +1274,7 @@ import { systemsConfig as worldSystemsConfig } from "@latticexyz/world/mud.confi
1475
1274
  function useSetupSession({ userClient }) {
1476
1275
  const queryClient = useQueryClient3();
1477
1276
  const { chainId, worldAddress } = useEntryKitConfig();
1478
- const client = useClient8({ chainId });
1277
+ const client = useClient7({ chainId });
1479
1278
  const mutationKey = ["setupSession", client?.chain.id, userClient.account.address];
1480
1279
  return useMutation2({
1481
1280
  retry: 0,
@@ -1581,12 +1380,15 @@ function useSetupSession({ userClient }) {
1581
1380
  });
1582
1381
  }
1583
1382
 
1383
+ // src/onboarding/Session.tsx
1384
+ import { useEffect as useEffect7 } from "react";
1385
+
1584
1386
  // src/useSessionClient.ts
1585
- import { useClient as useClient9 } from "wagmi";
1387
+ import { useClient as useClient8 } from "wagmi";
1586
1388
  import {
1587
- queryOptions as queryOptions7,
1588
- skipToken as skipToken7,
1589
- useQuery as useQuery9,
1389
+ queryOptions as queryOptions6,
1390
+ skipToken as skipToken6,
1391
+ useQuery as useQuery8,
1590
1392
  useQueryClient as useQueryClient4
1591
1393
  } from "@tanstack/react-query";
1592
1394
 
@@ -1671,7 +1473,7 @@ function getSessionClientQueryOptions({
1671
1473
  userAddress,
1672
1474
  worldAddress
1673
1475
  }) {
1674
- return queryOptions7({
1476
+ return queryOptions6({
1675
1477
  queryKey: ["getSessionClient", client?.uid, userAddress, worldAddress],
1676
1478
  queryFn: userAddress ? async () => {
1677
1479
  const { account: sessionAccount, signer: sessionSigner } = await queryClient.fetchQuery(
@@ -1683,7 +1485,7 @@ function getSessionClientQueryOptions({
1683
1485
  userAddress,
1684
1486
  worldAddress
1685
1487
  });
1686
- } : skipToken7,
1488
+ } : skipToken6,
1687
1489
  staleTime: Infinity,
1688
1490
  // TODO: replace with function to retry only connection errors
1689
1491
  retry: false
@@ -1692,8 +1494,8 @@ function getSessionClientQueryOptions({
1692
1494
  function useSessionClient(userAddress) {
1693
1495
  const queryClient = useQueryClient4();
1694
1496
  const { chainId, worldAddress } = useEntryKitConfig();
1695
- const client = useClient9({ chainId });
1696
- return useQuery9(
1497
+ const client = useClient8({ chainId });
1498
+ return useQuery8(
1697
1499
  getSessionClientQueryOptions({
1698
1500
  queryClient,
1699
1501
  client,
@@ -1709,11 +1511,9 @@ function Session({ isActive, isExpanded, userClient, registerSpender, registerDe
1709
1511
  const sessionClient = useShowQueryError(useSessionClient(userClient.account.address));
1710
1512
  const setup = useShowMutationError(useSetupSession({ userClient }));
1711
1513
  const hasSession = !registerDelegation && !registerDelegation;
1712
- const { data: prerequisites } = usePrerequisites(userClient.account.address);
1713
- const { hasAllowance, hasGasBalance, hasQuarryGasBalance } = prerequisites ?? {};
1714
1514
  useEffect7(() => {
1715
1515
  const timer = setTimeout(() => {
1716
- if (isActive && setup.status === "idle" && sessionClient.data && !hasSession && (hasAllowance || hasGasBalance || hasQuarryGasBalance)) {
1516
+ if (isActive && setup.status === "idle" && sessionClient.data && !hasSession) {
1717
1517
  setup.mutate({
1718
1518
  sessionClient: sessionClient.data,
1719
1519
  registerSpender,
@@ -1722,17 +1522,7 @@ function Session({ isActive, isExpanded, userClient, registerSpender, registerDe
1722
1522
  }
1723
1523
  });
1724
1524
  return () => clearTimeout(timer);
1725
- }, [
1726
- hasSession,
1727
- isActive,
1728
- registerDelegation,
1729
- registerSpender,
1730
- sessionClient,
1731
- setup,
1732
- hasAllowance,
1733
- hasGasBalance,
1734
- hasQuarryGasBalance
1735
- ]);
1525
+ }, [hasSession, isActive, registerDelegation, registerSpender, sessionClient, setup]);
1736
1526
  return /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-4", children: [
1737
1527
  /* @__PURE__ */ jsxs13("div", { className: "flex justify-between gap-4", children: [
1738
1528
  /* @__PURE__ */ jsxs13("div", { children: [
@@ -1760,10 +1550,8 @@ function Session({ isActive, isExpanded, userClient, registerSpender, registerDe
1760
1550
  }
1761
1551
 
1762
1552
  // src/onboarding/GasBalance.tsx
1763
- import { useEffect as useEffect9, useState as useState3 } from "react";
1764
1553
  import { parseEther as parseEther4 } from "viem";
1765
- import { useQueryClient as useQueryClient6 } from "@tanstack/react-query";
1766
- import { useBalance as useBalance2, useWatchBlockNumber } from "wagmi";
1554
+ import { useBalance, useWatchBlockNumber } from "wagmi";
1767
1555
 
1768
1556
  // src/data/relayChains.json
1769
1557
  var relayChains_default = {
@@ -2048,11 +1836,11 @@ var relayChains_default = {
2048
1836
  // src/onboarding/useSetBalance.ts
2049
1837
  import { useQueryClient as useQueryClient5, useMutation as useMutation3 } from "@tanstack/react-query";
2050
1838
  import { setBalance as setBalance2 } from "viem/actions";
2051
- import { useClient as useClient10 } from "wagmi";
1839
+ import { useClient as useClient9 } from "wagmi";
2052
1840
  function useSetBalance() {
2053
1841
  const queryClient = useQueryClient5();
2054
1842
  const { chainId } = useEntryKitConfig();
2055
- const client = useClient10({ chainId });
1843
+ const client = useClient9({ chainId });
2056
1844
  return useMutation3({
2057
1845
  retry: 0,
2058
1846
  mutationKey: ["setBalance", chainId],
@@ -2068,93 +1856,21 @@ function useSetBalance() {
2068
1856
  });
2069
1857
  }
2070
1858
 
2071
- // src/errors/usePrevious.ts
2072
- import { useEffect as useEffect8, useRef as useRef2 } from "react";
2073
- function usePrevious(value, initialValue) {
2074
- const ref = useRef2();
2075
- useEffect8(() => {
2076
- ref.current = { value };
2077
- }, [value]);
2078
- return ref.current ? ref.current.value : initialValue;
2079
- }
2080
-
2081
- // src/icons/IconSVG.tsx
2082
- import { twMerge as twMerge7 } from "tailwind-merge";
2083
- import { jsx as jsx16 } from "react/jsx-runtime";
2084
- function IconSVG({ className, children, ...props }) {
2085
- return /* @__PURE__ */ jsx16(
2086
- "svg",
2087
- {
2088
- xmlns: "http://www.w3.org/2000/svg",
2089
- viewBox: "0 0 24 24",
2090
- fill: "currentColor",
2091
- className: twMerge7("-my-[0.125em] h-[1.25em] w-[1.25em]", className),
2092
- ...props,
2093
- children
2094
- }
2095
- );
2096
- }
2097
-
2098
- // src/icons/CopyIcon.tsx
2099
- import { jsx as jsx17 } from "react/jsx-runtime";
2100
- function CopyIcon(props) {
2101
- return /* @__PURE__ */ jsx17(IconSVG, { ...props, children: /* @__PURE__ */ jsx17(
2102
- "path",
2103
- {
2104
- d: "M8 5H6C4.89543 5 4 5.89543 4 7V19C4 20.1046 4.89543 21 6 21H16C17.1046 21 18 20.1046 18 19V18M8 5C8 6.10457 8.89543 7 10 7H12C13.1046 7 14 6.10457 14 5M8 5C8 3.89543 8.89543 3 10 3H12C13.1046 3 14 3.89543 14 5M14 5H16C17.1046 5 18 5.89543 18 7V10M20 14H10M10 14L13 11M10 14L13 17",
2105
- fill: "none",
2106
- stroke: "currentColor",
2107
- strokeWidth: "2",
2108
- strokeLinecap: "round",
2109
- strokeLinejoin: "round"
2110
- }
2111
- ) });
2112
- }
2113
-
2114
- // src/icons/CheckIcon.tsx
2115
- import { jsx as jsx18 } from "react/jsx-runtime";
2116
- function CheckIcon(props) {
2117
- return /* @__PURE__ */ jsx18(IconSVG, { ...props, children: /* @__PURE__ */ jsx18(
2118
- "path",
2119
- {
2120
- d: "M5 13L9 17L19 7",
2121
- fill: "none",
2122
- stroke: "currentColor",
2123
- strokeWidth: "2",
2124
- strokeLinecap: "round",
2125
- strokeLinejoin: "round"
2126
- }
2127
- ) });
2128
- }
2129
-
2130
1859
  // src/onboarding/GasBalance.tsx
2131
- import { Fragment, jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
1860
+ import { Fragment, jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
2132
1861
  function GasBalance({ isActive, isExpanded, sessionAddress }) {
2133
- const queryClient = useQueryClient6();
2134
1862
  const { chain } = useEntryKitConfig();
2135
- const [copied, setCopied] = useState3(false);
2136
- const balance = useShowQueryError(useBalance2({ chainId: chain.id, address: sessionAddress }));
2137
- const prevBalance = usePrevious(balance.data);
1863
+ const balance = useShowQueryError(useBalance({ chainId: chain.id, address: sessionAddress }));
2138
1864
  useWatchBlockNumber({ onBlockNumber: () => balance.refetch() });
2139
1865
  const setBalance3 = useShowMutationError(useSetBalance());
2140
1866
  const relayChain = relayChains_default[chain.id];
2141
- const handleCopy = () => {
2142
- navigator.clipboard.writeText(sessionAddress);
2143
- setCopied(true);
2144
- setTimeout(() => setCopied(false), 2e3);
2145
- };
2146
- useEffect9(() => {
2147
- if (balance.data != null && prevBalance?.value === 0n && balance.data.value > 0n) {
2148
- queryClient.invalidateQueries({ queryKey: ["getPrerequisites"] });
2149
- }
2150
- }, [balance.data, prevBalance, setBalance3, sessionAddress, queryClient]);
2151
1867
  return /* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-4", children: [
2152
1868
  /* @__PURE__ */ jsxs14("div", { className: "flex justify-between gap-4", children: [
2153
1869
  /* @__PURE__ */ jsxs14("div", { children: [
2154
- /* @__PURE__ */ jsx19("div", { children: "Gas balance" }),
2155
- /* @__PURE__ */ jsx19("div", { className: "font-mono text-white", children: balance.data != null ? /* @__PURE__ */ jsx19(Balance, { wei: balance.data.value }) : /* @__PURE__ */ jsx19(PendingIcon, { className: "text-sm" }) })
1870
+ /* @__PURE__ */ jsx16("div", { children: "Gas balance" }),
1871
+ /* @__PURE__ */ jsx16("div", { className: "font-mono text-white", children: balance.data != null ? /* @__PURE__ */ jsx16(Balance, { wei: balance.data.value }) : /* @__PURE__ */ jsx16(PendingIcon, { className: "text-sm" }) })
2156
1872
  ] }),
2157
- chain.id === 31337 ? /* @__PURE__ */ jsx19(
1873
+ chain.id === 31337 ? /* @__PURE__ */ jsx16(
2158
1874
  Button,
2159
1875
  {
2160
1876
  variant: isActive ? "primary" : "tertiary",
@@ -2169,13 +1885,13 @@ function GasBalance({ isActive, isExpanded, sessionAddress }) {
2169
1885
  }
2170
1886
  ) : relayChain != null ? (
2171
1887
  // TODO: convert this to a <ButtonLink>
2172
- /* @__PURE__ */ jsx19(
1888
+ /* @__PURE__ */ jsx16(
2173
1889
  "a",
2174
1890
  {
2175
1891
  href: `${relayChain.bridgeUrl}?${new URLSearchParams({ toAddress: sessionAddress, amount: "0.01" })}`,
2176
1892
  target: "_blank",
2177
1893
  rel: "noopener noreferrer",
2178
- children: /* @__PURE__ */ jsx19(
1894
+ children: /* @__PURE__ */ jsx16(
2179
1895
  Button,
2180
1896
  {
2181
1897
  variant: isActive ? "primary" : "tertiary",
@@ -2190,23 +1906,11 @@ function GasBalance({ isActive, isExpanded, sessionAddress }) {
2190
1906
  ) : null
2191
1907
  ] }),
2192
1908
  isExpanded ? /* @__PURE__ */ jsxs14(Fragment, { children: [
2193
- /* @__PURE__ */ jsx19("p", { className: "text-sm", children: "Your session's gas balance is used to pay for onchain computation." }),
1909
+ /* @__PURE__ */ jsx16("p", { className: "text-sm", children: "Your session's gas balance is used to pay for onchain computation." }),
2194
1910
  /* @__PURE__ */ jsxs14("p", { className: "text-sm", children: [
2195
1911
  "Send funds to",
2196
1912
  " ",
2197
- /* @__PURE__ */ jsxs14(
2198
- "span",
2199
- {
2200
- className: "inline-flex items-center gap-1 font-mono text-white cursor-pointer hover:text-white/80 transition-colors",
2201
- onClick: handleCopy,
2202
- title: "Click to copy",
2203
- children: [
2204
- /* @__PURE__ */ jsx19(TruncatedHex, { hex: sessionAddress }),
2205
- " ",
2206
- copied ? /* @__PURE__ */ jsx19(CheckIcon, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ jsx19(CopyIcon, { className: "w-3.5 h-3.5" })
2207
- ]
2208
- }
2209
- ),
1913
+ /* @__PURE__ */ jsx16("span", { className: "font-mono text-white", children: /* @__PURE__ */ jsx16(TruncatedHex, { hex: sessionAddress }) }),
2210
1914
  " ",
2211
1915
  "on ",
2212
1916
  chain.name,
@@ -2216,1096 +1920,34 @@ function GasBalance({ isActive, isExpanded, sessionAddress }) {
2216
1920
  ] });
2217
1921
  }
2218
1922
 
2219
- // src/onboarding/deposit/DepositFormContainer.tsx
2220
- import { useState as useState5 } from "react";
2221
- import { useChains as useChains4, useChainId } from "wagmi";
2222
-
2223
- // src/onboarding/deposit/DepositViaTransferForm.tsx
2224
- import { useAccount as useAccount5, useWriteContract, usePrepareTransactionRequest, usePublicClient } from "wagmi";
2225
- import { encodeFunctionData as encodeFunctionData2 } from "viem";
2226
- import { useMutation as useMutation4, useQuery as useQuery11 } from "@tanstack/react-query";
2227
-
2228
- // src/onboarding/deposit/DepositForm.tsx
2229
- import { useEffect as useEffect11, useRef as useRef3 } from "react";
2230
- import { useAccount as useAccount4, useBalance as useBalance5, useWatchBlockNumber as useWatchBlockNumber2 } from "wagmi";
2231
- import { useIsMounted } from "usehooks-ts";
2232
- import { twMerge as twMerge15 } from "tailwind-merge";
2233
-
2234
- // src/onboarding/deposit/ChainSelect.tsx
2235
- import { useEffect as useEffect10, useMemo as useMemo2 } from "react";
2236
- import { useAccount as useAccount2, useSwitchChain } from "wagmi";
2237
- import { twMerge as twMerge12 } from "tailwind-merge";
2238
- import * as Select from "@radix-ui/react-select";
2239
-
2240
- // src/icons/ChevronUpIcon.tsx
2241
- import { jsx as jsx20 } from "react/jsx-runtime";
2242
- function ChevronUpIcon(props) {
2243
- return /* @__PURE__ */ jsx20(IconSVG, { viewBox: "0 0 20 20", ...props, children: /* @__PURE__ */ jsx20(
2244
- "path",
2245
- {
2246
- d: "M14.7071 12.7071C14.3166 13.0976 13.6834 13.0976 13.2929 12.7071L10 9.41421L6.70711 12.7071C6.31658 13.0976 5.68342 13.0976 5.29289 12.7071C4.90237 12.3166 4.90237 11.6834 5.29289 11.2929L9.29289 7.29289C9.68342 6.90237 10.3166 6.90237 10.7071 7.29289L14.7071 11.2929C15.0976 11.6834 15.0976 12.3166 14.7071 12.7071Z",
2247
- fillRule: "evenodd",
2248
- clipRule: "evenodd"
2249
- }
2250
- ) });
2251
- }
2252
-
2253
- // src/icons/ChevronDownIcon.tsx
2254
- import { jsx as jsx21 } from "react/jsx-runtime";
2255
- function ChevronDownIcon(props) {
2256
- return /* @__PURE__ */ jsx21(IconSVG, { viewBox: "0 0 20 20", ...props, children: /* @__PURE__ */ jsx21(
2257
- "path",
2258
- {
2259
- d: "M5.29289 7.29289C5.68342 6.90237 6.31658 6.90237 6.70711 7.29289L10 10.5858L13.2929 7.29289C13.6834 6.90237 14.3166 6.90237 14.7071 7.29289C15.0976 7.68342 15.0976 8.31658 14.7071 8.70711L10.7071 12.7071C10.3166 13.0976 9.68342 13.0976 9.29289 12.7071L5.29289 8.70711C4.90237 8.31658 4.90237 7.68342 5.29289 7.29289Z",
2260
- fillRule: "evenodd",
2261
- clipRule: "evenodd"
1923
+ // src/onboarding/ConnectedSteps.tsx
1924
+ import { jsx as jsx17 } from "react/jsx-runtime";
1925
+ function ConnectedSteps({ userClient, initialUserAddress }) {
1926
+ const { chain } = useEntryKitConfig();
1927
+ const paymaster = getPaymaster(chain);
1928
+ const userAddress = userClient.account.address;
1929
+ const { data: prerequisites, error: prerequisitesError } = usePrerequisites(userAddress);
1930
+ useEffect8(() => {
1931
+ if (prerequisitesError) {
1932
+ console.error("Could not get prerequisites", prerequisitesError);
2262
1933
  }
2263
- ) });
2264
- }
2265
-
2266
- // src/ui/Slot.tsx
2267
- import { isValidElement, cloneElement, Children } from "react";
2268
- import { twMerge as twMerge8 } from "tailwind-merge";
2269
- function Slot({
2270
- children,
2271
- ...props
2272
- }) {
2273
- if (isValidElement(children)) {
2274
- return cloneElement(children, {
2275
- ...props,
2276
- ...children.props,
2277
- style: {
2278
- ...props.style,
2279
- ...children.props.style
2280
- },
2281
- className: twMerge8(props.className, children.props.className)
2282
- });
2283
- }
2284
- if (Children.count(children) > 1) {
2285
- Children.only(null);
2286
- }
2287
- return null;
2288
- }
2289
-
2290
- // src/ui/Input.tsx
2291
- import { twMerge as twMerge9 } from "tailwind-merge";
2292
- import { jsx as jsx22 } from "react/jsx-runtime";
2293
- function Input({ asChild, className, ...props }) {
2294
- const Child = asChild ? Slot : "input";
2295
- return /* @__PURE__ */ jsx22(
2296
- Child,
2297
- {
2298
- className: twMerge9(
2299
- "p-2.5 gap-1 border text-lg font-medium transition",
2300
- "outline-none ring-2 ring-transparent focus-within:ring-orange-500 focus-within:border-transparent",
2301
- "bg-white border-neutral-300 text-black placeholder:text-neutral-400",
2302
- "dark:bg-neutral-900 dark:border-neutral-700 dark:text-white dark:placeholder:text-neutral-500",
2303
- className
2304
- ),
2305
- ...props
1934
+ }, [prerequisitesError]);
1935
+ const { closeAccountModal } = useAccountModal();
1936
+ const isNewConnection = userAddress !== initialUserAddress;
1937
+ const initialPrerequisites = useRef2(prerequisites);
1938
+ useEffect8(() => {
1939
+ if (prerequisites == null) return;
1940
+ if (initialPrerequisites.current == null) {
1941
+ initialPrerequisites.current = prerequisites;
2306
1942
  }
2307
- );
2308
- }
2309
-
2310
- // src/onboarding/deposit/ChainBalance.tsx
2311
- import { useBalance as useBalance3 } from "wagmi";
2312
- import { Fragment as Fragment2, jsx as jsx23 } from "react/jsx-runtime";
2313
- function ChainBalance({ chainId, address }) {
2314
- const balance = useBalance3({ chainId, address });
2315
- return /* @__PURE__ */ jsx23(Fragment2, { children: balance.data ? /* @__PURE__ */ jsx23(Balance, { wei: balance.data.value }) : /* @__PURE__ */ jsx23(PendingIcon, {}) });
2316
- }
2317
-
2318
- // src/onboarding/deposit/ChainIcon.tsx
2319
- import { twMerge as twMerge11 } from "tailwind-merge";
2320
-
2321
- // src/onboarding/deposit/PreloadedImage.tsx
2322
- import { twMerge as twMerge10 } from "tailwind-merge";
2323
- import { jsx as jsx24 } from "react/jsx-runtime";
2324
- function PreloadedImage({ url, fallback: fallback2, className }) {
2325
- const { isSuccess, isLoading } = usePreloadImage(url);
2326
- return /* @__PURE__ */ jsx24("span", { className: twMerge10("inline-flex w-full h-full items-center justify-center overflow-clip", className), children: !isLoading ? isSuccess ? /* @__PURE__ */ jsx24("img", { src: url, className: "w-full h-full object-cover" }) : fallback2 : null });
2327
- }
2328
-
2329
- // src/onboarding/deposit/ChainIcon.tsx
2330
- import { forwardRef as forwardRef2 } from "react";
2331
- import { jsx as jsx25 } from "react/jsx-runtime";
2332
- var ChainIcon = forwardRef2(function ChainIcon2({ name, url, className }, forwardedRef) {
2333
- return /* @__PURE__ */ jsx25(
2334
- "span",
2335
- {
2336
- ref: forwardedRef,
2337
- className: twMerge11("flex-shrink-0 inline-flex w-6 aspect-square rounded-full overflow-clip", className),
2338
- children: url ? /* @__PURE__ */ jsx25(PreloadedImage, { url }) : (
2339
- // TODO: better placeholder
2340
- /* @__PURE__ */ jsx25(
2341
- "span",
2342
- {
2343
- className: twMerge11(
2344
- "inline-flex items-center justify-center w-full h-full rounded-full",
2345
- "border-2 border-dashed border-black/20 dark:border-white/50 opacity-50"
2346
- ),
2347
- children: name?.slice(0, 1)
2348
- }
2349
- )
2350
- )
2351
- }
2352
- );
2353
- });
2354
-
2355
- // src/onboarding/deposit/useRelay.ts
2356
- import {
2357
- MAINNET_RELAY_API,
2358
- TESTNET_RELAY_API,
2359
- fetchChainConfigs,
2360
- createClient as createClient2,
2361
- LogLevel
2362
- } from "@reservoir0x/relay-sdk";
2363
- import { useQuery as useQuery10 } from "@tanstack/react-query";
2364
- function useRelay() {
2365
- const { chain } = useEntryKitConfig();
2366
- const appOrigin = location.host;
2367
- const baseApiUrl = chain.testnet ? TESTNET_RELAY_API : MAINNET_RELAY_API;
2368
- return useQuery10({
2369
- queryKey: ["relayChains", baseApiUrl, appOrigin],
2370
- queryFn: async () => {
2371
- debug("fetching relay chains from", baseApiUrl);
2372
- const chains = await fetchChainConfigs(baseApiUrl);
2373
- debug("got relay chains", chains);
2374
- const client = createClient2({
2375
- baseApiUrl,
2376
- source: appOrigin,
2377
- chains,
2378
- logLevel: LogLevel.Verbose
2379
- });
2380
- return { client, chains };
2381
- },
2382
- refetchOnMount: false,
2383
- refetchOnReconnect: false,
2384
- refetchOnWindowFocus: false,
2385
- staleTime: Infinity
2386
- });
2387
- }
2388
-
2389
- // src/onboarding/deposit/ChainSelect.tsx
2390
- import { Fragment as Fragment3, jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
2391
- function ChainSelect({ value, onChange }) {
2392
- const theme = useTheme();
2393
- const { frame } = useFrame();
2394
- const userAccount = useAccount2();
2395
- const { chains, switchChain } = useSwitchChain();
2396
- const relay = useRelay();
2397
- const relayChains = relay.data?.chains;
2398
- const sourceChains = useMemo2(() => {
2399
- return chains.map((sourceChain) => {
2400
- const relayChain = relayChains?.find((c) => c.id === sourceChain.id);
2401
- return {
2402
- ...sourceChain,
2403
- relayChain
2404
- };
2405
- }).filter((c) => c.relayChain);
2406
- }, [chains, relayChains]);
2407
- const selectedChain = sourceChains.find((c) => c.id === value);
2408
- useEffect10(() => {
2409
- if (sourceChains.length > 0 && !selectedChain) {
2410
- const defaultChain = sourceChains[0];
2411
- onChange(defaultChain.id);
2412
- switchChain({ chainId: defaultChain.id });
2413
- }
2414
- }, [value, selectedChain, sourceChains, onChange, switchChain]);
2415
- return /* @__PURE__ */ jsxs15(
2416
- Select.Root,
2417
- {
2418
- value: value.toString(),
2419
- onValueChange: (value2) => {
2420
- if (value2) {
2421
- const chain = sourceChains.find((chain2) => chain2.id.toString() === value2);
2422
- if (!chain) throw new Error(`Unknown chain selected: ${value2}`);
2423
- onChange(chain.id);
2424
- }
2425
- },
2426
- children: [
2427
- /* @__PURE__ */ jsx26(Input, { asChild: true, children: /* @__PURE__ */ jsxs15(Select.Trigger, { className: "group inline-flex items-center justify-center", children: [
2428
- /* @__PURE__ */ jsx26(Select.Value, { asChild: true, children: /* @__PURE__ */ jsx26(
2429
- ChainIcon,
2430
- {
2431
- id: selectedChain?.id,
2432
- name: selectedChain?.name,
2433
- url: selectedChain?.relayChain?.icon?.[theme],
2434
- className: "w-8"
2435
- }
2436
- ) }),
2437
- /* @__PURE__ */ jsx26(Select.Icon, { asChild: true, children: /* @__PURE__ */ jsxs15(Fragment3, { children: [
2438
- /* @__PURE__ */ jsx26(ChevronDownIcon, { className: "text-sm -mr-1 group-aria-expanded:hidden" }),
2439
- /* @__PURE__ */ jsx26(ChevronUpIcon, { className: "text-sm -mr-1 hidden group-aria-expanded:inline" })
2440
- ] }) })
2441
- ] }) }),
2442
- frame.contentDocument ? /* @__PURE__ */ jsx26(Select.Portal, { container: frame.contentDocument.body, children: /* @__PURE__ */ jsx26(Select.Content, { position: "popper", className: "w-[352px] mt-1 animate-in fade-in slide-in-from-top-2", children: /* @__PURE__ */ jsx26(Select.Viewport, { children: /* @__PURE__ */ jsx26(
2443
- Select.Group,
2444
- {
2445
- className: twMerge12(
2446
- "flex flex-col border divide-y",
2447
- "bg-neutral-100 text-neutral-700 border-neutral-300 divide-neutral-300",
2448
- "dark:bg-neutral-800 dark:text-neutral-300 dark:border-neutral-700 dark:divide-neutral-700"
2449
- ),
2450
- children: sourceChains.map((chain) => (
2451
- // TODO: figure out why up/down arrow jump to top/bottom rather than cycling through items
2452
- /* @__PURE__ */ jsxs15(
2453
- Select.Item,
2454
- {
2455
- value: chain.id.toString(),
2456
- className: twMerge12(
2457
- "group flex p-2.5 gap-2.5 items-center cursor-pointer outline-none",
2458
- // TODO: different style for checked/active state
2459
- "text-black focus:bg-white data-[state=checked]:bg-neutral-200",
2460
- "dark:text-white dark:focus:bg-neutral-700 dark:data-[state=checked]:bg-neutral-900"
2461
- ),
2462
- children: [
2463
- /* @__PURE__ */ jsx26(ChainIcon, { id: chain.id, name: chain.name, url: chain.relayChain?.icon?.[theme] }),
2464
- /* @__PURE__ */ jsx26("span", { className: "flex-grow flex-shrink-0", children: chain.name }),
2465
- /* @__PURE__ */ jsx26("span", { className: "flex-shrink-0 font-mono text-sm text-neutral-500 dark:text-neutral-400", children: /* @__PURE__ */ jsx26(ChainBalance, { chainId: chain.id, address: userAccount.address }) })
2466
- ]
2467
- },
2468
- chain.id
2469
- )
2470
- ))
2471
- }
2472
- ) }) }) }) : null
2473
- ]
2474
- }
2475
- );
2476
- }
2477
-
2478
- // src/onboarding/deposit/AmountInput.tsx
2479
- import { formatEther as formatEther3, parseEther as parseEther5 } from "viem";
2480
- import { twMerge as twMerge13 } from "tailwind-merge";
2481
- import { forwardRef as forwardRef3 } from "react";
2482
- import { jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
2483
- var AmountInput = forwardRef3(function AmountInput2({ initialAmount, onChange }, forwardedRef) {
2484
- return /* @__PURE__ */ jsx27(Input, { asChild: true, className: "w-full cursor-text flex items-center", children: /* @__PURE__ */ jsxs16("label", { children: [
2485
- /* @__PURE__ */ jsx27(
2486
- "input",
2487
- {
2488
- ref: forwardedRef,
2489
- className: twMerge13(
2490
- "peer flex-grow outline-none bg-transparent",
2491
- "placeholder:text-neutral-400",
2492
- "dark:placeholder:text-neutral-500"
2493
- ),
2494
- placeholder: "0.005",
2495
- required: true,
2496
- autoFocus: true,
2497
- defaultValue: initialAmount == null ? "" : formatEther3(initialAmount),
2498
- onChange: (event) => {
2499
- const input = event.currentTarget;
2500
- if (input.value.trim() === "") {
2501
- input.setCustomValidity("");
2502
- onChange(void 0);
2503
- return;
2504
- }
2505
- const value = input.value.trim().replace(/\.$/, ".0");
2506
- if (!/^\d*(\.\d+)?$/.test(value)) {
2507
- return input.setCustomValidity("Invalid amount.");
2508
- }
2509
- input.setCustomValidity("");
2510
- onChange(parseEther5(value));
2511
- }
2512
- }
2513
- ),
2514
- /* @__PURE__ */ jsx27(
2515
- "span",
2516
- {
2517
- className: twMerge13(
2518
- "flex-shrink-0 text-2xl",
2519
- "peer-placeholder-shown:text-neutral-400",
2520
- "dark:peer-placeholder-shown:text-neutral-500"
2521
- ),
2522
- children: /* @__PURE__ */ jsx27(EthIcon, {})
2523
- }
2524
- )
2525
- ] }) });
2526
- });
2527
-
2528
- // src/onboarding/deposit/SubmitButton.tsx
2529
- import { useAccount as useAccount3, useBalance as useBalance4, useSwitchChain as useSwitchChain2 } from "wagmi";
2530
- import { twMerge as twMerge14 } from "tailwind-merge";
2531
- import { parseEther as parseEther6 } from "viem";
2532
- import { jsx as jsx28, jsxs as jsxs17 } from "react/jsx-runtime";
2533
- var MAX_DEPOSIT_AMOUNT = "0.1";
2534
- function SubmitButton({ amount, chainId, className, ...buttonProps }) {
2535
- const { chainId: userChainId, address: userAddress } = useAccount3();
2536
- const { data: userBalance } = useBalance4({ address: userAddress });
2537
- const shouldSwitchChain = chainId != null && chainId !== userChainId;
2538
- const switchChain = useSwitchChain2();
2539
- if (shouldSwitchChain) {
2540
- return /* @__PURE__ */ jsx28(
2541
- Button,
2542
- {
2543
- type: "button",
2544
- variant: "primary",
2545
- className: twMerge14("w-full", className),
2546
- pending: switchChain.isPending,
2547
- onClick: () => switchChain.switchChain({ chainId }),
2548
- children: "Switch chain"
2549
- }
2550
- );
2551
- } else if (amount) {
2552
- if (amount > parseEther6(MAX_DEPOSIT_AMOUNT)) {
2553
- return /* @__PURE__ */ jsxs17(Button, { type: "button", className: twMerge14("w-full", className), disabled: true, children: [
2554
- "Max amount is ",
2555
- MAX_DEPOSIT_AMOUNT,
2556
- " ETH"
2557
- ] });
2558
- } else if (amount > (userBalance?.value ?? 0n)) {
2559
- return /* @__PURE__ */ jsx28(Button, { type: "button", className: twMerge14("w-full", className), disabled: true, children: "Insufficient balance" });
2560
- }
2561
- }
2562
- return /* @__PURE__ */ jsx28(Button, { type: "submit", className: twMerge14("w-full", className), ...buttonProps });
2563
- }
2564
-
2565
- // src/icons/WarningIcon.tsx
2566
- import { jsx as jsx29 } from "react/jsx-runtime";
2567
- function WarningIcon(props) {
2568
- return /* @__PURE__ */ jsx29(IconSVG, { fill: "none", ...props, children: /* @__PURE__ */ jsx29(
2569
- "path",
2570
- {
2571
- d: "M12 9V11M12 15H12.01M5.07183 19H18.9282C20.4678 19 21.4301 17.3333 20.6603 16L13.7321 4C12.9623 2.66667 11.0378 2.66667 10.268 4L3.33978 16C2.56998 17.3333 3.53223 19 5.07183 19Z",
2572
- stroke: "currentColor",
2573
- strokeWidth: "2",
2574
- strokeLinecap: "round",
2575
- strokeLinejoin: "round"
2576
- }
2577
- ) });
2578
- }
2579
-
2580
- // src/formatGas.ts
2581
- import { formatGwei } from "viem";
2582
- function formatGas(wei) {
2583
- const formatted = formatGwei(wei);
2584
- const magnitude = Math.floor(parseFloat(formatted)).toString().length;
2585
- return parseFloat(formatted).toLocaleString("en-US", { maximumFractionDigits: Math.max(0, 6 - magnitude) });
2586
- }
2587
-
2588
- // src/onboarding/deposit/DepositForm.tsx
2589
- import { Fragment as Fragment4, jsx as jsx30, jsxs as jsxs18 } from "react/jsx-runtime";
2590
- function DepositForm({
2591
- sourceChain,
2592
- setSourceChainId,
2593
- amount,
2594
- setAmount,
2595
- estimatedFee,
2596
- estimatedTime,
2597
- onSubmit,
2598
- submitButton
2599
- }) {
2600
- const amountInputRef = useRef3(null);
2601
- const isMounted = useIsMounted();
2602
- const { address: userAddress, chainId: userChainId } = useAccount4();
2603
- const balance = useShowQueryError(useBalance5({ chainId: sourceChain.id, address: userAddress }));
2604
- const quarryBalance = useShowQueryError(useBalance(userAddress));
2605
- useWatchBlockNumber2({
2606
- onBlockNumber: () => {
2607
- balance.refetch();
2608
- quarryBalance.refetch();
2609
- }
2610
- });
2611
- const minimumBalance = amount != null ? amount + (estimatedFee?.fee ?? 0n) : void 0;
2612
- const hasMinimumBalance = balance.data != null ? balance.data.value > (minimumBalance ?? 0n) : void 0;
2613
- useEffect11(() => {
2614
- amountInputRef.current?.focus();
2615
- }, [userChainId]);
2616
- return /* @__PURE__ */ jsxs18(
2617
- "form",
2618
- {
2619
- className: "flex flex-col gap-5",
2620
- onSubmit: async (event) => {
2621
- event.preventDefault();
2622
- try {
2623
- await onSubmit();
2624
- if (isMounted()) {
2625
- setAmount(void 0);
2626
- if (amountInputRef.current) {
2627
- amountInputRef.current.value = "";
2628
- }
2629
- }
2630
- } catch (error2) {
2631
- console.error("Error during deposit", error2);
2632
- } finally {
2633
- amountInputRef.current?.focus();
2634
- }
2635
- },
2636
- children: [
2637
- /* @__PURE__ */ jsxs18("div", { className: "flex gap-2", children: [
2638
- /* @__PURE__ */ jsx30(ChainSelect, { value: sourceChain.id, onChange: setSourceChainId }),
2639
- /* @__PURE__ */ jsx30(AmountInput, { ref: amountInputRef, initialAmount: amount, onChange: setAmount })
2640
- ] }),
2641
- /* @__PURE__ */ jsxs18(
2642
- "dl",
2643
- {
2644
- className: twMerge15(
2645
- "grid grid-cols-2 divide-y text-sm leading-loose [&_>_:is(dt,dd)]:px-1 [&_>_dd]:text-right",
2646
- "divide-neutral-200 text-neutral-500",
2647
- "dark:divide-neutral-700 dark:text-neutral-400"
2648
- ),
2649
- children: [
2650
- /* @__PURE__ */ jsx30("dt", { children: "Available to deposit" }),
2651
- /* @__PURE__ */ jsx30("dd", { children: balance.isSuccess ? /* @__PURE__ */ jsx30(Balance, { wei: balance.data.value }) : balance.isError ? /* @__PURE__ */ jsx30("span", { title: String(balance.error), children: /* @__PURE__ */ jsx30(WarningIcon, { className: "inline-block text-amber-500" }) }) : balance.isLoading ? /* @__PURE__ */ jsx30(PendingIcon, { className: "inline-block text-xs" }) : null }),
2652
- /* @__PURE__ */ jsx30("dt", { children: "Gas balance after deposit" }),
2653
- /* @__PURE__ */ jsx30("dd", { children: /* @__PURE__ */ jsx30(Balance, { wei: (quarryBalance.data ?? 0n) + (amount ?? 0n) }) }),
2654
- /* @__PURE__ */ jsx30("dt", { children: "Estimated fee" }),
2655
- /* @__PURE__ */ jsx30("dd", { children: estimatedFee.fee ? /* @__PURE__ */ jsxs18(Fragment4, { children: [
2656
- formatGas(estimatedFee.fee),
2657
- " gwei"
2658
- ] }) : estimatedFee.error ? /* @__PURE__ */ jsx30("span", { title: String(estimatedFee.error), children: /* @__PURE__ */ jsx30(WarningIcon, { className: "inline-block text-amber-500" }) }) : estimatedFee.isLoading ? /* @__PURE__ */ jsx30(PendingIcon, { className: "inline-block text-xs" }) : null }),
2659
- /* @__PURE__ */ jsx30("dt", { children: "Time to deposit" }),
2660
- /* @__PURE__ */ jsx30("dd", { children: estimatedTime })
2661
- ]
2662
- }
2663
- ),
2664
- hasMinimumBalance ? submitButton : /* @__PURE__ */ jsx30(SubmitButton, { disabled: true, children: "Not enough funds" })
2665
- ]
2666
- }
2667
- );
2668
- }
2669
-
2670
- // src/onboarding/deposit/useDeposits.ts
2671
- import { createStore as createStore4 } from "zustand/vanilla";
2672
- import { useStore as useStore2 } from "zustand";
2673
- import { useCallback as useCallback2, useMemo as useMemo3 } from "react";
2674
- var store4 = createStore4(() => ({
2675
- count: 0,
2676
- deposits: []
2677
- }));
2678
- function useDeposits() {
2679
- const deposits = useStore2(store4, (state) => state.deposits);
2680
- const addDeposit = useCallback2((transaction) => {
2681
- store4.setState((state) => {
2682
- if (transaction.type === "relay") {
2683
- const existingDeposit = state.deposits.find(
2684
- (deposit) => deposit.type === "relay" && deposit.requestId === transaction.requestId
2685
- );
2686
- if (existingDeposit) {
2687
- return state;
2688
- }
2689
- }
2690
- return {
2691
- count: state.count + 1,
2692
- deposits: [
2693
- ...state.deposits,
2694
- {
2695
- ...transaction,
2696
- uid: `deposit-${state.count}`
2697
- }
2698
- ]
2699
- };
2700
- });
2701
- }, []);
2702
- const removeDeposit = useCallback2((uid) => {
2703
- store4.setState((state) => ({
2704
- deposits: state.deposits.filter((deposit) => deposit.uid !== uid)
2705
- }));
2706
- }, []);
2707
- return useMemo3(
2708
- () => ({
2709
- deposits,
2710
- addDeposit,
2711
- removeDeposit
2712
- }),
2713
- [addDeposit, deposits, removeDeposit]
2714
- );
2715
- }
2716
-
2717
- // src/onboarding/deposit/DepositViaTransferForm.tsx
2718
- import { jsx as jsx31 } from "react/jsx-runtime";
2719
- function DepositViaTransferForm({ amount, setAmount, sourceChain, setSourceChainId }) {
2720
- const { chain } = useEntryKitConfig();
2721
- const paymaster = getPaymaster(chain);
2722
- const publicClient = usePublicClient();
2723
- const { address: userAddress } = useAccount5();
2724
- const { writeContractAsync } = useWriteContract();
2725
- const { addDeposit } = useDeposits();
2726
- if (!userAddress) {
2727
- throw new Error("User address not found");
2728
- }
2729
- const { data: gasPrice } = useQuery11({
2730
- queryKey: ["gasPrice", sourceChain.id],
2731
- queryFn: async () => {
2732
- if (!publicClient) throw new Error("Public client not available");
2733
- return publicClient.getGasPrice();
2734
- },
2735
- refetchInterval: 15e3,
2736
- enabled: !!publicClient
2737
- });
2738
- const { data: prepareData, error: prepareError } = usePrepareTransactionRequest({
2739
- to: paymaster?.address,
2740
- data: encodeFunctionData2({
2741
- abi: paymasterAbi,
2742
- functionName: "depositTo",
2743
- args: [userAddress]
2744
- }),
2745
- value: amount
2746
- });
2747
- const deposit = useMutation4({
2748
- mutationKey: ["depositViaTransfer", amount?.toString()],
2749
- mutationFn: async () => {
2750
- if (!paymaster) throw new Error("Paymaster not found");
2751
- if (!publicClient) throw new Error("Public client not found");
2752
- if (!amount) throw new Error("Amount cannot be 0");
2753
- try {
2754
- const hash = await writeContractAsync({
2755
- address: paymaster.address,
2756
- abi: paymasterAbi,
2757
- functionName: "depositTo",
2758
- args: [userAddress],
2759
- value: amount
2760
- });
2761
- const receipt = publicClient.waitForTransactionReceipt({ hash }).then((receipt2) => {
2762
- if (receipt2.status === "reverted") {
2763
- throw new Error("Transfer transaction reverted.");
2764
- }
2765
- return receipt2;
2766
- });
2767
- const pendingDeposit = {
2768
- type: "transfer",
2769
- amount,
2770
- chainL1Id: sourceChain.id,
2771
- chainL2Id: chain.id,
2772
- hash,
2773
- receipt,
2774
- start: /* @__PURE__ */ new Date(),
2775
- estimatedTime: 1e3 * 12,
2776
- isComplete: receipt.then(() => void 0)
2777
- };
2778
- addDeposit(pendingDeposit);
2779
- } catch (error2) {
2780
- console.error("Error while depositing via bridge", error2);
2781
- throw error2;
2782
- }
2783
- }
2784
- });
2785
- const estimatedFee = prepareData?.gas && gasPrice ? prepareData.gas * gasPrice : void 0;
2786
- return /* @__PURE__ */ jsx31(
2787
- DepositForm,
2788
- {
2789
- sourceChain,
2790
- setSourceChainId,
2791
- amount,
2792
- setAmount,
2793
- estimatedFee: {
2794
- fee: estimatedFee,
2795
- isLoading: !prepareData && !prepareError || !gasPrice,
2796
- error: prepareError instanceof Error ? prepareError : void 0
2797
- },
2798
- estimatedTime: "A few seconds",
2799
- onSubmit: async () => {
2800
- await deposit.mutateAsync();
2801
- },
2802
- submitButton: /* @__PURE__ */ jsx31(
2803
- SubmitButton,
2804
- {
2805
- variant: "primary",
2806
- amount,
2807
- chainId: sourceChain.id,
2808
- disabled: !!prepareError || !amount || !userAddress,
2809
- pending: deposit.isPending,
2810
- children: "Deposit"
2811
- }
2812
- )
2813
- }
2814
- );
2815
- }
2816
-
2817
- // src/onboarding/deposit/DepositViaRelayForm.tsx
2818
- import { encodeFunctionData as encodeFunctionData3 } from "viem";
2819
- import { useAccount as useAccount6, useWalletClient } from "wagmi";
2820
- import { useMutation as useMutation5, useQuery as useQuery12 } from "@tanstack/react-query";
2821
- import { jsx as jsx32 } from "react/jsx-runtime";
2822
- var ETH_ADDRESS = "0x0000000000000000000000000000000000000000";
2823
- function DepositViaRelayForm({ amount, setAmount, sourceChain, setSourceChainId }) {
2824
- const { chain, chainId: destinationChainId } = useEntryKitConfig();
2825
- const paymaster = getPaymaster(chain);
2826
- const { data: wallet } = useWalletClient();
2827
- const { address: userAddress } = useAccount6();
2828
- const { addDeposit } = useDeposits();
2829
- const { data: relay } = useRelay();
2830
- const relayClient = relay?.client;
2831
- const quote = useQuery12({
2832
- queryKey: ["relayBridgeQuote", sourceChain.id, amount?.toString()],
2833
- queryFn: async () => {
2834
- if (!relayClient) throw new Error("No Relay client found.");
2835
- if (!userAddress) throw new Error("No user address found.");
2836
- const result = await relayClient.actions.getQuote({
2837
- chainId: sourceChain.id,
2838
- toChainId: destinationChainId,
2839
- currency: ETH_ADDRESS,
2840
- toCurrency: ETH_ADDRESS,
2841
- amount: amount?.toString(),
2842
- tradeType: "EXACT_OUTPUT",
2843
- recipient: paymaster?.address,
2844
- wallet,
2845
- txs: [
2846
- {
2847
- to: paymaster?.address,
2848
- data: encodeFunctionData3({
2849
- abi: paymasterAbi,
2850
- functionName: "depositTo",
2851
- args: [userAddress]
2852
- }),
2853
- value: amount?.toString()
2854
- }
2855
- ]
2856
- });
2857
- if (!result) {
2858
- throw new Error("Failed to get relay quote");
2859
- }
2860
- return result;
2861
- },
2862
- retry: 1,
2863
- refetchInterval: 15e3,
2864
- enabled: !!amount && !!userAddress && !!relayClient
2865
- });
2866
- const deposit = useMutation5({
2867
- mutationKey: ["depositViaRelay", sourceChain.id, amount?.toString()],
2868
- mutationFn: async ({ quote: quote2, amount: amount2 }) => {
2869
- if (!relayClient) throw new Error("No Relay client found.");
2870
- if (!wallet) throw new Error("No wallet found.");
2871
- try {
2872
- return new Promise((resolve) => {
2873
- const pendingDeposit = relayClient.actions.execute({
2874
- quote: quote2,
2875
- wallet,
2876
- onProgress(progress) {
2877
- const currentStep = progress.currentStep;
2878
- const requestId = currentStep?.requestId;
2879
- const currentState = currentStep?.items[0]?.progressState;
2880
- if (requestId && currentState === "validating") {
2881
- addDeposit({
2882
- type: "relay",
2883
- requestId,
2884
- amount: amount2,
2885
- chainL1Id: sourceChain.id,
2886
- chainL2Id: destinationChainId,
2887
- start: /* @__PURE__ */ new Date(),
2888
- estimatedTime: 1e3 * 30,
2889
- depositPromise: pendingDeposit,
2890
- isComplete: pendingDeposit.then(() => void 0)
2891
- });
2892
- resolve(void 0);
2893
- }
2894
- }
2895
- });
2896
- });
2897
- } catch (error2) {
2898
- console.error("Error while depositing via Relay", error2);
2899
- throw error2;
2900
- }
2901
- }
2902
- });
2903
- const fees = quote.data?.fees;
2904
- const gasFee = BigInt(fees?.gas?.amount ?? 0);
2905
- const relayerFee = BigInt(fees?.relayer?.amount ?? 0);
2906
- const fee = gasFee + relayerFee;
2907
- return /* @__PURE__ */ jsx32(
2908
- DepositForm,
2909
- {
2910
- sourceChain,
2911
- setSourceChainId,
2912
- amount,
2913
- setAmount,
2914
- estimatedFee: {
2915
- fee: fee != null ? BigInt(fee) : void 0,
2916
- isLoading: quote.isLoading,
2917
- error: quote.error instanceof Error ? quote.error : void 0
2918
- },
2919
- estimatedTime: "A few seconds",
2920
- onSubmit: async () => {
2921
- if (!quote.data || !amount) return;
2922
- await deposit.mutateAsync({ quote: quote.data, amount });
2923
- },
2924
- submitButton: /* @__PURE__ */ jsx32(
2925
- SubmitButton,
2926
- {
2927
- variant: "primary",
2928
- amount,
2929
- chainId: sourceChain.id,
2930
- disabled: quote.isError || !amount,
2931
- pending: deposit.isPending,
2932
- children: "Deposit"
2933
- }
2934
- )
2935
- }
2936
- );
2937
- }
2938
-
2939
- // src/onboarding/deposit/Deposits.tsx
2940
- import { useEffect as useEffect13 } from "react";
2941
- import { useQuery as useQuery15, useQueryClient as useQueryClient7 } from "@tanstack/react-query";
2942
-
2943
- // src/onboarding/deposit/TransferDepositStatus.tsx
2944
- import { useQuery as useQuery13 } from "@tanstack/react-query";
2945
-
2946
- // src/onboarding/deposit/DepositStatus.tsx
2947
- import { useEffect as useEffect12, useState as useState4 } from "react";
2948
- import { twMerge as twMerge16 } from "tailwind-merge";
2949
-
2950
- // src/icons/CloseIcon.tsx
2951
- import { jsx as jsx33 } from "react/jsx-runtime";
2952
- function CloseIcon(props) {
2953
- return /* @__PURE__ */ jsx33(IconSVG, { strokeWidth: "2", stroke: "currentColor", ...props, children: /* @__PURE__ */ jsx33(
2954
- "path",
2955
- {
2956
- d: "M6 18L18 6M6 6L18 18",
2957
- fill: "none",
2958
- stroke: "currentColor",
2959
- strokeWidth: "2",
2960
- strokeLinecap: "round",
2961
- strokeLinejoin: "round"
2962
- }
2963
- ) });
2964
- }
2965
-
2966
- // src/onboarding/deposit/DepositStatus.tsx
2967
- import { jsx as jsx34, jsxs as jsxs19 } from "react/jsx-runtime";
2968
- function DepositStatus({ status, progress, children, onDismiss }) {
2969
- const [appear, setAppear] = useState4(false);
2970
- useEffect12(() => {
2971
- setAppear(true);
2972
- }, []);
2973
- return /* @__PURE__ */ jsxs19("div", { className: "group bg-white dark:bg-neutral-900 flex flex-col animate-in fade-in slide-in-from-bottom-2 animate-out fade-out", children: [
2974
- /* @__PURE__ */ jsxs19("div", { className: "py-1 text-sm flex items-center gap-2", children: [
2975
- /* @__PURE__ */ jsx34("div", { className: "flex-grow", children }),
2976
- /* @__PURE__ */ jsxs19("div", { className: "flex-shrink-0 grid", children: [
2977
- /* @__PURE__ */ jsx34("span", { className: "col-start-1 row-start-1 transition opacity-100 group-hover:opacity-0 group-hover:pointer-events-none", children: status === "success" ? /* @__PURE__ */ jsx34(CheckIcon, { className: "text-green-600" }) : status === "error" ? /* @__PURE__ */ jsx34(WarningIcon, { className: "text-amber-500" }) : /* @__PURE__ */ jsx34(PendingIcon, { className: "text-neutral-400 dark:text-neutral-500 transition" }) }),
2978
- /* @__PURE__ */ jsx34(
2979
- "button",
2980
- {
2981
- type: "button",
2982
- className: twMerge16(
2983
- "col-start-1 row-start-1 flex items-center justify-center transition",
2984
- "opacity-0 pointer-events-none",
2985
- "group-hover:opacity-100 group-hover:pointer-events-auto",
2986
- "text-neutral-400 hover:text-black",
2987
- "dark:text-neutral-500 dark:hover:text-white"
2988
- ),
2989
- title: "Dismiss",
2990
- onClick: onDismiss,
2991
- children: /* @__PURE__ */ jsx34(CloseIcon, {})
2992
- }
2993
- )
2994
- ] })
2995
- ] }),
2996
- /* @__PURE__ */ jsx34("div", { className: "w-full h-[2px] -mt-full overflow-clip", children: /* @__PURE__ */ jsx34(
2997
- "div",
2998
- {
2999
- className: twMerge16(
3000
- "w-full h-full transition ease-linear",
3001
- status === "success" ? "bg-green-500 dark:bg-green-600" : status === "error" ? "bg-red-500 dark:bg-red-600" : "bg-blue-500 dark:bg-blue-600",
3002
- status === "pending" ? "opacity-100" : "opacity-0"
3003
- ),
3004
- style: status === "pending" ? {
3005
- transform: appear ? `translateX(0)` : "translate(-100%)",
3006
- transitionDuration: `${progress.duration}ms`,
3007
- transitionDelay: `-${Math.min(progress.duration, progress.elapsed)}ms`
3008
- } : void 0
3009
- }
3010
- ) })
3011
- ] });
3012
- }
3013
-
3014
- // src/onboarding/deposit/TransferDepositStatus.tsx
3015
- import { useChains as useChains2 } from "wagmi";
3016
- import { Fragment as Fragment5, jsx as jsx35, jsxs as jsxs20 } from "react/jsx-runtime";
3017
- function TransferDepositStatus({
3018
- amount,
3019
- chainL1Id,
3020
- hash,
3021
- receipt: receiptPromise,
3022
- start,
3023
- estimatedTime,
3024
- onDismiss
3025
- }) {
3026
- const chains = useChains2();
3027
- const chain = chains.find((chain2) => chain2.id === chainL1Id);
3028
- const receipt = useQuery13({
3029
- queryKey: ["transferDepositStatus", hash],
3030
- queryFn: () => receiptPromise
3031
- });
3032
- return /* @__PURE__ */ jsx35(
3033
- DepositStatus,
3034
- {
3035
- status: receipt.status,
3036
- progress: {
3037
- duration: estimatedTime,
3038
- elapsed: Math.min(estimatedTime, Date.now() - start.getTime())
3039
- },
3040
- onDismiss,
3041
- children: (() => {
3042
- const blockExplorer = chain.blockExplorers?.default.url;
3043
- if (receipt.status === "pending") {
3044
- return /* @__PURE__ */ jsxs20(Fragment5, { children: [
3045
- "Confirming deposit on",
3046
- " ",
3047
- /* @__PURE__ */ jsx35(
3048
- "a",
3049
- {
3050
- href: blockExplorer ? `${blockExplorer}/tx/${hash}` : void 0,
3051
- target: "_blank",
3052
- rel: "noreferrer noopener",
3053
- children: chain.name
3054
- }
3055
- ),
3056
- "\u2026"
3057
- ] });
3058
- }
3059
- if (receipt.status === "error") {
3060
- return /* @__PURE__ */ jsxs20(Fragment5, { children: [
3061
- "Could not find deposit on",
3062
- " ",
3063
- /* @__PURE__ */ jsx35(
3064
- "a",
3065
- {
3066
- href: blockExplorer ? `${blockExplorer}/tx/${hash}` : void 0,
3067
- target: "_blank",
3068
- rel: "noreferrer noopener",
3069
- children: chain.name
3070
- }
3071
- ),
3072
- "."
3073
- ] });
3074
- }
3075
- return /* @__PURE__ */ jsxs20(Fragment5, { children: [
3076
- "Successfully",
3077
- " ",
3078
- /* @__PURE__ */ jsx35(
3079
- "a",
3080
- {
3081
- href: blockExplorer ? `${blockExplorer}/tx/${receipt.data.transactionHash}` : void 0,
3082
- target: "_blank",
3083
- rel: "noreferrer noopener",
3084
- children: "deposited"
3085
- }
3086
- ),
3087
- " ",
3088
- /* @__PURE__ */ jsx35(Balance, { wei: amount })
3089
- ] });
3090
- })()
3091
- }
3092
- );
3093
- }
3094
-
3095
- // src/onboarding/deposit/RelayDepositStatus.tsx
3096
- import { useQuery as useQuery14 } from "@tanstack/react-query";
3097
- import { useChains as useChains3 } from "wagmi";
3098
- import { Fragment as Fragment6, jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
3099
- function RelayDepositStatus({
3100
- amount,
3101
- chainL1Id,
3102
- chainL2Id,
3103
- start,
3104
- estimatedTime,
3105
- depositPromise,
3106
- onDismiss
3107
- }) {
3108
- const chains = useChains3();
3109
- const chainL1 = chains.find((chain) => chain.id === chainL1Id);
3110
- const chainL2 = chains.find((chain) => chain.id === chainL2Id);
3111
- const deposit = useQuery14({
3112
- queryKey: ["relayDepositPromise", chainL1Id, chainL2Id, amount.toString(), start.toISOString()],
3113
- queryFn: () => depositPromise
3114
- });
3115
- return /* @__PURE__ */ jsx36(
3116
- DepositStatus,
3117
- {
3118
- status: deposit.status,
3119
- progress: {
3120
- duration: estimatedTime,
3121
- elapsed: Math.min(estimatedTime, Date.now() - start.getTime())
3122
- },
3123
- onDismiss,
3124
- children: (() => {
3125
- if (deposit.status === "pending") {
3126
- return /* @__PURE__ */ jsxs21(Fragment6, { children: [
3127
- "Relay bridge deposit pending on ",
3128
- chainL1.name,
3129
- "\u2026"
3130
- ] });
3131
- }
3132
- if (deposit.status === "error") {
3133
- return /* @__PURE__ */ jsxs21(Fragment6, { children: [
3134
- "Relay bridge deposit to ",
3135
- chainL2.name,
3136
- " failed."
3137
- ] });
3138
- }
3139
- return /* @__PURE__ */ jsxs21(Fragment6, { children: [
3140
- "Successfully bridged ",
3141
- /* @__PURE__ */ jsx36(Balance, { wei: amount }),
3142
- " to ",
3143
- chainL2.name,
3144
- "!"
3145
- ] });
3146
- })()
3147
- }
3148
- );
3149
- }
3150
-
3151
- // src/onboarding/deposit/Deposits.tsx
3152
- import { useAccount as useAccount7, useClient as useClient11 } from "wagmi";
3153
- import { jsx as jsx37 } from "react/jsx-runtime";
3154
- function Deposits() {
3155
- const queryClient = useQueryClient7();
3156
- const { chainId } = useEntryKitConfig();
3157
- const client = useClient11({ chainId });
3158
- const { address: userAddress } = useAccount7();
3159
- const { deposits, removeDeposit } = useDeposits();
3160
- const { data: isComplete } = useQuery15({
3161
- queryKey: ["depositsComplete", deposits.map((deposit) => deposit.uid)],
3162
- queryFn: async () => {
3163
- if (!deposits.length) return false;
3164
- await Promise.all(deposits.map((deposit) => deposit.isComplete));
3165
- return true;
3166
- }
3167
- });
3168
- useEffect13(() => {
3169
- if (isComplete) {
3170
- queryClient.invalidateQueries({ queryKey: ["balance"] });
3171
- queryClient.invalidateQueries({ queryKey: ["getBalance", client?.uid, userAddress] });
3172
- }
3173
- }, [client?.uid, isComplete, queryClient, userAddress]);
3174
- if (!deposits.length) return null;
3175
- return /* @__PURE__ */ jsx37("div", { className: "flex flex-col gap-1 mt-4", children: deposits.map((deposit) => {
3176
- if (deposit.type === "transfer") {
3177
- return /* @__PURE__ */ jsx37(TransferDepositStatus, { ...deposit, onDismiss: () => removeDeposit(deposit.uid) }, deposit.uid);
3178
- } else if (deposit.type === "relay") {
3179
- return /* @__PURE__ */ jsx37(RelayDepositStatus, { ...deposit, onDismiss: () => removeDeposit(deposit.uid) }, deposit.uid);
3180
- }
3181
- }) });
3182
- }
3183
-
3184
- // src/onboarding/deposit/DepositFormContainer.tsx
3185
- import { jsx as jsx38, jsxs as jsxs22 } from "react/jsx-runtime";
3186
- function DepositFormContainer() {
3187
- const { chainId: destinationChainId } = useEntryKitConfig();
3188
- const chainId = useChainId();
3189
- const chains = useChains4();
3190
- const [amount, setAmount] = useState5(void 0);
3191
- const [sourceChainId, setSourceChainId] = useState5(chainId);
3192
- const sourceChain = chains.find(({ id }) => id === sourceChainId);
3193
- return /* @__PURE__ */ jsxs22("div", { className: "pt-10 pb-2", children: [
3194
- destinationChainId === sourceChainId ? /* @__PURE__ */ jsx38(
3195
- DepositViaTransferForm,
3196
- {
3197
- amount,
3198
- setAmount,
3199
- sourceChain,
3200
- setSourceChainId
3201
- }
3202
- ) : /* @__PURE__ */ jsx38(
3203
- DepositViaRelayForm,
3204
- {
3205
- amount,
3206
- setAmount,
3207
- sourceChain,
3208
- setSourceChainId
3209
- }
3210
- ),
3211
- /* @__PURE__ */ jsx38(Deposits, {})
3212
- ] });
3213
- }
3214
-
3215
- // src/icons/ArrowLeftIcon.tsx
3216
- import { jsx as jsx39 } from "react/jsx-runtime";
3217
- function ArrowLeftIcon(props) {
3218
- return /* @__PURE__ */ jsx39(IconSVG, { ...props, children: /* @__PURE__ */ jsx39(
3219
- "path",
3220
- {
3221
- d: "M19 12H5M12 19l-7-7 7-7",
3222
- fill: "none",
3223
- stroke: "currentColor",
3224
- strokeWidth: "2",
3225
- strokeLinecap: "round",
3226
- strokeLinejoin: "round"
3227
- }
3228
- ) });
3229
- }
3230
-
3231
- // src/onboarding/quarry/GasBalance.tsx
3232
- import { useEffect as useEffect14 } from "react";
3233
- import { useQueryClient as useQueryClient8 } from "@tanstack/react-query";
3234
- import { Fragment as Fragment7, jsx as jsx40, jsxs as jsxs23 } from "react/jsx-runtime";
3235
- function GasBalance2({ isActive, isExpanded, isFocused, setFocused, userAddress }) {
3236
- const queryClient = useQueryClient8();
3237
- const balance = useShowQueryError(useBalance(userAddress));
3238
- const prevBalance = usePrevious(balance.data || 0n);
3239
- useEffect14(() => {
3240
- if (balance.data != null && prevBalance === 0n && balance.data > 0n) {
3241
- queryClient.invalidateQueries({ queryKey: ["getPrerequisites"] });
3242
- setFocused(false);
3243
- }
3244
- }, [balance.data, prevBalance, setFocused, queryClient, userAddress]);
3245
- if (isFocused) {
3246
- return /* @__PURE__ */ jsxs23(Fragment7, { children: [
3247
- isFocused && /* @__PURE__ */ jsx40("div", { className: "absolute top-0 left-0", children: /* @__PURE__ */ jsx40(
3248
- "div",
3249
- {
3250
- className: "flex items-center justify-center w-10 h-10 text-white/20 hover:text-white/40 cursor-pointer",
3251
- onClick: () => setFocused(false),
3252
- children: /* @__PURE__ */ jsx40(ArrowLeftIcon, { className: "m-0" })
3253
- }
3254
- ) }),
3255
- /* @__PURE__ */ jsx40(DepositFormContainer, {})
3256
- ] });
3257
- }
3258
- return /* @__PURE__ */ jsxs23("div", { className: "flex flex-col gap-4", children: [
3259
- /* @__PURE__ */ jsxs23("div", { className: "flex justify-between gap-4", children: [
3260
- /* @__PURE__ */ jsxs23("div", { children: [
3261
- /* @__PURE__ */ jsx40("div", { children: "Gas balance" }),
3262
- /* @__PURE__ */ jsx40("div", { className: "font-mono text-white", children: balance.data != null ? /* @__PURE__ */ jsx40(Balance, { wei: balance.data }) : /* @__PURE__ */ jsx40(PendingIcon, { className: "text-sm" }) })
3263
- ] }),
3264
- /* @__PURE__ */ jsx40(
3265
- Button,
3266
- {
3267
- variant: isActive ? "primary" : "tertiary",
3268
- className: "flex-shrink-0 text-sm p-1 w-28",
3269
- autoFocus: isActive || isExpanded,
3270
- pending: balance.status === "pending",
3271
- onClick: () => setFocused(true),
3272
- children: "Top up"
3273
- }
3274
- )
3275
- ] }),
3276
- isExpanded ? /* @__PURE__ */ jsx40("p", { className: "text-sm", children: "Your gas balance is used to pay for onchain computation." }) : null
3277
- ] });
3278
- }
3279
-
3280
- // src/onboarding/ConnectedSteps.tsx
3281
- import { jsx as jsx41 } from "react/jsx-runtime";
3282
- function ConnectedSteps({ userClient, initialUserAddress }) {
3283
- const { chain } = useEntryKitConfig();
3284
- const paymaster = getPaymaster(chain);
3285
- const [focusedId, setFocusedId] = useState6(null);
3286
- const userAddress = userClient.account.address;
3287
- const { data: prerequisites, error: prerequisitesError } = usePrerequisites(userAddress);
3288
- useEffect15(() => {
3289
- if (prerequisitesError) {
3290
- console.error("Could not get prerequisites", prerequisitesError);
3291
- }
3292
- }, [prerequisitesError]);
3293
- const { closeAccountModal } = useAccountModal();
3294
- const isNewConnection = userAddress !== initialUserAddress;
3295
- const initialPrerequisites = useRef4(prerequisites);
3296
- useEffect15(() => {
3297
- if (prerequisites == null) return;
3298
- if (initialPrerequisites.current == null) {
3299
- initialPrerequisites.current = prerequisites;
3300
- }
3301
- if (prerequisites.complete) {
3302
- if (isNewConnection || !initialPrerequisites.current.complete) {
3303
- closeAccountModal();
3304
- }
1943
+ if (prerequisites.complete) {
1944
+ if (isNewConnection || !initialPrerequisites.current.complete) {
1945
+ closeAccountModal();
1946
+ }
3305
1947
  }
3306
1948
  }, [closeAccountModal, isNewConnection, prerequisites]);
3307
- const { sessionAddress, hasAllowance, isSpender, hasDelegation, hasGasBalance, hasQuarryGasBalance } = prerequisites ?? {};
3308
- const steps = useMemo4(() => {
1949
+ const { sessionAddress, hasAllowance, isSpender, hasDelegation, hasGasBalance } = prerequisites ?? {};
1950
+ const steps = useMemo2(() => {
3309
1951
  if (!userAddress) {
3310
1952
  return [
3311
1953
  {
@@ -3319,7 +1961,7 @@ function ConnectedSteps({ userClient, initialUserAddress }) {
3319
1961
  {
3320
1962
  id: "wallet",
3321
1963
  isComplete: true,
3322
- content: (props) => /* @__PURE__ */ jsx41(Wallet, { ...props, userAddress })
1964
+ content: (props) => /* @__PURE__ */ jsx17(Wallet, { ...props, userAddress })
3323
1965
  }
3324
1966
  ];
3325
1967
  if (!paymaster) {
@@ -3327,138 +1969,142 @@ function ConnectedSteps({ userClient, initialUserAddress }) {
3327
1969
  steps2.push({
3328
1970
  id: "gasBalance",
3329
1971
  isComplete: !!hasGasBalance,
3330
- content: (props) => /* @__PURE__ */ jsx41(GasBalance, { ...props, sessionAddress })
1972
+ content: (props) => /* @__PURE__ */ jsx17(GasBalance, { ...props, sessionAddress })
3331
1973
  });
3332
1974
  }
3333
1975
  } else if (paymaster.type === "quarry") {
3334
- if (paymaster.isGasPass) {
3335
- steps2.push({
3336
- id: "allowance",
3337
- isComplete: !!hasAllowance,
3338
- content: (props) => /* @__PURE__ */ jsx41(Allowance, { ...props, userAddress })
3339
- });
3340
- } else {
3341
- steps2.push({
3342
- id: "gasBalanceQuarry",
3343
- isComplete: !!hasQuarryGasBalance,
3344
- content: (props) => /* @__PURE__ */ jsx41(GasBalance2, { ...props, userAddress })
3345
- });
3346
- }
1976
+ steps2.push({
1977
+ id: "allowance",
1978
+ isComplete: !!hasAllowance,
1979
+ content: (props) => /* @__PURE__ */ jsx17(Allowance, { ...props, userAddress })
1980
+ });
3347
1981
  }
3348
1982
  steps2.push({
3349
1983
  id: "session",
3350
1984
  isComplete: !!isSpender && !!hasDelegation,
3351
- content: (props) => /* @__PURE__ */ jsx41(Session, { ...props, userClient, registerSpender: !isSpender, registerDelegation: !hasDelegation })
1985
+ content: (props) => /* @__PURE__ */ jsx17(Session, { ...props, userClient, registerSpender: !isSpender, registerDelegation: !hasDelegation })
3352
1986
  });
3353
1987
  return steps2;
3354
- }, [
3355
- hasAllowance,
3356
- hasDelegation,
3357
- hasGasBalance,
3358
- hasQuarryGasBalance,
3359
- isSpender,
3360
- paymaster,
3361
- sessionAddress,
3362
- userAddress,
3363
- userClient
3364
- ]);
3365
- const [selectedStepId] = useState6(null);
1988
+ }, [hasAllowance, hasDelegation, hasGasBalance, isSpender, paymaster, sessionAddress, userAddress, userClient]);
1989
+ const [selectedStepId] = useState3(null);
3366
1990
  const nextStep = steps.find((step) => step.content != null && !step.isComplete);
3367
1991
  const completedSteps = steps.filter((step) => step.isComplete);
3368
1992
  const activeStep = (selectedStepId != null ? steps.find((step) => step.id === selectedStepId) : null) ?? nextStep ?? (completedSteps.length < steps.length ? completedSteps.at(-1) : null);
3369
1993
  const activeStepIndex = activeStep ? steps.indexOf(activeStep) : -1;
3370
- return /* @__PURE__ */ jsx41(
1994
+ return /* @__PURE__ */ jsx17(
3371
1995
  "div",
3372
1996
  {
3373
- className: twMerge17(
3374
- "px-8 flex flex-col",
3375
- focusedId && "divide-y divide-neutral-800",
1997
+ className: twMerge7(
1998
+ // steps.length === 2 ? "min-h-[22rem]" : "min-h-[26rem]",
1999
+ "px-8 flex flex-col divide-y divide-neutral-800",
3376
2000
  "animate-in animate-duration-300 fade-in slide-in-from-bottom-8"
3377
2001
  ),
3378
2002
  children: steps.map((step, i) => {
3379
2003
  const isActive = step === activeStep;
3380
2004
  const isExpanded = isActive || completedSteps.length === steps.length;
3381
2005
  const isDisabled = !step.isComplete && activeStepIndex !== -1 && i > activeStepIndex;
3382
- const isFocused = focusedId === step.id;
3383
- const content = step.content({
3384
- isActive,
3385
- isExpanded,
3386
- isFocused,
3387
- setFocused: (focused) => setFocusedId(focused ? step.id : null)
3388
- });
3389
- if (focusedId) {
3390
- if (step.id === focusedId) {
3391
- return content;
3392
- }
3393
- return null;
3394
- }
3395
- return /* @__PURE__ */ jsx41("div", { className: twMerge17("py-8 flex flex-col justify-center", isActive ? "flex-grow" : null), children: /* @__PURE__ */ jsx41("div", { className: twMerge17("flex flex-col", isDisabled ? "opacity-30 pointer-events-none" : null), children: content }) }, step.id);
2006
+ return /* @__PURE__ */ jsx17("div", { className: twMerge7("py-8 flex flex-col justify-center", isActive ? "flex-grow" : null), children: /* @__PURE__ */ jsx17("div", { className: twMerge7("flex flex-col", isDisabled ? "opacity-30 pointer-events-none" : null), children: step.content({ isActive, isExpanded }) }) }, step.id);
3396
2007
  })
3397
2008
  }
3398
2009
  );
3399
2010
  }
3400
2011
 
3401
2012
  // src/AccountModalContent.tsx
3402
- import { useRef as useRef5 } from "react";
3403
- import { jsx as jsx42 } from "react/jsx-runtime";
2013
+ import { useRef as useRef3 } from "react";
2014
+ import { jsx as jsx18 } from "react/jsx-runtime";
3404
2015
  function AccountModalContent() {
3405
2016
  const { chainId } = useEntryKitConfig();
3406
2017
  const userClient = useConnectorClient({ chainId });
3407
- const { address: userAddress } = useAccount8();
3408
- const initialUserAddress = useRef5(userAddress);
2018
+ const { address: userAddress } = useAccount2();
2019
+ const initialUserAddress = useRef3(userAddress);
3409
2020
  if (userClient.status !== "success") {
3410
- return /* @__PURE__ */ jsx42(ConnectWallet, {});
2021
+ return /* @__PURE__ */ jsx18(ConnectWallet, {});
3411
2022
  }
3412
- return /* @__PURE__ */ jsx42(ConnectedSteps, { userClient: userClient.data, initialUserAddress: initialUserAddress.current });
2023
+ return /* @__PURE__ */ jsx18(ConnectedSteps, { userClient: userClient.data, initialUserAddress: initialUserAddress.current });
3413
2024
  }
3414
2025
 
3415
2026
  // src/AccountModal.tsx
3416
2027
  import { DialogClose } from "@radix-ui/react-dialog";
2028
+
2029
+ // src/icons/IconSVG.tsx
2030
+ import { twMerge as twMerge8 } from "tailwind-merge";
2031
+ import { jsx as jsx19 } from "react/jsx-runtime";
2032
+ function IconSVG({ className, children, ...props }) {
2033
+ return /* @__PURE__ */ jsx19(
2034
+ "svg",
2035
+ {
2036
+ xmlns: "http://www.w3.org/2000/svg",
2037
+ viewBox: "0 0 24 24",
2038
+ fill: "currentColor",
2039
+ className: twMerge8("-my-[0.125em] h-[1.25em] w-[1.25em]", className),
2040
+ ...props,
2041
+ children
2042
+ }
2043
+ );
2044
+ }
2045
+
2046
+ // src/icons/CloseIcon.tsx
2047
+ import { jsx as jsx20 } from "react/jsx-runtime";
2048
+ function CloseIcon(props) {
2049
+ return /* @__PURE__ */ jsx20(IconSVG, { strokeWidth: "2", stroke: "currentColor", ...props, children: /* @__PURE__ */ jsx20(
2050
+ "path",
2051
+ {
2052
+ d: "M6 18L18 6M6 6L18 18",
2053
+ fill: "none",
2054
+ stroke: "currentColor",
2055
+ strokeWidth: "2",
2056
+ strokeLinecap: "round",
2057
+ strokeLinejoin: "round"
2058
+ }
2059
+ ) });
2060
+ }
2061
+
2062
+ // src/AccountModal.tsx
3417
2063
  import { ErrorBoundary } from "react-error-boundary";
3418
2064
 
3419
2065
  // src/errors/ErrorOverlay.tsx
3420
2066
  import { wait } from "@latticexyz/common/utils";
3421
- import { useEffect as useEffect16 } from "react";
3422
- import { twMerge as twMerge18 } from "tailwind-merge";
3423
- import { Fragment as Fragment8, jsx as jsx43, jsxs as jsxs24 } from "react/jsx-runtime";
2067
+ import { useEffect as useEffect9 } from "react";
2068
+ import { twMerge as twMerge9 } from "tailwind-merge";
2069
+ import { Fragment as Fragment2, jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
3424
2070
  function ErrorOverlay({ error: error2, retry, dismiss }) {
3425
- useEffect16(() => {
2071
+ useEffect9(() => {
3426
2072
  if (error2) {
3427
2073
  console.error(error2);
3428
2074
  }
3429
2075
  }, [error2]);
3430
- return /* @__PURE__ */ jsxs24("div", { className: "pointer-events-none absolute inset-0 overflow-clip", children: [
3431
- /* @__PURE__ */ jsx43(
2076
+ return /* @__PURE__ */ jsxs15("div", { className: "pointer-events-none absolute inset-0 overflow-clip", children: [
2077
+ /* @__PURE__ */ jsx21(
3432
2078
  "div",
3433
2079
  {
3434
- className: twMerge18(
2080
+ className: twMerge9(
3435
2081
  "absolute inset-0 bg-blue-700/60",
3436
2082
  "transition duration-300",
3437
2083
  error2 ? "opacity-100 pointer-events-auto" : "opacity-0"
3438
2084
  )
3439
2085
  }
3440
2086
  ),
3441
- /* @__PURE__ */ jsx43(
2087
+ /* @__PURE__ */ jsx21(
3442
2088
  "div",
3443
2089
  {
3444
- className: twMerge18(
2090
+ className: twMerge9(
3445
2091
  "absolute inset-0 pb-8",
3446
2092
  "transition duration-300",
3447
2093
  error2 ? "translate-y-0 opacity-100 pointer-events-auto" : "-translate-y-4 opacity-0"
3448
2094
  ),
3449
- children: error2 ? /* @__PURE__ */ jsx43(Fragment8, { children: /* @__PURE__ */ jsxs24("div", { className: "w-full max-h-full bg-blue-700 text-white/80 overflow-auto", children: [
3450
- /* @__PURE__ */ jsxs24("div", { className: "space-y-6 px-8 pt-8", children: [
3451
- /* @__PURE__ */ jsx43("div", { className: "text-white text-lg font-bold", children: "Oops! It broke :(" }),
3452
- /* @__PURE__ */ jsx43("div", { className: "font-mono text-xs whitespace-pre-wrap", children: error2.message.trim() }),
3453
- /* @__PURE__ */ jsx43("div", { className: "text-sm", children: "See the console for more info." })
2095
+ children: error2 ? /* @__PURE__ */ jsx21(Fragment2, { children: /* @__PURE__ */ jsxs15("div", { className: "w-full max-h-full bg-blue-700 text-white/80 overflow-auto", children: [
2096
+ /* @__PURE__ */ jsxs15("div", { className: "space-y-6 px-8 pt-8", children: [
2097
+ /* @__PURE__ */ jsx21("div", { className: "text-white text-lg font-bold", children: "Oops! It broke :(" }),
2098
+ /* @__PURE__ */ jsx21("div", { className: "font-mono text-xs whitespace-pre-wrap", children: error2.message.trim() }),
2099
+ /* @__PURE__ */ jsx21("div", { className: "text-sm", children: "See the console for more info." })
3454
2100
  ] }),
3455
- /* @__PURE__ */ jsxs24("div", { className: "pointer-events-none sticky bottom-0 left-0 -mt-2", children: [
3456
- /* @__PURE__ */ jsx43("div", { className: "w-full h-12 bg-gradient-to-b from-transparent to-blue-700" }),
3457
- retry ? /* @__PURE__ */ jsx43("div", { className: "bg-blue-700 text-center", children: /* @__PURE__ */ jsxs24(
2101
+ /* @__PURE__ */ jsxs15("div", { className: "pointer-events-none sticky bottom-0 left-0 -mt-2", children: [
2102
+ /* @__PURE__ */ jsx21("div", { className: "w-full h-12 bg-gradient-to-b from-transparent to-blue-700" }),
2103
+ retry ? /* @__PURE__ */ jsx21("div", { className: "bg-blue-700 text-center", children: /* @__PURE__ */ jsxs15(
3458
2104
  "button",
3459
2105
  {
3460
2106
  type: "button",
3461
- className: twMerge18(
2107
+ className: twMerge9(
3462
2108
  "pointer-events-auto group w-24 p-1 -translate-y-2 transition",
3463
2109
  "bg-blue-600 hover:bg-blue-500 aria-busy:bg-blue-500",
3464
2110
  "text-white text-sm font-medium",
@@ -3473,15 +2119,15 @@ function ErrorOverlay({ error: error2, retry, dismiss }) {
3473
2119
  }
3474
2120
  },
3475
2121
  children: [
3476
- /* @__PURE__ */ jsx43("span", { className: "group-aria-busy:hidden", children: "Retry" }),
3477
- /* @__PURE__ */ jsx43("span", { className: "hidden group-aria-busy:inline", children: "Retrying\u2026" })
2122
+ /* @__PURE__ */ jsx21("span", { className: "group-aria-busy:hidden", children: "Retry" }),
2123
+ /* @__PURE__ */ jsx21("span", { className: "hidden group-aria-busy:inline", children: "Retrying\u2026" })
3478
2124
  ]
3479
2125
  }
3480
- ) }) : dismiss ? /* @__PURE__ */ jsx43("div", { className: "bg-blue-700 text-center", children: /* @__PURE__ */ jsx43(
2126
+ ) }) : dismiss ? /* @__PURE__ */ jsx21("div", { className: "bg-blue-700 text-center", children: /* @__PURE__ */ jsx21(
3481
2127
  "button",
3482
2128
  {
3483
2129
  type: "button",
3484
- className: twMerge18(
2130
+ className: twMerge9(
3485
2131
  "pointer-events-auto group w-24 p-1 -translate-y-2 transition",
3486
2132
  "bg-blue-600 hover:bg-blue-500 aria-busy:bg-blue-500",
3487
2133
  "text-white text-sm font-medium",
@@ -3499,27 +2145,27 @@ function ErrorOverlay({ error: error2, retry, dismiss }) {
3499
2145
  }
3500
2146
 
3501
2147
  // src/errors/ErrorFallback.tsx
3502
- import { jsx as jsx44 } from "react/jsx-runtime";
2148
+ import { jsx as jsx22 } from "react/jsx-runtime";
3503
2149
  function ErrorFallback({ error: error2, resetErrorBoundary }) {
3504
- return /* @__PURE__ */ jsx44("div", { className: "h-64", children: /* @__PURE__ */ jsx44(ErrorOverlay, { error: error2, retry: resetErrorBoundary }) });
2150
+ return /* @__PURE__ */ jsx22("div", { className: "h-64", children: /* @__PURE__ */ jsx22(ErrorOverlay, { error: error2, retry: resetErrorBoundary }) });
3505
2151
  }
3506
2152
 
3507
2153
  // src/errors/ErrorsOverlay.tsx
3508
- import { useStore as useStore3 } from "zustand";
3509
- import { jsx as jsx45 } from "react/jsx-runtime";
2154
+ import { useStore as useStore2 } from "zustand";
2155
+ import { jsx as jsx23 } from "react/jsx-runtime";
3510
2156
  function ErrorsOverlay() {
3511
- const error2 = useStore3(store3, (state) => state.errors.at(0));
3512
- return /* @__PURE__ */ jsx45(ErrorOverlay, { error: error2?.error, retry: error2?.retry, dismiss: error2?.dismiss });
2157
+ const error2 = useStore2(store3, (state) => state.errors.at(0));
2158
+ return /* @__PURE__ */ jsx23(ErrorOverlay, { error: error2?.error, retry: error2?.retry, dismiss: error2?.dismiss });
3513
2159
  }
3514
2160
 
3515
2161
  // src/AccountModal.tsx
3516
- import { jsx as jsx46, jsxs as jsxs25 } from "react/jsx-runtime";
2162
+ import { jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
3517
2163
  function AccountModal() {
3518
2164
  const { accountModalOpen, toggleAccountModal } = useAccountModal();
3519
- return /* @__PURE__ */ jsx46(Modal, { open: accountModalOpen, onOpenChange: toggleAccountModal, children: accountModalOpen ? /* @__PURE__ */ jsxs25(
2165
+ return /* @__PURE__ */ jsx24(Modal, { open: accountModalOpen, onOpenChange: toggleAccountModal, children: accountModalOpen ? /* @__PURE__ */ jsxs16(
3520
2166
  "div",
3521
2167
  {
3522
- className: twMerge19(
2168
+ className: twMerge10(
3523
2169
  "relative py-2 ring-1",
3524
2170
  "bg-neutral-900 text-neutral-400 ring-neutral-700/50",
3525
2171
  "links:font-medium links:underline links:underline-offset-4",
@@ -3527,11 +2173,11 @@ function AccountModal() {
3527
2173
  "links:decoration-neutral-500 hover:links:decoration-orange-500"
3528
2174
  ),
3529
2175
  children: [
3530
- /* @__PURE__ */ jsxs25(ErrorBoundary, { FallbackComponent: ErrorFallback, children: [
3531
- /* @__PURE__ */ jsx46(AccountModalContent, {}),
3532
- /* @__PURE__ */ jsx46(ErrorsOverlay, {})
2176
+ /* @__PURE__ */ jsxs16(ErrorBoundary, { FallbackComponent: ErrorFallback, children: [
2177
+ /* @__PURE__ */ jsx24(AccountModalContent, {}),
2178
+ /* @__PURE__ */ jsx24(ErrorsOverlay, {})
3533
2179
  ] }),
3534
- /* @__PURE__ */ jsxs25(
2180
+ /* @__PURE__ */ jsxs16(
3535
2181
  "a",
3536
2182
  {
3537
2183
  href: "https://mud.dev",
@@ -3539,20 +2185,20 @@ function AccountModal() {
3539
2185
  rel: "noreferrer noopener",
3540
2186
  className: "group self-center p-3 flex items-center justify-center gap-2 links-unset text-sm font-mono transition text-neutral-400 hover:text-white",
3541
2187
  children: [
3542
- /* @__PURE__ */ jsx46("span", { className: "block w-4 h-4", children: /* @__PURE__ */ jsx46(Logo, { className: "w-full h-full text-orange-500 group-hover:rotate-90 transition duration-300" }) }),
3543
- /* @__PURE__ */ jsx46("span", { children: "Powered by MUD" })
2188
+ /* @__PURE__ */ jsx24("span", { className: "block w-4 h-4", children: /* @__PURE__ */ jsx24(Logo, { className: "w-full h-full text-orange-500 group-hover:rotate-90 transition duration-300" }) }),
2189
+ /* @__PURE__ */ jsx24("span", { children: "Powered by MUD" })
3544
2190
  ]
3545
2191
  }
3546
2192
  ),
3547
- /* @__PURE__ */ jsx46("div", { className: "absolute top-0 right-0", children: /* @__PURE__ */ jsx46(
2193
+ /* @__PURE__ */ jsx24("div", { className: "absolute top-0 right-0", children: /* @__PURE__ */ jsx24(
3548
2194
  DialogClose,
3549
2195
  {
3550
- className: twMerge19(
2196
+ className: twMerge10(
3551
2197
  "pointer-events-auto leading-none p-2 transition",
3552
2198
  "text-white/20 hover:text-white/40"
3553
2199
  ),
3554
2200
  title: "Close",
3555
- children: /* @__PURE__ */ jsx46(CloseIcon, { className: "m-0" })
2201
+ children: /* @__PURE__ */ jsx24(CloseIcon, { className: "m-0" })
3556
2202
  }
3557
2203
  ) })
3558
2204
  ]
@@ -3561,31 +2207,31 @@ function AccountModal() {
3561
2207
  }
3562
2208
 
3563
2209
  // src/EntryKitProvider.tsx
3564
- import { jsx as jsx47, jsxs as jsxs26 } from "react/jsx-runtime";
2210
+ import { jsx as jsx25, jsxs as jsxs17 } from "react/jsx-runtime";
3565
2211
  function EntryKitProvider({ config, children }) {
3566
- return /* @__PURE__ */ jsxs26(EntryKitConfigProvider, { config, children: [
2212
+ return /* @__PURE__ */ jsxs17(EntryKitConfigProvider, { config, children: [
3567
2213
  children,
3568
- /* @__PURE__ */ jsx47(AccountModal, {})
2214
+ /* @__PURE__ */ jsx25(AccountModal, {})
3569
2215
  ] });
3570
2216
  }
3571
2217
 
3572
2218
  // src/AccountButton.tsx
3573
- import { useAccount as useAccount9 } from "wagmi";
3574
- import { twMerge as twMerge21 } from "tailwind-merge";
2219
+ import { useAccount as useAccount3 } from "wagmi";
2220
+ import { twMerge as twMerge12 } from "tailwind-merge";
3575
2221
 
3576
2222
  // src/AccountName.tsx
3577
- import { twMerge as twMerge20 } from "tailwind-merge";
3578
- import { Fragment as Fragment9, jsx as jsx48, jsxs as jsxs27 } from "react/jsx-runtime";
2223
+ import { twMerge as twMerge11 } from "tailwind-merge";
2224
+ import { Fragment as Fragment3, jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
3579
2225
  function AccountName({ address }) {
3580
2226
  const { data: ens } = useENS(address);
3581
2227
  const avatar = usePreloadImage(ens?.avatar);
3582
- return /* @__PURE__ */ jsxs27(Fragment9, { children: [
3583
- /* @__PURE__ */ jsxs27("span", { className: "flex-shrink-0 w-6 h-6 -my-1 -mx-0.5 grid place-items-center", children: [
3584
- /* @__PURE__ */ jsx48(
2228
+ return /* @__PURE__ */ jsxs18(Fragment3, { children: [
2229
+ /* @__PURE__ */ jsxs18("span", { className: "flex-shrink-0 w-6 h-6 -my-1 -mx-0.5 grid place-items-center", children: [
2230
+ /* @__PURE__ */ jsx26(
3585
2231
  "img",
3586
2232
  {
3587
2233
  src: ens?.avatar && avatar.isSuccess ? ens.avatar : void 0,
3588
- className: twMerge20(
2234
+ className: twMerge11(
3589
2235
  "col-start-1 row-start-1",
3590
2236
  "inline-flex w-full h-full rounded-full bg-black/10 dark:bg-white/10 bg-cover bg-no-repeat bg-center",
3591
2237
  "transtion duration-300",
@@ -3593,10 +2239,10 @@ function AccountName({ address }) {
3593
2239
  )
3594
2240
  }
3595
2241
  ),
3596
- /* @__PURE__ */ jsx48(
2242
+ /* @__PURE__ */ jsx26(
3597
2243
  Logo,
3598
2244
  {
3599
- className: twMerge20(
2245
+ className: twMerge11(
3600
2246
  "col-start-1 row-start-1 text-orange-500",
3601
2247
  "transition duration-300",
3602
2248
  ens && (!ens.avatar || avatar.isError) ? "opacity-100" : "opacity-0"
@@ -3604,29 +2250,29 @@ function AccountName({ address }) {
3604
2250
  }
3605
2251
  )
3606
2252
  ] }),
3607
- /* @__PURE__ */ jsx48("span", { className: "flex-grow", children: ens?.name ?? /* @__PURE__ */ jsx48(TruncatedHex, { hex: address }) })
2253
+ /* @__PURE__ */ jsx26("span", { className: "flex-grow", children: ens?.name ?? /* @__PURE__ */ jsx26(TruncatedHex, { hex: address }) })
3608
2254
  ] });
3609
2255
  }
3610
2256
 
3611
2257
  // src/AccountButton.tsx
3612
- import { useRef as useRef6 } from "react";
3613
- import { jsx as jsx49, jsxs as jsxs28 } from "react/jsx-runtime";
3614
- var containerClassNames = twMerge21(
2258
+ import { useRef as useRef4 } from "react";
2259
+ import { jsx as jsx27, jsxs as jsxs19 } from "react/jsx-runtime";
2260
+ var containerClassNames = twMerge12(
3615
2261
  "w-48 p-3 inline-flex outline-none transition",
3616
2262
  "border border-transparent",
3617
2263
  "text-base leading-none"
3618
2264
  );
3619
- var secondaryClassNames = twMerge21(
2265
+ var secondaryClassNames = twMerge12(
3620
2266
  "bg-neutral-100 border-neutral-300 text-black",
3621
2267
  "dark:bg-neutral-800 dark:border-neutral-700 dark:text-white"
3622
2268
  );
3623
- var secondaryInteractiveClassNames = twMerge21(
2269
+ var secondaryInteractiveClassNames = twMerge12(
3624
2270
  "cursor-pointer outline-none hover:bg-neutral-200 data-[highlighted]:bg-neutral-200 dark:hover:bg-neutral-700"
3625
2271
  );
3626
2272
  function AccountButton() {
3627
2273
  const { openAccountModal, accountModalOpen } = useAccountModal();
3628
- const { status, address: userAddress } = useAccount9();
3629
- const initialUserAddress = useRef6(userAddress);
2274
+ const { status, address: userAddress } = useAccount3();
2275
+ const initialUserAddress = useRef4(userAddress);
3630
2276
  const prereqs = usePrerequisites(userAddress);
3631
2277
  const isConnected = status === "connected" || status === "reconnecting" && userAddress;
3632
2278
  const isNewConnection = userAddress !== initialUserAddress.current;
@@ -3638,20 +2284,20 @@ function AccountButton() {
3638
2284
  }
3639
2285
  return "Sign in";
3640
2286
  })();
3641
- return /* @__PURE__ */ jsx49(Shadow, { mode: "child", children: isSignedIn ? /* @__PURE__ */ jsx49(
2287
+ return /* @__PURE__ */ jsx27(Shadow, { mode: "child", children: isSignedIn ? /* @__PURE__ */ jsx27(
3642
2288
  "button",
3643
2289
  {
3644
2290
  type: "button",
3645
- className: twMerge21(containerClassNames, secondaryClassNames, secondaryInteractiveClassNames),
2291
+ className: twMerge12(containerClassNames, secondaryClassNames, secondaryInteractiveClassNames),
3646
2292
  onClick: openAccountModal,
3647
- children: /* @__PURE__ */ jsx49("span", { className: "flex-grow inline-flex gap-2.5 items-center text-left font-medium", children: userAddress ? /* @__PURE__ */ jsx49(AccountName, { address: userAddress }) : null })
2293
+ children: /* @__PURE__ */ jsx27("span", { className: "flex-grow inline-flex gap-2.5 items-center text-left font-medium", children: userAddress ? /* @__PURE__ */ jsx27(AccountName, { address: userAddress }) : null })
3648
2294
  },
3649
2295
  "connected"
3650
- ) : /* @__PURE__ */ jsxs28(
2296
+ ) : /* @__PURE__ */ jsxs19(
3651
2297
  "button",
3652
2298
  {
3653
2299
  type: "button",
3654
- className: twMerge21(
2300
+ className: twMerge12(
3655
2301
  containerClassNames,
3656
2302
  "group",
3657
2303
  "items-center justify-center gap-2.5",
@@ -3662,32 +2308,32 @@ function AccountButton() {
3662
2308
  "aria-busy": accountModalOpen,
3663
2309
  onClick: openAccountModal,
3664
2310
  children: [
3665
- /* @__PURE__ */ jsxs28("span", { className: "pointer-events-none inline-grid place-items-center -ml-3", children: [
3666
- /* @__PURE__ */ jsx49(
2311
+ /* @__PURE__ */ jsxs19("span", { className: "pointer-events-none inline-grid place-items-center -ml-3", children: [
2312
+ /* @__PURE__ */ jsx27(
3667
2313
  "span",
3668
2314
  {
3669
- className: twMerge21(
2315
+ className: twMerge12(
3670
2316
  "col-start-1 row-start-1 leading-none",
3671
2317
  "scale-100 opacity-100 transition duration-300",
3672
2318
  "group-aria-busy:scale-125 group-aria-busy:opacity-0"
3673
2319
  ),
3674
- children: /* @__PURE__ */ jsx49(Logo, {})
2320
+ children: /* @__PURE__ */ jsx27(Logo, {})
3675
2321
  }
3676
2322
  ),
3677
- /* @__PURE__ */ jsx49(
2323
+ /* @__PURE__ */ jsx27(
3678
2324
  "span",
3679
2325
  {
3680
2326
  "aria-hidden": true,
3681
- className: twMerge21(
2327
+ className: twMerge12(
3682
2328
  "col-start-1 row-start-1",
3683
2329
  "scale-50 opacity-0 transition duration-300 delay-50",
3684
2330
  "group-aria-busy:scale-100 group-aria-busy:opacity-100"
3685
2331
  ),
3686
- children: /* @__PURE__ */ jsx49(PendingIcon, {})
2332
+ children: /* @__PURE__ */ jsx27(PendingIcon, {})
3687
2333
  }
3688
2334
  )
3689
2335
  ] }),
3690
- /* @__PURE__ */ jsx49("span", { className: "font-medium", children: buttonLabel })
2336
+ /* @__PURE__ */ jsx27("span", { className: "font-medium", children: buttonLabel })
3691
2337
  ]
3692
2338
  },
3693
2339
  "sign in"