neptune/ghost-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add basic icons to the fee display (#600)

Browse Source
This commit is contained in:
Jaco Greeff 2019-01-14 14:08:38 +01:00 committed by GitHub
parent f2c7eaefdf
commit 50004c523a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 46 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/ui-signer/src/Fees/Proposal.tsx
View File

@ -10,6 +10,7 @@ import BN from 'bn.js';
import React from 'react';
import { Compact } from '@polkadot/types/codec';
import { withCall, withMulti } from '@polkadot/ui-api/index';
import { Icon } from '@polkadot/ui-app/index';
import { balanceFormat } from '@polkadot/ui-reactive/util/index';
import translate from '../translate';
@ -62,21 +63,21 @@ class Proposal extends React.PureComponent<Props, State> {
return [
isBelowMinimum
? <li key='belowmin'>{t('proposal.belowmin', {
? <div key='belowmin'><Icon name='warning sign' />{t('proposal.belowmin', {
defaultValue: 'The deposit is below the {{minimum}} minimum required for the proposal to be evaluated',
replace: {
minimum: balanceFormat(query_democracy_minimumDeposit)
}
})}</li>
})}</div>
: undefined,
extraAmount.isZero()
? undefined
: <li key='infodeposit'>{t('proposal.deposit', {
: <div key='infodeposit'><Icon name='arrow right' />{t('proposal.deposit', {
defaultValue: 'The deposit of {{deposit}} will be reserved until the proposal is completed',
replace: {
deposit: balanceFormat(extraAmount)
}
})}</li>
})}</div>
];
}
}

9
packages/ui-signer/src/Fees/Transfer.tsx
View File

@ -10,6 +10,7 @@ import BN from 'bn.js';
import React from 'react';
import { Compact } from '@polkadot/types/codec';
import { withCall, withMulti } from '@polkadot/ui-api/index';
import { Icon } from '@polkadot/ui-app/index';
import { balanceFormat } from '@polkadot/ui-reactive/util/index';
import translate from '../translate';
@ -73,17 +74,17 @@ class Transfer extends React.PureComponent<Props, State> {
return [
isNoEffect
? <li key='noeffect'>{t('transfer.noeffect', {
? <div key='noeffect'><Icon name='warning sign' />{t('transfer.noeffect', {
defaultValue: 'The final recipient amount is less than the existential amount, hence the total will be deducted from the sender, however the recipient account will not reflect the amount sent'
})}</li>
})}</div>
: undefined,
isCreation
? <li key='create'>{t('transfer.create', {
? <div key='create'><Icon name='warning sign' />{t('transfer.create', {
defaultValue: 'A fee of {{creationFee}} will be deducted from the sender since the destination account does not exist',
replace: {
creationFee: `${balanceFormat(fees.creationFee)}`
}
})}</li>
})}</div>
: undefined
];
}

73
packages/ui-signer/src/Fees/index.tsx
View File

@ -10,6 +10,7 @@ import BN from 'bn.js';
import React from 'react';
import { Extrinsic, Method } from '@polkadot/types';
import { withCall, withMulti } from '@polkadot/ui-api/index';
import { Icon } from '@polkadot/ui-app/index';
import { balanceFormat } from '@polkadot/ui-reactive/util/index';
import { compactToU8a } from '@polkadot/util';
@ -136,44 +137,42 @@ class FeeDisplay extends React.PureComponent<Props, State> {
className={[className, feeClass, 'padded'].join(' ')}
key='txinfo'
>
<ul>
<li>{t('fees', {
defaultValue: 'Fees totalling {{fees}} will be applied to the submission',
replace: {
fees: balanceFormat(allFees)
}
})}</li>
<li>{t('fees.explain', {
defaultValue: 'Fees includes the transaction fee and the per-byte fee'
})}</li>
{this.renderTransfer()}
{this.renderProposal()}
{
isRemovable && hasAvailable
? <li>{t('fees.remove', {
defaultValue: 'Submitting this transaction will drop the account balance to below the existential amount, removing the account from the chain state and burning associated funds'
})}</li>
: undefined
}{
hasAvailable
? undefined
: <li>{t('fees.available', {
defaultValue: 'The account does not have the required funds available for this transaction with the current values'
})}</li>
}{
isReserved
? <li>{t('fees.reserved', {
defaultValue: 'This account does have a reserved/locked balance, not taken into account'
})}</li>
: undefined
{this.renderTransfer()}
{this.renderProposal()}
{
isRemovable && hasAvailable
? <div><Icon name='warning sign' />{t('fees.remove', {
defaultValue: 'Submitting this transaction will drop the account balance to below the existential amount, removing the account from the chain state and burning associated funds'
})}</div>
: undefined
}{
hasAvailable
? undefined
: <div><Icon name='ban' />{t('fees.available', {
defaultValue: 'The account does not have the required funds available for this transaction with the current provided values'
})}</div>
}{
isReserved
? <div><Icon name='arrow right' />{t('fees.reserved', {
defaultValue: 'This account does have a reserved/locked balance, not taken into account'
})}</div>
: undefined
}
<div><Icon name='arrow right' />{t('fees.explain', {
defaultValue: 'Fees includes the transaction fee and the per-byte fee'
})}</div>
<div><Icon name='arrow right' />{t('fees', {
defaultValue: 'Fees totalling {{fees}} will be applied to the submission',
replace: {
fees: balanceFormat(allFees)
}
<li>{t('total', {
defaultValue: '{{total}} total transaction amount (fees + value)',
replace: {
total: balanceFormat(allTotal)
}
})}</li>
</ul>
})}</div>
<div><Icon name='arrow right' />{t('total', {
defaultValue: '{{total}} total transaction amount (fees + value)',
replace: {
total: balanceFormat(allTotal)
}
})}</div>
</article>
);
}