From cb4f471417e7f1e3f2bcf082a76299d17363c1a4 Mon Sep 17 00:00:00 2001
From: PEDZEO <vitali.gavrikov@yandex.ru>
Date: Tue, 20 Jan 2026 17:30:44 +0300
Subject: [PATCH] Refactor TopUpModal for improved code clarity and structure

- Consolidated content rendering into a single JSX variable for better readability.
- Simplified modal rendering logic by removing nested components and using a single conditional return.
- Enhanced mobile and desktop modal handling for clearer separation of concerns.
---
 src/components/TopUpModal.tsx | 22 +++++++++-------------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/src/components/TopUpModal.tsx b/src/components/TopUpModal.tsx
index a52ddd8..4bf5d16 100644
--- a/src/components/TopUpModal.tsx
+++ b/src/components/TopUpModal.tsx
@@ -258,7 +258,8 @@ export default function TopUpModal({ method, onClose, initialAmountRubles }: Top
   // Calculate display amount for preview
   const displayAmount = amount && parseFloat(amount) > 0 ? parseFloat(amount) : 0
 
-  const renderContent = () => (
+  // Content JSX - shared between mobile and desktop
+  const contentJSX = (
     <div className="space-y-5">
       {/* Header icon and method */}
       <div className="flex items-center gap-4 pb-1">
@@ -403,8 +404,8 @@ export default function TopUpModal({ method, onClose, initialAmountRubles }: Top
     </div>
   )
 
-  // Mobile bottom sheet
-  const MobileModal = () => (
+  // Render modal based on screen size - NO nested components!
+  const modalContent = isMobileScreen ? (
     <>
       {/* Backdrop */}
       <div
@@ -442,14 +443,11 @@ export default function TopUpModal({ method, onClose, initialAmountRubles }: Top
 
         {/* Content */}
         <div className="px-5 py-5 overflow-y-auto">
-          {renderContent()}
+          {contentJSX}
         </div>
       </div>
     </>
-  )
-
-  // Desktop modal - positioned higher
-  const DesktopModal = () => (
+  ) : (
     <div
       className="fixed inset-0 bg-black/60 z-[60] flex items-start justify-center p-4 pt-[10vh]"
       onClick={handleClose}
@@ -477,16 +475,14 @@ export default function TopUpModal({ method, onClose, initialAmountRubles }: Top
 
         {/* Content */}
         <div className="p-6">
-          {renderContent()}
+          {contentJSX}
         </div>
       </div>
     </div>
   )
 
-  const content = isMobileScreen ? <MobileModal /> : <DesktopModal />
-
   if (typeof document !== 'undefined') {
-    return createPortal(content, document.body)
+    return createPortal(modalContent, document.body)
   }
-  return content
+  return modalContent
 }