diff --git a/packages/page-parachains/src/Overview/Parachains.tsx b/packages/page-parachains/src/Overview/Parachains.tsx index cd190c6a51..d5d3178f3f 100644 --- a/packages/page-parachains/src/Overview/Parachains.tsx +++ b/packages/page-parachains/src/Overview/Parachains.tsx @@ -28,7 +28,7 @@ function Parachains ({ parachains }: Props): React.ReactElement { return ( ('There are no registered parachains')} + empty={parachains && t('There are no registered parachains')} header={headerRef.current} > {parachains?.map((parachain): React.ReactNode => ( diff --git a/packages/page-parachains/src/Overview/Proposal.tsx b/packages/page-parachains/src/Overview/Proposal.tsx new file mode 100644 index 0000000000..87db1102c3 --- /dev/null +++ b/packages/page-parachains/src/Overview/Proposal.tsx @@ -0,0 +1,53 @@ +// Copyright 2017-2020 @polkadot/app-parachains 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 { ProposalExt } from './types'; + +import React, { useMemo } from 'react'; +import { AddressSmall, AddressMini } from '@polkadot/react-components'; +import { FormatBalance } from '@polkadot/react-query'; +import { formatNumber } from '@polkadot/util'; + +interface Props { + proposal: ProposalExt; +} + +function Proposal ({ proposal: { id, proposal: { balance, initialHeadState, name, proposer, validationFunction, validators } } }: Props): React.ReactElement { + const initialHex = useMemo( + (): string => { + const hex = initialHeadState.toHex(); + + return `${hex.slice(0, 10)}…${hex.slice(-8)}`; + }, + [initialHeadState] + ); + + const validationHex = useMemo( + (): string => { + const hex = validationFunction.toHex(); + + return `${hex.slice(0, 10)}…${hex.slice(-8)}`; + }, + [validationFunction] + ); + + return ( + + + + + + + + + + ); +} + +export default React.memo(Proposal); diff --git a/packages/page-parachains/src/Overview/Proposals.tsx b/packages/page-parachains/src/Overview/Proposals.tsx new file mode 100644 index 0000000000..e434efecaa --- /dev/null +++ b/packages/page-parachains/src/Overview/Proposals.tsx @@ -0,0 +1,44 @@ +// Copyright 2017-2020 @polkadot/app-parachains 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 { ProposalExt } from './types'; + +import React, { useRef } from 'react'; +import { Table } from '@polkadot/react-components'; + +import { useTranslation } from '../translate'; +import Proposal from './Proposal'; + +interface Props { + proposals?: ProposalExt[]; +} + +function Proposals ({ proposals }: Props): React.ReactElement { + const { t } = useTranslation(); + + const headerRef = useRef([ + [t('proposals'), 'start', 2], + [t('proposer'), 'address'], + [t('balance')], + [t('initial state'), 'start'], + [t('validation'), 'start'], + [t('validators')] + ]); + + return ( +

{formatNumber(id)}

{name.toUtf8()}{initialHex}{validationHex}{validators.map((validatorId) => ( + + ))}
('There are no pending proposals')} + header={headerRef.current} + > + {proposals?.map((proposal): React.ReactNode => ( + + ))} +
+ ); +} + +export default React.memo(Proposals); diff --git a/packages/page-parachains/src/Overview/Summary.tsx b/packages/page-parachains/src/Overview/Summary.tsx index ab69038564..ec1599b837 100644 --- a/packages/page-parachains/src/Overview/Summary.tsx +++ b/packages/page-parachains/src/Overview/Summary.tsx @@ -13,10 +13,11 @@ import { useTranslation } from '../translate'; interface Props { parachainCount?: number; + proposalCount?: number; nextFreeId?: BN; } -function Summary ({ nextFreeId, parachainCount }: Props): React.ReactElement { +function Summary ({ nextFreeId, parachainCount, proposalCount }: Props): React.ReactElement { const { t } = useTranslation(); const { api } = useApi(); @@ -34,6 +35,11 @@ function Summary ({ nextFreeId, parachainCount }: Props): React.ReactElement )} + {isNumber(proposalCount) && ( + ('proposals')}> + {formatNumber(proposalCount)} + + )} {api.query.parachains && nextFreeId && ( ('next id')}> {formatNumber(nextFreeId)} diff --git a/packages/page-parachains/src/Overview/index.tsx b/packages/page-parachains/src/Overview/index.tsx index 033501bf4d..161a3cf32a 100644 --- a/packages/page-parachains/src/Overview/index.tsx +++ b/packages/page-parachains/src/Overview/index.tsx @@ -3,14 +3,18 @@ // of the Apache-2.0 license. See the LICENSE file for details. import { DeriveParachain } from '@polkadot/api-derive/types'; +import { ParaId, ParachainProposal } from '@polkadot/types/interfaces'; +import { ProposalExt } from './types'; import BN from 'bn.js'; import React from 'react'; import { Button } from '@polkadot/react-components'; import { useApi, useCall } from '@polkadot/react-hooks'; +import { Option } from '@polkadot/types'; import Transfer from '../Transfer'; import Parachains from './Parachains'; +import Proposals from './Proposals'; import Register from './Register'; import Summary from './Summary'; @@ -19,9 +23,18 @@ interface Props { sudoKey?: string; } +const transformProposals = { + transform: (entries: [{ args: [ParaId] }, Option][]): ProposalExt[] => { + return entries + .filter(([, opt]) => opt.isSome) + .map(([{ args: [id] }, optProposal]) => ({ id, proposal: optProposal.unwrap() })); + } +}; + function Overview ({ isMine, sudoKey }: Props): React.ReactElement { const { api } = useApi(); const parachains = useCall(api.derive.parachains?.overview); + const proposals = useCall(api.query.proposeParachain?.proposals.entries as any, undefined, transformProposals); const nextFreeId = useCall(api.query.registrar?.nextFreeId); return ( @@ -29,6 +42,7 @@ function Overview ({ isMine, sudoKey }: Props): React.ReactElement { @@ -43,6 +57,9 @@ function Overview ({ isMine, sudoKey }: Props): React.ReactElement { {api.query.parachains && ( )} + {api.query.proposeParachain && ( + + )} ); } diff --git a/packages/page-parachains/src/Overview/types.ts b/packages/page-parachains/src/Overview/types.ts new file mode 100644 index 0000000000..7a1892598f --- /dev/null +++ b/packages/page-parachains/src/Overview/types.ts @@ -0,0 +1,10 @@ +// Copyright 2017-2020 @polkadot/app-parachains 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 { ParaId, ParachainProposal } from '@polkadot/types/interfaces'; + +export interface ProposalExt { + id: ParaId; + proposal: ParachainProposal; +}