diff --git a/packages/app-democracy/src/Overview/Externals.tsx b/packages/app-democracy/src/Overview/Externals.tsx new file mode 100644 index 0000000000..8fddf40a4f --- /dev/null +++ b/packages/app-democracy/src/Overview/Externals.tsx @@ -0,0 +1,72 @@ +// Copyright 2017-2019 @polkadot/app-democracy 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 { AccountId, Balance, BlockNumber, Hash, Proposal, VoteThreshold } from '@polkadot/types/interfaces'; +import { ITuple } from '@polkadot/types/types'; +import { I18nProps as Props } from '@polkadot/react-components/types'; + +import React, { useEffect, useState } from 'react'; +import { AddressSmall, Table } from '@polkadot/react-components'; +import { useApi, trackStream } from '@polkadot/react-hooks'; +import { FormatBalance } from '@polkadot/react-query'; +import { Bytes, Option } from '@polkadot/types'; + +import translate from '../translate'; +import ProposalCell from './ProposalCell'; + +function Externals ({ className, t }: Props): React.ReactElement | null { + const { api } = useApi(); + const external = trackStream>>(api.query.democracy.nextExternal, []); + const [hash, setHash] = useState(null); + const [expanded, setExpanded] = useState<{ at: BlockNumber; balance: Balance; proposer: AccountId; proposal: Proposal } | null>(null); + const preimage = trackStream>>(api.query.democracy.preimages, [hash]); + + useEffect((): void => { + setHash( + external?.isSome + ? external.unwrap()[0] + : null + ); + }, [external]); + + useEffect((): void => { + if (preimage?.isSome) { + const preImage = preimage.unwrap(); + + setExpanded({ + at: preImage[3], + balance: preImage[2], + proposer: preImage[1], + proposal: api.createType('Proposal', preImage[0].toU8a(true)) + }); + } else { + setExpanded(null); + } + }, [preimage]); + + if (!hash) { + return null; + } + + return ( +
+

{t('externals')}

+ + + + + + + + +
+ {expanded && } + + {expanded && {t('locked')}} value={expanded.balance} />} +
+
+ ); +} + +export default translate(Externals); diff --git a/packages/app-democracy/src/Overview/index.tsx b/packages/app-democracy/src/Overview/index.tsx index b9b298bce0..0d6ce9ab05 100644 --- a/packages/app-democracy/src/Overview/index.tsx +++ b/packages/app-democracy/src/Overview/index.tsx @@ -9,6 +9,7 @@ import styled from 'styled-components'; import { Button } from '@polkadot/react-components'; import translate from '../translate'; +import Externals from './Externals'; import Proposals from './Proposals'; import Referendums from './Referendums'; import Summary from './Summary'; @@ -48,6 +49,7 @@ function Overview ({ className, t }: Props): React.ReactElement { )} + ); }