From 693e0c661134211086fe2a14202579e462df107e Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Tue, 13 Jul 2021 02:36:09 -0300
Subject: [PATCH 1/2] Differentiate simple eth transfers from transfer method
 calls

---
 src/components/MethodName.tsx | 17 ++++++++++++++---
 src/use4Bytes.ts              |  6 ++----
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/components/MethodName.tsx b/src/components/MethodName.tsx
index 446265b..1ed596d 100644
--- a/src/components/MethodName.tsx
+++ b/src/components/MethodName.tsx
@@ -6,11 +6,22 @@ type MethodNameProps = {
 };
 
 const MethodName: React.FC<MethodNameProps> = ({ data }) => {
-  const methodName = use4Bytes(data);
+  const rawFourBytes = data.slice(0, 10);
+  const methodName = use4Bytes(rawFourBytes);
+  const isSimpleTransfer = data === "0x";
+  const methodTitle = isSimpleTransfer
+    ? "ETH Transfer"
+    : methodName === rawFourBytes
+    ? methodName
+    : `${methodName} [${rawFourBytes}]`;
 
   return (
-    <div className="bg-blue-50 rounded-lg px-3 py-1 min-h-full flex items-baseline text-xs max-w-max">
-      <p className="truncate" title={methodName}>
+    <div
+      className={`${
+        isSimpleTransfer ? "bg-yellow-100" : "bg-blue-50"
+      } rounded-lg px-3 py-1 min-h-full flex items-baseline text-xs max-w-max`}
+    >
+      <p className="truncate" title={methodTitle}>
         {methodName}
       </p>
     </div>
diff --git a/src/use4Bytes.ts b/src/use4Bytes.ts
index 11f29d2..dad9f75 100644
--- a/src/use4Bytes.ts
+++ b/src/use4Bytes.ts
@@ -4,12 +4,10 @@ import { fourBytesURL } from "./url";
 
 const cache = new Map<string, string | null>();
 
-export const use4Bytes = (data: string) => {
+export const use4Bytes = (rawFourBytes: string) => {
   const runtime = useContext(RuntimeContext);
   const assetsURLPrefix = runtime.config?.assetsURLPrefix;
 
-  let rawFourBytes = data.slice(0, 10);
-
   const [name, setName] = useState<string>();
   const [fourBytes, setFourBytes] = useState<string>();
   useEffect(() => {
@@ -45,7 +43,7 @@ export const use4Bytes = (data: string) => {
       });
   }, [rawFourBytes, assetsURLPrefix, fourBytes]);
 
-  if (data === "0x") {
+  if (rawFourBytes === "0x") {
     return "Transfer";
   }
   if (assetsURLPrefix === undefined) {

From 1bf47266a471e2a8c6041584258968ef50ec7acb Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Tue, 13 Jul 2021 02:56:43 -0300
Subject: [PATCH 2/2] Display method name on transaction details page

---
 src/Transaction.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/Transaction.tsx b/src/Transaction.tsx
index 4f8c312..e2b6390 100644
--- a/src/Transaction.tsx
+++ b/src/Transaction.tsx
@@ -22,6 +22,7 @@ import AddressLink from "./components/AddressLink";
 import Copy from "./components/Copy";
 import Timestamp from "./components/Timestamp";
 import InternalTransfer from "./components/InternalTransfer";
+import MethodName from "./components/MethodName";
 import GasValue from "./components/GasValue";
 import FormattedBalance from "./components/FormattedBalance";
 import TokenTransferItem from "./TokenTransferItem";
@@ -232,7 +233,9 @@ const Transaction: React.FC = () => {
                     </div>
                   )}
                 </InfoRow>
-                <InfoRow title="Transaction Action"></InfoRow>
+                <InfoRow title="Transaction Action">
+                  <MethodName data={txData.data} />
+                </InfoRow>
                 {txData.tokenTransfers.length > 0 && (
                   <InfoRow
                     title={`Tokens Transferred (${txData.tokenTransfers.length})`}