From 8cacd01f4260d58cae09ca6991c1feb40a7597a1 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Wed, 28 Jul 2021 16:36:34 -0300
Subject: [PATCH] Enable rich info on InfoRow component title; add EIP
 hyperlink to tx type

---
 src/components/ExternalLink.tsx |  4 ++--
 src/components/InfoRow.tsx      |  2 +-
 src/transaction/Details.tsx     | 13 ++++++++++++-
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/components/ExternalLink.tsx b/src/components/ExternalLink.tsx
index 5232a9d..51769a8 100644
--- a/src/components/ExternalLink.tsx
+++ b/src/components/ExternalLink.tsx
@@ -13,9 +13,9 @@ const ExternalLink: React.FC<ExternalLinkProps> = ({ href, children }) => (
     target="_blank"
     rel="noopener noreferrer"
   >
-    <span className="inline-flex items-center space-x-1">
+    <span className="inline-flex items-baseline space-x-1">
       <span>{children}</span>
-      <FontAwesomeIcon icon={faExternalLinkAlt} size="1x" />
+      <FontAwesomeIcon icon={faExternalLinkAlt} size="sm" />
     </span>
   </a>
 );
diff --git a/src/components/InfoRow.tsx b/src/components/InfoRow.tsx
index eb40eb6..947eec7 100644
--- a/src/components/InfoRow.tsx
+++ b/src/components/InfoRow.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 type InfoRowProps = React.PropsWithChildren<{
-  title: string;
+  title: React.ReactNode;
 }>;
 
 const InfoRow: React.FC<InfoRowProps> = ({ title, children }) => (
diff --git a/src/transaction/Details.tsx b/src/transaction/Details.tsx
index e8e1159..86b0c0e 100644
--- a/src/transaction/Details.tsx
+++ b/src/transaction/Details.tsx
@@ -21,6 +21,7 @@ import FormattedBalance from "../components/FormattedBalance";
 import TokenTransferItem from "../TokenTransferItem";
 import { TransactionData, InternalOperation } from "../types";
 import PercentageBar from "../components/PercentageBar";
+import ExternalLink from "../components/ExternalLink";
 
 type DetailsProps = {
   txData: TransactionData;
@@ -132,7 +133,17 @@ const Details: React.FC<DetailsProps> = ({
         {ethers.utils.formatEther(txData.value)} Ether
       </span>
     </InfoRow>
-    <InfoRow title="Type (EIP-2718)">
+    <InfoRow
+      title={
+        <>
+          Type (
+          <ExternalLink href="https://eips.ethereum.org/EIPS/eip-2718">
+            EIP-2718
+          </ExternalLink>
+          )
+        </>
+      }
+    >
       <TransactionType type={txData.type} />
     </InfoRow>
     {txData.blockBaseFeePerGas && (