Change tables and block namespaces request

Author: GusevPM

components/data/BlocksTimeline/BlocksTimelineTable.vue

@@ -10,7 +10,7 @@ import Tooltip from "@/components/ui/Tooltip.vue"
 import { tia, comma, space, formatBytes, getNamespaceID } from "@/services/utils"
 
 /** API */
-import { fetchBlockNamespaces } from "@/services/api/block"
+import { fetchBlockBlobs } from "@/services/api/block"
 import { fetchTransactionsByBlock } from "@/services/api/tx"
 
 /** Store */
@@ -27,7 +27,7 @@ const preview = reactive({
 	transactions: [],
 	pfbs: [],
 
-	isLoadingPfbs: true,
+	isLoadingNamespaces: true,
 })
 
 const autoSelect = ref(true)
@@ -38,7 +38,7 @@ const handleSelectBlock = (b, isUser) => {
 	if (preview.block.height === b.height) return
 
 	preview.block = b
-	preview.pfbs = []
+	preview.namespaces = []
 }
 
 const getTransactionsByBlock = async () => {
@@ -104,7 +104,7 @@ watch(
 	() => preview.block,
 	async () => {
 		if (preview.block.stats.tx_count) {
-			if (preview.block.stats.blobs_size) preview.isLoadingPfbs = true
+			if (preview.block.stats.blobs_size) preview.isLoadingNamespaces = true
 
 			getTransactionsByBlock()
 		}
@@ -115,13 +115,19 @@ watch(
 	() => preview.transactions,
 	async () => {
 		if (preview.block.stats.blobs_size === 0) {
-			preview.isLoadingPfbs = false
+			preview.isLoadingNamespaces = false
 			return
 		}
 
-		const data = await fetchBlockNamespaces({ height: preview.block.height })
-		preview.pfbs = data
-		preview.isLoadingPfbs = false
+		const data = await fetchBlockBlobs({ height: preview.block.height })
+		let namespaces = []
+
+		data.forEach(blob => {
+			namespaces.push(blob.namespace)
+		});
+
+		preview.namespaces = Array.from(new Map(namespaces.map(item => [item.id, item])).values());
+		preview.isLoadingNamespaces = false
 	},
 )
 
@@ -283,7 +289,7 @@ watch(
 								<td>
 									<Flex align="center">
 										<Text size="13" weight="600" color="primary">
-											{{ block.stats.tx_count }}
+											{{ block.stats.blobs_count }}
 										</Text>
 									</Flex>
 								</td>
@@ -460,12 +466,12 @@ watch(
 						<Flex align="center" justify="between">
 							<Text size="12" weight="600" color="tertiary">Namespaces</Text>
 							<Text size="12" weight="600" color="secondary">
-								{{ preview.pfbs?.length > 3 ? "3 /" : "" }} {{ preview.pfbs?.length }}
+								{{ preview.namespaces?.length > 3 ? "3 /" : "" }} {{ preview.namespaces?.length }}
 							</Text>
 						</Flex>
 
 						<Text
-							v-if="preview.isLoadingPfbs"
+							v-if="preview.isLoadingNamespaces"
 							size="12"
 							weight="600"
 							color="tertiary"
@@ -474,27 +480,27 @@ watch(
 						>
 							Loading namespaces..
 						</Text>
-						<Flex v-else-if="preview.pfbs?.length" direction="column" gap="8">
-							<NuxtLink v-for="pfb in preview.pfbs.slice(0, 3)" :to="`/namespace/${pfb.namespace.namespace_id}`">
+						<Flex v-else-if="preview.namespaces?.length" direction="column" gap="8">
+							<NuxtLink v-for="ns in preview.namespaces.slice(0, 3)" :to="`/namespace/${ns.namespace_id}`">
 								<Outline wide height="32" padding="8" radius="6">
 									<Flex align="center" justify="between" wide>
 										<Flex align="center" gap="8">
 											<Icon name="folder" size="12" color="secondary" />
 
 											<Text size="13" weight="600" color="primary" mono>
-												{{ getNamespaceID(pfb.namespace.namespace_id).slice(0, 4) }}
+												{{ getNamespaceID(ns.namespace_id).slice(0, 4) }}
 											</Text>
 
 											<Flex align="center" gap="3">
 												<div v-for="dot in 3" class="dot" />
 											</Flex>
 
 											<Text size="13" weight="600" color="primary" mono>
-												{{ getNamespaceID(pfb.namespace.namespace_id).slice(-4) }}
+												{{ getNamespaceID(ns.namespace_id).slice(-4) }}
 											</Text>
 										</Flex>
 
-										<Text size="12" weight="600" color="tertiary">{{ formatBytes(pfb.namespace.size) }}</Text>
+										<Text size="12" weight="600" color="tertiary">{{ formatBytes(ns.size) }}</Text>
 									</Flex>
 								</Outline>
 							</NuxtLink>

components/data/LatestPFBTable.vue

@@ -8,7 +8,7 @@ import Tooltip from "@/components/ui/Tooltip.vue"
 import Spinner from "@/components/ui/Spinner.vue"
 
 /** Services */
-import { tia, space, comma } from "@/services/utils"
+import { comma, space, splitAddress, tia } from "@/services/utils"
 
 /** API */
 import { fetchLatestPFBs } from "@/services/api/tx"
@@ -37,7 +37,7 @@ isLoading.value = false
 						<tr>
 							<th><Text size="12" weight="600" color="tertiary" noWrap>Hash</Text></th>
 							<th><Text size="12" weight="600" color="tertiary" noWrap>Block Height</Text></th>
-							<th><Text size="12" weight="600" color="tertiary" noWrap>Time</Text></th>
+							<th><Text size="12" weight="600" color="tertiary" noWrap>Signer</Text></th>
 							<th><Text size="12" weight="600" color="tertiary" noWrap>Fee</Text></th>
 						</tr>
 					</thead>
@@ -105,7 +105,7 @@ isLoading.value = false
 								<NuxtLink :to="`/tx/${pfb.hash}`">
 									<Flex align="center">
 										<Text size="12" weight="600" color="primary">
-											{{ DateTime.fromISO(pfb.time).toRelative({ locale: "en", style: "short" }) }}
+											{{ splitAddress(pfb.signers[0]) }}
 										</Text>
 									</Flex>
 								</NuxtLink>
@@ -208,7 +208,7 @@ isLoading.value = false
 
 				min-height: 40px;
 
-				padding-right: 24px;
+				padding-right: 16px;
 			}
 		}
 	}

components/data/RecentNamespacesTable.vue

@@ -65,7 +65,7 @@ const handleSort = (by) => {
 					<thead>
 						<tr>
 							<th><Text size="12" weight="600" color="tertiary">Namespace</Text></th>
-							<th><Text size="12" weight="600" color="tertiary">Height</Text></th>
+							<th><Text size="12" weight="600" color="tertiary">Block Height</Text></th>
 							<th @click="handleSort('time')" :class="$style.sortable">
 								<Flex align="center" gap="6">
 									<Text size="12" weight="600" color="tertiary">Time</Text>