Merge pull request #26 from celenium-io/dev

Dev

Author: xdeq

app.vue

@@ -1,13 +1,16 @@
 <script setup>
 /** Services */
 import Socket from "@/services/api/socket"
-import { fetchHead } from "@/services/api/main"
 import amp from "@/services/amp"
 
 /** Components */
 import ModalsManager from "@/components/modals/ModalsManager.vue"
 import CommandMenu from "@/components/cmd/CommandMenu.vue"
 
+/** API */
+import { fetchGasPrice } from "@/services/api/gas"
+import { fetchHead } from "@/services/api/main"
+
 /** Store */
 import { useAppStore } from "@/store/app"
 import { useBookmarksStore } from "@/store/bookmarks"
@@ -21,14 +24,17 @@ onMounted(async () => {
 	const runtimeConfig = useRuntimeConfig()
 	amp.init(runtimeConfig.public.AMP)
 
+	const head = await fetchHead()
+	if (head) appStore.lastHead = head
+
+	Socket.init()
+
 	if (localStorage.bookmarks) {
 		bookmarksStore.bookmarks = JSON.parse(localStorage.bookmarks)
 	}
 
-	Socket.init()
-
-	const data = await fetchHead()
-	if (data) appStore.head = data
+	const gasPrice = await fetchGasPrice()
+	appStore.gas = gasPrice
 
 	window.onbeforeunload = function () {
 		Socket.close()

assets/icons.json

@@ -5,7 +5,7 @@ const notificationsStore = useNotificationsStore()
 
 const props = defineProps({
 	text: {
-		type: String,
+		type: [String, Number],
 	},
 	size: {
 		type: String,

components/CopyButton.vue

@@ -15,7 +15,7 @@ import { fetchPrice, fetchPriceSeries } from "@/services/api/stats"
 import { useAppStore } from "@/store/app"
 const appStore = useAppStore()
 
-const head = computed(() => appStore.head)
+const head = computed(() => appStore.lastHead)
 
 const series = ref([])
 const price = reactive({
@@ -139,7 +139,7 @@ onMounted(async () => {
 							<Text color="primary">Price diff from the previous day</Text>
 						</Flex>
 
-						<Flex align="center" gap="4">
+						<Flex v-if="series.length" align="center" gap="4">
 							<Text color="tertiary">{{ DateTime.fromISO(series[1].time).setLocale("en").toFormat("ff") }} -></Text>
 							<Text color="primary">${{ parseFloat(series[1].close).toFixed(2) }}</Text>
 						</Flex>

components/Feed.vue

@@ -141,7 +141,7 @@ const handleChangeTheme = (theme) => {
 					</Flex>
 				</Flex>
 
-				<Flex align="center" gap="16">
+				<Flex align="center" gap="16" :class="$style.links">
 					<NuxtLink to="/blocks" :class="$style.link">
 						<Text size="12" weight="500" color="tertiary"> Blocks </Text>
 					</NuxtLink>
@@ -151,6 +151,9 @@ const handleChangeTheme = (theme) => {
 					<NuxtLink to="/namespaces" :class="$style.link">
 						<Text size="12" weight="500" color="tertiary"> Namespaces </Text>
 					</NuxtLink>
+					<NuxtLink to="/rollups" :class="$style.link">
+						<Text size="12" weight="500" color="tertiary"> Rollups </Text>
+					</NuxtLink>
 					<NuxtLink to="/addresses" :class="$style.link">
 						<Text size="12" weight="500" color="tertiary"> Addresses </Text>
 					</NuxtLink>
@@ -215,5 +218,10 @@ const handleChangeTheme = (theme) => {
 		flex-direction: column;
 		gap: 12px;
 	}
+
+	.links {
+		flex-wrap: wrap;
+		justify-content: center;
+	}
 }
 </style>

components/TheFooter.vue

@@ -23,7 +23,7 @@ let removeOutside = null
 const headerEl = ref(null)
 const showPopup = ref(false)
 
-const head = computed(() => appStore.head)
+const head = computed(() => appStore.lastHead)
 
 const featurePreviewMode = ref(false)
 const isWalletAvailable = ref(false)
@@ -72,6 +72,9 @@ const isActive = (link) => {
 		case "namespaces":
 			return splittedPath.includes("namespace") || splittedPath.includes("namespaces")
 
+		case "rollups":
+			return splittedPath.includes("rollup") || splittedPath.includes("rollups")
+
 		default:
 			break
 	}
@@ -125,6 +128,10 @@ const handleConnect = async () => {
 				<NuxtLink to="/namespaces" :class="[$style.link, isActive('namespaces') && $style.active]">
 					<Text size="13" weight="600" color="tertiary">Namespaces</Text>
 				</NuxtLink>
+
+				<NuxtLink to="/rollups" :class="[$style.link, isActive('rollups') && $style.active]">
+					<Text size="13" weight="600" color="tertiary">Rollups</Text>
+				</NuxtLink>
 			</Flex>
 
 			<Flex align="center" gap="8">
@@ -192,6 +199,10 @@ const handleConnect = async () => {
 			<NuxtLink to="/namespaces" :class="[$style.link, isActive('namespaces') && $style.active]">
 				<Text size="13" weight="600" color="tertiary">Namespaces</Text>
 			</NuxtLink>
+
+			<NuxtLink to="/rollups" :class="[$style.link, isActive('rollups') && $style.active]">
+				<Text size="13" weight="600" color="tertiary">Rollups</Text>
+			</NuxtLink>
 		</Flex>
 	</Flex>
 </template>
@@ -340,7 +351,7 @@ const handleConnect = async () => {
 	}
 }
 
-@media (max-width: 700px) {
+@media (max-width: 850px) {
 	.links {
 		display: none;
 	}
@@ -359,4 +370,10 @@ const handleConnect = async () => {
 		margin: 0 12px;
 	}
 }
+
+@media (max-width: 400px) {
+	.logo_name {
+		display: none;
+	}
+}
 </style>