Commit Review Workspace ?

- diff --git a/src/components/sports/SportsMatchList.tsx b/src/components/sports/SportsMatchList.tsx
- index a9c0b8b..da81ff5 100644
- import { useThemeColors } from "../../hooks/useThemeColors";
- import type { CricketMatch } from "../../types/cricket";
- import { useEffect, useRef, useState } from "react";
- 
- interface SportsMatchListProps {
- matches: CricketMatch[];
- showLive?: boolean;
- }
- 
- export default function SportsMatchList({ matches, showLive = false }: SportsMatchListProps) {
- const colors = useThemeColors();
- 
-   // Track price changes for flash animation
- const [flashingOdds, setFlashingOdds] = useState<Record<string, boolean>>({});
- const prevOddsRef = useRef<Record<string, any>>({});
- 

+ diff --git a/src/components/sports/SportsMatchList.tsx b/src/components/sports/SportsMatchList.tsx
+ index a9c0b8b..da81ff5 100644
+ import { useThemeColors } from "../../hooks/useThemeColors";
+ import type { CricketMatch } from "../../types/cricket";
+ import { useEffect, useRef, useState } from "react";
+ // import { socket } from "../../services/socket";
+ 
+ interface SportsMatchListProps {
+ matches: CricketMatch[];
+ showLive?: boolean;
+ }
+ 
+ const getMatchOddsMarket = (match: any) =>
+   match.listingOdds?.find((m: any) => m.marketName?.toLowerCase() === 'match odds');
+ // console.log("Socket Data is recieved",socket);
+ const extractPrice = (data: any): number | null => {
+   if (!data) return null;
+   // Can be object {price, size} or array [{price, size}]

- diff --git a/src/hooks/useListingOddsSocket.ts b/src/hooks/useListingOddsSocket.ts
- index f11fb6a..9c5b913 100644
- const [isConnected, setIsConnected] = useState(false);
- const [error, setError] = useState<string | null>(null);
- const onUpdateRef = useRef(onUpdate);
- 
- useEffect(() => {
- onUpdateRef.current = onUpdate;
- }, [onUpdate]);
- 
- useEffect(() => {
-     if (!eventIds || eventIds.length === 0) {
-       return;
-     }
- 
- const socket = io(SOCKET_URL, {
- transports: ["websocket", "polling"],
- socketRef.current = socket;

+ diff --git a/src/hooks/useListingOddsSocket.ts b/src/hooks/useListingOddsSocket.ts
+ index f11fb6a..9c5b913 100644
+ const [isConnected, setIsConnected] = useState(false);
+ const [error, setError] = useState<string | null>(null);
+ const onUpdateRef = useRef(onUpdate);
+   const eventIdsKey = eventIds.join(',');
+ 
+ useEffect(() => {
+ onUpdateRef.current = onUpdate;
+ }, [onUpdate]);
+ 
+   // Create socket once, recreate when eventIds change
+ useEffect(() => {
+     if (!eventIds || eventIds.length === 0) return;
+ 
+ const socket = io(SOCKET_URL, {
+ transports: ["websocket", "polling"],
+ socketRef.current = socket;

- diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
- index 0b9923a..4dd8ed2 100644
- 
- // Update local matches when initial data loads
- useEffect(() => {
-     console.log("📥 Initial matches loaded:", initialMatches.length);
- setMatches(initialMatches);
- }, [initialMatches]);
- 
- // Get all event IDs for socket connection
- const eventIds = matches.map(m => m.eventId);
- 
-   console.log("🎯 Event IDs for socket:", eventIds);
- 
- // Socket connection for real-time listing odds updates
- const { isConnected } = useListingOddsSocket(eventIds, (socketData) => {
-     const timestamp = new Date().toLocaleTimeString();
-     console.log(`🔄 [${timestamp}] ========== SOCKET DATA RECEIVED ==========`);

+ diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
+ index 0b9923a..4dd8ed2 100644
+ 
+ // Update local matches when initial data loads
+ useEffect(() => {
+     // console.log("📥 Initial matches loaded:", initialMatches.length);
+ setMatches(initialMatches);
+ }, [initialMatches]);
+ 
+ // Get all event IDs for socket connection
+ const eventIds = matches.map(m => m.eventId);
+ 
+   // console.log("🎯 Event IDs for socket:", eventIds);
+ 
+ // Socket connection for real-time listing odds updates
+ const { isConnected } = useListingOddsSocket(eventIds, (socketData) => {
+     // const timestamp = new Date().toLocaleTimeString();
+     // console.log(`🔄 [${timestamp}] ========== SOCKET DATA RECEIVED ==========`);

- diff --git a/src/pages/Sports.tsx b/src/pages/Sports.tsx
- index bd04f0a..8f7b751 100644
- import { useState, useEffect } from "react";
- import { useParams } from "react-router-dom";
- import BannerCarousel from "../components/banner/BannerCarousel";
- import SportsTabNavigation from "../components/sports/SportsTabNavigation";
- // Local state for matches with real-time updates
- const [matches, setMatches] = useState<CricketMatch[]>([]);
- 
-   // Update local matches when initial data loads
- useEffect(() => {
-     console.log("📥 Initial matches loaded:", initialMatches.length);
- setMatches(initialMatches);
- }, [initialMatches]);
- 
-   // Get all event IDs for socket connection
-   const eventIds = matches.map(m => m.eventId);
-   

+ diff --git a/src/pages/Sports.tsx b/src/pages/Sports.tsx
+ index bd04f0a..8f7b751 100644
+ import { useState, useEffect, useMemo, useCallback } from "react";
+ import { useParams } from "react-router-dom";
+ import BannerCarousel from "../components/banner/BannerCarousel";
+ import SportsTabNavigation from "../components/sports/SportsTabNavigation";
+ // Local state for matches with real-time updates
+ const [matches, setMatches] = useState<CricketMatch[]>([]);
+ 
+ useEffect(() => {
+ setMatches(initialMatches);
+ }, [initialMatches]);
+ 
+   // All eventIds for socket join
+   const allEventIds = useMemo(() => matches.map(m => m.eventId), [matches.length]);
+ 
+   const handleSocketUpdate = useCallback((socketData: any) => {
+     const updatedEventId = String(socketData?.eventId);