From 644b581954e163858871727f8b64af641ae5479f Mon Sep 17 00:00:00 2001 From: Jacob Homanics Date: Mon, 9 Sep 2024 04:05:36 -0500 Subject: [PATCH] updated hooks --- .../scaffold-eth/useDeployedContractInfo.ts | 12 +++++++--- .../hooks/scaffold-eth/useNetworkColor.ts | 4 ++-- .../hooks/scaffold-eth/useScaffoldContract.ts | 12 ++++++++-- .../scaffold-eth/useScaffoldEventHistory.ts | 11 ++++++---- .../scaffold-eth/useScaffoldReadContract.ts | 9 +++++--- .../useScaffoldWatchContractEvent.ts | 6 +++-- .../scaffold-eth/useScaffoldWriteContract.ts | 22 ++++++++++++------- .../nextjs/utils/scaffold-eth/contract.ts | 4 ++++ 8 files changed, 56 insertions(+), 24 deletions(-) diff --git a/packages/nextjs/hooks/scaffold-eth/useDeployedContractInfo.ts b/packages/nextjs/hooks/scaffold-eth/useDeployedContractInfo.ts index 8f649c38a..83e7dee36 100644 --- a/packages/nextjs/hooks/scaffold-eth/useDeployedContractInfo.ts +++ b/packages/nextjs/hooks/scaffold-eth/useDeployedContractInfo.ts @@ -1,6 +1,7 @@ import { useEffect, useState } from "react"; import { useTargetNetwork } from "./useTargetNetwork"; import { useIsMounted } from "usehooks-ts"; +import { Chain } from "viem"; import { usePublicClient } from "wagmi"; import { Contract, ContractCodeStatus, ContractName, contracts } from "~~/utils/scaffold-eth/contract"; @@ -8,12 +9,17 @@ import { Contract, ContractCodeStatus, ContractName, contracts } from "~~/utils/ * Gets the matching contract info for the provided contract name from the contracts present in deployedContracts.ts * and externalContracts.ts corresponding to targetNetworks configured in scaffold.config.ts */ -export const useDeployedContractInfo = (contractName: TContractName) => { +export const useDeployedContractInfo = ( + contractName: TContractName, + chain?: Chain, +) => { const isMounted = useIsMounted(); const { targetNetwork } = useTargetNetwork(); - const deployedContract = contracts?.[targetNetwork.id]?.[contractName as ContractName] as Contract; + const selectedChain = chain ?? targetNetwork; + + const deployedContract = contracts?.[selectedChain.id]?.[contractName as ContractName] as Contract; const [status, setStatus] = useState(ContractCodeStatus.LOADING); - const publicClient = usePublicClient({ chainId: targetNetwork.id }); + const publicClient = usePublicClient({ chainId: selectedChain.id }); useEffect(() => { const checkContractDeployment = async () => { diff --git a/packages/nextjs/hooks/scaffold-eth/useNetworkColor.ts b/packages/nextjs/hooks/scaffold-eth/useNetworkColor.ts index ec9c77060..74e97844b 100644 --- a/packages/nextjs/hooks/scaffold-eth/useNetworkColor.ts +++ b/packages/nextjs/hooks/scaffold-eth/useNetworkColor.ts @@ -12,11 +12,11 @@ export function getNetworkColor(network: ChainWithAttributes, isDarkMode: boolea /** * Gets the color of the target network */ -export const useNetworkColor = () => { +export const useNetworkColor = (chain?: ChainWithAttributes) => { const { resolvedTheme } = useTheme(); const { targetNetwork } = useTargetNetwork(); const isDarkMode = resolvedTheme === "dark"; - return getNetworkColor(targetNetwork, isDarkMode); + return getNetworkColor(chain ? chain : targetNetwork, isDarkMode); }; diff --git a/packages/nextjs/hooks/scaffold-eth/useScaffoldContract.ts b/packages/nextjs/hooks/scaffold-eth/useScaffoldContract.ts index 1add8cba8..697ee55c3 100644 --- a/packages/nextjs/hooks/scaffold-eth/useScaffoldContract.ts +++ b/packages/nextjs/hooks/scaffold-eth/useScaffoldContract.ts @@ -18,13 +18,21 @@ export const useScaffoldContract = < >({ contractName, walletClient, + chain, }: { contractName: TContractName; walletClient?: TWalletClient | null; + chain?: Chain; }) => { - const { data: deployedContractData, isLoading: deployedContractLoading } = useDeployedContractInfo(contractName); const { targetNetwork } = useTargetNetwork(); - const publicClient = usePublicClient({ chainId: targetNetwork.id }); + const selectedChain = chain ?? targetNetwork; + + const { data: deployedContractData, isLoading: deployedContractLoading } = useDeployedContractInfo( + contractName, + selectedChain, + ); + + const publicClient = usePublicClient({ chainId: selectedChain?.id }); let contract = undefined; if (deployedContractData && publicClient) { diff --git a/packages/nextjs/hooks/scaffold-eth/useScaffoldEventHistory.ts b/packages/nextjs/hooks/scaffold-eth/useScaffoldEventHistory.ts index 2477a9b20..822e32268 100644 --- a/packages/nextjs/hooks/scaffold-eth/useScaffoldEventHistory.ts +++ b/packages/nextjs/hooks/scaffold-eth/useScaffoldEventHistory.ts @@ -74,6 +74,7 @@ export const useScaffoldEventHistory = < contractName, eventName, fromBlock, + chain, filters, blockData, transactionData, @@ -82,14 +83,16 @@ export const useScaffoldEventHistory = < enabled = true, }: UseScaffoldEventHistoryConfig) => { const { targetNetwork } = useTargetNetwork(); + const selectedChain = chain ?? targetNetwork; + const publicClient = usePublicClient({ - chainId: targetNetwork.id, + chainId: selectedChain.id, }); const [isFirstRender, setIsFirstRender] = useState(true); - const { data: blockNumber } = useBlockNumber({ watch: watch, chainId: targetNetwork.id }); + const { data: blockNumber } = useBlockNumber({ watch: watch, chainId: selectedChain.id }); - const { data: deployedContractData } = useDeployedContractInfo(contractName); + const { data: deployedContractData } = useDeployedContractInfo(contractName, selectedChain); const event = deployedContractData && @@ -105,7 +108,7 @@ export const useScaffoldEventHistory = < address: deployedContractData?.address, eventName, fromBlock: fromBlock.toString(), - chainId: targetNetwork.id, + chainId: selectedChain.id, filters: JSON.stringify(filters, replacer), }, ], diff --git a/packages/nextjs/hooks/scaffold-eth/useScaffoldReadContract.ts b/packages/nextjs/hooks/scaffold-eth/useScaffoldReadContract.ts index 9d9e8f031..4ee962698 100644 --- a/packages/nextjs/hooks/scaffold-eth/useScaffoldReadContract.ts +++ b/packages/nextjs/hooks/scaffold-eth/useScaffoldReadContract.ts @@ -27,16 +27,19 @@ export const useScaffoldReadContract = < contractName, functionName, args, + chain, ...readConfig }: UseScaffoldReadConfig) => { - const { data: deployedContract } = useDeployedContractInfo(contractName); const { targetNetwork } = useTargetNetwork(); + const selectedChain = chain ?? targetNetwork; + const { data: deployedContract } = useDeployedContractInfo(contractName, selectedChain); + const { query: queryOptions, watch, ...readContractConfig } = readConfig; // set watch to true by default const defaultWatch = watch ?? true; const readContractHookRes = useReadContract({ - chainId: targetNetwork.id, + chainId: selectedChain.id, functionName, address: deployedContract?.address, abi: deployedContract?.abi, @@ -56,7 +59,7 @@ export const useScaffoldReadContract = < const queryClient = useQueryClient(); const { data: blockNumber } = useBlockNumber({ watch: defaultWatch, - chainId: targetNetwork.id, + chainId: selectedChain.id, query: { enabled: defaultWatch, }, diff --git a/packages/nextjs/hooks/scaffold-eth/useScaffoldWatchContractEvent.ts b/packages/nextjs/hooks/scaffold-eth/useScaffoldWatchContractEvent.ts index 844b4a08b..96fe09a7a 100644 --- a/packages/nextjs/hooks/scaffold-eth/useScaffoldWatchContractEvent.ts +++ b/packages/nextjs/hooks/scaffold-eth/useScaffoldWatchContractEvent.ts @@ -19,10 +19,12 @@ export const useScaffoldWatchContractEvent = < >({ contractName, eventName, + chain, onLogs, }: UseScaffoldEventConfig) => { - const { data: deployedContractData } = useDeployedContractInfo(contractName); const { targetNetwork } = useTargetNetwork(); + const selectedChain = chain ?? targetNetwork; + const { data: deployedContractData } = useDeployedContractInfo(contractName, selectedChain); const addIndexedArgsToLogs = (logs: Log[]) => logs.map(addIndexedArgsToEvent); const listenerWithIndexedArgs = (logs: Log[]) => onLogs(addIndexedArgsToLogs(logs) as Parameters[0]); @@ -30,7 +32,7 @@ export const useScaffoldWatchContractEvent = < return useWatchContractEvent({ address: deployedContractData?.address, abi: deployedContractData?.abi as Abi, - chainId: targetNetwork.id, + chainId: selectedChain.id, onLogs: listenerWithIndexedArgs, eventName, }); diff --git a/packages/nextjs/hooks/scaffold-eth/useScaffoldWriteContract.ts b/packages/nextjs/hooks/scaffold-eth/useScaffoldWriteContract.ts index 4bd903f7f..ec09b45bb 100644 --- a/packages/nextjs/hooks/scaffold-eth/useScaffoldWriteContract.ts +++ b/packages/nextjs/hooks/scaffold-eth/useScaffoldWriteContract.ts @@ -2,6 +2,7 @@ import { useState } from "react"; import { useTargetNetwork } from "./useTargetNetwork"; import { MutateOptions } from "@tanstack/react-query"; import { Abi, ExtractAbiFunctionNames } from "abitype"; +import { Chain } from "viem"; import { Config, UseWriteContractParameters, useAccount, useWriteContract } from "wagmi"; import { WriteContractErrorType, WriteContractReturnType } from "wagmi/actions"; import { WriteContractVariables } from "wagmi/query"; @@ -22,16 +23,19 @@ import { */ export const useScaffoldWriteContract = ( contractName: TContractName, + chain?: Chain, writeContractParams?: UseWriteContractParameters, ) => { - const { chain } = useAccount(); + const { chain: accountChain } = useAccount(); const writeTx = useTransactor(); const [isMining, setIsMining] = useState(false); const { targetNetwork } = useTargetNetwork(); const wagmiContractWrite = useWriteContract(writeContractParams); - const { data: deployedContractData } = useDeployedContractInfo(contractName); + const selectedNetwork = chain ?? targetNetwork; + + const { data: deployedContractData } = useDeployedContractInfo(contractName, selectedNetwork); const sendContractWriteAsyncTx = async < TFunctionName extends ExtractAbiFunctionNames, "nonpayable" | "payable">, @@ -44,12 +48,13 @@ export const useScaffoldWriteContract = ( return; } - if (!chain?.id) { + if (!accountChain?.id) { notification.error("Please connect your wallet"); return; } - if (chain?.id !== targetNetwork.id) { - notification.error("You are on the wrong network"); + + if (accountChain?.id !== selectedNetwork.id) { + notification.error("Your wallet is connected to the wrong network"); return; } @@ -93,12 +98,13 @@ export const useScaffoldWriteContract = ( notification.error("Target Contract is not deployed, did you forget to run `yarn deploy`?"); return; } - if (!chain?.id) { + if (!accountChain?.id) { notification.error("Please connect your wallet"); return; } - if (chain?.id !== targetNetwork.id) { - notification.error("You are on the wrong network"); + + if (accountChain?.id !== selectedNetwork.id) { + notification.error("Your wallet is connected to the wrong network"); return; } diff --git a/packages/nextjs/utils/scaffold-eth/contract.ts b/packages/nextjs/utils/scaffold-eth/contract.ts index 24e84b5e5..2b4a1963f 100644 --- a/packages/nextjs/utils/scaffold-eth/contract.ts +++ b/packages/nextjs/utils/scaffold-eth/contract.ts @@ -14,6 +14,7 @@ import type { MergeDeepRecord } from "type-fest/source/merge-deep"; import { Address, Block, + Chain, GetEventArgs, GetTransactionReceiptReturnType, GetTransactionReturnType, @@ -170,6 +171,7 @@ export type UseScaffoldReadConfig< TFunctionName extends ExtractAbiFunctionNames, ReadAbiStateMutability>, > = { contractName: TContractName; + chain?: Chain; watch?: boolean; } & IsContractDeclarationMissing< Partial, @@ -215,6 +217,7 @@ export type UseScaffoldEventConfig< > = { contractName: TContractName; eventName: TEventName; + chain?: Chain; } & IsContractDeclarationMissing< Omit & { onLogs: ( @@ -274,6 +277,7 @@ export type UseScaffoldEventHistoryConfig< contractName: TContractName; eventName: IsContractDeclarationMissing; fromBlock: bigint; + chain?: Chain; filters?: EventFilters; blockData?: TBlockData; transactionData?: TTransactionData;