Skip to content

Commit

Permalink
Merge pull request #2035 from LiskHQ/1891-implement-summary-step2-3-s…
Browse files Browse the repository at this point in the history 
…end-btc

Implement Summary Step(2/3) of send BTC
  • Loading branch information
@massao
massao committed May 17, 2019
2 parents db3a2eb + 650b029 commit 67abbaa
Show file tree
Hide file tree
Showing 5 changed files with 85 additions and 36 deletions.
5 changes: 2 additions & 3 deletions i18n/locales/en/common.json
View file
Expand Up @@ -165,7 +165,6 @@
"Error retrieving convertion rates.": "Error retrieving convertion rates.",
"Error retrieving dynamic fees.": "Error retrieving dynamic fees.",
"Every transaction needs to be confirmed and forged into Lisks blockchain network. \n Such operations require hardware resources and because of that there is a small fee for processing those.": "Every transaction needs to be confirmed and forged into Lisks blockchain network. \n Such operations require hardware resources and because of that there is a small fee for processing those.",
"Every transaction needs to be confirmed and forged into Lisks blockchain network. \n Such operations require hardware resources and because of that there is a small fee for processing those.": "Every transaction needs to be confirmed and forged into Lisks blockchain network. \n Such operations require hardware resources and because of that there is a small fee for processing those.",
"Explain Blockchain Like I'm 5": "Explain Blockchain Like I'm 5",
"Explore as a Guest": "Explore as a Guest",
"Failed to connect to node": "Failed to connect to node",
Expand Down Expand Up @@ -412,7 +411,7 @@
"Send Lisk to Blockchain Application": "Send Lisk to Blockchain Application",
"Send Tokens": "Send Tokens",
"Send anonymous usage statistics": "Send anonymous usage statistics",
"Send {{amount}} LSK": "Send {{amount}} LSK",
"Send {{amount}} {{token}}": "Send {{amount}} {{token}}",
"Sender": "Sender",
"Session timeout": "Session timeout",
"Session timeout in": "Session timeout in",
Expand Down Expand Up @@ -587,7 +586,7 @@
"{{count}} delegate(s) selected to vote": "{{count}} delegate selected to vote",
"{{count}} delegate(s) selected to vote_plural": "{{count}} delegates selected to vote",
"{{deviceModel}} connected! Open the Lisk app on the device": "{{deviceModel}} connected! Open the Lisk app on the device",
"{{fee}} LSK": "{{fee}} LSK",
"{{fee}} {{token}}": "{{fee}} {{token}}",
"{{length}} bytes left": "{{length}} bytes left",
"{{length}} extra characters": "{{length}} extra characters",
"{{length}} out of {{maxLength}} characters left": "{{length}} out of {{maxLength}} characters left"
Expand Down
13 changes: 10 additions & 3 deletions src/components/sendV2/form/form.js
View file
Expand Up @@ -50,7 +50,10 @@ class Form extends React.Component {
feedback: props.t('64 bytes left'),
isActive: false,
},
processingSpeed: {},
processingSpeed: {
value: 0,
loaded: false,
},
},
};

