Skip to content

Commit

Permalink
Merge pull request #4022 from LiskHQ/4011-fix-hw-account-titles
Browse files Browse the repository at this point in the history
  • Loading branch information
@reyraa
reyraa authored Dec 17, 2021
2 parents 2bacce1 + d7f9a12 commit 332c3f2
Show file tree
Hide file tree
Showing 3 changed files with 100 additions and 133 deletions.
164 changes: 85 additions & 79 deletions src/components/screens/hwWalletLogin/selectAccount/accountCard.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react';
import React, { useState, useEffect } from 'react';
import { withTranslation } from 'react-i18next';
import { tokenMap } from '@constants';
import { truncateAddress } from '@utils/account';
Expand All @@ -11,98 +11,104 @@ import styles from './selectAccount.css';

const AccountCard = ({
account,
accountOnEditMode,
index,
onChangeAccountTitle,
onEditAccount,
onSaveNameAccounts,
onSelectAccount,
onInputBlur,
t,
}) => (
<div
id={account.summary?.address}
className={`${styles.account} hw-account select-account`}
onClick={() => onSelectAccount(account, index)}
>
<div className={styles.content}>
<div>
<AccountVisual
address={account.summary?.address || ''}
size={40}
/>
</div>
<div>
<header className={styles.header}>
{ accountOnEditMode === account.summary?.address
? (
<div className={styles.editAccountTitle}>
<Input
value={account.name}
size="s"
onClick={e => e.stopPropagation()}
onChange={
event => onChangeAccountTitle(event.target.value, account.summary?.address)
}
onBlur={onInputBlur}
className="account-name"
placeholder={t('Account name')}
autoFocus
/>
<TertiaryButton
className={`${styles.saveBtn} save-account`}
onClick={e => {
e.stopPropagation();
onSaveNameAccounts();
}}
>
{t('Save')}
</TertiaryButton>
</div>
)
: (
<>
<p className={`${styles.accountTitle} account-name`}>
{account.name === null ? t('Unnamed account') : account.name}
<Icon
className={`${styles.editBtn} edit-account`}
}) => {
const [inputTitle, setInputTitle] = useState(account.name);
const [accountOnEditMode, setAccountOnEditMode] = useState(false);

useEffect(() => {
if (!accountOnEditMode) {
setInputTitle(account.name);
}
}, [accountOnEditMode]);

return (
<div
id={account.summary?.address}
className={`${styles.account} hw-account select-account`}
onClick={() => onSelectAccount(account, index)}
onMouseLeave={() => setAccountOnEditMode(false)}
>
<div className={styles.content}>
<div>
<AccountVisual
address={account.summary?.address || ''}
size={40}
/>
</div>
<div>
<header className={styles.header}>
{ accountOnEditMode
? (
<div className={styles.editAccountTitle}>
<Input
value={inputTitle}
size="s"
onClick={e => e.stopPropagation()}
onChange={e => setInputTitle(e.target.value)}
className="account-name"
placeholder={t('Account name')}
autoFocus
/>
<TertiaryButton
className={`${styles.saveBtn} save-account`}
onClick={e => {
e.stopPropagation();
onEditAccount(account.summary?.address);
onSaveNameAccounts(inputTitle, account.summary?.address);
setAccountOnEditMode(false);
}}
name="edit"
/>
>
{t('Save')}
</TertiaryButton>
</div>
)
: (
<>
<p className={`${styles.accountTitle} account-name`}>
{account.name === null ? t('Unnamed account') : account.name}
<Icon
className={`${styles.editBtn} edit-account`}
onClick={e => {
e.stopPropagation();
setAccountOnEditMode(true);
}}
name="edit"
/>
</p>
<p className={`${styles.accountAddress} row-address`}>{truncateAddress(account.summary?.address)}</p>
</>
)}
</header>
{account.legacy ? (
<>
<div className={`${styles.accountBalance} ${styles.legacyBalance} row-balance`}>
<p>{t('Balance:')}</p>
<p>
<LiskAmount val={account.summary?.balance} token={tokenMap.LSK.key} />
</p>
<p className={`${styles.accountAddress} row-address`}>{truncateAddress(account.summary?.address)}</p>
</>
)}
</header>
{account.legacy ? (
<>
<div className={`${styles.accountBalance} ${styles.legacyBalance} row-balance`}>
</div>
<div className={`${styles.accountBalance} ${styles.legacyBalance} row-balance`}>
<p>{t('Reclaimable balance:')}</p>
<p>
<LiskAmount val={account.legacy.balance} token={tokenMap.LSK.key} />
</p>
</div>
</>
) : (
<div className={`${styles.accountBalance} row-balance`}>
<p>{t('Balance:')}</p>
<p>
<LiskAmount val={account.summary?.balance} token={tokenMap.LSK.key} />
</p>
</div>
<div className={`${styles.accountBalance} ${styles.legacyBalance} row-balance`}>
<p>{t('Reclaimable balance:')}</p>
<p>
<LiskAmount val={account.legacy.balance} token={tokenMap.LSK.key} />
</p>
</div>
</>
) : (
<div className={`${styles.accountBalance} row-balance`}>
<p>{t('Balance:')}</p>
<p>
<LiskAmount val={account.summary?.balance} token={tokenMap.LSK.key} />
</p>
</div>
)}
)}
</div>
</div>
</div>
</div>
);
);
};

