Close on double-click for Signer Account selection (#4540)

* Close on double-click + Optimistic UX (#4525)

* PR Gumble + Tests
This commit is contained in:
Nicolas Gotchac 2017-02-14 22:47:34 +01:00 committed by Gav Wood
parent 5369a129ae
commit ac27806a43
3 changed files with 41 additions and 9 deletions

View File

@ -24,7 +24,9 @@ export default class AccountStore {
constructor (api) {
this._api = api;
this.loadAccounts();
this.loadDefaultAccount()
.then(() => this.loadAccounts());
this.subscribeDefaultAccount();
}
@ -33,7 +35,15 @@ export default class AccountStore {
}
@action setDefaultAccount = (defaultAccount) => {
transaction(() => {
this.accounts = this.accounts.map((account) => {
account.default = account.address === defaultAccount;
return account;
});
this.defaultAccount = defaultAccount;
});
}
@action setLoading = (isLoading) => {
@ -47,6 +57,9 @@ export default class AccountStore {
.map((account) => account.address)
);
// Have optimistic UI: https://www.smashingmagazine.com/2016/11/true-lies-of-optimistic-user-interfaces/?utm_source=codropscollective
this.setDefaultAccount(address);
return this._api.parity
.setNewDappsWhitelist(accounts)
.catch((error) => {
@ -54,6 +67,12 @@ export default class AccountStore {
});
}
loadDefaultAccount () {
return this._api.parity
.defaultAccount()
.then((address) => this.setDefaultAccount(address));
}
loadAccounts () {
this.setLoading(true);

View File

@ -89,6 +89,16 @@ describe('views/ParityBar/AccountStore', () => {
});
});
describe('loadDefaultAccount', () => {
beforeEach(() => {
return store.loadDefaultAccount();
});
it('load and set the default account', () => {
expect(store.defaultAccount).to.equal(ACCOUNT_DEFAULT);
});
});
describe('makeDefaultAccount', () => {
beforeEach(() => {
return store.makeDefaultAccount(ACCOUNT_NEW);

View File

@ -343,15 +343,22 @@ class ParityBar extends Component {
}
renderAccount = (account) => {
const onMakeDefault = () => {
const makeDefaultAccount = () => {
return this.accountStore
.makeDefaultAccount(account.address)
.then(() => this.accountStore.loadAccounts());
};
const onDoubleClick = () => {
this.toggleAccountsDisplay();
this.accountStore.makeDefaultAccount(account.address);
makeDefaultAccount();
};
return (
<div
className={ styles.account }
onClick={ onMakeDefault }
onClick={ makeDefaultAccount }
onDoubleClick={ onDoubleClick }
>
<AccountCard
account={ account }
@ -578,10 +585,6 @@ class ParityBar extends Component {
const { opened } = this.state;
this.setOpened(!opened, DISPLAY_ACCOUNTS);
if (!opened) {
this.accountStore.loadAccounts();
}
}
toggleSignerDisplay = () => {