Skip to content

Commit ba7b806

Browse files
GusevPMGusevPM
committed
Update feed, add blocks feed, change date format for ttb page
1 parent 7618943 commit ba7b806

File tree

10 files changed

+86
-101
lines changed

10 files changed

+86
-101
lines changed

‎components/Feed.vue‎

Lines changed: 28 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { getRankCategory } from "@/services/constants/rollups"
1010
import Tooltip from "@/components/ui/Tooltip.vue"
1111
1212
/** API */
13-
import { fetchPriceSeries, fetchTVS } from "@/services/api/stats"
13+
import { fetchPriceSeries, fetchSummary, fetchTVS } from "@/services/api/stats"
1414
1515
/** Store */
1616
import { useAppStore } from "@/store/app.store"
@@ -21,8 +21,6 @@ const activityStore = useActivityStore()
2121
const head = computed(() => appStore.lastHead)
2222
const currentPrice = computed(() => appStore.currentPrice)
2323
24-
const totalSupply = computed(() => head.value.total_supply / 1_000_000)
25-
const totalSupplyUSD = computed(() => totalSupply.value * currentPrice.value?.close)
2624
const totalFees = computed(() => head.value.total_fee / 1_000_000)
2725
const totalFeesUSD = computed(() => totalFees.value * currentPrice.value?.close)
2826
const topRollup = computed(() => {
@@ -46,6 +44,9 @@ const price = reactive({
4644
side: null,
4745
})
4846
const tvs = computed(() => appStore.tvs)
47+
const txCount24h = ref(0)
48+
const bytesInBlocks24h = ref(0)
49+
4950
onMounted(async () => {
5051
const dataSeries = await fetchPriceSeries({ from: parseInt(DateTime.now().minus({ days: 3 }).ts / 1_000) })
5152
series.value = dataSeries
@@ -65,6 +66,15 @@ onMounted(async () => {
6566
appStore.tvs = _tvs.value
6667
}
6768
69+
const startTime = parseInt(DateTime.now().minus({ days: 1 }).toSeconds())
70+
const params = {
71+
table: "block_stats",
72+
func: "sum",
73+
from: startTime,
74+
}
75+
txCount24h.value = await fetchSummary({ ...params, column: "tx_count" })
76+
bytesInBlocks24h.value = await fetchSummary({ ...params, column: "bytes_in_block" })
77+
6878
isLoading.value = false
6979
})
7080
</script>
@@ -112,35 +122,12 @@ onMounted(async () => {
112122
113123
<div :class="$style.dot" />
114124
</template>
115-
116-
<Tooltip>
117-
<Flex align="center" gap="6" :class="$style.stat">
118-
<Icon name="tx" size="12" color="secondary" :class="$style.icon" />
119-
<Flex align="center" gap="4">
120-
<Text size="12" weight="500" color="tertiary" noWrap :class="$style.key">Txs:</Text>
121-
122-
<Text v-if="head.total_tx" size="12" weight="600" noWrap :class="$style.value">{{
123-
abbreviate(head.total_tx)
124-
}}</Text>
125-
<Skeleton v-else w="40" h="12" />
126-
</Flex>
127-
</Flex>
128-
129-
<template #content>
130-
<Flex align="center" justify="between" gap="8">
131-
<Text size="12" weight="500" color="tertiary">Total Txs:</Text>
132-
<Text size="12" weight="600" color="secondary"> {{ comma(head.total_tx) }} </Text>
133-
</Flex>
134-
</template>
135-
</Tooltip>
136-
137-
<div :class="$style.dot" />
138-
125+
139126
<Tooltip>
140127
<Flex align="center" gap="6" :class="$style.stat">
141128
<Icon name="coins" size="12" color="secondary" :class="$style.icon" />
142129
<Flex align="center" gap="4">
143-
<Text size="12" weight="500" color="tertiary" noWrap :class="$style.key">TVS:</Text>
130+
<Text size="12" weight="500" color="tertiary" noWrap :class="$style.key">Current TVS:</Text>
144131
145132
<Text v-if="!isLoading" size="12" weight="600" noWrap :class="$style.value">
146133
{{ abbreviate(tvs, 2) }} USD
@@ -161,21 +148,21 @@ onMounted(async () => {
161148
162149
<Tooltip>
163150
<Flex align="center" gap="6" :class="$style.stat">
164-
<Icon name="namespace" size="12" color="secondary" :class="$style.icon" />
151+
<Icon name="tx" size="12" color="secondary" :class="$style.icon" />
165152
<Flex align="center" gap="4">
166-
<Text size="12" weight="500" color="tertiary" noWrap :class="$style.key">Blobs Size:</Text>
153+
<Text size="12" weight="500" color="tertiary" noWrap :class="$style.key">Txs:</Text>
167154
168-
<Text v-if="head.total_blobs_size" size="12" weight="600" noWrap :class="$style.value">{{
169-
formatBytes(head.total_blobs_size)
155+
<Text v-if="!isLoading" size="12" weight="600" noWrap :class="$style.value">{{
156+
abbreviate(txCount24h)
170157
}}</Text>
171158
<Skeleton v-else w="40" h="12" />
172159
</Flex>
173160
</Flex>
174161
175162
<template #content>
176163
<Flex align="center" justify="between" gap="8">
177-
<Text size="12" weight="500" color="tertiary">Total Blobs Size:</Text>
178-
<Text size="12" weight="600" color="secondary"> {{ comma(head.total_blobs_size) }} Bytes </Text>
164+
<Text size="12" weight="500" color="tertiary">24h Tx Count:</Text>
165+
<Text size="12" weight="600" color="secondary"> {{ comma(txCount24h) }} </Text>
179166
</Flex>
180167
</template>
181168
</Tooltip>
@@ -184,21 +171,21 @@ onMounted(async () => {
184171
185172
<Tooltip>
186173
<Flex align="center" gap="6" :class="$style.stat">
187-
<Icon name="tag" size="12" color="secondary" :class="$style.icon" />
174+
<Icon name="block" size="12" color="secondary" :class="$style.icon" />
188175
<Flex align="center" gap="4">
189-
<Text size="12" weight="500" color="tertiary" noWrap :class="$style.key">Fees:</Text>
176+
<Text size="12" weight="500" color="tertiary" noWrap :class="$style.key">Bytes In Blocks:</Text>
190177
191-
<Text v-if="head.total_fee" size="12" weight="600" noWrap :class="$style.value">
192-
{{ abbreviate(parseInt(totalFees)) }} TIA
193-
</Text>
178+
<Text v-if="!isLoading" size="12" weight="600" noWrap :class="$style.value">{{
179+
formatBytes(bytesInBlocks24h)
180+
}}</Text>
194181
<Skeleton v-else w="40" h="12" />
195182
</Flex>
196183
</Flex>
197184
198185
<template #content>
199186
<Flex align="center" justify="between" gap="8">
200-
<Text size="12" weight="500" color="tertiary">Total Fees:</Text>
201-
<Text size="12" weight="600" color="secondary"> {{ abbreviate(totalFeesUSD) }} USD </Text>
187+
<Text size="12" weight="500" color="tertiary">24h Bytes In Blocks:</Text>
188+
<Text size="12" weight="600" color="secondary"> {{ comma(bytesInBlocks24h) }} Bytes </Text>
202189
</Flex>
203190
</template>
204191
</Tooltip>

‎components/data/BlocksTimeline/BlocksTimelineTable.vue‎

Lines changed: 14 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,12 @@
33
import { DateTime } from "luxon"
44
55
/** UI */
6+
import AmountInCurrency from "@/components/AmountInCurrency.vue"
67
import Button from "@/components/ui/Button.vue"
78
import Tooltip from "@/components/ui/Tooltip.vue"
8-
import AmountInCurrency from "@/components/AmountInCurrency.vue"
9+
10+
/** Components */
11+
import BlocksFeed from "@/components/modules/stats/BlocksFeed.vue"
912
1013
/** Services */
1114
import { comma, formatBytes, shortHex, space } from "@/services/utils"
@@ -199,6 +202,8 @@ watch(
199202
</Flex>
200203
</Flex>
201204
205+
<BlocksFeed :pause="isPaused" :class="$style.blocks_feed" />
206+
202207
<Flex gap="4" :class="$style.content">
203208
<Flex direction="column" gap="16" wide :class="$style.table">
204209
<Flex v-if="!isPaused" align="center" justify="center" gap="6" :class="$style.status">
@@ -519,46 +524,6 @@ watch(
519524
<Text v-else size="12" weight="600" color="tertiary" align="center" :class="$style.empty_state"> No blobs </Text>
520525
</Flex>
521526
522-
<!-- <Flex direction="column" gap="12">
523-
<Flex align="center" justify="between">
524-
<Text size="12" weight="600" color="tertiary">Namespaces</Text>
525-
<Text size="12" weight="600" color="secondary">
526-
{{ preview.namespaces?.length > 3 ? "3 /" : "" }} {{ preview.namespaces?.length }}
527-
</Text>
528-
</Flex>
529-
530-
<Text
531-
v-if="preview.isLoadingNamespaces"
532-
size="12"
533-
weight="600"
534-
color="tertiary"
535-
align="center"
536-
:class="$style.empty_state"
537-
>
538-
Loading namespaces..
539-
</Text>
540-
<Flex v-else-if="preview.namespaces?.length" direction="column" gap="8">
541-
<NuxtLink v-for="ns in preview.namespaces.slice(0, 3)" :to="`/namespace/${ns.namespace_id}`">
542-
<Outline wide height="32" padding="8" radius="6">
543-
<Flex align="center" justify="between" wide>
544-
<Flex align="center" gap="8">
545-
<Icon name="namespace" size="12" color="secondary" />
546-
547-
<Text size="13" weight="600" color="primary" mono class="overflow_ellipsis" style="max-width: 250px">
548-
{{ $getDisplayName('namespaces', ns.namespace_id) }}
549-
</Text>
550-
</Flex>
551-
552-
<Text size="12" weight="600" color="tertiary">{{ formatBytes(ns.size) }}</Text>
553-
</Flex>
554-
</Outline>
555-
</NuxtLink>
556-
</Flex>
557-
<Text v-else size="12" weight="600" color="tertiary" align="center" :class="$style.empty_state">
558-
No namespaces
559-
</Text>
560-
</Flex> -->
561-
562527
<Flex direction="column" gap="16">
563528
<Text size="12" weight="600" color="secondary">Details</Text>
564529
@@ -605,6 +570,14 @@ watch(
605570
padding: 0 12px;
606571
}
607572
573+
.blocks_feed {
574+
height: 120px;
575+
576+
border-radius: 4px 4px 4px 4px;
577+
578+
padding: 12px 18px;
579+
}
580+
608581
.status {
609582
background: linear-gradient(var(--op-8), var(--op-5));
610583
border-radius: 6px;

‎components/modules/block/BlockOverview.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -395,7 +395,7 @@ const handleViewRawTransactions = () => {
395395
color="secondary"
396396
style="text-transform: capitalize"
397397
>
398-
{{ DateTime.now().plus({ seconds: secondsToSelectedBlock }).toRelativeCalendar() }}
398+
~ {{ DateTime.now().plus({ seconds: secondsToSelectedBlock }).setLocale("en").toFormat("TT dd LLL yyyy") }}
399399
</Text>
400400
</Flex>
401401

@@ -458,7 +458,7 @@ const handleViewRawTransactions = () => {
458458
<BadgeValue :text="block?.hash ?? ''" />
459459
</Flex>
460460

461-
<Flex direction="column" gap="16">
461+
<Flex v-if="block" direction="column" gap="16">
462462
<Text size="12" weight="600" color="secondary">Details</Text>
463463

464464
<Flex align="center" justify="between">

‎components/modules/block/UpcomingBlockCard.vue‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -209,11 +209,21 @@ onBeforeUnmount(() => {
209209
<Text size="12" weight="600" color="tertiary">
210210
The block {{ status === STATUS_MAP.Arrived ? "arrived" : "arrives" }}
211211
</Text>
212-
<Text size="12" weight="600" color="secondary">
213-
{{
214-
status === STATUS_MAP.Arriving ? "soon" : DateTime.now().plus({ seconds: secondsToSelectedBlock }).toRelative()
215-
}}
216-
</Text>
212+
<Tooltip>
213+
<Text size="12" weight="600" color="secondary">
214+
{{
215+
status === STATUS_MAP.Arriving ? "soon" : DateTime.now().plus({ seconds: secondsToSelectedBlock }).setLocale("en").toRelative()
216+
}}
217+
</Text>
218+
219+
<template #content>
220+
<Text size="12" weight="600" color="secondary">
221+
{{
222+
status === STATUS_MAP.Arriving ? "soon" : DateTime.now().plus({ seconds: secondsToSelectedBlock }).setLocale("en").toFormat("TT dd LLL yyyy")
223+
}}
224+
</Text>
225+
</template>
226+
</Tooltip>
217227
</Flex>
218228
<Flex align="center" justify="between">
219229
<Text size="12" weight="600" color="tertiary"> Current height </Text>

‎components/modules/stats/BlocksFeed.vue‎

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,14 +28,20 @@ const props = defineProps({
2828
type: Boolean,
2929
default: false,
3030
},
31+
pause: {
32+
type: Boolean,
33+
default: false,
34+
},
3135
})
3236
3337
const blocks = computed(() => appStore.latestBlocks.slice(0, 80).sort((a, b) => a.height - b.height))
38+
const blocksSnapshot = ref([])
3439
3540
const timeline = computed(() => {
3641
let time = []
37-
blocks.value.forEach((b) => {
38-
time.push(DateTime.fromISO(b.time).toFormat("h:mm"))
42+
let arrBlocks = props.pause ? blocksSnapshot.value : blocks.value
43+
arrBlocks.forEach((b) => {
44+
time.push(DateTime.fromISO(b.time).toFormat("H:mm"))
3945
})
4046
time = new Set(time)
4147
@@ -44,11 +50,13 @@ const timeline = computed(() => {
4450
arr.splice(Math.round(arr.length / 2), 1)
4551
time = new Set(arr)
4652
}
53+
4754
return time
4855
})
4956
5057
const maxSize = computed(() => {
5158
if (!blocks.value) return 0
59+
5260
return Math.max(...blocks.value.map((b) => b.stats.bytes_in_block))
5361
})
5462
const avgBlockTime = ref(0)
@@ -69,6 +77,17 @@ const debouncedRedraw = () => {
6977
chartWidth.value = chartBlocksEl.value?.wrapper?.offsetWidth
7078
}
7179
80+
watch(
81+
() => props.pause,
82+
() => {
83+
if (props.pause) {
84+
blocksSnapshot.value = [...blocks.value]
85+
} else {
86+
blocksSnapshot.value = []
87+
}
88+
},
89+
)
90+
7291
onMounted(async () => {
7392
chartWidth.value = chartBlocksEl.value?.wrapper?.offsetWidth
7493
@@ -92,7 +111,7 @@ onBeforeUnmount(() => {
92111
</Flex>
93112
94113
<Flex ref="chartBlocksEl" align="end" :class="$style.chart">
95-
<Tooltip v-for="(b, index) in blocks" position="start" :style="{ max_width: '100%', width: '100%', height: '100%' }">
114+
<Tooltip v-for="(b, index) in pause ? blocksSnapshot : blocks" position="start" :style="{ max_width: '100%', width: '100%', height: '100%' }">
96115
<Flex align="end" :class="$style.bar_wrapper">
97116
<Flex
98117
:class="[$style.bar, b.stats.blobs_count && $style.bar_blob]"
@@ -139,7 +158,7 @@ onBeforeUnmount(() => {
139158
.card_wrapper {
140159
width: 100%;
141160
max-width: 100%;
142-
height: 140px;
161+
max-height: 140px;
143162
144163
background: var(--card-background);
145164
border-radius: 12px;

‎components/modules/stats/tabs/RollupsTab.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -202,7 +202,7 @@ const resetFilters = (name) => {
202202
203203
const route = useRoute()
204204
205-
const sections = ref(["overview", "daily_stats"])
205+
const sections = ref(["daily_stats", "overview"])
206206
const activeSection = ref("")
207207
208208
const updateSection = (section) => {

‎components/widgets/BlobsWidget.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ const selectDay = (d) => {
8888
<Flex justify="between">
8989
<Flex align="center" gap="6">
9090
<Icon name="blob" size="12" color="secondary" />
91-
<Text size="13" weight="600" height="110" color="primary">Blobs Graph</Text>
91+
<Text size="13" weight="600" height="110" color="primary">Daily Blobs Graph</Text>
9292
</Flex>
9393

9494
<Tooltip>

‎components/widgets/Widgets.vue‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,6 @@ import StakingWidget from "./StakingWidget.vue"
99
import TransactionsWidget from "./TransactionsWidget.vue"
1010
import GasWidget from "./GasWidget.vue"
1111
12-
import BlocksFeed from "@/components/modules/stats/BlocksFeed.vue"
13-
1412
const tablet = ref(false)
1513
1614
onBeforeMount(() => {
@@ -22,8 +20,6 @@ onBeforeMount(() => {
2220

2321
<template>
2422
<Flex direction="column" gap="20">
25-
<BlocksFeed v-if="getNetworkName() === 'Mammoth'" />
26-
2723
<Flex gap="20" :class="$style.wrapper">
2824
<Flex direction="column" gap="20" wide :class="$style.column">
2925
<BlockWidget />

‎services/api/stats.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ export const fetchTVL = async ({ slug, period, from, to }) => {
7575
if (from) url.searchParams.append("from", from)
7676
if (to) url.searchParams.append("to", to)
7777
} else {
78-
url = new URL(`${tvlServiceURL}/supply/${period}`)
78+
url = new URL(`${tvlServiceURL}/supply${period ? `/${period}` : ''}`)
7979

8080
if (from) url.searchParams.append("from", from)
8181
if (to) url.searchParams.append("to", to)

‎store/app.store.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export const useAppStore = defineStore("app", () => {
1313
const constants = ref()
1414
const initConstants = async () => {
1515
const data = await fetchConstants()
16-
constants.value = data.module
16+
constants.value = data?.module
1717
}
1818

1919
const gas = ref({

0 commit comments

Comments
 (0)