diff --git a/components/modals/ResearchCoin/WithdrawModal.tsx b/components/modals/ResearchCoin/WithdrawModal.tsx index baf945040..2a45278dd 100644 --- a/components/modals/ResearchCoin/WithdrawModal.tsx +++ b/components/modals/ResearchCoin/WithdrawModal.tsx @@ -4,13 +4,15 @@ import { useCallback, useMemo, useState, useEffect, useRef } from 'react'; import { Check, AlertCircle, - AlertTriangle, + ShieldCheck, Loader2, Copy, ArrowLeft, + ArrowRight, ChevronDown, } from 'lucide-react'; import Image from 'next/image'; +import Link from 'next/link'; import { BaseModal } from '@/components/ui/BaseModal'; import { BaseMenu, BaseMenuItem } from '@/components/ui/form/BaseMenu'; import { formatRSC, getMaxDecimalPlaces } from '@/utils/number'; @@ -236,6 +238,11 @@ export function WithdrawModal({ }, []); const footer = useMemo(() => { + // Don't show footer if MFA is not enabled + if (!isMfaEnabled) { + return null; + } + const txHash = txStatus.state === 'success' ? txStatus.txHash : undefined; if (txHash) { @@ -296,6 +303,7 @@ export function WithdrawModal({ handleWithdraw, isFeeLoading, showMfaConfirmation, + isMfaEnabled, ]); return ( @@ -404,7 +412,7 @@ export function WithdrawModal({ } + icon={} > Verify your wallet supports {NETWORK_CONFIG[selectedNetwork].name}. @@ -445,118 +453,146 @@ export function WithdrawModal({ )} {mfaStatusError && ( - - Could not verify MFA status. If you have MFA enabled, the withdrawal may fail. - + Could not verify MFA status. Please try again later. )} - {/* Destination Address ("To") + inline network selector */} -
-
- To - + {!isMfaStatusLoading && !mfaStatusError && !isMfaEnabled && ( +
+
+ +
+
+

+ Two-factor authentication required +

+

+ To protect your funds, withdrawals require two-factor authentication. Please + enable it in your account settings to continue. +

+
+ + Enable 2FA + +
- + {/* Destination Address ("To") + inline network selector */} +
+
+ To + +
+ + {isAddressCopied ? ( + + ) : ( + + )} + + ) + } + /> + {destinationAddress && !isAddressValid ? ( +

+ Please enter a valid Ethereum address (0x followed by 40 hex characters). +

+ ) : null} +
+ + {/* Amount Input */} +
+ Amount +
+ +
+ RSC +
+
+
+ + Balance:{' '} + + {formatRSC({ amount: availableBalance })} RSC + + {fee != null && !isFeeLoading && ( + (− {fee} RSC fee) + )} + - ) - } - /> - {destinationAddress && !isAddressValid ? ( -

- Please enter a valid Ethereum address (0x followed by 40 hex characters). -

- ) : null} -
- - {/* Amount Input */} -
- Amount -
- + {feeError && ( +

+ + Unable to fetch fee: {feeError} +

)} - /> -
- RSC -
-
-
- - Balance:{' '} - - {formatRSC({ amount: availableBalance })} RSC - - {fee != null && !isFeeLoading && ( - (− {fee} RSC fee) + {isBelowMinimum && ( +

+ Minimum withdrawal amount is {MIN_WITHDRAWAL_AMOUNT} RSC. +

)} -
- -
- {feeError && ( -

- - Unable to fetch fee: {feeError} -

- )} - {isBelowMinimum && ( -

- Minimum withdrawal amount is {MIN_WITHDRAWAL_AMOUNT} RSC. -

- )} - {hasInsufficientBalance && ( -

- Withdrawal amount exceeds your available balance. -

- )} - {!isFeeLoading && amountUserWillReceive <= 0 && withdrawAmount > 0 && fee && ( -

- Withdrawal amount must be greater than the network fee. -

- )} -
+ {hasInsufficientBalance && ( +

+ Withdrawal amount exceeds your available balance. +

+ )} + {!isFeeLoading && amountUserWillReceive <= 0 && withdrawAmount > 0 && fee && ( +

+ Withdrawal amount must be greater than the network fee. +

+ )} +
+ + )} )}