From 7f1954066c0afeccbcb4d0cb374ec4d1541838ea Mon Sep 17 00:00:00 2001
From: GussevPM <GussevPM@GMail.Com>
Date: Tue, 30 Jan 2024 21:56:03 +0100
Subject: [PATCH 1/3] Fix button padding when result is empty

---
 components/modules/address/AddressOverview.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/modules/address/AddressOverview.vue b/components/modules/address/AddressOverview.vue
index 766860f1..c283bd01 100644
--- a/components/modules/address/AddressOverview.vue
+++ b/components/modules/address/AddressOverview.vue
@@ -763,6 +763,7 @@ const handleOpenQRModal = () => {
 	flex: 1;
 
 	padding-top: 16px;
+	padding-bottom: 16px;
 }
 
 .pagination {

From c0283485000fe54b64c194423a48aaabe3a1f8a7 Mon Sep 17 00:00:00 2001
From: GussevPM <GussevPM@GMail.Com>
Date: Tue, 30 Jan 2024 22:20:47 +0100
Subject: [PATCH 2/3] Add messages tab on account page

---
 .../modules/address/AddressOverview.vue       | 58 +++++++++++++++++--
 services/api/address.js                       | 16 +++++
 2 files changed, 70 insertions(+), 4 deletions(-)

diff --git a/components/modules/address/AddressOverview.vue b/components/modules/address/AddressOverview.vue
index c283bd01..df14cddf 100644
--- a/components/modules/address/AddressOverview.vue
+++ b/components/modules/address/AddressOverview.vue
@@ -8,6 +8,7 @@ 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 */
@@ -15,7 +16,7 @@ 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>
diff --git a/services/api/address.js b/services/api/address.js
index cab1cb2e..92de656f 100644
--- a/services/api/address.js
+++ b/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`)

From 2d23294f522fc15dcc84b5f47e23a34150536951 Mon Sep 17 00:00:00 2001
From: GussevPM <GussevPM@GMail.Com>
Date: Fri, 16 Feb 2024 00:00:28 +0100
Subject: [PATCH 3/3] Feractoring addresses table

---
 .../modules/address/AddressOverview.vue       |  4 +-
 pages/addresses.vue                           | 44 ++++++++++++-------
 2 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/components/modules/address/AddressOverview.vue b/components/modules/address/AddressOverview.vue
index df14cddf..c9c3d98c 100644
--- a/components/modules/address/AddressOverview.vue
+++ b/components/modules/address/AddressOverview.vue
@@ -513,7 +513,7 @@ const handleOpenQRModal = () => {
 				<Flex direction="column" justify="center" :class="[$style.tables, isRefetching && $style.disabled]">
 					<Flex v-if="activeTab === 'transactions'" wrap="wrap" align="center" gap="8" :class="$style.filters">
 						<Popover :open="isStatusPopoverOpen" @on-close="onStatusPopoverClose" width="200">
-							<Button @click="handleOpenStatusPopover" type="secondary" size="mini">
+							<Button @click="handleOpenStatusPopover" type="secondary" size="mini" :disabled="!transactions.length">
 								<Icon name="plus-circle" size="12" color="tertiary" />
 								<Text color="secondary">Status</Text>
 
@@ -551,7 +551,7 @@ const handleOpenQRModal = () => {
 						</Popover>
 
 						<Popover :open="isMessageTypePopoverOpen" @on-close="onMessageTypePopoverClose" width="250">
-							<Button @click="handleOpenMessageTypePopover" type="secondary" size="mini">
+							<Button @click="handleOpenMessageTypePopover" type="secondary" size="mini" :disabled="!transactions.length">
 								<Icon name="plus-circle" size="12" color="tertiary" />
 								<Text color="secondary">Message Type</Text>
 
diff --git a/pages/addresses.vue b/pages/addresses.vue
index d0187308..6ff431b2 100644
--- a/pages/addresses.vue
+++ b/pages/addresses.vue
@@ -169,28 +169,42 @@ const handleLast = async () => {
 						</thead>
 
 						<tbody>
-							<tr v-for="address in addresses" @click="router.push(`/address/${address.hash}`)">
+							<tr v-for="address in addresses">
 								<td style="width: 1px">
-									<Tooltip position="start" delay="500">
-										<Flex align="center" gap="8">
-											<AddressBadge :hash="address.hash" />
-
-											<CopyButton :text="address.hash" />
-										</Flex>
-
-										<template #content>
-											{{ address.hash }}
-										</template>
-									</Tooltip>
+									<NuxtLink :to="`/address/${address.hash}`">
+										<Tooltip position="start" delay="500">
+											<Flex align="center" gap="8">
+												<AddressBadge :hash="address.hash" />
+
+												<CopyButton :text="address.hash" />
+											</Flex>
+
+											<template #content>
+												{{ address.hash }}
+											</template>
+										</Tooltip>
+									</NuxtLink>
 								</td>
 								<td>
-									<Text size="13" weight="600" color="primary"> {{ comma(tia(address.balance.value)) }} TIA </Text>
+									<NuxtLink :to="`/address/${address.hash}`">
+										<Text size="13" weight="600" color="primary">
+											{{ comma(tia(address.balance.value)) }} TIA
+										</Text>
+									</NuxtLink>
 								</td>
 								<td>
-									<Text size="13" weight="600" color="primary"> {{ comma(address.first_height) }} </Text>
+									<NuxtLink :to="`/address/${address.hash}`">
+										<Text size="13" weight="600" color="primary">
+											{{ comma(address.first_height) }}
+										</Text>
+									</NuxtLink>
 								</td>
 								<td>
-									<Text size="13" weight="600" color="primary"> {{ comma(address.last_height) }} </Text>
+									<NuxtLink :to="`/address/${address.hash}`">
+										<Text size="13" weight="600" color="primary">
+											{{ comma(address.last_height) }}
+										</Text>
+									</NuxtLink>
 								</td>
 							</tr>
 						</tbody>