Ms 2 part 1

app.vue

@@ -1,4 +1,7 @@
 <script setup>
+/** Vendor */
+import * as Sentry from "@sentry/vue"
+
 /** Services */
 import Socket from "@/services/api/socket"
 import amp from "@/services/amp"
@@ -47,6 +50,8 @@ onMounted(async () => {
 		nodeStore.settings = JSON.parse(localStorage.nodeSettings)
 	}
 
+	settingsStore.init()
+
 	const runtimeConfig = useRuntimeConfig()
 	amp.init(runtimeConfig.public.AMP)
 
@@ -86,6 +91,22 @@ onMounted(async () => {
 		})
 	}
 
+	if (window.location.hostname !== "localhost") {
+		Sentry.init({
+			dsn: "https://2801a6c0442d2b0cd4df995e4bbe45dc@newsentry.baking-bad.org/12",
+			integrations: [
+				Sentry.replayIntegration({
+					maskAllText: false,
+					blockAllMedia: false,
+				}),
+			],
+
+			// Session Replay
+			replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
+			replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
+		})
+	}
+
 	window.onbeforeunload = function () {
 		Socket.close()
 	}

assets/styles/base.scss

@@ -73,9 +73,10 @@ $grayscale: (
 	--logo-name: var(--txt-primary);
 	--bar-fill: rgb(243, 147, 45);
 	--validator-active: #85f891;
-	--validator-inactive: #65c7f8;
+	--validator-inactive: #1ca7ed;
 	--validator-jailed: #f8774a;
-	--supply: #65c7f8;
+	// --supply: #65c7f8;
+	--supply: #1ca7ed;
 	--staking: #85f891;
 }
 

components/AddressBadge.vue

