From 218a598f913f4cd83eb359e6fadb11dafb1d342f Mon Sep 17 00:00:00 2001
From: Manuel Calavera <diserkin@gmail.com>
Date: Wed, 30 Oct 2019 11:02:24 -0700
Subject: [PATCH] fix: markers keybase avatars

---
 .../Dashboard/NetworkOverview/NodesMap/styles.js   |  1 -
 src/v2/components/Validators/Detail/index.jsx      |  5 +----
 src/v2/components/ValidatorsMap/Marker.jsx         | 14 +++++++-------
 src/v2/components/ValidatorsMap/index.jsx          |  4 ++--
 4 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/src/v2/components/Dashboard/NetworkOverview/NodesMap/styles.js b/src/v2/components/Dashboard/NetworkOverview/NodesMap/styles.js
index 0ddffedb..af173119 100644
--- a/src/v2/components/Dashboard/NetworkOverview/NodesMap/styles.js
+++ b/src/v2/components/Dashboard/NetworkOverview/NodesMap/styles.js
@@ -5,7 +5,6 @@ export default makeStyles(theme => ({
   card: {
     background: getColor('grey2')(theme),
     maxHeight: 290,
-    overflow: 'hidden',
     height: '100%',
     border: `1px solid ${getColor('grey5')(theme)}`,
     position: 'relative',
diff --git a/src/v2/components/Validators/Detail/index.jsx b/src/v2/components/Validators/Detail/index.jsx
index 191d1963..64979c89 100644
--- a/src/v2/components/Validators/Detail/index.jsx
+++ b/src/v2/components/Validators/Detail/index.jsx
@@ -38,16 +38,13 @@ const ValidatorsDetail = ({match}: {match: Match}) => {
 
   const {
     nodePubkey,
-    gossip,
     commission,
     identity = {},
-    coordinates,
     stakedSol,
     stakedSolPercent,
     calcUptime,
   } = node;
 
-  const markers = [{gossip, coordinates, name: nodePubkey}];
   const specs = [
     {
       label: 'Address',
@@ -174,7 +171,7 @@ const ValidatorsDetail = ({match}: {match: Match}) => {
           {map(renderSpec)(specs)}
         </ul>
         <div className={classes.map}>
-          <ValidatorsMap markers={markers} />
+          <ValidatorsMap markers={[node]} />
         </div>
       </div>
     </Container>
diff --git a/src/v2/components/ValidatorsMap/Marker.jsx b/src/v2/components/ValidatorsMap/Marker.jsx
index e2462b2b..8b0e4264 100644
--- a/src/v2/components/ValidatorsMap/Marker.jsx
+++ b/src/v2/components/ValidatorsMap/Marker.jsx
@@ -2,8 +2,8 @@
 import React from 'react';
 import MapTooltip from 'v2/components/UI/MapTooltip';
 import Avatar from 'v2/components/UI/Avatar';
-
 import ValidatorName from 'v2/components//UI/ValidatorName';
+
 import useStyles from './styles';
 
 const Marker = ({scale, marker}: {scale: number, marker: any}) => {
@@ -11,7 +11,7 @@ const Marker = ({scale, marker}: {scale: number, marker: any}) => {
   const transformScale = scale < 4 ? scale / 4 : 1;
   const {
     nodePubkey,
-    identity,
+    identity = {},
     calcCommission,
     calcUptime,
     stakedSol,
@@ -25,8 +25,8 @@ const Marker = ({scale, marker}: {scale: number, marker: any}) => {
         <div className={classes.inner}>
           <ValidatorName
             pubkey={nodePubkey}
-            name={identity ? identity.name : ''}
-            avatar={identity ? identity.avatarUrl : ''}
+            name={identity.name}
+            avatar={identity.avatarUrl}
           />
           <div className={classes.info}>
             <div>
@@ -48,9 +48,9 @@ const Marker = ({scale, marker}: {scale: number, marker: any}) => {
         <Avatar
           width={40}
           height={40}
-          avatarUrl={marker.avatarUrl}
-          name={marker.name}
-          pubkey={marker.pubkey}
+          avatarUrl={identity.avatarUrl}
+          name={identity.name}
+          pubkey={nodePubkey}
         />
       </div>
     </MapTooltip>
diff --git a/src/v2/components/ValidatorsMap/index.jsx b/src/v2/components/ValidatorsMap/index.jsx
index 82a42a22..6ef8154f 100644
--- a/src/v2/components/ValidatorsMap/index.jsx
+++ b/src/v2/components/ValidatorsMap/index.jsx
@@ -1,6 +1,6 @@
 // @flow
 import GoogleMap from 'google-map-react';
-import {get, map} from 'lodash/fp';
+import {get, map, uniqueId} from 'lodash/fp';
 import {observer} from 'mobx-react-lite';
 import React, {useState} from 'react';
 
@@ -104,7 +104,7 @@ const renderMarkers = zoom =>
   map(marker => {
     return (
       <Marker
-        key={get('nodePubkey')(marker)}
+        key={uniqueId('marker')}
         lng={get('coordinates[0]')(marker)}
         lat={get('coordinates[1]')(marker)}
         scale={zoom}