@volr/react-ui 0.1.61 → 0.1.62
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 +134 -98
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +49 -13
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var React10 = require('react');
|
|
4
4
|
var reactDom = require('react-dom');
|
|
5
5
|
var react = require('@volr/react');
|
|
6
6
|
var jsxRuntime = require('react/jsx-runtime');
|
|
@@ -9,7 +9,7 @@ var tailwindMerge = require('tailwind-merge');
|
|
|
9
9
|
|
|
10
10
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
11
11
|
|
|
12
|
-
var
|
|
12
|
+
var React10__default = /*#__PURE__*/_interopDefault(React10);
|
|
13
13
|
|
|
14
14
|
var __defProp = Object.defineProperty;
|
|
15
15
|
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
@@ -221,13 +221,13 @@ var translations = {
|
|
|
221
221
|
function getTranslations(locale = "en") {
|
|
222
222
|
return translations[locale] || translations.en;
|
|
223
223
|
}
|
|
224
|
-
var I18nContext =
|
|
224
|
+
var I18nContext = React10.createContext(null);
|
|
225
225
|
function interpolate(text, params) {
|
|
226
226
|
if (!params) return text;
|
|
227
227
|
return text.replace(/\{\{(\w+)\}\}/g, (_, key) => params[key] ?? `{{${key}}}`);
|
|
228
228
|
}
|
|
229
229
|
function useI18n() {
|
|
230
|
-
const context =
|
|
230
|
+
const context = React10.useContext(I18nContext);
|
|
231
231
|
if (!context) {
|
|
232
232
|
return {
|
|
233
233
|
locale: "en",
|
|
@@ -262,9 +262,9 @@ function detectLocale() {
|
|
|
262
262
|
return lang.startsWith("ko") ? "ko" : "en";
|
|
263
263
|
}
|
|
264
264
|
function I18nProvider({ children }) {
|
|
265
|
-
const [locale, setLocale] =
|
|
266
|
-
const translations2 =
|
|
267
|
-
const t =
|
|
265
|
+
const [locale, setLocale] = React10.useState(detectLocale());
|
|
266
|
+
const translations2 = React10.useMemo(() => getTranslations(locale), [locale]);
|
|
267
|
+
const t = React10.useMemo(() => {
|
|
268
268
|
return (key, params) => {
|
|
269
269
|
const keys = key.split(".");
|
|
270
270
|
let value2 = translations2;
|
|
@@ -281,7 +281,7 @@ function I18nProvider({ children }) {
|
|
|
281
281
|
return typeof value2 === "string" ? interpolate(value2, params) : key;
|
|
282
282
|
};
|
|
283
283
|
}, [translations2]);
|
|
284
|
-
const value =
|
|
284
|
+
const value = React10.useMemo(
|
|
285
285
|
() => ({
|
|
286
286
|
locale,
|
|
287
287
|
translations: translations2,
|
|
@@ -293,9 +293,9 @@ function I18nProvider({ children }) {
|
|
|
293
293
|
return /* @__PURE__ */ jsxRuntime.jsx(I18nContext.Provider, { value, children });
|
|
294
294
|
}
|
|
295
295
|
var useTranslation = useI18n;
|
|
296
|
-
var VolrModalContext =
|
|
296
|
+
var VolrModalContext = React10.createContext(null);
|
|
297
297
|
var useVolrModal = () => {
|
|
298
|
-
const context =
|
|
298
|
+
const context = React10.useContext(VolrModalContext);
|
|
299
299
|
if (!context) {
|
|
300
300
|
throw new Error("useVolrModal must be used within VolrUIProvider");
|
|
301
301
|
}
|
|
@@ -304,15 +304,15 @@ var useVolrModal = () => {
|
|
|
304
304
|
var VolrModalProvider = ({
|
|
305
305
|
children
|
|
306
306
|
}) => {
|
|
307
|
-
const [isOpen, setIsOpen] =
|
|
308
|
-
const [mode, setMode] =
|
|
309
|
-
const [asset, setAsset] =
|
|
310
|
-
const open =
|
|
307
|
+
const [isOpen, setIsOpen] = React10.useState(false);
|
|
308
|
+
const [mode, setMode] = React10.useState("account");
|
|
309
|
+
const [asset, setAsset] = React10.useState(null);
|
|
310
|
+
const open = React10.useCallback((options) => {
|
|
311
311
|
setMode(options?.mode ?? "account");
|
|
312
312
|
setAsset(options?.asset ?? null);
|
|
313
313
|
setIsOpen(true);
|
|
314
314
|
}, []);
|
|
315
|
-
const close =
|
|
315
|
+
const close = React10.useCallback(() => {
|
|
316
316
|
setIsOpen(false);
|
|
317
317
|
setAsset(null);
|
|
318
318
|
}, []);
|
|
@@ -325,11 +325,11 @@ function cn(...inputs) {
|
|
|
325
325
|
return twMerge(clsx.clsx(inputs));
|
|
326
326
|
}
|
|
327
327
|
function useMediaQuery(query) {
|
|
328
|
-
const [matches, setMatches] =
|
|
328
|
+
const [matches, setMatches] = React10.useState(() => {
|
|
329
329
|
if (typeof window === "undefined") return false;
|
|
330
330
|
return window.matchMedia(query).matches;
|
|
331
331
|
});
|
|
332
|
-
|
|
332
|
+
React10.useEffect(() => {
|
|
333
333
|
if (typeof window === "undefined") return;
|
|
334
334
|
const mql = window.matchMedia(query);
|
|
335
335
|
const handler = (event) => setMatches(event.matches);
|
|
@@ -343,8 +343,8 @@ function useMediaQuery(query) {
|
|
|
343
343
|
// src/generated/volr-sdk-css.ts
|
|
344
344
|
var VOLR_SDK_CSS = '/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--volr-tw-translate-x:0;--volr-tw-translate-y:0;--volr-tw-translate-z:0;--volr-tw-space-y-reverse:0;--volr-tw-border-style:solid;--volr-tw-gradient-position:initial;--volr-tw-gradient-from:#0000;--volr-tw-gradient-via:#0000;--volr-tw-gradient-to:#0000;--volr-tw-gradient-stops:initial;--volr-tw-gradient-via-stops:initial;--volr-tw-gradient-from-position:0%;--volr-tw-gradient-via-position:50%;--volr-tw-gradient-to-position:100%;--volr-tw-leading:initial;--volr-tw-font-weight:initial;--volr-tw-shadow:0 0 #0000;--volr-tw-shadow-color:initial;--volr-tw-shadow-alpha:100%;--volr-tw-inset-shadow:0 0 #0000;--volr-tw-inset-shadow-color:initial;--volr-tw-inset-shadow-alpha:100%;--volr-tw-ring-color:initial;--volr-tw-ring-shadow:0 0 #0000;--volr-tw-inset-ring-color:initial;--volr-tw-inset-ring-shadow:0 0 #0000;--volr-tw-ring-inset:initial;--volr-tw-ring-offset-width:0px;--volr-tw-ring-offset-color:#fff;--volr-tw-ring-offset-shadow:0 0 #0000;--volr-tw-blur:initial;--volr-tw-brightness:initial;--volr-tw-contrast:initial;--volr-tw-grayscale:initial;--volr-tw-hue-rotate:initial;--volr-tw-invert:initial;--volr-tw-opacity:initial;--volr-tw-saturate:initial;--volr-tw-sepia:initial;--volr-tw-drop-shadow:initial;--volr-tw-drop-shadow-color:initial;--volr-tw-drop-shadow-alpha:100%;--volr-tw-drop-shadow-size:initial;--volr-tw-duration:initial;--volr-tw-ease:initial}}}@layer theme{:root,:host{--volr-font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--volr-font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--volr-color-red-50:oklch(97.1% .013 17.38);--volr-color-red-200:oklch(88.5% .062 18.334);--volr-color-red-500:oklch(63.7% .237 25.331);--volr-color-red-600:oklch(57.7% .245 27.325);--volr-color-red-700:oklch(50.5% .213 27.518);--volr-color-green-600:oklch(62.7% .194 149.214);--volr-color-emerald-300:oklch(84.5% .143 164.978);--volr-color-emerald-400:oklch(76.5% .177 163.223);--volr-color-emerald-500:oklch(69.6% .17 162.48);--volr-color-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-rose-50:oklch(96.9% .015 12.422);--volr-color-rose-200:oklch(89.2% .058 10.001);--volr-color-rose-700:oklch(51.4% .222 16.935);--volr-color-rose-800:oklch(45.5% .188 13.697);--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-900:oklch(20.8% .042 265.755);--volr-color-gray-500:oklch(55.1% .027 264.364);--volr-color-black:#000;--volr-color-white:#fff;--volr-spacing:.25rem;--volr-container-md:28rem;--volr-container-4xl:56rem;--volr-text-xs:.75rem;--volr-text-xs--line-height:calc(1/.75);--volr-text-sm:.875rem;--volr-text-sm--line-height:calc(1.25/.875);--volr-text-base:1rem;--volr-text-base--line-height:calc(1.5/1);--volr-text-lg:1.125rem;--volr-text-lg--line-height:calc(1.75/1.125);--volr-text-xl:1.25rem;--volr-text-xl--line-height:calc(1.75/1.25);--volr-text-2xl:1.5rem;--volr-text-2xl--line-height:calc(2/1.5);--volr-text-8xl:6rem;--volr-text-8xl--line-height:1;--volr-font-weight-medium:500;--volr-font-weight-semibold:600;--volr-font-weight-bold:700;--volr-leading-relaxed:1.625;--volr-radius-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-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)}*,:before,:after{box-sizing:border-box}*{font-family:var(--volr-font-family)}button,input,select,textarea{color:inherit;background-color:#0000}button{cursor:pointer;background-color:#0000}input::placeholder{color:#94a3b8}h1,h2,h3{color:#0f172a;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);border-width:1px;border-color:var(--volr-color-slate-300);background-color:var(--volr-color-white);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);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-color-slate-400);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{color:#475569;background-color:#f1f5f9}.volr-dialog-close:focus-visible{outline:none;box-shadow:0 0 0 2px #94a3b8b3}.volr-dialog-close-icon{height:calc(var(--volr-spacing)*4);width:calc(var(--volr-spacing)*4)}.volr-email-input{width:100%;color:inherit;background-color:#fff;border:1px solid #cbd5e1;border-radius:.5rem;outline:none;padding:.75rem .75rem .75rem 2.75rem;font-size:1rem;line-height:1.5}.volr-email-input::placeholder{color:#94a3b8}.volr-email-input:focus{border-color:#cbd5e1;box-shadow:0 0 0 2px #94a3b8b3}.volr-option-button{cursor:pointer;background-color:#fff;border:1px solid #e2e8f0;border-radius:.5rem;align-items:center;gap:.75rem;width:100%;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:#f8fafc;border-color:#e2e8f0}.volr-option-button:focus-visible{outline:none;box-shadow:0 0 0 2px #94a3b8b3}}@layer utilities{.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\\: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\\:my-8{margin-block:calc(var(--volr-spacing)*8)}.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\\:flex{display:flex}.volr\\:grid{display:grid}.volr\\:inline-block{display:inline-block}.volr\\:inline-flex{display:inline-flex}.volr\\:h-1\\.5{height:calc(var(--volr-spacing)*1.5)}.volr\\:h-2{height:calc(var(--volr-spacing)*2)}.volr\\:h-8{height:calc(var(--volr-spacing)*8)}.volr\\:h-10{height:calc(var(--volr-spacing)*10)}.volr\\:h-14{height:calc(var(--volr-spacing)*14)}.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-full{height:100%}.volr\\:h-px{height:1px}.volr\\:max-h-24{max-height:calc(var(--volr-spacing)*24)}.volr\\:max-h-96{max-height:calc(var(--volr-spacing)*96)}.volr\\:max-h-\\[85vh\\]{max-height:85vh}.volr\\:max-h-\\[90vh\\]{max-height:90vh}.volr\\:min-h-\\[120px\\]{min-height:120px}.volr\\:w-1\\.5{width:calc(var(--volr-spacing)*1.5)}.volr\\:w-2{width:calc(var(--volr-spacing)*2)}.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-24{width:calc(var(--volr-spacing)*24)}.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-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{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\\:animate-\\[volrFadeIn_0\\.2s_ease-out\\]{animation:.2s ease-out volrFadeIn}.volr\\:animate-pulse{animation:var(--volr-animate-pulse)}.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-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)))}.volr\\:truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.volr\\:overflow-hidden{overflow:hidden}.volr\\:overflow-visible{overflow:visible}.volr\\:overflow-y-auto{overflow-y:auto}.volr\\:rounded-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-xl{border-radius:var(--volr-radius-xl)}.volr\\:rounded-t-3xl{border-top-left-radius:var(--volr-radius-3xl);border-top-right-radius:var(--volr-radius-3xl)}.volr\\:border{border-style:var(--volr-tw-border-style);border-width:1px}.volr\\:border-2{border-style:var(--volr-tw-border-style);border-width:2px}.volr\\:border-4{border-style:var(--volr-tw-border-style);border-width:4px}.volr\\:border-t{border-top-style:var(--volr-tw-border-style);border-top-width:1px}.volr\\:border-red-200{border-color:var(--volr-color-red-200)}.volr\\:border-rose-200{border-color:var(--volr-color-rose-200)}.volr\\:border-slate-100{border-color:var(--volr-color-slate-100)}.volr\\:border-slate-200,.volr\\:border-slate-200\\/50{border-color:var(--volr-color-slate-200)}@supports (color:color-mix(in lab, red, red)){.volr\\:border-slate-200\\/50{border-color:color-mix(in oklab,var(--volr-color-slate-200)50%,transparent)}}.volr\\:border-slate-300{border-color:var(--volr-color-slate-300)}.volr\\:border-white{border-color:var(--volr-color-white)}.volr\\:bg-black\\/45{background-color:var(--volr-color-black)}@supports (color:color-mix(in lab, red, red)){.volr\\:bg-black\\/45{background-color:color-mix(in oklab,var(--volr-color-black)45%,transparent)}}.volr\\:bg-cyan-400{background-color:var(--volr-color-cyan-400)}.volr\\:bg-emerald-300{background-color:var(--volr-color-emerald-300)}.volr\\:bg-emerald-400{background-color:var(--volr-color-emerald-400)}.volr\\:bg-red-50{background-color:var(--volr-color-red-50)}.volr\\:bg-rose-50{background-color:var(--volr-color-rose-50)}.volr\\:bg-slate-50,.volr\\:bg-slate-50\\/50{background-color:var(--volr-color-slate-50)}@supports (color:color-mix(in lab, red, red)){.volr\\:bg-slate-50\\/50{background-color:color-mix(in oklab,var(--volr-color-slate-50)50%,transparent)}}.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-500{background-color:var(--volr-color-slate-500)}.volr\\:bg-slate-700{background-color:var(--volr-color-slate-700)}.volr\\:bg-teal-400{background-color:var(--volr-color-teal-400)}.volr\\:bg-white{background-color:var(--volr-color-white)}.volr\\:bg-gradient-to-br{--volr-tw-gradient-position:to bottom right in oklab;background-image:linear-gradient(var(--volr-tw-gradient-stops))}.volr\\:from-emerald-400{--volr-tw-gradient-from:var(--volr-color-emerald-400);--volr-tw-gradient-stops:var(--volr-tw-gradient-via-stops,var(--volr-tw-gradient-position),var(--volr-tw-gradient-from)var(--volr-tw-gradient-from-position),var(--volr-tw-gradient-to)var(--volr-tw-gradient-to-position))}.volr\\:from-emerald-500{--volr-tw-gradient-from:var(--volr-color-emerald-500);--volr-tw-gradient-stops:var(--volr-tw-gradient-via-stops,var(--volr-tw-gradient-position),var(--volr-tw-gradient-from)var(--volr-tw-gradient-from-position),var(--volr-tw-gradient-to)var(--volr-tw-gradient-to-position))}.volr\\:to-teal-500{--volr-tw-gradient-to:var(--volr-color-teal-500);--volr-tw-gradient-stops:var(--volr-tw-gradient-via-stops,var(--volr-tw-gradient-position),var(--volr-tw-gradient-from)var(--volr-tw-gradient-from-position),var(--volr-tw-gradient-to)var(--volr-tw-gradient-to-position))}.volr\\:fill-slate-500{fill:var(--volr-color-slate-500)}.volr\\:p-1{padding:calc(var(--volr-spacing)*1)}.volr\\:p-2{padding:calc(var(--volr-spacing)*2)}.volr\\:p-3{padding:calc(var(--volr-spacing)*3)}.volr\\:p-4{padding:calc(var(--volr-spacing)*4)}.volr\\:p-5{padding:calc(var(--volr-spacing)*5)}.volr\\:p-8{padding:calc(var(--volr-spacing)*8)}.volr\\:px-2{padding-inline:calc(var(--volr-spacing)*2)}.volr\\:px-3{padding-inline:calc(var(--volr-spacing)*3)}.volr\\:px-4{padding-inline:calc(var(--volr-spacing)*4)}.volr\\:py-0\\.5{padding-block:calc(var(--volr-spacing)*.5)}.volr\\:py-1\\.5{padding-block:calc(var(--volr-spacing)*1.5)}.volr\\:py-2{padding-block:calc(var(--volr-spacing)*2)}.volr\\:py-3{padding-block:calc(var(--volr-spacing)*3)}.volr\\:py-6{padding-block:calc(var(--volr-spacing)*6)}.volr\\:py-8{padding-block:calc(var(--volr-spacing)*8)}.volr\\:py-12{padding-block:calc(var(--volr-spacing)*12)}.volr\\:pt-3{padding-top:calc(var(--volr-spacing)*3)}.volr\\:pt-4{padding-top:calc(var(--volr-spacing)*4)}.volr\\:text-center{text-align:center}.volr\\:text-left{text-align:left}.volr\\:font-mono{font-family:var(--volr-font-mono)}.volr\\:text-2xl{font-size:var(--volr-text-2xl);line-height:var(--volr-tw-leading,var(--volr-text-2xl--line-height))}.volr\\:text-8xl{font-size:var(--volr-text-8xl);line-height:var(--volr-tw-leading,var(--volr-text-8xl--line-height))}.volr\\:text-base{font-size:var(--volr-text-base);line-height:var(--volr-tw-leading,var(--volr-text-base--line-height))}.volr\\:text-lg{font-size:var(--volr-text-lg);line-height:var(--volr-tw-leading,var(--volr-text-lg--line-height))}.volr\\:text-sm{font-size:var(--volr-text-sm);line-height:var(--volr-tw-leading,var(--volr-text-sm--line-height))}.volr\\:text-xl{font-size:var(--volr-text-xl);line-height:var(--volr-tw-leading,var(--volr-text-xl--line-height))}.volr\\:text-xs{font-size:var(--volr-text-xs);line-height:var(--volr-tw-leading,var(--volr-text-xs--line-height))}.volr\\:leading-relaxed{--volr-tw-leading:var(--volr-leading-relaxed);line-height:var(--volr-leading-relaxed)}.volr\\:font-bold{--volr-tw-font-weight:var(--volr-font-weight-bold);font-weight:var(--volr-font-weight-bold)}.volr\\:font-medium{--volr-tw-font-weight:var(--volr-font-weight-medium);font-weight:var(--volr-font-weight-medium)}.volr\\:font-semibold{--volr-tw-font-weight:var(--volr-font-weight-semibold);font-weight:var(--volr-font-weight-semibold)}.volr\\:break-all{word-break:break-all}.volr\\:text-gray-500{color:var(--volr-color-gray-500)}.volr\\:text-green-600{color:var(--volr-color-green-600)}.volr\\:text-red-500{color:var(--volr-color-red-500)}.volr\\:text-red-600{color:var(--volr-color-red-600)}.volr\\:text-red-700{color:var(--volr-color-red-700)}.volr\\:text-rose-700{color:var(--volr-color-rose-700)}.volr\\:text-rose-800{color:var(--volr-color-rose-800)}.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-900{color:var(--volr-color-slate-900)}.volr\\:text-white{color:var(--volr-color-white)}.volr\\:capitalize{text-transform:capitalize}.volr\\:underline{text-decoration-line:underline}.volr\\:opacity-0{opacity:0}.volr\\:opacity-30{opacity:.3}.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\\: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-200:hover{border-color:var(--volr-color-slate-200)}.volr\\:hover\\:bg-slate-50:hover{background-color:var(--volr-color-slate-50)}}.volr\\:disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.volr\\:disabled\\:bg-slate-50:disabled{background-color:var(--volr-color-slate-50)}.volr-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}}@property --volr-tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --volr-tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --volr-tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --volr-tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --volr-tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --volr-tw-gradient-position{syntax:"*";inherits:false}@property --volr-tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --volr-tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --volr-tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --volr-tw-gradient-stops{syntax:"*";inherits:false}@property --volr-tw-gradient-via-stops{syntax:"*";inherits:false}@property --volr-tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --volr-tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --volr-tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --volr-tw-leading{syntax:"*";inherits:false}@property --volr-tw-font-weight{syntax:"*";inherits:false}@property --volr-tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --volr-tw-shadow-color{syntax:"*";inherits:false}@property --volr-tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --volr-tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --volr-tw-inset-shadow-color{syntax:"*";inherits:false}@property --volr-tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --volr-tw-ring-color{syntax:"*";inherits:false}@property --volr-tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --volr-tw-inset-ring-color{syntax:"*";inherits:false}@property --volr-tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --volr-tw-ring-inset{syntax:"*";inherits:false}@property --volr-tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --volr-tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --volr-tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --volr-tw-blur{syntax:"*";inherits:false}@property --volr-tw-brightness{syntax:"*";inherits:false}@property --volr-tw-contrast{syntax:"*";inherits:false}@property --volr-tw-grayscale{syntax:"*";inherits:false}@property --volr-tw-hue-rotate{syntax:"*";inherits:false}@property --volr-tw-invert{syntax:"*";inherits:false}@property --volr-tw-opacity{syntax:"*";inherits:false}@property --volr-tw-saturate{syntax:"*";inherits:false}@property --volr-tw-sepia{syntax:"*";inherits:false}@property --volr-tw-drop-shadow{syntax:"*";inherits:false}@property --volr-tw-drop-shadow-color{syntax:"*";inherits:false}@property --volr-tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --volr-tw-drop-shadow-size{syntax:"*";inherits:false}@property --volr-tw-duration{syntax:"*";inherits:false}@property --volr-tw-ease{syntax:"*";inherits:false}@keyframes pulse{50%{opacity:.5}}';
|
|
345
345
|
function ShadowPortal({ children }) {
|
|
346
|
-
const [mountNode, setMountNode] =
|
|
347
|
-
|
|
346
|
+
const [mountNode, setMountNode] = React10.useState(null);
|
|
347
|
+
React10.useEffect(() => {
|
|
348
348
|
const host = document.createElement("div");
|
|
349
349
|
host.id = "volr-shadow-portal";
|
|
350
350
|
host.style.position = "fixed";
|
|
@@ -370,7 +370,7 @@ function ShadowPortal({ children }) {
|
|
|
370
370
|
return reactDom.createPortal(children, mountNode);
|
|
371
371
|
}
|
|
372
372
|
function useFocusTrap(isActive, containerRef) {
|
|
373
|
-
const previousActiveElement =
|
|
373
|
+
const previousActiveElement = React10.useRef(null);
|
|
374
374
|
const focusableSelector = [
|
|
375
375
|
"button:not([disabled])",
|
|
376
376
|
"input:not([disabled])",
|
|
@@ -379,7 +379,7 @@ function useFocusTrap(isActive, containerRef) {
|
|
|
379
379
|
"a[href]",
|
|
380
380
|
'[tabindex]:not([tabindex="-1"])'
|
|
381
381
|
].join(", ");
|
|
382
|
-
const getFocusableElements =
|
|
382
|
+
const getFocusableElements = React10.useCallback(() => {
|
|
383
383
|
if (!containerRef.current) return [];
|
|
384
384
|
return Array.from(
|
|
385
385
|
containerRef.current.querySelectorAll(focusableSelector)
|
|
@@ -387,7 +387,7 @@ function useFocusTrap(isActive, containerRef) {
|
|
|
387
387
|
return el.offsetParent !== null;
|
|
388
388
|
});
|
|
389
389
|
}, [containerRef, focusableSelector]);
|
|
390
|
-
const handleKeyDown =
|
|
390
|
+
const handleKeyDown = React10.useCallback(
|
|
391
391
|
(event) => {
|
|
392
392
|
if (event.key !== "Tab") return;
|
|
393
393
|
const focusableElements = getFocusableElements();
|
|
@@ -408,7 +408,7 @@ function useFocusTrap(isActive, containerRef) {
|
|
|
408
408
|
},
|
|
409
409
|
[getFocusableElements]
|
|
410
410
|
);
|
|
411
|
-
|
|
411
|
+
React10.useEffect(() => {
|
|
412
412
|
if (!isActive) return;
|
|
413
413
|
previousActiveElement.current = document.activeElement;
|
|
414
414
|
const focusableElements = getFocusableElements();
|
|
@@ -439,10 +439,10 @@ var Modal = ({
|
|
|
439
439
|
}) => {
|
|
440
440
|
const isMobile = useMediaQuery("(max-width: 500px)");
|
|
441
441
|
const variant = explicitVariant ?? (isMobile ? "bottom-sheet" : "centered");
|
|
442
|
-
const dialogRef =
|
|
443
|
-
const dialogId =
|
|
442
|
+
const dialogRef = React10.useRef(null);
|
|
443
|
+
const dialogId = React10.useId();
|
|
444
444
|
useFocusTrap(open, dialogRef);
|
|
445
|
-
|
|
445
|
+
React10.useEffect(() => {
|
|
446
446
|
const handleEscape = (e) => {
|
|
447
447
|
if (e.key === "Escape" && open) {
|
|
448
448
|
if (onEscapeKeyDown) {
|
|
@@ -851,7 +851,7 @@ var variantMap = {
|
|
|
851
851
|
ghost: { backgroundColor: "transparent", color: "#475569", border: "none" },
|
|
852
852
|
outline: { backgroundColor: "transparent", color: "#475569", border: "1px solid #e2e8f0" }
|
|
853
853
|
};
|
|
854
|
-
var Button =
|
|
854
|
+
var Button = React10__default.default.forwardRef(
|
|
855
855
|
({ variant = "primary", size = "md", fullWidth, className, style, disabled, children, ...props }, ref) => {
|
|
856
856
|
const { accentColor } = useVolrUI();
|
|
857
857
|
const sizeStyle = sizeMap[size];
|
|
@@ -959,12 +959,12 @@ function PasskeyEnrollView({
|
|
|
959
959
|
isEnrolling,
|
|
960
960
|
error: enrollmentError
|
|
961
961
|
} = react.usePasskeyEnrollment();
|
|
962
|
-
const [hasStarted, setHasStarted] =
|
|
963
|
-
const [errorMessage, setErrorMessage] =
|
|
964
|
-
const [isRefreshing, setIsRefreshing] =
|
|
962
|
+
const [hasStarted, setHasStarted] = React10.useState(false);
|
|
963
|
+
const [errorMessage, setErrorMessage] = React10.useState(null);
|
|
964
|
+
const [isRefreshing, setIsRefreshing] = React10.useState(false);
|
|
965
965
|
const biometricType = getBiometricType();
|
|
966
966
|
const hasPasskey = user?.keyStorageType === "passkey";
|
|
967
|
-
|
|
967
|
+
React10.useEffect(() => {
|
|
968
968
|
console.log("[PasskeyEnrollView] User state:", {
|
|
969
969
|
user,
|
|
970
970
|
keyStorageType: user?.keyStorageType,
|
|
@@ -972,7 +972,7 @@ function PasskeyEnrollView({
|
|
|
972
972
|
hasPasskey
|
|
973
973
|
});
|
|
974
974
|
}, [user, hasPasskey]);
|
|
975
|
-
|
|
975
|
+
React10.useEffect(() => {
|
|
976
976
|
if (hasPasskey && !user?.evmAddress && !isRefreshing) {
|
|
977
977
|
const refreshUserData = async () => {
|
|
978
978
|
try {
|
|
@@ -1003,7 +1003,7 @@ function PasskeyEnrollView({
|
|
|
1003
1003
|
refreshUserData();
|
|
1004
1004
|
}
|
|
1005
1005
|
}, [hasPasskey, user?.evmAddress, isRefreshing, client, setUser, user]);
|
|
1006
|
-
|
|
1006
|
+
React10.useEffect(() => {
|
|
1007
1007
|
if (!user?.id) {
|
|
1008
1008
|
const error = new Error("User ID is required for passkey enrollment");
|
|
1009
1009
|
setErrorMessage(getUserFriendlyError(error, t));
|
|
@@ -1019,7 +1019,7 @@ function PasskeyEnrollView({
|
|
|
1019
1019
|
}
|
|
1020
1020
|
}
|
|
1021
1021
|
}, [user, onError, t]);
|
|
1022
|
-
|
|
1022
|
+
React10.useEffect(() => {
|
|
1023
1023
|
if (enrollmentError) {
|
|
1024
1024
|
const friendlyMessage = getUserFriendlyError(enrollmentError, t);
|
|
1025
1025
|
setErrorMessage(friendlyMessage);
|
|
@@ -1173,8 +1173,8 @@ function MpcConnectView({
|
|
|
1173
1173
|
isConnecting,
|
|
1174
1174
|
error: connectionError
|
|
1175
1175
|
} = react.useMpcConnection();
|
|
1176
|
-
const [errorMessage, setErrorMessage] =
|
|
1177
|
-
|
|
1176
|
+
const [errorMessage, setErrorMessage] = React10.useState(null);
|
|
1177
|
+
React10.useEffect(() => {
|
|
1178
1178
|
if (connectionError) {
|
|
1179
1179
|
setErrorMessage(connectionError.message);
|
|
1180
1180
|
if (onError) {
|
|
@@ -1182,7 +1182,7 @@ function MpcConnectView({
|
|
|
1182
1182
|
}
|
|
1183
1183
|
}
|
|
1184
1184
|
}, [connectionError, onError]);
|
|
1185
|
-
|
|
1185
|
+
React10.useEffect(() => {
|
|
1186
1186
|
handleConnect();
|
|
1187
1187
|
}, []);
|
|
1188
1188
|
const handleConnect = async () => {
|
|
@@ -1243,7 +1243,7 @@ function MpcConnectView({
|
|
|
1243
1243
|
);
|
|
1244
1244
|
}
|
|
1245
1245
|
var CopyButton = ({ text, className, onCopy }) => {
|
|
1246
|
-
const [copied, setCopied] =
|
|
1246
|
+
const [copied, setCopied] = React10.useState(false);
|
|
1247
1247
|
const handleCopy = async () => {
|
|
1248
1248
|
try {
|
|
1249
1249
|
await navigator.clipboard.writeText(text);
|
|
@@ -1475,9 +1475,9 @@ var EmailIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
|
1475
1475
|
);
|
|
1476
1476
|
function EmailInlineInput({ onSubmit, accentColor }) {
|
|
1477
1477
|
const { t } = useI18n();
|
|
1478
|
-
const [email, setEmail] =
|
|
1479
|
-
const [error, setError] =
|
|
1480
|
-
const [isLoading, setIsLoading] =
|
|
1478
|
+
const [email, setEmail] = React10.useState("");
|
|
1479
|
+
const [error, setError] = React10.useState(null);
|
|
1480
|
+
const [isLoading, setIsLoading] = React10.useState(false);
|
|
1481
1481
|
const handleSubmit = async (e) => {
|
|
1482
1482
|
e.preventDefault();
|
|
1483
1483
|
setError(null);
|
|
@@ -1600,14 +1600,14 @@ function SigninSelectScreen({
|
|
|
1600
1600
|
function CodeInputScreen({ email, onSubmit, onResend }) {
|
|
1601
1601
|
const { t } = useI18n();
|
|
1602
1602
|
const { accentColor } = useVolrUI();
|
|
1603
|
-
const [digits, setDigits] =
|
|
1604
|
-
const [error, setError] =
|
|
1605
|
-
const [isLoading, setIsLoading] =
|
|
1606
|
-
const inputRefs =
|
|
1607
|
-
|
|
1603
|
+
const [digits, setDigits] = React10.useState(Array(6).fill(""));
|
|
1604
|
+
const [error, setError] = React10.useState(null);
|
|
1605
|
+
const [isLoading, setIsLoading] = React10.useState(false);
|
|
1606
|
+
const inputRefs = React10.useRef([]);
|
|
1607
|
+
React10.useEffect(() => {
|
|
1608
1608
|
inputRefs.current[0]?.focus();
|
|
1609
1609
|
}, []);
|
|
1610
|
-
|
|
1610
|
+
React10.useEffect(() => {
|
|
1611
1611
|
const code = digits.join("");
|
|
1612
1612
|
if (code.length === 6 && !isLoading) {
|
|
1613
1613
|
handleSubmit(code);
|
|
@@ -2029,11 +2029,11 @@ function SiweLoginScreen({
|
|
|
2029
2029
|
}) {
|
|
2030
2030
|
const { t } = useI18n();
|
|
2031
2031
|
const { requestSiweNonce, verifySiweSignature } = react.useVolrLogin();
|
|
2032
|
-
const [isLoading, setIsLoading] =
|
|
2033
|
-
const [step, setStep] =
|
|
2034
|
-
const [account, setAccount] =
|
|
2035
|
-
const [error, setError] =
|
|
2036
|
-
const [walletConnector, setWalletConnector] =
|
|
2032
|
+
const [isLoading, setIsLoading] = React10.useState(false);
|
|
2033
|
+
const [step, setStep] = React10.useState("connect");
|
|
2034
|
+
const [account, setAccount] = React10.useState(null);
|
|
2035
|
+
const [error, setError] = React10.useState(null);
|
|
2036
|
+
const [walletConnector, setWalletConnector] = React10.useState(
|
|
2037
2037
|
void 0
|
|
2038
2038
|
);
|
|
2039
2039
|
const detectWalletConnector = () => {
|
|
@@ -2052,7 +2052,7 @@ function SiweLoginScreen({
|
|
|
2052
2052
|
if (provider.isBraveWallet) return "com.brave.wallet";
|
|
2053
2053
|
return "unknown";
|
|
2054
2054
|
};
|
|
2055
|
-
|
|
2055
|
+
React10.useEffect(() => {
|
|
2056
2056
|
if (typeof window !== "undefined" && window.ethereum) {
|
|
2057
2057
|
window.ethereum.request({ method: "eth_accounts" }).then((accounts) => {
|
|
2058
2058
|
if (accounts.length > 0) {
|
|
@@ -2203,13 +2203,13 @@ function SigninModal({ isOpen, onClose, onError }) {
|
|
|
2203
2203
|
const { logout, user } = react.useVolrContext();
|
|
2204
2204
|
const { appName, branding } = useVolrUI();
|
|
2205
2205
|
const { requestEmailCode, verifyEmailCode, handleSocialLogin } = react.useVolrLogin();
|
|
2206
|
-
const [currentScreen, setCurrentScreen] =
|
|
2207
|
-
const [email, setEmail] =
|
|
2206
|
+
const [currentScreen, setCurrentScreen] = React10.useState("method-select");
|
|
2207
|
+
const [email, setEmail] = React10.useState("");
|
|
2208
2208
|
const hasPasskey = user?.keyStorageType === "passkey";
|
|
2209
2209
|
const isMobile = useMediaQuery("(max-width: 500px)");
|
|
2210
2210
|
const isWideViewport = useMediaQuery("(min-width: 864px)");
|
|
2211
2211
|
const shouldUseWideLayout = !isMobile && isWideViewport && Boolean(branding) && currentScreen === "method-select";
|
|
2212
|
-
|
|
2212
|
+
React10.useEffect(() => {
|
|
2213
2213
|
if (!isOpen) {
|
|
2214
2214
|
setCurrentScreen("method-select");
|
|
2215
2215
|
setEmail("");
|
|
@@ -2238,12 +2238,8 @@ function SigninModal({ isOpen, onClose, onError }) {
|
|
|
2238
2238
|
}
|
|
2239
2239
|
setCurrentScreen("passkey-setup");
|
|
2240
2240
|
};
|
|
2241
|
-
const handleSiweSuccess = (
|
|
2242
|
-
|
|
2243
|
-
onClose();
|
|
2244
|
-
return;
|
|
2245
|
-
}
|
|
2246
|
-
setCurrentScreen("passkey-setup");
|
|
2241
|
+
const handleSiweSuccess = (_data) => {
|
|
2242
|
+
onClose();
|
|
2247
2243
|
};
|
|
2248
2244
|
const handlePasskeyComplete = () => {
|
|
2249
2245
|
onClose();
|
|
@@ -2370,10 +2366,40 @@ function SigninModal({ isOpen, onClose, onError }) {
|
|
|
2370
2366
|
function AccountModal({ isOpen, onClose, onError }) {
|
|
2371
2367
|
const { user, logout } = react.useVolrContext();
|
|
2372
2368
|
const { t } = useI18n();
|
|
2373
|
-
const [isLoggingOut, setIsLoggingOut] =
|
|
2369
|
+
const [isLoggingOut, setIsLoggingOut] = React10.useState(false);
|
|
2374
2370
|
if (!user) {
|
|
2375
2371
|
return /* @__PURE__ */ jsxRuntime.jsx(SigninModal, { isOpen, onClose, onError });
|
|
2376
2372
|
}
|
|
2373
|
+
if (!user.keyStorageType) {
|
|
2374
|
+
const handlePasskeyComplete = () => {
|
|
2375
|
+
onClose();
|
|
2376
|
+
};
|
|
2377
|
+
const handlePasskeyError = (error) => {
|
|
2378
|
+
if (onError) {
|
|
2379
|
+
onError(error);
|
|
2380
|
+
}
|
|
2381
|
+
};
|
|
2382
|
+
const handleLogout2 = async () => {
|
|
2383
|
+
try {
|
|
2384
|
+
await logout();
|
|
2385
|
+
onClose();
|
|
2386
|
+
} catch (error) {
|
|
2387
|
+
if (onError) {
|
|
2388
|
+
onError(error instanceof Error ? error : new Error("Logout failed"));
|
|
2389
|
+
}
|
|
2390
|
+
}
|
|
2391
|
+
};
|
|
2392
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Modal, { open: isOpen, onOpenChange: (open) => !open && onClose(), children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2393
|
+
PasskeyEnrollView,
|
|
2394
|
+
{
|
|
2395
|
+
wrapInModal: false,
|
|
2396
|
+
onComplete: handlePasskeyComplete,
|
|
2397
|
+
onError: handlePasskeyError,
|
|
2398
|
+
onLogout: handleLogout2,
|
|
2399
|
+
onClose
|
|
2400
|
+
}
|
|
2401
|
+
) });
|
|
2402
|
+
}
|
|
2377
2403
|
const handleLogout = async () => {
|
|
2378
2404
|
setIsLoggingOut(true);
|
|
2379
2405
|
try {
|
|
@@ -2474,7 +2500,7 @@ function AssetSelectView({
|
|
|
2474
2500
|
}) })
|
|
2475
2501
|
] });
|
|
2476
2502
|
}
|
|
2477
|
-
var TextLinkButton =
|
|
2503
|
+
var TextLinkButton = React10__default.default.forwardRef(({ showArrow = false, className, children, ...props }, ref) => {
|
|
2478
2504
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2479
2505
|
"button",
|
|
2480
2506
|
{
|
|
@@ -2733,7 +2759,7 @@ var DepositCompletedToast = ({
|
|
|
2733
2759
|
symbol
|
|
2734
2760
|
}) => {
|
|
2735
2761
|
const { t } = useI18n();
|
|
2736
|
-
const [expanded, setExpanded] =
|
|
2762
|
+
const [expanded, setExpanded] = React10.useState(false);
|
|
2737
2763
|
const formatAmount = (amount) => {
|
|
2738
2764
|
const divisor = BigInt(10 ** decimals);
|
|
2739
2765
|
const whole = amount / divisor;
|
|
@@ -2862,10 +2888,10 @@ function DepositQRView(props) {
|
|
|
2862
2888
|
const { t } = useI18n();
|
|
2863
2889
|
const { config } = react.useVolrContext();
|
|
2864
2890
|
const { client } = react.useInternalAuth();
|
|
2865
|
-
const [chainName, setChainName] =
|
|
2866
|
-
const [showOtherTokenModal, setShowOtherTokenModal] =
|
|
2867
|
-
const [showToast, setShowToast] =
|
|
2868
|
-
const eip681 =
|
|
2891
|
+
const [chainName, setChainName] = React10.useState(null);
|
|
2892
|
+
const [showOtherTokenModal, setShowOtherTokenModal] = React10.useState(false);
|
|
2893
|
+
const [showToast, setShowToast] = React10.useState(false);
|
|
2894
|
+
const eip681 = React10.useMemo(() => {
|
|
2869
2895
|
return `ethereum:${props.address}`;
|
|
2870
2896
|
}, [props.address]);
|
|
2871
2897
|
const status = react.useDepositListener({
|
|
@@ -2879,17 +2905,17 @@ function DepositQRView(props) {
|
|
|
2879
2905
|
},
|
|
2880
2906
|
address: props.address
|
|
2881
2907
|
});
|
|
2882
|
-
|
|
2908
|
+
React10.useEffect(() => {
|
|
2883
2909
|
console.log("[DepositQRView] Status changed:", status);
|
|
2884
2910
|
if (status.state === "detected") {
|
|
2885
2911
|
setShowToast(true);
|
|
2886
2912
|
}
|
|
2887
2913
|
}, [status.state]);
|
|
2888
|
-
const getNetworkInfo =
|
|
2914
|
+
const getNetworkInfo = React10.useCallback(
|
|
2889
2915
|
react.createGetNetworkInfo({ client, rpcOverrides: config.rpcOverrides }),
|
|
2890
2916
|
[client, config.rpcOverrides]
|
|
2891
2917
|
);
|
|
2892
|
-
|
|
2918
|
+
React10.useEffect(() => {
|
|
2893
2919
|
let cancelled = false;
|
|
2894
2920
|
const loadChainName = async () => {
|
|
2895
2921
|
try {
|
|
@@ -2996,10 +3022,10 @@ var DepositModal = ({
|
|
|
2996
3022
|
}) => {
|
|
2997
3023
|
const { user } = react.useVolrContext();
|
|
2998
3024
|
const { client } = react.useInternalAuth();
|
|
2999
|
-
const [depositAssets, setDepositAssets] =
|
|
3000
|
-
const [isLoading, setIsLoading] =
|
|
3001
|
-
const [error, setError] =
|
|
3002
|
-
|
|
3025
|
+
const [depositAssets, setDepositAssets] = React10.useState([]);
|
|
3026
|
+
const [isLoading, setIsLoading] = React10.useState(true);
|
|
3027
|
+
const [error, setError] = React10.useState(null);
|
|
3028
|
+
React10.useEffect(() => {
|
|
3003
3029
|
if (!open) return;
|
|
3004
3030
|
setIsLoading(true);
|
|
3005
3031
|
setError(null);
|
|
@@ -3027,24 +3053,24 @@ var DepositModal = ({
|
|
|
3027
3053
|
if (depositAssets.length === 1) return 0;
|
|
3028
3054
|
return -1;
|
|
3029
3055
|
};
|
|
3030
|
-
const [selectedIdx, setSelectedIdx] =
|
|
3031
|
-
|
|
3056
|
+
const [selectedIdx, setSelectedIdx] = React10.useState(-1);
|
|
3057
|
+
React10.useEffect(() => {
|
|
3032
3058
|
if (open && !isLoading && depositAssets.length > 0) {
|
|
3033
3059
|
setSelectedIdx(getInitialIndex());
|
|
3034
3060
|
}
|
|
3035
3061
|
}, [open, isLoading, depositAssets.length, asset]);
|
|
3036
|
-
|
|
3062
|
+
React10.useEffect(() => {
|
|
3037
3063
|
if (!open) {
|
|
3038
3064
|
setSelectedIdx(-1);
|
|
3039
3065
|
}
|
|
3040
3066
|
}, [open]);
|
|
3041
|
-
const selected =
|
|
3067
|
+
const selected = React10.useMemo(
|
|
3042
3068
|
() => depositAssets[selectedIdx],
|
|
3043
3069
|
[depositAssets, selectedIdx]
|
|
3044
3070
|
);
|
|
3045
3071
|
const showSelector = hasAssets && depositAssets.length > 1 && selectedIdx === -1;
|
|
3046
3072
|
const showQR = hasAssets && user?.evmAddress && selectedIdx >= 0;
|
|
3047
|
-
const body =
|
|
3073
|
+
const body = React10.useMemo(() => {
|
|
3048
3074
|
if (isLoading) {
|
|
3049
3075
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:text-center volr:py-8", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:text-slate-500", children: "Loading..." }) });
|
|
3050
3076
|
}
|
|
@@ -3108,9 +3134,9 @@ var DepositModal = ({
|
|
|
3108
3134
|
body
|
|
3109
3135
|
] });
|
|
3110
3136
|
};
|
|
3111
|
-
var VolrUIContext =
|
|
3137
|
+
var VolrUIContext = React10__default.default.createContext(null);
|
|
3112
3138
|
var useVolrUI = () => {
|
|
3113
|
-
const context =
|
|
3139
|
+
const context = React10.useContext(VolrUIContext);
|
|
3114
3140
|
if (!context) {
|
|
3115
3141
|
throw new Error("useVolrUI must be used within VolrUIProvider");
|
|
3116
3142
|
}
|
|
@@ -3169,11 +3195,11 @@ var VolrUIProvider = ({
|
|
|
3169
3195
|
const providerPolicy = config.providerPolicy ?? {
|
|
3170
3196
|
enforceOnFirstLogin: true
|
|
3171
3197
|
};
|
|
3172
|
-
const [showOnboarding, setShowOnboarding] =
|
|
3173
|
-
const [keyStorageTypeError, setKeyStorageTypeError] =
|
|
3198
|
+
const [showOnboarding, setShowOnboarding] = React10.useState(false);
|
|
3199
|
+
const [keyStorageTypeError, setKeyStorageTypeError] = React10.useState(
|
|
3174
3200
|
null
|
|
3175
3201
|
);
|
|
3176
|
-
|
|
3202
|
+
React10.useEffect(() => {
|
|
3177
3203
|
if (providerPolicy.enforceOnFirstLogin !== false && !keyStorageType) {
|
|
3178
3204
|
const errorMessage = "keyStorageType must be specified in VolrUIProvider props. Please set keyStorageType prop in VolrUIProvider.";
|
|
3179
3205
|
console.error(errorMessage);
|
|
@@ -3237,9 +3263,9 @@ var VolrUIProvider = ({
|
|
|
3237
3263
|
};
|
|
3238
3264
|
function AccountModalPortal() {
|
|
3239
3265
|
const { isOpen, mode, close } = useVolrModal();
|
|
3240
|
-
const [portalRoot, setPortalRoot] =
|
|
3241
|
-
const [error, setError] =
|
|
3242
|
-
|
|
3266
|
+
const [portalRoot, setPortalRoot] = React10.useState(null);
|
|
3267
|
+
const [error, setError] = React10.useState(null);
|
|
3268
|
+
React10.useEffect(() => {
|
|
3243
3269
|
if (typeof window === "undefined") return;
|
|
3244
3270
|
let root = document.getElementById("volr-modal-root");
|
|
3245
3271
|
if (!root) {
|
|
@@ -3298,9 +3324,9 @@ function AccountModalPortal() {
|
|
|
3298
3324
|
function DepositModalPortal() {
|
|
3299
3325
|
const { isOpen, mode, asset, close } = useVolrModal();
|
|
3300
3326
|
const { user } = react.useVolrContext();
|
|
3301
|
-
const [portalRoot, setPortalRoot] =
|
|
3302
|
-
const [showLogin, setShowLogin] =
|
|
3303
|
-
|
|
3327
|
+
const [portalRoot, setPortalRoot] = React10.useState(null);
|
|
3328
|
+
const [showLogin, setShowLogin] = React10.useState(false);
|
|
3329
|
+
React10.useEffect(() => {
|
|
3304
3330
|
if (typeof window === "undefined") return;
|
|
3305
3331
|
let root = document.getElementById("volr-modal-root");
|
|
3306
3332
|
if (!root) {
|
|
@@ -3315,7 +3341,7 @@ function DepositModalPortal() {
|
|
|
3315
3341
|
}
|
|
3316
3342
|
};
|
|
3317
3343
|
}, []);
|
|
3318
|
-
|
|
3344
|
+
React10.useEffect(() => {
|
|
3319
3345
|
if (isOpen && mode === "deposit" && !user) {
|
|
3320
3346
|
setShowLogin(true);
|
|
3321
3347
|
} else {
|
|
@@ -3355,19 +3381,29 @@ function OnboardingChecker({
|
|
|
3355
3381
|
}) {
|
|
3356
3382
|
const { user, provider, isLoading } = react.useVolrContext();
|
|
3357
3383
|
const { isOpen: isModalOpen } = useVolrModal();
|
|
3358
|
-
|
|
3384
|
+
const modalWasOpened = React10__default.default.useRef(false);
|
|
3385
|
+
React10.useEffect(() => {
|
|
3386
|
+
if (isModalOpen) {
|
|
3387
|
+
modalWasOpened.current = true;
|
|
3388
|
+
}
|
|
3389
|
+
}, [isModalOpen]);
|
|
3390
|
+
React10.useEffect(() => {
|
|
3359
3391
|
if (isLoading) {
|
|
3360
3392
|
return;
|
|
3361
3393
|
}
|
|
3362
|
-
if (
|
|
3394
|
+
if (isModalOpen) {
|
|
3363
3395
|
onHideOnboarding();
|
|
3364
3396
|
return;
|
|
3365
3397
|
}
|
|
3366
|
-
if (
|
|
3398
|
+
if (modalWasOpened.current) {
|
|
3367
3399
|
onHideOnboarding();
|
|
3368
3400
|
return;
|
|
3369
3401
|
}
|
|
3370
|
-
if (
|
|
3402
|
+
if (user?.keyStorageType) {
|
|
3403
|
+
onHideOnboarding();
|
|
3404
|
+
return;
|
|
3405
|
+
}
|
|
3406
|
+
if (provider) {
|
|
3371
3407
|
onHideOnboarding();
|
|
3372
3408
|
return;
|
|
3373
3409
|
}
|
|
@@ -3394,7 +3430,7 @@ function OnboardingChecker({
|
|
|
3394
3430
|
}
|
|
3395
3431
|
function useSwitchNetwork() {
|
|
3396
3432
|
const { client } = react.useInternalAuth();
|
|
3397
|
-
return
|
|
3433
|
+
return React10.useCallback(
|
|
3398
3434
|
async (chainId) => {
|
|
3399
3435
|
if (typeof window === "undefined" || !window.ethereum) {
|
|
3400
3436
|
throw new Error("No wallet found");
|