From f1a309e0cc110060cc56252ec5f7626ca6403fab Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Fri, 7 Sep 2018 13:59:05 -0700 Subject: Fix identicon address. Fix styling of New Contract recipient. Fix Activity Log initial ETH value. Add timestamps to Activity Log events --- app/_locales/en/messages.json | 13 +++++++----- .../sender-to-recipient.component.js | 2 +- .../components/transaction-activity-log/index.scss | 4 ++++ .../transaction-activity-log.component.js | 23 +++++++++++++++++----- .../transaction-activity-log.util.js | 3 ++- .../transaction-breakdown.component.js | 4 ++-- .../transaction-list-item.component.js | 9 +++++++-- .../transaction-list-item.container.js | 5 ++++- ui/app/helpers/transactions.util.js | 2 +- 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 (
- + { !this.props.addressOnly && }
{ this.context.t('newContract') }
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 (
-
- { this.context.t(eventKey, [ethValue]) } +
+ { activityText }
) 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 (
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 (
@@ -118,9 +123,9 @@ export default class TransactionListItem extends PureComponent { > { - 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', -- cgit v1.2.3