feat: modified dlcBTC and lockedBTC balance handling

src/app/app.tsx

@@ -5,18 +5,21 @@ import { MyVaults } from "@pages/my-vaults/my-vaults";
 
 import { About } from "./pages/about/about";
 import { Dashboard } from "./pages/dashboard/dashboard";
+import { BalanceContextProvider } from "./providers/balance-context-provider";
 import { BlockchainContextProvider } from "./providers/blockchain-context-provider";
 import { VaultContextProvider } from "./providers/vault-context-provider";
 
 export function App(): React.JSX.Element {
   return (
     <BlockchainContextProvider>
       <VaultContextProvider>
-        <AppLayout>
-          <Route path="/" element={<Dashboard />} />
-          <Route path="/my-vaults" element={<MyVaults />} />
-          <Route path="/how-it-works" element={<About />} />
-        </AppLayout>
+        <BalanceContextProvider>
+          <AppLayout>
+            <Route path="/" element={<Dashboard />} />
+            <Route path="/my-vaults" element={<MyVaults />} />
+            <Route path="/how-it-works" element={<About />} />
+          </AppLayout>
+        </BalanceContextProvider>
       </VaultContextProvider>
     </BlockchainContextProvider>
   );

src/app/components/my-vaults/my-vaults-large.tsx

@@ -1,24 +1,21 @@
-import { useContext, useEffect } from "react";
+import { useContext } from "react";
 import { useSelector } from "react-redux";
 
 import { HStack } from "@chakra-ui/react";
 import { VaultsListGroupBlankContainer } from "@components/vaults-list/components/vaults-list-group-blank-container";
 import { VaultsListGroupContainer } from "@components/vaults-list/components/vaults-list-group-container";
 import { VaultsList } from "@components/vaults-list/vaults-list";
 import { RootState } from "@store/index";
-import { VaultContext } from "../../providers/vault-context-provider";
 
-import { BlockchainContext } from "../../providers/blockchain-context-provider";
+import { VaultContext } from "../../providers/vault-context-provider";
 import { MyVaultsLargeHeader } from "./components/my-vaults-header/my-vaults-header";
 import { MyVaultsLargeLayout } from "./components/my-vaults-large.layout";
 import { MyVaultsSetupInformationStack } from "./components/my-vaults-setup-information-stack";
+import { BalanceContext } from "../../providers/balance-context-provider";
 
 export function MyVaultsLarge(): React.JSX.Element {
   const { address } = useSelector((state: RootState) => state.account);
-
-  const blockchainContext = useContext(BlockchainContext);
-  const ethereum = blockchainContext?.ethereum;
-
+  const { dlcBTCBalance, lockedBTCBalance } = useContext(BalanceContext);
   const vaultContext = useContext(VaultContext);
   const {
     readyVaults,
@@ -28,23 +25,12 @@ export function MyVaultsLarge(): React.JSX.Element {
     closedVaults,
   } = vaultContext.vaults;
 
-  useEffect(() => {
-    if (!ethereum || !address) return;
-
-    const { getDLCBTCBalance, getLockedBTCBalance } = ethereum;
-    const fetchData = async () => {
-      await getDLCBTCBalance();
-      await getLockedBTCBalance();
-    };
-    fetchData();
-  }, [ethereum?.isLoaded, address]);
-
   return (
     <MyVaultsLargeLayout>
       <MyVaultsLargeHeader
         address={address}
-        dlcBTCBalance={ethereum?.dlcBTCBalance}
-        lockedBTCBalance={ethereum?.lockedBTCBalance}
+        dlcBTCBalance={dlcBTCBalance}
+        lockedBTCBalance={lockedBTCBalance}
       />
       <HStack spacing={"35px"} w={"100%"}>
         {address ? (

src/app/hooks/use-ethereum.ts

@@ -25,10 +25,8 @@
   protocolContract: Contract | undefined;
   dlcManagerContract: Contract | undefined;
   dlcBTCContract: Contract | undefined;
-  dlcBTCBalance: number | undefined;
-  getDLCBTCBalance: () => Promise<void>;
-  lockedBTCBalance: number | undefined;
-  getLockedBTCBalance: () => Promise<void>;
+  getDLCBTCBalance: () => Promise<number | undefined>;
+  getLockedBTCBalance: () => Promise<number | undefined>;
   totalSupply: number | undefined;
   requestEthereumAccount: (
     network: Network,
@@ -74,19 +72,13 @@
     undefined,
   );
 
-  const [dlcBTCBalance, setDLCBTCBalance] = useState<number | undefined>(
-    undefined,
-  );
-  const [lockedBTCBalance, setLockedBTCBalance] = useState<number | undefined>(
-    undefined,
-  );
   const [totalSupply, setTotalSupply] = useState<number | undefined>(undefined);
 
   useEffect(() => {
     const fetchTotalSupply = async () => {
       await getTotalSupply();
     };
     fetchTotalSupply();
   }, [network]);
 
   useEffect(() => {
@@ -98,7 +90,7 @@
         await setupEthereumConfiguration(network, currentWalletType);
         setIsLoaded(true);
       };
       setupConfiguration();
     }
   }, [address, network, protocolContract, dlcManagerContract, dlcBTCContract]);
 
@@ -323,7 +315,7 @@
     const contractVersion = import.meta.env.VITE_ETHEREUM_DEPLOYMENT_VERSION;
     const deploymentPlanURL = `https://raw.githubusercontent.com/DLC-link/dlc-solidity/${branchName}/deploymentFiles/${network?.name.toLowerCase()}/v${contractVersion}/${contractName}.json`;
 
     console.log(
       `Fetching deployment info for ${contractName} on ${network?.name} from dlc-solidity/${branchName}`,
     );
 
@@ -338,19 +330,19 @@
     }
   }
 
-  async function getLockedBTCBalance(): Promise<void> {
+  async function getLockedBTCBalance(): Promise<number | undefined> {
     try {
       const totalCollateral = fundedVaults.reduce(
         (sum: number, vault: Vault) => sum + vault.collateral,
         0,
       );
-      setLockedBTCBalance(Number(totalCollateral.toFixed(5)));
+      return Number(totalCollateral.toFixed(5));
     } catch (error) {
       throwEthereumError(`Could not fetch locked BTC balance: `, error);
     }
   }
 
-  async function getDLCBTCBalance(): Promise<void> {
+  async function getDLCBTCBalance(): Promise<number | undefined> {
     try {
       if (!dlcBTCContract) throw new Error("Protocol contract not initialized");
       await dlcBTCContract.callStatic.balanceOf(address);
@@ -359,7 +351,7 @@
         8,
         true,
       );
-      setDLCBTCBalance(dlcBTCBalance);
+      return dlcBTCBalance;
     } catch (error) {
       throwEthereumError(`Could not fetch dlcBTC balance: `, error);
     }
@@ -474,9 +466,7 @@
     protocolContract,
     dlcManagerContract,
     dlcBTCContract,
-    dlcBTCBalance,
     getDLCBTCBalance,
-    lockedBTCBalance,
     totalSupply,
     getLockedBTCBalance,
     requestEthereumAccount,

src/app/hooks/use-observer.ts

@@ -10,13 +10,7 @@ import { UseEthereumReturnType } from "./use-ethereum";
 export function useObserver(ethereum: UseEthereumReturnType): void {
   const dispatch = useDispatch();
   const { address, network } = useSelector((state: RootState) => state.account);
-  const {
-    protocolContract,
-    dlcBTCContract,
-    getVault,
-    getDLCBTCBalance,
-    getLockedBTCBalance,
-  } = ethereum;
+  const { protocolContract, dlcBTCContract, getVault } = ethereum;
 
   useEffect(() => {
     if (!protocolContract || !dlcBTCContract) return;
@@ -66,8 +60,6 @@ export function useObserver(ethereum: UseEthereumReturnType): void {
         dispatch(mintUnmintActions.setMintStep(0));
         dispatch(modalActions.toggleSuccessfulFlowModalVisibility("mint"));
       });
-      await getDLCBTCBalance();
-      await getLockedBTCBalance();
     });
 
     protocolContract.on("PostCloseDLCHandler", async (...args) => {
@@ -83,8 +75,6 @@ export function useObserver(ethereum: UseEthereumReturnType): void {
         dispatch(mintUnmintActions.setUnmintStep(0));
         dispatch(modalActions.toggleSuccessfulFlowModalVisibility("unmint"));
       });
-      await getDLCBTCBalance();
-      await getLockedBTCBalance();
     });
   }, [protocolContract, dlcBTCContract, network]);
 }

