Merge branch 'dup-fingerprint'

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;
+}