Skip to content

Commit bbe0692

Browse files
GusevPMGusevPM
committed
Rework message table and add new events
1 parent 1d593a6 commit bbe0692

File tree

2 files changed

+301
-42
lines changed

2 files changed

+301
-42
lines changed

‎components/modules/tx/MessagesTable.vue‎

Lines changed: 95 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import { DateTime } from "luxon"
44
55
/** UI */
6-
import Tooltip from "@/components/ui/Tooltip.vue"
6+
import Button from "~/components/ui/Button.vue"
77
88
/** Shared Components */
99
import MessageTypeBadge from "@/components/shared/MessageTypeBadge.vue"
@@ -31,51 +31,101 @@ const handleViewRawMessage = (message) => {
3131
cacheStore.current.message = message
3232
modalsStore.open("rawData")
3333
}
34+
35+
// Pagination
36+
const page = ref(1)
37+
const itemsPerPage = 10
38+
const pages = computed(() => Math.ceil(props.messages.length / itemsPerPage))
39+
const messagesToShow = computed(() => {
40+
let start = (page.value - 1) * itemsPerPage;
41+
let end = start + itemsPerPage;
42+
return props.messages.slice(start, end);
43+
})
44+
const handleNext = () => {
45+
if (page.value === pages.value) return
46+
page.value += 1
47+
}
48+
const handlePrev = () => {
49+
if (page.value === 1) return
50+
page.value -= 1
51+
}
3452
</script>
3553

3654
<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.stop="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>
55+
<Flex direction="column" justify="between" :class="$style.data">
56+
<div :class="$style.wrapper_tx_messages">
57+
<table :class="$style.table">
58+
<thead>
59+
<tr>
60+
<th><Text size="12" weight="600" color="tertiary">Type</Text></th>
61+
<th><Text size="12" weight="600" color="tertiary">Time</Text></th>
62+
<th><Text size="12" weight="600" color="tertiary">Block</Text></th>
63+
</tr>
64+
</thead>
65+
66+
<tbody>
67+
<tr v-for="message in messagesToShow" @click="handleViewRawMessage(message)">
68+
<td style="width: 1px">
69+
<Flex align="center">
70+
<MessageTypeBadge :types="[message.type]" />
71+
</Flex>
72+
</td>
73+
<td>
74+
<Flex align="center">
75+
<Text size="13" weight="600" color="primary">
76+
{{ DateTime.fromISO(message.time).toRelative({ locale: "en", style: "short" }) }}
77+
</Text>
78+
</Flex>
79+
</td>
80+
<td>
81+
<Flex align="center">
82+
<Outline @click.stop="router.push(`/block/${message.height}`)">
83+
<Flex align="center" gap="6">
84+
<Icon name="block" size="14" color="secondary" />
85+
86+
<Text size="13" weight="600" color="primary" tabular>{{ comma(message.height) }}</Text>
87+
</Flex>
88+
</Outline>
89+
</Flex>
90+
</td>
91+
</tr>
92+
</tbody>
93+
</table>
94+
</div>
95+
96+
<!-- Pagination -->
97+
<Flex v-if="messagesToShow.length && pages === 1" align="center" gap="6" :class="$style.pagination">
98+
<Button @click="page = 1" type="secondary" size="mini" :disabled="page === 1">
99+
<Icon name="arrow-left-stop" size="12" color="primary" />
100+
</Button>
101+
<Button type="secondary" @click="handlePrev" size="mini" :disabled="page === 1">
102+
<Icon name="arrow-left" size="12" color="primary" />
103+
</Button>
104+
105+
<Button type="secondary" size="mini" disabled>
106+
<Text size="12" weight="600" color="primary"> {{ page }} of {{ pages }} </Text>
107+
</Button>
108+
109+
<Button @click="handleNext" type="secondary" size="mini" :disabled="page === pages">
110+
<Icon name="arrow-right" size="12" color="primary" />
111+
</Button>
112+
<Button @click="page = pages" type="secondary" size="mini" :disabled="page === pages">
113+
<Icon name="arrow-right-stop" size="12" color="primary" />
114+
</Button>
115+
</Flex>
116+
</Flex>
76117
</template>
77118

78119
<style module>
120+
.data {
121+
min-width: 100%;
122+
height: 100%;
123+
124+
overflow-x: auto;
125+
126+
background: var(--card-background);
127+
}
128+
79129
.wrapper_tx_messages {
80130
min-width: 100%;
81131
width: 0;
@@ -137,4 +187,8 @@ const handleViewRawMessage = (message) => {
137187
}
138188
}
139189
}
140-
</style>
190+
191+
.pagination {
192+
padding: 0 16px 16px 16px;
193+
}
194+
</style>

‎components/shared/tables/Events.vue‎

