Block id styling

apps/explorer/src/app/components/blocks/home/blocks-table.tsx

@@ -21,7 +21,7 @@ export const BlocksTable = ({ data, showTransactions }: BlocksProps) => {
         return (
           <React.Fragment key={index}>
             <tr className="bg-neutral-850 border-b-4 border-b-black">
-              <td className="pl-4">
+              <td className="pl-4 py-2">
                 <Link
                   to={`/blocks/${block.header?.height}`}
                   className="text-vega-yellow"

apps/explorer/src/app/components/truncate/truncate.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+
+const ELLIPSIS = '\u2026';
+
+interface TruncateInlineProps {
+  text: string | null;
+  className?: string;
+  style?: React.CSSProperties;
+  children?: (truncatedText: string) => React.ReactElement;
+  startChars?: number; // number chars to show before ellipsis
+  endChars?: number; // number of chars to show after ellipsis
+}
+
+/**
+ * Truncates a string of text from the center showing a specified number
+ * of characters from the start and end. Optionally takes a children as
+ * a render props so truncated text can be used inside other elements such
+ * as links
+ */
+export function TruncateInline({
+  text,
+  className,
+  style,
+  children,
+  startChars,
+  endChars,
+}: TruncateInlineProps) {
+  if (text === null) {
+    return <span data-testid="empty-truncation" />;
+  }
+  const truncatedText = truncateByChars(text, startChars, endChars);
+
+  const wrapperProps = {
+    title: text,
+    style,
+    className,
+  };
+
+  if (children !== undefined) {
+    return <span {...wrapperProps}>{children(truncatedText)}</span>;
+  } else {
+    return <span {...wrapperProps}>{truncatedText}</span>;
+  }
+}
+
+export function truncateByChars(s: string, startChars = 6, endChars = 6) {
+  // if the text is shorted than the total number of chars to show
+  // no truncation is needed. Plus one is to account for the ellipsis
+  if (s.length <= startChars + endChars + 1) {
+    return s;
+  }
+
+  const start = s.slice(0, startChars);
+  const end = s.slice(-endChars);
+
+  return start + ELLIPSIS + end;
+}

apps/explorer/src/app/components/txs/txs-per-block/index.tsx

@@ -2,11 +2,14 @@ import useFetch from '../../../hooks/use-fetch';
 import { ChainExplorerTxResponse } from '../../../routes/types/chain-explorer-response';
 import { DATA_SOURCES } from '../../../config';
 import { Link } from 'react-router-dom';
+import { TruncateInline } from '../../truncate/truncate';
 
 interface TxsPerBlockProps {
   blockHeight: string | undefined;
 }
 
+const truncateLength = 14;
+
 export const TxsPerBlock = ({ blockHeight }: TxsPerBlockProps) => {
   const {
     state: { data: decodedBlockData },
@@ -24,28 +27,44 @@ export const TxsPerBlock = ({ blockHeight }: TxsPerBlockProps) => {
   });
 
   return (
-    <table>
-      <thead>
-        <tr>
-          <td>Transaction</td>
-          <td>From</td>
-          <td>Type</td>
-        </tr>
-      </thead>
-      <tbody>
-        {decodedBlockData &&
-          decodedBlockData.map(({ TxHash, PubKey, Type }, index) => {
-            return (
-              <tr key={index}>
-                <td>
-                  <Link to={`/txs/${TxHash}`}>{TxHash}</Link>
-                </td>
-                <td>{PubKey}</td>
-                <td>{Type}</td>
-              </tr>
-            );
-          })}
-      </tbody>
-    </table>
+    <div className="overflow-x-auto whitespace-nowrap mb-28">
+      <table className="w-full">
+        <thead>
+          <tr className="font-mono">
+            <td>Transaction</td>
+            <td>From</td>
+            <td>Type</td>
+          </tr>
+        </thead>
+        <tbody>
+          {decodedBlockData &&
+            decodedBlockData.map(({ TxHash, PubKey, Type }, index) => {
+              return (
+                <tr key={index}>
+                  <td>
+                    <Link to={`/txs/${TxHash}`}>
+                      <TruncateInline
+                        text={TxHash}
+                        startChars={truncateLength}
+                        endChars={truncateLength}
+                        className="text-vega-yellow font-mono"
+                      />
+                    </Link>
+                  </td>
+                  <td>
+                    <TruncateInline
+                      text={PubKey}
+                      startChars={truncateLength}
+                      endChars={truncateLength}
+                      className="font-mono"
+                    />
+                  </td>
+                  <td>{Type}</td>
+                </tr>
+              );
+            })}
+        </tbody>
+      </table>
+    </div>
   );
 };

apps/explorer/src/app/routes/blocks/id/index.tsx

@@ -23,24 +23,29 @@ const Block = () => {
 
   return (
     <section>
-      <h1>BLOCK {block}</h1>
+      <h1 className="route-header">BLOCK {block}</h1>
       <Table>
-        <tr>
-          <td>Mined by</td>
-          <td>
-            <Link to={`/validators/${header.proposer_address}`}>
+        <tr className="table-bordered-tr">
+          <td className="table-bordered-td">Mined by</td>
+          <td className="table-bordered-td">
+            <Link
+              className="text-vega-yellow"
+              to={`/validators/${header.proposer_address}`}
+            >
               {header.proposer_address}
             </Link>
           </td>
         </tr>
-        <tr>
-          <td>Time</td>
-          <td>
+        <tr className="table-bordered-tr">
+          <td className="table-bordered-td">Time</td>
+          <td className="table-bordered-td">
             <SecondsAgo date={header.time} />
           </td>
         </tr>
       </Table>
-      <TxsPerBlock blockHeight={block} />
+      {blockData?.result.block.data.txs.length > 0 && (
+        <TxsPerBlock blockHeight={block} />
+      )}
     </section>
   );
 };

apps/explorer/src/styles.css

@@ -6,6 +6,14 @@
   @apply font-alpha text-h3 uppercase mt-12 mb-28;
 }
 
+.table-bordered-tr {
+  @apply border-b border-neutral-500;
+}
+
+.table-bordered-td {
+  @apply py-4;
+}
+
 /* Used for text, tel input */
 .form-input {
   @apply bg-neutral-800 border-white border px-8 py-4 placeholder-neutral-300;