@volr/react-ui 0.2.5 → 0.2.7
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 +277 -251
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +35 -9
- 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 React15 = 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 React15__default = /*#__PURE__*/_interopDefault(React15);
|
|
14
14
|
|
|
15
15
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
16
16
|
var __esm = (fn, res) => function __init() {
|
|
@@ -1082,13 +1082,13 @@ var translations = {
|
|
|
1082
1082
|
function getTranslations(locale = "en") {
|
|
1083
1083
|
return translations[locale] || translations.en;
|
|
1084
1084
|
}
|
|
1085
|
-
var I18nContext =
|
|
1085
|
+
var I18nContext = React15.createContext(null);
|
|
1086
1086
|
function interpolate(text, params) {
|
|
1087
1087
|
if (!params) return text;
|
|
1088
1088
|
return text.replace(/\{\{(\w+)\}\}/g, (_, key) => params[key] ?? `{{${key}}}`);
|
|
1089
1089
|
}
|
|
1090
1090
|
function useI18n() {
|
|
1091
|
-
const context =
|
|
1091
|
+
const context = React15.useContext(I18nContext);
|
|
1092
1092
|
if (!context) {
|
|
1093
1093
|
return {
|
|
1094
1094
|
locale: "en",
|
|
@@ -1132,25 +1132,25 @@ function detectLocale(allowedLocales) {
|
|
|
1132
1132
|
return resolveLocale(detected, allowedLocales);
|
|
1133
1133
|
}
|
|
1134
1134
|
function I18nProvider({ children, allowedLocales }) {
|
|
1135
|
-
const [locale, setLocaleState] =
|
|
1136
|
-
const resolveAllowedLocale =
|
|
1135
|
+
const [locale, setLocaleState] = React15.useState(() => detectLocale(allowedLocales));
|
|
1136
|
+
const resolveAllowedLocale = React15.useCallback(
|
|
1137
1137
|
(next) => resolveLocale(next, allowedLocales),
|
|
1138
1138
|
[allowedLocales]
|
|
1139
1139
|
);
|
|
1140
|
-
const setLocale =
|
|
1140
|
+
const setLocale = React15.useCallback(
|
|
1141
1141
|
(next) => {
|
|
1142
1142
|
setLocaleState(resolveAllowedLocale(next));
|
|
1143
1143
|
},
|
|
1144
1144
|
[resolveAllowedLocale]
|
|
1145
1145
|
);
|
|
1146
|
-
|
|
1146
|
+
React15.useEffect(() => {
|
|
1147
1147
|
setLocaleState((current) => {
|
|
1148
1148
|
const resolved = resolveAllowedLocale(current);
|
|
1149
1149
|
return current === resolved ? current : resolved;
|
|
1150
1150
|
});
|
|
1151
1151
|
}, [resolveAllowedLocale]);
|
|
1152
|
-
const translations2 =
|
|
1153
|
-
const t =
|
|
1152
|
+
const translations2 = React15.useMemo(() => getTranslations(locale), [locale]);
|
|
1153
|
+
const t = React15.useMemo(() => {
|
|
1154
1154
|
return (key, params) => {
|
|
1155
1155
|
const keys = key.split(".");
|
|
1156
1156
|
let value2 = translations2;
|
|
@@ -1167,7 +1167,7 @@ function I18nProvider({ children, allowedLocales }) {
|
|
|
1167
1167
|
return typeof value2 === "string" ? interpolate(value2, params) : key;
|
|
1168
1168
|
};
|
|
1169
1169
|
}, [translations2]);
|
|
1170
|
-
const value =
|
|
1170
|
+
const value = React15.useMemo(
|
|
1171
1171
|
() => ({
|
|
1172
1172
|
locale,
|
|
1173
1173
|
translations: translations2,
|
|
@@ -1179,9 +1179,9 @@ function I18nProvider({ children, allowedLocales }) {
|
|
|
1179
1179
|
return /* @__PURE__ */ jsxRuntime.jsx(I18nContext.Provider, { value, children });
|
|
1180
1180
|
}
|
|
1181
1181
|
var useTranslation = useI18n;
|
|
1182
|
-
var VolrModalContext =
|
|
1182
|
+
var VolrModalContext = React15.createContext(null);
|
|
1183
1183
|
var useVolrModal = () => {
|
|
1184
|
-
const context =
|
|
1184
|
+
const context = React15.useContext(VolrModalContext);
|
|
1185
1185
|
if (!context) {
|
|
1186
1186
|
throw new Error("useVolrModal must be used within VolrUIProvider");
|
|
1187
1187
|
}
|
|
@@ -1190,17 +1190,17 @@ var useVolrModal = () => {
|
|
|
1190
1190
|
var VolrModalProvider = ({
|
|
1191
1191
|
children
|
|
1192
1192
|
}) => {
|
|
1193
|
-
const [isOpen, setIsOpen] =
|
|
1194
|
-
const [mode, setMode] =
|
|
1195
|
-
const [asset, setAsset] =
|
|
1196
|
-
const [paymentOptions, setPaymentOptions] =
|
|
1197
|
-
const open =
|
|
1193
|
+
const [isOpen, setIsOpen] = React15.useState(false);
|
|
1194
|
+
const [mode, setMode] = React15.useState("account");
|
|
1195
|
+
const [asset, setAsset] = React15.useState(null);
|
|
1196
|
+
const [paymentOptions, setPaymentOptions] = React15.useState(null);
|
|
1197
|
+
const open = React15.useCallback((options) => {
|
|
1198
1198
|
setMode(options?.mode ?? "account");
|
|
1199
1199
|
setAsset(options?.asset ?? null);
|
|
1200
1200
|
setPaymentOptions(options?.payment ?? null);
|
|
1201
1201
|
setIsOpen(true);
|
|
1202
1202
|
}, []);
|
|
1203
|
-
const close =
|
|
1203
|
+
const close = React15.useCallback(() => {
|
|
1204
1204
|
setIsOpen(false);
|
|
1205
1205
|
setAsset(null);
|
|
1206
1206
|
setPaymentOptions(null);
|
|
@@ -1214,11 +1214,11 @@ function cn(...inputs) {
|
|
|
1214
1214
|
return twMerge(clsx.clsx(inputs));
|
|
1215
1215
|
}
|
|
1216
1216
|
function useMediaQuery(query) {
|
|
1217
|
-
const [matches, setMatches] =
|
|
1217
|
+
const [matches, setMatches] = React15.useState(() => {
|
|
1218
1218
|
if (typeof window === "undefined") return false;
|
|
1219
1219
|
return window.matchMedia(query).matches;
|
|
1220
1220
|
});
|
|
1221
|
-
|
|
1221
|
+
React15.useEffect(() => {
|
|
1222
1222
|
if (typeof window === "undefined") return;
|
|
1223
1223
|
const mql = window.matchMedia(query);
|
|
1224
1224
|
const handler = (event) => setMatches(event.matches);
|
|
@@ -1232,12 +1232,12 @@ function useMediaQuery(query) {
|
|
|
1232
1232
|
// src/generated/volr-sdk-css.ts
|
|
1233
1233
|
var VOLR_SDK_CSS = '/*! tailwindcss v4.1.18 | 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-tracking: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-100:oklch(93.6% .032 17.717);--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-amber-50:oklch(98.7% .022 95.277);--volr-color-amber-200:oklch(92.4% .12 95.746);--volr-color-amber-700:oklch(55.5% .163 48.998);--volr-color-yellow-100:oklch(97.3% .071 103.193);--volr-color-yellow-700:oklch(55.4% .135 66.442);--volr-color-green-50:oklch(98.2% .018 155.826);--volr-color-green-100:oklch(96.2% .044 156.743);--volr-color-green-600:oklch(62.7% .194 149.214);--volr-color-green-700:oklch(52.7% .154 150.069);--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-100:oklch(93.2% .032 255.585);--volr-color-blue-700:oklch(48.8% .243 264.376);--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-700:oklch(37.2% .044 257.287);--volr-color-slate-800:oklch(27.9% .041 260.031);--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-tracking-tight:-.025em;--volr-tracking-wide:.025em;--volr-tracking-wider:.05em;--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-ping:ping 1s cubic-bezier(0,0,.2,1)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;--volr-hint-bg:#f8fafc;--volr-hint-border:#e2e8f0;--volr-hint-text:#334155}: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;--volr-hint-bg:#2c2c2e;--volr-hint-border:#3a3a3c;--volr-hint-text:#c7c7cc}*,: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-0{right:calc(var(--volr-spacing)*0)}.volr\\:right-2{right:calc(var(--volr-spacing)*2)}.volr\\:right-3{right:calc(var(--volr-spacing)*3)}.volr\\:bottom-0{bottom:calc(var(--volr-spacing)*0)}.volr\\:left-0{left:calc(var(--volr-spacing)*0)}.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\\:ml-6{margin-left:calc(var(--volr-spacing)*6)}.volr\\:line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.volr\\:block{display:block}.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-3\\.5{height:calc(var(--volr-spacing)*3.5)}.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-48{max-height:calc(var(--volr-spacing)*48)}.volr\\:max-h-60{max-height:calc(var(--volr-spacing)*60)}.volr\\:max-h-64{max-height:calc(var(--volr-spacing)*64)}.volr\\:max-h-\\[85vh\\]{max-height:85vh}.volr\\:max-h-\\[90vh\\]{max-height:90vh}.volr\\:min-h-\\[100px\\]{min-height:100px}.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-3{width:calc(var(--volr-spacing)*3)}.volr\\:w-3\\.5{width:calc(var(--volr-spacing)*3.5)}.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-90{rotate:90deg}.volr\\:rotate-180{rotate:180deg}.volr\\:animate-ping{animation:var(--volr-animate-ping)}.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\\: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-5>:not(:last-child)){--volr-tw-space-y-reverse:0;margin-block-start:calc(calc(var(--volr-spacing)*5)*var(--volr-tw-space-y-reverse));margin-block-end:calc(calc(var(--volr-spacing)*5)*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)))}.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-x-auto{overflow-x:auto}.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-y{border-block-style:var(--volr-tw-border-style);border-block-width:1px}.volr\\:border-t{border-top-style:var(--volr-tw-border-style);border-top-width:1px}.volr\\:border-b{border-bottom-style:var(--volr-tw-border-style);border-bottom-width:1px}.volr\\:border-amber-200{border-color:var(--volr-color-amber-200)}.volr\\:border-red-200{border-color:var(--volr-color-red-200)}.volr\\:border-red-500{border-color:var(--volr-color-red-500)}.volr\\:border-slate-100{border-color:var(--volr-color-slate-100)}.volr\\:border-slate-200{border-color:var(--volr-color-slate-200)}.volr\\:border-slate-300{border-color:var(--volr-color-slate-300)}.volr\\:border-transparent{border-color:#0000}.volr\\:border-white{border-color:var(--volr-color-white)}.volr\\:border-t-slate-600{border-top-color:var(--volr-color-slate-600)}.volr\\:border-t-slate-900{border-top-color:var(--volr-color-slate-900)}.volr\\:bg-amber-50{background-color:var(--volr-color-amber-50)}.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-blue-100{background-color:var(--volr-color-blue-100)}.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-emerald-500{background-color:var(--volr-color-emerald-500)}.volr\\:bg-green-50{background-color:var(--volr-color-green-50)}.volr\\:bg-green-100{background-color:var(--volr-color-green-100)}.volr\\:bg-red-50{background-color:var(--volr-color-red-50)}.volr\\:bg-red-100{background-color:var(--volr-color-red-100)}.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-yellow-100{background-color:var(--volr-color-yellow-100)}.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\\:bg-linear-to-r{--volr-tw-gradient-position:to right}@supports (background-image:linear-gradient(in lab, red, red)){.volr\\:bg-linear-to-r{--volr-tw-gradient-position:to right in oklab}}.volr\\:bg-linear-to-r{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\\: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\\:px-5{padding-inline:calc(var(--volr-spacing)*5)}.volr\\:px-6{padding-inline:calc(var(--volr-spacing)*6)}.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-7{padding-block:calc(var(--volr-spacing)*7)}.volr\\:py-8{padding-block:calc(var(--volr-spacing)*8)}.volr\\:py-12{padding-block:calc(var(--volr-spacing)*12)}.volr\\:pt-1{padding-top:calc(var(--volr-spacing)*1)}.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\\:pr-16{padding-right:calc(var(--volr-spacing)*16)}.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\\:tracking-tight{--volr-tw-tracking:var(--volr-tracking-tight);letter-spacing:var(--volr-tracking-tight)}.volr\\:tracking-wide{--volr-tw-tracking:var(--volr-tracking-wide);letter-spacing:var(--volr-tracking-wide)}.volr\\:tracking-wider{--volr-tw-tracking:var(--volr-tracking-wider);letter-spacing:var(--volr-tracking-wider)}.volr\\:break-all{word-break:break-all}.volr\\:text-amber-700{color:var(--volr-color-amber-700)}.volr\\:text-blue-700{color:var(--volr-color-blue-700)}.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-green-700{color:var(--volr-color-green-700)}.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-300{color:var(--volr-color-slate-300)}.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-700{color:var(--volr-color-slate-700)}.volr\\:text-slate-800{color:var(--volr-color-slate-800)}.volr\\:text-slate-900{color:var(--volr-color-slate-900)}.volr\\:text-white{color:var(--volr-color-white)}.volr\\:text-yellow-700{color:var(--volr-color-yellow-700)}.volr\\:capitalize{text-transform:capitalize}.volr\\:uppercase{text-transform:uppercase}.volr\\:underline{text-decoration-line:underline}.volr\\:underline-offset-4{text-underline-offset:4px}.volr\\:opacity-0{opacity:0}.volr\\:opacity-25{opacity:.25}.volr\\:opacity-30{opacity:.3}.volr\\:opacity-50{opacity:.5}.volr\\:opacity-70{opacity:.7}.volr\\:opacity-75{opacity:.75}.volr\\:opacity-80{opacity:.8}.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-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-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-200{--volr-tw-duration:.2s;transition-duration:.2s}.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\\:hover\\:bg-slate-200:hover{background-color:var(--volr-color-slate-200)}.volr\\:hover\\:text-slate-700:hover{color:var(--volr-color-slate-700)}}.volr\\:focus\\:ring-2:focus{--volr-tw-ring-shadow:var(--volr-tw-ring-inset,)0 0 0 calc(2px + var(--volr-tw-ring-offset-width))var(--volr-tw-ring-color,currentcolor);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\\:focus\\:ring-slate-300:focus{--volr-tw-ring-color:var(--volr-color-slate-300)}.volr\\:focus\\:outline-none:focus{--volr-tw-outline-style:none;outline-style:none}.volr\\:disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.volr\\:disabled\\:bg-slate-100:disabled{background-color:var(--volr-color-slate-100)}.volr\\:disabled\\:text-slate-400:disabled{color:var(--volr-color-slate-400)}.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-hint{background-color:var(--volr-hint-bg);border:1px solid var(--volr-hint-border);color:var(--volr-hint-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-tracking{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 ping{75%,to{opacity:0;transform:scale(2)}}@keyframes pulse{50%{opacity:.5}}';
|
|
1234
1234
|
function useResolvedTheme(theme = "light") {
|
|
1235
|
-
const [resolvedTheme, setResolvedTheme] =
|
|
1235
|
+
const [resolvedTheme, setResolvedTheme] = React15.useState(() => {
|
|
1236
1236
|
if (theme !== "system") return theme;
|
|
1237
1237
|
if (typeof window === "undefined") return "light";
|
|
1238
1238
|
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
|
|
1239
1239
|
});
|
|
1240
|
-
|
|
1240
|
+
React15.useEffect(() => {
|
|
1241
1241
|
if (theme !== "system") {
|
|
1242
1242
|
setResolvedTheme(theme);
|
|
1243
1243
|
return;
|
|
@@ -1253,10 +1253,10 @@ function useResolvedTheme(theme = "light") {
|
|
|
1253
1253
|
return resolvedTheme;
|
|
1254
1254
|
}
|
|
1255
1255
|
function ShadowPortal({ children, theme = "light" }) {
|
|
1256
|
-
const [mountNode, setMountNode] =
|
|
1257
|
-
const hostRef =
|
|
1256
|
+
const [mountNode, setMountNode] = React15.useState(null);
|
|
1257
|
+
const hostRef = React15.useRef(null);
|
|
1258
1258
|
const resolvedTheme = useResolvedTheme(theme);
|
|
1259
|
-
|
|
1259
|
+
React15.useEffect(() => {
|
|
1260
1260
|
const host = document.createElement("div");
|
|
1261
1261
|
host.id = "volr-shadow-portal";
|
|
1262
1262
|
host.style.position = "fixed";
|
|
@@ -1280,7 +1280,7 @@ function ShadowPortal({ children, theme = "light" }) {
|
|
|
1280
1280
|
hostRef.current = null;
|
|
1281
1281
|
};
|
|
1282
1282
|
}, []);
|
|
1283
|
-
|
|
1283
|
+
React15.useEffect(() => {
|
|
1284
1284
|
if (hostRef.current) {
|
|
1285
1285
|
hostRef.current.setAttribute("data-theme", resolvedTheme);
|
|
1286
1286
|
}
|
|
@@ -1289,7 +1289,7 @@ function ShadowPortal({ children, theme = "light" }) {
|
|
|
1289
1289
|
return reactDom.createPortal(children, mountNode);
|
|
1290
1290
|
}
|
|
1291
1291
|
function useFocusTrap(isActive, containerRef) {
|
|
1292
|
-
const previousActiveElement =
|
|
1292
|
+
const previousActiveElement = React15.useRef(null);
|
|
1293
1293
|
const focusableSelector = [
|
|
1294
1294
|
"button:not([disabled])",
|
|
1295
1295
|
"input:not([disabled])",
|
|
@@ -1298,7 +1298,7 @@ function useFocusTrap(isActive, containerRef) {
|
|
|
1298
1298
|
"a[href]",
|
|
1299
1299
|
'[tabindex]:not([tabindex="-1"])'
|
|
1300
1300
|
].join(", ");
|
|
1301
|
-
const getFocusableElements =
|
|
1301
|
+
const getFocusableElements = React15.useCallback(() => {
|
|
1302
1302
|
if (!containerRef.current) return [];
|
|
1303
1303
|
return Array.from(
|
|
1304
1304
|
containerRef.current.querySelectorAll(focusableSelector)
|
|
@@ -1306,7 +1306,7 @@ function useFocusTrap(isActive, containerRef) {
|
|
|
1306
1306
|
return el.offsetParent !== null;
|
|
1307
1307
|
});
|
|
1308
1308
|
}, [containerRef, focusableSelector]);
|
|
1309
|
-
const handleKeyDown =
|
|
1309
|
+
const handleKeyDown = React15.useCallback(
|
|
1310
1310
|
(event) => {
|
|
1311
1311
|
if (event.key !== "Tab") return;
|
|
1312
1312
|
const focusableElements = getFocusableElements();
|
|
@@ -1327,7 +1327,7 @@ function useFocusTrap(isActive, containerRef) {
|
|
|
1327
1327
|
},
|
|
1328
1328
|
[getFocusableElements]
|
|
1329
1329
|
);
|
|
1330
|
-
|
|
1330
|
+
React15.useEffect(() => {
|
|
1331
1331
|
if (!isActive) return;
|
|
1332
1332
|
previousActiveElement.current = document.activeElement;
|
|
1333
1333
|
const focusableElements = getFocusableElements();
|
|
@@ -1358,12 +1358,12 @@ var Modal = ({
|
|
|
1358
1358
|
}) => {
|
|
1359
1359
|
const isMobile2 = useMediaQuery("(max-width: 500px)");
|
|
1360
1360
|
const variant = explicitVariant ?? (isMobile2 ? "bottom-sheet" : "centered");
|
|
1361
|
-
const dialogRef =
|
|
1362
|
-
const dialogId =
|
|
1361
|
+
const dialogRef = React15.useRef(null);
|
|
1362
|
+
const dialogId = React15.useId();
|
|
1363
1363
|
const uiContext = useVolrUIOptional();
|
|
1364
1364
|
const theme = uiContext?.theme ?? "light";
|
|
1365
1365
|
useFocusTrap(open, dialogRef);
|
|
1366
|
-
|
|
1366
|
+
React15.useEffect(() => {
|
|
1367
1367
|
const handleEscape = (e) => {
|
|
1368
1368
|
if (e.key === "Escape" && open) {
|
|
1369
1369
|
if (onEscapeKeyDown) {
|
|
@@ -1946,7 +1946,7 @@ var variantMap = {
|
|
|
1946
1946
|
ghost: { backgroundColor: "transparent", color: "var(--volr-text-secondary)", border: "none" },
|
|
1947
1947
|
outline: { backgroundColor: "transparent", color: "var(--volr-text-secondary)", border: "1px solid var(--volr-border)" }
|
|
1948
1948
|
};
|
|
1949
|
-
var Button =
|
|
1949
|
+
var Button = React15__default.default.forwardRef(
|
|
1950
1950
|
({ variant = "primary", size = "md", fullWidth, className, style, disabled, children, ...props }, ref) => {
|
|
1951
1951
|
const { accentColor } = useVolrUI();
|
|
1952
1952
|
const sizeStyle = sizeMap[size];
|
|
@@ -2147,11 +2147,11 @@ function PasskeyMigrationView({
|
|
|
2147
2147
|
wrapInModal = true
|
|
2148
2148
|
}) {
|
|
2149
2149
|
const { t } = useI18n();
|
|
2150
|
-
const [isMigrating, setIsMigrating] =
|
|
2151
|
-
const [isComplete, setIsComplete] =
|
|
2152
|
-
const [error, setError] =
|
|
2150
|
+
const [isMigrating, setIsMigrating] = React15.useState(false);
|
|
2151
|
+
const [isComplete, setIsComplete] = React15.useState(false);
|
|
2152
|
+
const [error, setError] = React15.useState(null);
|
|
2153
2153
|
const biometricType = getBiometricType();
|
|
2154
|
-
|
|
2154
|
+
React15.useEffect(() => {
|
|
2155
2155
|
if (typeof window === "undefined") return;
|
|
2156
2156
|
const handler = (event) => {
|
|
2157
2157
|
if (event.data?.type === "VOLR_MIGRATION_DONE") {
|
|
@@ -2162,7 +2162,7 @@ function PasskeyMigrationView({
|
|
|
2162
2162
|
window.addEventListener("message", handler);
|
|
2163
2163
|
return () => window.removeEventListener("message", handler);
|
|
2164
2164
|
}, []);
|
|
2165
|
-
|
|
2165
|
+
React15.useEffect(() => {
|
|
2166
2166
|
if (isComplete) {
|
|
2167
2167
|
const timer = setTimeout(() => {
|
|
2168
2168
|
if (onComplete) {
|
|
@@ -2186,7 +2186,7 @@ function PasskeyMigrationView({
|
|
|
2186
2186
|
}
|
|
2187
2187
|
}
|
|
2188
2188
|
};
|
|
2189
|
-
const handleDone =
|
|
2189
|
+
const handleDone = React15.useCallback(() => {
|
|
2190
2190
|
if (onComplete) {
|
|
2191
2191
|
onComplete();
|
|
2192
2192
|
}
|
|
@@ -2283,22 +2283,22 @@ function PasskeyEnrollView({
|
|
|
2283
2283
|
isEnrolling,
|
|
2284
2284
|
error: enrollmentError
|
|
2285
2285
|
} = react.usePasskeyEnrollment();
|
|
2286
|
-
const [hasStarted, setHasStarted] =
|
|
2287
|
-
const [errorMessage, setErrorMessage] =
|
|
2288
|
-
const [isRefreshing, setIsRefreshing] =
|
|
2286
|
+
const [hasStarted, setHasStarted] = React15.useState(false);
|
|
2287
|
+
const [errorMessage, setErrorMessage] = React15.useState(null);
|
|
2288
|
+
const [isRefreshing, setIsRefreshing] = React15.useState(false);
|
|
2289
2289
|
const biometricType = getBiometricType();
|
|
2290
|
-
const compatibility =
|
|
2291
|
-
const [hasPrfError, setHasPrfError] =
|
|
2292
|
-
const platformHint =
|
|
2290
|
+
const compatibility = React15.useMemo(() => react.checkPrfCompatibility(), []);
|
|
2291
|
+
const [hasPrfError, setHasPrfError] = React15.useState(false);
|
|
2292
|
+
const platformHint = React15.useMemo(
|
|
2293
2293
|
() => hasPrfError ? react.getPlatformHint(compatibility.platform) : { hintKey: "", noteKey: "" },
|
|
2294
2294
|
[compatibility.platform, hasPrfError]
|
|
2295
2295
|
);
|
|
2296
2296
|
const hasPasskey = user?.keyStorageType === "passkey";
|
|
2297
|
-
const currentDomain =
|
|
2297
|
+
const currentDomain = React15.useMemo(() => {
|
|
2298
2298
|
if (typeof window === "undefined") return "localhost";
|
|
2299
2299
|
return window.location.hostname;
|
|
2300
2300
|
}, []);
|
|
2301
|
-
const migrationInfo =
|
|
2301
|
+
const migrationInfo = React15.useMemo(() => {
|
|
2302
2302
|
if (!user?.registeredPasskeys || user.registeredPasskeys.length === 0) {
|
|
2303
2303
|
return { needsMigration: false, sourcePasskey: null };
|
|
2304
2304
|
}
|
|
@@ -2311,7 +2311,7 @@ function PasskeyEnrollView({
|
|
|
2311
2311
|
const sourcePasskey = user.registeredPasskeys[0];
|
|
2312
2312
|
return { needsMigration: true, sourcePasskey };
|
|
2313
2313
|
}, [user?.registeredPasskeys, currentDomain]);
|
|
2314
|
-
|
|
2314
|
+
React15.useEffect(() => {
|
|
2315
2315
|
console.log("[PasskeyEnrollView] User state:", {
|
|
2316
2316
|
user,
|
|
2317
2317
|
keyStorageType: user?.keyStorageType,
|
|
@@ -2322,7 +2322,7 @@ function PasskeyEnrollView({
|
|
|
2322
2322
|
migrationInfo
|
|
2323
2323
|
});
|
|
2324
2324
|
}, [user, hasPasskey, currentDomain, migrationInfo]);
|
|
2325
|
-
|
|
2325
|
+
React15.useEffect(() => {
|
|
2326
2326
|
if (hasPasskey && !user?.evmAddress && !isRefreshing) {
|
|
2327
2327
|
const refreshUserData = async () => {
|
|
2328
2328
|
try {
|
|
@@ -2353,7 +2353,7 @@ function PasskeyEnrollView({
|
|
|
2353
2353
|
refreshUserData();
|
|
2354
2354
|
}
|
|
2355
2355
|
}, [hasPasskey, user?.evmAddress, isRefreshing, client, setUser, user]);
|
|
2356
|
-
|
|
2356
|
+
React15.useEffect(() => {
|
|
2357
2357
|
if (!user?.id) {
|
|
2358
2358
|
const error = new Error("User ID is required for passkey enrollment");
|
|
2359
2359
|
setErrorMessage(getUserFriendlyError(error, t));
|
|
@@ -2362,7 +2362,7 @@ function PasskeyEnrollView({
|
|
|
2362
2362
|
}
|
|
2363
2363
|
}
|
|
2364
2364
|
}, [user, onError, t]);
|
|
2365
|
-
|
|
2365
|
+
React15.useEffect(() => {
|
|
2366
2366
|
if (enrollmentError) {
|
|
2367
2367
|
const friendlyMessage = getUserFriendlyError(enrollmentError, t);
|
|
2368
2368
|
setErrorMessage(friendlyMessage);
|
|
@@ -2641,7 +2641,7 @@ function MigrationTargetView({
|
|
|
2641
2641
|
const biometricType = getBiometricType();
|
|
2642
2642
|
const isProcessing = step !== "ready" && step !== "error" && step !== "success";
|
|
2643
2643
|
const progress = STEP_PROGRESS2[step];
|
|
2644
|
-
|
|
2644
|
+
React15.useEffect(() => {
|
|
2645
2645
|
if (step === "success" && onAutoClose) {
|
|
2646
2646
|
const timer = setTimeout(() => {
|
|
2647
2647
|
onAutoClose();
|
|
@@ -2721,8 +2721,8 @@ function MpcConnectView({
|
|
|
2721
2721
|
isConnecting,
|
|
2722
2722
|
error: connectionError
|
|
2723
2723
|
} = react.useMpcConnection();
|
|
2724
|
-
const [errorMessage, setErrorMessage] =
|
|
2725
|
-
|
|
2724
|
+
const [errorMessage, setErrorMessage] = React15.useState(null);
|
|
2725
|
+
React15.useEffect(() => {
|
|
2726
2726
|
if (connectionError) {
|
|
2727
2727
|
setErrorMessage(connectionError.message);
|
|
2728
2728
|
if (onError) {
|
|
@@ -2730,7 +2730,7 @@ function MpcConnectView({
|
|
|
2730
2730
|
}
|
|
2731
2731
|
}
|
|
2732
2732
|
}, [connectionError, onError]);
|
|
2733
|
-
|
|
2733
|
+
React15.useEffect(() => {
|
|
2734
2734
|
handleConnect();
|
|
2735
2735
|
}, []);
|
|
2736
2736
|
const handleConnect = async () => {
|
|
@@ -2961,9 +2961,9 @@ function PoweredBy() {
|
|
|
2961
2961
|
}
|
|
2962
2962
|
function EmailInlineInput({ onSubmit, accentColor }) {
|
|
2963
2963
|
const { t } = useI18n();
|
|
2964
|
-
const [email, setEmail] =
|
|
2965
|
-
const [error, setError] =
|
|
2966
|
-
const [isLoading, setIsLoading] =
|
|
2964
|
+
const [email, setEmail] = React15.useState("");
|
|
2965
|
+
const [error, setError] = React15.useState(null);
|
|
2966
|
+
const [isLoading, setIsLoading] = React15.useState(false);
|
|
2967
2967
|
const handleSubmit = async (e) => {
|
|
2968
2968
|
e.preventDefault();
|
|
2969
2969
|
setError(null);
|
|
@@ -3087,14 +3087,14 @@ function SigninSelectScreen({
|
|
|
3087
3087
|
function CodeInputScreen({ email, onSubmit, onResend }) {
|
|
3088
3088
|
const { t } = useI18n();
|
|
3089
3089
|
const { accentColor } = useVolrUI();
|
|
3090
|
-
const [digits, setDigits] =
|
|
3091
|
-
const [error, setError] =
|
|
3092
|
-
const [isLoading, setIsLoading] =
|
|
3093
|
-
const inputRefs =
|
|
3094
|
-
|
|
3090
|
+
const [digits, setDigits] = React15.useState(Array(6).fill(""));
|
|
3091
|
+
const [error, setError] = React15.useState(null);
|
|
3092
|
+
const [isLoading, setIsLoading] = React15.useState(false);
|
|
3093
|
+
const inputRefs = React15.useRef([]);
|
|
3094
|
+
React15.useEffect(() => {
|
|
3095
3095
|
inputRefs.current[0]?.focus();
|
|
3096
3096
|
}, []);
|
|
3097
|
-
|
|
3097
|
+
React15.useEffect(() => {
|
|
3098
3098
|
const code = digits.join("");
|
|
3099
3099
|
if (code.length === 6 && !isLoading) {
|
|
3100
3100
|
handleSubmit(code);
|
|
@@ -3206,7 +3206,7 @@ function CodeInputScreen({ email, onSubmit, onResend }) {
|
|
|
3206
3206
|
] });
|
|
3207
3207
|
}
|
|
3208
3208
|
var CopyButton = ({ text, className, onCopy }) => {
|
|
3209
|
-
const [copied, setCopied] =
|
|
3209
|
+
const [copied, setCopied] = React15.useState(false);
|
|
3210
3210
|
const handleCopy = async () => {
|
|
3211
3211
|
try {
|
|
3212
3212
|
await navigator.clipboard.writeText(text);
|
|
@@ -3285,23 +3285,23 @@ function SiweLoginScreen({
|
|
|
3285
3285
|
checkSiweSession,
|
|
3286
3286
|
getSiweSignUrl
|
|
3287
3287
|
} = react.useVolrLogin();
|
|
3288
|
-
const [isLoading, setIsLoading] =
|
|
3289
|
-
const [loadingWallet, setLoadingWallet] =
|
|
3290
|
-
const [error, setError] =
|
|
3291
|
-
const [providers, setProviders] =
|
|
3292
|
-
const [isDetecting, setIsDetecting] =
|
|
3293
|
-
const [hasLegacyWallet, setHasLegacyWallet] =
|
|
3294
|
-
const [showOtherWallet, setShowOtherWallet] =
|
|
3295
|
-
const [sessionUrl, setSessionUrl] =
|
|
3296
|
-
const [isPolling, setIsPolling] =
|
|
3297
|
-
const pollingRef =
|
|
3298
|
-
const sessionCreatedRef =
|
|
3299
|
-
|
|
3288
|
+
const [isLoading, setIsLoading] = React15.useState(false);
|
|
3289
|
+
const [loadingWallet, setLoadingWallet] = React15.useState(null);
|
|
3290
|
+
const [error, setError] = React15.useState(null);
|
|
3291
|
+
const [providers, setProviders] = React15.useState([]);
|
|
3292
|
+
const [isDetecting, setIsDetecting] = React15.useState(true);
|
|
3293
|
+
const [hasLegacyWallet, setHasLegacyWallet] = React15.useState(false);
|
|
3294
|
+
const [showOtherWallet, setShowOtherWallet] = React15.useState(false);
|
|
3295
|
+
const [sessionUrl, setSessionUrl] = React15.useState(null);
|
|
3296
|
+
const [isPolling, setIsPolling] = React15.useState(false);
|
|
3297
|
+
const pollingRef = React15.useRef(null);
|
|
3298
|
+
const sessionCreatedRef = React15.useRef(false);
|
|
3299
|
+
React15.useEffect(() => {
|
|
3300
3300
|
return () => {
|
|
3301
3301
|
if (pollingRef.current) clearInterval(pollingRef.current);
|
|
3302
3302
|
};
|
|
3303
3303
|
}, []);
|
|
3304
|
-
|
|
3304
|
+
React15.useEffect(() => {
|
|
3305
3305
|
if (typeof window === "undefined") {
|
|
3306
3306
|
setIsDetecting(false);
|
|
3307
3307
|
return;
|
|
@@ -3327,7 +3327,7 @@ function SiweLoginScreen({
|
|
|
3327
3327
|
};
|
|
3328
3328
|
}, []);
|
|
3329
3329
|
const hasAnyWallet = providers.length > 0 || hasLegacyWallet;
|
|
3330
|
-
const createSession =
|
|
3330
|
+
const createSession = React15.useCallback(async () => {
|
|
3331
3331
|
if (sessionCreatedRef.current || sessionUrl) return;
|
|
3332
3332
|
sessionCreatedRef.current = true;
|
|
3333
3333
|
try {
|
|
@@ -3369,17 +3369,17 @@ function SiweLoginScreen({
|
|
|
3369
3369
|
onError(err instanceof Error ? err : new Error("Failed to create session"));
|
|
3370
3370
|
}
|
|
3371
3371
|
}, [createSiweSession, getSiweSignUrl, checkSiweSession, onSuccess, onError, t, sessionUrl]);
|
|
3372
|
-
|
|
3372
|
+
React15.useEffect(() => {
|
|
3373
3373
|
if (!isDetecting && !hasAnyWallet && !sessionUrl) {
|
|
3374
3374
|
createSession();
|
|
3375
3375
|
}
|
|
3376
3376
|
}, [isDetecting, hasAnyWallet, sessionUrl, createSession]);
|
|
3377
|
-
|
|
3377
|
+
React15.useEffect(() => {
|
|
3378
3378
|
if (showOtherWallet && !sessionUrl) {
|
|
3379
3379
|
createSession();
|
|
3380
3380
|
}
|
|
3381
3381
|
}, [showOtherWallet, sessionUrl, createSession]);
|
|
3382
|
-
const handleWalletClick =
|
|
3382
|
+
const handleWalletClick = React15.useCallback(async (provider, walletName, walletConnector) => {
|
|
3383
3383
|
setError(null);
|
|
3384
3384
|
setIsLoading(true);
|
|
3385
3385
|
setLoadingWallet(walletName);
|
|
@@ -3403,7 +3403,7 @@ function SiweLoginScreen({
|
|
|
3403
3403
|
setLoadingWallet(null);
|
|
3404
3404
|
}
|
|
3405
3405
|
}, [signWithWallet, onSuccess, onError]);
|
|
3406
|
-
const handleLegacyWalletClick =
|
|
3406
|
+
const handleLegacyWalletClick = React15.useCallback(async () => {
|
|
3407
3407
|
if (typeof window === "undefined" || !window.ethereum) return;
|
|
3408
3408
|
const ethereum = window.ethereum;
|
|
3409
3409
|
let walletName = "Wallet";
|
|
@@ -3412,7 +3412,7 @@ function SiweLoginScreen({
|
|
|
3412
3412
|
else if (ethereum.isRabby) walletName = "Rabby";
|
|
3413
3413
|
await handleWalletClick(ethereum, walletName);
|
|
3414
3414
|
}, [handleWalletClick]);
|
|
3415
|
-
const cancelOtherWallet =
|
|
3415
|
+
const cancelOtherWallet = React15.useCallback(() => {
|
|
3416
3416
|
if (pollingRef.current) {
|
|
3417
3417
|
clearInterval(pollingRef.current);
|
|
3418
3418
|
pollingRef.current = null;
|
|
@@ -3559,13 +3559,13 @@ function SigninModal({ isOpen, onClose, onError }) {
|
|
|
3559
3559
|
const { client } = react.useInternalAuth();
|
|
3560
3560
|
const { appName, branding } = useVolrUI();
|
|
3561
3561
|
const { requestEmailCode, verifyEmailCode, handleSocialLogin } = react.useVolrLogin();
|
|
3562
|
-
const [currentScreen, setCurrentScreen] =
|
|
3563
|
-
const [email, setEmail] =
|
|
3562
|
+
const [currentScreen, setCurrentScreen] = React15.useState("method-select");
|
|
3563
|
+
const [email, setEmail] = React15.useState("");
|
|
3564
3564
|
const hasPasskey = user?.keyStorageType === "passkey";
|
|
3565
3565
|
const isMobile2 = useMediaQuery("(max-width: 500px)");
|
|
3566
3566
|
const isWideViewport = useMediaQuery("(min-width: 864px)");
|
|
3567
3567
|
const shouldUseWideLayout = !isMobile2 && isWideViewport && Boolean(branding) && currentScreen === "method-select";
|
|
3568
|
-
|
|
3568
|
+
React15.useEffect(() => {
|
|
3569
3569
|
if (!isOpen) {
|
|
3570
3570
|
setCurrentScreen("method-select");
|
|
3571
3571
|
setEmail("");
|
|
@@ -3790,7 +3790,7 @@ function AssetSelectView({
|
|
|
3790
3790
|
}) })
|
|
3791
3791
|
] });
|
|
3792
3792
|
}
|
|
3793
|
-
var TextLinkButton =
|
|
3793
|
+
var TextLinkButton = React15__default.default.forwardRef(({ showArrow = false, className, children, ...props }, ref) => {
|
|
3794
3794
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3795
3795
|
"button",
|
|
3796
3796
|
{
|
|
@@ -3919,23 +3919,23 @@ function WalletTransferView({
|
|
|
3919
3919
|
const { config } = react.useVolrContext();
|
|
3920
3920
|
const { client } = react.useInternalAuth();
|
|
3921
3921
|
const { isDetecting, getWalletsForDisplay, hasWallet } = react.useEIP6963();
|
|
3922
|
-
const [viewState, setViewState] =
|
|
3923
|
-
const [selectedWallet, setSelectedWallet] =
|
|
3924
|
-
const [connectedAddress, setConnectedAddress] =
|
|
3925
|
-
const [balance, setBalance] =
|
|
3926
|
-
const [amount, setAmount] =
|
|
3927
|
-
const [isConnecting, setIsConnecting] =
|
|
3928
|
-
const [isTransferring, setIsTransferring] =
|
|
3929
|
-
const [error, setError] =
|
|
3930
|
-
const [chainName, setChainName] =
|
|
3931
|
-
const [currentChainId, setCurrentChainId] =
|
|
3922
|
+
const [viewState, setViewState] = React15.useState("select-wallet");
|
|
3923
|
+
const [selectedWallet, setSelectedWallet] = React15.useState(null);
|
|
3924
|
+
const [connectedAddress, setConnectedAddress] = React15.useState(null);
|
|
3925
|
+
const [balance, setBalance] = React15.useState(null);
|
|
3926
|
+
const [amount, setAmount] = React15.useState("");
|
|
3927
|
+
const [isConnecting, setIsConnecting] = React15.useState(false);
|
|
3928
|
+
const [isTransferring, setIsTransferring] = React15.useState(false);
|
|
3929
|
+
const [error, setError] = React15.useState(null);
|
|
3930
|
+
const [chainName, setChainName] = React15.useState(null);
|
|
3931
|
+
const [currentChainId, setCurrentChainId] = React15.useState(null);
|
|
3932
3932
|
const tokenSymbol = asset === "native" ? "ETH" : asset.symbol;
|
|
3933
3933
|
const decimals = asset === "native" ? 18 : asset.decimals;
|
|
3934
|
-
const getNetworkInfo =
|
|
3934
|
+
const getNetworkInfo = React15.useCallback(
|
|
3935
3935
|
react.createGetNetworkInfo({ client, rpcOverrides: config.rpcOverrides }),
|
|
3936
3936
|
[client, config.rpcOverrides]
|
|
3937
3937
|
);
|
|
3938
|
-
|
|
3938
|
+
React15.useEffect(() => {
|
|
3939
3939
|
let cancelled = false;
|
|
3940
3940
|
const loadChainName = async () => {
|
|
3941
3941
|
try {
|
|
@@ -3950,7 +3950,7 @@ function WalletTransferView({
|
|
|
3950
3950
|
cancelled = true;
|
|
3951
3951
|
};
|
|
3952
3952
|
}, [getNetworkInfo, chainId]);
|
|
3953
|
-
const connectWallet =
|
|
3953
|
+
const connectWallet = React15.useCallback(async (wallet) => {
|
|
3954
3954
|
setIsConnecting(true);
|
|
3955
3955
|
setError(null);
|
|
3956
3956
|
try {
|
|
@@ -3974,7 +3974,7 @@ function WalletTransferView({
|
|
|
3974
3974
|
setIsConnecting(false);
|
|
3975
3975
|
}
|
|
3976
3976
|
}, [chainId, asset]);
|
|
3977
|
-
const fetchBalance =
|
|
3977
|
+
const fetchBalance = React15.useCallback(async (provider, address, currentChain) => {
|
|
3978
3978
|
try {
|
|
3979
3979
|
if (currentChain !== chainId) {
|
|
3980
3980
|
setBalance(null);
|
|
@@ -3999,7 +3999,7 @@ function WalletTransferView({
|
|
|
3999
3999
|
setBalance(BigInt(0));
|
|
4000
4000
|
}
|
|
4001
4001
|
}, [chainId, asset]);
|
|
4002
|
-
const switchNetwork =
|
|
4002
|
+
const switchNetwork = React15.useCallback(async () => {
|
|
4003
4003
|
if (!selectedWallet?.provider) return;
|
|
4004
4004
|
try {
|
|
4005
4005
|
await selectedWallet.provider.request({
|
|
@@ -4017,7 +4017,7 @@ function WalletTransferView({
|
|
|
4017
4017
|
setError(err instanceof Error ? err.message : "Failed to switch network");
|
|
4018
4018
|
}
|
|
4019
4019
|
}, [selectedWallet, chainId, connectedAddress, fetchBalance]);
|
|
4020
|
-
const executeTransfer =
|
|
4020
|
+
const executeTransfer = React15.useCallback(async () => {
|
|
4021
4021
|
if (!selectedWallet?.provider || !connectedAddress || !amount) return;
|
|
4022
4022
|
setIsTransferring(true);
|
|
4023
4023
|
setError(null);
|
|
@@ -4060,7 +4060,7 @@ function WalletTransferView({
|
|
|
4060
4060
|
setIsTransferring(false);
|
|
4061
4061
|
}
|
|
4062
4062
|
}, [selectedWallet, connectedAddress, amount, decimals, balance, asset, destinationAddress, onSuccess, t]);
|
|
4063
|
-
const setMaxAmount =
|
|
4063
|
+
const setMaxAmount = React15.useCallback(() => {
|
|
4064
4064
|
if (balance !== null) {
|
|
4065
4065
|
const formatted = formatUnits(balance, decimals);
|
|
4066
4066
|
setAmount(formatted);
|
|
@@ -4426,7 +4426,7 @@ var DepositCompletedToast = ({
|
|
|
4426
4426
|
symbol
|
|
4427
4427
|
}) => {
|
|
4428
4428
|
const { t } = useI18n();
|
|
4429
|
-
const [expanded, setExpanded] =
|
|
4429
|
+
const [expanded, setExpanded] = React15.useState(false);
|
|
4430
4430
|
const formatAmount = (amount) => {
|
|
4431
4431
|
const divisor = BigInt(10 ** decimals);
|
|
4432
4432
|
const whole = amount / divisor;
|
|
@@ -4586,11 +4586,11 @@ function DepositQRView(props) {
|
|
|
4586
4586
|
const { t } = useI18n();
|
|
4587
4587
|
const { config } = react.useVolrContext();
|
|
4588
4588
|
const { client } = react.useInternalAuth();
|
|
4589
|
-
const [chainName, setChainName] =
|
|
4590
|
-
const [showOtherTokenModal, setShowOtherTokenModal] =
|
|
4591
|
-
const [showToast, setShowToast] =
|
|
4592
|
-
const [toastData, setToastData] =
|
|
4593
|
-
const [viewMode, setViewMode] =
|
|
4589
|
+
const [chainName, setChainName] = React15.useState(null);
|
|
4590
|
+
const [showOtherTokenModal, setShowOtherTokenModal] = React15.useState(false);
|
|
4591
|
+
const [showToast, setShowToast] = React15.useState(false);
|
|
4592
|
+
const [toastData, setToastData] = React15.useState(null);
|
|
4593
|
+
const [viewMode, setViewMode] = React15.useState("qr");
|
|
4594
4594
|
const eip681 = `ethereum:${props.address}`;
|
|
4595
4595
|
const status = react.useDepositListener({
|
|
4596
4596
|
chainId: props.chainId,
|
|
@@ -4603,7 +4603,7 @@ function DepositQRView(props) {
|
|
|
4603
4603
|
},
|
|
4604
4604
|
address: props.address
|
|
4605
4605
|
});
|
|
4606
|
-
|
|
4606
|
+
React15.useEffect(() => {
|
|
4607
4607
|
if (status.state === "detected") {
|
|
4608
4608
|
setToastData({
|
|
4609
4609
|
previousBalance: status.previousBalance,
|
|
@@ -4614,11 +4614,11 @@ function DepositQRView(props) {
|
|
|
4614
4614
|
props.onDepositDetected?.();
|
|
4615
4615
|
}
|
|
4616
4616
|
}, [status, props.onDepositDetected]);
|
|
4617
|
-
const getNetworkInfo =
|
|
4617
|
+
const getNetworkInfo = React15.useCallback(
|
|
4618
4618
|
react.createGetNetworkInfo({ client, rpcOverrides: config.rpcOverrides }),
|
|
4619
4619
|
[client, config.rpcOverrides]
|
|
4620
4620
|
);
|
|
4621
|
-
|
|
4621
|
+
React15.useEffect(() => {
|
|
4622
4622
|
let cancelled = false;
|
|
4623
4623
|
const loadChainName = async () => {
|
|
4624
4624
|
try {
|
|
@@ -4926,7 +4926,7 @@ function AccountMainView({
|
|
|
4926
4926
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:flex-col", style: { gap: "1rem" }, children: [
|
|
4927
4927
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:rounded-2xl volr:border volr:border-slate-200 volr:bg-white volr:py-7 volr:shadow-sm", children: [
|
|
4928
4928
|
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-xs volr:font-medium volr:uppercase volr:tracking-wider volr:text-slate-500 volr:mb-3 volr:text-center", children: t("account.totalBalance") }),
|
|
4929
|
-
isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:animate-pulse volr:text-center volr:w-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:h-16 volr:w-48 volr:bg-slate-200 volr:rounded-lg" }) }) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
4929
|
+
isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:animate-pulse volr:text-center volr:w-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:h-16 volr:w-48 volr:mx-auto volr:bg-slate-200 volr:rounded-lg" }) }) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
4930
4930
|
"p",
|
|
4931
4931
|
{
|
|
4932
4932
|
className: "volr:font-semibold volr:text-slate-900 volr:tracking-tight volr:text-center",
|
|
@@ -5061,7 +5061,7 @@ function BalanceDetailView({
|
|
|
5061
5061
|
/* @__PURE__ */ jsxRuntime.jsx("div", { children: balances.map((token) => /* @__PURE__ */ jsxRuntime.jsx(TokenRow, { token }, token.id)) })
|
|
5062
5062
|
] });
|
|
5063
5063
|
}
|
|
5064
|
-
var Input =
|
|
5064
|
+
var Input = React15__default.default.forwardRef(
|
|
5065
5065
|
({ leftIcon, error, className, style, disabled, ...props }, ref) => {
|
|
5066
5066
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:relative", children: [
|
|
5067
5067
|
leftIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:absolute volr:left-3 volr:top-1/2 volr:-translate-y-1/2 volr:pointer-events-none volr-text-muted", children: leftIcon }),
|
|
@@ -5093,23 +5093,23 @@ function WithdrawView({
|
|
|
5093
5093
|
const { t } = useI18n();
|
|
5094
5094
|
const { withdraw, isWithdrawing, result, error, reset } = react.useWithdraw();
|
|
5095
5095
|
const { client } = react.useInternalAuth();
|
|
5096
|
-
const [step, setStep] =
|
|
5097
|
-
const [selectedTokenId, setSelectedTokenId] =
|
|
5098
|
-
const [toAddress, setToAddress] =
|
|
5099
|
-
const [amount, setAmount] =
|
|
5100
|
-
const [useConnectedWallet, setUseConnectedWallet] =
|
|
5101
|
-
const [blockExplorerUrl, setBlockExplorerUrl] =
|
|
5102
|
-
const selectedToken =
|
|
5096
|
+
const [step, setStep] = React15.useState("select");
|
|
5097
|
+
const [selectedTokenId, setSelectedTokenId] = React15.useState(null);
|
|
5098
|
+
const [toAddress, setToAddress] = React15.useState("");
|
|
5099
|
+
const [amount, setAmount] = React15.useState("");
|
|
5100
|
+
const [useConnectedWallet, setUseConnectedWallet] = React15.useState(false);
|
|
5101
|
+
const [blockExplorerUrl, setBlockExplorerUrl] = React15.useState(null);
|
|
5102
|
+
const selectedToken = React15.useMemo(
|
|
5103
5103
|
() => balances.find((b) => b.id === selectedTokenId),
|
|
5104
5104
|
[balances, selectedTokenId]
|
|
5105
5105
|
);
|
|
5106
5106
|
const selectedChainId = selectedToken?.chainId ?? null;
|
|
5107
|
-
const connectedAddress =
|
|
5107
|
+
const connectedAddress = React15.useMemo(() => {
|
|
5108
5108
|
if (!connectedWallet) return null;
|
|
5109
5109
|
const parts = connectedWallet.split(":");
|
|
5110
5110
|
return parts.length >= 2 ? parts[1] : null;
|
|
5111
5111
|
}, [connectedWallet]);
|
|
5112
|
-
|
|
5112
|
+
React15.useEffect(() => {
|
|
5113
5113
|
if (!selectedChainId) {
|
|
5114
5114
|
setBlockExplorerUrl(null);
|
|
5115
5115
|
return;
|
|
@@ -5130,7 +5130,7 @@ function WithdrawView({
|
|
|
5130
5130
|
cancelled = true;
|
|
5131
5131
|
};
|
|
5132
5132
|
}, [client, selectedChainId]);
|
|
5133
|
-
const explorerTxUrl =
|
|
5133
|
+
const explorerTxUrl = React15.useMemo(() => {
|
|
5134
5134
|
if (!blockExplorerUrl || !result?.txHash) return null;
|
|
5135
5135
|
const trimmedBase = blockExplorerUrl.replace(/\/$/, "");
|
|
5136
5136
|
return `${trimmedBase}/tx/${result.txHash}`;
|
|
@@ -5169,7 +5169,7 @@ function WithdrawView({
|
|
|
5169
5169
|
setAmount("");
|
|
5170
5170
|
setUseConnectedWallet(false);
|
|
5171
5171
|
};
|
|
5172
|
-
const isAmountValid =
|
|
5172
|
+
const isAmountValid = React15.useMemo(() => {
|
|
5173
5173
|
if (!amount || !selectedToken) return false;
|
|
5174
5174
|
const num = parseFloat(amount);
|
|
5175
5175
|
if (isNaN(num) || num <= 0) return false;
|
|
@@ -5504,10 +5504,10 @@ function PaymentRow({ payment, onClick }) {
|
|
|
5504
5504
|
function PaymentHistoryView({ onSelectPayment }) {
|
|
5505
5505
|
const { t } = useI18n();
|
|
5506
5506
|
const { getPaymentHistory, isLoading: isApiLoading } = react.useVolrPaymentApi();
|
|
5507
|
-
const [payments, setPayments] =
|
|
5508
|
-
const [isLoading, setIsLoading] =
|
|
5509
|
-
const [error, setError] =
|
|
5510
|
-
|
|
5507
|
+
const [payments, setPayments] = React15.useState([]);
|
|
5508
|
+
const [isLoading, setIsLoading] = React15.useState(true);
|
|
5509
|
+
const [error, setError] = React15.useState(null);
|
|
5510
|
+
React15.useEffect(() => {
|
|
5511
5511
|
setIsLoading(true);
|
|
5512
5512
|
setError(null);
|
|
5513
5513
|
getPaymentHistory({ take: 20 }).then((result) => {
|
|
@@ -5747,21 +5747,21 @@ function AccountModal({ isOpen, onClose, onError }) {
|
|
|
5747
5747
|
const { user, logout } = react.useVolrContext();
|
|
5748
5748
|
const { balances, totalUsd, isLoading, paymentEnabled, refresh } = react.useUserBalances();
|
|
5749
5749
|
const { client } = react.useInternalAuth();
|
|
5750
|
-
const [currentView, setCurrentView] =
|
|
5751
|
-
const [selectedPayment, setSelectedPayment] =
|
|
5752
|
-
const [isLoggingOut, setIsLoggingOut] =
|
|
5753
|
-
const [lastUpdatedAt, setLastUpdatedAt] =
|
|
5754
|
-
const [isRefreshing, setIsRefreshing] =
|
|
5755
|
-
const prevUserRef =
|
|
5756
|
-
const refreshInFlightRef =
|
|
5757
|
-
const lastRefreshRef =
|
|
5758
|
-
const [closingAfterLogin, setClosingAfterLogin] =
|
|
5759
|
-
const [setupStep, setSetupStep] =
|
|
5760
|
-
const [depositAssets, setDepositAssets] =
|
|
5761
|
-
const [depositLoading, setDepositLoading] =
|
|
5762
|
-
const [depositError, setDepositError] =
|
|
5763
|
-
const [depositSelectedIdx, setDepositSelectedIdx] =
|
|
5764
|
-
const refreshBalances =
|
|
5750
|
+
const [currentView, setCurrentView] = React15.useState("main");
|
|
5751
|
+
const [selectedPayment, setSelectedPayment] = React15.useState(null);
|
|
5752
|
+
const [isLoggingOut, setIsLoggingOut] = React15.useState(false);
|
|
5753
|
+
const [lastUpdatedAt, setLastUpdatedAt] = React15.useState(null);
|
|
5754
|
+
const [isRefreshing, setIsRefreshing] = React15.useState(false);
|
|
5755
|
+
const prevUserRef = React15.useRef(user ?? null);
|
|
5756
|
+
const refreshInFlightRef = React15.useRef(false);
|
|
5757
|
+
const lastRefreshRef = React15.useRef(0);
|
|
5758
|
+
const [closingAfterLogin, setClosingAfterLogin] = React15.useState(false);
|
|
5759
|
+
const [setupStep, setSetupStep] = React15.useState("prompt");
|
|
5760
|
+
const [depositAssets, setDepositAssets] = React15.useState([]);
|
|
5761
|
+
const [depositLoading, setDepositLoading] = React15.useState(false);
|
|
5762
|
+
const [depositError, setDepositError] = React15.useState(null);
|
|
5763
|
+
const [depositSelectedIdx, setDepositSelectedIdx] = React15.useState(-1);
|
|
5764
|
+
const refreshBalances = React15.useCallback(async () => {
|
|
5765
5765
|
if (!isOpen) return;
|
|
5766
5766
|
const now = Date.now();
|
|
5767
5767
|
if (refreshInFlightRef.current) return;
|
|
@@ -5781,10 +5781,10 @@ function AccountModal({ isOpen, onClose, onError }) {
|
|
|
5781
5781
|
setIsRefreshing(false);
|
|
5782
5782
|
}
|
|
5783
5783
|
}, [isOpen, refresh]);
|
|
5784
|
-
const handleManualRefresh =
|
|
5784
|
+
const handleManualRefresh = React15.useCallback(() => {
|
|
5785
5785
|
void refreshBalances();
|
|
5786
5786
|
}, [refreshBalances]);
|
|
5787
|
-
|
|
5787
|
+
React15.useEffect(() => {
|
|
5788
5788
|
if (currentView !== "deposit" || !isOpen) return;
|
|
5789
5789
|
setDepositLoading(true);
|
|
5790
5790
|
setDepositError(null);
|
|
@@ -5801,11 +5801,11 @@ function AccountModal({ isOpen, onClose, onError }) {
|
|
|
5801
5801
|
setDepositLoading(false);
|
|
5802
5802
|
});
|
|
5803
5803
|
}, [currentView, isOpen, client]);
|
|
5804
|
-
|
|
5804
|
+
React15.useEffect(() => {
|
|
5805
5805
|
if (!isOpen) return;
|
|
5806
5806
|
void refreshBalances();
|
|
5807
5807
|
}, [isOpen, currentView, refreshBalances]);
|
|
5808
|
-
|
|
5808
|
+
React15.useEffect(() => {
|
|
5809
5809
|
if (!isOpen || typeof document === "undefined") return;
|
|
5810
5810
|
const handleFocus = () => {
|
|
5811
5811
|
if (document.visibilityState === "visible") {
|
|
@@ -5819,7 +5819,7 @@ function AccountModal({ isOpen, onClose, onError }) {
|
|
|
5819
5819
|
document.removeEventListener("visibilitychange", handleFocus);
|
|
5820
5820
|
};
|
|
5821
5821
|
}, [isOpen, refreshBalances]);
|
|
5822
|
-
|
|
5822
|
+
React15.useEffect(() => {
|
|
5823
5823
|
if (!isOpen) return;
|
|
5824
5824
|
const intervalId = window.setInterval(() => {
|
|
5825
5825
|
void refreshBalances();
|
|
@@ -5828,7 +5828,7 @@ function AccountModal({ isOpen, onClose, onError }) {
|
|
|
5828
5828
|
clearInterval(intervalId);
|
|
5829
5829
|
};
|
|
5830
5830
|
}, [isOpen, refreshBalances]);
|
|
5831
|
-
const handleOpenChange =
|
|
5831
|
+
const handleOpenChange = React15.useCallback((open) => {
|
|
5832
5832
|
if (!open) {
|
|
5833
5833
|
onClose();
|
|
5834
5834
|
setTimeout(() => {
|
|
@@ -5838,7 +5838,7 @@ function AccountModal({ isOpen, onClose, onError }) {
|
|
|
5838
5838
|
}, 200);
|
|
5839
5839
|
}
|
|
5840
5840
|
}, [onClose]);
|
|
5841
|
-
|
|
5841
|
+
React15.useEffect(() => {
|
|
5842
5842
|
if (!isOpen) {
|
|
5843
5843
|
setClosingAfterLogin(false);
|
|
5844
5844
|
prevUserRef.current = user ?? null;
|
|
@@ -6009,11 +6009,11 @@ var DepositModal = ({
|
|
|
6009
6009
|
}) => {
|
|
6010
6010
|
const { user } = react.useVolrContext();
|
|
6011
6011
|
const { client } = react.useInternalAuth();
|
|
6012
|
-
const [depositAssets, setDepositAssets] =
|
|
6013
|
-
const [isLoading, setIsLoading] =
|
|
6014
|
-
const [error, setError] =
|
|
6015
|
-
const [selectedIdx, setSelectedIdx] =
|
|
6016
|
-
|
|
6012
|
+
const [depositAssets, setDepositAssets] = React15.useState([]);
|
|
6013
|
+
const [isLoading, setIsLoading] = React15.useState(true);
|
|
6014
|
+
const [error, setError] = React15.useState(null);
|
|
6015
|
+
const [selectedIdx, setSelectedIdx] = React15.useState(-1);
|
|
6016
|
+
React15.useEffect(() => {
|
|
6017
6017
|
if (!open) return;
|
|
6018
6018
|
setIsLoading(true);
|
|
6019
6019
|
setError(null);
|
|
@@ -6040,12 +6040,12 @@ var DepositModal = ({
|
|
|
6040
6040
|
if (depositAssets.length === 1) return 0;
|
|
6041
6041
|
return -1;
|
|
6042
6042
|
};
|
|
6043
|
-
|
|
6043
|
+
React15.useEffect(() => {
|
|
6044
6044
|
if (open && !isLoading && depositAssets.length > 0) {
|
|
6045
6045
|
setSelectedIdx(getInitialIndex());
|
|
6046
6046
|
}
|
|
6047
6047
|
}, [open, isLoading, depositAssets.length, asset]);
|
|
6048
|
-
|
|
6048
|
+
React15.useEffect(() => {
|
|
6049
6049
|
if (!open) {
|
|
6050
6050
|
setSelectedIdx(-1);
|
|
6051
6051
|
}
|
|
@@ -6203,7 +6203,7 @@ function usePaymentModalState(open, onOpenChange) {
|
|
|
6203
6203
|
const { evm } = react.useVolr();
|
|
6204
6204
|
const { paymentOptions } = useVolrModal();
|
|
6205
6205
|
const { createPayment, updatePaymentToProcessing, pollPaymentStatus, failPendingPayment } = react.useVolrPaymentApi();
|
|
6206
|
-
const [state, dispatch] =
|
|
6206
|
+
const [state, dispatch] = React15.useReducer(paymentModalReducer, initialState);
|
|
6207
6207
|
const tokensWithBalances = state.tokens.map((token) => {
|
|
6208
6208
|
const balanceData = state.tokenBalances.get(token.id);
|
|
6209
6209
|
return {
|
|
@@ -6215,7 +6215,7 @@ function usePaymentModalState(open, onOpenChange) {
|
|
|
6215
6215
|
});
|
|
6216
6216
|
const selectedToken = state.selectedTokenId ? tokensWithBalances.find((t) => t.id === state.selectedTokenId) ?? null : null;
|
|
6217
6217
|
const isBalanceLoading = tokensWithBalances.some((t) => t.isBalanceLoading);
|
|
6218
|
-
const fetchTokenBalance =
|
|
6218
|
+
const fetchTokenBalance = React15.useCallback(
|
|
6219
6219
|
async (token) => {
|
|
6220
6220
|
if (!user?.evmAddress) {
|
|
6221
6221
|
dispatch({
|
|
@@ -6263,20 +6263,20 @@ function usePaymentModalState(open, onOpenChange) {
|
|
|
6263
6263
|
},
|
|
6264
6264
|
[user, evm]
|
|
6265
6265
|
);
|
|
6266
|
-
const fetchAllBalances =
|
|
6266
|
+
const fetchAllBalances = React15.useCallback(
|
|
6267
6267
|
async (tokens) => {
|
|
6268
6268
|
await Promise.all(tokens.map((token) => fetchTokenBalance(token)));
|
|
6269
6269
|
},
|
|
6270
6270
|
[fetchTokenBalance]
|
|
6271
6271
|
);
|
|
6272
|
-
const fetchBranding =
|
|
6272
|
+
const fetchBranding = React15.useCallback(async () => {
|
|
6273
6273
|
try {
|
|
6274
6274
|
const response = await client.get("/auth/branding");
|
|
6275
6275
|
dispatch({ type: "SET_LOGO_URL", logoUrl: response.logoUrl });
|
|
6276
6276
|
} catch {
|
|
6277
6277
|
}
|
|
6278
6278
|
}, [client]);
|
|
6279
|
-
const fetchPaymentConfig =
|
|
6279
|
+
const fetchPaymentConfig = React15.useCallback(async () => {
|
|
6280
6280
|
dispatch({ type: "SET_CONFIG_LOADING", loading: true });
|
|
6281
6281
|
try {
|
|
6282
6282
|
const response = await client.get("/payments/config");
|
|
@@ -6293,7 +6293,7 @@ function usePaymentModalState(open, onOpenChange) {
|
|
|
6293
6293
|
dispatch({ type: "SET_CONFIG_LOADING", loading: false });
|
|
6294
6294
|
}
|
|
6295
6295
|
}, [client, fetchAllBalances]);
|
|
6296
|
-
const selectBestToken =
|
|
6296
|
+
const selectBestToken = React15.useCallback(() => {
|
|
6297
6297
|
if (state.tokens.length === 0) return;
|
|
6298
6298
|
if (state.selectedTokenId) return;
|
|
6299
6299
|
let bestTokenId = state.tokens[0].id;
|
|
@@ -6307,7 +6307,7 @@ function usePaymentModalState(open, onOpenChange) {
|
|
|
6307
6307
|
}
|
|
6308
6308
|
dispatch({ type: "SELECT_TOKEN", tokenId: bestTokenId });
|
|
6309
6309
|
}, [state.tokens, state.tokenBalances, state.selectedTokenId]);
|
|
6310
|
-
|
|
6310
|
+
React15.useEffect(() => {
|
|
6311
6311
|
if (open && paymentOptions?.options) {
|
|
6312
6312
|
if (state.step === "processing" || state.step === "result") {
|
|
6313
6313
|
return;
|
|
@@ -6319,15 +6319,15 @@ function usePaymentModalState(open, onOpenChange) {
|
|
|
6319
6319
|
dispatch({ type: "RESET" });
|
|
6320
6320
|
}
|
|
6321
6321
|
}, [open, paymentOptions?.options?.amount]);
|
|
6322
|
-
|
|
6322
|
+
React15.useEffect(() => {
|
|
6323
6323
|
if (!isBalanceLoading && state.tokens.length > 0 && !state.selectedTokenId) {
|
|
6324
6324
|
selectBestToken();
|
|
6325
6325
|
}
|
|
6326
6326
|
}, [isBalanceLoading, state.tokens.length, state.selectedTokenId, selectBestToken]);
|
|
6327
|
-
const handleSelectToken =
|
|
6327
|
+
const handleSelectToken = React15.useCallback((tokenId) => {
|
|
6328
6328
|
dispatch({ type: "SELECT_TOKEN", tokenId });
|
|
6329
6329
|
}, []);
|
|
6330
|
-
const handleWalletBack =
|
|
6330
|
+
const handleWalletBack = React15.useCallback(() => {
|
|
6331
6331
|
if (state.step !== "wallet") {
|
|
6332
6332
|
return;
|
|
6333
6333
|
}
|
|
@@ -6337,10 +6337,10 @@ function usePaymentModalState(open, onOpenChange) {
|
|
|
6337
6337
|
}
|
|
6338
6338
|
dispatch({ type: "SHOW_WALLET", walletStep: "choice" });
|
|
6339
6339
|
}, [state.step, state.walletStep]);
|
|
6340
|
-
const handleChooseCreateAccount =
|
|
6340
|
+
const handleChooseCreateAccount = React15.useCallback(() => {
|
|
6341
6341
|
dispatch({ type: "SHOW_WALLET", walletStep: "create-account" });
|
|
6342
6342
|
}, []);
|
|
6343
|
-
const saveExternalWalletPreference =
|
|
6343
|
+
const saveExternalWalletPreference = React15.useCallback(async () => {
|
|
6344
6344
|
if (!user?.id) return;
|
|
6345
6345
|
if (user.externalWalletPreferred) return;
|
|
6346
6346
|
try {
|
|
@@ -6355,11 +6355,11 @@ function usePaymentModalState(open, onOpenChange) {
|
|
|
6355
6355
|
setUser({ ...user, externalWalletPreferred: true });
|
|
6356
6356
|
}
|
|
6357
6357
|
}, [client, user, setUser]);
|
|
6358
|
-
const handleChooseExternalWallet =
|
|
6358
|
+
const handleChooseExternalWallet = React15.useCallback(() => {
|
|
6359
6359
|
void saveExternalWalletPreference();
|
|
6360
6360
|
dispatch({ type: "SHOW_WALLET", walletStep: "external-wallet" });
|
|
6361
6361
|
}, [saveExternalWalletPreference]);
|
|
6362
|
-
const handlePay =
|
|
6362
|
+
const handlePay = React15.useCallback(async () => {
|
|
6363
6363
|
const { payOptions, receiverAddress, selectedTokenId } = state;
|
|
6364
6364
|
if (!payOptions || !paymentOptions || !receiverAddress || !selectedTokenId) {
|
|
6365
6365
|
return;
|
|
@@ -6481,7 +6481,7 @@ function usePaymentModalState(open, onOpenChange) {
|
|
|
6481
6481
|
pollPaymentStatus,
|
|
6482
6482
|
failPendingPayment
|
|
6483
6483
|
]);
|
|
6484
|
-
const handleExternalWalletConnected =
|
|
6484
|
+
const handleExternalWalletConnected = React15.useCallback(
|
|
6485
6485
|
async ({ provider, address }) => {
|
|
6486
6486
|
const { payOptions, receiverAddress, selectedTokenId } = state;
|
|
6487
6487
|
if (!payOptions || !paymentOptions || !receiverAddress || !selectedTokenId) {
|
|
@@ -6491,6 +6491,7 @@ function usePaymentModalState(open, onOpenChange) {
|
|
|
6491
6491
|
if (!tokenInfo) {
|
|
6492
6492
|
return;
|
|
6493
6493
|
}
|
|
6494
|
+
const permitType = tokenInfo.permitType ?? (tokenInfo.permitSupported ? "EIP2612" : "NONE");
|
|
6494
6495
|
if (tokenInfo.address === "native") {
|
|
6495
6496
|
dispatch({
|
|
6496
6497
|
type: "PAYMENT_ERROR",
|
|
@@ -6501,6 +6502,16 @@ function usePaymentModalState(open, onOpenChange) {
|
|
|
6501
6502
|
});
|
|
6502
6503
|
return;
|
|
6503
6504
|
}
|
|
6505
|
+
if (permitType !== "EIP2612") {
|
|
6506
|
+
dispatch({
|
|
6507
|
+
type: "PAYMENT_ERROR",
|
|
6508
|
+
error: {
|
|
6509
|
+
code: "TOKEN_NOT_SUPPORTED",
|
|
6510
|
+
message: "External wallet payment is not supported for this token."
|
|
6511
|
+
}
|
|
6512
|
+
});
|
|
6513
|
+
return;
|
|
6514
|
+
}
|
|
6504
6515
|
dispatch({ type: "START_PAYMENT" });
|
|
6505
6516
|
let createdPaymentId = null;
|
|
6506
6517
|
const toPaymentError = (err) => {
|
|
@@ -6615,10 +6626,10 @@ function usePaymentModalState(open, onOpenChange) {
|
|
|
6615
6626
|
failPendingPayment
|
|
6616
6627
|
]
|
|
6617
6628
|
);
|
|
6618
|
-
const handleDeposit =
|
|
6629
|
+
const handleDeposit = React15.useCallback(() => {
|
|
6619
6630
|
dispatch({ type: "SHOW_DEPOSIT" });
|
|
6620
6631
|
}, []);
|
|
6621
|
-
const handleDepositClose =
|
|
6632
|
+
const handleDepositClose = React15.useCallback(
|
|
6622
6633
|
(depositOpen) => {
|
|
6623
6634
|
if (!depositOpen) {
|
|
6624
6635
|
dispatch({ type: "HIDE_DEPOSIT" });
|
|
@@ -6629,19 +6640,19 @@ function usePaymentModalState(open, onOpenChange) {
|
|
|
6629
6640
|
},
|
|
6630
6641
|
[state.tokens, fetchAllBalances]
|
|
6631
6642
|
);
|
|
6632
|
-
const handleDone =
|
|
6643
|
+
const handleDone = React15.useCallback(() => {
|
|
6633
6644
|
if (state.createdPayment?.status === "CONFIRMED") {
|
|
6634
6645
|
paymentOptions?.onComplete?.(state.createdPayment);
|
|
6635
6646
|
}
|
|
6636
6647
|
onOpenChange(false);
|
|
6637
6648
|
}, [state.createdPayment, paymentOptions, onOpenChange]);
|
|
6638
|
-
const handleRetry =
|
|
6649
|
+
const handleRetry = React15.useCallback(() => {
|
|
6639
6650
|
dispatch({ type: "RETRY" });
|
|
6640
6651
|
if (state.tokens.length > 0) {
|
|
6641
6652
|
fetchAllBalances(state.tokens);
|
|
6642
6653
|
}
|
|
6643
6654
|
}, [state.tokens, fetchAllBalances]);
|
|
6644
|
-
const handleClose =
|
|
6655
|
+
const handleClose = React15.useCallback(() => {
|
|
6645
6656
|
if (state.step === "processing") {
|
|
6646
6657
|
return;
|
|
6647
6658
|
}
|
|
@@ -6650,7 +6661,7 @@ function usePaymentModalState(open, onOpenChange) {
|
|
|
6650
6661
|
}
|
|
6651
6662
|
onOpenChange(false);
|
|
6652
6663
|
}, [state.step, paymentOptions, onOpenChange]);
|
|
6653
|
-
const handleReport =
|
|
6664
|
+
const handleReport = React15.useCallback(async () => {
|
|
6654
6665
|
const { createdPayment, error, step, txHash, selectedTokenId } = state;
|
|
6655
6666
|
const tokenInfo = state.tokens.find((t) => t.id === selectedTokenId);
|
|
6656
6667
|
if (!createdPayment || !error) return;
|
|
@@ -6809,10 +6820,10 @@ var TokenSelector = ({
|
|
|
6809
6820
|
onSelect,
|
|
6810
6821
|
disabled = false
|
|
6811
6822
|
}) => {
|
|
6812
|
-
const [isOpen, setIsOpen] =
|
|
6813
|
-
const dropdownRef =
|
|
6823
|
+
const [isOpen, setIsOpen] = React15.useState(false);
|
|
6824
|
+
const dropdownRef = React15.useRef(null);
|
|
6814
6825
|
const selectedToken = tokens.find((t) => t.id === selectedTokenId);
|
|
6815
|
-
|
|
6826
|
+
React15.useEffect(() => {
|
|
6816
6827
|
const handleClickOutside = (event) => {
|
|
6817
6828
|
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
|
|
6818
6829
|
setIsOpen(false);
|
|
@@ -7349,9 +7360,9 @@ function PaymentExternalWalletView({
|
|
|
7349
7360
|
}) {
|
|
7350
7361
|
const { t } = useI18n();
|
|
7351
7362
|
const { isDetecting, getWalletsForDisplay, hasWallet } = react.useEIP6963();
|
|
7352
|
-
const wallets =
|
|
7353
|
-
const [isConnecting, setIsConnecting] =
|
|
7354
|
-
const [error, setError] =
|
|
7363
|
+
const wallets = React15.useMemo(() => getWalletsForDisplay(), [getWalletsForDisplay]);
|
|
7364
|
+
const [isConnecting, setIsConnecting] = React15.useState(false);
|
|
7365
|
+
const [error, setError] = React15.useState(null);
|
|
7355
7366
|
const connect = async (wallet) => {
|
|
7356
7367
|
setIsConnecting(true);
|
|
7357
7368
|
setError(null);
|
|
@@ -7454,8 +7465,23 @@ var PaymentModal = ({
|
|
|
7454
7465
|
const requiresVolrWallet = config.walletPolicy?.requireVolrWalletOnLogin ?? true;
|
|
7455
7466
|
const hasVolrWallet = Boolean(user?.evmAddress);
|
|
7456
7467
|
const externalWalletAllowed = allowExternalWalletPayment && !requiresVolrWallet;
|
|
7457
|
-
const
|
|
7468
|
+
const resolvedPermitType = selectedToken?.permitType ?? (selectedToken?.permitSupported ? "EIP2612" : "NONE");
|
|
7469
|
+
const externalWalletTokenSupported = selectedToken && selectedToken.address !== "native" && resolvedPermitType === "EIP2612";
|
|
7458
7470
|
const showExternalWalletOption = externalWalletAllowed && externalWalletTokenSupported;
|
|
7471
|
+
const permit2WarnedRef = React15__default.default.useRef(false);
|
|
7472
|
+
React15__default.default.useEffect(() => {
|
|
7473
|
+
if (!permit2WarnedRef.current && externalWalletAllowed && resolvedPermitType === "PERMIT2" && !selectedToken?.permit2Address) {
|
|
7474
|
+
console.warn(
|
|
7475
|
+
`[volr/react-ui] External wallet payment hidden: permit2Address is not configured for chain ${selectedToken?.chainId}.`
|
|
7476
|
+
);
|
|
7477
|
+
permit2WarnedRef.current = true;
|
|
7478
|
+
}
|
|
7479
|
+
}, [
|
|
7480
|
+
externalWalletAllowed,
|
|
7481
|
+
resolvedPermitType,
|
|
7482
|
+
selectedToken?.permit2Address,
|
|
7483
|
+
selectedToken?.chainId
|
|
7484
|
+
]);
|
|
7459
7485
|
if (showDeposit && selectedToken) {
|
|
7460
7486
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
7461
7487
|
DepositModal,
|
|
@@ -7557,19 +7583,19 @@ var PaymentModal = ({
|
|
|
7557
7583
|
)
|
|
7558
7584
|
] });
|
|
7559
7585
|
};
|
|
7560
|
-
var SignRequestContext =
|
|
7586
|
+
var SignRequestContext = React15.createContext(null);
|
|
7561
7587
|
function SignRequestProvider({ children }) {
|
|
7562
|
-
const [pendingRequest, setPendingRequest] =
|
|
7563
|
-
const resolveRef =
|
|
7564
|
-
const rejectRef =
|
|
7565
|
-
const requestSign =
|
|
7588
|
+
const [pendingRequest, setPendingRequest] = React15.useState(null);
|
|
7589
|
+
const resolveRef = React15.useRef(null);
|
|
7590
|
+
const rejectRef = React15.useRef(null);
|
|
7591
|
+
const requestSign = React15.useCallback((request) => {
|
|
7566
7592
|
return new Promise((resolve, reject2) => {
|
|
7567
7593
|
setPendingRequest(request);
|
|
7568
7594
|
resolveRef.current = resolve;
|
|
7569
7595
|
rejectRef.current = reject2;
|
|
7570
7596
|
});
|
|
7571
7597
|
}, []);
|
|
7572
|
-
const approve =
|
|
7598
|
+
const approve = React15.useCallback(() => {
|
|
7573
7599
|
if (resolveRef.current) {
|
|
7574
7600
|
resolveRef.current();
|
|
7575
7601
|
resolveRef.current = null;
|
|
@@ -7577,7 +7603,7 @@ function SignRequestProvider({ children }) {
|
|
|
7577
7603
|
}
|
|
7578
7604
|
setPendingRequest(null);
|
|
7579
7605
|
}, []);
|
|
7580
|
-
const reject =
|
|
7606
|
+
const reject = React15.useCallback(() => {
|
|
7581
7607
|
if (rejectRef.current) {
|
|
7582
7608
|
rejectRef.current(new Error("Sign request cancelled by user"));
|
|
7583
7609
|
resolveRef.current = null;
|
|
@@ -7599,7 +7625,7 @@ function SignRequestProvider({ children }) {
|
|
|
7599
7625
|
);
|
|
7600
7626
|
}
|
|
7601
7627
|
function useSignRequest() {
|
|
7602
|
-
const context =
|
|
7628
|
+
const context = React15.useContext(SignRequestContext);
|
|
7603
7629
|
if (!context) {
|
|
7604
7630
|
throw new Error("useSignRequest must be used within SignRequestProvider");
|
|
7605
7631
|
}
|
|
@@ -7608,7 +7634,7 @@ function useSignRequest() {
|
|
|
7608
7634
|
};
|
|
7609
7635
|
}
|
|
7610
7636
|
function useSignRequestInternal() {
|
|
7611
|
-
const context =
|
|
7637
|
+
const context = React15.useContext(SignRequestContext);
|
|
7612
7638
|
if (!context) {
|
|
7613
7639
|
throw new Error("useSignRequestInternal must be used within SignRequestProvider");
|
|
7614
7640
|
}
|
|
@@ -7643,7 +7669,7 @@ function MessageSignView({ message }) {
|
|
|
7643
7669
|
] });
|
|
7644
7670
|
}
|
|
7645
7671
|
function TypedDataSignView({ typedData }) {
|
|
7646
|
-
const [showRawData, setShowRawData] =
|
|
7672
|
+
const [showRawData, setShowRawData] = React15.useState(false);
|
|
7647
7673
|
const { domain, message } = typedData;
|
|
7648
7674
|
const appName = domain.name;
|
|
7649
7675
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:space-y-4", children: [
|
|
@@ -7789,12 +7815,12 @@ function SignRequestModal({ open, onOpenChange }) {
|
|
|
7789
7815
|
}
|
|
7790
7816
|
);
|
|
7791
7817
|
}
|
|
7792
|
-
var WalletRequiredContext =
|
|
7818
|
+
var WalletRequiredContext = React15.createContext(null);
|
|
7793
7819
|
function WalletRequiredProvider({ children }) {
|
|
7794
|
-
const [pendingRequest, setPendingRequest] =
|
|
7795
|
-
const resolveRef =
|
|
7796
|
-
const rejectRef =
|
|
7797
|
-
const requestWallet =
|
|
7820
|
+
const [pendingRequest, setPendingRequest] = React15.useState(null);
|
|
7821
|
+
const resolveRef = React15.useRef(null);
|
|
7822
|
+
const rejectRef = React15.useRef(null);
|
|
7823
|
+
const requestWallet = React15.useCallback(
|
|
7798
7824
|
(request) => {
|
|
7799
7825
|
return new Promise((resolve2, reject2) => {
|
|
7800
7826
|
setPendingRequest(request);
|
|
@@ -7804,7 +7830,7 @@ function WalletRequiredProvider({ children }) {
|
|
|
7804
7830
|
},
|
|
7805
7831
|
[]
|
|
7806
7832
|
);
|
|
7807
|
-
const resolve =
|
|
7833
|
+
const resolve = React15.useCallback((provider) => {
|
|
7808
7834
|
if (resolveRef.current) {
|
|
7809
7835
|
resolveRef.current(provider);
|
|
7810
7836
|
resolveRef.current = null;
|
|
@@ -7812,7 +7838,7 @@ function WalletRequiredProvider({ children }) {
|
|
|
7812
7838
|
}
|
|
7813
7839
|
setPendingRequest(null);
|
|
7814
7840
|
}, []);
|
|
7815
|
-
const reject =
|
|
7841
|
+
const reject = React15.useCallback((error) => {
|
|
7816
7842
|
if (rejectRef.current) {
|
|
7817
7843
|
rejectRef.current(error);
|
|
7818
7844
|
resolveRef.current = null;
|
|
@@ -7829,14 +7855,14 @@ function WalletRequiredProvider({ children }) {
|
|
|
7829
7855
|
);
|
|
7830
7856
|
}
|
|
7831
7857
|
function useWalletRequired() {
|
|
7832
|
-
const ctx =
|
|
7858
|
+
const ctx = React15.useContext(WalletRequiredContext);
|
|
7833
7859
|
if (!ctx) {
|
|
7834
7860
|
throw new Error("useWalletRequired must be used within WalletRequiredProvider");
|
|
7835
7861
|
}
|
|
7836
7862
|
return { requestWallet: ctx.requestWallet };
|
|
7837
7863
|
}
|
|
7838
7864
|
function useWalletRequiredInternal() {
|
|
7839
|
-
const ctx =
|
|
7865
|
+
const ctx = React15.useContext(WalletRequiredContext);
|
|
7840
7866
|
if (!ctx) {
|
|
7841
7867
|
throw new Error(
|
|
7842
7868
|
"useWalletRequiredInternal must be used within WalletRequiredProvider"
|
|
@@ -7849,17 +7875,17 @@ function WalletRequiredModal() {
|
|
|
7849
7875
|
const { pendingRequest, resolve, reject } = useWalletRequiredInternal();
|
|
7850
7876
|
const { user, provider } = react.useVolrContext();
|
|
7851
7877
|
const { keyStorageType } = useVolrUI();
|
|
7852
|
-
const [step, setStep] =
|
|
7853
|
-
const providerRef =
|
|
7854
|
-
|
|
7878
|
+
const [step, setStep] = React15.useState("notice");
|
|
7879
|
+
const providerRef = React15.useRef(provider);
|
|
7880
|
+
React15.useEffect(() => {
|
|
7855
7881
|
providerRef.current = provider;
|
|
7856
7882
|
}, [provider]);
|
|
7857
|
-
|
|
7883
|
+
React15.useEffect(() => {
|
|
7858
7884
|
if (pendingRequest) {
|
|
7859
7885
|
setStep("notice");
|
|
7860
7886
|
}
|
|
7861
7887
|
}, [pendingRequest]);
|
|
7862
|
-
const title =
|
|
7888
|
+
const title = React15.useMemo(() => {
|
|
7863
7889
|
if (!pendingRequest) return "";
|
|
7864
7890
|
if (pendingRequest.type === "transaction") return t("walletRequired.titleTx");
|
|
7865
7891
|
if (pendingRequest.type === "typedData") return t("walletRequired.titleTypedData");
|
|
@@ -7925,7 +7951,7 @@ function WalletRequiredModal() {
|
|
|
7925
7951
|
}
|
|
7926
7952
|
);
|
|
7927
7953
|
}
|
|
7928
|
-
var VolrUIContext =
|
|
7954
|
+
var VolrUIContext = React15__default.default.createContext(null);
|
|
7929
7955
|
function getCurrentRpId() {
|
|
7930
7956
|
if (typeof window === "undefined") return "localhost";
|
|
7931
7957
|
return window.location.hostname;
|
|
@@ -7938,14 +7964,14 @@ function isPasskeyDomainMismatch(user) {
|
|
|
7938
7964
|
return !registered.some((p) => p?.rpId === currentRpId);
|
|
7939
7965
|
}
|
|
7940
7966
|
var useVolrUI = () => {
|
|
7941
|
-
const context =
|
|
7967
|
+
const context = React15.useContext(VolrUIContext);
|
|
7942
7968
|
if (!context) {
|
|
7943
7969
|
throw new Error("useVolrUI must be used within VolrUIProvider");
|
|
7944
7970
|
}
|
|
7945
7971
|
return context;
|
|
7946
7972
|
};
|
|
7947
7973
|
var useVolrUIOptional = () => {
|
|
7948
|
-
return
|
|
7974
|
+
return React15.useContext(VolrUIContext);
|
|
7949
7975
|
};
|
|
7950
7976
|
function OnboardingFlow({
|
|
7951
7977
|
keyStorageType,
|
|
@@ -7994,10 +8020,10 @@ var VolrUIProvider = ({
|
|
|
7994
8020
|
const walletPolicy = config.walletPolicy ?? {
|
|
7995
8021
|
requireVolrWalletOnLogin: true
|
|
7996
8022
|
};
|
|
7997
|
-
const [keyStorageTypeError, setKeyStorageTypeError] =
|
|
8023
|
+
const [keyStorageTypeError, setKeyStorageTypeError] = React15.useState(
|
|
7998
8024
|
null
|
|
7999
8025
|
);
|
|
8000
|
-
|
|
8026
|
+
React15.useEffect(() => {
|
|
8001
8027
|
if (walletPolicy.requireVolrWalletOnLogin !== false && !keyStorageType) {
|
|
8002
8028
|
const errorMessage = "keyStorageType must be specified in VolrUIProvider props. Please set keyStorageType prop in VolrUIProvider.";
|
|
8003
8029
|
console.error(errorMessage);
|
|
@@ -8045,7 +8071,7 @@ function VolrUIProviderInner({
|
|
|
8045
8071
|
allowExternalWalletPayment,
|
|
8046
8072
|
children
|
|
8047
8073
|
}) {
|
|
8048
|
-
const [showOnboarding, setShowOnboarding] =
|
|
8074
|
+
const [showOnboarding, setShowOnboarding] = React15.useState(false);
|
|
8049
8075
|
const { requestSign } = useSignRequest();
|
|
8050
8076
|
const { requestWallet } = useWalletRequired();
|
|
8051
8077
|
const configWithSignRequest = {
|
|
@@ -8139,15 +8165,15 @@ function MigrationCoordinator({
|
|
|
8139
8165
|
}) {
|
|
8140
8166
|
const { user, setUser } = react.useVolrContext();
|
|
8141
8167
|
const { client } = react.useInternalAuth();
|
|
8142
|
-
const [running, setRunning] =
|
|
8143
|
-
const [isSourcePopup, setIsSourcePopup] =
|
|
8144
|
-
const [isTargetPopup, setIsTargetPopup] =
|
|
8145
|
-
const [sourceStep, setSourceStep] =
|
|
8146
|
-
const [targetStep, setTargetStep] =
|
|
8147
|
-
const [targetDomain, setTargetDomain] =
|
|
8148
|
-
const [sourceDomain, setSourceDomain] =
|
|
8149
|
-
const [errorMessage, setErrorMessage] =
|
|
8150
|
-
|
|
8168
|
+
const [running, setRunning] = React15.useState(false);
|
|
8169
|
+
const [isSourcePopup, setIsSourcePopup] = React15.useState(false);
|
|
8170
|
+
const [isTargetPopup, setIsTargetPopup] = React15.useState(false);
|
|
8171
|
+
const [sourceStep, setSourceStep] = React15.useState("ready");
|
|
8172
|
+
const [targetStep, setTargetStep] = React15.useState("ready");
|
|
8173
|
+
const [targetDomain, setTargetDomain] = React15.useState("");
|
|
8174
|
+
const [sourceDomain, setSourceDomain] = React15.useState("");
|
|
8175
|
+
const [errorMessage, setErrorMessage] = React15.useState();
|
|
8176
|
+
React15.useEffect(() => {
|
|
8151
8177
|
if (typeof window === "undefined") return;
|
|
8152
8178
|
const params = new URLSearchParams(window.location.search);
|
|
8153
8179
|
const migrationToken = params.get("migration_token");
|
|
@@ -8171,7 +8197,7 @@ function MigrationCoordinator({
|
|
|
8171
8197
|
}
|
|
8172
8198
|
}
|
|
8173
8199
|
}, []);
|
|
8174
|
-
|
|
8200
|
+
React15.useEffect(() => {
|
|
8175
8201
|
if (typeof window === "undefined") return;
|
|
8176
8202
|
const handler = (event) => {
|
|
8177
8203
|
const data = event.data;
|
|
@@ -8183,7 +8209,7 @@ function MigrationCoordinator({
|
|
|
8183
8209
|
window.addEventListener("message", handler);
|
|
8184
8210
|
return () => window.removeEventListener("message", handler);
|
|
8185
8211
|
}, [client, setUser, onHideOnboarding]);
|
|
8186
|
-
|
|
8212
|
+
React15.useEffect(() => {
|
|
8187
8213
|
if (typeof window === "undefined") return;
|
|
8188
8214
|
if (running) return;
|
|
8189
8215
|
const params = new URLSearchParams(window.location.search);
|
|
@@ -8328,9 +8354,9 @@ function MigrationCoordinator({
|
|
|
8328
8354
|
}
|
|
8329
8355
|
function AccountModalPortal() {
|
|
8330
8356
|
const { isOpen, mode, close } = useVolrModal();
|
|
8331
|
-
const [portalRoot, setPortalRoot] =
|
|
8332
|
-
const [error, setError] =
|
|
8333
|
-
|
|
8357
|
+
const [portalRoot, setPortalRoot] = React15.useState(null);
|
|
8358
|
+
const [error, setError] = React15.useState(null);
|
|
8359
|
+
React15.useEffect(() => {
|
|
8334
8360
|
if (typeof window === "undefined") return;
|
|
8335
8361
|
let root = document.getElementById("volr-modal-root");
|
|
8336
8362
|
if (!root) {
|
|
@@ -8389,9 +8415,9 @@ function AccountModalPortal() {
|
|
|
8389
8415
|
function DepositModalPortal() {
|
|
8390
8416
|
const { isOpen, mode, asset, close } = useVolrModal();
|
|
8391
8417
|
const { user } = react.useVolrContext();
|
|
8392
|
-
const [portalRoot, setPortalRoot] =
|
|
8393
|
-
const [showLogin, setShowLogin] =
|
|
8394
|
-
|
|
8418
|
+
const [portalRoot, setPortalRoot] = React15.useState(null);
|
|
8419
|
+
const [showLogin, setShowLogin] = React15.useState(false);
|
|
8420
|
+
React15.useEffect(() => {
|
|
8395
8421
|
if (typeof window === "undefined") return;
|
|
8396
8422
|
let root = document.getElementById("volr-modal-root");
|
|
8397
8423
|
if (!root) {
|
|
@@ -8406,7 +8432,7 @@ function DepositModalPortal() {
|
|
|
8406
8432
|
}
|
|
8407
8433
|
};
|
|
8408
8434
|
}, []);
|
|
8409
|
-
|
|
8435
|
+
React15.useEffect(() => {
|
|
8410
8436
|
if (isOpen && mode === "deposit" && !user) {
|
|
8411
8437
|
setShowLogin(true);
|
|
8412
8438
|
} else {
|
|
@@ -8440,8 +8466,8 @@ function DepositModalPortal() {
|
|
|
8440
8466
|
}
|
|
8441
8467
|
function PaymentModalPortal() {
|
|
8442
8468
|
const { isOpen, mode, close } = useVolrModal();
|
|
8443
|
-
const [portalRoot, setPortalRoot] =
|
|
8444
|
-
|
|
8469
|
+
const [portalRoot, setPortalRoot] = React15.useState(null);
|
|
8470
|
+
React15.useEffect(() => {
|
|
8445
8471
|
if (typeof window === "undefined") return;
|
|
8446
8472
|
let root = document.getElementById("volr-modal-root");
|
|
8447
8473
|
if (!root) {
|
|
@@ -8470,8 +8496,8 @@ function PaymentModalPortal() {
|
|
|
8470
8496
|
}
|
|
8471
8497
|
function SignRequestModalPortal() {
|
|
8472
8498
|
const { pendingRequest } = useSignRequestInternal();
|
|
8473
|
-
const [portalRoot, setPortalRoot] =
|
|
8474
|
-
|
|
8499
|
+
const [portalRoot, setPortalRoot] = React15.useState(null);
|
|
8500
|
+
React15.useEffect(() => {
|
|
8475
8501
|
if (typeof window === "undefined") return;
|
|
8476
8502
|
let root = document.getElementById("volr-modal-root");
|
|
8477
8503
|
if (!root) {
|
|
@@ -8503,8 +8529,8 @@ function OAuthCallbackHandler({
|
|
|
8503
8529
|
enforceSelection,
|
|
8504
8530
|
onShowOnboarding
|
|
8505
8531
|
}) {
|
|
8506
|
-
const [hasCode, setHasCode] =
|
|
8507
|
-
|
|
8532
|
+
const [hasCode, setHasCode] = React15.useState(false);
|
|
8533
|
+
React15.useEffect(() => {
|
|
8508
8534
|
if (typeof window === "undefined") return;
|
|
8509
8535
|
const params = new URLSearchParams(window.location.search);
|
|
8510
8536
|
const code = params.get("code");
|
|
@@ -8553,14 +8579,14 @@ function OnboardingChecker({
|
|
|
8553
8579
|
}) {
|
|
8554
8580
|
const { user, provider, isLoading } = react.useVolrContext();
|
|
8555
8581
|
const { isOpen: isModalOpen } = useVolrModal();
|
|
8556
|
-
const modalWasOpened =
|
|
8557
|
-
const pendingMismatchOnboarding =
|
|
8558
|
-
|
|
8582
|
+
const modalWasOpened = React15__default.default.useRef(false);
|
|
8583
|
+
const pendingMismatchOnboarding = React15__default.default.useRef(false);
|
|
8584
|
+
React15.useEffect(() => {
|
|
8559
8585
|
if (isModalOpen) {
|
|
8560
8586
|
modalWasOpened.current = true;
|
|
8561
8587
|
}
|
|
8562
8588
|
}, [isModalOpen]);
|
|
8563
|
-
|
|
8589
|
+
React15.useEffect(() => {
|
|
8564
8590
|
if (isLoading) {
|
|
8565
8591
|
return;
|
|
8566
8592
|
}
|
|
@@ -8614,7 +8640,7 @@ function OnboardingChecker({
|
|
|
8614
8640
|
}
|
|
8615
8641
|
function useSwitchNetwork() {
|
|
8616
8642
|
const { client } = react.useInternalAuth();
|
|
8617
|
-
return
|
|
8643
|
+
return React15.useCallback(
|
|
8618
8644
|
async (chainId) => {
|
|
8619
8645
|
if (typeof window === "undefined" || !window.ethereum) {
|
|
8620
8646
|
throw new Error("No wallet found");
|
|
@@ -8678,8 +8704,8 @@ var paymentPromiseResolver = null;
|
|
|
8678
8704
|
function useVolrPay() {
|
|
8679
8705
|
const { open: openModal, close: closeModal } = useVolrModal();
|
|
8680
8706
|
const { checkPayment, getPaymentHistory } = react.useVolrPaymentApi();
|
|
8681
|
-
const isInProgressRef =
|
|
8682
|
-
const pay =
|
|
8707
|
+
const isInProgressRef = React15.useRef(false);
|
|
8708
|
+
const pay = React15.useCallback(
|
|
8683
8709
|
(options) => {
|
|
8684
8710
|
isInProgressRef.current = true;
|
|
8685
8711
|
const waitPromise = new Promise((resolve, reject) => {
|