CLS sprint 16

assets/icons.json

@@ -22,6 +22,7 @@
 	"unselect": "M13 2C13 1.44772 12.5523 1 12 1C11.4477 1 11 1.44772 11 2V3.05493C6.82838 3.51608 3.51608 6.82838 3.05493 11H2C1.44772 11 1 11.4477 1 12C1 12.5523 1.44772 13 2 13H3.05493C3.51608 17.1716 6.82838 20.4839 11 20.9451V22C11 22.5523 11.4477 23 12 23C12.5523 23 13 22.5523 13 22V20.9451C17.1716 20.4839 20.4839 17.1716 20.9451 13H22C22.5523 13 23 12.5523 23 12C23 11.4477 22.5523 11 22 11H20.9451C20.4839 6.82838 17.1716 3.51608 13 3.05493V2ZM7 12C7 9.23858 9.23858 7 12 7C14.7614 7 17 9.23858 17 12C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12Z",
 	"download": "M12 2C12.5523 2 13 2.44772 13 3V12.5858L16.2929 9.29289C16.6834 8.90237 17.3166 8.90237 17.7071 9.29289C18.0976 9.68342 18.0976 10.3166 17.7071 10.7071L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L6.29289 10.7071C5.90237 10.3166 5.90237 9.68342 6.29289 9.29289C6.68342 8.90237 7.31658 8.90237 7.70711 9.29289L11 12.5858V3C11 2.44772 11.4477 2 12 2ZM4 15C4 14.4477 3.55229 14 3 14C2.44772 14 2 14.4477 2 15V16.2413V16.2414C1.99999 17.0464 1.99998 17.7106 2.04419 18.2518C2.09012 18.8139 2.18868 19.3306 2.43598 19.816C2.81947 20.5686 3.43139 21.1805 4.18404 21.564C4.66937 21.8113 5.18608 21.9099 5.74818 21.9558C6.28937 22 6.95373 22 7.7587 22H16.2413C17.0463 22 17.7106 22 18.2518 21.9558C18.8139 21.9099 19.3306 21.8113 19.816 21.564C20.5686 21.1805 21.1805 20.5686 21.564 19.816C21.8113 19.3306 21.9099 18.8139 21.9558 18.2518C22 17.7106 22 17.0463 22 16.2413V15C22 14.4477 21.5523 14 21 14C20.4477 14 20 14.4477 20 15V16.2C20 17.0566 19.9992 17.6389 19.9624 18.089C19.9266 18.5274 19.8617 18.7516 19.782 18.908C19.5903 19.2843 19.2843 19.5903 18.908 19.782C18.7516 19.8617 18.5274 19.9266 18.089 19.9624C17.6389 19.9992 17.0566 20 16.2 20H7.8C6.94342 20 6.36113 19.9992 5.91104 19.9624C5.47262 19.9266 5.24842 19.8617 5.09202 19.782C4.7157 19.5903 4.40973 19.2843 4.21799 18.908C4.1383 18.7516 4.07337 18.5274 4.03755 18.089C4.00078 17.6389 4 17.0566 4 16.2V15Z",
 	"upload": "M12.7071 2.29289C12.3166 1.90237 11.6834 1.90237 11.2929 2.29289L6.29289 7.29289C5.90237 7.68342 5.90237 8.31658 6.29289 8.70711C6.68342 9.09763 7.31658 9.09763 7.70711 8.70711L11 5.41421V15C11 15.5523 11.4477 16 12 16C12.5523 16 13 15.5523 13 15V5.41421L16.2929 8.70711C16.6834 9.09763 17.3166 9.09763 17.7071 8.70711C18.0976 8.31658 18.0976 7.68342 17.7071 7.29289L12.7071 2.29289ZM4 15C4 14.4477 3.55229 14 3 14C2.44772 14 2 14.4477 2 15V16.2413V16.2414C1.99999 17.0464 1.99998 17.7106 2.04419 18.2518C2.09012 18.8139 2.18868 19.3306 2.43598 19.816C2.81947 20.5686 3.43139 21.1805 4.18404 21.564C4.66937 21.8113 5.18608 21.9099 5.74818 21.9558C6.28937 22 6.95373 22 7.7587 22H16.2413C17.0463 22 17.7106 22 18.2518 21.9558C18.8139 21.9099 19.3306 21.8113 19.816 21.564C20.5686 21.1805 21.1805 20.5686 21.564 19.816C21.8113 19.3306 21.9099 18.8139 21.9558 18.2518C22 17.7106 22 17.0463 22 16.2413V15C22 14.4477 21.5523 14 21 14C20.4477 14 20 14.4477 20 15V16.2C20 17.0566 19.9992 17.6389 19.9624 18.089C19.9266 18.5274 19.8617 18.7516 19.782 18.908C19.5903 19.2843 19.2843 19.5903 18.908 19.782C18.7516 19.8617 18.5274 19.9266 18.089 19.9624C17.6389 19.9992 17.0566 20 16.2 20H7.8C6.94342 20 6.36113 19.9992 5.91104 19.9624C5.47262 19.9266 5.24842 19.8617 5.09202 19.782C4.7157 19.5903 4.40973 19.2843 4.21799 18.908C4.1383 18.7516 4.07337 18.5274 4.03755 18.089C4.00078 17.6389 4 17.0566 4 16.2V15Z",
