fix: prevent to display a broken favicon

FuelLabs · Jan 10, 2025 · 7a0b55a · 7a0b55a
1 parent 9974a21
commit 7a0b55a
Showing 1 changed file with 13 additions and 2 deletions.
diff --git a/packages/app/src/systems/Account/components/QuickAccountConnect/DappAvatar.tsx b/packages/app/src/systems/Account/components/QuickAccountConnect/DappAvatar.tsx
@@ -1,13 +1,24 @@
 import { Icon } from '@fuel-ui/react';
+import { useState } from 'react';
 
 interface DappAvatarProps {
   favIconUrl: string | undefined;
   title: string | undefined;
 }
 
 export const DappAvatar = ({ favIconUrl, title }: DappAvatarProps) => {
-  if (favIconUrl) {
-    return <img src={favIconUrl} alt="favicon" />;
+  const [imageFallback, setImageFallback] = useState(false);
+
+  if (favIconUrl && !imageFallback) {
+    return (
+      <img
+        src={favIconUrl}
+        alt="favicon"
+        onError={() => {
+          setImageFallback(true);
+        }}
+      />
+    );
   }
 
   if (title) {