-
Notifications
You must be signed in to change notification settings - Fork 1.5k
/
Accounts.tsx
93 lines (77 loc) · 2.7 KB
/
Accounts.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
// Copyright 2017-2019 @polkadot/app-staking authors & contributors
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
import { I18nProps } from '@polkadot/ui-app/types';
import { AccountFilter, ComponentProps } from './types';
import React from 'react';
import { CardGrid, Dropdown, FilterOverlay } from '@polkadot/ui-app';
import { getAddressName } from '@polkadot/ui-app/util';
import keyring from '@polkadot/ui-keyring';
import createOption from '@polkadot/ui-keyring/options/item';
import Account from './Account';
import translate from './translate';
import { KeyringSectionOption } from '@polkadot/ui-keyring/options/types';
type Props = I18nProps & ComponentProps;
type State = {
filter: AccountFilter,
filterOptions: Array<{ text: React.ReactNode, value: AccountFilter }>
};
class Accounts extends React.PureComponent<Props, State> {
state: State;
constructor (props: Props) {
super(props);
const { t } = props;
this.state = {
filter: 'all',
filterOptions: [
{ text: t('Show all accounts'), value: 'all' },
{ text: t('Show all unbonded'), value: 'unbonded' },
{ text: t('Show only stashes'), value: 'stash' },
{ text: t('Show only controllers'), value: 'controller' }
]
};
}
render () {
const { balances, recentlyOffline, t, validators } = this.props;
const { filter, filterOptions } = this.state;
const accounts = keyring.getAccounts();
const stashOptions = this.getStashOptions();
return (
<CardGrid>
<FilterOverlay>
<Dropdown
help={t('Select which types of accounts to display, either all, only the stash accounts or the controller accounts.')}
label={t('filter')}
onChange={this.onChangeFilter}
options={filterOptions}
value={filter}
/>
</FilterOverlay>
{accounts.map((account) => {
const address = account.address();
return (
<Account
accountId={address}
balances={balances}
filter={filter}
isValidator={validators.includes(address)}
key={address}
recentlyOffline={recentlyOffline}
stashOptions={stashOptions}
/>
);
})}
</CardGrid>
);
}
private getStashOptions (): Array<KeyringSectionOption> {
const { stashes } = this.props;
return stashes.map((stashId) =>
createOption(stashId, getAddressName(stashId, 'account'))
);
}
private onChangeFilter = (filter: AccountFilter): void => {
this.setState({ filter });
}
}
export default translate(Accounts);