From 5027cf6d8f9716ef76b8387f454c63ee742878e6 Mon Sep 17 00:00:00 2001
From: Manuel Calavera <diserkin@gmail.com>
Date: Mon, 8 Jul 2019 16:56:00 -0700
Subject: [PATCH] feat: endpoint config and validators page

---
 src/AppV2.js                                  |  13 +++
 src/index.js                                  |  12 ++-
 src/v2/api/socket.js                          |   5 +-
 src/v2/assets/icons/question.svg              |   3 +
 .../NetworkOverview/NodesMap/index.jsx        |  21 ++--
 src/v2/components/Footer/Newsletter/styles.js |   3 +
 src/v2/components/Footer/assets/bg_sm.svg     |  24 +++++
 src/v2/components/Footer/index.jsx            |  12 ++-
 src/v2/components/Footer/styles.js            |  17 +++
 src/v2/components/Header/index.jsx            |  25 ++++-
 src/v2/components/Header/styles.js            |   1 +
 src/v2/components/NavBar/index.jsx            |   8 +-
 src/v2/components/NavBar/styles.js            |   6 ++
 src/v2/components/Social/styles.js            |   8 ++
 src/v2/components/UI/StatCard/index.jsx       |   1 +
 src/v2/components/Validators/All/index.jsx    |  14 +++
 src/v2/components/Validators/Table/index.jsx  | 100 ++++++++++++++++++
 src/v2/components/Validators/Table/styles.js  |  88 +++++++++++++++
 .../Validators/ValidatorsMap/index.jsx        |  98 +++++++++++++++++
 .../Validators/ValidatorsMap/styles.js        |  28 +++++
 src/v2/components/Validators/index.jsx        |  95 +++++++++++++++++
 src/v2/components/Validators/styles.js        |  32 ++++++
 src/v2/stores/nodes.js                        |   2 -
 src/v2/stores/socket.js                       |  16 +++
 24 files changed, 604 insertions(+), 28 deletions(-)
 create mode 100644 src/v2/assets/icons/question.svg
 create mode 100644 src/v2/components/Footer/assets/bg_sm.svg
 create mode 100644 src/v2/components/Validators/All/index.jsx
 create mode 100644 src/v2/components/Validators/Table/index.jsx
 create mode 100644 src/v2/components/Validators/Table/styles.js
 create mode 100644 src/v2/components/Validators/ValidatorsMap/index.jsx
 create mode 100644 src/v2/components/Validators/ValidatorsMap/styles.js
 create mode 100644 src/v2/components/Validators/index.jsx
 create mode 100644 src/v2/components/Validators/styles.js

diff --git a/src/AppV2.js b/src/AppV2.js
index fef4402b..401ae04e 100644
--- a/src/AppV2.js
+++ b/src/AppV2.js
@@ -16,6 +16,8 @@ try {
 }
 
 const Dashboard = lazy(() => import('v2/components/Dashboard'));
