@volr/react-ui 0.1.120 → 0.1.122

package/dist/index.cjs

@@ -575,6 +575,19 @@ var en = {
       windows: "Please use your phone via QR code. (Windows Hello is not supported)",
       default: "Please use this device's biometric.",
       note: "Using other devices or apps may not work."
+    },
+    migration: {
+      title: "Set up passkey for this site",
+      description: "Your wallet was created on {{sourceDomain}}. To use it here, you need to set up a new passkey for this site.",
+      descriptionGeneric: "Your wallet was created on a different site. To use it here, you need to set up a new passkey for this site.",
+      currentDomain: "Current site",
+      sourceDomain: "Original site",
+      benefits: "Your wallet address and balance will remain the same.",
+      cta: "Set up passkey",
+      later: "Do it later",
+      inProgress: "Setting up...",
+      success: "Passkey set up successfully!",
+      error: "Failed to set up passkey. Please try again."
     }
   },
   success: {
@@ -804,6 +817,19 @@ var ko = {
       windows: "QR \uCF54\uB4DC\uB85C \uD734\uB300\uD3F0\uC744 \uC0AC\uC6A9\uD574\uC8FC\uC138\uC694. (Windows Hello\uB294 \uC9C0\uC6D0\uB418\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4)",
       default: "\uC774 \uAE30\uAE30\uC758 \uC0DD\uCCB4 \uC778\uC99D\uC744 \uC0AC\uC6A9\uD574\uC8FC\uC138\uC694.",
       note: "\uB2E4\uB978 \uAE30\uAE30\uB098 \uC571 \uC0AC\uC6A9 \uC2DC \uB3D9\uC791\uD558\uC9C0 \uC54A\uC744 \uC218 \uC788\uC2B5\uB2C8\uB2E4."
+    },
+    migration: {
+      title: "\uC774 \uC0AC\uC774\uD2B8\uC6A9 \uD328\uC2A4\uD0A4 \uC124\uC815",
+      description: "\uC9C0\uAC11\uC774 {{sourceDomain}}\uC5D0\uC11C \uC0DD\uC131\uB418\uC5C8\uC2B5\uB2C8\uB2E4. \uC774 \uC0AC\uC774\uD2B8\uC5D0\uC11C \uC0AC\uC6A9\uD558\uB824\uBA74 \uC0C8 \uD328\uC2A4\uD0A4\uB97C \uC124\uC815\uD574\uC57C \uD569\uB2C8\uB2E4.",
+      descriptionGeneric: "\uC9C0\uAC11\uC774 \uB2E4\uB978 \uC0AC\uC774\uD2B8\uC5D0\uC11C \uC0DD\uC131\uB418\uC5C8\uC2B5\uB2C8\uB2E4. \uC774 \uC0AC\uC774\uD2B8\uC5D0\uC11C \uC0AC\uC6A9\uD558\uB824\uBA74 \uC0C8 \uD328\uC2A4\uD0A4\uB97C \uC124\uC815\uD574\uC57C \uD569\uB2C8\uB2E4.",
+      currentDomain: "\uD604\uC7AC \uC0AC\uC774\uD2B8",
+      sourceDomain: "\uC6D0\uBCF8 \uC0AC\uC774\uD2B8",
+      benefits: "\uC9C0\uAC11 \uC8FC\uC18C\uC640 \uC794\uC561\uC740 \uADF8\uB300\uB85C \uC720\uC9C0\uB429\uB2C8\uB2E4.",
+      cta: "\uD328\uC2A4\uD0A4 \uC124\uC815\uD558\uAE30",
+      later: "\uB098\uC911\uC5D0 \uD558\uAE30",
+      inProgress: "\uC124\uC815 \uC911...",
+      success: "\uD328\uC2A4\uD0A4 \uC124\uC815\uC774 \uC644\uB8CC\uB418\uC5C8\uC2B5\uB2C8\uB2E4!",
+      error: "\uD328\uC2A4\uD0A4 \uC124\uC815\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4. \uB2E4\uC2DC \uC2DC\uB3C4\uD574\uC8FC\uC138\uC694."
     }
   },
   success: {
@@ -1863,6 +1889,84 @@ function PasskeyCompatibilityScreen({
     ] })
   ] });
 }
