@volr/react-ui 0.1.105 → 0.1.107
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +468 -208
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +336 -76
- package/dist/index.js.map +1 -1
- package/package.json +3 -3
package/dist/index.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var React13 = require('react');
|
|
4
4
|
var reactDom = require('react-dom');
|
|
5
5
|
var react = require('@volr/react');
|
|
6
6
|
var jsxRuntime = require('react/jsx-runtime');
|
|
@@ -10,7 +10,7 @@ var qrcode_react = require('qrcode.react');
|
|
|
10
10
|
|
|
11
11
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
12
12
|
|
|
13
|
-
var
|
|
13
|
+
var React13__default = /*#__PURE__*/_interopDefault(React13);
|
|
14
14
|
|
|
15
15
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
16
16
|
var __esm = (fn, res) => function __init() {
|
|
@@ -618,13 +618,13 @@ var translations = {
|
|
|
618
618
|
function getTranslations(locale = "en") {
|
|
619
619
|
return translations[locale] || translations.en;
|
|
620
620
|
}
|
|
621
|
-
var I18nContext =
|
|
621
|
+
var I18nContext = React13.createContext(null);
|
|
622
622
|
function interpolate(text, params) {
|
|
623
623
|
if (!params) return text;
|
|
624
624
|
return text.replace(/\{\{(\w+)\}\}/g, (_, key) => params[key] ?? `{{${key}}}`);
|
|
625
625
|
}
|
|
626
626
|
function useI18n() {
|
|
627
|
-
const context =
|
|
627
|
+
const context = React13.useContext(I18nContext);
|
|
628
628
|
if (!context) {
|
|
629
629
|
return {
|
|
630
630
|
locale: "en",
|
|
@@ -659,9 +659,9 @@ function detectLocale() {
|
|
|
659
659
|
return lang.startsWith("ko") ? "ko" : "en";
|
|
660
660
|
}
|
|
661
661
|
function I18nProvider({ children }) {
|
|
662
|
-
const [locale, setLocale] =
|
|
663
|
-
const translations2 =
|
|
664
|
-
const t =
|
|
662
|
+
const [locale, setLocale] = React13.useState(detectLocale());
|
|
663
|
+
const translations2 = React13.useMemo(() => getTranslations(locale), [locale]);
|
|
664
|
+
const t = React13.useMemo(() => {
|
|
665
665
|
return (key, params) => {
|
|
666
666
|
const keys = key.split(".");
|
|
667
667
|
let value2 = translations2;
|
|
@@ -678,7 +678,7 @@ function I18nProvider({ children }) {
|
|
|
678
678
|
return typeof value2 === "string" ? interpolate(value2, params) : key;
|
|
679
679
|
};
|
|
680
680
|
}, [translations2]);
|
|
681
|
-
const value =
|
|
681
|
+
const value = React13.useMemo(
|
|
682
682
|
() => ({
|
|
683
683
|
locale,
|
|
684
684
|
translations: translations2,
|
|
@@ -690,9 +690,9 @@ function I18nProvider({ children }) {
|
|
|
690
690
|
return /* @__PURE__ */ jsxRuntime.jsx(I18nContext.Provider, { value, children });
|
|
691
691
|
}
|
|
692
692
|
var useTranslation = useI18n;
|
|
693
|
-
var VolrModalContext =
|
|
693
|
+
var VolrModalContext = React13.createContext(null);
|
|
694
694
|
var useVolrModal = () => {
|
|
695
|
-
const context =
|
|
695
|
+
const context = React13.useContext(VolrModalContext);
|
|
696
696
|
if (!context) {
|
|
697
697
|
throw new Error("useVolrModal must be used within VolrUIProvider");
|
|
698
698
|
}
|
|
@@ -701,17 +701,17 @@ var useVolrModal = () => {
|
|
|
701
701
|
var VolrModalProvider = ({
|
|
702
702
|
children
|
|
703
703
|
}) => {
|
|
704
|
-
const [isOpen, setIsOpen] =
|
|
705
|
-
const [mode, setMode] =
|
|
706
|
-
const [asset, setAsset] =
|
|
707
|
-
const [paymentOptions, setPaymentOptions] =
|
|
708
|
-
const open =
|
|
704
|
+
const [isOpen, setIsOpen] = React13.useState(false);
|
|
705
|
+
const [mode, setMode] = React13.useState("account");
|
|
706
|
+
const [asset, setAsset] = React13.useState(null);
|
|
707
|
+
const [paymentOptions, setPaymentOptions] = React13.useState(null);
|
|
708
|
+
const open = React13.useCallback((options) => {
|
|
709
709
|
setMode(options?.mode ?? "account");
|
|
710
710
|
setAsset(options?.asset ?? null);
|
|
711
711
|
setPaymentOptions(options?.payment ?? null);
|
|
712
712
|
setIsOpen(true);
|
|
713
713
|
}, []);
|
|
714
|
-
const close =
|
|
714
|
+
const close = React13.useCallback(() => {
|
|
715
715
|
setIsOpen(false);
|
|
716
716
|
setAsset(null);
|
|
717
717
|
setPaymentOptions(null);
|
|
@@ -725,11 +725,11 @@ function cn(...inputs) {
|
|
|
725
725
|
return twMerge(clsx.clsx(inputs));
|
|
726
726
|
}
|
|
727
727
|
function useMediaQuery(query) {
|
|
728
|
-
const [matches, setMatches] =
|
|
728
|
+
const [matches, setMatches] = React13.useState(() => {
|
|
729
729
|
if (typeof window === "undefined") return false;
|
|
730
730
|
return window.matchMedia(query).matches;
|
|
731
731
|
});
|
|
732
|
-
|
|
732
|
+
React13.useEffect(() => {
|
|
733
733
|
if (typeof window === "undefined") return;
|
|
734
734
|
const mql = window.matchMedia(query);
|
|
735
735
|
const handler = (event) => setMatches(event.matches);
|
|
@@ -741,14 +741,14 @@ function useMediaQuery(query) {
|
|
|
741
741
|
}
|
|
742
742
|
|
|
743
743
|
// src/generated/volr-sdk-css.ts
|
|
744
|
-
var VOLR_SDK_CSS = '/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--volr-tw-translate-x:0;--volr-tw-translate-y:0;--volr-tw-translate-z:0;--volr-tw-space-y-reverse:0;--volr-tw-border-style:solid;--volr-tw-gradient-position:initial;--volr-tw-gradient-from:#0000;--volr-tw-gradient-via:#0000;--volr-tw-gradient-to:#0000;--volr-tw-gradient-stops:initial;--volr-tw-gradient-via-stops:initial;--volr-tw-gradient-from-position:0%;--volr-tw-gradient-via-position:50%;--volr-tw-gradient-to-position:100%;--volr-tw-leading:initial;--volr-tw-font-weight:initial;--volr-tw-shadow:0 0 #0000;--volr-tw-shadow-color:initial;--volr-tw-shadow-alpha:100%;--volr-tw-inset-shadow:0 0 #0000;--volr-tw-inset-shadow-color:initial;--volr-tw-inset-shadow-alpha:100%;--volr-tw-ring-color:initial;--volr-tw-ring-shadow:0 0 #0000;--volr-tw-inset-ring-color:initial;--volr-tw-inset-ring-shadow:0 0 #0000;--volr-tw-ring-inset:initial;--volr-tw-ring-offset-width:0px;--volr-tw-ring-offset-color:#fff;--volr-tw-ring-offset-shadow:0 0 #0000;--volr-tw-blur:initial;--volr-tw-brightness:initial;--volr-tw-contrast:initial;--volr-tw-grayscale:initial;--volr-tw-hue-rotate:initial;--volr-tw-invert:initial;--volr-tw-opacity:initial;--volr-tw-saturate:initial;--volr-tw-sepia:initial;--volr-tw-drop-shadow:initial;--volr-tw-drop-shadow-color:initial;--volr-tw-drop-shadow-alpha:100%;--volr-tw-drop-shadow-size:initial;--volr-tw-duration:initial;--volr-tw-ease:initial}}}@layer theme{:root,:host{--volr-font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--volr-font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--volr-color-red-50:oklch(97.1% .013 17.38);--volr-color-red-200:oklch(88.5% .062 18.334);--volr-color-red-500:oklch(63.7% .237 25.331);--volr-color-red-600:oklch(57.7% .245 27.325);--volr-color-red-700:oklch(50.5% .213 27.518);--volr-color-orange-600:oklch(64.6% .222 41.116);--volr-color-green-50:oklch(98.2% .018 155.826);--volr-color-green-600:oklch(62.7% .194 149.214);--volr-color-emerald-300:oklch(84.5% .143 164.978);--volr-color-emerald-400:oklch(76.5% .177 163.223);--volr-color-emerald-500:oklch(69.6% .17 162.48);--volr-color-emerald-600:oklch(59.6% .145 163.225);--volr-color-teal-400:oklch(77.7% .152 181.912);--volr-color-teal-500:oklch(70.4% .14 182.503);--volr-color-cyan-400:oklch(78.9% .154 211.53);--volr-color-blue-600:oklch(54.6% .245 262.881);--volr-color-purple-600:oklch(55.8% .288 302.321);--volr-color-slate-50:oklch(98.4% .003 247.858);--volr-color-slate-100:oklch(96.8% .007 247.896);--volr-color-slate-200:oklch(92.9% .013 255.508);--volr-color-slate-300:oklch(86.9% .022 252.894);--volr-color-slate-400:oklch(70.4% .04 256.788);--volr-color-slate-500:oklch(55.4% .046 257.417);--volr-color-slate-600:oklch(44.6% .043 257.281);--volr-color-slate-900:oklch(20.8% .042 265.755);--volr-color-gray-500:oklch(55.1% .027 264.364);--volr-color-black:#000;--volr-color-white:#fff;--volr-spacing:.25rem;--volr-container-md:28rem;--volr-container-4xl:56rem;--volr-text-xs:.75rem;--volr-text-xs--line-height:calc(1/.75);--volr-text-sm:.875rem;--volr-text-sm--line-height:calc(1.25/.875);--volr-text-base:1rem;--volr-text-base--line-height:calc(1.5/1);--volr-text-lg:1.125rem;--volr-text-lg--line-height:calc(1.75/1.125);--volr-text-xl:1.25rem;--volr-text-xl--line-height:calc(1.75/1.25);--volr-text-2xl:1.5rem;--volr-text-2xl--line-height:calc(2/1.5);--volr-text-8xl:6rem;--volr-text-8xl--line-height:1;--volr-font-weight-medium:500;--volr-font-weight-semibold:600;--volr-font-weight-bold:700;--volr-leading-relaxed:1.625;--volr-radius-md:.375rem;--volr-radius-lg:.5rem;--volr-radius-xl:.75rem;--volr-radius-2xl:1rem;--volr-radius-3xl:1.5rem;--volr-ease-out:cubic-bezier(0,0,.2,1);--volr-animate-spin:spin 1s linear infinite;--volr-animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite;--volr-blur-2xl:40px;--volr-default-transition-duration:.15s;--volr-default-transition-timing-function:cubic-bezier(.4,0,.2,1);--volr-default-font-family:var(--volr-font-sans);--volr-default-mono-font-family:var(--volr-font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--volr-default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--volr-default-font-feature-settings,normal);font-variation-settings:var(--volr-default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--volr-default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--volr-default-mono-font-feature-settings,normal);font-variation-settings:var(--volr-default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}:host{--volr-primary-color:var(--volr-accent-color,#303030);--volr-font-family:var(--volr-custom-font,inherit);--volr-bg:#fff;--volr-bg-secondary:#f8fafc;--volr-bg-tertiary:#f1f5f9;--volr-text:#0f172a;--volr-text-secondary:#475569;--volr-text-muted:#94a3b8;--volr-border:#e2e8f0;--volr-border-strong:#cbd5e1;--volr-hover-bg:#f8fafc;--volr-error-bg:#fef2f2;--volr-error-border:#fecaca;--volr-error-text:#991b1b}:host([data-theme=dark]){--volr-bg:#1c1c1e;--volr-bg-secondary:#2c2c2e;--volr-bg-tertiary:#3a3a3c;--volr-text:#f5f5f7;--volr-text-secondary:#c7c7cc;--volr-text-muted:#8e8e93;--volr-border:#3a3a3c;--volr-border-strong:#48484a;--volr-hover-bg:#2c2c2e;--volr-error-bg:#3c1f1f;--volr-error-border:#7f1d1d;--volr-error-text:#fca5a5}*,:before,:after{box-sizing:border-box}*{font-family:var(--volr-font-family);color:var(--volr-text)}button,input,select,textarea{color:var(--volr-text);background-color:#0000}button{cursor:pointer;background-color:#0000}input::placeholder{color:var(--volr-text-muted)}h1,h2,h3{color:var(--volr-text);margin:0;font-weight:700}h1{font-size:1.875rem;line-height:2.25rem}h2{font-size:1.5rem;line-height:2rem}h3{font-size:1.25rem;line-height:1.75rem}p{margin:0}}@layer components{.volr-dialog-overlay{inset:calc(var(--volr-spacing)*0);z-index:40;background-color:var(--volr-color-black);position:fixed}@supports (color:color-mix(in lab, red, red)){.volr-dialog-overlay{background-color:color-mix(in oklab,var(--volr-color-black)45%,transparent)}}.volr-dialog-content{z-index:50;border-radius:var(--volr-radius-2xl);border-style:var(--volr-tw-border-style);padding:calc(var(--volr-spacing)*7);--volr-tw-shadow:0 20px 25px -5px var(--volr-tw-shadow-color,#0000001a),0 8px 10px -6px var(--volr-tw-shadow-color,#0000001a);box-shadow:var(--volr-tw-inset-shadow),var(--volr-tw-inset-ring-shadow),var(--volr-tw-ring-offset-shadow),var(--volr-tw-ring-shadow),var(--volr-tw-shadow);background-color:var(--volr-bg);border-width:1px;border-color:var(--volr-border-strong);width:calc(100% - 2rem);max-width:28rem;max-height:85vh;position:fixed;top:50%;left:50%;overflow-y:auto;transform:translate(-50%,-50%)}@media (max-width:640px){.volr-dialog-content{top:auto;right:calc(var(--volr-spacing)*0);bottom:calc(var(--volr-spacing)*0);left:calc(var(--volr-spacing)*0);border-radius:1.25rem 1.25rem 0 0;width:100%;max-width:100%;margin:0 auto;transform:translateY(0)}}.volr-dialog-close{top:calc(var(--volr-spacing)*4);right:calc(var(--volr-spacing)*4);height:calc(var(--volr-spacing)*8);width:calc(var(--volr-spacing)*8);color:var(--volr-text-muted);cursor:pointer;background-color:#0000;border:none;border-radius:3.40282e38px;justify-content:center;align-items:center;display:inline-flex;position:absolute}.volr-dialog-close:hover{background-color:var(--volr-hover-bg);color:var(--volr-text-secondary)}.volr-dialog-close:focus-visible{box-shadow:0 0 0 2px var(--volr-border-strong);outline:none}.volr-dialog-close-icon{height:calc(var(--volr-spacing)*4);width:calc(var(--volr-spacing)*4)}.volr-email-input{border:1px solid var(--volr-border-strong);background-color:var(--volr-bg);width:100%;color:var(--volr-text);border-radius:.5rem;outline:none;padding:.75rem .75rem .75rem 2.75rem;font-size:1rem;line-height:1.5}.volr-email-input::placeholder{color:var(--volr-text-muted)}.volr-email-input:focus{border-color:var(--volr-border-strong);box-shadow:0 0 0 2px var(--volr-border-strong)}.volr-option-button{border:1px solid var(--volr-border);background-color:var(--volr-bg);width:100%;color:var(--volr-text);cursor:pointer;border-radius:.5rem;align-items:center;gap:.75rem;padding:.75rem;transition:background-color .15s ease-out,border-color .15s ease-out,box-shadow .15s ease-out;display:flex}.volr-option-button:hover{background-color:var(--volr-hover-bg);border-color:var(--volr-border)}.volr-option-button:focus-visible{box-shadow:0 0 0 2px var(--volr-border-strong);outline:none}}@layer utilities{.volr\\:pointer-events-auto{pointer-events:auto}.volr\\:pointer-events-none{pointer-events:none}.volr\\:sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.volr\\:absolute{position:absolute}.volr\\:fixed{position:fixed}.volr\\:relative{position:relative}.volr\\:inset-0{inset:calc(var(--volr-spacing)*0)}.volr\\:-top-3{top:calc(var(--volr-spacing)*-3)}.volr\\:top-1\\/2{top:50%}.volr\\:-right-3{right:calc(var(--volr-spacing)*-3)}.volr\\:-right-4{right:calc(var(--volr-spacing)*-4)}.volr\\:right-2{right:calc(var(--volr-spacing)*2)}.volr\\:bottom-0{bottom:calc(var(--volr-spacing)*0)}.volr\\:-left-4{left:calc(var(--volr-spacing)*-4)}.volr\\:left-3{left:calc(var(--volr-spacing)*3)}.volr\\:-z-10{z-index:calc(10*-1)}.volr\\:z-10{z-index:10}.volr\\:z-20{z-index:20}.volr\\:z-40{z-index:40}.volr\\:z-50{z-index:50}.volr\\:mx-auto{margin-inline:auto}.volr\\:my-6{margin-block:calc(var(--volr-spacing)*6)}.volr\\:mt-0\\.5{margin-top:calc(var(--volr-spacing)*.5)}.volr\\:mt-1{margin-top:calc(var(--volr-spacing)*1)}.volr\\:mt-2{margin-top:calc(var(--volr-spacing)*2)}.volr\\:mt-3{margin-top:calc(var(--volr-spacing)*3)}.volr\\:mt-4{margin-top:calc(var(--volr-spacing)*4)}.volr\\:mt-6{margin-top:calc(var(--volr-spacing)*6)}.volr\\:mt-8{margin-top:calc(var(--volr-spacing)*8)}.volr\\:mb-1{margin-bottom:calc(var(--volr-spacing)*1)}.volr\\:mb-2{margin-bottom:calc(var(--volr-spacing)*2)}.volr\\:mb-3{margin-bottom:calc(var(--volr-spacing)*3)}.volr\\:mb-4{margin-bottom:calc(var(--volr-spacing)*4)}.volr\\:mb-5{margin-bottom:calc(var(--volr-spacing)*5)}.volr\\:mb-6{margin-bottom:calc(var(--volr-spacing)*6)}.volr\\:mb-8{margin-bottom:calc(var(--volr-spacing)*8)}.volr\\:-ml-2{margin-left:calc(var(--volr-spacing)*-2)}.volr\\:line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.volr\\:flex{display:flex}.volr\\:grid{display:grid}.volr\\:inline-block{display:inline-block}.volr\\:inline-flex{display:inline-flex}.volr\\:h-1{height:calc(var(--volr-spacing)*1)}.volr\\:h-1\\.5{height:calc(var(--volr-spacing)*1.5)}.volr\\:h-2{height:calc(var(--volr-spacing)*2)}.volr\\:h-3{height:calc(var(--volr-spacing)*3)}.volr\\:h-4{height:calc(var(--volr-spacing)*4)}.volr\\:h-5{height:calc(var(--volr-spacing)*5)}.volr\\:h-6{height:calc(var(--volr-spacing)*6)}.volr\\:h-7{height:calc(var(--volr-spacing)*7)}.volr\\:h-8{height:calc(var(--volr-spacing)*8)}.volr\\:h-10{height:calc(var(--volr-spacing)*10)}.volr\\:h-12{height:calc(var(--volr-spacing)*12)}.volr\\:h-14{height:calc(var(--volr-spacing)*14)}.volr\\:h-16{height:calc(var(--volr-spacing)*16)}.volr\\:h-20{height:calc(var(--volr-spacing)*20)}.volr\\:h-24{height:calc(var(--volr-spacing)*24)}.volr\\:h-40{height:calc(var(--volr-spacing)*40)}.volr\\:h-44{height:calc(var(--volr-spacing)*44)}.volr\\:h-48{height:calc(var(--volr-spacing)*48)}.volr\\:h-\\[0\\.8em\\]{height:.8em}.volr\\:h-\\[200px\\]{height:200px}.volr\\:h-full{height:100%}.volr\\:h-px{height:1px}.volr\\:max-h-36{max-height:calc(var(--volr-spacing)*36)}.volr\\:max-h-60{max-height:calc(var(--volr-spacing)*60)}.volr\\:max-h-96{max-height:calc(var(--volr-spacing)*96)}.volr\\:max-h-\\[85vh\\]{max-height:85vh}.volr\\:max-h-\\[90vh\\]{max-height:90vh}.volr\\:min-h-\\[120px\\]{min-height:120px}.volr\\:min-h-\\[500px\\]{min-height:500px}.volr\\:w-1\\.5{width:calc(var(--volr-spacing)*1.5)}.volr\\:w-2{width:calc(var(--volr-spacing)*2)}.volr\\:w-4{width:calc(var(--volr-spacing)*4)}.volr\\:w-5{width:calc(var(--volr-spacing)*5)}.volr\\:w-6{width:calc(var(--volr-spacing)*6)}.volr\\:w-7{width:calc(var(--volr-spacing)*7)}.volr\\:w-8{width:calc(var(--volr-spacing)*8)}.volr\\:w-10{width:calc(var(--volr-spacing)*10)}.volr\\:w-12{width:calc(var(--volr-spacing)*12)}.volr\\:w-14{width:calc(var(--volr-spacing)*14)}.volr\\:w-16{width:calc(var(--volr-spacing)*16)}.volr\\:w-20{width:calc(var(--volr-spacing)*20)}.volr\\:w-24{width:calc(var(--volr-spacing)*24)}.volr\\:w-32{width:calc(var(--volr-spacing)*32)}.volr\\:w-36{width:calc(var(--volr-spacing)*36)}.volr\\:w-40{width:calc(var(--volr-spacing)*40)}.volr\\:w-44{width:calc(var(--volr-spacing)*44)}.volr\\:w-48{width:calc(var(--volr-spacing)*48)}.volr\\:w-\\[200px\\]{width:200px}.volr\\:w-auto{width:auto}.volr\\:w-full{width:100%}.volr\\:max-w-4xl{max-width:var(--volr-container-4xl)}.volr\\:max-w-full{max-width:100%}.volr\\:max-w-md{max-width:var(--volr-container-md)}.volr\\:max-w-none{max-width:none}.volr\\:min-w-0{min-width:calc(var(--volr-spacing)*0)}.volr\\:flex-1{flex:1}.volr\\:flex-shrink-0,.volr\\:shrink-0{flex-shrink:0}.volr\\:-translate-y-1\\/2{--volr-tw-translate-y:calc(calc(1/2*100%)*-1);translate:var(--volr-tw-translate-x)var(--volr-tw-translate-y)}.volr\\:rotate-180{rotate:180deg}.volr\\:animate-\\[volrFadeIn_0\\.2s_ease-out\\]{animation:.2s ease-out volrFadeIn}.volr\\:animate-pulse{animation:var(--volr-animate-pulse)}.volr\\:animate-spin{animation:var(--volr-animate-spin)}.volr\\:list-inside{list-style-position:inside}.volr\\:list-decimal{list-style-type:decimal}.volr\\:grid-cols-\\[minmax\\(0\\,1\\.1fr\\)_minmax\\(0\\,1fr\\)\\]{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}.volr\\:flex-col{flex-direction:column}.volr\\:flex-wrap{flex-wrap:wrap}.volr\\:items-baseline{align-items:baseline}.volr\\:items-center{align-items:center}.volr\\:items-end{align-items:flex-end}.volr\\:items-start{align-items:flex-start}.volr\\:justify-between{justify-content:space-between}.volr\\:justify-center{justify-content:center}.volr\\:gap-1{gap:calc(var(--volr-spacing)*1)}.volr\\:gap-2{gap:calc(var(--volr-spacing)*2)}.volr\\:gap-3{gap:calc(var(--volr-spacing)*3)}.volr\\:gap-4{gap:calc(var(--volr-spacing)*4)}:where(.volr\\:space-y-1>:not(:last-child)){--volr-tw-space-y-reverse:0;margin-block-start:calc(calc(var(--volr-spacing)*1)*var(--volr-tw-space-y-reverse));margin-block-end:calc(calc(var(--volr-spacing)*1)*calc(1 - var(--volr-tw-space-y-reverse)))}:where(.volr\\:space-y-2>:not(:last-child)){--volr-tw-space-y-reverse:0;margin-block-start:calc(calc(var(--volr-spacing)*2)*var(--volr-tw-space-y-reverse));margin-block-end:calc(calc(var(--volr-spacing)*2)*calc(1 - var(--volr-tw-space-y-reverse)))}:where(.volr\\:space-y-3>:not(:last-child)){--volr-tw-space-y-reverse:0;margin-block-start:calc(calc(var(--volr-spacing)*3)*var(--volr-tw-space-y-reverse));margin-block-end:calc(calc(var(--volr-spacing)*3)*calc(1 - var(--volr-tw-space-y-reverse)))}:where(.volr\\:space-y-4>:not(:last-child)){--volr-tw-space-y-reverse:0;margin-block-start:calc(calc(var(--volr-spacing)*4)*var(--volr-tw-space-y-reverse));margin-block-end:calc(calc(var(--volr-spacing)*4)*calc(1 - var(--volr-tw-space-y-reverse)))}:where(.volr\\:space-y-6>:not(:last-child)){--volr-tw-space-y-reverse:0;margin-block-start:calc(calc(var(--volr-spacing)*6)*var(--volr-tw-space-y-reverse));margin-block-end:calc(calc(var(--volr-spacing)*6)*calc(1 - var(--volr-tw-space-y-reverse)))}:where(.volr\\:space-y-8>:not(:last-child)){--volr-tw-space-y-reverse:0;margin-block-start:calc(calc(var(--volr-spacing)*8)*var(--volr-tw-space-y-reverse));margin-block-end:calc(calc(var(--volr-spacing)*8)*calc(1 - var(--volr-tw-space-y-reverse)))}.volr\\:truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.volr\\:overflow-hidden{overflow:hidden}.volr\\:overflow-visible{overflow:visible}.volr\\:overflow-y-auto{overflow-y:auto}.volr\\:rounded{border-radius:.25rem}.volr\\:rounded-2xl{border-radius:var(--volr-radius-2xl)}.volr\\:rounded-full{border-radius:3.40282e38px}.volr\\:rounded-lg{border-radius:var(--volr-radius-lg)}.volr\\:rounded-md{border-radius:var(--volr-radius-md)}.volr\\:rounded-xl{border-radius:var(--volr-radius-xl)}.volr\\:rounded-t-2xl{border-top-left-radius:var(--volr-radius-2xl);border-top-right-radius:var(--volr-radius-2xl)}.volr\\:rounded-t-3xl{border-top-left-radius:var(--volr-radius-3xl);border-top-right-radius:var(--volr-radius-3xl)}.volr\\:border{border-style:var(--volr-tw-border-style);border-width:1px}.volr\\:border-2{border-style:var(--volr-tw-border-style);border-width:2px}.volr\\:border-4{border-style:var(--volr-tw-border-style);border-width:4px}.volr\\:border-t{border-top-style:var(--volr-tw-border-style);border-top-width:1px}.volr\\:border-t-2{border-top-style:var(--volr-tw-border-style);border-top-width:2px}.volr\\:border-red-200{border-color:var(--volr-color-red-200)}.volr\\:border-slate-200{border-color:var(--volr-color-slate-200)}.volr\\:border-slate-300{border-color:var(--volr-color-slate-300)}.volr\\:border-white{border-color:var(--volr-color-white)}.volr\\:border-t-slate-600{border-top-color:var(--volr-color-slate-600)}.volr\\:bg-black\\/45{background-color:var(--volr-color-black)}@supports (color:color-mix(in lab, red, red)){.volr\\:bg-black\\/45{background-color:color-mix(in oklab,var(--volr-color-black)45%,transparent)}}.volr\\:bg-cyan-400{background-color:var(--volr-color-cyan-400)}.volr\\:bg-emerald-300{background-color:var(--volr-color-emerald-300)}.volr\\:bg-emerald-400{background-color:var(--volr-color-emerald-400)}.volr\\:bg-green-50{background-color:var(--volr-color-green-50)}.volr\\:bg-red-50{background-color:var(--volr-color-red-50)}.volr\\:bg-slate-50{background-color:var(--volr-color-slate-50)}.volr\\:bg-slate-100{background-color:var(--volr-color-slate-100)}.volr\\:bg-slate-200{background-color:var(--volr-color-slate-200)}.volr\\:bg-slate-900{background-color:var(--volr-color-slate-900)}.volr\\:bg-teal-400{background-color:var(--volr-color-teal-400)}.volr\\:bg-white{background-color:var(--volr-color-white)}.volr\\:bg-linear-to-br{--volr-tw-gradient-position:to bottom right}@supports (background-image:linear-gradient(in lab, red, red)){.volr\\:bg-linear-to-br{--volr-tw-gradient-position:to bottom right in oklab}}.volr\\:bg-linear-to-br{background-image:linear-gradient(var(--volr-tw-gradient-stops))}.volr\\:from-emerald-400{--volr-tw-gradient-from:var(--volr-color-emerald-400);--volr-tw-gradient-stops:var(--volr-tw-gradient-via-stops,var(--volr-tw-gradient-position),var(--volr-tw-gradient-from)var(--volr-tw-gradient-from-position),var(--volr-tw-gradient-to)var(--volr-tw-gradient-to-position))}.volr\\:from-emerald-500{--volr-tw-gradient-from:var(--volr-color-emerald-500);--volr-tw-gradient-stops:var(--volr-tw-gradient-via-stops,var(--volr-tw-gradient-position),var(--volr-tw-gradient-from)var(--volr-tw-gradient-from-position),var(--volr-tw-gradient-to)var(--volr-tw-gradient-to-position))}.volr\\:to-teal-500{--volr-tw-gradient-to:var(--volr-color-teal-500);--volr-tw-gradient-stops:var(--volr-tw-gradient-via-stops,var(--volr-tw-gradient-position),var(--volr-tw-gradient-from)var(--volr-tw-gradient-from-position),var(--volr-tw-gradient-to)var(--volr-tw-gradient-to-position))}.volr\\:object-cover{object-fit:cover}.volr\\:p-1{padding:calc(var(--volr-spacing)*1)}.volr\\:p-2{padding:calc(var(--volr-spacing)*2)}.volr\\:p-3{padding:calc(var(--volr-spacing)*3)}.volr\\:p-4{padding:calc(var(--volr-spacing)*4)}.volr\\:p-5{padding:calc(var(--volr-spacing)*5)}.volr\\:p-8{padding:calc(var(--volr-spacing)*8)}.volr\\:px-2{padding-inline:calc(var(--volr-spacing)*2)}.volr\\:px-3{padding-inline:calc(var(--volr-spacing)*3)}.volr\\:px-4{padding-inline:calc(var(--volr-spacing)*4)}.volr\\:py-0\\.5{padding-block:calc(var(--volr-spacing)*.5)}.volr\\:py-1{padding-block:calc(var(--volr-spacing)*1)}.volr\\:py-1\\.5{padding-block:calc(var(--volr-spacing)*1.5)}.volr\\:py-2{padding-block:calc(var(--volr-spacing)*2)}.volr\\:py-2\\.5{padding-block:calc(var(--volr-spacing)*2.5)}.volr\\:py-3{padding-block:calc(var(--volr-spacing)*3)}.volr\\:py-4{padding-block:calc(var(--volr-spacing)*4)}.volr\\:py-6{padding-block:calc(var(--volr-spacing)*6)}.volr\\:py-8{padding-block:calc(var(--volr-spacing)*8)}.volr\\:py-12{padding-block:calc(var(--volr-spacing)*12)}.volr\\:pt-2{padding-top:calc(var(--volr-spacing)*2)}.volr\\:pt-3{padding-top:calc(var(--volr-spacing)*3)}.volr\\:pt-4{padding-top:calc(var(--volr-spacing)*4)}.volr\\:pr-3{padding-right:calc(var(--volr-spacing)*3)}.volr\\:pb-2{padding-bottom:calc(var(--volr-spacing)*2)}.volr\\:pb-4{padding-bottom:calc(var(--volr-spacing)*4)}.volr\\:pl-4{padding-left:calc(var(--volr-spacing)*4)}.volr\\:pl-11{padding-left:calc(var(--volr-spacing)*11)}.volr\\:text-center{text-align:center}.volr\\:text-left{text-align:left}.volr\\:text-right{text-align:right}.volr\\:align-baseline{vertical-align:baseline}.volr\\:font-mono{font-family:var(--volr-font-mono)}.volr\\:text-2xl{font-size:var(--volr-text-2xl);line-height:var(--volr-tw-leading,var(--volr-text-2xl--line-height))}.volr\\:text-8xl{font-size:var(--volr-text-8xl);line-height:var(--volr-tw-leading,var(--volr-text-8xl--line-height))}.volr\\:text-base{font-size:var(--volr-text-base);line-height:var(--volr-tw-leading,var(--volr-text-base--line-height))}.volr\\:text-lg{font-size:var(--volr-text-lg);line-height:var(--volr-tw-leading,var(--volr-text-lg--line-height))}.volr\\:text-sm{font-size:var(--volr-text-sm);line-height:var(--volr-tw-leading,var(--volr-text-sm--line-height))}.volr\\:text-xl{font-size:var(--volr-text-xl);line-height:var(--volr-tw-leading,var(--volr-text-xl--line-height))}.volr\\:text-xs{font-size:var(--volr-text-xs);line-height:var(--volr-tw-leading,var(--volr-text-xs--line-height))}.volr\\:leading-relaxed{--volr-tw-leading:var(--volr-leading-relaxed);line-height:var(--volr-leading-relaxed)}.volr\\:font-bold{--volr-tw-font-weight:var(--volr-font-weight-bold);font-weight:var(--volr-font-weight-bold)}.volr\\:font-medium{--volr-tw-font-weight:var(--volr-font-weight-medium);font-weight:var(--volr-font-weight-medium)}.volr\\:font-semibold{--volr-tw-font-weight:var(--volr-font-weight-semibold);font-weight:var(--volr-font-weight-semibold)}.volr\\:break-all{word-break:break-all}.volr\\:text-blue-600{color:var(--volr-color-blue-600)}.volr\\:text-emerald-600{color:var(--volr-color-emerald-600)}.volr\\:text-gray-500{color:var(--volr-color-gray-500)}.volr\\:text-green-600{color:var(--volr-color-green-600)}.volr\\:text-orange-600{color:var(--volr-color-orange-600)}.volr\\:text-purple-600{color:var(--volr-color-purple-600)}.volr\\:text-red-500{color:var(--volr-color-red-500)}.volr\\:text-red-600{color:var(--volr-color-red-600)}.volr\\:text-red-700{color:var(--volr-color-red-700)}.volr\\:text-slate-100{color:var(--volr-color-slate-100)}.volr\\:text-slate-400{color:var(--volr-color-slate-400)}.volr\\:text-slate-500{color:var(--volr-color-slate-500)}.volr\\:text-slate-600{color:var(--volr-color-slate-600)}.volr\\:text-slate-900{color:var(--volr-color-slate-900)}.volr\\:text-white{color:var(--volr-color-white)}.volr\\:capitalize{text-transform:capitalize}.volr\\:underline{text-decoration-line:underline}.volr\\:opacity-0{opacity:0}.volr\\:opacity-25{opacity:.25}.volr\\:opacity-30{opacity:.3}.volr\\:opacity-75{opacity:.75}.volr\\:shadow-2xl{--volr-tw-shadow:0 25px 50px -12px var(--volr-tw-shadow-color,#00000040);box-shadow:var(--volr-tw-inset-shadow),var(--volr-tw-inset-ring-shadow),var(--volr-tw-ring-offset-shadow),var(--volr-tw-ring-shadow),var(--volr-tw-shadow)}.volr\\:shadow-\\[0_-8px_30px_rgba\\(0\\,0\\,0\\,0\\.2\\)\\]{--volr-tw-shadow:0 -8px 30px var(--volr-tw-shadow-color,#0003);box-shadow:var(--volr-tw-inset-shadow),var(--volr-tw-inset-ring-shadow),var(--volr-tw-ring-offset-shadow),var(--volr-tw-ring-shadow),var(--volr-tw-shadow)}.volr\\:shadow-lg{--volr-tw-shadow:0 10px 15px -3px var(--volr-tw-shadow-color,#0000001a),0 4px 6px -4px var(--volr-tw-shadow-color,#0000001a);box-shadow:var(--volr-tw-inset-shadow),var(--volr-tw-inset-ring-shadow),var(--volr-tw-ring-offset-shadow),var(--volr-tw-ring-shadow),var(--volr-tw-shadow)}.volr\\:shadow-md{--volr-tw-shadow:0 4px 6px -1px var(--volr-tw-shadow-color,#0000001a),0 2px 4px -2px var(--volr-tw-shadow-color,#0000001a);box-shadow:var(--volr-tw-inset-shadow),var(--volr-tw-inset-ring-shadow),var(--volr-tw-ring-offset-shadow),var(--volr-tw-ring-shadow),var(--volr-tw-shadow)}.volr\\:shadow-sm{--volr-tw-shadow:0 1px 3px 0 var(--volr-tw-shadow-color,#0000001a),0 1px 2px -1px var(--volr-tw-shadow-color,#0000001a);box-shadow:var(--volr-tw-inset-shadow),var(--volr-tw-inset-ring-shadow),var(--volr-tw-ring-offset-shadow),var(--volr-tw-ring-shadow),var(--volr-tw-shadow)}.volr\\:shadow-xl{--volr-tw-shadow:0 20px 25px -5px var(--volr-tw-shadow-color,#0000001a),0 8px 10px -6px var(--volr-tw-shadow-color,#0000001a);box-shadow:var(--volr-tw-inset-shadow),var(--volr-tw-inset-ring-shadow),var(--volr-tw-ring-offset-shadow),var(--volr-tw-ring-shadow),var(--volr-tw-shadow)}.volr\\:shadow-emerald-500\\/50{--volr-tw-shadow-color:var(--volr-color-emerald-500)}@supports (color:color-mix(in lab, red, red)){.volr\\:shadow-emerald-500\\/50{--volr-tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--volr-color-emerald-500)50%,transparent)var(--volr-tw-shadow-alpha),transparent)}}.volr\\:blur-2xl{--volr-tw-blur:blur(var(--volr-blur-2xl));filter:var(--volr-tw-blur,)var(--volr-tw-brightness,)var(--volr-tw-contrast,)var(--volr-tw-grayscale,)var(--volr-tw-hue-rotate,)var(--volr-tw-invert,)var(--volr-tw-saturate,)var(--volr-tw-sepia,)var(--volr-tw-drop-shadow,)}.volr\\:transition-all{transition-property:all;transition-timing-function:var(--volr-tw-ease,var(--volr-default-transition-timing-function));transition-duration:var(--volr-tw-duration,var(--volr-default-transition-duration))}.volr\\:transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--volr-tw-gradient-from,--volr-tw-gradient-via,--volr-tw-gradient-to;transition-timing-function:var(--volr-tw-ease,var(--volr-default-transition-timing-function));transition-duration:var(--volr-tw-duration,var(--volr-default-transition-duration))}.volr\\:transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--volr-tw-ease,var(--volr-default-transition-timing-function));transition-duration:var(--volr-tw-duration,var(--volr-default-transition-duration))}.volr\\:duration-300{--volr-tw-duration:.3s;transition-duration:.3s}.volr\\:duration-500{--volr-tw-duration:.5s;transition-duration:.5s}.volr\\:ease-out{--volr-tw-ease:var(--volr-ease-out);transition-timing-function:var(--volr-ease-out)}.volr\\:outline-none{--volr-tw-outline-style:none;outline-style:none}@media (hover:hover){.volr\\:hover\\:bg-slate-50:hover{background-color:var(--volr-color-slate-50)}}.volr\\:disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.volr\\:disabled\\:opacity-50:disabled{opacity:.5}.volr-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.volr-text-secondary{color:var(--volr-text-secondary)}.volr-text-muted{color:var(--volr-text-muted)}.volr-bg-secondary{background-color:var(--volr-bg-secondary)}.volr-bg-tertiary{background-color:var(--volr-bg-tertiary)}.volr-border{border-color:var(--volr-border)}.volr-border-strong{border-color:var(--volr-border-strong)}.volr-divider-line{background-color:var(--volr-border)}.volr-error{background-color:var(--volr-error-bg);border-color:var(--volr-error-border);color:var(--volr-error-text)}.volr-hover:hover{background-color:var(--volr-hover-bg)}.volr-surface{background-color:var(--volr-bg)}}@property --volr-tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --volr-tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --volr-tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --volr-tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --volr-tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --volr-tw-gradient-position{syntax:"*";inherits:false}@property --volr-tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --volr-tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --volr-tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --volr-tw-gradient-stops{syntax:"*";inherits:false}@property --volr-tw-gradient-via-stops{syntax:"*";inherits:false}@property --volr-tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --volr-tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --volr-tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --volr-tw-leading{syntax:"*";inherits:false}@property --volr-tw-font-weight{syntax:"*";inherits:false}@property --volr-tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --volr-tw-shadow-color{syntax:"*";inherits:false}@property --volr-tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --volr-tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --volr-tw-inset-shadow-color{syntax:"*";inherits:false}@property --volr-tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --volr-tw-ring-color{syntax:"*";inherits:false}@property --volr-tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --volr-tw-inset-ring-color{syntax:"*";inherits:false}@property --volr-tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --volr-tw-ring-inset{syntax:"*";inherits:false}@property --volr-tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --volr-tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --volr-tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --volr-tw-blur{syntax:"*";inherits:false}@property --volr-tw-brightness{syntax:"*";inherits:false}@property --volr-tw-contrast{syntax:"*";inherits:false}@property --volr-tw-grayscale{syntax:"*";inherits:false}@property --volr-tw-hue-rotate{syntax:"*";inherits:false}@property --volr-tw-invert{syntax:"*";inherits:false}@property --volr-tw-opacity{syntax:"*";inherits:false}@property --volr-tw-saturate{syntax:"*";inherits:false}@property --volr-tw-sepia{syntax:"*";inherits:false}@property --volr-tw-drop-shadow{syntax:"*";inherits:false}@property --volr-tw-drop-shadow-color{syntax:"*";inherits:false}@property --volr-tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --volr-tw-drop-shadow-size{syntax:"*";inherits:false}@property --volr-tw-duration{syntax:"*";inherits:false}@property --volr-tw-ease{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.5}}';
|
|
744
|
+
var VOLR_SDK_CSS = '/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--volr-tw-translate-x:0;--volr-tw-translate-y:0;--volr-tw-translate-z:0;--volr-tw-space-y-reverse:0;--volr-tw-border-style:solid;--volr-tw-gradient-position:initial;--volr-tw-gradient-from:#0000;--volr-tw-gradient-via:#0000;--volr-tw-gradient-to:#0000;--volr-tw-gradient-stops:initial;--volr-tw-gradient-via-stops:initial;--volr-tw-gradient-from-position:0%;--volr-tw-gradient-via-position:50%;--volr-tw-gradient-to-position:100%;--volr-tw-leading:initial;--volr-tw-font-weight:initial;--volr-tw-shadow:0 0 #0000;--volr-tw-shadow-color:initial;--volr-tw-shadow-alpha:100%;--volr-tw-inset-shadow:0 0 #0000;--volr-tw-inset-shadow-color:initial;--volr-tw-inset-shadow-alpha:100%;--volr-tw-ring-color:initial;--volr-tw-ring-shadow:0 0 #0000;--volr-tw-inset-ring-color:initial;--volr-tw-inset-ring-shadow:0 0 #0000;--volr-tw-ring-inset:initial;--volr-tw-ring-offset-width:0px;--volr-tw-ring-offset-color:#fff;--volr-tw-ring-offset-shadow:0 0 #0000;--volr-tw-blur:initial;--volr-tw-brightness:initial;--volr-tw-contrast:initial;--volr-tw-grayscale:initial;--volr-tw-hue-rotate:initial;--volr-tw-invert:initial;--volr-tw-opacity:initial;--volr-tw-saturate:initial;--volr-tw-sepia:initial;--volr-tw-drop-shadow:initial;--volr-tw-drop-shadow-color:initial;--volr-tw-drop-shadow-alpha:100%;--volr-tw-drop-shadow-size:initial;--volr-tw-duration:initial;--volr-tw-ease:initial}}}@layer theme{:root,:host{--volr-font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--volr-font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--volr-color-red-50:oklch(97.1% .013 17.38);--volr-color-red-200:oklch(88.5% .062 18.334);--volr-color-red-500:oklch(63.7% .237 25.331);--volr-color-red-600:oklch(57.7% .245 27.325);--volr-color-red-700:oklch(50.5% .213 27.518);--volr-color-orange-600:oklch(64.6% .222 41.116);--volr-color-green-50:oklch(98.2% .018 155.826);--volr-color-green-600:oklch(62.7% .194 149.214);--volr-color-emerald-300:oklch(84.5% .143 164.978);--volr-color-emerald-400:oklch(76.5% .177 163.223);--volr-color-emerald-500:oklch(69.6% .17 162.48);--volr-color-emerald-600:oklch(59.6% .145 163.225);--volr-color-teal-400:oklch(77.7% .152 181.912);--volr-color-teal-500:oklch(70.4% .14 182.503);--volr-color-cyan-400:oklch(78.9% .154 211.53);--volr-color-blue-600:oklch(54.6% .245 262.881);--volr-color-purple-600:oklch(55.8% .288 302.321);--volr-color-slate-50:oklch(98.4% .003 247.858);--volr-color-slate-100:oklch(96.8% .007 247.896);--volr-color-slate-200:oklch(92.9% .013 255.508);--volr-color-slate-300:oklch(86.9% .022 252.894);--volr-color-slate-400:oklch(70.4% .04 256.788);--volr-color-slate-500:oklch(55.4% .046 257.417);--volr-color-slate-600:oklch(44.6% .043 257.281);--volr-color-slate-900:oklch(20.8% .042 265.755);--volr-color-gray-500:oklch(55.1% .027 264.364);--volr-color-black:#000;--volr-color-white:#fff;--volr-spacing:.25rem;--volr-container-md:28rem;--volr-container-4xl:56rem;--volr-text-xs:.75rem;--volr-text-xs--line-height:calc(1/.75);--volr-text-sm:.875rem;--volr-text-sm--line-height:calc(1.25/.875);--volr-text-base:1rem;--volr-text-base--line-height:calc(1.5/1);--volr-text-lg:1.125rem;--volr-text-lg--line-height:calc(1.75/1.125);--volr-text-xl:1.25rem;--volr-text-xl--line-height:calc(1.75/1.25);--volr-text-2xl:1.5rem;--volr-text-2xl--line-height:calc(2/1.5);--volr-text-8xl:6rem;--volr-text-8xl--line-height:1;--volr-font-weight-medium:500;--volr-font-weight-semibold:600;--volr-font-weight-bold:700;--volr-leading-relaxed:1.625;--volr-radius-md:.375rem;--volr-radius-lg:.5rem;--volr-radius-xl:.75rem;--volr-radius-2xl:1rem;--volr-radius-3xl:1.5rem;--volr-ease-out:cubic-bezier(0,0,.2,1);--volr-animate-spin:spin 1s linear infinite;--volr-animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite;--volr-blur-2xl:40px;--volr-default-transition-duration:.15s;--volr-default-transition-timing-function:cubic-bezier(.4,0,.2,1);--volr-default-font-family:var(--volr-font-sans);--volr-default-mono-font-family:var(--volr-font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--volr-default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--volr-default-font-feature-settings,normal);font-variation-settings:var(--volr-default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--volr-default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--volr-default-mono-font-feature-settings,normal);font-variation-settings:var(--volr-default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}:host{--volr-primary-color:var(--volr-accent-color,#303030);--volr-font-family:var(--volr-custom-font,inherit);--volr-bg:#fff;--volr-bg-secondary:#f8fafc;--volr-bg-tertiary:#f1f5f9;--volr-text:#0f172a;--volr-text-secondary:#475569;--volr-text-muted:#94a3b8;--volr-border:#e2e8f0;--volr-border-strong:#cbd5e1;--volr-hover-bg:#f8fafc;--volr-error-bg:#fef2f2;--volr-error-border:#fecaca;--volr-error-text:#991b1b}:host([data-theme=dark]){--volr-bg:#1c1c1e;--volr-bg-secondary:#2c2c2e;--volr-bg-tertiary:#3a3a3c;--volr-text:#f5f5f7;--volr-text-secondary:#c7c7cc;--volr-text-muted:#8e8e93;--volr-border:#3a3a3c;--volr-border-strong:#48484a;--volr-hover-bg:#2c2c2e;--volr-error-bg:#3c1f1f;--volr-error-border:#7f1d1d;--volr-error-text:#fca5a5}*,:before,:after{box-sizing:border-box}*{font-family:var(--volr-font-family);color:var(--volr-text)}button,input,select,textarea{color:var(--volr-text);background-color:#0000}button{cursor:pointer;background-color:#0000}input::placeholder{color:var(--volr-text-muted)}h1,h2,h3{color:var(--volr-text);margin:0;font-weight:700}h1{font-size:1.875rem;line-height:2.25rem}h2{font-size:1.5rem;line-height:2rem}h3{font-size:1.25rem;line-height:1.75rem}p{margin:0}}@layer components{.volr-dialog-overlay{inset:calc(var(--volr-spacing)*0);z-index:40;background-color:var(--volr-color-black);position:fixed}@supports (color:color-mix(in lab, red, red)){.volr-dialog-overlay{background-color:color-mix(in oklab,var(--volr-color-black)45%,transparent)}}.volr-dialog-content{z-index:50;border-radius:var(--volr-radius-2xl);border-style:var(--volr-tw-border-style);padding:calc(var(--volr-spacing)*7);--volr-tw-shadow:0 20px 25px -5px var(--volr-tw-shadow-color,#0000001a),0 8px 10px -6px var(--volr-tw-shadow-color,#0000001a);box-shadow:var(--volr-tw-inset-shadow),var(--volr-tw-inset-ring-shadow),var(--volr-tw-ring-offset-shadow),var(--volr-tw-ring-shadow),var(--volr-tw-shadow);background-color:var(--volr-bg);border-width:1px;border-color:var(--volr-border-strong);width:calc(100% - 2rem);max-width:28rem;max-height:85vh;position:fixed;top:50%;left:50%;overflow-y:auto;transform:translate(-50%,-50%)}@media (max-width:640px){.volr-dialog-content{top:auto;right:calc(var(--volr-spacing)*0);bottom:calc(var(--volr-spacing)*0);left:calc(var(--volr-spacing)*0);border-radius:1.25rem 1.25rem 0 0;width:100%;max-width:100%;margin:0 auto;transform:translateY(0)}}.volr-dialog-close{top:calc(var(--volr-spacing)*4);right:calc(var(--volr-spacing)*4);height:calc(var(--volr-spacing)*8);width:calc(var(--volr-spacing)*8);color:var(--volr-text-muted);cursor:pointer;background-color:#0000;border:none;border-radius:3.40282e38px;justify-content:center;align-items:center;display:inline-flex;position:absolute}.volr-dialog-close:hover{background-color:var(--volr-hover-bg);color:var(--volr-text-secondary)}.volr-dialog-close:focus-visible{box-shadow:0 0 0 2px var(--volr-border-strong);outline:none}.volr-dialog-close-icon{height:calc(var(--volr-spacing)*4);width:calc(var(--volr-spacing)*4)}.volr-email-input{border:1px solid var(--volr-border-strong);background-color:var(--volr-bg);width:100%;color:var(--volr-text);border-radius:.5rem;outline:none;padding:.75rem .75rem .75rem 2.75rem;font-size:1rem;line-height:1.5}.volr-email-input::placeholder{color:var(--volr-text-muted)}.volr-email-input:focus{border-color:var(--volr-border-strong);box-shadow:0 0 0 2px var(--volr-border-strong)}.volr-option-button{border:1px solid var(--volr-border);background-color:var(--volr-bg);width:100%;color:var(--volr-text);cursor:pointer;border-radius:.5rem;align-items:center;gap:.75rem;padding:.75rem;transition:background-color .15s ease-out,border-color .15s ease-out,box-shadow .15s ease-out;display:flex}.volr-option-button:hover{background-color:var(--volr-hover-bg);border-color:var(--volr-border)}.volr-option-button:focus-visible{box-shadow:0 0 0 2px var(--volr-border-strong);outline:none}}@layer utilities{.volr\\:pointer-events-auto{pointer-events:auto}.volr\\:pointer-events-none{pointer-events:none}.volr\\:sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.volr\\:absolute{position:absolute}.volr\\:fixed{position:fixed}.volr\\:relative{position:relative}.volr\\:inset-0{inset:calc(var(--volr-spacing)*0)}.volr\\:-top-3{top:calc(var(--volr-spacing)*-3)}.volr\\:top-1\\/2{top:50%}.volr\\:-right-3{right:calc(var(--volr-spacing)*-3)}.volr\\:-right-4{right:calc(var(--volr-spacing)*-4)}.volr\\:right-2{right:calc(var(--volr-spacing)*2)}.volr\\:bottom-0{bottom:calc(var(--volr-spacing)*0)}.volr\\:-left-4{left:calc(var(--volr-spacing)*-4)}.volr\\:left-3{left:calc(var(--volr-spacing)*3)}.volr\\:-z-10{z-index:calc(10*-1)}.volr\\:z-10{z-index:10}.volr\\:z-20{z-index:20}.volr\\:z-40{z-index:40}.volr\\:z-50{z-index:50}.volr\\:mx-auto{margin-inline:auto}.volr\\:my-6{margin-block:calc(var(--volr-spacing)*6)}.volr\\:mt-0\\.5{margin-top:calc(var(--volr-spacing)*.5)}.volr\\:mt-1{margin-top:calc(var(--volr-spacing)*1)}.volr\\:mt-2{margin-top:calc(var(--volr-spacing)*2)}.volr\\:mt-3{margin-top:calc(var(--volr-spacing)*3)}.volr\\:mt-4{margin-top:calc(var(--volr-spacing)*4)}.volr\\:mt-6{margin-top:calc(var(--volr-spacing)*6)}.volr\\:mt-8{margin-top:calc(var(--volr-spacing)*8)}.volr\\:mb-1{margin-bottom:calc(var(--volr-spacing)*1)}.volr\\:mb-2{margin-bottom:calc(var(--volr-spacing)*2)}.volr\\:mb-3{margin-bottom:calc(var(--volr-spacing)*3)}.volr\\:mb-4{margin-bottom:calc(var(--volr-spacing)*4)}.volr\\:mb-5{margin-bottom:calc(var(--volr-spacing)*5)}.volr\\:mb-6{margin-bottom:calc(var(--volr-spacing)*6)}.volr\\:mb-8{margin-bottom:calc(var(--volr-spacing)*8)}.volr\\:-ml-2{margin-left:calc(var(--volr-spacing)*-2)}.volr\\:line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.volr\\:flex{display:flex}.volr\\:grid{display:grid}.volr\\:inline-block{display:inline-block}.volr\\:inline-flex{display:inline-flex}.volr\\:h-1{height:calc(var(--volr-spacing)*1)}.volr\\:h-1\\.5{height:calc(var(--volr-spacing)*1.5)}.volr\\:h-2{height:calc(var(--volr-spacing)*2)}.volr\\:h-3{height:calc(var(--volr-spacing)*3)}.volr\\:h-4{height:calc(var(--volr-spacing)*4)}.volr\\:h-5{height:calc(var(--volr-spacing)*5)}.volr\\:h-6{height:calc(var(--volr-spacing)*6)}.volr\\:h-7{height:calc(var(--volr-spacing)*7)}.volr\\:h-8{height:calc(var(--volr-spacing)*8)}.volr\\:h-10{height:calc(var(--volr-spacing)*10)}.volr\\:h-12{height:calc(var(--volr-spacing)*12)}.volr\\:h-14{height:calc(var(--volr-spacing)*14)}.volr\\:h-16{height:calc(var(--volr-spacing)*16)}.volr\\:h-20{height:calc(var(--volr-spacing)*20)}.volr\\:h-24{height:calc(var(--volr-spacing)*24)}.volr\\:h-40{height:calc(var(--volr-spacing)*40)}.volr\\:h-44{height:calc(var(--volr-spacing)*44)}.volr\\:h-48{height:calc(var(--volr-spacing)*48)}.volr\\:h-\\[0\\.8em\\]{height:.8em}.volr\\:h-\\[200px\\]{height:200px}.volr\\:h-full{height:100%}.volr\\:h-px{height:1px}.volr\\:max-h-36{max-height:calc(var(--volr-spacing)*36)}.volr\\:max-h-60{max-height:calc(var(--volr-spacing)*60)}.volr\\:max-h-96{max-height:calc(var(--volr-spacing)*96)}.volr\\:max-h-\\[85vh\\]{max-height:85vh}.volr\\:max-h-\\[90vh\\]{max-height:90vh}.volr\\:min-h-\\[120px\\]{min-height:120px}.volr\\:min-h-\\[500px\\]{min-height:500px}.volr\\:w-1\\.5{width:calc(var(--volr-spacing)*1.5)}.volr\\:w-2{width:calc(var(--volr-spacing)*2)}.volr\\:w-4{width:calc(var(--volr-spacing)*4)}.volr\\:w-5{width:calc(var(--volr-spacing)*5)}.volr\\:w-6{width:calc(var(--volr-spacing)*6)}.volr\\:w-7{width:calc(var(--volr-spacing)*7)}.volr\\:w-8{width:calc(var(--volr-spacing)*8)}.volr\\:w-10{width:calc(var(--volr-spacing)*10)}.volr\\:w-12{width:calc(var(--volr-spacing)*12)}.volr\\:w-14{width:calc(var(--volr-spacing)*14)}.volr\\:w-16{width:calc(var(--volr-spacing)*16)}.volr\\:w-20{width:calc(var(--volr-spacing)*20)}.volr\\:w-24{width:calc(var(--volr-spacing)*24)}.volr\\:w-32{width:calc(var(--volr-spacing)*32)}.volr\\:w-36{width:calc(var(--volr-spacing)*36)}.volr\\:w-40{width:calc(var(--volr-spacing)*40)}.volr\\:w-44{width:calc(var(--volr-spacing)*44)}.volr\\:w-48{width:calc(var(--volr-spacing)*48)}.volr\\:w-\\[200px\\]{width:200px}.volr\\:w-auto{width:auto}.volr\\:w-full{width:100%}.volr\\:max-w-4xl{max-width:var(--volr-container-4xl)}.volr\\:max-w-full{max-width:100%}.volr\\:max-w-md{max-width:var(--volr-container-md)}.volr\\:max-w-none{max-width:none}.volr\\:min-w-0{min-width:calc(var(--volr-spacing)*0)}.volr\\:flex-1{flex:1}.volr\\:flex-shrink-0,.volr\\:shrink-0{flex-shrink:0}.volr\\:-translate-y-1\\/2{--volr-tw-translate-y:calc(calc(1/2*100%)*-1);translate:var(--volr-tw-translate-x)var(--volr-tw-translate-y)}.volr\\:rotate-180{rotate:180deg}.volr\\:animate-\\[volrFadeIn_0\\.2s_ease-out\\]{animation:.2s ease-out volrFadeIn}.volr\\:animate-pulse{animation:var(--volr-animate-pulse)}.volr\\:animate-spin{animation:var(--volr-animate-spin)}.volr\\:cursor-not-allowed{cursor:not-allowed}.volr\\:cursor-pointer{cursor:pointer}.volr\\:list-inside{list-style-position:inside}.volr\\:list-decimal{list-style-type:decimal}.volr\\:grid-cols-\\[minmax\\(0\\,1\\.1fr\\)_minmax\\(0\\,1fr\\)\\]{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}.volr\\:flex-col{flex-direction:column}.volr\\:flex-wrap{flex-wrap:wrap}.volr\\:items-baseline{align-items:baseline}.volr\\:items-center{align-items:center}.volr\\:items-end{align-items:flex-end}.volr\\:items-start{align-items:flex-start}.volr\\:justify-between{justify-content:space-between}.volr\\:justify-center{justify-content:center}.volr\\:gap-1{gap:calc(var(--volr-spacing)*1)}.volr\\:gap-2{gap:calc(var(--volr-spacing)*2)}.volr\\:gap-3{gap:calc(var(--volr-spacing)*3)}.volr\\:gap-4{gap:calc(var(--volr-spacing)*4)}:where(.volr\\:space-y-1>:not(:last-child)){--volr-tw-space-y-reverse:0;margin-block-start:calc(calc(var(--volr-spacing)*1)*var(--volr-tw-space-y-reverse));margin-block-end:calc(calc(var(--volr-spacing)*1)*calc(1 - var(--volr-tw-space-y-reverse)))}:where(.volr\\:space-y-2>:not(:last-child)){--volr-tw-space-y-reverse:0;margin-block-start:calc(calc(var(--volr-spacing)*2)*var(--volr-tw-space-y-reverse));margin-block-end:calc(calc(var(--volr-spacing)*2)*calc(1 - var(--volr-tw-space-y-reverse)))}:where(.volr\\:space-y-3>:not(:last-child)){--volr-tw-space-y-reverse:0;margin-block-start:calc(calc(var(--volr-spacing)*3)*var(--volr-tw-space-y-reverse));margin-block-end:calc(calc(var(--volr-spacing)*3)*calc(1 - var(--volr-tw-space-y-reverse)))}:where(.volr\\:space-y-4>:not(:last-child)){--volr-tw-space-y-reverse:0;margin-block-start:calc(calc(var(--volr-spacing)*4)*var(--volr-tw-space-y-reverse));margin-block-end:calc(calc(var(--volr-spacing)*4)*calc(1 - var(--volr-tw-space-y-reverse)))}:where(.volr\\:space-y-6>:not(:last-child)){--volr-tw-space-y-reverse:0;margin-block-start:calc(calc(var(--volr-spacing)*6)*var(--volr-tw-space-y-reverse));margin-block-end:calc(calc(var(--volr-spacing)*6)*calc(1 - var(--volr-tw-space-y-reverse)))}:where(.volr\\:space-y-8>:not(:last-child)){--volr-tw-space-y-reverse:0;margin-block-start:calc(calc(var(--volr-spacing)*8)*var(--volr-tw-space-y-reverse));margin-block-end:calc(calc(var(--volr-spacing)*8)*calc(1 - var(--volr-tw-space-y-reverse)))}.volr\\:truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.volr\\:overflow-auto{overflow:auto}.volr\\:overflow-hidden{overflow:hidden}.volr\\:overflow-visible{overflow:visible}.volr\\:overflow-y-auto{overflow-y:auto}.volr\\:rounded{border-radius:.25rem}.volr\\:rounded-2xl{border-radius:var(--volr-radius-2xl)}.volr\\:rounded-full{border-radius:3.40282e38px}.volr\\:rounded-lg{border-radius:var(--volr-radius-lg)}.volr\\:rounded-md{border-radius:var(--volr-radius-md)}.volr\\:rounded-xl{border-radius:var(--volr-radius-xl)}.volr\\:rounded-t-2xl{border-top-left-radius:var(--volr-radius-2xl);border-top-right-radius:var(--volr-radius-2xl)}.volr\\:rounded-t-3xl{border-top-left-radius:var(--volr-radius-3xl);border-top-right-radius:var(--volr-radius-3xl)}.volr\\:border{border-style:var(--volr-tw-border-style);border-width:1px}.volr\\:border-2{border-style:var(--volr-tw-border-style);border-width:2px}.volr\\:border-4{border-style:var(--volr-tw-border-style);border-width:4px}.volr\\:border-t{border-top-style:var(--volr-tw-border-style);border-top-width:1px}.volr\\:border-t-2{border-top-style:var(--volr-tw-border-style);border-top-width:2px}.volr\\:border-red-200{border-color:var(--volr-color-red-200)}.volr\\:border-slate-200{border-color:var(--volr-color-slate-200)}.volr\\:border-slate-300{border-color:var(--volr-color-slate-300)}.volr\\:border-white{border-color:var(--volr-color-white)}.volr\\:border-t-slate-600{border-top-color:var(--volr-color-slate-600)}.volr\\:bg-black\\/45{background-color:var(--volr-color-black)}@supports (color:color-mix(in lab, red, red)){.volr\\:bg-black\\/45{background-color:color-mix(in oklab,var(--volr-color-black)45%,transparent)}}.volr\\:bg-cyan-400{background-color:var(--volr-color-cyan-400)}.volr\\:bg-emerald-300{background-color:var(--volr-color-emerald-300)}.volr\\:bg-emerald-400{background-color:var(--volr-color-emerald-400)}.volr\\:bg-green-50{background-color:var(--volr-color-green-50)}.volr\\:bg-red-50{background-color:var(--volr-color-red-50)}.volr\\:bg-slate-50{background-color:var(--volr-color-slate-50)}.volr\\:bg-slate-100{background-color:var(--volr-color-slate-100)}.volr\\:bg-slate-200{background-color:var(--volr-color-slate-200)}.volr\\:bg-slate-900{background-color:var(--volr-color-slate-900)}.volr\\:bg-teal-400{background-color:var(--volr-color-teal-400)}.volr\\:bg-white{background-color:var(--volr-color-white)}.volr\\:bg-linear-to-br{--volr-tw-gradient-position:to bottom right}@supports (background-image:linear-gradient(in lab, red, red)){.volr\\:bg-linear-to-br{--volr-tw-gradient-position:to bottom right in oklab}}.volr\\:bg-linear-to-br{background-image:linear-gradient(var(--volr-tw-gradient-stops))}.volr\\:from-emerald-400{--volr-tw-gradient-from:var(--volr-color-emerald-400);--volr-tw-gradient-stops:var(--volr-tw-gradient-via-stops,var(--volr-tw-gradient-position),var(--volr-tw-gradient-from)var(--volr-tw-gradient-from-position),var(--volr-tw-gradient-to)var(--volr-tw-gradient-to-position))}.volr\\:from-emerald-500{--volr-tw-gradient-from:var(--volr-color-emerald-500);--volr-tw-gradient-stops:var(--volr-tw-gradient-via-stops,var(--volr-tw-gradient-position),var(--volr-tw-gradient-from)var(--volr-tw-gradient-from-position),var(--volr-tw-gradient-to)var(--volr-tw-gradient-to-position))}.volr\\:to-teal-500{--volr-tw-gradient-to:var(--volr-color-teal-500);--volr-tw-gradient-stops:var(--volr-tw-gradient-via-stops,var(--volr-tw-gradient-position),var(--volr-tw-gradient-from)var(--volr-tw-gradient-from-position),var(--volr-tw-gradient-to)var(--volr-tw-gradient-to-position))}.volr\\:object-cover{object-fit:cover}.volr\\:p-1{padding:calc(var(--volr-spacing)*1)}.volr\\:p-2{padding:calc(var(--volr-spacing)*2)}.volr\\:p-3{padding:calc(var(--volr-spacing)*3)}.volr\\:p-4{padding:calc(var(--volr-spacing)*4)}.volr\\:p-5{padding:calc(var(--volr-spacing)*5)}.volr\\:p-8{padding:calc(var(--volr-spacing)*8)}.volr\\:px-1\\.5{padding-inline:calc(var(--volr-spacing)*1.5)}.volr\\:px-2{padding-inline:calc(var(--volr-spacing)*2)}.volr\\:px-3{padding-inline:calc(var(--volr-spacing)*3)}.volr\\:px-4{padding-inline:calc(var(--volr-spacing)*4)}.volr\\:py-0\\.5{padding-block:calc(var(--volr-spacing)*.5)}.volr\\:py-1{padding-block:calc(var(--volr-spacing)*1)}.volr\\:py-1\\.5{padding-block:calc(var(--volr-spacing)*1.5)}.volr\\:py-2{padding-block:calc(var(--volr-spacing)*2)}.volr\\:py-2\\.5{padding-block:calc(var(--volr-spacing)*2.5)}.volr\\:py-3{padding-block:calc(var(--volr-spacing)*3)}.volr\\:py-4{padding-block:calc(var(--volr-spacing)*4)}.volr\\:py-6{padding-block:calc(var(--volr-spacing)*6)}.volr\\:py-8{padding-block:calc(var(--volr-spacing)*8)}.volr\\:py-12{padding-block:calc(var(--volr-spacing)*12)}.volr\\:pt-2{padding-top:calc(var(--volr-spacing)*2)}.volr\\:pt-3{padding-top:calc(var(--volr-spacing)*3)}.volr\\:pt-4{padding-top:calc(var(--volr-spacing)*4)}.volr\\:pr-3{padding-right:calc(var(--volr-spacing)*3)}.volr\\:pb-2{padding-bottom:calc(var(--volr-spacing)*2)}.volr\\:pb-4{padding-bottom:calc(var(--volr-spacing)*4)}.volr\\:pl-4{padding-left:calc(var(--volr-spacing)*4)}.volr\\:pl-11{padding-left:calc(var(--volr-spacing)*11)}.volr\\:text-center{text-align:center}.volr\\:text-left{text-align:left}.volr\\:text-right{text-align:right}.volr\\:align-baseline{vertical-align:baseline}.volr\\:font-mono{font-family:var(--volr-font-mono)}.volr\\:text-2xl{font-size:var(--volr-text-2xl);line-height:var(--volr-tw-leading,var(--volr-text-2xl--line-height))}.volr\\:text-8xl{font-size:var(--volr-text-8xl);line-height:var(--volr-tw-leading,var(--volr-text-8xl--line-height))}.volr\\:text-base{font-size:var(--volr-text-base);line-height:var(--volr-tw-leading,var(--volr-text-base--line-height))}.volr\\:text-lg{font-size:var(--volr-text-lg);line-height:var(--volr-tw-leading,var(--volr-text-lg--line-height))}.volr\\:text-sm{font-size:var(--volr-text-sm);line-height:var(--volr-tw-leading,var(--volr-text-sm--line-height))}.volr\\:text-xl{font-size:var(--volr-text-xl);line-height:var(--volr-tw-leading,var(--volr-text-xl--line-height))}.volr\\:text-xs{font-size:var(--volr-text-xs);line-height:var(--volr-tw-leading,var(--volr-text-xs--line-height))}.volr\\:leading-relaxed{--volr-tw-leading:var(--volr-leading-relaxed);line-height:var(--volr-leading-relaxed)}.volr\\:font-bold{--volr-tw-font-weight:var(--volr-font-weight-bold);font-weight:var(--volr-font-weight-bold)}.volr\\:font-medium{--volr-tw-font-weight:var(--volr-font-weight-medium);font-weight:var(--volr-font-weight-medium)}.volr\\:font-semibold{--volr-tw-font-weight:var(--volr-font-weight-semibold);font-weight:var(--volr-font-weight-semibold)}.volr\\:break-all{word-break:break-all}.volr\\:text-blue-600{color:var(--volr-color-blue-600)}.volr\\:text-emerald-600{color:var(--volr-color-emerald-600)}.volr\\:text-gray-500{color:var(--volr-color-gray-500)}.volr\\:text-green-600{color:var(--volr-color-green-600)}.volr\\:text-orange-600{color:var(--volr-color-orange-600)}.volr\\:text-purple-600{color:var(--volr-color-purple-600)}.volr\\:text-red-500{color:var(--volr-color-red-500)}.volr\\:text-red-600{color:var(--volr-color-red-600)}.volr\\:text-red-700{color:var(--volr-color-red-700)}.volr\\:text-slate-100{color:var(--volr-color-slate-100)}.volr\\:text-slate-400{color:var(--volr-color-slate-400)}.volr\\:text-slate-500{color:var(--volr-color-slate-500)}.volr\\:text-slate-600{color:var(--volr-color-slate-600)}.volr\\:text-slate-900{color:var(--volr-color-slate-900)}.volr\\:text-white{color:var(--volr-color-white)}.volr\\:capitalize{text-transform:capitalize}.volr\\:underline{text-decoration-line:underline}.volr\\:opacity-0{opacity:0}.volr\\:opacity-25{opacity:.25}.volr\\:opacity-30{opacity:.3}.volr\\:opacity-50{opacity:.5}.volr\\:opacity-75{opacity:.75}.volr\\:shadow-2xl{--volr-tw-shadow:0 25px 50px -12px var(--volr-tw-shadow-color,#00000040);box-shadow:var(--volr-tw-inset-shadow),var(--volr-tw-inset-ring-shadow),var(--volr-tw-ring-offset-shadow),var(--volr-tw-ring-shadow),var(--volr-tw-shadow)}.volr\\:shadow-\\[0_-8px_30px_rgba\\(0\\,0\\,0\\,0\\.2\\)\\]{--volr-tw-shadow:0 -8px 30px var(--volr-tw-shadow-color,#0003);box-shadow:var(--volr-tw-inset-shadow),var(--volr-tw-inset-ring-shadow),var(--volr-tw-ring-offset-shadow),var(--volr-tw-ring-shadow),var(--volr-tw-shadow)}.volr\\:shadow-lg{--volr-tw-shadow:0 10px 15px -3px var(--volr-tw-shadow-color,#0000001a),0 4px 6px -4px var(--volr-tw-shadow-color,#0000001a);box-shadow:var(--volr-tw-inset-shadow),var(--volr-tw-inset-ring-shadow),var(--volr-tw-ring-offset-shadow),var(--volr-tw-ring-shadow),var(--volr-tw-shadow)}.volr\\:shadow-md{--volr-tw-shadow:0 4px 6px -1px var(--volr-tw-shadow-color,#0000001a),0 2px 4px -2px var(--volr-tw-shadow-color,#0000001a);box-shadow:var(--volr-tw-inset-shadow),var(--volr-tw-inset-ring-shadow),var(--volr-tw-ring-offset-shadow),var(--volr-tw-ring-shadow),var(--volr-tw-shadow)}.volr\\:shadow-sm{--volr-tw-shadow:0 1px 3px 0 var(--volr-tw-shadow-color,#0000001a),0 1px 2px -1px var(--volr-tw-shadow-color,#0000001a);box-shadow:var(--volr-tw-inset-shadow),var(--volr-tw-inset-ring-shadow),var(--volr-tw-ring-offset-shadow),var(--volr-tw-ring-shadow),var(--volr-tw-shadow)}.volr\\:shadow-xl{--volr-tw-shadow:0 20px 25px -5px var(--volr-tw-shadow-color,#0000001a),0 8px 10px -6px var(--volr-tw-shadow-color,#0000001a);box-shadow:var(--volr-tw-inset-shadow),var(--volr-tw-inset-ring-shadow),var(--volr-tw-ring-offset-shadow),var(--volr-tw-ring-shadow),var(--volr-tw-shadow)}.volr\\:shadow-emerald-500\\/50{--volr-tw-shadow-color:var(--volr-color-emerald-500)}@supports (color:color-mix(in lab, red, red)){.volr\\:shadow-emerald-500\\/50{--volr-tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--volr-color-emerald-500)50%,transparent)var(--volr-tw-shadow-alpha),transparent)}}.volr\\:blur-2xl{--volr-tw-blur:blur(var(--volr-blur-2xl));filter:var(--volr-tw-blur,)var(--volr-tw-brightness,)var(--volr-tw-contrast,)var(--volr-tw-grayscale,)var(--volr-tw-hue-rotate,)var(--volr-tw-invert,)var(--volr-tw-saturate,)var(--volr-tw-sepia,)var(--volr-tw-drop-shadow,)}.volr\\:transition-all{transition-property:all;transition-timing-function:var(--volr-tw-ease,var(--volr-default-transition-timing-function));transition-duration:var(--volr-tw-duration,var(--volr-default-transition-duration))}.volr\\:transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--volr-tw-gradient-from,--volr-tw-gradient-via,--volr-tw-gradient-to;transition-timing-function:var(--volr-tw-ease,var(--volr-default-transition-timing-function));transition-duration:var(--volr-tw-duration,var(--volr-default-transition-duration))}.volr\\:transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--volr-tw-ease,var(--volr-default-transition-timing-function));transition-duration:var(--volr-tw-duration,var(--volr-default-transition-duration))}.volr\\:duration-300{--volr-tw-duration:.3s;transition-duration:.3s}.volr\\:duration-500{--volr-tw-duration:.5s;transition-duration:.5s}.volr\\:ease-out{--volr-tw-ease:var(--volr-ease-out);transition-timing-function:var(--volr-ease-out)}.volr\\:outline-none{--volr-tw-outline-style:none;outline-style:none}@media (hover:hover){.volr\\:hover\\:border-slate-300:hover{border-color:var(--volr-color-slate-300)}.volr\\:hover\\:bg-slate-50:hover{background-color:var(--volr-color-slate-50)}}.volr\\:disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.volr\\:disabled\\:opacity-50:disabled{opacity:.5}.volr-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.volr-text-secondary{color:var(--volr-text-secondary)}.volr-text-muted{color:var(--volr-text-muted)}.volr-bg-secondary{background-color:var(--volr-bg-secondary)}.volr-bg-tertiary{background-color:var(--volr-bg-tertiary)}.volr-border{border-color:var(--volr-border)}.volr-border-strong{border-color:var(--volr-border-strong)}.volr-divider-line{background-color:var(--volr-border)}.volr-error{background-color:var(--volr-error-bg);border-color:var(--volr-error-border);color:var(--volr-error-text)}.volr-hover:hover{background-color:var(--volr-hover-bg)}.volr-surface{background-color:var(--volr-bg)}}@property --volr-tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --volr-tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --volr-tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --volr-tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --volr-tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --volr-tw-gradient-position{syntax:"*";inherits:false}@property --volr-tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --volr-tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --volr-tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --volr-tw-gradient-stops{syntax:"*";inherits:false}@property --volr-tw-gradient-via-stops{syntax:"*";inherits:false}@property --volr-tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --volr-tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --volr-tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --volr-tw-leading{syntax:"*";inherits:false}@property --volr-tw-font-weight{syntax:"*";inherits:false}@property --volr-tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --volr-tw-shadow-color{syntax:"*";inherits:false}@property --volr-tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --volr-tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --volr-tw-inset-shadow-color{syntax:"*";inherits:false}@property --volr-tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --volr-tw-ring-color{syntax:"*";inherits:false}@property --volr-tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --volr-tw-inset-ring-color{syntax:"*";inherits:false}@property --volr-tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --volr-tw-ring-inset{syntax:"*";inherits:false}@property --volr-tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --volr-tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --volr-tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --volr-tw-blur{syntax:"*";inherits:false}@property --volr-tw-brightness{syntax:"*";inherits:false}@property --volr-tw-contrast{syntax:"*";inherits:false}@property --volr-tw-grayscale{syntax:"*";inherits:false}@property --volr-tw-hue-rotate{syntax:"*";inherits:false}@property --volr-tw-invert{syntax:"*";inherits:false}@property --volr-tw-opacity{syntax:"*";inherits:false}@property --volr-tw-saturate{syntax:"*";inherits:false}@property --volr-tw-sepia{syntax:"*";inherits:false}@property --volr-tw-drop-shadow{syntax:"*";inherits:false}@property --volr-tw-drop-shadow-color{syntax:"*";inherits:false}@property --volr-tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --volr-tw-drop-shadow-size{syntax:"*";inherits:false}@property --volr-tw-duration{syntax:"*";inherits:false}@property --volr-tw-ease{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.5}}';
|
|
745
745
|
function useResolvedTheme(theme = "light") {
|
|
746
|
-
const [resolvedTheme, setResolvedTheme] =
|
|
746
|
+
const [resolvedTheme, setResolvedTheme] = React13.useState(() => {
|
|
747
747
|
if (theme !== "system") return theme;
|
|
748
748
|
if (typeof window === "undefined") return "light";
|
|
749
749
|
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
|
|
750
750
|
});
|
|
751
|
-
|
|
751
|
+
React13.useEffect(() => {
|
|
752
752
|
if (theme !== "system") {
|
|
753
753
|
setResolvedTheme(theme);
|
|
754
754
|
return;
|
|
@@ -764,10 +764,10 @@ function useResolvedTheme(theme = "light") {
|
|
|
764
764
|
return resolvedTheme;
|
|
765
765
|
}
|
|
766
766
|
function ShadowPortal({ children, theme = "light" }) {
|
|
767
|
-
const [mountNode, setMountNode] =
|
|
768
|
-
const hostRef =
|
|
767
|
+
const [mountNode, setMountNode] = React13.useState(null);
|
|
768
|
+
const hostRef = React13.useRef(null);
|
|
769
769
|
const resolvedTheme = useResolvedTheme(theme);
|
|
770
|
-
|
|
770
|
+
React13.useEffect(() => {
|
|
771
771
|
const host = document.createElement("div");
|
|
772
772
|
host.id = "volr-shadow-portal";
|
|
773
773
|
host.style.position = "fixed";
|
|
@@ -791,7 +791,7 @@ function ShadowPortal({ children, theme = "light" }) {
|
|
|
791
791
|
hostRef.current = null;
|
|
792
792
|
};
|
|
793
793
|
}, []);
|
|
794
|
-
|
|
794
|
+
React13.useEffect(() => {
|
|
795
795
|
if (hostRef.current) {
|
|
796
796
|
hostRef.current.setAttribute("data-theme", resolvedTheme);
|
|
797
797
|
}
|
|
@@ -800,7 +800,7 @@ function ShadowPortal({ children, theme = "light" }) {
|
|
|
800
800
|
return reactDom.createPortal(children, mountNode);
|
|
801
801
|
}
|
|
802
802
|
function useFocusTrap(isActive, containerRef) {
|
|
803
|
-
const previousActiveElement =
|
|
803
|
+
const previousActiveElement = React13.useRef(null);
|
|
804
804
|
const focusableSelector = [
|
|
805
805
|
"button:not([disabled])",
|
|
806
806
|
"input:not([disabled])",
|
|
@@ -809,7 +809,7 @@ function useFocusTrap(isActive, containerRef) {
|
|
|
809
809
|
"a[href]",
|
|
810
810
|
'[tabindex]:not([tabindex="-1"])'
|
|
811
811
|
].join(", ");
|
|
812
|
-
const getFocusableElements =
|
|
812
|
+
const getFocusableElements = React13.useCallback(() => {
|
|
813
813
|
if (!containerRef.current) return [];
|
|
814
814
|
return Array.from(
|
|
815
815
|
containerRef.current.querySelectorAll(focusableSelector)
|
|
@@ -817,7 +817,7 @@ function useFocusTrap(isActive, containerRef) {
|
|
|
817
817
|
return el.offsetParent !== null;
|
|
818
818
|
});
|
|
819
819
|
}, [containerRef, focusableSelector]);
|
|
820
|
-
const handleKeyDown =
|
|
820
|
+
const handleKeyDown = React13.useCallback(
|
|
821
821
|
(event) => {
|
|
822
822
|
if (event.key !== "Tab") return;
|
|
823
823
|
const focusableElements = getFocusableElements();
|
|
@@ -838,7 +838,7 @@ function useFocusTrap(isActive, containerRef) {
|
|
|
838
838
|
},
|
|
839
839
|
[getFocusableElements]
|
|
840
840
|
);
|
|
841
|
-
|
|
841
|
+
React13.useEffect(() => {
|
|
842
842
|
if (!isActive) return;
|
|
843
843
|
previousActiveElement.current = document.activeElement;
|
|
844
844
|
const focusableElements = getFocusableElements();
|
|
@@ -869,12 +869,12 @@ var Modal = ({
|
|
|
869
869
|
}) => {
|
|
870
870
|
const isMobile2 = useMediaQuery("(max-width: 500px)");
|
|
871
871
|
const variant = explicitVariant ?? (isMobile2 ? "bottom-sheet" : "centered");
|
|
872
|
-
const dialogRef =
|
|
873
|
-
const dialogId =
|
|
872
|
+
const dialogRef = React13.useRef(null);
|
|
873
|
+
const dialogId = React13.useId();
|
|
874
874
|
const uiContext = useVolrUIOptional();
|
|
875
875
|
const theme = uiContext?.theme ?? "light";
|
|
876
876
|
useFocusTrap(open, dialogRef);
|
|
877
|
-
|
|
877
|
+
React13.useEffect(() => {
|
|
878
878
|
const handleEscape = (e) => {
|
|
879
879
|
if (e.key === "Escape" && open) {
|
|
880
880
|
if (onEscapeKeyDown) {
|
|
@@ -1328,7 +1328,7 @@ var variantMap = {
|
|
|
1328
1328
|
ghost: { backgroundColor: "transparent", color: "var(--volr-text-secondary)", border: "none" },
|
|
1329
1329
|
outline: { backgroundColor: "transparent", color: "var(--volr-text-secondary)", border: "1px solid var(--volr-border)" }
|
|
1330
1330
|
};
|
|
1331
|
-
var Button =
|
|
1331
|
+
var Button = React13__default.default.forwardRef(
|
|
1332
1332
|
({ variant = "primary", size = "md", fullWidth, className, style, disabled, children, ...props }, ref) => {
|
|
1333
1333
|
const { accentColor } = useVolrUI();
|
|
1334
1334
|
const sizeStyle = sizeMap[size];
|
|
@@ -1436,12 +1436,12 @@ function PasskeyEnrollView({
|
|
|
1436
1436
|
isEnrolling,
|
|
1437
1437
|
error: enrollmentError
|
|
1438
1438
|
} = react.usePasskeyEnrollment();
|
|
1439
|
-
const [hasStarted, setHasStarted] =
|
|
1440
|
-
const [errorMessage, setErrorMessage] =
|
|
1441
|
-
const [isRefreshing, setIsRefreshing] =
|
|
1439
|
+
const [hasStarted, setHasStarted] = React13.useState(false);
|
|
1440
|
+
const [errorMessage, setErrorMessage] = React13.useState(null);
|
|
1441
|
+
const [isRefreshing, setIsRefreshing] = React13.useState(false);
|
|
1442
1442
|
const biometricType = getBiometricType();
|
|
1443
1443
|
const hasPasskey = user?.keyStorageType === "passkey";
|
|
1444
|
-
|
|
1444
|
+
React13.useEffect(() => {
|
|
1445
1445
|
console.log("[PasskeyEnrollView] User state:", {
|
|
1446
1446
|
user,
|
|
1447
1447
|
keyStorageType: user?.keyStorageType,
|
|
@@ -1449,7 +1449,7 @@ function PasskeyEnrollView({
|
|
|
1449
1449
|
hasPasskey
|
|
1450
1450
|
});
|
|
1451
1451
|
}, [user, hasPasskey]);
|
|
1452
|
-
|
|
1452
|
+
React13.useEffect(() => {
|
|
1453
1453
|
if (hasPasskey && !user?.evmAddress && !isRefreshing) {
|
|
1454
1454
|
const refreshUserData = async () => {
|
|
1455
1455
|
try {
|
|
@@ -1480,7 +1480,7 @@ function PasskeyEnrollView({
|
|
|
1480
1480
|
refreshUserData();
|
|
1481
1481
|
}
|
|
1482
1482
|
}, [hasPasskey, user?.evmAddress, isRefreshing, client, setUser, user]);
|
|
1483
|
-
|
|
1483
|
+
React13.useEffect(() => {
|
|
1484
1484
|
if (!user?.id) {
|
|
1485
1485
|
const error = new Error("User ID is required for passkey enrollment");
|
|
1486
1486
|
setErrorMessage(getUserFriendlyError(error, t));
|
|
@@ -1489,7 +1489,7 @@ function PasskeyEnrollView({
|
|
|
1489
1489
|
}
|
|
1490
1490
|
}
|
|
1491
1491
|
}, [user, onError, t]);
|
|
1492
|
-
|
|
1492
|
+
React13.useEffect(() => {
|
|
1493
1493
|
if (enrollmentError) {
|
|
1494
1494
|
const friendlyMessage = getUserFriendlyError(enrollmentError, t);
|
|
1495
1495
|
setErrorMessage(friendlyMessage);
|
|
@@ -1646,8 +1646,8 @@ function MpcConnectView({
|
|
|
1646
1646
|
isConnecting,
|
|
1647
1647
|
error: connectionError
|
|
1648
1648
|
} = react.useMpcConnection();
|
|
1649
|
-
const [errorMessage, setErrorMessage] =
|
|
1650
|
-
|
|
1649
|
+
const [errorMessage, setErrorMessage] = React13.useState(null);
|
|
1650
|
+
React13.useEffect(() => {
|
|
1651
1651
|
if (connectionError) {
|
|
1652
1652
|
setErrorMessage(connectionError.message);
|
|
1653
1653
|
if (onError) {
|
|
@@ -1655,7 +1655,7 @@ function MpcConnectView({
|
|
|
1655
1655
|
}
|
|
1656
1656
|
}
|
|
1657
1657
|
}, [connectionError, onError]);
|
|
1658
|
-
|
|
1658
|
+
React13.useEffect(() => {
|
|
1659
1659
|
handleConnect();
|
|
1660
1660
|
}, []);
|
|
1661
1661
|
const handleConnect = async () => {
|
|
@@ -1716,7 +1716,7 @@ function MpcConnectView({
|
|
|
1716
1716
|
);
|
|
1717
1717
|
}
|
|
1718
1718
|
var CopyButton = ({ text, className, onCopy }) => {
|
|
1719
|
-
const [copied, setCopied] =
|
|
1719
|
+
const [copied, setCopied] = React13.useState(false);
|
|
1720
1720
|
const handleCopy = async () => {
|
|
1721
1721
|
try {
|
|
1722
1722
|
await navigator.clipboard.writeText(text);
|
|
@@ -1914,9 +1914,9 @@ function PoweredBy() {
|
|
|
1914
1914
|
}
|
|
1915
1915
|
function EmailInlineInput({ onSubmit, accentColor }) {
|
|
1916
1916
|
const { t } = useI18n();
|
|
1917
|
-
const [email, setEmail] =
|
|
1918
|
-
const [error, setError] =
|
|
1919
|
-
const [isLoading, setIsLoading] =
|
|
1917
|
+
const [email, setEmail] = React13.useState("");
|
|
1918
|
+
const [error, setError] = React13.useState(null);
|
|
1919
|
+
const [isLoading, setIsLoading] = React13.useState(false);
|
|
1920
1920
|
const handleSubmit = async (e) => {
|
|
1921
1921
|
e.preventDefault();
|
|
1922
1922
|
setError(null);
|
|
@@ -2040,14 +2040,14 @@ function SigninSelectScreen({
|
|
|
2040
2040
|
function CodeInputScreen({ email, onSubmit, onResend }) {
|
|
2041
2041
|
const { t } = useI18n();
|
|
2042
2042
|
const { accentColor } = useVolrUI();
|
|
2043
|
-
const [digits, setDigits] =
|
|
2044
|
-
const [error, setError] =
|
|
2045
|
-
const [isLoading, setIsLoading] =
|
|
2046
|
-
const inputRefs =
|
|
2047
|
-
|
|
2043
|
+
const [digits, setDigits] = React13.useState(Array(6).fill(""));
|
|
2044
|
+
const [error, setError] = React13.useState(null);
|
|
2045
|
+
const [isLoading, setIsLoading] = React13.useState(false);
|
|
2046
|
+
const inputRefs = React13.useRef([]);
|
|
2047
|
+
React13.useEffect(() => {
|
|
2048
2048
|
inputRefs.current[0]?.focus();
|
|
2049
2049
|
}, []);
|
|
2050
|
-
|
|
2050
|
+
React13.useEffect(() => {
|
|
2051
2051
|
const code = digits.join("");
|
|
2052
2052
|
if (code.length === 6 && !isLoading) {
|
|
2053
2053
|
handleSubmit(code);
|
|
@@ -2210,23 +2210,23 @@ function SiweLoginScreen({
|
|
|
2210
2210
|
checkSiweSession,
|
|
2211
2211
|
getSiweSignUrl
|
|
2212
2212
|
} = react.useVolrLogin();
|
|
2213
|
-
const [isLoading, setIsLoading] =
|
|
2214
|
-
const [loadingWallet, setLoadingWallet] =
|
|
2215
|
-
const [error, setError] =
|
|
2216
|
-
const [providers, setProviders] =
|
|
2217
|
-
const [isDetecting, setIsDetecting] =
|
|
2218
|
-
const [hasLegacyWallet, setHasLegacyWallet] =
|
|
2219
|
-
const [showOtherWallet, setShowOtherWallet] =
|
|
2220
|
-
const [sessionUrl, setSessionUrl] =
|
|
2221
|
-
const [isPolling, setIsPolling] =
|
|
2222
|
-
const pollingRef =
|
|
2223
|
-
const sessionCreatedRef =
|
|
2224
|
-
|
|
2213
|
+
const [isLoading, setIsLoading] = React13.useState(false);
|
|
2214
|
+
const [loadingWallet, setLoadingWallet] = React13.useState(null);
|
|
2215
|
+
const [error, setError] = React13.useState(null);
|
|
2216
|
+
const [providers, setProviders] = React13.useState([]);
|
|
2217
|
+
const [isDetecting, setIsDetecting] = React13.useState(true);
|
|
2218
|
+
const [hasLegacyWallet, setHasLegacyWallet] = React13.useState(false);
|
|
2219
|
+
const [showOtherWallet, setShowOtherWallet] = React13.useState(false);
|
|
2220
|
+
const [sessionUrl, setSessionUrl] = React13.useState(null);
|
|
2221
|
+
const [isPolling, setIsPolling] = React13.useState(false);
|
|
2222
|
+
const pollingRef = React13.useRef(null);
|
|
2223
|
+
const sessionCreatedRef = React13.useRef(false);
|
|
2224
|
+
React13.useEffect(() => {
|
|
2225
2225
|
return () => {
|
|
2226
2226
|
if (pollingRef.current) clearInterval(pollingRef.current);
|
|
2227
2227
|
};
|
|
2228
2228
|
}, []);
|
|
2229
|
-
|
|
2229
|
+
React13.useEffect(() => {
|
|
2230
2230
|
if (typeof window === "undefined") {
|
|
2231
2231
|
setIsDetecting(false);
|
|
2232
2232
|
return;
|
|
@@ -2252,7 +2252,7 @@ function SiweLoginScreen({
|
|
|
2252
2252
|
};
|
|
2253
2253
|
}, []);
|
|
2254
2254
|
const hasAnyWallet = providers.length > 0 || hasLegacyWallet;
|
|
2255
|
-
const createSession =
|
|
2255
|
+
const createSession = React13.useCallback(async () => {
|
|
2256
2256
|
if (sessionCreatedRef.current || sessionUrl) return;
|
|
2257
2257
|
sessionCreatedRef.current = true;
|
|
2258
2258
|
try {
|
|
@@ -2294,17 +2294,17 @@ function SiweLoginScreen({
|
|
|
2294
2294
|
onError(err instanceof Error ? err : new Error("Failed to create session"));
|
|
2295
2295
|
}
|
|
2296
2296
|
}, [createSiweSession, getSiweSignUrl, checkSiweSession, onSuccess, onError, t, sessionUrl]);
|
|
2297
|
-
|
|
2297
|
+
React13.useEffect(() => {
|
|
2298
2298
|
if (!isDetecting && !hasAnyWallet && !sessionUrl) {
|
|
2299
2299
|
createSession();
|
|
2300
2300
|
}
|
|
2301
2301
|
}, [isDetecting, hasAnyWallet, sessionUrl, createSession]);
|
|
2302
|
-
|
|
2302
|
+
React13.useEffect(() => {
|
|
2303
2303
|
if (showOtherWallet && !sessionUrl) {
|
|
2304
2304
|
createSession();
|
|
2305
2305
|
}
|
|
2306
2306
|
}, [showOtherWallet, sessionUrl, createSession]);
|
|
2307
|
-
const handleWalletClick =
|
|
2307
|
+
const handleWalletClick = React13.useCallback(async (provider, walletName, walletConnector) => {
|
|
2308
2308
|
setError(null);
|
|
2309
2309
|
setIsLoading(true);
|
|
2310
2310
|
setLoadingWallet(walletName);
|
|
@@ -2328,7 +2328,7 @@ function SiweLoginScreen({
|
|
|
2328
2328
|
setLoadingWallet(null);
|
|
2329
2329
|
}
|
|
2330
2330
|
}, [signWithWallet, onSuccess, onError]);
|
|
2331
|
-
const handleLegacyWalletClick =
|
|
2331
|
+
const handleLegacyWalletClick = React13.useCallback(async () => {
|
|
2332
2332
|
if (typeof window === "undefined" || !window.ethereum) return;
|
|
2333
2333
|
const ethereum = window.ethereum;
|
|
2334
2334
|
let walletName = "Wallet";
|
|
@@ -2337,7 +2337,7 @@ function SiweLoginScreen({
|
|
|
2337
2337
|
else if (ethereum.isRabby) walletName = "Rabby";
|
|
2338
2338
|
await handleWalletClick(ethereum, walletName);
|
|
2339
2339
|
}, [handleWalletClick]);
|
|
2340
|
-
const cancelOtherWallet =
|
|
2340
|
+
const cancelOtherWallet = React13.useCallback(() => {
|
|
2341
2341
|
if (pollingRef.current) {
|
|
2342
2342
|
clearInterval(pollingRef.current);
|
|
2343
2343
|
pollingRef.current = null;
|
|
@@ -2483,13 +2483,13 @@ function SigninModal({ isOpen, onClose, onError }) {
|
|
|
2483
2483
|
const { logout, user } = react.useVolrContext();
|
|
2484
2484
|
const { appName, branding } = useVolrUI();
|
|
2485
2485
|
const { requestEmailCode, verifyEmailCode, handleSocialLogin } = react.useVolrLogin();
|
|
2486
|
-
const [currentScreen, setCurrentScreen] =
|
|
2487
|
-
const [email, setEmail] =
|
|
2486
|
+
const [currentScreen, setCurrentScreen] = React13.useState("method-select");
|
|
2487
|
+
const [email, setEmail] = React13.useState("");
|
|
2488
2488
|
const hasPasskey = user?.keyStorageType === "passkey";
|
|
2489
2489
|
const isMobile2 = useMediaQuery("(max-width: 500px)");
|
|
2490
2490
|
const isWideViewport = useMediaQuery("(min-width: 864px)");
|
|
2491
2491
|
const shouldUseWideLayout = !isMobile2 && isWideViewport && Boolean(branding) && currentScreen === "method-select";
|
|
2492
|
-
|
|
2492
|
+
React13.useEffect(() => {
|
|
2493
2493
|
if (!isOpen) {
|
|
2494
2494
|
setCurrentScreen("method-select");
|
|
2495
2495
|
setEmail("");
|
|
@@ -2650,7 +2650,7 @@ function SigninModal({ isOpen, onClose, onError }) {
|
|
|
2650
2650
|
function AccountModal({ isOpen, onClose, onError }) {
|
|
2651
2651
|
const { user, logout } = react.useVolrContext();
|
|
2652
2652
|
const { t } = useI18n();
|
|
2653
|
-
const [isLoggingOut, setIsLoggingOut] =
|
|
2653
|
+
const [isLoggingOut, setIsLoggingOut] = React13.useState(false);
|
|
2654
2654
|
if (!user) {
|
|
2655
2655
|
return /* @__PURE__ */ jsxRuntime.jsx(SigninModal, { isOpen, onClose, onError });
|
|
2656
2656
|
}
|
|
@@ -2784,7 +2784,7 @@ function AssetSelectView({
|
|
|
2784
2784
|
}) })
|
|
2785
2785
|
] });
|
|
2786
2786
|
}
|
|
2787
|
-
var TextLinkButton =
|
|
2787
|
+
var TextLinkButton = React13__default.default.forwardRef(({ showArrow = false, className, children, ...props }, ref) => {
|
|
2788
2788
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2789
2789
|
"button",
|
|
2790
2790
|
{
|
|
@@ -3043,7 +3043,7 @@ var DepositCompletedToast = ({
|
|
|
3043
3043
|
symbol
|
|
3044
3044
|
}) => {
|
|
3045
3045
|
const { t } = useI18n();
|
|
3046
|
-
const [expanded, setExpanded] =
|
|
3046
|
+
const [expanded, setExpanded] = React13.useState(false);
|
|
3047
3047
|
const formatAmount = (amount) => {
|
|
3048
3048
|
const divisor = BigInt(10 ** decimals);
|
|
3049
3049
|
const whole = amount / divisor;
|
|
@@ -3198,10 +3198,10 @@ function DepositQRView(props) {
|
|
|
3198
3198
|
const { t } = useI18n();
|
|
3199
3199
|
const { config } = react.useVolrContext();
|
|
3200
3200
|
const { client } = react.useInternalAuth();
|
|
3201
|
-
const [chainName, setChainName] =
|
|
3202
|
-
const [showOtherTokenModal, setShowOtherTokenModal] =
|
|
3203
|
-
const [showToast, setShowToast] =
|
|
3204
|
-
const [toastData, setToastData] =
|
|
3201
|
+
const [chainName, setChainName] = React13.useState(null);
|
|
3202
|
+
const [showOtherTokenModal, setShowOtherTokenModal] = React13.useState(false);
|
|
3203
|
+
const [showToast, setShowToast] = React13.useState(false);
|
|
3204
|
+
const [toastData, setToastData] = React13.useState(null);
|
|
3205
3205
|
const eip681 = `ethereum:${props.address}`;
|
|
3206
3206
|
const status = react.useDepositListener({
|
|
3207
3207
|
chainId: props.chainId,
|
|
@@ -3214,7 +3214,7 @@ function DepositQRView(props) {
|
|
|
3214
3214
|
},
|
|
3215
3215
|
address: props.address
|
|
3216
3216
|
});
|
|
3217
|
-
|
|
3217
|
+
React13.useEffect(() => {
|
|
3218
3218
|
if (status.state === "detected") {
|
|
3219
3219
|
setToastData({
|
|
3220
3220
|
previousBalance: status.previousBalance,
|
|
@@ -3224,11 +3224,11 @@ function DepositQRView(props) {
|
|
|
3224
3224
|
setShowToast(true);
|
|
3225
3225
|
}
|
|
3226
3226
|
}, [status]);
|
|
3227
|
-
const getNetworkInfo =
|
|
3227
|
+
const getNetworkInfo = React13.useCallback(
|
|
3228
3228
|
react.createGetNetworkInfo({ client, rpcOverrides: config.rpcOverrides }),
|
|
3229
3229
|
[client, config.rpcOverrides]
|
|
3230
3230
|
);
|
|
3231
|
-
|
|
3231
|
+
React13.useEffect(() => {
|
|
3232
3232
|
let cancelled = false;
|
|
3233
3233
|
const loadChainName = async () => {
|
|
3234
3234
|
try {
|
|
@@ -3395,11 +3395,11 @@ var DepositModal = ({
|
|
|
3395
3395
|
}) => {
|
|
3396
3396
|
const { user } = react.useVolrContext();
|
|
3397
3397
|
const { client } = react.useInternalAuth();
|
|
3398
|
-
const [depositAssets, setDepositAssets] =
|
|
3399
|
-
const [isLoading, setIsLoading] =
|
|
3400
|
-
const [error, setError] =
|
|
3401
|
-
const [selectedIdx, setSelectedIdx] =
|
|
3402
|
-
|
|
3398
|
+
const [depositAssets, setDepositAssets] = React13.useState([]);
|
|
3399
|
+
const [isLoading, setIsLoading] = React13.useState(true);
|
|
3400
|
+
const [error, setError] = React13.useState(null);
|
|
3401
|
+
const [selectedIdx, setSelectedIdx] = React13.useState(-1);
|
|
3402
|
+
React13.useEffect(() => {
|
|
3403
3403
|
if (!open) return;
|
|
3404
3404
|
setIsLoading(true);
|
|
3405
3405
|
setError(null);
|
|
@@ -3426,12 +3426,12 @@ var DepositModal = ({
|
|
|
3426
3426
|
if (depositAssets.length === 1) return 0;
|
|
3427
3427
|
return -1;
|
|
3428
3428
|
};
|
|
3429
|
-
|
|
3429
|
+
React13.useEffect(() => {
|
|
3430
3430
|
if (open && !isLoading && depositAssets.length > 0) {
|
|
3431
3431
|
setSelectedIdx(getInitialIndex());
|
|
3432
3432
|
}
|
|
3433
3433
|
}, [open, isLoading, depositAssets.length, asset]);
|
|
3434
|
-
|
|
3434
|
+
React13.useEffect(() => {
|
|
3435
3435
|
if (!open) {
|
|
3436
3436
|
setSelectedIdx(-1);
|
|
3437
3437
|
}
|
|
@@ -3468,12 +3468,12 @@ init_abis();
|
|
|
3468
3468
|
var initialState = {
|
|
3469
3469
|
step: "info",
|
|
3470
3470
|
processingStep: "signing",
|
|
3471
|
-
balance: "0",
|
|
3472
|
-
isBalanceLoading: true,
|
|
3473
3471
|
isConfigLoading: true,
|
|
3474
3472
|
isPaying: false,
|
|
3475
3473
|
payOptions: null,
|
|
3476
|
-
|
|
3474
|
+
tokens: [],
|
|
3475
|
+
tokenBalances: /* @__PURE__ */ new Map(),
|
|
3476
|
+
selectedTokenId: null,
|
|
3477
3477
|
createdPayment: null,
|
|
3478
3478
|
txHash: void 0,
|
|
3479
3479
|
error: void 0,
|
|
@@ -3484,26 +3484,53 @@ var initialState = {
|
|
|
3484
3484
|
function paymentModalReducer(state, action) {
|
|
3485
3485
|
switch (action.type) {
|
|
3486
3486
|
case "RESET":
|
|
3487
|
-
return { ...initialState };
|
|
3487
|
+
return { ...initialState, tokenBalances: /* @__PURE__ */ new Map() };
|
|
3488
3488
|
case "INIT":
|
|
3489
3489
|
return {
|
|
3490
3490
|
...initialState,
|
|
3491
|
+
tokenBalances: /* @__PURE__ */ new Map(),
|
|
3491
3492
|
payOptions: action.options,
|
|
3492
|
-
isBalanceLoading: true,
|
|
3493
3493
|
isConfigLoading: true
|
|
3494
3494
|
};
|
|
3495
|
-
case "
|
|
3496
|
-
|
|
3497
|
-
|
|
3498
|
-
|
|
3499
|
-
|
|
3500
|
-
return { ...state,
|
|
3495
|
+
case "SET_TOKENS": {
|
|
3496
|
+
const balances = /* @__PURE__ */ new Map();
|
|
3497
|
+
for (const token of action.tokens) {
|
|
3498
|
+
balances.set(token.id, { balance: "0", balanceRaw: 0n, isLoading: true });
|
|
3499
|
+
}
|
|
3500
|
+
return { ...state, tokens: action.tokens, tokenBalances: balances };
|
|
3501
|
+
}
|
|
3502
|
+
case "SET_TOKEN_BALANCE": {
|
|
3503
|
+
const newBalances = new Map(state.tokenBalances);
|
|
3504
|
+
newBalances.set(action.tokenId, {
|
|
3505
|
+
balance: action.balance,
|
|
3506
|
+
balanceRaw: action.balanceRaw,
|
|
3507
|
+
isLoading: false
|
|
3508
|
+
});
|
|
3509
|
+
return { ...state, tokenBalances: newBalances };
|
|
3510
|
+
}
|
|
3511
|
+
case "SET_TOKEN_BALANCE_LOADING": {
|
|
3512
|
+
const newBalances = new Map(state.tokenBalances);
|
|
3513
|
+
const existing = newBalances.get(action.tokenId);
|
|
3514
|
+
if (existing) {
|
|
3515
|
+
newBalances.set(action.tokenId, { ...existing, isLoading: action.loading });
|
|
3516
|
+
}
|
|
3517
|
+
return { ...state, tokenBalances: newBalances };
|
|
3518
|
+
}
|
|
3519
|
+
case "SET_ALL_BALANCES_LOADING": {
|
|
3520
|
+
const newBalances = new Map(state.tokenBalances);
|
|
3521
|
+
for (const [tokenId, data] of newBalances) {
|
|
3522
|
+
newBalances.set(tokenId, { ...data, isLoading: action.loading });
|
|
3523
|
+
}
|
|
3524
|
+
return { ...state, tokenBalances: newBalances };
|
|
3525
|
+
}
|
|
3501
3526
|
case "SET_CONFIG_LOADING":
|
|
3502
3527
|
return { ...state, isConfigLoading: action.loading };
|
|
3503
3528
|
case "SET_LOGO_URL":
|
|
3504
3529
|
return { ...state, logoUrl: action.logoUrl };
|
|
3505
3530
|
case "SET_RECEIVER_ADDRESS":
|
|
3506
3531
|
return { ...state, receiverAddress: action.receiverAddress };
|
|
3532
|
+
case "SELECT_TOKEN":
|
|
3533
|
+
return { ...state, selectedTokenId: action.tokenId };
|
|
3507
3534
|
case "START_PAYMENT":
|
|
3508
3535
|
return {
|
|
3509
3536
|
...state,
|
|
@@ -3536,13 +3563,12 @@ function paymentModalReducer(state, action) {
|
|
|
3536
3563
|
return {
|
|
3537
3564
|
...state,
|
|
3538
3565
|
step: "info",
|
|
3539
|
-
error: void 0
|
|
3540
|
-
isBalanceLoading: true
|
|
3566
|
+
error: void 0
|
|
3541
3567
|
};
|
|
3542
3568
|
case "SHOW_DEPOSIT":
|
|
3543
3569
|
return { ...state, showDeposit: true };
|
|
3544
3570
|
case "HIDE_DEPOSIT":
|
|
3545
|
-
return { ...state, showDeposit: false
|
|
3571
|
+
return { ...state, showDeposit: false };
|
|
3546
3572
|
default:
|
|
3547
3573
|
return state;
|
|
3548
3574
|
}
|
|
@@ -3553,66 +3579,111 @@ function usePaymentModalState(open, onOpenChange) {
|
|
|
3553
3579
|
const { evm } = react.useVolr();
|
|
3554
3580
|
const { paymentOptions } = useVolrModal();
|
|
3555
3581
|
const { createPayment, updatePaymentToProcessing, pollPaymentStatus, failPendingPayment } = react.useVolrPaymentApi();
|
|
3556
|
-
const [state, dispatch] =
|
|
3557
|
-
const
|
|
3558
|
-
|
|
3582
|
+
const [state, dispatch] = React13.useReducer(paymentModalReducer, initialState);
|
|
3583
|
+
const tokensWithBalances = state.tokens.map((token) => {
|
|
3584
|
+
const balanceData = state.tokenBalances.get(token.id);
|
|
3585
|
+
return {
|
|
3586
|
+
...token,
|
|
3587
|
+
balance: balanceData?.balance ?? "0",
|
|
3588
|
+
balanceRaw: balanceData?.balanceRaw ?? 0n,
|
|
3589
|
+
isBalanceLoading: balanceData?.isLoading ?? true
|
|
3590
|
+
};
|
|
3591
|
+
});
|
|
3592
|
+
const selectedToken = state.selectedTokenId ? tokensWithBalances.find((t) => t.id === state.selectedTokenId) ?? null : null;
|
|
3593
|
+
const isBalanceLoading = tokensWithBalances.some((t) => t.isBalanceLoading);
|
|
3594
|
+
const fetchTokenBalance = React13.useCallback(
|
|
3595
|
+
async (token) => {
|
|
3559
3596
|
if (!user?.evmAddress) {
|
|
3560
|
-
dispatch({
|
|
3597
|
+
dispatch({
|
|
3598
|
+
type: "SET_TOKEN_BALANCE",
|
|
3599
|
+
tokenId: token.id,
|
|
3600
|
+
balance: "0",
|
|
3601
|
+
balanceRaw: 0n
|
|
3602
|
+
});
|
|
3561
3603
|
return;
|
|
3562
3604
|
}
|
|
3563
|
-
dispatch({ type: "
|
|
3605
|
+
dispatch({ type: "SET_TOKEN_BALANCE_LOADING", tokenId: token.id, loading: true });
|
|
3564
3606
|
try {
|
|
3565
|
-
const evmClient = evm.client(
|
|
3607
|
+
const evmClient = evm.client(token.chainId);
|
|
3566
3608
|
let balanceRaw;
|
|
3567
|
-
if (
|
|
3609
|
+
if (token.address === "native") {
|
|
3568
3610
|
balanceRaw = await evmClient.getBalance(user.evmAddress);
|
|
3569
3611
|
} else {
|
|
3570
3612
|
balanceRaw = await evmClient.readContract({
|
|
3571
|
-
address:
|
|
3613
|
+
address: token.address,
|
|
3572
3614
|
abi: erc20Abi,
|
|
3573
3615
|
functionName: "balanceOf",
|
|
3574
3616
|
args: [user.evmAddress]
|
|
3575
3617
|
});
|
|
3576
3618
|
}
|
|
3577
|
-
const balanceNum = Number(balanceRaw) / Math.pow(10,
|
|
3619
|
+
const balanceNum = Number(balanceRaw) / Math.pow(10, token.decimals);
|
|
3578
3620
|
const formattedBalance = balanceNum.toLocaleString(void 0, {
|
|
3579
3621
|
minimumFractionDigits: 0,
|
|
3580
|
-
maximumFractionDigits:
|
|
3622
|
+
maximumFractionDigits: token.decimals > 6 ? 6 : token.decimals
|
|
3623
|
+
});
|
|
3624
|
+
dispatch({
|
|
3625
|
+
type: "SET_TOKEN_BALANCE",
|
|
3626
|
+
tokenId: token.id,
|
|
3627
|
+
balance: formattedBalance,
|
|
3628
|
+
balanceRaw
|
|
3581
3629
|
});
|
|
3582
|
-
dispatch({ type: "SET_BALANCE", balance: formattedBalance });
|
|
3583
3630
|
} catch (err) {
|
|
3584
|
-
console.error(
|
|
3585
|
-
dispatch({
|
|
3586
|
-
|
|
3587
|
-
|
|
3631
|
+
console.error(`Failed to fetch balance for ${token.symbol}:`, err);
|
|
3632
|
+
dispatch({
|
|
3633
|
+
type: "SET_TOKEN_BALANCE",
|
|
3634
|
+
tokenId: token.id,
|
|
3635
|
+
balance: "0",
|
|
3636
|
+
balanceRaw: 0n
|
|
3637
|
+
});
|
|
3588
3638
|
}
|
|
3589
3639
|
},
|
|
3590
3640
|
[user, evm]
|
|
3591
3641
|
);
|
|
3592
|
-
const
|
|
3642
|
+
const fetchAllBalances = React13.useCallback(
|
|
3643
|
+
async (tokens) => {
|
|
3644
|
+
await Promise.all(tokens.map((token) => fetchTokenBalance(token)));
|
|
3645
|
+
},
|
|
3646
|
+
[fetchTokenBalance]
|
|
3647
|
+
);
|
|
3648
|
+
const fetchBranding = React13.useCallback(async () => {
|
|
3593
3649
|
try {
|
|
3594
3650
|
const response = await client.get("/auth/branding");
|
|
3595
3651
|
dispatch({ type: "SET_LOGO_URL", logoUrl: response.logoUrl });
|
|
3596
3652
|
} catch {
|
|
3597
3653
|
}
|
|
3598
3654
|
}, [client]);
|
|
3599
|
-
const fetchPaymentConfig =
|
|
3655
|
+
const fetchPaymentConfig = React13.useCallback(async () => {
|
|
3600
3656
|
dispatch({ type: "SET_CONFIG_LOADING", loading: true });
|
|
3601
3657
|
try {
|
|
3602
3658
|
const response = await client.get("/payments/config");
|
|
3603
3659
|
dispatch({ type: "SET_RECEIVER_ADDRESS", receiverAddress: response.receiverAddress });
|
|
3604
|
-
dispatch({ type: "
|
|
3605
|
-
if (response.
|
|
3606
|
-
|
|
3660
|
+
dispatch({ type: "SET_TOKENS", tokens: response.tokens ?? [] });
|
|
3661
|
+
if (response.tokens && response.tokens.length > 0) {
|
|
3662
|
+
await fetchAllBalances(response.tokens);
|
|
3607
3663
|
}
|
|
3608
3664
|
} catch (err) {
|
|
3609
3665
|
console.error("Failed to fetch payment config:", err);
|
|
3610
3666
|
dispatch({ type: "SET_RECEIVER_ADDRESS", receiverAddress: null });
|
|
3667
|
+
dispatch({ type: "SET_TOKENS", tokens: [] });
|
|
3611
3668
|
} finally {
|
|
3612
3669
|
dispatch({ type: "SET_CONFIG_LOADING", loading: false });
|
|
3613
3670
|
}
|
|
3614
|
-
}, [client,
|
|
3615
|
-
|
|
3671
|
+
}, [client, fetchAllBalances]);
|
|
3672
|
+
const selectBestToken = React13.useCallback(() => {
|
|
3673
|
+
if (state.tokens.length === 0) return;
|
|
3674
|
+
if (state.selectedTokenId) return;
|
|
3675
|
+
let bestTokenId = state.tokens[0].id;
|
|
3676
|
+
let highestBalance = 0n;
|
|
3677
|
+
for (const token of state.tokens) {
|
|
3678
|
+
const balanceData = state.tokenBalances.get(token.id);
|
|
3679
|
+
if (balanceData && !balanceData.isLoading && balanceData.balanceRaw > highestBalance) {
|
|
3680
|
+
highestBalance = balanceData.balanceRaw;
|
|
3681
|
+
bestTokenId = token.id;
|
|
3682
|
+
}
|
|
3683
|
+
}
|
|
3684
|
+
dispatch({ type: "SELECT_TOKEN", tokenId: bestTokenId });
|
|
3685
|
+
}, [state.tokens, state.tokenBalances, state.selectedTokenId]);
|
|
3686
|
+
React13.useEffect(() => {
|
|
3616
3687
|
if (open && paymentOptions?.options) {
|
|
3617
3688
|
if (state.step === "processing" || state.step === "result") {
|
|
3618
3689
|
return;
|
|
@@ -3624,15 +3695,30 @@ function usePaymentModalState(open, onOpenChange) {
|
|
|
3624
3695
|
dispatch({ type: "RESET" });
|
|
3625
3696
|
}
|
|
3626
3697
|
}, [open, paymentOptions?.options?.amount]);
|
|
3627
|
-
|
|
3628
|
-
|
|
3629
|
-
|
|
3698
|
+
React13.useEffect(() => {
|
|
3699
|
+
if (!isBalanceLoading && state.tokens.length > 0 && !state.selectedTokenId) {
|
|
3700
|
+
selectBestToken();
|
|
3701
|
+
}
|
|
3702
|
+
}, [isBalanceLoading, state.tokens.length, state.selectedTokenId, selectBestToken]);
|
|
3703
|
+
const handleSelectToken = React13.useCallback((tokenId) => {
|
|
3704
|
+
dispatch({ type: "SELECT_TOKEN", tokenId });
|
|
3705
|
+
}, []);
|
|
3706
|
+
const handlePay = React13.useCallback(async () => {
|
|
3707
|
+
const { payOptions, receiverAddress, selectedTokenId } = state;
|
|
3708
|
+
if (!payOptions || !user?.evmAddress || !paymentOptions || !receiverAddress || !selectedTokenId) {
|
|
3709
|
+
return;
|
|
3710
|
+
}
|
|
3711
|
+
const tokenInfo = state.tokens.find((t) => t.id === selectedTokenId);
|
|
3712
|
+
if (!tokenInfo) {
|
|
3630
3713
|
return;
|
|
3631
3714
|
}
|
|
3632
3715
|
dispatch({ type: "START_PAYMENT" });
|
|
3633
3716
|
let createdPaymentId = null;
|
|
3634
3717
|
try {
|
|
3635
|
-
const payment = await createPayment(
|
|
3718
|
+
const payment = await createPayment({
|
|
3719
|
+
...payOptions,
|
|
3720
|
+
tokenId: selectedTokenId
|
|
3721
|
+
});
|
|
3636
3722
|
createdPaymentId = payment.id;
|
|
3637
3723
|
dispatch({ type: "SET_CREATED_PAYMENT", payment });
|
|
3638
3724
|
paymentOptions.options.handlers?.onCreated?.({ id: payment.id });
|
|
@@ -3704,33 +3790,33 @@ function usePaymentModalState(open, onOpenChange) {
|
|
|
3704
3790
|
pollPaymentStatus,
|
|
3705
3791
|
failPendingPayment
|
|
3706
3792
|
]);
|
|
3707
|
-
const handleDeposit =
|
|
3793
|
+
const handleDeposit = React13.useCallback(() => {
|
|
3708
3794
|
dispatch({ type: "SHOW_DEPOSIT" });
|
|
3709
3795
|
}, []);
|
|
3710
|
-
const handleDepositClose =
|
|
3796
|
+
const handleDepositClose = React13.useCallback(
|
|
3711
3797
|
(depositOpen) => {
|
|
3712
3798
|
if (!depositOpen) {
|
|
3713
3799
|
dispatch({ type: "HIDE_DEPOSIT" });
|
|
3714
|
-
if (state.
|
|
3715
|
-
|
|
3800
|
+
if (state.tokens.length > 0) {
|
|
3801
|
+
fetchAllBalances(state.tokens);
|
|
3716
3802
|
}
|
|
3717
3803
|
}
|
|
3718
3804
|
},
|
|
3719
|
-
[state.
|
|
3805
|
+
[state.tokens, fetchAllBalances]
|
|
3720
3806
|
);
|
|
3721
|
-
const handleDone =
|
|
3807
|
+
const handleDone = React13.useCallback(() => {
|
|
3722
3808
|
if (state.createdPayment?.status === "CONFIRMED") {
|
|
3723
3809
|
paymentOptions?.onComplete?.(state.createdPayment);
|
|
3724
3810
|
}
|
|
3725
3811
|
onOpenChange(false);
|
|
3726
3812
|
}, [state.createdPayment, paymentOptions, onOpenChange]);
|
|
3727
|
-
const handleRetry =
|
|
3813
|
+
const handleRetry = React13.useCallback(() => {
|
|
3728
3814
|
dispatch({ type: "RETRY" });
|
|
3729
|
-
if (state.
|
|
3730
|
-
|
|
3815
|
+
if (state.tokens.length > 0) {
|
|
3816
|
+
fetchAllBalances(state.tokens);
|
|
3731
3817
|
}
|
|
3732
|
-
}, [state.
|
|
3733
|
-
const handleClose =
|
|
3818
|
+
}, [state.tokens, fetchAllBalances]);
|
|
3819
|
+
const handleClose = React13.useCallback(() => {
|
|
3734
3820
|
if (state.step === "processing") {
|
|
3735
3821
|
return;
|
|
3736
3822
|
}
|
|
@@ -3739,8 +3825,9 @@ function usePaymentModalState(open, onOpenChange) {
|
|
|
3739
3825
|
}
|
|
3740
3826
|
onOpenChange(false);
|
|
3741
3827
|
}, [state.step, paymentOptions, onOpenChange]);
|
|
3742
|
-
const handleReport =
|
|
3743
|
-
const { createdPayment, error, step, txHash,
|
|
3828
|
+
const handleReport = React13.useCallback(async () => {
|
|
3829
|
+
const { createdPayment, error, step, txHash, selectedTokenId } = state;
|
|
3830
|
+
const tokenInfo = state.tokens.find((t) => t.id === selectedTokenId);
|
|
3744
3831
|
if (!createdPayment || !error) return;
|
|
3745
3832
|
try {
|
|
3746
3833
|
await client.post(`/payments/${createdPayment.id}/report`, {
|
|
@@ -3768,10 +3855,14 @@ Please contact support with this information.`
|
|
|
3768
3855
|
}
|
|
3769
3856
|
}, [state, client]);
|
|
3770
3857
|
const canClose = state.step !== "processing";
|
|
3771
|
-
const isConfigured = state.receiverAddress !== null && state.
|
|
3772
|
-
const isReady = !state.isConfigLoading && !
|
|
3858
|
+
const isConfigured = state.receiverAddress !== null && state.tokens.length > 0;
|
|
3859
|
+
const isReady = !state.isConfigLoading && !isBalanceLoading && isConfigured && state.selectedTokenId !== null;
|
|
3773
3860
|
return {
|
|
3774
3861
|
state,
|
|
3862
|
+
selectedToken,
|
|
3863
|
+
tokensWithBalances,
|
|
3864
|
+
isBalanceLoading,
|
|
3865
|
+
handleSelectToken,
|
|
3775
3866
|
handlePay,
|
|
3776
3867
|
handleDeposit,
|
|
3777
3868
|
handleDepositClose,
|
|
@@ -3883,26 +3974,180 @@ var ItemDisplay = ({
|
|
|
3883
3974
|
] })
|
|
3884
3975
|
] });
|
|
3885
3976
|
};
|
|
3977
|
+
var TokenSelector = ({
|
|
3978
|
+
tokens,
|
|
3979
|
+
selectedTokenId,
|
|
3980
|
+
onSelect,
|
|
3981
|
+
disabled = false
|
|
3982
|
+
}) => {
|
|
3983
|
+
const [isOpen, setIsOpen] = React13.useState(false);
|
|
3984
|
+
const dropdownRef = React13.useRef(null);
|
|
3985
|
+
const selectedToken = tokens.find((t) => t.id === selectedTokenId);
|
|
3986
|
+
React13.useEffect(() => {
|
|
3987
|
+
const handleClickOutside = (event) => {
|
|
3988
|
+
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
|
|
3989
|
+
setIsOpen(false);
|
|
3990
|
+
}
|
|
3991
|
+
};
|
|
3992
|
+
document.addEventListener("mousedown", handleClickOutside);
|
|
3993
|
+
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
3994
|
+
}, []);
|
|
3995
|
+
const handleSelect = (tokenId) => {
|
|
3996
|
+
onSelect(tokenId);
|
|
3997
|
+
setIsOpen(false);
|
|
3998
|
+
};
|
|
3999
|
+
if (tokens.length <= 1) {
|
|
4000
|
+
return null;
|
|
4001
|
+
}
|
|
4002
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:relative", ref: dropdownRef, children: [
|
|
4003
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
4004
|
+
"button",
|
|
4005
|
+
{
|
|
4006
|
+
type: "button",
|
|
4007
|
+
onClick: () => !disabled && setIsOpen(!isOpen),
|
|
4008
|
+
disabled,
|
|
4009
|
+
className: `volr:w-full volr:flex volr:items-center volr:justify-between volr:p-3 volr:rounded-lg volr:border volr:border-slate-200 volr:bg-white volr:transition-colors ${disabled ? "volr:opacity-50 volr:cursor-not-allowed" : "volr:hover:border-slate-300 volr:cursor-pointer"}`,
|
|
4010
|
+
children: [
|
|
4011
|
+
selectedToken ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:items-center volr:gap-3", children: [
|
|
4012
|
+
/* @__PURE__ */ jsxRuntime.jsx(TokenIcon, { token: selectedToken, size: "sm" }),
|
|
4013
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:text-left", children: [
|
|
4014
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:items-center volr:gap-2", children: [
|
|
4015
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:text-sm volr:font-medium volr:text-slate-900", children: selectedToken.symbol }),
|
|
4016
|
+
/* @__PURE__ */ jsxRuntime.jsx(ChainBadge, { chainId: selectedToken.chainId })
|
|
4017
|
+
] }),
|
|
4018
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: "volr:text-xs volr:text-slate-500", children: [
|
|
4019
|
+
"Balance: ",
|
|
4020
|
+
selectedToken.isBalanceLoading ? "..." : selectedToken.balance
|
|
4021
|
+
] })
|
|
4022
|
+
] })
|
|
4023
|
+
] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:text-sm volr:text-slate-500", children: "Select token" }),
|
|
4024
|
+
/* @__PURE__ */ jsxRuntime.jsx(ChevronIcon, { isOpen })
|
|
4025
|
+
]
|
|
4026
|
+
}
|
|
4027
|
+
),
|
|
4028
|
+
isOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:absolute volr:z-50 volr:w-full volr:mt-1 volr:bg-white volr:border volr:border-slate-200 volr:rounded-lg volr:shadow-lg volr:max-h-60 volr:overflow-auto", children: tokens.map((token) => {
|
|
4029
|
+
const isSelected = token.id === selectedTokenId;
|
|
4030
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
4031
|
+
"button",
|
|
4032
|
+
{
|
|
4033
|
+
type: "button",
|
|
4034
|
+
onClick: () => handleSelect(token.id),
|
|
4035
|
+
className: `volr:w-full volr:flex volr:items-center volr:justify-between volr:p-3 volr:text-left volr:transition-colors ${isSelected ? "volr:bg-slate-100" : "volr:hover:bg-slate-50"}`,
|
|
4036
|
+
children: [
|
|
4037
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:items-center volr:gap-3", children: [
|
|
4038
|
+
/* @__PURE__ */ jsxRuntime.jsx(TokenIcon, { token, size: "sm" }),
|
|
4039
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
4040
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:items-center volr:gap-2", children: [
|
|
4041
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:text-sm volr:font-medium volr:text-slate-900", children: token.symbol }),
|
|
4042
|
+
/* @__PURE__ */ jsxRuntime.jsx(ChainBadge, { chainId: token.chainId })
|
|
4043
|
+
] }),
|
|
4044
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: "volr:text-xs volr:text-slate-500", children: [
|
|
4045
|
+
"Balance: ",
|
|
4046
|
+
token.isBalanceLoading ? "..." : token.balance
|
|
4047
|
+
] })
|
|
4048
|
+
] })
|
|
4049
|
+
] }),
|
|
4050
|
+
isSelected && /* @__PURE__ */ jsxRuntime.jsx(
|
|
4051
|
+
"svg",
|
|
4052
|
+
{
|
|
4053
|
+
className: "volr:w-4 volr:h-4 volr:text-slate-900",
|
|
4054
|
+
fill: "none",
|
|
4055
|
+
viewBox: "0 0 24 24",
|
|
4056
|
+
stroke: "currentColor",
|
|
4057
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
4058
|
+
"path",
|
|
4059
|
+
{
|
|
4060
|
+
strokeLinecap: "round",
|
|
4061
|
+
strokeLinejoin: "round",
|
|
4062
|
+
strokeWidth: 2,
|
|
4063
|
+
d: "M5 13l4 4L19 7"
|
|
4064
|
+
}
|
|
4065
|
+
)
|
|
4066
|
+
}
|
|
4067
|
+
)
|
|
4068
|
+
]
|
|
4069
|
+
},
|
|
4070
|
+
token.id
|
|
4071
|
+
);
|
|
4072
|
+
}) })
|
|
4073
|
+
] });
|
|
4074
|
+
};
|
|
4075
|
+
var TokenIcon = ({ token, size = "md" }) => {
|
|
4076
|
+
const sizeClass = size === "sm" ? "volr:w-6 volr:h-6" : "volr:w-8 volr:h-8";
|
|
4077
|
+
const textSize = size === "sm" ? "volr:text-xs" : "volr:text-sm";
|
|
4078
|
+
if (token.iconUrl) {
|
|
4079
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
4080
|
+
"img",
|
|
4081
|
+
{
|
|
4082
|
+
src: token.iconUrl,
|
|
4083
|
+
alt: token.symbol,
|
|
4084
|
+
className: `${sizeClass} volr:rounded-full`
|
|
4085
|
+
}
|
|
4086
|
+
);
|
|
4087
|
+
}
|
|
4088
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
4089
|
+
"div",
|
|
4090
|
+
{
|
|
4091
|
+
className: `${sizeClass} volr:rounded-full volr:bg-slate-200 volr:flex volr:items-center volr:justify-center ${textSize} volr:font-medium volr:text-slate-600`,
|
|
4092
|
+
children: token.symbol.slice(0, 2)
|
|
4093
|
+
}
|
|
4094
|
+
);
|
|
4095
|
+
};
|
|
4096
|
+
var CHAIN_NAMES = {
|
|
4097
|
+
1: "Ethereum",
|
|
4098
|
+
10: "Optimism",
|
|
4099
|
+
137: "Polygon",
|
|
4100
|
+
42161: "Arbitrum",
|
|
4101
|
+
8453: "Base",
|
|
4102
|
+
84532: "Base Sepolia",
|
|
4103
|
+
5115: "Citrea"
|
|
4104
|
+
};
|
|
4105
|
+
var ChainBadge = ({ chainId }) => {
|
|
4106
|
+
const chainName = CHAIN_NAMES[chainId] || `Chain ${chainId}`;
|
|
4107
|
+
return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:text-xs volr:text-slate-400 volr:bg-slate-100 volr:px-1.5 volr:py-0.5 volr:rounded", children: chainName });
|
|
4108
|
+
};
|
|
4109
|
+
var ChevronIcon = ({ isOpen }) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
4110
|
+
"svg",
|
|
4111
|
+
{
|
|
4112
|
+
className: `volr:w-4 volr:h-4 volr:text-slate-500 volr:transition-transform ${isOpen ? "volr:rotate-180" : ""}`,
|
|
4113
|
+
fill: "none",
|
|
4114
|
+
viewBox: "0 0 24 24",
|
|
4115
|
+
stroke: "currentColor",
|
|
4116
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
4117
|
+
"path",
|
|
4118
|
+
{
|
|
4119
|
+
strokeLinecap: "round",
|
|
4120
|
+
strokeLinejoin: "round",
|
|
4121
|
+
strokeWidth: 2,
|
|
4122
|
+
d: "M19 9l-7 7-7-7"
|
|
4123
|
+
}
|
|
4124
|
+
)
|
|
4125
|
+
}
|
|
4126
|
+
);
|
|
3886
4127
|
var PaymentInfoView = ({
|
|
3887
4128
|
amount,
|
|
3888
|
-
|
|
3889
|
-
|
|
4129
|
+
tokens,
|
|
4130
|
+
selectedTokenId,
|
|
4131
|
+
onSelectToken,
|
|
3890
4132
|
itemName,
|
|
3891
4133
|
itemDescription,
|
|
3892
4134
|
itemImage,
|
|
3893
|
-
balance,
|
|
3894
|
-
isBalanceLoading,
|
|
3895
4135
|
logoUrl,
|
|
3896
4136
|
onPay,
|
|
3897
4137
|
onDeposit,
|
|
3898
|
-
isPaying
|
|
4138
|
+
isPaying,
|
|
4139
|
+
isBalanceLoading
|
|
3899
4140
|
}) => {
|
|
4141
|
+
const selectedToken = tokens.find((t) => t.id === selectedTokenId);
|
|
4142
|
+
const tokenSymbol = selectedToken?.symbol ?? "";
|
|
4143
|
+
const tokenDecimals = selectedToken?.decimals ?? 6;
|
|
4144
|
+
const balance = selectedToken?.balance ?? "0";
|
|
3900
4145
|
const formattedAmount = amount.toLocaleString(void 0, {
|
|
3901
4146
|
minimumFractionDigits: 0,
|
|
3902
4147
|
maximumFractionDigits: tokenDecimals > 6 ? 6 : tokenDecimals
|
|
3903
4148
|
});
|
|
3904
4149
|
const balanceNum = parseFloat(balance.replace(/,/g, "") || "0");
|
|
3905
|
-
const isInsufficient = !isBalanceLoading && balanceNum < amount;
|
|
4150
|
+
const isInsufficient = !isBalanceLoading && selectedToken && balanceNum < amount;
|
|
3906
4151
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:space-y-6", children: [
|
|
3907
4152
|
itemName && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
3908
4153
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -3920,10 +4165,22 @@ var PaymentInfoView = ({
|
|
|
3920
4165
|
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:text-slate-500", children: "Amount to Pay" }),
|
|
3921
4166
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:items-baseline volr:gap-2", children: [
|
|
3922
4167
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:text-2xl volr:font-bold volr:text-slate-900", children: formattedAmount }),
|
|
3923
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:text-lg volr:font-medium volr:text-slate-600", children: tokenSymbol })
|
|
4168
|
+
selectedToken && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:text-lg volr:font-medium volr:text-slate-600", children: tokenSymbol })
|
|
3924
4169
|
] })
|
|
3925
4170
|
] }),
|
|
3926
|
-
|
|
4171
|
+
tokens.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:space-y-2", children: [
|
|
4172
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:text-slate-500", children: "Pay with" }),
|
|
4173
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4174
|
+
TokenSelector,
|
|
4175
|
+
{
|
|
4176
|
+
tokens,
|
|
4177
|
+
selectedTokenId,
|
|
4178
|
+
onSelect: onSelectToken,
|
|
4179
|
+
disabled: isPaying
|
|
4180
|
+
}
|
|
4181
|
+
)
|
|
4182
|
+
] }),
|
|
4183
|
+
selectedToken && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: isBalanceLoading || selectedToken.isBalanceLoading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:justify-between volr:items-center volr:p-3 volr:bg-slate-50 volr:rounded-lg volr:animate-pulse", children: [
|
|
3927
4184
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:text-sm volr:text-slate-400", children: "Loading balance..." }),
|
|
3928
4185
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:h-4 volr:bg-slate-200 volr:rounded volr:w-20" })
|
|
3929
4186
|
] }) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -3932,15 +4189,15 @@ var PaymentInfoView = ({
|
|
|
3932
4189
|
balance,
|
|
3933
4190
|
symbol: tokenSymbol,
|
|
3934
4191
|
required: formattedAmount,
|
|
3935
|
-
isInsufficient
|
|
4192
|
+
isInsufficient: !!isInsufficient
|
|
3936
4193
|
}
|
|
3937
|
-
),
|
|
4194
|
+
) }),
|
|
3938
4195
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:space-y-3", children: [
|
|
3939
4196
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3940
4197
|
Button,
|
|
3941
4198
|
{
|
|
3942
4199
|
onClick: onPay,
|
|
3943
|
-
disabled: isPaying || isBalanceLoading || isInsufficient,
|
|
4200
|
+
disabled: isPaying || isBalanceLoading || !!isInsufficient || !selectedToken,
|
|
3944
4201
|
className: "volr:w-full",
|
|
3945
4202
|
children: isPaying ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "volr:flex volr:items-center volr:justify-center volr:gap-2", children: [
|
|
3946
4203
|
/* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "volr:animate-spin volr:h-4 volr:w-4", viewBox: "0 0 24 24", children: [
|
|
@@ -3966,10 +4223,10 @@ var PaymentInfoView = ({
|
|
|
3966
4223
|
)
|
|
3967
4224
|
] }),
|
|
3968
4225
|
"Processing..."
|
|
3969
|
-
] }) : isInsufficient ? "Insufficient Balance" : `Pay ${formattedAmount} ${tokenSymbol}`
|
|
4226
|
+
] }) : isInsufficient ? "Insufficient Balance" : !selectedToken ? "Select a token" : `Pay ${formattedAmount} ${tokenSymbol}`
|
|
3970
4227
|
}
|
|
3971
4228
|
),
|
|
3972
|
-
isInsufficient && /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "secondary", onClick: onDeposit, className: "volr:w-full", children: [
|
|
4229
|
+
isInsufficient && selectedToken && /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "secondary", onClick: onDeposit, className: "volr:w-full", children: [
|
|
3973
4230
|
"Deposit ",
|
|
3974
4231
|
tokenSymbol
|
|
3975
4232
|
] })
|
|
@@ -4142,6 +4399,10 @@ var PaymentModal = ({
|
|
|
4142
4399
|
const { paymentOptions } = useVolrModal();
|
|
4143
4400
|
const {
|
|
4144
4401
|
state,
|
|
4402
|
+
selectedToken,
|
|
4403
|
+
tokensWithBalances,
|
|
4404
|
+
isBalanceLoading,
|
|
4405
|
+
handleSelectToken,
|
|
4145
4406
|
handlePay,
|
|
4146
4407
|
handleDeposit,
|
|
4147
4408
|
handleDepositClose,
|
|
@@ -4150,31 +4411,30 @@ var PaymentModal = ({
|
|
|
4150
4411
|
handleClose,
|
|
4151
4412
|
handleReport,
|
|
4152
4413
|
canClose,
|
|
4153
|
-
isConfigured
|
|
4414
|
+
isConfigured
|
|
4415
|
+
} = usePaymentModalState(open, onOpenChange);
|
|
4154
4416
|
const {
|
|
4155
4417
|
step,
|
|
4156
4418
|
processingStep,
|
|
4157
|
-
balance,
|
|
4158
|
-
isBalanceLoading,
|
|
4159
4419
|
isConfigLoading,
|
|
4160
4420
|
isPaying,
|
|
4161
4421
|
payOptions,
|
|
4162
|
-
|
|
4422
|
+
selectedTokenId,
|
|
4163
4423
|
createdPayment,
|
|
4164
4424
|
txHash,
|
|
4165
4425
|
error,
|
|
4166
4426
|
logoUrl,
|
|
4167
4427
|
showDeposit
|
|
4168
4428
|
} = state;
|
|
4169
|
-
if (showDeposit &&
|
|
4429
|
+
if (showDeposit && selectedToken) {
|
|
4170
4430
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
4171
4431
|
DepositModal,
|
|
4172
4432
|
{
|
|
4173
4433
|
open: true,
|
|
4174
4434
|
onOpenChange: handleDepositClose,
|
|
4175
4435
|
asset: {
|
|
4176
|
-
chainId:
|
|
4177
|
-
symbol:
|
|
4436
|
+
chainId: selectedToken.chainId,
|
|
4437
|
+
symbol: selectedToken.symbol
|
|
4178
4438
|
}
|
|
4179
4439
|
}
|
|
4180
4440
|
);
|
|
@@ -4199,21 +4459,21 @@ var PaymentModal = ({
|
|
|
4199
4459
|
title: step === "info" ? "Confirm Payment" : void 0
|
|
4200
4460
|
}
|
|
4201
4461
|
),
|
|
4202
|
-
step === "info" &&
|
|
4462
|
+
step === "info" && /* @__PURE__ */ jsxRuntime.jsx(
|
|
4203
4463
|
PaymentInfoView,
|
|
4204
4464
|
{
|
|
4205
4465
|
amount: payOptions.amount,
|
|
4206
|
-
|
|
4207
|
-
|
|
4466
|
+
tokens: tokensWithBalances,
|
|
4467
|
+
selectedTokenId,
|
|
4468
|
+
onSelectToken: handleSelectToken,
|
|
4208
4469
|
itemName: payOptions.item?.name,
|
|
4209
4470
|
itemDescription: payOptions.item?.description,
|
|
4210
4471
|
itemImage: payOptions.item?.image,
|
|
4211
|
-
balance,
|
|
4212
|
-
isBalanceLoading,
|
|
4213
4472
|
logoUrl,
|
|
4214
4473
|
onPay: handlePay,
|
|
4215
4474
|
onDeposit: handleDeposit,
|
|
4216
|
-
isPaying
|
|
4475
|
+
isPaying,
|
|
4476
|
+
isBalanceLoading
|
|
4217
4477
|
}
|
|
4218
4478
|
),
|
|
4219
4479
|
step === "processing" && /* @__PURE__ */ jsxRuntime.jsx(PaymentProcessingView, { step: processingStep, txHash }),
|
|
@@ -4229,19 +4489,19 @@ var PaymentModal = ({
|
|
|
4229
4489
|
)
|
|
4230
4490
|
] });
|
|
4231
4491
|
};
|
|
4232
|
-
var SignRequestContext =
|
|
4492
|
+
var SignRequestContext = React13.createContext(null);
|
|
4233
4493
|
function SignRequestProvider({ children }) {
|
|
4234
|
-
const [pendingRequest, setPendingRequest] =
|
|
4235
|
-
const resolveRef =
|
|
4236
|
-
const rejectRef =
|
|
4237
|
-
const requestSign =
|
|
4494
|
+
const [pendingRequest, setPendingRequest] = React13.useState(null);
|
|
4495
|
+
const resolveRef = React13.useRef(null);
|
|
4496
|
+
const rejectRef = React13.useRef(null);
|
|
4497
|
+
const requestSign = React13.useCallback((request) => {
|
|
4238
4498
|
return new Promise((resolve, reject2) => {
|
|
4239
4499
|
setPendingRequest(request);
|
|
4240
4500
|
resolveRef.current = resolve;
|
|
4241
4501
|
rejectRef.current = reject2;
|
|
4242
4502
|
});
|
|
4243
4503
|
}, []);
|
|
4244
|
-
const approve =
|
|
4504
|
+
const approve = React13.useCallback(() => {
|
|
4245
4505
|
if (resolveRef.current) {
|
|
4246
4506
|
resolveRef.current();
|
|
4247
4507
|
resolveRef.current = null;
|
|
@@ -4249,7 +4509,7 @@ function SignRequestProvider({ children }) {
|
|
|
4249
4509
|
}
|
|
4250
4510
|
setPendingRequest(null);
|
|
4251
4511
|
}, []);
|
|
4252
|
-
const reject =
|
|
4512
|
+
const reject = React13.useCallback(() => {
|
|
4253
4513
|
if (rejectRef.current) {
|
|
4254
4514
|
rejectRef.current(new Error("Sign request cancelled by user"));
|
|
4255
4515
|
resolveRef.current = null;
|
|
@@ -4271,7 +4531,7 @@ function SignRequestProvider({ children }) {
|
|
|
4271
4531
|
);
|
|
4272
4532
|
}
|
|
4273
4533
|
function useSignRequest() {
|
|
4274
|
-
const context =
|
|
4534
|
+
const context = React13.useContext(SignRequestContext);
|
|
4275
4535
|
if (!context) {
|
|
4276
4536
|
throw new Error("useSignRequest must be used within SignRequestProvider");
|
|
4277
4537
|
}
|
|
@@ -4280,7 +4540,7 @@ function useSignRequest() {
|
|
|
4280
4540
|
};
|
|
4281
4541
|
}
|
|
4282
4542
|
function useSignRequestInternal() {
|
|
4283
|
-
const context =
|
|
4543
|
+
const context = React13.useContext(SignRequestContext);
|
|
4284
4544
|
if (!context) {
|
|
4285
4545
|
throw new Error("useSignRequestInternal must be used within SignRequestProvider");
|
|
4286
4546
|
}
|
|
@@ -4319,7 +4579,7 @@ function CollapsibleSection({
|
|
|
4319
4579
|
children,
|
|
4320
4580
|
defaultExpanded = false
|
|
4321
4581
|
}) {
|
|
4322
|
-
const [isExpanded, setIsExpanded] =
|
|
4582
|
+
const [isExpanded, setIsExpanded] = React13.useState(defaultExpanded);
|
|
4323
4583
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:border volr:rounded-xl volr:overflow-hidden volr-border-strong", children: [
|
|
4324
4584
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
4325
4585
|
"button",
|
|
@@ -4486,16 +4746,16 @@ function SignRequestModal({ open, onOpenChange }) {
|
|
|
4486
4746
|
}
|
|
4487
4747
|
);
|
|
4488
4748
|
}
|
|
4489
|
-
var VolrUIContext =
|
|
4749
|
+
var VolrUIContext = React13__default.default.createContext(null);
|
|
4490
4750
|
var useVolrUI = () => {
|
|
4491
|
-
const context =
|
|
4751
|
+
const context = React13.useContext(VolrUIContext);
|
|
4492
4752
|
if (!context) {
|
|
4493
4753
|
throw new Error("useVolrUI must be used within VolrUIProvider");
|
|
4494
4754
|
}
|
|
4495
4755
|
return context;
|
|
4496
4756
|
};
|
|
4497
4757
|
var useVolrUIOptional = () => {
|
|
4498
|
-
return
|
|
4758
|
+
return React13.useContext(VolrUIContext);
|
|
4499
4759
|
};
|
|
4500
4760
|
function OnboardingFlow({
|
|
4501
4761
|
keyStorageType,
|
|
@@ -4551,10 +4811,10 @@ var VolrUIProvider = ({
|
|
|
4551
4811
|
const providerPolicy = config.providerPolicy ?? {
|
|
4552
4812
|
enforceOnFirstLogin: true
|
|
4553
4813
|
};
|
|
4554
|
-
const [keyStorageTypeError, setKeyStorageTypeError] =
|
|
4814
|
+
const [keyStorageTypeError, setKeyStorageTypeError] = React13.useState(
|
|
4555
4815
|
null
|
|
4556
4816
|
);
|
|
4557
|
-
|
|
4817
|
+
React13.useEffect(() => {
|
|
4558
4818
|
if (providerPolicy.enforceOnFirstLogin !== false && !keyStorageType) {
|
|
4559
4819
|
const errorMessage = "keyStorageType must be specified in VolrUIProvider props. Please set keyStorageType prop in VolrUIProvider.";
|
|
4560
4820
|
console.error(errorMessage);
|
|
@@ -4598,7 +4858,7 @@ function VolrUIProviderInner({
|
|
|
4598
4858
|
providerPolicy,
|
|
4599
4859
|
children
|
|
4600
4860
|
}) {
|
|
4601
|
-
const [showOnboarding, setShowOnboarding] =
|
|
4861
|
+
const [showOnboarding, setShowOnboarding] = React13.useState(false);
|
|
4602
4862
|
const { requestSign } = useSignRequest();
|
|
4603
4863
|
const configWithSignRequest = {
|
|
4604
4864
|
...config,
|
|
@@ -4661,9 +4921,9 @@ function VolrUIProviderInner({
|
|
|
4661
4921
|
}
|
|
4662
4922
|
function AccountModalPortal() {
|
|
4663
4923
|
const { isOpen, mode, close } = useVolrModal();
|
|
4664
|
-
const [portalRoot, setPortalRoot] =
|
|
4665
|
-
const [error, setError] =
|
|
4666
|
-
|
|
4924
|
+
const [portalRoot, setPortalRoot] = React13.useState(null);
|
|
4925
|
+
const [error, setError] = React13.useState(null);
|
|
4926
|
+
React13.useEffect(() => {
|
|
4667
4927
|
if (typeof window === "undefined") return;
|
|
4668
4928
|
let root = document.getElementById("volr-modal-root");
|
|
4669
4929
|
if (!root) {
|
|
@@ -4722,9 +4982,9 @@ function AccountModalPortal() {
|
|
|
4722
4982
|
function DepositModalPortal() {
|
|
4723
4983
|
const { isOpen, mode, asset, close } = useVolrModal();
|
|
4724
4984
|
const { user } = react.useVolrContext();
|
|
4725
|
-
const [portalRoot, setPortalRoot] =
|
|
4726
|
-
const [showLogin, setShowLogin] =
|
|
4727
|
-
|
|
4985
|
+
const [portalRoot, setPortalRoot] = React13.useState(null);
|
|
4986
|
+
const [showLogin, setShowLogin] = React13.useState(false);
|
|
4987
|
+
React13.useEffect(() => {
|
|
4728
4988
|
if (typeof window === "undefined") return;
|
|
4729
4989
|
let root = document.getElementById("volr-modal-root");
|
|
4730
4990
|
if (!root) {
|
|
@@ -4739,7 +4999,7 @@ function DepositModalPortal() {
|
|
|
4739
4999
|
}
|
|
4740
5000
|
};
|
|
4741
5001
|
}, []);
|
|
4742
|
-
|
|
5002
|
+
React13.useEffect(() => {
|
|
4743
5003
|
if (isOpen && mode === "deposit" && !user) {
|
|
4744
5004
|
setShowLogin(true);
|
|
4745
5005
|
} else {
|
|
@@ -4773,8 +5033,8 @@ function DepositModalPortal() {
|
|
|
4773
5033
|
}
|
|
4774
5034
|
function PaymentModalPortal() {
|
|
4775
5035
|
const { isOpen, mode, close } = useVolrModal();
|
|
4776
|
-
const [portalRoot, setPortalRoot] =
|
|
4777
|
-
|
|
5036
|
+
const [portalRoot, setPortalRoot] = React13.useState(null);
|
|
5037
|
+
React13.useEffect(() => {
|
|
4778
5038
|
if (typeof window === "undefined") return;
|
|
4779
5039
|
let root = document.getElementById("volr-modal-root");
|
|
4780
5040
|
if (!root) {
|
|
@@ -4803,8 +5063,8 @@ function PaymentModalPortal() {
|
|
|
4803
5063
|
}
|
|
4804
5064
|
function SignRequestModalPortal() {
|
|
4805
5065
|
const { pendingRequest } = useSignRequestInternal();
|
|
4806
|
-
const [portalRoot, setPortalRoot] =
|
|
4807
|
-
|
|
5066
|
+
const [portalRoot, setPortalRoot] = React13.useState(null);
|
|
5067
|
+
React13.useEffect(() => {
|
|
4808
5068
|
if (typeof window === "undefined") return;
|
|
4809
5069
|
let root = document.getElementById("volr-modal-root");
|
|
4810
5070
|
if (!root) {
|
|
@@ -4835,8 +5095,8 @@ function SignRequestModalPortal() {
|
|
|
4835
5095
|
function OAuthCallbackHandler({
|
|
4836
5096
|
onShowOnboarding
|
|
4837
5097
|
}) {
|
|
4838
|
-
const [hasCode, setHasCode] =
|
|
4839
|
-
|
|
5098
|
+
const [hasCode, setHasCode] = React13.useState(false);
|
|
5099
|
+
React13.useEffect(() => {
|
|
4840
5100
|
if (typeof window === "undefined") return;
|
|
4841
5101
|
const params = new URLSearchParams(window.location.search);
|
|
4842
5102
|
const code = params.get("code");
|
|
@@ -4879,13 +5139,13 @@ function OnboardingChecker({
|
|
|
4879
5139
|
}) {
|
|
4880
5140
|
const { user, provider, isLoading } = react.useVolrContext();
|
|
4881
5141
|
const { isOpen: isModalOpen } = useVolrModal();
|
|
4882
|
-
const modalWasOpened =
|
|
4883
|
-
|
|
5142
|
+
const modalWasOpened = React13__default.default.useRef(false);
|
|
5143
|
+
React13.useEffect(() => {
|
|
4884
5144
|
if (isModalOpen) {
|
|
4885
5145
|
modalWasOpened.current = true;
|
|
4886
5146
|
}
|
|
4887
5147
|
}, [isModalOpen]);
|
|
4888
|
-
|
|
5148
|
+
React13.useEffect(() => {
|
|
4889
5149
|
if (isLoading) {
|
|
4890
5150
|
return;
|
|
4891
5151
|
}
|
|
@@ -4928,7 +5188,7 @@ function OnboardingChecker({
|
|
|
4928
5188
|
}
|
|
4929
5189
|
function useSwitchNetwork() {
|
|
4930
5190
|
const { client } = react.useInternalAuth();
|
|
4931
|
-
return
|
|
5191
|
+
return React13.useCallback(
|
|
4932
5192
|
async (chainId) => {
|
|
4933
5193
|
if (typeof window === "undefined" || !window.ethereum) {
|
|
4934
5194
|
throw new Error("No wallet found");
|
|
@@ -4992,8 +5252,8 @@ var paymentPromiseResolver = null;
|
|
|
4992
5252
|
function useVolrPay() {
|
|
4993
5253
|
const { open: openModal, close: closeModal } = useVolrModal();
|
|
4994
5254
|
const { checkPayment, getPaymentHistory } = react.useVolrPaymentApi();
|
|
4995
|
-
const isInProgressRef =
|
|
4996
|
-
const pay =
|
|
5255
|
+
const isInProgressRef = React13.useRef(false);
|
|
5256
|
+
const pay = React13.useCallback(
|
|
4997
5257
|
(options) => {
|
|
4998
5258
|
isInProgressRef.current = true;
|
|
4999
5259
|
const waitPromise = new Promise((resolve, reject) => {
|