fix: qa issues

solana-labs · Aug 29, 2019 · d7fc995 · d7fc995
1 parent 83900e9
commit d7fc995
Show file tree

Hide file tree

Showing 27 changed files with 270 additions and 162 deletions.
diff --git a/api/api.js b/api/api.js
@@ -580,9 +580,11 @@ async function getClusterInfo() {
       continue;
     }
     if (node.votePubkey && node.votePubkey != votePubkey) {
-      node.warning = (node.warning || {});
-      node.warning.hasMultipleVoteAccounts = (node.warning.hasMultipleVoteAccounts || {});
-      node.warning.hasMultipleVoteAccounts[node.votePubkey] = (node.warning.hasMultipleVoteAccounts[node.votePubkey] || {});
+      node.warning = node.warning || {};
+      node.warning.hasMultipleVoteAccounts =
+        node.warning.hasMultipleVoteAccounts || {};
+      node.warning.hasMultipleVoteAccounts[node.votePubkey] =
+        node.warning.hasMultipleVoteAccounts[node.votePubkey] || {};
       node.warning.hasMultipleVoteAccounts[node.votePubkey][
         voteAccount.authorizedVoterPubkey
       ] = true;

diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "command-exists": "^1.2.8",
     "copy-to-clipboard": "^3.2.0",
     "cors": "^2.8.5",
+    "date-fns": "^2.0.1",
     "express": "^4.17.1",
     "express-ws": "^4.0.0",
     "geoip-lite": "^1.3.7",

diff --git a/src/App.js b/src/App.js
@@ -656,10 +656,7 @@ class App extends Component {
           <p />
           <Grid container spacing={1} justify="center">
             <Grid item style={{width: '1460px'}}>
-              <BxDataTableThemed
-                dataType="blk"
-                dataItems={this.state.blocks}
-              />
+              <BxDataTableThemed dataType="blk" dataItems={this.state.blocks} />
             </Grid>
           </Grid>
           <p />

diff --git a/src/v2/components/Dashboard/NetworkOverview/NodesMap/index.jsx b/src/v2/components/Dashboard/NetworkOverview/NodesMap/index.jsx
@@ -14,9 +14,9 @@ import NodesStore from 'v2/stores/nodes';
 import OverviewStore from 'v2/stores/networkOverview';
 import Socket from 'v2/stores/socket';
 import MapTooltip from 'v2/components/UI/MapTooltip';
+import Loader from 'v2/components/UI/Loader';
 import {mapStyle, markerStyle} from 'v2/theme';
 
-import Loader from '../../Loader';
 import useStyles from './styles';
 
 const mapStyles = {
@@ -32,17 +32,16 @@ const NodesMap = () => {
   const {isLoading} = Socket;
 
   if (isLoading) {
-    return <Loader />;
+    return <Loader width="533" height="290" />;
   }
 
   const mapConfig = {
     projection: {
-      scale: 85,
-      rotation: [-11, 0, 0],
+      scale: 90,
+      rotation: [-11, -10, 0],
     },
     style: {
       width: '100%',
-      height: 'auto',
     },
     center: [0, 20],
   };
@@ -68,11 +67,11 @@ const NodesMap = () => {
   );
   return (
     <div className={classes.card}>
-      <Typography>Nodes Map</Typography>
+      <Typography>Active Validators Map</Typography>
       <ComposableMap
         projectionConfig={mapConfig.projection}
-        width={390}
-        height={240}
+        width={530}
+        height={262}
         style={mapConfig.style}
       >
         <ZoomableGroup center={mapConfig.center} disablePanning>

diff --git a/src/v2/components/Dashboard/NetworkOverview/StatCards/index.jsx b/src/v2/components/Dashboard/NetworkOverview/StatCards/index.jsx
@@ -3,16 +3,15 @@
 import React from 'react';
 import {Link} from 'react-router-dom';
 import {observer} from 'mobx-react-lite';
-import {map} from 'lodash/fp';
+import {map, size} from 'lodash/fp';
 import {Grid, Typography} from '@material-ui/core';
 import Card from 'v2/components/UI/StatCard';
+import Loader from 'v2/components/UI/Loader';
 import OverviewStore from 'v2/stores/networkOverview';
 import NodesStore from 'v2/stores/nodes';
 import Socket from 'v2/stores/socket';
 
-import Loader from '../../Loader';
 import useStyles from './styles';
-import {size} from 'lodash';
 
 const StatCards = () => {
   const {globalStats} = OverviewStore;
@@ -69,7 +68,7 @@ const StatCards = () => {
       className={classes.card}
     >
       {isLoading ? (
-        <Loader />
+        <Loader width="533" height="290" />
       ) : (
         <Card title={title} value={value} changes={changes} />
       )}

diff --git a/src/v2/components/Dashboard/NetworkOverview/TPS/index.jsx b/src/v2/components/Dashboard/NetworkOverview/TPS/index.jsx
@@ -5,10 +5,10 @@ import {maxBy, minBy, get} from 'lodash/fp';
 import React from 'react';
 import {observer} from 'mobx-react-lite';
 import {ResponsiveLine} from '@nivo/line';
+import Loader from 'v2/components/UI/Loader';
 import OverviewStore from 'v2/stores/networkOverview';
 import Socket from 'v2/stores/socket';
 
-import Loader from '../../Loader';
 import useStyles from './styles';
 
 type Point = {
@@ -37,7 +37,7 @@ const TPS = () => {
   const {isLoading} = Socket;
 
   if (isLoading) {
-    return <Loader />;
+    return <Loader width="533" height="290" />;
   }
 
   const data = [

diff --git a/src/v2/components/Footer/Partnership/index.jsx b/src/v2/components/Footer/Partnership/index.jsx
@@ -23,7 +23,13 @@ const Partnership = () => {
         <br />
         Let’s build something together.
       </Typography>
-      <Button color="primary" variant="contained" onClick={handlePartner}>
+      <Button
+        color="primary"
+        variant="contained"
+        href="https://solana.com/partnerships/"
+        target="_blank"
+        onClick={handlePartner}
+      >
         Partner with us
       </Button>
       <div className={classes.links}>

diff --git a/src/v2/components/NavBar/index.jsx b/src/v2/components/NavBar/index.jsx
@@ -11,12 +11,15 @@ import {
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 import {useTheme} from '@material-ui/core/styles';
 import CloseIcon from '@material-ui/icons/Close';
+import {observer} from 'mobx-react-lite';
 import {RouterHistory, withRouter} from 'react-router-dom';
 import React from 'react';
 import {map, propEq, eq} from 'lodash/fp';
 import Mixpanel from 'v2/mixpanel';
-import EndpointSelector from '../EndpointSelector';
+import socketActions from 'v2/stores/socket';
+import insertIf from 'v2/utils/insertIf';
 
+import EndpointSelector from '../EndpointSelector';
 import {ReactComponent as dashboard} from './assets/dashboard.svg';
 import {ReactComponent as transactions} from './assets/transactions.svg';
 import {ReactComponent as validators} from './assets/validators.svg';
@@ -57,6 +60,8 @@ const NavBar = ({
   isOpen: boolean,
   toggleDrawer: (val: boolean) => void,
 }) => {
+  const {endpointName} = socketActions;
+  const isTDS = eq('tds', endpointName);
   const classes = useStyles();
   const theme = useTheme();
   const showDrawer = useMediaQuery(theme.breakpoints.up('md'));
@@ -67,11 +72,11 @@ const NavBar = ({
     {
       link: 'validators',
     },
-    {
+    ...insertIf(isTDS, {
       link: 'tour-de-sol',
       icon: 'tourdesol',
       title: 'tour de sol',
-    },
+    }),
     {
       link: 'transactions',
       disabled: true,
@@ -164,4 +169,4 @@ const NavBar = ({
   );
 };
 
-export default withRouter(NavBar);
+export default withRouter(observer(NavBar));
diff --git a/src/v2/components/Search/index.jsx b/src/v2/components/Search/index.jsx
@@ -5,7 +5,7 @@ import {compose, get, filter, toLower, contains} from 'lodash/fp';
 import {InputBase, IconButton} from '@material-ui/core';
 import {Search as SearchIcon} from '@material-ui/icons';
 import NodesStore from 'v2/stores/nodes';
-import {MIN_TERM_LEN} from '../../constants';
+import {MIN_TERM_LEN} from 'v2/constants';
 
 import SearchResult from './result';
 import useStyles from './styles';
@@ -43,6 +43,7 @@ const Search = () => {
       setSearchResult([]);
       return;
     }
+
     const filteredValidators = filter(v => {
       const lowerVal = toLower(value);
       return (
@@ -51,6 +52,11 @@ const Search = () => {
           toLower,
           get('nodePubkey'),
         )(v) ||
+        compose(
+          contains(lowerVal),
+          toLower,
+          get('identity.name'),
+        )(v) ||
         compose(
           contains(lowerVal),
           toLower,
@@ -69,7 +75,7 @@ const Search = () => {
           onFocus={onFocus}
           onBlur={onBlur}
           className={classes.input}
-          placeholder="Search by validators address / keybase"
+          placeholder="Search by validator address / keybase"
           classes={{
             root: classes.inputRoot,
             input: classes.inputInput,

diff --git a/src/v2/components/Search/styles.js b/src/v2/components/Search/styles.js
@@ -11,6 +11,11 @@ export default makeStyles(theme => {
       padding: 5,
       display: 'flex',
     },
+    inputInput: {
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+    },
     input: {
       border: 'none',
       background: getColor('grey2')(theme),

diff --git a/src/v2/components/Social/index.jsx b/src/v2/components/Social/index.jsx
@@ -18,27 +18,27 @@ type Link = {
 
 const links: Link[] = [
   {
-    link: '#',
+    link: 'https://discordapp.com/invite/pquxPsq',
     icon: discord,
     name: 'discord',
   },
   {
-    link: '#',
+    link: 'https://t.me/solanaio',
     icon: telegram,
     name: 'telegram',
   },
   {
-    link: '#',
+    link: 'https://www.reddit.com/r/solana',
     icon: reddit,
     name: 'reddit',
   },
   {
-    link: '#',
+    link: 'https://twitter.com/solana',
     icon: twitter,
     name: 'twitter',
   },
   {
-    link: '#',
+    link: 'https://medium.com/solana-labs',
     icon: medium,
     name: 'medium',
   },
@@ -53,6 +53,8 @@ const Social = () => {
       key={name}
       className={classes.link}
       href={link}
+      target="_blank"
+      rel="noopener noreferrer"
       onClick={handleLink(name)}
     >
       <Icon />

diff --git a/src/v2/components/TourDeSol/Cards/index.jsx b/src/v2/components/TourDeSol/Cards/index.jsx
@@ -5,7 +5,10 @@ import {observer} from 'mobx-react-lite';
 import NodesStore from 'v2/stores/nodes';
 import Card from 'v2/components/UI/StatCard';
 
+import Socket from '../../../stores/socket';
+import Loader from '../../UI/Loader';
 import useStyles from './styles';
+import {LAMPORT_SOL_RATIO} from '../../../constants';
 
 const Cards = ({
   stageDurationBlocks = null,
@@ -20,6 +23,7 @@ const Cards = ({
     totalStaked,
     networkInflationRate,
   } = NodesStore;
+  const {isLoading} = Socket;
 
   const cards = [
     {
@@ -41,14 +45,14 @@ const Cards = ({
       period: 'since yesterday',
     },
     {
-      title: 'Total SOL In Circulation',
+      title: 'Circulating SOL',
       value: (supply / Math.pow(2, 34)).toFixed(2),
       changes: '',
       period: 'since yesterday',
     },
     {
-      title: 'Total Staked SOL',
-      value: totalStaked,
+      title: 'Staked SOL',
+      value: (totalStaked * LAMPORT_SOL_RATIO).toFixed(8),
       changes: '',
       period: 'since yesterday',
     },
@@ -59,13 +63,13 @@ const Cards = ({
       period: 'since yesterday',
     },
     {
-      title: '# of Active Validators',
+      title: 'Active Validators',
       value: validators.length,
       changes: '',
       period: 'since yesterday',
     },
     {
-      title: '# of Inactive Validators',
+      title: 'Inactive Validators',
       value: inactiveValidators.length,
       changes: '',
       period: 'since yesterday',
@@ -86,7 +90,12 @@ const Cards = ({
     title: string,
     value: string | (() => React$Node),
     changes?: string,
-  }) => <Card key={title} title={title} value={value} changes={changes} />;
+  }) =>
+    isLoading ? (
+      <Loader key={title} width="100%" height="138" y={-3} />
+    ) : (
+      <Card key={title} title={title} value={value} changes={changes} />
+    );
 
   return <div className={classes.cards}>{map(renderStats)(cards)}</div>;
 };

diff --git a/src/v2/components/TourDeSol/Cards/styles.js b/src/v2/components/TourDeSol/Cards/styles.js
@@ -2,8 +2,15 @@ import {makeStyles} from '@material-ui/core';
 
 export default makeStyles({
   cards: {
-    '& div:not(:last-child)': {
+    '& > *:not(:last-child)': {
       marginBottom: 20,
     },
+    '& svg': {
+      height: '138px',
+      width: '100%',
+      '&:not(:last-child)': {
+        marginBottom: 14,
+      },
+    },
   },
 });