Merge pull request #17 from scaffold-eth/fix/burner-connector-version

.changeset/curvy-drinks-wave.md

@@ -0,0 +1,5 @@
+---
+"create-eth": patch
+---
+
+add useWatchBalance hook

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 (
       <div className="animate-pulse flex space-x-4">

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

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

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