feat: v2 app and dashboard started

.env.development

@@ -0,0 +1 @@
+REACT_APP_BASE_URL='http://testnet.solana.com'

.env.production

@@ -0,0 +1 @@
+REACT_APP_BASE_URL=''

.eslintrc.js

@@ -1,3 +1,6 @@
+require('@babel/register');
+const path = require('path');
+
 module.exports = {
   // eslint-disable-line import/no-commonjs
   env: {
@@ -8,9 +11,9 @@ module.exports = {
   plugins: ['react'],
   extends: [
     'eslint:recommended',
+    'plugin:react/recommended',
     'plugin:import/errors',
     'plugin:import/warnings',
-    'plugin:react/recommended',
   ],
   parser: 'babel-eslint',
   parserOptions: {
@@ -51,6 +54,9 @@ module.exports = {
   },
   settings: {
     'import/resolver': {
+      alias: {
+        map: [['v2', path.resolve(__dirname, 'src/v2')]],
+      },
       node: {
         extensions: ['.js', '.jsx'],
       },

config-overrides.js

@@ -0,0 +1,7 @@
+/* eslint-disable */
+const {override, addBabelPlugin} = require('customize-cra');
+
+module.exports = override(
+  // addBabelPlugin('lodash'),
+  addBabelPlugin('react-hot-loader/babel'),
+);

jsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "baseUrl": "src",
+    "paths": {
+      "*": ["src/*"]
+    }
+  }
+}

package.json

@@ -15,45 +15,64 @@
     "@solana/web3.js": "^0.16.10",
     "babel-plugin-transform-runtime": "^6.23.0",
     "base-58": "^0.0.1",
+    "classnames": "^2.2.6",
     "copy-to-clipboard": "^3.2.0",
     "cors": "^2.8.5",
     "express": "^4.17.1",
     "express-ws": "^4.0.0",
     "geoip-lite": "^1.3.7",
     "google-map-react": "^1.1.4",
+    "humps": "^2.0.1",
     "ip": "^1.1.5",
     "lodash": "^4.17.11",
+    "mobx": "^5.10.1",
+    "mobx-react-lite": "^1.4.1",
     "nocache": "^2.1.0",
     "prop-types": "^15.7.2",
     "react-simple-maps": "^0.12.1",
     "redis": "^2.8.0",
     "serve": "^11.0.2",
+    "use-debounce": "^2.1.0",
     "yaml": "^1.6.0"
   },
   "devDependencies": {
+    "@babel/plugin-proposal-class-properties": "^7.4.4",
+    "@babel/plugin-proposal-decorators": "^7.4.4",
+    "@babel/register": "^7.4.4",
     "@commitlint/config-conventional": "^8.0.0",
     "@commitlint/travis-cli": "^8.0.0",
     "@material-ui/core": "^4.1.3",
     "@material-ui/icons": "^4.2.1",
     "axios": "^0.19.0",
     "babel-cli": "^6.26.0",
     "babel-eslint": "^10.0.2",
+    "babel-plugin-lodash": "^3.3.4",
     "babel-preset-env": "^1.7.0",
     "chart.js": "^2.8.0",
+    "customize-cra": "^0.2.14",
     "eslint": "^5.16.0",
-    "eslint-config-react-app": "^3.0.7",
-    "eslint-plugin-flowtype": "^2.0",
+    "eslint-config-prettier": "^6.0.0",
+    "eslint-config-react-app": "^4.0.1",
+    "eslint-import-resolver-alias": "^1.1.2",
+    "eslint-plugin-flowtype": "^3.11.1",
     "eslint-plugin-import": "^2.18.0",
     "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-prettier": "^3.1.0",
     "eslint-plugin-react": "^7.14",
+    "flow-bin": "^0.102.0",
+    "flow-typed": "^2.5.2",
     "history": "^4.9.0",
+    "husky": "^2.7.0",
+    "lint-staged": "^8.2.1",
     "moment": "^2.24.0",
     "prettier": "^1.18.2",
     "qrcode.react": "^0.9.3",
     "react": "^16.8.6",
+    "react-app-rewired": "^2.1.3",
     "react-chartjs-2": "^2.7.6",
     "react-debounce-render": "^5.0.0",
     "react-dom": "^16.8.6",
+    "react-hot-loader": "^4.11.1",
     "react-router-dom": "^5.0.1",
     "react-scripts": "3.0.1",
     "robust-websocket": "^1.0.0",
@@ -66,18 +85,19 @@
   "scripts": {
     "build": "set -ex; npm run build:ui; npm run build:api",
     "build:api": "babel --presets env --plugins transform-runtime api/* -d build",
-    "build:ui": "react-scripts build",
+    "build:ui": "react-app-rewired build",
     "lint": "set -ex; npm run pretty; eslint .",
     "lint:fix": "npm run lint -- --fix",
     "lint:watch": "watch 'npm run lint:fix' . --wait=1",
     "prepack": "set -ex; npm run lint; npm run build",
     "pretty": "prettier --write '{,{api,src}/**/}*.js{,x}'",
     "re": "semantic-release --repository-url [email protected]:solana-labs/blockexplorer.git",
     "start:api": "set -ex; redis-cli ping; babel-node --presets env api/api.js",
-    "start:ui": "react-scripts start",
+    "start:ui": "react-app-rewired start",
     "start-prod:api": " node build/api/api.js",
     "start-prod:ui": "serve -s build",
-    "test:ui": "react-scripts test"
+    "test:ui": "react-scripts test",
+    "flow-typed": "flow-typed install"
   },
   "files": [
     "/bin",

public/index.html

@@ -13,6 +13,7 @@
       homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link href="https://fonts.googleapis.com/css?family=Exo:400,700&display=swap" rel="stylesheet">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/AppV2.js

@@ -0,0 +1,52 @@
+import {CssBaseline, makeStyles} from '@material-ui/core';
+import {MuiThemeProvider} from '@material-ui/core/styles';
+import React, {lazy, Suspense} from 'react';
+import {hot} from 'react-hot-loader/root';
+import {Route, Switch} from 'react-router-dom';
+import Header from 'v2/components/Header';
+import NavBar from 'v2/components/NavBar';
+import theme from 'v2/theme';
+
+const Dashboard = lazy(() => import('v2/components/Dashboard'));
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    display: 'flex',
+  },
+  content: {
+    flexGrow: 1,
+    marginLeft: 50,
+    padding: theme.spacing(3),
+    paddingTop: 50,
+  },
+  toolbar: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    padding: '0 8px',
+    ...theme.mixins.toolbar,
+  },
+}));
+
+const App = () => {
+  const classes = useStyles();
+  return (
+    <MuiThemeProvider theme={theme}>
+      <div className={classes.root}>
+        <CssBaseline />
+        <Header />
+        <NavBar />
+        <div className={classes.content}>
+          <div className={classes.toolbar} />
+          <Suspense fallback={<div>Loading...</div>}>
+            <Switch>
+              <Route exact path="/v2" component={Dashboard} />
+            </Switch>
+          </Suspense>
+        </div>
+      </div>
+    </MuiThemeProvider>
+  );
+};
+
+export default hot(App);

