Add council close proposal button (#2595)

packages/page-council/src/Motions/Close.tsx

@@ -0,0 +1,67 @@
+// Copyright 2017-2020 @polkadot/app-council 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 { Hash, Proposal, ProposalIndex } from '@polkadot/types/interfaces';
+
+import React, { useState } from 'react';
+import { Button, InputAddress, Modal, ProposedAction, TxButton } from '@polkadot/react-components';
+import { useAccounts, useToggle } from '@polkadot/react-hooks';
+
+import { useTranslation } from '../translate';
+
+interface Props {
+  hash: Hash;
+  idNumber: ProposalIndex;
+  proposal: Proposal;
+}
+
+function Close ({ hash, idNumber, proposal }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
+  const { hasAccounts } = useAccounts();
+  const [isOpen, toggleOpen] = useToggle();
+  const [accountId, setAccountId] = useState<string | null>(null);
+
+  if (!hasAccounts) {
+    return null;
+  }
+
+  return (
+    <>
+      {isOpen && (
+        <Modal
+          header={t('Close proposal')}
+          size='small'
+        >
+          <Modal.Content>
+            <ProposedAction
+              idNumber={idNumber}
+              proposal={proposal}
+            />
+            <InputAddress
+              help={t('Select the account you wish close the proposal with.')}
+              label={t('sending account')}
+              onChange={setAccountId}
+              type='account'
+            />
+          </Modal.Content>
+          <Modal.Actions onCancel={toggleOpen}>
+            <TxButton
+              accountId={accountId}
+              onStart={toggleOpen}
+              params={[hash, idNumber]}
+              tx='council.close'
+            />
+          </Modal.Actions>
+        </Modal>
+      )}
+      <Button
+        icon='cancel'
+        label={t('Close')}
+        onClick={toggleOpen}
+      />
+    </>
+  );
+}
+
+export default React.memo(Close);

packages/page-council/src/Motions/Motion.tsx

@@ -12,6 +12,7 @@ import { useApi, useCall } from '@polkadot/react-hooks';
 import { BlockToTime } from '@polkadot/react-query';
 import { formatNumber } from '@polkadot/util';
 
+import Close from './Close';
 import Votes from './Votes';
 import Voting from './Voting';
 
@@ -54,15 +55,25 @@ function Motion ({ className, isMember, members, motion: { hash, proposal, votes
       <Votes votes={ayes} />
       <Votes votes={nays} />
       <td className='button'>
-        {bestNumber && end.gt(bestNumber) && (
-          <Voting
-            hash={hash}
-            idNumber={index}
-            isDisabled={!isMember}
-            members={members}
-            prime={prime}
-            proposal={proposal}
-          />
+        {bestNumber && (
+          end.gt(bestNumber)
+            ? (
+              <Voting
+                hash={hash}
+                idNumber={index}
+                isDisabled={!isMember}
+                members={members}
+                prime={prime}
+                proposal={proposal}
+              />
+            )
+            : (
+              <Close
+                hash={hash}
+                idNumber={index}
+                proposal={proposal}
+              />
+            )
         )}
       </td>
       <td className='mini'>