Removed useAccountBalance

packages/nextjs/components/scaffold-eth/Balance.tsx

@@ -2,8 +2,9 @@
 
 import { useState } from "react";
 import { Address } from "viem";
-import { useAccountBalance } from "~~/hooks/scaffold-eth";
+import { useBalance } from "wagmi";
 import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
+import { useGlobalState } from "~~/services/store/store";
 
 type BalanceProps = {
   address?: Address;
@@ -16,7 +17,17 @@ type BalanceProps = {
  */
 export const Balance = ({ address, className = "", usdMode }: BalanceProps) => {
   const { targetNetwork } = useTargetNetwork();
-  const { balance, price, isError, isLoading } = useAccountBalance(address);
+
+  const price = useGlobalState(state => state.nativeCurrencyPrice);
+  const {
+    data: balance,
+    isError,
+    isLoading,
+  } = useBalance({
+    address,
+    watch: true,
+  });
+
   const [displayUsdMode, setDisplayUsdMode] = useState(price > 0 ? Boolean(usdMode) : false);
 
   const toggleBalanceMode = () => {
@@ -44,6 +55,8 @@ export const Balance = ({ address, className = "", usdMode }: BalanceProps) => {
     );
   }
 
+  const formattedBalance = balance ? Number(balance.formatted) : 0;
+
   return (
     <button
       className={`btn btn-sm btn-ghost flex flex-col font-normal items-center hover:bg-transparent ${className}`}
@@ -53,11 +66,11 @@ export const Balance = ({ address, className = "", usdMode }: BalanceProps) => {
         {displayUsdMode ? (
           <>
             <span className="text-[0.8em] font-bold mr-1">$</span>
-            <span>{(balance * price).toFixed(2)}</span>
+            <span>{(formattedBalance * price).toFixed(2)}</span>
           </>
         ) : (
           <>
-            <span>{balance?.toFixed(4)}</span>
+            <span>{formattedBalance.toFixed(4)}</span>
             <span className="text-[0.8em] font-bold ml-1">{targetNetwork.nativeCurrency.symbol}</span>
           </>
         )}

packages/nextjs/components/scaffold-eth/FaucetButton.tsx

@@ -4,8 +4,9 @@ import { useState } from "react";
 import { createWalletClient, http, parseEther } from "viem";
 import { hardhat } from "viem/chains";
 import { useAccount, useNetwork } from "wagmi";
+import { useBalance } from "wagmi";
 import { BanknotesIcon } from "@heroicons/react/24/outline";
-import { useAccountBalance, useTransactor } from "~~/hooks/scaffold-eth";
+import { useTransactor } from "~~/hooks/scaffold-eth";
 
 // Number of ETH faucet sends to an address
 const NUM_OF_ETH = "1";
@@ -21,7 +22,11 @@ const localWalletClient = createWalletClient({
  */
 export const FaucetButton = () => {
   const { address } = useAccount();
-  const { balance } = useAccountBalance(address);
+
+  const { data: balance } = useBalance({
+    address,
+    watch: true,
+  });
 
   const { chain: ConnectedChain } = useNetwork();
 
@@ -50,10 +55,12 @@ export const FaucetButton = () => {
     return null;
   }
 
+  const isBalanceZero = balance && balance.value === 0n;
+
   return (
     <div
       className={
-        balance
+        !isBalanceZero
           ? "ml-1"
           : "ml-1 tooltip tooltip-bottom tooltip-secondary tooltip-open font-bold before:left-auto before:transform-none before:content-[attr(data-tip)] before:right-0"
       }

packages/nextjs/hooks/scaffold-eth/index.ts

@@ -1,4 +1,3 @@
-export * from "./useAccountBalance";
 export * from "./useAnimationConfig";
 export * from "./useBurnerWallet";
 export * from "./useDeployedContractInfo";