From d702a3ab05ceef2a10b86edd18adae289210152a Mon Sep 17 00:00:00 2001
From: Keith Ingram <kwingram25@gmail.com>
Date: Tue, 3 Dec 2019 18:07:04 -0500
Subject: [PATCH 1/5] Propose tech committe motions

---
 .../app-tech-comm/src/Overview/Summary.tsx    |  8 +-
 packages/app-tech-comm/src/Overview/index.tsx | 17 +---
 packages/app-tech-comm/src/Overview/types.ts  | 17 ----
 .../app-tech-comm/src/Proposals/Proposal.tsx  |  3 +-
 .../app-tech-comm/src/Proposals/Propose.tsx   | 98 +++++++++++++++++++
 .../app-tech-comm/src/Proposals/index.tsx     | 27 +++--
 packages/app-tech-comm/src/index.tsx          |  5 +-
 packages/app-tech-comm/src/types.ts           | 12 +++
 packages/react-components/src/InputNumber.tsx |  4 +-
 packages/react-hooks/src/types.ts             |  7 +-
 packages/react-hooks/src/useTx.ts             | 40 ++++----
 11 files changed, 170 insertions(+), 68 deletions(-)
 delete mode 100644 packages/app-tech-comm/src/Overview/types.ts
 create mode 100644 packages/app-tech-comm/src/Proposals/Propose.tsx
 create mode 100644 packages/app-tech-comm/src/types.ts

diff --git a/packages/app-tech-comm/src/Overview/Summary.tsx b/packages/app-tech-comm/src/Overview/Summary.tsx
index c75ed3f5726a..8a6674f21f47 100644
--- a/packages/app-tech-comm/src/Overview/Summary.tsx
+++ b/packages/app-tech-comm/src/Overview/Summary.tsx
@@ -3,8 +3,7 @@
 // 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/react-components/types';
-import { AccountId, Hash } from '@polkadot/types/interfaces';
+import { ComponentProps as Props } from '../types';
 
 import React from 'react';
 import { SummaryBox, CardSummary } from '@polkadot/react-components';
@@ -14,11 +13,6 @@ import { formatNumber } from '@polkadot/util';
 
 import translate from '../translate';
 
