Repository: joinmarket-webui/jam
Pull request #677 (2023-10-13 13:45:50)

ui(footer): improve label and colors of websocket indicator
Before this commit, the label on the websocket indicator just stated "connected" or "disconnected", which caused some confusion. 

After this commit, it will be labelled  "Websocket conntected" or "Websocket disconnected". Also, if the websocket is disconnected, the icon is coloured gray instead of red, as Jam will work normally without a stable websocket connection (UI responsiveness will be slower, but is functioning).


### :camera_flash: Before
<img src="https://github.com/joinmarket-webui/jam/assets/3358649/51d323ef-f3bd-4534-bb97-6f0a695fd59e" width=250 />
<img src="https://github.com/joinmarket-webui/jam/assets/3358649/85ee888f-2a76-4c13-af1d-b73b29fe0254" width=250 />

### :camera_flash: After
<img src="https://github.com/joinmarket-webui/jam/assets/3358649/ac971d11-2501-4ce9-9d62-ef2ed2e1cb30" width=250 />
<img src="https://github.com/joinmarket-webui/jam/assets/3358649/dd63c9b0-9fd4-46fc-bfe7-7520a4864f5f" width=250 />

<br />
<img src="https://github.com/joinmarket-webui/jam/assets/3358649/caba0eb7-91ce-4fbc-8605-64fc6eaa7446" width=250 />
<img src="https://github.com/joinmarket-webui/jam/assets/3358649/284f9c33-1d5b-495b-8958-3ca37b88c7a0" width=250 />






Patch:
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 956c3d5..db77fcb 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 aeafa25..354ea55 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",


Test patch:
diff --git a/src/components/App.test.tsx b/src/components/App.test.tsx
index ff6c22a..f2ccc7d 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)
   })
 })