Merge branch '1.2.0' into 1212-fix-ui-issues

i18n/locales/en/common.json

@@ -63,6 +63,7 @@
   "Confirmation in the next step": "Confirmation in the next step",
   "Confirmation in the next step.": "Confirmation in the next step.",
   "Confirmations": "Confirmations",
+  "Connected to ": "Connected to ",
   "Connecting to network": "Connecting to network",
   "Connection re-established": "Connection re-established",
   "Continue to Dashboard": "Continue to Dashboard",

src/actions/transactions.js

@@ -226,6 +226,9 @@ export const sent = ({
             amount: toRawLsk(amount),
             fee: Fees.send,
             type: transactionTypes.send,
+            asset: {
+              data,
+            },
           },
           type: actionTypes.transactionAdded,
         });

src/actions/transactions.test.js

@@ -213,6 +213,7 @@ describe('actions: transactions', () => {
         senderPublicKey: 'test_public-key',
         senderId: 'test_address',
         recipientId: data.recipientId,
+        asset: { data: undefined },
         amount: toRawLsk(data.amount),
         fee: Fees.send,
         type: transactionTypes.send,

src/components/account/account.css

@@ -1,20 +1,12 @@
 @import './../app/variables.css';
 
-:root {
-  --online: #73cba9;
-  --offline: #f45d4c;
-}
-
 .wrapper {
   margin: 8px -8px 16px;
 }
 
-:global .online {
-  color: var(--online);
-}
-
-:global .offline {
-  color: var(--offline);
+.network {
+  margin-right: 8px;
+  margin-top: -3px;
 }
 
 .value-wrapper {
@@ -79,16 +71,30 @@
 
 .title {
   color: white;
+  height: 56px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.testnetTitle,
+.devnetTitle {
+  color: var(--color-grayscale-medium);
 }
 
 .current {
   color: var(--color-grayscale-medium);
+  margin-top: 8px;
+  margin-left: 32px;
+  display: inline-block;
 }
 
 .peer {
   font-size: 16px;
   display: inline-block;
   text-align: left;
+  width: auto;
+  height: 56px;
 }
 
 @media (--medium-viewport) {

src/components/account/account.js

@@ -1,28 +1,44 @@
 import React from 'react';
+import Lisk from 'lisk-elements';
 import { FontIcon } from '../fontIcon';
 import networks from '../../constants/networks';
 import styles from './account.css';
 
+
 /**
  * Contains some of the important and basic information about the account
  *
  * @param {object} props - include properties of component
  */
 
-const Account = ({ peers, t }) => {
+const Account = ({ peers, t, showNetworkIndicator }) => {
+  const iconMap = ['mainnet', 'testnet', 'devnet'];
+  const translations = iconMap.map(code => t(code));
+
+  let iconCode = peers.options.code;
+  if (iconCode === 2) {
+    iconCode = (peers.options.nethash === Lisk.constants.MAINNET_NETHASH) ?
+      networks.mainnet.code : iconCode;
+    iconCode = (peers.options.nethash === Lisk.constants.TESTNET_NETHASH) ?
+      networks.testnet.code : iconCode;
+  }
+
   const status = (peers.status && peers.status.online) ?
-    <FontIcon className='online' value='checkmark' /> :
+    <FontIcon className={`${styles.network} online`} value={iconMap[iconCode]} /> :
     <FontIcon className='offline' value='error' />;
 
-  return ((peers.data &&
+  return ((showNetworkIndicator && peers.data &&
       peers.options.code !== networks.mainnet.code) ?
     <section className={styles.peer}>
-      <div className={`${styles.title} inner primary peer-network`}>{t(peers.options.name)} <span id="accountStatus" className={`${styles.status} status`}>{status}</span>
+      <div className={`${styles.title} ${`${styles[`${iconMap[iconCode]}Title`]}`} inner primary peer-network ${iconMap[iconCode]}-title`}>
+        <span id="accountStatus" className={`${styles.status} network-status`}>
+          {status}
+          {t('Connected to ')}{translations[iconCode]}
+        </span>
+        <span className={`${styles.current} inner secondary peer`}>
+          {peers.data.currentNode}
+        </span>
       </div>
-
-      <span className={`${styles.current} inner secondary peer`}>
-        {peers.data.currentNode}
-      </span>
     </section> :
     null
   );

src/components/account/account.test.js

@@ -1,7 +1,9 @@
 import React from 'react';
+import Lisk from 'lisk-elements';
 import { expect } from 'chai';
 import { shallow } from 'enzyme';
 import sinon from 'sinon';
+import networks from '../../constants/networks';
 import Account from './account';
 
 describe('Account', () => {
@@ -13,6 +15,7 @@ describe('Account', () => {
       i18n: {},
       store: {},
       onActivePeerUpdated: sinon.spy(),
+      showNetworkIndicator: true,
       peers: {
         status: {
           online: false,
@@ -41,9 +44,28 @@ describe('Account', () => {
     expect(wrapper.find('Address')).to.have.lengthOf(1);
   });
 
-  it('depicts being online when peers.status.online is true', () => {
+  it('shows network indicator online', () => {
     props.peers.status.online = true;
     const wrapper = shallow(<Account {...props} />);
-    expect(wrapper.find('.status FontIcon')).to.have.className('online');
+    wrapper.update();
+    expect(wrapper).to.have.exactly(1).descendants('.online');
+  });
+
+  it('shows network indicator offline', () => {
+    props.peers.status.online = false;
+    const wrapper = shallow(<Account {...props} />);
+    wrapper.update();
+    expect(wrapper).to.have.exactly(1).descendants('.offline');
+  });
+
+  it('shows testnet icon when online and nethash matches', () => {
+    props.peers.status.online = true;
+    props.peers.options.nethash = Lisk.constants.TESTNET_NETHASH;
+    props.peers.options.code = networks.customNode.code;
+    props.peers.data.currentNode = 'http://localhost:4000';
+    const wrapper = shallow(<Account {...props} />);
+    wrapper.update();
+    expect(wrapper).to.have.exactly(1).descendants('.online');
+    expect(wrapper).to.have.exactly(1).descendants('.testnet-title');
   });
 });

src/components/app/global.css

@@ -39,12 +39,6 @@ order to be available application wide
   padding: 0px 30px;
 }
 
-:global .appLoaded {
-  & .searchBar {
-    display: inline-block;
-  }
-}
-
 @media (--medium-viewport) {
   :global body.contentFocused {
     margin-top: 0;

src/components/autoSuggest/autoSuggest.css

@@ -45,7 +45,8 @@
   pointer-events: none;
   opacity: 0.5;
   padding: 0;
-  width: 100%;
+  width: calc(30vw - 74px); /* stylelint-disable-line */
+  text-overflow: ellipsis;
 }
 
 .input {

src/components/header/header.css

@@ -15,7 +15,9 @@
 }
 
 .wrapper {
-  text-align: right;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
 
   & .noPadding {
     padding: 0px;
@@ -25,6 +27,7 @@
     display: inline-block;
     float: left;
     margin-bottom: 30px;
+    margin-right: 32px;
   }
 }
 
@@ -218,6 +221,12 @@
   .loginInfo {
     width: 100%;
     float: none;
+
+    & > div {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+    }
   }
 
   .wrapper {
@@ -233,6 +242,7 @@
     & .searchBar {
       width: 100%;
       margin-bottom: 0;
+      display: none;
     }
   }
 

src/components/header/header.js

@@ -58,8 +58,18 @@ class Header extends React.Component {
   }
 
   render() {
+    const { peers, t, showNetworkIndicator } = this.props;
     return (
       <header className={`${styles.wrapper} mainHeader`}>
+        <div>
+          <div className={`${styles.searchBar}`}>
+            {this.shouldShowSearchBar() && <SearchBar/>}
+          </div>
+          {this.props.account.loading
+                ? null
+                : <Account {...{ peers, t, showNetworkIndicator }} />}
+        </div>
+
         <div className={`${styles.loginInfo}`}>
           <div>
             <div style={{ display: 'inline-block', float: 'left' }}>
@@ -134,12 +144,6 @@ class Header extends React.Component {
             </div>
           </div>
         </div>
-        <div className={`${styles.searchBar}`}>
-          {this.shouldShowSearchBar() && <SearchBar/>}
-          {this.props.account.loading
-            ? null
-            : <Account peers={this.props.peers} t={this.props.t}/>}
-        </div>
       </header>
     );
   }

src/components/header/index.js

@@ -14,6 +14,7 @@ const mapStateToProps = state => ({
   autoLog: state.settings.autoLog,
   isAuthenticated: !!state.account.publicKey,
   peers: state.peers,
+  showNetworkIndicator: state.settings.showNetwork,
 });
 
 const mapDispatchToProps = dispatch => ({

src/components/searchBar/searchBar.css

@@ -10,11 +10,10 @@
 }
 
 .searchBar {
-  display: none;
   vertical-align: top;
   position: relative;
   width: var(--search-box-width-l);
-  margin-right: 50px;
+  margin-right: 32px;
 
   & .icon {
     position: absolute;

src/components/transactions/transactionRow.css

@@ -9,12 +9,32 @@
   --result-address-font-weight: var(--font-weight-semi-bold);
   --grid-header-line-height: 60px;
   --main-row-line-height: 70px;
+  --box-padding-right-M: 0;
+  --box-padding-right-L: 0;
+  --box-padding-right-XL: 0;
 }
 
 .header {
   color: var(--grid-header-color);
   line-height: var(--grid-header-line-height);
   font-weight: var(--font-weight-very-bold);
+
+  &:nth-child(2) {
+    text-align: left;
+  }
+}
+
+.reference {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  text-align: left;
+}
+
+.arrowRow {
+  & span {
+    margin-right: 8px;
+  }
 }
 
 .rows {
@@ -58,7 +78,7 @@
   }
 
   .rows {
-    padding: 0px var(--box-padding-left-XL);
+    padding: 0 var(--box-padding-right-XL) 0 var(--box-padding-left-XL);
   }
 }
 
@@ -68,7 +88,7 @@
   }
 
   .rows {
-    padding: 0px var(--box-padding-left-L);
+    padding: 0 var(--box-padding-right-L) 0 var(--box-padding-left-L);
   }
 }
 
@@ -78,7 +98,7 @@
   }
 
   .rows {
-    padding: 0px var(--box-padding-left-M);
+    padding: 0 var(--box-padding-right-M) 0 var(--box-padding-left-M);
 
     &:nth-of-type(even) {
       background: var(--gradient-greyscale-mobile);
@@ -88,10 +108,22 @@
       background: var(--color-grayscale-mobile-background);
     }
   }
+
+  .arrowRow {
+    text-align: right;
+
+    & span {
+      margin-right: 8px;
+    }
+  }
 }
 
 @media (--small-viewport) {
   .hiddenXs {
     display: none;
   }
+
+  .arrowRow {
+    text-align: right;
+  }
 }