src/app/providers/balance-context-provider.tsx

@@ -0,0 +1,59 @@
+import { createContext, useContext, useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+
+import { HasChildren } from "@models/has-children";
+import { RootState } from "@store/index";
+
+import { BlockchainContext } from "./blockchain-context-provider";
+import { VaultContext } from "./vault-context-provider";
+
+interface VaultContextType {
+  dlcBTCBalance: number | undefined;
+  lockedBTCBalance: number | undefined;
+}
+
+export const BalanceContext = createContext<VaultContextType>({
+  dlcBTCBalance: undefined,
+  lockedBTCBalance: undefined,
+});
+
+export function BalanceContextProvider({
+  children,
+}: HasChildren): React.JSX.Element {
+  const { address } = useSelector((state: RootState) => state.account);
+
+  const blockchainContext = useContext(BlockchainContext);
+  const { vaults } = useContext(VaultContext);
+
+  const ethereum = blockchainContext?.ethereum;
+
+  const [dlcBTCBalance, setDLCBTCBalance] = useState<number | undefined>(
+    undefined,
+  );
+  const [lockedBTCBalance, setLockedBTCBalance] = useState<number | undefined>(
+    undefined,
+  );
+
+  useEffect(() => {
+    if (!ethereum || !address) return;
+
+    const { getDLCBTCBalance, getLockedBTCBalance } = ethereum;
+    const fetchData = async () => {
+      const currentTokenBalance = await getDLCBTCBalance();
+      if (currentTokenBalance !== dlcBTCBalance) {
+        setDLCBTCBalance(currentTokenBalance);
+      }
+      const currentLockedBTCBalance = await getLockedBTCBalance();
+      if (currentLockedBTCBalance !== lockedBTCBalance) {
+        setLockedBTCBalance(currentLockedBTCBalance);
+      }
+    };
+    fetchData();
+  }, [address, vaults]);
+
+  return (
+    <BalanceContext.Provider value={{ dlcBTCBalance, lockedBTCBalance }}>
+      {children}
+    </BalanceContext.Provider>
+  );
+}