fix: show proposal detail correctly when not having wallet connected

components/proposalActions/proposalActions.tsx

@@ -17,7 +17,7 @@ import { Else, ElseIf, If, Then } from "../if";
 import { useAction } from "@/hooks/useAction";
 import { decodeCamelCase } from "@/utils/case";
 import { formatEther } from "viem";
-import { useAccount } from "wagmi";
+import { getCurrentViemChain } from "@/utils/chains";
 
 const DEFAULT_DESCRIPTION =
   "When the proposal passes the community vote, the following actions will be executable by the DAO.";
@@ -41,7 +41,7 @@ export const ProposalActions: React.FC<IProposalActionsProps> = (props) => {
   }
 
   return (
-    <div className="overflow-hidden  bg-neutral-0 pb-2 shadow-neutral">
+    <div className="overflow-hidden bg-neutral-0 pb-2 shadow-neutral">
       {/* Header */}
       <div className="flex flex-col gap-y-2 px-4 py-4 md:gap-y-3 md:px-6 md:py-6">
         <div className="flex justify-between gap-x-2 gap-y-2">
@@ -77,8 +77,8 @@ const ActionItem = ({ index, rawAction, onRemove }: { index: number; rawAction:
     : decodeCamelCase(action.functionName || "(function call)");
   const functionAbi = action.functionAbi ?? null;
 
-  const { chain } = useAccount();
-  const explorerUrl = `${chain!.blockExplorers?.default.url}/address/${action.to}`;
+  const chain = getCurrentViemChain();
+  const explorerUrl = `${chain?.blockExplorers?.default?.url}/address/${action.to}`;
 
   return (
     <AccordionItem className="border-t border-t-neutral-100 bg-neutral-0" value={title}>

components/proposalVoting/votesDataList/votesDataListItemStructure.tsx

@@ -1,3 +1,4 @@
+import { getCurrentViemChain } from "@/utils/chains";
 import { formatHexString } from "@/utils/evm";
 import { DataListItem, MemberAvatar, Tag, type TagVariant } from "@aragon/gov-ui-kit";
 import classNames from "classnames";
@@ -19,8 +20,9 @@ export interface IVotesDataListItemStructureProps {
 export const VotesDataListItemStructure: React.FC<IVotesDataListItemStructureProps> = (props) => {
   const { address, connectedAccount, delegate, ensAvatar, ensName, variant, className, votingPower, ...otherProps } =
     props;
-  const { chain } = useAccount();
-  const explorerUrl = `${chain!.blockExplorers?.default.url}/address/${address}`;
+
+  const chain = getCurrentViemChain();
+  const explorerUrl = `${chain?.blockExplorers?.default?.url}/address/${address}`;
 
   const label = connectedAccount ? "You" : delegate ? "Your delegate" : null;
 

components/text/address.tsx

@@ -1,21 +1,21 @@
 import { formatHexString } from "@/utils/evm";
 import { getChildrenText } from "@/utils/content";
 import { type ReactNode, useState, useEffect } from "react";
-import { usePublicClient } from "wagmi";
+import { getCurrentViemChain } from "@/utils/chains";
 // import { Link } from '@aragon/gov-ui-kit'
 
 export const AddressText = ({ children, bold }: { children: ReactNode; bold?: boolean }) => {
   const address = getChildrenText(children);
-  const client = usePublicClient();
+  const chain = getCurrentViemChain();
   const [link, setLink] = useState<string>();
 
   const useBold = bold === undefined ? true : bold;
 
   useEffect(() => {
-    if (!client) return;
+    if (!chain) return;
 
-    setLink(`${client.chain.blockExplorers?.default.url}/address/${address}`);
-  }, [address, client]);
+    setLink(`${chain?.blockExplorers?.default?.url}/address/${address}`);
+  }, [address, chain]);
 
   const formattedAddress = formatHexString(address.trim());
   if (!link) {

components/text/transaction.tsx

@@ -1,19 +1,19 @@
 import { formatHexString } from "@/utils/evm";
 import { getChildrenText } from "@/utils/content";
 import { type ReactNode, useState, useEffect } from "react";
-import { usePublicClient } from "wagmi";
+import { getCurrentViemChain } from "@/utils/chains";
 // import { Link } from '@aragon/gov-ui-kit'
 
 export const TransactionText = ({ children }: { children: ReactNode }) => {
   const txHash = getChildrenText(children);
-  const client = usePublicClient();
+  const chain = getCurrentViemChain();
   const [link, setLink] = useState<string>();
 
   useEffect(() => {
-    if (!client) return;
+    if (!chain) return;
 
-    setLink(`${client.chain.blockExplorers?.default.url}/tx/${txHash}`);
-  }, [txHash, client]);
+    setLink(`${chain?.blockExplorers?.default?.url}/tx/${txHash}`);
+  }, [txHash, chain]);
 
   const formattedHexValue = formatHexString(txHash.trim());
   if (!link) {

context/Alerts.tsx

@@ -50,7 +50,7 @@ export const AlertProvider: React.FC<{ children: React.ReactNode }> = ({ childre
       type: alertOptions?.type ?? "info",
     };
     if (alertOptions?.txHash && client) {
-      newAlert.explorerLink = client.chain.blockExplorers?.default.url + "/tx/" + alertOptions.txHash;
+      newAlert.explorerLink = client?.chain?.blockExplorers?.default.url + "/tx/" + alertOptions.txHash;
     }
     const timeout = alertOptions?.timeout ?? DEFAULT_ALERT_TIMEOUT;
     newAlert.dismissTimeout = setTimeout(() => removeAlert(newAlert.id), timeout);

hooks/useAbi.ts

@@ -7,14 +7,15 @@ import { ADDRESS_ZERO, isAddress, isContract } from "@/utils/evm";
 import { PUB_ETHERSCAN_API_KEY } from "@/constants";
 import { useAlerts } from "@/context/Alerts";
 import { getImplementation } from "@/utils/proxies";
-import { ChainName, getChainIdTypesafe } from "@/utils/chains";
+import { ChainName, getChainIdTypesafe, useChainIdTypesafe } from "@/utils/chains";
 
 export const useAbi = (contractAddress: Address) => {
   const { addAlert } = useAlerts();
   const publicClient = usePublicClient();
+  const chainId = useChainIdTypesafe();
 
   const { data: implementationAddress, isLoading: isLoadingImpl } = useQuery<Address | null>({
-    queryKey: ["proxy-check", contractAddress, publicClient?.chain.id],
+    queryKey: ["proxy-check", contractAddress, chainId],
     queryFn: () => {
       if (!contractAddress || !publicClient) return null;
       else if (!isAddress(contractAddress) || !publicClient) {
@@ -42,7 +43,7 @@ export const useAbi = (contractAddress: Address) => {
     isLoading,
     error,
   } = useQuery<AbiFunction[], Error>({
-    queryKey: ["abi", resolvedAddress || "", publicClient?.chain.id],
+    queryKey: ["abi", resolvedAddress || "", chainId],
     queryFn: async () => {
       if (!resolvedAddress || !isAddress(resolvedAddress) || !publicClient) {
         return [];