From bc15fa8d793bd1f02044718a43be948a028a38d8 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Tue, 14 May 2019 07:37:55 +0200
Subject: [PATCH] Add ability to second proposals (#1150)

---
 .../app-democracy/src/Overview/Proposal.tsx   | 52 +++++++------
 .../app-democracy/src/Overview/Proposals.tsx  | 15 ++--
 .../app-democracy/src/Overview/Seconding.tsx  | 73 +++++++++++++++++++
 .../app-democracy/src/Overview/Voting.tsx     | 48 ++++++------
 .../src/Overview/VotingButtons.tsx            | 55 --------------
 5 files changed, 138 insertions(+), 105 deletions(-)
 create mode 100644 packages/app-democracy/src/Overview/Seconding.tsx
 delete mode 100644 packages/app-democracy/src/Overview/VotingButtons.tsx

diff --git a/packages/app-democracy/src/Overview/Proposal.tsx b/packages/app-democracy/src/Overview/Proposal.tsx
index 1f179f3798..53428a4ed7 100644
--- a/packages/app-democracy/src/Overview/Proposal.tsx
+++ b/packages/app-democracy/src/Overview/Proposal.tsx
@@ -7,55 +7,61 @@ import { I18nProps } from '@polkadot/ui-app/types';
 import BN from 'bn.js';
 import React from 'react';
 import { AccountId, Balance, Option, Proposal, Tuple, Vector } from '@polkadot/types';
-import { AddressMini, Labelled, Static } from '@polkadot/ui-app';
+import { InputAddress, Labelled, Static } from '@polkadot/ui-app';
 import { withCalls, withMulti } from '@polkadot/ui-api';
 import { formatBalance } from '@polkadot/util';
 
-import Item from './Item';
 import translate from '../translate';
+import Item from './Item';
+import Seconding from './Seconding';
 
 type Props = I18nProps & {
-  democracy_depositOf?: Option<Tuple>,
+  democracy_depositOf?: [Balance, Vector<AccountId>] | null,
   idNumber: BN,
-  value: Tuple
+  value: Proposal
 };
 
 class ProposalDisplay extends React.PureComponent<Props> {
   render () {
-    const { idNumber, value } = this.props;
+    const { democracy_depositOf, idNumber, value } = this.props;
+    const depositors = democracy_depositOf
+      ? democracy_depositOf[1]
+      : [];
 
     return (
       <Item
         idNumber={idNumber}
-        proposal={value[1] as Proposal}
+        proposal={value}
         proposalExtra={this.renderExtra()}
-      />
+      >
+        <Seconding
+          depositors={depositors}
+          proposalId={idNumber}
+        />
+      </Item>
     );
   }
 
   private renderExtra () {
     const { democracy_depositOf, t } = this.props;
 
-    if (!democracy_depositOf || democracy_depositOf.isNone) {
+    if (!democracy_depositOf) {
       return null;
     }
 
-    const value = democracy_depositOf.unwrap();
-    const balance = value[0] as Balance;
-    const addresses = value[1] as Vector<AccountId>;
+    const [balance, addresses] = democracy_depositOf;
 
     return (
       <div className='democracy--Proposal-info'>
         <Labelled label={t('depositors')}>
-          <div>
-            {addresses.map((address, index) => (
-              <AddressMini
-                isPadded={false}
-                key={`${index}:${address}`}
-                value={address}
-              />
-            ))}
-          </div>
+          {addresses.map((address, index) => (
+            <InputAddress
+              isDisabled
+              key={`${index}:${address}`}
+              value={address}
+              withLabel={false}
+            />
+          ))}
         </Labelled>
         <Static label={t('balance')}>
           {formatBalance(balance)}
@@ -69,6 +75,10 @@ export default withMulti(
   ProposalDisplay,
   translate,
   withCalls<Props>(
-    ['query.democracy.depositOf', { paramName: 'idNumber' }]
+    ['query.democracy.depositOf', {
+      paramName: 'idNumber',
+      transform: (value: Option<Tuple>) =>
+        value.unwrapOr(null)
+    }]
   )
 );
diff --git a/packages/app-democracy/src/Overview/Proposals.tsx b/packages/app-democracy/src/Overview/Proposals.tsx
index 196af2e739..029e15b8a7 100644
--- a/packages/app-democracy/src/Overview/Proposals.tsx
+++ b/packages/app-democracy/src/Overview/Proposals.tsx
@@ -4,15 +4,16 @@
 
 import { I18nProps } from '@polkadot/ui-app/types';
 
+import BN from 'bn.js';
 import React from 'react';
-import { Tuple } from '@polkadot/types';
+import { Proposal } from '@polkadot/types';
 import { withCalls, withMulti } from '@polkadot/ui-api';
 
-import Proposal from './Proposal';
+import ProposalDisplay from './Proposal';
 import translate from '../translate';
 
 type Props = I18nProps & {
-  democracy_publicProps?: Array<Tuple>
+  democracy_publicProps?: Array<[BN, Proposal]>
 };
 
 type State = {
@@ -48,10 +49,10 @@ class Proposals extends React.PureComponent<Props> {
       );
     }
 
-    return democracy_publicProps.map((proposal) => (
-      <Proposal
-        idNumber={proposal[0]}
-        key={proposal[0].toString()}
+    return democracy_publicProps.map(([idNumber, proposal]) => (
+      <ProposalDisplay
+        idNumber={idNumber}
+        key={idNumber.toString()}
         value={proposal}
       />
     ));
diff --git a/packages/app-democracy/src/Overview/Seconding.tsx b/packages/app-democracy/src/Overview/Seconding.tsx
new file mode 100644
index 0000000000..6fcc869891
--- /dev/null
+++ b/packages/app-democracy/src/Overview/Seconding.tsx
@@ -0,0 +1,73 @@
+// 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 { I18nProps } from '@polkadot/ui-app/types';
+import { SubjectInfo } from '@polkadot/ui-keyring/observable/types';
+
+import BN from 'bn.js';
+import React from 'react';
+import { AccountId } from '@polkadot/types';
+import { Button, InputAddress, TxButton } from '@polkadot/ui-app';
+import accountObservable from '@polkadot/ui-keyring/observable/accounts';
+import { withMulti, withObservable } from '@polkadot/ui-api';
+
+import translate from '../translate';
+
+type Props = I18nProps & {
+  allAccounts?: SubjectInfo,
+  depositors: Array<AccountId>,
+  proposalId: BN | number
+};
+
+type State = {
+  accountId?: string
+};
+
+class Seconding extends React.PureComponent<Props, State> {
+  state: State = {};
+
+  render () {
+    const { allAccounts, depositors, proposalId, t } = this.props;
+    const { accountId } = this.state;
+    const hasAccounts = allAccounts && Object.keys(allAccounts).length !== 0;
+
+    if (!hasAccounts) {
+      return null;
+    }
+
+    const isDepositor = !!depositors.find((depositor) => depositor.eq(accountId));
+
+    return (
+      <div className='democarcy--Proposal-second'>
+        <InputAddress
+          help={t('Select the account you wish to second with. This will lock your funds until the proposal is either approved or rejected')}
+          label={t('using my account')}
+          onChange={this.onChangeAccount}
+          type='account'
+          withLabel
+        />
+        <Button.Group>
+          <TxButton
+            accountId={accountId}
+            isDisabled={!accountId || isDepositor}
+            isPrimary
+            label={t('Second')}
+            params={[proposalId]}
+            tx='democracy.second'
+          />
+        </Button.Group>
+      </div>
+    );
+  }
+
+  private onChangeAccount = (accountId?: string) => {
+    this.setState({ accountId });
+  }
+}
+
+export default withMulti(
+  Seconding,
+  translate,
+  withObservable(accountObservable.subject, { propName: 'allAccounts' })
+);
diff --git a/packages/app-democracy/src/Overview/Voting.tsx b/packages/app-democracy/src/Overview/Voting.tsx
index 3f80d297bb..c5a51289ea 100644
--- a/packages/app-democracy/src/Overview/Voting.tsx
+++ b/packages/app-democracy/src/Overview/Voting.tsx
@@ -7,11 +7,10 @@ import { SubjectInfo } from '@polkadot/ui-keyring/observable/types';
 
 import BN from 'bn.js';
 import React from 'react';
-import { InputAddress } from '@polkadot/ui-app';
+import { Button, InputAddress, TxButton } from '@polkadot/ui-app';
 import accountObservable from '@polkadot/ui-keyring/observable/accounts';
 import { withMulti, withObservable } from '@polkadot/ui-api';
 
-import VotingButtons from './VotingButtons';
 import translate from '../translate';
 
 type Props = I18nProps & {
@@ -23,11 +22,15 @@ type State = {
   accountId?: string
 };
 
+const VOTE_NAY = 0;
+const VOTE_YAY = -1; // Yes, this is weird, but voting works on i8 with the high bit set
+
 class Voting extends React.PureComponent<Props, State> {
   state: State = {};
 
   render () {
-    const { allAccounts, t } = this.props;
+    const { allAccounts, referendumId, t } = this.props;
+    const { accountId } = this.state;
     const hasAccounts = allAccounts && Object.keys(allAccounts).length !== 0;
 
     if (!hasAccounts) {
@@ -38,33 +41,34 @@ class Voting extends React.PureComponent<Props, State> {
       <div className='democracy--Referendum-vote'>
         <InputAddress
           help={t('Select the account you wish to vote with. You can approve "yay" or deny "nay" the proposal.')}
-          label={t('vote using my account')}
+          label={t('using my account')}
           onChange={this.onChangeAccount}
-          placeholder='0x...'
           type='account'
           withLabel
         />
-        {this.renderButtons()}
+        <Button.Group>
+          <TxButton
+            accountId={accountId}
+            isDisabled={!accountId}
+            isNegative
+            label={t('Nay')}
+            params={[referendumId, VOTE_NAY]}
+            tx='democracy.vote'
+          />
+          <Button.Or />
+          <TxButton
+            accountId={accountId}
+            isDisabled={!accountId}
+            isPositive
+            label={t('Aye')}
+            params={[referendumId, VOTE_YAY]}
+            tx='democracy.vote'
+          />
+        </Button.Group>
       </div>
     );
   }
 
-  private renderButtons () {
-    const { referendumId } = this.props;
-    const { accountId } = this.state;
-
-    if (!accountId) {
-      return null;
-    }
-
-    return (
-      <VotingButtons
-        accountId={accountId}
-        referendumId={referendumId}
-      />
-    );
-  }
-
   private onChangeAccount = (accountId?: string) => {
     this.setState({ accountId });
   }
diff --git a/packages/app-democracy/src/Overview/VotingButtons.tsx b/packages/app-democracy/src/Overview/VotingButtons.tsx
deleted file mode 100644
index 2fc7a1c4c0..0000000000
--- a/packages/app-democracy/src/Overview/VotingButtons.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-// 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 { I18nProps } from '@polkadot/ui-app/types';
-import { ApiProps } from '@polkadot/ui-api/types';
-
-import BN from 'bn.js';
-import React from 'react';
-import { Button, TxButton } from '@polkadot/ui-app';
-import { withApi, withMulti } from '@polkadot/ui-api';
-
-import translate from '../translate';
-
-type Props = ApiProps & I18nProps & {
-  accountId?: string,
-  referendumId: BN
-};
-
-const NAY = 0;
-const YAY = -1; // Yes, this is weird, but works on i8 with the high bit set
-
-class VotingButton extends React.PureComponent<Props> {
-  render () {
-    const { accountId, referendumId, t } = this.props;
-
-    return (
-      <Button.Group>
-        <TxButton
-          accountId={accountId}
-          isDisabled={!accountId}
-          isNegative
-          label={t('Nay')}
-          params={[referendumId, NAY]}
-          tx='democracy.vote'
-        />
-        <Button.Or />
-        <TxButton
-          accountId={accountId}
-          isDisabled={!accountId}
-          isPositive
-          label={t('Aye')}
-          params={[referendumId, YAY]}
-          tx='democracy.vote'
-        />
-      </Button.Group>
-    );
-  }
-}
-
-export default withMulti(
-  VotingButton,
-  translate,
-  withApi
-);