@latticexyz/entrykit 2.2.22-81f051ccad325ee9700e4d89c2f4bb7a8ad7b3a0 → 2.2.22-8bd459b91322f8b9955f6407b95988a7755d27e4
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 {\n height: 0.75rem;\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 {\n width: 0.75rem;\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-700 > :not([hidden]) ~ :not([hidden]) {\n --tw-divide-opacity: 1;\n border-color: rgb(64 64 64 / 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-nowrap {\n white-space: nowrap;\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-neutral-300 {\n --tw-border-opacity: 1;\n border-color: rgb(212 212 212 / var(--tw-border-opacity));\n}\n\n.border-neutral-700 {\n --tw-border-opacity: 1;\n border-color: rgb(64 64 64 / var(--tw-border-opacity));\n}\n\n.border-transparent {\n border-color: transparent;\n}\n\n.border-white\\/50 {\n border-color: rgb(255 255 255 / 0.5);\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-green-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(22 163 74 / 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-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(220 38 38 / var(--tw-bg-opacity));\n}\n\n.bg-transparent {\n background-color: transparent;\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-300 {\n --tw-text-opacity: 1;\n color: rgb(212 212 212 / 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-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\\/50 {\n color: rgb(255 255 255 / 0.5);\n}\n\n.text-white\\/80 {\n color: rgb(255 255 255 / 0.8);\n}\n\n.underline {\n text-decoration-line: underline;\n}\n\n.decoration-neutral-500 {\n text-decoration-color: #737373;\n}\n\n.underline-offset-4 {\n text-underline-offset: 4px;\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-500::placeholder {\n --tw-text-opacity: 1;\n color: rgb(115 115 115 / 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-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\\:decoration-orange-500:hover {\n text-decoration-color: #f97316;\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-neutral-700:focus {\n --tw-bg-opacity: 1;\n background-color: rgb(64 64 64 / 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\\:inline-block {\n display: inline-block;\n}\n\n.group:hover .group-hover\\:hidden {\n display: none;\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-500 {\n --tw-text-opacity: 1;\n color: rgb(115 115 115 / 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-900[data-state="checked"] {\n --tw-bg-opacity: 1;\n background-color: rgb(23 23 23 / 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\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.-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 {\n height: 0.75rem;\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-\\[230px\\] {\n max-height: 230px;\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 {\n width: 0.75rem;\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-700 > :not([hidden]) ~ :not([hidden]) {\n --tw-divide-opacity: 1;\n border-color: rgb(64 64 64 / 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.overflow-y-auto {\n overflow-y: auto;\n}\n\n.whitespace-nowrap {\n white-space: nowrap;\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-neutral-300 {\n --tw-border-opacity: 1;\n border-color: rgb(212 212 212 / var(--tw-border-opacity));\n}\n\n.border-neutral-700 {\n --tw-border-opacity: 1;\n border-color: rgb(64 64 64 / var(--tw-border-opacity));\n}\n\n.border-transparent {\n border-color: transparent;\n}\n\n.border-white\\/50 {\n border-color: rgb(255 255 255 / 0.5);\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-green-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(22 163 74 / 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-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(220 38 38 / var(--tw-bg-opacity));\n}\n\n.bg-transparent {\n background-color: transparent;\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-gray-400 {\n --tw-text-opacity: 1;\n color: rgb(156 163 175 / 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-300 {\n --tw-text-opacity: 1;\n color: rgb(212 212 212 / 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-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\\/50 {\n color: rgb(255 255 255 / 0.5);\n}\n\n.text-white\\/80 {\n color: rgb(255 255 255 / 0.8);\n}\n\n.underline {\n text-decoration-line: underline;\n}\n\n.decoration-neutral-500 {\n text-decoration-color: #737373;\n}\n\n.underline-offset-4 {\n text-underline-offset: 4px;\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-500::placeholder {\n --tw-text-opacity: 1;\n color: rgb(115 115 115 / 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-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\\:decoration-orange-500:hover {\n text-decoration-color: #f97316;\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-neutral-700:focus {\n --tw-bg-opacity: 1;\n background-color: rgb(64 64 64 / 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\\:inline-block {\n display: inline-block;\n}\n\n.group:hover .group-hover\\:hidden {\n display: none;\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-500 {\n --tw-text-opacity: 1;\n color: rgb(115 115 115 / 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-900[data-state="checked"] {\n --tw-bg-opacity: 1;\n background-color: rgb(23 23 23 / 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\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';
|
|
26
26
|
|
|
27
27
|
// src/ui/Shadow.tsx
|
|
28
28
|
import { useResizeObserver } from "usehooks-ts";
|
|
@@ -1167,8 +1167,12 @@ function EthIcon({ className, ...props }) {
|
|
|
1167
1167
|
import { formatEther } from "viem";
|
|
1168
1168
|
function formatBalance(wei) {
|
|
1169
1169
|
const formatted = formatEther(wei);
|
|
1170
|
-
const
|
|
1171
|
-
|
|
1170
|
+
const parsed = parseFloat(formatted);
|
|
1171
|
+
if (parsed > 0 && parsed < 1e-5) {
|
|
1172
|
+
return "<0.00001";
|
|
1173
|
+
}
|
|
1174
|
+
const magnitude = Math.floor(parsed).toString().length;
|
|
1175
|
+
return parsed.toLocaleString("en-US", { maximumFractionDigits: Math.max(0, 6 - magnitude) });
|
|
1172
1176
|
}
|
|
1173
1177
|
|
|
1174
1178
|
// src/ui/Balance.tsx
|
|
@@ -2084,17 +2088,17 @@ import { useChains as useChains4, useChainId } from "wagmi";
|
|
|
2084
2088
|
// src/onboarding/deposit/DepositViaTransferForm.tsx
|
|
2085
2089
|
import { useAccount as useAccount4, useWriteContract, usePrepareTransactionRequest, usePublicClient } from "wagmi";
|
|
2086
2090
|
import { encodeFunctionData as encodeFunctionData2 } from "viem";
|
|
2087
|
-
import { useMutation as useMutation4, useQuery as
|
|
2091
|
+
import { useMutation as useMutation4, useQuery as useQuery12 } from "@tanstack/react-query";
|
|
2088
2092
|
|
|
2089
2093
|
// src/onboarding/deposit/DepositForm.tsx
|
|
2090
2094
|
import { useEffect as useEffect11, useRef as useRef4 } from "react";
|
|
2091
|
-
import { useAccount as useAccount3, useBalance as
|
|
2095
|
+
import { useAccount as useAccount3, useBalance as useBalance4, useWatchBlockNumber as useWatchBlockNumber2 } from "wagmi";
|
|
2092
2096
|
import { useIsMounted } from "usehooks-ts";
|
|
2093
2097
|
import { twMerge as twMerge15 } from "tailwind-merge";
|
|
2094
2098
|
|
|
2095
2099
|
// src/onboarding/deposit/ChainSelect.tsx
|
|
2096
2100
|
import { useEffect as useEffect10, useMemo as useMemo2 } from "react";
|
|
2097
|
-
import {
|
|
2101
|
+
import { useSwitchChain } from "wagmi";
|
|
2098
2102
|
import { twMerge as twMerge12 } from "tailwind-merge";
|
|
2099
2103
|
import * as Select from "@radix-ui/react-select";
|
|
2100
2104
|
|
|
@@ -2167,37 +2171,29 @@ function Input({ asChild, className, ...props }) {
|
|
|
2167
2171
|
);
|
|
2168
2172
|
}
|
|
2169
2173
|
|
|
2170
|
-
// src/onboarding/deposit/ChainBalance.tsx
|
|
2171
|
-
import { useBalance as useBalance3 } from "wagmi";
|
|
2172
|
-
import { Fragment as Fragment2, jsx as jsx23 } from "react/jsx-runtime";
|
|
2173
|
-
function ChainBalance({ chainId, address }) {
|
|
2174
|
-
const balance = useBalance3({ chainId, address });
|
|
2175
|
-
return /* @__PURE__ */ jsx23(Fragment2, { children: balance.data ? /* @__PURE__ */ jsx23(Balance, { wei: balance.data.value }) : /* @__PURE__ */ jsx23(PendingIcon, {}) });
|
|
2176
|
-
}
|
|
2177
|
-
|
|
2178
2174
|
// src/onboarding/deposit/ChainIcon.tsx
|
|
2179
2175
|
import { twMerge as twMerge11 } from "tailwind-merge";
|
|
2180
2176
|
|
|
2181
2177
|
// src/onboarding/deposit/PreloadedImage.tsx
|
|
2182
2178
|
import { twMerge as twMerge10 } from "tailwind-merge";
|
|
2183
|
-
import { jsx as
|
|
2179
|
+
import { jsx as jsx23 } from "react/jsx-runtime";
|
|
2184
2180
|
function PreloadedImage({ url, fallback: fallback2, className }) {
|
|
2185
2181
|
const { isSuccess, isLoading } = usePreloadImage(url);
|
|
2186
|
-
return /* @__PURE__ */
|
|
2182
|
+
return /* @__PURE__ */ jsx23("span", { className: twMerge10("inline-flex w-full h-full items-center justify-center overflow-clip", className), children: !isLoading ? isSuccess ? /* @__PURE__ */ jsx23("img", { src: url, className: "w-full h-full object-cover" }) : fallback2 : null });
|
|
2187
2183
|
}
|
|
2188
2184
|
|
|
2189
2185
|
// src/onboarding/deposit/ChainIcon.tsx
|
|
2190
2186
|
import { forwardRef as forwardRef2 } from "react";
|
|
2191
|
-
import { jsx as
|
|
2187
|
+
import { jsx as jsx24 } from "react/jsx-runtime";
|
|
2192
2188
|
var ChainIcon = forwardRef2(function ChainIcon2({ name, url, className }, forwardedRef) {
|
|
2193
|
-
return /* @__PURE__ */
|
|
2189
|
+
return /* @__PURE__ */ jsx24(
|
|
2194
2190
|
"span",
|
|
2195
2191
|
{
|
|
2196
2192
|
ref: forwardedRef,
|
|
2197
2193
|
className: twMerge11("flex-shrink-0 inline-flex w-6 aspect-square rounded-full overflow-clip", className),
|
|
2198
|
-
children: url ? /* @__PURE__ */
|
|
2194
|
+
children: url ? /* @__PURE__ */ jsx24(PreloadedImage, { url }) : (
|
|
2199
2195
|
// TODO: better placeholder
|
|
2200
|
-
/* @__PURE__ */
|
|
2196
|
+
/* @__PURE__ */ jsx24(
|
|
2201
2197
|
"span",
|
|
2202
2198
|
{
|
|
2203
2199
|
className: twMerge11(
|
|
@@ -2246,12 +2242,36 @@ function useRelay() {
|
|
|
2246
2242
|
});
|
|
2247
2243
|
}
|
|
2248
2244
|
|
|
2245
|
+
// src/onboarding/deposit/useChainBalances.ts
|
|
2246
|
+
import { useAccount, useConfig as useWagmiConfig } from "wagmi";
|
|
2247
|
+
import { getBalance as getBalance2 } from "wagmi/actions";
|
|
2248
|
+
import { useQuery as useQuery11, skipToken as skipToken8 } from "@tanstack/react-query";
|
|
2249
|
+
import { isNotNull } from "@latticexyz/common/utils";
|
|
2250
|
+
function useChainBalances({ chains }) {
|
|
2251
|
+
const { address: userAddress } = useAccount();
|
|
2252
|
+
const wagmiConfig = useWagmiConfig();
|
|
2253
|
+
const chainIds = chains.map((chain) => chain.id);
|
|
2254
|
+
return useQuery11({
|
|
2255
|
+
queryKey: ["chainBalances", chainIds, userAddress],
|
|
2256
|
+
queryFn: userAddress ? async () => {
|
|
2257
|
+
const chainBalances = await Promise.allSettled(
|
|
2258
|
+
chains.map(async (chain) => {
|
|
2259
|
+
const balance = await getBalance2(wagmiConfig, { chainId: chain.id, address: userAddress });
|
|
2260
|
+
return { chain, balance };
|
|
2261
|
+
})
|
|
2262
|
+
);
|
|
2263
|
+
return chainBalances.map((result) => result.status === "fulfilled" ? result.value : null).filter(isNotNull);
|
|
2264
|
+
} : skipToken8,
|
|
2265
|
+
refetchInterval: 1e3 * 60,
|
|
2266
|
+
retry: 1
|
|
2267
|
+
});
|
|
2268
|
+
}
|
|
2269
|
+
|
|
2249
2270
|
// src/onboarding/deposit/ChainSelect.tsx
|
|
2250
|
-
import { Fragment as
|
|
2271
|
+
import { Fragment as Fragment2, jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
2251
2272
|
function ChainSelect({ value, onChange }) {
|
|
2252
2273
|
const theme = useTheme();
|
|
2253
2274
|
const { frame } = useFrame();
|
|
2254
|
-
const userAccount = useAccount();
|
|
2255
2275
|
const { chains, switchChain } = useSwitchChain();
|
|
2256
2276
|
const relay = useRelay();
|
|
2257
2277
|
const relayChains = relay.data?.chains;
|
|
@@ -2265,27 +2285,33 @@ function ChainSelect({ value, onChange }) {
|
|
|
2265
2285
|
}).filter((c) => c.relayChain);
|
|
2266
2286
|
}, [chains, relayChains]);
|
|
2267
2287
|
const selectedChain = sourceChains.find((c) => c.id === value);
|
|
2288
|
+
const { data: chainsBalances, isLoading } = useShowQueryError(useChainBalances({ chains: sourceChains }));
|
|
2289
|
+
const renderedChains = useMemo2(() => {
|
|
2290
|
+
if (!chainsBalances) return [];
|
|
2291
|
+
const chainsWithBalance = chainsBalances.filter(({ balance }) => balance.value > 0n).map(({ chain, balance }) => ({ chain, balance: balance.value }));
|
|
2292
|
+
return chainsWithBalance.length > 0 ? chainsWithBalance : sourceChains.map((chain) => ({ chain, balance: 0n }));
|
|
2293
|
+
}, [chainsBalances, sourceChains]);
|
|
2268
2294
|
useEffect10(() => {
|
|
2269
|
-
if (
|
|
2270
|
-
const defaultChain =
|
|
2295
|
+
if (renderedChains.length > 0 && (!selectedChain || !renderedChains.find((c) => c.chain.id === selectedChain?.id))) {
|
|
2296
|
+
const defaultChain = renderedChains[0].chain;
|
|
2271
2297
|
onChange(defaultChain.id);
|
|
2272
2298
|
switchChain({ chainId: defaultChain.id });
|
|
2273
2299
|
}
|
|
2274
|
-
}, [value, selectedChain,
|
|
2300
|
+
}, [value, selectedChain, renderedChains, onChange, switchChain]);
|
|
2275
2301
|
return /* @__PURE__ */ jsxs15(
|
|
2276
2302
|
Select.Root,
|
|
2277
2303
|
{
|
|
2278
2304
|
value: value.toString(),
|
|
2279
2305
|
onValueChange: (value2) => {
|
|
2280
2306
|
if (value2) {
|
|
2281
|
-
const chain =
|
|
2307
|
+
const chain = renderedChains.find((item) => item.chain.id.toString() === value2)?.chain;
|
|
2282
2308
|
if (!chain) throw new Error(`Unknown chain selected: ${value2}`);
|
|
2283
2309
|
onChange(chain.id);
|
|
2284
2310
|
}
|
|
2285
2311
|
},
|
|
2286
2312
|
children: [
|
|
2287
|
-
/* @__PURE__ */
|
|
2288
|
-
/* @__PURE__ */
|
|
2313
|
+
/* @__PURE__ */ jsx25(Input, { asChild: true, children: /* @__PURE__ */ jsxs15(Select.Trigger, { className: "group inline-flex items-center justify-center", children: [
|
|
2314
|
+
/* @__PURE__ */ jsx25(Select.Value, { asChild: true, children: /* @__PURE__ */ jsx25(
|
|
2289
2315
|
ChainIcon,
|
|
2290
2316
|
{
|
|
2291
2317
|
id: selectedChain?.id,
|
|
@@ -2294,40 +2320,45 @@ function ChainSelect({ value, onChange }) {
|
|
|
2294
2320
|
className: "w-8"
|
|
2295
2321
|
}
|
|
2296
2322
|
) }),
|
|
2297
|
-
/* @__PURE__ */
|
|
2298
|
-
/* @__PURE__ */
|
|
2299
|
-
/* @__PURE__ */
|
|
2323
|
+
/* @__PURE__ */ jsx25(Select.Icon, { asChild: true, children: /* @__PURE__ */ jsxs15(Fragment2, { children: [
|
|
2324
|
+
/* @__PURE__ */ jsx25(ChevronDownIcon, { className: "text-sm -mr-1 group-aria-expanded:hidden" }),
|
|
2325
|
+
/* @__PURE__ */ jsx25(ChevronUpIcon, { className: "text-sm -mr-1 hidden group-aria-expanded:inline" })
|
|
2300
2326
|
] }) })
|
|
2301
2327
|
] }) }),
|
|
2302
|
-
frame.contentDocument ? /* @__PURE__ */
|
|
2303
|
-
Select.
|
|
2328
|
+
frame.contentDocument ? /* @__PURE__ */ jsx25(Select.Portal, { container: frame.contentDocument.body, children: /* @__PURE__ */ jsx25(
|
|
2329
|
+
Select.Content,
|
|
2304
2330
|
{
|
|
2305
|
-
|
|
2306
|
-
|
|
2307
|
-
|
|
2308
|
-
|
|
2309
|
-
|
|
2310
|
-
|
|
2311
|
-
|
|
2312
|
-
|
|
2313
|
-
|
|
2314
|
-
|
|
2315
|
-
|
|
2316
|
-
|
|
2317
|
-
|
|
2318
|
-
|
|
2319
|
-
|
|
2320
|
-
|
|
2321
|
-
|
|
2322
|
-
|
|
2323
|
-
|
|
2324
|
-
|
|
2325
|
-
|
|
2326
|
-
|
|
2327
|
-
|
|
2328
|
-
|
|
2331
|
+
position: "popper",
|
|
2332
|
+
className: "w-[352px] max-h-[230px] overflow-y-auto mt-1 animate-in fade-in slide-in-from-top-2",
|
|
2333
|
+
children: /* @__PURE__ */ jsx25(Select.Viewport, { children: /* @__PURE__ */ jsx25(
|
|
2334
|
+
Select.Group,
|
|
2335
|
+
{
|
|
2336
|
+
className: twMerge12(
|
|
2337
|
+
"flex flex-col border divide-y",
|
|
2338
|
+
"bg-neutral-800 text-neutral-300 border-neutral-700 divide-neutral-700"
|
|
2339
|
+
),
|
|
2340
|
+
children: isLoading ? /* @__PURE__ */ jsx25("div", { className: "flex items-center justify-center p-4", children: /* @__PURE__ */ jsx25(PendingIcon, { className: "h-6 w-6 animate-spin text-gray-400" }) }) : renderedChains.map(({ chain, balance }) => {
|
|
2341
|
+
return /* @__PURE__ */ jsxs15(
|
|
2342
|
+
Select.Item,
|
|
2343
|
+
{
|
|
2344
|
+
value: chain.id.toString(),
|
|
2345
|
+
className: twMerge12(
|
|
2346
|
+
"group flex p-2.5 gap-2.5 items-center cursor-pointer outline-none",
|
|
2347
|
+
"text-white focus:bg-neutral-700 data-[state=checked]:bg-neutral-900"
|
|
2348
|
+
),
|
|
2349
|
+
children: [
|
|
2350
|
+
/* @__PURE__ */ jsx25(ChainIcon, { id: chain.id, name: chain.name, url: chain.relayChain?.icon?.[theme] }),
|
|
2351
|
+
/* @__PURE__ */ jsx25("span", { className: "flex-grow flex-shrink-0", children: chain.name }),
|
|
2352
|
+
/* @__PURE__ */ jsx25("span", { className: "flex-shrink-0 font-mono text-sm text-neutral-400", children: /* @__PURE__ */ jsx25(Balance, { wei: balance }) })
|
|
2353
|
+
]
|
|
2354
|
+
},
|
|
2355
|
+
chain.id
|
|
2356
|
+
);
|
|
2357
|
+
})
|
|
2358
|
+
}
|
|
2359
|
+
) })
|
|
2329
2360
|
}
|
|
2330
|
-
) })
|
|
2361
|
+
) }) : null
|
|
2331
2362
|
]
|
|
2332
2363
|
}
|
|
2333
2364
|
);
|
|
@@ -2337,10 +2368,10 @@ function ChainSelect({ value, onChange }) {
|
|
|
2337
2368
|
import { formatEther as formatEther3, parseEther as parseEther5 } from "viem";
|
|
2338
2369
|
import { twMerge as twMerge13 } from "tailwind-merge";
|
|
2339
2370
|
import { forwardRef as forwardRef3 } from "react";
|
|
2340
|
-
import { jsx as
|
|
2371
|
+
import { jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
2341
2372
|
var AmountInput = forwardRef3(function AmountInput2({ initialAmount, onChange }, forwardedRef) {
|
|
2342
|
-
return /* @__PURE__ */
|
|
2343
|
-
/* @__PURE__ */
|
|
2373
|
+
return /* @__PURE__ */ jsx26(Input, { asChild: true, className: "w-full cursor-text flex items-center", children: /* @__PURE__ */ jsxs16("label", { children: [
|
|
2374
|
+
/* @__PURE__ */ jsx26(
|
|
2344
2375
|
"input",
|
|
2345
2376
|
{
|
|
2346
2377
|
ref: forwardedRef,
|
|
@@ -2365,23 +2396,23 @@ var AmountInput = forwardRef3(function AmountInput2({ initialAmount, onChange },
|
|
|
2365
2396
|
}
|
|
2366
2397
|
}
|
|
2367
2398
|
),
|
|
2368
|
-
/* @__PURE__ */
|
|
2399
|
+
/* @__PURE__ */ jsx26("span", { className: twMerge13("flex-shrink-0 text-2xl", "peer-placeholder-shown:text-neutral-500"), children: /* @__PURE__ */ jsx26(EthIcon, {}) })
|
|
2369
2400
|
] }) });
|
|
2370
2401
|
});
|
|
2371
2402
|
|
|
2372
2403
|
// src/onboarding/deposit/SubmitButton.tsx
|
|
2373
|
-
import { useAccount as useAccount2, useBalance as
|
|
2404
|
+
import { useAccount as useAccount2, useBalance as useBalance3, useSwitchChain as useSwitchChain2 } from "wagmi";
|
|
2374
2405
|
import { twMerge as twMerge14 } from "tailwind-merge";
|
|
2375
2406
|
import { parseEther as parseEther6 } from "viem";
|
|
2376
|
-
import { jsx as
|
|
2407
|
+
import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
2377
2408
|
var MAX_DEPOSIT_AMOUNT = "0.1";
|
|
2378
2409
|
function SubmitButton({ amount, chainId, className, ...buttonProps }) {
|
|
2379
2410
|
const { chainId: userChainId, address: userAddress } = useAccount2();
|
|
2380
|
-
const { data: userBalance } =
|
|
2411
|
+
const { data: userBalance } = useBalance3({ address: userAddress });
|
|
2381
2412
|
const shouldSwitchChain = chainId != null && chainId !== userChainId;
|
|
2382
2413
|
const switchChain = useSwitchChain2();
|
|
2383
2414
|
if (shouldSwitchChain) {
|
|
2384
|
-
return /* @__PURE__ */
|
|
2415
|
+
return /* @__PURE__ */ jsx27(
|
|
2385
2416
|
Button,
|
|
2386
2417
|
{
|
|
2387
2418
|
type: "button",
|
|
@@ -2400,16 +2431,16 @@ function SubmitButton({ amount, chainId, className, ...buttonProps }) {
|
|
|
2400
2431
|
" ETH"
|
|
2401
2432
|
] });
|
|
2402
2433
|
} else if (amount > (userBalance?.value ?? 0n)) {
|
|
2403
|
-
return /* @__PURE__ */
|
|
2434
|
+
return /* @__PURE__ */ jsx27(Button, { type: "button", className: twMerge14("w-full", className), disabled: true, children: "Insufficient balance" });
|
|
2404
2435
|
}
|
|
2405
2436
|
}
|
|
2406
|
-
return /* @__PURE__ */
|
|
2437
|
+
return /* @__PURE__ */ jsx27(Button, { type: "submit", className: twMerge14("w-full", className), ...buttonProps });
|
|
2407
2438
|
}
|
|
2408
2439
|
|
|
2409
2440
|
// src/icons/WarningIcon.tsx
|
|
2410
|
-
import { jsx as
|
|
2441
|
+
import { jsx as jsx28 } from "react/jsx-runtime";
|
|
2411
2442
|
function WarningIcon(props) {
|
|
2412
|
-
return /* @__PURE__ */
|
|
2443
|
+
return /* @__PURE__ */ jsx28(IconSVG, { fill: "none", ...props, children: /* @__PURE__ */ jsx28(
|
|
2413
2444
|
"path",
|
|
2414
2445
|
{
|
|
2415
2446
|
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",
|
|
@@ -2430,7 +2461,7 @@ function formatGas(wei) {
|
|
|
2430
2461
|
}
|
|
2431
2462
|
|
|
2432
2463
|
// src/onboarding/deposit/DepositForm.tsx
|
|
2433
|
-
import { Fragment as
|
|
2464
|
+
import { Fragment as Fragment3, jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
2434
2465
|
function DepositForm({
|
|
2435
2466
|
sourceChain,
|
|
2436
2467
|
setSourceChainId,
|
|
@@ -2444,7 +2475,7 @@ function DepositForm({
|
|
|
2444
2475
|
const amountInputRef = useRef4(null);
|
|
2445
2476
|
const isMounted = useIsMounted();
|
|
2446
2477
|
const { address: userAddress, chainId: userChainId } = useAccount3();
|
|
2447
|
-
const balance = useShowQueryError(
|
|
2478
|
+
const balance = useShowQueryError(useBalance4({ chainId: sourceChain.id, address: userAddress }));
|
|
2448
2479
|
const quarryBalance = useShowQueryError(useBalance(userAddress));
|
|
2449
2480
|
useWatchBlockNumber2({
|
|
2450
2481
|
onBlockNumber: () => {
|
|
@@ -2479,8 +2510,8 @@ function DepositForm({
|
|
|
2479
2510
|
},
|
|
2480
2511
|
children: [
|
|
2481
2512
|
/* @__PURE__ */ jsxs18("div", { className: "flex gap-2", children: [
|
|
2482
|
-
/* @__PURE__ */
|
|
2483
|
-
/* @__PURE__ */
|
|
2513
|
+
/* @__PURE__ */ jsx29(ChainSelect, { value: sourceChain.id, onChange: setSourceChainId }),
|
|
2514
|
+
/* @__PURE__ */ jsx29(AmountInput, { ref: amountInputRef, initialAmount: amount, onChange: setAmount })
|
|
2484
2515
|
] }),
|
|
2485
2516
|
/* @__PURE__ */ jsxs18(
|
|
2486
2517
|
"dl",
|
|
@@ -2490,21 +2521,21 @@ function DepositForm({
|
|
|
2490
2521
|
"divide-neutral-700 text-neutral-400"
|
|
2491
2522
|
),
|
|
2492
2523
|
children: [
|
|
2493
|
-
/* @__PURE__ */
|
|
2494
|
-
/* @__PURE__ */
|
|
2495
|
-
/* @__PURE__ */
|
|
2496
|
-
/* @__PURE__ */
|
|
2497
|
-
/* @__PURE__ */
|
|
2498
|
-
/* @__PURE__ */
|
|
2524
|
+
/* @__PURE__ */ jsx29("dt", { children: "Available to deposit" }),
|
|
2525
|
+
/* @__PURE__ */ jsx29("dd", { children: balance.isSuccess ? /* @__PURE__ */ jsx29(Balance, { wei: balance.data.value }) : balance.isError ? /* @__PURE__ */ jsx29("span", { title: String(balance.error), children: /* @__PURE__ */ jsx29(WarningIcon, { className: "inline-block text-amber-500" }) }) : balance.isLoading ? /* @__PURE__ */ jsx29(PendingIcon, { className: "inline-block text-xs" }) : null }),
|
|
2526
|
+
/* @__PURE__ */ jsx29("dt", { children: "Gas balance after deposit" }),
|
|
2527
|
+
/* @__PURE__ */ jsx29("dd", { children: /* @__PURE__ */ jsx29(Balance, { wei: (quarryBalance.data ?? 0n) + (amount ?? 0n) }) }),
|
|
2528
|
+
/* @__PURE__ */ jsx29("dt", { children: "Estimated fee" }),
|
|
2529
|
+
/* @__PURE__ */ jsx29("dd", { children: estimatedFee.fee ? /* @__PURE__ */ jsxs18(Fragment3, { children: [
|
|
2499
2530
|
formatGas(estimatedFee.fee),
|
|
2500
2531
|
" gwei"
|
|
2501
|
-
] }) : estimatedFee.error ? /* @__PURE__ */
|
|
2502
|
-
/* @__PURE__ */
|
|
2503
|
-
/* @__PURE__ */
|
|
2532
|
+
] }) : estimatedFee.error ? /* @__PURE__ */ jsx29("span", { title: String(estimatedFee.error), children: /* @__PURE__ */ jsx29(WarningIcon, { className: "inline-block text-amber-500" }) }) : estimatedFee.isLoading ? /* @__PURE__ */ jsx29(PendingIcon, { className: "inline-block text-xs" }) : null }),
|
|
2533
|
+
/* @__PURE__ */ jsx29("dt", { children: "Time to deposit" }),
|
|
2534
|
+
/* @__PURE__ */ jsx29("dd", { children: estimatedTime })
|
|
2504
2535
|
]
|
|
2505
2536
|
}
|
|
2506
2537
|
),
|
|
2507
|
-
hasMinimumBalance ? submitButton : /* @__PURE__ */
|
|
2538
|
+
hasMinimumBalance ? submitButton : /* @__PURE__ */ jsx29(SubmitButton, { disabled: true, children: "Not enough funds" })
|
|
2508
2539
|
]
|
|
2509
2540
|
}
|
|
2510
2541
|
);
|
|
@@ -2558,7 +2589,7 @@ function useDeposits() {
|
|
|
2558
2589
|
}
|
|
2559
2590
|
|
|
2560
2591
|
// src/onboarding/deposit/DepositViaTransferForm.tsx
|
|
2561
|
-
import { jsx as
|
|
2592
|
+
import { jsx as jsx30 } from "react/jsx-runtime";
|
|
2562
2593
|
function DepositViaTransferForm({ amount, setAmount, sourceChain, setSourceChainId }) {
|
|
2563
2594
|
const { chain } = useEntryKitConfig();
|
|
2564
2595
|
const paymaster = getPaymaster(chain);
|
|
@@ -2569,7 +2600,7 @@ function DepositViaTransferForm({ amount, setAmount, sourceChain, setSourceChain
|
|
|
2569
2600
|
if (!userAddress) {
|
|
2570
2601
|
throw new Error("User address not found");
|
|
2571
2602
|
}
|
|
2572
|
-
const { data: gasPrice } =
|
|
2603
|
+
const { data: gasPrice } = useQuery12({
|
|
2573
2604
|
queryKey: ["gasPrice", sourceChain.id],
|
|
2574
2605
|
queryFn: async () => {
|
|
2575
2606
|
if (!publicClient) throw new Error("Public client not available");
|
|
@@ -2626,7 +2657,7 @@ function DepositViaTransferForm({ amount, setAmount, sourceChain, setSourceChain
|
|
|
2626
2657
|
}
|
|
2627
2658
|
});
|
|
2628
2659
|
const estimatedFee = prepareData?.gas && gasPrice ? prepareData.gas * gasPrice : void 0;
|
|
2629
|
-
return /* @__PURE__ */
|
|
2660
|
+
return /* @__PURE__ */ jsx30(
|
|
2630
2661
|
DepositForm,
|
|
2631
2662
|
{
|
|
2632
2663
|
sourceChain,
|
|
@@ -2642,7 +2673,7 @@ function DepositViaTransferForm({ amount, setAmount, sourceChain, setSourceChain
|
|
|
2642
2673
|
onSubmit: async () => {
|
|
2643
2674
|
await deposit.mutateAsync();
|
|
2644
2675
|
},
|
|
2645
|
-
submitButton: /* @__PURE__ */
|
|
2676
|
+
submitButton: /* @__PURE__ */ jsx30(
|
|
2646
2677
|
SubmitButton,
|
|
2647
2678
|
{
|
|
2648
2679
|
variant: "primary",
|
|
@@ -2660,8 +2691,8 @@ function DepositViaTransferForm({ amount, setAmount, sourceChain, setSourceChain
|
|
|
2660
2691
|
// src/onboarding/deposit/DepositViaRelayForm.tsx
|
|
2661
2692
|
import { encodeFunctionData as encodeFunctionData3 } from "viem";
|
|
2662
2693
|
import { useAccount as useAccount5, useWalletClient } from "wagmi";
|
|
2663
|
-
import { useMutation as useMutation5, useQuery as
|
|
2664
|
-
import { jsx as
|
|
2694
|
+
import { useMutation as useMutation5, useQuery as useQuery13 } from "@tanstack/react-query";
|
|
2695
|
+
import { jsx as jsx31 } from "react/jsx-runtime";
|
|
2665
2696
|
var ETH_ADDRESS = "0x0000000000000000000000000000000000000000";
|
|
2666
2697
|
function DepositViaRelayForm({ amount, setAmount, sourceChain, setSourceChainId }) {
|
|
2667
2698
|
const { chain, chainId: destinationChainId } = useEntryKitConfig();
|
|
@@ -2671,7 +2702,7 @@ function DepositViaRelayForm({ amount, setAmount, sourceChain, setSourceChainId
|
|
|
2671
2702
|
const { addDeposit } = useDeposits();
|
|
2672
2703
|
const { data: relay } = useRelay();
|
|
2673
2704
|
const relayClient = relay?.client;
|
|
2674
|
-
const quote =
|
|
2705
|
+
const quote = useQuery13({
|
|
2675
2706
|
queryKey: ["relayBridgeQuote", sourceChain.id, amount?.toString()],
|
|
2676
2707
|
queryFn: async () => {
|
|
2677
2708
|
if (!relayClient) throw new Error("No Relay client found.");
|
|
@@ -2747,7 +2778,7 @@ function DepositViaRelayForm({ amount, setAmount, sourceChain, setSourceChainId
|
|
|
2747
2778
|
const gasFee = BigInt(fees?.gas?.amount ?? 0);
|
|
2748
2779
|
const relayerFee = BigInt(fees?.relayer?.amount ?? 0);
|
|
2749
2780
|
const fee = gasFee + relayerFee;
|
|
2750
|
-
return /* @__PURE__ */
|
|
2781
|
+
return /* @__PURE__ */ jsx31(
|
|
2751
2782
|
DepositForm,
|
|
2752
2783
|
{
|
|
2753
2784
|
sourceChain,
|
|
@@ -2764,7 +2795,7 @@ function DepositViaRelayForm({ amount, setAmount, sourceChain, setSourceChainId
|
|
|
2764
2795
|
if (!quote.data || !amount) return;
|
|
2765
2796
|
await deposit.mutateAsync({ quote: quote.data, amount });
|
|
2766
2797
|
},
|
|
2767
|
-
submitButton: /* @__PURE__ */
|
|
2798
|
+
submitButton: /* @__PURE__ */ jsx31(
|
|
2768
2799
|
SubmitButton,
|
|
2769
2800
|
{
|
|
2770
2801
|
variant: "primary",
|
|
@@ -2781,19 +2812,19 @@ function DepositViaRelayForm({ amount, setAmount, sourceChain, setSourceChainId
|
|
|
2781
2812
|
|
|
2782
2813
|
// src/onboarding/deposit/Deposits.tsx
|
|
2783
2814
|
import { useEffect as useEffect13 } from "react";
|
|
2784
|
-
import { useQuery as
|
|
2815
|
+
import { useQuery as useQuery16, useQueryClient as useQueryClient7 } from "@tanstack/react-query";
|
|
2785
2816
|
|
|
2786
2817
|
// src/onboarding/deposit/TransferDepositStatus.tsx
|
|
2787
|
-
import { useQuery as
|
|
2818
|
+
import { useQuery as useQuery14 } from "@tanstack/react-query";
|
|
2788
2819
|
|
|
2789
2820
|
// src/onboarding/deposit/DepositStatus.tsx
|
|
2790
2821
|
import { useEffect as useEffect12, useState as useState3 } from "react";
|
|
2791
2822
|
import { twMerge as twMerge16 } from "tailwind-merge";
|
|
2792
2823
|
|
|
2793
2824
|
// src/icons/CloseIcon.tsx
|
|
2794
|
-
import { jsx as
|
|
2825
|
+
import { jsx as jsx32 } from "react/jsx-runtime";
|
|
2795
2826
|
function CloseIcon(props) {
|
|
2796
|
-
return /* @__PURE__ */
|
|
2827
|
+
return /* @__PURE__ */ jsx32(IconSVG, { strokeWidth: "2", stroke: "currentColor", ...props, children: /* @__PURE__ */ jsx32(
|
|
2797
2828
|
"path",
|
|
2798
2829
|
{
|
|
2799
2830
|
d: "M6 18L18 6M6 6L18 18",
|
|
@@ -2807,7 +2838,7 @@ function CloseIcon(props) {
|
|
|
2807
2838
|
}
|
|
2808
2839
|
|
|
2809
2840
|
// src/onboarding/deposit/DepositStatus.tsx
|
|
2810
|
-
import { jsx as
|
|
2841
|
+
import { jsx as jsx33, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
2811
2842
|
function DepositStatus({ status, progress, children, onDismiss }) {
|
|
2812
2843
|
const [appear, setAppear] = useState3(false);
|
|
2813
2844
|
useEffect12(() => {
|
|
@@ -2815,10 +2846,10 @@ function DepositStatus({ status, progress, children, onDismiss }) {
|
|
|
2815
2846
|
}, []);
|
|
2816
2847
|
return /* @__PURE__ */ jsxs19("div", { className: "group bg-neutral-900 flex flex-col animate-in fade-in slide-in-from-bottom-2 animate-out fade-out", children: [
|
|
2817
2848
|
/* @__PURE__ */ jsxs19("div", { className: "py-1 text-sm flex items-center gap-2", children: [
|
|
2818
|
-
/* @__PURE__ */
|
|
2849
|
+
/* @__PURE__ */ jsx33("div", { className: "flex-grow", children }),
|
|
2819
2850
|
/* @__PURE__ */ jsxs19("div", { className: "flex-shrink-0 grid", children: [
|
|
2820
|
-
/* @__PURE__ */
|
|
2821
|
-
/* @__PURE__ */
|
|
2851
|
+
/* @__PURE__ */ jsx33("span", { className: "col-start-1 row-start-1 transition opacity-100 group-hover:opacity-0 group-hover:pointer-events-none", children: status === "success" ? /* @__PURE__ */ jsx33(CheckIcon, { className: "text-green-600" }) : status === "error" ? /* @__PURE__ */ jsx33(WarningIcon, { className: "text-amber-500" }) : /* @__PURE__ */ jsx33(PendingIcon, { className: "text-neutral-500 transition" }) }),
|
|
2852
|
+
/* @__PURE__ */ jsx33(
|
|
2822
2853
|
"button",
|
|
2823
2854
|
{
|
|
2824
2855
|
type: "button",
|
|
@@ -2830,12 +2861,12 @@ function DepositStatus({ status, progress, children, onDismiss }) {
|
|
|
2830
2861
|
),
|
|
2831
2862
|
title: "Dismiss",
|
|
2832
2863
|
onClick: onDismiss,
|
|
2833
|
-
children: /* @__PURE__ */
|
|
2864
|
+
children: /* @__PURE__ */ jsx33(CloseIcon, {})
|
|
2834
2865
|
}
|
|
2835
2866
|
)
|
|
2836
2867
|
] })
|
|
2837
2868
|
] }),
|
|
2838
|
-
/* @__PURE__ */
|
|
2869
|
+
/* @__PURE__ */ jsx33("div", { className: "w-full h-[2px] -mt-full overflow-clip", children: /* @__PURE__ */ jsx33(
|
|
2839
2870
|
"div",
|
|
2840
2871
|
{
|
|
2841
2872
|
className: twMerge16(
|
|
@@ -2855,7 +2886,7 @@ function DepositStatus({ status, progress, children, onDismiss }) {
|
|
|
2855
2886
|
|
|
2856
2887
|
// src/onboarding/deposit/TransferDepositStatus.tsx
|
|
2857
2888
|
import { useChains as useChains2 } from "wagmi";
|
|
2858
|
-
import { Fragment as
|
|
2889
|
+
import { Fragment as Fragment4, jsx as jsx34, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
2859
2890
|
function TransferDepositStatus({
|
|
2860
2891
|
amount,
|
|
2861
2892
|
chainL1Id,
|
|
@@ -2867,11 +2898,11 @@ function TransferDepositStatus({
|
|
|
2867
2898
|
}) {
|
|
2868
2899
|
const chains = useChains2();
|
|
2869
2900
|
const chain = chains.find((chain2) => chain2.id === chainL1Id);
|
|
2870
|
-
const receipt =
|
|
2901
|
+
const receipt = useQuery14({
|
|
2871
2902
|
queryKey: ["transferDepositStatus", hash],
|
|
2872
2903
|
queryFn: () => receiptPromise
|
|
2873
2904
|
});
|
|
2874
|
-
return /* @__PURE__ */
|
|
2905
|
+
return /* @__PURE__ */ jsx34(
|
|
2875
2906
|
DepositStatus,
|
|
2876
2907
|
{
|
|
2877
2908
|
status: receipt.status,
|
|
@@ -2883,10 +2914,10 @@ function TransferDepositStatus({
|
|
|
2883
2914
|
children: (() => {
|
|
2884
2915
|
const blockExplorer = chain.blockExplorers?.default.url;
|
|
2885
2916
|
if (receipt.status === "pending") {
|
|
2886
|
-
return /* @__PURE__ */ jsxs20(
|
|
2917
|
+
return /* @__PURE__ */ jsxs20(Fragment4, { children: [
|
|
2887
2918
|
"Confirming deposit on",
|
|
2888
2919
|
" ",
|
|
2889
|
-
/* @__PURE__ */
|
|
2920
|
+
/* @__PURE__ */ jsx34(
|
|
2890
2921
|
"a",
|
|
2891
2922
|
{
|
|
2892
2923
|
href: blockExplorer ? `${blockExplorer}/tx/${hash}` : void 0,
|
|
@@ -2899,10 +2930,10 @@ function TransferDepositStatus({
|
|
|
2899
2930
|
] });
|
|
2900
2931
|
}
|
|
2901
2932
|
if (receipt.status === "error") {
|
|
2902
|
-
return /* @__PURE__ */ jsxs20(
|
|
2933
|
+
return /* @__PURE__ */ jsxs20(Fragment4, { children: [
|
|
2903
2934
|
"Could not find deposit on",
|
|
2904
2935
|
" ",
|
|
2905
|
-
/* @__PURE__ */
|
|
2936
|
+
/* @__PURE__ */ jsx34(
|
|
2906
2937
|
"a",
|
|
2907
2938
|
{
|
|
2908
2939
|
href: blockExplorer ? `${blockExplorer}/tx/${hash}` : void 0,
|
|
@@ -2914,10 +2945,10 @@ function TransferDepositStatus({
|
|
|
2914
2945
|
"."
|
|
2915
2946
|
] });
|
|
2916
2947
|
}
|
|
2917
|
-
return /* @__PURE__ */ jsxs20(
|
|
2948
|
+
return /* @__PURE__ */ jsxs20(Fragment4, { children: [
|
|
2918
2949
|
"Successfully",
|
|
2919
2950
|
" ",
|
|
2920
|
-
/* @__PURE__ */
|
|
2951
|
+
/* @__PURE__ */ jsx34(
|
|
2921
2952
|
"a",
|
|
2922
2953
|
{
|
|
2923
2954
|
href: blockExplorer ? `${blockExplorer}/tx/${receipt.data.transactionHash}` : void 0,
|
|
@@ -2927,7 +2958,7 @@ function TransferDepositStatus({
|
|
|
2927
2958
|
}
|
|
2928
2959
|
),
|
|
2929
2960
|
" ",
|
|
2930
|
-
/* @__PURE__ */
|
|
2961
|
+
/* @__PURE__ */ jsx34(Balance, { wei: amount })
|
|
2931
2962
|
] });
|
|
2932
2963
|
})()
|
|
2933
2964
|
}
|
|
@@ -2935,9 +2966,9 @@ function TransferDepositStatus({
|
|
|
2935
2966
|
}
|
|
2936
2967
|
|
|
2937
2968
|
// src/onboarding/deposit/RelayDepositStatus.tsx
|
|
2938
|
-
import { useQuery as
|
|
2969
|
+
import { useQuery as useQuery15 } from "@tanstack/react-query";
|
|
2939
2970
|
import { useChains as useChains3 } from "wagmi";
|
|
2940
|
-
import { Fragment as
|
|
2971
|
+
import { Fragment as Fragment5, jsx as jsx35, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
2941
2972
|
function RelayDepositStatus({
|
|
2942
2973
|
amount,
|
|
2943
2974
|
chainL1Id,
|
|
@@ -2950,11 +2981,11 @@ function RelayDepositStatus({
|
|
|
2950
2981
|
const chains = useChains3();
|
|
2951
2982
|
const chainL1 = chains.find((chain) => chain.id === chainL1Id);
|
|
2952
2983
|
const chainL2 = chains.find((chain) => chain.id === chainL2Id);
|
|
2953
|
-
const deposit =
|
|
2984
|
+
const deposit = useQuery15({
|
|
2954
2985
|
queryKey: ["relayDepositPromise", chainL1Id, chainL2Id, amount.toString(), start.toISOString()],
|
|
2955
2986
|
queryFn: () => depositPromise
|
|
2956
2987
|
});
|
|
2957
|
-
return /* @__PURE__ */
|
|
2988
|
+
return /* @__PURE__ */ jsx35(
|
|
2958
2989
|
DepositStatus,
|
|
2959
2990
|
{
|
|
2960
2991
|
status: deposit.status,
|
|
@@ -2965,22 +2996,22 @@ function RelayDepositStatus({
|
|
|
2965
2996
|
onDismiss,
|
|
2966
2997
|
children: (() => {
|
|
2967
2998
|
if (deposit.status === "pending") {
|
|
2968
|
-
return /* @__PURE__ */ jsxs21(
|
|
2999
|
+
return /* @__PURE__ */ jsxs21(Fragment5, { children: [
|
|
2969
3000
|
"Relay bridge deposit pending on ",
|
|
2970
3001
|
chainL1.name,
|
|
2971
3002
|
"\u2026"
|
|
2972
3003
|
] });
|
|
2973
3004
|
}
|
|
2974
3005
|
if (deposit.status === "error") {
|
|
2975
|
-
return /* @__PURE__ */ jsxs21(
|
|
3006
|
+
return /* @__PURE__ */ jsxs21(Fragment5, { children: [
|
|
2976
3007
|
"Relay bridge deposit to ",
|
|
2977
3008
|
chainL2.name,
|
|
2978
3009
|
" failed."
|
|
2979
3010
|
] });
|
|
2980
3011
|
}
|
|
2981
|
-
return /* @__PURE__ */ jsxs21(
|
|
3012
|
+
return /* @__PURE__ */ jsxs21(Fragment5, { children: [
|
|
2982
3013
|
"Successfully bridged ",
|
|
2983
|
-
/* @__PURE__ */
|
|
3014
|
+
/* @__PURE__ */ jsx35(Balance, { wei: amount }),
|
|
2984
3015
|
" to ",
|
|
2985
3016
|
chainL2.name,
|
|
2986
3017
|
"!"
|
|
@@ -2992,14 +3023,14 @@ function RelayDepositStatus({
|
|
|
2992
3023
|
|
|
2993
3024
|
// src/onboarding/deposit/Deposits.tsx
|
|
2994
3025
|
import { useAccount as useAccount6, useClient as useClient11 } from "wagmi";
|
|
2995
|
-
import { jsx as
|
|
3026
|
+
import { jsx as jsx36 } from "react/jsx-runtime";
|
|
2996
3027
|
function Deposits() {
|
|
2997
3028
|
const queryClient = useQueryClient7();
|
|
2998
3029
|
const { chainId } = useEntryKitConfig();
|
|
2999
3030
|
const client = useClient11({ chainId });
|
|
3000
3031
|
const { address: userAddress } = useAccount6();
|
|
3001
3032
|
const { deposits, removeDeposit } = useDeposits();
|
|
3002
|
-
const { data: isComplete } =
|
|
3033
|
+
const { data: isComplete } = useQuery16({
|
|
3003
3034
|
queryKey: ["depositsComplete", deposits.map((deposit) => deposit.uid)],
|
|
3004
3035
|
queryFn: async () => {
|
|
3005
3036
|
if (!deposits.length) return false;
|
|
@@ -3014,17 +3045,17 @@ function Deposits() {
|
|
|
3014
3045
|
}
|
|
3015
3046
|
}, [client?.uid, isComplete, queryClient, userAddress]);
|
|
3016
3047
|
if (!deposits.length) return null;
|
|
3017
|
-
return /* @__PURE__ */
|
|
3048
|
+
return /* @__PURE__ */ jsx36("div", { className: "flex flex-col gap-1 mt-4", children: deposits.map((deposit) => {
|
|
3018
3049
|
if (deposit.type === "transfer") {
|
|
3019
|
-
return /* @__PURE__ */
|
|
3050
|
+
return /* @__PURE__ */ jsx36(TransferDepositStatus, { ...deposit, onDismiss: () => removeDeposit(deposit.uid) }, deposit.uid);
|
|
3020
3051
|
} else if (deposit.type === "relay") {
|
|
3021
|
-
return /* @__PURE__ */
|
|
3052
|
+
return /* @__PURE__ */ jsx36(RelayDepositStatus, { ...deposit, onDismiss: () => removeDeposit(deposit.uid) }, deposit.uid);
|
|
3022
3053
|
}
|
|
3023
3054
|
}) });
|
|
3024
3055
|
}
|
|
3025
3056
|
|
|
3026
3057
|
// src/onboarding/deposit/DepositFormContainer.tsx
|
|
3027
|
-
import { jsx as
|
|
3058
|
+
import { jsx as jsx37, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
3028
3059
|
function DepositFormContainer() {
|
|
3029
3060
|
const { chainId: destinationChainId } = useEntryKitConfig();
|
|
3030
3061
|
const chainId = useChainId();
|
|
@@ -3033,7 +3064,7 @@ function DepositFormContainer() {
|
|
|
3033
3064
|
const [sourceChainId, setSourceChainId] = useState4(chainId);
|
|
3034
3065
|
const sourceChain = chains.find(({ id }) => id === sourceChainId);
|
|
3035
3066
|
return /* @__PURE__ */ jsxs22("div", { className: "pt-10 pb-2", children: [
|
|
3036
|
-
destinationChainId === sourceChainId ? /* @__PURE__ */
|
|
3067
|
+
destinationChainId === sourceChainId ? /* @__PURE__ */ jsx37(
|
|
3037
3068
|
DepositViaTransferForm,
|
|
3038
3069
|
{
|
|
3039
3070
|
amount,
|
|
@@ -3041,7 +3072,7 @@ function DepositFormContainer() {
|
|
|
3041
3072
|
sourceChain,
|
|
3042
3073
|
setSourceChainId
|
|
3043
3074
|
}
|
|
3044
|
-
) : /* @__PURE__ */
|
|
3075
|
+
) : /* @__PURE__ */ jsx37(
|
|
3045
3076
|
DepositViaRelayForm,
|
|
3046
3077
|
{
|
|
3047
3078
|
amount,
|
|
@@ -3050,14 +3081,14 @@ function DepositFormContainer() {
|
|
|
3050
3081
|
setSourceChainId
|
|
3051
3082
|
}
|
|
3052
3083
|
),
|
|
3053
|
-
/* @__PURE__ */
|
|
3084
|
+
/* @__PURE__ */ jsx37(Deposits, {})
|
|
3054
3085
|
] });
|
|
3055
3086
|
}
|
|
3056
3087
|
|
|
3057
3088
|
// src/icons/ArrowLeftIcon.tsx
|
|
3058
|
-
import { jsx as
|
|
3089
|
+
import { jsx as jsx38 } from "react/jsx-runtime";
|
|
3059
3090
|
function ArrowLeftIcon(props) {
|
|
3060
|
-
return /* @__PURE__ */
|
|
3091
|
+
return /* @__PURE__ */ jsx38(IconSVG, { ...props, children: /* @__PURE__ */ jsx38(
|
|
3061
3092
|
"path",
|
|
3062
3093
|
{
|
|
3063
3094
|
d: "M19 12H5M12 19l-7-7 7-7",
|
|
@@ -3077,7 +3108,7 @@ import { useAccount as useAccount7, useClient as useClient12, useSwitchChain as
|
|
|
3077
3108
|
import { twMerge as twMerge17 } from "tailwind-merge";
|
|
3078
3109
|
import { useMutation as useMutation6 } from "@tanstack/react-query";
|
|
3079
3110
|
import { useQueryClient as useQueryClient8 } from "@tanstack/react-query";
|
|
3080
|
-
import { jsx as
|
|
3111
|
+
import { jsx as jsx39, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
3081
3112
|
function WithdrawGasBalanceButton({ userAddress }) {
|
|
3082
3113
|
const { writeContractAsync } = useWriteContract2();
|
|
3083
3114
|
const { switchChain } = useSwitchChain3();
|
|
@@ -3116,7 +3147,7 @@ function WithdrawGasBalanceButton({ userAddress }) {
|
|
|
3116
3147
|
if (balance.data == null || balance.data === 0n) {
|
|
3117
3148
|
return null;
|
|
3118
3149
|
}
|
|
3119
|
-
return /* @__PURE__ */
|
|
3150
|
+
return /* @__PURE__ */ jsx39(
|
|
3120
3151
|
"button",
|
|
3121
3152
|
{
|
|
3122
3153
|
onClick: () => {
|
|
@@ -3140,19 +3171,19 @@ function WithdrawGasBalanceButton({ userAddress }) {
|
|
|
3140
3171
|
shouldSwitchChain && "group-hover:hidden"
|
|
3141
3172
|
),
|
|
3142
3173
|
children: [
|
|
3143
|
-
withdraw.isPending && /* @__PURE__ */
|
|
3174
|
+
withdraw.isPending && /* @__PURE__ */ jsx39(PendingIcon, { className: "w-3 h-3" }),
|
|
3144
3175
|
"Withdraw"
|
|
3145
3176
|
]
|
|
3146
3177
|
}
|
|
3147
3178
|
),
|
|
3148
|
-
shouldSwitchChain && /* @__PURE__ */
|
|
3179
|
+
shouldSwitchChain && /* @__PURE__ */ jsx39("span", { className: "hidden group-hover:inline-block underline decoration-neutral-500 underline-offset-4 hover:decoration-orange-500", children: "Switch chain" })
|
|
3149
3180
|
] })
|
|
3150
3181
|
}
|
|
3151
3182
|
);
|
|
3152
3183
|
}
|
|
3153
3184
|
|
|
3154
3185
|
// src/onboarding/quarry/GasBalance.tsx
|
|
3155
|
-
import { jsx as
|
|
3186
|
+
import { jsx as jsx40, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
3156
3187
|
function GasBalance2({ isActive, isExpanded, isFocused, setFocused, userAddress }) {
|
|
3157
3188
|
const queryClient = useQueryClient9();
|
|
3158
3189
|
const balance = useShowQueryError(useBalance(userAddress));
|
|
@@ -3165,25 +3196,25 @@ function GasBalance2({ isActive, isExpanded, isFocused, setFocused, userAddress
|
|
|
3165
3196
|
}, [balance.data, prevBalance, setFocused, queryClient, userAddress]);
|
|
3166
3197
|
if (isFocused) {
|
|
3167
3198
|
return /* @__PURE__ */ jsxs24("div", { children: [
|
|
3168
|
-
isFocused && /* @__PURE__ */
|
|
3199
|
+
isFocused && /* @__PURE__ */ jsx40("div", { className: "absolute top-0 left-0", children: /* @__PURE__ */ jsx40(
|
|
3169
3200
|
"div",
|
|
3170
3201
|
{
|
|
3171
3202
|
className: "flex items-center justify-center w-10 h-10 text-white/20 hover:text-white/40 cursor-pointer",
|
|
3172
3203
|
onClick: () => setFocused(false),
|
|
3173
|
-
children: /* @__PURE__ */
|
|
3204
|
+
children: /* @__PURE__ */ jsx40(ArrowLeftIcon, { className: "m-0" })
|
|
3174
3205
|
}
|
|
3175
3206
|
) }),
|
|
3176
|
-
/* @__PURE__ */
|
|
3207
|
+
/* @__PURE__ */ jsx40(DepositFormContainer, {})
|
|
3177
3208
|
] });
|
|
3178
3209
|
}
|
|
3179
3210
|
return /* @__PURE__ */ jsxs24("div", { className: "flex flex-col gap-4", children: [
|
|
3180
3211
|
/* @__PURE__ */ jsxs24("div", { className: "flex justify-between gap-4", children: [
|
|
3181
3212
|
/* @__PURE__ */ jsxs24("div", { children: [
|
|
3182
|
-
/* @__PURE__ */
|
|
3183
|
-
/* @__PURE__ */
|
|
3213
|
+
/* @__PURE__ */ jsx40("div", { children: "Gas balance" }),
|
|
3214
|
+
/* @__PURE__ */ jsx40("div", { className: "font-mono text-white", children: balance.data != null ? /* @__PURE__ */ jsx40(Balance, { wei: balance.data }) : /* @__PURE__ */ jsx40(PendingIcon, { className: "text-sm" }) })
|
|
3184
3215
|
] }),
|
|
3185
3216
|
/* @__PURE__ */ jsxs24("div", { className: "flex flex-col gap-1 justify-center items-center", children: [
|
|
3186
|
-
/* @__PURE__ */
|
|
3217
|
+
/* @__PURE__ */ jsx40(
|
|
3187
3218
|
Button,
|
|
3188
3219
|
{
|
|
3189
3220
|
variant: isActive ? "primary" : "tertiary",
|
|
@@ -3194,15 +3225,15 @@ function GasBalance2({ isActive, isExpanded, isFocused, setFocused, userAddress
|
|
|
3194
3225
|
children: "Top up"
|
|
3195
3226
|
}
|
|
3196
3227
|
),
|
|
3197
|
-
/* @__PURE__ */
|
|
3228
|
+
/* @__PURE__ */ jsx40(WithdrawGasBalanceButton, { userAddress })
|
|
3198
3229
|
] })
|
|
3199
3230
|
] }),
|
|
3200
|
-
isExpanded ? /* @__PURE__ */
|
|
3231
|
+
isExpanded ? /* @__PURE__ */ jsx40("p", { className: "text-sm", children: "Your gas balance is used to pay for onchain computation." }) : null
|
|
3201
3232
|
] });
|
|
3202
3233
|
}
|
|
3203
3234
|
|
|
3204
3235
|
// src/onboarding/ConnectedSteps.tsx
|
|
3205
|
-
import { jsx as
|
|
3236
|
+
import { jsx as jsx41 } from "react/jsx-runtime";
|
|
3206
3237
|
function ConnectedSteps({ userClient, initialUserAddress }) {
|
|
3207
3238
|
const { chain } = useEntryKitConfig();
|
|
3208
3239
|
const paymaster = getPaymaster(chain);
|
|
@@ -3243,7 +3274,7 @@ function ConnectedSteps({ userClient, initialUserAddress }) {
|
|
|
3243
3274
|
{
|
|
3244
3275
|
id: "wallet",
|
|
3245
3276
|
isComplete: true,
|
|
3246
|
-
content: (props) => /* @__PURE__ */
|
|
3277
|
+
content: (props) => /* @__PURE__ */ jsx41(Wallet, { ...props, userAddress })
|
|
3247
3278
|
}
|
|
3248
3279
|
];
|
|
3249
3280
|
if (!paymaster) {
|
|
@@ -3251,7 +3282,7 @@ function ConnectedSteps({ userClient, initialUserAddress }) {
|
|
|
3251
3282
|
steps2.push({
|
|
3252
3283
|
id: "gasBalance",
|
|
3253
3284
|
isComplete: !!hasGasBalance,
|
|
3254
|
-
content: (props) => /* @__PURE__ */
|
|
3285
|
+
content: (props) => /* @__PURE__ */ jsx41(GasBalance, { ...props, sessionAddress })
|
|
3255
3286
|
});
|
|
3256
3287
|
}
|
|
3257
3288
|
} else if (paymaster.type === "quarry") {
|
|
@@ -3259,20 +3290,20 @@ function ConnectedSteps({ userClient, initialUserAddress }) {
|
|
|
3259
3290
|
steps2.push({
|
|
3260
3291
|
id: "allowance",
|
|
3261
3292
|
isComplete: !!hasAllowance,
|
|
3262
|
-
content: (props) => /* @__PURE__ */
|
|
3293
|
+
content: (props) => /* @__PURE__ */ jsx41(Allowance, { ...props, userAddress })
|
|
3263
3294
|
});
|
|
3264
3295
|
} else {
|
|
3265
3296
|
steps2.push({
|
|
3266
3297
|
id: "gasBalanceQuarry",
|
|
3267
3298
|
isComplete: !!hasQuarryGasBalance,
|
|
3268
|
-
content: (props) => /* @__PURE__ */
|
|
3299
|
+
content: (props) => /* @__PURE__ */ jsx41(GasBalance2, { ...props, userAddress })
|
|
3269
3300
|
});
|
|
3270
3301
|
}
|
|
3271
3302
|
}
|
|
3272
3303
|
steps2.push({
|
|
3273
3304
|
id: "session",
|
|
3274
3305
|
isComplete: !!isSpender && !!hasDelegation,
|
|
3275
|
-
content: (props) => /* @__PURE__ */
|
|
3306
|
+
content: (props) => /* @__PURE__ */ jsx41(Session, { ...props, userClient, registerSpender: !isSpender, registerDelegation: !hasDelegation })
|
|
3276
3307
|
});
|
|
3277
3308
|
return steps2;
|
|
3278
3309
|
}, [
|
|
@@ -3291,7 +3322,7 @@ function ConnectedSteps({ userClient, initialUserAddress }) {
|
|
|
3291
3322
|
const completedSteps = steps.filter((step) => step.isComplete);
|
|
3292
3323
|
const activeStep = (selectedStepId != null ? steps.find((step) => step.id === selectedStepId) : null) ?? nextStep ?? (completedSteps.length < steps.length ? completedSteps.at(-1) : null);
|
|
3293
3324
|
const activeStepIndex = activeStep ? steps.indexOf(activeStep) : -1;
|
|
3294
|
-
return /* @__PURE__ */
|
|
3325
|
+
return /* @__PURE__ */ jsx41(
|
|
3295
3326
|
"div",
|
|
3296
3327
|
{
|
|
3297
3328
|
className: twMerge18(
|
|
@@ -3316,7 +3347,7 @@ function ConnectedSteps({ userClient, initialUserAddress }) {
|
|
|
3316
3347
|
}
|
|
3317
3348
|
return null;
|
|
3318
3349
|
}
|
|
3319
|
-
return /* @__PURE__ */
|
|
3350
|
+
return /* @__PURE__ */ jsx41("div", { className: twMerge18("py-8 flex flex-col justify-center", isActive ? "flex-grow" : null), children: /* @__PURE__ */ jsx41("div", { className: twMerge18("flex flex-col", isDisabled ? "opacity-30 pointer-events-none" : null), children: content }) }, step.id);
|
|
3320
3351
|
})
|
|
3321
3352
|
}
|
|
3322
3353
|
);
|
|
@@ -3324,16 +3355,16 @@ function ConnectedSteps({ userClient, initialUserAddress }) {
|
|
|
3324
3355
|
|
|
3325
3356
|
// src/AccountModalContent.tsx
|
|
3326
3357
|
import { useRef as useRef6 } from "react";
|
|
3327
|
-
import { jsx as
|
|
3358
|
+
import { jsx as jsx42 } from "react/jsx-runtime";
|
|
3328
3359
|
function AccountModalContent() {
|
|
3329
3360
|
const { chainId } = useEntryKitConfig();
|
|
3330
3361
|
const userClient = useConnectorClient({ chainId });
|
|
3331
3362
|
const { address: userAddress } = useAccount8();
|
|
3332
3363
|
const initialUserAddress = useRef6(userAddress);
|
|
3333
3364
|
if (userClient.status !== "success") {
|
|
3334
|
-
return /* @__PURE__ */
|
|
3365
|
+
return /* @__PURE__ */ jsx42(ConnectWallet, {});
|
|
3335
3366
|
}
|
|
3336
|
-
return /* @__PURE__ */
|
|
3367
|
+
return /* @__PURE__ */ jsx42(ConnectedSteps, { userClient: userClient.data, initialUserAddress: initialUserAddress.current });
|
|
3337
3368
|
}
|
|
3338
3369
|
|
|
3339
3370
|
// src/AccountModal.tsx
|
|
@@ -3344,7 +3375,7 @@ import { ErrorBoundary } from "react-error-boundary";
|
|
|
3344
3375
|
import { wait } from "@latticexyz/common/utils";
|
|
3345
3376
|
import { useEffect as useEffect16 } from "react";
|
|
3346
3377
|
import { twMerge as twMerge19 } from "tailwind-merge";
|
|
3347
|
-
import { Fragment as
|
|
3378
|
+
import { Fragment as Fragment6, jsx as jsx43, jsxs as jsxs25 } from "react/jsx-runtime";
|
|
3348
3379
|
function ErrorOverlay({ error: error2, retry, dismiss }) {
|
|
3349
3380
|
useEffect16(() => {
|
|
3350
3381
|
if (error2) {
|
|
@@ -3352,7 +3383,7 @@ function ErrorOverlay({ error: error2, retry, dismiss }) {
|
|
|
3352
3383
|
}
|
|
3353
3384
|
}, [error2]);
|
|
3354
3385
|
return /* @__PURE__ */ jsxs25("div", { className: "pointer-events-none absolute inset-0 overflow-clip", children: [
|
|
3355
|
-
/* @__PURE__ */
|
|
3386
|
+
/* @__PURE__ */ jsx43(
|
|
3356
3387
|
"div",
|
|
3357
3388
|
{
|
|
3358
3389
|
className: twMerge19(
|
|
@@ -3362,7 +3393,7 @@ function ErrorOverlay({ error: error2, retry, dismiss }) {
|
|
|
3362
3393
|
)
|
|
3363
3394
|
}
|
|
3364
3395
|
),
|
|
3365
|
-
/* @__PURE__ */
|
|
3396
|
+
/* @__PURE__ */ jsx43(
|
|
3366
3397
|
"div",
|
|
3367
3398
|
{
|
|
3368
3399
|
className: twMerge19(
|
|
@@ -3370,15 +3401,15 @@ function ErrorOverlay({ error: error2, retry, dismiss }) {
|
|
|
3370
3401
|
"transition duration-300",
|
|
3371
3402
|
error2 ? "translate-y-0 opacity-100 pointer-events-auto" : "-translate-y-4 opacity-0"
|
|
3372
3403
|
),
|
|
3373
|
-
children: error2 ? /* @__PURE__ */
|
|
3404
|
+
children: error2 ? /* @__PURE__ */ jsx43(Fragment6, { children: /* @__PURE__ */ jsxs25("div", { className: "w-full max-h-full bg-blue-700 text-white/80 overflow-auto", children: [
|
|
3374
3405
|
/* @__PURE__ */ jsxs25("div", { className: "space-y-6 px-8 pt-8", children: [
|
|
3375
|
-
/* @__PURE__ */
|
|
3376
|
-
/* @__PURE__ */
|
|
3377
|
-
/* @__PURE__ */
|
|
3406
|
+
/* @__PURE__ */ jsx43("div", { className: "text-white text-lg font-bold", children: "Oops! It broke :(" }),
|
|
3407
|
+
/* @__PURE__ */ jsx43("div", { className: "font-mono text-xs whitespace-pre-wrap", children: error2.message.trim() }),
|
|
3408
|
+
/* @__PURE__ */ jsx43("div", { className: "text-sm", children: "See the console for more info." })
|
|
3378
3409
|
] }),
|
|
3379
3410
|
/* @__PURE__ */ jsxs25("div", { className: "pointer-events-none sticky bottom-0 left-0 -mt-2", children: [
|
|
3380
|
-
/* @__PURE__ */
|
|
3381
|
-
retry ? /* @__PURE__ */
|
|
3411
|
+
/* @__PURE__ */ jsx43("div", { className: "w-full h-12 bg-gradient-to-b from-transparent to-blue-700" }),
|
|
3412
|
+
retry ? /* @__PURE__ */ jsx43("div", { className: "bg-blue-700 text-center", children: /* @__PURE__ */ jsxs25(
|
|
3382
3413
|
"button",
|
|
3383
3414
|
{
|
|
3384
3415
|
type: "button",
|
|
@@ -3397,11 +3428,11 @@ function ErrorOverlay({ error: error2, retry, dismiss }) {
|
|
|
3397
3428
|
}
|
|
3398
3429
|
},
|
|
3399
3430
|
children: [
|
|
3400
|
-
/* @__PURE__ */
|
|
3401
|
-
/* @__PURE__ */
|
|
3431
|
+
/* @__PURE__ */ jsx43("span", { className: "group-aria-busy:hidden", children: "Retry" }),
|
|
3432
|
+
/* @__PURE__ */ jsx43("span", { className: "hidden group-aria-busy:inline", children: "Retrying\u2026" })
|
|
3402
3433
|
]
|
|
3403
3434
|
}
|
|
3404
|
-
) }) : dismiss ? /* @__PURE__ */
|
|
3435
|
+
) }) : dismiss ? /* @__PURE__ */ jsx43("div", { className: "bg-blue-700 text-center", children: /* @__PURE__ */ jsx43(
|
|
3405
3436
|
"button",
|
|
3406
3437
|
{
|
|
3407
3438
|
type: "button",
|
|
@@ -3423,24 +3454,24 @@ function ErrorOverlay({ error: error2, retry, dismiss }) {
|
|
|
3423
3454
|
}
|
|
3424
3455
|
|
|
3425
3456
|
// src/errors/ErrorFallback.tsx
|
|
3426
|
-
import { jsx as
|
|
3457
|
+
import { jsx as jsx44 } from "react/jsx-runtime";
|
|
3427
3458
|
function ErrorFallback({ error: error2, resetErrorBoundary }) {
|
|
3428
|
-
return /* @__PURE__ */
|
|
3459
|
+
return /* @__PURE__ */ jsx44("div", { className: "h-64", children: /* @__PURE__ */ jsx44(ErrorOverlay, { error: error2, retry: resetErrorBoundary }) });
|
|
3429
3460
|
}
|
|
3430
3461
|
|
|
3431
3462
|
// src/errors/ErrorsOverlay.tsx
|
|
3432
3463
|
import { useStore as useStore3 } from "zustand";
|
|
3433
|
-
import { jsx as
|
|
3464
|
+
import { jsx as jsx45 } from "react/jsx-runtime";
|
|
3434
3465
|
function ErrorsOverlay() {
|
|
3435
3466
|
const error2 = useStore3(store3, (state) => state.errors.at(0));
|
|
3436
|
-
return /* @__PURE__ */
|
|
3467
|
+
return /* @__PURE__ */ jsx45(ErrorOverlay, { error: error2?.error, retry: error2?.retry, dismiss: error2?.dismiss });
|
|
3437
3468
|
}
|
|
3438
3469
|
|
|
3439
3470
|
// src/AccountModal.tsx
|
|
3440
|
-
import { jsx as
|
|
3471
|
+
import { jsx as jsx46, jsxs as jsxs26 } from "react/jsx-runtime";
|
|
3441
3472
|
function AccountModal() {
|
|
3442
3473
|
const { accountModalOpen, toggleAccountModal } = useAccountModal();
|
|
3443
|
-
return /* @__PURE__ */
|
|
3474
|
+
return /* @__PURE__ */ jsx46(Modal, { open: accountModalOpen, onOpenChange: toggleAccountModal, children: accountModalOpen ? /* @__PURE__ */ jsxs26(
|
|
3444
3475
|
"div",
|
|
3445
3476
|
{
|
|
3446
3477
|
className: twMerge20(
|
|
@@ -3452,8 +3483,8 @@ function AccountModal() {
|
|
|
3452
3483
|
),
|
|
3453
3484
|
children: [
|
|
3454
3485
|
/* @__PURE__ */ jsxs26(ErrorBoundary, { FallbackComponent: ErrorFallback, children: [
|
|
3455
|
-
/* @__PURE__ */
|
|
3456
|
-
/* @__PURE__ */
|
|
3486
|
+
/* @__PURE__ */ jsx46(AccountModalContent, {}),
|
|
3487
|
+
/* @__PURE__ */ jsx46(ErrorsOverlay, {})
|
|
3457
3488
|
] }),
|
|
3458
3489
|
/* @__PURE__ */ jsxs26(
|
|
3459
3490
|
"a",
|
|
@@ -3463,12 +3494,12 @@ function AccountModal() {
|
|
|
3463
3494
|
rel: "noreferrer noopener",
|
|
3464
3495
|
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",
|
|
3465
3496
|
children: [
|
|
3466
|
-
/* @__PURE__ */
|
|
3467
|
-
/* @__PURE__ */
|
|
3497
|
+
/* @__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" }) }),
|
|
3498
|
+
/* @__PURE__ */ jsx46("span", { children: "Powered by MUD" })
|
|
3468
3499
|
]
|
|
3469
3500
|
}
|
|
3470
3501
|
),
|
|
3471
|
-
/* @__PURE__ */
|
|
3502
|
+
/* @__PURE__ */ jsx46("div", { className: "absolute top-0 right-0", children: /* @__PURE__ */ jsx46(
|
|
3472
3503
|
DialogClose,
|
|
3473
3504
|
{
|
|
3474
3505
|
className: twMerge20(
|
|
@@ -3476,7 +3507,7 @@ function AccountModal() {
|
|
|
3476
3507
|
"text-white/20 hover:text-white/40"
|
|
3477
3508
|
),
|
|
3478
3509
|
title: "Close",
|
|
3479
|
-
children: /* @__PURE__ */
|
|
3510
|
+
children: /* @__PURE__ */ jsx46(CloseIcon, { className: "m-0" })
|
|
3480
3511
|
}
|
|
3481
3512
|
) })
|
|
3482
3513
|
]
|
|
@@ -3485,11 +3516,11 @@ function AccountModal() {
|
|
|
3485
3516
|
}
|
|
3486
3517
|
|
|
3487
3518
|
// src/EntryKitProvider.tsx
|
|
3488
|
-
import { jsx as
|
|
3519
|
+
import { jsx as jsx47, jsxs as jsxs27 } from "react/jsx-runtime";
|
|
3489
3520
|
function EntryKitProvider({ config, children }) {
|
|
3490
3521
|
return /* @__PURE__ */ jsxs27(EntryKitConfigProvider, { config, children: [
|
|
3491
3522
|
children,
|
|
3492
|
-
/* @__PURE__ */
|
|
3523
|
+
/* @__PURE__ */ jsx47(AccountModal, {})
|
|
3493
3524
|
] });
|
|
3494
3525
|
}
|
|
3495
3526
|
|
|
@@ -3499,13 +3530,13 @@ import { twMerge as twMerge22 } from "tailwind-merge";
|
|
|
3499
3530
|
|
|
3500
3531
|
// src/AccountName.tsx
|
|
3501
3532
|
import { twMerge as twMerge21 } from "tailwind-merge";
|
|
3502
|
-
import { Fragment as
|
|
3533
|
+
import { Fragment as Fragment7, jsx as jsx48, jsxs as jsxs28 } from "react/jsx-runtime";
|
|
3503
3534
|
function AccountName({ address }) {
|
|
3504
3535
|
const { data: ens } = useENS(address);
|
|
3505
3536
|
const avatar = usePreloadImage(ens?.avatar);
|
|
3506
|
-
return /* @__PURE__ */ jsxs28(
|
|
3537
|
+
return /* @__PURE__ */ jsxs28(Fragment7, { children: [
|
|
3507
3538
|
/* @__PURE__ */ jsxs28("span", { className: "flex-shrink-0 w-6 h-6 -my-1 -mx-0.5 grid place-items-center", children: [
|
|
3508
|
-
/* @__PURE__ */
|
|
3539
|
+
/* @__PURE__ */ jsx48(
|
|
3509
3540
|
"img",
|
|
3510
3541
|
{
|
|
3511
3542
|
src: ens?.avatar && avatar.isSuccess ? ens.avatar : void 0,
|
|
@@ -3517,7 +3548,7 @@ function AccountName({ address }) {
|
|
|
3517
3548
|
)
|
|
3518
3549
|
}
|
|
3519
3550
|
),
|
|
3520
|
-
/* @__PURE__ */
|
|
3551
|
+
/* @__PURE__ */ jsx48(
|
|
3521
3552
|
Logo,
|
|
3522
3553
|
{
|
|
3523
3554
|
className: twMerge21(
|
|
@@ -3528,13 +3559,13 @@ function AccountName({ address }) {
|
|
|
3528
3559
|
}
|
|
3529
3560
|
)
|
|
3530
3561
|
] }),
|
|
3531
|
-
/* @__PURE__ */
|
|
3562
|
+
/* @__PURE__ */ jsx48("span", { className: "flex-grow", children: ens?.name ?? /* @__PURE__ */ jsx48(TruncatedHex, { hex: address }) })
|
|
3532
3563
|
] });
|
|
3533
3564
|
}
|
|
3534
3565
|
|
|
3535
3566
|
// src/AccountButton.tsx
|
|
3536
3567
|
import { useRef as useRef7 } from "react";
|
|
3537
|
-
import { jsx as
|
|
3568
|
+
import { jsx as jsx49, jsxs as jsxs29 } from "react/jsx-runtime";
|
|
3538
3569
|
var containerClassNames = twMerge22(
|
|
3539
3570
|
"w-48 p-3 inline-flex outline-none transition",
|
|
3540
3571
|
"border border-transparent",
|
|
@@ -3562,13 +3593,13 @@ function AccountButton() {
|
|
|
3562
3593
|
}
|
|
3563
3594
|
return "Sign in";
|
|
3564
3595
|
})();
|
|
3565
|
-
return /* @__PURE__ */
|
|
3596
|
+
return /* @__PURE__ */ jsx49(Shadow, { mode: "child", children: isSignedIn ? /* @__PURE__ */ jsx49(
|
|
3566
3597
|
"button",
|
|
3567
3598
|
{
|
|
3568
3599
|
type: "button",
|
|
3569
3600
|
className: twMerge22(containerClassNames, secondaryClassNames, secondaryInteractiveClassNames),
|
|
3570
3601
|
onClick: openAccountModal,
|
|
3571
|
-
children: /* @__PURE__ */
|
|
3602
|
+
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 })
|
|
3572
3603
|
},
|
|
3573
3604
|
"connected"
|
|
3574
3605
|
) : /* @__PURE__ */ jsxs29(
|
|
@@ -3587,7 +3618,7 @@ function AccountButton() {
|
|
|
3587
3618
|
onClick: openAccountModal,
|
|
3588
3619
|
children: [
|
|
3589
3620
|
/* @__PURE__ */ jsxs29("span", { className: "pointer-events-none inline-grid place-items-center -ml-3", children: [
|
|
3590
|
-
/* @__PURE__ */
|
|
3621
|
+
/* @__PURE__ */ jsx49(
|
|
3591
3622
|
"span",
|
|
3592
3623
|
{
|
|
3593
3624
|
className: twMerge22(
|
|
@@ -3595,10 +3626,10 @@ function AccountButton() {
|
|
|
3595
3626
|
"scale-100 opacity-100 transition duration-300",
|
|
3596
3627
|
"group-aria-busy:scale-125 group-aria-busy:opacity-0"
|
|
3597
3628
|
),
|
|
3598
|
-
children: /* @__PURE__ */
|
|
3629
|
+
children: /* @__PURE__ */ jsx49(Logo, {})
|
|
3599
3630
|
}
|
|
3600
3631
|
),
|
|
3601
|
-
/* @__PURE__ */
|
|
3632
|
+
/* @__PURE__ */ jsx49(
|
|
3602
3633
|
"span",
|
|
3603
3634
|
{
|
|
3604
3635
|
"aria-hidden": true,
|
|
@@ -3607,11 +3638,11 @@ function AccountButton() {
|
|
|
3607
3638
|
"scale-50 opacity-0 transition duration-300 delay-50",
|
|
3608
3639
|
"group-aria-busy:scale-100 group-aria-busy:opacity-100"
|
|
3609
3640
|
),
|
|
3610
|
-
children: /* @__PURE__ */
|
|
3641
|
+
children: /* @__PURE__ */ jsx49(PendingIcon, {})
|
|
3611
3642
|
}
|
|
3612
3643
|
)
|
|
3613
3644
|
] }),
|
|
3614
|
-
/* @__PURE__ */
|
|
3645
|
+
/* @__PURE__ */ jsx49("span", { className: "font-medium", children: buttonLabel })
|
|
3615
3646
|
]
|
|
3616
3647
|
},
|
|
3617
3648
|
"sign in"
|