+	"bookmark": "M9.7587 2H14.2413C15.0463 1.99999 15.7106 1.99998 16.2518 2.04419C16.8139 2.09012 17.3306 2.18868 17.816 2.43597C18.5686 2.81947 19.1805 3.43139 19.564 4.18404C19.8113 4.66937 19.9099 5.18608 19.9558 5.74817C20 6.28938 20 6.95374 20 7.75873V21C20 21.3565 19.8102 21.686 19.5019 21.8649C19.1936 22.0438 18.8134 22.0451 18.5039 21.8682L12 18.1518L5.49614 21.8682C5.18664 22.0451 4.80639 22.0438 4.49807 21.8649C4.18976 21.686 4 21.3565 4 21V7.7587C3.99999 6.95373 3.99998 6.28937 4.04419 5.74817C4.09012 5.18608 4.18868 4.66937 4.43597 4.18404C4.81947 3.43139 5.43139 2.81947 6.18404 2.43597C6.66937 2.18868 7.18608 2.09012 7.74817 2.04419C8.28937 1.99998 8.95373 1.99999 9.7587 2Z",
 	"bookmark-plus": "M14.2413 2H9.7587C8.95374 1.99999 8.28937 1.99998 7.74818 2.04419C7.18608 2.09012 6.66937 2.18868 6.18404 2.43598C5.43139 2.81947 4.81947 3.43139 4.43598 4.18404C4.18868 4.66937 4.09012 5.18608 4.04419 5.74818C3.99998 6.28937 3.99999 6.95372 4 7.75869V21C4 21.3565 4.18976 21.686 4.49807 21.8649C4.80639 22.0438 5.18664 22.0451 5.49614 21.8682L12 18.1518L18.5039 21.8682C18.8134 22.0451 19.1936 22.0438 19.5019 21.8649C19.8102 21.686 20 21.3565 20 21V7.75873C20 6.95376 20 6.28937 19.9558 5.74818C19.9099 5.18608 19.8113 4.66937 19.564 4.18404C19.1805 3.43139 18.5686 2.81947 17.816 2.43598C17.3306 2.18868 16.8139 2.09012 16.2518 2.04419C15.7106 1.99998 15.0463 1.99999 14.2413 2ZM12 6C12.5523 6 13 6.44772 13 7V9H15C15.5523 9 16 9.44772 16 10C16 10.5523 15.5523 11 15 11H13V13C13 13.5523 12.5523 14 12 14C11.4477 14 11 13.5523 11 13V11H9C8.44772 11 8 10.5523 8 10C8 9.44772 8.44772 9 9 9H11V7C11 6.44772 11.4477 6 12 6Z",
 	"bookmark-check": "M 14.242 2 C 15.046 2 15.71 2 16.252 2.044 C 16.814 2.09 17.331 2.189 17.816 2.436 C 18.569 2.819 19.181 3.431 19.564 4.184 C 19.811 4.669 19.91 5.186 19.956 5.749 C 20 6.289 20 6.954 20 7.759 L 20 21 C 20 21.356 19.81 21.686 19.502 21.865 C 19.194 22.043 18.813 22.045 18.504 21.868 L 12 18.152 L 5.496 21.868 C 5.187 22.045 4.806 22.043 4.498 21.865 C 4.19 21.686 4 21.356 4 21 L 4 7.758 C 4 6.954 4 6.29 4.045 5.748 C 4.091 5.186 4.19 4.669 4.437 4.184 C 4.82 3.431 5.432 2.819 6.185 2.436 C 6.67 2.189 7.187 2.09 7.75 2.044 C 8.29 2 8.955 2 9.76 2 Z M 16.207 8.707 C 16.586 8.315 16.581 7.691 16.195 7.305 C 15.809 6.919 15.185 6.914 14.793 7.293 L 11 11.086 L 9.707 9.793 C 9.315 9.414 8.691 9.419 8.305 9.805 C 7.919 10.191 7.914 10.815 8.293 11.207 L 10.293 13.207 C 10.683 13.597 11.317 13.597 11.707 13.207 Z",
 	"bookmark-x": "M14.2413 2H9.7587C8.95374 1.99999 8.28937 1.99998 7.74818 2.04419C7.18608 2.09012 6.66937 2.18868 6.18404 2.43598C5.43139 2.81947 4.81947 3.43139 4.43598 4.18404C4.18868 4.66937 4.09012 5.18608 4.04419 5.74818C3.99998 6.28937 3.99999 6.95372 4 7.75869V21C4 21.3565 4.18976 21.686 4.49807 21.8649C4.80639 22.0438 5.18664 22.0451 5.49614 21.8682L12 18.1518L18.5039 21.8682C18.8134 22.0451 19.1936 22.0438 19.5019 21.8649C19.8102 21.686 20 21.3565 20 21V7.75873C20 6.95376 20 6.28937 19.9558 5.74818C19.9099 5.18608 19.8113 4.66937 19.564 4.18404C19.1805 3.43139 18.5686 2.81947 17.816 2.43598C17.3306 2.18868 16.8139 2.09012 16.2518 2.04419C15.7106 1.99998 15.0463 1.99999 14.2413 2ZM8.79289 6.79289C9.18342 6.40237 9.81658 6.40237 10.2071 6.79289L12 8.58579L13.7929 6.79289C14.1834 6.40237 14.8166 6.40237 15.2071 6.79289C15.5976 7.18342 15.5976 7.81658 15.2071 8.20711L13.4142 10L15.2071 11.7929C15.5976 12.1834 15.5976 12.8166 15.2071 13.2071C14.8166 13.5976 14.1834 13.5976 13.7929 13.2071L12 11.4142L10.2071 13.2071C9.81658 13.5976 9.18342 13.5976 8.79289 13.2071C8.40237 12.8166 8.40237 12.1834 8.79289 11.7929L10.5858 10L8.79289 8.20711C8.40237 7.81658 8.40237 7.18342 8.79289 6.79289Z",

