Skip to content

Commit

Permalink
Add props to hide selectors from gas edit modal (#2311)
Browse files Browse the repository at this point in the history
  • Loading branch information
@wachunei
wachunei authored Mar 1, 2021
1 parent a82b7bb commit 6baba1b
Show file tree
Hide file tree
Showing 3 changed files with 90 additions and 61 deletions.
12 changes: 8 additions & 4 deletions app/components/UI/CustomGas/__snapshots__/index.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,12 +162,13 @@ exports[`CustomGas should render correctly 1`] = `
"alignSelf": "stretch",
"borderColor": "#d6d9dc",
"borderWidth": 1,
"flex": 1,
"marginLeft": -2,
"paddingHorizontal": 12,
"paddingVertical": 10,
"textAlign": "center",
"width": "33.333333333%",
},
false,
Object {
"borderBottomStartRadius": 6,
"borderTopStartRadius": 6,
Expand Down Expand Up @@ -251,17 +252,19 @@ exports[`CustomGas should render correctly 1`] = `
"alignSelf": "stretch",
"borderColor": "#d6d9dc",
"borderWidth": 1,
"flex": 1,
"marginLeft": -2,
"paddingHorizontal": 12,
"paddingVertical": 10,
"textAlign": "center",
"width": "33.333333333%",
},
Object {
"backgroundColor": "#eaf6ff",
"borderColor": "#037dd6",
"zIndex": 1,
},
false,
false,
]
}
>
Expand Down Expand Up @@ -340,17 +343,18 @@ exports[`CustomGas should render correctly 1`] = `
"alignSelf": "stretch",
"borderColor": "#d6d9dc",
"borderWidth": 1,
"flex": 1,
"marginLeft": -2,
"paddingHorizontal": 12,
"paddingVertical": 10,
"textAlign": "center",
"width": "33.333333333%",
},
false,
false,
Object {
"borderBottomEndRadius": 6,
"borderTopEndRadius": 6,
},
false,
]
}
>
Expand Down
138 changes: 81 additions & 57 deletions app/components/UI/CustomGas/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ const styles = StyleSheet.create({
alignSelf: 'stretch',
textAlign: 'center',
alignItems: 'flex-start',
width: '33.333333333%',
flex: 1,
paddingVertical: 10,
paddingHorizontal: 12,
borderWidth: 1,
Expand All @@ -124,11 +124,11 @@ const styles = StyleSheet.create({
borderColor: colors.blue,
zIndex: 1
},
slow: {
first: {
borderBottomStartRadius: 6,
borderTopStartRadius: 6
},
fast: {
last: {
borderBottomEndRadius: 6,
borderTopEndRadius: 6
},
Expand Down Expand Up @@ -281,6 +281,9 @@ class CustomGas extends PureComponent {
* gas selectors are hidden or not
*/
hideGasSelectors: PropTypes.bool,
hideSlow: PropTypes.bool,
hideAverage: PropTypes.bool,
hideFast: PropTypes.bool,
/**
* review or edit
*/
Expand Down Expand Up @@ -476,6 +479,9 @@ class CustomGas extends PureComponent {
gas,
generateTransform,
hideGasSelectors,
hideSlow,
hideAverage,
hideFast,
basicGasEstimates: { averageGwei, fastGwei, safeLowGwei }
} = this.props;
const ticker = getTicker(this.props.ticker);
Expand All @@ -493,60 +499,78 @@ class CustomGas extends PureComponent {
]}
>
<View style={styles.selectors}>
<TouchableOpacity
key={'safeLow'}
onPress={this.onPressGasSlow}
style={[styles.selector, styles.slow, gasSlowSelected && styles.selectorSelected]}
>
<View style={styles.titleContainer}>
<Text style={styles.textTitle}>{strings('transaction.gas_fee_slow')}</Text>
<View style={styles.radio}>
<Radio selected={gasSlowSelected} />
</View>
</View>
<Text style={[styles.text, styles.textGasFee]}>
{getRenderableEthGasFee(safeLowGwei, gas)} {ticker}
</Text>
<Text style={styles.text}>
{getRenderableFiatGasFee(safeLowGwei, conversionRate, currentCurrency, gas)}
</Text>
</TouchableOpacity>
<TouchableOpacity
key={'average'}
onPress={this.onPressGasAverage}
style={[styles.selector, gasAverageSelected && styles.selectorSelected]}
>
<View style={styles.titleContainer}>
<Text style={styles.textTitle}>{strings('transaction.gas_fee_average')}</Text>
<View style={styles.radio}>
<Radio selected={gasAverageSelected} />
</View>
</View>
<Text style={[styles.text, styles.textGasFee]}>
{getRenderableEthGasFee(averageGwei, gas)} {ticker}
</Text>
<Text style={styles.text}>
{getRenderableFiatGasFee(averageGwei, conversionRate, currentCurrency, gas)}
</Text>
</TouchableOpacity>
<TouchableOpacity
key={'fast'}
onPress={this.onPressGasFast}
style={[styles.selector, styles.fast, gasFastSelected && styles.selectorSelected]}
>
<View style={styles.titleContainer}>
<Text style={styles.textTitle}>{strings('transaction.gas_fee_fast')}</Text>
<View style={styles.radio}>
<Radio selected={gasFastSelected} />
</View>
</View>
<Text style={[styles.text, styles.textGasFee]}>
{getRenderableEthGasFee(fastGwei, gas)} {ticker}
</Text>
<Text style={styles.text}>
{getRenderableFiatGasFee(fastGwei, conversionRate, currentCurrency, gas)}
</Text>
</TouchableOpacity>
{[
!hideSlow && (
<TouchableOpacity
key={'safeLow'}
onPress={this.onPressGasSlow}
style={[styles.selector, gasSlowSelected && styles.selectorSelected]}
>
<View style={styles.titleContainer}>
<Text style={styles.textTitle}>{strings('transaction.gas_fee_slow')}</Text>
<View style={styles.radio}>
<Radio selected={gasSlowSelected} />
</View>
</View>
<Text style={[styles.text, styles.textGasFee]}>
{getRenderableEthGasFee(safeLowGwei, gas)} {ticker}
</Text>
<Text style={styles.text}>
{getRenderableFiatGasFee(safeLowGwei, conversionRate, currentCurrency, gas)}
</Text>
</TouchableOpacity>
),
!hideAverage && (
<TouchableOpacity
key={'average'}
onPress={this.onPressGasAverage}
style={[styles.selector, gasAverageSelected && styles.selectorSelected]}
>
<View style={styles.titleContainer}>
<Text style={styles.textTitle}>{strings('transaction.gas_fee_average')}</Text>
<View style={styles.radio}>
<Radio selected={gasAverageSelected} />
</View>
</View>
<Text style={[styles.text, styles.textGasFee]}>
{getRenderableEthGasFee(averageGwei, gas)} {ticker}
</Text>
<Text style={styles.text}>
{getRenderableFiatGasFee(averageGwei, conversionRate, currentCurrency, gas)}
</Text>
</TouchableOpacity>
),
!hideFast && (
<TouchableOpacity
key={'fast'}
onPress={this.onPressGasFast}
style={[styles.selector, gasFastSelected && styles.selectorSelected]}
>
<View style={styles.titleContainer}>
<Text style={styles.textTitle}>{strings('transaction.gas_fee_fast')}</Text>
<View style={styles.radio}>
<Radio selected={gasFastSelected} />
</View>
</View>
<Text style={[styles.text, styles.textGasFee]}>
{getRenderableEthGasFee(fastGwei, gas)} {ticker}
</Text>
<Text style={styles.text}>
{getRenderableFiatGasFee(fastGwei, conversionRate, currentCurrency, gas)}
</Text>
</TouchableOpacity>
)
]
.filter(Boolean)
.map((Component, index, array) =>
React.cloneElement(Component, {
style: [
...Component.props.style,
index === 0 && styles.first,
index === array.length - 1 && styles.last
]
})
)}
</View>
<Text style={styles.message}>{strings('custom_gas.cost_explanation')}</Text>
</Animated.View>
Expand Down
1 change: 1 addition & 0 deletions app/components/UI/Swaps/components/TransactionsEditionModal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,7 @@ function TransactionsEditionModal({
gasError={null}
mode={'edit'}
customTransaction={selectedQuote.trade}
hideSlow
/>
</AnimatedTransactionModal>
)}
Expand Down

0 comments on commit 6baba1b

Please sign in to comment.