+const Validators = lazy(() => import('v2/components/Validators'));
+const ValidatorsAll = lazy(() => import('v2/components/Validators/All'));
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -26,6 +28,11 @@ const useStyles = makeStyles(theme => ({
     flexGrow: 1,
     marginLeft: 50,
     padding: '50px 24px 0 24px',
+    maxWidth: '100%',
+    [theme.breakpoints.down('sm')]: {
+      marginLeft: 0,
+      padding: 0,
+    },
   },
   toolbar: {
     display: 'flex',
@@ -49,6 +56,12 @@ const App = () => {
           <Suspense fallback={<div>Loading...</div>}>
             <Switch>
               <Route exact path="/rc" component={Dashboard} />
+              <Route exact path="/rc/validators" component={Validators} />
+              <Route
+                exact
+                path="/rc/validators/all"
+                component={ValidatorsAll}
+              />
             </Switch>
           </Suspense>
           <Footer />
diff --git a/src/index.js b/src/index.js
index c7fa0ad7..f2be12a0 100755
--- a/src/index.js
+++ b/src/index.js
@@ -1,18 +1,24 @@
-import React from 'react';
+import React, {lazy, Suspense} from 'react';
 import ReactDOM from 'react-dom';
 import {BrowserRouter} from 'react-router-dom';
 
 import './index.css';
 import App from './App';
-import AppV2 from './AppV2';
 import * as serviceWorker from './serviceWorker';
 import * as EndpointConfig from './EndpointConfig';
+const AppV2 = lazy(() => import('./AppV2'));
 
 async function main() {
   await EndpointConfig.load();
   ReactDOM.render(
     <BrowserRouter>
-      {window.location.pathname.includes('rc') ? <AppV2 /> : <App />}
+      {window.location.pathname.includes('rc') ? (
+        <Suspense fallback={<div>Loading...</div>}>
+          <AppV2 />
+        </Suspense>
+      ) : (
+        <App />
+      )}
     </BrowserRouter>,
     document.getElementById('root'),
   );
diff --git a/src/v2/api/socket.js b/src/v2/api/socket.js
index 6b912dc5..9d58a1b3 100644
--- a/src/v2/api/socket.js
+++ b/src/v2/api/socket.js
@@ -1,6 +1,7 @@
 import RobustWebSocket from 'robust-websocket';
-import {BLOCK_EXPLORER_WS_API_BASE} from 'v2/const';
+
+import * as EndpointConfig from '../../EndpointConfig';
 
 export const initSocket = () => {
-  return new RobustWebSocket(BLOCK_EXPLORER_WS_API_BASE);
+  return new RobustWebSocket(EndpointConfig.getApiWebsocketUrl());
 };
diff --git a/src/v2/assets/icons/question.svg b/src/v2/assets/icons/question.svg
new file mode 100644
index 00000000..d6ba0a84
--- /dev/null
+++ b/src/v2/assets/icons/question.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="5" height="10" viewBox="0 0 5 10">
+  <path fill="#67B600" fill-rule="evenodd" d="M7.49604995,9.44778182 C7.49897222,9.23848312 7.51576739,9.0752936 7.54643546,8.95821326 C7.62569734,8.65561808 7.73526361,8.37704258 7.87513753,8.12247839 C8.01501145,7.86791419 8.17586405,7.63016441 8.35770015,7.4092219 C8.53953625,7.18827939 8.70971363,6.96974171 8.86823741,6.75360231 C9.02676119,6.5374629 9.15963942,6.31892522 9.26687609,6.09798271 C9.37411277,5.8770402 9.4277303,5.6368889 9.4277303,5.37752161 C9.4277303,4.99327378 9.31350164,4.6642665 9.08504091,4.39048991 C8.85658017,4.11671333 8.51855659,3.97982709 8.07096004,3.97982709 C7.76323741,3.97982709 7.47183778,4.05427399 7.1967524,4.20317003 C7.08126928,4.26567782 6.94144356,4.36976917 6.77727522,4.51544409 C6.59258922,4.67928808 6.31338209,4.67509719 6.13371591,4.50576369 C5.96263534,4.34452204 5.95465932,4.07512165 6.11590097,3.90404108 C6.12383955,3.89561809 6.13211837,3.8875224 6.14073544,3.87979486 C6.41994353,3.62819478 6.65538816,3.44780206 6.84706934,3.33861671 C7.24337879,3.11287111 7.69796222,3 8.21083326,3 C8.9195278,3 9.48600869,3.2041286 9.91029292,3.61239193 C10.3345771,4.02065526 10.5467161,4.58501081 10.5467161,5.3054755 C10.5467161,5.62247997 10.4907674,5.91066153 10.3788682,6.17002882 C10.2669691,6.42939611 10.1294285,6.67435043 9.96624221,6.90489914 C9.80305597,7.13544784 9.63054738,7.36359157 9.44871128,7.58933718 C9.26687519,7.81508278 9.099029,8.04802954 8.94516768,8.28818444 C8.79130637,8.52833934 8.67241532,8.78530122 8.58849096,9.05907781 C8.5564541,9.16358792 8.53511817,9.30825517 8.52448317,9.49307955 C8.50893161,9.76307523 8.28545395,9.9740634 8.01501075,9.9740634 C7.72835522,9.9740634 7.495975,9.74168318 7.495975,9.45502765 C7.495975,9.45261217 7.49599186,9.45019672 7.49604995,9.44778182 Z M8.0429854,13 C7.80986219,13 7.61404164,12.915947 7.45551786,12.7478386 C7.29699408,12.5797302 7.21773338,12.3659955 7.21773338,12.1066282 C7.21773338,11.8280486 7.29699408,11.6047079 7.45551786,11.4365994 C7.61404164,11.268491 7.80986219,11.184438 8.0429854,11.184438 C8.2761086,11.184438 8.47426035,11.268491 8.63744659,11.4365994 C8.80063284,11.6047079 8.88222473,11.8280486 8.88222473,12.1066282 C8.88222473,12.3659955 8.80063284,12.5797302 8.63744659,12.7478386 C8.47426035,12.915947 8.2761086,13 8.0429854,13 Z" transform="translate(-6 -3)"/>
+</svg>
diff --git a/src/v2/components/Dashboard/NetworkOverview/NodesMap/index.jsx b/src/v2/components/Dashboard/NetworkOverview/NodesMap/index.jsx
index b2404458..24bf2682 100644
--- a/src/v2/components/Dashboard/NetworkOverview/NodesMap/index.jsx
+++ b/src/v2/components/Dashboard/NetworkOverview/NodesMap/index.jsx
@@ -74,18 +74,15 @@ const NodesMap = () => {
             geography={`${process.env.PUBLIC_URL}/resources/world-50m-simplified.json`}
           >
             {(geographies, projection) =>
-              geographies.map(
-                (geography, i) =>
-                  geography.id !== 'ATA' && (
-                    <Geography
-                      key={i}
-                      tabable={false}
-                      geography={geography}
-                      projection={projection}
-                      style={mapStyles}
-                    />
-                  ),
-              )
+              geographies.map((geography, i) => (
+                <Geography
+                  key={i}
+                  tabable={false}
+                  geography={geography}
+                  projection={projection}
+                  style={mapStyles}
+                />
+              ))
             }
           </Geographies>
           <Markers>{map(renderMarker)(mapMarkers)}</Markers>
diff --git a/src/v2/components/Footer/Newsletter/styles.js b/src/v2/components/Footer/Newsletter/styles.js
index 5c6c7737..3687d9bd 100644
--- a/src/v2/components/Footer/Newsletter/styles.js
+++ b/src/v2/components/Footer/Newsletter/styles.js
@@ -20,6 +20,9 @@ export default makeStyles(theme => ({
     padding: 5,
     display: 'flex',
     marginBottom: 132,
+    [theme.breakpoints.down('md')]: {
+      marginBottom: 0,
+    },
   },
   input: {
     border: 'none',
diff --git a/src/v2/components/Footer/assets/bg_sm.svg b/src/v2/components/Footer/assets/bg_sm.svg
new file mode 100644
index 00000000..b8cf7a56
--- /dev/null
+++ b/src/v2/components/Footer/assets/bg_sm.svg
@@ -0,0 +1,24 @@
+<svg width="375" height="70" viewBox="0 0 375 70" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="158.525" y="50.525" width="18.95" height="18.95" stroke="#00FFAD" stroke-width="1.05"/>
+<rect x="295.525" y="50.525" width="18.95" height="18.95" stroke="#00FFAD" stroke-width="1.05"/>
+<rect x="90" width="20" height="20" fill="#00FFAD"/>
+<rect x="226" y="50" width="20" height="20" fill="#00FFAD"/>
+<rect x="295.525" y="0.525" width="18.95" height="18.95" stroke="white" stroke-width="1.05"/>
+<rect x="124.525" y="25.525" width="18.95" height="18.95" stroke="white" stroke-width="1.05"/>
+<rect x="261.525" y="0.525" width="18.95" height="18.95" stroke="#00FFAD" stroke-width="1.05"/>
+<rect x="329.525" y="0.525" width="18.95" height="18.95" stroke="#00FFAD" stroke-width="1.05"/>
+<rect x="192.525" y="25.525" width="18.95" height="18.95" stroke="#00FFAD" stroke-width="1.05"/>
+<rect x="295.525" y="25.525" width="18.95" height="18.95" stroke="#00FFAD" stroke-width="1.05"/>
+<rect x="329.525" y="50.525" width="18.95" height="18.95" stroke="white" stroke-width="1.05"/>
+<rect x="56.525" y="50.525" width="18.95" height="18.95" stroke="#00FFAD" stroke-width="1.05"/>
+<rect x="56.525" y="25.525" width="18.95" height="18.95" stroke="#00FFAD" stroke-width="1.05"/>
+<rect x="22.525" y="25.525" width="18.95" height="18.95" stroke="#00FFAD" stroke-width="1.05"/>
+<rect x="56.525" y="0.525" width="18.95" height="18.95" stroke="#00FFAD" stroke-width="1.05"/>
+<rect x="-12" y="25" width="20" height="20" fill="#00FFAD"/>
+<rect x="383" y="45" width="20" height="20" transform="rotate(-180 383 45)" fill="#00FFAD"/>
+<rect x="-12.475" y="0.525" width="53.95" height="18.95" stroke="white" stroke-width="1.05"/>
+<rect x="226.525" y="25.525" width="53.95" height="18.95" stroke="white" stroke-width="1.05"/>
+<rect x="90.525" y="50.525" width="53.95" height="18.95" stroke="white" stroke-width="1.05"/>
+<rect x="158.525" y="0.525" width="53.95" height="18.95" stroke="#00FFAD" stroke-width="1.05"/>
+<rect x="-46.475" y="50.525" width="53.95" height="18.95" stroke="#00FFAD" stroke-width="1.05"/>
+</svg>
diff --git a/src/v2/components/Footer/index.jsx b/src/v2/components/Footer/index.jsx
index 7dc3b341..38b2daf6 100644
--- a/src/v2/components/Footer/index.jsx
+++ b/src/v2/components/Footer/index.jsx
@@ -7,24 +7,28 @@ import Newsletter from './Newsletter';
 import Partnership from './Partnership';
 import useStyles from './styles';
 import bg from './assets/bg.svg';
+import bgSm from './assets/bg_sm.svg';
 
 const Footer = () => {
   const classes = useStyles();
   return (
     <div className={classes.root}>
-      <img className={classes.bg} src={bg} alt="" />
+      <picture>
+        <source srcSet={bgSm} media="(max-width: 960px)" />
+        <img className={classes.bg} src={bg} alt="" />
+      </picture>
       <Grid container>
-        <Grid item className={classes.left} xs={5}>
+        <Grid item className={classes.left} xs={12} md={5}>
           <Logo vertical />
           <Newsletter />
           <Typography className={classes.copyright}>
             © Copyright Solana Labs, Inc. All rights reserved.
           </Typography>
         </Grid>
-        <Grid item className={classes.right} xs={5}>
+        <Grid item className={classes.right} xs={12} md={5}>
           <Partnership />
         </Grid>
-        <Grid item xs={1}>
+        <Grid item xs={12} md={1}>
           <Social />
         </Grid>
       </Grid>
diff --git a/src/v2/components/Footer/styles.js b/src/v2/components/Footer/styles.js
index 24097c2d..3c7f585b 100644
--- a/src/v2/components/Footer/styles.js
+++ b/src/v2/components/Footer/styles.js
@@ -6,24 +6,41 @@ export default makeStyles(theme => ({
     paddingTop: 100,
     position: 'relative',
     marginLeft: 28,
+    [theme.breakpoints.down('md')]: {
+      paddingTop: 0,
+      marginLeft: 0,
+    },
   },
   left: {
     background: getColor('main')(theme),
     padding: '45px 80px 35px',
     display: 'flex',
     flexDirection: 'column',
+    [theme.breakpoints.down('md')]: {
+      padding: '40px 22px',
+    },
   },
   right: {
     background: getColor('grey2')(theme),
     padding: '170px 80px 35px',
+    [theme.breakpoints.down('md')]: {
+      padding: '40px 22px',
+    },
   },
   copyright: {
     marginTop: 'auto',
     fontSize: 10,
     color: getColor('dark')(theme),
+    [theme.breakpoints.down('md')]: {
+      display: 'none',
+    },
   },
   bg: {
     position: 'absolute',
     left: -160,
+    [theme.breakpoints.down('md')]: {
+      position: 'static',
+      width: '100%',
+    },
   },
 }));
diff --git a/src/v2/components/Header/index.jsx b/src/v2/components/Header/index.jsx
index c02f809d..bb2e1001 100644
--- a/src/v2/components/Header/index.jsx
+++ b/src/v2/components/Header/index.jsx
@@ -1,17 +1,35 @@
 // @flow
 
+import Select from '@material-ui/core/Select';
 import React from 'react';
+import {observer} from 'mobx-react-lite';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import Logo from 'v2/components/UI/Logo';
 import Search from 'v2/components/Search';
+import socketActions from 'v2/stores/socket';
+import {map} from 'lodash/fp';
 
+import * as EndpointConfig from '../../../EndpointConfig';
 import {ReactComponent as LiveIcon} from './assets/liveIcon.svg';
 import useStyles from './styles';
 
 const Header = () => {
+  const {endpointName, updateEndpointName} = socketActions;
   const classes = useStyles();
   const onSearch = () => {};
+  const handleEndpointChange = (event: SyntheticEvent<HTMLSelectElement>) => {
+    const endpointName = event.currentTarget.value;
+    EndpointConfig.setEndpointName(endpointName);
+    updateEndpointName(endpointName);
+    socketActions.init();
+  };
+  const endPointsList = EndpointConfig.getEndpoints();
+  const renderEndpointOption = endpoint => (
+    <option key={endpoint} value={endpoint}>
+      {endpoint}
+    </option>
+  );
   return (
     <AppBar className={classes.root} position="fixed" color="secondary">
       <Toolbar>
@@ -25,11 +43,12 @@ const Header = () => {
             Every 5 sec <LiveIcon />
           </div>
         </div>
+        <Select value={endpointName} onChange={handleEndpointChange} native>
+          {map(renderEndpointOption)(endPointsList)}
+        </Select>
       </Toolbar>
     </AppBar>
   );
 };
 
-Header.propTypes = {};
-
-export default Header;
+export default observer(Header);
diff --git a/src/v2/components/Header/styles.js b/src/v2/components/Header/styles.js
index d8d162a4..625dc1b6 100644
--- a/src/v2/components/Header/styles.js
+++ b/src/v2/components/Header/styles.js
@@ -22,6 +22,7 @@ export default makeStyles(theme => ({
     textTransform: 'uppercase',
     fontSize: 12,
     letterSpacing: 2.5,
+    marginRight: 25,
     '& div': {
       background: 'transparent',
       border: `1px solid ${getColor('main')(theme)}`,
diff --git a/src/v2/components/NavBar/index.jsx b/src/v2/components/NavBar/index.jsx
index 93a519b3..9fed8e01 100644
--- a/src/v2/components/NavBar/index.jsx
+++ b/src/v2/components/NavBar/index.jsx
@@ -1,6 +1,8 @@
 // @flow
 
 import {Drawer, List, ListItem, ListItemIcon} from '@material-ui/core';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
+import {useTheme} from '@material-ui/core/styles';
 import {RouterHistory, withRouter} from 'react-router-dom';
 import React from 'react';
 import {map, propEq, eq} from 'lodash/fp';
@@ -32,6 +34,8 @@ const NavBar = ({
   history: RouterHistory,
 }) => {
   const classes = useStyles();
+  const theme = useTheme();
+  const showDriver = useMediaQuery(theme.breakpoints.up('md'));
   const routes = [
     'dashboard',
     'transactions',
@@ -47,7 +51,7 @@ const NavBar = ({
     const selected =
       propEq('pathname', `/${link}`)(location) ||
       (propEq('pathname', '/')(location) && isDashboard);
-    const changeRoute = () => history.push(`/v2/${isDashboard ? '' : link}`);
+    const changeRoute = () => history.push(`/rc/${isDashboard ? '' : link}`);
     return (
       <ListItem
         onClick={changeRoute}
@@ -66,7 +70,7 @@ const NavBar = ({
   return (
     <div className={classes.root}>
       <Drawer
-        variant="permanent"
+        variant={!showDriver ? 'temporary' : 'permanent'}
         classes={{
           root: classes.drawerRoot,
           paper: classes.drawerPaper,
diff --git a/src/v2/components/NavBar/styles.js b/src/v2/components/NavBar/styles.js
index 5ff09c0f..7e7fe3b2 100644
--- a/src/v2/components/NavBar/styles.js
+++ b/src/v2/components/NavBar/styles.js
@@ -4,6 +4,9 @@ export default makeStyles(theme => ({
   root: {
     width: 102,
     flexShrink: 0,
+    [theme.breakpoints.down('sm')]: {
+      width: 0,
+    },
   },
   toolbar: {
     display: 'flex',
@@ -25,5 +28,8 @@ export default makeStyles(theme => ({
   drawerRoot: {
     width: 102,
     flexShrink: 0,
+    [theme.breakpoints.down('sm')]: {
+      width: 0,
+    },
   },
 }));
diff --git a/src/v2/components/Social/styles.js b/src/v2/components/Social/styles.js
index b7e54dcc..2dc3e769 100644
--- a/src/v2/components/Social/styles.js
+++ b/src/v2/components/Social/styles.js
@@ -7,6 +7,10 @@ export default makeStyles(theme => ({
     flexDirection: 'column',
     alignItems: 'center',
     marginTop: 80,
+    [theme.breakpoints.down('md')]: {
+      flexDirection: 'row',
+      justifyContent: 'center',
+    },
   },
   link: {
     background: getColor('main')(theme),
@@ -20,5 +24,9 @@ export default makeStyles(theme => ({
       width: 17,
       height: 'auto',
     },
+    [theme.breakpoints.down('md')]: {
+      marginBottom: 0,
+      marginRight: 22,
+    },
   },
 }));
diff --git a/src/v2/components/UI/StatCard/index.jsx b/src/v2/components/UI/StatCard/index.jsx
index 22566607..c74fe8f6 100644
--- a/src/v2/components/UI/StatCard/index.jsx
+++ b/src/v2/components/UI/StatCard/index.jsx
@@ -14,6 +14,7 @@ const StatCard = (props: StatCardProps) => {
   const classes = useStyles();
   const {title, value, changes} = props;
   const renderValue = () => {
+    if (!value) return;
     if (typeof value === 'function') {
       return value();
     }
diff --git a/src/v2/components/Validators/All/index.jsx b/src/v2/components/Validators/All/index.jsx
new file mode 100644
index 00000000..e6572a50
--- /dev/null
+++ b/src/v2/components/Validators/All/index.jsx
@@ -0,0 +1,14 @@
+import {Container} from '@material-ui/core';
+import React from 'react';
+
+import ValidatorsTable from '../Table';
+
+const ValidatorsAll = () => {
+  return (
+    <Container>
+      <ValidatorsTable />
+    </Container>
+  );
+};
+
+export default ValidatorsAll;
diff --git a/src/v2/components/Validators/Table/index.jsx b/src/v2/components/Validators/Table/index.jsx
new file mode 100644
index 00000000..9808a871
--- /dev/null
+++ b/src/v2/components/Validators/Table/index.jsx
@@ -0,0 +1,100 @@
+import React from 'react';
+import {
+  Typography,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  Grid,
+} from '@material-ui/core';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
+import {useTheme} from '@material-ui/core/styles';
+import {observer} from 'mobx-react-lite';
+import {Link} from 'react-router-dom';
+import {map} from 'lodash/fp';
+import NodesStore from 'v2/stores/nodes';
+
+import useStyles from './styles';
+
+const ValidatorsTable = () => {
+  const classes = useStyles();
+  const theme = useTheme();
+  const showTable = useMediaQuery(theme.breakpoints.up('md'));
+  const {
+    cluster: {nodes},
+  } = NodesStore;
+  const renderRow = row => {
+    return (
+      <TableRow hover key={row.pubkey}>
+        <TableCell align="center">
+          <div className={classes.name}>
+            <span />
+            {row.pubkey}
+          </div>
+        </TableCell>
+        <TableCell>total sol</TableCell>
+        <TableCell>Commission</TableCell>
+        <TableCell>Uptime</TableCell>
+      </TableRow>
+    );
+  };
+  const renderCard = card => {
+    return (
+      <div className={classes.card}>
+        <div className={classes.name}>
+          <span />
+          {card.pubkey}
+        </div>
+        <Grid container>
+          <Grid item xs={4} zeroMinWidth>
+            <div className={classes.cardTitle}>Total sol</div>
+            <div>Total sol</div>
+          </Grid>
+          <Grid item xs={4} zeroMinWidth>
+            <div className={classes.cardTitle}>Commission</div>
+            <div>Commission</div>
+          </Grid>
+          <Grid item xs={4} zeroMinWidth>
+            <div className={classes.cardTitle}>Uptime</div>
+            <div>Uptime</div>
+          </Grid>
+        </Grid>
+      </div>
+    );
+  };
+  return (
+    <div className={classes.root}>
+      <div className={classes.header}>
+        <Typography>Validators</Typography>
+        <Typography variant="h5">129,948</Typography>
+        <Link to="validators/all" className={classes.link}>
+          See all &gt;
+        </Link>
+      </div>
+      {showTable ? (
+        <Table>
+          <TableHead className={classes.head}>
+            <TableRow>
+              <TableCell align="center">Name/Moniker</TableCell>
+              <TableCell>Total Sol</TableCell>
+              <TableCell>Commission</TableCell>
+              <TableCell>Uptime</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody
+            classes={{
+              root: classes.body,
+            }}
+          >
+            {map(renderRow)(nodes)}
+          </TableBody>
+        </Table>
+      ) : (
+        <div className={classes.list}>{map(renderCard)(nodes)}</div>
+      )}
+    </div>
+  );
+};
+
+export default observer(ValidatorsTable);
diff --git a/src/v2/components/Validators/Table/styles.js b/src/v2/components/Validators/Table/styles.js
new file mode 100644
index 00000000..62d8afb0
--- /dev/null
+++ b/src/v2/components/Validators/Table/styles.js
@@ -0,0 +1,88 @@
+import {makeStyles} from '@material-ui/core';
+import getColor from 'v2/utils/getColor';
+
+export default makeStyles(theme => ({
+  root: {
+    marginTop: 19,
+    background: getColor('grey2')(theme),
+    padding: '25px 44px',
+    [theme.breakpoints.down('md')]: {
+      padding: 0,
+      paddingBottom: 27,
+    },
+  },
+  head: {
+    border: '1px solid #979797',
+    '& th': {
+      textTransform: 'uppercase',
+      fontSize: 15,
+      letterSpacing: 2,
+      fontWeight: 'bold',
+      borderBottom: 'none',
+    },
+  },
+  body: {
+    '& td': {
+      fontSize: 15,
+      paddingTop: 18,
+      paddingBottom: 18,
+    },
+  },
+  header: {
+    display: 'flex',
+    alignItems: 'baseline',
+    flexWrap: 'wrap',
+    '& *:first-child': {
+      marginRight: 35,
+    },
+    marginBottom: 23,
+    [theme.breakpoints.down('md')]: {
+      padding: '10px 27px 0',
+      marginBottom: 10,
+    },
+  },
+  link: {
+    marginLeft: 'auto',
+    textTransform: 'uppercase',
+    color: getColor('main')(theme),
+    fontSize: 15,
+    textDecoration: 'none',
+  },
+  name: {
+    display: 'flex',
+    alignItems: 'center',
+    color: getColor('main')(theme),
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    '& span': {
+      width: 33,
+      height: 33,
+      flexShrink: 0,
+      background: getColor('main')(theme),
+      borderRadius: '50%',
+      marginRight: 22,
+    },
+    [theme.breakpoints.down('md')]: {
+      marginBottom: 22,
+    },
+  },
+  list: {
+    display: 'flex',
+    width: '100%',
+    overflowX: 'auto',
+  },
+  card: {
+    padding: 17,
+    background: '#505050',
+    marginRight: 12,
+    maxWidth: 326,
+  },
+  cardTitle: {
+    fontSize: 12,
+    textTransform: 'uppercase',
+    color: '#C4C4C4',
+    letterSpacing: 2,
+    fontWight: 'bold',
+  },
+}));
diff --git a/src/v2/components/Validators/ValidatorsMap/index.jsx b/src/v2/components/Validators/ValidatorsMap/index.jsx
new file mode 100644
index 00000000..5882054e
--- /dev/null
+++ b/src/v2/components/Validators/ValidatorsMap/index.jsx
@@ -0,0 +1,98 @@
+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 {map} from 'lodash/fp';
+import nodesStore from 'v2/stores/nodes';
+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 mapConfig = {
+    projection: {
+      scale: 150,
+      rotation: [-11, 0, 0],
+    },
+    style: {
+      width: '100%',
+      height: 'auto',
+    },
+    center: [0, 20],
+  };
+
+  const renderMarker = marker => (
+    <Marker key={marker.name} style={markerStyle} marker={marker}>
+      <MapTooltip
+        classes={{tooltip: classes.tooltip}}
+        title={() => (
+          <>
+            <div className={classes.tooltipTitle}>NODE: {marker.name}</div>
+            <div className={classes.tooltipDesc}>Gossip: {marker.gossip}</div>
+          </>
+        )}
+      >
+        <circle
+          cx={0}
+          cy={0}
+          r={5}
+          style={{
+            stroke: '#00FFAD',
+          }}
+        />
+      </MapTooltip>
+    </Marker>
+  );
+  return (
+    <div className={classes.card}>
+      <Typography>Active Validators Map</Typography>
+      <ComposableMap
+        projectionConfig={mapConfig.projection}
+        width={690}
+        height={410}
+        style={mapConfig.style}
+      >
+        <ZoomableGroup center={mapConfig.center} disablePanning>
+          <Geographies
+            geography={`${process.env.PUBLIC_URL}/resources/world-50m-simplified.json`}
+          >
+            {(geographies, projection) =>
+              geographies.map(
+                (geography, i) =>
+                  geography.id !== 'ATA' && (
+                    <Geography
+                      key={i}
+                      tabable={false}
+                      geography={geography}
+                      projection={projection}
+                      style={mapStyles}
+                    />
+                  ),
+              )
+            }
+          </Geographies>
+          <Markers>{map(renderMarker)(mapMarkers)}</Markers>
+        </ZoomableGroup>
+      </ComposableMap>
+    </div>
+  );
+};
+
+export default observer(ValidatorsMap);
diff --git a/src/v2/components/Validators/ValidatorsMap/styles.js b/src/v2/components/Validators/ValidatorsMap/styles.js
new file mode 100644
index 00000000..81f1aef7
--- /dev/null
+++ b/src/v2/components/Validators/ValidatorsMap/styles.js
@@ -0,0 +1,28 @@
+import {makeStyles} from '@material-ui/core';
+import getColor from 'v2/utils/getColor';
+
+export default makeStyles(theme => ({
+  card: {
+    background: getColor('grey2')(theme),
+    maxHeight: 558,
+    overflow: 'hidden',
+    padding: '14px 35px',
+  },
+  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),
+  },
+}));
diff --git a/src/v2/components/Validators/index.jsx b/src/v2/components/Validators/index.jsx
new file mode 100644
index 00000000..70abd832
--- /dev/null
+++ b/src/v2/components/Validators/index.jsx
@@ -0,0 +1,95 @@
+// @flow
+import {Container, Grid} from '@material-ui/core';
+import React from 'react';
+import {observer} from 'mobx-react-lite';
+import {map} from 'lodash/fp';
+import Card from 'v2/components/UI/StatCard';
+import SectionHeader from 'v2/components/UI/SectionHeader';
+import NodesStore from 'v2/stores/nodes';
+
+import Button from '../UI/Button';
+import ValidatorsMap from './ValidatorsMap';
+import ValidatorsTable from './Table';
+import useStyles from './styles';
+
+const Validators = () => {
+  const classes = useStyles();
+  const {cluster, clusterChanges} = NodesStore;
+  const cards = [
+    {
+      title: 'Total Circulating SOL',
+      value: cluster.supply / Math.pow(2, 34).toFixed(2),
+      changes: clusterChanges.supply,
+      period: 'since yesterday',
+    },
+    {
+      title: 'Total Bonded Tokens',
+      value: '100,000',
+      changes: '-2.45',
+      period: 'since yesterday',
+    },
+    {
+      title: '# Active Validators',
+      value: cluster.nodes.length,
+      changes: clusterChanges.nodes,
+      period: 'since yesterday',
+    },
+  ];
+
+  const renderStats = ({
+    title,
+    value,
+    changes = null,
+    period,
+  }: {
+    title: string,
+    value: string | (() => React$Node),
+    changes: () => React$Node,
+    period: string,
+  }) => (
+    <div key={title} className={classes.card}>
+      <Card
+        key={title}
+        zeroMinWidth
+        title={title}
+        value={value}
+        changes={() => (
+          <div className={classes.changes}>
+            <div>{changes}%</div>
+            <div className={classes.period}>{period}</div>
+          </div>
+        )}
+      />
+    </div>
+  );
+
+  return (
+    <Container>
+      <div className={classes.root}>
+        <SectionHeader>
+          Validators Overview
+          <div className={classes.becomeBtn}>
+            <Button variant="contained" color="primary">
+              Become a validator
+            </Button>
+          </div>
+        </SectionHeader>
+        <Grid spacing={2} container alignItems="flex-start">
+          <Grid item xs={12} md={9} zeroMinWidth>
+            <ValidatorsMap />
+          </Grid>
+          <Grid item xs={12} md={3} zeroMinWidth>
+            {map(renderStats)(cards)}
+          </Grid>
+        </Grid>
+        <Grid container>
+          <Grid item xs={12} zeroMinWidth>
+            <ValidatorsTable />
+          </Grid>
+        </Grid>
+      </div>
+    </Container>
+  );
+};
+
+export default observer(Validators);
diff --git a/src/v2/components/Validators/styles.js b/src/v2/components/Validators/styles.js
new file mode 100644
index 00000000..85de48d9
--- /dev/null
+++ b/src/v2/components/Validators/styles.js
@@ -0,0 +1,32 @@
+import {makeStyles} from '@material-ui/core';
+import getColor from 'v2/utils/getColor';
+
+export default makeStyles(theme => ({
+  root: {
+    padding: '40px 0',
+  },
+  changes: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    width: '100%',
+    padding: '0 20px',
+  },
+  period: {
+    fontSize: 12,
+    textTransform: 'uppercase',
+    color: getColor('grey4')(theme),
+    fontWeight: 'normal',
+  },
+  card: {
+    '&:not(:last-child)': {
+      marginBottom: 15,
+    },
+  },
+  becomeBtn: {
+    marginLeft: 'auto',
+    [theme.breakpoints.down('md')]: {
+      display: 'none',
+    },
+  },
+}));
diff --git a/src/v2/stores/nodes.js b/src/v2/stores/nodes.js
index e48d9785..b87ab090 100644
--- a/src/v2/stores/nodes.js
+++ b/src/v2/stores/nodes.js
@@ -5,7 +5,6 @@ import {parseClusterInfo} from 'v2/utils/parseMessage';
 import calcChanges from '../utils/calcChanges';
 
 class NodesStore {
-  nodes = [];
   cluster = {
     nodes: [],
   };
@@ -42,7 +41,6 @@ class NodesStore {
 }
 
 decorate(NodesStore, {
-  nodes: observable,
   cluster: observable,
   updateClusterInfo: action.bound,
   mapMarkers: computed,
diff --git a/src/v2/stores/socket.js b/src/v2/stores/socket.js
index 180a8186..48e94a91 100644
--- a/src/v2/stores/socket.js
+++ b/src/v2/stores/socket.js
@@ -1,7 +1,10 @@
+import {observable, decorate, action} from 'mobx';
 import {initSocket} from 'v2/api/socket';
 import networkOverview from 'v2/stores/networkOverview';
 import nodes from 'v2/stores/nodes';
 
+import * as EndpointConfig from '../../EndpointConfig';
+
 const socketActions = {
   actions: {
     'global-info': networkOverview.updateGlobalStats,
@@ -9,14 +12,27 @@ const socketActions = {
     'cluster-info': nodes.updateClusterInfo,
     'txns-by-prgid': networkOverview.addTransaction,
   },
+  endpointName: EndpointConfig.getEndpointName(),
   onMessage(event) {
     const {t, m} = JSON.parse(event.data);
     this.actions[t](m);
   },
   init() {
+    if (this.ws) {
+      this.ws.close();
+      this.ws = null;
+    }
     this.ws = initSocket();
     this.ws.onmessage = event => this.onMessage(event);
   },
+  updateEndpointName(endpointName) {
+    this.endpointName = endpointName;
+  },
 };
 
+decorate(socketActions, {
+  endpointName: observable,
+  updateEndpointName: action.bound,
+});
+
 export default socketActions;