Merge branch 'feature/ui-tweaks' into develop

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})`}

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">
+    <div
-      <p className="truncate" title={methodName}>
+      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) {