-
+ { !this.props.addressOnly &&
}
{ this.context.t('newContract') }
diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js
index 2c4ba40bf576..a842bcc8bd9f 100644
--- a/ui/app/components/shapeshift-form.js
+++ b/ui/app/components/shapeshift-form.js
@@ -9,6 +9,8 @@ const { shapeShiftSubview, pairUpdate, buyWithShapeShift } = require('../actions
const { isValidAddress } = require('../util')
const SimpleDropdown = require('./dropdowns/simple-dropdown')
+import Button from './button'
+
function mapStateToProps (state) {
const {
coinOptions,
@@ -242,8 +244,10 @@ ShapeshiftForm.prototype.render = function () {
]),
- !depositAddress && h('button.btn-primary.btn--large.shapeshift-form__shapeshift-buy-btn', {
- className: btnClass,
+ !depositAddress && h(Button, {
+ type: 'primary',
+ large: true,
+ className: `${btnClass} shapeshift-form__shapeshift-buy-btn`,
disabled: !token,
onClick: () => this.onBuyWithShapeShift(),
}, [this.context.t('buy')]),
diff --git a/ui/app/components/signature-request.js b/ui/app/components/signature-request.js
index 2e0102d1a467..2bfa350d3c8a 100644
--- a/ui/app/components/signature-request.js
+++ b/ui/app/components/signature-request.js
@@ -23,6 +23,7 @@ const {
} = require('../selectors.js')
import { clearConfirmTransaction } from '../ducks/confirm-transaction.duck'
+import Button from './button'
const { DEFAULT_ROUTE } = require('../routes')
@@ -248,7 +249,10 @@ SignatureRequest.prototype.renderFooter = function () {
}
return h('div.request-signature__footer', [
- h('button.btn-default.btn--large.request-signature__footer__cancel-button', {
+ h(Button, {
+ type: 'default',
+ large: true,
+ className: 'request-signature__footer__cancel-button',
onClick: event => {
cancel(event).then(() => {
this.props.clearConfirmTransaction()
@@ -256,7 +260,9 @@ SignatureRequest.prototype.renderFooter = function () {
})
},
}, this.context.t('cancel')),
- h('button.btn-primary.btn--large', {
+ h(Button, {
+ type: 'primary',
+ large: true,
onClick: event => {
sign(event).then(() => {
this.props.clearConfirmTransaction()
diff --git a/ui/app/components/transaction-activity-log/index.js b/ui/app/components/transaction-activity-log/index.js
new file mode 100644
index 000000000000..a33da15a3b58
--- /dev/null
+++ b/ui/app/components/transaction-activity-log/index.js
@@ -0,0 +1 @@
+export { default } from './transaction-activity-log.container'
diff --git a/ui/app/components/transaction-activity-log/index.scss b/ui/app/components/transaction-activity-log/index.scss
new file mode 100644
index 000000000000..2324d44b1f00
--- /dev/null
+++ b/ui/app/components/transaction-activity-log/index.scss
@@ -0,0 +1,63 @@
+.transaction-activity-log {
+ &__card {
+ background: $white;
+ height: 100%;
+ }
+
+ &__activities-container {
+ padding-top: 8px;
+ }
+
+ &__activity {
+ padding: 4px 0;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ position: relative;
+
+ &::after {
+ content: '';
+ position: absolute;
+ left: 0;
+ top: 0;
+ height: 100%;
+ width: 6px;
+ border-right: 1px solid $scorpion;
+ }
+
+ &:first-child::after {
+ height: 50%;
+ top: 50%;
+ }
+
+ &:last-child::after {
+ height: 50%;
+ }
+ }
+
+ &__activity-icon {
+ width: 13px;
+ height: 13px;
+ 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 {
+ display: inline;
+ font-weight: 500;
+ }
+
+ b {
+ font-weight: 500;
+ }
+}
diff --git a/ui/app/components/transaction-activity-log/tests/transaction-activity-log.component.test.js b/ui/app/components/transaction-activity-log/tests/transaction-activity-log.component.test.js
new file mode 100644
index 000000000000..8687dbbc72ac
--- /dev/null
+++ b/ui/app/components/transaction-activity-log/tests/transaction-activity-log.component.test.js
@@ -0,0 +1,35 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import TransactionActivityLog from '../transaction-activity-log.component'
+import Card from '../../card'
+
+describe('TransactionActivityLog Component', () => {
+ it('should render properly', () => {
+ const transaction = {
+ history: [],
+ id: 1,
+ status: 'confirmed',
+ txParams: {
+ from: '0x1',
+ gas: '0x5208',
+ gasPrice: '0x3b9aca00',
+ nonce: '0xa4',
+ to: '0x2',
+ value: '0x2386f26fc10000',
+ },
+ }
+
+ const wrapper = shallow(
+
,
+ { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } }
+ )
+
+ assert.ok(wrapper.hasClass('transaction-activity-log'))
+ assert.ok(wrapper.hasClass('test-class'))
+ assert.equal(wrapper.find(Card).length, 1)
+ })
+})
diff --git a/ui/app/components/transaction-activity-log/tests/transaction-activity-log.container.test.js b/ui/app/components/transaction-activity-log/tests/transaction-activity-log.container.test.js
new file mode 100644
index 000000000000..85d56a6a2c63
--- /dev/null
+++ b/ui/app/components/transaction-activity-log/tests/transaction-activity-log.container.test.js
@@ -0,0 +1,27 @@
+import assert from 'assert'
+import proxyquire from 'proxyquire'
+
+let mapStateToProps
+
+proxyquire('../transaction-activity-log.container.js', {
+ 'react-redux': {
+ connect: ms => {
+ mapStateToProps = ms
+ return () => ({})
+ },
+ },
+})
+
+describe('TransactionActivityLog container', () => {
+ describe('mapStateToProps()', () => {
+ it('should return the correct props', () => {
+ const mockState = {
+ metamask: {
+ conversionRate: 280.45,
+ },
+ }
+
+ assert.deepEqual(mapStateToProps(mockState), { conversionRate: 280.45 })
+ })
+ })
+})
diff --git a/ui/app/components/transaction-activity-log/tests/transaction-activity-log.util.test.js b/ui/app/components/transaction-activity-log/tests/transaction-activity-log.util.test.js
new file mode 100644
index 000000000000..58650040885d
--- /dev/null
+++ b/ui/app/components/transaction-activity-log/tests/transaction-activity-log.util.test.js
@@ -0,0 +1,208 @@
+import assert from 'assert'
+import { getActivities } from '../transaction-activity-log.util'
+
+describe('getActivities', () => {
+ it('should return no activities for an empty history', () => {
+ const transaction = {
+ history: [],
+ id: 1,
+ status: 'confirmed',
+ txParams: {
+ from: '0x1',
+ gas: '0x5208',
+ gasPrice: '0x3b9aca00',
+ nonce: '0xa4',
+ to: '0x2',
+ value: '0x2386f26fc10000',
+ },
+ }
+
+ assert.deepEqual(getActivities(transaction), [])
+ })
+
+ it('should return activities for a transaction\'s history', () => {
+ const transaction = {
+ history: [
+ {
+ id: 5559712943815343,
+ loadingDefaults: true,
+ metamaskNetworkId: '3',
+ status: 'unapproved',
+ time: 1535507561452,
+ txParams: {
+ from: '0x1',
+ gas: '0x5208',
+ gasPrice: '0x3b9aca00',
+ nonce: '0xa4',
+ to: '0x2',
+ value: '0x2386f26fc10000',
+ },
+ },
+ [
+ {
+ op: 'replace',
+ path: '/loadingDefaults',
+ timestamp: 1535507561515,
+ value: false,
+ },
+ {
+ op: 'add',
+ path: '/gasPriceSpecified',
+ value: true,
+ },
+ {
+ op: 'add',
+ path: '/gasLimitSpecified',
+ value: true,
+ },
+ {
+ op: 'add',
+ path: '/estimatedGas',
+ value: '0x5208',
+ },
+ ],
+ [
+ {
+ note: '#newUnapprovedTransaction - adding the origin',
+ op: 'add',
+ path: '/origin',
+ timestamp: 1535507561516,
+ value: 'MetaMask',
+ },
+ [],
+ ],
+ [
+ {
+ note: 'confTx: user approved transaction',
+ op: 'replace',
+ path: '/txParams/gasPrice',
+ timestamp: 1535664571504,
+ value: '0x77359400',
+ },
+ ],
+ [
+ {
+ note: 'txStateManager: setting status to approved',
+ op: 'replace',
+ path: '/status',
+ timestamp: 1535507564302,
+ value: 'approved',
+ },
+ ],
+ [
+ {
+ note: 'transactions#approveTransaction',
+ op: 'add',
+ path: '/txParams/nonce',
+ timestamp: 1535507564439,
+ value: '0xa4',
+ },
+ {
+ op: 'add',
+ path: '/nonceDetails',
+ value: {
+ local: {},
+ network: {},
+ params: {},
+ },
+ },
+ ],
+ [
+ {
+ note: 'transactions#publishTransaction',
+ op: 'replace',
+ path: '/status',
+ timestamp: 1535507564518,
+ value: 'signed',
+ },
+ {
+ op: 'add',
+ path: '/rawTx',
+ value: '0xf86b81a4843b9aca008252089450a9d56c2b8ba9a5c7f2c08c3d26e0499f23a706872386f26fc10000802aa007b30119fc4fc5954fad727895b7e3ba80a78d197e95703cc603bcf017879151a01c50beda40ffaee541da9c05b9616247074f25f392800e0ad6c7a835d5366edf',
+ },
+ ],
+ [],
+ [
+ {
+ note: 'transactions#setTxHash',
+ op: 'add',
+ path: '/hash',
+ timestamp: 1535507564658,
+ value: '0x7acc4987b5c0dfa8d423798a8c561138259de1f98a62e3d52e7e83c0e0dd9fb7',
+ },
+ ],
+ [
+ {
+ note: 'txStateManager - add submitted time stamp',
+ op: 'add',
+ path: '/submittedTime',
+ timestamp: 1535507564660,
+ value: 1535507564660,
+ },
+ ],
+ [
+ {
+ note: 'txStateManager: setting status to submitted',
+ op: 'replace',
+ path: '/status',
+ timestamp: 1535507564665,
+ value: 'submitted',
+ },
+ ],
+ [
+ {
+ note: 'transactions/pending-tx-tracker#event: tx:block-update',
+ op: 'add',
+ path: '/firstRetryBlockNumber',
+ timestamp: 1535507575476,
+ value: '0x3bf624',
+ },
+ ],
+ [
+ {
+ note: 'txStateManager: setting status to confirmed',
+ op: 'replace',
+ path: '/status',
+ timestamp: 1535507615993,
+ value: 'confirmed',
+ },
+ ],
+ ],
+ id: 1,
+ status: 'confirmed',
+ txParams: {
+ from: '0x1',
+ gas: '0x5208',
+ gasPrice: '0x3b9aca00',
+ nonce: '0xa4',
+ to: '0x2',
+ value: '0x2386f26fc10000',
+ },
+ }
+
+ const expectedResult = [
+ {
+ 'eventKey': 'transactionCreated',
+ 'timestamp': 1535507561452,
+ 'value': '0x2386f26fc10000',
+ },
+ {
+ 'eventKey': 'transactionUpdatedGas',
+ 'timestamp': 1535664571504,
+ 'value': '0x77359400',
+ },
+ {
+ 'eventKey': 'transactionSubmitted',
+ 'timestamp': 1535507564665,
+ 'value': undefined,
+ },
+ {
+ 'eventKey': 'transactionConfirmed',
+ 'timestamp': 1535507615993,
+ 'value': undefined,
+ },
+ ]
+
+ assert.deepEqual(getActivities(transaction), expectedResult)
+ })
+})
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
new file mode 100644
index 000000000000..c4cf57d14008
--- /dev/null
+++ b/ui/app/components/transaction-activity-log/transaction-activity-log.component.js
@@ -0,0 +1,91 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import { getActivities } from './transaction-activity-log.util'
+import Card from '../card'
+import { getEthConversionFromWeiHex, getValueFromWeiHex } from '../../helpers/conversions.util'
+import { ETH } from '../../constants/common'
+import { formatDate } from '../../util'
+
+export default class TransactionActivityLog extends PureComponent {
+ static contextTypes = {
+ t: PropTypes.func,
+ }
+
+ static propTypes = {
+ transaction: PropTypes.object,
+ className: PropTypes.string,
+ conversionRate: PropTypes.number,
+ }
+
+ state = {
+ activities: [],
+ }
+
+ componentDidMount () {
+ this.setActivites()
+ }
+
+ componentDidUpdate (prevProps) {
+ const { transaction: { history: prevHistory = [] } = {} } = prevProps
+ const { transaction: { history = [] } = {} } = this.props
+
+ if (prevHistory.length !== history.length) {
+ this.setActivites()
+ }
+ }
+
+ setActivites () {
+ const activities = getActivities(this.props.transaction)
+ this.setState({ activities })
+ }
+
+ renderActivity (activity, index) {
+ const { conversionRate } = this.props
+ 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 (
+
+
+
+ { activityText }
+
+
+ )
+ }
+
+ render () {
+ const { t } = this.context
+ const { className } = this.props
+ const { activities } = this.state
+
+ return (
+
+
+
+ { activities.map((activity, index) => this.renderActivity(activity, index)) }
+
+
+
+ )
+ }
+}
diff --git a/ui/app/components/transaction-activity-log/transaction-activity-log.container.js b/ui/app/components/transaction-activity-log/transaction-activity-log.container.js
new file mode 100644
index 000000000000..4c8b6d971109
--- /dev/null
+++ b/ui/app/components/transaction-activity-log/transaction-activity-log.container.js
@@ -0,0 +1,11 @@
+import { connect } from 'react-redux'
+import TransactionActivityLog from './transaction-activity-log.component'
+import { conversionRateSelector } from '../../selectors'
+
+const mapStateToProps = state => {
+ return {
+ conversionRate: conversionRateSelector(state),
+ }
+}
+
+export default connect(mapStateToProps)(TransactionActivityLog)
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
new file mode 100644
index 000000000000..32834ff4759d
--- /dev/null
+++ b/ui/app/components/transaction-activity-log/transaction-activity-log.util.js
@@ -0,0 +1,82 @@
+// path constants
+const STATUS_PATH = '/status'
+const GAS_PRICE_PATH = '/txParams/gasPrice'
+
+// status constants
+const UNAPPROVED_STATUS = 'unapproved'
+const SUBMITTED_STATUS = 'submitted'
+const CONFIRMED_STATUS = 'confirmed'
+const DROPPED_STATUS = 'dropped'
+
+// op constants
+const REPLACE_OP = 'replace'
+
+// event constants
+const TRANSACTION_CREATED_EVENT = 'transactionCreated'
+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,
+ [GAS_PRICE_PATH]: true,
+}
+
+const statusHash = {
+ [SUBMITTED_STATUS]: TRANSACTION_SUBMITTED_EVENT,
+ [CONFIRMED_STATUS]: TRANSACTION_CONFIRMED_EVENT,
+ [DROPPED_STATUS]: TRANSACTION_DROPPED_EVENT,
+}
+
+function eventCreator (eventKey, timestamp, value) {
+ return {
+ eventKey,
+ timestamp,
+ value,
+ }
+}
+
+export function getActivities (transaction) {
+ const { history = [] } = transaction
+
+ return history.reduce((acc, base) => {
+ // First history item should be transaction creation
+ if (!Array.isArray(base) && base.status === UNAPPROVED_STATUS && base.txParams) {
+ const { time, txParams: { value } = {} } = base
+ return acc.concat(eventCreator(TRANSACTION_CREATED_EVENT, time, value))
+ } else if (Array.isArray(base)) {
+ const events = []
+
+ base.forEach(entry => {
+ const { op, path, value, timestamp } = entry
+
+ if (path in eventPathsHash && op === REPLACE_OP) {
+ switch (path) {
+ case STATUS_PATH: {
+ if (value in statusHash) {
+ events.push(eventCreator(statusHash[value], timestamp))
+ }
+
+ break
+ }
+
+ case GAS_PRICE_PATH: {
+ events.push(eventCreator(TRANSACTION_UPDATED_GAS_EVENT, timestamp, value))
+ break
+ }
+
+ default: {
+ events.push(eventCreator(TRANSACTION_UPDATED_EVENT, timestamp))
+ }
+ }
+ }
+ })
+
+ return acc.concat(events)
+ }
+
+ return acc
+ }, [])
+}
diff --git a/ui/app/components/transaction-breakdown/index.js b/ui/app/components/transaction-breakdown/index.js
new file mode 100644
index 000000000000..c887f504f192
--- /dev/null
+++ b/ui/app/components/transaction-breakdown/index.js
@@ -0,0 +1 @@
+export { default } from './transaction-breakdown.component'
diff --git a/ui/app/components/transaction-breakdown/index.scss b/ui/app/components/transaction-breakdown/index.scss
new file mode 100644
index 000000000000..1bb108943845
--- /dev/null
+++ b/ui/app/components/transaction-breakdown/index.scss
@@ -0,0 +1,23 @@
+@import './transaction-breakdown-row/index';
+
+.transaction-breakdown {
+ &__card {
+ background: $white;
+ height: 100%;
+ }
+
+ &__row-title {
+ text-transform: capitalize;
+ }
+
+ &__value {
+ text-align: end;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+
+ &--eth-total {
+ font-weight: 500;
+ }
+ }
+}
diff --git a/ui/app/components/transaction-breakdown/tests/transaction-breakdown.component.test.js b/ui/app/components/transaction-breakdown/tests/transaction-breakdown.component.test.js
new file mode 100644
index 000000000000..d18cd420c9b8
--- /dev/null
+++ b/ui/app/components/transaction-breakdown/tests/transaction-breakdown.component.test.js
@@ -0,0 +1,37 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import TransactionBreakdown from '../transaction-breakdown.component'
+import TransactionBreakdownRow from '../transaction-breakdown-row'
+import Card from '../../card'
+
+describe('TransactionBreakdown Component', () => {
+ it('should render properly', () => {
+ const transaction = {
+ history: [],
+ id: 1,
+ status: 'confirmed',
+ txParams: {
+ from: '0x1',
+ gas: '0x5208',
+ gasPrice: '0x3b9aca00',
+ nonce: '0xa4',
+ to: '0x2',
+ value: '0x2386f26fc10000',
+ },
+ }
+
+ const wrapper = shallow(
+
,
+ { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } }
+ )
+
+ assert.ok(wrapper.hasClass('transaction-breakdown'))
+ assert.ok(wrapper.hasClass('test-class'))
+ assert.equal(wrapper.find(Card).length, 1)
+ assert.equal(wrapper.find(Card).find(TransactionBreakdownRow).length, 4)
+ })
+})
diff --git a/ui/app/components/transaction-breakdown/transaction-breakdown-row/index.js b/ui/app/components/transaction-breakdown/transaction-breakdown-row/index.js
new file mode 100644
index 000000000000..557bf75fb719
--- /dev/null
+++ b/ui/app/components/transaction-breakdown/transaction-breakdown-row/index.js
@@ -0,0 +1 @@
+export { default } from './transaction-breakdown-row.component'
diff --git a/ui/app/components/transaction-breakdown/transaction-breakdown-row/index.scss b/ui/app/components/transaction-breakdown/transaction-breakdown-row/index.scss
new file mode 100644
index 000000000000..8c73be1a6ce7
--- /dev/null
+++ b/ui/app/components/transaction-breakdown/transaction-breakdown-row/index.scss
@@ -0,0 +1,19 @@
+.transaction-breakdown-row {
+ font-size: .75rem;
+ color: $scorpion;
+ display: flex;
+ justify-content: space-between;
+ padding: 8px 0;
+
+ &:not(:last-child) {
+ border-bottom: 1px solid #d8d8d8;
+ }
+
+ &__title {
+ padding-right: 8px;
+ }
+
+ &__value {
+ min-width: 0;
+ }
+}
diff --git a/ui/app/components/transaction-breakdown/transaction-breakdown-row/tests/transaction-breakdown-row.component.test.js b/ui/app/components/transaction-breakdown/transaction-breakdown-row/tests/transaction-breakdown-row.component.test.js
new file mode 100644
index 000000000000..c19399dbb4df
--- /dev/null
+++ b/ui/app/components/transaction-breakdown/transaction-breakdown-row/tests/transaction-breakdown-row.component.test.js
@@ -0,0 +1,39 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import TransactionBreakdownRow from '../transaction-breakdown-row.component'
+import Button from '../../../button'
+
+describe('TransactionBreakdownRow Component', () => {
+ it('should render text properly', () => {
+ const wrapper = shallow(
+
+ Test
+ ,
+ { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } }
+ )
+
+ assert.ok(wrapper.hasClass('transaction-breakdown-row'))
+ assert.equal(wrapper.find('.transaction-breakdown-row__title').text(), 'test')
+ assert.equal(wrapper.find('.transaction-breakdown-row__value').text(), 'Test')
+ })
+
+ it('should render components properly', () => {
+ const wrapper = shallow(
+
+
+ ,
+ { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } }
+ )
+
+ assert.ok(wrapper.hasClass('transaction-breakdown-row'))
+ assert.equal(wrapper.find('.transaction-breakdown-row__title').text(), 'test')
+ assert.ok(wrapper.find('.transaction-breakdown-row__value').find(Button))
+ })
+})
diff --git a/ui/app/components/transaction-breakdown/transaction-breakdown-row/transaction-breakdown-row.component.js b/ui/app/components/transaction-breakdown/transaction-breakdown-row/transaction-breakdown-row.component.js
new file mode 100644
index 000000000000..c11ff8efa7eb
--- /dev/null
+++ b/ui/app/components/transaction-breakdown/transaction-breakdown-row/transaction-breakdown-row.component.js
@@ -0,0 +1,26 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+export default class TransactionBreakdownRow extends PureComponent {
+ static propTypes = {
+ title: PropTypes.string,
+ children: PropTypes.node,
+ className: PropTypes.string,
+ }
+
+ render () {
+ const { title, children, className } = this.props
+
+ return (
+
+
+ { title }
+
+
+ { children }
+
+
+ )
+ }
+}
diff --git a/ui/app/components/transaction-breakdown/transaction-breakdown.component.js b/ui/app/components/transaction-breakdown/transaction-breakdown.component.js
new file mode 100644
index 000000000000..bb6075e9fb33
--- /dev/null
+++ b/ui/app/components/transaction-breakdown/transaction-breakdown.component.js
@@ -0,0 +1,82 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import TransactionBreakdownRow from './transaction-breakdown-row'
+import Card from '../card'
+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 { sumHexes } from '../../helpers/transactions.util'
+
+export default class TransactionBreakdown extends PureComponent {
+ static contextTypes = {
+ t: PropTypes.func,
+ }
+
+ static propTypes = {
+ transaction: PropTypes.object,
+ className: PropTypes.string,
+ }
+
+ static defaultProps = {
+ transaction: {},
+ }
+
+ render () {
+ const { t } = this.context
+ const { transaction, className } = this.props
+ const { txParams: { gas, gasPrice, value } = {} } = transaction
+ const hexGasTotal = getHexGasTotal({ gasLimit: gas, gasPrice })
+ const totalInHex = sumHexes(hexGasTotal, value)
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+ }
+}
diff --git a/ui/app/components/transaction-list-item-details/index.js b/ui/app/components/transaction-list-item-details/index.js
new file mode 100644
index 000000000000..0e878d032923
--- /dev/null
+++ b/ui/app/components/transaction-list-item-details/index.js
@@ -0,0 +1 @@
+export { default } from './transaction-list-item-details.component'
diff --git a/ui/app/components/transaction-list-item-details/index.scss b/ui/app/components/transaction-list-item-details/index.scss
new file mode 100644
index 000000000000..54cf834cc0ac
--- /dev/null
+++ b/ui/app/components/transaction-list-item-details/index.scss
@@ -0,0 +1,49 @@
+.transaction-list-item-details {
+ &__header {
+ margin-bottom: 8px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ &__header-buttons {
+ display: flex;
+ flex-direction: row;
+ }
+
+ &__header-button {
+ font-size: .625rem;
+
+ &:not(:last-child) {
+ margin-right: 8px;
+ }
+ }
+
+ &__sender-to-recipient-container {
+ margin-bottom: 8px;
+ }
+
+ &__cards-container {
+ display: flex;
+ flex-direction: row;
+
+ @media screen and (max-width: $break-small) {
+ flex-direction: column;
+ }
+ }
+
+ &__transaction-breakdown {
+ flex: 1;
+ margin-right: 8px;
+ min-width: 0;
+
+ @media screen and (max-width: $break-small) {
+ margin: 0 0 8px 0;
+ }
+ }
+
+ &__transaction-activity-log {
+ flex: 2;
+ min-width: 0;
+ }
+}
diff --git a/ui/app/components/transaction-list-item-details/tests/transaction-list-item-details.component.test.js b/ui/app/components/transaction-list-item-details/tests/transaction-list-item-details.component.test.js
new file mode 100644
index 000000000000..f2bbe8789268
--- /dev/null
+++ b/ui/app/components/transaction-list-item-details/tests/transaction-list-item-details.component.test.js
@@ -0,0 +1,66 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import TransactionListItemDetails from '../transaction-list-item-details.component'
+import Button from '../../button'
+import SenderToRecipient from '../../sender-to-recipient'
+import TransactionBreakdown from '../../transaction-breakdown'
+import TransactionActivityLog from '../../transaction-activity-log'
+
+describe('TransactionListItemDetails Component', () => {
+ it('should render properly', () => {
+ const transaction = {
+ history: [],
+ id: 1,
+ status: 'confirmed',
+ txParams: {
+ from: '0x1',
+ gas: '0x5208',
+ gasPrice: '0x3b9aca00',
+ nonce: '0xa4',
+ to: '0x2',
+ value: '0x2386f26fc10000',
+ },
+ }
+
+ const wrapper = shallow(
+
,
+ { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } }
+ )
+
+ assert.ok(wrapper.hasClass('transaction-list-item-details'))
+ assert.equal(wrapper.find(Button).length, 1)
+ assert.equal(wrapper.find(SenderToRecipient).length, 1)
+ assert.equal(wrapper.find(TransactionBreakdown).length, 1)
+ assert.equal(wrapper.find(TransactionActivityLog).length, 1)
+ })
+
+ it('should render a retry button', () => {
+ const transaction = {
+ history: [],
+ id: 1,
+ status: 'confirmed',
+ txParams: {
+ from: '0x1',
+ gas: '0x5208',
+ gasPrice: '0x3b9aca00',
+ nonce: '0xa4',
+ to: '0x2',
+ value: '0x2386f26fc10000',
+ },
+ }
+
+ const wrapper = shallow(
+
,
+ { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } }
+ )
+
+ assert.ok(wrapper.hasClass('transaction-list-item-details'))
+ assert.equal(wrapper.find(Button).length, 2)
+ })
+})
diff --git a/ui/app/components/transaction-list-item-details/transaction-list-item-details.component.js b/ui/app/components/transaction-list-item-details/transaction-list-item-details.component.js
new file mode 100644
index 000000000000..d57ff130a823
--- /dev/null
+++ b/ui/app/components/transaction-list-item-details/transaction-list-item-details.component.js
@@ -0,0 +1,80 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import SenderToRecipient from '../sender-to-recipient'
+import { CARDS_VARIANT } from '../sender-to-recipient/sender-to-recipient.constants'
+import TransactionActivityLog from '../transaction-activity-log'
+import TransactionBreakdown from '../transaction-breakdown'
+import Button from '../button'
+import prefixForNetwork from '../../../lib/etherscan-prefix-for-network'
+
+export default class TransactionListItemDetails extends PureComponent {
+ static contextTypes = {
+ t: PropTypes.func,
+ }
+
+ static propTypes = {
+ transaction: PropTypes.object,
+ showRetry: PropTypes.bool,
+ }
+
+ handleEtherscanClick = () => {
+ const { hash, metamaskNetworkId } = this.props.transaction
+
+ const prefix = prefixForNetwork(metamaskNetworkId)
+ const etherscanUrl = `https://${prefix}etherscan.io/tx/${hash}`
+ global.platform.openWindow({ url: etherscanUrl })
+ this.setState({ showTransactionDetails: true })
+ }
+
+ render () {
+ const { t } = this.context
+ const { transaction, showRetry } = this.props
+ const { txParams: { to, from } = {} } = transaction
+
+ return (
+
+
+
Details
+
+ {
+ showRetry && (
+
+ )
+ }
+
+
+
+
+
+
+
+
+
+
+
+ )
+ }
+}
diff --git a/ui/app/components/transaction-list-item/index.scss b/ui/app/components/transaction-list-item/index.scss
index 9c53c8960527..427686c293ab 100644
--- a/ui/app/components/transaction-list-item/index.scss
+++ b/ui/app/components/transaction-list-item/index.scss
@@ -1,37 +1,34 @@
.transaction-list-item {
box-sizing: border-box;
min-height: 74px;
- padding: 8px 20px;
border-bottom: 1px solid $geyser;
- cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
- @media screen and (max-width: $break-small) {
- padding: 8px 20px 12px;
- }
-
- &:hover {
- background: rgba($alto, .2);
- }
-
&__grid {
+ cursor: pointer;
width: 100%;
+ padding: 16px 20px;
display: grid;
grid-template-columns: 45px 1fr 1fr 1fr;
grid-template-areas:
"identicon action status primary-amount"
"identicon nonce status secondary-amount";
- @media screen and (max-width: $break-small) {
- grid-template-columns: 45px 5fr 3fr;
- grid-template-areas:
- "nonce nonce nonce"
- "identicon action primary-amount"
- "identicon status secondary-amount";
- }
+ @media screen and (max-width: $break-small) {
+ padding: 8px 20px 12px;
+ grid-template-columns: 45px 5fr 3fr;
+ grid-template-areas:
+ "nonce nonce nonce"
+ "identicon action primary-amount"
+ "identicon status secondary-amount";
+ }
+
+ &:hover {
+ background: rgba($alto, .2);
+ }
}
&__identicon {
@@ -114,4 +111,10 @@
font-size: .5rem;
}
}
+
+ &__details-container {
+ padding: 8px 16px 16px;
+ background: #f3f4f7;
+ width: 100%;
+ }
}
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 75b41a477102..5564f0883299 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
@@ -5,7 +5,7 @@ import TransactionStatus from '../transaction-status'
import TransactionAction from '../transaction-action'
import CurrencyDisplay from '../currency-display'
import TokenCurrencyDisplay from '../token-currency-display'
-import prefixForNetwork from '../../../lib/etherscan-prefix-for-network'
+import TransactionListItemDetails from '../transaction-list-item-details'
import { CONFIRM_TRANSACTION_ROUTE } from '../../routes'
import { UNAPPROVED_STATUS, TOKEN_METHOD_TRANSFER } from '../../constants/transactions'
import { ETH } from '../../constants/common'
@@ -22,19 +22,24 @@ export default class TransactionListItem extends PureComponent {
nonceAndDate: PropTypes.string,
token: PropTypes.object,
assetImages: PropTypes.object,
+ tokenData: PropTypes.object,
+ }
+
+ state = {
+ showTransactionDetails: false,
}
handleClick = () => {
const { transaction, history } = this.props
- const { id, status, hash, metamaskNetworkId } = transaction
+ const { id, status } = transaction
+ const { showTransactionDetails } = this.state
if (status === UNAPPROVED_STATUS) {
history.push(`${CONFIRM_TRANSACTION_ROUTE}/${id}`)
- } else if (hash) {
- const prefix = prefixForNetwork(metamaskNetworkId)
- const etherscanUrl = `https://${prefix}etherscan.io/tx/${hash}`
- global.platform.openWindow({ url: etherscanUrl })
+ return
}
+
+ this.setState({ showTransactionDetails: !showTransactionDetails })
}
handleRetryClick = event => {
@@ -75,6 +80,8 @@ export default class TransactionListItem extends PureComponent {
className="transaction-list-item__amount transaction-list-item__amount--primary"
value={value}
prefix="-"
+ numberOfDecimals={2}
+ currency={ETH}
/>
)
}
@@ -89,8 +96,6 @@ export default class TransactionListItem extends PureComponent {
className="transaction-list-item__amount transaction-list-item__amount--secondary"
prefix="-"
value={value}
- numberOfDecimals={2}
- currency={ETH}
/>
)
}
@@ -102,20 +107,25 @@ 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 (
-
-
+
+
{
- showRetry && methodData.done && (
-
-
Taking too long? Increase the gas price on your transaction
+ showTransactionDetails && (
+
+
)
}
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 47644241a841..3db9d40ec340 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/components/transaction-list/index.scss b/ui/app/components/transaction-list/index.scss
index 0e8db485cf44..d944ef20eaca 100644
--- a/ui/app/components/transaction-list/index.scss
+++ b/ui/app/components/transaction-list/index.scss
@@ -7,7 +7,7 @@
&__completed-transactions {
display: flex;
flex-direction: column;
- height: 100%;
+ flex: 1;
}
&__header {
@@ -35,6 +35,7 @@
flex: 1;
display: grid;
grid-template-rows: 35% 1fr;
+ padding-top: 8px;
}
&__empty-text {
diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js
index 77c7f3a4bdd7..064a6ab55862 100644
--- a/ui/app/components/wallet-view.js
+++ b/ui/app/components/wallet-view.js
@@ -17,6 +17,8 @@ const TokenList = require('./token-list')
const selectors = require('../selectors')
const { ADD_TOKEN_ROUTE } = require('../routes')
+import Button from './button'
+
module.exports = compose(
withRouter,
connect(mapStateToProps, mapDispatchToProps)
@@ -199,7 +201,9 @@ WalletView.prototype.render = function () {
h(TokenList),
- h('button.btn-primary.wallet-view__add-token-button', {
+ h(Button, {
+ type: 'primary',
+ className: 'wallet-view__add-token-button',
onClick: () => {
history.push(ADD_TOKEN_ROUTE)
sidebarOpen && hideSidebar()
diff --git a/ui/app/constants/common.js b/ui/app/constants/common.js
index 28731ce33fee..a20f6cc02ae3 100644
--- a/ui/app/constants/common.js
+++ b/ui/app/constants/common.js
@@ -1 +1,3 @@
export const ETH = 'ETH'
+export const GWEI = 'GWEI'
+export const WEI = 'WEI'
diff --git a/ui/app/conversion-util.js b/ui/app/conversion-util.js
index 38f5f1c50afe..f271b5683524 100644
--- a/ui/app/conversion-util.js
+++ b/ui/app/conversion-util.js
@@ -35,6 +35,7 @@ BigNumber.config({
// Big Number Constants
const BIG_NUMBER_WEI_MULTIPLIER = new BigNumber('1000000000000000000')
const BIG_NUMBER_GWEI_MULTIPLIER = new BigNumber('1000000000')
+const BIG_NUMBER_ETH_MULTIPLIER = new BigNumber('1')
// Individual Setters
const convert = R.invoker(1, 'times')
@@ -52,10 +53,12 @@ const toBigNumber = {
const toNormalizedDenomination = {
WEI: bigNumber => bigNumber.div(BIG_NUMBER_WEI_MULTIPLIER),
GWEI: bigNumber => bigNumber.div(BIG_NUMBER_GWEI_MULTIPLIER),
+ ETH: bigNumber => bigNumber.div(BIG_NUMBER_ETH_MULTIPLIER),
}
const toSpecifiedDenomination = {
WEI: bigNumber => bigNumber.times(BIG_NUMBER_WEI_MULTIPLIER).round(),
GWEI: bigNumber => bigNumber.times(BIG_NUMBER_GWEI_MULTIPLIER).round(9),
+ ETH: bigNumber => bigNumber.times(BIG_NUMBER_ETH_MULTIPLIER).round(9),
}
const baseChange = {
hex: n => n.toString(16),
diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss
index 34565767fee0..655188a3e97a 100644
--- a/ui/app/css/itcss/components/buttons.scss
+++ b/ui/app/css/itcss/components/buttons.scss
@@ -2,10 +2,7 @@
Buttons
*/
-.btn-default,
-.btn-primary,
-.btn-secondary,
-.btn-confirm {
+.button {
height: 44px;
background: $white;
display: flex;
@@ -79,6 +76,16 @@
background-color: $curious-blue;
}
+.btn-raised {
+ color: $curious-blue;
+ background-color: $white;
+ box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
+ padding: 6px;
+ height: initial;
+ width: initial;
+ min-width: initial;
+}
+
.btn--large {
height: 54px;
}
diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index 806ac8536b70..abc77b75a0be 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/ui/app/css/itcss/components/send.scss
@@ -833,6 +833,10 @@
line-height: 12px;
color: $red;
}
+
+ &__cancel {
+ margin-right: 10px;
+ }
}
&__gas-modal-card {
diff --git a/ui/app/helpers/confirm-transaction/util.js b/ui/app/helpers/confirm-transaction/util.js
index d1a4994e4c50..bcac225003c8 100644
--- a/ui/app/helpers/confirm-transaction/util.js
+++ b/ui/app/helpers/confirm-transaction/util.js
@@ -58,6 +58,7 @@ export function getValueFromWeiHex ({
toCurrency,
conversionRate,
numberOfDecimals,
+ toDenomination,
}) {
return conversionUtil(value, {
fromNumericBase: 'hex',
@@ -66,6 +67,7 @@ export function getValueFromWeiHex ({
toCurrency,
numberOfDecimals,
fromDenomination: 'WEI',
+ toDenomination,
conversionRate,
})
}
diff --git a/ui/app/helpers/conversions.util.js b/ui/app/helpers/conversions.util.js
index 1dec216fade1..5204faa1f3f6 100644
--- a/ui/app/helpers/conversions.util.js
+++ b/ui/app/helpers/conversions.util.js
@@ -1,4 +1,5 @@
import { conversionUtil } from '../conversion-util'
+import { ETH, GWEI, WEI } from '../constants/common'
export function hexToDecimal (hexValue) {
return conversionUtil(hexValue, {
@@ -7,16 +8,27 @@ export function hexToDecimal (hexValue) {
})
}
-export function getEthFromWeiHex ({
- value,
- conversionRate,
-}) {
- return getValueFromWeiHex({
- value,
- conversionRate,
- toCurrency: 'ETH',
- numberOfDecimals: 6,
- })
+export function getEthConversionFromWeiHex ({ value, conversionRate, numberOfDecimals = 6 }) {
+ const denominations = [ETH, GWEI, WEI]
+
+ let nonZeroDenomination
+
+ for (let i = 0; i < denominations.length; i++) {
+ const convertedValue = getValueFromWeiHex({
+ value,
+ conversionRate,
+ toCurrency: ETH,
+ numberOfDecimals,
+ toDenomination: denominations[i],
+ })
+
+ if (convertedValue !== '0' || i === denominations.length - 1) {
+ nonZeroDenomination = `${convertedValue} ${denominations[i]}`
+ break
+ }
+ }
+
+ return nonZeroDenomination
}
export function getValueFromWeiHex ({
@@ -24,14 +36,16 @@ export function getValueFromWeiHex ({
toCurrency,
conversionRate,
numberOfDecimals,
+ toDenomination,
}) {
return conversionUtil(value, {
fromNumericBase: 'hex',
toNumericBase: 'dec',
- fromCurrency: 'ETH',
+ fromCurrency: ETH,
toCurrency,
numberOfDecimals,
- fromDenomination: 'WEI',
+ fromDenomination: WEI,
+ toDenomination,
conversionRate,
})
}
diff --git a/ui/app/helpers/transactions.util.js b/ui/app/helpers/transactions.util.js
index 54df54aa8e69..0e1a6ca37e6e 100644
--- a/ui/app/helpers/transactions.util.js
+++ b/ui/app/helpers/transactions.util.js
@@ -16,6 +16,8 @@ import {
UNKNOWN_FUNCTION_KEY,
} from '../constants/transactions'
+import { addCurrencies } from '../conversion-util'
+
abiDecoder.addABI(abi)
export function getTokenData (data = {}) {
@@ -103,3 +105,13 @@ export async function isSmartContractAddress (address) {
const code = await global.eth.getCode(address)
return code && code !== '0x'
}
+
+export function sumHexes (...args) {
+ const total = args.reduce((acc, base) => {
+ return addCurrencies(acc, base, {
+ toNumericBase: 'hex',
+ })
+ })
+
+ return ethUtil.addHexPrefix(total)
+}
diff --git a/ui/i18n-helper.js b/ui/i18n-helper.js
index bc927ee657f5..c6a7d0bf1030 100644
--- a/ui/i18n-helper.js
+++ b/ui/i18n-helper.js
@@ -20,10 +20,10 @@ const getMessage = (locale, key, substitutions) => {
let phrase = entry.message
// perform substitutions
if (substitutions && substitutions.length) {
- phrase = phrase.replace(/\$1/g, substitutions[0])
- if (substitutions.length > 1) {
- phrase = phrase.replace(/\$2/g, substitutions[1])
- }
+ substitutions.forEach((substitution, index) => {
+ const regex = new RegExp(`\\$${index + 1}`, 'g')
+ phrase = phrase.replace(regex, substitution)
+ })
}
return phrase
}