diff options
Diffstat (limited to 'ui/app')
8 files changed, 92 insertions, 21 deletions
diff --git a/ui/app/components/input-number.js b/ui/app/components/input-number.js index 59c6842ef..eec5e3740 100644 --- a/ui/app/components/input-number.js +++ b/ui/app/components/input-number.js @@ -66,13 +66,16 @@ InputNumber.prototype.render = function () { }), h('span.gas-tooltip-input-detail', {}, [unitLabel]), h('div.gas-tooltip-input-arrows', {}, [ - h('i.fa.fa-angle-up', { + h('div.gas-tooltip-input-arrow-wrapper', { onClick: () => this.setValue(addCurrencies(value, step, { toNumericBase: 'dec' })), - }), - h('i.fa.fa-angle-down', { - style: { cursor: 'pointer' }, + }, [ + h('i.fa.fa-angle-up'), + ]), + h('div.gas-tooltip-input-arrow-wrapper', { onClick: () => this.setValue(subtractCurrencies(value, step, { toNumericBase: 'dec' })), - }), + }, [ + h('i.fa.fa-angle-down'), + ]), ]), ]) } diff --git a/ui/app/components/selected-account/selected-account.component.js b/ui/app/components/selected-account/selected-account.component.js index 55b935ee0..4f98df9b6 100644 --- a/ui/app/components/selected-account/selected-account.component.js +++ b/ui/app/components/selected-account/selected-account.component.js @@ -1,7 +1,7 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import copyToClipboard from 'copy-to-clipboard' -import { addressSlicer } from '../../util' +import { addressSlicer, checksumAddress } from '../../util' const Tooltip = require('../tooltip-v2.js').default @@ -22,6 +22,7 @@ class SelectedAccount extends Component { render () { const { t } = this.context const { selectedAddress, selectedIdentity } = this.props + const checksummedAddress = checksumAddress(selectedAddress) return ( <div className="selected-account"> @@ -34,14 +35,14 @@ class SelectedAccount extends Component { onClick={() => { this.setState({ copied: true }) setTimeout(() => this.setState({ copied: false }), 3000) - copyToClipboard(selectedAddress) + copyToClipboard(checksummedAddress) }} > <div className="selected-account__name"> { selectedIdentity.name } </div> <div className="selected-account__address"> - { addressSlicer(selectedAddress) } + { addressSlicer(checksummedAddress) } </div> </div> </Tooltip> diff --git a/ui/app/components/selected-account/tests/selected-account-component.test.js b/ui/app/components/selected-account/tests/selected-account-component.test.js new file mode 100644 index 000000000..78a94d1c8 --- /dev/null +++ b/ui/app/components/selected-account/tests/selected-account-component.test.js @@ -0,0 +1,16 @@ +import React from 'react' +import assert from 'assert' +import { render } from 'enzyme' +import SelectedAccount from '../selected-account.component' + +describe('SelectedAccount Component', () => { + it('should render checksummed address', () => { + const wrapper = render(<SelectedAccount + selectedAddress="0x1b82543566f41a7db9a9a75fc933c340ffb55c9d" + selectedIdentity={{ name: 'testName' }} + />, { context: { t: () => {}}}) + // Checksummed version of address is displayed + assert.equal(wrapper.find('.selected-account__address').text(), '0x1B82...5C9D') + assert.equal(wrapper.find('.selected-account__name').text(), 'testName') + }) +}) diff --git a/ui/app/components/signature-request.js b/ui/app/components/signature-request.js index 2bfa350d3..5b0c7684a 100644 --- a/ui/app/components/signature-request.js +++ b/ui/app/components/signature-request.js @@ -8,6 +8,7 @@ const ethUtil = require('ethereumjs-util') const classnames = require('classnames') const { compose } = require('recompose') const { withRouter } = require('react-router-dom') +const { ObjectInspector } = require('react-inspector') const AccountDropdownMini = require('./dropdowns/account-dropdown-mini') @@ -169,12 +170,29 @@ SignatureRequest.prototype.msgHexToText = function (hex) { } } +// eslint-disable-next-line react/display-name +SignatureRequest.prototype.renderTypedDataV3 = function (data) { + const { domain, message } = JSON.parse(data) + return [ + h('div.request-signature__typed-container', [ + domain ? h('div', [ + h('h1', 'Domain'), + h(ObjectInspector, { data: domain, expandLevel: 1, name: 'domain' }), + ]) : '', + message ? h('div', [ + h('h1', 'Message'), + h(ObjectInspector, { data: message, expandLevel: 1, name: 'message' }), + ]) : '', + ]), + ] +} + SignatureRequest.prototype.renderBody = function () { let rows let notice = this.context.t('youSign') + ':' const { txData } = this.props - const { type, msgParams: { data } } = txData + const { type, msgParams: { data, version } } = txData if (type === 'personal_sign') { rows = [{ name: this.context.t('message'), value: this.msgHexToText(data) }] @@ -205,9 +223,9 @@ SignatureRequest.prototype.renderBody = function () { }), }, [notice]), - h('div.request-signature__rows', [ - - ...rows.map(({ name, value }) => { + h('div.request-signature__rows', type === 'eth_signTypedData' && version === 'V3' ? + this.renderTypedDataV3(data) : + rows.map(({ name, value }) => { if (typeof value === 'boolean') { value = value.toString() } @@ -216,9 +234,7 @@ SignatureRequest.prototype.renderBody = function () { h('div.request-signature__row-value', value), ]) }), - - ]), - + ), ]) } 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 index d57ff130a..f65ff4d55 100644 --- 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 @@ -13,8 +13,9 @@ export default class TransactionListItemDetails extends PureComponent { } static propTypes = { - transaction: PropTypes.object, + onRetry: PropTypes.func, showRetry: PropTypes.bool, + transaction: PropTypes.object, } handleEtherscanClick = () => { @@ -26,6 +27,13 @@ export default class TransactionListItemDetails extends PureComponent { this.setState({ showTransactionDetails: true }) } + handleRetry = event => { + const { onRetry } = this.props + + event.stopPropagation() + onRetry() + } + render () { const { t } = this.context const { transaction, showRetry } = this.props @@ -40,7 +48,7 @@ export default class TransactionListItemDetails extends PureComponent { showRetry && ( <Button type="raised" - onClick={this.handleEtherscanClick} + onClick={this.handleRetry} className="transaction-list-item-details__header-button" > { t('speedUp') } 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 5564f0883..e590e96e0 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 @@ -42,9 +42,7 @@ export default class TransactionListItem extends PureComponent { this.setState({ showTransactionDetails: !showTransactionDetails }) } - handleRetryClick = event => { - event.stopPropagation() - + handleRetry = () => { const { transaction: { txParams: { to } = {} }, methodData: { name } = {}, @@ -156,6 +154,7 @@ export default class TransactionListItem extends PureComponent { <TransactionListItemDetails transaction={transaction} showRetry={showRetry && methodData.done} + onRetry={this.handleRetry} /> </div> ) diff --git a/ui/app/css/itcss/components/request-signature.scss b/ui/app/css/itcss/components/request-signature.scss index b607aded3..445b9ebf5 100644 --- a/ui/app/css/itcss/components/request-signature.scss +++ b/ui/app/css/itcss/components/request-signature.scss @@ -23,6 +23,25 @@ } } + &__typed-container { + padding: 17px; + + h1 { + font-weight: 900; + margin-bottom: 5px; + } + + * { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + > div { + margin-bottom: 10px; + } + } + &__header { height: 64px; width: 100%; diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 125134f12..7fc960d7d 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -888,12 +888,21 @@ font-size: 18px; color: $tundora; right: 0px; - padding: 1px 4px; + padding: 0; display: flex; justify-content: space-around; align-items: center; } + .gas-tooltip-input-arrow-wrapper { + align-items: center; + align-self: stretch; + display: flex; + flex-direction: column; + flex-grow: 1; + justify-content: center; + } + input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; display: none; |