feat: step wording change and separation wip

DLC-link · Jan 11, 2024 · 555cec9 · 555cec9
1 parent 9ede1aa
commit 555cec9
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 48 deletions.
diff --git a/src/app/components/mint-unmint/components/mint/mint.tsx b/src/app/components/mint-unmint/components/mint/mint.tsx
@@ -1,6 +1,6 @@
 import { useSelector } from 'react-redux';
 
-import { HStack, Text } from '@chakra-ui/react';
+import { HStack } from '@chakra-ui/react';
 import { RootState } from '@store/index';
 
 import { LockScreen } from '../lock-screen/lock-screen';
@@ -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
@@ -28,7 +28,7 @@ export function ProgressTimeline({
               width={'34%'}
               isFirstStep
             />
-            <StepText currentStep={currentStep} stepIndex={1} title="Wait 24 hours" width={'33%'} />
+            <StepText currentStep={currentStep} stepIndex={1} title="Validation" width={'33%'} />
             <StepText
               currentStep={currentStep}
               stepIndex={2}
@@ -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
@@ -6,7 +6,7 @@ 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';
+//import { TransactionSummaryPreviewCard } from './components/transaction-summary-preview-card';
 
 interface FlowPropertyMap {
   [key: string]: {
@@ -19,8 +19,8 @@ interface FlowPropertyMap {
 
 const flowPropertyMap: FlowPropertyMap = {
   mint: {
-    2: { title: 'a) Locking BTC in progress', subtitle: 'Minting dlcBTC' },
-    3: { title: 'Wait....' },
+    2: { title: 'a) Locking BTC in progress' },
+    3: { title: 'Locking BTC in progress' },
     4: { title: 'Minted dlcBTC' },
   },
   unmint: {
@@ -43,7 +43,7 @@ interface TransactionSummaryProps {
 export function TransactionSummary({
   currentStep,
   flow,
-  blockchain,
+  //blockchain,
   handleClose,
 }: TransactionSummaryProps): React.JSX.Element {
   const navigate = useNavigate();
@@ -52,7 +52,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 +61,17 @@ 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}
-          />
-        </>
-      )}
+
+      {/* <>
+        <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
@@ -72,11 +72,20 @@ export function Walkthrough({ flow, currentStep }: WalkthroughProps): React.JSX.
             <WalkthroughLayout>
               <WalkthroughHeader
                 currentStep={currentStep}
-                title={'Waiting'}
+                title={'Validation'}
                 blockchain={'bitcoin'}
               />
               <Text color={'white.01'} fontSize={'md'}>
-                Waiting.......
+                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>
@@ -146,7 +147,7 @@ export function Walkthrough({ flow, currentStep }: WalkthroughProps): React.JSX.
             <WalkthroughLayout>
               <WalkthroughHeader
                 currentStep={currentStep}
-                title={'Wait 24 hours'}
+                title={'Validation'}
                 blockchain={'bitcoin'}
               />
               <Text color={'white.01'} fontSize={'md'}>

diff --git a/src/app/hooks/use-observer.ts b/src/app/hooks/use-observer.ts
@@ -4,7 +4,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { VaultState } from '@models/vault';
 import { RootState } from '@store/index';
 import { mintUnmintActions } from '@store/slices/mintunmint/mintunmint.actions';
-import { modalActions } from '@store/slices/modal/modal.actions';
+//import { modalActions } from '@store/slices/modal/modal.actions';
 
 import { UseEthereumReturnType } from './use-ethereum';
 
@@ -58,13 +58,13 @@ 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]));
+        // dispatch(
+        //   modalActions.toggleSuccessfulFlowModalVisibility({
+        //     flow: 'mint',
+        //     vaultUUID,
+        //   })
+        // );
       });
     });
 
@@ -79,12 +79,12 @@ export function useObserver(ethereum: UseEthereumReturnType): void {
 
       await getVault(vaultUUID, VaultState.CLOSED).then(() => {
         dispatch(mintUnmintActions.setUnmintStep([0, vaultUUID]));
-        dispatch(
-          modalActions.toggleSuccessfulFlowModalVisibility({
-            flow: 'unmint',
-            vaultUUID,
-          })
-        );
+        // dispatch(
+        //   modalActions.toggleSuccessfulFlowModalVisibility({
+        //     flow: 'unmint',
+        //     vaultUUID,
+        //   })
+        // );
       });
     });
   }, [protocolContract, dlcBTCContract, network]);