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) { constructor (api) {
this._api = api; this._api = api;
this.loadAccounts(); this.loadDefaultAccount()
.then(() => this.loadAccounts());
this.subscribeDefaultAccount(); this.subscribeDefaultAccount();
} }
@ -33,7 +35,15 @@ export default class AccountStore {
} }
@action setDefaultAccount = (defaultAccount) => { @action setDefaultAccount = (defaultAccount) => {
transaction(() => {
this.accounts = this.accounts.map((account) => {
account.default = account.address === defaultAccount;
return account;
});
this.defaultAccount = defaultAccount; this.defaultAccount = defaultAccount;
});
} }
@action setLoading = (isLoading) => { @action setLoading = (isLoading) => {
@ -47,6 +57,9 @@ export default class AccountStore {
.map((account) => account.address) .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 return this._api.parity
.setNewDappsWhitelist(accounts) .setNewDappsWhitelist(accounts)
.catch((error) => { .catch((error) => {
@ -54,6 +67,12 @@ export default class AccountStore {
}); });
} }
loadDefaultAccount () {
return this._api.parity
.defaultAccount()
.then((address) => this.setDefaultAccount(address));
}
loadAccounts () { loadAccounts () {
this.setLoading(true); 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', () => { describe('makeDefaultAccount', () => {
beforeEach(() => { beforeEach(() => {
return store.makeDefaultAccount(ACCOUNT_NEW); return store.makeDefaultAccount(ACCOUNT_NEW);

View File

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