1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00

Fix identicon address. Fix styling of New Contract recipient. Fix Activity Log initial ETH value. Add timestamps to Activity Log events

This commit is contained in:
Alexander Tseung 2018-09-07 13:59:05 -07:00
parent c18c0e1c30
commit f1a309e0cc
9 changed files with 47 additions and 18 deletions

View File

@ -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"

View File

@ -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>

View File

@ -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 {

View File

@ -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>
)

View File

@ -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))
}
}
}

View File

@ -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)}>

View File

@ -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}

View File

@ -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,
}
}

View File

@ -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',