Add use effect on Balance component for the price (#856)

scaffold-eth · May 31, 2024 · 5df118e · 5df118e
1 parent c670c1f
commit 5df118e
Showing 1 changed file with 5 additions and 1 deletion.
diff --git a/packages/nextjs/components/scaffold-eth/Balance.tsx b/packages/nextjs/components/scaffold-eth/Balance.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Address, formatEther } from "viem";
 import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
 import { useWatchBalance } from "~~/hooks/scaffold-eth/useWatchBalance";
@@ -28,6 +28,10 @@ export const Balance = ({ address, className = "", usdMode }: BalanceProps) => {
 
   const [displayUsdMode, setDisplayUsdMode] = useState(price > 0 ? Boolean(usdMode) : false);
 
+  useEffect(() => {
+    setDisplayUsdMode(price > 0 ? Boolean(usdMode) : false);
+  }, [usdMode, price]);
+
   const toggleBalanceMode = () => {
     if (price > 0) {
       setDisplayUsdMode(prevMode => !prevMode);