Fix: Vite issues

package.json

@@ -19,7 +19,8 @@
     "@tanstack/react-query": "^5.86.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "html2pdf.js": "^0.12.0",
+    "html2canvas-pro": "^1.5.11",
+    "jspdf": "^3.0.3",
     "lucide-react": "^0.542.0",
     "next": "15.5.2",
     "react": "19.1.0",

public/r/registry.json

@@ -21,7 +21,8 @@
         "@tanstack/react-query@^5.86.0",
         "react-hook-form@^7.62.0",
         "lucide-react@^0.542.0",
-        "html2pdf.js@^0.12.0"
+        "html2canvas-pro@^1.5.11",
+        "jspdf@^3.0.3"
       ],
       "files": [
         {
@@ -30,9 +31,19 @@
           "target": "components/payment-widget/payment-widget.tsx"
         },
         {
-          "path": "registry/default/payment-widget/context/payment-widget-context.tsx",
+          "path": "registry/default/payment-widget/context/payment-widget-context/index.ts",
           "type": "registry:component",
-          "target": "components/payment-widget/context/payment-widget-context.tsx"
+          "target": "components/payment-widget/context/payment-widget-context/index.ts"
+        },
+        {
+          "path": "registry/default/payment-widget/context/payment-widget-context/payment-widget-provider.tsx",
+          "type": "registry:component",
+          "target": "components/payment-widget/context/payment-widget-context/payment-widget-provider.tsx"
+        },
+        {
+          "path": "registry/default/payment-widget/context/payment-widget-context/use-payment-widget-context.ts",
+          "type": "registry:component",
+          "target": "components/payment-widget/context/payment-widget-context/use-payment-widget-context.ts"
         },
         {
           "path": "registry/default/payment-widget/components/connection-handler.tsx",
@@ -119,11 +130,6 @@
           "type": "registry:lib",
           "target": "components/payment-widget/types/index.ts"
         },
-        {
-          "path": "registry/default/payment-widget/types/html2pdf.d.ts",
-          "type": "registry:lib",
-          "target": "components/payment-widget/types/html2pdf.d.ts"
-        },
         {
           "path": "registry/default/payment-widget/context/web3-context.tsx",
           "type": "registry:component",

registry.json

@@ -21,7 +21,8 @@
         "@tanstack/react-query@^5.86.0",
         "react-hook-form@^7.62.0",
         "lucide-react@^0.542.0",
-        "html2pdf.js@^0.12.0"
+        "html2canvas-pro@^1.5.11",
+        "jspdf@^3.0.3"
       ],
       "files": [
         {
@@ -30,9 +31,19 @@
           "target": "components/payment-widget/payment-widget.tsx"
         },
         {
-          "path": "registry/default/payment-widget/context/payment-widget-context.tsx",
+          "path": "registry/default/payment-widget/context/payment-widget-context/index.ts",
           "type": "registry:component",
-          "target": "components/payment-widget/context/payment-widget-context.tsx"
+          "target": "components/payment-widget/context/payment-widget-context/index.ts"
+        },
+        {
+          "path": "registry/default/payment-widget/context/payment-widget-context/payment-widget-provider.tsx",
+          "type": "registry:component",
+          "target": "components/payment-widget/context/payment-widget-context/payment-widget-provider.tsx"
+        },
+        {
+          "path": "registry/default/payment-widget/context/payment-widget-context/use-payment-widget-context.ts",
+          "type": "registry:component",
+          "target": "components/payment-widget/context/payment-widget-context/use-payment-widget-context.ts"
         },
         {
           "path": "registry/default/payment-widget/components/connection-handler.tsx",
@@ -119,11 +130,6 @@
           "type": "registry:lib",
           "target": "components/payment-widget/types/index.ts"
         },
-        {
-          "path": "registry/default/payment-widget/types/html2pdf.d.ts",
-          "type": "registry:lib",
-          "target": "components/payment-widget/types/html2pdf.d.ts"
-        },
         {
           "path": "registry/default/payment-widget/context/web3-context.tsx",
           "type": "registry:component",

registry/default/payment-widget/components/currency-select.tsx

@@ -10,7 +10,7 @@ import {
   type ConversionCurrency,
 } from "../utils/currencies";
 import { Check } from "lucide-react";
-import { usePaymentWidgetContext } from "../context/payment-widget-context";
+import { usePaymentWidgetContext } from "../context/payment-widget-context/use-payment-widget-context";
 
 interface CurrencySelectProps {
   onSubmit: (currency: ConversionCurrency) => void;

registry/default/payment-widget/components/payment-confirmation.tsx

@@ -7,10 +7,10 @@ import {
   getSymbolOverride,
   type ConversionCurrency,
 } from "../utils/currencies";
-import { usePaymentWidgetContext } from "../context/payment-widget-context";
 import type { BuyerInfo, PaymentError } from "../types/index";
 import { useState } from "react";
 import type { TransactionReceipt } from "viem";
+import { usePaymentWidgetContext } from "../context/payment-widget-context/use-payment-widget-context";
 
 interface PaymentConfirmationProps {
   selectedCurrency: ConversionCurrency;

registry/default/payment-widget/components/payment-modal.tsx

@@ -13,10 +13,10 @@ import { BuyerInfoForm } from "./buyer-info-form";
 import { PaymentConfirmation } from "./payment-confirmation";
 import { PaymentSuccess } from "./payment-success";
 import { DisconnectWallet } from "./disconnect-wallet";
-import { usePaymentWidgetContext } from "../context/payment-widget-context";
 import type { BuyerInfo } from "../types/index";
 import type { ConversionCurrency } from "../utils/currencies";
 import type { TransactionReceipt } from "viem";
+import { usePaymentWidgetContext } from "../context/payment-widget-context/use-payment-widget-context";
 
 interface PaymentModalProps {
   isOpen: boolean;

registry/default/payment-widget/components/payment-success.tsx

@@ -9,9 +9,9 @@ import {
 } from "../utils/receipt";
 import { useRef } from "react";
 import { ReceiptPDFTemplate } from "../components/receipt/receipt-template";
-import { usePaymentWidgetContext } from "../context/payment-widget-context";
 import type { BuyerInfo } from "../types/index";
 import type { ConversionCurrency } from "../utils/currencies";
+import { usePaymentWidgetContext } from "../context/payment-widget-context/use-payment-widget-context";
 
 interface PaymentSuccessProps {
   requestId: string;
@@ -45,7 +45,7 @@ export function PaymentSuccess({
       walletAddress: connectedWalletAddress || "",
     },
     payment: {
-      amount: amountInUsd, // TODO connect to actual payout and exchange rate
+      amount: amountInUsd,
       chain: selectedCurrency.network,
       currency: selectedCurrency.symbol,
       exchangeRate: "1",
@@ -69,18 +69,37 @@ export function PaymentSuccess({
         return;
       }
 
-      const html2pdf = (await import("html2pdf.js")).default;
+      const html2canvas = (await import("html2canvas-pro")).default;
+      const jsPDF = (await import("jspdf")).default;
 
-      html2pdf()
-        .set({
-          margin: 1,
-          filename: `receipt-${receiptParams.metadata?.receiptNumber || "payment"}.pdf`,
-          image: { type: "jpeg", quality: 0.98 },
-          html2canvas: { scale: 2 },
-          jsPDF: { unit: "in", format: "a4", orientation: "portrait" },
-        })
-        .from(element)
-        .save();
+      const canvas = await html2canvas(element, {
+        scale: 2,
+        useCORS: true,
+        backgroundColor: "#ffffff",
+        width: element.scrollWidth,
+        height: element.scrollHeight,
+        windowWidth: element.scrollWidth,
+        windowHeight: element.scrollHeight,
+      });
+
+      const pdf = new jsPDF("p", "mm", "a4");
+      const imgData = canvas.toDataURL("image/png");
+
+      const pageWidth = 210;
+      const pageHeight = 297;
+      const margin = 10;
+      let imgWidth = pageWidth - margin * 2;
+      let imgHeight = (canvas.height * imgWidth) / canvas.width;
+      const maxHeight = pageHeight - margin * 2;
+      if (imgHeight > maxHeight) {
+        const ratio = maxHeight / imgHeight;
+        imgWidth = imgWidth * ratio;
+        imgHeight = imgHeight * ratio;
+      }
+      pdf.addImage(imgData, "PNG", margin, margin, imgWidth, imgHeight);
+      pdf.save(
+        `receipt-${receiptParams.metadata?.receiptNumber || "payment"}.pdf`,
+      );
     } catch (error) {
       console.error("Failed to download receipt:", error);
       alert("Failed to download receipt. Please try again.");
@@ -118,6 +137,8 @@ export function PaymentSuccess({
                 top: 0,
                 opacity: 0,
                 pointerEvents: "none",
+                width: "800px",
+                backgroundColor: "white",
               }}
             >
               <div ref={receiptRef}>

registry/default/payment-widget/components/receipt/styles.css

@@ -1,6 +1,6 @@
 .receipt-container {
   background-color: #ffffff;
-  padding: 20px;
+  padding: 32px;
   max-width: 800px;
   margin: 0 auto;
   font-family:

registry/default/payment-widget/constants.ts

@@ -1,5 +1,6 @@
 export const RN_API_URL =
-  process.env.NEXT_PUBLIC_REQUEST_API_URL || "https://api.request.network";
+  (typeof process !== "undefined" && process.env.NEXT_PUBLIC_REQUEST_API_URL) ||
+  "https://api.request.network";
 export const ICONS = {
   metamask:
     "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzUiIGhlaWdodD0iMzQiIHZpZXdCb3g9IjAgMCAzNSAzNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMyLjcwNzcgMzIuNzUyMkwyNS4xNjg4IDMwLjUxNzRMMTkuNDgzMyAzMy45MDA4TDE1LjUxNjcgMzMuODk5MUw5LjgyNzkzIDMwLjUxNzRMMi4yOTIyNSAzMi43NTIyTDAgMjUuMDQ4OUwyLjI5MjI1IDE2LjQ5OTNMMCA5LjI3MDk0TDIuMjkyMjUgMC4zMTIyNTZMMTQuMDY3NCA3LjMxNTU0SDIwLjkzMjZMMzIuNzA3NyAwLjMxMjI1NkwzNSA5LjI3MDk0TDMyLjcwNzcgMTYuNDk5M0wzNSAyNS4wNDg5TDMyLjcwNzcgMzIuNzUyMloiIGZpbGw9IiNGRjVDMTYiLz4KPHBhdGggZD0iTTIuMjkzOTUgMC4zMTIyNTZMMTQuMDY5MSA3LjMyMDQ3TDEzLjYwMDggMTIuMTMwMUwyLjI5Mzk1IDAuMzEyMjU2WiIgZmlsbD0iI0ZGNUMxNiIvPgo8cGF0aCBkPSJNOS44Mjk1OSAyNS4wNTIyTDE1LjAxMDYgMjguOTgxMUw5LjgyOTU5IDMwLjUxNzVWMjUuMDUyMloiIGZpbGw9IiNGRjVDMTYiLz4KPHBhdGggZD0iTTE0LjU5NjYgMTguNTU2NUwxMy42MDA5IDEyLjEzMzNMNy4yMjY5MiAxNi41MDA5TDcuMjIzNjMgMTYuNDk5M1YxNi41MDI1TDcuMjQzMzUgMjAuOTk4M0w5LjgyODA5IDE4LjU1NjVIOS44Mjk3NEgxNC41OTY2WiIgZmlsbD0iI0ZGNUMxNiIvPgo8cGF0aCBkPSJNMzIuNzA3NyAwLjMxMjI1NkwyMC45MzI2IDcuMzIwNDdMMjEuMzk5MyAxMi4xMzAxTDMyLjcwNzcgMC4zMTIyNTZaIiBmaWxsPSIjRkY1QzE2Ii8+CjxwYXRoIGQ9Ik0yNS4xNzIyIDI1LjA1MjJMMTkuOTkxMiAyOC45ODExTDI1LjE3MjIgMzAuNTE3NVYyNS4wNTIyWiIgZmlsbD0iI0ZGNUMxNiIvPgo8cGF0aCBkPSJNMjcuNzc2NiAxNi41MDI1SDI3Ljc3ODNIMjcuNzc2NlYxNi40OTkzTDI3Ljc3NSAxNi41MDA5TDIxLjQwMSAxMi4xMzMzTDIwLjQwNTMgMTguNTU2NUgyNS4xNzIyTDI3Ljc1ODYgMjAuOTk4M0wyNy43NzY2IDE2LjUwMjVaIiBmaWxsPSIjRkY1QzE2Ii8+CjxwYXRoIGQ9Ik05LjgyNzkzIDMwLjUxNzVMMi4yOTIyNSAzMi43NTIyTDAgMjUuMDUyMkg5LjgyNzkzVjMwLjUxNzVaIiBmaWxsPSIjRTM0ODA3Ii8+CjxwYXRoIGQ9Ik0xNC41OTQ3IDE4LjU1NDlMMTYuMDM0MSAyNy44NDA2TDE0LjAzOTMgMjIuNjc3N0w3LjIzOTc1IDIwLjk5ODRMOS44MjYxMyAxOC41NTQ5SDE0LjU5M0gxNC41OTQ3WiIgZmlsbD0iI0UzNDgwNyIvPgo8cGF0aCBkPSJNMjUuMTcyMSAzMC41MTc1TDMyLjcwNzggMzIuNzUyMkwzNS4wMDAxIDI1LjA1MjJIMjUuMTcyMVYzMC41MTc1WiIgZmlsbD0iI0UzNDgwNyIvPgo8cGF0aCBkPSJNMjAuNDA1MyAxOC41NTQ5TDE4Ljk2NTggMjcuODQwNkwyMC45NjA3IDIyLjY3NzdMMjcuNzYwMiAyMC45OTg0TDI1LjE3MjIgMTguNTU0OUgyMC40MDUzWiIgZmlsbD0iI0UzNDgwNyIvPgo8cGF0aCBkPSJNMCAyNS4wNDg4TDIuMjkyMjUgMTYuNDk5M0g3LjIyMTgzTDcuMjM5OTEgMjAuOTk2N0wxNC4wMzk0IDIyLjY3NkwxNi4wMzQzIDI3LjgzODlMMTUuMDA4OSAyOC45NzZMOS44Mjc5MyAyNS4wNDcySDBWMjUuMDQ4OFoiIGZpbGw9IiNGRjhENUQiLz4KPHBhdGggZD0iTTM1LjAwMDEgMjUuMDQ4OEwzMi43MDc4IDE2LjQ5OTNIMjcuNzc4M0wyNy43NjAyIDIwLjk5NjdMMjAuOTYwNyAyMi42NzZMMTguOTY1OCAyNy44Mzg5TDE5Ljk5MTIgMjguOTc2TDI1LjE3MjIgMjUuMDQ3MkgzNS4wMDAxVjI1LjA0ODhaIiBmaWxsPSIjRkY4RDVEIi8+CjxwYXRoIGQ9Ik0yMC45MzI1IDcuMzE1NDNIMTcuNDk5OUgxNC4wNjczTDEzLjYwMDYgMTIuMTI1MUwxNi4wMzQyIDI3LjgzNEgxOC45NjU2TDIxLjQwMDggMTIuMTI1MUwyMC45MzI1IDcuMzE1NDNaIiBmaWxsPSIjRkY4RDVEIi8+CjxwYXRoIGQ9Ik0yLjI5MjI1IDAuMzEyMjU2TDAgOS4yNzA5NEwyLjI5MjI1IDE2LjQ5OTNINy4yMjE4M0wxMy41OTkxIDEyLjEzMDFMMi4yOTIyNSAwLjMxMjI1NloiIGZpbGw9IiM2NjE4MDAiLz4KPHBhdGggZD0iTTEzLjE3IDIwLjQxOTlIMTAuOTM2OUw5LjcyMDk1IDIxLjYwNjJMMTQuMDQwOSAyMi42NzI3TDEzLjE3IDIwLjQxODJWMjAuNDE5OVoiIGZpbGw9IiM2NjE4MDAiLz4KPHBhdGggZD0iTTMyLjcwNzcgMC4zMTIyNTZMMzQuOTk5OSA5LjI3MDk0TDMyLjcwNzcgMTYuNDk5M0gyNy43NzgxTDIxLjQwMDkgMTIuMTMwMUwzMi43MDc3IDAuMzEyMjU2WiIgZmlsbD0iIzY2MTgwMCIvPgo8cGF0aCBkPSJNMjEuODMzIDIwLjQxOTlIMjQuMDY5NEwyNS4yODUzIDIxLjYwNzlMMjAuOTYwNCAyMi42NzZMMjEuODMzIDIwLjQxODJWMjAuNDE5OVoiIGZpbGw9IiM2NjE4MDAiLz4KPHBhdGggZD0iTTE5LjQ4MTcgMzAuODM2MkwxOS45OTExIDI4Ljk3OTRMMTguOTY1OCAyNy44NDIzSDE2LjAzMjdMMTUuMDA3MyAyOC45Nzk0TDE1LjUxNjcgMzAuODM2MiIgZmlsbD0iIzY2MTgwMCIvPgo8cGF0aCBkPSJNMTkuNDgxNiAzMC44MzU5VjMzLjkwMjFIMTUuNTE2NlYzMC44MzU5SDE5LjQ4MTZaIiBmaWxsPSIjQzBDNENEIi8+CjxwYXRoIGQ9Ik05LjgyOTU5IDMwLjUxNDJMMTUuNTIgMzMuOTAwOFYzMC44MzQ2TDE1LjAxMDYgMjguOTc3OEw5LjgyOTU5IDMwLjUxNDJaIiBmaWxsPSIjRTdFQkY2Ii8+CjxwYXRoIGQ9Ik0yNS4xNzIxIDMwLjUxNDJMMTkuNDgxNyAzMy45MDA4VjMwLjgzNDZMMTkuOTkxMSAyOC45Nzc4TDI1LjE3MjEgMzAuNTE0MloiIGZpbGw9IiNFN0VCRjYiLz4KPC9zdmc+",

registry/default/payment-widget/context/payment-widget-context/index.ts

@@ -0,0 +1,34 @@
+import { createContext } from "react";
+import type { ReceiptInfo, FeeInfo, PaymentError } from "../../types/index";
+import type { TransactionReceipt, WalletClient } from "viem";
+
+export interface PaymentWidgetContextValue {
+  amountInUsd: string;
+  recipientWallet: string;
+
+  walletAccount?: WalletClient;
+  connectedWalletAddress?: string;
+  isWalletOverride: boolean;
+
+  paymentConfig: {
+    rnApiClientId: string;
+    feeInfo?: FeeInfo;
+    supportedCurrencies: string[];
+  };
+
+  uiConfig: {
+    showRequestScanUrl: boolean;
+    showReceiptDownload: boolean;
+  };
+
+  receiptInfo: ReceiptInfo;
+
+  onSuccess?: (
+    requestId: string,
+    transactionReceipts: TransactionReceipt[],
+  ) => void | Promise<void>;
+  onError?: (error: PaymentError) => void | Promise<void>;
+}
+
+export const PaymentWidgetContext =
+  createContext<PaymentWidgetContextValue | null>(null);