Address review comments

Concordium · Oct 24, 2024 · 8cf8eef · 8cf8eef
1 parent 6c6cbac
commit 8cf8eef
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 15 deletions.
diff --git a/packages/browser-wallet/src/popup/popupX/pages/Accounts/Accounts.scss b/packages/browser-wallet/src/popup/popupX/pages/Accounts/Accounts.scss
@@ -44,12 +44,20 @@
             }
         }
 
-        .button__icon {
+        .gap-16 {
             gap: rem(16px);
+        }
 
-            svg {
-                width: rem(16px);
-            }
+        .width-16 {
+            width: rem(16px);
+        }
+
+        .width-12 {
+            width: rem(12px);
+        }
+
+        .button__icon {
+            gap: rem(16px);
 
             .label__main {
                 color: $color-white;

diff --git a/packages/browser-wallet/src/popup/popupX/pages/Accounts/Accounts.tsx b/packages/browser-wallet/src/popup/popupX/pages/Accounts/Accounts.tsx
@@ -18,14 +18,10 @@ import { copyToClipboard } from '@popup/popupX/shared/utils/helpers';
 import { useAtomValue } from 'jotai';
 import { credentialsAtom } from '@popup/store/account';
 import { WalletCredential } from '@shared/storage/types';
-import { useIdentityName, useWritableSelectedAccount } from '@popup/shared/utils/account-helpers';
+import { displaySplitAddress, useIdentityName, useWritableSelectedAccount } from '@popup/shared/utils/account-helpers';
 import { useAccountInfo } from '@popup/shared/AccountInfoListenerContext';
 import { displayAsCcd } from 'wallet-common-helpers';
 
-function fallbackAccountName(credentialNumber: number): string {
-    return `Account ${1 + credentialNumber}`;
-}
-
 type EditableAccountNameProps = {
     currentName: string;
     fallbackName: string;
@@ -72,8 +68,14 @@ function EditableAccountName({ currentName, fallbackName, onNewName }: EditableA
                         maxLength={25}
                     />
                 </Text.Main>
-                <Button.Icon className="transparent" icon={<Checkmark />} onClick={onComplete} />
-                <Button.Icon className="transparent" icon={<Close />} onClick={onAbort} />
+                <div className="row gap-16">
+                    <Button.Icon
+                        className="transparent"
+                        icon={<Checkmark className="width-12" />}
+                        onClick={onComplete}
+                    />
+                    <Button.Icon className="transparent" icon={<Close className="width-16" />} onClick={onAbort} />
+                </div>
             </>
         );
     }
@@ -98,7 +100,7 @@ function AccountListItem({ credential }: AccountListItemProps) {
     const identityName = useIdentityName(credential);
     const accountInfo = useAccountInfo(credential);
     const setAccount = useWritableSelectedAccount(credential.address);
-    const fallbackName = fallbackAccountName(credential.credNumber);
+    const fallbackName = displaySplitAddress(credential.address);
     const accountName = credential.credName !== '' ? credential.credName : fallbackName;
     const { address } = credential;
     const ccdBalance =

diff --git a/packages/browser-wallet/src/popup/shared/utils/account-helpers.ts b/packages/browser-wallet/src/popup/shared/utils/account-helpers.ts
@@ -10,15 +10,19 @@ import { isIdentityOfCredential } from '@shared/utils/identity-helpers';
 import { getNextUnused } from '@shared/utils/number-helpers';
 import { useDecryptedSeedPhrase } from './seed-phrase-helpers';
 
+/** Format an account address for display by showing the 4 first and last characters in the base58check representation. */
+export function displaySplitAddress(address: string) {
+    return `${address.slice(0, 4)}...${address.slice(-4)}`;
+}
+
 export const displayNameOrSplitAddress = (account: WalletCredential | undefined) => {
     const { credName, address } = account || { address: '' };
-    return credName || `${address.slice(0, 4)}...${address.slice(address.length - 4)}`;
+    return credName || displaySplitAddress(address);
 };
 
 export const displayNameAndSplitAddress = (account: WalletCredential | undefined) => {
     const { credName, address } = account || { address: '' };
-    const splitAddress = `${address.slice(0, 4)}...${address.slice(address.length - 4)}`;
-    return `${credName ? `${credName} / ` : ''}${splitAddress}`;
+    return `${credName ? `${credName} / ` : ''}${displaySplitAddress(address)}`;
 };
 
 export function useIdentityOf(cred?: WalletCredential) {