- {/* Payment options */}
- {hasOptions && method.options && (
-
- {method.options.map((opt) => (
-
- ))}
-
- )}
-
- {/* Amount input */}
-
-
setAmount(e.target.value)}
- onKeyDown={(e) => {
- if (e.key === 'Enter') {
- e.preventDefault()
- handleSubmit()
- }
- }}
- placeholder={t('balance.enterAmount') || 'Введите сумму'}
- className="w-full h-14 px-5 pr-14 text-xl font-bold bg-dark-800/50 border-2 border-dark-700/50 rounded-2xl text-dark-100 placeholder:text-dark-500 placeholder:font-normal focus:outline-none focus:border-accent-500/50 focus:bg-dark-800/70 transition-all"
- autoComplete="off"
- autoCorrect="off"
- autoCapitalize="off"
- spellCheck="false"
- style={{
- fontSize: '20px', // Prevent iOS zoom on focus
- WebkitTapHighlightColor: 'transparent'
- }}
- />
-
- {currencySymbol}
-
+ {/* Header */}
+
+ {methodName}
+
+
+ {/* Content */}
+
+ {renderContent()}
-
- {/* Quick amounts */}
- {quickAmounts.length > 0 && (
-
- {quickAmounts.map((a) => {
- const val = getQuickValue(a)
- const isSelected = amount === val
- return (
-
- )
- })}
-
- )}
-
- {/* Error */}
- {error && (
-
- )}
-
- {/* Submit */}
-
)
- return
{modalContent}
+ // Desktop centered modal
+ const DesktopModal = () => (
+
+
e.stopPropagation()}
+ >
+ {/* Header */}
+
+ {methodName}
+
+
+ {/* Content */}
+
+ {renderContent()}
+
+
+
+ )
+
+ const renderContent = () => (
+ <>
+ {/* Payment options */}
+ {hasOptions && method.options && (
+
+ {method.options.map((opt) => (
+
+ ))}
+
+ )}
+
+ {/* Amount input */}
+
+ setAmount(e.target.value)}
+ onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); handleSubmit() } }}
+ placeholder={`${formatAmount(minRubles, 0)} – ${formatAmount(maxRubles, 0)}`}
+ className="w-full h-12 px-4 pr-12 text-lg 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 transition-colors"
+ style={{ fontSize: '18px' }}
+ autoComplete="off"
+ />
+
+ {currencySymbol}
+
+
+
+ {/* Quick amounts */}
+ {quickAmounts.length > 0 && (
+
+ {quickAmounts.map((a) => {
+ const val = getQuickValue(a)
+ const isSelected = amount === val
+ return (
+
+ )
+ })}
+
+ )}
+
+ {/* Error */}
+ {error && (
+
{error}
+ )}
+
+ {/* Submit */}
+
+
+ )
+
+ const content = isMobileScreen ?
:
+
+ if (typeof document !== 'undefined') {
+ return createPortal(content, document.body)
+ }
+ return content
}