feat: add interact with another vault button, widen screens (#84)

* feat: add interact with another vault button, widen screens
DLC-link · Apr 25, 2024 · 2a9793a · 2a9793a
1 parent b21a804
commit 2a9793a
Show file tree

Hide file tree

Showing 11 changed files with 57 additions and 26 deletions.
diff --git a/src/app/components/mint-unmint/components/lock-screen/sign-closing-transaction-screen.tsx b/src/app/components/mint-unmint/components/lock-screen/sign-closing-transaction-screen.tsx
@@ -51,7 +51,7 @@ export function SignClosingTransactionScreen({
   }
 
   return (
-    <VStack w={'300px'} spacing={'15px'}>
+    <VStack w={'45%'} spacing={'15px'}>
       <VaultCard vault={currentVault} isSelected />
       <LockScreenProtocolFee
         assetAmount={currentVault?.collateral}

diff --git a/src/app/components/mint-unmint/components/lock-screen/sign-funding-transaction-screen.tsx b/src/app/components/mint-unmint/components/lock-screen/sign-funding-transaction-screen.tsx
@@ -53,7 +53,7 @@ export function SignFundingTransactionScreen({
   }
 
   return (
-    <VStack w={'300px'} spacing={'15px'}>
+    <VStack w={'45%'} spacing={'15px'}>
       <VaultCard vault={currentVault} isSelected />
       <LockScreenProtocolFee
         assetAmount={currentVault?.collateral}

diff --git a/src/app/components/mint-unmint/components/mint/mint.tsx b/src/app/components/mint-unmint/components/mint/mint.tsx
@@ -36,7 +36,12 @@ export function Mint(): React.JSX.Element {
           />
         )}
         {[3, 4].includes(mintStep[0]) && (
-          <TransactionSummary currentStep={mintStep} flow={'mint'} blockchain={'ethereum'} />
+          <TransactionSummary
+            currentStep={mintStep}
+            flow={'mint'}
+            blockchain={'ethereum'}
+            width="45%"
+          />
         )}
       </HStack>
     </MintLayout>

diff --git a/.../components/mint-unmint/components/transaction-form/components/transaction-form-input.tsx b/.../components/mint-unmint/components/transaction-form/components/transaction-form-input.tsx
@@ -42,7 +42,7 @@ export function TransactionFormInput({
           type="number"
           px={'1.5px'}
           h={'25px'}
-          w={'75px'}
+          w={'100%'}
           borderColor={'white.01'}
           focusBorderColor={'white.01'}
           fontSize={'xl'}

diff --git a/src/app/components/mint-unmint/components/transaction-form/transaction-form.tsx b/src/app/components/mint-unmint/components/transaction-form/transaction-form.tsx
@@ -42,7 +42,7 @@ export function TransactionForm(): React.JSX.Element {
   }
 
   return (
-    <VStack w={'300px'}>
+    <VStack w={'45%'}>
       <Formik
         initialValues={initialValues}
         onSubmit={async values => {
@@ -52,7 +52,7 @@ export function TransactionForm(): React.JSX.Element {
         {({ handleSubmit, errors, touched, values }) => (
           <Form onSubmit={handleSubmit}>
             <FormControl isInvalid={!!errors.amount && touched.amount}>
-              <VStack spacing={'15px'} w={'300px'}>
+              <VStack spacing={'15px'} w={'100%'}>
                 <Text w={'100%'} color={'accent.lightBlue.01'}>
                   Amount of dlcBTC you want to mint:
                 </Text>

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
@@ -25,7 +25,7 @@ const flowPropertyMap: FlowPropertyMap = {
   unmint: {
     1: {
       title: 'a) Closing vault in progress',
-      subtitle: 'Your BTC is being unlocked',
+      subtitle: 'BTC is being unlocked',
     },
     2: { title: 'Vault closed' },
   },
@@ -35,13 +35,15 @@ interface TransactionSummaryProps {
   currentStep: [number, string];
   flow: 'mint' | 'unmint';
   blockchain: 'ethereum' | 'bitcoin';
+  width: string;
   handleClose?: () => void;
 }
 
 export function TransactionSummary({
   currentStep,
   flow,
   blockchain,
+  width,
   handleClose,
 }: TransactionSummaryProps): React.JSX.Element {
   const navigate = useNavigate();
@@ -53,7 +55,7 @@ export function TransactionSummary({
     (flow === 'mint' && currentStep[0] === 3) || (flow === 'unmint' && currentStep[0] === 1);
 
   return (
-    <VStack alignItems={'start'} w={'300px'} spacing={'15px'}>
+    <VStack alignItems={'start'} w={width} spacing={'15px'}>
       <HStack w={'100%'}>
         {showProcessing && <Spinner color={'accent.lightBlue.01'} size={'md'} />}
         <Text color={'accent.lightBlue.01'}>{flowPropertyMap[flow][currentStep[0]].title}:</Text>
@@ -75,20 +77,38 @@ export function TransactionSummary({
           View vault statuses in the My Vaults tab.
         </Text>
       </Stack>
-      <Button
-        variant={'navigate'}
-        onClick={() => {
-          dispatch(
-            flow === 'mint'
-              ? mintUnmintActions.setMintStep([0, ''])
-              : mintUnmintActions.setUnmintStep([0, ''])
-          );
-          navigate('/my-vaults');
-          handleClose && handleClose();
-        }}
-      >
-        View in My Vaults
-      </Button>
+      <HStack w={'100%'} spacing={'10px'}>
+        <Button
+          variant={'navigate'}
+          onClick={() => {
+            dispatch(
+              flow === 'mint'
+                ? mintUnmintActions.setMintStep([0, ''])
+                : mintUnmintActions.setUnmintStep([0, ''])
+            );
+            navigate('/my-vaults');
+            handleClose && handleClose();
+          }}
+        >
+          View in My Vaults
+        </Button>
+        {((flow === 'mint' && currentStep[0] === 3) ||
+          (flow === 'unmint' && currentStep[0] === 1)) && (
+          <Button
+            variant={'navigate'}
+            onClick={() => {
+              dispatch(
+                flow === 'mint'
+                  ? mintUnmintActions.setMintStep([0, ''])
+                  : mintUnmintActions.setUnmintStep([0, ''])
+              );
+              handleClose && handleClose();
+            }}
+          >
+            {flow === 'mint' ? 'Create Another Vault' : 'Close Another Vault'}
+          </Button>
+        )}
+      </HStack>
     </VStack>
   );
 }
diff --git a/src/app/components/mint-unmint/components/unmint/components/unmint-vault-selector.tsx b/src/app/components/mint-unmint/components/unmint/components/unmint-vault-selector.tsx
@@ -42,7 +42,7 @@ export function UnmintVaultSelector(): React.JSX.Element {
   }
 
   return (
-    <VStack alignItems={'start'} py={'2.5px'} px={'15px'} w={'300px'} h={'445px'} spacing={'15px'}>
+    <VStack alignItems={'start'} py={'2.5px'} px={'15px'} w={'45%'} h={'445px'} spacing={'15px'}>
       <Text color={'accent.lightBlue.01'} fontSize={'md'} fontWeight={600}>
         Select vault to redeem dlcBTC:
       </Text>

diff --git a/src/app/components/mint-unmint/components/unmint/unmint.tsx b/src/app/components/mint-unmint/components/unmint/unmint.tsx
@@ -19,7 +19,12 @@ export function Unmint(): React.JSX.Element {
         <Walkthrough flow={'unmint'} currentStep={unmintStep[0]} />
         {[0].includes(unmintStep[0]) && <UnmintVaultSelector />}
         {[1, 2].includes(unmintStep[0]) && (
-          <TransactionSummary currentStep={unmintStep} flow={'unmint'} blockchain={'bitcoin'} />
+          <TransactionSummary
+            currentStep={unmintStep}
+            flow={'unmint'}
+            blockchain={'bitcoin'}
+            width="45%"
+          />
         )}
       </HStack>
     </UnmintLayout>

diff --git a/src/app/components/mint-unmint/components/walkthrough/components/walkthrough.layout.tsx b/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={'350px'} spacing={'15px'}>
+    <VStack alignItems={'start'} h={'445px'} w={'45%'} spacing={'15px'}>
       {children}
     </VStack>
   );

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
@@ -20,6 +20,7 @@ export function SuccessfulFlowModal({
         currentStep={[flow === 'mint' ? 4 : 2, vaultUUID]}
         flow={flow}
         blockchain={'ethereum'}
+        width="100%"
         handleClose={() => handleClose()}
       />
     </ModalLayout>

diff --git a/...vault/components/vault-expanded-information/components/vault-expanded-information-row.tsx b/...vault/components/vault-expanded-information/components/vault-expanded-information-row.tsx
@@ -15,7 +15,7 @@ export function VaultExpandedInformationUUIDRow({
   return (
     <HStack pl={'35px'} w={'100%'} alignItems={'start'} spacing={'15px'}>
       <HStack w={'50%'} spacing={'0px'}>
-        <Text w={'50%'} color={'white'} fontSize={'xs'}>
+        <Text pr={'20px'} color={'white'} fontSize={'xs'}>
           UUID
         </Text>
         <Tooltip