({
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 (
+
+
+
+ );
+};
+
+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 (
+
+
+
+
+ {row.pubkey}
+
+
+ total sol
+ Commission
+ Uptime
+
+ );
+ };
+ const renderCard = card => {
+ return (
+
+
+
+ {card.pubkey}
+
+
+
+ Total sol
+ Total sol
+
+
+ Commission
+ Commission
+
+
+ Uptime
+ Uptime
+
+
+
+
+ Validators
+ 129,948
+
+ See all >
+
+
+ {showTable ? (
+
+
+
+ Name/Moniker
+ Total Sol
+ Commission
+ Uptime
+
+
+
+ {map(renderRow)(nodes)}
+
+
+ ) : (
+
{map(renderCard)(nodes)}
+ )}
+
NODE: {marker.name}
+ Gossip: {marker.gossip}
+
+ )}
+ >
+
+
+
+ );
+ return (
+
+ Active Validators Map
+
+
+
+ {(geographies, projection) =>
+ geographies.map(
+ (geography, i) =>
+ geography.id !== 'ATA' && (
+
+ ),
+ )
+ }
+
+ {map(renderMarker)(mapMarkers)}
+
+
+
+ );
+};
+
+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,
+ }) => (
+
+
(
+
+
{changes}%
+
{period}
+
+
+ Validators Overview
+
+
+
+
+
+
+
+
+
+ {map(renderStats)(cards)}
+
+
+
+
+
+
+
+