feat: update display of transaction method selectors to human readable names

packages/app/src/components/TheFooter.vue

@@ -24,7 +24,7 @@ const config = useRuntimeConfig();
 const navigation = reactive([
   {
     label: computed(() => t("footer.nav.docs")),
-    url: "https://docs.zksync.io/build/tooling/zksync-block-explorers",
+    url: "https://docs.zksync.io/zksync-era/tooling/block-explorers",
   },
   {
     label: computed(() => t("footer.nav.terms")),

packages/app/src/components/header/TheHeader.vue

@@ -159,7 +159,7 @@ const { currentNetwork } = useContext();
 const navigation = reactive([
   {
     label: computed(() => t("header.nav.documentation")),
-    url: "https://docs.zksync.io/build/tooling/zksync-block-explorers",
+    url: "https://docs.zksync.io/zksync-era/tooling/block-explorers",
   },
 ]);
 

packages/app/src/components/transactions/Table.vue

@@ -58,9 +58,13 @@
         </span>
       </TableBodyColumn>
       <TableBodyColumn v-if="columns.includes('method')" :data-heading="t('transactions.table.method')">
-        <div class="transactions-data-method">
-          <span :data-testid="$testId.transactionsMethodName">{{ item.methodName }}</span>
-        </div>
+        <Tooltip>
+          <div class="transactions-data-method">
+            <span :data-testid="$testId.transactionsMethodName">{{ item.methodName }}</span>
+          </div>
+
+          <template #content>{{ item.methodName }}</template>
+        </Tooltip>
       </TableBodyColumn>
       <TableBodyColumn
         v-if="columns.includes('age') && columns.length < 10"
@@ -199,6 +203,7 @@ import Badge from "@/components/common/Badge.vue";
 import CopyButton from "@/components/common/CopyButton.vue";
 import { shortenFitText } from "@/components/common/HashLabel.vue";
 import Pagination from "@/components/common/Pagination.vue";
+import Tooltip from "@/components/common/Tooltip.vue";
 import ContentLoader from "@/components/common/loaders/ContentLoader.vue";
 import Table from "@/components/common/table/Table.vue";
 import TableBodyColumn from "@/components/common/table/TableBodyColumn.vue";
@@ -211,6 +216,7 @@ import TransactionDirectionTableCell from "@/components/transactions/Transaction
 import TransactionNetworkSquareBlock from "@/components/transactions/TransactionNetworkSquareBlock.vue";
 
 import useContext from "@/composables/useContext";
+import { fetchMethodNames } from "@/composables/useOpenChain";
 import useToken, { type Token } from "@/composables/useToken";
 import { decodeDataWithABI } from "@/composables/useTransactionData";
 import useTransactions, { type TransactionListItem, type TransactionSearchParams } from "@/composables/useTransactions";
@@ -271,23 +277,46 @@ watch(
   { immediate: true }
 );
 
-const getTransactionMethod = (transaction: TransactionListItem) => {
+const methodNames = ref<Record<string, string>>({});
+
+const loadMethodNames = async () => {
+  if (!data.value) return;
+
+  const uniqueSighashes = [
+    ...new Set(
+      data.value?.map((transaction) => transaction.data.slice(0, 10)).filter((sighash) => sighash !== "0x") ?? []
+    ),
+  ];
+  const fetchedMethodNames = await fetchMethodNames(uniqueSighashes);
+  methodNames.value = { ...methodNames.value, ...fetchedMethodNames };
+};
+
+watch(
+  data,
+  async (newData) => {
+    if (!newData) return;
+
+    await loadMethodNames();
+  },
+  { immediate: true }
+);
+
+const getTransactionMethod = (transaction: TransactionListItem, methodNames: Record<string, string>) => {
   if (transaction.data === "0x") {
     return t("transactions.table.transferMethodName");
   }
   const sighash = transaction.data.slice(0, 10);
   if (props.contractAbi) {
-    return (
-      decodeDataWithABI(
-        {
-          calldata: transaction.data,
-          value: transaction.value,
-        },
-        props.contractAbi
-      )?.name ?? sighash
+    const decodedMethod = decodeDataWithABI(
+      { calldata: transaction.data, value: transaction.value },
+      props.contractAbi
     );
+    if (decodedMethod?.name) {
+      return decodedMethod.name;
+    }
   }
-  return sighash;
+
+  return methodNames[sighash] ?? sighash;
 };
 
 type TransactionListItemMapped = TransactionListItem & {
@@ -301,7 +330,7 @@ type TransactionListItemMapped = TransactionListItem & {
 const transactions = computed<TransactionListItemMapped[] | undefined>(() => {
   return data.value?.map((transaction) => ({
     ...transaction,
-    methodName: getTransactionMethod(transaction),
+    methodName: getTransactionMethod(transaction, methodNames.value),
     fromNetwork: transaction.isL1Originated ? "L1" : "L2",
     toNetwork: "L2", // even withdrawals go through L2 addresses (800A or bridge addresses)
     statusColor: transaction.status === "failed" ? "danger" : "dark-success",
@@ -432,7 +461,7 @@ function getDirection(item: TransactionListItem): Direction {
     }
   }
   .transactions-data-method {
-    @apply w-[200px] truncate sm:w-auto;
+    @apply w-36 truncate border-slate-200 rounded border py-0.5 px-2 text-center bg-slate-400/10 text-xs text-slate-600 sm:w-28;
   }
   .transactions-data-transaction-amount,
   .transactions-data-age {

packages/app/src/composables/useOpenChain.ts

@@ -0,0 +1,42 @@
+import { $fetch } from "ohmyfetch";
+
+interface OpenChainMethod {
+  name: string;
+  filtered: boolean;
+}
+interface OpenChainResponse {
+  ok: boolean;
+  result: {
+    function: Record<string, OpenChainMethod[]>;
+  };
+}
+export async function fetchMethodNames(sighashes: string[]): Promise<Record<string, string>> {
+  try {
+    const response = await $fetch<OpenChainResponse>("https://api.openchain.xyz/signature-database/v1/lookup", {
+      method: "GET",
+      params: {
+        function: sighashes.join(","),
+        filter: true,
+      },
+      headers: {
+        accept: "application/json",
+      },
+    });
+    const result = response?.result?.function ?? {};
+    const methodNames: Record<string, string> = {};
+    Object.entries(result).forEach(([sighash, methods]) => {
+      // Ensure methods is an array of the expected shape
+      if (Array.isArray(methods)) {
+        methods.forEach((method) => {
+          if (typeof method === "object" && method.name && method.name.split("(").length > 1) {
+            methodNames[sighash] = method.name.split("(")[0];
+          }
+        });
+      }
+    });
+    return methodNames;
+  } catch (error) {
+    console.error("Error fetching method names:", error);
+    return {};
+  }
+}

packages/app/tests/components/TheFooter.spec.ts

@@ -24,7 +24,7 @@ describe("TheFooter:", () => {
       },
     });
     const links = wrapper.findAll("a");
-    expect(links[0].attributes("href")).toBe("https://docs.zksync.io/build/tooling/zksync-block-explorers");
+    expect(links[0].attributes("href")).toBe("https://docs.zksync.io/zksync-era/tooling/block-explorers");
     expect(links[1].attributes("href")).toBe("https://zksync.io/terms");
     expect(links[2].attributes("href")).toBe("https://zksync.io/contact");
   });

packages/app/tests/components/TheHeader.spec.ts

@@ -62,7 +62,7 @@ describe("TheHeader:", () => {
     expect(toolsLinks[2].attributes("href")).toBe("https://bridge.zksync.io/");
 
     expect(wrapper.findAll(".navigation-container > .navigation-link")[0].attributes("href")).toBe(
-      "https://docs.zksync.io/build/tooling/zksync-block-explorers"
+      "https://docs.zksync.io/zksync-era/tooling/block-explorers"
     );
   });
   it("renders social links", () => {

packages/app/tests/e2e/features/redirection/redirectionSet1.feature

@@ -13,7 +13,7 @@ Feature: Redirection
 
     Examples:
       | Extra button name | url                                     |
-      | Docs              | https://docs.zksync.io/build/tooling/zksync-block-explorers         |
+      | Docs              | https://docs.zksync.io/zksync-era/tooling/block-explorers         |
       | Terms             | https://zksync.io/terms                 |
       | Contact           | https://zksync.io/contact      |
 
@@ -32,7 +32,7 @@ Feature: Redirection
   @id251
   Scenario: Verify redirection for Documentation link
     Given I click by text "Documentation"
-    Then New page have "https://docs.zksync.io/build/tooling/zksync-block-explorers" address
+    Then New page have "https://docs.zksync.io/zksync-era/tooling/block-explorers" address
 
   @id252
   Scenario Outline: Verify redirection for "<Sub-Section>" in BE menu