Merge branch 'feature/ui-fixes' into develop

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">

src/transaction/Logs.tsx

@@ -21,7 +21,7 @@ const Logs: React.FC<LogsProps> = ({ txData }) => (
           <div className="w-full space-y-2">
             <div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm">
               <div className="font-bold text-right">Address</div>
-              <div className="col-span-11">
+              <div className="col-span-11 mr-auto">
                 <DecoratedAddressLink
                   address={l.address}
                   miner={l.address === txData.miner}