+function PasskeyMigrationView({
+  sourcePasskey,
+  currentDomain,
+  onMigrate,
+  onSkip,
+  onError,
+  isOpen = true,
+  wrapInModal = true
+}) {
+  const { t } = useI18n();
+  const [isMigrating, setIsMigrating] = React13.useState(false);
+  const [error, setError] = React13.useState(null);
+  const biometricType = getBiometricType();
+  const handleMigrate = async () => {
+    try {
+      setIsMigrating(true);
+      setError(null);
+      await onMigrate();
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err);
+      setError(t("passkey.migration.error"));
+      if (onError) {
+        onError(err instanceof Error ? err : new Error(errorMessage));
+      }
+    } finally {
+      setIsMigrating(false);
+    }
+  };
+  const content = /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-xl volr:font-semibold volr:mb-4", children: t("passkey.migration.title") }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:my-6 volr:flex volr:justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(BiometricIcon, { type: biometricType, size: 48 }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:mb-4 volr:text-center volr-text-secondary", children: sourcePasskey.rpId ? t("passkey.migration.description").replace(
+      "{{sourceDomain}}",
+      sourcePasskey.rpId
+    ) : t("passkey.migration.descriptionGeneric") }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:mb-4 volr:p-3 volr:rounded-lg volr:border volr:border-slate-200 volr:bg-slate-50", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:justify-between volr:items-center volr:text-sm volr:mb-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr-text-secondary", children: t("passkey.migration.sourceDomain") }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:font-mono volr:text-xs", children: sourcePasskey.rpId })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:justify-between volr:items-center volr:text-sm", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr-text-secondary", children: t("passkey.migration.currentDomain") }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:font-mono volr:text-xs", children: currentDomain })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:mb-6 volr:p-3 volr:rounded-lg volr-hint", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "volr:text-sm volr:flex volr:items-start volr:gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:text-base", children: "\u2713" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("passkey.migration.benefits") })
+    ] }) }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:mb-4 volr:p-3 volr:rounded-lg volr:border volr:text-sm volr:text-left volr-error", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: error }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:flex-col volr:gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          variant: "primary",
+          fullWidth: true,
+          onClick: handleMigrate,
+          disabled: isMigrating,
+          children: isMigrating ? t("passkey.migration.inProgress") : t("passkey.migration.cta")
+        }
+      ),
+      onSkip && /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          variant: "ghost",
+          fullWidth: true,
+          onClick: onSkip,
+          disabled: isMigrating,
+          children: t("passkey.migration.later")
+        }
+      )
+    ] })
+  ] });
+  if (!wrapInModal) {
+    return content;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(Modal, { open: isOpen, onOpenChange: (open) => !open && onSkip?.(), children: content });
+}
 function PasskeyEnrollView({
   onComplete,
   onError,
@@ -1891,14 +1995,34 @@ function PasskeyEnrollView({
     [compatibility.platform]
   );
   const hasPasskey = user?.keyStorageType === "passkey";
+  const currentDomain = React13.useMemo(() => {
+    if (typeof window === "undefined") return "localhost";
+    return window.location.hostname;
+  }, []);
+  const migrationInfo = React13.useMemo(() => {
+    if (!user?.registeredPasskeys || user.registeredPasskeys.length === 0) {
+      return { needsMigration: false, sourcePasskey: null };
+    }
+    const hasPasskeyOnCurrentDomain = user.registeredPasskeys.some(
+      (pk) => pk.rpId === currentDomain
+    );
+    if (hasPasskeyOnCurrentDomain) {
+      return { needsMigration: false, sourcePasskey: null };
+    }
+    const sourcePasskey = user.registeredPasskeys[0];
+    return { needsMigration: true, sourcePasskey };
+  }, [user?.registeredPasskeys, currentDomain]);
   React13.useEffect(() => {
     console.log("[PasskeyEnrollView] User state:", {
       user,
       keyStorageType: user?.keyStorageType,
       evmAddress: user?.evmAddress,
-      hasPasskey
+      hasPasskey,
+      registeredPasskeys: user?.registeredPasskeys,
+      currentDomain,
+      migrationInfo
     });
-  }, [user, hasPasskey]);
+  }, [user, hasPasskey, currentDomain, migrationInfo]);
   React13.useEffect(() => {
     if (hasPasskey && !user?.evmAddress && !isRefreshing) {
       const refreshUserData = async () => {
@@ -2036,6 +2160,23 @@ function PasskeyEnrollView({
     }
     return /* @__PURE__ */ jsxRuntime.jsx(Modal, { open: isOpen, onOpenChange: (open) => !open && onLogout?.(), children: compatibilityContent });
   }
+  if (migrationInfo.needsMigration && migrationInfo.sourcePasskey) {
+    const handleMigration = async () => {
+      await handleEnroll();
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      PasskeyMigrationView,
+      {
+        sourcePasskey: migrationInfo.sourcePasskey,
+        currentDomain,
+        onMigrate: handleMigration,
+        onSkip: handleLogout,
+        onError,
+        isOpen,
+        wrapInModal
+      }
+    );
+  }
   if (hasPasskey) {
     const handleClose = () => {
       if (onClose) {
@@ -2949,6 +3090,7 @@ function SiweLoginScreen({
 }
 function SigninModal({ isOpen, onClose, onError }) {
   const { logout, user } = react.useVolrContext();
+  const { client } = react.useInternalAuth();
   const { appName, branding } = useVolrUI();
   const { requestEmailCode, verifyEmailCode, handleSocialLogin } = react.useVolrLogin();
   const [currentScreen, setCurrentScreen] = React13.useState("method-select");
@@ -2981,13 +3123,43 @@ function SigninModal({ isOpen, onClose, onError }) {
   const handleCodeSubmit = async (code) => {
     const result = await verifyEmailCode(email, code);
     if (result.keyStorageType) {
+      try {
+        const refreshed = await client.post(
+          "/auth/refresh",
+          {}
+        );
+        const currentRpId = typeof window !== "undefined" ? window.location.hostname : "localhost";
+        const passkeys = refreshed.user?.registeredPasskeys ?? [];
+        const hasCurrent = passkeys.some((p) => p.rpId === currentRpId);
+        const needsMigration = passkeys.length > 0 && !hasCurrent;
+        if (result.keyStorageType === "passkey" && needsMigration) {
+          setCurrentScreen("passkey-setup");
+          return;
+        }
+      } catch {
+      }
       onClose();
       return;
     }
     setCurrentScreen("passkey-setup");
   };
-  const handleSiweSuccess = (data) => {
+  const handleSiweSuccess = async (data) => {
     if (data.keyStorageType) {
+      try {
+        const refreshed = await client.post(
+          "/auth/refresh",
+          {}
+        );
+        const currentRpId = typeof window !== "undefined" ? window.location.hostname : "localhost";
+        const passkeys = refreshed.user?.registeredPasskeys ?? [];
+        const hasCurrent = passkeys.some((p) => p.rpId === currentRpId);
+        const needsMigration = passkeys.length > 0 && !hasCurrent;
+        if (data.keyStorageType === "passkey" && needsMigration) {
+          setCurrentScreen("passkey-setup");
+          return;
+        }
+      } catch {
+      }
       onClose();
       return;
     }
@@ -6825,8 +6997,16 @@ function OAuthCallbackHandler({
   const { isLoading, error } = react.useVolrAuthCallback({
     onSuccess: (resultUser) => {
       console.log("[OAuthCallbackHandler] Login successful:", resultUser.email);
+      const currentRpId = typeof window !== "undefined" ? window.location.hostname : "localhost";
+      const passkeys = resultUser.registeredPasskeys ?? [];
+      const hasCurrent = passkeys.some((p) => p.rpId === currentRpId);
+      const needsMigration = passkeys.length > 0 && !hasCurrent;
       if (!resultUser.keyStorageType) {
         onShowOnboarding();
+        return;
+      }
+      if (resultUser.keyStorageType === "passkey" && needsMigration) {
+        onShowOnboarding();
       }
     },
     onError: (err) => {