add useWatchBalance hook (#829)

scaffold-eth · May 1, 2024 · e08fca0 · e08fca0
1 parent 0abf227
commit e08fca0
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 29 deletions.
diff --git a/packages/nextjs/components/scaffold-eth/Balance.tsx b/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">

diff --git a/packages/nextjs/components/scaffold-eth/FaucetButton.tsx b/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/packages/nextjs/hooks/scaffold-eth/useWatchBalance.ts b/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;
+};