Merge stores into one, fix chain being different in store

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 (

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,8 @@ export const AddCustomChainModal = forwardRef<HTMLDialogElement, AddCustomChainM
       e.currentTarget.reset();
 
       setSelectedOption(newOption);
+      setTargetNetwork(chain);
+      console.log("chain", chain);
       onChange(newOption);
 
       handleCloseModal();

packages/nextjs/components/NetworksDropdown/NetworksDropdown.tsx

@@ -24,12 +24,21 @@ 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,
   }));
 
+  useEffect(() => {
+    if (selectedOption) {
+      const chain = Object.values(chains).find(chain => chain.id === selectedOption.value);
+      setTargetNetwork(chain as Chain);
+    }
+  }, [selectedOption, setTargetNetwork, chains]);
+
   const seeOtherChainsModalRef = useRef<HTMLDialogElement>(null);
   const customChainModalRef = useRef<HTMLDialogElement>(null);
 

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">

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,

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) {

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);

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,

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>();
 

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();

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.

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>

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";

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 });
 

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");

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(() => {

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 });

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

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);
 };

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;

packages/nextjs/hooks/scaffold-eth/useScaffoldEventHistory.ts

@@ -1,12 +1,12 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { useTargetNetwork } from "./useTargetNetwork";
 import { Abi, AbiEvent, ExtractAbiEventNames } from "abitype";
 import { useInterval } from "usehooks-ts";
 import { Hash } from "viem";
 import * as chains from "viem/chains";
 import { usePublicClient } from "wagmi";
 import { useDeployedContractInfo } from "~~/hooks/scaffold-eth";
 import scaffoldConfig from "~~/scaffold.config";
+import { useGlobalState } from "~~/services/store/store";
 import { replacer } from "~~/utils/scaffold-eth/common";
 import {
   ContractAbi,
@@ -51,7 +51,7 @@ export const useScaffoldEventHistory = <
   const [fromBlockUpdated, setFromBlockUpdated] = useState<bigint>(fromBlock);
 
   const { data: deployedContractData, isLoading: deployedContractLoading } = useDeployedContractInfo(contractName);
-  const { targetNetwork } = useTargetNetwork();
+  const targetNetwork = useGlobalState(state => state.targetNetwork);
   const publicClient = usePublicClient({
     chainId: targetNetwork.id,
   });