@volr/react-ui 0.1.61 → 0.1.63

package/dist/index.js

@@ -1,4 +1,4 @@
-import React5, { createContext, useContext, useState, useMemo, useEffect, useCallback, useRef, useId } from 'react';
+import React10, { createContext, useContext, useState, useMemo, useEffect, useCallback, useRef, useId } from 'react';
 import { createPortal } from 'react-dom';
 import { useVolrContext, useInternalAuth, usePasskeyEnrollment, useMpcConnection, VolrProvider, useVolrLogin, useDepositListener, createGetNetworkInfo } from '@volr/react';
 export { VolrProvider, useDepositListener, usePasskeyEnrollment, useVolr, useVolrLogin } from '@volr/react';
@@ -602,8 +602,8 @@ function getUserFriendlyError(error, t) {
 function WalletConnectedView({ user, onClose, showHeader = true }) {
   return /* @__PURE__ */ jsxs("div", { children: [
     showHeader && onClose && /* @__PURE__ */ jsx(ModalHeader, { onClose }),
-    /* @__PURE__ */ jsxs("div", { className: "volr:text-center", children: [
-      /* @__PURE__ */ jsx("p", { className: "volr:text-2xl volr:font-semibold volr:text-slate-900 volr:mb-5", children: "Wallet Connected" }),
+    /* @__PURE__ */ jsxs("div", { className: "", children: [
+      /* @__PURE__ */ jsx("p", { className: "volr:text-xl volr:font-semibold volr:text-slate-900 volr:mb-5", children: "Wallet Connected" }),
       user.evmAddress ? /* @__PURE__ */ jsxs("div", { className: "volr:bg-slate-50 volr:rounded-lg volr:p-5 volr:mb-6 volr:text-left", children: [
         /* @__PURE__ */ jsxs("div", { className: "volr:mb-3", children: [
           /* @__PURE__ */ jsx("div", { className: "volr:text-xs volr:text-slate-500 volr:mb-1 volr:font-medium", children: "Wallet Address" }),
@@ -846,7 +846,7 @@ var variantMap = {
   ghost: { backgroundColor: "transparent", color: "#475569", border: "none" },
   outline: { backgroundColor: "transparent", color: "#475569", border: "1px solid #e2e8f0" }
 };
-var Button = React5.forwardRef(
+var Button = React10.forwardRef(
   ({ variant = "primary", size = "md", fullWidth, className, style, disabled, children, ...props }, ref) => {
     const { accentColor } = useVolrUI();
     const sizeStyle = sizeMap[size];
@@ -1006,13 +1006,6 @@ function PasskeyEnrollView({
         onError(error);
       }
     }
-    if (!user?.email) {
-      const error = new Error("User email is required for passkey enrollment");
-      setErrorMessage(getUserFriendlyError(error, t));
-      if (onError) {
-        onError(error);
-      }
-    }
   }, [user, onError, t]);
   useEffect(() => {
     if (enrollmentError) {
@@ -1024,9 +1017,9 @@ function PasskeyEnrollView({
     }
   }, [enrollmentError, onError, t]);
   const handleEnroll = async () => {
-    if (!user?.id || !user?.email) {
+    if (!user?.id) {
       const error = new Error(
-        "User ID and email are required for passkey enrollment"
+        "User ID is required for passkey enrollment"
       );
       setErrorMessage(getUserFriendlyError(error, t));
       if (onError) {
@@ -1120,7 +1113,7 @@ function PasskeyEnrollView({
       }
     ) });
   }
-  const content = /* @__PURE__ */ jsxs("div", { className: "volr:text-center", children: [
+  const content = /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx("p", { className: "volr:text-xl volr:font-semibold volr:text-slate-900 volr:mb-5", children: t("passkey.start") }),
     !hasStarted ? /* @__PURE__ */ jsx(
       PasskeyEnrollForm,
@@ -2233,12 +2226,8 @@ function SigninModal({ isOpen, onClose, onError }) {
     }
     setCurrentScreen("passkey-setup");
   };
-  const handleSiweSuccess = (data) => {
-    if (data.keyStorageType) {
-      onClose();
-      return;
-    }
-    setCurrentScreen("passkey-setup");
+  const handleSiweSuccess = (_data) => {
+    onClose();
   };
   const handlePasskeyComplete = () => {
     onClose();
@@ -2369,6 +2358,36 @@ function AccountModal({ isOpen, onClose, onError }) {
   if (!user) {
     return /* @__PURE__ */ jsx(SigninModal, { isOpen, onClose, onError });
   }
+  if (!user.keyStorageType) {
+    const handlePasskeyComplete = () => {
+      onClose();
+    };
+    const handlePasskeyError = (error) => {
+      if (onError) {
+        onError(error);
+      }
+    };
+    const handleLogout2 = async () => {
+      try {
+        await logout();
+        onClose();
+      } catch (error) {
+        if (onError) {
+          onError(error instanceof Error ? error : new Error("Logout failed"));
+        }
+      }
+    };
+    return /* @__PURE__ */ jsx(Modal, { open: isOpen, onOpenChange: (open) => !open && onClose(), children: /* @__PURE__ */ jsx(
+      PasskeyEnrollView,
+      {
+        wrapInModal: false,
+        onComplete: handlePasskeyComplete,
+        onError: handlePasskeyError,
+        onLogout: handleLogout2,
+        onClose
+      }
+    ) });
+  }
   const handleLogout = async () => {
     setIsLoggingOut(true);
     try {
@@ -2469,7 +2488,7 @@ function AssetSelectView({
     }) })
   ] });
 }
-var TextLinkButton = React5.forwardRef(({ showArrow = false, className, children, ...props }, ref) => {
+var TextLinkButton = React10.forwardRef(({ showArrow = false, className, children, ...props }, ref) => {
   return /* @__PURE__ */ jsxs(
     "button",
     {
@@ -3103,7 +3122,7 @@ var DepositModal = ({
     body
   ] });
 };
-var VolrUIContext = React5.createContext(null);
+var VolrUIContext = React10.createContext(null);
 var useVolrUI = () => {
   const context = useContext(VolrUIContext);
   if (!context) {
@@ -3350,19 +3369,29 @@ function OnboardingChecker({
 }) {
   const { user, provider, isLoading } = useVolrContext();
   const { isOpen: isModalOpen } = useVolrModal();
+  const modalWasOpened = React10.useRef(false);
+  useEffect(() => {
+    if (isModalOpen) {
+      modalWasOpened.current = true;
+    }
+  }, [isModalOpen]);
   useEffect(() => {
     if (isLoading) {
       return;
     }
-    if (user?.keyStorageType) {
+    if (isModalOpen) {
       onHideOnboarding();
       return;
     }
-    if (provider) {
+    if (modalWasOpened.current) {
       onHideOnboarding();
       return;
     }
-    if (isModalOpen) {
+    if (user?.keyStorageType) {
+      onHideOnboarding();
+      return;
+    }
+    if (provider) {
       onHideOnboarding();
       return;
     }