diff --git a/src/app/app.tsx b/src/app/app.tsx
index 6dad25f7..a74083a7 100644
--- a/src/app/app.tsx
+++ b/src/app/app.tsx
@@ -5,6 +5,7 @@ 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";
@@ -12,11 +13,13 @@ export function App(): React.JSX.Element {
return (
-
- } />
- } />
- } />
-
+
+
+ } />
+ } />
+ } />
+
+
);
diff --git a/src/app/components/my-vaults/my-vaults-large.tsx b/src/app/components/my-vaults/my-vaults-large.tsx
index cc29eb2a..63d877e0 100644
--- a/src/app/components/my-vaults/my-vaults-large.tsx
+++ b/src/app/components/my-vaults/my-vaults-large.tsx
@@ -1,4 +1,4 @@
-import { useContext, useEffect } from "react";
+import { useContext } from "react";
import { useSelector } from "react-redux";
import { HStack } from "@chakra-ui/react";
@@ -6,19 +6,16 @@ import { VaultsListGroupBlankContainer } from "@components/vaults-list/component
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 (
{address ? (
diff --git a/src/app/hooks/use-ethereum.ts b/src/app/hooks/use-ethereum.ts
index 4e3b323e..502180c0 100644
--- a/src/app/hooks/use-ethereum.ts
+++ b/src/app/hooks/use-ethereum.ts
@@ -25,10 +25,8 @@ export interface UseEthereumReturnType {
protocolContract: Contract | undefined;
dlcManagerContract: Contract | undefined;
dlcBTCContract: Contract | undefined;
- dlcBTCBalance: number | undefined;
- getDLCBTCBalance: () => Promise;
- lockedBTCBalance: number | undefined;
- getLockedBTCBalance: () => Promise;
+ getDLCBTCBalance: () => Promise;
+ getLockedBTCBalance: () => Promise;
totalSupply: number | undefined;
requestEthereumAccount: (
network: Network,
@@ -74,12 +72,6 @@ export function useEthereum(): UseEthereumReturnType {
undefined,
);
- const [dlcBTCBalance, setDLCBTCBalance] = useState(
- undefined,
- );
- const [lockedBTCBalance, setLockedBTCBalance] = useState(
- undefined,
- );
const [totalSupply, setTotalSupply] = useState(undefined);
useEffect(() => {
@@ -338,19 +330,19 @@ export function useEthereum(): UseEthereumReturnType {
}
}
- async function getLockedBTCBalance(): Promise {
+ async function getLockedBTCBalance(): Promise {
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 {
+ async function getDLCBTCBalance(): Promise {
try {
if (!dlcBTCContract) throw new Error("Protocol contract not initialized");
await dlcBTCContract.callStatic.balanceOf(address);
@@ -359,7 +351,7 @@ export function useEthereum(): UseEthereumReturnType {
8,
true,
);
- setDLCBTCBalance(dlcBTCBalance);
+ return dlcBTCBalance;
} catch (error) {
throwEthereumError(`Could not fetch dlcBTC balance: `, error);
}
@@ -474,9 +466,7 @@ export function useEthereum(): UseEthereumReturnType {
protocolContract,
dlcManagerContract,
dlcBTCContract,
- dlcBTCBalance,
getDLCBTCBalance,
- lockedBTCBalance,
totalSupply,
getLockedBTCBalance,
requestEthereumAccount,
diff --git a/src/app/hooks/use-observer.ts b/src/app/hooks/use-observer.ts
index 3cea3a1e..914242ed 100644
--- a/src/app/hooks/use-observer.ts
+++ b/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]);
}
diff --git a/src/app/providers/balance-context-provider.tsx b/src/app/providers/balance-context-provider.tsx
new file mode 100644
index 00000000..95a8cd1b
--- /dev/null
+++ b/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({
+ 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(
+ undefined,
+ );
+ const [lockedBTCBalance, setLockedBTCBalance] = useState(
+ 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 (
+
+ {children}
+
+ );
+}