Governance

app.vue

@@ -47,6 +47,8 @@ activityStore.$subscribe((mutation, state) => {
 	localStorage.setItem("rollups_ranking", JSON.stringify(state.rollups_ranking))
 })
 
+appStore.initConstants()
+
 let watchInterval = null
 
 onMounted(async () => {

assets/styles/base.scss

@@ -33,8 +33,11 @@ $grayscale: (
 
 	/* General */
 	--brand: #18d2a5;
+	--brand-rgb: 24, 210, 165;
 	--blue: #379bff;
+	--blue-rgb: 55, 155, 255;
 	--red: #eb5757;
+	--red-rgb: 235, 87, 87;
 	--dark-red: #592121;
 	--orange: #ff5a17;
 	--light-orange: #ff8351;

components/AddressBadge.vue

@@ -6,14 +6,13 @@ const props = defineProps({
 	},
 	color: {
 		type: String,
-		default: "primary"
+		default: "primary",
 	},
 })
 
 const alias = computed(() => {
 	const { $getDisplayName } = useNuxtApp()
-
-  	return $getDisplayName('addresses', "", props.account)
+	return $getDisplayName("addresses", "", props.account)
 })
 </script>
 
@@ -23,4 +22,4 @@ const alias = computed(() => {
 			<Text size="13" weight="600" :color="color"> {{ alias }} </Text>
 		</Flex>
 	</NuxtLink>
-</template>
+</template>

components/DatePicker.vue

@@ -281,13 +281,11 @@ watch(
 <template>
 	<Popover :open="isOpen" @on-close="handleClose" :width="popoverStyles.width" :side="popoverStyles.side">
 		<Button v-if="showTitle" @click="handleOpen" type="secondary" size="mini">
-			<Icon name="plus-circle" size="12" color="tertiary" />
+			<Icon name="plus-circle" size="12" :color="selectedRange ? 'brand' : 'tertiary'" />
 
-			<Text color="secondary">Date Range</Text>
+			<Text color="secondary">Date Range<template v-if="selectedRange">:</template></Text>
 
 			<template v-if="selectedRange">
-				<div :class="$style.vertical_divider" />
-
 				<Text size="12" weight="600" color="primary">
 					{{ selectedRange }}
 				</Text>
@@ -445,12 +443,6 @@ watch(
 	height: 100%;
 }
 
-.vertical_divider {
-	min-width: 2px;
-	height: 50%;
-	background: var(--op-10);
-}
-
 .period {
 	cursor: pointer;
 }

components/Icon.vue

@@ -4,9 +4,10 @@ import { computed } from "vue"
 import icons from "@/assets/icons.json"
 
 const props = defineProps({
-	name: { type: String, required: true, default: "warning" },
+	name: { type: String, required: true, default: "" },
 	size: { type: [String, Number], default: "16" },
 	color: { type: String, default: null },
+	hoverColor: { type: String, required: false },
 	rotate: { type: [String, Number], default: 0 },
 	fill: { type: Boolean, default: false },
 	scale: { type: [String, Number], default: 1 },
@@ -15,8 +16,8 @@ const props = defineProps({
 
 const styles = computed(() => {
 	const s = {
-		minWidth:     `${props.size}px`,
-		minHeight:    `${props.size}px`,
+		minWidth: `${props.size}px`,
+		minHeight: `${props.size}px`,
 		transformBox: "view-box",
 		transformOrigin: "center center",
 		transform: "",
@@ -25,7 +26,7 @@ const styles = computed(() => {
 	const ops = []
 	if (props.rotate) ops.push(`rotate(${props.rotate}deg)`)
 	if (props.scale != 1) ops.push(`scale(${props.scale})`)
-	if (ops.length)  s.transform = ops.join(" ")
+	if (ops.length) s.transform = ops.join(" ")
 
 	return s
 })
@@ -38,6 +39,10 @@ const classes = computed(() => {
 	return iconClasses
 })
 
+const hoverColorVar = computed(() => {
+	return `var(--txt-${props.hoverColor})`
+})
+
 const getIcon = () => {
 	return icons[props.name.charAt(0).toLowerCase() + props.name.slice(1)]
 }
@@ -48,7 +53,14 @@ const isSplitted = () => {
 </script>
 
 <template>
-	<svg viewBox="0 0 24 24" :width="size" :height="size" :style="styles" :class="[classes, loading && $style.loading]" role="img">
+	<svg
+		viewBox="0 0 24 24"
+		:width="size"
+		:height="size"
+		:style="styles"
+		:class="[classes, hoverColor && $style.hovered, loading && $style.loading]"
+		role="img"
+	>
 		<path v-if="!isSplitted(name)" :d="getIcon(name)" />
 		<template v-else>
 			<path v-if="!Array.isArray(getIcon(name))" :d="getIcon(name)" :style="{ opacity: path.opacity }" />
@@ -66,6 +78,14 @@ const isSplitted = () => {
 </template>
 
 <style module>
+.hovered {
+	transition: all 0.3s var(--bezier);
+
+	&:hover {
+		fill: v-bind(hoverColorVar);
+	}
+}
+
 .loading {
 	animation: skeleton 1s ease-in-out infinite;
 }
@@ -83,4 +103,4 @@ const isSplitted = () => {
 		opacity: 1;
 	}
 }
-</style>
+</style>

components/LeftSidebar.vue

@@ -94,11 +94,16 @@ const mainLinks = reactive([
 			{
 				name: "Ecosystem",
 				path: "/stats?tab=ecosystem",
-				queryParam: {tab: "ecosystem"},
+				queryParam: { tab: "ecosystem" },
 				show: isMainnet(),
 			},
 		],
 	},
+	{
+		icon: "governance",
+		name: "Governance",
+		path: "/proposals",
+	},
 ])
 
 const isModularLinksCollapsed = ref(false)

components/OgImage/ProposalImage.vue

@@ -0,0 +1,57 @@
+<script setup>
+/** Vendor */
+import { DateTime } from "luxon"
+
+/** Services */
+import { comma, formatBytes } from "@/services/utils"
+
+defineOptions({
+	inheritAttrs: false,
+})
+
+const props = defineProps({
+	title: String,
+	proposal: Object,
+})
+
+const bgStyles = computed(() => {
+	return {
+		style: {
+			filter: "grayscale(1)",
+			opacity: "0.05",
+		},
+	}
+})
+</script>
+
+<template>
+	<div class="w-full h-full" :style="{ background: '#111111', padding: '100px', fontFamily: 'IBM+Plex+Mono', overflow: 'hidden' }">
+		<img src="/img/bg.png" width="1200" height="600" class="absolute" v-bind="bgStyles" />
+
+		<div :style="{ height: '100%', display: 'flex', flexDirection: 'column', gap: '32px' }">
+			<div :style="{ display: 'flex', alignItems: 'center' }">
+				<span :style="{ fontSize: '40px', color: 'rgba(255,255,255, 0.6)', textTransform: 'capitalize', marginRight: '24px;' }">
+					{{ proposal.status }}
+				</span>
+
+				<span :style="{ fontSize: '40px', color: 'rgba(255,255,255, 0.3)' }">
+					- {{ DateTime.fromISO(proposal.deposit_time).toFormat("ff") }}
+				</span>
+			</div>
+
+			<span :style="{ fontSize: '50px', color: 'rgba(255,255,255, 0.9)' }"> {{ proposal.title }} </span>
+			<span :style="{ fontSize: '50px', color: 'rgba(255,255,255, 0.3)' }"> {{ proposal.description }} </span>
+
+			<div>
+				<span :style="{ fontSize: '32px', color: 'rgba(255,255,255, 0.3)' }">Yes: </span>
+				<span :style="{ fontSize: '32px', color: 'rgba(255,255,255, 0.6)' }">{{ proposal.yes }}</span>
+				<span :style="{ fontSize: '32px', color: 'rgba(255,255,255, 0.3)' }">, No: </span>
+				<span :style="{ fontSize: '32px', color: 'rgba(255,255,255, 0.6)' }">{{ proposal.no }}</span>
+				<span :style="{ fontSize: '32px', color: 'rgba(255,255,255, 0.3)' }">, No with veto: </span>
+				<span :style="{ fontSize: '32px', color: 'rgba(255,255,255, 0.6)' }">{{ proposal.no_with_veto }}</span>
+				<span :style="{ fontSize: '32px', color: 'rgba(255,255,255, 0.3)' }">, Abstain: </span>
+				<span :style="{ fontSize: '32px', color: 'rgba(255,255,255, 0.6)' }">{{ proposal.abstain }}</span>
+			</div>
+		</div>
+	</div>
+</template>

components/data/LatestPFBTable.vue

@@ -63,8 +63,6 @@ isLoading.value = false
 											<Text size="13" weight="600" color="primary" mono>
 												{{ pfb.hash.slice(pfb.hash.length - 4, pfb.hash.length).toUpperCase() }}
 											</Text>
-
-											<CopyButton :text="pfb.hash.toUpperCase()" />
 										</Flex>
 
 										<template #content>

components/data/RecentNamespacesTable.vue

@@ -95,18 +95,14 @@ const handleSort = async (by) => {
 
 					<tbody>
 						<tr v-for="ns in namespaces">
-							<td style="width: 1px">
+							<td>
 								<NuxtLink :to="`/namespace/${ns.namespace_id}`">
 									<Flex align="center">
 										<Tooltip position="start">
 											<Flex direction="column" gap="4">
-												<Flex align="center" gap="8">
-													<Text size="12" weight="600" color="primary" mono class="table_column_alias">
-														{{ $getDisplayName("namespaces", ns.namespace_id) }}
-													</Text>
-
-													<CopyButton :text="getNamespaceID(ns.namespace_id)" />
-												</Flex>
+												<Text size="13" weight="600" color="primary" mono class="table_column_alias">
+													{{ $getDisplayName("namespaces", ns.namespace_id) }}
+												</Text>
 
 												<Text
 													v-if="ns.name !== getNamespaceID(ns.namespace_id)"

components/modals/ConstantsModal.vue

@@ -61,8 +61,8 @@ const searchTerm = ref("")
 const rawModules = ref({})
 
 onMounted(async () => {
-	const data = await fetchConstants()
-	rawModules.value = data.module
+	const { data } = await fetchConstants()
+	rawModules.value = data.value.module
 })
 
 const modules = computed(() => {

components/modules/address/AddressCharts.vue

@@ -80,9 +80,9 @@ const updateUserSettings = () => {
 }
 
 /** Charts */
-const chartWrapperEl = ref()
-const txSeriesChartEl = ref()
-const feeSeriesChartEl = ref()
+const chartWrapperEl = useTemplateRef("chartWrapperEl")
+const txSeriesChartEl = useTemplateRef("txSeriesChartEl")
+const feeSeriesChartEl = useTemplateRef("feeSeriesChartEl")
 
 /** Data */
 const isLoading = ref(false)

components/modules/address/AddressOverview.vue

@@ -728,7 +728,7 @@ const handleOpenQRModal = () => {
 					<Flex v-else direction="column" gap="8" :class="$style.key_value">
 						<Text size="12" weight="600" color="secondary">Address</Text>
 
-						<Text size="13" weight="600" color="primary"> {{ address.hash }} </Text>
+						<Text size="13" weight="600" color="primary" class="overflow_ellipsis"> {{ address.hash }} </Text>
 					</Flex>
 
 					<Flex direction="column" gap="16" :class="$style.key_value">
@@ -854,12 +854,16 @@ const handleOpenQRModal = () => {
 								size="mini"
 								:disabled="!transactions.length && !hasActiveFilters"
 							>
-								<Icon name="plus-circle" size="12" color="tertiary" />
-								<Text color="secondary">Status</Text>
+								<Icon
+									name="plus-circle"
+									size="12"
+									:color="Object.keys(filters.status).find((f) => filters.status[f]) ? 'brand' : 'tertiary'"
+								/>
+								<Text color="secondary"
+									>Status<template v-if="Object.keys(filters.status).find((f) => filters.status[f])">:</template></Text
+								>
 
 								<template v-if="Object.keys(filters.status).find((f) => filters.status[f])">
-									<div :class="$style.vertical_divider" />
-
 									<Text size="12" weight="600" color="primary" style="text-transform: capitalize">
 										{{
 											Object.keys(filters.status)
@@ -874,7 +878,7 @@ const handleOpenQRModal = () => {
 
 							<template #content>
 								<Flex direction="column" gap="12">
-									<Text size="12" weight="500" color="secondary">Filter by Status</Text>
+									<Text size="12" weight="600" color="secondary">Filter by Status</Text>
 
 									<Flex direction="column" gap="8">
 										<Checkbox v-model="filters.status.success">
@@ -897,12 +901,18 @@ const handleOpenQRModal = () => {
 								size="mini"
 								:disabled="!transactions.length && !hasActiveFilters"
 							>
-								<Icon name="plus-circle" size="12" color="tertiary" />
-								<Text color="secondary">Message Type</Text>
+								<Icon
+									name="plus-circle"
+									size="12"
+									:color="Object.keys(filters.message_type).find((f) => filters.message_type[f]) ? 'brand' : 'tertiary'"
+								/>
+								<Text color="secondary"
+									>Message Type<template v-if="Object.keys(filters.message_type).find((f) => filters.message_type[f])"
+										>:</template
+									></Text
+								>
 
 								<template v-if="Object.keys(filters.message_type).find((f) => filters.message_type[f])">
-									<div :class="$style.vertical_divider" />
-
 									<Text size="12" weight="600" color="primary">
 										{{
 											Object.keys(filters.message_type).filter((f) => filters.message_type[f]).length < 3
@@ -929,7 +939,7 @@ const handleOpenQRModal = () => {
 
 							<template #content>
 								<Flex direction="column" gap="12">
-									<Text size="12" weight="500" color="secondary">Filter by Message Type</Text>
+									<Text size="12" weight="600" color="secondary">Filter by Message Type</Text>
 
 									<Input v-model="searchTerm" size="small" placeholder="Search" autofocus />