Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Collectible transaction details #390

Merged
merged 12 commits into from
Feb 16, 2019
Merged

Collectible transaction details #390

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
4aed2c0
decode transfer data ERC721
estebanmino Feb 14, 2019
7c0f29f
Merge branch 'collectible-tx-details' of https://github.com/MetaMask/…
estebanmino Feb 14, 2019
810ca5f
render tx element
estebanmino Feb 14, 2019
42a0338
tx details refactor
estebanmino Feb 15, 2019
89fdec1
stable
estebanmino Feb 15, 2019
6ecc9b7
more refactor
estebanmino Feb 15, 2019
2c6f429
renderable gasprice
estebanmino Feb 16, 2019
47b12bd
render hash
estebanmino Feb 16, 2019
58a46ad
snapshots
estebanmino Feb 16, 2019
4825ec6
Merge branch 'develop' into collectible-tx-details
estebanmino Feb 16, 2019
a1a05b1
fadein
estebanmino Feb 16, 2019
0aae8b2
Merge branch 'collectible-tx-details' of github.com:MetaMask/MetaMask…
estebanmino Feb 16, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 32 additions & 62 deletions app/components/TransactionElement/TransactionDetails/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,7 @@ import PropTypes from 'prop-types';
import { Clipboard, TouchableOpacity, StyleSheet, Text, View } from 'react-native';
import { colors, fontStyles } from '../../../styles/common';
import { strings } from '../../../../locales/i18n';
import { renderFromWei, weiToFiat, hexToBN, isBN, toBN, toGwei, weiToFiatNumber } from '../../../util/number';
import Icon from 'react-native-vector-icons/FontAwesome';
import { renderFullAddress } from '../../../util/address';

