feat: finished mint and unmint flow

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

@@ -1,28 +1,40 @@
 import { HStack } from "@chakra-ui/react";
 
 import { RootState } from "@store/index";
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { LockScreen } from "../lock-screen/lock-screen";
 import { ProgressTimeline } from "../progress-timeline/progress-timeline";
 import { TransactionForm } from "../transaction-form/transaction-form";
 import { TransactionSummary } from "../transaction-summary/transaction-summary";
 import { Walkthrough } from "../walkthrough/walkthrough";
 import { MintLayout } from "./components/mint.layout";
+import { StepButton } from "@components/step-button/step-button";
+import { mintUnmintActions } from "@store/slices/mintunmint/mintunmint.actions";
 
 export function Mint(): React.JSX.Element {
+  const dispatch = useDispatch();
   const { mintStep } = useSelector((state: RootState) => state.mintunmint);
 
+  function handleRestart() {
+    dispatch(mintUnmintActions.setMintStep(0));
+  }
+
   return (
     <MintLayout>
       <ProgressTimeline variant={"mint"} currentStep={mintStep} />
       <HStack w={"100%"} alignItems={"start"} justifyContent={"space-between"}>
         <Walkthrough flow={"mint"} currentStep={mintStep} />
         {[0].includes(mintStep) && <TransactionForm />}
         {[1].includes(mintStep) && <LockScreen />}
-        {[2].includes(mintStep) && (
-          <TransactionSummary flow={"mint"} blockchain={"ethereum"} />
+        {[2, 3].includes(mintStep) && (
+          <TransactionSummary
+            currentStep={mintStep}
+            flow={"mint"}
+            blockchain={"ethereum"}
+          />
         )}
       </HStack>
+      <StepButton handleClick={handleRestart} />
     </MintLayout>
   );
 }

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

@@ -1,46 +1,90 @@
+import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
 import { HStack, Link, 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 { TransactionSummaryPreviewCard } from "./components/transaction-summary-preview-card";
 
-const flowPropertyMap = {
+interface FlowPropertyMap {
+  [key: string]: {
+    [key: number]: {
+      title: string;
+      subtitle: string;
+    };
+  };
+}
+
+const flowPropertyMap: FlowPropertyMap = {
   mint: {
-    title: "Locking BTC in progress",
-    subtitle: "Minting dlcBTC",
+    2: { title: "a) Locking BTC in progress", subtitle: "Minting dlcBTC" },
+    3: { title: "Minted dlcBTC", subtitle: "Minting dlcBTC" },
   },
   unmint: {
-    title: "Unmint in progress",
-    subtitle: "Your BTC is being unlocked",
+    1: {
+      title: "a) Closing vault in progress",
+      subtitle: "Your BTC is being unlocked",
+    },
+    2: { title: "Vault closed", subtitle: "Your BTC is unlocked" },
   },
 };
 
 interface TransactionSummaryProps {
+  currentStep: number;
   flow: "mint" | "unmint";
   blockchain: "ethereum" | "bitcoin";
 }
 
 export function TransactionSummary({
+  currentStep,
   flow,
   blockchain,
 }: TransactionSummaryProps): React.JSX.Element {
   const navigate = useNavigate();
-  const { fundingVaults } = useVaults();
+  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];
+    }
+  }
+
+  useEffect(() => {
+    setCurrentVault(getVault(flow, currentStep));
+  }, [flow, currentStep]);
 
   return (
     <VStack alignItems={"start"} w={"300px"} spacing={"15px"}>
       <HStack w={"100%"}>
-        <Spinner color={"accent.cyan.01"} size={"md"} />
-        <Text color={"accent.cyan.01"}>a) {flowPropertyMap[flow].title}:</Text>
+        {(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>
       </HStack>
-      <VaultCard vault={fundingVaults[0]} />
-      <Text color={"white.01"}>b) {flowPropertyMap[flow].subtitle}:</Text>
-      <TransactionSummaryPreviewCard
-        blockchain={blockchain}
-        assetAmount={fundingVaults[0]?.collateral}
-      />
+      <VaultCard vault={currentVault} />
+      {(flow === "mint" && currentStep === 2) ||
+      (flow === "unmint" && currentStep === 1) ? (
+        <>
+          <Text color={"white.01"}>
+            b) {flowPropertyMap[flow][currentStep].subtitle}:
+          </Text>
+          <TransactionSummaryPreviewCard
+            blockchain={blockchain}
+            assetAmount={currentVault?.collateral}
+          />
+        </>
+      ) : null}
       <Stack
         p={"15px"}
         w={"100%"}

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

@@ -1,25 +1,41 @@
-import { useState } from "react";
+import { useContext, useState } from "react";
 
 import { Button, Text, VStack } from "@chakra-ui/react";
 import { VaultCard } from "@components/vault/vault-card";
 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 { Vault } from "@models/vault";
+import { BlockchainContext } from "../../../../../providers/blockchain-context-provider";
 
 import { scrollBarCSS } from "../../../../../../styles/css-styles";
 
 export function UnmintVaultSelector(): React.JSX.Element {
   const [selectedVault, setSelectedVault] = useState<Vault | undefined>(
     undefined,
   );
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const { fundedVaults } = useVaults();
+  const blockchainContext = useContext(BlockchainContext);
+  const ethereum = blockchainContext?.ethereum;
 
   function handleSelect(uuid: string): void {
     const vault = fundedVaults.find((vault) => vault.uuid === uuid);
     if (vault) setSelectedVault(vault);
   }
 
+  async function handleUnmint(): Promise<void> {
+    if (selectedVault) {
+      try {
+        setIsSubmitting(true);
+        await ethereum?.closeVault(selectedVault.uuid);
+      } catch (error) {
+        setIsSubmitting(false);
+        throw new Error("Error closing vault");
+      }
+    }
+  }
+
   return (
     <VStack
       alignItems={"start"}
@@ -59,13 +75,10 @@ export function UnmintVaultSelector(): React.JSX.Element {
         </VaultsList>
       )}
       <Button
+        isLoading={isSubmitting}
         variant={"account"}
         isDisabled={!selectedVault}
-        onClick={() =>
-          alert(
-            "In production your Ethereum Wallet would now open to confirm the transaction",
-          )
-        }
+        onClick={() => handleUnmint()}
       >
         Unmint dlcBTC
       </Button>

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

@@ -1,41 +1,38 @@
-import { useState } from "react";
-
 import { HStack } from "@chakra-ui/react";
 import { StepButton } from "@components/step-button/step-button";
-import { VaultState } from "@models/vault";
-
-import { exampleVaults } from "@shared/examples/example-vaults";
 
+import { RootState } from "@store/index";
+import { mintUnmintActions } from "@store/slices/mintunmint/mintunmint.actions";
+import { useDispatch, useSelector } from "react-redux";
 import { ProgressTimeline } from "../progress-timeline/progress-timeline";
 import { TransactionSummary } from "../transaction-summary/transaction-summary";
 import { Walkthrough } from "../walkthrough/walkthrough";
 import { UnmintVaultSelector } from "./components/unmint-vault-selector";
 import { UnmintLayout } from "./components/unmint.layout";
 
 export function Unmint(): React.JSX.Element {
-  const [currentStep, setCurrentStep] = useState(0);
-  const exampleVault = exampleVaults.find(
-    (vault) => vault.state === VaultState.CLOSING,
-  );
+  const dispatch = useDispatch();
+  const { unmintStep } = useSelector((state: RootState) => state.mintunmint);
+
+  function handleRestart() {
+    dispatch(mintUnmintActions.setUnmintStep(0));
+  }
 
   return (
     <UnmintLayout>
-      <ProgressTimeline variant={"unmint"} currentStep={currentStep} />
+      <ProgressTimeline variant={"unmint"} currentStep={unmintStep} />
       <HStack w={"100%"} alignItems={"start"} justifyContent={"space-between"}>
-        <Walkthrough
-          flow={"unmint"}
-          bitcoinAmount={exampleVault?.collateral}
-          currentStep={currentStep}
-        />
-        {[0].includes(currentStep) && <UnmintVaultSelector />}
-        {[1].includes(currentStep) && (
+        <Walkthrough flow={"unmint"} currentStep={unmintStep} />
+        {[0].includes(unmintStep) && <UnmintVaultSelector />}
+        {[1, 2].includes(unmintStep) && (
           <TransactionSummary
+            currentStep={unmintStep}
             flow={"unmint"}
             blockchain={"bitcoin"}
           />
         )}
       </HStack>
-      <StepButton handleClick={() => setCurrentStep((currentStep + 1) % 2)} />
+      <StepButton handleClick={handleRestart} />
     </UnmintLayout>
   );
 }

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

@@ -4,7 +4,7 @@ import { WalkthroughBlockchainTag } from "./walkthrough-blockchain-tag";
 
 interface WalkthroughHeaderProps {
   blockchain: "ethereum" | "bitcoin";
-  currentStep: number;
+  currentStep?: number;
   title: string;
 }
 
@@ -16,9 +16,11 @@ export function WalkthroughHeader({
   return (
     <VStack alignItems={"start"}>
       <HStack>
-        <Text color={"accent.cyan.01"} fontSize={"lg"}>
-          Step {currentStep + 1}
-        </Text>
+        {currentStep && (
+          <Text color={"accent.cyan.01"} fontSize={"lg"}>
+            Step {currentStep + 1}
+          </Text>
+        )}
         <WalkthroughBlockchainTag blockchain={blockchain} />
       </HStack>
       <Text color={"white.01"} fontSize={"lg"} fontWeight={800}>

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

@@ -7,13 +7,11 @@ import { WalkthroughLayout } from "./components/walkthrough.layout";
 interface WalkthroughProps {
   flow: "mint" | "unmint";
   currentStep: number;
-  bitcoinAmount?: number;
 }
 
 export function Walkthrough({
   flow,
   currentStep,
-  bitcoinAmount,
 }: WalkthroughProps): React.JSX.Element {
   switch (flow) {
     case "mint":
@@ -108,7 +106,25 @@ export function Walkthrough({
             </WalkthroughLayout>
           );
         default:
-          return <></>;
+          return (
+            <WalkthroughLayout>
+              <WalkthroughHeader
+                currentStep={undefined}
+                title={"Minted dlcBTC"}
+                blockchain={"ethereum"}
+              />
+              <Button variant={"vault"}>
+                <HStack>
+                  <Image
+                    src={"/images/logos/dlc-btc-logo.svg"}
+                    alt={"dlcBTC"}
+                    boxSize={"25px"}
+                  />
+                  <Text> Add Token to Wallet</Text>
+                </HStack>
+              </Button>
+            </WalkthroughLayout>
+          );
       }
     case "unmint":
       switch (currentStep) {
@@ -138,14 +154,20 @@ export function Walkthrough({
               <Text color={"white.01"} fontSize={"md"}>
                 After a successful unmint (
                 <span style={{ color: "accent.cyan.01" }}>~1 hour</span>) your
-                will receive{" "}
-                <span style={{ fontWeight: 800 }}>{bitcoinAmount}BTC</span> in
-                your bitcoin wallet.
+                will receive BTC in your bitcoin wallet.
               </Text>
             </WalkthroughLayout>
           );
         default:
-          return <></>;
+          return (
+            <WalkthroughLayout>
+              <WalkthroughHeader
+                currentStep={undefined}
+                title={"Unminted dlcBTC"}
+                blockchain={"ethereum"}
+              />
+            </WalkthroughLayout>
+          );
       }
   }
 }

src/app/components/step-button/step-button.tsx

@@ -3,20 +3,21 @@ import { Button } from "@chakra-ui/react";
 interface StepButtonProps {
   handleClick: () => void;
 }
+
 export function StepButton({
   handleClick,
 }: StepButtonProps): React.JSX.Element {
   return (
     <Button
       variant={"vault"}
       h={"5px"}
-      w={"15px"}
+      w={"85px"}
       borderColor={"white.03"}
       borderRadius={"full"}
       fontSize={"xs"}
       onClick={() => handleClick()}
     >
-      step
+      Restart Flow
     </Button>
   );
 }

src/app/components/vault/components/vault-expanded-information/components/vault-expanded-information-transaction-row.tsx

@@ -20,7 +20,9 @@ export function VaultExpandedInformationTransactionRow({
         color={"accent.cyan.01"}
         fontSize={"xs"}
         textDecoration={"underline"}
-        onClick={() => window.open(value, "_blank")}
+        onClick={() =>
+          window.open(`http://stx-btc1.dlc.link:8001/tx/${value}`, "_blank")
+        }
         _hover={{ cursor: "pointer" }}
       >
         View in TX explorer