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] 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) {