resolved all issues and implemented changes

backend/routes/indexer.go

@@ -68,8 +68,9 @@ func consumeIndexerMsg(w http.ResponseWriter, r *http.Request) {
 		if eventKey == pixelPlacedEvent {
 			processPixelPlacedEvent(event, w)
 		} else if eventKey == nftMintedEvent {
-			var tokenID int64
-			processNFTMintedEvent(event, w, tokenID)	
+			var tokenId int64
+			var _ int64 = tokenId
+			processNFTMintedEvent(event, w)
 		} else if eventKey == templateAddedEvent {
 			processTemplateAddedEvent(event, w)
 		} else if eventKey == newDay {
@@ -161,11 +162,15 @@ func processPixelPlacedEvent(event IndexerEvent, w http.ResponseWriter) {
 	WriteResultJson(w, "Pixel placement indexed successfully")
 }
 
-func processNFTMintedEvent(event IndexerEvent, w http.ResponseWriter, tokenID int64) {
+func processNFTMintedEvent(event IndexerEvent, w http.ResponseWriter) {
 	// TODO: combine high and low token ids
 	tokenIdLowHex := event.Event.Keys[1]
 	// TODO: tokenIdHighHex := event.Event.Keys[2]
 
+	tokenID := event.Event.Keys[1] // Assuming this is the token ID
+	sendNFTWebSocketMessage(tokenID)
+
+
 	positionHex := event.Event.Data[0]
 	widthHex := event.Event.Data[1]
 	heightHex := event.Event.Data[2]
@@ -278,9 +283,8 @@ func processNFTMintedEvent(event IndexerEvent, w http.ResponseWriter, tokenID in
 
 	// TODO: Ws message to all clients
 
-	WriteResultJson(w, "NFT mint indexed successfully");
+	WriteResultJson(w, "NFT mint indexed successfully")
 
-	sendNFTWebSocketMessage(tokenID) //**
 }
 
 func processTemplateAddedEvent(event IndexerEvent, w http.ResponseWriter) {
@@ -388,17 +392,15 @@ func processNewDayEvent(event IndexerEvent, w http.ResponseWriter) {
 	}
 }
 
-func sendNFTWebSocketMessage(tokenID int64) {
-    message := map[string]int64{"token_id": tokenID} // Message to be sent
-    messageBytes, _ := json.Marshal(message) // Convert message to bytes
-    for idx, conn := range core.ArtPeaceBackend.WSConnections {
-        if err := conn.WriteMessage(websocket.TextMessage, messageBytes); err != nil {
-            fmt.Println(err)
-            conn.Close()
-            core.ArtPeaceBackend.WSConnections = append(core.ArtPeaceBackend.WSConnections[:idx], core.ArtPeaceBackend.WSConnections[idx+1:]...)
-        }
-    }
+func sendNFTWebSocketMessage(tokenID string) {
+	message := map[string]interface{}{
+		"token_id":    tokenID,
+		"messageType": "nftMinted",
+	}
+	sendWebSocketMessage(message)
 }
 
+func sendWebSocketMessage(message map[string]interface{}) {
+	// Generic function to send a message over a WebSocket
+}
 
-

frontend/src/App.js

@@ -51,10 +51,16 @@ function App() {
     }
   }, [readyState]);
 
-  useEffect(() => {
-    if (lastJsonMessage) {
-        colorPixel(lastJsonMessage.position, lastJsonMessage.color);
-    }
+useEffect(() => {
+  if (lastJsonMessage) {
+      // Check the message type and handle accordingly
+      if (lastJsonMessage.messageType === 'colorPixel') {
+          colorPixel(lastJsonMessage.position, lastJsonMessage.color);
+      } else if (lastJsonMessage.messageType === 'nftMinted') {
+        //handle nft minted
+          const tokenID = lastJsonMessage.token_id;
+      }
+  }
 }, [lastJsonMessage]);
 
   // Colors
@@ -194,13 +200,6 @@ function App() {
   const tabs = ['Canvas', 'Factions', 'Quests', 'Vote', 'NFTs', 'Account'];
   const [activeTab, setActiveTab] = useState(tabs[0]);
 
-  useEffect(() => {
-    if (lastJsonMessage) {
-      // TODO: handle other events
-      colorPixel(lastJsonMessage.position, lastJsonMessage.color);
-    }
-  }, [lastJsonMessage]);
-
   return (
     <div className='App'>
       <CanvasContainer