feat: add protocol fees

package.json

@@ -44,6 +44,7 @@
     "eslint-plugin-react": "^7.33.2",
     "ethers": "5.7.2",
     "formik": "^2.4.5",
+    "framer-motion": "^11.0.20",
     "micro-packed": "^0.5.1",
     "prettier": "^3.0.3",
     "react": "^18.2.0",

src/app/components/mint-unmint/components/lock-screen/sign-closing-transaction-screen.tsx

@@ -1,10 +1,9 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { Button, VStack, useToast } from '@chakra-ui/react';
 import { VaultCard } from '@components/vault/vault-card';
 import { useBitcoinPrice } from '@hooks/use-bitcoin-price';
-import { useEthereum } from '@hooks/use-ethereum';
 import { useVaults } from '@hooks/use-vaults';
 import { BitcoinError } from '@models/error-types';
 import { Vault } from '@models/vault';
@@ -27,22 +26,11 @@ export function SignClosingTransactionScreen({
   const { readyVaults } = useVaults();
 
   const { bitcoinPrice } = useBitcoinPrice();
-  const { getProtocolFee } = useEthereum();
 
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const [protocolFeePercentage, setProtocolFeePercentage] = useState<number | undefined>(undefined);
 
   const currentVault = readyVaults.find(vault => vault.uuid === currentStep[1]);
 
-  useEffect(() => {
-    const fetchProtocolFeePercentage = async () => {
-      const currentProtocolFeePercentage = await getProtocolFee();
-      setProtocolFeePercentage(currentProtocolFeePercentage);
-    };
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    fetchProtocolFeePercentage();
-  }, [getProtocolFee]);
-
   async function handleClick(currentVault?: Vault) {
     if (!currentVault) return;
 
@@ -68,7 +56,7 @@ export function SignClosingTransactionScreen({
       <LockScreenProtocolFee
         assetAmount={currentVault?.collateral}
         bitcoinPrice={bitcoinPrice}
-        protocolFeePercentage={protocolFeePercentage}
+        protocolFeePercentage={currentVault?.btcRedeemFeeBasisPoints}
       />
       <Button
         isLoading={isSubmitting}

src/app/components/mint-unmint/components/lock-screen/sign-funding-transaction-screen.tsx

@@ -1,53 +1,41 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { Button, VStack, useToast } from '@chakra-ui/react';
 import { VaultCard } from '@components/vault/vault-card';
 import { useBitcoinPrice } from '@hooks/use-bitcoin-price';
-import { useEthereum } from '@hooks/use-ethereum';
 import { useVaults } from '@hooks/use-vaults';
 import { BitcoinError } from '@models/error-types';
 import { Vault } from '@models/vault';
 import { mintUnmintActions } from '@store/slices/mintunmint/mintunmint.actions';
 
 import { LockScreenProtocolFee } from './components/protocol-fee';
 
-interface SignClosingTransactionScreenProps {
+interface SignFundingTransactionScreenProps {
   currentStep: [number, string];
-  handleSignFundingTransaction: (btcAmount: number, vaultUUID: string) => Promise<void>;
+  handleSignFundingTransaction: (vault: Vault) => Promise<void>;
 }
 
 export function SignFundingTransactionScreen({
   currentStep,
   handleSignFundingTransaction,
-}: SignClosingTransactionScreenProps): React.JSX.Element {
+}: SignFundingTransactionScreenProps): React.JSX.Element {
   const toast = useToast();
   const dispatch = useDispatch();
 
   const { bitcoinPrice } = useBitcoinPrice();
-  const { getProtocolFee } = useEthereum();
   const { readyVaults } = useVaults();
 
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const [protocolFeePercentage, setProtocolFeePercentage] = useState<number | undefined>(undefined);
 
   const currentVault = readyVaults.find(vault => vault.uuid === currentStep[1]);
 
-  useEffect(() => {
-    const fetchProtocolFeePercentage = async () => {
-      const currentProtocolFeePercentage = await getProtocolFee();
-      setProtocolFeePercentage(currentProtocolFeePercentage);
-    };
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    fetchProtocolFeePercentage();
-  }, [getProtocolFee]);
-
   async function handleClick(currentVault?: Vault) {
     if (!currentVault) return;
 
     try {
       setIsSubmitting(true);
-      await handleSignFundingTransaction(currentVault.collateral, currentVault.uuid);
+      await handleSignFundingTransaction(currentVault);
       setTimeout(() => {
         dispatch(mintUnmintActions.setMintStep([2, currentVault.uuid]));
         setIsSubmitting(false);
@@ -70,7 +58,7 @@ export function SignFundingTransactionScreen({
       <LockScreenProtocolFee
         assetAmount={currentVault?.collateral}
         bitcoinPrice={bitcoinPrice}
-        protocolFeePercentage={protocolFeePercentage}
+        protocolFeePercentage={currentVault?.btcMintFeeBasisPoints}
       />
       <Button
         isLoading={isSubmitting}

src/app/hooks/use-attestors.ts

@@ -5,6 +5,7 @@ import { useEndpoints } from './use-endpoints';
 interface UseAttestorsReturnType {
   getAttestorGroupPublicKey: () => Promise<string>;
   sendClosingTransactionToAttestors: (
+    fundingTransaction: string,
     closingPSBT: string,
     uuid: string,
     userNativeSegwitAddress: string
@@ -31,6 +32,7 @@ export function useAttestors(): UseAttestorsReturnType {
   }
 
   async function sendClosingTransactionToAttestors(
+    fundingTransaction: string,
     closingPSBT: string,
     uuid: string,
     userNativeSegwitAddress: string
@@ -43,6 +45,7 @@ export function useAttestors(): UseAttestorsReturnType {
           headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' },
           body: JSON.stringify({
             uuid,
+            funding_transaction: fundingTransaction,
             closing_psbt: closingPSBT,
             mint_address: userNativeSegwitAddress,
             chain: ethereumAttestorChainID,