Add data size to the details of a single transaction - Closes #2514

i18n/locales/en/common.json

@@ -400,6 +400,7 @@
   "Signature": "Signature",
   "Signed Message": "Signed Message",
   "Simply scan the QR code using the Lisk Mobile app or any other QR code reader": "Simply scan the QR code using the Lisk Mobile app or any other QR code reader",
+  "Size": "Size",
   "Something went wrong with the registration. Please try again below!": "Something went wrong with the registration. Please try again below!",
   "Sorry, this action isn’t possible": "Sorry, this action isn’t possible",
   "Sorry, we couldn’t find the page you were looking for. We suggest that you return to the main dashboard.": "Sorry, we couldn’t find the page you were looking for. We suggest that you return to the main dashboard.",

src/components/screens/explorer/transactions/transactionDetailView/transactionDetailView.css

@@ -17,10 +17,38 @@
   }
 }
 
+.message {
+  & .detailsWrapper {
+    flex-grow: 1;
+    width: 50%;
+    box-sizing: border-box;
+
+    &:first-child {
+      padding-right: 64px;
+      position: relative;
+
+      &::after {
+        background-color: var(--color-platinum);
+        content: '';
+        height: calc(100% - 13px);
+        position: absolute;
+        right: 0;
+        width: 1px;
+        top: 8px;
+      }
+    }
+
+    &:last-child {
+      padding-left: 64px;
+    }
+  }
+}
+
 .detailsWrapper {
   flex-direction: column;
   display: 100%;
   text-align: left;
+  flex-grow: 1;
 
   & .accountInfo {
     display: flex;
@@ -64,11 +92,10 @@
     }
   }
 
