From 8c60ae105cbd70434302b0aa8a5b5282ff36b7c1 Mon Sep 17 00:00:00 2001
From: Uncle Fatso <uncle.fatso@ghostchain.io>
Date: Mon, 6 Oct 2025 19:52:19 +0300
Subject: [PATCH] legend added to the map

Signed-off-by: Uncle Fatso <uncle.fatso@ghostchain.io>
---
 package.json               |  2 +-
 src/components/Map/Map.css | 37 +++++++++++++++++++++++++++++++++++++
 src/components/Map/Map.tsx | 11 +++++++++++
 3 files changed, 49 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 81c91f4..1e9c441 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ghost-telemetry-frontend",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "author": "Uncle f4tso <f4ts0@ghostchain.io>",
   "license": "GPL-3.0",
   "description": "Ghost Telemetry frontend",
diff --git a/src/components/Map/Map.css b/src/components/Map/Map.css
index 4cd2762..1a9ed42 100644
--- a/src/components/Map/Map.css
+++ b/src/components/Map/Map.css
@@ -16,3 +16,40 @@
   top: 0;
   bottom: 0;
 }
+
+.Map-legend {
+    min-width: 170px;
+    position: absolute;
+    font-family: 'Ubuntu', sans-serif;
+    background: #50759e;
+    border: 1px solid #fff;
+    border-radius: 5px;
+    color: #fff;
+    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.5);
+    top: 80%;
+    margin: 0 5%;
+    font-size: .8rem;
+}
+
+.Map-legend-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 20px;
+    margin: 10px;
+}
+
+.Map-legend-item-circle {
+    width: 12px;
+    height: 12px;
+    background: transparent;
+    border: 3px solid #60c45b;
+    border-radius: 6px;
+    top: 50%;
+    left: 50%;
+    transform: translate(calc(50% - 6px), calc(50% - 6px));
+}
+
+.Map-legend-item:first-of-type > .Map-legend-item-circle {
+    border-color: #f2e370;
+}
diff --git a/src/components/Map/Map.tsx b/src/components/Map/Map.tsx
index 2a00c77..702e377 100644
--- a/src/components/Map/Map.tsx
+++ b/src/components/Map/Map.tsx
@@ -142,6 +142,17 @@ export class WorldMap extends React.Component<MapProps, MapState> {
     return (
       <div className="Map-container">
         <div className="Map">
+          <div className="Map-legend">
+            <div className="Map-legend-item">
+                <div className="Map-legend-item-circle"></div>
+                <div>Full Node</div>
+            </div>
+            <div className="Map-legend-item">
+                <div className="Map-legend-item-circle"></div>
+                <div>Validator Node</div>
+            </div>
+          </div>
+
           {nodes.map(node => {
             let isRealPoint = true;
             let { lat, lon } = node;