feat: add setup vault graphics, add active not progressing indicator

src/app/components/mint-unmint/components/setup-vault-screen/components/setup-vault-screen.vault-graphics.tsx

@@ -0,0 +1,43 @@
+import { Box, Image, Text, VStack } from '@chakra-ui/react';
+
+export function SetupVaultScreenVaultGraphics(): React.JSX.Element {
+  return (
+    <VStack
+      p={'1px'}
+      w={'100%'}
+      bgGradient={`linear(orange.01, purple.01)`}
+      borderRadius={'md'}
+      alignItems={'center'}
+    >
+      <VStack
+        p={'35px'}
+        w={'100%'}
+        bg={'background.content.01'}
+        borderRadius={'md'}
+        spacing={'15px'}
+        justifyContent={'center'}
+        alignItems={'center'}
+      >
+        <Box position="relative" boxSize="75px">
+          <Image
+            src={'./images/logos/bitcoin-logo.svg'}
+            alt={'Bitcoin Logo'}
+            boxSize={'75px'}
+            position="absolute"
+            right="37.5%"
+          />
+          <Image
+            src={'./images/logos/dlc-btc-logo.svg'}
+            alt={'DLC BTC Logo'}
+            boxSize={'75px'}
+            position="absolute"
+            left="37.5%"
+          />
+        </Box>
+        <Text fontSize={'lg'} fontWeight={'bold'} color={'white.01'}>
+          BTC/dlcBTC Vault
+        </Text>
+      </VStack>
+    </VStack>
+  );
+}

src/app/components/mint-unmint/components/setup-vault-screen/setup-vault-screen.tsx

@@ -5,6 +5,8 @@ import { useEthersSigner } from '@functions/configuration.functions';
 import { EthereumNetworkConfigurationContext } from '@providers/ethereum-network-configuration.provider';
 import { setupVault } from 'dlc-btc-lib/ethereum-functions';
 
