From a66db1f15239d6624e808d5d7a6bbacac422fc38 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Sat, 2 May 2020 08:56:16 +0200
Subject: [PATCH] Multisig creation layout (#2674)

* Multisig creation layout

* Header cleanups

* Cleanup flag display
---
 .../page-accounts/src/Accounts/Account.tsx    |   2 +-
 packages/page-accounts/src/Accounts/index.tsx |   2 +-
 .../src/Accounts/modals/MultisigCreate.tsx    | 116 ++++++++----------
 .../src/Accounts/modals/RecoverAccount.tsx    |   2 +-
 .../src/Accounts/modals/RecoverSetup.tsx      |  93 ++++++++------
 packages/page-accounts/src/Accounts/types.ts  |   2 +-
 .../src/Accounts/useKnownAddresses.ts         |  20 +++
 packages/page-accounts/src/Sidebar/Flags.tsx  |  21 +++-
 packages/react-hooks/src/types.ts             |   1 +
 packages/react-hooks/src/useAccountInfo.ts    |   2 +
 10 files changed, 152 insertions(+), 109 deletions(-)
 create mode 100644 packages/page-accounts/src/Accounts/useKnownAddresses.ts

diff --git a/packages/page-accounts/src/Accounts/Account.tsx b/packages/page-accounts/src/Accounts/Account.tsx
index 0f6e9aeebd..fe398605d0 100644
--- a/packages/page-accounts/src/Accounts/Account.tsx
+++ b/packages/page-accounts/src/Accounts/Account.tsx
@@ -1,4 +1,4 @@
-// Copyright 2017-2020 @polkadot/app-staking authors & contributors
+// Copyright 2017-2020 @polkadot/app-accounts authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
diff --git a/packages/page-accounts/src/Accounts/index.tsx b/packages/page-accounts/src/Accounts/index.tsx
index ef1acc2774..05d7cc1609 100644
--- a/packages/page-accounts/src/Accounts/index.tsx
+++ b/packages/page-accounts/src/Accounts/index.tsx
@@ -1,4 +1,4 @@
-// Copyright 2017-2020 @polkadot/app-staking authors & contributors
+// Copyright 2017-2020 @polkadot/app-accounts authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
diff --git a/packages/page-accounts/src/Accounts/modals/MultisigCreate.tsx b/packages/page-accounts/src/Accounts/modals/MultisigCreate.tsx
index 1e9907a2bb..dfafed1e3a 100644
--- a/packages/page-accounts/src/Accounts/modals/MultisigCreate.tsx
+++ b/packages/page-accounts/src/Accounts/modals/MultisigCreate.tsx
@@ -6,12 +6,13 @@ import { ActionStatus } from '@polkadot/react-components/Status/types';
 import { ModalProps } from '../../types';
 
 import BN from 'bn.js';
-import React, { useCallback, useMemo, useState } from 'react';
-import { Button, Input, InputAddress, InputNumber, Modal } from '@polkadot/react-components';
+import React, { useCallback, useState } from 'react';
+import { Button, Input, InputAddressMulti, InputNumber, Modal } from '@polkadot/react-components';
 import { useApi } from '@polkadot/react-hooks';
 import keyring from '@polkadot/ui-keyring';
 
 import { useTranslation } from '../../translate';
+import useKnownAddresses from '../useKnownAddresses';
 
 interface Props extends ModalProps {
   className?: string;
@@ -24,8 +25,6 @@ interface CreateOptions {
   tags?: string[];
 }
 
-type Setter = (address: string| null) => void;
-
 const MAX_SIGNATORIES = 16;
 
 function createAccount (signatories: string[], threshold: BN | number, { genesisHash, name, tags = [] }: CreateOptions, success: string): ActionStatus {
@@ -50,23 +49,10 @@ function createAccount (signatories: string[], threshold: BN | number, { genesis
 function Multisig ({ className, onClose, onStatusChange }: Props): React.ReactElement<Props> {
   const { api, isDevelopment } = useApi();
   const { t } = useTranslation();
+  const availableSignatories = useKnownAddresses();
   const [{ isNameValid, name }, setName] = useState({ isNameValid: false, name: '' });
   const [signatories, setSignatories] = useState<string[]>(['']);
   const [{ isThresholdValid, threshold }, setThreshold] = useState({ isThresholdValid: true, threshold: new BN(1) });
-  const setSignatory = useMemo((): Setter[] => {
-    return Array(MAX_SIGNATORIES).fill(0).map((_, index): Setter =>
-      (address: string | null): void => {
-        setSignatories((signatories: string[]): string[] => {
-          if (address) {
-            signatories[index] = address;
-          }
-
-          return signatories;
-        });
-      }
-    );
-  }, []);
-  const isValid = isNameValid && isThresholdValid;
 
   const _createMultisig = useCallback(
     (): void => {
@@ -90,59 +76,61 @@ function Multisig ({ className, onClose, onStatusChange }: Props): React.ReactEl
     [signatories]
   );
 
-  const _onLess = useCallback(
-    () => setSignatories((signatories) => signatories.slice(0, signatories.length - 1)),
-    []
-  );
-
-  const _onMore = useCallback(
-    () => setSignatories((signatories) => signatories.concat('')),
-    []
-  );
+  const isValid = isNameValid && isThresholdValid;
 
   return (
     <Modal
       className={className}
       header={t('Add multisig')}
+      size='large'
     >
       <Modal.Content>
-        <Input
-          autoFocus
-          className='full'
-          help={t('Name given to this multisig. You can edit it it any later point in time.')}
-          isError={!isNameValid}
-          label={t('name')}
-          onChange={_onChangeName}
-          placeholder={t('multisig name')}
-        />
-        <InputNumber
-          help={t('The threshold for this multisig')}
-          isError={!isThresholdValid}
-          label={t('threshold')}
-          onChange={_onChangeThreshold}
-        />
-        {signatories.map((_, index) => (
-          <InputAddress
-            key={index}
-            label={t('signatory {{index}}/{{length}}', { replace: { index: index + 1, length: signatories.length } })}
-            onChange={setSignatory[index]}
-            value={signatories[index]}
-          />
-        ))}
-        <Button.Group>
-          <Button
-            icon='minus'
-            isDisabled={signatories.length === 1}
-            label={t('Less')}
-            onClick={_onLess}
-          />
-          <Button
-            icon='plus'
-            isDisabled={signatories.length === MAX_SIGNATORIES}
-            label={t('More')}
-            onClick={_onMore}
-          />
-        </Button.Group>
+        <Modal.Columns>
+          <Modal.Column>
+            <Input
+              autoFocus
+              className='full'
+              help={t('Name given to this multisig. You can edit it at any later point in time.')}
+              isError={!isNameValid}
+              label={t('name')}
+              onChange={_onChangeName}
+              placeholder={t('multisig name')}
+            />
+          </Modal.Column>
+          <Modal.Column>
+            <p>{t('The name is for unique identification of the account in your owner lists.')}</p>
+          </Modal.Column>
+        </Modal.Columns>
+        <Modal.Columns>
+          <Modal.Column>
+            <InputAddressMulti
+              available={availableSignatories}
+              availableLabel={t('available signatories')}
+              help={t('The addresses that are able to approve multisig transactions. You can select up to {{maxHelpers}} trusted addresses.', { replace: { maxHelpers: MAX_SIGNATORIES } })}
+              maxCount={MAX_SIGNATORIES}
+              onChange={setSignatories}
+              value={signatories}
+              valueLabel={t('selected signatories')}
+            />
+          </Modal.Column>
+          <Modal.Column>
+            <p>{t('The signatories has the ability to create transactions using the multisig and approve transactions sent by others.Once the threshold is reached with approvals, the multisig transaction is enacted on-chain.')}</p>
+            <p>{t('Since the multisig function like any other account, once created it is available for selection anywhere accounts are used and needs to be funded before use.')}</p>
+          </Modal.Column>
+        </Modal.Columns>
+        <Modal.Columns>
+          <Modal.Column>
+            <InputNumber
+              help={t('The threshold for this multisig')}
+              isError={!isThresholdValid}
+              label={t('threshold')}
+              onChange={_onChangeThreshold}
+            />
+          </Modal.Column>
+          <Modal.Column>
+            <p>{t('The threshold for approval should be less or equal to the number of signatories for this multisig.')}</p>
+          </Modal.Column>
+        </Modal.Columns>
       </Modal.Content>
       <Modal.Actions onCancel={onClose}>
         <Button
diff --git a/packages/page-accounts/src/Accounts/modals/RecoverAccount.tsx b/packages/page-accounts/src/Accounts/modals/RecoverAccount.tsx
index 0994273587..97f5258db6 100644
--- a/packages/page-accounts/src/Accounts/modals/RecoverAccount.tsx
+++ b/packages/page-accounts/src/Accounts/modals/RecoverAccount.tsx
@@ -1,4 +1,4 @@
-// Copyright 2017-2020 @polkadot/app-staking authors & contributors
+// Copyright 2017-2020 @polkadot/app-accounts authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
diff --git a/packages/page-accounts/src/Accounts/modals/RecoverSetup.tsx b/packages/page-accounts/src/Accounts/modals/RecoverSetup.tsx
index 2ba1ac0185..35a6ade97d 100644
--- a/packages/page-accounts/src/Accounts/modals/RecoverSetup.tsx
+++ b/packages/page-accounts/src/Accounts/modals/RecoverSetup.tsx
@@ -1,13 +1,13 @@
-// Copyright 2017-2020 @polkadot/app-staking authors & contributors
+// Copyright 2017-2020 @polkadot/app-accounts 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 BN from 'bn.js';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { InputAddressMulti, InputAddress, InputNumber, Modal, TxButton } from '@polkadot/react-components';
-import { useAccounts, useAddresses } from '@polkadot/react-hooks';
 
 import { useTranslation } from '../../translate';
+import useKnownAddresses from '../useKnownAddresses';
 
 interface Props {
   address: string;
@@ -19,19 +19,11 @@ const MAX_HELPERS = 16;
 
 function RecoverSetup ({ address, className, onClose }: Props): React.ReactElement {
   const { t } = useTranslation();
-  const { allAccounts } = useAccounts();
-  const { allAddresses } = useAddresses();
-  const [availableHelpers, setAvailableHelpers] = useState<string[]>([]);
+  const availableHelpers = useKnownAddresses(address);
   const [delay, setDelay] = useState<BN | undefined>();
   const [helpers, setHelpers] = useState<string[]>([]);
   const [threshold, setThreshold] = useState<BN | undefined>();
 
-  useEffect((): void => {
-    allAccounts && allAddresses && setAvailableHelpers(
-      [...allAccounts, ...allAddresses].filter((a): boolean => a !== address)
-    );
-  }, [address, allAccounts, allAddresses]);
-
   const isErrorDelay = !delay;
   const isErrorHelpers = !helpers.length;
   const isErrorThreshold = !threshold || !threshold.gtn(0) || threshold.gtn(helpers.length);
@@ -40,35 +32,58 @@ function RecoverSetup ({ address, className, onClose }: Props): React.ReactEleme
     <Modal
       className={className}
       header={t('Setup account as recoverable')}
+      size='large'
     >
       <Modal.Content>
-        <InputAddress
-          isDisabled
-          label={t('the account to make recoverable')}
-          value={address}
-        />
-        <InputAddressMulti
-          available={availableHelpers}
-          availableLabel={t('available social recovery helpers')}
-          help={t('The addresses that are able to help in recovery. You can select up to {{maxHelpers}} trusted helpers.', { replace: { maxHelpers: MAX_HELPERS } })}
-          maxCount={MAX_HELPERS}
-          onChange={setHelpers}
-          value={helpers}
-          valueLabel={t('trusted social recovery helpers')}
-        />
-        <InputNumber
-          help={t('The threshold of vouches that is to be reached for the account to be recovered.')}
-          isError={isErrorThreshold}
-          label={t('recovery threshold')}
-          onChange={setThreshold}
-        />
-        <InputNumber
-          help={t('The delay between vouching and the availability of the recovered account.')}
-          isError={isErrorDelay}
-          isZeroable
-          label={t('recovery block delay')}
-          onChange={setDelay}
-        />
+        <Modal.Columns>
+          <Modal.Column>
+            <InputAddress
+              isDisabled
+              label={t('the account to make recoverable')}
+              value={address}
+            />
+          </Modal.Column>
+          <Modal.Column>
+            <p>{t('The recoverable account is protected against the loss of seed/access by a social process.')}</p>
+          </Modal.Column>
+        </Modal.Columns>
+        <Modal.Columns>
+          <Modal.Column>
+            <InputAddressMulti
+              available={availableHelpers}
+              availableLabel={t('available social recovery helpers')}
+              help={t('The addresses that are able to help in recovery. You can select up to {{maxHelpers}} trusted helpers.', { replace: { maxHelpers: MAX_HELPERS } })}
+              maxCount={MAX_HELPERS}
+              onChange={setHelpers}
+              value={helpers}
+              valueLabel={t('trusted social recovery helpers')}
+            />
+          </Modal.Column>
+          <Modal.Column>
+            <p>{t('These are trusted individuals that can verify and approve any recovery actions. With recovery, once the threshold is reached, the funds associated with the account can be moved to a new destination.')}</p>
+            <p>{t('The helpers should be able to verify, via an off-chain mechanism, that the account owner indeed wishes to recover access and as such provide any approvals. In the cases of malicious recovery procedures, they will have the power to stop it.')}</p>
+          </Modal.Column>
+        </Modal.Columns>
+        <Modal.Columns>
+          <Modal.Column>
+            <InputNumber
+              help={t('The threshold of vouches that is to be reached for the account to be recovered.')}
+              isError={isErrorThreshold}
+              label={t('recovery threshold')}
+              onChange={setThreshold}
+            />
+            <InputNumber
+              help={t('The delay between vouching and the availability of the recovered account.')}
+              isError={isErrorDelay}
+              isZeroable
+              label={t('recovery block delay')}
+              onChange={setDelay}
+            />
+          </Modal.Column>
+          <Modal.Column>
+            <p>{t('The threshold for approvals and the delay is the protection associated with the account. The delay should be such that any colluding recovery attempts does have a window to stop.')}</p>
+          </Modal.Column>
+        </Modal.Columns>
       </Modal.Content>
       <Modal.Actions onCancel={onClose}>
         <TxButton
diff --git a/packages/page-accounts/src/Accounts/types.ts b/packages/page-accounts/src/Accounts/types.ts
index 80fc8bc4ab..54260b4a12 100644
--- a/packages/page-accounts/src/Accounts/types.ts
+++ b/packages/page-accounts/src/Accounts/types.ts
@@ -1,4 +1,4 @@
-// Copyright 2017-2020 @polkadot/app-staking authors & contributors
+// Copyright 2017-2020 @polkadot/app-accounts authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
diff --git a/packages/page-accounts/src/Accounts/useKnownAddresses.ts b/packages/page-accounts/src/Accounts/useKnownAddresses.ts
new file mode 100644
index 0000000000..9a9d123492
--- /dev/null
+++ b/packages/page-accounts/src/Accounts/useKnownAddresses.ts
@@ -0,0 +1,20 @@
+// Copyright 2017-2020 @polkadot/app-accounts 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 { useEffect, useState } from 'react';
+import { useAccounts, useAddresses } from '@polkadot/react-hooks';
+
+export default function useKnownAddresses (exclude?: string): string[] {
+  const { allAccounts } = useAccounts();
+  const { allAddresses } = useAddresses();
+  const [known, setKnown] = useState<string[]>([]);
+
+  useEffect((): void => {
+    allAccounts && allAddresses && setKnown(
+      [...allAccounts, ...allAddresses].filter((a): boolean => a !== exclude)
+    );
+  }, [allAccounts, allAddresses, exclude]);
+
+  return known;
+}
diff --git a/packages/page-accounts/src/Sidebar/Flags.tsx b/packages/page-accounts/src/Sidebar/Flags.tsx
index 1f7d2e4d69..6fb509d6f9 100644
--- a/packages/page-accounts/src/Sidebar/Flags.tsx
+++ b/packages/page-accounts/src/Sidebar/Flags.tsx
@@ -13,9 +13,9 @@ interface Props {
   flags: AddressFlags;
 }
 
-function Flags ({ flags: { isCouncil, isDevelopment, isExternal, isSociety, isSudo, isTechCommittee } }: Props): React.ReactElement<Props> | null {
+function Flags ({ flags: { isCouncil, isDevelopment, isExternal, isInjected, isMultisig, isSociety, isSudo, isTechCommittee } }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
-  const hasFlags = isDevelopment || isExternal || isSociety || isCouncil || isTechCommittee || isSudo;
+  const hasFlags = isCouncil || isDevelopment || isExternal || isInjected || isMultisig || isSociety || isSudo || isTechCommittee;
 
   if (!hasFlags) {
     return null;
@@ -24,6 +24,23 @@ function Flags ({ flags: { isCouncil, isDevelopment, isExternal, isSociety, isSu
   return (
     <div className='ui--AddressMenu-flags'>
       {isExternal && (
+        isMultisig
+          ? (
+            <Tag
+              color='green'
+              label={t('Multisig')}
+              size='tiny'
+            />
+          )
+          : (
+            <Tag
+              color='grey'
+              label={t('External')}
+              size='tiny'
+            />
+          )
+      )}
+      {isInjected && (
         <Tag
           color='grey'
           label={t('Injected')}
diff --git a/packages/react-hooks/src/types.ts b/packages/react-hooks/src/types.ts
index 1c2f23f2f4..d8326c9c48 100644
--- a/packages/react-hooks/src/types.ts
+++ b/packages/react-hooks/src/types.ts
@@ -80,6 +80,7 @@ export interface AddressFlags extends DeriveAccountFlags {
   isExternal: boolean;
   isFavorite: boolean;
   isInContacts: boolean;
+  isInjected: boolean;
   isMultisig: boolean;
   isOwned: boolean;
 }
diff --git a/packages/react-hooks/src/useAccountInfo.ts b/packages/react-hooks/src/useAccountInfo.ts
index 508d6df7b0..55654a604b 100644
--- a/packages/react-hooks/src/useAccountInfo.ts
+++ b/packages/react-hooks/src/useAccountInfo.ts
@@ -22,6 +22,7 @@ const IS_NONE = {
   isExternal: false,
   isFavorite: false,
   isInContacts: false,
+  isInjected: false,
   isMultisig: false,
   isOwned: false,
   isSociety: false,
@@ -99,6 +100,7 @@ export default function useAccountInfo (value: string): UseAccountInfo {
       isEditable: (!identity?.display && (isInContacts || accountOrAddress?.meta.isMultisig || (accountOrAddress && !(accountOrAddress.meta.isInjected || accountOrAddress.meta.isHardware)))) || false,
       isExternal: accountOrAddress?.meta.isExternal || false,
       isInContacts,
+      isInjected: accountOrAddress?.meta.isInjected || false,
       isMultisig: accountOrAddress?.meta.isMultisig || false,
       isOwned
     }));