Merge branch 'ms-2-part-2' into ms-2-part-2-mainnet

Author: GusevPM

components/LeftSidebar.vue

@@ -10,7 +10,7 @@ import NavLink from "@/components/modules/navigation/NavLink.vue"
 /** Utils */
 import { getNetworkName } from "@/services/utils/general"
 import { StatusMap } from "@/services/constants/node"
-import { isMobile } from "@/services/utils"
+import { isMainnet, isMobile } from "@/services/utils"
 
 /** Store */
 import { useAppStore } from "~/store/app"
@@ -52,16 +52,19 @@ const mainLinks = reactive([
 				name: "Active",
 				path: "/validators?status=active&page=1",
 				queryParam: {status: "active"},
+				show: true,
 			},
 			{
 				name: "Jailed",
 				path: "/validators?status=jailed&page=1",
 				queryParam: {status: "jailed"},
+				show: true,
 			},
 			{
 				name: "Inactive",
 				path: "/validators?status=inactive&page=1",
 				queryParam: {status: "inactive"},
+				show: true,
 			},
 		],
 	},
@@ -74,21 +77,25 @@ const mainLinks = reactive([
 				name: "General",
 				path: "/stats?tab=general",
 				queryParam: {tab: "general"},
+				show: true,
 			},
 			{
 				name: "Blocks",
 				path: "/stats?tab=blocks",
 				queryParam: {tab: "blocks"},
+				show: true,
 			},
 			{
 				name: "Rollups",
 				path: "/stats?tab=rollups",
 				queryParam: {tab: "rollups"},
+				show: true,
 			},
 			{
 				name: "Ecosystem",
 				path: "/stats?tab=ecosystem",
 				queryParam: {tab: "ecosystem"},
+				show: isMainnet(),
 			},
 		],
 	},
@@ -104,11 +111,13 @@ const modularLinks = reactive([
 			{
 				name: "Cost Savings",
 				path: "/calculators/savings",
+				show: true,
 			},
 			{
 				name: "Register rollup",
 				path: "https://forms.gle/nimJyQJG4Lb4BTcG7",
 				external: true,
+				show: true,
 			},
 		],
 	},
@@ -120,6 +129,7 @@ const modularLinks = reactive([
 			{
 				name: "Treemap View",
 				path: "/namespaces/treemap",
+				show: true,
 			},
 		],
 	},
@@ -174,6 +184,10 @@ const newLinks = reactive([
 const handleNavigate = (url) => {
 	window.location.replace(url)
 }
+
+const handleOnClose = () => {
+	appStore.showSidebar = false
+}
 </script>
 
 <template>
@@ -204,7 +218,7 @@ const handleNavigate = (url) => {
 			</Flex>
 
 			<Flex direction="column" gap="2">
-				<NavLink v-for="link in mainLinks" :link="link" @onClose="appStore.showSidebar = false" />
+				<NavLink v-for="link in mainLinks" :link="link" @onClose="handleOnClose" />
 			</Flex>
 
 			<Flex direction="column" gap="2">
@@ -219,7 +233,7 @@ const handleNavigate = (url) => {
 				</Flex>
 
 				<Flex v-if="!isModularLinksCollapsed" direction="column" gap="2">
-					<NavLink v-for="link in modularLinks" :link="link" @onClose="appStore.showSidebar = false" />
+					<NavLink v-for="link in modularLinks" :link="link" @onClose="handleOnClose" />
 				</Flex>
 			</Flex>
 
@@ -235,7 +249,7 @@ const handleNavigate = (url) => {
 				</Flex>
 
 				<Flex v-if="!isToolsLinkCollapsed" direction="column" gap="2">
-					<NavLink v-for="link in toolsLinks" :link="link" @onClose="appStore.showSidebar = false" />
+					<NavLink v-for="link in toolsLinks" :link="link" @onClose="handleOnClose" />
 				</Flex>
 			</Flex>
 

components/modules/address/AddressOverview.vue

@@ -801,13 +801,15 @@ const handleOpenQRModal = () => {
 						</Flex>
 
 						<Flex v-if="!collapseCelestials" direction="column" gap="12" :class="$style.key_value">
-							<Flex v-for="c in celestials" align="center" gap="8">
-								<Flex v-if="c.image_url" align="center" justify="center" :class="$style.cel_image_container">
-									<img :src="c.image_url" :class="$style.cel_image" />
-								</Flex>
+							<NuxtLink v-for="c in celestials" :to="`https://celestials.id/id/${c.name}?utm_source=celenium_address_page`" target="_blank" :class="$style.link">
+								<Flex align="center" gap="8">
+									<Flex v-if="c.image_url" align="center" justify="center" :class="$style.cel_image_container">
+										<img :src="c.image_url" :class="$style.cel_image" />
+									</Flex>
 
-								<Text size="12" weight="600" color="tertiary"> {{ c.name }} </Text>
-							</Flex>
+									<Text size="12" weight="600" color="tertiary"> {{ c.name }} </Text>
+								</Flex>
+							</NuxtLink>
 						</Flex>
 					</Flex>
 
@@ -1296,6 +1298,18 @@ const handleOpenQRModal = () => {
 	}
 }
 
+.link {
+	&:hover {
+		span {
+			color: var(--txt-primary);
+		}
+
+		img {
+			filter: brightness(1.2)
+		}
+	}
+}
+
 @media (max-width: 800px) {
 	.content {
 		flex-direction: column;

components/modules/navigation/NavLink.vue

@@ -69,7 +69,7 @@ const handleClick = () => {
 </script>
 
 <template>
-	<NuxtLink @click="handleClick" :to="link.path" :target="link.external && '_blank'">
+	<NuxtLink @click.stop="handleClick" :to="link.path" :target="link.external && '_blank'">
 		<Flex
 			align="center"
 			justify="between"
@@ -96,7 +96,7 @@ const handleClick = () => {
 
 	<template v-if="isExpanded">
 		<Flex direction="column" gap="2">
-			<NavLink v-for="l in link.children" :link="l" />
+			<NavLink v-for="l in link.children?.filter(l => l.show)" :link="l" @onClose="handleClick" />
 		</Flex>
 	</template>
 </template>

components/modules/rollup/RollupCharts.vue

@@ -354,7 +354,6 @@ const buildBarChart = (chartEl, data, onEnter, onLeave, metric) => {
 	const onPointermoved = (event) => {
 		onEnter()
 
-		// const idx = bisect(data, x.invert(d3.pointer(event)[0]))
 		const idx = bisect(data, x.invert(d3.pointer(event)[0] - barWidth / 2))
 		
 		const elements = document.querySelectorAll(`[metric="${metric}"]`)

components/modules/stats/BarChart.vue

@@ -33,8 +33,7 @@ const tooltip = ref({
 })
 
 const buildChart = (chart, cData, pData, onEnter, onLeave) => {
-	const width = chart.getBoundingClientRect().width
-	const height = chart.getBoundingClientRect().height
+	const { width, height } = chart.getBoundingClientRect()
 	const marginTop = 12
 	const marginRight = 12
 	const marginBottom = 24