From c9cf0581a042b8b485ea7ebf4b3a2b07e3d30dec Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Sun, 29 Mar 2020 18:44:39 +0200 Subject: [PATCH] Adjust all table layouts with headers (#2480) * Some small CSS adjustments * Adjust all table layouts with headers * Adjust... somewhat * Adjust * Ok, enough for now... * Adjust extrinsic from display * header adjustments --- packages/apps/src/Apps.tsx | 4 +- packages/apps/src/Content/index.tsx | 2 +- packages/page-accounts/src/Accounts/index.tsx | 68 ++++---- packages/page-accounts/src/Contacts/index.tsx | 66 ++++---- packages/page-claims/src/index.tsx | 2 +- packages/page-council/src/Motions/index.tsx | 47 +++--- .../page-council/src/Overview/Candidates.tsx | 86 ++++------ .../page-council/src/Overview/Members.tsx | 46 +++--- .../src/Overview/DispatchQueue.tsx | 42 ++--- .../page-democracy/src/Overview/Externals.tsx | 32 ++-- .../page-democracy/src/Overview/Proposals.tsx | 44 ++--- .../src/Overview/Referendums.tsx | 48 +++--- packages/page-explorer/src/BlockHeader.tsx | 153 ++---------------- packages/page-explorer/src/BlockHeaders.tsx | 29 ++-- .../page-explorer/src/BlockInfo/ByHash.tsx | 73 +++++---- .../page-explorer/src/BlockInfo/Events.tsx | 3 +- .../src/BlockInfo/Extrinsics.tsx | 134 +++++++-------- packages/page-explorer/src/BlockInfo/Logs.tsx | 64 ++++---- packages/page-explorer/src/Events.tsx | 75 ++++----- packages/page-explorer/src/Main.tsx | 7 +- packages/page-explorer/src/NodeInfo/Peers.tsx | 107 +++--------- packages/page-explorer/src/index.tsx | 4 +- packages/page-js/src/Playground.tsx | 2 +- packages/page-society/src/Overview/Bids.tsx | 42 ++--- .../page-society/src/Overview/Candidates.tsx | 52 +++--- .../page-society/src/Overview/Defender.tsx | 45 +++--- .../page-society/src/Overview/Members.tsx | 42 ++--- .../page-society/src/Overview/VoteDisplay.tsx | 80 ++++----- packages/page-staking/src/Actions/index.tsx | 51 +++--- .../page-staking/src/Overview/CurrentList.tsx | 53 +++--- packages/page-staking/src/Targets/index.tsx | 72 ++++----- .../page-tech-comm/src/Overview/Members.tsx | 57 +++---- .../page-tech-comm/src/Proposals/index.tsx | 45 +++--- .../page-treasury/src/Overview/Proposals.tsx | 54 +++---- packages/react-components/src/AddressMini.tsx | 2 +- .../react-components/src/Button/Group.tsx | 4 + packages/react-components/src/CardGrid.tsx | 2 +- packages/react-components/src/CardSummary.tsx | 4 +- packages/react-components/src/Table.tsx | 120 ++++++++++++-- .../react-components/src/styles/semantic.ts | 2 +- 40 files changed, 797 insertions(+), 1068 deletions(-) diff --git a/packages/apps/src/Apps.tsx b/packages/apps/src/Apps.tsx index 6f975b69c6..ef2dc4d813 100644 --- a/packages/apps/src/Apps.tsx +++ b/packages/apps/src/Apps.tsx @@ -123,13 +123,13 @@ export default React.memo(styled(Apps)` } a.apps--SideBar-Item-NavLink-active { - background: #fafafa; + background: #f2f2f2; border-radius: 0.28571429rem 0 0 0.28571429rem; // border-bottom: 2px solid transparent; color: #3f3f3f; &:hover { - background: #fafafa; + background: #f2f2f2; color: #3f3f3f; margin-right: 0; } diff --git a/packages/apps/src/Content/index.tsx b/packages/apps/src/Content/index.tsx index ec1748cda5..6384feac83 100644 --- a/packages/apps/src/Content/index.tsx +++ b/packages/apps/src/Content/index.tsx @@ -79,7 +79,7 @@ function Content ({ className }: Props): React.ReactElement { } export default React.memo(styled(Content)` - background: #fafafa; + background: #f2f2f2; display: flex; flex-direction: column; flex-grow: 1; diff --git a/packages/page-accounts/src/Accounts/index.tsx b/packages/page-accounts/src/Accounts/index.tsx index 599cf3cd79..71ec583466 100644 --- a/packages/page-accounts/src/Accounts/index.tsx +++ b/packages/page-accounts/src/Accounts/index.tsx @@ -38,7 +38,7 @@ async function queryLedger (): Promise { function Overview ({ className, onStatusChange }: Props): React.ReactElement { const { t } = useTranslation(); - const { allAccounts, hasAccounts } = useAccounts(); + const { allAccounts } = useAccounts(); const [isCreateOpen, toggleCreate] = useToggle(); const [isImportOpen, toggleImport] = useToggle(); const [isQrOpen, toggleQr] = useToggle(); @@ -116,42 +116,36 @@ function Overview ({ className, onStatusChange }: Props): React.ReactElement )} - {hasAccounts - ? ( - <> -
- -
- - - - - - - - - - {sortedAccounts.map(({ address, isFavorite }): React.ReactNode => ( - - ))} - -
 {t('transactions')}{t('balances')}{t('type')} 
- - ) - : t('no accounts yet, create or import an existing') - } + + + + + }> + + + + + + + + {sortedAccounts.map(({ address, isFavorite }): React.ReactNode => ( + + ))} + +

{t('accounts')}

{t('transactions')}{t('balances')}{t('type')} 
); } diff --git a/packages/page-accounts/src/Contacts/index.tsx b/packages/page-accounts/src/Contacts/index.tsx index 83a50d3c3f..8177447581 100644 --- a/packages/page-accounts/src/Contacts/index.tsx +++ b/packages/page-accounts/src/Contacts/index.tsx @@ -19,7 +19,7 @@ const STORE_FAVS = 'accounts:favorites'; function Overview ({ className, onStatusChange }: Props): React.ReactElement { const { t } = useTranslation(); - const { hasAddresses, allAddresses } = useAddresses(); + const { allAddresses } = useAddresses(); const [isCreateOpen, toggleCreate] = useToggle(false); const [favorites, toggleFavorite] = useFavorites(STORE_FAVS); const [sortedAddresses, setSortedAddresses] = useState([]); @@ -54,41 +54,35 @@ function Overview ({ className, onStatusChange }: Props): React.ReactElement )} - {hasAddresses - ? ( - <> -
- -
- - - - - - - - - {sortedAddresses.map(({ address, isFavorite }): React.ReactNode => ( -
- ))} - -
 {t('transactions')}{t('balances')} 
- - ) - : t('no addresses saved yet, add any existing address') - } + + + + + }> + + + + + + + {sortedAddresses.map(({ address, isFavorite }): React.ReactNode => ( +
+ ))} + +

