frontend: add red dot in sidebar and settings when fw can update

Users miss that the firmware can update or are just not aware.

Added red dot in the sidebar (or on device tab) indicates that
there is an important action.

Author: thisconnect

CHANGELOG.md

@@ -11,6 +11,7 @@
 - Add Satoshi as an option in active currencies
 - Show address re-use warning and group UTXOs with the same address together in coin control.
 - Fix encoding of transaction notes on Windows
+- Add red dot in sidebar and on device settings tab to indicate that there is a firmware upgrade
 
 ## 4.42.1
 - BitBox02: fix missing button to re-install firmware, fixing interrupted installs ("invalid firmware").

frontends/web/src/app.tsx

@@ -152,6 +152,7 @@ export const App = () => {
           <Sidebar
             accounts={activeAccounts}
             deviceIDs={deviceIDs}
+            devices={devices}
           />
           <div className="appContent flex flex-column flex-1" style={{ minWidth: 0 }}>
             <Update />

frontends/web/src/components/sidebar/sidebar.module.css

@@ -223,3 +223,13 @@ a.sidebarActive .single img,
     text-align: left;
     width: 100%;
 }
+
+.canUpgradeDot {
+    height: 8px;
+    left: 2px;
+    max-width: 8px;
+    position: relative;
+    top: -2px;
+    vertical-align: top;
+    width: 8px;
+}

frontends/web/src/components/sidebar/sidebar.tsx

@@ -15,13 +15,15 @@
  * limitations under the License.
  */
 
-import React, { useContext, useEffect } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { useLocation } from 'react-router';
 import { Link, NavLink } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { useKeystores } from '../../hooks/backend';
-import { IAccount } from '../../api/account';
+import type { TDevices } from '../../api/devices';
+import type { IAccount } from '../../api/account';
 import { deregisterTest } from '../../api/keystores';
+import { getVersion } from '../../api/bitbox02';
 import coins from '../../assets/icons/coins.svg';
 import ejectIcon from '../../assets/icons/eject.svg';
 import shieldIcon from '../../assets/icons/shield_grey.svg';
@@ -31,7 +33,7 @@ import settingsGrey from '../../assets/icons/settings-alt_disabled.svg';
 import deviceSettings from '../../assets/icons/wallet-light.svg';
 import { debug } from '../../utils/env';
 import { AppLogoInverted, Logo } from '../icon/logo';
-import { CloseXWhite, USBSuccess } from '../icon';
+import { CloseXWhite, RedDot, USBSuccess } from '../icon';
 import { getAccountsByKeystore, isAmbiguiousName, isBitcoinOnly } from '../../routes/account/utils';
 import { SkipForTesting } from '../../routes/device/components/skipfortesting';
 import { Badge } from '../badge/badge';
@@ -41,6 +43,7 @@ import style from './sidebar.module.css';
 
 type SidebarProps = {
   deviceIDs: string[];
+  devices: TDevices;
   accounts: IAccount[];
 };
 
