feat: keybase integration

solana-labs · Jul 25, 2019 · 0b0f22c · 0b0f22c
1 parent 2fb51ac
commit 0b0f22c
Show file tree

Hide file tree

Showing 11 changed files with 144 additions and 91 deletions.
diff --git a/src/v2/components/TourDeSol/Ranking/index.jsx b/src/v2/components/TourDeSol/Ranking/index.jsx
@@ -4,6 +4,7 @@ import {get, map, maxBy, compose} 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 Avatar from 'v2/components/UI/Avatar';
 
 import useStyles from './styles';
 
@@ -18,9 +19,13 @@ const Ranking = () => {
 
   const renderNode = node => {
     const position = (node.stake * 100) / maxVal;
+    const {identity = {}, nodePubkey} = node;
     return (
-      <li key={node.nodePubkey} className={classes.item}>
-        <div className={classes.name}>{node.nodePubkey}</div>
+      <li key={nodePubkey} className={classes.item}>
+        <div className={classes.name}>
+          <Avatar name={identity.name} avatarUrl={identity.avatarUrl} />
+          {identity.name || nodePubkey}
+        </div>
         <div className={classes.bar}>
           <div
             className={classes.icon}

diff --git a/src/v2/components/TourDeSol/Ranking/styles.js b/src/v2/components/TourDeSol/Ranking/styles.js
@@ -24,15 +24,10 @@ export default makeStyles(theme => ({
     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,
+    display: 'flex',
+    alignItems: 'center',
+    '& div:first-child': {
+      marginRight: 15,
     },
   },
   bar: {

diff --git a/src/v2/components/TourDeSol/Table/index.jsx b/src/v2/components/TourDeSol/Table/index.jsx
@@ -18,6 +18,7 @@ import {Link} from 'react-router-dom';
 import {map} from 'lodash/fp';
 import NodesStore from 'v2/stores/nodes';
 import getUptime from 'v2/utils/getUptime';
+import Avatar from 'v2/components/UI/Avatar';
 
 import HelpLink from '../../HelpLink';
 import useStyles from './styles';
@@ -30,38 +31,37 @@ const ValidatorsTable = ({separate}: {separate: boolean}) => {
 
   const renderRow = row => {
     const uptime = getUptime(row);
+    const {identity = {}, nodePubkey, stake} = row;
     return (
-      <TableRow hover key={row.nodePubkey}>
+      <TableRow hover key={nodePubkey}>
         <TableCell>1</TableCell>
         <TableCell>
-          <Link
-            to={`/rc/validators/${row.nodePubkey}`}
-            className={classes.name}
-          >
-            <span />
-            <div>{row.nodePubkey}</div>
+          <Link to={`/rc/validators/${nodePubkey}`} className={classes.name}>
+            <Avatar name={identity.name} avatarUrl={identity.avatarUrl} />
+            <div>{identity.name || nodePubkey}</div>
           </Link>
         </TableCell>
-        <TableCell>{row.stake}</TableCell>
+        <TableCell>{stake}</TableCell>
         <TableCell>{uptime}%</TableCell>
       </TableRow>
     );
   };
   const renderCard = card => {
     const uptime = getUptime(card);
+    const {identity = {}, nodePubkey, stake} = 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>
+          <Avatar name={identity.name} avatarUrl={identity.avatarUrl} />
+          <div>{identity.name || nodePubkey}</div>
         </Link>
         <Grid container>
           <Grid item xs={4} zeroMinWidth>
             <div className={classes.cardTitle}>Stake</div>
-            <div>{card.stake}</div>
+            <div>{stake}</div>
           </Grid>
           <Grid item xs={4} zeroMinWidth>
             <div className={classes.cardTitle}>Uptime</div>

diff --git a/src/v2/components/TourDeSol/Table/styles.js b/src/v2/components/TourDeSol/Table/styles.js
@@ -60,15 +60,10 @@ export default makeStyles(theme => ({
     alignItems: 'center',
     color: getColor('main')(theme),
     textDecoration: 'none',
-    '& span': {
-      width: 33,
-      height: 33,
-      flexShrink: 0,
-      background: getColor('main')(theme),
-      borderRadius: '50%',
-      marginRight: 22,
-    },
     '& div': {
+      '&:first-child': {
+        marginRight: 22,
+      },
       whiteSpace: 'nowrap',
       textOverflow: 'ellipsis',
       overflow: 'hidden',

diff --git a/src/v2/components/UI/Avatar/index.jsx b/src/v2/components/UI/Avatar/index.jsx
@@ -0,0 +1,31 @@
+// @flow
+import React from 'react';
+import BaseAvatar from '@material-ui/core/Avatar';
+import theme from 'v2/theme';
+import getColor from 'v2/utils/getColor';
+
+const Avatar = ({
+  avatarUrl = '',
+  name = '',
+  width = 33,
+  height = 33,
+}: {
+  avatarUrl: string,
+  name: string,
+}) => {
+  const initials = name.charAt(0);
+  const avatarStyle = {
+    backgroundColor: getColor('main')(theme),
+    color: getColor('white')(theme),
+    width,
+    height,
+  };
+
+  return (
+    <BaseAvatar src={avatarUrl} style={avatarStyle}>
+      {!avatarUrl && initials}
+    </BaseAvatar>
+  );
+};
+
+export default Avatar;
diff --git a/src/v2/components/Validators/Detail/index.jsx b/src/v2/components/Validators/Detail/index.jsx
@@ -3,7 +3,7 @@ import {Container, useTheme} from '@material-ui/core';
 import {observer} from 'mobx-react-lite';
 import useMediaQuery from '@material-ui/core/useMediaQuery/useMediaQuery';
 import React, {useEffect} from 'react';
-import {map, find, compose, mergeWith} from 'lodash/fp';
+import {map, find} from 'lodash/fp';
 import {Match} from 'react-router-dom';
 import {CopyToClipboard} from 'react-copy-to-clipboard';
 import {
@@ -20,6 +20,8 @@ import theme, {mapStyle, markerStyle} from 'v2/theme';
 import MapTooltip from 'v2/components/UI/MapTooltip';
 import HelpLink from 'v2/components/HelpLink';
 import getColor from 'v2/utils/getColor';
+import Button from 'v2/components/UI/Button';
+import Avatar from 'v2/components/UI/Avatar';
 
 import {ReactComponent as CopyIcon} from '../../../assets/icons/copy.svg';
 import Mixpanel from '../../../mixpanel';
@@ -36,9 +38,7 @@ const markerCircleStyle = {
 };
 
 const ValidatorsDetail = ({match}: {match: Match}) => {
-  const {
-    cluster: {voting, cluster},
-  } = NodesStore;
+  const {validators} = NodesStore;
 
   const classes = useStyles();
   const theme = useTheme();
@@ -49,25 +49,22 @@ const ValidatorsDetail = ({match}: {match: Match}) => {
     Mixpanel.track(`Clicked Validator ${params.id}`);
   }, [params.id]);
 
-  const currentNode = find({pubkey: params.id})(cluster);
-  if (!currentNode) {
+  const node = find({nodePubkey: params.id})(validators);
+
+  if (!node) {
     return <div>Loading...</div>;
   }
-  const node = compose(
-    mergeWith(currentNode, {
-      coordinates: [currentNode.lng, currentNode.lat],
-    }),
-    find({nodePubkey: params.id}),
-  )(voting);
+
+  const {nodePubkey, gossip, stake, commission, identity = {}} = node;
 
   const renderMarker = () => (
     <Marker style={markerStyle} marker={node}>
       <MapTooltip
         classes={{tooltip: classes.tooltip}}
         title={() => (
           <>
-            <div className={classes.tooltipTitle}>NODE: {node.nodePubkey}</div>
-            <div className={classes.tooltipDesc}>Gossip: {node.gossip}</div>
+            <div className={classes.tooltipTitle}>NODE: {nodePubkey}</div>
+            <div className={classes.tooltipDesc}>Gossip: {gossip}</div>
           </>
         )}
       >
@@ -80,17 +77,17 @@ const ValidatorsDetail = ({match}: {match: Match}) => {
     {
       label: 'Website',
       hint: '',
-      value: 'TODO',
+      value: identity.website || '',
     },
     {
       label: 'Voting power',
       hint: '',
-      value: `${node.stake}`,
+      value: stake,
     },
     {
       label: 'Address',
       hint: '',
-      value: `${node.pubkey}`,
+      value: nodePubkey,
     },
     {
       label: 'Missed blocks',
@@ -100,17 +97,17 @@ const ValidatorsDetail = ({match}: {match: Match}) => {
     {
       label: 'keybase',
       hint: '',
-      value: 'TODO',
+      value: identity.keybaseUsername || '',
     },
     {
       label: 'commission',
       hint: '',
-      value: `${node.commission}%`,
+      value: `${commission}%`,
     },
     {
       label: 'details',
       hint: '',
-      value: 'TODO',
+      value: identity.details || '',
     },
     {
       label: 'Amount of delegated sol',
@@ -147,15 +144,26 @@ const ValidatorsDetail = ({match}: {match: Match}) => {
         <SectionHeader title="Validator Detail">
           {!isMobile && (
             <div className={classes.validatorName}>
-              <span />
-              {node.nodePubkey}
-              <CopyToClipboard text={node.nodePubkey}>
+              <Avatar name={identity.name} avatarUrl={identity.avatarUrl} />
+              <span>{identity.name || nodePubkey}</span>
+              <CopyToClipboard text={nodePubkey}>
                 <div>
                   <CopyIcon />
                 </div>
               </CopyToClipboard>
             </div>
           )}
+          <div className={classes.headerBtn}>
+            <Button
+              variant="contained"
+              size="large"
+              fullWidth
+              color="primary"
+              href="#"
+            >
+              Connect To Keybase
+            </Button>
+          </div>
         </SectionHeader>
         <div className={classes.body}>
           <ul className={classes.spec}>
@@ -165,7 +173,7 @@ const ValidatorsDetail = ({match}: {match: Match}) => {
                 <div className={classes.value}>
                   <div className={classes.validatorName}>
                     <span />
-                    {node.nodePubkey}
+                    {nodePubkey}
                   </div>
                 </div>
               </li>

diff --git a/src/v2/components/Validators/Detail/styles.js b/src/v2/components/Validators/Detail/styles.js
@@ -15,23 +15,31 @@ export default makeStyles(theme => ({
     alignItems: 'center',
     marginLeft: 40,
     marginRight: 'auto',
+    flexShrink: 1,
+    minWidth: 1,
     [theme.breakpoints.down('sm')]: {
       marginLeft: 0,
       marginTop: 5,
     },
-    '& > span': {
-      width: 33,
-      height: 33,
-      flexShrink: 0,
-      background: getColor('main')(theme),
-      borderRadius: '50%',
-      marginRight: 22,
+    '& > span:nth-child(2)': {
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      marginLeft: 22,
     },
-    '& div': {
+    '& div:last-child': {
       cursor: 'pointer',
       marginLeft: 14,
     },
   },
+  headerBtn: {
+    marginLeft: 40,
+    whiteSpace: 'nowrap',
+    [theme.breakpoints.down('sm')]: {
+      marginLeft: 0,
+      marginTop: 5,
+    },
+  },
   spec: {
     display: 'flex',
     flexWrap: 'wrap',

diff --git a/src/v2/components/Validators/Table/index.jsx b/src/v2/components/Validators/Table/index.jsx
@@ -18,6 +18,7 @@ import {Link} from 'react-router-dom';
 import {map} from 'lodash/fp';
 import NodesStore from 'v2/stores/nodes';
 import getUptime from 'v2/utils/getUptime';
+import Avatar from 'v2/components/UI/Avatar';
 
 import useStyles from './styles';
 
@@ -28,42 +29,41 @@ const ValidatorsTable = ({separate}: {separate: boolean}) => {
   const {validators} = NodesStore;
   const renderRow = row => {
     const uptime = getUptime(row);
+    const {identity = {}, nodePubkey, stake, commission} = row;
     return (
-      <TableRow hover key={row.nodePubkey}>
+      <TableRow hover key={nodePubkey}>
         <TableCell align="center">
-          <Link
-            to={`/rc/validators/${row.nodePubkey}`}
-            className={classes.name}
-          >
-            <span />
-            <div>{row.nodePubkey}</div>
+          <Link to={`/rc/validators/${nodePubkey}`} className={classes.name}>
+            <Avatar name={identity.name} avatarUrl={identity.avatarUrl} />
+            <div>{identity.name || nodePubkey}</div>
           </Link>
         </TableCell>
-        <TableCell>{row.stake} Lamports</TableCell>
-        <TableCell>{row.commission}</TableCell>
+        <TableCell>{stake} Lamports</TableCell>
+        <TableCell>{commission}</TableCell>
         <TableCell>{uptime}%</TableCell>
       </TableRow>
     );
   };
   const renderCard = card => {
     const uptime = getUptime(card);
+    const {identity = {}, nodePubkey, stake, commission} = card;
     return (
       <div
         className={cn(classes.card, separate && classes.cardVertical)}
-        key={card.nodePubkey}
+        key={nodePubkey}
       >
-        <Link to={`/rc/validators/${card.nodePubkey}`} className={classes.name}>
-          <span />
-          <div>{card.nodePubkey}</div>
+        <Link to={`/rc/validators/${nodePubkey}`} className={classes.name}>
+          <Avatar name={identity.name} avatarUrl={identity.avatarUrl} />
+          <div>{identity.name || nodePubkey}</div>
         </Link>
         <Grid container spacing={1}>
           <Grid item xs={4} zeroMinWidth>
             <div className={classes.cardTitle}>Stake</div>
-            <div>{card.stake} Lamports</div>
+            <div>{stake} Lamports</div>
           </Grid>
           <Grid item xs={4} zeroMinWidth>
             <div className={classes.cardTitle}>Commission</div>
-            <div>{card.commission}</div>
+            <div>{commission}</div>
           </Grid>
           <Grid item xs={4} zeroMinWidth>
             <div className={classes.cardTitle}>Uptime</div>