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