merge to prod

.gitignore

@@ -27,6 +27,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel

components/DwifiMap.js

@@ -1,9 +1,8 @@
 import { useState, useEffect, useRef } from 'react';
-import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
+import { MapContainer, TileLayer, Marker, Popup, useMap } from 'react-leaflet';
 import 'leaflet/dist/leaflet.css';
 import L from 'leaflet';
 
-// Custom icon
 const customIcon = new L.DivIcon({
   html: `<div class="custom-marker">
            <span class="anticon anticon-environment">
@@ -13,119 +12,125 @@ const customIcon = new L.DivIcon({
            </span>
          </div>`,
   className: 'ant-icon',
-  iconSize: [25, 41], // Twice the original size
-  iconAnchor: [12, 25], // Adjust anchor to be at the bottom center of the icon
-  popupAnchor: [1, -34], // Adjust popup position
+  iconSize: [25, 41], 
+  iconAnchor: [12, 25],
+  popupAnchor: [1, -34],
   shadowUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-shadow.png',
   shadowSize: [41, 41],
 });
 
+// Create a custom icon for the current location
+const currentLocationIcon = new L.DivIcon({
+  html: `<div class="current-location-marker"></div>`,
+  className: '', 
+  iconSize: [20, 20], 
+  iconAnchor: [10, 10], 
+  popupAnchor: [0, -10], 
+});
 
-// Add this CSS to handle the animation
 const style = document.createElement('style');
 style.innerHTML = `
   .custom-marker {
     animation: pulse 2s infinite;
-    color: #1E3A8A; /* Dark blue */
+    color: #1E3A8A;
   }
 
   @keyframes pulse {
     0%, 100% {
       transform: scale(0.9);
-      color: #1E3A8A; /* Dark blue */
+      color: #1E3A8A;
       filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
     }
     50% {
       transform: scale(1.1);
-      color: #3B82F6; /* Normal blue */
+      color: #3B82F6;
       filter: drop-shadow(0 0 0px rgba(0, 0, 0, 0));
     }
   }
+
+  .current-location-marker {
+    background-color: blue;
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    position: relative;
+    animation: pulseLocation 2s infinite;
+  }
+
+  @keyframes pulseLocation {
+    0%, 100% {
+      box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5);
+    }
+    50% {
+      box-shadow: 0 0 20px 30px rgba(59, 130, 246, 0);
+    }
+  }
 `;
 document.head.appendChild(style);
 
