snakes v1

src/components/GameHistory.tsx

@@ -4,6 +4,7 @@ import { Game } from "@/types/Game";
 import { games } from "@/data/games";
 import { WAGER_PRIZE_MULT } from "@/shared/constants";
 import { EXPLORER_ADDRESS_TEMPLATE, API_URL } from "@/data/shared";
+import Image from 'next/image';
 
 interface GameHistory {
   address: string;
@@ -175,15 +176,19 @@ export default function GameHistoryModal({
                     {outcomeText}
                   </p>
                 </div>
-                <img
+                <Image
                   src={profileUrl}
                   alt="Profile"
-                  className="w-10 h-10 rounded-full border border-gray-700 object-cover"
+                  width={40}
+                  height={40}
+                  className="rounded-full border border-gray-700 object-cover"
                 />
-                <img
+                <Image
                   src={gameImageUrl}
                   alt="Game Thumbnail"
-                  className="w-16 h-16 rounded-md object-cover ml-4"
+                  width={64}
+                  height={64}
+                  className="rounded-md object-cover ml-4"
                 />
 
                 {/* View TX Action */}

src/components/HeroSection.tsx

@@ -28,32 +28,11 @@ export default function HeroSection() {
   const { user } = usePrivy();
   const iframeRef = useRef<HTMLIFrameElement>(null);
 
-
-  useEffect(()=>{
-    if(rematch){
-      if(!lastActiveBet){
-        console.log(`last active bet was null, heres active bet ${myActiveBet}`);
-      }
-      const isOwner = lastActiveBet?.owner_id == user?.id;
-      console.log(`rematch function ${isOwner ? "owner" : "joiner"} owner_id:${lastActiveBet?.owner_id}`);
-  
-      if(isOwner){
-        handleCreateRematch();
-      }else{
-        handleJoinRematch();
-      }
-    }
-    
-  },[rematch])
-
-
   const game_close_signal = (status: number) => {
     setRematch(status == 1);
     setMyActiveBet(undefined);
   };
 
-
-
   const updateBets = async () => {
     if(ready){
       const wallet = wallets.find((_wallet) => _wallet.type === "solana") || wallets[0];
@@ -218,16 +197,28 @@ export default function HeroSection() {
     }
   };
 
+  useEffect(() => {
+    if(rematch){
+      if(true){
+        handleCreateRematch();
+      }else{
+        handleJoinRematch();
+      }
+    }
+  },[rematch, handleCreateRematch, handleJoinRematch]);
 
+  useEffect(() => {
+    if (ready) {
+      updateBets();
+    }
+  }, [ready, updateBets]);
 
   useEffect(() => {
     if (!ready) return;
-
     updateBets();
     const interval = setInterval(updateBets, 3000);
-
     return () => clearInterval(interval);
-  }, [ready]);
+  }, [ready, updateBets]);
 
   useEffect(() => {
     const handleMessage = (event: MessageEvent) => {

src/components/OpenGames.tsx

@@ -97,7 +97,7 @@ export default function YourGames({ bets }: GameModalProps) {
     updateBets();
     const interval = setInterval(updateBets, 10000);
     return () => clearInterval(interval);
-  }, [bets]);
+  }, [bets, updateBets]);
 
   return (
     <section className="py-16 px-6">
@@ -162,7 +162,7 @@ export default function YourGames({ bets }: GameModalProps) {
                         height={24}
                         className="rounded-full"
                         onError={(e) => {
-                          // @ts-ignore
+                          //@ts-expect-error e.target has no src, but it needs to be changed
                           e.target.src = defaultPFP;
                           setFailedImages(prev => new Set(prev).add(ownerPFP));
                         }}
@@ -235,7 +235,7 @@ export default function YourGames({ bets }: GameModalProps) {
                                 height={32}
                                 className="w-8 h-8 rounded-full mr-2"
                                 onError={(e) => {
-                                  // @ts-ignore
+                                  //@ts-expect-error e.target has no src, but it needs to be changed
                                   e.target.src = defaultPFP;
                                   setFailedImages(prev => new Set(prev).add(modalOwnerPFP));
                                 }}

src/components/PrivyButton.tsx

@@ -370,10 +370,12 @@ export default function PrivyButton() {
             {/* Avatar + Link Twitter Row */}
             <div className="flex items-center justify-between gap-4 flex-wrap">
               <div className="flex items-center gap-4">
-                <img
+                <Image
                   src={user?.twitter ? (twitterProfilePic) : (avatar ?? customProfileUrl)}
-                  alt=""
+                  alt="Profile"
-                  className="w-16 h-16 rounded-full border border-gray-500 object-cover"
+                  width={64}
+                  height={64}
+                  className="rounded-full border border-gray-500 object-cover"
                 />
                 {(!user.twitter) ? (<label className="bg-gray-800 hover:bg-gray-700 text-white text-sm px-4 py-2 rounded-md cursor-pointer flex items-center gap-2">
                   <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -578,7 +580,7 @@ export default function PrivyButton() {
                           height={40}
                           className="w-10 h-10 rounded-full border border-gray-700 object-cover"
                           onError={(e) => {
-                            // @ts-ignore
+                            // @ts-expect-error - Type mismatch expected
                             e.target.src = defaultPFP;
                             setFailedImages(prev => new Set(prev).add(profileUrl));
                           }}
@@ -590,7 +592,7 @@ export default function PrivyButton() {
                           height={64}
                           className="w-16 h-16 rounded-md object-cover ml-4"
                           onError={(e) => {
-                            // @ts-ignore
+                            // @ts-expect-error - Type mismatch expected
                             e.target.src = "/duelfiassets/default-game-thumbnail.png";
                             setFailedImages(prev => new Set(prev).add(gameImageUrl));
                           }}

src/components/YourGames.tsx

@@ -40,7 +40,7 @@ export default function YourGames({bets}:GameModalProps) {
     updateBets();
     const interval = setInterval(updateBets, 10000);
     return () => clearInterval(interval);
-  }, [bets]);
+  }, [bets, ready, updateBets]);
 
   // Handle bet closing
   const handleCloseBet = async () => {

src/data/shared.ts

@@ -1,4 +1,4 @@
-import { Connection, clusterApiUrl } from "@solana/web3.js";
+import { Connection } from "@solana/web3.js";
 
 // Replace this URL with your dedicated RPC endpoint
 // You can get one from providers like QuickNode, Alchemy, Helius, or GenesysGo