diff options
9 files changed, 47 insertions, 18 deletions
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index dc5f5dc58..2cfd15f50 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -1095,19 +1095,22 @@ "message": "transaction" }, "transactionConfirmed": { - "message": "Transaction confirmed." + "message": "Transaction confirmed on $2." }, "transactionCreated": { - "message": "Transaction created with a value of $1." + "message": "Transaction created with a value of $1 on $2." }, "transactionDropped": { - "message": "Transaction dropped." + "message": "Transaction dropped on $2." }, "transactionSubmitted": { - "message": "Transaction submitted." + "message": "Transaction submitted on $2." + }, + "transactionUpdated": { + "message": "Transaction updated on $2." }, "transactionUpdatedGas": { - "message": "Transaction updated with a gas price of $1." + "message": "Transaction updated with a gas price of $1 on $2." }, "transactions": { "message": "transactions" diff --git a/ui/app/components/sender-to-recipient/sender-to-recipient.component.js b/ui/app/components/sender-to-recipient/sender-to-recipient.component.js index 445a11d8a..61f77224d 100644 --- a/ui/app/components/sender-to-recipient/sender-to-recipient.component.js +++ b/ui/app/components/sender-to-recipient/sender-to-recipient.component.js @@ -115,7 +115,7 @@ export default class SenderToRecipient extends PureComponent { renderRecipientWithoutAddress () { return ( <div className="sender-to-recipient__party sender-to-recipient__party--recipient"> - <i className="fa fa-file-text-o" /> + { !this.props.addressOnly && <i className="fa fa-file-text-o" /> } <div className="sender-to-recipient__name"> { this.context.t('newContract') } </div> diff --git a/ui/app/components/transaction-activity-log/index.scss b/ui/app/components/transaction-activity-log/index.scss index d86514440..2324d44b1 100644 --- a/ui/app/components/transaction-activity-log/index.scss +++ b/ui/app/components/transaction-activity-log/index.scss @@ -41,11 +41,15 @@ margin-right: 6px; border-radius: 50%; background: $scorpion; + flex: 0 0 auto; } &__activity-text { color: $scorpion; font-size: .75rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } &__value { diff --git a/ui/app/components/transaction-activity-log/transaction-activity-log.component.js b/ui/app/components/transaction-activity-log/transaction-activity-log.component.js index c0cf099d0..c4cf57d14 100644 --- a/ui/app/components/transaction-activity-log/transaction-activity-log.component.js +++ b/ui/app/components/transaction-activity-log/transaction-activity-log.component.js @@ -3,8 +3,9 @@ import PropTypes from 'prop-types' import classnames from 'classnames' import { getActivities } from './transaction-activity-log.util' import Card from '../card' -import { getEthConversionFromWeiHex } from '../../helpers/conversions.util' +import { getEthConversionFromWeiHex, getValueFromWeiHex } from '../../helpers/conversions.util' import { ETH } from '../../constants/common' +import { formatDate } from '../../util' export default class TransactionActivityLog extends PureComponent { static contextTypes = { @@ -41,8 +42,17 @@ export default class TransactionActivityLog extends PureComponent { renderActivity (activity, index) { const { conversionRate } = this.props - const { eventKey, value } = activity - const ethValue = getEthConversionFromWeiHex({ value, toCurrency: ETH, conversionRate }) + const { eventKey, value, timestamp } = activity + const ethValue = index === 0 + ? `${getValueFromWeiHex({ + value, + toCurrency: ETH, + conversionRate, + numberOfDecimals: 6, + })} ${ETH}` + : getEthConversionFromWeiHex({ value, toCurrency: ETH, conversionRate }) + const formattedTimestamp = formatDate(timestamp) + const activityText = this.context.t(eventKey, [ethValue, formattedTimestamp]) return ( <div @@ -50,8 +60,11 @@ export default class TransactionActivityLog extends PureComponent { className="transaction-activity-log__activity" > <div className="transaction-activity-log__activity-icon" /> - <div className="transaction-activity-log__activity-text"> - { this.context.t(eventKey, [ethValue]) } + <div + className="transaction-activity-log__activity-text" + title={activityText} + > + { activityText } </div> </div> ) diff --git a/ui/app/components/transaction-activity-log/transaction-activity-log.util.js b/ui/app/components/transaction-activity-log/transaction-activity-log.util.js index fff0b68dc..32834ff47 100644 --- a/ui/app/components/transaction-activity-log/transaction-activity-log.util.js +++ b/ui/app/components/transaction-activity-log/transaction-activity-log.util.js @@ -17,6 +17,7 @@ const TRANSACTION_UPDATED_GAS_EVENT = 'transactionUpdatedGas' const TRANSACTION_SUBMITTED_EVENT = 'transactionSubmitted' const TRANSACTION_CONFIRMED_EVENT = 'transactionConfirmed' const TRANSACTION_DROPPED_EVENT = 'transactionDropped' +const TRANSACTION_UPDATED_EVENT = 'transactionUpdated' const eventPathsHash = { [STATUS_PATH]: true, @@ -67,7 +68,7 @@ export function getActivities (transaction) { } default: { - events.push(eventCreator(value, timestamp)) + events.push(eventCreator(TRANSACTION_UPDATED_EVENT, timestamp)) } } } diff --git a/ui/app/components/transaction-breakdown/transaction-breakdown.component.js b/ui/app/components/transaction-breakdown/transaction-breakdown.component.js index a168b53dc..bb6075e9f 100644 --- a/ui/app/components/transaction-breakdown/transaction-breakdown.component.js +++ b/ui/app/components/transaction-breakdown/transaction-breakdown.component.js @@ -7,7 +7,7 @@ import CurrencyDisplay from '../currency-display' import HexToDecimal from '../hex-to-decimal' import { ETH, GWEI } from '../../constants/common' import { getHexGasTotal } from '../../helpers/confirm-transaction/util' -import { addHex } from '../../helpers/transactions.util' +import { sumHexes } from '../../helpers/transactions.util' export default class TransactionBreakdown extends PureComponent { static contextTypes = { @@ -28,7 +28,7 @@ export default class TransactionBreakdown extends PureComponent { const { transaction, className } = this.props const { txParams: { gas, gasPrice, value } = {} } = transaction const hexGasTotal = getHexGasTotal({ gasLimit: gas, gasPrice }) - const totalInHex = addHex(hexGasTotal, value) + const totalInHex = sumHexes(hexGasTotal, value) return ( <div className={classnames('transaction-breakdown', className)}> diff --git a/ui/app/components/transaction-list-item/transaction-list-item.component.js b/ui/app/components/transaction-list-item/transaction-list-item.component.js index d895b8e26..5564f0883 100644 --- a/ui/app/components/transaction-list-item/transaction-list-item.component.js +++ b/ui/app/components/transaction-list-item/transaction-list-item.component.js @@ -22,6 +22,7 @@ export default class TransactionListItem extends PureComponent { nonceAndDate: PropTypes.string, token: PropTypes.object, assetImages: PropTypes.object, + tokenData: PropTypes.object, } state = { @@ -106,9 +107,13 @@ export default class TransactionListItem extends PureComponent { showRetry, nonceAndDate, assetImages, + tokenData, } = this.props const { txParams = {} } = transaction const { showTransactionDetails } = this.state + const toAddress = tokenData + ? tokenData.params && tokenData.params[0] && tokenData.params[0].value || txParams.to + : txParams.to return ( <div className="transaction-list-item"> @@ -118,9 +123,9 @@ export default class TransactionListItem extends PureComponent { > <Identicon className="transaction-list-item__identicon" - address={txParams.to} + address={toAddress} diameter={34} - image={assetImages[txParams.to]} + image={assetImages[toAddress]} /> <TransactionAction transaction={transaction} diff --git a/ui/app/components/transaction-list-item/transaction-list-item.container.js b/ui/app/components/transaction-list-item/transaction-list-item.container.js index 47644241a..3db9d40ec 100644 --- a/ui/app/components/transaction-list-item/transaction-list-item.container.js +++ b/ui/app/components/transaction-list-item/transaction-list-item.container.js @@ -5,16 +5,19 @@ import withMethodData from '../../higher-order-components/with-method-data' import TransactionListItem from './transaction-list-item.component' import { setSelectedToken, retryTransaction } from '../../actions' import { hexToDecimal } from '../../helpers/conversions.util' +import { getTokenData } from '../../helpers/transactions.util' import { formatDate } from '../../util' const mapStateToProps = (state, ownProps) => { - const { transaction: { txParams: { value, nonce } = {}, time } = {} } = ownProps + const { transaction: { txParams: { value, nonce, data } = {}, time } = {} } = ownProps + const tokenData = data && getTokenData(data) const nonceAndDate = nonce ? `#${hexToDecimal(nonce)} - ${formatDate(time)}` : formatDate(time) return { value, nonceAndDate, + tokenData, } } diff --git a/ui/app/helpers/transactions.util.js b/ui/app/helpers/transactions.util.js index b88b00ac6..0e1a6ca37 100644 --- a/ui/app/helpers/transactions.util.js +++ b/ui/app/helpers/transactions.util.js @@ -106,7 +106,7 @@ export async function isSmartContractAddress (address) { return code && code !== '0x' } -export function addHex (...args) { +export function sumHexes (...args) { const total = args.reduce((acc, base) => { return addCurrencies(acc, base, { toNumericBase: 'hex', |