feat: add sendpsbt function

DLC-link · Feb 5, 2024 · 95df24c · 95df24c
1 parent 96769c7
commit 95df24c
Show file tree

Hide file tree

Showing 6 changed files with 211 additions and 141 deletions.
diff --git a/src/app/components/mint-unmint/components/lock-screen/lock-screen.tsx b/src/app/components/mint-unmint/components/lock-screen/lock-screen.tsx
@@ -1,9 +1,11 @@
 import { useContext, useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { Button, VStack } from '@chakra-ui/react';
+import { Button, Checkbox, Fade, HStack, Stack, Text, VStack, useToast } from '@chakra-ui/react';
 import { VaultCard } from '@components/vault/vault-card';
+import { useSignPSBT } from '@hooks/use-sign-psbt';
 import { useVaults } from '@hooks/use-vaults';
+import { BitcoinError } from '@models/error-types';
 import { Vault } from '@models/vault';
 import { BlockchainContext } from '@providers/blockchain-context-provider';
 import { mintUnmintActions } from '@store/slices/mintunmint/mintunmint.actions';
@@ -15,10 +17,13 @@ interface LockScreenProps {
 }
 
 export function LockScreen({ currentStep }: LockScreenProps): React.JSX.Element {
+  const toast = useToast();
   const dispatch = useDispatch();
   const { readyVaults } = useVaults();
   const blockchainContext = useContext(BlockchainContext);
   const bitcoin = blockchainContext?.bitcoin;
+  const { handleSignTransaction, fundingTransactionSigned, closingTransactionSigned } =
+    useSignPSBT(bitcoin);
   const ethereum = blockchainContext?.ethereum;
 
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -39,10 +44,17 @@ export function LockScreen({ currentStep }: LockScreenProps): React.JSX.Element
 
     try {
       setIsSubmitting(true);
-      await bitcoin?.fetchBitcoinContractOfferAndSendToUserWallet(currentVault);
+      await handleSignTransaction(currentVault.collateral, currentVault.uuid);
+      setIsSubmitting(false);
     } catch (error) {
       setIsSubmitting(false);
-      throw new Error('Error locking vault');
+      toast({
+        title: 'Failed to sign transaction',
+        description: error instanceof BitcoinError ? error.message : '',
+        status: 'error',
+        duration: 9000,
+        isClosable: true,
+      });
     }
   }
 
@@ -68,6 +80,32 @@ export function LockScreen({ currentStep }: LockScreenProps): React.JSX.Element
       >
         Cancel
       </Button>
+      <Stack w={'100%'}>
+        <Fade in={isSubmitting || (fundingTransactionSigned && !closingTransactionSigned)}>
+          <VStack w={'100%'} spacing={'10px'} p={'15px'} bgColor={'white.03'} borderRadius={'md'}>
+            <HStack w={'100%'} justifyContent={'space-between'}>
+              <Checkbox
+                iconColor={'accent.orange.01'}
+                isChecked={fundingTransactionSigned}
+                isDisabled
+              />
+              <Text color={'white.01'} fontSize={'sm'} fontWeight={800}>
+                Funding Transaction
+              </Text>
+            </HStack>
+            <HStack w={'100%'} justifyContent={'space-between'}>
+              <Checkbox
+                iconColor={'accent.orange.01'}
+                isChecked={closingTransactionSigned}
+                isDisabled
+              />
+              <Text color={'white.01'} fontSize={'sm'} fontWeight={800}>
+                Closing Transaction
+              </Text>
+            </HStack>
+          </VStack>
+        </Fade>
+      </Stack>
     </VStack>
   );
 }
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
@@ -1,20 +1,8 @@
 import { useContext, useState } from 'react';
 
-import {
-  Button,
-  Checkbox,
-  Fade,
-  FormControl,
-  FormErrorMessage,
-  HStack,
-  Stack,
-  Text,
-  VStack,
-  useToast,
-} from '@chakra-ui/react';
+import { Button, FormControl, FormErrorMessage, Text, VStack, useToast } from '@chakra-ui/react';
 import { customShiftValue } from '@common/utilities';
