From 230938b6b7fea2f586b19916d727998e65dfbbd4 Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Sat, 5 Sep 2020 11:28:56 +0200 Subject: [PATCH] Align slashing layout with the rest (#3614) * Align slashing layout with the rest * Adjust * Adjust banners * Extra... --- .../page-accounts/src/Accounts/Banner.tsx | 2 +- packages/page-accounts/src/Accounts/index.tsx | 4 +- packages/page-accounts/src/Vanity/index.tsx | 2 +- packages/page-staking/src/Actions/index.tsx | 2 +- packages/page-staking/src/ElectionBanner.tsx | 2 +- packages/page-staking/src/Payouts/index.tsx | 25 +++--- packages/page-staking/src/Slashes/Era.tsx | 84 ++++++++----------- packages/page-staking/src/Slashes/Summary.tsx | 67 +++++++-------- packages/page-staking/src/Slashes/index.tsx | 35 +++++--- packages/page-staking/src/Targets/index.tsx | 2 +- packages/react-components/src/CardSummary.tsx | 2 +- packages/react-components/src/SummaryBox.tsx | 14 ++-- .../src/ToggleGroup.tsx} | 12 +-- packages/react-components/src/index.tsx | 1 + packages/react-components/src/styles/index.ts | 4 +- 15 files changed, 125 insertions(+), 133 deletions(-) rename packages/{page-staking/src/Payouts/PayToggle.tsx => react-components/src/ToggleGroup.tsx} (83%) diff --git a/packages/page-accounts/src/Accounts/Banner.tsx b/packages/page-accounts/src/Accounts/Banner.tsx index ed88abe491..54c91179c6 100644 --- a/packages/page-accounts/src/Accounts/Banner.tsx +++ b/packages/page-accounts/src/Accounts/Banner.tsx @@ -13,7 +13,7 @@ interface Props { function Banner ({ children, className = '', type }: Props): React.ReactElement | null { return ( -
+
{children}
diff --git a/packages/page-accounts/src/Accounts/index.tsx b/packages/page-accounts/src/Accounts/index.tsx index 94c11c85de..d8621857f6 100644 --- a/packages/page-accounts/src/Accounts/index.tsx +++ b/packages/page-accounts/src/Accounts/index.tsx @@ -169,8 +169,6 @@ function Overview ({ className = '', onStatusChange }: Props): React.ReactElemen return (
- - {isCreateOpen && ( + + ("You don't have any accounts. Some features are currently hidden and will only become available once you have accounts.")} filter={filter} diff --git a/packages/page-accounts/src/Vanity/index.tsx b/packages/page-accounts/src/Vanity/index.tsx index 46abba0e22..46352bd92f 100644 --- a/packages/page-accounts/src/Vanity/index.tsx +++ b/packages/page-accounts/src/Vanity/index.tsx @@ -233,7 +233,7 @@ function VanityApp ({ className = '', onStatusChange }: Props): React.ReactEleme {matches.length !== 0 && ( <> -
{t('Ensure that you utilized the "Save" functionality before using a generated address to receive funds. Without saving the address any funds and the associated seed any funds sent to it will be lost.')}
+
{t('Ensure that you utilized the "Save" functionality before using a generated address to receive funds. Without saving the address any funds and the associated seed any funds sent to it will be lost.')}
('No matches found')} diff --git a/packages/page-staking/src/Actions/index.tsx b/packages/page-staking/src/Actions/index.tsx index 84f18d59ea..be40fdea73 100644 --- a/packages/page-staking/src/Actions/index.tsx +++ b/packages/page-staking/src/Actions/index.tsx @@ -81,7 +81,6 @@ function Actions ({ className = '', isInElection, ownStashes, targets }: Props): return (
- +
('No funds staked yet. Bond funds to validate or nominate a validator')} footer={footer} diff --git a/packages/page-staking/src/ElectionBanner.tsx b/packages/page-staking/src/ElectionBanner.tsx index 8ce78a497d..986b458f1d 100644 --- a/packages/page-staking/src/ElectionBanner.tsx +++ b/packages/page-staking/src/ElectionBanner.tsx @@ -18,7 +18,7 @@ function ElectionBanner ({ isInElection }: Props): React.ReactElement | n } return ( -
+
{t('There is currently an ongoing election for new validator candidates. As such staking operations are not permitted.')}
); diff --git a/packages/page-staking/src/Payouts/index.tsx b/packages/page-staking/src/Payouts/index.tsx index ea5bbe14ea..5fb997b130 100644 --- a/packages/page-staking/src/Payouts/index.tsx +++ b/packages/page-staking/src/Payouts/index.tsx @@ -11,7 +11,7 @@ import BN from 'bn.js'; import React, { useMemo, useRef, useState } from 'react'; import styled from 'styled-components'; import { ApiPromise } from '@polkadot/api'; -import { Button, Table } from '@polkadot/react-components'; +import { Button, Table, ToggleGroup } from '@polkadot/react-components'; import { useApi, useCall, useOwnEraRewards } from '@polkadot/react-hooks'; import { FormatBalance } from '@polkadot/react-query'; import { BN_ZERO, isFunction } from '@polkadot/util'; @@ -20,7 +20,6 @@ import ElectionBanner from '../ElectionBanner'; import { useTranslation } from '../translate'; import useStakerPayouts from './useStakerPayouts'; import PayButton from './PayButton'; -import PayToggle from './PayToggle'; import Stash from './Stash'; import Validator from './Validator'; @@ -207,24 +206,17 @@ function Payouts ({ className = '', isInElection, ownValidators }: Props): React return (
- - {api.tx.staking.payoutStakers && !isLoadingRewards && !stashes?.length && ( -
-

{t('Payouts of rewards for a validator can be initiated by any account. This means that as soon as a validator or nominator requests a payout for an era, all the nominators for that validator will be rewarded. Each user does not need to claim individually and the suggestion is that validators should claim rewards for everybody as soon as an era ends.')}

-

{t('If you have not claimed rewards straight after the end of the era, the validator is in the active set and you are seeing no rewards, this would mean that the reward payout transaction was made by another account on your behalf. Always check your favorite explorer to see any historic payouts made to your accounts.')}

-
- )} {api.tx.staking.payoutStakers && ( - - )} + + {api.tx.staking.payoutStakers && !isLoadingRewards && !stashes?.length && ( +
+

{t('Payouts of rewards for a validator can be initiated by any account. This means that as soon as a validator or nominator requests a payout for an era, all the nominators for that validator will be rewarded. Each user does not need to claim individually and the suggestion is that validators should claim rewards for everybody as soon as an era ends.')}

+

{t('If you have not claimed rewards straight after the end of the era, the validator is in the active set and you are seeing no rewards, this would mean that the reward payout transaction was made by another account on your behalf. Always check your favorite explorer to see any historic payouts made to your accounts.')}

+
+ )}
('No pending payouts for your stashes')} emptySpinner={t('Retrieving info for the selected eras, this will take some time')} diff --git a/packages/page-staking/src/Slashes/Era.tsx b/packages/page-staking/src/Slashes/Era.tsx index afb09d799c..5a58884942 100644 --- a/packages/page-staking/src/Slashes/Era.tsx +++ b/packages/page-staking/src/Slashes/Era.tsx @@ -14,6 +14,7 @@ import Row from './Row'; import Summary from './Summary'; interface Props { + buttons: React.ReactNode; councilId: string | null; councilThreshold: number; slash: SlashEra; @@ -25,7 +26,7 @@ interface Selected { txSome: SubmittableExtrinsic<'promise'> | null; } -function Slashes ({ councilId, councilThreshold, slash }: Props): React.ReactElement | null { +function Slashes ({ buttons, councilId, councilThreshold, slash }: Props): React.ReactElement | null { const { t } = useTranslation(); const { api } = useApi(); const [{ selected, txAll, txSome }, setSelected] = useState((): Selected => { @@ -35,7 +36,7 @@ function Slashes ({ councilId, councilThreshold, slash }: Props): React.ReactEle }); const headerRef = useRef<[string?, string?, number?][]>([ - [undefined, 'start', 3], + [t('era {{era}}/unapplied', { replace: { era: slash.era.toString() } }), 'start', 3], [t('reporters'), 'address'], [t('own')], [t('other')], @@ -62,52 +63,41 @@ function Slashes ({ councilId, councilThreshold, slash }: Props): React.ReactEle ); return ( -
- - {councilId && ( - - - - - )} - - - {headerRef.current.map(([label, className, colSpan = 1], index): React.ReactNode => ( - - ))} - - {slash.slashes.map((slash, index): React.ReactNode => ( - + + + {buttons} + - ))} -
- -
+ + + + {slash.slashes.map((slash, index): React.ReactNode => ( + + ))} +
+ ); } diff --git a/packages/page-staking/src/Slashes/Summary.tsx b/packages/page-staking/src/Slashes/Summary.tsx index 3af598bdd9..4c013cf170 100644 --- a/packages/page-staking/src/Slashes/Summary.tsx +++ b/packages/page-staking/src/Slashes/Summary.tsx @@ -15,11 +15,10 @@ import { formatNumber } from '@polkadot/util'; import { useTranslation } from '../translate'; interface Props { - children: React.ReactNode; slash: SlashEra; } -function Header ({ children, slash: { era, nominators, reporters, total, validators } }: Props): React.ReactElement | null { +function Header ({ slash: { era, nominators, reporters, total, validators } }: Props): React.ReactElement | null { const { t } = useTranslation(); const { api } = useApi(); const sessionInfo = useCall(api.derive.session?.progress); @@ -35,41 +34,35 @@ function Header ({ children, slash: { era, nominators, reporters, total, validat ); return ( - - - -
- ('validators')}> - {formatNumber(validators.length)} - - ('nominators')}> - {formatNumber(nominators.length)} - - ('reporters')}> - {formatNumber(reporters.length)} - -
- {blockProgress.gtn(0) && ( -
- ('defer')} - progress={{ - total: blockEnd, - value: blockProgress, - withTime: true - }} - /> -
- )} -
- ('total')}> - - -
- - {children} - - + +
+ ('era')}> + {formatNumber(era)} + + ('validators')}> + {formatNumber(validators.length)} + + ('nominators')}> + {formatNumber(nominators.length)} + + ('reporters')}> + {formatNumber(reporters.length)} + +
+ {blockProgress.gtn(0) && ( + ('defer')} + progress={{ + total: blockEnd, + value: blockProgress, + withTime: true + }} + /> + )} + ('total')}> + + + ); } diff --git a/packages/page-staking/src/Slashes/index.tsx b/packages/page-staking/src/Slashes/index.tsx index 9e8b66df17..c2771104c2 100644 --- a/packages/page-staking/src/Slashes/index.tsx +++ b/packages/page-staking/src/Slashes/index.tsx @@ -7,10 +7,11 @@ import { UnappliedSlash } from '@polkadot/types/interfaces'; import { Slash, SlashEra } from './types'; import BN from 'bn.js'; -import React, { useMemo } from 'react'; -import { Table } from '@polkadot/react-components'; +import React, { useMemo, useState } from 'react'; +import { Table, ToggleGroup } from '@polkadot/react-components'; import { useAccounts, useApi, useMembers } from '@polkadot/react-hooks'; import { getSlashThreshold } from '@polkadot/app-council/thresholds'; +import { formatNumber } from '@polkadot/util'; import { useTranslation } from '../translate'; import Era from './Era'; @@ -90,12 +91,21 @@ function Slashes ({ ownStashes = [], slashes }: Props): React.ReactElement calcSlashEras(slashes, ownStashes), [ownStashes, slashes] ); + const eraOpts = useMemo( + () => rows.map(({ era }) => ({ + text: t('era {{era}}', { replace: { era: formatNumber(era) } }), + value: era.toString() + })), + [rows, t] + ); + const councilId = useMemo( () => allAccounts.find((accountId) => members.includes(accountId)) || null, [allAccounts, members] @@ -113,16 +123,19 @@ function Slashes ({ ownStashes = [], slashes }: Props): React.ReactElement - {rows.map((slash): React.ReactNode => ( - - ))} - + } + councilId={councilId} + councilThreshold={councilThreshold} + key={rows[selectedIndex].era.toString()} + slash={rows[selectedIndex]} + /> ); } diff --git a/packages/page-staking/src/Targets/index.tsx b/packages/page-staking/src/Targets/index.tsx index 05bd2f4560..a8c1db4aa2 100644 --- a/packages/page-staking/src/Targets/index.tsx +++ b/packages/page-staking/src/Targets/index.tsx @@ -184,7 +184,6 @@ function Targets ({ className = '', isInElection, ownStashes, targets: { avgStak numValidators={validators?.length} totalStaked={totalStaked} /> -