From 01818584b72f80f79e7d0dc50113b08b65a6234c Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Mon, 25 Oct 2021 14:43:41 -0300
Subject: [PATCH] Color topic hashes/method selectors

---
 src/address/DecodedFragment.tsx | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/address/DecodedFragment.tsx b/src/address/DecodedFragment.tsx
index 991865a..211d67c 100644
--- a/src/address/DecodedFragment.tsx
+++ b/src/address/DecodedFragment.tsx
@@ -18,19 +18,26 @@ const DecodedFragment: React.FC<DecodedFragmentProps> = ({
   intf,
   fragment,
 }) => {
+  let fragmentType: "constructor" | "event" | "function" | undefined;
   let sig: string | undefined;
   let letter: string | undefined;
   let letterBg: string | undefined;
+  let hashBg: string | undefined;
 
   if (FunctionFragment.isFunctionFragment(fragment)) {
+    fragmentType = "function";
     sig = intf.getSighash(fragment);
     letter = "F";
     letterBg = "bg-purple-500";
+    hashBg = "bg-purple-50";
   } else if (EventFragment.isEventFragment(fragment)) {
+    fragmentType = "event";
     sig = intf.getEventTopic(fragment);
     letter = "E";
     letterBg = "bg-green-300";
+    hashBg = "bg-green-50";
   } else if (ConstructorFragment.isConstructorFragment(fragment)) {
+    fragmentType = "constructor";
     letter = "C";
     letterBg = "bg-blue-500";
   }
@@ -51,7 +58,16 @@ const DecodedFragment: React.FC<DecodedFragmentProps> = ({
         {fragment.format("full")}
       </span>
       {sig && (
-        <span className="text-xs border rounded-xl px-2 pt-1 font-code">
+        <span
+          className={`text-xs border rounded-xl px-2 pt-1 font-code text-gray-600 ${hashBg}`}
+          title={
+            fragmentType === "function"
+              ? "Method Selector"
+              : fragmentType === "event"
+              ? "Topic Hash"
+              : ""
+          }
+        >
           {sig}
         </span>
       )}