diff --git a/src/app/components/mint-unmint/components/lock-screen/components/protocol-fee.tsx b/src/app/components/mint-unmint/components/lock-screen/components/protocol-fee.tsx index d36f27ac..29c1cae9 100644 --- a/src/app/components/mint-unmint/components/lock-screen/components/protocol-fee.tsx +++ b/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 ( - {assetAmount && calculateProtocolFee(assetAmount, 0.0001)} BTC + {assetAmount && + protocolFeePercentage && + calculateProtocolFee(assetAmount, protocolFeePercentage)}{' '} + BTC {' '} ={' '} {assetAmount && bitcoinPrice && - calculateProtocolFeeInUSD(assetAmount, bitcoinPrice, 0.0001)}{' '} + protocolFeePercentage && + calculateProtocolFeeInUSD(assetAmount, bitcoinPrice, protocolFeePercentage)}{' '} $ 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 index 06f52836..44c974ad 100644 --- 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,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(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