feat(ExecutionCode): added useCeloExplorer() hook

this will dynamically load the righ celo explorer
api url depending on the current chain id

app/(routes)/proposals/[id]/_components/execution-code.component.tsx

@@ -1,10 +1,10 @@
 import BlockExplorerLink from "@/app/components/_shared/block-explorer-link/block-explorer-link.component";
-
 import {
   GetContractsInfo,
   type GetContractsInfoQuery,
   type ProposalCall,
 } from "@/app/graphql";
+import { useCeloExplorerApi } from "@/app/hooks/useCeloExplorer";
 import { useQuery } from "@apollo/experimental-nextjs-app-support/ssr";
 import { useMemo } from "react";
 import { decodeFunctionData } from "viem";
@@ -21,11 +21,13 @@ type ContractInfo = {
 };
 
 export default function ExecutionCode({ calls }: Props) {
+  const { name: apiName } = useCeloExplorerApi();
+
   const { data, error: apolloError } = useQuery(GetContractsInfo, {
     variables: {
       addresses: calls.map((call) => call.target.id),
     },
-    context: { apiName: "celoExplorer" },
+    context: { apiName },
     skip: !calls.length,
   });
 

app/hooks/useCeloExplorer.ts

@@ -0,0 +1,41 @@
+import { useChainId } from "wagmi";
+import loadEnvVar from "../helpers/load-env-var";
+
+const CELO_EXPLORER_API_URL = loadEnvVar(
+  process.env.NEXT_PUBLIC_CELO_EXPLORER_API_URL,
+);
+const CELO_EXPLORER_API_URL_ALFAJORES = loadEnvVar(
+  process.env.NEXT_PUBLIC_CELO_EXPLORER_API_URL_ALFAJORES,
+);
+const CELO_EXPLORER_API_URL_BAKLAVA = loadEnvVar(
+  process.env.NEXT_PUBLIC_CELO_EXPLORER_API_URL_BAKLAVA,
+);
+
+type CeloExplorerApi = {
+  name: "celoExplorer" | "celoExplorerAlfajores" | "celoExplorerBaklava";
+  url: string;
+};
+
+export const useCeloExplorerApi = (): CeloExplorerApi => {
+  const chainId = useChainId();
+  let result: CeloExplorerApi = {
+    name: "celoExplorer",
+    url: CELO_EXPLORER_API_URL,
+  };
+
+  if (chainId === 44787) {
+    result = {
+      name: "celoExplorerAlfajores",
+      url: CELO_EXPLORER_API_URL_ALFAJORES,
+    };
+  }
+
+  if (chainId === 62320) {
+    result = {
+      name: "celoExplorerBaklava",
+      url: CELO_EXPLORER_API_URL_BAKLAVA,
+    };
+  }
+
+  return result;
+};