-  & .message {
+  & .value {
     @mixin contentLargest;
 
     color: var(--color-maastricht-blue);
-    text-align: left;
   }
 
   & .votesContainer {

src/components/screens/explorer/transactions/transactionDetailView/transactionDetailView.js

@@ -1,5 +1,6 @@
 import { withTranslation } from 'react-i18next';
 import React from 'react';
+import { sizeOfString } from '../../../../../utils/helpers';
 import AccountInfo from './accountInfo';
 import BoxRow from '../../../../toolbox/box/row';
 import TransactionTypeFigure from '../../../wallet/transactions/typeFigure/TransactionTypeFigure';
@@ -75,12 +76,18 @@ class TransactionDetailView extends React.Component {
         }
         {children}
         { transaction.type === transactionTypes.send
-          && (transaction.asset && transaction.asset.data) ? (
-            <BoxRow>
-              <div className={styles.detailsWrapper}>
+          ? (
+            <BoxRow className={styles.message}>
+              <div className={`${styles.detailsWrapper}`}>
                 <span className={styles.label}>{t('Message')}</span>
-                <div className={`${styles.message} tx-reference`}>
-                  {transaction.asset.data}
+                <div className={`${styles.value} tx-reference`}>
+                  {transaction.asset && transaction.asset.data ? transaction.asset.data : '-'}
+                </div>
+              </div>
+              <div className={`${styles.detailsWrapper}`}>
+                <span className={styles.label}>{t('Size')}</span>
+                <div className={`${styles.value} tx-size`}>
+                  {`${sizeOfString(transaction.asset.data)} bytes`}
                 </div>
               </div>
             </BoxRow>

src/components/screens/explorer/transactions/transactionDetailView/transactionDetailView.test.js

@@ -27,13 +27,7 @@ describe('Transaction Detail View', () => {
       expect(wrapper).toContainMatchingElements(2, '.accountInfo');
       expect(wrapper.find('.accountInfo .sender-address').text()).toBe(transaction.senderId);
       expect(wrapper.find('.accountInfo .receiver-address').text()).toBe(transaction.recipientId);
-      expect(wrapper).toContainExactlyOneMatchingElement('.message');
-    });
-
-    it('Should render transfer transaction without message', () => {
-      props.transaction.asset = {};
-      wrapper = mount(<TransactionDetailView {...props} />);
-      expect(wrapper).not.toContainMatchingElement('.message');
+      expect(wrapper).toContainExactlyOneMatchingElement('.tx-reference');
     });
   });
 

src/components/screens/register/confirmPassphrase.js

@@ -9,9 +9,6 @@ const ConfirmPassphrase = ({
   t, passphrase, prevStep, nextStep,
 }) => (
   <React.Fragment>
-    <span className={`${registerStyles.stepsLabel}`}>
-      {t('Step {{current}} / {{total}}', { current: 3, total: 4 })}
-    </span>
     <div className={`${registerStyles.titleHolder} ${grid['col-xs-10']}`}>
       <h1>
         {t('Confirm your passphrase')}

src/components/screens/wallet/send/form/formLsk.js

@@ -7,6 +7,7 @@ import FormBase from './formBase';
 import Icon from '../../../../toolbox/icon';
 import Tooltip from '../../../../toolbox/tooltip/tooltip';
 import styles from './form.css';
+import { sizeOfString } from '../../../../../utils/helpers';
 
 export default class FormLsk extends React.Component {
   constructor(props) {
@@ -33,7 +34,7 @@ export default class FormLsk extends React.Component {
 
   onReferenceChange({ target: { name, value } }) {
     const { t } = this.props;
-    const byteCount = encodeURI(value).split(/%..|./).length - 1;
+    const byteCount = sizeOfString(value);
 
     this.setState(({ fields }) => ({
       fields: {
@@ -51,7 +52,7 @@ export default class FormLsk extends React.Component {
   render() {
     const { fields } = this.state;
     const { t } = this.props;
-    const byteCount = encodeURI(fields.reference.value).split(/%..|./).length - 1;
+    const byteCount = sizeOfString(fields.reference.value);
     return (
       <FormBase
         {...this.props}

src/components/screens/wallet/transactions/request/requestLsk.js

@@ -8,6 +8,7 @@ import Icon from '../../../../toolbox/icon';
 import { validateAmountFormat } from '../../../../../utils/validators';
 import i18n from '../../../../../i18n';
 import regex from '../../../../../utils/regex';
+import { sizeOfString } from '../../../../../utils/helpers';
 
 const messageMaxLength = 64;
 
@@ -51,7 +52,7 @@ class RequestLsk extends React.Component {
   // eslint-disable-next-line max-statements
   handleFieldChange({ target }) {
     const { t } = this.props;
-    const byteCount = encodeURI(target.value).split(/%..|./).length - 1;
+    const byteCount = sizeOfString(target.value);
     const error = target.name === 'amount'
       ? validateAmountFormat({ value: target.value, locale: i18n.language }).message
       : byteCount > messageMaxLength;
@@ -115,7 +116,7 @@ class RequestLsk extends React.Component {
   render() {
     const { t } = this.props;
     const { fields, shareLink } = this.state;
-    const byteCount = encodeURI(fields.reference.value).split(/%..|./).length - 1;
+    const byteCount = sizeOfString(fields.reference.value);
 
     return (
       <RequestWrapper copyLabel={t('Copy link')} copyValue={shareLink} t={t}>

src/utils/helpers.js

@@ -73,3 +73,11 @@ export const flattenArray = arr =>
     (Array.isArray(item)
       ? [...acc, ...flattenArray(item)]
       : [...acc, item]), []).filter(item => !!item);
+
+/**
+ * Returns the size of a given string in bytes
+ *
+ * @param {string} str - a random string
+ * @returns {number} - string size in bytes
+ */
+export const sizeOfString = str => encodeURI(str).split(/%..|./).length - 1;

src/utils/helpers.test.js

@@ -3,6 +3,7 @@ import {
   removeUndefinedKeys,
   isEmpty,
   filterObjectPropsWithValue,
+  sizeOfString,
 } from './helpers';
 
 
@@ -62,4 +63,13 @@ describe('helpers', () => {
       }, 'unvotes')).toEqual(['genesis_15', 'genesis_16']);
     });
   });
+  describe('sizeOfString', () => {
+    it('should calculate the size of a string', () => {
+      expect(sizeOfString('random string')).toEqual(13);
+    });
+
+    it('should calculate the size of null', () => {
+      expect(sizeOfString()).toEqual(9);
+    });
+  });
 });