Skip to content

Commit

Permalink
TransactionReview: take state and functionality from TransactionRevie…
Browse files Browse the repository at this point in the history 
…wSummary, pass props
  • Loading branch information
@EtDu
EtDu committed May 14, 2020
1 parent 494d2ef commit 5443d20
Show file tree
Hide file tree
Showing 2 changed files with 123 additions and 123 deletions.
120 changes: 11 additions & 109 deletions app/components/UI/TransactionReview/TransactionReviewSummary/index.js
View file
Original file line number Diff line number Diff line change
@@ -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: {
Expand Down Expand Up @@ -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 = () => <Text>{`${strings('transaction.approve_warning')} ${this.state.assetAmount}`}</Text>;
renderWarning = () => <Text>{`${strings('transaction.approve_warning')} ${this.props.assetAmount}`}</Text>;

render = () => {
const { actionKey } = this.props;
const { assetAmount, conversionRate, fiatValue, approveTransaction } = this.state;
const { actionKey, assetAmount, conversionRate, fiatValue, approveTransaction } = this.props;
return (
<View>
{!!approveTransaction && (
Expand All @@ -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;
126 changes: 112 additions & 14 deletions app/components/UI/TransactionReview/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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 (
<React.Fragment>
<TransactionHeader currentPageInformation={currentPageInformation} />
<React.Fragment>
<TransactionReviewSummary actionKey={actionKey} />
<View style={styles.accountInfoCardWrapper}>
<AccountInfoCard />
</View>
{this.renderTransactionDetails()}
{!!error && <Text style={styles.error}>{error}</Text>}
</React.Fragment>
<TransactionReviewSummary
actionKey={actionKey}
assetAmount={assetAmount}
conversionRate={conversionRate}
fiatValue={fiatValue}
approveTransaction={approveTransaction}
/>
<View style={styles.accountInfoCardWrapper}>
<AccountInfoCard />
</View>
{this.renderTransactionDetails()}
{!!error && <Text style={styles.error}>{error}</Text>}
<View style={styles.actionContainer}>
<StyledButton
type={'cancel'}
Expand All @@ -214,6 +307,11 @@ class TransactionReview extends PureComponent {

const mapStateToProps = state => ({
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
Expand Down

0 comments on commit 5443d20

Please sign in to comment.