Differentiate simple eth transfers from transfer method calls

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>

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