assets/styles/base.scss

@@ -245,7 +245,7 @@ body {
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 
-	user-select: none;
+	user-select: text;
 }
 
 *::-webkit-scrollbar {
@@ -338,3 +338,17 @@ body {
 .slide-leave-to {
 	transform: translateY(-25px);
 }
+
+.table_column_alias {
+	max-width: 125px;
+
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.overflow_ellipsis {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}

components/AddressBadge.vue

@@ -1,52 +1,26 @@
 <script setup>
-defineProps({
+const props = defineProps({
 	hash: {
 		type: String,
 		required: true,
 	},
 	color: {
 		type: String,
 		default: "primary"
-	}
+	},
+})
+
+const alias = computed(() => {
+	const { $getDisplayName } = useNuxtApp()
+
+  	return $getDisplayName('addresses', props.hash)
 })
 </script>
 
 <template>
 	<NuxtLink :to="`/address/${hash}`" @click.stop>
 		<Flex align="center" gap="6">
-			<template v-if="hash.startsWith('celestiavaloper')">
-				<Text size="13" weight="600" :color="color"> celestiavaloper </Text>
-
-				<Flex align="center" gap="3">
-					<div v-for="dot in 3" class="dot" />
-				</Flex>
-
-				<Text size="13" weight="600" :color="color">
-					{{ hash.slice(hash.length - 4, hash.length) }}
-				</Text>
-			</template>
-			<template v-else-if="hash.startsWith('celestiavalcons')">
-				<Text size="13" weight="600" :color="color"> celestiavalcons </Text>
-
-				<Flex align="center" gap="3">
-					<div v-for="dot in 3" class="dot" />
-				</Flex>
-
-				<Text size="13" weight="600" :color="color">
-					{{ hash.slice(hash.length - 4, hash.length) }}
-				</Text>
-			</template>
-			<template v-else>
-				<Text size="13" weight="600" :color="color"> celestia </Text>
-
-				<Flex align="center" gap="3">
-					<div v-for="dot in 3" class="dot" />
-				</Flex>
-
-				<Text size="13" weight="600" :color="color">
-					{{ hash.slice(hash.length - 4, hash.length) }}
-				</Text>
-			</template>
+			<Text size="13" weight="600" :color="color"> {{ alias }} </Text>
 		</Flex>
 	</NuxtLink>
 </template>

components/BookmarkButton.vue

@@ -0,0 +1,142 @@
+<script setup>
+/** UI */
+import Button from "@/components/ui/Button.vue"
+
+/** Services */
+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"
+const bookmarksStore = useBookmarksStore()
+const cacheStore = useCacheStore()
+const modalsStore = useModalsStore()
+const notificationsStore = useNotificationsStore()
+
+const props = defineProps({
+	type: {
+		type: String,
+		required: true,
+	},
+	id: {
+		type: [String, Number],
+		required: true,
+	},
+})
+
+const router = useRouter()
+
+const bookmark = ref(null)
+const isBookmarked = ref(false)
+const isButtonHovered = ref(false)
+const bookmarkText = computed(() => {
+	if (isButtonHovered.value && isBookmarked.value) return "Remove"
+
+	return isBookmarked.value ? "Saved" : "Save"
+})
+
+const handleBookmark = () => {
+	if (!isBookmarked.value) {
+
+		let newBookmark = {
+			id: props.id,
+			type: capitilize(props.type),
+			ts: new Date().getTime(),
+		}
+
+		isBookmarked.value = bookmarksStore.addBookmark(newBookmark)
+
+		if (isBookmarked.value) {
+			notificationsStore.create({
+				notification: {
+					type: "success",
+					icon: "check",
+					title: `${capitilize(props.type)} added to bookmarks`,
+					description: "View all bookmarks on dedicated page",
+					autoDestroy: true,
+					actions: [
+						{
+							name: "Open Bookmarks",
+							callback: () => {
+								router.push("/bookmarks")
+							},
+						},
+					],
+				},
+			})
+
+			cacheStore.current.bookmark = newBookmark
+			modalsStore.open("edit_alias")
+		}
+
+	} else {
+		let notification = {}
+
+		if (bookmarksStore.removeBookmark(props.type, props.id)) {
+			notification = {
+				type: "success",
+				icon: "check",
+				title: `${capitilize(props.type)} removed from bookmarks`,
+				autoDestroy: true,
+			}
+
+			isBookmarked.value = false
+		} else {
+			notification = {
+				type: "error",
+				icon: "close",
+				title: `Failed to remove the bookmark`,
+				autoDestroy: true,
+			}
+		}
+
+		notificationsStore.create({
+			notification: notification,
+		})
+	}
+}
+
+onMounted(() => {
+	isBookmarked.value = bookmarksStore.getBookmark(props.type, props.id) ? true : false
+})
+
+</script>
+
+<template>
+	<Flex align="center" gap="8">
+		<Button
+			@click="handleBookmark"
+			@mouseenter="isButtonHovered = true"
+			@mouseleave="isButtonHovered = false"
+			type="secondary"
+			size="mini"
+		>
+			<Icon
+				:name="isButtonHovered && isBookmarked ? 'close' : isBookmarked ? 'bookmark-check' : 'bookmark-plus'"
+				size="12"
+				:color="isBookmarked && !isButtonHovered ? 'green' : 'primary'"
+			/>
+			{{ bookmarkText }}
+		</Button>
+	</Flex>
+</template>
+
+<style module>
+.items {
+	overflow: hidden;
+}
+
+.item {
+	& a {
+		display: flex;
+
+		&:hover {
+			& span {
+				color: var(--txt-primary);
+			}
+		}
+	}
+}
+</style>

components/Connection.vue

@@ -149,16 +149,16 @@ const handleDisconnect = () => {
 	</Tooltip>
 
 	<Tooltip v-else-if="!isWalletAvailable" position="end">
-		<Button type="white" size="small" disabled> Connect </Button>
+		<Button type="white" size="mini" disabled> Connect </Button>
 
 		<template #content> Insall Keplr Wallet before connection </template>
 	</Tooltip>
 
-	<Button v-else-if="!appStore.address" @click="handleConnect" type="white" size="small"> Connect </Button>
+	<Button v-else-if="!appStore.address" @click="handleConnect" type="white" size="mini"> Connect </Button>
 
 	<Dropdown v-else>
-		<Button type="secondary" size="small">
-			<Icon name="address" size="14" color="primary" />
+		<Button type="secondary" size="mini">
+			<Icon name="address" size="13" color="primary" />
 			{{ appStore.balance }} TIA
 		</Button>
 

components/TheHeader.vue

@@ -156,6 +156,20 @@ const handleNavigate = (url) => {
 					</template>
 				</Tooltip>
 
+				<Tooltip position="end" delay="250">
+					<NuxtLink to="/bookmarks">
+						<Button type="secondary" size="mini">
+							<Icon name="bookmark" size="16" color="secondary" />
+						</Button>
+					</NuxtLink>
+
+					<template #content>
+						<Flex align="center" gap="8">
+							Open My Bookmarks
+						</Flex>
+					</template>
+				</Tooltip>
+
 				<Connection :class="$style.connection_btn" />
 			</Flex>
 		</Flex>

components/cmd/CommandMenu.vue

@@ -922,35 +922,39 @@ const autocompleteGroup = computed(() => {
 })
 
 const debouncedSearch = useDebounceFn(async (e) => {
+	const bookmarks = bookmarksStore.searchBookmarks(searchTerm.value)
 	const { data } = await search(searchTerm.value.trim())
+
+	data.value = [...bookmarks, ...data.value]
+
 	if (!data.value?.length) return
 
 	amp.log("showAutocomplete", { count: data.value.length, firstType: data.value[0].type })
 
 	autocompleteActions.value = []
 
-	for (let i = 0; i < Math.min(3, data.value.length); i++) {
+	for (let i = 0; i < Math.min(5, data.value.length); i++) {
 		let title
 		let routerLink
 		switch (data.value[i].type) {
 			case "tx":
-				title = data.value[i].result.hash
-				routerLink = `/tx/${data.value[i].result.hash}`
+				title = data.value[i].result.alias || data.value[i].result.hash
+				routerLink = `/tx/${data.value[i].result.id || data.value[i].result.hash}`
 				break
 
 			case "block":
-				title = data.value[i].result.hash
-				routerLink = `/block/${data.value[i].result.height}`
+				title = data.value[i].result.alias || data.value[i].result.hash
+				routerLink = `/block/${data.value[i].result.id || data.value[i].result.height}`
 				break
 
 			case "namespace":
-				title = data.value[i].result.hash
-				routerLink = `/namespace/${data.value[i].result.namespace_id}`
+				title = data.value[i].result.alias || data.value[i].result.hash
+				routerLink = `/namespace/${data.value[i].result.id || data.value[i].result.namespace_id}`
 				break
 
 			case "address":
-				title = data.value[i].result.hash
-				routerLink = `/address/${data.value[i].result.hash}`
+				title = data.value[i].result.alias || data.value[i].result.hash
+				routerLink = `/address/${data.value[i].result.id || data.value[i].result.hash}`
 				break
 
 			case "rollup":
@@ -959,7 +963,7 @@ const debouncedSearch = useDebounceFn(async (e) => {
 				break
 
 			case "validator":
-				title = data.value[i].result.moniker ? data.value[i].result.moniker : data.value[i].result.address
+				title = data.value[i].result.alias || data.value[i].result.moniker ? data.value[i].result.moniker : data.value[i].result.address
 				routerLink = `/validator/${data.value[i].result.id}`
 				break
 
@@ -970,6 +974,7 @@ const debouncedSearch = useDebounceFn(async (e) => {
 		autocompleteActions.value.push({
 			id: id(),
 			type: "callback",
+			bookmark: data.value[i].bookmark,
 			icon: data.value[i].type,
 			title: title,
 			subtitle: capitilize(data.value[i].type),

components/cmd/Item.vue

@@ -23,9 +23,13 @@ const props = defineProps({
 			</Text>
 		</Flex>
 
-		<Text v-if="action.subtitle" size="12" weight="600" color="tertiary">
-			{{ action.subtitle }}
-		</Text>
+		<Flex align="center" gap="8">
+			<Icon v-if="action.bookmark" name="bookmark-check" size="12" color="tertiary" />
+
+			<Text v-if="action.subtitle" size="12" weight="600" color="tertiary">
+				{{ action.subtitle }}
+			</Text>
+		</Flex>
 	</Flex>
 </template>
 

components/data/BlocksTimeline/BlocksTimelineTable.vue

@@ -473,16 +473,8 @@ watch(
 										<Flex align="center" gap="8">
 											<Icon name="namespace" size="12" color="secondary" />
 
-											<Text size="13" weight="600" color="primary" mono>
-												{{ getNamespaceID(ns.namespace_id).slice(0, 4) }}
-											</Text>
-
-											<Flex align="center" gap="3">
-												<div v-for="dot in 3" class="dot" />
-											</Flex>
-
-											<Text size="13" weight="600" color="primary" mono>
-												{{ getNamespaceID(ns.namespace_id).slice(-4) }}
+											<Text size="13" weight="600" color="primary" mono class="overflow_ellipsis" style="max-width: 250px">
+												{{ $getDisplayName('namespaces', ns.namespace_id) }}
 											</Text>
 										</Flex>