Updated block page

client/src/views/block-details-card.js → client/src/components/block-details-card.js

@@ -1,17 +1,25 @@
-import { BlockGrid } from "../components/block-grid";
-import { InfoStat } from "../components/info-stat";
-import { StatusBadge } from "../components/status-badge";
-import { ElapsedTime } from "../components/elapsed-time";
+import { BlockGrid } from "./block-grid";
+import { InfoStat } from "./info-stat";
+import { StatusBadge } from "./status-badge";
+import { ElapsedTime } from "./elapsed-time";
+import { Tooltip } from "./tooltip";
 import {
   formatTime,
   formatVMB,
   getBlockPercentageUsed,
-} from "./util";
+} from "../views/util";
+
+const staticRoot = process.env.STATIC_ROOT || "";
 
 const formatInteger = (value) =>
   Number.isFinite(value) ? value.toLocaleString() : "N/A";
 
-const BlockDetailsCard = ({ className, block, confirmed }) => {
+const BlockDetailsCard = ({
+  className,
+  block,
+  statusText,
+  statusVariant = "success",
+}) => {
   const percentage = block
     ? Math.min(Math.max(getBlockPercentageUsed(block.weight), 0), 100)
     : 0;
@@ -38,16 +46,14 @@ const BlockDetailsCard = ({ className, block, confirmed }) => {
               title={block ? formatTime(block.timestamp) : ""}
             >
               {block ? (
-                <span>
-                  <ElapsedTime timestamp={block.timestamp} /> ago
-                </span>
+                <ElapsedTime timestamp={block.timestamp} />
               ) : (
                 "Loading block..."
               )}
             </p>
 
-            {confirmed ? (
-              <StatusBadge variant="success">Confirmed</StatusBadge>
+            {statusText ? (
+              <StatusBadge variant={statusVariant}>{statusText}</StatusBadge>
             ) : null}
           </div>
 
@@ -60,11 +66,25 @@ const BlockDetailsCard = ({ className, block, confirmed }) => {
               title="SIZE"
               value={block ? formatVMB(block.size, "MB") : "N/A"}
             />
+            <InfoStat
+              title="VIRTUAL SIZE"
+              value={
+                block && Number.isFinite(block.weight)
+                  ? `${Math.ceil(block.weight / 4 / 1000)} vKB`
+                  : "N/A"
+              }
+            />
           </div>
 
           <div className="block-details-card-progress">
             <div className="block-details-card-progress-header">
-              <p>BLOCK FILLING</p>
+              <div className="block-details-card-progress-title">
+                <p>BLOCK FILLING</p>
+                <Tooltip
+                  iconSrc={`${staticRoot}img/icons/tooltip.svg`}
+                  text="How full the block is."
+                />
+              </div>
               <p className="usage-number">
                 {block ? `${percentage}%` : "N/A"}
               </p>

client/src/components/block-signatures.js

@@ -0,0 +1,37 @@
+import { parseBlockSignatures } from "../lib/block-signatures";
+
+let lastWarningKey;
+
+const warnOnce = (block, error) => {
+  if (!process.browser) return;
+
+  const source = error.source || "challenge";
+  const warningKey = `${block && block.id}:${source}`;
+  if (warningKey === lastWarningKey) return;
+
+  lastWarningKey = warningKey;
+  console.warn(`Failed to parse ${source} script`, error);
+};
+
+const BlockSignatures = ({ block }) => {
+  const result = parseBlockSignatures(block);
+
+  if (result && result.error) {
+    warnOnce(block, result.error);
+  }
+
+  const signatures = result && !result.error ? result : null;
+
+  return signatures ? (
+    <div className="block-signatures">
+      <p>{`${signatures.signatureCount} of ${signatures.totalSigners}`}</p>
+      <p className="block-signatures-required">
+        {`${signatures.requiredSignatures} required`}
+      </p>
+    </div>
+  ) : (
+    <p>N/A</p>
+  );
+};
+
+export default BlockSignatures;

client/src/components/elapsed-time.js

@@ -3,7 +3,7 @@ const MINUTES_PER_DAY = 24 * 60;
 const MINUTES_PER_YEAR = 365 * MINUTES_PER_DAY;
 const MINUTES_PER_MONTH = MINUTES_PER_YEAR / 12;
 
-const formatElapsedTime = (timestamp) => {
+const formatElapsedTime = (timestamp, compact) => {
   const fromDate =
     timestamp < 1e12 ? new Date(timestamp * 1000) : new Date(timestamp);
   const diffMinutes = Math.max(
@@ -17,50 +17,66 @@ const formatElapsedTime = (timestamp) => {
     minutesAfterYears - months * MINUTES_PER_MONTH,
   );
   const units = [
-    ["y", years],
-    ["mo", months],
-    ["d", Math.floor(minutesAfterMonths / MINUTES_PER_DAY)],
-    ["h", Math.floor((minutesAfterMonths % MINUTES_PER_DAY) / 60)],
-    ["m", minutesAfterMonths % 60],
+    ["YEAR", "YEARS", "y", years],
+    ["MONTH", "MONTHS", "mo", months],
+    ["DAY", "DAYS", "d", Math.floor(minutesAfterMonths / MINUTES_PER_DAY)],
+    [
+      "HOUR",
+      "HOURS",
+      "h",
+      Math.floor((minutesAfterMonths % MINUTES_PER_DAY) / 60),
+    ],
+    ["MINUTE", "MINUTES", "m", minutesAfterMonths % 60],
   ];
   const parts = units
-    .filter(([_, value]) => value > 0)
+    .filter((unit) => unit[3] > 0)
     .slice(0, 2)
-    .map(([unit, value]) => `${value}${unit}`);
+    .map(([singular, plural, abbreviation, value]) =>
+      compact
+        ? `${value}${abbreviation}`
+        : `${value} ${value === 1 ? singular : plural}`,
+    );
 
-  return parts.length ? parts.join(" ") : "< 1m";
+  if (compact) return parts.length ? parts.join(" ") : "< 1m";
+
+  return parts.length ? `${parts.join(" ")} AGO` : "< 1 MINUTE AGO";
 };
 
 const updateElapsedTime = (element) => {
-  element.textContent = formatElapsedTime(element.elapsedTimeTimestamp);
+  element.textContent = formatElapsedTime(
+    element.elapsedTimeTimestamp,
+    element.elapsedTimeCompact,
+  );
 };
 
-const startElapsedTime = (vnode, timestamp) => {
+const startElapsedTime = (vnode, timestamp, compact) => {
   vnode.elm.elapsedTimeTimestamp = timestamp;
+  vnode.elm.elapsedTimeCompact = compact;
   updateElapsedTime(vnode.elm);
   vnode.elm.elapsedTimeInterval = window.setInterval(
     () => updateElapsedTime(vnode.elm),
     UPDATE_INTERVAL_MS,
   );
 };
 
-const patchElapsedTime = (_, vnode, timestamp) => {
+const patchElapsedTime = (_, vnode, timestamp, compact) => {
   vnode.elm.elapsedTimeTimestamp = timestamp;
+  vnode.elm.elapsedTimeCompact = compact;
   updateElapsedTime(vnode.elm);
 };
 
 const stopElapsedTime = (vnode) => {
   window.clearInterval(vnode.elm.elapsedTimeInterval);
 };
 
-export const ElapsedTime = ({ timestamp } = {}) => (
+export const ElapsedTime = ({ timestamp, compact = false } = {}) => (
   <span
-    hook-insert={(vnode) => startElapsedTime(vnode, timestamp)}
+    hook-insert={(vnode) => startElapsedTime(vnode, timestamp, compact)}
     hook-postpatch={(oldVnode, vnode) =>
-      patchElapsedTime(oldVnode, vnode, timestamp)
+      patchElapsedTime(oldVnode, vnode, timestamp, compact)
     }
     hook-destroy={stopElapsedTime}
   >
-    {formatElapsedTime(timestamp)}
+    {formatElapsedTime(timestamp, compact)}
   </span>
 );