Skip to content

Commit 5de9e50

Browse files
GusevPMGusevPM
authored
v1.2.0
v1.2.0
2 parents 8644189 + 6534c2b commit 5de9e50

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+5892
-3162
lines changed

‎app.vue‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,18 @@ import { fetchHead } from "@/services/api/main"
1111
1212
/** Store */
1313
import { useAppStore } from "@/store/app"
14+
import { useEnumStore } from "@/store/enums"
1415
const appStore = useAppStore()
16+
const enumStore = useEnumStore()
1517
1618
onMounted(async () => {
1719
const head = await fetchHead()
1820
if (head) appStore.lastHead = head
21+
22+
enumStore.init()
1923
2024
Socket.init()
21-
25+
2226
window.onbeforeunload = function () {
2327
Socket.close()
2428
}
@@ -33,6 +37,7 @@ onMounted(async () => {
3337
<div id="tooltip" />
3438
<div id="modal" />
3539
<div id="dropdown" />
40+
<div id="popover" />
3641

3742
<ClientOnly>
3843
<ModalsManager />

‎assets/icons.json‎

Lines changed: 8 additions & 1 deletion
Large diffs are not rendered by default.

‎components/Feed.vue‎

Lines changed: 192 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
<script setup>
2+
/** Vendor */
3+
import { DateTime } from "luxon"
4+
5+
/** Services */
6+
import { comma, formatBytes, abbreviate } from "@/services/utils"
7+
8+
/** UI */
9+
import Tooltip from "@/components/ui/Tooltip.vue"
10+
11+
/** API */
12+
// import { fetchPriceSeries } from "@/services/api/stats"
13+
14+
/** Store */
15+
import { useAppStore } from "@/store/app"
16+
const appStore = useAppStore()
17+
18+
const head = computed(() => appStore.lastHead)
19+
20+
</script>
21+
22+
<template>
23+
<Flex tag="section" justify="center" wide :class="$style.wrapper">
24+
<Flex align="center" justify="center" gap="24" wide :class="$style.container">
25+
<Flex align="center" gap="20" :class="$style.stats">
26+
<Tooltip>
27+
<Flex align="center" gap="6" :class="$style.stat">
28+
<Icon name="tx" size="12" color="secondary" :class="$style.icon" />
29+
<Flex align="center" gap="4">
30+
<Text size="12" weight="500" color="tertiary" noWrap :class="$style.key">Total Txs:</Text>
31+
32+
<Text v-if="head.total_tx" size="12" weight="600" noWrap :class="$style.value">{{ abbreviate(head.total_tx) }}</Text>
33+
<Skeleton v-else w="20" h="12" />
34+
</Flex>
35+
</Flex>
36+
37+
<template #content>
38+
{{ comma(head.total_tx) }}
39+
</template>
40+
</Tooltip>
41+
42+
<div :class="$style.dot" />
43+
44+
<Tooltip disabled>
45+
<Flex align="center" gap="6" :class="$style.stat">
46+
<Icon name="account" size="12" color="secondary" :class="$style.icon" />
47+
<Flex align="center" gap="4">
48+
<Text size="12" weight="500" color="tertiary" noWrap :class="$style.key">Total Accounts:</Text>
49+
50+
<Text v-if="head.total_accounts" size="12" weight="600" noWrap :class="$style.value">
51+
{{ abbreviate(head.total_accounts) }}
52+
</Text>
53+
<Skeleton v-else w="20" h="12" />
54+
</Flex>
55+
</Flex>
56+
57+
<template #content> {{ comma(head.total_accounts) }} </template>
58+
</Tooltip>
59+
60+
<div :class="$style.dot" />
61+
62+
<Tooltip disabled>
63+
<Flex align="center" gap="6" :class="$style.stat">
64+
<Icon name="rollup" size="12" color="secondary" :class="$style.icon" />
65+
<Flex align="center" gap="4">
66+
<Text size="12" weight="500" color="tertiary" noWrap :class="$style.key">Total Rollups:</Text>
67+
68+
<Text v-if="head.total_rollups" size="12" weight="600" noWrap :class="$style.value">
69+
{{ abbreviate(head.total_rollups) }}
70+
</Text>
71+
<Skeleton v-else w="20" h="12" />
72+
</Flex>
73+
</Flex>
74+
75+
<template #content> {{ comma(head.total_rollups) }} </template>
76+
</Tooltip>
77+
78+
<div :class="$style.dot" />
79+
80+
<Tooltip disabled>
81+
<Flex align="center" gap="6" :class="$style.stat">
82+
<Icon name="bridge" size="12" color="secondary" :class="$style.icon" />
83+
<Flex align="center" gap="4">
84+
<Text size="12" weight="500" color="tertiary" noWrap :class="$style.key">Total Bridges:</Text>
85+
86+
<Text v-if="head.total_bridges" size="12" weight="600" noWrap :class="$style.value">
87+
{{ abbreviate(head.total_bridges) }}
88+
</Text>
89+
<Skeleton v-else w="20" h="12" />
90+
</Flex>
91+
</Flex>
92+
93+
<template #content> {{ comma(head.total_bridges) }} </template>
94+
</Tooltip>
95+
96+
<div :class="$style.dot" />
97+
98+
<Tooltip>
99+
<Flex align="center" gap="6" :class="$style.stat">
100+
<Icon name="folder" size="12" color="secondary" :class="$style.icon" />
101+
<Flex align="center" gap="4">
102+
<Text size="12" weight="500" color="tertiary" noWrap :class="$style.key">Total Bytes Pushed:</Text>
103+
104+
<Text v-if="head.total_bytes" size="12" weight="600" noWrap :class="$style.value">
105+
{{ formatBytes(head.total_bytes) }}
106+
</Text>
107+
<Skeleton v-else w="20" h="12" />
108+
</Flex>
109+
</Flex>
110+
111+
<template #content> {{ `${comma(head.total_bytes)} Bytes` }} </template>
112+
</Tooltip>
113+
</Flex>
114+
</Flex>
115+
</Flex>
116+
</template>
117+
118+
<style module>
119+
.wrapper {
120+
height: 32px;
121+
122+
border-bottom: 1px solid var(--op-5);
123+
124+
background: var(--feed-background);
125+
}
126+
127+
.container {
128+
max-width: var(--base-width);
129+
height: 100%;
130+
131+
margin: 0 24px;
132+
133+
&::-webkit-scrollbar {
134+
display: none;
135+
}
136+
}
137+
138+
.dot {
139+
width: 4px;
140+
height: 4px;
141+
background-color: var(--op-10);
142+
border-radius: 50%;
143+
}
144+
145+
.key,
146+
.value,
147+
.icon {
148+
transition: all 0.2s ease;
149+
}
150+
151+
.value {
152+
color: var(--op-40);
153+
}
154+
155+
.stat:hover {
156+
.icon {
157+
fill: var(--txt-primary);
158+
}
159+
160+
.key {
161+
color: var(--txt-secondary);
162+
}
163+
164+
.value {
165+
color: var(--txt-secondary);
166+
}
167+
}
168+
169+
@media (max-width: 900px) {
170+
.wrapper {
171+
height: initial;
172+
173+
padding: 12px 0;
174+
}
175+
176+
.container {
177+
flex-direction: column;
178+
}
179+
180+
.stats {
181+
width: 100%;
182+
justify-content: center;
183+
flex-wrap: wrap;
184+
}
185+
}
186+
187+
@media (max-width: 500px) {
188+
.container {
189+
margin: 0 12px;
190+
}
191+
}
192+
</style>

0 commit comments

Comments
 (0)