From c93749be112013bdd7b97424b5ed2860bbe6ef1e Mon Sep 17 00:00:00 2001
From: theborakompanioni <theborakompanioni+github@gmail.com>
Date: Fri, 13 Oct 2023 15:41:30 +0200
Subject: [PATCH] chore(footer): improve label and colors of websocket
 indicator

---
 src/components/App.test.tsx          |  4 ++--
 src/components/Footer.tsx            | 17 ++++++++---------
 src/i18n/locales/en/translation.json |  4 ++--
 3 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/src/components/App.test.tsx b/src/components/App.test.tsx
index ff6c22a08..f2ccc7d70 100644
--- a/src/components/App.test.tsx
+++ b/src/components/App.test.tsx
@@ -74,12 +74,12 @@ describe('<App />', () => {
       render(<App />)
     })
 
-    expect(screen.getByTestId('connection-indicator-icon').classList.contains('text-danger')).toBe(true)
+    expect(screen.getByTestId('connection-indicator-icon').classList.contains('text-secondary')).toBe(true)
     expect(screen.getByTestId('connection-indicator-icon').classList.contains('text-success')).toBe(false)
 
     await global.__DEV__.JM_WEBSOCKET_SERVER_MOCK.connected
 
     expect(screen.getByTestId('connection-indicator-icon').classList.contains('text-success')).toBe(true)
-    expect(screen.getByTestId('connection-indicator-icon').classList.contains('text-danger')).toBe(false)
+    expect(screen.getByTestId('connection-indicator-icon').classList.contains('text-secondary')).toBe(false)
   })
 })
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 956c3d57a..db77fcbb9 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -18,22 +18,17 @@ const APP_DISPLAY_VERSION = (() => {
 
 export default function Footer() {
   const { t } = useTranslation()
+  const currentWallet = useCurrentWallet()
   const settings = useSettings()
   const serviceInfo = useServiceInfo()
   const settingsDispatch = useSettingsDispatch()
   const websocketState = useWebsocketState()
-  const currentWallet = useCurrentWallet()
 
-  const [websocketConnected, setWebsocketConnected] = useState(false)
   const [showBetaWarning, setShowBetaWarning] = useState(false)
   const [showCheatsheet, setShowCheatsheet] = useState(false)
 
   const cheatsheetEnabled = useMemo(() => !!currentWallet, [currentWallet])
-
-  // update the connection indicator based on the websocket connection state
-  useEffect(() => {
-    setWebsocketConnected(websocketState === WebSocket.OPEN)
-  }, [websocketState])
+  const websocketConnected = useMemo(() => websocketState === WebSocket.OPEN, [websocketState])
 
   useEffect(() => {
     let timer: NodeJS.Timeout
@@ -142,12 +137,16 @@ export default function Footer() {
                 placement="top"
                 overlay={(props) => (
                   <rb.Tooltip {...props}>
-                    {websocketConnected ? t('footer.connected') : t('footer.disconnected')}
+                    {websocketConnected ? (
+                      <>{t('footer.websocket_connected')}</>
+                    ) : (
+                      <>{t('footer.websocket_disconnected')}</>
+                    )}
                   </rb.Tooltip>
                 )}
               >
                 <span
-                  className={`mx-1 ${websocketConnected ? 'text-success' : 'text-danger'}`}
+                  className={`mx-1 ${websocketConnected ? 'text-success' : 'text-secondary'}`}
                   data-testid="connection-indicator-icon"
                 >
                   <Sprite symbol="node" width="24px" height="24px" />
diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
index aeafa2573..354ea557b 100644
--- a/src/i18n/locales/en/translation.json
+++ b/src/i18n/locales/en/translation.json
@@ -51,8 +51,8 @@
     "warning_alert_text": "While JoinMarket is tried and tested, Jam is not. It is in a beta stage, so use with caution.",
     "warning_alert_button_ok": "Fine with me.",
     "cheatsheet": "Cheatsheet",
-    "connected": "Connected",
-    "disconnected": "Disconnected"
+    "websocket_connected": "Websocket connected",
+    "websocket_disconnected": "Websocket disconnected"
   },
   "onboarding": {
     "splashscreen_title": "Jam",