@volr/react-ui 0.1.119 → 0.1.121

package/dist/index.cjs

@@ -531,6 +531,7 @@ var en = {
     titleTouchId: "Set up Touch ID login",
     titleFaceId: "Set up Face ID login",
     titleFingerprint: "Set up fingerprint login",
+    titleQrCode: "Set up mobile login",
     // Short description
     description: "Sign in instantly, every time.",
     // Legacy keys for backward compatibility
@@ -560,6 +561,7 @@ var en = {
       outdatedSamsung: "Please update Samsung Internet to the latest version.",
       outdatedIOS: "iOS 17.4 or later is required. Please check for software updates in Settings.",
       firefoxNotSupported: "Secure login is not available in Firefox. Please use Chrome or Safari.",
+      whaleNotSupported: "Secure login is not available in Whale browser. Please use Chrome.",
       unknownBrowser: "Secure login may not work properly in this browser.",
       openInExternalBrowser: "Open in external browser",
       updateBrowser: "Update browser",
@@ -573,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: {
@@ -758,6 +773,7 @@ var ko = {
     titleTouchId: "Touch ID \uB85C\uADF8\uC778 \uC124\uC815",
     titleFaceId: "Face ID \uB85C\uADF8\uC778 \uC124\uC815",
     titleFingerprint: "\uC9C0\uBB38 \uB85C\uADF8\uC778 \uC124\uC815",
+    titleQrCode: "\uD734\uB300\uD3F0\uC73C\uB85C \uB85C\uADF8\uC778 \uC124\uC815",
     // Short description
     description: "\uD55C \uBC88 \uB4F1\uB85D\uD558\uBA74, \uB2E4\uC74C\uBD80\uD130 \uBC14\uB85C \uB85C\uADF8\uC778",
     // Legacy keys for backward compatibility
@@ -787,6 +803,7 @@ var ko = {
       outdatedSamsung: "Samsung Internet\uC744 \uCD5C\uC2E0 \uBC84\uC804\uC73C\uB85C \uC5C5\uB370\uC774\uD2B8\uD574\uC8FC\uC138\uC694.",
       outdatedIOS: "iOS 17.4 \uC774\uC0C1 \uBC84\uC804\uC774 \uD544\uC694\uD569\uB2C8\uB2E4. \uC124\uC815\uC5D0\uC11C \uC18C\uD504\uD2B8\uC6E8\uC5B4 \uC5C5\uB370\uC774\uD2B8\uB97C \uD655\uC778\uD574\uC8FC\uC138\uC694.",
       firefoxNotSupported: "Firefox\uC5D0\uC11C\uB294 \uBCF4\uC548 \uB85C\uADF8\uC778\uC744 \uC0AC\uC6A9\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4. Chrome \uB610\uB294 Safari\uB97C \uC0AC\uC6A9\uD574\uC8FC\uC138\uC694.",
+      whaleNotSupported: "\uC6E8\uC77C \uBE0C\uB77C\uC6B0\uC800\uC5D0\uC11C\uB294 \uBCF4\uC548 \uB85C\uADF8\uC778\uC744 \uC0AC\uC6A9\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4. Chrome\uC744 \uC0AC\uC6A9\uD574\uC8FC\uC138\uC694.",
       unknownBrowser: "\uC774 \uBE0C\uB77C\uC6B0\uC800\uC5D0\uC11C\uB294 \uBCF4\uC548 \uB85C\uADF8\uC778\uC774 \uC81C\uB300\uB85C \uC791\uB3D9\uD558\uC9C0 \uC54A\uC744 \uC218 \uC788\uC2B5\uB2C8\uB2E4.",
       openInExternalBrowser: "\uC678\uBD80 \uBE0C\uB77C\uC6B0\uC800\uC5D0\uC11C \uC5F4\uAE30",
       updateBrowser: "\uBE0C\uB77C\uC6B0\uC800 \uC5C5\uB370\uC774\uD2B8",
@@ -800,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: {
@@ -1371,13 +1401,21 @@ var ModalHeader = ({
 
 // src/components/features/passkey/utils/biometric.ts
 function getBiometricType() {
+  if (typeof navigator === "undefined") return "fingerprint";
   const ua = navigator.userAgent;
+  const platform = navigator.platform || "";
   if (/iPhone|iPad|iPod/.test(ua)) {
     return "faceId";
   }
   if (/Macintosh|MacIntel/.test(ua)) {
+    if (navigator.maxTouchPoints > 1) {
+      return "faceId";
+    }
     return "touchId";
   }
+  if (/Win/.test(platform)) {
+    return "qrCode";
+  }
   return "fingerprint";
 }
 function getUserFriendlyError(error, t) {
@@ -1625,12 +1663,44 @@ function FingerprintIcon({ size }) {
     }
   );
 }
+function QrCodeIcon({ size }) {
+  const fill = "#f87171";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "3", width: "7", height: "7", rx: "1", fill }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "14", y: "3", width: "7", height: "7", rx: "1", fill }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "14", width: "7", height: "7", rx: "1", fill }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "5", y: "5", width: "3", height: "3", fill: "white" }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "16", y: "5", width: "3", height: "3", fill: "white" }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "5", y: "16", width: "3", height: "3", fill: "white" }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "14", y: "14", width: "2", height: "2", fill }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "17", y: "14", width: "2", height: "2", fill }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "14", y: "17", width: "2", height: "2", fill }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "19", y: "17", width: "2", height: "2", fill }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "17", y: "19", width: "2", height: "2", fill }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "11", y: "3", width: "2", height: "2", fill }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "11", y: "6", width: "2", height: "2", fill }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "11", y: "11", width: "2", height: "2", fill }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "11", width: "2", height: "2", fill }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "6", y: "11", width: "2", height: "2", fill })
+      ]
+    }
+  );
+}
 function BiometricIcon({ type, size = 80, animate = false }) {
   const className = animate ? "volr:animate-pulse" : "";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
     type === "faceId" && /* @__PURE__ */ jsxRuntime.jsx(FaceIdIcon, { size }),
     type === "touchId" && /* @__PURE__ */ jsxRuntime.jsx(TouchIdIcon, { size }),
-    type === "fingerprint" && /* @__PURE__ */ jsxRuntime.jsx(FingerprintIcon, { size })
+    type === "fingerprint" && /* @__PURE__ */ jsxRuntime.jsx(FingerprintIcon, { size }),
+    type === "qrCode" && /* @__PURE__ */ jsxRuntime.jsx(QrCodeIcon, { size })
   ] });
 }
 var sizeMap = {
@@ -1819,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,
@@ -1847,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 () => {
@@ -1965,13 +2133,16 @@ function PasskeyEnrollView({
     }
   };
   const getBiometricTitle = () => {
-    if (biometricType === "faceId") {
-      return t("passkey.titleFaceId");
-    }
-    if (biometricType === "touchId") {
-      return t("passkey.titleTouchId");
+    switch (biometricType) {
+      case "faceId":
+        return t("passkey.titleFaceId");
+      case "touchId":
+        return t("passkey.titleTouchId");
+      case "qrCode":
+        return t("passkey.titleQrCode");
+      default:
+        return t("passkey.titleFingerprint");
     }
-    return t("passkey.titleFingerprint");
   };
   const getBiometricDescription = () => {
     return t("passkey.description");
@@ -1989,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) {