Merge pull request #118 from celenium-io/dev

Hot fix ssr

Author: GusevPM

components/data/LatestPFBTable.vue

@@ -13,31 +13,16 @@ import { useServerURL } from "@/services/config"
 import { comma, space, splitAddress, tia } from "@/services/utils"
 
 /** API */
-// import { fetchLatestPFBs } from "@/services/api/tx"
+import { fetchLatestPFBs } from "@/services/api/tx"
 
 const router = useRouter()
 
 const isLoading = ref(true)
 const pfbs = ref([])
 
-const fetchLatestPFBs = async (height) => {
-	try {
-		return await $fetch(`${useServerURL()}/tx?msg_type=MsgPayForBlobs&sort=desc&limit=5`)
-	} catch (error) {
-		console.error(error)
-	}
-}
-
-// pfbs.value = await fetchLatestPFBs()
-// pfbs.value = data.value
-
-onBeforeMount(async() => {
-	isLoading.value = true
-
-	pfbs.value = await fetchLatestPFBs()
-
-	isLoading.value = false
-})
+const { data } = await fetchLatestPFBs()
+pfbs.value = data.value
+isLoading.value = false
 
 </script>
 

components/data/RecentNamespacesTable.vue

@@ -12,7 +12,7 @@ import { useServerURL } from "@/services/config"
 import { comma, space, formatBytes, getNamespaceID } from "@/services/utils"
 
 /** API */
-// import { fetchNamespaces } from "@/services/api/namespace"
+import { fetchNamespaces } from "@/services/api/namespace"
 
 const router = useRouter()
 
@@ -24,36 +24,16 @@ const sort = reactive({
 	dir: "desc",
 })
 
-const fetchNamespaces = async ({ limit, offset, sort, sort_by }) => {
-	try {
-		const url = new URL(`${useServerURL()}/namespace`)
-
-		if (limit) url.searchParams.append("limit", limit)
-		if (offset) url.searchParams.append("offset", offset)
-		if (sort) url.searchParams.append("sort", sort)
-		if (sort_by) url.searchParams.append("sort_by", sort_by)
-
-		
-		return await $fetch(url.href)
-	} catch (error) {
-		console.error(error)
-	}
-}
-
 const getNamespaces = async () => {
 	isLoading.value = true
 
-	namespaces.value = await fetchNamespaces({ limit: 5, sort: sort.dir, sort_by: sort.by })
-	// namespaces.value = data.value
+	const { data } = await fetchNamespaces({ limit: 5, sort: sort.dir, sort_by: sort.by })
+	namespaces.value = data.value
 
 	isLoading.value = false
 }
 
