Message component

src/components/extend-graphic-value/ExtendTransferValue.vue

@@ -81,7 +81,7 @@ export default {
 		hasMessage() {
 			for (const item of this.value) {
 				if (Object.keys(item).includes('message'))
-					return typeof item.message === 'string' && item.message.length > 0;
+					return typeof item.message.payload === 'string' && item.message.payload.length > 0;
 			}
 			return false;
 		},

src/components/fields/MessageField.vue

@@ -0,0 +1,93 @@
+/*
+ *
+ * Copyright (c) 2019-present for NEM
+ *
+ * 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.
+ *
+ */
+
+<template>
+	<div>
+		<div v-if="isPlainMessage">
+			{{ message }}
+		</div>
+
+		<div v-else @click="clickToView">
+			<div class="overlay" :class="{'hideContent': !isClick}" >
+				{{ title }}
+			</div>
+
+			<div :class="{'hideContent': isClick}">
+				{{ message }}
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import TableView from '@/components/tables/TableView.vue';
+import { MessageType } from 'symbol-sdk';
+
+export default {
+	name: 'MessageField',
+	extends: TableView,
+	props: {
+		value: {
+			type: Object,
+			default: () => {}
+		}
+	},
+	data() {
+		return {
+			isClick: true
+		};
+	},
+	computed: {
+		message() {
+			return this.value.payload;
+		},
+		messageType() {
+			return this.value.type;
+		},
+		isPlainMessage() {
+			return this.value.type === MessageType.PlainMessage;
+		},
+		title() {
+			return `Click to view ${this.getKeyName(`messageTypeDescriptor_${this.messageType}`)}`;
+		}
+	},
+	methods: {
+		clickToView() {
+			this.isClick = !this.isClick;
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.hideContent {
+    display: none;
+}
+
+.overlay {
+    text-align: center;
+    position: absolute;
+    color: var(--primary);
+    z-index: 999;
+
+    :hover > & {
+        cursor: pointer;
+        text-decoration: underline;
+    }
+}
+</style>

src/components/graphics/MessageCircle.vue

@@ -20,7 +20,8 @@
 		<foreignObject x="446" y="318" width="100" height="100">
 			<MessagePopover
 				:target="this.id"
-				:message="message"
+				:message="payload"
+				:title="messageType"
 			/>
 		</foreignObject>
 		<circle
@@ -97,8 +98,17 @@ export default {
 
 	props: {
 		message: {
-			type: String,
-			default: ''
+			type: Object,
+			default: () => {}
+		}
+	},
+
+	computed: {
+		payload() {
+			return this.message.payload;
+		},
+		messageType() {
+			return this.getTranslation(`messageTypeDescriptor_${this.message.type}`);
 		}
 	},
 

src/components/tables/TableInfoView.vue

@@ -18,6 +18,7 @@
 						<BlockHeightWithFinalizedStatusField v-else-if="isBlockHeightWithFinalizedStatus(itemKey)" :value="item" />
 						<Boolean v-else-if="isBoolean(itemKey)" :value="item" />
 						<Age v-else-if="isAge(itemKey)" :date="item" />
+						<MessageField v-else-if="itemKey === 'message'" :value="item" />
 
 						<router-link
 							v-else-if="isKeyClickable(itemKey) && getItemHref(itemKey, item)"
@@ -39,6 +40,7 @@ import MosaicsField from '@/components/fields/MosaicsField.vue';
 import ArrayField from '@/components/fields/ArrayField.vue';
 import TransactionType from '@/components/fields/TransactionType.vue';
 import BlockHeightWithFinalizedStatusField from '@/components/fields/BlockHeightWithFinalizedStatusField.vue';
+import MessageField from '@/components/fields/MessageField.vue';
 
 export default {
 	extends: TableView,
@@ -47,7 +49,8 @@ export default {
 		MosaicsField,
 		ArrayField,
 		TransactionType,
-		BlockHeightWithFinalizedStatusField
+		BlockHeightWithFinalizedStatusField,
+		MessageField
 	},
 
 	props: {

src/components/transaction-graphic/TransferGraphic.vue

@@ -75,8 +75,8 @@ export default {
 
 	props: {
 		message: {
-			type: String,
-			default: ''
+			type: Object,
+			default: () => {}
 		},
 		signer: {
 			type: String,
@@ -104,7 +104,7 @@ export default {
 		},
 
 		hasMessage() {
-			return typeof this.message === 'string' && this.message.length > 0;
+			return typeof this.message.payload === 'string' && this.message.payload.length > 0;
 		},
 
 		hasNativeMosaic() {

src/config/i18n/en-us.json

@@ -360,6 +360,9 @@
     "receiptTitle": "Receipt",
     "created": "Created",
     "ago": "ago",
+    "messageTypeDescriptor_0": "Plain message",
+    "messageTypeDescriptor_1": "Encrypted message",
+    "messageTypeDescriptor_254": "Delegated Harvesting Persistent message",
     "votingNode": "Voting Node",
     "nonVotingNode": "Non Voting Node",
     "votingNodeTooltips": "Sync ahead of common node.",

src/config/i18n/es.json

@@ -356,6 +356,9 @@
     "receiptTitle": "Receipt",
     "created": "Created",
     "ago": "ago",
+    "messageTypeDescriptor_0": "Plain message",
+    "messageTypeDescriptor_1": "Encrypted message",
+    "messageTypeDescriptor_254": "Delegated Harvesting Persistent message",
     "votingNode": "Voting Node",
     "nonVotingNode": "Non Voting Node",
     "votingNodeTooltips": "Sync ahead of common node.",

src/config/i18n/pt.json

@@ -356,6 +356,9 @@
     "receiptTitle": "Receipt",
     "created": "Created",
     "ago": "ago",
+    "messageTypeDescriptor_0": "Plain message",
+    "messageTypeDescriptor_1": "Encrypted message",
+    "messageTypeDescriptor_254": "Delegated Harvesting Persistent message",
     "votingNode": "Voting Node",
     "nonVotingNode": "Non Voting Node",
     "votingNodeTooltips": "Sync ahead of common node.",

src/config/i18n/ru.json

@@ -356,6 +356,9 @@
     "receiptTitle": "Receipt",
     "created": "Created",
     "ago": "ago",
+    "messageTypeDescriptor_0": "Plain message",
+    "messageTypeDescriptor_1": "Encrypted message",
+    "messageTypeDescriptor_254": "Delegated Harvesting Persistent message",
     "votingNode": "Voting Node",
     "nonVotingNode": "Non Voting Node",
     "votingNodeTooltips": "Sync ahead of common node.",

src/config/i18n/ua.json

@@ -356,6 +356,9 @@
     "receiptTitle": "Receipt",
     "created": "Created",
     "ago": "ago",
+    "messageTypeDescriptor_0": "Plain message",
+    "messageTypeDescriptor_1": "Encrypted message",
+    "messageTypeDescriptor_254": "Delegated Harvesting Persistent message",
     "votingNode": "Voting Node",
     "nonVotingNode": "Non Voting Node",
     "votingNodeTooltips": "Sync ahead of common node.",

src/config/i18n/zh.json

@@ -356,6 +356,9 @@
     "receiptTitle": "Receipt",
     "created": "Created",
     "ago": "ago",
+    "messageTypeDescriptor_0": "Plain message",
+    "messageTypeDescriptor_1": "Encrypted message",
+    "messageTypeDescriptor_254": "Delegated Harvesting Persistent message",
     "votingNode": "Voting Node",
     "nonVotingNode": "Non Voting Node",
     "votingNodeTooltips": "Sync ahead of common node.",

src/infrastructure/CreateTransaction.js

@@ -33,7 +33,7 @@ class CreateTransaction {
     		...transactionObj,
     		transactionBody: {
     			transactionType: transactionObj.type,
-    			message: transactionObj.message.payload,
+    			message: transactionObj.message,
     			recipient: resolvedAddress,
     			mosaics: mosaicsFieldObject
     		}

src/infrastructure/TransactionService.js

@@ -256,7 +256,7 @@ class TransactionService {
   				id: mosaic.id.toHex(),
   				amount: mosaic.amount.compact().toString()
   			})),
-  			message: transactionBody.message.payload
+  			message: transactionBody.message
   		};
 
   	case TransactionType.NAMESPACE_REGISTRATION: