Merge pull request #139 from celenium-io/dev

Release v1.18.0

Author: GusevPM

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/icons.json

@@ -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;

assets/styles/base.scss

@@ -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/AddressBadge.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/DatePicker.vue

@@ -10,7 +10,7 @@ import { getRankCategory } from "@/services/constants/rollups"
 import Tooltip from "@/components/ui/Tooltip.vue"
 
 /** API */
-import { fetchPriceSeries } from "@/services/api/stats"
+import { fetchPriceSeries, fetchTVS } from "@/services/api/stats"
 
 /** Store */
 import { useAppStore } from "@/store/app.store"
@@ -38,13 +38,14 @@ const topRollup = computed(() => {
 	}
 })
 
+const isLoading = ref(true)
 const series = ref([])
 const price = reactive({
 	value: 0,
 	diff: 0,
 	side: null,
 })
-
+const tvs = ref(0)
 onMounted(async () => {
 	const dataSeries = await fetchPriceSeries({ from: parseInt(DateTime.now().minus({ days: 3 }).ts / 1_000) })
 	series.value = dataSeries
@@ -58,6 +59,13 @@ onMounted(async () => {
 		side = price.value - prevDayClosePrice > 0 ? "rise" : "fall"
 	}
 	price.side = side
+
+	const _tvs = await fetchTVS({ period: null })
+	if (_tvs.value) {
+		tvs.value = _tvs.value
+	}
+
+	isLoading.value = false
 })
 </script>
 
@@ -132,19 +140,19 @@ onMounted(async () => {
 					<Flex align="center" gap="6" :class="$style.stat">
 						<Icon name="coins" size="12" color="secondary" :class="$style.icon" />
 						<Flex align="center" gap="4">
-							<Text size="12" weight="500" color="tertiary" noWrap :class="$style.key">Supply:</Text>
+							<Text size="12" weight="500" color="tertiary" noWrap :class="$style.key">TVS:</Text>
 
-							<Text v-if="head.total_supply" size="12" weight="600" noWrap :class="$style.value">
-								{{ abbreviate(totalSupply, 2) }} TIA
+							<Text v-if="!isLoading" size="12" weight="600" noWrap :class="$style.value">
+								{{ abbreviate(tvs, 2) }} USD
 							</Text>
 							<Skeleton v-else w="40" h="12" />
 						</Flex>
 					</Flex>
 
 					<template #content>
 						<Flex align="center" justify="between" gap="8">
-							<Text size="12" weight="500" color="tertiary">Total Supply:</Text>
-							<Text size="12" weight="600" color="secondary"> {{ abbreviate(totalSupplyUSD, 2) }} USD </Text>
+							<Text size="12" weight="500" color="tertiary">Total Value Secured:</Text>
+							<Text size="12" weight="600" color="secondary"> {{ comma(tvs) }} USD </Text>
 						</Flex>
 					</template>
 				</Tooltip>

components/Feed.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/Icon.vue

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

components/LeftSidebar.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/OgImage/ProposalImage.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>