Skip to content

Commit

Permalink
Educate gas fees (#2611)
Browse files Browse the repository at this point in the history 
Co-authored-by: sethkfman <10342624+sethkfman@users.noreply.github.com>
Co-authored-by: Pedro Pablo Aste Kompen <wachunei@gmail.com>
  • Loading branch information
@andrepimenta @sethkfman @wachunei
3 people authored Jun 4, 2021
1 parent 3d3f5a4 commit c84302d
Show file tree
Hide file tree
Showing 22 changed files with 1,006 additions and 153 deletions.
6 changes: 6 additions & 0 deletions app/actions/user/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,3 +58,9 @@ export function loadingUnset() {
type: 'LOADING_UNSET'
};
}

export function setGasEducationCarouselSeen() {
return {
type: 'SET_GAS_EDUCATION_CAROUSEL_SEEN'
};
}
20 changes: 20 additions & 0 deletions app/components/Base/Text.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,9 @@ const style = StyleSheet.create({
green: {
color: colors.green400
},
grey: {
color: colors.grey500
},
primary: {
color: colors.fontPrimary
},
Expand All @@ -50,6 +53,10 @@ const style = StyleSheet.create({
fontSize: 16,
lineHeight: 30
},
infoModal: {
lineHeight: 20,
marginVertical: 6
},
link: {
color: colors.blue
},
Expand All @@ -72,12 +79,14 @@ const Text = ({
green,
black,
blue,
grey,
red,
primary,
small,
big,
upper,
modal,
infoModal,
disclaimer,
link,
strikethrough,
Expand All @@ -95,6 +104,7 @@ const Text = ({
green && style.green,
black && style.black,
blue && style.blue,
grey && style.grey,
red && style.red,
black && style.black,
primary && style.primary,
Expand All @@ -103,6 +113,7 @@ const Text = ({
big && style.big,
upper && style.upper,
modal && style.modal,
infoModal && style.infoModal,
link && style.link,
strikethrough && style.strikethrough,
underline && style.underline,
Expand Down Expand Up @@ -163,6 +174,10 @@ Text.propTypes = {
* Makes text blue
*/
blue: PropTypes.bool,
/**
* Makes text grey
*/
grey: PropTypes.bool,
/**
* Makes text red
*/
Expand All @@ -181,6 +196,11 @@ Text.propTypes = {
* Used in modals
*/
modal: PropTypes.bool,
/**
* Makes text with bigger line height
* Used in modals with information text
*/
infoModal: PropTypes.bool,
/**
* Makes text small
*/
Expand Down
4 changes: 3 additions & 1 deletion app/components/Nav/Main/MainNavigator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ import TransakWebView from '../../UI/FiatOrders/TransakWebView';
import ActivityView from '../../Views/ActivityView';
import SwapsAmountView from '../../UI/Swaps';
import SwapsQuotesView from '../../UI/Swaps/QuotesView';
import GasEducationCarousel from '../../Views/GasEducationCarousel';

const styles = StyleSheet.create({
headerLogo: {
Expand Down Expand Up @@ -263,7 +264,8 @@ export default createStackNavigator(
screen: createStackNavigator({
PaymentMethodSelector: { screen: PaymentMethodSelector },
PaymentMethodApplePay: { screen: PaymentMethodApplePay },
TransakFlow: { screen: TransakWebView }
TransakFlow: { screen: TransakWebView },
GasEducationCarousel: { screen: GasEducationCarousel }
})
},
Swaps: {
Expand Down
2 changes: 2 additions & 0 deletions app/components/Nav/Main/__snapshots__/index.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ exports[`Main should render correctly 1`] = `
},
"FiatOnRamp": Object {
"childRouters": Object {
"GasEducationCarousel": null,
"PaymentMethodApplePay": null,
"PaymentMethodSelector": null,
"TransakFlow": null,
Expand Down Expand Up @@ -401,6 +402,7 @@ exports[`Main should render correctly 1`] = `
},
"FiatOnRamp": Object {
"childRouters": Object {
"GasEducationCarousel": null,
"PaymentMethodApplePay": null,
"PaymentMethodSelector": null,
"TransakFlow": null,
Expand Down
98 changes: 84 additions & 14 deletions app/components/UI/ApproveTransactionReview/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { PureComponent } from 'react';
import { StyleSheet, Text, View, TouchableOpacity, InteractionManager } from 'react-native';
import { StyleSheet, View, TouchableOpacity, InteractionManager, Linking } from 'react-native';
import ActionView from '../../UI/ActionView';
import Clipboard from '@react-native-community/clipboard';
import PropTypes from 'prop-types';
Expand Down Expand Up @@ -35,11 +35,14 @@ import Device from '../../../util/Device';
import AppConstants from '../../../core/AppConstants';
import { WALLET_CONNECT_ORIGIN } from '../../../util/walletconnect';
import { withNavigation } from 'react-navigation';
import { getNetworkName, isMainNet } from '../../../util/networks';
import { getNetworkName, isMainNet, isMainnetByChainId } from '../../../util/networks';
import scaling from '../../../util/scaling';
import { capitalize } from '../../../util/general';
import EditPermission, { MINIMUM_VALUE } from './EditPermission';
import Logger from '../../../util/Logger';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import InfoModal from '../Swaps/components/InfoModal';
import Text from '../../Base/Text';

const { hexToBN } = util;
const styles = StyleSheet.create({
Expand Down Expand Up @@ -146,6 +149,18 @@ const styles = StyleSheet.create({
},
paddingHorizontal: {
paddingHorizontal: 16
},
gasInfoContainer: {
paddingHorizontal: 2
},
gasInfoIcon: {
color: colors.blue
},
hitSlop: {
top: 10,
left: 10,
bottom: 10,
right: 10
}
});

Expand Down Expand Up @@ -233,7 +248,11 @@ class ApproveTransactionReview extends PureComponent {
/**
* Function to set analytics params
*/
onSetAnalyticsParams: PropTypes.func
onSetAnalyticsParams: PropTypes.func,
/**
* A string representing the network chainId
*/
chainId: PropTypes.string
};

state = {
Expand All @@ -250,7 +269,8 @@ class ApproveTransactionReview extends PureComponent {
viewDetails: false,
spenderAddress: '0x...',
transaction: this.props.transaction,
token: {}
token: {},
showGasTooltip: false
};

customSpendLimitInput = React.createRef();
Expand Down Expand Up @@ -439,6 +459,39 @@ class ApproveTransactionReview extends PureComponent {
AnalyticsV2.trackEvent(AnalyticsV2.ANALYTICS_EVENTS.APPROVAL_PERMISSION_UPDATED, this.getAnalyticsParams());
};

openLinkAboutGas = () =>
Linking.openURL('https://community.metamask.io/t/what-is-gas-why-do-transactions-take-so-long/3172');

toggleGasTooltip = () => this.setState(state => ({ showGasTooltip: !state.showGasTooltip }));

renderGasTooltip = () => {
const isMainnet = isMainnetByChainId(this.props.chainId);
return (
<InfoModal
isVisible={this.state.showGasTooltip}
title={strings(`transaction.gas_education_title${isMainnet ? '_ethereum' : ''}`)}
toggleModal={this.toggleGasTooltip}
body={
<View>
<Text grey infoModal>
{strings('transaction.gas_education_1')}
{strings(`transaction.gas_education_2${isMainnet ? '_ethereum' : ''}`)}{' '}
<Text bold>{strings('transaction.gas_education_3')}</Text>
</Text>
<Text grey infoModal>
{strings('transaction.gas_education_4')}
</Text>
<TouchableOpacity onPress={this.openLinkAboutGas}>
<Text grey link infoModal>
{strings('transaction.gas_education_learn_more')}
</Text>
</TouchableOpacity>
</View>
}
/>
);
};

renderEditPermission = () => {
const {
host,
Expand Down Expand Up @@ -496,13 +549,13 @@ class ApproveTransactionReview extends PureComponent {
<TransactionHeader
currentPageInformation={{ origin, spenderAddress, title: host, url: activeTabUrl }}
/>
<Text style={styles.title} testID={'allow-access'}>
<Text reset style={styles.title} testID={'allow-access'}>
{strings(
`spend_limit_edition.${originIsDeeplink ? 'allow_to_address_access' : 'allow_to_access'}`,
{ tokenSymbol }
)}
</Text>
<Text style={styles.explanation}>
<Text reset style={styles.explanation}>
{`${strings(
`spend_limit_edition.${originIsDeeplink ? 'you_trust_this_address' : 'you_trust_this_site'}`
)}`}
Expand All @@ -517,7 +570,7 @@ class ApproveTransactionReview extends PureComponent {
>
<View style={styles.actionViewChildren}>
<TouchableOpacity style={styles.actionTouchable} onPress={this.toggleEditPermission}>
<Text style={styles.editPermissionText}>
<Text reset style={styles.editPermissionText}>
{strings('spend_limit_edition.edit_permission')}
</Text>
</TouchableOpacity>
Expand All @@ -526,10 +579,21 @@ class ApproveTransactionReview extends PureComponent {
<View style={styles.section}>
<TouchableOpacity onPress={this.edit}>
<View style={styles.networkFee}>
<Text style={styles.sectionLeft}>
<Text reset style={styles.sectionLeft}>
{strings('transaction.transaction_fee')}
<TouchableOpacity
style={styles.gasInfoContainer}
onPress={this.toggleGasTooltip}
hitSlop={styles.hitSlop}
>
<MaterialCommunityIcons
name="information"
size={13}
style={styles.gasInfoIcon}
/>
</TouchableOpacity>
</Text>
<Text style={styles.sectionRight}>
<Text reset style={styles.sectionRight}>
{isFiat && currencySymbol}
{isFiat ? totalGasFiatRounded : totalGas} {!isFiat && ticker}
</Text>
Expand All @@ -545,10 +609,12 @@ class ApproveTransactionReview extends PureComponent {
{gasError && (
<View style={styles.errorWrapper}>
<TouchableOpacity onPress={errorPress}>
<Text style={styles.error}>{gasError}</Text>
<Text reset style={styles.error}>
{gasError}
</Text>
{/* only show buy more on mainnet */}
{over && is_main_net && (
<Text style={[styles.error, styles.underline]}>
<Text reset style={[styles.error, styles.underline]}>
{errorLinkText}
</Text>
)}
Expand All @@ -557,7 +623,9 @@ class ApproveTransactionReview extends PureComponent {
)}
{!!warningGasPriceHigh && (
<View style={styles.errorWrapper}>
<Text style={styles.error}>{warningGasPriceHigh}</Text>
<Text reset style={styles.error}>
{warningGasPriceHigh}
</Text>
</View>
)}
{!gasError && (
Expand All @@ -566,7 +634,7 @@ class ApproveTransactionReview extends PureComponent {
onPress={this.toggleViewDetails}
>
<View>
<Text style={styles.viewDetailsText}>
<Text reset style={styles.viewDetailsText}>
{strings('spend_limit_edition.view_details')}
</Text>
</View>
Expand All @@ -578,6 +646,7 @@ class ApproveTransactionReview extends PureComponent {
</ActionView>
</View>
</View>
{this.renderGasTooltip()}
</>
);
};
Expand Down Expand Up @@ -666,7 +735,8 @@ const mapStateToProps = state => ({
providerType: state.engine.backgroundState.NetworkController.provider.type,
primaryCurrency: state.settings.primaryCurrency,
activeTabUrl: getActiveTabUrl(state),
network: state.engine.backgroundState.NetworkController.network
network: state.engine.backgroundState.NetworkController.network,
chainId: state.engine.backgroundState.NetworkController.provider.chainId
});

const mapDispatchToProps = dispatch => ({
Expand Down
4 changes: 2 additions & 2 deletions app/components/UI/CustomGas/__snapshots__/index.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ exports[`CustomGas should render correctly 1`] = `
}
}
>
Edit Network Fee
Edit Gas Fee
</Text>
<Icon
allowFontScaling={false}
Expand Down Expand Up @@ -434,7 +434,7 @@ exports[`CustomGas should render correctly 1`] = `
}
}
>
The network fee covers the cost of processing your transaction on the Ethereum network. MetaMask does not profit from this fee. The higher the fee the better chances of your transaction getting processed.
The gas fee covers the cost of processing your transaction on the Ethereum network. MetaMask does not profit from this fee. The higher the fee the better chances of your transaction getting processed.
</Text>
</ForwardRef(AnimatedComponentWrapper)>
<ForwardRef(AnimatedComponentWrapper)
Expand Down
Loading

0 comments on commit c84302d

Please sign in to comment.