[WIP] Mocha network stats

app.vue

@@ -34,7 +34,7 @@ onMounted(async () => {
 	const runtimeConfig = useRuntimeConfig()
 	amp.init(runtimeConfig.public.AMP)
 
-	const data = await fetchLatestBlocks({ limit: 15 })
+	const data = await fetchLatestBlocks({ limit: 100 })
 	appStore.latestBlocks = data
 	appStore.isLatestBlocksLoaded = true
 

assets/styles/base.scss

@@ -35,12 +35,16 @@ $grayscale: (
 	--brand: #0ade71;
 	--blue: #076acd;
 	--red: #eb5757;
+	--dark-red: #592121;
 	--orange: #ff5a17;
 	--light-orange: #ff8351;
 	--yellow: #ffd400;
 	--green: #0ade71;
 	--neutral-green: #33a853;
 	--purple: #5856de;
+	--mint: #18D2A5;
+	--neutral-mint: #109373;
+	--dark-mint: #1e473d;
 
 	/* Grayscale */
 	@each $gray, $value in $grayscale {
@@ -100,12 +104,16 @@ $grayscale: (
 	--brand: #33a853;
 	--blue: #0b84fe;
 	--red: #eb5757;
+	--dark-red: #592121;
 	--orange: #ff5a17;
 	--light-orange: #ff8351;
 	--yellow: #ffd400;
 	--green: #0ade71;
 	--neutral-green: #33a853;
 	--purple: #5856de;
+	--mint: #18D2A5;
+	--neutral-mint: #109373;
+	--dark-mint: #1e473d;
 
 	/* Grayscale */
 	@each $gray, $value in $grayscale {
@@ -157,12 +165,16 @@ $grayscale: (
 	--brand: #0ade71;
 	--blue: #0b84fe;
 	--red: #eb5757;
+	--dark-red: #592121;
 	--orange: #ff5a17;
 	--light-orange: #ff8351;
 	--yellow: #e5c10b;
 	--green: #26c071;
 	--neutral-green: #33a853;
 	--purple: #5856de;
+	--mint: #18D2A5;
+	--neutral-mint: #109373;
+	--dark-mint: #1e473d;
 
 	/* Grayscale */
 	@each $gray, $value in $grayscale {
@@ -369,3 +381,16 @@ body {
 .ods_group {
 	transition: all 0.3s ease;
 }
+
+.transition_all {
+	transition: all 0.3s ease;
+}
+
+.dimmed {
+	filter: brightness(40%);
+	transition: all 0.3s ease;
+}
+
+.bar {
+	transition: filter 0.3s;
+}

components/LeftSidebar.vue

@@ -57,6 +57,25 @@ const mainLinks = reactive([
 			},
 		],
 	},
+	{
+		icon: "bar-chart",
+		name: "Statistics",
+		path: "/stats",
+		children: [
+			{
+				name: "General",
+				path: "/stats?tab=General",
+			},
+			{
+				name: "Blocks",
+				path: "/stats?tab=Blocks",
+			},
+			{
+				name: "Rollups",
+				path: "/stats?tab=Rollups",
+			},
+		],
+	},
 ])
 
 const isModularLinksCollapsed = ref(false)

components/LoadingHolder.vue

@@ -0,0 +1,37 @@
+<script setup>
+import Spinner from "@/components/ui/Spinner.vue"
+const props = defineProps({
+	title: {
+		type: String,
+		required: true,
+	},
+	subtitle: {
+		type: String,
+		required: false,
+	},
+})
+</script>
+
+<template>
+	<ClientOnly>
+		<Transition name="fade">
+			<Flex direction="column" align="center" gap="16" :class="$style.loading">
+				<Spinner size="16" />
+
+				<Flex direction="column" align="center" gap="8">
+					<Text size="14" weight="500" color="primary"> {{ title }} </Text>
+					<Text v-if="subtitle" size="13" weight="500" color="tertiary"> {{ subtitle }} </Text>
+				</Flex>
+			</Flex>
+		</Transition>
+	</ClientOnly>
+</template>
+
+<style module>
+.loading {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
+</style>