fix: move openchain api to the seperate hook

matter-labs · Dec 12, 2024 · edcabe0 · edcabe0
1 parent c0e0021
commit edcabe0
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 46 deletions.
diff --git a/packages/app/src/components/transactions/Table.vue b/packages/app/src/components/transactions/Table.vue
@@ -218,6 +218,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";
@@ -278,52 +279,6 @@ watch(
   { immediate: true }
 );
 
-interface OpenChainMethod {
-  name: string;
-  filtered: boolean;
-}
-
-interface OpenChainResponse {
-  ok: boolean;
-  result: {
-    function: Record<string, OpenChainMethod[]>;
-  };
-}
-
-const fetchMethodNames = async (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 {};
-  }
-};
-
 const methodNames = ref<Record<string, string>>({});
 
 const loadMethodNames = async () => {

diff --git a/packages/app/src/composables/useOpenChain.ts b/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 {};
+  }
+}