From bcd8287d99db193d438d9bd7c744d88658c1b12e Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Wed, 29 Apr 2020 15:08:13 +0200 Subject: [PATCH] Additional dialogs with helpers (democracy) (#2657) * Additional dialogs with helpers (democracy) * Balance button opacity --- .../src/Accounts/modals/Transfer.tsx | 102 +++++++++++------- .../page-democracy/src/Overview/Propose.tsx | 82 +++++++++----- .../page-democracy/src/Overview/Seconding.tsx | 23 ++-- .../react-components/src/styles/semantic.ts | 7 +- 4 files changed, 143 insertions(+), 71 deletions(-) diff --git a/packages/page-accounts/src/Accounts/modals/Transfer.tsx b/packages/page-accounts/src/Accounts/modals/Transfer.tsx index e4fb1039cf..4a90ba6bc5 100644 --- 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 { const { t } = useTranslation(); + const { api } = useApi(); const [amount, setAmount] = useState(new BN(0)); const [hasAvailable] = useState(true); const [maxBalance] = useState(new BN(0)); @@ -31,47 +33,75 @@ function Transfer ({ className, onClose, recipientId: propRecipientId, senderId:
- + + + } + onChange={setSenderId} + type='account' /> - } - onChange={setSenderId} - type='account' - /> - + +

{t('The transferred balance will be substracted (along with fees) from the sender account.')}

+ + + + + + } + onChange={setRecipientId} + type='allPlus' /> - } - onChange={setRecipientId} - type='allPlus' - /> - + + +

{t('The beneficiary will have access to the transferred fees when the transaction is included in a block.')}

+ + + + + + + + +

{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.')}

+ +
diff --git a/packages/page-democracy/src/Overview/Propose.tsx b/packages/page-democracy/src/Overview/Propose.tsx index 535c2396cd..89ed515d85 100644 --- 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 { const { t } = useTranslation(); + const { api } = useApi(); const [accountId, setAccountId] = useState(null); const [balance, setBalance] = useState(); const [{ hash, isHashValid }, setHash] = useState<{ hash?: string; isHashValid: boolean }>({ hash: '', isHashValid: false }); @@ -26,42 +28,74 @@ function Propose ({ className, onClose }: Props): React.ReactElement { [] ); + const hasMinLocked = balance?.gte(api.consts.democracy.minimumDeposit); + return ( - {t('transferrable')}} - params={accountId} + + + {t('transferrable')}} + params={accountId} + /> + } + onChange={setAccountId} + type='account' /> - } - onChange={setAccountId} - type='account' - /> - - + + +

{t('The proposal will be registered from this account and the balance lock will be applied here.')}

+ + + + + + + +

{t('The hash of the preimage for the proposal as previously submitted or intended.')}

+ + + + + + + + +

{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.')}

+ + - + + + + + +

{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.')}

+ +