feat: added vault context, modified vault handling

DLC-link · Dec 4, 2023 · 51a5123 · 51a5123
1 parent e6329f4
commit 51a5123
Show file tree

Hide file tree

Showing 11 changed files with 125 additions and 59 deletions.
diff --git a/src/app/app.tsx b/src/app/app.tsx
@@ -6,15 +6,18 @@ import { MyVaults } from "@pages/my-vaults/my-vaults";
 import { About } from "./pages/about/about";
 import { Dashboard } from "./pages/dashboard/dashboard";
 import { BlockchainContextProvider } from "./providers/blockchain-context-provider";
+import { VaultContextProvider } from "./providers/vault-context-provider";
 
 export function App(): React.JSX.Element {
   return (
     <BlockchainContextProvider>
-      <AppLayout>
-        <Route path="/" element={<Dashboard />} />
-        <Route path="/my-vaults" element={<MyVaults />} />
-        <Route path="/how-it-works" element={<About />} />
-      </AppLayout>
+      <VaultContextProvider>
+        <AppLayout>
+          <Route path="/" element={<Dashboard />} />
+          <Route path="/my-vaults" element={<MyVaults />} />
+          <Route path="/how-it-works" element={<About />} />
+        </AppLayout>
+      </VaultContextProvider>
     </BlockchainContextProvider>
   );
 }
diff --git a/src/app/components/my-vaults-small/my-vaults-small.tsx b/src/app/components/my-vaults-small/my-vaults-small.tsx
@@ -1,16 +1,13 @@
+import { useContext } from "react";
 import { useNavigate } from "react-router-dom";
 
-import { Button } from "@chakra-ui/react";
+import { Button, Skeleton } from "@chakra-ui/react";
 import { VaultsListGroupBlankContainer } from "@components/vaults-list/components/vaults-list-group-blank-container";
 import { VaultsList } from "@components/vaults-list/vaults-list";
-import { useVaults } from "@hooks/use-vaults";
 
+import { VaultContext } from "../../providers/vault-context-provider";
 import { VaultsListGroupContainer } from "../vaults-list/components/vaults-list-group-container";
 import { MyVaultsSmallLayout } from "./components/my-vaults-small.layout";
