Skip to content

Commit 65297c1

Browse files
xdeqxdeq
committed
ref tx page: messages + events + raw data modal
1 parent 46bfd33 commit 65297c1

File tree

5 files changed

+261
-28
lines changed

5 files changed

+261
-28
lines changed

‎components/modules/namespace/tables/MessagesTable.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ const props = defineProps({
3636
<tbody>
3737
<tr v-for="message in messages">
3838
<td style="width: 1px">
39-
<NuxtLink :to="`/tx/${message.tx.hash}`">
39+
<NuxtLink :to="`/tx/${message.tx?.hash}`">
4040
<Tooltip position="start" delay="500">
4141
<Flex align="center" gap="8">
4242
<Icon
@@ -78,14 +78,14 @@ const props = defineProps({
7878
</NuxtLink>
7979
</td>
8080
<td style="width: 1px">
81-
<NuxtLink :to="`/tx/${message.tx.hash}`">
81+
<NuxtLink :to="`/tx/${message.tx?.hash}`">
8282
<Flex align="center">
8383
<MessageTypeBadge :types="[message.type]" />
8484
</Flex>
8585
</NuxtLink>
8686
</td>
8787
<td>
88-
<NuxtLink :to="`/tx/${message.tx.hash}`">
88+
<NuxtLink :to="`/tx/${message.tx?.hash}`">
8989
<Flex align="center">
9090
<Text size="13" weight="600" color="primary">
9191
{{ DateTime.fromISO(message.time).toRelative({ locale: "en", style: "short" }) }}
@@ -94,7 +94,7 @@ const props = defineProps({
9494
</NuxtLink>
9595
</td>
9696
<td>
97-
<NuxtLink :to="`/tx/${message.tx.hash}`">
97+
<NuxtLink :to="`/tx/${message.tx?.hash}`">
9898
<Flex align="center">
9999
<Outline @click.prevent="router.push(`/block/${message.height}`)">
100100
<Flex align="center" gap="6">

‎components/modules/tx/MessagesTable.vue‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
<script setup>
2+
/** Vendor */
3+
import { DateTime } from "luxon"
4+
5+
/** UI */
6+
import Tooltip from "@/components/ui/Tooltip.vue"
7+
8+
/** Shared Components */
9+
import MessageTypeBadge from "@/components/shared/MessageTypeBadge.vue"
10+
11+
/** Services */
12+
import { comma, space } from "@/services/utils"
13+
14+
/** Store */
15+
import { useModalsStore } from "@/store/modals"
16+
import { useCacheStore } from "@/store/cache"
17+
const modalsStore = useModalsStore()
18+
const cacheStore = useCacheStore()
19+
20+
const router = useRouter()
21+
22+
const props = defineProps({
23+
messages: {
24+
type: Array,
25+
required: true,
26+
},
27+
})
28+
29+
const handleViewRawMessage = (message) => {
30+
cacheStore.current._target = "message"
31+
cacheStore.current.message = message
32+
modalsStore.open("rawData")
33+
}
34+
</script>
35+
36+
<template>
37+
<div :class="$style.wrapper_tx_messages">
38+
<table :class="$style.table">
39+
<thead>
40+
<tr>
41+
<th><Text size="12" weight="600" color="tertiary">Type</Text></th>
42+
<th><Text size="12" weight="600" color="tertiary">Time</Text></th>
43+
<th><Text size="12" weight="600" color="tertiary">Block</Text></th>
44+
</tr>
45+
</thead>
46+
47+
<tbody>
48+
<tr v-for="message in messages" @click="handleViewRawMessage(message)">
49+
<td style="width: 1px">
50+
<Flex align="center">
51+
<MessageTypeBadge :types="[message.type]" />
52+
</Flex>
53+
</td>
54+
<td>
55+
<Flex align="center">
56+
<Text size="13" weight="600" color="primary">
57+
{{ DateTime.fromISO(message.time).toRelative({ locale: "en", style: "short" }) }}
58+
</Text>
59+
</Flex>
60+
</td>
61+
<td>
62+
<Flex align="center">
63+
<Outline @click.prevent="router.push(`/block/${message.height}`)">
64+
<Flex align="center" gap="6">
65+
<Icon name="block" size="14" color="secondary" />
66+
67+
<Text size="13" weight="600" color="primary" tabular>{{ comma(message.height) }}</Text>
68+
</Flex>
69+
</Outline>
70+
</Flex>
71+
</td>
72+
</tr>
73+
</tbody>
74+
</table>
75+
</div>
76+
</template>
77+
78+
<style module>
79+
.wrapper_tx_messages {
80+
min-width: 100%;
81+
width: 0;
82+
height: 100%;
83+
84+
overflow-x: auto;
85+
86+
& .table {
87+
width: 100%;
88+
height: fit-content;
89+
90+
border-spacing: 0px;
91+
92+
padding-bottom: 8px;
93+
94+
& tbody {
95+
& tr {
96+
cursor: pointer;
97+
98+
transition: all 0.05s ease;
99+
100+
&:hover {
101+
background: var(--op-5);
102+
}
103+
104+
&:active {
105+
background: var(--op-8);
106+
}
107+
}
108+
}
109+
110+
& tr th {
111+
text-align: left;
112+
padding: 0;
113+
padding-right: 16px;
114+
padding-top: 16px;
115+
padding-bottom: 8px;
116+
117+
&:first-child {
118+
padding-left: 16px;
119+
}
120+
121+
& span {
122+
display: flex;
123+
}
124+
}
125+
126+
& tr td {
127+
padding: 0;
128+
padding-right: 24px;
129+
padding-top: 7px;
130+
padding-bottom: 7px;
131+
132+
white-space: nowrap;
133+
134+
&:first-child {
135+
padding-left: 16px;
136+
}
137+
}
138+
}
139+
}
140+
</style>

‎components/modules/tx/TxOverview.vue‎

Lines changed: 114 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,15 @@ import Button from "~/components/ui/Button.vue"
99
1010
/** Shared Components */
1111
import MessageTypeBadge from "@/components/shared/MessageTypeBadge.vue"
12+
import MessagesTable from "@/components/modules/tx/MessagesTable.vue"
1213
1314
/** Services */
1415
import { comma, tia, splitAddress } from "@/services/utils"
1516
import { MessageIconMap } from "@/services/constants/mapping"
1617
import amp from "@/services/amp"
1718
1819
/** API */
19-
import { fetchTxEvents } from "@/services/api/tx"
20+
import { fetchTxEvents, fetchTxMessages } from "@/services/api/tx"
2021
2122
/** Store */
2223
import { useModalsStore } from "@/store/modals"
@@ -54,22 +55,29 @@ const bookmarkText = computed(() => {
5455
return isBookmarked.value ? "Saved" : "Save"
5556
})
5657
58+
const activeTab = ref("messages")
59+
5760
const showAll = ref(false)
5861
const handleShowAll = () => {
5962
showAll.value = !showAll.value
6063
6164
amp.log("toggleShowAll")
6265
}
6366
67+
const messages = ref([])
68+
6469
const events = ref([])
6570
const filteredEvents = computed(() => (showAll.value ? events.value : events.value.slice(0, 10)))
6671
6772
const { data: rawEvents } = await fetchTxEvents(props.tx.hash)
6873
events.value = rawEvents.value.sort((a, b) => a.position - b.position)
6974
cacheStore.current.events = events.value
7075
71-
onMounted(() => {
76+
onMounted(async () => {
7277
isBookmarked.value = !!bookmarksStore.bookmarks.txs.find((t) => t.id === props.tx.hash)
78+
79+
const data = await fetchTxMessages(props.tx.hash)
80+
messages.value = data
7381
})
7482
7583
const handleBookmark = () => {
@@ -123,6 +131,12 @@ const handleViewRawEvents = () => {
123131
cacheStore.current._target = "events"
124132
modalsStore.open("rawData")
125133
}
134+
135+
const handleViewRawEvent = (event) => {
136+
cacheStore.current._target = "event"
137+
cacheStore.current.event = event
138+
modalsStore.open("rawData")
139+
}
126140
</script>
127141

128142
<template>
@@ -282,30 +296,41 @@ const handleViewRawEvents = () => {
282296
</Flex>
283297
</Flex>
284298

285-
<Flex direction="column" gap="16" wide :class="$style.events_wrapper">
286-
<Text size="13" weight="600" color="primary"> Events </Text>
287-
288-
<Flex direction="column">
289-
<Flex align="center" gap="8" :class="$style.message_types">
290-
<template v-if="tx.message_types.length">
291-
<Icon
292-
:name="
293-
MessageIconMap[tx.message_types[0].replace('Msg', '').toLowerCase()]
294-
? MessageIconMap[tx.message_types[0].replace('Msg', '').toLowerCase()]
295-
: 'zap'
296-
"
297-
size="14"
298-
color="secondary"
299-
/>
300-
<Text size="12" weight="600" color="primary">
301-
{{ tx.message_types.map((type) => type.replace("Msg", "")).join(", ") }}
302-
</Text>
303-
</template>
299+
<Flex direction="column" gap="4" wide :class="$style.events_wrapper">
300+
<Flex align="center" justify="between" :class="$style.tabs_wrapper">
301+
<Flex gap="4" :class="$style.tabs">
302+
<Flex
303+
@click="activeTab = 'messages'"
304+
align="center"
305+
gap="6"
306+
:class="[$style.tab, activeTab === 'messages' && $style.active]"
307+
>
308+
<Icon name="message" size="12" color="secondary" />
304309

305-
<Text v-else size="12" weight="600" color="tertiary">No Message Types</Text>
310+
<Text size="13" weight="600">Messages</Text>
311+
</Flex>
312+
313+
<Flex
314+
@click="activeTab = 'events'"
315+
align="center"
316+
gap="6"
317+
:class="[$style.tab, activeTab === 'events' && $style.active]"
318+
>
319+
<Icon name="zap" size="12" color="secondary" />
320+
321+
<Text size="13" weight="600">Events</Text>
322+
</Flex>
306323
</Flex>
324+
</Flex>
307325

308-
<Flex v-for="(event, idx) in filteredEvents" align="center" gap="12" :class="$style.event">
326+
<Flex v-if="activeTab === 'events'" direction="column" :class="[$style.inner, $style.events]">
327+
<Flex
328+
v-for="(event, idx) in filteredEvents"
329+
@click="handleViewRawEvent(event)"
330+
align="center"
331+
gap="12"
332+
:class="$style.event"
333+
>
309334
<Flex
310335
direction="column"
311336
align="center"
@@ -583,6 +608,9 @@ const handleViewRawEvents = () => {
583608
</Flex>
584609
</Flex>
585610
</Flex>
611+
<Flex v-if="activeTab === 'messages'" :class="$style.inner">
612+
<MessagesTable :messages="messages" />
613+
</Flex>
586614

587615
<Button v-if="events.length > 10" @click="handleShowAll" type="secondary" size="mini">
588616
{{ !showAll ? "View More" : "Hide" }}
@@ -655,10 +683,61 @@ const handleViewRawEvents = () => {
655683
656684
.events_wrapper {
657685
min-width: 0;
686+
}
687+
688+
.tabs_wrapper {
689+
min-height: 44px;
690+
overflow-x: auto;
691+
692+
border-radius: 4px;
693+
background: var(--card-background);
694+
695+
padding: 0 8px;
696+
}
697+
698+
.tabs_wrapper::-webkit-scrollbar {
699+
display: none;
700+
}
701+
702+
.tab {
703+
height: 28px;
704+
705+
cursor: pointer;
706+
border-radius: 6px;
707+
708+
padding: 0 8px;
709+
710+
transition: all 0.1s ease;
711+
712+
& span {
713+
color: var(--txt-tertiary);
714+
715+
transition: all 0.1s ease;
716+
}
717+
718+
&:hover {
719+
& span {
720+
color: var(--txt-secondary);
721+
}
722+
}
723+
}
724+
725+
.tab.active {
726+
background: var(--op-8);
727+
728+
& span {
729+
color: var(--txt-primary);
730+
}
731+
}
732+
733+
.inner {
734+
height: 100%;
658735
659736
border-radius: 4px 4px 8px 4px;
660737
background: var(--card-background);
738+
}
661739
740+
.events {
662741
padding: 16px;
663742
}
664743
@@ -676,6 +755,8 @@ const handleViewRawEvents = () => {
676755
.event {
677756
height: 36px;
678757
758+
cursor: pointer;
759+
679760
& .left {
680761
height: 100%;
681762
@@ -753,4 +834,14 @@ const handleViewRawEvents = () => {
753834
}
754835
}
755836
}
837+
838+
@media (max-width: 400px) {
839+
.tabs_wrapper {
840+
overflow-x: auto;
841+
842+
&::-webkit-scrollbar {
843+
display: none;
844+
}
845+
}
846+
}
756847
</style>

0 commit comments

Comments
 (0)