src/index.js

@@ -1,11 +1,18 @@
 import React 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';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(
+  <BrowserRouter>
+    {window.location.pathname.includes('v2') ? <AppV2 /> : <App />}
+  </BrowserRouter>,
+  document.getElementById('root'),
+);
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.

src/v2/api/index.js

@@ -0,0 +1,27 @@
+// @flow
+
+import axios from 'axios';
+import humps from 'humps';
+import {BLOCK_EXPLORER_API_BASE} from 'v2/const';
+
+const api = axios.create({
+  baseURL: BLOCK_EXPLORER_API_BASE,
+});
+
+api.defaults.transformResponse = [
+  ...axios.defaults.transformResponse,
+  data => humps.camelizeKeys(data),
+];
+
+api.defaults.transformRequest = [
+  data => {
+    if (data instanceof FormData) {
+      return data;
+    }
+
+    return humps.decamelizeKeys(data);
+  },
+  ...axios.defaults.transformRequest,
+];
+
+export default api;

src/v2/api/stats.js

@@ -0,0 +1,5 @@
+import api from '.';
+
+export function getStats() {
+  return api('/global-stats');
+}

src/v2/components/Dashboard/NetworkOverview/StatCards/index.jsx

@@ -0,0 +1,88 @@
+// @flow
+
+import React from 'react';
+import {observer} from 'mobx-react-lite';
+import {Grid, Paper, Typography} from '@material-ui/core';
+import OverviewStore from 'v2/stores/networkOverview';
+
+import useStyles from './styles';
+
+const StatCards = () => {
+  const {globalStats} = OverviewStore;
+  const classes = useStyles();
+  return (
+    <Grid container spacing={2} alignItems="stretch">
+      <Grid item xs={3} zeroMinWidth>
+        <Paper className={classes.card}>
+          <Typography align="center" variant="body1">
+            Node Count
+          </Typography>
+          <Typography
+            noWrap
+            align="center"
+            variant="h2"
+            className={classes.val}
+          >
+            {globalStats['!blkLastSlot']}
+          </Typography>{' '}
+          <Typography align="center" variant="h2" className={classes.changes}>
+            -2.45%
+          </Typography>
+        </Paper>
+      </Grid>
+      <Grid item xs={3} zeroMinWidth>
+        <Paper className={classes.card}>
+          <Typography align="center" variant="body1">
+            Block Height
+          </Typography>
+          <Typography
+            noWrap
+            align="center"
+            variant="h2"
+            className={classes.val}
+          >
+            {globalStats['!blkLastSlot']}
+          </Typography>
+          <Typography align="center" variant="h2" className={classes.changes}>
+            -2.45%
+          </Typography>
+        </Paper>
+      </Grid>
+      <Grid item xs={3} zeroMinWidth>
+        <Paper className={classes.card}>
+          <Typography align="center" variant="body1">
+            Transactions Count
+          </Typography>
+          <Typography
+            noWrap
+            align="center"
+            variant="h2"
+            className={classes.val}
+          >
+            {globalStats['!txnCount']}
+          </Typography>
+          <Typography align="center" variant="h2" className={classes.changes}>
+            -2.45%
+          </Typography>
+        </Paper>
+      </Grid>
+      <Grid item xs={3} zeroMinWidth>
+        <Paper className={classes.card}>
+          <Typography align="center" variant="body1">
+            Current Leader
+          </Typography>
+          <Typography
+            noWrap
+            align="center"
+            variant="h2"
+            className={classes.leader}
+          >
+            {globalStats['!entLastLeader']}
+          </Typography>
+        </Paper>
+      </Grid>
+    </Grid>
+  );
+};
+
+export default observer(StatCards);

src/v2/components/Dashboard/NetworkOverview/StatCards/styles.js

@@ -0,0 +1,30 @@
+import {makeStyles} from '@material-ui/core';
+
+import getColor from '../../../../utils/getColor';
+
+export default makeStyles(theme => ({
+  card: {
+    background: getColor('grey')(theme),
+    color: '#fff',
+    borderRadius: 0,
+    height: '100%',
+    padding: '17px 30px',
+  },
+  val: {
+    fontSize: 60,
+    fontWeight: 'bold',
+    color: getColor('main')(theme),
+    margin: '20px 0',
+  },
+  leader: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    color: getColor('main')(theme),
+    marginTop: 40,
+    letterSpacing: 3.4,
+  },
+  changes: {
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+}));