-// await getNamespaces()
-
-onBeforeMount(async() => {
-	await getNamespaces()
-})
+await getNamespaces()
 
 const handleSort = async (by) => {
 	switch (sort.dir) {

components/widgets/StakingWidget.vue

@@ -7,7 +7,7 @@ import { useServerURL } from "@/services/config"
 import { abbreviate, capitilize, numToPercent, shareOfTotal } from "@/services/utils"
 
 /** API */
-// import { fetchValidatorsCount } from "@/services/api/validator"
+import { fetchValidatorsCount } from "@/services/api/validator"
 
 /** Store */
 import { useAppStore } from "@/store/app"
@@ -27,7 +27,7 @@ const totalVotingPowerUSD = computed(() => totalVotingPower.value * currentPrice
 
 const bondedShare = computed(() => shareOfTotal(lastHead?.value.total_voting_power * 1_000_000, lastHead?.value.total_supply, 2))
 
-const isRefetching = ref(false)
+const isRefetching = ref(true)
 const totalValidators = ref(0)
 const activeValidators = ref(0)
 const validatorsGraph = ref([
@@ -51,26 +51,16 @@ const validatorsGraph = ref([
 	},
 ])
 
-const fetchValidatorsCount = async () => {
-	try {
-		const url = new URL(`${useServerURL()}/validators/count`)
-
-		return await $fetch(url.href)
-	} catch (error) {
-		console.error(error)
-	}
-}
-
 const getValidatorsStats = async () => {
 	isRefetching.value = true
 
-	const data = await fetchValidatorsCount()
-	if (data?.total) {
-		totalValidators.value = data.total
-		activeValidators.value = data.active
+	const { data } = await fetchValidatorsCount()
+	if (data.value?.total) {
+		totalValidators.value = data.value.total
+		activeValidators.value = data.value.active
 
 		for (let item of validatorsGraph.value) {
-			let value = data[item.title]
+			let value = data.value[item.title]
 
 			if (value) {
 				item.count = value
@@ -82,11 +72,7 @@ const getValidatorsStats = async () => {
 	isRefetching.value = false
 }
 
-// await getValidatorsStats()
-
-onBeforeMount(async() => {
-	await getValidatorsStats()
-})
+await getValidatorsStats()
 
 onMounted( async () => {
 	wrapperWidth.value = wrapperEl.value.wrapper.offsetWidth

nuxt.config.ts

@@ -144,7 +144,7 @@ export default defineNuxtConfig({
 		plugins: [wasm(), topLevelAwait(), nodePolyfills()],
 		worker: {
 			format: "es",
-			plugins: [wasm(), topLevelAwait()],
+			plugins: () => [wasm(), topLevelAwait()],
 		},
 	},
 })

package.json

@@ -4,6 +4,7 @@
 	"packageManager": "pnpm@8.7.4",
 	"homepage": "https://celenium.io/",
 	"license": "MIT",
+	"type": "module",
 	"scripts": {
 		"build": "nuxt build",
 		"dev": "cross-env PORT=9090 nuxt dev",

pages/blobstream.vue

@@ -181,8 +181,8 @@ const handleViewCommitment = (commitment) => {
 	modalsStore.open("commitment")
 }
 
-getNetworks()
-getCommitments()
+await getNetworks()
+await getCommitments()
 </script>
 
 <template>

pages/index.vue

@@ -79,20 +79,18 @@ onBeforeMount(async () => {
 </script>
 
 <template>
-	<!-- <ClientOnly> -->
-		<Flex direction="column" wide :class="$style.wrapper">
-			<Widgets :class="$style.widgets" />
+	<Flex direction="column" wide :class="$style.wrapper">
+		<Widgets :class="$style.widgets" />
 
-			<Flex direction="column" gap="40" :class="$style.main">
-				<Flex gap="20" :class="$style.small_tables">
-					<RecentNamespacesTable />
-					<LatestPFBTable />
-				</Flex>
-
-				<BlocksTimelineTable v-if="appStore.lastHead && appStore.latestBlocks.length" />
+		<Flex direction="column" gap="40" :class="$style.main">
+			<Flex gap="20" :class="$style.small_tables">
+				<RecentNamespacesTable />
+				<LatestPFBTable />
 			</Flex>
+
+			<BlocksTimelineTable v-if="appStore.lastHead && appStore.latestBlocks.length" />
 		</Flex>
-	<!-- </ClientOnly> -->
+	</Flex>
 </template>
 
 <style module>

pages/txs.vue

@@ -310,9 +310,10 @@ const getTransactions = async () => {
 		from: filters.from,
 		to: filters.to,
 	})
+	
 	transactions.value = data.value
 
-	handleNextCondition.value = transactions.value.length < limit.value
+	handleNextCondition.value = transactions.value?.length < limit.value
 	isLoaded.value = true
 	isRefetching.value = false
 }
@@ -325,6 +326,10 @@ onBeforeMount(() => {
 	}
 })
 
+// onMounted(() => {
+// 	getTransactions()
+// })
+
 /** Refetch transactions */
 watch(
 	() => route.query,
@@ -585,7 +590,7 @@ const handleNext = () => {
 			</Flex>
 
 			<Flex direction="column" gap="16" wide :class="[$style.table, isRefetching && $style.disabled]">
-				<div v-if="transactions.length" :class="$style.table_scroller">
+				<div v-if="transactions?.length" :class="$style.table_scroller">
 					<table>
 						<thead>
 							<tr>