Pass alliance retiringAt info (as available) (#8072)

* Pass alliance retiringAt info (as available)

* Retire announcement

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<Props> {
+function Member ({ bestNumber, className, info: { accountId, role }, isPrime, isVoter }: Props): React.ReactElement<Props> {
   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 (
     <tr className={className}>
       <td className='address'>
         <AddressSmall value={accountId} />
       </td>
       <td className='all'>
-        {(info && info.isUpForKicking && (
+        {(info && info.isRetiringAt && (
+          <Tag
+            color='yellow'
+            hover={t<string>('Is retiring')}
+            label={t<string>('retirting')}
+          />
+        )) || (info && info.isUpForKicking && (
           <Tag
             color='red'
             hover={t<string>('Up for kicking')}
@@ -79,8 +96,24 @@ function Member ({ className, info: { accountId, role }, isPrime, isVoter }: Pro
             key='settings'
             value={
               <Menu>
+                {hasNotice && (
+                  <Menu.Item
+                    isDisabled={!!(info && info.isRetiringAt)}
+                    label={t<string>('Announce retirement')}
+                    onClick={doNotice}
+                  />
+                )}
                 <Menu.Item
-                  isDisabled={info && info.isUpForKicking}
+                  isDisabled={
+                    !!info && (
+                      info.isUpForKicking ||
+                      (
+                        hasNotice
+                          ? !bestNumber || !info.isRetiringAt || info.isRetiringAt.lt(bestNumber)
+                          : false
+                      )
+                    )
+                  }
                   label={t<string>('Retire')}
                   onClick={doRetire}
                 />

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<Props> {
   const { t } = useTranslation();
   const [isJoinOpen, toggleJoin] = useToggle();
+  const bestNumber = useBestNumber();
 
   const hdrRef = useRef([
     [t<string>('members'), 'start', 2],
@@ -61,6 +62,7 @@ function Overview ({ className, members, prime, rule, unscrupulous, voters }: Pr
       >
         {members && members.map((m) => (
           <Member
+            bestNumber={bestNumber}
             info={m}
             isPrime={prime === m.accountId}
             isVoter={!!voters && voters.includes(m.accountId)}

packages/page-alliance/src/types.ts

@@ -18,7 +18,8 @@ export interface Member {
 export interface MemberInfo {
   accountId: string;
   deposit?: BN | null;
-  isUpForKicking: boolean;
+  isRetiringAt?: BN | null;
+  isUpForKicking?: boolean;
 }
 
 export interface Rule {

packages/page-alliance/src/useMemberInfo.ts

@@ -11,15 +11,17 @@ import { createNamedHook, useApi, useCall } from '@polkadot/react-hooks';
 function useMemberInfoImpl (accountId: string): MemberInfo | undefined {
   const { api } = useApi();
   const upForKicking = useCall<bool>(api.query.alliance.upForKicking, [accountId]);
+  const retiringAt = useCall<Option<UInt>>(api.query.alliance.retiringMembers, [accountId]);
   const depositOf = useCall<Option<UInt>>(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]
   );
 }