Merge branch 'frontend-keystore-component'

Author: thisconnect

frontends/web/src/components/badge/badge.module.css

@@ -3,6 +3,7 @@
   border: 1px solid;
   display: inline-block;
   font-size: var(--size-small);
+  flex-shrink: 0;
   line-height: 1;
   padding: var(--space-eight) 10px;
   white-space: nowrap;

frontends/web/src/components/keystore/connected-keystore.module.css

@@ -0,0 +1,20 @@
+.keystore {
+  font-size: var(--size-default);
+  gap: var(--space-quarter);
+  word-break: break-word;
+}
+
+.keystoreName {
+  color: inherit;
+}
+
+.keystore small {
+  color: var(--color-secondary);
+  font-size: var(--size-xsmall);
+}
+
+@media (min-width: 1200px) {
+  .keystore {
+    --size-default: 20px;
+  }
+}

frontends/web/src/components/keystore/connected-keystore.tsx

@@ -0,0 +1,65 @@
+/**
+ * Copyright 2025 Shift Crypto AG
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useTranslation } from 'react-i18next';
+import type { TKeystore } from '@/api/account';
+import { isAmbiguousName, TAccountsByKeystore } from '@/routes/account/utils';
+import { Badge } from '@/components/badge/badge';
+import { USBSuccess } from '@/components/icon';
+import style from './connected-keystore.module.css';
+
+type Props = {
+  accountsByKeystore: TAccountsByKeystore[];
+  className?: string;
+  connectedIconOnly?: boolean;
+  keystore: TKeystore;
+};
+
+export const ConnectedKeystore = ({
+  accountsByKeystore,
+  className,
+  connectedIconOnly,
+  keystore,
+}: Props) => {
+  const { t } = useTranslation();
+  const classNames = className ? `${style.keystore} ${className}` : style.keystore;
+
+  return (
+    <span className={classNames}>
+      <span className={style.keystoreName}>{keystore.name}</span>
+      {isAmbiguousName(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.
+        <>
+          {' '}
+          <small>({keystore.rootFingerprint})</small>
+        </>
+      ) : null}
+      {keystore.connected && (
+        <>
+          {' '}
+          <Badge
+            icon={props => <USBSuccess {...props} />}
+            title={t('device.keystoreConnected')}
+            type="success">
+            {connectedIconOnly ? undefined : t('device.keystoreConnected')}
+          </Badge>
+        </>
+      )}
+    </span>
+  );
+};

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

@@ -25,12 +25,12 @@ import { deregisterTest } from '@/api/keystores';
 import { getVersion } from '@/api/bitbox02';
 import { debug } from '@/utils/env';
 import { AppLogoInverted, Logo } from '@/components/icon/logo';
-import { CloseXWhite, Cog, CogGray, Coins, Device, Eject, Linechart, RedDot, ShieldGray, USBSuccess } from '@/components/icon';
-import { getAccountsByKeystore, isAmbiguousName } from '@/routes/account/utils';
+import { CloseXWhite, Cog, CogGray, Coins, Device, Eject, Linechart, RedDot, ShieldGray } from '@/components/icon';
+import { getAccountsByKeystore } from '@/routes/account/utils';
 import { SkipForTesting } from '@/routes/device/components/skipfortesting';
-import { Badge } from '@/components/badge/badge';
 import { AppContext } from '@/contexts/AppContext';
 import { Button } from '@/components/forms';
+import { ConnectedKeystore } from '../keystore/connected-keystore';
 import style from './sidebar.module.css';
 
 type SidebarProps = {
@@ -141,24 +141,12 @@ const Sidebar = ({
         { accountsByKeystore.map(keystore => (
           <div key={`keystore-${keystore.keystore.rootFingerprint}`}>
             <div className={style.sidebarHeaderContainer}>
-              <span
+              <ConnectedKeystore
+                accountsByKeystore={accountsByKeystore}
                 className={style.sidebarHeader}
-                hidden={!keystore.accounts.length}>
-                <span className="p-right-quarter">
-                  {`${keystore.keystore.name} `}
-                  { isAmbiguousName(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>
-                <Badge
-                  className={keystore.keystore.connected ? style.sidebarIconVisible : style.sidebarIconHidden}
-                  icon={props => <USBSuccess {...props} />}
-                  type="success"
-                  title={t('device.keystoreConnected')} />
-              </span>
+                keystore={keystore.keystore}
+                connectedIconOnly={true}
+              />
             </div>
             { keystore.accounts.map(acc => (
               <GetAccountLink key={`account-${acc.code}`} {...acc} handleSidebarItemClick={handleSidebarItemClick} />

frontends/web/src/routes/account/summary/accountssummary.tsx

@@ -1,6 +1,6 @@
 /**
  * Copyright 2018 Shift Devices AG
- * Copyright 2023-2024 Shift Crypto AG
+ * Copyright 2023-2025 Shift Crypto AG
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -35,7 +35,7 @@ import { Entry } from '@/components/guide/entry';
 import { Guide } from '@/components/guide/guide';
 import { HideAmountsButton } from '@/components/hideamountsbutton/hideamountsbutton';
 import { AppContext } from '@/contexts/AppContext';
-import { getAccountsByKeystore, isAmbiguousName } from '@/routes/account/utils';
+import { getAccountsByKeystore } from '@/routes/account/utils';
 import { RatesContext } from '@/contexts/RatesContext';
 import { ContentWrapper } from '@/components/contentwrapper/contentwrapper';
 import { GlobalBanners } from '@/components/banners';
@@ -214,11 +214,10 @@ export const AccountsSummary = ({
               (accountsByKeystore.map(({ keystore, accounts }) =>
                 (
                   <KeystoreBalance
-                    keystoreDisambiguatorName={isAmbiguousName(keystore.name, accountsByKeystore) ? keystore.rootFingerprint : undefined}
-                    connected={keystore.connected}
-                    keystoreName={keystore.name}
                     key={keystore.rootFingerprint}
                     accounts={accounts}
+                    accountsByKeystore={accountsByKeystore}
+                    keystore={keystore}
                     keystoreBalance={accountsBalanceSummary?.keystoresBalance[keystore.rootFingerprint]}
                     balances={balances}
                   />

frontends/web/src/routes/account/summary/keystorebalance.tsx

@@ -1,5 +1,5 @@
 /**
- * Copyright 2023 Shift Crypto AG
+ * Copyright 2023-2025 Shift Crypto AG
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -16,14 +16,14 @@
 
 import { useTranslation } from 'react-i18next';
 import * as accountApi from '@/api/account';
-import { getAccountsPerCoin } from '@/routes/account/utils';
+import type { TKeystore } from '@/api/account';
+import { getAccountsPerCoin, TAccountsByKeystore } from '@/routes/account/utils';
 import { Balances } from './accountssummary';
 import { BalanceRow } from './balancerow';
 import { SubTotalRow } from './subtotalrow';
 import { Amount } from '@/components/amount/amount';
 import { Skeleton } from '@/components/skeleton/skeleton';
-import { Badge } from '@/components/badge/badge';
-import { USBSuccess } from '@/components/icon';
+import { ConnectedKeystore } from '@/components/keystore/connected-keystore';
 import style from './accountssummary.module.css';
 
 const TotalBalance = ({ total, fiatUnit }: accountApi.TKeystoreBalance) => {
@@ -41,21 +41,19 @@ const TotalBalance = ({ total, fiatUnit }: accountApi.TKeystoreBalance) => {
 };
 
 type TProps = {
-  accounts: accountApi.IAccount[],
-  connected: boolean;
-  keystoreName: string;
-  keystoreBalance?: accountApi.TKeystoreBalance,
-  balances?: Balances,
-  keystoreDisambiguatorName?: string
+  accounts: accountApi.IAccount[];
+  accountsByKeystore: TAccountsByKeystore[];
+  keystore: TKeystore;
+  keystoreBalance?: accountApi.TKeystoreBalance;
+  balances?: Balances;
 }
 
 export const KeystoreBalance = ({
+  accountsByKeystore,
   accounts,
-  connected,
-  keystoreName,
+  keystore,
   keystoreBalance,
   balances,
-  keystoreDisambiguatorName
 }: TProps) => {
   const { t } = useTranslation();
 
@@ -65,17 +63,11 @@ export const KeystoreBalance = ({
   return (
     <div>
       <div className={style.accountName}>
-        <p>{keystoreName} {keystoreDisambiguatorName && `(${keystoreDisambiguatorName})`}</p>
-        {connected ? (
-          <Badge
-            icon={props => <USBSuccess {...props} />}
-            type="success"
-          >
-            {t('device.keystoreConnected')}
-          </Badge>
-        ) :
-          null
-        }
+        <p>
+          <ConnectedKeystore
+            accountsByKeystore={accountsByKeystore}
+            keystore={keystore} />
+        </p>
       </div>
       <div className={style.balanceTable}>
         <table className={style.table}>

frontends/web/src/routes/accounts/all-accounts.module.css

@@ -10,21 +10,14 @@
   background-color: var(--background-secondary);
 }
 
-.keystoreHeader {
-  color: var(--color-tertiary);
-  display: flex;
-  font-weight: 500;
-  gap: 4px;
-}
-
 .keystoreName {
-  color: var(--color-text);
+  color: var(--color-tertiary);
 }
 
 .accountsList {
   display: flex;
   flex-direction: column;
-  margin-top: var(--space-half);
+  margin: var(--space-half) 0;
   gap: var(--space-half);
 }
 
@@ -37,6 +30,7 @@
 }
 
 .accountIcon {
+  display: block;
   flex: 0 0 auto;
   margin-right: var(--space-quarter);
 }

frontends/web/src/routes/accounts/all-accounts.tsx

@@ -22,14 +22,14 @@ import * as accountApi from '@/api/account';
 import { getBalance } from '@/api/account';
 import { Logo } from '@/components/icon/logo';
 import { View, ViewContent } from '@/components/view/view';
-import { getAccountsByKeystore, isAmbiguousName } from '@/routes/account/utils';
+import { getAccountsByKeystore } from '@/routes/account/utils';
 import { HideAmountsButton } from '@/components/hideamountsbutton/hideamountsbutton';
 import { Main, Header } from '@/components/layout';
-import { Badge } from '@/components/badge/badge';
-import { ChevronRightDark, USBSuccess } from '@/components/icon/icon';
+import { ChevronRightDark } from '@/components/icon/icon';
 import { AllAccountsGuide } from '@/routes/accounts/all-accounts-guide';
 import { useMountedRef } from '@/hooks/mount';
 import { AmountWithUnit } from '@/components/amount/amount-with-unit';
+import { ConnectedKeystore } from '@/components/keystore/connected-keystore';
 import styles from './all-accounts.module.css';
 
 type AllAccountsProps = {
@@ -101,23 +101,11 @@ export const AllAccounts = ({ accounts = [] }: AllAccountsProps) => {
           <div className={styles.container}>
             {accountsByKeystore.map(keystore => (
               <div key={`keystore-${keystore.keystore.rootFingerprint}`}>
-                <div className={styles.keystoreHeader}>
-                  {keystore.keystore.name}
-                  { isAmbiguousName(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 }
-                  {keystore.keystore.connected && (
-                    <Badge
-                      icon={props => <USBSuccess {...props} />}
-                      type="success">
-                      {t('device.keystoreConnected')}
-                    </Badge>
-                  )}
-
-                </div>
+                <ConnectedKeystore
+                  accountsByKeystore={accountsByKeystore}
+                  keystore={keystore.keystore}
+                  className={styles.keystoreName}
+                />
                 <div className={styles.accountsList}>
                   {keystore.accounts.map(account => (
                     <AccountItem key={`account-${account.code}`} account={account} />

frontends/web/src/routes/settings/manage-accounts.module.css

@@ -29,6 +29,10 @@
     width: 50%;
 }
 
+.connectedKeystore {
+    flex-wrap: wrap;
+}
+
 .keystoreName {
     margin-bottom: var(--space-eight);
     margin-right: var(--space-quarter);