feat: endpoint config and validators page

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 />

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'),
   );

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());
 };

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>

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',

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>

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%',
+    },
   },
 }));

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);

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)}`,

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,

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

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

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();
     }

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;