Skip to content

Commit 6c36d7d

Browse files
GusevPMGusevPM
committed
Fix data loading on index page
1 parent 3ec96fa commit 6c36d7d

File tree

4 files changed

+91
-40
lines changed

4 files changed

+91
-40
lines changed

‎components/data/LatestPFBTable.vue‎

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,19 +9,36 @@ import Spinner from "@/components/ui/Spinner.vue"
99
import AmountInCurrency from "@/components/AmountInCurrency.vue"
1010
1111
/** Services */
12+
import { useServerURL } from "@/services/config"
1213
import { comma, space, splitAddress, tia } from "@/services/utils"
1314
1415
/** API */
15-
import { fetchLatestPFBs } from "@/services/api/tx"
16+
// import { fetchLatestPFBs } from "@/services/api/tx"
1617
1718
const router = useRouter()
1819
1920
const isLoading = ref(true)
2021
const pfbs = ref([])
2122
22-
const { data } = await fetchLatestPFBs()
23-
pfbs.value = data.value
24-
isLoading.value = false
23+
const fetchLatestPFBs = async (height) => {
24+
try {
25+
return await $fetch(`${useServerURL()}/tx?msg_type=MsgPayForBlobs&sort=desc&limit=5`)
26+
} catch (error) {
27+
console.error(error)
28+
}
29+
}
30+
31+
// pfbs.value = await fetchLatestPFBs()
32+
// pfbs.value = data.value
33+
34+
onBeforeMount(async() => {
35+
isLoading.value = true
36+
37+
pfbs.value = await fetchLatestPFBs()
38+
39+
isLoading.value = false
40+
})
41+
2542
</script>
2643

2744
<template>
@@ -32,7 +49,7 @@ isLoading.value = false
3249
</Flex>
3350

3451
<Flex direction="column" gap="16" :class="$style.pfb_body">
35-
<div v-if="pfbs.length" :class="$style.table_scroller">
52+
<div v-if="pfbs?.length" :class="$style.table_scroller">
3653
<table>
3754
<thead>
3855
<tr>
@@ -120,7 +137,7 @@ isLoading.value = false
120137
</tbody>
121138
</table>
122139
</div>
123-
<Flex v-else-if="isLoading" align="center" justify="center" gap="8" wide>
140+
<Flex v-else-if="isLoading" align="center" justify="center" gap="8" wide :class="$style.empty">
124141
<Spinner size="14" />
125142
<Text size="13" weight="500" color="secondary"> Loading latest PFBs </Text>
126143
</Flex>

‎components/data/RecentNamespacesTable.vue‎

