-
Active Validators Map
-
-
-
- {(geographies, projection) =>
- geographies.map((geography, i) => (
-
- ))
- }
-
- {map(renderMarker)(mapMarkers)}
-
-
+
+
+ Active Validators Map
+
+
);
};
diff --git a/src/v2/components/Dashboard/NetworkOverview/NodesMap/styles.js b/src/v2/components/Dashboard/NetworkOverview/NodesMap/styles.js
index d410663d..0ddffedb 100644
--- a/src/v2/components/Dashboard/NetworkOverview/NodesMap/styles.js
+++ b/src/v2/components/Dashboard/NetworkOverview/NodesMap/styles.js
@@ -6,23 +6,14 @@ export default makeStyles(theme => ({
background: getColor('grey2')(theme),
maxHeight: 290,
overflow: 'hidden',
- padding: '14px 35px',
+ height: '100%',
+ border: `1px solid ${getColor('grey5')(theme)}`,
+ position: 'relative',
},
- tooltip: {
- background: '#fff',
- color: getColor('dark')(theme),
- padding: 10,
- borderRadius: 0,
- },
- tooltipTitle: {
- fontSize: 15,
- marginBottom: 4,
- textOverflow: 'ellipsis',
- whiteSpace: 'nowrap',
- overflow: 'hidden',
- },
- tooltipDesc: {
- fontSize: 12,
- color: getColor('grey3')(theme),
+ mapTitle: {
+ position: 'absolute',
+ zIndex: 1000,
+ left: 24,
+ top: 13,
},
}));
diff --git a/src/v2/components/Dashboard/NetworkOverview/styles.js b/src/v2/components/Dashboard/NetworkOverview/styles.js
index 82eb78b0..719f9ff3 100644
--- a/src/v2/components/Dashboard/NetworkOverview/styles.js
+++ b/src/v2/components/Dashboard/NetworkOverview/styles.js
@@ -15,7 +15,7 @@ export default makeStyles(theme => ({
},
mapCard: {
height: 306,
- '& svg': {
+ '& > svg': {
width: '100%',
height: 295,
minHeight: 290,
diff --git a/src/v2/components/UI/Avatar/index.jsx b/src/v2/components/UI/Avatar/index.jsx
index b57391b4..faf4b38d 100644
--- a/src/v2/components/UI/Avatar/index.jsx
+++ b/src/v2/components/UI/Avatar/index.jsx
@@ -1,5 +1,6 @@
// @flow
import React from 'react';
+import {observer} from 'mobx-react-lite';
import BaseAvatar from '@material-ui/core/Avatar';
import theme from 'v2/theme';
import getColor from 'v2/utils/getColor';
@@ -45,4 +46,4 @@ const Avatar = ({
return
;
};
-export default Avatar;
+export default observer(Avatar);
diff --git a/src/v2/components/Validators/Detail/index.jsx b/src/v2/components/Validators/Detail/index.jsx
index 39558431..26d7a24e 100644
--- a/src/v2/components/Validators/Detail/index.jsx
+++ b/src/v2/components/Validators/Detail/index.jsx
@@ -3,41 +3,24 @@ import {Container, useTheme} from '@material-ui/core';
import {observer} from 'mobx-react-lite';
import useMediaQuery from '@material-ui/core/useMediaQuery/useMediaQuery';
import React, {useEffect} from 'react';
-import {map, find, eq} from 'lodash/fp';
+import {map, find} from 'lodash/fp';
import {Match} from 'react-router-dom';
-import getUptime from 'v2/utils/getUptime';
-import {
- ComposableMap,
- Geographies,
- Geography,
- Marker,
- Markers,
- ZoomableGroup,
-} from 'react-simple-maps';
+import getUptime from 'v2/utils/getUptime';
import SectionHeader from 'v2/components/UI/SectionHeader';
import NodesStore from 'v2/stores/nodes';
-import OverviewStore from 'v2/stores/networkOverview';
-import {mapStyle, markerStyle} from 'v2/theme';
-import MapTooltip from 'v2/components/UI/MapTooltip';
import HelpLink from 'v2/components/HelpLink';
import Button from 'v2/components/UI/Button';
import Avatar from 'v2/components/UI/Avatar';
import Mixpanel from 'v2/mixpanel';
import CopyBtn from 'v2/components/UI/CopyBtn';
-import {LAMPORT_SOL_RATIO} from '../../../constants';
+import {LAMPORT_SOL_RATIO} from 'v2/constants';
+import ValidatorsMap from 'v2/components/ValidatorsMap';
import useStyles from './styles';
-const mapStyles = {
- default: mapStyle,
- hover: mapStyle,
- pressed: mapStyle,
-};
-
const ValidatorsDetail = ({match}: {match: Match}) => {
const {validators, inactiveValidators, totalStaked} = NodesStore;
- const {globalStats} = OverviewStore;
const classes = useStyles();
const theme = useTheme();
@@ -58,27 +41,15 @@ const ValidatorsDetail = ({match}: {match: Match}) => {
return
Loading...
;
}
- const {nodePubkey, gossip, activatedStake, commission, identity = {}} = node;
-
- const renderMarker = () => (
-
- (
- <>
- NODE: {nodePubkey}
- Gossip: {gossip}
-
- )}
- >
-
-
-
- );
-
+ const {
+ nodePubkey,
+ gossip,
+ activatedStake,
+ commission,
+ identity = {},
+ coordinates,
+ } = node;
+ const markers = [{gossip, coordinates, name: nodePubkey}];
const specs = [
{
label: 'Address',
@@ -152,18 +123,6 @@ const ValidatorsDetail = ({match}: {match: Match}) => {
},
];
- const mapConfig = {
- projection: {
- scale: 85,
- rotation: [-11, 0, 0],
- },
- style: {
- width: '100%',
- height: 'auto',
- },
- center: [0, 20],
- };
-
const renderSpec = ({label, value}: {label: string, value: string}) => (
@@ -216,32 +175,8 @@ const ValidatorsDetail = ({match}: {match: Match}) => {
)}
{map(renderSpec)(specs)}
-
-
-
-
- {(geographies, projection) =>
- geographies.map((geography, i) => (
-
- ))
- }
-
- {node.coordinates && renderMarker()}
-
-
+
+
diff --git a/src/v2/components/Validators/Detail/styles.js b/src/v2/components/Validators/Detail/styles.js
index e61fc830..4bf2b4af 100644
--- a/src/v2/components/Validators/Detail/styles.js
+++ b/src/v2/components/Validators/Detail/styles.js
@@ -97,4 +97,10 @@ export default makeStyles(theme => ({
alignItem: 'center',
color: getColor('main')(theme),
},
+ map: {
+ height: 500,
+ [theme.breakpoints.down('sm')]: {
+ height: 250,
+ },
+ },
}));
diff --git a/src/v2/components/Validators/ValidatorsMap/index.jsx b/src/v2/components/Validators/ValidatorsMap/index.jsx
deleted file mode 100644
index ecda7d99..00000000
--- a/src/v2/components/Validators/ValidatorsMap/index.jsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import {Typography} from '@material-ui/core';
-import {observer} from 'mobx-react-lite';
-import React from 'react';
-import {
- ComposableMap,
- Geographies,
- Geography,
- Marker,
- Markers,
- ZoomableGroup,
-} from 'react-simple-maps';
-import {eq, map} from 'lodash/fp';
-import nodesStore from 'v2/stores/nodes';
-import OverviewStore from 'v2/stores/networkOverview';
-import MapTooltip from 'v2/components/UI/MapTooltip';
-import {mapStyle, markerStyle} from 'v2/theme';
-
-import useStyles from './styles';
-
-const mapStyles = {
- default: mapStyle,
- hover: mapStyle,
- pressed: mapStyle,
-};
-
-const ValidatorsMap = () => {
- const classes = useStyles();
- const {mapMarkers} = nodesStore;
- const {globalStats} = OverviewStore;
-
- const mapConfig = {
- projection: {
- scale: 150,
- rotation: [-11, 0, 0],
- },
- style: {
- width: '100%',
- height: '100%',
- },
- center: [0, 20],
- };
-
- const renderMarker = marker => (
-
- (
- <>
- NODE: {marker.name}
- Gossip: {marker.gossip}
-
- )}
- >
-
-
-
- );
- return (
-
- Active Validators Map
-
-
-
- {(geographies, projection) =>
- geographies.map((geography, i) => (
-
- ))
- }
-
- {map(renderMarker)(mapMarkers)}
-
-
-
- );
-};
-
-export default observer(ValidatorsMap);
diff --git a/src/v2/components/Validators/index.jsx b/src/v2/components/Validators/index.jsx
index 6b0387ec..ebce1739 100644
--- a/src/v2/components/Validators/index.jsx
+++ b/src/v2/components/Validators/index.jsx
@@ -1,5 +1,5 @@
// @flow
-import {Container, Grid} from '@material-ui/core';
+import {Container, Grid, Typography} from '@material-ui/core';
import React, {useEffect} from 'react';
import {observer} from 'mobx-react-lite';
import {map} from 'lodash/fp';
@@ -10,15 +10,22 @@ import Mixpanel from 'v2/mixpanel';
import Button from 'v2/components/UI/Button';
import Socket from 'v2/stores/socket';
import Loader from 'v2/components/UI/Loader';
+import ValidatorsMap from 'v2/components/ValidatorsMap';
+import HelpLink from '../HelpLink';
-import ValidatorsMap from './ValidatorsMap';
import ValidatorsTable from './Table';
import useStyles from './styles';
import {LAMPORT_SOL_RATIO} from '../../constants';
const Validators = () => {
const classes = useStyles();
- const {supply, validators, fetchClusterInfo, totalStaked} = NodesStore;
+ const {
+ supply,
+ validators,
+ fetchClusterInfo,
+ totalStaked,
+ mapMarkers,
+ } = NodesStore;
const {isLoading} = Socket;
useEffect(() => {
fetchClusterInfo();
@@ -108,7 +115,13 @@ const Validators = () => {
+
+ Active Validators Map
+
+
+
+
)}
diff --git a/src/v2/components/Validators/styles.js b/src/v2/components/Validators/styles.js
index 6abb55a1..2fff1822 100644
--- a/src/v2/components/Validators/styles.js
+++ b/src/v2/components/Validators/styles.js
@@ -64,4 +64,18 @@ export default makeStyles(theme => ({
height: '100%',
},
},
+ map: {
+ height: '100%',
+ border: `1px solid ${getColor('grey5')(theme)}`,
+ position: 'relative',
+ [theme.breakpoints.down('sm')]: {
+ height: 290,
+ },
+ },
+ mapTitle: {
+ position: 'absolute',
+ left: 24,
+ top: 13,
+ zIndex: 100,
+ },
}));
diff --git a/src/v2/components/ValidatorsMap/Marker.jsx b/src/v2/components/ValidatorsMap/Marker.jsx
new file mode 100644
index 00000000..a7f172af
--- /dev/null
+++ b/src/v2/components/ValidatorsMap/Marker.jsx
@@ -0,0 +1,34 @@
+// @flow
+import React from 'react';
+import MapTooltip from 'v2/components/UI/MapTooltip';
+import Avatar from 'v2/components/UI/Avatar';
+
+import useStyles from './styles';
+
+const Marker = ({scale, marker}: {scale: number, marker: any}) => {
+ const classes = useStyles();
+ const size = scale < 4 ? 10 * scale : 40;
+ return (
+ (
+ <>
+ NODE: {marker.name}
+ Gossip: {marker.gossip}
+
+ )}
+ >
+
+
+ );
+};
+
+export default Marker;
diff --git a/src/v2/components/ValidatorsMap/index.jsx b/src/v2/components/ValidatorsMap/index.jsx
new file mode 100644
index 00000000..a6347745
--- /dev/null
+++ b/src/v2/components/ValidatorsMap/index.jsx
@@ -0,0 +1,147 @@
+// @flow
+import GoogleMap from 'google-map-react';
+import {get, map} from 'lodash/fp';
+import {observer} from 'mobx-react-lite';
+import React, {useState} from 'react';
+
+import Marker from './Marker';
+import mapStyle from './mapStyle';
+
+const apiKey = process.env.REACT_APP_GOOGLE_MAP_KEY;
+const defaultCenter = [0, 0];
+const mapOptions = {
+ disableDefaultUI: true,
+ minZoom: 1,
+ styles: mapStyle,
+};
+
+function isFullscreen(element) {
+ return (
+ (document.fullscreenElement ||
+ document.webkitFullscreenElement ||
+ document.mozFullScreenElement ||
+ document.msFullscreenElement) === element
+ );
+}
+
+function requestFullscreen(element) {
+ if (element.requestFullscreen) {
+ element.requestFullscreen();
+ } else if (element.webkitRequestFullScreen) {
+ element.webkitRequestFullScreen();
+ } else if (element.mozRequestFullScreen) {
+ element.mozRequestFullScreen();
+ } else if (element.msRequestFullScreen) {
+ element.msRequestFullScreen();
+ }
+}
+function exitFullscreen() {
+ if (document.exitFullscreen) {
+ document.exitFullscreen();
+ } else if (document.webkitExitFullscreen) {
+ document.webkitExitFullscreen();
+ } else if (document.mozCancelFullScreen) {
+ document.mozCancelFullScreen();
+ } else if (document.msCancelFullScreen) {
+ document.msCancelFullScreen();
+ }
+}
+
+function addStylesToZoomBtn(btn) {
+ btn.style.width = '47px';
+ btn.style.height = '40px';
+ btn.style.fontSize = '40px';
+ btn.style.color = '#00FFAD';
+ btn.style.fontWeight = 'bold';
+ btn.style.textAlign = 'center';
+ btn.style.cursor = 'pointer';
+}
+
+function FullScreenControl(controlDiv, map, maps) {
+ const controlWrapper = document.createElement('div');
+ const fullscreenButton = document.createElement('div');
+ fullscreenButton.style.marginRight = '22px';
+ fullscreenButton.style.marginTop = '22px';
+ fullscreenButton.style.cursor = 'pointer';
+ fullscreenButton.innerHTML = `
+
+ `;
+ controlDiv.appendChild(controlWrapper);
+ controlWrapper.appendChild(fullscreenButton);
+ const elementToSendFullscreen = map.getDiv().firstChild;
+ maps.event.addDomListener(fullscreenButton, 'click', () => {
+ if (isFullscreen(elementToSendFullscreen)) {
+ exitFullscreen();
+ } else {
+ requestFullscreen(elementToSendFullscreen);
+ }
+ });
+}
+
+function ZoomControl(controlDiv, map, maps) {
+ const controlWrapper = document.createElement('div');
+ const zoomOutButton = document.createElement('div');
+ const zoomInButton = document.createElement('div');
+ controlDiv.appendChild(controlWrapper);
+ controlWrapper.style.marginRight = '11px';
+ addStylesToZoomBtn(zoomInButton);
+ zoomInButton.innerText = '+';
+ controlWrapper.appendChild(zoomInButton);
+ addStylesToZoomBtn(zoomOutButton);
+ zoomOutButton.innerText = '-';
+ controlWrapper.appendChild(zoomOutButton);
+ maps.event.addDomListener(zoomInButton, 'click', () =>
+ map.setZoom(map.getZoom() + 1),
+ );
+ maps.event.addDomListener(zoomOutButton, 'click', () =>
+ map.setZoom(map.getZoom() - 1),
+ );
+}
+
+const renderMarkers = zoom =>
+ map(marker => {
+ return (
+
+ );
+ });
+
+const ValidatorsMap = ({markers}: {markers: []}) => {
+ const [zoom, setZoom] = useState(1);
+ const apiIsLoaded = (googleMap, maps) => {
+ const zoomControlDiv = document.createElement('div');
+ const fullscreenControlDiv = document.createElement('div');
+ new ZoomControl(zoomControlDiv, googleMap, maps);
+ new FullScreenControl(fullscreenControlDiv, googleMap, maps);
+ zoomControlDiv.index = 1;
+ fullscreenControlDiv.index = 1;
+ googleMap.controls[maps.ControlPosition.RIGHT_BOTTOM].push(zoomControlDiv);
+ googleMap.controls[maps.ControlPosition.RIGHT_TOP].push(
+ fullscreenControlDiv,
+ );
+ googleMap.addListener('zoom_changed', () => setZoom(googleMap.getZoom()));
+ };
+ return (
+ apiIsLoaded(map, maps)}
+ options={mapOptions}
+ >
+ {renderMarkers(zoom)(markers)}
+
+ );
+};
+
+export default observer(ValidatorsMap);
diff --git a/src/v2/components/ValidatorsMap/mapStyle.json b/src/v2/components/ValidatorsMap/mapStyle.json
new file mode 100644
index 00000000..77131952
--- /dev/null
+++ b/src/v2/components/ValidatorsMap/mapStyle.json
@@ -0,0 +1,260 @@
+[
+ {
+ "elementType": "geometry",
+ "stylers": [
+ {
+ "color": "#212121"
+ }
+ ]
+ },
+ {
+ "elementType": "labels.icon",
+ "stylers": [
+ {
+ "visibility": "off"
+ }
+ ]
+ },
+ {
+ "elementType": "labels.text.fill",
+ "stylers": [
+ {
+ "color": "#757575"
+ }
+ ]
+ },
+ {
+ "elementType": "labels.text.stroke",
+ "stylers": [
+ {
+ "color": "#212121"
+ }
+ ]
+ },
+ {
+ "featureType": "administrative",
+ "elementType": "geometry",
+ "stylers": [
+ {
+ "color": "#757575"
+ },
+ {
+ "visibility": "off"
+ }
+ ]
+ },
+ {
+ "featureType": "administrative.country",
+ "elementType": "labels.text.fill",
+ "stylers": [
+ {
+ "color": "#9e9e9e"
+ }
+ ]
+ },
+ {
+ "featureType": "administrative.land_parcel",
+ "stylers": [
+ {
+ "visibility": "off"
+ }
+ ]
+ },
+ {
+ "featureType": "administrative.locality",
+ "elementType": "labels.text.fill",
+ "stylers": [
+ {
+ "color": "#bdbdbd"
+ }
+ ]
+ },
+ {
+ "featureType": "administrative.neighborhood",
+ "stylers": [
+ {
+ "visibility": "off"
+ }
+ ]
+ },
+ {
+ "featureType": "poi",
+ "stylers": [
+ {
+ "visibility": "off"
+ }
+ ]
+ },
+ {
+ "featureType": "poi",
+ "elementType": "labels.text",
+ "stylers": [
+ {
+ "visibility": "off"
+ }
+ ]
+ },
+ {
+ "featureType": "poi",
+ "elementType": "labels.text.fill",
+ "stylers": [
+ {
+ "color": "#757575"
+ }
+ ]
+ },
+ {
+ "featureType": "poi.park",
+ "elementType": "geometry",
+ "stylers": [
+ {
+ "color": "#181818"
+ }
+ ]
+ },
+ {
+ "featureType": "poi.park",
+ "elementType": "labels.text.fill",
+ "stylers": [
+ {
+ "color": "#616161"
+ },
+ {
+ "visibility": "off"
+ }
+ ]
+ },
+ {
+ "featureType": "poi.park",
+ "elementType": "labels.text.stroke",
+ "stylers": [
+ {
+ "color": "#1b1b1b"
+ }
+ ]
+ },
+ {
+ "featureType": "road",
+ "stylers": [
+ {
+ "visibility": "off"
+ }
+ ]
+ },
+ {
+ "featureType": "road",
+ "elementType": "geometry.fill",
+ "stylers": [
+ {
+ "color": "#2c2c2c"
+ }
+ ]
+ },
+ {
+ "featureType": "road",
+ "elementType": "labels",
+ "stylers": [
+ {
+ "visibility": "off"
+ }
+ ]
+ },
+ {
+ "featureType": "road",
+ "elementType": "labels.icon",
+ "stylers": [
+ {
+ "visibility": "off"
+ }
+ ]
+ },
+ {
+ "featureType": "road",
+ "elementType": "labels.text.fill",
+ "stylers": [
+ {
+ "color": "#8a8a8a"
+ }
+ ]
+ },
+ {
+ "featureType": "road.arterial",
+ "elementType": "geometry",
+ "stylers": [
+ {
+ "color": "#373737"
+ }
+ ]
+ },
+ {
+ "featureType": "road.highway",
+ "elementType": "geometry",
+ "stylers": [
+ {
+ "color": "#3c3c3c"
+ }
+ ]
+ },
+ {
+ "featureType": "road.highway.controlled_access",
+ "elementType": "geometry",
+ "stylers": [
+ {
+ "color": "#4e4e4e"
+ }
+ ]
+ },
+ {
+ "featureType": "road.local",
+ "elementType": "labels.text.fill",
+ "stylers": [
+ {
+ "color": "#616161"
+ }
+ ]
+ },
+ {
+ "featureType": "transit",
+ "stylers": [
+ {
+ "visibility": "off"
+ }
+ ]
+ },
+ {
+ "featureType": "transit",
+ "elementType": "labels.text.fill",
+ "stylers": [
+ {
+ "color": "#757575"
+ }
+ ]
+ },
+ {
+ "featureType": "water",
+ "elementType": "geometry",
+ "stylers": [
+ {
+ "color": "#000000"
+ }
+ ]
+ },
+ {
+ "featureType": "water",
+ "elementType": "labels.text",
+ "stylers": [
+ {
+ "visibility": "off"
+ }
+ ]
+ },
+ {
+ "featureType": "water",
+ "elementType": "labels.text.fill",
+ "stylers": [
+ {
+ "color": "#3d3d3d"
+ }
+ ]
+ }
+]
diff --git a/src/v2/components/Validators/ValidatorsMap/styles.js b/src/v2/components/ValidatorsMap/styles.js
similarity index 69%
rename from src/v2/components/Validators/ValidatorsMap/styles.js
rename to src/v2/components/ValidatorsMap/styles.js
index b7710b7f..4ea28097 100644
--- a/src/v2/components/Validators/ValidatorsMap/styles.js
+++ b/src/v2/components/ValidatorsMap/styles.js
@@ -2,17 +2,6 @@ import {makeStyles} from '@material-ui/core';
import getColor from 'v2/utils/getColor';
export default makeStyles(theme => ({
- card: {
- background: getColor('grey2')(theme),
- height: '100%',
- overflow: 'hidden',
- padding: '14px 35px',
- display: 'flex',
- flexDirection: 'column',
- '& svg': {
- margin: 'auto',
- },
- },
tooltip: {
background: '#fff',
color: getColor('dark')(theme),
@@ -30,4 +19,10 @@ export default makeStyles(theme => ({
fontSize: 12,
color: getColor('grey3')(theme),
},
+ marker: {
+ transition: '.15s ease-in-out',
+ '&:hover': {
+ transform: 'scale(2)',
+ },
+ },
}));
diff --git a/src/v2/stores/nodes.js b/src/v2/stores/nodes.js
index 41932621..9ed45526 100644
--- a/src/v2/stores/nodes.js
+++ b/src/v2/stores/nodes.js
@@ -49,10 +49,12 @@ class Store {
get mapMarkers() {
return compose(
- map(({nodePubkey: name, tpu: gossip, coordinates}) => ({
- name,
+ map(({nodePubkey: pubkey, tpu: gossip, coordinates, identity}) => ({
+ pubkey,
gossip,
coordinates,
+ name: (identity && identity.name) || 'Unknown',
+ avatarUrl: (identity && identity.avatarUrl) || '',
})),
filter({what: 'Validator'}),
)(this.network);
diff --git a/src/v2/theme.js b/src/v2/theme.js
index 300af136..f1a473ac 100644
--- a/src/v2/theme.js
+++ b/src/v2/theme.js
@@ -13,6 +13,7 @@ export default createMuiTheme({
grey2: '#202020',
grey3: '#979797',
grey4: '#c4c4c4',
+ grey5: '#505050',
main,
white: '#fff',
greenDark: '#00a771',