Skip to content

Commit c9d5d80

Browse files
xdeqxdeq
authored
Merge pull request #30 from celenium-io/CLS-202-enhanced-account-page
CLS 202 Enhanced account page
2 parents 95e40bb + 2d23294 commit c9d5d80

File tree

3 files changed

+102
-21
lines changed

3 files changed

+102
-21
lines changed

‎components/modules/address/AddressOverview.vue‎

Lines changed: 57 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,15 @@ import Input from "@/components/ui/Input.vue"
88
99
/** Components */
1010
import TransactionsTable from "./TransactionsTable.vue"
11+
import MessagesTable from "@/components/modules/namespace/tables/MessagesTable.vue"
1112
import BlobsTable from "@/components/modules/namespace/tables/BlobsTable.vue"
1213
1314
/** Services */
1415
import { comma } from "@/services/utils"
1516
import { MsgTypes } from "@/services/constants/messages"
1617
1718
/** API */
18-
import { fetchTxsByAddressHash, fetchBlobsByAddressHash } from "@/services/api/address"
19+
import { fetchTxsByAddressHash, fetchMessagesByAddressHash, fetchBlobsByAddressHash } from "@/services/api/address"
1920
2021
/** Store */
2122
import { useModalsStore } from "@/store/modals"
@@ -48,6 +49,7 @@ const activeTab = ref("transactions")
4849
4950
const isRefetching = ref(false)
5051
const transactions = ref([])
52+
const messages = ref([])
5153
const blobs = ref([])
5254
5355
const page = ref(1)
@@ -247,6 +249,22 @@ const getTransactions = async () => {
247249
isRefetching.value = false
248250
}
249251
252+
const getMessages = async () => {
253+
isRefetching.value = true
254+
255+
const { data } = await fetchMessagesByAddressHash({
256+
hash: props.address.hash,
257+
limit: 10,
258+
offset: (page.value - 1) * 10,
259+
sort: "desc",
260+
})
261+
262+
messages.value = data.value
263+
cacheStore.current.messages = messages.value
264+
265+
isRefetching.value = false
266+
}
267+
250268
const getBlobs = async () => {
251269
isRefetching.value = true
252270
@@ -280,6 +298,10 @@ watch(
280298
case "blobs":
281299
getBlobs()
282300
break
301+
302+
case "messages":
303+
getMessages()
304+
break
283305
}
284306
},
285307
)
@@ -295,6 +317,10 @@ watch(
295317
case "blobs":
296318
getBlobs()
297319
break
320+
321+
case "messages":
322+
getMessages()
323+
break
298324
}
299325
},
300326
)
@@ -457,7 +483,18 @@ const handleOpenQRModal = () => {
457483
>
458484
<Icon name="tx" size="12" color="secondary" />
459485
460-
<Text size="13" weight="600">Transactions</Text>
486+
<Text size="13" weight="600">Signed Transactions</Text>
487+
</Flex>
488+
489+
<Flex
490+
@click="activeTab = 'messages'"
491+
align="center"
492+
gap="6"
493+
:class="[$style.tab, activeTab === 'messages' && $style.active]"
494+
>
495+
<Icon name="message" size="12" color="secondary" />
496+
497+
<Text size="13" weight="600">Messages</Text>
461498
</Flex>
462499
463500
<Flex
@@ -476,7 +513,7 @@ const handleOpenQRModal = () => {
476513
<Flex direction="column" justify="center" :class="[$style.tables, isRefetching && $style.disabled]">
477514
<Flex v-if="activeTab === 'transactions'" wrap="wrap" align="center" gap="8" :class="$style.filters">
478515
<Popover :open="isStatusPopoverOpen" @on-close="onStatusPopoverClose" width="200">
479-
<Button @click="handleOpenStatusPopover" type="secondary" size="mini">
516+
<Button @click="handleOpenStatusPopover" type="secondary" size="mini" :disabled="!transactions.length">
480517
<Icon name="plus-circle" size="12" color="tertiary" />
481518
<Text color="secondary">Status</Text>
482519
@@ -514,7 +551,7 @@ const handleOpenQRModal = () => {
514551
</Popover>
515552
516553
<Popover :open="isMessageTypePopoverOpen" @on-close="onMessageTypePopoverClose" width="250">
517-
<Button @click="handleOpenMessageTypePopover" type="secondary" size="mini">
554+
<Button @click="handleOpenMessageTypePopover" type="secondary" size="mini" :disabled="!transactions.length">
518555
<Icon name="plus-circle" size="12" color="tertiary" />
519556
<Text color="secondary">Message Type</Text>
520557
@@ -608,16 +645,29 @@ const handleOpenQRModal = () => {
608645
<Flex v-else direction="column" align="center" justify="center" gap="8" :class="$style.empty">
609646
<Text size="13" weight="600" color="secondary" align="center"> No transactions </Text>
610647
<Text size="12" weight="500" height="160" color="tertiary" align="center" style="max-width: 220px">
611-
This address does not contain transactions of the selected type
648+
This address did not signed any transactions
612649
</Text>
613650
</Flex>
614651
</template>
652+
653+
<!-- Messages Table -->
654+
<template v-if="activeTab === 'messages'">
655+
<MessagesTable v-if="messages.length" :messages="messages" />
656+
657+
<Flex v-else align="center" justify="center" direction="column" gap="8" wide :class="$style.empty">
658+
<Text size="13" weight="600" color="secondary" align="center"> No Messages </Text>
659+
<Text size="12" weight="500" height="160" color="tertiary" align="center" style="max-width: 220px">
660+
No activity with this address
661+
</Text>
662+
</Flex>
663+
</template>
664+
615665
<!-- Blobs Table -->
616666
<template v-if="activeTab === 'blobs'">
617667
<BlobsTable v-if="blobs.length" :blobs="blobs" />
618668
619669
<Flex v-else align="center" justify="center" direction="column" gap="8" wide :class="$style.empty">
620-
<Text size="13" weight="600" color="secondary" align="center"> No Blobs</Text>
670+
<Text size="13" weight="600" color="secondary" align="center"> No Blobs </Text>
621671
<Text size="12" weight="500" height="160" color="tertiary" align="center" style="max-width: 220px">
622672
This address did not push any blobs
623673
</Text>
@@ -763,6 +813,7 @@ const handleOpenQRModal = () => {
763813
flex: 1;
764814
765815
padding-top: 16px;
816+
padding-bottom: 16px;
766817
}
767818
768819
.pagination {

‎pages/addresses.vue‎

Lines changed: 29 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -169,28 +169,42 @@ const handleLast = async () => {
169169
</thead>
170170

171171
<tbody>
172-
<tr v-for="address in addresses" @click="router.push(`/address/${address.hash}`)">
172+
<tr v-for="address in addresses">
173173
<td style="width: 1px">
174-
<Tooltip position="start" delay="500">
175-
<Flex align="center" gap="8">
176-
<AddressBadge :hash="address.hash" />
177-
178-
<CopyButton :text="address.hash" />
179-
</Flex>
180-
181-
<template #content>
182-
{{ address.hash }}
183-
</template>
184-
</Tooltip>
174+
<NuxtLink :to="`/address/${address.hash}`">
175+
<Tooltip position="start" delay="500">
176+
<Flex align="center" gap="8">
177+
<AddressBadge :hash="address.hash" />
178+
179+
<CopyButton :text="address.hash" />
180+
</Flex>
181+
182+
<template #content>
183+
{{ address.hash }}
184+
</template>
185+
</Tooltip>
186+
</NuxtLink>
185187
</td>
186188
<td>
187-
<Text size="13" weight="600" color="primary"> {{ comma(tia(address.balance.value)) }} TIA </Text>
189+
<NuxtLink :to="`/address/${address.hash}`">
190+
<Text size="13" weight="600" color="primary">
191+
{{ comma(tia(address.balance.value)) }} TIA
192+
</Text>
193+
</NuxtLink>
188194
</td>
189195
<td>
190-
<Text size="13" weight="600" color="primary"> {{ comma(address.first_height) }} </Text>
196+
<NuxtLink :to="`/address/${address.hash}`">
197+
<Text size="13" weight="600" color="primary">
198+
{{ comma(address.first_height) }}
199+
</Text>
200+
</NuxtLink>
191201
</td>
192202
<td>
193-
<Text size="13" weight="600" color="primary"> {{ comma(address.last_height) }} </Text>
203+
<NuxtLink :to="`/address/${address.hash}`">
204+
<Text size="13" weight="600" color="primary">
205+
{{ comma(address.last_height) }}
206+
</Text>
207+
</NuxtLink>
194208
</td>
195209
</tr>
196210
</tbody>

‎services/api/address.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,22 @@ export const fetchTxsByAddressHash = async ({ limit, offset, sort, hash, status,
5555
}
5656
}
5757

58+
export const fetchMessagesByAddressHash = async ({ limit, offset, sort, hash, msg_type }) => {
59+
try {
60+
const url = new URL(`${useServerURL()}/address/${hash}/messages`)
61+
62+
if (limit) url.searchParams.append("limit", limit)
63+
if (offset) url.searchParams.append("offset", offset)
64+
if (sort) url.searchParams.append("sort", sort)
65+
if (msg_type) url.searchParams.append("msg_type", msg_type)
66+
67+
const data = await useFetch(url.href)
68+
return data
69+
} catch (error) {
70+
console.error(error)
71+
}
72+
}
73+
5874
export const fetchBlobsByAddressHash = async ({ limit, offset, sort, hash }) => {
5975
try {
6076
const url = new URL(`${useServerURL()}/address/${hash}/blobs`)

0 commit comments

Comments
 (0)