Skip to content

Commit 3c51599

Browse files
xdeqxdeq
authored
Merge pull request #25 from celenium-io/CLS-211-some-changes-for-main-page
CLS-211 Changes for main page
2 parents d6efa94 + 0a44f4b commit 3c51599

File tree

4 files changed

+69
-30
lines changed

4 files changed

+69
-30
lines changed

‎components/data/BlocksTimeline/BlocksTimelineTable.vue‎

Lines changed: 53 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import Tooltip from "@/components/ui/Tooltip.vue"
1010
import { tia, comma, space, formatBytes, getNamespaceID } from "@/services/utils"
1111
1212
/** API */
13-
import { fetchBlockNamespaces } from "@/services/api/block"
13+
import { fetchBlockBlobs } from "@/services/api/block"
1414
import { fetchTransactionsByBlock } from "@/services/api/tx"
1515
1616
/** Store */
@@ -27,7 +27,7 @@ const preview = reactive({
2727
transactions: [],
2828
pfbs: [],
2929
30-
isLoadingPfbs: true,
30+
isLoadingNamespaces: true,
3131
})
3232
3333
const autoSelect = ref(true)
@@ -38,7 +38,7 @@ const handleSelectBlock = (b, isUser) => {
3838
if (preview.block.height === b.height) return
3939
4040
preview.block = b
41-
preview.pfbs = []
41+
preview.namespaces = []
4242
}
4343
4444
const getTransactionsByBlock = async () => {
@@ -104,7 +104,7 @@ watch(
104104
() => preview.block,
105105
async () => {
106106
if (preview.block.stats.tx_count) {
107-
if (preview.block.stats.blobs_size) preview.isLoadingPfbs = true
107+
if (preview.block.stats.blobs_size) preview.isLoadingNamespaces = true
108108
109109
getTransactionsByBlock()
110110
}
@@ -115,13 +115,19 @@ watch(
115115
() => preview.transactions,
116116
async () => {
117117
if (preview.block.stats.blobs_size === 0) {
118-
preview.isLoadingPfbs = false
118+
preview.isLoadingNamespaces = false
119119
return
120120
}
121121
122-
const data = await fetchBlockNamespaces({ height: preview.block.height })
123-
preview.pfbs = data
124-
preview.isLoadingPfbs = false
122+
const data = await fetchBlockBlobs({ height: preview.block.height })
123+
let namespaces = []
124+
125+
data.forEach(blob => {
126+
namespaces.push(blob.namespace)
127+
});
128+
129+
preview.namespaces = Array.from(new Map(namespaces.map(item => [item.id, item])).values());
130+
preview.isLoadingNamespaces = false
125131
},
126132
)
127133
@@ -200,9 +206,11 @@ watch(
200206
<table>
201207
<thead>
202208
<tr>
203-
<th><Text size="12" weight="600" color="tertiary">Height</Text></th>
209+
<th><Text size="12" weight="600" color="tertiary">Block Height</Text></th>
204210
<th><Text size="12" weight="600" color="tertiary">Time</Text></th>
205211
<th><Text size="12" weight="600" color="tertiary">Proposer</Text></th>
212+
<th><Text size="12" weight="600" color="tertiary">Txs</Text></th>
213+
<th><Text size="12" weight="600" color="tertiary">Blobs</Text></th>
206214
<th><Text size="12" weight="600" color="tertiary">Total Fees</Text></th>
207215
</tr>
208216
</thead>
@@ -225,17 +233,14 @@ watch(
225233
</NuxtLink>
226234
</td>
227235
<td>
228-
<Flex direction="column" gap="4">
236+
<Flex align="center">
229237
<Text size="12" weight="600" color="primary">
230238
{{
231239
DateTime.fromISO(block.time)
232240
.plus({ seconds: block.stats.block_time / 1_000 })
233241
.toRelative({ locale: "en", style: "short" })
234242
}}
235243
</Text>
236-
<Text size="12" weight="500" color="tertiary">
237-
{{ DateTime.fromISO(block.time).setLocale("en").toFormat("LLL d, t") }}
238-
</Text>
239244
</Flex>
240245
</td>
241246
<td>
@@ -274,6 +279,20 @@ watch(
274279
</template>
275280
</Tooltip>
276281
</td>
282+
<td>
283+
<Flex align="center">
284+
<Text size="13" weight="600" color="primary">
285+
{{ block.stats.tx_count }}
286+
</Text>
287+
</Flex>
288+
</td>
289+
<td>
290+
<Flex align="center">
291+
<Text size="13" weight="600" color="primary">
292+
{{ block.stats.blobs_count }}
293+
</Text>
294+
</Flex>
295+
</td>
277296
<td>
278297
<Flex align="center" gap="4">
279298
<Text size="13" weight="600" :color="parseFloat(block.stats.fee) ? 'primary' : 'tertiary'">
@@ -447,12 +466,12 @@ watch(
447466
<Flex align="center" justify="between">
448467
<Text size="12" weight="600" color="tertiary">Namespaces</Text>
449468
<Text size="12" weight="600" color="secondary">
450-
{{ preview.pfbs?.length > 3 ? "3 /" : "" }} {{ preview.pfbs?.length }}
469+
{{ preview.namespaces?.length > 3 ? "3 /" : "" }} {{ preview.namespaces?.length }}
451470
</Text>
452471
</Flex>
453472
454473
<Text
455-
v-if="preview.isLoadingPfbs"
474+
v-if="preview.isLoadingNamespaces"
456475
size="12"
457476
weight="600"
458477
color="tertiary"
@@ -461,27 +480,27 @@ watch(
461480
>
462481
Loading namespaces..
463482
</Text>
464-
<Flex v-else-if="preview.pfbs?.length" direction="column" gap="8">
465-
<NuxtLink v-for="pfb in preview.pfbs.slice(0, 3)" :to="`/namespace/${pfb.namespace.namespace_id}`">
483+
<Flex v-else-if="preview.namespaces?.length" direction="column" gap="8">
484+
<NuxtLink v-for="ns in preview.namespaces.slice(0, 3)" :to="`/namespace/${ns.namespace_id}`">
466485
<Outline wide height="32" padding="8" radius="6">
467486
<Flex align="center" justify="between" wide>
468487
<Flex align="center" gap="8">
469488
<Icon name="folder" size="12" color="secondary" />
470489
471490
<Text size="13" weight="600" color="primary" mono>
472-
{{ getNamespaceID(pfb.namespace.namespace_id).slice(0, 4) }}
491+
{{ getNamespaceID(ns.namespace_id).slice(0, 4) }}
473492
</Text>
474493
475494
<Flex align="center" gap="3">
476495
<div v-for="dot in 3" class="dot" />
477496
</Flex>
478497
479498
<Text size="13" weight="600" color="primary" mono>
480-
{{ getNamespaceID(pfb.namespace.namespace_id).slice(-4) }}
499+
{{ getNamespaceID(ns.namespace_id).slice(-4) }}
481500
</Text>
482501
</Flex>
483502
484-
<Text size="12" weight="600" color="tertiary">{{ formatBytes(pfb.namespace.size) }}</Text>
503+
<Text size="12" weight="600" color="tertiary">{{ formatBytes(ns.size) }}</Text>
485504
</Flex>
486505
</Outline>
487506
</NuxtLink>
@@ -605,7 +624,11 @@ watch(
605624
text-align: left;
606625
padding: 0;
607626
padding-bottom: 8px;
608-
padding-left: 16px;
627+
padding-right: 24px;
628+
629+
&:first-child {
630+
padding-left: 16px;
631+
}
609632
610633
& span {
611634
display: flex;
@@ -614,14 +637,19 @@ watch(
614637
615638
& tr td {
616639
padding: 0;
617-
padding-right: 24px;
618-
padding-left: 16px;
640+
padding-right: 16px;
619641
padding-top: 8px;
620642
padding-bottom: 8px;
621643
622644
white-space: nowrap;
645+
overflow: hidden;
646+
text-overflow: ellipsis;
623647
624648
border-right: 2px solid transparent;
649+
650+
&:first-child {
651+
padding-left: 16px;
652+
}
625653
}
626654
}
627655
}
@@ -680,7 +708,7 @@ watch(
680708
}
681709
682710
.proposer_moniker {
683-
max-width: 190px;
711+
max-width: 150px;
684712
685713
text-overflow: ellipsis;
686714
overflow: hidden;
@@ -720,6 +748,7 @@ watch(
720748
}
721749
722750
.table {
751+
width: 604px;
723752
border-radius: 4px 4px 8px 8px;
724753
}
725754
}

‎components/data/LatestPFBTable.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import Tooltip from "@/components/ui/Tooltip.vue"
88
import Spinner from "@/components/ui/Spinner.vue"
99
1010
/** Services */
11-
import { tia, space, comma } from "@/services/utils"
11+
import { comma, space, splitAddress, tia } from "@/services/utils"
1212
1313
/** API */
1414
import { fetchLatestPFBs } from "@/services/api/tx"
@@ -36,8 +36,8 @@ isLoading.value = false
3636
<thead>
3737
<tr>
3838
<th><Text size="12" weight="600" color="tertiary" noWrap>Hash</Text></th>
39-
<th><Text size="12" weight="600" color="tertiary" noWrap>Height</Text></th>
40-
<th><Text size="12" weight="600" color="tertiary" noWrap>Time</Text></th>
39+
<th><Text size="12" weight="600" color="tertiary" noWrap>Block Height</Text></th>
40+
<th><Text size="12" weight="600" color="tertiary" noWrap>Signer</Text></th>
4141
<th><Text size="12" weight="600" color="tertiary" noWrap>Fee</Text></th>
4242
</tr>
4343
</thead>
@@ -105,7 +105,7 @@ isLoading.value = false
105105
<NuxtLink :to="`/tx/${pfb.hash}`">
106106
<Flex align="center">
107107
<Text size="12" weight="600" color="primary">
108-
{{ DateTime.fromISO(pfb.time).toRelative({ locale: "en", style: "short" }) }}
108+
{{ splitAddress(pfb.signers[0]) }}
109109
</Text>
110110
</Flex>
111111
</NuxtLink>
@@ -208,7 +208,7 @@ isLoading.value = false
208208
209209
min-height: 40px;
210210
211-
padding-right: 24px;
211+
padding-right: 16px;
212212
}
213213
}
214214
}

‎components/data/RecentNamespacesTable.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ const handleSort = (by) => {
6565
<thead>
6666
<tr>
6767
<th><Text size="12" weight="600" color="tertiary">Namespace</Text></th>
68-
<th><Text size="12" weight="600" color="tertiary">Height</Text></th>
68+
<th><Text size="12" weight="600" color="tertiary">Block Height</Text></th>
6969
<th @click="handleSort('time')" :class="$style.sortable">
7070
<Flex align="center" gap="6">
7171
<Text size="12" weight="600" color="tertiary">Time</Text>

‎pages/blocks.vue‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -165,6 +165,7 @@ const handleLast = async () => {
165165
<th><Text size="12" weight="600" color="tertiary" noWrap>Hash</Text></th>
166166
<th><Text size="12" weight="600" color="tertiary" noWrap>Txs</Text></th>
167167
<th><Text size="12" weight="600" color="tertiary" noWrap>Events</Text></th>
168+
<th><Text size="12" weight="600" color="tertiary" noWrap>Blobs</Text></th>
168169
<th><Text size="12" weight="600" color="tertiary" noWrap>Blobs Size</Text></th>
169170
<th><Text size="12" weight="600" color="tertiary" noWrap>Total Fees</Text></th>
170171
</tr>
@@ -289,6 +290,15 @@ const handleLast = async () => {
289290
</Flex>
290291
</NuxtLink>
291292
</td>
293+
<td>
294+
<NuxtLink :to="`/block/${block.height}`">
295+
<Flex align="center">
296+
<Text size="13" weight="600" color="primary">
297+
{{ block.stats.tx_count }}
298+
</Text>
299+
</Flex>
300+
</NuxtLink>
301+
</td>
292302
<td>
293303
<NuxtLink :to="`/block/${block.height}`">
294304
<Flex align="center">

0 commit comments

Comments
 (0)