diff --git a/src/components/GmxAccountModal/InsufficientWntBanner.tsx b/src/components/GmxAccountModal/InsufficientWntBanner.tsx index 36fd3862c4..c49a420d0a 100644 --- a/src/components/GmxAccountModal/InsufficientWntBanner.tsx +++ b/src/components/GmxAccountModal/InsufficientWntBanner.tsx @@ -4,7 +4,7 @@ import { zeroAddress } from "viem"; import { useGmxAccountDepositViewTokenAddress, useGmxAccountModalOpen } from "context/GmxAccountContext/hooks"; import { useChainId } from "lib/chains"; -import { formatAmount, formatUsd } from "lib/numbers"; +import { formatBalanceAmount, formatUsd } from "lib/numbers"; import { getWrappedToken } from "sdk/configs/tokens"; import { AlertInfoCard } from "components/AlertInfo/AlertInfoCard"; @@ -63,7 +63,7 @@ export function InsufficientWntBanner({ let secondLine: React.ReactNode | undefined; if (neededAmount !== undefined && neededAmountUsd !== undefined) { - const formattedAmount = formatAmount(neededAmount, wrappedNativeTokenDecimals); + const formattedAmount = formatBalanceAmount(neededAmount, wrappedNativeTokenDecimals); const formattedUsd = formatUsd(neededAmountUsd); firstLine = ( diff --git a/src/components/GmxAccountModal/WithdrawalView.tsx b/src/components/GmxAccountModal/WithdrawalView.tsx index e971b9830b..e77a40fe0e 100644 --- a/src/components/GmxAccountModal/WithdrawalView.tsx +++ b/src/components/GmxAccountModal/WithdrawalView.tsx @@ -174,6 +174,7 @@ export const WithdrawalView = () => { const globalExpressParams = useSelector(selectExpressGlobalParams); const relayerFeeToken = getByKey(tokensData, globalExpressParams?.relayerFeeTokenAddress); const { gasTokenBuffer, gasTokenBufferWarningThreshold } = useUsdGasTokenBuffer(); + const gasPaymentToken = useSelector(selectGasPaymentToken); const { provider } = useJsonRpcProvider(chainId); @@ -421,41 +422,86 @@ export const WithdrawalView = () => { }, [errors, tokensData]); const relayFeeAmount = expressTxnParamsAsyncResult?.data?.gasPaymentParams.relayerFeeAmount; + const gasPaymentTokenAmount = expressTxnParamsAsyncResult?.data?.gasPaymentParams.gasPaymentTokenAmount; const gasPaymentParams = expressTxnParamsAsyncResult?.data?.gasPaymentParams; - const { networkFeeUsd, networkFee } = useMemo(() => { - if (relayFeeAmount === undefined || relayerFeeToken === undefined) { - return { networkFeeUsd: undefined, networkFee: undefined }; + const { networkFeeUsd, wntFee, wntFeeUsd, networkFeeInGasPaymentToken } = useMemo(() => { + if ( + gasPaymentTokenAmount === undefined || + gasPaymentToken === undefined || + relayFeeAmount === undefined || + relayerFeeToken === undefined + ) { + return { + networkFeeUsd: undefined, + wntFee: undefined, + wntFeeUsd: undefined, + networkFeeInGasPaymentToken: undefined, + }; } const relayFeeUsd = convertToUsd(relayFeeAmount, relayerFeeToken.decimals, getMidPrice(relayerFeeToken.prices)); - if (relayFeeUsd === undefined || bridgeNetworkFeeUsd === undefined || bridgeNetworkFee === undefined) { - return { networkFeeUsd: undefined, networkFee: undefined }; + const gasPaymentTokenUsd = convertToUsd( + gasPaymentTokenAmount, + gasPaymentToken?.decimals, + getMidPrice(gasPaymentToken.prices) + ); + + if ( + relayFeeUsd === undefined || + gasPaymentTokenUsd === undefined || + bridgeNetworkFeeUsd === undefined || + bridgeNetworkFee === undefined + ) { + return { + networkFeeUsd: undefined, + wntFee: undefined, + wntFeeUsd: undefined, + networkFeeInGasPaymentToken: undefined, + }; } + const bridgeNetworkFeeInGasPaymentToken = convertToTokenAmount( + bridgeNetworkFeeUsd, + gasPaymentToken.decimals, + getMidPrice(gasPaymentToken.prices) + )!; + + const wntFee = bridgeNetworkFee + (gasPaymentToken.isWrapped ? relayFeeAmount : 0n); + const wntFeeUsd = bridgeNetworkFeeUsd + (gasPaymentToken.isWrapped ? relayFeeUsd : 0n); + return { - networkFeeUsd: relayFeeUsd + bridgeNetworkFeeUsd, - networkFee: - // We assume it is all in WNT - relayFeeAmount + bridgeNetworkFee, + networkFeeUsd: gasPaymentTokenUsd + bridgeNetworkFeeUsd, + wntFee, + wntFeeUsd, + networkFeeInGasPaymentToken: gasPaymentTokenAmount + bridgeNetworkFeeInGasPaymentToken, }; - }, [bridgeNetworkFee, bridgeNetworkFeeUsd, relayFeeAmount, relayerFeeToken]); + }, [bridgeNetworkFee, bridgeNetworkFeeUsd, gasPaymentToken, gasPaymentTokenAmount, relayFeeAmount, relayerFeeToken]); const [showWntWarning, setShowWntWarning] = useState(false); const [lastValidNetworkFees, setLastValidNetworkFees] = useState({ - networkFee: networkFee, - networkFeeUsd: networkFeeUsd, + wntFee, + networkFeeUsd, + networkFeeInGasPaymentToken, + wntFeeUsd, }); useEffect(() => { - if (networkFee !== undefined && networkFeeUsd !== undefined) { + if ( + wntFee !== undefined && + networkFeeUsd !== undefined && + wntFeeUsd !== undefined && + networkFeeInGasPaymentToken !== undefined + ) { setLastValidNetworkFees({ - networkFee, + wntFee, networkFeeUsd, + networkFeeInGasPaymentToken, + wntFeeUsd, }); } - }, [networkFee, networkFeeUsd]); + }, [wntFee, networkFeeUsd, networkFeeInGasPaymentToken, wntFeeUsd]); useEffect(() => { if (wrappedNativeTokenAddress === zeroAddress) { @@ -472,20 +518,21 @@ export const WithdrawalView = () => { return; } - const someNetworkFee = networkFee ?? lastValidNetworkFees.networkFee; - if (someNetworkFee === undefined) { + const someWntFee = wntFee ?? lastValidNetworkFees.wntFee; + + if (someWntFee === undefined) { return; } const value = (unwrappedSelectedTokenAddress === zeroAddress ? inputAmount : 0n) ?? 0n; - setShowWntWarning(wrappedNativeToken.gmxAccountBalance - value < someNetworkFee); + setShowWntWarning(wrappedNativeToken.gmxAccountBalance - value < someWntFee); }, [ wrappedNativeToken, - networkFee, + wntFee, unwrappedSelectedTokenAddress, inputAmount, - lastValidNetworkFees.networkFee, + lastValidNetworkFees.wntFee, wrappedNativeTokenAddress, ]); @@ -651,8 +698,6 @@ export const WithdrawalView = () => { } }; - const gasPaymentToken = useSelector(selectGasPaymentToken); - const handleMaxButtonClick = useCallback(async () => { if ( selectedToken === undefined || @@ -683,7 +728,7 @@ export const WithdrawalView = () => { } } - const nativeFee = bridgeNetworkFee ?? baseNativeFee; + const nativeFee = wntFee ?? lastValidNetworkFees.wntFee ?? bridgeNetworkFee ?? baseNativeFee; if (unwrappedSelectedTokenAddress === zeroAddress && nativeFee !== undefined) { amount = amount - (nativeFee * 11n) / 10n; @@ -701,10 +746,12 @@ export const WithdrawalView = () => { gasPaymentToken?.decimals, gasPaymentToken?.prices, gasTokenBuffer, + lastValidNetworkFees.wntFee, selectedToken, setInputValue, unwrappedSelectedTokenAddress, withdrawalViewChain, + wntFee, ]); const shouldShowMinRecommendedAmount = useMemo(() => { @@ -1103,8 +1150,8 @@ export const WithdrawalView = () => { {showWntWarning && !(errors?.isOutOfTokenError?.tokenAddress === wrappedNativeTokenAddress) && ( )} @@ -1130,13 +1177,13 @@ export const WithdrawalView = () => { Network Fee} value={ - networkFeeUsd !== undefined && relayerFeeToken ? ( + networkFeeUsd !== undefined && gasPaymentToken ? ( ) : ( "..."