feat: tour de soul page implemented

src/AppV2.js

@@ -18,6 +18,7 @@ const Dashboard = lazy(() => import('v2/components/Dashboard'));
 const Validators = lazy(() => import('v2/components/Validators'));
 const ValidatorsAll = lazy(() => import('v2/components/Validators/All'));
 const ValidatorDetail = lazy(() => import('v2/components/Validators/Detail'));
+const TourDeSol = lazy(() => import('v2/components/TourDeSol'));
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -69,6 +70,7 @@ const App = () => {
                 path="/rc/validators/:id"
                 component={ValidatorDetail}
               />
+              <Route exact path="/rc/tour-de-sol" component={TourDeSol} />
             </Switch>
           </Suspense>
           <Footer />

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

@@ -37,7 +37,7 @@ const NetworkOverview = () => {
   return (
     <Container>
       <div className={classes.root}>
-        <SectionHeader>Network Overview</SectionHeader>
+        <SectionHeader title="Network Overview" />
         <Grid container spacing={2} className={classes.row}>
           <Grid item xs={6}>
             <TPS />

src/v2/components/Dashboard/ViewAll/index.jsx

@@ -11,7 +11,7 @@ const ViewAll = () => {
   return (
     <Container>
       <div className={classes.root}>
-        <SectionHeader>View All</SectionHeader>
+        <SectionHeader title="View All" />
         <Grid container spacing={8}>
           <Grid item xs={4}>
             <Button variant="contained" size="large" fullWidth color="primary">

src/v2/components/HelpLink/styles.js

@@ -13,6 +13,7 @@ export default makeStyles(theme => ({
     padding: '0 5px',
     color: getColor('greenDark')(theme),
     transition: '.15s ease-in-out',
+    marginLeft: 15,
     '&:hover': {
       color: getColor('main')(theme),
       borderColor: getColor('main')(theme),

src/v2/components/TourDeSol/Cards/index.jsx

@@ -0,0 +1,78 @@
+// @flow
+import {map} from 'lodash/fp';
+import React from 'react';
+import {observer} from 'mobx-react-lite';
+import NodesStore from 'v2/stores/nodes';
+import Card from 'v2/components/UI/StatCard';
+
+import useStyles from './styles';
+
+const Cards = () => {
+  const classes = useStyles();
+  const {cluster} = NodesStore;
+  const {nodes} = cluster;
+  const cards = [
+    {
+      title: 'Stage Duration Blocks',
+      value: 'TODO',
+      changes: '',
+      period: 'since yesterday',
+    },
+    {
+      title: 'Days Left In Stage',
+      value: 'TODO',
+      changes: '',
+      period: 'since yesterday',
+    },
+    {
+      title: 'Total SOL In Circulation',
+      value: cluster.supply / Math.pow(2, 34).toFixed(2),
+      changes: '',
+      period: 'since yesterday',
+    },
+    {
+      title: 'Total Bonded Tokens',
+      value: 'TODO',
+      changes: '',
+      period: 'since yesterday',
+    },
+    {
+      title: 'Current Network Inflation Rate',
+      value: 'TODO',
+      changes: '',
+      period: 'since yesterday',
+    },
+    {
+      title: '# of Active Validators',
+      value: nodes.length,
+      changes: '',
+      period: 'since yesterday',
+    },
+    {
+      title: '# of Inactive Validators',
+      value: 'TODO',
+      changes: '',
+      period: 'since yesterday',
+    },
+    {
+      title: 'Circulating Supply Staked',
+      value: 'TODO',
+      changes: '',
+      period: 'since yesterday',
+    },
+  ];
+
+  const renderStats = ({
+    title,
+    value,
+    changes = null,
+  }: {
+    title: string,
+    value: string | (() => React$Node),
+    changes?: string,
+  }) => <Card title={title} value={value} changes={changes} />;
+
+  return <div className={classes.cards}>{map(renderStats)(cards)}</div>;
+};
+
+export default observer(Cards);

src/v2/components/TourDeSol/Cards/styles.js

@@ -0,0 +1,9 @@
+import {makeStyles} from '@material-ui/core';
+
+export default makeStyles(() => ({
+  cards: {
+    '& div:not(:last-child)': {
+      marginBottom: 20,
+    },
+  },
+}));

src/v2/components/TourDeSol/Ranking/index.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import {observer} from 'mobx-react-lite';
+import {map} from 'lodash/fp';
+import HelpLink from 'v2/components/HelpLink';
+import NodesStore from 'v2/stores/nodes';
+import {ReactComponent as BicycleIcon} from 'v2/assets/icons/bicycle.svg';
+
+import useStyles from './styles';
+
+const Ranking = () => {
+  const classes = useStyles();
+  const {
+    cluster: {nodes},
+  } = NodesStore;
+
+  const renderNode = node => (
+    <li className={classes.item}>
+      <div className={classes.name}>{node.pubkey}</div>
+      <div className={classes.bar}>
+        <div className={classes.icon}>
+          <BicycleIcon />
+        </div>
+      </div>
+    </li>
+  );
+
+  return (
+    <div className={classes.root}>
+      <div className={classes.header}>
+        Top Validator Ranking
+        <HelpLink text="" term="" />
+      </div>
+      <ul className={classes.list}>{map(renderNode)(nodes)}</ul>
+    </div>
+  );
+};
+
+Ranking.propTypes = {};
+
+export default observer(Ranking);

src/v2/components/TourDeSol/Ranking/styles.js

@@ -0,0 +1,50 @@
+import {makeStyles} from '@material-ui/core';
+import getColor from 'v2/utils/getColor';
+
+export default makeStyles(theme => ({
+  root: {
+    background: getColor('grey2')(theme),
+    padding: '17px 24px',
+  },
+  list: {
+    padding: 0,
+  },
+  item: {
+    display: 'flex',
+    alignItems: 'center',
+    '&:not(:last-child)': {
+      marginBottom: 17,
+    },
+  },
+  name: {
+    maxWidth: 130,
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    color: getColor('main')(theme),
+    marginRight: 20,
+    flexShrink: 0,
+    '&::before': {
+      content: '""',
+      display: 'inline-block',
+      verticalAlign: 'middle',
+      width: 33,
+      height: 33,
+      background: getColor('main')(theme),
+      borderRadius: '50%',
+      marginRight: 22,
+    },
+  },
+  bar: {
+    flex: 1,
+    height: 8,
+    borderRadius: 10,
+    background: getColor('greyW1')(theme),
+    position: 'relative',
+  },
+  icon: {
+    position: 'absolute',
+    top: '50%',
+    transform: 'translateY(-50%)',
+  },
+}));

src/v2/components/TourDeSol/Table/index.jsx

@@ -0,0 +1,114 @@
+// @flow
+
+import React from 'react';
+import {
+  Typography,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  Grid,
+} from '@material-ui/core';
+import cn from 'classnames';
+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 HelpLink from '../../HelpLink';
+
+import useStyles from './styles';
+
+const ValidatorsTable = ({separate}: {separate: boolean}) => {
+  const classes = useStyles();
+  const theme = useTheme();
+  const showTable = useMediaQuery(theme.breakpoints.up('md'));
+  const {
+    cluster: {voting = []},
+  } = NodesStore;
+
+  const renderRow = row => {
+    return (
+      <TableRow hover key={row.nodePubkey}>
+        <TableCell>1</TableCell>
+        <TableCell>
+          <Link
+            to={`/rc/validators/${row.nodePubkey}`}
+            className={classes.name}
+          >
+            <span />
+            <div>{row.nodePubkey}</div>
+          </Link>
+        </TableCell>
+        <TableCell>{row.stake}</TableCell>
+        <TableCell>TODO</TableCell>
+      </TableRow>
+    );
+  };
+  const renderCard = card => {
+    return (
+      <div
+        className={cn(classes.card, separate && classes.cardVertical)}
+        key={card.nodePubkey}
+      >
+        <Link to={`/rc/validators/${card.nodePubkey}`} className={classes.name}>
+          <span />
+          <div>{card.nodePubkey}</div>
+        </Link>
+        <Grid container>
+          <Grid item xs={4} zeroMinWidth>
+            <div className={classes.cardTitle}>Stake</div>
+            <div>{card.stake}</div>
+          </Grid>
+          <Grid item xs={4} zeroMinWidth>
+            <div className={classes.cardTitle}>Uptime</div>
+            <div>TODO</div>
+          </Grid>
+        </Grid>
+      </div>
+    );
+  };
+  return (
+    <div className={classes.root}>
+      <div className={classes.header}>
+        <Typography>
+          Active Validators
+          <HelpLink text="" term="" />
+        </Typography>
+        <Typography variant="h5">{voting.length}</Typography>
+        {!separate && (
+          <Link to="/rc/validators/all" className={classes.link}>
+            See all &gt;
+          </Link>
+        )}
+      </div>
+      {showTable ? (
+        <Table>
+          <TableHead className={classes.head}>
+            <TableRow>
+              <TableCell width={100}>Ranking</TableCell>
+              <TableCell width={230}>Name</TableCell>
+              <TableCell>Stake</TableCell>
+              <TableCell width={100}>Uptime</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody
+            classes={{
+              root: classes.body,
+            }}
+          >
+            {map(renderRow)(voting)}
+          </TableBody>
+        </Table>
+      ) : (
+        <div className={cn(classes.list, separate && classes.vertical)}>
+          {map(renderCard)(voting)}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default observer(ValidatorsTable);