@latticexyz/entrykit 2.2.23-e9e21c9f1f7d164af1b19f327d798ed2f2d0fd95 → 2.2.24-1f509ee224cadd4254e7bbb7a268b519f65e4495
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -22,7 +22,7 @@ import { forwardRef, useEffect, useRef, useState } from "react";
|
|
|
22
22
|
import ReactDOM from "react-dom";
|
|
23
23
|
|
|
24
24
|
// ../../node_modules/.pnpm/tailwindcss@3.4.13/node_modules/tailwindcss/tailwind.css?inline
|
|
25
|
-
var tailwind_default = '*, ::before, ::after {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-gradient-from-position: ;\n --tw-gradient-via-position: ;\n --tw-gradient-to-position: ;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(59 130 246 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n --tw-contain-size: ;\n --tw-contain-layout: ;\n --tw-contain-paint: ;\n --tw-contain-style: ;\n}\n\n::backdrop {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-gradient-from-position: ;\n --tw-gradient-via-position: ;\n --tw-gradient-to-position: ;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(59 130 246 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n --tw-contain-size: ;\n --tw-contain-layout: ;\n --tw-contain-paint: ;\n --tw-contain-style: ;\n}/*\n! tailwindcss v3.4.13 | MIT License | https://tailwindcss.com\n*//*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n\n*,\n::before,\n::after {\n box-sizing: border-box; /* 1 */\n border-width: 0; /* 2 */\n border-style: solid; /* 2 */\n border-color: #e5e7eb; /* 2 */\n}\n\n::before,\n::after {\n --tw-content: \'\';\n}\n\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user\'s configured `sans` font-family by default.\n5. Use the user\'s configured `sans` font-feature-settings by default.\n6. Use the user\'s configured `sans` font-variation-settings by default.\n7. Disable tap highlights on iOS\n*/\n\nhtml,\n:host {\n line-height: 1.5; /* 1 */\n -webkit-text-size-adjust: 100%; /* 2 */ /* 3 */\n tab-size: 4; /* 3 */\n font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */\n font-feature-settings: normal; /* 5 */\n font-variation-settings: normal; /* 6 */\n -webkit-tap-highlight-color: transparent; /* 7 */\n}\n\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\n\nbody {\n margin: 0; /* 1 */\n line-height: inherit; /* 2 */\n}\n\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\n\nhr {\n height: 0; /* 1 */\n color: inherit; /* 2 */\n border-top-width: 1px; /* 3 */\n}\n\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n}\n\n/*\nRemove the default font size and weight for headings.\n*/\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-size: inherit;\n font-weight: inherit;\n}\n\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\n\na {\n color: inherit;\n text-decoration: inherit;\n}\n\n/*\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n font-weight: bolder;\n}\n\n/*\n1. Use the user\'s configured `mono` font-family by default.\n2. Use the user\'s configured `mono` font-feature-settings by default.\n3. Use the user\'s configured `mono` font-variation-settings by default.\n4. Correct the odd `em` font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */\n font-feature-settings: normal; /* 2 */\n font-variation-settings: normal; /* 3 */\n font-size: 1em; /* 4 */\n}\n\n/*\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n font-size: 80%;\n}\n\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\n\ntable {\n text-indent: 0; /* 1 */\n border-color: inherit; /* 2 */\n border-collapse: collapse; /* 3 */\n}\n\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit; /* 1 */\n font-feature-settings: inherit; /* 1 */\n font-variation-settings: inherit; /* 1 */\n font-size: 100%; /* 1 */\n font-weight: inherit; /* 1 */\n line-height: inherit; /* 1 */\n letter-spacing: inherit; /* 1 */\n color: inherit; /* 1 */\n margin: 0; /* 2 */\n padding: 0; /* 3 */\n}\n\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\n\nbutton,\nselect {\n text-transform: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\n\nbutton,\ninput:where([type=\'button\']),\ninput:where([type=\'reset\']),\ninput:where([type=\'submit\']) {\n -webkit-appearance: button; /* 1 */\n background-color: transparent; /* 2 */\n background-image: none; /* 2 */\n}\n\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n\n:-moz-focusring {\n outline: auto;\n}\n\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n\n:-moz-ui-invalid {\n box-shadow: none;\n}\n\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n vertical-align: baseline;\n}\n\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n height: auto;\n}\n\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type=\'search\'] {\n -webkit-appearance: textfield; /* 1 */\n outline-offset: -2px; /* 2 */\n}\n\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n\n::-webkit-file-upload-button {\n -webkit-appearance: button; /* 1 */\n font: inherit; /* 2 */\n}\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n display: list-item;\n}\n\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n margin: 0;\n}\n\nfieldset {\n margin: 0;\n padding: 0;\n}\n\nlegend {\n padding: 0;\n}\n\nol,\nul,\nmenu {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n/*\nReset default styling for dialogs.\n*/\ndialog {\n padding: 0;\n}\n\n/*\nPrevent resizing textareas horizontally by default.\n*/\n\ntextarea {\n resize: vertical;\n}\n\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user\'s configured gray 400 color.\n*/\n\ninput::placeholder,\ntextarea::placeholder {\n opacity: 1; /* 1 */\n color: #9ca3af; /* 2 */\n}\n\n/*\nSet the default cursor for buttons.\n*/\n\nbutton,\n[role="button"] {\n cursor: pointer;\n}\n\n/*\nMake sure disabled buttons don\'t get the pointer cursor.\n*/\n:disabled {\n cursor: default;\n}\n\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n This can trigger a poorly considered lint error in some tools but is included by design.\n*/\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n display: block; /* 1 */\n vertical-align: middle; /* 2 */\n}\n\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\n\nimg,\nvideo {\n max-width: 100%;\n height: auto;\n}\n\n/* Make elements with the HTML hidden attribute stay hidden by default */\n[hidden] {\n display: none;\n}\n\n.container {\n width: 100%;\n}\n\n@media (min-width: 640px) {\n\n .container {\n max-width: 640px;\n }\n}\n\n@media (min-width: 768px) {\n\n .container {\n max-width: 768px;\n }\n}\n\n@media (min-width: 1024px) {\n\n .container {\n max-width: 1024px;\n }\n}\n\n@media (min-width: 1280px) {\n\n .container {\n max-width: 1280px;\n }\n}\n\n@media (min-width: 1536px) {\n\n .container {\n max-width: 1536px;\n }\n}\n\n.grid-cols-2.divide-y > :not([hidden]) ~ :not([hidden]):nth-child(-n + 2) {\n border-top-width: 0;\n border-bottom-width: 0;\n}\n\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n\n.pointer-events-none {\n pointer-events: none;\n}\n\n.pointer-events-auto {\n pointer-events: auto;\n}\n\n.fixed {\n position: fixed;\n}\n\n.absolute {\n position: absolute;\n}\n\n.relative {\n position: relative;\n}\n\n.sticky {\n position: sticky;\n}\n\n.inset-0 {\n inset: 0px;\n}\n\n.bottom-0 {\n bottom: 0px;\n}\n\n.left-0 {\n left: 0px;\n}\n\n.right-0 {\n right: 0px;\n}\n\n.top-0 {\n top: 0px;\n}\n\n.col-start-1 {\n grid-column-start: 1;\n}\n\n.row-start-1 {\n grid-row-start: 1;\n}\n\n.m-0 {\n margin: 0px;\n}\n\n.m-2 {\n margin: 0.5rem;\n}\n\n.-mx-0\\.5 {\n margin-left: -0.125rem;\n margin-right: -0.125rem;\n}\n\n.-my-1 {\n margin-top: -0.25rem;\n margin-bottom: -0.25rem;\n}\n\n.-my-\\[0\\.125em\\] {\n margin-top: -0.125em;\n margin-bottom: -0.125em;\n}\n\n.mx-auto {\n margin-left: auto;\n margin-right: auto;\n}\n\n.-ml-3 {\n margin-left: -0.75rem;\n}\n\n.-mr-1 {\n margin-right: -0.25rem;\n}\n\n.-mt-2 {\n margin-top: -0.5rem;\n}\n\n.mt-1 {\n margin-top: 0.25rem;\n}\n\n.mt-4 {\n margin-top: 1rem;\n}\n\n.block {\n display: block;\n}\n\n.inline-block {\n display: inline-block;\n}\n\n.flex {\n display: flex;\n}\n\n.inline-flex {\n display: inline-flex;\n}\n\n.table {\n display: table;\n}\n\n.grid {\n display: grid;\n}\n\n.inline-grid {\n display: inline-grid;\n}\n\n.contents {\n display: contents;\n}\n\n.hidden {\n display: none;\n}\n\n.aspect-square {\n aspect-ratio: 1 / 1;\n}\n\n.h-10 {\n height: 2.5rem;\n}\n\n.h-12 {\n height: 3rem;\n}\n\n.h-16 {\n height: 4rem;\n}\n\n.h-3 {\n height: 0.75rem;\n}\n\n.h-3\\.5 {\n height: 0.875rem;\n}\n\n.h-4 {\n height: 1rem;\n}\n\n.h-6 {\n height: 1.5rem;\n}\n\n.h-64 {\n height: 16rem;\n}\n\n.h-\\[1\\.25em\\] {\n height: 1.25em;\n}\n\n.h-\\[1em\\] {\n height: 1em;\n}\n\n.h-\\[2px\\] {\n height: 2px;\n}\n\n.h-full {\n height: 100%;\n}\n\n.max-h-\\[230px\\] {\n max-height: 230px;\n}\n\n.max-h-full {\n max-height: 100%;\n}\n\n.w-10 {\n width: 2.5rem;\n}\n\n.w-16 {\n width: 4rem;\n}\n\n.w-24 {\n width: 6rem;\n}\n\n.w-28 {\n width: 7rem;\n}\n\n.w-3 {\n width: 0.75rem;\n}\n\n.w-3\\.5 {\n width: 0.875rem;\n}\n\n.w-4 {\n width: 1rem;\n}\n\n.w-48 {\n width: 12rem;\n}\n\n.w-6 {\n width: 1.5rem;\n}\n\n.w-60 {\n width: 15rem;\n}\n\n.w-8 {\n width: 2rem;\n}\n\n.w-\\[0\\.6em\\] {\n width: 0.6em;\n}\n\n.w-\\[1\\.25em\\] {\n width: 1.25em;\n}\n\n.w-\\[352px\\] {\n width: 352px;\n}\n\n.w-full {\n width: 100%;\n}\n\n.max-w-\\[26rem\\] {\n max-width: 26rem;\n}\n\n.flex-shrink-0 {\n flex-shrink: 0;\n}\n\n.flex-grow {\n flex-grow: 1;\n}\n\n.-translate-y-2 {\n --tw-translate-y: -0.5rem;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.-translate-y-4 {\n --tw-translate-y: -1rem;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.translate-x-2 {\n --tw-translate-x: 0.5rem;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.translate-y-0 {\n --tw-translate-y: 0px;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.scale-100 {\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.scale-50 {\n --tw-scale-x: .5;\n --tw-scale-y: .5;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.transform {\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n@keyframes spin {\n\n to {\n transform: rotate(360deg);\n }\n}\n\n.animate-spin {\n animation: spin 1s linear infinite;\n}\n\n.cursor-pointer {\n cursor: pointer;\n}\n\n.cursor-text {\n cursor: text;\n}\n\n.grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n\n.grid-cols-\\[1fr_auto_1fr\\] {\n grid-template-columns: 1fr auto 1fr;\n}\n\n.flex-col {\n flex-direction: column;\n}\n\n.place-items-center {\n place-items: center;\n}\n\n.items-end {\n align-items: flex-end;\n}\n\n.items-center {\n align-items: center;\n}\n\n.justify-end {\n justify-content: flex-end;\n}\n\n.justify-center {\n justify-content: center;\n}\n\n.justify-between {\n justify-content: space-between;\n}\n\n.gap-1 {\n gap: 0.25rem;\n}\n\n.gap-2 {\n gap: 0.5rem;\n}\n\n.gap-2\\.5 {\n gap: 0.625rem;\n}\n\n.gap-4 {\n gap: 1rem;\n}\n\n.gap-5 {\n gap: 1.25rem;\n}\n\n.gap-6 {\n gap: 1.5rem;\n}\n\n.space-y-6 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));\n}\n\n.divide-y > :not([hidden]) ~ :not([hidden]) {\n --tw-divide-y-reverse: 0;\n border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));\n border-bottom-width: calc(1px * var(--tw-divide-y-reverse));\n}\n\n.divide-neutral-700 > :not([hidden]) ~ :not([hidden]) {\n --tw-divide-opacity: 1;\n border-color: rgb(64 64 64 / var(--tw-divide-opacity));\n}\n\n.divide-neutral-800 > :not([hidden]) ~ :not([hidden]) {\n --tw-divide-opacity: 1;\n border-color: rgb(38 38 38 / var(--tw-divide-opacity));\n}\n\n.self-auto {\n align-self: auto;\n}\n\n.self-center {\n align-self: center;\n}\n\n.overflow-auto {\n overflow: auto;\n}\n\n.overflow-clip {\n overflow: clip;\n}\n\n.overflow-y-auto {\n overflow-y: auto;\n}\n\n.whitespace-nowrap {\n white-space: nowrap;\n}\n\n.whitespace-pre-wrap {\n white-space: pre-wrap;\n}\n\n.rounded-full {\n border-radius: 9999px;\n}\n\n.border {\n border-width: 1px;\n}\n\n.border-2 {\n border-width: 2px;\n}\n\n.border-4 {\n border-width: 4px;\n}\n\n.border-dashed {\n border-style: dashed;\n}\n\n.border-neutral-300 {\n --tw-border-opacity: 1;\n border-color: rgb(212 212 212 / var(--tw-border-opacity));\n}\n\n.border-neutral-700 {\n --tw-border-opacity: 1;\n border-color: rgb(64 64 64 / var(--tw-border-opacity));\n}\n\n.border-transparent {\n border-color: transparent;\n}\n\n.border-white\\/50 {\n border-color: rgb(255 255 255 / 0.5);\n}\n\n.bg-black\\/10 {\n background-color: rgb(0 0 0 / 0.1);\n}\n\n.bg-blue-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(37 99 235 / var(--tw-bg-opacity));\n}\n\n.bg-blue-700 {\n --tw-bg-opacity: 1;\n background-color: rgb(29 78 216 / var(--tw-bg-opacity));\n}\n\n.bg-blue-700\\/60 {\n background-color: rgb(29 78 216 / 0.6);\n}\n\n.bg-green-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(22 163 74 / var(--tw-bg-opacity));\n}\n\n.bg-neutral-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(245 245 245 / var(--tw-bg-opacity));\n}\n\n.bg-neutral-700 {\n --tw-bg-opacity: 1;\n background-color: rgb(64 64 64 / var(--tw-bg-opacity));\n}\n\n.bg-neutral-800 {\n --tw-bg-opacity: 1;\n background-color: rgb(38 38 38 / var(--tw-bg-opacity));\n}\n\n.bg-neutral-800\\/85 {\n background-color: rgb(38 38 38 / 0.85);\n}\n\n.bg-neutral-900 {\n --tw-bg-opacity: 1;\n background-color: rgb(23 23 23 / var(--tw-bg-opacity));\n}\n\n.bg-orange-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(249 115 22 / var(--tw-bg-opacity));\n}\n\n.bg-orange-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(234 88 12 / var(--tw-bg-opacity));\n}\n\n.bg-red-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(220 38 38 / var(--tw-bg-opacity));\n}\n\n.bg-transparent {\n background-color: transparent;\n}\n\n.bg-gradient-to-b {\n background-image: linear-gradient(to bottom, var(--tw-gradient-stops));\n}\n\n.from-transparent {\n --tw-gradient-from: transparent var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n}\n\n.to-blue-700 {\n --tw-gradient-to: #1d4ed8 var(--tw-gradient-to-position);\n}\n\n.bg-cover {\n background-size: cover;\n}\n\n.bg-center {\n background-position: center;\n}\n\n.bg-no-repeat {\n background-repeat: no-repeat;\n}\n\n.object-cover {\n object-fit: cover;\n}\n\n.p-1 {\n padding: 0.25rem;\n}\n\n.p-2 {\n padding: 0.5rem;\n}\n\n.p-2\\.5 {\n padding: 0.625rem;\n}\n\n.p-3 {\n padding: 0.75rem;\n}\n\n.p-4 {\n padding: 1rem;\n}\n\n.p-6 {\n padding: 1.5rem;\n}\n\n.p-\\[\\.75em\\] {\n padding: .75em;\n}\n\n.px-8 {\n padding-left: 2rem;\n padding-right: 2rem;\n}\n\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n\n.py-8 {\n padding-top: 2rem;\n padding-bottom: 2rem;\n}\n\n.pb-2 {\n padding-bottom: 0.5rem;\n}\n\n.pb-8 {\n padding-bottom: 2rem;\n}\n\n.pt-10 {\n padding-top: 2.5rem;\n}\n\n.pt-8 {\n padding-top: 2rem;\n}\n\n.text-left {\n text-align: left;\n}\n\n.text-center {\n text-align: center;\n}\n\n.font-mono {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;\n}\n\n.text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n\n.text-\\[\\.75em\\] {\n font-size: .75em;\n}\n\n.text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n\n.text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n\n.text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n\n.font-bold {\n font-weight: 700;\n}\n\n.font-medium {\n font-weight: 500;\n}\n\n.leading-loose {\n line-height: 2;\n}\n\n.leading-none {\n line-height: 1;\n}\n\n.tracking-\\[-1ch\\] {\n letter-spacing: -1ch;\n}\n\n.text-amber-500 {\n --tw-text-opacity: 1;\n color: rgb(245 158 11 / var(--tw-text-opacity));\n}\n\n.text-black {\n --tw-text-opacity: 1;\n color: rgb(0 0 0 / var(--tw-text-opacity));\n}\n\n.text-gray-400 {\n --tw-text-opacity: 1;\n color: rgb(156 163 175 / var(--tw-text-opacity));\n}\n\n.text-green-600 {\n --tw-text-opacity: 1;\n color: rgb(22 163 74 / var(--tw-text-opacity));\n}\n\n.text-neutral-300 {\n --tw-text-opacity: 1;\n color: rgb(212 212 212 / var(--tw-text-opacity));\n}\n\n.text-neutral-400 {\n --tw-text-opacity: 1;\n color: rgb(163 163 163 / var(--tw-text-opacity));\n}\n\n.text-neutral-500 {\n --tw-text-opacity: 1;\n color: rgb(115 115 115 / var(--tw-text-opacity));\n}\n\n.text-orange-500 {\n --tw-text-opacity: 1;\n color: rgb(249 115 22 / var(--tw-text-opacity));\n}\n\n.text-transparent {\n color: transparent;\n}\n\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n\n.text-white\\/20 {\n color: rgb(255 255 255 / 0.2);\n}\n\n.text-white\\/50 {\n color: rgb(255 255 255 / 0.5);\n}\n\n.text-white\\/80 {\n color: rgb(255 255 255 / 0.8);\n}\n\n.underline {\n text-decoration-line: underline;\n}\n\n.decoration-neutral-500 {\n text-decoration-color: #737373;\n}\n\n.underline-offset-4 {\n text-underline-offset: 4px;\n}\n\n.opacity-0 {\n opacity: 0;\n}\n\n.opacity-100 {\n opacity: 1;\n}\n\n.opacity-25 {\n opacity: 0.25;\n}\n\n.opacity-30 {\n opacity: 0.3;\n}\n\n.opacity-50 {\n opacity: 0.5;\n}\n\n.opacity-75 {\n opacity: 0.75;\n}\n\n.outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n\n.ring-1 {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.ring-2 {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.ring-neutral-700\\/50 {\n --tw-ring-color: rgb(64 64 64 / 0.5);\n}\n\n.ring-transparent {\n --tw-ring-color: transparent;\n}\n\n.filter {\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n\n.transition {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n\n.transition-colors {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n\n.duration-100 {\n transition-duration: 100ms;\n}\n\n.duration-300 {\n transition-duration: 300ms;\n}\n\n.ease-linear {\n transition-timing-function: linear;\n}\n\n@keyframes enter {\n\n from {\n opacity: var(--tw-enter-opacity, 1);\n transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));\n }\n}\n\n@keyframes exit {\n\n to {\n opacity: var(--tw-exit-opacity, 1);\n transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));\n }\n}\n\n.animate-in {\n animation-name: enter;\n animation-duration: 150ms;\n --tw-enter-opacity: initial;\n --tw-enter-scale: initial;\n --tw-enter-rotate: initial;\n --tw-enter-translate-x: initial;\n --tw-enter-translate-y: initial;\n}\n\n.animate-out {\n animation-name: exit;\n animation-duration: 150ms;\n --tw-exit-opacity: initial;\n --tw-exit-scale: initial;\n --tw-exit-rotate: initial;\n --tw-exit-translate-x: initial;\n --tw-exit-translate-y: initial;\n}\n\n.fade-in {\n --tw-enter-opacity: 0;\n}\n\n.fade-out {\n --tw-exit-opacity: 0;\n}\n\n.slide-in-from-bottom-16 {\n --tw-enter-translate-y: 4rem;\n}\n\n.slide-in-from-bottom-2 {\n --tw-enter-translate-y: 0.5rem;\n}\n\n.slide-in-from-bottom-8 {\n --tw-enter-translate-y: 2rem;\n}\n\n.slide-in-from-top-2 {\n --tw-enter-translate-y: -0.5rem;\n}\n\n.animate-duration-300 {\n animation-duration: 300ms;\n}\n\n.ease-linear {\n animation-timing-function: linear;\n}\n\n@property --tw-border-gradient-angle {\n syntax: \'<angle>\';\n inherits: true;\n initial-value: 0deg;\n}\n\n@property --tw-conic-gradient-angle {\n syntax: \'<angle>\';\n inherits: true;\n initial-value: 0deg;\n}\n\n@keyframes border-gradient {\n\n to {\n --tw-border-gradient-angle: 360deg;\n }\n}\n\n.placeholder\\:text-neutral-500::placeholder {\n --tw-text-opacity: 1;\n color: rgb(115 115 115 / var(--tw-text-opacity));\n}\n\n.after\\:select-none::after {\n content: var(--tw-content);\n -webkit-user-select: none;\n user-select: none;\n}\n\n.after\\:content-\\[\\\'\\2026\\\'\\]::after {\n --tw-content: \'\u2026\';\n content: var(--tw-content);\n}\n\n.focus-within\\:border-transparent:focus-within {\n border-color: transparent;\n}\n\n.focus-within\\:ring-orange-500:focus-within {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(249 115 22 / var(--tw-ring-opacity));\n}\n\n.hover\\:bg-blue-500:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(59 130 246 / var(--tw-bg-opacity));\n}\n\n.hover\\:bg-neutral-200:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(229 229 229 / var(--tw-bg-opacity));\n}\n\n.hover\\:bg-orange-400:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(251 146 60 / var(--tw-bg-opacity));\n}\n\n.hover\\:text-white:hover {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n\n.hover\\:text-white\\/40:hover {\n color: rgb(255 255 255 / 0.4);\n}\n\n.hover\\:text-white\\/80:hover {\n color: rgb(255 255 255 / 0.8);\n}\n\n.hover\\:decoration-orange-500:hover {\n text-decoration-color: #f97316;\n}\n\n.hover\\:brightness-125:hover {\n --tw-brightness: brightness(1.25);\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n\n.focus\\:border-orange-500:focus {\n --tw-border-opacity: 1;\n border-color: rgb(249 115 22 / var(--tw-border-opacity));\n}\n\n.focus\\:border-yellow-400:focus {\n --tw-border-opacity: 1;\n border-color: rgb(250 204 21 / var(--tw-border-opacity));\n}\n\n.focus\\:bg-neutral-700:focus {\n --tw-bg-opacity: 1;\n background-color: rgb(64 64 64 / var(--tw-bg-opacity));\n}\n\n.active\\:bg-orange-600:active {\n --tw-bg-opacity: 1;\n background-color: rgb(234 88 12 / var(--tw-bg-opacity));\n}\n\n.active\\:brightness-150:active {\n --tw-brightness: brightness(1.5);\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n\n.group:hover .group-hover\\:pointer-events-none {\n pointer-events: none;\n}\n\n.group:hover .group-hover\\:pointer-events-auto {\n pointer-events: auto;\n}\n\n.group:hover .group-hover\\:inline-block {\n display: inline-block;\n}\n\n.group:hover .group-hover\\:hidden {\n display: none;\n}\n\n.group:hover .group-hover\\:rotate-90 {\n --tw-rotate: 90deg;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.group:hover .group-hover\\:opacity-0 {\n opacity: 0;\n}\n\n.group:hover .group-hover\\:opacity-100 {\n opacity: 1;\n}\n\n.peer:placeholder-shown ~ .peer-placeholder-shown\\:text-neutral-500 {\n --tw-text-opacity: 1;\n color: rgb(115 115 115 / var(--tw-text-opacity));\n}\n\n.aria-busy\\:pointer-events-none[aria-busy="true"] {\n pointer-events: none;\n}\n\n.aria-busy\\:bg-blue-500[aria-busy="true"] {\n --tw-bg-opacity: 1;\n background-color: rgb(59 130 246 / var(--tw-bg-opacity));\n}\n\n.aria-disabled\\:pointer-events-none[aria-disabled="true"] {\n pointer-events: none;\n}\n\n.aria-disabled\\:opacity-50[aria-disabled="true"] {\n opacity: 0.5;\n}\n\n.group[aria-busy="true"] .group-aria-busy\\:inline {\n display: inline;\n}\n\n.group[aria-busy="true"] .group-aria-busy\\:hidden {\n display: none;\n}\n\n.group\\/button[aria-busy="true"] .group-aria-busy\\/button\\:translate-x-0 {\n --tw-translate-x: 0px;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.group[aria-busy="true"] .group-aria-busy\\:scale-100 {\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.group[aria-busy="true"] .group-aria-busy\\:scale-125 {\n --tw-scale-x: 1.25;\n --tw-scale-y: 1.25;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.group\\/button[aria-busy="true"] .group-aria-busy\\/button\\:opacity-100 {\n opacity: 1;\n}\n\n.group[aria-busy="true"] .group-aria-busy\\:opacity-0 {\n opacity: 0;\n}\n\n.group[aria-busy="true"] .group-aria-busy\\:opacity-100 {\n opacity: 1;\n}\n\n.group\\/button[aria-busy="true"] .group-aria-busy\\/button\\:duration-300 {\n transition-duration: 300ms;\n}\n\n.group[aria-expanded="true"] .group-aria-expanded\\:inline {\n display: inline;\n}\n\n.group[aria-expanded="true"] .group-aria-expanded\\:hidden {\n display: none;\n}\n\n.data-\\[highlighted\\]\\:bg-neutral-200[data-highlighted] {\n --tw-bg-opacity: 1;\n background-color: rgb(229 229 229 / var(--tw-bg-opacity));\n}\n\n.data-\\[state\\=checked\\]\\:bg-neutral-900[data-state="checked"] {\n --tw-bg-opacity: 1;\n background-color: rgb(23 23 23 / var(--tw-bg-opacity));\n}\n\n.links\\:font-medium a[href]:not(.links-unset) {\n font-weight: 500;\n}\n\n.links\\:text-white a[href]:not(.links-unset) {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n\n.links\\:underline a[href]:not(.links-unset) {\n text-decoration-line: underline;\n}\n\n.links\\:decoration-neutral-500 a[href]:not(.links-unset) {\n text-decoration-color: #737373;\n}\n\n.links\\:underline-offset-4 a[href]:not(.links-unset) {\n text-underline-offset: 4px;\n}\n\n.hover\\:links\\:decoration-orange-500 a[href]:not(.links-unset):hover {\n text-decoration-color: #f97316;\n}\n\n@media (min-width: 640px) {\n\n .sm\\:items-center {\n align-items: center;\n }\n}\n\n.dark\\:border-neutral-700:where([data-theme="dark"], [data-theme="dark"] *) {\n --tw-border-opacity: 1;\n border-color: rgb(64 64 64 / var(--tw-border-opacity));\n}\n\n.dark\\:bg-neutral-800:where([data-theme="dark"], [data-theme="dark"] *) {\n --tw-bg-opacity: 1;\n background-color: rgb(38 38 38 / var(--tw-bg-opacity));\n}\n\n.dark\\:bg-white\\/10:where([data-theme="dark"], [data-theme="dark"] *) {\n background-color: rgb(255 255 255 / 0.1);\n}\n\n.dark\\:text-white:where([data-theme="dark"], [data-theme="dark"] *) {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n\n.dark\\:hover\\:bg-neutral-700:hover:where([data-theme="dark"], [data-theme="dark"] *) {\n --tw-bg-opacity: 1;\n background-color: rgb(64 64 64 / var(--tw-bg-opacity));\n}\n\n.\\[\\&_\\>_\\:is\\(dt\\2c dd\\)\\]\\:px-1 > :is(dt,dd) {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n}\n\n.\\[\\&_\\>_dd\\]\\:text-right > dd {\n text-align: right;\n}\n';
|
|
25
|
+
var tailwind_default = '*, ::before, ::after {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-gradient-from-position: ;\n --tw-gradient-via-position: ;\n --tw-gradient-to-position: ;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(59 130 246 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n --tw-contain-size: ;\n --tw-contain-layout: ;\n --tw-contain-paint: ;\n --tw-contain-style: ;\n}\n\n::backdrop {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-gradient-from-position: ;\n --tw-gradient-via-position: ;\n --tw-gradient-to-position: ;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(59 130 246 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n --tw-contain-size: ;\n --tw-contain-layout: ;\n --tw-contain-paint: ;\n --tw-contain-style: ;\n}/*\n! tailwindcss v3.4.13 | MIT License | https://tailwindcss.com\n*//*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n\n*,\n::before,\n::after {\n box-sizing: border-box; /* 1 */\n border-width: 0; /* 2 */\n border-style: solid; /* 2 */\n border-color: #e5e7eb; /* 2 */\n}\n\n::before,\n::after {\n --tw-content: \'\';\n}\n\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user\'s configured `sans` font-family by default.\n5. Use the user\'s configured `sans` font-feature-settings by default.\n6. Use the user\'s configured `sans` font-variation-settings by default.\n7. Disable tap highlights on iOS\n*/\n\nhtml,\n:host {\n line-height: 1.5; /* 1 */\n -webkit-text-size-adjust: 100%; /* 2 */ /* 3 */\n tab-size: 4; /* 3 */\n font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */\n font-feature-settings: normal; /* 5 */\n font-variation-settings: normal; /* 6 */\n -webkit-tap-highlight-color: transparent; /* 7 */\n}\n\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\n\nbody {\n margin: 0; /* 1 */\n line-height: inherit; /* 2 */\n}\n\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\n\nhr {\n height: 0; /* 1 */\n color: inherit; /* 2 */\n border-top-width: 1px; /* 3 */\n}\n\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n}\n\n/*\nRemove the default font size and weight for headings.\n*/\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-size: inherit;\n font-weight: inherit;\n}\n\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\n\na {\n color: inherit;\n text-decoration: inherit;\n}\n\n/*\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n font-weight: bolder;\n}\n\n/*\n1. Use the user\'s configured `mono` font-family by default.\n2. Use the user\'s configured `mono` font-feature-settings by default.\n3. Use the user\'s configured `mono` font-variation-settings by default.\n4. Correct the odd `em` font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */\n font-feature-settings: normal; /* 2 */\n font-variation-settings: normal; /* 3 */\n font-size: 1em; /* 4 */\n}\n\n/*\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n font-size: 80%;\n}\n\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\n\ntable {\n text-indent: 0; /* 1 */\n border-color: inherit; /* 2 */\n border-collapse: collapse; /* 3 */\n}\n\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit; /* 1 */\n font-feature-settings: inherit; /* 1 */\n font-variation-settings: inherit; /* 1 */\n font-size: 100%; /* 1 */\n font-weight: inherit; /* 1 */\n line-height: inherit; /* 1 */\n letter-spacing: inherit; /* 1 */\n color: inherit; /* 1 */\n margin: 0; /* 2 */\n padding: 0; /* 3 */\n}\n\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\n\nbutton,\nselect {\n text-transform: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\n\nbutton,\ninput:where([type=\'button\']),\ninput:where([type=\'reset\']),\ninput:where([type=\'submit\']) {\n -webkit-appearance: button; /* 1 */\n background-color: transparent; /* 2 */\n background-image: none; /* 2 */\n}\n\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n\n:-moz-focusring {\n outline: auto;\n}\n\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n\n:-moz-ui-invalid {\n box-shadow: none;\n}\n\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n vertical-align: baseline;\n}\n\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n height: auto;\n}\n\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type=\'search\'] {\n -webkit-appearance: textfield; /* 1 */\n outline-offset: -2px; /* 2 */\n}\n\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n\n::-webkit-file-upload-button {\n -webkit-appearance: button; /* 1 */\n font: inherit; /* 2 */\n}\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n display: list-item;\n}\n\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n margin: 0;\n}\n\nfieldset {\n margin: 0;\n padding: 0;\n}\n\nlegend {\n padding: 0;\n}\n\nol,\nul,\nmenu {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n/*\nReset default styling for dialogs.\n*/\ndialog {\n padding: 0;\n}\n\n/*\nPrevent resizing textareas horizontally by default.\n*/\n\ntextarea {\n resize: vertical;\n}\n\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user\'s configured gray 400 color.\n*/\n\ninput::placeholder,\ntextarea::placeholder {\n opacity: 1; /* 1 */\n color: #9ca3af; /* 2 */\n}\n\n/*\nSet the default cursor for buttons.\n*/\n\nbutton,\n[role="button"] {\n cursor: pointer;\n}\n\n/*\nMake sure disabled buttons don\'t get the pointer cursor.\n*/\n:disabled {\n cursor: default;\n}\n\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n This can trigger a poorly considered lint error in some tools but is included by design.\n*/\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n display: block; /* 1 */\n vertical-align: middle; /* 2 */\n}\n\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\n\nimg,\nvideo {\n max-width: 100%;\n height: auto;\n}\n\n/* Make elements with the HTML hidden attribute stay hidden by default */\n[hidden] {\n display: none;\n}\n\n.container {\n width: 100%;\n}\n\n@media (min-width: 640px) {\n\n .container {\n max-width: 640px;\n }\n}\n\n@media (min-width: 768px) {\n\n .container {\n max-width: 768px;\n }\n}\n\n@media (min-width: 1024px) {\n\n .container {\n max-width: 1024px;\n }\n}\n\n@media (min-width: 1280px) {\n\n .container {\n max-width: 1280px;\n }\n}\n\n@media (min-width: 1536px) {\n\n .container {\n max-width: 1536px;\n }\n}\n\n.grid-cols-2.divide-y > :not([hidden]) ~ :not([hidden]):nth-child(-n + 2) {\n border-top-width: 0;\n border-bottom-width: 0;\n}\n\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n\n.pointer-events-none {\n pointer-events: none;\n}\n\n.pointer-events-auto {\n pointer-events: auto;\n}\n\n.fixed {\n position: fixed;\n}\n\n.absolute {\n position: absolute;\n}\n\n.relative {\n position: relative;\n}\n\n.sticky {\n position: sticky;\n}\n\n.inset-0 {\n inset: 0px;\n}\n\n.bottom-0 {\n bottom: 0px;\n}\n\n.left-0 {\n left: 0px;\n}\n\n.right-0 {\n right: 0px;\n}\n\n.top-0 {\n top: 0px;\n}\n\n.col-start-1 {\n grid-column-start: 1;\n}\n\n.row-start-1 {\n grid-row-start: 1;\n}\n\n.m-0 {\n margin: 0px;\n}\n\n.m-2 {\n margin: 0.5rem;\n}\n\n.-mx-0\\.5 {\n margin-left: -0.125rem;\n margin-right: -0.125rem;\n}\n\n.-my-1 {\n margin-top: -0.25rem;\n margin-bottom: -0.25rem;\n}\n\n.-my-\\[0\\.125em\\] {\n margin-top: -0.125em;\n margin-bottom: -0.125em;\n}\n\n.mx-auto {\n margin-left: auto;\n margin-right: auto;\n}\n\n.-ml-3 {\n margin-left: -0.75rem;\n}\n\n.-mr-1 {\n margin-right: -0.25rem;\n}\n\n.-mt-2 {\n margin-top: -0.5rem;\n}\n\n.mt-1 {\n margin-top: 0.25rem;\n}\n\n.mt-4 {\n margin-top: 1rem;\n}\n\n.block {\n display: block;\n}\n\n.inline-block {\n display: inline-block;\n}\n\n.flex {\n display: flex;\n}\n\n.inline-flex {\n display: inline-flex;\n}\n\n.table {\n display: table;\n}\n\n.grid {\n display: grid;\n}\n\n.inline-grid {\n display: inline-grid;\n}\n\n.contents {\n display: contents;\n}\n\n.hidden {\n display: none;\n}\n\n.aspect-square {\n aspect-ratio: 1 / 1;\n}\n\n.h-10 {\n height: 2.5rem;\n}\n\n.h-12 {\n height: 3rem;\n}\n\n.h-16 {\n height: 4rem;\n}\n\n.h-3 {\n height: 0.75rem;\n}\n\n.h-3\\.5 {\n height: 0.875rem;\n}\n\n.h-4 {\n height: 1rem;\n}\n\n.h-6 {\n height: 1.5rem;\n}\n\n.h-64 {\n height: 16rem;\n}\n\n.h-\\[1\\.25em\\] {\n height: 1.25em;\n}\n\n.h-\\[1em\\] {\n height: 1em;\n}\n\n.h-\\[2px\\] {\n height: 2px;\n}\n\n.h-full {\n height: 100%;\n}\n\n.max-h-\\[230px\\] {\n max-height: 230px;\n}\n\n.max-h-full {\n max-height: 100%;\n}\n\n.w-10 {\n width: 2.5rem;\n}\n\n.w-16 {\n width: 4rem;\n}\n\n.w-24 {\n width: 6rem;\n}\n\n.w-28 {\n width: 7rem;\n}\n\n.w-3 {\n width: 0.75rem;\n}\n\n.w-3\\.5 {\n width: 0.875rem;\n}\n\n.w-4 {\n width: 1rem;\n}\n\n.w-48 {\n width: 12rem;\n}\n\n.w-6 {\n width: 1.5rem;\n}\n\n.w-60 {\n width: 15rem;\n}\n\n.w-8 {\n width: 2rem;\n}\n\n.w-\\[0\\.6em\\] {\n width: 0.6em;\n}\n\n.w-\\[1\\.25em\\] {\n width: 1.25em;\n}\n\n.w-\\[352px\\] {\n width: 352px;\n}\n\n.w-full {\n width: 100%;\n}\n\n.max-w-\\[26rem\\] {\n max-width: 26rem;\n}\n\n.flex-shrink-0 {\n flex-shrink: 0;\n}\n\n.flex-grow {\n flex-grow: 1;\n}\n\n.-translate-y-2 {\n --tw-translate-y: -0.5rem;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.-translate-y-4 {\n --tw-translate-y: -1rem;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.translate-x-2 {\n --tw-translate-x: 0.5rem;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.translate-y-0 {\n --tw-translate-y: 0px;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.scale-100 {\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.scale-50 {\n --tw-scale-x: .5;\n --tw-scale-y: .5;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.transform {\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n@keyframes spin {\n\n to {\n transform: rotate(360deg);\n }\n}\n\n.animate-spin {\n animation: spin 1s linear infinite;\n}\n\n.cursor-pointer {\n cursor: pointer;\n}\n\n.cursor-text {\n cursor: text;\n}\n\n.grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n\n.grid-cols-\\[1fr_auto_1fr\\] {\n grid-template-columns: 1fr auto 1fr;\n}\n\n.flex-col {\n flex-direction: column;\n}\n\n.place-items-center {\n place-items: center;\n}\n\n.items-end {\n align-items: flex-end;\n}\n\n.items-center {\n align-items: center;\n}\n\n.justify-end {\n justify-content: flex-end;\n}\n\n.justify-center {\n justify-content: center;\n}\n\n.justify-between {\n justify-content: space-between;\n}\n\n.gap-1 {\n gap: 0.25rem;\n}\n\n.gap-2 {\n gap: 0.5rem;\n}\n\n.gap-2\\.5 {\n gap: 0.625rem;\n}\n\n.gap-4 {\n gap: 1rem;\n}\n\n.gap-5 {\n gap: 1.25rem;\n}\n\n.gap-6 {\n gap: 1.5rem;\n}\n\n.space-y-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n\n.space-y-6 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));\n}\n\n.divide-y > :not([hidden]) ~ :not([hidden]) {\n --tw-divide-y-reverse: 0;\n border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));\n border-bottom-width: calc(1px * var(--tw-divide-y-reverse));\n}\n\n.divide-neutral-700 > :not([hidden]) ~ :not([hidden]) {\n --tw-divide-opacity: 1;\n border-color: rgb(64 64 64 / var(--tw-divide-opacity));\n}\n\n.divide-neutral-800 > :not([hidden]) ~ :not([hidden]) {\n --tw-divide-opacity: 1;\n border-color: rgb(38 38 38 / var(--tw-divide-opacity));\n}\n\n.self-auto {\n align-self: auto;\n}\n\n.self-center {\n align-self: center;\n}\n\n.overflow-auto {\n overflow: auto;\n}\n\n.overflow-clip {\n overflow: clip;\n}\n\n.overflow-y-auto {\n overflow-y: auto;\n}\n\n.whitespace-nowrap {\n white-space: nowrap;\n}\n\n.whitespace-pre-wrap {\n white-space: pre-wrap;\n}\n\n.rounded-full {\n border-radius: 9999px;\n}\n\n.border {\n border-width: 1px;\n}\n\n.border-2 {\n border-width: 2px;\n}\n\n.border-4 {\n border-width: 4px;\n}\n\n.border-dashed {\n border-style: dashed;\n}\n\n.border-neutral-300 {\n --tw-border-opacity: 1;\n border-color: rgb(212 212 212 / var(--tw-border-opacity));\n}\n\n.border-neutral-700 {\n --tw-border-opacity: 1;\n border-color: rgb(64 64 64 / var(--tw-border-opacity));\n}\n\n.border-transparent {\n border-color: transparent;\n}\n\n.border-white\\/50 {\n border-color: rgb(255 255 255 / 0.5);\n}\n\n.bg-black\\/10 {\n background-color: rgb(0 0 0 / 0.1);\n}\n\n.bg-blue-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(37 99 235 / var(--tw-bg-opacity));\n}\n\n.bg-blue-700 {\n --tw-bg-opacity: 1;\n background-color: rgb(29 78 216 / var(--tw-bg-opacity));\n}\n\n.bg-blue-700\\/60 {\n background-color: rgb(29 78 216 / 0.6);\n}\n\n.bg-green-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(22 163 74 / var(--tw-bg-opacity));\n}\n\n.bg-neutral-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(245 245 245 / var(--tw-bg-opacity));\n}\n\n.bg-neutral-700 {\n --tw-bg-opacity: 1;\n background-color: rgb(64 64 64 / var(--tw-bg-opacity));\n}\n\n.bg-neutral-800 {\n --tw-bg-opacity: 1;\n background-color: rgb(38 38 38 / var(--tw-bg-opacity));\n}\n\n.bg-neutral-800\\/85 {\n background-color: rgb(38 38 38 / 0.85);\n}\n\n.bg-neutral-900 {\n --tw-bg-opacity: 1;\n background-color: rgb(23 23 23 / var(--tw-bg-opacity));\n}\n\n.bg-orange-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(249 115 22 / var(--tw-bg-opacity));\n}\n\n.bg-orange-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(234 88 12 / var(--tw-bg-opacity));\n}\n\n.bg-red-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(220 38 38 / var(--tw-bg-opacity));\n}\n\n.bg-transparent {\n background-color: transparent;\n}\n\n.bg-gradient-to-b {\n background-image: linear-gradient(to bottom, var(--tw-gradient-stops));\n}\n\n.from-transparent {\n --tw-gradient-from: transparent var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n}\n\n.to-blue-700 {\n --tw-gradient-to: #1d4ed8 var(--tw-gradient-to-position);\n}\n\n.bg-cover {\n background-size: cover;\n}\n\n.bg-center {\n background-position: center;\n}\n\n.bg-no-repeat {\n background-repeat: no-repeat;\n}\n\n.object-cover {\n object-fit: cover;\n}\n\n.p-1 {\n padding: 0.25rem;\n}\n\n.p-2 {\n padding: 0.5rem;\n}\n\n.p-2\\.5 {\n padding: 0.625rem;\n}\n\n.p-3 {\n padding: 0.75rem;\n}\n\n.p-4 {\n padding: 1rem;\n}\n\n.p-6 {\n padding: 1.5rem;\n}\n\n.p-\\[\\.75em\\] {\n padding: .75em;\n}\n\n.px-8 {\n padding-left: 2rem;\n padding-right: 2rem;\n}\n\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n\n.py-8 {\n padding-top: 2rem;\n padding-bottom: 2rem;\n}\n\n.pb-2 {\n padding-bottom: 0.5rem;\n}\n\n.pb-8 {\n padding-bottom: 2rem;\n}\n\n.pt-10 {\n padding-top: 2.5rem;\n}\n\n.pt-8 {\n padding-top: 2rem;\n}\n\n.text-left {\n text-align: left;\n}\n\n.text-center {\n text-align: center;\n}\n\n.font-mono {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;\n}\n\n.text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n\n.text-\\[\\.75em\\] {\n font-size: .75em;\n}\n\n.text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n\n.text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n\n.text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n\n.font-bold {\n font-weight: 700;\n}\n\n.font-medium {\n font-weight: 500;\n}\n\n.leading-loose {\n line-height: 2;\n}\n\n.leading-none {\n line-height: 1;\n}\n\n.tracking-\\[-1ch\\] {\n letter-spacing: -1ch;\n}\n\n.text-amber-500 {\n --tw-text-opacity: 1;\n color: rgb(245 158 11 / var(--tw-text-opacity));\n}\n\n.text-black {\n --tw-text-opacity: 1;\n color: rgb(0 0 0 / var(--tw-text-opacity));\n}\n\n.text-gray-400 {\n --tw-text-opacity: 1;\n color: rgb(156 163 175 / var(--tw-text-opacity));\n}\n\n.text-green-600 {\n --tw-text-opacity: 1;\n color: rgb(22 163 74 / var(--tw-text-opacity));\n}\n\n.text-neutral-300 {\n --tw-text-opacity: 1;\n color: rgb(212 212 212 / var(--tw-text-opacity));\n}\n\n.text-neutral-400 {\n --tw-text-opacity: 1;\n color: rgb(163 163 163 / var(--tw-text-opacity));\n}\n\n.text-neutral-500 {\n --tw-text-opacity: 1;\n color: rgb(115 115 115 / var(--tw-text-opacity));\n}\n\n.text-orange-500 {\n --tw-text-opacity: 1;\n color: rgb(249 115 22 / var(--tw-text-opacity));\n}\n\n.text-transparent {\n color: transparent;\n}\n\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n\n.text-white\\/20 {\n color: rgb(255 255 255 / 0.2);\n}\n\n.text-white\\/50 {\n color: rgb(255 255 255 / 0.5);\n}\n\n.text-white\\/80 {\n color: rgb(255 255 255 / 0.8);\n}\n\n.underline {\n text-decoration-line: underline;\n}\n\n.decoration-neutral-500 {\n text-decoration-color: #737373;\n}\n\n.underline-offset-4 {\n text-underline-offset: 4px;\n}\n\n.opacity-0 {\n opacity: 0;\n}\n\n.opacity-100 {\n opacity: 1;\n}\n\n.opacity-25 {\n opacity: 0.25;\n}\n\n.opacity-30 {\n opacity: 0.3;\n}\n\n.opacity-50 {\n opacity: 0.5;\n}\n\n.opacity-75 {\n opacity: 0.75;\n}\n\n.outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n\n.ring-1 {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.ring-2 {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.ring-neutral-700\\/50 {\n --tw-ring-color: rgb(64 64 64 / 0.5);\n}\n\n.ring-transparent {\n --tw-ring-color: transparent;\n}\n\n.filter {\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n\n.transition {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n\n.transition-colors {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n\n.duration-100 {\n transition-duration: 100ms;\n}\n\n.duration-300 {\n transition-duration: 300ms;\n}\n\n.ease-linear {\n transition-timing-function: linear;\n}\n\n@keyframes enter {\n\n from {\n opacity: var(--tw-enter-opacity, 1);\n transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));\n }\n}\n\n@keyframes exit {\n\n to {\n opacity: var(--tw-exit-opacity, 1);\n transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));\n }\n}\n\n.animate-in {\n animation-name: enter;\n animation-duration: 150ms;\n --tw-enter-opacity: initial;\n --tw-enter-scale: initial;\n --tw-enter-rotate: initial;\n --tw-enter-translate-x: initial;\n --tw-enter-translate-y: initial;\n}\n\n.animate-out {\n animation-name: exit;\n animation-duration: 150ms;\n --tw-exit-opacity: initial;\n --tw-exit-scale: initial;\n --tw-exit-rotate: initial;\n --tw-exit-translate-x: initial;\n --tw-exit-translate-y: initial;\n}\n\n.fade-in {\n --tw-enter-opacity: 0;\n}\n\n.fade-out {\n --tw-exit-opacity: 0;\n}\n\n.slide-in-from-bottom-16 {\n --tw-enter-translate-y: 4rem;\n}\n\n.slide-in-from-bottom-2 {\n --tw-enter-translate-y: 0.5rem;\n}\n\n.slide-in-from-bottom-8 {\n --tw-enter-translate-y: 2rem;\n}\n\n.slide-in-from-top-2 {\n --tw-enter-translate-y: -0.5rem;\n}\n\n.animate-duration-300 {\n animation-duration: 300ms;\n}\n\n.ease-linear {\n animation-timing-function: linear;\n}\n\n@property --tw-border-gradient-angle {\n syntax: \'<angle>\';\n inherits: true;\n initial-value: 0deg;\n}\n\n@property --tw-conic-gradient-angle {\n syntax: \'<angle>\';\n inherits: true;\n initial-value: 0deg;\n}\n\n@keyframes border-gradient {\n\n to {\n --tw-border-gradient-angle: 360deg;\n }\n}\n\n.placeholder\\:text-neutral-500::placeholder {\n --tw-text-opacity: 1;\n color: rgb(115 115 115 / var(--tw-text-opacity));\n}\n\n.after\\:select-none::after {\n content: var(--tw-content);\n -webkit-user-select: none;\n user-select: none;\n}\n\n.after\\:content-\\[\\\'\\2026\\\'\\]::after {\n --tw-content: \'\u2026\';\n content: var(--tw-content);\n}\n\n.focus-within\\:border-transparent:focus-within {\n border-color: transparent;\n}\n\n.focus-within\\:ring-orange-500:focus-within {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(249 115 22 / var(--tw-ring-opacity));\n}\n\n.hover\\:bg-blue-500:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(59 130 246 / var(--tw-bg-opacity));\n}\n\n.hover\\:bg-neutral-200:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(229 229 229 / var(--tw-bg-opacity));\n}\n\n.hover\\:bg-orange-400:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(251 146 60 / var(--tw-bg-opacity));\n}\n\n.hover\\:text-white:hover {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n\n.hover\\:text-white\\/40:hover {\n color: rgb(255 255 255 / 0.4);\n}\n\n.hover\\:text-white\\/80:hover {\n color: rgb(255 255 255 / 0.8);\n}\n\n.hover\\:decoration-orange-500:hover {\n text-decoration-color: #f97316;\n}\n\n.hover\\:brightness-125:hover {\n --tw-brightness: brightness(1.25);\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n\n.focus\\:border-orange-500:focus {\n --tw-border-opacity: 1;\n border-color: rgb(249 115 22 / var(--tw-border-opacity));\n}\n\n.focus\\:border-yellow-400:focus {\n --tw-border-opacity: 1;\n border-color: rgb(250 204 21 / var(--tw-border-opacity));\n}\n\n.focus\\:bg-neutral-700:focus {\n --tw-bg-opacity: 1;\n background-color: rgb(64 64 64 / var(--tw-bg-opacity));\n}\n\n.active\\:bg-orange-600:active {\n --tw-bg-opacity: 1;\n background-color: rgb(234 88 12 / var(--tw-bg-opacity));\n}\n\n.active\\:brightness-150:active {\n --tw-brightness: brightness(1.5);\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n\n.group:hover .group-hover\\:pointer-events-none {\n pointer-events: none;\n}\n\n.group:hover .group-hover\\:pointer-events-auto {\n pointer-events: auto;\n}\n\n.group:hover .group-hover\\:inline-block {\n display: inline-block;\n}\n\n.group:hover .group-hover\\:hidden {\n display: none;\n}\n\n.group:hover .group-hover\\:rotate-90 {\n --tw-rotate: 90deg;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.group:hover .group-hover\\:opacity-0 {\n opacity: 0;\n}\n\n.group:hover .group-hover\\:opacity-100 {\n opacity: 1;\n}\n\n.peer:placeholder-shown ~ .peer-placeholder-shown\\:text-neutral-500 {\n --tw-text-opacity: 1;\n color: rgb(115 115 115 / var(--tw-text-opacity));\n}\n\n.aria-busy\\:pointer-events-none[aria-busy="true"] {\n pointer-events: none;\n}\n\n.aria-busy\\:bg-blue-500[aria-busy="true"] {\n --tw-bg-opacity: 1;\n background-color: rgb(59 130 246 / var(--tw-bg-opacity));\n}\n\n.aria-disabled\\:pointer-events-none[aria-disabled="true"] {\n pointer-events: none;\n}\n\n.aria-disabled\\:opacity-50[aria-disabled="true"] {\n opacity: 0.5;\n}\n\n.group[aria-busy="true"] .group-aria-busy\\:inline {\n display: inline;\n}\n\n.group[aria-busy="true"] .group-aria-busy\\:hidden {\n display: none;\n}\n\n.group\\/button[aria-busy="true"] .group-aria-busy\\/button\\:translate-x-0 {\n --tw-translate-x: 0px;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.group[aria-busy="true"] .group-aria-busy\\:scale-100 {\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.group[aria-busy="true"] .group-aria-busy\\:scale-125 {\n --tw-scale-x: 1.25;\n --tw-scale-y: 1.25;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.group\\/button[aria-busy="true"] .group-aria-busy\\/button\\:opacity-100 {\n opacity: 1;\n}\n\n.group[aria-busy="true"] .group-aria-busy\\:opacity-0 {\n opacity: 0;\n}\n\n.group[aria-busy="true"] .group-aria-busy\\:opacity-100 {\n opacity: 1;\n}\n\n.group\\/button[aria-busy="true"] .group-aria-busy\\/button\\:duration-300 {\n transition-duration: 300ms;\n}\n\n.group[aria-expanded="true"] .group-aria-expanded\\:inline {\n display: inline;\n}\n\n.group[aria-expanded="true"] .group-aria-expanded\\:hidden {\n display: none;\n}\n\n.data-\\[highlighted\\]\\:bg-neutral-200[data-highlighted] {\n --tw-bg-opacity: 1;\n background-color: rgb(229 229 229 / var(--tw-bg-opacity));\n}\n\n.data-\\[state\\=checked\\]\\:bg-neutral-900[data-state="checked"] {\n --tw-bg-opacity: 1;\n background-color: rgb(23 23 23 / var(--tw-bg-opacity));\n}\n\n.links\\:font-medium a[href]:not(.links-unset) {\n font-weight: 500;\n}\n\n.links\\:text-white a[href]:not(.links-unset) {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n\n.links\\:underline a[href]:not(.links-unset) {\n text-decoration-line: underline;\n}\n\n.links\\:decoration-neutral-500 a[href]:not(.links-unset) {\n text-decoration-color: #737373;\n}\n\n.links\\:underline-offset-4 a[href]:not(.links-unset) {\n text-underline-offset: 4px;\n}\n\n.hover\\:links\\:decoration-orange-500 a[href]:not(.links-unset):hover {\n text-decoration-color: #f97316;\n}\n\n@media (min-width: 640px) {\n\n .sm\\:items-center {\n align-items: center;\n }\n}\n\n.dark\\:border-neutral-700:where([data-theme="dark"], [data-theme="dark"] *) {\n --tw-border-opacity: 1;\n border-color: rgb(64 64 64 / var(--tw-border-opacity));\n}\n\n.dark\\:bg-neutral-800:where([data-theme="dark"], [data-theme="dark"] *) {\n --tw-bg-opacity: 1;\n background-color: rgb(38 38 38 / var(--tw-bg-opacity));\n}\n\n.dark\\:bg-white\\/10:where([data-theme="dark"], [data-theme="dark"] *) {\n background-color: rgb(255 255 255 / 0.1);\n}\n\n.dark\\:text-white:where([data-theme="dark"], [data-theme="dark"] *) {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n\n.dark\\:hover\\:bg-neutral-700:hover:where([data-theme="dark"], [data-theme="dark"] *) {\n --tw-bg-opacity: 1;\n background-color: rgb(64 64 64 / var(--tw-bg-opacity));\n}\n\n.\\[\\&_\\>_\\:is\\(dt\\2c dd\\)\\]\\:px-1 > :is(dt,dd) {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n}\n\n.\\[\\&_\\>_dd\\]\\:text-right > dd {\n text-align: right;\n}\n';
|
|
26
26
|
|
|
27
27
|
// src/ui/Shadow.tsx
|
|
28
28
|
import { useResizeObserver } from "usehooks-ts";
|
|
@@ -58,10 +58,16 @@ import { privateKeyToAccount } from "viem/accounts";
|
|
|
58
58
|
// src/quarry/transports/userOpExecutor.ts
|
|
59
59
|
import {
|
|
60
60
|
createTransport,
|
|
61
|
+
getAbiItem,
|
|
61
62
|
numberToHex,
|
|
62
63
|
parseEther
|
|
63
64
|
} from "viem";
|
|
64
|
-
import {
|
|
65
|
+
import {
|
|
66
|
+
entryPoint06Abi,
|
|
67
|
+
entryPoint06Address,
|
|
68
|
+
entryPoint07Address as entryPoint07Address2,
|
|
69
|
+
entryPoint08Address
|
|
70
|
+
} from "viem/account-abstraction";
|
|
65
71
|
|
|
66
72
|
// src/quarry/transports/methods/estimateUserOperationGas.ts
|
|
67
73
|
import { formatUserOperationRequest } from "viem/account-abstraction";
|
|
@@ -138,7 +144,8 @@ error.log = console.error.bind(console);
|
|
|
138
144
|
var debug2 = debug.extend("quarry");
|
|
139
145
|
|
|
140
146
|
// src/quarry/transports/userOpExecutor.ts
|
|
141
|
-
import { setBalance } from "viem/actions";
|
|
147
|
+
import { getLogs, getTransactionReceipt, setBalance } from "viem/actions";
|
|
148
|
+
import { getUserOperationReceipt } from "@latticexyz/common/internal";
|
|
142
149
|
function userOpExecutor({
|
|
143
150
|
executor,
|
|
144
151
|
fallbackDefaultTransport
|
|
@@ -172,8 +179,38 @@ function userOpExecutor({
|
|
|
172
179
|
}
|
|
173
180
|
}
|
|
174
181
|
if (method === "eth_getUserOperationReceipt") {
|
|
175
|
-
const [
|
|
176
|
-
return receipts.get(
|
|
182
|
+
const [userOpHash] = params;
|
|
183
|
+
if (receipts.has(userOpHash)) return receipts.get(userOpHash);
|
|
184
|
+
const event = getAbiItem({
|
|
185
|
+
abi: entryPoint06Abi,
|
|
186
|
+
name: "UserOperationEvent"
|
|
187
|
+
});
|
|
188
|
+
const log = (await getLogs(executor, {
|
|
189
|
+
address: [entryPoint06Address, entryPoint07Address2, entryPoint08Address],
|
|
190
|
+
event,
|
|
191
|
+
args: { userOpHash }
|
|
192
|
+
})).at(0);
|
|
193
|
+
if (!log) return null;
|
|
194
|
+
const hash = log.transactionHash;
|
|
195
|
+
const receipt = await getTransactionReceipt(executor, { hash });
|
|
196
|
+
const userOpReceipt = getUserOperationReceipt(userOpHash, {
|
|
197
|
+
...receipt,
|
|
198
|
+
blobGasPrice: receipt.blobGasPrice ? numberToHex(receipt.blobGasPrice) : void 0,
|
|
199
|
+
blobGasUsed: receipt.blobGasUsed ? numberToHex(receipt.blobGasUsed) : void 0,
|
|
200
|
+
blockNumber: numberToHex(receipt.blockNumber),
|
|
201
|
+
cumulativeGasUsed: numberToHex(receipt.cumulativeGasUsed),
|
|
202
|
+
effectiveGasPrice: numberToHex(receipt.effectiveGasPrice),
|
|
203
|
+
gasUsed: numberToHex(receipt.gasUsed),
|
|
204
|
+
logs: receipt.logs.map((log2) => ({
|
|
205
|
+
...log2,
|
|
206
|
+
blockNumber: numberToHex(log2.blockNumber),
|
|
207
|
+
logIndex: numberToHex(log2.logIndex),
|
|
208
|
+
transactionIndex: numberToHex(log2.transactionIndex)
|
|
209
|
+
})),
|
|
210
|
+
status: receipt.status,
|
|
211
|
+
transactionIndex: numberToHex(receipt.transactionIndex)
|
|
212
|
+
});
|
|
213
|
+
return userOpReceipt;
|
|
177
214
|
}
|
|
178
215
|
if (method === "eth_estimateUserOperationGas") {
|
|
179
216
|
return await estimateUserOperationGas(params);
|
|
@@ -525,40 +562,84 @@ function AppInfo() {
|
|
|
525
562
|
// src/ConnectWallet.tsx
|
|
526
563
|
import { twMerge as twMerge5 } from "tailwind-merge";
|
|
527
564
|
import { useEffect as useEffect3, useRef as useRef2 } from "react";
|
|
528
|
-
import {
|
|
565
|
+
import { useConnect, useConnectors } from "wagmi";
|
|
566
|
+
import { isIdPlaceConnector } from "@latticexyz/id.place/internal";
|
|
567
|
+
import { Fragment, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
529
568
|
function ConnectWallet() {
|
|
530
|
-
const
|
|
531
|
-
const
|
|
532
|
-
useEffect3(() => {
|
|
533
|
-
if (!open && !hasAutoOpenedRef.current) {
|
|
534
|
-
setOpen(true);
|
|
535
|
-
hasAutoOpenedRef.current = true;
|
|
536
|
-
}
|
|
537
|
-
}, [open, setOpen]);
|
|
569
|
+
const connectors = useConnectors();
|
|
570
|
+
const porto = connectors.find(isIdPlaceConnector);
|
|
538
571
|
return /* @__PURE__ */ jsxs7(
|
|
539
572
|
"div",
|
|
540
573
|
{
|
|
541
574
|
className: twMerge5("flex flex-col gap-6 p-6", "animate-in animate-duration-300 fade-in slide-in-from-bottom-8"),
|
|
542
575
|
children: [
|
|
543
576
|
/* @__PURE__ */ jsx9("div", { className: "p-4", children: /* @__PURE__ */ jsx9(AppInfo, {}) }),
|
|
544
|
-
/* @__PURE__ */ jsx9("div", { className: "self-center flex flex-col gap-2 w-60", children: /* @__PURE__ */ jsx9(
|
|
545
|
-
Button,
|
|
546
|
-
{
|
|
547
|
-
variant: "secondary",
|
|
548
|
-
className: "self-auto flex justify-center",
|
|
549
|
-
onClick: () => setOpen(true),
|
|
550
|
-
autoFocus: true,
|
|
551
|
-
children: "Connect wallet"
|
|
552
|
-
},
|
|
553
|
-
"create"
|
|
554
|
-
) })
|
|
577
|
+
/* @__PURE__ */ jsx9("div", { className: "self-center flex flex-col gap-2 w-60", children: porto ? /* @__PURE__ */ jsx9(AccountButton, { connector: porto }) : /* @__PURE__ */ jsx9(WalletButton, {}) })
|
|
555
578
|
]
|
|
556
579
|
}
|
|
557
580
|
);
|
|
558
581
|
}
|
|
582
|
+
function AccountButton({ connector }) {
|
|
583
|
+
const { setOpen } = useModal();
|
|
584
|
+
const { connect, isPending, error: error2 } = useConnect();
|
|
585
|
+
const { chainId } = useEntryKitConfig();
|
|
586
|
+
if (error2) {
|
|
587
|
+
console.error("connect error", error2);
|
|
588
|
+
}
|
|
589
|
+
return /* @__PURE__ */ jsxs7(Fragment, { children: [
|
|
590
|
+
/* @__PURE__ */ jsx9(
|
|
591
|
+
Button,
|
|
592
|
+
{
|
|
593
|
+
variant: "secondary",
|
|
594
|
+
className: "self-auto flex justify-center",
|
|
595
|
+
pending: isPending,
|
|
596
|
+
onClick: () => connect({
|
|
597
|
+
connector,
|
|
598
|
+
// need to provide both `chainId` and `capabilities` to the
|
|
599
|
+
// Porto connector so a fresh browser instance reusing a synced passkey
|
|
600
|
+
// can be bound to the correct chain ID for the account
|
|
601
|
+
chainId,
|
|
602
|
+
capabilities: {}
|
|
603
|
+
}),
|
|
604
|
+
autoFocus: true,
|
|
605
|
+
children: "Sign in"
|
|
606
|
+
},
|
|
607
|
+
"signin"
|
|
608
|
+
),
|
|
609
|
+
/* @__PURE__ */ jsx9(
|
|
610
|
+
"button",
|
|
611
|
+
{
|
|
612
|
+
className: "text-sm self-center transition text-neutral-500 hover:text-white p-2",
|
|
613
|
+
onClick: () => setOpen(true),
|
|
614
|
+
children: "Already have a wallet?"
|
|
615
|
+
}
|
|
616
|
+
)
|
|
617
|
+
] });
|
|
618
|
+
}
|
|
619
|
+
function WalletButton() {
|
|
620
|
+
const { open, setOpen } = useModal();
|
|
621
|
+
const hasAutoOpenedRef = useRef2(false);
|
|
622
|
+
useEffect3(() => {
|
|
623
|
+
if (!open && !hasAutoOpenedRef.current) {
|
|
624
|
+
setOpen(true);
|
|
625
|
+
hasAutoOpenedRef.current = true;
|
|
626
|
+
}
|
|
627
|
+
}, [open, setOpen]);
|
|
628
|
+
return /* @__PURE__ */ jsx9(Fragment, { children: /* @__PURE__ */ jsx9(
|
|
629
|
+
Button,
|
|
630
|
+
{
|
|
631
|
+
variant: "secondary",
|
|
632
|
+
className: "self-auto flex justify-center",
|
|
633
|
+
onClick: () => setOpen(true),
|
|
634
|
+
autoFocus: true,
|
|
635
|
+
children: "Connect wallet"
|
|
636
|
+
},
|
|
637
|
+
"create"
|
|
638
|
+
) });
|
|
639
|
+
}
|
|
559
640
|
|
|
560
641
|
// src/onboarding/ConnectedSteps.tsx
|
|
561
|
-
import { useEffect as
|
|
642
|
+
import { useEffect as useEffect14, useMemo as useMemo4, useRef as useRef5, useState as useState5 } from "react";
|
|
562
643
|
import { twMerge as twMerge18 } from "tailwind-merge";
|
|
563
644
|
|
|
564
645
|
// src/onboarding/usePrerequisites.ts
|
|
@@ -573,26 +654,35 @@ import { queryOptions, skipToken, useQuery as useQuery2 } from "@tanstack/react-
|
|
|
573
654
|
import { defineStore } from "@latticexyz/store";
|
|
574
655
|
import { parseAbi } from "viem";
|
|
575
656
|
var paymasterAbi = parseAbi([
|
|
657
|
+
// AllowanceSystem
|
|
658
|
+
"error AllowanceSystem_InsufficientAllowance(uint256 allowance, uint256 required)",
|
|
659
|
+
"error AllowanceSystem_NotAuthorized(address caller, address sponsor, address user)",
|
|
660
|
+
"error AllowanceSystem_NotFound(address user, address sponsor)",
|
|
661
|
+
"function removeAllowance(address user, address sponsor)",
|
|
662
|
+
"function getAllowance(address user) view returns (uint256)",
|
|
663
|
+
// GrantSystem
|
|
664
|
+
"error GrantSystem_AllowanceBelowMinimum(uint256 allowance, uint256 min)",
|
|
665
|
+
"error GrantSystem_AllowancesLimitReached(uint256 length, uint256 max)",
|
|
666
|
+
"error GrantSystem_InsufficientBalance(uint256 balance, uint256 required)",
|
|
667
|
+
"function grantAllowance(address user, uint256 allowance) payable",
|
|
668
|
+
// BalanceSystem
|
|
669
|
+
"error BalanceSystem_InsufficientBalance(address user, uint256 amount, uint256 balance)",
|
|
670
|
+
"function depositTo(address to) payable",
|
|
671
|
+
"function withdrawTo(address to, uint256 amount)",
|
|
672
|
+
// SpenderSystem
|
|
576
673
|
"error SpenderSystem_AlreadyRegistered(address spender, address user)",
|
|
577
674
|
"error SpenderSystem_HasOwnBalance(address spender)",
|
|
578
|
-
"error BalanceSystem_BalanceTooHigh(address user, uint256 balance, uint256 max)",
|
|
579
|
-
"error BalanceSystem_InsufficientBalance(address user, uint256 amount, uint256 balance)",
|
|
580
675
|
"function registerSpender(address spender)",
|
|
581
|
-
|
|
582
|
-
"
|
|
676
|
+
// PaymasterSystem
|
|
677
|
+
"error PaymasterSystem_InsufficientFunds(address user, uint256 maxCost, uint256 availableAllowance, uint256 availableBalance)",
|
|
678
|
+
"error PaymasterSystem_OnlyEntryPoint()"
|
|
583
679
|
]);
|
|
584
680
|
var paymasterConfig = defineStore({
|
|
585
681
|
namespaces: {
|
|
586
682
|
root: {
|
|
587
683
|
namespace: "",
|
|
588
684
|
tables: {
|
|
589
|
-
|
|
590
|
-
schema: {
|
|
591
|
-
user: "address",
|
|
592
|
-
allowance: "uint256"
|
|
593
|
-
},
|
|
594
|
-
key: ["user"]
|
|
595
|
-
},
|
|
685
|
+
// Balance gets deposited and is withdrawable
|
|
596
686
|
Balance: {
|
|
597
687
|
schema: {
|
|
598
688
|
user: "address",
|
|
@@ -600,31 +690,26 @@ var paymasterConfig = defineStore({
|
|
|
600
690
|
},
|
|
601
691
|
key: ["user"]
|
|
602
692
|
},
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
},
|
|
608
|
-
key: ["grantor"]
|
|
609
|
-
},
|
|
610
|
-
PassHolder: {
|
|
693
|
+
// Allowance gets granted and is not withdrawable
|
|
694
|
+
// Allowance is organized as a linked list and gets spent from smallest to largest
|
|
695
|
+
Allowance: {
|
|
696
|
+
name: "AllowanceV2",
|
|
611
697
|
schema: {
|
|
612
698
|
user: "address",
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
699
|
+
sponsor: "address",
|
|
700
|
+
allowance: "uint256",
|
|
701
|
+
next: "address",
|
|
702
|
+
previous: "address"
|
|
616
703
|
},
|
|
617
|
-
key: ["user", "
|
|
704
|
+
key: ["user", "sponsor"]
|
|
618
705
|
},
|
|
619
|
-
|
|
706
|
+
AllowanceList: {
|
|
620
707
|
schema: {
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
validityPeriod: "uint256",
|
|
625
|
-
grantor: "address"
|
|
708
|
+
user: "address",
|
|
709
|
+
first: "address",
|
|
710
|
+
length: "uint256"
|
|
626
711
|
},
|
|
627
|
-
key: ["
|
|
712
|
+
key: ["user"]
|
|
628
713
|
},
|
|
629
714
|
Spender: {
|
|
630
715
|
schema: {
|
|
@@ -656,7 +741,7 @@ function getPaymaster(chain) {
|
|
|
656
741
|
return {
|
|
657
742
|
type: "quarry",
|
|
658
743
|
address: contracts.quarryPaymaster.address,
|
|
659
|
-
|
|
744
|
+
canSponsor: !!chain.rpcUrls.quarrySponsor?.http?.[0]
|
|
660
745
|
};
|
|
661
746
|
}
|
|
662
747
|
}
|
|
@@ -831,36 +916,21 @@ import { useClient as useClient4 } from "wagmi";
|
|
|
831
916
|
import { queryOptions as queryOptions4, skipToken as skipToken4, useQuery as useQuery5 } from "@tanstack/react-query";
|
|
832
917
|
|
|
833
918
|
// src/quarry/getAllowance.ts
|
|
834
|
-
import {
|
|
835
|
-
import {
|
|
836
|
-
import { getKeyTuple } from "@latticexyz/protocol-parser/internal";
|
|
837
|
-
import { setStorageAt } from "viem/actions";
|
|
919
|
+
import { readContract } from "viem/actions";
|
|
920
|
+
import { getAction as getAction2 } from "viem/utils";
|
|
838
921
|
async function getAllowance({ client, userAddress }) {
|
|
839
922
|
const paymaster = getPaymaster(client.chain);
|
|
840
923
|
if (paymaster?.type !== "quarry") return null;
|
|
841
|
-
|
|
924
|
+
return await getAction2(
|
|
925
|
+
client,
|
|
926
|
+
readContract,
|
|
927
|
+
"readContract"
|
|
928
|
+
)({
|
|
842
929
|
address: paymaster.address,
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
930
|
+
abi: paymasterAbi,
|
|
931
|
+
functionName: "getAllowance",
|
|
932
|
+
args: [userAddress]
|
|
846
933
|
});
|
|
847
|
-
return record.allowance;
|
|
848
|
-
}
|
|
849
|
-
async function setAllowanceSlot({ client, userAddress, allowance }) {
|
|
850
|
-
const paymaster = getPaymaster(client.chain);
|
|
851
|
-
if (paymaster?.type !== "quarry") return;
|
|
852
|
-
const slot = getStaticDataLocation(
|
|
853
|
-
paymasterTables.Allowance.tableId,
|
|
854
|
-
getKeyTuple(paymasterTables.Allowance, { user: userAddress })
|
|
855
|
-
);
|
|
856
|
-
await setStorageAt(
|
|
857
|
-
client.extend(() => ({ mode: "anvil" })),
|
|
858
|
-
{
|
|
859
|
-
address: paymaster.address,
|
|
860
|
-
index: slot,
|
|
861
|
-
value: numberToHex2(allowance, { size: 32 })
|
|
862
|
-
}
|
|
863
|
-
);
|
|
864
934
|
}
|
|
865
935
|
|
|
866
936
|
// src/onboarding/quarry/useAllowance.ts
|
|
@@ -884,11 +954,11 @@ import { useClient as useClient5 } from "wagmi";
|
|
|
884
954
|
import { queryOptions as queryOptions5, skipToken as skipToken5, useQuery as useQuery6 } from "@tanstack/react-query";
|
|
885
955
|
|
|
886
956
|
// src/quarry/getBalance.ts
|
|
887
|
-
import { getRecord as
|
|
957
|
+
import { getRecord as getRecord3 } from "@latticexyz/store/internal";
|
|
888
958
|
async function getBalance({ client, userAddress }) {
|
|
889
959
|
const paymaster = getPaymaster(client.chain);
|
|
890
960
|
if (paymaster?.type !== "quarry") return null;
|
|
891
|
-
const record = await
|
|
961
|
+
const record = await getRecord3(client, {
|
|
892
962
|
address: paymaster.address,
|
|
893
963
|
table: paymasterTables.Balance,
|
|
894
964
|
key: { user: userAddress },
|
|
@@ -1133,169 +1203,15 @@ function Wallet({ isActive, isExpanded, userAddress }) {
|
|
|
1133
1203
|
] });
|
|
1134
1204
|
}
|
|
1135
1205
|
|
|
1136
|
-
// src/onboarding/quarry/Allowance.tsx
|
|
1137
|
-
import { parseEther as parseEther3 } from "viem";
|
|
1138
|
-
|
|
1139
|
-
// src/onboarding/quarry/useClaimGasPass.ts
|
|
1140
|
-
import { parseEther as parseEther2 } from "viem";
|
|
1141
|
-
import { useMutation, useQueryClient as useQueryClient3 } from "@tanstack/react-query";
|
|
1142
|
-
|
|
1143
|
-
// src/quarry/transports/quarryPassIssuer.ts
|
|
1144
|
-
import { http as http2 } from "viem";
|
|
1145
|
-
function quarryPassIssuer() {
|
|
1146
|
-
return ({ chain }) => {
|
|
1147
|
-
if (!chain) throw new Error("No chain provided to issuer transport.");
|
|
1148
|
-
const url = "quarryPassIssuer" in chain.rpcUrls ? chain.rpcUrls.quarryPassIssuer.http[0] : void 0;
|
|
1149
|
-
if (!url) throw new Error(`No \`quarryPassIssuer\` RPC URL found for chain ${chain.id}.`);
|
|
1150
|
-
return http2(url)({ chain, retryCount: 0 });
|
|
1151
|
-
};
|
|
1152
|
-
}
|
|
1153
|
-
|
|
1154
|
-
// src/quarry/claimGasPass.ts
|
|
1155
|
-
async function claimGasPass({ chain, userAddress }) {
|
|
1156
|
-
const transport = quarryPassIssuer()({ chain });
|
|
1157
|
-
debug2("Issuing gas pass to", userAddress);
|
|
1158
|
-
await transport.request({
|
|
1159
|
-
method: "quarry_issuePass",
|
|
1160
|
-
params: ["0x01", userAddress]
|
|
1161
|
-
});
|
|
1162
|
-
debug2("Claiming gas allowance for", userAddress);
|
|
1163
|
-
await transport.request({
|
|
1164
|
-
method: "quarry_claimAllowance",
|
|
1165
|
-
params: ["0x01", userAddress]
|
|
1166
|
-
});
|
|
1167
|
-
}
|
|
1168
|
-
|
|
1169
|
-
// src/onboarding/quarry/useClaimGasPass.ts
|
|
1170
|
-
import { useClient as useClient8 } from "wagmi";
|
|
1171
|
-
function useClaimGasPass() {
|
|
1172
|
-
const queryClient = useQueryClient3();
|
|
1173
|
-
const { chain } = useEntryKitConfig();
|
|
1174
|
-
const client = useClient8({ chainId: chain.id });
|
|
1175
|
-
const mutationKey = ["claimGasPass", chain.id];
|
|
1176
|
-
return useMutation({
|
|
1177
|
-
retry: 0,
|
|
1178
|
-
mutationKey,
|
|
1179
|
-
mutationFn: async (userAddress) => {
|
|
1180
|
-
if (chain.id === 31337) {
|
|
1181
|
-
if (!client) throw new Error("No client?");
|
|
1182
|
-
await setAllowanceSlot({ client, userAddress, allowance: parseEther2("1") });
|
|
1183
|
-
} else {
|
|
1184
|
-
await claimGasPass({ chain, userAddress });
|
|
1185
|
-
}
|
|
1186
|
-
await Promise.all([
|
|
1187
|
-
queryClient.invalidateQueries({ queryKey: ["getAllowance"] }),
|
|
1188
|
-
queryClient.invalidateQueries({ queryKey: ["getFunds"] }),
|
|
1189
|
-
queryClient.invalidateQueries({ queryKey: ["getPrerequisites"] })
|
|
1190
|
-
]);
|
|
1191
|
-
}
|
|
1192
|
-
});
|
|
1193
|
-
}
|
|
1194
|
-
|
|
1195
|
-
// src/icons/EthIcon.tsx
|
|
1196
|
-
import { twMerge as twMerge6 } from "tailwind-merge";
|
|
1197
|
-
import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
1198
|
-
function EthIcon({ className, ...props }) {
|
|
1199
|
-
return /* @__PURE__ */ jsxs10(
|
|
1200
|
-
"svg",
|
|
1201
|
-
{
|
|
1202
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
1203
|
-
viewBox: "0 0 263 428",
|
|
1204
|
-
fill: "currentColor",
|
|
1205
|
-
className: twMerge6("w-[0.6em] h-[1em]", className),
|
|
1206
|
-
...props,
|
|
1207
|
-
children: [
|
|
1208
|
-
/* @__PURE__ */ jsx12("path", { d: "M132 321V428L263 243L132 321Z" }),
|
|
1209
|
-
/* @__PURE__ */ jsx12("path", { d: "M0 243L132 321V428", fillOpacity: "0.5" }),
|
|
1210
|
-
/* @__PURE__ */ jsx12("path", { d: "M132 0V296L263 218" }),
|
|
1211
|
-
/* @__PURE__ */ jsx12("path", { d: "M0 218L132 296V0L0 218Z", fillOpacity: "0.5" })
|
|
1212
|
-
]
|
|
1213
|
-
}
|
|
1214
|
-
);
|
|
1215
|
-
}
|
|
1216
|
-
|
|
1217
|
-
// src/formatBalance.ts
|
|
1218
|
-
import { formatEther } from "viem";
|
|
1219
|
-
function formatBalance(wei) {
|
|
1220
|
-
const formatted = formatEther(wei);
|
|
1221
|
-
const parsed = parseFloat(formatted);
|
|
1222
|
-
if (parsed > 0 && parsed < 1e-5) {
|
|
1223
|
-
return "<0.00001";
|
|
1224
|
-
}
|
|
1225
|
-
const magnitude = Math.floor(parsed).toString().length;
|
|
1226
|
-
return parsed.toLocaleString("en-US", { maximumFractionDigits: Math.max(0, 6 - magnitude) });
|
|
1227
|
-
}
|
|
1228
|
-
|
|
1229
|
-
// src/ui/Balance.tsx
|
|
1230
|
-
import { formatEther as formatEther2 } from "viem";
|
|
1231
|
-
import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
1232
|
-
function Balance({ wei }) {
|
|
1233
|
-
return /* @__PURE__ */ jsxs11("span", { className: "inline-flex items-center gap-1", title: formatEther2(wei), children: [
|
|
1234
|
-
formatBalance(wei),
|
|
1235
|
-
" ",
|
|
1236
|
-
/* @__PURE__ */ jsx13(EthIcon, {})
|
|
1237
|
-
] });
|
|
1238
|
-
}
|
|
1239
|
-
|
|
1240
|
-
// src/onboarding/quarry/Allowance.tsx
|
|
1241
|
-
import { useEffect as useEffect6 } from "react";
|
|
1242
|
-
|
|
1243
|
-
// src/errors/useShowQueryError.ts
|
|
1244
|
-
import { useEffect as useEffect5 } from "react";
|
|
1245
|
-
function useShowQueryError(result) {
|
|
1246
|
-
const { error: error2, refetch } = result;
|
|
1247
|
-
useEffect5(() => {
|
|
1248
|
-
if (!error2) return;
|
|
1249
|
-
return addError({ error: error2, retry: refetch, dismiss: () => {
|
|
1250
|
-
} });
|
|
1251
|
-
}, [error2, refetch]);
|
|
1252
|
-
return result;
|
|
1253
|
-
}
|
|
1254
|
-
|
|
1255
|
-
// src/onboarding/quarry/Allowance.tsx
|
|
1256
|
-
import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
1257
|
-
function Allowance({ isActive, isExpanded, userAddress }) {
|
|
1258
|
-
const allowance = useShowQueryError(useAllowance(userAddress));
|
|
1259
|
-
const claimGasPass2 = useShowMutationError(useClaimGasPass());
|
|
1260
|
-
useEffect6(() => {
|
|
1261
|
-
const timer = setTimeout(() => {
|
|
1262
|
-
if (isActive && claimGasPass2.status === "idle" && allowance.isSuccess && allowance.data != null && allowance.data < parseEther3("0.01")) {
|
|
1263
|
-
claimGasPass2.mutate(userAddress);
|
|
1264
|
-
}
|
|
1265
|
-
});
|
|
1266
|
-
return () => clearTimeout(timer);
|
|
1267
|
-
}, [allowance.data, allowance.isSuccess, claimGasPass2, isActive, userAddress]);
|
|
1268
|
-
return /* @__PURE__ */ jsxs12("div", { className: "flex flex-col gap-4", children: [
|
|
1269
|
-
/* @__PURE__ */ jsxs12("div", { className: "flex justify-between gap-4", children: [
|
|
1270
|
-
/* @__PURE__ */ jsxs12("div", { children: [
|
|
1271
|
-
/* @__PURE__ */ jsx14("div", { children: "Allowance" }),
|
|
1272
|
-
/* @__PURE__ */ jsx14("div", { className: "font-mono text-white", children: allowance.data != null ? /* @__PURE__ */ jsx14(Balance, { wei: allowance.data }) : /* @__PURE__ */ jsx14(PendingIcon, { className: "text-sm" }) })
|
|
1273
|
-
] }),
|
|
1274
|
-
/* @__PURE__ */ jsx14(
|
|
1275
|
-
Button,
|
|
1276
|
-
{
|
|
1277
|
-
variant: isActive ? "primary" : "tertiary",
|
|
1278
|
-
className: "flex-shrink-0 text-sm p-1 w-28",
|
|
1279
|
-
autoFocus: isActive || isExpanded,
|
|
1280
|
-
pending: allowance.status === "pending" || claimGasPass2.status === "pending",
|
|
1281
|
-
onClick: () => claimGasPass2.mutate(userAddress),
|
|
1282
|
-
children: "Top up"
|
|
1283
|
-
}
|
|
1284
|
-
)
|
|
1285
|
-
] }),
|
|
1286
|
-
isExpanded ? /* @__PURE__ */ jsx14("p", { className: "text-sm", children: "Your allowance is used to pay for onchain computation." }) : null
|
|
1287
|
-
] });
|
|
1288
|
-
}
|
|
1289
|
-
|
|
1290
1206
|
// src/onboarding/Session.tsx
|
|
1291
|
-
import { useEffect as
|
|
1207
|
+
import { useEffect as useEffect6 } from "react";
|
|
1292
1208
|
|
|
1293
1209
|
// src/onboarding/useSetupSession.ts
|
|
1294
|
-
import { encodeFunctionData } from "viem";
|
|
1295
|
-
import { useMutation
|
|
1296
|
-
import { getAction as
|
|
1297
|
-
import { sendUserOperation as sendUserOperation2, waitForUserOperationReceipt } from "viem/account-abstraction";
|
|
1298
|
-
import { waitForTransactionReceipt as waitForTransactionReceipt2 } from "viem/actions";
|
|
1210
|
+
import { encodeFunctionData, parseEventLogs as parseEventLogs2, zeroAddress } from "viem";
|
|
1211
|
+
import { useMutation, useQueryClient as useQueryClient3 } from "@tanstack/react-query";
|
|
1212
|
+
import { getAction as getAction5 } from "viem/utils";
|
|
1213
|
+
import { entryPoint07Abi as entryPoint07Abi2, sendUserOperation as sendUserOperation2, waitForUserOperationReceipt } from "viem/account-abstraction";
|
|
1214
|
+
import { sendCalls, waitForTransactionReceipt as waitForTransactionReceipt2 } from "viem/actions";
|
|
1299
1215
|
|
|
1300
1216
|
// src/utils/defineCall.ts
|
|
1301
1217
|
function defineCall(call) {
|
|
@@ -1303,23 +1219,23 @@ function defineCall(call) {
|
|
|
1303
1219
|
}
|
|
1304
1220
|
|
|
1305
1221
|
// src/onboarding/useSetupSession.ts
|
|
1306
|
-
import { useClient as
|
|
1222
|
+
import { useClient as useClient8 } from "wagmi";
|
|
1307
1223
|
import { resourceToHex as resourceToHex2 } from "@latticexyz/common";
|
|
1308
1224
|
import IBaseWorldAbi from "@latticexyz/world/out/IBaseWorld.sol/IBaseWorld.abi.json";
|
|
1309
1225
|
|
|
1310
1226
|
// src/utils/callWithSignature.ts
|
|
1311
1227
|
import { parseErc6492Signature } from "viem";
|
|
1312
1228
|
import { writeContract as viem_writeContract } from "viem/actions";
|
|
1313
|
-
import { getAction as
|
|
1229
|
+
import { getAction as getAction4 } from "viem/utils";
|
|
1314
1230
|
|
|
1315
1231
|
// src/utils/signCall.ts
|
|
1316
1232
|
import { toHex } from "viem";
|
|
1317
1233
|
import { signTypedData } from "viem/actions";
|
|
1318
1234
|
import { callWithSignatureTypes } from "@latticexyz/world-module-callwithsignature/internal";
|
|
1319
|
-
import { getRecord as
|
|
1235
|
+
import { getRecord as getRecord4 } from "@latticexyz/store/internal";
|
|
1320
1236
|
import moduleConfig from "@latticexyz/world-module-callwithsignature/mud.config";
|
|
1321
1237
|
import { hexToResource } from "@latticexyz/common";
|
|
1322
|
-
import { getAction as
|
|
1238
|
+
import { getAction as getAction3 } from "viem/utils";
|
|
1323
1239
|
async function signCall({
|
|
1324
1240
|
userClient,
|
|
1325
1241
|
worldAddress,
|
|
@@ -1328,14 +1244,14 @@ async function signCall({
|
|
|
1328
1244
|
nonce: initialNonce,
|
|
1329
1245
|
client
|
|
1330
1246
|
}) {
|
|
1331
|
-
const nonce = initialNonce ?? (client ? (await
|
|
1247
|
+
const nonce = initialNonce ?? (client ? (await getRecord4(client, {
|
|
1332
1248
|
address: worldAddress,
|
|
1333
1249
|
table: moduleConfig.tables.CallWithSignatureNonces,
|
|
1334
1250
|
key: { signer: userClient.account.address },
|
|
1335
1251
|
blockTag: "pending"
|
|
1336
1252
|
})).nonce : 0n);
|
|
1337
1253
|
const { namespace: systemNamespace, name: systemName } = hexToResource(systemId);
|
|
1338
|
-
return await
|
|
1254
|
+
return await getAction3(
|
|
1339
1255
|
userClient,
|
|
1340
1256
|
signTypedData,
|
|
1341
1257
|
"signTypedData"
|
|
@@ -1370,7 +1286,7 @@ async function callWithSignature({
|
|
|
1370
1286
|
"ERC-6492 signatures, like from Coinbase Smart Wallet, are not yet supported. Try using a different wallet?"
|
|
1371
1287
|
);
|
|
1372
1288
|
}
|
|
1373
|
-
return
|
|
1289
|
+
return getAction4(
|
|
1374
1290
|
sessionClient,
|
|
1375
1291
|
viem_writeContract,
|
|
1376
1292
|
"writeContract"
|
|
@@ -1384,12 +1300,67 @@ async function callWithSignature({
|
|
|
1384
1300
|
|
|
1385
1301
|
// src/onboarding/useSetupSession.ts
|
|
1386
1302
|
import { systemsConfig as worldSystemsConfig } from "@latticexyz/world/mud.config";
|
|
1387
|
-
|
|
1388
|
-
|
|
1303
|
+
|
|
1304
|
+
// src/createBundlerClient.ts
|
|
1305
|
+
import {
|
|
1306
|
+
createBundlerClient as viem_createBundlerClient
|
|
1307
|
+
} from "viem/account-abstraction";
|
|
1308
|
+
|
|
1309
|
+
// src/actions/cachedFeesPerGas.ts
|
|
1310
|
+
import { estimateFeesPerGas } from "viem/actions";
|
|
1311
|
+
function cachedFeesPerGas(client, options = { refreshInterval: 1e4 }) {
|
|
1312
|
+
let fees = null;
|
|
1313
|
+
async function refreshFees() {
|
|
1314
|
+
fees = await estimateFeesPerGas(client);
|
|
1315
|
+
}
|
|
1316
|
+
refreshFees();
|
|
1317
|
+
setInterval(refreshFees, options.refreshInterval);
|
|
1318
|
+
return async () => {
|
|
1319
|
+
if (fees) return fees;
|
|
1320
|
+
fees = await estimateFeesPerGas(client);
|
|
1321
|
+
return fees;
|
|
1322
|
+
};
|
|
1323
|
+
}
|
|
1324
|
+
|
|
1325
|
+
// src/createBundlerClient.ts
|
|
1326
|
+
function createBundlerClient(config) {
|
|
1327
|
+
const client = config.client;
|
|
1328
|
+
if (!client) throw new Error("No `client` provided to `createBundlerClient`.");
|
|
1329
|
+
const chain = config.chain ?? client.chain;
|
|
1330
|
+
const paymaster = chain ? getPaymaster(chain) : void 0;
|
|
1331
|
+
return viem_createBundlerClient({
|
|
1332
|
+
...defaultClientConfig,
|
|
1333
|
+
paymaster: paymaster ? {
|
|
1334
|
+
getPaymasterData: async () => ({
|
|
1335
|
+
paymaster: paymaster.address,
|
|
1336
|
+
paymasterData: "0x"
|
|
1337
|
+
})
|
|
1338
|
+
} : void 0,
|
|
1339
|
+
userOperation: {
|
|
1340
|
+
estimateFeesPerGas: createFeeEstimator(client)
|
|
1341
|
+
},
|
|
1342
|
+
...config
|
|
1343
|
+
});
|
|
1344
|
+
}
|
|
1345
|
+
function createFeeEstimator(client) {
|
|
1346
|
+
if (!client.chain) return;
|
|
1347
|
+
if (client.chain.id === 31337) {
|
|
1348
|
+
return async () => ({ maxFeePerGas: 100000n, maxPriorityFeePerGas: 0n });
|
|
1349
|
+
}
|
|
1350
|
+
if ([690, 17069, 695569].includes(client.chain.id)) {
|
|
1351
|
+
return cachedFeesPerGas(client);
|
|
1352
|
+
}
|
|
1353
|
+
}
|
|
1354
|
+
|
|
1355
|
+
// src/onboarding/useSetupSession.ts
|
|
1356
|
+
import { isIdPlaceConnector as isIdPlaceConnector2 } from "@latticexyz/id.place/internal";
|
|
1357
|
+
import { storeEventsAbi } from "@latticexyz/store";
|
|
1358
|
+
function useSetupSession({ connector, userClient }) {
|
|
1359
|
+
const queryClient = useQueryClient3();
|
|
1389
1360
|
const { chainId, worldAddress } = useEntryKitConfig();
|
|
1390
|
-
const client =
|
|
1361
|
+
const client = useClient8({ chainId });
|
|
1391
1362
|
const mutationKey = ["setupSession", client?.chain.id, userClient.account.address];
|
|
1392
|
-
return
|
|
1363
|
+
return useMutation({
|
|
1393
1364
|
retry: 0,
|
|
1394
1365
|
mutationKey,
|
|
1395
1366
|
mutationFn: async ({
|
|
@@ -1400,8 +1371,69 @@ function useSetupSession({ userClient }) {
|
|
|
1400
1371
|
if (!client) throw new Error("Client not ready.");
|
|
1401
1372
|
const paymaster = getPaymaster(client.chain);
|
|
1402
1373
|
const sessionAddress = sessionClient.account.address;
|
|
1403
|
-
console.log("setting up session");
|
|
1404
|
-
if (
|
|
1374
|
+
console.log("setting up session", userClient);
|
|
1375
|
+
if (isIdPlaceConnector2(connector)) {
|
|
1376
|
+
const calls = [];
|
|
1377
|
+
if (registerSpender && paymaster?.type === "quarry") {
|
|
1378
|
+
console.log("registering spender");
|
|
1379
|
+
calls.push(
|
|
1380
|
+
defineCall({
|
|
1381
|
+
to: paymaster.address,
|
|
1382
|
+
abi: paymasterAbi,
|
|
1383
|
+
functionName: "registerSpender",
|
|
1384
|
+
args: [sessionAddress]
|
|
1385
|
+
})
|
|
1386
|
+
);
|
|
1387
|
+
}
|
|
1388
|
+
if (registerDelegation) {
|
|
1389
|
+
console.log("registering delegation");
|
|
1390
|
+
calls.push(
|
|
1391
|
+
defineCall({
|
|
1392
|
+
to: worldAddress,
|
|
1393
|
+
abi: worldAbi,
|
|
1394
|
+
functionName: "registerDelegation",
|
|
1395
|
+
args: [sessionAddress, unlimitedDelegationControlId, "0x"]
|
|
1396
|
+
})
|
|
1397
|
+
);
|
|
1398
|
+
}
|
|
1399
|
+
if (!calls.length) return;
|
|
1400
|
+
console.log("setting up account with", calls, userClient.account.address, sessionAddress);
|
|
1401
|
+
const { id } = await getAction5(
|
|
1402
|
+
userClient,
|
|
1403
|
+
sendCalls,
|
|
1404
|
+
"sendCalls"
|
|
1405
|
+
)({
|
|
1406
|
+
account: userClient.account,
|
|
1407
|
+
calls
|
|
1408
|
+
});
|
|
1409
|
+
console.log("got send calls ID", id);
|
|
1410
|
+
const bundlerClient = createBundlerClient({
|
|
1411
|
+
transport: getBundlerTransport(client.chain),
|
|
1412
|
+
client
|
|
1413
|
+
});
|
|
1414
|
+
console.log("waiting for receipt");
|
|
1415
|
+
const receipt = await getAction5(
|
|
1416
|
+
bundlerClient,
|
|
1417
|
+
waitForUserOperationReceipt,
|
|
1418
|
+
"waitForUserOperationReceipt"
|
|
1419
|
+
)({ hash: id });
|
|
1420
|
+
console.log("got result", receipt);
|
|
1421
|
+
console.log(
|
|
1422
|
+
"parsed logs",
|
|
1423
|
+
worldAddress,
|
|
1424
|
+
parseEventLogs2({
|
|
1425
|
+
logs: receipt.logs,
|
|
1426
|
+
abi: [
|
|
1427
|
+
...entryPoint07Abi2,
|
|
1428
|
+
// TODO: export account abi from id package
|
|
1429
|
+
// ...abi,
|
|
1430
|
+
...worldAbi,
|
|
1431
|
+
...storeEventsAbi,
|
|
1432
|
+
...calls.flatMap((call) => call.abi)
|
|
1433
|
+
]
|
|
1434
|
+
})
|
|
1435
|
+
);
|
|
1436
|
+
} else if (userClient.account.type === "smart") {
|
|
1405
1437
|
const calls = [];
|
|
1406
1438
|
if (registerSpender && paymaster?.type === "quarry") {
|
|
1407
1439
|
console.log("registering spender");
|
|
@@ -1427,9 +1459,9 @@ function useSetupSession({ userClient }) {
|
|
|
1427
1459
|
}
|
|
1428
1460
|
if (!calls.length) return;
|
|
1429
1461
|
console.log("setting up account with", calls, userClient);
|
|
1430
|
-
const hash = await
|
|
1462
|
+
const hash = await getAction5(userClient, sendUserOperation2, "sendUserOperation")({ calls });
|
|
1431
1463
|
console.log("got user op hash", hash);
|
|
1432
|
-
const receipt = await
|
|
1464
|
+
const receipt = await getAction5(
|
|
1433
1465
|
userClient,
|
|
1434
1466
|
waitForUserOperationReceipt,
|
|
1435
1467
|
"waitForUserOperationReceipt"
|
|
@@ -1468,95 +1500,59 @@ function useSetupSession({ userClient }) {
|
|
|
1468
1500
|
callData: encodeFunctionData({
|
|
1469
1501
|
abi: IBaseWorldAbi,
|
|
1470
1502
|
functionName: "registerDelegation",
|
|
1471
|
-
args: [sessionAddress, unlimitedDelegationControlId, "0x"]
|
|
1472
|
-
})
|
|
1473
|
-
});
|
|
1474
|
-
console.log("got delegation tx", tx);
|
|
1475
|
-
txs.push(tx);
|
|
1476
|
-
}
|
|
1477
|
-
if (!txs.length) return;
|
|
1478
|
-
console.log("waiting for", txs.length, "receipts");
|
|
1479
|
-
for (const hash of txs) {
|
|
1480
|
-
const receipt = await
|
|
1481
|
-
console.log("got tx receipt", receipt);
|
|
1482
|
-
if (receipt.status === "reverted") {
|
|
1483
|
-
console.error("tx reverted?", receipt);
|
|
1484
|
-
}
|
|
1485
|
-
}
|
|
1486
|
-
}
|
|
1487
|
-
await
|
|
1488
|
-
|
|
1489
|
-
|
|
1490
|
-
|
|
1491
|
-
|
|
1492
|
-
|
|
1493
|
-
|
|
1494
|
-
|
|
1495
|
-
|
|
1496
|
-
|
|
1497
|
-
|
|
1498
|
-
|
|
1499
|
-
|
|
1500
|
-
|
|
1501
|
-
|
|
1502
|
-
|
|
1503
|
-
|
|
1504
|
-
|
|
1505
|
-
|
|
1506
|
-
|
|
1507
|
-
|
|
1508
|
-
|
|
1509
|
-
|
|
1510
|
-
createBundlerClient as viem_createBundlerClient
|
|
1511
|
-
} from "viem/account-abstraction";
|
|
1512
|
-
|
|
1513
|
-
// src/actions/cachedFeesPerGas.ts
|
|
1514
|
-
import { estimateFeesPerGas } from "viem/actions";
|
|
1515
|
-
function cachedFeesPerGas(client, options = { refreshInterval: 1e4 }) {
|
|
1516
|
-
let fees = null;
|
|
1517
|
-
async function refreshFees() {
|
|
1518
|
-
fees = await estimateFeesPerGas(client);
|
|
1519
|
-
}
|
|
1520
|
-
refreshFees();
|
|
1521
|
-
setInterval(refreshFees, options.refreshInterval);
|
|
1522
|
-
return async () => {
|
|
1523
|
-
if (fees) return fees;
|
|
1524
|
-
fees = await estimateFeesPerGas(client);
|
|
1525
|
-
return fees;
|
|
1526
|
-
};
|
|
1527
|
-
}
|
|
1528
|
-
|
|
1529
|
-
// src/createBundlerClient.ts
|
|
1530
|
-
function createBundlerClient(config) {
|
|
1531
|
-
const client = config.client;
|
|
1532
|
-
if (!client) throw new Error("No `client` provided to `createBundlerClient`.");
|
|
1533
|
-
const chain = config.chain ?? client.chain;
|
|
1534
|
-
const paymaster = chain ? getPaymaster(chain) : void 0;
|
|
1535
|
-
return viem_createBundlerClient({
|
|
1536
|
-
...defaultClientConfig,
|
|
1537
|
-
paymaster: paymaster ? {
|
|
1538
|
-
getPaymasterData: async () => ({
|
|
1539
|
-
paymaster: paymaster.address,
|
|
1540
|
-
paymasterData: "0x"
|
|
1541
|
-
})
|
|
1542
|
-
} : void 0,
|
|
1543
|
-
userOperation: {
|
|
1544
|
-
estimateFeesPerGas: createFeeEstimator(client)
|
|
1545
|
-
},
|
|
1546
|
-
...config
|
|
1503
|
+
args: [sessionAddress, unlimitedDelegationControlId, "0x"]
|
|
1504
|
+
})
|
|
1505
|
+
});
|
|
1506
|
+
console.log("got delegation tx", tx);
|
|
1507
|
+
txs.push(tx);
|
|
1508
|
+
}
|
|
1509
|
+
if (!txs.length) return;
|
|
1510
|
+
console.log("waiting for", txs.length, "receipts");
|
|
1511
|
+
for (const hash of txs) {
|
|
1512
|
+
const receipt = await getAction5(client, waitForTransactionReceipt2, "waitForTransactionReceipt")({ hash });
|
|
1513
|
+
console.log("got tx receipt", receipt);
|
|
1514
|
+
if (receipt.status === "reverted") {
|
|
1515
|
+
console.error("tx reverted?", receipt);
|
|
1516
|
+
}
|
|
1517
|
+
}
|
|
1518
|
+
}
|
|
1519
|
+
await (async () => {
|
|
1520
|
+
if (await sessionClient.account.isDeployed?.()) return;
|
|
1521
|
+
console.log("creating session account by sending empty user op");
|
|
1522
|
+
const hash = await getAction5(
|
|
1523
|
+
sessionClient,
|
|
1524
|
+
sendUserOperation2,
|
|
1525
|
+
"sendUserOperation"
|
|
1526
|
+
)({
|
|
1527
|
+
calls: [{ to: zeroAddress }]
|
|
1528
|
+
});
|
|
1529
|
+
const receipt = await getAction5(
|
|
1530
|
+
sessionClient,
|
|
1531
|
+
waitForUserOperationReceipt,
|
|
1532
|
+
"waitForUserOperationReceipt"
|
|
1533
|
+
)({ hash });
|
|
1534
|
+
console.log("got user op receipt", receipt);
|
|
1535
|
+
})();
|
|
1536
|
+
await Promise.all([
|
|
1537
|
+
queryClient.invalidateQueries({ queryKey: ["getSpender"] }),
|
|
1538
|
+
queryClient.invalidateQueries({ queryKey: ["getDelegation"] }),
|
|
1539
|
+
queryClient.invalidateQueries({ queryKey: ["getPrerequisites"] })
|
|
1540
|
+
]);
|
|
1541
|
+
}
|
|
1547
1542
|
});
|
|
1548
1543
|
}
|
|
1549
|
-
|
|
1550
|
-
|
|
1551
|
-
|
|
1552
|
-
|
|
1553
|
-
|
|
1554
|
-
|
|
1555
|
-
|
|
1556
|
-
|
|
1557
|
-
}
|
|
1544
|
+
|
|
1545
|
+
// src/useSessionClient.ts
|
|
1546
|
+
import { useClient as useClient9 } from "wagmi";
|
|
1547
|
+
import {
|
|
1548
|
+
queryOptions as queryOptions8,
|
|
1549
|
+
useQuery as useQuery10,
|
|
1550
|
+
useQueryClient as useQueryClient4
|
|
1551
|
+
} from "@tanstack/react-query";
|
|
1558
1552
|
|
|
1559
1553
|
// src/getSessionClient.ts
|
|
1554
|
+
import { smartAccountActions } from "permissionless";
|
|
1555
|
+
import { callFrom, sendUserOperationFrom } from "@latticexyz/world/internal";
|
|
1560
1556
|
async function getSessionClient({
|
|
1561
1557
|
userAddress,
|
|
1562
1558
|
sessionAccount,
|
|
@@ -1618,9 +1614,9 @@ function getSessionClientQueryOptions({
|
|
|
1618
1614
|
});
|
|
1619
1615
|
}
|
|
1620
1616
|
function useSessionClient(userAddress) {
|
|
1621
|
-
const queryClient =
|
|
1617
|
+
const queryClient = useQueryClient4();
|
|
1622
1618
|
const { chainId, worldAddress } = useEntryKitConfig();
|
|
1623
|
-
const client =
|
|
1619
|
+
const client = useClient9({ chainId });
|
|
1624
1620
|
return useQuery10(
|
|
1625
1621
|
getSessionClientQueryOptions({
|
|
1626
1622
|
queryClient,
|
|
@@ -1631,22 +1627,29 @@ function useSessionClient(userAddress) {
|
|
|
1631
1627
|
);
|
|
1632
1628
|
}
|
|
1633
1629
|
|
|
1630
|
+
// src/errors/useShowQueryError.ts
|
|
1631
|
+
import { useEffect as useEffect5 } from "react";
|
|
1632
|
+
function useShowQueryError(result) {
|
|
1633
|
+
const { error: error2, refetch } = result;
|
|
1634
|
+
useEffect5(() => {
|
|
1635
|
+
if (!error2) return;
|
|
1636
|
+
return addError({ error: error2, retry: refetch, dismiss: () => {
|
|
1637
|
+
} });
|
|
1638
|
+
}, [error2, refetch]);
|
|
1639
|
+
return result;
|
|
1640
|
+
}
|
|
1641
|
+
|
|
1634
1642
|
// src/onboarding/Session.tsx
|
|
1635
|
-
import { jsx as
|
|
1636
|
-
function Session({ isActive, isExpanded, userClient, registerSpender, registerDelegation }) {
|
|
1643
|
+
import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
1644
|
+
function Session({ isActive, isExpanded, connector, userClient, registerSpender, registerDelegation }) {
|
|
1637
1645
|
const sessionClient = useShowQueryError(useSessionClient(userClient.account.address));
|
|
1638
|
-
const setup = useShowMutationError(useSetupSession({ userClient }));
|
|
1646
|
+
const setup = useShowMutationError(useSetupSession({ userClient, connector }));
|
|
1639
1647
|
const hasSession = !registerDelegation && !registerDelegation;
|
|
1640
1648
|
const { data: prerequisites } = usePrerequisites(userClient.account.address);
|
|
1641
1649
|
const { hasAllowance, hasGasBalance, hasQuarryGasBalance } = prerequisites ?? {};
|
|
1642
|
-
|
|
1650
|
+
useEffect6(() => {
|
|
1643
1651
|
const timer = setTimeout(() => {
|
|
1644
1652
|
if (isActive && setup.status === "idle" && sessionClient.data && !hasSession && (hasAllowance || hasGasBalance || hasQuarryGasBalance)) {
|
|
1645
|
-
setup.mutate({
|
|
1646
|
-
sessionClient: sessionClient.data,
|
|
1647
|
-
registerSpender,
|
|
1648
|
-
registerDelegation
|
|
1649
|
-
});
|
|
1650
1653
|
}
|
|
1651
1654
|
});
|
|
1652
1655
|
return () => clearTimeout(timer);
|
|
@@ -1661,13 +1664,13 @@ function Session({ isActive, isExpanded, userClient, registerSpender, registerDe
|
|
|
1661
1664
|
hasGasBalance,
|
|
1662
1665
|
hasQuarryGasBalance
|
|
1663
1666
|
]);
|
|
1664
|
-
return /* @__PURE__ */
|
|
1665
|
-
/* @__PURE__ */
|
|
1666
|
-
/* @__PURE__ */
|
|
1667
|
-
/* @__PURE__ */
|
|
1668
|
-
/* @__PURE__ */
|
|
1667
|
+
return /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-4", children: [
|
|
1668
|
+
/* @__PURE__ */ jsxs10("div", { className: "flex justify-between gap-4", children: [
|
|
1669
|
+
/* @__PURE__ */ jsxs10("div", { children: [
|
|
1670
|
+
/* @__PURE__ */ jsx12("div", { children: "Session" }),
|
|
1671
|
+
/* @__PURE__ */ jsx12("div", { className: "font-mono text-white", children: hasSession ? "Enabled" : "Set up" })
|
|
1669
1672
|
] }),
|
|
1670
|
-
hasSession ? /* @__PURE__ */
|
|
1673
|
+
hasSession ? /* @__PURE__ */ jsx12(Button, { variant: "tertiary", className: "flex-shrink-0 text-sm p-1 w-28", autoFocus: isActive, disabled: true, children: "Enabled" }) : /* @__PURE__ */ jsx12(
|
|
1671
1674
|
Button,
|
|
1672
1675
|
{
|
|
1673
1676
|
variant: isActive ? "primary" : "tertiary",
|
|
@@ -1683,14 +1686,61 @@ function Session({ isActive, isExpanded, userClient, registerSpender, registerDe
|
|
|
1683
1686
|
}
|
|
1684
1687
|
)
|
|
1685
1688
|
] }),
|
|
1686
|
-
isExpanded ? /* @__PURE__ */
|
|
1689
|
+
isExpanded ? /* @__PURE__ */ jsx12("p", { className: "text-sm", children: "You can perform actions in this app without interruptions for approvals." }) : null
|
|
1690
|
+
] });
|
|
1691
|
+
}
|
|
1692
|
+
|
|
1693
|
+
// src/onboarding/GasBalance.tsx
|
|
1694
|
+
import { useEffect as useEffect8, useState as useState2 } from "react";
|
|
1695
|
+
import { parseEther as parseEther2 } from "viem";
|
|
1696
|
+
import { useQueryClient as useQueryClient6 } from "@tanstack/react-query";
|
|
1697
|
+
|
|
1698
|
+
// src/icons/EthIcon.tsx
|
|
1699
|
+
import { twMerge as twMerge6 } from "tailwind-merge";
|
|
1700
|
+
import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
1701
|
+
function EthIcon({ className, ...props }) {
|
|
1702
|
+
return /* @__PURE__ */ jsxs11(
|
|
1703
|
+
"svg",
|
|
1704
|
+
{
|
|
1705
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1706
|
+
viewBox: "0 0 263 428",
|
|
1707
|
+
fill: "currentColor",
|
|
1708
|
+
className: twMerge6("w-[0.6em] h-[1em]", className),
|
|
1709
|
+
...props,
|
|
1710
|
+
children: [
|
|
1711
|
+
/* @__PURE__ */ jsx13("path", { d: "M132 321V428L263 243L132 321Z" }),
|
|
1712
|
+
/* @__PURE__ */ jsx13("path", { d: "M0 243L132 321V428", fillOpacity: "0.5" }),
|
|
1713
|
+
/* @__PURE__ */ jsx13("path", { d: "M132 0V296L263 218" }),
|
|
1714
|
+
/* @__PURE__ */ jsx13("path", { d: "M0 218L132 296V0L0 218Z", fillOpacity: "0.5" })
|
|
1715
|
+
]
|
|
1716
|
+
}
|
|
1717
|
+
);
|
|
1718
|
+
}
|
|
1719
|
+
|
|
1720
|
+
// src/formatBalance.ts
|
|
1721
|
+
import { formatEther } from "viem";
|
|
1722
|
+
function formatBalance(wei) {
|
|
1723
|
+
const formatted = formatEther(wei);
|
|
1724
|
+
const parsed = parseFloat(formatted);
|
|
1725
|
+
if (parsed > 0 && parsed < 1e-5) {
|
|
1726
|
+
return "<0.00001";
|
|
1727
|
+
}
|
|
1728
|
+
const magnitude = Math.floor(parsed).toString().length;
|
|
1729
|
+
return parsed.toLocaleString("en-US", { maximumFractionDigits: Math.max(0, 6 - magnitude) });
|
|
1730
|
+
}
|
|
1731
|
+
|
|
1732
|
+
// src/ui/Balance.tsx
|
|
1733
|
+
import { formatEther as formatEther2 } from "viem";
|
|
1734
|
+
import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
1735
|
+
function Balance({ wei }) {
|
|
1736
|
+
return /* @__PURE__ */ jsxs12("span", { className: "inline-flex items-center gap-1", title: formatEther2(wei), children: [
|
|
1737
|
+
formatBalance(wei),
|
|
1738
|
+
" ",
|
|
1739
|
+
/* @__PURE__ */ jsx14(EthIcon, {})
|
|
1687
1740
|
] });
|
|
1688
1741
|
}
|
|
1689
1742
|
|
|
1690
1743
|
// src/onboarding/GasBalance.tsx
|
|
1691
|
-
import { useEffect as useEffect9, useState as useState2 } from "react";
|
|
1692
|
-
import { parseEther as parseEther4 } from "viem";
|
|
1693
|
-
import { useQueryClient as useQueryClient7 } from "@tanstack/react-query";
|
|
1694
1744
|
import { useBalance as useBalance2, useWatchBlockNumber } from "wagmi";
|
|
1695
1745
|
|
|
1696
1746
|
// src/data/relayChains.json
|
|
@@ -1974,14 +2024,14 @@ var relayChains_default = {
|
|
|
1974
2024
|
};
|
|
1975
2025
|
|
|
1976
2026
|
// src/onboarding/useSetBalance.ts
|
|
1977
|
-
import { useQueryClient as
|
|
2027
|
+
import { useQueryClient as useQueryClient5, useMutation as useMutation2 } from "@tanstack/react-query";
|
|
1978
2028
|
import { setBalance as setBalance2 } from "viem/actions";
|
|
1979
|
-
import { useClient as
|
|
2029
|
+
import { useClient as useClient10 } from "wagmi";
|
|
1980
2030
|
function useSetBalance() {
|
|
1981
|
-
const queryClient =
|
|
2031
|
+
const queryClient = useQueryClient5();
|
|
1982
2032
|
const { chainId } = useEntryKitConfig();
|
|
1983
|
-
const client =
|
|
1984
|
-
return
|
|
2033
|
+
const client = useClient10({ chainId });
|
|
2034
|
+
return useMutation2({
|
|
1985
2035
|
retry: 0,
|
|
1986
2036
|
mutationKey: ["setBalance", chainId],
|
|
1987
2037
|
mutationFn: async (params) => {
|
|
@@ -1998,10 +2048,10 @@ function useSetBalance() {
|
|
|
1998
2048
|
}
|
|
1999
2049
|
|
|
2000
2050
|
// src/errors/usePrevious.ts
|
|
2001
|
-
import { useEffect as
|
|
2051
|
+
import { useEffect as useEffect7, useRef as useRef3 } from "react";
|
|
2002
2052
|
function usePrevious(value, initialValue) {
|
|
2003
2053
|
const ref = useRef3();
|
|
2004
|
-
|
|
2054
|
+
useEffect7(() => {
|
|
2005
2055
|
ref.current = { value };
|
|
2006
2056
|
}, [value]);
|
|
2007
2057
|
return ref.current ? ref.current.value : initialValue;
|
|
@@ -2009,9 +2059,9 @@ function usePrevious(value, initialValue) {
|
|
|
2009
2059
|
|
|
2010
2060
|
// src/icons/IconSVG.tsx
|
|
2011
2061
|
import { twMerge as twMerge7 } from "tailwind-merge";
|
|
2012
|
-
import { jsx as
|
|
2062
|
+
import { jsx as jsx15 } from "react/jsx-runtime";
|
|
2013
2063
|
function IconSVG({ className, children, ...props }) {
|
|
2014
|
-
return /* @__PURE__ */
|
|
2064
|
+
return /* @__PURE__ */ jsx15(
|
|
2015
2065
|
"svg",
|
|
2016
2066
|
{
|
|
2017
2067
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -2025,9 +2075,9 @@ function IconSVG({ className, children, ...props }) {
|
|
|
2025
2075
|
}
|
|
2026
2076
|
|
|
2027
2077
|
// src/icons/CopyIcon.tsx
|
|
2028
|
-
import { jsx as
|
|
2078
|
+
import { jsx as jsx16 } from "react/jsx-runtime";
|
|
2029
2079
|
function CopyIcon(props) {
|
|
2030
|
-
return /* @__PURE__ */
|
|
2080
|
+
return /* @__PURE__ */ jsx16(IconSVG, { ...props, children: /* @__PURE__ */ jsx16(
|
|
2031
2081
|
"path",
|
|
2032
2082
|
{
|
|
2033
2083
|
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",
|
|
@@ -2041,9 +2091,9 @@ function CopyIcon(props) {
|
|
|
2041
2091
|
}
|
|
2042
2092
|
|
|
2043
2093
|
// src/icons/CheckIcon.tsx
|
|
2044
|
-
import { jsx as
|
|
2094
|
+
import { jsx as jsx17 } from "react/jsx-runtime";
|
|
2045
2095
|
function CheckIcon(props) {
|
|
2046
|
-
return /* @__PURE__ */
|
|
2096
|
+
return /* @__PURE__ */ jsx17(IconSVG, { ...props, children: /* @__PURE__ */ jsx17(
|
|
2047
2097
|
"path",
|
|
2048
2098
|
{
|
|
2049
2099
|
d: "M5 13L9 17L19 7",
|
|
@@ -2057,9 +2107,9 @@ function CheckIcon(props) {
|
|
|
2057
2107
|
}
|
|
2058
2108
|
|
|
2059
2109
|
// src/onboarding/GasBalance.tsx
|
|
2060
|
-
import { Fragment, jsx as
|
|
2110
|
+
import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
2061
2111
|
function GasBalance({ isActive, isExpanded, sessionAddress }) {
|
|
2062
|
-
const queryClient =
|
|
2112
|
+
const queryClient = useQueryClient6();
|
|
2063
2113
|
const { chain } = useEntryKitConfig();
|
|
2064
2114
|
const [copied, setCopied] = useState2(false);
|
|
2065
2115
|
const balance = useShowQueryError(useBalance2({ chainId: chain.id, address: sessionAddress }));
|
|
@@ -2072,19 +2122,19 @@ function GasBalance({ isActive, isExpanded, sessionAddress }) {
|
|
|
2072
2122
|
setCopied(true);
|
|
2073
2123
|
setTimeout(() => setCopied(false), 2e3);
|
|
2074
2124
|
};
|
|
2075
|
-
|
|
2125
|
+
useEffect8(() => {
|
|
2076
2126
|
if (balance.data != null && prevBalance?.value === 0n && balance.data.value > 0n) {
|
|
2077
2127
|
queryClient.invalidateQueries({ queryKey: ["getFunds"] });
|
|
2078
2128
|
queryClient.invalidateQueries({ queryKey: ["getPrerequisites"] });
|
|
2079
2129
|
}
|
|
2080
2130
|
}, [balance.data, prevBalance, setBalance3, sessionAddress, queryClient]);
|
|
2081
|
-
return /* @__PURE__ */
|
|
2082
|
-
/* @__PURE__ */
|
|
2083
|
-
/* @__PURE__ */
|
|
2084
|
-
/* @__PURE__ */
|
|
2085
|
-
/* @__PURE__ */
|
|
2131
|
+
return /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-4", children: [
|
|
2132
|
+
/* @__PURE__ */ jsxs13("div", { className: "flex justify-between gap-4", children: [
|
|
2133
|
+
/* @__PURE__ */ jsxs13("div", { children: [
|
|
2134
|
+
/* @__PURE__ */ jsx18("div", { children: "Gas balance" }),
|
|
2135
|
+
/* @__PURE__ */ jsx18("div", { className: "font-mono text-white", children: balance.data != null ? /* @__PURE__ */ jsx18(Balance, { wei: balance.data.value }) : /* @__PURE__ */ jsx18(PendingIcon, { className: "text-sm" }) })
|
|
2086
2136
|
] }),
|
|
2087
|
-
chain.id === 31337 ? /* @__PURE__ */
|
|
2137
|
+
chain.id === 31337 ? /* @__PURE__ */ jsx18(
|
|
2088
2138
|
Button,
|
|
2089
2139
|
{
|
|
2090
2140
|
variant: isActive ? "primary" : "tertiary",
|
|
@@ -2093,19 +2143,19 @@ function GasBalance({ isActive, isExpanded, sessionAddress }) {
|
|
|
2093
2143
|
pending: balance.status === "pending" || setBalance3.status === "pending",
|
|
2094
2144
|
onClick: () => setBalance3.mutate({
|
|
2095
2145
|
address: sessionAddress,
|
|
2096
|
-
value:
|
|
2146
|
+
value: parseEther2("0.01") + (balance.data?.value ?? 0n)
|
|
2097
2147
|
}),
|
|
2098
2148
|
children: "Top up"
|
|
2099
2149
|
}
|
|
2100
2150
|
) : relayChain != null ? (
|
|
2101
2151
|
// TODO: convert this to a <ButtonLink>
|
|
2102
|
-
/* @__PURE__ */
|
|
2152
|
+
/* @__PURE__ */ jsx18(
|
|
2103
2153
|
"a",
|
|
2104
2154
|
{
|
|
2105
2155
|
href: `${relayChain.bridgeUrl}?${new URLSearchParams({ toAddress: sessionAddress, amount: "0.01" })}`,
|
|
2106
2156
|
target: "_blank",
|
|
2107
2157
|
rel: "noopener noreferrer",
|
|
2108
|
-
children: /* @__PURE__ */
|
|
2158
|
+
children: /* @__PURE__ */ jsx18(
|
|
2109
2159
|
Button,
|
|
2110
2160
|
{
|
|
2111
2161
|
variant: isActive ? "primary" : "tertiary",
|
|
@@ -2119,21 +2169,21 @@ function GasBalance({ isActive, isExpanded, sessionAddress }) {
|
|
|
2119
2169
|
)
|
|
2120
2170
|
) : null
|
|
2121
2171
|
] }),
|
|
2122
|
-
isExpanded ? /* @__PURE__ */
|
|
2123
|
-
/* @__PURE__ */
|
|
2124
|
-
/* @__PURE__ */
|
|
2172
|
+
isExpanded ? /* @__PURE__ */ jsxs13(Fragment2, { children: [
|
|
2173
|
+
/* @__PURE__ */ jsx18("p", { className: "text-sm", children: "Your session's gas balance is used to pay for onchain computation." }),
|
|
2174
|
+
/* @__PURE__ */ jsxs13("p", { className: "text-sm", children: [
|
|
2125
2175
|
"Send funds to",
|
|
2126
2176
|
" ",
|
|
2127
|
-
/* @__PURE__ */
|
|
2177
|
+
/* @__PURE__ */ jsxs13(
|
|
2128
2178
|
"span",
|
|
2129
2179
|
{
|
|
2130
2180
|
className: "inline-flex items-center gap-1 font-mono text-white cursor-pointer hover:text-white/80 transition-colors",
|
|
2131
2181
|
onClick: handleCopy,
|
|
2132
2182
|
title: "Click to copy",
|
|
2133
2183
|
children: [
|
|
2134
|
-
/* @__PURE__ */
|
|
2184
|
+
/* @__PURE__ */ jsx18(TruncatedHex, { hex: sessionAddress }),
|
|
2135
2185
|
" ",
|
|
2136
|
-
copied ? /* @__PURE__ */
|
|
2186
|
+
copied ? /* @__PURE__ */ jsx18(CheckIcon, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ jsx18(CopyIcon, { className: "w-3.5 h-3.5" })
|
|
2137
2187
|
]
|
|
2138
2188
|
}
|
|
2139
2189
|
),
|
|
@@ -2147,7 +2197,7 @@ function GasBalance({ isActive, isExpanded, sessionAddress }) {
|
|
|
2147
2197
|
}
|
|
2148
2198
|
|
|
2149
2199
|
// src/onboarding/quarry/GasBalance.tsx
|
|
2150
|
-
import { useEffect as
|
|
2200
|
+
import { useEffect as useEffect13 } from "react";
|
|
2151
2201
|
import { useQueryClient as useQueryClient10 } from "@tanstack/react-query";
|
|
2152
2202
|
|
|
2153
2203
|
// src/onboarding/deposit/DepositFormContainer.tsx
|
|
@@ -2157,24 +2207,24 @@ import { useChains as useChains4, useChainId } from "wagmi";
|
|
|
2157
2207
|
// src/onboarding/deposit/DepositViaTransferForm.tsx
|
|
2158
2208
|
import { useAccount as useAccount4, useWriteContract, usePrepareTransactionRequest, usePublicClient } from "wagmi";
|
|
2159
2209
|
import { encodeFunctionData as encodeFunctionData2 } from "viem";
|
|
2160
|
-
import { useMutation as
|
|
2210
|
+
import { useMutation as useMutation3, useQuery as useQuery13 } from "@tanstack/react-query";
|
|
2161
2211
|
|
|
2162
2212
|
// src/onboarding/deposit/DepositForm.tsx
|
|
2163
|
-
import { useEffect as
|
|
2213
|
+
import { useEffect as useEffect10, useRef as useRef4 } from "react";
|
|
2164
2214
|
import { useAccount as useAccount3, useBalance as useBalance4, useWatchBlockNumber as useWatchBlockNumber2 } from "wagmi";
|
|
2165
2215
|
import { useIsMounted } from "usehooks-ts";
|
|
2166
2216
|
import { twMerge as twMerge15 } from "tailwind-merge";
|
|
2167
2217
|
|
|
2168
2218
|
// src/onboarding/deposit/ChainSelect.tsx
|
|
2169
|
-
import { useEffect as
|
|
2219
|
+
import { useEffect as useEffect9, useMemo as useMemo2 } from "react";
|
|
2170
2220
|
import { useSwitchChain } from "wagmi";
|
|
2171
2221
|
import { twMerge as twMerge12 } from "tailwind-merge";
|
|
2172
2222
|
import * as Select from "@radix-ui/react-select";
|
|
2173
2223
|
|
|
2174
2224
|
// src/icons/ChevronUpIcon.tsx
|
|
2175
|
-
import { jsx as
|
|
2225
|
+
import { jsx as jsx19 } from "react/jsx-runtime";
|
|
2176
2226
|
function ChevronUpIcon(props) {
|
|
2177
|
-
return /* @__PURE__ */
|
|
2227
|
+
return /* @__PURE__ */ jsx19(IconSVG, { viewBox: "0 0 20 20", ...props, children: /* @__PURE__ */ jsx19(
|
|
2178
2228
|
"path",
|
|
2179
2229
|
{
|
|
2180
2230
|
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",
|
|
@@ -2185,9 +2235,9 @@ function ChevronUpIcon(props) {
|
|
|
2185
2235
|
}
|
|
2186
2236
|
|
|
2187
2237
|
// src/icons/ChevronDownIcon.tsx
|
|
2188
|
-
import { jsx as
|
|
2238
|
+
import { jsx as jsx20 } from "react/jsx-runtime";
|
|
2189
2239
|
function ChevronDownIcon(props) {
|
|
2190
|
-
return /* @__PURE__ */
|
|
2240
|
+
return /* @__PURE__ */ jsx20(IconSVG, { viewBox: "0 0 20 20", ...props, children: /* @__PURE__ */ jsx20(
|
|
2191
2241
|
"path",
|
|
2192
2242
|
{
|
|
2193
2243
|
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",
|
|
@@ -2223,10 +2273,10 @@ function Slot({
|
|
|
2223
2273
|
|
|
2224
2274
|
// src/ui/Input.tsx
|
|
2225
2275
|
import { twMerge as twMerge9 } from "tailwind-merge";
|
|
2226
|
-
import { jsx as
|
|
2276
|
+
import { jsx as jsx21 } from "react/jsx-runtime";
|
|
2227
2277
|
function Input({ asChild, className, ...props }) {
|
|
2228
2278
|
const Child = asChild ? Slot : "input";
|
|
2229
|
-
return /* @__PURE__ */
|
|
2279
|
+
return /* @__PURE__ */ jsx21(
|
|
2230
2280
|
Child,
|
|
2231
2281
|
{
|
|
2232
2282
|
className: twMerge9(
|
|
@@ -2245,24 +2295,24 @@ import { twMerge as twMerge11 } from "tailwind-merge";
|
|
|
2245
2295
|
|
|
2246
2296
|
// src/onboarding/deposit/PreloadedImage.tsx
|
|
2247
2297
|
import { twMerge as twMerge10 } from "tailwind-merge";
|
|
2248
|
-
import { jsx as
|
|
2298
|
+
import { jsx as jsx22 } from "react/jsx-runtime";
|
|
2249
2299
|
function PreloadedImage({ url, fallback: fallback2, className }) {
|
|
2250
2300
|
const { isSuccess, isLoading } = usePreloadImage(url);
|
|
2251
|
-
return /* @__PURE__ */
|
|
2301
|
+
return /* @__PURE__ */ jsx22("span", { className: twMerge10("inline-flex w-full h-full items-center justify-center overflow-clip", className), children: !isLoading ? isSuccess ? /* @__PURE__ */ jsx22("img", { src: url, className: "w-full h-full object-cover" }) : fallback2 : null });
|
|
2252
2302
|
}
|
|
2253
2303
|
|
|
2254
2304
|
// src/onboarding/deposit/ChainIcon.tsx
|
|
2255
2305
|
import { forwardRef as forwardRef2 } from "react";
|
|
2256
|
-
import { jsx as
|
|
2306
|
+
import { jsx as jsx23 } from "react/jsx-runtime";
|
|
2257
2307
|
var ChainIcon = forwardRef2(function ChainIcon2({ name, url, className }, forwardedRef) {
|
|
2258
|
-
return /* @__PURE__ */
|
|
2308
|
+
return /* @__PURE__ */ jsx23(
|
|
2259
2309
|
"span",
|
|
2260
2310
|
{
|
|
2261
2311
|
ref: forwardedRef,
|
|
2262
2312
|
className: twMerge11("flex-shrink-0 inline-flex w-6 aspect-square rounded-full overflow-clip", className),
|
|
2263
|
-
children: url ? /* @__PURE__ */
|
|
2313
|
+
children: url ? /* @__PURE__ */ jsx23(PreloadedImage, { url }) : (
|
|
2264
2314
|
// TODO: better placeholder
|
|
2265
|
-
/* @__PURE__ */
|
|
2315
|
+
/* @__PURE__ */ jsx23(
|
|
2266
2316
|
"span",
|
|
2267
2317
|
{
|
|
2268
2318
|
className: twMerge11(
|
|
@@ -2337,7 +2387,7 @@ function useChainBalances({ chains }) {
|
|
|
2337
2387
|
}
|
|
2338
2388
|
|
|
2339
2389
|
// src/onboarding/deposit/ChainSelect.tsx
|
|
2340
|
-
import { Fragment as
|
|
2390
|
+
import { Fragment as Fragment3, jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
2341
2391
|
function ChainSelect({ value, onChange }) {
|
|
2342
2392
|
const theme = useTheme();
|
|
2343
2393
|
const { frame } = useFrame();
|
|
@@ -2360,14 +2410,14 @@ function ChainSelect({ value, onChange }) {
|
|
|
2360
2410
|
const chainsWithBalance = chainsBalances.filter(({ balance }) => balance.value > 0n).map(({ chain, balance }) => ({ chain, balance: balance.value }));
|
|
2361
2411
|
return chainsWithBalance.length > 0 ? chainsWithBalance : sourceChains.map((chain) => ({ chain, balance: 0n }));
|
|
2362
2412
|
}, [chainsBalances, sourceChains]);
|
|
2363
|
-
|
|
2413
|
+
useEffect9(() => {
|
|
2364
2414
|
if (renderedChains.length > 0 && (!selectedChain || !renderedChains.find((c) => c.chain.id === selectedChain?.id))) {
|
|
2365
2415
|
const defaultChain = renderedChains[0].chain;
|
|
2366
2416
|
onChange(defaultChain.id);
|
|
2367
2417
|
switchChain({ chainId: defaultChain.id });
|
|
2368
2418
|
}
|
|
2369
2419
|
}, [value, selectedChain, renderedChains, onChange, switchChain]);
|
|
2370
|
-
return /* @__PURE__ */
|
|
2420
|
+
return /* @__PURE__ */ jsxs14(
|
|
2371
2421
|
Select.Root,
|
|
2372
2422
|
{
|
|
2373
2423
|
value: value.toString(),
|
|
@@ -2379,8 +2429,8 @@ function ChainSelect({ value, onChange }) {
|
|
|
2379
2429
|
}
|
|
2380
2430
|
},
|
|
2381
2431
|
children: [
|
|
2382
|
-
/* @__PURE__ */
|
|
2383
|
-
/* @__PURE__ */
|
|
2432
|
+
/* @__PURE__ */ jsx24(Input, { asChild: true, children: /* @__PURE__ */ jsxs14(Select.Trigger, { className: "group inline-flex items-center justify-center", children: [
|
|
2433
|
+
/* @__PURE__ */ jsx24(Select.Value, { asChild: true, children: /* @__PURE__ */ jsx24(
|
|
2384
2434
|
ChainIcon,
|
|
2385
2435
|
{
|
|
2386
2436
|
id: selectedChain?.id,
|
|
@@ -2389,25 +2439,25 @@ function ChainSelect({ value, onChange }) {
|
|
|
2389
2439
|
className: "w-8"
|
|
2390
2440
|
}
|
|
2391
2441
|
) }),
|
|
2392
|
-
/* @__PURE__ */
|
|
2393
|
-
/* @__PURE__ */
|
|
2394
|
-
/* @__PURE__ */
|
|
2442
|
+
/* @__PURE__ */ jsx24(Select.Icon, { asChild: true, children: /* @__PURE__ */ jsxs14(Fragment3, { children: [
|
|
2443
|
+
/* @__PURE__ */ jsx24(ChevronDownIcon, { className: "text-sm -mr-1 group-aria-expanded:hidden" }),
|
|
2444
|
+
/* @__PURE__ */ jsx24(ChevronUpIcon, { className: "text-sm -mr-1 hidden group-aria-expanded:inline" })
|
|
2395
2445
|
] }) })
|
|
2396
2446
|
] }) }),
|
|
2397
|
-
frame.contentDocument ? /* @__PURE__ */
|
|
2447
|
+
frame.contentDocument ? /* @__PURE__ */ jsx24(Select.Portal, { container: frame.contentDocument.body, children: /* @__PURE__ */ jsx24(
|
|
2398
2448
|
Select.Content,
|
|
2399
2449
|
{
|
|
2400
2450
|
position: "popper",
|
|
2401
2451
|
className: "w-[352px] max-h-[230px] overflow-y-auto mt-1 animate-in fade-in slide-in-from-top-2",
|
|
2402
|
-
children: /* @__PURE__ */
|
|
2452
|
+
children: /* @__PURE__ */ jsx24(Select.Viewport, { children: /* @__PURE__ */ jsx24(
|
|
2403
2453
|
Select.Group,
|
|
2404
2454
|
{
|
|
2405
2455
|
className: twMerge12(
|
|
2406
2456
|
"flex flex-col border divide-y",
|
|
2407
2457
|
"bg-neutral-800 text-neutral-300 border-neutral-700 divide-neutral-700"
|
|
2408
2458
|
),
|
|
2409
|
-
children: isLoading ? /* @__PURE__ */
|
|
2410
|
-
return /* @__PURE__ */
|
|
2459
|
+
children: isLoading ? /* @__PURE__ */ jsx24("div", { className: "flex items-center justify-center p-4", children: /* @__PURE__ */ jsx24(PendingIcon, { className: "h-6 w-6 animate-spin text-gray-400" }) }) : renderedChains.map(({ chain, balance }) => {
|
|
2460
|
+
return /* @__PURE__ */ jsxs14(
|
|
2411
2461
|
Select.Item,
|
|
2412
2462
|
{
|
|
2413
2463
|
value: chain.id.toString(),
|
|
@@ -2416,9 +2466,9 @@ function ChainSelect({ value, onChange }) {
|
|
|
2416
2466
|
"text-white focus:bg-neutral-700 data-[state=checked]:bg-neutral-900"
|
|
2417
2467
|
),
|
|
2418
2468
|
children: [
|
|
2419
|
-
/* @__PURE__ */
|
|
2420
|
-
/* @__PURE__ */
|
|
2421
|
-
/* @__PURE__ */
|
|
2469
|
+
/* @__PURE__ */ jsx24(ChainIcon, { id: chain.id, name: chain.name, url: chain.relayChain?.icon?.[theme] }),
|
|
2470
|
+
/* @__PURE__ */ jsx24("span", { className: "flex-grow flex-shrink-0", children: chain.name }),
|
|
2471
|
+
/* @__PURE__ */ jsx24("span", { className: "flex-shrink-0 font-mono text-sm text-neutral-400", children: /* @__PURE__ */ jsx24(Balance, { wei: balance }) })
|
|
2422
2472
|
]
|
|
2423
2473
|
},
|
|
2424
2474
|
chain.id
|
|
@@ -2434,13 +2484,13 @@ function ChainSelect({ value, onChange }) {
|
|
|
2434
2484
|
}
|
|
2435
2485
|
|
|
2436
2486
|
// src/onboarding/deposit/AmountInput.tsx
|
|
2437
|
-
import { formatEther as formatEther3, parseEther as
|
|
2487
|
+
import { formatEther as formatEther3, parseEther as parseEther3 } from "viem";
|
|
2438
2488
|
import { twMerge as twMerge13 } from "tailwind-merge";
|
|
2439
2489
|
import { forwardRef as forwardRef3 } from "react";
|
|
2440
|
-
import { jsx as
|
|
2490
|
+
import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
2441
2491
|
var AmountInput = forwardRef3(function AmountInput2({ initialAmount, onChange }, forwardedRef) {
|
|
2442
|
-
return /* @__PURE__ */
|
|
2443
|
-
/* @__PURE__ */
|
|
2492
|
+
return /* @__PURE__ */ jsx25(Input, { asChild: true, className: "w-full cursor-text flex items-center", children: /* @__PURE__ */ jsxs15("label", { children: [
|
|
2493
|
+
/* @__PURE__ */ jsx25(
|
|
2444
2494
|
"input",
|
|
2445
2495
|
{
|
|
2446
2496
|
ref: forwardedRef,
|
|
@@ -2461,19 +2511,19 @@ var AmountInput = forwardRef3(function AmountInput2({ initialAmount, onChange },
|
|
|
2461
2511
|
return input.setCustomValidity("Invalid amount.");
|
|
2462
2512
|
}
|
|
2463
2513
|
input.setCustomValidity("");
|
|
2464
|
-
onChange(
|
|
2514
|
+
onChange(parseEther3(value));
|
|
2465
2515
|
}
|
|
2466
2516
|
}
|
|
2467
2517
|
),
|
|
2468
|
-
/* @__PURE__ */
|
|
2518
|
+
/* @__PURE__ */ jsx25("span", { className: twMerge13("flex-shrink-0 text-2xl", "peer-placeholder-shown:text-neutral-500"), children: /* @__PURE__ */ jsx25(EthIcon, {}) })
|
|
2469
2519
|
] }) });
|
|
2470
2520
|
});
|
|
2471
2521
|
|
|
2472
2522
|
// src/onboarding/deposit/SubmitButton.tsx
|
|
2473
2523
|
import { useAccount as useAccount2, useBalance as useBalance3, useSwitchChain as useSwitchChain2 } from "wagmi";
|
|
2474
2524
|
import { twMerge as twMerge14 } from "tailwind-merge";
|
|
2475
|
-
import { parseEther as
|
|
2476
|
-
import { jsx as
|
|
2525
|
+
import { parseEther as parseEther4 } from "viem";
|
|
2526
|
+
import { jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
2477
2527
|
var MAX_DEPOSIT_AMOUNT = "0.1";
|
|
2478
2528
|
function SubmitButton({ amount, chainId, className, ...buttonProps }) {
|
|
2479
2529
|
const { chainId: userChainId, address: userAddress } = useAccount2();
|
|
@@ -2481,7 +2531,7 @@ function SubmitButton({ amount, chainId, className, ...buttonProps }) {
|
|
|
2481
2531
|
const shouldSwitchChain = chainId != null && chainId !== userChainId;
|
|
2482
2532
|
const switchChain = useSwitchChain2();
|
|
2483
2533
|
if (shouldSwitchChain) {
|
|
2484
|
-
return /* @__PURE__ */
|
|
2534
|
+
return /* @__PURE__ */ jsx26(
|
|
2485
2535
|
Button,
|
|
2486
2536
|
{
|
|
2487
2537
|
type: "button",
|
|
@@ -2493,23 +2543,23 @@ function SubmitButton({ amount, chainId, className, ...buttonProps }) {
|
|
|
2493
2543
|
}
|
|
2494
2544
|
);
|
|
2495
2545
|
} else if (amount) {
|
|
2496
|
-
if (amount >
|
|
2497
|
-
return /* @__PURE__ */
|
|
2546
|
+
if (amount > parseEther4(MAX_DEPOSIT_AMOUNT)) {
|
|
2547
|
+
return /* @__PURE__ */ jsxs16(Button, { type: "button", className: twMerge14("w-full", className), disabled: true, children: [
|
|
2498
2548
|
"Max amount is ",
|
|
2499
2549
|
MAX_DEPOSIT_AMOUNT,
|
|
2500
2550
|
" ETH"
|
|
2501
2551
|
] });
|
|
2502
2552
|
} else if (amount > (userBalance?.value ?? 0n)) {
|
|
2503
|
-
return /* @__PURE__ */
|
|
2553
|
+
return /* @__PURE__ */ jsx26(Button, { type: "button", className: twMerge14("w-full", className), disabled: true, children: "Insufficient balance" });
|
|
2504
2554
|
}
|
|
2505
2555
|
}
|
|
2506
|
-
return /* @__PURE__ */
|
|
2556
|
+
return /* @__PURE__ */ jsx26(Button, { type: "submit", className: twMerge14("w-full", className), ...buttonProps });
|
|
2507
2557
|
}
|
|
2508
2558
|
|
|
2509
2559
|
// src/icons/WarningIcon.tsx
|
|
2510
|
-
import { jsx as
|
|
2560
|
+
import { jsx as jsx27 } from "react/jsx-runtime";
|
|
2511
2561
|
function WarningIcon(props) {
|
|
2512
|
-
return /* @__PURE__ */
|
|
2562
|
+
return /* @__PURE__ */ jsx27(IconSVG, { fill: "none", ...props, children: /* @__PURE__ */ jsx27(
|
|
2513
2563
|
"path",
|
|
2514
2564
|
{
|
|
2515
2565
|
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",
|
|
@@ -2530,7 +2580,7 @@ function formatGas(wei) {
|
|
|
2530
2580
|
}
|
|
2531
2581
|
|
|
2532
2582
|
// src/onboarding/deposit/DepositForm.tsx
|
|
2533
|
-
import { Fragment as
|
|
2583
|
+
import { Fragment as Fragment4, jsx as jsx28, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
2534
2584
|
function DepositForm({
|
|
2535
2585
|
sourceChain,
|
|
2536
2586
|
setSourceChainId,
|
|
@@ -2554,10 +2604,10 @@ function DepositForm({
|
|
|
2554
2604
|
});
|
|
2555
2605
|
const minimumBalance = amount != null ? amount + (estimatedFee?.fee ?? 0n) : void 0;
|
|
2556
2606
|
const hasMinimumBalance = balance.data != null ? balance.data.value > (minimumBalance ?? 0n) : void 0;
|
|
2557
|
-
|
|
2607
|
+
useEffect10(() => {
|
|
2558
2608
|
amountInputRef.current?.focus();
|
|
2559
2609
|
}, [userChainId]);
|
|
2560
|
-
return /* @__PURE__ */
|
|
2610
|
+
return /* @__PURE__ */ jsxs17(
|
|
2561
2611
|
"form",
|
|
2562
2612
|
{
|
|
2563
2613
|
className: "flex flex-col gap-5",
|
|
@@ -2578,11 +2628,11 @@ function DepositForm({
|
|
|
2578
2628
|
}
|
|
2579
2629
|
},
|
|
2580
2630
|
children: [
|
|
2581
|
-
/* @__PURE__ */
|
|
2582
|
-
/* @__PURE__ */
|
|
2583
|
-
/* @__PURE__ */
|
|
2631
|
+
/* @__PURE__ */ jsxs17("div", { className: "flex gap-2", children: [
|
|
2632
|
+
/* @__PURE__ */ jsx28(ChainSelect, { value: sourceChain.id, onChange: setSourceChainId }),
|
|
2633
|
+
/* @__PURE__ */ jsx28(AmountInput, { ref: amountInputRef, initialAmount: amount, onChange: setAmount })
|
|
2584
2634
|
] }),
|
|
2585
|
-
/* @__PURE__ */
|
|
2635
|
+
/* @__PURE__ */ jsxs17(
|
|
2586
2636
|
"dl",
|
|
2587
2637
|
{
|
|
2588
2638
|
className: twMerge15(
|
|
@@ -2590,21 +2640,21 @@ function DepositForm({
|
|
|
2590
2640
|
"divide-neutral-700 text-neutral-400"
|
|
2591
2641
|
),
|
|
2592
2642
|
children: [
|
|
2593
|
-
/* @__PURE__ */
|
|
2594
|
-
/* @__PURE__ */
|
|
2595
|
-
/* @__PURE__ */
|
|
2596
|
-
/* @__PURE__ */
|
|
2597
|
-
/* @__PURE__ */
|
|
2598
|
-
/* @__PURE__ */
|
|
2643
|
+
/* @__PURE__ */ jsx28("dt", { children: "Available to deposit" }),
|
|
2644
|
+
/* @__PURE__ */ jsx28("dd", { children: balance.isSuccess ? /* @__PURE__ */ jsx28(Balance, { wei: balance.data.value }) : balance.isError ? /* @__PURE__ */ jsx28("span", { title: String(balance.error), children: /* @__PURE__ */ jsx28(WarningIcon, { className: "inline-block text-amber-500" }) }) : balance.isLoading ? /* @__PURE__ */ jsx28(PendingIcon, { className: "inline-block text-xs" }) : null }),
|
|
2645
|
+
/* @__PURE__ */ jsx28("dt", { children: "Gas balance after deposit" }),
|
|
2646
|
+
/* @__PURE__ */ jsx28("dd", { children: /* @__PURE__ */ jsx28(Balance, { wei: (quarryBalance.data ?? 0n) + (amount ?? 0n) }) }),
|
|
2647
|
+
/* @__PURE__ */ jsx28("dt", { children: "Estimated fee" }),
|
|
2648
|
+
/* @__PURE__ */ jsx28("dd", { children: estimatedFee.fee ? /* @__PURE__ */ jsxs17(Fragment4, { children: [
|
|
2599
2649
|
formatGas(estimatedFee.fee),
|
|
2600
2650
|
" gwei"
|
|
2601
|
-
] }) : estimatedFee.error ? /* @__PURE__ */
|
|
2602
|
-
/* @__PURE__ */
|
|
2603
|
-
/* @__PURE__ */
|
|
2651
|
+
] }) : estimatedFee.error ? /* @__PURE__ */ jsx28("span", { title: String(estimatedFee.error), children: /* @__PURE__ */ jsx28(WarningIcon, { className: "inline-block text-amber-500" }) }) : estimatedFee.isLoading ? /* @__PURE__ */ jsx28(PendingIcon, { className: "inline-block text-xs" }) : null }),
|
|
2652
|
+
/* @__PURE__ */ jsx28("dt", { children: "Time to deposit" }),
|
|
2653
|
+
/* @__PURE__ */ jsx28("dd", { children: estimatedTime })
|
|
2604
2654
|
]
|
|
2605
2655
|
}
|
|
2606
2656
|
),
|
|
2607
|
-
hasMinimumBalance ? submitButton : /* @__PURE__ */
|
|
2657
|
+
hasMinimumBalance ? submitButton : /* @__PURE__ */ jsx28(SubmitButton, { disabled: true, children: "Not enough funds" })
|
|
2608
2658
|
]
|
|
2609
2659
|
}
|
|
2610
2660
|
);
|
|
@@ -2658,7 +2708,7 @@ function useDeposits() {
|
|
|
2658
2708
|
}
|
|
2659
2709
|
|
|
2660
2710
|
// src/onboarding/deposit/DepositViaTransferForm.tsx
|
|
2661
|
-
import { jsx as
|
|
2711
|
+
import { jsx as jsx29 } from "react/jsx-runtime";
|
|
2662
2712
|
function DepositViaTransferForm({ amount, setAmount, sourceChain, setSourceChainId }) {
|
|
2663
2713
|
const { chain } = useEntryKitConfig();
|
|
2664
2714
|
const paymaster = getPaymaster(chain);
|
|
@@ -2687,7 +2737,7 @@ function DepositViaTransferForm({ amount, setAmount, sourceChain, setSourceChain
|
|
|
2687
2737
|
}),
|
|
2688
2738
|
value: amount
|
|
2689
2739
|
});
|
|
2690
|
-
const deposit =
|
|
2740
|
+
const deposit = useMutation3({
|
|
2691
2741
|
mutationKey: ["depositViaTransfer", amount?.toString()],
|
|
2692
2742
|
mutationFn: async () => {
|
|
2693
2743
|
if (!paymaster) throw new Error("Paymaster not found");
|
|
@@ -2726,7 +2776,7 @@ function DepositViaTransferForm({ amount, setAmount, sourceChain, setSourceChain
|
|
|
2726
2776
|
}
|
|
2727
2777
|
});
|
|
2728
2778
|
const estimatedFee = prepareData?.gas && gasPrice ? prepareData.gas * gasPrice : void 0;
|
|
2729
|
-
return /* @__PURE__ */
|
|
2779
|
+
return /* @__PURE__ */ jsx29(
|
|
2730
2780
|
DepositForm,
|
|
2731
2781
|
{
|
|
2732
2782
|
sourceChain,
|
|
@@ -2742,7 +2792,7 @@ function DepositViaTransferForm({ amount, setAmount, sourceChain, setSourceChain
|
|
|
2742
2792
|
onSubmit: async () => {
|
|
2743
2793
|
await deposit.mutateAsync();
|
|
2744
2794
|
},
|
|
2745
|
-
submitButton: /* @__PURE__ */
|
|
2795
|
+
submitButton: /* @__PURE__ */ jsx29(
|
|
2746
2796
|
SubmitButton,
|
|
2747
2797
|
{
|
|
2748
2798
|
variant: "primary",
|
|
@@ -2760,8 +2810,8 @@ function DepositViaTransferForm({ amount, setAmount, sourceChain, setSourceChain
|
|
|
2760
2810
|
// src/onboarding/deposit/DepositViaRelayForm.tsx
|
|
2761
2811
|
import { encodeFunctionData as encodeFunctionData3 } from "viem";
|
|
2762
2812
|
import { useAccount as useAccount5, useWalletClient } from "wagmi";
|
|
2763
|
-
import { useMutation as
|
|
2764
|
-
import { jsx as
|
|
2813
|
+
import { useMutation as useMutation4, useQuery as useQuery14 } from "@tanstack/react-query";
|
|
2814
|
+
import { jsx as jsx30 } from "react/jsx-runtime";
|
|
2765
2815
|
var ETH_ADDRESS = "0x0000000000000000000000000000000000000000";
|
|
2766
2816
|
function DepositViaRelayForm({ amount, setAmount, sourceChain, setSourceChainId }) {
|
|
2767
2817
|
const { chain, chainId: destinationChainId } = useEntryKitConfig();
|
|
@@ -2806,7 +2856,7 @@ function DepositViaRelayForm({ amount, setAmount, sourceChain, setSourceChainId
|
|
|
2806
2856
|
refetchInterval: 15e3,
|
|
2807
2857
|
enabled: !!amount && !!userAddress && !!relayClient
|
|
2808
2858
|
});
|
|
2809
|
-
const deposit =
|
|
2859
|
+
const deposit = useMutation4({
|
|
2810
2860
|
mutationKey: ["depositViaRelay", sourceChain.id, amount?.toString()],
|
|
2811
2861
|
mutationFn: async ({ quote: quote2, amount: amount2 }) => {
|
|
2812
2862
|
if (!relayClient) throw new Error("No Relay client found.");
|
|
@@ -2847,7 +2897,7 @@ function DepositViaRelayForm({ amount, setAmount, sourceChain, setSourceChainId
|
|
|
2847
2897
|
const gasFee = BigInt(fees?.gas?.amount ?? 0);
|
|
2848
2898
|
const relayerFee = BigInt(fees?.relayer?.amount ?? 0);
|
|
2849
2899
|
const fee = gasFee + relayerFee;
|
|
2850
|
-
return /* @__PURE__ */
|
|
2900
|
+
return /* @__PURE__ */ jsx30(
|
|
2851
2901
|
DepositForm,
|
|
2852
2902
|
{
|
|
2853
2903
|
sourceChain,
|
|
@@ -2864,7 +2914,7 @@ function DepositViaRelayForm({ amount, setAmount, sourceChain, setSourceChainId
|
|
|
2864
2914
|
if (!quote.data || !amount) return;
|
|
2865
2915
|
await deposit.mutateAsync({ quote: quote.data, amount });
|
|
2866
2916
|
},
|
|
2867
|
-
submitButton: /* @__PURE__ */
|
|
2917
|
+
submitButton: /* @__PURE__ */ jsx30(
|
|
2868
2918
|
SubmitButton,
|
|
2869
2919
|
{
|
|
2870
2920
|
variant: "primary",
|
|
@@ -2880,20 +2930,20 @@ function DepositViaRelayForm({ amount, setAmount, sourceChain, setSourceChainId
|
|
|
2880
2930
|
}
|
|
2881
2931
|
|
|
2882
2932
|
// src/onboarding/deposit/Deposits.tsx
|
|
2883
|
-
import { useEffect as
|
|
2884
|
-
import { useQuery as useQuery17, useQueryClient as
|
|
2933
|
+
import { useEffect as useEffect12 } from "react";
|
|
2934
|
+
import { useQuery as useQuery17, useQueryClient as useQueryClient7 } from "@tanstack/react-query";
|
|
2885
2935
|
|
|
2886
2936
|
// src/onboarding/deposit/TransferDepositStatus.tsx
|
|
2887
2937
|
import { useQuery as useQuery15 } from "@tanstack/react-query";
|
|
2888
2938
|
|
|
2889
2939
|
// src/onboarding/deposit/DepositStatus.tsx
|
|
2890
|
-
import { useEffect as
|
|
2940
|
+
import { useEffect as useEffect11, useState as useState3 } from "react";
|
|
2891
2941
|
import { twMerge as twMerge16 } from "tailwind-merge";
|
|
2892
2942
|
|
|
2893
2943
|
// src/icons/CloseIcon.tsx
|
|
2894
|
-
import { jsx as
|
|
2944
|
+
import { jsx as jsx31 } from "react/jsx-runtime";
|
|
2895
2945
|
function CloseIcon(props) {
|
|
2896
|
-
return /* @__PURE__ */
|
|
2946
|
+
return /* @__PURE__ */ jsx31(IconSVG, { strokeWidth: "2", stroke: "currentColor", ...props, children: /* @__PURE__ */ jsx31(
|
|
2897
2947
|
"path",
|
|
2898
2948
|
{
|
|
2899
2949
|
d: "M6 18L18 6M6 6L18 18",
|
|
@@ -2907,18 +2957,18 @@ function CloseIcon(props) {
|
|
|
2907
2957
|
}
|
|
2908
2958
|
|
|
2909
2959
|
// src/onboarding/deposit/DepositStatus.tsx
|
|
2910
|
-
import { jsx as
|
|
2960
|
+
import { jsx as jsx32, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
2911
2961
|
function DepositStatus({ status, progress, children, onDismiss }) {
|
|
2912
2962
|
const [appear, setAppear] = useState3(false);
|
|
2913
|
-
|
|
2963
|
+
useEffect11(() => {
|
|
2914
2964
|
setAppear(true);
|
|
2915
2965
|
}, []);
|
|
2916
|
-
return /* @__PURE__ */
|
|
2917
|
-
/* @__PURE__ */
|
|
2918
|
-
/* @__PURE__ */
|
|
2919
|
-
/* @__PURE__ */
|
|
2920
|
-
/* @__PURE__ */
|
|
2921
|
-
/* @__PURE__ */
|
|
2966
|
+
return /* @__PURE__ */ jsxs18("div", { className: "group bg-neutral-900 flex flex-col animate-in fade-in slide-in-from-bottom-2 animate-out fade-out", children: [
|
|
2967
|
+
/* @__PURE__ */ jsxs18("div", { className: "py-1 text-sm flex items-center gap-2", children: [
|
|
2968
|
+
/* @__PURE__ */ jsx32("div", { className: "flex-grow", children }),
|
|
2969
|
+
/* @__PURE__ */ jsxs18("div", { className: "flex-shrink-0 grid", children: [
|
|
2970
|
+
/* @__PURE__ */ jsx32("span", { className: "col-start-1 row-start-1 transition opacity-100 group-hover:opacity-0 group-hover:pointer-events-none", children: status === "success" ? /* @__PURE__ */ jsx32(CheckIcon, { className: "text-green-600" }) : status === "error" ? /* @__PURE__ */ jsx32(WarningIcon, { className: "text-amber-500" }) : /* @__PURE__ */ jsx32(PendingIcon, { className: "text-neutral-500 transition" }) }),
|
|
2971
|
+
/* @__PURE__ */ jsx32(
|
|
2922
2972
|
"button",
|
|
2923
2973
|
{
|
|
2924
2974
|
type: "button",
|
|
@@ -2930,12 +2980,12 @@ function DepositStatus({ status, progress, children, onDismiss }) {
|
|
|
2930
2980
|
),
|
|
2931
2981
|
title: "Dismiss",
|
|
2932
2982
|
onClick: onDismiss,
|
|
2933
|
-
children: /* @__PURE__ */
|
|
2983
|
+
children: /* @__PURE__ */ jsx32(CloseIcon, {})
|
|
2934
2984
|
}
|
|
2935
2985
|
)
|
|
2936
2986
|
] })
|
|
2937
2987
|
] }),
|
|
2938
|
-
/* @__PURE__ */
|
|
2988
|
+
/* @__PURE__ */ jsx32("div", { className: "w-full h-[2px] -mt-full overflow-clip", children: /* @__PURE__ */ jsx32(
|
|
2939
2989
|
"div",
|
|
2940
2990
|
{
|
|
2941
2991
|
className: twMerge16(
|
|
@@ -2955,7 +3005,7 @@ function DepositStatus({ status, progress, children, onDismiss }) {
|
|
|
2955
3005
|
|
|
2956
3006
|
// src/onboarding/deposit/TransferDepositStatus.tsx
|
|
2957
3007
|
import { useChains as useChains2 } from "wagmi";
|
|
2958
|
-
import { Fragment as
|
|
3008
|
+
import { Fragment as Fragment5, jsx as jsx33, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
2959
3009
|
function TransferDepositStatus({
|
|
2960
3010
|
amount,
|
|
2961
3011
|
chainL1Id,
|
|
@@ -2971,7 +3021,7 @@ function TransferDepositStatus({
|
|
|
2971
3021
|
queryKey: ["transferDepositStatus", hash],
|
|
2972
3022
|
queryFn: () => receiptPromise
|
|
2973
3023
|
});
|
|
2974
|
-
return /* @__PURE__ */
|
|
3024
|
+
return /* @__PURE__ */ jsx33(
|
|
2975
3025
|
DepositStatus,
|
|
2976
3026
|
{
|
|
2977
3027
|
status: receipt.status,
|
|
@@ -2983,10 +3033,10 @@ function TransferDepositStatus({
|
|
|
2983
3033
|
children: (() => {
|
|
2984
3034
|
const blockExplorer = chain.blockExplorers?.default.url;
|
|
2985
3035
|
if (receipt.status === "pending") {
|
|
2986
|
-
return /* @__PURE__ */
|
|
3036
|
+
return /* @__PURE__ */ jsxs19(Fragment5, { children: [
|
|
2987
3037
|
"Confirming deposit on",
|
|
2988
3038
|
" ",
|
|
2989
|
-
/* @__PURE__ */
|
|
3039
|
+
/* @__PURE__ */ jsx33(
|
|
2990
3040
|
"a",
|
|
2991
3041
|
{
|
|
2992
3042
|
href: blockExplorer ? `${blockExplorer}/tx/${hash}` : void 0,
|
|
@@ -2999,10 +3049,10 @@ function TransferDepositStatus({
|
|
|
2999
3049
|
] });
|
|
3000
3050
|
}
|
|
3001
3051
|
if (receipt.status === "error") {
|
|
3002
|
-
return /* @__PURE__ */
|
|
3052
|
+
return /* @__PURE__ */ jsxs19(Fragment5, { children: [
|
|
3003
3053
|
"Could not find deposit on",
|
|
3004
3054
|
" ",
|
|
3005
|
-
/* @__PURE__ */
|
|
3055
|
+
/* @__PURE__ */ jsx33(
|
|
3006
3056
|
"a",
|
|
3007
3057
|
{
|
|
3008
3058
|
href: blockExplorer ? `${blockExplorer}/tx/${hash}` : void 0,
|
|
@@ -3014,10 +3064,10 @@ function TransferDepositStatus({
|
|
|
3014
3064
|
"."
|
|
3015
3065
|
] });
|
|
3016
3066
|
}
|
|
3017
|
-
return /* @__PURE__ */
|
|
3067
|
+
return /* @__PURE__ */ jsxs19(Fragment5, { children: [
|
|
3018
3068
|
"Successfully",
|
|
3019
3069
|
" ",
|
|
3020
|
-
/* @__PURE__ */
|
|
3070
|
+
/* @__PURE__ */ jsx33(
|
|
3021
3071
|
"a",
|
|
3022
3072
|
{
|
|
3023
3073
|
href: blockExplorer ? `${blockExplorer}/tx/${receipt.data.transactionHash}` : void 0,
|
|
@@ -3027,7 +3077,7 @@ function TransferDepositStatus({
|
|
|
3027
3077
|
}
|
|
3028
3078
|
),
|
|
3029
3079
|
" ",
|
|
3030
|
-
/* @__PURE__ */
|
|
3080
|
+
/* @__PURE__ */ jsx33(Balance, { wei: amount })
|
|
3031
3081
|
] });
|
|
3032
3082
|
})()
|
|
3033
3083
|
}
|
|
@@ -3037,7 +3087,7 @@ function TransferDepositStatus({
|
|
|
3037
3087
|
// src/onboarding/deposit/RelayDepositStatus.tsx
|
|
3038
3088
|
import { useQuery as useQuery16 } from "@tanstack/react-query";
|
|
3039
3089
|
import { useChains as useChains3 } from "wagmi";
|
|
3040
|
-
import { Fragment as
|
|
3090
|
+
import { Fragment as Fragment6, jsx as jsx34, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
3041
3091
|
function RelayDepositStatus({
|
|
3042
3092
|
amount,
|
|
3043
3093
|
chainL1Id,
|
|
@@ -3054,7 +3104,7 @@ function RelayDepositStatus({
|
|
|
3054
3104
|
queryKey: ["relayDepositPromise", chainL1Id, chainL2Id, amount.toString(), start.toISOString()],
|
|
3055
3105
|
queryFn: () => depositPromise
|
|
3056
3106
|
});
|
|
3057
|
-
return /* @__PURE__ */
|
|
3107
|
+
return /* @__PURE__ */ jsx34(
|
|
3058
3108
|
DepositStatus,
|
|
3059
3109
|
{
|
|
3060
3110
|
status: deposit.status,
|
|
@@ -3065,22 +3115,22 @@ function RelayDepositStatus({
|
|
|
3065
3115
|
onDismiss,
|
|
3066
3116
|
children: (() => {
|
|
3067
3117
|
if (deposit.status === "pending") {
|
|
3068
|
-
return /* @__PURE__ */
|
|
3118
|
+
return /* @__PURE__ */ jsxs20(Fragment6, { children: [
|
|
3069
3119
|
"Relay bridge deposit pending on ",
|
|
3070
3120
|
chainL1.name,
|
|
3071
3121
|
"\u2026"
|
|
3072
3122
|
] });
|
|
3073
3123
|
}
|
|
3074
3124
|
if (deposit.status === "error") {
|
|
3075
|
-
return /* @__PURE__ */
|
|
3125
|
+
return /* @__PURE__ */ jsxs20(Fragment6, { children: [
|
|
3076
3126
|
"Relay bridge deposit to ",
|
|
3077
3127
|
chainL2.name,
|
|
3078
3128
|
" failed."
|
|
3079
3129
|
] });
|
|
3080
3130
|
}
|
|
3081
|
-
return /* @__PURE__ */
|
|
3131
|
+
return /* @__PURE__ */ jsxs20(Fragment6, { children: [
|
|
3082
3132
|
"Successfully bridged ",
|
|
3083
|
-
/* @__PURE__ */
|
|
3133
|
+
/* @__PURE__ */ jsx34(Balance, { wei: amount }),
|
|
3084
3134
|
" to ",
|
|
3085
3135
|
chainL2.name,
|
|
3086
3136
|
"!"
|
|
@@ -3091,12 +3141,12 @@ function RelayDepositStatus({
|
|
|
3091
3141
|
}
|
|
3092
3142
|
|
|
3093
3143
|
// src/onboarding/deposit/Deposits.tsx
|
|
3094
|
-
import { useAccount as useAccount6, useClient as
|
|
3095
|
-
import { jsx as
|
|
3144
|
+
import { useAccount as useAccount6, useClient as useClient11 } from "wagmi";
|
|
3145
|
+
import { jsx as jsx35 } from "react/jsx-runtime";
|
|
3096
3146
|
function Deposits() {
|
|
3097
|
-
const queryClient =
|
|
3147
|
+
const queryClient = useQueryClient7();
|
|
3098
3148
|
const { chainId } = useEntryKitConfig();
|
|
3099
|
-
const client =
|
|
3149
|
+
const client = useClient11({ chainId });
|
|
3100
3150
|
const { address: userAddress } = useAccount6();
|
|
3101
3151
|
const { deposits, removeDeposit } = useDeposits();
|
|
3102
3152
|
const { data: isComplete } = useQuery17({
|
|
@@ -3107,24 +3157,24 @@ function Deposits() {
|
|
|
3107
3157
|
return true;
|
|
3108
3158
|
}
|
|
3109
3159
|
});
|
|
3110
|
-
|
|
3160
|
+
useEffect12(() => {
|
|
3111
3161
|
if (isComplete) {
|
|
3112
3162
|
queryClient.invalidateQueries({ queryKey: ["balance"] });
|
|
3113
3163
|
queryClient.invalidateQueries({ queryKey: ["getBalance", client?.uid, userAddress] });
|
|
3114
3164
|
}
|
|
3115
3165
|
}, [client?.uid, isComplete, queryClient, userAddress]);
|
|
3116
3166
|
if (!deposits.length) return null;
|
|
3117
|
-
return /* @__PURE__ */
|
|
3167
|
+
return /* @__PURE__ */ jsx35("div", { className: "flex flex-col gap-1 mt-4", children: deposits.map((deposit) => {
|
|
3118
3168
|
if (deposit.type === "transfer") {
|
|
3119
|
-
return /* @__PURE__ */
|
|
3169
|
+
return /* @__PURE__ */ jsx35(TransferDepositStatus, { ...deposit, onDismiss: () => removeDeposit(deposit.uid) }, deposit.uid);
|
|
3120
3170
|
} else if (deposit.type === "relay") {
|
|
3121
|
-
return /* @__PURE__ */
|
|
3171
|
+
return /* @__PURE__ */ jsx35(RelayDepositStatus, { ...deposit, onDismiss: () => removeDeposit(deposit.uid) }, deposit.uid);
|
|
3122
3172
|
}
|
|
3123
3173
|
}) });
|
|
3124
3174
|
}
|
|
3125
3175
|
|
|
3126
3176
|
// src/onboarding/deposit/DepositFormContainer.tsx
|
|
3127
|
-
import { jsx as
|
|
3177
|
+
import { jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
3128
3178
|
function DepositFormContainer() {
|
|
3129
3179
|
const { chainId: destinationChainId } = useEntryKitConfig();
|
|
3130
3180
|
const chainId = useChainId();
|
|
@@ -3132,8 +3182,8 @@ function DepositFormContainer() {
|
|
|
3132
3182
|
const [amount, setAmount] = useState4(void 0);
|
|
3133
3183
|
const [sourceChainId, setSourceChainId] = useState4(chainId);
|
|
3134
3184
|
const sourceChain = chains.find(({ id }) => id === sourceChainId);
|
|
3135
|
-
return /* @__PURE__ */
|
|
3136
|
-
destinationChainId === sourceChainId ? /* @__PURE__ */
|
|
3185
|
+
return /* @__PURE__ */ jsxs21("div", { className: "pt-10 pb-2", children: [
|
|
3186
|
+
destinationChainId === sourceChainId ? /* @__PURE__ */ jsx36(
|
|
3137
3187
|
DepositViaTransferForm,
|
|
3138
3188
|
{
|
|
3139
3189
|
amount,
|
|
@@ -3141,7 +3191,7 @@ function DepositFormContainer() {
|
|
|
3141
3191
|
sourceChain,
|
|
3142
3192
|
setSourceChainId
|
|
3143
3193
|
}
|
|
3144
|
-
) : /* @__PURE__ */
|
|
3194
|
+
) : /* @__PURE__ */ jsx36(
|
|
3145
3195
|
DepositViaRelayForm,
|
|
3146
3196
|
{
|
|
3147
3197
|
amount,
|
|
@@ -3150,14 +3200,14 @@ function DepositFormContainer() {
|
|
|
3150
3200
|
setSourceChainId
|
|
3151
3201
|
}
|
|
3152
3202
|
),
|
|
3153
|
-
/* @__PURE__ */
|
|
3203
|
+
/* @__PURE__ */ jsx36(Deposits, {})
|
|
3154
3204
|
] });
|
|
3155
3205
|
}
|
|
3156
3206
|
|
|
3157
3207
|
// src/icons/ArrowLeftIcon.tsx
|
|
3158
|
-
import { jsx as
|
|
3208
|
+
import { jsx as jsx37 } from "react/jsx-runtime";
|
|
3159
3209
|
function ArrowLeftIcon(props) {
|
|
3160
|
-
return /* @__PURE__ */
|
|
3210
|
+
return /* @__PURE__ */ jsx37(IconSVG, { ...props, children: /* @__PURE__ */ jsx37(
|
|
3161
3211
|
"path",
|
|
3162
3212
|
{
|
|
3163
3213
|
d: "M19 12H5M12 19l-7-7 7-7",
|
|
@@ -3171,24 +3221,24 @@ function ArrowLeftIcon(props) {
|
|
|
3171
3221
|
}
|
|
3172
3222
|
|
|
3173
3223
|
// src/onboarding/quarry/WithdrawGasBalanceButton.tsx
|
|
3174
|
-
import { getAction as
|
|
3224
|
+
import { getAction as getAction6 } from "viem/utils";
|
|
3175
3225
|
import { waitForTransactionReceipt as waitForTransactionReceipt3 } from "viem/actions";
|
|
3176
|
-
import { useAccount as useAccount7, useClient as
|
|
3226
|
+
import { useAccount as useAccount7, useClient as useClient12, useSwitchChain as useSwitchChain3, useWriteContract as useWriteContract2 } from "wagmi";
|
|
3177
3227
|
import { twMerge as twMerge17 } from "tailwind-merge";
|
|
3178
|
-
import { useMutation as
|
|
3179
|
-
import { useQueryClient as
|
|
3180
|
-
import { jsx as
|
|
3228
|
+
import { useMutation as useMutation5 } from "@tanstack/react-query";
|
|
3229
|
+
import { useQueryClient as useQueryClient8 } from "@tanstack/react-query";
|
|
3230
|
+
import { jsx as jsx38, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
3181
3231
|
function WithdrawGasBalanceButton({ userAddress }) {
|
|
3182
3232
|
const { writeContractAsync } = useWriteContract2();
|
|
3183
3233
|
const { switchChain } = useSwitchChain3();
|
|
3184
3234
|
const { chain, chainId } = useEntryKitConfig();
|
|
3185
3235
|
const { chainId: userChainId } = useAccount7();
|
|
3186
|
-
const queryClient =
|
|
3187
|
-
const client =
|
|
3236
|
+
const queryClient = useQueryClient8();
|
|
3237
|
+
const client = useClient12({ chainId });
|
|
3188
3238
|
const paymaster = getPaymaster(chain);
|
|
3189
3239
|
const balance = useShowQueryError(useBalance(userAddress));
|
|
3190
3240
|
const shouldSwitchChain = chainId != null && chainId !== userChainId;
|
|
3191
|
-
const withdraw =
|
|
3241
|
+
const withdraw = useMutation5({
|
|
3192
3242
|
mutationKey: ["withdraw", userAddress],
|
|
3193
3243
|
mutationFn: async () => {
|
|
3194
3244
|
if (!client) throw new Error("Client not ready.");
|
|
@@ -3202,7 +3252,7 @@ function WithdrawGasBalanceButton({ userAddress }) {
|
|
|
3202
3252
|
args: [userAddress, balance.data],
|
|
3203
3253
|
chainId
|
|
3204
3254
|
});
|
|
3205
|
-
await
|
|
3255
|
+
await getAction6(client, waitForTransactionReceipt3, "waitForTransactionReceipt")({ hash });
|
|
3206
3256
|
await Promise.all([
|
|
3207
3257
|
queryClient.invalidateQueries({ queryKey: ["balance"] }),
|
|
3208
3258
|
queryClient.invalidateQueries({ queryKey: ["getFunds"] }),
|
|
@@ -3217,7 +3267,7 @@ function WithdrawGasBalanceButton({ userAddress }) {
|
|
|
3217
3267
|
if (balance.data == null || balance.data === 0n) {
|
|
3218
3268
|
return null;
|
|
3219
3269
|
}
|
|
3220
|
-
return /* @__PURE__ */
|
|
3270
|
+
return /* @__PURE__ */ jsx38(
|
|
3221
3271
|
"button",
|
|
3222
3272
|
{
|
|
3223
3273
|
onClick: () => {
|
|
@@ -3231,8 +3281,8 @@ function WithdrawGasBalanceButton({ userAddress }) {
|
|
|
3231
3281
|
withdraw.isPending ? "opacity-50 pointer-events-none" : "cursor-pointer hover:text-white"
|
|
3232
3282
|
),
|
|
3233
3283
|
disabled: withdraw.isPending,
|
|
3234
|
-
children: /* @__PURE__ */
|
|
3235
|
-
/* @__PURE__ */
|
|
3284
|
+
children: /* @__PURE__ */ jsxs22("span", { className: "inline-block", children: [
|
|
3285
|
+
/* @__PURE__ */ jsxs22(
|
|
3236
3286
|
"span",
|
|
3237
3287
|
{
|
|
3238
3288
|
className: twMerge17(
|
|
@@ -3241,76 +3291,160 @@ function WithdrawGasBalanceButton({ userAddress }) {
|
|
|
3241
3291
|
shouldSwitchChain && "group-hover:hidden"
|
|
3242
3292
|
),
|
|
3243
3293
|
children: [
|
|
3244
|
-
withdraw.isPending && /* @__PURE__ */
|
|
3294
|
+
withdraw.isPending && /* @__PURE__ */ jsx38(PendingIcon, { className: "w-3 h-3" }),
|
|
3245
3295
|
"Withdraw"
|
|
3246
3296
|
]
|
|
3247
3297
|
}
|
|
3248
3298
|
),
|
|
3249
|
-
shouldSwitchChain && /* @__PURE__ */
|
|
3299
|
+
shouldSwitchChain && /* @__PURE__ */ jsx38("span", { className: "hidden group-hover:inline-block underline decoration-neutral-500 underline-offset-4 hover:decoration-orange-500", children: "Switch chain" })
|
|
3250
3300
|
] })
|
|
3251
3301
|
}
|
|
3252
3302
|
);
|
|
3253
3303
|
}
|
|
3254
3304
|
|
|
3305
|
+
// src/onboarding/quarry/useRequestAllowance.ts
|
|
3306
|
+
import { useMutation as useMutation6, useQueryClient as useQueryClient9 } from "@tanstack/react-query";
|
|
3307
|
+
|
|
3308
|
+
// src/quarry/transports/quarrySponsor.ts
|
|
3309
|
+
import { http as http2 } from "viem";
|
|
3310
|
+
function quarrySponsor() {
|
|
3311
|
+
return ({ chain }) => {
|
|
3312
|
+
if (!chain) throw new Error("No chain provided to quarrySponsor transport.");
|
|
3313
|
+
const url = "quarrySponsor" in chain.rpcUrls ? chain.rpcUrls.quarrySponsor.http[0] : void 0;
|
|
3314
|
+
if (!url) throw new Error(`No \`quarrySponsor\` RPC URL found for chain ${chain.id}.`);
|
|
3315
|
+
return http2(url)({ chain, retryCount: 0 });
|
|
3316
|
+
};
|
|
3317
|
+
}
|
|
3318
|
+
|
|
3319
|
+
// src/quarry/requestAllowance.ts
|
|
3320
|
+
async function requestAllowance({ chain, userAddress }) {
|
|
3321
|
+
const transport = quarrySponsor()({ chain });
|
|
3322
|
+
debug2("Requesting allowance for", userAddress);
|
|
3323
|
+
await transport.request({
|
|
3324
|
+
method: "sponsor_requestAllowance",
|
|
3325
|
+
params: [userAddress]
|
|
3326
|
+
});
|
|
3327
|
+
}
|
|
3328
|
+
|
|
3329
|
+
// src/onboarding/quarry/useRequestAllowance.ts
|
|
3330
|
+
function useRequestAllowance() {
|
|
3331
|
+
const queryClient = useQueryClient9();
|
|
3332
|
+
const { chain } = useEntryKitConfig();
|
|
3333
|
+
const mutationKey = ["requestAllowance", chain.id];
|
|
3334
|
+
return useMutation6({
|
|
3335
|
+
retry: 0,
|
|
3336
|
+
mutationKey,
|
|
3337
|
+
mutationFn: async (userAddress) => {
|
|
3338
|
+
await requestAllowance({ chain, userAddress });
|
|
3339
|
+
await Promise.all([
|
|
3340
|
+
queryClient.invalidateQueries({ queryKey: ["getAllowance"] }),
|
|
3341
|
+
queryClient.invalidateQueries({ queryKey: ["getFunds"] }),
|
|
3342
|
+
queryClient.invalidateQueries({ queryKey: ["getPrerequisites"] })
|
|
3343
|
+
]);
|
|
3344
|
+
}
|
|
3345
|
+
});
|
|
3346
|
+
}
|
|
3347
|
+
|
|
3255
3348
|
// src/onboarding/quarry/GasBalance.tsx
|
|
3256
|
-
import { jsx as
|
|
3257
|
-
function GasBalance2({ isActive, isExpanded, isFocused, setFocused, userAddress }) {
|
|
3349
|
+
import { jsx as jsx39, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
3350
|
+
function GasBalance2({ isActive, isExpanded, isFocused, setFocused, userAddress, paymaster }) {
|
|
3258
3351
|
const queryClient = useQueryClient10();
|
|
3259
3352
|
const balance = useShowQueryError(useBalance(userAddress));
|
|
3260
3353
|
const prevBalance = usePrevious(balance.data || 0n);
|
|
3261
|
-
|
|
3354
|
+
const allowance = useShowQueryError(useAllowance(userAddress));
|
|
3355
|
+
const prevAllowance = usePrevious(allowance.data || 0n);
|
|
3356
|
+
const requestAllowance2 = useRequestAllowance();
|
|
3357
|
+
useEffect13(() => {
|
|
3262
3358
|
if (balance.data != null && prevBalance === 0n && balance.data > 0n) {
|
|
3263
3359
|
queryClient.invalidateQueries({ queryKey: ["getPrerequisites"] });
|
|
3264
3360
|
setFocused(false);
|
|
3265
3361
|
}
|
|
3266
3362
|
}, [balance.data, prevBalance, setFocused, queryClient, userAddress]);
|
|
3363
|
+
useEffect13(() => {
|
|
3364
|
+
if (allowance.data != null && prevAllowance === 0n && allowance.data > 0n) {
|
|
3365
|
+
queryClient.invalidateQueries({ queryKey: ["getPrerequisites"] });
|
|
3366
|
+
setFocused(false);
|
|
3367
|
+
}
|
|
3368
|
+
}, [allowance.data, prevAllowance, setFocused, queryClient, userAddress]);
|
|
3369
|
+
const gasBalance = balance.data != null && allowance.data != null ? balance.data + allowance.data : null;
|
|
3370
|
+
useEffect13(() => {
|
|
3371
|
+
if (!isActive) return;
|
|
3372
|
+
if (!paymaster.canSponsor) return;
|
|
3373
|
+
if (gasBalance !== 0n) return;
|
|
3374
|
+
if (requestAllowance2.status !== "idle") return;
|
|
3375
|
+
const timer = setTimeout(() => {
|
|
3376
|
+
console.log("no funds, requesting allowance");
|
|
3377
|
+
requestAllowance2.mutate(userAddress, {
|
|
3378
|
+
onSuccess(data) {
|
|
3379
|
+
console.log("got allowance", data);
|
|
3380
|
+
},
|
|
3381
|
+
onError(error2) {
|
|
3382
|
+
console.log("failed to get allowance", error2);
|
|
3383
|
+
}
|
|
3384
|
+
});
|
|
3385
|
+
});
|
|
3386
|
+
return () => clearTimeout(timer);
|
|
3387
|
+
}, [isActive, paymaster.canSponsor, gasBalance, requestAllowance2, userAddress]);
|
|
3267
3388
|
if (isFocused) {
|
|
3268
|
-
return /* @__PURE__ */
|
|
3269
|
-
isFocused && /* @__PURE__ */
|
|
3389
|
+
return /* @__PURE__ */ jsxs23("div", { children: [
|
|
3390
|
+
isFocused && /* @__PURE__ */ jsx39("div", { className: "absolute top-0 left-0", children: /* @__PURE__ */ jsx39(
|
|
3270
3391
|
"div",
|
|
3271
3392
|
{
|
|
3272
3393
|
className: "flex items-center justify-center w-10 h-10 text-white/20 hover:text-white/40 cursor-pointer",
|
|
3273
3394
|
onClick: () => setFocused(false),
|
|
3274
|
-
children: /* @__PURE__ */
|
|
3395
|
+
children: /* @__PURE__ */ jsx39(ArrowLeftIcon, { className: "m-0" })
|
|
3275
3396
|
}
|
|
3276
3397
|
) }),
|
|
3277
|
-
/* @__PURE__ */
|
|
3398
|
+
/* @__PURE__ */ jsx39(DepositFormContainer, {})
|
|
3278
3399
|
] });
|
|
3279
3400
|
}
|
|
3280
|
-
return /* @__PURE__ */
|
|
3281
|
-
/* @__PURE__ */
|
|
3282
|
-
/* @__PURE__ */
|
|
3283
|
-
/* @__PURE__ */
|
|
3284
|
-
/* @__PURE__ */
|
|
3401
|
+
return /* @__PURE__ */ jsxs23("div", { className: "flex flex-col gap-4", children: [
|
|
3402
|
+
/* @__PURE__ */ jsxs23("div", { className: "flex justify-between gap-4", children: [
|
|
3403
|
+
/* @__PURE__ */ jsxs23("div", { children: [
|
|
3404
|
+
/* @__PURE__ */ jsx39("div", { children: "Gas balance" }),
|
|
3405
|
+
/* @__PURE__ */ jsx39("div", { className: "font-mono text-white", children: gasBalance != null ? /* @__PURE__ */ jsx39(Balance, { wei: gasBalance }) : /* @__PURE__ */ jsx39(PendingIcon, { className: "text-sm" }) })
|
|
3285
3406
|
] }),
|
|
3286
|
-
/* @__PURE__ */
|
|
3287
|
-
/* @__PURE__ */
|
|
3407
|
+
/* @__PURE__ */ jsxs23("div", { className: "flex flex-col gap-1 justify-center items-center", children: [
|
|
3408
|
+
/* @__PURE__ */ jsx39(
|
|
3288
3409
|
Button,
|
|
3289
3410
|
{
|
|
3290
3411
|
variant: isActive ? "primary" : "tertiary",
|
|
3291
3412
|
className: "flex-shrink-0 text-sm p-1 w-28",
|
|
3292
3413
|
autoFocus: isActive || isExpanded,
|
|
3293
|
-
pending: balance.status === "pending",
|
|
3414
|
+
pending: balance.status === "pending" || allowance.status === "pending" || requestAllowance2.status === "pending",
|
|
3294
3415
|
onClick: () => setFocused(true),
|
|
3295
3416
|
children: "Top up"
|
|
3296
3417
|
}
|
|
3297
3418
|
),
|
|
3298
|
-
/* @__PURE__ */
|
|
3419
|
+
/* @__PURE__ */ jsx39(WithdrawGasBalanceButton, { userAddress })
|
|
3299
3420
|
] })
|
|
3300
3421
|
] }),
|
|
3301
|
-
isExpanded ? /* @__PURE__ */
|
|
3422
|
+
isExpanded ? /* @__PURE__ */ jsxs23("div", { className: "text-sm space-y-2", children: [
|
|
3423
|
+
/* @__PURE__ */ jsx39("p", { children: "Your gas balance is used to pay for onchain computation." }),
|
|
3424
|
+
/* @__PURE__ */ jsxs23("p", { children: [
|
|
3425
|
+
"You have",
|
|
3426
|
+
" ",
|
|
3427
|
+
/* @__PURE__ */ jsx39("span", { className: "font-mono", children: balance.data != null ? /* @__PURE__ */ jsx39(Balance, { wei: balance.data }) : /* @__PURE__ */ jsx39(PendingIcon, { className: "text-sm" }) }),
|
|
3428
|
+
" ",
|
|
3429
|
+
"in gas deposits and",
|
|
3430
|
+
" ",
|
|
3431
|
+
/* @__PURE__ */ jsx39("span", { className: "font-mono", children: allowance.data != null ? /* @__PURE__ */ jsx39(Balance, { wei: allowance.data }) : /* @__PURE__ */ jsx39(PendingIcon, { className: "text-sm" }) }),
|
|
3432
|
+
" ",
|
|
3433
|
+
"in gas grants."
|
|
3434
|
+
] })
|
|
3435
|
+
] }) : null
|
|
3302
3436
|
] });
|
|
3303
3437
|
}
|
|
3304
3438
|
|
|
3305
3439
|
// src/onboarding/ConnectedSteps.tsx
|
|
3306
|
-
import { jsx as
|
|
3307
|
-
function ConnectedSteps({ userClient, initialUserAddress }) {
|
|
3440
|
+
import { jsx as jsx40 } from "react/jsx-runtime";
|
|
3441
|
+
function ConnectedSteps({ connector, userClient, initialUserAddress }) {
|
|
3308
3442
|
const { chain } = useEntryKitConfig();
|
|
3309
3443
|
const paymaster = getPaymaster(chain);
|
|
3310
3444
|
const [focusedId, setFocusedId] = useState5(null);
|
|
3311
3445
|
const userAddress = userClient.account.address;
|
|
3312
3446
|
const { data: prerequisites, error: prerequisitesError } = usePrerequisites(userAddress);
|
|
3313
|
-
|
|
3447
|
+
useEffect14(() => {
|
|
3314
3448
|
if (prerequisitesError) {
|
|
3315
3449
|
console.error("Could not get prerequisites", prerequisitesError);
|
|
3316
3450
|
}
|
|
@@ -3318,7 +3452,7 @@ function ConnectedSteps({ userClient, initialUserAddress }) {
|
|
|
3318
3452
|
const { closeAccountModal } = useAccountModal();
|
|
3319
3453
|
const isNewConnection = userAddress !== initialUserAddress;
|
|
3320
3454
|
const initialPrerequisites = useRef5(prerequisites);
|
|
3321
|
-
|
|
3455
|
+
useEffect14(() => {
|
|
3322
3456
|
if (prerequisites == null) return;
|
|
3323
3457
|
if (initialPrerequisites.current == null) {
|
|
3324
3458
|
initialPrerequisites.current = prerequisites;
|
|
@@ -3344,7 +3478,7 @@ function ConnectedSteps({ userClient, initialUserAddress }) {
|
|
|
3344
3478
|
{
|
|
3345
3479
|
id: "wallet",
|
|
3346
3480
|
isComplete: true,
|
|
3347
|
-
content: (props) => /* @__PURE__ */
|
|
3481
|
+
content: (props) => /* @__PURE__ */ jsx40(Wallet, { ...props, userAddress })
|
|
3348
3482
|
}
|
|
3349
3483
|
];
|
|
3350
3484
|
if (!paymaster) {
|
|
@@ -3352,28 +3486,29 @@ function ConnectedSteps({ userClient, initialUserAddress }) {
|
|
|
3352
3486
|
steps2.push({
|
|
3353
3487
|
id: "gasBalance",
|
|
3354
3488
|
isComplete: !!hasGasBalance,
|
|
3355
|
-
content: (props) => /* @__PURE__ */
|
|
3489
|
+
content: (props) => /* @__PURE__ */ jsx40(GasBalance, { ...props, sessionAddress })
|
|
3356
3490
|
});
|
|
3357
3491
|
}
|
|
3358
3492
|
} else if (paymaster.type === "quarry") {
|
|
3359
|
-
|
|
3360
|
-
|
|
3361
|
-
|
|
3362
|
-
|
|
3363
|
-
|
|
3364
|
-
});
|
|
3365
|
-
} else {
|
|
3366
|
-
steps2.push({
|
|
3367
|
-
id: "gasBalanceQuarry",
|
|
3368
|
-
isComplete: !!hasQuarryGasBalance,
|
|
3369
|
-
content: (props) => /* @__PURE__ */ jsx41(GasBalance2, { ...props, userAddress })
|
|
3370
|
-
});
|
|
3371
|
-
}
|
|
3493
|
+
steps2.push({
|
|
3494
|
+
id: "gasBalanceQuarry",
|
|
3495
|
+
isComplete: !!hasQuarryGasBalance || !!hasAllowance,
|
|
3496
|
+
content: (props) => /* @__PURE__ */ jsx40(GasBalance2, { ...props, userAddress, paymaster })
|
|
3497
|
+
});
|
|
3372
3498
|
}
|
|
3373
3499
|
steps2.push({
|
|
3374
3500
|
id: "session",
|
|
3375
3501
|
isComplete: !!isSpender && !!hasDelegation,
|
|
3376
|
-
content: (props) => /* @__PURE__ */
|
|
3502
|
+
content: (props) => /* @__PURE__ */ jsx40(
|
|
3503
|
+
Session,
|
|
3504
|
+
{
|
|
3505
|
+
...props,
|
|
3506
|
+
userClient,
|
|
3507
|
+
connector,
|
|
3508
|
+
registerSpender: !isSpender,
|
|
3509
|
+
registerDelegation: !hasDelegation
|
|
3510
|
+
}
|
|
3511
|
+
)
|
|
3377
3512
|
});
|
|
3378
3513
|
return steps2;
|
|
3379
3514
|
}, [
|
|
@@ -3385,14 +3520,15 @@ function ConnectedSteps({ userClient, initialUserAddress }) {
|
|
|
3385
3520
|
paymaster,
|
|
3386
3521
|
sessionAddress,
|
|
3387
3522
|
userAddress,
|
|
3388
|
-
userClient
|
|
3523
|
+
userClient,
|
|
3524
|
+
connector
|
|
3389
3525
|
]);
|
|
3390
3526
|
const [selectedStepId] = useState5(null);
|
|
3391
3527
|
const nextStep = steps.find((step) => step.content != null && !step.isComplete);
|
|
3392
3528
|
const completedSteps = steps.filter((step) => step.isComplete);
|
|
3393
3529
|
const activeStep = (selectedStepId != null ? steps.find((step) => step.id === selectedStepId) : null) ?? nextStep ?? (completedSteps.length < steps.length ? completedSteps.at(-1) : null);
|
|
3394
3530
|
const activeStepIndex = activeStep ? steps.indexOf(activeStep) : -1;
|
|
3395
|
-
return /* @__PURE__ */
|
|
3531
|
+
return /* @__PURE__ */ jsx40(
|
|
3396
3532
|
"div",
|
|
3397
3533
|
{
|
|
3398
3534
|
className: twMerge18(
|
|
@@ -3417,7 +3553,7 @@ function ConnectedSteps({ userClient, initialUserAddress }) {
|
|
|
3417
3553
|
}
|
|
3418
3554
|
return null;
|
|
3419
3555
|
}
|
|
3420
|
-
return /* @__PURE__ */
|
|
3556
|
+
return /* @__PURE__ */ jsx40("div", { className: twMerge18("py-8 flex flex-col justify-center", isActive ? "flex-grow" : null), children: /* @__PURE__ */ jsx40("div", { className: twMerge18("flex flex-col", isDisabled ? "opacity-30 pointer-events-none" : null), children: content }) }, step.id);
|
|
3421
3557
|
})
|
|
3422
3558
|
}
|
|
3423
3559
|
);
|
|
@@ -3425,16 +3561,23 @@ function ConnectedSteps({ userClient, initialUserAddress }) {
|
|
|
3425
3561
|
|
|
3426
3562
|
// src/AccountModalContent.tsx
|
|
3427
3563
|
import { useRef as useRef6 } from "react";
|
|
3428
|
-
import { jsx as
|
|
3564
|
+
import { jsx as jsx41 } from "react/jsx-runtime";
|
|
3429
3565
|
function AccountModalContent() {
|
|
3430
3566
|
const { chainId } = useEntryKitConfig();
|
|
3431
|
-
const
|
|
3432
|
-
const {
|
|
3567
|
+
const { address: userAddress, connector } = useAccount8();
|
|
3568
|
+
const userClient = useConnectorClient({ chainId, connector });
|
|
3433
3569
|
const initialUserAddress = useRef6(userAddress);
|
|
3434
3570
|
if (userClient.status !== "success") {
|
|
3435
|
-
return /* @__PURE__ */
|
|
3571
|
+
return /* @__PURE__ */ jsx41(ConnectWallet, {});
|
|
3436
3572
|
}
|
|
3437
|
-
return /* @__PURE__ */
|
|
3573
|
+
return /* @__PURE__ */ jsx41(
|
|
3574
|
+
ConnectedSteps,
|
|
3575
|
+
{
|
|
3576
|
+
connector,
|
|
3577
|
+
userClient: userClient.data,
|
|
3578
|
+
initialUserAddress: initialUserAddress.current
|
|
3579
|
+
}
|
|
3580
|
+
);
|
|
3438
3581
|
}
|
|
3439
3582
|
|
|
3440
3583
|
// src/AccountModal.tsx
|
|
@@ -3443,17 +3586,17 @@ import { ErrorBoundary } from "react-error-boundary";
|
|
|
3443
3586
|
|
|
3444
3587
|
// src/errors/ErrorOverlay.tsx
|
|
3445
3588
|
import { wait } from "@latticexyz/common/utils";
|
|
3446
|
-
import { useEffect as
|
|
3589
|
+
import { useEffect as useEffect15 } from "react";
|
|
3447
3590
|
import { twMerge as twMerge19 } from "tailwind-merge";
|
|
3448
|
-
import { Fragment as
|
|
3591
|
+
import { Fragment as Fragment7, jsx as jsx42, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
3449
3592
|
function ErrorOverlay({ error: error2, retry, dismiss }) {
|
|
3450
|
-
|
|
3593
|
+
useEffect15(() => {
|
|
3451
3594
|
if (error2) {
|
|
3452
3595
|
console.error(error2);
|
|
3453
3596
|
}
|
|
3454
3597
|
}, [error2]);
|
|
3455
|
-
return /* @__PURE__ */
|
|
3456
|
-
/* @__PURE__ */
|
|
3598
|
+
return /* @__PURE__ */ jsxs24("div", { className: "pointer-events-none absolute inset-0 overflow-clip", children: [
|
|
3599
|
+
/* @__PURE__ */ jsx42(
|
|
3457
3600
|
"div",
|
|
3458
3601
|
{
|
|
3459
3602
|
className: twMerge19(
|
|
@@ -3463,7 +3606,7 @@ function ErrorOverlay({ error: error2, retry, dismiss }) {
|
|
|
3463
3606
|
)
|
|
3464
3607
|
}
|
|
3465
3608
|
),
|
|
3466
|
-
/* @__PURE__ */
|
|
3609
|
+
/* @__PURE__ */ jsx42(
|
|
3467
3610
|
"div",
|
|
3468
3611
|
{
|
|
3469
3612
|
className: twMerge19(
|
|
@@ -3471,15 +3614,15 @@ function ErrorOverlay({ error: error2, retry, dismiss }) {
|
|
|
3471
3614
|
"transition duration-300",
|
|
3472
3615
|
error2 ? "translate-y-0 opacity-100 pointer-events-auto" : "-translate-y-4 opacity-0"
|
|
3473
3616
|
),
|
|
3474
|
-
children: error2 ? /* @__PURE__ */
|
|
3475
|
-
/* @__PURE__ */
|
|
3476
|
-
/* @__PURE__ */
|
|
3477
|
-
/* @__PURE__ */
|
|
3478
|
-
/* @__PURE__ */
|
|
3617
|
+
children: error2 ? /* @__PURE__ */ jsx42(Fragment7, { children: /* @__PURE__ */ jsxs24("div", { className: "w-full max-h-full bg-blue-700 text-white/80 overflow-auto", children: [
|
|
3618
|
+
/* @__PURE__ */ jsxs24("div", { className: "space-y-6 px-8 pt-8", children: [
|
|
3619
|
+
/* @__PURE__ */ jsx42("div", { className: "text-white text-lg font-bold", children: "Oops! It broke :(" }),
|
|
3620
|
+
/* @__PURE__ */ jsx42("div", { className: "font-mono text-xs whitespace-pre-wrap", children: error2.message.trim() }),
|
|
3621
|
+
/* @__PURE__ */ jsx42("div", { className: "text-sm", children: "See the console for more info." })
|
|
3479
3622
|
] }),
|
|
3480
|
-
/* @__PURE__ */
|
|
3481
|
-
/* @__PURE__ */
|
|
3482
|
-
retry ? /* @__PURE__ */
|
|
3623
|
+
/* @__PURE__ */ jsxs24("div", { className: "pointer-events-none sticky bottom-0 left-0 -mt-2", children: [
|
|
3624
|
+
/* @__PURE__ */ jsx42("div", { className: "w-full h-12 bg-gradient-to-b from-transparent to-blue-700" }),
|
|
3625
|
+
retry ? /* @__PURE__ */ jsx42("div", { className: "bg-blue-700 text-center", children: /* @__PURE__ */ jsxs24(
|
|
3483
3626
|
"button",
|
|
3484
3627
|
{
|
|
3485
3628
|
type: "button",
|
|
@@ -3498,11 +3641,11 @@ function ErrorOverlay({ error: error2, retry, dismiss }) {
|
|
|
3498
3641
|
}
|
|
3499
3642
|
},
|
|
3500
3643
|
children: [
|
|
3501
|
-
/* @__PURE__ */
|
|
3502
|
-
/* @__PURE__ */
|
|
3644
|
+
/* @__PURE__ */ jsx42("span", { className: "group-aria-busy:hidden", children: "Retry" }),
|
|
3645
|
+
/* @__PURE__ */ jsx42("span", { className: "hidden group-aria-busy:inline", children: "Retrying\u2026" })
|
|
3503
3646
|
]
|
|
3504
3647
|
}
|
|
3505
|
-
) }) : dismiss ? /* @__PURE__ */
|
|
3648
|
+
) }) : dismiss ? /* @__PURE__ */ jsx42("div", { className: "bg-blue-700 text-center", children: /* @__PURE__ */ jsx42(
|
|
3506
3649
|
"button",
|
|
3507
3650
|
{
|
|
3508
3651
|
type: "button",
|
|
@@ -3524,24 +3667,24 @@ function ErrorOverlay({ error: error2, retry, dismiss }) {
|
|
|
3524
3667
|
}
|
|
3525
3668
|
|
|
3526
3669
|
// src/errors/ErrorFallback.tsx
|
|
3527
|
-
import { jsx as
|
|
3670
|
+
import { jsx as jsx43 } from "react/jsx-runtime";
|
|
3528
3671
|
function ErrorFallback({ error: error2, resetErrorBoundary }) {
|
|
3529
|
-
return /* @__PURE__ */
|
|
3672
|
+
return /* @__PURE__ */ jsx43("div", { className: "h-64", children: /* @__PURE__ */ jsx43(ErrorOverlay, { error: error2, retry: resetErrorBoundary }) });
|
|
3530
3673
|
}
|
|
3531
3674
|
|
|
3532
3675
|
// src/errors/ErrorsOverlay.tsx
|
|
3533
3676
|
import { useStore as useStore3 } from "zustand";
|
|
3534
|
-
import { jsx as
|
|
3677
|
+
import { jsx as jsx44 } from "react/jsx-runtime";
|
|
3535
3678
|
function ErrorsOverlay() {
|
|
3536
3679
|
const error2 = useStore3(store3, (state) => state.errors.at(0));
|
|
3537
|
-
return /* @__PURE__ */
|
|
3680
|
+
return /* @__PURE__ */ jsx44(ErrorOverlay, { error: error2?.error, retry: error2?.retry, dismiss: error2?.dismiss });
|
|
3538
3681
|
}
|
|
3539
3682
|
|
|
3540
3683
|
// src/AccountModal.tsx
|
|
3541
|
-
import { jsx as
|
|
3684
|
+
import { jsx as jsx45, jsxs as jsxs25 } from "react/jsx-runtime";
|
|
3542
3685
|
function AccountModal() {
|
|
3543
3686
|
const { accountModalOpen, toggleAccountModal } = useAccountModal();
|
|
3544
|
-
return /* @__PURE__ */
|
|
3687
|
+
return /* @__PURE__ */ jsx45(Modal, { open: accountModalOpen, onOpenChange: toggleAccountModal, children: accountModalOpen ? /* @__PURE__ */ jsxs25(
|
|
3545
3688
|
"div",
|
|
3546
3689
|
{
|
|
3547
3690
|
className: twMerge20(
|
|
@@ -3552,11 +3695,11 @@ function AccountModal() {
|
|
|
3552
3695
|
"links:decoration-neutral-500 hover:links:decoration-orange-500"
|
|
3553
3696
|
),
|
|
3554
3697
|
children: [
|
|
3555
|
-
/* @__PURE__ */
|
|
3556
|
-
/* @__PURE__ */
|
|
3557
|
-
/* @__PURE__ */
|
|
3698
|
+
/* @__PURE__ */ jsxs25(ErrorBoundary, { FallbackComponent: ErrorFallback, children: [
|
|
3699
|
+
/* @__PURE__ */ jsx45(AccountModalContent, {}),
|
|
3700
|
+
/* @__PURE__ */ jsx45(ErrorsOverlay, {})
|
|
3558
3701
|
] }),
|
|
3559
|
-
/* @__PURE__ */
|
|
3702
|
+
/* @__PURE__ */ jsxs25(
|
|
3560
3703
|
"a",
|
|
3561
3704
|
{
|
|
3562
3705
|
href: "https://mud.dev",
|
|
@@ -3564,12 +3707,12 @@ function AccountModal() {
|
|
|
3564
3707
|
rel: "noreferrer noopener",
|
|
3565
3708
|
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",
|
|
3566
3709
|
children: [
|
|
3567
|
-
/* @__PURE__ */
|
|
3568
|
-
/* @__PURE__ */
|
|
3710
|
+
/* @__PURE__ */ jsx45("span", { className: "block w-4 h-4", children: /* @__PURE__ */ jsx45(Logo, { className: "w-full h-full text-orange-500 group-hover:rotate-90 transition duration-300" }) }),
|
|
3711
|
+
/* @__PURE__ */ jsx45("span", { children: "Powered by MUD" })
|
|
3569
3712
|
]
|
|
3570
3713
|
}
|
|
3571
3714
|
),
|
|
3572
|
-
/* @__PURE__ */
|
|
3715
|
+
/* @__PURE__ */ jsx45("div", { className: "absolute top-0 right-0", children: /* @__PURE__ */ jsx45(
|
|
3573
3716
|
DialogClose,
|
|
3574
3717
|
{
|
|
3575
3718
|
className: twMerge20(
|
|
@@ -3577,7 +3720,7 @@ function AccountModal() {
|
|
|
3577
3720
|
"text-white/20 hover:text-white/40"
|
|
3578
3721
|
),
|
|
3579
3722
|
title: "Close",
|
|
3580
|
-
children: /* @__PURE__ */
|
|
3723
|
+
children: /* @__PURE__ */ jsx45(CloseIcon, { className: "m-0" })
|
|
3581
3724
|
}
|
|
3582
3725
|
) })
|
|
3583
3726
|
]
|
|
@@ -3586,11 +3729,11 @@ function AccountModal() {
|
|
|
3586
3729
|
}
|
|
3587
3730
|
|
|
3588
3731
|
// src/EntryKitProvider.tsx
|
|
3589
|
-
import { jsx as
|
|
3732
|
+
import { jsx as jsx46, jsxs as jsxs26 } from "react/jsx-runtime";
|
|
3590
3733
|
function EntryKitProvider({ config, children }) {
|
|
3591
|
-
return /* @__PURE__ */
|
|
3734
|
+
return /* @__PURE__ */ jsxs26(EntryKitConfigProvider, { config, children: [
|
|
3592
3735
|
children,
|
|
3593
|
-
/* @__PURE__ */
|
|
3736
|
+
/* @__PURE__ */ jsx46(AccountModal, {})
|
|
3594
3737
|
] });
|
|
3595
3738
|
}
|
|
3596
3739
|
|
|
@@ -3600,13 +3743,13 @@ import { twMerge as twMerge22 } from "tailwind-merge";
|
|
|
3600
3743
|
|
|
3601
3744
|
// src/AccountName.tsx
|
|
3602
3745
|
import { twMerge as twMerge21 } from "tailwind-merge";
|
|
3603
|
-
import { Fragment as
|
|
3746
|
+
import { Fragment as Fragment8, jsx as jsx47, jsxs as jsxs27 } from "react/jsx-runtime";
|
|
3604
3747
|
function AccountName({ address }) {
|
|
3605
3748
|
const { data: ens } = useENS(address);
|
|
3606
3749
|
const avatar = usePreloadImage(ens?.avatar);
|
|
3607
|
-
return /* @__PURE__ */
|
|
3608
|
-
/* @__PURE__ */
|
|
3609
|
-
/* @__PURE__ */
|
|
3750
|
+
return /* @__PURE__ */ jsxs27(Fragment8, { children: [
|
|
3751
|
+
/* @__PURE__ */ jsxs27("span", { className: "flex-shrink-0 w-6 h-6 -my-1 -mx-0.5 grid place-items-center", children: [
|
|
3752
|
+
/* @__PURE__ */ jsx47(
|
|
3610
3753
|
"img",
|
|
3611
3754
|
{
|
|
3612
3755
|
src: ens?.avatar && avatar.isSuccess ? ens.avatar : void 0,
|
|
@@ -3618,7 +3761,7 @@ function AccountName({ address }) {
|
|
|
3618
3761
|
)
|
|
3619
3762
|
}
|
|
3620
3763
|
),
|
|
3621
|
-
/* @__PURE__ */
|
|
3764
|
+
/* @__PURE__ */ jsx47(
|
|
3622
3765
|
Logo,
|
|
3623
3766
|
{
|
|
3624
3767
|
className: twMerge21(
|
|
@@ -3629,13 +3772,13 @@ function AccountName({ address }) {
|
|
|
3629
3772
|
}
|
|
3630
3773
|
)
|
|
3631
3774
|
] }),
|
|
3632
|
-
/* @__PURE__ */
|
|
3775
|
+
/* @__PURE__ */ jsx47("span", { className: "flex-grow", children: ens?.name ?? /* @__PURE__ */ jsx47(TruncatedHex, { hex: address }) })
|
|
3633
3776
|
] });
|
|
3634
3777
|
}
|
|
3635
3778
|
|
|
3636
3779
|
// src/AccountButton.tsx
|
|
3637
3780
|
import { useRef as useRef7 } from "react";
|
|
3638
|
-
import { jsx as
|
|
3781
|
+
import { jsx as jsx48, jsxs as jsxs28 } from "react/jsx-runtime";
|
|
3639
3782
|
var containerClassNames = twMerge22(
|
|
3640
3783
|
"w-48 p-3 inline-flex outline-none transition",
|
|
3641
3784
|
"border border-transparent",
|
|
@@ -3648,7 +3791,7 @@ var secondaryClassNames = twMerge22(
|
|
|
3648
3791
|
var secondaryInteractiveClassNames = twMerge22(
|
|
3649
3792
|
"cursor-pointer outline-none hover:bg-neutral-200 data-[highlighted]:bg-neutral-200 dark:hover:bg-neutral-700"
|
|
3650
3793
|
);
|
|
3651
|
-
function
|
|
3794
|
+
function AccountButton2() {
|
|
3652
3795
|
const { openAccountModal, accountModalOpen } = useAccountModal();
|
|
3653
3796
|
const { status, address: userAddress } = useAccount9();
|
|
3654
3797
|
const initialUserAddress = useRef7(userAddress);
|
|
@@ -3663,16 +3806,16 @@ function AccountButton() {
|
|
|
3663
3806
|
}
|
|
3664
3807
|
return "Sign in";
|
|
3665
3808
|
})();
|
|
3666
|
-
return /* @__PURE__ */
|
|
3809
|
+
return /* @__PURE__ */ jsx48(Shadow, { mode: "child", children: isSignedIn ? /* @__PURE__ */ jsx48(
|
|
3667
3810
|
"button",
|
|
3668
3811
|
{
|
|
3669
3812
|
type: "button",
|
|
3670
3813
|
className: twMerge22(containerClassNames, secondaryClassNames, secondaryInteractiveClassNames),
|
|
3671
3814
|
onClick: openAccountModal,
|
|
3672
|
-
children: /* @__PURE__ */
|
|
3815
|
+
children: /* @__PURE__ */ jsx48("span", { className: "flex-grow inline-flex gap-2.5 items-center text-left font-medium", children: userAddress ? /* @__PURE__ */ jsx48(AccountName, { address: userAddress }) : null })
|
|
3673
3816
|
},
|
|
3674
3817
|
"connected"
|
|
3675
|
-
) : /* @__PURE__ */
|
|
3818
|
+
) : /* @__PURE__ */ jsxs28(
|
|
3676
3819
|
"button",
|
|
3677
3820
|
{
|
|
3678
3821
|
type: "button",
|
|
@@ -3687,8 +3830,8 @@ function AccountButton() {
|
|
|
3687
3830
|
"aria-busy": accountModalOpen || prereqs.isPending,
|
|
3688
3831
|
onClick: openAccountModal,
|
|
3689
3832
|
children: [
|
|
3690
|
-
/* @__PURE__ */
|
|
3691
|
-
/* @__PURE__ */
|
|
3833
|
+
/* @__PURE__ */ jsxs28("span", { className: "pointer-events-none inline-grid place-items-center -ml-3", children: [
|
|
3834
|
+
/* @__PURE__ */ jsx48(
|
|
3692
3835
|
"span",
|
|
3693
3836
|
{
|
|
3694
3837
|
className: twMerge22(
|
|
@@ -3696,10 +3839,10 @@ function AccountButton() {
|
|
|
3696
3839
|
"scale-100 opacity-100 transition duration-300",
|
|
3697
3840
|
"group-aria-busy:scale-125 group-aria-busy:opacity-0"
|
|
3698
3841
|
),
|
|
3699
|
-
children: /* @__PURE__ */
|
|
3842
|
+
children: /* @__PURE__ */ jsx48(Logo, {})
|
|
3700
3843
|
}
|
|
3701
3844
|
),
|
|
3702
|
-
/* @__PURE__ */
|
|
3845
|
+
/* @__PURE__ */ jsx48(
|
|
3703
3846
|
"span",
|
|
3704
3847
|
{
|
|
3705
3848
|
"aria-hidden": true,
|
|
@@ -3708,11 +3851,11 @@ function AccountButton() {
|
|
|
3708
3851
|
"scale-50 opacity-0 transition duration-300 delay-50",
|
|
3709
3852
|
"group-aria-busy:scale-100 group-aria-busy:opacity-100"
|
|
3710
3853
|
),
|
|
3711
|
-
children: /* @__PURE__ */
|
|
3854
|
+
children: /* @__PURE__ */ jsx48(PendingIcon, {})
|
|
3712
3855
|
}
|
|
3713
3856
|
)
|
|
3714
3857
|
] }),
|
|
3715
|
-
/* @__PURE__ */
|
|
3858
|
+
/* @__PURE__ */ jsx48("span", { className: "font-medium", children: buttonLabel })
|
|
3716
3859
|
]
|
|
3717
3860
|
},
|
|
3718
3861
|
"sign in"
|
|
@@ -3737,6 +3880,8 @@ function useSessionClientReady() {
|
|
|
3737
3880
|
// src/createWagmiConfig.ts
|
|
3738
3881
|
import { createConfig } from "wagmi";
|
|
3739
3882
|
import { getDefaultConfig } from "connectkit";
|
|
3883
|
+
|
|
3884
|
+
// src/getDefaultConnectors.ts
|
|
3740
3885
|
import { injected, coinbaseWallet, safe } from "wagmi/connectors";
|
|
3741
3886
|
|
|
3742
3887
|
// src/connectors/walletConnect.ts
|
|
@@ -3745,7 +3890,7 @@ import {
|
|
|
3745
3890
|
SwitchChainError,
|
|
3746
3891
|
UserRejectedRequestError,
|
|
3747
3892
|
getAddress,
|
|
3748
|
-
numberToHex as
|
|
3893
|
+
numberToHex as numberToHex2
|
|
3749
3894
|
} from "viem";
|
|
3750
3895
|
walletConnect.type = "walletConnect";
|
|
3751
3896
|
function walletConnect(parameters) {
|
|
@@ -3942,7 +4087,7 @@ function walletConnect(parameters) {
|
|
|
3942
4087
|
}),
|
|
3943
4088
|
provider.request({
|
|
3944
4089
|
method: "wallet_switchEthereumChain",
|
|
3945
|
-
params: [{ chainId:
|
|
4090
|
+
params: [{ chainId: numberToHex2(chainId) }]
|
|
3946
4091
|
})
|
|
3947
4092
|
]);
|
|
3948
4093
|
const requestedChains = await this.getRequestedChainsIds();
|
|
@@ -3961,7 +4106,7 @@ function walletConnect(parameters) {
|
|
|
3961
4106
|
else rpcUrls = [...chain.rpcUrls.default.http];
|
|
3962
4107
|
const addEthereumChain = {
|
|
3963
4108
|
blockExplorerUrls,
|
|
3964
|
-
chainId:
|
|
4109
|
+
chainId: numberToHex2(chainId),
|
|
3965
4110
|
chainName: addEthereumChainParameter?.chainName ?? chain.name,
|
|
3966
4111
|
iconUrls: addEthereumChainParameter?.iconUrls,
|
|
3967
4112
|
nativeCurrency: addEthereumChainParameter?.nativeCurrency ?? chain.nativeCurrency,
|
|
@@ -4072,8 +4217,8 @@ function extractRpcUrls(parameters) {
|
|
|
4072
4217
|
return transports.map(({ value }) => value?.url || fallbackUrl);
|
|
4073
4218
|
}
|
|
4074
4219
|
|
|
4075
|
-
// src/
|
|
4076
|
-
function
|
|
4220
|
+
// src/getDefaultConnectors.ts
|
|
4221
|
+
function getDefaultConnectors(config) {
|
|
4077
4222
|
const connectors = [];
|
|
4078
4223
|
const shouldUseSafeConnector = !(typeof window === "undefined") && window?.parent !== window;
|
|
4079
4224
|
if (shouldUseSafeConnector) {
|
|
@@ -4098,6 +4243,12 @@ function createWagmiConfig(config) {
|
|
|
4098
4243
|
})
|
|
4099
4244
|
);
|
|
4100
4245
|
}
|
|
4246
|
+
return connectors;
|
|
4247
|
+
}
|
|
4248
|
+
|
|
4249
|
+
// src/createWagmiConfig.ts
|
|
4250
|
+
function createWagmiConfig(config) {
|
|
4251
|
+
const connectors = config.connectors ?? getDefaultConnectors(config);
|
|
4101
4252
|
const configParams = getDefaultConfig({
|
|
4102
4253
|
chains: config.chains,
|
|
4103
4254
|
transports: config.transports,
|
|
@@ -4130,7 +4281,7 @@ function withFeeCache(chain, options = { refreshInterval: 1e4 }) {
|
|
|
4130
4281
|
}
|
|
4131
4282
|
|
|
4132
4283
|
// src/validateSigner.ts
|
|
4133
|
-
import { readContract } from "viem/actions";
|
|
4284
|
+
import { readContract as readContract2 } from "viem/actions";
|
|
4134
4285
|
async function internal_validateSigner({
|
|
4135
4286
|
client,
|
|
4136
4287
|
worldAddress,
|
|
@@ -4138,7 +4289,7 @@ async function internal_validateSigner({
|
|
|
4138
4289
|
sessionAddress,
|
|
4139
4290
|
signerAddress
|
|
4140
4291
|
}) {
|
|
4141
|
-
const ownerAddress = await
|
|
4292
|
+
const ownerAddress = await readContract2(client, {
|
|
4142
4293
|
address: sessionAddress,
|
|
4143
4294
|
abi: simpleAccountAbi,
|
|
4144
4295
|
functionName: "owner"
|
|
@@ -4173,10 +4324,14 @@ var simpleAccountAbi = [
|
|
|
4173
4324
|
}
|
|
4174
4325
|
];
|
|
4175
4326
|
export {
|
|
4176
|
-
AccountButton,
|
|
4327
|
+
AccountButton2 as AccountButton,
|
|
4177
4328
|
EntryKitProvider,
|
|
4329
|
+
createBundlerClient,
|
|
4178
4330
|
createWagmiConfig,
|
|
4331
|
+
defineCall,
|
|
4179
4332
|
defineConfig,
|
|
4333
|
+
getBundlerTransport,
|
|
4334
|
+
getDefaultConnectors,
|
|
4180
4335
|
getFundsQueryOptions,
|
|
4181
4336
|
internal_validateSigner,
|
|
4182
4337
|
useAccountModal,
|