diff --git a/packages/app-society/src/Overview/Bid.tsx b/packages/app-society/src/Overview/Bid.tsx new file mode 100644 index 000000000000..49b4b42ef28e --- /dev/null +++ b/packages/app-society/src/Overview/Bid.tsx @@ -0,0 +1,37 @@ +// Copyright 2017-2020 @polkadot/app-society 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 { Bid } from '@polkadot/types/interfaces'; + +import React from 'react'; +import { AddressSmall } from '@polkadot/react-components'; +import { FormatBalance } from '@polkadot/react-query'; + +import { useTranslation } from '../translate'; + +interface Props { + value: Bid; +} + +export default function BidRow ({ value: { who, kind, value } }: Props): React.ReactElement { + const { t } = useTranslation(); + + return ( + + + + + + + {kind.type} + + + {t('value')}} + value={value} + /> + + + ); +} diff --git a/packages/app-society/src/Overview/Bids.tsx b/packages/app-society/src/Overview/Bids.tsx new file mode 100644 index 000000000000..6ba10987c324 --- /dev/null +++ b/packages/app-society/src/Overview/Bids.tsx @@ -0,0 +1,43 @@ +// Copyright 2017-2020 @polkadot/app-society 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 { Bid } from '@polkadot/types/interfaces'; + +import React from 'react'; +import { Table } from '@polkadot/react-components'; +import { useApi, useCall } from '@polkadot/react-hooks'; + +import { useTranslation } from '../translate'; +import BidRow from './Bid'; + +interface Props { + className?: string; +} + +export default function Bids ({ className }: Props): React.ReactElement { + const { t } = useTranslation(); + const { api } = useApi(); + const bids = useCall(api.query.society.bids, []); + + return ( +
+

{t('bids')}

+ {bids?.length + ? ( + + + {bids.map((bid): React.ReactNode => ( + + ))} + +
+ ) + : t('No bids') + } +
+ ); +} diff --git a/packages/app-society/src/Overview/Candidate.tsx b/packages/app-society/src/Overview/Candidate.tsx index 6a99d25acc52..3a0803216d4f 100644 --- a/packages/app-society/src/Overview/Candidate.tsx +++ b/packages/app-society/src/Overview/Candidate.tsx @@ -24,11 +24,11 @@ export default function Candidate ({ value: { accountId, kind, value } }: Props) - {kind.toString()} + {kind.type} {t('value')}} value={value} /> diff --git a/packages/app-society/src/Overview/Summary.tsx b/packages/app-society/src/Overview/Summary.tsx index d6083894d6cd..a158827d8944 100644 --- a/packages/app-society/src/Overview/Summary.tsx +++ b/packages/app-society/src/Overview/Summary.tsx @@ -3,11 +3,11 @@ // of the Apache-2.0 license. See the LICENSE file for details. import { DeriveSociety } from '@polkadot/api-derive/types'; -import { AccountId } from '@polkadot/types/interfaces'; +import { AccountId, BlockNumber } from '@polkadot/types/interfaces'; import React from 'react'; import styled from 'styled-components'; -import { AccountName, IdentityIcon, SummaryBox, CardSummary } from '@polkadot/react-components'; +import { AccountIndex, IdentityIcon, SummaryBox, CardSummary } from '@polkadot/react-components'; import { useApi, useCall } from '@polkadot/react-hooks'; import { formatBalance } from '@polkadot/util'; @@ -34,7 +34,7 @@ function Name ({ label, value }: NameProps): React.ReactElement | nul size={24} value={value} /> - + ); @@ -45,6 +45,7 @@ function Summary ({ className }: Props): React.ReactElement { const { api } = useApi(); const info = useCall(api.derive.society.info, []); const members = useCall(api.derive.society.members, []); + const bestNumber = useCall(api.derive.chain.bestNumber, []); const pot = info?.pot.gtn(0) ? info.pot.toString() @@ -58,19 +59,42 @@ function Summary ({ className }: Props): React.ReactElement { value={info?.head} /> -
+
{info && members && ( {members.length}/{info.maxMembers.toString()} )}
+ {bestNumber && ( + <> +
+ +
+
+ +
+ + )}
- {pot && ( - - {formatBalance(pot, false)}{formatBalance.calcSi(pot).value} - - )} + + {pot + ? <>{formatBalance(pot, false)}{formatBalance.calcSi(pot).value} + : '-' + } +
); @@ -80,7 +104,7 @@ export default styled(Summary)` .society--header--account { white-space: nowrap; - .ui--AccountName, + .ui--AccountIndex, .ui--IdentityIcon { display: inline-block; } diff --git a/packages/app-society/src/Overview/index.tsx b/packages/app-society/src/Overview/index.tsx index 554379b0f933..ed35ca61b765 100644 --- a/packages/app-society/src/Overview/index.tsx +++ b/packages/app-society/src/Overview/index.tsx @@ -5,6 +5,7 @@ import React from 'react'; import styled from 'styled-components'; +import Bids from './Bids'; import Candidates from './Candidates'; import Members from './Members'; import Summary from './Summary'; @@ -19,6 +20,7 @@ function Overview ({ className }: Props): React.ReactElement { + ); }