More resilient useAbi fetching

components/input/function-params-form.tsx

@@ -70,7 +70,7 @@ export const FunctionParamsForm = ({
   };
 
   return (
-    <div className="w-full overflow-y-auto rounded-r-lg pt-4">
+    <div className="w-full rounded-r-lg pt-4">
       <If true={functionAbi?.inputs.length || 0 > 0}>
         <div className="flex flex-row items-center justify-between border-b border-neutral-200 pb-4">
           <p className="text-md font-semibold text-neutral-800">Parameters</p>

hooks/useAbi.ts

@@ -3,10 +3,10 @@ import { whatsabi } from "@shazow/whatsabi";
 import { usePublicClient } from "wagmi";
 import { AbiFunction } from "abitype";
 import { useQuery } from "@tanstack/react-query";
-import { isAddress, isContract } from "@/utils/evm";
+import { ADDRESS_ZERO, isAddress, isContract } from "@/utils/evm";
 import { PUB_CHAIN, PUB_ETHERSCAN_API_KEY } from "@/constants";
 import { useAlerts } from "@/context/Alerts";
-import { getImplementation, isProxyContract } from "@/utils/proxies";
+import { getImplementation } from "@/utils/proxies";
 import { ChainName } from "@/utils/chains";
 
 const CHAIN_NAME = PUB_CHAIN.name.toLowerCase() as ChainName;
@@ -23,14 +23,13 @@ export const useAbi = (contractAddress: Address) => {
         return null;
       }
 
-      return isProxyContract(publicClient, contractAddress)
-        .then((isProxy) => {
-          if (!isProxy) return null;
-          return getImplementation(publicClient, contractAddress);
+      return getImplementation(publicClient, contractAddress)
+        .then((address) => {
+          if (!address || address === ADDRESS_ZERO) return null;
+          return address;
         })
         .catch(() => null);
     },
-    initialData: null,
     retry: 6,
     refetchOnMount: false,
     refetchOnReconnect: false,

package.json

@@ -36,10 +36,10 @@
     "dompurify": "^3.1.6",
     "libsodium-wrappers": "^0.7.15",
     "multiformats": "^13.2.2",
-    "next": "14.2.6",
-    "react": "^18.3.1",
+    "next": "14.1.4",
+    "react": "18.2.0",
     "react-blockies": "^1.4.1",
-    "react-dom": "^18.3.1",
+    "react-dom": "18.2.0",
     "react-hook-form": "^7.52.1",
     "viem": "^2.19.8",
     "wagmi": "2.12.7"
@@ -57,7 +57,7 @@
     "autoprefixer": "^10.4.19",
     "dotenv": "^16.4.5",
     "eslint": "^8.57.0",
-    "eslint-config-next": "14.2.6",
+    "eslint-config-next": "14.1.4",
     "eslint-config-prettier": "^9.1.0",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.2",

pages/index.tsx

@@ -25,7 +25,7 @@ export default function StandardHome() {
           <div className="flex justify-center">
             <If true={isConnected}>
               <Then>
-                <Button className="mb-2" variant="primary" href="https://devs.aragon.org/docs/osx/" target="_blank">
+                <Button className="mb-2" variant="primary" href="https://devs.aragon.org/" target="_blank">
                   Learn more about OSx
                 </Button>
               </Then>

utils/proxies.ts

@@ -1,7 +1,7 @@
 import { Address, BaseError, ContractFunctionRevertedError, Hex, PublicClient, keccak256, parseAbi, toHex } from "viem";
 import { PUB_CHAIN } from "@/constants";
 
-const proxyAbi1 = parseAbi([
+const proxyAbi = parseAbi([
   "function implementation() external view returns (address)",
   "function proxiableUUID() external view returns (bytes32)",
 ]);
@@ -14,7 +14,7 @@ export function isProxyContract(publicClient: PublicClient, contractAddress: Add
   return publicClient
     .simulateContract({
       address: contractAddress,
-      abi: proxyAbi1,
+      abi: proxyAbi,
       functionName: "implementation",
       args: [],
       chain: PUB_CHAIN,