Merge pull request #15 from DLC-link/feat/succesful-flow-modals

feat: added succeful flow modals

src/app/app.tsx

@@ -1,7 +1,6 @@
 import { Route } from "react-router-dom";
 
 import { AppLayout } from "@components/app.layout";
-import { ModalContainer } from "@components/modals/components/modal-container";
 import { MyVaults } from "@pages/my-vaults/my-vaults";
 
 import { About } from "./pages/about/about";
@@ -16,7 +15,6 @@ export function App(): React.JSX.Element {
         <Route path="/my-vaults" element={<MyVaults />} />
         <Route path="/how-it-works" element={<About />} />
       </AppLayout>
-      <ModalContainer />
     </BlockchainContextProvider>
   );
 }

src/app/components/app.layout.tsx

@@ -3,13 +3,15 @@ import { BrowserRouter as Router, Routes } from "react-router-dom";
 import { VStack } from "@chakra-ui/react";
 import { Header } from "@components/header/header";
 import { HasChildren } from "@models/has-children";
+import { ModalContainer } from "./modals/components/modal-container";
 
 export function AppLayout({ children }: HasChildren): React.JSX.Element {
   return (
     <Router>
       <VStack py={"25px"}>
         <Header />
         <Routes>{children}</Routes>
+        <ModalContainer />
       </VStack>
     </Router>
   );

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

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
 
-import { HStack, Link, Spinner, Stack, Text, VStack } from "@chakra-ui/react";
+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";
@@ -42,7 +42,6 @@ export function TransactionSummary({
   flow,
   blockchain,
 }: TransactionSummaryProps): React.JSX.Element {
-  const navigate = useNavigate();
   const { fundingVaults, fundedVaults, closingVaults, closedVaults } =
     useVaults();
   const [currentVault, setCurrentVault] = useState<Vault>(
@@ -95,14 +94,15 @@ export function TransactionSummary({
         borderColor={"border.cyan.01"}
       >
         <Text color={"white.01"} fontSize={"sm"}>
-          You can follow the status of the {flow} under{" "}
-          <Link
+          You can check all of your vaults' status under{" "}
+          <Text
+            as={Link}
+            to={"/my-vaults"}
             color={"accent.cyan.01"}
             textDecoration={"underline"}
-            onClick={() => navigate("/my-vaults")}
           >
             My Vaults
-          </Link>{" "}
+          </Text>{" "}
           tab.
         </Text>
       </Stack>

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

@@ -1,19 +1,20 @@
-import { useSelector } from "react-redux";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 
 import { SelectWalletModal } from "@components/modals/select-wallet-modal/select-wallet-modal";
 import { AnyAction } from "@reduxjs/toolkit";
 import { RootState } from "@store/index";
 import { modalActions } from "@store/slices/modal/modal.actions";
 
+import { SuccessfulFlowModal } from "../successful-flow-modal/successful-flow-modal";
+
 export interface ModalComponentProps {
   isOpen: boolean;
   handleClose: () => void;
 }
 
 export function ModalContainer(): React.JSX.Element {
   const dispatch = useDispatch();
-  const { isSelectWalletModalOpen } = useSelector(
+  const { isSelectWalletModalOpen, isSuccesfulFlowModalOpen } = useSelector(
     (state: RootState) => state.modal,
   );
 
@@ -29,6 +30,15 @@ export function ModalContainer(): React.JSX.Element {
           handleClosingModal(modalActions.toggleSelectWalletModalVisibility)
         }
       />
+      <SuccessfulFlowModal
+        isOpen={isSuccesfulFlowModalOpen[0]}
+        handleClose={() =>
+          handleClosingModal(() =>
+            modalActions.toggleSuccessfulFlowModalVisibility("mint"),
+          )
+        }
+        flow={isSuccesfulFlowModalOpen[1]}
+      />
     </>
   );
 }

src/app/components/modals/components/modal.layout.tsx

@@ -25,7 +25,7 @@ export function ModalLayout({
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
       <ModalOverlay />
-      <ModalContent alignItems={"start"}>
+      <ModalContent>
         <ModalHeader>{title}</ModalHeader>
         <ModalCloseButton />
         <ModalBody>{children}</ModalBody>

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

@@ -0,0 +1,28 @@
+import { TransactionSummary } from "@components/mint-unmint/components/transaction-summary/transaction-summary";
+
+import { ModalComponentProps } from "../components/modal-container";
+import { ModalLayout } from "../components/modal.layout";
+
+interface SuccessfulFlowModalProps extends ModalComponentProps {
+  flow: "mint" | "unmint";
+}
+
+export function SuccessfulFlowModal({
+  isOpen,
+  handleClose,
+  flow,
+}: SuccessfulFlowModalProps): React.JSX.Element {
+  return (
+    <ModalLayout
+      title={"Success!"}
+      isOpen={isOpen}
+      onClose={() => handleClose()}
+    >
+      <TransactionSummary
+        currentStep={flow === "mint" ? 3 : 2}
+        flow={flow}
+        blockchain={"ethereum"}
+      />
+    </ModalLayout>
+  );
+}

src/app/hooks/use-observer.ts

@@ -5,6 +5,7 @@ import { RootState } from "@store/index";
 import { mintUnmintActions } from "@store/slices/mintunmint/mintunmint.actions";
 import { AnyAction } from "redux";
 import { UseEthereumReturnType } from "./use-ethereum";
+import { modalActions } from "@store/slices/modal/modal.actions";
 
 export function useObserver(
   ethereum: UseEthereumReturnType,
@@ -57,7 +58,8 @@ export function useObserver(
       console.log(`Vault ${vaultUUID} is minted`);
 
       await getVault(vaultUUID).then(() => {
-        dispatch(mintUnmintActions.setMintStep(3));
+        dispatch(mintUnmintActions.setMintStep(0));
+        dispatch(modalActions.toggleSuccessfulFlowModalVisibility("mint"));
       });
     });
 
@@ -71,7 +73,8 @@ export function useObserver(
       console.log(`Vault ${vaultUUID} is closed`);
 
       await getVault(vaultUUID).then(() => {
-        dispatch(mintUnmintActions.setUnmintStep(2));
+        dispatch(mintUnmintActions.setUnmintStep(0));
+        dispatch(modalActions.toggleSuccessfulFlowModalVisibility("unmint"));
       });
     });
   }, [protocolContract, dlcBTCContract, network]);

src/app/store/slices/modal/modal.slice.ts

@@ -2,10 +2,12 @@ import { createSlice } from "@reduxjs/toolkit";
 
 interface ModalState {
   isSelectWalletModalOpen: boolean;
+  isSuccesfulFlowModalOpen: [boolean, "mint" | "unmint"];
 }
 
 const initialModalState: ModalState = {
   isSelectWalletModalOpen: false,
+  isSuccesfulFlowModalOpen: [false, "mint"],
 };
 
 export const modalSlice = createSlice({
@@ -15,5 +17,11 @@ export const modalSlice = createSlice({
     toggleSelectWalletModalVisibility: (state) => {
       state.isSelectWalletModalOpen = !state.isSelectWalletModalOpen;
     },
+    toggleSuccessfulFlowModalVisibility: (state, action) => {
+      state.isSuccesfulFlowModalOpen = [
+        !state.isSuccesfulFlowModalOpen[0],
+        action.payload,
+      ];
+    },
   },
 });