-interface Props extends I18nProps {
-  members?: AccountId[];
-  proposals?: Hash[];
-}
-
 function Summary ({ className, members, proposals, t }: Props): React.ReactElement<Props> {
   const { api } = useApi();
   const proposalCount = trackStream<u32>(api.query.technicalCommittee.proposalCount, []);
diff --git a/packages/app-tech-comm/src/Overview/index.tsx b/packages/app-tech-comm/src/Overview/index.tsx
index aa97c3a027b5..76144c0d554a 100644
--- a/packages/app-tech-comm/src/Overview/index.tsx
+++ b/packages/app-tech-comm/src/Overview/index.tsx
@@ -2,19 +2,13 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { AccountId, Hash } from '@polkadot/types/interfaces';
+import { ComponentProps as Props } from '../types';
 
 import React from 'react';
 
 import Members from './Members';
 import Summary from './Summary';
 
-interface Props {
-  className?: string;
-  members?: AccountId[];
-  proposals?: Hash[];
-}
-
 export default function Overview ({ className, members, proposals }: Props): React.ReactElement<Props> {
   return (
     <div className={className}>
@@ -22,12 +16,9 @@ export default function Overview ({ className, members, proposals }: Props): Rea
         members={members}
         proposals={proposals}
       />
-      {/* <Button.Group>
-        <SubmitCandidacy electionsInfo={electionsInfo} />
-        <Button.Or />
-        <Vote electionsInfo={electionsInfo} />
-      </Button.Group> */}
-      <Members members={members} />
+      <Members
+        members={members}
+      />
     </div>
   );
 }
diff --git a/packages/app-tech-comm/src/Overview/types.ts b/packages/app-tech-comm/src/Overview/types.ts
deleted file mode 100644
index 8e1d3534df36..000000000000
--- a/packages/app-tech-comm/src/Overview/types.ts
+++ /dev/null
@@ -1,17 +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 { SetIndex } from '@polkadot/types/interfaces';
-import { DerivedElectionsInfo } from '@polkadot/api-derive/types';
-
-import BN from 'bn.js';
-
-export interface ComponentProps {
-  electionsInfo: DerivedElectionsInfo;
-}
-
-export interface VoterPosition {
-  setIndex: SetIndex;
-  globalIndex: BN;
-}
diff --git a/packages/app-tech-comm/src/Proposals/Proposal.tsx b/packages/app-tech-comm/src/Proposals/Proposal.tsx
index 8c3dd977dc12..8b2f6102f5c1 100644
--- a/packages/app-tech-comm/src/Proposals/Proposal.tsx
+++ b/packages/app-tech-comm/src/Proposals/Proposal.tsx
@@ -21,9 +21,10 @@ interface Props extends I18nProps {
 
 function Proposal ({ className, hash, t }: Props): React.ReactElement<Props> | null {
   const { api } = useApi();
-  const proposal = trackStream<ProposalType>(api.query.technicalCommittee.proposalOf, [hash]);
+  const option = trackStream<Option<ProposalType>>(api.query.technicalCommittee.proposalOf, [hash]);
   const votes = trackStream<Option<Votes>>(api.query.technicalCommittee.voting, [hash]);
 
+  const proposal = option?.unwrapOr(null) || null;
   if (!proposal || !votes?.isSome) {
     return null;
   }
diff --git a/packages/app-tech-comm/src/Proposals/Propose.tsx b/packages/app-tech-comm/src/Proposals/Propose.tsx
new file mode 100644
index 000000000000..868347f4eb17
--- /dev/null
+++ b/packages/app-tech-comm/src/Proposals/Propose.tsx
@@ -0,0 +1,98 @@
+// Copyright 2017-2019 @polkadot/ui-staking 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/react-components/types';
+import { TxSource, TxDef } from '@polkadot/react-hooks/types';
+import { Call } from '@polkadot/types/interfaces';
+
+import BN from 'bn.js';
+import React, { useEffect, useState } from 'react';
+import { registry } from '@polkadot/react-api';
+import { Extrinsic, InputNumber, TxModalNew as TxModal } from '@polkadot/react-components';
+import { useApi, useTx } from '@polkadot/react-hooks';
+import { createType } from '@polkadot/types';
+
+import translate from '../translate';
+
+interface Props extends I18nProps {
+  isOpen: boolean;
+  memberCount: number;
+  onClose: () => void;
+}
+
+function Propose ({ t, isOpen, onClose, memberCount = 0 }: Props): React.ReactElement<Props> {
+  const _hasThreshold = (threshold?: BN | null): boolean => {
+    return !!threshold &&; !threshold.isZero() && threshold.lten(memberCount);
+  }
+
+  const [method, setMethod] = useState<Call | null>(null);
+  const [[threshold, hasThreshold], setThreshold] = useState<[BN | null, boolean]>([
+    new BN(memberCount / 2 + 1),
+    true
+  ]);
+
+  const _onChangeThreshold = (threshold?: BN): void => {
+    setThreshold([threshold || null, _hasThreshold(threshold)]);
+  };
+
+  const _onChangeExtrinsic = (method?: Call): void => {
+    !!method && setMethod(method);
+  };
+
+  useEffect(
+    (): void => setThreshold([threshold, _hasThreshold(threshold)]),
+    [memberCount]
+  );
+
+  const { apiDefaultTxSudo } = useApi();
+  const txState = useTx(
+    (): TxSource<TxDef> => [
+      [
+        'technicalCommittee.propose',
+        [threshold, method ? createType(registry, 'Proposal', method) : null]
+      ],
+      !!method && hasThreshold
+    ],
+    [memberCount, method, threshold, hasThreshold],
+    {
+      onSuccess: onClose
+    }
+  );
+
+  return (
+    <TxModal
+      isOpen={isOpen}
+      onClose={onClose}
+      {...txState}
+      header={t('Propose a committee motion')}
+      content={
+        <>
+          <InputNumber
+            className='medium'
+            label={t('threshold')}
+            help={t('The minimum number of committee votes required to approve this motion')}
+            isError={!hasThreshold}
+            onChange={_onChangeThreshold}
+            onEnter={txState.sendTx}
+            placeholder={
+              t(
+                'Positive number between 1 and {{memberCount}}',
+                { replace: { memberCount } }
+              )
+            }
+            value={threshold || undefined}
+          />
+          <Extrinsic
+            defaultValue={apiDefaultTxSudo}
+            label={t('proposal')}
+            onChange={_onChangeExtrinsic}
+            onEnter={txState.sendTx}
+          />
+        </>
+      }
+    />
+  );
+}
+
+export default translate(Propose);
diff --git a/packages/app-tech-comm/src/Proposals/index.tsx b/packages/app-tech-comm/src/Proposals/index.tsx
index 96b3707651c7..f342999743f4 100644
--- a/packages/app-tech-comm/src/Proposals/index.tsx
+++ b/packages/app-tech-comm/src/Proposals/index.tsx
@@ -3,22 +3,33 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { Hash } from '@polkadot/types/interfaces';
-import { I18nProps } from '@polkadot/react-components/types';
+import { ComponentProps as Props } from '../types';
 
-import React from 'react';
-import { Table } from '@polkadot/react-components';
+import React, { useState } from 'react';
+import { Button, Table } from '@polkadot/react-components';
 
 import Proposal from './Proposal';
+import Propose from './Propose';
 import translate from '../translate';
 
-interface Props extends I18nProps {
-  proposals?: Hash[];
-}
+function Proposals ({ className, members, proposals, t }: Props): React.ReactElement<Props> {
+  const [isProposeOpen, setIsProposeOpen] = useState(false);
 
-function Proposals ({ className, proposals, t }: Props): React.ReactElement<Props> {
   return (
     <div className={className}>
-      {/* <Propose /> */}
+      <Button.Group>
+        <Button
+          isPrimary
+          label={t('Propose a committee motion')}
+          icon='add'
+          onClick={(): void => setIsProposeOpen(true)}
+        />
+      </Button.Group>
+      <Propose
+        isOpen={isProposeOpen}
+        memberCount={members?.length || 0}
+        onClose={(): void => setIsProposeOpen(false)}
+      />
       {proposals?.length
         ? (
           <Table>
diff --git a/packages/app-tech-comm/src/index.tsx b/packages/app-tech-comm/src/index.tsx
index 8c4082f4db4d..9d1fef8aed01 100644
--- a/packages/app-tech-comm/src/index.tsx
+++ b/packages/app-tech-comm/src/index.tsx
@@ -43,7 +43,10 @@ function App ({ basePath, className, t }: Props): React.ReactElement<Props> {
       </header>
       <Switch>
         <Route path={`${basePath}/proposals`}>
-          <Proposals proposals={proposals} />
+          <Proposals
+            members={members}
+            proposals={proposals}
+          />
         </Route>
         <Route path={basePath}>
           <Overview
diff --git a/packages/app-tech-comm/src/types.ts b/packages/app-tech-comm/src/types.ts
new file mode 100644
index 000000000000..da95419b1e29
--- /dev/null
+++ b/packages/app-tech-comm/src/types.ts
@@ -0,0 +1,12 @@
+// 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/react-components/types';
+import { AccountId, Hash } from '@polkadot/types/interfaces';
+
+export interface ComponentProps extends I18nProps {
+  className?: string;
+  proposals?: Hash[];
+  members?: AccountId[];
+}
diff --git a/packages/react-components/src/InputNumber.tsx b/packages/react-components/src/InputNumber.tsx
index 9b04b3b40657..7ee1cfdbdbfb 100644
--- a/packages/react-components/src/InputNumber.tsx
+++ b/packages/react-components/src/InputNumber.tsx
@@ -213,8 +213,8 @@ function InputNumber (props: Props): React.ReactElement<Props> {
   }, [value, si, bitLength, maxValue]);
 
   useEffect((): void => {
-    onChange && isValid && onChange(valueBn);
-  }, [isValid, valueBn]);
+    onChange && onChange(valueBn);
+  }, [valueBn]);
 
   const _onChange = (input: string): void => {
     setValues(getValuesFromString(input, si, props));
diff --git a/packages/react-hooks/src/types.ts b/packages/react-hooks/src/types.ts
index 8175f10c9781..99ef9f82ab25 100644
--- a/packages/react-hooks/src/types.ts
+++ b/packages/react-hooks/src/types.ts
@@ -7,7 +7,11 @@ import { AccountId, Balance, BlockNumber, Call, Hash, SessionIndex } from '@polk
 import { IExtrinsic } from '@polkadot/types/types';
 import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
 
-export type TxSources = SubmittableExtrinsic | IExtrinsic | Call | [string, any[] | ConstructTxFn] | null;
+export type TxDef = [string, any[] | ConstructTxFn];
+
+export type TxDefs = SubmittableExtrinsic | IExtrinsic | Call | TxDef | null;
+
+export type TxSource<T extends TxDefs> = [T, boolean];
 
 export interface Slash {
   accountId: AccountId;
@@ -25,6 +29,7 @@ export interface SessionRewards {
 
 export interface ExtrinsicAndSenders {
   extrinsic: SubmittableExtrinsic | null;
+  isSubmittable: boolean;
   sendTx: () => void;
   sendUnsigned: () => void;
 }
diff --git a/packages/react-hooks/src/useTx.ts b/packages/react-hooks/src/useTx.ts
index 7dd3b0caeace..e1ab15b5ea0d 100644
--- a/packages/react-hooks/src/useTx.ts
+++ b/packages/react-hooks/src/useTx.ts
@@ -4,7 +4,7 @@
 
 import { StringOrNull } from '@polkadot/react-components/types';
 import { Call } from '@polkadot/types/interfaces';
-import { ExtrinsicAndSenders, TxSources, TxProps, TxState } from './types';
+import { ExtrinsicAndSenders, TxDef, TxDefs, TxSource, TxProps, TxState } from './types';
 
 import { useContext, useMemo, useState } from 'react';
 import { ApiPromise } from '@polkadot/api';
@@ -13,38 +13,41 @@ import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
 import { assert, isFunction } from '@polkadot/util';
 import useApi from './useApi';
 
-function getExtrinsic<T extends TxSources> (api: ApiPromise, tx: T): SubmittableExtrinsic | null {
-  if (!tx) {
+function getExtrinsic<T extends TxDefs> (api: ApiPromise, txDef: T): SubmittableExtrinsic | null {
+  if (!txDef) {
     return null;
   }
-  if (Array.isArray(tx)) {
-    const [section, method] = tx[0].split('.');
+
+  if (Array.isArray(txDef)) {
+    const [section, method] = txDef[0].split('.');
 
     assert(api.tx[section] && api.tx[section][method], `Unable to find api.tx.${section}.${method}`);
     try {
       return api.tx[section][method](...(
-        isFunction(tx[1])
-          ? tx[1]()
-          : tx[1]
+        isFunction(txDef[1])
+          ? txDef[1]()
+          : txDef[1]
       )) as any as SubmittableExtrinsic;
     } catch (e) {
       return null;
     }
   } else {
-    if ((tx as Call).callIndex) {
-      const fn = api.findCall(tx.callIndex);
+    if ((txDef as Call).callIndex) {
+      const fn = api.findCall(txDef.callIndex);
 
-      return api.tx[fn.section][fn.method](...tx.args);
+      return api.tx[fn.section][fn.method](...txDef.args);
     }
 
-    return tx as any as SubmittableExtrinsic;
+    return txDef as any as SubmittableExtrinsic;
   }
 }
 
-export default function useTx<T extends TxSources> (source: T, { accountId: anAccountId, onChangeAccountId, onStart, onSuccess, onFailed, onUpdate }: TxProps = {}): TxState {
+export default function useTx<T extends TxDef> (memoFn: (...args: any[]) => TxSource<T>, memoArr: any[], { accountId: anAccountId, onChangeAccountId, onStart, onSuccess, onFailed, onUpdate }: TxProps = {}): TxState {
   const { api } = useApi();
   const { queueExtrinsic } = useContext(StatusContext);
 
+  const txSource = useMemo(memoFn, memoArr);
+
   const [accountId, setAccountId] = useState<StringOrNull>(anAccountId || null);
   const [isSending, setIsSending] = useState(false);
 
@@ -84,11 +87,11 @@ export default function useTx<T extends TxSources> (source: T, { accountId: anAc
     [onUpdate]
   );
 
-  function getExtrinsicAndSenders (api: ApiPromise, accountId: StringOrNull, tx: T): ExtrinsicAndSenders {
-    const extrinsic = getExtrinsic<T>(api, tx);
+  function getExtrinsicAndSenders (api: ApiPromise, accountId: StringOrNull, [txDef, isSubmittable]: TxSource<T>): ExtrinsicAndSenders {
+    const extrinsic = getExtrinsic<T>(api, txDef);
 
     function _sendTx (isUnsigned?: boolean): void {
-      !!extrinsic && queueExtrinsic({
+      !!extrinsic && isSubmittable && queueExtrinsic({
         accountId,
         extrinsic,
         isUnsigned,
@@ -101,14 +104,15 @@ export default function useTx<T extends TxSources> (source: T, { accountId: anAc
 
     return {
       extrinsic,
+      isSubmittable: !!accountId && !!extrinsic && isSubmittable,
       sendTx: (): void => _sendTx(),
       sendUnsigned: (): void => _sendTx(true)
     };
   }
 
   const txAndSenders = useMemo<ExtrinsicAndSenders>(
-    (): ExtrinsicAndSenders => getExtrinsicAndSenders(api, accountId, source),
-    [accountId, source]
+    (): ExtrinsicAndSenders => getExtrinsicAndSenders(api, accountId, txSource),
+    [accountId, txSource]
   );
 
   return {

From 109c2864eeeaceddac9a9f3ba283eb7379b82c0a Mon Sep 17 00:00:00 2001
From: Keith Ingram <kwingram25@gmail.com>
Date: Tue, 3 Dec 2019 22:38:53 -0500
Subject: [PATCH 2/5] bug, ignore .vscode

---
 .gitignore                                        | 1 +
 packages/app-tech-comm/src/Proposals/Proposal.tsx | 1 -
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index 2ac9c3d1be63..151e2d373e54 100644
--- a/.gitignore
+++ b/.gitignore
@@ -14,3 +14,4 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 .idea/
+.vscode/
diff --git a/packages/app-tech-comm/src/Proposals/Proposal.tsx b/packages/app-tech-comm/src/Proposals/Proposal.tsx
index 31988fe81c57..6c4545b1c4bd 100644
--- a/packages/app-tech-comm/src/Proposals/Proposal.tsx
+++ b/packages/app-tech-comm/src/Proposals/Proposal.tsx
@@ -29,7 +29,6 @@ function Proposal ({ className, hash, t }: Props): React.ReactElement<Props> | n
     return null;
   }
 
-  const proposal = _proposal?.unwrapOr(null);
   const { ayes, index, nays, threshold } = votes.unwrap();
 
   return (

From 0d7a2e116ccacbce43ea099b1adf10276cf7764e Mon Sep 17 00:00:00 2001
From: Keith Ingram <kwingram25@gmail.com>
Date: Tue, 3 Dec 2019 22:51:43 -0500
Subject: [PATCH 3/5] linting

---
 packages/app-tech-comm/src/Overview/Summary.tsx   | 5 ++++-
 packages/app-tech-comm/src/Proposals/Proposal.tsx | 2 +-
 packages/app-tech-comm/src/Proposals/Propose.tsx  | 4 ++--
 packages/app-tech-comm/src/Proposals/index.tsx    | 5 ++++-
 packages/app-tech-comm/src/types.ts               | 3 +--
 packages/react-components/src/types.ts            | 1 -
 6 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/packages/app-tech-comm/src/Overview/Summary.tsx b/packages/app-tech-comm/src/Overview/Summary.tsx
index 8a6674f21f47..0653a24de329 100644
--- a/packages/app-tech-comm/src/Overview/Summary.tsx
+++ b/packages/app-tech-comm/src/Overview/Summary.tsx
@@ -3,7 +3,8 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { ComponentProps as Props } from '../types';
+import { I18nProps } from '@polkadot/react-components/types';
+import { ComponentProps } from '../types';
 
 import React from 'react';
 import { SummaryBox, CardSummary } from '@polkadot/react-components';
@@ -13,6 +14,8 @@ import { formatNumber } from '@polkadot/util';
 
 import translate from '../translate';
 
+interface Props extends ComponentProps, I18nProps {}
+
 function Summary ({ className, members, proposals, t }: Props): React.ReactElement<Props> {
   const { api } = useApi();
   const proposalCount = trackStream<u32>(api.query.technicalCommittee.proposalCount, []);
diff --git a/packages/app-tech-comm/src/Proposals/Proposal.tsx b/packages/app-tech-comm/src/Proposals/Proposal.tsx
index 6c4545b1c4bd..f40c3a46c30d 100644
--- a/packages/app-tech-comm/src/Proposals/Proposal.tsx
+++ b/packages/app-tech-comm/src/Proposals/Proposal.tsx
@@ -29,7 +29,7 @@ function Proposal ({ className, hash, t }: Props): React.ReactElement<Props> | n
     return null;
   }
 
-  const { ayes, index, nays, threshold } = votes.unwrap();
+  const { ayes, index, nays, threshold }: Votes = votes?.unwrap() || {};
 
   return (
     <tr className={className}>
diff --git a/packages/app-tech-comm/src/Proposals/Propose.tsx b/packages/app-tech-comm/src/Proposals/Propose.tsx
index 868347f4eb17..e185d1b2efbc 100644
--- a/packages/app-tech-comm/src/Proposals/Propose.tsx
+++ b/packages/app-tech-comm/src/Proposals/Propose.tsx
@@ -23,8 +23,8 @@ interface Props extends I18nProps {
 
 function Propose ({ t, isOpen, onClose, memberCount = 0 }: Props): React.ReactElement<Props> {
   const _hasThreshold = (threshold?: BN | null): boolean => {
-    return !!threshold &&; !threshold.isZero() && threshold.lten(memberCount);
-  }
+    return !!threshold && !threshold.isZero() && threshold.lten(memberCount);
+  };
 
   const [method, setMethod] = useState<Call | null>(null);
   const [[threshold, hasThreshold], setThreshold] = useState<[BN | null, boolean]>([
diff --git a/packages/app-tech-comm/src/Proposals/index.tsx b/packages/app-tech-comm/src/Proposals/index.tsx
index f342999743f4..963ff04e68d2 100644
--- a/packages/app-tech-comm/src/Proposals/index.tsx
+++ b/packages/app-tech-comm/src/Proposals/index.tsx
@@ -2,8 +2,9 @@
 // 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/react-components/types';
 import { Hash } from '@polkadot/types/interfaces';
-import { ComponentProps as Props } from '../types';
+import { ComponentProps } from '../types';
 
 import React, { useState } from 'react';
 import { Button, Table } from '@polkadot/react-components';
@@ -12,6 +13,8 @@ import Proposal from './Proposal';
 import Propose from './Propose';
 import translate from '../translate';
 
+interface Props extends ComponentProps, I18nProps {}
+
 function Proposals ({ className, members, proposals, t }: Props): React.ReactElement<Props> {
   const [isProposeOpen, setIsProposeOpen] = useState(false);
 
diff --git a/packages/app-tech-comm/src/types.ts b/packages/app-tech-comm/src/types.ts
index da95419b1e29..f7d9e3ec86e1 100644
--- a/packages/app-tech-comm/src/types.ts
+++ b/packages/app-tech-comm/src/types.ts
@@ -2,10 +2,9 @@
 // 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/react-components/types';
 import { AccountId, Hash } from '@polkadot/types/interfaces';
 
-export interface ComponentProps extends I18nProps {
+export interface ComponentProps {
   className?: string;
   proposals?: Hash[];
   members?: AccountId[];
diff --git a/packages/react-components/src/types.ts b/packages/react-components/src/types.ts
index 555fe5b19743..e4b4bed503a7 100644
--- a/packages/react-components/src/types.ts
+++ b/packages/react-components/src/types.ts
@@ -113,7 +113,6 @@ export interface TxModalProps extends I18nProps, TxState {
   isDisabled?: boolean;
   isOpen?: boolean;
   isUnsigned?: boolean;
-  isSubmittable?: boolean;
   content: React.ReactNode;
   preContent?: React.ReactNode;
   trigger?: TxTrigger;

From 0cd3e78a93ca3093ba40dfdb08b44ab7eed13d50 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Wed, 4 Dec 2019 12:09:25 +0100
Subject: [PATCH 4/5] Some cleanups

---
 packages/app-tech-comm/src/Overview/index.tsx | 35 +++++--
 .../app-tech-comm/src/Proposals/Proposal.tsx  |  8 +-
 .../app-tech-comm/src/Proposals/Propose.tsx   | 95 ++++++++-----------
 .../app-tech-comm/src/Proposals/index.tsx     | 22 +----
 packages/react-components/src/TxModalNew.tsx  | 12 ++-
 packages/react-components/src/types.ts        |  2 +-
 packages/react-hooks/src/useTx.ts             | 44 ++++-----
 7 files changed, 101 insertions(+), 117 deletions(-)

diff --git a/packages/app-tech-comm/src/Overview/index.tsx b/packages/app-tech-comm/src/Overview/index.tsx
index 76144c0d554a..178a469ab9dc 100644
--- a/packages/app-tech-comm/src/Overview/index.tsx
+++ b/packages/app-tech-comm/src/Overview/index.tsx
@@ -2,23 +2,46 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { ComponentProps as Props } from '../types';
+import { I18nProps } from '@polkadot/react-components/types';
+import { ComponentProps } from '../types';
 
-import React from 'react';
+import React, { useState } from 'react';
+import { Button } from '@polkadot/react-components';
 
+import translate from '../translate';
+import Propose from '../Proposals/Propose';
 import Members from './Members';
 import Summary from './Summary';
 
-export default function Overview ({ className, members, proposals }: Props): React.ReactElement<Props> {
+interface Props extends I18nProps, ComponentProps {}
+
+function Overview ({ className, members, proposals, t }: Props): React.ReactElement<Props> {
+  const [isProposeOpen, setIsProposeOpen] = useState(false);
+  const _toggleProposal = (): void => setIsProposeOpen(!isProposeOpen);
+
   return (
     <div className={className}>
       <Summary
         members={members}
         proposals={proposals}
       />
-      <Members
-        members={members}
-      />
+      {isProposeOpen && (
+        <Propose
+          memberCount={members?.length}
+          onClose={_toggleProposal}
+        />
+      )}
+      <Button.Group>
+        <Button
+          isPrimary
+          label={t('Submit proposal')}
+          icon='add'
+          onClick={_toggleProposal}
+        />
+      </Button.Group>
+      <Members members={members} />
     </div>
   );
 }
+
+export default translate(Overview);
diff --git a/packages/app-tech-comm/src/Proposals/Proposal.tsx b/packages/app-tech-comm/src/Proposals/Proposal.tsx
index f40c3a46c30d..dd5e96f1b8b5 100644
--- a/packages/app-tech-comm/src/Proposals/Proposal.tsx
+++ b/packages/app-tech-comm/src/Proposals/Proposal.tsx
@@ -21,15 +21,15 @@ interface Props extends I18nProps {
 
 function Proposal ({ className, hash, t }: Props): React.ReactElement<Props> | null {
   const { api } = useApi();
-  const option = trackStream<Option<ProposalType>>(api.query.technicalCommittee.proposalOf, [hash]);
+  const optProposal = trackStream<Option<ProposalType>>(api.query.technicalCommittee.proposalOf, [hash]);
   const votes = trackStream<Option<Votes>>(api.query.technicalCommittee.voting, [hash]);
 
-  const proposal = option?.unwrapOr(null) || null;
-  if (!proposal || !votes?.isSome) {
+  if (!optProposal?.isSome || !votes?.isSome) {
     return null;
   }
 
-  const { ayes, index, nays, threshold }: Votes = votes?.unwrap() || {};
+  const proposal = optProposal.unwrap();
+  const { ayes, index, nays, threshold } = votes.unwrap();
 
   return (
     <tr className={className}>
diff --git a/packages/app-tech-comm/src/Proposals/Propose.tsx b/packages/app-tech-comm/src/Proposals/Propose.tsx
index e185d1b2efbc..16707786333c 100644
--- a/packages/app-tech-comm/src/Proposals/Propose.tsx
+++ b/packages/app-tech-comm/src/Proposals/Propose.tsx
@@ -4,7 +4,7 @@
 
 import { I18nProps } from '@polkadot/react-components/types';
 import { TxSource, TxDef } from '@polkadot/react-hooks/types';
-import { Call } from '@polkadot/types/interfaces';
+import { Call, Proposal } from '@polkadot/types/interfaces';
 
 import BN from 'bn.js';
 import React, { useEffect, useState } from 'react';
@@ -16,82 +16,67 @@ import { createType } from '@polkadot/types';
 import translate from '../translate';
 
 interface Props extends I18nProps {
-  isOpen: boolean;
-  memberCount: number;
+  memberCount?: number;
   onClose: () => void;
 }
 
-function Propose ({ t, isOpen, onClose, memberCount = 0 }: Props): React.ReactElement<Props> {
-  const _hasThreshold = (threshold?: BN | null): boolean => {
-    return !!threshold && !threshold.isZero() && threshold.lten(memberCount);
-  };
+function Propose ({ t, onClose, memberCount = 0 }: Props): React.ReactElement<Props> {
+  const _hasThreshold = (threshold?: BN | null): boolean =>
+    !!threshold && !threshold.isZero() && threshold.lten(memberCount);
 
-  const [method, setMethod] = useState<Call | null>(null);
+  const { apiDefaultTxSudo } = useApi();
+  const [proposal, setProposal] = useState<Proposal | null>(null);
   const [[threshold, hasThreshold], setThreshold] = useState<[BN | null, boolean]>([
     new BN(memberCount / 2 + 1),
     true
   ]);
 
-  const _onChangeThreshold = (threshold?: BN): void => {
-    setThreshold([threshold || null, _hasThreshold(threshold)]);
-  };
-
-  const _onChangeExtrinsic = (method?: Call): void => {
-    !!method && setMethod(method);
-  };
-
-  useEffect(
-    (): void => setThreshold([threshold, _hasThreshold(threshold)]),
-    [memberCount]
-  );
-
-  const { apiDefaultTxSudo } = useApi();
+  // FIXME Rework this, unless you know, you can never figure out what all these options mean here
   const txState = useTx(
     (): TxSource<TxDef> => [
       [
         'technicalCommittee.propose',
-        [threshold, method ? createType(registry, 'Proposal', method) : null]
+        [threshold, proposal]
       ],
-      !!method && hasThreshold
+      !!proposal && hasThreshold
     ],
-    [memberCount, method, threshold, hasThreshold],
-    {
-      onSuccess: onClose
-    }
+    [memberCount, proposal, threshold, hasThreshold],
+    {}
   );
 
+  useEffect((): void => {
+    setThreshold([threshold, _hasThreshold(threshold)]);
+  }, [memberCount]);
+
+  const _onChangeExtrinsic = (method?: Call): void =>
+    setProposal(method ? createType(registry, 'Proposal', method) : null);
+  const _onChangeThreshold = (threshold?: BN): void =>
+    setThreshold([threshold || null, _hasThreshold(threshold)]);
+
   return (
     <TxModal
-      isOpen={isOpen}
+      isOpen
       onClose={onClose}
       {...txState}
       header={t('Propose a committee motion')}
-      content={
-        <>
-          <InputNumber
-            className='medium'
-            label={t('threshold')}
-            help={t('The minimum number of committee votes required to approve this motion')}
-            isError={!hasThreshold}
-            onChange={_onChangeThreshold}
-            onEnter={txState.sendTx}
-            placeholder={
-              t(
-                'Positive number between 1 and {{memberCount}}',
-                { replace: { memberCount } }
-              )
-            }
-            value={threshold || undefined}
-          />
-          <Extrinsic
-            defaultValue={apiDefaultTxSudo}
-            label={t('proposal')}
-            onChange={_onChangeExtrinsic}
-            onEnter={txState.sendTx}
-          />
-        </>
-      }
-    />
+    >
+      <InputNumber
+        className='medium'
+        label={t('threshold')}
+        help={t('The minimum number of committee votes required to approve this motion')}
+        isError={!hasThreshold}
+        onChange={_onChangeThreshold}
+        onEnter={txState.sendTx}
+        placeholder={t('Positive number between 1 and {{memberCount}}', { replace: { memberCount } })}
+        value={threshold || undefined}
+      />
+      <Extrinsic
+        defaultValue={apiDefaultTxSudo}
+        label={t('proposal')}
+        onChange={_onChangeExtrinsic}
+        onEnter={txState.sendTx}
+      />
+    </TxModal>
   );
 }
 
diff --git a/packages/app-tech-comm/src/Proposals/index.tsx b/packages/app-tech-comm/src/Proposals/index.tsx
index 963ff04e68d2..3668961dbb2a 100644
--- a/packages/app-tech-comm/src/Proposals/index.tsx
+++ b/packages/app-tech-comm/src/Proposals/index.tsx
@@ -6,33 +6,17 @@ import { I18nProps } from '@polkadot/react-components/types';
 import { Hash } from '@polkadot/types/interfaces';
 import { ComponentProps } from '../types';
 
-import React, { useState } from 'react';
-import { Button, Table } from '@polkadot/react-components';
+import React from 'react';
+import { Table } from '@polkadot/react-components';
 
 import Proposal from './Proposal';
-import Propose from './Propose';
 import translate from '../translate';
 
 interface Props extends ComponentProps, I18nProps {}
 
-function Proposals ({ className, members, proposals, t }: Props): React.ReactElement<Props> {
-  const [isProposeOpen, setIsProposeOpen] = useState(false);
-
+function Proposals ({ className, proposals, t }: Props): React.ReactElement<Props> {
   return (
     <div className={className}>
-      <Button.Group>
-        <Button
-          isPrimary
-          label={t('Propose a committee motion')}
-          icon='add'
-          onClick={(): void => setIsProposeOpen(true)}
-        />
-      </Button.Group>
-      <Propose
-        isOpen={isProposeOpen}
-        memberCount={members?.length || 0}
-        onClose={(): void => setIsProposeOpen(false)}
-      />
       {proposals?.length
         ? (
           <Table>
diff --git a/packages/react-components/src/TxModalNew.tsx b/packages/react-components/src/TxModalNew.tsx
index 7be0efd67186..761581dc919f 100644
--- a/packages/react-components/src/TxModalNew.tsx
+++ b/packages/react-components/src/TxModalNew.tsx
@@ -19,7 +19,7 @@ function TxModal<P extends Props> ({
   isSending,
   trigger: Trigger,
   header = t('Submit signed extrinsic'),
-  content,
+  children,
   preContent,
   isDisabled = false,
   isSubmittable = true,
@@ -49,6 +49,11 @@ function TxModal<P extends Props> ({
     props.onClose && props.onClose();
   };
 
+  const onSend = (): void => {
+    sendTx();
+    onClose();
+  };
+
   // const onStart = (): void => {
   //   props.onSubmit && props.onSubmit();
   // };
@@ -108,7 +113,7 @@ function TxModal<P extends Props> ({
             type='account'
             {...inputAddressProps}
           />
-          {content}
+          {children}
         </Modal.Content>
         <Modal.Actions>
           <Button.Group>
@@ -120,12 +125,11 @@ function TxModal<P extends Props> ({
             />
             <Button.Or />
             <Button
-              isLoading={isSending}
               isDisabled={isDisabled || isSending || !accountId || !isSubmittable}
               isPrimary
               label={submitButtonLabel}
               icon={submitButtonIcon}
-              onClick={sendTx}
+              onClick={onSend}
               {...submitButtonProps}
             />
           </Button.Group>
diff --git a/packages/react-components/src/types.ts b/packages/react-components/src/types.ts
index e4b4bed503a7..26e8b7615705 100644
--- a/packages/react-components/src/types.ts
+++ b/packages/react-components/src/types.ts
@@ -113,7 +113,7 @@ export interface TxModalProps extends I18nProps, TxState {
   isDisabled?: boolean;
   isOpen?: boolean;
   isUnsigned?: boolean;
-  content: React.ReactNode;
+  children: React.ReactNode;
   preContent?: React.ReactNode;
   trigger?: TxTrigger;
   onSubmit?: () => void;
diff --git a/packages/react-hooks/src/useTx.ts b/packages/react-hooks/src/useTx.ts
index e1ab15b5ea0d..eeb8b21e9c0b 100644
--- a/packages/react-hooks/src/useTx.ts
+++ b/packages/react-hooks/src/useTx.ts
@@ -51,41 +51,29 @@ export default function useTx<T extends TxDef> (memoFn: (...args: any[]) => TxSo
   const [accountId, setAccountId] = useState<StringOrNull>(anAccountId || null);
   const [isSending, setIsSending] = useState(false);
 
-  const _onStart = useMemo(
-    (): () => void => (): void => {
-      setIsSending(true);
+  const _onStart = (): void => {
+    setIsSending(true);
 
-      onStart && onStart();
-    },
-    [onStart]
-  );
+    onStart && onStart();
+  };
 
-  const _onSuccess = useMemo(
-    (): () => void => (): void => {
-      setIsSending(false);
+  const _onSuccess = (): void => {
+    setIsSending(false);
 
-      onSuccess && onSuccess();
-    },
-    [onSuccess]
-  );
+    onSuccess && onSuccess();
+  };
 
-  const _onFailed = useMemo(
-    (): () => void => (): void => {
-      setIsSending(false);
+  const _onFailed = (): void => {
+    setIsSending(false);
 
-      onFailed && onFailed();
-    },
-    [onFailed]
-  );
+    onFailed && onFailed();
+  };
 
-  const _onUpdate = useMemo(
-    (): () => void => (): void => {
-      setIsSending(false);
+  const _onUpdate = (): void => {
+    setIsSending(false);
 
-      onUpdate && onUpdate();
-    },
-    [onUpdate]
-  );
+    onUpdate && onUpdate();
+  };
 
   function getExtrinsicAndSenders (api: ApiPromise, accountId: StringOrNull, [txDef, isSubmittable]: TxSource<T>): ExtrinsicAndSenders {
     const extrinsic = getExtrinsic<T>(api, txDef);

From 76ce790f2ef53cacd677e7eae573d3ccbe28cbc6 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Wed, 4 Dec 2019 12:15:50 +0100
Subject: [PATCH 5/5] Move Propose back

---
 packages/app-tech-comm/src/Overview/index.tsx | 23 ++--------------
 .../app-tech-comm/src/Proposals/index.tsx     | 26 ++++++++++++++++---
 2 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/packages/app-tech-comm/src/Overview/index.tsx b/packages/app-tech-comm/src/Overview/index.tsx
index 178a469ab9dc..99a3b2a0ba00 100644
--- a/packages/app-tech-comm/src/Overview/index.tsx
+++ b/packages/app-tech-comm/src/Overview/index.tsx
@@ -5,40 +5,21 @@
 import { I18nProps } from '@polkadot/react-components/types';
 import { ComponentProps } from '../types';
 
-import React, { useState } from 'react';
-import { Button } from '@polkadot/react-components';
+import React from 'react';
 
 import translate from '../translate';
-import Propose from '../Proposals/Propose';
 import Members from './Members';
 import Summary from './Summary';
 
 interface Props extends I18nProps, ComponentProps {}
 
-function Overview ({ className, members, proposals, t }: Props): React.ReactElement<Props> {
-  const [isProposeOpen, setIsProposeOpen] = useState(false);
-  const _toggleProposal = (): void => setIsProposeOpen(!isProposeOpen);
-
+function Overview ({ className, members, proposals }: Props): React.ReactElement<Props> {
   return (
     <div className={className}>
       <Summary
         members={members}
         proposals={proposals}
       />
-      {isProposeOpen && (
-        <Propose
-          memberCount={members?.length}
-          onClose={_toggleProposal}
-        />
-      )}
-      <Button.Group>
-        <Button
-          isPrimary
-          label={t('Submit proposal')}
-          icon='add'
-          onClick={_toggleProposal}
-        />
-      </Button.Group>
       <Members members={members} />
     </div>
   );
diff --git a/packages/app-tech-comm/src/Proposals/index.tsx b/packages/app-tech-comm/src/Proposals/index.tsx
index 3668961dbb2a..febac97a8940 100644
--- a/packages/app-tech-comm/src/Proposals/index.tsx
+++ b/packages/app-tech-comm/src/Proposals/index.tsx
@@ -6,17 +6,35 @@ import { I18nProps } from '@polkadot/react-components/types';
 import { Hash } from '@polkadot/types/interfaces';
 import { ComponentProps } from '../types';
 
-import React from 'react';
-import { Table } from '@polkadot/react-components';
+import React, { useState } from 'react';
+import { Button, Table } from '@polkadot/react-components';
 
-import Proposal from './Proposal';
 import translate from '../translate';
+import Proposal from './Proposal';
+import Propose from './Propose';
 
 interface Props extends ComponentProps, I18nProps {}
 
-function Proposals ({ className, proposals, t }: Props): React.ReactElement<Props> {
+function Proposals ({ className, members, proposals, t }: Props): React.ReactElement<Props> {
+  const [isProposeOpen, setIsProposeOpen] = useState(false);
+  const _toggleProposal = (): void => setIsProposeOpen(!isProposeOpen);
+
   return (
     <div className={className}>
+      {isProposeOpen && (
+        <Propose
+          memberCount={members?.length}
+          onClose={_toggleProposal}
+        />
+      )}
+      <Button.Group>
+        <Button
+          isPrimary
+          label={t('Submit proposal')}
+          icon='add'
+          onClick={_toggleProposal}
+        />
+      </Button.Group>
       {proposals?.length
         ? (
           <Table>