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 (
@@ -16,14 +13,11 @@ const ApplicationDetails = ({programAccounts}: {programAccounts: Object}) => {
-
- {account.pubkey}
Balance: {account.lamports}
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 (
-
-
- {block.leader}
-
+
);
},
},
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 = ({
TODO
TODO
-
-
- {block.leader}
-
+
);
@@ -120,10 +117,11 @@ const BlocksTable = ({
Leader
-
+
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 (
-
-
- {name || pubkey}
-
+
+
+
({
},
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 = ({
{rank}
-
-
- {name || pubkey}
-
+
{activatedStake.toFixed(8)}
{uptimePercent}%
@@ -55,10 +52,7 @@ const ValidatorsTable = ({
className={cn(classes.card, separate && classes.cardVertical)}
key={pubkey}
>
-
-
- {name || pubkey}
-
+
Stake
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) => (
);
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 (
+
+
+
+
{name || pubkey}
+
+
+ );
+};
+
+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}) => {
{!isMobile && (
-
-
{identity.name || nodePubkey}
+
)}
{!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 (
-
-
-
- {identity.name || nodePubkey}
-
+
+
{(activatedStake &&
@@ -88,10 +88,11 @@ const ValidatorsTable = ({separate}: {separate: boolean}) => {
className={cn(classes.card, separate && classes.cardVertical)}
key={nodePubkey}
>
-
-
- {identity.name || nodePubkey}
-
+
Stake
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';