@@ -1,7 +1,7 @@
 <script setup>
 const props = defineProps({
-	hash: {
-		type: String,
+	account: {
+		type: Object,
 		required: true,
 	},
 	color: {
@@ -13,12 +13,12 @@ const props = defineProps({
 const alias = computed(() => {
 	const { $getDisplayName } = useNuxtApp()
 
-  	return $getDisplayName('addresses', props.hash)
+  	return $getDisplayName('addresses', "", props.account)
 })
 </script>
 
 <template>
-	<NuxtLink :to="`/address/${hash}`" @click.stop>
+	<NuxtLink :to="`/address/${account.hash}`" @click.stop>
 		<Flex align="center" gap="6">
 			<Text size="13" weight="600" :color="color"> {{ alias }} </Text>
 		</Flex>

components/DatePicker.vue

@@ -1,6 +1,5 @@
 <script setup>
 /** Vendor */
-import { useDebounceFn } from "@vueuse/core"
 import { DateTime, Info } from "luxon"
 
 /** Stats Constants */
@@ -129,8 +128,8 @@ const updateSelectedRange = (from, to) => {
 }
 updateSelectedRange(startDate.value, endDate.value)
 
-const isNextMonthAvailable = computed(() => !(month.value === currentDate.value.month && year.value === currentDate.value.year))
-const isPrevMonthAvailable = computed(() => limitMinDate.value ? limitMinDate.value.ts < days.value[0][0].ts : true)
+const isNextMonthAvailable = true // computed(() => !(month.value === currentDate.value.month && year.value === currentDate.value.year))
+const isPrevMonthAvailable = true // computed(() => limitMinDate.value ? limitMinDate.value.ts < days.value[0][0].ts : true)
 const isDayAvailable = (d) => {
 	if (d.startOf('day').ts > currentDate.value.startOf('day').ts) {
 		return false
@@ -237,6 +236,10 @@ const handleMonthChange = (v) => {
 	}
 }
 
+const handleYearChange = (v) => {
+	year.value = year.value + v
+}
+
 watch(
 	() => props.from,
 	() => {
@@ -299,27 +302,49 @@ watch(
 
 				<Flex direction="column" gap="12" :style="popoverStyles.calendar">
 					<Flex align="center" justify="center" gap="6">
-						<Icon
-							@click="handleMonthChange(-1)"
-							name="chevron"
-							size="14"
-							color="tertiary"
-							class="clickable"
-							:class="!isPrevMonthAvailable && $style.disabled"
-							:style="{ transform: 'rotate(90deg)' }"
-						/>
-
-						<Text size="12" color="secondary"> {{ `${DateTime.local(year, month).toFormat('LLLL')} ${year}` }} </Text>
-
-						<Icon
-							@click="handleMonthChange(1)"
-							name="chevron"
-							size="14"
-							color="tertiary"
-							class="clickable"
-							:class="!isNextMonthAvailable && $style.disabled"
-							:style="{ transform: 'rotate(-90deg)' }"
-						/>
+						<Flex align="center" justify="between" :style="{width: '160px'}">
+							<Flex align="center">
+								<Icon
+									@click="handleYearChange(-1)"
+									name="chevron-double-left"
+									size="14"
+									color="tertiary"
+									class="clickable"
+									:class="!isPrevMonthAvailable && $style.disabled"
+								/>
+								<Icon
+									@click="handleMonthChange(-1)"
+									name="chevron-left"
+									size="14"
+									color="tertiary"
+									class="clickable"
+									:class="!isPrevMonthAvailable && $style.disabled"
+								/>
+							</Flex>
+
+							<Text size="12" color="secondary"> {{ `${DateTime.local(year, month).toFormat('LLLL')} ${year}` }} </Text>
+
+							<Flex align="center">
+								<Icon
+									@click="handleMonthChange(1)"
+									name="chevron-left"
+									size="14"
+									color="tertiary"
+									class="clickable"
+									:class="!isNextMonthAvailable && $style.disabled"
+									:style="{ transform: 'rotate(180deg)' }"
+								/>
+								<Icon
+									@click="handleYearChange(1)"
+									name="chevron-double-left"
+									size="14"
+									color="tertiary"
+									class="clickable"
+									:class="!isNextMonthAvailable && $style.disabled"
+									:style="{ transform: 'rotate(180deg)' }"
+								/>
+							</Flex>
+						</Flex>
 					</Flex>
 
 					<Flex direction="column" gap="16" wide :class="$style.table">

components/LeftSidebar.vue

@@ -51,14 +51,17 @@ const mainLinks = reactive([
 			{
 				name: "Active",
 				path: "/validators?status=active&page=1",
+				queryParam: {status: "active"},
 			},
 			{
 				name: "Jailed",
 				path: "/validators?status=jailed&page=1",
+				queryParam: {status: "jailed"},
 			},
 			{
 				name: "Inactive",
 				path: "/validators?status=inactive&page=1",
+				queryParam: {status: "inactive"},
 			},
 		],
 	},
@@ -70,14 +73,17 @@ const mainLinks = reactive([
 			{
 				name: "General",
 				path: "/stats?tab=general",
+				queryParam: {tab: "general"},
 			},
 			{
 				name: "Blocks",
 				path: "/stats?tab=blocks",
+				queryParam: {tab: "blocks"},
 			},
 			{
 				name: "Rollups",
 				path: "/stats?tab=rollups",
+				queryParam: {tab: "rollups"},
 			},
 		],
 	},

components/cmd/CommandMenu.vue

@@ -1552,6 +1552,8 @@ const runBounce = () => {
 	scroll-padding: 4px;
 	overflow-y: auto;
 
+	overscroll-behavior: contain;
+
 	padding-bottom: 4px;
 }
 

components/data/LatestPFBTable.vue

@@ -106,7 +106,7 @@ isLoading.value = false
 								<NuxtLink :to="`/tx/${pfb.hash}`">
 									<Flex align="center" justify="center">
 										<Text size="12" weight="600" color="primary" class="table_column_alias">
-											{{ $getDisplayName('addresses', pfb.signers[0]) }}
+											{{ $getDisplayName('addresses', pfb.signers[0].hash) }}
 										</Text>
 									</Flex>
 								</NuxtLink>

components/data/RecentNamespacesTable.vue

@@ -32,9 +32,9 @@ const getNamespaces = async () => {
 	isLoading.value = false
 }
 
-getNamespaces()
+await getNamespaces()
 
-const handleSort = (by) => {
+const handleSort = async (by) => {
 	switch (sort.dir) {
 		case "desc":
 			if (sort.by == by) sort.dir = "asc"
@@ -48,7 +48,7 @@ const handleSort = (by) => {
 
 	sort.by = by
 
-	getNamespaces()
+	await getNamespaces()
 }
 </script>
 

components/modals/BlobModal.vue

@@ -19,6 +19,8 @@ const props = defineProps({
 	show: Boolean,
 })
 
+const supportedContentTypeForPreview = ["image/png", "image/jpeg", "video/mp4", "text/plain; charset=utf-8"]
+
 const isLoading = ref(true)
 const isStopped = ref(false)
 const blob = ref({})
@@ -121,12 +123,18 @@ const handleDownload = () => {
 			.map((e) => parseInt(e, 16)),
 	)
 
+	let extension = "bin"
+	if (supportedContentTypeForPreview.includes(blob.value?.content_type)) {
+		const ct = blob.value.content_type.split(";")[0].split("/")[1]
+		extension = ct === "plain" ? "txt" : ct
+	}
+
 	const a = window.document.createElement("a")
 	a.href = window.URL.createObjectURL(new Blob([byteArray], { type: "application/octet-stream" }))
 	a.download = `${getNamespaceID(cacheStore.selectedBlob.namespace_id)}_${cacheStore.selectedBlob.commitment.slice(
 		cacheStore.selectedBlob.commitment.length - 8,
 		cacheStore.selectedBlob.commitment.length,
-	)}.bin`
+	)}.${extension}`
 	document.body.appendChild(a)
 	a.click()
 	document.body.removeChild(a)
@@ -319,12 +327,12 @@ const handlePreviewContent = () => {
 						<Text size="12" weight="500" color="tertiary">Signer:</Text>
 
 						<Flex align="center" gap="8" :class="$style.value_wrapper">
-							<CopyButton :text="cacheStore.selectedBlob.signer" />
+							<CopyButton :text="cacheStore.selectedBlob.signer.hash" />
 
-							<NuxtLink :to="`/address/${cacheStore.selectedBlob.signer}`" target="_blank">
+							<NuxtLink :to="`/address/${cacheStore.selectedBlob.signer.hash}`" target="_blank">
 								<Flex align="center" gap="6">
 									<Text size="13" weight="600" color="primary" :class="$style.value">
-										{{ $getDisplayName("addresses", cacheStore.selectedBlob.signer) }}
+										{{ $getDisplayName("addresses", "", cacheStore.selectedBlob.signer) }}
 									</Text>
 
 									<Icon name="arrow-narrow-up-right" size="12" color="secondary" />

components/modals/ConstantsModal.vue

@@ -158,6 +158,8 @@ const handleCopy = (target) => {
 .constants {
 	max-height: 600px;
 	overflow: auto;
+
+	overscroll-behavior: contain;
 }
 
 .module {