From ef9137fa7c761defe43b1ba1c14305796b615b24 Mon Sep 17 00:00:00 2001 From: Etienne Dusseault Date: Fri, 17 Jul 2020 13:20:18 +0800 Subject: [PATCH] Custom Gas + Data hotfixes (#1687) * CustomGas: fix crash when navigating back to advanced gas during error * TransactionReviewData: fix data not displaying * fix snapshit test * TransactionReviewData: fix data not scrollable * snapsho * SendFlow: fix total fiat to be text component when passed down to TransactionReviewFeeCard * snapshotsssss baby * TransactionReviewInformation: fix totalFiat is now a Text component --- app/components/UI/CustomGas/index.js | 31 +++-- .../__snapshots__/index.test.js.snap | 123 +++++++++++------- .../TransactionReviewData/index.js | 36 +++-- .../TransactionReviewData/index.test.js | 4 +- .../__snapshots__/index.test.js.snap | 17 ++- .../TransactionReviewFeeCard/index.js | 9 +- .../TransactionReviewInformation/index.js | 4 +- .../Confirm/__snapshots__/index.test.js.snap | 2 +- .../Views/SendFlow/Confirm/index.js | 22 +++- 9 files changed, 153 insertions(+), 95 deletions(-) diff --git a/app/components/UI/CustomGas/index.js b/app/components/UI/CustomGas/index.js index 2b711400225..30884e3e5f1 100644 --- a/app/components/UI/CustomGas/index.js +++ b/app/components/UI/CustomGas/index.js @@ -305,9 +305,10 @@ class CustomGas extends PureComponent { gasSlowSelected: false, selected: 'average', ready: false, - customGasPrice: Math.round(this.props.basicGasEstimates.averageGwei), + customGasPrice: '10', customGasLimit: fromWei(this.props.gas, 'wei'), - customGasPriceBN: this.props.gasPrice, + customGasPriceBNWei: this.props.gasPrice, + customGasPriceBN: new BN(Math.round(this.props.basicGasEstimates.averageGwei)), customGasLimitBN: this.props.gas, warningGasLimit: '', warningGasPrice: '', @@ -329,7 +330,7 @@ class CustomGas extends PureComponent { gasSlowSelected: false, selected: 'fast', customGasPrice: fastGwei, - customGasPriceBN: gasPriceBN + customGasPriceBNWei: gasPriceBN }); }; @@ -346,7 +347,7 @@ class CustomGas extends PureComponent { gasSlowSelected: false, selected: 'average', customGasPrice: averageGwei, - customGasPriceBN: gasPriceBN + customGasPriceBNWei: gasPriceBN }); }; @@ -363,7 +364,7 @@ class CustomGas extends PureComponent { gasSlowSelected: true, selected: 'slow', customGasPrice: safeLowGwei, - customGasPriceBN: gasPriceBN + customGasPriceBNWei: gasPriceBN }); }; @@ -427,9 +428,9 @@ class CustomGas extends PureComponent { }; onGasLimitChange = value => { - const { customGasPriceBN } = this.state; + const { customGasPriceBNWei } = this.state; const bnValue = new BN(value); - const warningSufficientFunds = this.hasSufficientFunds(bnValue, customGasPriceBN); + const warningSufficientFunds = this.hasSufficientFunds(bnValue, customGasPriceBNWei); let warningGasLimit; if (!value || value === '' || !isDecimal(value)) warningGasLimit = strings('transaction.invalid_gas'); else if (bnValue && !isBN(bnValue)) warningGasLimit = strings('transaction.invalid_gas'); @@ -448,15 +449,17 @@ class CustomGas extends PureComponent { const { customGasLimitBN } = this.state; //Added because apiEstimateModifiedToWEI doesn't like empty strings const gasPrice = value === '' ? '0' : value; - const gasPriceBN = apiEstimateModifiedToWEI(gasPrice); - const warningSufficientFunds = this.hasSufficientFunds(customGasLimitBN, gasPriceBN); + const gasPriceBN = new BN(gasPrice); + const gasPriceBNWei = apiEstimateModifiedToWEI(gasPrice); + const warningSufficientFunds = this.hasSufficientFunds(customGasLimitBN, gasPriceBNWei); let warningGasPrice; if (value < this.props.basicGasEstimates.safeLowGwei) warningGasPrice = strings('transaction.low_gas_price'); if (!value || value === '' || !isDecimal(value) || value <= 0) warningGasPrice = strings('transaction.invalid_gas_price'); - if (gasPriceBN && !isBN(gasPriceBN)) warningGasPrice = strings('transaction.invalid_gas_price'); + if (gasPriceBNWei && !isBN(gasPriceBNWei)) warningGasPrice = strings('transaction.invalid_gas_price'); this.setState({ - customGasPrice: value, + customGasPrice: gasPrice, + customGasPriceBNWei: gasPriceBNWei, customGasPriceBN: gasPriceBN, warningGasPrice, warningSufficientFunds @@ -569,9 +572,9 @@ class CustomGas extends PureComponent { }; renderCustomGasInput = () => { - const { customGasPrice, customGasLimitBN, customGasPriceBN } = this.state; + const { customGasLimitBN, customGasPriceBNWei, customGasPriceBN } = this.state; const { generateTransform } = this.props; - const totalGas = customGasLimitBN.mul(customGasPriceBN); + const totalGas = customGasLimitBN.mul(customGasPriceBNWei); const ticker = getTicker(this.props.ticker); return ( diff --git a/app/components/UI/TransactionReview/TransactionReviewData/__snapshots__/index.test.js.snap b/app/components/UI/TransactionReview/TransactionReviewData/__snapshots__/index.test.js.snap index bd87237f41b..5c3e12193fc 100644 --- a/app/components/UI/TransactionReview/TransactionReviewData/__snapshots__/index.test.js.snap +++ b/app/components/UI/TransactionReview/TransactionReviewData/__snapshots__/index.test.js.snap @@ -15,61 +15,59 @@ exports[`TransactionReviewData should render correctly 1`] = ` ] } > - - - - - - - Data - + } + > + - + - Data associated with this transaction + Data + + + Data associated with this transaction + - - + - + viewIsInsideTabBar={false} + > + + + + + `; diff --git a/app/components/UI/TransactionReview/TransactionReviewData/index.js b/app/components/UI/TransactionReview/TransactionReviewData/index.js index 9f08f37c30b..90a4795347a 100644 --- a/app/components/UI/TransactionReview/TransactionReviewData/index.js +++ b/app/components/UI/TransactionReview/TransactionReviewData/index.js @@ -1,6 +1,7 @@ import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; -import { StyleSheet, Text, View, TouchableOpacity, ScrollView } from 'react-native'; +import { StyleSheet, Text, View, TouchableOpacity, TouchableWithoutFeedback } from 'react-native'; +import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'; import IonicIcon from 'react-native-vector-icons/Ionicons'; import { colors, fontStyles } from '../../../../styles/common'; import { strings } from '../../../../../locales/i18n'; @@ -59,6 +60,9 @@ const styles = StyleSheet.create({ color: colors.black, fontSize: 14, paddingTop: 0 + }, + scrollView: { + flex: 1 } }); @@ -89,22 +93,22 @@ class TransactionReviewData extends PureComponent { render = () => { const { - transaction: { data }, + transaction: { + transaction: { data } + }, actionKey, toggleDataView } = this.props; return ( - - - - - - {strings('transaction.data')} - - - {strings('transaction.data_description')} + + + + + {strings('transaction.data')} + + {strings('transaction.data_description')} {actionKey !== strings('transactions.tx_review_confirm') && ( @@ -115,9 +119,13 @@ class TransactionReviewData extends PureComponent { )} {strings('transaction.review_hex_data')}: - - {data} - + + + + {data} + + + ); diff --git a/app/components/UI/TransactionReview/TransactionReviewData/index.test.js b/app/components/UI/TransactionReview/TransactionReviewData/index.test.js index 195f48ff968..355757fd4e1 100644 --- a/app/components/UI/TransactionReview/TransactionReviewData/index.test.js +++ b/app/components/UI/TransactionReview/TransactionReviewData/index.test.js @@ -20,8 +20,10 @@ describe('TransactionReviewData', () => { } }, transaction: { + transaction: { + data: '' + }, value: '', - data: '', from: '0x1', gas: '', gasPrice: '', diff --git a/app/components/UI/TransactionReview/TransactionReviewFeeCard/__snapshots__/index.test.js.snap b/app/components/UI/TransactionReview/TransactionReviewFeeCard/__snapshots__/index.test.js.snap index 5d11a7f3627..dd65201917e 100644 --- a/app/components/UI/TransactionReview/TransactionReviewFeeCard/__snapshots__/index.test.js.snap +++ b/app/components/UI/TransactionReview/TransactionReviewFeeCard/__snapshots__/index.test.js.snap @@ -57,12 +57,17 @@ exports[`TransactionReviewFeeCard should render correctly 1`] = ` diff --git a/app/components/UI/TransactionReview/TransactionReviewFeeCard/index.js b/app/components/UI/TransactionReview/TransactionReviewFeeCard/index.js index e7b1be6abe7..c8945b6a5e3 100644 --- a/app/components/UI/TransactionReview/TransactionReviewFeeCard/index.js +++ b/app/components/UI/TransactionReview/TransactionReviewFeeCard/index.js @@ -50,6 +50,9 @@ const styles = StyleSheet.create({ color: colors.fontPrimary, fontSize: 14 }, + amountText: { + textTransform: 'uppercase' + }, networkFeeText: { paddingRight: 5 }, @@ -83,7 +86,7 @@ class TransactionReviewFeeCard extends PureComponent { /** * Total transaction value in fiat */ - totalFiat: PropTypes.string, + totalFiat: PropTypes.object, /** * Transaction value in fiat before gas fee */ @@ -91,7 +94,7 @@ class TransactionReviewFeeCard extends PureComponent { /** * Total transaction value in ETH */ - totalValue: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), + totalValue: PropTypes.object, /** * Transaction value in ETH before gas fee */ @@ -149,7 +152,7 @@ class TransactionReviewFeeCard extends PureComponent { {strings('transaction.amount')} - {amount} + {amount} diff --git a/app/components/UI/TransactionReview/TransactionReviewInformation/index.js b/app/components/UI/TransactionReview/TransactionReviewInformation/index.js index 9137eb75fe8..adfc831dce7 100644 --- a/app/components/UI/TransactionReview/TransactionReviewInformation/index.js +++ b/app/components/UI/TransactionReview/TransactionReviewInformation/index.js @@ -168,7 +168,9 @@ class TransactionReviewInformation extends PureComponent { const totals = { ETH: () => { const totalEth = isBN(value) ? value.add(totalGas) : totalGas; - const totalFiat = weiToFiat(totalEth, conversionRate, currentCurrency); + const totalFiat = ( + {weiToFiat(totalEth, conversionRate, currentCurrency)} + ); const totalValue = ( } totalGasFiat="" totalValue={} transactionValue="" diff --git a/app/components/Views/SendFlow/Confirm/index.js b/app/components/Views/SendFlow/Confirm/index.js index 2b098d25c03..12284f0e31a 100644 --- a/app/components/Views/SendFlow/Confirm/index.js +++ b/app/components/Views/SendFlow/Confirm/index.js @@ -393,7 +393,11 @@ class Confirm extends PureComponent { {renderFromWei(transactionTotalAmountBN)} {parsedTicker} ); - transactionTotalAmountFiat = weiToFiat(transactionTotalAmountBN, conversionRate, currentCurrency); + transactionTotalAmountFiat = ( + + {weiToFiat(transactionTotalAmountBN, conversionRate, currentCurrency)} + + ); transactionTo = to; } else if (selectedAsset.tokenId) { fromAccountBalance = `${renderFromWei(accounts[from].balance)} ${parsedTicker}`; @@ -418,7 +422,11 @@ class Confirm extends PureComponent { {renderFromWei(weiTransactionFee)} {parsedTicker} ); - transactionTotalAmountFiat = weiToFiat(transactionTotalAmountBN, conversionRate, currentCurrency); + transactionTotalAmountFiat = ( + + {weiToFiat(transactionTotalAmountBN, conversionRate, currentCurrency)} + + ); } else { let amount; const { address, symbol = 'ERC20', decimals } = selectedAsset; @@ -439,10 +447,10 @@ class Confirm extends PureComponent { {transactionValue} + ${renderFromWei(weiTransactionFee)} {parsedTicker} ); - transactionTotalAmountFiat = renderFiatAddition( - transactionValueFiatNumber, - transactionFeeFiatNumber, - currentCurrency + transactionTotalAmountFiat = ( + + {renderFiatAddition(transactionValueFiatNumber, transactionFeeFiatNumber, currentCurrency)} + ); } @@ -890,7 +898,7 @@ class Confirm extends PureComponent { transactionFee, transactionTo = '', transactionTotalAmount = , - transactionTotalAmountFiat = '', + transactionTotalAmountFiat = , errorMessage, transactionConfirmed, paymentChannelBalance