Add TVS and rename stats tab

Author: GusevPM

components/Feed.vue

@@ -10,7 +10,7 @@ import { getRankCategory } from "@/services/constants/rollups"
 import Tooltip from "@/components/ui/Tooltip.vue"
 
 /** API */
-import { fetchPriceSeries } from "@/services/api/stats"
+import { fetchPriceSeries, fetchTVS } from "@/services/api/stats"
 
 /** Store */
 import { useAppStore } from "@/store/app.store"
@@ -38,13 +38,14 @@ const topRollup = computed(() => {
 	}
 })
 
+const isLoading = ref(true)
 const series = ref([])
 const price = reactive({
 	value: 0,
 	diff: 0,
 	side: null,
 })
-
+const tvs = ref(0)
 onMounted(async () => {
 	const dataSeries = await fetchPriceSeries({ from: parseInt(DateTime.now().minus({ days: 3 }).ts / 1_000) })
 	series.value = dataSeries
@@ -58,6 +59,13 @@ onMounted(async () => {
 		side = price.value - prevDayClosePrice > 0 ? "rise" : "fall"
 	}
 	price.side = side
+
+	const _tvs = await fetchTVS({ period: null })
+	if (_tvs.value) {
+		tvs.value = _tvs.value
+	}
+
+	isLoading.value = false
 })
 </script>
 
@@ -132,19 +140,19 @@ onMounted(async () => {
 					<Flex align="center" gap="6" :class="$style.stat">
 						<Icon name="coins" size="12" color="secondary" :class="$style.icon" />
 						<Flex align="center" gap="4">
-							<Text size="12" weight="500" color="tertiary" noWrap :class="$style.key">Supply:</Text>
+							<Text size="12" weight="500" color="tertiary" noWrap :class="$style.key">TVS:</Text>
 
-							<Text v-if="head.total_supply" size="12" weight="600" noWrap :class="$style.value">
-								{{ abbreviate(totalSupply, 2) }} TIA
+							<Text v-if="!isLoading" size="12" weight="600" noWrap :class="$style.value">
+								{{ abbreviate(tvs, 2) }} USD
 							</Text>
 							<Skeleton v-else w="40" h="12" />
 						</Flex>
 					</Flex>
 
 					<template #content>
 						<Flex align="center" justify="between" gap="8">
-							<Text size="12" weight="500" color="tertiary">Total Supply:</Text>
-							<Text size="12" weight="600" color="secondary"> {{ abbreviate(totalSupplyUSD, 2) }} USD </Text>
+							<Text size="12" weight="500" color="tertiary">Total Value Secured:</Text>
+							<Text size="12" weight="600" color="secondary"> {{ comma(tvs) }} USD </Text>
 						</Flex>
 					</template>
 				</Tooltip>

components/LeftSidebar.vue

@@ -92,9 +92,9 @@ const mainLinks = reactive([
 				show: true,
 			},
 			{
-				name: "Ecosystem",
-				path: "/stats?tab=ecosystem",
-				queryParam: { tab: "ecosystem" },
+				name: "Nodes",
+				path: "/stats?tab=nodes",
+				queryParam: { tab: "nodes" },
 				show: isMainnet(),
 			},
 		],

…ents/modules/stats/tabs/EcosystemTab.vue …mponents/modules/stats/tabs/NodesTab.vuecomponents/modules/stats/tabs/EcosystemTab.vue renamed to components/modules/stats/tabs/NodesTab.vue components/modules/stats/tabs/EcosystemTab.vue renamed to components/modules/stats/tabs/NodesTab.vue

@@ -13,7 +13,7 @@ import { capitilize, sortArrayOfObjects } from "@/services/utils"
 import { fetchNodeStats } from "@/services/api/stats"
 
 const isLoading = ref(true)
-const series = computed(() => getSeriesByGroupAndType("Ecosystem"))
+const series = computed(() => getSeriesByGroupAndType("Nodes"))
 
 const getNodeStats = async (name) => {
 	const data = await fetchNodeStats({ name })

pages/stats/index.vue

@@ -5,7 +5,7 @@ import Button from "@/components/ui/Button.vue"
 /** Stats Tabs */
 import BlocksTab from "@/components/modules/stats/tabs/BlocksTab.vue"
 import GeneralTab from "@/components/modules/stats/tabs/GeneralTab.vue"
-import EcosystemTab from "@/components/modules/stats/tabs/EcosystemTab.vue"
+import NodesTab from "~/components/modules/stats/tabs/NodesTab.vue"
 import RollupsTab from "@/components/modules/stats/tabs/RollupsTab.vue"
 
 /** Services */
@@ -76,7 +76,7 @@ const tabs = ref([
 		visible: true,
 	},
 	{
-		name: "ecosystem",
+		name: "nodes",
 		visible: isMainnet(),
 	},
 ])
@@ -165,7 +165,7 @@ watch(
 		<GeneralTab v-if="activeTab === 'general'" />
 		<BlocksTab v-if="activeTab === 'blocks'" />
 		<RollupsTab v-if="activeTab === 'rollups'" @onUpdateSection="handleSectionUpdate" />
-		<EcosystemTab v-if="activeTab === 'ecosystem'" />
+		<NodesTab v-if="activeTab === 'nodes'" />
 	</Flex>
 </template>
 

services/constants/stats.js

@@ -127,7 +127,7 @@ export const STATS_SERIES = [
 		],
 	},
 	{
-		group: 'Ecosystem',
+		group: 'Nodes',
 		series: [
 			{
 				name: 'nodetype',