etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-28 09:33:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #29 from BEDOLAGA-DEV/dev

Browse Source 
Add files via upload
This commit is contained in:
Egor
2026-01-19 01:04:59 +03:00
committed by GitHub
parent 044ecb5aa3 3e8f547b92
commit 250686fdaa
2 changed files with 161 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/components/InsufficientBalancePrompt.tsx
View File

@@ -146,35 +146,27 @@ function PaymentMethodModal({ paymentMethods, onSelect, onClose }: PaymentMethod
return (
<div className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-end sm:items-center justify-center">
{/* Backdrop click to close */}
<div className="absolute inset-0" onClick={onClose} />
{/* Modal content - bottom sheet on mobile, centered on desktop */}
<div className="relative w-full sm:max-w-lg sm:mx-4 bg-dark-900 sm:rounded-2xl rounded-t-2xl border border-dark-700/50 shadow-2xl animate-slide-up max-h-[85vh] flex flex-col">
{/* Header */}
<div className="flex-shrink-0 flex justify-between items-center p-4 sm:p-5 border-b border-dark-800">
<div>
<h2 className="text-lg font-semibold text-dark-100">{t('balance.selectPaymentMethod')}</h2>
<p className="text-sm text-dark-400 mt-0.5">{t('balance.topUpBalance')}</p>
</div>
<button
onClick={onClose}
className="w-10 h-10 rounded-xl bg-dark-800 hover:bg-dark-700 flex items-center justify-center transition-colors"
>
<svg className="w-5 h-5 text-dark-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<div className="relative w-full sm:max-w-lg sm:mx-4 bg-dark-900 sm:rounded-2xl rounded-t-2xl border border-dark-700/50 shadow-2xl animate-slide-up max-h-[80vh] flex flex-col">
{/* Compact Header */}
<div className="flex-shrink-0 flex justify-between items-center px-4 py-3 border-b border-dark-800">
<h2 className="text-base font-semibold text-dark-100">{t('balance.selectPaymentMethod')}</h2>
<button onClick={onClose} className="w-8 h-8 rounded-lg bg-dark-800 hover:bg-dark-700 flex items-center justify-center">
<svg className="w-4 h-4 text-dark-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
{/* Scrollable content */}
<div className="flex-1 overflow-y-auto overscroll-contain p-4 sm:p-5">
<div className="flex-1 overflow-y-auto overscroll-contain p-3">
{!paymentMethods ? (
<div className="flex items-center justify-center py-12">
<div className="w-8 h-8 border-2 border-accent-500 border-t-transparent rounded-full animate-spin" />
<div className="flex items-center justify-center py-8">
<div className="w-6 h-6 border-2 border-accent-500 border-t-transparent rounded-full animate-spin" />
</div>
) : paymentMethods.length === 0 ? (
<div className="text-center py-8 text-dark-400">
<div className="text-center py-6 text-dark-400 text-sm">
{t('balance.noPaymentMethods')}
</div>
) : (
@@ -182,37 +174,30 @@ function PaymentMethodModal({ paymentMethods, onSelect, onClose }: PaymentMethod
{paymentMethods.map((method) => {
const methodKey = method.id.toLowerCase().replace(/-/g, '_')
const translatedName = t(`balance.paymentMethods.${methodKey}.name`, { defaultValue: '' })
const translatedDesc = t(`balance.paymentMethods.${methodKey}.description`, { defaultValue: '' })
return (
<button
key={method.id}
disabled={!method.is_available}
onClick={() => method.is_available && onSelect(method)}
className={`w-full p-4 rounded-xl border text-left transition-all flex items-center gap-4 ${
className={`w-full p-3 rounded-xl border text-left transition-all flex items-center gap-3 ${
method.is_available
? 'border-dark-700/50 hover:border-accent-500/50 bg-dark-800/30 cursor-pointer hover:bg-dark-800/50 active:bg-dark-700/50'
: 'border-dark-800/30 bg-dark-900/30 opacity-50 cursor-not-allowed'
? 'border-dark-700/50 bg-dark-800/30 active:bg-dark-700/50'
: 'border-dark-800/30 bg-dark-900/30 opacity-50'
}`}
>
{/* Icon */}
<div className="w-12 h-12 rounded-xl bg-dark-800 flex items-center justify-center flex-shrink-0">
<svg className="w-6 h-6 text-accent-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
<div className="w-10 h-10 rounded-lg bg-dark-800 flex items-center justify-center flex-shrink-0">
<svg className="w-5 h-5 text-accent-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
<path strokeLinecap="round" strokeLinejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z" />
</svg>
</div>
{/* Content */}
<div className="flex-1 min-w-0">
<div className="font-semibold text-dark-100">{translatedName || method.name}</div>
{(translatedDesc || method.description) && (
<div className="text-sm text-dark-500 mt-0.5 truncate">{translatedDesc || method.description}</div>
)}
<div className="text-xs text-dark-600 mt-1">
<div className="font-medium text-dark-100 text-sm">{translatedName || method.name}</div>
<div className="text-xs text-dark-500">
{formatAmount(method.min_amount_kopeks / 100, 0)} – {formatAmount(method.max_amount_kopeks / 100, 0)} {currencySymbol}
</div>
</div>
{/* Arrow */}
<svg className="w-5 h-5 text-dark-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<svg className="w-4 h-4 text-dark-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</button>
@@ -222,13 +207,9 @@ function PaymentMethodModal({ paymentMethods, onSelect, onClose }: PaymentMethod
)}
</div>
{/* Footer */}
<div className="flex-shrink-0 px-4 sm:px-5 pt-4 sm:pt-5 safe-area-inset-bottom border-t border-dark-800 bg-dark-900">
<button
type="button"
onClick={onClose}
className="btn-secondary w-full h-12 text-base"
>
{/* Compact Footer */}
<div className="flex-shrink-0 p-3 pt-2 border-t border-dark-800 bg-dark-900 safe-area-inset-bottom">
<button type="button" onClick={onClose} className="w-full py-2 text-sm text-dark-400 hover:text-dark-200">
{t('common.cancel')}
</button>
</div>

234
src/components/TopUpModal.tsx
View File

@@ -14,17 +14,14 @@ const openPaymentLink = (url: string, reservedWindow?: Window | null) => {
if (typeof window === 'undefined' || !url) return
const webApp = window.Telegram?.WebApp
// If inside Telegram Mini App, let Telegram handle t.me links
if (isTelegramPaymentLink(url) && webApp?.openTelegramLink) {
try { webApp.openTelegramLink(url); return } catch (e) { console.warn('[TopUpModal] openTelegramLink failed:', e) }
}
// Inside Telegram Mini App → open in external browser
if (webApp?.openLink) {
try { webApp.openLink(url, { try_instant_view: false }); return } catch (e) { console.warn('[TopUpModal] webApp.openLink failed:', e) }
}
// Regular browser: use reserved popup window if available
if (reservedWindow && !reservedWindow.closed) {
try { reservedWindow.location.href = url; reservedWindow.focus?.() } catch (e) { console.warn('[TopUpModal] Failed to use reserved window:', e) }
return
@@ -38,17 +35,15 @@ const openPaymentLink = (url: string, reservedWindow?: Window | null) => {
interface TopUpModalProps {
method: PaymentMethod
onClose: () => void
/** Pre-filled amount in rubles (will be converted to user's currency) */
initialAmountRubles?: number
}
export default function TopUpModal({ method, onClose, initialAmountRubles }: TopUpModalProps) {
const { t } = useTranslation()
const { formatAmount, currencySymbol, convertAmount, convertToRub, targetCurrency } = useCurrency()
const formRef = useRef<HTMLFormElement>(null)
const containerRef = useRef<HTMLDivElement>(null)
const inputRef = useRef<HTMLInputElement>(null)
// Calculate initial amount in user's currency
const getInitialAmount = (): string => {
if (!initialAmountRubles || initialAmountRubles <= 0) return ''
const converted = convertAmount(initialAmountRubles)
@@ -63,71 +58,59 @@ export default function TopUpModal({ method, onClose, initialAmountRubles }: Top
const [selectedOption, setSelectedOption] = useState<string | null>(
method.options && method.options.length > 0 ? method.options[0].id : null
)
const [isKeyboardOpen, setIsKeyboardOpen] = useState(false)
const popupRef = useRef<Window | null>(null)
const hasOptions = method.options && method.options.length > 0
const minRubles = method.min_amount_kopeks / 100
const maxRubles = method.max_amount_kopeks / 100
const methodKey = method.id.toLowerCase().replace(/-/g, '_')
const isStarsMethod = methodKey.includes('stars')
const methodName = t(`balance.paymentMethods.${methodKey}.name`, { defaultValue: '' }) || method.name
const isTelegramMiniApp = typeof window !== 'undefined' && Boolean(window.Telegram?.WebApp?.initData)
// Handle visual viewport changes (keyboard appearance on mobile)
// Detect keyboard open/close
useEffect(() => {
const handleResize = () => {
// Scroll input into view when keyboard appears
if (document.activeElement === inputRef.current) {
setTimeout(() => {
inputRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center' })
}, 100)
}
}
const handleFocus = () => setIsKeyboardOpen(true)
const handleBlur = () => setTimeout(() => setIsKeyboardOpen(false), 100)
if (typeof window !== 'undefined' && window.visualViewport) {
window.visualViewport.addEventListener('resize', handleResize)
return () => window.visualViewport?.removeEventListener('resize', handleResize)
const input = inputRef.current
if (input) {
input.addEventListener('focus', handleFocus)
input.addEventListener('blur', handleBlur)
return () => {
input.removeEventListener('focus', handleFocus)
input.removeEventListener('blur', handleBlur)
}
}
}, [])
// Stars payment using the same approach as Wheel.tsx
// Scroll to input when keyboard opens
useEffect(() => {
if (isKeyboardOpen && containerRef.current && inputRef.current) {
setTimeout(() => {
inputRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center' })
}, 150)
}
}, [isKeyboardOpen])
const starsPaymentMutation = useMutation({
mutationFn: (amountKopeks: number) => balanceApi.createStarsInvoice(amountKopeks),
onSuccess: (data) => {
const webApp = window.Telegram?.WebApp
if (!data.invoice_url) {
setError('Сервер не вернул ссылку на оплату')
return
}
if (!webApp?.openInvoice) {
setError('Оплата Stars доступна только в Telegram Mini App')
return
}
if (!data.invoice_url) { setError('Сервер не вернул ссылку на оплату'); return }
if (!webApp?.openInvoice) { setError('Оплата Stars доступна только в Telegram Mini App'); return }
try {
webApp.openInvoice(data.invoice_url, (status) => {
if (status === 'paid') {
setError(null)
onClose()
} else if (status === 'failed') {
setError(t('wheel.starsPaymentFailed'))
} else if (status === 'cancelled') {
setError(null)
}
if (status === 'paid') { setError(null); onClose() }
else if (status === 'failed') { setError(t('wheel.starsPaymentFailed')) }
else if (status === 'cancelled') { setError(null) }
})
} catch (e) {
setError('Ошибка открытия окна оплаты: ' + String(e))
}
} catch (e) { setError('Ошибка открытия окна оплаты: ' + String(e)) }
},
onError: (error: unknown) => {
const axiosError = error as { response?: { data?: { detail?: string }, status?: number } }
const detail = axiosError?.response?.data?.detail
const status = axiosError?.response?.status
setError(`Ошибка API (${status || 'network'}): ${detail || 'Не удалось создать счёт'}`)
setError(`Ошибка API (${axiosError?.response?.status || 'network'}): ${axiosError?.response?.data?.detail || 'Не удалось создать счёт'}`)
},
})
@@ -143,14 +126,12 @@ export default function TopUpModal({ method, onClose, initialAmountRubles }: Top
mutationFn: (amountKopeks: number) => balanceApi.createTopUp(amountKopeks, method.id, selectedOption || undefined),
onSuccess: (data) => {
const redirectUrl = data.payment_url || (data as any).invoice_url
if (redirectUrl) {
openPaymentLink(redirectUrl, popupRef.current)
}
if (redirectUrl) openPaymentLink(redirectUrl, popupRef.current)
popupRef.current = null
onClose()
},
onError: (error: unknown) => {
try { if (popupRef.current && !popupRef.current.closed) popupRef.current.close() } catch (e) { console.warn('[TopUpModal] Failed to close popup:', e) }
try { if (popupRef.current && !popupRef.current.closed) popupRef.current.close() } catch {}
popupRef.current = null
const detail = (error as { response?: { data?: { detail?: string } } })?.response?.data?.detail || ''
if (detail.includes('not yet implemented')) setError(t('balance.useBot'))
@@ -158,34 +139,27 @@ export default function TopUpModal({ method, onClose, initialAmountRubles }: Top
},
})
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault()
const handleSubmit = () => {
setError(null)
// Hide keyboard on mobile
inputRef.current?.blur()
// Rate limit check: max 3 payment attempts per 30 seconds
if (!checkRateLimit(RATE_LIMIT_KEYS.PAYMENT, 3, 30000)) {
const resetTime = getRateLimitResetTime(RATE_LIMIT_KEYS.PAYMENT)
setError(t('balance.tooManyRequests', { seconds: resetTime }) || `Слишком много запросов. Подождите ${resetTime} сек.`)
setError(t('balance.tooManyRequests', { seconds: getRateLimitResetTime(RATE_LIMIT_KEYS.PAYMENT) }) || 'Подождите...')
return
}
if (hasOptions && !selectedOption) { setError(t('balance.selectPaymentOption', 'Выберите способ оплаты')); return }
if (hasOptions && !selectedOption) { setError(t('balance.selectPaymentOption', 'Выберите способ')); return }
const amountCurrency = parseFloat(amount)
if (isNaN(amountCurrency) || amountCurrency <= 0) { setError(t('balance.invalidAmount', 'Invalid amount')); return }
if (isNaN(amountCurrency) || amountCurrency <= 0) { setError(t('balance.invalidAmount', 'Введите сумму')); return }
const amountRubles = convertToRub(amountCurrency)
if (amountRubles < minRubles) { setError(t('balance.minAmountError', { amount: minRubles })); return }
if (amountRubles > maxRubles) { setError(t('balance.maxAmountError', { amount: maxRubles })); return }
const amountKopeks = Math.round(amountRubles * 100)
// Pre-open popup window to avoid browser blocking (must happen in user click context)
if (!isTelegramMiniApp) {
try { popupRef.current = window.open('', '_blank') } catch { popupRef.current = null }
}
if (isStarsMethod) {
starsPaymentMutation.mutate(amountKopeks); return
}
if (isStarsMethod) { starsPaymentMutation.mutate(amountKopeks); return }
topUpMutation.mutate(amountKopeks)
}
@@ -196,70 +170,59 @@ export default function TopUpModal({ method, onClose, initialAmountRubles }: Top
return convertAmount(rubAmount).toFixed(currencyDecimals)
}
const inputStep = currencyDecimals === 0 ? 1 : 0.01
const minInputValue = targetCurrency === 'RUB' ? minRubles : targetCurrency === 'IRR' ? Math.round(convertAmount(minRubles)) : Number(convertAmount(minRubles).toFixed(currencyDecimals))
const maxInputValue = targetCurrency === 'RUB' ? maxRubles : targetCurrency === 'IRR' ? Math.round(convertAmount(maxRubles)) : Number(convertAmount(maxRubles).toFixed(currencyDecimals))
const isPending = topUpMutation.isPending || starsPaymentMutation.isPending
return (
<div className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-end sm:items-center justify-center">
{/* Backdrop click to close */}
<div className="absolute inset-0" onClick={onClose} />
{/* Modal content - bottom sheet on mobile, centered on desktop */}
<div className="relative w-full sm:max-w-md sm:mx-4 bg-dark-900 sm:rounded-2xl rounded-t-2xl border border-dark-700/50 shadow-2xl animate-slide-up max-h-[90vh] flex flex-col">
{/* Header - sticky */}
<div className="flex-shrink-0 flex justify-between items-center p-4 sm:p-5 border-b border-dark-800">
<div>
<h2 className="text-lg font-semibold text-dark-100">{t('balance.topUp')}</h2>
<p className="text-sm text-dark-400 mt-0.5">{methodName}</p>
</div>
<button
onClick={onClose}
className="w-10 h-10 rounded-xl bg-dark-800 hover:bg-dark-700 flex items-center justify-center transition-colors"
<div
ref={containerRef}
className="relative w-full sm:max-w-md sm:mx-4 bg-dark-900 sm:rounded-2xl rounded-t-2xl border border-dark-700/50 shadow-2xl animate-slide-up max-h-[85vh] overflow-hidden flex flex-col"
>
<svg className="w-5 h-5 text-dark-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
{/* Compact Header */}
<div className="flex-shrink-0 flex justify-between items-center px-4 py-3 border-b border-dark-800">
<div className="flex items-center gap-2">
<div className="w-8 h-8 rounded-lg bg-accent-500/20 flex items-center justify-center">
<svg className="w-4 h-4 text-accent-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
</div>
<div>
<h2 className="text-base font-semibold text-dark-100">{methodName}</h2>
</div>
</div>
<button onClick={onClose} className="w-8 h-8 rounded-lg bg-dark-800 hover:bg-dark-700 flex items-center justify-center">
<svg className="w-4 h-4 text-dark-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
{/* Scrollable content */}
{/* Scrollable Content */}
<div className="flex-1 overflow-y-auto overscroll-contain">
<form ref={formRef} onSubmit={handleSubmit} className="p-4 sm:p-5 space-y-4">
{/* Payment options */}
<div className="p-4 space-y-3">
{/* Payment options - compact grid */}
{hasOptions && method.options && (
<div>
<label className="block text-sm font-medium text-dark-300 mb-2">{t('balance.paymentOption', 'Способ оплаты')}</label>
<div className="grid grid-cols-2 gap-2">
{method.options.map((option) => (
<button
key={option.id}
type="button"
onClick={() => setSelectedOption(option.id)}
className={`p-3 rounded-xl text-sm font-medium transition-all text-left ${
className={`p-2.5 rounded-xl text-sm font-medium transition-all text-left ${
selectedOption === option.id
? 'bg-accent-500 text-white ring-2 ring-accent-400'
: 'bg-dark-800 text-dark-300 hover:bg-dark-700 active:bg-dark-600'
? 'bg-accent-500 text-white'
: 'bg-dark-800 text-dark-300 active:bg-dark-700'
}`}
>
<span className="block">{option.name}</span>
{option.description && (
<span className={`block text-xs mt-0.5 ${selectedOption === option.id ? 'text-white/70' : 'text-dark-500'}`}>
{option.description}
</span>
)}
{option.name}
</button>
))}
</div>
</div>
)}
{/* Amount input */}
<div>
<label className="block text-sm font-medium text-dark-300 mb-2">
{t('balance.amount')} ({currencySymbol})
</label>
{/* Amount input with currency */}
<div className="relative">
<input
ref={inputRef}
@@ -267,26 +230,18 @@ export default function TopUpModal({ method, onClose, initialAmountRubles }: Top
inputMode="decimal"
value={amount}
onChange={(e) => setAmount(e.target.value)}
placeholder={`${formatAmount(minRubles, currencyDecimals)} - ${formatAmount(maxRubles, currencyDecimals)}`}
min={minInputValue}
max={maxInputValue}
placeholder={`${formatAmount(minRubles, 0)} – ${formatAmount(maxRubles, 0)}`}
step={inputStep}
className="input text-lg pr-14 h-14"
className="w-full h-14 px-4 pr-16 text-xl font-semibold bg-dark-800 border border-dark-700 rounded-xl text-dark-100 placeholder:text-dark-500 focus:outline-none focus:border-accent-500 focus:ring-1 focus:ring-accent-500"
autoComplete="off"
/>
<span className="absolute right-4 top-1/2 -translate-y-1/2 text-dark-500 font-medium">
<span className="absolute right-4 top-1/2 -translate-y-1/2 text-dark-400 font-medium text-lg">
{currencySymbol}
</span>
</div>
<p className="text-xs text-dark-500 mt-2">
{t('balance.minAmount')}: {formatAmount(minRubles, currencyDecimals)} — {t('balance.maxAmount')}: {formatAmount(maxRubles, currencyDecimals)} {currencySymbol}
</p>
</div>
{/* Quick amounts */}
{/* Quick amounts - compact */}
{quickAmounts.length > 0 && (
<div>
<label className="block text-sm font-medium text-dark-300 mb-2">{t('balance.quickAmount', 'Быстрый выбор')}</label>
<div className="grid grid-cols-4 gap-2">
{quickAmounts.map((a) => {
const quickValue = getQuickAmountValue(a)
@@ -299,10 +254,10 @@ export default function TopUpModal({ method, onClose, initialAmountRubles }: Top
setAmount(quickValue)
inputRef.current?.blur()
}}
className={`py-3 px-2 rounded-xl text-sm font-medium transition-all ${
className={`py-2.5 rounded-xl text-sm font-medium transition-all ${
isSelected
? 'bg-accent-500 text-white'
: 'bg-dark-800 text-dark-300 hover:bg-dark-700 active:bg-dark-600'
: 'bg-dark-800 text-dark-300 active:bg-dark-700'
}`}
>
{formatAmount(a, 0)}
@@ -310,50 +265,43 @@ export default function TopUpModal({ method, onClose, initialAmountRubles }: Top
)
})}
</div>
</div>
)}
{/* Error message */}
{/* Error */}
{error && (
<div className="bg-error-500/10 border border-error-500/30 text-error-400 p-3 rounded-xl text-sm">
<div className="bg-error-500/10 border border-error-500/30 text-error-400 px-3 py-2 rounded-xl text-sm">
{error}
</div>
)}
</form>
</div>
</div>
{/* Footer with buttons - sticky at bottom */}
<div className="flex-shrink-0 px-4 sm:px-5 pt-4 sm:pt-5 safe-area-inset-bottom border-t border-dark-800 bg-dark-900">
<div className="flex gap-3">
{/* Fixed Footer with Submit */}
<div className="flex-shrink-0 p-4 pt-3 border-t border-dark-800 bg-dark-900 safe-area-inset-bottom">
<button
type="button"
onClick={handleSubmit}
disabled={isPending || !amount}
className="btn-primary w-full h-12 text-base font-semibold"
>
{isPending ? (
<span className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
) : (
<span className="flex items-center justify-center gap-2">
{t('balance.topUp')}
{amount && parseFloat(amount) > 0 && (
<span className="opacity-80">{formatAmount(parseFloat(amount), currencyDecimals)} {currencySymbol}</span>
)}
</span>
)}
</button>
<button
type="button"
onClick={onClose}
className="btn-secondary flex-1 h-12 text-base"
className="w-full mt-2 py-2 text-sm text-dark-400 hover:text-dark-200"
>
{t('common.cancel')}
</button>
<button
type="submit"
onClick={handleSubmit}
disabled={isPending || !amount}
className="btn-primary flex-[2] h-12 text-base font-semibold"
>
{isPending ? (
<span className="flex items-center justify-center gap-2">
<span className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
</span>
) : (
<>
{t('balance.topUp')}
{amount && (
<span className="ml-1 opacity-80">
{formatAmount(parseFloat(amount) || 0, currencyDecimals)} {currencySymbol}
</span>
)}
</>
)}
</button>
</div>
</div>
</div>
</div>