From 5a8f9033e360219dec89610a369034938be3c5e8 Mon Sep 17 00:00:00 2001 From: reyraa Date: Tue, 3 Dec 2019 17:17:10 +0100 Subject: [PATCH 01/12] Add a utility to calculate the size of data --- src/utils/helpers.js | 39 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) diff --git a/src/utils/helpers.js b/src/utils/helpers.js index ad8f4962c0..f2ab56575a 100644 --- a/src/utils/helpers.js +++ b/src/utils/helpers.js @@ -73,3 +73,42 @@ export const flattenArray = arr => (Array.isArray(item) ? [...acc, ...flattenArray(item)] : [...acc, item]), []).filter(item => !!item); + +// eslint-disable-next-line +const sizeOfObject = (object, size) => { + if (object === null) { + return 0; + } + + return Object.keys(object).reduce((bytes, key) => { + bytes += size(key); + try { + bytes += size(object[key]); + } catch (ex) { + if (ex instanceof RangeError) { + // circular reference detected, final result might be incorrect + // but we don't need to throw error + bytes = 0; + } + } + + return bytes; + }, 0); +}; + +export const sizeOf = (object) => { + const sizes = { + string: 2, + boolean: 4, + number: 8, + }; + + if (typeof object === 'string') return object.length * sizes.string; + if (typeof object === 'boolean') return sizes.boolean; + if (typeof object === 'number') return sizes.number; + if (Array.isArray(object)) { + return object.map(sizeOf).reduce((acc, curr) => acc + curr, 0); + } + if (typeof object === 'object') return sizeOfObject(object, sizeOf); + return 0; +}; From 3e6fe6f642eefce1e628b828079b9a854070d2a1 Mon Sep 17 00:00:00 2001 From: reyraa Date: Tue, 3 Dec 2019 17:17:25 +0100 Subject: [PATCH 02/12] Add size to transaction details --- i18n/locales/en/common.json | 1 + .../transactionDetailView.css | 33 ++++++++++++++++--- .../transactionDetailView.js | 13 ++++++-- 3 files changed, 40 insertions(+), 7 deletions(-) diff --git a/i18n/locales/en/common.json b/i18n/locales/en/common.json index 20e8430833..28fbdc3cf8 100644 --- a/i18n/locales/en/common.json +++ b/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.", diff --git a/src/components/screens/explorer/transactions/transactionDetailView/transactionDetailView.css b/src/components/screens/explorer/transactions/transactionDetailView/transactionDetailView.css index 2ff5cc0937..c55c837307 100644 --- a/src/components/screens/explorer/transactions/transactionDetailView/transactionDetailView.css +++ b/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,8 @@ } } - & .message { - @mixin contentLargest; - + & .value { color: var(--color-maastricht-blue); - text-align: left; } & .votesContainer { diff --git a/src/components/screens/explorer/transactions/transactionDetailView/transactionDetailView.js b/src/components/screens/explorer/transactions/transactionDetailView/transactionDetailView.js index 03bc6a384d..9699bad171 100644 --- a/src/components/screens/explorer/transactions/transactionDetailView/transactionDetailView.js +++ b/src/components/screens/explorer/transactions/transactionDetailView/transactionDetailView.js @@ -1,5 +1,6 @@ import { withTranslation } from 'react-i18next'; import React from 'react'; +import { sizeOf } from '../../../../../utils/helpers'; import AccountInfo from './accountInfo'; import BoxRow from '../../../../toolbox/box/row'; import TransactionTypeFigure from '../../../wallet/transactions/typeFigure/TransactionTypeFigure'; @@ -76,13 +77,19 @@ class TransactionDetailView extends React.Component { {children} { transaction.type === transactionTypes.send && (transaction.asset && transaction.asset.data) ? ( - -
+ +
{t('Message')} -
+
{transaction.asset.data}
+
+ {t('Size')} +
+ {`${sizeOf(transaction.asset.data)} bytes`} +
+
) : null } From 44e6365acd0f1a30470be04a9b47b219e478039d Mon Sep 17 00:00:00 2001 From: reyraa Date: Tue, 3 Dec 2019 17:17:42 +0100 Subject: [PATCH 03/12] Remove steps as it was removed by the new designs --- src/components/screens/register/confirmPassphrase.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/screens/register/confirmPassphrase.js b/src/components/screens/register/confirmPassphrase.js index 3a3dbd1506..c7153874cd 100644 --- a/src/components/screens/register/confirmPassphrase.js +++ b/src/components/screens/register/confirmPassphrase.js @@ -9,9 +9,6 @@ const ConfirmPassphrase = ({ t, passphrase, prevStep, nextStep, }) => ( - - {t('Step {{current}} / {{total}}', { current: 3, total: 4 })} -

{t('Confirm your passphrase')} From 760dcd77cb8c8a56fa4e4ba5e1aabeda8286f4ca Mon Sep 17 00:00:00 2001 From: reyraa Date: Tue, 3 Dec 2019 17:33:18 +0100 Subject: [PATCH 04/12] Add unit tests for the new helpers --- .../transactionDetailView.test.js | 4 ++-- src/utils/helpers.test.js | 21 +++++++++++++++++++ 2 files changed, 23 insertions(+), 2 deletions(-) diff --git a/src/components/screens/explorer/transactions/transactionDetailView/transactionDetailView.test.js b/src/components/screens/explorer/transactions/transactionDetailView/transactionDetailView.test.js index fb6c91a081..12bbe682d5 100644 --- a/src/components/screens/explorer/transactions/transactionDetailView/transactionDetailView.test.js +++ b/src/components/screens/explorer/transactions/transactionDetailView/transactionDetailView.test.js @@ -27,13 +27,13 @@ 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'); + expect(wrapper).toContainExactlyOneMatchingElement('.tx-reference'); }); it('Should render transfer transaction without message', () => { props.transaction.asset = {}; wrapper = mount(); - expect(wrapper).not.toContainMatchingElement('.message'); + expect(wrapper).not.toContainMatchingElement('.tx-reference'); }); }); diff --git a/src/utils/helpers.test.js b/src/utils/helpers.test.js index 1a96cf615a..fd4184fc8b 100644 --- a/src/utils/helpers.test.js +++ b/src/utils/helpers.test.js @@ -3,6 +3,7 @@ import { removeUndefinedKeys, isEmpty, filterObjectPropsWithValue, + sizeOf, } from './helpers'; @@ -62,4 +63,24 @@ describe('helpers', () => { }, 'unvotes')).toEqual(['genesis_15', 'genesis_16']); }); }); + describe('sizeOf', () => { + it('should calculate the size of a string', () => { + expect(sizeOf('random string')).toEqual(26); + }); + it('should calculate the size of a number', () => { + expect(sizeOf(1234)).toEqual(8); + }); + it('should calculate the size of a boolean', () => { + expect(sizeOf(true)).toEqual(4); + }); + it('should calculate the size of an array', () => { + expect(sizeOf([true, 'str', 123])).toEqual(18); + }); + it('should calculate the size of an object', () => { + expect(sizeOf({ a: 123 })).toEqual(10); + }); + it('should calculate the size of null', () => { + expect(sizeOf()).toEqual(0); + }); + }); }); From 516169ca0394903d6974293da91d74cef451231d Mon Sep 17 00:00:00 2001 From: reyraa Date: Fri, 6 Dec 2019 12:28:10 +0100 Subject: [PATCH 05/12] Don't disable eslint --- src/utils/helpers.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/utils/helpers.js b/src/utils/helpers.js index f2ab56575a..7bc3d24b68 100644 --- a/src/utils/helpers.js +++ b/src/utils/helpers.js @@ -74,7 +74,6 @@ export const flattenArray = arr => ? [...acc, ...flattenArray(item)] : [...acc, item]), []).filter(item => !!item); -// eslint-disable-next-line const sizeOfObject = (object, size) => { if (object === null) { return 0; From 808556c12d69aac2d3cb75f60e1c43aabc41e190 Mon Sep 17 00:00:00 2001 From: reyraa Date: Fri, 6 Dec 2019 13:10:00 +0100 Subject: [PATCH 06/12] Fix the font size of the mssage --- .../transactionDetailView/transactionDetailView.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/screens/explorer/transactions/transactionDetailView/transactionDetailView.css b/src/components/screens/explorer/transactions/transactionDetailView/transactionDetailView.css index c55c837307..ac123c9672 100644 --- a/src/components/screens/explorer/transactions/transactionDetailView/transactionDetailView.css +++ b/src/components/screens/explorer/transactions/transactionDetailView/transactionDetailView.css @@ -93,6 +93,8 @@ } & .value { + @mixin contentLargest; + color: var(--color-maastricht-blue); } From 253436ee6bcd823300702646649755b3844fa9f0 Mon Sep 17 00:00:00 2001 From: reyraa Date: Fri, 6 Dec 2019 13:11:44 +0100 Subject: [PATCH 07/12] Display the message even if it's empty --- .../transactionDetailView/transactionDetailView.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/screens/explorer/transactions/transactionDetailView/transactionDetailView.js b/src/components/screens/explorer/transactions/transactionDetailView/transactionDetailView.js index 9699bad171..946154ea87 100644 --- a/src/components/screens/explorer/transactions/transactionDetailView/transactionDetailView.js +++ b/src/components/screens/explorer/transactions/transactionDetailView/transactionDetailView.js @@ -76,12 +76,12 @@ class TransactionDetailView extends React.Component { } {children} { transaction.type === transactionTypes.send - && (transaction.asset && transaction.asset.data) ? ( + ? (
{t('Message')}
- {transaction.asset.data} + {transaction.asset && transaction.asset.data ? transaction.asset.data : '-'}
From 9dc0fd84bce4bcc3b3772ff9bf86a4b41328d84e Mon Sep 17 00:00:00 2001 From: reyraa Date: Fri, 6 Dec 2019 13:20:46 +0100 Subject: [PATCH 08/12] Remove the logic to determine the size of data styles other than string --- src/utils/helpers.js | 44 +++++++++----------------------------------- 1 file changed, 9 insertions(+), 35 deletions(-) diff --git a/src/utils/helpers.js b/src/utils/helpers.js index 7bc3d24b68..de4f0c257a 100644 --- a/src/utils/helpers.js +++ b/src/utils/helpers.js @@ -74,40 +74,14 @@ export const flattenArray = arr => ? [...acc, ...flattenArray(item)] : [...acc, item]), []).filter(item => !!item); -const sizeOfObject = (object, size) => { - if (object === null) { - return 0; - } - - return Object.keys(object).reduce((bytes, key) => { - bytes += size(key); - try { - bytes += size(object[key]); - } catch (ex) { - if (ex instanceof RangeError) { - // circular reference detected, final result might be incorrect - // but we don't need to throw error - bytes = 0; - } - } - - return bytes; - }, 0); -}; - -export const sizeOf = (object) => { - const sizes = { - string: 2, - boolean: 4, - number: 8, - }; - - if (typeof object === 'string') return object.length * sizes.string; - if (typeof object === 'boolean') return sizes.boolean; - if (typeof object === 'number') return sizes.number; - if (Array.isArray(object)) { - return object.map(sizeOf).reduce((acc, curr) => acc + curr, 0); - } - if (typeof object === 'object') return sizeOfObject(object, sizeOf); +/** + * Returns the size of a given string in bytes + * If the passed parameter is not a string, it returns 0 + * + * @param {string} str - a random string + * @returns {number} - string size for strings, 0 for others + */ +export const sizeOfString = (str) => { + if (typeof str === 'string') return str.length * 2; return 0; }; From 9284c026edeede549d804b73ebdc78189b03337d Mon Sep 17 00:00:00 2001 From: reyraa Date: Fri, 6 Dec 2019 14:13:44 +0100 Subject: [PATCH 09/12] Update usages and unit tests --- .../transactionDetailView.js | 4 ++-- src/utils/helpers.test.js | 21 +++++-------------- 2 files changed, 7 insertions(+), 18 deletions(-) diff --git a/src/components/screens/explorer/transactions/transactionDetailView/transactionDetailView.js b/src/components/screens/explorer/transactions/transactionDetailView/transactionDetailView.js index 946154ea87..419908a289 100644 --- a/src/components/screens/explorer/transactions/transactionDetailView/transactionDetailView.js +++ b/src/components/screens/explorer/transactions/transactionDetailView/transactionDetailView.js @@ -1,6 +1,6 @@ import { withTranslation } from 'react-i18next'; import React from 'react'; -import { sizeOf } from '../../../../../utils/helpers'; +import { sizeOfString } from '../../../../../utils/helpers'; import AccountInfo from './accountInfo'; import BoxRow from '../../../../toolbox/box/row'; import TransactionTypeFigure from '../../../wallet/transactions/typeFigure/TransactionTypeFigure'; @@ -87,7 +87,7 @@ class TransactionDetailView extends React.Component {
{t('Size')}
- {`${sizeOf(transaction.asset.data)} bytes`} + {`${sizeOfString(transaction.asset.data)} bytes`}
diff --git a/src/utils/helpers.test.js b/src/utils/helpers.test.js index fd4184fc8b..e2cf4f7248 100644 --- a/src/utils/helpers.test.js +++ b/src/utils/helpers.test.js @@ -3,7 +3,7 @@ import { removeUndefinedKeys, isEmpty, filterObjectPropsWithValue, - sizeOf, + sizeOfString, } from './helpers'; @@ -63,24 +63,13 @@ describe('helpers', () => { }, 'unvotes')).toEqual(['genesis_15', 'genesis_16']); }); }); - describe('sizeOf', () => { + describe('sizeOfString', () => { it('should calculate the size of a string', () => { - expect(sizeOf('random string')).toEqual(26); - }); - it('should calculate the size of a number', () => { - expect(sizeOf(1234)).toEqual(8); - }); - it('should calculate the size of a boolean', () => { - expect(sizeOf(true)).toEqual(4); - }); - it('should calculate the size of an array', () => { - expect(sizeOf([true, 'str', 123])).toEqual(18); - }); - it('should calculate the size of an object', () => { - expect(sizeOf({ a: 123 })).toEqual(10); + expect(sizeOfString('random string')).toEqual(26); }); + it('should calculate the size of null', () => { - expect(sizeOf()).toEqual(0); + expect(sizeOfString()).toEqual(0); }); }); }); From 02a219ddc124120672b5f066ccfdfa6e0639f668 Mon Sep 17 00:00:00 2001 From: reyraa Date: Fri, 6 Dec 2019 14:16:08 +0100 Subject: [PATCH 10/12] Remove the obsolete test scenario --- .../transactionDetailView/transactionDetailView.test.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/components/screens/explorer/transactions/transactionDetailView/transactionDetailView.test.js b/src/components/screens/explorer/transactions/transactionDetailView/transactionDetailView.test.js index 12bbe682d5..0a5906b46a 100644 --- a/src/components/screens/explorer/transactions/transactionDetailView/transactionDetailView.test.js +++ b/src/components/screens/explorer/transactions/transactionDetailView/transactionDetailView.test.js @@ -29,12 +29,6 @@ describe('Transaction Detail View', () => { expect(wrapper.find('.accountInfo .receiver-address').text()).toBe(transaction.recipientId); expect(wrapper).toContainExactlyOneMatchingElement('.tx-reference'); }); - - it('Should render transfer transaction without message', () => { - props.transaction.asset = {}; - wrapper = mount(); - expect(wrapper).not.toContainMatchingElement('.tx-reference'); - }); }); describe('Delegate vote transaction', () => { From cfc2d686cf75cb9c845e6421597ce785af40c948 Mon Sep 17 00:00:00 2001 From: reyraa Date: Fri, 6 Dec 2019 17:53:02 +0100 Subject: [PATCH 11/12] Correct the byte counter and reuse in Send and Request --- src/components/screens/wallet/send/form/formLsk.js | 5 +++-- .../screens/wallet/transactions/request/requestLsk.js | 5 +++-- src/utils/helpers.js | 8 ++------ 3 files changed, 8 insertions(+), 10 deletions(-) diff --git a/src/components/screens/wallet/send/form/formLsk.js b/src/components/screens/wallet/send/form/formLsk.js index 1147bbccc4..1b1f11e027 100644 --- a/src/components/screens/wallet/send/form/formLsk.js +++ b/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 ( 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 ( diff --git a/src/utils/helpers.js b/src/utils/helpers.js index de4f0c257a..081e24fc4c 100644 --- a/src/utils/helpers.js +++ b/src/utils/helpers.js @@ -76,12 +76,8 @@ export const flattenArray = arr => /** * Returns the size of a given string in bytes - * If the passed parameter is not a string, it returns 0 * * @param {string} str - a random string - * @returns {number} - string size for strings, 0 for others + * @returns {number} - string size in bytes */ -export const sizeOfString = (str) => { - if (typeof str === 'string') return str.length * 2; - return 0; -}; +export const sizeOfString = str => encodeURI(str).split(/%..|./).length - 1; From 83ca33e5139961ec8b23c55a77c89385777a7194 Mon Sep 17 00:00:00 2001 From: reyraa Date: Fri, 6 Dec 2019 17:55:06 +0100 Subject: [PATCH 12/12] Update the unit tests of sizeOfString --- src/utils/helpers.test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/utils/helpers.test.js b/src/utils/helpers.test.js index e2cf4f7248..05b9993f8e 100644 --- a/src/utils/helpers.test.js +++ b/src/utils/helpers.test.js @@ -65,11 +65,11 @@ describe('helpers', () => { }); describe('sizeOfString', () => { it('should calculate the size of a string', () => { - expect(sizeOfString('random string')).toEqual(26); + expect(sizeOfString('random string')).toEqual(13); }); it('should calculate the size of null', () => { - expect(sizeOfString()).toEqual(0); + expect(sizeOfString()).toEqual(9); }); }); });