@@ -69,7 +69,7 @@ export default function ConnectionRequest({ onAllow, onReject }: Props) {
disabled={connectButtonDisabled}
onClick={() => {
setConnectButtonDisabled(true);
- connectAccount(selectedAccount, new URL(url).origin).then(withClose(onAllow));
+ connectAccount(selectedAccount.address, new URL(url).origin).then(withClose(onAllow));
}}
>
{t('actions.connect')}
diff --git a/packages/browser-wallet/src/popup/pages/Recovery/RecoveryFinish.tsx b/packages/browser-wallet/src/popup/pages/Recovery/RecoveryFinish.tsx
index eee3b88e9..117dabcaf 100644
--- a/packages/browser-wallet/src/popup/pages/Recovery/RecoveryFinish.tsx
+++ b/packages/browser-wallet/src/popup/pages/Recovery/RecoveryFinish.tsx
@@ -7,7 +7,7 @@ import { identitiesAtom } from '@popup/store/identity';
import Button from '@popup/shared/Button';
import { absoluteRoutes } from '@popup/constants/routes';
import { noOp, displayAsCcd } from 'wallet-common-helpers';
-import { displaySplitAddress } from '@popup/shared/utils/account-helpers';
+import { displayNameOrSplitAddress } from '@popup/shared/utils/account-helpers';
import { IdentityIdentifier, BackgroundResponseStatus, RecoveryBackgroundResponse } from '@shared/utils/types';
import { fullscreenPromptContext } from '@popup/page-layouts/FullscreenPromptLayout';
import PageHeader from '@popup/shared/PageHeader';
@@ -69,7 +69,7 @@ export function DisplaySuccess({ added }: Props) {
{addedAccounts.filter(isIdentityOfCredential(identity)).map((cred) => (
-
{displaySplitAddress(cred.address)}
+
{displayNameOrSplitAddress(cred)}
{displayAsCcd(
added.accounts.find((pair) => pair.address === cred.address)?.balance ||
diff --git a/packages/browser-wallet/src/popup/pages/Web3ProofRequest/AccountStatement.tsx b/packages/browser-wallet/src/popup/pages/Web3ProofRequest/AccountStatement.tsx
index 8e7e53f00..d20fafcdb 100644
--- a/packages/browser-wallet/src/popup/pages/Web3ProofRequest/AccountStatement.tsx
+++ b/packages/browser-wallet/src/popup/pages/Web3ProofRequest/AccountStatement.tsx
@@ -6,7 +6,7 @@ import {
RevealStatementV2,
StatementTypes,
} from '@concordium/web-sdk';
-import { displaySplitAddress, useIdentityName, useIdentityOf } from '@popup/shared/utils/account-helpers';
+import { displayNameOrSplitAddress, useIdentityName, useIdentityOf } from '@popup/shared/utils/account-helpers';
import { useDisplayAttributeValue } from '@popup/shared/utils/identity-helpers';
import { ConfirmedIdentity, WalletCredential } from '@shared/storage/types';
import { getCredentialIdFromSubjectDID } from '@shared/utils/verifiable-credential-helpers';
@@ -29,7 +29,7 @@ export function DisplayAccount({ option }: { option: WalletCredential }) {
return (
diff --git a/packages/browser-wallet/src/popup/shared/Form/InlineInput/InlineInput.tsx b/packages/browser-wallet/src/popup/shared/Form/InlineInput/InlineInput.tsx
index 9cb831022..b2b2981bb 100644
--- a/packages/browser-wallet/src/popup/shared/Form/InlineInput/InlineInput.tsx
+++ b/packages/browser-wallet/src/popup/shared/Form/InlineInput/InlineInput.tsx
@@ -5,11 +5,15 @@ import { scaleFieldWidth } from '../../utils/html-helpers';
import { CommonFieldProps, RequiredControlledFieldProps } from '../common/types';
import { makeControlled } from '../common/utils';
-type Props = Pick, 'type' | 'className' | 'autoFocus'> &
+type Props = Pick<
+ InputHTMLAttributes,
+ 'type' | 'className' | 'autoFocus' | 'onKeyUp' | 'onMouseUp' | 'maxLength'
+> &
RequiredControlledFieldProps &
CommonFieldProps & {
fallbackValue?: string;
fallbackOnError?: boolean;
+ fixedWidth?: number;
};
export function InlineInput({
@@ -20,6 +24,7 @@ export function InlineInput({
fallbackOnError = false,
onChange = noOp,
onBlur = noOp,
+ fixedWidth,
error,
...props
}: Props) {
@@ -27,7 +32,9 @@ export function InlineInput({
const [innerValue, setInnerValue] = useState(value ?? fallbackValue);
useLayoutEffect(() => {
- scaleFieldWidth(ref.current);
+ if (!fixedWidth) {
+ scaleFieldWidth(ref.current);
+ }
}, [innerValue]);
useUpdateEffect(() => {
@@ -53,7 +60,7 @@ export function InlineInput({
autoComplete="off"
spellCheck="false"
{...props}
- style={{ width: 6 }} // To prevent initial UI jitter.
+ style={{ width: fixedWidth || 6 }} // To prevent initial UI jitter.
/>
);
}
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 cb7e49383..6d0564e0b 100644
--- a/packages/browser-wallet/src/popup/shared/utils/account-helpers.ts
+++ b/packages/browser-wallet/src/popup/shared/utils/account-helpers.ts
@@ -1,6 +1,6 @@
-import { credentialsAtom, selectedAccountAtom } from '@popup/store/account';
+import { credentialsAtom, selectedAccountAtom, writableCredentialAtom } from '@popup/store/account';
import { networkConfigurationAtom } from '@popup/store/settings';
-import { useAtomValue } from 'jotai';
+import { useAtom, useAtomValue } from 'jotai';
import { useEffect, useMemo, useState } from 'react';
import { identitiesAtom } from '@popup/store/identity';
import { AccountInfo, ConcordiumHdWallet } from '@concordium/web-sdk';
@@ -10,7 +10,10 @@ import { isIdentityOfCredential } from '@shared/utils/identity-helpers';
import { getNextUnused } from '@shared/utils/number-helpers';
import { useDecryptedSeedPhrase } from './seed-phrase-helpers';
-export const displaySplitAddress = (address: string) => `${address.slice(0, 4)}...${address.slice(address.length - 4)}`;
+export const displayNameOrSplitAddress = (account: WalletCredential | undefined) => {
+ const { credName, address } = account || { address: '' };
+ return credName || `${address.slice(0, 4)}...${address.slice(address.length - 4)}`;
+};
export function useIdentityOf(cred?: WalletCredential) {
const identities = useAtomValue(identitiesAtom);
@@ -40,6 +43,16 @@ export function useIdentityName(credential: WalletCredential, fallback?: string)
return identityName;
}
+export function useWritableSelectedAccount(accountAddress: string) {
+ const [accounts, setAccounts] = useAtom(writableCredentialAtom);
+ const setAccount = (update: WalletCredential) =>
+ setAccounts(
+ accounts.map((account) => (account.address === accountAddress ? { ...account, ...update } : account))
+ );
+
+ return setAccount;
+}
+
export function useCredential(accountAddress?: string) {
const credentials = useAtomValue(credentialsAtom);
diff --git a/packages/browser-wallet/src/popup/store/account.ts b/packages/browser-wallet/src/popup/store/account.ts
index aa21acf2b..f3cfcf273 100644
--- a/packages/browser-wallet/src/popup/store/account.ts
+++ b/packages/browser-wallet/src/popup/store/account.ts
@@ -13,6 +13,13 @@ export const credentialsAtomWithLoading = atomWithChromeStorage v.value);
+export const writableCredentialAtom = atom(
+ (get) => get(credentialsAtom),
+ async (_, set, update) => {
+ await set(credentialsAtomWithLoading, update);
+ }
+);
+
export const storedConnectedSitesAtom = atomWithChromeStorage>(
ChromeStorageKey.ConnectedSites,
{},
@@ -34,6 +41,12 @@ export const selectedAccountAtom = atom((get) => {
+ const selectedAccount = get(selectedAccountAtom);
+ const credentials = get(credentialsAtom);
+ return credentials.find((cred) => cred.address === selectedAccount);
+});
+
export const accountsAtom = selectAtom(credentialsAtom, (cs) => cs.map((c) => c.address));
export const accountsPerIdentityAtom = selectAtom(credentialsAtom, (cs) => {
diff --git a/packages/browser-wallet/src/shared/storage/types.ts b/packages/browser-wallet/src/shared/storage/types.ts
index 0c58130f1..631c2942e 100644
--- a/packages/browser-wallet/src/shared/storage/types.ts
+++ b/packages/browser-wallet/src/shared/storage/types.ts
@@ -147,6 +147,7 @@ export interface BaseCredential {
address: string;
credId: string;
credNumber: number;
+ credName: string;
status: CreationStatus;
identityIndex: number;
providerIndex: number;