frontend/sidebar: add fingerprint to accounts group to disambiguate

If multiple keystores have the same name (commonly when you add
keystores from one seed using multiple different passphrases), we
append the fingerprint to disambiguate the groups.

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

@@ -31,7 +31,7 @@ import { apiPost } from '../../utils/request';
 import Logo, { AppLogoInverted } from '../icon/logo';
 import { useLocation } from 'react-router';
 import { CloseXWhite } from '../icon';
-import { getAccountsByKeystore, isBitcoinOnly } from '../../routes/account/utils';
+import { getAccountsByKeystore, isAmbiguiousName, isBitcoinOnly } from '../../routes/account/utils';
 import { SkipForTesting } from '../../routes/device/components/skipfortesting';
 import { Store } from '../../decorators/store';
 import style from './sidebar.module.css';
@@ -215,6 +215,12 @@ class Sidebar extends Component<Props> {
               <div className={style.sidebarHeaderContainer}>
                 <span className={style.sidebarHeader} hidden={!keystore.accounts.length}>
                   {t('sidebar.accounts')} - {keystore.keystore.name}
+                  { isAmbiguiousName(keystore.keystore.name, accountsByKeystore) ? (
+                    // Disambiguate accounts group by adding the fingerprint.
+                    // The most common case where this would happen is when adding accounts from the
+                    // same seed using different passphrases.
+                    <> ({keystore.keystore.rootFingerprint})</>
+                  ) : null }
                 </span>
               </div>
 

frontends/web/src/routes/account/utils.ts

@@ -114,3 +114,8 @@ export function getAccountsByKeystore(accounts: IAccount[]): TAccountsByKeystore
     return acc;
   }, {} as Record<string, TAccountsByKeystore>));
 }
+
+// Returns true if more than one one keystore has the given name.
+export function isAmbiguiousName(name: string, accounts: TAccountsByKeystore[]): boolean {
+  return accounts.filter(keystore => keystore.keystore.name === name).length > 1;
+}