diff --git a/packages/browser-wallet/src/popup/popupX/pages/Accounts/Accounts.scss b/packages/browser-wallet/src/popup/popupX/pages/Accounts/Accounts.scss index e78b5334f..b5005fb30 100644 --- 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 index 9c965656d..d95223644 100644 --- 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} /> - } onClick={onComplete} /> - } onClick={onAbort} /> +
+ } + onClick={onComplete} + /> + } onClick={onAbort} /> +
); } @@ -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 index 82bb89e83..10abf351d 100644 --- 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) {