From 4021075e057ac46e09791a3b09dc55c8f4f2fb8a Mon Sep 17 00:00:00 2001
From: Bassem <bassem.magdyy94@gmail.com>
Date: Mon, 14 Jun 2021 12:15:24 +0200
Subject: [PATCH 01/30] fix harvesting problem when activated on different
 device (#1436)

* fix #1431 #1332

* fix harvesting showing wrong status on fresh accounts
---
 .../NetworkNodeSelector/NetworkNodeSelectorTs.ts  |  2 +-
 src/store/Harvesting.ts                           | 15 +++++++++++++--
 .../FormMosaicSupplyChangeTransactionTs.ts        |  4 +++-
 .../verify-mnemonic/VerifyMnemonic.vue            |  7 +++++++
 4 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/components/NetworkNodeSelector/NetworkNodeSelectorTs.ts b/src/components/NetworkNodeSelector/NetworkNodeSelectorTs.ts
index a109beccd..a7cedec65 100644
--- a/src/components/NetworkNodeSelector/NetworkNodeSelectorTs.ts
+++ b/src/components/NetworkNodeSelector/NetworkNodeSelectorTs.ts
@@ -117,7 +117,7 @@ export class NetworkNodeSelectorTs extends Vue {
                 Vue.set(this, 'showInputPublicKey', false);
                 this.$emit('input', nodeModel);
                 if (this.isAccountKeyLinked && this.isVrfKeyLinked && this.missingKeys) {
-                    this.$store.dispatch('harvesting/FETCH_STATUS', value);
+                    this.$store.dispatch('harvesting/FETCH_STATUS', [value, nodeModel]);
                 }
             } else {
                 Vue.set(this, 'showInputPublicKey', true);
diff --git a/src/store/Harvesting.ts b/src/store/Harvesting.ts
index 83912dc73..da18266fc 100644
--- a/src/store/Harvesting.ts
+++ b/src/store/Harvesting.ts
@@ -147,11 +147,12 @@ export default {
         SET_POLLING_TRIALS({ commit }, pollingTrials) {
             commit('setPollingTrials', pollingTrials);
         },
-        async FETCH_STATUS({ commit, rootGetters }, nodeUrl?: string) {
+        async FETCH_STATUS({ commit, rootGetters, dispatch }, node?: []) {
             const currentSignerAccountInfo: AccountInfo = rootGetters['account/currentSignerAccountInfo'];
             // reset
             let status: HarvestingStatus;
             if (!currentSignerAccountInfo) {
+                commit('status', HarvestingStatus.INACTIVE);
                 return;
             }
             const currentSignerHarvestingModel: HarvestingModel = rootGetters['harvesting/currentSignerHarvestingModel'];
@@ -160,7 +161,8 @@ export default {
             if (currentSignerHarvestingModel) {
                 //find the node url from currentSignerHarvestingModel (localStorage)
                 const selectedNode = currentSignerHarvestingModel.selectedHarvestingNode;
-                const harvestingNodeUrl = selectedNode?.url || nodeUrl;
+                // @ts-ignore
+                const harvestingNodeUrl = selectedNode?.url || (node && !!node.length ? node[0] : '');
                 let unlockedAccounts: string[] = [];
 
                 if (harvestingNodeUrl) {
@@ -188,6 +190,15 @@ export default {
                         ? HarvestingStatus.FAILED
                         : HarvestingStatus.INPROGRESS_ACTIVATION
                     : HarvestingStatus.KEYS_LINKED;
+                // @ts-ignore
+                if (status === HarvestingStatus.ACTIVE && node && node[1]) {
+                    // @ts-ignore
+                    dispatch('UPDATE_ACCOUNT_SELECTED_HARVESTING_NODE', {
+                        accountAddress: currentSignerHarvestingModel.accountAddress,
+                        // @ts-ignore
+                        selectedHarvestingNode: node[1],
+                    });
+                }
             } else {
                 status = accountUnlocked ? HarvestingStatus.INPROGRESS_DEACTIVATION : HarvestingStatus.INACTIVE;
             }
diff --git a/src/views/forms/FormMosaicSupplyChangeTransaction/FormMosaicSupplyChangeTransactionTs.ts b/src/views/forms/FormMosaicSupplyChangeTransaction/FormMosaicSupplyChangeTransactionTs.ts
index 349a18635..a83a158b2 100644
--- a/src/views/forms/FormMosaicSupplyChangeTransaction/FormMosaicSupplyChangeTransactionTs.ts
+++ b/src/views/forms/FormMosaicSupplyChangeTransaction/FormMosaicSupplyChangeTransactionTs.ts
@@ -245,7 +245,9 @@ export class FormMosaicSupplyChangeTransactionTs extends FormTransactionBase {
     }
 
     get ownedTargetHexIds(): string[] {
-        return this.holdMosaics.filter((m) => m.ownerRawPlain === this.currentAccount.address).map(({ mosaicIdHex }) => mosaicIdHex);
+        return this.holdMosaics
+            .filter((m) => m.ownerRawPlain === this.currentAccount.address && m.supplyMutable)
+            .map(({ mosaicIdHex }) => mosaicIdHex);
     }
 
     public emitToAggregate() {
diff --git a/src/views/pages/profiles/create-profile/verify-mnemonic/VerifyMnemonic.vue b/src/views/pages/profiles/create-profile/verify-mnemonic/VerifyMnemonic.vue
index e0f6a1783..e71f946d7 100644
--- a/src/views/pages/profiles/create-profile/verify-mnemonic/VerifyMnemonic.vue
+++ b/src/views/pages/profiles/create-profile/verify-mnemonic/VerifyMnemonic.vue
@@ -1,5 +1,12 @@
 <template>
     <div class="check-mnemonic-sec">
+        <div
+            v-if="currentProfile.networkType === networkType.TEST_NET"
+            class="skip pointer"
+            @click="$router.push({ name: 'profiles.createProfile.finalize' })"
+        >
+            {{ $t('skip') }}
+        </div>
         <p class="set-title-create">
             {{ $t('verify_mnemonics') }}
         </p>

From 29ec0afeabd2ddfcb467d801303de8b92b67042e Mon Sep 17 00:00:00 2001
From: Bassem <bassem.magdyy94@gmail.com>
Date: Mon, 14 Jun 2021 14:09:21 +0200
Subject: [PATCH 02/30] Revert "fix harvesting problem when activated on
 different device (#1436)" (#1527)

This reverts commit 4021075e057ac46e09791a3b09dc55c8f4f2fb8a.
---
 .../NetworkNodeSelector/NetworkNodeSelectorTs.ts  |  2 +-
 src/store/Harvesting.ts                           | 15 ++-------------
 .../FormMosaicSupplyChangeTransactionTs.ts        |  4 +---
 .../verify-mnemonic/VerifyMnemonic.vue            |  7 -------
 4 files changed, 4 insertions(+), 24 deletions(-)

diff --git a/src/components/NetworkNodeSelector/NetworkNodeSelectorTs.ts b/src/components/NetworkNodeSelector/NetworkNodeSelectorTs.ts
index a7cedec65..a109beccd 100644
--- a/src/components/NetworkNodeSelector/NetworkNodeSelectorTs.ts
+++ b/src/components/NetworkNodeSelector/NetworkNodeSelectorTs.ts
@@ -117,7 +117,7 @@ export class NetworkNodeSelectorTs extends Vue {
                 Vue.set(this, 'showInputPublicKey', false);
                 this.$emit('input', nodeModel);
                 if (this.isAccountKeyLinked && this.isVrfKeyLinked && this.missingKeys) {
-                    this.$store.dispatch('harvesting/FETCH_STATUS', [value, nodeModel]);
+                    this.$store.dispatch('harvesting/FETCH_STATUS', value);
                 }
             } else {
                 Vue.set(this, 'showInputPublicKey', true);
diff --git a/src/store/Harvesting.ts b/src/store/Harvesting.ts
index da18266fc..83912dc73 100644
--- a/src/store/Harvesting.ts
+++ b/src/store/Harvesting.ts
@@ -147,12 +147,11 @@ export default {
         SET_POLLING_TRIALS({ commit }, pollingTrials) {
             commit('setPollingTrials', pollingTrials);
         },
-        async FETCH_STATUS({ commit, rootGetters, dispatch }, node?: []) {
+        async FETCH_STATUS({ commit, rootGetters }, nodeUrl?: string) {
             const currentSignerAccountInfo: AccountInfo = rootGetters['account/currentSignerAccountInfo'];
             // reset
             let status: HarvestingStatus;
             if (!currentSignerAccountInfo) {
-                commit('status', HarvestingStatus.INACTIVE);
                 return;
             }
             const currentSignerHarvestingModel: HarvestingModel = rootGetters['harvesting/currentSignerHarvestingModel'];
@@ -161,8 +160,7 @@ export default {
             if (currentSignerHarvestingModel) {
                 //find the node url from currentSignerHarvestingModel (localStorage)
                 const selectedNode = currentSignerHarvestingModel.selectedHarvestingNode;
-                // @ts-ignore
-                const harvestingNodeUrl = selectedNode?.url || (node && !!node.length ? node[0] : '');
+                const harvestingNodeUrl = selectedNode?.url || nodeUrl;
                 let unlockedAccounts: string[] = [];
 
                 if (harvestingNodeUrl) {
@@ -190,15 +188,6 @@ export default {
                         ? HarvestingStatus.FAILED
                         : HarvestingStatus.INPROGRESS_ACTIVATION
                     : HarvestingStatus.KEYS_LINKED;
-                // @ts-ignore
-                if (status === HarvestingStatus.ACTIVE && node && node[1]) {
-                    // @ts-ignore
-                    dispatch('UPDATE_ACCOUNT_SELECTED_HARVESTING_NODE', {
-                        accountAddress: currentSignerHarvestingModel.accountAddress,
-                        // @ts-ignore
-                        selectedHarvestingNode: node[1],
-                    });
-                }
             } else {
                 status = accountUnlocked ? HarvestingStatus.INPROGRESS_DEACTIVATION : HarvestingStatus.INACTIVE;
             }
diff --git a/src/views/forms/FormMosaicSupplyChangeTransaction/FormMosaicSupplyChangeTransactionTs.ts b/src/views/forms/FormMosaicSupplyChangeTransaction/FormMosaicSupplyChangeTransactionTs.ts
index a83a158b2..349a18635 100644
--- a/src/views/forms/FormMosaicSupplyChangeTransaction/FormMosaicSupplyChangeTransactionTs.ts
+++ b/src/views/forms/FormMosaicSupplyChangeTransaction/FormMosaicSupplyChangeTransactionTs.ts
@@ -245,9 +245,7 @@ export class FormMosaicSupplyChangeTransactionTs extends FormTransactionBase {
     }
 
     get ownedTargetHexIds(): string[] {
-        return this.holdMosaics
-            .filter((m) => m.ownerRawPlain === this.currentAccount.address && m.supplyMutable)
-            .map(({ mosaicIdHex }) => mosaicIdHex);
+        return this.holdMosaics.filter((m) => m.ownerRawPlain === this.currentAccount.address).map(({ mosaicIdHex }) => mosaicIdHex);
     }
 
     public emitToAggregate() {
diff --git a/src/views/pages/profiles/create-profile/verify-mnemonic/VerifyMnemonic.vue b/src/views/pages/profiles/create-profile/verify-mnemonic/VerifyMnemonic.vue
index e71f946d7..e0f6a1783 100644
--- a/src/views/pages/profiles/create-profile/verify-mnemonic/VerifyMnemonic.vue
+++ b/src/views/pages/profiles/create-profile/verify-mnemonic/VerifyMnemonic.vue
@@ -1,12 +1,5 @@
 <template>
     <div class="check-mnemonic-sec">
-        <div
-            v-if="currentProfile.networkType === networkType.TEST_NET"
-            class="skip pointer"
-            @click="$router.push({ name: 'profiles.createProfile.finalize' })"
-        >
-            {{ $t('skip') }}
-        </div>
         <p class="set-title-create">
             {{ $t('verify_mnemonics') }}
         </p>

From c56910d988e4ddbdd8c942b174aa8438e3434431 Mon Sep 17 00:00:00 2001
From: Bassem <bassem.magdyy94@gmail.com>
Date: Fri, 18 Jun 2021 13:09:53 +0200
Subject: [PATCH 03/30] Merge main changes (#1545)

* Improve transaction previews (#1505)

* improve transactiondashboard preview #1190

* Update src/language/en-US.json

Co-authored-by: Xavi Artigas <xavierartigas@yahoo.es>

* update mosaic list tooltip

Co-authored-by: Steven Liu <xian.f.liu@gmail.com>
Co-authored-by: Xavi Artigas <xavierartigas@yahoo.es>

* Revert "Improve transaction previews (#1505)" (#1539)

This reverts commit 670fcada90ad27b6cefaeb5775d4db1f7a5e0ac4.

Co-authored-by: Steven Liu <xian.f.liu@gmail.com>
Co-authored-by: Xavi Artigas <xavierartigas@yahoo.es>

From 38a759103cabd94f73af3667f2e2979082358c75 Mon Sep 17 00:00:00 2001
From: Bassem <bassem.magdyy94@gmail.com>
Date: Fri, 18 Jun 2021 14:02:27 +0200
Subject: [PATCH 04/30] Sprint 1 fixes (#1542)

* fix scrolling on aggregate tx page (#1352)

* fix: balance aligment UI issue. (#1521)

* checks if bonded is signed in transactions history list  (#1522)

* checks if bonded is signed in transactions history list #1488

* Update src/language/zh-CN.json

Co-authored-by: Anthony Law <yc-law1015@hotmail.com>

* refactor needsCosignature check to async

Co-authored-by: Anthony Law <yc-law1015@hotmail.com>

* bugfix/Scanning a qr with no mosaics breaks the wallet (#1518)

* fix Scanning a QR Code for a Transfer Transaction without Mosaics breaks the Wallet #1503

* fix fees list consistency

* fix mosaic amount sometimes not shown while importing mnemonic (#1517)

* fix #1514

* add loader on fetching accounts balances

* remove setTimeout

* enhance profile creation phrasing (#1512)

* Rephrased profile creation

* fix #930

Co-authored-by: olegliallin <olegliallin@gmail.com>

* fix wrong expired message for mosaics with 0 balance #1468 (#1511)

* fix setting popup styles (#1509)

* fix setting popup styles #1448

* fix redundant scrollbar

* fix fees not always displayed

* fix scrollbar issue

* update settings modal

* Gh1431 harvesting fix (#1528)

* fix #1431 #1332

* fix harvesting showing wrong status on fresh accounts

* fix #1264 (#1480)

* fix error message while creating new profile on ledger (#1508)

* fix error message while creating new profile on ledger #1483

* remove logs

* fix icons inconsistency (#1507)

* fix iconsconsistency #1446

* update multisigForm add button styles

* fix button style

* fix #1445

* fix #1472 (#1506)

* Fix harvesting tabs alignment  (#1500)

* sort fees selector options #1430

* fix tab alignments in harvesting page #1441

* fixes #1491

* update fees selector

* fix amount field bug while importing transaction from a qr-code (#1485)

* fix #1459 (#1460)

* fix date not showing properly for aggregate transactions #1459

* fix transfer transaction date diplay

* update hashlock date representation

* Fix log in/log out spelling (#1450)

"Log in/out" is a verb, whereas "login/logout" are nouns.

* fix #1076 #1416 (#1449)

* fix #1076 #1416

* Update src/language/en-US.json

Co-authored-by: Xavi Artigas <xavierartigas@yahoo.es>

* update settings modal to select networkTab when opened from node selector

Co-authored-by: Xavi Artigas <xavierartigas@yahoo.es>

* fix #873 (#1458)

* fix #873

* update namespaceTableService

* fix expiry checkbox

* fix validation for namespace name #1376 (#1452)

* fix validation for namespace name #1376

* Update src/language/en-US.json

Co-authored-by: Xavi Artigas <xavierartigas@yahoo.es>

* Update src/language/en-US.json

Co-authored-by: Xavi Artigas <xavierartigas@yahoo.es>

* add comment to update regex when rest is fixed

Co-authored-by: Xavi Artigas <xavierartigas@yahoo.es>

* fix: namespace expired logic error. (#1525)

* display delegate harvesting message properly (#1513)

* fix connected nodes doesn't show up in node selector harvesting (#1502)

* fix connected nodes doesn't show up in node selector harvesting #1106

* update peerNodes

* fix un-signed transactions disappear after signing another partial #1487 (#1499)

* fix the unablity to add node when all default nodes offline #1236 (#1489)

* fix #1432 (#1439)

* fix Harvesting when importing harvesting private key from node operator #1432

* fix #1432

* Update NetworkNodeSelectorTs.ts

* fix translation in login page

* Gh1090 improve transaction previews (#1540)

* improve transactiondashboard preview #1190

* Update src/language/en-US.json

Co-authored-by: Xavi Artigas <xavierartigas@yahoo.es>

* update mosaic list tooltip

Co-authored-by: Xavi Artigas <xavierartigas@yahoo.es>

* Revert "Gh1090 improve transaction previews (#1540)" (#1543)

This reverts commit 12a0d3d6ad536d98ff53fc80f12801c6482f4697.

* fix #1432

Co-authored-by: myxmaster <77545287+myxmaster@users.noreply.github.com>
Co-authored-by: Anthony Law <yc-law1015@hotmail.com>
Co-authored-by: olegliallin <olegliallin@gmail.com>
Co-authored-by: Xavi Artigas <xavierartigas@yahoo.es>
---
 package-lock.json                             |  12 +-
 src/components/AccountLinks/AccountLinks.less |   1 +
 .../AccountRestrictionsListTs.ts              |   2 +-
 .../ActionDisplay/ActionDisplay.vue           |   2 +-
 .../ActionDisplay/ActionDisplayTs.ts          |  14 +-
 .../AddCosignatoryInput.vue                   |   2 +-
 .../ButtonRefresh/ButtonRefresh.vue           |   2 +-
 .../ButtonRefresh/ButtonRefreshTs.ts          |   6 +-
 .../CosignatoryModificationsDisplayTs.ts      |   5 +-
 .../MaxFeeSelector/MaxFeeSelector.vue         |   3 -
 .../MaxFeeSelector/MaxFeeSelectorTs.ts        |  31 ++--
 .../MosaicAttachmentInputTs.ts                |   1 +
 .../MultisigCosignatoriesDisplay.vue          |   2 +-
 .../MultisigCosignatoriesDisplayTs.ts         |   3 +
 .../NavigationLinks/NavigationLinks.less      |   7 +-
 .../NetworkNodeSelectorTs.ts                  |  23 +--
 .../NetworkStatisticsPanelTs.ts               |  16 +-
 src/components/PeerSelector/PeerSelector.vue  |  12 +-
 src/components/PeerSelector/PeerSelectorTs.ts |   1 +
 .../ProtectedPrivateKeyDisplay.vue            |  14 +-
 .../QRCode/ImportQRButton/ImportQRButton.less |   1 +
 .../TransactionQRAction.vue                   |   6 +-
 .../TransactionQRActionTs.ts                  |  25 ++-
 .../QRCode/UploadQRCode/UploadQRCodeTs.ts     |  17 +-
 src/components/Settings/Settings.vue          |   7 +-
 src/components/Settings/SettingsTs.ts         |   3 +
 src/components/TableDisplay/TableDisplay.vue  |   4 +-
 src/components/TableDisplay/TableDisplayTs.ts |   2 +-
 src/components/TableRow/TableRow.less         |   4 -
 .../TransactionRow/TransactionRow.vue         |   3 +
 .../TransactionRow/TransactionRowTs.ts        | 152 +++++++++++++++++-
 src/config/FeesConfig.ts                      |   8 +-
 .../transactions/TransactionViewFactory.ts    |  10 +-
 .../transactions/ViewHarvestingTransaction.ts |  36 +++++
 .../transactions/ViewTransferTransaction.ts   |   6 +-
 src/core/validation/ValidationRuleset.ts      |   3 +-
 src/language/en-US.json                       |  24 +--
 src/language/ja-JP.json                       |   8 +-
 src/language/zh-CN.json                       |   8 +-
 .../NamespaceTableService.ts                  |   7 +-
 src/services/NamespaceService.ts              |   4 +-
 src/store/Harvesting.ts                       |  17 +-
 src/store/Namespace.ts                        |   2 +-
 src/store/Network.ts                          |  18 +--
 src/store/Profile.ts                          |   6 +
 src/store/Statistics.ts                       |  20 ++-
 src/store/Transaction.ts                      |   6 +-
 .../FormAggregateTransaction.less             |   1 +
 .../FormMosaicSupplyChangeTransaction.vue     |   3 +
 .../FormMosaicSupplyChangeTransactionTs.ts    |   4 +-
 ...ultisigAccountModificationTransactionTs.ts |   3 +-
 ...ersistentDelegationRequestTransaction.less |   1 -
 ...ersistentDelegationRequestTransactionTs.ts |   3 +-
 .../FormProfileCreationTs.ts                  |   1 +
 .../FormTransferTransactionTs.ts              |   3 +-
 src/views/layout/PageLayout/PageLayout.less   |   4 +-
 src/views/layout/PageLayout/PageLayout.vue    |   2 +-
 .../modals/ModalSettings/ModalSettings.less   |  12 +-
 .../modals/ModalSettings/ModalSettingsTs.ts   |   4 +
 src/views/pages/accounts/Accounts.vue         |   2 +-
 src/views/pages/profiles/LoginPage.vue        |   2 +-
 .../account-selection/AccountSelection.vue    |   9 +-
 .../verify-mnemonic/VerifyMnemonic.vue        |   7 +
 .../account-selection/AccountSelection.vue    |   9 +-
 .../account-selection/AccountSelectionTs.ts   | 111 +++++++------
 .../import-strategy/ImportStrategyTs.ts       |   8 +-
 66 files changed, 559 insertions(+), 196 deletions(-)
 create mode 100644 src/core/transactions/ViewHarvestingTransaction.ts

diff --git a/package-lock.json b/package-lock.json
index f9d9a6a17..20c7f91f9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2781,9 +2781,9 @@
                     }
                 },
                 "chalk": {
-                    "version": "4.1.0",
-                    "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
-                    "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+                    "version": "4.1.1",
+                    "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
+                    "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
                     "dev": true,
                     "optional": true,
                     "requires": {
@@ -3130,9 +3130,9 @@
                     }
                 },
                 "chalk": {
-                    "version": "4.1.0",
-                    "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
-                    "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+                    "version": "4.1.1",
+                    "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
+                    "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
                     "dev": true,
                     "optional": true,
                     "requires": {
diff --git a/src/components/AccountLinks/AccountLinks.less b/src/components/AccountLinks/AccountLinks.less
index c57800d7e..04574a4e5 100644
--- a/src/components/AccountLinks/AccountLinks.less
+++ b/src/components/AccountLinks/AccountLinks.less
@@ -28,6 +28,7 @@
     color: @purpleDark;
     display: flex;
     align-items: center;
+    z-index: 11;
 }
 
 .navbar-icon {
diff --git a/src/components/AccountRestrictionsList/AccountRestrictionsListTs.ts b/src/components/AccountRestrictionsList/AccountRestrictionsListTs.ts
index 8544ae6f5..8a1ae94ab 100644
--- a/src/components/AccountRestrictionsList/AccountRestrictionsListTs.ts
+++ b/src/components/AccountRestrictionsList/AccountRestrictionsListTs.ts
@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and limitations under the License.
  *
  */
-// external dependencies
 // @ts-ignore
 import ButtonAdd from '@/components/ButtonAdd/ButtonAdd';
 // @ts-ignore
@@ -42,6 +41,7 @@ import ModalFormWrap from '@/views/modals/ModalFormWrap/ModalFormWrap.vue';
 import ModalMetadataDisplay from '@/views/modals/ModalMetadataDisplay/ModalMetadataDisplay.vue';
 // @ts-ignore
 import ModalMetadataUpdate from '@/views/modals/ModalMetadataUpdate/ModalMetadataUpdate.vue';
+// external dependencies
 import { Address } from 'symbol-sdk';
 import { Component, Prop, Watch } from 'vue-property-decorator';
 import { mapGetters } from 'vuex';
diff --git a/src/components/ActionDisplay/ActionDisplay.vue b/src/components/ActionDisplay/ActionDisplay.vue
index 6c5d6d6bc..3b9d510fc 100644
--- a/src/components/ActionDisplay/ActionDisplay.vue
+++ b/src/components/ActionDisplay/ActionDisplay.vue
@@ -10,7 +10,7 @@
             />
         </div>
         <div class="bottom overflow_ellipsis">
-            <span>{{ $t(`transaction_descriptor_${transaction.type}${isOptinPayoutTransaction ? '_optin' : ''}`) }}</span>
+            <span>{{ getTransactionType() }}</span>
             <span v-if="needsCosignature" class="click-to-cosign">({{ $t('click_to_cosign') }})</span>
         </div>
     </div>
diff --git a/src/components/ActionDisplay/ActionDisplayTs.ts b/src/components/ActionDisplay/ActionDisplayTs.ts
index cf122c839..0f17eba2f 100644
--- a/src/components/ActionDisplay/ActionDisplayTs.ts
+++ b/src/components/ActionDisplay/ActionDisplayTs.ts
@@ -14,10 +14,11 @@
  *
  */
 import { Component, Prop, Vue } from 'vue-property-decorator';
-import { Address, Transaction, TransactionType } from 'symbol-sdk';
+import { Address, PersistentHarvestingDelegationMessage, Transaction, TransactionType, TransferTransaction } from 'symbol-sdk';
 // @ts-ignore
 import AddressDisplay from '@/components/AddressDisplay/AddressDisplay.vue';
 import { mapGetters } from 'vuex';
+import i18n from '@/language';
 
 @Component({
     components: {
@@ -60,4 +61,15 @@ export class ActionDisplayTs extends Vue {
      * @type {boolean}
      */
     protected needsCosignature: boolean = false;
+
+    /**
+     * Returns transaction type label
+     */
+    protected getTransactionType() {
+        if (this.transaction instanceof TransferTransaction && this.transaction.message instanceof PersistentHarvestingDelegationMessage) {
+            return i18n.t('transaction_descriptor_harvesting');
+        }
+
+        return i18n.t(`transaction_descriptor_${this.transaction.type}${this.isOptinPayoutTransaction ? '_optin' : ''}`);
+    }
 }
diff --git a/src/components/AddCosignatoryInput/AddCosignatoryInput.vue b/src/components/AddCosignatoryInput/AddCosignatoryInput.vue
index f7813d660..f7add6997 100644
--- a/src/components/AddCosignatoryInput/AddCosignatoryInput.vue
+++ b/src/components/AddCosignatoryInput/AddCosignatoryInput.vue
@@ -21,7 +21,7 @@
                             />
                         </ErrorTooltip>
                     </div>
-                    <ButtonAdd class="button-add align-right" @click="handleSubmit(onAddCosignatory())" />
+                    <ButtonAdd class="button-add align-right" :size="24" @click="handleSubmit(onAddCosignatory())" />
                 </ValidationProvider>
             </ValidationObserver>
         </template>
diff --git a/src/components/ButtonRefresh/ButtonRefresh.vue b/src/components/ButtonRefresh/ButtonRefresh.vue
index 110febbc8..2861e1f00 100644
--- a/src/components/ButtonRefresh/ButtonRefresh.vue
+++ b/src/components/ButtonRefresh/ButtonRefresh.vue
@@ -1,6 +1,6 @@
 <template>
     <Tooltip :content="$t('refresh')" placement="top" :transfer="true">
-        <Icon type="md-refresh" class="button-refresh" @click="$emit('click')" />
+        <Icon type="md-refresh" class="button-refresh" size="size" @click="$emit('click')" />
     </Tooltip>
 </template>
 <script lang="ts">
diff --git a/src/components/ButtonRefresh/ButtonRefreshTs.ts b/src/components/ButtonRefresh/ButtonRefreshTs.ts
index ef0404db9..448215992 100644
--- a/src/components/ButtonRefresh/ButtonRefreshTs.ts
+++ b/src/components/ButtonRefresh/ButtonRefreshTs.ts
@@ -1,3 +1,5 @@
-import { Vue, Component } from 'vue-property-decorator';
+import { Vue, Component, Prop } from 'vue-property-decorator';
 @Component
-export class ButtonRefreshTs extends Vue {}
+export class ButtonRefreshTs extends Vue {
+    @Prop({ default: undefined }) size: string;
+}
diff --git a/src/components/CosignatoryModificationsDisplay/CosignatoryModificationsDisplayTs.ts b/src/components/CosignatoryModificationsDisplay/CosignatoryModificationsDisplayTs.ts
index 866aee442..351b192fc 100644
--- a/src/components/CosignatoryModificationsDisplay/CosignatoryModificationsDisplayTs.ts
+++ b/src/components/CosignatoryModificationsDisplay/CosignatoryModificationsDisplayTs.ts
@@ -17,15 +17,16 @@
 import { Component, Vue, Prop } from 'vue-property-decorator';
 import { mapGetters } from 'vuex';
 import { NetworkType } from 'symbol-sdk';
+import { ValidationProvider } from 'vee-validate';
 
 // child components
-import { ValidationProvider } from 'vee-validate';
 // @ts-ignore
 import FormRow from '@/components/FormRow/FormRow.vue';
 
 // @ts-ignore
 import ErrorTooltip from '@/components/ErrorTooltip/ErrorTooltip.vue';
-import { CosignatoryModifications } from '@/views/forms/FormMultisigAccountModificationTransaction/FormMultisigAccountModificationTransactionTs';
+// @ts-ignore
+import CosignatoryModifications from '@/views/forms/FormMultisigAccountModificationTransaction/FormMultisigAccountModificationTransactionTs';
 
 @Component({
     components: {
diff --git a/src/components/MaxFeeSelector/MaxFeeSelector.vue b/src/components/MaxFeeSelector/MaxFeeSelector.vue
index 7adb93316..a5631a8c1 100644
--- a/src/components/MaxFeeSelector/MaxFeeSelector.vue
+++ b/src/components/MaxFeeSelector/MaxFeeSelector.vue
@@ -23,9 +23,6 @@
             <Icon type="ios-warning-outline" />
             {{ $t('low_fee_warning_message') }}
         </span>
-        <span v-else-if="transactionFees.minFeeMultiplier && !displayOnly" style="color: #ff9600;">
-            {{ $t('minimal_fee_transaction') + transactionFees.minFeeMultiplier.toString() }}
-        </span>
     </div>
 </template>
 
diff --git a/src/components/MaxFeeSelector/MaxFeeSelectorTs.ts b/src/components/MaxFeeSelector/MaxFeeSelectorTs.ts
index bae32ce32..b0ce856d5 100644
--- a/src/components/MaxFeeSelector/MaxFeeSelectorTs.ts
+++ b/src/components/MaxFeeSelector/MaxFeeSelectorTs.ts
@@ -49,6 +49,15 @@ export class MaxFeeSelectorTs extends Vue {
     @Prop({ default: false })
     public displayOnly!: boolean;
 
+    /**
+     * Value set by the parent component's v-model
+     * @type {number}
+     */
+    @Prop({
+        default: 10,
+    })
+    value: number;
+
     public placement: string;
 
     /**
@@ -57,10 +66,11 @@ export class MaxFeeSelectorTs extends Vue {
      */
     private networkMosaicName: string;
     private feesConfig: {
+        fast: number;
+        median: number;
         slow: number;
         slowest: number;
-        median: number;
-        fast: number;
+        free: number;
     };
 
     /**
@@ -104,6 +114,9 @@ export class MaxFeeSelectorTs extends Vue {
     multiplier: number;
 
     public created() {
+        if (!this.feesConfig) {
+            this.$store.dispatch('network/LOAD_TRANSACTION_FEES');
+        }
         this.fees = Object.entries(this.feesConfig).map((entry) => ({
             label: this.getLabel([entry[0], entry[1] as number]),
             maxFee: entry[1] as number,
@@ -145,22 +158,13 @@ export class MaxFeeSelectorTs extends Vue {
         return label;
     }
 
-    /**
-     * Value set by the parent component's v-model
-     * @type {number}
-     */
-    @Prop({
-        default: 10,
-    })
-    value: number;
-
     /// region computed properties getter/setter
     /**
      * Value set by the parent component
      * @type {number}
      */
     get chosenMaxFee(): number {
-        return typeof this.value === 'number' ? this.value : this.defaultFee;
+        return typeof this.value === 'number' ? this.value : typeof this.value === 'string' ? Number(this.value) : this.defaultFee;
     }
 
     /**
@@ -220,7 +224,6 @@ export class MaxFeeSelectorTs extends Vue {
                     return i;
                 }
             })
-            .slice()
-            .sort((a, b) => a.calculatedFee - b.calculatedFee);
+            .slice();
     }
 }
diff --git a/src/components/MosaicAttachmentInput/MosaicAttachmentInputTs.ts b/src/components/MosaicAttachmentInput/MosaicAttachmentInputTs.ts
index a92a10c61..9975b51d2 100644
--- a/src/components/MosaicAttachmentInput/MosaicAttachmentInputTs.ts
+++ b/src/components/MosaicAttachmentInput/MosaicAttachmentInputTs.ts
@@ -78,6 +78,7 @@ export class MosaicAttachmentInputTs extends Vue {
      * @type {{mosaicHex: string, amount: number}}
      */
     protected get chosenValue(): { mosaicHex: string; amount: string } {
+        this.mosaicAttachment.amount = this.mosaicAttachment.amount.replace(',', '');
         return this.mosaicAttachment;
     }
 
diff --git a/src/components/MultisigCosignatoriesDisplay/MultisigCosignatoriesDisplay.vue b/src/components/MultisigCosignatoriesDisplay/MultisigCosignatoriesDisplay.vue
index c6356b0fe..94831f8ef 100644
--- a/src/components/MultisigCosignatoriesDisplay/MultisigCosignatoriesDisplay.vue
+++ b/src/components/MultisigCosignatoriesDisplay/MultisigCosignatoriesDisplay.vue
@@ -96,7 +96,7 @@
 
             <AddCosignatoryInput v-if="isAddingCosignatory" @added="onAddCosignatory" />
             <div v-if="!isAddingCosignatory" class="row-cosignatory-modification-display inputs-container link mx-1">
-                <img src="@/views/resources/img/newicons/Add.svg" class="icon-left-button clickable" @click="isAddingCosignatory = true" />
+                <ButtonAdd class="clickable" :size="24" @click="isAddingCosignatory = true" />
                 <a href="#" style="color: #5200c6;" @click="isAddingCosignatory = true">{{ $t('form_label_add_cosignatory') }}</a>
             </div>
         </div>
diff --git a/src/components/MultisigCosignatoriesDisplay/MultisigCosignatoriesDisplayTs.ts b/src/components/MultisigCosignatoriesDisplay/MultisigCosignatoriesDisplayTs.ts
index 1554ab2b7..a9b1ff3ca 100644
--- a/src/components/MultisigCosignatoriesDisplay/MultisigCosignatoriesDisplayTs.ts
+++ b/src/components/MultisigCosignatoriesDisplay/MultisigCosignatoriesDisplayTs.ts
@@ -22,6 +22,8 @@ import { MultisigAccountInfo, Address } from 'symbol-sdk';
 import FormRow from '@/components/FormRow/FormRow.vue';
 // @ts-ignore
 import AddCosignatoryInput from '@/components/AddCosignatoryInput/AddCosignatoryInput.vue';
+// @ts-ignore
+import ButtonAdd from '@/components/ButtonAdd/ButtonAdd';
 
 // custom types
 type AddOrRemove = 'add' | 'remove';
@@ -37,6 +39,7 @@ type Cosignatories = { address: Address }[];
     components: {
         FormRow,
         AddCosignatoryInput,
+        ButtonAdd,
     },
 })
 export class MultisigCosignatoriesDisplayTs extends Vue {
diff --git a/src/components/NavigationLinks/NavigationLinks.less b/src/components/NavigationLinks/NavigationLinks.less
index 5306f63c5..61ed75a10 100644
--- a/src/components/NavigationLinks/NavigationLinks.less
+++ b/src/components/NavigationLinks/NavigationLinks.less
@@ -22,6 +22,7 @@
         }
         &.active-item {
             background-color: #f3f4f8;
+            border-right: 0.3em #ff00ff solid;
         }
     }
 }
@@ -32,8 +33,10 @@
     grid-auto-flow: column;
     justify-items: start;
     justify-content: start;
-    background-color: transparent;
-
+    position: sticky;
+    top: 0;
+    background-color: white;
+    z-index: 1;
     .empty {
         display: flex;
         height: 100%;
diff --git a/src/components/NetworkNodeSelector/NetworkNodeSelectorTs.ts b/src/components/NetworkNodeSelector/NetworkNodeSelectorTs.ts
index a109beccd..b2c144eed 100644
--- a/src/components/NetworkNodeSelector/NetworkNodeSelectorTs.ts
+++ b/src/components/NetworkNodeSelector/NetworkNodeSelectorTs.ts
@@ -9,7 +9,7 @@ import FormWrapper from '@/components/FormWrapper/FormWrapper.vue';
 import FormRow from '@/components/FormRow/FormRow.vue';
 import { NodeModel } from '@/core/database/entities/NodeModel';
 import { URLHelpers } from '@/core/utils/URLHelpers';
-import { NetworkType, NodeInfo, RepositoryFactoryHttp, RoleType } from 'symbol-sdk';
+import { AccountInfo, NetworkType, NodeInfo, RepositoryFactoryHttp, RoleType } from 'symbol-sdk';
 import { NotificationType } from '@/core/utils/NotificationType';
 import { ProfileModel } from '@/core/database/entities/ProfileModel';
 
@@ -24,6 +24,7 @@ import { ProfileModel } from '@/core/database/entities/ProfileModel';
             peerNodes: 'network/peerNodes',
             networkType: 'network/networkType',
             currentProfile: 'profile/currentProfile',
+            currentSignerAccountInfo: 'account/currentSignerAccountInfo',
         }),
     },
 })
@@ -73,6 +74,7 @@ export class NetworkNodeSelectorTs extends Vue {
     public currentProfile: ProfileModel;
 
     private hideList: boolean = false;
+    private currentSignerAccountInfo: AccountInfo;
     /**
      * Checks if the given node is eligible for harvesting
      * @protected
@@ -116,8 +118,15 @@ export class NetworkNodeSelectorTs extends Vue {
                 );
                 Vue.set(this, 'showInputPublicKey', false);
                 this.$emit('input', nodeModel);
-                if (this.isAccountKeyLinked && this.isVrfKeyLinked && this.missingKeys) {
-                    this.$store.dispatch('harvesting/FETCH_STATUS', value);
+                const unlockedAccounts = await nodeRepository.getUnlockedAccount().toPromise();
+                let nodeOperatorAccount = false;
+                const remotePublicKey = this.currentSignerAccountInfo.supplementalPublicKeys?.linked?.publicKey;
+
+                if (unlockedAccounts) {
+                    nodeOperatorAccount = unlockedAccounts?.some((publicKey) => publicKey === remotePublicKey);
+                }
+                if (this.isAccountKeyLinked && this.isVrfKeyLinked && (this.missingKeys || nodeOperatorAccount)) {
+                    this.$store.dispatch('harvesting/FETCH_STATUS', [value, nodeModel]);
                 }
             } else {
                 Vue.set(this, 'showInputPublicKey', true);
@@ -133,6 +142,7 @@ export class NetworkNodeSelectorTs extends Vue {
     }
 
     public async created() {
+        // add static hardcoded nodes to harvesting list
         await this.$store.dispatch('network/LOAD_PEER_NODES');
         this.customNodeData = this.filteredNodes.map((n) => n.host);
         this.filteredData = [...this.customNodeData];
@@ -196,12 +206,7 @@ export class NetworkNodeSelectorTs extends Vue {
         if (this.includeRoles && this.includeRoles.length > 0) {
             // exclude ngl nodes that doesn't support harvesting
             return this.peerNodes.filter(
-                (node) =>
-                    node.roles?.some((role) => this.isIncluded(role)) &&
-                    !node.host?.includes('ap-southeast-1.testnet') &&
-                    !node.host.includes('us-east-1.testnet') &&
-                    !node.host.includes('eu-central-1.testnet') &&
-                    node.networkIdentifier === this.networkType,
+                (node) => node.roles?.some((role) => this.isIncluded(role)) && node.networkIdentifier === this.networkType,
             );
         }
         return this.peerNodes;
diff --git a/src/components/NetworkStatisticsPanel/NetworkStatisticsPanelTs.ts b/src/components/NetworkStatisticsPanel/NetworkStatisticsPanelTs.ts
index 300e85f4e..a26fa4f02 100644
--- a/src/components/NetworkStatisticsPanel/NetworkStatisticsPanelTs.ts
+++ b/src/components/NetworkStatisticsPanel/NetworkStatisticsPanelTs.ts
@@ -94,16 +94,30 @@ export class NetworkStatisticsPanelTs extends Vue {
      */
     protected isHarvestingEnabled = false;
 
+    /**
+     * Refreshing panel data interval
+     */
+    private refreshingInterval: any;
+
     /**
      * Current network target block time
      */
     protected get blockGenerationTargetTime(): number {
         return this.networkConfiguration.blockGenerationTargetTime;
     }
-
+    private refreshTransactions() {
+        this.refreshingInterval = setInterval(async () => {
+            await this.$store.dispatch('statistics/LOAD', {}, { root: true });
+        }, 15000);
+    }
     public created() {
         if (this.currentAccount) {
             this.isHarvestingEnabled = this.harvestingSupportedProfileTypes.includes(this.currentAccount.type);
+            this.refreshTransactions();
         }
     }
+
+    private destroyed() {
+        clearInterval(this.refreshingInterval);
+    }
 }
diff --git a/src/components/PeerSelector/PeerSelector.vue b/src/components/PeerSelector/PeerSelector.vue
index cb0e57998..f7e871d90 100644
--- a/src/components/PeerSelector/PeerSelector.vue
+++ b/src/components/PeerSelector/PeerSelector.vue
@@ -12,13 +12,14 @@
                     <Row>
                         <i-col span="5" class="current-node-header">{{ $t('current_endpoint') }}:</i-col>
                         <i-col
+                            v-if="currentPeerInfo"
                             span="19"
                             class="current-node-value overflow_ellipsis"
                             :title="currentPeerInfo.url + currentPeerInfo.friendlyName"
                         >
                             <div>
-                                <div class="node-list-entry">{{ currentPeerInfo.friendlyName }}</div>
-                                <div class="node-url">{{ currentPeerInfo.url }}</div>
+                                <div v-if="currentPeerInfo" class="node-list-entry">{{ currentPeerInfo.friendlyName }}</div>
+                                <div v-if="currentPeerInfo" class="node-url">{{ currentPeerInfo.url }}</div>
                             </div>
                         </i-col>
                     </Row>
@@ -26,9 +27,9 @@
                 <div class="node-list-container">
                     <div class="node-list-head">
                         <span>{{ $t('node_list') }}</span>
-                        <span> ({{ peersList.length }})</span>
+                        <span> ({{ peersList && peersList.length ? peersList.length : 0 }})</span>
                     </div>
-                    <div class="node-list-content">
+                    <div v-if="currentPeerInfo && peersList.length" class="node-list-content">
                         <ul v-auto-scroll="'active'">
                             <li
                                 v-for="({ url, friendlyName }, index) in peersList"
@@ -61,13 +62,14 @@
                     <span>{{ $t('node_list') }}</span>
                     <span> ({{ peersList.length }})</span>
                 </div>
-                <div class="node-list-content">
+                <div v-if="currentPeerInfo" class="node-list-content">
                     <ul v-auto-scroll="'active'">
                         <li
                             v-for="({ url, friendlyName }, index) in peersList"
                             :key="`sep${index}`"
                             class="list-item pointer"
                             :class="[{ active: currentPeerInfo.url == url }]"
+                            @click="currentPeerInfo.url !== url ? switchPeer(url) : ''"
                         >
                             <div class="overflow_ellipsis" :title="friendlyName">
                                 <div class="node-list-entry">{{ friendlyName }}</div>
diff --git a/src/components/PeerSelector/PeerSelectorTs.ts b/src/components/PeerSelector/PeerSelectorTs.ts
index d99f51303..a141d9014 100644
--- a/src/components/PeerSelector/PeerSelectorTs.ts
+++ b/src/components/PeerSelector/PeerSelectorTs.ts
@@ -108,6 +108,7 @@ export class PeerSelectorTs extends Vue {
     goSettings() {
         this.poptipVisible = false;
         this.$store.commit('profile/toggleSettings');
+        this.$store.commit('profile/toggleNetworkSettings', true);
     }
     onCloseNetworkModal() {
         this.$store.dispatch('network/SET_NETWORK_IS_NOT_MATCHING_PROFILE', false);
diff --git a/src/components/ProtectedPrivateKeyDisplay/ProtectedPrivateKeyDisplay.vue b/src/components/ProtectedPrivateKeyDisplay/ProtectedPrivateKeyDisplay.vue
index af7f3acee..6ab58983d 100644
--- a/src/components/ProtectedPrivateKeyDisplay/ProtectedPrivateKeyDisplay.vue
+++ b/src/components/ProtectedPrivateKeyDisplay/ProtectedPrivateKeyDisplay.vue
@@ -1,6 +1,14 @@
 <template>
     <div class="detail-row">
-        <div :class="[$route.fullPath === '/delegatedHarvesting' ? 'account-detail-harvesting' : 'account-detail-row-3cols']">
+        <div
+            :class="[
+                $route.fullPath === '/delegatedHarvesting'
+                    ? hasPlainPrivateKey && !hasAccountUnlockModal
+                        ? 'account-detail-harvesting'
+                        : 'account-detail-harvesting-locked'
+                    : 'account-detail-row-3cols',
+            ]"
+        >
             <span v-if="$route.fullPath !== '/delegatedHarvesting'" class="label">{{ $t('private_key') }}</span>
             <span v-if="hasPlainPrivateKey" class="value accountPublicKey">{{ plainInformation }}</span>
             <span v-if="hasPlainPrivateKey">
@@ -71,6 +79,10 @@ export default class ProtectedPrivateKeyDisplay extends ProtectedPrivateKeyDispl
     display: grid;
     grid-template-columns: 5rem auto;
 }
+.account-detail-harvesting-locked {
+    display: grid;
+    grid-template-columns: 6rem auto;
+}
 
 .not-linked-input {
     padding-left: 0.15rem;
diff --git a/src/components/QRCode/ImportQRButton/ImportQRButton.less b/src/components/QRCode/ImportQRButton/ImportQRButton.less
index eca292224..da7d50e87 100644
--- a/src/components/QRCode/ImportQRButton/ImportQRButton.less
+++ b/src/components/QRCode/ImportQRButton/ImportQRButton.less
@@ -18,6 +18,7 @@
 .trigger-importqr {
     color: @blackLight;
     font-size: @normalFont !important;
+    z-index: 11;
 
     span {
         font-size: @normalFont !important;
diff --git a/src/components/QRCode/QRCodeActions/TransactionQRAction/TransactionQRAction.vue b/src/components/QRCode/QRCodeActions/TransactionQRAction/TransactionQRAction.vue
index 3d2c407e2..fe2bf66be 100644
--- a/src/components/QRCode/QRCodeActions/TransactionQRAction/TransactionQRAction.vue
+++ b/src/components/QRCode/QRCodeActions/TransactionQRAction/TransactionQRAction.vue
@@ -5,11 +5,7 @@
                 <div class="qrcode-details-row-inner">
                     <div class="qrcode-details-row-label">{{ slotProps.item.label }}:</div>
                     <div v-if="slotProps.item.label == $t('amount')" class="qrcode-details-row-value">
-                        <MosaicAmountDisplay
-                            :id="tran.mosaics[0].id"
-                            :absolute-amount="tran.mosaics[0].amount.toString()"
-                            :show-ticker="true"
-                        />
+                        <MosaicAmountDisplay :id="mosaicId" :absolute-amount="mosaicAmount" :show-ticker="true" />
                     </div>
                     <div v-else-if="slotProps.item.label == $t('fee')" class="qrcode-details-row-value">
                         <MaxFeeSelector v-model="slotProps.item.value" :display-only="true" />
diff --git a/src/components/QRCode/QRCodeActions/TransactionQRAction/TransactionQRActionTs.ts b/src/components/QRCode/QRCodeActions/TransactionQRAction/TransactionQRActionTs.ts
index a7e0001e4..b5904985e 100644
--- a/src/components/QRCode/QRCodeActions/TransactionQRAction/TransactionQRActionTs.ts
+++ b/src/components/QRCode/QRCodeActions/TransactionQRAction/TransactionQRActionTs.ts
@@ -15,7 +15,7 @@
  */
 import { Vue, Component, Prop } from 'vue-property-decorator';
 import { TransactionQR } from 'symbol-qr-library';
-import { NetworkType, TransferTransaction, Address } from 'symbol-sdk';
+import { NetworkType, TransferTransaction, Address, MosaicId } from 'symbol-sdk';
 
 import { QRCodeDetailItem } from '@/components/QRCode/QRCodeActions/TemplateQRAction/TemplateQRActionTs';
 // @ts-ignore
@@ -24,8 +24,15 @@ import TemplateQRAction from '@/components/QRCode/QRCodeActions/TemplateQRAction
 import MosaicAmountDisplay from '@/components/MosaicAmountDisplay/MosaicAmountDisplay.vue';
 // @ts-ignore
 import MaxFeeSelector from '@/components/MaxFeeSelector/MaxFeeSelector.vue';
+import { mapGetters } from 'vuex';
+import { NetworkCurrencyModel } from '@/core/database/entities/NetworkCurrencyModel';
 @Component({
     components: { TemplateQRAction, MosaicAmountDisplay, MaxFeeSelector },
+    computed: {
+        ...mapGetters({
+            networkCurrency: 'mosaic/networkCurrency',
+        }),
+    },
 })
 export default class TransactionQRActionTs extends Vue {
     @Prop({ default: null }) readonly qrCode!: TransactionQR;
@@ -36,7 +43,11 @@ export default class TransactionQRActionTs extends Vue {
      * TransferTransaction read from QR
      */
     tran: TransferTransaction;
-
+    private networkCurrency: NetworkCurrencyModel;
+    private mosaicAmount: string = '';
+    private mosaicIdHex: string = '';
+    private fees: string = '';
+    private mosaicId: MosaicId = undefined;
     /**
      * Get QR Code detail items
      *
@@ -54,10 +65,14 @@ export default class TransactionQRActionTs extends Vue {
         items.push(new QRCodeDetailItem(this.$t('qrcode_detail_item_network_type').toString(), NetworkType[this.qrCode.networkType], true));
         this.tran = (this.qrCode.transaction as unknown) as TransferTransaction;
         items.push(new QRCodeDetailItem(this.$t('to').toString(), (this.tran.recipientAddress as Address).plain(), true));
-        items.push(new QRCodeDetailItem(this.$t('mosaic_id').toString(), this.tran.mosaics[0].id.id.toHex(), true));
-        items.push(new QRCodeDetailItem(this.$t('amount').toString(), this.tran.mosaics[0].amount.toString(), true));
+        this.mosaicIdHex = !!this.tran.mosaics?.length ? this.tran.mosaics[0].id.id.toHex() : this.networkCurrency.mosaicIdHex.toString();
+        this.mosaicId = new MosaicId(this.mosaicIdHex);
+        items.push(new QRCodeDetailItem(this.$t('mosaic_id').toString(), this.mosaicIdHex, true));
+        this.mosaicAmount = !!this.tran.mosaics?.length ? this.tran.mosaics[0].amount.toString() : '0';
+        items.push(new QRCodeDetailItem(this.$t('amount').toString(), this.mosaicAmount, true));
         items.push(new QRCodeDetailItem(this.$t('message').toString(), this.tran.message.payload, true));
-        items.push(new QRCodeDetailItem(this.$t('fee').toString(), this.tran.maxFee.toString(), true));
+        this.fees = this.tran.maxFee ? this.tran.maxFee.toString() : '0';
+        items.push(new QRCodeDetailItem(this.$t('fee').toString(), this.fees, true));
         return items;
     }
 
diff --git a/src/components/QRCode/UploadQRCode/UploadQRCodeTs.ts b/src/components/QRCode/UploadQRCode/UploadQRCodeTs.ts
index 8748d63f9..405514f6e 100644
--- a/src/components/QRCode/UploadQRCode/UploadQRCodeTs.ts
+++ b/src/components/QRCode/UploadQRCode/UploadQRCodeTs.ts
@@ -16,9 +16,15 @@
 import { Vue, Component, Prop } from 'vue-property-decorator';
 import { QrcodeCapture, QrcodeDropZone, QrcodeStream } from 'vue-qrcode-reader';
 import { QRCodeType } from 'symbol-qr-library';
+import { mapGetters } from 'vuex';
 
 @Component({
     components: { QrcodeCapture, QrcodeDropZone, QrcodeStream },
+    computed: {
+        ...mapGetters({
+            feesConfig: 'network/feesConfig',
+        }),
+    },
 })
 export default class UploadQRCodeTs extends Vue {
     @Prop({ default: true })
@@ -35,7 +41,13 @@ export default class UploadQRCodeTs extends Vue {
 
     @Prop({ default: 'upload_file_message' })
     readonly uploadFileMessage!: string;
-
+    private feesConfig: {
+        fast: number;
+        median: number;
+        slow: number;
+        slowest: number;
+        free: number;
+    };
     /**
      * Whether scan tab is active
      */
@@ -71,6 +83,9 @@ export default class UploadQRCodeTs extends Vue {
      * @param json
      */
     public onDecode(json) {
+        if (!this.feesConfig) {
+            this.$store.dispatch('network/LOAD_TRANSACTION_FEES');
+        }
         const jsonObj = JSON.parse(json);
         this.qrType = jsonObj.type;
         if (this.validQrTypes.includes(this.qrType)) {
diff --git a/src/components/Settings/Settings.vue b/src/components/Settings/Settings.vue
index 30a4212a8..de6d5d6b0 100644
--- a/src/components/Settings/Settings.vue
+++ b/src/components/Settings/Settings.vue
@@ -4,7 +4,12 @@
             <img :src="settingsIcon" class="setting-menu-icon" />
             <span>{{ $t('settings') }}</span>
         </a>
-        <ModalSettings v-if="isSettingsVisible" :visible="isSettingsVisible" @close="toggleSettings" />
+        <ModalSettings
+            v-if="isSettingsVisible"
+            :network-settings-selected="isNetworkSettingsSelected"
+            :visible="isSettingsVisible"
+            @close="toggleSettings"
+        />
     </div>
 </template>
 <script lang="ts">
diff --git a/src/components/Settings/SettingsTs.ts b/src/components/Settings/SettingsTs.ts
index 6ba70bf81..7713702f5 100644
--- a/src/components/Settings/SettingsTs.ts
+++ b/src/components/Settings/SettingsTs.ts
@@ -9,14 +9,17 @@ import { mapGetters } from 'vuex';
     computed: {
         ...mapGetters({
             isSettingsVisible: 'profile/isSettingsVisible',
+            isNetworkSettingsSelected: 'profile/isNetworkSettingsSelected',
         }),
     },
 })
 export class SettingsTs extends Vue {
     public isSettingsVisible: boolean;
+    public isNetworkSettingsSelected: boolean;
 
     public toggleSettings() {
         this.$store.commit('profile/toggleSettings');
+        this.$store.commit('profile/toggleNetworkSettings', false);
     }
 
     public get settingsIcon() {
diff --git a/src/components/TableDisplay/TableDisplay.vue b/src/components/TableDisplay/TableDisplay.vue
index 4bcf75b2c..5095b0a7e 100644
--- a/src/components/TableDisplay/TableDisplay.vue
+++ b/src/components/TableDisplay/TableDisplay.vue
@@ -4,7 +4,7 @@
             <div class="table-title-container section-title">
                 <div class="user-operation">
                     <span class="add-metadata-button">
-                        <ButtonAdd :title="$t('add_metadata')" :disabled="false" size="26" @click="$emit('on-add-metadata')" />
+                        <ButtonAdd :title="$t('add_metadata')" :disabled="false" :size="24" @click="$emit('on-add-metadata')" />
                     </span>
                     <Checkbox v-if="assetType !== 'metadata'" v-model="showExpired" class="table-filter-item-container">
                         <span v-show="assetType === 'mosaic'" style="margin-left: 0.1rem;">{{ $t('show_expired_mosaics') }}</span>
@@ -13,7 +13,7 @@
                     <div v-if="signers.length > 1" style="min-width: 2rem;">
                         <SignerFilter :signers="signers" @signer-change="onSignerSelectorChange" />
                     </div>
-                    <ButtonRefresh v-if="assetType !== 'metadata'" @click="onRefresh" />
+                    <ButtonRefresh v-if="assetType !== 'metadata'" :size="24" @click="onRefresh" />
                 </div>
             </div>
         </div>
diff --git a/src/components/TableDisplay/TableDisplayTs.ts b/src/components/TableDisplay/TableDisplayTs.ts
index 136d4730e..9b322ba60 100644
--- a/src/components/TableDisplay/TableDisplayTs.ts
+++ b/src/components/TableDisplay/TableDisplayTs.ts
@@ -274,7 +274,7 @@ export class TableDisplayTs extends Vue {
                 return new MosaicTableService(this.currentHeight, this.holdMosaics, this.networkConfiguration);
 
             case TableAssetType.Namespace:
-                return new NamespaceTableService(this.currentHeight, this.ownedNamespaces, this.networkConfiguration);
+                return new NamespaceTableService(this.currentHeight, this.ownedNamespaces, this.networkConfiguration, this.showExpired);
 
             case TableAssetType.Metadata:
                 return new MetadataTableService(this.currentHeight, this.attachedMetadataList, this.networkConfiguration);
diff --git a/src/components/TableRow/TableRow.less b/src/components/TableRow/TableRow.less
index 313da87e6..012c29070 100644
--- a/src/components/TableRow/TableRow.less
+++ b/src/components/TableRow/TableRow.less
@@ -36,10 +36,6 @@
     padding: 0.2rem 0.1rem 0 0.1rem;
 }
 
-.balance-cell {
-    padding-top: 0.16rem;
-}
-
 .amount-display {
     text-align: right;
 }
diff --git a/src/components/TransactionList/TransactionRow/TransactionRow.vue b/src/components/TransactionList/TransactionRow/TransactionRow.vue
index 918c14219..333bd9dfc 100644
--- a/src/components/TransactionList/TransactionRow/TransactionRow.vue
+++ b/src/components/TransactionList/TransactionRow/TransactionRow.vue
@@ -25,6 +25,9 @@
         <!-- FOURTH COLUMN -->
         <div class="confirmation-cell">
             {{ getHeight() }}
+            <Tooltip v-if="hasMissSignatures && !transactionSigningFlag" :content="$t('transaction_signed')" placement="top">
+                <Icon type="md-done-all" size="17" class="coloring" />
+            </Tooltip>
         </div>
 
         <!-- FIFTH COLUMN -->
diff --git a/src/components/TransactionList/TransactionRow/TransactionRowTs.ts b/src/components/TransactionList/TransactionRow/TransactionRowTs.ts
index 8aa89bafa..7fa6a546d 100644
--- a/src/components/TransactionList/TransactionRow/TransactionRowTs.ts
+++ b/src/components/TransactionList/TransactionRow/TransactionRowTs.ts
@@ -14,9 +14,22 @@
  *
  */
 // external dependencies
-import { Component, Prop, Vue } from 'vue-property-decorator';
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
 import { mapGetters } from 'vuex';
-import { MosaicId, NamespaceId, NetworkType, Transaction, TransactionType, TransferTransaction } from 'symbol-sdk';
+import {
+    AccountAddressRestrictionTransaction,
+    AccountMetadataTransaction,
+    AggregateTransaction,
+    MosaicId,
+    MultisigAccountInfo,
+    MultisigAccountModificationTransaction,
+    NamespaceId,
+    NetworkType,
+    Transaction,
+    TransactionType,
+    TransferTransaction,
+    TransactionStatus,
+} from 'symbol-sdk';
 // internal dependencies
 import { Formatters } from '@/core/utils/Formatters';
 import { TimeHelpers } from '@/core/utils/TimeHelpers';
@@ -29,10 +42,11 @@ import ActionDisplay from '@/components/ActionDisplay/ActionDisplay.vue';
 import { dashboardImages, officialIcons, transactionTypeToIcon } from '@/views/resources/Images';
 import { TransactionViewFactory } from '@/core/transactions/TransactionViewFactory';
 import { TransactionView } from '@/core/transactions/TransactionView';
-import { TransactionStatus } from '@/core/transactions/TransactionStatus';
 import { NetworkConfigurationModel } from '../../../core/database/entities/NetworkConfigurationModel';
 import { ProfileModel } from '@/core/database/entities/ProfileModel';
 import { DateTimeFormatter } from '@js-joda/core';
+import { AccountModel } from '@/core/database/entities/AccountModel';
+import { TransactionStatus as TransactionStatusEnum } from '@/core/transactions/TransactionStatus';
 
 @Component({
     components: {
@@ -44,6 +58,8 @@ import { DateTimeFormatter } from '@js-joda/core';
         explorerBaseUrl: 'app/explorerUrl',
         networkConfiguration: 'network/networkConfiguration',
         currentProfile: 'profile/currentProfile',
+        currentAccount: 'account/currentAccount',
+        currentAccountMultisigInfo: 'account/currentAccountMultisigInfo',
     }),
 })
 export class TransactionRowTs extends Vue {
@@ -85,6 +101,27 @@ export class TransactionRowTs extends Vue {
      */
     protected timeHelpers: TimeHelpers = TimeHelpers;
 
+    /**
+     * Currently active account
+     * @see {Store.Account}
+     * @var {AccountModel}
+     */
+    private currentAccount: AccountModel;
+    /**
+     * Current account multisig info
+     * @type {MultisigAccountInfo}
+     */
+    private currentAccountMultisigInfo: MultisigAccountInfo;
+    /**
+     * Current transaction Details
+     * @type {AggregateTransaction}
+     */
+    private aggregateTransactionDetails: AggregateTransaction;
+    /**
+     * Checks wether transaction is signed
+     * @type {boolean}
+     */
+    private transactionSigningFlag: boolean = false;
     /// region computed properties getter/setter
     public get view(): TransactionView<Transaction> {
         return TransactionViewFactory.getView(this.$store, this.transaction);
@@ -194,13 +231,100 @@ export class TransactionRowTs extends Vue {
         // return true
         return false;
     }
+    public async needsCosignature() {
+        // Multisig account can not sign
+
+        const currentPubAccount = AccountModel.getObjects(this.currentAccount).publicAccount;
+        if (
+            this.transaction instanceof AggregateTransaction &&
+            this.transaction.type === TransactionType.AGGREGATE_BONDED &&
+            !this.transaction.signedByAccount(currentPubAccount)
+        ) {
+            if (this.currentAccountMultisigInfo && this.currentAccountMultisigInfo.isMultisig()) {
+                this.transactionSigningFlag = false;
+                return;
+            }
+            if (
+                this.aggregateTransactionDetails !== undefined &&
+                this.aggregateTransactionDetails.transactionInfo?.hash == this.transaction.transactionInfo?.hash
+            ) {
+                const cosignList = [];
+                const cosignerAddresses = this.aggregateTransactionDetails.innerTransactions.map((t) => t.signer?.address);
+                this.aggregateTransactionDetails.innerTransactions.forEach((t) => {
+                    if (t.type === TransactionType.MULTISIG_ACCOUNT_MODIFICATION.valueOf()) {
+                        cosignList.push(...(t as MultisigAccountModificationTransaction).addressAdditions);
+                    } else if (t.type === TransactionType.ACCOUNT_ADDRESS_RESTRICTION.valueOf()) {
+                        cosignList.push(...(t as AccountAddressRestrictionTransaction).restrictionAdditions);
+                    } else if (t.type === TransactionType.ACCOUNT_METADATA) {
+                        cosignList.push((t as AccountMetadataTransaction).targetAddress);
+                    }
+                });
+                if (cosignList.find((m) => this.currentAccount.address === m.plain()) !== undefined) {
+                    this.transactionSigningFlag = true;
+                    return;
+                }
+                const cosignRequired = cosignerAddresses.find((c) => {
+                    if (c) {
+                        return (this.transactionSigningFlag =
+                            c.plain() === this.currentAccount.address ||
+                            (this.currentAccountMultisigInfo &&
+                                this.currentAccountMultisigInfo.multisigAddresses.find((m) => c.equals(m)) !== undefined));
+                    }
+                    this.transactionSigningFlag = false;
+                    return;
+                });
+                this.transactionSigningFlag = cosignRequired !== undefined;
+                return;
+            }
+            this.transactionSigningFlag = false;
+            return;
+        }
+        return;
+    }
+    private get hasMissSignatures(): boolean {
+        //merkleComponentHash ==='000000000000...' present that the transaction is still lack of signature
+        return (
+            this.transaction?.transactionInfo != null &&
+            this.transaction?.transactionInfo.merkleComponentHash !== undefined &&
+            this.transaction?.transactionInfo.merkleComponentHash.startsWith('000000000000')
+        );
+    }
+
+    @Watch('transaction', { immediate: true })
+    private async fetchTransaction() {
+        if (
+            this.transaction instanceof AggregateTransaction &&
+            this.transaction.type === TransactionType.AGGREGATE_BONDED &&
+            this.hasMissSignatures &&
+            !this.transaction.signedByAccount(AccountModel.getObjects(this.currentAccount).publicAccount)
+        ) {
+            this.transactionSigningFlag = true;
+            try {
+                // first get the last status
+                const transactionStatus: TransactionStatus = (await this.$store.dispatch('transaction/FETCH_TRANSACTION_STATUS', {
+                    transactionHash: this.transaction.transactionInfo?.hash,
+                })) as TransactionStatus;
+
+                if (transactionStatus.group != 'failed') {
+                    // fetch the transaction by using the status
+                    this.aggregateTransactionDetails = (await this.$store.dispatch('transaction/LOAD_TRANSACTION_DETAILS', {
+                        group: transactionStatus.group,
+                        transactionHash: this.transaction.transactionInfo?.hash,
+                    })) as AggregateTransaction;
+                    await this.needsCosignature();
+                }
+            } catch (error) {
+                console.log(error);
+            }
+        }
+    }
 
     /**
      * Returns the transaction height or number of confirmations
      */
     public getHeight(): string {
         const transactionStatus = TransactionView.getTransactionStatus(this.transaction);
-        if (transactionStatus == TransactionStatus.confirmed) {
+        if (transactionStatus === TransactionStatusEnum.confirmed) {
             return this.view.info?.height.compact().toString();
         } else {
             return this.$t(`transaction_status_${transactionStatus}`).toString();
@@ -220,9 +344,21 @@ export class TransactionRowTs extends Vue {
             .format(DateTimeFormatter.ofPattern('yyyy-MM-dd HH:mm:ss'));
     }
     public get date() {
-        return this.transaction.deadline
-            .toLocalDateTime(this.networkConfiguration.epochAdjustment)
-            .minusHours(2)
-            .format(DateTimeFormatter.ofPattern('yyyy-MM-dd HH:mm:ss'));
+        if (this.transaction instanceof AggregateTransaction) {
+            return this.transaction.deadline
+                .toLocalDateTime(this.networkConfiguration.epochAdjustment)
+                .minusHours(48)
+                .format(DateTimeFormatter.ofPattern('yyyy-MM-dd HH:mm:ss'));
+        } else if (this.transaction.type === TransactionType.HASH_LOCK) {
+            return this.transaction.deadline
+                .toLocalDateTime(this.networkConfiguration.epochAdjustment)
+                .minusHours(6)
+                .format(DateTimeFormatter.ofPattern('yyyy-MM-dd HH:mm:ss'));
+        } else {
+            return this.transaction.deadline
+                .toLocalDateTime(this.networkConfiguration.epochAdjustment)
+                .minusHours(2)
+                .format(DateTimeFormatter.ofPattern('yyyy-MM-dd HH:mm:ss'));
+        }
     }
 }
diff --git a/src/config/FeesConfig.ts b/src/config/FeesConfig.ts
index 068bdae5f..a55ae99b9 100644
--- a/src/config/FeesConfig.ts
+++ b/src/config/FeesConfig.ts
@@ -15,19 +15,19 @@
  */
 
 export interface FeesConfig {
+    fast: number;
     median: number;
-    free: number;
     slow: number;
     slowest: number;
-    fast: number;
+    free: number;
 }
 
 const defaultFeesConfig: FeesConfig = {
+    fast: 20,
     median: 10,
-    free: 0,
     slow: 5,
     slowest: 1,
-    fast: 20,
+    free: 0,
 };
 
 const resolvedFeesConfig: FeesConfig = window['feesConfig'] || defaultFeesConfig;
diff --git a/src/core/transactions/TransactionViewFactory.ts b/src/core/transactions/TransactionViewFactory.ts
index 635cdef28..77fd6e494 100644
--- a/src/core/transactions/TransactionViewFactory.ts
+++ b/src/core/transactions/TransactionViewFactory.ts
@@ -34,6 +34,7 @@ import {
     AccountAddressRestrictionTransaction,
     AccountMosaicRestrictionTransaction,
     AccountOperationRestrictionTransaction,
+    PersistentHarvestingDelegationMessage,
 } from 'symbol-sdk';
 import { ViewUnknownTransaction } from '@/core/transactions/ViewUnknownTransaction';
 import { ViewHashLockTransaction } from '@/core/transactions/ViewHashLockTransaction';
@@ -55,6 +56,7 @@ import { ViewMosaicMetadataTransaction } from '@/core/transactions/ViewMosaicMet
 import { ViewAccountAddressRestrictionTransaction } from './ViewAccountAddressRestrictionTransaction';
 import { ViewAccountMosaicRestrictionTransaction } from './ViewAccountMosaicRestrictionTransaction';
 import { ViewAccountOperationRestrictionTransaction } from './ViewAccountOperationRestrictionTransaction';
+import { ViewHarvestingTransaction } from './ViewHarvestingTransaction';
 
 /**
  * Transaction view factory.
@@ -105,8 +107,12 @@ export class TransactionViewFactory {
                 return new ViewMosaicSupplyChangeTransaction($store, transaction as MosaicSupplyChangeTransaction);
             case TransactionType.NAMESPACE_REGISTRATION:
                 return new ViewNamespaceRegistrationTransaction($store, transaction as NamespaceRegistrationTransaction);
-            case TransactionType.TRANSFER:
-                return new ViewTransferTransaction($store, transaction as TransferTransaction);
+            case TransactionType.TRANSFER: {
+                const transferTransaction = transaction as TransferTransaction;
+                return transferTransaction.message instanceof PersistentHarvestingDelegationMessage
+                    ? new ViewHarvestingTransaction($store, transferTransaction)
+                    : new ViewTransferTransaction($store, transferTransaction);
+            }
             case TransactionType.MOSAIC_ALIAS:
                 return new ViewAliasTransaction($store, transaction as MosaicAliasTransaction);
             case TransactionType.ADDRESS_ALIAS:
diff --git a/src/core/transactions/ViewHarvestingTransaction.ts b/src/core/transactions/ViewHarvestingTransaction.ts
new file mode 100644
index 000000000..ff3610834
--- /dev/null
+++ b/src/core/transactions/ViewHarvestingTransaction.ts
@@ -0,0 +1,36 @@
+/*
+ * Copyright 2020 NEM (https://nem.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and limitations under the License.
+ *
+ */
+
+import i18n from '@/language';
+import { TransactionDetailItem } from './TransactionDetailItem';
+import { ViewTransferTransaction } from './ViewTransferTransaction';
+
+export class ViewHarvestingTransaction extends ViewTransferTransaction {
+    /**
+     * Displayed items
+     * @type {({ key: string, value: string | boolean, | Mosaic }[])}
+     * @see {TransactionView}
+     */
+    resolveHeaderItems(): TransactionDetailItem[] {
+        const headerItems = super.resolveHeaderItems();
+        headerItems.shift();
+        headerItems.unshift({
+            key: 'transaction_type',
+            value: i18n.t('transaction_descriptor_harvesting'),
+        });
+        return headerItems;
+    }
+}
diff --git a/src/core/transactions/ViewTransferTransaction.ts b/src/core/transactions/ViewTransferTransaction.ts
index 4d93029bf..74fe0d2a9 100644
--- a/src/core/transactions/ViewTransferTransaction.ts
+++ b/src/core/transactions/ViewTransferTransaction.ts
@@ -21,7 +21,6 @@ import i18n from '@/language';
 import { TransactionDetailItem } from '@/core/transactions/TransactionDetailItem';
 import { MosaicService } from '@/services/MosaicService';
 import { MosaicModel } from '@/core/database/entities/MosaicModel';
-
 export class ViewTransferTransaction extends TransactionView<TransferTransaction> {
     public get isIncoming() {
         const currentSignerAddress = this.$store.getters['account/currentSignerAddress'];
@@ -85,8 +84,11 @@ export class ViewTransferTransaction extends TransactionView<TransferTransaction
         const mosaicItems = attachedMosaics.map((mosaic, index, self) => {
             const color = incoming ? 'green' : 'red';
             const mosaicLabel = i18n.t('mosaic');
+            const networkConfiguration = this.$store.getters['network/networkConfiguration'];
+
             // check if mosaic not expired yet
-            return this.availableMosaics.some((entry) => entry.mosaicIdHex == mosaic.mosaicHex)
+            return this.availableMosaics.some((entry) => entry.mosaicIdHex == mosaic.mosaicHex) ||
+                mosaic.mosaicHex === networkConfiguration.currencyMosaicId
                 ? {
                       key: `${mosaicLabel} (${index + 1}/${self.length})`,
                       value: { ...mosaic, color },
diff --git a/src/core/validation/ValidationRuleset.ts b/src/core/validation/ValidationRuleset.ts
index d413ca444..1b05c1791 100644
--- a/src/core/validation/ValidationRuleset.ts
+++ b/src/core/validation/ValidationRuleset.ts
@@ -43,9 +43,10 @@ export const createValidationRuleSet = ({
         namespaceDuration: `required|min_value:${
             minNamespaceDuration / networkConfig[NetworkType.TEST_NET].networkConfigurationDefaults.blockGenerationTargetTime
         }|maxNamespaceDuration`,
+        // remove symbol from regex when rest https://github.com/nemtech/catapult-rest/issues/631 fixed
         namespaceName: {
             required: true,
-            regex: '^[a-z0-9]{1}[a-z0-9-_]{0,63}$',
+            regex: '^(?!symbol$)([a-z0-9]{1}[a-z0-9-_]{0,63})$',
         },
         subNamespaceName: {
             required: true,
diff --git a/src/language/en-US.json b/src/language/en-US.json
index d9ffe9f9a..eb8e78d6d 100644
--- a/src/language/en-US.json
+++ b/src/language/en-US.json
@@ -172,6 +172,7 @@
     "cosignature_qr_action_desc": "Continue to transaction details page to sign your part.",
     "create_a_new_account": "Create a new profile",
     "create_a_new_profile": "Create a new profile",
+    "create_mnemonic_passphrase": "Create a mnemonic passphrase",
     "create_lock_check_pw_remind": "Two passwords are inconsistent",
     "create_lock_pw_remind": "Password setting error",
     "create_lock_pw_txt_remind": "Password hint error",
@@ -397,7 +398,7 @@
     "Failure_Metadata_Value_Size_Delta_Too_Large": "Validation failed because the metadata value size delta is larger in magnitude than the value size",
     "Failure_Metadata_Value_Size_Delta_Mismatch": "Validation failed because the metadata value size delta does not match expected value based on the current state",
     "Failure_Metadata_Value_Change_Irreversible": "Validation failed because a metadata value change (truncation) is irreversible",
-    "Failure_Mosaic_Invalid_Duration": "Validation failed because the duration has an invalid value",
+    "Failure_Mosaic_Invalid_Duration": "Validation failed because the mosaic's duration has an invalid value",
     "Failure_Mosaic_Invalid_Name": "Validation failed because the name is invalid",
     "Failure_Mosaic_Name_Id_Mismatch": "Validation failed because the name and id don't match",
     "Failure_Mosaic_Expired": "Validation failed because the parent is expired",
@@ -432,7 +433,7 @@
     "Failure_Multisig_Loop": "Validation failed because a multisig loop is created",
     "Failure_Multisig_Max_Multisig_Depth": "Validation failed because the max multisig depth is exceeded",
     "Failure_Multisig_Operation_Prohibited_By_Account": "Validation failed because an operation is not permitted by a multisig account",
-    "Failure_Namespace_Invalid_Duration": "Validation failed because the duration has an invalid value",
+    "Failure_Namespace_Invalid_Duration": "Validation failed because the namespace's duration has an invalid value",
     "Failure_Namespace_Invalid_Name": "Validation failed because the name is invalid",
     "Failure_Namespace_Name_Id_Mismatch": "Validation failed because the name and id don't match",
     "Failure_Namespace_Expired": "Validation failed because the parent is expired",
@@ -505,7 +506,7 @@
     "generate_mnemonic_title": "Generate your mnemonic passphrase",
     "generating_mnemonic": "Next",
     "getting_a_mnemonic_equals_ownership_of_a_account_asset": "This mnemonic passphrase is enough to take the control of all the assets of a profile.",
-    "go_to_login": "Click here to login now",
+    "go_to_login": "Click here to log in now",
     "harvested_blocks": "Harvested Blocks",
     "harvesting": "Harvesting",
     "harvesting_account_insufficient_balance": "Insufficient balance, the account needs to hold at least 10000 XYMs to start delegated harvesting.",
@@ -546,7 +547,8 @@
     "import": "Import",
     "import_address_book": "Import address book",
     "import_mnemonic": "Import mnemonic",
-    "import_mnemonic_passphrase_create_profile": "Import profile",
+    "import_profile": "Import Profile",
+    "import_mnemonic_passphrase": "Import a mnemonic passphrase",
     "import_private_key": "Import Private Key",
     "import_private_key_account_successfully": "Congratulations, Private key account imported successfully.",
     "import_private_key_account_successfully_title_tips": "The current profile was created using a private key. It is not possible to add other accounts to it. Hope you have a pleasant experience and journey.",
@@ -610,9 +612,9 @@
     "link_keys": "Link all keys",
     "loading": "Loading...",
     "locked_mosaic": "locked mosaic",
-    "login": "Login",
-    "login_to_symbol_account": "Login to your Symbol account",
-    "logout": "Logout",
+    "login": "Log in",
+    "login_to_symbol_account": "Log in to your Symbol profile",
+    "logout": "Log out",
     "low_fee_warning_message": "Transactions with less than the average fee might not get accepted and eventually expire",
     "max_approval_amount_more_than_10": "The maximum number of co-signatories needed for approval cannot exceed 10",
     "max_decimal_number_error": "The {_field_} field must have {maxDecimalNumber} decimals or less.",
@@ -814,7 +816,7 @@
     "profile_name": "Profile name",
     "profile_name_already_exists": "Profile name already taken",
     "profile_name_error": "Invalid profile name",
-    "profile_not_matching_network_option_1": "Logout and change profile",
+    "profile_not_matching_network_option_1": "Log out and change profile",
     "profile_not_matching_network_option_2": "Create new profile",
     "profile_not_matching_network_option_3": "Close and switch network",
     "profile_not_matching_network_warning_message": "Your profile's network does not match the current network. Please select one of the following options to resolve the issue.",
@@ -983,6 +985,7 @@
     "transaction_descriptor_17220": "Namespace metadata",
     "transaction_descriptor_17230": "Mosaic alias",
     "transaction_descriptor_17232": "Account operation restriction",
+    "transaction_descriptor_harvesting": "Delegated Harvesting",
     "transaction_details": "Transaction details",
     "transaction_expired": "Transaction has expired",
     "transaction_has_cosignature": "Co-signatures received",
@@ -1090,7 +1093,7 @@
     "offline_transactions_success_text": "You can now download this QR code or copy the JSON text above and broadcast it using an online wallet or symbol-cli.",
     "signed_transaction_qr": "Signed Transaction QR",
     "go_to_offline_transactions": "Go to offline transactions",
-    "go_to_login_offline": "Go to login",
+    "go_to_login_offline": "Go to login screen",
     "cosign_transaction": "Cosign transaction",
     "offline_transactions_import_qr": "Import Cosignature",
     "offline_transactions_chose_account": "Sign Transaction",
@@ -1117,5 +1120,6 @@
     "optin_postlaunch_tx_completed_amount": "The amount you have received:",
     "optin_postlaunch_tx_nis_address": "Opted-in NEM NIS1 account",
     "show_details": "Show details",
-    "hide_details": "Hide details"
+    "hide_details": "Hide details",
+    "transaction_signed": "Signed Successfully"
 }
diff --git a/src/language/ja-JP.json b/src/language/ja-JP.json
index 5ed61279c..078f687c2 100644
--- a/src/language/ja-JP.json
+++ b/src/language/ja-JP.json
@@ -172,6 +172,7 @@
     "cosignature_qr_action_desc": "トランザクション詳細ページに進み、署名してください",
     "create_a_new_account": "プロファイルを新規作成",
     "create_a_new_profile": "プロファイルを新規作成",
+    "create_mnemonic_passphrase": "ニーモニックパスフレーズを作成する",
     "create_lock_check_pw_remind": "2つのパスワードが一致しません",
     "create_lock_pw_remind": "パスワード設定エラー",
     "create_lock_pw_txt_remind": "パスワードヒントのエラー",
@@ -546,7 +547,8 @@
     "import": "インポート",
     "import_address_book": "アドレス帳をインポート",
     "import_mnemonic": "ニーモニックのインポート",
-    "import_mnemonic_passphrase_create_profile": "ニーモニックパス語群をインポートしてアカウントを作成",
+    "import_profile": "プロファイルのインポート",
+    "import_mnemonic_passphrase": "ニーモニックパスフレーズをインポートする",
     "import_private_key": "秘密鍵のインポート",
     "import_private_key_account_successfully": "おめでとう！秘密鍵アカウントが正常にインポートされました。",
     "import_private_key_account_successfully_title_tips": "現在のプロファイルは秘密鍵から作成されています。他のアカウントを追加することはできません。快適な体験と旅をお楽しみください。",
@@ -983,6 +985,7 @@
     "transaction_descriptor_17220": "ネームスペースメタデータ",
     "transaction_descriptor_17230": "モザイクエイリアス",
     "transaction_descriptor_17232": "アカウント操作制限",
+    "transaction_descriptor_harvesting": "デリゲートハーベスティング",
     "transaction_details": "トランザクション詳細",
     "transaction_expired": "トランザクション期限切れ",
     "transaction_has_cosignature": "連署名の受信",
@@ -1117,5 +1120,6 @@
     "optin_postlaunch_tx_completed_amount": "受け取った枚数",
     "optin_postlaunch_tx_nis_address": "オプトイン済みのNEM NIS1アカウント",
     "show_details": "詳細を表示",
-    "hide_details": "隠す"
+    "hide_details": "隠す",
+    "transaction_signed": "正常に署名されました"
 }
diff --git a/src/language/zh-CN.json b/src/language/zh-CN.json
index c5586be27..a2de0778f 100644
--- a/src/language/zh-CN.json
+++ b/src/language/zh-CN.json
@@ -174,6 +174,7 @@
     "create_a_new_profile": "建立一个新的账户",
     "create_lock_check_pw_remind": "两次密码不一致",
     "create_lock_pw_remind": "密码设置错误",
+    "create_mnemonic_passphrase": "创建助记密码",
     "create_lock_pw_txt_remind": "设置密码提示错误",
     "create_mnemonic": "创建新助记词账户",
     "create_profile": "创建钱包",
@@ -532,7 +533,8 @@
     "import": "进口",
     "import_address_book": "导入通讯录",
     "import_mnemonic": "导入已有助记词",
-    "import_mnemonic_passphrase_create_profile": "直接导入助记词短语以建立帐户",
+    "import_profile": "导入资料",
+    "import_mnemonic_passphrase": "导入助记密码",
     "import_private_key": "导入私钥",
     "import_private_key_account_successfully": "恭喜，私钥帐户已成功导入。",
     "import_private_key_account_successfully_title_tips": "当前配置文件是使用私钥创建的。无法向其添加其他帐户。希望您有愉快的经历和旅途。",
@@ -961,6 +963,7 @@
     "transaction_descriptor_17220": "命名空间元数据",
     "transaction_descriptor_17230": "马赛克别名",
     "transaction_descriptor_17232": "账户操作约束",
+    "transaction_descriptor_harvesting": "委托收获",
     "transaction_details": "事务细节",
     "transaction_expired": "交易已过期",
     "transaction_has_cosignature": "已接收的联合签名",
@@ -1117,5 +1120,6 @@
     "optin_postlaunch_tx_completed_amount": "您已收到的金额：",
     "optin_postlaunch_tx_nis_address": "选择加入NEM NIS1账户",
     "show_details": "显示详细信息",
-    "hide_details": "隐藏详细信息"
+    "hide_details": "隐藏详细信息",
+    "transaction_signed": "已签"
 }
diff --git a/src/services/AssetTableService/NamespaceTableService.ts b/src/services/AssetTableService/NamespaceTableService.ts
index 96cc00c97..b9aa8f4f1 100644
--- a/src/services/AssetTableService/NamespaceTableService.ts
+++ b/src/services/AssetTableService/NamespaceTableService.ts
@@ -26,6 +26,7 @@ export class NamespaceTableService extends AssetTableService {
         currentHeight: number,
         private readonly namespaces: NamespaceModel[],
         private readonly networkConfiguration: NetworkConfigurationModel,
+        private readonly showExpired: boolean,
     ) {
         super(currentHeight);
     }
@@ -46,11 +47,13 @@ export class NamespaceTableService extends AssetTableService {
     }
 
     public getTableRows(): any[] {
-        const namespaces: NamespaceModel[] = this.namespaces;
+        const showExpired: boolean = this.showExpired;
+        const namespaces: NamespaceModel[] = showExpired
+            ? this.namespaces
+            : this.namespaces.filter((ns) => !this.getExpiration(ns).expired);
 
         return namespaces.map((namespaceModel) => {
             const { expired, expiration } = this.getExpiration(namespaceModel);
-
             return {
                 hexId: namespaceModel.namespaceIdHex,
                 name: namespaceModel.name,
diff --git a/src/services/NamespaceService.ts b/src/services/NamespaceService.ts
index b287dfd4c..8e3a1a4db 100644
--- a/src/services/NamespaceService.ts
+++ b/src/services/NamespaceService.ts
@@ -94,8 +94,8 @@ export class NamespaceService {
         const expiredIn = endHeight - namespaceGracePeriodBlocks - currentHeight;
         const deletedIn = endHeight - currentHeight;
         const expiration = expired
-            ? TimeHelpers.durationToRelativeTime(expiredIn, blockGenerationTargetTime)
-            : TimeHelpers.durationToRelativeTime(deletedIn, blockGenerationTargetTime);
+            ? TimeHelpers.durationToRelativeTime(deletedIn, blockGenerationTargetTime)
+            : TimeHelpers.durationToRelativeTime(expiredIn, blockGenerationTargetTime);
         return { expired, expiration };
     }
 
diff --git a/src/store/Harvesting.ts b/src/store/Harvesting.ts
index 83912dc73..dbd26ecb0 100644
--- a/src/store/Harvesting.ts
+++ b/src/store/Harvesting.ts
@@ -147,11 +147,12 @@ export default {
         SET_POLLING_TRIALS({ commit }, pollingTrials) {
             commit('setPollingTrials', pollingTrials);
         },
-        async FETCH_STATUS({ commit, rootGetters }, nodeUrl?: string) {
+        async FETCH_STATUS({ commit, rootGetters, dispatch }, node?: []) {
             const currentSignerAccountInfo: AccountInfo = rootGetters['account/currentSignerAccountInfo'];
             // reset
             let status: HarvestingStatus;
             if (!currentSignerAccountInfo) {
+                commit('status', HarvestingStatus.INACTIVE);
                 return;
             }
             const currentSignerHarvestingModel: HarvestingModel = rootGetters['harvesting/currentSignerHarvestingModel'];
@@ -160,7 +161,8 @@ export default {
             if (currentSignerHarvestingModel) {
                 //find the node url from currentSignerHarvestingModel (localStorage)
                 const selectedNode = currentSignerHarvestingModel.selectedHarvestingNode;
-                const harvestingNodeUrl = selectedNode?.url || nodeUrl;
+                // @ts-ignore
+                const harvestingNodeUrl = selectedNode?.url || (node && !!node.length ? node[0] : '');
                 let unlockedAccounts: string[] = [];
 
                 if (harvestingNodeUrl) {
@@ -179,7 +181,7 @@ export default {
                 currentSignerAccountInfo.supplementalPublicKeys?.linked &&
                 currentSignerAccountInfo.supplementalPublicKeys?.node &&
                 currentSignerAccountInfo.supplementalPublicKeys?.vrf;
-            if (allKeysLinked) {
+            if (allKeysLinked || accountUnlocked) {
                 const pollingTrials = rootGetters['harvesting/pollingTrials'];
                 status = accountUnlocked
                     ? HarvestingStatus.ACTIVE
@@ -188,6 +190,15 @@ export default {
                         ? HarvestingStatus.FAILED
                         : HarvestingStatus.INPROGRESS_ACTIVATION
                     : HarvestingStatus.KEYS_LINKED;
+                // @ts-ignore
+                if (status === HarvestingStatus.ACTIVE && node && node[1]) {
+                    // @ts-ignore
+                    dispatch('UPDATE_ACCOUNT_SELECTED_HARVESTING_NODE', {
+                        accountAddress: currentSignerHarvestingModel.accountAddress,
+                        // @ts-ignore
+                        selectedHarvestingNode: node[1],
+                    });
+                }
             } else {
                 status = accountUnlocked ? HarvestingStatus.INPROGRESS_DEACTIVATION : HarvestingStatus.INACTIVE;
             }
diff --git a/src/store/Namespace.ts b/src/store/Namespace.ts
index 41a3c310d..6d6960b01 100644
--- a/src/store/Namespace.ts
+++ b/src/store/Namespace.ts
@@ -79,7 +79,7 @@ export default {
             });
 
             // if it's a refresh request then refresh the list, else concat the new items to the list
-            state.ownedNamespaces = refresh ? uniqueNamespaces : state.ownedNamespaces.concat(uniqueNamespaces);
+            state.ownedNamespaces = refresh ? uniqueNamespaces : _.uniqBy(state.ownedNamespaces.concat(uniqueNamespaces), 'namespaceIdHex');
             state.currentConfirmedPage = pageInfo;
         },
         isFetchingNamespaces: (state: NamespaceState, isFetchingNamespaces: boolean) =>
diff --git a/src/store/Network.ts b/src/store/Network.ts
index 65767d077..17a912406 100644
--- a/src/store/Network.ts
+++ b/src/store/Network.ts
@@ -92,7 +92,6 @@ interface NetworkState {
     rentalFeeEstimation: RentalFees;
     networkIsNotMatchingProfile: boolean;
     peerNodes: NodeInfo[];
-    harvestingPeerNodes: NodeInfo[];
     connectingToNodeInfo: ConnectingToNodeInfo;
     isOfflineMode: boolean;
     feesConfig: any;
@@ -117,7 +116,6 @@ const initialNetworkState: NetworkState = {
     epochAdjustment: undefined,
     networkIsNotMatchingProfile: false,
     peerNodes: [],
-    harvestingPeerNodes: [],
     connectingToNodeInfo: undefined,
     isOfflineMode: false,
     feesConfig: undefined,
@@ -145,7 +143,6 @@ export default {
         rentalFeeEstimation: (state: NetworkState) => state.rentalFeeEstimation,
         networkIsNotMatchingProfile: (state: NetworkState) => state.networkIsNotMatchingProfile,
         peerNodes: (state: NetworkState) => state.peerNodes,
-        harvestingPeerNodes: (state: NetworkState) => state.harvestingPeerNodes,
         connectingToNodeInfo: (state: NetworkState) => state.connectingToNodeInfo,
         isOfflineMode: (state: NetworkState) => state.isOfflineMode,
         feesConfig: (state: NetworkState) => state.feesConfig,
@@ -219,8 +216,6 @@ export default {
             Vue.set(state, 'subscriptions', [...subscriptions, payload]);
         },
         peerNodes: (state: NetworkState, peerNodes: NodeInfo[]) => Vue.set(state, 'peerNodes', peerNodes),
-        harvestingPeerNodes: (state: NetworkState, harvestingPeerNodes: NodeInfo[]) =>
-            Vue.set(state, 'harvestingPeerNodes', harvestingPeerNodes),
         connectingToNodeInfo: (state: NetworkState, connectingToNodeInfo: ConnectingToNodeInfo) =>
             Vue.set(state, 'connectingToNodeInfo', connectingToNodeInfo),
         setFeesConfig: (state: NetworkState, feesConfig: {}) => {
@@ -502,11 +497,16 @@ export default {
         SET_NETWORK_IS_NOT_MATCHING_PROFILE({ commit }, networkIsNotMatchingProfile) {
             commit('networkIsNotMatchingProfile', networkIsNotMatchingProfile);
         },
-        ADD_KNOWN_PEER({ commit }, peerUrl) {
+        async ADD_KNOWN_PEER({ commit, rootGetters, dispatch }, peerUrl) {
             if (!UrlValidator.validate(peerUrl)) {
                 throw Error('Cannot add node. URL is not valid: ' + peerUrl);
             }
             commit('addPeer', peerUrl);
+            const repositoryFactory = rootGetters['network/repositoryFactory'];
+            const isConnected = rootGetters['network/isConnected'];
+            if (!repositoryFactory || !isConnected) {
+                await dispatch('SET_CURRENT_PEER', peerUrl);
+            }
         },
         REMOVE_KNOWN_PEER({ commit }, peerUrl) {
             commit('removePeer', peerUrl);
@@ -533,10 +533,8 @@ export default {
         async LOAD_PEER_NODES({ commit, rootGetters }) {
             const repositoryFactory: RepositoryFactory = rootGetters['network/repositoryFactory'];
             const nodeRepository = repositoryFactory.createNodeRepository();
-
             const peerNodes: NodeInfo[] = await nodeRepository.getNodePeers().toPromise();
-            const allNodes = peerNodes.sort((a, b) => a.host.localeCompare(b.host));
-            commit('peerNodes', _.uniqBy(allNodes, 'host'));
+            commit('peerNodes', _.uniqBy(peerNodes, 'host'));
         },
         // TODO :: re-apply that behavior if red screen issue fixed
         // load nodes that eligible for delegate harvesting
@@ -614,12 +612,12 @@ export default {
         },
 
         LOAD_TRANSACTION_FEES({ commit, rootGetters }) {
+            commit('setFeesConfig', feesConfig);
             const repositoryFactory: RepositoryFactory = rootGetters['network/repositoryFactory'];
             const networkRepository = repositoryFactory.createNetworkRepository();
             networkRepository.getTransactionFees().subscribe((fees: TransactionFees) => {
                 commit('transactionFees', fees);
             });
-            commit('setFeesConfig', feesConfig);
         },
     },
 };
diff --git a/src/store/Profile.ts b/src/store/Profile.ts
index 88f2085b6..d2bc0edee 100644
--- a/src/store/Profile.ts
+++ b/src/store/Profile.ts
@@ -33,6 +33,7 @@ interface ProfileState {
     currentProfile: ProfileModel;
     isAuthenticated: boolean;
     isSettingsVisible: boolean;
+    isNetworkSettingsSelected: boolean;
 }
 
 const profileState: ProfileState = {
@@ -40,6 +41,7 @@ const profileState: ProfileState = {
     currentProfile: null,
     isAuthenticated: false,
     isSettingsVisible: false,
+    isNetworkSettingsSelected: false,
 };
 export default {
     namespaced: true,
@@ -52,6 +54,7 @@ export default {
         isPrivateKeyProfile: (state: ProfileState): boolean => {
             return state.currentProfile ? !state.currentProfile.seed : false;
         },
+        isNetworkSettingsSelected: (state: ProfileState) => state.isNetworkSettingsSelected,
     },
     mutations: {
         setInitialized: (state: ProfileState, initialized: boolean) => {
@@ -62,6 +65,9 @@ export default {
         toggleSettings: (state: ProfileState) => {
             state.isSettingsVisible = !state.isSettingsVisible;
         },
+        toggleNetworkSettings: (state: ProfileState, networkTabSelector: boolean) => {
+            state.isNetworkSettingsSelected = networkTabSelector;
+        },
     },
     actions: {
         async initialize({ commit, getters }) {
diff --git a/src/store/Statistics.ts b/src/store/Statistics.ts
index 3c244b11c..7338e8e0e 100644
--- a/src/store/Statistics.ts
+++ b/src/store/Statistics.ts
@@ -39,10 +39,10 @@ export default {
     },
     actions: {
         async LOAD({ commit, rootGetters }) {
-            commit('countTransactions', 0);
-            commit('countBlocks', 0);
-            commit('countAccounts', 0);
-            commit('countNodes', 0);
+            let countTransactions = 0;
+            let countBlocks = 0;
+            let countAccounts = 0;
+            let countNodes = 0;
 
             const repositoryFactory = rootGetters['network/repositoryFactory'] as RepositoryFactory;
             const nodeHttp = repositoryFactory.createNodeRepository();
@@ -51,11 +51,15 @@ export default {
 
             const diagnostic: StorageInfo = await storageInfoPromise;
             const nodes = await nodePeersPromise;
+            countTransactions = diagnostic.numTransactions;
+            countBlocks = diagnostic.numBlocks;
+            countAccounts = diagnostic.numAccounts;
+            countNodes = nodes.length;
 
-            commit('countTransactions', diagnostic.numTransactions);
-            commit('countBlocks', diagnostic.numBlocks);
-            commit('countAccounts', diagnostic.numAccounts);
-            commit('countNodes', nodes.length);
+            commit('countTransactions', countTransactions);
+            commit('countBlocks', countBlocks);
+            commit('countAccounts', countAccounts);
+            commit('countNodes', countNodes);
         },
     },
 };
diff --git a/src/store/Transaction.ts b/src/store/Transaction.ts
index 2c4b37092..67d41c979 100644
--- a/src/store/Transaction.ts
+++ b/src/store/Transaction.ts
@@ -522,7 +522,11 @@ export default {
             // update the partial transaction cosignatures
             transactions[index] = transactions[index].addCosignatures([cosignature]);
 
-            commit('partialTransactions', transactions);
+            commit('partialTransactions', {
+                transactions: transactions,
+                refresh: true,
+                pageInfo: getters['currentConfirmedPage'],
+            });
             commit('setAllTransactions');
             commit('filterTransactions', {
                 filterOption: null,
diff --git a/src/views/forms/FormAggregateTransaction/FormAggregateTransaction.less b/src/views/forms/FormAggregateTransaction/FormAggregateTransaction.less
index 3602cc1ce..2e5f1a5c3 100644
--- a/src/views/forms/FormAggregateTransaction/FormAggregateTransaction.less
+++ b/src/views/forms/FormAggregateTransaction/FormAggregateTransaction.less
@@ -204,6 +204,7 @@
     display: grid;
     grid-template-rows: auto 1fr;
     height: 100%;
+    overflow: auto;
 }
 
 .transaction-form-container {
diff --git a/src/views/forms/FormMosaicSupplyChangeTransaction/FormMosaicSupplyChangeTransaction.vue b/src/views/forms/FormMosaicSupplyChangeTransaction/FormMosaicSupplyChangeTransaction.vue
index b70354101..ba97b7034 100644
--- a/src/views/forms/FormMosaicSupplyChangeTransaction/FormMosaicSupplyChangeTransaction.vue
+++ b/src/views/forms/FormMosaicSupplyChangeTransaction/FormMosaicSupplyChangeTransaction.vue
@@ -124,4 +124,7 @@ export default class FormMosaicSupplyChangeTransaction extends FormMosaicSupplyC
     height: 0.3rem !important;
     width: 1.2rem;
 }
+/deep/.form-row-inner-container {
+    grid-template-columns: 3rem 6.5rem !important;
+}
 </style>
diff --git a/src/views/forms/FormMosaicSupplyChangeTransaction/FormMosaicSupplyChangeTransactionTs.ts b/src/views/forms/FormMosaicSupplyChangeTransaction/FormMosaicSupplyChangeTransactionTs.ts
index 349a18635..a83a158b2 100644
--- a/src/views/forms/FormMosaicSupplyChangeTransaction/FormMosaicSupplyChangeTransactionTs.ts
+++ b/src/views/forms/FormMosaicSupplyChangeTransaction/FormMosaicSupplyChangeTransactionTs.ts
@@ -245,7 +245,9 @@ export class FormMosaicSupplyChangeTransactionTs extends FormTransactionBase {
     }
 
     get ownedTargetHexIds(): string[] {
-        return this.holdMosaics.filter((m) => m.ownerRawPlain === this.currentAccount.address).map(({ mosaicIdHex }) => mosaicIdHex);
+        return this.holdMosaics
+            .filter((m) => m.ownerRawPlain === this.currentAccount.address && m.supplyMutable)
+            .map(({ mosaicIdHex }) => mosaicIdHex);
     }
 
     public emitToAggregate() {
diff --git a/src/views/forms/FormMultisigAccountModificationTransaction/FormMultisigAccountModificationTransactionTs.ts b/src/views/forms/FormMultisigAccountModificationTransaction/FormMultisigAccountModificationTransactionTs.ts
index 9a7af4f56..edb68708f 100644
--- a/src/views/forms/FormMultisigAccountModificationTransaction/FormMultisigAccountModificationTransactionTs.ts
+++ b/src/views/forms/FormMultisigAccountModificationTransaction/FormMultisigAccountModificationTransactionTs.ts
@@ -16,10 +16,9 @@
 // external dependencies
 import { MultisigAccountInfo, MultisigAccountModificationTransaction, UInt64, Address } from 'symbol-sdk';
 import { Component, Prop, Vue } from 'vue-property-decorator';
+import { ValidationObserver, ValidationProvider } from 'vee-validate';
 // internal dependencies
 import { FormTransactionBase } from '@/views/forms/FormTransactionBase/FormTransactionBase';
-// child components
-import { ValidationObserver, ValidationProvider } from 'vee-validate';
 // @ts-ignore
 import FormWrapper from '@/components/FormWrapper/FormWrapper.vue';
 // @ts-ignore
diff --git a/src/views/forms/FormPersistentDelegationRequestTransaction/FormPersistentDelegationRequestTransaction.less b/src/views/forms/FormPersistentDelegationRequestTransaction/FormPersistentDelegationRequestTransaction.less
index 03e5d9faf..21e192173 100644
--- a/src/views/forms/FormPersistentDelegationRequestTransaction/FormPersistentDelegationRequestTransaction.less
+++ b/src/views/forms/FormPersistentDelegationRequestTransaction/FormPersistentDelegationRequestTransaction.less
@@ -163,7 +163,6 @@ a:hover {
     padding-left: 0.15rem;
     padding-top: 4px;
     float: left;
-    margin-top: 7px;
 }
 
 .separtate-spacing {
diff --git a/src/views/forms/FormPersistentDelegationRequestTransaction/FormPersistentDelegationRequestTransactionTs.ts b/src/views/forms/FormPersistentDelegationRequestTransaction/FormPersistentDelegationRequestTransactionTs.ts
index 68f84262b..71a36588a 100644
--- a/src/views/forms/FormPersistentDelegationRequestTransaction/FormPersistentDelegationRequestTransactionTs.ts
+++ b/src/views/forms/FormPersistentDelegationRequestTransaction/FormPersistentDelegationRequestTransactionTs.ts
@@ -211,10 +211,11 @@ export class FormPersistentDelegationRequestTransactionTs extends FormTransactio
 
     private activating = false;
     private feesConfig: {
-        median: number;
         fast: number;
+        median: number;
         slow: number;
         slowest: number;
+        free: number;
     };
     /**
      * Current account owned mosaics
diff --git a/src/views/forms/FormProfileCreation/FormProfileCreationTs.ts b/src/views/forms/FormProfileCreation/FormProfileCreationTs.ts
index 18856b7aa..d301d3868 100644
--- a/src/views/forms/FormProfileCreation/FormProfileCreationTs.ts
+++ b/src/views/forms/FormProfileCreation/FormProfileCreationTs.ts
@@ -176,6 +176,7 @@ export class FormProfileCreationTs extends Vue {
                 case 27904:
                     this.$store.dispatch('notification/ADD_ERROR', 'ledger_not_opened_app');
                     return;
+                case 25871:
                 case 27264:
                     this.$store.dispatch('notification/ADD_ERROR', 'ledger_not_using_xym_app');
                     return;
diff --git a/src/views/forms/FormTransferTransaction/FormTransferTransactionTs.ts b/src/views/forms/FormTransferTransaction/FormTransferTransactionTs.ts
index b341a3587..3f3262949 100644
--- a/src/views/forms/FormTransferTransaction/FormTransferTransactionTs.ts
+++ b/src/views/forms/FormTransferTransaction/FormTransferTransactionTs.ts
@@ -243,10 +243,11 @@ export class FormTransferTransactionTs extends FormTransactionBase {
 
     private plainMessage: string;
     private feesConfig: {
-        median: number;
         fast: number;
+        median: number;
         slow: number;
         slowest: number;
+        free: number;
     };
     private transactionSize: number = 0;
     /**
diff --git a/src/views/layout/PageLayout/PageLayout.less b/src/views/layout/PageLayout/PageLayout.less
index f641c0ef4..144800c66 100644
--- a/src/views/layout/PageLayout/PageLayout.less
+++ b/src/views/layout/PageLayout/PageLayout.less
@@ -31,9 +31,9 @@
     .alert {
         margin-left: 50%;
         left: -380px;
-        top: 10px;
+        top: 0;
         position: absolute;
-        z-index: 999999999;
+        z-index: 10;
         min-width: 765px;
         font-size: 16px;
         line-height: 40px;
diff --git a/src/views/layout/PageLayout/PageLayout.vue b/src/views/layout/PageLayout/PageLayout.vue
index 74d11c6ae..b8cdf6f16 100644
--- a/src/views/layout/PageLayout/PageLayout.vue
+++ b/src/views/layout/PageLayout/PageLayout.vue
@@ -4,7 +4,7 @@
             <Alert class="alert warning_alert" type="error">
                 <Icon type="ios-warning-outline" />
                 {{ $t(`${alert.message}`) }}
-                <a v-if="alert.showRetry" @click="reconnect">{{ $t('click_to_retry') }}</a>
+                <a v-if="alert.showRetry" @click="reconnect">{{ ` ${'(' + $t('click_to_retry') + ')'}` }}</a>
             </Alert>
         </div>
         <div v-else-if="info.show">
diff --git a/src/views/modals/ModalSettings/ModalSettings.less b/src/views/modals/ModalSettings/ModalSettings.less
index ed7348565..7b699a970 100644
--- a/src/views/modals/ModalSettings/ModalSettings.less
+++ b/src/views/modals/ModalSettings/ModalSettings.less
@@ -1,8 +1,8 @@
 @import '../../resources/css/variables.less';
 
 .settings-modal-container {
-    overflow-y: auto;
     /deep/.ivu-modal {
+        height: 6.8rem;
         .auto-complete-size {
             width: 100%;
         }
@@ -10,15 +10,19 @@
 
     .settings-container {
         display: grid;
+        height: 100%;
         grid-template-columns: 20% 80%;
         padding: 0 !important;
         margin: -0.15rem -0.3rem;
     }
 }
-
+/deep/.ivu-modal-body {
+    max-height: none;
+    overflow-y: hidden;
+    height: 6.8rem;
+    padding: 0.15rem 0.3rem;
+}
 .nav-links-wrapper {
-    border-right: 2px solid @grayLight;
-
     .header-container {
         padding-left: 0.25rem;
         padding-top: 0.25rem;
diff --git a/src/views/modals/ModalSettings/ModalSettingsTs.ts b/src/views/modals/ModalSettings/ModalSettingsTs.ts
index 398cfdcfe..b59b20151 100644
--- a/src/views/modals/ModalSettings/ModalSettingsTs.ts
+++ b/src/views/modals/ModalSettings/ModalSettingsTs.ts
@@ -39,6 +39,7 @@ enum SettingsTabs {
 export class ModalSettingsTs extends Vue {
     /// region component properties
     @Prop({ default: false }) visible: boolean;
+    @Prop({ default: false }) networkSettingsSelected: boolean;
     /// end-region component properties
 
     /**
@@ -68,6 +69,9 @@ export class ModalSettingsTs extends Vue {
     created() {
         // when on /profiles route, only the NETWORK tab should be displayed
         this.availableTabs = this.availableTabs.filter((key) => !!this.currentAccount || key === 'NETWORK');
+        if (this.networkSettingsSelected) {
+            this.currentTabIndex = 2;
+        }
     }
 
     /**
diff --git a/src/views/pages/accounts/Accounts.vue b/src/views/pages/accounts/Accounts.vue
index df1a94b36..12d833fbb 100644
--- a/src/views/pages/accounts/Accounts.vue
+++ b/src/views/pages/accounts/Accounts.vue
@@ -22,7 +22,7 @@
                 <Poptip placement="bottom-end" class="endpoint-poptip">
                     <div class="button-container">
                         <div class="header-end">
-                            <ButtonAdd :disabled="false" />
+                            <ButtonAdd :size="24" :disabled="false" />
                         </div>
                     </div>
                     <div slot="content" class="node-selector-container">
diff --git a/src/views/pages/profiles/LoginPage.vue b/src/views/pages/profiles/LoginPage.vue
index a1422b181..4c871a24c 100644
--- a/src/views/pages/profiles/LoginPage.vue
+++ b/src/views/pages/profiles/LoginPage.vue
@@ -106,7 +106,7 @@
                                         }
                                     "
                                 >
-                                    {{ $t('create_a_new_account') }}?
+                                    {{ $t('create_a_new_account') }}
                                 </span>
                             </div>
                             <div v-if="formItems.hasHint && !!getPasswordHint().length" class="hint">
diff --git a/src/views/pages/profiles/access-ledger/account-selection/AccountSelection.vue b/src/views/pages/profiles/access-ledger/account-selection/AccountSelection.vue
index f70618207..302a28b70 100644
--- a/src/views/pages/profiles/access-ledger/account-selection/AccountSelection.vue
+++ b/src/views/pages/profiles/access-ledger/account-selection/AccountSelection.vue
@@ -1,5 +1,9 @@
 <template>
-    <div class="account-selection-container" @keyup.enter="submit">
+    <div
+        v-if="!!Object.keys(addressBalanceMap).length || !!Object.keys(optInAddressBalanceMap).length"
+        class="account-selection-container"
+        @keyup.enter="submit"
+    >
         <div class="dialog-sub-tips">
             {{ $t('address_to_interact_with') }}
         </div>
@@ -48,6 +52,9 @@
             </button>
         </div>
     </div>
+    <div v-else>
+        <Spin size="large" fix class="absolute" />
+    </div>
 </template>
 
 <script>
diff --git a/src/views/pages/profiles/create-profile/verify-mnemonic/VerifyMnemonic.vue b/src/views/pages/profiles/create-profile/verify-mnemonic/VerifyMnemonic.vue
index e0f6a1783..e71f946d7 100644
--- a/src/views/pages/profiles/create-profile/verify-mnemonic/VerifyMnemonic.vue
+++ b/src/views/pages/profiles/create-profile/verify-mnemonic/VerifyMnemonic.vue
@@ -1,5 +1,12 @@
 <template>
     <div class="check-mnemonic-sec">
+        <div
+            v-if="currentProfile.networkType === networkType.TEST_NET"
+            class="skip pointer"
+            @click="$router.push({ name: 'profiles.createProfile.finalize' })"
+        >
+            {{ $t('skip') }}
+        </div>
         <p class="set-title-create">
             {{ $t('verify_mnemonics') }}
         </p>
diff --git a/src/views/pages/profiles/import-profile/account-selection/AccountSelection.vue b/src/views/pages/profiles/import-profile/account-selection/AccountSelection.vue
index 6c2f1a27b..599953c7e 100644
--- a/src/views/pages/profiles/import-profile/account-selection/AccountSelection.vue
+++ b/src/views/pages/profiles/import-profile/account-selection/AccountSelection.vue
@@ -1,5 +1,9 @@
 <template>
-    <div class="account-selection-container" @keyup.enter="submit">
+    <div
+        v-if="!!Object.keys(addressBalanceMap).length || !!Object.keys(optInAddressBalanceMap).length"
+        class="account-selection-container"
+        @keyup.enter="submit"
+    >
         <div class="dialog-sub-tips">
             {{ $t('address_to_interact_with') }}
         </div>
@@ -47,6 +51,9 @@
             </button>
         </div>
     </div>
+    <div v-else>
+        <Spin size="large" fix class="absolute" />
+    </div>
 </template>
 
 <script>
diff --git a/src/views/pages/profiles/import-profile/account-selection/AccountSelectionTs.ts b/src/views/pages/profiles/import-profile/account-selection/AccountSelectionTs.ts
index 0a41f30b5..c7cee0c23 100644
--- a/src/views/pages/profiles/import-profile/account-selection/AccountSelectionTs.ts
+++ b/src/views/pages/profiles/import-profile/account-selection/AccountSelectionTs.ts
@@ -151,11 +151,9 @@ export default class AccountSelectionTs extends Vue {
         this.derivation = new DerivationService(this.currentProfile.networkType);
         this.accountService = new AccountService();
 
-        Vue.nextTick().then(() => {
-            setTimeout(() => {
-                this.initAccounts();
-                this.initOptInAccounts();
-            }, 200);
+        Vue.nextTick().then(async () => {
+            await this.initAccounts();
+            await this.initOptInAccounts();
         });
     }
 
@@ -182,22 +180,32 @@ export default class AccountSelectionTs extends Vue {
      */
     private async initAccounts() {
         // - generate addresses
-        this.addressesList = this.accountService.getAddressesFromMnemonic(
-            new MnemonicPassPhrase(this.currentMnemonic),
-            this.currentProfile.networkType,
-            10,
-        );
-        const repositoryFactory = this.$store.getters['network/repositoryFactory'] as RepositoryFactory;
-        // fetch accounts info
-        const accountsInfo = await repositoryFactory.createAccountRepository().getAccountsInfo(this.addressesList).toPromise();
-        if (!accountsInfo) {
-            return;
+        try {
+            this.addressesList = this.accountService.getAddressesFromMnemonic(
+                new MnemonicPassPhrase(this.currentMnemonic),
+                this.currentProfile.networkType,
+                10,
+            );
+            const repositoryFactory = this.$store.getters['network/repositoryFactory'] as RepositoryFactory;
+            // fetch accounts info
+            if (repositoryFactory) {
+                const accountsInfo = await repositoryFactory.createAccountRepository().getAccountsInfo(this.addressesList).toPromise();
+                if (!accountsInfo) {
+                    return;
+                }
+
+                // map balances
+                this.addressBalanceMap = {
+                    ...this.addressBalanceMap,
+                    ...this.mapBalanceByAddress(accountsInfo, this.networkMosaic, this.addressesList),
+                };
+            } else {
+                this.$store.dispatch('notification/ADD_ERROR', 'symbol_node_cannot_connect');
+                return;
+            }
+        } catch (error) {
+            console.log(error);
         }
-        // map balances
-        this.addressBalanceMap = {
-            ...this.addressBalanceMap,
-            ...this.mapBalanceByAddress(accountsInfo, this.networkMosaic, this.addressesList),
-        };
     }
 
     /**
@@ -205,35 +213,44 @@ export default class AccountSelectionTs extends Vue {
      * @return {void}
      */
     private async initOptInAccounts() {
-        // - generate addresses
-        const possibleOptInAccounts = this.accountService.generateAccountsFromMnemonic(
-            new MnemonicPassPhrase(this.currentMnemonic),
-            this.currentProfile.networkType,
-            10,
-            Network.BITCOIN,
-        );
+        try {
+            // - generate addresses
+            const possibleOptInAccounts = this.accountService.generateAccountsFromMnemonic(
+                new MnemonicPassPhrase(this.currentMnemonic),
+                this.currentProfile.networkType,
+                10,
+                Network.BITCOIN,
+            );
 
-        // whitelist opt in accounts
-        const key = this.currentProfile.networkType === NetworkType.MAIN_NET ? 'mainnet' : 'testnet';
-        const whitelisted = process.env.KEYS_WHITELIST[key];
-        const optInAccounts = possibleOptInAccounts
-            .map((optinAccount, index) => ({ account: optinAccount, index: index }))
-            .filter((account) => whitelisted.indexOf(account.account.publicKey) >= 0)
-            .map((account) => ({ address: account.account.address, index: account.index }));
-        if (optInAccounts.length === 0) {
-            return;
-        }
-        this.optInAddressesList = optInAccounts;
+            // whitelist opt in accounts
+            const key = this.currentProfile.networkType === NetworkType.MAIN_NET ? 'mainnet' : 'testnet';
+            const whitelisted = process.env.KEYS_WHITELIST[key];
+            const optInAccounts = possibleOptInAccounts
+                .map((optinAccount, index) => ({ account: optinAccount, index: index }))
+                .filter((account) => whitelisted.indexOf(account.account.publicKey) >= 0)
+                .map((account) => ({ address: account.account.address, index: account.index }));
+            if (optInAccounts.length === 0) {
+                return;
+            }
+            this.optInAddressesList = optInAccounts;
 
-        const optInAddresses = this.optInAddressesList.map((account) => account.address);
-        // fetch accounts info
-        const repositoryFactory = this.$store.getters['network/repositoryFactory'] as RepositoryFactory;
-        const accountsInfo = await repositoryFactory.createAccountRepository().getAccountsInfo(optInAddresses).toPromise();
-        // map balances
-        this.optInAddressBalanceMap = {
-            ...this.optInAddressBalanceMap,
-            ...this.mapBalanceByAddress(accountsInfo, this.networkMosaic, optInAddresses),
-        };
+            const optInAddresses = this.optInAddressesList.map((account) => account.address);
+            // fetch accounts info
+            const repositoryFactory = this.$store.getters['network/repositoryFactory'] as RepositoryFactory;
+            if (repositoryFactory) {
+                const accountsInfo = await repositoryFactory.createAccountRepository().getAccountsInfo(optInAddresses).toPromise();
+                // map balances
+                this.optInAddressBalanceMap = {
+                    ...this.optInAddressBalanceMap,
+                    ...this.mapBalanceByAddress(accountsInfo, this.networkMosaic, optInAddresses),
+                };
+            } else {
+                this.$store.dispatch('notification/ADD_ERROR', 'symbol_node_cannot_connect');
+                return;
+            }
+        } catch (error) {
+            console.log(error);
+        }
     }
 
     public mapBalanceByAddress(accountsInfo: AccountInfo[], mosaicId: MosaicId, addressList: Address[]): { [address: string]: number } {
diff --git a/src/views/pages/profiles/import-profile/import-strategy/ImportStrategyTs.ts b/src/views/pages/profiles/import-profile/import-strategy/ImportStrategyTs.ts
index 37a32f558..ddbcc3164 100644
--- a/src/views/pages/profiles/import-profile/import-strategy/ImportStrategyTs.ts
+++ b/src/views/pages/profiles/import-profile/import-strategy/ImportStrategyTs.ts
@@ -27,14 +27,14 @@ export default class ImportStrategyTs extends Vue {
     public importInfoList = [
         {
             image: walletTypeImages.createImg,
-            title: 'create_mnemonic',
-            description: 'create_a_new_profile',
+            title: 'create_profile',
+            description: 'create_mnemonic_passphrase',
             route: 'profiles.createProfile.info',
         },
         {
             image: walletTypeImages.seedImg,
-            title: 'import_mnemonic',
-            description: 'import_mnemonic_passphrase_create_profile',
+            title: 'import_profile',
+            description: 'import_mnemonic_passphrase',
             route: 'profiles.importProfile.info',
         },
         {

From 7d0c48ca72433ad2cb7ad2e6353dfa116e688a56 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Carrera?= <adria.cm95@gmail.com>
Date: Thu, 24 Jun 2021 02:38:51 +0200
Subject: [PATCH 05/30] Fix account restrictions UI (#1556)

---
 .../ModalAccountRestrictions/ModalAccountRestrictions.less  | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/views/modals/ModalAccountRestrictions/ModalAccountRestrictions.less b/src/views/modals/ModalAccountRestrictions/ModalAccountRestrictions.less
index 10c2d1cba..e3e059539 100644
--- a/src/views/modals/ModalAccountRestrictions/ModalAccountRestrictions.less
+++ b/src/views/modals/ModalAccountRestrictions/ModalAccountRestrictions.less
@@ -19,8 +19,10 @@
 }
 
 .main-container {
-    padding: 45px;
-    height: 6rem;
+    padding: 0.25rem 0.25rem 0 0.25rem;
+    height: 60vh;
+    min-height: 4rem;
+    max-height: 6.5rem;
 }
 
 .tab-footer {

From fa8a9b5ee1db7ed9402295912054b54beb2680c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Carrera?= <adria.cm95@gmail.com>
Date: Thu, 24 Jun 2021 02:39:21 +0200
Subject: [PATCH 06/30] Fix harvesting not showing 25% of the beneficiary
 (#1555)

---
 src/store/Harvesting.ts | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/store/Harvesting.ts b/src/store/Harvesting.ts
index dbd26ecb0..a813a3b64 100644
--- a/src/store/Harvesting.ts
+++ b/src/store/Harvesting.ts
@@ -232,9 +232,13 @@ export default {
                             (t) =>
                                 (({
                                     blockNo: t.height,
-                                    fee: (t.receipts as BalanceChangeReceipt[]).find(
-                                        (r) => r.targetAddress.plain() === targetAddress.plain(),
-                                    )?.amount,
+                                    fee: (t.receipts as BalanceChangeReceipt[]).reduce((acc, r) => {
+                                        if (r.targetAddress && r.targetAddress.plain() === targetAddress.plain()) {
+                                            return acc.add(r.amount);
+                                        } else {
+                                            return acc;
+                                        }
+                                    }, UInt64.fromUint(0)),
                                 } as unknown) as HarvestedBlock),
                         );
                         const pageInfo = { isLastPage: pageTxStatement.isLastPage, pageNumber: pageTxStatement.pageNumber };

From 29d52f642ee10c8e33fe76922fb2e42bf5426ea7 Mon Sep 17 00:00:00 2001
From: Anthony Law <yc-law1015@hotmail.com>
Date: Thu, 24 Jun 2021 08:40:09 +0800
Subject: [PATCH 07/30] Added mosaic envelop icon and tooltips for transaction
 list. (#1549)

* feat: add new icon image.

* feat: add icon and tooltip feature for mosaic and message.

* fix: adjust css for tooltips.

* fix: wrong format tooltips mosaics to relative amount.

* Update en-US.json

Co-authored-by: OlegMakarenko <33131259+OlegMakarenko@users.noreply.github.com>
---
 .../TransactionRow/TransactionRow.vue         |  44 +++++-
 .../TransactionRow/TransactionRowTs.ts        | 125 +++++++++++++++++-
 .../TransactionTable/TransactionTable.less    |  15 ++-
 src/language/en-US.json                       |   3 +-
 src/language/ja-JP.json                       |   3 +-
 src/language/zh-CN.json                       |   3 +-
 src/views/resources/Images.ts                 |   6 +
 src/views/resources/img/icons/envelope.png    | Bin 0 -> 4810 bytes
 src/views/resources/img/icons/mosaics.png     | Bin 0 -> 3592 bytes
 9 files changed, 180 insertions(+), 19 deletions(-)
 create mode 100644 src/views/resources/img/icons/envelope.png
 create mode 100644 src/views/resources/img/icons/mosaics.png

diff --git a/src/components/TransactionList/TransactionRow/TransactionRow.vue b/src/components/TransactionList/TransactionRow/TransactionRow.vue
index 333bd9dfc..0d4a0ee74 100644
--- a/src/components/TransactionList/TransactionRow/TransactionRow.vue
+++ b/src/components/TransactionList/TransactionRow/TransactionRow.vue
@@ -12,13 +12,43 @@
 
         <!-- THIRD COLUMN -->
         <div class="amount-cell">
-            <MosaicAmountDisplay
-                v-if="getAmount() !== undefined"
-                :id="getAmountMosaicId()"
-                :absolute-amount="getAmount()"
-                :color="getAmountColor()"
-                :show-ticker="isAmountShowTicker()"
-            />
+            <div v-if="hasNonNativeMosaic() || hasNetworkMosaic()">
+                <MosaicAmountDisplay
+                    v-if="hasNetworkMosaic()"
+                    :id="getAmountMosaicId()"
+                    :absolute-amount="getAmount()"
+                    :color="getAmountColor()"
+                    :show-ticker="isAmountShowTicker()"
+                />
+
+                <!-- Mosaic icon for non native mosaics. -->
+                <div v-if="hasNonNativeMosaic()" class="extend-icon-holder">
+                    <Tooltip placement="right">
+                        <img :src="getMosaicsIcon()" />
+                        <div slot="content">
+                            <!-- allow top 5 mosaics show in the tooltip -->
+                            <div v-for="mosaic in nonNativeMosaicList().slice(0, numberOfShowMosicsTooltips)" :key="mosaic.id">
+                                {{ mosaic.name }} - {{ mosaic.relativeAmount }}
+                            </div>
+
+                            <div v-if="nonNativeMosaicList().length - numberOfShowMosicsTooltips > 0">
+                                {{ $t('tooltip_mosaic_view_more', { count: nonNativeMosaicList().length - numberOfShowMosicsTooltips }) }}
+                            </div>
+                        </div>
+                    </Tooltip>
+                </div>
+
+                <!-- Message icon on transaction list -->
+                <div v-if="hasMessage()" class="extend-icon-holder">
+                    <Tooltip placement="right">
+                        <img :src="getEnvelopeIcon()" />
+                        <div slot="content">
+                            {{ messagePayload }}
+                        </div>
+                    </Tooltip>
+                </div>
+            </div>
+
             <span v-else>N/A</span>
         </div>
 
diff --git a/src/components/TransactionList/TransactionRow/TransactionRowTs.ts b/src/components/TransactionList/TransactionRow/TransactionRowTs.ts
index 7fa6a546d..25e67f92b 100644
--- a/src/components/TransactionList/TransactionRow/TransactionRowTs.ts
+++ b/src/components/TransactionList/TransactionRow/TransactionRowTs.ts
@@ -33,6 +33,7 @@ import {
 // internal dependencies
 import { Formatters } from '@/core/utils/Formatters';
 import { TimeHelpers } from '@/core/utils/TimeHelpers';
+import { MosaicModel } from '@/core/database/entities/MosaicModel';
 // child components
 // @ts-ignore
 import MosaicAmountDisplay from '@/components/MosaicAmountDisplay/MosaicAmountDisplay.vue';
@@ -48,6 +49,11 @@ import { DateTimeFormatter } from '@js-joda/core';
 import { AccountModel } from '@/core/database/entities/AccountModel';
 import { TransactionStatus as TransactionStatusEnum } from '@/core/transactions/TransactionStatus';
 
+export interface TooltipMosaics {
+    name: string;
+    relativeAmount: string;
+}
+
 @Component({
     components: {
         ActionDisplay,
@@ -60,6 +66,7 @@ import { TransactionStatus as TransactionStatusEnum } from '@/core/transactions/
         currentProfile: 'profile/currentProfile',
         currentAccount: 'account/currentAccount',
         currentAccountMultisigInfo: 'account/currentAccountMultisigInfo',
+        balanceMosaics: 'mosaic/balanceMosaics',
     }),
 })
 export class TransactionRowTs extends Vue {
@@ -117,6 +124,11 @@ export class TransactionRowTs extends Vue {
      * @type {AggregateTransaction}
      */
     private aggregateTransactionDetails: AggregateTransaction;
+    /**
+     * Get balance mosaics info.
+     * @type {AggregateTransaction}
+     */
+    private balanceMosaics: MosaicModel[];
     /**
      * Checks wether transaction is signed
      * @type {boolean}
@@ -181,20 +193,29 @@ export class TransactionRowTs extends Vue {
         return this.view.isIncoming;
     }
 
+    public getMosaicsIcon(): string {
+        return officialIcons.mosaics;
+    }
+
+    public getEnvelopeIcon(): string {
+        return officialIcons.envelope;
+    }
+
     /**
-     * Returns the amount to be shown. The first mosaic or the paid fee.
+     * Returns the XYM amount to be shown.
      */
     public getAmount(): number {
         if (this.transaction.type === TransactionType.TRANSFER) {
-            // We may prefer XYM over other mosaic if XYM is 2nd+
             const transferTransaction = this.transaction as TransferTransaction;
-            const amount = (transferTransaction.mosaics.length && transferTransaction.mosaics[0].amount.compact()) || 0;
+            const amount = transferTransaction.mosaics.find((mosaic) => mosaic.id.equals(this.networkMosaic)).amount.compact() || 0;
+
             if (!this.isIncomingTransaction()) {
                 return -amount;
             }
             return amount;
         }
-        return undefined;
+
+        return 0;
     }
 
     /**
@@ -213,9 +234,8 @@ export class TransactionRowTs extends Vue {
      */
     public getAmountMosaicId(): MosaicId | NamespaceId | undefined {
         if (this.transaction.type === TransactionType.TRANSFER) {
-            // We may prefer XYM over other mosaic if XYM is 2nd+
             const transferTransaction = this.transaction as TransferTransaction;
-            return (transferTransaction.mosaics.length && transferTransaction.mosaics[0].id) || undefined;
+            return transferTransaction.mosaics.find((mosaic) => mosaic.id.equals(this.networkMosaic)).id || undefined;
         }
         return undefined;
     }
@@ -281,6 +301,92 @@ export class TransactionRowTs extends Vue {
         }
         return;
     }
+
+    /**
+     * Check the transaction included message.
+     * @returns boolean
+     */
+    public hasMessage(): boolean {
+        if (this.transaction.type === TransactionType.TRANSFER) {
+            const transferTransaction = this.transaction as TransferTransaction;
+            const payload = transferTransaction.message.payload;
+            return typeof payload === 'string' && payload.length > 0;
+        }
+        return false;
+    }
+
+    /**
+     * Check the transaction included network mosaic (XYM).
+     * @returns boolean
+     */
+    public hasNetworkMosaic(): boolean {
+        if (this.transaction.type === TransactionType.TRANSFER) {
+            const transferTransaction = this.transaction as TransferTransaction;
+
+            return transferTransaction.mosaics.filter((mosaic) => mosaic.id.equals(this.networkMosaic)).length > 0;
+        }
+        return false;
+    }
+
+    /**
+     * Check the transaction included Non network mosaic (XYM).
+     * @returns boolean
+     */
+    public hasNonNativeMosaic(): boolean {
+        if (this.transaction.type === TransactionType.TRANSFER) {
+            const transferTransaction = this.transaction as TransferTransaction;
+
+            return transferTransaction.mosaics.filter((mosaic) => !mosaic.id.equals(this.networkMosaic)).length > 0;
+        }
+        return false;
+    }
+
+    /**
+     * Gets mosaics list excluded network mosaics.
+     * @returns
+     */
+    public nonNativeMosaicList(): TooltipMosaics[] {
+        if (this.transaction.type === TransactionType.TRANSFER) {
+            const transferTransaction = this.transaction as TransferTransaction;
+
+            return transferTransaction.mosaics
+                .filter((mosaic) => !mosaic.id.equals(this.networkMosaic))
+                .map((mosaic) => {
+                    const mosaicInfo = this.balanceMosaics.find((mosaicInfo) => mosaicInfo.mosaicIdHex === mosaic.id.toHex());
+
+                    if (mosaicInfo) {
+                        return {
+                            name: mosaicInfo.name || mosaicInfo.mosaicIdHex,
+                            relativeAmount: Formatters.formatNumber(mosaic.amount.compact() / Math.pow(10, mosaicInfo.divisibility)),
+                        };
+                    } else {
+                        return {
+                            name: mosaic.id.toHex(),
+                            relativeAmount: Formatters.formatNumber(mosaic.amount.compact()),
+                        };
+                    }
+                });
+        }
+        return [];
+    }
+
+    /**
+     * Gets transaction message payload.
+     * @returns string
+     */
+    public get messagePayload(): string {
+        if (this.transaction.type === TransactionType.TRANSFER) {
+            const transferTransaction = this.transaction as TransferTransaction;
+
+            if (transferTransaction.message.payload.length > 40) {
+                return `${transferTransaction.message.payload.slice(0, 40)}...`;
+            }
+            return transferTransaction.message.payload;
+        }
+
+        return '';
+    }
+
     private get hasMissSignatures(): boolean {
         //merkleComponentHash ==='000000000000...' present that the transaction is still lack of signature
         return (
@@ -290,6 +396,13 @@ export class TransactionRowTs extends Vue {
         );
     }
 
+    /**
+     * Default set top 5 mosaics.
+     */
+    private get numberOfShowMosicsTooltips(): number {
+        return 5;
+    }
+
     @Watch('transaction', { immediate: true })
     private async fetchTransaction() {
         if (
diff --git a/src/components/TransactionList/TransactionTable/TransactionTable.less b/src/components/TransactionList/TransactionTable/TransactionTable.less
index 7740981da..ddb558a9f 100644
--- a/src/components/TransactionList/TransactionTable/TransactionTable.less
+++ b/src/components/TransactionList/TransactionTable/TransactionTable.less
@@ -42,7 +42,6 @@
 
     .transaction-rows-outer-container {
         display: block;
-        position: relative;
         width: 100%;
         max-height: 100%;
     }
@@ -51,7 +50,6 @@
         display: grid;
         grid-auto-rows: @rowHeight;
         width: 100%;
-        position: relative;
     }
 
     .transaction-row-container:hover {
@@ -96,8 +94,19 @@
         }
 
         .amount-cell {
-            text-align: center;
+            text-align: right;
             font-family: @symbolFont;
+
+            .extend-icon-holder {
+                display: inline-flex;
+                padding: 0.05rem;
+                vertical-align: sub;
+
+                img {
+                    width: 0.2rem;
+                    height: 0.2rem;
+                }
+            }
         }
 
         .confirmation-cell {
diff --git a/src/language/en-US.json b/src/language/en-US.json
index eb8e78d6d..aafc702bd 100644
--- a/src/language/en-US.json
+++ b/src/language/en-US.json
@@ -1121,5 +1121,6 @@
     "optin_postlaunch_tx_nis_address": "Opted-in NEM NIS1 account",
     "show_details": "Show details",
     "hide_details": "Hide details",
-    "transaction_signed": "Signed Successfully"
+    "transaction_signed": "Signed Successfully",
+    "tooltip_mosaic_view_more": "And {count} more..."
 }
diff --git a/src/language/ja-JP.json b/src/language/ja-JP.json
index 078f687c2..6e7864cf9 100644
--- a/src/language/ja-JP.json
+++ b/src/language/ja-JP.json
@@ -1121,5 +1121,6 @@
     "optin_postlaunch_tx_nis_address": "オプトイン済みのNEM NIS1アカウント",
     "show_details": "詳細を表示",
     "hide_details": "隠す",
-    "transaction_signed": "正常に署名されました"
+    "transaction_signed": "正常に署名されました",
+    "tooltip_mosaic_view_more": "そしてさらに{count}..."
 }
diff --git a/src/language/zh-CN.json b/src/language/zh-CN.json
index a2de0778f..22bf367e8 100644
--- a/src/language/zh-CN.json
+++ b/src/language/zh-CN.json
@@ -1121,5 +1121,6 @@
     "optin_postlaunch_tx_nis_address": "选择加入NEM NIS1账户",
     "show_details": "显示详细信息",
     "hide_details": "隐藏详细信息",
-    "transaction_signed": "已签"
+    "transaction_signed": "已签",
+    "tooltip_mosaic_view_more": "还有{count}个..."
 }
diff --git a/src/views/resources/Images.ts b/src/views/resources/Images.ts
index 8e781cbfb..e3b6669f9 100644
--- a/src/views/resources/Images.ts
+++ b/src/views/resources/Images.ts
@@ -135,6 +135,8 @@ import encryptedMessage from '@/views/resources/img/icons/encrypted-message.png'
 // @ts-ignore
 import enterprise from '@/views/resources/img/icons/enterprise.png';
 // @ts-ignore
+import envelope from '@/views/resources/img/icons/envelope.png';
+// @ts-ignore
 import explorer from '@/views/resources/img/newicons/NavExplorer.svg';
 // @ts-ignore
 import fingerprint from '@/views/resources/img/icons/fingerprint.png';
@@ -153,6 +155,8 @@ import metadata from '@/views/resources/img/icons/metadata.png';
 // @ts-ignore
 import mosaic from '@/views/resources/img/icons/mosaic.svg';
 // @ts-ignore
+import mosaics from '@/views/resources/img/icons/mosaics.png';
+// @ts-ignore
 import mosaicTransaction from '@/views/resources/img/icons/mosaic.png';
 // @ts-ignore
 import mosaicRestriction from '@/views/resources/img/icons/mosaic-restriction.png';
@@ -314,6 +318,7 @@ export const officialIcons = {
     delegatedHarvesting,
     encryptedMessage,
     enterprise,
+    envelope,
     explorer,
     fingerprint,
     harvest,
@@ -323,6 +328,7 @@ export const officialIcons = {
     message,
     metadata,
     mosaic,
+    mosaics,
     mosaicRestriction,
     mosaicTransaction,
     multipleParties,
diff --git a/src/views/resources/img/icons/envelope.png b/src/views/resources/img/icons/envelope.png
new file mode 100644
index 0000000000000000000000000000000000000000..8f883aaffdd6cb1786c99b14a6eb54fff5c17f0f
GIT binary patch
literal 4810
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

literal 0
HcmV?d00001

diff --git a/src/views/resources/img/icons/mosaics.png b/src/views/resources/img/icons/mosaics.png
new file mode 100644
index 0000000000000000000000000000000000000000..68f56b590b688f687de699d54f23193c0b168614
GIT binary patch
literal 3592
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
O0000<MNUMnLSTZca<!NM

literal 0
HcmV?d00001


From 9e74fc7f75a5b9a794d8941915a8a429d8842874 Mon Sep 17 00:00:00 2001
From: Anthony Law <yc-law1015@hotmail.com>
Date: Thu, 24 Jun 2021 08:41:06 +0800
Subject: [PATCH 08/30] fix: divisibility problem for offline mode (#1538)

* fix: divisibility problem for offline mode

* test: add unit test
---
 __mocks__/network.ts                          |  21 +++
 .../forms/FormTransferTransaction.spec.ts     | 133 ++++++++++++++++++
 .../FormTransferTransactionTs.ts              |  14 +-
 3 files changed, 167 insertions(+), 1 deletion(-)
 create mode 100644 __mocks__/network.ts
 create mode 100644 __tests__/views/forms/FormTransferTransaction.spec.ts

diff --git a/__mocks__/network.ts b/__mocks__/network.ts
new file mode 100644
index 000000000..5f5d44eb6
--- /dev/null
+++ b/__mocks__/network.ts
@@ -0,0 +1,21 @@
+export const networkMock = {
+    fees: {
+        median: 10,
+        free: 0,
+        slow: 5,
+        slowest: 1,
+        fast: 20,
+    },
+    currency: {
+        name: 'symbol.xym',
+        mosaicIdHex: '091F837E059AE13C',
+        namespaceIdHex: 'E74B99BA41F4AFEE',
+        divisibility: 6,
+        transferable: true,
+        supplyMutable: false,
+        restrictable: false,
+        duration: 0,
+        height: 1,
+        supply: 7841148552567058,
+    },
+};
diff --git a/__tests__/views/forms/FormTransferTransaction.spec.ts b/__tests__/views/forms/FormTransferTransaction.spec.ts
new file mode 100644
index 000000000..98c4ca897
--- /dev/null
+++ b/__tests__/views/forms/FormTransferTransaction.spec.ts
@@ -0,0 +1,133 @@
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import Vuex from 'vuex';
+import VueRouter from 'vue-router';
+import i18n from '@/language';
+import VueI18n from 'vue-i18n';
+import { NetworkConfigurationModel } from '@/core/database/entities/NetworkConfigurationModel';
+
+//@ts-ignore
+import FormTransferTransaction from '@/views/forms/FormTransferTransaction/FormTransferTransaction.vue';
+import { WalletsModel1 } from '@MOCKS/Accounts';
+import { networkMock } from '@MOCKS/network';
+import { PublicAccount, MosaicId, Address, NetworkType } from 'symbol-sdk';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+localVue.use(VueI18n);
+localVue.use(VueRouter);
+
+/* fake store */
+const networkModule = {
+    namespaced: true,
+    getters: {
+        currentHeight: () => 100,
+        feesConfig: () => networkMock.fees,
+        networkConfiguration: () => new NetworkConfigurationModel(),
+        epochAdjustment: () => 0,
+        networkType: () => NetworkType.TEST_NET,
+    },
+};
+
+const mosaicModule = {
+    namespaced: true,
+    getters: {
+        balanceMosaics: () => [
+            {
+                mosaicIdHex: networkMock.currency.mosaicIdHex,
+                balance: 0,
+            },
+        ],
+        mosaics: () => [],
+        networkMosaic: () => new MosaicId(networkMock.currency.mosaicIdHex),
+        networkCurrency: () => {
+            return {
+                mosaicIdHex: networkMock.currency.mosaicIdHex,
+                namespaceIdHex: networkMock.currency.mosaicIdHex,
+                namespaceIdFullname: networkMock.currency.name,
+                divisibility: networkMock.currency.divisibility,
+                transferable: networkMock.currency.transferable,
+                supplyMutable: networkMock.currency.supplyMutable,
+                restrictable: networkMock.currency.restrictable,
+                ticker: networkMock.currency.name,
+            };
+        },
+    },
+};
+
+const accountModule = {
+    namespaced: true,
+    getters: {
+        currentAccount: () => WalletsModel1,
+        knownAccounts: () => [WalletsModel1],
+        currentRecipient: () => PublicAccount.createFromPublicKey('0'.repeat(64), 152),
+        currentSigner: () => {
+            return {
+                label: 'test-1',
+                address: Address.createFromRawAddress(WalletsModel1.address),
+                multisig: WalletsModel1.isMultisig,
+                requiredCosignatures: 0,
+            };
+        },
+    },
+};
+
+const appModule = {
+    namespaced: true,
+    getters: {
+        defaultFee: () => networkMock.fees,
+    },
+};
+
+const store = new Vuex.Store({
+    modules: {
+        network: networkModule,
+        mosaic: mosaicModule,
+        account: accountModule,
+        app: appModule,
+    },
+});
+store.commit = jest.fn();
+store.dispatch = jest.fn();
+
+const router = new VueRouter();
+
+const options = {
+    localVue,
+    i18n,
+    store,
+    router,
+};
+let wrapper;
+let vm;
+beforeEach(() => {
+    wrapper = shallowMount(FormTransferTransaction, options);
+    vm = wrapper.vm;
+});
+afterEach(() => {
+    wrapper.destroy();
+    vm = undefined;
+});
+
+describe('FormTransferTransaction', () => {
+    it('getTransactions method should return correct absolut amount (network currency).', async () => {
+        // arrange
+        const amount = '1.123456';
+        wrapper.setData({
+            formItems: {
+                attachedMosaics: [
+                    {
+                        uid: 123,
+                        mosaicHex: networkMock.currency.mosaicIdHex,
+                        amount,
+                    },
+                ],
+            },
+        });
+
+        // act
+        const tx = vm.getTransactions();
+
+        // assert
+        expect(Number(amount) * Math.pow(10, networkMock.currency.divisibility)).toBe(tx[0].mosaics[0].amount.compact());
+    });
+});
diff --git a/src/views/forms/FormTransferTransaction/FormTransferTransactionTs.ts b/src/views/forms/FormTransferTransaction/FormTransferTransactionTs.ts
index 3f3262949..cb144b1c5 100644
--- a/src/views/forms/FormTransferTransaction/FormTransferTransactionTs.ts
+++ b/src/views/forms/FormTransferTransaction/FormTransferTransactionTs.ts
@@ -67,7 +67,7 @@ import ProtectedPrivateKeyDisplay from '@/components/ProtectedPrivateKeyDisplay/
 // @ts-ignore
 import ModalFormProfileUnlock from '@/views/modals/ModalFormProfileUnlock/ModalFormProfileUnlock.vue';
 // @ts-ignore
-import AccountSignerSelector from '@/components/AccountSignerSelector/AccountSignerSelector.vue';
+const AccountSignerSelector = () => import('@/components/AccountSignerSelector/AccountSignerSelector.vue');
 
 // @ts-ignore
 import FormRow from '@/components/FormRow/FormRow.vue';
@@ -345,6 +345,18 @@ export class FormTransferTransactionTs extends FormTransactionBase {
      */
     protected getTransactions(): TransferTransaction[] {
         const mosaicsInfo = this.$store.getters['mosaic/mosaics'] as MosaicModel[];
+
+        // Push network currency info for offline transaction format amount to absolute
+        if (mosaicsInfo.length === 0) {
+            mosaicsInfo.push({
+                mosaicIdHex: this.networkCurrency.mosaicIdHex,
+                divisibility: this.networkCurrency.divisibility,
+                name: this.networkCurrency.namespaceIdFullname,
+                isCurrencyMosaic: true,
+                balance: 0,
+            } as MosaicModel);
+        }
+
         const mosaics = this.formItems.attachedMosaics
             .filter((attachment) => attachment.uid) // filter out null values
             .map(

From 5e43ba26ef2ab22d1ccecb7264fabd615d63050b Mon Sep 17 00:00:00 2001
From: Anthony Law <yc-law1015@hotmail.com>
Date: Thu, 24 Jun 2021 17:48:04 +0800
Subject: [PATCH 09/30] Fix reconnect issue. (#1536)

* fix: reconnect able click on the home page.

* test: add unit test
---
 __mocks__/profiles.ts                         |  14 +++
 .../layout/PageLayout/PageLayout.spec.ts      | 108 ++++++++++++++++++
 src/views/layout/PageLayout/PageLayoutTs.ts   |   4 +-
 3 files changed, 124 insertions(+), 2 deletions(-)
 create mode 100644 __tests__/views/layout/PageLayout/PageLayout.spec.ts

diff --git a/__mocks__/profiles.ts b/__mocks__/profiles.ts
index 5d64eae2e..9715dae22 100644
--- a/__mocks__/profiles.ts
+++ b/__mocks__/profiles.ts
@@ -26,6 +26,20 @@ const TEST_PROFILES = {
         accounts: "['WalletsModel2']",
         seed:
             '4fcd1e1b896551f68c3d5314be1f8d2fad48d7b492e65ecf4ac1ac2dfc9749a08CyBF9Q5APg07qXEMWQzQIcN+/KBekkw0T2hBPfdAd5VxXkdzWikv46dIaYxyHCn9hdr839ITfgIWYnAiE54jRWfFKkDvyEZL4pchX6mAqCcc0Ew9VGFfHjKStHWFeBezrhp/MlNeSw/EbxiCFo5C2pmeSuGz5NABUXT+BoDi62gB8r6gyF9hjB8J7Lz6D4SBf6J4cvj9krCXzkkWX1jqg==',
+        termsAndConditionsApproved: true,
+        selectedNodeUrlToConnect: 'http://localhost:3000',
+    },
+    profile_testnet: {
+        generationHash: '3B5E1FA6445653C971A50687E75E6D09FB30481055E3990C84B25E9222DC1155',
+        profileName: 'profile_testnet',
+        hint: 'password is password',
+        networkType: NetworkType.TEST_NET,
+        password: '0b831096cf25adbd7324ad2dbb3d99a829b40b53c6f76dd50fb2ef56fceded2f2kixTXdr/q/ci5PPwWVCiA==',
+        accounts: "['WalletsModel2']",
+        seed:
+            '4fcd1e1b896551f68c3d5314be1f8d2fad48d7b492e65ecf4ac1ac2dfc9749a08CyBF9Q5APg07qXEMWQzQIcN+/KBekkw0T2hBPfdAd5VxXkdzWikv46dIaYxyHCn9hdr839ITfgIWYnAiE54jRWfFKkDvyEZL4pchX6mAqCcc0Ew9VGFfHjKStHWFeBezrhp/MlNeSw/EbxiCFo5C2pmeSuGz5NABUXT+BoDi62gB8r6gyF9hjB8J7Lz6D4SBf6J4cvj9krCXzkkWX1jqg==',
+        termsAndConditionsApproved: true,
+        selectedNodeUrlToConnect: 'http://localhost:3000',
     },
 };
 
diff --git a/__tests__/views/layout/PageLayout/PageLayout.spec.ts b/__tests__/views/layout/PageLayout/PageLayout.spec.ts
new file mode 100644
index 000000000..a7c92de25
--- /dev/null
+++ b/__tests__/views/layout/PageLayout/PageLayout.spec.ts
@@ -0,0 +1,108 @@
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import Vuex from 'vuex';
+import VueRouter from 'vue-router';
+import VueI18n from 'vue-i18n';
+import { NetworkType } from 'symbol-sdk';
+import i18n from '@/language';
+//@ts-ignore
+import PageLayout from '@/views/layout/PageLayout/PageLayout.vue';
+import { URLHelpers } from '@/core/utils/URLHelpers';
+import { getTestProfile } from '@MOCKS/profiles';
+import { ProfileService } from '@/services/ProfileService';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+localVue.use(VueI18n);
+localVue.use(VueRouter);
+
+const testnetProfile = getTestProfile('profile_testnet');
+const service = new ProfileService();
+
+const networkModule = {
+    namespaced: true,
+    getters: {
+        isConnected: () => true,
+        currentPeer: () => URLHelpers.getNodeUrl(testnetProfile.selectedNodeUrlToConnect),
+        networkType: () => NetworkType.TEST_NET,
+        generationHash: () => testnetProfile.generationHash,
+    },
+};
+const profileModule = {
+    namespaced: true,
+    getters: {
+        currentProfile: () => testnetProfile,
+    },
+};
+const accountModule = {
+    namespaced: true,
+    getters: {
+        isCosignatoryMode: () => false,
+        currentAccount: () => testnetProfile,
+    },
+};
+const appModule = {
+    namespaced: true,
+    getters: {
+        explorerUrl: () => 'http://explorer.testnet.symboldev.network/',
+        faucetUrl: () => 'http://faucet.testnet.symboldev.network/',
+    },
+};
+
+const store = new Vuex.Store({
+    modules: {
+        network: networkModule,
+        app: appModule,
+        profile: profileModule,
+        account: accountModule,
+    },
+});
+store.commit = jest.fn();
+store.dispatch = jest.fn();
+
+const router = new VueRouter();
+
+const options = {
+    localVue,
+    i18n,
+    store,
+    router,
+};
+
+let wrapper;
+let vm;
+beforeEach(() => {
+    // Mock profile
+    service.saveProfile(testnetProfile);
+    wrapper = shallowMount(PageLayout, options);
+    vm = wrapper.vm;
+});
+afterEach(() => {
+    // delete mock profile
+    service.deleteProfile(testnetProfile.profileName);
+    wrapper.destroy();
+    vm = undefined;
+});
+
+describe('PageLayout', () => {
+    it('should not able to call reconnect method in /login path', async () => {
+        // arrange
+        vm.$router.push('/login');
+
+        // act
+        vm.reconnect();
+
+        // assert
+        expect(vm.$store.dispatch).not.toBeCalledWith('network/CONNECT', { waitBetweenTrials: true });
+    });
+
+    it('should able to call reconnect method in any non `login` path', async () => {
+        // arrange
+        vm.$router.push('/non-login');
+
+        // act
+        vm.reconnect();
+
+        // assert
+        expect(vm.$store.dispatch).toBeCalledWith('network/CONNECT', { waitBetweenTrials: true });
+    });
+});
diff --git a/src/views/layout/PageLayout/PageLayoutTs.ts b/src/views/layout/PageLayout/PageLayoutTs.ts
index 212383528..0ffb0d742 100644
--- a/src/views/layout/PageLayout/PageLayoutTs.ts
+++ b/src/views/layout/PageLayout/PageLayoutTs.ts
@@ -43,7 +43,7 @@ import Settings from '@/components/Settings/Settings.vue';
 import LogoutButton from '@/components/LogoutButton/LogoutButton.vue';
 import { URLInfo } from '@/core/utils/URLInfo';
 //@ts-ignore
-import ImportQRButton from '@/components/QRCode/ImportQRButton/ImportQRButton.vue';
+const ImportQRButton = () => import('@/components/QRCode/ImportQRButton/ImportQRButton.vue');
 import { AccountModel } from '@/core/database/entities/AccountModel';
 //@ts-ignore
 import AccountLinks from '@/components/AccountLinks/AccountLinks.vue';
@@ -275,7 +275,7 @@ export class PageLayoutTs extends Vue {
     }
 
     public reconnect() {
-        if (this.$route.fullPath !== '/home') {
+        if (this.$route.fullPath !== '/login') {
             this.$store.dispatch('network/CONNECT', { waitBetweenTrials: true });
         }
     }

From aefd68a2526bec3959cab9da9335f41d39a56fe2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Carrera?= <adria.cm95@gmail.com>
Date: Thu, 24 Jun 2021 11:51:37 +0200
Subject: [PATCH 10/30] Changed english and japanese wordings for password
 error (#1535)

---
 src/language/en-US.json | 2 +-
 src/language/zh-CN.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/language/en-US.json b/src/language/en-US.json
index aafc702bd..19c642f55 100644
--- a/src/language/en-US.json
+++ b/src/language/en-US.json
@@ -250,7 +250,7 @@
     "error_incorrect_url": "This is not a valid URL",
     "error_invalid_password": "This password is invalid",
     "error_new_namespace_duration_max_value": "The new namespace duration cannot be greater than {maxValue}",
-    "error_new_password_format": "The password should contain at least one letter and one number.",
+    "error_new_password_format": "The password must contain at least one letter and one number.",
     "error_peer_connection_went_wrong": "Something went wrong. Connection to the node {peerUrl} timed out",
     "error_peer_unreachable": "This node is unreachable.",
     "error_profile_does_not_exist": "Profile does not exist",
diff --git a/src/language/zh-CN.json b/src/language/zh-CN.json
index 22bf367e8..156fe09c3 100644
--- a/src/language/zh-CN.json
+++ b/src/language/zh-CN.json
@@ -238,7 +238,7 @@
     "error_incorrect_url": "无效URL地址",
     "error_invalid_password": "无效密码",
     "error_new_namespace_duration_max_value": "新的名称空间持续时间不能大于 {maxValue}",
-    "error_new_password_format": "密码至少应该包含一个字母和一个数字",
+    "error_new_password_format": "密码必须至少包含一个字母和一个数字",
     "error_peer_connection_went_wrong": "连接到节点{peerUrl}时发生错误超时",
     "error_peer_unreachable": "此节点暂不可用",
     "error_profile_does_not_exist": "钱包不存在",

From ad8246bf2e39cc52c5707b524ad33e413cda660d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Carrera?= <adria.cm95@gmail.com>
Date: Thu, 24 Jun 2021 11:55:32 +0200
Subject: [PATCH 11/30] Multisig tree information fix (#1533)

* Multisig tree information fix

* Linting
---
 .../AccountMultisigGraph/AccountMultisigGraph.vue      |  3 +++
 .../AccountMultisigGraph/AccountMultisigGraphTs.ts     | 10 +++++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/AccountMultisigGraph/AccountMultisigGraph.vue b/src/components/AccountMultisigGraph/AccountMultisigGraph.vue
index ab806c577..8b2f2048a 100644
--- a/src/components/AccountMultisigGraph/AccountMultisigGraph.vue
+++ b/src/components/AccountMultisigGraph/AccountMultisigGraph.vue
@@ -23,6 +23,9 @@ export default class AccountLinks extends AccountMultisigGraphTs {}
         font-family: @symbolFont;
         font-size: @normalFont;
         color: @purpleDark;
+        white-space: pre-line;
+        line-height: 0.6;
+        padding: 6px 0;
     }
 }
 </style>
diff --git a/src/components/AccountMultisigGraph/AccountMultisigGraphTs.ts b/src/components/AccountMultisigGraph/AccountMultisigGraphTs.ts
index 6aa35efc5..c1b47ea6e 100644
--- a/src/components/AccountMultisigGraph/AccountMultisigGraphTs.ts
+++ b/src/components/AccountMultisigGraph/AccountMultisigGraphTs.ts
@@ -18,6 +18,7 @@ import { Component, Prop, Vue } from 'vue-property-decorator';
 import { AccountModel } from '@/core/database/entities/AccountModel';
 import { mapGetters } from 'vuex';
 import { MultisigAccountInfo } from 'symbol-sdk';
+import i18n from '@/language';
 
 @Component({
     computed: {
@@ -97,6 +98,13 @@ export class AccountMultisigGraphTs extends Vue {
     getAccountLabel(info: MultisigAccountInfo, accounts: AccountModel[]): string {
         const account = accounts.find((wlt) => info.accountAddress.plain() === wlt.address);
         const addressOrName = (account && account.name) || info.accountAddress.plain();
-        return addressOrName + (info.isMultisig() ? ` - ${info.minApproval} of ${info.minRemoval}` : '');
+        return (
+            addressOrName +
+            (info.isMultisig()
+                ? `\n
+        ${info.minApproval} of ${info.cosignatoryAddresses.length} ${i18n.t('label_for_approvals')} \n
+        ${info.minRemoval} of ${info.cosignatoryAddresses.length} ${i18n.t('label_for_removals')}`
+                : '')
+        );
     }
 }

From 5c54704662c7231d6fdbde478016989f872804fa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Carrera?= <adria.cm95@gmail.com>
Date: Thu, 24 Jun 2021 11:56:08 +0200
Subject: [PATCH 12/30] QR Code show failure (#1534)

---
 .../QRCode/QRCodeDisplay/QRCodeDisplay.vue    |  2 +-
 .../QRCode/QRCodeDisplay/QRCodeDisplayTs.ts   | 21 ++++++++++++++-----
 .../ModalTransactionCosignatureTs.ts          |  1 -
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/components/QRCode/QRCodeDisplay/QRCodeDisplay.vue b/src/components/QRCode/QRCodeDisplay/QRCodeDisplay.vue
index 59b5972ba..1d409b0e3 100644
--- a/src/components/QRCode/QRCodeDisplay/QRCodeDisplay.vue
+++ b/src/components/QRCode/QRCodeDisplay/QRCodeDisplay.vue
@@ -2,7 +2,7 @@
     <div class="qrcode-display">
         <span v-if="header !== ''" class="qrcode-display-header">{{ $t(header) }}</span>
         <img :src="qrCodeBase64$" :alt="$t(alt)" @click="copyAsText" />
-        <span v-if="showDownload" class="qrcode-display-footer">
+        <span v-if="showDownload && isValidQR" class="qrcode-display-footer">
             <slot name="download">
                 <a :href="qrCodeBase64$" :download="downloadName"
                     ><Icon :type="'md-download'" size="17" /> {{ $t('button_download_qr') }}</a
diff --git a/src/components/QRCode/QRCodeDisplay/QRCodeDisplayTs.ts b/src/components/QRCode/QRCodeDisplay/QRCodeDisplayTs.ts
index 5dc1d7997..58f8c2026 100644
--- a/src/components/QRCode/QRCodeDisplay/QRCodeDisplayTs.ts
+++ b/src/components/QRCode/QRCodeDisplay/QRCodeDisplayTs.ts
@@ -17,7 +17,7 @@ import { Vue, Component, Prop } from 'vue-property-decorator';
 import { QRCode } from 'symbol-qr-library';
 import { of, Observable } from 'rxjs';
 import { PropType } from 'vue/types/options';
-import { pluck, concatMap } from 'rxjs/operators';
+import { pluck, concatMap, catchError } from 'rxjs/operators';
 import { UIHelpers } from '@/core/utils/UIHelpers';
 // resources
 // @ts-ignore
@@ -27,10 +27,12 @@ import failureIcon from '@/views/resources/img/monitor/failure.png';
     subscriptions() {
         const qrCodeBase64$ = this.$watchAsObservable('qrCode', {
             immediate: true,
-        }).pipe(
-            pluck('newValue'),
-            concatMap((args) => (args instanceof QRCode ? args.toBase64() : of(failureIcon))),
-        );
+        })
+            .pipe(
+                pluck('newValue'),
+                concatMap((args) => (args instanceof QRCode ? args.toBase64() : of(failureIcon))),
+            )
+            .pipe(catchError(() => of(failureIcon)));
         return { qrCodeBase64$ };
     },
 })
@@ -61,6 +63,11 @@ export default class QRCodeDisplayTs extends Vue {
     })
     public showDownload: boolean;
 
+    @Prop({
+        default: true,
+    })
+    public showInvalid: boolean;
+
     /**
      * base64 representation of qrcode
      * @type Obervable<string>
@@ -70,4 +77,8 @@ export default class QRCodeDisplayTs extends Vue {
     public copyAsText() {
         UIHelpers.copyToClipboard(this.qrCode?.toJSON());
     }
+
+    public get isValidQR() {
+        return this.qrCodeBase64$ !== failureIcon;
+    }
 }
diff --git a/src/views/modals/ModalTransactionCosignature/ModalTransactionCosignatureTs.ts b/src/views/modals/ModalTransactionCosignature/ModalTransactionCosignatureTs.ts
index f519f19e3..961874744 100644
--- a/src/views/modals/ModalTransactionCosignature/ModalTransactionCosignatureTs.ts
+++ b/src/views/modals/ModalTransactionCosignature/ModalTransactionCosignatureTs.ts
@@ -260,7 +260,6 @@ export class ModalTransactionCosignatureTs extends Vue {
 
     public get cosignatureQrCode(): CosignatureQR {
         // @ts-ignore
-        console.log(this.transaction);
         return new CosignatureQR(this.transaction, this.networkType, this.generationHash);
     }
 

From 2419a7b4a1d94acaeb9f336757a99a6f93b1b4e1 Mon Sep 17 00:00:00 2001
From: Bassem <bassem.magdyy94@gmail.com>
Date: Thu, 24 Jun 2021 11:57:29 +0200
Subject: [PATCH 13/30] fix Acount metadata not signable if target account
 multisig #1136 (#1482)

---
 .../ModalTransactionCosignatureTs.ts                  | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/views/modals/ModalTransactionCosignature/ModalTransactionCosignatureTs.ts b/src/views/modals/ModalTransactionCosignature/ModalTransactionCosignatureTs.ts
index 961874744..59be48689 100644
--- a/src/views/modals/ModalTransactionCosignature/ModalTransactionCosignatureTs.ts
+++ b/src/views/modals/ModalTransactionCosignature/ModalTransactionCosignatureTs.ts
@@ -223,7 +223,16 @@ export class ModalTransactionCosignatureTs extends Vue {
                 } else if (t.type === TransactionType.ACCOUNT_ADDRESS_RESTRICTION.valueOf()) {
                     cosignList.push(...(t as AccountAddressRestrictionTransaction).restrictionAdditions);
                 } else if (t.type === TransactionType.ACCOUNT_METADATA) {
-                    cosignList.push((t as AccountMetadataTransaction).targetAddress);
+                    if (
+                        this.currentAccountMultisigInfo &&
+                        this.currentAccountMultisigInfo.multisigAddresses.find(
+                            (m) => m.plain() === (t as AccountMetadataTransaction).targetAddress.plain(),
+                        ) !== undefined
+                    ) {
+                        cosignList.push(Address.createFromRawAddress(this.currentAccount.address));
+                    } else {
+                        cosignList.push((t as AccountMetadataTransaction).targetAddress);
+                    }
                 }
             });
 

From e41039d68ea76fd7d0b4940d1b76244e1e255583 Mon Sep 17 00:00:00 2001
From: Bassem <bassem.magdyy94@gmail.com>
Date: Thu, 24 Jun 2021 11:59:07 +0200
Subject: [PATCH 14/30] fix ledger translation #930 (#1559)

---
 src/language/en-US.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/language/en-US.json b/src/language/en-US.json
index 19c642f55..2bdcb0662 100644
--- a/src/language/en-US.json
+++ b/src/language/en-US.json
@@ -11,11 +11,11 @@
     "about_typescript_version": "Typescript",
     "about_vue_version": "Vue Framework",
     "absolute": "absolute",
-    "access_ledger": "Access Ledger",
+    "access_ledger": "Use Ledger",
     "access_my_profile": "Access my profile",
     "access_trezor": "Access Trezor",
     "access_trezor_account": "Access your Trezor account",
-    "access_your_ledger_account": "Access your Ledger account",
+    "access_your_ledger_account": "Open your Ledger profile",
     "account_address": "Address",
     "ACCOUNT_LINK": "Account link",
     "account_management": "My accounts",

From a672d33c3cba6627b99ae9d1d98b5f08d2796e31 Mon Sep 17 00:00:00 2001
From: Bassem <bassem.magdyy94@gmail.com>
Date: Fri, 25 Jun 2021 12:58:31 +0200
Subject: [PATCH 15/30] fix harvesting node not showing while activated on
 different devices (#1548)

* fix harvesting node not showing while activated on different devices

* fix: selected node will appear in harvesting list.

* fix: when change profile, the harvest stat will be refresh.

* fix: add node operate check, if that is not nodeKey exist.

Co-authored-by: AnthonyLaw <yc-law1015@hotmail.com>
---
 .../NetworkNodeSelector/NetworkNodeSelectorTs.ts | 16 ++++++++++++----
 src/store/Account.ts                             |  2 +-
 ...rmPersistentDelegationRequestTransactionTs.ts |  5 ++++-
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/components/NetworkNodeSelector/NetworkNodeSelectorTs.ts b/src/components/NetworkNodeSelector/NetworkNodeSelectorTs.ts
index b2c144eed..869769f69 100644
--- a/src/components/NetworkNodeSelector/NetworkNodeSelectorTs.ts
+++ b/src/components/NetworkNodeSelector/NetworkNodeSelectorTs.ts
@@ -12,7 +12,7 @@ import { URLHelpers } from '@/core/utils/URLHelpers';
 import { AccountInfo, NetworkType, NodeInfo, RepositoryFactoryHttp, RoleType } from 'symbol-sdk';
 import { NotificationType } from '@/core/utils/NotificationType';
 import { ProfileModel } from '@/core/database/entities/ProfileModel';
-
+import { networkConfig } from '@/config';
 @Component({
     components: {
         FormWrapper,
@@ -143,10 +143,18 @@ export class NetworkNodeSelectorTs extends Vue {
 
     public async created() {
         // add static hardcoded nodes to harvesting list
-        await this.$store.dispatch('network/LOAD_PEER_NODES');
-        this.customNodeData = this.filteredNodes.map((n) => n.host);
-        this.filteredData = [...this.customNodeData];
+        const staticNodesUrls = [];
+        networkConfig[this.networkType].nodes.map((node) => staticNodesUrls.push(node.url.replace(/http:|:3000|\//g, '')));
+
+        // add selected nodes
         const currentNodeUrl = this.currentProfile.selectedNodeUrlToConnect.replace(/http:|:3000|\//g, '');
+        staticNodesUrls.push(currentNodeUrl);
+
+        await this.$store.dispatch('network/LOAD_PEER_NODES');
+
+        // remove the duplicate item in array.
+        this.customNodeData = [...new Set(this.filteredNodes.map((n) => n.host).concat(staticNodesUrls))];
+
         if (this.customNodeData.includes(currentNodeUrl) && !this.value.url) {
             this.fetchNodePublicKey(currentNodeUrl);
         }
diff --git a/src/store/Account.ts b/src/store/Account.ts
index b389b3c26..eccecc2d7 100644
--- a/src/store/Account.ts
+++ b/src/store/Account.ts
@@ -376,7 +376,7 @@ export default {
             dispatch('transaction/SIGNER_CHANGED', {}, { root: true });
             dispatch('metadata/SIGNER_CHANGED', {}, { root: true });
             dispatch('harvesting/SET_CURRENT_SIGNER_HARVESTING_MODEL', currentSignerAddress.plain(), { root: true });
-
+            dispatch('harvesting/LOAD_HARVESTED_BLOCKS_STATS', {}, { root: true });
             // open / close websocket connections
 
             if (reset) {
diff --git a/src/views/forms/FormPersistentDelegationRequestTransaction/FormPersistentDelegationRequestTransactionTs.ts b/src/views/forms/FormPersistentDelegationRequestTransaction/FormPersistentDelegationRequestTransactionTs.ts
index 71a36588a..c3a411ef2 100644
--- a/src/views/forms/FormPersistentDelegationRequestTransaction/FormPersistentDelegationRequestTransactionTs.ts
+++ b/src/views/forms/FormPersistentDelegationRequestTransaction/FormPersistentDelegationRequestTransactionTs.ts
@@ -269,7 +269,10 @@ export class FormPersistentDelegationRequestTransactionTs extends FormTransactio
                 this.formItems.nodeModel = { nodePublicKey: '' } as NodeModel;
             }
         } else {
-            this.formItems.nodeModel = { nodePublicKey: '' } as NodeModel;
+            // Check account is belong to node operator.
+            this.formItems.nodeModel = this.currentSignerHarvestingModel?.selectedHarvestingNode
+                ? this.currentSignerHarvestingModel.selectedHarvestingNode
+                : ({ nodePublicKey: '' } as NodeModel);
         }
     }
 

From c865cc649e9cb57b47ca9295d426cf1cc9d348fd Mon Sep 17 00:00:00 2001
From: Bassem <bassem.magdyy94@gmail.com>
Date: Fri, 25 Jun 2021 12:59:24 +0200
Subject: [PATCH 16/30] fix trasaction signing icon doesn't show immediately
 after signing #1488 #930 (#1560)

---
 .../TransactionRow/TransactionRowTs.ts              | 13 ++++++-------
 src/language/en-US.json                             |  2 +-
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/components/TransactionList/TransactionRow/TransactionRowTs.ts b/src/components/TransactionList/TransactionRow/TransactionRowTs.ts
index 25e67f92b..eab1c9038 100644
--- a/src/components/TransactionList/TransactionRow/TransactionRowTs.ts
+++ b/src/components/TransactionList/TransactionRow/TransactionRowTs.ts
@@ -255,11 +255,7 @@ export class TransactionRowTs extends Vue {
         // Multisig account can not sign
 
         const currentPubAccount = AccountModel.getObjects(this.currentAccount).publicAccount;
-        if (
-            this.transaction instanceof AggregateTransaction &&
-            this.transaction.type === TransactionType.AGGREGATE_BONDED &&
-            !this.transaction.signedByAccount(currentPubAccount)
-        ) {
+        if (this.transaction instanceof AggregateTransaction && this.transaction.type === TransactionType.AGGREGATE_BONDED) {
             if (this.currentAccountMultisigInfo && this.currentAccountMultisigInfo.isMultisig()) {
                 this.transactionSigningFlag = false;
                 return;
@@ -268,6 +264,10 @@ export class TransactionRowTs extends Vue {
                 this.aggregateTransactionDetails !== undefined &&
                 this.aggregateTransactionDetails.transactionInfo?.hash == this.transaction.transactionInfo?.hash
             ) {
+                if (this.aggregateTransactionDetails.signedByAccount(currentPubAccount)) {
+                    this.transactionSigningFlag = false;
+                    return;
+                }
                 const cosignList = [];
                 const cosignerAddresses = this.aggregateTransactionDetails.innerTransactions.map((t) => t.signer?.address);
                 this.aggregateTransactionDetails.innerTransactions.forEach((t) => {
@@ -408,8 +408,7 @@ export class TransactionRowTs extends Vue {
         if (
             this.transaction instanceof AggregateTransaction &&
             this.transaction.type === TransactionType.AGGREGATE_BONDED &&
-            this.hasMissSignatures &&
-            !this.transaction.signedByAccount(AccountModel.getObjects(this.currentAccount).publicAccount)
+            this.hasMissSignatures
         ) {
             this.transactionSigningFlag = true;
             try {
diff --git a/src/language/en-US.json b/src/language/en-US.json
index 2bdcb0662..d897b6c89 100644
--- a/src/language/en-US.json
+++ b/src/language/en-US.json
@@ -15,7 +15,7 @@
     "access_my_profile": "Access my profile",
     "access_trezor": "Access Trezor",
     "access_trezor_account": "Access your Trezor account",
-    "access_your_ledger_account": "Open your Ledger profile",
+    "access_your_ledger_account": "Create a Ledger profile",
     "account_address": "Address",
     "ACCOUNT_LINK": "Account link",
     "account_management": "My accounts",

From ff2160927f12504bc864d36d22c938d8a2e2ea1d Mon Sep 17 00:00:00 2001
From: Bassem <bassem.magdyy94@gmail.com>
Date: Fri, 25 Jun 2021 16:44:14 +0200
Subject: [PATCH 17/30] Fix password copy paste (#1550)

* update password fields to reject copy and paste actions #1167

* Linting

* remove non-used prop
---
 src/components/PasswordInput/PasswordInput.vue  | 17 +++++++++++++++++
 src/components/PasswordInput/PasswordInputTs.ts | 17 +++++++++++++++++
 .../QRCode/QRCodePassword/QRCodePassword.vue    |  4 +---
 .../QRCode/QRCodePassword/QRCodePasswordTs.ts   |  4 +++-
 .../FormProfileCreation/FormProfileCreation.vue |  8 ++------
 .../FormProfileCreationTs.ts                    |  4 +++-
 .../FormProfilePasswordUpdate.vue               |  8 ++------
 .../FormProfilePasswordUpdateTs.ts              |  6 ++++--
 .../FormProfileUnlock/FormProfileUnlock.vue     |  4 +---
 .../FormProfileUnlock/FormProfileUnlockTs.ts    |  4 +++-
 .../ModalFormSubAccountCreation.vue             |  4 +---
 .../ModalFormSubAccountCreationTs.ts            |  4 +++-
 .../ModalMnemonicBackupWizard.vue               |  3 +--
 .../ModalMnemonicBackupWizardTs.ts              |  7 +++++--
 src/views/pages/profiles/LoginPage.vue          |  5 ++---
 src/views/pages/profiles/LoginPageTs.ts         |  4 +++-
 16 files changed, 68 insertions(+), 35 deletions(-)
 create mode 100644 src/components/PasswordInput/PasswordInput.vue
 create mode 100644 src/components/PasswordInput/PasswordInputTs.ts

diff --git a/src/components/PasswordInput/PasswordInput.vue b/src/components/PasswordInput/PasswordInput.vue
new file mode 100644
index 000000000..408615869
--- /dev/null
+++ b/src/components/PasswordInput/PasswordInput.vue
@@ -0,0 +1,17 @@
+<template>
+    <input
+        onselectstart="return false"
+        onpaste="return false"
+        onCopy="return false"
+        onCut="return false"
+        :class="className"
+        :placeholder="placeholder"
+        type="password"
+        @input="updateValue($event.target.value)"
+    />
+</template>
+
+<script lang="ts">
+import PasswordInputTs from './PasswordInputTs';
+export default class PasswordInput extends PasswordInputTs {}
+</script>
diff --git a/src/components/PasswordInput/PasswordInputTs.ts b/src/components/PasswordInput/PasswordInputTs.ts
new file mode 100644
index 000000000..12ae2c2dd
--- /dev/null
+++ b/src/components/PasswordInput/PasswordInputTs.ts
@@ -0,0 +1,17 @@
+import { Vue, Prop, Component } from 'vue-property-decorator';
+// @ts-ignore
+import PasswordInput from './PasswordInput.vue';
+
+@Component({
+    components: { PasswordInput },
+})
+export default class PasswordInputTs extends Vue {
+    @Prop({ default: '' })
+    public placeholder: string;
+    @Prop({ default: 'input-size input-style' })
+    public className: string;
+
+    public updateValue(value) {
+        this.$emit('input', value);
+    }
+}
diff --git a/src/components/QRCode/QRCodePassword/QRCodePassword.vue b/src/components/QRCode/QRCodePassword/QRCodePassword.vue
index 98493c6bc..c62a20437 100644
--- a/src/components/QRCode/QRCodePassword/QRCodePassword.vue
+++ b/src/components/QRCode/QRCodePassword/QRCodePassword.vue
@@ -19,11 +19,9 @@
                                     slim
                                 >
                                     <ErrorTooltip :errors="errors">
-                                        <input
+                                        <PasswordInput
                                             v-model="formItems.password"
                                             v-focus
-                                            type="password"
-                                            class="input-size input-style"
                                             :placeholder="$t('please_enter_your_account_password')"
                                         />
                                     </ErrorTooltip>
diff --git a/src/components/QRCode/QRCodePassword/QRCodePasswordTs.ts b/src/components/QRCode/QRCodePassword/QRCodePasswordTs.ts
index b2defbf3c..56d9aa3f8 100644
--- a/src/components/QRCode/QRCodePassword/QRCodePasswordTs.ts
+++ b/src/components/QRCode/QRCodePassword/QRCodePasswordTs.ts
@@ -24,9 +24,11 @@ import FormRow from '@/components/FormRow/FormRow.vue';
 // @ts-ignore
 import ErrorTooltip from '@/components/ErrorTooltip/ErrorTooltip.vue';
 import { CosignatureSignedTransaction, SignedTransaction, TransactionMapping } from 'symbol-sdk';
+// @ts-ignore
+import PasswordInput from '@/components/PasswordInput/PasswordInput.vue';
 
 @Component({
-    components: { FormWrapper, FormRow, ErrorTooltip, ValidationProvider },
+    components: { FormWrapper, FormRow, ErrorTooltip, ValidationProvider, PasswordInput },
 })
 export default class QRCodePasswordTs extends Vue {
     @Prop({ default: null })
diff --git a/src/views/forms/FormProfileCreation/FormProfileCreation.vue b/src/views/forms/FormProfileCreation/FormProfileCreation.vue
index fc2238171..e07a595d5 100644
--- a/src/views/forms/FormProfileCreation/FormProfileCreation.vue
+++ b/src/views/forms/FormProfileCreation/FormProfileCreation.vue
@@ -75,12 +75,10 @@
                                 class="inputs-create-container select-container"
                             >
                                 <ErrorTooltip :errors="errors">
-                                    <input
+                                    <PasswordInput
                                         ref="passwordInput"
                                         v-model="formItems.password"
-                                        class="input-size input-style"
                                         :placeholder="$t('please_enter_your_account_password')"
-                                        type="password"
                                     />
                                 </ErrorTooltip>
                             </ValidationProvider>
@@ -99,12 +97,10 @@
                                 class="inputs-create-container items-container"
                             >
                                 <ErrorTooltip :errors="errors">
-                                    <input
+                                    <PasswordInput
                                         v-model="formItems.passwordAgain"
-                                        class="input-size input-style"
                                         data-vv-name="confirmPassword"
                                         :placeholder="$t('please_enter_your_new_password_again')"
-                                        type="password"
                                     />
                                 </ErrorTooltip>
                             </ValidationProvider>
diff --git a/src/views/forms/FormProfileCreation/FormProfileCreationTs.ts b/src/views/forms/FormProfileCreation/FormProfileCreationTs.ts
index d301d3868..232651728 100644
--- a/src/views/forms/FormProfileCreation/FormProfileCreationTs.ts
+++ b/src/views/forms/FormProfileCreation/FormProfileCreationTs.ts
@@ -32,7 +32,8 @@ import { NetworkTypeHelper } from '@/core/utils/NetworkTypeHelper';
 import { FilterHelpers } from '@/core/utils/FilterHelpers';
 import { AccountService } from '@/services/AccountService';
 import { networkConfig } from '@/config';
-
+// @ts-ignore
+import PasswordInput from '@/components/PasswordInput/PasswordInput.vue';
 /// end-region custom types
 
 @Component({
@@ -42,6 +43,7 @@ import { networkConfig } from '@/config';
         ErrorTooltip,
         FormWrapper,
         FormRow,
+        PasswordInput,
     },
     computed: {
         ...mapGetters({
diff --git a/src/views/forms/FormProfilePasswordUpdate/FormProfilePasswordUpdate.vue b/src/views/forms/FormProfilePasswordUpdate/FormProfilePasswordUpdate.vue
index bc4432511..487d64c4f 100644
--- a/src/views/forms/FormProfilePasswordUpdate/FormProfilePasswordUpdate.vue
+++ b/src/views/forms/FormProfilePasswordUpdate/FormProfilePasswordUpdate.vue
@@ -15,12 +15,10 @@
                             class="inputs-container items-container"
                         >
                             <ErrorTooltip :errors="errors">
-                                <input
+                                <PasswordInput
                                     ref="passwordInput"
                                     v-model="formItems.password"
-                                    class="input-size input-style"
                                     :placeholder="$t('form_label_new_password')"
-                                    type="password"
                                     @input="onChange"
                                 />
                             </ErrorTooltip>
@@ -41,12 +39,10 @@
                             class="inputs-container items-container"
                         >
                             <ErrorTooltip :errors="errors">
-                                <input
+                                <PasswordInput
                                     ref="passwordInput"
                                     v-model="formItems.passwordConfirm"
-                                    class="input-size input-style"
                                     :placeholder="$t('form_label_new_password_confirm')"
-                                    type="password"
                                     @input="onChange"
                                 />
                             </ErrorTooltip>
diff --git a/src/views/forms/FormProfilePasswordUpdate/FormProfilePasswordUpdateTs.ts b/src/views/forms/FormProfilePasswordUpdate/FormProfilePasswordUpdateTs.ts
index bc79c80e0..be5736d1d 100644
--- a/src/views/forms/FormProfilePasswordUpdate/FormProfilePasswordUpdateTs.ts
+++ b/src/views/forms/FormProfilePasswordUpdate/FormProfilePasswordUpdateTs.ts
@@ -15,7 +15,7 @@
  */
 import { Component, Vue } from 'vue-property-decorator';
 import { mapGetters } from 'vuex';
-import { Password, Crypto } from 'symbol-sdk';
+import { Password, Crypto, Account } from 'symbol-sdk';
 // internal dependencies
 import { ValidationRuleset } from '@/core/validation/ValidationRuleset';
 import { ProfileService } from '@/services/ProfileService';
@@ -33,7 +33,8 @@ import { NotificationType } from '@/core/utils/NotificationType';
 import { ProfileModel } from '@/core/database/entities/ProfileModel';
 import { AccountService } from '@/services/AccountService';
 import { NetworkConfigurationModel } from '@/core/database/entities/NetworkConfigurationModel';
-
+// @ts-ignore
+import PasswordInput from '@/components/PasswordInput/PasswordInput.vue';
 @Component({
     components: {
         ValidationObserver,
@@ -42,6 +43,7 @@ import { NetworkConfigurationModel } from '@/core/database/entities/NetworkConfi
         FormWrapper,
         FormRow,
         ModalFormProfileUnlock,
+        PasswordInput,
     },
     computed: {
         ...mapGetters({
diff --git a/src/views/forms/FormProfileUnlock/FormProfileUnlock.vue b/src/views/forms/FormProfileUnlock/FormProfileUnlock.vue
index 1957da095..14c0f595c 100644
--- a/src/views/forms/FormProfileUnlock/FormProfileUnlock.vue
+++ b/src/views/forms/FormProfileUnlock/FormProfileUnlock.vue
@@ -13,11 +13,9 @@
                             slim
                         >
                             <ErrorTooltip :errors="errors">
-                                <input
+                                <PasswordInput
                                     ref="passwordInput"
                                     v-model="formItems.password"
-                                    type="password"
-                                    class="input-size input-style"
                                     :disabled="isLoading"
                                     :placeholder="$t('please_enter_your_account_password')"
                                 />
diff --git a/src/views/forms/FormProfileUnlock/FormProfileUnlockTs.ts b/src/views/forms/FormProfileUnlock/FormProfileUnlockTs.ts
index 6fd9cbd6d..2edefd39a 100644
--- a/src/views/forms/FormProfileUnlock/FormProfileUnlockTs.ts
+++ b/src/views/forms/FormProfileUnlock/FormProfileUnlockTs.ts
@@ -28,13 +28,15 @@ import FormRow from '@/components/FormRow/FormRow.vue';
 // @ts-ignore
 import ErrorTooltip from '@/components/ErrorTooltip/ErrorTooltip.vue';
 import { ProfileService } from '@/services/ProfileService';
-
+// @ts-ignore
+import PasswordInput from '@/components/PasswordInput/PasswordInput.vue';
 @Component({
     components: {
         ValidationProvider,
         FormWrapper,
         FormRow,
         ErrorTooltip,
+        PasswordInput,
     },
     computed: {
         ...mapGetters({
diff --git a/src/views/modals/ModalFormSubAccountCreation/ModalFormSubAccountCreation.vue b/src/views/modals/ModalFormSubAccountCreation/ModalFormSubAccountCreation.vue
index 3c371a13a..377cd9e8e 100644
--- a/src/views/modals/ModalFormSubAccountCreation/ModalFormSubAccountCreation.vue
+++ b/src/views/modals/ModalFormSubAccountCreation/ModalFormSubAccountCreation.vue
@@ -65,11 +65,9 @@
                                     class="inputs-container items-container"
                                 >
                                     <ErrorTooltip :errors="errors">
-                                        <input
+                                        <PasswordInput
                                             v-model="formItems.privateKey"
-                                            type="password"
                                             name="privateKey"
-                                            class="input-size input-style"
                                             autocomplete="new-password"
                                             :disabled="isCreatingAccount"
                                         />
diff --git a/src/views/modals/ModalFormSubAccountCreation/ModalFormSubAccountCreationTs.ts b/src/views/modals/ModalFormSubAccountCreation/ModalFormSubAccountCreationTs.ts
index a0afeb379..39981a6ad 100644
--- a/src/views/modals/ModalFormSubAccountCreation/ModalFormSubAccountCreationTs.ts
+++ b/src/views/modals/ModalFormSubAccountCreation/ModalFormSubAccountCreationTs.ts
@@ -39,7 +39,8 @@ import { LedgerService } from '@/services/LedgerService';
 import { MnemonicPassPhrase } from 'symbol-hd-wallets';
 import { ValidationObserver, ValidationProvider } from 'vee-validate';
 import { AccountService } from '@/services/AccountService';
-
+// @ts-ignore
+import PasswordInput from '@/components/PasswordInput/PasswordInput.vue';
 @Component({
     components: {
         FormProfileUnlock,
@@ -49,6 +50,7 @@ import { AccountService } from '@/services/AccountService';
         ErrorTooltip,
         ValidationObserver,
         FormWrapper,
+        PasswordInput,
     },
     computed: {
         ...mapGetters({
diff --git a/src/views/modals/ModalMnemonicBackupWizard/ModalMnemonicBackupWizard.vue b/src/views/modals/ModalMnemonicBackupWizard/ModalMnemonicBackupWizard.vue
index 52bfc1703..599f9e29e 100644
--- a/src/views/modals/ModalMnemonicBackupWizard/ModalMnemonicBackupWizard.vue
+++ b/src/views/modals/ModalMnemonicBackupWizard/ModalMnemonicBackupWizard.vue
@@ -29,11 +29,10 @@
                     <form class="centered" onsubmit="event.preventDefault()" @keyup.enter="submit">
                         <input v-model="cipher" v-validate="'required'" data-vv-name="cipher" style="display: none;" />
                         <ErrorTooltip field-name="password">
-                            <input
+                            <PasswordInput
                                 v-model.lazy="password"
                                 v-focus
                                 v-validate="validation.previousPassword"
-                                type="password"
                                 data-vv-name="password"
                                 :data-vv-as="$t('password')"
                             />
diff --git a/src/views/modals/ModalMnemonicBackupWizard/ModalMnemonicBackupWizardTs.ts b/src/views/modals/ModalMnemonicBackupWizard/ModalMnemonicBackupWizardTs.ts
index 5f4e25cee..124f96d00 100644
--- a/src/views/modals/ModalMnemonicBackupWizard/ModalMnemonicBackupWizardTs.ts
+++ b/src/views/modals/ModalMnemonicBackupWizard/ModalMnemonicBackupWizardTs.ts
@@ -14,8 +14,11 @@
  *
  */
 import { Component, Vue } from 'vue-property-decorator';
-
+// @ts-ignore
+import PasswordInput from '@/components/PasswordInput/PasswordInput.vue';
 @Component({
-    components: {},
+    components: {
+        PasswordInput,
+    },
 })
 export class ModalMnemonicBackupWizardTs extends Vue {}
diff --git a/src/views/pages/profiles/LoginPage.vue b/src/views/pages/profiles/LoginPage.vue
index 4c871a24c..e64e66608 100644
--- a/src/views/pages/profiles/LoginPage.vue
+++ b/src/views/pages/profiles/LoginPage.vue
@@ -77,12 +77,11 @@
                                 rules="required|min:8"
                             >
                                 <ErrorTooltip field-name="password" :errors="errors">
-                                    <input
+                                    <PasswordInput
                                         v-model="formItems.password"
                                         v-focus
-                                        :class="[!profilesClassifiedByNetworkType ? 'un_click' : '']"
+                                        :class-name="[!profilesClassifiedByNetworkType ? 'un_click' : '']"
                                         :placeholder="$t('please_enter_your_account_password')"
-                                        type="password"
                                         :disabled="!profilesClassifiedByNetworkType || performingLogin"
                                     />
                                 </ErrorTooltip>
diff --git a/src/views/pages/profiles/LoginPageTs.ts b/src/views/pages/profiles/LoginPageTs.ts
index f37f14bac..a253e5135 100644
--- a/src/views/pages/profiles/LoginPageTs.ts
+++ b/src/views/pages/profiles/LoginPageTs.ts
@@ -32,6 +32,8 @@ import { ValidationObserver, ValidationProvider } from 'vee-validate';
 import ErrorTooltip from '@/components/ErrorTooltip/ErrorTooltip.vue';
 // @ts-ignore
 import LanguageSelector from '@/components/LanguageSelector/LanguageSelector.vue';
+// @ts-ignore
+import PasswordInput from '@/components/PasswordInput/PasswordInput.vue';
 // configuration
 import { SettingService } from '@/services/SettingService';
 import { SettingsModel } from '@/core/database/entities/SettingsModel';
@@ -39,7 +41,6 @@ import { AccountService } from '@/services/AccountService';
 import { NetworkTypeHelper } from '@/core/utils/NetworkTypeHelper';
 import { officialIcons } from '@/views/resources/Images';
 import _ from 'lodash';
-
 @Component({
     computed: {
         ...mapGetters({
@@ -53,6 +54,7 @@ import _ from 'lodash';
         ValidationObserver,
         LanguageSelector,
         VideoBackground,
+        PasswordInput,
     },
 })
 export default class LoginPageTs extends Vue {

From 6b0fe14a52e1c646f8cf7e8ece7096996eda0594 Mon Sep 17 00:00:00 2001
From: Bassem <bassem.magdyy94@gmail.com>
Date: Tue, 29 Jun 2021 20:38:54 +0200
Subject: [PATCH 18/30] fix local issue in amount field (#1551)

* fix local issue in amount field #1531

* Moved decimalSeparator into utils and applied to appConfig

Co-authored-by: AdriaCarrera <adria.cm95@gmail.com>
---
 .../MosaicAttachmentInputTs.ts                      |  8 +++++++-
 src/config/AppConfig.ts                             |  6 +++++-
 src/core/utils/Formatters.ts                        | 13 +++++++++++++
 3 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/components/MosaicAttachmentInput/MosaicAttachmentInputTs.ts b/src/components/MosaicAttachmentInput/MosaicAttachmentInputTs.ts
index 9975b51d2..85eda2641 100644
--- a/src/components/MosaicAttachmentInput/MosaicAttachmentInputTs.ts
+++ b/src/components/MosaicAttachmentInput/MosaicAttachmentInputTs.ts
@@ -25,6 +25,7 @@ import AmountInput from '@/components/AmountInput/AmountInput.vue';
 import ButtonRemove from '@/components/ButtonRemove/ButtonRemove.vue';
 // @ts-ignore
 import FormRow from '@/components/FormRow/FormRow.vue';
+import { Formatters } from '@/core/utils/Formatters';
 
 @Component({
     components: {
@@ -78,7 +79,12 @@ export class MosaicAttachmentInputTs extends Vue {
      * @type {{mosaicHex: string, amount: number}}
      */
     protected get chosenValue(): { mosaicHex: string; amount: string } {
-        this.mosaicAttachment.amount = this.mosaicAttachment.amount.replace(',', '');
+        if (navigator.languages != undefined) {
+            const decimalSeparator = Formatters.getDecimalSeparator(navigator.languages[0]);
+            if (decimalSeparator !== ',') {
+                this.mosaicAttachment.amount = this.mosaicAttachment.amount.replace(',', '');
+            }
+        }
         return this.mosaicAttachment;
     }
 
diff --git a/src/config/AppConfig.ts b/src/config/AppConfig.ts
index 1610692dd..4da379663 100644
--- a/src/config/AppConfig.ts
+++ b/src/config/AppConfig.ts
@@ -14,6 +14,8 @@
  *
  */
 
+import { Formatters } from '@/core/utils/Formatters';
+
 export interface LanguageConfig {
     label: string;
     value: string;
@@ -46,7 +48,9 @@ const defaultAppConfig: AppConfig = {
         MIN_PASSWORD_LENGTH: 8,
         SEED_ACCOUNT_NAME_PREFIX: 'SeedWallet-',
         ANNOUNCE_TRANSACTION_TIMEOUT: 240000,
-        DECIMAL_SEPARATOR: Number('1.1').toLocaleString().substring(1, 2),
+        DECIMAL_SEPARATOR: navigator.languages
+            ? Formatters.getDecimalSeparator(navigator.languages[0])
+            : Number('1.1').toLocaleString().substring(1, 2),
     },
     languages: [
         { value: 'en-US', label: 'English' },
diff --git a/src/core/utils/Formatters.ts b/src/core/utils/Formatters.ts
index b0b07a0df..10f560b83 100644
--- a/src/core/utils/Formatters.ts
+++ b/src/core/utils/Formatters.ts
@@ -99,4 +99,17 @@ export class Formatters {
         }
         return arr.join(delimiter);
     }
+
+    /**
+     * Checks current locale separator
+     * @private
+     * @return {string}
+     */
+    public static getDecimalSeparator(locale): string {
+        // testing against current locale to figure out separator
+        const numberWithDecimalSeparator = 1.1;
+        return Intl.NumberFormat(locale)
+            .formatToParts(numberWithDecimalSeparator)
+            .find((part) => part.type === 'decimal').value;
+    }
 }

From e49c0b9214684fe021ec87a801f6cc003ce3d2b0 Mon Sep 17 00:00:00 2001
From: Anthony Law <yc-law1015@hotmail.com>
Date: Wed, 30 Jun 2021 02:40:06 +0800
Subject: [PATCH 19/30] fix: fee multiplier for offline tx (#1565)

---
 src/services/offline/MockModels.ts | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/services/offline/MockModels.ts b/src/services/offline/MockModels.ts
index 88299c46f..1ae026709 100644
--- a/src/services/offline/MockModels.ts
+++ b/src/services/offline/MockModels.ts
@@ -33,7 +33,8 @@ export const OfflineGenerationHash = {
     [NetworkType.MAIN_NET]: networkConfig[NetworkType.MAIN_NET].networkConfigurationDefaults.generationHash,
 };
 
-export const OfflineTransactionFees = new TransactionFees(84587, 100, 1136363, 0, 0);
+// use 100 as min fee multiplier for offline transaction.
+export const OfflineTransactionFees = new TransactionFees(84587, 100, 1136363, 0, 100);
 
 export const OfflineNodeInfo = (networkType: NetworkType) =>
     new NodeInfo('pubkey', OfflineGenerationHash[networkType], 3000, networkType, 0, [], 'host', 'name');
@@ -50,8 +51,8 @@ export const OfflineNetworkProperties = {
         new ChainProperties(
             true,
             true,
-            networkConfig[NetworkType.TEST_NET].networkConfigurationDefaults.currencyMosaicId,
-            networkConfig[NetworkType.TEST_NET].networkConfigurationDefaults.harvestingMosaicId,
+            '0x' + networkConfig[NetworkType.TEST_NET].networkConfigurationDefaults.currencyMosaicId,
+            '0x' + networkConfig[NetworkType.TEST_NET].networkConfigurationDefaults.harvestingMosaicId,
             networkConfig[NetworkType.TEST_NET].networkConfigurationDefaults.blockGenerationTargetTime + 's',
             '3000',
             '180',
@@ -89,8 +90,8 @@ export const OfflineNetworkProperties = {
         new ChainProperties(
             true,
             true,
-            networkConfig[NetworkType.MAIN_NET].networkConfigurationDefaults.currencyMosaicId,
-            networkConfig[NetworkType.MAIN_NET].networkConfigurationDefaults.harvestingMosaicId,
+            '0x' + networkConfig[NetworkType.MAIN_NET].networkConfigurationDefaults.currencyMosaicId,
+            '0x' + networkConfig[NetworkType.MAIN_NET].networkConfigurationDefaults.harvestingMosaicId,
             networkConfig[NetworkType.MAIN_NET].networkConfigurationDefaults.blockGenerationTargetTime + 's',
             '3000',
             '180',

From d8819a68e61abb961e21dfcaffd29ee9d5678059 Mon Sep 17 00:00:00 2001
From: Anthony Law <yc-law1015@hotmail.com>
Date: Wed, 30 Jun 2021 17:25:45 +0800
Subject: [PATCH 20/30] Add max amount validator. (#1524)

* fix scrolling on aggregate tx page (#1352)

* fix: balance aligment UI issue. (#1521)

* Fix: add validator to check mosaic max amount.

* Fix: add maxAmount validator into rules

* test: add maxAmount on test.

* fix: add max amount error mesage on language.

* refactor: removed hardcore value and rename validator name.

Co-authored-by: myxmaster <77545287+myxmaster@users.noreply.github.com>
---
 __tests__/components/AmountInput.spec.ts      | 10 +++++--
 src/core/validation/CustomValidationRules.ts  | 11 ++++++-
 src/core/validation/ValidationRuleset.ts      |  4 ++-
 .../validators/MaxRelativeAmountValidator.ts  | 29 +++++++++++++++++++
 src/core/validation/validators/index.ts       |  2 ++
 src/language/en-US.json                       |  1 +
 src/language/ja-JP.json                       |  1 +
 src/language/zh-CN.json                       |  1 +
 8 files changed, 55 insertions(+), 4 deletions(-)
 create mode 100644 src/core/validation/validators/MaxRelativeAmountValidator.ts

diff --git a/__tests__/components/AmountInput.spec.ts b/__tests__/components/AmountInput.spec.ts
index cf5d102f2..e2534799d 100644
--- a/__tests__/components/AmountInput.spec.ts
+++ b/__tests__/components/AmountInput.spec.ts
@@ -9,9 +9,8 @@ import flushPromises from 'flush-promises';
 import VueI18n, { Values } from 'vue-i18n';
 import i18n from '@/language/index';
 import { StandardValidationRules } from '@/core/validation/StandardValidationRules';
-import { MaxDecimalsValidator } from '@/core/validation/validators';
+import { MaxDecimalsValidator, PositiveDecimalNumberValidator, MaxRelativeAmountValidator } from '@/core/validation/validators';
 import { appConfig } from '@/config';
-import { PositiveDecimalNumberValidator } from '@/core/validation/validators/PositiveDecimalNumberValidator';
 
 StandardValidationRules.register();
 appConfig.constants.DECIMAL_SEPARATOR = '.';
@@ -27,6 +26,13 @@ extend('positiveDecimal', {
     validate: (value) => PositiveDecimalNumberValidator.validate(value),
     message: () => i18n.t('positive_decimal_error', { decimalSeparator: appConfig.constants.DECIMAL_SEPARATOR }).toString(),
 });
+extend('maxRelativeAmount', {
+    validate: (value, { maxRelativeAmount }: any) => {
+        return MaxRelativeAmountValidator.validate(value, maxRelativeAmount);
+    },
+    message: (_fieldName: string, values: Values) => `${i18n.t('max_amount_error', values)}`,
+    params: ['maxRelativeAmount'],
+});
 const localVue = createLocalVue();
 localVue.component('ValidationProvider', ValidationProvider);
 localVue.use(Vuex);
diff --git a/src/core/validation/CustomValidationRules.ts b/src/core/validation/CustomValidationRules.ts
index 122d93ec0..1346b8493 100644
--- a/src/core/validation/CustomValidationRules.ts
+++ b/src/core/validation/CustomValidationRules.ts
@@ -11,16 +11,17 @@ import { networkConfig, appConfig } from '@/config';
 import {
     AddressValidator,
     AliasValidator,
+    MaxRelativeAmountValidator,
     MaxDecimalsValidator,
     MaxMessageValidator,
     PublicKeyValidator,
+    PositiveDecimalNumberValidator,
     UrlValidator,
 } from './validators';
 import { ProfileModel } from '@/core/database/entities/ProfileModel';
 import { AccountService } from '@/services/AccountService';
 import { NetworkConfigurationModel } from '@/core/database/entities/NetworkConfigurationModel';
 import { Values } from 'vue-i18n';
-import { PositiveDecimalNumberValidator } from './validators/PositiveDecimalNumberValidator';
 
 // TODO CustomValidationRules needs to be created when the network configuration is resolved, UI
 // needs to use the resolved CustomValidationRules
@@ -50,6 +51,14 @@ export class CustomValidationRules {
             params: ['maxDecimalNumber'],
         });
 
+        extend('maxRelativeAmount', {
+            validate: (value, { maxRelativeAmount }: any) => {
+                return MaxRelativeAmountValidator.validate(value, maxRelativeAmount);
+            },
+            message: (_fieldName: string, values: Values) => `${i18n.t('max_amount_error', { ...values })}`,
+            params: ['maxRelativeAmount'],
+        });
+
         extend('maxMessage', {
             validate: (value, args: any) => {
                 const { maxMessageNumber } = args;
diff --git a/src/core/validation/ValidationRuleset.ts b/src/core/validation/ValidationRuleset.ts
index 1b05c1791..d684a62bf 100644
--- a/src/core/validation/ValidationRuleset.ts
+++ b/src/core/validation/ValidationRuleset.ts
@@ -33,7 +33,9 @@ export const createValidationRuleSet = ({
         address: 'required|address|addressNetworkType:currentProfile',
         profilePassword: 'required|profilePassword',
         addressOrAlias: 'required|addressOrAlias|addressOrAliasNetworkType:currentProfile',
-        amount: `positiveDecimal|maxDecimals:${maxMosaicDivisibility}`,
+        amount: `positiveDecimal|maxDecimals:${maxMosaicDivisibility}|maxRelativeAmount:${
+            maxMosaicAtomicUnits / Math.pow(10, maxMosaicDivisibility)
+        }`,
         confirmPassword: 'required|confirmPassword:@newPassword',
         divisibility: 'required|min_value:0|max_value:6|integer',
         duration: `required|min_value:0|max_value:${maxMosaicDuration}`,
diff --git a/src/core/validation/validators/MaxRelativeAmountValidator.ts b/src/core/validation/validators/MaxRelativeAmountValidator.ts
new file mode 100644
index 000000000..257621102
--- /dev/null
+++ b/src/core/validation/validators/MaxRelativeAmountValidator.ts
@@ -0,0 +1,29 @@
+/*
+ * Copyright 2020 NEM (https://nem.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and limitations under the License.
+ *
+ */
+import { Validator, staticImplements } from './Validator';
+
+@staticImplements<Validator>()
+export class MaxRelativeAmountValidator {
+    /**
+     * Validates the max amount of the mosaic supply. eg: 9,000,000,000
+     * @static
+     * @param {*} relativeAmount
+     * @returns {boolean}
+     */
+    public static validate(relativeAmount: string, maxRelativeAmount: number): boolean {
+        return Number(relativeAmount) <= maxRelativeAmount;
+    }
+}
diff --git a/src/core/validation/validators/index.ts b/src/core/validation/validators/index.ts
index 9a373c72c..835663b24 100644
--- a/src/core/validation/validators/index.ts
+++ b/src/core/validation/validators/index.ts
@@ -3,9 +3,11 @@ export * from './AliasValidator';
 export * from './DerivationPathValidator';
 export * from './MaxDecimalsValidator';
 export * from './MaxMessageValidator';
+export * from './MaxRelativeAmountValidator';
 export * from './MosaicIdValidator';
 export * from './NamespaceIdValidator';
 export * from './PublicKeyValidator';
 export * from './PrivateKeyValidator';
 export * from './UrlValidator';
 export * from './Validator';
+export * from './PositiveDecimalNumberValidator';
diff --git a/src/language/en-US.json b/src/language/en-US.json
index d897b6c89..1b328fae7 100644
--- a/src/language/en-US.json
+++ b/src/language/en-US.json
@@ -617,6 +617,7 @@
     "logout": "Log out",
     "low_fee_warning_message": "Transactions with less than the average fee might not get accepted and eventually expire",
     "max_approval_amount_more_than_10": "The maximum number of co-signatories needed for approval cannot exceed 10",
+    "max_amount_error": "The {_field_} can not be greater than {maxRelativeAmount}.",
     "max_decimal_number_error": "The {_field_} field must have {maxDecimalNumber} decimals or less.",
     "max_message_length_error": "The {_field_} may not be greater than {maxMessageNumber} characters.",
     "positive_decimal_error": "Only digits and \"{decimalSeparator}\" allowed",
diff --git a/src/language/ja-JP.json b/src/language/ja-JP.json
index 6e7864cf9..f60c9c1f3 100644
--- a/src/language/ja-JP.json
+++ b/src/language/ja-JP.json
@@ -617,6 +617,7 @@
     "logout": "ログアウト",
     "low_fee_warning_message": "平均手数料未満のトランザクションは受け入れられず、最終的に期限切れとなる場合があります",
     "max_approval_amount_more_than_10": "承認に必要な連署者の最大数は 10 を超えることはできません",
+    "max_amount_error": "{_field_} を超えることはできません {maxRelativeAmount}.",
     "max_decimal_number_error": "{_field_} には {maxDecimalNumber} 小数点以下の桁数を指定してください",
     "max_message_length_error": "{_field_} フィールドは {maxMessageNumber} 文字を超えることはできません",
     "positive_decimal_error": "数字と \"{decimalSeparator}\" のみが利用可能です",
diff --git a/src/language/zh-CN.json b/src/language/zh-CN.json
index 156fe09c3..23668e1b1 100644
--- a/src/language/zh-CN.json
+++ b/src/language/zh-CN.json
@@ -599,6 +599,7 @@
     "logout": "登出",
     "low_fee_warning_message": "少于建议费用的交易可能不会被接受并最终到期",
     "max_approval_amount_more_than_10": "最小删除账户审批数不可大于10",
+    "max_amount_error": "{_field_} 数量不可超过 {maxRelativeAmount}.",
     "max_decimal_number_error": "{_field_} 字段最多 {maxDecimalNumber} 位小数或更少。",
     "max_message_length_error": "{_field_} 栏位不得超过 {maxMessageNumber} 个字元",
     "positive_decimal_error": "只允许使用数字和\"{decimalSeparator}\"",

From 85ef26f19b71bfbd1f6d791266caea0d7553f0bf Mon Sep 17 00:00:00 2001
From: Anthony Law <yc-law1015@hotmail.com>
Date: Wed, 30 Jun 2021 19:18:18 +0800
Subject: [PATCH 21/30] fix: encrypt console error (#1567)

---
 src/views/forms/FormProfileUnlock/FormProfileUnlockTs.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/forms/FormProfileUnlock/FormProfileUnlockTs.ts b/src/views/forms/FormProfileUnlock/FormProfileUnlockTs.ts
index 2edefd39a..bf1364bca 100644
--- a/src/views/forms/FormProfileUnlock/FormProfileUnlockTs.ts
+++ b/src/views/forms/FormProfileUnlock/FormProfileUnlockTs.ts
@@ -100,7 +100,7 @@ export class FormProfileUnlockTs extends Vue {
 
     public mounted(): void {
         if (this.focus) {
-            this.$nextTick().then(() => (this.$refs['passwordInput'] as any).focus());
+            this.$nextTick().then(() => (this.$refs['passwordInput'] as any).$el.focus());
         }
     }
 

From 6df9a4c8358e0b8a610578ed99bd72d9c54a7104 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Carrera?= <adria.cm95@gmail.com>
Date: Wed, 30 Jun 2021 16:56:17 +0200
Subject: [PATCH 22/30] Fix node storage indexed by profileName (#1554)

---
 .../database/storage/NodeModelStorage.spec.ts | 80 +++++++------------
 .../e2e/NodeServiceIntegrationTest.spec.ts    | 15 +++-
 src/core/database/storage/NodeModelStorage.ts |  8 +-
 src/services/NodeService.ts                   | 35 +++++---
 src/store/Network.ts                          | 26 +++---
 5 files changed, 88 insertions(+), 76 deletions(-)

diff --git a/__tests__/database/storage/NodeModelStorage.spec.ts b/__tests__/database/storage/NodeModelStorage.spec.ts
index 210d011ac..1c56ce0ee 100644
--- a/__tests__/database/storage/NodeModelStorage.spec.ts
+++ b/__tests__/database/storage/NodeModelStorage.spec.ts
@@ -20,67 +20,47 @@ import { SimpleObjectStorage } from '@/core/database/backends/SimpleObjectStorag
 import { VersionedModel } from '@/core/database/entities/VersionedModel';
 import { NodeModel } from '@/core/database/entities/NodeModel';
 import { NodeModelStorage } from '@/core/database/storage/NodeModelStorage';
+import { ProfileModel } from '@/core/database/entities/ProfileModel';
+
+const fakeProfile: ProfileModel = {
+    profileName: 'fakeName',
+    generationHash: 'fakeGenHash',
+    hint: 'fakeHint',
+    networkType: NetworkType.TEST_NET,
+    password: 'fakePassword',
+    seed: 'fakeSeed',
+    accounts: [],
+    termsAndConditionsApproved: true,
+    selectedNodeUrlToConnect: 'fakeNode',
+};
+
+const fakeNode: NodeModel = {
+    url: 'fakeNodeUrl',
+    friendlyName: 'fakeNode',
+    isDefault: false,
+    networkType: NetworkType.TEST_NET,
+};
 
 describe('storage/ProfileModelStorage.spec ==>', () => {
     describe('constructor() should', () => {
-        test('Should upgrade testnet only on v8', () => {
+        test('Should save nodes by profile name', () => {
             const nodes = {
-                version: 8,
-                data: [
-                    {
-                        url: 'http://someMainnet.symbolblockchain.io:3000',
-                        friendlyName: 'ngl-someMainnet-403',
-                        isDefault: true,
-                        networkType: NetworkType.MAIN_NET,
-                        publicKey: 'EF1209DC3C42B6450BEF658D404252DF2E26784CECD35FAEB19D929AE030A198',
-                        nodePublicKey: 'B87704DB1310FC59C91A1858DBDCFC67289363C18A67E10AFC2DCD26458B5D47',
-                    },
-                    {
-                        url: 'http://someOldtestet.symbolblockchain.io:3000',
-                        friendlyName: 'ngl-someOldtestet-001',
-                        isDefault: true,
-                        networkType: NetworkType.TEST_NET,
-                    },
-                    {
-                        url: 'http://someOldtestet2.symbolblockchain.io:3000',
-                        friendlyName: 'ngl-someOldtestet2-002',
-                        isDefault: true,
-                        networkType: NetworkType.TEST_NET,
-                    },
-                    {
-                        url: 'http://somePrivate.symbolblockchain.io:3000',
-                        friendlyName: 'ngl-somePrivate-002',
-                        isDefault: true,
-                        networkType: NetworkType.PRIVATE_TEST,
-                    },
-                ],
+                version: 10,
+                data: {
+                    [fakeProfile.profileName]: [fakeNode],
+                },
             };
-            const delegate = new SimpleObjectStorage<VersionedModel<NodeModel[]>>(
+            const delegate = new SimpleObjectStorage<VersionedModel<Record<string, NodeModel[]>>>(
                 'node',
                 new ObjectStorageBackend({
                     node: JSON.stringify(nodes),
                 }),
             );
             const storage = new NodeModelStorage(delegate);
-            const migratedData = storage.get();
-            const expected = [
-                {
-                    url: 'http://someMainnet.symbolblockchain.io:3000',
-                    friendlyName: 'ngl-someMainnet-403',
-                    isDefault: true,
-                    networkType: NetworkType.MAIN_NET,
-                    publicKey: 'EF1209DC3C42B6450BEF658D404252DF2E26784CECD35FAEB19D929AE030A198',
-                    nodePublicKey: 'B87704DB1310FC59C91A1858DBDCFC67289363C18A67E10AFC2DCD26458B5D47',
-                },
-                {
-                    url: 'http://somePrivate.symbolblockchain.io:3000',
-                    friendlyName: 'ngl-somePrivate-002',
-                    isDefault: true,
-                    networkType: NetworkType.PRIVATE_TEST,
-                },
-            ];
-            expect(migratedData).toEqual(expected);
-            expect(delegate.get()).toEqual({ version: 9, data: migratedData });
+            const storedData = storage.get();
+            expect(storedData).toEqual({
+                [fakeProfile.profileName]: [fakeNode],
+            });
         });
     });
 });
diff --git a/__tests__/e2e/NodeServiceIntegrationTest.spec.ts b/__tests__/e2e/NodeServiceIntegrationTest.spec.ts
index 9bf457bd0..d76c57af4 100644
--- a/__tests__/e2e/NodeServiceIntegrationTest.spec.ts
+++ b/__tests__/e2e/NodeServiceIntegrationTest.spec.ts
@@ -18,6 +18,7 @@ import { NodeService } from '@/services/NodeService';
 import { toArray } from 'rxjs/operators';
 import { of } from 'rxjs';
 import { instance, mock, when } from 'ts-mockito';
+import { ProfileModel } from '@/core/database/entities/ProfileModel';
 
 const nodeService = new NodeService();
 const realUrl = 'http://api-01.us-west-1.symboldev.network:3000';
@@ -45,9 +46,21 @@ when(mockRepoFactory.getEpochAdjustment()).thenReturn(of(1573430400));
 when(mockRepoFactory.getNetworkType()).thenReturn(of(NetworkType.MIJIN_TEST));
 const repositoryFactory = instance(mockRepoFactory);
 
+const fakeProfile: ProfileModel = {
+    profileName: 'fakeName',
+    generationHash: 'fakeGenHash',
+    hint: 'fakeHint',
+    networkType: NetworkType.TEST_NET,
+    password: 'fakePassword',
+    seed: 'fakeSeed',
+    accounts: [],
+    termsAndConditionsApproved: true,
+    selectedNodeUrlToConnect: 'fakeNode',
+};
+
 describe('services/NodeService', () => {
     test('getNodes', async () => {
-        const peers = await nodeService.getNodes(repositoryFactory, realUrl, NetworkType.TEST_NET).pipe(toArray()).toPromise();
+        const peers = await nodeService.getNodes(fakeProfile, repositoryFactory, realUrl).pipe(toArray()).toPromise();
         console.log(JSON.stringify(peers, null, 2));
     });
 });
diff --git a/src/core/database/storage/NodeModelStorage.ts b/src/core/database/storage/NodeModelStorage.ts
index 94df5a855..a4467d5f7 100644
--- a/src/core/database/storage/NodeModelStorage.ts
+++ b/src/core/database/storage/NodeModelStorage.ts
@@ -20,13 +20,13 @@ import { SimpleObjectStorage } from '@/core/database/backends/SimpleObjectStorag
 import { VersionedModel } from '@/core/database/entities/VersionedModel';
 import { NetworkType } from 'symbol-sdk';
 
-export class NodeModelStorage extends VersionedObjectStorage<NodeModel[]> {
+export class NodeModelStorage extends VersionedObjectStorage<Record<string, NodeModel[]>> {
     /**
      * Singleton instance as we want to run the migration just once
      */
     public static INSTANCE = new NodeModelStorage();
 
-    public constructor(delegate = new SimpleObjectStorage<VersionedModel<NodeModel[]>>('node')) {
+    public constructor(delegate = new SimpleObjectStorage<VersionedModel<Record<string, NodeModel[]>>>('node')) {
         super({
             delegate: delegate,
             migrations: [
@@ -64,6 +64,10 @@ export class NodeModelStorage extends VersionedObjectStorage<NodeModel[]> {
                         return data.filter((n) => n.networkType !== NetworkType.TEST_NET);
                     },
                 },
+                {
+                    description: 'Reset nodes for node storage fix (non backwards compatible)',
+                    migrate: () => undefined,
+                },
             ],
         });
     }
diff --git a/src/services/NodeService.ts b/src/services/NodeService.ts
index 081cb943d..f0671cf0e 100644
--- a/src/services/NodeService.ts
+++ b/src/services/NodeService.ts
@@ -22,6 +22,7 @@ import { NodeModel } from '@/core/database/entities/NodeModel';
 import * as _ from 'lodash';
 import { networkConfig } from '@/config';
 import { NodeModelStorage } from '@/core/database/storage/NodeModelStorage';
+import { ProfileModel } from '@/core/database/entities/ProfileModel';
 
 /**
  * The service in charge of loading and caching anything related to Node and Peers from Rest.
@@ -33,21 +34,30 @@ export class NodeService {
      */
     private readonly storage = NodeModelStorage.INSTANCE;
 
-    public getKnowNodesOnly(networkType: NetworkType): NodeModel[] {
-        return _.uniqBy(this.loadNodes().concat(this.loadStaticNodes(networkType)), 'url').filter((n) => n.networkType === networkType);
+    public getKnowNodesOnly(profile: ProfileModel): NodeModel[] {
+        return _.uniqBy(this.loadNodes(profile).concat(this.loadStaticNodes(profile.networkType)), 'url').filter(
+            (n) => n.networkType === profile.networkType,
+        );
     }
 
-    public getNodes(repositoryFactory: RepositoryFactory, repositoryFactoryUrl: string, networkType: NetworkType): Observable<NodeModel[]> {
-        const storedNodes = this.getKnowNodesOnly(networkType);
+    public getNodes(profile: ProfileModel, repositoryFactory: RepositoryFactory, repositoryFactoryUrl: string): Observable<NodeModel[]> {
+        const storedNodes = this.getKnowNodesOnly(profile);
         const nodeRepository = repositoryFactory.createNodeRepository();
 
         return nodeRepository.getNodeInfo().pipe(
             map((dto: NodeInfo) =>
-                this.createNodeModel(repositoryFactoryUrl, networkType, dto.friendlyName, undefined, dto.publicKey, dto.nodePublicKey),
+                this.createNodeModel(
+                    repositoryFactoryUrl,
+                    profile.networkType,
+                    dto.friendlyName,
+                    undefined,
+                    dto.publicKey,
+                    dto.nodePublicKey,
+                ),
             ),
-            ObservableHelpers.defaultLast(this.createNodeModel(repositoryFactoryUrl, networkType)),
+            ObservableHelpers.defaultLast(this.createNodeModel(repositoryFactoryUrl, profile.networkType)),
             map((currentNode) => _.uniqBy([currentNode, ...storedNodes], 'url')),
-            tap((p) => this.saveNodes(p)),
+            tap((p) => this.saveNodes(profile, p)),
         );
     }
 
@@ -75,12 +85,15 @@ export class NodeService {
         );
     }
 
-    private loadNodes(): NodeModel[] {
-        return this.storage.get() || [];
+    private loadNodes(profile: ProfileModel): NodeModel[] {
+        const allProfileNodes = this.storage.get() || {};
+        return allProfileNodes[profile.profileName] || [];
     }
 
-    public saveNodes(nodes: NodeModel[]) {
-        this.storage.set(nodes);
+    public saveNodes(profile: ProfileModel, nodes: NodeModel[]) {
+        const allProfileNodes = this.storage.get() || {};
+        allProfileNodes[profile.profileName] = nodes;
+        this.storage.set(allProfileNodes);
     }
 
     public reset() {
diff --git a/src/store/Network.ts b/src/store/Network.ts
index 17a912406..ebf2917bc 100644
--- a/src/store/Network.ts
+++ b/src/store/Network.ts
@@ -180,34 +180,34 @@ export default {
             Vue.set(state, 'networkIsNotMatchingProfile', networkIsNotMatchingProfile);
         },
 
-        addPeer: (state: NetworkState, peerUrl: string) => {
+        addPeer: (state: NetworkState, { peerUrl, profile }) => {
             const knowNodes: NodeModel[] = state.knowNodes;
             const existNode = knowNodes.find((p: NodeModel) => p.url === peerUrl);
             if (existNode) {
                 return;
             }
             const newNodes = [...knowNodes, new NodeModel(peerUrl, '', false, state.networkType)];
-            new NodeService().saveNodes(newNodes);
+            new NodeService().saveNodes(profile, newNodes);
             Vue.set(state, 'knowNodes', newNodes);
         },
-        removePeer: (state: NetworkState, peerUrl: string) => {
+        removePeer: (state: NetworkState, { peerUrl, profile }) => {
             const knowNodes: NodeModel[] = state.knowNodes;
             const toBeDeleted = knowNodes.find((p: NodeModel) => p.url === peerUrl);
             if (!toBeDeleted) {
                 return;
             }
             const newNodes = knowNodes.filter((n) => n !== toBeDeleted);
-            new NodeService().saveNodes(newNodes);
+            new NodeService().saveNodes(profile, newNodes);
             Vue.set(state, 'knowNodes', newNodes);
         },
-        updateNode: (state: NetworkState, node: NodeModel) => {
+        updateNode: (state: NetworkState, { node, profile }) => {
             const knowNodes: NodeModel[] = state.knowNodes;
             const toBeUpdated = knowNodes.find((p: NodeModel) => p.url === node.url);
             if (!toBeUpdated) {
                 return;
             }
             const newNodes = knowNodes.map((n) => (n.url === node.url ? node : n));
-            new NodeService().saveNodes(newNodes);
+            new NodeService().saveNodes(profile, newNodes);
             Vue.set(state, 'knowNodes', newNodes);
         },
         subscriptions: (state: NetworkState, data) => Vue.set(state, 'subscriptions', data),
@@ -364,7 +364,7 @@ export default {
             const nodeService = new NodeService();
             const oldGenerationHash = getters['generationHash'];
             const networkType = networkModel.networkType;
-            const getNodesPromise = nodeService.getNodes(repositoryFactory, networkModel.url, networkType).toPromise();
+            const getNodesPromise = nodeService.getNodes(currentProfile, repositoryFactory, networkModel.url).toPromise();
             const getBlockchainHeightPromise = repositoryFactory.createChainRepository().getChainInfo().toPromise();
             const nodes = await getNodesPromise;
             const currentHeight = (await getBlockchainHeightPromise).height.compact();
@@ -501,23 +501,25 @@ export default {
             if (!UrlValidator.validate(peerUrl)) {
                 throw Error('Cannot add node. URL is not valid: ' + peerUrl);
             }
-            commit('addPeer', peerUrl);
+            const profile: ProfileModel = rootGetters['profile/currentProfile'];
+            commit('addPeer', { peerUrl, profile });
             const repositoryFactory = rootGetters['network/repositoryFactory'];
             const isConnected = rootGetters['network/isConnected'];
             if (!repositoryFactory || !isConnected) {
                 await dispatch('SET_CURRENT_PEER', peerUrl);
             }
         },
-        REMOVE_KNOWN_PEER({ commit }, peerUrl) {
-            commit('removePeer', peerUrl);
+        REMOVE_KNOWN_PEER({ commit, rootGetters }, peerUrl) {
+            const profile: ProfileModel = rootGetters['profile/currentProfile'];
+            commit('removePeer', { peerUrl, profile });
         },
 
         async UPDATE_PEER({ commit, rootGetters }, peerUrl) {
             const repositoryFactory = new RepositoryFactoryHttp(peerUrl);
             const nodeService = new NodeService();
-            const networkType = rootGetters['network/networkType'];
+            const currentProfile: ProfileModel = rootGetters['profile/currentProfile'];
 
-            const knownNodes = await nodeService.getNodes(repositoryFactory, peerUrl, networkType).toPromise();
+            const knownNodes = await nodeService.getNodes(currentProfile, repositoryFactory, peerUrl).toPromise();
             commit('knowNodes', knownNodes);
         },
 

From a506545b13bd215281c2ea183e1e04afffd8de04 Mon Sep 17 00:00:00 2001
From: Bassem <bassem.magdyy94@gmail.com>
Date: Wed, 30 Jun 2021 21:36:20 +0200
Subject: [PATCH 23/30] fix #1167 (#1570)

---
 src/components/QRCode/QRCodePassword/QRCodePassword.vue     | 4 +++-
 src/components/QRCode/QRCodePassword/QRCodePasswordTs.ts    | 4 +---
 src/views/forms/FormProfileUnlock/FormProfileUnlock.vue     | 4 +++-
 src/views/forms/FormProfileUnlock/FormProfileUnlockTs.ts    | 3 ---
 .../ModalFormSubAccountCreation.vue                         | 4 +++-
 .../ModalFormSubAccountCreationTs.ts                        | 4 +---
 .../ModalMnemonicBackupWizard/ModalMnemonicBackupWizard.vue | 3 ++-
 .../ModalMnemonicBackupWizardTs.ts                          | 6 +-----
 src/views/pages/profiles/LoginPage.vue                      | 5 +++--
 src/views/pages/profiles/LoginPageTs.ts                     | 3 ---
 10 files changed, 17 insertions(+), 23 deletions(-)

diff --git a/src/components/QRCode/QRCodePassword/QRCodePassword.vue b/src/components/QRCode/QRCodePassword/QRCodePassword.vue
index c62a20437..98493c6bc 100644
--- a/src/components/QRCode/QRCodePassword/QRCodePassword.vue
+++ b/src/components/QRCode/QRCodePassword/QRCodePassword.vue
@@ -19,9 +19,11 @@
                                     slim
                                 >
                                     <ErrorTooltip :errors="errors">
-                                        <PasswordInput
+                                        <input
                                             v-model="formItems.password"
                                             v-focus
+                                            type="password"
+                                            class="input-size input-style"
                                             :placeholder="$t('please_enter_your_account_password')"
                                         />
                                     </ErrorTooltip>
diff --git a/src/components/QRCode/QRCodePassword/QRCodePasswordTs.ts b/src/components/QRCode/QRCodePassword/QRCodePasswordTs.ts
index 56d9aa3f8..b2defbf3c 100644
--- a/src/components/QRCode/QRCodePassword/QRCodePasswordTs.ts
+++ b/src/components/QRCode/QRCodePassword/QRCodePasswordTs.ts
@@ -24,11 +24,9 @@ import FormRow from '@/components/FormRow/FormRow.vue';
 // @ts-ignore
 import ErrorTooltip from '@/components/ErrorTooltip/ErrorTooltip.vue';
 import { CosignatureSignedTransaction, SignedTransaction, TransactionMapping } from 'symbol-sdk';
-// @ts-ignore
-import PasswordInput from '@/components/PasswordInput/PasswordInput.vue';
 
 @Component({
-    components: { FormWrapper, FormRow, ErrorTooltip, ValidationProvider, PasswordInput },
+    components: { FormWrapper, FormRow, ErrorTooltip, ValidationProvider },
 })
 export default class QRCodePasswordTs extends Vue {
     @Prop({ default: null })
diff --git a/src/views/forms/FormProfileUnlock/FormProfileUnlock.vue b/src/views/forms/FormProfileUnlock/FormProfileUnlock.vue
index 14c0f595c..1957da095 100644
--- a/src/views/forms/FormProfileUnlock/FormProfileUnlock.vue
+++ b/src/views/forms/FormProfileUnlock/FormProfileUnlock.vue
@@ -13,9 +13,11 @@
                             slim
                         >
                             <ErrorTooltip :errors="errors">
-                                <PasswordInput
+                                <input
                                     ref="passwordInput"
                                     v-model="formItems.password"
+                                    type="password"
+                                    class="input-size input-style"
                                     :disabled="isLoading"
                                     :placeholder="$t('please_enter_your_account_password')"
                                 />
diff --git a/src/views/forms/FormProfileUnlock/FormProfileUnlockTs.ts b/src/views/forms/FormProfileUnlock/FormProfileUnlockTs.ts
index bf1364bca..8f87d8480 100644
--- a/src/views/forms/FormProfileUnlock/FormProfileUnlockTs.ts
+++ b/src/views/forms/FormProfileUnlock/FormProfileUnlockTs.ts
@@ -28,15 +28,12 @@ import FormRow from '@/components/FormRow/FormRow.vue';
 // @ts-ignore
 import ErrorTooltip from '@/components/ErrorTooltip/ErrorTooltip.vue';
 import { ProfileService } from '@/services/ProfileService';
-// @ts-ignore
-import PasswordInput from '@/components/PasswordInput/PasswordInput.vue';
 @Component({
     components: {
         ValidationProvider,
         FormWrapper,
         FormRow,
         ErrorTooltip,
-        PasswordInput,
     },
     computed: {
         ...mapGetters({
diff --git a/src/views/modals/ModalFormSubAccountCreation/ModalFormSubAccountCreation.vue b/src/views/modals/ModalFormSubAccountCreation/ModalFormSubAccountCreation.vue
index 377cd9e8e..3c371a13a 100644
--- a/src/views/modals/ModalFormSubAccountCreation/ModalFormSubAccountCreation.vue
+++ b/src/views/modals/ModalFormSubAccountCreation/ModalFormSubAccountCreation.vue
@@ -65,9 +65,11 @@
                                     class="inputs-container items-container"
                                 >
                                     <ErrorTooltip :errors="errors">
-                                        <PasswordInput
+                                        <input
                                             v-model="formItems.privateKey"
+                                            type="password"
                                             name="privateKey"
+                                            class="input-size input-style"
                                             autocomplete="new-password"
                                             :disabled="isCreatingAccount"
                                         />
diff --git a/src/views/modals/ModalFormSubAccountCreation/ModalFormSubAccountCreationTs.ts b/src/views/modals/ModalFormSubAccountCreation/ModalFormSubAccountCreationTs.ts
index 39981a6ad..a0afeb379 100644
--- a/src/views/modals/ModalFormSubAccountCreation/ModalFormSubAccountCreationTs.ts
+++ b/src/views/modals/ModalFormSubAccountCreation/ModalFormSubAccountCreationTs.ts
@@ -39,8 +39,7 @@ import { LedgerService } from '@/services/LedgerService';
 import { MnemonicPassPhrase } from 'symbol-hd-wallets';
 import { ValidationObserver, ValidationProvider } from 'vee-validate';
 import { AccountService } from '@/services/AccountService';
-// @ts-ignore
-import PasswordInput from '@/components/PasswordInput/PasswordInput.vue';
+
 @Component({
     components: {
         FormProfileUnlock,
@@ -50,7 +49,6 @@ import PasswordInput from '@/components/PasswordInput/PasswordInput.vue';
         ErrorTooltip,
         ValidationObserver,
         FormWrapper,
-        PasswordInput,
     },
     computed: {
         ...mapGetters({
diff --git a/src/views/modals/ModalMnemonicBackupWizard/ModalMnemonicBackupWizard.vue b/src/views/modals/ModalMnemonicBackupWizard/ModalMnemonicBackupWizard.vue
index 599f9e29e..52bfc1703 100644
--- a/src/views/modals/ModalMnemonicBackupWizard/ModalMnemonicBackupWizard.vue
+++ b/src/views/modals/ModalMnemonicBackupWizard/ModalMnemonicBackupWizard.vue
@@ -29,10 +29,11 @@
                     <form class="centered" onsubmit="event.preventDefault()" @keyup.enter="submit">
                         <input v-model="cipher" v-validate="'required'" data-vv-name="cipher" style="display: none;" />
                         <ErrorTooltip field-name="password">
-                            <PasswordInput
+                            <input
                                 v-model.lazy="password"
                                 v-focus
                                 v-validate="validation.previousPassword"
+                                type="password"
                                 data-vv-name="password"
                                 :data-vv-as="$t('password')"
                             />
diff --git a/src/views/modals/ModalMnemonicBackupWizard/ModalMnemonicBackupWizardTs.ts b/src/views/modals/ModalMnemonicBackupWizard/ModalMnemonicBackupWizardTs.ts
index 124f96d00..c21078f05 100644
--- a/src/views/modals/ModalMnemonicBackupWizard/ModalMnemonicBackupWizardTs.ts
+++ b/src/views/modals/ModalMnemonicBackupWizard/ModalMnemonicBackupWizardTs.ts
@@ -14,11 +14,7 @@
  *
  */
 import { Component, Vue } from 'vue-property-decorator';
-// @ts-ignore
-import PasswordInput from '@/components/PasswordInput/PasswordInput.vue';
 @Component({
-    components: {
-        PasswordInput,
-    },
+    components: {},
 })
 export class ModalMnemonicBackupWizardTs extends Vue {}
diff --git a/src/views/pages/profiles/LoginPage.vue b/src/views/pages/profiles/LoginPage.vue
index e64e66608..4c871a24c 100644
--- a/src/views/pages/profiles/LoginPage.vue
+++ b/src/views/pages/profiles/LoginPage.vue
@@ -77,11 +77,12 @@
                                 rules="required|min:8"
                             >
                                 <ErrorTooltip field-name="password" :errors="errors">
-                                    <PasswordInput
+                                    <input
                                         v-model="formItems.password"
                                         v-focus
-                                        :class-name="[!profilesClassifiedByNetworkType ? 'un_click' : '']"
+                                        :class="[!profilesClassifiedByNetworkType ? 'un_click' : '']"
                                         :placeholder="$t('please_enter_your_account_password')"
+                                        type="password"
                                         :disabled="!profilesClassifiedByNetworkType || performingLogin"
                                     />
                                 </ErrorTooltip>
diff --git a/src/views/pages/profiles/LoginPageTs.ts b/src/views/pages/profiles/LoginPageTs.ts
index a253e5135..1a36ade4b 100644
--- a/src/views/pages/profiles/LoginPageTs.ts
+++ b/src/views/pages/profiles/LoginPageTs.ts
@@ -32,8 +32,6 @@ import { ValidationObserver, ValidationProvider } from 'vee-validate';
 import ErrorTooltip from '@/components/ErrorTooltip/ErrorTooltip.vue';
 // @ts-ignore
 import LanguageSelector from '@/components/LanguageSelector/LanguageSelector.vue';
-// @ts-ignore
-import PasswordInput from '@/components/PasswordInput/PasswordInput.vue';
 // configuration
 import { SettingService } from '@/services/SettingService';
 import { SettingsModel } from '@/core/database/entities/SettingsModel';
@@ -54,7 +52,6 @@ import _ from 'lodash';
         ValidationObserver,
         LanguageSelector,
         VideoBackground,
-        PasswordInput,
     },
 })
 export default class LoginPageTs extends Vue {

From 37aaaf895d1988d72bd5f64de5c49cb645c80973 Mon Sep 17 00:00:00 2001
From: Anthony Law <yc-law1015@hotmail.com>
Date: Fri, 2 Jul 2021 17:19:29 +0800
Subject: [PATCH 24/30] Fix CR (#1569)

* fix: display "Encrypted message" if message os encrypted.

* fix: check on locale decimal separator before comparing value.

* fix: dynamic check in max relative amount with divisibility

* test: add max relative amout in unit test and lint fix
---
 __tests__/components/AmountInput.spec.ts      | 26 ++++++++++++++++---
 .../MosaicAttachmentInput.vue                 |  8 +++++-
 .../TransactionRow/TransactionRowTs.ts        | 12 ++++++---
 src/core/validation/CustomValidationRules.ts  | 16 +++++++++---
 src/core/validation/ValidationRuleset.ts      |  4 +--
 .../validators/MaxRelativeAmountValidator.ts  |  7 ++++-
 .../FormTransferTransactionTs.ts              |  2 +-
 7 files changed, 60 insertions(+), 15 deletions(-)

diff --git a/__tests__/components/AmountInput.spec.ts b/__tests__/components/AmountInput.spec.ts
index e2534799d..a24026bba 100644
--- a/__tests__/components/AmountInput.spec.ts
+++ b/__tests__/components/AmountInput.spec.ts
@@ -27,11 +27,21 @@ extend('positiveDecimal', {
     message: () => i18n.t('positive_decimal_error', { decimalSeparator: appConfig.constants.DECIMAL_SEPARATOR }).toString(),
 });
 extend('maxRelativeAmount', {
-    validate: (value, { maxRelativeAmount }: any) => {
+    validate: (value, { maxMosaicAtomicUnits, maxMosaicDivisibility }: any) => {
+        const maxRelativeAmount =
+            maxMosaicDivisibility === 0 ? maxMosaicAtomicUnits : maxMosaicAtomicUnits / Math.pow(10, maxMosaicDivisibility);
         return MaxRelativeAmountValidator.validate(value, maxRelativeAmount);
     },
-    message: (_fieldName: string, values: Values) => `${i18n.t('max_amount_error', values)}`,
-    params: ['maxRelativeAmount'],
+    message: (_fieldName: string, values: Values) =>
+        `${i18n.t('max_amount_error', {
+            ...values,
+            maxRelativeAmount: `${
+                values['maxMosaicAtomicUnits'] === 0
+                    ? values['maxMosaicAtomicUnits']
+                    : values['maxMosaicAtomicUnits'] / Math.pow(10, values['maxMosaicDivisibility'])
+            }`,
+        })}`,
+    params: ['maxMosaicAtomicUnits', 'maxMosaicDivisibility'],
 });
 const localVue = createLocalVue();
 localVue.component('ValidationProvider', ValidationProvider);
@@ -100,6 +110,11 @@ describe('AmountInput', () => {
         expect(falseResult.valid).toBeFalsy();
         const rightResult = await validate('10.123456', rule);
         expect(rightResult.valid).toBeTruthy();
+
+        const falseResultMaxRelativeAmount = await validate('89999999990', rule);
+        expect(falseResultMaxRelativeAmount.valid).toBeFalsy();
+        const rightResultMaxRelativeAmount = await validate('8999999999', rule);
+        expect(rightResultMaxRelativeAmount.valid).toBeTruthy();
     });
     test("divisibility of the mosaic '534CD11F6D984B4B' is 5", async () => {
         wrapper2.setProps({
@@ -111,5 +126,10 @@ describe('AmountInput', () => {
         expect(falseResult.valid).toBeFalsy();
         const rightResult = await validate('10.12345', rule);
         expect(rightResult.valid).toBeTruthy();
+
+        const falseResultMaxRelativeAmount = await validate('899999999900', rule);
+        expect(falseResultMaxRelativeAmount.valid).toBeFalsy();
+        const rightResultMaxRelativeAmount = await validate('89999999990', rule);
+        expect(rightResultMaxRelativeAmount.valid).toBeTruthy();
     });
 });
diff --git a/src/components/MosaicAttachmentInput/MosaicAttachmentInput.vue b/src/components/MosaicAttachmentInput/MosaicAttachmentInput.vue
index bf9741cde..963d40eb5 100644
--- a/src/components/MosaicAttachmentInput/MosaicAttachmentInput.vue
+++ b/src/components/MosaicAttachmentInput/MosaicAttachmentInput.vue
@@ -6,7 +6,13 @@
         <template v-slot:inputs>
             <div class="row-mosaic-attachment-input inputs-container">
                 <MosaicSelector v-model="chosenValue.mosaicHex" :mosaic-hex-ids="mosaicHexIds" @input="onChangeMosaic" />
-                <AmountInput v-model="relativeAmount" :mosaic-hex="chosenValue.mosaicHex" class="ml-2" @input="onChangeAmount" />
+                <AmountInput
+                    v-model="relativeAmount"
+                    :mosaic-hex="chosenValue.mosaicHex"
+                    class="ml-2"
+                    @input="onChangeAmount"
+                    :key="chosenValue.mosaicHex"
+                />
                 <div v-show="isShowDelete" class="delete-mosaic-container">
                     <span class="delete-mosaic-icon" @click="$emit('input-deleted', uid)" />
                 </div>
diff --git a/src/components/TransactionList/TransactionRow/TransactionRowTs.ts b/src/components/TransactionList/TransactionRow/TransactionRowTs.ts
index eab1c9038..5fc2d941e 100644
--- a/src/components/TransactionList/TransactionRow/TransactionRowTs.ts
+++ b/src/components/TransactionList/TransactionRow/TransactionRowTs.ts
@@ -29,6 +29,7 @@ import {
     TransactionType,
     TransferTransaction,
     TransactionStatus,
+    MessageType,
 } from 'symbol-sdk';
 // internal dependencies
 import { Formatters } from '@/core/utils/Formatters';
@@ -378,10 +379,15 @@ export class TransactionRowTs extends Vue {
         if (this.transaction.type === TransactionType.TRANSFER) {
             const transferTransaction = this.transaction as TransferTransaction;
 
-            if (transferTransaction.message.payload.length > 40) {
-                return `${transferTransaction.message.payload.slice(0, 40)}...`;
+            if (transferTransaction.message.type === MessageType.EncryptedMessage) {
+                return `${this.$t('encrypted_message')}`;
+            } else {
+                if (transferTransaction.message.payload.length > 40) {
+                    return `${transferTransaction.message.payload.slice(0, 40)}...`;
+                }
+
+                return transferTransaction.message.payload;
             }
-            return transferTransaction.message.payload;
         }
 
         return '';
diff --git a/src/core/validation/CustomValidationRules.ts b/src/core/validation/CustomValidationRules.ts
index 1346b8493..a63f04474 100644
--- a/src/core/validation/CustomValidationRules.ts
+++ b/src/core/validation/CustomValidationRules.ts
@@ -52,11 +52,21 @@ export class CustomValidationRules {
         });
 
         extend('maxRelativeAmount', {
-            validate: (value, { maxRelativeAmount }: any) => {
+            validate: (value, { maxMosaicAtomicUnits, maxMosaicDivisibility }: any) => {
+                const maxRelativeAmount =
+                    maxMosaicDivisibility === 0 ? maxMosaicAtomicUnits : maxMosaicAtomicUnits / Math.pow(10, maxMosaicDivisibility);
                 return MaxRelativeAmountValidator.validate(value, maxRelativeAmount);
             },
-            message: (_fieldName: string, values: Values) => `${i18n.t('max_amount_error', { ...values })}`,
-            params: ['maxRelativeAmount'],
+            message: (_fieldName: string, values: Values) =>
+                `${i18n.t('max_amount_error', {
+                    ...values,
+                    maxRelativeAmount: `${
+                        values['maxMosaicAtomicUnits'] === 0
+                            ? values['maxMosaicAtomicUnits']
+                            : values['maxMosaicAtomicUnits'] / Math.pow(10, values['maxMosaicDivisibility'])
+                    }`,
+                })}`,
+            params: ['maxMosaicAtomicUnits', 'maxMosaicDivisibility'],
         });
 
         extend('maxMessage', {
diff --git a/src/core/validation/ValidationRuleset.ts b/src/core/validation/ValidationRuleset.ts
index d684a62bf..33c162397 100644
--- a/src/core/validation/ValidationRuleset.ts
+++ b/src/core/validation/ValidationRuleset.ts
@@ -33,9 +33,7 @@ export const createValidationRuleSet = ({
         address: 'required|address|addressNetworkType:currentProfile',
         profilePassword: 'required|profilePassword',
         addressOrAlias: 'required|addressOrAlias|addressOrAliasNetworkType:currentProfile',
-        amount: `positiveDecimal|maxDecimals:${maxMosaicDivisibility}|maxRelativeAmount:${
-            maxMosaicAtomicUnits / Math.pow(10, maxMosaicDivisibility)
-        }`,
+        amount: `positiveDecimal|maxDecimals:${maxMosaicDivisibility}|maxRelativeAmount:${[maxMosaicAtomicUnits, maxMosaicDivisibility]}`,
         confirmPassword: 'required|confirmPassword:@newPassword',
         divisibility: 'required|min_value:0|max_value:6|integer',
         duration: `required|min_value:0|max_value:${maxMosaicDuration}`,
diff --git a/src/core/validation/validators/MaxRelativeAmountValidator.ts b/src/core/validation/validators/MaxRelativeAmountValidator.ts
index 257621102..96b385b1b 100644
--- a/src/core/validation/validators/MaxRelativeAmountValidator.ts
+++ b/src/core/validation/validators/MaxRelativeAmountValidator.ts
@@ -14,6 +14,8 @@
  *
  */
 import { Validator, staticImplements } from './Validator';
+import { appConfig } from '@/config';
+const { DECIMAL_SEPARATOR } = appConfig.constants;
 
 @staticImplements<Validator>()
 export class MaxRelativeAmountValidator {
@@ -24,6 +26,9 @@ export class MaxRelativeAmountValidator {
      * @returns {boolean}
      */
     public static validate(relativeAmount: string, maxRelativeAmount: number): boolean {
-        return Number(relativeAmount) <= maxRelativeAmount;
+        // Check on the locale decimal separator.
+        return DECIMAL_SEPARATOR === ','
+            ? Number(relativeAmount.replace(DECIMAL_SEPARATOR, '.')) <= maxRelativeAmount
+            : Number(relativeAmount) <= maxRelativeAmount;
     }
 }
diff --git a/src/views/forms/FormTransferTransaction/FormTransferTransactionTs.ts b/src/views/forms/FormTransferTransaction/FormTransferTransactionTs.ts
index cb144b1c5..8df325569 100644
--- a/src/views/forms/FormTransferTransaction/FormTransferTransactionTs.ts
+++ b/src/views/forms/FormTransferTransaction/FormTransferTransactionTs.ts
@@ -510,7 +510,7 @@ export class FormTransferTransactionTs extends FormTransactionBase {
                     id: new MosaicId(info.mosaicIdHex), // XXX resolve mosaicId from namespaceId
                     mosaicHex: info.mosaicIdHex, // XXX resolve mosaicId from namespaceId
                     name: info.name,
-                    amount: (mosaic.amount.compact() / Math.pow(10, info.divisibility)).toLocaleString(undefined, {
+                    amount: (Number(mosaic.amount.toString()) / Math.pow(10, info.divisibility)).toLocaleString(undefined, {
                         maximumFractionDigits: info.divisibility,
                     }),
                     uid: Math.floor(Math.random() * 10e6), // used to index dynamic inputs

From b1502f2ddbe9d3f6f40162a4197774a2054f1fd8 Mon Sep 17 00:00:00 2001
From: fboucquez <fboucquez@gmail.com>
Date: Fri, 2 Jul 2021 07:09:45 -0300
Subject: [PATCH 25/30] Docker release image on tag (#1396)

---
 .travis.yml      | 14 +++++++-------
 travis/docker.sh |  7 ++-----
 2 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/.travis.yml b/.travis.yml
index 1b3147b67..14b18a64f 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -33,21 +33,21 @@ jobs:
 
     - stage: alpha
       name: publish alpha docker
-      script: /bin/sh travis/docker.sh
+      script: /bin/sh travis/docker.sh alpha
       if: branch = env(DEV_BRANCH) AND type = push
       os: linux
 
+    - stage: release
+      name: publish release docker
+      script: /bin/sh travis/docker.sh release
+      if: tag IS present
+      os: linux
+
     - script: npm run release:all
       name: build desktop artifacts
       if: branch = env(DEV_BRANCH) AND type = push
       os: linux
 
-    - stage: release
-      name: release docker
-      script: /bin/sh travis/docker.sh
-      if: branch = env(RELEASE_BRANCH) AND type = api AND commit_message = env(RELEASE_MESSAGE)
-      os: linux
-
     - name: release desktop artifacts, tag and update version
       script: /bin/sh travis/release.sh
       if: branch = env(RELEASE_BRANCH) AND type = api AND commit_message = env(RELEASE_MESSAGE)
diff --git a/travis/docker.sh b/travis/docker.sh
index af9ff52fb..7cead96b1 100644
--- a/travis/docker.sh
+++ b/travis/docker.sh
@@ -27,10 +27,8 @@ CURRENT_VERSION=$(npm run version --silent)
 echo "Creating image ${DOCKER_IMAGE_NAME}:${CURRENT_VERSION}"
 docker build -t "${DOCKER_IMAGE_NAME}:${CURRENT_VERSION}" .
 
-if [ "$TRAVIS_BRANCH" = "$DEV_BRANCH" ]
+if [ "$1" = "alpha" ]
 then
-    echo "Building for ${DEV_BRANCH} branch..."
-
     TIMESTAMP="$(date +%Y%m%d%H%M)"
     echo "Docker tagging alpha version"
     docker tag "${DOCKER_IMAGE_NAME}:${CURRENT_VERSION}" "${DOCKER_IMAGE_NAME}:${CURRENT_VERSION}-alpha"
@@ -41,9 +39,8 @@ then
     docker push "${DOCKER_IMAGE_NAME}:${CURRENT_VERSION}-alpha-${TIMESTAMP}"
 fi
 
-if [ "$TRAVIS_BRANCH" = "$RELEASE_BRANCH" ]
+if [ "$1" = "release" ]
 then
-    echo "Building for ${RELEASE_BRANCH} branch..."
     echo "Docker tagging release version"
     docker tag "${DOCKER_IMAGE_NAME}:${CURRENT_VERSION}" "${DOCKER_IMAGE_NAME}:release"
 

From 352a78f0411328dab036dd0a063ee8bb0a113d2d Mon Sep 17 00:00:00 2001
From: fboucquez <fboucquez@gmail.com>
Date: Fri, 2 Jul 2021 08:39:55 -0300
Subject: [PATCH 26/30] Added proper stages to travis

---
 .travis.yml | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/.travis.yml b/.travis.yml
index 14b18a64f..f83bfea60 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -37,18 +37,20 @@ jobs:
       if: branch = env(DEV_BRANCH) AND type = push
       os: linux
 
+    - stage: alpha
+      script: npm run release:all
+      name: build desktop artifacts
+      if: branch = env(DEV_BRANCH) AND type = push
+      os: linux
+
     - stage: release
       name: publish release docker
       script: /bin/sh travis/docker.sh release
       if: tag IS present
       os: linux
 
-    - script: npm run release:all
-      name: build desktop artifacts
-      if: branch = env(DEV_BRANCH) AND type = push
-      os: linux
-
-    - name: release desktop artifacts, tag and update version
+    - stage: release
+      name: release desktop artifacts, tag and update version
       script: /bin/sh travis/release.sh
       if: branch = env(RELEASE_BRANCH) AND type = api AND commit_message = env(RELEASE_MESSAGE)
       os: linux

From 00288bb3b6875974b5dff2c721f1318bf5fc1a5b Mon Sep 17 00:00:00 2001
From: Anthony Law <yc-law1015@hotmail.com>
Date: Fri, 2 Jul 2021 23:34:34 +0800
Subject: [PATCH 27/30] fix: input focus console error (#1574)

---
 src/views/forms/FormProfileUnlock/FormProfileUnlockTs.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/forms/FormProfileUnlock/FormProfileUnlockTs.ts b/src/views/forms/FormProfileUnlock/FormProfileUnlockTs.ts
index 8f87d8480..03b24a635 100644
--- a/src/views/forms/FormProfileUnlock/FormProfileUnlockTs.ts
+++ b/src/views/forms/FormProfileUnlock/FormProfileUnlockTs.ts
@@ -97,7 +97,7 @@ export class FormProfileUnlockTs extends Vue {
 
     public mounted(): void {
         if (this.focus) {
-            this.$nextTick().then(() => (this.$refs['passwordInput'] as any).$el.focus());
+            this.$nextTick().then(() => (this.$refs['passwordInput'] as any).focus());
         }
     }
 

From b15d0142ac0ba13620147c64990b8a47edfef1bc Mon Sep 17 00:00:00 2001
From: fboucquez <fboucquez@gmail.com>
Date: Sun, 4 Jul 2021 11:15:08 -0300
Subject: [PATCH 28/30] Update .travis.yml (#1573)

---
 .travis.yml | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/.travis.yml b/.travis.yml
index f83bfea60..9242a2b17 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -27,7 +27,8 @@ jobs:
       script: npm run lint
       os: linux
 
-    - name: unit tests
+    - stage: test
+      name: unit tests
       script: npm run test
       os: linux
 
@@ -37,11 +38,11 @@ jobs:
       if: branch = env(DEV_BRANCH) AND type = push
       os: linux
 
-    - stage: alpha
-      script: npm run release:all
-      name: build desktop artifacts
-      if: branch = env(DEV_BRANCH) AND type = push
-      os: linux
+#     - stage: alpha
+#       script: npm run release:all
+#       name: build desktop artifacts
+#       if: branch = env(DEV_BRANCH) AND type = push
+#       os: linux
 
     - stage: release
       name: publish release docker

From 7f5e011ad180bcf3d0ffcdf3bb255bbdf2c89131 Mon Sep 17 00:00:00 2001
From: Bassem <bassem.magdyy94@gmail.com>
Date: Tue, 6 Jul 2021 10:43:40 +0200
Subject: [PATCH 29/30] aligning commits with main branch (#1579)

* Improve transaction previews (#1505)

* improve transactiondashboard preview #1190

* Update src/language/en-US.json

Co-authored-by: Xavi Artigas <xavierartigas@yahoo.es>

* update mosaic list tooltip

Co-authored-by: Steven Liu <xian.f.liu@gmail.com>
Co-authored-by: Xavi Artigas <xavierartigas@yahoo.es>

* Revert "Improve transaction previews (#1505)" (#1539)

This reverts commit 670fcada90ad27b6cefaeb5775d4db1f7a5e0ac4.

Co-authored-by: Steven Liu <xian.f.liu@gmail.com>
Co-authored-by: Xavi Artigas <xavierartigas@yahoo.es>

From 2b1dd2071b195a08e01bd651e039bb1e03e477aa Mon Sep 17 00:00:00 2001
From: Bassem <bassem.magdyy94@gmail.com>
Date: Wed, 7 Jul 2021 13:06:44 +0200
Subject: [PATCH 30/30] update change log for v1.0.4 (#1580)

* update changelog for release

* Update CHANGELOG.md
---
 CHANGELOG.md                                  | 52 +++++++++++++++++++
 package-lock.json                             |  2 +-
 package.json                                  |  2 +-
 .../MosaicAttachmentInput.vue                 |  2 +-
 4 files changed, 55 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fbf652c33..dd15c0cbe 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,58 @@ All notable changes to this project will be documented in this file.
 
 The changelog format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
+## [1.0.4][v1.0.4] - 7-Jul-2021
+
+### Milestone: Stabilize and bug fix
+
+#### Added
+
+- Added mosaic envelop icon and tooltips for transaction list
+- Added the possibility to check if aggregate transaction has to be signed without opening details
+- Added skip button for mnemonic confirmation on Testnet
+- Added minRemoval and minApproval values on the multisig tree
+
+#### Changed
+
+- Copy paste password on profile creation now is not accepted
+- Custom nodes now are assigned to a profile and not removed when switching between networks
+- Changed icon size and positions to make them more consistent
+- Changed QR code image for failure when transactions are too big
+
+#### Fixed
+
+- Fix input focus error on FormProfileUnlock
+- Fixed amount validation when sending big quantities
+- Fix encrypted message console error
+- Fixed fee multiplier for offline transaction mode
+- Fix transaction signing icon doesn't show up immediately after signing
+- Fixed ledger translation
+- Fixed account restrictions modal UI
+- Fix harvesting not showing 25% of the beneficiary 
+- Fix decimal separator causing problems between locales
+- Fixed copy paste password input
+- Fix harvesting node not showing while activated on different devices
+- Fixed Scanning a QR Code for a Transfer Transaction without Mosaics breaks the Wallet
+- Fix harvesting node not visible if connected to it
+- Removed redundant space in mosaics amount when imported from QR code with the prepared invoice
+- Fixed profile creation in Ledger caused some crashes
+- Fixed error covering import QR code button in offline mode
+- Fixed harvesting screen tabs not aligned and scrollable
+- Ordered fee selection option
+- Removed fee selector redundant caption for min fee multipliers
+- Fixed partial aggregate transactions disappearing when signing
+- Fixed unable to add new node when all nodes are offline
+- Fixed users could try changing symbol.xym properties
+- Fixed harvesting screen not showing correct status for node operators
+- Fixed when importing QR code for a transaction slow fee changed to slowest
+- Fixed the balance was sometimes not shown on wallet selection page
+- Fixed some form items were not aligned
+- Fixed duration of Namespace rental adds 1 day.
+- Fixed bug when entering amounts in offline mode.
+- Fixed when put max value transaction details are not presented
+- Other UI fixes
+- Other translations and wording fixes
+
 ## [1.0.3][v1.0.3] - 10-May-2021
 
 ### Milestone: Post-launch Opt-in
diff --git a/package-lock.json b/package-lock.json
index 20c7f91f9..b9ff681ab 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
     "name": "symbol-desktop-wallet",
-    "version": "1.0.3",
+    "version": "1.0.4",
     "lockfileVersion": 1,
     "requires": true,
     "dependencies": {
diff --git a/package.json b/package.json
index d5587302d..404836fb8 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
     "name": "symbol-desktop-wallet",
     "description": "Symbol Wallet",
     "homepage": "https://github.com/nemgrouplimited/symbol-desktop-wallet",
-    "version": "1.0.3",
+    "version": "1.0.4",
     "repository": {
         "type": "git",
         "url": "https://github.com/nemgrouplimited/symbol-desktop-wallet.git"
diff --git a/src/components/MosaicAttachmentInput/MosaicAttachmentInput.vue b/src/components/MosaicAttachmentInput/MosaicAttachmentInput.vue
index 963d40eb5..a9b49af95 100644
--- a/src/components/MosaicAttachmentInput/MosaicAttachmentInput.vue
+++ b/src/components/MosaicAttachmentInput/MosaicAttachmentInput.vue
@@ -7,11 +7,11 @@
             <div class="row-mosaic-attachment-input inputs-container">
                 <MosaicSelector v-model="chosenValue.mosaicHex" :mosaic-hex-ids="mosaicHexIds" @input="onChangeMosaic" />
                 <AmountInput
+                    :key="chosenValue.mosaicHex"
                     v-model="relativeAmount"
                     :mosaic-hex="chosenValue.mosaicHex"
                     class="ml-2"
                     @input="onChangeAmount"
-                    :key="chosenValue.mosaicHex"
                 />
                 <div v-show="isShowDelete" class="delete-mosaic-container">
                     <span class="delete-mosaic-icon" @click="$emit('input-deleted', uid)" />