export default withTranslation()(AccountCard);
19 changes: 8 additions & 11 deletions src/components/screens/hwWalletLogin/selectAccount/accountCard.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,10 @@ describe('Account Card', () => {
name: 'Lisk',
},
},
accountOnEditMode: '',
t: v => v,
onChangeAccountTitle: jest.fn(),
onEditAccount: jest.fn(),
index: 1,
onSaveNameAccounts: jest.fn(),
onSelectAccount: jest.fn(),
t: v => v,
};
});

Expand All @@ -29,26 +27,25 @@ describe('Account Card', () => {
expect(wrapper).toContainMatchingElement('.hw-account');
});

it('Should call onEditAccount function', () => {
it('Should call props.onSaveNameAccounts function', () => {
wrapper = mount(<AccountCard {...props} />);
wrapper.simulate('mouseover');
expect(wrapper).toContainMatchingElement('.edit-account');
expect(wrapper).not.toContainMatchingElement('.save-account');

wrapper.find('.edit-account').at(0).simulate('click');
expect(props.onEditAccount).toBeCalled();
wrapper.setProps({ accountOnEditMode: props.account.summary.address });
wrapper.update();
expect(wrapper).not.toContainMatchingElement('.edit-account');
expect(wrapper).toContainMatchingElement('.save-account');

wrapper.find('.account-name input').simulate('change', { target: { value: 'Lisk Account' } });
expect(props.onChangeAccountTitle).toBeCalled();
wrapper.find('.save-account').at(0).simulate('click');
expect(props.onSaveNameAccounts).toBeCalled();
expect(props.onSaveNameAccounts).toBeCalledWith('Lisk Account', props.account.summary.address);
});

it('Should call onSelectAccount function for login', () => {
wrapper = mount(<AccountCard {...props} />);
expect(wrapper).toContainMatchingElement('.select-account');
wrapper.find('.select-account').at(0).simulate('click');
expect(props.onSelectAccount).toBeCalled();
expect(props.onSelectAccount).toBeCalledWith(props.account, props.index);
});
});
50 changes: 7 additions & 43 deletions src/components/screens/hwWalletLogin/selectAccount/selectAccount.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,21 +11,16 @@ import styles from './selectAccount.css';

