Merge branch 'dev' into CLS-202-enhanced-account-page

Author: GusevPM

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({
@@ -124,9 +124,9 @@ onMounted(async () => {
 
 					<Flex v-if="price.diff" align="center" gap="4">
 						<Icon v-if="price.side === 'rise'" name="arrow-circle-right-up" size="12" color="neutral-green" />
-						<Icon v-else name="arrow-circle-right-down" size="12" color="secondary" />
+						<Icon v-else name="arrow-circle-right-down" size="12" color="red" />
 
-						<Text size="12" weight="600" :color="price.side === 'rise' ? 'neutral-green' : 'secondary'" noWrap>
+						<Text size="12" weight="600" :color="price.side === 'rise' ? 'neutral-green' : 'red'" noWrap>
 							{{ price.diff.toFixed(2) }}%</Text
 						>
 					</Flex>
@@ -135,11 +135,17 @@ onMounted(async () => {
 
 				<template #content>
 					<Flex direction="column" gap="6">
-						Price diff from the previous day
-
 						<Flex align="center" gap="4">
+							<Text color="primary">Price diff from the previous day</Text>
+						</Flex>
+
+						<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">${{ series[1].close }}</Text>
+							<Text color="primary">${{ parseFloat(series[1].close).toFixed(2) }}</Text>
+						</Flex>
+
+						<Flex align="center" gap="4">
+							<Text size="11" color="tertiary">Binance quotes</Text>
 						</Flex>
 					</Flex>
 				</template>

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,12 +23,20 @@ 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)
 
-onMounted(() => {
+const account = ref("")
+
+const getAccounts = async () => {
+	const offlineSigner = window.getOfflineSigner("celestia")
+	const accounts = await offlineSigner.getAccounts()
+	if (accounts.length) account.value = accounts[0].address
+}
+
+onMounted(async () => {
 	featurePreviewMode.value = localStorage.featurePreview
 	isWalletAvailable.value = !!window.keplr
 })
@@ -64,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
 	}
@@ -73,8 +84,10 @@ const handleNavigate = (url) => {
 	window.location.replace(url)
 }
 
-const handleConnect = () => {
-	window.keplr.enable("celestia")
+const handleConnect = async () => {
+	await window.keplr.enable("celestia")
+
+	getAccounts()
 }
 </script>
 
@@ -115,6 +128,10 @@ const handleConnect = () => {
 				<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">
@@ -154,8 +171,14 @@ const handleConnect = () => {
 					</template>
 				</Tooltip>
 
-				<Button v-if="featurePreviewMode" @click="handleConnect" type="white" size="small" :disabled="!isWalletAvailable">
-					Connect
+				<Button
+					v-if="featurePreviewMode"
+					@click="handleConnect"
+					type="white"
+					size="small"
+					:disabled="!isWalletAvailable || account.length"
+				>
+					{{ account ? `celestia...${account.slice(-6)}` : "Connect" }}
 				</Button>
 			</Flex>
 		</Flex>
@@ -176,6 +199,10 @@ const handleConnect = () => {
 			<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>
@@ -324,7 +351,7 @@ const handleConnect = () => {
 	}
 }
 
-@media (max-width: 700px) {
+@media (max-width: 850px) {
 	.links {
 		display: none;
 	}
@@ -343,4 +370,10 @@ const handleConnect = () => {
 		margin: 0 12px;
 	}
 }
+
+@media (max-width: 400px) {
+	.logo_name {
+		display: none;
+	}
+}
 </style>