Terminal Link

.oxlintrc.json

@@ -0,0 +1,6 @@
+{
+	"rules": {
+		"no-async-promise-executor": "off"
+	},
+	"ignorePatterns": ["services/lumina-node-wasm/**", "services/utils/blob.js", "services/utils/blobtx.js"]
+}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+	"oxc.enable": true
+}

app.vue

@@ -5,6 +5,7 @@ import * as Sentry from "@sentry/vue"
 /** Services */
 import Socket from "@/services/api/socket"
 import amp from "@/services/amp"
+import { watchForUpdate } from "@/services/version"
 
 /** Components */
 import ModalsManager from "@/components/modals/ModalsManager.vue"
@@ -16,22 +17,22 @@ import { fetchHead } from "@/services/api/main"
 import { fetchLatestBlocks } from "@/services/api/block"
 
 /** Store */
-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"
-import { useLegalStore } from "@/store/legal"
-import { useNotificationsStore } from "@/store/notifications"
-import { useRollupsRankingStore } from "@/store/rollupsrank"
+import { useNodeStore } from "@/store/node.store"
+import { useAppStore } from "@/store/app.store"
+import { useBookmarksStore } from "@/store/bookmarks.store"
+import { useSettingsStore } from "@/store/settings.store"
+import { useEnumStore } from "@/store/enums.store"
+import { useLegalStore } from "@/store/legal.store"
+import { useNotificationsStore } from "@/store/notifications.store"
+import { useActivityStore } from "@/store/activity.store"
 const nodeStore = useNodeStore()
 const appStore = useAppStore()
 const bookmarksStore = useBookmarksStore()
 const settingsStore = useSettingsStore()
 const enumStore = useEnumStore()
 const legalStore = useLegalStore()
 const notificationsStore = useNotificationsStore()
