feat: simplify and refactor usePSBT hook (#243)

* feat: modify usePSBT hook, abstract logic into hooks, dry functions

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

@@ -18,15 +18,15 @@ import { modalActions } from '@store/slices/modal/modal.actions';
 import { NetworkType } from '@shared/constants/network.constants';
 
 interface DepositTransactionScreenProps {
-  handleSignFundingTransaction: (vaultUUID: string, depositAmount: number) => Promise<void>;
+  handleSignDepositTransaction: (vaultUUID: string, depositAmount: number) => Promise<void>;
   isBitcoinWalletLoading: [boolean, string];
   userEthereumAddressRiskLevel: string;
   fetchUserEthereumAddressRiskLevel: () => Promise<string>;
   isUserEthereumAddressRiskLevelLoading: boolean;
 }
 
 export function DepositTransactionScreen({
-  handleSignFundingTransaction,
+  handleSignDepositTransaction,
   isBitcoinWalletLoading,
   userEthereumAddressRiskLevel,
   fetchUserEthereumAddressRiskLevel,
@@ -62,7 +62,7 @@ export function DepositTransactionScreen({
         const currentRisk = await fetchUserEthereumAddressRiskLevel();
         if (currentRisk === 'High') throw new Error('Risk Level is too high');
       }
-      await handleSignFundingTransaction(currentVault.uuid, depositAmount);
+      await handleSignDepositTransaction(currentVault.uuid, depositAmount);
     } catch (error: any) {
       setIsSubmitting(false);
       toast({

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

@@ -14,7 +14,7 @@ import { Walkthrough } from '../walkthrough/walkthrough';
 import { MintLayout } from './components/mint.layout';
 
 export function Mint(): React.JSX.Element {
-  const { handleSignFundingTransaction, isLoading: isBitcoinWalletLoading } = usePSBT();
+  const { handleSignDepositTransaction, isLoading: isBitcoinWalletLoading } = usePSBT();
   const { networkType } = useContext(NetworkConfigurationContext);
 
   const { mintStep } = useSelector((state: RootState) => state.mintunmint);
@@ -28,8 +28,8 @@ export function Mint(): React.JSX.Element {
         {[0].includes(mintStep.step) && <SetupVaultScreen />}
         {[1, 2].includes(mintStep.step) && (
           <DepositTransactionScreen
-            handleSignFundingTransaction={handleSignFundingTransaction}
-            isBitcoinWalletLoading={isBitcoinWalletLoading}
+            handleSignDepositTransaction={handleSignDepositTransaction}
+            isBitcoinWalletLoading={isBitcoinWalletLoading ?? [false, '']}
             userEthereumAddressRiskLevel={risk!}
             fetchUserEthereumAddressRiskLevel={fetchUserAddressRisk}
             isUserEthereumAddressRiskLevelLoading={isLoading}

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

@@ -34,7 +34,7 @@ export function Unmint(): React.JSX.Element {
         )}
         {[1, 2].includes(unmintStep.step) && (
           <WithdrawScreen
-            isBitcoinWalletLoading={isBitcoinWalletLoading}
+            isBitcoinWalletLoading={isBitcoinWalletLoading ?? [false, '']}
             handleSignWithdrawTransaction={handleSignWithdrawTransaction}
           />
         )}

src/app/hooks/use-get-vault.ts

@@ -0,0 +1,49 @@
+import { useContext } from 'react';
+
+import { EthereumNetworkConfigurationContext } from '@providers/ethereum-network-configuration.provider';
+import { NetworkConfigurationContext } from '@providers/network-configuration.provider';
+import { RippleNetworkConfigurationContext } from '@providers/ripple-network-configuration.provider';
+import { getRawVault } from 'dlc-btc-lib/ethereum-functions';
+import { RawVault } from 'dlc-btc-lib/models';
+import { getRippleVault } from 'dlc-btc-lib/ripple-functions';
+
+import { NetworkType } from '@shared/constants/network.constants';
+
+interface UseFetchVault {
+  fetchVault: (vaultUUID: string) => Promise<RawVault>;
+}
+
+export function useFetchVault(): UseFetchVault {
+  const { networkType } = useContext(NetworkConfigurationContext);
+
+  const {
+    ethereumNetworkConfiguration: { dlcManagerContract },
+  } = useContext(EthereumNetworkConfigurationContext);
+
+  const { rippleClient } = useContext(RippleNetworkConfigurationContext);
+
+  const fetchEVMVault = async (vaultUUID: string): Promise<RawVault> => {
+    return await getRawVault(dlcManagerContract, vaultUUID);
+  };
+
+  const fetchXRPLVault = async (vaultUUID: string): Promise<RawVault> => {
+    return await getRippleVault(rippleClient, appConfiguration.rippleIssuerAddress, vaultUUID);
+  };
+
+  const fetchVault = async (vaultUUID: string): Promise<RawVault> => {
+    try {
+      switch (networkType) {
+        case NetworkType.EVM:
+          return fetchEVMVault(vaultUUID);
+        case NetworkType.XRPL:
+          return fetchXRPLVault(vaultUUID);
+      }
+    } catch (error) {
+      throw new Error('Error getting Vault: ' + error);
+    }
+  };
+
+  return {
+    fetchVault,
+  };
+}

src/app/hooks/use-leather.ts

@@ -10,7 +10,6 @@ import {
   RpcResponse,
 } from '@models/software-wallet.models';
 import { BitcoinWalletAction, BitcoinWalletType } from '@models/wallet';
-import { bytesToHex } from '@noble/hashes/utils';
 import {
   BitcoinWalletContext,
   BitcoinWalletContextState,
@@ -24,35 +23,37 @@ import { BITCOIN_NETWORK_MAP, walletLoadingState } from '@shared/constants/bitco
 interface UseLeatherReturnType {
   connectLeatherWallet: () => Promise<void>;
   handleFundingTransaction: (
-    dlcHandler: LeatherDLCHandler,
     vault: RawVault,
     depositAmount: number,
     attestorGroupPublicKey: string,
     feeRecipient: string,
     feeRateMultiplier: number
   ) => Promise<Transaction>;
   handleDepositTransaction: (
-    dlcHandler: LeatherDLCHandler,
     vault: RawVault,
     bitcoinAmount: number,
     attestorGroupPublicKey: string,
     feeRecipient: string,
     feeRateMultiplier: number
   ) => Promise<Transaction>;
   handleWithdrawTransaction: (
-    dlcHandler: LeatherDLCHandler,
     vault: RawVault,
     depositAmount: number,
     attestorGroupPublicKey: string,
     feeRecipient: string,
     feeRateMultiplier: number
-  ) => Promise<string>;
+  ) => Promise<Transaction>;
   isLoading: [boolean, string];
 }
 
 export function useLeather(): UseLeatherReturnType {
-  const { setDLCHandler, setBitcoinWalletContextState, setBitcoinWalletType, bitcoinWalletType } =
-    useContext(BitcoinWalletContext);
+  const {
+    setDLCHandler,
+    dlcHandler,
+    setBitcoinWalletContextState,
+    setBitcoinWalletType,
+    bitcoinWalletType,
+  } = useContext(BitcoinWalletContext);
 
   const [isLoading, setIsLoading] = useState<[boolean, string]>([false, '']);
 
@@ -130,7 +131,6 @@ export function useLeather(): UseLeatherReturnType {
 
   /**
    * Creates the Funding Transaction and signs it with Leather Wallet.
-   * @param dlcHandler The DLC Handler.
    * @param vault The Vault to interact with.
    * @param bitcoinAmount The Bitcoin Amount to fund the Vault.
    * @param attestorGroupPublicKey The Attestor Group Public Key.
@@ -139,20 +139,21 @@ export function useLeather(): UseLeatherReturnType {
    * @returns The Signed Funding Transaction.
    */
   async function handleFundingTransaction(
-    dlcHandler: LeatherDLCHandler,
     vault: RawVault,
     depositAmount: number,
     attestorGroupPublicKey: string,
     feeRecipient: string,
     feeRateMultiplier: number
   ): Promise<Transaction> {
     try {
+      if (!dlcHandler) throw new LeatherError('DLC Handler is not set');
+
       setIsLoading(
         walletLoadingState(BitcoinWalletAction.CREATING_TRANSACTION, bitcoinWalletType, 'Funding')
       );
       const formattedDepositAmount = BigInt(shiftValue(depositAmount));
 
-      const fundingPSBT = await dlcHandler?.createFundingPSBT(
+      const fundingPSBT = await dlcHandler.createFundingPSBT(
         vault,
         formattedDepositAmount,
         attestorGroupPublicKey,
@@ -176,7 +177,6 @@ export function useLeather(): UseLeatherReturnType {
 
   /**
    * Creates a Deposit Transaction and signs it with Leather Wallet.
-   * @param dlcHandler The DLC Handler.
    * @param vault The Vault to interact with.
    * @param depositAmount The Bitcoin Amount to deposit into the Vault.
    * @param attestorGroupPublicKey The Attestor Group Public Key.
@@ -185,21 +185,22 @@ export function useLeather(): UseLeatherReturnType {
    * @returns The Signed Deposit Transaction.
    */
   async function handleDepositTransaction(
-    dlcHandler: LeatherDLCHandler,
     vault: RawVault,
     depositAmount: number,
     attestorGroupPublicKey: string,
     feeRecipient: string,
     feeRateMultiplier: number
   ): Promise<Transaction> {
     try {
+      if (!dlcHandler) throw new LeatherError('DLC Handler is not set');
+
       setIsLoading(
         walletLoadingState(BitcoinWalletAction.CREATING_TRANSACTION, bitcoinWalletType, 'Deposit')
       );
 
       const formattedDepositAmount = BigInt(shiftValue(depositAmount));
 
-      const depositPSBT = await dlcHandler?.createDepositPSBT(
+      const depositPSBT = await dlcHandler.createDepositPSBT(
         vault,
         formattedDepositAmount,
         attestorGroupPublicKey,
@@ -224,7 +225,6 @@ export function useLeather(): UseLeatherReturnType {
 
   /**
    * Creates a Withdraw Transaction and signs it with Unisat or Fordefi Wallet.
-   * @param dlcHandler The DLC Handler.
    * @param vault The Vault to interact with.
    * @param withdrawAmount The Bitcoin Amount to withdraw from the Vault.
    * @param attestorGroupPublicKey The Attestor Group Public Key.
@@ -233,14 +233,15 @@ export function useLeather(): UseLeatherReturnType {
    * @returns The Signed Withdraw Transaction.
    */
   async function handleWithdrawTransaction(
-    dlcHandler: LeatherDLCHandler,
     vault: RawVault,
     withdrawAmount: number,
     attestorGroupPublicKey: string,
     feeRecipient: string,
     feeRateMultiplier: number
-  ): Promise<string> {
+  ): Promise<Transaction> {
     try {
+      if (!dlcHandler) throw new LeatherError('DLC Handler is not set');
+
       setIsLoading(
         walletLoadingState(BitcoinWalletAction.CREATING_TRANSACTION, bitcoinWalletType, 'Withdraw')
       );
@@ -265,7 +266,7 @@ export function useLeather(): UseLeatherReturnType {
         'withdraw'
       );
 
-      return bytesToHex(signedWithdrawTransaction.toPSBT());
+      return signedWithdrawTransaction;
     } catch (error) {
       throw new LeatherError(`Error handling Withdrawal Transaction: ${error}`);
     } finally {