Additional dialogs with helpers (democracy) (#2657)

* Additional dialogs with helpers (democracy) * Balance button opacity
2020-04-29 15:08:13 +02:00 · 2020-04-29 15:08:13 +02:00 · bcd8287d99
commit bcd8287d99
parent 12c7d9b6e4
4 changed files with 143 additions and 71 deletions
--- a/packages/page-accounts/src/Accounts/modals/Transfer.tsx
+++ b/packages/page-accounts/src/Accounts/modals/Transfer.tsx
@ -6,6 +6,7 @@ import BN from 'bn.js';
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { InputAddress, InputBalance, Modal, TxButton } from '@polkadot/react-components';
+import { useApi } from '@polkadot/react-hooks';
 import { Available } from '@polkadot/react-query';

 import { useTranslation } from '../../translate';
@ -19,6 +20,7 @@ interface Props {

 function Transfer ({ className, onClose, recipientId: propRecipientId, senderId: propSenderId }: Props): React.ReactElement<Props> {
  const { t } = useTranslation();
+  const { api } = useApi();
  const [amount, setAmount] = useState<BN | undefined>(new BN(0));
  const [hasAvailable] = useState(true);
  const [maxBalance] = useState(new BN(0));
@ -31,47 +33,75 @@ function Transfer ({ className, onClose, recipientId: propRecipientId, senderId:
    <Modal
      className='app--accounts-Modal'
      header={t('Send funds')}
+      size='large'
    >
      <Modal.Content>
        <div className={className}>
-          <InputAddress
-            defaultValue={propSenderId}
-            help={t('The account you will send funds from.')}
-            isDisabled={!!propSenderId}
-            label={t('send from account')}
-            labelExtra={
-              <Available
-                label={transferrable}
-                params={senderId}
+          <Modal.Columns>
+            <Modal.Column>
+              <InputAddress
+                defaultValue={propSenderId}
+                help={t('The account you will send funds from.')}
+                isDisabled={!!propSenderId}
+                label={t('send from account')}
+                labelExtra={
+                  <Available
+                    label={transferrable}
+                    params={senderId}
+                  />
+                }
+                onChange={setSenderId}
+                type='account'
              />
-            }
-            onChange={setSenderId}
-            type='account'
-          />
-          <InputAddress
-            defaultValue={propRecipientId}
-            help={t('Select a contact or paste the address you want to send funds to.')}
-            isDisabled={!!propRecipientId}
-            label={t('send to address')}
-            labelExtra={
-              <Available
-                label={transferrable}
-                params={recipientId}
+            </Modal.Column>
+            <Modal.Column>
+              <p>{t('The transferred balance will be substracted (along with fees) from the sender account.')}</p>
+            </Modal.Column>
+          </Modal.Columns>
+          <Modal.Columns>
+            <Modal.Column>
+              <InputAddress
+                defaultValue={propRecipientId}
+                help={t('Select a contact or paste the address you want to send funds to.')}
+                isDisabled={!!propRecipientId}
+                label={t('send to address')}
+                labelExtra={
+                  <Available
+                    label={transferrable}
+                    params={recipientId}
+                  />
+                }
+                onChange={setRecipientId}
+                type='allPlus'
              />
-            }
-            onChange={setRecipientId}
-            type='allPlus'
-          />
-          <InputBalance
-            autoFocus
-            help={t('Type the amount you want to transfer. Note that you can select the unit on the right e.g sending 1 milli is equivalent to sending 0.001.')}
-            isError={!hasAvailable}
-            isZeroable
-            label={t('amount')}
-            maxValue={maxBalance}
-            onChange={setAmount}
-            withMax
-          />
+            </Modal.Column>
+            <Modal.Column>
+              <p>{t('The beneficiary will have access to the transferred fees when the transaction is included in a block.')}</p>
+            </Modal.Column>
+          </Modal.Columns>
+          <Modal.Columns>
+            <Modal.Column>
+              <InputBalance
+                autoFocus
+                help={t('Type the amount you want to transfer. Note that you can select the unit on the right e.g sending 1 milli is equivalent to sending 0.001.')}
+                isError={!hasAvailable}
+                isZeroable
+                label={t('amount')}
+                maxValue={maxBalance}
+                onChange={setAmount}
+                withMax
+              />
+              <InputBalance
+                defaultValue={api.consts.balances.existentialDeposit}
+                help={t('The minimum amount that an account should have to be deemed active')}
+                isDisabled
+                label={t('existential deposit')}
+              />
+            </Modal.Column>
+            <Modal.Column>
+              <p>{t('If the recipient account is new, the balance needs to be more than the existential deposit. Likewise if the sending account balance drops below the same value, the account will be removed from the state.')}</p>
+            </Modal.Column>
+          </Modal.Columns>
        </div>
      </Modal.Content>
      <Modal.Actions onCancel={onClose}>
--- a/packages/page-democracy/src/Overview/Propose.tsx
+++ b/packages/page-democracy/src/Overview/Propose.tsx
@ -5,6 +5,7 @@
 import BN from 'bn.js';
 import React, { useCallback, useState } from 'react';
 import { Input, InputAddress, InputBalance, Modal, TxButton } from '@polkadot/react-components';
+import { useApi } from '@polkadot/react-hooks';
 import { Available } from '@polkadot/react-query';
 import { isHex } from '@polkadot/util';

@ -17,6 +18,7 @@ interface Props {

 function Propose ({ className, onClose }: Props): React.ReactElement<Props> {
  const { t } = useTranslation();
+  const { api } = useApi();
  const [accountId, setAccountId] = useState<string | null>(null);
  const [balance, setBalance] = useState<BN | undefined>();
  const [{ hash, isHashValid }, setHash] = useState<{ hash?: string; isHashValid: boolean }>({ hash: '', isHashValid: false });
@ -26,42 +28,74 @@ function Propose ({ className, onClose }: Props): React.ReactElement<Props> {
    []
  );

+  const hasMinLocked = balance?.gte(api.consts.democracy.minimumDeposit);
+
  return (
    <Modal
      className={className}
      header={t('Submit proposal')}
+      size='large'
    >
      <Modal.Content>
-        <InputAddress
-          help={t('The account you want to register the proposal from')}
-          label={t('send from account')}
-          labelExtra={
-            <Available
-              label={<span className='label'>{t('transferrable')}</span>}
-              params={accountId}
+        <Modal.Columns>
+          <Modal.Column>
+            <InputAddress
+              help={t('The account you want to register the proposal from')}
+              label={t('send from account')}
+              labelExtra={
+                <Available
+                  label={<span className='label'>{t('transferrable')}</span>}
+                  params={accountId}
+                />
+              }
+              onChange={setAccountId}
+              type='account'
            />
-          }
-          onChange={setAccountId}
-          type='account'
-        />
-        <Input
-          autoFocus
-          help={t('The preimage hash of the proposal')}
-          label={t('preimage hash')}
-          onChange={_onChangeHash}
-          value={hash}
-        />
-        <InputBalance
-          help={t('The locked value for this proposal')}
-          label={t('locked balance')}
-          onChange={setBalance}
-        />
+          </Modal.Column>
+          <Modal.Column>
+            <p>{t('The proposal will be registered from this account and the balance lock will be applied here.')}</p>
+          </Modal.Column>
+        </Modal.Columns>
+        <Modal.Columns>
+          <Modal.Column>
+            <Input
+              autoFocus
+              help={t('The preimage hash of the proposal')}
+              label={t('preimage hash')}
+              onChange={_onChangeHash}
+              value={hash}
+            />
+          </Modal.Column>
+          <Modal.Column>
+            <p>{t('The hash of the preimage for the proposal as previously submitted or intended.')}</p>
+          </Modal.Column>
+        </Modal.Columns>
+        <Modal.Columns>
+          <Modal.Column>
+            <InputBalance
+              defaultValue={api.consts.democracy.minimumDeposit}
+              help={t('The locked value for this proposal')}
+              isError={!hasMinLocked}
+              label={t('locked balance')}
+              onChange={setBalance}
+            />
+            <InputBalance
+              defaultValue={api.consts.democracy.minimumDeposit}
+              help={t('The minimum deposit required')}
+              isDisabled
+              label={t('minimum deposit')}
+            />
+          </Modal.Column>
+          <Modal.Column>
+            <p>{t('The associated deposit for this proposal should be more then the minimum on-chain deposit required. It will be locked until the proposal passes.')}</p>
+          </Modal.Column>
+        </Modal.Columns>
      </Modal.Content>
      <Modal.Actions onCancel={onClose}>
        <TxButton
          accountId={accountId}
          icon='add'
-          isDisabled={!balance || balance.lten(0) || !isHashValid || !accountId}
+          isDisabled={!balance || !hasMinLocked || !isHashValid || !accountId}
          isPrimary
          label={t('Submit proposal')}
          onStart={onClose}
--- a/packages/page-democracy/src/Overview/Seconding.tsx
+++ b/packages/page-democracy/src/Overview/Seconding.tsx
@ -36,20 +36,27 @@ function Seconding ({ depositors, image, proposalId }: Props): React.ReactElemen
      {isSecondingOpen && (
        <Modal
          header={t('Second proposal')}
-          size='small'
+          size='large'
        >
          <Modal.Content>
            <ProposedAction
              idNumber={proposalId}
              proposal={image?.proposal}
            />
-            <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('second with account')}
-              onChange={setAccountId}
-              type='account'
-              withLabel
-            />
+            <Modal.Columns>
+              <Modal.Column>
+                <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('second with account')}
+                  onChange={setAccountId}
+                  type='account'
+                  withLabel
+                />
+              </Modal.Column>
+              <Modal.Column>
+                <p>{t('Seconding in a pre-approval that indicates your backing for the proposal. Proposal with greater interest moves up the queue for potential next referendums.')}</p>
+              </Modal.Column>
+            </Modal.Columns>
          </Modal.Content>
          <Modal.Actions onCancel={toggleSeconding}>
            <TxButton
--- a/packages/react-components/src/styles/semantic.ts
+++ b/packages/react-components/src/styles/semantic.ts
@ -58,16 +58,17 @@ export default css`
      opacity: 1;

      input {
-        background: transparent;
+        background: #f5f5f5;
        border-color: #eee;
        border-style: dashed;
      }

      .ui.primary.buttons .ui.button {
-        background: #eee;
+        background-color: #666;
        border-color: transparent;
        border-left-color: transparent;
-        color: #4e4e4e;
+        color: #f9f9f9;
+        opacity: 0.5;

        .dropdown.icon {
          opacity: 0;