From ca12b68bef1f4064a7d7bfbf5a75774779699477 Mon Sep 17 00:00:00 2001 From: rickycodes Date: Thu, 26 Mar 2020 00:08:01 -0400 Subject: [PATCH 1/9] Move gas formatting into utility for reuse --- .../Views/SendFlow/CustomGas/index.js | 46 ++---------------- app/util/custom-gas.js | 47 +++++++++++++++++++ 2 files changed, 50 insertions(+), 43 deletions(-) diff --git a/app/components/Views/SendFlow/CustomGas/index.js b/app/components/Views/SendFlow/CustomGas/index.js index d80cd090339..96cb42bd5a7 100644 --- a/app/components/Views/SendFlow/CustomGas/index.js +++ b/app/components/Views/SendFlow/CustomGas/index.js @@ -8,21 +8,13 @@ import { getRenderableEthGasFee, getRenderableFiatGasFee, apiEstimateModifiedToWEI, - fetchBasicGasEstimates, - convertApiValueToGWEI, - parseWaitTime + getBasicGasEstimates } from '../../../../util/custom-gas'; import { BN } from 'ethereumjs-util'; import { fromWei, renderWei, hexToBN, renderFromWei, isBN, isDecimal } from '../../../../util/number'; -import Logger from '../../../../util/Logger'; import { getTicker } from '../../../../util/transactions'; -import TransactionTypes from '../../../../core/TransactionTypes'; import Radio from '../../../UI/Radio'; -const { - CUSTOM_GAS: { AVERAGE_GAS, FAST_GAS, LOW_GAS } -} = TransactionTypes; - const styles = StyleSheet.create({ root: { margin: 16 @@ -304,40 +296,8 @@ class CustomGas extends PureComponent { handleFetchBasicEstimates = async () => { this.setState({ ready: false }); - let basicGasEstimates; - try { - basicGasEstimates = await fetchBasicGasEstimates(); - } catch (error) { - Logger.log('Error while trying to get gas limit estimates', error); - basicGasEstimates = { - average: AVERAGE_GAS, - averageWait: 2, - safeLow: LOW_GAS, - safeLowWait: 4, - fast: FAST_GAS, - fastWait: 1 - }; - } - - // Handle api failure returning same gas prices - let { average, fast, safeLow } = basicGasEstimates; - const { averageWait, fastWait, safeLowWait } = basicGasEstimates; - - if (average === fast && average === safeLow) { - average = AVERAGE_GAS; - safeLow = LOW_GAS; - fast = FAST_GAS; - } - - this.setState({ - averageGwei: convertApiValueToGWEI(average), - fastGwei: convertApiValueToGWEI(fast), - safeLowGwei: convertApiValueToGWEI(safeLow), - averageWait: parseWaitTime(averageWait), - fastWait: parseWaitTime(fastWait), - safeLowWait: parseWaitTime(safeLowWait), - ready: true - }); + const basicGasEstimates = await getBasicGasEstimates(); + this.setState({ ...basicGasEstimates, ready: true }); }; onGasLimitChange = value => { diff --git a/app/util/custom-gas.js b/app/util/custom-gas.js index a31f83fdca6..583dfd9e31f 100644 --- a/app/util/custom-gas.js +++ b/app/util/custom-gas.js @@ -1,6 +1,8 @@ import { BN } from 'ethereumjs-util'; import { renderFromWei, weiToFiat, toWei } from './number'; import { strings } from '../../locales/i18n'; +import Logger from '../util/Logger'; +import TransactionTypes from '../core/TransactionTypes'; /** * Calculates wei value of estimate gas price in gwei @@ -141,3 +143,48 @@ export async function fetchBasicGasEstimates() { } ); } + +/** + * Sanitize gas estimates into formatted wait times + * + * @returns {Object} - Object containing formatted wait times + */ +export async function getBasicGasEstimates() { + const { + CUSTOM_GAS: { AVERAGE_GAS, FAST_GAS, LOW_GAS } + } = TransactionTypes; + + let basicGasEstimates; + try { + basicGasEstimates = await fetchBasicGasEstimates(); + } catch (error) { + Logger.log('Error while trying to get gas limit estimates', error); + basicGasEstimates = { + average: AVERAGE_GAS, + averageWait: 2, + safeLow: LOW_GAS, + safeLowWait: 4, + fast: FAST_GAS, + fastWait: 1 + }; + } + + // Handle api failure returning same gas prices + let { average, fast, safeLow } = basicGasEstimates; + const { averageWait, fastWait, safeLowWait } = basicGasEstimates; + + if (average === fast && average === safeLow) { + average = AVERAGE_GAS; + safeLow = LOW_GAS; + fast = FAST_GAS; + } + + return { + averageGwei: convertApiValueToGWEI(average), + fastGwei: convertApiValueToGWEI(fast), + safeLowGwei: convertApiValueToGWEI(safeLow), + averageWait: parseWaitTime(averageWait), + fastWait: parseWaitTime(fastWait), + safeLowWait: parseWaitTime(safeLowWait) + }; +} From 9a9ce4e79ee5d52b7c9c4799938efd306ee352c4 Mon Sep 17 00:00:00 2001 From: rickycodes Date: Thu, 26 Mar 2020 00:24:23 -0400 Subject: [PATCH 2/9] Add wait times to CustomGas component --- app/components/UI/CustomGas/index.js | 41 +++++++--------------------- 1 file changed, 10 insertions(+), 31 deletions(-) diff --git a/app/components/UI/CustomGas/index.js b/app/components/UI/CustomGas/index.js index 3f80ca9a778..b22df759003 100644 --- a/app/components/UI/CustomGas/index.js +++ b/app/components/UI/CustomGas/index.js @@ -8,19 +8,12 @@ import { getRenderableEthGasFee, getRenderableFiatGasFee, apiEstimateModifiedToWEI, - fetchBasicGasEstimates, - convertApiValueToGWEI + getBasicGasEstimates } from '../../../util/custom-gas'; import { BN } from 'ethereumjs-util'; import { fromWei, renderWei, hexToBN } from '../../../util/number'; -import Logger from '../../../util/Logger'; import { getTicker } from '../../../util/transactions'; import Device from '../../../util/Device'; -import TransactionTypes from '../../../core/TransactionTypes'; - -const { - CUSTOM_GAS: { AVERAGE_GAS, FAST_GAS, LOW_GAS } -} = TransactionTypes; const styles = StyleSheet.create({ selectors: { @@ -134,8 +127,11 @@ class CustomGas extends PureComponent { gasAverageSelected: true, gasSlowSelected: false, averageGwei: 0, + averageWait: undefined, fastGwei: 0, + fastWait: undefined, safeLowGwei: 0, + safeLowWait: undefined, selected: 'average', ready: false, advancedCustomGas: false, @@ -233,28 +229,8 @@ class CustomGas extends PureComponent { handleFetchBasicEstimates = async () => { this.setState({ ready: false }); - let basicGasEstimates; - try { - basicGasEstimates = await fetchBasicGasEstimates(); - } catch (error) { - Logger.log('Error while trying to get gas limit estimates', error); - basicGasEstimates = { average: AVERAGE_GAS, safeLow: LOW_GAS, fast: FAST_GAS }; - } - - // Handle api failure returning same gas prices - let { average, fast, safeLow } = basicGasEstimates; - if (average === fast && average === safeLow) { - average = AVERAGE_GAS; - safeLow = LOW_GAS; - fast = FAST_GAS; - } - - this.setState({ - averageGwei: convertApiValueToGWEI(average), - fastGwei: convertApiValueToGWEI(fast), - safeLowGwei: convertApiValueToGWEI(safeLow), - ready: true - }); + const basicGasEstimates = await getBasicGasEstimates(); + this.setState({ ...basicGasEstimates, ready: true }); }; onGasLimitChange = value => { @@ -271,7 +247,7 @@ class CustomGas extends PureComponent { }; renderCustomGasSelector = () => { - const { averageGwei, fastGwei, safeLowGwei } = this.state; + const { averageGwei, fastGwei, safeLowGwei, averageWait, safeLowWait, fastWait } = this.state; const { conversionRate, currentCurrency, gas } = this.props; const ticker = getTicker(this.props.ticker); return ( @@ -288,6 +264,7 @@ class CustomGas extends PureComponent { {strings('transaction.gas_fee_slow')} + {safeLowWait} {getRenderableEthGasFee(safeLowGwei, gas)} {ticker} @@ -309,6 +286,7 @@ class CustomGas extends PureComponent { > {strings('transaction.gas_fee_average')} + {averageWait} {getRenderableEthGasFee(averageGwei, gas)} {ticker} @@ -328,6 +306,7 @@ class CustomGas extends PureComponent { {strings('transaction.gas_fee_fast')} + {fastWait} {getRenderableEthGasFee(fastGwei, gas)} {ticker} From 573c6b4209574fcc5045a1e87425fef630fa3174 Mon Sep 17 00:00:00 2001 From: rickycodes Date: Thu, 26 Mar 2020 00:57:25 -0400 Subject: [PATCH 3/9] Get these via destructured assignment --- app/components/UI/CustomGas/index.js | 38 +++++++++++++++++----------- 1 file changed, 23 insertions(+), 15 deletions(-) diff --git a/app/components/UI/CustomGas/index.js b/app/components/UI/CustomGas/index.js index b22df759003..d6f044c87eb 100644 --- a/app/components/UI/CustomGas/index.js +++ b/app/components/UI/CustomGas/index.js @@ -247,7 +247,17 @@ class CustomGas extends PureComponent { }; renderCustomGasSelector = () => { - const { averageGwei, fastGwei, safeLowGwei, averageWait, safeLowWait, fastWait } = this.state; + const { + averageGwei, + fastGwei, + safeLowGwei, + averageWait, + safeLowWait, + fastWait, + gasSlowSelected, + gasAverageSelected, + gasFastSelected + } = this.state; const { conversionRate, currentCurrency, gas } = this.props; const ticker = getTicker(this.props.ticker); return ( @@ -258,17 +268,17 @@ class CustomGas extends PureComponent { style={[ styles.selector, styles.slow, - { backgroundColor: this.state.gasSlowSelected ? colors.blue : colors.white } + { backgroundColor: gasSlowSelected ? colors.blue : colors.white } ]} > - + {strings('transaction.gas_fee_slow')} {safeLowWait} - + {getRenderableEthGasFee(safeLowGwei, gas)} {ticker} - + {getRenderableFiatGasFee(safeLowGwei, conversionRate, currentCurrency, gas)} @@ -278,19 +288,17 @@ class CustomGas extends PureComponent { style={[ styles.selector, styles.average, - { backgroundColor: this.state.gasAverageSelected ? colors.blue : colors.white } + { backgroundColor: gasAverageSelected ? colors.blue : colors.white } ]} > - + {strings('transaction.gas_fee_average')} {averageWait} - + {getRenderableEthGasFee(averageGwei, gas)} {ticker} - + {getRenderableFiatGasFee(averageGwei, conversionRate, currentCurrency, gas)} @@ -300,17 +308,17 @@ class CustomGas extends PureComponent { style={[ styles.selector, styles.fast, - { backgroundColor: this.state.gasFastSelected ? colors.blue : colors.white } + { backgroundColor: gasFastSelected ? colors.blue : colors.white } ]} > - + {strings('transaction.gas_fee_fast')} {fastWait} - + {getRenderableEthGasFee(fastGwei, gas)} {ticker} - + {getRenderableFiatGasFee(fastGwei, conversionRate, currentCurrency, gas)} From d4f5087b1c71c9ae8d37563bd02051a747b88ea4 Mon Sep 17 00:00:00 2001 From: rickycodes Date: Thu, 26 Mar 2020 01:00:52 -0400 Subject: [PATCH 4/9] Text colour does not change in new designs --- app/components/UI/CustomGas/index.js | 24 +++++++++--------------- 1 file changed, 9 insertions(+), 15 deletions(-) diff --git a/app/components/UI/CustomGas/index.js b/app/components/UI/CustomGas/index.js index d6f044c87eb..96b3853f1a5 100644 --- a/app/components/UI/CustomGas/index.js +++ b/app/components/UI/CustomGas/index.js @@ -271,14 +271,12 @@ class CustomGas extends PureComponent { { backgroundColor: gasSlowSelected ? colors.blue : colors.white } ]} > - - {strings('transaction.gas_fee_slow')} - + {strings('transaction.gas_fee_slow')} {safeLowWait} - + {getRenderableEthGasFee(safeLowGwei, gas)} {ticker} - + {getRenderableFiatGasFee(safeLowGwei, conversionRate, currentCurrency, gas)} @@ -291,14 +289,12 @@ class CustomGas extends PureComponent { { backgroundColor: gasAverageSelected ? colors.blue : colors.white } ]} > - - {strings('transaction.gas_fee_average')} - + {strings('transaction.gas_fee_average')} {averageWait} - + {getRenderableEthGasFee(averageGwei, gas)} {ticker} - + {getRenderableFiatGasFee(averageGwei, conversionRate, currentCurrency, gas)} @@ -311,14 +307,12 @@ class CustomGas extends PureComponent { { backgroundColor: gasFastSelected ? colors.blue : colors.white } ]} > - - {strings('transaction.gas_fee_fast')} - + {strings('transaction.gas_fee_fast')} {fastWait} - + {getRenderableEthGasFee(fastGwei, gas)} {ticker} - + {getRenderableFiatGasFee(fastGwei, conversionRate, currentCurrency, gas)} From 7292b477545405fca11e2688316245a79c97545f Mon Sep 17 00:00:00 2001 From: rickycodes Date: Thu, 26 Mar 2020 11:21:00 -0400 Subject: [PATCH 5/9] Update selector styles --- app/components/UI/CustomGas/index.js | 69 +++++++++++++--------------- 1 file changed, 32 insertions(+), 37 deletions(-) diff --git a/app/components/UI/CustomGas/index.js b/app/components/UI/CustomGas/index.js index 96b3853f1a5..5267eba5e23 100644 --- a/app/components/UI/CustomGas/index.js +++ b/app/components/UI/CustomGas/index.js @@ -13,14 +13,9 @@ import { import { BN } from 'ethereumjs-util'; import { fromWei, renderWei, hexToBN } from '../../../util/number'; import { getTicker } from '../../../util/transactions'; -import Device from '../../../util/Device'; const styles = StyleSheet.create({ selectors: { - backgroundColor: colors.white, - borderColor: colors.grey100, - borderRadius: 4, - borderWidth: 1, flex: 1, position: 'relative', flexDirection: 'row', @@ -30,39 +25,51 @@ const styles = StyleSheet.create({ alignSelf: 'stretch', textAlign: 'center', alignItems: 'flex-start', - width: '33%', - paddingVertical: 8, - paddingHorizontal: 10 + width: '33.333333333%', + paddingVertical: 10, + paddingHorizontal: 12, + borderWidth: 1, + borderColor: colors.grey100, + marginLeft: -2 + }, + selectorSelected: { + backgroundColor: colors.blue000, + borderColor: colors.blue, + zIndex: 1 }, advancedOptions: { textAlign: 'right', alignItems: 'flex-end', marginTop: 10 }, - average: { - borderColor: colors.grey100, - borderRightWidth: 1, - borderLeftWidth: 1 - }, slow: { - borderBottomStartRadius: 4, - borderTopStartRadius: 4 + borderBottomStartRadius: 6, + borderTopStartRadius: 6 }, fast: { - borderBottomEndRadius: 4, - borderTopEndRadius: 4 + borderBottomEndRadius: 6, + borderTopEndRadius: 6 }, text: { ...fontStyles.normal, - fontSize: Device.isSmallDevice() ? 10 : 12 + fontSize: 10, + color: colors.black }, textTitle: { ...fontStyles.bold, - fontSize: Device.isSmallDevice() ? 10 : 14 + fontSize: 10, + color: colors.black }, textTotalGas: { ...fontStyles.bold }, + textTime: { + ...fontStyles.bold, + color: colors.black, + marginVertical: 4, + fontSize: 18, + textTransform: 'none' + }, textAdvancedOptions: { color: colors.blue }, @@ -265,14 +272,10 @@ class CustomGas extends PureComponent { {strings('transaction.gas_fee_slow')} - {safeLowWait} + {safeLowWait} {getRenderableEthGasFee(safeLowGwei, gas)} {ticker} @@ -283,14 +286,10 @@ class CustomGas extends PureComponent { {strings('transaction.gas_fee_average')} - {averageWait} + {averageWait} {getRenderableEthGasFee(averageGwei, gas)} {ticker} @@ -301,14 +300,10 @@ class CustomGas extends PureComponent { {strings('transaction.gas_fee_fast')} - {fastWait} + {fastWait} {getRenderableEthGasFee(fastGwei, gas)} {ticker} From 7d1640463d24c795f151e95545dcc865bfcadb13 Mon Sep 17 00:00:00 2001 From: rickycodes Date: Thu, 26 Mar 2020 12:00:33 -0400 Subject: [PATCH 6/9] Add Radios and supporting styles --- app/components/UI/CustomGas/index.js | 37 +++++++++++++++++++++++++--- 1 file changed, 34 insertions(+), 3 deletions(-) diff --git a/app/components/UI/CustomGas/index.js b/app/components/UI/CustomGas/index.js index 5267eba5e23..ee312a2a130 100644 --- a/app/components/UI/CustomGas/index.js +++ b/app/components/UI/CustomGas/index.js @@ -13,8 +13,18 @@ import { import { BN } from 'ethereumjs-util'; import { fromWei, renderWei, hexToBN } from '../../../util/number'; import { getTicker } from '../../../util/transactions'; +import Radio from '../Radio'; const styles = StyleSheet.create({ + titleContainer: { + flex: 1, + width: '100%', + flexDirection: 'row', + justifyContent: 'space-between' + }, + radio: { + marginLeft: 'auto' + }, selectors: { flex: 1, position: 'relative', @@ -274,7 +284,14 @@ class CustomGas extends PureComponent { onPress={this.onPressGasSlow} style={[styles.selector, styles.slow, gasSlowSelected && styles.selectorSelected]} > - {strings('transaction.gas_fee_slow')} + + + {strings('transaction.gas_fee_slow')} + + + + + {safeLowWait} {getRenderableEthGasFee(safeLowGwei, gas)} {ticker} @@ -288,7 +305,14 @@ class CustomGas extends PureComponent { onPress={this.onPressGasAverage} style={[styles.selector, gasAverageSelected && styles.selectorSelected]} > - {strings('transaction.gas_fee_average')} + + + {strings('transaction.gas_fee_average')} + + + + + {averageWait} {getRenderableEthGasFee(averageGwei, gas)} {ticker} @@ -302,7 +326,14 @@ class CustomGas extends PureComponent { onPress={this.onPressGasFast} style={[styles.selector, styles.fast, gasFastSelected && styles.selectorSelected]} > - {strings('transaction.gas_fee_fast')} + + + {strings('transaction.gas_fee_fast')} + + + + + {fastWait} {getRenderableEthGasFee(fastGwei, gas)} {ticker} From d5efd0b4f82f071714634f1464c0010d97f1e949 Mon Sep 17 00:00:00 2001 From: rickycodes Date: Thu, 26 Mar 2020 12:57:14 -0400 Subject: [PATCH 7/9] Move "Advanced" toggle above lockup and update wording --- app/components/UI/CustomGas/index.js | 46 ++++++++++++++++------ app/components/UI/TransactionEdit/index.js | 7 +--- locales/en.json | 4 +- 3 files changed, 36 insertions(+), 21 deletions(-) diff --git a/app/components/UI/CustomGas/index.js b/app/components/UI/CustomGas/index.js index ee312a2a130..cb7de2500d9 100644 --- a/app/components/UI/CustomGas/index.js +++ b/app/components/UI/CustomGas/index.js @@ -16,12 +16,21 @@ import { getTicker } from '../../../util/transactions'; import Radio from '../Radio'; const styles = StyleSheet.create({ + labelText: { + ...fontStyles.bold, + color: colors.grey400, + fontSize: 16 + }, titleContainer: { flex: 1, width: '100%', flexDirection: 'row', justifyContent: 'space-between' }, + titleMargin: { + marginBottom: 10, + alignItems: 'flex-end' + }, radio: { marginLeft: 'auto' }, @@ -49,8 +58,7 @@ const styles = StyleSheet.create({ }, advancedOptions: { textAlign: 'right', - alignItems: 'flex-end', - marginTop: 10 + alignItems: 'flex-end' }, slow: { borderBottomStartRadius: 6, @@ -81,7 +89,8 @@ const styles = StyleSheet.create({ textTransform: 'none' }, textAdvancedOptions: { - color: colors.blue + color: colors.blue, + fontSize: 14 }, gasInput: { ...fontStyles.bold, @@ -135,7 +144,11 @@ class CustomGas extends PureComponent { /** * Current provider ticker */ - ticker: PropTypes.string + ticker: PropTypes.string, + /** + * Displayed when there is a gas station error + */ + gasError: PropTypes.string }; state = { @@ -378,18 +391,25 @@ class CustomGas extends PureComponent { render = () => { if (this.state.ready) { const { advancedCustomGas } = this.state; + const { gasError } = this.props; return ( - {advancedCustomGas ? this.renderCustomGasInput() : this.renderCustomGasSelector()} - - - - {advancedCustomGas - ? strings('custom_gas.hide_advanced_options') - : strings('custom_gas.advanced_options')} - - + + + {strings('transaction.gas_fee')}: + {gasError ? {gasError} : null} + + + + + {advancedCustomGas + ? strings('custom_gas.hide_advanced_options') + : strings('custom_gas.advanced_options')} + + + + {advancedCustomGas ? this.renderCustomGasInput() : this.renderCustomGasSelector()} ); } diff --git a/app/components/UI/TransactionEdit/index.js b/app/components/UI/TransactionEdit/index.js index eeae46c2881..21df18fec6c 100644 --- a/app/components/UI/TransactionEdit/index.js +++ b/app/components/UI/TransactionEdit/index.js @@ -429,17 +429,12 @@ class TransactionEdit extends PureComponent { {!paymentChannelTransaction && ( <> - - {strings('transaction.gas_fee')}: - {gasError ? {gasError} : null} - - - diff --git a/locales/en.json b/locales/en.json index be00e4a143b..662e6256cb6 100644 --- a/locales/en.json +++ b/locales/en.json @@ -511,8 +511,8 @@ "not_enough_for_gas": "You have 0 ETH in your account to pay for transaction fees. Buy some ETH or deposit from another account." }, "custom_gas": { - "advanced_options": "Show advanced options", - "hide_advanced_options": "Hide advanced options", + "advanced_options": "Advanced", + "hide_advanced_options": "Hide advanced", "gas_limit": "Gas Limit:", "gas_price": "Gas Price: (GWEI)", "warning_gas_limit": "Gas limit must be greater than 20999 and less than 7920027", From 6222717b562b92c69143fc753f86b9292f98efbf Mon Sep 17 00:00:00 2001 From: rickycodes Date: Thu, 26 Mar 2020 13:02:16 -0400 Subject: [PATCH 8/9] Update TransactionEdit test --- .../__snapshots__/index.test.js.snap | 30 +------------------ 1 file changed, 1 insertion(+), 29 deletions(-) diff --git a/app/components/UI/TransactionEdit/__snapshots__/index.test.js.snap b/app/components/UI/TransactionEdit/__snapshots__/index.test.js.snap index 4bcc4049776..34dda7ba23a 100644 --- a/app/components/UI/TransactionEdit/__snapshots__/index.test.js.snap +++ b/app/components/UI/TransactionEdit/__snapshots__/index.test.js.snap @@ -224,38 +224,10 @@ exports[`TransactionEdit should render correctly 1`] = ` }, ] } - > - - - Transaction Fee - : - - - - Date: Fri, 27 Mar 2020 16:36:28 -0400 Subject: [PATCH 9/9] Remove redundant s --- app/components/UI/CustomGas/index.js | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/app/components/UI/CustomGas/index.js b/app/components/UI/CustomGas/index.js index cb7de2500d9..71d3ba81bd8 100644 --- a/app/components/UI/CustomGas/index.js +++ b/app/components/UI/CustomGas/index.js @@ -298,9 +298,7 @@ class CustomGas extends PureComponent { style={[styles.selector, styles.slow, gasSlowSelected && styles.selectorSelected]} > - - {strings('transaction.gas_fee_slow')} - + {strings('transaction.gas_fee_slow')} @@ -319,9 +317,7 @@ class CustomGas extends PureComponent { style={[styles.selector, gasAverageSelected && styles.selectorSelected]} > - - {strings('transaction.gas_fee_average')} - + {strings('transaction.gas_fee_average')} @@ -340,9 +336,7 @@ class CustomGas extends PureComponent { style={[styles.selector, styles.fast, gasFastSelected && styles.selectorSelected]} > - - {strings('transaction.gas_fee_fast')} - + {strings('transaction.gas_fee_fast')}