@volr/react-ui 0.1.59 → 0.1.61
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 +107 -110
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +22 -25
- 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 React5 = 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 React5__default = /*#__PURE__*/_interopDefault(React5);
|
|
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 = React5.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 = React5.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] = React5.useState(detectLocale());
|
|
266
|
+
const translations2 = React5.useMemo(() => getTranslations(locale), [locale]);
|
|
267
|
+
const t = React5.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 = React5.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 = React5.createContext(null);
|
|
297
297
|
var useVolrModal = () => {
|
|
298
|
-
const context =
|
|
298
|
+
const context = React5.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] = React5.useState(false);
|
|
308
|
+
const [mode, setMode] = React5.useState("account");
|
|
309
|
+
const [asset, setAsset] = React5.useState(null);
|
|
310
|
+
const open = React5.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 = React5.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] = React5.useState(() => {
|
|
329
329
|
if (typeof window === "undefined") return false;
|
|
330
330
|
return window.matchMedia(query).matches;
|
|
331
331
|
});
|
|
332
|
-
|
|
332
|
+
React5.useEffect(() => {
|
|
333
333
|
if (typeof window === "undefined") return;
|
|
334
334
|
const mql = window.matchMedia(query);
|
|
335
335
|
const handler = (event) => setMatches(event.matches);
|
|
@@ -343,9 +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 [
|
|
347
|
-
|
|
348
|
-
React9.useEffect(() => {
|
|
346
|
+
const [mountNode, setMountNode] = React5.useState(null);
|
|
347
|
+
React5.useEffect(() => {
|
|
349
348
|
const host = document.createElement("div");
|
|
350
349
|
host.id = "volr-shadow-portal";
|
|
351
350
|
host.style.position = "fixed";
|
|
@@ -355,7 +354,6 @@ function ShadowPortal({ children }) {
|
|
|
355
354
|
host.style.height = "0";
|
|
356
355
|
host.style.zIndex = "9999";
|
|
357
356
|
document.body.appendChild(host);
|
|
358
|
-
setShadowHost(host);
|
|
359
357
|
const shadowRoot = host.attachShadow({ mode: "open" });
|
|
360
358
|
const styleEl = document.createElement("style");
|
|
361
359
|
styleEl.textContent = VOLR_SDK_CSS;
|
|
@@ -372,7 +370,7 @@ function ShadowPortal({ children }) {
|
|
|
372
370
|
return reactDom.createPortal(children, mountNode);
|
|
373
371
|
}
|
|
374
372
|
function useFocusTrap(isActive, containerRef) {
|
|
375
|
-
const previousActiveElement =
|
|
373
|
+
const previousActiveElement = React5.useRef(null);
|
|
376
374
|
const focusableSelector = [
|
|
377
375
|
"button:not([disabled])",
|
|
378
376
|
"input:not([disabled])",
|
|
@@ -381,7 +379,7 @@ function useFocusTrap(isActive, containerRef) {
|
|
|
381
379
|
"a[href]",
|
|
382
380
|
'[tabindex]:not([tabindex="-1"])'
|
|
383
381
|
].join(", ");
|
|
384
|
-
const getFocusableElements =
|
|
382
|
+
const getFocusableElements = React5.useCallback(() => {
|
|
385
383
|
if (!containerRef.current) return [];
|
|
386
384
|
return Array.from(
|
|
387
385
|
containerRef.current.querySelectorAll(focusableSelector)
|
|
@@ -389,7 +387,7 @@ function useFocusTrap(isActive, containerRef) {
|
|
|
389
387
|
return el.offsetParent !== null;
|
|
390
388
|
});
|
|
391
389
|
}, [containerRef, focusableSelector]);
|
|
392
|
-
const handleKeyDown =
|
|
390
|
+
const handleKeyDown = React5.useCallback(
|
|
393
391
|
(event) => {
|
|
394
392
|
if (event.key !== "Tab") return;
|
|
395
393
|
const focusableElements = getFocusableElements();
|
|
@@ -410,7 +408,7 @@ function useFocusTrap(isActive, containerRef) {
|
|
|
410
408
|
},
|
|
411
409
|
[getFocusableElements]
|
|
412
410
|
);
|
|
413
|
-
|
|
411
|
+
React5.useEffect(() => {
|
|
414
412
|
if (!isActive) return;
|
|
415
413
|
previousActiveElement.current = document.activeElement;
|
|
416
414
|
const focusableElements = getFocusableElements();
|
|
@@ -441,10 +439,10 @@ var Modal = ({
|
|
|
441
439
|
}) => {
|
|
442
440
|
const isMobile = useMediaQuery("(max-width: 500px)");
|
|
443
441
|
const variant = explicitVariant ?? (isMobile ? "bottom-sheet" : "centered");
|
|
444
|
-
const dialogRef =
|
|
445
|
-
const dialogId =
|
|
442
|
+
const dialogRef = React5.useRef(null);
|
|
443
|
+
const dialogId = React5.useId();
|
|
446
444
|
useFocusTrap(open, dialogRef);
|
|
447
|
-
|
|
445
|
+
React5.useEffect(() => {
|
|
448
446
|
const handleEscape = (e) => {
|
|
449
447
|
if (e.key === "Escape" && open) {
|
|
450
448
|
if (onEscapeKeyDown) {
|
|
@@ -848,12 +846,12 @@ var sizeMap = {
|
|
|
848
846
|
lg: { px: "1.5rem", py: "1rem", fontSize: "1.125rem" }
|
|
849
847
|
};
|
|
850
848
|
var variantMap = {
|
|
851
|
-
primary: { color: "#fff", border: "none" },
|
|
849
|
+
primary: { backgroundColor: void 0, color: "#fff", border: "none" },
|
|
852
850
|
secondary: { backgroundColor: "#f1f5f9", color: "#0f172a", border: "none" },
|
|
853
851
|
ghost: { backgroundColor: "transparent", color: "#475569", border: "none" },
|
|
854
852
|
outline: { backgroundColor: "transparent", color: "#475569", border: "1px solid #e2e8f0" }
|
|
855
853
|
};
|
|
856
|
-
var Button =
|
|
854
|
+
var Button = React5__default.default.forwardRef(
|
|
857
855
|
({ variant = "primary", size = "md", fullWidth, className, style, disabled, children, ...props }, ref) => {
|
|
858
856
|
const { accentColor } = useVolrUI();
|
|
859
857
|
const sizeStyle = sizeMap[size];
|
|
@@ -961,12 +959,12 @@ function PasskeyEnrollView({
|
|
|
961
959
|
isEnrolling,
|
|
962
960
|
error: enrollmentError
|
|
963
961
|
} = react.usePasskeyEnrollment();
|
|
964
|
-
const [hasStarted, setHasStarted] =
|
|
965
|
-
const [errorMessage, setErrorMessage] =
|
|
966
|
-
const [isRefreshing, setIsRefreshing] =
|
|
962
|
+
const [hasStarted, setHasStarted] = React5.useState(false);
|
|
963
|
+
const [errorMessage, setErrorMessage] = React5.useState(null);
|
|
964
|
+
const [isRefreshing, setIsRefreshing] = React5.useState(false);
|
|
967
965
|
const biometricType = getBiometricType();
|
|
968
966
|
const hasPasskey = user?.keyStorageType === "passkey";
|
|
969
|
-
|
|
967
|
+
React5.useEffect(() => {
|
|
970
968
|
console.log("[PasskeyEnrollView] User state:", {
|
|
971
969
|
user,
|
|
972
970
|
keyStorageType: user?.keyStorageType,
|
|
@@ -974,7 +972,7 @@ function PasskeyEnrollView({
|
|
|
974
972
|
hasPasskey
|
|
975
973
|
});
|
|
976
974
|
}, [user, hasPasskey]);
|
|
977
|
-
|
|
975
|
+
React5.useEffect(() => {
|
|
978
976
|
if (hasPasskey && !user?.evmAddress && !isRefreshing) {
|
|
979
977
|
const refreshUserData = async () => {
|
|
980
978
|
try {
|
|
@@ -1005,7 +1003,7 @@ function PasskeyEnrollView({
|
|
|
1005
1003
|
refreshUserData();
|
|
1006
1004
|
}
|
|
1007
1005
|
}, [hasPasskey, user?.evmAddress, isRefreshing, client, setUser, user]);
|
|
1008
|
-
|
|
1006
|
+
React5.useEffect(() => {
|
|
1009
1007
|
if (!user?.id) {
|
|
1010
1008
|
const error = new Error("User ID is required for passkey enrollment");
|
|
1011
1009
|
setErrorMessage(getUserFriendlyError(error, t));
|
|
@@ -1021,7 +1019,7 @@ function PasskeyEnrollView({
|
|
|
1021
1019
|
}
|
|
1022
1020
|
}
|
|
1023
1021
|
}, [user, onError, t]);
|
|
1024
|
-
|
|
1022
|
+
React5.useEffect(() => {
|
|
1025
1023
|
if (enrollmentError) {
|
|
1026
1024
|
const friendlyMessage = getUserFriendlyError(enrollmentError, t);
|
|
1027
1025
|
setErrorMessage(friendlyMessage);
|
|
@@ -1175,8 +1173,8 @@ function MpcConnectView({
|
|
|
1175
1173
|
isConnecting,
|
|
1176
1174
|
error: connectionError
|
|
1177
1175
|
} = react.useMpcConnection();
|
|
1178
|
-
const [errorMessage, setErrorMessage] =
|
|
1179
|
-
|
|
1176
|
+
const [errorMessage, setErrorMessage] = React5.useState(null);
|
|
1177
|
+
React5.useEffect(() => {
|
|
1180
1178
|
if (connectionError) {
|
|
1181
1179
|
setErrorMessage(connectionError.message);
|
|
1182
1180
|
if (onError) {
|
|
@@ -1184,7 +1182,7 @@ function MpcConnectView({
|
|
|
1184
1182
|
}
|
|
1185
1183
|
}
|
|
1186
1184
|
}, [connectionError, onError]);
|
|
1187
|
-
|
|
1185
|
+
React5.useEffect(() => {
|
|
1188
1186
|
handleConnect();
|
|
1189
1187
|
}, []);
|
|
1190
1188
|
const handleConnect = async () => {
|
|
@@ -1245,7 +1243,7 @@ function MpcConnectView({
|
|
|
1245
1243
|
);
|
|
1246
1244
|
}
|
|
1247
1245
|
var CopyButton = ({ text, className, onCopy }) => {
|
|
1248
|
-
const [copied, setCopied] =
|
|
1246
|
+
const [copied, setCopied] = React5.useState(false);
|
|
1249
1247
|
const handleCopy = async () => {
|
|
1250
1248
|
try {
|
|
1251
1249
|
await navigator.clipboard.writeText(text);
|
|
@@ -1477,9 +1475,9 @@ var EmailIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
|
1477
1475
|
);
|
|
1478
1476
|
function EmailInlineInput({ onSubmit, accentColor }) {
|
|
1479
1477
|
const { t } = useI18n();
|
|
1480
|
-
const [email, setEmail] =
|
|
1481
|
-
const [error, setError] =
|
|
1482
|
-
const [isLoading, setIsLoading] =
|
|
1478
|
+
const [email, setEmail] = React5.useState("");
|
|
1479
|
+
const [error, setError] = React5.useState(null);
|
|
1480
|
+
const [isLoading, setIsLoading] = React5.useState(false);
|
|
1483
1481
|
const handleSubmit = async (e) => {
|
|
1484
1482
|
e.preventDefault();
|
|
1485
1483
|
setError(null);
|
|
@@ -1602,14 +1600,14 @@ function SigninSelectScreen({
|
|
|
1602
1600
|
function CodeInputScreen({ email, onSubmit, onResend }) {
|
|
1603
1601
|
const { t } = useI18n();
|
|
1604
1602
|
const { accentColor } = useVolrUI();
|
|
1605
|
-
const [digits, setDigits] =
|
|
1606
|
-
const [error, setError] =
|
|
1607
|
-
const [isLoading, setIsLoading] =
|
|
1608
|
-
const inputRefs =
|
|
1609
|
-
|
|
1603
|
+
const [digits, setDigits] = React5.useState(Array(6).fill(""));
|
|
1604
|
+
const [error, setError] = React5.useState(null);
|
|
1605
|
+
const [isLoading, setIsLoading] = React5.useState(false);
|
|
1606
|
+
const inputRefs = React5.useRef([]);
|
|
1607
|
+
React5.useEffect(() => {
|
|
1610
1608
|
inputRefs.current[0]?.focus();
|
|
1611
1609
|
}, []);
|
|
1612
|
-
|
|
1610
|
+
React5.useEffect(() => {
|
|
1613
1611
|
const code = digits.join("");
|
|
1614
1612
|
if (code.length === 6 && !isLoading) {
|
|
1615
1613
|
handleSubmit(code);
|
|
@@ -2030,13 +2028,12 @@ function SiweLoginScreen({
|
|
|
2030
2028
|
onClose
|
|
2031
2029
|
}) {
|
|
2032
2030
|
const { t } = useI18n();
|
|
2033
|
-
const { accentColor } = useVolrUI();
|
|
2034
2031
|
const { requestSiweNonce, verifySiweSignature } = react.useVolrLogin();
|
|
2035
|
-
const [isLoading, setIsLoading] =
|
|
2036
|
-
const [step, setStep] =
|
|
2037
|
-
const [account, setAccount] =
|
|
2038
|
-
const [error, setError] =
|
|
2039
|
-
const [walletConnector, setWalletConnector] =
|
|
2032
|
+
const [isLoading, setIsLoading] = React5.useState(false);
|
|
2033
|
+
const [step, setStep] = React5.useState("connect");
|
|
2034
|
+
const [account, setAccount] = React5.useState(null);
|
|
2035
|
+
const [error, setError] = React5.useState(null);
|
|
2036
|
+
const [walletConnector, setWalletConnector] = React5.useState(
|
|
2040
2037
|
void 0
|
|
2041
2038
|
);
|
|
2042
2039
|
const detectWalletConnector = () => {
|
|
@@ -2055,7 +2052,7 @@ function SiweLoginScreen({
|
|
|
2055
2052
|
if (provider.isBraveWallet) return "com.brave.wallet";
|
|
2056
2053
|
return "unknown";
|
|
2057
2054
|
};
|
|
2058
|
-
|
|
2055
|
+
React5.useEffect(() => {
|
|
2059
2056
|
if (typeof window !== "undefined" && window.ethereum) {
|
|
2060
2057
|
window.ethereum.request({ method: "eth_accounts" }).then((accounts) => {
|
|
2061
2058
|
if (accounts.length > 0) {
|
|
@@ -2206,13 +2203,13 @@ function SigninModal({ isOpen, onClose, onError }) {
|
|
|
2206
2203
|
const { logout, user } = react.useVolrContext();
|
|
2207
2204
|
const { appName, branding } = useVolrUI();
|
|
2208
2205
|
const { requestEmailCode, verifyEmailCode, handleSocialLogin } = react.useVolrLogin();
|
|
2209
|
-
const [currentScreen, setCurrentScreen] =
|
|
2210
|
-
const [email, setEmail] =
|
|
2206
|
+
const [currentScreen, setCurrentScreen] = React5.useState("method-select");
|
|
2207
|
+
const [email, setEmail] = React5.useState("");
|
|
2211
2208
|
const hasPasskey = user?.keyStorageType === "passkey";
|
|
2212
2209
|
const isMobile = useMediaQuery("(max-width: 500px)");
|
|
2213
2210
|
const isWideViewport = useMediaQuery("(min-width: 864px)");
|
|
2214
2211
|
const shouldUseWideLayout = !isMobile && isWideViewport && Boolean(branding) && currentScreen === "method-select";
|
|
2215
|
-
|
|
2212
|
+
React5.useEffect(() => {
|
|
2216
2213
|
if (!isOpen) {
|
|
2217
2214
|
setCurrentScreen("method-select");
|
|
2218
2215
|
setEmail("");
|
|
@@ -2373,7 +2370,7 @@ function SigninModal({ isOpen, onClose, onError }) {
|
|
|
2373
2370
|
function AccountModal({ isOpen, onClose, onError }) {
|
|
2374
2371
|
const { user, logout } = react.useVolrContext();
|
|
2375
2372
|
const { t } = useI18n();
|
|
2376
|
-
const [isLoggingOut, setIsLoggingOut] =
|
|
2373
|
+
const [isLoggingOut, setIsLoggingOut] = React5.useState(false);
|
|
2377
2374
|
if (!user) {
|
|
2378
2375
|
return /* @__PURE__ */ jsxRuntime.jsx(SigninModal, { isOpen, onClose, onError });
|
|
2379
2376
|
}
|
|
@@ -2394,7 +2391,7 @@ function AccountModal({ isOpen, onClose, onError }) {
|
|
|
2394
2391
|
return /* @__PURE__ */ jsxRuntime.jsxs(Modal, { open: isOpen, onOpenChange: (open) => !open && onClose(), children: [
|
|
2395
2392
|
/* @__PURE__ */ jsxRuntime.jsx(ModalHeader, { onClose }),
|
|
2396
2393
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
2397
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-xl volr:font-semibold volr:text-slate-900 volr:mb-4
|
|
2394
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-xl volr:font-semibold volr:text-slate-900 volr:mb-4", children: t("account.title") }),
|
|
2398
2395
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:bg-slate-50 volr:rounded-xl volr:p-4 volr:mb-4", children: [
|
|
2399
2396
|
user.evmAddress && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:items-center volr:justify-between volr:gap-3", children: [
|
|
2400
2397
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex-1 volr:min-w-0", children: [
|
|
@@ -2433,8 +2430,8 @@ function AssetSelectView({
|
|
|
2433
2430
|
}) {
|
|
2434
2431
|
const { t } = useI18n();
|
|
2435
2432
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
2436
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-xl volr:font-semibold volr:text-slate-900 volr:mb-1
|
|
2437
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:text-slate-500 volr:mb-4
|
|
2433
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-xl volr:font-semibold volr:text-slate-900 volr:mb-1", children: t("deposit.selectTitle") }),
|
|
2434
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:text-slate-500 volr:mb-4", children: "Supported token" }),
|
|
2438
2435
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:space-y-3", children: assets.map((a, idx) => {
|
|
2439
2436
|
const isNative = a.token === "native";
|
|
2440
2437
|
const tokenSymbol = isNative ? "ETH" : a.token.symbol;
|
|
@@ -2477,7 +2474,7 @@ function AssetSelectView({
|
|
|
2477
2474
|
}) })
|
|
2478
2475
|
] });
|
|
2479
2476
|
}
|
|
2480
|
-
var TextLinkButton =
|
|
2477
|
+
var TextLinkButton = React5__default.default.forwardRef(({ showArrow = false, className, children, ...props }, ref) => {
|
|
2481
2478
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2482
2479
|
"button",
|
|
2483
2480
|
{
|
|
@@ -2736,7 +2733,7 @@ var DepositCompletedToast = ({
|
|
|
2736
2733
|
symbol
|
|
2737
2734
|
}) => {
|
|
2738
2735
|
const { t } = useI18n();
|
|
2739
|
-
const [expanded, setExpanded] =
|
|
2736
|
+
const [expanded, setExpanded] = React5.useState(false);
|
|
2740
2737
|
const formatAmount = (amount) => {
|
|
2741
2738
|
const divisor = BigInt(10 ** decimals);
|
|
2742
2739
|
const whole = amount / divisor;
|
|
@@ -2865,10 +2862,10 @@ function DepositQRView(props) {
|
|
|
2865
2862
|
const { t } = useI18n();
|
|
2866
2863
|
const { config } = react.useVolrContext();
|
|
2867
2864
|
const { client } = react.useInternalAuth();
|
|
2868
|
-
const [chainName, setChainName] =
|
|
2869
|
-
const [showOtherTokenModal, setShowOtherTokenModal] =
|
|
2870
|
-
const [showToast, setShowToast] =
|
|
2871
|
-
const eip681 =
|
|
2865
|
+
const [chainName, setChainName] = React5.useState(null);
|
|
2866
|
+
const [showOtherTokenModal, setShowOtherTokenModal] = React5.useState(false);
|
|
2867
|
+
const [showToast, setShowToast] = React5.useState(false);
|
|
2868
|
+
const eip681 = React5.useMemo(() => {
|
|
2872
2869
|
return `ethereum:${props.address}`;
|
|
2873
2870
|
}, [props.address]);
|
|
2874
2871
|
const status = react.useDepositListener({
|
|
@@ -2882,17 +2879,17 @@ function DepositQRView(props) {
|
|
|
2882
2879
|
},
|
|
2883
2880
|
address: props.address
|
|
2884
2881
|
});
|
|
2885
|
-
|
|
2882
|
+
React5.useEffect(() => {
|
|
2886
2883
|
console.log("[DepositQRView] Status changed:", status);
|
|
2887
2884
|
if (status.state === "detected") {
|
|
2888
2885
|
setShowToast(true);
|
|
2889
2886
|
}
|
|
2890
2887
|
}, [status.state]);
|
|
2891
|
-
const getNetworkInfo =
|
|
2888
|
+
const getNetworkInfo = React5.useCallback(
|
|
2892
2889
|
react.createGetNetworkInfo({ client, rpcOverrides: config.rpcOverrides }),
|
|
2893
2890
|
[client, config.rpcOverrides]
|
|
2894
2891
|
);
|
|
2895
|
-
|
|
2892
|
+
React5.useEffect(() => {
|
|
2896
2893
|
let cancelled = false;
|
|
2897
2894
|
const loadChainName = async () => {
|
|
2898
2895
|
try {
|
|
@@ -2999,10 +2996,10 @@ var DepositModal = ({
|
|
|
2999
2996
|
}) => {
|
|
3000
2997
|
const { user } = react.useVolrContext();
|
|
3001
2998
|
const { client } = react.useInternalAuth();
|
|
3002
|
-
const [depositAssets, setDepositAssets] =
|
|
3003
|
-
const [isLoading, setIsLoading] =
|
|
3004
|
-
const [error, setError] =
|
|
3005
|
-
|
|
2999
|
+
const [depositAssets, setDepositAssets] = React5.useState([]);
|
|
3000
|
+
const [isLoading, setIsLoading] = React5.useState(true);
|
|
3001
|
+
const [error, setError] = React5.useState(null);
|
|
3002
|
+
React5.useEffect(() => {
|
|
3006
3003
|
if (!open) return;
|
|
3007
3004
|
setIsLoading(true);
|
|
3008
3005
|
setError(null);
|
|
@@ -3030,24 +3027,24 @@ var DepositModal = ({
|
|
|
3030
3027
|
if (depositAssets.length === 1) return 0;
|
|
3031
3028
|
return -1;
|
|
3032
3029
|
};
|
|
3033
|
-
const [selectedIdx, setSelectedIdx] =
|
|
3034
|
-
|
|
3030
|
+
const [selectedIdx, setSelectedIdx] = React5.useState(-1);
|
|
3031
|
+
React5.useEffect(() => {
|
|
3035
3032
|
if (open && !isLoading && depositAssets.length > 0) {
|
|
3036
3033
|
setSelectedIdx(getInitialIndex());
|
|
3037
3034
|
}
|
|
3038
3035
|
}, [open, isLoading, depositAssets.length, asset]);
|
|
3039
|
-
|
|
3036
|
+
React5.useEffect(() => {
|
|
3040
3037
|
if (!open) {
|
|
3041
3038
|
setSelectedIdx(-1);
|
|
3042
3039
|
}
|
|
3043
3040
|
}, [open]);
|
|
3044
|
-
const selected =
|
|
3041
|
+
const selected = React5.useMemo(
|
|
3045
3042
|
() => depositAssets[selectedIdx],
|
|
3046
3043
|
[depositAssets, selectedIdx]
|
|
3047
3044
|
);
|
|
3048
3045
|
const showSelector = hasAssets && depositAssets.length > 1 && selectedIdx === -1;
|
|
3049
3046
|
const showQR = hasAssets && user?.evmAddress && selectedIdx >= 0;
|
|
3050
|
-
const body =
|
|
3047
|
+
const body = React5.useMemo(() => {
|
|
3051
3048
|
if (isLoading) {
|
|
3052
3049
|
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..." }) });
|
|
3053
3050
|
}
|
|
@@ -3111,9 +3108,9 @@ var DepositModal = ({
|
|
|
3111
3108
|
body
|
|
3112
3109
|
] });
|
|
3113
3110
|
};
|
|
3114
|
-
var VolrUIContext =
|
|
3111
|
+
var VolrUIContext = React5__default.default.createContext(null);
|
|
3115
3112
|
var useVolrUI = () => {
|
|
3116
|
-
const context =
|
|
3113
|
+
const context = React5.useContext(VolrUIContext);
|
|
3117
3114
|
if (!context) {
|
|
3118
3115
|
throw new Error("useVolrUI must be used within VolrUIProvider");
|
|
3119
3116
|
}
|
|
@@ -3172,11 +3169,11 @@ var VolrUIProvider = ({
|
|
|
3172
3169
|
const providerPolicy = config.providerPolicy ?? {
|
|
3173
3170
|
enforceOnFirstLogin: true
|
|
3174
3171
|
};
|
|
3175
|
-
const [showOnboarding, setShowOnboarding] =
|
|
3176
|
-
const [keyStorageTypeError, setKeyStorageTypeError] =
|
|
3172
|
+
const [showOnboarding, setShowOnboarding] = React5.useState(false);
|
|
3173
|
+
const [keyStorageTypeError, setKeyStorageTypeError] = React5.useState(
|
|
3177
3174
|
null
|
|
3178
3175
|
);
|
|
3179
|
-
|
|
3176
|
+
React5.useEffect(() => {
|
|
3180
3177
|
if (providerPolicy.enforceOnFirstLogin !== false && !keyStorageType) {
|
|
3181
3178
|
const errorMessage = "keyStorageType must be specified in VolrUIProvider props. Please set keyStorageType prop in VolrUIProvider.";
|
|
3182
3179
|
console.error(errorMessage);
|
|
@@ -3240,9 +3237,9 @@ var VolrUIProvider = ({
|
|
|
3240
3237
|
};
|
|
3241
3238
|
function AccountModalPortal() {
|
|
3242
3239
|
const { isOpen, mode, close } = useVolrModal();
|
|
3243
|
-
const [portalRoot, setPortalRoot] =
|
|
3244
|
-
const [error, setError] =
|
|
3245
|
-
|
|
3240
|
+
const [portalRoot, setPortalRoot] = React5.useState(null);
|
|
3241
|
+
const [error, setError] = React5.useState(null);
|
|
3242
|
+
React5.useEffect(() => {
|
|
3246
3243
|
if (typeof window === "undefined") return;
|
|
3247
3244
|
let root = document.getElementById("volr-modal-root");
|
|
3248
3245
|
if (!root) {
|
|
@@ -3301,9 +3298,9 @@ function AccountModalPortal() {
|
|
|
3301
3298
|
function DepositModalPortal() {
|
|
3302
3299
|
const { isOpen, mode, asset, close } = useVolrModal();
|
|
3303
3300
|
const { user } = react.useVolrContext();
|
|
3304
|
-
const [portalRoot, setPortalRoot] =
|
|
3305
|
-
const [showLogin, setShowLogin] =
|
|
3306
|
-
|
|
3301
|
+
const [portalRoot, setPortalRoot] = React5.useState(null);
|
|
3302
|
+
const [showLogin, setShowLogin] = React5.useState(false);
|
|
3303
|
+
React5.useEffect(() => {
|
|
3307
3304
|
if (typeof window === "undefined") return;
|
|
3308
3305
|
let root = document.getElementById("volr-modal-root");
|
|
3309
3306
|
if (!root) {
|
|
@@ -3318,7 +3315,7 @@ function DepositModalPortal() {
|
|
|
3318
3315
|
}
|
|
3319
3316
|
};
|
|
3320
3317
|
}, []);
|
|
3321
|
-
|
|
3318
|
+
React5.useEffect(() => {
|
|
3322
3319
|
if (isOpen && mode === "deposit" && !user) {
|
|
3323
3320
|
setShowLogin(true);
|
|
3324
3321
|
} else {
|
|
@@ -3358,30 +3355,30 @@ function OnboardingChecker({
|
|
|
3358
3355
|
}) {
|
|
3359
3356
|
const { user, provider, isLoading } = react.useVolrContext();
|
|
3360
3357
|
const { isOpen: isModalOpen } = useVolrModal();
|
|
3361
|
-
|
|
3358
|
+
React5.useEffect(() => {
|
|
3362
3359
|
if (isLoading) {
|
|
3363
3360
|
return;
|
|
3364
3361
|
}
|
|
3362
|
+
if (user?.keyStorageType) {
|
|
3363
|
+
onHideOnboarding();
|
|
3364
|
+
return;
|
|
3365
|
+
}
|
|
3366
|
+
if (provider) {
|
|
3367
|
+
onHideOnboarding();
|
|
3368
|
+
return;
|
|
3369
|
+
}
|
|
3365
3370
|
if (isModalOpen) {
|
|
3366
3371
|
onHideOnboarding();
|
|
3367
3372
|
return;
|
|
3368
3373
|
}
|
|
3369
|
-
if (user &&
|
|
3370
|
-
if (
|
|
3371
|
-
|
|
3374
|
+
if (user && enforceSelection) {
|
|
3375
|
+
if (!keyStorageType) {
|
|
3376
|
+
console.error(
|
|
3377
|
+
"keyStorageType must be specified in VolrUIProvider props."
|
|
3378
|
+
);
|
|
3372
3379
|
return;
|
|
3373
3380
|
}
|
|
3374
|
-
|
|
3375
|
-
if (!keyStorageType) {
|
|
3376
|
-
console.error(
|
|
3377
|
-
"keyStorageType must be specified in VolrUIProvider props."
|
|
3378
|
-
);
|
|
3379
|
-
return;
|
|
3380
|
-
}
|
|
3381
|
-
onShowOnboarding();
|
|
3382
|
-
}
|
|
3383
|
-
} else if (provider) {
|
|
3384
|
-
onHideOnboarding();
|
|
3381
|
+
onShowOnboarding();
|
|
3385
3382
|
}
|
|
3386
3383
|
}, [
|
|
3387
3384
|
user,
|
|
@@ -3397,7 +3394,7 @@ function OnboardingChecker({
|
|
|
3397
3394
|
}
|
|
3398
3395
|
function useSwitchNetwork() {
|
|
3399
3396
|
const { client } = react.useInternalAuth();
|
|
3400
|
-
return
|
|
3397
|
+
return React5.useCallback(
|
|
3401
3398
|
async (chainId) => {
|
|
3402
3399
|
if (typeof window === "undefined" || !window.ethereum) {
|
|
3403
3400
|
throw new Error("No wallet found");
|