Expand Down Expand Up @@ -79,12 +82,13 @@ class Form extends React.Component {
componentDidUpdate() {
const { fields } = this.state;
const { dynamicFees } = this.props;
if (!Object.keys(fields.processingSpeed).length && dynamicFees.Low) {
if (!fields.processingSpeed.loaded && dynamicFees.Low) {
this.setState({
fields: {
...fields,
processingSpeed: {
value: dynamicFees.Low,
loaded: true,
},
},
});
Expand Down Expand Up @@ -273,7 +277,10 @@ class Form extends React.Component {
this.setState({
fields: {
...fields,
processingSpeed: item,
processingSpeed: {
...fields.processingSpeed,
...item,
},
},
});
}
Expand Down
2 changes: 2 additions & 0 deletions src/components/sendV2/summary/index.js
View file
Expand Up @@ -2,12 +2,14 @@
import { connect } from 'react-redux';
import { translate } from 'react-i18next';
import { sent } from '../../../actions/transactions';
import { tokenMap } from '../../../constants/tokens';
import Summary from './summary';

const mapStateToProps = state => ({
account: state.account,
failedTransactions: state.transactions.failed,
pendingTransactions: state.transactions.pending,
token: localStorage.getItem('btc') ? state.settings.token.active : tokenMap.LSK.key,
});

const mapDispatchToProps = {
Expand Down
97 changes: 67 additions & 30 deletions src/components/sendV2/summary/summary.js
View file
Expand Up @@ -9,6 +9,7 @@ import Tooltip from '../../toolbox/tooltip/tooltip';
import links from '../../../constants/externalLinks';
import Piwik from '../../../utils/piwik';
import { extractPublicKey } from '../../../utils/account';
import { tokenMap } from '../../../constants/tokens';
import styles from './summary.css';

class Summary extends React.Component {
Expand All @@ -31,6 +32,9 @@ class Summary extends React.Component {
this.nextStep = this.nextStep.bind(this);
this.prevStep = this.prevStep.bind(this);
this.submitTransaction = this.submitTransaction.bind(this);
this.getConfirmButtonLabel = this.getConfirmButtonLabel.bind(this);
this.getTitle = this.getTitle.bind(this);
this.getTooltip = this.getTooltip.bind(this);
}

componentDidMount() {
Expand Down Expand Up @@ -72,6 +76,8 @@ class Summary extends React.Component {
data: this.props.fields.reference.value,
passphrase: this.props.account.passphrase,
secondPassphrase: this.state.secondPassphrase.value,
dynamicFeePerByte: this.props.fields.processingSpeed.value,
fee: fees.send,
});
}

Expand Down Expand Up @@ -134,22 +140,58 @@ class Summary extends React.Component {
});
}

render() {
const { account, fields, t } = this.props;
const { secondPassphrase, isHardwareWalletConnected } = this.state;

const confirmBtnMessage = isHardwareWalletConnected
getConfirmButtonLabel() {
const {
account, fields, t, token,
} = this.props;
return this.state.isHardwareWalletConnected
? t('Confirm on {{deviceModel}}', { deviceModel: account.hwInfo.deviceModel })
: t('Send {{amount}} LSK', { amount: fields.amount.value });
: t('Send {{amount}} {{token}}', { amount: fields.amount.value, token });
}

const title = isHardwareWalletConnected
getTitle() {
const {
account, t,
} = this.props;
return this.state.isHardwareWalletConnected
? t('Confirm transaction on {{deviceModel}}', { deviceModel: account.hwInfo.deviceModel })
: t('Transaction summary');
}

getTooltip() {
const { t, token } = this.props;
return {
LSK: {
title: t('Transaction fee'),
footer: <a href={links.transactionFee}
rel="noopener noreferrer"
target="_blank">
{t('Read More')}
</a>,
children: t(`Every transaction needs to be confirmed and forged into Lisks blockchain network.
Such operations require hardware resources and because of that there is a small fee for processing those.`),
},
BTC: {
children: t('Bitcoin transactions are made with some delay that depends on two parameters: the fee and the bitcoin network’s congestion. The higher the fee, the higher the processing speed.'),
},
}[token];
}

render() {
const {
fields, t, token,
} = this.props;
const { secondPassphrase, isHardwareWalletConnected } = this.state;
const tooltip = this.getTooltip();

const fee = token === tokenMap.LSK.key
? fromRawLsk(fees.send)
: fromRawLsk(fields.processingSpeed.value);

return (
<div className={`${styles.wrapper} summary`}>
<header className={`${styles.header} summary-header`}>
<h1>{title}</h1>
<h1>{this.getTitle()}</h1>
</header>

<div className={`${styles.content} summary-content`}>
Expand All @@ -160,48 +202,43 @@ class Summary extends React.Component {
<label className={`${styles.information} recipient-confirm`}>
{fields.recipient.title || fields.recipient.address}
</label>
<span className={`${styles.secondText} ${styles.accountSecondText}`}>
{fields.recipient.address}
</span>
{ fields.recipient.title ? (
<span className={`${styles.secondText} ${styles.accountSecondText}`}>
{fields.recipient.address}
</span>
) : null }
</div>
</div>

<div className={styles.row}>
<label>{t('Amount')}</label>
<label className={`${styles.information} ${styles.amount} amount-summary`}>
{`${fields.amount.value} ${t('LSK')}`}
{`${fields.amount.value} ${token}`}
<ConverterV2 className={`${styles.secondText} ${styles.amountSecondText}`} value={fields.amount.value} />
</label>
</div>

<div className={styles.row}>
<label>{t('Message')}</label>
<p className={`${styles.information} reference`}>{fields.reference.value}</p>
</div>
{token === 'LSK' && fields.reference.value !== '' ? (
<div className={styles.row}>
<label>{t('Message')}</label>
<p className={`${styles.information} reference`}>{fields.reference.value}</p>
</div>
) : null}

<div className={styles.row}>
<label className={styles.transactionFee}>
{t('Transaction fee')}
<Tooltip
className={'showOnTop'}
title={t('Transaction fee')}
footer={
<a href={links.transactionFee}
rel="noopener noreferrer"
target="_blank">
{t('Read More')}
</a>
}
title={tooltip.title}
footer={tooltip.footer}
>
<p className={styles.tooltipText}>
{
t(`Every transaction needs to be confirmed and forged into Lisks blockchain network.
Such operations require hardware resources and because of that there is a small fee for processing those.`)
}
{tooltip.children}
</p>
</Tooltip>
</label>
<span>{t('{{fee}} LSK', { fee: fromRawLsk(fees.send) })}</span>
<span>{t('{{fee}} {{token}}', { fee, token })}</span>
</div>

{
Expand All @@ -228,7 +265,7 @@ class Summary extends React.Component {
!secondPassphrase.isValid)
|| isHardwareWalletConnected
}>
{confirmBtnMessage}
{this.getConfirmButtonLabel()}
</PrimaryButtonV2>

<TertiaryButtonV2 className={`${styles.editBtn} on-prevStep`} onClick={this.prevStep}>
Expand Down
4 changes: 4 additions & 0 deletions src/components/sendV2/summary/summary.test.js
View file
Expand Up @@ -68,6 +68,9 @@ describe('Summary', () => {
reference: {
value: 1,
},
processingSpeed: {
value: 1,
},
isLoading: false,
isHardwareWalletConnected: false,
},
Expand All @@ -79,6 +82,7 @@ describe('Summary', () => {
sent: jest.fn(),
isLoading: false,
isHardwareWalletConnected: false,
token: tokenMap.LSK.key,
};

beforeEach(() => {
Expand Down

0 comments on commit 67abbaa

Please sign in to comment.