Lines changed: 27 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,11 @@ import Tooltip from "@/components/ui/Tooltip.vue"
88
import Spinner from "@/components/ui/Spinner.vue"
99
1010
/** Services */
11+
import { useServerURL } from "@/services/config"
1112
import { comma, space, formatBytes, getNamespaceID } from "@/services/utils"
1213
1314
/** API */
14-
import { fetchNamespaces } from "@/services/api/namespace"
15+
// import { fetchNamespaces } from "@/services/api/namespace"
1516
1617
const router = useRouter()
1718
@@ -23,16 +24,36 @@ const sort = reactive({
2324
dir: "desc",
2425
})
2526
27+
const fetchNamespaces = async ({ limit, offset, sort, sort_by }) => {
28+
try {
29+
const url = new URL(`${useServerURL()}/namespace`)
30+
31+
if (limit) url.searchParams.append("limit", limit)
32+
if (offset) url.searchParams.append("offset", offset)
33+
if (sort) url.searchParams.append("sort", sort)
34+
if (sort_by) url.searchParams.append("sort_by", sort_by)
35+
36+
37+
return await $fetch(url.href)
38+
} catch (error) {
39+
console.error(error)
40+
}
41+
}
42+
2643
const getNamespaces = async () => {
2744
isLoading.value = true
2845
29-
const { data } = await fetchNamespaces({ limit: 5, sort: sort.dir, sort_by: sort.by })
30-
namespaces.value = data.value
46+
namespaces.value = await fetchNamespaces({ limit: 5, sort: sort.dir, sort_by: sort.by })
47+
// namespaces.value = data.value
3148
3249
isLoading.value = false
3350
}
3451
35-
await getNamespaces()
52+
// await getNamespaces()
53+
54+
onBeforeMount(async() => {
55+
await getNamespaces()
56+
})
3657
3758
const handleSort = async (by) => {
3859
switch (sort.dir) {
@@ -60,7 +81,7 @@ const handleSort = async (by) => {
6081
</Flex>
6182

6283
<Flex direction="column" gap="16" :class="$style.namespaces_body">
63-
<div v-if="namespaces.length" :class="$style.table_scroller">
84+
<div v-if="namespaces?.length" :class="$style.table_scroller">
6485
<table>
6586
<thead>
6687
<tr>
@@ -158,7 +179,7 @@ const handleSort = async (by) => {
158179
</tbody>
159180
</table>
160181
</div>
161-
<Flex v-else-if="isLoading" align="center" justify="center" gap="8" wide>
182+
<Flex v-else-if="isLoading" align="center" justify="center" gap="8" wide :class="$style.empty">
162183
<Spinner size="14" />
163184
<Text size="13" weight="500" color="secondary"> Loading recent namespaces </Text>
164185
</Flex>

‎components/widgets/StakingWidget.vue‎

Lines changed: 30 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,11 @@
33
import Tooltip from "@/components/ui/Tooltip.vue"
44
55
/** Services */
6+
import { useServerURL } from "@/services/config"
67
import { abbreviate, capitilize, numToPercent, shareOfTotal } from "@/services/utils"
78
89
/** API */
9-
import { fetchValidatorsCount } from "@/services/api/validator"
10+
// import { fetchValidatorsCount } from "@/services/api/validator"
1011
1112
/** Store */
1213
import { useAppStore } from "@/store/app"
@@ -29,7 +30,6 @@ const bondedShare = computed(() => shareOfTotal(lastHead?.value.total_voting_pow
2930
const isRefetching = ref(false)
3031
const totalValidators = ref(0)
3132
const activeValidators = ref(0)
32-
const validatorsStats = ref({})
3333
const validatorsGraph = ref([
3434
{
3535
title: "active",
@@ -51,33 +51,44 @@ const validatorsGraph = ref([
5151
},
5252
])
5353
54-
const getValidatorsStats = async () => {
55-
isRefetching.value = true
56-
57-
const { data } = await fetchValidatorsCount()
58-
validatorsStats.value = data.value
54+
const fetchValidatorsCount = async () => {
55+
try {
56+
const url = new URL(`${useServerURL()}/validators/count`)
5957
60-
isRefetching.value = false
58+
return await $fetch(url.href)
59+
} catch (error) {
60+
console.error(error)
61+
}
6162
}
6263
63-
const fillValidatorsGraph = () => {
64-
totalValidators.value = validatorsStats.value["total"]
65-
activeValidators.value = validatorsStats.value["active"]
64+
const getValidatorsStats = async () => {
65+
isRefetching.value = true
66+
67+
const data = await fetchValidatorsCount()
68+
if (data?.total) {
69+
totalValidators.value = data.total
70+
activeValidators.value = data.active
6671
67-
for (let item of validatorsGraph.value) {
68-
let value = validatorsStats.value[item.title]
72+
for (let item of validatorsGraph.value) {
73+
let value = data[item.title]
6974
70-
if (value) {
71-
item.count = value
72-
item.width = ((value / totalValidators.value) * 100).toFixed(2)
75+
if (value) {
76+
item.count = value
77+
item.width = ((value / totalValidators.value) * 100).toFixed(2)
78+
}
7379
}
7480
}
81+
82+
isRefetching.value = false
7583
}
7684
77-
await getValidatorsStats()
78-
fillValidatorsGraph()
85+
// await getValidatorsStats()
86+
87+
onBeforeMount(async() => {
88+
await getValidatorsStats()
89+
})
7990
80-
onMounted(() => {
91+
onMounted( async () => {
8192
wrapperWidth.value = wrapperEl.value.wrapper.offsetWidth
8293
})
8394
</script>

‎pages/index.vue‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -79,18 +79,20 @@ onBeforeMount(async () => {
7979
</script>
8080

8181
<template>
82-
<Flex direction="column" wide :class="$style.wrapper">
83-
<Widgets :class="$style.widgets" />
82+
<!-- <ClientOnly> -->
83+
<Flex direction="column" wide :class="$style.wrapper">
84+
<Widgets :class="$style.widgets" />
8485

85-
<Flex direction="column" gap="40" :class="$style.main">
86-
<Flex gap="20" :class="$style.small_tables">
87-
<RecentNamespacesTable />
88-
<LatestPFBTable />
89-
</Flex>
86+
<Flex direction="column" gap="40" :class="$style.main">
87+
<Flex gap="20" :class="$style.small_tables">
88+
<RecentNamespacesTable />
89+
<LatestPFBTable />
90+
</Flex>
9091

91-
<BlocksTimelineTable v-if="appStore.lastHead && appStore.latestBlocks.length" />
92+
<BlocksTimelineTable v-if="appStore.lastHead && appStore.latestBlocks.length" />
93+
</Flex>
9294
</Flex>
93-
</Flex>
95+
<!-- </ClientOnly> -->
9496
</template>
9597

9698
<style module>

0 commit comments

Comments
 (0)