From f5250effc7c60800b66de2963fe4071602fbc2ad Mon Sep 17 00:00:00 2001
From: Polybius93 <adam.daniel.puskas@polybius-studios.com>
Date: Thu, 11 Jan 2024 08:50:56 +0100
Subject: [PATCH] feat: separates minting steps

---
 .../mint-unmint/components/mint/mint.tsx      |  4 ++-
 .../progress-timeline/progress-timeline.tsx   |  2 +-
 .../transaction-summary.tsx                   | 21 ++-----------
 .../components/walkthrough/walkthrough.tsx    | 31 ++++++++++---------
 .../components/my-vaults/my-vaults-large.tsx  |  8 ++++-
 src/app/hooks/use-observer.ts                 |  8 +----
 6 files changed, 31 insertions(+), 43 deletions(-)

diff --git a/src/app/components/mint-unmint/components/mint/mint.tsx b/src/app/components/mint-unmint/components/mint/mint.tsx
index bfb9f09e..f7b3c174 100644
--- a/src/app/components/mint-unmint/components/mint/mint.tsx
+++ b/src/app/components/mint-unmint/components/mint/mint.tsx
@@ -20,7 +20,9 @@ export function Mint(): React.JSX.Element {
         <Walkthrough flow={'mint'} currentStep={mintStep[0]} />
         {[0].includes(mintStep[0]) && <TransactionForm />}
         {[1].includes(mintStep[0]) && <LockScreen currentStep={mintStep} />}
-        {[2].includes(mintStep[0]) && <Text color={'white'}>Wait 24 hours</Text>}
+        {[2].includes(mintStep[0]) && (
+          <TransactionSummary currentStep={mintStep} flow={'mint'} blockchain={'ethereum'} />
+        )}
         {[3].includes(mintStep[0]) && (
           <TransactionSummary currentStep={mintStep} flow={'mint'} blockchain={'ethereum'} />
         )}
diff --git a/src/app/components/mint-unmint/components/progress-timeline/progress-timeline.tsx b/src/app/components/mint-unmint/components/progress-timeline/progress-timeline.tsx
index c3d29303..37d74e2b 100644
--- a/src/app/components/mint-unmint/components/progress-timeline/progress-timeline.tsx
+++ b/src/app/components/mint-unmint/components/progress-timeline/progress-timeline.tsx
@@ -57,7 +57,7 @@ export function ProgressTimeline({
               isFirstStep
             />
             <StepText currentStep={currentStep} stepIndex={1} title="Lock BTC" width={'37%'} />
-            <StepText currentStep={currentStep} stepIndex={2} title="Wait 24 hours" width={'29%'} />
+            <StepText currentStep={currentStep} stepIndex={2} title="Validation" width={'29%'} />
             <StepText
               currentStep={currentStep}
               stepIndex={3}
diff --git a/src/app/components/mint-unmint/components/transaction-summary/transaction-summary.tsx b/src/app/components/mint-unmint/components/transaction-summary/transaction-summary.tsx
index 4b6b57b6..99180756 100644
--- a/src/app/components/mint-unmint/components/transaction-summary/transaction-summary.tsx
+++ b/src/app/components/mint-unmint/components/transaction-summary/transaction-summary.tsx
@@ -6,8 +6,6 @@ import { VaultCard } from '@components/vault/vault-card';
 import { useVaults } from '@hooks/use-vaults';
 import { mintUnmintActions } from '@store/slices/mintunmint/mintunmint.actions';
 
-import { TransactionSummaryPreviewCard } from './components/transaction-summary-preview-card';
-
 interface FlowPropertyMap {
   [key: string]: {
     [key: number]: {
@@ -19,9 +17,8 @@ interface FlowPropertyMap {
 
 const flowPropertyMap: FlowPropertyMap = {
   mint: {
-    2: { title: 'a) Locking BTC in progress', subtitle: 'Minting dlcBTC' },
-    3: { title: 'Wait....' },
-    4: { title: 'Minted dlcBTC' },
+    2: { title: 'Locking BTC in progress'},
+    3: { title: 'Minted dlcBTC' },
   },
   unmint: {
     1: {
@@ -43,7 +40,6 @@ interface TransactionSummaryProps {
 export function TransactionSummary({
   currentStep,
   flow,
-  blockchain,
   handleClose,
 }: TransactionSummaryProps): React.JSX.Element {
   const navigate = useNavigate();
@@ -52,7 +48,7 @@ export function TransactionSummary({
   const currentVault = allVaults.find(vault => vault.uuid === currentStep[1]);
 
   const showProcessing =
-    (flow === 'mint' && currentStep[0] === 3) || (flow === 'unmint' && currentStep[0] === 2);
+    (flow === 'mint' && currentStep[0] === 2) || (flow === 'unmint' && currentStep[0] === 2);
 
   return (
     <VStack alignItems={'start'} w={'300px'} spacing={'15px'}>
@@ -61,17 +57,6 @@ export function TransactionSummary({
         <Text color={'accent.cyan.01'}>{flowPropertyMap[flow][currentStep[0]].title}:</Text>
       </HStack>
       <VaultCard vault={currentVault} />
-      {showProcessing && (
-        <>
-          <Text pt={'25px'} color={'white.01'}>
-            b) {flowPropertyMap[flow][currentStep[0]].subtitle}:
-          </Text>
-          <TransactionSummaryPreviewCard
-            blockchain={blockchain}
-            assetAmount={currentVault?.collateral}
-          />
-        </>
-      )}
       <Stack p={'5px'} w={'100%'}>
         <Text color={'white.01'} fontSize={'sm'}>
           View vault statuses in the My Vaults tab.
diff --git a/src/app/components/mint-unmint/components/walkthrough/walkthrough.tsx b/src/app/components/mint-unmint/components/walkthrough/walkthrough.tsx
index ae19a57a..1ef4f9c5 100644
--- a/src/app/components/mint-unmint/components/walkthrough/walkthrough.tsx
+++ b/src/app/components/mint-unmint/components/walkthrough/walkthrough.tsx
@@ -72,11 +72,20 @@ export function Walkthrough({ flow, currentStep }: WalkthroughProps): React.JSX.
             <WalkthroughLayout>
               <WalkthroughHeader
                 currentStep={currentStep}
-                title={'Waiting'}
-                blockchain={'bitcoin'}
+                title={'Validation'}
+                blockchain={'ethereum'}
               />
-              <Text color={'white.01'} fontSize={'md'}>
-                Waiting.......
+              <Text color={'white.01'} fontSize={'sm'}>
+                Wait until Bitcoin is locked on-chain and all other validation checks have been
+                processed{' '}
+                <Link
+                  color={'accent.cyan.01'}
+                  href="https://ethereum.org/"
+                  isExternal
+                  textDecoration={'underline'}
+                >
+                  (~1 hour)
+                </Link>
               </Text>
             </WalkthroughLayout>
           );
@@ -85,20 +94,12 @@ export function Walkthrough({ flow, currentStep }: WalkthroughProps): React.JSX.
             <WalkthroughLayout>
               <WalkthroughHeader
                 currentStep={currentStep}
-                title={'Mint dlcBTC'}
+                title={'Minted dlcBTC'}
                 blockchain={'ethereum'}
               />
               <Text color={'white.01'} fontSize={'sm'}>
-                Wait for Bitcoin to get locked on chain{' '}
-                <Link
-                  color={'accent.cyan.01'}
-                  href="https://ethereum.org/"
-                  isExternal
-                  textDecoration={'underline'}
-                >
-                  (~1 hour)
-                </Link>
-                . After 6 confirmations, dlcBTC tokens will appear in your Ethereum Wallet.
+                Your request is validated and you have successfully minted a{' '}
+                <span style={{ fontWeight: 800 }}>dlcBTC token.</span>
               </Text>
               <Text color={'white.01'} fontSize={'sm'}>
                 To ensure your <span style={{ fontWeight: 800 }}>dlcBTC tokens </span>
diff --git a/src/app/components/my-vaults/my-vaults-large.tsx b/src/app/components/my-vaults/my-vaults-large.tsx
index 574ae6f7..25ad68d3 100644
--- a/src/app/components/my-vaults/my-vaults-large.tsx
+++ b/src/app/components/my-vaults/my-vaults-large.tsx
@@ -29,7 +29,13 @@ export function MyVaultsLarge(): React.JSX.Element {
       />
       <HStack spacing={'35px'} w={'100%'}>
         {address ? (
-          <VaultsList title={'In Process'} height={'475px'} isScrollable={!!address}>
+          <VaultsList
+            title={'In Process'}
+            height={'475px'}
+            isScrollable={
+              !!address && [...readyVaults, ...fundingVaults, ...closingVaults].length > 0
+            }
+          >
             <VaultsListGroupContainer label="Lock BTC" vaults={readyVaults} />
             <VaultsListGroupContainer label="Locking BTC in Progress" vaults={fundingVaults} />
             <VaultsListGroupContainer label="Unlocking BTC in Progress" vaults={closingVaults} />
diff --git a/src/app/hooks/use-observer.ts b/src/app/hooks/use-observer.ts
index 0b3bb9d0..ec747f52 100644
--- a/src/app/hooks/use-observer.ts
+++ b/src/app/hooks/use-observer.ts
@@ -58,13 +58,7 @@ export function useObserver(ethereum: UseEthereumReturnType): void {
       console.log(`Vault ${vaultUUID} is minted`);
 
       await getVault(vaultUUID, VaultState.FUNDED).then(() => {
-        dispatch(mintUnmintActions.setMintStep([0, vaultUUID]));
-        dispatch(
-          modalActions.toggleSuccessfulFlowModalVisibility({
-            flow: 'mint',
-            vaultUUID,
-          })
-        );
+        dispatch(mintUnmintActions.setMintStep([3, vaultUUID]));
       });
     });