From 86587f2b10cf140554ccbb34c050a8eb9fa034f8 Mon Sep 17 00:00:00 2001
From: GussevPM <GussevPM@GMail.Com>
Date: Sun, 19 May 2024 17:32:28 +0200
Subject: [PATCH 01/12] Fix rollup charts

---
 components/modules/rollup/RollupCharts.vue | 13 ++++++++++---
 services/config.js                         |  4 ++--
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/components/modules/rollup/RollupCharts.vue b/components/modules/rollup/RollupCharts.vue
index 870ef88f..c973e8c8 100644
--- a/components/modules/rollup/RollupCharts.vue
+++ b/components/modules/rollup/RollupCharts.vue
@@ -357,7 +357,7 @@ onBeforeUnmount(() => {
 		</Flex>
 
 		<Flex direction="column">
-			<Flex justify="between" gap="32" :class="$style.data">
+			<Flex justify="between" gap="32" :class="[$style.data, $style.top]">
 				<Flex direction="column" gap="20" wide>
 					<Text size="13" weight="600" color="primary">DA Usage</Text>
 
@@ -536,7 +536,7 @@ onBeforeUnmount(() => {
 				</Flex>
 			</Flex>
 
-			<Flex justify="between" gap="32" :class="$style.data">
+			<Flex justify="between" gap="32" :class="[$style.data, $style.bottom]">
 				<Flex direction="column" gap="20" wide>
 					<Text size="13" weight="600" color="primary">Fee Paid</Text>
 
@@ -645,12 +645,19 @@ onBeforeUnmount(() => {
 }
 
 .data {
-	border-radius: 4px 4px 8px 8px;
 	background: var(--card-background);
 
 	padding: 16px;
 }
 
+.top {
+	border-radius: 4px 4px 0px 0px;
+}
+
+.bottom {
+	border-radius: 0px 0px 8px 8px;
+}
+
 .chart_wrapper {
 	position: relative;
 
diff --git a/services/config.js b/services/config.js
index e77cac52..6b5172ec 100644
--- a/services/config.js
+++ b/services/config.js
@@ -37,7 +37,7 @@ export const useServerURL = () => {
 			return Server.API.dev
 
 		default:
-			return Server.API.arabica
+			return Server.API.mocha
 	}
 }
 
@@ -61,7 +61,7 @@ export const useSocketURL = () => {
 			return Server.WSS.dev
 
 		default:
-			return Server.WSS.arabica
+			return Server.WSS.mocha
 	}
 }
 

From 13f3c4056f3a49af9d83d321cd817529f722cacc Mon Sep 17 00:00:00 2001
From: GussevPM <GussevPM@GMail.Com>
Date: Sun, 19 May 2024 17:36:52 +0200
Subject: [PATCH 02/12] Copy block height

---
 components/modules/block/BlockOverview.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/modules/block/BlockOverview.vue b/components/modules/block/BlockOverview.vue
index 747e8242..c671f7c9 100644
--- a/components/modules/block/BlockOverview.vue
+++ b/components/modules/block/BlockOverview.vue
@@ -392,9 +392,10 @@ const handleViewRawTransactions = () => {
 						<Flex align="center" gap="6">
 							<Icon name="block" size="14" color="secondary" />
 
-							<Flex tag="h1" align="center" gap="4">
+							<Flex tag="h1" align="center" gap="6">
 								<Text size="12" weight="600" color="secondary"> Height </Text>
 								<Text size="12" weight="600" color="primary">{{ comma(block.height) }}</Text>
+								<CopyButton :text="block.height" size="10" />
 							</Flex>
 						</Flex>
 

From f030402500dda587c692476b87e077a2fb27ed36 Mon Sep 17 00:00:00 2001
From: GussevPM <GussevPM@GMail.Com>
Date: Mon, 20 May 2024 18:17:41 +0200
Subject: [PATCH 03/12] Rollup and height links for blobs

---
 components/modals/BlobModal.vue         | 14 ++++++++++++-
 components/modules/block/BlobsTable.vue | 27 ++++++++++++++++++++++++-
 services/config.js                      |  4 ++--
 3 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/components/modals/BlobModal.vue b/components/modals/BlobModal.vue
index a4be2139..62d83615 100644
--- a/components/modals/BlobModal.vue
+++ b/components/modals/BlobModal.vue
@@ -5,7 +5,7 @@ import Button from "@/components/ui/Button.vue"
 import Spinner from "@/components/ui/Spinner.vue"
 
 /** Services */
-import { space, formatBytes, getNamespaceID, strToHex } from "@/services/utils"
+import { comma, formatBytes, getNamespaceID, space, strToHex } from "@/services/utils"
 
 /** API */
 import { fetchBlobByMetadata } from "@/services/api/namespace"
@@ -254,6 +254,18 @@ const handlePreviewContent = () => {
 						</Flex>
 					</NuxtLink>
 
+					<NuxtLink :to="`/block/${cacheStore.selectedBlob.height}`" target="_blank" :class="[$style.badge, $style.selectable]">
+						<Flex direction="column" gap="8">
+							<Text size="12" weight="500" color="secondary"> Height </Text>
+
+							<Flex align="center" gap="8">
+								<Text size="13" weight="600" color="primary">{{ comma(cacheStore.selectedBlob.height) }}</Text>
+
+								<Icon name="arrow-narrow-up-right" size="12" color="secondary" />
+							</Flex>
+						</Flex>
+					</NuxtLink>
+
 					<Flex direction="column" gap="8" :class="$style.badge">
 						<Text size="12" weight="500" color="secondary"> Size </Text>
 
diff --git a/components/modules/block/BlobsTable.vue b/components/modules/block/BlobsTable.vue
index ba9c53e0..b6dfe36a 100644
--- a/components/modules/block/BlobsTable.vue
+++ b/components/modules/block/BlobsTable.vue
@@ -171,6 +171,7 @@ const handlePrev = () => {
 							<th><Text size="12" weight="600" color="tertiary">Share Commitments</Text></th>
 							<th><Text size="12" weight="600" color="tertiary">Size</Text></th>
 							<th><Text size="12" weight="600" color="tertiary">Version</Text></th>
+							<th><Text size="12" weight="600" color="tertiary">Rollup</Text></th>
 						</tr>
 					</thead>
 
@@ -270,7 +271,17 @@ const handlePrev = () => {
 								<Text size="13" weight="600" color="primary">{{ blob.namespace.version }}</Text>
 							</td>
 							<td style="width: 1px">
-								<Icon name="arrow-narrow-up-right" size="14" color="tertiary" />
+								<NuxtLink v-if="blob.rollup?.logo" :to="`/rollup/${blob.rollup.slug}`" @click.stop>
+									<Tooltip position="start" delay="500">
+										<Flex align="center" justify="center" :class="$style.avatar_container">
+											<img :src="blob.rollup.logo" :class="$style.avatar_image" />
+										</Flex>
+
+										<template #content>
+											{{ blob.rollup.name }}
+										</template>
+									</Tooltip>
+								</NuxtLink>
 							</td>
 						</tr>
 					</tbody>
@@ -366,6 +377,20 @@ const handlePrev = () => {
 	}
 }
 
+.avatar_container {
+	position: relative;
+	width: 20px;
+	height: 20px;
+	overflow: hidden;
+	border-radius: 50%;
+}
+
+.avatar_image {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+
 .table.disabled {
 	opacity: 0.5;
 	pointer-events: none;
diff --git a/services/config.js b/services/config.js
index 6b5172ec..56c1f019 100644
--- a/services/config.js
+++ b/services/config.js
@@ -37,7 +37,7 @@ export const useServerURL = () => {
 			return Server.API.dev
 
 		default:
-			return Server.API.mocha
+			return Server.API.dev
 	}
 }
 
@@ -61,7 +61,7 @@ export const useSocketURL = () => {
 			return Server.WSS.dev
 
 		default:
-			return Server.WSS.mocha
+			return Server.WSS.dev
 	}
 }
 

From ab39fee89033e623f2c5904d55f598d60a947d08 Mon Sep 17 00:00:00 2001
From: GussevPM <GussevPM@GMail.Com>
Date: Mon, 20 May 2024 18:37:30 +0200
Subject: [PATCH 04/12] Add base64 ID for namespaces

---
 components/modules/namespace/NamespaceOverview.vue | 12 +++++++++++-
 services/utils/general.js                          |  8 ++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/components/modules/namespace/NamespaceOverview.vue b/components/modules/namespace/NamespaceOverview.vue
index db578ec2..f1f94d5c 100644
--- a/components/modules/namespace/NamespaceOverview.vue
+++ b/components/modules/namespace/NamespaceOverview.vue
@@ -10,7 +10,7 @@ import BlobsTable from "./tables/BlobsTable.vue"
 import MessagesTable from "./tables/MessagesTable.vue"
 
 /** Services */
-import { comma, space, formatBytes, getNamespaceID } from "@/services/utils"
+import { comma, formatBytes, getNamespaceID, midHex, space } from "@/services/utils"
 
 /** API */
 import { fetchNamespaceBlobs, fetchNamespaceMessagesById, fetchNamespaceRollups } from "@/services/api/namespace"
@@ -291,6 +291,16 @@ const handleViewRawMessages = () => {
 						</Flex>
 					</Flex>
 
+					<Flex direction="column" gap="8" :class="$style.key_value">
+						<Text size="12" weight="600" color="secondary">Base64 ID</Text>
+
+						<Flex align="center" gap="10">
+							<Text size="13" weight="600" color="primary">{{ midHex(namespace.hash) }} </Text>
+
+							<CopyButton :text="namespace.hash" />
+						</Flex>
+					</Flex>
+
 					<Flex
 						v-if="getNamespaceID(namespace.namespace_id) !== namespace.name"
 						direction="column"
diff --git a/services/utils/general.js b/services/utils/general.js
index 2b2d9cd8..27cff7b3 100644
--- a/services/utils/general.js
+++ b/services/utils/general.js
@@ -38,6 +38,14 @@ export const shortHex = (hex) => {
 	}
 }
 
+export const midHex = (hex) => {
+	if (hex.length > 32) {
+		return `${hex.slice(0, 16)} ••• ${hex.slice(-16)}`
+	} else {
+		return hex
+	}
+}
+
 export const splitAddress = (address, format = "string") => {
 	if (!address) return
 

From 99046141ede3e72840e56062dd4475cefabe1fbb Mon Sep 17 00:00:00 2001
From: GussevPM <GussevPM@GMail.Com>
Date: Mon, 3 Jun 2024 17:40:23 +0200
Subject: [PATCH 05/12] Fix chart x-scale

---
 components/modules/namespace/NamespaceCharts.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/modules/namespace/NamespaceCharts.vue b/components/modules/namespace/NamespaceCharts.vue
index a87c7023..eee8e584 100644
--- a/components/modules/namespace/NamespaceCharts.vue
+++ b/components/modules/namespace/NamespaceCharts.vue
@@ -361,7 +361,7 @@ onBeforeUnmount(() => {
 								}}
 							</Text>
 							<Text v-else size="12" weight="600" color="tertiary">
-								{{ DateTime.now().minus({ hours: selectedPeriod.value }).set({ minutes: 0 }).toFormat("hh:mm a") }}
+								{{ DateTime.now().minus({ hours: selectedPeriod.value - 1 }).set({ minutes: 0 }).toFormat("hh:mm a") }}
 							</Text>
 
 							<Text size="12" weight="600" color="tertiary">{{ selectedPeriod.timeframe === "day" ? "Today" : "Now" }}</Text>
@@ -449,7 +449,7 @@ onBeforeUnmount(() => {
 								}}
 							</Text>
 							<Text v-else size="12" weight="600" color="tertiary">
-								{{ DateTime.now().minus({ hours: selectedPeriod.value }).set({ minutes: 0 }).toFormat("hh:mm a") }}
+								{{ DateTime.now().minus({ hours: selectedPeriod.value - 1 }).set({ minutes: 0 }).toFormat("hh:mm a") }}
 							</Text>
 
 							<Text size="12" weight="600" color="tertiary">{{ selectedPeriod.timeframe === "day" ? "Today" : "Now" }}</Text>

From 74fe8ea0fe31e7b329dc2b69b54df7d6ba15c683 Mon Sep 17 00:00:00 2001
From: GussevPM <GussevPM@GMail.Com>
Date: Tue, 4 Jun 2024 21:07:50 +0200
Subject: [PATCH 06/12] Add basic entity view

---
 components/AddressBadge.vue    |   9 ++-
 components/BasicEntityView.vue | 111 +++++++++++++++++++++++++++++++++
 pages/address/[hash].vue       |   1 +
 store/bookmarks.js             |  28 ++++++++-
 4 files changed, 147 insertions(+), 2 deletions(-)
 create mode 100644 components/BasicEntityView.vue

diff --git a/components/AddressBadge.vue b/components/AddressBadge.vue
index eb15b68a..40809271 100644
--- a/components/AddressBadge.vue
+++ b/components/AddressBadge.vue
@@ -7,6 +7,10 @@ defineProps({
 	color: {
 		type: String,
 		default: "primary"
+	},
+	displayName: {
+		type: String,
+		default: '',
 	}
 })
 </script>
@@ -14,7 +18,10 @@ defineProps({
 <template>
 	<NuxtLink :to="`/address/${hash}`" @click.stop>
 		<Flex align="center" gap="6">
-			<template v-if="hash.startsWith('celestiavaloper')">
+			<template v-if="displayName !== hash">
+				<Text size="13" weight="600" :color="color"> {{ displayName }} </Text>
+			</template>
+			<template v-else-if="hash.startsWith('celestiavaloper')">
 				<Text size="13" weight="600" :color="color"> celestiavaloper </Text>
 
 				<Flex align="center" gap="3">
diff --git a/components/BasicEntityView.vue b/components/BasicEntityView.vue
new file mode 100644
index 00000000..052e78d1
--- /dev/null
+++ b/components/BasicEntityView.vue
@@ -0,0 +1,111 @@
+<script setup>
+/** UI */
+import Tooltip from "@/components/ui/Tooltip.vue"
+
+/** Store */
+import { useBookmarksStore } from "@/store/bookmarks"
+const bookmarksStore = useBookmarksStore()
+
+const props = defineProps({
+	id: {
+		type: String,
+		required: true,
+	},
+	type: {
+		type: String,
+		required: true,
+	},
+	copyable: {
+		type: Boolean,
+		default: false,
+	},
+	styles: {
+		type: Object,
+		default: {},
+	},
+})
+
+const defaultStyles = {
+	color: "primary",
+	size: "13",
+	weight: "600",
+}
+
+const calculatedStyles = computed(() => {
+	return {
+		...defaultStyles,
+		...props.styles,
+	}
+})
+
+const displayName = computed(() => {
+	return bookmarksStore.getBookmarkAlias(props.type, props.id)
+})
+
+</script>
+
+<template>
+	<Flex align="center" gap="8">
+		<template v-if="type === 'address'">
+			<AddressBadge :hash="id" :displayName="displayName" />
+		</template>
+
+		<template v-else-if="type === 'block'">
+			<Text
+				:size="calculatedStyles.size"
+				:weight="calculatedStyles.weight"
+				:color="calculatedStyles.color"
+				tabular
+			>
+				{{ displayName !== id ? displayName : comma(block.height) }}
+			</Text>
+		</template>
+
+		<!-- <template v-else-if="type === 'namespace'">
+			<Tooltip position="start" delay="500">
+				<Flex align="center" gap="8">
+					<AddressBadge :hash="id" />
+
+					<CopyButton :text="id" />
+				</Flex>
+
+				<template #content>
+					{{ address.hash }}
+				</template>
+			</Tooltip>
+		</template> -->
+
+		<!-- <template v-else-if="type === 'tx'">
+			<Tooltip position="start" delay="500">
+				<Flex align="center" gap="8">
+					<AddressBadge :hash="id" />
+
+					<CopyButton :text="id" />
+				</Flex>
+
+				<template #content>
+					{{ address.hash }}
+				</template>
+			</Tooltip>
+		</template> -->
+
+		<CopyButton v-if="copyable" :text="id" />
+	</Flex>
+
+	<Text
+		:color="calculatedStyles.color"
+		:size="calculatedStyles.size"
+		:weight="calculatedStyles.weight"
+	> {{ displayName }} </Text>
+</template>
+
+<style module>
+.wrapper {
+	width: fit-content;
+}
+
+.text {
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
+</style>
diff --git a/pages/address/[hash].vue b/pages/address/[hash].vue
index 3d4c37a8..ae3ea201 100644
--- a/pages/address/[hash].vue
+++ b/pages/address/[hash].vue
@@ -7,6 +7,7 @@ import { fetchAddressByHash } from "@/services/api/address"
 
 /** Store */
 import { useCacheStore } from "@/store/cache"
+
 const cacheStore = useCacheStore()
 
 const route = useRoute()
diff --git a/store/bookmarks.js b/store/bookmarks.js
index 25ee1db1..335127f6 100644
--- a/store/bookmarks.js
+++ b/store/bookmarks.js
@@ -25,13 +25,39 @@ export const useBookmarksStore = defineStore("bookmarks", () => {
 		return has
 	})
 
+	const getBookmarkAlias = (type, hash) => {
+		switch (type) {
+			case 'tx':
+				return findBookmark('txs', hash)
+			case 'block':
+				return findBookmark('blocks', hash)
+			case 'namespace':
+				return findBookmark('namespaces', hash)
+			case 'address':
+				return findBookmark('addresses', hash)
+			default:
+				return hash
+		}
+	}
+
+	const findBookmark = (key, id) => {
+		for (let i = 0; i < bookmarks.value[key].length; i++) {
+			const el = bookmarks.value[key][i]
+			if (el.id === id) {
+				return el.alias
+			}
+		}
+
+		return id
+	}
+
 	const clearBookmarks = () => {
 		Object.keys(bookmarks.value).forEach((b) => {
 			bookmarks.value[b] = []
 		})
 	}
 
-	return { bookmarks, recentBookmarks, clearBookmarks, hasBookmarks }
+	return { bookmarks, recentBookmarks, clearBookmarks, hasBookmarks, getBookmarkAlias }
 })
 
 if (import.meta.hot) {

From 59f79a49d9e818c8a8a8dff9bfccc254ae0e48d7 Mon Sep 17 00:00:00 2001
From: GussevPM <GussevPM@GMail.Com>
Date: Fri, 7 Jun 2024 17:34:44 +0200
Subject: [PATCH 07/12] Fetch aliases from bookmarks

---
 assets/styles/base.scss                       |  14 +++
 components/AddressBadge.vue                   |  49 ++------
 components/BasicEntityView.vue                | 111 ------------------
 .../BlocksTimeline/BlocksTimelineTable.vue    |  12 +-
 components/data/LatestPFBTable.vue            |  25 ++--
 components/data/RecentNamespacesTable.vue     |  26 +---
 components/modals/BlobModal.vue               |  15 +--
 .../address/tables/TransactionsTable.vue      |  14 +--
 components/modules/block/BlobsTable.vue       |  22 +---
 components/modules/block/BlockOverview.vue    |  16 +--
 .../namespace/tables/MessagesTable.vue        |  10 +-
 .../modules/rollup/tables/NamespacesTable.vue |  23 +---
 .../validator/tables/DelegatorsTable.vue      |   4 +-
 pages/index.vue                               |   6 +
 pages/namespaces/index.vue                    |  22 +---
 pages/txs.vue                                 |  24 ++--
 plugins/globalFunctions.js                    |  32 +++++
 services/utils/general.js                     |  16 +++
 store/bookmarks.js                            |  20 ++--
 19 files changed, 133 insertions(+), 328 deletions(-)
 delete mode 100644 components/BasicEntityView.vue
 create mode 100644 plugins/globalFunctions.js

diff --git a/assets/styles/base.scss b/assets/styles/base.scss
index 15cffab6..2342dc3a 100644
--- a/assets/styles/base.scss
+++ b/assets/styles/base.scss
@@ -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;
+}
diff --git a/components/AddressBadge.vue b/components/AddressBadge.vue
index 40809271..b32a4a17 100644
--- a/components/AddressBadge.vue
+++ b/components/AddressBadge.vue
@@ -1,5 +1,5 @@
 <script setup>
-defineProps({
+const props = defineProps({
 	hash: {
 		type: String,
 		required: true,
@@ -8,52 +8,19 @@ defineProps({
 		type: String,
 		default: "primary"
 	},
-	displayName: {
-		type: String,
-		default: '',
-	}
+})
+
+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="displayName !== hash">
-				<Text size="13" weight="600" :color="color"> {{ displayName }} </Text>
-			</template>
-			<template v-else-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>
\ No newline at end of file
diff --git a/components/BasicEntityView.vue b/components/BasicEntityView.vue
deleted file mode 100644
index 052e78d1..00000000
--- a/components/BasicEntityView.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<script setup>
-/** UI */
-import Tooltip from "@/components/ui/Tooltip.vue"
-
-/** Store */
-import { useBookmarksStore } from "@/store/bookmarks"
-const bookmarksStore = useBookmarksStore()
-
-const props = defineProps({
-	id: {
-		type: String,
-		required: true,
-	},
-	type: {
-		type: String,
-		required: true,
-	},
-	copyable: {
-		type: Boolean,
-		default: false,
-	},
-	styles: {
-		type: Object,
-		default: {},
-	},
-})
-
-const defaultStyles = {
-	color: "primary",
-	size: "13",
-	weight: "600",
-}
-
-const calculatedStyles = computed(() => {
-	return {
-		...defaultStyles,
-		...props.styles,
-	}
-})
-
-const displayName = computed(() => {
-	return bookmarksStore.getBookmarkAlias(props.type, props.id)
-})
-
-</script>
-
-<template>
-	<Flex align="center" gap="8">
-		<template v-if="type === 'address'">
-			<AddressBadge :hash="id" :displayName="displayName" />
-		</template>
-
-		<template v-else-if="type === 'block'">
-			<Text
-				:size="calculatedStyles.size"
-				:weight="calculatedStyles.weight"
-				:color="calculatedStyles.color"
-				tabular
-			>
-				{{ displayName !== id ? displayName : comma(block.height) }}
-			</Text>
-		</template>
-
-		<!-- <template v-else-if="type === 'namespace'">
-			<Tooltip position="start" delay="500">
-				<Flex align="center" gap="8">
-					<AddressBadge :hash="id" />
-
-					<CopyButton :text="id" />
-				</Flex>
-
-				<template #content>
-					{{ address.hash }}
-				</template>
-			</Tooltip>
-		</template> -->
-
-		<!-- <template v-else-if="type === 'tx'">
-			<Tooltip position="start" delay="500">
-				<Flex align="center" gap="8">
-					<AddressBadge :hash="id" />
-
-					<CopyButton :text="id" />
-				</Flex>
-
-				<template #content>
-					{{ address.hash }}
-				</template>
-			</Tooltip>
-		</template> -->
-
-		<CopyButton v-if="copyable" :text="id" />
-	</Flex>
-
-	<Text
-		:color="calculatedStyles.color"
-		:size="calculatedStyles.size"
-		:weight="calculatedStyles.weight"
-	> {{ displayName }} </Text>
-</template>
-
-<style module>
-.wrapper {
-	width: fit-content;
-}
-
-.text {
-	text-overflow: ellipsis;
-	overflow: hidden;
-}
-</style>
diff --git a/components/data/BlocksTimeline/BlocksTimelineTable.vue b/components/data/BlocksTimeline/BlocksTimelineTable.vue
index 395c0696..e1657dc3 100644
--- a/components/data/BlocksTimeline/BlocksTimelineTable.vue
+++ b/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>
 
diff --git a/components/data/LatestPFBTable.vue b/components/data/LatestPFBTable.vue
index 7860a64a..c2f388cc 100644
--- a/components/data/LatestPFBTable.vue
+++ b/components/data/LatestPFBTable.vue
@@ -48,23 +48,15 @@ isLoading.value = false
 							<td style="width: 1px">
 								<NuxtLink :to="`/tx/${pfb.hash}`">
 									<Tooltip position="start">
-										<Flex align="center" gap="8">
+										<Flex align="center" gap="6">
 											<Icon
 												:name="pfb.status === 'success' ? 'check-circle' : 'close-circle'"
-												size="14"
+												size="13"
 												:color="pfb.status === 'success' ? 'green' : 'red'"
 											/>
 
-											<Text size="13" weight="600" color="primary" mono>
-												{{ pfb.hash.slice(0, 4).toUpperCase() }}
-											</Text>
-
-											<Flex align="center" gap="3">
-												<div v-for="dot in 3" class="dot" />
-											</Flex>
-
-											<Text size="13" weight="600" color="primary" mono>
-												{{ pfb.hash.slice(pfb.hash.length - 4, pfb.hash.length).toUpperCase() }}
+											<Text size="12" weight="600" color="primary" mono class="table_column_alias">
+												{{ $getDisplayName('txs', pfb.hash) }}
 											</Text>
 
 											<CopyButton :text="pfb.hash.toUpperCase()" />
@@ -96,7 +88,7 @@ isLoading.value = false
 											<Flex align="center" gap="6">
 												<Icon name="block" size="14" color="secondary" />
 
-												<Text size="13" weight="600" color="primary" tabular>{{ comma(pfb.height) }}</Text>
+												<Text size="13" weight="600" color="primary" tabular class="table_column_alias">{{ $getDisplayName('blocks', pfb.height) }}</Text>
 											</Flex>
 										</Outline>
 									</Flex>
@@ -104,9 +96,9 @@ isLoading.value = false
 							</td>
 							<td>
 								<NuxtLink :to="`/tx/${pfb.hash}`">
-									<Flex align="center">
-										<Text size="12" weight="600" color="primary">
-											{{ splitAddress(pfb.signers[0]) }}
+									<Flex align="center" justify="center">
+										<Text size="12" weight="600" color="primary" class="table_column_alias">
+											{{ $getDisplayName('addresses', pfb.signers[0]) }}
 										</Text>
 									</Flex>
 								</NuxtLink>
@@ -153,6 +145,7 @@ isLoading.value = false
 }
 
 .pfb_body {
+	max-width: 500px;
 	border-radius: 4px 4px 8px 8px;
 	background: var(--card-background);
 
diff --git a/components/data/RecentNamespacesTable.vue b/components/data/RecentNamespacesTable.vue
index c7a4e80d..37e25b69 100644
--- a/components/data/RecentNamespacesTable.vue
+++ b/components/data/RecentNamespacesTable.vue
@@ -100,25 +100,9 @@ const handleSort = (by) => {
 									<Flex align="center">
 										<Tooltip position="start">
 											<Flex direction="column" gap="4">
-												<Flex v-if="getNamespaceID(ns.namespace_id).length > 8" align="center" gap="8">
-													<Text size="12" 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="12" weight="600" color="primary" mono>
-														{{ getNamespaceID(ns.namespace_id).slice(-4) }}
-													</Text>
-
-													<CopyButton :text="getNamespaceID(ns.namespace_id)" />
-												</Flex>
-
-												<Flex v-else align="center" gap="8">
-													<Text size="12" weight="600" color="primary" mono>
-														{{ space(getNamespaceID(ns.namespace_id)) }}
+												<Flex align="center" gap="8">
+													<Text size="12" weight="600" color="primary" mono class="table_column_alias">
+														{{ $getDisplayName('namespaces', ns.namespace_id) }}
 													</Text>
 
 													<CopyButton :text="getNamespaceID(ns.namespace_id)" />
@@ -148,7 +132,7 @@ const handleSort = (by) => {
 											<Flex align="center" gap="6">
 												<Icon name="block" size="14" color="secondary" />
 
-												<Text size="13" weight="600" color="primary" tabular>{{ comma(ns.last_height) }}</Text>
+												<Text size="13" weight="600" color="primary" tabular class="table_column_alias">{{ $getDisplayName('blocks', ns.last_height) }}</Text>
 											</Flex>
 										</Outline>
 									</Flex>
@@ -274,7 +258,7 @@ const handleSort = (by) => {
 
 				min-height: 40px;
 
-				padding-right: 24px;
+				padding-right: 16px;
 			}
 		}
 	}
diff --git a/components/modals/BlobModal.vue b/components/modals/BlobModal.vue
index 62d83615..ed6076ed 100644
--- a/components/modals/BlobModal.vue
+++ b/components/modals/BlobModal.vue
@@ -238,15 +238,7 @@ const handlePreviewContent = () => {
 
 							<Flex align="center" gap="8">
 								<Text size="13" weight="600" color="primary">
-									{{ cacheStore.selectedBlob.tx.hash.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">
-									{{ cacheStore.selectedBlob.tx.hash.slice(-4) }}
+									{{ $getDisplayName('txs', cacheStore.selectedBlob.tx.hash) }}
 								</Text>
 
 								<Icon name="arrow-narrow-up-right" size="12" color="secondary" />
@@ -281,7 +273,8 @@ const handlePreviewContent = () => {
 							<CopyButton :text="getNamespaceID(cacheStore.selectedBlob.namespace_id)" />
 
 							<Text size="13" weight="600" color="primary" :class="$style.value">
-								{{ space(getNamespaceID(cacheStore.selectedBlob.namespace_id)) }}
+								{{ $getDisplayName('namespaces', cacheStore.selectedBlob.namespace_id) }}
+								
 								<Text
 									v-if="getNamespaceID(cacheStore.selectedBlob.namespace_id) !== cacheStore.selectedBlob.namespace_name"
 									color="secondary"
@@ -313,7 +306,7 @@ const handlePreviewContent = () => {
 							<NuxtLink :to="`/address/${cacheStore.selectedBlob.signer}`" target="_blank">
 								<Flex align="center" gap="6">
 									<Text size="13" weight="600" color="primary" :class="$style.value">
-										{{ cacheStore.selectedBlob.signer }}
+										{{ $getDisplayName('addresses', cacheStore.selectedBlob.signer) }}
 									</Text>
 
 									<Icon name="arrow-narrow-up-right" size="12" color="secondary" />
diff --git a/components/modules/address/tables/TransactionsTable.vue b/components/modules/address/tables/TransactionsTable.vue
index d0e65112..db7d4dc3 100644
--- a/components/modules/address/tables/TransactionsTable.vue
+++ b/components/modules/address/tables/TransactionsTable.vue
@@ -55,20 +55,12 @@ const props = defineProps({
 								<Flex align="center" gap="8">
 									<Icon
 										:name="tx.status === 'success' ? 'check-circle' : 'close-circle'"
-										size="14"
+										size="13"
 										:color="tx.status === 'success' ? 'green' : 'red'"
 									/>
 
-									<Text size="13" weight="600" color="primary" mono>
-										{{ tx.hash.slice(0, 4).toUpperCase() }}
-									</Text>
-
-									<Flex align="center" gap="3">
-										<div v-for="dot in 3" class="dot" />
-									</Flex>
-
-									<Text size="13" weight="600" color="primary" mono>
-										{{ tx.hash.slice(tx.hash.length - 4, tx.hash.length).toUpperCase() }}
+									<Text size="12" weight="600" color="primary" mono class="table_column_alias">
+										{{ $getDisplayName('txs', tx.hash) }}
 									</Text>
 
 									<CopyButton :text="tx.hash" />
diff --git a/components/modules/block/BlobsTable.vue b/components/modules/block/BlobsTable.vue
index b6dfe36a..c9e3dae6 100644
--- a/components/modules/block/BlobsTable.vue
+++ b/components/modules/block/BlobsTable.vue
@@ -181,25 +181,9 @@ const handlePrev = () => {
 								<NuxtLink :to="`/namespace/${blob.namespace.namespace_id}`" @click.stop>
 									<Tooltip position="start" delay="500">
 										<Flex direction="column" gap="4">
-											<Flex v-if="getNamespaceID(blob.namespace.namespace_id).length > 8" align="center" gap="8">
-												<Text size="12" weight="600" color="primary" mono>
-													{{ getNamespaceID(blob.namespace.namespace_id).slice(0, 4) }}
-												</Text>
-
-												<Flex align="center" gap="3">
-													<div v-for="dot in 3" class="dot" />
-												</Flex>
-
-												<Text size="12" weight="600" color="primary" mono>
-													{{ getNamespaceID(blob.namespace.namespace_id).slice(-4) }}
-												</Text>
-
-												<CopyButton :text="getNamespaceID(blob.namespace.namespace_id)" />
-											</Flex>
-
-											<Flex v-else align="center" gap="8">
-												<Text size="12" weight="600" color="primary" mono>
-													{{ space(getNamespaceID(blob.namespace.namespace_id)) }}
+											<Flex align="center" gap="8">
+												<Text size="12" weight="600" color="primary" mono class="table_column_alias">
+													{{ $getDisplayName('namespaces', blob.namespace.namespace_id) }}
 												</Text>
 
 												<CopyButton :text="getNamespaceID(blob.namespace.namespace_id)" />
diff --git a/components/modules/block/BlockOverview.vue b/components/modules/block/BlockOverview.vue
index c671f7c9..3b3c9ad4 100644
--- a/components/modules/block/BlockOverview.vue
+++ b/components/modules/block/BlockOverview.vue
@@ -638,21 +638,13 @@ const handleViewRawTransactions = () => {
 												<Flex align="center" gap="8">
 													<Icon
 														:name="tx.status === 'success' ? 'check-circle' : 'close-circle'"
-														size="14"
+														size="13"
 														:color="tx.status === 'success' ? 'green' : 'red'"
 													/>
 
-													<Text size="13" weight="600" color="primary" mono>{{
-														tx.hash.slice(0, 4).toUpperCase()
-													}}</Text>
-
-													<Flex align="center" gap="3">
-														<div v-for="dot in 3" class="dot" />
-													</Flex>
-
-													<Text size="13" weight="600" color="primary" mono>{{
-														tx.hash.slice(tx.hash.length - 4, tx.hash.length).toUpperCase()
-													}}</Text>
+													<Text size="12" weight="600" color="primary" mono class="table_column_alias">
+														{{ $getDisplayName('txs', tx.hash) }}
+													</Text>
 
 													<CopyButton :text="tx.hash" />
 												</Flex>
diff --git a/components/modules/namespace/tables/MessagesTable.vue b/components/modules/namespace/tables/MessagesTable.vue
index e48a8f97..d8d7d55b 100644
--- a/components/modules/namespace/tables/MessagesTable.vue
+++ b/components/modules/namespace/tables/MessagesTable.vue
@@ -45,14 +45,8 @@ const props = defineProps({
 										:color="message.tx.status === 'success' ? 'green' : 'red'"
 									/>
 
-									<Text size="13" weight="600" color="primary" mono>{{ message.tx.hash.slice(0, 4).toUpperCase() }}</Text>
-
-									<Flex align="center" gap="3">
-										<div v-for="dot in 3" class="dot" />
-									</Flex>
-
-									<Text size="13" weight="600" color="primary" mono>
-										{{ message.tx.hash.slice(message.tx.hash.length - 4, message.tx.hash.length).toUpperCase() }}
+									<Text size="12" weight="600" color="primary" mono class="table_column_alias">
+										{{ $getDisplayName('txs', message.tx.hash) }}
 									</Text>
 
 									<CopyButton :text="message.tx.hash" />
diff --git a/components/modules/rollup/tables/NamespacesTable.vue b/components/modules/rollup/tables/NamespacesTable.vue
index 72bdee3b..04fde43e 100644
--- a/components/modules/rollup/tables/NamespacesTable.vue
+++ b/components/modules/rollup/tables/NamespacesTable.vue
@@ -40,30 +40,13 @@ const props = defineProps({
 									<Flex :align="ns.name === getNamespaceID(ns.namespace_id) ? 'center' : 'start'" gap="8">
 										<template v-if="ns.hash">
 											<Flex direction="column" gap="4">
-												<Flex v-if="getNamespaceID(ns.namespace_id).length > 8" align="center" gap="8">
-													<Text size="12" 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="12" weight="600" color="primary" mono>
-														{{ getNamespaceID(ns.namespace_id).slice(-4) }}
+												<Flex align="center" gap="8">
+													<Text size="12" weight="600" color="primary" mono class="table_column_alias">
+														{{ $getDisplayName('namespaces', ns.namespace_id) }}
 													</Text>
 
 													<CopyButton :text="getNamespaceID(ns.namespace_id)" />
 												</Flex>
-
-												<Flex v-else align="center" gap="8">
-													<Text size="12" weight="600" color="primary" mono>
-														{{ space(getNamespaceID(ns.namespace_id)) }}
-													</Text>
-
-													<CopyButton :text="getNamespaceID(ns.namespace_id)" />
-												</Flex>
-
 												<Text
 													v-if="ns.name !== getNamespaceID(ns.namespace_id)"
 													size="12"
diff --git a/components/modules/validator/tables/DelegatorsTable.vue b/components/modules/validator/tables/DelegatorsTable.vue
index 4ecaf02a..78c15eef 100644
--- a/components/modules/validator/tables/DelegatorsTable.vue
+++ b/components/modules/validator/tables/DelegatorsTable.vue
@@ -34,8 +34,8 @@ const props = defineProps({
 					<td>
 						<NuxtLink :to="`/address/${d.delegator}`">
 							<Flex align="center" direction="row" gap="12">
-								<Text size="12" weight="600" color="primary">
-									{{ splitAddress(d.delegator) }}
+								<Text size="12" weight="600" color="primary" class="table_column_alias">
+									{{ $getDisplayName('addresses', d.delegator) }}
 								</Text>
 
 								<Tooltip v-if="validator.delegator === d.delegator" position="start" delay="500">
diff --git a/pages/index.vue b/pages/index.vue
index 0e2cb4df..77b92f50 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -106,9 +106,15 @@ onBeforeMount(async () => {
 }
 
 .main {
+	max-width: 100%;
+	
 	margin-top: 40px;
 }
 
+.small_tables {
+	max-width: 100%;
+}
+
 /* 
 @media (max-width: 1100px) {
 	.widgets {
diff --git a/pages/namespaces/index.vue b/pages/namespaces/index.vue
index d0eeb746..471bb313 100644
--- a/pages/namespaces/index.vue
+++ b/pages/namespaces/index.vue
@@ -243,25 +243,9 @@ const handleLast = async () => {
 												<Flex :align="ns.name === getNamespaceID(ns.namespace_id) ? 'center' : 'start'" gap="8">
 													<template v-if="ns.hash">
 														<Flex direction="column" gap="4">
-															<Flex v-if="getNamespaceID(ns.namespace_id).length > 8" align="center" gap="8">
-																<Text size="12" 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="12" weight="600" color="primary" mono>
-																	{{ getNamespaceID(ns.namespace_id).slice(-4) }}
-																</Text>
-
-																<CopyButton :text="getNamespaceID(ns.namespace_id)" />
-															</Flex>
-
-															<Flex v-else align="center" gap="8">
-																<Text size="12" weight="600" color="primary" mono>
-																	{{ space(getNamespaceID(ns.namespace_id)) }}
+															<Flex align="center" gap="8">
+																<Text size="12" weight="600" color="primary" mono class="table_column_alias">
+																	{{ $getDisplayName('namespaces', ns.namespace_id) }}
 																</Text>
 
 																<CopyButton :text="getNamespaceID(ns.namespace_id)" />
diff --git a/pages/txs.vue b/pages/txs.vue
index 2fb26a2b..21257199 100644
--- a/pages/txs.vue
+++ b/pages/txs.vue
@@ -552,20 +552,12 @@ const handleNext = () => {
 												<Flex align="center" gap="8">
 													<Icon
 														:name="tx.status === 'success' ? 'check-circle' : 'close-circle'"
-														size="14"
+														size="13"
 														:color="tx.status === 'success' ? 'green' : 'red'"
 													/>
 
-													<Text size="13" weight="600" color="primary" mono>
-														{{ tx.hash.slice(0, 4).toUpperCase() }}
-													</Text>
-
-													<Flex align="center" gap="3">
-														<div v-for="dot in 3" class="dot" />
-													</Flex>
-
-													<Text size="13" weight="600" color="primary" mono>
-														{{ tx.hash.slice(tx.hash.length - 4, tx.hash.length).toUpperCase() }}
+													<Text size="12" weight="600" color="primary" mono class="table_column_alias">
+														{{ $getDisplayName('txs', tx.hash) }}
 													</Text>
 
 													<CopyButton :text="tx.hash" />
@@ -574,7 +566,7 @@ const handleNext = () => {
 											<template v-else>
 												<Flex align="center" gap="8">
 													<Icon name="tx" size="14" color="secondary" />
-													<Text size="13" weight="600" color="primary">Genesis</Text>
+													<Text size="12" weight="600" color="primary">Genesis</Text>
 												</Flex>
 											</template>
 
@@ -635,7 +627,9 @@ const handleNext = () => {
 								<td v-if="config.columns.signer" style="width: 1px">
 									<NuxtLink :to="`/tx/${tx.hash}`">
 										<Flex align="center">
-											<Text size="13" weight="600" color="primary"> {{ splitAddress(tx.signers[0]) }} </Text>
+											<Text size="12" weight="600" color="primary" mono class="table_column_alias">
+												{{ $getDisplayName('addresses', tx.signers[0]) }}
+											</Text>
 										</Flex>
 									</NuxtLink>
 								</td>
@@ -714,7 +708,7 @@ const handleNext = () => {
 
 <style module>
 .wrapper {
-	max-width: calc(var(--base-width) + 124px);
+	max-width: calc(var(--base-width) + 48px);
 
 	padding: 40px 24px 60px 24px;
 }
@@ -826,7 +820,7 @@ const handleNext = () => {
 
 				min-height: 44px;
 
-				padding-right: 24px;
+				padding-right: 16px;
 			}
 		}
 	}
diff --git a/plugins/globalFunctions.js b/plugins/globalFunctions.js
new file mode 100644
index 00000000..2787a450
--- /dev/null
+++ b/plugins/globalFunctions.js
@@ -0,0 +1,32 @@
+/** Services */
+import { comma, getShortHash, getShortNamespaceID, space, splitAddress } from "@/services/utils"
+
+/** Store */
+import { useBookmarksStore } from "@/store/bookmarks"
+
+export default defineNuxtPlugin((nuxtApp) => {
+
+	const getDisplayName = (type, id) => {
+		const bookmarksStore = useBookmarksStore()
+		const name = bookmarksStore.getBookmarkAlias(type, id)
+
+		if (name !== id) {
+			return name
+		}
+	
+		switch (type) {
+			case 'addresses':
+				return splitAddress(id)
+			case 'blocks':
+				return comma(id)
+			case 'namespaces':
+				return getShortNamespaceID(id)
+			case 'txs':
+				return getShortHash(id)
+			default:
+				return id
+		}
+	}
+
+	nuxtApp.provide('getDisplayName', getDisplayName)
+})
diff --git a/services/utils/general.js b/services/utils/general.js
index 27cff7b3..95903efd 100644
--- a/services/utils/general.js
+++ b/services/utils/general.js
@@ -1,3 +1,5 @@
+import { space } from "./strings.js"
+
 export const formatBytes = (bytes, decimals = 2) => {
 	if (!+bytes) return "0 Byte"
 
@@ -19,6 +21,20 @@ export const getNamespaceID = (target) => {
 	return s
 }
 
+export const getShortNamespaceID = (id) => {
+	let s = getNamespaceID(id)
+
+	if (s.length > 8) {
+		return `${s.slice(0, 4)} ••• ${s.slice(-4)}`
+	} else {
+		return space(s)
+	}
+}
+
+export const getShortHash = (hash) => {
+	return `${hash.slice(0, 4).toUpperCase()} ••• ${hash.slice(-4).toUpperCase()}`
+}
+
 export const strToHex = (str) => {
 	let hex = ""
 	for (let i = 0; i < str.length; i++) {
diff --git a/store/bookmarks.js b/store/bookmarks.js
index 335127f6..7593665e 100644
--- a/store/bookmarks.js
+++ b/store/bookmarks.js
@@ -25,19 +25,15 @@ export const useBookmarksStore = defineStore("bookmarks", () => {
 		return has
 	})
 
-	const getBookmarkAlias = (type, hash) => {
-		switch (type) {
-			case 'tx':
-				return findBookmark('txs', hash)
-			case 'block':
-				return findBookmark('blocks', hash)
-			case 'namespace':
-				return findBookmark('namespaces', hash)
-			case 'address':
-				return findBookmark('addresses', hash)
-			default:
-				return hash
+	const getBookmarkAlias = (type, id) => {
+		for (let i = 0; i < bookmarks.value[type].length; i++) {
+			const el = bookmarks.value[type][i]
+			if (el.id === id) {
+				return el.alias
+			}
 		}
+
+		return id
 	}
 
 	const findBookmark = (key, id) => {

From d1f38dcec21925c93e3eca8d381cb55449b2b3d9 Mon Sep 17 00:00:00 2001
From: GussevPM <GussevPM@GMail.Com>
Date: Sat, 8 Jun 2024 16:37:54 +0200
Subject: [PATCH 08/12] Bookmarks refactoring

---
 components/BookmarkButton.vue                 | 142 ++++++++++++++++++
 .../modules/address/AddressOverview.vue       |  78 +---------
 components/modules/block/BlockOverview.vue    |  84 ++---------
 .../modules/namespace/NamespaceOverview.vue   |  74 +--------
 components/modules/tx/TxOverview.vue          |  82 ++--------
 store/bookmarks.js                            |  70 +++++++--
 6 files changed, 233 insertions(+), 297 deletions(-)
 create mode 100644 components/BookmarkButton.vue

diff --git a/components/BookmarkButton.vue b/components/BookmarkButton.vue
new file mode 100644
index 00000000..12cf1f54
--- /dev/null
+++ b/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>
diff --git a/components/modules/address/AddressOverview.vue b/components/modules/address/AddressOverview.vue
index 799d3164..28e383b6 100644
--- a/components/modules/address/AddressOverview.vue
+++ b/components/modules/address/AddressOverview.vue
@@ -1,10 +1,11 @@
 <script setup>
 /** UI */
-import { Dropdown, DropdownItem } from "@/components/ui/Dropdown"
+import BookmarkButton from "@/components/BookmarkButton.vue"
 import Button from "@/components/ui/Button.vue"
-import Popover from "@/components/ui/Popover.vue"
 import Checkbox from "@/components/ui/Checkbox.vue"
+import { Dropdown, DropdownItem } from "@/components/ui/Dropdown"
 import Input from "@/components/ui/Input.vue"
+import Popover from "@/components/ui/Popover.vue"
 
 /** Components */
 import TransactionsTable from "./tables/TransactionsTable.vue"
@@ -32,12 +33,8 @@ import {
 /** Store */
 import { useModalsStore } from "@/store/modals"
 import { useCacheStore } from "@/store/cache"
-import { useBookmarksStore } from "@/store/bookmarks"
-import { useNotificationsStore } from "@/store/notifications"
 const modalsStore = useModalsStore()
 const cacheStore = useCacheStore()
-const bookmarksStore = useBookmarksStore()
-const notificationsStore = useNotificationsStore()
 
 const route = useRoute()
 const router = useRouter()
@@ -49,13 +46,6 @@ const props = defineProps({
 	},
 })
 
-const isBookmarkButtonHovered = ref(false)
-const isBookmarked = ref(false)
-const bookmarkText = computed(() => {
-	if (isBookmarkButtonHovered.value && isBookmarked.value) return "Remove"
-	return isBookmarked.value ? "Saved" : "Save"
-})
-
 const isRefetching = ref(false)
 const transactions = ref([])
 const messages = ref([])
@@ -207,8 +197,6 @@ onMounted(() => {
 			tab: activeTab.value,
 		},
 	})
-
-	isBookmarked.value = !!bookmarksStore.bookmarks.addresses.find((t) => t.id === props.address.hash)
 })
 
 /** Parse route query */
@@ -509,48 +497,6 @@ watch(
 	},
 )
 
-const handleBookmark = () => {
-	if (!isBookmarked.value) {
-		bookmarksStore.bookmarks.addresses.push({
-			id: props.address.hash,
-			type: "Address",
-			ts: new Date().getTime(),
-		})
-		isBookmarked.value = true
-
-		notificationsStore.create({
-			notification: {
-				type: "success",
-				icon: "check",
-				title: "Address added to bookmarks",
-				description: "View all bookmarks on dedicated page",
-				autoDestroy: true,
-				actions: [
-					{
-						name: "Open Bookmarks",
-						callback: () => {
-							router.push("/bookmarks")
-						},
-					},
-				],
-			},
-		})
-	} else {
-		const bookmarkIdx = bookmarksStore.bookmarks.addresses.findIndex((t) => t.id === props.address.hash)
-		bookmarksStore.bookmarks.addresses.splice(bookmarkIdx, 1)
-		isBookmarked.value = false
-
-		notificationsStore.create({
-			notification: {
-				type: "success",
-				icon: "check",
-				title: "Address removed from bookmarks",
-				autoDestroy: true,
-			},
-		})
-	}
-}
-
 const handleSend = () => {
 	modalsStore.open("send")
 }
@@ -589,20 +535,10 @@ const handleOpenQRModal = () => {
 						Send
 					</Button>
 
-					<Button
-						@click="handleBookmark"
-						@mouseenter="isBookmarkButtonHovered = true"
-						@mouseleave="isBookmarkButtonHovered = false"
-						type="secondary"
-						size="mini"
-					>
-						<Icon
-							:name="isBookmarkButtonHovered && isBookmarked ? 'close' : isBookmarked ? 'bookmark-check' : 'bookmark-plus'"
-							size="12"
-							:color="isBookmarked && !isBookmarkButtonHovered ? 'green' : 'primary'"
-						/>
-						{{ bookmarkText }}
-					</Button>
+					<BookmarkButton
+						type="address"
+						:id="address.hash"
+					/>
 				</Flex>
 
 				<div class="divider_v"></div>
diff --git a/components/modules/block/BlockOverview.vue b/components/modules/block/BlockOverview.vue
index 3b3c9ad4..6abbe57e 100644
--- a/components/modules/block/BlockOverview.vue
+++ b/components/modules/block/BlockOverview.vue
@@ -3,14 +3,15 @@
 import { DateTime } from "luxon"
 
 /** UI */
-import { Dropdown, DropdownItem } from "@/components/ui/Dropdown"
-import Tooltip from "@/components/ui/Tooltip.vue"
-import Button from "@/components/ui/Button.vue"
+import AmountInCurrency from "@/components/AmountInCurrency.vue"
 import Badge from "@/components/ui/Badge.vue"
-import Popover from "@/components/ui/Popover.vue"
+import BookmarkButton from "@/components/BookmarkButton.vue"
+import Button from "@/components/ui/Button.vue"
 import Checkbox from "@/components/ui/Checkbox.vue"
+import { Dropdown, DropdownItem } from "@/components/ui/Dropdown"
 import Input from "@/components/ui/Input.vue"
-import AmountInCurrency from "@/components/AmountInCurrency.vue"
+import Popover from "@/components/ui/Popover.vue"
+import Tooltip from "@/components/ui/Tooltip.vue"
 
 /** Shared Components */
 import MessageTypeBadge from "@/components/shared/MessageTypeBadge.vue"
@@ -26,13 +27,9 @@ import { fetchTransactionsByBlock } from "@/services/api/tx"
 import { useAppStore } from "@/store/app"
 import { useModalsStore } from "@/store/modals"
 import { useCacheStore } from "@/store/cache"
-import { useBookmarksStore } from "@/store/bookmarks"
-import { useNotificationsStore } from "@/store/notifications"
 const appStore = useAppStore()
 const modalsStore = useModalsStore()
 const cacheStore = useCacheStore()
-const bookmarksStore = useBookmarksStore()
-const notificationsStore = useNotificationsStore()
 
 const route = useRoute()
 const router = useRouter()
@@ -49,13 +46,6 @@ const props = defineProps({
 
 const lastBlock = computed(() => appStore.latestBlocks[0])
 
-const isBookmarkButtonHovered = ref(false)
-const isBookmarked = ref(false)
-const bookmarkText = computed(() => {
-	if (isBookmarkButtonHovered.value && isBookmarked.value) return "Remove"
-	return isBookmarked.value ? "Saved" : "Save"
-})
-
 const preselectedTab = route.query.tab && ["transactions", "events"].includes(route.query.tab) ? route.query.tab : "transactions"
 const activeTab = ref(preselectedTab)
 
@@ -245,8 +235,6 @@ onMounted(() => {
 			tab: activeTab.value,
 		},
 	})
-
-	isBookmarked.value = !!bookmarksStore.bookmarks.blocks.find((t) => t.id === props.block.height)
 })
 
 /** Refetch transactions */
@@ -274,48 +262,6 @@ watch(
 	},
 )
 
-const handleBookmark = () => {
-	if (!isBookmarked.value) {
-		bookmarksStore.bookmarks.blocks.push({
-			id: props.block.height,
-			type: "Block",
-			ts: new Date().getTime(),
-		})
-		isBookmarked.value = true
-
-		notificationsStore.create({
-			notification: {
-				type: "success",
-				icon: "check",
-				title: "Block added to bookmarks",
-				description: "View all bookmarks on dedicated page",
-				autoDestroy: true,
-				actions: [
-					{
-						name: "Open Bookmarks",
-						callback: () => {
-							router.push("/bookmarks")
-						},
-					},
-				],
-			},
-		})
-	} else {
-		const bookmarkIdx = bookmarksStore.bookmarks.blocks.findIndex((t) => t.id === props.block.height)
-		bookmarksStore.bookmarks.blocks.splice(bookmarkIdx, 1)
-		isBookmarked.value = false
-
-		notificationsStore.create({
-			notification: {
-				type: "success",
-				icon: "check",
-				title: "Block removed from bookmarks",
-				autoDestroy: true,
-			},
-		})
-	}
-}
-
 const handleViewRawBlock = () => {
 	cacheStore.current._target = "block"
 	modalsStore.open("rawData")
@@ -355,20 +301,10 @@ const handleViewRawTransactions = () => {
 			</Flex>
 
 			<Flex align="center" gap="12">
-				<Button
-					@click="handleBookmark"
-					@mouseenter="isBookmarkButtonHovered = true"
-					@mouseleave="isBookmarkButtonHovered = false"
-					type="secondary"
-					size="mini"
-				>
-					<Icon
-						:name="isBookmarkButtonHovered && isBookmarked ? 'close' : isBookmarked ? 'bookmark-check' : 'bookmark-plus'"
-						size="12"
-						:color="isBookmarked && !isBookmarkButtonHovered ? 'green' : 'primary'"
-					/>
-					{{ bookmarkText }}
-				</Button>
+				<BookmarkButton
+					type="block"
+					:id="block.height"
+				/>
 
 				<div class="divider_v" />
 
diff --git a/components/modules/namespace/NamespaceOverview.vue b/components/modules/namespace/NamespaceOverview.vue
index f1f94d5c..7bf651bd 100644
--- a/components/modules/namespace/NamespaceOverview.vue
+++ b/components/modules/namespace/NamespaceOverview.vue
@@ -2,6 +2,7 @@ import { getNamespaceID } from '~/services/utils';
 <script setup>
 /** UI */
 import Button from "@/components/ui/Button.vue"
+import BookmarkButton from "@/components/BookmarkButton.vue"
 import { Dropdown, DropdownItem, DropdownDivider } from "@/components/ui/Dropdown"
 import Tooltip from "@/components/ui/Tooltip.vue"
 
@@ -18,12 +19,8 @@ import { fetchNamespaceBlobs, fetchNamespaceMessagesById, fetchNamespaceRollups
 /** Store */
 import { useModalsStore } from "@/store/modals"
 import { useCacheStore } from "@/store/cache"
-import { useBookmarksStore } from "@/store/bookmarks"
-import { useNotificationsStore } from "@/store/notifications"
 const modalsStore = useModalsStore()
 const cacheStore = useCacheStore()
-const bookmarksStore = useBookmarksStore()
-const notificationsStore = useNotificationsStore()
 
 const route = useRoute()
 const router = useRouter()
@@ -35,13 +32,6 @@ const props = defineProps({
 	},
 })
 
-const isBookmarkButtonHovered = ref(false)
-const isBookmarked = ref(false)
-const bookmarkText = computed(() => {
-	if (isBookmarkButtonHovered.value && isBookmarked.value) return "Remove"
-	return isBookmarked.value ? "Saved" : "Save"
-})
-
 const tabs = ref([
 	{
 		name: "Blobs",
@@ -129,8 +119,6 @@ onMounted(() => {
 			tab: activeTab.value,
 		},
 	})
-
-	isBookmarked.value = !!bookmarksStore.bookmarks.namespaces.find((t) => t.id === props.namespace.namespace_id)
 })
 
 /** Refetch Blobs/Messages on new page */
@@ -173,48 +161,6 @@ watch(
 	},
 )
 
-const handleBookmark = () => {
-	if (!isBookmarked.value) {
-		bookmarksStore.bookmarks.namespaces.push({
-			id: props.namespace.namespace_id,
-			type: "Namespace",
-			ts: new Date().getTime(),
-		})
-		isBookmarked.value = true
-
-		notificationsStore.create({
-			notification: {
-				type: "success",
-				icon: "check",
-				title: "Namespace added to bookmarks",
-				description: "View all bookmarks on dedicated page",
-				autoDestroy: true,
-				actions: [
-					{
-						name: "Open Bookmarks",
-						callback: () => {
-							router.push("/bookmarks")
-						},
-					},
-				],
-			},
-		})
-	} else {
-		const bookmarkIdx = bookmarksStore.bookmarks.namespaces.findIndex((t) => t.id === props.namespace.namespace_id)
-		bookmarksStore.bookmarks.namespaces.splice(bookmarkIdx, 1)
-		isBookmarked.value = false
-
-		notificationsStore.create({
-			notification: {
-				type: "success",
-				icon: "check",
-				title: "Namespace removed from bookmarks",
-				autoDestroy: true,
-			},
-		})
-	}
-}
-
 const handleViewRawNamespace = () => {
 	cacheStore.current._target = "namespace"
 	modalsStore.open("rawData")
@@ -246,20 +192,10 @@ const handleViewRawMessages = () => {
 						Submit Blob
 					</Button>
 
-					<Button
-						@click="handleBookmark"
-						@mouseenter="isBookmarkButtonHovered = true"
-						@mouseleave="isBookmarkButtonHovered = false"
-						type="secondary"
-						size="mini"
-					>
-						<Icon
-							:name="isBookmarkButtonHovered && isBookmarked ? 'close' : isBookmarked ? 'bookmark-check' : 'bookmark-plus'"
-							size="12"
-							:color="isBookmarked && !isBookmarkButtonHovered ? 'green' : 'primary'"
-						/>
-						{{ bookmarkText }}
-					</Button>
+					<BookmarkButton
+						type="namespace"
+						:id="namespace.namespace_id"
+					/>
 				</Flex>
 
 				<div class="divider_v" />
diff --git a/components/modules/tx/TxOverview.vue b/components/modules/tx/TxOverview.vue
index 330cc741..898ffcf3 100644
--- a/components/modules/tx/TxOverview.vue
+++ b/components/modules/tx/TxOverview.vue
@@ -3,17 +3,18 @@
 import { DateTime } from "luxon"
 
 /** UI */
-import Events from "@/components/shared/tables/Events.vue"
-import { Dropdown, DropdownItem } from "@/components/ui/Dropdown"
-import Button from "~/components/ui/Button.vue"
 import AmountInCurrency from "@/components/AmountInCurrency.vue"
+import BookmarkButton from "@/components/BookmarkButton.vue"
+import Button from "~/components/ui/Button.vue"
+import { Dropdown, DropdownItem } from "@/components/ui/Dropdown"
+import Events from "@/components/shared/tables/Events.vue"
 
 /** Shared Components */
 import MessageTypeBadge from "@/components/shared/MessageTypeBadge.vue"
 import MessagesTable from "@/components/modules/tx/MessagesTable.vue"
 
 /** Services */
-import { comma, splitAddress, tia } from "@/services/utils"
+import { comma } from "@/services/utils"
 
 /** API */
 import { fetchTxMessages } from "@/services/api/tx"
@@ -21,12 +22,8 @@ import { fetchTxMessages } from "@/services/api/tx"
 /** Store */
 import { useModalsStore } from "@/store/modals"
 import { useCacheStore } from "@/store/cache"
-import { useBookmarksStore } from "@/store/bookmarks"
-import { useNotificationsStore } from "@/store/notifications"
 const modalsStore = useModalsStore()
 const cacheStore = useCacheStore()
-const bookmarksStore = useBookmarksStore()
-const notificationsStore = useNotificationsStore()
 
 const route = useRoute()
 const router = useRouter()
@@ -38,13 +35,6 @@ const props = defineProps({
 	},
 })
 
-const isBookmarkButtonHovered = ref(false)
-const isBookmarked = ref(false)
-const bookmarkText = computed(() => {
-	if (isBookmarkButtonHovered.value && isBookmarked.value) return "Remove"
-	return isBookmarked.value ? "Saved" : "Save"
-})
-
 const preselectedTab = route.query.tab && ["messages", "events"].includes(route.query.tab) ? route.query.tab : "messages"
 const activeTab = ref(preselectedTab)
 const messages = ref([])
@@ -66,54 +56,10 @@ onMounted(async () => {
 		},
 	})
 
-	isBookmarked.value = !!bookmarksStore.bookmarks.txs.find((t) => t.id === props.tx.hash)
-
 	const data = await fetchTxMessages(props.tx.hash)
 	messages.value = data
 })
 
-const handleBookmark = () => {
-	if (!isBookmarked.value) {
-		bookmarksStore.bookmarks.txs.push({
-			id: props.tx.hash,
-			type: "Transaction",
-			ts: new Date().getTime(),
-		})
-		isBookmarked.value = true
-
-		notificationsStore.create({
-			notification: {
-				type: "success",
-				icon: "check",
-				title: "Transaction added to bookmarks",
-				description: "View all bookmarks on dedicated page",
-				autoDestroy: true,
-				actions: [
-					{
-						name: "Open Bookmarks",
-						callback: () => {
-							router.push("/bookmarks")
-						},
-					},
-				],
-			},
-		})
-	} else {
-		const bookmarkIdx = bookmarksStore.bookmarks.txs.findIndex((t) => t.id === props.tx.hash)
-		bookmarksStore.bookmarks.txs.splice(bookmarkIdx, 1)
-		isBookmarked.value = false
-
-		notificationsStore.create({
-			notification: {
-				type: "success",
-				icon: "check",
-				title: "Transaction removed from bookmarks",
-				autoDestroy: true,
-			},
-		})
-	}
-}
-
 const handleViewRawTransaction = () => {
 	cacheStore.current._target = "transaction"
 	modalsStore.open("rawData")
@@ -129,20 +75,10 @@ const handleViewRawTransaction = () => {
 			</Flex>
 
 			<Flex align="center" gap="12">
-				<Button
-					@click="handleBookmark"
-					@mouseenter="isBookmarkButtonHovered = true"
-					@mouseleave="isBookmarkButtonHovered = false"
-					type="secondary"
-					size="mini"
-				>
-					<Icon
-						:name="isBookmarkButtonHovered && isBookmarked ? 'close' : isBookmarked ? 'bookmark-check' : 'bookmark-plus'"
-						size="12"
-						:color="isBookmarked && !isBookmarkButtonHovered ? 'green' : 'secondary'"
-					/>
-					{{ bookmarkText }}
-				</Button>
+				<BookmarkButton
+					type="tx"
+					:id="tx.hash"
+				/>
 
 				<div class="divider_v" />
 
diff --git a/store/bookmarks.js b/store/bookmarks.js
index 7593665e..4e8114ea 100644
--- a/store/bookmarks.js
+++ b/store/bookmarks.js
@@ -3,10 +3,10 @@ import { defineStore, acceptHMRUpdate } from "pinia"
 
 export const useBookmarksStore = defineStore("bookmarks", () => {
 	const bookmarks = ref({
-		txs: [],
+		addresses: [],
 		blocks: [],
 		namespaces: [],
-		addresses: [],
+		txs: [],
 	})
 
 	const recentBookmarks = computed(() => {
@@ -26,8 +26,12 @@ export const useBookmarksStore = defineStore("bookmarks", () => {
 	})
 
 	const getBookmarkAlias = (type, id) => {
-		for (let i = 0; i < bookmarks.value[type].length; i++) {
-			const el = bookmarks.value[type][i]
+		let store = getStoreByType(type)
+
+		if (!store) return id
+
+		for (let i = 0; i < store.length; i++) {
+			let el = store[i]
 			if (el.id === id) {
 				return el.alias
 			}
@@ -36,15 +40,61 @@ export const useBookmarksStore = defineStore("bookmarks", () => {
 		return id
 	}
 
-	const findBookmark = (key, id) => {
-		for (let i = 0; i < bookmarks.value[key].length; i++) {
-			const el = bookmarks.value[key][i]
+	const getBookmark = (type, id) => {
+		let store = getStoreByType(type)
+
+		if (!store) return null
+		
+		for (let i = 0; i < store.length; i++) {
+			let el = store[i]
 			if (el.id === id) {
-				return el.alias
+				return el
 			}
 		}
 
-		return id
+		return null
+	}
+
+	const addBookmark = (bookmark) => {
+		let store = getStoreByType(bookmark.type)
+
+		if (!store) return false
+
+		store.push(bookmark)
+
+		return true
+	}
+
+	const removeBookmark = (type, id) => {
+		let store = getStoreByType(type)
+		if (!store) return false
+
+		let idx = store.findIndex((el) => el.id === id)
+
+		if (idx === -1) return false
+
+		store.splice(idx, 1)
+
+		return true
+	}
+
+	const getStoreByType = (type) => {
+		switch (type.toLowerCase()) {
+			case 'address':
+			case 'addresses':
+				return bookmarks.value.addresses
+			case 'block':
+			case 'blocks':
+				return bookmarks.value.blocks
+			case 'namespace':
+			case 'namespaces':
+				return bookmarks.value.namespaces
+			case 'tx':
+			case 'txs':
+				return bookmarks.value.txs
+			default:
+				return null
+		}
 	}
 
 	const clearBookmarks = () => {
@@ -53,7 +103,7 @@ export const useBookmarksStore = defineStore("bookmarks", () => {
 		})
 	}
 
-	return { bookmarks, recentBookmarks, clearBookmarks, hasBookmarks, getBookmarkAlias }
+	return { bookmarks, hasBookmarks, recentBookmarks, addBookmark, clearBookmarks, getBookmark, getBookmarkAlias, removeBookmark }
 })
 
 if (import.meta.hot) {

From 6583f84a81844c954d720ce7b6f95409c1abeaf5 Mon Sep 17 00:00:00 2001
From: GussevPM <GussevPM@GMail.Com>
Date: Sun, 9 Jun 2024 14:50:26 +0200
Subject: [PATCH 09/12] Bookmarks search

---
 assets/icons.json              |  1 +
 components/Connection.vue      |  8 ++++----
 components/TheHeader.vue       | 14 +++++++++++++
 components/cmd/CommandMenu.vue | 26 +++++++++++++++---------
 store/bookmarks.js             | 36 ++++++++++++++++++++++++++++++----
 5 files changed, 68 insertions(+), 17 deletions(-)

diff --git a/assets/icons.json b/assets/icons.json
index 895059a2..1ed9c394 100644
--- a/assets/icons.json
+++ b/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",
diff --git a/components/Connection.vue b/components/Connection.vue
index 3e6d7180..d8202dd9 100644
--- a/components/Connection.vue
+++ b/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>
 
diff --git a/components/TheHeader.vue b/components/TheHeader.vue
index 328bae54..6e075c2b 100644
--- a/components/TheHeader.vue
+++ b/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>
diff --git a/components/cmd/CommandMenu.vue b/components/cmd/CommandMenu.vue
index 0421dae2..dec6bdc7 100644
--- a/components/cmd/CommandMenu.vue
+++ b/components/cmd/CommandMenu.vue
@@ -862,6 +862,7 @@ 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: {
@@ -922,7 +923,14 @@ const autocompleteGroup = computed(() => {
 })
 
 const debouncedSearch = useDebounceFn(async (e) => {
+	const bookmarks = bookmarksStore.searchBookmark(searchTerm.value)
 	const { data } = await search(searchTerm.value.trim())
+
+	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 })
@@ -934,23 +942,23 @@ const debouncedSearch = useDebounceFn(async (e) => {
 		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 +967,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
 
diff --git a/store/bookmarks.js b/store/bookmarks.js
index 4e8114ea..556fdf14 100644
--- a/store/bookmarks.js
+++ b/store/bookmarks.js
@@ -18,14 +18,20 @@ export const useBookmarksStore = defineStore("bookmarks", () => {
 	const hasBookmarks = computed(() => {
 		let has = false
 
-		Object.keys(bookmarks.value).forEach((b) => {
-			if (bookmarks.value[b].length) has = true
-		})
+		let keys = Object.keys(bookmarks.value)
+		for (let i = 0; i < keys.length; i++) {
+			if (bookmarks.value[keys[i]].length) {
+				has = true
+				break
+			}
+		}
 
 		return has
 	})
 
 	const getBookmarkAlias = (type, id) => {
+		if (!hasBookmarks) return id
+
 		let store = getStoreByType(type)
 
 		if (!store) return id
@@ -41,6 +47,8 @@ export const useBookmarksStore = defineStore("bookmarks", () => {
 	}
 
 	const getBookmark = (type, id) => {
+		if (!hasBookmarks) return null
+		
 		let store = getStoreByType(type)
 
 		if (!store) return null
@@ -97,13 +105,33 @@ export const useBookmarksStore = defineStore("bookmarks", () => {
 		}
 	}
 
+	const searchBookmark = (searchString) => {
+		if (!hasBookmarks) return []
+		
+		let res = []
+		
+		Object.keys(bookmarks.value).forEach((b) => {
+			
+			bookmarks.value[b].forEach((el) => {
+				if (el.alias?.toUpperCase().includes(searchString.toUpperCase())) {
+					res.push({
+						result: el,
+						type: el.type.toLowerCase(),
+					})
+				}
+			})
+		})
+
+		return res
+	}
+
 	const clearBookmarks = () => {
 		Object.keys(bookmarks.value).forEach((b) => {
 			bookmarks.value[b] = []
 		})
 	}
 
-	return { bookmarks, hasBookmarks, recentBookmarks, addBookmark, clearBookmarks, getBookmark, getBookmarkAlias, removeBookmark }
+	return { bookmarks, hasBookmarks, recentBookmarks, addBookmark, clearBookmarks, getBookmark, getBookmarkAlias, removeBookmark, searchBookmark }
 })
 
 if (import.meta.hot) {

From 733688b3c2b3e1f8397e7cfe62f31b4e2e519c3d Mon Sep 17 00:00:00 2001
From: GussevPM <GussevPM@GMail.Com>
Date: Sun, 9 Jun 2024 15:51:49 +0200
Subject: [PATCH 10/12] Fix bugs and breadcrumbs refactoring

---
 assets/styles/base.scss                        | 2 +-
 components/cmd/CommandMenu.vue                 | 4 ----
 components/modules/address/AddressOverview.vue | 4 ++--
 components/modules/tx/TxOverview.vue           | 3 +--
 pages/address/[hash].vue                       | 8 +++++++-
 pages/block/[height].vue                       | 8 +++++++-
 pages/namespace/[id].vue                       | 9 ++++++++-
 pages/tx/[hash].vue                            | 8 +++++++-
 store/bookmarks.js                             | 3 ++-
 9 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/assets/styles/base.scss b/assets/styles/base.scss
index 2342dc3a..a6b238b5 100644
--- a/assets/styles/base.scss
+++ b/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 {
diff --git a/components/cmd/CommandMenu.vue b/components/cmd/CommandMenu.vue
index dec6bdc7..60b0c847 100644
--- a/components/cmd/CommandMenu.vue
+++ b/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 })
diff --git a/components/modules/address/AddressOverview.vue b/components/modules/address/AddressOverview.vue
index 28e383b6..081ffe02 100644
--- a/components/modules/address/AddressOverview.vue
+++ b/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>
diff --git a/components/modules/tx/TxOverview.vue b/components/modules/tx/TxOverview.vue
index 898ffcf3..81300f91 100644
--- a/components/modules/tx/TxOverview.vue
+++ b/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>
diff --git a/pages/address/[hash].vue b/pages/address/[hash].vue
index ae3ea201..f8679d47 100644
--- a/pages/address/[hash].vue
+++ b/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"
 		/>
diff --git a/pages/block/[height].vue b/pages/block/[height].vue
index ecc875e4..775acf6c 100644
--- a/pages/block/[height].vue
+++ b/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"
 		/>
diff --git a/pages/namespace/[id].vue b/pages/namespace/[id].vue
index 8e88179f..b10e2468 100644
--- a/pages/namespace/[id].vue
+++ b/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}` },
 				]"
 			/>
 
diff --git a/pages/tx/[hash].vue b/pages/tx/[hash].vue
index 21145594..698877bf 100644
--- a/pages/tx/[hash].vue
+++ b/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"
diff --git a/store/bookmarks.js b/store/bookmarks.js
index 556fdf14..8e859f00 100644
--- a/store/bookmarks.js
+++ b/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

From b6a4f535936d436eb80bc301b10111fb3c37c5d0 Mon Sep 17 00:00:00 2001
From: GussevPM <GussevPM@GMail.Com>
Date: Mon, 10 Jun 2024 16:08:16 +0200
Subject: [PATCH 11/12] Small fixes after call

---
 components/cmd/CommandMenu.vue                |  5 +-
 components/cmd/Item.vue                       | 10 ++-
 components/data/LatestPFBTable.vue            | 14 +++-
 components/data/RecentNamespacesTable.vue     |  2 +-
 components/modals/BlobModal.vue               | 46 +++++++++-
 components/modules/block/BlobsTable.vue       |  3 +-
 components/modules/block/BlockOverview.vue    | 14 +++-
 .../namespace/tables/MessagesTable.vue        | 10 ++-
 pages/txs.vue                                 | 12 ++-
 plugins/globalFunctions.js                    |  4 +-
 services/api/socket.js                        | 83 ++++++++++---------
 services/utils/general.js                     |  2 +-
 store/bookmarks.js                            |  5 +-
 13 files changed, 147 insertions(+), 63 deletions(-)

diff --git a/components/cmd/CommandMenu.vue b/components/cmd/CommandMenu.vue
index 60b0c847..4047b234 100644
--- a/components/cmd/CommandMenu.vue
+++ b/components/cmd/CommandMenu.vue
@@ -922,7 +922,7 @@ const autocompleteGroup = computed(() => {
 })
 
 const debouncedSearch = useDebounceFn(async (e) => {
-	const bookmarks = bookmarksStore.searchBookmark(searchTerm.value)
+	const bookmarks = bookmarksStore.searchBookmarks(searchTerm.value)
 	const { data } = await search(searchTerm.value.trim())
 
 	data.value = [...bookmarks, ...data.value]
@@ -933,7 +933,7 @@ const debouncedSearch = useDebounceFn(async (e) => {
 
 	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) {
@@ -974,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),
diff --git a/components/cmd/Item.vue b/components/cmd/Item.vue
index add56923..ad8b2630 100644
--- a/components/cmd/Item.vue
+++ b/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>
 
diff --git a/components/data/LatestPFBTable.vue b/components/data/LatestPFBTable.vue
index c2f388cc..ae9ac0f4 100644
--- a/components/data/LatestPFBTable.vue
+++ b/components/data/LatestPFBTable.vue
@@ -55,8 +55,16 @@ isLoading.value = false
 												:color="pfb.status === 'success' ? 'green' : 'red'"
 											/>
 
-											<Text size="12" weight="600" color="primary" mono class="table_column_alias">
-												{{ $getDisplayName('txs', pfb.hash) }}
+											<Text size="13" weight="600" color="primary" mono>
+												{{ pfb.hash.slice(0, 4).toUpperCase() }}
+											</Text>
+
+											<Flex align="center" gap="3">
+												<div v-for="dot in 3" class="dot" />
+											</Flex>
+
+											<Text size="13" weight="600" color="primary" mono>
+												{{ pfb.hash.slice(pfb.hash.length - 4, pfb.hash.length).toUpperCase() }}
 											</Text>
 
 											<CopyButton :text="pfb.hash.toUpperCase()" />
@@ -88,7 +96,7 @@ isLoading.value = false
 											<Flex align="center" gap="6">
 												<Icon name="block" size="14" color="secondary" />
 
-												<Text size="13" weight="600" color="primary" tabular class="table_column_alias">{{ $getDisplayName('blocks', pfb.height) }}</Text>
+												<Text size="13" weight="600" color="primary" tabular>{{ comma(pfb.height) }}</Text>
 											</Flex>
 										</Outline>
 									</Flex>
diff --git a/components/data/RecentNamespacesTable.vue b/components/data/RecentNamespacesTable.vue
index 37e25b69..54d46d97 100644
--- a/components/data/RecentNamespacesTable.vue
+++ b/components/data/RecentNamespacesTable.vue
@@ -132,7 +132,7 @@ const handleSort = (by) => {
 											<Flex align="center" gap="6">
 												<Icon name="block" size="14" color="secondary" />
 
-												<Text size="13" weight="600" color="primary" tabular class="table_column_alias">{{ $getDisplayName('blocks', ns.last_height) }}</Text>
+												<Text size="13" weight="600" color="primary" tabular>{{ comma(ns.last_height) }}</Text>
 											</Flex>
 										</Outline>
 									</Flex>
diff --git a/components/modals/BlobModal.vue b/components/modals/BlobModal.vue
index ed6076ed..6d188dac 100644
--- a/components/modals/BlobModal.vue
+++ b/components/modals/BlobModal.vue
@@ -5,7 +5,7 @@ import Button from "@/components/ui/Button.vue"
 import Spinner from "@/components/ui/Spinner.vue"
 
 /** Services */
-import { comma, formatBytes, getNamespaceID, space, strToHex } from "@/services/utils"
+import { comma, formatBytes, getNamespaceID, shortHash, space, strToHex } from "@/services/utils"
 
 /** API */
 import { fetchBlobByMetadata } from "@/services/api/namespace"
@@ -238,7 +238,15 @@ const handlePreviewContent = () => {
 
 							<Flex align="center" gap="8">
 								<Text size="13" weight="600" color="primary">
-									{{ $getDisplayName('txs', cacheStore.selectedBlob.tx.hash) }}
+									{{ cacheStore.selectedBlob.tx.hash.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">
+									{{ cacheStore.selectedBlob.tx.hash.slice(-4) }}
 								</Text>
 
 								<Icon name="arrow-narrow-up-right" size="12" color="secondary" />
@@ -292,7 +300,7 @@ const handlePreviewContent = () => {
 							<CopyButton :text="cacheStore.selectedBlob.commitment" />
 
 							<Text size="13" weight="600" color="primary" :class="$style.value">
-								{{ cacheStore.selectedBlob.commitment }}
+								{{ shortHash(cacheStore.selectedBlob.commitment) }}
 							</Text>
 						</Flex>
 					</Flex>
@@ -314,6 +322,24 @@ const handlePreviewContent = () => {
 							</NuxtLink>
 						</Flex>
 					</Flex>
+
+					<Flex v-if="cacheStore.selectedBlob.rollup" align="center" justify="between" wide :class="$style.metadata">
+						<Text size="12" weight="500" color="tertiary">Rollup:</Text>
+
+						<NuxtLink :to="`/rollup/${cacheStore.selectedBlob.rollup.slug}`" target="_blank">
+							<Flex align="center" gap="6">
+								<Flex align="center" justify="center" :class="$style.avatar_container">
+									<img :src="cacheStore.selectedBlob.rollup.logo" :class="$style.avatar_image" />
+								</Flex>
+
+								<Text size="13" weight="600" color="primary" :class="$style.value">
+									{{ cacheStore.selectedBlob.rollup.name }}
+								</Text>
+
+								<Icon name="arrow-narrow-up-right" size="12" color="secondary" />
+							</Flex>
+						</NuxtLink>
+					</Flex>
 				</Flex>
 			</Flex>
 
@@ -433,6 +459,20 @@ const handlePreviewContent = () => {
 	}
 }
 
+.avatar_container {
+	position: relative;
+	width: 20px;
+	height: 20px;
+	overflow: hidden;
+	border-radius: 50%;
+}
+
+.avatar_image {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+
 @media (max-width: 550px) {
 	.metadata {
 		flex-direction: column;
diff --git a/components/modules/block/BlobsTable.vue b/components/modules/block/BlobsTable.vue
index c9e3dae6..8ddb1874 100644
--- a/components/modules/block/BlobsTable.vue
+++ b/components/modules/block/BlobsTable.vue
@@ -106,6 +106,7 @@ const handleViewBlob = (blob) => {
 		signer: blob.signer,
 		size: blob.size,
 		tx: blob.tx,
+		rollup: blob.rollup,
 	}
 
 	modalsStore.open("blob")
@@ -171,7 +172,7 @@ const handlePrev = () => {
 							<th><Text size="12" weight="600" color="tertiary">Share Commitments</Text></th>
 							<th><Text size="12" weight="600" color="tertiary">Size</Text></th>
 							<th><Text size="12" weight="600" color="tertiary">Version</Text></th>
-							<th><Text size="12" weight="600" color="tertiary">Rollup</Text></th>
+							<th><Text size="12" weight="600" color="tertiary"></Text></th>
 						</tr>
 					</thead>
 
diff --git a/components/modules/block/BlockOverview.vue b/components/modules/block/BlockOverview.vue
index 6abbe57e..177715ac 100644
--- a/components/modules/block/BlockOverview.vue
+++ b/components/modules/block/BlockOverview.vue
@@ -578,9 +578,17 @@ const handleViewRawTransactions = () => {
 														:color="tx.status === 'success' ? 'green' : 'red'"
 													/>
 
-													<Text size="12" weight="600" color="primary" mono class="table_column_alias">
-														{{ $getDisplayName('txs', tx.hash) }}
-													</Text>
+													<Text size="13" weight="600" color="primary" mono>{{
+														tx.hash.slice(0, 4).toUpperCase()
+													}}</Text>
+
+													<Flex align="center" gap="3">
+														<div v-for="dot in 3" class="dot" />
+													</Flex>
+
+													<Text size="13" weight="600" color="primary" mono>{{
+														tx.hash.slice(tx.hash.length - 4, tx.hash.length).toUpperCase()
+													}}</Text>
 
 													<CopyButton :text="tx.hash" />
 												</Flex>
diff --git a/components/modules/namespace/tables/MessagesTable.vue b/components/modules/namespace/tables/MessagesTable.vue
index d8d7d55b..e48a8f97 100644
--- a/components/modules/namespace/tables/MessagesTable.vue
+++ b/components/modules/namespace/tables/MessagesTable.vue
@@ -45,8 +45,14 @@ const props = defineProps({
 										:color="message.tx.status === 'success' ? 'green' : 'red'"
 									/>
 
-									<Text size="12" weight="600" color="primary" mono class="table_column_alias">
-										{{ $getDisplayName('txs', message.tx.hash) }}
+									<Text size="13" weight="600" color="primary" mono>{{ message.tx.hash.slice(0, 4).toUpperCase() }}</Text>
+
+									<Flex align="center" gap="3">
+										<div v-for="dot in 3" class="dot" />
+									</Flex>
+
+									<Text size="13" weight="600" color="primary" mono>
+										{{ message.tx.hash.slice(message.tx.hash.length - 4, message.tx.hash.length).toUpperCase() }}
 									</Text>
 
 									<CopyButton :text="message.tx.hash" />
diff --git a/pages/txs.vue b/pages/txs.vue
index 21257199..364996a2 100644
--- a/pages/txs.vue
+++ b/pages/txs.vue
@@ -556,8 +556,16 @@ const handleNext = () => {
 														:color="tx.status === 'success' ? 'green' : 'red'"
 													/>
 
-													<Text size="12" weight="600" color="primary" mono class="table_column_alias">
-														{{ $getDisplayName('txs', tx.hash) }}
+													<Text size="13" weight="600" color="primary" mono>
+														{{ tx.hash.slice(0, 4).toUpperCase() }}
+													</Text>
+
+													<Flex align="center" gap="3">
+														<div v-for="dot in 3" class="dot" />
+													</Flex>
+
+													<Text size="13" weight="600" color="primary" mono>
+														{{ tx.hash.slice(tx.hash.length - 4, tx.hash.length).toUpperCase() }}
 													</Text>
 
 													<CopyButton :text="tx.hash" />
diff --git a/plugins/globalFunctions.js b/plugins/globalFunctions.js
index 2787a450..473ac492 100644
--- a/plugins/globalFunctions.js
+++ b/plugins/globalFunctions.js
@@ -1,5 +1,5 @@
 /** Services */
-import { comma, getShortHash, getShortNamespaceID, space, splitAddress } from "@/services/utils"
+import { comma, getShortNamespaceID, shortHash, splitAddress } from "@/services/utils"
 
 /** Store */
 import { useBookmarksStore } from "@/store/bookmarks"
@@ -22,7 +22,7 @@ export default defineNuxtPlugin((nuxtApp) => {
 			case 'namespaces':
 				return getShortNamespaceID(id)
 			case 'txs':
-				return getShortHash(id)
+				return shortHash(id)
 			default:
 				return id
 		}
diff --git a/services/api/socket.js b/services/api/socket.js
index e8227827..c27a7a62 100644
--- a/services/api/socket.js
+++ b/services/api/socket.js
@@ -9,44 +9,51 @@ export let socket = null
 export const init = () => {
 	const appStore = useAppStore()
 
-	socket = new WebSocket(useSocketURL())
-
-	socket.addEventListener("open", (e) => {
-		/** Head Subscription */
-		socket.send(
-			JSON.stringify({
-				method: "subscribe",
-				body: {
-					channel: "head",
-				},
-			}),
-		)
-
-		/** Blocks Subscription */
-		socket.send(
-			JSON.stringify({
-				method: "subscribe",
-				body: {
-					channel: "blocks",
-				},
-			}),
-		)
-	})
-
-	socket.addEventListener("message", (e) => {
-		const data = JSON.parse(e.data)
-		if (data.channel === 'head') {
-			appStore.lastHead = data.body;
-			// setTimeout(() => {
-			// 	appStore.lastHead.pop();
-			// }, 1000);
-		} else if (data.channel === 'blocks') {
-			appStore.latestBlocks.unshift(data.body);
-			setTimeout(() => {
-				appStore.latestBlocks.pop();
-			}, 1000);
-		}
-	})
+	const startWs = () => {
+
+		socket = new WebSocket(useSocketURL())
+
+		socket.addEventListener("open", (e) => {
+			/** Head Subscription */
+			socket.send(
+				JSON.stringify({
+					method: "subscribe",
+					body: {
+						channel: "head",
+					},
+				}),
+			)
+
+			/** Blocks Subscription */
+			socket.send(
+				JSON.stringify({
+					method: "subscribe",
+					body: {
+						channel: "blocks",
+					},
+				}),
+			)
+		})
+
+		socket.addEventListener("message", (e) => {
+			const data = JSON.parse(e.data)
+			if (data.channel === 'head') {
+				appStore.lastHead = data.body;
+			} else if (data.channel === 'blocks') {
+				appStore.latestBlocks.unshift(data.body);
+				setTimeout(() => {
+					appStore.latestBlocks.pop();
+				}, 1000);
+			}
+		})
+
+		socket.addEventListener("close", () => {
+			socket.value = null
+			setTimeout(startWs, 1_000)
+		})
+	}
+
+	startWs()
 }
 
 export const close = () => {
diff --git a/services/utils/general.js b/services/utils/general.js
index 95903efd..60249947 100644
--- a/services/utils/general.js
+++ b/services/utils/general.js
@@ -31,7 +31,7 @@ export const getShortNamespaceID = (id) => {
 	}
 }
 
-export const getShortHash = (hash) => {
+export const shortHash = (hash) => {
 	return `${hash.slice(0, 4).toUpperCase()} ••• ${hash.slice(-4).toUpperCase()}`
 }
 
diff --git a/store/bookmarks.js b/store/bookmarks.js
index 8e859f00..827ccc45 100644
--- a/store/bookmarks.js
+++ b/store/bookmarks.js
@@ -106,7 +106,7 @@ export const useBookmarksStore = defineStore("bookmarks", () => {
 		}
 	}
 
-	const searchBookmark = (searchString) => {
+	const searchBookmarks = (searchString) => {
 		if (!hasBookmarks) return []
 		
 		let res = []
@@ -118,6 +118,7 @@ export const useBookmarksStore = defineStore("bookmarks", () => {
 					res.push({
 						result: el,
 						type: el.type.toLowerCase(),
+						bookmark: true,
 					})
 				}
 			})
@@ -132,7 +133,7 @@ export const useBookmarksStore = defineStore("bookmarks", () => {
 		})
 	}
 
-	return { bookmarks, hasBookmarks, recentBookmarks, addBookmark, clearBookmarks, getBookmark, getBookmarkAlias, removeBookmark, searchBookmark }
+	return { bookmarks, hasBookmarks, recentBookmarks, addBookmark, clearBookmarks, getBookmark, getBookmarkAlias, removeBookmark, searchBookmarks }
 })
 
 if (import.meta.hot) {

From c1f03dce384454580e6aef1353f1d4460b071639 Mon Sep 17 00:00:00 2001
From: GussevPM <GussevPM@GMail.Com>
Date: Tue, 11 Jun 2024 13:40:35 +0200
Subject: [PATCH 12/12] Add sort for blobs

---
 services/api/block.js     | 2 ++
 services/api/namespace.js | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/services/api/block.js b/services/api/block.js
index 42ed0865..f8128352 100644
--- a/services/api/block.js
+++ b/services/api/block.js
@@ -94,6 +94,8 @@ export const fetchBlockBlobs = async ({ height, limit, offset, sort }) => {
 	try {
 		const url = new URL(`${useServerURL()}/block/${height}/blobs`)
 
+		url.searchParams.append("sort_by", 'time')
+		
 		if (limit) url.searchParams.append("limit", limit)
 		if (offset) url.searchParams.append("offset", offset)
 		if (sort) url.searchParams.append("sort", sort)
diff --git a/services/api/namespace.js b/services/api/namespace.js
index 58157a30..1325225a 100644
--- a/services/api/namespace.js
+++ b/services/api/namespace.js
@@ -79,6 +79,8 @@ export const fetchNamespaceBlobs = async ({ id, version, limit, offset }) => {
 	try {
 		const url = new URL(`${useServerURL()}/namespace/${id}/${version}/blobs`)
 
+		url.searchParams.append("sort_by", 'time')
+
 		if (limit) url.searchParams.append("limit", limit)
 		if (offset) url.searchParams.append("offset", offset)