-const rollupsRankingStore = useRollupsRankingStore()
+const activityStore = useActivityStore()
 
 bookmarksStore.$subscribe((mutation, state) => {
 	localStorage.setItem("bookmarks", JSON.stringify(state.bookmarks))
@@ -42,11 +43,50 @@ settingsStore.$subscribe((mutation, state) => {
 legalStore.$subscribe((mutation, state) => {
 	localStorage.setItem("legal", JSON.stringify(state.legal))
 })
-rollupsRankingStore.$subscribe((mutation, state) => {
+activityStore.$subscribe((mutation, state) => {
 	localStorage.setItem("rollups_ranking", JSON.stringify(state.rollups_ranking))
 })
 
+let watchInterval = null
+
 onMounted(async () => {
+	/**
+	 * Watch for package.json->version and notify users about the new version
+	 */
+	appStore.version = (await $fetch("/api/version")).version
+	if (!import.meta.dev)
+		watchInterval = watchForUpdate(appStore.version, (newVersion) => {
+			clearInterval(watchInterval)
+			notificationsStore.create({
+				notification: {
+					type: "success",
+					icon: "info",
+					title: "New update is available",
+					description: "Refresh the page to get the latest update with new features & bug fixes.",
+					autoDestroy: false,
+					irremovable: true,
+					actions: [
+						{
+							name: "Refresh",
+							icon: "refresh",
+							callback: () => {
+								location.reload()
+							},
+						},
+						{
+							name: "Changelog",
+							icon: "menu",
+							callback: () => {
+								window
+									.open(`https://github.com/celenium-io/celenium-interface/releases/tag/v${newVersion}`, "_blank")
+									.focus()
+							},
+						},
+					],
+				},
+			})
+		})
+
 	if (localStorage.bookmarks) {
 		bookmarksStore.bookmarks = JSON.parse(localStorage.bookmarks)
 	}
@@ -56,7 +96,7 @@ onMounted(async () => {
 	}
 
 	settingsStore.init()
-	rollupsRankingStore.init()
+	activityStore.init()
 
 	const runtimeConfig = useRuntimeConfig()
 	amp.init(runtimeConfig.public.AMP)
@@ -117,6 +157,10 @@ onMounted(async () => {
 		Socket.close()
 	}
 })
+
+onBeforeUnmount(() => {
+	clearInterval(watchInterval)
+})
 </script>
 
 <template>
@@ -127,9 +171,9 @@ onMounted(async () => {
 		<NuxtPage />
 
 		<div id="tooltip" />
-		<div id="modal" />
 		<div id="dropdown" />
 		<div id="popover" />
+		<div id="modal" />
 
 		<ModalsManager />
 		<Notifications />

assets/styles/base.scss

@@ -46,8 +46,8 @@ $grayscale: (
 	--neutral-mint: #109373;
 	--dark-mint: #1e473d;
 	--legendary: #ff5a17;
-	--epic: #7448E7;
-	--rare: #007AFF;
+	--epic: #7448e7;
+	--rare: #007aff;
 
 	/* Grayscale */
 	@each $gray, $value in $grayscale {
@@ -78,10 +78,9 @@ $grayscale: (
 	--validator-active: #85f891;
 	--validator-inactive: #1ca7ed;
 	--validator-jailed: #f8774a;
-	// --supply: #65c7f8;
 	--supply: #1ca7ed;
 	--staking: #85f891;
-	--geo-map: #8B8C8D;
+	--geo-map: #8b8c8d;
 }
 
 [theme="dimmed"] {
@@ -105,7 +104,6 @@ $grayscale: (
 	--txt-white: rgba(255, 255, 255, 95%);
 
 	/* General */
-	// --brand: #18d2a5;
 	--brand: #33a853;
 	--blue: #0b84fe;
 	--red: #eb5757;
@@ -120,8 +118,8 @@ $grayscale: (
 	--neutral-mint: #109373;
 	--dark-mint: #1e473d;
 	--legendary: #ff5a17;
-	--epic: #7448E7;
-	--rare: #007AFF;
+	--epic: #7448e7;
+	--rare: #007aff;
 
 	/* Grayscale */
 	@each $gray, $value in $grayscale {
@@ -146,7 +144,7 @@ $grayscale: (
 	--block-progress-fill-background: #33a853;
 	--logo-name: var(--txt-primary);
 	--bar-fill: rgb(243, 147, 45);
-	--geo-map: #8B8C8D;
+	--geo-map: #8b8c8d;
 }
 
 [theme="light"] {
@@ -170,7 +168,6 @@ $grayscale: (
 	--txt-white: rgba(255, 255, 255, 95%);
 
 	/* General */
-	// --brand: #18d2a5;
 	--brand: #0ade71;
 	--blue: #0b84fe;
 	--red: #eb5757;
@@ -185,8 +182,8 @@ $grayscale: (
 	--neutral-mint: #109373;
 	--dark-mint: #c4f9eb;
 	--legendary: #ff5a17;
-	--epic: #7448E7;
-	--rare: #007AFF;
+	--epic: #7448e7;
+	--rare: #007aff;
 
 	/* Grayscale */
 	@each $gray, $value in $grayscale {
@@ -211,7 +208,7 @@ $grayscale: (
 	--block-progress-fill-background: #33a853;
 	--logo-name: var(--txt-primary);
 	--bar-fill: rgb(243, 147, 45);
-	--geo-map: #8B8C8D;
+	--geo-map: #8b8c8d;
 }
 
 @font-face {
@@ -273,7 +270,7 @@ body {
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-	
+
 	user-select: text;
 }
 

components/ActionBar.vue

@@ -11,14 +11,20 @@ import Search from "@/components/modules/navigation/Search.vue"
 import { isMobile } from "@/services/utils"
 
 /** Store */
-import { useAppStore } from "@/store/app"
+import { useAppStore } from "@/store/app.store"
 const appStore = useAppStore()
 </script>
 
 <template>
 	<Flex wide align="center" justify="between" gap="24" :class="$style.wrapper">
 		<Flex wide align="center" gap="12">
-			<Button v-if="isMobile()" @click="appStore.showSidebar = !appStore.showSidebar" type="secondary" size="medium" :class="$style.menu_btn">
+			<Button
+				v-if="isMobile()"
+				@click="appStore.showSidebar = !appStore.showSidebar"
+				type="secondary"
+				size="medium"
+				:class="$style.menu_btn"
+			>
 				<Icon name="menu" size="16" color="primary" />
 			</Button>
 

components/AmountInCurrency.vue

@@ -6,7 +6,7 @@ import { amountToString } from "@/services/utils"
 import Tooltip from "@/components/ui/Tooltip.vue"
 
 /** Store */
-import { useAppStore } from "@/store/app"
+import { useAppStore } from "@/store/app.store"
 const appStore = useAppStore()
 
 const currentPrice = computed(() => appStore.currentPrice)
@@ -74,12 +74,12 @@ const calculatedAmount = computed(() => {
 				...defaultCurrencyStyle,
 				...props.styles.currency,
 			},
-		}
+		},
 	}
 
 	let tiaDisplay
 	let tiaExchange
-	if (finalAmount.amount.unit === 'utia') {
+	if (finalAmount.amount.unit === "utia") {
 		tiaExchange = finalAmount.amount.value / 1_000_000
 
 		if (finalAmount.amount.currency === "TIA") {

components/BadgeValue.vue

@@ -5,7 +5,7 @@
 import { space } from "@/services/utils"
 
 /** Store */
-import { useNotificationsStore } from "@/store/notifications"
+import { useNotificationsStore } from "@/store/notifications.store"
 const notificationsStore = useNotificationsStore()
 
 const props = defineProps({

components/BookmarkButton.vue

@@ -3,13 +3,13 @@
 import Button from "@/components/ui/Button.vue"
 
 /** Services */
-import { capitilize } from "~/services/utils"
+import { capitilize } from "@/services/utils"
 
 /** Store */
-import { useBookmarksStore } from "@/store/bookmarks"
-import { useCacheStore } from "@/store/cache"
-import { useModalsStore } from "@/store/modals"
-import { useNotificationsStore } from "@/store/notifications"
+import { useBookmarksStore } from "@/store/bookmarks.store"
+import { useCacheStore } from "@/store/cache.store"
+import { useModalsStore } from "@/store/modals.store"
+import { useNotificationsStore } from "@/store/notifications.store"
 const bookmarksStore = useBookmarksStore()
 const cacheStore = useCacheStore()
 const modalsStore = useModalsStore()
@@ -39,7 +39,6 @@ const bookmarkText = computed(() => {
 
 const handleBookmark = () => {
 	if (!isBookmarked.value) {
-
 		let newBookmark = {
 			id: props.id,
 			type: capitilize(props.type),
@@ -70,7 +69,6 @@ const handleBookmark = () => {
 			cacheStore.current.bookmark = newBookmark
 			modalsStore.open("edit_alias")
 		}
-
 	} else {
 		let notification = {}
 
@@ -101,7 +99,6 @@ const handleBookmark = () => {
 onMounted(() => {
 	isBookmarked.value = bookmarksStore.getBookmark(props.type, props.id) ? true : false
 })
-
 </script>
 
 <template>

components/Connection.vue

@@ -5,13 +5,13 @@ import { Dropdown, DropdownTitle, DropdownItem, DropdownDivider } from "@/compon
 
 /** Services */
 import amp from "@/services/amp"
-import { disconnect } from "~/services/wallet"
+import { disconnect } from "@/services/wallet"
 import { arabica, mainnet, mammoth, mocha } from "@/services/chains"
 
 /** Store */
-import { useAppStore } from "@/store/app"
-import { useModalsStore } from "@/store/modals"
-import { useNotificationsStore } from "@/store/notifications"
+import { useAppStore } from "@/store/app.store"
+import { useModalsStore } from "@/store/modals.store"
+import { useNotificationsStore } from "@/store/notifications.store"
 const appStore = useAppStore()
 const modalsStore = useModalsStore()
 const notificationsStore = useNotificationsStore()
@@ -22,28 +22,22 @@ const { hostname } = useRequestURL()
 
 switch (hostname) {
 	case "celenium.io":
-		// case "dev.celenium.io":
 		appStore.network = mainnet
 		break
 
 	case "mocha.celenium.io":
 	case "mocha-4.celenium.io":
 		appStore.network = mocha
 		break
-	
+
 	case "mammoth.celenium.io":
 		appStore.network = mammoth
 		break
 
-	case "mammoth.celenium.io":
- 		appStore.network = mammoth
- 		break
-
-	// case "arabica.celenium.io":
 	case "localhost":
 		appStore.network = arabica
 		break
-	
+
 	default:
 		appStore.network = arabica
 		break

components/CopyButton.vue

@@ -1,6 +1,6 @@
 <script setup>
 /** Store */
-import { useNotificationsStore } from "@/store/notifications"
+import { useNotificationsStore } from "@/store/notifications.store"
 const notificationsStore = useNotificationsStore()
 
 const props = defineProps({