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(),