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