feat: added balance context provider

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,4 +1,4 @@
-import { useContext, useEffect, useState } from "react";
+import { useContext } from "react";
 import { useSelector } from "react-redux";
 
 import { HStack } from "@chakra-ui/react";
@@ -7,24 +7,15 @@ import { VaultsListGroupContainer } from "@components/vaults-list/components/vau
 import { VaultsList } from "@components/vaults-list/vaults-list";
 import { RootState } from "@store/index";
 
-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, setDLCBTCBalance] = useState<number | undefined>(
-    undefined,
-  );
-  const [lockedBTCBalance, setLockedBTCBalance] = useState<number | undefined>(
-    undefined,
-  );
-
+  const { dlcBTCBalance, lockedBTCBalance } = useContext(BalanceContext);
   const vaultContext = useContext(VaultContext);
   const {
     readyVaults,
@@ -34,23 +25,6 @@ export function MyVaultsLarge(): React.JSX.Element {
     closedVaults,
   } = vaultContext.vaults;
 
-  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, vaultContext.vaults]);
-
   return (
     <MyVaultsLargeLayout>
       <MyVaultsLargeHeader

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