fix(ui-ux): fix displayed read methods that are actually write methods (

#328)

* fix(ui-ux): fix displayed read methods that are actually write methods

* remove dash in 'work-around'

* replace findindex with some

* replace findindex with some

* use stateMutability to filter read methods

* remove comment

---------

Co-authored-by: pierregee <pierre@cakedefi.com>

src/pages/address/_components/contract/ReadWriteContract.tsx

@@ -1,7 +1,11 @@
-import { useState } from "react";
-import { ContractMethodType } from "@api/types";
+import { useEffect, useState } from "react";
+import {
+  ContractMethodType,
+  SmartContractMethod,
+  StateMutability,
+} from "@api/types";
 import { useNetwork } from "@contexts/NetworkContext";
-import { useGetContractMethodsQuery } from "@store/contract";
+import { useGetContractMethodsMutation } from "@store/contract";
 import { FiLoader } from "react-icons/fi";
 import LinkText from "@components/commons/LinkText";
 import ContractMethod from "./ContractMethod";
@@ -18,14 +22,43 @@ export default function ReadWriteContract({
   addressHash: string;
   implementationAddress: string | null;
 }) {
+  const [isLoading, setIsLoading] = useState(true);
   const [expandAll, setExpandAll] = useState<boolean>(false);
   const [resetForm, setResetForm] = useState<boolean>(false);
   const { connection } = useNetwork();
-  const { data: methods, isLoading } = useGetContractMethodsQuery({
-    network: connection,
-    addressHash,
-    type,
-  });
+  const [trigger] = useGetContractMethodsMutation();
+  const [methods, setMethods] = useState<SmartContractMethod[]>([]);
+
+  const fetchMethods = async () => {
+    setIsLoading(true);
+    const data = await trigger({
+      network: connection,
+      addressHash,
+      type,
+    }).unwrap();
+
+    if (
+      type === ContractMethodType.Read ||
+      type === ContractMethodType.ReadProxy
+    ) {
+      const readMethods = data.filter((method) =>
+        [StateMutability.Pure, StateMutability.View].includes(
+          method.stateMutability
+        )
+      );
+
+      setMethods(readMethods ?? []);
+      setIsLoading(false);
+      return;
+    }
+
+    setMethods(data ?? []);
+    setIsLoading(false);
+  };
+
+  useEffect(() => {
+    fetchMethods();
+  }, []);
 
   // TODO: Add UI loaders
   if (isLoading) {

src/store/contract.ts

@@ -83,7 +83,7 @@ export const contractMethodsApi = createApi({
   reducerPath: "contractMethods",
   baseQuery: fetchBaseQuery({ baseUrl: "/" }),
   endpoints: (builder) => ({
-    getContractMethods: builder.query<
+    getContractMethods: builder.mutation<
       SmartContractMethod[],
       {
         network: NetworkConnection;
@@ -118,5 +118,5 @@ export const contractVerificationApi = createApi({
 });
 
 export const { useGetContractQuery } = contractApi;
-export const { useGetContractMethodsQuery } = contractMethodsApi;
+export const { useGetContractMethodsMutation } = contractMethodsApi;
 export const { useGetVerificationConfigQuery } = contractVerificationApi;