feat: replaced mint/unmint flow, vault fetching by order with by uuid

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

@@ -6,34 +6,46 @@ import { useVaults } from "@hooks/use-vaults";
 
 import { BlockchainContext } from "../../../../providers/blockchain-context-provider";
 import { LockScreenProtocolFee } from "./components/protocol-fee";
+import { Vault } from "@models/vault";
 
-export function LockScreen(): React.JSX.Element {
+interface LockScreenProps {
+  currentStep: [number, string];
+}
+
+
+export function LockScreen({ currentStep }: LockScreenProps): React.JSX.Element {
   const { readyVaults } = useVaults();
   const blockchainContext = useContext(BlockchainContext);
   const bitcoin = blockchainContext?.bitcoin;
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  const currentVault = readyVaults.find((vault) => vault.uuid === currentStep[1]);
+
+  async function handleClick(currentVault?: Vault) {
+    if (!currentVault) return;
+
+    try {
+      setIsSubmitting(true);
+      await bitcoin?.fetchBitcoinContractOfferAndSendToUserWallet(
+        currentVault,
+      );
+    } catch (error) {
+      setIsSubmitting(false);
+      throw new Error("Error locking vault");
+    }
+  }
+
   return (
     <VStack w={"300px"} spacing={"15px"}>
-      <VaultCard vault={readyVaults[0]} isSelected />
+      <VaultCard vault={currentVault} isSelected />
       <LockScreenProtocolFee
-        assetAmount={readyVaults[0].collateral}
+        assetAmount={currentVault?.collateral}
         bitcoinPrice={bitcoin?.bitcoinPrice}
       />
       <Button
         isLoading={isSubmitting}
         variant={"account"}
-        onClick={async () => {
-          try {
-            setIsSubmitting(true);
-            await bitcoin?.fetchBitcoinContractOfferAndSendToUserWallet(
-              readyVaults[0],
-            );
-          } catch (error) {
-            setIsSubmitting(false);
-            throw new Error("Error locking vault");
-          }
-        }}
+        onClick={() => handleClick(currentVault)}
       >
         Lock BTC
       </Button>

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

@@ -16,17 +16,17 @@ export function Mint(): React.JSX.Element {
   const { mintStep } = useSelector((state: RootState) => state.mintunmint);
 
   function handleRestart() {
-    dispatch(mintUnmintActions.setMintStep(0));
+    dispatch(mintUnmintActions.setMintStep([0, '']));
   }
 
   return (
     <MintLayout>
-      <ProgressTimeline variant={"mint"} currentStep={mintStep} />
+      <ProgressTimeline variant={"mint"} currentStep={mintStep[0]} />
       <HStack w={"100%"} alignItems={"start"} justifyContent={"space-between"}>
-        <Walkthrough flow={"mint"} currentStep={mintStep} />
-        {[0].includes(mintStep) && <TransactionForm />}
-        {[1].includes(mintStep) && <LockScreen />}
-        {[2, 3].includes(mintStep) && (
+        <Walkthrough flow={"mint"} currentStep={mintStep[0]} />
+        {[0].includes(mintStep[0]) && <TransactionForm />}
+        {[1].includes(mintStep[0]) && <LockScreen currentStep={mintStep} />}
+        {[2, 3].includes(mintStep[0]) && (
           <TransactionSummary
             currentStep={mintStep}
             flow={"mint"}

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

@@ -1,12 +1,10 @@
-import { useEffect, useState } from "react";
-import { Link } from "react-router-dom";
+import { Link } from 'react-router-dom';
 
-import { HStack, Spinner, Stack, Text, VStack } from "@chakra-ui/react";
-import { VaultCard } from "@components/vault/vault-card";
-import { useVaults } from "@hooks/use-vaults";
-import { Vault } from "@models/vault";
+import { HStack, Spinner, Stack, Text, VStack } from '@chakra-ui/react';
+import { VaultCard } from '@components/vault/vault-card';
+import { useVaults } from '@hooks/use-vaults';
 
-import { TransactionSummaryPreviewCard } from "./components/transaction-summary-preview-card";
+import { TransactionSummaryPreviewCard } from './components/transaction-summary-preview-card';
 
 interface FlowPropertyMap {
   [key: string]: {
@@ -19,90 +17,65 @@ interface FlowPropertyMap {
 
 const flowPropertyMap: FlowPropertyMap = {
   mint: {
-    2: { title: "a) Locking BTC in progress", subtitle: "Minting dlcBTC" },
-    3: { title: "Minted dlcBTC" },
+    2: { title: 'a) Locking BTC in progress', subtitle: 'Minting dlcBTC' },
+    3: { title: 'Minted dlcBTC' },
   },
   unmint: {
     1: {
-      title: "a) Closing vault in progress",
-      subtitle: "Your BTC is being unlocked",
+      title: 'a) Closing vault in progress',
+      subtitle: 'Your BTC is being unlocked',
     },
-    2: { title: "Vault closed" },
+    2: { title: 'Vault closed' },
   },
 };
 
 interface TransactionSummaryProps {
-  currentStep: number;
-  flow: "mint" | "unmint";
-  blockchain: "ethereum" | "bitcoin";
+  currentStep: [number, string];
+  flow: 'mint' | 'unmint';
+  blockchain: 'ethereum' | 'bitcoin';
 }
 
 export function TransactionSummary({
   currentStep,
   flow,
   blockchain,
 }: TransactionSummaryProps): React.JSX.Element {
-  const { fundingVaults, fundedVaults, closingVaults, closedVaults } =
-    useVaults();
-  const [currentVault, setCurrentVault] = useState<Vault>(
-    getVault(flow, currentStep),
-  );
-
-  function getVault(flow: "mint" | "unmint", currentStep: number) {
-    if (flow === "mint") {
-      return currentStep === 2 ? fundingVaults[0] : fundedVaults[0];
-    } else {
-      return currentStep === 1 ? closingVaults[0] : closedVaults[0];
-    }
-  }
+  const { allVaults } = useVaults();
+  const currentVault = allVaults.find(vault => vault.uuid === currentStep[1]);
 
-  useEffect(() => {
-    setCurrentVault(getVault(flow, currentStep));
-  }, [flow, currentStep]);
+  const showProcessing =
+    (flow === 'mint' && currentStep[0] === 2) || (flow === 'unmint' && currentStep[0] === 1);
 
   return (
-    <VStack alignItems={"start"} w={"300px"} spacing={"15px"}>
-      <HStack w={"100%"}>
-        {(flow === "mint" && currentStep === 2) ||
-          (flow === "unmint" && currentStep === 1 && (
-            <Spinner color={"accent.cyan.01"} size={"md"} />
-          ))}
-        <Text color={"accent.cyan.01"}>
-          {flowPropertyMap[flow][currentStep].title}:
-        </Text>
+    <VStack alignItems={'start'} w={'300px'} spacing={'15px'}>
+      <HStack w={'100%'}>
+        {showProcessing && <Spinner color={'accent.cyan.01'} size={'md'} />}
+        <Text color={'accent.cyan.01'}>{flowPropertyMap[flow][currentStep[0]].title}:</Text>
       </HStack>
       <VaultCard vault={currentVault} />
-      {(flow === "mint" && currentStep === 2) ||
-      (flow === "unmint" && currentStep === 1) ? (
+      {showProcessing && (
         <>
-          <Text color={"white.01"}>
-            b) {flowPropertyMap[flow][currentStep].subtitle}:
+          <Text pt={'25px'} color={'white.01'}>
+            b) {flowPropertyMap[flow][currentStep[0]].subtitle}:
           </Text>
           <TransactionSummaryPreviewCard
             blockchain={blockchain}
             assetAmount={currentVault?.collateral}
           />
         </>
-      ) : (
-        false
       )}
       <Stack
-        p={"15px"}
-        w={"100%"}
-        border={"1px solid"}
-        borderRadius={"md"}
-        borderColor={"border.cyan.01"}
+        p={'15px'}
+        w={'100%'}
+        border={'1px solid'}
+        borderRadius={'md'}
+        borderColor={'border.cyan.01'}
       >
-        <Text color={"white.01"} fontSize={"sm"}>
-          You can check all of your vaults' status under{" "}
-          <Text
-            as={Link}
-            to={"/my-vaults"}
-            color={"accent.cyan.01"}
-            textDecoration={"underline"}
-          >
+        <Text color={'white.01'} fontSize={'sm'}>
+          You can check all of your vaults' status under{' '}
+          <Text as={Link} to={'/my-vaults'} color={'accent.cyan.01'} textDecoration={'underline'}>
             My Vaults
-          </Text>{" "}
+          </Text>{' '}
           tab.
         </Text>
       </Stack>

src/app/components/mint-unmint/components/unmint/components/unmint-vault-selector.tsx

@@ -66,7 +66,7 @@ export function UnmintVaultSelector(): React.JSX.Element {
           />
         </VStack>
       ) : (
-        <VaultsList height="358.5px" isScrollable={!!selectedVault}>
+        <VaultsList height="358.5px" isScrollable={!selectedVault}>
           <VaultsListGroupContainer
             vaults={fundedVaults}
             isSelectable

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

@@ -20,11 +20,11 @@ export function Unmint(): React.JSX.Element {
 
   return (
     <UnmintLayout>
-      <ProgressTimeline variant={"unmint"} currentStep={unmintStep} />
+      <ProgressTimeline variant={"unmint"} currentStep={unmintStep[0]} />
       <HStack w={"100%"} alignItems={"start"} justifyContent={"space-between"}>
-        <Walkthrough flow={"unmint"} currentStep={unmintStep} />
-        {[0].includes(unmintStep) && <UnmintVaultSelector />}
-        {[1, 2].includes(unmintStep) && (
+        <Walkthrough flow={"unmint"} currentStep={unmintStep[0]} />
+        {[0].includes(unmintStep[0]) && <UnmintVaultSelector />}
+        {[1, 2].includes(unmintStep[0]) && (
           <TransactionSummary
             currentStep={unmintStep}
             flow={"unmint"}

src/app/components/modals/components/modal-container.tsx

@@ -38,6 +38,7 @@ export function ModalContainer(): React.JSX.Element {
           )
         }
         flow={isSuccesfulFlowModalOpen[1]}
+        vaultUUID={isSuccesfulFlowModalOpen[2] ? isSuccesfulFlowModalOpen[2] : ""}
       />
     </>
   );

src/app/components/modals/successful-flow-modal/successful-flow-modal.tsx

@@ -5,12 +5,14 @@ import { ModalLayout } from "../components/modal.layout";
 
 interface SuccessfulFlowModalProps extends ModalComponentProps {
   flow: "mint" | "unmint";
+  vaultUUID: string;
 }
 
 export function SuccessfulFlowModal({
   isOpen,
   handleClose,
   flow,
+  vaultUUID
 }: SuccessfulFlowModalProps): React.JSX.Element {
   return (
     <ModalLayout
@@ -19,7 +21,7 @@ export function SuccessfulFlowModal({
       onClose={() => handleClose()}
     >
       <TransactionSummary
-        currentStep={flow === "mint" ? 3 : 2}
+        currentStep={[flow === "mint" ? 3 : 2, vaultUUID]}
         flow={flow}
         blockchain={"ethereum"}
       />

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

@@ -13,7 +13,7 @@ import { useToast } from "@chakra-ui/react";
 import { BitcoinError } from "@models/error-types";
 
 interface VaultCardProps {
-  vault: Vault;
+  vault?: Vault;
   isSelected?: boolean;
   isSelectable?: boolean;
   handleSelect?: () => void;

src/app/components/vaults-list/components/vaults-list-group-container.tsx

@@ -20,9 +20,9 @@ export function VaultsListGroupContainer({
   if (vaults.length === 0) return false;
 
   return (
-    <VStack py={"5px"} alignItems={"start"} w={"100%"} spacing={"15px"}>
+    <VStack pt={"15px"} alignItems={"start"} w={"100%"} spacing={"15px"}>
       {label && (
-        <HStack py={"12.5px"} spacing={"25px"}>
+        <HStack pt={"15px"} spacing={"25px"}>
           {["Locking BTC in Progress", "Unlocking BTC in Progress"].includes(
             label,
           ) && <Spinner color={"accent.cyan.01"} size={"md"} />}

src/app/components/vaults-list/vaults-list.tsx

@@ -19,7 +19,7 @@ export function VaultsList({
   return (
     <FadeLayer height={height} fadeHeight={"35px"}>
       {title && (
-        <Text py={"15px"} color={"white.01"} fontWeight={600}>
+        <Text pt={"15px"} color={"white.01"} fontWeight={600}>
           {title}
         </Text>
       )}

src/app/hooks/use-bitcoin.ts

@@ -60,7 +60,7 @@ export function useBitcoin(): UseBitcoinReturnType {
           networkID: network.id,
         }),
       );
-      dispatch(mintUnmintActions.setMintStep(2));
+      dispatch(mintUnmintActions.setMintStep([2, vaultUUID]));
     } catch (error: any) {
       throw new BitcoinError(
         `Could not send contract offer for signing: ${error.error.message}`,

src/app/hooks/use-observer.ts

@@ -14,8 +14,6 @@ export function useObserver(ethereum: UseEthereumReturnType): void {
     protocolContract,
     dlcBTCContract,
     getVault,
-    getDLCBTCBalance,
-    getLockedBTCBalance,
   } = ethereum;
 
   useEffect(() => {
@@ -35,7 +33,7 @@ export function useObserver(ethereum: UseEthereumReturnType): void {
       console.log(`Vault ${vaultUUID} is ready`);
 
       await getVault(vaultUUID, VaultState.READY).then(() => {
-        dispatch(mintUnmintActions.setMintStep(1));
+        dispatch(mintUnmintActions.setMintStep([1, vaultUUID]));
       });
     });
 
@@ -49,7 +47,7 @@ export function useObserver(ethereum: UseEthereumReturnType): void {
       console.log(`Vault ${vaultUUID} is closing`);
 
       await getVault(vaultUUID, VaultState.CLOSING).then(() => {
-        dispatch(mintUnmintActions.setUnmintStep(1));
+        dispatch(mintUnmintActions.setUnmintStep([1, vaultUUID]));
       });
     });
 
@@ -63,11 +61,9 @@ export function useObserver(ethereum: UseEthereumReturnType): void {
       console.log(`Vault ${vaultUUID} is minted`);
 
       await getVault(vaultUUID, VaultState.FUNDED).then(() => {
-        dispatch(mintUnmintActions.setMintStep(0));
-        dispatch(modalActions.toggleSuccessfulFlowModalVisibility("mint"));
+        dispatch(mintUnmintActions.setMintStep([0, vaultUUID]));
+        dispatch(modalActions.toggleSuccessfulFlowModalVisibility({ flow: "mint", vaultUUID}));
       });
-      await getDLCBTCBalance();
-      await getLockedBTCBalance();
     });
 
     protocolContract.on("PostCloseDLCHandler", async (...args) => {
@@ -80,11 +76,9 @@ export function useObserver(ethereum: UseEthereumReturnType): void {
       console.log(`Vault ${vaultUUID} is closed`);
 
       await getVault(vaultUUID, VaultState.CLOSED).then(() => {
-        dispatch(mintUnmintActions.setUnmintStep(0));
-        dispatch(modalActions.toggleSuccessfulFlowModalVisibility("unmint"));
+        dispatch(mintUnmintActions.setUnmintStep([0, vaultUUID]));
+        dispatch(modalActions.toggleSuccessfulFlowModalVisibility({flow: "unmint", vaultUUID}));
       });
-      await getDLCBTCBalance();
-      await getLockedBTCBalance();
     });
   }, [protocolContract, dlcBTCContract, network]);
 }