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

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

Hide file tree

Showing 3 changed files with 12 additions and 13 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
@@ -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
@@ -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",