From aa98aea9f94255b9df50ead5b42372e2eeb7a364 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Fri, 23 Jul 2021 01:28:44 -0300
Subject: [PATCH] Fix singular "Confirmation"

---
 src/components/BlockConfirmations.tsx | 16 ++++++++++++++++
 src/transaction/Details.tsx           |  5 ++---
 2 files changed, 18 insertions(+), 3 deletions(-)
 create mode 100644 src/components/BlockConfirmations.tsx

diff --git a/src/components/BlockConfirmations.tsx b/src/components/BlockConfirmations.tsx
new file mode 100644
index 0000000..4846d09
--- /dev/null
+++ b/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);
diff --git a/src/transaction/Details.tsx b/src/transaction/Details.tsx
index 4204908..30bcbbd 100644
--- a/src/transaction/Details.tsx
+++ b/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">
-          {txData.confirmations} Block Confirmations
-        </span>
+        <BlockConfirmations confirmations={txData.confirmations} />
       </div>
     </InfoRow>
     <InfoRow title="Timestamp">