@volr/react-ui 0.1.120 → 0.1.121

package/dist/index.d.cts

@@ -61,6 +61,7 @@ declare const VolrUIProvider: React$1.FC<VolrUIProviderProps>;
 /**
  * Passkey Enrollment View Component
  * Modern passkey setup with device-specific biometric icons
+ * Includes cross-domain migration detection and guidance
  */
 interface PasskeyEnrollViewProps {
     onComplete: () => void;
@@ -194,6 +195,19 @@ declare const en: {
             readonly default: "Please use this device's biometric.";
             readonly note: "Using other devices or apps may not work.";
         };
+        readonly migration: {
+            readonly title: "Set up passkey for this site";
+            readonly description: "Your wallet was created on {{sourceDomain}}. To use it here, you need to set up a new passkey for this site.";
+            readonly descriptionGeneric: "Your wallet was created on a different site. To use it here, you need to set up a new passkey for this site.";
+            readonly currentDomain: "Current site";
+            readonly sourceDomain: "Original site";
+            readonly benefits: "Your wallet address and balance will remain the same.";
+            readonly cta: "Set up passkey";
+            readonly later: "Do it later";
+            readonly inProgress: "Setting up...";
+            readonly success: "Passkey set up successfully!";
+            readonly error: "Failed to set up passkey. Please try again.";
+        };
     };
     readonly success: {
         readonly title: "Success!";

package/dist/index.d.ts

@@ -61,6 +61,7 @@ declare const VolrUIProvider: React$1.FC<VolrUIProviderProps>;
 /**
  * Passkey Enrollment View Component
  * Modern passkey setup with device-specific biometric icons
+ * Includes cross-domain migration detection and guidance
  */
 interface PasskeyEnrollViewProps {
     onComplete: () => void;
@@ -194,6 +195,19 @@ declare const en: {
             readonly default: "Please use this device's biometric.";
             readonly note: "Using other devices or apps may not work.";
         };
+        readonly migration: {
+            readonly title: "Set up passkey for this site";
+            readonly description: "Your wallet was created on {{sourceDomain}}. To use it here, you need to set up a new passkey for this site.";
+            readonly descriptionGeneric: "Your wallet was created on a different site. To use it here, you need to set up a new passkey for this site.";
+            readonly currentDomain: "Current site";
+            readonly sourceDomain: "Original site";
+            readonly benefits: "Your wallet address and balance will remain the same.";
+            readonly cta: "Set up passkey";
+            readonly later: "Do it later";
+            readonly inProgress: "Setting up...";
+            readonly success: "Passkey set up successfully!";
+            readonly error: "Failed to set up passkey. Please try again.";
+        };
     };
     readonly success: {
         readonly title: "Success!";

package/dist/index.js

@@ -570,6 +570,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: {
@@ -799,6 +812,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: {
@@ -1858,6 +1884,84 @@ function PasskeyCompatibilityScreen({
     ] })
   ] });
 }
+function PasskeyMigrationView({
+  sourcePasskey,
+  currentDomain,
+  onMigrate,
+  onSkip,
+  onError,
+  isOpen = true,
+  wrapInModal = true
+}) {
+  const { t } = useI18n();
+  const [isMigrating, setIsMigrating] = useState(false);
+  const [error, setError] = 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__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("p", { className: "volr:text-xl volr:font-semibold volr:mb-4", children: t("passkey.migration.title") }),
+    /* @__PURE__ */ jsx("div", { className: "volr:my-6 volr:flex volr:justify-center", children: /* @__PURE__ */ jsx(BiometricIcon, { type: biometricType, size: 48 }) }),
+    /* @__PURE__ */ 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__ */ jsxs("div", { className: "volr:mb-4 volr:p-3 volr:rounded-lg volr:border volr:border-slate-200 volr:bg-slate-50", children: [
+      /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:justify-between volr:items-center volr:text-sm volr:mb-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "volr-text-secondary", children: t("passkey.migration.sourceDomain") }),
+        /* @__PURE__ */ jsx("span", { className: "volr:font-mono volr:text-xs", children: sourcePasskey.rpId })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:justify-between volr:items-center volr:text-sm", children: [
+        /* @__PURE__ */ jsx("span", { className: "volr-text-secondary", children: t("passkey.migration.currentDomain") }),
+        /* @__PURE__ */ jsx("span", { className: "volr:font-mono volr:text-xs", children: currentDomain })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "volr:mb-6 volr:p-3 volr:rounded-lg volr-hint", children: /* @__PURE__ */ jsxs("p", { className: "volr:text-sm volr:flex volr:items-start volr:gap-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "volr:text-base", children: "\u2713" }),
+      /* @__PURE__ */ jsx("span", { children: t("passkey.migration.benefits") })
+    ] }) }),
+    error && /* @__PURE__ */ jsx("div", { className: "volr:mb-4 volr:p-3 volr:rounded-lg volr:border volr:text-sm volr:text-left volr-error", children: /* @__PURE__ */ jsx("span", { children: error }) }),
+    /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:flex-col volr:gap-3", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "primary",
+          fullWidth: true,
+          onClick: handleMigrate,
+          disabled: isMigrating,
+          children: isMigrating ? t("passkey.migration.inProgress") : t("passkey.migration.cta")
+        }
+      ),
+      onSkip && /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          fullWidth: true,
+          onClick: onSkip,
+          disabled: isMigrating,
+          children: t("passkey.migration.later")
+        }
+      )
+    ] })
+  ] });
+  if (!wrapInModal) {
+    return content;
+  }
+  return /* @__PURE__ */ jsx(Modal, { open: isOpen, onOpenChange: (open) => !open && onSkip?.(), children: content });
+}
 function PasskeyEnrollView({
   onComplete,
   onError,
@@ -1886,14 +1990,34 @@ function PasskeyEnrollView({
     [compatibility.platform]
   );
   const hasPasskey = user?.keyStorageType === "passkey";
+  const currentDomain = useMemo(() => {
+    if (typeof window === "undefined") return "localhost";
+    return window.location.hostname;
+  }, []);
+  const migrationInfo = 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]);
   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]);
   useEffect(() => {
     if (hasPasskey && !user?.evmAddress && !isRefreshing) {
       const refreshUserData = async () => {
@@ -2031,6 +2155,23 @@ function PasskeyEnrollView({
     }
     return /* @__PURE__ */ jsx(Modal, { open: isOpen, onOpenChange: (open) => !open && onLogout?.(), children: compatibilityContent });
   }
+  if (migrationInfo.needsMigration && migrationInfo.sourcePasskey) {
+    const handleMigration = async () => {
+      await handleEnroll();
+    };
+    return /* @__PURE__ */ jsx(
+      PasskeyMigrationView,
+      {
+        sourcePasskey: migrationInfo.sourcePasskey,
+        currentDomain,
+        onMigrate: handleMigration,
+        onSkip: handleLogout,
+        onError,
+        isOpen,
+        wrapInModal
+      }
+    );
+  }
   if (hasPasskey) {
     const handleClose = () => {
       if (onClose) {