From 962d4ebb9841dff146030f20d6fbd51845073e78 Mon Sep 17 00:00:00 2001 From: Polybius93 Date: Wed, 6 Dec 2023 16:35:58 +0100 Subject: [PATCH 1/2] feat: modified dlcBTC and lockedBTC balance handling --- .../components/my-vaults/my-vaults-large.tsx | 26 ++++++++++++++----- src/app/hooks/use-ethereum.ts | 22 +++++----------- src/app/hooks/use-observer.ts | 12 +-------- 3 files changed, 26 insertions(+), 34 deletions(-) diff --git a/src/app/components/my-vaults/my-vaults-large.tsx b/src/app/components/my-vaults/my-vaults-large.tsx index cc29eb2a..c0de11df 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, useEffect, useState } from "react"; import { useSelector } from "react-redux"; import { HStack } from "@chakra-ui/react"; @@ -6,9 +6,9 @@ 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"; @@ -18,6 +18,12 @@ export function MyVaultsLarge(): React.JSX.Element { const blockchainContext = useContext(BlockchainContext); const ethereum = blockchainContext?.ethereum; + const [dlcBTCBalance, setDLCBTCBalance] = useState( + undefined, + ); + const [lockedBTCBalance, setLockedBTCBalance] = useState( + undefined, + ); const vaultContext = useContext(VaultContext); const { @@ -33,18 +39,24 @@ export function MyVaultsLarge(): React.JSX.Element { const { getDLCBTCBalance, getLockedBTCBalance } = ethereum; const fetchData = async () => { - await getDLCBTCBalance(); - await getLockedBTCBalance(); + const currentTokenBalance = await getDLCBTCBalance(); + if (currentTokenBalance !== dlcBTCBalance) { + setDLCBTCBalance(currentTokenBalance); + } + const currentLockedBTCBalance = await getLockedBTCBalance(); + if (currentLockedBTCBalance !== lockedBTCBalance) { + setLockedBTCBalance(currentLockedBTCBalance); + } }; fetchData(); - }, [ethereum?.isLoaded, address]); + }, [address, vaultContext.vaults]); 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]); } From bce227d46b8d35ef57ba71a0a592f05b39bc8dd7 Mon Sep 17 00:00:00 2001 From: Polybius93 Date: Wed, 6 Dec 2023 16:55:02 +0100 Subject: [PATCH 2/2] feat: added balance context provider --- src/app/app.tsx | 13 ++-- .../components/my-vaults/my-vaults-large.tsx | 32 +--------- .../providers/balance-context-provider.tsx | 59 +++++++++++++++++++ 3 files changed, 70 insertions(+), 34 deletions(-) create mode 100644 src/app/providers/balance-context-provider.tsx 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 c0de11df..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, 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( - undefined, - ); - const [lockedBTCBalance, setLockedBTCBalance] = useState( - 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 ( ({ + 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} + + ); +}