Merge pull request #10 from DLC-link/Fix/vault-rendering

fix: fixed balance and vault rendering, updated confirmation checker

src/app/components/mint-unmint/components/lock-screen/lock-screen.tsx

@@ -1,25 +1,36 @@
+import { useContext, useState } from "react";
+
 import { Button, VStack } from "@chakra-ui/react";
 import { VaultCard } from "@components/vault/vault-card";
 import { useVaults } from "@hooks/use-vaults";
 
-import { LockScreenProtocolFee } from "./components/protocol-fee";
-import { useContext } from "react";
 import { BlockchainContext } from "../../../../providers/blockchain-context-provider";
+import { LockScreenProtocolFee } from "./components/protocol-fee";
 
 export function LockScreen(): React.JSX.Element {
   const { readyVaults } = useVaults();
   const blockchainContext = useContext(BlockchainContext);
   const bitcoin = blockchainContext?.bitcoin;
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   return (
     <VStack w={"300px"} spacing={"15px"}>
       <VaultCard vault={readyVaults[0]} isSelected />
       <LockScreenProtocolFee assetAmount={readyVaults[0].collateral} />
       <Button
+        isLoading={isSubmitting}
         variant={"account"}
-        onClick={() =>
-          bitcoin?.fetchBitcoinContractOfferAndSendToUserWallet(readyVaults[0])
-        }
+        onClick={async () => {
+          try {
+            setIsSubmitting(true);
+            await bitcoin?.fetchBitcoinContractOfferAndSendToUserWallet(
+              readyVaults[0],
+            );
+          } catch (error) {
+            setIsSubmitting(false);
+            throw new Error("Error locking vault");
+          }
+        }}
       >
         Lock BTC
       </Button>

src/app/components/mint-unmint/components/transaction-summary/transaction-summary.tsx

@@ -51,8 +51,10 @@ export function TransactionSummary({
 
   function getVault(flow: "mint" | "unmint", currentStep: number) {
     if (flow === "mint") {
+      console.log("fundedVaults", fundedVaults[0]);
       return currentStep === 2 ? fundingVaults[0] : fundedVaults[0];
     } else {
+      console.log("closedVaults", closedVaults[0]);
       return currentStep === 1 ? closingVaults[0] : closedVaults[0];
     }
   }

src/app/components/vault/components/vault-information.tsx

@@ -19,7 +19,9 @@ interface VaultInformationProps {
   isExpanded: boolean;
   isSelectable?: boolean;
   isSelected?: boolean;
+  isSubmitting: boolean;
   handleClick: () => void;
+  handleLock: () => void;
 }
 
 export function VaultInformation({
@@ -29,7 +31,9 @@ export function VaultInformation({
   isExpanded,
   isSelectable,
   isSelected,
+  isSubmitting,
   handleClick,
+  handleLock,
 }: VaultInformationProps): React.JSX.Element {
   const date = new Date(timestamp * 1000).toLocaleDateString("en-US");
 
@@ -60,7 +64,12 @@ export function VaultInformation({
           )}
         </VStack>
       ) : state === VaultState.READY ? (
-        <Button variant={"vault"} w={"85px"}>
+        <Button
+          isLoading={isSubmitting}
+          onClick={() => handleLock()}
+          variant={"vault"}
+          w={"85px"}
+        >
           Lock BTC
         </Button>
       ) : (

src/app/components/vault/vault-card.tsx

@@ -1,9 +1,10 @@
-import React, { useState } from "react";
+import React, { useContext, useState } from "react";
 
 import { CustomSkeleton } from "@components/custom-skeleton/custom-skeleton";
 import { useConfirmationChecker } from "@hooks/use-confirmation-checker";
 import { Vault, VaultState } from "@models/vault";
 
+import { BlockchainContext } from "../../providers/blockchain-context-provider";
 import { VaultCardLayout } from "./components/vault-card.layout";
 import { VaultExpandedInformation } from "./components/vault-expanded-information/vault-expanded-information";
 import { VaultInformation } from "./components/vault-information";
@@ -22,13 +23,29 @@ export function VaultCard({
   isSelectable = false,
   handleSelect,
 }: VaultBoxProps): React.JSX.Element {
+  const blockchainContext = useContext(BlockchainContext);
+  const bitcoin = blockchainContext?.bitcoin;
+
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(isSelected ? true : false);
+
+  async function handleLock(): Promise<void> {
+    if (!vault) return;
+    setIsSubmitting(true);
+    console.log("vault", vault);
+    try {
+      await bitcoin?.fetchBitcoinContractOfferAndSendToUserWallet(vault);
+    } catch (error) {
+      setIsSubmitting(false);
+      throw new Error("Error locking vault");
+    }
+  }
+
   const confirmations = useConfirmationChecker(
     vault?.state === VaultState.FUNDING ? vault?.fundingTX : vault?.closingTX,
     vault?.state,
   );
 
-  const [isExpanded, setIsExpanded] = useState(isSelected ? true : false);
-
   if (!vault) return <CustomSkeleton height={"65px"} />;
 
   return (
@@ -43,7 +60,9 @@ export function VaultCard({
         isExpanded={isExpanded}
         isSelected={isSelected}
         isSelectable={isSelectable}
+        isSubmitting={isSubmitting}
         handleClick={() => setIsExpanded(!isExpanded)}
+        handleLock={handleLock}
       />
       {isExpanded && (
         <VaultExpandedInformation

src/app/hooks/use-confirmation-checker.ts

@@ -68,7 +68,7 @@ export function useConfirmationChecker(
       10000,
     ) as unknown as number; // Cleanup the interval when the component unmounts
     return () => clearInterval(fetchInterval.current);
-  }, []);
+  }, [vaultState, txID]);
 
   return memoizedTransactionProgress;
 }

src/app/hooks/use-ethereum.ts

@@ -72,7 +72,13 @@ export function useEthereum(): UseEthereumReturn {
     };
 
     fetchBalance();
-  }, [address, fundedVaults]);
+  }, [
+    address,
+    fundedVaults,
+    protocolContract,
+    dlcManagerContract,
+    dlcBTCContract,
+  ]);
 
   function formatVault(vault: any): Vault {
     return {
@@ -230,7 +236,7 @@ export function useEthereum(): UseEthereumReturn {
         (sum: number, vault: Vault) => sum + vault.collateral,
         0,
       );
-      setLockedBTCBalance(totalCollateral);
+      setLockedBTCBalance(Number(totalCollateral.toFixed(4)));
     } catch (error) {
       throw new Error(`Could not fetch BTC balance: ${error}`);
     }
@@ -239,7 +245,12 @@ export function useEthereum(): UseEthereumReturn {
   async function getDLCBTCBalance(): Promise<void> {
     try {
       if (!dlcBTCContract) throw new Error("Protocol contract not initialized");
-      setDLCBTCBalance(parseInt(await dlcBTCContract.balanceOf(address)));
+      const dlcBTCBalance = customShiftValue(
+        parseInt(await dlcBTCContract.balanceOf(address)),
+        8,
+        true,
+      );
+      setDLCBTCBalance(dlcBTCBalance);
     } catch (error) {
       throw new Error(`Could not fetch BTC balance: ${error}`);
     }

src/app/hooks/use-observer.ts

@@ -37,22 +37,18 @@ export function useObserver(
     });
 
     protocolContract.on("CloseVault", async (...args) => {
-      console.log("CloseVault", args);
       const vaultOwner: string = args[2];
 
       if (vaultOwner.toLowerCase() !== address) return;
 
       const vaultUUID = args[0];
 
       console.log(`Vault ${vaultUUID} is closing`);
-
-      await getVault(vaultUUID).then(() => {
-        dispatch(mintUnmintActions.setUnmintStep(1));
-      });
+      await getVault(vaultUUID);
+      dispatch(mintUnmintActions.setUnmintStep(1));
     });
 
     protocolContract.on("SetStatusFunded", async (...args) => {
-      console.log("SetStatusFunded", args);
       const vaultOwner = args[2];
 
       if (vaultOwner.toLowerCase() !== address) return;
@@ -67,7 +63,6 @@ export function useObserver(
     });
 
     protocolContract.on("PostCloseDLCHandler", async (...args) => {
-      console.log("PostCloseDLCHandler", args);
       const vaultOwner = args[2];
 
       if (vaultOwner.toLowerCase() !== address) return;

src/app/hooks/use-vaults.ts

@@ -24,28 +24,28 @@ export function useVaults(): {
     () =>
       vaults
         .filter((vault) => vault.state === VaultState.FUNDED)
-        .sort((a, b) => a.timestamp - b.timestamp),
+        .sort((a, b) => b.timestamp - a.timestamp),
     [vaults],
   );
   const fundingVaults = useMemo(
     () =>
       vaults
         .filter((vault) => vault.state === VaultState.FUNDING)
-        .sort((a, b) => a.timestamp - b.timestamp),
+        .sort((a, b) => b.timestamp - a.timestamp),
     [vaults],
   );
   const closingVaults = useMemo(
     () =>
       vaults
         .filter((vault) => vault.state === VaultState.CLOSING)
-        .sort((a, b) => a.timestamp - b.timestamp),
+        .sort((a, b) => b.timestamp - a.timestamp),
     [vaults],
   );
   const closedVaults = useMemo(
     () =>
       vaults
         .filter((vault) => vault.state === VaultState.CLOSED)
-        .sort((a, b) => a.timestamp - b.timestamp),
+        .sort((a, b) => b.timestamp - a.timestamp),
     [vaults],
   );