diff --git a/i18n/locales/en/common.json b/i18n/locales/en/common.json index df6ba97bfe..a07f65dbe9 100644 --- a/i18n/locales/en/common.json +++ b/i18n/locales/en/common.json @@ -172,6 +172,7 @@ "Sender": "Sender", "Settings": "Settings", "Show passphrase": "Show passphrase", + "Show transaction page": "Show transaction page", "Sidechains": "Sidechains", "Sidechains will revolutionize the way decentralised apps are developed. Here you will be able to find hosts, and monitor your sidechains soon.": "Sidechains will revolutionize the way decentralised apps are developed. Here you will be able to find hosts, and monitor your sidechains soon.", "Sign in": "Sign in", diff --git a/src/components/app/variables.css b/src/components/app/variables.css index 64118fc72a..141b7d8be3 100644 --- a/src/components/app/variables.css +++ b/src/components/app/variables.css @@ -106,6 +106,7 @@ or "warn/action" ineastd of "red/green" --color-success-dark: #008722; --color-action-light-2: #93f4fe; --color-action-medium-2: #004aff; + --color-link: #0077bd; --color-tertiary-medium: #17499b; --gradient-theme: linear-gradient(27deg, #17499b 0%, var(--color-grayscale-light) 100%); --gradient-action-orange: linear-gradient(-27deg, var(--color-action-dark) 0%, var(--color-action-light) 100%); diff --git a/src/components/sendWritable/send.css b/src/components/sendWritable/send.css index 4730bcf377..8dd92448ee 100644 --- a/src/components/sendWritable/send.css +++ b/src/components/sendWritable/send.css @@ -79,7 +79,7 @@ input:read-only { .sendWrapper { display: flex; - flex-flow: column wrap; + flex-direction: column; justify-content: space-between; width: 100%; height: 100%; diff --git a/src/components/transactions/transactionDetailView.js b/src/components/transactions/transactionDetailView.js index 66236075af..98910dd533 100644 --- a/src/components/transactions/transactionDetailView.js +++ b/src/components/transactions/transactionDetailView.js @@ -1,5 +1,8 @@ import React from 'react'; import grid from 'flexboxgrid/dist/flexboxgrid.css'; +import { Link } from 'react-router-dom'; + +import { Button } from './../toolbox/buttons/button'; import { TimeFromTimestamp, DateFromTimestamp } from './../timestamp/index'; import CopyToClipboard from '../copyToClipboard'; import AccountVisual from '../accountVisual'; @@ -7,6 +10,7 @@ import styles from './transactions.css'; import { FontIcon } from '../fontIcon'; import LiskAmount from '../liskAmount'; import Amount from './amount'; +import routes from './../../constants/routes'; class TransactionsDetailView extends React.Component { showAvatar(address) { @@ -35,14 +39,27 @@ class TransactionsDetailView extends React.Component { } -
{this.props.value.senderId}
+
+ + {this.props.value.senderId} + +
{this.props.t('Recipient')} {this.showAvatar(this.props.value.recipientId) &&
}
-
{this.props.value.recipientId ? this.props.value.recipientId : '-'}
+
+ {this.props.value.recipientId ? + + {this.props.value.recipientId} + : + '-' + } +
@@ -81,6 +98,14 @@ class TransactionsDetailView extends React.Component {
+ ); } diff --git a/src/components/transactions/transactionDetailView.test.js b/src/components/transactions/transactionDetailView.test.js index a4a5f2bb66..2f45b71986 100644 --- a/src/components/transactions/transactionDetailView.test.js +++ b/src/components/transactions/transactionDetailView.test.js @@ -1,9 +1,7 @@ import React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; -import { mount } from 'enzyme'; -import PropTypes from 'prop-types'; -import i18n from '../../i18n'; +import { mountWithContext } from '../../../test/utils/mountHelpers'; import TransactionDetailView from './transactionDetailView'; describe('TransactionDetailView', () => { @@ -20,13 +18,7 @@ describe('TransactionDetailView', () => { id: '', }, }; - const wrapper = mount(, - { - context: { i18n }, - childContextTypes: { - i18n: PropTypes.object.isRequired, - }, - }); + const wrapper = mountWithContext(, { }); const expectedValue = /flexboxgrid__row/g; const html = wrapper.html(); diff --git a/src/components/transactions/transactionRow.js b/src/components/transactions/transactionRow.js index af0155a2a2..7641b09bfb 100644 --- a/src/components/transactions/transactionRow.js +++ b/src/components/transactions/transactionRow.js @@ -16,8 +16,9 @@ class TransactionRow extends React.Component { render() { const { props } = this; + const nextStep = props.nextStep || (() => {}); return ( -
+
@@ -34,7 +35,7 @@ class TransactionRow extends React.Component {
{ props.nextStep ? -
+
: null diff --git a/src/components/transactions/transactionRow.test.js b/src/components/transactions/transactionRow.test.js index 7819e9a5b6..a887b313c3 100644 --- a/src/components/transactions/transactionRow.test.js +++ b/src/components/transactions/transactionRow.test.js @@ -59,6 +59,22 @@ describe('TransactionRow', () => { expect(wrapper.find('.transactions-cell')).to.have.lengthOf(4); }); + it('should not cause any error on click if props.nextStep is not defined', () => { + const wrapper = mount( + + + + + + , options); + + wrapper.find('.transactions-cell').at(0).simulate('click'); + }); + it('should render Spinner if no value.confirmations" ', () => { rowData.confirmations = undefined; const wrapper = mount( diff --git a/src/components/transactions/transactionType.js b/src/components/transactions/transactionType.js index 8f99527211..e673fb25b8 100644 --- a/src/components/transactions/transactionType.js +++ b/src/components/transactions/transactionType.js @@ -1,11 +1,9 @@ import React from 'react'; import { translate } from 'react-i18next'; -import { Link } from 'react-router-dom'; import styles from './transactions.css'; -import routes from './../../constants/routes'; const TransactionType = (props) => { - const t = props.t; + const { t } = props; let type; switch (props.type) { case 1: @@ -36,9 +34,7 @@ const TransactionType = (props) => { const address = props.address !== props.senderId ? props.senderId : props.recipientId; const template = type ? {type} : - - {address} - ; + {address}; return template; }; diff --git a/src/components/transactions/transactionType.test.js b/src/components/transactions/transactionType.test.js index caa98f5f07..7c729e0312 100644 --- a/src/components/transactions/transactionType.test.js +++ b/src/components/transactions/transactionType.test.js @@ -2,7 +2,7 @@ import React from 'react'; import { expect } from 'chai'; import { mount } from 'enzyme'; import PropTypes from 'prop-types'; -import { BrowserRouter as Router, Link } from 'react-router-dom'; +import { BrowserRouter as Router } from 'react-router-dom'; import configureMockStore from 'redux-mock-store'; import TransactionType from './transactionType'; import history from '../../history'; @@ -74,7 +74,6 @@ describe('TransactionType', () => { senderId: '1085993630748340485L', }; const wrapper = mount(, options); - expect(wrapper.find(Link)).to.have.lengthOf(1); - expect(wrapper.find(Link).text()).to.equal(inputValue.senderId); + expect(wrapper.text()).to.equal(inputValue.senderId); }); }); diff --git a/src/components/transactions/transactions.css b/src/components/transactions/transactions.css index 4d8c62077f..40d1605ef4 100644 --- a/src/components/transactions/transactions.css +++ b/src/components/transactions/transactions.css @@ -82,6 +82,8 @@ } .transactions { + height: var(--main-box-height); + & .activity { display: flex; flex-direction: column; @@ -163,6 +165,14 @@ .details { line-height: var(--list-line-height); color: var(--details-font-color); + display: flex; + flex-direction: column; + justify-content: space-between; + min-height: 100%; + + & footer { + padding-bottom: 92px; + } & .copy { color: var(--color-primary-standard); @@ -170,6 +180,10 @@ & .row { padding-bottom: 48px; + + &:last-child { + padding-bottom: 0px; + } } & .column { @@ -186,7 +200,6 @@ & header { padding-left: 0px; - margin-bottom: 80px; & h3 { font-family: var(--content-font); @@ -296,6 +309,12 @@ } } +.addressLink { + color: var(--color-link); + font-weight: 600; + text-decoration: none; +} + @media (--xLarge-viewport) { .transactions { & .activity { @@ -318,7 +337,7 @@ } .details { - padding: 0px 0px 20px var(--grid-padding-XL); + padding: 0px var(--grid-padding-XL); & .label { font-size: var(--details-label-font-size-XL); @@ -376,7 +395,7 @@ } .details { - padding: 0px 0px 20px var(--grid-padding-L); + padding: 0px var(--grid-padding-L); & .label { font-size: var(--details-label-font-size-L); @@ -471,7 +490,7 @@ } .details { - padding: 0px 0px 20px var(--grid-padding-XS); + padding: 0px var(--grid-padding-XS); & .row { padding-bottom: 0px; diff --git a/src/components/votesPreview/votesPreview.css b/src/components/votesPreview/votesPreview.css index 7a0d7e879d..34baeb5d15 100644 --- a/src/components/votesPreview/votesPreview.css +++ b/src/components/votesPreview/votesPreview.css @@ -6,6 +6,7 @@ --main-header-font-size-XL: 32px; --main-header-font-size-L: 28px; --main-header-font-size-XS: 24px; + --header-font-size: 28px; --link-font-size: 15px; --progress-bar-text-font-size: 13px; --progress-bar-header-font-size: 54px; @@ -32,7 +33,7 @@ & a { font-size: var(--link-font-size); - color: var(--link-color); + color: var(--color-link); margin-top: 16px; display: block; font-weight: 600; diff --git a/test/utils/mountHelpers.js b/test/utils/mountHelpers.js index 0a547ab319..42ae4f555b 100644 --- a/test/utils/mountHelpers.js +++ b/test/utils/mountHelpers.js @@ -7,12 +7,12 @@ import i18n from '../../src/i18n'; // eslint-disable-next-line import/prefer-default-export -export const mountWithContext = (component, { storeState, location }) => { +export const mountWithContext = (component, { storeState = {}, location = {} }) => { const store = configureMockStore([])(storeState); const history = { location: { - pathname: (location && location.pathname) || '', - search: (location && location.search) || '', + pathname: location.pathname || '', + search: location.search || '', }, replace: spy(), createHref: spy(),