feat: add progress timeline, update transaction screen ui and functionality

src/app/app.tsx

@@ -29,9 +29,9 @@ export function App(): React.JSX.Element {
     <WagmiProvider config={wagmiConfiguration}>
       <QueryClientProvider client={queryClient}>
         <EthereumNetworkConfigurationContextProvider>
-          <EthereumObserverProvider>
-            <BitcoinWalletContextProvider>
-              <VaultContextProvider>
+          <BitcoinWalletContextProvider>
+            <VaultContextProvider>
+              <EthereumObserverProvider>
                 <BitcoinTransactionConfirmationsProvider>
                   <BalanceContextProvider>
                     <ProofOfReserveContextProvider>
@@ -51,9 +51,9 @@ export function App(): React.JSX.Element {
                     </ProofOfReserveContextProvider>
                   </BalanceContextProvider>
                 </BitcoinTransactionConfirmationsProvider>
-              </VaultContextProvider>
-            </BitcoinWalletContextProvider>
-          </EthereumObserverProvider>
+              </EthereumObserverProvider>
+            </VaultContextProvider>
+          </BitcoinWalletContextProvider>
         </EthereumNetworkConfigurationContextProvider>
       </QueryClientProvider>
     </WagmiProvider>

src/app/components/mint-unmint/components/burn-transaction-screen/burn-transaction-screen.tsx

@@ -50,7 +50,6 @@ export function BurnTokenTransactionForm({
 
   async function handleButtonClick(withdrawAmount: number): Promise<void> {
     if (!currentVault) return;
-
     try {
       const currentRisk = await fetchUserEthereumAddressRiskLevel();
       if (currentRisk === 'High') throw new Error('Risk Level is too high');
@@ -92,10 +91,11 @@ export function BurnTokenTransactionForm({
 
   return (
     <VStack w={'45%'}>
-      <Vault vault={currentVault!} />
+      <Vault vault={currentVault!} variant={'selected'} />
       <VaultTransactionForm
         vault={currentVault!}
-        type={'burn'}
+        flow={'burn'}
+        currentStep={unmintStep[0]}
         currentBitcoinPrice={bitcoinPrice}
         handleButtonClick={handleButtonClick}
         depositLimit={depositLimit}

src/app/components/mint-unmint/components/deposit-transaction-screen/deposit-transaction-screen.tsx

@@ -76,10 +76,11 @@ export function DepositTransactionScreen({
 
   return (
     <VStack w={'45%'} spacing={'15px'}>
-      <Vault vault={currentVault!} />
+      <Vault vault={currentVault!} variant={'selected'} />
       <VaultTransactionForm
         vault={currentVault!}
-        type={'deposit'}
+        flow={'mint'}
+        currentStep={mintStep[0]}
         currentBitcoinPrice={bitcoinPrice}
         bitcoinWalletContextState={bitcoinWalletContextState}
         isBitcoinWalletLoading={isBitcoinWalletLoading}

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

@@ -10,11 +10,11 @@ export function MintUnmintLayout({ children }: MintUnmintLayoutProps): React.JSX
     <VStack
       px={'15px'}
       w={'68.5%'}
-      h={'825px'}
+      h={'925px'}
       bg={'background.container.01'}
       border={'1px solid'}
       borderRadius={'md'}
-      borderColor={'border.lightBlue.01'}
+      borderColor={'white.03'}
       css={{
         animation: `${boxShadowAnimation} 0.5s 2 ease-in-out`,
       }}

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

@@ -8,16 +8,11 @@ import { RootState } from '@store/index';
 import { DepositTransactionScreen } from '../deposit-transaction-screen/deposit-transaction-screen';
 import { ProgressTimeline } from '../progress-timeline/progress-timeline';
 import { SetupVaultScreen } from '../setup-vault-screen/setup-vault-screen';
-import { TransactionSummary } from '../transaction-summary/transaction-summary';
 import { Walkthrough } from '../walkthrough/walkthrough';
 import { MintLayout } from './components/mint.layout';
 
 export function Mint(): React.JSX.Element {
-  const {
-    handleSignFundingTransaction,
-    isLoading: isBitcoinWalletLoading,
-    bitcoinDepositAmount,
-  } = usePSBT();
+  const { handleSignFundingTransaction, isLoading: isBitcoinWalletLoading } = usePSBT();
 
   const { mintStep } = useSelector((state: RootState) => state.mintunmint);
   const { risk, fetchUserAddressRisk, isLoading } = useRisk();
@@ -28,7 +23,7 @@ export function Mint(): React.JSX.Element {
       <HStack w={'100%'} alignItems={'start'} justifyContent={'space-between'}>
         <Walkthrough flow={'mint'} currentStep={mintStep[0]} />
         {[0].includes(mintStep[0]) && <SetupVaultScreen />}
-        {[1].includes(mintStep[0]) && (
+        {[1, 2].includes(mintStep[0]) && (
           <DepositTransactionScreen
             handleSignFundingTransaction={handleSignFundingTransaction}
             isBitcoinWalletLoading={isBitcoinWalletLoading}
@@ -37,15 +32,6 @@ export function Mint(): React.JSX.Element {
             isUserEthereumAddressRiskLevelLoading={isLoading}
           />
         )}
-        {[2].includes(mintStep[0]) && (
-          <TransactionSummary
-            depositAmount={bitcoinDepositAmount}
-            currentStep={mintStep}
-            flow={'mint'}
-            blockchain={'ethereum'}
-            width="45%"
-          />
-        )}
       </HStack>
     </MintLayout>
   );

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

@@ -42,7 +42,7 @@ export function UnmintVaultSelector({
           <Text color={'accent.lightBlue.01'} fontSize={'md'} fontWeight={600}>
             Select vault to withdraw Bitcoin:
           </Text>
-          <VaultsList height={'425.5px'} isScrollable={!unmintStep[1]}>
+          <VaultsList height={'625.5px'} isScrollable={!unmintStep[1]}>
             <VaultsListGroupContainer vaults={fundedVaults} isSelectable variant={'select'} />
           </VaultsList>
         </VStack>

src/app/components/mint-unmint/components/unmint/components/withdraw-screen.tsx

@@ -67,10 +67,11 @@ export function WithdrawScreen({
 
   return (
     <VStack w={'45%'} spacing={'15px'}>
-      <Vault vault={currentVault!} />
+      <Vault vault={currentVault!} variant={'selected'} />
       <VaultTransactionForm
         vault={currentVault!}
-        type={'withdraw'}
+        flow={'burn'}
+        currentStep={unmintStep[0]}
         currentBitcoinPrice={bitcoinPrice}
         bitcoinWalletContextState={bitcoinWalletContextState}
         isBitcoinWalletLoading={isBitcoinWalletLoading}

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

@@ -6,7 +6,6 @@ import { useRisk } from '@hooks/use-risk';
 import { RootState } from '@store/index';
 
 import { ProgressTimeline } from '../progress-timeline/progress-timeline';
-import { TransactionSummary } from '../transaction-summary/transaction-summary';
 import { Walkthrough } from '../walkthrough/walkthrough';
 import { UnmintVaultSelector } from './components/unmint-vault-selector';
 import { UnmintLayout } from './components/unmint.layout';
@@ -30,20 +29,12 @@ export function Unmint(): React.JSX.Element {
             isUserEthereumAddressRiskLevelLoading={isLoading}
           />
         )}
-        {[1].includes(unmintStep[0]) && (
+        {[1, 2].includes(unmintStep[0]) && (
           <WithdrawScreen
             isBitcoinWalletLoading={isBitcoinWalletLoading}
             handleSignWithdrawTransaction={handleSignWithdrawTransaction}
           />
         )}
-        {[2].includes(unmintStep[0]) && (
-          <TransactionSummary
-            currentStep={unmintStep}
-            flow={'unmint'}
-            blockchain={'bitcoin'}
-            width="45%"
-          />
-        )}
       </HStack>
     </UnmintLayout>
   );

src/app/components/mint-unmint/components/walkthrough/components/walkthrough-header.tsx

@@ -14,7 +14,7 @@ export function WalkthroughHeader({
   title,
 }: WalkthroughHeaderProps): React.JSX.Element {
   return (
-    <VStack alignItems={'start'}>
+    <VStack alignItems={'start'} pb={'25px'}>
       <HStack>
         <Text color={'accent.lightBlue.01'} fontSize={'lg'}>
           Step {currentStep !== undefined && currentStep + 1}

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

@@ -3,7 +3,7 @@ import { HasChildren } from '@models/has-children';
 
 export function WalkthroughLayout({ children }: HasChildren): React.JSX.Element {
   return (
-    <VStack alignItems={'start'} h={'445px'} w={'45%'} spacing={'15px'}>
+    <VStack alignItems={'start'} w={'45%'} spacing={'15px'}>
       {children}
     </VStack>
   );

src/app/components/modals/components/modal-container.tsx

@@ -35,9 +35,15 @@ export function ModalContainer(): React.JSX.Element {
       />
       <SuccessfulFlowModal
         isOpen={isSuccesfulFlowModalOpen[0]}
+        flow={isSuccesfulFlowModalOpen[2] as 'mint' | 'burn'}
+        assetAmount={isSuccesfulFlowModalOpen[3]}
         handleClose={() =>
           handleClosingModal(() =>
-            modalActions.toggleSuccessfulFlowModalVisibility({ vaultUUID: '' })
+            modalActions.toggleSuccessfulFlowModalVisibility({
+              vaultUUID: '',
+              flow: 'mint',
+              assetAmount: 0,
+            })
           )
         }
         vaultUUID={isSuccesfulFlowModalOpen[1] ? isSuccesfulFlowModalOpen[1] : ''}