fix: markers keybase avatars

solana-labs · Oct 30, 2019 · 218a598 · 218a598
1 parent 82c847a
commit 218a598
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 14 deletions.
diff --git 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
@@ -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
@@ -2,16 +2,16 @@
 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}) => {
   const classes = useStyles();
   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
@@ -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}