diff --git a/.changeset/curvy-drinks-wave.md b/.changeset/curvy-drinks-wave.md new file mode 100644 index 000000000..69afbeae0 --- /dev/null +++ b/.changeset/curvy-drinks-wave.md @@ -0,0 +1,5 @@ +--- +"create-eth": patch +--- + +add useWatchBalance hook diff --git a/templates/base/packages/nextjs/components/scaffold-eth/Balance.tsx b/templates/base/packages/nextjs/components/scaffold-eth/Balance.tsx index 0108e953a..c10c24f7e 100644 --- a/templates/base/packages/nextjs/components/scaffold-eth/Balance.tsx +++ b/templates/base/packages/nextjs/components/scaffold-eth/Balance.tsx @@ -1,10 +1,9 @@ "use client"; -import { useEffect, useState } from "react"; -import { useQueryClient } from "@tanstack/react-query"; +import { useState } from "react"; import { Address, formatEther } from "viem"; -import { useBalance, useBlockNumber } from "wagmi"; import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork"; +import { useWatchBalance } from "~~/hooks/scaffold-eth/useWatchBalance"; import { useGlobalState } from "~~/services/store/store"; type BalanceProps = { @@ -18,16 +17,12 @@ type BalanceProps = { */ export const Balance = ({ address, className = "", usdMode }: BalanceProps) => { const { targetNetwork } = useTargetNetwork(); - - const queryClient = useQueryClient(); - const { data: blockNumber } = useBlockNumber({ watch: true, chainId: targetNetwork.id }); const price = useGlobalState(state => state.nativeCurrencyPrice); const { data: balance, isError, isLoading, - queryKey, - } = useBalance({ + } = useWatchBalance({ address, }); @@ -39,11 +34,6 @@ export const Balance = ({ address, className = "", usdMode }: BalanceProps) => { } }; - useEffect(() => { - queryClient.invalidateQueries({ queryKey }); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [blockNumber]); - if (!address || isLoading || balance === null) { return (
diff --git a/templates/base/packages/nextjs/components/scaffold-eth/FaucetButton.tsx b/templates/base/packages/nextjs/components/scaffold-eth/FaucetButton.tsx index 5b91bbcdd..2246f8275 100644 --- a/templates/base/packages/nextjs/components/scaffold-eth/FaucetButton.tsx +++ b/templates/base/packages/nextjs/components/scaffold-eth/FaucetButton.tsx @@ -1,14 +1,12 @@ "use client"; -import { useEffect, useState } from "react"; -import { useQueryClient } from "@tanstack/react-query"; +import { useState } from "react"; import { createWalletClient, http, parseEther } from "viem"; import { hardhat } from "viem/chains"; -import { useAccount, useBlockNumber } from "wagmi"; -import { useBalance } from "wagmi"; +import { useAccount } from "wagmi"; import { BanknotesIcon } from "@heroicons/react/24/outline"; import { useTransactor } from "~~/hooks/scaffold-eth"; -import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork"; +import { useWatchBalance } from "~~/hooks/scaffold-eth/useWatchBalance"; // Number of ETH faucet sends to an address const NUM_OF_ETH = "1"; @@ -24,23 +22,13 @@ const localWalletClient = createWalletClient({ */ export const FaucetButton = () => { const { address, chain: ConnectedChain } = useAccount(); - const { targetNetwork } = useTargetNetwork(); - const queryClient = useQueryClient(); - const { data: blockNumber } = useBlockNumber({ watch: true, chainId: targetNetwork.id }); - const { data: balance, queryKey } = useBalance({ - address, - }); + const { data: balance } = useWatchBalance({ address }); const [loading, setLoading] = useState(false); const faucetTxn = useTransactor(localWalletClient); - useEffect(() => { - queryClient.invalidateQueries({ queryKey }); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [blockNumber]); - const sendETH = async () => { try { setLoading(true); diff --git a/templates/base/packages/nextjs/hooks/scaffold-eth/useWatchBalance.ts b/templates/base/packages/nextjs/hooks/scaffold-eth/useWatchBalance.ts new file mode 100644 index 000000000..26acda9bf --- /dev/null +++ b/templates/base/packages/nextjs/hooks/scaffold-eth/useWatchBalance.ts @@ -0,0 +1,21 @@ +import { useEffect } from "react"; +import { useTargetNetwork } from "./useTargetNetwork"; +import { useQueryClient } from "@tanstack/react-query"; +import { UseBalanceParameters, useBalance, useBlockNumber } from "wagmi"; + +/** + * Wrapper around wagmi's useBalance hook. Updates data on every block change. + */ +export const useWatchBalance = (useBalanceParameters: UseBalanceParameters) => { + const { targetNetwork } = useTargetNetwork(); + const queryClient = useQueryClient(); + const { data: blockNumber } = useBlockNumber({ watch: true, chainId: targetNetwork.id }); + const { queryKey, ...restUseBalanceReturn } = useBalance(useBalanceParameters); + + useEffect(() => { + queryClient.invalidateQueries({ queryKey }); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [blockNumber]); + + return restUseBalanceReturn; +}; diff --git a/templates/base/packages/nextjs/package.json b/templates/base/packages/nextjs/package.json index 3ec055b17..442d02eb9 100644 --- a/templates/base/packages/nextjs/package.json +++ b/templates/base/packages/nextjs/package.json @@ -20,7 +20,7 @@ "@uniswap/sdk-core": "~4.0.1", "@uniswap/v2-sdk": "~3.0.1", "blo": "~1.0.1", - "burner-connector": "~0.0.3", + "burner-connector": "^0.0.3", "daisyui": "4.5.0", "next": "~14.0.4", "next-themes": "~0.2.1",