From 803a5f858fcea2c00816d4d8e1956df4d01437a5 Mon Sep 17 00:00:00 2001
From: Egor <egor.andrianovv@gmail.com>
Date: Fri, 23 Jan 2026 00:11:58 +0300
Subject: [PATCH] Update ConnectionModal.tsx

---
 src/components/ConnectionModal.tsx | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/components/ConnectionModal.tsx b/src/components/ConnectionModal.tsx
index 1dcb078..0b4d363 100644
--- a/src/components/ConnectionModal.tsx
+++ b/src/components/ConnectionModal.tsx
@@ -139,6 +139,9 @@ export default function ConnectionModal({ onClose }: ConnectionModalProps) {
   const isMobile = isMobileScreen
   const scrollContainerRef = useRef<HTMLDivElement>(null)
 
+  // Ref для хранения актуального обработчика BackButton (фикс мигания)
+  const backButtonHandlerRef = useRef<() => void>(() => {})
+
   // Prevent scroll events from bubbling to parent/Telegram
   const handleScrollContainerWheel = useCallback((e: React.WheelEvent) => {
     const container = e.currentTarget
@@ -200,16 +203,28 @@ export default function ConnectionModal({ onClose }: ConnectionModalProps) {
     return () => document.removeEventListener('keydown', handleKeyDown)
   }, [handleClose, handleBack, showAppSelector])
 
+  // Обновляем ref при изменении логики (без перезапуска эффекта BackButton)
+  useEffect(() => {
+    backButtonHandlerRef.current = showAppSelector ? handleBack : handleClose
+  }, [showAppSelector, handleBack, handleClose])
+
+  // Управление BackButton — эффект запускается только при mount/unmount
+  // Используем стабильный обработчик через ref, чтобы избежать мигания
   useEffect(() => {
     if (!webApp?.BackButton) return
-    const handler = showAppSelector ? handleBack : handleClose
+
+    const stableHandler = () => {
+      backButtonHandlerRef.current()
+    }
+
     webApp.BackButton.show()
-    webApp.BackButton.onClick(handler)
+    webApp.BackButton.onClick(stableHandler)
+
     return () => {
-      webApp.BackButton.offClick(handler)
+      webApp.BackButton.offClick(stableHandler)
       webApp.BackButton.hide()
     }
-  }, [webApp, handleClose, handleBack, showAppSelector])
+  }, [webApp]) // Только webApp в зависимостях!
 
   useEffect(() => {
     document.body.style.overflow = 'hidden'