@volr/react-ui 0.1.133 → 0.1.135

package/dist/index.d.cts

@@ -171,12 +171,12 @@ declare const en: {
             readonly alreadyExists: "Biometric login is already set up.";
             readonly notSupported: "Your device doesn't support biometric login.";
             readonly prfNotSupported: "Setup failed. Please use your device's biometric (Touch ID, Face ID) directly. Using other devices or apps may not work.";
-            readonly prfNotSupportedWindows: "Setup failed. Windows Hello doesn't support PRF. In the passkey picker, choose \"Use a phone or tablet\".";
+            readonly prfNotSupportedWindows: "Setup failed. The selected passkey provider doesn't support PRF. In the passkey picker, choose \"Use a phone or tablet\" and complete with Google Password Manager on the device.";
             readonly generic: "Setup failed. Please try again.";
         };
         readonly compatibility: {
             readonly title: "Browser Update Required";
-            readonly inAppBrowser: "Secure login is not available in this app browser. Please open in Safari or Chrome.";
+            readonly inAppBrowser: "Passkeys are not supported in in-app browsers. Please open in your device browser (Chrome/Edge on Android, Safari on iOS).";
             readonly outdatedChrome: "Chrome 109 or later is required. Please update your browser.";
             readonly outdatedEdge: "Edge 109 or later is required. Please update your browser.";
             readonly outdatedSafari: "Safari 17.4 or later is required. Please update macOS/iOS.";
@@ -198,7 +198,7 @@ declare const en: {
             readonly linux: "Scan the QR code on screen with your phone camera.";
             readonly default: "Please use this device's biometric.";
             readonly note: "Using other devices or apps may not work.";
-            readonly windowsNote: "This PC will use Face ID or fingerprint from your phone.";
+            readonly windowsNote: "Complete on your phone or tablet with Google Password Manager for best compatibility.";
         };
         readonly migration: {
             readonly title: "Set up passkey for this site";
@@ -322,6 +322,16 @@ declare const en: {
             readonly default: "Processing...";
             readonly doNotClose: "Please don't close this window";
         };
+        readonly result: {
+            readonly successTitle: "Payment Complete";
+            readonly failureTitle: "Payment Failed";
+            readonly successMessage: "Your payment has been processed successfully";
+            readonly failureMessage: "Something went wrong. Please try again.";
+            readonly amountLabel: "Amount";
+            readonly usdValueLabel: "USD Value";
+            readonly transactionLabel: "Transaction";
+            readonly reportIssue: "Report an issue";
+        };
     };
     readonly errors: {
         readonly webauthnNotSupported: "WebAuthn API is not supported";

package/dist/index.d.ts

@@ -171,12 +171,12 @@ declare const en: {
             readonly alreadyExists: "Biometric login is already set up.";
             readonly notSupported: "Your device doesn't support biometric login.";
             readonly prfNotSupported: "Setup failed. Please use your device's biometric (Touch ID, Face ID) directly. Using other devices or apps may not work.";
-            readonly prfNotSupportedWindows: "Setup failed. Windows Hello doesn't support PRF. In the passkey picker, choose \"Use a phone or tablet\".";
+            readonly prfNotSupportedWindows: "Setup failed. The selected passkey provider doesn't support PRF. In the passkey picker, choose \"Use a phone or tablet\" and complete with Google Password Manager on the device.";
             readonly generic: "Setup failed. Please try again.";
         };
         readonly compatibility: {
             readonly title: "Browser Update Required";
-            readonly inAppBrowser: "Secure login is not available in this app browser. Please open in Safari or Chrome.";
+            readonly inAppBrowser: "Passkeys are not supported in in-app browsers. Please open in your device browser (Chrome/Edge on Android, Safari on iOS).";
             readonly outdatedChrome: "Chrome 109 or later is required. Please update your browser.";
             readonly outdatedEdge: "Edge 109 or later is required. Please update your browser.";
             readonly outdatedSafari: "Safari 17.4 or later is required. Please update macOS/iOS.";
@@ -198,7 +198,7 @@ declare const en: {
             readonly linux: "Scan the QR code on screen with your phone camera.";
             readonly default: "Please use this device's biometric.";
             readonly note: "Using other devices or apps may not work.";
-            readonly windowsNote: "This PC will use Face ID or fingerprint from your phone.";
+            readonly windowsNote: "Complete on your phone or tablet with Google Password Manager for best compatibility.";
         };
         readonly migration: {
             readonly title: "Set up passkey for this site";
@@ -322,6 +322,16 @@ declare const en: {
             readonly default: "Processing...";
             readonly doNotClose: "Please don't close this window";
         };
+        readonly result: {
+            readonly successTitle: "Payment Complete";
+            readonly failureTitle: "Payment Failed";
+            readonly successMessage: "Your payment has been processed successfully";
+            readonly failureMessage: "Something went wrong. Please try again.";
+            readonly amountLabel: "Amount";
+            readonly usdValueLabel: "USD Value";
+            readonly transactionLabel: "Transaction";
+            readonly reportIssue: "Report an issue";
+        };
     };
     readonly errors: {
         readonly webauthnNotSupported: "WebAuthn API is not supported";

package/dist/index.js

@@ -547,12 +547,12 @@ var en = {
       alreadyExists: "Biometric login is already set up.",
       notSupported: "Your device doesn't support biometric login.",
       prfNotSupported: "Setup failed. Please use your device's biometric (Touch ID, Face ID) directly. Using other devices or apps may not work.",
-      prfNotSupportedWindows: `Setup failed. Windows Hello doesn't support PRF. In the passkey picker, choose "Use a phone or tablet".`,
+      prfNotSupportedWindows: `Setup failed. The selected passkey provider doesn't support PRF. In the passkey picker, choose "Use a phone or tablet" and complete with Google Password Manager on the device.`,
       generic: "Setup failed. Please try again."
     },
     compatibility: {
       title: "Browser Update Required",
-      inAppBrowser: "Secure login is not available in this app browser. Please open in Safari or Chrome.",
+      inAppBrowser: "Passkeys are not supported in in-app browsers. Please open in your device browser (Chrome/Edge on Android, Safari on iOS).",
       outdatedChrome: "Chrome 109 or later is required. Please update your browser.",
       outdatedEdge: "Edge 109 or later is required. Please update your browser.",
       outdatedSafari: "Safari 17.4 or later is required. Please update macOS/iOS.",
@@ -574,7 +574,7 @@ var en = {
       linux: "Scan the QR code on screen with your phone camera.",
       default: "Please use this device's biometric.",
       note: "Using other devices or apps may not work.",
-      windowsNote: "This PC will use Face ID or fingerprint from your phone."
+      windowsNote: "Complete on your phone or tablet with Google Password Manager for best compatibility."
     },
     migration: {
       title: "Set up passkey for this site",
@@ -698,6 +698,16 @@ var en = {
       confirming: "Almost done...",
       default: "Processing...",
       doNotClose: "Please don't close this window"
+    },
+    result: {
+      successTitle: "Payment Complete",
+      failureTitle: "Payment Failed",
+      successMessage: "Your payment has been processed successfully",
+      failureMessage: "Something went wrong. Please try again.",
+      amountLabel: "Amount",
+      usdValueLabel: "USD Value",
+      transactionLabel: "Transaction",
+      reportIssue: "Report an issue"
     }
   },
   errors: {
@@ -794,12 +804,12 @@ var ko = {
       alreadyExists: "\uC774\uBBF8 \uC0DD\uCCB4 \uB85C\uADF8\uC778\uC774 \uC124\uC815\uB418\uC5B4 \uC788\uC2B5\uB2C8\uB2E4.",
       notSupported: "\uC774 \uAE30\uAE30\uB294 \uC0DD\uCCB4 \uB85C\uADF8\uC778\uC744 \uC9C0\uC6D0\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4.",
       prfNotSupported: "\uC124\uC815\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4. \uC774 \uAE30\uAE30\uC758 \uC0DD\uCCB4 \uC778\uC99D(Touch ID, Face ID)\uC744 \uC9C1\uC811 \uC120\uD0DD\uD574\uC8FC\uC138\uC694. \uB2E4\uB978 \uAE30\uAE30\uB098 \uC571 \uC0AC\uC6A9 \uC2DC \uB3D9\uC791\uD558\uC9C0 \uC54A\uC744 \uC218 \uC788\uC2B5\uB2C8\uB2E4.",
-      prfNotSupportedWindows: '\uC124\uC815\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4. Windows Hello\uB294 PRF\uB97C \uC9C0\uC6D0\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4. \uD328\uC2A4\uD0A4 \uC120\uD0DD \uD654\uBA74\uC5D0\uC11C "\uD734\uB300\uD3F0/\uD0DC\uBE14\uB9BF \uC0AC\uC6A9"\uC744 \uC120\uD0DD\uD574\uC8FC\uC138\uC694.',
+      prfNotSupportedWindows: '\uC124\uC815\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4. \uC120\uD0DD\uD55C \uD328\uC2A4\uD0A4 \uC81C\uACF5\uC790\uAC00 PRF\uB97C \uC9C0\uC6D0\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4. \uD328\uC2A4\uD0A4 \uC120\uD0DD \uD654\uBA74\uC5D0\uC11C "\uD734\uB300\uD3F0/\uD0DC\uBE14\uB9BF \uC0AC\uC6A9"\uC744 \uC120\uD0DD\uD558\uACE0, \uD734\uB300\uD3F0/\uD0DC\uBE14\uB9BF\uC5D0\uC11C\uB294 Google Password Manager\uB85C \uC9C4\uD589\uD574\uC8FC\uC138\uC694.',
       generic: "\uC124\uC815\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4. \uB2E4\uC2DC \uC2DC\uB3C4\uD574\uC8FC\uC138\uC694."
     },
     compatibility: {
       title: "\uBE0C\uB77C\uC6B0\uC800 \uC5C5\uB370\uC774\uD2B8 \uD544\uC694",
-      inAppBrowser: "\uD604\uC7AC \uC571 \uB0B4 \uBE0C\uB77C\uC6B0\uC800\uC5D0\uC11C\uB294 \uBCF4\uC548 \uB85C\uADF8\uC778\uC744 \uC0AC\uC6A9\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4. Safari \uB610\uB294 Chrome\uC5D0\uC11C \uC5F4\uC5B4\uC8FC\uC138\uC694.",
+      inAppBrowser: "\uC571 \uB0B4 \uBE0C\uB77C\uC6B0\uC800\uC5D0\uC11C\uB294 \uD328\uC2A4\uD0A4 \uB85C\uADF8\uC778\uC744 \uC9C0\uC6D0\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4. \uAE30\uBCF8 \uBE0C\uB77C\uC6B0\uC800(\uC548\uB4DC\uB85C\uC774\uB4DC: Chrome/Edge, iOS: Safari)\uC5D0\uC11C \uB2E4\uC2DC \uC2DC\uB3C4\uD574\uC8FC\uC138\uC694.",
       outdatedChrome: "Chrome 109 \uC774\uC0C1 \uBC84\uC804\uC774 \uD544\uC694\uD569\uB2C8\uB2E4. \uBE0C\uB77C\uC6B0\uC800\uB97C \uC5C5\uB370\uC774\uD2B8\uD574\uC8FC\uC138\uC694.",
       outdatedEdge: "Edge 109 \uC774\uC0C1 \uBC84\uC804\uC774 \uD544\uC694\uD569\uB2C8\uB2E4. \uBE0C\uB77C\uC6B0\uC800\uB97C \uC5C5\uB370\uC774\uD2B8\uD574\uC8FC\uC138\uC694.",
       outdatedSafari: "Safari 17.4 \uC774\uC0C1 \uBC84\uC804\uC774 \uD544\uC694\uD569\uB2C8\uB2E4. macOS/iOS\uB97C \uC5C5\uB370\uC774\uD2B8\uD574\uC8FC\uC138\uC694.",
@@ -821,7 +831,7 @@ var ko = {
       linux: "\uD734\uB300\uD3F0 \uCE74\uBA54\uB77C\uB85C \uD654\uBA74\uC758 QR \uCF54\uB4DC\uB97C \uC2A4\uCE94\uD574\uC8FC\uC138\uC694.",
       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.",
-      windowsNote: "\uC774 PC\uC5D0\uC11C\uB294 \uD734\uB300\uD3F0\uC758 Face ID \uB610\uB294 \uC9C0\uBB38 \uC778\uC2DD\uC744 \uC0AC\uC6A9\uD569\uB2C8\uB2E4."
+      windowsNote: "\uD734\uB300\uD3F0/\uD0DC\uBE14\uB9BF\uC5D0\uC11C\uB294 Google Password Manager\uB85C \uC9C4\uD589\uD558\uBA74 \uC548\uC815\uC801\uC785\uB2C8\uB2E4."
     },
     migration: {
       title: "\uC774 \uC0AC\uC774\uD2B8\uC6A9 \uD328\uC2A4\uD0A4 \uC124\uC815",
@@ -970,6 +980,16 @@ var ko = {
       confirming: "\uAC70\uC758 \uC644\uB8CC...",
       default: "\uCC98\uB9AC \uC911...",
       doNotClose: "\uCC3D\uC744 \uB2EB\uC9C0 \uB9C8\uC138\uC694"
+    },
+    result: {
+      successTitle: "\uACB0\uC81C \uC644\uB8CC",
+      failureTitle: "\uACB0\uC81C \uC2E4\uD328",
+      successMessage: "\uACB0\uC81C\uAC00 \uC815\uC0C1\uC801\uC73C\uB85C \uCC98\uB9AC\uB418\uC5C8\uC2B5\uB2C8\uB2E4.",
+      failureMessage: "\uBB38\uC81C\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4. \uB2E4\uC2DC \uC2DC\uB3C4\uD574\uC8FC\uC138\uC694.",
+      amountLabel: "\uAE08\uC561",
+      usdValueLabel: "USD \uAC00\uCE58",
+      transactionLabel: "\uD2B8\uB79C\uC7AD\uC158",
+      reportIssue: "\uBB38\uC81C \uC2E0\uACE0\uD558\uAE30"
     }
   },
   errors: {
@@ -6001,6 +6021,15 @@ function usePaymentModalState(open, onOpenChange) {
       });
       createdPaymentId = payment.id;
       dispatch({ type: "SET_CREATED_PAYMENT", payment });
+      if (payment.status !== "PENDING") {
+        const alreadyProcessedError = new Error(
+          payment.status === "CONFIRMED" ? "This payment has already been completed. If you used an idempotencyKey, the original payment was already processed." : `Payment already processed with status: ${payment.status}. If you used an idempotencyKey, the original payment was already processed.`
+        );
+        alreadyProcessedError.code = "PAYMENT_ALREADY_PROCESSED";
+        alreadyProcessedError.paymentStatus = payment.status;
+        alreadyProcessedError.payment = payment;
+        throw alreadyProcessedError;
+      }
       paymentOptions.options.handlers?.onCreated?.({ id: payment.id });
       const evmClient = evm.client(tokenInfo.chainId);
       dispatch({ type: "SET_PROCESSING_STEP", step: "broadcasting" });
@@ -6046,13 +6075,28 @@ function usePaymentModalState(open, onOpenChange) {
       }
     } catch (err) {
       console.error("Payment failed:", err);
-      if (createdPaymentId) {
+      const isAlreadyProcessed = err.code === "PAYMENT_ALREADY_PROCESSED";
+      if (createdPaymentId && !isAlreadyProcessed) {
         try {
           await failPendingPayment(createdPaymentId);
         } catch (failErr) {
           console.error("Failed to mark payment as failed:", failErr);
         }
       }
+      if (isAlreadyProcessed && err.payment) {
+        dispatch({ type: "PAYMENT_SUCCESS", payment: err.payment });
+        if (err.payment.status === "CONFIRMED") {
+          paymentOptions?.onComplete?.(err.payment);
+        } else {
+          const paymentError2 = {
+            code: err.code || "PAYMENT_ALREADY_PROCESSED",
+            message: err.message || "Payment already processed."
+          };
+          dispatch({ type: "PAYMENT_ERROR", error: paymentError2 });
+          paymentOptions?.onError?.(paymentError2);
+        }
+        return;
+      }
       const paymentError = {
         code: err.code || "PAYMENT_FAILED",
         message: err.message || "Payment failed. Please try again."
@@ -6612,8 +6656,14 @@ var PaymentResultView = ({
   onRetry,
   onReport
 }) => {
+  const { t } = useI18n();
   const isSuccess = payment.status === "CONFIRMED";
   payment.status === "FAILED" || !!error;
+  const isInAppBrowserError = error?.code === "INAPP_BROWSER_NOT_SUPPORTED";
+  const handleOpenExternalBrowser = () => {
+    if (typeof window === "undefined") return;
+    window.open(window.location.href, "_system");
+  };
   return /* @__PURE__ */ jsxs("div", { className: "volr:space-y-6", children: [
     /* @__PURE__ */ jsx("div", { className: "volr:flex volr:justify-center volr:pt-2", children: isSuccess ? /* @__PURE__ */ jsx("div", { className: "volr:w-14 volr:h-14 volr:rounded-full volr:bg-green-50 volr:flex volr:items-center volr:justify-center", children: /* @__PURE__ */ jsx(
       "svg",
@@ -6651,12 +6701,12 @@ var PaymentResultView = ({
       }
     ) }) }),
     /* @__PURE__ */ jsxs("div", { className: "volr:text-center volr:space-y-1", children: [
-      /* @__PURE__ */ jsx("h3", { className: "volr:text-lg volr:font-semibold volr:text-slate-900", children: isSuccess ? "Payment Complete" : "Payment Failed" }),
-      /* @__PURE__ */ jsx("p", { className: "volr:text-sm volr:text-slate-500", children: isSuccess ? "Your payment has been processed successfully" : error?.message || "Something went wrong. Please try again." })
+      /* @__PURE__ */ jsx("h3", { className: "volr:text-lg volr:font-semibold volr:text-slate-900", children: isSuccess ? t("payment.result.successTitle") : t("payment.result.failureTitle") }),
+      /* @__PURE__ */ jsx("p", { className: "volr:text-sm volr:text-slate-500", children: isSuccess ? t("payment.result.successMessage") : isInAppBrowserError ? t("passkey.compatibility.inAppBrowser") : error?.message || t("payment.result.failureMessage") })
     ] }),
     isSuccess && payment.txHash && /* @__PURE__ */ jsxs("div", { className: "volr:bg-slate-50 volr:rounded-lg volr:p-4 volr:space-y-2", children: [
       /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:justify-between volr:text-sm", children: [
-        /* @__PURE__ */ jsx("span", { className: "volr:text-slate-500", children: "Amount" }),
+        /* @__PURE__ */ jsx("span", { className: "volr:text-slate-500", children: t("payment.result.amountLabel") }),
         /* @__PURE__ */ jsxs("span", { className: "volr:font-medium volr:text-slate-900", children: [
           (Number(payment.amount) / Math.pow(10, payment.token.decimals)).toLocaleString(),
           " ",
@@ -6664,14 +6714,14 @@ var PaymentResultView = ({
         ] })
       ] }),
       payment.totalUsd && /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:justify-between volr:text-sm", children: [
-        /* @__PURE__ */ jsx("span", { className: "volr:text-slate-500", children: "USD Value" }),
+        /* @__PURE__ */ jsx("span", { className: "volr:text-slate-500", children: t("payment.result.usdValueLabel") }),
         /* @__PURE__ */ jsxs("span", { className: "volr:text-slate-600", children: [
           "$",
           parseFloat(payment.totalUsd).toFixed(2)
         ] })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:justify-between volr:text-sm", children: [
-        /* @__PURE__ */ jsx("span", { className: "volr:text-slate-500", children: "Transaction" }),
+        /* @__PURE__ */ jsx("span", { className: "volr:text-slate-500", children: t("payment.result.transactionLabel") }),
         /* @__PURE__ */ jsxs("code", { className: "volr:text-xs volr:text-slate-600 volr:font-mono", children: [
           payment.txHash.slice(0, 8),
           "...",
@@ -6679,14 +6729,23 @@ var PaymentResultView = ({
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "volr:space-y-4", children: isSuccess ? /* @__PURE__ */ jsx(Button, { onClick: onDone, className: "volr:w-full", children: "Done" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Button, { onClick: onRetry, className: "volr:w-full", children: "Try Again" }),
+    /* @__PURE__ */ jsx("div", { className: "volr:space-y-4", children: isSuccess ? /* @__PURE__ */ jsx(Button, { onClick: onDone, className: "volr:w-full", children: t("common.done") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      isInAppBrowserError && /* @__PURE__ */ jsx(Button, { onClick: handleOpenExternalBrowser, className: "volr:w-full", children: t("passkey.compatibility.openInExternalBrowser") }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: onRetry,
+          className: "volr:w-full",
+          variant: isInAppBrowserError ? "secondary" : void 0,
+          children: t("common.tryAgain")
+        }
+      ),
       /* @__PURE__ */ jsx(
         "button",
         {
           onClick: onReport,
           className: "volr:w-full volr:text-sm volr:text-slate-400 hover:volr:text-slate-600 volr:transition-colors volr:py-2",
-          children: "Report an issue"
+          children: t("payment.result.reportIssue")
         }
       )
     ] }) }),