From f1616bb82eab3ba0ea9847a9d45716e994e89152 Mon Sep 17 00:00:00 2001
From: aniket866 <iamaniketkumarmaner@gmail.com>
Date: Sat, 28 Feb 2026 23:59:42 +0530
Subject: [PATCH 1/4] fix-error

---
 frontend/src/components/InvoicePreview.jsx | 35 +++++++++++-----------
 1 file changed, 17 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/InvoicePreview.jsx b/frontend/src/components/InvoicePreview.jsx
index 3e7e895d..aeee9d79 100644
--- a/frontend/src/components/InvoicePreview.jsx
+++ b/frontend/src/components/InvoicePreview.jsx
@@ -38,6 +38,7 @@ import PaidIcon from "@mui/icons-material/CheckCircle";
 import UnpaidIcon from "@mui/icons-material/Pending";
 import CancelIcon from "@mui/icons-material/Cancel";
 import CurrencyExchangeIcon from "@mui/icons-material/CurrencyExchange";
+import React, { useState } from "react";
 
 const InvoicePreview = ({
   invoice,
@@ -55,6 +56,7 @@ const InvoicePreview = ({
   };
 
   const networkFee = formatFee(fee);
+  const [logoError, setLogoError] = useState(false);
 
   return (
     <div className="flex flex-col h-full">
@@ -62,28 +64,25 @@ const InvoicePreview = ({
         id="invoice-print"
         className="bg-white p-5 sm:p-6 lg:p-8 rounded-lg shadow-sm border border-gray-200 max-w-4xl mx-auto w-full my-4 sm:my-6"
       >
-        {/* Header - Enhanced Layout with Bigger Logo */}
+{/* Header - Enhanced Layout with Bigger Logo */}
         <div className="border-b-2 border-gray-200 pb-5 mb-6">
           <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
             <div className="flex items-center space-x-4">
               <div className="bg-white p-3.5 rounded-xl border-2 border-gray-200 shadow-lg flex-shrink-0 hover:shadow-xl transition-shadow duration-200">
-                <img
-                  src="/logo.png"
-                  alt="Chainvoice"
-                  className="h-14 w-14 sm:h-16 sm:w-16 md:h-20 md:w-20 object-contain"
-                  onError={(e) => {
-                    e.target.style.display = "none";
-                    const fallback = e.target.parentElement.querySelector(
-                      ".logo-fallback"
-                    );
-                    if (fallback) fallback.style.display = "flex";
-                  }}
-                />
-                <div className="logo-fallback hidden h-14 w-14 sm:h-16 sm:w-16 md:h-20 md:w-20 bg-gradient-to-br from-green-500 to-emerald-600 rounded-xl items-center justify-center shadow-sm">
-                  <span className="text-white font-bold text-xl sm:text-2xl md:text-3xl">
-                    CV
-                  </span>
-                </div>
+                {!logoError ? (
+                  <img
+                    src="/logo.png"
+                    alt="Chainvoice"
+                    className="h-14 w-14 sm:h-16 sm:w-16 md:h-20 md:w-20 object-contain"
+                    onError={() => setLogoError(true)}
+                  />
+                ) : (
+                  <div className="h-14 w-14 sm:h-16 sm:w-16 md:h-20 md:w-20 bg-gradient-to-br from-green-500 to-emerald-600 rounded-xl flex items-center justify-center shadow-sm">
+                    <span className="text-white font-bold text-xl sm:text-2xl md:text-3xl">
+                      CV
+                    </span>
+                  </div>
+                )}
               </div>
               <div className="flex flex-col justify-center">
                 <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold mb-1 leading-tight">

From 9bdeb0dc0f702642c70578528e8a915e329b6a5b Mon Sep 17 00:00:00 2001
From: aniket866 <iamaniketkumarmaner@gmail.com>
Date: Sun, 1 Mar 2026 00:09:45 +0530
Subject: [PATCH 2/4] fix-error

---
 frontend/src/components/CountryPicker.jsx | 40 +++++++++++++----------
 frontend/src/page/ReceivedInvoice.jsx     | 33 +++++++++----------
 2 files changed, 39 insertions(+), 34 deletions(-)

diff --git a/frontend/src/components/CountryPicker.jsx b/frontend/src/components/CountryPicker.jsx
index 0b781e2c..4edb1ac7 100644
--- a/frontend/src/components/CountryPicker.jsx
+++ b/frontend/src/components/CountryPicker.jsx
@@ -16,6 +16,12 @@ const CountryPicker = ({
   const [searchQuery, setSearchQuery] = useState("");
   const inputRef = useRef(null);
   const searchInputRef = useRef(null);
+  const [failedFlags, setFailedFlags] = useState({});
+
+
+  const handleImageError = (code) => {
+    setFailedFlags((prev) => ({ ...prev, [code]: true }));
+  };
 
   // Find selected country
   const selectedCountry = countriesData.find(
@@ -54,7 +60,7 @@ const CountryPicker = ({
     return `https://flagcdn.com/w40/${code.toLowerCase()}.png`;
   };
 
-  return (
+return (
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
         <button
@@ -70,14 +76,14 @@ const CountryPicker = ({
           <div className="flex items-center gap-2 flex-1 min-w-0">
             {selectedCountry ? (
               <>
-                <img
-                  src={getFlagUrl(selectedCountry.code)}
-                  alt={selectedCountry.name}
-                  className="w-5 h-4 object-cover rounded-sm flex-shrink-0"
-                  onError={(e) => {
-                    e.target.style.display = "none";
-                  }}
-                />
+                {!failedFlags[selectedCountry.code] && (
+                  <img
+                    src={getFlagUrl(selectedCountry.code)}
+                    alt={selectedCountry.name}
+                    className="w-5 h-4 object-cover rounded-sm flex-shrink-0"
+                    onError={() => handleImageError(selectedCountry.code)}
+                  />
+                )}
                 <span className="truncate text-left">{selectedCountry.name}</span>
               </>
             ) : (
@@ -121,14 +127,14 @@ const CountryPicker = ({
                     selectedCountry?.code === country.code && "bg-accent"
                   )}
                 >
-                  <img
-                    src={getFlagUrl(country.code)}
-                    alt={country.name}
-                    className="w-5 h-4 object-cover rounded-sm flex-shrink-0"
-                    onError={(e) => {
-                      e.target.style.display = "none";
-                    }}
-                  />
+                  {!failedFlags[country.code] && (
+                    <img
+                      src={getFlagUrl(country.code)}
+                      alt={country.name}
+                      className="w-5 h-4 object-cover rounded-sm flex-shrink-0"
+                      onError={() => handleImageError(country.code)}
+                    />
+                  )}
                   <span className="text-left">{country.name}</span>
                 </button>
               ))}
diff --git a/frontend/src/page/ReceivedInvoice.jsx b/frontend/src/page/ReceivedInvoice.jsx
index 1bac242f..78ed431f 100644
--- a/frontend/src/page/ReceivedInvoice.jsx
+++ b/frontend/src/page/ReceivedInvoice.jsx
@@ -98,6 +98,8 @@ function ReceivedInvoice() {
     selectedInvoice: null,
   });
 
+  const [logoError, setLogoError] = useState(false);
+
   const { tokens } = useTokenList(chainId || 1);
 
   const handleChangePage = (event, newPage) => {
@@ -1562,23 +1564,20 @@ function ReceivedInvoice() {
                   <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-6">
                     <div className="flex items-center space-x-4">
                       <div className="bg-white p-3.5 rounded-xl border-2 border-gray-200 shadow-lg flex-shrink-0">
-                        <img
-                          src="/logo.png"
-                          alt="Chainvoice"
-                          className="h-16 w-16 object-contain"
-                          onError={(e) => {
-                            e.target.style.display = "none";
-                            const fallback = e.target.parentElement.querySelector(
-                              ".logo-fallback"
-                            );
-                            if (fallback) fallback.style.display = "flex";
-                          }}
-                        />
-                        <div className="logo-fallback hidden h-16 w-16 bg-gradient-to-br from-green-500 to-emerald-600 rounded-xl items-center justify-center shadow-sm">
-                          <span className="text-white font-bold text-2xl">
-                            CV
-                          </span>
-                        </div>
+                        {!logoError ? (
+                          <img
+                            src="/logo.png"
+                            alt="Chainvoice"
+                            className="h-16 w-16 object-contain"
+                            onError={() => setLogoError(true)}
+                          />
+                        ) : (
+                          <div className="h-16 w-16 bg-gradient-to-br from-green-500 to-emerald-600 rounded-xl flex items-center justify-center shadow-sm">
+                            <span className="text-white font-bold text-2xl">
+                              CV
+                            </span>
+                          </div>
+                        )}
                       </div>
                       <div className="flex flex-col justify-center">
                         <h1 className="text-3xl sm:text-4xl font-bold mb-1 leading-tight">

From 661a63b1d51a2ba47843112be2a8c453b2ec93b2 Mon Sep 17 00:00:00 2001
From: Aniket <iamaniketkumarmaner@gmail.com>
Date: Sun, 1 Mar 2026 00:19:10 +0530
Subject: [PATCH 3/4] Code rabbit follow-up

---
 frontend/src/components/InvoicePreview.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/InvoicePreview.jsx b/frontend/src/components/InvoicePreview.jsx
index aeee9d79..a6bf2f86 100644
--- a/frontend/src/components/InvoicePreview.jsx
+++ b/frontend/src/components/InvoicePreview.jsx
@@ -38,7 +38,7 @@ import PaidIcon from "@mui/icons-material/CheckCircle";
 import UnpaidIcon from "@mui/icons-material/Pending";
 import CancelIcon from "@mui/icons-material/Cancel";
 import CurrencyExchangeIcon from "@mui/icons-material/CurrencyExchange";
-import React, { useState } from "react";
+import { useState } from "react";
 
 const InvoicePreview = ({
   invoice,

From 6d8a0d7786f59cf1111bffd47d29dbe58b3c3533 Mon Sep 17 00:00:00 2001
From: Aniket <iamaniketkumarmaner@gmail.com>
Date: Sun, 22 Mar 2026 20:21:09 +0530
Subject: [PATCH 4/4] Fix applied as suggested by reviewer

---
 frontend/src/components/InvoicePreview.jsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/InvoicePreview.jsx b/frontend/src/components/InvoicePreview.jsx
index a6bf2f86..508f470a 100644
--- a/frontend/src/components/InvoicePreview.jsx
+++ b/frontend/src/components/InvoicePreview.jsx
@@ -57,6 +57,7 @@ const InvoicePreview = ({
 
   const networkFee = formatFee(fee);
   const [logoError, setLogoError] = useState(false);
+  const [tokenLogoError, setTokenLogoError] = useState(false);
 
   return (
     <div className="flex flex-col h-full">
@@ -235,15 +236,13 @@ const InvoicePreview = ({
             Payment Currency
           </h3>
           <div className="flex items-center">
-            {invoice.paymentToken?.logo ? (
+            {invoice.paymentToken?.logo && !tokenLogoError ? (
               <div className="bg-white p-1.5 rounded-lg border border-gray-200 mr-3">
                 <img
                   src={invoice.paymentToken.logo}
                   alt={invoice.paymentToken.symbol}
                   className="w-7 h-7 sm:w-8 sm:h-8 object-contain"
-                  onError={(e) => {
-                    e.target.src = "/tokenImages/generic.png";
-                  }}
+                  onError={() => setTokenLogoError(true)}
                 />
               </div>
             ) : (
@@ -452,4 +451,3 @@ const InvoicePreview = ({
 };
 
 export default InvoicePreview;
-