Merge remote-tracking branch 'origin' into feat/adjust-header-to-mobile

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

@@ -1,4 +1,4 @@
-import { useContext } from 'react';
+import { useContext, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { VStack, useToast } from '@chakra-ui/react';
@@ -45,13 +45,14 @@ export function BurnTokenTransactionForm({
   const signer = useEthersSigner();
 
   const { unmintStep } = useSelector((state: RootState) => state.mintunmint);
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const currentVault = allVaults.find(vault => vault.uuid === unmintStep[1]);
 
   async function handleButtonClick(withdrawAmount: number): Promise<void> {
     if (!currentVault) return;
-
     try {
+      setIsSubmitting(true);
       const currentRisk = await fetchUserEthereumAddressRiskLevel();
       if (currentRisk === 'High') throw new Error('Risk Level is too high');
       const formattedWithdrawAmount = BigInt(shiftValue(withdrawAmount));
@@ -62,20 +63,21 @@ export function BurnTokenTransactionForm({
         formattedWithdrawAmount
       );
 
-      await getAndFormatVault(currentVault.uuid, ethereumNetworkConfiguration.dlcManagerContract)
-        .then(vault => {
-          dispatch(
-            vaultActions.swapVault({
-              vaultUUID: currentVault.uuid,
-              updatedVault: vault,
-              networkID: chainId?.toString() as EthereumNetworkID,
-            })
-          );
+      const updatedVault = await getAndFormatVault(
+        currentVault.uuid,
+        ethereumNetworkConfiguration.dlcManagerContract
+      );
+      dispatch(
+        vaultActions.swapVault({
+          vaultUUID: currentVault.uuid,
+          updatedVault: updatedVault,
+          networkID: chainId?.toString() as EthereumNetworkID,
         })
-        .then(() => {
-          dispatch(mintUnmintActions.setUnmintStep([1, currentVault.uuid]));
-        });
+      );
+      dispatch(mintUnmintActions.setUnmintStep([1, currentVault.uuid]));
+      setIsSubmitting(false);
     } catch (error) {
+      setIsSubmitting(false);
       toast({
         title: 'Failed to sign Transaction',
         description: error instanceof Error ? error.message : '',
@@ -91,11 +93,12 @@ export function BurnTokenTransactionForm({
   }
 
   return (
-    <VStack w={'45%'}>
-      <Vault vault={currentVault!} />
+    <VStack w={'45%'} spacing={'15px'}>
+      <Vault vault={currentVault!} variant={'selected'} />
       <VaultTransactionForm
         vault={currentVault!}
-        type={'burn'}
+        flow={'burn'}
+        currentStep={unmintStep[0]}
         currentBitcoinPrice={bitcoinPrice}
         handleButtonClick={handleButtonClick}
         depositLimit={depositLimit}
@@ -104,6 +107,7 @@ export function BurnTokenTransactionForm({
         userEthereumAddressRiskLevel={userEthereumAddressRiskLevel}
         isUserEthereumAddressRiskLevelLoading={isUserEthereumAddressRiskLevelLoading}
         handleCancelButtonClick={handleCancel}
+        isSubmitting={isSubmitting}
       />
     </VStack>
   );

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

@@ -1,4 +1,4 @@
-import { useContext } from 'react';
+import { useContext, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { VStack, useToast } from '@chakra-ui/react';
@@ -41,14 +41,18 @@ export function DepositTransactionScreen({
 
   const currentVault = allVaults.find(vault => vault.uuid === mintStep[1]);
 
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
   async function handleDeposit(depositAmount: number) {
     if (!currentVault) return;
 
     try {
+      setIsSubmitting(true);
       const currentRisk = await fetchUserEthereumAddressRiskLevel();
       if (currentRisk === 'High') throw new Error('Risk Level is too high');
       await handleSignFundingTransaction(currentVault.uuid, depositAmount);
     } catch (error: any) {
+      setIsSubmitting(false);
       toast({
         title: 'Failed to sign Deposit Transaction',
         description: error.message,
@@ -76,10 +80,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}
@@ -88,6 +93,7 @@ export function DepositTransactionScreen({
         handleButtonClick={handleButtonClick}
         handleCancelButtonClick={handleCancel}
         depositLimit={depositLimit}
+        isSubmitting={isSubmitting}
       />
     </VStack>
   );

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/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'}