const Tab = ({
tabName, tabId, accountsList,
accountOnEditMode, onChangeAccountTitle, onEditAccount,
onSaveNameAccounts, onSelectAccount, onInputBlur,
onSaveNameAccounts, onSelectAccount,
}) => (
<div tabName={tabName} tabId={tabId} className={`${styles.deviceContainer} ${`tab-${tabId}`} hw-container`}>
{accountsList.map((account, index) => (
<AccountCard
key={`hw-account-tabId-${index}`}
account={account}
index={index}
accountOnEditMode={accountOnEditMode}
onChangeAccountTitle={onChangeAccountTitle}
onEditAccount={onEditAccount}
onSaveNameAccounts={onSaveNameAccounts}
onSelectAccount={onSelectAccount}
onInputBlur={onInputBlur}
/>
))}
</div>
Expand All @@ -35,14 +30,8 @@ class SelectAccount extends React.Component {
constructor(props) {
super(props);

this.state = {
accountOnEditMode: '',
hwAccounts: [],
};
this.state = { hwAccounts: [] };

this.onEditAccount = this.onEditAccount.bind(this);
this.onChangeAccountTitle = this.onChangeAccountTitle.bind(this);
this.onAccountCardBlur = this.onAccountCardBlur.bind(this);
this.onSaveNameAccounts = this.onSaveNameAccounts.bind(this);
this.onAddNewAccount = this.onAddNewAccount.bind(this);
this.onSelectAccount = this.onSelectAccount.bind(this);
Expand Down Expand Up @@ -89,35 +78,22 @@ class SelectAccount extends React.Component {
}
}

onEditAccount(address) {
this.onSaveNameAccounts();
this.setState({ accountOnEditMode: address });
}

onChangeAccountTitle(value, address) {
onSaveNameAccounts(name, address) {
const newAccounts = this.state.hwAccounts.map((account) => {
if (account.summary.address === address) {
account.name = value;
account.name = name;
}
return account;
});
this.setState({ hwAccounts: newAccounts });
}

onAccountCardBlur() {
this.setState({ accountOnEditMode: '' });
}

onSaveNameAccounts() {
const accountNames = this.state.hwAccounts.map(account =>
const accountNames = newAccounts.map(account =>
({ address: account.summary.address, name: account.name }));
this.props.settingsUpdated({
hardwareAccounts: {
...this.props.settings.hardwareAccounts,
[this.props.device.model]: accountNames,
},
});
this.setState({ accountOnEditMode: '' });
this.setState({ hwAccounts: newAccounts });
}

onAddNewAccount() {
Expand Down Expand Up @@ -158,7 +134,7 @@ class SelectAccount extends React.Component {

render() {
const { t, device } = this.props;
const { accountOnEditMode, hwAccounts } = this.state;
const { hwAccounts } = this.state;

const {
nonEmptyAccounts,
Expand Down Expand Up @@ -197,34 +173,22 @@ class SelectAccount extends React.Component {
tabName={t('Active')}
tabId="active"
accountsList={nonEmptyAccounts}
accountOnEditMode={accountOnEditMode}
onChangeAccountTitle={this.onChangeAccountTitle}
onEditAccount={this.onEditAccount}
onSaveNameAccounts={this.onSaveNameAccounts}
onSelectAccount={this.onSelectAccount}
onInputBlur={this.onAccountCardBlur}
/>
<Tab
tabName={t('Empty')}
tabId="empty"
accountsList={emptyAccounts}
accountOnEditMode={accountOnEditMode}
onChangeAccountTitle={this.onChangeAccountTitle}
onEditAccount={this.onEditAccount}
onSaveNameAccounts={this.onSaveNameAccounts}
onSelectAccount={this.onSelectAccount}
onInputBlur={this.onAccountCardBlur}
/>
<Tab
tabName={t('Pending reclaim ({{numOfAccounts}})', { numOfAccounts: reclaimAccounts.length })}
tabId="reclaim"
accountsList={reclaimAccounts}
accountOnEditMode={accountOnEditMode}
onChangeAccountTitle={this.onChangeAccountTitle}
onEditAccount={this.onEditAccount}
onSaveNameAccounts={this.onSaveNameAccounts}
onSelectAccount={this.onSelectAccount}
onInputBlur={this.onAccountCardBlur}
/>
</TabsContainer>
)
Expand Down

0 comments on commit 332c3f2

Please sign in to comment.