-export default function DwifiMap() {
-  const [nodes, setNodes] = useState([]);
-  const socketRef = useRef(null); // Use ref to maintain WebSocket across renders
+// Component to handle current location marker
+function CurrentLocationMarker() {
+  const map = useMap();
+  const [position, setPosition] = useState(null);
 
   useEffect(() => {
-    const socket = new WebSocket('wss://dev.gateway.erebrus.io/api/v1.0/nodedwifi/stream');
+    if (!navigator.geolocation) {
+      console.log('Geolocation is not supported by your browser');
+      return;
+    }
 
-    socket.onopen = function () {
-      console.log('WebSocket is open now.');
-    };
+    navigator.geolocation.getCurrentPosition(
+      (position) => {
+        const { latitude, longitude } = position.coords;
+        setPosition([latitude, longitude]);
+        map.flyTo([latitude, longitude], 13); // Adjust the map's view to the user's location
+      },
+      (error) => {
+        console.error('Error fetching geolocation:', error);
+      }
+    );
+  }, [map]);
 
-    socket.onmessage = function (event) {
-      console.log('Received:');
-    };
+  return position === null ? null : (
+    <Marker position={position} icon={currentLocationIcon}>
+      <Popup ><div className="text-blue-800"><h6 className="text-lg text-blue-600">You are here</h6></div></Popup>
+    </Marker>
+  );
+}
 
-    socket.onerror = function (event) {
-      console.error('WebSocket error:', event);
-    };
+export default function WorldMap({ showCurrentLocation }) {
+  const [nodes, setNodes] = useState([]);
+  const socketRef = useRef(null);
 
-    socket.onclose = function (event) {
-      console.log('WebSocket is closed now.', event);
-    };
+  useEffect(() => {
+    const socket = new WebSocket('wss://dev.gateway.erebrus.io/api/v1.0/nodedwifi/stream');
 
-    return () => {
-      socket.close();
+    socket.onopen = () => console.log('WebSocket is open now.');
+    socket.onmessage = (event) => {
+      const newNode = JSON.parse(event.data);
+      setNodes((prevNodes) => {
+        const existingIndex = prevNodes.findIndex((node) => node.id === newNode.id);
+        if (existingIndex !== -1) {
+          return prevNodes.map((node) => (node.id === newNode.id ? newNode : node));
+        } else {
+          return [...prevNodes, newNode];
+        }
+      });
     };
-  }, []);
-
-  useEffect(() => {
-    function connectWebSocket() {
-      // Initialize the WebSocket connection
-      socketRef.current = new WebSocket('wss://dev.gateway.erebrus.io/api/v1.0/nodedwifi/stream');
-
-      // Handle the WebSocket connection opening
-      socketRef.current.onopen = function () {
-        console.log('WebSocket is open now.');
-      };
-
-      // Handle incoming WebSocket messages
-      socketRef.current.onmessage = function (event) {
-        const newNode = JSON.parse(event.data);
-        setNodes((prevNodes) => {
-          const existingIndex = prevNodes.findIndex((node) => node.id === newNode.id);
-          if (existingIndex !== -1) {
-            return prevNodes.map((node) => (node.id === newNode.id ? newNode : node));
-          } else {
-            return [...prevNodes, newNode];
-          }
-        });
-      };
-
-      // Handle WebSocket errors
-      socketRef.current.onerror = function (event) {
-        console.error('WebSocket error:', event);
-      };
-
-      // Handle WebSocket closure
-      socketRef.current.onclose = function () {
-        console.log('WebSocket is closed. Attempting to reconnect...');
-        setTimeout(connectWebSocket, 5000); // Attempt to reconnect after 5 seconds
-      };
-    }
 
-    // Establish WebSocket connection
-    connectWebSocket();
+    socket.onerror = (event) => console.error('WebSocket error:', event);
+    socket.onclose = () => console.log('WebSocket is closed.');
 
-    // Cleanup function
-    return () => {
-      console.log('Cleaning up WebSocket connection...');
-      if (socketRef.current) {
-        socketRef.current.close();
-      }
-    };
-  }, []); // Empty dependency array ensures this runs once
+    return () => socket.close();
+  }, []);
 
   return (
     <div className="relative h-full w-full p-20 px-15 bg-[#20253A]">
       <MapContainer
-        center={[20.5937, 78.9629]} 
-        zoom={5} 
-        style={{ height: '100%', width: '100%', padding: '20px', borderRadius: '20px', border: '2px solid gray',   boxShadow: '0 0px 25px black'  }}
-        maxBounds={[[6, 68], [37, 97]]} 
+        center={[20.5937, 78.9629]}
+        zoom={5}
+        style={{ height: '100%', width: '100%', padding: '20px', borderRadius: '20px', border: '2px solid gray', boxShadow: '0 0px 25px black' }}
+        maxBounds={[[6, 68], [37, 97]]}
         maxBoundsViscosity={1.0}
       >
         <TileLayer
@@ -138,7 +143,7 @@ export default function DwifiMap() {
             <Marker key={node.id} position={[lat, lon]} icon={customIcon}>
               <Popup>
                 <div className="text-blue-800">
-                  <h6 className="text-blue-600 text-lg "><strong>Address:</strong> {node.location}</h6>
+                  <h6 className="text-blue-600 text-lg"><strong>Address:</strong> {node.location}</h6>
                   <p><strong>Gateway:</strong> {node.gateway}</p>
                   <p><strong>Price per Minute:</strong> {node.price_per_min}</p>
                   <p><strong>Wallet Address:</strong> <span style={{ wordWrap: 'break-word' }}>{node.wallet_address}</span></p>
@@ -148,6 +153,7 @@ export default function DwifiMap() {
             </Marker>
           );
         })}
+        {showCurrentLocation && <CurrentLocationMarker />}
       </MapContainer>
     </div>
   );