Lines changed: 206 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
<script setup>
2+
/** Vendor */
3+
import { DateTime } from "luxon"
4+
25
/** UI */
36
import Tooltip from "~/components/ui/Tooltip.vue"
47
import Button from "~/components/ui/Button.vue"
@@ -42,7 +45,13 @@ const EventIconMapping = {
4245
commission: "coins_down",
4346
rewards: "coins_down",
4447
mint: "coins_down",
45-
coinbase: "coins_down"
48+
coinbase: "coins_down",
49+
unbond: "arrow-circle-right-up",
50+
redelegate: "arrow-circle-right-up",
51+
complete_unbonding: "coins_down",
52+
complete_redelegation: "arrow-circle-right-up",
53+
slash: "arrow-circle-right-up",
54+
cancel_unbonding_delegation: "arrow-circle-right-up",
4655
}
4756
4857
const getEvents = async () => {
@@ -465,6 +474,202 @@ watch(
465474

466475
<Text size="12" weight="500" color="secondary">was minted</Text>
467476
</Flex>
477+
<!-- Event: undond -->
478+
<Flex v-else-if="event.type === 'unbond'" align="center" gap="4" color="secondary" :class="$style.text">
479+
<Text size="12" weight="500" color="primary" mono no-wrap>
480+
{{ event.data.amount ? tia(event.data.amount.replace("utia", "")) : 0 }} TIA</Text
481+
>
482+
483+
<Text size="12" weight="500" color="secondary">will unbond from</Text>
484+
485+
<Tooltip :class="$style.tooltip">
486+
<NuxtLink :to="`/address/${event.data.validator}`" @click.stop>
487+
<Text size="12" weight="500" color="primary" mono>
488+
{{ splitAddress(event.data.validator) }}
489+
</Text>
490+
</NuxtLink>
491+
492+
<template #content>
493+
{{ event.data.validator }}
494+
</template>
495+
</Tooltip>
496+
497+
<Text size="12" weight="500" color="secondary">at</Text>
498+
499+
<Tooltip :class="$style.tooltip">
500+
<Text size="12" weight="500" color="primary" mono>
501+
{{ DateTime.fromISO(event.data.completion_time).setLocale("en").toFormat("MMMM d h:mm a") }}
502+
</Text>
503+
504+
<template #content>
505+
{{ DateTime.fromISO(event.data.completion_time).setLocale("en").toFormat("ff") }}
506+
</template>
507+
</Tooltip>
508+
</Flex>
509+
<!-- Event: redelegate -->
510+
<Flex v-else-if="event.type === 'redelegate'" align="center" gap="4" color="secondary" :class="$style.text">
511+
<Text size="12" weight="500" color="primary" mono no-wrap>
512+
{{ event.data.amount ? tia(event.data.amount.replace("utia", "")) : 0 }} TIA</Text
513+
>
514+
515+
<Text size="12" weight="500" color="secondary">will redelegate from</Text>
516+
517+
<Tooltip :class="$style.tooltip">
518+
<NuxtLink :to="`/address/${event.data.source_validator}`" @click.stop>
519+
<Text size="12" weight="500" color="primary" mono>
520+
{{ splitAddress(event.data.source_validator) }}
521+
</Text>
522+
</NuxtLink>
523+
524+
<template #content>
525+
{{ event.data.source_validator }}
526+
</template>
527+
</Tooltip>
528+
529+
<Text size="12" weight="500" color="secondary">to</Text>
530+
531+
<Tooltip :class="$style.tooltip">
532+
<NuxtLink :to="`/address/${event.data.destination_validator}`" @click.stop>
533+
<Text size="12" weight="500" color="primary" mono>
534+
{{ splitAddress(event.data.destination_validator) }}
535+
</Text>
536+
</NuxtLink>
537+
538+
<template #content>
539+
{{ event.data.destination_validator }}
540+
</template>
541+
</Tooltip>
542+
543+
<Text size="12" weight="500" color="secondary">at</Text>
544+
545+
<Tooltip :class="$style.tooltip">
546+
<Text size="12" weight="500" color="primary" mono>
547+
{{ DateTime.fromISO(event.data.completion_time).setLocale("en").toFormat("MMMM d h:mm a") }}
548+
</Text>
549+
550+
<template #content>
551+
{{ DateTime.fromISO(event.data.completion_time).setLocale("en").toFormat("ff") }}
552+
</template>
553+
</Tooltip>
554+
</Flex>
555+
<!-- Event: complete_unbonding -->
556+
<Flex v-else-if="event.type === 'complete_unbonding'" align="center" gap="4" color="secondary" :class="$style.text">
557+
<Text size="12" weight="500" color="primary" mono no-wrap>
558+
{{ event.data.amount ? tia(event.data.amount.replace("utia", "")) : 0 }} TIA</Text
559+
>
560+
561+
<Text size="12" weight="500" color="secondary">was unbonded from</Text>
562+
563+
<Tooltip :class="$style.tooltip">
564+
<NuxtLink :to="`/address/${event.data.validator}`" @click.stop>
565+
<Text size="12" weight="500" color="primary" mono>
566+
{{ splitAddress(event.data.validator) }}
567+
</Text>
568+
</NuxtLink>
569+
570+
<template #content>
571+
{{ event.data.validator }}
572+
</template>
573+
</Tooltip>
574+
575+
<Text size="12" weight="500" color="secondary">to</Text>
576+
577+
<Tooltip :class="$style.tooltip">
578+
<NuxtLink :to="`/address/${event.data.delegator}`" @click.stop>
579+
<Text size="12" weight="500" color="primary" mono>
580+
{{ splitAddress(event.data.delegator) }}
581+
</Text>
582+
</NuxtLink>
583+
584+
<template #content>
585+
{{ event.data.delegator }}
586+
</template>
587+
</Tooltip>
588+
</Flex>
589+
<!-- Event: complete_redelegation -->
590+
<Flex v-else-if="event.type === 'complete_redelegation'" align="center" gap="4" color="secondary" :class="$style.text">
591+
<Text size="12" weight="500" color="primary" mono no-wrap>
592+
{{ event.data.amount ? tia(event.data.amount.replace("utia", "")) : 0 }} TIA</Text
593+
>
594+
595+
<Text size="12" weight="500" color="secondary">was redelegated from</Text>
596+
597+
<Tooltip :class="$style.tooltip">
598+
<NuxtLink :to="`/address/${event.data.source_validator}`" @click.stop>
599+
<Text size="12" weight="500" color="primary" mono>
600+
{{ splitAddress(event.data.source_validator) }}
601+
</Text>
602+
</NuxtLink>
603+
604+
<template #content>
605+
{{ event.data.source_validator }}
606+
</template>
607+
</Tooltip>
608+
609+
<Text size="12" weight="500" color="secondary">to</Text>
610+
611+
<Tooltip :class="$style.tooltip">
612+
<NuxtLink :to="`/address/${event.data.destination_validator}`" @click.stop>
613+
<Text size="12" weight="500" color="primary" mono>
614+
{{ splitAddress(event.data.destination_validator) }}
615+
</Text>
616+
</NuxtLink>
617+
618+
<template #content>
619+
{{ event.data.destination_validator }}
620+
</template>
621+
</Tooltip>
622+
</Flex>
623+
<!-- Event: slash -->
624+
<Flex v-else-if="event.type === 'slash'" align="center" gap="4" color="secondary" :class="$style.text">
625+
<Tooltip :class="$style.tooltip">
626+
<NuxtLink :to="`/address/${event.data.jailed}`" @click.stop>
627+
<Text size="12" weight="500" color="primary" mono>
628+
{{ splitAddress(event.data.jailed) }}
629+
</Text>
630+
</NuxtLink>
631+
632+
<template #content>
633+
{{ event.data.jailed }}
634+
</template>
635+
</Tooltip>
636+
637+
<Text size="12" weight="500" color="secondary">was jailed for</Text>
638+
639+
<Tooltip :class="$style.tooltip">
640+
<Text size="12" weight="500" color="primary" mono>
641+
{{ event.data.reason }}
642+
</Text>
643+
644+
<template #content>
645+
{{ event.data.reason }}
646+
</template>
647+
</Tooltip>
648+
</Flex>
649+
<!-- Event: cancel_unbonding_delegation -->
650+
<Flex v-else-if="event.type === 'cancel_unbonding_delegation'" align="center" gap="4" color="secondary" :class="$style.text">
651+
<Text size="12" weight="500" color="secondary">Unbonding</Text>
652+
653+
<Text size="12" weight="500" color="primary" mono no-wrap>
654+
{{ event.data.amount ? tia(event.data.amount.replace("utia", "")) : 0 }} TIA</Text
655+
>
656+
657+
<Text size="12" weight="500" color="secondary">from</Text>
658+
659+
<Tooltip :class="$style.tooltip">
660+
<NuxtLink :to="`/address/${event.data.validator}`" @click.stop>
661+
<Text size="12" weight="500" color="primary" mono>
662+
{{ splitAddress(event.data.validator) }}
663+
</Text>
664+
</NuxtLink>
665+
666+
<template #content>
667+
{{ event.data.validator }}
668+
</template>
669+
</Tooltip>
670+
671+
<Text size="12" weight="500" color="secondary">was canceled</Text>
672+
</Flex>
468673

469674
<Text size="12" weight="600" color="tertiary" mono>
470675
{{ event.type }}

0 commit comments

Comments
 (0)