First working version of non-verified contract topic0 decoder

src/transaction/LogEntry.tsx

@@ -1,6 +1,6 @@
-import React, { Fragment } from "react";
+import React, { useMemo } from "react";
 import { Log } from "@ethersproject/abstract-provider";
-import { LogDescription } from "@ethersproject/abi";
+import { Fragment, Interface, LogDescription } from "@ethersproject/abi";
 import { Tab } from "@headlessui/react";
 import AddressHighlighter from "../components/AddressHighlighter";
 import DecoratedAddressLink from "../components/DecoratedAddressLink";
@@ -9,6 +9,7 @@ import ModeTab from "../components/ModeTab";
 import DecodedParamsTable from "./decoder/DecodedParamsTable";
 import DecodedLogSignature from "./decoder/DecodedLogSignature";
 import { TransactionData } from "../types";
+import { useTopic0 } from "../useTopic0";
 
 type LogEntryProps = {
   txData: TransactionData;
@@ -16,101 +17,126 @@ type LogEntryProps = {
   logDesc: LogDescription | null | undefined;
 };
 
-const LogEntry: React.FC<LogEntryProps> = ({ txData, log, logDesc }) => (
-  <div className="flex space-x-10 py-5">
-    <div>
-      <span className="rounded-full w-12 h-12 flex items-center justify-center bg-green-50 text-green-500">
-        {log.logIndex}
-      </span>
-    </div>
-    <div className="w-full space-y-2">
-      <div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm">
-        <div className="font-bold text-right">Address</div>
-        <div className="col-span-11 mr-auto">
-          <div className="flex items-baseline space-x-2 -ml-1 mr-3">
-            <AddressHighlighter address={log.address}>
-              <DecoratedAddressLink
-                address={log.address}
-                miner={log.address === txData.confirmedData?.miner}
-                txFrom={log.address === txData.from}
-                txTo={log.address === txData.to}
-              />
-            </AddressHighlighter>
-            <Copy value={log.address} />
+const LogEntry: React.FC<LogEntryProps> = ({ txData, log, logDesc }) => {
+  const rawTopic0 = log.topics[0];
+  const topic0 = useTopic0(rawTopic0);
+
+  const topic0LogDesc = useMemo(() => {
+    if (!topic0?.signature) {
+      return undefined;
+    }
+    const sig = topic0.signature;
+    const logFragment = Fragment.fromString(`event ${sig}`);
+    const intf = new Interface([logFragment]);
+    try {
+      return intf.parseLog(log);
+    } catch (err) {
+      // TODO: try other indexed/non-indexed combinations?
+      console.error(err);
+      return undefined;
+    }
+  }, [topic0, log]);
+
+  const resolvedLogDesc = logDesc ?? topic0LogDesc;
+
+  return (
+    <div className="flex space-x-10 py-5">
+      <div>
+        <span className="rounded-full w-12 h-12 flex items-center justify-center bg-green-50 text-green-500">
+          {log.logIndex}
+        </span>
+      </div>
+      <div className="w-full space-y-2">
+        <div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm">
+          <div className="font-bold text-right">Address</div>
+          <div className="col-span-11 mr-auto">
+            <div className="flex items-baseline space-x-2 -ml-1 mr-3">
+              <AddressHighlighter address={log.address}>
+                <DecoratedAddressLink
+                  address={log.address}
+                  miner={log.address === txData.confirmedData?.miner}
+                  txFrom={log.address === txData.from}
+                  txTo={log.address === txData.to}
+                />
+              </AddressHighlighter>
+              <Copy value={log.address} />
+            </div>
           </div>
         </div>
-      </div>
-      <Tab.Group>
-        <Tab.List className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm">
-          <div className="text-right">Parameters</div>
-          <div className="col-span-11 flex space-x-1 mb-1">
-            <ModeTab>Decoded</ModeTab>
-            <ModeTab>Raw</ModeTab>
-          </div>
-        </Tab.List>
-        <Tab.Panels as={Fragment}>
-          <Tab.Panel className="space-y-2">
-            {logDesc === undefined ? (
-              <div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm">
-                <div className="col-start-2 flex space-x-2 items-center col-span-11">
-                  Waiting for data...
-                </div>
-              </div>
-            ) : logDesc === null ? (
-              <div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm">
-                <div className="col-start-2 flex space-x-2 items-center col-span-11">
-                  No decoded data
-                </div>
-              </div>
-            ) : (
-              <>
-                <div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm">
-                  <div className="col-start-2 flex space-x-2 items-center col-span-11 font-mono">
-                    <DecodedLogSignature event={logDesc.eventFragment} />
-                  </div>
-                </div>
+        <Tab.Group>
+          <Tab.List className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm">
+            <div className="text-right">Parameters</div>
+            <div className="col-span-11 flex space-x-1 mb-1">
+              <ModeTab>Decoded</ModeTab>
+              <ModeTab>Raw</ModeTab>
+            </div>
+          </Tab.List>
+          <Tab.Panels as={React.Fragment}>
+            <Tab.Panel className="space-y-2">
+              {resolvedLogDesc === undefined ? (
                 <div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm">
                   <div className="col-start-2 flex space-x-2 items-center col-span-11">
-                    <DecodedParamsTable
-                      args={logDesc.args}
-                      paramTypes={logDesc.eventFragment.inputs}
-                      txData={txData}
-                    />
+                    Waiting for data...
                   </div>
                 </div>
-              </>
-            )}
-          </Tab.Panel>
-          <Tab.Panel className="space-y-2">
-            {log.topics.map((t, i) => (
-              <div
-                className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm"
-                key={i}
-              >
-                <div className="text-right">{i === 0 && "Topics"}</div>
-                <div className="flex space-x-2 items-center col-span-11 font-mono">
-                  <span className="rounded bg-gray-100 text-gray-500 px-2 py-1 text-xs">
-                    {i}
-                  </span>
-                  <span>{t}</span>
+              ) : resolvedLogDesc === null ? (
+                <div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm">
+                  <div className="col-start-2 flex space-x-2 items-center col-span-11">
+                    No decoded data
+                  </div>
+                </div>
+              ) : (
+                <>
+                  <div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm">
+                    <div className="col-start-2 flex space-x-2 items-center col-span-11 font-mono">
+                      <DecodedLogSignature
+                        event={resolvedLogDesc.eventFragment}
+                      />
+                    </div>
+                  </div>
+                  <div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm">
+                    <div className="col-start-2 flex space-x-2 items-center col-span-11">
+                      <DecodedParamsTable
+                        args={resolvedLogDesc.args}
+                        paramTypes={resolvedLogDesc.eventFragment.inputs}
+                        txData={txData}
+                      />
+                    </div>
+                  </div>
+                </>
+              )}
+            </Tab.Panel>
+            <Tab.Panel className="space-y-2">
+              {log.topics.map((t, i) => (
+                <div
+                  className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm"
+                  key={i}
+                >
+                  <div className="text-right">{i === 0 && "Topics"}</div>
+                  <div className="flex space-x-2 items-center col-span-11 font-mono">
+                    <span className="rounded bg-gray-100 text-gray-500 px-2 py-1 text-xs">
+                      {i}
+                    </span>
+                    <span>{t}</span>
+                  </div>
+                </div>
+              ))}
+              <div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm">
+                <div className="text-right pt-2">Data</div>
+                <div className="col-span-11">
+                  <textarea
+                    className="w-full h-40 bg-gray-50 font-mono focus:outline-none border rounded p-2"
+                    value={log.data}
+                    readOnly
+                  />
                 </div>
               </div>
-            ))}
-            <div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm">
-              <div className="text-right pt-2">Data</div>
-              <div className="col-span-11">
-                <textarea
-                  className="w-full h-40 bg-gray-50 font-mono focus:outline-none border rounded p-2"
-                  value={log.data}
-                  readOnly
-                />
-              </div>
-            </div>
-          </Tab.Panel>
-        </Tab.Panels>
-      </Tab.Group>
+            </Tab.Panel>
+          </Tab.Panels>
+        </Tab.Group>
+      </div>
     </div>
-  </div>
-);
+  );
+};
 
 export default React.memo(LogEntry);

src/url.ts

@@ -5,6 +5,9 @@ export const fourBytesURL = (
   fourBytes: string
 ): string => `${assetsURLPrefix}/signatures/${fourBytes}`;
 
+export const topic0URL = (assetsURLPrefix: string, topic0: string): string =>
+  `${assetsURLPrefix}/topic0/${topic0}`;
+
 export const tokenLogoURL = (
   assetsURLPrefix: string,
   address: string

src/useTopic0.ts

@@ -0,0 +1,76 @@
+import { useState, useEffect, useContext } from "react";
+import { RuntimeContext } from "./useRuntime";
+import { topic0URL } from "./url";
+
+export type Topic0Entry = {
+  signature: string | undefined;
+};
+
+const fullCache = new Map<string, Topic0Entry | null>();
+
+/**
+ * Extract topic0 DB info
+ *
+ * @param rawTopic0 an hex string containing the keccak256 of event signature
+ */
+export const useTopic0 = (
+  rawTopic0: string
+): Topic0Entry | null | undefined => {
+  if (rawTopic0.length !== 66 || !rawTopic0.startsWith("0x")) {
+    throw new Error(
+      `rawTopic0 must contain a 32 bytes hex event signature starting with 0x; received value: "${rawTopic0}"`
+    );
+  }
+
+  const runtime = useContext(RuntimeContext);
+  const assetsURLPrefix = runtime.config?.assetsURLPrefix;
+
+  const topic0 = rawTopic0.slice(2);
+  const [entry, setEntry] = useState<Topic0Entry | null | undefined>(
+    fullCache.get(topic0)
+  );
+  useEffect(() => {
+    if (assetsURLPrefix === undefined) {
+      return;
+    }
+
+    const signatureURL = topic0URL(assetsURLPrefix, topic0);
+    fetch(signatureURL)
+      .then(async (res) => {
+        if (!res.ok) {
+          console.error(`Signature does not exist in topic0 DB: ${topic0}`);
+          fullCache.set(topic0, null);
+          setEntry(null);
+          return;
+        }
+
+        // Get only the first occurrence, for now ignore alternative param names
+        const sig = await res.text();
+        const entry: Topic0Entry = {
+          signature: sig,
+        };
+        setEntry(entry);
+        fullCache.set(topic0, entry);
+      })
+      .catch((err) => {
+        console.error(`Couldn't fetch signature URL ${signatureURL}`, err);
+        setEntry(null);
+        fullCache.set(topic0, null);
+      });
+  }, [topic0, assetsURLPrefix]);
+
+  if (assetsURLPrefix === undefined) {
+    return undefined;
+  }
+
+  // Try to resolve topic0 name
+  if (entry === null || entry === undefined) {
+    return entry;
+  }
+
+  // Simulates LRU
+  // TODO: implement LRU purging
+  fullCache.delete(topic0);
+  fullCache.set(topic0, entry);
+  return entry;
+};