Merge pull request #151 from horuslabsio/chore-add-image-fallback

Chore add image fallback
horuslabsio · Sep 19, 2024 · 6d0d454 · 6d0d454
2 parents a346603 + 6e747ff
commit 6d0d454
Showing 1 changed file with 9 additions and 14 deletions.
diff --git a/frontend/src/app/components/lib/AddressBar.tsx b/frontend/src/app/components/lib/AddressBar.tsx
@@ -14,20 +14,11 @@ import CopyButton from "../internal/util/CopyButton";
 const UserModal = () => {
   const { address } = useAccount();
   const { disconnect } = useDisconnect();
-
-  const [isCopied, setIsCopied] = useState(false);
+  const [imageError, setImageError] = useState(false);
   const { data: starkProfile } = useStarkProfile({
     address,
   });
 
-  useEffect(() => {
-    const id = setTimeout(() => {
-      setIsCopied(false);
-    }, 1500);
-
-    return () => clearTimeout(id);
-  }, [isCopied]);
-
   return (
     <GenericModal
       popoverId="user-popover"
@@ -47,11 +38,12 @@ const UserModal = () => {
 
           <div className="mx-auto">
             <div className="mx-auto mb-4 h-20 w-20 overflow-clip rounded-full md:h-24 md:w-24">
-              {starkProfile?.profilePicture ? (
+              {!imageError && starkProfile?.profilePicture ? (
                 <img
                   src={starkProfile?.profilePicture}
                   className="w-full rounded-full"
                   alt="starknet profile"
+                  onError={() => setImageError(true)}
                 />
               ) : (
                 <Blockies
@@ -99,7 +91,7 @@ const AddressBar = () => {
   const { data: starkProfile } = useStarkProfile({
     address,
   });
-
+  const [imageError, setImageError] = useState(false);
   if (!address) {
     return null;
   }
@@ -128,11 +120,14 @@ const AddressBar = () => {
       >
         {
           <span className="flex items-center">
-            {starkProfile?.profilePicture ? (
+            {!imageError && starkProfile?.profilePicture ? (
               <img
-                src={starkProfile?.profilePicture}
+                src={starkProfile.profilePicture}
                 className="mr-2 h-8 w-8 rounded-full"
                 alt="starknet profile"
+                onError={() => {
+                  setImageError(true);
+                }}
               />
             ) : (
               <Blockies seed={address} className="mr-2 h-8 w-8 rounded-full" />