Merge pull request #289 from LiskHQ/271-click-whole-transaction-row

Click anywhere on transaction row should go to transaction detail - Closes #271

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

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%);

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%;

src/components/transactions/transactionDetailView.js

@@ -1,12 +1,16 @@
 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';
 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 {
                 <AccountVisual address={this.props.value.senderId} size={43} />
               </figure>}
               </div>
-              <div className={`${styles.value} ${styles.sender} `}>{this.props.value.senderId}</div>
+              <div className={`${styles.value} ${styles.sender} `}>
+                <Link className={`${styles.addressLink} ${styles.clickable}`}
+                  to={`${routes.account.long}/${this.props.value.senderId}`}>
+                  {this.props.value.senderId}
+                </Link>
+              </div>
             </div>
             <div className={`${grid['col-xs-12']} ${grid['col-sm-6']} ${grid['col-md-6']} ${styles.column}`}>
               <div className={styles.label}>{this.props.t('Recipient')} {this.showAvatar(this.props.value.recipientId) &&
               <figure className={styles.accountVisual}>
                 <AccountVisual address={this.props.value.recipientId} size={43} />
               </figure>}</div>
-              <div className={styles.value}>{this.props.value.recipientId ? this.props.value.recipientId : '-'}</div>
+              <div className={styles.value}>
+                {this.props.value.recipientId ?
+                  <Link className={`${styles.addressLink} ${styles.clickable}`}
+                    to={`${routes.account.long}/${this.props.value.recipientId}`}>
+                    {this.props.value.recipientId}
+                  </Link> :
+                  '-'
+                }
+              </div>
             </div>
           </div>
           <div className={`${grid.row} ${styles.row}`}>
@@ -81,6 +98,14 @@ class TransactionsDetailView extends React.Component {
             </div>
           </div>
         </div>
+        <footer>
+          {this.props.prevStep ?
+            <Link to={`${routes.transaction.long}/${this.props.value.id}`}>
+              <Button className={styles.button} >
+                {this.props.t('Show transaction page')}
+              </Button>
+            </Link> : null }
+        </footer>
       </div>
     );
   }

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(<TransactionDetailView {...props} />,
-      {
-        context: { i18n },
-        childContextTypes: {
-          i18n: PropTypes.object.isRequired,
-        },
-      });
+    const wrapper = mountWithContext(<TransactionDetailView {...props} />, { });
 
     const expectedValue = /flexboxgrid__row/g;
     const html = wrapper.html();

src/components/transactions/transactionRow.js

@@ -16,8 +16,9 @@ class TransactionRow extends React.Component {
 
   render() {
     const { props } = this;
+    const nextStep = props.nextStep || (() => {});
     return (
-      <div className={`${grid.row} ${styles.rows} transactionsRow`}>
+      <div className={`${grid.row} ${styles.rows} ${styles.clickable} transactionsRow`} onClick={nextStep.bind(this, { ...props })}>
         <div className={`${styles.leftText} ${grid['col-xs-6']} ${grid['col-sm-6']} transactions-cell`}>
           <div className={`${styles.mainRow} ${styles.address}`}>
             <TransactionType {...props.value} address={props.address}></TransactionType>
@@ -34,7 +35,7 @@ class TransactionRow extends React.Component {
         </div>
         <div className={`${styles.rightText} ${grid['col-xs-1']} ${grid['col-sm-1']} transactions-cell`}>
           { props.nextStep ?
-            <div className={`${styles.mainRow} ${styles.clickable}`} onClick={props.nextStep.bind(this, { ...props })}>
+            <div className={`${styles.mainRow} `} >
               <FontIcon value='arrow-right'/>
             </div> :
             null

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(<Provider store={store}>
+      <Router>
+        <I18nextProvider i18n={ i18n }>
+          <TransactionRow
+            tableStyle={tableStyle}
+            address={address}
+            value={rowData}
+          ></TransactionRow>
+        </I18nextProvider>
+      </Router>
+    </Provider>, options);
+
+    wrapper.find('.transactions-cell').at(0).simulate('click');
+  });
+
   it('should render Spinner if no value.confirmations" ', () => {
     rowData.confirmations = undefined;
     const wrapper = mount(<Provider store={store}>

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 ?
     <span className={styles.smallButton}>{type}</span> :
-    <Link className={`${styles.clickable} ${styles.ordinaryText}`} to={`${routes.account.long}/${address}`}>
-      {address}
-    </Link>;
+    <span className={styles.ordinaryText}>{address}</span>;
   return template;
 };
 

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(<Router><TransactionType {...inputValue} /></Router>, 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);
   });
 });

src/components/transactions/transactions.css

@@ -82,6 +82,8 @@
 }
 
 .transactions {
+  height: var(--main-box-height);
+
   & .activity {
     display: flex;
     flex-direction: column;
@@ -163,13 +165,25 @@
 .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);
   }
 
   & .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;

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;

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