@latticexyz/entrykit 2.2.22-fdb727e847024560315c10ebf32c1f924755ffe9 → 2.2.23-122945eb02d5d8b6475aec2e88f72340ea81f2d6
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.-mt-2 {\n margin-top: -0.5rem;\n}\n\n.block {\n display: block;\n}\n\n.flex {\n display: flex;\n}\n\n.inline-flex {\n display: inline-flex;\n}\n\n.table {\n display: table;\n}\n\n.grid {\n display: grid;\n}\n\n.inline-grid {\n display: inline-grid;\n}\n\n.contents {\n display: contents;\n}\n\n.hidden {\n display: none;\n}\n\n.h-12 {\n height: 3rem;\n}\n\n.h-16 {\n height: 4rem;\n}\n\n.h-4 {\n height: 1rem;\n}\n\n.h-6 {\n height: 1.5rem;\n}\n\n.h-64 {\n height: 16rem;\n}\n\n.h-\\[1\\.25em\\] {\n height: 1.25em;\n}\n\n.h-\\[1em\\] {\n height: 1em;\n}\n\n.h-full {\n height: 100%;\n}\n\n.max-h-full {\n max-height: 100%;\n}\n\n.min-h-\\[22rem\\] {\n min-height: 22rem;\n}\n\n.min-h-\\[26rem\\] {\n min-height: 26rem;\n}\n\n.w-16 {\n width: 4rem;\n}\n\n.w-24 {\n width: 6rem;\n}\n\n.w-28 {\n width: 7rem;\n}\n\n.w-4 {\n width: 1rem;\n}\n\n.w-48 {\n width: 12rem;\n}\n\n.w-6 {\n width: 1.5rem;\n}\n\n.w-60 {\n width: 15rem;\n}\n\n.w-\\[0\\.6em\\] {\n width: 0.6em;\n}\n\n.w-\\[1\\.25em\\] {\n width: 1.25em;\n}\n\n.w-full {\n width: 100%;\n}\n\n.max-w-\\[26rem\\] {\n max-width: 26rem;\n}\n\n.flex-shrink-0 {\n flex-shrink: 0;\n}\n\n.flex-grow {\n flex-grow: 1;\n}\n\n.-translate-y-2 {\n --tw-translate-y: -0.5rem;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.-translate-y-4 {\n --tw-translate-y: -1rem;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.translate-x-2 {\n --tw-translate-x: 0.5rem;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.translate-y-0 {\n --tw-translate-y: 0px;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.scale-100 {\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.scale-50 {\n --tw-scale-x: .5;\n --tw-scale-y: .5;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n@keyframes spin {\n\n to {\n transform: rotate(360deg);\n }\n}\n\n.animate-spin {\n animation: spin 1s linear infinite;\n}\n\n.cursor-pointer {\n cursor: pointer;\n}\n\n.grid-cols-\\[1fr_auto_1fr\\] {\n grid-template-columns: 1fr auto 1fr;\n}\n\n.flex-col {\n flex-direction: column;\n}\n\n.place-items-center {\n place-items: center;\n}\n\n.items-end {\n align-items: flex-end;\n}\n\n.items-center {\n align-items: center;\n}\n\n.justify-end {\n justify-content: flex-end;\n}\n\n.justify-center {\n justify-content: center;\n}\n\n.justify-between {\n justify-content: space-between;\n}\n\n.gap-1 {\n gap: 0.25rem;\n}\n\n.gap-2 {\n gap: 0.5rem;\n}\n\n.gap-2\\.5 {\n gap: 0.625rem;\n}\n\n.gap-4 {\n gap: 1rem;\n}\n\n.gap-6 {\n gap: 1.5rem;\n}\n\n.space-y-6 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));\n}\n\n.divide-y > :not([hidden]) ~ :not([hidden]) {\n --tw-divide-y-reverse: 0;\n border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));\n border-bottom-width: calc(1px * var(--tw-divide-y-reverse));\n}\n\n.divide-neutral-800 > :not([hidden]) ~ :not([hidden]) {\n --tw-divide-opacity: 1;\n border-color: rgb(38 38 38 / var(--tw-divide-opacity));\n}\n\n.self-auto {\n align-self: auto;\n}\n\n.self-center {\n align-self: center;\n}\n\n.overflow-auto {\n overflow: auto;\n}\n\n.overflow-clip {\n overflow: clip;\n}\n\n.whitespace-pre-wrap {\n white-space: pre-wrap;\n}\n\n.rounded-full {\n border-radius: 9999px;\n}\n\n.border {\n border-width: 1px;\n}\n\n.border-4 {\n border-width: 4px;\n}\n\n.border-neutral-300 {\n --tw-border-opacity: 1;\n border-color: rgb(212 212 212 / var(--tw-border-opacity));\n}\n\n.border-transparent {\n border-color: transparent;\n}\n\n.bg-black\\/10 {\n background-color: rgb(0 0 0 / 0.1);\n}\n\n.bg-blue-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(37 99 235 / var(--tw-bg-opacity));\n}\n\n.bg-blue-700 {\n --tw-bg-opacity: 1;\n background-color: rgb(29 78 216 / var(--tw-bg-opacity));\n}\n\n.bg-blue-700\\/60 {\n background-color: rgb(29 78 216 / 0.6);\n}\n\n.bg-neutral-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(245 245 245 / var(--tw-bg-opacity));\n}\n\n.bg-neutral-700 {\n --tw-bg-opacity: 1;\n background-color: rgb(64 64 64 / var(--tw-bg-opacity));\n}\n\n.bg-neutral-800 {\n --tw-bg-opacity: 1;\n background-color: rgb(38 38 38 / var(--tw-bg-opacity));\n}\n\n.bg-neutral-800\\/85 {\n background-color: rgb(38 38 38 / 0.85);\n}\n\n.bg-neutral-900 {\n --tw-bg-opacity: 1;\n background-color: rgb(23 23 23 / var(--tw-bg-opacity));\n}\n\n.bg-orange-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(249 115 22 / var(--tw-bg-opacity));\n}\n\n.bg-orange-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(234 88 12 / var(--tw-bg-opacity));\n}\n\n.bg-gradient-to-b {\n background-image: linear-gradient(to bottom, var(--tw-gradient-stops));\n}\n\n.from-transparent {\n --tw-gradient-from: transparent var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n}\n\n.to-blue-700 {\n --tw-gradient-to: #1d4ed8 var(--tw-gradient-to-position);\n}\n\n.bg-cover {\n background-size: cover;\n}\n\n.bg-center {\n background-position: center;\n}\n\n.bg-no-repeat {\n background-repeat: no-repeat;\n}\n\n.object-cover {\n object-fit: cover;\n}\n\n.p-1 {\n padding: 0.25rem;\n}\n\n.p-2 {\n padding: 0.5rem;\n}\n\n.p-3 {\n padding: 0.75rem;\n}\n\n.p-4 {\n padding: 1rem;\n}\n\n.p-6 {\n padding: 1.5rem;\n}\n\n.p-\\[\\.75em\\] {\n padding: .75em;\n}\n\n.px-8 {\n padding-left: 2rem;\n padding-right: 2rem;\n}\n\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n\n.py-8 {\n padding-top: 2rem;\n padding-bottom: 2rem;\n}\n\n.pb-8 {\n padding-bottom: 2rem;\n}\n\n.pt-8 {\n padding-top: 2rem;\n}\n\n.text-left {\n text-align: left;\n}\n\n.text-center {\n text-align: center;\n}\n\n.font-mono {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;\n}\n\n.text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n\n.text-\\[\\.75em\\] {\n font-size: .75em;\n}\n\n.text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n\n.text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n\n.text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n\n.font-bold {\n font-weight: 700;\n}\n\n.font-medium {\n font-weight: 500;\n}\n\n.leading-none {\n line-height: 1;\n}\n\n.tracking-\\[-1ch\\] {\n letter-spacing: -1ch;\n}\n\n.text-black {\n --tw-text-opacity: 1;\n color: rgb(0 0 0 / var(--tw-text-opacity));\n}\n\n.text-neutral-400 {\n --tw-text-opacity: 1;\n color: rgb(163 163 163 / var(--tw-text-opacity));\n}\n\n.text-orange-500 {\n --tw-text-opacity: 1;\n color: rgb(249 115 22 / var(--tw-text-opacity));\n}\n\n.text-transparent {\n color: transparent;\n}\n\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n\n.text-white\\/20 {\n color: rgb(255 255 255 / 0.2);\n}\n\n.text-white\\/80 {\n color: rgb(255 255 255 / 0.8);\n}\n\n.opacity-0 {\n opacity: 0;\n}\n\n.opacity-100 {\n opacity: 1;\n}\n\n.opacity-25 {\n opacity: 0.25;\n}\n\n.opacity-30 {\n opacity: 0.3;\n}\n\n.opacity-75 {\n opacity: 0.75;\n}\n\n.outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n\n.ring-1 {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.ring-neutral-700\\/50 {\n --tw-ring-color: rgb(64 64 64 / 0.5);\n}\n\n.filter {\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n\n.transition {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n\n.duration-100 {\n transition-duration: 100ms;\n}\n\n.duration-300 {\n transition-duration: 300ms;\n}\n\n@keyframes enter {\n\n from {\n opacity: var(--tw-enter-opacity, 1);\n transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));\n }\n}\n\n@keyframes exit {\n\n to {\n opacity: var(--tw-exit-opacity, 1);\n transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));\n }\n}\n\n.animate-in {\n animation-name: enter;\n animation-duration: 150ms;\n --tw-enter-opacity: initial;\n --tw-enter-scale: initial;\n --tw-enter-rotate: initial;\n --tw-enter-translate-x: initial;\n --tw-enter-translate-y: initial;\n}\n\n.fade-in {\n --tw-enter-opacity: 0;\n}\n\n.slide-in-from-bottom-16 {\n --tw-enter-translate-y: 4rem;\n}\n\n.slide-in-from-bottom-8 {\n --tw-enter-translate-y: 2rem;\n}\n\n.animate-duration-300 {\n animation-duration: 300ms;\n}\n\n@property --tw-border-gradient-angle {\n syntax: \'<angle>\';\n inherits: true;\n initial-value: 0deg;\n}\n\n@property --tw-conic-gradient-angle {\n syntax: \'<angle>\';\n inherits: true;\n initial-value: 0deg;\n}\n\n@keyframes border-gradient {\n\n to {\n --tw-border-gradient-angle: 360deg;\n }\n}\n\n.after\\:select-none::after {\n content: var(--tw-content);\n -webkit-user-select: none;\n user-select: none;\n}\n\n.after\\:content-\\[\\\'\\2026\\\'\\]::after {\n --tw-content: \'\u2026\';\n content: var(--tw-content);\n}\n\n.hover\\:bg-blue-500:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(59 130 246 / var(--tw-bg-opacity));\n}\n\n.hover\\:bg-neutral-200:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(229 229 229 / var(--tw-bg-opacity));\n}\n\n.hover\\:bg-orange-400:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(251 146 60 / var(--tw-bg-opacity));\n}\n\n.hover\\:text-white:hover {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n\n.hover\\:text-white\\/40:hover {\n color: rgb(255 255 255 / 0.4);\n}\n\n.hover\\:brightness-125:hover {\n --tw-brightness: brightness(1.25);\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n\n.focus\\:border-orange-500:focus {\n --tw-border-opacity: 1;\n border-color: rgb(249 115 22 / var(--tw-border-opacity));\n}\n\n.focus\\:border-yellow-400:focus {\n --tw-border-opacity: 1;\n border-color: rgb(250 204 21 / var(--tw-border-opacity));\n}\n\n.active\\:bg-orange-600:active {\n --tw-bg-opacity: 1;\n background-color: rgb(234 88 12 / var(--tw-bg-opacity));\n}\n\n.active\\:brightness-150:active {\n --tw-brightness: brightness(1.5);\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n\n.group:hover .group-hover\\:rotate-90 {\n --tw-rotate: 90deg;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.aria-busy\\:pointer-events-none[aria-busy="true"] {\n pointer-events: none;\n}\n\n.aria-busy\\:bg-blue-500[aria-busy="true"] {\n --tw-bg-opacity: 1;\n background-color: rgb(59 130 246 / var(--tw-bg-opacity));\n}\n\n.aria-disabled\\:pointer-events-none[aria-disabled="true"] {\n pointer-events: none;\n}\n\n.aria-disabled\\:opacity-50[aria-disabled="true"] {\n opacity: 0.5;\n}\n\n.group[aria-busy="true"] .group-aria-busy\\:inline {\n display: inline;\n}\n\n.group[aria-busy="true"] .group-aria-busy\\:hidden {\n display: none;\n}\n\n.group\\/button[aria-busy="true"] .group-aria-busy\\/button\\:translate-x-0 {\n --tw-translate-x: 0px;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.group[aria-busy="true"] .group-aria-busy\\:scale-100 {\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.group[aria-busy="true"] .group-aria-busy\\:scale-125 {\n --tw-scale-x: 1.25;\n --tw-scale-y: 1.25;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.group\\/button[aria-busy="true"] .group-aria-busy\\/button\\:opacity-100 {\n opacity: 1;\n}\n\n.group[aria-busy="true"] .group-aria-busy\\:opacity-0 {\n opacity: 0;\n}\n\n.group[aria-busy="true"] .group-aria-busy\\:opacity-100 {\n opacity: 1;\n}\n\n.group\\/button[aria-busy="true"] .group-aria-busy\\/button\\:duration-300 {\n transition-duration: 300ms;\n}\n\n.data-\\[highlighted\\]\\:bg-neutral-200[data-highlighted] {\n --tw-bg-opacity: 1;\n background-color: rgb(229 229 229 / var(--tw-bg-opacity));\n}\n\n.links\\:font-medium a[href]:not(.links-unset) {\n font-weight: 500;\n}\n\n.links\\:text-white a[href]:not(.links-unset) {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n\n.links\\:underline a[href]:not(.links-unset) {\n text-decoration-line: underline;\n}\n\n.links\\:decoration-neutral-500 a[href]:not(.links-unset) {\n text-decoration-color: #737373;\n}\n\n.links\\:underline-offset-4 a[href]:not(.links-unset) {\n text-underline-offset: 4px;\n}\n\n.hover\\:links\\:decoration-orange-500 a[href]:not(.links-unset):hover {\n text-decoration-color: #f97316;\n}\n\n@media (min-width: 640px) {\n\n .sm\\:items-center {\n align-items: center;\n }\n}\n\n.dark\\:border-neutral-700:where([data-theme="dark"], [data-theme="dark"] *) {\n --tw-border-opacity: 1;\n border-color: rgb(64 64 64 / var(--tw-border-opacity));\n}\n\n.dark\\:bg-neutral-800:where([data-theme="dark"], [data-theme="dark"] *) {\n --tw-bg-opacity: 1;\n background-color: rgb(38 38 38 / var(--tw-bg-opacity));\n}\n\n.dark\\:bg-white\\/10:where([data-theme="dark"], [data-theme="dark"] *) {\n background-color: rgb(255 255 255 / 0.1);\n}\n\n.dark\\:text-white:where([data-theme="dark"], [data-theme="dark"] *) {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n\n.dark\\:hover\\:bg-neutral-700:hover:where([data-theme="dark"], [data-theme="dark"] *) {\n --tw-bg-opacity: 1;\n background-color: rgb(64 64 64 / var(--tw-bg-opacity));\n}\n';
|
|
25
|
+
var tailwind_default = '*, ::before, ::after {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-gradient-from-position: ;\n --tw-gradient-via-position: ;\n --tw-gradient-to-position: ;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(59 130 246 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n --tw-contain-size: ;\n --tw-contain-layout: ;\n --tw-contain-paint: ;\n --tw-contain-style: ;\n}\n\n::backdrop {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-gradient-from-position: ;\n --tw-gradient-via-position: ;\n --tw-gradient-to-position: ;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(59 130 246 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n --tw-contain-size: ;\n --tw-contain-layout: ;\n --tw-contain-paint: ;\n --tw-contain-style: ;\n}/*\n! tailwindcss v3.4.13 | MIT License | https://tailwindcss.com\n*//*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n\n*,\n::before,\n::after {\n box-sizing: border-box; /* 1 */\n border-width: 0; /* 2 */\n border-style: solid; /* 2 */\n border-color: #e5e7eb; /* 2 */\n}\n\n::before,\n::after {\n --tw-content: \'\';\n}\n\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user\'s configured `sans` font-family by default.\n5. Use the user\'s configured `sans` font-feature-settings by default.\n6. Use the user\'s configured `sans` font-variation-settings by default.\n7. Disable tap highlights on iOS\n*/\n\nhtml,\n:host {\n line-height: 1.5; /* 1 */\n -webkit-text-size-adjust: 100%; /* 2 */ /* 3 */\n tab-size: 4; /* 3 */\n font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */\n font-feature-settings: normal; /* 5 */\n font-variation-settings: normal; /* 6 */\n -webkit-tap-highlight-color: transparent; /* 7 */\n}\n\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\n\nbody {\n margin: 0; /* 1 */\n line-height: inherit; /* 2 */\n}\n\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\n\nhr {\n height: 0; /* 1 */\n color: inherit; /* 2 */\n border-top-width: 1px; /* 3 */\n}\n\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n}\n\n/*\nRemove the default font size and weight for headings.\n*/\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-size: inherit;\n font-weight: inherit;\n}\n\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\n\na {\n color: inherit;\n text-decoration: inherit;\n}\n\n/*\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n font-weight: bolder;\n}\n\n/*\n1. Use the user\'s configured `mono` font-family by default.\n2. Use the user\'s configured `mono` font-feature-settings by default.\n3. Use the user\'s configured `mono` font-variation-settings by default.\n4. Correct the odd `em` font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */\n font-feature-settings: normal; /* 2 */\n font-variation-settings: normal; /* 3 */\n font-size: 1em; /* 4 */\n}\n\n/*\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n font-size: 80%;\n}\n\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\n\ntable {\n text-indent: 0; /* 1 */\n border-color: inherit; /* 2 */\n border-collapse: collapse; /* 3 */\n}\n\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit; /* 1 */\n font-feature-settings: inherit; /* 1 */\n font-variation-settings: inherit; /* 1 */\n font-size: 100%; /* 1 */\n font-weight: inherit; /* 1 */\n line-height: inherit; /* 1 */\n letter-spacing: inherit; /* 1 */\n color: inherit; /* 1 */\n margin: 0; /* 2 */\n padding: 0; /* 3 */\n}\n\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\n\nbutton,\nselect {\n text-transform: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\n\nbutton,\ninput:where([type=\'button\']),\ninput:where([type=\'reset\']),\ninput:where([type=\'submit\']) {\n -webkit-appearance: button; /* 1 */\n background-color: transparent; /* 2 */\n background-image: none; /* 2 */\n}\n\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n\n:-moz-focusring {\n outline: auto;\n}\n\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n\n:-moz-ui-invalid {\n box-shadow: none;\n}\n\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n vertical-align: baseline;\n}\n\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n height: auto;\n}\n\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type=\'search\'] {\n -webkit-appearance: textfield; /* 1 */\n outline-offset: -2px; /* 2 */\n}\n\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n\n::-webkit-file-upload-button {\n -webkit-appearance: button; /* 1 */\n font: inherit; /* 2 */\n}\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n display: list-item;\n}\n\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n margin: 0;\n}\n\nfieldset {\n margin: 0;\n padding: 0;\n}\n\nlegend {\n padding: 0;\n}\n\nol,\nul,\nmenu {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n/*\nReset default styling for dialogs.\n*/\ndialog {\n padding: 0;\n}\n\n/*\nPrevent resizing textareas horizontally by default.\n*/\n\ntextarea {\n resize: vertical;\n}\n\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user\'s configured gray 400 color.\n*/\n\ninput::placeholder,\ntextarea::placeholder {\n opacity: 1; /* 1 */\n color: #9ca3af; /* 2 */\n}\n\n/*\nSet the default cursor for buttons.\n*/\n\nbutton,\n[role="button"] {\n cursor: pointer;\n}\n\n/*\nMake sure disabled buttons don\'t get the pointer cursor.\n*/\n:disabled {\n cursor: default;\n}\n\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n This can trigger a poorly considered lint error in some tools but is included by design.\n*/\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n display: block; /* 1 */\n vertical-align: middle; /* 2 */\n}\n\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\n\nimg,\nvideo {\n max-width: 100%;\n height: auto;\n}\n\n/* Make elements with the HTML hidden attribute stay hidden by default */\n[hidden] {\n display: none;\n}\n\n.container {\n width: 100%;\n}\n\n@media (min-width: 640px) {\n\n .container {\n max-width: 640px;\n }\n}\n\n@media (min-width: 768px) {\n\n .container {\n max-width: 768px;\n }\n}\n\n@media (min-width: 1024px) {\n\n .container {\n max-width: 1024px;\n }\n}\n\n@media (min-width: 1280px) {\n\n .container {\n max-width: 1280px;\n }\n}\n\n@media (min-width: 1536px) {\n\n .container {\n max-width: 1536px;\n }\n}\n\n.grid-cols-2.divide-y > :not([hidden]) ~ :not([hidden]):nth-child(-n + 2) {\n border-top-width: 0;\n border-bottom-width: 0;\n}\n\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n\n.pointer-events-none {\n pointer-events: none;\n}\n\n.pointer-events-auto {\n pointer-events: auto;\n}\n\n.fixed {\n position: fixed;\n}\n\n.absolute {\n position: absolute;\n}\n\n.relative {\n position: relative;\n}\n\n.sticky {\n position: sticky;\n}\n\n.inset-0 {\n inset: 0px;\n}\n\n.bottom-0 {\n bottom: 0px;\n}\n\n.left-0 {\n left: 0px;\n}\n\n.right-0 {\n right: 0px;\n}\n\n.top-0 {\n top: 0px;\n}\n\n.col-start-1 {\n grid-column-start: 1;\n}\n\n.row-start-1 {\n grid-row-start: 1;\n}\n\n.m-0 {\n margin: 0px;\n}\n\n.m-2 {\n margin: 0.5rem;\n}\n\n.-mx-0\\.5 {\n margin-left: -0.125rem;\n margin-right: -0.125rem;\n}\n\n.-my-1 {\n margin-top: -0.25rem;\n margin-bottom: -0.25rem;\n}\n\n.-my-\\[0\\.125em\\] {\n margin-top: -0.125em;\n margin-bottom: -0.125em;\n}\n\n.mx-auto {\n margin-left: auto;\n margin-right: auto;\n}\n\n.-ml-3 {\n margin-left: -0.75rem;\n}\n\n.-mr-1 {\n margin-right: -0.25rem;\n}\n\n.-mt-2 {\n margin-top: -0.5rem;\n}\n\n.mt-1 {\n margin-top: 0.25rem;\n}\n\n.mt-4 {\n margin-top: 1rem;\n}\n\n.block {\n display: block;\n}\n\n.inline-block {\n display: inline-block;\n}\n\n.flex {\n display: flex;\n}\n\n.inline-flex {\n display: inline-flex;\n}\n\n.table {\n display: table;\n}\n\n.grid {\n display: grid;\n}\n\n.inline-grid {\n display: inline-grid;\n}\n\n.contents {\n display: contents;\n}\n\n.hidden {\n display: none;\n}\n\n.aspect-square {\n aspect-ratio: 1 / 1;\n}\n\n.h-10 {\n height: 2.5rem;\n}\n\n.h-12 {\n height: 3rem;\n}\n\n.h-16 {\n height: 4rem;\n}\n\n.h-3 {\n height: 0.75rem;\n}\n\n.h-3\\.5 {\n height: 0.875rem;\n}\n\n.h-4 {\n height: 1rem;\n}\n\n.h-6 {\n height: 1.5rem;\n}\n\n.h-64 {\n height: 16rem;\n}\n\n.h-\\[1\\.25em\\] {\n height: 1.25em;\n}\n\n.h-\\[1em\\] {\n height: 1em;\n}\n\n.h-\\[2px\\] {\n height: 2px;\n}\n\n.h-full {\n height: 100%;\n}\n\n.max-h-\\[230px\\] {\n max-height: 230px;\n}\n\n.max-h-full {\n max-height: 100%;\n}\n\n.w-10 {\n width: 2.5rem;\n}\n\n.w-16 {\n width: 4rem;\n}\n\n.w-24 {\n width: 6rem;\n}\n\n.w-28 {\n width: 7rem;\n}\n\n.w-3 {\n width: 0.75rem;\n}\n\n.w-3\\.5 {\n width: 0.875rem;\n}\n\n.w-4 {\n width: 1rem;\n}\n\n.w-48 {\n width: 12rem;\n}\n\n.w-6 {\n width: 1.5rem;\n}\n\n.w-60 {\n width: 15rem;\n}\n\n.w-8 {\n width: 2rem;\n}\n\n.w-\\[0\\.6em\\] {\n width: 0.6em;\n}\n\n.w-\\[1\\.25em\\] {\n width: 1.25em;\n}\n\n.w-\\[352px\\] {\n width: 352px;\n}\n\n.w-full {\n width: 100%;\n}\n\n.max-w-\\[26rem\\] {\n max-width: 26rem;\n}\n\n.flex-shrink-0 {\n flex-shrink: 0;\n}\n\n.flex-grow {\n flex-grow: 1;\n}\n\n.-translate-y-2 {\n --tw-translate-y: -0.5rem;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.-translate-y-4 {\n --tw-translate-y: -1rem;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.translate-x-2 {\n --tw-translate-x: 0.5rem;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.translate-y-0 {\n --tw-translate-y: 0px;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.scale-100 {\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.scale-50 {\n --tw-scale-x: .5;\n --tw-scale-y: .5;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.transform {\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n@keyframes spin {\n\n to {\n transform: rotate(360deg);\n }\n}\n\n.animate-spin {\n animation: spin 1s linear infinite;\n}\n\n.cursor-pointer {\n cursor: pointer;\n}\n\n.cursor-text {\n cursor: text;\n}\n\n.grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n\n.grid-cols-\\[1fr_auto_1fr\\] {\n grid-template-columns: 1fr auto 1fr;\n}\n\n.flex-col {\n flex-direction: column;\n}\n\n.place-items-center {\n place-items: center;\n}\n\n.items-end {\n align-items: flex-end;\n}\n\n.items-center {\n align-items: center;\n}\n\n.justify-end {\n justify-content: flex-end;\n}\n\n.justify-center {\n justify-content: center;\n}\n\n.justify-between {\n justify-content: space-between;\n}\n\n.gap-1 {\n gap: 0.25rem;\n}\n\n.gap-2 {\n gap: 0.5rem;\n}\n\n.gap-2\\.5 {\n gap: 0.625rem;\n}\n\n.gap-4 {\n gap: 1rem;\n}\n\n.gap-5 {\n gap: 1.25rem;\n}\n\n.gap-6 {\n gap: 1.5rem;\n}\n\n.space-y-6 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));\n}\n\n.divide-y > :not([hidden]) ~ :not([hidden]) {\n --tw-divide-y-reverse: 0;\n border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));\n border-bottom-width: calc(1px * var(--tw-divide-y-reverse));\n}\n\n.divide-neutral-700 > :not([hidden]) ~ :not([hidden]) {\n --tw-divide-opacity: 1;\n border-color: rgb(64 64 64 / var(--tw-divide-opacity));\n}\n\n.divide-neutral-800 > :not([hidden]) ~ :not([hidden]) {\n --tw-divide-opacity: 1;\n border-color: rgb(38 38 38 / var(--tw-divide-opacity));\n}\n\n.self-auto {\n align-self: auto;\n}\n\n.self-center {\n align-self: center;\n}\n\n.overflow-auto {\n overflow: auto;\n}\n\n.overflow-clip {\n overflow: clip;\n}\n\n.overflow-y-auto {\n overflow-y: auto;\n}\n\n.whitespace-nowrap {\n white-space: nowrap;\n}\n\n.whitespace-pre-wrap {\n white-space: pre-wrap;\n}\n\n.rounded-full {\n border-radius: 9999px;\n}\n\n.border {\n border-width: 1px;\n}\n\n.border-2 {\n border-width: 2px;\n}\n\n.border-4 {\n border-width: 4px;\n}\n\n.border-dashed {\n border-style: dashed;\n}\n\n.border-neutral-300 {\n --tw-border-opacity: 1;\n border-color: rgb(212 212 212 / var(--tw-border-opacity));\n}\n\n.border-neutral-700 {\n --tw-border-opacity: 1;\n border-color: rgb(64 64 64 / var(--tw-border-opacity));\n}\n\n.border-transparent {\n border-color: transparent;\n}\n\n.border-white\\/50 {\n border-color: rgb(255 255 255 / 0.5);\n}\n\n.bg-black\\/10 {\n background-color: rgb(0 0 0 / 0.1);\n}\n\n.bg-blue-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(37 99 235 / var(--tw-bg-opacity));\n}\n\n.bg-blue-700 {\n --tw-bg-opacity: 1;\n background-color: rgb(29 78 216 / var(--tw-bg-opacity));\n}\n\n.bg-blue-700\\/60 {\n background-color: rgb(29 78 216 / 0.6);\n}\n\n.bg-green-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(22 163 74 / var(--tw-bg-opacity));\n}\n\n.bg-neutral-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(245 245 245 / var(--tw-bg-opacity));\n}\n\n.bg-neutral-700 {\n --tw-bg-opacity: 1;\n background-color: rgb(64 64 64 / var(--tw-bg-opacity));\n}\n\n.bg-neutral-800 {\n --tw-bg-opacity: 1;\n background-color: rgb(38 38 38 / var(--tw-bg-opacity));\n}\n\n.bg-neutral-800\\/85 {\n background-color: rgb(38 38 38 / 0.85);\n}\n\n.bg-neutral-900 {\n --tw-bg-opacity: 1;\n background-color: rgb(23 23 23 / var(--tw-bg-opacity));\n}\n\n.bg-orange-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(249 115 22 / var(--tw-bg-opacity));\n}\n\n.bg-orange-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(234 88 12 / var(--tw-bg-opacity));\n}\n\n.bg-red-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(220 38 38 / var(--tw-bg-opacity));\n}\n\n.bg-transparent {\n background-color: transparent;\n}\n\n.bg-gradient-to-b {\n background-image: linear-gradient(to bottom, var(--tw-gradient-stops));\n}\n\n.from-transparent {\n --tw-gradient-from: transparent var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n}\n\n.to-blue-700 {\n --tw-gradient-to: #1d4ed8 var(--tw-gradient-to-position);\n}\n\n.bg-cover {\n background-size: cover;\n}\n\n.bg-center {\n background-position: center;\n}\n\n.bg-no-repeat {\n background-repeat: no-repeat;\n}\n\n.object-cover {\n object-fit: cover;\n}\n\n.p-1 {\n padding: 0.25rem;\n}\n\n.p-2 {\n padding: 0.5rem;\n}\n\n.p-2\\.5 {\n padding: 0.625rem;\n}\n\n.p-3 {\n padding: 0.75rem;\n}\n\n.p-4 {\n padding: 1rem;\n}\n\n.p-6 {\n padding: 1.5rem;\n}\n\n.p-\\[\\.75em\\] {\n padding: .75em;\n}\n\n.px-8 {\n padding-left: 2rem;\n padding-right: 2rem;\n}\n\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n\n.py-8 {\n padding-top: 2rem;\n padding-bottom: 2rem;\n}\n\n.pb-2 {\n padding-bottom: 0.5rem;\n}\n\n.pb-8 {\n padding-bottom: 2rem;\n}\n\n.pt-10 {\n padding-top: 2.5rem;\n}\n\n.pt-8 {\n padding-top: 2rem;\n}\n\n.text-left {\n text-align: left;\n}\n\n.text-center {\n text-align: center;\n}\n\n.font-mono {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;\n}\n\n.text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n\n.text-\\[\\.75em\\] {\n font-size: .75em;\n}\n\n.text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n\n.text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n\n.text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n\n.font-bold {\n font-weight: 700;\n}\n\n.font-medium {\n font-weight: 500;\n}\n\n.leading-loose {\n line-height: 2;\n}\n\n.leading-none {\n line-height: 1;\n}\n\n.tracking-\\[-1ch\\] {\n letter-spacing: -1ch;\n}\n\n.text-amber-500 {\n --tw-text-opacity: 1;\n color: rgb(245 158 11 / var(--tw-text-opacity));\n}\n\n.text-black {\n --tw-text-opacity: 1;\n color: rgb(0 0 0 / var(--tw-text-opacity));\n}\n\n.text-gray-400 {\n --tw-text-opacity: 1;\n color: rgb(156 163 175 / var(--tw-text-opacity));\n}\n\n.text-green-600 {\n --tw-text-opacity: 1;\n color: rgb(22 163 74 / var(--tw-text-opacity));\n}\n\n.text-neutral-300 {\n --tw-text-opacity: 1;\n color: rgb(212 212 212 / var(--tw-text-opacity));\n}\n\n.text-neutral-400 {\n --tw-text-opacity: 1;\n color: rgb(163 163 163 / var(--tw-text-opacity));\n}\n\n.text-neutral-500 {\n --tw-text-opacity: 1;\n color: rgb(115 115 115 / var(--tw-text-opacity));\n}\n\n.text-orange-500 {\n --tw-text-opacity: 1;\n color: rgb(249 115 22 / var(--tw-text-opacity));\n}\n\n.text-transparent {\n color: transparent;\n}\n\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n\n.text-white\\/20 {\n color: rgb(255 255 255 / 0.2);\n}\n\n.text-white\\/50 {\n color: rgb(255 255 255 / 0.5);\n}\n\n.text-white\\/80 {\n color: rgb(255 255 255 / 0.8);\n}\n\n.underline {\n text-decoration-line: underline;\n}\n\n.decoration-neutral-500 {\n text-decoration-color: #737373;\n}\n\n.underline-offset-4 {\n text-underline-offset: 4px;\n}\n\n.opacity-0 {\n opacity: 0;\n}\n\n.opacity-100 {\n opacity: 1;\n}\n\n.opacity-25 {\n opacity: 0.25;\n}\n\n.opacity-30 {\n opacity: 0.3;\n}\n\n.opacity-50 {\n opacity: 0.5;\n}\n\n.opacity-75 {\n opacity: 0.75;\n}\n\n.outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n\n.ring-1 {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.ring-2 {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.ring-neutral-700\\/50 {\n --tw-ring-color: rgb(64 64 64 / 0.5);\n}\n\n.ring-transparent {\n --tw-ring-color: transparent;\n}\n\n.filter {\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n\n.transition {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n\n.transition-colors {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n\n.duration-100 {\n transition-duration: 100ms;\n}\n\n.duration-300 {\n transition-duration: 300ms;\n}\n\n.ease-linear {\n transition-timing-function: linear;\n}\n\n@keyframes enter {\n\n from {\n opacity: var(--tw-enter-opacity, 1);\n transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));\n }\n}\n\n@keyframes exit {\n\n to {\n opacity: var(--tw-exit-opacity, 1);\n transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));\n }\n}\n\n.animate-in {\n animation-name: enter;\n animation-duration: 150ms;\n --tw-enter-opacity: initial;\n --tw-enter-scale: initial;\n --tw-enter-rotate: initial;\n --tw-enter-translate-x: initial;\n --tw-enter-translate-y: initial;\n}\n\n.animate-out {\n animation-name: exit;\n animation-duration: 150ms;\n --tw-exit-opacity: initial;\n --tw-exit-scale: initial;\n --tw-exit-rotate: initial;\n --tw-exit-translate-x: initial;\n --tw-exit-translate-y: initial;\n}\n\n.fade-in {\n --tw-enter-opacity: 0;\n}\n\n.fade-out {\n --tw-exit-opacity: 0;\n}\n\n.slide-in-from-bottom-16 {\n --tw-enter-translate-y: 4rem;\n}\n\n.slide-in-from-bottom-2 {\n --tw-enter-translate-y: 0.5rem;\n}\n\n.slide-in-from-bottom-8 {\n --tw-enter-translate-y: 2rem;\n}\n\n.slide-in-from-top-2 {\n --tw-enter-translate-y: -0.5rem;\n}\n\n.animate-duration-300 {\n animation-duration: 300ms;\n}\n\n.ease-linear {\n animation-timing-function: linear;\n}\n\n@property --tw-border-gradient-angle {\n syntax: \'<angle>\';\n inherits: true;\n initial-value: 0deg;\n}\n\n@property --tw-conic-gradient-angle {\n syntax: \'<angle>\';\n inherits: true;\n initial-value: 0deg;\n}\n\n@keyframes border-gradient {\n\n to {\n --tw-border-gradient-angle: 360deg;\n }\n}\n\n.placeholder\\:text-neutral-500::placeholder {\n --tw-text-opacity: 1;\n color: rgb(115 115 115 / var(--tw-text-opacity));\n}\n\n.after\\:select-none::after {\n content: var(--tw-content);\n -webkit-user-select: none;\n user-select: none;\n}\n\n.after\\:content-\\[\\\'\\2026\\\'\\]::after {\n --tw-content: \'\u2026\';\n content: var(--tw-content);\n}\n\n.focus-within\\:border-transparent:focus-within {\n border-color: transparent;\n}\n\n.focus-within\\:ring-orange-500:focus-within {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(249 115 22 / var(--tw-ring-opacity));\n}\n\n.hover\\:bg-blue-500:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(59 130 246 / var(--tw-bg-opacity));\n}\n\n.hover\\:bg-neutral-200:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(229 229 229 / var(--tw-bg-opacity));\n}\n\n.hover\\:bg-orange-400:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(251 146 60 / var(--tw-bg-opacity));\n}\n\n.hover\\:text-white:hover {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n\n.hover\\:text-white\\/40:hover {\n color: rgb(255 255 255 / 0.4);\n}\n\n.hover\\:text-white\\/80:hover {\n color: rgb(255 255 255 / 0.8);\n}\n\n.hover\\:decoration-orange-500:hover {\n text-decoration-color: #f97316;\n}\n\n.hover\\:brightness-125:hover {\n --tw-brightness: brightness(1.25);\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n\n.focus\\:border-orange-500:focus {\n --tw-border-opacity: 1;\n border-color: rgb(249 115 22 / var(--tw-border-opacity));\n}\n\n.focus\\:border-yellow-400:focus {\n --tw-border-opacity: 1;\n border-color: rgb(250 204 21 / var(--tw-border-opacity));\n}\n\n.focus\\:bg-neutral-700:focus {\n --tw-bg-opacity: 1;\n background-color: rgb(64 64 64 / var(--tw-bg-opacity));\n}\n\n.active\\:bg-orange-600:active {\n --tw-bg-opacity: 1;\n background-color: rgb(234 88 12 / var(--tw-bg-opacity));\n}\n\n.active\\:brightness-150:active {\n --tw-brightness: brightness(1.5);\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n\n.group:hover .group-hover\\:pointer-events-none {\n pointer-events: none;\n}\n\n.group:hover .group-hover\\:pointer-events-auto {\n pointer-events: auto;\n}\n\n.group:hover .group-hover\\:inline-block {\n display: inline-block;\n}\n\n.group:hover .group-hover\\:hidden {\n display: none;\n}\n\n.group:hover .group-hover\\:rotate-90 {\n --tw-rotate: 90deg;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.group:hover .group-hover\\:opacity-0 {\n opacity: 0;\n}\n\n.group:hover .group-hover\\:opacity-100 {\n opacity: 1;\n}\n\n.peer:placeholder-shown ~ .peer-placeholder-shown\\:text-neutral-500 {\n --tw-text-opacity: 1;\n color: rgb(115 115 115 / var(--tw-text-opacity));\n}\n\n.aria-busy\\:pointer-events-none[aria-busy="true"] {\n pointer-events: none;\n}\n\n.aria-busy\\:bg-blue-500[aria-busy="true"] {\n --tw-bg-opacity: 1;\n background-color: rgb(59 130 246 / var(--tw-bg-opacity));\n}\n\n.aria-disabled\\:pointer-events-none[aria-disabled="true"] {\n pointer-events: none;\n}\n\n.aria-disabled\\:opacity-50[aria-disabled="true"] {\n opacity: 0.5;\n}\n\n.group[aria-busy="true"] .group-aria-busy\\:inline {\n display: inline;\n}\n\n.group[aria-busy="true"] .group-aria-busy\\:hidden {\n display: none;\n}\n\n.group\\/button[aria-busy="true"] .group-aria-busy\\/button\\:translate-x-0 {\n --tw-translate-x: 0px;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.group[aria-busy="true"] .group-aria-busy\\:scale-100 {\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.group[aria-busy="true"] .group-aria-busy\\:scale-125 {\n --tw-scale-x: 1.25;\n --tw-scale-y: 1.25;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.group\\/button[aria-busy="true"] .group-aria-busy\\/button\\:opacity-100 {\n opacity: 1;\n}\n\n.group[aria-busy="true"] .group-aria-busy\\:opacity-0 {\n opacity: 0;\n}\n\n.group[aria-busy="true"] .group-aria-busy\\:opacity-100 {\n opacity: 1;\n}\n\n.group\\/button[aria-busy="true"] .group-aria-busy\\/button\\:duration-300 {\n transition-duration: 300ms;\n}\n\n.group[aria-expanded="true"] .group-aria-expanded\\:inline {\n display: inline;\n}\n\n.group[aria-expanded="true"] .group-aria-expanded\\:hidden {\n display: none;\n}\n\n.data-\\[highlighted\\]\\:bg-neutral-200[data-highlighted] {\n --tw-bg-opacity: 1;\n background-color: rgb(229 229 229 / var(--tw-bg-opacity));\n}\n\n.data-\\[state\\=checked\\]\\:bg-neutral-900[data-state="checked"] {\n --tw-bg-opacity: 1;\n background-color: rgb(23 23 23 / var(--tw-bg-opacity));\n}\n\n.links\\:font-medium a[href]:not(.links-unset) {\n font-weight: 500;\n}\n\n.links\\:text-white a[href]:not(.links-unset) {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n\n.links\\:underline a[href]:not(.links-unset) {\n text-decoration-line: underline;\n}\n\n.links\\:decoration-neutral-500 a[href]:not(.links-unset) {\n text-decoration-color: #737373;\n}\n\n.links\\:underline-offset-4 a[href]:not(.links-unset) {\n text-underline-offset: 4px;\n}\n\n.hover\\:links\\:decoration-orange-500 a[href]:not(.links-unset):hover {\n text-decoration-color: #f97316;\n}\n\n@media (min-width: 640px) {\n\n .sm\\:items-center {\n align-items: center;\n }\n}\n\n.dark\\:border-neutral-700:where([data-theme="dark"], [data-theme="dark"] *) {\n --tw-border-opacity: 1;\n border-color: rgb(64 64 64 / var(--tw-border-opacity));\n}\n\n.dark\\:bg-neutral-800:where([data-theme="dark"], [data-theme="dark"] *) {\n --tw-bg-opacity: 1;\n background-color: rgb(38 38 38 / var(--tw-bg-opacity));\n}\n\n.dark\\:bg-white\\/10:where([data-theme="dark"], [data-theme="dark"] *) {\n background-color: rgb(255 255 255 / 0.1);\n}\n\n.dark\\:text-white:where([data-theme="dark"], [data-theme="dark"] *) {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n\n.dark\\:hover\\:bg-neutral-700:hover:where([data-theme="dark"], [data-theme="dark"] *) {\n --tw-bg-opacity: 1;\n background-color: rgb(64 64 64 / var(--tw-bg-opacity));\n}\n\n.\\[\\&_\\>_\\:is\\(dt\\2c dd\\)\\]\\:px-1 > :is(dt,dd) {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n}\n\n.\\[\\&_\\>_dd\\]\\:text-right > dd {\n text-align: right;\n}\n';
|
|
26
26
|
|
|
27
27
|
// src/ui/Shadow.tsx
|
|
28
28
|
import { useResizeObserver } from "usehooks-ts";
|
|
@@ -37,14 +37,17 @@ function FrameProvider({ frame, children }) {
|
|
|
37
37
|
if (value) throw new Error("`FrameProvider` can only be used once.");
|
|
38
38
|
return /* @__PURE__ */ jsx(Context.Provider, { value: { frame }, children });
|
|
39
39
|
}
|
|
40
|
+
function useFrame() {
|
|
41
|
+
const value = useContext(Context);
|
|
42
|
+
if (!value) throw new Error("`useFrame` can only be used within a `FrameProvider`.");
|
|
43
|
+
return value;
|
|
44
|
+
}
|
|
40
45
|
|
|
41
46
|
// src/useTheme.ts
|
|
42
47
|
import { useMediaQuery } from "usehooks-ts";
|
|
43
48
|
|
|
44
49
|
// src/EntryKitConfigProvider.tsx
|
|
45
|
-
import "@rainbow-me/rainbowkit/styles.css";
|
|
46
50
|
import { createContext as createContext2, useContext as useContext2 } from "react";
|
|
47
|
-
import { RainbowKitProvider, midnightTheme } from "@rainbow-me/rainbowkit";
|
|
48
51
|
import { useChains } from "wagmi";
|
|
49
52
|
|
|
50
53
|
// src/getBundlerTransport.ts
|
|
@@ -136,8 +139,11 @@ var debug2 = debug.extend("quarry");
|
|
|
136
139
|
|
|
137
140
|
// src/quarry/transports/userOpExecutor.ts
|
|
138
141
|
import { setBalance } from "viem/actions";
|
|
139
|
-
function userOpExecutor({
|
|
140
|
-
|
|
142
|
+
function userOpExecutor({
|
|
143
|
+
executor,
|
|
144
|
+
fallbackDefaultTransport
|
|
145
|
+
}) {
|
|
146
|
+
return (opts) => {
|
|
141
147
|
debug2("using a local user op executor", executor.account.address);
|
|
142
148
|
if (executor.chain.id === 31337) {
|
|
143
149
|
debug2("setting executor balance");
|
|
@@ -172,7 +178,9 @@ function userOpExecutor({ executor }) {
|
|
|
172
178
|
if (method === "eth_estimateUserOperationGas") {
|
|
173
179
|
return await estimateUserOperationGas(params);
|
|
174
180
|
}
|
|
175
|
-
|
|
181
|
+
debug2(`userOpExecutor: method "${method}" not overridden, falling back to fallback transport`);
|
|
182
|
+
const { request: fallbackRequest } = fallbackDefaultTransport(opts);
|
|
183
|
+
return fallbackRequest({ method, params });
|
|
176
184
|
};
|
|
177
185
|
return createTransport({
|
|
178
186
|
key: "userOpExecutor",
|
|
@@ -184,23 +192,31 @@ function userOpExecutor({ executor }) {
|
|
|
184
192
|
}
|
|
185
193
|
|
|
186
194
|
// src/getBundlerTransport.ts
|
|
195
|
+
import { wiresaw } from "@latticexyz/common/internal";
|
|
187
196
|
function getBundlerTransport(chain) {
|
|
197
|
+
if ("wiresaw" in chain.rpcUrls) {
|
|
198
|
+
return wiresaw();
|
|
199
|
+
}
|
|
188
200
|
const bundlerHttpUrl = chain.rpcUrls.bundler?.http[0];
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
201
|
+
if (bundlerHttpUrl) {
|
|
202
|
+
return http(bundlerHttpUrl);
|
|
203
|
+
}
|
|
204
|
+
if (chain.id === 31337) {
|
|
205
|
+
return userOpExecutor({
|
|
206
|
+
executor: createClient({
|
|
207
|
+
chain,
|
|
208
|
+
transport: fallback([webSocket(), http()]),
|
|
209
|
+
account: privateKeyToAccount(keccak256(stringToHex("local user op executor"))),
|
|
210
|
+
pollingInterval: 10
|
|
211
|
+
}).extend(transactionQueue()),
|
|
212
|
+
fallbackDefaultTransport: http()
|
|
213
|
+
});
|
|
199
214
|
}
|
|
200
|
-
|
|
215
|
+
throw new Error(`Chain ${chain.id} config did not include a bundler RPC URL.`);
|
|
201
216
|
}
|
|
202
217
|
|
|
203
218
|
// src/EntryKitConfigProvider.tsx
|
|
219
|
+
import { ConnectKitProvider } from "connectkit";
|
|
204
220
|
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
205
221
|
var Context2 = createContext2(null);
|
|
206
222
|
function EntryKitConfigProvider({ config, children }) {
|
|
@@ -211,14 +227,14 @@ function EntryKitConfigProvider({ config, children }) {
|
|
|
211
227
|
if (!chain) throw new Error(`Could not find configured chain for chain ID ${config.chainId}.`);
|
|
212
228
|
getBundlerTransport(chain);
|
|
213
229
|
return /* @__PURE__ */ jsx2(
|
|
214
|
-
|
|
230
|
+
ConnectKitProvider,
|
|
215
231
|
{
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
//
|
|
232
|
+
theme: "midnight",
|
|
233
|
+
options: {
|
|
234
|
+
// Prevent Wagmi trying to switch chains after connection
|
|
235
|
+
// https://github.com/wevm/wagmi/blob/f5b717ccf8a5b283263cadc984ba00b354bcefae/packages/core/src/connectors/injected.ts#L174-L182
|
|
236
|
+
initialChainId: 0
|
|
220
237
|
},
|
|
221
|
-
theme: midnightTheme({ borderRadius: "none" }),
|
|
222
238
|
children: /* @__PURE__ */ jsx2(Context2.Provider, { value: { ...config, chain }, children })
|
|
223
239
|
}
|
|
224
240
|
);
|
|
@@ -269,7 +285,9 @@ var Shadow = forwardRef(function Shadow2({ mode, children }, forwardedRef) {
|
|
|
269
285
|
inset: "0",
|
|
270
286
|
width: "100%",
|
|
271
287
|
height: "100%",
|
|
272
|
-
|
|
288
|
+
// one less than ConnectKit's modal z-index
|
|
289
|
+
// so that ConnectKit can overlap properly
|
|
290
|
+
zIndex: "2147483645"
|
|
273
291
|
} : frameSize.width && frameSize.height ? {
|
|
274
292
|
all: "unset",
|
|
275
293
|
display: "inline-grid",
|
|
@@ -368,13 +386,10 @@ function useAccountModal() {
|
|
|
368
386
|
}
|
|
369
387
|
|
|
370
388
|
// src/AccountModal.tsx
|
|
371
|
-
import { twMerge as
|
|
389
|
+
import { twMerge as twMerge20 } from "tailwind-merge";
|
|
372
390
|
|
|
373
391
|
// src/AccountModalContent.tsx
|
|
374
|
-
import { useAccount as
|
|
375
|
-
|
|
376
|
-
// src/ConnectWallet.tsx
|
|
377
|
-
import { useAccount } from "wagmi";
|
|
392
|
+
import { useAccount as useAccount8, useConnectorClient } from "wagmi";
|
|
378
393
|
|
|
379
394
|
// src/ui/Button.tsx
|
|
380
395
|
import { twMerge as twMerge3 } from "tailwind-merge";
|
|
@@ -441,7 +456,7 @@ var Button = ({ pending, variant, type, className, children, disabled, ...props
|
|
|
441
456
|
};
|
|
442
457
|
|
|
443
458
|
// src/ConnectWallet.tsx
|
|
444
|
-
import {
|
|
459
|
+
import { useModal } from "connectkit";
|
|
445
460
|
|
|
446
461
|
// src/icons/Logo.tsx
|
|
447
462
|
import { twMerge as twMerge4 } from "tailwind-merge";
|
|
@@ -501,7 +516,7 @@ function AppInfo() {
|
|
|
501
516
|
return /* @__PURE__ */ jsxs6("div", { className: "flex-grow flex flex-col items-center justify-center gap-2", children: [
|
|
502
517
|
/* @__PURE__ */ jsx8("div", { className: "w-16 h-16 m-2", children: !appIconLoading ? hasAppIcon ? /* @__PURE__ */ jsx8("img", { src: appIcon, className: "w-full h-full object-cover" }) : (
|
|
503
518
|
// TODO: swap with favicon
|
|
504
|
-
/* @__PURE__ */ jsx8(Logo, { className: "w-full h-full text-orange-500
|
|
519
|
+
/* @__PURE__ */ jsx8(Logo, { className: "w-full h-full text-orange-500 bg-neutral-800" })
|
|
505
520
|
) : null }),
|
|
506
521
|
/* @__PURE__ */ jsx8("div", { className: "text-2xl text-white text-center", children: appName })
|
|
507
522
|
] });
|
|
@@ -509,18 +524,17 @@ function AppInfo() {
|
|
|
509
524
|
|
|
510
525
|
// src/ConnectWallet.tsx
|
|
511
526
|
import { twMerge as twMerge5 } from "tailwind-merge";
|
|
512
|
-
import { useEffect as useEffect3,
|
|
527
|
+
import { useEffect as useEffect3, useRef as useRef2 } from "react";
|
|
513
528
|
import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
514
529
|
function ConnectWallet() {
|
|
515
|
-
const
|
|
516
|
-
const
|
|
517
|
-
const [hasAutoOpened, setHasAutoOpened] = useState2(false);
|
|
530
|
+
const { open, setOpen } = useModal();
|
|
531
|
+
const hasAutoOpenedRef = useRef2(false);
|
|
518
532
|
useEffect3(() => {
|
|
519
|
-
if (!
|
|
520
|
-
|
|
521
|
-
|
|
533
|
+
if (!open && !hasAutoOpenedRef.current) {
|
|
534
|
+
setOpen(true);
|
|
535
|
+
hasAutoOpenedRef.current = true;
|
|
522
536
|
}
|
|
523
|
-
}, [
|
|
537
|
+
}, [open, setOpen]);
|
|
524
538
|
return /* @__PURE__ */ jsxs7(
|
|
525
539
|
"div",
|
|
526
540
|
{
|
|
@@ -532,8 +546,7 @@ function ConnectWallet() {
|
|
|
532
546
|
{
|
|
533
547
|
variant: "secondary",
|
|
534
548
|
className: "self-auto flex justify-center",
|
|
535
|
-
|
|
536
|
-
onClick: openConnectModal,
|
|
549
|
+
onClick: () => setOpen(true),
|
|
537
550
|
autoFocus: true,
|
|
538
551
|
children: "Connect wallet"
|
|
539
552
|
},
|
|
@@ -545,19 +558,16 @@ function ConnectWallet() {
|
|
|
545
558
|
}
|
|
546
559
|
|
|
547
560
|
// src/onboarding/ConnectedSteps.tsx
|
|
548
|
-
import { useEffect as
|
|
549
|
-
import { twMerge as
|
|
561
|
+
import { useEffect as useEffect15, useMemo as useMemo4, useRef as useRef5, useState as useState5 } from "react";
|
|
562
|
+
import { twMerge as twMerge18 } from "tailwind-merge";
|
|
550
563
|
|
|
551
|
-
// src/onboarding/
|
|
552
|
-
import {
|
|
553
|
-
|
|
564
|
+
// src/onboarding/usePrerequisites.ts
|
|
565
|
+
import { useClient as useClient7, useConfig as useConfig2 } from "wagmi";
|
|
566
|
+
import { queryOptions as queryOptions7, useQuery as useQuery8, useQueryClient as useQueryClient2 } from "@tanstack/react-query";
|
|
554
567
|
|
|
555
|
-
// src/onboarding/quarry/
|
|
568
|
+
// src/onboarding/quarry/useSpender.ts
|
|
556
569
|
import { useClient } from "wagmi";
|
|
557
|
-
import { queryOptions, useQuery as useQuery2 } from "@tanstack/react-query";
|
|
558
|
-
|
|
559
|
-
// src/quarry/getAllowance.ts
|
|
560
|
-
import { numberToHex as numberToHex2 } from "viem";
|
|
570
|
+
import { queryOptions, skipToken, useQuery as useQuery2 } from "@tanstack/react-query";
|
|
561
571
|
|
|
562
572
|
// src/quarry/common.ts
|
|
563
573
|
import { defineStore } from "@latticexyz/store";
|
|
@@ -565,7 +575,11 @@ import { parseAbi } from "viem";
|
|
|
565
575
|
var paymasterAbi = parseAbi([
|
|
566
576
|
"error SpenderSystem_AlreadyRegistered(address spender, address user)",
|
|
567
577
|
"error SpenderSystem_HasOwnBalance(address spender)",
|
|
568
|
-
"
|
|
578
|
+
"error BalanceSystem_BalanceTooHigh(address user, uint256 balance, uint256 max)",
|
|
579
|
+
"error BalanceSystem_InsufficientBalance(address user, uint256 amount, uint256 balance)",
|
|
580
|
+
"function registerSpender(address spender)",
|
|
581
|
+
"function depositTo(address to) payable",
|
|
582
|
+
"function withdrawTo(address to, uint256 amount)"
|
|
569
583
|
]);
|
|
570
584
|
var paymasterConfig = defineStore({
|
|
571
585
|
namespaces: {
|
|
@@ -579,6 +593,13 @@ var paymasterConfig = defineStore({
|
|
|
579
593
|
},
|
|
580
594
|
key: ["user"]
|
|
581
595
|
},
|
|
596
|
+
Balance: {
|
|
597
|
+
schema: {
|
|
598
|
+
user: "address",
|
|
599
|
+
balance: "uint256"
|
|
600
|
+
},
|
|
601
|
+
key: ["user"]
|
|
602
|
+
},
|
|
582
603
|
Grantor: {
|
|
583
604
|
schema: {
|
|
584
605
|
grantor: "address",
|
|
@@ -624,10 +645,8 @@ var paymasterConfig = defineStore({
|
|
|
624
645
|
});
|
|
625
646
|
var paymasterTables = paymasterConfig.namespaces.root.tables;
|
|
626
647
|
|
|
627
|
-
// src/quarry/
|
|
628
|
-
import { getRecord
|
|
629
|
-
import { getKeyTuple } from "@latticexyz/protocol-parser/internal";
|
|
630
|
-
import { setStorageAt } from "viem/actions";
|
|
648
|
+
// src/onboarding/quarry/getSpender.ts
|
|
649
|
+
import { getRecord } from "@latticexyz/store/internal";
|
|
631
650
|
|
|
632
651
|
// src/getPaymaster.ts
|
|
633
652
|
function getPaymaster(chain) {
|
|
@@ -636,7 +655,8 @@ function getPaymaster(chain) {
|
|
|
636
655
|
if ("address" in contracts.quarryPaymaster) {
|
|
637
656
|
return {
|
|
638
657
|
type: "quarry",
|
|
639
|
-
address: contracts.quarryPaymaster.address
|
|
658
|
+
address: contracts.quarryPaymaster.address,
|
|
659
|
+
isGasPass: !!chain.rpcUrls.quarryPassIssuer?.http?.[0]
|
|
640
660
|
};
|
|
641
661
|
}
|
|
642
662
|
}
|
|
@@ -650,64 +670,11 @@ function getPaymaster(chain) {
|
|
|
650
670
|
}
|
|
651
671
|
}
|
|
652
672
|
|
|
653
|
-
// src/quarry/getAllowance.ts
|
|
654
|
-
async function getAllowance({ client, userAddress }) {
|
|
655
|
-
const paymaster = getPaymaster(client.chain);
|
|
656
|
-
if (paymaster?.type !== "quarry") return null;
|
|
657
|
-
const record = await getRecord(client, {
|
|
658
|
-
address: paymaster.address,
|
|
659
|
-
table: paymasterTables.Allowance,
|
|
660
|
-
key: { user: userAddress },
|
|
661
|
-
blockTag: "pending"
|
|
662
|
-
});
|
|
663
|
-
return record.allowance;
|
|
664
|
-
}
|
|
665
|
-
async function setAllowanceSlot({ client, userAddress, allowance }) {
|
|
666
|
-
const paymaster = getPaymaster(client.chain);
|
|
667
|
-
if (paymaster?.type !== "quarry") return;
|
|
668
|
-
const slot = getStaticDataLocation(
|
|
669
|
-
paymasterTables.Allowance.tableId,
|
|
670
|
-
getKeyTuple(paymasterTables.Allowance, { user: userAddress })
|
|
671
|
-
);
|
|
672
|
-
await setStorageAt(
|
|
673
|
-
client.extend(() => ({ mode: "anvil" })),
|
|
674
|
-
{
|
|
675
|
-
address: paymaster.address,
|
|
676
|
-
index: slot,
|
|
677
|
-
value: numberToHex2(allowance, { size: 32 })
|
|
678
|
-
}
|
|
679
|
-
);
|
|
680
|
-
}
|
|
681
|
-
|
|
682
|
-
// src/onboarding/quarry/useAllowance.ts
|
|
683
|
-
function getAllowanceQueryOptions({
|
|
684
|
-
client,
|
|
685
|
-
userAddress
|
|
686
|
-
}) {
|
|
687
|
-
const queryKey = ["getAllowance", client?.uid, userAddress];
|
|
688
|
-
return queryOptions(
|
|
689
|
-
client && userAddress ? {
|
|
690
|
-
queryKey,
|
|
691
|
-
queryFn: () => getAllowance({ client, userAddress })
|
|
692
|
-
} : { queryKey, enabled: false }
|
|
693
|
-
);
|
|
694
|
-
}
|
|
695
|
-
function useAllowance(userAddress) {
|
|
696
|
-
const { chainId } = useEntryKitConfig();
|
|
697
|
-
const client = useClient({ chainId });
|
|
698
|
-
return useQuery2(getAllowanceQueryOptions({ client, userAddress }));
|
|
699
|
-
}
|
|
700
|
-
|
|
701
|
-
// src/onboarding/quarry/useSpender.ts
|
|
702
|
-
import { useClient as useClient2 } from "wagmi";
|
|
703
|
-
import { queryOptions as queryOptions2, useQuery as useQuery3 } from "@tanstack/react-query";
|
|
704
|
-
|
|
705
673
|
// src/onboarding/quarry/getSpender.ts
|
|
706
|
-
import { getRecord as getRecord2 } from "@latticexyz/store/internal";
|
|
707
674
|
async function getSpender({ client, userAddress, sessionAddress }) {
|
|
708
675
|
const paymaster = getPaymaster(client.chain);
|
|
709
676
|
if (paymaster?.type !== "quarry") return null;
|
|
710
|
-
const record = await
|
|
677
|
+
const record = await getRecord(client, {
|
|
711
678
|
address: paymaster.address,
|
|
712
679
|
table: paymasterTables.Spender,
|
|
713
680
|
key: { spender: sessionAddress },
|
|
@@ -722,21 +689,18 @@ function getSpenderQueryOptions({
|
|
|
722
689
|
userAddress,
|
|
723
690
|
sessionAddress
|
|
724
691
|
}) {
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
client && userAddress && sessionAddress ? {
|
|
728
|
-
|
|
729
|
-
queryFn: () => getSpender({ client, userAddress, sessionAddress })
|
|
730
|
-
} : { queryKey, enabled: false }
|
|
731
|
-
);
|
|
692
|
+
return queryOptions({
|
|
693
|
+
queryKey: ["getSpender", client?.uid, userAddress, sessionAddress],
|
|
694
|
+
queryFn: client && userAddress && sessionAddress ? () => getSpender({ client, userAddress, sessionAddress }) : skipToken
|
|
695
|
+
});
|
|
732
696
|
}
|
|
733
697
|
|
|
734
698
|
// src/onboarding/useDelegation.ts
|
|
735
|
-
import { useClient as
|
|
736
|
-
import { queryOptions as
|
|
699
|
+
import { useClient as useClient2 } from "wagmi";
|
|
700
|
+
import { queryOptions as queryOptions2, skipToken as skipToken2, useQuery as useQuery3 } from "@tanstack/react-query";
|
|
737
701
|
|
|
738
702
|
// src/onboarding/getDelegation.ts
|
|
739
|
-
import { getRecord as
|
|
703
|
+
import { getRecord as getRecord2 } from "@latticexyz/store/internal";
|
|
740
704
|
|
|
741
705
|
// src/common.ts
|
|
742
706
|
import { resourceToHex } from "@latticexyz/common";
|
|
@@ -760,7 +724,7 @@ async function getDelegation({
|
|
|
760
724
|
// TODO: move everything to latest instead of pending
|
|
761
725
|
blockTag = "pending"
|
|
762
726
|
}) {
|
|
763
|
-
const record = await
|
|
727
|
+
const record = await getRecord2(client, {
|
|
764
728
|
address: worldAddress,
|
|
765
729
|
table: worldTables.UserDelegationControl,
|
|
766
730
|
key: { delegator: userAddress, delegatee: sessionAddress },
|
|
@@ -776,22 +740,15 @@ function getDelegationQueryOptions({
|
|
|
776
740
|
userAddress,
|
|
777
741
|
sessionAddress
|
|
778
742
|
}) {
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
client && userAddress && sessionAddress ? {
|
|
782
|
-
|
|
783
|
-
queryFn: () => getDelegation({ client, worldAddress, userAddress, sessionAddress })
|
|
784
|
-
} : { queryKey, enabled: false }
|
|
785
|
-
);
|
|
743
|
+
return queryOptions2({
|
|
744
|
+
queryKey: ["getDelegation", client?.uid, worldAddress, userAddress, sessionAddress],
|
|
745
|
+
queryFn: client && userAddress && sessionAddress ? () => getDelegation({ client, worldAddress, userAddress, sessionAddress }) : skipToken2
|
|
746
|
+
});
|
|
786
747
|
}
|
|
787
748
|
|
|
788
|
-
// src/onboarding/usePrerequisites.ts
|
|
789
|
-
import { queryOptions as queryOptions5, useQuery as useQuery6, useQueryClient } from "@tanstack/react-query";
|
|
790
|
-
import { useClient as useClient5, useConfig } from "wagmi";
|
|
791
|
-
|
|
792
749
|
// src/useSessionAccount.ts
|
|
793
|
-
import { useClient as
|
|
794
|
-
import { queryOptions as
|
|
750
|
+
import { useClient as useClient3 } from "wagmi";
|
|
751
|
+
import { queryOptions as queryOptions3, skipToken as skipToken3, useQuery as useQuery4 } from "@tanstack/react-query";
|
|
795
752
|
|
|
796
753
|
// src/getSessionAccount.ts
|
|
797
754
|
import { toSimpleSmartAccount } from "permissionless/accounts";
|
|
@@ -855,20 +812,145 @@ function getSessionAccountQueryOptions({
|
|
|
855
812
|
client,
|
|
856
813
|
userAddress
|
|
857
814
|
}) {
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
client && userAddress ? {
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
815
|
+
return queryOptions3({
|
|
816
|
+
queryKey: ["getSessionAccount", client?.uid, userAddress],
|
|
817
|
+
queryFn: client && userAddress ? () => getSessionAccount({ client, userAddress }) : skipToken3,
|
|
818
|
+
staleTime: Infinity,
|
|
819
|
+
// TODO: replace with function to retry only connection errors
|
|
820
|
+
retry: false
|
|
821
|
+
});
|
|
822
|
+
}
|
|
823
|
+
|
|
824
|
+
// src/useFunds.ts
|
|
825
|
+
import { useClient as useClient6, useConfig } from "wagmi";
|
|
826
|
+
import { getBalanceQueryOptions as getBalanceQueryOptions2 } from "wagmi/query";
|
|
827
|
+
import { queryOptions as queryOptions6, useQuery as useQuery7, useQueryClient } from "@tanstack/react-query";
|
|
828
|
+
|
|
829
|
+
// src/onboarding/quarry/useAllowance.ts
|
|
830
|
+
import { useClient as useClient4 } from "wagmi";
|
|
831
|
+
import { queryOptions as queryOptions4, skipToken as skipToken4, useQuery as useQuery5 } from "@tanstack/react-query";
|
|
832
|
+
|
|
833
|
+
// src/quarry/getAllowance.ts
|
|
834
|
+
import { numberToHex as numberToHex2 } from "viem";
|
|
835
|
+
import { getRecord as getRecord3, getStaticDataLocation } from "@latticexyz/store/internal";
|
|
836
|
+
import { getKeyTuple } from "@latticexyz/protocol-parser/internal";
|
|
837
|
+
import { setStorageAt } from "viem/actions";
|
|
838
|
+
async function getAllowance({ client, userAddress }) {
|
|
839
|
+
const paymaster = getPaymaster(client.chain);
|
|
840
|
+
if (paymaster?.type !== "quarry") return null;
|
|
841
|
+
const record = await getRecord3(client, {
|
|
842
|
+
address: paymaster.address,
|
|
843
|
+
table: paymasterTables.Allowance,
|
|
844
|
+
key: { user: userAddress },
|
|
845
|
+
blockTag: "pending"
|
|
846
|
+
});
|
|
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
|
+
}
|
|
867
863
|
);
|
|
868
864
|
}
|
|
869
865
|
|
|
866
|
+
// src/onboarding/quarry/useAllowance.ts
|
|
867
|
+
function getAllowanceQueryOptions({
|
|
868
|
+
client,
|
|
869
|
+
userAddress
|
|
870
|
+
}) {
|
|
871
|
+
return queryOptions4({
|
|
872
|
+
queryKey: ["getAllowance", client?.uid, userAddress],
|
|
873
|
+
queryFn: client && userAddress ? () => getAllowance({ client, userAddress }) : skipToken4
|
|
874
|
+
});
|
|
875
|
+
}
|
|
876
|
+
function useAllowance(userAddress) {
|
|
877
|
+
const { chainId } = useEntryKitConfig();
|
|
878
|
+
const client = useClient4({ chainId });
|
|
879
|
+
return useQuery5(getAllowanceQueryOptions({ client, userAddress }));
|
|
880
|
+
}
|
|
881
|
+
|
|
882
|
+
// src/onboarding/quarry/useBalance.ts
|
|
883
|
+
import { useClient as useClient5 } from "wagmi";
|
|
884
|
+
import { queryOptions as queryOptions5, skipToken as skipToken5, useQuery as useQuery6 } from "@tanstack/react-query";
|
|
885
|
+
|
|
886
|
+
// src/quarry/getBalance.ts
|
|
887
|
+
import { getRecord as getRecord4 } from "@latticexyz/store/internal";
|
|
888
|
+
async function getBalance({ client, userAddress }) {
|
|
889
|
+
const paymaster = getPaymaster(client.chain);
|
|
890
|
+
if (paymaster?.type !== "quarry") return null;
|
|
891
|
+
const record = await getRecord4(client, {
|
|
892
|
+
address: paymaster.address,
|
|
893
|
+
table: paymasterTables.Balance,
|
|
894
|
+
key: { user: userAddress },
|
|
895
|
+
blockTag: "pending"
|
|
896
|
+
});
|
|
897
|
+
return record.balance;
|
|
898
|
+
}
|
|
899
|
+
|
|
900
|
+
// src/onboarding/quarry/useBalance.ts
|
|
901
|
+
function getBalanceQueryOptions({
|
|
902
|
+
client,
|
|
903
|
+
userAddress
|
|
904
|
+
}) {
|
|
905
|
+
return queryOptions5({
|
|
906
|
+
queryKey: ["getBalance", client?.uid, userAddress],
|
|
907
|
+
queryFn: client && userAddress ? () => getBalance({ client, userAddress }) : skipToken5
|
|
908
|
+
});
|
|
909
|
+
}
|
|
910
|
+
function useBalance(userAddress) {
|
|
911
|
+
const { chainId } = useEntryKitConfig();
|
|
912
|
+
const client = useClient5({ chainId });
|
|
913
|
+
return useQuery6(getBalanceQueryOptions({ client, userAddress }));
|
|
914
|
+
}
|
|
915
|
+
|
|
916
|
+
// src/useFunds.ts
|
|
917
|
+
function getFundsQueryOptions({
|
|
918
|
+
queryClient,
|
|
919
|
+
config,
|
|
920
|
+
client,
|
|
921
|
+
userAddress
|
|
922
|
+
}) {
|
|
923
|
+
return queryOptions6({
|
|
924
|
+
queryKey: ["getFunds", client?.uid, userAddress],
|
|
925
|
+
queryFn: async () => {
|
|
926
|
+
if (!client) throw new Error("Viem client not ready.");
|
|
927
|
+
if (!userAddress) throw new Error("User not connected.");
|
|
928
|
+
const {
|
|
929
|
+
account: { address: sessionAddress }
|
|
930
|
+
} = await queryClient.fetchQuery(getSessionAccountQueryOptions({ client, userAddress }));
|
|
931
|
+
const [sessionBalance, paymasterAllowance, paymasterBalance] = await Promise.all([
|
|
932
|
+
queryClient.fetchQuery(getBalanceQueryOptions2(config, { chainId: client.chain.id, address: sessionAddress })),
|
|
933
|
+
queryClient.fetchQuery(getAllowanceQueryOptions({ client, userAddress })),
|
|
934
|
+
queryClient.fetchQuery(getBalanceQueryOptions({ client, userAddress }))
|
|
935
|
+
]);
|
|
936
|
+
return {
|
|
937
|
+
sessionBalance: sessionBalance?.value ?? null,
|
|
938
|
+
paymasterAllowance,
|
|
939
|
+
paymasterBalance
|
|
940
|
+
};
|
|
941
|
+
},
|
|
942
|
+
retry: false
|
|
943
|
+
});
|
|
944
|
+
}
|
|
945
|
+
function useFunds(userAddress) {
|
|
946
|
+
const queryClient = useQueryClient();
|
|
947
|
+
const config = useConfig();
|
|
948
|
+
const { chainId } = useEntryKitConfig();
|
|
949
|
+
const client = useClient6({ chainId });
|
|
950
|
+
return useQuery7(getFundsQueryOptions({ queryClient, config, client, userAddress }), queryClient);
|
|
951
|
+
}
|
|
952
|
+
|
|
870
953
|
// src/onboarding/usePrerequisites.ts
|
|
871
|
-
import { getBalanceQueryOptions } from "wagmi/query";
|
|
872
954
|
function getPrequisitesQueryOptions({
|
|
873
955
|
queryClient,
|
|
874
956
|
config,
|
|
@@ -876,46 +958,43 @@ function getPrequisitesQueryOptions({
|
|
|
876
958
|
userAddress,
|
|
877
959
|
worldAddress
|
|
878
960
|
}) {
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
retry: false
|
|
910
|
-
} : { queryKey, enabled: false }
|
|
911
|
-
);
|
|
961
|
+
return queryOptions7({
|
|
962
|
+
queryKey: ["getPrerequisites", client?.uid, userAddress],
|
|
963
|
+
queryFn: async () => {
|
|
964
|
+
if (!client) throw new Error("Viem client not ready.");
|
|
965
|
+
if (!userAddress) throw new Error("User not connected.");
|
|
966
|
+
const {
|
|
967
|
+
account: { address: sessionAddress }
|
|
968
|
+
} = await queryClient.fetchQuery(getSessionAccountQueryOptions({ client, userAddress }));
|
|
969
|
+
const [funds, spender, hasDelegation] = await Promise.all([
|
|
970
|
+
queryClient.fetchQuery(getFundsQueryOptions({ queryClient, config, client, userAddress })),
|
|
971
|
+
queryClient.fetchQuery(getSpenderQueryOptions({ client, userAddress, sessionAddress })),
|
|
972
|
+
queryClient.fetchQuery(getDelegationQueryOptions({ client, worldAddress, userAddress, sessionAddress }))
|
|
973
|
+
]);
|
|
974
|
+
const hasAllowance = funds.paymasterAllowance == null || funds.paymasterAllowance > 0n;
|
|
975
|
+
const isSpender = spender == null ? true : spender;
|
|
976
|
+
const hasGasBalance = funds.sessionBalance == null || funds.sessionBalance > 0n;
|
|
977
|
+
const hasQuarryGasBalance = funds.paymasterBalance == null || funds.paymasterBalance > 0n;
|
|
978
|
+
return {
|
|
979
|
+
sessionAddress,
|
|
980
|
+
hasAllowance,
|
|
981
|
+
isSpender,
|
|
982
|
+
hasGasBalance,
|
|
983
|
+
hasQuarryGasBalance,
|
|
984
|
+
hasDelegation,
|
|
985
|
+
// we intentionally don't enforce an allowance/gas balance here
|
|
986
|
+
complete: isSpender && hasDelegation
|
|
987
|
+
};
|
|
988
|
+
},
|
|
989
|
+
retry: false
|
|
990
|
+
});
|
|
912
991
|
}
|
|
913
992
|
function usePrerequisites(userAddress) {
|
|
914
|
-
const queryClient =
|
|
915
|
-
const config =
|
|
993
|
+
const queryClient = useQueryClient2();
|
|
994
|
+
const config = useConfig2();
|
|
916
995
|
const { chainId, worldAddress } = useEntryKitConfig();
|
|
917
|
-
const client =
|
|
918
|
-
const prereqs =
|
|
996
|
+
const client = useClient7({ chainId });
|
|
997
|
+
const prereqs = useQuery8(
|
|
919
998
|
getPrequisitesQueryOptions({
|
|
920
999
|
queryClient,
|
|
921
1000
|
config,
|
|
@@ -932,10 +1011,10 @@ function usePrerequisites(userAddress) {
|
|
|
932
1011
|
import { useDisconnect } from "wagmi";
|
|
933
1012
|
|
|
934
1013
|
// src/useENS.ts
|
|
935
|
-
import { useQuery as
|
|
1014
|
+
import { useQuery as useQuery9 } from "@tanstack/react-query";
|
|
936
1015
|
function useENS(address) {
|
|
937
1016
|
const normalizedAddress = address?.toLowerCase();
|
|
938
|
-
return
|
|
1017
|
+
return useQuery9({
|
|
939
1018
|
enabled: !!normalizedAddress,
|
|
940
1019
|
queryKey: ["ens", normalizedAddress],
|
|
941
1020
|
queryFn: async () => {
|
|
@@ -1054,9 +1133,12 @@ function Wallet({ isActive, isExpanded, userAddress }) {
|
|
|
1054
1133
|
] });
|
|
1055
1134
|
}
|
|
1056
1135
|
|
|
1057
|
-
// src/onboarding/quarry/
|
|
1136
|
+
// src/onboarding/quarry/Allowance.tsx
|
|
1058
1137
|
import { parseEther as parseEther3 } from "viem";
|
|
1059
|
-
|
|
1138
|
+
|
|
1139
|
+
// src/onboarding/quarry/useClaimGasPass.ts
|
|
1140
|
+
import { parseEther as parseEther2 } from "viem";
|
|
1141
|
+
import { useMutation, useQueryClient as useQueryClient3 } from "@tanstack/react-query";
|
|
1060
1142
|
|
|
1061
1143
|
// src/quarry/transports/quarryPassIssuer.ts
|
|
1062
1144
|
import { http as http2 } from "viem";
|
|
@@ -1085,11 +1167,11 @@ async function claimGasPass({ chain, userAddress }) {
|
|
|
1085
1167
|
}
|
|
1086
1168
|
|
|
1087
1169
|
// src/onboarding/quarry/useClaimGasPass.ts
|
|
1088
|
-
import { useClient as
|
|
1170
|
+
import { useClient as useClient8 } from "wagmi";
|
|
1089
1171
|
function useClaimGasPass() {
|
|
1090
|
-
const queryClient =
|
|
1172
|
+
const queryClient = useQueryClient3();
|
|
1091
1173
|
const { chain } = useEntryKitConfig();
|
|
1092
|
-
const client =
|
|
1174
|
+
const client = useClient8({ chainId: chain.id });
|
|
1093
1175
|
const mutationKey = ["claimGasPass", chain.id];
|
|
1094
1176
|
return useMutation({
|
|
1095
1177
|
retry: 0,
|
|
@@ -1097,12 +1179,13 @@ function useClaimGasPass() {
|
|
|
1097
1179
|
mutationFn: async (userAddress) => {
|
|
1098
1180
|
if (chain.id === 31337) {
|
|
1099
1181
|
if (!client) throw new Error("No client?");
|
|
1100
|
-
await setAllowanceSlot({ client, userAddress, allowance:
|
|
1182
|
+
await setAllowanceSlot({ client, userAddress, allowance: parseEther2("1") });
|
|
1101
1183
|
} else {
|
|
1102
1184
|
await claimGasPass({ chain, userAddress });
|
|
1103
1185
|
}
|
|
1104
1186
|
await Promise.all([
|
|
1105
1187
|
queryClient.invalidateQueries({ queryKey: ["getAllowance"] }),
|
|
1188
|
+
queryClient.invalidateQueries({ queryKey: ["getFunds"] }),
|
|
1106
1189
|
queryClient.invalidateQueries({ queryKey: ["getPrerequisites"] })
|
|
1107
1190
|
]);
|
|
1108
1191
|
}
|
|
@@ -1135,8 +1218,12 @@ function EthIcon({ className, ...props }) {
|
|
|
1135
1218
|
import { formatEther } from "viem";
|
|
1136
1219
|
function formatBalance(wei) {
|
|
1137
1220
|
const formatted = formatEther(wei);
|
|
1138
|
-
const
|
|
1139
|
-
|
|
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) });
|
|
1140
1227
|
}
|
|
1141
1228
|
|
|
1142
1229
|
// src/ui/Balance.tsx
|
|
@@ -1172,7 +1259,7 @@ function Allowance({ isActive, isExpanded, userAddress }) {
|
|
|
1172
1259
|
const claimGasPass2 = useShowMutationError(useClaimGasPass());
|
|
1173
1260
|
useEffect6(() => {
|
|
1174
1261
|
const timer = setTimeout(() => {
|
|
1175
|
-
if (isActive && claimGasPass2.status === "idle" && allowance.isSuccess && allowance.data != null && allowance.data <
|
|
1262
|
+
if (isActive && claimGasPass2.status === "idle" && allowance.isSuccess && allowance.data != null && allowance.data < parseEther3("0.01")) {
|
|
1176
1263
|
claimGasPass2.mutate(userAddress);
|
|
1177
1264
|
}
|
|
1178
1265
|
});
|
|
@@ -1200,9 +1287,12 @@ function Allowance({ isActive, isExpanded, userAddress }) {
|
|
|
1200
1287
|
] });
|
|
1201
1288
|
}
|
|
1202
1289
|
|
|
1290
|
+
// src/onboarding/Session.tsx
|
|
1291
|
+
import { useEffect as useEffect7 } from "react";
|
|
1292
|
+
|
|
1203
1293
|
// src/onboarding/useSetupSession.ts
|
|
1204
1294
|
import { encodeFunctionData } from "viem";
|
|
1205
|
-
import { useMutation as useMutation2, useQueryClient as
|
|
1295
|
+
import { useMutation as useMutation2, useQueryClient as useQueryClient4 } from "@tanstack/react-query";
|
|
1206
1296
|
import { getAction as getAction4 } from "viem/utils";
|
|
1207
1297
|
import { sendUserOperation as sendUserOperation2, waitForUserOperationReceipt } from "viem/account-abstraction";
|
|
1208
1298
|
import { waitForTransactionReceipt as waitForTransactionReceipt2 } from "viem/actions";
|
|
@@ -1213,11 +1303,12 @@ function defineCall(call) {
|
|
|
1213
1303
|
}
|
|
1214
1304
|
|
|
1215
1305
|
// src/onboarding/useSetupSession.ts
|
|
1216
|
-
import { useClient as
|
|
1306
|
+
import { useClient as useClient9 } from "wagmi";
|
|
1217
1307
|
import { resourceToHex as resourceToHex2 } from "@latticexyz/common";
|
|
1218
1308
|
import IBaseWorldAbi from "@latticexyz/world/out/IBaseWorld.sol/IBaseWorld.abi.json";
|
|
1219
1309
|
|
|
1220
1310
|
// src/utils/callWithSignature.ts
|
|
1311
|
+
import { parseErc6492Signature } from "viem";
|
|
1221
1312
|
import { writeContract as viem_writeContract } from "viem/actions";
|
|
1222
1313
|
import { getAction as getAction3 } from "viem/utils";
|
|
1223
1314
|
|
|
@@ -1225,7 +1316,7 @@ import { getAction as getAction3 } from "viem/utils";
|
|
|
1225
1316
|
import { toHex } from "viem";
|
|
1226
1317
|
import { signTypedData } from "viem/actions";
|
|
1227
1318
|
import { callWithSignatureTypes } from "@latticexyz/world-module-callwithsignature/internal";
|
|
1228
|
-
import { getRecord as
|
|
1319
|
+
import { getRecord as getRecord5 } from "@latticexyz/store/internal";
|
|
1229
1320
|
import moduleConfig from "@latticexyz/world-module-callwithsignature/mud.config";
|
|
1230
1321
|
import { hexToResource } from "@latticexyz/common";
|
|
1231
1322
|
import { getAction as getAction2 } from "viem/utils";
|
|
@@ -1237,7 +1328,7 @@ async function signCall({
|
|
|
1237
1328
|
nonce: initialNonce,
|
|
1238
1329
|
client
|
|
1239
1330
|
}) {
|
|
1240
|
-
const nonce = initialNonce ?? (client ? (await
|
|
1331
|
+
const nonce = initialNonce ?? (client ? (await getRecord5(client, {
|
|
1241
1332
|
address: worldAddress,
|
|
1242
1333
|
table: moduleConfig.tables.CallWithSignatureNonces,
|
|
1243
1334
|
key: { signer: userClient.account.address },
|
|
@@ -1272,7 +1363,13 @@ async function callWithSignature({
|
|
|
1272
1363
|
sessionClient,
|
|
1273
1364
|
...opts
|
|
1274
1365
|
}) {
|
|
1275
|
-
const
|
|
1366
|
+
const rawSignature = await signCall(opts);
|
|
1367
|
+
const { address, signature } = parseErc6492Signature(rawSignature);
|
|
1368
|
+
if (address != null) {
|
|
1369
|
+
throw new Error(
|
|
1370
|
+
"ERC-6492 signatures, like from Coinbase Smart Wallet, are not yet supported. Try using a different wallet?"
|
|
1371
|
+
);
|
|
1372
|
+
}
|
|
1276
1373
|
return getAction3(
|
|
1277
1374
|
sessionClient,
|
|
1278
1375
|
viem_writeContract,
|
|
@@ -1288,9 +1385,9 @@ async function callWithSignature({
|
|
|
1288
1385
|
// src/onboarding/useSetupSession.ts
|
|
1289
1386
|
import { systemsConfig as worldSystemsConfig } from "@latticexyz/world/mud.config";
|
|
1290
1387
|
function useSetupSession({ userClient }) {
|
|
1291
|
-
const queryClient =
|
|
1388
|
+
const queryClient = useQueryClient4();
|
|
1292
1389
|
const { chainId, worldAddress } = useEntryKitConfig();
|
|
1293
|
-
const client =
|
|
1390
|
+
const client = useClient9({ chainId });
|
|
1294
1391
|
const mutationKey = ["setupSession", client?.chain.id, userClient.account.address];
|
|
1295
1392
|
return useMutation2({
|
|
1296
1393
|
retry: 0,
|
|
@@ -1396,27 +1493,40 @@ function useSetupSession({ userClient }) {
|
|
|
1396
1493
|
});
|
|
1397
1494
|
}
|
|
1398
1495
|
|
|
1399
|
-
// src/onboarding/Session.tsx
|
|
1400
|
-
import { useEffect as useEffect7 } from "react";
|
|
1401
|
-
|
|
1402
1496
|
// src/useSessionClient.ts
|
|
1403
|
-
import { useClient as
|
|
1497
|
+
import { useClient as useClient10 } from "wagmi";
|
|
1404
1498
|
import {
|
|
1405
|
-
queryOptions as
|
|
1406
|
-
useQuery as
|
|
1407
|
-
useQueryClient as
|
|
1499
|
+
queryOptions as queryOptions8,
|
|
1500
|
+
useQuery as useQuery10,
|
|
1501
|
+
useQueryClient as useQueryClient5
|
|
1408
1502
|
} from "@tanstack/react-query";
|
|
1409
1503
|
|
|
1410
1504
|
// src/getSessionClient.ts
|
|
1411
1505
|
import { smartAccountActions } from "permissionless";
|
|
1412
|
-
import { callFrom } from "@latticexyz/world/internal";
|
|
1506
|
+
import { callFrom, sendUserOperationFrom } from "@latticexyz/world/internal";
|
|
1413
1507
|
|
|
1414
1508
|
// src/createBundlerClient.ts
|
|
1415
1509
|
import {
|
|
1416
1510
|
createBundlerClient as viem_createBundlerClient
|
|
1417
1511
|
} from "viem/account-abstraction";
|
|
1418
|
-
|
|
1512
|
+
|
|
1513
|
+
// src/actions/cachedFeesPerGas.ts
|
|
1419
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
|
|
1420
1530
|
function createBundlerClient(config) {
|
|
1421
1531
|
const client = config.client;
|
|
1422
1532
|
if (!client) throw new Error("No `client` provided to `createBundlerClient`.");
|
|
@@ -1441,8 +1551,8 @@ function createFeeEstimator(client) {
|
|
|
1441
1551
|
if (client.chain.id === 31337) {
|
|
1442
1552
|
return async () => ({ maxFeePerGas: 100000n, maxPriorityFeePerGas: 0n });
|
|
1443
1553
|
}
|
|
1444
|
-
if ([690, 17069,
|
|
1445
|
-
return (
|
|
1554
|
+
if ([690, 17069, 695569].includes(client.chain.id)) {
|
|
1555
|
+
return cachedFeesPerGas(client);
|
|
1446
1556
|
}
|
|
1447
1557
|
}
|
|
1448
1558
|
|
|
@@ -1468,6 +1578,12 @@ async function getSessionClient({
|
|
|
1468
1578
|
delegatorAddress: userAddress,
|
|
1469
1579
|
publicClient: client
|
|
1470
1580
|
})
|
|
1581
|
+
).extend(
|
|
1582
|
+
sendUserOperationFrom({
|
|
1583
|
+
worldAddress,
|
|
1584
|
+
delegatorAddress: userAddress,
|
|
1585
|
+
publicClient: client
|
|
1586
|
+
})
|
|
1471
1587
|
).extend(() => ({ userAddress, worldAddress, internal_signer: sessionSigner }));
|
|
1472
1588
|
return sessionClient;
|
|
1473
1589
|
}
|
|
@@ -1482,32 +1598,30 @@ function getSessionClientQueryOptions({
|
|
|
1482
1598
|
userAddress,
|
|
1483
1599
|
worldAddress
|
|
1484
1600
|
}) {
|
|
1485
|
-
|
|
1486
|
-
|
|
1487
|
-
|
|
1488
|
-
|
|
1489
|
-
|
|
1490
|
-
|
|
1491
|
-
|
|
1492
|
-
|
|
1493
|
-
|
|
1494
|
-
|
|
1495
|
-
|
|
1496
|
-
|
|
1497
|
-
|
|
1498
|
-
|
|
1499
|
-
|
|
1500
|
-
|
|
1501
|
-
|
|
1502
|
-
|
|
1503
|
-
} : { queryKey, enabled: false }
|
|
1504
|
-
);
|
|
1601
|
+
return queryOptions8({
|
|
1602
|
+
queryKey: ["getSessionClient", client?.uid, userAddress, worldAddress],
|
|
1603
|
+
queryFn: async () => {
|
|
1604
|
+
if (!userAddress) throw new Error("User not connected.");
|
|
1605
|
+
const { account: sessionAccount, signer: sessionSigner } = await queryClient.fetchQuery(
|
|
1606
|
+
getSessionAccountQueryOptions({ client, userAddress })
|
|
1607
|
+
);
|
|
1608
|
+
return await getSessionClient({
|
|
1609
|
+
sessionAccount,
|
|
1610
|
+
sessionSigner,
|
|
1611
|
+
userAddress,
|
|
1612
|
+
worldAddress
|
|
1613
|
+
});
|
|
1614
|
+
},
|
|
1615
|
+
staleTime: Infinity,
|
|
1616
|
+
// TODO: replace with function to retry only connection errors
|
|
1617
|
+
retry: false
|
|
1618
|
+
});
|
|
1505
1619
|
}
|
|
1506
1620
|
function useSessionClient(userAddress) {
|
|
1507
|
-
const queryClient =
|
|
1621
|
+
const queryClient = useQueryClient5();
|
|
1508
1622
|
const { chainId, worldAddress } = useEntryKitConfig();
|
|
1509
|
-
const client =
|
|
1510
|
-
return
|
|
1623
|
+
const client = useClient10({ chainId });
|
|
1624
|
+
return useQuery10(
|
|
1511
1625
|
getSessionClientQueryOptions({
|
|
1512
1626
|
queryClient,
|
|
1513
1627
|
client,
|
|
@@ -1523,9 +1637,11 @@ function Session({ isActive, isExpanded, userClient, registerSpender, registerDe
|
|
|
1523
1637
|
const sessionClient = useShowQueryError(useSessionClient(userClient.account.address));
|
|
1524
1638
|
const setup = useShowMutationError(useSetupSession({ userClient }));
|
|
1525
1639
|
const hasSession = !registerDelegation && !registerDelegation;
|
|
1640
|
+
const { data: prerequisites } = usePrerequisites(userClient.account.address);
|
|
1641
|
+
const { hasAllowance, hasGasBalance, hasQuarryGasBalance } = prerequisites ?? {};
|
|
1526
1642
|
useEffect7(() => {
|
|
1527
1643
|
const timer = setTimeout(() => {
|
|
1528
|
-
if (isActive && setup.status === "idle" && sessionClient.data && !hasSession) {
|
|
1644
|
+
if (isActive && setup.status === "idle" && sessionClient.data && !hasSession && (hasAllowance || hasGasBalance || hasQuarryGasBalance)) {
|
|
1529
1645
|
setup.mutate({
|
|
1530
1646
|
sessionClient: sessionClient.data,
|
|
1531
1647
|
registerSpender,
|
|
@@ -1534,7 +1650,17 @@ function Session({ isActive, isExpanded, userClient, registerSpender, registerDe
|
|
|
1534
1650
|
}
|
|
1535
1651
|
});
|
|
1536
1652
|
return () => clearTimeout(timer);
|
|
1537
|
-
}, [
|
|
1653
|
+
}, [
|
|
1654
|
+
hasSession,
|
|
1655
|
+
isActive,
|
|
1656
|
+
registerDelegation,
|
|
1657
|
+
registerSpender,
|
|
1658
|
+
sessionClient,
|
|
1659
|
+
setup,
|
|
1660
|
+
hasAllowance,
|
|
1661
|
+
hasGasBalance,
|
|
1662
|
+
hasQuarryGasBalance
|
|
1663
|
+
]);
|
|
1538
1664
|
return /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-4", children: [
|
|
1539
1665
|
/* @__PURE__ */ jsxs13("div", { className: "flex justify-between gap-4", children: [
|
|
1540
1666
|
/* @__PURE__ */ jsxs13("div", { children: [
|
|
@@ -1562,7 +1688,10 @@ function Session({ isActive, isExpanded, userClient, registerSpender, registerDe
|
|
|
1562
1688
|
}
|
|
1563
1689
|
|
|
1564
1690
|
// src/onboarding/GasBalance.tsx
|
|
1565
|
-
import {
|
|
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
|
+
import { useBalance as useBalance2, useWatchBlockNumber } from "wagmi";
|
|
1566
1695
|
|
|
1567
1696
|
// src/data/relayChains.json
|
|
1568
1697
|
var relayChains_default = {
|
|
@@ -1845,13 +1974,13 @@ var relayChains_default = {
|
|
|
1845
1974
|
};
|
|
1846
1975
|
|
|
1847
1976
|
// src/onboarding/useSetBalance.ts
|
|
1848
|
-
import { useQueryClient as
|
|
1977
|
+
import { useQueryClient as useQueryClient6, useMutation as useMutation3 } from "@tanstack/react-query";
|
|
1849
1978
|
import { setBalance as setBalance2 } from "viem/actions";
|
|
1850
|
-
import { useClient as
|
|
1979
|
+
import { useClient as useClient11 } from "wagmi";
|
|
1851
1980
|
function useSetBalance() {
|
|
1852
|
-
const queryClient =
|
|
1981
|
+
const queryClient = useQueryClient6();
|
|
1853
1982
|
const { chainId } = useEntryKitConfig();
|
|
1854
|
-
const client =
|
|
1983
|
+
const client = useClient11({ chainId });
|
|
1855
1984
|
return useMutation3({
|
|
1856
1985
|
retry: 0,
|
|
1857
1986
|
mutationKey: ["setBalance", chainId],
|
|
@@ -1860,6 +1989,7 @@ function useSetBalance() {
|
|
|
1860
1989
|
await setBalance2({ ...client, mode: "anvil" }, params);
|
|
1861
1990
|
await Promise.all([
|
|
1862
1991
|
queryClient.invalidateQueries({ queryKey: ["balance"] }),
|
|
1992
|
+
queryClient.invalidateQueries({ queryKey: ["getFunds"] }),
|
|
1863
1993
|
queryClient.invalidateQueries({ queryKey: ["getPrerequisites"] })
|
|
1864
1994
|
]);
|
|
1865
1995
|
return null;
|
|
@@ -1867,86 +1997,1328 @@ function useSetBalance() {
|
|
|
1867
1997
|
});
|
|
1868
1998
|
}
|
|
1869
1999
|
|
|
1870
|
-
// src/
|
|
1871
|
-
import {
|
|
1872
|
-
function
|
|
1873
|
-
const
|
|
1874
|
-
|
|
1875
|
-
|
|
1876
|
-
|
|
1877
|
-
|
|
1878
|
-
|
|
1879
|
-
|
|
1880
|
-
|
|
1881
|
-
|
|
1882
|
-
|
|
1883
|
-
|
|
1884
|
-
|
|
1885
|
-
|
|
1886
|
-
|
|
1887
|
-
|
|
1888
|
-
|
|
1889
|
-
|
|
1890
|
-
|
|
1891
|
-
|
|
1892
|
-
|
|
1893
|
-
|
|
1894
|
-
|
|
1895
|
-
|
|
2000
|
+
// src/errors/usePrevious.ts
|
|
2001
|
+
import { useEffect as useEffect8, useRef as useRef3 } from "react";
|
|
2002
|
+
function usePrevious(value, initialValue) {
|
|
2003
|
+
const ref = useRef3();
|
|
2004
|
+
useEffect8(() => {
|
|
2005
|
+
ref.current = { value };
|
|
2006
|
+
}, [value]);
|
|
2007
|
+
return ref.current ? ref.current.value : initialValue;
|
|
2008
|
+
}
|
|
2009
|
+
|
|
2010
|
+
// src/icons/IconSVG.tsx
|
|
2011
|
+
import { twMerge as twMerge7 } from "tailwind-merge";
|
|
2012
|
+
import { jsx as jsx16 } from "react/jsx-runtime";
|
|
2013
|
+
function IconSVG({ className, children, ...props }) {
|
|
2014
|
+
return /* @__PURE__ */ jsx16(
|
|
2015
|
+
"svg",
|
|
2016
|
+
{
|
|
2017
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
2018
|
+
viewBox: "0 0 24 24",
|
|
2019
|
+
fill: "currentColor",
|
|
2020
|
+
className: twMerge7("-my-[0.125em] h-[1.25em] w-[1.25em]", className),
|
|
2021
|
+
...props,
|
|
2022
|
+
children
|
|
2023
|
+
}
|
|
2024
|
+
);
|
|
2025
|
+
}
|
|
2026
|
+
|
|
2027
|
+
// src/icons/CopyIcon.tsx
|
|
2028
|
+
import { jsx as jsx17 } from "react/jsx-runtime";
|
|
2029
|
+
function CopyIcon(props) {
|
|
2030
|
+
return /* @__PURE__ */ jsx17(IconSVG, { ...props, children: /* @__PURE__ */ jsx17(
|
|
2031
|
+
"path",
|
|
2032
|
+
{
|
|
2033
|
+
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",
|
|
2034
|
+
fill: "none",
|
|
2035
|
+
stroke: "currentColor",
|
|
2036
|
+
strokeWidth: "2",
|
|
2037
|
+
strokeLinecap: "round",
|
|
2038
|
+
strokeLinejoin: "round"
|
|
2039
|
+
}
|
|
2040
|
+
) });
|
|
2041
|
+
}
|
|
2042
|
+
|
|
2043
|
+
// src/icons/CheckIcon.tsx
|
|
2044
|
+
import { jsx as jsx18 } from "react/jsx-runtime";
|
|
2045
|
+
function CheckIcon(props) {
|
|
2046
|
+
return /* @__PURE__ */ jsx18(IconSVG, { ...props, children: /* @__PURE__ */ jsx18(
|
|
2047
|
+
"path",
|
|
2048
|
+
{
|
|
2049
|
+
d: "M5 13L9 17L19 7",
|
|
2050
|
+
fill: "none",
|
|
2051
|
+
stroke: "currentColor",
|
|
2052
|
+
strokeWidth: "2",
|
|
2053
|
+
strokeLinecap: "round",
|
|
2054
|
+
strokeLinejoin: "round"
|
|
2055
|
+
}
|
|
2056
|
+
) });
|
|
2057
|
+
}
|
|
2058
|
+
|
|
2059
|
+
// src/onboarding/GasBalance.tsx
|
|
2060
|
+
import { Fragment, jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
2061
|
+
function GasBalance({ isActive, isExpanded, sessionAddress }) {
|
|
2062
|
+
const queryClient = useQueryClient7();
|
|
2063
|
+
const { chain } = useEntryKitConfig();
|
|
2064
|
+
const [copied, setCopied] = useState2(false);
|
|
2065
|
+
const balance = useShowQueryError(useBalance2({ chainId: chain.id, address: sessionAddress }));
|
|
2066
|
+
const prevBalance = usePrevious(balance.data);
|
|
2067
|
+
useWatchBlockNumber({ onBlockNumber: () => balance.refetch() });
|
|
2068
|
+
const setBalance3 = useShowMutationError(useSetBalance());
|
|
2069
|
+
const relayChain = relayChains_default[chain.id];
|
|
2070
|
+
const handleCopy = () => {
|
|
2071
|
+
navigator.clipboard.writeText(sessionAddress);
|
|
2072
|
+
setCopied(true);
|
|
2073
|
+
setTimeout(() => setCopied(false), 2e3);
|
|
2074
|
+
};
|
|
2075
|
+
useEffect9(() => {
|
|
2076
|
+
if (balance.data != null && prevBalance?.value === 0n && balance.data.value > 0n) {
|
|
2077
|
+
queryClient.invalidateQueries({ queryKey: ["getFunds"] });
|
|
2078
|
+
queryClient.invalidateQueries({ queryKey: ["getPrerequisites"] });
|
|
2079
|
+
}
|
|
2080
|
+
}, [balance.data, prevBalance, setBalance3, sessionAddress, queryClient]);
|
|
2081
|
+
return /* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-4", children: [
|
|
2082
|
+
/* @__PURE__ */ jsxs14("div", { className: "flex justify-between gap-4", children: [
|
|
2083
|
+
/* @__PURE__ */ jsxs14("div", { children: [
|
|
2084
|
+
/* @__PURE__ */ jsx19("div", { children: "Gas balance" }),
|
|
2085
|
+
/* @__PURE__ */ jsx19("div", { className: "font-mono text-white", children: balance.data != null ? /* @__PURE__ */ jsx19(Balance, { wei: balance.data.value }) : /* @__PURE__ */ jsx19(PendingIcon, { className: "text-sm" }) })
|
|
2086
|
+
] }),
|
|
2087
|
+
chain.id === 31337 ? /* @__PURE__ */ jsx19(
|
|
2088
|
+
Button,
|
|
2089
|
+
{
|
|
2090
|
+
variant: isActive ? "primary" : "tertiary",
|
|
2091
|
+
className: "flex-shrink-0 text-sm p-1 w-28",
|
|
2092
|
+
autoFocus: isActive || isExpanded,
|
|
2093
|
+
pending: balance.status === "pending" || setBalance3.status === "pending",
|
|
2094
|
+
onClick: () => setBalance3.mutate({
|
|
2095
|
+
address: sessionAddress,
|
|
2096
|
+
value: parseEther4("0.01") + (balance.data?.value ?? 0n)
|
|
2097
|
+
}),
|
|
2098
|
+
children: "Top up"
|
|
2099
|
+
}
|
|
2100
|
+
) : relayChain != null ? (
|
|
2101
|
+
// TODO: convert this to a <ButtonLink>
|
|
2102
|
+
/* @__PURE__ */ jsx19(
|
|
2103
|
+
"a",
|
|
2104
|
+
{
|
|
2105
|
+
href: `${relayChain.bridgeUrl}?${new URLSearchParams({ toAddress: sessionAddress, amount: "0.01" })}`,
|
|
2106
|
+
target: "_blank",
|
|
2107
|
+
rel: "noopener noreferrer",
|
|
2108
|
+
children: /* @__PURE__ */ jsx19(
|
|
2109
|
+
Button,
|
|
2110
|
+
{
|
|
2111
|
+
variant: isActive ? "primary" : "tertiary",
|
|
2112
|
+
className: "flex-shrink-0 text-sm p-1 w-28",
|
|
2113
|
+
autoFocus: isActive || isExpanded,
|
|
2114
|
+
pending: balance.status === "pending",
|
|
2115
|
+
children: "Top up"
|
|
2116
|
+
}
|
|
2117
|
+
)
|
|
2118
|
+
}
|
|
2119
|
+
)
|
|
2120
|
+
) : null
|
|
2121
|
+
] }),
|
|
2122
|
+
isExpanded ? /* @__PURE__ */ jsxs14(Fragment, { children: [
|
|
2123
|
+
/* @__PURE__ */ jsx19("p", { className: "text-sm", children: "Your session's gas balance is used to pay for onchain computation." }),
|
|
2124
|
+
/* @__PURE__ */ jsxs14("p", { className: "text-sm", children: [
|
|
2125
|
+
"Send funds to",
|
|
2126
|
+
" ",
|
|
2127
|
+
/* @__PURE__ */ jsxs14(
|
|
2128
|
+
"span",
|
|
2129
|
+
{
|
|
2130
|
+
className: "inline-flex items-center gap-1 font-mono text-white cursor-pointer hover:text-white/80 transition-colors",
|
|
2131
|
+
onClick: handleCopy,
|
|
2132
|
+
title: "Click to copy",
|
|
2133
|
+
children: [
|
|
2134
|
+
/* @__PURE__ */ jsx19(TruncatedHex, { hex: sessionAddress }),
|
|
2135
|
+
" ",
|
|
2136
|
+
copied ? /* @__PURE__ */ jsx19(CheckIcon, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ jsx19(CopyIcon, { className: "w-3.5 h-3.5" })
|
|
2137
|
+
]
|
|
2138
|
+
}
|
|
2139
|
+
),
|
|
2140
|
+
" ",
|
|
2141
|
+
"on ",
|
|
2142
|
+
chain.name,
|
|
2143
|
+
" to top up your session balance."
|
|
2144
|
+
] })
|
|
2145
|
+
] }) : null
|
|
2146
|
+
] });
|
|
2147
|
+
}
|
|
2148
|
+
|
|
2149
|
+
// src/onboarding/quarry/GasBalance.tsx
|
|
2150
|
+
import { useEffect as useEffect14 } from "react";
|
|
2151
|
+
import { useQueryClient as useQueryClient10 } from "@tanstack/react-query";
|
|
2152
|
+
|
|
2153
|
+
// src/onboarding/deposit/DepositFormContainer.tsx
|
|
2154
|
+
import { useState as useState4 } from "react";
|
|
2155
|
+
import { useChains as useChains4, useChainId } from "wagmi";
|
|
2156
|
+
|
|
2157
|
+
// src/onboarding/deposit/DepositViaTransferForm.tsx
|
|
2158
|
+
import { useAccount as useAccount4, useWriteContract, usePrepareTransactionRequest, usePublicClient } from "wagmi";
|
|
2159
|
+
import { encodeFunctionData as encodeFunctionData2 } from "viem";
|
|
2160
|
+
import { useMutation as useMutation4, useQuery as useQuery13 } from "@tanstack/react-query";
|
|
2161
|
+
|
|
2162
|
+
// src/onboarding/deposit/DepositForm.tsx
|
|
2163
|
+
import { useEffect as useEffect11, useRef as useRef4 } from "react";
|
|
2164
|
+
import { useAccount as useAccount3, useBalance as useBalance4, useWatchBlockNumber as useWatchBlockNumber2 } from "wagmi";
|
|
2165
|
+
import { useIsMounted } from "usehooks-ts";
|
|
2166
|
+
import { twMerge as twMerge15 } from "tailwind-merge";
|
|
2167
|
+
|
|
2168
|
+
// src/onboarding/deposit/ChainSelect.tsx
|
|
2169
|
+
import { useEffect as useEffect10, useMemo as useMemo2 } from "react";
|
|
2170
|
+
import { useSwitchChain } from "wagmi";
|
|
2171
|
+
import { twMerge as twMerge12 } from "tailwind-merge";
|
|
2172
|
+
import * as Select from "@radix-ui/react-select";
|
|
2173
|
+
|
|
2174
|
+
// src/icons/ChevronUpIcon.tsx
|
|
2175
|
+
import { jsx as jsx20 } from "react/jsx-runtime";
|
|
2176
|
+
function ChevronUpIcon(props) {
|
|
2177
|
+
return /* @__PURE__ */ jsx20(IconSVG, { viewBox: "0 0 20 20", ...props, children: /* @__PURE__ */ jsx20(
|
|
2178
|
+
"path",
|
|
2179
|
+
{
|
|
2180
|
+
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",
|
|
2181
|
+
fillRule: "evenodd",
|
|
2182
|
+
clipRule: "evenodd"
|
|
2183
|
+
}
|
|
2184
|
+
) });
|
|
2185
|
+
}
|
|
2186
|
+
|
|
2187
|
+
// src/icons/ChevronDownIcon.tsx
|
|
2188
|
+
import { jsx as jsx21 } from "react/jsx-runtime";
|
|
2189
|
+
function ChevronDownIcon(props) {
|
|
2190
|
+
return /* @__PURE__ */ jsx21(IconSVG, { viewBox: "0 0 20 20", ...props, children: /* @__PURE__ */ jsx21(
|
|
2191
|
+
"path",
|
|
2192
|
+
{
|
|
2193
|
+
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",
|
|
2194
|
+
fillRule: "evenodd",
|
|
2195
|
+
clipRule: "evenodd"
|
|
2196
|
+
}
|
|
2197
|
+
) });
|
|
2198
|
+
}
|
|
2199
|
+
|
|
2200
|
+
// src/ui/Slot.tsx
|
|
2201
|
+
import { isValidElement, cloneElement, Children } from "react";
|
|
2202
|
+
import { twMerge as twMerge8 } from "tailwind-merge";
|
|
2203
|
+
function Slot({
|
|
2204
|
+
children,
|
|
2205
|
+
...props
|
|
2206
|
+
}) {
|
|
2207
|
+
if (isValidElement(children)) {
|
|
2208
|
+
return cloneElement(children, {
|
|
2209
|
+
...props,
|
|
2210
|
+
...children.props,
|
|
2211
|
+
style: {
|
|
2212
|
+
...props.style,
|
|
2213
|
+
...children.props.style
|
|
2214
|
+
},
|
|
2215
|
+
className: twMerge8(props.className, children.props.className)
|
|
2216
|
+
});
|
|
2217
|
+
}
|
|
2218
|
+
if (Children.count(children) > 1) {
|
|
2219
|
+
Children.only(null);
|
|
2220
|
+
}
|
|
2221
|
+
return null;
|
|
2222
|
+
}
|
|
2223
|
+
|
|
2224
|
+
// src/ui/Input.tsx
|
|
2225
|
+
import { twMerge as twMerge9 } from "tailwind-merge";
|
|
2226
|
+
import { jsx as jsx22 } from "react/jsx-runtime";
|
|
2227
|
+
function Input({ asChild, className, ...props }) {
|
|
2228
|
+
const Child = asChild ? Slot : "input";
|
|
2229
|
+
return /* @__PURE__ */ jsx22(
|
|
2230
|
+
Child,
|
|
2231
|
+
{
|
|
2232
|
+
className: twMerge9(
|
|
2233
|
+
"p-2.5 gap-1 border text-lg font-medium transition",
|
|
2234
|
+
"outline-none ring-2 ring-transparent focus-within:ring-orange-500 focus-within:border-transparent",
|
|
2235
|
+
"bg-neutral-900 border-neutral-700 text-white placeholder:text-neutral-500",
|
|
2236
|
+
className
|
|
2237
|
+
),
|
|
2238
|
+
...props
|
|
2239
|
+
}
|
|
2240
|
+
);
|
|
2241
|
+
}
|
|
2242
|
+
|
|
2243
|
+
// src/onboarding/deposit/ChainIcon.tsx
|
|
2244
|
+
import { twMerge as twMerge11 } from "tailwind-merge";
|
|
2245
|
+
|
|
2246
|
+
// src/onboarding/deposit/PreloadedImage.tsx
|
|
2247
|
+
import { twMerge as twMerge10 } from "tailwind-merge";
|
|
2248
|
+
import { jsx as jsx23 } from "react/jsx-runtime";
|
|
2249
|
+
function PreloadedImage({ url, fallback: fallback2, className }) {
|
|
2250
|
+
const { isSuccess, isLoading } = usePreloadImage(url);
|
|
2251
|
+
return /* @__PURE__ */ jsx23("span", { className: twMerge10("inline-flex w-full h-full items-center justify-center overflow-clip", className), children: !isLoading ? isSuccess ? /* @__PURE__ */ jsx23("img", { src: url, className: "w-full h-full object-cover" }) : fallback2 : null });
|
|
2252
|
+
}
|
|
2253
|
+
|
|
2254
|
+
// src/onboarding/deposit/ChainIcon.tsx
|
|
2255
|
+
import { forwardRef as forwardRef2 } from "react";
|
|
2256
|
+
import { jsx as jsx24 } from "react/jsx-runtime";
|
|
2257
|
+
var ChainIcon = forwardRef2(function ChainIcon2({ name, url, className }, forwardedRef) {
|
|
2258
|
+
return /* @__PURE__ */ jsx24(
|
|
2259
|
+
"span",
|
|
2260
|
+
{
|
|
2261
|
+
ref: forwardedRef,
|
|
2262
|
+
className: twMerge11("flex-shrink-0 inline-flex w-6 aspect-square rounded-full overflow-clip", className),
|
|
2263
|
+
children: url ? /* @__PURE__ */ jsx24(PreloadedImage, { url }) : (
|
|
2264
|
+
// TODO: better placeholder
|
|
2265
|
+
/* @__PURE__ */ jsx24(
|
|
2266
|
+
"span",
|
|
2267
|
+
{
|
|
2268
|
+
className: twMerge11(
|
|
2269
|
+
"inline-flex items-center justify-center w-full h-full rounded-full",
|
|
2270
|
+
"border-2 border-dashed border-white/50 opacity-50"
|
|
2271
|
+
),
|
|
2272
|
+
children: name?.slice(0, 1)
|
|
2273
|
+
}
|
|
2274
|
+
)
|
|
2275
|
+
)
|
|
2276
|
+
}
|
|
2277
|
+
);
|
|
2278
|
+
});
|
|
2279
|
+
|
|
2280
|
+
// src/onboarding/deposit/useRelay.ts
|
|
2281
|
+
import {
|
|
2282
|
+
MAINNET_RELAY_API,
|
|
2283
|
+
TESTNET_RELAY_API,
|
|
2284
|
+
fetchChainConfigs,
|
|
2285
|
+
createClient as createClient2,
|
|
2286
|
+
LogLevel
|
|
2287
|
+
} from "@reservoir0x/relay-sdk";
|
|
2288
|
+
import { useQuery as useQuery11 } from "@tanstack/react-query";
|
|
2289
|
+
function useRelay() {
|
|
2290
|
+
const { chain } = useEntryKitConfig();
|
|
2291
|
+
const appOrigin = location.host;
|
|
2292
|
+
const baseApiUrl = chain.testnet ? TESTNET_RELAY_API : MAINNET_RELAY_API;
|
|
2293
|
+
return useQuery11({
|
|
2294
|
+
queryKey: ["relayChains", baseApiUrl, appOrigin],
|
|
2295
|
+
queryFn: async () => {
|
|
2296
|
+
debug("fetching relay chains from", baseApiUrl);
|
|
2297
|
+
const chains = await fetchChainConfigs(baseApiUrl);
|
|
2298
|
+
debug("got relay chains", chains);
|
|
2299
|
+
const client = createClient2({
|
|
2300
|
+
baseApiUrl,
|
|
2301
|
+
source: appOrigin,
|
|
2302
|
+
chains,
|
|
2303
|
+
logLevel: LogLevel.Verbose
|
|
2304
|
+
});
|
|
2305
|
+
return { client, chains };
|
|
2306
|
+
},
|
|
2307
|
+
refetchOnMount: false,
|
|
2308
|
+
refetchOnReconnect: false,
|
|
2309
|
+
refetchOnWindowFocus: false,
|
|
2310
|
+
staleTime: Infinity
|
|
2311
|
+
});
|
|
2312
|
+
}
|
|
2313
|
+
|
|
2314
|
+
// src/onboarding/deposit/useChainBalances.ts
|
|
2315
|
+
import { useAccount, useConfig as useWagmiConfig } from "wagmi";
|
|
2316
|
+
import { getBalance as getBalance2 } from "wagmi/actions";
|
|
2317
|
+
import { useQuery as useQuery12, skipToken as skipToken6 } from "@tanstack/react-query";
|
|
2318
|
+
import { isNotNull } from "@latticexyz/common/utils";
|
|
2319
|
+
function useChainBalances({ chains }) {
|
|
2320
|
+
const { address: userAddress } = useAccount();
|
|
2321
|
+
const wagmiConfig = useWagmiConfig();
|
|
2322
|
+
const chainIds = chains.map((chain) => chain.id);
|
|
2323
|
+
return useQuery12({
|
|
2324
|
+
queryKey: ["chainBalances", chainIds, userAddress],
|
|
2325
|
+
queryFn: userAddress ? async () => {
|
|
2326
|
+
const chainBalances = await Promise.allSettled(
|
|
2327
|
+
chains.map(async (chain) => {
|
|
2328
|
+
const balance = await getBalance2(wagmiConfig, { chainId: chain.id, address: userAddress });
|
|
2329
|
+
return { chain, balance };
|
|
2330
|
+
})
|
|
2331
|
+
);
|
|
2332
|
+
return chainBalances.map((result) => result.status === "fulfilled" ? result.value : null).filter(isNotNull);
|
|
2333
|
+
} : skipToken6,
|
|
2334
|
+
refetchInterval: 1e3 * 60,
|
|
2335
|
+
retry: 1
|
|
2336
|
+
});
|
|
2337
|
+
}
|
|
2338
|
+
|
|
2339
|
+
// src/onboarding/deposit/ChainSelect.tsx
|
|
2340
|
+
import { Fragment as Fragment2, jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
2341
|
+
function ChainSelect({ value, onChange }) {
|
|
2342
|
+
const theme = useTheme();
|
|
2343
|
+
const { frame } = useFrame();
|
|
2344
|
+
const { chains, switchChain } = useSwitchChain();
|
|
2345
|
+
const relay = useRelay();
|
|
2346
|
+
const relayChains = relay.data?.chains;
|
|
2347
|
+
const sourceChains = useMemo2(() => {
|
|
2348
|
+
return chains.map((sourceChain) => {
|
|
2349
|
+
const relayChain = relayChains?.find((c) => c.id === sourceChain.id);
|
|
2350
|
+
return {
|
|
2351
|
+
...sourceChain,
|
|
2352
|
+
relayChain
|
|
2353
|
+
};
|
|
2354
|
+
}).filter((c) => c.relayChain);
|
|
2355
|
+
}, [chains, relayChains]);
|
|
2356
|
+
const selectedChain = sourceChains.find((c) => c.id === value);
|
|
2357
|
+
const { data: chainsBalances, isLoading } = useShowQueryError(useChainBalances({ chains: sourceChains }));
|
|
2358
|
+
const renderedChains = useMemo2(() => {
|
|
2359
|
+
if (!chainsBalances) return [];
|
|
2360
|
+
const chainsWithBalance = chainsBalances.filter(({ balance }) => balance.value > 0n).map(({ chain, balance }) => ({ chain, balance: balance.value }));
|
|
2361
|
+
return chainsWithBalance.length > 0 ? chainsWithBalance : sourceChains.map((chain) => ({ chain, balance: 0n }));
|
|
2362
|
+
}, [chainsBalances, sourceChains]);
|
|
2363
|
+
useEffect10(() => {
|
|
2364
|
+
if (renderedChains.length > 0 && (!selectedChain || !renderedChains.find((c) => c.chain.id === selectedChain?.id))) {
|
|
2365
|
+
const defaultChain = renderedChains[0].chain;
|
|
2366
|
+
onChange(defaultChain.id);
|
|
2367
|
+
switchChain({ chainId: defaultChain.id });
|
|
2368
|
+
}
|
|
2369
|
+
}, [value, selectedChain, renderedChains, onChange, switchChain]);
|
|
2370
|
+
return /* @__PURE__ */ jsxs15(
|
|
2371
|
+
Select.Root,
|
|
2372
|
+
{
|
|
2373
|
+
value: value.toString(),
|
|
2374
|
+
onValueChange: (value2) => {
|
|
2375
|
+
if (value2) {
|
|
2376
|
+
const chain = renderedChains.find((item) => item.chain.id.toString() === value2)?.chain;
|
|
2377
|
+
if (!chain) throw new Error(`Unknown chain selected: ${value2}`);
|
|
2378
|
+
onChange(chain.id);
|
|
2379
|
+
}
|
|
2380
|
+
},
|
|
2381
|
+
children: [
|
|
2382
|
+
/* @__PURE__ */ jsx25(Input, { asChild: true, children: /* @__PURE__ */ jsxs15(Select.Trigger, { className: "group inline-flex items-center justify-center", children: [
|
|
2383
|
+
/* @__PURE__ */ jsx25(Select.Value, { asChild: true, children: /* @__PURE__ */ jsx25(
|
|
2384
|
+
ChainIcon,
|
|
2385
|
+
{
|
|
2386
|
+
id: selectedChain?.id,
|
|
2387
|
+
name: selectedChain?.name,
|
|
2388
|
+
url: selectedChain?.relayChain?.icon?.[theme],
|
|
2389
|
+
className: "w-8"
|
|
2390
|
+
}
|
|
2391
|
+
) }),
|
|
2392
|
+
/* @__PURE__ */ jsx25(Select.Icon, { asChild: true, children: /* @__PURE__ */ jsxs15(Fragment2, { children: [
|
|
2393
|
+
/* @__PURE__ */ jsx25(ChevronDownIcon, { className: "text-sm -mr-1 group-aria-expanded:hidden" }),
|
|
2394
|
+
/* @__PURE__ */ jsx25(ChevronUpIcon, { className: "text-sm -mr-1 hidden group-aria-expanded:inline" })
|
|
2395
|
+
] }) })
|
|
2396
|
+
] }) }),
|
|
2397
|
+
frame.contentDocument ? /* @__PURE__ */ jsx25(Select.Portal, { container: frame.contentDocument.body, children: /* @__PURE__ */ jsx25(
|
|
2398
|
+
Select.Content,
|
|
2399
|
+
{
|
|
2400
|
+
position: "popper",
|
|
2401
|
+
className: "w-[352px] max-h-[230px] overflow-y-auto mt-1 animate-in fade-in slide-in-from-top-2",
|
|
2402
|
+
children: /* @__PURE__ */ jsx25(Select.Viewport, { children: /* @__PURE__ */ jsx25(
|
|
2403
|
+
Select.Group,
|
|
2404
|
+
{
|
|
2405
|
+
className: twMerge12(
|
|
2406
|
+
"flex flex-col border divide-y",
|
|
2407
|
+
"bg-neutral-800 text-neutral-300 border-neutral-700 divide-neutral-700"
|
|
2408
|
+
),
|
|
2409
|
+
children: isLoading ? /* @__PURE__ */ jsx25("div", { className: "flex items-center justify-center p-4", children: /* @__PURE__ */ jsx25(PendingIcon, { className: "h-6 w-6 animate-spin text-gray-400" }) }) : renderedChains.map(({ chain, balance }) => {
|
|
2410
|
+
return /* @__PURE__ */ jsxs15(
|
|
2411
|
+
Select.Item,
|
|
2412
|
+
{
|
|
2413
|
+
value: chain.id.toString(),
|
|
2414
|
+
className: twMerge12(
|
|
2415
|
+
"group flex p-2.5 gap-2.5 items-center cursor-pointer outline-none",
|
|
2416
|
+
"text-white focus:bg-neutral-700 data-[state=checked]:bg-neutral-900"
|
|
2417
|
+
),
|
|
2418
|
+
children: [
|
|
2419
|
+
/* @__PURE__ */ jsx25(ChainIcon, { id: chain.id, name: chain.name, url: chain.relayChain?.icon?.[theme] }),
|
|
2420
|
+
/* @__PURE__ */ jsx25("span", { className: "flex-grow flex-shrink-0", children: chain.name }),
|
|
2421
|
+
/* @__PURE__ */ jsx25("span", { className: "flex-shrink-0 font-mono text-sm text-neutral-400", children: /* @__PURE__ */ jsx25(Balance, { wei: balance }) })
|
|
2422
|
+
]
|
|
2423
|
+
},
|
|
2424
|
+
chain.id
|
|
2425
|
+
);
|
|
2426
|
+
})
|
|
2427
|
+
}
|
|
2428
|
+
) })
|
|
2429
|
+
}
|
|
2430
|
+
) }) : null
|
|
2431
|
+
]
|
|
2432
|
+
}
|
|
2433
|
+
);
|
|
2434
|
+
}
|
|
2435
|
+
|
|
2436
|
+
// src/onboarding/deposit/AmountInput.tsx
|
|
2437
|
+
import { formatEther as formatEther3, parseEther as parseEther5 } from "viem";
|
|
2438
|
+
import { twMerge as twMerge13 } from "tailwind-merge";
|
|
2439
|
+
import { forwardRef as forwardRef3 } from "react";
|
|
2440
|
+
import { jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
2441
|
+
var AmountInput = forwardRef3(function AmountInput2({ initialAmount, onChange }, forwardedRef) {
|
|
2442
|
+
return /* @__PURE__ */ jsx26(Input, { asChild: true, className: "w-full cursor-text flex items-center", children: /* @__PURE__ */ jsxs16("label", { children: [
|
|
2443
|
+
/* @__PURE__ */ jsx26(
|
|
2444
|
+
"input",
|
|
2445
|
+
{
|
|
2446
|
+
ref: forwardedRef,
|
|
2447
|
+
className: twMerge13("peer flex-grow outline-none bg-transparent", "placeholder:text-neutral-500"),
|
|
2448
|
+
placeholder: "0.005",
|
|
2449
|
+
required: true,
|
|
2450
|
+
autoFocus: true,
|
|
2451
|
+
defaultValue: initialAmount == null ? "" : formatEther3(initialAmount),
|
|
2452
|
+
onChange: (event) => {
|
|
2453
|
+
const input = event.currentTarget;
|
|
2454
|
+
if (input.value.trim() === "") {
|
|
2455
|
+
input.setCustomValidity("");
|
|
2456
|
+
onChange(void 0);
|
|
2457
|
+
return;
|
|
2458
|
+
}
|
|
2459
|
+
const value = input.value.trim().replace(/\.$/, ".0");
|
|
2460
|
+
if (!/^\d*(\.\d+)?$/.test(value)) {
|
|
2461
|
+
return input.setCustomValidity("Invalid amount.");
|
|
2462
|
+
}
|
|
2463
|
+
input.setCustomValidity("");
|
|
2464
|
+
onChange(parseEther5(value));
|
|
2465
|
+
}
|
|
2466
|
+
}
|
|
2467
|
+
),
|
|
2468
|
+
/* @__PURE__ */ jsx26("span", { className: twMerge13("flex-shrink-0 text-2xl", "peer-placeholder-shown:text-neutral-500"), children: /* @__PURE__ */ jsx26(EthIcon, {}) })
|
|
2469
|
+
] }) });
|
|
2470
|
+
});
|
|
2471
|
+
|
|
2472
|
+
// src/onboarding/deposit/SubmitButton.tsx
|
|
2473
|
+
import { useAccount as useAccount2, useBalance as useBalance3, useSwitchChain as useSwitchChain2 } from "wagmi";
|
|
2474
|
+
import { twMerge as twMerge14 } from "tailwind-merge";
|
|
2475
|
+
import { parseEther as parseEther6 } from "viem";
|
|
2476
|
+
import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
2477
|
+
var MAX_DEPOSIT_AMOUNT = "0.1";
|
|
2478
|
+
function SubmitButton({ amount, chainId, className, ...buttonProps }) {
|
|
2479
|
+
const { chainId: userChainId, address: userAddress } = useAccount2();
|
|
2480
|
+
const { data: userBalance } = useBalance3({ address: userAddress });
|
|
2481
|
+
const shouldSwitchChain = chainId != null && chainId !== userChainId;
|
|
2482
|
+
const switchChain = useSwitchChain2();
|
|
2483
|
+
if (shouldSwitchChain) {
|
|
2484
|
+
return /* @__PURE__ */ jsx27(
|
|
2485
|
+
Button,
|
|
2486
|
+
{
|
|
2487
|
+
type: "button",
|
|
2488
|
+
variant: "primary",
|
|
2489
|
+
className: twMerge14("w-full", className),
|
|
2490
|
+
pending: switchChain.isPending,
|
|
2491
|
+
onClick: () => switchChain.switchChain({ chainId }),
|
|
2492
|
+
children: "Switch chain"
|
|
2493
|
+
}
|
|
2494
|
+
);
|
|
2495
|
+
} else if (amount) {
|
|
2496
|
+
if (amount > parseEther6(MAX_DEPOSIT_AMOUNT)) {
|
|
2497
|
+
return /* @__PURE__ */ jsxs17(Button, { type: "button", className: twMerge14("w-full", className), disabled: true, children: [
|
|
2498
|
+
"Max amount is ",
|
|
2499
|
+
MAX_DEPOSIT_AMOUNT,
|
|
2500
|
+
" ETH"
|
|
2501
|
+
] });
|
|
2502
|
+
} else if (amount > (userBalance?.value ?? 0n)) {
|
|
2503
|
+
return /* @__PURE__ */ jsx27(Button, { type: "button", className: twMerge14("w-full", className), disabled: true, children: "Insufficient balance" });
|
|
2504
|
+
}
|
|
2505
|
+
}
|
|
2506
|
+
return /* @__PURE__ */ jsx27(Button, { type: "submit", className: twMerge14("w-full", className), ...buttonProps });
|
|
2507
|
+
}
|
|
2508
|
+
|
|
2509
|
+
// src/icons/WarningIcon.tsx
|
|
2510
|
+
import { jsx as jsx28 } from "react/jsx-runtime";
|
|
2511
|
+
function WarningIcon(props) {
|
|
2512
|
+
return /* @__PURE__ */ jsx28(IconSVG, { fill: "none", ...props, children: /* @__PURE__ */ jsx28(
|
|
2513
|
+
"path",
|
|
2514
|
+
{
|
|
2515
|
+
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",
|
|
2516
|
+
stroke: "currentColor",
|
|
2517
|
+
strokeWidth: "2",
|
|
2518
|
+
strokeLinecap: "round",
|
|
2519
|
+
strokeLinejoin: "round"
|
|
2520
|
+
}
|
|
2521
|
+
) });
|
|
2522
|
+
}
|
|
2523
|
+
|
|
2524
|
+
// src/formatGas.ts
|
|
2525
|
+
import { formatGwei } from "viem";
|
|
2526
|
+
function formatGas(wei) {
|
|
2527
|
+
const formatted = formatGwei(wei);
|
|
2528
|
+
const magnitude = Math.floor(parseFloat(formatted)).toString().length;
|
|
2529
|
+
return parseFloat(formatted).toLocaleString("en-US", { maximumFractionDigits: Math.max(0, 6 - magnitude) });
|
|
2530
|
+
}
|
|
2531
|
+
|
|
2532
|
+
// src/onboarding/deposit/DepositForm.tsx
|
|
2533
|
+
import { Fragment as Fragment3, jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
2534
|
+
function DepositForm({
|
|
2535
|
+
sourceChain,
|
|
2536
|
+
setSourceChainId,
|
|
2537
|
+
amount,
|
|
2538
|
+
setAmount,
|
|
2539
|
+
estimatedFee,
|
|
2540
|
+
estimatedTime,
|
|
2541
|
+
onSubmit,
|
|
2542
|
+
submitButton
|
|
2543
|
+
}) {
|
|
2544
|
+
const amountInputRef = useRef4(null);
|
|
2545
|
+
const isMounted = useIsMounted();
|
|
2546
|
+
const { address: userAddress, chainId: userChainId } = useAccount3();
|
|
2547
|
+
const balance = useShowQueryError(useBalance4({ chainId: sourceChain.id, address: userAddress }));
|
|
2548
|
+
const quarryBalance = useShowQueryError(useBalance(userAddress));
|
|
2549
|
+
useWatchBlockNumber2({
|
|
2550
|
+
onBlockNumber: () => {
|
|
2551
|
+
balance.refetch();
|
|
2552
|
+
quarryBalance.refetch();
|
|
2553
|
+
}
|
|
2554
|
+
});
|
|
2555
|
+
const minimumBalance = amount != null ? amount + (estimatedFee?.fee ?? 0n) : void 0;
|
|
2556
|
+
const hasMinimumBalance = balance.data != null ? balance.data.value > (minimumBalance ?? 0n) : void 0;
|
|
2557
|
+
useEffect11(() => {
|
|
2558
|
+
amountInputRef.current?.focus();
|
|
2559
|
+
}, [userChainId]);
|
|
2560
|
+
return /* @__PURE__ */ jsxs18(
|
|
2561
|
+
"form",
|
|
2562
|
+
{
|
|
2563
|
+
className: "flex flex-col gap-5",
|
|
2564
|
+
onSubmit: async (event) => {
|
|
2565
|
+
event.preventDefault();
|
|
2566
|
+
try {
|
|
2567
|
+
await onSubmit();
|
|
2568
|
+
if (isMounted()) {
|
|
2569
|
+
setAmount(void 0);
|
|
2570
|
+
if (amountInputRef.current) {
|
|
2571
|
+
amountInputRef.current.value = "";
|
|
2572
|
+
}
|
|
2573
|
+
}
|
|
2574
|
+
} catch (error2) {
|
|
2575
|
+
console.error("Error during deposit", error2);
|
|
2576
|
+
} finally {
|
|
2577
|
+
amountInputRef.current?.focus();
|
|
2578
|
+
}
|
|
2579
|
+
},
|
|
2580
|
+
children: [
|
|
2581
|
+
/* @__PURE__ */ jsxs18("div", { className: "flex gap-2", children: [
|
|
2582
|
+
/* @__PURE__ */ jsx29(ChainSelect, { value: sourceChain.id, onChange: setSourceChainId }),
|
|
2583
|
+
/* @__PURE__ */ jsx29(AmountInput, { ref: amountInputRef, initialAmount: amount, onChange: setAmount })
|
|
2584
|
+
] }),
|
|
2585
|
+
/* @__PURE__ */ jsxs18(
|
|
2586
|
+
"dl",
|
|
2587
|
+
{
|
|
2588
|
+
className: twMerge15(
|
|
2589
|
+
"grid grid-cols-2 divide-y text-sm leading-loose [&_>_:is(dt,dd)]:px-1 [&_>_dd]:text-right",
|
|
2590
|
+
"divide-neutral-700 text-neutral-400"
|
|
2591
|
+
),
|
|
2592
|
+
children: [
|
|
2593
|
+
/* @__PURE__ */ jsx29("dt", { children: "Available to deposit" }),
|
|
2594
|
+
/* @__PURE__ */ jsx29("dd", { children: balance.isSuccess ? /* @__PURE__ */ jsx29(Balance, { wei: balance.data.value }) : balance.isError ? /* @__PURE__ */ jsx29("span", { title: String(balance.error), children: /* @__PURE__ */ jsx29(WarningIcon, { className: "inline-block text-amber-500" }) }) : balance.isLoading ? /* @__PURE__ */ jsx29(PendingIcon, { className: "inline-block text-xs" }) : null }),
|
|
2595
|
+
/* @__PURE__ */ jsx29("dt", { children: "Gas balance after deposit" }),
|
|
2596
|
+
/* @__PURE__ */ jsx29("dd", { children: /* @__PURE__ */ jsx29(Balance, { wei: (quarryBalance.data ?? 0n) + (amount ?? 0n) }) }),
|
|
2597
|
+
/* @__PURE__ */ jsx29("dt", { children: "Estimated fee" }),
|
|
2598
|
+
/* @__PURE__ */ jsx29("dd", { children: estimatedFee.fee ? /* @__PURE__ */ jsxs18(Fragment3, { children: [
|
|
2599
|
+
formatGas(estimatedFee.fee),
|
|
2600
|
+
" gwei"
|
|
2601
|
+
] }) : estimatedFee.error ? /* @__PURE__ */ jsx29("span", { title: String(estimatedFee.error), children: /* @__PURE__ */ jsx29(WarningIcon, { className: "inline-block text-amber-500" }) }) : estimatedFee.isLoading ? /* @__PURE__ */ jsx29(PendingIcon, { className: "inline-block text-xs" }) : null }),
|
|
2602
|
+
/* @__PURE__ */ jsx29("dt", { children: "Time to deposit" }),
|
|
2603
|
+
/* @__PURE__ */ jsx29("dd", { children: estimatedTime })
|
|
2604
|
+
]
|
|
2605
|
+
}
|
|
2606
|
+
),
|
|
2607
|
+
hasMinimumBalance ? submitButton : /* @__PURE__ */ jsx29(SubmitButton, { disabled: true, children: "Not enough funds" })
|
|
2608
|
+
]
|
|
2609
|
+
}
|
|
2610
|
+
);
|
|
2611
|
+
}
|
|
2612
|
+
|
|
2613
|
+
// src/onboarding/deposit/useDeposits.ts
|
|
2614
|
+
import { createStore as createStore4 } from "zustand/vanilla";
|
|
2615
|
+
import { useStore as useStore2 } from "zustand";
|
|
2616
|
+
import { useCallback as useCallback2, useMemo as useMemo3 } from "react";
|
|
2617
|
+
var store4 = createStore4(() => ({
|
|
2618
|
+
count: 0,
|
|
2619
|
+
deposits: []
|
|
2620
|
+
}));
|
|
2621
|
+
function useDeposits() {
|
|
2622
|
+
const deposits = useStore2(store4, (state) => state.deposits);
|
|
2623
|
+
const addDeposit = useCallback2((transaction) => {
|
|
2624
|
+
store4.setState((state) => {
|
|
2625
|
+
if (transaction.type === "relay") {
|
|
2626
|
+
const existingDeposit = state.deposits.find(
|
|
2627
|
+
(deposit) => deposit.type === "relay" && deposit.requestId === transaction.requestId
|
|
2628
|
+
);
|
|
2629
|
+
if (existingDeposit) {
|
|
2630
|
+
return state;
|
|
2631
|
+
}
|
|
2632
|
+
}
|
|
2633
|
+
return {
|
|
2634
|
+
count: state.count + 1,
|
|
2635
|
+
deposits: [
|
|
2636
|
+
...state.deposits,
|
|
2637
|
+
{
|
|
2638
|
+
...transaction,
|
|
2639
|
+
uid: `deposit-${state.count}`
|
|
2640
|
+
}
|
|
2641
|
+
]
|
|
2642
|
+
};
|
|
2643
|
+
});
|
|
2644
|
+
}, []);
|
|
2645
|
+
const removeDeposit = useCallback2((uid) => {
|
|
2646
|
+
store4.setState((state) => ({
|
|
2647
|
+
deposits: state.deposits.filter((deposit) => deposit.uid !== uid)
|
|
2648
|
+
}));
|
|
2649
|
+
}, []);
|
|
2650
|
+
return useMemo3(
|
|
2651
|
+
() => ({
|
|
2652
|
+
deposits,
|
|
2653
|
+
addDeposit,
|
|
2654
|
+
removeDeposit
|
|
2655
|
+
}),
|
|
2656
|
+
[addDeposit, deposits, removeDeposit]
|
|
2657
|
+
);
|
|
2658
|
+
}
|
|
2659
|
+
|
|
2660
|
+
// src/onboarding/deposit/DepositViaTransferForm.tsx
|
|
2661
|
+
import { jsx as jsx30 } from "react/jsx-runtime";
|
|
2662
|
+
function DepositViaTransferForm({ amount, setAmount, sourceChain, setSourceChainId }) {
|
|
2663
|
+
const { chain } = useEntryKitConfig();
|
|
2664
|
+
const paymaster = getPaymaster(chain);
|
|
2665
|
+
const publicClient = usePublicClient();
|
|
2666
|
+
const { address: userAddress } = useAccount4();
|
|
2667
|
+
const { writeContractAsync } = useWriteContract();
|
|
2668
|
+
const { addDeposit } = useDeposits();
|
|
2669
|
+
if (!userAddress) {
|
|
2670
|
+
throw new Error("User address not found");
|
|
2671
|
+
}
|
|
2672
|
+
const { data: gasPrice } = useQuery13({
|
|
2673
|
+
queryKey: ["gasPrice", sourceChain.id],
|
|
2674
|
+
queryFn: async () => {
|
|
2675
|
+
if (!publicClient) throw new Error("Public client not available");
|
|
2676
|
+
return publicClient.getGasPrice();
|
|
2677
|
+
},
|
|
2678
|
+
refetchInterval: 15e3,
|
|
2679
|
+
enabled: !!publicClient
|
|
2680
|
+
});
|
|
2681
|
+
const { data: prepareData, error: prepareError } = usePrepareTransactionRequest({
|
|
2682
|
+
to: paymaster?.address,
|
|
2683
|
+
data: encodeFunctionData2({
|
|
2684
|
+
abi: paymasterAbi,
|
|
2685
|
+
functionName: "depositTo",
|
|
2686
|
+
args: [userAddress]
|
|
2687
|
+
}),
|
|
2688
|
+
value: amount
|
|
2689
|
+
});
|
|
2690
|
+
const deposit = useMutation4({
|
|
2691
|
+
mutationKey: ["depositViaTransfer", amount?.toString()],
|
|
2692
|
+
mutationFn: async () => {
|
|
2693
|
+
if (!paymaster) throw new Error("Paymaster not found");
|
|
2694
|
+
if (!publicClient) throw new Error("Public client not found");
|
|
2695
|
+
if (!amount) throw new Error("Amount cannot be 0");
|
|
2696
|
+
try {
|
|
2697
|
+
const hash = await writeContractAsync({
|
|
2698
|
+
address: paymaster.address,
|
|
2699
|
+
abi: paymasterAbi,
|
|
2700
|
+
functionName: "depositTo",
|
|
2701
|
+
args: [userAddress],
|
|
2702
|
+
value: amount
|
|
2703
|
+
});
|
|
2704
|
+
const receipt = publicClient.waitForTransactionReceipt({ hash }).then((receipt2) => {
|
|
2705
|
+
if (receipt2.status === "reverted") {
|
|
2706
|
+
throw new Error("Transfer transaction reverted.");
|
|
2707
|
+
}
|
|
2708
|
+
return receipt2;
|
|
2709
|
+
});
|
|
2710
|
+
const pendingDeposit = {
|
|
2711
|
+
type: "transfer",
|
|
2712
|
+
amount,
|
|
2713
|
+
chainL1Id: sourceChain.id,
|
|
2714
|
+
chainL2Id: chain.id,
|
|
2715
|
+
hash,
|
|
2716
|
+
receipt,
|
|
2717
|
+
start: /* @__PURE__ */ new Date(),
|
|
2718
|
+
estimatedTime: 1e3 * 12,
|
|
2719
|
+
isComplete: receipt.then(() => void 0)
|
|
2720
|
+
};
|
|
2721
|
+
addDeposit(pendingDeposit);
|
|
2722
|
+
} catch (error2) {
|
|
2723
|
+
console.error("Error while depositing via bridge", error2);
|
|
2724
|
+
throw error2;
|
|
2725
|
+
}
|
|
2726
|
+
}
|
|
2727
|
+
});
|
|
2728
|
+
const estimatedFee = prepareData?.gas && gasPrice ? prepareData.gas * gasPrice : void 0;
|
|
2729
|
+
return /* @__PURE__ */ jsx30(
|
|
2730
|
+
DepositForm,
|
|
2731
|
+
{
|
|
2732
|
+
sourceChain,
|
|
2733
|
+
setSourceChainId,
|
|
2734
|
+
amount,
|
|
2735
|
+
setAmount,
|
|
2736
|
+
estimatedFee: {
|
|
2737
|
+
fee: estimatedFee,
|
|
2738
|
+
isLoading: !prepareData && !prepareError || !gasPrice,
|
|
2739
|
+
error: prepareError instanceof Error ? prepareError : void 0
|
|
2740
|
+
},
|
|
2741
|
+
estimatedTime: "A few seconds",
|
|
2742
|
+
onSubmit: async () => {
|
|
2743
|
+
await deposit.mutateAsync();
|
|
2744
|
+
},
|
|
2745
|
+
submitButton: /* @__PURE__ */ jsx30(
|
|
2746
|
+
SubmitButton,
|
|
2747
|
+
{
|
|
2748
|
+
variant: "primary",
|
|
2749
|
+
amount,
|
|
2750
|
+
chainId: sourceChain.id,
|
|
2751
|
+
disabled: !!prepareError || !amount || !userAddress,
|
|
2752
|
+
pending: deposit.isPending,
|
|
2753
|
+
children: "Deposit"
|
|
2754
|
+
}
|
|
2755
|
+
)
|
|
2756
|
+
}
|
|
2757
|
+
);
|
|
2758
|
+
}
|
|
2759
|
+
|
|
2760
|
+
// src/onboarding/deposit/DepositViaRelayForm.tsx
|
|
2761
|
+
import { encodeFunctionData as encodeFunctionData3 } from "viem";
|
|
2762
|
+
import { useAccount as useAccount5, useWalletClient } from "wagmi";
|
|
2763
|
+
import { useMutation as useMutation5, useQuery as useQuery14 } from "@tanstack/react-query";
|
|
2764
|
+
import { jsx as jsx31 } from "react/jsx-runtime";
|
|
2765
|
+
var ETH_ADDRESS = "0x0000000000000000000000000000000000000000";
|
|
2766
|
+
function DepositViaRelayForm({ amount, setAmount, sourceChain, setSourceChainId }) {
|
|
2767
|
+
const { chain, chainId: destinationChainId } = useEntryKitConfig();
|
|
2768
|
+
const paymaster = getPaymaster(chain);
|
|
2769
|
+
const { data: wallet } = useWalletClient();
|
|
2770
|
+
const { address: userAddress } = useAccount5();
|
|
2771
|
+
const { addDeposit } = useDeposits();
|
|
2772
|
+
const { data: relay } = useRelay();
|
|
2773
|
+
const relayClient = relay?.client;
|
|
2774
|
+
const quote = useQuery14({
|
|
2775
|
+
queryKey: ["relayBridgeQuote", sourceChain.id, amount?.toString()],
|
|
2776
|
+
queryFn: async () => {
|
|
2777
|
+
if (!relayClient) throw new Error("No Relay client found.");
|
|
2778
|
+
if (!userAddress) throw new Error("No user address found.");
|
|
2779
|
+
const result = await relayClient.actions.getQuote({
|
|
2780
|
+
chainId: sourceChain.id,
|
|
2781
|
+
toChainId: destinationChainId,
|
|
2782
|
+
currency: ETH_ADDRESS,
|
|
2783
|
+
toCurrency: ETH_ADDRESS,
|
|
2784
|
+
amount: amount?.toString(),
|
|
2785
|
+
tradeType: "EXACT_OUTPUT",
|
|
2786
|
+
recipient: paymaster?.address,
|
|
2787
|
+
wallet,
|
|
2788
|
+
txs: [
|
|
2789
|
+
{
|
|
2790
|
+
to: paymaster?.address,
|
|
2791
|
+
data: encodeFunctionData3({
|
|
2792
|
+
abi: paymasterAbi,
|
|
2793
|
+
functionName: "depositTo",
|
|
2794
|
+
args: [userAddress]
|
|
2795
|
+
}),
|
|
2796
|
+
value: amount?.toString()
|
|
2797
|
+
}
|
|
2798
|
+
]
|
|
2799
|
+
});
|
|
2800
|
+
if (!result) {
|
|
2801
|
+
throw new Error("Failed to get relay quote");
|
|
2802
|
+
}
|
|
2803
|
+
return result;
|
|
2804
|
+
},
|
|
2805
|
+
retry: 1,
|
|
2806
|
+
refetchInterval: 15e3,
|
|
2807
|
+
enabled: !!amount && !!userAddress && !!relayClient
|
|
2808
|
+
});
|
|
2809
|
+
const deposit = useMutation5({
|
|
2810
|
+
mutationKey: ["depositViaRelay", sourceChain.id, amount?.toString()],
|
|
2811
|
+
mutationFn: async ({ quote: quote2, amount: amount2 }) => {
|
|
2812
|
+
if (!relayClient) throw new Error("No Relay client found.");
|
|
2813
|
+
if (!wallet) throw new Error("No wallet found.");
|
|
2814
|
+
try {
|
|
2815
|
+
return new Promise((resolve) => {
|
|
2816
|
+
const pendingDeposit = relayClient.actions.execute({
|
|
2817
|
+
quote: quote2,
|
|
2818
|
+
wallet,
|
|
2819
|
+
onProgress(progress) {
|
|
2820
|
+
const currentStep = progress.currentStep;
|
|
2821
|
+
const requestId = currentStep?.requestId;
|
|
2822
|
+
const currentState = currentStep?.items[0]?.progressState;
|
|
2823
|
+
if (requestId && currentState === "validating") {
|
|
2824
|
+
addDeposit({
|
|
2825
|
+
type: "relay",
|
|
2826
|
+
requestId,
|
|
2827
|
+
amount: amount2,
|
|
2828
|
+
chainL1Id: sourceChain.id,
|
|
2829
|
+
chainL2Id: destinationChainId,
|
|
2830
|
+
start: /* @__PURE__ */ new Date(),
|
|
2831
|
+
estimatedTime: 1e3 * 30,
|
|
2832
|
+
depositPromise: pendingDeposit,
|
|
2833
|
+
isComplete: pendingDeposit.then(() => void 0)
|
|
2834
|
+
});
|
|
2835
|
+
resolve(void 0);
|
|
2836
|
+
}
|
|
2837
|
+
}
|
|
2838
|
+
});
|
|
2839
|
+
});
|
|
2840
|
+
} catch (error2) {
|
|
2841
|
+
console.error("Error while depositing via Relay", error2);
|
|
2842
|
+
throw error2;
|
|
2843
|
+
}
|
|
2844
|
+
}
|
|
2845
|
+
});
|
|
2846
|
+
const fees = quote.data?.fees;
|
|
2847
|
+
const gasFee = BigInt(fees?.gas?.amount ?? 0);
|
|
2848
|
+
const relayerFee = BigInt(fees?.relayer?.amount ?? 0);
|
|
2849
|
+
const fee = gasFee + relayerFee;
|
|
2850
|
+
return /* @__PURE__ */ jsx31(
|
|
2851
|
+
DepositForm,
|
|
2852
|
+
{
|
|
2853
|
+
sourceChain,
|
|
2854
|
+
setSourceChainId,
|
|
2855
|
+
amount,
|
|
2856
|
+
setAmount,
|
|
2857
|
+
estimatedFee: {
|
|
2858
|
+
fee: fee != null ? BigInt(fee) : void 0,
|
|
2859
|
+
isLoading: quote.isLoading,
|
|
2860
|
+
error: quote.error instanceof Error ? quote.error : void 0
|
|
2861
|
+
},
|
|
2862
|
+
estimatedTime: "A few seconds",
|
|
2863
|
+
onSubmit: async () => {
|
|
2864
|
+
if (!quote.data || !amount) return;
|
|
2865
|
+
await deposit.mutateAsync({ quote: quote.data, amount });
|
|
2866
|
+
},
|
|
2867
|
+
submitButton: /* @__PURE__ */ jsx31(
|
|
2868
|
+
SubmitButton,
|
|
2869
|
+
{
|
|
2870
|
+
variant: "primary",
|
|
2871
|
+
amount,
|
|
2872
|
+
chainId: sourceChain.id,
|
|
2873
|
+
disabled: quote.isError || !amount,
|
|
2874
|
+
pending: deposit.isPending,
|
|
2875
|
+
children: "Deposit"
|
|
2876
|
+
}
|
|
2877
|
+
)
|
|
2878
|
+
}
|
|
2879
|
+
);
|
|
2880
|
+
}
|
|
2881
|
+
|
|
2882
|
+
// src/onboarding/deposit/Deposits.tsx
|
|
2883
|
+
import { useEffect as useEffect13 } from "react";
|
|
2884
|
+
import { useQuery as useQuery17, useQueryClient as useQueryClient8 } from "@tanstack/react-query";
|
|
2885
|
+
|
|
2886
|
+
// src/onboarding/deposit/TransferDepositStatus.tsx
|
|
2887
|
+
import { useQuery as useQuery15 } from "@tanstack/react-query";
|
|
2888
|
+
|
|
2889
|
+
// src/onboarding/deposit/DepositStatus.tsx
|
|
2890
|
+
import { useEffect as useEffect12, useState as useState3 } from "react";
|
|
2891
|
+
import { twMerge as twMerge16 } from "tailwind-merge";
|
|
2892
|
+
|
|
2893
|
+
// src/icons/CloseIcon.tsx
|
|
2894
|
+
import { jsx as jsx32 } from "react/jsx-runtime";
|
|
2895
|
+
function CloseIcon(props) {
|
|
2896
|
+
return /* @__PURE__ */ jsx32(IconSVG, { strokeWidth: "2", stroke: "currentColor", ...props, children: /* @__PURE__ */ jsx32(
|
|
2897
|
+
"path",
|
|
2898
|
+
{
|
|
2899
|
+
d: "M6 18L18 6M6 6L18 18",
|
|
2900
|
+
fill: "none",
|
|
2901
|
+
stroke: "currentColor",
|
|
2902
|
+
strokeWidth: "2",
|
|
2903
|
+
strokeLinecap: "round",
|
|
2904
|
+
strokeLinejoin: "round"
|
|
2905
|
+
}
|
|
2906
|
+
) });
|
|
2907
|
+
}
|
|
2908
|
+
|
|
2909
|
+
// src/onboarding/deposit/DepositStatus.tsx
|
|
2910
|
+
import { jsx as jsx33, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
2911
|
+
function DepositStatus({ status, progress, children, onDismiss }) {
|
|
2912
|
+
const [appear, setAppear] = useState3(false);
|
|
2913
|
+
useEffect12(() => {
|
|
2914
|
+
setAppear(true);
|
|
2915
|
+
}, []);
|
|
2916
|
+
return /* @__PURE__ */ jsxs19("div", { className: "group bg-neutral-900 flex flex-col animate-in fade-in slide-in-from-bottom-2 animate-out fade-out", children: [
|
|
2917
|
+
/* @__PURE__ */ jsxs19("div", { className: "py-1 text-sm flex items-center gap-2", children: [
|
|
2918
|
+
/* @__PURE__ */ jsx33("div", { className: "flex-grow", children }),
|
|
2919
|
+
/* @__PURE__ */ jsxs19("div", { className: "flex-shrink-0 grid", children: [
|
|
2920
|
+
/* @__PURE__ */ jsx33("span", { className: "col-start-1 row-start-1 transition opacity-100 group-hover:opacity-0 group-hover:pointer-events-none", children: status === "success" ? /* @__PURE__ */ jsx33(CheckIcon, { className: "text-green-600" }) : status === "error" ? /* @__PURE__ */ jsx33(WarningIcon, { className: "text-amber-500" }) : /* @__PURE__ */ jsx33(PendingIcon, { className: "text-neutral-500 transition" }) }),
|
|
2921
|
+
/* @__PURE__ */ jsx33(
|
|
2922
|
+
"button",
|
|
2923
|
+
{
|
|
2924
|
+
type: "button",
|
|
2925
|
+
className: twMerge16(
|
|
2926
|
+
"col-start-1 row-start-1 flex items-center justify-center transition",
|
|
2927
|
+
"opacity-0 pointer-events-none",
|
|
2928
|
+
"group-hover:opacity-100 group-hover:pointer-events-auto",
|
|
2929
|
+
"text-neutral-500 hover:text-white"
|
|
2930
|
+
),
|
|
2931
|
+
title: "Dismiss",
|
|
2932
|
+
onClick: onDismiss,
|
|
2933
|
+
children: /* @__PURE__ */ jsx33(CloseIcon, {})
|
|
2934
|
+
}
|
|
2935
|
+
)
|
|
2936
|
+
] })
|
|
2937
|
+
] }),
|
|
2938
|
+
/* @__PURE__ */ jsx33("div", { className: "w-full h-[2px] -mt-full overflow-clip", children: /* @__PURE__ */ jsx33(
|
|
2939
|
+
"div",
|
|
2940
|
+
{
|
|
2941
|
+
className: twMerge16(
|
|
2942
|
+
"w-full h-full transition ease-linear",
|
|
2943
|
+
status === "success" ? "bg-green-600" : status === "error" ? "bg-red-600" : "bg-blue-600",
|
|
2944
|
+
status === "pending" ? "opacity-100" : "opacity-0"
|
|
2945
|
+
),
|
|
2946
|
+
style: status === "pending" ? {
|
|
2947
|
+
transform: appear ? `translateX(0)` : "translate(-100%)",
|
|
2948
|
+
transitionDuration: `${progress.duration}ms`,
|
|
2949
|
+
transitionDelay: `-${Math.min(progress.duration, progress.elapsed)}ms`
|
|
2950
|
+
} : void 0
|
|
2951
|
+
}
|
|
2952
|
+
) })
|
|
2953
|
+
] });
|
|
2954
|
+
}
|
|
2955
|
+
|
|
2956
|
+
// src/onboarding/deposit/TransferDepositStatus.tsx
|
|
2957
|
+
import { useChains as useChains2 } from "wagmi";
|
|
2958
|
+
import { Fragment as Fragment4, jsx as jsx34, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
2959
|
+
function TransferDepositStatus({
|
|
2960
|
+
amount,
|
|
2961
|
+
chainL1Id,
|
|
2962
|
+
hash,
|
|
2963
|
+
receipt: receiptPromise,
|
|
2964
|
+
start,
|
|
2965
|
+
estimatedTime,
|
|
2966
|
+
onDismiss
|
|
2967
|
+
}) {
|
|
2968
|
+
const chains = useChains2();
|
|
2969
|
+
const chain = chains.find((chain2) => chain2.id === chainL1Id);
|
|
2970
|
+
const receipt = useQuery15({
|
|
2971
|
+
queryKey: ["transferDepositStatus", hash],
|
|
2972
|
+
queryFn: () => receiptPromise
|
|
2973
|
+
});
|
|
2974
|
+
return /* @__PURE__ */ jsx34(
|
|
2975
|
+
DepositStatus,
|
|
2976
|
+
{
|
|
2977
|
+
status: receipt.status,
|
|
2978
|
+
progress: {
|
|
2979
|
+
duration: estimatedTime,
|
|
2980
|
+
elapsed: Math.min(estimatedTime, Date.now() - start.getTime())
|
|
2981
|
+
},
|
|
2982
|
+
onDismiss,
|
|
2983
|
+
children: (() => {
|
|
2984
|
+
const blockExplorer = chain.blockExplorers?.default.url;
|
|
2985
|
+
if (receipt.status === "pending") {
|
|
2986
|
+
return /* @__PURE__ */ jsxs20(Fragment4, { children: [
|
|
2987
|
+
"Confirming deposit on",
|
|
2988
|
+
" ",
|
|
2989
|
+
/* @__PURE__ */ jsx34(
|
|
2990
|
+
"a",
|
|
2991
|
+
{
|
|
2992
|
+
href: blockExplorer ? `${blockExplorer}/tx/${hash}` : void 0,
|
|
2993
|
+
target: "_blank",
|
|
2994
|
+
rel: "noreferrer noopener",
|
|
2995
|
+
children: chain.name
|
|
2996
|
+
}
|
|
2997
|
+
),
|
|
2998
|
+
"\u2026"
|
|
2999
|
+
] });
|
|
1896
3000
|
}
|
|
1897
|
-
|
|
1898
|
-
|
|
1899
|
-
|
|
1900
|
-
|
|
1901
|
-
|
|
1902
|
-
|
|
1903
|
-
target: "_blank",
|
|
1904
|
-
rel: "noopener noreferrer",
|
|
1905
|
-
children: /* @__PURE__ */ jsx16(
|
|
1906
|
-
Button,
|
|
3001
|
+
if (receipt.status === "error") {
|
|
3002
|
+
return /* @__PURE__ */ jsxs20(Fragment4, { children: [
|
|
3003
|
+
"Could not find deposit on",
|
|
3004
|
+
" ",
|
|
3005
|
+
/* @__PURE__ */ jsx34(
|
|
3006
|
+
"a",
|
|
1907
3007
|
{
|
|
1908
|
-
|
|
1909
|
-
|
|
1910
|
-
|
|
1911
|
-
|
|
1912
|
-
children: "Top up"
|
|
3008
|
+
href: blockExplorer ? `${blockExplorer}/tx/${hash}` : void 0,
|
|
3009
|
+
target: "_blank",
|
|
3010
|
+
rel: "noreferrer noopener",
|
|
3011
|
+
children: chain.name
|
|
1913
3012
|
}
|
|
1914
|
-
)
|
|
3013
|
+
),
|
|
3014
|
+
"."
|
|
3015
|
+
] });
|
|
3016
|
+
}
|
|
3017
|
+
return /* @__PURE__ */ jsxs20(Fragment4, { children: [
|
|
3018
|
+
"Successfully",
|
|
3019
|
+
" ",
|
|
3020
|
+
/* @__PURE__ */ jsx34(
|
|
3021
|
+
"a",
|
|
3022
|
+
{
|
|
3023
|
+
href: blockExplorer ? `${blockExplorer}/tx/${receipt.data.transactionHash}` : void 0,
|
|
3024
|
+
target: "_blank",
|
|
3025
|
+
rel: "noreferrer noopener",
|
|
3026
|
+
children: "deposited"
|
|
3027
|
+
}
|
|
3028
|
+
),
|
|
3029
|
+
" ",
|
|
3030
|
+
/* @__PURE__ */ jsx34(Balance, { wei: amount })
|
|
3031
|
+
] });
|
|
3032
|
+
})()
|
|
3033
|
+
}
|
|
3034
|
+
);
|
|
3035
|
+
}
|
|
3036
|
+
|
|
3037
|
+
// src/onboarding/deposit/RelayDepositStatus.tsx
|
|
3038
|
+
import { useQuery as useQuery16 } from "@tanstack/react-query";
|
|
3039
|
+
import { useChains as useChains3 } from "wagmi";
|
|
3040
|
+
import { Fragment as Fragment5, jsx as jsx35, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
3041
|
+
function RelayDepositStatus({
|
|
3042
|
+
amount,
|
|
3043
|
+
chainL1Id,
|
|
3044
|
+
chainL2Id,
|
|
3045
|
+
start,
|
|
3046
|
+
estimatedTime,
|
|
3047
|
+
depositPromise,
|
|
3048
|
+
onDismiss
|
|
3049
|
+
}) {
|
|
3050
|
+
const chains = useChains3();
|
|
3051
|
+
const chainL1 = chains.find((chain) => chain.id === chainL1Id);
|
|
3052
|
+
const chainL2 = chains.find((chain) => chain.id === chainL2Id);
|
|
3053
|
+
const deposit = useQuery16({
|
|
3054
|
+
queryKey: ["relayDepositPromise", chainL1Id, chainL2Id, amount.toString(), start.toISOString()],
|
|
3055
|
+
queryFn: () => depositPromise
|
|
3056
|
+
});
|
|
3057
|
+
return /* @__PURE__ */ jsx35(
|
|
3058
|
+
DepositStatus,
|
|
3059
|
+
{
|
|
3060
|
+
status: deposit.status,
|
|
3061
|
+
progress: {
|
|
3062
|
+
duration: estimatedTime,
|
|
3063
|
+
elapsed: Math.min(estimatedTime, Date.now() - start.getTime())
|
|
3064
|
+
},
|
|
3065
|
+
onDismiss,
|
|
3066
|
+
children: (() => {
|
|
3067
|
+
if (deposit.status === "pending") {
|
|
3068
|
+
return /* @__PURE__ */ jsxs21(Fragment5, { children: [
|
|
3069
|
+
"Relay bridge deposit pending on ",
|
|
3070
|
+
chainL1.name,
|
|
3071
|
+
"\u2026"
|
|
3072
|
+
] });
|
|
3073
|
+
}
|
|
3074
|
+
if (deposit.status === "error") {
|
|
3075
|
+
return /* @__PURE__ */ jsxs21(Fragment5, { children: [
|
|
3076
|
+
"Relay bridge deposit to ",
|
|
3077
|
+
chainL2.name,
|
|
3078
|
+
" failed."
|
|
3079
|
+
] });
|
|
3080
|
+
}
|
|
3081
|
+
return /* @__PURE__ */ jsxs21(Fragment5, { children: [
|
|
3082
|
+
"Successfully bridged ",
|
|
3083
|
+
/* @__PURE__ */ jsx35(Balance, { wei: amount }),
|
|
3084
|
+
" to ",
|
|
3085
|
+
chainL2.name,
|
|
3086
|
+
"!"
|
|
3087
|
+
] });
|
|
3088
|
+
})()
|
|
3089
|
+
}
|
|
3090
|
+
);
|
|
3091
|
+
}
|
|
3092
|
+
|
|
3093
|
+
// src/onboarding/deposit/Deposits.tsx
|
|
3094
|
+
import { useAccount as useAccount6, useClient as useClient12 } from "wagmi";
|
|
3095
|
+
import { jsx as jsx36 } from "react/jsx-runtime";
|
|
3096
|
+
function Deposits() {
|
|
3097
|
+
const queryClient = useQueryClient8();
|
|
3098
|
+
const { chainId } = useEntryKitConfig();
|
|
3099
|
+
const client = useClient12({ chainId });
|
|
3100
|
+
const { address: userAddress } = useAccount6();
|
|
3101
|
+
const { deposits, removeDeposit } = useDeposits();
|
|
3102
|
+
const { data: isComplete } = useQuery17({
|
|
3103
|
+
queryKey: ["depositsComplete", deposits.map((deposit) => deposit.uid)],
|
|
3104
|
+
queryFn: async () => {
|
|
3105
|
+
if (!deposits.length) return false;
|
|
3106
|
+
await Promise.all(deposits.map((deposit) => deposit.isComplete));
|
|
3107
|
+
return true;
|
|
3108
|
+
}
|
|
3109
|
+
});
|
|
3110
|
+
useEffect13(() => {
|
|
3111
|
+
if (isComplete) {
|
|
3112
|
+
queryClient.invalidateQueries({ queryKey: ["balance"] });
|
|
3113
|
+
queryClient.invalidateQueries({ queryKey: ["getBalance", client?.uid, userAddress] });
|
|
3114
|
+
}
|
|
3115
|
+
}, [client?.uid, isComplete, queryClient, userAddress]);
|
|
3116
|
+
if (!deposits.length) return null;
|
|
3117
|
+
return /* @__PURE__ */ jsx36("div", { className: "flex flex-col gap-1 mt-4", children: deposits.map((deposit) => {
|
|
3118
|
+
if (deposit.type === "transfer") {
|
|
3119
|
+
return /* @__PURE__ */ jsx36(TransferDepositStatus, { ...deposit, onDismiss: () => removeDeposit(deposit.uid) }, deposit.uid);
|
|
3120
|
+
} else if (deposit.type === "relay") {
|
|
3121
|
+
return /* @__PURE__ */ jsx36(RelayDepositStatus, { ...deposit, onDismiss: () => removeDeposit(deposit.uid) }, deposit.uid);
|
|
3122
|
+
}
|
|
3123
|
+
}) });
|
|
3124
|
+
}
|
|
3125
|
+
|
|
3126
|
+
// src/onboarding/deposit/DepositFormContainer.tsx
|
|
3127
|
+
import { jsx as jsx37, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
3128
|
+
function DepositFormContainer() {
|
|
3129
|
+
const { chainId: destinationChainId } = useEntryKitConfig();
|
|
3130
|
+
const chainId = useChainId();
|
|
3131
|
+
const chains = useChains4();
|
|
3132
|
+
const [amount, setAmount] = useState4(void 0);
|
|
3133
|
+
const [sourceChainId, setSourceChainId] = useState4(chainId);
|
|
3134
|
+
const sourceChain = chains.find(({ id }) => id === sourceChainId);
|
|
3135
|
+
return /* @__PURE__ */ jsxs22("div", { className: "pt-10 pb-2", children: [
|
|
3136
|
+
destinationChainId === sourceChainId ? /* @__PURE__ */ jsx37(
|
|
3137
|
+
DepositViaTransferForm,
|
|
3138
|
+
{
|
|
3139
|
+
amount,
|
|
3140
|
+
setAmount,
|
|
3141
|
+
sourceChain,
|
|
3142
|
+
setSourceChainId
|
|
3143
|
+
}
|
|
3144
|
+
) : /* @__PURE__ */ jsx37(
|
|
3145
|
+
DepositViaRelayForm,
|
|
3146
|
+
{
|
|
3147
|
+
amount,
|
|
3148
|
+
setAmount,
|
|
3149
|
+
sourceChain,
|
|
3150
|
+
setSourceChainId
|
|
3151
|
+
}
|
|
3152
|
+
),
|
|
3153
|
+
/* @__PURE__ */ jsx37(Deposits, {})
|
|
3154
|
+
] });
|
|
3155
|
+
}
|
|
3156
|
+
|
|
3157
|
+
// src/icons/ArrowLeftIcon.tsx
|
|
3158
|
+
import { jsx as jsx38 } from "react/jsx-runtime";
|
|
3159
|
+
function ArrowLeftIcon(props) {
|
|
3160
|
+
return /* @__PURE__ */ jsx38(IconSVG, { ...props, children: /* @__PURE__ */ jsx38(
|
|
3161
|
+
"path",
|
|
3162
|
+
{
|
|
3163
|
+
d: "M19 12H5M12 19l-7-7 7-7",
|
|
3164
|
+
fill: "none",
|
|
3165
|
+
stroke: "currentColor",
|
|
3166
|
+
strokeWidth: "2",
|
|
3167
|
+
strokeLinecap: "round",
|
|
3168
|
+
strokeLinejoin: "round"
|
|
3169
|
+
}
|
|
3170
|
+
) });
|
|
3171
|
+
}
|
|
3172
|
+
|
|
3173
|
+
// src/onboarding/quarry/WithdrawGasBalanceButton.tsx
|
|
3174
|
+
import { getAction as getAction5 } from "viem/utils";
|
|
3175
|
+
import { waitForTransactionReceipt as waitForTransactionReceipt3 } from "viem/actions";
|
|
3176
|
+
import { useAccount as useAccount7, useClient as useClient13, useSwitchChain as useSwitchChain3, useWriteContract as useWriteContract2 } from "wagmi";
|
|
3177
|
+
import { twMerge as twMerge17 } from "tailwind-merge";
|
|
3178
|
+
import { useMutation as useMutation6 } from "@tanstack/react-query";
|
|
3179
|
+
import { useQueryClient as useQueryClient9 } from "@tanstack/react-query";
|
|
3180
|
+
import { jsx as jsx39, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
3181
|
+
function WithdrawGasBalanceButton({ userAddress }) {
|
|
3182
|
+
const { writeContractAsync } = useWriteContract2();
|
|
3183
|
+
const { switchChain } = useSwitchChain3();
|
|
3184
|
+
const { chain, chainId } = useEntryKitConfig();
|
|
3185
|
+
const { chainId: userChainId } = useAccount7();
|
|
3186
|
+
const queryClient = useQueryClient9();
|
|
3187
|
+
const client = useClient13({ chainId });
|
|
3188
|
+
const paymaster = getPaymaster(chain);
|
|
3189
|
+
const balance = useShowQueryError(useBalance(userAddress));
|
|
3190
|
+
const shouldSwitchChain = chainId != null && chainId !== userChainId;
|
|
3191
|
+
const withdraw = useMutation6({
|
|
3192
|
+
mutationKey: ["withdraw", userAddress],
|
|
3193
|
+
mutationFn: async () => {
|
|
3194
|
+
if (!client) throw new Error("Client not ready.");
|
|
3195
|
+
if (!paymaster) throw new Error("Paymaster not found");
|
|
3196
|
+
if (!balance.data) throw new Error("No gas balance to withdraw.");
|
|
3197
|
+
try {
|
|
3198
|
+
const hash = await writeContractAsync({
|
|
3199
|
+
address: paymaster.address,
|
|
3200
|
+
abi: paymasterAbi,
|
|
3201
|
+
functionName: "withdrawTo",
|
|
3202
|
+
args: [userAddress, balance.data],
|
|
3203
|
+
chainId
|
|
3204
|
+
});
|
|
3205
|
+
await getAction5(client, waitForTransactionReceipt3, "waitForTransactionReceipt")({ hash });
|
|
3206
|
+
await Promise.all([
|
|
3207
|
+
queryClient.invalidateQueries({ queryKey: ["balance"] }),
|
|
3208
|
+
queryClient.invalidateQueries({ queryKey: ["getFunds"] }),
|
|
3209
|
+
queryClient.invalidateQueries({ queryKey: ["getPrerequisites"] })
|
|
3210
|
+
]);
|
|
3211
|
+
} catch (error2) {
|
|
3212
|
+
console.error("Error while withdrawing", error2);
|
|
3213
|
+
throw error2;
|
|
3214
|
+
}
|
|
3215
|
+
}
|
|
3216
|
+
});
|
|
3217
|
+
if (balance.data == null || balance.data === 0n) {
|
|
3218
|
+
return null;
|
|
3219
|
+
}
|
|
3220
|
+
return /* @__PURE__ */ jsx39(
|
|
3221
|
+
"button",
|
|
3222
|
+
{
|
|
3223
|
+
onClick: () => {
|
|
3224
|
+
if (shouldSwitchChain) {
|
|
3225
|
+
return switchChain({ chainId });
|
|
3226
|
+
}
|
|
3227
|
+
withdraw.mutate();
|
|
3228
|
+
},
|
|
3229
|
+
className: twMerge17(
|
|
3230
|
+
"text-sm font-medium text-white/50 group whitespace-nowrap",
|
|
3231
|
+
withdraw.isPending ? "opacity-50 pointer-events-none" : "cursor-pointer hover:text-white"
|
|
3232
|
+
),
|
|
3233
|
+
disabled: withdraw.isPending,
|
|
3234
|
+
children: /* @__PURE__ */ jsxs23("span", { className: "inline-block", children: [
|
|
3235
|
+
/* @__PURE__ */ jsxs23(
|
|
3236
|
+
"span",
|
|
3237
|
+
{
|
|
3238
|
+
className: twMerge17(
|
|
3239
|
+
"inline-flex items-center gap-1 underline decoration-neutral-500 underline-offset-4",
|
|
3240
|
+
!withdraw.isPending && "hover:decoration-orange-500",
|
|
3241
|
+
shouldSwitchChain && "group-hover:hidden"
|
|
3242
|
+
),
|
|
3243
|
+
children: [
|
|
3244
|
+
withdraw.isPending && /* @__PURE__ */ jsx39(PendingIcon, { className: "w-3 h-3" }),
|
|
3245
|
+
"Withdraw"
|
|
3246
|
+
]
|
|
1915
3247
|
}
|
|
1916
|
-
)
|
|
1917
|
-
|
|
1918
|
-
] }),
|
|
1919
|
-
isExpanded ? /* @__PURE__ */ jsxs14(Fragment, { children: [
|
|
1920
|
-
/* @__PURE__ */ jsx16("p", { className: "text-sm", children: "Your session's gas balance is used to pay for onchain computation." }),
|
|
1921
|
-
/* @__PURE__ */ jsxs14("p", { className: "text-sm", children: [
|
|
1922
|
-
"Send funds to",
|
|
1923
|
-
" ",
|
|
1924
|
-
/* @__PURE__ */ jsx16("span", { className: "font-mono text-white", children: /* @__PURE__ */ jsx16(TruncatedHex, { hex: sessionAddress }) }),
|
|
1925
|
-
" ",
|
|
1926
|
-
"on ",
|
|
1927
|
-
chain.name,
|
|
1928
|
-
" to top up your session balance."
|
|
3248
|
+
),
|
|
3249
|
+
shouldSwitchChain && /* @__PURE__ */ jsx39("span", { className: "hidden group-hover:inline-block underline decoration-neutral-500 underline-offset-4 hover:decoration-orange-500", children: "Switch chain" })
|
|
1929
3250
|
] })
|
|
1930
|
-
|
|
3251
|
+
}
|
|
3252
|
+
);
|
|
3253
|
+
}
|
|
3254
|
+
|
|
3255
|
+
// src/onboarding/quarry/GasBalance.tsx
|
|
3256
|
+
import { jsx as jsx40, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
3257
|
+
function GasBalance2({ isActive, isExpanded, isFocused, setFocused, userAddress }) {
|
|
3258
|
+
const queryClient = useQueryClient10();
|
|
3259
|
+
const balance = useShowQueryError(useBalance(userAddress));
|
|
3260
|
+
const prevBalance = usePrevious(balance.data || 0n);
|
|
3261
|
+
useEffect14(() => {
|
|
3262
|
+
if (balance.data != null && prevBalance === 0n && balance.data > 0n) {
|
|
3263
|
+
queryClient.invalidateQueries({ queryKey: ["getPrerequisites"] });
|
|
3264
|
+
setFocused(false);
|
|
3265
|
+
}
|
|
3266
|
+
}, [balance.data, prevBalance, setFocused, queryClient, userAddress]);
|
|
3267
|
+
if (isFocused) {
|
|
3268
|
+
return /* @__PURE__ */ jsxs24("div", { children: [
|
|
3269
|
+
isFocused && /* @__PURE__ */ jsx40("div", { className: "absolute top-0 left-0", children: /* @__PURE__ */ jsx40(
|
|
3270
|
+
"div",
|
|
3271
|
+
{
|
|
3272
|
+
className: "flex items-center justify-center w-10 h-10 text-white/20 hover:text-white/40 cursor-pointer",
|
|
3273
|
+
onClick: () => setFocused(false),
|
|
3274
|
+
children: /* @__PURE__ */ jsx40(ArrowLeftIcon, { className: "m-0" })
|
|
3275
|
+
}
|
|
3276
|
+
) }),
|
|
3277
|
+
/* @__PURE__ */ jsx40(DepositFormContainer, {})
|
|
3278
|
+
] });
|
|
3279
|
+
}
|
|
3280
|
+
return /* @__PURE__ */ jsxs24("div", { className: "flex flex-col gap-4", children: [
|
|
3281
|
+
/* @__PURE__ */ jsxs24("div", { className: "flex justify-between gap-4", children: [
|
|
3282
|
+
/* @__PURE__ */ jsxs24("div", { children: [
|
|
3283
|
+
/* @__PURE__ */ jsx40("div", { children: "Gas balance" }),
|
|
3284
|
+
/* @__PURE__ */ jsx40("div", { className: "font-mono text-white", children: balance.data != null ? /* @__PURE__ */ jsx40(Balance, { wei: balance.data }) : /* @__PURE__ */ jsx40(PendingIcon, { className: "text-sm" }) })
|
|
3285
|
+
] }),
|
|
3286
|
+
/* @__PURE__ */ jsxs24("div", { className: "flex flex-col gap-1 justify-center items-center", children: [
|
|
3287
|
+
/* @__PURE__ */ jsx40(
|
|
3288
|
+
Button,
|
|
3289
|
+
{
|
|
3290
|
+
variant: isActive ? "primary" : "tertiary",
|
|
3291
|
+
className: "flex-shrink-0 text-sm p-1 w-28",
|
|
3292
|
+
autoFocus: isActive || isExpanded,
|
|
3293
|
+
pending: balance.status === "pending",
|
|
3294
|
+
onClick: () => setFocused(true),
|
|
3295
|
+
children: "Top up"
|
|
3296
|
+
}
|
|
3297
|
+
),
|
|
3298
|
+
/* @__PURE__ */ jsx40(WithdrawGasBalanceButton, { userAddress })
|
|
3299
|
+
] })
|
|
3300
|
+
] }),
|
|
3301
|
+
isExpanded ? /* @__PURE__ */ jsx40("p", { className: "text-sm", children: "Your gas balance is used to pay for onchain computation." }) : null
|
|
1931
3302
|
] });
|
|
1932
3303
|
}
|
|
1933
3304
|
|
|
1934
3305
|
// src/onboarding/ConnectedSteps.tsx
|
|
1935
|
-
import { jsx as
|
|
3306
|
+
import { jsx as jsx41 } from "react/jsx-runtime";
|
|
1936
3307
|
function ConnectedSteps({ userClient, initialUserAddress }) {
|
|
1937
3308
|
const { chain } = useEntryKitConfig();
|
|
1938
3309
|
const paymaster = getPaymaster(chain);
|
|
3310
|
+
const [focusedId, setFocusedId] = useState5(null);
|
|
1939
3311
|
const userAddress = userClient.account.address;
|
|
1940
3312
|
const { data: prerequisites, error: prerequisitesError } = usePrerequisites(userAddress);
|
|
1941
|
-
|
|
3313
|
+
useEffect15(() => {
|
|
1942
3314
|
if (prerequisitesError) {
|
|
1943
3315
|
console.error("Could not get prerequisites", prerequisitesError);
|
|
1944
3316
|
}
|
|
1945
3317
|
}, [prerequisitesError]);
|
|
1946
3318
|
const { closeAccountModal } = useAccountModal();
|
|
1947
3319
|
const isNewConnection = userAddress !== initialUserAddress;
|
|
1948
|
-
const initialPrerequisites =
|
|
1949
|
-
|
|
3320
|
+
const initialPrerequisites = useRef5(prerequisites);
|
|
3321
|
+
useEffect15(() => {
|
|
1950
3322
|
if (prerequisites == null) return;
|
|
1951
3323
|
if (initialPrerequisites.current == null) {
|
|
1952
3324
|
initialPrerequisites.current = prerequisites;
|
|
@@ -1957,8 +3329,8 @@ function ConnectedSteps({ userClient, initialUserAddress }) {
|
|
|
1957
3329
|
}
|
|
1958
3330
|
}
|
|
1959
3331
|
}, [closeAccountModal, isNewConnection, prerequisites]);
|
|
1960
|
-
const { sessionAddress, hasAllowance, isSpender, hasDelegation, hasGasBalance } = prerequisites ?? {};
|
|
1961
|
-
const steps =
|
|
3332
|
+
const { sessionAddress, hasAllowance, isSpender, hasDelegation, hasGasBalance, hasQuarryGasBalance } = prerequisites ?? {};
|
|
3333
|
+
const steps = useMemo4(() => {
|
|
1962
3334
|
if (!userAddress) {
|
|
1963
3335
|
return [
|
|
1964
3336
|
{
|
|
@@ -1972,7 +3344,7 @@ function ConnectedSteps({ userClient, initialUserAddress }) {
|
|
|
1972
3344
|
{
|
|
1973
3345
|
id: "wallet",
|
|
1974
3346
|
isComplete: true,
|
|
1975
|
-
content: (props) => /* @__PURE__ */
|
|
3347
|
+
content: (props) => /* @__PURE__ */ jsx41(Wallet, { ...props, userAddress })
|
|
1976
3348
|
}
|
|
1977
3349
|
];
|
|
1978
3350
|
if (!paymaster) {
|
|
@@ -1980,142 +3352,138 @@ function ConnectedSteps({ userClient, initialUserAddress }) {
|
|
|
1980
3352
|
steps2.push({
|
|
1981
3353
|
id: "gasBalance",
|
|
1982
3354
|
isComplete: !!hasGasBalance,
|
|
1983
|
-
content: (props) => /* @__PURE__ */
|
|
3355
|
+
content: (props) => /* @__PURE__ */ jsx41(GasBalance, { ...props, sessionAddress })
|
|
1984
3356
|
});
|
|
1985
3357
|
}
|
|
1986
3358
|
} else if (paymaster.type === "quarry") {
|
|
1987
|
-
|
|
1988
|
-
|
|
1989
|
-
|
|
1990
|
-
|
|
1991
|
-
|
|
3359
|
+
if (paymaster.isGasPass) {
|
|
3360
|
+
steps2.push({
|
|
3361
|
+
id: "allowance",
|
|
3362
|
+
isComplete: !!hasAllowance,
|
|
3363
|
+
content: (props) => /* @__PURE__ */ jsx41(Allowance, { ...props, userAddress })
|
|
3364
|
+
});
|
|
3365
|
+
} else {
|
|
3366
|
+
steps2.push({
|
|
3367
|
+
id: "gasBalanceQuarry",
|
|
3368
|
+
isComplete: !!hasQuarryGasBalance,
|
|
3369
|
+
content: (props) => /* @__PURE__ */ jsx41(GasBalance2, { ...props, userAddress })
|
|
3370
|
+
});
|
|
3371
|
+
}
|
|
1992
3372
|
}
|
|
1993
3373
|
steps2.push({
|
|
1994
3374
|
id: "session",
|
|
1995
3375
|
isComplete: !!isSpender && !!hasDelegation,
|
|
1996
|
-
content: (props) => /* @__PURE__ */
|
|
3376
|
+
content: (props) => /* @__PURE__ */ jsx41(Session, { ...props, userClient, registerSpender: !isSpender, registerDelegation: !hasDelegation })
|
|
1997
3377
|
});
|
|
1998
3378
|
return steps2;
|
|
1999
|
-
}, [
|
|
2000
|
-
|
|
3379
|
+
}, [
|
|
3380
|
+
hasAllowance,
|
|
3381
|
+
hasDelegation,
|
|
3382
|
+
hasGasBalance,
|
|
3383
|
+
hasQuarryGasBalance,
|
|
3384
|
+
isSpender,
|
|
3385
|
+
paymaster,
|
|
3386
|
+
sessionAddress,
|
|
3387
|
+
userAddress,
|
|
3388
|
+
userClient
|
|
3389
|
+
]);
|
|
3390
|
+
const [selectedStepId] = useState5(null);
|
|
2001
3391
|
const nextStep = steps.find((step) => step.content != null && !step.isComplete);
|
|
2002
3392
|
const completedSteps = steps.filter((step) => step.isComplete);
|
|
2003
3393
|
const activeStep = (selectedStepId != null ? steps.find((step) => step.id === selectedStepId) : null) ?? nextStep ?? (completedSteps.length < steps.length ? completedSteps.at(-1) : null);
|
|
2004
3394
|
const activeStepIndex = activeStep ? steps.indexOf(activeStep) : -1;
|
|
2005
|
-
return /* @__PURE__ */
|
|
3395
|
+
return /* @__PURE__ */ jsx41(
|
|
2006
3396
|
"div",
|
|
2007
3397
|
{
|
|
2008
|
-
className:
|
|
2009
|
-
|
|
2010
|
-
"
|
|
3398
|
+
className: twMerge18(
|
|
3399
|
+
"px-8 flex flex-col",
|
|
3400
|
+
"divide-y divide-neutral-800",
|
|
2011
3401
|
"animate-in animate-duration-300 fade-in slide-in-from-bottom-8"
|
|
2012
3402
|
),
|
|
2013
3403
|
children: steps.map((step, i) => {
|
|
2014
3404
|
const isActive = step === activeStep;
|
|
2015
3405
|
const isExpanded = isActive || completedSteps.length === steps.length;
|
|
2016
3406
|
const isDisabled = !step.isComplete && activeStepIndex !== -1 && i > activeStepIndex;
|
|
2017
|
-
|
|
3407
|
+
const isFocused = focusedId === step.id;
|
|
3408
|
+
const content = step.content({
|
|
3409
|
+
isActive,
|
|
3410
|
+
isExpanded,
|
|
3411
|
+
isFocused,
|
|
3412
|
+
setFocused: (focused) => setFocusedId(focused ? step.id : null)
|
|
3413
|
+
});
|
|
3414
|
+
if (focusedId) {
|
|
3415
|
+
if (step.id === focusedId) {
|
|
3416
|
+
return content;
|
|
3417
|
+
}
|
|
3418
|
+
return null;
|
|
3419
|
+
}
|
|
3420
|
+
return /* @__PURE__ */ jsx41("div", { className: twMerge18("py-8 flex flex-col justify-center", isActive ? "flex-grow" : null), children: /* @__PURE__ */ jsx41("div", { className: twMerge18("flex flex-col", isDisabled ? "opacity-30 pointer-events-none" : null), children: content }) }, step.id);
|
|
2018
3421
|
})
|
|
2019
3422
|
}
|
|
2020
3423
|
);
|
|
2021
3424
|
}
|
|
2022
3425
|
|
|
2023
3426
|
// src/AccountModalContent.tsx
|
|
2024
|
-
import { useRef as
|
|
2025
|
-
import { jsx as
|
|
3427
|
+
import { useRef as useRef6 } from "react";
|
|
3428
|
+
import { jsx as jsx42 } from "react/jsx-runtime";
|
|
2026
3429
|
function AccountModalContent() {
|
|
2027
3430
|
const { chainId } = useEntryKitConfig();
|
|
2028
3431
|
const userClient = useConnectorClient({ chainId });
|
|
2029
|
-
const { address: userAddress } =
|
|
2030
|
-
const initialUserAddress =
|
|
3432
|
+
const { address: userAddress } = useAccount8();
|
|
3433
|
+
const initialUserAddress = useRef6(userAddress);
|
|
2031
3434
|
if (userClient.status !== "success") {
|
|
2032
|
-
return /* @__PURE__ */
|
|
3435
|
+
return /* @__PURE__ */ jsx42(ConnectWallet, {});
|
|
2033
3436
|
}
|
|
2034
|
-
return /* @__PURE__ */
|
|
3437
|
+
return /* @__PURE__ */ jsx42(ConnectedSteps, { userClient: userClient.data, initialUserAddress: initialUserAddress.current });
|
|
2035
3438
|
}
|
|
2036
3439
|
|
|
2037
3440
|
// src/AccountModal.tsx
|
|
2038
3441
|
import { DialogClose } from "@radix-ui/react-dialog";
|
|
2039
|
-
|
|
2040
|
-
// src/icons/IconSVG.tsx
|
|
2041
|
-
import { twMerge as twMerge8 } from "tailwind-merge";
|
|
2042
|
-
import { jsx as jsx19 } from "react/jsx-runtime";
|
|
2043
|
-
function IconSVG({ className, children, ...props }) {
|
|
2044
|
-
return /* @__PURE__ */ jsx19(
|
|
2045
|
-
"svg",
|
|
2046
|
-
{
|
|
2047
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
2048
|
-
viewBox: "0 0 24 24",
|
|
2049
|
-
fill: "currentColor",
|
|
2050
|
-
className: twMerge8("-my-[0.125em] h-[1.25em] w-[1.25em]", className),
|
|
2051
|
-
...props,
|
|
2052
|
-
children
|
|
2053
|
-
}
|
|
2054
|
-
);
|
|
2055
|
-
}
|
|
2056
|
-
|
|
2057
|
-
// src/icons/CloseIcon.tsx
|
|
2058
|
-
import { jsx as jsx20 } from "react/jsx-runtime";
|
|
2059
|
-
function CloseIcon(props) {
|
|
2060
|
-
return /* @__PURE__ */ jsx20(IconSVG, { strokeWidth: "2", stroke: "currentColor", ...props, children: /* @__PURE__ */ jsx20(
|
|
2061
|
-
"path",
|
|
2062
|
-
{
|
|
2063
|
-
d: "M6 18L18 6M6 6L18 18",
|
|
2064
|
-
fill: "none",
|
|
2065
|
-
stroke: "currentColor",
|
|
2066
|
-
strokeWidth: "2",
|
|
2067
|
-
strokeLinecap: "round",
|
|
2068
|
-
strokeLinejoin: "round"
|
|
2069
|
-
}
|
|
2070
|
-
) });
|
|
2071
|
-
}
|
|
2072
|
-
|
|
2073
|
-
// src/AccountModal.tsx
|
|
2074
3442
|
import { ErrorBoundary } from "react-error-boundary";
|
|
2075
3443
|
|
|
2076
3444
|
// src/errors/ErrorOverlay.tsx
|
|
2077
3445
|
import { wait } from "@latticexyz/common/utils";
|
|
2078
|
-
import { useEffect as
|
|
2079
|
-
import { twMerge as
|
|
2080
|
-
import { Fragment as
|
|
3446
|
+
import { useEffect as useEffect16 } from "react";
|
|
3447
|
+
import { twMerge as twMerge19 } from "tailwind-merge";
|
|
3448
|
+
import { Fragment as Fragment6, jsx as jsx43, jsxs as jsxs25 } from "react/jsx-runtime";
|
|
2081
3449
|
function ErrorOverlay({ error: error2, retry, dismiss }) {
|
|
2082
|
-
|
|
3450
|
+
useEffect16(() => {
|
|
2083
3451
|
if (error2) {
|
|
2084
3452
|
console.error(error2);
|
|
2085
3453
|
}
|
|
2086
3454
|
}, [error2]);
|
|
2087
|
-
return /* @__PURE__ */
|
|
2088
|
-
/* @__PURE__ */
|
|
3455
|
+
return /* @__PURE__ */ jsxs25("div", { className: "pointer-events-none absolute inset-0 overflow-clip", children: [
|
|
3456
|
+
/* @__PURE__ */ jsx43(
|
|
2089
3457
|
"div",
|
|
2090
3458
|
{
|
|
2091
|
-
className:
|
|
3459
|
+
className: twMerge19(
|
|
2092
3460
|
"absolute inset-0 bg-blue-700/60",
|
|
2093
3461
|
"transition duration-300",
|
|
2094
3462
|
error2 ? "opacity-100 pointer-events-auto" : "opacity-0"
|
|
2095
3463
|
)
|
|
2096
3464
|
}
|
|
2097
3465
|
),
|
|
2098
|
-
/* @__PURE__ */
|
|
3466
|
+
/* @__PURE__ */ jsx43(
|
|
2099
3467
|
"div",
|
|
2100
3468
|
{
|
|
2101
|
-
className:
|
|
3469
|
+
className: twMerge19(
|
|
2102
3470
|
"absolute inset-0 pb-8",
|
|
2103
3471
|
"transition duration-300",
|
|
2104
3472
|
error2 ? "translate-y-0 opacity-100 pointer-events-auto" : "-translate-y-4 opacity-0"
|
|
2105
3473
|
),
|
|
2106
|
-
children: error2 ? /* @__PURE__ */
|
|
2107
|
-
/* @__PURE__ */
|
|
2108
|
-
/* @__PURE__ */
|
|
2109
|
-
/* @__PURE__ */
|
|
2110
|
-
/* @__PURE__ */
|
|
3474
|
+
children: error2 ? /* @__PURE__ */ jsx43(Fragment6, { children: /* @__PURE__ */ jsxs25("div", { className: "w-full max-h-full bg-blue-700 text-white/80 overflow-auto", children: [
|
|
3475
|
+
/* @__PURE__ */ jsxs25("div", { className: "space-y-6 px-8 pt-8", children: [
|
|
3476
|
+
/* @__PURE__ */ jsx43("div", { className: "text-white text-lg font-bold", children: "Oops! It broke :(" }),
|
|
3477
|
+
/* @__PURE__ */ jsx43("div", { className: "font-mono text-xs whitespace-pre-wrap", children: error2.message.trim() }),
|
|
3478
|
+
/* @__PURE__ */ jsx43("div", { className: "text-sm", children: "See the console for more info." })
|
|
2111
3479
|
] }),
|
|
2112
|
-
/* @__PURE__ */
|
|
2113
|
-
/* @__PURE__ */
|
|
2114
|
-
retry ? /* @__PURE__ */
|
|
3480
|
+
/* @__PURE__ */ jsxs25("div", { className: "pointer-events-none sticky bottom-0 left-0 -mt-2", children: [
|
|
3481
|
+
/* @__PURE__ */ jsx43("div", { className: "w-full h-12 bg-gradient-to-b from-transparent to-blue-700" }),
|
|
3482
|
+
retry ? /* @__PURE__ */ jsx43("div", { className: "bg-blue-700 text-center", children: /* @__PURE__ */ jsxs25(
|
|
2115
3483
|
"button",
|
|
2116
3484
|
{
|
|
2117
3485
|
type: "button",
|
|
2118
|
-
className:
|
|
3486
|
+
className: twMerge19(
|
|
2119
3487
|
"pointer-events-auto group w-24 p-1 -translate-y-2 transition",
|
|
2120
3488
|
"bg-blue-600 hover:bg-blue-500 aria-busy:bg-blue-500",
|
|
2121
3489
|
"text-white text-sm font-medium",
|
|
@@ -2130,15 +3498,15 @@ function ErrorOverlay({ error: error2, retry, dismiss }) {
|
|
|
2130
3498
|
}
|
|
2131
3499
|
},
|
|
2132
3500
|
children: [
|
|
2133
|
-
/* @__PURE__ */
|
|
2134
|
-
/* @__PURE__ */
|
|
3501
|
+
/* @__PURE__ */ jsx43("span", { className: "group-aria-busy:hidden", children: "Retry" }),
|
|
3502
|
+
/* @__PURE__ */ jsx43("span", { className: "hidden group-aria-busy:inline", children: "Retrying\u2026" })
|
|
2135
3503
|
]
|
|
2136
3504
|
}
|
|
2137
|
-
) }) : dismiss ? /* @__PURE__ */
|
|
3505
|
+
) }) : dismiss ? /* @__PURE__ */ jsx43("div", { className: "bg-blue-700 text-center", children: /* @__PURE__ */ jsx43(
|
|
2138
3506
|
"button",
|
|
2139
3507
|
{
|
|
2140
3508
|
type: "button",
|
|
2141
|
-
className:
|
|
3509
|
+
className: twMerge19(
|
|
2142
3510
|
"pointer-events-auto group w-24 p-1 -translate-y-2 transition",
|
|
2143
3511
|
"bg-blue-600 hover:bg-blue-500 aria-busy:bg-blue-500",
|
|
2144
3512
|
"text-white text-sm font-medium",
|
|
@@ -2156,27 +3524,27 @@ function ErrorOverlay({ error: error2, retry, dismiss }) {
|
|
|
2156
3524
|
}
|
|
2157
3525
|
|
|
2158
3526
|
// src/errors/ErrorFallback.tsx
|
|
2159
|
-
import { jsx as
|
|
3527
|
+
import { jsx as jsx44 } from "react/jsx-runtime";
|
|
2160
3528
|
function ErrorFallback({ error: error2, resetErrorBoundary }) {
|
|
2161
|
-
return /* @__PURE__ */
|
|
3529
|
+
return /* @__PURE__ */ jsx44("div", { className: "h-64", children: /* @__PURE__ */ jsx44(ErrorOverlay, { error: error2, retry: resetErrorBoundary }) });
|
|
2162
3530
|
}
|
|
2163
3531
|
|
|
2164
3532
|
// src/errors/ErrorsOverlay.tsx
|
|
2165
|
-
import { useStore as
|
|
2166
|
-
import { jsx as
|
|
3533
|
+
import { useStore as useStore3 } from "zustand";
|
|
3534
|
+
import { jsx as jsx45 } from "react/jsx-runtime";
|
|
2167
3535
|
function ErrorsOverlay() {
|
|
2168
|
-
const error2 =
|
|
2169
|
-
return /* @__PURE__ */
|
|
3536
|
+
const error2 = useStore3(store3, (state) => state.errors.at(0));
|
|
3537
|
+
return /* @__PURE__ */ jsx45(ErrorOverlay, { error: error2?.error, retry: error2?.retry, dismiss: error2?.dismiss });
|
|
2170
3538
|
}
|
|
2171
3539
|
|
|
2172
3540
|
// src/AccountModal.tsx
|
|
2173
|
-
import { jsx as
|
|
3541
|
+
import { jsx as jsx46, jsxs as jsxs26 } from "react/jsx-runtime";
|
|
2174
3542
|
function AccountModal() {
|
|
2175
3543
|
const { accountModalOpen, toggleAccountModal } = useAccountModal();
|
|
2176
|
-
return /* @__PURE__ */
|
|
3544
|
+
return /* @__PURE__ */ jsx46(Modal, { open: accountModalOpen, onOpenChange: toggleAccountModal, children: accountModalOpen ? /* @__PURE__ */ jsxs26(
|
|
2177
3545
|
"div",
|
|
2178
3546
|
{
|
|
2179
|
-
className:
|
|
3547
|
+
className: twMerge20(
|
|
2180
3548
|
"relative py-2 ring-1",
|
|
2181
3549
|
"bg-neutral-900 text-neutral-400 ring-neutral-700/50",
|
|
2182
3550
|
"links:font-medium links:underline links:underline-offset-4",
|
|
@@ -2184,11 +3552,11 @@ function AccountModal() {
|
|
|
2184
3552
|
"links:decoration-neutral-500 hover:links:decoration-orange-500"
|
|
2185
3553
|
),
|
|
2186
3554
|
children: [
|
|
2187
|
-
/* @__PURE__ */
|
|
2188
|
-
/* @__PURE__ */
|
|
2189
|
-
/* @__PURE__ */
|
|
3555
|
+
/* @__PURE__ */ jsxs26(ErrorBoundary, { FallbackComponent: ErrorFallback, children: [
|
|
3556
|
+
/* @__PURE__ */ jsx46(AccountModalContent, {}),
|
|
3557
|
+
/* @__PURE__ */ jsx46(ErrorsOverlay, {})
|
|
2190
3558
|
] }),
|
|
2191
|
-
/* @__PURE__ */
|
|
3559
|
+
/* @__PURE__ */ jsxs26(
|
|
2192
3560
|
"a",
|
|
2193
3561
|
{
|
|
2194
3562
|
href: "https://mud.dev",
|
|
@@ -2196,20 +3564,20 @@ function AccountModal() {
|
|
|
2196
3564
|
rel: "noreferrer noopener",
|
|
2197
3565
|
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",
|
|
2198
3566
|
children: [
|
|
2199
|
-
/* @__PURE__ */
|
|
2200
|
-
/* @__PURE__ */
|
|
3567
|
+
/* @__PURE__ */ jsx46("span", { className: "block w-4 h-4", children: /* @__PURE__ */ jsx46(Logo, { className: "w-full h-full text-orange-500 group-hover:rotate-90 transition duration-300" }) }),
|
|
3568
|
+
/* @__PURE__ */ jsx46("span", { children: "Powered by MUD" })
|
|
2201
3569
|
]
|
|
2202
3570
|
}
|
|
2203
3571
|
),
|
|
2204
|
-
/* @__PURE__ */
|
|
3572
|
+
/* @__PURE__ */ jsx46("div", { className: "absolute top-0 right-0", children: /* @__PURE__ */ jsx46(
|
|
2205
3573
|
DialogClose,
|
|
2206
3574
|
{
|
|
2207
|
-
className:
|
|
3575
|
+
className: twMerge20(
|
|
2208
3576
|
"pointer-events-auto leading-none p-2 transition",
|
|
2209
3577
|
"text-white/20 hover:text-white/40"
|
|
2210
3578
|
),
|
|
2211
3579
|
title: "Close",
|
|
2212
|
-
children: /* @__PURE__ */
|
|
3580
|
+
children: /* @__PURE__ */ jsx46(CloseIcon, { className: "m-0" })
|
|
2213
3581
|
}
|
|
2214
3582
|
) })
|
|
2215
3583
|
]
|
|
@@ -2218,31 +3586,31 @@ function AccountModal() {
|
|
|
2218
3586
|
}
|
|
2219
3587
|
|
|
2220
3588
|
// src/EntryKitProvider.tsx
|
|
2221
|
-
import { jsx as
|
|
3589
|
+
import { jsx as jsx47, jsxs as jsxs27 } from "react/jsx-runtime";
|
|
2222
3590
|
function EntryKitProvider({ config, children }) {
|
|
2223
|
-
return /* @__PURE__ */
|
|
3591
|
+
return /* @__PURE__ */ jsxs27(EntryKitConfigProvider, { config, children: [
|
|
2224
3592
|
children,
|
|
2225
|
-
/* @__PURE__ */
|
|
3593
|
+
/* @__PURE__ */ jsx47(AccountModal, {})
|
|
2226
3594
|
] });
|
|
2227
3595
|
}
|
|
2228
3596
|
|
|
2229
3597
|
// src/AccountButton.tsx
|
|
2230
|
-
import { useAccount as
|
|
2231
|
-
import { twMerge as
|
|
3598
|
+
import { useAccount as useAccount9 } from "wagmi";
|
|
3599
|
+
import { twMerge as twMerge22 } from "tailwind-merge";
|
|
2232
3600
|
|
|
2233
3601
|
// src/AccountName.tsx
|
|
2234
|
-
import { twMerge as
|
|
2235
|
-
import { Fragment as
|
|
3602
|
+
import { twMerge as twMerge21 } from "tailwind-merge";
|
|
3603
|
+
import { Fragment as Fragment7, jsx as jsx48, jsxs as jsxs28 } from "react/jsx-runtime";
|
|
2236
3604
|
function AccountName({ address }) {
|
|
2237
3605
|
const { data: ens } = useENS(address);
|
|
2238
3606
|
const avatar = usePreloadImage(ens?.avatar);
|
|
2239
|
-
return /* @__PURE__ */
|
|
2240
|
-
/* @__PURE__ */
|
|
2241
|
-
/* @__PURE__ */
|
|
3607
|
+
return /* @__PURE__ */ jsxs28(Fragment7, { children: [
|
|
3608
|
+
/* @__PURE__ */ jsxs28("span", { className: "flex-shrink-0 w-6 h-6 -my-1 -mx-0.5 grid place-items-center", children: [
|
|
3609
|
+
/* @__PURE__ */ jsx48(
|
|
2242
3610
|
"img",
|
|
2243
3611
|
{
|
|
2244
3612
|
src: ens?.avatar && avatar.isSuccess ? ens.avatar : void 0,
|
|
2245
|
-
className:
|
|
3613
|
+
className: twMerge21(
|
|
2246
3614
|
"col-start-1 row-start-1",
|
|
2247
3615
|
"inline-flex w-full h-full rounded-full bg-black/10 dark:bg-white/10 bg-cover bg-no-repeat bg-center",
|
|
2248
3616
|
"transtion duration-300",
|
|
@@ -2250,10 +3618,10 @@ function AccountName({ address }) {
|
|
|
2250
3618
|
)
|
|
2251
3619
|
}
|
|
2252
3620
|
),
|
|
2253
|
-
/* @__PURE__ */
|
|
3621
|
+
/* @__PURE__ */ jsx48(
|
|
2254
3622
|
Logo,
|
|
2255
3623
|
{
|
|
2256
|
-
className:
|
|
3624
|
+
className: twMerge21(
|
|
2257
3625
|
"col-start-1 row-start-1 text-orange-500",
|
|
2258
3626
|
"transition duration-300",
|
|
2259
3627
|
ens && (!ens.avatar || avatar.isError) ? "opacity-100" : "opacity-0"
|
|
@@ -2261,29 +3629,29 @@ function AccountName({ address }) {
|
|
|
2261
3629
|
}
|
|
2262
3630
|
)
|
|
2263
3631
|
] }),
|
|
2264
|
-
/* @__PURE__ */
|
|
3632
|
+
/* @__PURE__ */ jsx48("span", { className: "flex-grow", children: ens?.name ?? /* @__PURE__ */ jsx48(TruncatedHex, { hex: address }) })
|
|
2265
3633
|
] });
|
|
2266
3634
|
}
|
|
2267
3635
|
|
|
2268
3636
|
// src/AccountButton.tsx
|
|
2269
|
-
import { useRef as
|
|
2270
|
-
import { jsx as
|
|
2271
|
-
var containerClassNames =
|
|
3637
|
+
import { useRef as useRef7 } from "react";
|
|
3638
|
+
import { jsx as jsx49, jsxs as jsxs29 } from "react/jsx-runtime";
|
|
3639
|
+
var containerClassNames = twMerge22(
|
|
2272
3640
|
"w-48 p-3 inline-flex outline-none transition",
|
|
2273
3641
|
"border border-transparent",
|
|
2274
3642
|
"text-base leading-none"
|
|
2275
3643
|
);
|
|
2276
|
-
var secondaryClassNames =
|
|
3644
|
+
var secondaryClassNames = twMerge22(
|
|
2277
3645
|
"bg-neutral-100 border-neutral-300 text-black",
|
|
2278
3646
|
"dark:bg-neutral-800 dark:border-neutral-700 dark:text-white"
|
|
2279
3647
|
);
|
|
2280
|
-
var secondaryInteractiveClassNames =
|
|
3648
|
+
var secondaryInteractiveClassNames = twMerge22(
|
|
2281
3649
|
"cursor-pointer outline-none hover:bg-neutral-200 data-[highlighted]:bg-neutral-200 dark:hover:bg-neutral-700"
|
|
2282
3650
|
);
|
|
2283
3651
|
function AccountButton() {
|
|
2284
3652
|
const { openAccountModal, accountModalOpen } = useAccountModal();
|
|
2285
|
-
const { status, address: userAddress } =
|
|
2286
|
-
const initialUserAddress =
|
|
3653
|
+
const { status, address: userAddress } = useAccount9();
|
|
3654
|
+
const initialUserAddress = useRef7(userAddress);
|
|
2287
3655
|
const prereqs = usePrerequisites(userAddress);
|
|
2288
3656
|
const isConnected = status === "connected" || status === "reconnecting" && userAddress;
|
|
2289
3657
|
const isNewConnection = userAddress !== initialUserAddress.current;
|
|
@@ -2295,20 +3663,20 @@ function AccountButton() {
|
|
|
2295
3663
|
}
|
|
2296
3664
|
return "Sign in";
|
|
2297
3665
|
})();
|
|
2298
|
-
return /* @__PURE__ */
|
|
3666
|
+
return /* @__PURE__ */ jsx49(Shadow, { mode: "child", children: isSignedIn ? /* @__PURE__ */ jsx49(
|
|
2299
3667
|
"button",
|
|
2300
3668
|
{
|
|
2301
3669
|
type: "button",
|
|
2302
|
-
className:
|
|
3670
|
+
className: twMerge22(containerClassNames, secondaryClassNames, secondaryInteractiveClassNames),
|
|
2303
3671
|
onClick: openAccountModal,
|
|
2304
|
-
children: /* @__PURE__ */
|
|
3672
|
+
children: /* @__PURE__ */ jsx49("span", { className: "flex-grow inline-flex gap-2.5 items-center text-left font-medium", children: userAddress ? /* @__PURE__ */ jsx49(AccountName, { address: userAddress }) : null })
|
|
2305
3673
|
},
|
|
2306
3674
|
"connected"
|
|
2307
|
-
) : /* @__PURE__ */
|
|
3675
|
+
) : /* @__PURE__ */ jsxs29(
|
|
2308
3676
|
"button",
|
|
2309
3677
|
{
|
|
2310
3678
|
type: "button",
|
|
2311
|
-
className:
|
|
3679
|
+
className: twMerge22(
|
|
2312
3680
|
containerClassNames,
|
|
2313
3681
|
"group",
|
|
2314
3682
|
"items-center justify-center gap-2.5",
|
|
@@ -2316,35 +3684,35 @@ function AccountButton() {
|
|
|
2316
3684
|
"hover:bg-orange-400",
|
|
2317
3685
|
"active:bg-orange-600"
|
|
2318
3686
|
),
|
|
2319
|
-
"aria-busy": accountModalOpen,
|
|
3687
|
+
"aria-busy": accountModalOpen || prereqs.isPending,
|
|
2320
3688
|
onClick: openAccountModal,
|
|
2321
3689
|
children: [
|
|
2322
|
-
/* @__PURE__ */
|
|
2323
|
-
/* @__PURE__ */
|
|
3690
|
+
/* @__PURE__ */ jsxs29("span", { className: "pointer-events-none inline-grid place-items-center -ml-3", children: [
|
|
3691
|
+
/* @__PURE__ */ jsx49(
|
|
2324
3692
|
"span",
|
|
2325
3693
|
{
|
|
2326
|
-
className:
|
|
3694
|
+
className: twMerge22(
|
|
2327
3695
|
"col-start-1 row-start-1 leading-none",
|
|
2328
3696
|
"scale-100 opacity-100 transition duration-300",
|
|
2329
3697
|
"group-aria-busy:scale-125 group-aria-busy:opacity-0"
|
|
2330
3698
|
),
|
|
2331
|
-
children: /* @__PURE__ */
|
|
3699
|
+
children: /* @__PURE__ */ jsx49(Logo, {})
|
|
2332
3700
|
}
|
|
2333
3701
|
),
|
|
2334
|
-
/* @__PURE__ */
|
|
3702
|
+
/* @__PURE__ */ jsx49(
|
|
2335
3703
|
"span",
|
|
2336
3704
|
{
|
|
2337
3705
|
"aria-hidden": true,
|
|
2338
|
-
className:
|
|
3706
|
+
className: twMerge22(
|
|
2339
3707
|
"col-start-1 row-start-1",
|
|
2340
3708
|
"scale-50 opacity-0 transition duration-300 delay-50",
|
|
2341
3709
|
"group-aria-busy:scale-100 group-aria-busy:opacity-100"
|
|
2342
3710
|
),
|
|
2343
|
-
children: /* @__PURE__ */
|
|
3711
|
+
children: /* @__PURE__ */ jsx49(PendingIcon, {})
|
|
2344
3712
|
}
|
|
2345
3713
|
)
|
|
2346
3714
|
] }),
|
|
2347
|
-
/* @__PURE__ */
|
|
3715
|
+
/* @__PURE__ */ jsx49("span", { className: "font-medium", children: buttonLabel })
|
|
2348
3716
|
]
|
|
2349
3717
|
},
|
|
2350
3718
|
"sign in"
|
|
@@ -2360,50 +3728,405 @@ function useSessionClientReady() {
|
|
|
2360
3728
|
const userAddress = userClient.data?.account.address;
|
|
2361
3729
|
const prerequisites = usePrerequisites(userAddress);
|
|
2362
3730
|
const sessionClient = useSessionClient(userAddress);
|
|
2363
|
-
if (!
|
|
2364
|
-
|
|
3731
|
+
if (!prerequisites.isSuccess || !prerequisites.data.complete) {
|
|
3732
|
+
return { ...prerequisites, data: void 0 };
|
|
3733
|
+
}
|
|
2365
3734
|
return sessionClient;
|
|
2366
3735
|
}
|
|
2367
3736
|
|
|
2368
3737
|
// src/createWagmiConfig.ts
|
|
2369
|
-
import { connectorsForWallets } from "@rainbow-me/rainbowkit";
|
|
2370
3738
|
import { createConfig } from "wagmi";
|
|
3739
|
+
import { getDefaultConfig } from "connectkit";
|
|
3740
|
+
import { injected, coinbaseWallet, safe } from "wagmi/connectors";
|
|
2371
3741
|
|
|
2372
|
-
// src/
|
|
2373
|
-
import {
|
|
2374
|
-
|
|
2375
|
-
|
|
2376
|
-
|
|
2377
|
-
|
|
2378
|
-
|
|
2379
|
-
|
|
3742
|
+
// src/connectors/walletConnect.ts
|
|
3743
|
+
import { ChainNotConfiguredError, ProviderNotFoundError, createConnector } from "wagmi";
|
|
3744
|
+
import {
|
|
3745
|
+
SwitchChainError,
|
|
3746
|
+
UserRejectedRequestError,
|
|
3747
|
+
getAddress,
|
|
3748
|
+
numberToHex as numberToHex3
|
|
3749
|
+
} from "viem";
|
|
3750
|
+
walletConnect.type = "walletConnect";
|
|
3751
|
+
function walletConnect(parameters) {
|
|
3752
|
+
const isNewChainsStale = parameters.isNewChainsStale ?? true;
|
|
3753
|
+
let provider_;
|
|
3754
|
+
let providerPromise;
|
|
3755
|
+
const NAMESPACE = "eip155";
|
|
3756
|
+
let accountsChanged;
|
|
3757
|
+
let chainChanged;
|
|
3758
|
+
let connect;
|
|
3759
|
+
let displayUri;
|
|
3760
|
+
let sessionDelete;
|
|
3761
|
+
let disconnect;
|
|
3762
|
+
return createConnector((config) => ({
|
|
3763
|
+
id: "walletConnect",
|
|
3764
|
+
name: "WalletConnect",
|
|
3765
|
+
type: walletConnect.type,
|
|
3766
|
+
async setup() {
|
|
3767
|
+
const provider = await this.getProvider().catch(() => null);
|
|
3768
|
+
if (!provider) return;
|
|
3769
|
+
if (!connect) {
|
|
3770
|
+
connect = this.onConnect.bind(this);
|
|
3771
|
+
provider.on("connect", connect);
|
|
3772
|
+
}
|
|
3773
|
+
if (!sessionDelete) {
|
|
3774
|
+
sessionDelete = this.onSessionDelete.bind(this);
|
|
3775
|
+
provider.on("session_delete", sessionDelete);
|
|
3776
|
+
}
|
|
3777
|
+
},
|
|
3778
|
+
async connect({ chainId, ...rest } = {}) {
|
|
3779
|
+
try {
|
|
3780
|
+
const provider = await this.getProvider();
|
|
3781
|
+
if (!provider) throw new ProviderNotFoundError();
|
|
3782
|
+
if (!displayUri) {
|
|
3783
|
+
displayUri = this.onDisplayUri;
|
|
3784
|
+
provider.on("display_uri", displayUri);
|
|
3785
|
+
}
|
|
3786
|
+
let targetChainId = chainId;
|
|
3787
|
+
if (!targetChainId) {
|
|
3788
|
+
const state = await config.storage?.getItem("state") ?? {};
|
|
3789
|
+
const isChainSupported = config.chains.some((x) => x.id === state.chainId);
|
|
3790
|
+
if (isChainSupported) targetChainId = state.chainId;
|
|
3791
|
+
else targetChainId = config.chains[0]?.id;
|
|
3792
|
+
}
|
|
3793
|
+
if (!targetChainId) throw new Error("No chains found on connector.");
|
|
3794
|
+
const isChainsStale = await this.isChainsStale();
|
|
3795
|
+
if (provider.session && isChainsStale) await provider.disconnect();
|
|
3796
|
+
if (!provider.session || isChainsStale) {
|
|
3797
|
+
const optionalChains = config.chains.filter((chain) => chain.id !== targetChainId).map((optionalChain) => optionalChain.id);
|
|
3798
|
+
await provider.connect({
|
|
3799
|
+
optionalChains: [targetChainId, ...optionalChains],
|
|
3800
|
+
..."pairingTopic" in rest ? { pairingTopic: rest.pairingTopic } : {}
|
|
3801
|
+
});
|
|
3802
|
+
this.setRequestedChainsIds(config.chains.map((x) => x.id));
|
|
3803
|
+
}
|
|
3804
|
+
const accounts = (await provider.enable()).map((x) => getAddress(x));
|
|
3805
|
+
let currentChainId = await this.getChainId();
|
|
3806
|
+
if (chainId && currentChainId !== chainId) {
|
|
3807
|
+
const chain = await this.switchChain({ chainId }).catch((error2) => {
|
|
3808
|
+
if (error2.code === UserRejectedRequestError.code) throw error2;
|
|
3809
|
+
return { id: currentChainId };
|
|
3810
|
+
});
|
|
3811
|
+
currentChainId = chain?.id ?? currentChainId;
|
|
3812
|
+
}
|
|
3813
|
+
if (displayUri) {
|
|
3814
|
+
provider.removeListener("display_uri", displayUri);
|
|
3815
|
+
displayUri = void 0;
|
|
3816
|
+
}
|
|
3817
|
+
if (connect) {
|
|
3818
|
+
provider.removeListener("connect", connect);
|
|
3819
|
+
connect = void 0;
|
|
3820
|
+
}
|
|
3821
|
+
if (!accountsChanged) {
|
|
3822
|
+
accountsChanged = this.onAccountsChanged.bind(this);
|
|
3823
|
+
provider.on("accountsChanged", accountsChanged);
|
|
3824
|
+
}
|
|
3825
|
+
if (!chainChanged) {
|
|
3826
|
+
chainChanged = this.onChainChanged.bind(this);
|
|
3827
|
+
provider.on("chainChanged", chainChanged);
|
|
3828
|
+
}
|
|
3829
|
+
if (!disconnect) {
|
|
3830
|
+
disconnect = this.onDisconnect.bind(this);
|
|
3831
|
+
provider.on("disconnect", disconnect);
|
|
3832
|
+
}
|
|
3833
|
+
if (!sessionDelete) {
|
|
3834
|
+
sessionDelete = this.onSessionDelete.bind(this);
|
|
3835
|
+
provider.on("session_delete", sessionDelete);
|
|
3836
|
+
}
|
|
3837
|
+
return { accounts, chainId: currentChainId };
|
|
3838
|
+
} catch (error2) {
|
|
3839
|
+
if (/(user rejected|connection request reset)/i.test(error2?.message)) {
|
|
3840
|
+
throw new UserRejectedRequestError(error2);
|
|
3841
|
+
}
|
|
3842
|
+
throw error2;
|
|
3843
|
+
}
|
|
3844
|
+
},
|
|
3845
|
+
async disconnect() {
|
|
3846
|
+
const provider = await this.getProvider();
|
|
3847
|
+
try {
|
|
3848
|
+
await provider?.disconnect();
|
|
3849
|
+
} catch (error2) {
|
|
3850
|
+
if (!/No matching key/i.test(error2.message)) throw error2;
|
|
3851
|
+
} finally {
|
|
3852
|
+
if (chainChanged) {
|
|
3853
|
+
provider?.removeListener("chainChanged", chainChanged);
|
|
3854
|
+
chainChanged = void 0;
|
|
3855
|
+
}
|
|
3856
|
+
if (disconnect) {
|
|
3857
|
+
provider?.removeListener("disconnect", disconnect);
|
|
3858
|
+
disconnect = void 0;
|
|
3859
|
+
}
|
|
3860
|
+
if (!connect) {
|
|
3861
|
+
connect = this.onConnect.bind(this);
|
|
3862
|
+
provider?.on("connect", connect);
|
|
3863
|
+
}
|
|
3864
|
+
if (accountsChanged) {
|
|
3865
|
+
provider?.removeListener("accountsChanged", accountsChanged);
|
|
3866
|
+
accountsChanged = void 0;
|
|
3867
|
+
}
|
|
3868
|
+
if (sessionDelete) {
|
|
3869
|
+
provider?.removeListener("session_delete", sessionDelete);
|
|
3870
|
+
sessionDelete = void 0;
|
|
3871
|
+
}
|
|
3872
|
+
this.setRequestedChainsIds([]);
|
|
3873
|
+
}
|
|
3874
|
+
},
|
|
3875
|
+
async getAccounts() {
|
|
3876
|
+
const provider = await this.getProvider();
|
|
3877
|
+
return provider.accounts.map((x) => getAddress(x));
|
|
3878
|
+
},
|
|
3879
|
+
async getProvider() {
|
|
3880
|
+
async function initProvider() {
|
|
3881
|
+
const optionalChains = config.chains.map((x) => x.id);
|
|
3882
|
+
if (!optionalChains.length) return;
|
|
3883
|
+
const { EthereumProvider } = await import("@walletconnect/ethereum-provider");
|
|
3884
|
+
return await EthereumProvider.init({
|
|
3885
|
+
...parameters,
|
|
3886
|
+
disableProviderPing: true,
|
|
3887
|
+
optionalChains,
|
|
3888
|
+
projectId: parameters.projectId,
|
|
3889
|
+
rpcMap: Object.fromEntries(
|
|
3890
|
+
config.chains.map((chain) => {
|
|
3891
|
+
const [url] = extractRpcUrls({
|
|
3892
|
+
chain,
|
|
3893
|
+
transports: config.transports
|
|
3894
|
+
});
|
|
3895
|
+
return [chain.id, url];
|
|
3896
|
+
})
|
|
3897
|
+
),
|
|
3898
|
+
showQrModal: parameters.showQrModal ?? true
|
|
3899
|
+
});
|
|
3900
|
+
}
|
|
3901
|
+
if (!provider_) {
|
|
3902
|
+
if (!providerPromise) providerPromise = initProvider();
|
|
3903
|
+
provider_ = await providerPromise;
|
|
3904
|
+
provider_?.events.setMaxListeners(Number.POSITIVE_INFINITY);
|
|
3905
|
+
}
|
|
3906
|
+
return provider_;
|
|
3907
|
+
},
|
|
3908
|
+
async getChainId() {
|
|
3909
|
+
const provider = await this.getProvider();
|
|
3910
|
+
return provider.chainId;
|
|
3911
|
+
},
|
|
3912
|
+
async isAuthorized() {
|
|
3913
|
+
try {
|
|
3914
|
+
const [accounts, provider] = await Promise.all([this.getAccounts(), this.getProvider()]);
|
|
3915
|
+
if (!accounts.length) return false;
|
|
3916
|
+
const isChainsStale = await this.isChainsStale();
|
|
3917
|
+
if (isChainsStale && provider.session) {
|
|
3918
|
+
await provider.disconnect().catch(() => {
|
|
3919
|
+
});
|
|
3920
|
+
return false;
|
|
3921
|
+
}
|
|
3922
|
+
return true;
|
|
3923
|
+
} catch {
|
|
3924
|
+
return false;
|
|
3925
|
+
}
|
|
3926
|
+
},
|
|
3927
|
+
async switchChain({ addEthereumChainParameter, chainId }) {
|
|
3928
|
+
const provider = await this.getProvider();
|
|
3929
|
+
if (!provider) throw new ProviderNotFoundError();
|
|
3930
|
+
const chain = config.chains.find((x) => x.id === chainId);
|
|
3931
|
+
if (!chain) throw new SwitchChainError(new ChainNotConfiguredError());
|
|
3932
|
+
try {
|
|
3933
|
+
await Promise.all([
|
|
3934
|
+
new Promise((resolve) => {
|
|
3935
|
+
const listener2 = ({ chainId: currentChainId }) => {
|
|
3936
|
+
if (currentChainId === chainId) {
|
|
3937
|
+
config.emitter.off("change", listener2);
|
|
3938
|
+
resolve();
|
|
3939
|
+
}
|
|
3940
|
+
};
|
|
3941
|
+
config.emitter.on("change", listener2);
|
|
3942
|
+
}),
|
|
3943
|
+
provider.request({
|
|
3944
|
+
method: "wallet_switchEthereumChain",
|
|
3945
|
+
params: [{ chainId: numberToHex3(chainId) }]
|
|
3946
|
+
})
|
|
3947
|
+
]);
|
|
3948
|
+
const requestedChains = await this.getRequestedChainsIds();
|
|
3949
|
+
this.setRequestedChainsIds([...requestedChains, chainId]);
|
|
3950
|
+
return chain;
|
|
3951
|
+
} catch (err) {
|
|
3952
|
+
const error2 = err;
|
|
3953
|
+
if (/(user rejected)/i.test(error2.message)) throw new UserRejectedRequestError(error2);
|
|
3954
|
+
try {
|
|
3955
|
+
let blockExplorerUrls;
|
|
3956
|
+
if (addEthereumChainParameter?.blockExplorerUrls)
|
|
3957
|
+
blockExplorerUrls = addEthereumChainParameter.blockExplorerUrls;
|
|
3958
|
+
else blockExplorerUrls = chain.blockExplorers?.default.url ? [chain.blockExplorers?.default.url] : [];
|
|
3959
|
+
let rpcUrls;
|
|
3960
|
+
if (addEthereumChainParameter?.rpcUrls?.length) rpcUrls = addEthereumChainParameter.rpcUrls;
|
|
3961
|
+
else rpcUrls = [...chain.rpcUrls.default.http];
|
|
3962
|
+
const addEthereumChain = {
|
|
3963
|
+
blockExplorerUrls,
|
|
3964
|
+
chainId: numberToHex3(chainId),
|
|
3965
|
+
chainName: addEthereumChainParameter?.chainName ?? chain.name,
|
|
3966
|
+
iconUrls: addEthereumChainParameter?.iconUrls,
|
|
3967
|
+
nativeCurrency: addEthereumChainParameter?.nativeCurrency ?? chain.nativeCurrency,
|
|
3968
|
+
rpcUrls
|
|
3969
|
+
};
|
|
3970
|
+
await provider.request({
|
|
3971
|
+
method: "wallet_addEthereumChain",
|
|
3972
|
+
params: [addEthereumChain]
|
|
3973
|
+
});
|
|
3974
|
+
const requestedChains = await this.getRequestedChainsIds();
|
|
3975
|
+
this.setRequestedChainsIds([...requestedChains, chainId]);
|
|
3976
|
+
return chain;
|
|
3977
|
+
} catch (error3) {
|
|
3978
|
+
throw new UserRejectedRequestError(error3);
|
|
3979
|
+
}
|
|
3980
|
+
}
|
|
3981
|
+
},
|
|
3982
|
+
onAccountsChanged(accounts) {
|
|
3983
|
+
if (accounts.length === 0) this.onDisconnect();
|
|
3984
|
+
else
|
|
3985
|
+
config.emitter.emit("change", {
|
|
3986
|
+
accounts: accounts.map((x) => getAddress(x))
|
|
3987
|
+
});
|
|
3988
|
+
},
|
|
3989
|
+
onChainChanged(chain) {
|
|
3990
|
+
const chainId = Number(chain);
|
|
3991
|
+
config.emitter.emit("change", { chainId });
|
|
3992
|
+
},
|
|
3993
|
+
async onConnect(connectInfo) {
|
|
3994
|
+
const chainId = Number(connectInfo.chainId);
|
|
3995
|
+
const accounts = await this.getAccounts();
|
|
3996
|
+
config.emitter.emit("connect", { accounts, chainId });
|
|
3997
|
+
},
|
|
3998
|
+
async onDisconnect(_error) {
|
|
3999
|
+
this.setRequestedChainsIds([]);
|
|
4000
|
+
config.emitter.emit("disconnect");
|
|
4001
|
+
const provider = await this.getProvider();
|
|
4002
|
+
if (accountsChanged) {
|
|
4003
|
+
provider.removeListener("accountsChanged", accountsChanged);
|
|
4004
|
+
accountsChanged = void 0;
|
|
4005
|
+
}
|
|
4006
|
+
if (chainChanged) {
|
|
4007
|
+
provider.removeListener("chainChanged", chainChanged);
|
|
4008
|
+
chainChanged = void 0;
|
|
4009
|
+
}
|
|
4010
|
+
if (disconnect) {
|
|
4011
|
+
provider.removeListener("disconnect", disconnect);
|
|
4012
|
+
disconnect = void 0;
|
|
4013
|
+
}
|
|
4014
|
+
if (sessionDelete) {
|
|
4015
|
+
provider.removeListener("session_delete", sessionDelete);
|
|
4016
|
+
sessionDelete = void 0;
|
|
4017
|
+
}
|
|
4018
|
+
if (!connect) {
|
|
4019
|
+
connect = this.onConnect.bind(this);
|
|
4020
|
+
provider.on("connect", connect);
|
|
4021
|
+
}
|
|
4022
|
+
},
|
|
4023
|
+
onDisplayUri(uri) {
|
|
4024
|
+
config.emitter.emit("message", { type: "display_uri", data: uri });
|
|
4025
|
+
},
|
|
4026
|
+
onSessionDelete() {
|
|
4027
|
+
this.onDisconnect();
|
|
4028
|
+
},
|
|
4029
|
+
getNamespaceChainsIds() {
|
|
4030
|
+
if (!provider_) return [];
|
|
4031
|
+
const chainIds = provider_.session?.namespaces[NAMESPACE]?.accounts?.map(
|
|
4032
|
+
(account) => Number.parseInt(account.split(":")[1] || "")
|
|
4033
|
+
);
|
|
4034
|
+
return chainIds ?? [];
|
|
4035
|
+
},
|
|
4036
|
+
async getRequestedChainsIds() {
|
|
4037
|
+
return await config.storage?.getItem(this.requestedChainsStorageKey) ?? [];
|
|
4038
|
+
},
|
|
4039
|
+
/**
|
|
4040
|
+
* Checks if the target chains match the chains that were
|
|
4041
|
+
* initially requested by the connector for the WalletConnect session.
|
|
4042
|
+
* If there is a mismatch, this means that the chains on the connector
|
|
4043
|
+
* are considered stale, and need to be revalidated at a later point (via
|
|
4044
|
+
* connection).
|
|
4045
|
+
*
|
|
4046
|
+
* There may be a scenario where a dapp adds a chain to the
|
|
4047
|
+
* connector later on, however, this chain will not have been approved or rejected
|
|
4048
|
+
* by the wallet. In this case, the chain is considered stale.
|
|
4049
|
+
*/
|
|
4050
|
+
async isChainsStale() {
|
|
4051
|
+
if (!isNewChainsStale) return false;
|
|
4052
|
+
const connectorChains = config.chains.map((x) => x.id);
|
|
4053
|
+
const namespaceChains = this.getNamespaceChainsIds();
|
|
4054
|
+
if (namespaceChains.length && !namespaceChains.some((id) => connectorChains.includes(id))) return false;
|
|
4055
|
+
const requestedChains = await this.getRequestedChainsIds();
|
|
4056
|
+
return !connectorChains.every((id) => requestedChains.includes(id));
|
|
4057
|
+
},
|
|
4058
|
+
async setRequestedChainsIds(chains) {
|
|
4059
|
+
await config.storage?.setItem(this.requestedChainsStorageKey, chains);
|
|
4060
|
+
},
|
|
4061
|
+
get requestedChainsStorageKey() {
|
|
4062
|
+
return `${this.id}.requestedChains`;
|
|
4063
|
+
}
|
|
4064
|
+
}));
|
|
4065
|
+
}
|
|
4066
|
+
function extractRpcUrls(parameters) {
|
|
4067
|
+
const { chain } = parameters;
|
|
4068
|
+
const fallbackUrl = chain.rpcUrls.default.http[0];
|
|
4069
|
+
if (!parameters.transports) return [fallbackUrl];
|
|
4070
|
+
const transport = parameters.transports?.[chain.id]?.({ chain });
|
|
4071
|
+
const transports = transport?.value?.transports || [transport];
|
|
4072
|
+
return transports.map(({ value }) => value?.url || fallbackUrl);
|
|
2380
4073
|
}
|
|
2381
4074
|
|
|
2382
4075
|
// src/createWagmiConfig.ts
|
|
2383
4076
|
function createWagmiConfig(config) {
|
|
2384
|
-
const
|
|
2385
|
-
const
|
|
2386
|
-
|
|
2387
|
-
|
|
2388
|
-
|
|
2389
|
-
|
|
2390
|
-
|
|
4077
|
+
const connectors = [];
|
|
4078
|
+
const shouldUseSafeConnector = !(typeof window === "undefined") && window?.parent !== window;
|
|
4079
|
+
if (shouldUseSafeConnector) {
|
|
4080
|
+
connectors.push(
|
|
4081
|
+
safe({
|
|
4082
|
+
allowedDomains: [/gnosis-safe.io$/, /app.safe.global$/]
|
|
4083
|
+
})
|
|
4084
|
+
);
|
|
4085
|
+
}
|
|
4086
|
+
connectors.push(
|
|
4087
|
+
injected({ target: "metaMask" }),
|
|
4088
|
+
coinbaseWallet({
|
|
4089
|
+
appName: config.appName,
|
|
4090
|
+
overrideIsMetaMask: false
|
|
4091
|
+
})
|
|
4092
|
+
);
|
|
4093
|
+
if (config.walletConnectProjectId) {
|
|
4094
|
+
connectors.push(
|
|
4095
|
+
walletConnect({
|
|
4096
|
+
showQrModal: false,
|
|
4097
|
+
projectId: config.walletConnectProjectId
|
|
4098
|
+
})
|
|
4099
|
+
);
|
|
4100
|
+
}
|
|
4101
|
+
const configParams = getDefaultConfig({
|
|
2391
4102
|
chains: config.chains,
|
|
2392
4103
|
transports: config.transports,
|
|
2393
|
-
pollingInterval: config.pollingInterval
|
|
4104
|
+
pollingInterval: config.pollingInterval,
|
|
4105
|
+
appName: config.appName,
|
|
4106
|
+
walletConnectProjectId: config.walletConnectProjectId,
|
|
4107
|
+
enableFamily: false,
|
|
4108
|
+
connectors
|
|
2394
4109
|
});
|
|
4110
|
+
return createConfig(configParams);
|
|
2395
4111
|
}
|
|
2396
4112
|
|
|
2397
|
-
// src/
|
|
2398
|
-
import {
|
|
2399
|
-
function
|
|
2400
|
-
|
|
2401
|
-
|
|
2402
|
-
}
|
|
2403
|
-
|
|
2404
|
-
|
|
2405
|
-
|
|
4113
|
+
// src/utils/withFeeCache.ts
|
|
4114
|
+
import { createClient as createClient3, http as http3 } from "viem";
|
|
4115
|
+
function withFeeCache(chain, options = { refreshInterval: 1e4 }) {
|
|
4116
|
+
if (chain.fees?.estimateFeesPerGas) {
|
|
4117
|
+
throw new Error("withFeeCache: estimateFeesPerGas already defined in chain config");
|
|
4118
|
+
}
|
|
4119
|
+
const client = createClient3({
|
|
4120
|
+
chain,
|
|
4121
|
+
transport: http3()
|
|
2406
4122
|
});
|
|
4123
|
+
return {
|
|
4124
|
+
...chain,
|
|
4125
|
+
fees: {
|
|
4126
|
+
...chain.fees,
|
|
4127
|
+
estimateFeesPerGas: cachedFeesPerGas(client, options)
|
|
4128
|
+
}
|
|
4129
|
+
};
|
|
2407
4130
|
}
|
|
2408
4131
|
|
|
2409
4132
|
// src/validateSigner.ts
|
|
@@ -2454,11 +4177,12 @@ export {
|
|
|
2454
4177
|
EntryKitProvider,
|
|
2455
4178
|
createWagmiConfig,
|
|
2456
4179
|
defineConfig,
|
|
2457
|
-
|
|
2458
|
-
getWallets,
|
|
4180
|
+
getFundsQueryOptions,
|
|
2459
4181
|
internal_validateSigner,
|
|
2460
4182
|
useAccountModal,
|
|
2461
4183
|
useEntryKitConfig,
|
|
2462
|
-
|
|
4184
|
+
useFunds,
|
|
4185
|
+
useSessionClientReady as useSessionClient,
|
|
4186
|
+
withFeeCache
|
|
2463
4187
|
};
|
|
2464
4188
|
//# sourceMappingURL=internal.js.map
|