Replace static actual grid data

src/components/ui/DynamicMapContainer.tsx

@@ -0,0 +1,84 @@
+import { useState, useEffect } from 'react';
+import WorldMap from './world-map';
+import { motion } from 'framer-motion'; 
+
+// Interface for the simplified data passed to WorldMap
+interface GeoNode {
+  lat: number;
+  lng: number;
+  label?: string;
+  color?: string;
+}
+
+// Interface for the raw data structure expected from the gridproxy API
+interface RawNode {
+    node_id: number;
+    location: {
+        latitude: string; // API often returns these as strings
+        longitude: string; // API often returns these as strings
+        city: string;
+        country: string;
+    };
+    // ... other raw fields you don't need
+}
+
+function DynamicMapContainer() {
+  const [loading, setLoading] = useState(true);
+  const [nodes, setNodes] = useState<GeoNode[]>([]);
+  const API_URL = "https://gridproxy.grid.tf/nodes?healthy=true";
+
+  useEffect(() => {
+    async function fetchNodeData() {
+      try {
+        const response = await fetch(API_URL);
+        const data: RawNode[] = await response.json(); // Type the incoming data
+        
+        // 🚨 Map the API response to your component's expected GeoNode format
+        const geoNodes: GeoNode[] = data
+          .filter((node: RawNode) => node.location && node.location.latitude && node.location.longitude)
+          .map((node: RawNode) => ({
+            // Convert string coordinates to numbers
+            lat: parseFloat(node.location.latitude), 
+            lng: parseFloat(node.location.longitude), 
+            label: `${node.location.city}, ${node.location.country} (${node.node_id})`,
+            // Optionally set color based on some node property if available
+          }));
+
+        setNodes(geoNodes);
+        setLoading(false);
+      } catch (error) {
+        console.error("Failed to fetch node data:", error);
+        setLoading(false);
+      }
+    }
+
+    fetchNodeData();
+  }, []);
+
+  // --- RENDERING ---
+  
+  if (loading) {
+    // Show a loading state while data is being fetched
+    return (
+        <div className="flex justify-center items-center w-full aspect-[2/1] bg-[#111111] rounded-lg text-cyan-500">
+            <motion.span 
+                animate={{ rotate: 360 }} 
+                transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
+                className="text-4xl"
+            >
+                🌎
+            </motion.span>
+            <p className="ml-4">Loading nodes...</p>
+        </div>
+    );
+  }
+
+  // Pass the dynamically fetched nodes to your WorldMap component
+  return (
+    <WorldMap 
+      nodes={nodes} 
+    />
+  );
+}
+
+export default DynamicMapContainer;

src/components/ui/world-map.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useRef } from "react";
-import { motion } from "motion/react";
+import { motion } from "framer-motion";
 import DottedMap from "dotted-map";
 
 interface MapProps {
@@ -9,25 +9,29 @@ interface MapProps {
     start: { lat: number; lng: number; label?: string };
     end: { lat: number; lng: number; label?: string };
   }>;
+  // New prop for dynamic standalone nodes
+  nodes?: Array<{ lat: number; lng: number; label?: string; color?: string }>;
   lineColor?: string;
 }
 
 export default function WorldMap({
   dots = [],
-  lineColor = "#06b6d4", // cyan-500
+  nodes = [],
+  lineColor = "#06b6d4",
 }: MapProps) {
   const svgRef = useRef<SVGSVGElement>(null);
 
-  //  ✅ Force dark-dotted map theme
+  // ✅ Force dark-dotted map theme
   const map = new DottedMap({ height: 100, grid: "diagonal" });
   const svgMap = map.getSVG({
     radius: 0.22,
-    color: "#06b6d480", // cyan-500 at 50% opacity
+    color: "#06b6d480",
     shape: "circle",
     backgroundColor: "#111111",
   });
 
-  //  ✅ Point projection stays the same
+  // ✅ Point projection stays the same
+  // Projects lat/lng to the SVG's 800x400 viewBox coordinates
   const projectPoint = (lat: number, lng: number) => {
     const x = (lng + 180) * (800 / 360);
     const y = (90 - lat) * (400 / 180);
@@ -36,7 +40,8 @@ export default function WorldMap({
 
   const createCurvedPath = (start: any, end: any) => {
     const midX = (start.x + end.x) / 2;
-    const midY = Math.min(start.y, end.y) - 50;
+    // Creates an arc that bows upward by 50 units
+    const midY = Math.min(start.y, end.y) - 50; 
     return `M ${start.x} ${start.y} Q ${midX} ${midY} ${end.x} ${end.y}`;
   };
 
@@ -49,13 +54,53 @@ export default function WorldMap({
         draggable={false}
       />
 
-      {/* ✅ Lines + points */}
+      {/* ✅ Lines + points + new standalone nodes */}
       <svg
         ref={svgRef}
         viewBox="0 0 800 400"
         className="w-full h-full absolute inset-0 pointer-events-none select-none"
       >
-        {/* ✅ animated curved travel lines */}
+        {/* Glowing path gradient DEFS */}
+        <defs>
+          <linearGradient id="path-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop offset="0%" stopColor="black" stopOpacity="0" />
+            <stop offset="5%" stopColor={lineColor} stopOpacity="1" />
+            <stop offset="95%" stopColor={lineColor} stopOpacity="1" />
+            <stop offset="100%" stopColor="black" stopOpacity="0" />
+          </linearGradient>
+        </defs>
+        
+        {/* ✅ DYNAMIC STANDALONE NODE DOTS (New Section) */}
+        {nodes.map((node, i) => {
+          const p = projectPoint(node.lat, node.lng);
+          const dotColor = node.color || lineColor;
+
+          return (
+            <g key={`node-${i}`}>
+              {/* Outer pulsing circle */}
+              <circle cx={p.x} cy={p.y} r="2" fill={dotColor} opacity="0.5">
+                <animate
+                  attributeName="r"
+                  from="2"
+                  to="7"
+                  dur="1.4s"
+                  repeatCount="indefinite"
+                />
+                <animate
+                  attributeName="opacity"
+                  from="0.6"
+                  to="0"
+                  dur="1.4s"
+                  repeatCount="indefinite"
+                />
+              </circle>
+              {/* Inner fixed circle */}
+              <circle cx={p.x} cy={p.y} r="2" fill={dotColor} />
+            </g>
+          );
+        })}
+
+        {/* ✅ Animated curved travel lines (Existing Logic) */}
         {dots.map((dot, i) => {
           const startPoint = projectPoint(dot.start.lat, dot.start.lng);
           const endPoint = projectPoint(dot.end.lat, dot.end.lng);
@@ -78,17 +123,7 @@ export default function WorldMap({
           );
         })}
 
-        {/* ✅ glowing path gradient */}
-        <defs>
-          <linearGradient id="path-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
-            <stop offset="0%" stopColor="black" stopOpacity="0" />
-            <stop offset="5%" stopColor={lineColor} stopOpacity="1" />
-            <stop offset="95%" stopColor={lineColor} stopOpacity="1" />
-            <stop offset="100%" stopColor="black" stopOpacity="0" />
-          </linearGradient>
-        </defs>
-
-        {/* ✅ start & end points with pulsing cyan glow */}
+        {/* ✅ Start & end points with pulsing cyan glow (Existing Logic) */}
         {dots.map((dot, i) => {
           const s = projectPoint(dot.start.lat, dot.start.lng);
           const e = projectPoint(dot.end.lat, dot.end.lng);
@@ -122,4 +157,4 @@ export default function WorldMap({
       </svg>
     </div>
   );
-}
+}