{t('contacts')}

{t('transactions')}{t('balances')} 
); } diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx index ce9eb9652a..bed230f13b 100644 --- a/packages/page-claims/src/index.tsx +++ b/packages/page-claims/src/index.tsx @@ -43,7 +43,7 @@ const Payload = styled.pre` cursor: copy; font-family: monospace; border: 1px dashed #c2c2c2; - background: #fafafa; + background: #f2f2f2; padding: 1rem; width: 100%; margin: 1rem 0; diff --git a/packages/page-council/src/Motions/index.tsx b/packages/page-council/src/Motions/index.tsx index 4a8c77ed97..250fe63bdf 100644 --- a/packages/page-council/src/Motions/index.tsx +++ b/packages/page-council/src/Motions/index.tsx @@ -44,32 +44,27 @@ function Proposals ({ className, motions, prime }: Props): React.ReactElement - {motions?.length - ? ( - - - - - - - - - - - {motions?.map((motion: DeriveCollectiveProposal): React.ReactNode => ( - - ))} - -
 {t('threshold')}{t('voting end')}{t('aye')}{t('nay')} 
- ) - :
{t('No council motions')}
- } + + + + + + + + + + + {motions?.map((motion: DeriveCollectiveProposal): React.ReactNode => ( + + ))} + +
 {t('threshold')}{t('voting end')}{t('aye')}{t('nay')} 
); } diff --git a/packages/page-council/src/Overview/Candidates.tsx b/packages/page-council/src/Overview/Candidates.tsx index eb3dd8d8bf..21630ce13c 100644 --- a/packages/page-council/src/Overview/Candidates.tsx +++ b/packages/page-council/src/Overview/Candidates.tsx @@ -7,7 +7,7 @@ import { AccountId } from '@polkadot/types/interfaces'; import { ComponentProps } from './types'; import React from 'react'; -import { Spinner, Table } from '@polkadot/react-components'; +import { Table } from '@polkadot/react-components'; import { useTranslation } from '../translate'; import Candidate from './Candidate'; @@ -17,59 +17,43 @@ interface Props extends ComponentProps { className?: string; } -function Candidates ({ allVotes = {}, className, electionsInfo }: Props): React.ReactElement { +function Candidates ({ allVotes = {}, electionsInfo }: Props): React.ReactElement { const { t } = useTranslation(); return ( -
-

{t('runners up')}

- {electionsInfo - ? electionsInfo.runnersUp.length - ? ( - - - - - - - {electionsInfo.runnersUp.map(([accountId, balance]): React.ReactNode => ( - - ))} - -
 {t('backing')}
- ) - :
{t('No runners up found')}
- : - } -

{t('candidates')}

- {electionsInfo - ? electionsInfo.candidates.length - ? ( - - - - - - - {electionsInfo.candidates.map((accountId): React.ReactNode => ( - - ))} - -
 {t('backing')}
- ) - :
{t('No candidates found')}
- : - } -
+ <> + + + + + + + {electionsInfo?.runnersUp.map(([accountId, balance]): React.ReactNode => ( + + ))} + +

{t('runners up')}

{t('backing')}
+ + + + + + + {electionsInfo?.candidates.map((accountId): React.ReactNode => ( + + ))} + +

{t('candidates')}

{t('backing')}
+ ); } diff --git a/packages/page-council/src/Overview/Members.tsx b/packages/page-council/src/Overview/Members.tsx index 98cbd7f416..cd895e0a31 100644 --- a/packages/page-council/src/Overview/Members.tsx +++ b/packages/page-council/src/Overview/Members.tsx @@ -6,7 +6,7 @@ import { AccountId } from '@polkadot/types/interfaces'; import { ComponentProps } from './types'; import React from 'react'; -import { Spinner, Table } from '@polkadot/react-components'; +import { Table } from '@polkadot/react-components'; import { useTranslation } from '../translate'; import Candidate from './Candidate'; @@ -21,33 +21,23 @@ function Members ({ allVotes = {}, className, electionsInfo, prime }: Props): Re const { t } = useTranslation(); return ( -
-

{t('members')}

- {electionsInfo - ? electionsInfo.members.length - ? ( - - - - - - - {electionsInfo.members.map(([accountId, balance]): React.ReactNode => ( - - ))} - -
 {t('backing')}
- ) - :
{t('No members found')}
- : - } -
+ + + + + + + {electionsInfo?.members.map(([accountId, balance]): React.ReactNode => ( + + ))} + +

{t('members')}

{t('backing')}
); } diff --git a/packages/page-democracy/src/Overview/DispatchQueue.tsx b/packages/page-democracy/src/Overview/DispatchQueue.tsx index 1c17f6fcd4..8127cefa57 100644 --- a/packages/page-democracy/src/Overview/DispatchQueue.tsx +++ b/packages/page-democracy/src/Overview/DispatchQueue.tsx @@ -5,7 +5,7 @@ import { DeriveDispatch } from '@polkadot/api-derive/types'; import React from 'react'; -import { Spinner, Table } from '@polkadot/react-components'; +import { Table } from '@polkadot/react-components'; import { useApi, useCall } from '@polkadot/react-hooks'; import { useTranslation } from '../translate'; @@ -21,31 +21,21 @@ function DispatchQueue ({ className }: Props): React.ReactElement | null const queued = useCall(api.derive.democracy.dispatchQueue as any, []); return ( -
-

{t('dispatch queue')}

- {queued - ? queued.length - ? ( - - - - - - - - {queued.map((entry): React.ReactNode => ( - - ))} - -
 {t('enact')} 
- ) - :
{t('Nothing queued for execution')}
- : - } -
+ + + + + + + + {queued?.map((entry): React.ReactNode => ( + + ))} + +

{t('dispatch queue')}

{t('enact')} 
); } diff --git a/packages/page-democracy/src/Overview/Externals.tsx b/packages/page-democracy/src/Overview/Externals.tsx index ee5ee79830..3e3702dc96 100644 --- a/packages/page-democracy/src/Overview/Externals.tsx +++ b/packages/page-democracy/src/Overview/Externals.tsx @@ -5,7 +5,7 @@ import { DeriveProposalExternal } from '@polkadot/api-derive/types'; import React from 'react'; -import { Spinner, Table } from '@polkadot/react-components'; +import { Table } from '@polkadot/react-components'; import { useApi, useCall } from '@polkadot/react-hooks'; import { useTranslation } from '../translate'; @@ -22,25 +22,17 @@ function Externals ({ className }: Props): React.ReactElement | null { return (
-

{t('external')}

- {external - ? ( - - - - - - - - - - -
 {t('proposer')}{t('locked')} 
- ) - : external === null - ?
{t('No external proposal')}
- : - } + + + + + + + + + {external && } + +

{t('external')}

{t('proposer')}{t('locked')} 
); } diff --git a/packages/page-democracy/src/Overview/Proposals.tsx b/packages/page-democracy/src/Overview/Proposals.tsx index d4a2289744..742123c3ee 100644 --- a/packages/page-democracy/src/Overview/Proposals.tsx +++ b/packages/page-democracy/src/Overview/Proposals.tsx @@ -5,7 +5,7 @@ import { DeriveProposal } from '@polkadot/api-derive/types'; import React from 'react'; -import { Spinner, Table } from '@polkadot/react-components'; +import { Table } from '@polkadot/react-components'; import { useApi, useCall } from '@polkadot/react-hooks'; import ProposalDisplay from './Proposal'; @@ -21,32 +21,22 @@ function Proposals ({ className }: Props): React.ReactElement { const proposals = useCall(api.derive.democracy.proposals, []); return ( -
-

{t('proposals')}

- {proposals - ? proposals.length - ? ( - - - - - - - - - {proposals.map((proposal): React.ReactNode => ( - - ))} - -
 {t('proposer')}{t('locked')} 
- ) - :
{t('No active proposals')}
- : - } -
+ + + + + + + + + {proposals?.map((proposal): React.ReactNode => ( + + ))} + +

{t('proposals')}

{t('proposer')}{t('locked')} 
); } diff --git a/packages/page-democracy/src/Overview/Referendums.tsx b/packages/page-democracy/src/Overview/Referendums.tsx index 9cdd7a5eda..8e14ec47d8 100644 --- a/packages/page-democracy/src/Overview/Referendums.tsx +++ b/packages/page-democracy/src/Overview/Referendums.tsx @@ -5,7 +5,7 @@ import { DeriveReferendumExt } from '@polkadot/api-derive/types'; import React from 'react'; -import { Spinner, Table } from '@polkadot/react-components'; +import { Table } from '@polkadot/react-components'; import { useApi, useCall } from '@polkadot/react-hooks'; import Referendum from './Referendum'; @@ -21,34 +21,24 @@ function Referendums ({ className }: Props): React.ReactElement { const referendums = useCall(api.derive.democracy.referendums, []); return ( -
-

{t('referenda')}

- {referendums - ? referendums.length - ? ( - - - - - - - - - - - {referendums.map((referendum): React.ReactNode => ( - - ))} - -
 {t('remaining')}{t('activate')}{t('aye')}{t('nay')} 
- ) - :
{t('No active referendums')}
- : - } -
+ + + + + + + + + + + {referendums?.map((referendum): React.ReactNode => ( + + ))} + +

{t('referenda')}

{t('remaining')}{t('activate')}{t('aye')}{t('nay')} 
); } diff --git a/packages/page-explorer/src/BlockHeader.tsx b/packages/page-explorer/src/BlockHeader.tsx index 1a71fe6ca2..622dd5299c 100644 --- a/packages/page-explorer/src/BlockHeader.tsx +++ b/packages/page-explorer/src/BlockHeader.tsx @@ -6,44 +6,15 @@ import { BareProps } from '@polkadot/react-components/types'; import React from 'react'; import { Link } from 'react-router-dom'; -import styled from 'styled-components'; import { HeaderExtended } from '@polkadot/api-derive'; -import { AddressMini, LinkExternal } from '@polkadot/react-components'; +import { AddressMini } from '@polkadot/react-components'; import { formatNumber } from '@polkadot/util'; interface Props extends BareProps { - isSummary?: boolean; - value?: HeaderExtended; - withExplorer?: boolean; - withLink?: boolean; + value: HeaderExtended; } -const renderDetails = ({ number: blockNumber, extrinsicsRoot, parentHash, stateRoot }: HeaderExtended): React.ReactNode => { - const parentHex = parentHash.toHex(); - - return ( -
-
- - { - blockNumber.unwrap().gtn(1) - ? {parentHex} - : parentHex - } -
-
- - {extrinsicsRoot.toHex()} -
-
- - {stateRoot.toHex()} -
-
- ); -}; - -function BlockHeader ({ className, isSummary, value, withExplorer, withLink }: Props): React.ReactElement | null { +function BlockHeader ({ value }: Props): React.ReactElement | null { if (!value) { return null; } @@ -52,114 +23,16 @@ function BlockHeader ({ className, isSummary, value, withExplorer, withLink }: P const textNumber = formatNumber(value.number); return ( -
-
-
-
{ - withLink - ? {textNumber} - : textNumber - } 
-
{hashHex}
-
{ - value.author - ? - : undefined - }
-
-
- { - isSummary - ? undefined - : renderDetails(value) - } - { - withExplorer - ? - : undefined - } -
+ + +

{textNumber}

+ + {hashHex} + + {value.author && } + + ); } -export default React.memo(styled(BlockHeader)` - .author { - font-size: 1rem; - text-align: right; - vertical-align: middle; - - > .ui--AddressMini.padded { - padding: 0; - } - } - - .header { - color: rgba(0, 0, 0, 0.6); - display: flex; - align-items: center; - justify-content: space-between; - text-align: left; - text-overflow: ellipsis; - white-space: nowrap; - vertical-align: middle; - - > div { - display: inline-block; - font-weight: 100; - vertical-align: middle; - white-space: nowrap; - } - - > .number { - font-size: 2.25rem; - } - - .hash { - font-size: 1.5rem; - font-family: sans-serif; - } - } - - .hash { - font-family: monospace; - overflow: hidden; - text-overflow: ellipsis; - } - - .number { - align-items: center; - box-sizing: border-box; - } - - .contains { - border: 0; - margin-top: 0.5rem; - text-align: center; - - > .info { - margin-bottom: 0.125em; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - - .ui--Labelled { - text-align: center; - } - - > label { - display: inline-block; - } - - > span, - > label { - vertical-align: middle; - } - - label { - margin-right: 0.5rem; - min-width: 10rem; - text-align: right; - } - } - } -`); +export default React.memo(BlockHeader); diff --git a/packages/page-explorer/src/BlockHeaders.tsx b/packages/page-explorer/src/BlockHeaders.tsx index 219f6f15f8..950dd8b5da 100644 --- a/packages/page-explorer/src/BlockHeaders.tsx +++ b/packages/page-explorer/src/BlockHeaders.tsx @@ -4,25 +4,34 @@ import React from 'react'; import { HeaderExtended } from '@polkadot/api-derive'; +import { Table } from '@polkadot/react-components'; import BlockHeader from './BlockHeader'; +import { useTranslation } from './translate'; interface Props { headers: HeaderExtended[]; } function BlockHeaders ({ headers }: Props): React.ReactElement { + const { t } = useTranslation(); + return ( - <> - {headers.map((header, index): React.ReactNode => ( - - ))} - + + + + + + {headers + .filter((header) => !!header) + .map((header): React.ReactNode => ( + + ))} + +

{t('recent blocks')}

); } diff --git a/packages/page-explorer/src/BlockInfo/ByHash.tsx b/packages/page-explorer/src/BlockInfo/ByHash.tsx index cf5a421bfb..37166daf8f 100644 --- a/packages/page-explorer/src/BlockInfo/ByHash.tsx +++ b/packages/page-explorer/src/BlockInfo/ByHash.tsx @@ -1,4 +1,3 @@ -/* eslint-disable @typescript-eslint/camelcase */ // Copyright 2017-2020 @polkadot/app-explorer authors & contributors // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. @@ -6,12 +5,13 @@ import { EventRecord, SignedBlock } from '@polkadot/types/interfaces'; import React from 'react'; -import styled from 'styled-components'; +import { Link } from 'react-router-dom'; import { HeaderExtended } from '@polkadot/api-derive'; -import { Columar, Spinner } from '@polkadot/react-components'; +import { AddressMini, Columar, LinkExternal, Table } from '@polkadot/react-components'; import { useApi, useCall } from '@polkadot/react-hooks'; +import { formatNumber } from '@polkadot/util'; -import BlockHeader from '../BlockHeader'; +import { useTranslation } from '../translate'; import Events from './Events'; import Extrinsics from './Extrinsics'; import Logs from './Logs'; @@ -22,41 +22,52 @@ interface Props { } function BlockByHash ({ className, value }: Props): React.ReactElement { + const { t } = useTranslation(); const { api } = useApi(); const events = useCall(api.query.system.events.at as any, [value], { isSingle: true }); const getBlock = useCall(api.rpc.chain.getBlock as any, [value], { isSingle: true }); const getHeader = useCall(api.derive.chain.getHeader as any, [value]); - if (!getBlock || getBlock.isEmpty || !getHeader || getHeader.isEmpty) { - return ; - } - return (
-
- -
- - - - - + + + + {getHeader && ( + <> + + + + + + + )} + + + {getBlock && !getBlock.isEmpty && getHeader && !getHeader.isEmpty && ( + + + + + + + + + )} + +

{getHeader ? formatNumber(getHeader.number.unwrap()) : '-'}

{t('hash')}{t('parent')}{t('extrinsics')}{t('state')} 
{getHeader.author && }{getHeader.hash.toHex()}{getHeader.parentHash.toHex()}{getHeader.extrinsicsRoot.toHex()}{getHeader.stateRoot.toHex()}
+ {getBlock && getHeader && ( + + + + + + )}
); } -export default React.memo( - styled(BlockByHash)` - .exporer--BlockByHash-BlockHeader { - border: none; - box-shadow: none; - } - ` -); +export default React.memo(BlockByHash); diff --git a/packages/page-explorer/src/BlockInfo/Events.tsx b/packages/page-explorer/src/BlockInfo/Events.tsx index 48bde99c55..1a61614994 100644 --- a/packages/page-explorer/src/BlockInfo/Events.tsx +++ b/packages/page-explorer/src/BlockInfo/Events.tsx @@ -22,7 +22,7 @@ function Events ({ value }: Props): React.ReactElement | null { } return ( - + | null { key: `${index}`, record })) } + label={t('events')} /> ); diff --git a/packages/page-explorer/src/BlockInfo/Extrinsics.tsx b/packages/page-explorer/src/BlockInfo/Extrinsics.tsx index 9531f63686..b83142270a 100644 --- a/packages/page-explorer/src/BlockInfo/Extrinsics.tsx +++ b/packages/page-explorer/src/BlockInfo/Extrinsics.tsx @@ -7,7 +7,7 @@ import { BlockNumber, Extrinsic } from '@polkadot/types/interfaces'; import React from 'react'; import styled from 'styled-components'; import { registry } from '@polkadot/react-api'; -import { AddressMini, Call, Column, Expander, LinkExternal } from '@polkadot/react-components'; +import { AddressMini, Call, Column, Expander, LinkExternal, Table } from '@polkadot/react-components'; import { formatNumber } from '@polkadot/util'; import { useTranslation } from '../translate'; @@ -19,85 +19,75 @@ interface Props { value?: Extrinsic[] | null; } -function renderExtrinsic (props: Props, extrinsic: Extrinsic, index: number, t: (s: string, opt?: any) => string): React.ReactNode { - const { blockNumber } = props; - const { meta, method, section } = registry.findMetaCall(extrinsic.callIndex); - const isMortal = extrinsic.era.isMortalEra; - let eraEnd; - let eraStart; +function getEra ({ era }: Extrinsic, blockNumber?: BlockNumber): [number, number] | null { + if (blockNumber && era.isMortalEra) { + const mortalEra = era.asMortalEra; - if (blockNumber && isMortal) { - const mortalEra = extrinsic.era.asMortalEra; - - eraEnd = mortalEra.death(blockNumber.toNumber()); - eraStart = mortalEra.birth(blockNumber.toNumber()); + return [mortalEra.birth(blockNumber.toNumber()), mortalEra.death(blockNumber.toNumber())]; } - return ( -
-
-

- {section}.{method} (#{formatNumber(index)}) -

- {extrinsic.isSigned && ( -
-
- -
-
- {t('index')} {formatNumber(extrinsic.nonce)} -
-
- )} -
- - - - { - extrinsic.isSigned - ? - : null - } -
- ); + return null; } -function Extrinsics (props: Props): React.ReactElement { +function Extrinsics ({ className, blockNumber, label, value }: Props): React.ReactElement { const { t } = useTranslation(); - const { className, label, value } = props; return ( - - {value?.map((extrinsic, index): React.ReactNode => { - try { - return renderExtrinsic(props, extrinsic, index, t); - } catch (error) { - console.error(error); + + + + + + + {value?.map((extrinsic, index): React.ReactNode => { + const { meta, method, section } = registry.findMetaCall(extrinsic.callIndex); + const era = getEra(extrinsic, blockNumber); - return t('Unable to render extrinsic'); - } - })} + return ( + + + + ); + })} + +

{label || t('extrinsics')}

+
{section}.{method} (#{formatNumber(index)})
+ {extrinsic.isSigned && ( +
+
+ +
+
+ {t('index')} {formatNumber(extrinsic.nonce)} +
+
+ )} + + + + { + extrinsic.isSigned + ? + : null + } +
); } @@ -105,7 +95,7 @@ function Extrinsics (props: Props): React.ReactElement { export default React.memo(styled(Extrinsics)` .explorer--BlockByHash-header { position: absolute; - top: 0.25rem; + top: 0.75rem; right: 0.75rem; } diff --git a/packages/page-explorer/src/BlockInfo/Logs.tsx b/packages/page-explorer/src/BlockInfo/Logs.tsx index da17c1b45f..a6a8d87bbe 100644 --- a/packages/page-explorer/src/BlockInfo/Logs.tsx +++ b/packages/page-explorer/src/BlockInfo/Logs.tsx @@ -7,7 +7,7 @@ import { Codec, TypeDef } from '@polkadot/types/types'; import React from 'react'; import { Struct, Tuple, Raw, Vec, getTypeDef } from '@polkadot/types'; -import { Column, Expander } from '@polkadot/react-components'; +import { Column, Expander, Table } from '@polkadot/react-components'; import Params from '@polkadot/react-params'; import { useTranslation } from '../translate'; @@ -85,38 +85,18 @@ function formatVector (vector: Vec): React.ReactNode { ); } -function renderItem (t: (s: string, opt?: any) => string): (item: DigestItem, index: number) => React.ReactNode { - return function LogItem (item: DigestItem, index: number): React.ReactNode { - let content: React.ReactNode; +function formatItem (item: DigestItem): React.ReactNode { + if (item.value instanceof Struct) { + return formatStruct(item.value); + } else if (item.value instanceof Tuple) { + return formatTuple(item.value); + } else if (item.value instanceof Vec) { + return formatVector(item.value); + } else if (item.value instanceof Raw) { + return formatU8a(item.value); + } - if (item.value instanceof Struct) { - content = formatStruct(item.value); - } else if (item.value instanceof Tuple) { - content = formatTuple(item.value); - } else if (item.value instanceof Vec) { - content = formatVector(item.value); - } else if (item.value instanceof Raw) { - content = formatU8a(item.value); - } else { - content =
{item.value.toString().split(',').join(', ')}
; - } - - return ( -
-
-
-

{item.type.toString()}

-
- - {content} - -
-
- ); - }; + return
{item.value.toString().split(',').join(', ')}
; } function Logs (props: Props): React.ReactElement | null { @@ -128,8 +108,24 @@ function Logs (props: Props): React.ReactElement | null { } return ( - - {value.map(renderItem(t))} + + + + + + + {value.map((log, index) => ( + + + + ))} + +

{t('logs')}

+
{log.type.toString()}
+ + {formatItem(log)} + +
); } diff --git a/packages/page-explorer/src/Events.tsx b/packages/page-explorer/src/Events.tsx index 155ce33b7c..eb71ca5213 100644 --- a/packages/page-explorer/src/Events.tsx +++ b/packages/page-explorer/src/Events.tsx @@ -5,7 +5,7 @@ import { KeyedEvent } from './types'; import React from 'react'; -import { Event as EventDisplay, Expander } from '@polkadot/react-components'; +import { Event as EventDisplay, Expander, Table } from '@polkadot/react-components'; import { formatNumber } from '@polkadot/util'; import { useTranslation } from './translate'; @@ -14,55 +14,44 @@ interface Props { emptyLabel?: React.ReactNode; events: KeyedEvent[]; eventClassName?: string; + label?: React.ReactNode; withoutIndex?: boolean; } -function Events ({ emptyLabel, eventClassName, events, withoutIndex }: Props): React.ReactElement { +function Events ({ emptyLabel, eventClassName, events, label, withoutIndex }: Props): React.ReactElement { const { t } = useTranslation(); - if (!events || events.length === 0) { - return ( -
- {emptyLabel || t('no events available')} -
- ); - } - return ( - <> - {events.map(({ key, record: { event, phase } }: KeyedEvent): React.ReactNode => { - const extIndex = !withoutIndex && phase.isApplyExtrinsic - ? phase.asApplyExtrinsic - : -1; - - if (!event.method || !event.section) { - return null; - } - - return ( -
-
-

- {event.section}.{event.method} { - extIndex !== -1 - ? `(#${formatNumber(extIndex)})` + + + + + + {events + .filter(({ record: { event: { method, section } } }): boolean => !!method && !!section) + .map(({ key, record: { event, phase } }: KeyedEvent): React.ReactNode => ( + + + + )) + } + +

{label || t('recent events')}

+
{event.section}.{event.method} { + !withoutIndex && phase.isApplyExtrinsic + ? `(#${formatNumber(phase.asApplyExtrinsic)})` : '' - } - -
- - - - - ); - })} - + } + + + +
); } diff --git a/packages/page-explorer/src/Main.tsx b/packages/page-explorer/src/Main.tsx index 5704738942..e7737b0137 100644 --- a/packages/page-explorer/src/Main.tsx +++ b/packages/page-explorer/src/Main.tsx @@ -12,7 +12,6 @@ import BlockHeaders from './BlockHeaders'; import Events from './Events'; import Query from './Query'; import Summary from './Summary'; -import { useTranslation } from './translate'; interface Props { events: KeyedEvent[]; @@ -20,17 +19,15 @@ interface Props { } function Main ({ events, headers }: Props): React.ReactElement { - const { t } = useTranslation(); - return ( <> - + - + diff --git a/packages/page-explorer/src/NodeInfo/Peers.tsx b/packages/page-explorer/src/NodeInfo/Peers.tsx index 83eda92036..abf47a5038 100644 --- a/packages/page-explorer/src/NodeInfo/Peers.tsx +++ b/packages/page-explorer/src/NodeInfo/Peers.tsx @@ -5,107 +5,38 @@ import { PeerInfo } from '@polkadot/types/interfaces'; import React from 'react'; -import styled from 'styled-components'; import { formatNumber } from '@polkadot/util'; import { useTranslation } from '../translate'; +import { Table } from '@polkadot/react-components'; interface Props { className?: string; peers?: PeerInfo[] | null; } -const renderPeer = (peer: PeerInfo): React.ReactNode => { - const peerId = peer.peerId.toString(); - - return ( - - {peer.roles.toString().toLowerCase()} - {peerId} - {formatNumber(peer.bestNumber)} - {peer.bestHash.toHex()} - - ); -}; - function Peers ({ className, peers }: Props): React.ReactElement { const { t } = useTranslation(); return ( -
-

{t('connected peers')}

- {peers && peers.length - ? ( -
- - - - - - - - - - - {peers - .sort((a, b): number => b.bestNumber.cmp(a.bestNumber)) - .map(renderPeer) - } - -
{t('role')}{t('peer id')}{t('best #')}{t('best hash')}
-
- ) - : ( -
- {t('no peers connected')} -
- ) - } -
+ + + + + + + + {peers?.sort((a, b): number => b.bestNumber.cmp(a.bestNumber)).map((peer) => ( + + + + + + + ))} + +

{t('connected peers')}

{t('best #')}{t('best hash')}
{peer.roles.toString().toLowerCase()}{peer.peerId.toString()}{formatNumber(peer.bestNumber)}{peer.bestHash.toHex()}
); } -export default React.memo( - styled(Peers)` - table { - width: 100%; - - td, th { - padding: 0.25rem 0.5rem; - text-align: left; - white-space: nowrap; - - &.hash { - font-family: monospace; - max-width: 0; - overflow: hidden; - text-overflow: ellipsis; - width: 100%; - } - - &.number { - text-align: right; - } - - &.peerid { - font-style: italic; - text-align: left; - } - - &.roles { - text-align: center; - } - } - } - - tbody { - tr { - width: 100%; - - &:nth-child(odd) { - background-color: #f2f2f2; - } - } - } - ` -); +export default React.memo(Peers); diff --git a/packages/page-explorer/src/index.tsx b/packages/page-explorer/src/index.tsx index 2fd020783b..955c0c5ee6 100644 --- a/packages/page-explorer/src/index.tsx +++ b/packages/page-explorer/src/index.tsx @@ -67,12 +67,12 @@ function ExplorerApp ({ basePath, className }: Props): React.ReactElement - => ( +
- )} /> +
); diff --git a/packages/page-js/src/Playground.tsx b/packages/page-js/src/Playground.tsx index dc7fca0bc6..1cec191ec0 100644 --- a/packages/page-js/src/Playground.tsx +++ b/packages/page-js/src/Playground.tsx @@ -306,7 +306,7 @@ export default React.memo(styled(Playground)` } .codeflask__lines { - background: #fafafa; + background: #f2f2f2; line-height: 18px; padding-top: 50px; z-index: 100; diff --git a/packages/page-society/src/Overview/Bids.tsx b/packages/page-society/src/Overview/Bids.tsx index ad2d96ddca..bc756645e4 100644 --- a/packages/page-society/src/Overview/Bids.tsx +++ b/packages/page-society/src/Overview/Bids.tsx @@ -5,7 +5,7 @@ import { Bid } from '@polkadot/types/interfaces'; import React from 'react'; -import { Spinner, Table } from '@polkadot/react-components'; +import { Table } from '@polkadot/react-components'; import { useApi, useCall } from '@polkadot/react-hooks'; import { useTranslation } from '../translate'; @@ -21,31 +21,21 @@ function Bids ({ className }: Props): React.ReactElement { const bids = useCall(api.query.society.bids, []); return ( -
-

{t('bids')}

- {bids - ? bids.length - ? ( - - - - - - - - {bids.map((bid): React.ReactNode => ( - - ))} - -
 {t('kind')}{t('value')}
- ) - :
{t('No bids')}
- : - } -
+ + + + + + + + {bids?.map((bid): React.ReactNode => ( + + ))} + +

{t('bids')}

{t('kind')}{t('value')}
); } diff --git a/packages/page-society/src/Overview/Candidates.tsx b/packages/page-society/src/Overview/Candidates.tsx index 2b6261b9ad..cdc84928f5 100644 --- a/packages/page-society/src/Overview/Candidates.tsx +++ b/packages/page-society/src/Overview/Candidates.tsx @@ -6,7 +6,7 @@ import { DeriveSocietyCandidate } from '@polkadot/api-derive/types'; import { OwnMembers } from '../types'; import React from 'react'; -import { Spinner, Table } from '@polkadot/react-components'; +import { Table } from '@polkadot/react-components'; import { useApi, useCall } from '@polkadot/react-hooks'; import { useTranslation } from '../translate'; @@ -22,36 +22,26 @@ function Candidates ({ allMembers, className, isMember, ownMembers }: Props): Re const candidates = useCall(api.derive.society.candidates, []); return ( -
-

{t('candidates')}

- {candidates - ? candidates.length - ? ( - - - - - - - - - - {candidates.map((candidate): React.ReactNode => ( - - ))} - -
 {t('kind')}{t('value')}{t('votes')} 
- ) - :
{t('No candidates')}
- : - } -
+ + + + + + + + + + {candidates?.map((candidate): React.ReactNode => ( + + ))} + +

{t('candidates')}

{t('kind')}{t('value')}{t('votes')} 
); } diff --git a/packages/page-society/src/Overview/Defender.tsx b/packages/page-society/src/Overview/Defender.tsx index e256a05959..40e7a8f09d 100644 --- a/packages/page-society/src/Overview/Defender.tsx +++ b/packages/page-society/src/Overview/Defender.tsx @@ -34,30 +34,27 @@ function Defender ({ className, info, isMember, ownMembers }: Props): React.Reac } return ( -
-

{t('defender')}

- - - - - - - - - - - - - -
 {t('votes')} 
- - - -
-
+ + + + + + + + + + + + + +

{t('defender')}

{t('votes')} 
+ + + +
); } diff --git a/packages/page-society/src/Overview/Members.tsx b/packages/page-society/src/Overview/Members.tsx index ee5f50be26..bd26d6e7e0 100644 --- a/packages/page-society/src/Overview/Members.tsx +++ b/packages/page-society/src/Overview/Members.tsx @@ -5,7 +5,7 @@ import { DeriveSociety, DeriveSocietyMember } from '@polkadot/api-derive/types'; import React, { useEffect, useState } from 'react'; -import { Spinner, Table } from '@polkadot/react-components'; +import { Table } from '@polkadot/react-components'; import { useApi, useCall } from '@polkadot/react-hooks'; import { useTranslation } from '../translate'; @@ -29,31 +29,21 @@ function Members ({ className, info }: Props): React.ReactElement { }, [info, members]); return ( -
-

{t('members')}

- {info - ? filtered.length - ? ( - - - - - - - {filtered.map((member): React.ReactNode => ( - - ))} - -
 {t('strikes')}
- ) - :
{t('No active members')}
- : - } -
+ + + + + + + {filtered.map((member): React.ReactNode => ( + + ))} + +

{t('members')}

{t('strikes')}
); } diff --git a/packages/page-society/src/Overview/VoteDisplay.tsx b/packages/page-society/src/Overview/VoteDisplay.tsx index 4f90551a38..068c99022b 100644 --- a/packages/page-society/src/Overview/VoteDisplay.tsx +++ b/packages/page-society/src/Overview/VoteDisplay.tsx @@ -5,15 +5,17 @@ import { VoteSplit, VoteType } from '../types'; import React, { useEffect, useState } from 'react'; +import styled from 'styled-components'; import { AddressMini, Expander } from '@polkadot/react-components'; import { useTranslation } from '../translate'; interface Props { + className?: string; votes?: VoteType[]; } -function VoteDisplay ({ votes }: Props): React.ReactElement { +function VoteDisplay ({ className, votes }: Props): React.ReactElement { const { t } = useTranslation(); const [{ allAye, allNay, allSkeptic }, setVoteSplit] = useState({ allAye: [], allNay: [], allSkeptic: [] }); @@ -26,45 +28,43 @@ function VoteDisplay ({ votes }: Props): React.ReactElement { }, [votes]); return ( - <> - - {allSkeptic.length !== 0 && ( - - {allSkeptic.map(([who]): React.ReactNode => - - )} - - )} - - - {allAye.length !== 0 && ( - - {allAye.map(([who]): React.ReactNode => - - )} - - )} - - - {allNay.length !== 0 && ( - - {allNay.map(([who]): React.ReactNode => - - )} - - )} - - + + {allSkeptic.length !== 0 && ( + + {allSkeptic.map(([who]): React.ReactNode => + + )} + + )} + {allAye.length !== 0 && ( + + {allAye.map(([who]): React.ReactNode => + + )} + + )} + {allNay.length !== 0 && ( + + {allNay.map(([who]): React.ReactNode => + + )} + + )} + ); } -export default React.memo(VoteDisplay); +export default React.memo(styled(VoteDisplay)` + .ui--Expander+ui--Expander { + margin-left: 0.5rem; + } +`); diff --git a/packages/page-staking/src/Actions/index.tsx b/packages/page-staking/src/Actions/index.tsx index cdb0400394..0291d6d489 100644 --- a/packages/page-staking/src/Actions/index.tsx +++ b/packages/page-staking/src/Actions/index.tsx @@ -77,34 +77,29 @@ function Actions ({ allRewards, allStashes, className, isVisible, next, stakingO {isNewStakeOpen && ( )} - {foundStashes?.length - ? ( - - - - - - - - {foundStashes.map(([stashId, isOwnStash]): React.ReactNode => ( - - ))} - -
 {t('controller')} 
- ) - :
{t('No funds staked yet. Bond funds to validate or nominate a validator.')}
- } + + + + + + + + {foundStashes?.map(([stashId, isOwnStash]): React.ReactNode => ( + + ))} + +

{t('stashes')}

{t('controller')} 

); } diff --git a/packages/page-staking/src/Overview/CurrentList.tsx b/packages/page-staking/src/Overview/CurrentList.tsx index 1fa95330d6..a74f9f4616 100644 --- a/packages/page-staking/src/Overview/CurrentList.tsx +++ b/packages/page-staking/src/Overview/CurrentList.tsx @@ -7,7 +7,7 @@ import { AccountId } from '@polkadot/types/interfaces'; import { AddressDetails } from './types'; import React, { useEffect, useReducer, useState } from 'react'; -import { Input, Spinner, Table } from '@polkadot/react-components'; +import { Input, Table } from '@polkadot/react-components'; import { useFavorites } from '@polkadot/react-hooks'; import { STORE_FAVS_BASE } from '../constants'; @@ -116,8 +116,8 @@ function CurrentList ({ authorsMap, hasQueries, isIntentions, isVisible, lastAut ); }, [stakingOverview, validators]); - const _renderRows = (addresses: AccountExtend[], isMain: boolean): React.ReactNode => - addresses.map(([address, isElected, isFavorite]): React.ReactNode => ( + const _renderRows = (addresses?: AccountExtend[], isMain?: boolean): React.ReactNode => + addresses?.map(([address, isElected, isFavorite]): React.ReactNode => (
)); - if (!stakingOverview) { - return ; - } - return (
- - - + + }> + @@ -159,24 +156,20 @@ function CurrentList ({ authorsMap, hasQueries, isIntentions, isVisible, lastAut - + {_renderRows(validators, true)}
 

{t('validators')}

 {t('other stake')} {t('own stake')} {t('commission')}{t('last #')}  
{isIntentions && ( - waiting - ? ( - - - - - - {_renderRows(elected, false)} - {_renderRows(waiting, false)} - -
 
- ) - : + + + + + + {_renderRows(elected, false)} + {_renderRows(waiting, false)} + +

{t('intentions')}

)}
); diff --git a/packages/page-staking/src/Targets/index.tsx b/packages/page-staking/src/Targets/index.tsx index ba1da1be65..a6decf7efc 100644 --- a/packages/page-staking/src/Targets/index.tsx +++ b/packages/page-staking/src/Targets/index.tsx @@ -10,7 +10,7 @@ import BN from 'bn.js'; import React, { useCallback, useEffect, useMemo, useState } from 'react'; import styled from 'styled-components'; import { registry } from '@polkadot/react-api'; -import { Icon, InputBalance, Spinner, Table } from '@polkadot/react-components'; +import { Icon, InputBalance, Table } from '@polkadot/react-components'; import { useAccounts, useApi, useCall, useDebounce, useFavorites } from '@polkadot/react-hooks'; import { createType, Option } from '@polkadot/types'; @@ -211,10 +211,6 @@ function Targets ({ className }: Props): React.ReactElement { } }, [allAccounts, amount, electedInfo, favorites, lastReward, sortBy, sortFromMax]); - if (!sorted) { - return ; - } - return (
{ numValidators={validators.length} totalStaked={totalStaked} /> - {sorted.length - ? ( - <> - + + }> +

{t('validators')}

+ {['rankComm', 'rankBondTotal', 'rankBondOwn', 'rankBondOther', 'rankOverall'].map((header): React.ReactNode => ( + _sort(header as 'rankComm')} + >{labels[header]} + ))} +   + + + {sorted?.map((info): React.ReactNode => + - - - - {['rankComm', 'rankBondTotal', 'rankBondOwn', 'rankBondOther', 'rankOverall'].map((header): React.ReactNode => ( - - ))} - - - - {sorted.map((info): React.ReactNode => - - )} - -
  _sort(header as 'rankComm')} - >{labels[header]} 
- - ) - : - } + )} + +
); } diff --git a/packages/page-tech-comm/src/Overview/Members.tsx b/packages/page-tech-comm/src/Overview/Members.tsx index a73e3c9740..12d210e196 100644 --- a/packages/page-tech-comm/src/Overview/Members.tsx +++ b/packages/page-tech-comm/src/Overview/Members.tsx @@ -11,7 +11,7 @@ import { useTranslation } from '../translate'; interface Props { className?: string; - members: string[]; + members?: string[]; prime?: AccountId | null; } @@ -19,37 +19,30 @@ function Members ({ className, members, prime }: Props): React.ReactElement - {members.length - ? ( - - - - - - {members.map((accountId): React.ReactNode => ( - - - - - - ))} - -
 
- - - {prime?.eq(accountId) && ( - - )} -  
- ) - :
{t('No members found')}
- } - + + + + + + {members?.map((accountId): React.ReactNode => ( + + + + + + ))} + +

{t('members')}

+ + + {prime?.eq(accountId) && ( + + )} +  
); } diff --git a/packages/page-tech-comm/src/Proposals/index.tsx b/packages/page-tech-comm/src/Proposals/index.tsx index d22db211de..90bc6da662 100644 --- a/packages/page-tech-comm/src/Proposals/index.tsx +++ b/packages/page-tech-comm/src/Proposals/index.tsx @@ -6,7 +6,7 @@ import { Hash } from '@polkadot/types/interfaces'; import { ComponentProps as Props } from '../types'; import React from 'react'; -import { Button, Spinner, Table } from '@polkadot/react-components'; +import { Button, Table } from '@polkadot/react-components'; import { useTranslation } from '../translate'; import Proposal from './Proposal'; @@ -23,31 +23,24 @@ function Proposals ({ className, isMember, members, prime, proposals }: Props): members={members} /> - {proposals - ? proposals.length - ? ( - - - - - - - - - - {proposals.map((hash: Hash): React.ReactNode => ( - - ))} - -
 {t('threshold')}{t('aye')}{t('nay')} 
- ) - :
{t('No committee proposals')}
- : - } + + + + + + + + + + {proposals?.map((hash: Hash): React.ReactNode => ( + + ))} + +

{t('proposals')}

{t('threshold')}{t('aye')}{t('nay')} 
); } diff --git a/packages/page-treasury/src/Overview/Proposals.tsx b/packages/page-treasury/src/Overview/Proposals.tsx index 9addb24cfa..38eaa97af2 100644 --- a/packages/page-treasury/src/Overview/Proposals.tsx +++ b/packages/page-treasury/src/Overview/Proposals.tsx @@ -7,7 +7,7 @@ import { AccountId, Balance } from '@polkadot/types/interfaces'; import React, { useEffect, useState } from 'react'; import { useHistory } from 'react-router-dom'; -import { Spinner, Table } from '@polkadot/react-components'; +import { Table } from '@polkadot/react-components'; import { useApi, useAccounts, useCall } from '@polkadot/react-hooks'; import Proposal from './Proposal'; @@ -40,38 +40,26 @@ function ProposalsBase ({ className, isApprovals, proposals }: Props): React.Rea }; return ( -
-

{isApprovals ? t('Approved') : t('Proposals')}

- {proposals - ? proposals.length - ? ( - - - - - - - - - - {proposals.map((proposal): React.ReactNode => ( - - ))} - -
 {t('beneficiary')}{t('payment')}{t('bond')} 
- ) - : isApprovals - ?
{t('No approved proposals')}
- :
{t('No pending proposals')}
- : - } -
+ + + + + + + + + + {proposals?.map((proposal): React.ReactNode => ( + + ))} + +

{isApprovals ? t('Approved') : t('Proposals')}

{t('beneficiary')}{t('payment')}{t('bond')} 
); } diff --git a/packages/react-components/src/AddressMini.tsx b/packages/react-components/src/AddressMini.tsx index 99a382f35a..a02151119e 100644 --- a/packages/react-components/src/AddressMini.tsx +++ b/packages/react-components/src/AddressMini.tsx @@ -100,7 +100,7 @@ export default React.memo(styled(AddressMini)` &.padded { display: inline-block; - padding: 0.25rem 1rem 0 0; + padding: 0 1rem 0 0; } &.summary { diff --git a/packages/react-components/src/Button/Group.tsx b/packages/react-components/src/Button/Group.tsx index 0b03dfe3da..7faf72a75b 100644 --- a/packages/react-components/src/Button/Group.tsx +++ b/packages/react-components/src/Button/Group.tsx @@ -43,6 +43,10 @@ const Memo = React.memo(styled(ButtonGroup)` margin-bottom: 0.5rem; text-align: center; } + + &+.ui--Table { + margin-top: 1.5rem; + } `) as unknown as GroupType; Memo.Divider = Divider; diff --git a/packages/react-components/src/CardGrid.tsx b/packages/react-components/src/CardGrid.tsx index dd04d94576..2a22d4b79f 100644 --- a/packages/react-components/src/CardGrid.tsx +++ b/packages/react-components/src/CardGrid.tsx @@ -28,7 +28,7 @@ class CardGrid extends Collection { return (
-

{emptyText || t('No items')}

+

{emptyText || t('No items')}

{buttons && (
{buttons} diff --git a/packages/react-components/src/CardSummary.tsx b/packages/react-components/src/CardSummary.tsx index ad9805aa05..1886b70d88 100644 --- a/packages/react-components/src/CardSummary.tsx +++ b/packages/react-components/src/CardSummary.tsx @@ -104,10 +104,10 @@ export default React.memo(styled(CardSummary)` } > div { - font-size: 1.85rem; + font-size: 1.75rem; font-weight: 100; position: relative; - line-height: 1.85rem; + line-height: 1.75rem; text-align: right; > * { diff --git a/packages/react-components/src/Table.tsx b/packages/react-components/src/Table.tsx index 25dd61ff63..dd2b67bfe5 100644 --- a/packages/react-components/src/Table.tsx +++ b/packages/react-components/src/Table.tsx @@ -4,26 +4,40 @@ import React from 'react'; import styled from 'styled-components'; +import { isString } from '@polkadot/util'; + +import Spinner from './Spinner'; interface BaseProps { children: React.ReactNode; className?: string; } -type BodyProps = BaseProps; +interface BodyProps extends BaseProps { + empty?: React.ReactNode; +} -type HeadProps = BaseProps; +interface HeadProps extends BaseProps { + filter?: React.ReactNode; +} -type TableProps = BaseProps; +interface TableProps extends BaseProps { + isFixed?: boolean; +} type TableImpl = React.FC & { Body: React.FC; Head: React.FC; } -function Head ({ children, className }: HeadProps): React.ReactElement { +function Head ({ children, className, filter }: HeadProps): React.ReactElement { return ( + {filter && ( + + {filter} + + )} {children} @@ -31,17 +45,28 @@ function Head ({ children, className }: HeadProps): React.ReactElement { +function Body ({ children, className, empty }: BodyProps): React.ReactElement { + const isEmpty = !children || (Array.isArray(children) && children.length === 0); + return ( - {children} + {isEmpty + ? ( + { + isString(empty) + ?
{empty}
+ : empty || + } + ) + : children + } ); } -function Table ({ children, className }: TableProps): React.ReactElement { +function Table ({ children, className, isFixed }: TableProps): React.ReactElement { return ( -
+
{children}
@@ -51,21 +76,33 @@ function Table ({ children, className }: TableProps): React.ReactElement