diff --git a/packages/page-alliance/src/Members/Member.tsx b/packages/page-alliance/src/Members/Member.tsx index 36ef470d79..efa3353cb8 100644 --- a/packages/page-alliance/src/Members/Member.tsx +++ b/packages/page-alliance/src/Members/Member.tsx @@ -1,6 +1,7 @@ // Copyright 2017-2022 @polkadot/app-alliance authors & contributors // SPDX-License-Identifier: Apache-2.0 +import type { BN } from '@polkadot/util'; import type { Member as MemberType } from '../types'; import React, { useCallback, useContext, useMemo } from 'react'; @@ -13,18 +14,20 @@ import { useTranslation } from '../translate'; import useMemberInfo from '../useMemberInfo'; interface Props { + bestNumber?: BN; className?: string; info: MemberType; isPrime: boolean; isVoter: boolean; } -function Member ({ className, info: { accountId, role }, isPrime, isVoter }: Props): React.ReactElement { +function Member ({ bestNumber, className, info: { accountId, role }, isPrime, isVoter }: Props): React.ReactElement { const { t } = useTranslation(); const { api } = useApi(); const { allAccounts } = useAccounts(); const info = useMemberInfo(accountId); const { queueExtrinsic } = useContext(StatusContext); + const hasNotice = !!api.tx.alliance.giveRetirementNotice; const hasActions = useMemo( () => allAccounts.includes(accountId), @@ -39,13 +42,27 @@ function Member ({ className, info: { accountId, role }, isPrime, isVoter }: Pro [accountId, api, queueExtrinsic] ); + const doNotice = useCallback( + () => queueExtrinsic({ + accountId, + extrinsic: api.tx.alliance.giveRetirementNotice() + }), + [accountId, api, queueExtrinsic] + ); + return ( - {(info && info.isUpForKicking && ( + {(info && info.isRetiringAt && ( + ('Is retiring')} + label={t('retirting')} + /> + )) || (info && info.isUpForKicking && ( ('Up for kicking')} @@ -79,8 +96,24 @@ function Member ({ className, info: { accountId, role }, isPrime, isVoter }: Pro key='settings' value={ + {hasNotice && ( + ('Announce retirement')} + onClick={doNotice} + /> + )} ('Retire')} onClick={doRetire} /> diff --git a/packages/page-alliance/src/Members/index.tsx b/packages/page-alliance/src/Members/index.tsx index 135a91a0d9..8a0166b795 100644 --- a/packages/page-alliance/src/Members/index.tsx +++ b/packages/page-alliance/src/Members/index.tsx @@ -6,7 +6,7 @@ import type { Member as MemberType, Rule, Unscrupulous } from '../types'; import React, { useRef } from 'react'; import { Button, Table } from '@polkadot/react-components'; -import { useToggle } from '@polkadot/react-hooks'; +import { useBestNumber, useToggle } from '@polkadot/react-hooks'; import { useTranslation } from '../translate'; import Join from './Join'; @@ -26,6 +26,7 @@ interface Props { function Overview ({ className, members, prime, rule, unscrupulous, voters }: Props): React.ReactElement { const { t } = useTranslation(); const [isJoinOpen, toggleJoin] = useToggle(); + const bestNumber = useBestNumber(); const hdrRef = useRef([ [t('members'), 'start', 2], @@ -61,6 +62,7 @@ function Overview ({ className, members, prime, rule, unscrupulous, voters }: Pr > {members && members.map((m) => ( (api.query.alliance.upForKicking, [accountId]); + const retiringAt = useCall>(api.query.alliance.retiringMembers, [accountId]); const depositOf = useCall>(api.query.alliance.depositOf, [accountId]); return useMemo( - () => upForKicking && depositOf && { + () => depositOf && { accountId, deposit: depositOf.unwrapOr(null), - isUpForKicking: upForKicking.isTrue + isUpForKicking: upForKicking && upForKicking.isTrue, + retiringAt: retiringAt && retiringAt.unwrapOr(null) }, - [accountId, upForKicking, depositOf] + [accountId, depositOf, retiringAt, upForKicking] ); }