feat: psbt without pre (#50)

* feat: add psbt support logic

* feat: add signpsbt hook to extract logic from the the form

* feat: add psbt signing, splitting locking into two steps

* feat: create initial por page with mock function

---------

Co-authored-by: Roza Eisenberg <[email protected]>
Co-authored-by: sosaucily <[email protected]>

package.json

@@ -24,9 +24,14 @@
     "@emotion/styled": "^11.11.0",
     "@fontsource/poppins": "^5.0.8",
     "@ls-lint/ls-lint": "^2.2.2",
+    "@noble/hashes": "^1.3.3",
     "@reduxjs/toolkit": "^1.9.7",
+    "@scure/base": "^1.1.5",
+    "@scure/bip32": "^1.3.3",
+    "@scure/btc-signer": "^1.2.1",
     "@trivago/prettier-plugin-sort-imports": "^4.2.1",
     "@types/chrome": "^0.0.248",
+    "bitcoinjs-lib": "^6.1.5",
     "concurrently": "^8.2.2",
     "decimal.js": "^10.4.3",
     "dotenv": "^16.3.1",
@@ -37,6 +42,7 @@
     "eslint-plugin-react": "^7.33.2",
     "ethers": "5.7.2",
     "formik": "^2.4.5",
+    "micro-packed": "^0.5.1",
     "prettier": "^3.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/app/app.tsx

@@ -2,6 +2,7 @@ import { Route } from 'react-router-dom';
 
 import { AppLayout } from '@components/app.layout';
 import { MyVaults } from '@pages/my-vaults/my-vaults';
+import { ProofOfReservePage } from '@pages/proof-of-reserve/proof-of-reserve-page';
 import { BalanceContextProvider } from '@providers/balance-context-provider';
 
 import { About } from './pages/about/about';
@@ -18,6 +19,7 @@ export function App(): React.JSX.Element {
             <Route path="/" element={<Dashboard />} />
             <Route path="/my-vaults" element={<MyVaults />} />
             <Route path="/how-it-works" element={<About />} />
+            <Route path="/proof-of-reserve" element={<ProofOfReservePage />} />
           </AppLayout>
         </BalanceContextProvider>
       </VaultContextProvider>

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

@@ -1,25 +1,39 @@
-import { useContext, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { Button, VStack } from '@chakra-ui/react';
+import { Button, VStack, useToast } from '@chakra-ui/react';
 import { VaultCard } from '@components/vault/vault-card';
+import { UseBitcoinReturnType } from '@hooks/use-bitcoin';
+import { UseEthereumReturnType } from '@hooks/use-ethereum';
+import { UseSignPSBTReturnType } from '@hooks/use-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';
 
 import { LockScreenProtocolFee } from './components/protocol-fee';
 
 interface LockScreenProps {
+  bitcoinHandler: UseBitcoinReturnType;
+  ethereumHandler: UseEthereumReturnType;
+  psbtHandler: UseSignPSBTReturnType;
   currentStep: [number, string];
 }
 
-export function LockScreen({ currentStep }: LockScreenProps): React.JSX.Element {
+export function LockScreen({
+  currentStep,
+  bitcoinHandler,
+  psbtHandler,
+  ethereumHandler,
+}: LockScreenProps): React.JSX.Element {
+  const toast = useToast();
   const dispatch = useDispatch();
+
   const { readyVaults } = useVaults();
-  const blockchainContext = useContext(BlockchainContext);
-  const bitcoin = blockchainContext?.bitcoin;
-  const ethereum = blockchainContext?.ethereum;
+
+  const { bitcoinPrice } = bitcoinHandler;
+  const { getProtocolFee } = ethereumHandler;
+  const { handleSignFundingTransaction } = psbtHandler;
 
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [protocolFeePercentage, setProtocolFeePercentage] = useState<number | undefined>(undefined);
@@ -28,21 +42,31 @@ export function LockScreen({ currentStep }: LockScreenProps): React.JSX.Element
 
   useEffect(() => {
     const fetchProtocolFeePercentage = async () => {
-      const currentProtocolFeePercentage = await ethereum?.getProtocolFee();
+      const currentProtocolFeePercentage = await getProtocolFee();
       setProtocolFeePercentage(currentProtocolFeePercentage);
     };
     fetchProtocolFeePercentage();
-  }, [ethereum]);
+  }, [getProtocolFee]);
 
   async function handleClick(currentVault?: Vault) {
     if (!currentVault) return;
 
     try {
       setIsSubmitting(true);
-      await bitcoin?.fetchBitcoinContractOfferAndSendToUserWallet(currentVault);
+      await handleSignFundingTransaction(currentVault.collateral, currentVault.uuid);
+      setTimeout(() => {
+        dispatch(mintUnmintActions.setMintStep([2, currentVault.uuid]));
+        setIsSubmitting(false);
+      }, 3000);
     } 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,
+      });
     }
   }
 
@@ -51,7 +75,7 @@ export function LockScreen({ currentStep }: LockScreenProps): React.JSX.Element
       <VaultCard vault={currentVault} isSelected />
       <LockScreenProtocolFee
         assetAmount={currentVault?.collateral}
-        bitcoinPrice={bitcoin?.bitcoinPrice}
+        bitcoinPrice={bitcoinPrice}
         protocolFeePercentage={protocolFeePercentage}
       />
       <Button