Merge branch 'frontend-can-update-dot'

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" />