const styles = StyleSheet.create({
detailRowWrapper: {
Expand Down Expand Up @@ -81,14 +79,6 @@ const styles = StyleSheet.create({
*/
export default class TransactionDetails extends PureComponent {
static propTypes = {
/**
* ETH to current currency conversion rate
*/
conversionRate: PropTypes.number,
/**
* Currency code of the currently-active currency
*/
currentCurrency: PropTypes.string,
/**
* Object corresponding to a transaction, containing transaction object, networkId and transaction hash string
*/
Expand All @@ -104,7 +94,11 @@ export default class TransactionDetails extends PureComponent {
/**
* Action that shows the global alert
*/
viewOnEtherscan: PropTypes.func.isRequired
viewOnEtherscan: PropTypes.func.isRequired,
/**
* Object with information to render
*/
transactionDetails: PropTypes.object
};

renderTxHash = transactionHash => {
Expand All @@ -124,10 +118,7 @@ export default class TransactionDetails extends PureComponent {
};

copy = async () => {
const {
transactionObject: { transactionHash }
} = this.props;
await Clipboard.setString(transactionHash);
await Clipboard.setString(this.props.transactionDetails.transactionHash);
this.props.showAlert({
isVisible: true,
autodismiss: 2000,
Expand All @@ -144,87 +135,66 @@ export default class TransactionDetails extends PureComponent {

viewOnEtherscan = () => {
const {
transactionObject: { transactionHash, networkID }
transactionObject: { networkID }
} = this.props;
this.props.viewOnEtherscan(networkID, transactionHash);
this.props.viewOnEtherscan(networkID, this.props.transactionDetails.transactionHash);
};

render = () => {
const {
transactionObject: {
transaction: { gas, gasPrice, value, to, from },
transactionHash,
transfer
},
blockExplorer
} = this.props;
const gasBN = hexToBN(gas);
const gasPriceBN = hexToBN(gasPrice);
const amount = hexToBN(value);
const { conversionRate, currentCurrency } = this.props;
const totalGas = isBN(gasBN) && isBN(gasPriceBN) ? gasBN.mul(gasPriceBN) : toBN('0x0');
const totalEth = isBN(amount) ? amount.add(totalGas) : totalGas;
const renderAmount = transfer
? !transfer.amount
? strings('transaction.value_not_available')
: transfer.amount
: renderFromWei(value) + ' ' + strings('unit.eth');
const renderTotalEth = renderFromWei(totalEth) + ' ' + strings('unit.eth');
const renderTotal = transfer
? transfer.amount
? transfer.amount + ' ' + strings('unit.divisor') + ' ' + renderTotalEth
: strings('transaction.value_not_available')
: renderTotalEth;

const renderTotalEthFiat = weiToFiat(totalEth, conversionRate, currentCurrency).toUpperCase();
const totalEthFiatAmount = weiToFiatNumber(totalEth, conversionRate);
const renderTotalFiat = transfer
? transfer.amountFiat
? totalEthFiatAmount + transfer.amountFiat + ' ' + currentCurrency.toUpperCase()
: undefined
: renderTotalEthFiat;
const renderTo = transfer ? transfer.to : !to ? strings('transactions.to_contract') : renderFullAddress(to);
const { blockExplorer } = this.props;

return (
<View style={styles.detailRowWrapper}>
{this.renderTxHash(transactionHash)}
{this.renderTxHash(this.props.transactionDetails.transactionHash)}
<Text style={styles.detailRowTitle}>{strings('transactions.from')}</Text>
<View style={[styles.detailRowInfo, styles.singleRow]}>
<Text style={styles.detailRowText}>{renderFullAddress(from)}</Text>
<Text style={styles.detailRowText}>{this.props.transactionDetails.renderFrom}</Text>
</View>
<Text style={styles.detailRowTitle}>{strings('transactions.to')}</Text>
<View style={[styles.detailRowInfo, styles.singleRow]}>
<Text style={styles.detailRowText}>{renderTo}</Text>
<Text style={styles.detailRowText}>{this.props.transactionDetails.renderTo}</Text>
</View>
<Text style={styles.detailRowTitle}>{strings('transactions.details')}</Text>
<View style={styles.detailRowInfo}>
<View style={styles.detailRowInfoItem}>
<Text style={[styles.detailRowText, styles.alignLeft]}>{strings('transactions.amount')}</Text>
<Text style={[styles.detailRowText, styles.alignRight]}>{renderAmount}</Text>
<Text style={[styles.detailRowText, styles.alignLeft]}>
{this.props.transactionDetails.valueLabel || strings('transactions.amount')}
</Text>
<Text style={[styles.detailRowText, styles.alignRight]}>
{this.props.transactionDetails.renderValue}
</Text>
</View>
<View style={styles.detailRowInfoItem}>
<Text style={[styles.detailRowText, styles.alignLeft]}>
{strings('transactions.gas_limit')}
</Text>
<Text style={[styles.detailRowText, styles.alignRight]}>{hexToBN(gas).toNumber()}</Text>
<Text style={[styles.detailRowText, styles.alignRight]}>
{this.props.transactionDetails.renderGas}
</Text>
</View>
<View style={styles.detailRowInfoItem}>
<Text style={[styles.detailRowText, styles.alignLeft]}>
{strings('transactions.gas_price')}
</Text>
<Text style={[styles.detailRowText, styles.alignRight]}>{toGwei(gasPrice)}</Text>
<Text style={[styles.detailRowText, styles.alignRight]}>
{this.props.transactionDetails.renderGasPrice}
</Text>
</View>
<View style={styles.detailRowInfoItem}>
<Text style={[styles.detailRowText, styles.alignLeft]}>{strings('transactions.total')}</Text>
<Text style={[styles.detailRowText, styles.alignRight]}>{renderTotal}</Text>
<Text style={[styles.detailRowText, styles.alignRight]}>
{this.props.transactionDetails.renderTotalValue}
</Text>
</View>
{renderTotalFiat && (
{this.props.transactionDetails.renderTotalValueFiat && (
<View style={[styles.detailRowInfoItem, styles.noBorderBottom]}>
<Text style={[styles.detailRowText, styles.alignRight]}>{renderTotalFiat}</Text>
<Text style={[styles.detailRowText, styles.alignRight]}>
{this.props.transactionDetails.renderTotalValueFiat}
</Text>
</View>
)}
</View>
{transactionHash &&
{this.props.transactionDetails.transactionHash &&
blockExplorer && (
<TouchableOpacity
onPress={this.viewOnEtherscan} // eslint-disable-line react/jsx-no-bind
Expand Down
11 changes: 10 additions & 1 deletion app/components/TransactionElement/TransactionDetails/index.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,18 @@ describe('TransactionDetails', () => {
const wrapper = shallow(
<TransactionDetails
transactionObject={{
transaction: { transactionHash: '0x1', gas: '', gasPrice: '', value: '', to: '', from: '' },
networkID: '1'
}}
transactionDetails={{
renderFrom: '0x0',
renderTo: '0x1',
transactionHash: '0x2',
renderValue: '2 TKN',
renderGas: '21000',
renderGasPrice: '2',
renderTotalValue: '2 TKN / 0.001 ETH',
renderTotalValueFiat: ''
}}
/>,
{
context: { store: mockStore(initialState) }
Expand Down
Loading