diff --git a/app/components/UI/TransactionReview/TransactionReviewSummary/index.js b/app/components/UI/TransactionReview/TransactionReviewSummary/index.js index ccd7413df79..8495e9202f0 100644 --- a/app/components/UI/TransactionReview/TransactionReviewSummary/index.js +++ b/app/components/UI/TransactionReview/TransactionReviewSummary/index.js @@ -1,25 +1,9 @@ import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import { StyleSheet, Text, View } from 'react-native'; -import { - weiToFiat, - balanceToFiat, - renderFromTokenMinimalUnit, - renderFromWei, - fromTokenMinimalUnit -} from '../../../../util/number'; import { colors, fontStyles } from '../../../../styles/common'; import { strings } from '../../../../../locales/i18n'; -import { connect } from 'react-redux'; -import { - APPROVE_FUNCTION_SIGNATURE, - decodeTransferData, - getTicker, - getNormalizedTxState -} from '../../../../util/transactions'; -import contractMap from 'eth-contract-metadata'; import WarningMessage from '../../../Views/SendFlow/WarningMessage'; -import { safeToChecksumAddress } from '../../../../util/address'; const styles = StyleSheet.create({ confirmBadge: { @@ -69,105 +53,32 @@ const styles = StyleSheet.create({ */ class TransactionReviewSummary extends PureComponent { static propTypes = { - /** - * Transaction object associated with this transaction - */ - transaction: PropTypes.object, /** * ETH to current currency conversion rate */ conversionRate: PropTypes.number, - /** - * Currency code of the currently-active currency - */ - currentCurrency: PropTypes.string, - /** - * Object containing token exchange rates in the format address => exchangeRate - */ - contractExchangeRates: PropTypes.object, /** * Transaction corresponding action key */ actionKey: PropTypes.string, /** - * Array of ERC20 assets + * Transaction amount in ETH before gas */ - tokens: PropTypes.array, + assetAmount: PropTypes.number, /** - * Current provider ticker + * Transaction amount in fiat before gas */ - ticker: PropTypes.string - }; - - state = { - assetAmount: undefined, - conversionRate: undefined, - fiatValue: undefined - }; - - componentDidMount = () => { - const { - transaction: { data, to }, - tokens - } = this.props; - let assetAmount, conversionRate, fiatValue; - const approveTransaction = data && data.substr(0, 10) === APPROVE_FUNCTION_SIGNATURE; - if (approveTransaction) { - let contract = contractMap[safeToChecksumAddress(to)]; - if (!contract) { - contract = tokens.find(({ address }) => address === safeToChecksumAddress(to)); - } - const symbol = (contract && contract.symbol) || 'ERC20'; - assetAmount = `${decodeTransferData('transfer', data)[1]} ${symbol}`; - } else { - [assetAmount, conversionRate, fiatValue] = this.getRenderValues()(); - } - this.setState({ assetAmount, conversionRate, fiatValue, approveTransaction }); - }; - - getRenderValues = () => { - const { - transaction: { value, selectedAsset, assetType }, - currentCurrency, - contractExchangeRates, - ticker - } = this.props; - const values = { - ETH: () => { - const assetAmount = `${renderFromWei(value)} ${getTicker(ticker)}`; - const conversionRate = this.props.conversionRate; - const fiatValue = weiToFiat(value, conversionRate, currentCurrency); - return [assetAmount, conversionRate, fiatValue]; - }, - ERC20: () => { - const assetAmount = `${renderFromTokenMinimalUnit(value, selectedAsset.decimals)} ${ - selectedAsset.symbol - }`; - const conversionRate = contractExchangeRates[selectedAsset.address]; - const fiatValue = balanceToFiat( - (value && fromTokenMinimalUnit(value, selectedAsset.decimals)) || 0, - this.props.conversionRate, - conversionRate, - currentCurrency - ); - return [assetAmount, conversionRate, fiatValue]; - }, - ERC721: () => { - const assetAmount = strings('unit.token_id') + selectedAsset.tokenId; - const conversionRate = true; - const fiatValue = selectedAsset.name; - return [assetAmount, conversionRate, fiatValue]; - }, - default: () => [undefined, undefined, undefined] - }; - return values[assetType] || values.default; + fiatValue: PropTypes.number, + /** + * Approve type transaction or not + */ + approveTransaction: PropTypes.bool }; - renderWarning = () => {`${strings('transaction.approve_warning')} ${this.state.assetAmount}`}; + renderWarning = () => {`${strings('transaction.approve_warning')} ${this.props.assetAmount}`}; render = () => { - const { actionKey } = this.props; - const { assetAmount, conversionRate, fiatValue, approveTransaction } = this.state; + const { actionKey, assetAmount, conversionRate, fiatValue, approveTransaction } = this.props; return ( {!!approveTransaction && ( @@ -194,13 +105,4 @@ class TransactionReviewSummary extends PureComponent { }; } -const mapStateToProps = state => ({ - conversionRate: state.engine.backgroundState.CurrencyRateController.conversionRate, - currentCurrency: state.engine.backgroundState.CurrencyRateController.currentCurrency, - contractExchangeRates: state.engine.backgroundState.TokenRatesController.contractExchangeRates, - tokens: state.engine.backgroundState.AssetsController.tokens, - transaction: getNormalizedTxState(state), - ticker: state.engine.backgroundState.NetworkController.provider.ticker -}); - -export default connect(mapStateToProps)(TransactionReviewSummary); +export default TransactionReviewSummary; diff --git a/app/components/UI/TransactionReview/index.js b/app/components/UI/TransactionReview/index.js index fdb76feef68..3233ec6a800 100644 --- a/app/components/UI/TransactionReview/index.js +++ b/app/components/UI/TransactionReview/index.js @@ -5,7 +5,22 @@ import StyledButton from '../StyledButton'; import { colors, fontStyles } from '../../../styles/common'; import { connect } from 'react-redux'; import { strings } from '../../../../locales/i18n'; -import { getTransactionReviewActionKey, getNormalizedTxState } from '../../../util/transactions'; +import { + getTransactionReviewActionKey, + getNormalizedTxState, + APPROVE_FUNCTION_SIGNATURE, + decodeTransferData, + getTicker +} from '../../../util/transactions'; +import { + weiToFiat, + balanceToFiat, + renderFromTokenMinimalUnit, + renderFromWei, + fromTokenMinimalUnit +} from '../../../util/number'; +import { safeToChecksumAddress } from '../../../util/address'; +import contractMap from 'eth-contract-metadata'; import ScrollableTabView from 'react-native-scrollable-tab-view'; import DefaultTabBar from 'react-native-scrollable-tab-view/DefaultTabBar'; import TransactionReviewInformation from './TransactionReviewInformation'; @@ -98,32 +113,106 @@ class TransactionReview extends PureComponent { /** * Browser/tab information */ - browser: PropTypes.object + browser: PropTypes.object, + /** + * ETH to current currency conversion rate + */ + conversionRate: PropTypes.number, + /** + * Currency code of the currently-active currency + */ + currentCurrency: PropTypes.string, + /** + * Object containing token exchange rates in the format address => exchangeRate + */ + contractExchangeRates: PropTypes.object, + /** + * Array of ERC20 assets + */ + tokens: PropTypes.array, + /** + * Current provider ticker + */ + ticker: PropTypes.string }; state = { toFocused: false, actionKey: strings('transactions.tx_review_confirm'), showHexData: false, - error: undefined + error: undefined, + assetAmount: undefined, + conversionRate: undefined, + fiatValue: undefined }; componentDidMount = async () => { const { validate, transaction, - transaction: { data } + transaction: { data, to }, + tokens } = this.props; let { showHexData } = this.props; + let assetAmount, conversionRate, fiatValue; showHexData = showHexData || data; + const approveTransaction = data && data.substr(0, 10) === APPROVE_FUNCTION_SIGNATURE; const error = validate && (await validate()); const actionKey = await getTransactionReviewActionKey(transaction); - this.setState({ error, actionKey, showHexData }); + if (approveTransaction) { + let contract = contractMap[safeToChecksumAddress(to)]; + if (!contract) { + contract = tokens.find(({ address }) => address === safeToChecksumAddress(to)); + } + const symbol = (contract && contract.symbol) || 'ERC20'; + assetAmount = `${decodeTransferData('transfer', data)[1]} ${symbol}`; + } else { + [assetAmount, conversionRate, fiatValue] = this.getRenderValues()(); + } + this.setState({ error, actionKey, showHexData, assetAmount, conversionRate, fiatValue, approveTransaction }); InteractionManager.runAfterInteractions(() => { Analytics.trackEvent(ANALYTICS_EVENT_OPTS.TRANSACTIONS_CONFIRM_STARTED); }); }; + getRenderValues = () => { + const { + transaction: { value, selectedAsset, assetType }, + currentCurrency, + contractExchangeRates, + ticker + } = this.props; + const values = { + ETH: () => { + const assetAmount = `${renderFromWei(value)} ${getTicker(ticker)}`; + const conversionRate = this.props.conversionRate; + const fiatValue = weiToFiat(value, conversionRate, currentCurrency); + return [assetAmount, conversionRate, fiatValue]; + }, + ERC20: () => { + const assetAmount = `${renderFromTokenMinimalUnit(value, selectedAsset.decimals)} ${ + selectedAsset.symbol + }`; + const conversionRate = contractExchangeRates[selectedAsset.address]; + const fiatValue = balanceToFiat( + (value && fromTokenMinimalUnit(value, selectedAsset.decimals)) || 0, + this.props.conversionRate, + conversionRate, + currentCurrency + ); + return [assetAmount, conversionRate, fiatValue]; + }, + ERC721: () => { + const assetAmount = strings('unit.token_id') + selectedAsset.tokenId; + const conversionRate = true; + const fiatValue = selectedAsset.name; + return [assetAmount, conversionRate, fiatValue]; + }, + default: () => [undefined, undefined, undefined] + }; + return values[assetType] || values.default; + }; + edit = () => { const { onModeChange } = this.props; Analytics.trackEvent(ANALYTICS_EVENT_OPTS.TRANSACTIONS_EDIT_TRANSACTION); @@ -176,19 +265,23 @@ class TransactionReview extends PureComponent { render = () => { const { transactionConfirmed } = this.props; - const { actionKey, error } = this.state; + const { actionKey, error, assetAmount, conversionRate, fiatValue, approveTransaction } = this.state; const currentPageInformation = { url: this.getUrlFromBrowser() }; return ( - - - - - - {this.renderTransactionDetails()} - {!!error && {error}} - + + + + + {this.renderTransactionDetails()} + {!!error && {error}} ({ accounts: state.engine.backgroundState.AccountTrackerController.accounts, + tokens: state.engine.backgroundState.AssetsController.tokens, + currentCurrency: state.engine.backgroundState.CurrencyRateController.currentCurrency, + contractExchangeRates: state.engine.backgroundState.TokenRatesController.contractExchangeRates, + conversionRate: state.engine.backgroundState.CurrencyRateController.conversionRate, + ticker: state.engine.backgroundState.NetworkController.provider.ticker, showHexData: state.settings.showHexData, transaction: getNormalizedTxState(state), browser: state.browser