Fix bugs and breadcrumbs refactoring

Author: GusevPM

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 {

components/cmd/CommandMenu.vue

@@ -862,7 +862,6 @@ const searchAction = {
 		if (!searchTerm.value.length) return
 
 		const { data } = await search(searchTerm.value.trim())
-		console.log('Manual search data', data);
 		if (!data.value.length) {
 			notificationsStore.create({
 				notification: {
@@ -928,9 +927,6 @@ const debouncedSearch = useDebounceFn(async (e) => {
 
 	data.value = [...bookmarks, ...data.value]
 
-	console.log('debouncedSearch data', data);
-	console.log('debouncedSearch bookmarks', bookmarks);
-
 	if (!data.value?.length) return
 
 	amp.log("showAutocomplete", { count: data.value.length, firstType: data.value[0].type })

components/modules/address/AddressOverview.vue

@@ -17,7 +17,7 @@ import UndelegationsTable from "./tables/UndelegationsTable.vue"
 import AmountInCurrency from "@/components/AmountInCurrency.vue"
 
 /** Services */
-import { comma, tia } from "@/services/utils"
+import { comma, splitAddress } from "@/services/utils"
 import { MsgTypes } from "@/services/constants/messages"
 
 /** API */
@@ -573,7 +573,7 @@ const handleOpenQRModal = () => {
 						<Text size="12" weight="600" color="secondary">Address</Text>
 
 						<Flex align="center" gap="10">
-							<AddressBadge :hash="address.hash" />
+							<Text size="12" weight="600" color="secondary"> {{ splitAddress(address.hash) }} </Text>
 
 							<CopyButton :text="address.hash" />
 						</Flex>

components/modules/tx/TxOverview.vue

@@ -76,7 +76,7 @@ const handleViewRawTransaction = () => {
 
 			<Flex align="center" gap="12">
 				<BookmarkButton
-					type="tx"
+					type="transaction"
 					:id="tx.hash"
 				/>
 
@@ -194,7 +194,6 @@ const handleViewRawTransaction = () => {
 
 								<CopyButton :text="tx.signers[0]" />
 							</Flex>
-							<!-- <Text size="12" weight="600" color="secondary"> {{ splitAddress(tx.signers[0]) }} </Text> -->
 						</Flex>
 						<Flex align="center" justify="between">
 							<Text size="12" weight="600" color="tertiary"> Events</Text>

pages/address/[hash].vue

@@ -79,6 +79,12 @@ useHead({
 onBeforeRouteLeave(() => {
 	cacheStore.current.address = null
 })
+
+const displayName = computed(() => {
+	const { $getDisplayName } = useNuxtApp()
+
+  	return $getDisplayName('address', address.value.hash)
+})
 </script>
 
 <template>
@@ -88,7 +94,7 @@ onBeforeRouteLeave(() => {
 			:items="[
 				{ link: '/', name: 'Explore' },
 				{ link: '/addresses', name: 'Addresses' },
-				{ link: route.fullPath, name: `${address.hash}` },
+				{ link: route.fullPath, name: `${displayName}` },
 			]"
 			:class="$style.breadcrumbs"
 		/>

pages/block/[height].vue

@@ -82,6 +82,12 @@ useHead({
 		},
 	],
 })
+
+const displayName = computed(() => {
+	const { $getDisplayName } = useNuxtApp()
+
+  	return $getDisplayName('block', block.value?.height)
+})
 </script>
 
 <template>
@@ -91,7 +97,7 @@ useHead({
 			:items="[
 				{ link: '/', name: 'Explore' },
 				{ link: '/blocks', name: 'Blocks' },
-				{ link: route.fullPath, name: `Block ${comma(block.height)}` },
+				{ link: route.fullPath, name: `${displayName}` },
 			]"
 			:class="$style.breadcrumbs"
 		/>

pages/namespace/[id].vue

@@ -80,6 +80,13 @@ useHead({
 onBeforeRouteLeave(() => {
 	cacheStore.current.namespace = null
 })
+
+const displayName = computed(() => {
+	const { $getDisplayName } = useNuxtApp()
+
+  	return $getDisplayName('namespace', namespace.value.namespace_id)
+})
+
 </script>
 
 <template>
@@ -90,7 +97,7 @@ onBeforeRouteLeave(() => {
 				:items="[
 					{ link: '/', name: 'Explore' },
 					{ link: '/namespaces', name: 'Namespaces' },
-					{ link: route.fullPath, name: `${getNamespaceID(namespace.namespace_id)}` },
+					{ link: route.fullPath, name: `${displayName}` },
 				]"
 			/>
 

pages/tx/[hash].vue

@@ -82,6 +82,12 @@ useHead({
 		},
 	],
 })
+
+const displayName = computed(() => {
+	const { $getDisplayName } = useNuxtApp()
+
+  	return $getDisplayName('tx', tx.value?.hash)
+})
 </script>
 
 <template>
@@ -93,7 +99,7 @@ useHead({
 				{ link: '/txs', name: 'Transactions' },
 				{
 					link: route.fullPath,
-					name: `Transaction ${tx.hash.toUpperCase().slice(0, 4)} ••• ${tx.hash.toUpperCase().slice(-4)}`,
+					name: `${displayName}`,
 				},
 			]"
 			:class="$style.breadcrumbs"

store/bookmarks.js

@@ -39,7 +39,7 @@ export const useBookmarksStore = defineStore("bookmarks", () => {
 		for (let i = 0; i < store.length; i++) {
 			let el = store[i]
 			if (el.id === id) {
-				return el.alias
+				return el.alias || el.id
 			}
 		}
 
@@ -99,6 +99,7 @@ export const useBookmarksStore = defineStore("bookmarks", () => {
 				return bookmarks.value.namespaces
 			case 'tx':
 			case 'txs':
+			case 'transaction':
 				return bookmarks.value.txs
 			default:
 				return null