Skip to content

Commit b578b1a

Browse files
xdeqxdeq
committed
Merge branch 'dev' of github.com:celenium-io/celenium-interface into dev
2 parents e677ff8 + bb51a61 commit b578b1a

File tree

7 files changed

+130
-55
lines changed

7 files changed

+130
-55
lines changed

‎components/data/BlocksTimeline/BlocksTimelineTable.vue‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -212,7 +212,8 @@ watch(
212212
<th><Text size="12" weight="600" color="tertiary">Proposer</Text></th>
213213
<th><Text size="12" weight="600" color="tertiary">Txs</Text></th>
214214
<th><Text size="12" weight="600" color="tertiary">Blobs</Text></th>
215-
<th><Text size="12" weight="600" color="tertiary">Total Fees</Text></th>
215+
<th><Text size="12" weight="600" color="tertiary">Size</Text></th>
216+
<th><Text size="12" weight="600" color="tertiary">Fees</Text></th>
216217
</tr>
217218
</thead>
218219
@@ -294,9 +295,16 @@ watch(
294295
</Text>
295296
</Flex>
296297
</td>
298+
<td>
299+
<Flex align="center">
300+
<Text size="13" weight="600" color="primary">
301+
{{ formatBytes(block.stats.bytes_in_block, 0) }}
302+
</Text>
303+
</Flex>
304+
</td>
297305
<td>
298306
<Flex align="center" gap="4">
299-
<AmountInCurrency :amount="{ value: block.stats.fee, decimal: 6 }" :styles="{ amount: { size: '13' } }" />
307+
<AmountInCurrency :amount="{ value: block.stats.fee, decimal: 2 }" :styles="{ amount: { size: '13' } }" />
300308
</Flex>
301309
</td>
302310
</tr>
@@ -495,6 +503,10 @@ watch(
495503
<Text size="12" weight="600" color="tertiary"> Events</Text>
496504
<Text size="12" weight="600" color="secondary"> {{ preview.block.stats.events_count }} </Text>
497505
</Flex>
506+
<Flex align="center" justify="between">
507+
<Text size="12" weight="600" color="tertiary"> Block Size </Text>
508+
<Text size="12" weight="600" color="secondary"> {{ formatBytes(preview.block.stats.bytes_in_block) }} </Text>
509+
</Flex>
498510
<Flex align="center" justify="between">
499511
<Text size="12" weight="600" color="tertiary"> Blobs </Text>
500512
<Text size="12" weight="600" color="secondary"> {{ formatBytes(preview.block.stats.blobs_size) }} </Text>
@@ -566,6 +578,7 @@ watch(
566578
.table {
567579
border-radius: 4px 4px 4px 8px;
568580
background: var(--card-background);
581+
max-width: 604px;
569582
570583
& table {
571584
width: 100%;
@@ -657,6 +670,8 @@ watch(
657670
}
658671
659672
.main {
673+
max-height: 690px;
674+
overflow-y: auto;
660675
flex: 1;
661676
662677
border-bottom: 1px solid var(--op-5);

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

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -186,14 +186,6 @@ const handleViewBlob = (blob) => {
186186
&:first-child {
187187
padding-left: 16px;
188188
}
189-
190-
& > a {
191-
display: flex;
192-
193-
min-height: 40px;
194-
195-
padding-right: 24px;
196-
}
197189
}
198190
}
199191

‎components/modules/rollup/RollupCharts.vue‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ import { abbreviate, formatBytes, tia } from "@/services/utils"
1515
import { fetchRollupSeries } from "@/services/api/stats"
1616
1717
const props = defineProps({
18-
id: {
19-
type: String,
18+
rollup: {
19+
type: Object,
2020
required: true,
2121
},
2222
})
@@ -190,7 +190,7 @@ const getSizeSeries = async () => {
190190
sizeSeries.value = []
191191
192192
const sizeSeriesRawData = await fetchRollupSeries({
193-
id: props.id,
193+
id: props.rollup.id,
194194
name: "size",
195195
timeframe: selectedPeriod.value.timeframe,
196196
from: parseInt(
@@ -223,7 +223,7 @@ const getPfbSeries = async () => {
223223
pfbSeries.value = []
224224
225225
const blobsSeriesRawData = await fetchRollupSeries({
226-
id: props.id,
226+
id: props.rollup.id,
227227
name: "blobs_count",
228228
timeframe: selectedPeriod.value.timeframe,
229229
from: parseInt(
@@ -255,7 +255,7 @@ const getFeeSeries = async () => {
255255
feeSeries.value = []
256256
257257
const feeSeriesRawData = await fetchRollupSeries({
258-
id: props.id,
258+
id: props.rollup.id,
259259
name: "fee",
260260
timeframe: selectedPeriod.value.timeframe,
261261
from: parseInt(
@@ -628,7 +628,6 @@ onBeforeUnmount(() => {
628628
<Flex ref="feeSeriesChartEl" :class="$style.chart" />
629629
</Flex>
630630
</Flex>
631-
632631
</Flex>
633632
</Flex>
634633
</Flex>

‎components/modules/rollup/RollupOverview.vue‎

Lines changed: 84 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import BlobsTable from "./tables/BlobsTable.vue"
1515
import NamespacesTable from "./tables/NamespacesTable.vue"
1616
1717
/** Services */
18-
import { comma, formatBytes } from "@/services/utils"
18+
import { comma, formatBytes, truncateDecimalPart } from "@/services/utils"
1919
2020
/** API */
2121
import { fetchRollupBlobs, fetchRollupExportData, fetchRollupNamespaces } from "@/services/api/rollup"
@@ -52,6 +52,13 @@ const activeTab = ref(preselectedTab)
5252
const isRefetching = ref(false)
5353
const namespaces = ref([])
5454
const blobs = ref([])
55+
const relatedLinks = computed(() => {
56+
if (props.rollup.links?.length) {
57+
return props.rollup.links[0].split(',')
58+
} else {
59+
return []
60+
}
61+
})
5562
5663
const page = ref(1)
5764
const pages = computed(() => (activeTab.value === "Blobs" ? Math.ceil(props.rollup.blobs_count / 10) : 1))
@@ -278,6 +285,19 @@ const handleCSVDownload = async (period) => {
278285
</Text>
279286
</Flex>
280287
</Flex>
288+
<Flex v-if="relatedLinks.length" direction="column" gap="6">
289+
<Text size="12" weight="600" color="secondary">Related Links</Text>
290+
291+
<Flex align="center" direction="column" gap="2">
292+
<Flex v-for="link in relatedLinks" align="center" justify="start" wide>
293+
<a :href="link" target="_blank">
294+
<Text size="12" height="140" weight="600" color="tertiary" mono selectable :class="$style.link">
295+
{{ link }}
296+
</Text>
297+
</a>
298+
</Flex>
299+
</Flex>
300+
</Flex>
281301
<Flex align="center" justify="start" gap="12">
282302
<Tooltip v-if="rollup.website" position="start" delay="500">
283303
<a :href="rollup.website" target="_blank">
@@ -321,11 +341,11 @@ const handleCSVDownload = async (period) => {
321341
322342
<Tooltip v-if="rollup.explorer" position="start" delay="500">
323343
<a :href="rollup.explorer" target="_blank">
324-
<Icon name="blockscout" size="14" color="secondary" :class="$style.btn" />
344+
<Icon name="search" size="14" color="secondary" :class="$style.btn" />
325345
</a>
326346
327347
<template #content>
328-
{{ rollup.explorer }}
348+
{{ `Explorer: ${rollup.explorer}` }}
329349
</template>
330350
</Tooltip>
331351
</Flex>
@@ -335,20 +355,65 @@ const handleCSVDownload = async (period) => {
335355
336356
<Flex align="center" justify="between">
337357
<Text size="12" weight="600" color="tertiary">Size</Text>
338-
<Text size="12" weight="600" color="secondary"> {{ formatBytes(rollup.size) }} </Text>
358+
359+
<Tooltip position="start" delay="400">
360+
<Flex align="center" gap="4">
361+
<Text size="12" weight="600" color="secondary"> {{ formatBytes(rollup.size) }} </Text>
362+
363+
<Text size="12" weight="600" color="tertiary">{{ `(${truncateDecimalPart(rollup.size_pct * 100, 2)}%)` }}</Text>
364+
</Flex>
365+
366+
<template #content>
367+
<Flex align="end" gap="8">
368+
<Text size="12" weight="600" color="tertiary">Share of total size</Text>
369+
370+
<Text size="12" weight="600" color="primary">{{ `(${truncateDecimalPart(rollup.size_pct * 100, 2)}%)` }}</Text>
371+
</Flex>
372+
</template>
373+
</Tooltip>
339374
</Flex>
340375
341376
<Flex align="center" justify="between">
342377
<Text size="12" weight="600" color="tertiary">Blobs</Text>
343-
<Text size="12" weight="600" color="secondary"> {{ comma(rollup.blobs_count) }} </Text>
378+
379+
<Tooltip position="start" delay="400">
380+
<Flex align="center" gap="4">
381+
<Text size="12" weight="600" color="secondary"> {{ comma(rollup.blobs_count) }} </Text>
382+
383+
<Text size="12" weight="600" color="tertiary">{{ `(${truncateDecimalPart(rollup.blobs_count_pct * 100, 2)}%)` }}</Text>
384+
</Flex>
385+
386+
<template #content>
387+
<Flex align="end" gap="8">
388+
<Text size="12" weight="600" color="tertiary">Share of total blobs count</Text>
389+
390+
<Text size="12" weight="600" color="primary">{{ `(${truncateDecimalPart(rollup.blobs_count_pct * 100, 2)}%)` }}</Text>
391+
</Flex>
392+
</template>
393+
</Tooltip>
344394
</Flex>
345395
346396
<Flex align="center" justify="between">
347397
<Text size="12" weight="600" color="tertiary">Blob Fees Paid</Text>
348-
<AmountInCurrency
349-
:amount="{ value: rollup.fee }"
350-
:styles="{ amount: { color: 'secondary' }, currency: { color: 'secondary' } }"
351-
/>
398+
399+
<Tooltip position="start" delay="400">
400+
<Flex align="center" gap="4">
401+
<AmountInCurrency
402+
:amount="{ value: rollup.fee }"
403+
:styles="{ amount: { color: 'secondary' }, currency: { color: 'secondary' } }"
404+
/>
405+
406+
<Text size="12" weight="600" color="tertiary">{{ `(${truncateDecimalPart(rollup.fee_pct * 100, 2)}%)` }}</Text>
407+
</Flex>
408+
409+
<template #content>
410+
<Flex align="end" gap="8">
411+
<Text size="12" weight="600" color="tertiary">Share of total fee paid</Text>
412+
413+
<Text size="12" weight="600" color="primary">{{ `(${truncateDecimalPart(rollup.fee_pct * 100, 2)}%)` }}</Text>
414+
</Flex>
415+
</template>
416+
</Tooltip>
352417
</Flex>
353418
354419
<Flex align="start" justify="between">
@@ -506,6 +571,16 @@ const handleCSVDownload = async (period) => {
506571
text-overflow: ellipsis;
507572
overflow: hidden;
508573
}
574+
575+
.link {
576+
max-width: 352px;
577+
text-overflow: ellipsis;
578+
overflow: hidden;
579+
}
580+
581+
.link:hover {
582+
color: var(--txt-secondary);
583+
}
509584
}
510585
511586
.txs_wrapper {

‎pages/blobstream.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -506,7 +506,7 @@ getCommitments()
506506
padding: 16px 0;
507507
}
508508
509-
@media (max-width: 900px) {
509+
@media (max-width: 800px) {
510510
.card_wrapper {
511511
flex-direction: column;
512512
}

‎pages/rollup/[slug].vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ useHead({
9999
<RollupOverview v-if="rollup" :rollup="rollup" />
100100
</Flex>
101101
102-
<RollupCharts v-if="rollup" :id="rollup.id" />
102+
<RollupCharts v-if="rollup" :rollup="rollup" />
103103
</Flex>
104104
</template>
105105

‎pages/rollups.vue‎

Lines changed: 22 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import Tooltip from "@/components/ui/Tooltip.vue"
1010
import AmountInCurrency from "@/components/AmountInCurrency.vue"
1111
1212
/** Services */
13-
import { formatBytes, comma, shareOfTotalString } from "@/services/utils"
13+
import { formatBytes, comma, truncateDecimalPart } from "@/services/utils"
1414
1515
/** API */
1616
import { fetchRollups, fetchRollupsCount } from "@/services/api/rollup"
@@ -70,18 +70,6 @@ const isRefetching = ref(false)
7070
const rollups = ref([])
7171
const count = ref(0)
7272
73-
const totalSize = computed(() =>
74-
rollups.value.reduce((acc, rollup) => {
75-
return acc + rollup.size
76-
}, 0),
77-
)
78-
79-
const totalFee = computed(() =>
80-
rollups.value.reduce((acc, rollup) => {
81-
return acc + +rollup.fee
82-
}, 0),
83-
)
84-
8573
const utiaPerMB = (rollup) => {
8674
let totalRollupMB = rollup.size / (1024 * 1024)
8775
@@ -304,18 +292,14 @@ const handleNext = () => {
304292
<Flex direction="column" gap="4">
305293
<Text size="13" weight="600" color="primary">{{ formatBytes(r.size) }}</Text>
306294

307-
<Text size="12" weight="600" color="tertiary"
308-
>{{ shareOfTotalString(r.size, totalSize) }}%</Text
309-
>
295+
<Text size="12" weight="600" color="tertiary">{{ truncateDecimalPart(r.size_pct * 100, 2) }}%</Text>
310296
</Flex>
311297

312298
<template #content>
313299
<Flex align="end" gap="8">
314300
<Text size="12" weight="600" color="tertiary">Share of total size</Text>
315301

316-
<Text size="12" weight="600" color="primary"
317-
>{{ shareOfTotalString(r.size, totalSize) }}%</Text
318-
>
302+
<Text size="12" weight="600" color="primary">{{ truncateDecimalPart(r.size_pct * 100, 2) }}%</Text>
319303
</Flex>
320304
</template>
321305
</Tooltip>
@@ -324,8 +308,22 @@ const handleNext = () => {
324308
</td>
325309
<td>
326310
<NuxtLink :to="`/rollup/${r.slug}`">
327-
<Flex align="center">
328-
<Text size="13" weight="600" color="primary">{{ comma(r.blobs_count) }}</Text>
311+
<Flex align="start" justify="center" direction="column" gap="4">
312+
<Tooltip position="start" delay="400">
313+
<Flex direction="column" gap="4">
314+
<Text size="13" weight="600" color="primary">{{ comma(r.blobs_count) }}</Text>
315+
316+
<Text size="12" weight="600" color="tertiary">{{ truncateDecimalPart(r.blobs_count_pct * 100, 2) }}%</Text>
317+
</Flex>
318+
319+
<template #content>
320+
<Flex align="end" gap="8">
321+
<Text size="12" weight="600" color="tertiary">Share of total blobs count</Text>
322+
323+
<Text size="12" weight="600" color="primary">{{ truncateDecimalPart(r.blobs_count_pct * 100, 2) }}%</Text>
324+
</Flex>
325+
</template>
326+
</Tooltip>
329327
</Flex>
330328
</NuxtLink>
331329
</td>
@@ -335,17 +333,13 @@ const handleNext = () => {
335333
<AmountInCurrency :amount="{ value: r.fee }" />
336334

337335
<Tooltip position="start" delay="400">
338-
<Text size="12" weight="600" color="tertiary"
339-
>{{ shareOfTotalString(r.fee, totalFee) }}%</Text
340-
>
336+
<Text size="12" weight="600" color="tertiary">{{ truncateDecimalPart(r.fee_pct * 100, 2) }}%</Text>
341337

342338
<template #content>
343339
<Flex align="end" gap="8">
344-
<Text size="12" weight="600" color="tertiary">Share of total fee</Text>
340+
<Text size="12" weight="600" color="tertiary">Share of total fee paid</Text>
345341

346-
<Text size="12" weight="600" color="primary"
347-
>{{ shareOfTotalString(r.fee, totalFee) }}%</Text
348-
>
342+
<Text size="12" weight="600" color="primary">{{ truncateDecimalPart(r.fee_pct * 100, 2) }}%</Text>
349343
</Flex>
350344
</template>
351345
</Tooltip>

0 commit comments

Comments
 (0)