-import { useContext, useEffect, useState } from "react";
-import { BlockchainContext } from "../../providers/blockchain-context-provider";
-import { useSelector } from "react-redux";
-import { RootState } from "@store/index";
 
 interface MyVaultsSmallProps {
   address?: string;
@@ -20,35 +17,26 @@ export function MyVaultsSmall({
   address,
 }: MyVaultsSmallProps): React.JSX.Element {
   const navigate = useNavigate();
-  const [isLoaded, setIsLoaded] = useState(false);
-  const { network } = useSelector((state: RootState) => state.account);
-  const blockchainContext = useContext(BlockchainContext);
-  const ethereum = blockchainContext?.ethereum;
+
+  const vaultContext = useContext(VaultContext);
   const {
     readyVaults,
     fundingVaults,
     fundedVaults,
     closingVaults,
     closedVaults,
-  } = useVaults();
-
-  useEffect(() => {
-    if (address && network && ethereum?.isLoaded) {
-      const fetchAddressData = async () => {
-        await ethereum?.getAllVaults();
-        await ethereum?.getDLCBTCBalance();
-        await ethereum?.getLockedBTCBalance();
-        setIsLoaded(true);
-      };
-      fetchAddressData();
-    }
-  }, [address, network, ethereum?.isLoaded]);
+    isLoading,
+  } = vaultContext.vaults;
 
   return (
     <MyVaultsSmallLayout>
-      <VaultsList title={"My Vaults"} height={"545px"} isScrollable={!address}>
-        {address && isLoaded ? (
-          <>
+      <VaultsList
+        title={"My Vaults"}
+        height={"545px"}
+        isScrollable={!!address && !isLoading}
+      >
+        {address ? (
+          <Skeleton isLoaded={!isLoading} w={"100%"}>
             <VaultsListGroupContainer label="Lock BTC" vaults={readyVaults} />
             <VaultsListGroupContainer
               label="Locking BTC in Progress"
@@ -66,7 +54,7 @@ export function MyVaultsSmall({
               label="Closed Vaults"
               vaults={closedVaults}
             />
-          </>
+          </Skeleton>
         ) : (
           <VaultsListGroupBlankContainer />
         )}

diff --git a/...onents/my-vaults/components/my-vaults-header/components/my-vaults-header-balance-info.tsx b/...onents/my-vaults/components/my-vaults-header/components/my-vaults-header-balance-info.tsx
@@ -1,5 +1,4 @@
-import { HStack, Image, Text, VStack } from "@chakra-ui/react";
-import { CustomSkeleton } from "@components/custom-skeleton/custom-skeleton";
+import { HStack, Image, Skeleton, Text, VStack } from "@chakra-ui/react";
 
 interface MyVaultsHeaderBalanceInfoProps {
   title: string;
@@ -21,16 +20,14 @@ export function MyVaultsHeaderBalanceInfo({
       <Text color={"accent.cyan.01"} fontWeight={600} fontSize={"md"}>
         {title}
       </Text>
-      <HStack>
-        <Image src={imageSrc} alt={altText} boxSize={"25px"} />
-        {assetAmount !== undefined ? (
+      <Skeleton isLoaded={!!assetAmount} h={"auto"} w={"100%"}>
+        <HStack>
+          <Image src={imageSrc} alt={altText} boxSize={"25px"} />
           <Text color={"white"} fontWeight={800} fontSize={"xl"}>
             {showNone ? "-" : assetAmount}
           </Text>
-        ) : (
-          <CustomSkeleton height={"25px"} />
-        )}
-      </HStack>
+        </HStack>
+      </Skeleton>
     </VStack>
   );
 }
diff --git a/src/app/components/my-vaults/my-vaults-large.tsx b/src/app/components/my-vaults/my-vaults-large.tsx
@@ -1,12 +1,12 @@
-import { useContext } from "react";
+import { useContext, useEffect } 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 { useVaults } from "@hooks/use-vaults";
 import { RootState } from "@store/index";
+import { VaultContext } from "../../providers/vault-context-provider";
 
 import { BlockchainContext } from "../../providers/blockchain-context-provider";
 import { MyVaultsLargeHeader } from "./components/my-vaults-header/my-vaults-header";
@@ -15,16 +15,29 @@ import { MyVaultsSetupInformationStack } from "./components/my-vaults-setup-info
 
 export function MyVaultsLarge(): React.JSX.Element {
   const { address } = useSelector((state: RootState) => state.account);
+
+  const blockchainContext = useContext(BlockchainContext);
+  const ethereum = blockchainContext?.ethereum;
+
+  const vaultContext = useContext(VaultContext);
   const {
     readyVaults,
     fundingVaults,
     fundedVaults,
     closingVaults,
     closedVaults,
-  } = useVaults();
+  } = vaultContext.vaults;
 
-  const blockchainContext = useContext(BlockchainContext);
-  const ethereum = blockchainContext?.ethereum;
+  useEffect(() => {
+    if (!ethereum || !address) return;
+
+    const { getDLCBTCBalance, getLockedBTCBalance } = ethereum;
+    const fetchData = async () => {
+      await getDLCBTCBalance();
+      await getLockedBTCBalance();
+    };
+    fetchData();
+  }, [ethereum?.isLoaded, address]);
 
   return (
     <MyVaultsLargeLayout>
@@ -38,7 +51,7 @@ export function MyVaultsLarge(): React.JSX.Element {
           <VaultsList
             title={"In Process"}
             height={"475px"}
-            isScrollable={!address}
+            isScrollable={!!address}
           >
             <VaultsListGroupContainer label="Lock BTC" vaults={readyVaults} />
             <VaultsListGroupContainer
@@ -56,7 +69,7 @@ export function MyVaultsLarge(): React.JSX.Element {
         <VaultsList
           title={"Minted dlcBTC"}
           height={"475px"}
-          isScrollable={!address}
+          isScrollable={!!address}
         >
           {address ? (
             <VaultsListGroupContainer vaults={fundedVaults} />
@@ -67,7 +80,7 @@ export function MyVaultsLarge(): React.JSX.Element {
         <VaultsList
           title={"Closed Vaults"}
           height={"475px"}
-          isScrollable={!address}
+          isScrollable={!!address}
         >
           {address ? (
             <VaultsListGroupContainer vaults={closedVaults} />

diff --git a/src/app/components/vaults-list/vaults-list.tsx b/src/app/components/vaults-list/vaults-list.tsx
@@ -24,10 +24,10 @@ export function VaultsList({
         </Text>
       )}
       <VStack
-        overflowY={isScrollable ? "hidden" : "scroll"}
+        overflowY={isScrollable ? "scroll" : "hidden"}
         overflowX={"hidden"}
         alignItems={"start"}
-        pr={isScrollable ? "0px" : "15px"}
+        pr={isScrollable ? "15px" : "0px"}
         pb={"15px"}
         w={"100%"}
         css={scrollBarCSS}

diff --git a/src/app/hooks/use-observer.ts b/src/app/hooks/use-observer.ts
@@ -11,9 +11,15 @@ import { VaultState } from "@models/vault";
 export function useObserver(
   ethereum: UseEthereumReturnType,
   dispatch: Dispatch<AnyAction>,
-) {
+): void {
   const { address, network } = useSelector((state: RootState) => state.account);
-  const { protocolContract, dlcBTCContract, getVault } = ethereum;
+  const {
+    protocolContract,
+    dlcBTCContract,
+    getVault,
+    getDLCBTCBalance,
+    getLockedBTCBalance,
+  } = ethereum;
 
   useEffect(() => {
     if (!protocolContract || !dlcBTCContract) return;
@@ -63,6 +69,8 @@ export function useObserver(
         dispatch(mintUnmintActions.setMintStep(0));
         dispatch(modalActions.toggleSuccessfulFlowModalVisibility("mint"));
       });
+      await getDLCBTCBalance();
+      await getLockedBTCBalance();
     });
 
     protocolContract.on("PostCloseDLCHandler", async (...args) => {
@@ -78,6 +86,8 @@ export function useObserver(
         dispatch(mintUnmintActions.setUnmintStep(0));
         dispatch(modalActions.toggleSuccessfulFlowModalVisibility("unmint"));
       });
+      await getDLCBTCBalance();
+      await getLockedBTCBalance();
     });
   }, [protocolContract, dlcBTCContract, network]);
 }
diff --git a/src/app/hooks/use-vaults.ts b/src/app/hooks/use-vaults.ts
@@ -1,18 +1,40 @@
-import { useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useSelector } from "react-redux";
 
 import { Vault, VaultState } from "@models/vault";
 import { RootState } from "@store/index";
 
-export function useVaults(): {
+import { UseEthereumReturnType } from "./use-ethereum";
+
+export interface UseVaultsReturnType {
   readyVaults: Vault[];
   fundingVaults: Vault[];
   fundedVaults: Vault[];
   closingVaults: Vault[];
   closedVaults: Vault[];
-} {
+  isLoading: boolean;
+}
+
+export function useVaults(
+  ethereum?: UseEthereumReturnType,
+): UseVaultsReturnType {
   const { vaults } = useSelector((state: RootState) => state.vault);
-  const { network } = useSelector((state: RootState) => state.account);
+  const { address, network } = useSelector((state: RootState) => state.account);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    if (!address || !network || !ethereum) return;
+    const { getAllVaults, isLoaded: isEthereumConfigLoaded } = ethereum;
+
+    if (!isEthereumConfigLoaded) return;
+
+    const fetchData = async () => {
+      setIsLoading(true);
+      await getAllVaults();
+      setIsLoading(false);
+    };
+    fetchData();
+  }, [address, network, ethereum?.isLoaded]);
 
   const readyVaults = useMemo(
     () =>
@@ -56,5 +78,6 @@ export function useVaults(): {
     closingVaults,
     fundedVaults,
     closedVaults,
+    isLoading,
   };
 }
diff --git a/src/app/providers/blockchain-context-provider.tsx b/src/app/providers/blockchain-context-provider.tsx
@@ -5,7 +5,6 @@ import { UseBitcoinReturnType, useBitcoin } from "@hooks/use-bitcoin";
 import { UseEthereumReturnType, useEthereum } from "@hooks/use-ethereum";
 import { useObserver } from "@hooks/use-observer";
 import { HasChildren } from "@models/has-children";
-
 interface BlockchainContextType {
   ethereum: UseEthereumReturnType;
   bitcoin: UseBitcoinReturnType;

diff --git a/src/app/providers/vault-context-provider.tsx b/src/app/providers/vault-context-provider.tsx
@@ -0,0 +1,32 @@
+import { createContext, useContext } from "react";
+
+import { UseVaultsReturnType, useVaults } from "@hooks/use-vaults";
+import { HasChildren } from "@models/has-children";
+
+import { BlockchainContext } from "./blockchain-context-provider";
+
+interface VaultContextType {
+  vaults: UseVaultsReturnType;
+}
+
+export const VaultContext = createContext<VaultContextType>({
+  vaults: {
+    readyVaults: [],
+    fundingVaults: [],
+    fundedVaults: [],
+    closingVaults: [],
+    closedVaults: [],
+    isLoading: true,
+  },
+});
+
+export function VaultContextProvider({
+  children,
+}: HasChildren): React.JSX.Element {
+  const blockchainContext = useContext(BlockchainContext);
+  const vaults = useVaults(blockchainContext?.ethereum);
+
+  return (
+    <VaultContext.Provider value={{ vaults }}>{children}</VaultContext.Provider>
+  );
+}
diff --git a/src/app/store/index.ts b/src/app/store/index.ts
@@ -38,7 +38,7 @@ const rootReducer = combineReducers({
 const persistConfig: PersistConfig<RootState> = {
   key: "root",
   storage: storage,
-  whitelist: ["account", "vault", "mintunmint"],
+  whitelist: ["account", "vault"],
   transforms: [
     expireReducer("account", {
       persistedAtKey: "loadedAt",

diff --git a/src/app/store/slices/modal/modal.slice.ts b/src/app/store/slices/modal/modal.slice.ts
@@ -18,6 +18,7 @@ export const modalSlice = createSlice({
       state.isSelectWalletModalOpen = !state.isSelectWalletModalOpen;
     },
     toggleSuccessfulFlowModalVisibility: (state, action) => {
+      console.log(action.payload);
       state.isSuccesfulFlowModalOpen = [
         !state.isSuccesfulFlowModalOpen[0],
         action.payload,