From 3bfd38641b7d7ca5eff1449b4defc49879231533 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Thu, 28 Oct 2021 17:39:10 -0300
Subject: [PATCH] Correctly render fallback function signature

---
 src/transaction/TraceItem.tsx | 14 +++++++-------
 src/use4Bytes.ts              |  7 +++++++
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/transaction/TraceItem.tsx b/src/transaction/TraceItem.tsx
index e5390a8..3e72fed 100644
--- a/src/transaction/TraceItem.tsx
+++ b/src/transaction/TraceItem.tsx
@@ -4,7 +4,7 @@ import DecoratedAddressLink from "../components/DecoratedAddressLink";
 import FormattedBalance from "../components/FormattedBalance";
 import FunctionSignature from "./FunctionSignature";
 import { TransactionData } from "../types";
-import { FourBytesEntry, rawInputTo4Bytes } from "../use4Bytes";
+import { extract4Bytes, FourBytesEntry } from "../use4Bytes";
 import { TraceGroup } from "../useErigonHooks";
 
 type TraceItemProps = {
@@ -20,8 +20,11 @@ const TraceItem: React.FC<TraceItemProps> = ({
   last,
   fourBytesMap,
 }) => {
-  const raw4Bytes = rawInputTo4Bytes(t.input);
-  const fourBytesEntry = fourBytesMap[raw4Bytes];
+  const raw4Bytes = extract4Bytes(t.input);
+  const sigText =
+    raw4Bytes === null
+      ? "<fallback>"
+      : fourBytesMap[raw4Bytes]?.name ?? raw4Bytes;
 
   return (
     <>
@@ -45,10 +48,7 @@ const TraceItem: React.FC<TraceItemProps> = ({
             </AddressHighlighter>
           </span>
           <span>.</span>
-          <FunctionSignature
-            callType={t.type}
-            sig={fourBytesEntry ? fourBytesEntry.name : raw4Bytes}
-          />
+          <FunctionSignature callType={t.type} sig={sigText} />
           {t.value && !t.value.isZero() && (
             <span className="text-red-700 whitespace-nowrap">
               {"{"}value: <FormattedBalance value={t.value} /> ETH{"}"}
diff --git a/src/use4Bytes.ts b/src/use4Bytes.ts
index 1590e1c..5b4a726 100644
--- a/src/use4Bytes.ts
+++ b/src/use4Bytes.ts
@@ -16,6 +16,13 @@ const simpleTransfer: FourBytesEntry = {
 
 const fullCache = new Map<string, FourBytesEntry | null>();
 
+export const extract4Bytes = (rawInput: string): string | null => {
+  if (rawInput.length < 10) {
+    return null;
+  }
+  return rawInput.slice(0, 10);
+};
+
 export const rawInputTo4Bytes = (rawInput: string) => rawInput.slice(0, 10);
 
 const fetch4Bytes = async (