Merge branch 'dev' of github.com:celenium-io/celenium-interface into hex

Author: xdeq

app.vue

@@ -10,6 +10,7 @@ import CommandMenu from "@/components/cmd/CommandMenu.vue"
 /** API */
 import { fetchGasPrice } from "@/services/api/gas"
 import { fetchHead } from "@/services/api/main"
+import { fetchLatestBlocks } from "@/services/api/block"
 
 /** Store */
 import { useAppStore } from "@/store/app"
@@ -28,6 +29,10 @@ onMounted(async () => {
 	const runtimeConfig = useRuntimeConfig()
 	amp.init(runtimeConfig.public.AMP)
 
+	const data = await fetchLatestBlocks({ limit: 15 })
+	appStore.latestBlocks = data
+	appStore.isLatestBlocksLoaded = true
+
 	const head = await fetchHead()
 	if (head) appStore.lastHead = head
 

assets/icons.json

@@ -67,12 +67,11 @@ $grayscale: (
 	--block-progress-fill-background: #33a853;
 	--logo-name: var(--txt-primary);
 	--bar-fill: rgb(243, 147, 45);
-	--validator-active: #85F891;
-	--validator-inactive: #65C7F8;
-	--validator-jailed: #F8774A;
-	--supply: #65C7F8;
-	--staking: #85F891;
-
+	--validator-active: #85f891;
+	--validator-inactive: #65c7f8;
+	--validator-jailed: #f8774a;
+	--supply: #65c7f8;
+	--staking: #85f891;
 }
 
 [theme="dimmed"] {
@@ -274,6 +273,12 @@ body {
 	cursor: copy;
 }
 
+.divider_v {
+	width: 2px;
+	height: 16px;
+	background: var(--op-10);
+}
+
 .dot {
 	width: 3px;
 	height: 3px;

assets/styles/base.scss

@@ -25,16 +25,15 @@ const router = useRouter()
 
 const isWalletAvailable = ref(false)
 const isFetchingAccounts = ref(false)
-const account = ref()
 
 const { hostname } = useRequestURL()
 
 switch (hostname) {
 	case "celenium.io":
+	case "dev.celenium.io":
 		appStore.network = mainnet
 		break
 
-	case "dev.celenium.io":
 	case "arabica.celenium.io":
 	case "localhost":
 		appStore.network = arabica
@@ -70,7 +69,6 @@ const handleConnect = async () => {
 
 		const accounts = await getAccounts(appStore.network)
 		if (accounts.length) {
-			account.value = accounts[0].address
 			appStore.address = accounts[0].address
 		}
 
@@ -116,7 +114,6 @@ const handleDisconnect = () => {
 
 	amp.log("disconnect")
 
-	account.value = null
 	appStore.address = ""
 	appStore.balance = 0
 
@@ -157,7 +154,7 @@ const handleDisconnect = () => {
 		<template #content> Insall Keplr Wallet before connection </template>
 	</Tooltip>
 
-	<Button v-else-if="!account" @click="handleConnect" type="white" size="small"> Connect </Button>
+	<Button v-else-if="!appStore.address" @click="handleConnect" type="white" size="small"> Connect </Button>
 
 	<Dropdown v-else>
 		<Button type="secondary" size="small">

components/Connection.vue

@@ -165,6 +165,9 @@ const handleChangeTheme = (target) => {
 					<NuxtLink to="/addresses" :class="$style.link">
 						<Text size="12" weight="500" color="tertiary"> Addresses </Text>
 					</NuxtLink>
+					<NuxtLink to="/blobstream" :class="$style.link">
+						<Text size="12" weight="500" color="tertiary"> Blobstream </Text>
+					</NuxtLink>
 					<NuxtLink to="/gas" :class="$style.link">
 						<Text size="12" weight="500" color="tertiary"> Gas Tracker </Text>
 					</NuxtLink>

components/TheFooter.vue

@@ -273,6 +273,15 @@ const rawNavigationActions = [
 			router.push("/addresses")
 		},
 	},
+	{
+		type: "callback",
+		icon: "arrow-narrow-right",
+		title: "Go to Blobstream",
+		runText: "Open Blobstream",
+		callback: () => {
+			router.push("/blobstream")
+		},
+	},
 	{
 		type: "callback",
 		icon: "arrow-narrow-right",