+ showUSD: boolean;
+ exchangeRate: number;
+}) => {
+ const useUsd = showUSD && exchangeRate > 0;
+ const formatAmt = (v: number) => {
+ const s = formatCurrency({ amount: v, showUSD: useUsd, exchangeRate });
+ return useUsd ? `${s} USD` : `${s} RSC`;
+ };
+
+ return (
+
+
+ Your contribution:
+ {formatAmt(contributionAmount)}
+
-
-
-
-
Platform fees (9%)
-
-
-
+
+
+
+
Platform fees (9%)
+
+
+
+
+
+ {formatAmt(platformFee)}
-
+ {platformFee.toLocaleString()} RSC
-
-
+
-
-
Total amount:
-
{totalAmount.toLocaleString()} RSC
+
+ Total amount:
+ {formatAmt(totalAmount)}
+
-
-);
+ );
+};
const ModalHeader = ({
title,
@@ -140,68 +157,101 @@ export function ContributeToFundraiseModal({
fundraise,
}: ContributeToFundraiseModalProps) {
const { user } = useUser();
- const [inputAmount, setInputAmount] = useState(100);
+ const { showUSD } = useCurrencyPreference();
+ const { exchangeRate } = useExchangeRate();
+ const [inputAmountRsc, setInputAmountRsc] = useState(100);
const [isContributing, setIsContributing] = useState(false);
const [error, setError] = useState
(null);
const [isSuccess, setIsSuccess] = useState(false);
const [amountError, setAmountError] = useState(undefined);
- // Calculate total available balance including locked balance for fundraise contributions
const userBalance = user?.balance || 0;
const lockedBalance = user?.lockedBalance || 0;
const totalAvailableBalance = userBalance + lockedBalance;
- // Utility functions
+ const useUsd = showUSD && exchangeRate > 0;
+
const handleAmountChange = (e: React.ChangeEvent) => {
const rawValue = e.target.value.replace(/[^0-9.]/g, '');
const numValue = parseFloat(rawValue);
- if (!isNaN(numValue)) {
- setInputAmount(numValue);
+ if (Number.isNaN(numValue)) {
+ setInputAmountRsc(0);
+ setAmountError('Please enter a valid amount');
+ return;
+ }
+
+ // Convert from preferred currency to RSC
+ const rsc = useUsd ? numValue / exchangeRate : numValue;
+ setInputAmountRsc(rsc);
- // Validate minimum amount
- if (numValue < 10) {
- setAmountError('Minimum contribution amount is 10 RSC');
- } else {
- setAmountError(undefined);
- }
+ // Validate minimum amount (10 RSC)
+ if (rsc < 10) {
+ const minUsd = 10 * exchangeRate;
+ setAmountError(
+ useUsd
+ ? `Minimum contribution amount is $${minUsd.toFixed(2)} USD`
+ : 'Minimum contribution amount is 10 RSC'
+ );
} else {
- setInputAmount(0);
- setAmountError('Please enter a valid amount');
+ setAmountError(undefined);
}
};
+ // Keep min-amount validation message in sync with currency preference/exchange rate
+ useEffect(() => {
+ if (inputAmountRsc > 0 && inputAmountRsc < 10) {
+ const minUsd = 10 * exchangeRate;
+ setAmountError(
+ useUsd
+ ? `Minimum contribution amount is $${minUsd.toFixed(2)} USD`
+ : 'Minimum contribution amount is 10 RSC'
+ );
+ }
+ }, [useUsd, exchangeRate, inputAmountRsc]);
+
const getFormattedInputValue = () => {
- if (inputAmount === 0) return '';
- return inputAmount.toLocaleString();
+ if (inputAmountRsc === 0) return '';
+ const displayValueNum = useUsd ? inputAmountRsc * exchangeRate : inputAmountRsc;
+ return displayValueNum.toLocaleString(undefined, { maximumFractionDigits: 2 });
};
+ let secondaryText: string | undefined;
+ if (exchangeRate > 0) {
+ const otherFormatted = formatCurrency({
+ amount: inputAmountRsc,
+ showUSD: !useUsd,
+ exchangeRate,
+ });
+ const secondaryUnit = useUsd ? 'RSC' : 'USD';
+ secondaryText = `≈ ${otherFormatted} ${secondaryUnit}`;
+ }
+
const handleContribute = async () => {
try {
- // Validate minimum amount before proceeding
- if (inputAmount < 10) {
- setError('Minimum contribution amount is 10 RSC');
+ if (inputAmountRsc < 10) {
+ const minUsd = 10 * exchangeRate;
+ setError(
+ useUsd
+ ? `Minimum contribution amount is $${minUsd.toFixed(2)} USD`
+ : 'Minimum contribution amount is 10 RSC'
+ );
return;
}
setIsContributing(true);
setError(null);
- // Pass the contribution amount without the platform fee
- // The API expects the net contribution amount
- await FundraiseService.contributeToFundraise(fundraise.id, inputAmount);
+ await FundraiseService.contributeToFundraise(fundraise.id, inputAmountRsc);
toast.success('Your contribution has been successfully added to the fundraise.');
- // Set success flag
setIsSuccess(true);
- // Call onContributeSuccess if provided
if (onContributeSuccess) {
onContributeSuccess();
}
- // Close the modal
onClose();
} catch (error) {
console.error('Failed to contribute to fundraise:', error);
@@ -211,8 +261,8 @@ export function ContributeToFundraiseModal({
}
};
- const platformFee = Math.round(inputAmount * 0.09 * 100) / 100;
- const totalAmount = inputAmount + platformFee;
+ const platformFee = Math.round(inputAmountRsc * 0.09 * 100) / 100;
+ const totalAmount = inputAmountRsc + platformFee;
const insufficientBalance = totalAvailableBalance < totalAmount;
return (
@@ -266,6 +316,8 @@ export function ContributeToFundraiseModal({
value={getFormattedInputValue()}
onChange={handleAmountChange}
error={amountError}
+ currencyLabel={useUsd ? 'USD' : 'RSC'}
+ helperText={secondaryText}
/>
@@ -275,9 +327,11 @@ export function ContributeToFundraiseModal({
Fees Breakdown