frontend: refactor app

Move const deviceIDs = Object.keys(devices) up in the component
to be reused in some effects.

Author: thisconnect

frontends/web/src/app.tsx

@@ -58,6 +58,9 @@ export const App = () => {
 
   const prevDevices = usePrevious(devices);
 
+  const deviceIDs = Object.keys(devices);
+  const firstDevice = deviceIDs[0];
+
   useEffect(() => {
     return syncNewTxs((meta) => {
       notifyUser(t('notification.newTxs', {
@@ -71,7 +74,6 @@ export const App = () => {
     const currentURL = window.location.hash.replace(/^#/, '');
     const isIndex = currentURL === '' || currentURL === '/';
     const inAccounts = currentURL.startsWith('/account/');
-    const deviceIDs = Object.keys(devices);
 
     // QT and Android start their apps in '/index.html' and '/android_asset/web/index.html' respectively
     // This re-routes them to '/' so we have a simpler uri structure
@@ -106,9 +108,10 @@ export const App = () => {
     // if device is connected route to device settings
     if (
       deviceIDs.length === 1
+      && firstDevice
       && currentURL === '/settings/no-device-connected'
     ) {
-      navigate(`/settings/device-settings/${deviceIDs[0] as string}`);
+      navigate(`/settings/device-settings/${firstDevice}`);
       return;
     }
     // if on an account that isn't registered route to /
@@ -138,7 +141,7 @@ export const App = () => {
       return;
     }
 
-  }, [accounts, devices, navigate]);
+  }, [accounts, deviceIDs, firstDevice, navigate]);
 
   useEffect(() => {
     const oldDeviceIDList = Object.keys(prevDevices || {});
@@ -159,7 +162,7 @@ export const App = () => {
       if (firstNewDevice) {
         const productName = devices[firstNewDevice];
         if (productName === 'bitbox' || productName === 'bitbox02-bootloader') {
-          navigate(`settings/device-settings/${newDeviceIDList[0] as string}`);
+          navigate(`settings/device-settings/${firstNewDevice}`);
           return;
         }
       }
@@ -173,10 +176,8 @@ export const App = () => {
     return prefix + ':' + JSON.stringify(devices, Object.keys(devices).sort());
   };
 
-  const deviceIDs: string[] = Object.keys(devices);
   const activeAccounts = accounts.filter(acct => acct.active);
 
-  const firstDevice = deviceIDs[0];
   const isBitboxBootloader = firstDevice && devices[firstDevice] === 'bitbox02-bootloader';
   const showBottomNavigation = (deviceIDs.length > 0 || activeAccounts.length > 0) && !isBitboxBootloader;