From c343242a6bc2babb52322c18e5151049e2a5293b Mon Sep 17 00:00:00 2001
From: Manuel Calavera <diserkin@gmail.com>
Date: Sun, 13 Oct 2019 17:43:46 -0700
Subject: [PATCH] feat: validator name component encapsulation

---
 src/AppV2.js                                  |  7 +++++
 .../Applications/Detail/Details/index.jsx     | 14 +++-------
 src/v2/components/Blocks/Detail/index.jsx     |  9 ++----
 src/v2/components/Blocks/Table/index.jsx      | 20 ++++++-------
 src/v2/components/Blocks/Table/styles.js      | 17 -----------
 .../NetworkOverview/StatCards/styles.js       |  4 +--
 src/v2/components/TourDeSol/Ranking/index.jsx | 14 +++++-----
 src/v2/components/TourDeSol/Ranking/styles.js | 12 --------
 src/v2/components/TourDeSol/Table/index.jsx   | 12 ++------
 .../Transactions/Detail/Application/index.jsx |  8 ++----
 src/v2/components/UI/ValidatorName/index.jsx  | 28 +++++++++++++++++++
 src/v2/components/UI/ValidatorName/styles.js  | 19 +++++++++++++
 src/v2/components/Validators/Detail/index.jsx | 10 ++++---
 src/v2/components/Validators/Detail/styles.js | 25 +----------------
 src/v2/components/Validators/Table/index.jsx  | 23 +++++++--------
 src/v2/components/Validators/Table/styles.js  | 17 -----------
 src/v2/components/Validators/index.jsx        |  2 +-
 17 files changed, 104 insertions(+), 137 deletions(-)
 create mode 100644 src/v2/components/UI/ValidatorName/index.jsx
 create mode 100644 src/v2/components/UI/ValidatorName/styles.js

diff --git a/src/AppV2.js b/src/AppV2.js
index c45525f1..da328e66 100644
--- 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
index c63f4ff9..d6c76957 100644
--- a/src/v2/components/Applications/Detail/Details/index.jsx
+++ b/src/v2/components/Applications/Detail/Details/index.jsx
@@ -1,14 +1,11 @@
 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}>
@@ -16,14 +13,11 @@ const ApplicationDetails = ({programAccounts}: {programAccounts: Object}) => {
           <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
index 02eeb7ce..32358d16 100644
--- 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
index 7cad5e3a..ca5edfd3 100644
--- 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
index b92e784a..8cff6763 100644
--- 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
index 040a7c8b..4b722342 100644
--- 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
index ba30944d..1d2d787c 100644
--- a/src/v2/components/TourDeSol/Ranking/index.jsx
+++ b/src/v2/components/TourDeSol/Ranking/index.jsx
@@ -1,11 +1,10 @@
 // @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}) => {
@@ -13,14 +12,15 @@ const Ranking = ({activeValidators}: {activeValidators: Array}) => {
 
   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
index e4ed4f07..11b11179 100644
--- 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
index 562f1bb4..0c21ce45 100644
--- 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
index 5555b7e3..47375115 100644
--- 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
new file mode 100644
index 00000000..16549629
--- /dev/null
+++ 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
new file mode 100644
index 00000000..39e13be2
--- /dev/null
+++ 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
index 22e8a5bc..d0535418 100644
--- 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
index 4bf2b4af..58486ee5 100644
--- 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,
diff --git a/src/v2/components/Validators/Table/index.jsx b/src/v2/components/Validators/Table/index.jsx
index 2796a568..44f15298 100644
--- a/src/v2/components/Validators/Table/index.jsx
+++ b/src/v2/components/Validators/Table/index.jsx
@@ -10,12 +10,11 @@ import {Link} from 'react-router-dom';
 import {map, concat} from 'lodash/fp';
 import NodesStore from 'v2/stores/nodes';
 import getUptime from 'v2/utils/getUptime';
-import Avatar from 'v2/components/UI/Avatar';
 import Table from 'v2/components/UI/Table';
 import {LAMPORT_SOL_RATIO} from 'v2/constants';
 import Socket from 'v2/stores/socket';
 import Loader from 'v2/components/UI/Loader';
-
+import ValidatorName from 'v2/components/UI/ValidatorName';
 import useStyles from './styles';
 
 const fields = [
@@ -64,11 +63,12 @@ const ValidatorsTable = ({separate}: {separate: boolean}) => {
     const {identity = {}, nodePubkey, activatedStake, commission} = row;
     return (
       <TableRow hover key={nodePubkey}>
-        <TableCell align="center">
-          <Link to={`/validators/${nodePubkey}`} className={classes.name}>
-            <Avatar pubkey={nodePubkey} avatarUrl={identity.avatarUrl} />
-            <div>{identity.name || nodePubkey}</div>
-          </Link>
+        <TableCell>
+          <ValidatorName
+            pubkey={nodePubkey}
+            name={identity.name}
+            avatar={identity.avatarUrl}
+          />
         </TableCell>
         <TableCell>
           {(activatedStake &&
@@ -88,10 +88,11 @@ const ValidatorsTable = ({separate}: {separate: boolean}) => {
         className={cn(classes.card, separate && classes.cardVertical)}
         key={nodePubkey}
       >
-        <Link to={`/validators/${nodePubkey}`} className={classes.name}>
-          <Avatar pubkey={nodePubkey} avatarUrl={identity.avatarUrl} />
-          <div>{identity.name || nodePubkey}</div>
-        </Link>
+        <ValidatorName
+          pubkey={nodePubkey}
+          name={identity.name}
+          avatar={identity.avatarUrl}
+        />
         <Grid container spacing={1}>
           <Grid item xs={4} zeroMinWidth>
             <div className={classes.cardTitle}>Stake</div>
diff --git a/src/v2/components/Validators/Table/styles.js b/src/v2/components/Validators/Table/styles.js
index 8595c791..b6ea6c7a 100644
--- a/src/v2/components/Validators/Table/styles.js
+++ b/src/v2/components/Validators/Table/styles.js
@@ -50,23 +50,6 @@ export default makeStyles(theme => ({
     fontSize: 15,
     textDecoration: 'none',
   },
-  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: {
     display: 'flex',
     width: '100%',
diff --git a/src/v2/components/Validators/index.jsx b/src/v2/components/Validators/index.jsx
index 7171577a..5af7aca3 100644
--- a/src/v2/components/Validators/index.jsx
+++ b/src/v2/components/Validators/index.jsx
@@ -11,7 +11,7 @@ import Button from 'v2/components/UI/Button';
 import Socket from 'v2/stores/socket';
 import Loader from 'v2/components/UI/Loader';
 import ValidatorsMap from 'v2/components/ValidatorsMap';
-import HelpLink from '../HelpLink';
+import HelpLink from 'v2/components/HelpLink';
 
 import ValidatorsTable from './Table';
 import useStyles from './styles';