From c77c7ddf7a2a795b483e522d7f43aa65e81effc0 Mon Sep 17 00:00:00 2001
From: Noah Litvin <335975+noahlitvin@users.noreply.github.com>
Date: Sun, 2 Mar 2025 22:25:07 -0500
Subject: [PATCH] fix(website): fix tx display

---
 .../features/Deploy/DisplayedTransaction.tsx  | 21 ++++++++++++-------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/packages/website/src/features/Deploy/DisplayedTransaction.tsx b/packages/website/src/features/Deploy/DisplayedTransaction.tsx
index 710ea3a7b..5a3da57fb 100644
--- a/packages/website/src/features/Deploy/DisplayedTransaction.tsx
+++ b/packages/website/src/features/Deploy/DisplayedTransaction.tsx
@@ -83,7 +83,10 @@ export function DisplayedTransaction(props: {
   const parsedContractNames =
     props.txn && contracts
       ? Object.entries(contracts)
-          .filter(([, { address }]) => address === props.txn?.to)
+          .filter(
+            ([, { address }]) =>
+              address.toLowerCase() === props.txn?.to?.toLowerCase()
+          )
           .map(([contractName]) => contractName)
       : [];
 
@@ -105,9 +108,7 @@ export function DisplayedTransaction(props: {
   }
 
   const functionName = decodedFunctionData?.functionName.split('(')[0];
-  const functionHash = (
-    <span className="font-mono">{props.txn?.data?.slice(0, 10)}</span>
-  );
+  const functionHash = props.txn?.data?.slice(0, 10);
   const rawFunctionArgs = props.txn?.data?.slice(10);
   const functionArgs = decodedFunctionData?.args?.map((v) => v) || [
     rawFunctionArgs,
@@ -185,13 +186,17 @@ export function DisplayedTransaction(props: {
         </CardTitle>
         <CardDescription>
           {props.cannonOperation && (
-            <span className="mr-3.5">
+            <span className="mr-4">
               via <span className="font-mono">[{props.cannonOperation}]</span>
             </span>
           )}
-          <span className="mr-3.5">Target Address: {address}</span>
-          <span className="mr-3.5">Function Selector: {functionHash}</span>
-          <span>Value: {value}</span>
+          <span className="mr-4">Target Address: {address}</span>
+          <span className="mr-4">
+            Function Selector: <span className="font-mono">{functionHash}</span>
+          </span>
+          <span>
+            Value: <span className="font-mono">{value}</span>
+          </span>
         </CardDescription>
       </CardHeader>
       <CardContent>