Skip to content

Commit 365ede8

Browse files
xdeqxdeq
committed
temp widget
1 parent 0020b19 commit 365ede8

File tree

3 files changed

+142
-34
lines changed

3 files changed

+142
-34
lines changed

‎components/widgets/GasWidget.vue

Lines changed: 0 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,3 @@
1-
<script setup>
2-
/** API */
3-
import { fetchSummary } from "@/services/api/stats"
4-
5-
const totalValidators = ref(0)
6-
7-
onMounted(async () => {
8-
const data = await fetchSummary({ table: "validator", func: "count" })
9-
totalValidators.value = data
10-
})
11-
</script>
12-
131
<template>
142
<Flex direction="column" gap="20" :class="$style.wrapper">
153
<Flex align="center" justify="between">
@@ -35,24 +23,4 @@ onMounted(async () => {
3523
3624
padding: 12px;
3725
}
38-
39-
.bar {
40-
width: 100%;
41-
height: 14px;
42-
43-
border-radius: 4px;
44-
background: var(--op-5);
45-
border: 1px solid var(--op-5);
46-
overflow: hidden;
47-
48-
margin-top: 16px;
49-
}
50-
51-
.fill {
52-
height: 100%;
53-
54-
background: var(--neutral-green);
55-
56-
transition: width 1s ease;
57-
}
5826
</style>

‎components/widgets/TemporaryWidget.vue

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
<script setup>
2+
/** API */
3+
import { fetchSummary } from "@/services/api/stats"
4+
import { fetchAddressesCount } from "@/services/api/address"
5+
6+
/** Services */
7+
import { abbreviate } from "@/services/utils"
8+
9+
const totalAccounts = ref(0)
10+
const totalValidators = ref(0)
11+
12+
const { data } = await fetchAddressesCount()
13+
totalAccounts.value = data.value
14+
15+
onMounted(async () => {
16+
const data = await fetchSummary({ table: "validator", func: "count" })
17+
totalValidators.value = data
18+
})
19+
</script>
20+
21+
<template>
22+
<Flex direction="column" wide :class="$style.wrapper">
23+
<Flex direction="column" gap="20" :class="$style.top">
24+
<Text size="16" weight="600" color="primary">People</Text>
25+
26+
<Flex direction="column" gap="6">
27+
<Text size="40" weight="600" color="primary" :class="[$style.ds_font, $style.tpm_num]">
28+
{{ abbreviate(totalAccounts) }}
29+
</Text>
30+
<Text size="16" weight="700" color="tertiary" :class="$style.ds_font">Accounts</Text>
31+
</Flex>
32+
</Flex>
33+
34+
<Flex direction="column" justify="between" gap="16" :class="$style.bottom">
35+
<Flex align="center" gap="6">
36+
<Icon name="addresses" size="12" color="secondary" />
37+
<Text size="13" weight="600" height="110" color="secondary">Validators</Text>
38+
</Flex>
39+
40+
<Flex gap="2" :class="$style.bars">
41+
<div v-for="item in 10" :class="[$style.bar, (100 * 100) / totalValidators > item * 10 && $style.active]" />
42+
</Flex>
43+
44+
<Flex align="center" justify="between">
45+
<Text size="12" weight="600" color="tertiary"> Active Validators </Text>
46+
<Text size="16" weight="600" color="secondary" :class="$style.ds_font">100</Text>
47+
</Flex>
48+
</Flex>
49+
</Flex>
50+
</template>
51+
52+
<style module>
53+
.wrapper {
54+
background: var(--card-background);
55+
border-radius: 12px;
56+
overflow: hidden;
57+
}
58+
59+
.top {
60+
padding: 16px 16px 20px 16px;
61+
}
62+
63+
.tpm_num {
64+
background: -webkit-linear-gradient(var(--txt-primary), var(--txt-tertiary));
65+
background-clip: text;
66+
-webkit-background-clip: text;
67+
-webkit-text-fill-color: transparent;
68+
}
69+
70+
.ds_font {
71+
font-family: "DS";
72+
}
73+
74+
.bottom {
75+
height: 100%;
76+
77+
background: var(--network-widget-background);
78+
border-top: 2px solid var(--op-5);
79+
80+
padding: 20px 16px;
81+
}
82+
83+
.bars {
84+
width: fit-content;
85+
height: 20px;
86+
87+
border-radius: 5px;
88+
border: 1px solid var(--txt-secondary);
89+
90+
padding: 2px;
91+
92+
.bar {
93+
min-width: 16px;
94+
height: 14px;
95+
96+
background: linear-gradient(var(--txt-primary), var(--txt-support));
97+
border-radius: 2px;
98+
opacity: 0.2;
99+
100+
transition: all 0.5s ease;
101+
102+
&.active {
103+
background: linear-gradient(var(--txt-primary), var(--txt-support));
104+
opacity: 1;
105+
}
106+
}
107+
}
108+
109+
@media (max-width: 1100px) {
110+
.wrapper {
111+
flex-direction: row;
112+
}
113+
114+
.top {
115+
flex: 1;
116+
}
117+
118+
.bottom {
119+
height: auto;
120+
121+
border-top: initial;
122+
border-left: 2px solid var(--op-5);
123+
}
124+
}
125+
126+
@media (max-width: 420px) {
127+
.wrapper {
128+
flex-direction: column;
129+
}
130+
131+
.top {
132+
flex: initial;
133+
}
134+
135+
.bottom {
136+
border-top: 2px solid var(--op-5);
137+
border-left: initial;
138+
}
139+
}
140+
</style>

‎components/widgets/Widgets.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
/** Components: Widgets */
33
import BlockWidget from "./BlockWidget.vue"
44
import BlobsWidget from "./BlobsWidget.vue"
5-
import NetworkWidget from "./NetworkWidget.vue"
5+
import TemporaryWidget from "./TemporaryWidget.vue"
66
import TransactionsWidget from "./TransactionsWidget.vue"
77
import GasWidget from "./GasWidget.vue"
88
@@ -22,7 +22,7 @@ onBeforeMount(() => {
2222
<BlobsWidget />
2323
</Flex>
2424

25-
<NetworkWidget />
25+
<TemporaryWidget />
2626

2727
<Flex direction="column" gap="20" wide :class="$style.column">
2828
<TransactionsWidget />

0 commit comments

Comments
 (0)