Extract method formatter

src/components/MethodName.tsx

@@ -1,22 +1,12 @@
 import React from "react";
-import { extract4Bytes, use4Bytes } from "../use4Bytes";
+import { useMethodSelector } from "../use4Bytes";
 
 type MethodNameProps = {
   data: string;
 };
 
 const MethodName: React.FC<MethodNameProps> = ({ data }) => {
-  const rawFourBytes = extract4Bytes(data);
+  const [isSimpleTransfer, methodName, methodTitle] = useMethodSelector(data);
-  const fourBytesEntry = use4Bytes(rawFourBytes);
-  const isSimpleTransfer = data === "0x";
-  const methodName = isSimpleTransfer
-    ? "transfer"
-    : fourBytesEntry?.name ?? rawFourBytes ?? "-";
-  const methodTitle = isSimpleTransfer
-    ? "ETH Transfer"
-    : methodName === rawFourBytes
-    ? methodName
-    : `${methodName} [${rawFourBytes}]`;
 
   return (
     <div

src/use4Bytes.ts

@@ -140,6 +140,22 @@ export const use4Bytes = (
   return data;
 };
 
+export const useMethodSelector = (data: string): [boolean, string, string] => {
+  const rawFourBytes = extract4Bytes(data);
+  const fourBytesEntry = use4Bytes(rawFourBytes);
+  const isSimpleTransfer = data === "0x";
+  const methodName = isSimpleTransfer
+    ? "transfer"
+    : fourBytesEntry?.name ?? rawFourBytes ?? "-";
+  const methodTitle = isSimpleTransfer
+    ? "ETH Transfer"
+    : methodName === rawFourBytes
+    ? methodName
+    : `${methodName} [${rawFourBytes}]`;
+
+  return [isSimpleTransfer, methodName, methodTitle];
+};
+
 export const useTransactionDescription = (
   fourBytesEntry: FourBytesEntry | null | undefined,
   data: string | undefined,