Merge branch 'dev' into leap

Author: GusevPM

app.vue

@@ -17,10 +17,13 @@ import { useNodeStore } from "@/store/node"
 import { useAppStore } from "@/store/app"
 import { useBookmarksStore } from "@/store/bookmarks"
 import { useSettingsStore } from "@/store/settings"
+import { useEnumStore } from "@/store/enums"
 const nodeStore = useNodeStore()
 const appStore = useAppStore()
 const bookmarksStore = useBookmarksStore()
 const settingsStore = useSettingsStore()
+const enumStore = useEnumStore()
+
 bookmarksStore.$subscribe((mutation, state) => {
 	localStorage.setItem("bookmarks", JSON.stringify(state.bookmarks))
 })
@@ -52,6 +55,8 @@ onMounted(async () => {
 	const gasPrice = await fetchGasPrice()
 	appStore.gas = gasPrice
 
+	await enumStore.init()
+
 	window.onbeforeunload = function () {
 		Socket.close()
 	}

components/modals/ConnectModal.vue

@@ -6,7 +6,7 @@ import Tooltip from "@/components/ui/Tooltip.vue"
 
 /** Utils */
 import { connect, syncBalance, getAccounts, disconnect } from "~/services/wallet"
-import { getNetworkName } from "@/services/utils/general"
+import { getNetworkName, isMainnet } from "@/services/utils/general"
 import amp from "@/services/amp"
 
 /** Store */
@@ -124,7 +124,7 @@ const handleConnect = async (target) => {
 					</Tooltip>
 
 					<Tooltip wide>
-						<Flex @click="handleConnect('leap')" wide align="center" justify="between" :class="$style.wallet">
+						<Flex @click="handleConnect('leap')" wide align="center" justify="between" :class="[$style.wallet, !isMainnet() && $style.disabled]">
 							<Flex align="center" gap="12">
 								<img src="@/assets/logos/leap.png" />
 								<Text size="14" weight="600" color="primary">Leap Wallet</Text>
@@ -139,9 +139,11 @@ const handleConnect = async (target) => {
 
 						<template #content>
 							{{
-								hasLeap
-									? "Leap is found in your extensions and ready to connect."
-									: "Leap is not found in your extensions, install it."
+								!isMainnet()
+									? "Temporarily unavailable for test networks."
+									: hasLeap
+										? "Leap is found in your extensions and ready to connect."
+										: "Leap is not found in your extensions, install it."
 							}}
 						</template>
 					</Tooltip>
@@ -225,6 +227,12 @@ const handleConnect = async (target) => {
 
 	transition: all 0.2s ease;
 
+	&.disabled {
+		opacity: 0.5;
+		cursor: default;
+		pointer-events: none;
+	}
+
 	&:hover {
 		box-shadow: inset 0 0 0 1px var(--op-10);
 	}

components/modals/SendModal.vue

@@ -82,7 +82,7 @@ const selectedGasFee = ref(gasFeeItems.value[0].name)
 const handleAmountInput = (e) => {
 	if (!amount.value.length) amount.value = ""
 
-	const normalizedAmount = normalizeAmount(amount.value, 5, appStore.balance.toString())
+	const normalizedAmount = normalizeAmount(amount.value, appStore.balance, appStore.balance.toString())
 	if (typeof normalizedAmount === "string") {
 		amount.value = normalizedAmount
 		return
@@ -215,6 +215,7 @@ watch(
 
 			nextTick(() => {
 				inputEl.value.inputEl.focus()
+				amount.value = ""
 			})
 		} else {
 			amount.value = 0

components/modules/address/AddressOverview.vue

@@ -22,7 +22,6 @@ import VestingsTable from "./tables/VestingsTable.vue";
 
 /** Services */
 import { comma, splitAddress } from "@/services/utils"
-import { MsgTypes } from "@/services/constants/messages"
 
 /** API */
 import {
@@ -38,10 +37,12 @@ import {
 } from "@/services/api/address"
 
 /** Store */
-import { useModalsStore } from "@/store/modals"
 import { useCacheStore } from "@/store/cache"
-const modalsStore = useModalsStore()
+import { useEnumStore } from "@/store/enums"
+import { useModalsStore } from "@/store/modals"
 const cacheStore = useCacheStore()
+const enumStore = useEnumStore()
+const modalsStore = useModalsStore()
 
 const route = useRoute()
 const router = useRouter()
@@ -177,12 +178,14 @@ const onSort = (by) => {
 }
 
 /** Filters */
+const msgTypes = computed(() => enumStore.enums.messageTypes.sort())
+
 const filters = reactive({
 	status: {
 		success: false,
 		failed: false,
 	},
-	message_type: MsgTypes.reduce((a, b) => ({ ...a, [b]: false }), {}),
+	message_type: msgTypes.value?.reduce((a, b) => ({ ...a, [b]: false }), {}),
 })
 const hasActiveFilters = computed(() => {
 	let has = false

components/modules/stats/BarChart.vue

@@ -95,7 +95,7 @@ const buildChart = (chart, cData, pData, onEnter, onLeave) => {
 
 				return `${tia(value, 2)} TIA`
 			case 'seconds':
-				return `${truncateDecimalPart(value / 1_000, 1)}s`
+				return `${truncateDecimalPart(value / 1_000, 3)}s`
 			default:
 				return comma(value)
 		}

components/modules/stats/LineChart.vue

@@ -82,7 +82,7 @@ const buildChart = (chart, cData, pData, onEnter, onLeave) => {
 
 				return `${tia(value, 2)} TIA`
 			case 'seconds':
-				return `${truncateDecimalPart(value / 1_000, 1)}s`
+				return `${truncateDecimalPart(value / 1_000, 3)}s`
 			default:
 				return comma(value)
 		}

components/modules/stats/PieChartCard.vue

@@ -32,7 +32,7 @@ const total = ref(0)
 
 const prepareRollupsData = () => {
     let key = props.series.name
-    props.data.forEach(el => {
+    props.data?.forEach(el => {
         resData.value.push(
             {
                 name: el.name,
@@ -303,6 +303,24 @@ onMounted(() => {
     animation-fill-mode: forwards;
 }
 
+.loading {
+	animation: loading 1s ease infinite;
+}
+
+@keyframes loading {
+	0% {
+		opacity: 1;
+	}
+
+	50% {
+		opacity: 0.5;
+	}
+
+	100% {
+		opacity: 1;
+	}
+}
+
 @keyframes fadeIn {
     from {
         opacity: 0;

components/modules/stats/tabs/RollupsTab.vue

@@ -13,23 +13,24 @@ import { getSeriesByGroupAndType } from "@/services/constants/stats.js"
 import { fetchRollups } from "@/services/api/rollup.js"
 
 const isLoading = ref(false)
-const series = computed(() => getSeriesByGroupAndType('Rollups'))
+const series = ref()
 
 const getRollups = async () => {
 	isLoading.value = true
 
-	const data = await fetchRollups({
-		limit: 100,
-	})
+	series.value = getSeriesByGroupAndType('Rollups')
 
-	series.value.data = data
+	fetchRollups({ limit: 100 })
+	.then((res) => {
+		series.value.data = res
+	})
+	.finally(() => {
+		isLoading.value = false
+	})
 
-    isLoading.value = false
 }
 
-onBeforeMount(async () => {
-    await getRollups()
-})
+await getRollups()
 </script>
 
 <template>
@@ -38,7 +39,6 @@ onBeforeMount(async () => {
 			<Flex align="center" justify="between" wide :class="$style.section">
 				<Flex align="center" gap="4">
 					<Text size="16" weight="600" color="primary" justify="start">Overview</Text>
-					<!-- <Text size="14" weight="600" color="tertiary">(top 10 rollups)</Text> -->
 				</Flex>
 
 				<Button link="/rollups" type="secondary" size="mini">
@@ -50,14 +50,13 @@ onBeforeMount(async () => {
             <RollupsBubbleChart v-if="!isLoading" :series="series" />
 		</Flex>
 
-		<Flex align="center" direction="column" gap="12" wide>
+		<Flex v-if="!isLoading" align="center" direction="column" gap="12" wide>
 			<Flex align="center" justify="between" wide :class="$style.section">
 				<Text size="16" weight="600" color="primary" justify="start">Top Rollups</Text>
 			</Flex>
 
 			<Flex align="center" justify="between" gap="16" wide :class="$style.charts_wrapper">
                 <PieChartCard
-                    v-if="!isLoading"
                     v-for="s in series"
                     :series="s"
                     :data="series.data"

pages/stats/[metric].vue

@@ -9,9 +9,9 @@ import LineChart from "@/components/modules/stats/LineChart.vue"
 import SquareSizeChart from "@/components/modules/stats/SquareSizeChart.vue"
 
 /** Services */
-import { capitalizeAndReplaceUnderscore } from "@/services/utils"
 import { getStartChainDate } from "@/services/config"
 import { exportSVGToPNG, exportToCSV } from "@/services/utils/export"
+import { capitalizeAndReplaceUnderscore } from "@/services/utils"
 
 /** API */
 import { fetchSeries, fetchSeriesCumulative } from "@/services/api/stats"
@@ -254,7 +254,7 @@ const handleCSVDownload = async () => {
 }
 
 const handlePNGDownload = async () => {
-	const svgElement = document.querySelector('#chart')
+	const svgElement = document.getElementById('chart')
 
 	await exportSVGToPNG(svgElement, `${series.value.name}-${filters.from}-${filters.to}-${chartView.value}`)
 

pages/txs.vue

@@ -16,12 +16,15 @@ import MessageTypeBadge from "@/components/shared/MessageTypeBadge.vue"
 
 /** Services */
 import { comma, space, splitAddress, tia } from "@/services/utils"
-import { MsgTypes } from "@/services/constants/messages"
 import { getStartChainDate } from "@/services/config"
 
 /** API */
 import { fetchTransactions } from "@/services/api/tx"
 
+/** Stores */
+import { useEnumStore } from "@/store/enums"
+const enumStore = useEnumStore()
+
 useHead({
 	title: "Transactions - Celestia Explorer",
 	link: [
@@ -74,12 +77,13 @@ const route = useRoute()
 const router = useRouter()
 
 /** Filters */
+const msgTypes = computed(() => enumStore.enums.messageTypes.sort())
 const filters = reactive({
 	status: {
 		success: false,
 		failed: false,
 	},
-	message_type: MsgTypes.reduce((a, b) => ({ ...a, [b]: false }), {}),
+	message_type: msgTypes.value?.reduce((a, b) => ({ ...a, [b]: false }), {}),
 	from: "",
 	to: "",
 })
@@ -326,6 +330,13 @@ watch(
 	},
 )
 
+watch(
+	() => msgTypes.value,
+	() => {
+		filters.message_type = msgTypes.value?.reduce((a, b) => ({ ...a, [b]: false }), {})
+	}
+)
+
 const handleSort = (by) => {
 	/** temp. only for time */
 	if (!["time"].includes(by)) return