+import { SetupVaultScreenVaultGraphics } from './components/setup-vault-screen.vault-graphics';
+
 export function SetupVaultScreen(): React.JSX.Element {
   const toast = useToast();
 
@@ -31,7 +33,8 @@ export function SetupVaultScreen(): React.JSX.Element {
   }
 
   return (
-    <VStack w={'45%'} h={'445px'} justifyContent={'center'}>
+    <VStack w={'45%'}>
+      <SetupVaultScreenVaultGraphics />
       <Button
         isLoading={isSubmitting}
         variant={'account'}

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

@@ -16,9 +16,9 @@ interface SuccessfulFlowModalProps extends ModalComponentProps {
 
 function getModalText(flow: 'mint' | 'burn', assetAmount?: number): string {
   if (flow === 'mint') {
-    return `You have succesfully deposited ${assetAmount} BTC into your Vault, and minted ${assetAmount} dlcBTC to your address.`;
+    return `You have successfully deposited ${assetAmount} BTC from you Bitcoin Wallet into your Vault, and minted ${assetAmount} dlcBTC to your address.`;
   } else {
-    return `You have succesfully burned ${assetAmount} dlcBTC from your address, and withdraw ${assetAmount} BTC from your Vault.`;
+    return `You have successfully burned ${assetAmount} dlcBTC from your address, and withdraw ${assetAmount} BTC from your Vault into your Bitcoin Wallet.`;
   }
 }
 

src/app/components/vault/components/vault-vertical-progress-bar.tsx

@@ -9,13 +9,14 @@ interface VaultVerticalProgressBarProps {
 
 const Status = {
   ACTIVE: 'ACTIVE',
+  PROGRESSING: 'PROGRESSING',
   COMPLETED: 'COMPLETED',
   INACTIVE: 'INACTIVE',
 };
 
-function getStatus(currentStep: number, stepIndex: number): string {
+function getStatus(currentStep: number, stepIndex: number, progressing: boolean): string {
   if (currentStep === stepIndex) {
-    return Status.ACTIVE;
+    return progressing ? Status.PROGRESSING : Status.ACTIVE;
   } else if (currentStep > stepIndex) {
     return Status.COMPLETED;
   } else {
@@ -26,7 +27,9 @@ function getStatus(currentStep: number, stepIndex: number): string {
 function getComponent(status: string): React.JSX.Element | false {
   switch (status) {
     case Status.ACTIVE:
-      return <Spinner thickness={'2.5px'} size={'xs'} color={'accent.lightBlue.01'} />;
+      return <Image src={'/images/loader-colored.svg'} alt={'Active Loader'} boxSize={'15px'} />;
+    case Status.PROGRESSING:
+      return <Spinner thickness={'3.5px'} size={'xs'} color={'accent.lightBlue.01'} />;
     case Status.COMPLETED:
       return <Image src={'/images/check.svg'} alt={'Icon'} boxSize={'15px'} />;
     case Status.INACTIVE:
@@ -56,9 +59,9 @@ export function VaultVerticalProgressBar({
   return (
     <Stack w="15%" h="100%">
       <VStack py="25%" h={height} justifyContent="space-between">
-        <Stack>{getComponent(getStatus(activeStatus, 0))}</Stack>
+        <Stack>{getComponent(getStatus(activeStatus, 0, currentStep === 2))}</Stack>
         <Divider orientation="vertical" variant="thick" />
-        <Stack>{getComponent(getStatus(activeStatus, 1))}</Stack>
+        <Stack>{getComponent(getStatus(activeStatus, 1, currentStep === 2))}</Stack>
       </VStack>
     </Stack>
   );

src/app/components/vault/components/vault.detaills/components/vault.details.button-group/vault.details.button-group.tsx

@@ -1,4 +1,4 @@
-import { HStack } from '@chakra-ui/react';
+import { Divider, HStack, VStack } from '@chakra-ui/react';
 import { VaultState } from 'dlc-btc-lib/models';
 
 import { VaultExpandedInformationButton } from './components/vault.details.button-group.button';
@@ -35,17 +35,20 @@ export function VaultExpandedInformationButtonGroup({
   const isDepositButtonDisabled = vaultTotalLockedValue !== vaultTotalMintedValue;
 
   return (
-    <HStack w={'100%'} justifyContent={'space-between'}>
-      <VaultExpandedInformationButton
-        label={'Mint dlcBTC'}
-        onClick={handleDepositClick}
-        isDisabled={isDepositButtonDisabled}
-      />
-      <VaultExpandedInformationButton
-        label={'Withdraw BTC'}
-        isDisabled={isWithdrawButtonDisabled}
-        onClick={handleWithdrawClick}
-      />
-    </HStack>
+    <VStack w={'100%'}>
+      <Divider w={'100%'} borderColor={'grey.01'} borderStyle={'dashed'} />
+      <HStack w={'100%'} justifyContent={'space-between'}>
+        <VaultExpandedInformationButton
+          label={'Mint dlcBTC'}
+          onClick={handleDepositClick}
+          isDisabled={isDepositButtonDisabled}
+        />
+        <VaultExpandedInformationButton
+          label={'Withdraw BTC'}
+          isDisabled={isWithdrawButtonDisabled}
+          onClick={handleWithdrawClick}
+        />
+      </HStack>
+    </VStack>
   );
 }

src/app/components/vault/components/vault.detaills/components/vault.details.transaction-stack/vault.details.transaction-stack.tsx

@@ -15,9 +15,9 @@ export function VaultTransactionStack({
 
   return (
     <VStack w={'100%'} justifyContent={'space-between'}>
+      <Divider w={'100%'} borderColor={'grey.01'} borderStyle={'dashed'} />
       <VaultTransactionRow label={'Funding TX'} value={vaultFundingTX} />
       <VaultTransactionRow label={'Withdraw/Deposit TX'} value={vaultWithdrawDepositTX} />
-      <Divider w={'100%'} borderColor={'grey.01'} borderStyle={'dashed'} />
     </VStack>
   );
 }

src/app/components/vault/components/vault.detaills/vault.details.tsx

@@ -1,7 +1,7 @@
 import { useDispatch } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 
-import { Collapse, Divider, Stack, VStack } from '@chakra-ui/react';
+import { Collapse, Stack, VStack } from '@chakra-ui/react';
 import { mintUnmintActions } from '@store/slices/mintunmint/mintunmint.actions';
 import { VaultState } from 'dlc-btc-lib/models';
 
@@ -59,7 +59,6 @@ export function VaultDetails({
     <Stack w={'100%'} spacing={'0px'}>
       <Collapse in={isVaultExpanded} unmountOnExit animateOpacity>
         <VStack w={'100%'}>
-          <Divider w={'100%'} borderColor={'grey.01'} borderStyle={'dashed'} />
           <VStack w={'100%'} justifyContent={'space-between'}>
             <VaultTransactionStack
               vaultFundingTX={vaultFundingTX}

src/app/components/vault/components/vault.main-stack/vault-main-stack.tsx

@@ -1,9 +1,11 @@
 import { Divider, HStack } from '@chakra-ui/react';
+import { VaultState } from 'dlc-btc-lib/models';
 
 import { VaultActionButton } from './components/vault.main-stack.action-button';
 import { VaultAssetInformationStack } from './components/vault.main-stack.asset-information-stack/vault.main-stack.asset-information-stack';
 
 interface VaultMainStackProps {
+  vaultState: VaultState;
   vaultTotalLockedValue: number;
   vaultTotalMintedValue: number;
   isVaultExpanded: boolean;
@@ -12,6 +14,7 @@ interface VaultMainStackProps {
 }
 
 export function VaultMainStack({
+  vaultState,
   vaultTotalLockedValue,
   vaultTotalMintedValue,
   isVaultExpanded,
@@ -24,14 +27,23 @@ export function VaultMainStack({
         vaultTotalLockedValue={vaultTotalLockedValue}
         vaultTotalMintedValue={vaultTotalMintedValue}
       />
-      <Divider h={'68px'} orientation={'vertical'} borderColor={'grey.01'} borderStyle={'dashed'} />
-      <HStack w={'35%'}>
-        <VaultActionButton
-          isExpanded={isVaultExpanded}
-          handleClick={() => handleButtonClick()}
-          variant={variant}
-        />
-      </HStack>
+      {!(variant === 'selected' && vaultState === VaultState.READY) && (
+        <>
+          <Divider
+            h={'68px'}
+            orientation={'vertical'}
+            borderColor={'grey.01'}
+            borderStyle={'dashed'}
+          />
+          <HStack w={'35%'}>
+            <VaultActionButton
+              isExpanded={isVaultExpanded}
+              handleClick={() => handleButtonClick()}
+              variant={variant}
+            />
+          </HStack>
+        </>
+      )}
     </HStack>
   );
 }

src/app/components/vault/vault.tsx

@@ -37,6 +37,7 @@ export function Vault({ vault, variant }: VaultProps): React.JSX.Element {
     <VaultLayout>
       <VaultHeader vaultUUID={vault.uuid} vaultCreationTimestamp={vault.timestamp} />
       <VaultMainStack
+        vaultState={vault.state}
         vaultTotalLockedValue={vault.valueLocked}
         vaultTotalMintedValue={vault.valueMinted}
         isVaultExpanded={isVaultExpanded}