Skip to content

Commit c746a5b

Browse files
GusevPMGusevPM
authored
Merge pull request #170 from celenium-io/dev
Ref upgrades, fix namespace's blobs fetching
2 parents a053f02 + 15dd0fb commit c746a5b

8 files changed

Lines changed: 279 additions & 47 deletions

File tree

‎components/modules/upgrade/UpgradeOverview.vue‎

Lines changed: 48 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -154,8 +154,8 @@ onMounted(() => {
154154
<div v-for="dot in 12" class="dot" />
155155
156156
<Text size="12" weight="600" color="secondary" align="right">
157-
{{ upgrade.end_time
158-
? DateTime.fromISO(upgrade.end_time).setLocale("en").toLocaleString(DateTime.DATE_MED)
157+
{{ upgrade.applied_at
158+
? DateTime.fromISO(upgrade.applied_at).setLocale("en").toLocaleString(DateTime.DATE_MED)
159159
: 'In progress'
160160
}}
161161
</Text>
@@ -173,13 +173,13 @@ onMounted(() => {
173173
<Flex direction="column" gap="10" :class="$style.key_value">
174174
<Text size="12" weight="600" color="secondary">Status</Text>
175175
176-
<Flex v-if="upgrade.end_time" align="center" gap="6">
176+
<Flex v-if="upgrade.status === 'applied'" align="center" gap="6">
177177
<Icon name="check-circle" size="14" color="brand" />
178178
<Text size="13" weight="600" color="primary">Applied</Text>
179179
</Flex>
180-
<Flex v-else-if="upgrade.votedShare > 83.3" align="center" gap="6">
180+
<Flex v-else-if="upgrade.status === 'waiting_upgrade'" align="center" gap="6">
181181
<Icon name="zap-circle" size="14" color="brand" />
182-
<Text size="13" weight="600" color="primary">Ready for Upgrade</Text>
182+
<Text size="13" weight="600" color="primary">Waiting Upgrade</Text>
183183
</Flex>
184184
<Flex v-else align="center" gap="6">
185185
<Icon name="zap-circle" size="14" color="tertiary" />
@@ -201,6 +201,28 @@ onMounted(() => {
201201
</NuxtLink>
202202
</Flex>
203203
204+
<Flex direction="column" gap="6" :class="$style.key_value">
205+
<Text size="13" weight="600" color="primary"> {{ upgrade.title }} </Text>
206+
207+
<Flex direction="column" gap="4">
208+
<Text size="12" height="120" color="secondary">
209+
{{ upgrade.description }}
210+
</Text>
211+
212+
<Text v-if="upgrade.link" size="12" height="120" color="secondary">
213+
For more information, see the
214+
<Text
215+
@click="navigateTo(upgrade.link, {external: true, open: {target: '_blank'}})"
216+
color="primary"
217+
:class="$style.link"
218+
>
219+
docs
220+
</Text>
221+
.
222+
</Text>
223+
</Flex>
224+
</Flex>
225+
204226
<Flex justify="center" direction="column" gap="10" wide>
205227
<Flex align="center" justify="between" wide>
206228
<Tooltip position="start">
@@ -226,6 +248,7 @@ onMounted(() => {
226248
<Text :color="upgrade.votedShare > 83.3 ? 'brand' : 'tertiary'"> {{ roundTo(upgrade.votedShare, 2) }}% </Text> / 83.3%
227249
</Text>
228250
</Flex>
251+
229252
<Flex align="center" gap="4" :class="$style.voting_wrapper">
230253
<div :style="{ left: `83.33%` }" :class="$style.threshold" />
231254
@@ -250,7 +273,7 @@ onMounted(() => {
250273
/>
251274
252275
<template #content>
253-
{{ upgrade.end_height ? "At the time of the upgrade." : "The current value of the total stake." }}
276+
{{ upgrade.end_height ? "At the time of the successful upgrade transaction." : "The current value of the total stake." }}
254277
</template>
255278
</Tooltip>
256279
</Flex>
@@ -324,9 +347,9 @@ onMounted(() => {
324347
</Flex>
325348
</Flex>
326349
327-
<Flex v-if="upgrade.end_height" align="center" justify="between">
350+
<Flex v-if="upgrade.applied_at_level" align="center" justify="between">
328351
<Flex align="center" gap="6">
329-
<Text size="12" weight="600" color="tertiary">End Block</Text>
352+
<Text size="12" weight="600" color="tertiary">Apply Block</Text>
330353
331354
<Tooltip>
332355
<Icon
@@ -336,22 +359,22 @@ onMounted(() => {
336359
/>
337360
338361
<template #content>
339-
When a successful TryUpgrade transaction was sent.
362+
When the network was updated to a new version.
340363
</template>
341364
</Tooltip>
342365
</Flex>
343366
344-
<NuxtLink :to="`/block/${upgrade.end_height}`" target="_blank">
367+
<NuxtLink :to="`/block/${upgrade.applied_at_level}`" target="_blank">
345368
<Flex align="center" gap="6">
346-
<Text size="12" weight="600" color="secondary">{{ comma(upgrade.end_height) }}</Text>
369+
<Text size="12" weight="600" color="secondary">{{ comma(upgrade.applied_at_level) }}</Text>
347370
<Icon name="arrow-narrow-up-right" size="12" color="tertiary" />
348371
</Flex>
349372
</NuxtLink>
350373
</Flex>
351374
352-
<Flex v-if="upgrade.end_time" align="center" justify="between">
375+
<Flex v-if="upgrade.applied_at" align="center" justify="between">
353376
<Flex align="center" gap="6">
354-
<Text size="12" weight="600" color="tertiary">End Time</Text>
377+
<Text size="12" weight="600" color="tertiary">Apply Time</Text>
355378
356379
<Tooltip>
357380
<Icon
@@ -361,17 +384,17 @@ onMounted(() => {
361384
/>
362385
363386
<template #content>
364-
When a successful TryUpgrade transaction was sent.
387+
When the network was updated to a new version.
365388
</template>
366389
</Tooltip>
367390
</Flex>
368391
369392
<Flex gap="6">
370393
<Text size="12" weight="600" color="secondary">
371-
{{ DateTime.fromISO(upgrade.end_time).toRelative({ locale: "en", style: "short" }) }}
394+
{{ DateTime.fromISO(upgrade.applied_at).toRelative({ locale: "en", style: "short" }) }}
372395
</Text>
373396
<Text size="12" weight="500" color="tertiary">
374-
{{ DateTime.fromISO(upgrade.end_time).setLocale("en").toFormat("LLL d, t") }}
397+
{{ DateTime.fromISO(upgrade.applied_at).setLocale("en").toFormat("LLL d, t") }}
375398
</Text>
376399
</Flex>
377400
</Flex>
@@ -388,7 +411,7 @@ onMounted(() => {
388411
/>
389412
390413
<template #content>
391-
Address that sent a successful TryUpgrade transaction.
414+
Address that sent a successful upgrade transaction.
392415
</template>
393416
</Tooltip>
394417
</Flex>
@@ -534,6 +557,14 @@ onMounted(() => {
534557
}
535558
}
536559
560+
.link {
561+
cursor: pointer;
562+
563+
&:hover {
564+
color: var(--brand);
565+
}
566+
}
567+
537568
.txs_wrapper {
538569
min-width: 0;
539570
}

‎components/widgets/GlobalUpdatesWidget.vue‎

Lines changed: 94 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
<script setup>
2+
/** API */
3+
import { fetchValidatorsUpgradeByVersion } from "@/services/api/validator"
4+
25
/** Components */
36
import TransactionsWidget from "./TransactionsWidget.vue"
47
58
/** UI */
69
import Tooltip from "@/components/ui/Tooltip.vue"
710
811
/** Services */
9-
import { capitilize, comma } from "@/services/utils"
12+
import { capitilize, capitalizeAndReplace, comma, roundTo } from "@/services/utils"
1013
1114
/** Stores */
1215
import { useAppStore } from "@/store/app.store"
@@ -45,7 +48,7 @@ function handleClick() {
4548
navigateTo(`/block/${showingUpdate.value?.block}`)
4649
break;
4750
case "node_upgrade":
48-
navigateTo(`/block/${showingUpdate.value?.block}`)
51+
navigateTo(`/upgrade/${showingUpdate.value?.version}`)
4952
break;
5053
5154
default:
@@ -67,6 +70,16 @@ watch(
6770
}
6871
}
6972
)
73+
watch(
74+
() => showingUpdate.value,
75+
async () => {
76+
if (showingUpdate.value.kind === "node_upgrade") {
77+
const { data } = await fetchValidatorsUpgradeByVersion(showingUpdate.value?.version)
78+
showingUpdate.value.status = data.value?.status
79+
showingUpdate.value.votedShare = parseFloat(data.value?.voted_power) * 100 / parseFloat(data.value?.voting_power)
80+
}
81+
}
82+
)
7083
</script>
7184
7285
<template>
@@ -175,14 +188,56 @@ watch(
175188
</Flex>
176189
</Flex>
177190
178-
<Flex v-else-if="showingUpdate?.kind" justify="between" direction="column" gap="20" style="padding-top: 12px;">
179-
<Flex direction="column" gap="6" wide>
180-
<Text size="12" weight="600" color="primary" :class="$style.title"> {{ showingUpdate.title }} </Text>
181-
<Text size="12" weight="500" color="secondary" :class="[$style.description, $style.description_four_lines]"> {{ showingUpdate.description.replace('\n', ' ') }} </Text>
191+
<Flex v-else-if="showingUpdate?.kind === 'node_upgrade'" justify="between" direction="column" gap="12" style="flex: 1;">
192+
<Flex direction="column" gap="16">
193+
<Flex align="center" gap="8" wide>
194+
<Text size="12" weight="500" color="tertiary">Status</Text>
195+
<Text v-if="showingUpdate?.status" size="12" weight="600" color="brand"> {{ capitalizeAndReplace(showingUpdate?.status, "_") }} </Text>
196+
</Flex>
197+
198+
<Flex direction="column" gap="6" wide>
199+
<Text size="12" weight="600" color="primary" :class="$style.title"> {{ showingUpdate?.title }} </Text>
200+
<Text size="12" weight="500" color="secondary" :class="$style.description"> {{ showingUpdate?.description }} </Text>
201+
</Flex>
182202
</Flex>
183203
184-
<Flex align="center" justify="end" wide>
185-
<Text size="11" weight="600" color="tertiary"> {{ `Expected on block ${comma(showingUpdate.block)}` }} </Text>
204+
<Flex direction="column" justify="between" gap="8" wide>
205+
<Flex align="center" justify="between" wide>
206+
<Tooltip position="start">
207+
<Flex align="center" gap="6">
208+
<Text size="12" weight="600" color="secondary"> Upgrade progress </Text>
209+
<Icon
210+
name="warning"
211+
size="12"
212+
color="secondary"
213+
/>
214+
</Flex>
215+
216+
<template #content>
217+
<Flex wide>
218+
<Text size="12" color="secondary" style="width: 300px; line-height: 1.2; white-space: normal; overflow-wrap: anywhere;">
219+
The upgrade requires at least 5/6 (83.33%) of the total stake to be voted power.
220+
</Text>
221+
</Flex>
222+
</template>
223+
</Tooltip>
224+
225+
<Text size="12" weight="600" color="primary">
226+
<Text :color="showingUpdate?.votedShare > 83.3 ? 'brand' : 'tertiary'"> {{ roundTo(showingUpdate?.votedShare, 2) }}% </Text> / 83.3%
227+
</Text>
228+
</Flex>
229+
230+
<Flex align="center" gap="4" :class="$style.signaling_wrapper">
231+
<div :style="{ left: `83.33%` }" :class="$style.signaling_threshold" />
232+
233+
<div
234+
:style="{
235+
background: 'var(--brand)',
236+
width: `${Math.max(2, roundTo(showingUpdate?.votedShare, 0, 'ceil'))}%`
237+
}"
238+
:class="$style.signaling_bar"
239+
/>
240+
</Flex>
186241
</Flex>
187242
</Flex>
188243
</Flex>
@@ -260,4 +315,35 @@ watch(
260315
261316
border-radius: 50px;
262317
}
318+
319+
.signaling_wrapper {
320+
position: relative;
321+
width: 100%;
322+
323+
border-radius: 50px;
324+
background: var(--op-8);
325+
326+
padding: 4px;
327+
}
328+
329+
.signaling_threshold {
330+
position: absolute;
331+
top: 0;
332+
333+
width: 4px;
334+
height: 12px;
335+
336+
border-radius: 50px;
337+
background: #fff;
338+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
339+
z-index: 1;
340+
341+
transform: translateX(-50%);
342+
}
343+
344+
.signaling_bar {
345+
height: 4px;
346+
347+
border-radius: 50px;
348+
}
263349
</style>

‎layouts/default.vue‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
11
<script setup>
22
/** Components */
33
import AdvBanner from "@/components/shared/AdvBanner.vue"
4-
5-
/** Services */
6-
import { getNetworkName } from "@/services/utils/general"
7-
84
</script>
95

106
<template>

‎pages/upgrade/[version].vue‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@ import { isValidId } from "@/services/utils"
99
import { fetchHead } from "@/services/api/main"
1010
import { fetchValidatorsUpgradeByVersion } from "@/services/api/validator"
1111
12+
/** Constants */
13+
import { getNodeUpgrades } from "@/services/constants/updates"
14+
1215
/** Store */
1316
import { useCacheStore } from "@/store/cache.store"
1417
const cacheStore = useCacheStore()
@@ -28,8 +31,16 @@ if (isValidId(route.params.version, "upgrade_version")) {
2831
upgrade.value.voting_power = head.total_voting_power
2932
}
3033
}
34+
35+
const _upgrade = getNodeUpgrades(upgrade.value?.version)?.at(0)
36+
if (_upgrade) {
37+
upgrade.value.title = _upgrade.title
38+
upgrade.value.description = _upgrade.description
39+
upgrade.value.link = _upgrade.link
40+
}
3141
3242
upgrade.value.votedShare = parseFloat(upgrade.value.voted_power) * 100 / parseFloat(upgrade.value.voting_power)
43+
3344
cacheStore.current.upgrade = upgrade.value
3445
} else {
3546
throw createError({ statusCode: 404, statusMessage: `Upgrade to version ${route.params.version} not found` })

‎pages/upgrades.vue‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -211,13 +211,13 @@ onMounted(() => {
211211
</td>
212212
<td>
213213
<NuxtLink :to="`/upgrade/${u.version}`">
214-
<Flex v-if="u.end_time" align="center" gap="6">
214+
<Flex v-if="u.status === 'applied'" align="center" gap="6">
215215
<Icon name="check-circle" size="14" color="brand" />
216216
<Text size="13" weight="600" color="primary">Applied</Text>
217217
</Flex>
218-
<Flex v-else-if="getVotingShare(u) > 83.3" align="center" gap="6">
218+
<Flex v-else-if="u.status === 'waiting_upgrade'" align="center" gap="6">
219219
<Icon name="zap-circle" size="14" color="brand" />
220-
<Text size="13" weight="600" color="primary">Ready for upgrade</Text>
220+
<Text size="13" weight="600" color="primary">Waiting Upgrade</Text>
221221
</Flex>
222222
<Flex v-else align="center" gap="6">
223223
<Icon name="zap-circle" size="14" color="tertiary" />
@@ -276,13 +276,13 @@ onMounted(() => {
276276
</NuxtLink>
277277
</td>
278278
<td>
279-
<NuxtLink v-if="u.end_time" :to="`/upgrade/${u.version}`">
279+
<NuxtLink v-if="u.applied_at" :to="`/upgrade/${u.version}`">
280280
<Flex justify="center" direction="column" gap="4">
281281
<Text size="12" weight="600" color="primary">
282-
{{ DateTime.fromISO(u.end_time).toRelative({ locale: "en", style: "short" }) }}
282+
{{ DateTime.fromISO(u.applied_at).toRelative({ locale: "en", style: "short" }) }}
283283
</Text>
284284
<Text size="12" weight="500" color="tertiary">
285-
{{ DateTime.fromISO(u.end_time).setLocale("en").toFormat("LLL d, t") }}
285+
{{ DateTime.fromISO(u.applied_at).setLocale("en").toFormat("LLL d, t") }}
286286
</Text>
287287
</Flex>
288288
</NuxtLink>

‎services/api/namespace.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,8 +68,6 @@ export const fetchNamespaceBlobs = async ({ id, version, limit, offset }) => {
6868
try {
6969
const url = new URL(`${useServerURL()}/namespace/${id}/${version}/blobs`)
7070

71-
url.searchParams.append("sort_by", "time")
72-
7371
if (limit) url.searchParams.append("limit", limit)
7472
if (offset) url.searchParams.append("offset", offset)
7573

0 commit comments

Comments
 (0)