Merge stores into one, fix chain being different in store (#164)

BuidlGuidl · Dec 3, 2024 · 941c8f5 · 941c8f5
1 parent 08291c1
commit 941c8f5
Show file tree

Hide file tree

Showing 35 changed files with 103 additions and 149 deletions.
diff --git a/.github/workflows/test-app.yaml b/.github/workflows/test-app.yaml
@@ -18,15 +18,8 @@ jobs:
       - name: Create .env.local in nextjs
         run: |
           touch packages/nextjs/.env.local
-          echo NEXT_PUBLIC_GNOSIS_ETHERSCAN_API_KEY=${{ secrets.NEXT_PUBLIC_GNOSIS_ETHERSCAN_API_KEY }} >> packages/nextjs/.env.local
-          echo NEXT_PUBLIC_BSC_ETHERSCAN_API_KEY=${{ secrets.NEXT_PUBLIC_BSC_ETHERSCAN_API_KEY }} >> packages/nextjs/.env.local
           echo NEXT_PUBLIC_HEIMDALL_URL=${{ secrets.NEXT_PUBLIC_HEIMDALL_URL }} >> packages/nextjs/.env.local
-          echo NEXT_PUBLIC_BASE_ETHERSCAN_API_KEY=${{ secrets.NEXT_PUBLIC_BASE_ETHERSCAN_API_KEY }} >> packages/nextjs/.env.local
-          echo NEXT_PUBLIC_SCROLL_ETHERSCAN_API_KEY=${{ secrets.NEXT_PUBLIC_SCROLL_ETHERSCAN_API_KEY }} >> packages/nextjs/.env.local
-          echo NEXT_PUBLIC_OPTIMISM_ETHERSCAN_API_KEY=${{ secrets.NEXT_PUBLIC_OPTIMISM_ETHERSCAN_API_KEY }} >> packages/nextjs/.env.local
-          echo NEXT_PUBLIC_MAINNET_ETHERSCAN_API_KEY=${{ secrets.NEXT_PUBLIC_MAINNET_ETHERSCAN_API_KEY }} >> packages/nextjs/.env.local
-          echo NEXT_PUBLIC_POLYGON_ETHERSCAN_API_KEY=${{ secrets.NEXT_PUBLIC_POLYGON_ETHERSCAN_API_KEY }} >> packages/nextjs/.env.local
-          echo NEXT_PUBLIC_ARBITRUM_ETHERSCAN_API_KEY=${{ secrets.NEXT_PUBLIC_ARBITRUM_ETHERSCAN_API_KEY }} >> packages/nextjs/.env.local
+          echo NEXT_PUBLIC_ETHERSCAN_V2_API_KEY=${{ secrets.NEXT_PUBLIC_ETHERSCAN_V2_API_KEY }} >> packages/nextjs/.env.local
 
       - name: Cypress run
         uses: cypress-io/github-action@v6

diff --git a/packages/nextjs/components/Footer.tsx b/packages/nextjs/components/Footer.tsx
@@ -3,13 +3,13 @@ import Link from "next/link";
 import { hardhat } from "viem/chains";
 import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import { Faucet } from "~~/components/scaffold-eth";
-import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
+import { useGlobalState } from "~~/services/store/store";
 
 /**
  * Site footer
  */
 export const Footer = () => {
-  const { targetNetwork } = useTargetNetwork();
+  const targetNetwork = useGlobalState(state => state.targetNetwork);
   const isLocalNetwork = targetNetwork.id === hardhat.id;
 
   return (

diff --git a/packages/nextjs/components/NetworksDropdown/AddCustomChainModal.tsx b/packages/nextjs/components/NetworksDropdown/AddCustomChainModal.tsx
@@ -20,8 +20,9 @@ type AddCustomChainModalProps = {
 
 export const AddCustomChainModal = forwardRef<HTMLDialogElement, AddCustomChainModalProps>(
   ({ groupedOptionsState, setGroupedOptionsState, setSelectedOption, onChange }, ref) => {
-    const { addCustomChain } = useGlobalState(state => ({
+    const { addCustomChain, setTargetNetwork } = useGlobalState(state => ({
       addCustomChain: state.addChain,
+      setTargetNetwork: state.setTargetNetwork,
     }));
 
     const handleSubmitCustomChain = (e: React.FormEvent<HTMLFormElement>) => {
@@ -51,6 +52,7 @@ export const AddCustomChainModal = forwardRef<HTMLDialogElement, AddCustomChainM
       e.currentTarget.reset();
 
       setSelectedOption(newOption);
+      setTargetNetwork(chain);
       onChange(newOption);
 
       handleCloseModal();

diff --git a/packages/nextjs/components/NetworksDropdown/NetworksDropdown.tsx b/packages/nextjs/components/NetworksDropdown/NetworksDropdown.tsx
@@ -24,10 +24,12 @@ export const NetworksDropdown = ({ onChange }: { onChange: (options: any) => any
   const [groupedOptionsState, setGroupedOptionsState] = useState(initialGroupedOptions);
   const [selectedOption, setSelectedOption] = useState<SingleValue<Options>>(initialGroupedOptions.mainnet.options[0]);
 
-  const { addCustomChain, removeChain, resetTargetNetwork } = useGlobalState(state => ({
+  const { addCustomChain, removeChain, resetTargetNetwork, setTargetNetwork, chains } = useGlobalState(state => ({
     addCustomChain: state.addChain,
     removeChain: state.removeChain,
     resetTargetNetwork: () => state.setTargetNetwork(mainnet),
+    setTargetNetwork: state.setTargetNetwork,
+    chains: state.chains,
   }));
 
   const seeOtherChainsModalRef = useRef<HTMLDialogElement>(null);
@@ -82,6 +84,10 @@ export const NetworksDropdown = ({ onChange }: { onChange: (options: any) => any
       }
     } else {
       setSelectedOption(selected);
+      if (selected) {
+        const chain = Object.values(chains).find(chain => chain.id === selected.value);
+        setTargetNetwork(chain as Chain);
+      }
       onChange(selected);
     }
   };

diff --git a/packages/nextjs/components/blockexplorer/TransactionsTable.tsx b/packages/nextjs/components/blockexplorer/TransactionsTable.tsx
@@ -1,12 +1,12 @@
 import { formatEther } from "viem";
 import { TransactionHash } from "~~/components/blockexplorer/TransactionHash";
 import { Address } from "~~/components/scaffold-eth";
-import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
+import { useGlobalState } from "~~/services/store/store";
 import { TransactionWithFunction } from "~~/utils/scaffold-eth";
 import { TransactionsTableProps } from "~~/utils/scaffold-eth/";
 
 export const TransactionsTable = ({ blocks, transactionReceipts }: TransactionsTableProps) => {
-  const { targetNetwork } = useTargetNetwork();
+  const targetNetwork = useGlobalState(state => state.targetNetwork);
 
   return (
     <div className="flex justify-center px-4 md:px-0">

diff --git a/packages/nextjs/components/scaffold-eth/Address.tsx b/packages/nextjs/components/scaffold-eth/Address.tsx
@@ -6,7 +6,7 @@ import { normalize } from "viem/ens";
 import { useEnsAvatar, useEnsName } from "wagmi";
 import { CheckCircleIcon, DocumentDuplicateIcon } from "@heroicons/react/24/outline";
 import { BlockieAvatar } from "~~/components/scaffold-eth";
-import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
+import { useGlobalState } from "~~/services/store/store";
 import { getBlockExplorerAddressLink } from "~~/utils/scaffold-eth";
 
 type AddressProps = {
@@ -34,7 +34,7 @@ export const Address = ({ address, disableAddressLink, format, size = "base" }:
   const [ensAvatar, setEnsAvatar] = useState<string | null>();
   const [addressCopied, setAddressCopied] = useState(false);
 
-  const { targetNetwork } = useTargetNetwork();
+  const targetNetwork = useGlobalState(state => state.targetNetwork);
 
   const { data: fetchedEns } = useEnsName({
     address: address,

diff --git a/packages/nextjs/components/scaffold-eth/Balance.tsx b/packages/nextjs/components/scaffold-eth/Balance.tsx
@@ -1,6 +1,6 @@
 import { Address } from "viem";
 import { useAccountBalance } from "~~/hooks/scaffold-eth";
-import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
+import { useGlobalState } from "~~/services/store/store";
 
 type BalanceProps = {
   address?: Address;
@@ -11,7 +11,7 @@ type BalanceProps = {
  * Display (ETH & USD) balance of an ETH address.
  */
 export const Balance = ({ address, className = "" }: BalanceProps) => {
-  const { targetNetwork } = useTargetNetwork();
+  const targetNetwork = useGlobalState(state => state.targetNetwork);
   const { balance, price, isError, isLoading, onToggleBalance, isEthBalance } = useAccountBalance(address);
 
   if (!address || isLoading || balance === null) {

diff --git a/packages/nextjs/components/scaffold-eth/Contract/ContractUI.tsx b/packages/nextjs/components/scaffold-eth/Contract/ContractUI.tsx
@@ -4,17 +4,17 @@ import { ContractReadMethods } from "./ContractReadMethods";
 import { ContractVariables } from "./ContractVariables";
 import { ContractWriteMethods } from "./ContractWriteMethods";
 import { AbiFunction } from "abitype";
-import { Abi } from "viem";
+import { Abi, Address as AddressType } from "viem";
 import { useContractRead } from "wagmi";
 import { MiniFooter } from "~~/components/MiniFooter";
 import { Address, Balance, MethodSelector } from "~~/components/scaffold-eth";
 import { useNetworkColor } from "~~/hooks/scaffold-eth";
-import { useAbiNinjaState } from "~~/services/store/store";
+import { useGlobalState } from "~~/services/store/store";
 import { getTargetNetworks } from "~~/utils/scaffold-eth";
 
 type ContractUIProps = {
   className?: string;
-  initialContractData: { address: string; abi: Abi };
+  initialContractData: { address: AddressType; abi: Abi };
 };
 
 export interface AugmentedAbiFunction extends AbiFunction {
@@ -61,8 +61,8 @@ const mainNetworks = getTargetNetworks();
  **/
 export const ContractUI = ({ className = "", initialContractData }: ContractUIProps) => {
   const [refreshDisplayVariables, triggerRefreshDisplayVariables] = useReducer(value => !value, false);
-  const { implementationAddress, chainId } = useAbiNinjaState(state => ({
-    chainId: state.mainChainId,
+  const { implementationAddress, chainId } = useGlobalState(state => ({
+    chainId: state.targetNetwork.id,
     implementationAddress: state.implementationAddress,
   }));
   const mainNetwork = mainNetworks.find(network => network.id === chainId);

diff --git a/packages/nextjs/components/scaffold-eth/Contract/DisplayVariable.tsx b/packages/nextjs/components/scaffold-eth/Contract/DisplayVariable.tsx
@@ -6,7 +6,7 @@ import { useReadContract } from "wagmi";
 import { ArrowPathIcon } from "@heroicons/react/24/outline";
 import { displayTxResult } from "~~/components/scaffold-eth";
 import { useAnimationConfig } from "~~/hooks/scaffold-eth";
-import { useAbiNinjaState } from "~~/services/store/store";
+import { useGlobalState } from "~~/services/store/store";
 import { getParsedError, notification } from "~~/utils/scaffold-eth";
 
 type DisplayVariableProps = {
@@ -24,7 +24,7 @@ export const DisplayVariable = ({
   abi,
   inheritedFrom,
 }: DisplayVariableProps) => {
-  const mainChainId = useAbiNinjaState(state => state.mainChainId);
+  const mainChainId = useGlobalState(state => state.targetNetwork.id);
   const {
     data: result,
     isFetching,

diff --git a/packages/nextjs/components/scaffold-eth/Contract/ReadOnlyFunctionForm.tsx b/packages/nextjs/components/scaffold-eth/Contract/ReadOnlyFunctionForm.tsx
@@ -13,7 +13,7 @@ import {
   getParsedContractFunctionArgs,
   transformAbiFunction,
 } from "~~/components/scaffold-eth";
-import { useAbiNinjaState } from "~~/services/store/store";
+import { useGlobalState } from "~~/services/store/store";
 import { getParsedError, notification } from "~~/utils/scaffold-eth";
 
 type ReadOnlyFunctionFormProps = {
@@ -29,7 +29,7 @@ export const ReadOnlyFunctionForm = ({
   inheritedFrom,
   abi,
 }: ReadOnlyFunctionFormProps) => {
-  const mainChainId = useAbiNinjaState(state => state.mainChainId);
+  const mainChainId = useGlobalState(state => state.targetNetwork.id);
   const [form, setForm] = useState<Record<string, any>>(() => getInitialFormState(abiFunction));
   const [result, setResult] = useState<unknown>();
 

diff --git a/packages/nextjs/components/scaffold-eth/Contract/WriteOnlyFunctionForm.tsx b/packages/nextjs/components/scaffold-eth/Contract/WriteOnlyFunctionForm.tsx
@@ -14,7 +14,7 @@ import {
   transformAbiFunction,
 } from "~~/components/scaffold-eth";
 import { useTransactor } from "~~/hooks/scaffold-eth";
-import { useAbiNinjaState } from "~~/services/store/store";
+import { useGlobalState } from "~~/services/store/store";
 
 type WriteOnlyFunctionFormProps = {
   abi: Abi;
@@ -31,7 +31,7 @@ export const WriteOnlyFunctionForm = ({
   contractAddress,
   inheritedFrom,
 }: WriteOnlyFunctionFormProps) => {
-  const mainChainId = useAbiNinjaState(state => state.mainChainId);
+  const mainChainId = useGlobalState(state => state.targetNetwork.id);
   const [form, setForm] = useState<Record<string, any>>(() => getInitialFormState(abiFunction));
   const [txValue, setTxValue] = useState<string>("");
   const { chain } = useAccount();

diff --git a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/NetworkOptions.tsx b/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/NetworkOptions.tsx
@@ -2,7 +2,7 @@ import { useTheme } from "next-themes";
 import { useSwitchChain } from "wagmi";
 import { ArrowsRightLeftIcon } from "@heroicons/react/24/solid";
 import { getNetworkColor } from "~~/hooks/scaffold-eth";
-import { useAbiNinjaState, useGlobalState } from "~~/services/store/store";
+import { useGlobalState } from "~~/services/store/store";
 
 type NetworkOptionsProps = {
   hidden?: boolean;
@@ -12,8 +12,13 @@ export const NetworkOptions = ({ hidden = false }: NetworkOptionsProps) => {
   const { resolvedTheme } = useTheme();
   const isDarkMode = resolvedTheme === "dark";
   const { switchChain } = useSwitchChain();
-  const mainChainId = useAbiNinjaState(state => state.mainChainId);
-  const chains = useGlobalState(state => state.chains);
+  const {
+    chains,
+    targetNetwork: { id: mainChainId },
+  } = useGlobalState(state => ({
+    chains: state.chains,
+    targetNetwork: state.targetNetwork,
+  }));
 
   const filteredChains = chains.filter(allowedNetwork => allowedNetwork.id === mainChainId);
   // if chainId is 31337 we render one element, since viem chains have 3 chains with same chainId.

diff --git a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/index.tsx b/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/index.tsx
@@ -5,17 +5,18 @@ import { WrongNetworkDropdown } from "./WrongNetworkDropdown";
 import { ConnectButton } from "@rainbow-me/rainbowkit";
 import { Address } from "viem";
 import { useNetworkColor } from "~~/hooks/scaffold-eth";
-import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
-import { useAbiNinjaState } from "~~/services/store/store";
+import { useGlobalState } from "~~/services/store/store";
 import { getBlockExplorerAddressLink } from "~~/utils/scaffold-eth";
 
 /**
  * Custom Wagmi Connect Button (watch balance + custom design)
  */
 export const RainbowKitCustomConnectButton = () => {
-  const mainChainId = useAbiNinjaState(state => state.mainChainId);
+  const { mainChainId, targetNetwork } = useGlobalState(state => ({
+    mainChainId: state.targetNetwork.id,
+    targetNetwork: state.targetNetwork,
+  }));
   const networkColor = useNetworkColor();
-  const { targetNetwork } = useTargetNetwork();
 
   return (
     <ConnectButton.Custom>

diff --git a/packages/nextjs/hooks/scaffold-eth/index.ts b/packages/nextjs/hooks/scaffold-eth/index.ts
@@ -10,7 +10,6 @@ export * from "./useScaffoldEventHistory";
 export * from "./useScaffoldReadContract";
 export * from "./useScaffoldWatchContractEvent";
 export * from "./useScaffoldWriteContract";
-export * from "./useTargetNetwork";
 export * from "./useTransactor";
 export * from "./useWatchBalance";
 export * from "./useNativeCurrencyPrice";

diff --git a/packages/nextjs/hooks/scaffold-eth/useAccountBalance.ts b/packages/nextjs/hooks/scaffold-eth/useAccountBalance.ts
@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useState } from "react";
-import { useTargetNetwork } from "./useTargetNetwork";
 import { useQueryClient } from "@tanstack/react-query";
 import { Address } from "viem";
 import { useBalance, useBlockNumber } from "wagmi";
@@ -8,8 +7,10 @@ import { useGlobalState } from "~~/services/store/store";
 export function useAccountBalance(address?: Address) {
   const [isEthBalance, setIsEthBalance] = useState(true);
   const [balance, setBalance] = useState<number | null>(null);
-  const price = useGlobalState(state => state.nativeCurrencyPrice);
-  const { targetNetwork } = useTargetNetwork();
+  const { price, targetNetwork } = useGlobalState(state => ({
+    price: state.nativeCurrencyPrice,
+    targetNetwork: state.targetNetwork,
+  }));
   const queryClient = useQueryClient();
   const { data: blockNumber } = useBlockNumber({ watch: true, chainId: targetNetwork.id });
 

diff --git a/packages/nextjs/hooks/scaffold-eth/useBurnerWallet.ts b/packages/nextjs/hooks/scaffold-eth/useBurnerWallet.ts
@@ -1,10 +1,10 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-import { useTargetNetwork } from "./useTargetNetwork";
 import { useLocalStorage } from "usehooks-ts";
 import { Chain, Hex, HttpTransport, PrivateKeyAccount, createWalletClient, http } from "viem";
 import { WalletClient } from "viem";
 import { generatePrivateKey, privateKeyToAccount } from "viem/accounts";
 import { usePublicClient } from "wagmi";
+import { useGlobalState } from "~~/services/store/store";
 
 const burnerStorageKey = "scaffoldEth2.burnerWallet.sk";
 
@@ -61,7 +61,7 @@ type BurnerAccount = {
 export const useBurnerWallet = (): BurnerAccount => {
   const [burnerSk, setBurnerSk] = useLocalStorage<Hex>(burnerStorageKey, newDefaultPrivateKey);
 
-  const { targetNetwork } = useTargetNetwork();
+  const targetNetwork = useGlobalState(state => state.targetNetwork);
   const publicClient = usePublicClient({ chainId: targetNetwork.id });
   const [walletClient, setWalletClient] = useState<WalletClient<HttpTransport, Chain, PrivateKeyAccount>>();
   const [generatedPrivateKey, setGeneratedPrivateKey] = useState<Hex>("0x");

diff --git a/packages/nextjs/hooks/scaffold-eth/useContractLogs.ts b/packages/nextjs/hooks/scaffold-eth/useContractLogs.ts
@@ -1,11 +1,11 @@
 import { useEffect, useState } from "react";
-import { useTargetNetwork } from "./useTargetNetwork";
 import { Address, Log } from "viem";
 import { usePublicClient } from "wagmi";
+import { useGlobalState } from "~~/services/store/store";
 
 export const useContractLogs = (address: Address) => {
   const [logs, setLogs] = useState<Log[]>([]);
-  const { targetNetwork } = useTargetNetwork();
+  const targetNetwork = useGlobalState(state => state.targetNetwork);
   const client = usePublicClient({ chainId: targetNetwork.id });
 
   useEffect(() => {

diff --git a/packages/nextjs/hooks/scaffold-eth/useDeployedContractInfo.ts b/packages/nextjs/hooks/scaffold-eth/useDeployedContractInfo.ts
@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
-import { useTargetNetwork } from "./useTargetNetwork";
 import { useIsMounted } from "usehooks-ts";
 import { usePublicClient } from "wagmi";
+import { useGlobalState } from "~~/services/store/store";
 import { Contract, ContractCodeStatus, ContractName, contracts } from "~~/utils/scaffold-eth/contract";
 
 /**
@@ -10,7 +10,7 @@ import { Contract, ContractCodeStatus, ContractName, contracts } from "~~/utils/
  */
 export const useDeployedContractInfo = <TContractName extends ContractName>(contractName: TContractName) => {
   const isMounted = useIsMounted();
-  const { targetNetwork } = useTargetNetwork();
+  const targetNetwork = useGlobalState(state => state.targetNetwork);
   const deployedContract = contracts?.[targetNetwork.id]?.[contractName as ContractName] as Contract<TContractName>;
   const [status, setStatus] = useState<ContractCodeStatus>(ContractCodeStatus.LOADING);
   const publicClient = usePublicClient({ chainId: targetNetwork.id });

diff --git a/packages/nextjs/hooks/scaffold-eth/useNativeCurrencyPrice.ts b/packages/nextjs/hooks/scaffold-eth/useNativeCurrencyPrice.ts
@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
-import { useTargetNetwork } from "./useTargetNetwork";
 import { useInterval } from "usehooks-ts";
 import scaffoldConfig from "~~/scaffold.config";
+import { useGlobalState } from "~~/services/store/store";
 import { fetchPriceFromUniswap } from "~~/utils/scaffold-eth";
 
 const enablePolling = false;
@@ -11,7 +11,7 @@ const enablePolling = false;
  * @returns nativeCurrencyPrice: number
  */
 export const useNativeCurrencyPrice = () => {
-  const { targetNetwork } = useTargetNetwork();
+  const targetNetwork = useGlobalState(state => state.targetNetwork);
   const [nativeCurrencyPrice, setNativeCurrencyPrice] = useState(0);
 
   // Get the price of ETH from Uniswap on mount

diff --git a/packages/nextjs/hooks/scaffold-eth/useNetworkColor.ts b/packages/nextjs/hooks/scaffold-eth/useNetworkColor.ts
@@ -1,5 +1,5 @@
-import { useTargetNetwork } from "./useTargetNetwork";
 import { useTheme } from "next-themes";
+import { useGlobalState } from "~~/services/store/store";
 import { ChainWithAttributes } from "~~/utils/scaffold-eth";
 
 export const DEFAULT_NETWORK_COLOR: [string, string] = ["#666666", "#bbbbbb"];
@@ -15,7 +15,7 @@ export function getNetworkColor(network: ChainWithAttributes, isDarkMode: boolea
 export const useNetworkColor = (network?: ChainWithAttributes) => {
   const { resolvedTheme } = useTheme();
   const isDarkMode = resolvedTheme === "dark";
-  const { targetNetwork } = useTargetNetwork();
+  const targetNetwork = useGlobalState(state => state.targetNetwork);
 
   return getNetworkColor(network || targetNetwork, isDarkMode);
 };
diff --git a/packages/nextjs/hooks/scaffold-eth/useScaffoldContract.ts b/packages/nextjs/hooks/scaffold-eth/useScaffoldContract.ts
@@ -1,8 +1,8 @@
-import { useTargetNetwork } from "./useTargetNetwork";
 import { Account, Address, Chain, Client, Transport, getContract } from "viem";
 import { usePublicClient } from "wagmi";
 import { GetWalletClientReturnType } from "wagmi/actions";
 import { useDeployedContractInfo } from "~~/hooks/scaffold-eth";
+import { useGlobalState } from "~~/services/store/store";
 import { Contract, ContractName } from "~~/utils/scaffold-eth/contract";
 
 /**
@@ -23,7 +23,7 @@ export const useScaffoldContract = <
   walletClient?: TWalletClient | null;
 }) => {
   const { data: deployedContractData, isLoading: deployedContractLoading } = useDeployedContractInfo(contractName);
-  const { targetNetwork } = useTargetNetwork();
+  const targetNetwork = useGlobalState(state => state.targetNetwork);
   const publicClient = usePublicClient({ chainId: targetNetwork.id });
 
   let contract = undefined;