feat: validator name component encapsulation

solana-labs · Oct 15, 2019 · c343242 · c343242
1 parent f2582ab
commit c343242
Show file tree

Hide file tree

Showing 17 changed files with 104 additions and 137 deletions.
diff --git a/src/AppV2.js b/src/AppV2.js
@@ -38,6 +38,13 @@ const AccountDetail = lazy(() => import('v2/components/Account/Detail'));
 
 const useStyles = makeStyles(() => {
   return {
+    '@global': {
+      a: {
+        color: getColor('main')(theme),
+        textDecoration: 'none',
+        lineHeight: 1.9,
+      },
+    },
     root: {
       display: 'flex',
       overflow: 'hidden',

diff --git a/src/v2/components/Applications/Detail/Details/index.jsx b/src/v2/components/Applications/Detail/Details/index.jsx
@@ -1,29 +1,23 @@
 import React from 'react';
-import Avatar from 'v2/components/UI/Avatar';
 import Label from 'v2/components/UI/Label';
 import _ from 'lodash';
-// import useStyles from './styles';
 import {observer} from 'mobx-react-lite';
 import {Table, TableBody, TableCell, TableRow} from '@material-ui/core';
+import ValidatorName from 'v2/components/UI/ValidatorName';
 
 const ApplicationDetails = ({programAccounts}: {programAccounts: Object}) => {
-  // const classes = useStyles();
-
   const renderAccount = (account, i) => {
     return (
       <TableRow key={account.pubkey}>
         <TableCell>
           <Label text={`Account ${i + 1}`} hint="" />
         </TableCell>
         <TableCell>
-          <Avatar
-            avatarUrl=""
-            name=""
-            width={33}
-            height={33}
+          <ValidatorName
             pubkey={account.pubkey}
+            name={account.pubkey}
+            avatar=""
           />
-          <span>{account.pubkey}</span>
         </TableCell>
         <TableCell>Balance: {account.lamports}</TableCell>
       </TableRow>

diff --git a/src/v2/components/Blocks/Detail/index.jsx b/src/v2/components/Blocks/Detail/index.jsx
@@ -3,16 +3,16 @@ import {Container} from '@material-ui/core';
 import {observer} from 'mobx-react-lite';
 import React, {useEffect} from 'react';
 import {map} from 'lodash/fp';
-import {Match, Link} from 'react-router-dom';
+import {Match} from 'react-router-dom';
 import SectionHeader from 'v2/components/UI/SectionHeader';
 import HelpLink from 'v2/components/HelpLink';
-import Avatar from 'v2/components/UI/Avatar';
 import Mixpanel from 'v2/mixpanel';
 import CopyBtn from 'v2/components/UI/CopyBtn';
 import TransactionsTable from 'v2/components/Transactions/Table';
 import Loader from 'v2/components/UI/Loader';
 import BlockDetailStore from 'v2/stores/blocks/detail';
 import formatDistanceToNow from 'date-fns/formatDistanceToNow';
+import ValidatorName from 'v2/components/UI/ValidatorName';
 
 import useStyles from './styles';
 
@@ -64,10 +64,7 @@ const BlockDetail = ({match}: {match: Match}) => {
       hint: '',
       value() {
         return (
-          <Link to={`/validators/${block.leader}`} className={classes.leader}>
-            <Avatar avatarUrl="" />
-            {block.leader}
-          </Link>
+          <ValidatorName pubkey={block.leader} name={block.leader} avatar="" />
         );
       },
     },

diff --git a/src/v2/components/Blocks/Table/index.jsx b/src/v2/components/Blocks/Table/index.jsx
@@ -14,11 +14,11 @@ 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 Avatar from 'v2/components/UI/Avatar';
+
 import type {TableHeadProps} from 'v2/@types/table';
 import formatDistanceToNow from 'date-fns/formatDistanceToNow';
-
-import HelpLink from '../../HelpLink';
+import HelpLink from 'v2/components/HelpLink';
+import ValidatorName from 'v2/components/UI/ValidatorName';
 import useStyles from './styles';
 
 const tHeads: TableHeadProps[] = [
@@ -85,10 +85,7 @@ const BlocksTable = ({
         <TableCell>TODO</TableCell>
         <TableCell>TODO</TableCell>
         <TableCell>
-          <Link to={`/validators/${block.leader}`} className={classes.name}>
-            <Avatar avatarUrl="" />
-            <div>{block.leader}</div>
-          </Link>
+          <ValidatorName pubkey={block.leader} name={block.leader} avatar="" />
         </TableCell>
       </TableRow>
     );
@@ -120,10 +117,11 @@ const BlocksTable = ({
           </li>
           <li>
             <div className={classes.cardTitle}>Leader</div>
-            <div className={classes.leader}>
-              <Avatar avatarUrl="" />
-              <div>{block.leader}</div>
-            </div>
+            <ValidatorName
+              pubkey={block.leader}
+              name={block.leader}
+              avatar=""
+            />
           </li>
         </ul>
       </div>

diff --git a/src/v2/components/Blocks/Table/styles.js b/src/v2/components/Blocks/Table/styles.js
@@ -39,23 +39,6 @@ export default makeStyles(theme => ({
       },
     },
   },
-  name: {
-    display: 'flex',
-    alignItems: 'center',
-    color: getColor('main')(theme),
-    textDecoration: 'none',
-    '& div': {
-      '&:first-child': {
-        marginRight: 15,
-      },
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis',
-      overflow: 'hidden',
-    },
-    [theme.breakpoints.down('sm')]: {
-      marginBottom: 22,
-    },
-  },
   list: {
     width: '100%',
   },

diff --git a/src/v2/components/Dashboard/NetworkOverview/StatCards/styles.js b/src/v2/components/Dashboard/NetworkOverview/StatCards/styles.js
@@ -19,11 +19,11 @@ export default makeStyles(theme => ({
   leader: {
     textDecoration: 'none',
     '& h2': {
-      fontSize: 20,
+      fontSize: 30,
       lineHeight: 1.3,
       fontWeight: 'bold',
       color: getColor('main')(theme),
-      marginTop: 35,
+      marginTop: 25,
       letterSpacing: 3.4,
     },
   },

diff --git a/src/v2/components/TourDeSol/Ranking/index.jsx b/src/v2/components/TourDeSol/Ranking/index.jsx
@@ -1,26 +1,26 @@
 // @flow
 import React from 'react';
 import {observer} from 'mobx-react-lite';
-import {Link} from 'react-router-dom';
 import {map} from 'lodash/fp';
 import HelpLink from 'v2/components/HelpLink';
 import {ReactComponent as BicycleIcon} from 'v2/assets/icons/bicycle.svg';
-import Avatar from 'v2/components/UI/Avatar';
+import ValidatorName from 'v2/components/UI/ValidatorName';
 import useStyles from './styles';
 
 const Ranking = ({activeValidators}: {activeValidators: Array}) => {
   const classes = useStyles();
 
   const renderNode = node => {
     const {name, pubkey, avatarUrl, slot, activatedStake, score} = node;
-    const title = `SLOT: ${slot} | STAKE: ${activatedStake.toFixed(8)} | SCORE: ${score}`;
+    const title = `SLOT: ${slot} | STAKE: ${activatedStake.toFixed(
+      8,
+    )} | SCORE: ${score}`;
 
     return (
       <li key={pubkey} className={classes.item}>
-        <Link to={`/validators/${pubkey}`} className={classes.name}>
-          <Avatar pubkey={pubkey} avatarUrl={avatarUrl} />
-          <span>{name || pubkey}</span>
-        </Link>
+        <div className={classes.name}>
+          <ValidatorName pubkey={pubkey} name={name} avatar={avatarUrl} />
+        </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
@@ -18,20 +18,8 @@ export default makeStyles(theme => ({
   },
   name: {
     width: 130,
-    color: getColor('main')(theme),
     marginRight: 26,
     flexShrink: 0,
-    display: 'flex',
-    alignItems: 'center',
-    textDecoration: 'none',
-    '& span': {
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-    },
-    '& div:first-child': {
-      marginRight: 15,
-    },
   },
   bar: {
     flex: 1,

diff --git a/src/v2/components/TourDeSol/Table/index.jsx b/src/v2/components/TourDeSol/Table/index.jsx
@@ -16,7 +16,7 @@ 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 Avatar from 'v2/components/UI/Avatar';
+import ValidatorName from 'v2/components/UI/ValidatorName';
 
 import HelpLink from '../../HelpLink';
 import useStyles from './styles';
@@ -38,10 +38,7 @@ const ValidatorsTable = ({
       <TableRow hover key={pubkey}>
         <TableCell>{rank}</TableCell>
         <TableCell>
-          <Link to={`/validators/${pubkey}`} className={classes.name}>
-            <Avatar pubkey={pubkey} avatarUrl={avatarUrl} />
-            <div>{name || pubkey}</div>
-          </Link>
+          <ValidatorName pubkey={pubkey} name={name} avatar={avatarUrl} />
         </TableCell>
         <TableCell>{activatedStake.toFixed(8)}</TableCell>
         <TableCell>{uptimePercent}%</TableCell>
@@ -55,10 +52,7 @@ const ValidatorsTable = ({
         className={cn(classes.card, separate && classes.cardVertical)}
         key={pubkey}
       >
-        <Link to={`/validators/${pubkey}`} className={classes.name}>
-          <Avatar pubkey={pubkey} avatarUrl={avatarUrl} />
-          <div>{name || pubkey}</div>
-        </Link>
+        <ValidatorName pubkey={pubkey} name={name} avatar={avatarUrl} />
         <Grid container>
           <Grid item xs={4} zeroMinWidth>
             <div className={classes.cardTitle}>Stake</div>

diff --git a/src/v2/components/Transactions/Detail/Application/index.jsx b/src/v2/components/Transactions/Detail/Application/index.jsx
@@ -2,10 +2,9 @@
 import React from 'react';
 import _ from 'lodash';
 import {Grid} from '@material-ui/core';
-import {Link} from 'react-router-dom';
 import Label from 'v2/components/UI/Label';
-import Avatar from 'v2/components/UI/Avatar';
 import TypeLabel from 'v2/components/UI/TypeLabel';
+import ValidatorName from 'v2/components/UI/ValidatorName';
 
 import useStyles from './styles';
 
@@ -19,10 +18,7 @@ const Application = ({id, accounts}: TApplication) => {
   const renderAccount = (account, i) => (
     <div className={classes.account}>
       <Label text={`Account ${i + 1}`} hint="" />
-      <Link to={`/account/${id}`} className={classes.accountLink}>
-        <Avatar avatarUrl="" name="" width={33} height={33} pubkey={id} />
-        <div className={classes.address}>{account}</div>
-      </Link>
+      <ValidatorName pubkey={id} name={account} avatar="" />
     </div>
   );
   return (

diff --git a/src/v2/components/UI/ValidatorName/index.jsx b/src/v2/components/UI/ValidatorName/index.jsx
@@ -0,0 +1,28 @@
+// @flow
+import React from 'react';
+import {Link} from 'react-router-dom';
+import Avatar from 'v2/components/UI/Avatar';
+
+import useStyles from './styles';
+
+const ValidatorName = ({
+  pubkey,
+  name,
+  avatar,
+}: {
+  pubkey: string,
+  name: string,
+  avatar: string,
+}) => {
+  const classes = useStyles();
+  return (
+    <div>
+      <Link to={`/validators/${pubkey}`} className={classes.root}>
+        <Avatar pubkey={pubkey} avatarUrl={avatar} />
+        <div>{name || pubkey}</div>
+      </Link>
+    </div>
+  );
+};
+
+export default ValidatorName;
diff --git a/src/v2/components/UI/ValidatorName/styles.js b/src/v2/components/UI/ValidatorName/styles.js
@@ -0,0 +1,19 @@
+import {makeStyles} from '@material-ui/core';
+
+export default makeStyles(theme => ({
+  root: {
+    display: 'flex',
+    alignItems: 'center',
+    '& div': {
+      '&:first-child': {
+        marginRight: 15,
+      },
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
+      overflow: 'hidden',
+    },
+    [theme.breakpoints.down('sm')]: {
+      marginBottom: 22,
+    },
+  },
+}));
diff --git a/src/v2/components/Validators/Detail/index.jsx b/src/v2/components/Validators/Detail/index.jsx
@@ -5,15 +5,14 @@ import useMediaQuery from '@material-ui/core/useMediaQuery/useMediaQuery';
 import React, {useEffect} from 'react';
 import {map, find} from 'lodash/fp';
 import {Match} from 'react-router-dom';
-
 import getUptime from 'v2/utils/getUptime';
 import SectionHeader from 'v2/components/UI/SectionHeader';
 import NodesStore from 'v2/stores/nodes';
 import HelpLink from 'v2/components/HelpLink';
 import Button from 'v2/components/UI/Button';
-import Avatar from 'v2/components/UI/Avatar';
 import Mixpanel from 'v2/mixpanel';
 import CopyBtn from 'v2/components/UI/CopyBtn';
+import ValidatorName from 'v2/components/UI/ValidatorName';
 
 import {LAMPORT_SOL_RATIO} from 'v2/constants';
 import ValidatorsMap from 'v2/components/ValidatorsMap';
@@ -140,8 +139,11 @@ const ValidatorsDetail = ({match}: {match: Match}) => {
       <SectionHeader title="Validator Detail">
         {!isMobile && (
           <div className={classes.validatorName}>
-            <Avatar pubkey={nodePubkey} avatarUrl={identity.avatarUrl} />
-            <span>{identity.name || nodePubkey}</span>
+            <ValidatorName
+              pubkey={nodePubkey}
+              name={identity.name}
+              avatar={identity.avatarUrl}
+            />
           </div>
         )}
         {!identity.keybaseUsername && (

diff --git a/src/v2/components/Validators/Detail/styles.js b/src/v2/components/Validators/Detail/styles.js
@@ -3,31 +3,8 @@ import getColor from 'v2/utils/getColor';
 
 export default makeStyles(theme => ({
   validatorName: {
-    fontSize: 15,
-    color: getColor('main')(theme),
-    textTransform: 'none',
-    fontWeight: 'normal',
-    letterSpacing: 'normal',
-    display: 'flex',
-    alignItems: 'center',
-    marginLeft: 40,
     marginRight: 'auto',
-    flexShrink: 1,
-    minWidth: 1,
-    [theme.breakpoints.down('sm')]: {
-      marginLeft: 0,
-      marginTop: 5,
-    },
-    '& > span:nth-child(2)': {
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap',
-      marginLeft: 22,
-    },
-    '& div:last-child': {
-      cursor: 'pointer',
-      marginLeft: 14,
-    },
+    marginLeft: 40,
   },
   headerBtn: {
     marginLeft: 40,