diff --git a/packages/app-staking/src/Overview/CurrentList.tsx b/packages/app-staking/src/Overview/CurrentList.tsx index 1ce9c110ee..e59a853275 100644 --- a/packages/app-staking/src/Overview/CurrentList.tsx +++ b/packages/app-staking/src/Overview/CurrentList.tsx @@ -3,13 +3,16 @@ // of the ISC license. See the LICENSE file for details. import { I18nProps } from '@polkadot/ui-app/types'; +import { RxBalanceMap } from '@polkadot/ui-react-rx/ApiObservable/types'; import React from 'react'; +import AddressMini from '@polkadot/ui-app/AddressMini'; import AddressRow from '@polkadot/ui-app/AddressRow'; import translate from '../translate'; type Props = I18nProps & { + balances: RxBalanceMap, current: Array next: Array }; @@ -36,28 +39,15 @@ class CurrentList extends React.PureComponent { } return [ -

+

{t('list.current', { - defaultValue: 'Current: {{count}}', + defaultValue: 'validators', replace: { count: current.length } })} -

, - ...current.map((account) => { - return ( - - ); - }) + , + ...this.renderRow(current, t('name.validator', { defaultValue: 'validator' })) ]; } @@ -69,30 +59,40 @@ class CurrentList extends React.PureComponent { } return [ -

+

{t('list.next', { - defaultValue: 'Next up: {{count}}', - replace: { - count: next.length - } + defaultValue: 'next up' })} -

, - ...next.map((account) => { - return ( - - ); - }) + , + ...this.renderRow(next, t('name.intention', { defaultValue: 'intention' })) ]; } + + private renderRow (addresses: Array, defaultName: string) { + const { balances } = this.props; + + return addresses.map((address) => { + const nominators = (balances[address] || {}).nominators || []; + + return ( +
+ + {nominators.map(({ address }) => + + )} + +
+ ); + }); + } } export default translate(CurrentList); diff --git a/packages/app-staking/src/Overview/index.css b/packages/app-staking/src/Overview/index.css index c532b1f8a2..c921b22298 100644 --- a/packages/app-staking/src/Overview/index.css +++ b/packages/app-staking/src/Overview/index.css @@ -15,9 +15,7 @@ .validator--row { display: flex; flex-direction: row; - border-bottom: 1px solid #ccc; - margin-bottom: 5px; - padding-bottom: 2px; + padding-bottom: 1.5em; } .validator--Account-address { @@ -31,7 +29,7 @@ .validator--Account-validating { opacity: 0.25 !important; - padding-top: 8px; + padding-top: 0.5em; vertical-align: top !important; } @@ -51,41 +49,16 @@ text-align: right; } -.validator--ValidatorsList{ - padding: 10px; +.validator--IntensionsList, +.validator--ValidatorsList { display: flex; } -.validator--IntensionsList{ - padding: 10px; -} - -.validator--current,.validator--next{ - margin: 20px; +.validator--current, +.validator--next { + margin: 1em; flex: 1; } -.app-validators--Query .app-validators--actionrow-value { - padding: 0 0.25rem; -} - -.app-validators--Query .ui--IdentityIcon { - margin: -10px 0; - vertical-align: middle; -} - -.app-validators--actionrow { - display: flex; -} - -.app-validators--actionrow-value { - flex: 1; - min-width: 0; -} - -.app-validators--actionrow-button { - flex: 0; - padding: 0 0.25rem; -} .validator--Account-address.isMine { color: #47b547; @@ -104,7 +77,3 @@ position: absolute; font-size: 1.5em !important; } - -.ui--AddressRow-icon { - margin: 12px; -} diff --git a/packages/app-staking/src/Overview/index.tsx b/packages/app-staking/src/Overview/index.tsx index 6746482437..d85c5d09c1 100644 --- a/packages/app-staking/src/Overview/index.tsx +++ b/packages/app-staking/src/Overview/index.tsx @@ -39,6 +39,7 @@ export default class Overview extends React.PureComponent { validators={validators} /> diff --git a/packages/ui-app/src/AddressRow.tsx b/packages/ui-app/src/AddressRow.tsx index 02bffc6637..b15236d887 100644 --- a/packages/ui-app/src/AddressRow.tsx +++ b/packages/ui-app/src/AddressRow.tsx @@ -30,9 +30,9 @@ class AddressRow extends AddressSummary { {this.renderAddress()} {this.renderBalance()} {this.renderNonce()} + {this.renderChildren()} - {this.renderChildren()} ); }