@@ -75,12 +78,32 @@ const eject = (e: React.SyntheticEvent): void => {
 
 const Sidebar = ({
   deviceIDs,
+  devices,
   accounts,
 }: SidebarProps) => {
   const { t } = useTranslation();
   const { pathname } = useLocation();
+  const [ canUpgrade, setCanUpgrade ] = useState(false);
   const { activeSidebar, sidebarStatus, toggleSidebar } = useContext(AppContext);
 
+  useEffect(() => {
+    const checkUpgradableDevices = async () => {
+      setCanUpgrade(false);
+      const bitbox02Devices = Object.keys(devices).filter(deviceID => devices[deviceID] === 'bitbox02');
+
+      for (const deviceID of bitbox02Devices) {
+        const { canUpgrade } = await getVersion(deviceID);
+        if (canUpgrade) {
+          setCanUpgrade(true);
+          // exit early as we found an upgradable device
+          return;
+        }
+      }
+    };
+
+    checkUpgradableDevices();
+  }, [devices]);
+
   useEffect(() => {
     const swipe = {
       active: false,
@@ -243,7 +266,12 @@ const Sidebar = ({
               <img draggable={false} src={settingsGrey} alt={t('sidebar.settings')} />
               <img draggable={false} src={settings} alt={t('sidebar.settings')} />
             </div>
-            <span className={style.sidebarLabel}>{t('sidebar.settings')}</span>
+            <span className={style.sidebarLabel}>
+              {t('sidebar.settings')}
+              {canUpgrade && (
+                <RedDot className={style.canUpgradeDot} width={8} height={8} />
+              )}
+            </span>
           </NavLink>
         </div>
 

frontends/web/src/routes/settings/components/tabs.module.css

@@ -23,3 +23,6 @@
     }
 }
 
+.canUpgradeDot {
+    vertical-align: top;
+}

frontends/web/src/routes/settings/components/tabs.tsx

@@ -16,10 +16,12 @@
 
 import { ReactNode } from 'react';
 import { NavLink } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { useLoad } from '../../../hooks/api';
+import { getVersion } from '../../../api/bitbox02';
 import { route } from '../../../utils/route';
 import { SettingsItem } from './settingsItem/settingsItem';
-import { ChevronRightDark } from '../../../components/icon';
-import { useTranslation } from 'react-i18next';
+import { ChevronRightDark, RedDot } from '../../../components/icon';
 import styles from './tabs.module.css';
 
 type TWithSettingsTabsProps = {
@@ -33,6 +35,7 @@ type TTab = {
   name: string;
   url: string;
   hideMobileMenu?: boolean;
+  canUpgrade?: boolean;
 }
 
 type TTabs = {
@@ -57,7 +60,16 @@ export const WithSettingsTabs = ({
   );
 };
 
-export const Tab = ({ name, url, hideMobileMenu }: TTab) => {
+export const Tab = ({
+  name,
+  url,
+  hideMobileMenu,
+  canUpgrade,
+}: TTab) => {
+
+  const upgradeDot = canUpgrade ? (
+    <RedDot className={styles.canUpgradeDot} width={8} height={8} />
+  ) : null;
 
   if (!hideMobileMenu) {
     // Will only be shown on mobile (index/general settings page)
@@ -67,6 +79,7 @@ export const Tab = ({ name, url, hideMobileMenu }: TTab) => {
           settingName={name}
           onClick={() => route(url)}
           extraComponent={<ChevronRightDark/>} />
+        {upgradeDot}
       </div>
     );
   }
@@ -77,18 +90,41 @@ export const Tab = ({ name, url, hideMobileMenu }: TTab) => {
       to={url}
       key={url}>
       {name}
+      {upgradeDot}
     </NavLink>
   );
 };
 
+type TTabWithVersionCheck = TTab & {
+  deviceID: string;
+}
+
+const TabWithVersionCheck = ({ deviceID, ...props }: TTabWithVersionCheck) => {
+
+  const versionInfo = useLoad(() => getVersion(deviceID), [deviceID]);
+
+  return (
+    <Tab
+      canUpgrade={versionInfo ? versionInfo.canUpgrade : false}
+      {...props}
+    />
+  );
+};
+
 export const Tabs = ({ deviceIDs, hideMobileMenu, hasAccounts }: TTabs) => {
   const { t } = useTranslation();
   return (
     <div className={styles.container}>
       <Tab key="appearance" hideMobileMenu={hideMobileMenu} name={t('settings.appearance')} url="/settings/appearance" />
       {hasAccounts ? <Tab key="manage-accounts" hideMobileMenu={hideMobileMenu} name={t('manageAccounts.title')} url="/settings/manage-accounts" /> : null}
       {deviceIDs.map(id => (
-        <Tab hideMobileMenu={hideMobileMenu} name={t('sidebar.device')} key={`device-${id}`} url={`/settings/device-settings/${id}`} />
+        <TabWithVersionCheck
+          key={`device-${id}`}
+          deviceID={id}
+          hideMobileMenu={hideMobileMenu}
+          name={t('sidebar.device')}
+          url={`/settings/device-settings/${id}`}
+        />
       )) }
       <Tab key="advanced-settings" hideMobileMenu={hideMobileMenu} name={t('settings.advancedSettings')} url="/settings/advanced-settings" />
       <Tab key="about" hideMobileMenu={hideMobileMenu} name={t('settings.about')} url="/settings/about" />