frontend: use unique keys for sidebar items

With watch-only items in the sidebar are now groupped by keystore,
but there is a rare issue that React gets confused and renders one
account at the top of the sidebar.

This change explicitly sets keys for all items in the sidebar,
and wrapps keystores and the associated  account in a separate
container. This should theoretically fix the rare rendering bug.

Author: thisconnect

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

@@ -53,7 +53,7 @@ const GetAccountLink = ({
   const { pathname } = useLocation();
   const active = (pathname === `/account/${code}`) || (pathname.startsWith(`/account/${code}/`));
   return (
-    <div key={code} className={style.sidebarItem}>
+    <div className={style.sidebarItem}>
       <Link
         className={active ? style.sidebarActive : ''}
         to={`/account/${code}`}
@@ -154,9 +154,9 @@ const Sidebar = ({
 
   return (
     <div className={[style.sidebarContainer, hidden ? style.forceHide : ''].join(' ')}>
-      <div className={[style.sidebarOverlay, activeSidebar ? style.active : ''].join(' ')} onClick={toggleSidebar}></div>
+      <div key="overlay" className={[style.sidebarOverlay, activeSidebar ? style.active : ''].join(' ')} onClick={toggleSidebar}></div>
       <nav className={[style.sidebar, activeSidebar ? style.forceShow : ''].join(' ')}>
-        <div className={style.sidebarLogoContainer}>
+        <div key="app-logo" className={style.sidebarLogoContainer}>
           <Link
             to={accounts.length ? '/account-summary' : '/'}
             onClick={handleSidebarItemClick}>
@@ -168,7 +168,7 @@ const Sidebar = ({
         </div>
 
         { accounts.length ? (
-          <div className={`${style.sidebarItem} ${style.sidebarPortfolio}`}>
+          <div key="account-summary" className={`${style.sidebarItem} ${style.sidebarPortfolio}`}>
             <NavLink
               className={({ isActive }) => isActive ? style.sidebarActive : ''}
               to={'/account-summary'}
@@ -183,7 +183,7 @@ const Sidebar = ({
         ) : null }
 
         { accountsByKeystore.map(keystore => (
-          <React.Fragment key={keystore.keystore.rootFingerprint}>
+          <div key={`keystore-${keystore.keystore.rootFingerprint}`}>
             <div className={style.sidebarHeaderContainer}>
               <span
                 className={style.sidebarHeader}
@@ -204,11 +204,13 @@ const Sidebar = ({
                   title={t('device.keystoreConnected')} />
               </span>
             </div>
-            { keystore.accounts.map(acc => <GetAccountLink key={acc.code} {...acc} handleSidebarItemClick={handleSidebarItemClick }/>) }
-          </React.Fragment>
+            { keystore.accounts.map(acc => (
+              <GetAccountLink key={`account-${acc.code}`} {...acc} handleSidebarItemClick={handleSidebarItemClick} />
+            ))}
+          </div>
         )) }
 
-        <div className={[style.sidebarHeaderContainer, style.end].join(' ')}></div>
+        <div key="services" className={[style.sidebarHeaderContainer, style.end].join(' ')}></div>
         { accounts.length ? (
           <>
             <div key="buy" className={style.sidebarItem}>
@@ -237,7 +239,7 @@ const Sidebar = ({
           </>
         ) : null }
 
-        <div key="settings-new" className={style.sidebarItem}>
+        <div key="settings" className={style.sidebarItem}>
           <NavLink
             className={({ isActive }) => isActive ? style.sidebarActive : ''}
             to={'/settings'}