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.

The app does not know which keystores are passphrase accounts and
which are not, so we use the name as the closest thing we have to
disambiguate.

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 keystore has the given name.
+export function isAmbiguiousName(name: string, accounts: TAccountsByKeystore[]): boolean {
+  return accounts.filter(keystore => keystore.keystore.name === name).length > 1;
+}