Fix singular "Confirmation"

src/components/BlockConfirmations.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+type BlockConfirmationsProps = {
+  confirmations: number;
+};
+
+const BlockConfirmations: React.FC<BlockConfirmationsProps> = ({
+  confirmations,
+}) => (
+  <span className="rounded text-xs bg-gray-100 text-gray-500 px-2 py-1">
+    {confirmations} Block{" "}
+    {confirmations === 1 ? "Confirmation" : "Confirmations"}
+  </span>
+);
+
+export default React.memo(BlockConfirmations);

src/transaction/Details.tsx

@@ -8,6 +8,7 @@ import {
 import ContentFrame from "../ContentFrame";
 import InfoRow from "../components/InfoRow";
 import BlockLink from "../components/BlockLink";
+import BlockConfirmations from "../components/BlockConfirmations";
 import AddressHighlighter from "../components/AddressHighlighter";
 import DecoratedAddressLink from "../components/DecoratedAddressLink";
 import Copy from "../components/Copy";
@@ -53,9 +54,7 @@ const Details: React.FC<DetailsProps> = ({
     <InfoRow title="Block">
       <div className="flex items-baseline space-x-2">
         <BlockLink blockTag={txData.blockNumber} />
-        <span className="rounded text-xs bg-gray-100 text-gray-500 px-2 py-1">
+        <BlockConfirmations confirmations={txData.confirmations} />
-          {txData.confirmations} Block Confirmations
-        </span>
       </div>
     </InfoRow>
     <InfoRow title="Timestamp">