feat: add extra step visually

DLC-link · Jan 4, 2024 · bc925cf · bc925cf
1 parent 58a8379
commit bc925cf
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 7 deletions.
diff --git a/...components/mint-unmint/components/progress-timeline/components/progress-timeline-step.tsx b/...components/mint-unmint/components/progress-timeline/components/progress-timeline-step.tsx
@@ -1,6 +1,11 @@
 import { Divider, Text } from '@chakra-ui/react';
 
-import { StepIconOne, StepIconThree, StepIconTwo } from '../../../../../../styles/icon';
+import {
+  StepIconFour,
+  StepIconOne,
+  StepIconThree,
+  StepIconTwo,
+} from '../../../../../../styles/icon';
 
 interface StepProps {
   currentStep: number;
@@ -23,6 +28,8 @@ function getIconForStep(currentStep: number, stepIndex: number): React.JSX.Eleme
       return <StepIconTwo {...properties} />;
     case 2:
       return <StepIconThree {...properties} />;
+    case 3:
+      return <StepIconFour {...properties} />;
     default:
       return <StepIconOne {...properties} />;
   }

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
@@ -17,11 +17,13 @@ export function ProgressTimeline({
         <VStack w={'100%'}>
           <HStack w={'100%'}>
             <StepGraphics currentStep={currentStep} stepIndex={0} />
-            <StepGraphics currentStep={currentStep} stepIndex={1} isLastStep />
+            <StepGraphics currentStep={currentStep} stepIndex={1} />
+            <StepGraphics currentStep={currentStep} stepIndex={2} isLastStep />
           </HStack>
           <HStack w={'100%'} justifyContent={'space-between'}>
             <StepText currentStep={currentStep} stepIndex={0} title="Unmint dlcBTC" />
-            <StepText currentStep={currentStep} stepIndex={1} title="Receive BTC" />
+            <StepText currentStep={currentStep} stepIndex={1} title="Waiting" />
+            <StepText currentStep={currentStep} stepIndex={2} title="Receive BTC" />
           </HStack>
         </VStack>
       );
@@ -31,12 +33,14 @@ export function ProgressTimeline({
           <HStack w={'100%'} p={'0px'}>
             <StepGraphics currentStep={currentStep} stepIndex={0} />
             <StepGraphics currentStep={currentStep} stepIndex={1} />
-            <StepGraphics currentStep={currentStep} stepIndex={2} isLastStep />
+            <StepGraphics currentStep={currentStep} stepIndex={2} />
+            <StepGraphics currentStep={currentStep} stepIndex={3} isLastStep />
           </HStack>
           <HStack w={'100%'} justifyContent={'space-between'}>
             <StepText currentStep={currentStep} stepIndex={0} title="Create Vault" />
             <StepText currentStep={currentStep} stepIndex={1} title="Lock BTC" />
-            <StepText currentStep={currentStep} stepIndex={2} title="Mint dlcBTC" />
+            <StepText currentStep={currentStep} stepIndex={2} title="Waiting" />
+            <StepText currentStep={currentStep} stepIndex={3} title="Mint dlcBTC" />
           </HStack>
         </VStack>
       );

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
@@ -50,7 +50,7 @@ export function TransactionSummary({
   const currentVault = allVaults.find(vault => vault.uuid === currentStep[1]);
 
   const showProcessing =
-    (flow === 'mint' && currentStep[0] === 2) || (flow === 'unmint' && currentStep[0] === 1);
+    (flow === 'mint' && currentStep[0] === 3) || (flow === 'unmint' && currentStep[0] === 2);
 
   return (
     <VStack alignItems={'start'} w={'300px'} spacing={'15px'}>

diff --git a/src/app/components/mint-unmint/components/walkthrough/walkthrough.tsx b/src/app/components/mint-unmint/components/walkthrough/walkthrough.tsx
@@ -68,6 +68,19 @@ export function Walkthrough({ flow, currentStep }: WalkthroughProps): React.JSX.
             </WalkthroughLayout>
           );
         case 2:
+          return (
+            <WalkthroughLayout>
+              <WalkthroughHeader
+                currentStep={currentStep}
+                title={'Waiting'}
+                blockchain={'bitcoin'}
+              />
+              <Text color={'white.01'} fontSize={'md'}>
+                Waiting.......
+              </Text>
+            </WalkthroughLayout>
+          );
+        case 3:
           return (
             <WalkthroughLayout>
               <WalkthroughHeader
@@ -129,6 +142,19 @@ export function Walkthrough({ flow, currentStep }: WalkthroughProps): React.JSX.
             </WalkthroughLayout>
           );
         case 1:
+          return (
+            <WalkthroughLayout>
+              <WalkthroughHeader
+                currentStep={currentStep}
+                title={'Waiting'}
+                blockchain={'bitcoin'}
+              />
+              <Text color={'white.01'} fontSize={'md'}>
+                Waiting.......
+              </Text>
+            </WalkthroughLayout>
+          );
+        case 2:
           return (
             <WalkthroughLayout>
               <WalkthroughHeader

diff --git a/src/app/components/modals/successful-flow-modal/successful-flow-modal.tsx b/src/app/components/modals/successful-flow-modal/successful-flow-modal.tsx
@@ -17,7 +17,7 @@ export function SuccessfulFlowModal({
   return (
     <ModalLayout title={'Success!'} isOpen={isOpen} onClose={() => handleClose()}>
       <TransactionSummary
-        currentStep={[flow === 'mint' ? 3 : 2, vaultUUID]}
+        currentStep={[flow === 'mint' ? 4 : 3, vaultUUID]}
         flow={flow}
         blockchain={'ethereum'}
         handleClose={() => handleClose()}

diff --git a/src/styles/icon.tsx b/src/styles/icon.tsx
@@ -47,3 +47,19 @@ export const StepIconThree: React.FC<SVGProps<SVGSVGElement>> = props => (
     />
   </svg>
 );
+
+export const StepIconFour: React.FC<SVGProps<SVGSVGElement>> = props => (
+  <svg
+    data-name="Layer 4"
+    xmlns="http://www.w3.org/2000/svg"
+    width="35px"
+    height="35px"
+    viewBox="0 0 113.445 113.444"
+    {...props}
+  >
+    <path
+      d="M56.722 0C25.395 0 0 25.395 0 56.722s25.395 56.722 56.722 56.722 56.723-25.395 56.723-56.722S88.049 0 56.722 0Zm15.692 76.767c-1.361 2.27-3.344 4.049-5.947 5.338-2.604 1.29-5.697 1.935-9.279 1.935-5.732 0-10.306-1.409-13.72-4.228-3.416-2.817-5.22-7.068-5.41-12.753h11.894c.047 2.103.645 3.762 1.791 4.98s2.817 1.827 5.016 1.827c1.862 0 3.306-.537 4.335-1.612 1.026-1.075 1.54-2.496 1.54-4.263 0-2.293-.729-3.952-2.186-4.98-1.457-1.027-3.786-1.54-6.985-1.54H51.17v-9.96h2.293c2.435 0 4.406-.418 5.91-1.254 1.505-.835 2.258-2.329 2.258-4.478 0-1.72-.479-3.056-1.434-4.012-.956-.955-2.269-1.433-3.94-1.433-1.816 0-3.165.55-4.048 1.648-.885 1.099-1.398 2.46-1.541 4.084H38.703c.19-5.11 1.862-9.052 5.016-11.822 3.152-2.77 7.426-4.156 12.825-4.156 3.582 0 6.65.622 9.207 1.863 2.554 1.243 4.49 2.937 5.802 5.087s1.971 4.562 1.971 7.237c0 3.152-.788 5.72-2.364 7.702-1.576 1.982-3.416 3.331-5.518 4.048v.286c2.723.908 4.873 2.413 6.45 4.515 1.576 2.102 2.364 4.8 2.364 8.095 0 2.963-.68 5.578-2.042 7.846Z"
+      style={{ fill: props.fill, strokeWidth: 0 }}
+    />
+  </svg>
+);