diff --git a/web/src/features/wallet/components/recharge-form-card.tsx b/web/src/features/wallet/components/recharge-form-card.tsx
index 43b36303..95f3663a 100644
--- a/web/src/features/wallet/components/recharge-form-card.tsx
+++ b/web/src/features/wallet/components/recharge-form-card.tsx
@@ -116,7 +116,10 @@ export function RechargeFormCard({
const [localAmount, setLocalAmount] = useState(topupAmount.toString())
useEffect(() => {
- setLocalAmount(topupAmount.toString())
+ // Empty string must survive, otherwise the field can never be cleared
+ setLocalAmount((prev) =>
+ prev === '' && topupAmount === 0 ? prev : topupAmount.toString()
+ )
}, [topupAmount])
const handleAmountChange = (value: string) => {
@@ -317,7 +320,10 @@ export function RechargeFormCard({
{hasStandardPaymentMethods ? (
{topupInfo?.pay_methods?.map((method) => {
- const minTopup = method.min_topup || 0
+ const minTopup = Math.max(
+ method.min_topup || 0,
+ getMinTopupAmount(topupInfo)
+ )
const disabled = minTopup > topupAmount
const disabledReason = disabled
? t('Minimum topup amount: {{amount}}', {
diff --git a/web/src/features/wallet/index.tsx b/web/src/features/wallet/index.tsx
index 2a9e0ccc..5a9cb9e0 100644
--- a/web/src/features/wallet/index.tsx
+++ b/web/src/features/wallet/index.tsx
@@ -16,7 +16,7 @@ along with this program. If not, see .
For commercial licensing, please contact support@quantumnous.com
*/
-import { useState, useEffect, useCallback, useMemo } from 'react'
+import { useState, useEffect, useCallback, useMemo, useRef } from 'react'
import { useTranslation } from 'react-i18next'
import { SectionPageLayout } from '@/components/layout'
@@ -137,8 +137,10 @@ export function Wallet(props: WalletProps) {
}, [props.initialShowHistory])
// Initialize topup amount when topup info is loaded
+ const topupAmountInitializedRef = useRef(false)
useEffect(() => {
- if (topupInfo && topupAmount === 0) {
+ if (topupInfo && !topupAmountInitializedRef.current) {
+ topupAmountInitializedRef.current = true
const minTopup = getMinTopupAmount(topupInfo)
setTopupAmount(minTopup)
@@ -146,7 +148,7 @@ export function Wallet(props: WalletProps) {
const defaultPaymentType = getDefaultPaymentType(topupInfo)
calculatePaymentAmount(minTopup, defaultPaymentType)
}
- }, [topupInfo, topupAmount, calculatePaymentAmount])
+ }, [topupInfo, calculatePaymentAmount])
// Get current payment type (selected or default)
const getCurrentPaymentType = useCallback(() => {