Merge pull request #100 from NetSepio/main

Merging Main with prod
NetSepio · Aug 22, 2024 · cd7d670 · cd7d670
2 parents 2cecbb3 + 1d1dc25
commit cd7d670
Show file tree

Hide file tree

Showing 25 changed files with 656 additions and 76 deletions.
diff --git a/components/DvpnMap.js b/components/DvpnMap.js
@@ -0,0 +1,123 @@
+import dynamic from 'next/dynamic';
+import { useEffect, useState } from 'react';
+import 'leaflet/dist/leaflet.css';
+import L from 'leaflet';
+
+// Dynamically import components with ssr: false
+const MapContainer = dynamic(() => import('react-leaflet').then((module) => module.MapContainer), { ssr: false });
+const TileLayer = dynamic(() => import('react-leaflet').then((module) => module.TileLayer), { ssr: false });
+const Marker = dynamic(() => import('react-leaflet').then((module) => module.Marker), { ssr: false });
+const Popup = dynamic(() => import('react-leaflet').then((module) => module.Popup), { ssr: false });
+
+// Define a custom animated icon
+const animatedIcon = L.divIcon({
+  className: 'custom-animated-icon',
+  html: `
+    <div style="
+      width: 20px;
+      height: 20px;
+      background: radial-gradient(circle, blue, white);
+      border-radius: 50%;
+      animation: pulse 2s infinite;
+    "></div>
+  `,
+  iconSize: [20, 20],
+  iconAnchor: [10, 10],
+  popupAnchor: [0, -10],
+});
+
+const DvpnMap = ({ nodes }) => {
+  const [isClient, setIsClient] = useState(false);
+  const [offsets, setOffsets] = useState({});
+
+  useEffect(() => {
+    setIsClient(true);
+
+    // Initialize offsets
+    const offsetMap = {};
+    nodes.forEach((node) => {
+      const [lat, lon] = node.ipinfolocation.split(',').map(Number);
+      const key = `${lat},${lon}`;
+      if (!offsetMap[key]) {
+        offsetMap[key] = [0, 0];
+      } else {
+        // Apply a small offset if multiple markers have the same coordinates
+        offsetMap[key] = [offsetMap[key][0] + 0.01, offsetMap[key][1] + 0.01];
+      }
+    });
+    setOffsets(offsetMap);
+  }, [nodes]);
+
+  if (!isClient) {
+    return null;
+  }
+
+  return (
+    <div className="relative h-full w-full p-20 pl-20 pr-20">
+      <MapContainer
+        center={[20, 0]}
+        zoom={2}
+        minZoom={2}
+        maxZoom={5}
+        style={{ height: '100%', width: '100%', padding: '20px',  }}
+        // className="leaflet-container"
+        // maxBounds={[[-90, -180], [90, 180]]}
+        // maxBoundsViscosity={1.0}
+      >
+        <TileLayer
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+        />
+         {/* <TileLayer
+          url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png" // CartoDB Dark theme URL
+          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors | Map tiles by <a href="https://carto.com/attributions">CartoDB</a>'
+          noWrap={true}
+        /> */}
+         {/* <TileLayer
+          url="https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png"
+          attribution='&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
+          noWrap={true}
+        /> */}
+        {nodes.map((node, index) => {
+          const [lat, lon] = node.ipinfolocation.split(',').map(Number);
+          const key = `${lat},${lon}`;
+          const offset = offsets[key] || [0, 0];
+          return (
+            <Marker
+              key={index}
+              position={[lat + offset[0], lon + offset[1]]}
+              icon={animatedIcon}
+            >
+              <Popup>
+                <div className="text-blue-800">
+                  <h3 className="text-blue-900 text-lg font-semibold">{node.name}</h3>
+                  <p><strong>Country:</strong> {node.ipinfocountry}</p>
+                  <p><strong>City:</strong> {node.ipinfocity}</p>
+                  <p><strong>Node Name:</strong> {node.nodename}</p>
+                  <p><strong>Download Speed:</strong> {node.downloadSpeed} Mbps</p>
+                  <p><strong>Upload Speed:</strong> {node.uploadSpeed} Mbps</p>
+                </div>
+              </Popup>
+            </Marker>
+          );
+        })}
+      </MapContainer>
+      <style jsx>{`
+        @keyframes pulse {
+          0% {
+            transform: scale(1);
+          }
+          50% {
+            transform: scale(1.2);
+          }
+          100% {
+            transform: scale(1);
+          }
+        }
+
+      `}</style>
+    </div>
+  );
+};
+
+export default DvpnMap;
diff --git a/components/DwifiMap.js b/components/DwifiMap.js
@@ -0,0 +1,124 @@
+import { useState, useEffect, useRef } from 'react';
+import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
+import 'leaflet/dist/leaflet.css';
+import L from 'leaflet';
+
+// Custom icon
+const customIcon = new L.Icon({
+  iconUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png',
+  iconRetinaUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon-2x.png',
+  iconSize: [25, 41],
+  iconAnchor: [12, 41],
+  popupAnchor: [1, -34],
+  shadowUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-shadow.png',
+  shadowSize: [41, 41],
+});
+
+export default function DwifiMap() {
+  const [nodes, setNodes] = useState([]);
+  const socketRef = useRef(null); // Use ref to maintain WebSocket across renders
+
+  useEffect(() => {
+    const socket = new WebSocket('wss://dev.gateway.erebrus.io/api/v1.0/nodedwifi/stream');
+
+    socket.onopen = function () {
+      console.log('WebSocket is open now.');
+    };
+
+    socket.onmessage = function (event) {
+      console.log('Received:', event.data);
+    };
+
+    socket.onerror = function (event) {
+      console.error('WebSocket error:', event);
+    };
+
+    socket.onclose = function (event) {
+      console.log('WebSocket is closed now.', event);
+    };
+
+    return () => {
+      socket.close();
+    };
+  }, []);
+
+  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();
+
+    // Cleanup function
+    return () => {
+      console.log('Cleaning up WebSocket connection...');
+      if (socketRef.current) {
+        socketRef.current.close();
+      }
+    };
+  }, []); // Empty dependency array ensures this runs once
+
+  return (
+    <div className="relative h-full w-full p-20 pl-20 pr-20">
+      <MapContainer
+        center={[20.5937, 78.9629]} 
+        zoom={5} 
+        style={{ height: '100%', width: '100%', padding: '20px',  }}
+        maxBounds={[[6, 68], [37, 97]]} 
+        maxBoundsViscosity={1.0}
+      >
+        <TileLayer
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+        />
+        {nodes.map((node) => {
+          const [lat, lon] = node.co_ordinates.split(',').map(Number);
+          return (
+            <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>
+                  <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>
+                  <p><strong>Chain Name:</strong> {node.chain_name}</p>
+                </div>
+              </Popup>
+            </Marker>
+          );
+        })}
+      </MapContainer>
+    </div>
+  );
+}
diff --git a/components/Footer.js b/components/Footer.js
@@ -30,7 +30,7 @@ const Footer = () => {
     Contact us
   </div>
   <a
-    href="/terms"
+    href="https://discordapp.com/invite/5uaFhNpRF6"
     target="_blank"
     rel="noopener noreferrer"
     className="mb-2 flex items-center"
@@ -56,7 +56,7 @@ const Footer = () => {
     Telegram
   </a> */}
   <a
-    href="/privacy"
+    href="https://netsepio.com/"
     target="_blank"
     rel="noopener noreferrer"
     className="flex items-center"

diff --git a/components/NodesData.js b/components/NodesData.js
@@ -206,7 +206,7 @@ const NodesData = () => {
     <div
       id="howto"
       className="flex flex-col items-center justify-start scroll-mt-16 lg:scroll-mt-0 min-h-screen"
-      style={{ backgroundColor: "#010001" }}
+      style={{ backgroundColor: "#20253A" }}
     >
       <div className="font-figtree text-left text-gray-200 w-full px-3">
         <div className="text-white">
@@ -359,7 +359,7 @@ const NodesData = () => {
 
 
           <div className="overflow-x-auto">
-            <table className="min-w-full bg-black rounded-lg">
+            <table className="min-w-full bg-[#20253A] rounded-lg">
             <thead style={{ height: "10px" }}>
               <tr>
                 <th style={{ border: "solid 1px #FFFFFF66" }}>