[ENG-113 | Public Client] Swap wagmi's usePublicClient with custom client

src/components/DAOTreasury/hooks/useTreasuryLidoInteractions.ts

@@ -1,8 +1,8 @@
 import { useEffect, useState } from 'react';
 import { getContract } from 'viem';
-import { usePublicClient } from 'wagmi';
 import LidoWithdrawalQueueAbi from '../../../assets/abi/LidoWithdrawalQueueAbi';
 import useLidoStaking from '../../../hooks/stake/lido/useLidoStaking';
+import useNetworkPublicClient from '../../../hooks/useNetworkPublicClient';
 import { useCanUserCreateProposal } from '../../../hooks/utils/useCanUserSubmitProposal';
 import { useFractal } from '../../../providers/App/AppProvider';
 import { useNetworkConfigStore } from '../../../providers/NetworkConfig/useNetworkConfigStore';
@@ -17,7 +17,7 @@ export default function useTreasuryLidoInteractions() {
   const { handleUnstake, handleClaimUnstakedETH } = useLidoStaking();
   const { canUserCreateProposal } = useCanUserCreateProposal();
   const { staking } = useNetworkConfigStore();
-  const publicClient = usePublicClient();
+  const publicClient = useNetworkPublicClient();
 
   // --- Lido Stake button setup ---
   const showStakeButton =
@@ -48,7 +48,7 @@ export default function useTreasuryLidoInteractions() {
 
   useEffect(() => {
     const getLidoClaimableStatus = async () => {
-      if (!staking.lido?.withdrawalQueueContractAddress || !lidoWithdrawalNFT || !publicClient) {
+      if (!staking.lido?.withdrawalQueueContractAddress || !lidoWithdrawalNFT) {
         return;
       }
 

src/components/DaoDashboard/ERC20Claim.tsx

@@ -3,8 +3,9 @@ import { abis } from '@fractal-framework/fractal-contracts';
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { getContract } from 'viem';
-import { useAccount, usePublicClient, useWalletClient } from 'wagmi';
+import { useAccount, useWalletClient } from 'wagmi';
 import { Alert as AlertIcon } from '../../assets/theme/custom/icons/Alert';
+import useNetworkPublicClient from '../../hooks/useNetworkPublicClient';
 import { useTransaction } from '../../hooks/utils/useTransaction';
 import { useFractal } from '../../providers/App/AppProvider';
 import { AzoriusGovernance } from '../../types';
@@ -19,11 +20,11 @@ export function ERCO20Claim() {
   const { t } = useTranslation(['dashboard', 'transaction']);
   const [contractCall, pending] = useTransaction();
   const azoriusGovernance = governance as AzoriusGovernance;
-  const publicClient = usePublicClient();
+  const publicClient = useNetworkPublicClient();
   const { data: walletClient } = useWalletClient();
 
   const loadClaim = useCallback(async () => {
-    if (!tokenClaimContractAddress || !type || !account || !publicClient) {
+    if (!tokenClaimContractAddress || !type || !account) {
       return;
     }
     const tokenClaimContract = getContract({

src/components/DaoDashboard/Info/InfoGovernance.tsx

@@ -4,7 +4,8 @@ import { Bank } from '@phosphor-icons/react';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { getContract } from 'viem';
-import { usePublicClient } from 'wagmi';
+
+import useNetworkPublicClient from '../../../hooks/useNetworkPublicClient';
 import { useTimeHelpers } from '../../../hooks/utils/useTimeHelpers';
 import { useFractal } from '../../../providers/App/AppProvider';
 import { useDaoInfoStore } from '../../../store/daoInfo/useDaoInfoStore';
@@ -19,7 +20,7 @@ export function InfoGovernance({ showTitle = true }: { showTitle?: boolean }) {
     guardContracts: { freezeGuardType, freezeGuardContractAddress },
   } = useFractal();
   const { safe } = useDaoInfoStore();
-  const publicClient = usePublicClient();
+  const publicClient = useNetworkPublicClient();
   const { getTimeDuration } = useTimeHelpers();
   const [timelockPeriod, setTimelockPeriod] = useState<string>();
   const [executionPeriod, setExecutionPeriod] = useState<string>();
@@ -28,11 +29,9 @@ export function InfoGovernance({ showTitle = true }: { showTitle?: boolean }) {
 
   useEffect(() => {
     const setTimelockInfo = async () => {
-      const formatBlocks = async (blocks: number): Promise<string | undefined> => {
-        if (publicClient) {
-          return getTimeDuration(await blocksToSeconds(blocks, publicClient));
-        }
-      };
+      const formatBlocks = async (blocks: number): Promise<string | undefined> =>
+        getTimeDuration(await blocksToSeconds(blocks, publicClient));
+
       if (freezeGuardType == FreezeGuardType.MULTISIG) {
         if (freezeGuardContractAddress && publicClient) {
           const freezeGuardContract = getContract({

src/components/DaoHierarchy/DaoHierarchyNode.tsx

@@ -6,11 +6,11 @@ import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link as RouterLink } from 'react-router-dom';
 import { Address, getContract, zeroAddress } from 'viem';
-import { usePublicClient } from 'wagmi';
 import { DAOQueryDocument } from '../../../.graphclient';
 import { SENTINEL_ADDRESS } from '../../constants/common';
 import { DAO_ROUTES } from '../../constants/routes';
 import { useDecentModules } from '../../hooks/DAO/loaders/useDecentModules';
+import useNetworkPublicClient from '../../hooks/useNetworkPublicClient';
 import { CacheKeys } from '../../hooks/utils/cache/cacheDefaults';
 import { setValue, getValue } from '../../hooks/utils/cache/useLocalStorage';
 import { useAddressContractType } from '../../hooks/utils/useAddressContractType';
@@ -44,7 +44,7 @@ export function DaoHierarchyNode({
   const [hierarchyNode, setHierarchyNode] = useState<DaoHierarchyInfo>();
   const [hasErrorLoading, setErrorLoading] = useState<boolean>(false);
   const { addressPrefix, subgraph, chain } = useNetworkConfigStore();
-  const publicClient = usePublicClient();
+  const publicClient = useNetworkPublicClient();
 
   const { getAddressContractType } = useAddressContractType();
   const lookupModules = useDecentModules();
@@ -59,10 +59,6 @@ export function DaoHierarchyNode({
 
   const getVotingStrategies = useCallback(
     async (azoriusModule: DecentModule) => {
-      if (!publicClient) {
-        throw new Error('Public Client is not set!');
-      }
-
       const azoriusContract = getContract({
         abi: abis.Azorius,
         address: azoriusModule.moduleAddress,
@@ -98,10 +94,6 @@ export function DaoHierarchyNode({
         throw new Error('No voting strategies found');
       }
 
-      if (!publicClient) {
-        throw new Error('Public Client is not set!');
-      }
-
       let governanceTypes: DaoHierarchyStrategyType[] = [];
 
       await Promise.all(
@@ -125,7 +117,7 @@ export function DaoHierarchyNode({
       );
       return governanceTypes.filter((value, index, self) => self.indexOf(value) === index);
     },
-    [getVotingStrategies, publicClient],
+    [getVotingStrategies],
   );
 
   const loadDao = useCallback(

src/components/Proposals/ProposalSummary.tsx

@@ -5,8 +5,9 @@ import { formatInTimeZone } from 'date-fns-tz';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { erc721Abi, getContract } from 'viem';
-import { useAccount, usePublicClient } from 'wagmi';
+import { useAccount } from 'wagmi';
 import { TOOLTIP_MAXW } from '../../constants/common';
+import useNetworkPublicClient from '../../hooks/useNetworkPublicClient';
 import useBlockTimestamp from '../../hooks/utils/useBlockTimestamp';
 import { useFractal } from '../../providers/App/AppProvider';
 import { AzoriusGovernance, AzoriusProposal, GovernanceType } from '../../types';
@@ -58,10 +59,10 @@ export function AzoriusProposalSummary({ proposal }: { proposal: AzoriusProposal
 
   const toggleShowVotingPower = () => setShowVotingPower(prevState => !prevState);
 
-  const publicClient = usePublicClient();
+  const publicClient = useNetworkPublicClient();
 
   const getErc721VotingWeight = useCallback(async () => {
-    if (!address || !azoriusGovernance.erc721Tokens || !publicClient) {
+    if (!address || !azoriusGovernance.erc721Tokens) {
       return 0n;
     }
     const userVotingWeight = (
@@ -88,7 +89,7 @@ export function AzoriusProposalSummary({ proposal }: { proposal: AzoriusProposal
 
   useEffect(() => {
     async function loadProposalVotingWeight() {
-      if (address && publicClient) {
+      if (address) {
         if (isERC20) {
           const strategyContract = getContract({
             abi: abis.LinearERC20Voting,

src/components/Proposals/ProposalVotes/context/VoteContext.tsx

@@ -10,9 +10,10 @@ import {
   useState,
 } from 'react';
 import { Address, erc721Abi, getContract } from 'viem';
-import { useAccount, usePublicClient } from 'wagmi';
+import { useAccount } from 'wagmi';
 import useSnapshotProposal from '../../../../hooks/DAO/loaders/snapshot/useSnapshotProposal';
 import useUserERC721VotingTokens from '../../../../hooks/DAO/proposal/useUserERC721VotingTokens';
+import useNetworkPublicClient from '../../../../hooks/useNetworkPublicClient';
 import { useFractal } from '../../../../providers/App/AppProvider';
 import { useDaoInfoStore } from '../../../../store/daoInfo/useDaoInfoStore';
 import {
@@ -67,7 +68,7 @@ export function VoteContextProvider({
   const { loadVotingWeight } = useSnapshotProposal(proposal as SnapshotProposal);
   const { remainingTokenIds } = useUserERC721VotingTokens(null, proposal.proposalId, true);
   const { snapshotProposal } = useSnapshotProposal(proposal);
-  const publicClient = usePublicClient();
+  const publicClient = useNetworkPublicClient();
 
   const getHasVoted = useCallback(() => {
     setHasVotedLoading(true);
@@ -101,7 +102,7 @@ export function VoteContextProvider({
   const erc721VotingWeight = useCallback(async () => {
     const account = userAccount.address;
     const azoriusGovernance = governance as AzoriusGovernance;
-    if (!account || !azoriusGovernance.erc721Tokens || !publicClient) {
+    if (!account || !azoriusGovernance.erc721Tokens) {
       return 0n;
     }
     const userVotingWeight = (
@@ -123,7 +124,7 @@ export function VoteContextProvider({
   const getCanVote = useCallback(async () => {
     setCanVoteLoading(true);
     let newCanVote = false;
-    if (userAccount.address && publicClient) {
+    if (userAccount.address) {
       if (snapshotProposal) {
         const votingWeightData = await loadVotingWeight();
         newCanVote = votingWeightData.votingWeight >= 1;

src/components/Roles/RolePaymentDetails.tsx

@@ -5,9 +5,10 @@ import { TouchEvent, useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { Address, getAddress, Hex } from 'viem';
-import { useAccount, usePublicClient } from 'wagmi';
+import { useAccount } from 'wagmi';
 import { DETAILS_BOX_SHADOW } from '../../constants/common';
 import { DAO_ROUTES } from '../../constants/routes';
+import useNetworkPublicClient from '../../hooks/useNetworkPublicClient';
 import { useNetworkConfigStore } from '../../providers/NetworkConfig/useNetworkConfigStore';
 import { useDaoInfoStore } from '../../store/daoInfo/useDaoInfoStore';
 import { useRolesStore } from '../../store/roles/useRolesStore';
@@ -145,7 +146,7 @@ export function RolePaymentDetails({
   const { addressPrefix } = useNetworkConfigStore();
   const { refreshWithdrawableAmount } = useRolesStore();
   const navigate = useNavigate();
-  const publicClient = usePublicClient();
+  const publicClient = useNetworkPublicClient();
   const canWithdraw = useMemo(() => {
     if (
       connectedAccount &&
@@ -162,13 +163,7 @@ export function RolePaymentDetails({
   }, [payment.endDate, roleTerms]);
 
   const [modalType, props] = useMemo(() => {
-    if (
-      !payment.streamId ||
-      !payment.contractAddress ||
-      !roleHatWearerAddress ||
-      !publicClient ||
-      !roleHatId
-    ) {
+    if (!payment.streamId || !payment.contractAddress || !roleHatWearerAddress || !roleHatId) {
       return [ModalType.NONE] as const;
     }
     let recipient = roleHatWearerAddress;

src/components/Roles/forms/RoleFormTerms.tsx

@@ -17,8 +17,8 @@ import { useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { toast } from 'sonner';
 import { getAddress, Hex } from 'viem';
-import { usePublicClient } from 'wagmi';
 import { DETAILS_BOX_SHADOW } from '../../../constants/common';
+import useNetworkPublicClient from '../../../hooks/useNetworkPublicClient';
 import { useRolesStore } from '../../../store/roles/useRolesStore';
 import { RoleFormTermStatus, RoleFormValues } from '../../../types/roles';
 import { DatePicker } from '../../ui/forms/DatePicker';
@@ -95,15 +95,12 @@ function RoleTermCreate({
 }) {
   const { t } = useTranslation('roles');
   const { values, errors, setFieldValue } = useFormikContext<RoleFormValues>();
-  const publicClient = usePublicClient();
+  const publicClient = useNetworkPublicClient();
 
   const handleAddTerm = async () => {
     if (!values.newRoleTerm?.nominee || !values.newRoleTerm?.termEndDate) {
       throw new Error('Nominee and Term End Date are required');
     }
-    if (!publicClient) {
-      throw new Error('Public client is not available');
-    }
     let nomineeAddress = values.newRoleTerm.nominee;
     if (!values.newRoleTerm.nominee.startsWith('0x') && !getAddress(values.newRoleTerm.nominee)) {
       const ens = await publicClient.getEnsAddress({

src/components/SafeSettings/Signers/modals/AddSignerModal.tsx

@@ -4,9 +4,9 @@ import { Field, FieldAttributes, Formik } from 'formik';
 import { useCallback, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Address, getAddress } from 'viem';
-import { usePublicClient } from 'wagmi';
 import * as Yup from 'yup';
 import { useValidationAddress } from '../../../../hooks/schemas/common/useValidationAddress';
+import useNetworkPublicClient from '../../../../hooks/useNetworkPublicClient';
 import { useDaoInfoStore } from '../../../../store/daoInfo/useDaoInfoStore';
 import { validateENSName } from '../../../../utils/url';
 import SupportTooltip from '../../../ui/badges/SupportTooltip';
@@ -31,7 +31,7 @@ function AddSignerModal({
   }
 
   const { t } = useTranslation(['modals', 'common']);
-  const publicClient = usePublicClient();
+  const publicClient = useNetworkPublicClient();
   const { addressValidationTest, newSignerValidationTest } = useValidationAddress();
   const tooltipContainer = useRef<HTMLDivElement>(null);
 
@@ -41,7 +41,7 @@ function AddSignerModal({
     async (values: { address: string; threshold: number; nonce: number }) => {
       const { address, nonce, threshold } = values;
       let validAddress = address;
-      if (validateENSName(validAddress) && publicClient) {
+      if (validateENSName(validAddress)) {
         const maybeEnsAddress = await publicClient.getEnsAddress({ name: address });
         if (maybeEnsAddress) {
           validAddress = maybeEnsAddress;

src/components/ui/forms/ABISelector.tsx

@@ -4,8 +4,9 @@ import detectProxyTarget from 'evm-proxy-detection';
 import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { isAddress } from 'viem';
-import { useEnsAddress, usePublicClient } from 'wagmi';
+import { useEnsAddress } from 'wagmi';
 import { logError } from '../../../helpers/errorLogging';
+import useNetworkPublicClient from '../../../hooks/useNetworkPublicClient';
 import { useNetworkConfigStore } from '../../../providers/NetworkConfig/useNetworkConfigStore';
 import { LabelComponent } from './InputComponent';
 
@@ -29,11 +30,11 @@ export default function ABISelector({ target, onChange }: IABISelector) {
   const { etherscanAPIUrl } = useNetworkConfigStore();
   const { t } = useTranslation('common');
   const { data: ensAddress } = useEnsAddress({ name: target?.toLowerCase() });
-  const client = usePublicClient();
+  const client = useNetworkPublicClient();
 
   useEffect(() => {
     const loadABI = async () => {
-      if (client && target && ((ensAddress && isAddress(ensAddress)) || isAddress(target))) {
+      if (target && ((ensAddress && isAddress(ensAddress)) || isAddress(target))) {
         try {
           const requestFunc = ({ method, params }: { method: any; params: any }) =>
             client.request({ method, params });

src/components/ui/modals/DelegateModal.tsx

@@ -3,10 +3,11 @@ import { abis } from '@fractal-framework/fractal-contracts';
 import { Field, FieldAttributes, Formik } from 'formik';
 import { useTranslation } from 'react-i18next';
 import { getAddress, getContract, zeroAddress } from 'viem';
-import { useAccount, usePublicClient, useWalletClient } from 'wagmi';
+import { useAccount, useWalletClient } from 'wagmi';
 import * as Yup from 'yup';
 import LockReleaseAbi from '../../../assets/abi/LockRelease';
 import { useValidationAddress } from '../../../hooks/schemas/common/useValidationAddress';
+import useNetworkPublicClient from '../../../hooks/useNetworkPublicClient';
 import { useGetAccountName } from '../../../hooks/utils/useGetAccountName';
 import { useTransaction } from '../../../hooks/utils/useTransaction';
 import { useFractal } from '../../../providers/App/AppProvider';
@@ -36,12 +37,12 @@ export function DelegateModal({ close }: { close: Function }) {
   const [contractCall, pending] = useTransaction();
   const { addressValidationTest } = useValidationAddress();
   const { data: walletClient } = useWalletClient();
-  const publicClient = usePublicClient();
+  const publicClient = useNetworkPublicClient();
 
   const submitDelegation = async (values: { address: string }) => {
     if (!votesTokenAddress || !walletClient) return;
     let validAddress = values.address;
-    if (validateENSName(validAddress) && publicClient) {
+    if (validateENSName(validAddress)) {
       const maybeEnsAddress = await publicClient.getEnsAddress({ name: values.address });
       if (maybeEnsAddress) {
         validAddress = maybeEnsAddress;
@@ -65,7 +66,7 @@ export function DelegateModal({ close }: { close: Function }) {
     });
   };
   const submitLockedDelegation = async (values: { address: string }) => {
-    if (!lockReleaseAddress || !publicClient || !walletClient) return;
+    if (!lockReleaseAddress || !walletClient) return;
     let validAddress = values.address;
     if (validateENSName(validAddress)) {
       const maybeEnsAddress = await publicClient.getEnsAddress({ name: values.address });

src/components/ui/modals/ForkProposalTemplateModal.tsx

@@ -3,10 +3,10 @@ import { ChangeEventHandler, useState, useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { getAddress } from 'viem';
-import { usePublicClient } from 'wagmi';
 import { DAO_ROUTES } from '../../../constants/routes';
 import { useIsSafe } from '../../../hooks/safe/useIsSafe';
 import { validateAddress } from '../../../hooks/schemas/common/useValidationAddress';
+import useNetworkPublicClient from '../../../hooks/useNetworkPublicClient';
 import { useCanUserCreateProposal } from '../../../hooks/utils/useCanUserSubmitProposal';
 import { useNetworkConfigStore } from '../../../providers/NetworkConfig/useNetworkConfigStore';
 import { useDaoInfoStore } from '../../../store/daoInfo/useDaoInfoStore';
@@ -31,7 +31,7 @@ export default function ForkProposalTemplateModal({
 
   const { t } = useTranslation('proposalTemplate');
   const navigate = useNavigate();
-  const publicClient = usePublicClient();
+  const publicClient = useNetworkPublicClient();
   const { chain, addressPrefix } = useNetworkConfigStore();
   const { subgraphInfo } = useDaoInfoStore();
 
@@ -44,7 +44,7 @@ export default function ForkProposalTemplateModal({
   };
 
   const validateDAOAddress = useCallback(async () => {
-    if (!inputValue || isSafeLoading || !publicClient) {
+    if (!inputValue || isSafeLoading) {
       setError('');
       return false;
     }