feat: fix minor ui issues (#183)

DLC-link · Sep 27, 2024 · d62647d · d62647d
1 parent 983a7d8
commit d62647d
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 37 deletions.
diff --git a/...app/components/mint-unmint/components/burn-transaction-screen/burn-transaction-screen.tsx b/...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,12 +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));
@@ -61,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 : '',
@@ -90,7 +93,7 @@ export function BurnTokenTransactionForm({
   }
 
   return (
-    <VStack w={'45%'}>
+    <VStack w={'45%'} spacing={'15px'}>
       <Vault vault={currentVault!} variant={'selected'} />
       <VaultTransactionForm
         vault={currentVault!}
@@ -104,6 +107,7 @@ export function BurnTokenTransactionForm({
         userEthereumAddressRiskLevel={userEthereumAddressRiskLevel}
         isUserEthereumAddressRiskLevelLoading={isUserEthereumAddressRiskLevelLoading}
         handleCancelButtonClick={handleCancel}
+        isSubmitting={isSubmitting}
       />
     </VStack>
   );

diff --git a/...mponents/mint-unmint/components/deposit-transaction-screen/deposit-transaction-screen.tsx b/...mponents/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,
@@ -89,6 +93,7 @@ export function DepositTransactionScreen({
         handleButtonClick={handleButtonClick}
         handleCancelButtonClick={handleCancel}
         depositLimit={depositLimit}
+        isSubmitting={isSubmitting}
       />
     </VStack>
   );

diff --git a/src/app/components/mint-unmint/components/unmint/components/withdraw-screen.tsx b/src/app/components/mint-unmint/components/unmint/components/withdraw-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';
@@ -34,11 +34,15 @@ export function WithdrawScreen({
   const { unmintStep } = useSelector((state: RootState) => state.mintunmint);
   const currentVault = allVaults.find(vault => vault.uuid === unmintStep[1]);
 
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
   async function handleWithdraw(withdrawAmount: number): Promise<void> {
     if (currentVault) {
       try {
+        setIsSubmitting(true);
         await handleSignWithdrawTransaction(currentVault.uuid, withdrawAmount);
       } catch (error) {
+        setIsSubmitting(false);
         toast({
           title: 'Failed to sign transaction',
           description: error instanceof Error ? error.message : '',
@@ -78,6 +82,7 @@ export function WithdrawScreen({
         handleButtonClick={handleButtonClick}
         handleCancelButtonClick={handleCancel}
         depositLimit={depositLimit}
+        isSubmitting={isSubmitting}
       />
     </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
@@ -16,9 +16,9 @@ interface SuccessfulFlowModalProps extends ModalComponentProps {
 
 function getModalText(flow: 'mint' | 'burn', assetAmount?: number): string {
   if (flow === 'mint') {
-    return `You have successfully deposited ${assetAmount} BTC from you Bitcoin Wallet into your Vault, and minted ${assetAmount} dlcBTC to your address.`;
+    return `You have successfully deposited ${assetAmount} BTC from your Bitcoin Wallet into your Vault, and minted ${assetAmount} dlcBTC to your destination address.`;
   } else {
-    return `You have successfully burned ${assetAmount} dlcBTC from your address, and withdraw ${assetAmount} BTC from your Vault into your Bitcoin Wallet.`;
+    return `You have successfully burned ${assetAmount} dlcBTC from your destination address, and withdrawn ${assetAmount} BTC from your Vault into your Bitcoin Wallet.`;
   }
 }
 

diff --git a/...n.transaction-form/components/transaction-screen.transaction-form.submit-button-group.tsx b/...n.transaction-form/components/transaction-screen.transaction-form.submit-button-group.tsx
@@ -21,10 +21,10 @@ function getButtonLabel(
         ? 'Sign Burn Transaction'
         : isWalletReady
           ? 'Sign Withdraw Transaction'
-          : 'Connect Wallet';
+          : 'Connect Bitcoin Wallet';
 
     case 'mint':
-      return isWalletReady ? 'Sign Deposit Transaction' : 'Connect Wallet';
+      return isWalletReady ? 'Sign Deposit Transaction' : 'Connect Bitcoin Wallet';
     default:
       throw new Error('Invalid Flow Type');
   }
@@ -37,6 +37,7 @@ interface TransactionFormSubmitButtonGroupProps {
   userEthereumAddressRiskLevel: string;
   bitcoinWalletContextState: any;
   handleCancelButtonClick: () => void;
+  isSubmitting: boolean;
 }
 
 export function TransactionFormSubmitButtonGroup({
@@ -46,13 +47,14 @@ export function TransactionFormSubmitButtonGroup({
   userEthereumAddressRiskLevel,
   bitcoinWalletContextState,
   handleCancelButtonClick,
+  isSubmitting,
 }: TransactionFormSubmitButtonGroupProps): React.JSX.Element {
   const formProperties = getFormProperties(flow, currentStep);
   return (
     <VStack w={'100%'} spacing={'15px'}>
       <formAPI.Subscribe
-        selector={state => [state.canSubmit, state.isSubmitting]}
-        children={([canSubmit, isSubmitting]) => (
+        selector={state => [state.canSubmit]}
+        children={([canSubmit]) => (
           <Button
             w={'100%'}
             p={'25px'}
@@ -64,7 +66,7 @@ export function TransactionFormSubmitButtonGroup({
             isDisabled={
               userEthereumAddressRiskLevel
                 ? ['High', 'Severe'].includes(userEthereumAddressRiskLevel) || !canSubmit
-                : !canSubmit
+                : !canSubmit || isSubmitting
             }
           >
             {getButtonLabel(flow, currentStep, isSubmitting, bitcoinWalletContextState)}
@@ -73,7 +75,7 @@ export function TransactionFormSubmitButtonGroup({
       />
       <Button
         fontSize={'md'}
-        isLoading={formAPI.state.isSubmitting}
+        isLoading={isSubmitting}
         variant={'navigate'}
         onClick={handleCancelButtonClick}
       >

diff --git a/...nsaction-form/components/transaction-screent.transaction-form.transaction-information.tsx b/...nsaction-form/components/transaction-screent.transaction-form.transaction-information.tsx
@@ -1,28 +1,20 @@
 import { HStack, Text } from '@chakra-ui/react';
-import { Vault } from '@models/vault';
-import Decimal from 'decimal.js';
 
 interface TransactionFormWarningProps {
   flow: 'mint' | 'burn';
-  vault: Vault;
   currentStep: number;
   assetAmount: number;
   isBitcoinWalletLoading: [boolean, string];
 }
 
 export function TransactionFormTransactionInformation({
   flow,
-  vault,
   currentStep,
   assetAmount,
   isBitcoinWalletLoading,
 }: TransactionFormWarningProps): React.JSX.Element | false {
-  if (isBitcoinWalletLoading[0] || [0, 2].includes(currentStep)) return false;
+  if (isBitcoinWalletLoading[0] || !(flow === 'mint' && currentStep === 1)) return false;
 
-  const amount =
-    flow === 'burn' && currentStep === 1
-      ? new Decimal(vault.valueLocked).minus(vault.valueMinted).toNumber()
-      : assetAmount;
   return (
     <HStack
       p={'15px'}
@@ -32,7 +24,7 @@ export function TransactionFormTransactionInformation({
       borderRadius={'md'}
     >
       <Text color={'white.01'} fontSize={'sm'}>
-        <span style={{ fontWeight: 800 }}>Make sure you have {amount} BTC + (fees) </span>
+        <span style={{ fontWeight: 800 }}>Make sure you have {assetAmount} BTC + (fees) </span>
         in your Bitcoin Wallet before proceeding to the next step.
       </Text>
     </HStack>

diff --git a/...rm/components/transaction-screen.transaction-form/transaction-screen.transaction-form.tsx b/...rm/components/transaction-screen.transaction-form/transaction-screen.transaction-form.tsx
@@ -69,7 +69,8 @@ function getTransactionButtonGroup(
   formAPI: TransactionFormAPI,
   userEthereumAddressRiskLevel: any,
   bitcoinWalletContextState: BitcoinWalletContextState,
-  handleCancelButtonClick: () => void
+  handleCancelButtonClick: () => void,
+  isSubmitting: boolean
 ): React.JSX.Element | false {
   const showSubmitButtonGroup =
     (flow === 'mint' && currentStep === 1) || (flow === 'burn' && [0, 1].includes(currentStep));
@@ -82,6 +83,7 @@ function getTransactionButtonGroup(
       userEthereumAddressRiskLevel={userEthereumAddressRiskLevel}
       bitcoinWalletContextState={bitcoinWalletContextState}
       handleCancelButtonClick={handleCancelButtonClick}
+      isSubmitting={isSubmitting}
     />
   ) : (
     <TransactionFormNavigateButtonGroup flow={flow} />
@@ -98,6 +100,7 @@ interface VaultTransactionFormProps {
   vault: Vault;
   handleButtonClick: (assetValue: number) => Promise<void>;
   handleCancelButtonClick: () => void;
+  isSubmitting: boolean;
   currentBitcoinPrice?: number;
   depositLimit?: { minimumDeposit: number; maximumDeposit: number } | undefined;
 }
@@ -112,6 +115,7 @@ export function VaultTransactionForm({
   vault,
   handleButtonClick,
   handleCancelButtonClick,
+  isSubmitting,
   currentBitcoinPrice,
   depositLimit,
 }: VaultTransactionFormProps): React.JSX.Element {
@@ -178,7 +182,6 @@ export function VaultTransactionForm({
         />
         <TransactionFormTransactionInformation
           flow={flow}
-          vault={vault}
           currentStep={currentStep}
           assetAmount={currentFieldValue}
           isBitcoinWalletLoading={isBitcoinWalletLoading}
@@ -196,7 +199,8 @@ export function VaultTransactionForm({
           form,
           userEthereumAddressRiskLevel,
           bitcoinWalletContextState,
-          handleCancelButtonClick
+          handleCancelButtonClick,
+          isSubmitting
         )}
       </VStack>
     </form>