Add messages tab on account page

Author: GusevPM

components/modules/address/AddressOverview.vue

@@ -8,14 +8,15 @@ import Input from "@/components/ui/Input.vue"
 
 /** Components */
 import TransactionsTable from "./TransactionsTable.vue"
+import MessagesTable from "@/components/modules/namespace/tables/MessagesTable.vue"
 import BlobsTable from "@/components/modules/namespace/tables/BlobsTable.vue"
 
 /** Services */
 import { comma } from "@/services/utils"
 import { MsgTypes } from "@/services/constants/messages"
 
 /** API */
-import { fetchTxsByAddressHash, fetchBlobsByAddressHash } from "@/services/api/address"
+import { fetchTxsByAddressHash, fetchMessagesByAddressHash, fetchBlobsByAddressHash } from "@/services/api/address"
 
 /** Store */
 import { useModalsStore } from "@/store/modals"
@@ -48,6 +49,7 @@ const activeTab = ref("transactions")
 
 const isRefetching = ref(false)
 const transactions = ref([])
+const messages = ref([])
 const blobs = ref([])
 
 const page = ref(1)
@@ -247,6 +249,22 @@ const getTransactions = async () => {
 	isRefetching.value = false
 }
 
+const getMessages = async () => {
+	isRefetching.value = true
+
+	const { data } = await fetchMessagesByAddressHash({
+		hash: props.address.hash,
+		limit: 10,
+		offset: (page.value - 1) * 10,
+		sort: "desc",
+	})
+
+	messages.value = data.value
+	cacheStore.current.messages = messages.value
+
+	isRefetching.value = false
+}
+
 const getBlobs = async () => {
 	isRefetching.value = true
 
@@ -280,6 +298,10 @@ watch(
 			case "blobs":
 				getBlobs()
 				break
+
+			case "messages":
+				getMessages()
+				break
 		}
 	},
 )
@@ -295,6 +317,10 @@ watch(
 			case "blobs":
 				getBlobs()
 				break
+
+			case "messages":
+				getMessages()
+				break
 		}
 	},
 )
@@ -457,7 +483,18 @@ const handleOpenQRModal = () => {
 						>
 							<Icon name="tx" size="12" color="secondary" />
 
-							<Text size="13" weight="600">Transactions</Text>
+							<Text size="13" weight="600">Signed Transactions</Text>
+						</Flex>
+
+						<Flex
+							@click="activeTab = 'messages'"
+							align="center"
+							gap="6"
+							:class="[$style.tab, activeTab === 'messages' && $style.active]"
+						>
+							<Icon name="message" size="12" color="secondary" />
+
+							<Text size="13" weight="600">Messages</Text>
 						</Flex>
 
 						<Flex
@@ -608,16 +645,29 @@ const handleOpenQRModal = () => {
 							<Flex v-else direction="column" align="center" justify="center" gap="8" :class="$style.empty">
 								<Text size="13" weight="600" color="secondary" align="center"> No transactions </Text>
 								<Text size="12" weight="500" height="160" color="tertiary" align="center" style="max-width: 220px">
-									This address does not contain transactions of the selected type
+									This address did not signed any transactions
 								</Text>
 							</Flex>
 						</template>
+
+						<!-- Messages Table -->
+						<template v-if="activeTab === 'messages'">
+							<MessagesTable v-if="messages.length" :messages="messages" />
+
+							<Flex v-else align="center" justify="center" direction="column" gap="8" wide :class="$style.empty">
+								<Text size="13" weight="600" color="secondary" align="center"> No Messages </Text>
+								<Text size="12" weight="500" height="160" color="tertiary" align="center" style="max-width: 220px">
+									No activity with this address
+								</Text>
+							</Flex>
+						</template>
+
 						<!-- Blobs Table -->
 						<template v-if="activeTab === 'blobs'">
 							<BlobsTable v-if="blobs.length" :blobs="blobs" />
 
 							<Flex v-else align="center" justify="center" direction="column" gap="8" wide :class="$style.empty">
-								<Text size="13" weight="600" color="secondary" align="center"> No Blobs</Text>
+								<Text size="13" weight="600" color="secondary" align="center"> No Blobs </Text>
 								<Text size="12" weight="500" height="160" color="tertiary" align="center" style="max-width: 220px">
 									This address did not push any blobs
 								</Text>

services/api/address.js

@@ -55,6 +55,22 @@ export const fetchTxsByAddressHash = async ({ limit, offset, sort, hash, status,
 	}
 }
 
+export const fetchMessagesByAddressHash = async ({ limit, offset, sort, hash, msg_type }) => {
+	try {
+		const url = new URL(`${useServerURL()}/address/${hash}/messages`)
+
+		if (limit) url.searchParams.append("limit", limit)
+		if (offset) url.searchParams.append("offset", offset)
+		if (sort) url.searchParams.append("sort", sort)
+		if (msg_type) url.searchParams.append("msg_type", msg_type)
+
+		const data = await useFetch(url.href)
+		return data
+	} catch (error) {
+		console.error(error)
+	}
+}
+
 export const fetchBlobsByAddressHash = async ({ limit, offset, sort, hash }) => {
 	try {
 		const url = new URL(`${useServerURL()}/address/${hash}/blobs`)