fix: resolve all ESLint errors and warnings

- Fix React hooks rules violations by moving all hooks to top level
- Fix unescaped entities in JSX (apostrophes and quotes)
- Replace <img> tags with Next.js <Image /> components
- Fix ESLint config anonymous default export warning

All files now pass ESLint with 0 errors and 0 warnings

Author: aguilar1x

apps/web/eslint.config.mjs

@@ -9,9 +9,11 @@ const compat = new FlatCompat({
   baseDirectory: __dirname,
 });
 
-export default [
+const config = [
   {
     ignores: ['**/node_modules/**', '.next/**'],
   },
   ...compat.extends('next/core-web-vitals'),
 ];
+
+export default config;

apps/web/src/app/booking/confirmation/[bookingId]/page.tsx

@@ -25,14 +25,15 @@ export default function BookingConfirmationPageRoute() {
   // Improve type safety for route parameters
   const bookingId = Array.isArray(params.bookingId) ? params.bookingId[0] : params.bookingId;
 
+  // Always call hooks at the top level - before any conditional returns
+  const { bookingData, loading, error } = useBookingDetails(bookingId || '');
+
   if (!bookingId) {
     // Handle missing bookingId case
     router.push('/');
     return null;
   }
 
-  const { bookingData, loading, error } = useBookingDetails(bookingId);
-
   if (loading) {
     return (
       <BookingPageLayout>

apps/web/src/app/dashboard/page.tsx

@@ -44,7 +44,7 @@ export default function DashboardPage() {
       <div className="flex flex-col items-center justify-center min-h-screen text-center">
         <h1 className="text-2xl font-bold mb-4">Welcome, Host!</h1>
         <p className="mb-4">
-          You don't have any properties yet. Please create a property to access the host dashboard.
+          You don&apos;t have any properties yet. Please create a property to access the host dashboard.
         </p>
         <Link
           href="/add-property"

apps/web/src/components/blockchain/BlockchainStatusBadge.tsx

@@ -25,12 +25,10 @@ export function BlockchainStatusBadge({
   const [status, setStatus] = useState<PropertyBlockchainStatus | null>(null);
   const [isLoading, setIsLoading] = useState(false);
 
-  // Don't render if blockchain features are disabled
-  if (!isBlockchainEnabled()) {
-    return null;
-  }
-
+  // Always call hooks at the top level - before any conditional returns
   const loadStatus = useCallback(async () => {
+    if (!isBlockchainEnabled()) return;
+
     setIsLoading(true);
     try {
       const blockchainStatus = await getPropertyBlockchainStatus(propertyId);
@@ -47,11 +45,16 @@ export function BlockchainStatusBadge({
   }, [propertyId]);
 
   useEffect(() => {
-    if (propertyId) {
+    if (propertyId && isBlockchainEnabled()) {
       loadStatus();
     }
   }, [propertyId, loadStatus]);
 
+  // Don't render if blockchain features are disabled
+  if (!isBlockchainEnabled()) {
+    return null;
+  }
+
   if (isLoading) {
     return (
       <Badge variant="outline" className={`${className} ${getSizeClasses(size)}`}>
@@ -128,11 +131,10 @@ export function BlockchainStatusIcon({
 }) {
   const [status, setStatus] = useState<PropertyBlockchainStatus | null>(null);
 
-  if (!isBlockchainEnabled()) {
-    return null;
-  }
-
+  // Always call hooks at the top level - before any conditional returns
   useEffect(() => {
+    if (!isBlockchainEnabled()) return;
+
     const loadStatus = async () => {
       try {
         const blockchainStatus = await getPropertyBlockchainStatus(propertyId);
@@ -147,6 +149,10 @@ export function BlockchainStatusIcon({
     }
   }, [propertyId]);
 
+  if (!isBlockchainEnabled()) {
+    return null;
+  }
+
   if (!status) {
     return (
       <Shield

apps/web/src/components/blockchain/BlockchainVerification.tsx

@@ -35,12 +35,10 @@ export function BlockchainVerification({ propertyId, className }: BlockchainVeri
   const [isLoading, setIsLoading] = useState(false);
   const [isVerifying, setIsVerifying] = useState(false);
 
-  // Don't render if blockchain features are disabled
-  if (!isBlockchainEnabled()) {
-    return null;
-  }
-
+  // Always call hooks at the top level - before any conditional returns
   const loadStatus = useCallback(async () => {
+    if (!isBlockchainEnabled()) return;
+
     setIsLoading(true);
     try {
       const blockchainStatus = await getPropertyBlockchainStatus(propertyId);
@@ -57,6 +55,8 @@ export function BlockchainVerification({ propertyId, className }: BlockchainVeri
   }, [propertyId]);
 
   const handleVerify = async () => {
+    if (!isBlockchainEnabled()) return;
+
     setIsVerifying(true);
     try {
       const blockchainStatus = await getPropertyBlockchainStatus(propertyId);
@@ -106,9 +106,16 @@ export function BlockchainVerification({ propertyId, className }: BlockchainVeri
   };
 
   useEffect(() => {
-    loadStatus();
+    if (isBlockchainEnabled()) {
+      loadStatus();
+    }
   }, [loadStatus]);
 
+  // Don't render if blockchain features are disabled
+  if (!isBlockchainEnabled()) {
+    return null;
+  }
+
   if (isLoading && !status) {
     return (
       <Card className={`p-4 ${className}`}>

apps/web/src/components/booking/BookingForm.tsx

@@ -4,6 +4,7 @@ import { Calendar } from '@/components/ui/calendar';
 import { Card } from '@/components/ui/card';
 import { useWallet } from '@/hooks/useWallet';
 import { format } from 'date-fns';
+import Image from 'next/image';
 import { useState } from 'react';
 import type { DateRange } from 'react-day-picker';
 import { toast } from 'react-hot-toast';
@@ -86,10 +87,11 @@ export function BookingForm({ onSubmit, propertyId }: BookingFormProps) {
         <Card className="p-6">
           <h1 className="mb-4 text-2xl font-bold">{property.title}</h1>
           <div className="relative mb-4 aspect-video rounded-lg overflow-hidden">
-            <img
+            <Image
               src={property.image || '/placeholder.svg'}
               alt={property.title}
-              className="h-full w-full object-cover"
+              fill
+              className="object-cover"
             />
           </div>
           <div className="space-y-4">

apps/web/src/components/booking/confirmation/BookingDetailsCard.tsx

@@ -3,6 +3,7 @@
 import { Card, CardHeader } from '@/components/ui/card';
 import type { BookingData } from '@/types/booking';
 import { format } from 'date-fns';
+import Image from 'next/image';
 import { Calendar, DollarSign, MapPin, Users } from 'lucide-react';
 
 interface BookingDetailsCardProps {
@@ -25,9 +26,11 @@ export function BookingDetailsCard({ bookingData }: BookingDetailsCardProps) {
         <div className="flex items-start space-x-4">
           <div className="w-20 h-20 rounded-lg bg-muted flex items-center justify-center overflow-hidden">
             {property.image ? (
-              <img
+              <Image
                 src={property.image}
                 alt={property.title}
+                width={80}
+                height={80}
                 className="w-full h-full object-cover"
               />
             ) : (

apps/web/src/components/booking/confirmation/EscrowStatusCard.tsx

@@ -19,6 +19,9 @@ export function EscrowStatusCard({
   totalAmount,
   bookingId,
 }: EscrowStatusCardProps) {
+  // Always call hooks at the top level - before any conditional returns
+  const { escrowData } = useEscrowStatus(bookingId || '', initialStatus);
+
   if (!bookingId) {
     return (
       <Card className="overflow-hidden">
@@ -29,7 +32,6 @@ export function EscrowStatusCard({
       </Card>
     );
   }
-  const { escrowData } = useEscrowStatus(bookingId, initialStatus);
 
   const currentStatus = escrowData?.status || initialStatus;
   const lastUpdated = escrowData?.lastUpdated || new Date();

apps/web/src/components/dashboard/BookingHistory.tsx

@@ -452,7 +452,7 @@ const BookingHistory: React.FC<BookingHistoryProps> = ({
                   <AlertCircle className="w-5 h-5 text-yellow-600 mt-0.5 mr-2" />
                   <div className="text-sm text-yellow-800 dark:text-yellow-200">
                     <p className="font-medium">Cancellation Policy</p>
-                    <p>You may be charged a cancellation fee depending on the property's policy.</p>
+                    <p>You may be charged a cancellation fee depending on the property&apos;s policy.</p>
                   </div>
                 </div>
               </div>

apps/web/src/components/escrows/exampleInitializeContract.tsx

@@ -1,6 +1,6 @@
 import { useInitializeContract } from '~/hooks/escrows/useInitializeContract';
 
-export const exampleInitializeContract = () => {
+export function ExampleInitializeContract() {
   const { handleSubmit } = useInitializeContract();
 
   // Mock payload MultiRelease escrow