diff --git a/packages/app-explorer/src/SummarySession.tsx b/packages/app-explorer/src/SummarySession.tsx index 6d6d1b7f91..2565192da9 100644 --- a/packages/app-explorer/src/SummarySession.tsx +++ b/packages/app-explorer/src/SummarySession.tsx @@ -18,34 +18,29 @@ type Props = I18nProps & { sessionBlockProgress?: BN, sessionBrokenValue?: BN, sessionBrokenPercentLate?: BN, - sessionLength?: BN + sessionLength?: BN, + withBroken?: boolean, + withEra?: boolean, + withSession?: boolean }; class SummarySession extends React.PureComponent { render () { - const { eraBlockLength, eraBlockProgress, sessionBlockProgress, sessionBrokenValue, sessionBrokenPercentLate, sessionLength, t } = this.props; - return [ - , - , + this.renderSession(), + this.renderEra(), + this.renderBroken() + ]; + } + + private renderBroken () { + const { sessionBrokenValue, sessionBrokenPercentLate, t, withBroken = true } = this.props; + + if (!withBroken) { + return null; + } + + return ( { value: sessionBrokenValue }} /> - ]; + ); + } + + private renderEra () { + const { eraBlockLength, eraBlockProgress, t, withEra = true } = this.props; + + if (!withEra) { + return null; + } + + return ( + + ); + } + + private renderSession () { + const { sessionBlockProgress, sessionLength, t, withSession = true } = this.props; + + if (!withSession) { + return null; + } + + return ( + + ); } } diff --git a/packages/app-staking/package.json b/packages/app-staking/package.json index 3231d91c46..3751ed25b1 100644 --- a/packages/app-staking/package.json +++ b/packages/app-staking/package.json @@ -11,7 +11,7 @@ "license": "ISC", "dependencies": { "@babel/runtime": "^7.0.0", - "@polkadot/app-extrinsics": "^0.20.8", + "@polkadot/app-explorer": "^0.20.8", "@polkadot/storage": "^0.28.35", "@polkadot/ui-app": "^0.20.8", "@polkadot/ui-keyring": "^0.20.8", diff --git a/packages/app-staking/src/Overview/CurrentList.tsx b/packages/app-staking/src/Overview/CurrentList.tsx index e59a853275..f9aa3d7556 100644 --- a/packages/app-staking/src/Overview/CurrentList.tsx +++ b/packages/app-staking/src/Overview/CurrentList.tsx @@ -5,6 +5,7 @@ import { I18nProps } from '@polkadot/ui-app/types'; import { RxBalanceMap } from '@polkadot/ui-react-rx/ApiObservable/types'; +import BN from 'bn.js'; import React from 'react'; import AddressMini from '@polkadot/ui-app/AddressMini'; import AddressRow from '@polkadot/ui-app/AddressRow'; @@ -34,12 +35,8 @@ class CurrentList extends React.PureComponent { private renderCurrent () { const { current, t } = this.props; - if (current.length === 0) { - return null; - } - return [ -

+

{t('list.current', { defaultValue: 'validators', replace: { @@ -47,51 +44,68 @@ class CurrentList extends React.PureComponent { } })}

, - ...this.renderRow(current, t('name.validator', { defaultValue: 'validator' })) + this.renderRow(current, t('name.validator', { defaultValue: 'validator' })) ]; } private renderNext () { const { next, t } = this.props; - if (next.length === 0) { - return null; - } - return [ -

+

{t('list.next', { defaultValue: 'next up' })}

, - ...this.renderRow(next, t('name.intention', { defaultValue: 'intention' })) + this.renderRow(next, t('name.intention', { defaultValue: 'intention' })) ]; } private renderRow (addresses: Array, defaultName: string) { + const { balances, t } = this.props; + + if (addresses.length === 0) { + return ( +
{t('list.empty', { + defaultValue: 'no addresses found' + })}
+ ); + } + + return ( +
+ {addresses.map((address) => { + const nominators = (balances[address] || {}).nominators || []; + + return ( + + {nominators.map(({ address }) => + + )} + + ); + })} +
+ ); + } + + private balanceArray (address: string): Array | undefined { const { balances } = this.props; - return addresses.map((address) => { - const nominators = (balances[address] || {}).nominators || []; - - return ( -
- - {nominators.map(({ address }) => - - )} - -
- ); - }); + return balances[address] + ? [balances[address].stakingBalance, balances[address].nominatedBalance] + : undefined; } } diff --git a/packages/app-staking/src/Overview/Summary.tsx b/packages/app-staking/src/Overview/Summary.tsx index 42808a0dfa..adfaa5a38a 100644 --- a/packages/app-staking/src/Overview/Summary.tsx +++ b/packages/app-staking/src/Overview/Summary.tsx @@ -9,6 +9,9 @@ import BN from 'bn.js'; import React from 'react'; import CardSummary from '@polkadot/ui-app/CardSummary'; import numberFormat from '@polkadot/ui-react-rx/util/numberFormat'; +import SummarySession from '@polkadot/app-explorer/SummarySession'; +import withObservable from '@polkadot/ui-react-rx/with/observable'; +import withMulti from '@polkadot/ui-react-rx/with/multi'; import translate from '../translate'; @@ -16,12 +19,13 @@ type Props = I18nProps & { balances: RxBalanceMap, intentions: Array, lastLengthChange?: BN, + validatorCount?: BN, validators: Array }; class Summary extends React.PureComponent { render () { - const { className, intentions, style, t, validators } = this.props; + const { className, intentions, style, t, validatorCount, validators } = this.props; return ( { - {validators.length} + {validators.length}/{validatorCount ? validatorCount.toString() : '-'} { {intentions.length} +
+ +
{ } } -export default translate(Summary); +export default withMulti( + translate(Summary), + withObservable('validatorCount') +); diff --git a/packages/app-staking/src/Overview/index.css b/packages/app-staking/src/Overview/index.css index c921b22298..e49f7d97cd 100644 --- a/packages/app-staking/src/Overview/index.css +++ b/packages/app-staking/src/Overview/index.css @@ -58,6 +58,10 @@ .validator--next { margin: 1em; flex: 1; + + .ui--AddressRow + .ui--AddressRow { + margin-top: 1em; + } } .validator--Account-address.isMine { diff --git a/packages/app-staking/src/index.css b/packages/app-staking/src/index.css index 121268bb0d..904db9bc35 100644 --- a/packages/app-staking/src/index.css +++ b/packages/app-staking/src/index.css @@ -4,6 +4,10 @@ .staking--App { padding: 1em 2rem; + + .rx--updated { + background: transparent !important; + } } .staking--App-navigation.ui--Button-Group { diff --git a/packages/ui-app/src/Balance.tsx b/packages/ui-app/src/Balance.tsx index 45c2f77624..8e464f5240 100644 --- a/packages/ui-app/src/Balance.tsx +++ b/packages/ui-app/src/Balance.tsx @@ -45,7 +45,9 @@ export default class Balance extends React.PureComponent { if (Array.isArray(balance)) { const totals = balance - .filter((value, index) => index !== 0) + .filter((value, index) => + index !== 0 + ) .map(numberFormat); value = `${value} (${totals.length === 1 ? '+' : ''}${totals.join(', ')})`; diff --git a/packages/ui-app/src/styles/components.css b/packages/ui-app/src/styles/components.css index f0e710dde7..a1d8297f0c 100644 --- a/packages/ui-app/src/styles/components.css +++ b/packages/ui-app/src/styles/components.css @@ -40,7 +40,7 @@ header .ui--Button-Group { .ui--AddressMini.padded { display: inline-block; - padding: 0.25rem; + padding: 0.25rem 0 0 0; } .ui--AddressMini-info div { @@ -93,6 +93,10 @@ header .ui--Button-Group { vertical-align: top; } +.ui--AddressSummary-children { + padding-top: 0.5rem; +} + .ui--AddressSummary .rx--updated { background: transparent !important; } @@ -123,7 +127,7 @@ header .ui--Button-Group { } .ui--AddressSummary-data * { - margin: 0 0.25rem !important; + /* margin: 0 0.25rem !important; */ vertical-align: middle; } diff --git a/packages/ui-react-rx/src/ApiObservable/index.ts b/packages/ui-react-rx/src/ApiObservable/index.ts index 74afdf5844..d3579ad345 100644 --- a/packages/ui-react-rx/src/ApiObservable/index.ts +++ b/packages/ui-react-rx/src/ApiObservable/index.ts @@ -509,6 +509,10 @@ export default class ObservableApi implements ObservableApiInterface { return this.rawStorage(storage.system.public.accountIndexOf, address); } + validatorCount = (): Observable => { + return this.rawStorage(storage.staking.public.validatorCount); + } + validatingBalance = (address: string): Observable => { return this.combine( [ diff --git a/packages/ui-react-rx/src/ApiObservable/types.d.ts b/packages/ui-react-rx/src/ApiObservable/types.d.ts index 5e805687c3..2db4395b55 100644 --- a/packages/ui-react-rx/src/ApiObservable/types.d.ts +++ b/packages/ui-react-rx/src/ApiObservable/types.d.ts @@ -94,6 +94,7 @@ export interface ObservableApiInterface { systemAccountIndexOf: (address: string) => Observable, timestampBlockPeriod: () => Observable, timestampNow: () => Observable, + validatorCount: () => Observable, validatingBalance: (address: string) => Observable, validatingBalances: (...addresses: Array) => Observable, votingBalance: (address: string) => Observable,