RequestNetwork · rodrigopavezi · Jul 29, 2026 · Jul 28, 2026
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,7 +20,6 @@
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.0",
-    "@react-pdf/renderer": "^3.4.4",
     "@requestnetwork/currency": "^0.18.0",
     "@requestnetwork/data-format": "^0.19.0",
     "@requestnetwork/request-client.js": "^0.49.0",

diff --git a/src/app/error.tsx b/src/app/error.tsx
@@ -0,0 +1,52 @@
+/** @format */
+"use client";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import Link from "next/link";
+
+export default function ErrorPage({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <div className="flex pt-24 justify-center">
+      <Card className="flex-col justify-center items-center text-center h-[400px] w-[95%] md:h-[700px] pt-32 md:pt-52">
+        <CardHeader>
+          <CardTitle>Something went wrong</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <CardDescription>
+            An unexpected error occurred while loading this page.
+            {error.digest && (
+              <span className="block mt-2 text-xs">
+                Reference: {error.digest}
+              </span>
+            )}
+          </CardDescription>
+        </CardContent>
+        <CardFooter className="flex justify-center gap-4">
+          <button
+            type="button"
+            onClick={() => reset()}
+            className="font-medium text-emerald-700"
+          >
+            Try again
+          </button>
+          <div className="font-medium text-emerald-700">
+            <Link href="/">Back to home</Link>
+          </div>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}
diff --git a/src/app/global-error.tsx b/src/app/global-error.tsx
@@ -0,0 +1,52 @@
+/** @format */
+"use client";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <html lang="en">
+      <body>
+        <div className="flex pt-24 justify-center">
+          <Card className="flex-col justify-center items-center text-center h-[400px] w-[95%] md:h-[700px] pt-32 md:pt-52">
+            <CardHeader>
+              <CardTitle>Something went wrong</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <CardDescription>
+                A critical error occurred. Please reload the page.
+                {error.digest && (
+                  <span className="block mt-2 text-xs">
+                    Reference: {error.digest}
+                  </span>
+                )}
+              </CardDescription>
+            </CardContent>
+            <CardFooter className="flex justify-center">
+              <button
+                type="button"
+                onClick={() => reset()}
+                className="font-medium text-emerald-700"
+              >
+                Reload
+              </button>
+            </CardFooter>
+          </Card>
+        </div>
+      </body>
+    </html>
+  );
+}
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
@@ -0,0 +1,33 @@
+/** @format */
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import Link from "next/link";
+
+export default function NotFound() {
+  return (
+    <div className="flex pt-24 justify-center">
+      <Card className="flex-col justify-center items-center text-center h-[400px] w-[95%] md:h-[700px] pt-32 md:pt-52">
+        <CardHeader>
+          <CardTitle>Page not found</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <CardDescription>
+            The page you are looking for does not exist.
+          </CardDescription>
+        </CardContent>
+        <CardFooter className="flex justify-center">
+          <div className="font-medium text-emerald-700">
+            <Link href="/">Back to home</Link>
+          </div>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}
diff --git a/src/app/request/[id]/page.tsx b/src/app/request/[id]/page.tsx
@@ -35,7 +35,7 @@ import { useQuery } from "@tanstack/react-query";
 import { JsonEditor } from "json-edit-react";
 import { Copy, File, Loader2 } from "lucide-react";
 import Link from "next/link";
-import { redirect } from "next/navigation";
+import { notFound } from "next/navigation";
 import { useState } from "react";
 import TimeAgo from "timeago-react";
 
@@ -138,7 +138,7 @@ export default function RequestPage({ params: { id } }: RequestPageProps) {
   const { exportPDF } = useExportPDF();
   const [isDownloading, setIsDownloading] = useState(false);
 
-  const { data: request, isLoading: isLoadingRequest } = useQuery({
+  const { data: request, status: requestStatus } = useQuery({
     queryKey: ["request", id],
     queryFn: () => fetchRequest({ id }),
     ...commonQueryOptions,
@@ -147,10 +147,10 @@ export default function RequestPage({ params: { id } }: RequestPageProps) {
   const shortPaymentReference = request
     ? calculateShortPaymentReference(
         id,
-        request?.transactions[0].dataObject?.data?.parameters?.extensionsData[0]
-          ?.parameters.salt || "",
-        request?.transactions[0].dataObject?.data?.parameters?.extensionsData[0]
-          ?.parameters.paymentAddress || "",
+        request?.transactions?.[0]?.dataObject?.data?.parameters
+          ?.extensionsData?.[0]?.parameters.salt || "",
+        request?.transactions?.[0]?.dataObject?.data?.parameters
+          ?.extensionsData?.[0]?.parameters.paymentAddress || "",
       )
     : "";
 
@@ -173,17 +173,21 @@ export default function RequestPage({ params: { id } }: RequestPageProps) {
     ...commonQueryOptions,
   });
 
-  if (isLoadingRequest || isLoadingRequestPayments || isLoadingSRF) {
+  if (requestStatus === "pending" || isLoadingRequestPayments || isLoadingSRF) {
     return <Skeleton className="h-[500px] w-full rounded-xl" />;
   }
 
+  if (requestStatus === "error") {
+    return <div>Error occurred while fetching data.</div>;
+  }
+
   if (!request) {
-    redirect("/not-found");
+    notFound();
   }
 
-  const firstTransaction = request?.transactions[0];
+  const firstTransaction = request?.transactions?.[0];
   const lastTransaction =
-    request?.transactions[request.transactions.length - 1];
+    request?.transactions?.[request.transactions.length - 1];
 
   const balance = getBalance(requestPayments);
 
@@ -354,10 +358,10 @@ export default function RequestPage({ params: { id } }: RequestPageProps) {
                   <td className="text-muted-foreground">Created:</td>
                   <td className="pl-16">
                     <TimeAgo
-                      datetime={firstTransaction.blockTimestamp * 1000}
+                      datetime={(firstTransaction?.blockTimestamp || 0) * 1000}
                       locale="en_short"
                     />{" "}
-                    ({formatTimestamp(firstTransaction.blockTimestamp)})
+                    ({formatTimestamp(firstTransaction?.blockTimestamp || 0)})
                   </td>
                 </tr>
                 <tr>

diff --git a/src/components/payment-table.tsx b/src/components/payment-table.tsx
@@ -109,13 +109,19 @@ export const columns: ColumnDef<Payment>[] = [
   {
     accessorKey: "networkFee",
     header: "Network Fee",
-    cell: ({ row }) =>
-      formatUnits(
-        BigInt(
-          Number(row?.original?.gasUsed) * Number(row?.original?.gasPrice),
-        ),
-        18,
-      ),
+    cell: ({ row }) => {
+      const { gasUsed, gasPrice } = row.original;
+
+      if (!gasUsed || !gasPrice) {
+        return "N/A";
+      }
+
+      try {
+        return formatUnits(BigInt(gasUsed) * BigInt(gasPrice), 18);
+      } catch {
+        return "N/A";
+      }
+    },
   },
   {
     accessorKey: "feeAmount",

diff --git a/src/components/recent-payment-table.tsx b/src/components/recent-payment-table.tsx
@@ -27,14 +27,18 @@ import TimeAgo from "timeago-react";
 import { Skeleton } from "./ui/skeleton";
 
 export function RecentPaymentTable() {
-  const { payments, isLoading } = useLatestPayments({
+  const { payments, isLoading, status } = useLatestPayments({
     pollInterval: Number(process.env.NEXT_PUBLIC_POLL_INTERVAL) || 30000,
   });
 
   if (isLoading) {
     return <Skeleton className="h-full w-full rounded-xl" />;
   }
 
+  if (status === "error") {
+    return <div>Error occurred while fetching data.</div>;
+  }
+
   if (!payments) {
     return <div>No data</div>;
   }

diff --git a/src/components/recent-request-table.tsx b/src/components/recent-request-table.tsx
@@ -25,14 +25,18 @@ import TimeAgo from "timeago-react";
 import { Skeleton } from "./ui/skeleton";
 
 export function RecentRequestTable() {
-  const { requests, isLoading } = useLatestRequests({
+  const { requests, isLoading, status } = useLatestRequests({
     pollInterval: Number(process.env.NEXT_PUBLIC_POLL_INTERVAL) || 30000,
   });
 
   if (isLoading) {
     return <Skeleton className="h-svh w-full rounded-xl" />;
   }
 
+  if (status === "error") {
+    return <div>Error occurred while fetching data.</div>;
+  }
+
   if (!requests) {
     return <div>No data</div>;
   }

diff --git a/src/components/recent-srf-deployments-table.tsx b/src/components/recent-srf-deployments-table.tsx
@@ -25,14 +25,18 @@ import TimeAgo from "timeago-react";
 import { Skeleton } from "./ui/skeleton";
 
 export function RecentSRFDeploymentsTable() {
-  const { deployments, isLoading } = useLatestSRFDeployments({
+  const { deployments, isLoading, status } = useLatestSRFDeployments({
     pollInterval: Number(process.env.NEXT_PUBLIC_POLL_INTERVAL) || 30000,
   });
 
   if (isLoading) {
     return <Skeleton className="h-svh w-full rounded-xl" />;
   }
 
+  if (status === "error") {
+    return <div>Error occurred while fetching data.</div>;
+  }
+
   if (!deployments) {
     return <div>No data</div>;
   }

diff --git a/src/components/request-table.tsx b/src/components/request-table.tsx
@@ -51,10 +51,10 @@ export const columns: ColumnDef<Transaction>[] = [
     cell: ({ row }) => {
       return calculateShortPaymentReference(
         row.original.channelId,
-        row.original?.dataObject.data.parameters.extensionsData[0].parameters
-          .salt || "",
-        row.original?.dataObject.data.parameters.extensionsData[0].parameters
-          .paymentAddress || "",
+        row.original?.dataObject?.data?.parameters?.extensionsData?.[0]
+          ?.parameters?.salt || "",
+        row.original?.dataObject?.data?.parameters?.extensionsData?.[0]
+          ?.parameters?.paymentAddress || "",
       );
     },
   },

diff --git a/src/lib/hooks/use-export-pdf.tsx b/src/lib/hooks/use-export-pdf.tsx
@@ -2,8 +2,6 @@
 "use client";
 
 import type { Invoice, InvoiceItem } from "@requestnetwork/data-format";
-// @ts-expect-error: No html2pdf does not have the @types to install
-import html2pdf from "html2pdf.js";
 import { formatUnits, isAddress } from "viem";
 import { currencyManager } from "../currency-manager";
 import type { PaymentData } from "../types";
@@ -79,6 +77,9 @@ export default function useExportPDF() {
 
     const generatePDF = async () => {
       try {
+        // @ts-expect-error: html2pdf.js does not have the @types to install
+        const html2pdf = (await import("html2pdf.js")).default;
+
         const currencyDetails = getCurrencyDetails(invoice.currencyInfo?.value);
         const paymentCurrencyDetails = getCurrencyDetails(
           invoice.paymentData?.acceptedTokens?.length > 0