feat: update vault card to match new design (#177)

* feat: update vault card to match new design

* feat: optimize useConfirmationsChecker

src/app/app.tsx

@@ -9,7 +9,7 @@ import { MyVaults } from '@pages/my-vaults/my-vaults';
 import { PointsPage } from '@pages/points/points-page';
 import { ProofOfReservePage } from '@pages/proof-of-reserve/proof-of-reserve-page';
 import { BalanceContextProvider } from '@providers/balance-context-provider';
-import { BlockchainHeightContextProvider } from '@providers/bitcoin-query-provider';
+import { BitcoinTransactionConfirmationsProvider } from '@providers/bitcoin-query-provider';
 import { BitcoinWalletContextProvider } from '@providers/bitcoin-wallet-context-provider';
 import { EthereumNetworkConfigurationContextProvider } from '@providers/ethereum-network-configuration.provider';
 import { EthereumObserverProvider } from '@providers/ethereum-observer-provider';
@@ -32,7 +32,7 @@ export function App(): React.JSX.Element {
           <EthereumObserverProvider>
             <BitcoinWalletContextProvider>
               <VaultContextProvider>
-                <BlockchainHeightContextProvider>
+                <BitcoinTransactionConfirmationsProvider>
                   <BalanceContextProvider>
                     <ProofOfReserveContextProvider>
                       <AppLayout>
@@ -50,7 +50,7 @@ export function App(): React.JSX.Element {
                       </AppLayout>
                     </ProofOfReserveContextProvider>
                   </BalanceContextProvider>
-                </BlockchainHeightContextProvider>
+                </BitcoinTransactionConfirmationsProvider>
               </VaultContextProvider>
             </BitcoinWalletContextProvider>
           </EthereumObserverProvider>

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

@@ -9,7 +9,7 @@ export function MintUnmintLayout({ children }: MintUnmintLayoutProps): React.JSX
   return (
     <VStack
       px={'15px'}
-      w={'930px'}
+      w={'68.5%'}
       h={'625px'}
       bg={'background.container.01'}
       border={'1px solid'}

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

@@ -3,7 +3,7 @@ import { useDispatch } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 
 import { Button, HStack, Spinner, Stack, Text, VStack } from '@chakra-ui/react';
-import { VaultCard } from '@components/vault/vault-card';
+import { Vault } from '@components/vault/vault';
 import { VaultContext } from '@providers/vault-context-provider';
 import { mintUnmintActions } from '@store/slices/mintunmint/mintunmint.actions';
 import Decimal from 'decimal.js';
@@ -63,24 +63,28 @@ export function TransactionSummary({
         {currentStep[0] === 2 && <Spinner color={'accent.lightBlue.01'} size={'md'} />}
         <Text color={'accent.lightBlue.01'}>{flowPropertyMap[flow][currentStep[0]].title}:</Text>
       </HStack>
-      <VaultCard vault={currentVault} />
-      {currentStep[0] === 2 && (
+      {currentVault && (
         <>
-          <Text pt={'25px'} color={'white.01'}>
-            b) {flowPropertyMap[flow][currentStep[0]].subtitle}:
-          </Text>
-          <TransactionSummaryPreviewCard
-            blockchain={blockchain}
-            assetAmount={
-              flow === 'mint'
-                ? depositAmount
-                : parseInt(
-                    new Decimal(currentVault?.valueLocked!)
-                      .minus(currentVault?.valueMinted!)
-                      .toFixed(2)
-                  )
-            }
-          />
+          <Vault vault={currentVault} />
+          {currentStep[0] === 2 && (
+            <>
+              <Text pt={'25px'} color={'white.01'}>
+                b) {flowPropertyMap[flow][currentStep[0]].subtitle}:
+              </Text>
+              <TransactionSummaryPreviewCard
+                blockchain={blockchain}
+                assetAmount={
+                  flow === 'mint'
+                    ? depositAmount
+                    : parseInt(
+                        new Decimal(currentVault.valueLocked)
+                          .minus(currentVault.valueMinted)
+                          .toFixed(2)
+                      )
+                }
+              />
+            </>
+          )}
         </>
       )}
       <Stack p={'5px'} w={'100%'}>

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

@@ -49,11 +49,6 @@ export function UnmintVaultSelector({
 
   const { ethereumNetworkConfiguration } = useContext(EthereumNetworkConfigurationContext);
 
-  function handleSelect(uuid: string): void {
-    const vault = fundedVaults.find(vault => vault.uuid === uuid);
-    if (vault) setSelectedVault(vault);
-  }
-
   useEffect(() => {
     setSelectedVault(fundedVaults.find(vault => vault.uuid === unmintStep[1]));
   }, [fundedVaults, unmintStep]);
@@ -124,11 +119,7 @@ export function UnmintVaultSelector({
             Select vault to withdraw Bitcoin:
           </Text>
           <VaultsList height={'425.5px'} isScrollable={!selectedVault}>
-            <VaultsListGroupContainer
-              vaults={fundedVaults}
-              isSelectable
-              handleSelect={handleSelect}
-            />
+            <VaultsListGroupContainer vaults={fundedVaults} isSelectable variant={'select'} />
           </VaultsList>
         </VStack>
       )}

src/app/components/my-vaults-small/components/my-vaults-small.layout.tsx

@@ -6,7 +6,7 @@ export function MyVaultsSmallLayout({ children }: HasChildren): React.JSX.Elemen
     <VStack
       py={'2.5px'}
       px={'25px'}
-      w={'350px'}
+      w={'31.5%'}
       h={'625px'}
       bg={'background.container.01'}
       border={'1px solid'}