Jarryd/167/add vote indicator for block validators

CHANGELOG.md

@@ -13,6 +13,7 @@
 - Make y-axis dynamic based on zoom min/max values #238
 - Add account delegations/unbondings to account page #218
 - Add pagination to account assets #224
+- Add vote indicator for block validators #167
 - Add account attributes #244
 
 ## 2.5.0

src/Components/Table/Table.js

@@ -27,7 +27,7 @@ const TableMain = styled.table`
   border-spacing: 0;
 `;
 const TableHead = styled.thead`
-  padding: 10px 0;
+  padding: 0px 0;
   border-bottom: 1px solid ${({ theme }) => theme.BORDER_PRIMARY};
   text-align: left;
 `;
@@ -41,14 +41,14 @@ const TableBody = styled.tbody``;
 const TableHeadData = styled.th`
   color: ${({ theme }) => theme.FONT_TITLE_INFO};
   font-weight: ${({ theme }) => theme.FONT_WEIGHT_NORMAL};
-  padding: 10px 20px;
+  ${({ alignHeaderText }) => alignHeaderText && `text-align: ${alignHeaderText}`};
+  padding: 10px 15px;
 `;
 const TableData = styled.td`
-  padding: 10px 20px;
-  text-align: left;
+  padding: 10px 15px;
+  text-align: ${({ center }) => center};
   display: ${({ copy }) => (copy ? 'flex' : '')};
   border: none;
-  min-width: 100px;
   text-decoration: ${({ skipped }) => skipped && 'line-through'};
   font-style: ${({ skipped }) => skipped && 'italic'};
 `;
@@ -127,8 +127,10 @@ const Table = ({
   );
 
   const buildTableHead = () =>
-    finalTableHeaders.map(({ displayName }) => (
-      <TableHeadData key={displayName}>{displayName}</TableHeadData>
+    finalTableHeaders.map(({ displayName, alignHeaderText = '' }) => (
+      <TableHeadData key={displayName} alignHeaderText={alignHeaderText}>
+        {displayName}
+      </TableHeadData>
     ));
 
   const buildSingleRow = (rowData, index) =>
@@ -173,26 +175,30 @@ const Table = ({
         hover = false,
         icon,
         skipped = false,
+        color = theme.FONT_LINK,
+        size = '1.4rem',
         copy = false,
       } = rowData[dataName] || {};
 
       // Note: if the value is an array, split all values out
       // Eg: value: [1456.43, 'vspn'] => {value[0]} {value[1]} (but use .map, since the array can vary in length)
       const finalValue = Array.isArray(value) ? value.map(singleValue => singleValue) : value;
       const valueMissing = value === '--' || value === '' || value === '--';
+      // If only displaying an icon, center it
+      const center = icon && value === '' ? 'center' : 'left';
 
       return (
-        <TableData title={hover || value} key={displayName} skipped={skipped} copy={copy}>
+        <TableData title={hover || value} key={displayName} skipped={skipped} copy={copy} center={center}>
           {link && !valueMissing && link !== pathname ? (
             <Link to={link}>
               {finalValue}
-              {icon && <Sprite icon={icon} size={'1.4rem'} color={theme.FONT_LINK} />}
+              {icon && <Sprite icon={icon} size={size} color={color} />}
               {copy && <CopyValue value={value} title={`Copy ${hover}`} />}
             </Link>
           ) : (
             <>
               {value}
-              {icon && <Sprite icon={icon} size={'1.4rem'} color={theme.FONT_LINK} />}
+              {icon && <Sprite icon={icon} size={size} color={color} />}
               {copy && <CopyValue value={value} title={`Copy ${hover}`} />}
             </>
           )}

src/Pages/Block/Components/BlockDetails.js

@@ -27,14 +27,23 @@ const BlockDetails = () => {
     }
   }, [blockHeight, getBlockInfo, loaded, setLocalBlockHeight, localBlockHeight]);
 
-  const { hash, proposerAddress, moniker, votingPower = {}, txNum, validatorCount = {}, time, userName } = blockInfo;
+  const {
+    hash,
+    proposerAddress,
+    moniker,
+    votingPower = {},
+    txNum,
+    validatorCount = {},
+    time,
+    userName,
+  } = blockInfo;
   const { count: votingPowerCount, total: votingPowerTotal } = votingPower;
   const { count: validatorCountAmount, total: validatorCountTotal } = validatorCount;
   const utcTime = getUTCTime(time);
   const votingPowerPercent = numberFormat((votingPowerCount / votingPowerTotal) * 100, 2);
 
   const summaryData = [
-    { title: 'Block Hash', value: hash, copy: hash },
+    { title: 'Block Hash', value: maxLength(hash, 20, 3), copy: hash },
     {
       title: 'Proposer',
       value: userName || maxLength(moniker, 20, 5),
@@ -47,7 +56,9 @@ const BlockDetails = () => {
     { title: 'Timestamp', value: `${utcTime}+UTC` },
   ];
 
-  return <Content size="100%">{blockInfoLoading ? <Loading /> : <Summary data={summaryData} />}</Content>;
+  return (
+    <Content size="100%">{blockInfoLoading ? <Loading /> : <Summary data={summaryData} />}</Content>
+  );
 };
 
 export default BlockDetails;

src/Pages/Block/Components/BlockValidators.js

@@ -22,6 +22,8 @@ const BlockValidators = () => {
   const tableHeaders = [
     { displayName: 'Moniker', dataName: 'moniker' },
     { displayName: 'Operator', dataName: 'addressId' },
+    { displayName: 'Voted', dataName: 'didVote', alignHeaderText: 'center' },
+    { displayName: 'Proposer', dataName: 'isProposer', alignHeaderText: 'center' },
     { displayName: 'Consensus Address', dataName: 'consensusAddress' },
     { displayName: 'Proposer Priority', dataName: 'proposerPriority' },
     { displayName: 'Voting Power', dataName: 'votingPower' },

src/utils/table/formatTableData.js

@@ -311,6 +311,17 @@ export const formatTableData = (data = [], tableHeaders) => {
           };
           break;
         }
+        // Block proposer true/false
+        // Validator voting status
+        case 'isProposer': // fallthrough
+        case 'didVote':
+          finalObj[dataName] = {
+            value: '',
+            icon: serverValue ? 'CHECK' : dataName === 'didVote' ? 'CLEAR' : '',
+            color: serverValue ? 'rgb(78, 210, 44)' : 'red',
+            size: '2.0rem',
+          };
+          break;
         // Boolean to string
         case 'mintable':
           finalObj[dataName] = { value: capitalize(`${serverValue}`) };