validator column added

Signed-off-by: Uncle Fatso <uncle.fatso@ghostchain.io>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ghost-telemetry-frontend",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "author": "Uncle f4tso <f4ts0@ghostchain.io>",
   "license": "GPL-3.0",
   "description": "Ghost Telemetry frontend",

src/components/List/Column/ValidatorColumn.tsx

@@ -25,11 +25,12 @@ export class ValidatorColumn extends React.Component<ColumnProps> {
     this.data = validator;
 
     if (!validator) {
-      return <td className="Column">-</td>;
+      return <td className="Column">&#129302;</td>;
     }
 
     return (
       <td className="Column" onClick={this.onClick}>
+        &#128123;
         <Tooltip text={validator} copy={this.onCopy} />
       </td>
     );

src/components/List/Row.tsx

@@ -29,6 +29,7 @@ import {
   IsVirtualMachineColumn,
   LinuxDistroColumn,
   LinuxKernelColumn,
+  ValidatorColumn,
 } from './';
 
 import './Row.css';
@@ -48,6 +49,7 @@ export class Row extends React.Component<RowProps, RowState> {
     NameColumn,
     LocationColumn,
     NetworkIdColumn,
+    ValidatorColumn,
     PeersColumn,
     TxsColumn,
     UploadColumn,

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;
+}

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;