-import { useSignPSBT } from '@hooks/use-sign-psbt';
-import { BitcoinError } from '@models/error-types';
+import { EthereumError } from '@models/error-types';
 import { BlockchainContext } from '@providers/blockchain-context-provider';
 import { Form, Formik } from 'formik';
 
@@ -30,23 +18,20 @@ const initialValues: TransactionFormValues = { amount: 0.001 };
 export function TransactionForm(): React.JSX.Element {
   const toast = useToast();
   const blockchainContext = useContext(BlockchainContext);
-  const { handleSignTransaction, fundingTransactionSigned, closingTransactionSigned } = useSignPSBT(
-    blockchainContext?.bitcoin
-  );
+  const ethereum = blockchainContext?.ethereum;
   const bitcoinPrice = blockchainContext?.bitcoin.bitcoinPrice;
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   async function handleSetup(btcDepositAmount: number) {
     try {
       setIsSubmitting(true);
       const shiftedBTCDepositAmount = customShiftValue(btcDepositAmount, 8, false);
-      await handleSignTransaction(shiftedBTCDepositAmount);
-      setIsSubmitting(false);
+      await ethereum?.setupVault(shiftedBTCDepositAmount);
     } catch (error) {
       setIsSubmitting(false);
       toast({
-        title: 'Failed to sign transaction',
-        description: error instanceof BitcoinError ? error.message : '',
+        title: 'Failed to create vault',
+        description: error instanceof EthereumError ? error.message : '',
         status: 'error',
         duration: 9000,
         isClosable: true,
@@ -78,42 +63,8 @@ export function TransactionForm(): React.JSX.Element {
                   type={'submit'}
                   isDisabled={Boolean(errors.amount)}
                 >
-                  {fundingTransactionSigned ? 'Sign Closing Transaction' : 'Lock Bitcoin'}
+                  Create Vault
                 </Button>
-                <Stack w={'100%'}>
-                  <Fade
-                    in={isSubmitting || (fundingTransactionSigned && !closingTransactionSigned)}
-                  >
-                    <VStack
-                      w={'100%'}
-                      spacing={'10px'}
-                      p={'15px'}
-                      bgColor={'white.03'}
-                      borderRadius={'md'}
-                    >
-                      <HStack w={'100%'} justifyContent={'space-between'}>
-                        <Checkbox
-                          iconColor={'accent.orange.01'}
-                          isChecked={fundingTransactionSigned}
-                          isDisabled
-                        />
-                        <Text color={'white.01'} fontSize={'sm'} fontWeight={800}>
-                          Funding Transaction
-                        </Text>
-                      </HStack>
-                      <HStack w={'100%'} justifyContent={'space-between'}>
-                        <Checkbox
-                          iconColor={'accent.orange.01'}
-                          isChecked={closingTransactionSigned}
-                          isDisabled
-                        />
-                        <Text color={'white.01'} fontSize={'sm'} fontWeight={800}>
-                          Closing Transaction
-                        </Text>
-                      </HStack>
-                    </VStack>
-                  </Fade>
-                </Stack>
               </VStack>
             </FormControl>
           </Form>

diff --git a/src/app/components/mint-unmint/components/walkthrough/walkthrough.tsx b/src/app/components/mint-unmint/components/walkthrough/walkthrough.tsx
@@ -25,18 +25,17 @@ export function Walkthrough({ flow, currentStep }: WalkthroughProps): React.JSX.
               <WalkthroughHeader
                 currentStep={currentStep}
                 title={'Create Vault'}
-                blockchain={'bitcoin'}
+                blockchain={'ethereum'}
               />
               <Text color={'white.01'} fontSize={'md'}>
-                Select an amount of dlcBTC you would like to mint and sign the required transactions
-                in your{' '}
+                Select an amount of dlcBTC you would like to mint and confirm it in your{' '}
                 <Link
                   color={'accent.cyan.01'}
-                  href="https://leather.io/"
+                  href="https://metamask.io/"
                   isExternal
                   textDecoration={'underline'}
                 >
-                  Bitcoin Wallet
+                  Ethereum Wallet
                 </Link>
                 .
               </Text>