Merge branch 'ms-2-part-2' of github.com:celenium-io/celenium-interface into ms-2-part-2

Author: xdeq

components/DatePicker.vue

@@ -261,6 +261,7 @@ const handleYearChange = (v) => {
 watch(
 	() => props.from,
 	() => {
+		selectedPeriod.value = {}
 		startDate.value = props.from ? DateTime.fromSeconds(parseInt(props.from)).startOf("day") : {}
 		endDate.value = props.to ? DateTime.fromSeconds(parseInt(props.to)).endOf("day") : {}
 		updateSelectedRange(startDate.value, endDate.value)
@@ -270,6 +271,7 @@ watch(
 watch(
 	() => props.to,
 	() => {
+		selectedPeriod.value = {}
 		endDate.value = props.to ? DateTime.fromSeconds(parseInt(props.to)).endOf("day") : {}
 		updateSelectedRange(startDate.value, endDate.value)
 	},

components/LeftSidebar.vue

@@ -51,19 +51,19 @@ const mainLinks = reactive([
 			{
 				name: "Active",
 				path: "/validators?status=active&page=1",
-				queryParam: {status: "active"},
+				queryParam: { status: "active" },
 				show: true,
 			},
 			{
 				name: "Jailed",
 				path: "/validators?status=jailed&page=1",
-				queryParam: {status: "jailed"},
+				queryParam: { status: "jailed" },
 				show: true,
 			},
 			{
 				name: "Inactive",
 				path: "/validators?status=inactive&page=1",
-				queryParam: {status: "inactive"},
+				queryParam: { status: "inactive" },
 				show: true,
 			},
 		],
@@ -76,26 +76,26 @@ const mainLinks = reactive([
 			{
 				name: "General",
 				path: "/stats?tab=general",
-				queryParam: {tab: "general"},
+				queryParam: { tab: "general" },
 				show: true,
 			},
 			{
 				name: "Blocks",
 				path: "/stats?tab=blocks",
-				queryParam: {tab: "blocks"},
+				queryParam: { tab: "blocks" },
 				show: true,
 			},
 			{
 				name: "Rollups",
 				path: "/stats?tab=rollups",
-				queryParam: {tab: "rollups"},
+				queryParam: { tab: "rollups" },
 				show: true,
 			},
 			{
 				name: "Ecosystem",
 				path: "/stats?tab=ecosystem",
 				queryParam: {tab: "ecosystem"},
-				show: isMainnet(),
+				show: false,
 			},
 		],
 	},
@@ -196,7 +196,8 @@ const handleOnClose = () => {
 			<Flex justify="between" align="center">
 				<NuxtLink to="/" :class="$style.logo">
 					<Flex align="center" gap="8">
-						<Icon name="logo" size="16" color="tertiary" :class="$style.logo_symbol" />
+						<Icon v-if="getNetworkName() !== 'Mammoth'" name="logo" size="16" color="tertiary" :class="$style.logo_symbol" />
+						<Text v-else size="16" style="filter: grayscale(1)">🦣</Text>
 
 						<svg width="86" height="14" viewBox="0 0 96 16" xmlns="http://www.w3.org/2000/svg" :class="$style.logo_name">
 							<path
@@ -301,10 +302,17 @@ const handleOnClose = () => {
 
 				<template #popup>
 					<DropdownTitle>
-						<Flex gap="8">
+						<Flex v-if="head.synced" gap="8">
 							<Icon name="check" size="12" color="brand" />
 							<Flex direction="column" gap="6">
-								<Text color="secondary">Head {{ head.synced ? "" : "not" }} Synced </Text>
+								<Text color="secondary">Head Synced </Text>
+								<Text color="tertiary">{{ head.chain_id }}</Text>
+							</Flex>
+						</Flex>
+						<Flex v-else gap="8">
+							<Icon name="close" size="12" color="red" />
+							<Flex direction="column" gap="6">
+								<Text color="secondary">Head not Synced </Text>
 								<Text color="tertiary">{{ head.chain_id }}</Text>
 							</Flex>
 						</Flex>
@@ -314,6 +322,7 @@ const handleOnClose = () => {
 					<DropdownItem @click="handleNavigate('https://celenium.io')">Mainnet</DropdownItem>
 					<DropdownItem @click="handleNavigate('https://mocha-4.celenium.io')">Mocha-4</DropdownItem>
 					<DropdownItem @click="handleNavigate('https://arabica.celenium.io')">Arabica</DropdownItem>
+					<!-- <DropdownItem @click="handleNavigate('https://mammoth.celenium.io')">Mammoth</DropdownItem> -->
 				</template>
 			</Dropdown>
 		</Flex>

components/OgImage/StatsMetricImage.vue

@@ -14,15 +14,13 @@ const bgStyles = computed(() => {
 			position: "absolute",
 			top: "0",
 			left: "0",
-			filter: "grayscale(1)",
-			opacity: "0.05",
 		},
 	}
 })
 </script>
 
 <template>
-	<div class="w-full h-full" :style="{ background: '#111111', padding: '100px 120px', fontFamily: 'IBM+Plex+Mono' }">
+	<div class="w-full h-full" :style="{ padding: '80px 140px', fontFamily: 'IBM+Plex+Mono' }">
 		<img src="/img/stats_bg.png" v-bind="bgStyles" />
 
 		<div :style="{ height: '100%', display: 'flex', flexDirection: 'column', gap: '80px' }">