Merge pull request #44 from DLC-link/feat/protocol-fee-percentage-fet…

…ching

feat: added protocol fee percentage fetching for lock screen

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

@@ -3,6 +3,7 @@ import { HStack, Text, VStack } from '@chakra-ui/react';
 interface LockScreenProtocolFeeProps {
   assetAmount?: number;
   bitcoinPrice?: number;
+  protocolFeePercentage?: number;
 }
 
 function calculateProtocolFee(amount: number, protocolFeePercentage: number): string {
@@ -20,6 +21,7 @@ function calculateProtocolFeeInUSD(
 export function LockScreenProtocolFee({
   assetAmount,
   bitcoinPrice,
+  protocolFeePercentage,
 }: LockScreenProtocolFeeProps): React.JSX.Element {
   return (
     <VStack
@@ -35,14 +37,18 @@ export function LockScreenProtocolFee({
           Protocol Fee
         </Text>
         <Text color={'white.01'} fontSize={'sm'} fontWeight={800}>
-          {assetAmount && calculateProtocolFee(assetAmount, 0.0001)} BTC
+          {assetAmount &&
+            protocolFeePercentage &&
+            calculateProtocolFee(assetAmount, protocolFeePercentage)}{' '}
+          BTC
         </Text>{' '}
       </HStack>
       <Text color={'white.01'} fontSize={'sm'}>
         ={' '}
         {assetAmount &&
           bitcoinPrice &&
-          calculateProtocolFeeInUSD(assetAmount, bitcoinPrice, 0.0001)}{' '}
+          protocolFeePercentage &&
+          calculateProtocolFeeInUSD(assetAmount, bitcoinPrice, protocolFeePercentage)}{' '}
         $
       </Text>
     </VStack>

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

@@ -1,4 +1,4 @@
-import { useContext, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { Button, VStack } from '@chakra-ui/react';
@@ -19,10 +19,21 @@ export function LockScreen({ currentStep }: LockScreenProps): React.JSX.Element
   const { readyVaults } = useVaults();
   const blockchainContext = useContext(BlockchainContext);
   const bitcoin = blockchainContext?.bitcoin;
+  const ethereum = blockchainContext?.ethereum;
+
   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 ethereum?.getProtocolFee();
+      setProtocolFeePercentage(currentProtocolFeePercentage);
+    };
+    fetchProtocolFeePercentage();
+  }, [ethereum]);
+
   async function handleClick(currentVault?: Vault) {
     if (!currentVault) return;
 
@@ -41,6 +52,7 @@ export function LockScreen({ currentStep }: LockScreenProps): React.JSX.Element
       <LockScreenProtocolFee
         assetAmount={currentVault?.collateral}
         bitcoinPrice={bitcoin?.bitcoinPrice}
+        protocolFeePercentage={protocolFeePercentage}
       />
       <Button
         isLoading={isSubmitting}

src/app/hooks/use-ethereum.ts

@@ -27,6 +27,7 @@ export interface UseEthereumReturnType {
   dlcBTCContract: Contract | undefined;
   getDLCBTCBalance: () => Promise<number | undefined>;
   getLockedBTCBalance: () => Promise<number | undefined>;
+  getProtocolFee: () => Promise<number | undefined>;
   totalSupply: number | undefined;
   requestEthereumAccount: (network: Network, walletType: WalletType) => Promise<void>;
   getAllVaults: () => Promise<void>;
@@ -189,6 +190,16 @@ export function useEthereum(): UseEthereumReturnType {
     }
   }
 
+  async function getProtocolFee(): Promise<number | undefined> {
+    if (!protocolContract) throw new Error('Protocol contract not initialized');
+    try {
+      const btcMintFeeRate = await protocolContract.btcMintFeeRate();
+      return customShiftValue(btcMintFeeRate.toNumber(), 4, true);
+    } catch (error) {
+      throwEthereumError(`Could not fetch protocol fee: `, error);
+    }
+  }
+
   async function addEthereumNetwork(
     newEthereumNetwork: EthereumNetwork,
     walletType: WalletType
@@ -467,6 +478,7 @@ export function useEthereum(): UseEthereumReturnType {
     dlcManagerContract,
     dlcBTCContract,
     getDLCBTCBalance,
+    getProtocolFee,
     totalSupply,
     getLockedBTCBalance,
     requestEthereumAccount,