ui(footer): improve label and colors of websocket indicator

joinmarket-webui · Oct 13, 2023 · e24b963 · e24b963
1 parent 5900a8c
commit e24b963
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 12 deletions.
diff --git 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
@@ -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,22 @@ 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,
+                    'text-secondary': websocketState !== WebSocket.OPEN && 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
@@ -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",