From 48986de7f3c3047f6ea8dcc9a3999c4635da7976 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Wed, 27 Oct 2021 01:08:26 -0300
Subject: [PATCH] Add 4bytes decoding support to trace view

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

diff --git a/src/transaction/TraceItem.tsx b/src/transaction/TraceItem.tsx
index f3179ef..dd8bbef 100644
--- a/src/transaction/TraceItem.tsx
+++ b/src/transaction/TraceItem.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import AddressHighlighter from "../components/AddressHighlighter";
 import DecoratedAddressLink from "../components/DecoratedAddressLink";
 import { TransactionData } from "../types";
-import { rawInputTo4Bytes } from "../use4Bytes";
+import { rawInputTo4Bytes, use4Bytes } from "../use4Bytes";
 import { TraceGroup } from "../useErigonHooks";
 
 type TraceItemProps = {
@@ -13,6 +13,8 @@ type TraceItemProps = {
 
 const TraceItem: React.FC<TraceItemProps> = ({ t, txData, last }) => {
   const raw4Bytes = rawInputTo4Bytes(t.input);
+  const fourBytesEntry = use4Bytes(raw4Bytes);
+
   return (
     <>
       <div className="flex">
@@ -36,7 +38,9 @@ const TraceItem: React.FC<TraceItemProps> = ({ t, txData, last }) => {
             </AddressHighlighter>
           </span>
           <span>.</span>
-          <span>{raw4Bytes}</span>
+          <span className="font-bold text-blue-900">
+            {fourBytesEntry ? fourBytesEntry.name : raw4Bytes}
+          </span>
           <span>(</span>
           {t.input.length > 10 && (
             <span className="whitespace-nowrap">
diff --git a/src/use4Bytes.ts b/src/use4Bytes.ts
index 9fe9252..6dab197 100644
--- a/src/use4Bytes.ts
+++ b/src/use4Bytes.ts
@@ -61,8 +61,7 @@ export const use4Bytes = (
         const sigs = await res.text();
         const sig = sigs.split(";")[0];
         const cut = sig.indexOf("(");
-        let method = sig.slice(0, cut);
-        method = method.charAt(0).toUpperCase() + method.slice(1);
+        const method = sig.slice(0, cut);
 
         const entry: FourBytesEntry = {
           name: method,