- {address}
+
+ )}
+
+ {/* Network Selector */}
+
+
+ {/* Amount Input */}
+
+
+ Amount to Withdraw
+
+
+
+ {isBelowMinimum && (
+
+ Minimum withdrawal amount is {MIN_WITHDRAWAL_AMOUNT} RSC.
+
+ )}
+ {hasInsufficientBalance && (
+
+ Withdrawal amount exceeds your available balance.
+
+ )}
+
+
+ {/* Fee Display */}
+
+ {feeError ? (
+
+
+ Unable to fetch fee: {feeError}
+
+ ) : (
+
+
+
+ {isFeeLoading ? (
+
+ ) : (
+
+ )}
+
+ A network fee of{' '}
+ {isFeeLoading ? (
+
+ ) : (
+ {fee}
+ )}{' '}
+ RSC will be deducted from your withdrawal amount.
+
- {/* Balance Display */}
-
-
-
Current Balance:
-
-
+ {withdrawAmount > 0 && (fee || isFeeLoading) && (
+
+
+
You will receive:
+
-
- {formatRSC({ amount: availableBalance })}
-
- RSC
-
-
-
-
-
-
-
After Withdrawal:
-
-
-
- 0 ? 'text-red-600' : 'text-gray-900'
- )}
- >
- {withdrawAmount > 0
- ? formatRSC({ amount: calculateNewBalance() })
- : formatRSC({ amount: availableBalance })}
-
+ {isFeeLoading ? (
+
+ ) : (
+
+ {formatRSC({ amount: amountUserWillReceive })}
+
+ )}
RSC
+ {!isFeeLoading && amountUserWillReceive <= 0 && withdrawAmount > 0 && fee && (
+
+ Withdrawal amount must be greater than the network fee.
+
+ )}
-
-
- {/* Action Button */}
- {txStatus.state === 'success' ? (
-
- View Transaction
-
-
- ) : (
+ )}
+
+ )}
+
+
+ {/* Withdrawal Address */}
+
+
Withdrawal Address
+
+ {/* Address Mode Toggle */}
+
{
+ if (!isInputDisabled()) {
+ setAddressMode(checked ? 'connected' : 'custom');
+ }
+ }}
+ disabled={isInputDisabled()}
+ />
+
+ {/* Address Input */}
+ {addressMode === 'connected' ? (
+
- {isFeeLoading
- ? 'Loading fee...'
- : txStatus.state === 'pending'
- ? 'Processing...'
- : 'Withdraw RSC'}
+ {isAddressCopied ? (
+
+ ) : (
+
+ )}
+ }
+ />
+ ) : (
+
+
+ {isAddressCopied ? (
+
+ ) : (
+
+ )}
+
+ )
+ }
+ />
+ {customAddress && !isCustomAddressValid && (
+
+ Please enter a valid Ethereum address (0x followed by 40 hex characters).
+
)}
+
- {txStatus.state === 'pending' && (
-
-
- Withdrawal in progress...
-
- )}
-
- {txStatus.state === 'success' && (
-
-
- Withdrawal successful!
-
- )}
-
- {txStatus.state === 'error' && (
-
- )}
-
+ Ensure the destination wallet supports {NETWORK_CONFIG[selectedNetwork].name}
-
-
-
-
-
-
+
+
+
+ {/* Balance Display */}
+
0 ? calculateNewBalance() : availableBalance}
+ futureBalanceLabel="After Withdrawal"
+ futureBalanceColor={withdrawAmount > 0 ? 'red' : 'gray'}
+ />
+
+ )}
+
+
);
}
diff --git a/components/modals/ResearchCoin/WithdrawalSuccessView.tsx b/components/modals/ResearchCoin/WithdrawalSuccessView.tsx
new file mode 100644
index 000000000..63a6e876e
--- /dev/null
+++ b/components/modals/ResearchCoin/WithdrawalSuccessView.tsx
@@ -0,0 +1,33 @@
+import { NetworkConfig } from '@/constants/tokens';
+import { TransactionSuccessView } from './shared/TransactionSuccessView';
+
+interface WithdrawalSuccessViewProps {
+ withdrawAmount: number;
+ fee: number;
+ amountReceived: number;
+ networkConfig: NetworkConfig;
+ address: string;
+}
+
+export function WithdrawalSuccessView({
+ withdrawAmount,
+ fee,
+ amountReceived,
+ networkConfig,
+ address,
+}: WithdrawalSuccessViewProps) {
+ return (
+
+ );
+}
diff --git a/components/modals/ResearchCoin/shared/BalanceDisplay.tsx b/components/modals/ResearchCoin/shared/BalanceDisplay.tsx
new file mode 100644
index 000000000..72c558d84
--- /dev/null
+++ b/components/modals/ResearchCoin/shared/BalanceDisplay.tsx
@@ -0,0 +1,61 @@
+import { ResearchCoinIcon } from '@/components/ui/icons/ResearchCoinIcon';
+import { formatRSC } from '@/utils/number';
+import { cn } from '@/utils/styles';
+
+interface BalanceDisplayProps {
+ currentBalance: number;
+ futureBalance: number;
+ futureBalanceLabel: string;
+ futureBalanceColor?: 'green' | 'red' | 'gray';
+ showFutureBalance?: boolean;
+}
+
+export function BalanceDisplay({
+ currentBalance,
+ futureBalance,
+ futureBalanceLabel,
+ futureBalanceColor = 'gray',
+ showFutureBalance = true,
+}: BalanceDisplayProps) {
+ return (
+
+
+
Current Balance:
+
+
+
+
+ {formatRSC({ amount: currentBalance })}
+
+ RSC
+
+
+
+
+ {showFutureBalance && (
+ <>
+
+
+
{futureBalanceLabel}:
+
+
+
+
+ {formatRSC({ amount: futureBalance })}
+
+ RSC
+
+
+
+
+ )}
+
+ );
+}
diff --git a/components/modals/ResearchCoin/shared/NetworkSelectorSection.tsx b/components/modals/ResearchCoin/shared/NetworkSelectorSection.tsx
new file mode 100644
index 000000000..df5a1d255
--- /dev/null
+++ b/components/modals/ResearchCoin/shared/NetworkSelectorSection.tsx
@@ -0,0 +1,50 @@
+import Image from 'next/image';
+import { NetworkSelector } from '@/components/ui/NetworkSelector';
+import { NETWORK_CONFIG, NetworkType } from '@/constants/tokens';
+
+interface NetworkSelectorSectionProps {
+ selectedNetwork: NetworkType;
+ onNetworkChange: (network: NetworkType) => void;
+ disabled?: boolean;
+ showDescription?: boolean;
+ customBadges?: Partial
>;
+}
+
+export function NetworkSelectorSection({
+ selectedNetwork,
+ onNetworkChange,
+ disabled = false,
+ showDescription = true,
+ customBadges,
+}: NetworkSelectorSectionProps) {
+ return (
+
+
+
Network
+
+ {(Object.keys(NETWORK_CONFIG) as NetworkType[]).map((network) => {
+ const config = NETWORK_CONFIG[network];
+ return (
+
+ );
+ })}
+
+
+
+
+
+
+
+
+
{title}
+
{subtitle}
+
+
+
+
+
{amountLabel}
+
+
+
+ {formatRSC({ amount })}
+
+ RSC
+
+
+
+ {fee !== undefined && (
+ <>
+
+
Network Fee
+
+ -{fee}
+ RSC
+
+
+
+ {amountReceived !== undefined && (
+
+
+
You Received
+
+
+
+ {formatRSC({ amount: amountReceived })}
+
+ RSC
+
+
+
+ )}
+
+ )}
+
+
+
+
+
Network
+
+
+ {networkConfig.name}
+
+
+
+
+
{addressLabel}
+
+ {maskedAddress}
+
+
+
+
+
+ {showProcessingTime && processingTimeMessage && (
+
+
+
+
+
Processing Time
+
{processingTimeMessage}
+
+
+
+ )}
+
+
+
+
+ {selectedNetwork.name}
+ {showBadges && getBadge(value) && (
+
+ {getBadge(value)}
+
+ )}
+
+ {showDescription && showBadges && selectedNetwork.description && (
+
{selectedNetwork.description}
+ )}
+
+
+
+
+ {config.name}
+ {showBadges && getBadge(network) && (
+
+ {getBadge(network)}
+
+ )}
+
+ {showDescription && showBadges && config.description && (
+
+ {config.description}
+
+ )}
+