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

---
 src/components/Footer.tsx            | 20 ++++++++++++--------
 src/i18n/locales/en/translation.json |  5 +++--
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 956c3d57..0a7d8cd6 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,4 +1,5 @@
 import { useState, useEffect, useMemo } from 'react'
+import classNames from 'classnames'
 import * as rb from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
 import { useSettings, useSettingsDispatch } from '../context/SettingsContext'
@@ -24,17 +25,11 @@ export default function Footer() {
   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])
-
   useEffect(() => {
     let timer: NodeJS.Timeout
     // show the cheatsheet once after the first wallet has been created
@@ -142,12 +137,21 @@ export default function Footer() {
                 placement="top"
                 overlay={(props) => (
                   <rb.Tooltip {...props}>
-                    {websocketConnected ? t('footer.connected') : t('footer.disconnected')}
+                    {websocketState === WebSocket.OPEN ? (
+                      <>{t('footer.websocket_connected')}</>
+                    ) : websocketState === WebSocket.CONNECTING ? (
+                      <>{t('footer.websocket_connecting')}</>
+                    ) : (
+                      <>{t('footer.websocket_disconnected')}</>
+                    )}
                   </rb.Tooltip>
                 )}
               >
                 <span
-                  className={`mx-1 ${websocketConnected ? 'text-success' : 'text-danger'}`}
+                  className={classNames('mx-1', {
+                    'text-success': websocketState === WebSocket.OPEN,
+                    'text-warning': websocketState === WebSocket.CONNECTING,
+                  })}
                   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 aeafa257..4831a335 100644
--- a/src/i18n/locales/en/translation.json
+++ b/src/i18n/locales/en/translation.json
@@ -51,8 +51,9 @@
     "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_connecting": "Websocket connecting...",
+    "websocket_connected": "Websocket connected",
+    "websocket_disconnected": "Websocket disconnected"
   },
   "onboarding": {
     "splashscreen_title": "Jam",