From 39dbfd9eada3e4147a30e2e523647efb6f2b9e46 Mon Sep 17 00:00:00 2001
From: GussevPM <GussevPM@GMail.Com>
Date: Mon, 22 Jan 2024 13:47:37 +0100
Subject: [PATCH 01/41] Add donation links

---
 components/TheFooter.vue | 34 ++++++++++++++++++----------------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/components/TheFooter.vue b/components/TheFooter.vue
index d53f1710..c18f3e23 100644
--- a/components/TheFooter.vue
+++ b/components/TheFooter.vue
@@ -64,31 +64,33 @@ const handleChangeTheme = (theme) => {
 				<Flex align="center" gap="8">
 					<Icon name="logo" size="14" color="tertiary" />
 					<Text size="13" weight="500" color="secondary">Celenium</Text>
-					<Text size="13" weight="500" color="tertiary">- Celestia Explorer, {{ new Date().getFullYear() }}</Text>
+					<Text size="13" weight="500" color="tertiary">-</Text>
+					<Text size="13" weight="500" color="tertiary">Celestia Explorer, {{ new Date().getFullYear() }}</Text>
 				</Flex>
 
-				<Flex align="center" gap="16">
+				<Flex align="center" gap="8">
 					<a :href="`https://github.com/celenium-io/celenium-interface/releases/tag/v${appConfig.version}`" target="_blank">
-						<Flex>
-							<Text size="12" weight="600" color="support">
-								Version <Text color="tertiary">{{ appConfig.version }}</Text>
-							</Text>
+						<Flex gap="8">
+							<Text size="12" weight="600" color="support">Version</Text>
+							<Text size="12" weight="600" color="tertiary">{{ appConfig.version }}</Text>
 						</Flex>
 					</a>
 				</Flex>
 
-				<NuxtLink to="https://celenium.io/address/celestia15ans77hr2uxefyn6fa2lcsvpngwevuaugth7f5">
-					<Flex align="center" gap="8">
-						<Text size="12" weight="500" color="support">Donations: </Text>
-						<Text size="12" weight="500" color="tertiary">celestia</Text>
-						<Flex align="center" gap="3">
-							<div v-for="dot in 3" class="dot" />
+				<Flex align="center" gap="8">
+					<Text size="12" weight="500" color="support">Donations:</Text>
+					<a :href="`https://celenium.io/address/celestia15ans77hr2uxefyn6fa2lcsvpngwevuaugth7f5`" target="_blank">
+						<Flex>
+							<Text size="12" weight="500" color="tertiary">TIA</Text>
 						</Flex>
-						<Text size="12" weight="500" color="tertiary">wevu augt h7f5</Text>
-					</Flex>
-				</NuxtLink>
+					</a>
+					<a :href="`https://etherscan.io/address/0x9FfB1cb28c55735e77B352eE918b4F0c3595a761`" target="_blank">
+						<Flex>
+							<Text size="12" weight="500" color="tertiary">ETH</Text>
+						</Flex>
+					</a>
+				</Flex>
 			</Flex>
-
 			<Flex direction="column" align="end" gap="16">
 				<Flex align="center" gap="16">
 					<Dropdown side="top">

From 64f32db47358f00e21e09305987a804c8c02a9b8 Mon Sep 17 00:00:00 2001
From: GussevPM <GussevPM@GMail.Com>
Date: Mon, 22 Jan 2024 21:56:59 +0100
Subject: [PATCH 02/41] Add cross-env

---
 package.json   |  3 ++-
 pnpm-lock.yaml | 11 +++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 42282746..4d029a32 100644
--- a/package.json
+++ b/package.json
@@ -6,13 +6,14 @@
 	"license": "MIT",
 	"scripts": {
 		"build": "nuxt build",
-		"dev": "PORT=9090 nuxt dev",
+		"dev": "cross-env PORT=9090 nuxt dev",
 		"generate": "nuxt generate",
 		"preview": "nuxt preview",
 		"postinstall": "nuxt prepare"
 	},
 	"devDependencies": {
 		"@nuxt/devtools": "latest",
+		"cross-env": "^7.0.3",
 		"nuxt": "3.9.1",
 		"nuxt-og-image": "2.0.28",
 		"nuxt-simple-sitemap": "^4.2.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 32e79797..6c9bb00b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -52,6 +52,9 @@ devDependencies:
   '@nuxt/devtools':
     specifier: latest
     version: 1.0.8(nuxt@3.9.1)(vite@5.0.11)
+  cross-env:
+    specifier: ^7.0.3
+    version: 7.0.3
   nuxt:
     specifier: 3.9.1
     version: 3.9.1(sass@1.66.1)(vite@5.0.11)
@@ -3331,6 +3334,14 @@ packages:
     resolution: {integrity: sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==}
     dev: false
 
+  /cross-env@7.0.3:
+    resolution: {integrity: sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==}
+    engines: {node: '>=10.14', npm: '>=6', yarn: '>=1'}
+    hasBin: true
+    dependencies:
+      cross-spawn: 7.0.3
+    dev: true
+
   /cross-spawn@7.0.3:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
     engines: {node: '>= 8'}

From be117ab5bf4969054fdfe5fc6b9c9ca0da859830 Mon Sep 17 00:00:00 2001
From: GussevPM <GussevPM@GMail.Com>
Date: Tue, 23 Jan 2024 01:10:45 +0100
Subject: [PATCH 03/41] Change queries

---
 components/widgets/BlobsWidget.vue        | 8 +++-----
 components/widgets/TransactionsWidget.vue | 7 +++----
 services/api/stats.js                     | 6 +++---
 3 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/components/widgets/BlobsWidget.vue b/components/widgets/BlobsWidget.vue
index 9e79245f..3df46735 100644
--- a/components/widgets/BlobsWidget.vue
+++ b/components/widgets/BlobsWidget.vue
@@ -9,7 +9,7 @@ import Tooltip from "@/components/ui/Tooltip.vue"
 import { formatBytes } from "@/services/utils"
 
 /** API */
-import { fetchHistogram } from "@/services/api/stats"
+import { fetchSeries } from "@/services/api/stats"
 
 const days = ref([])
 const weeks = ref([])
@@ -18,11 +18,9 @@ const totalSize = ref(0)
 const maxSize = ref(0)
 
 onMounted(async () => {
-	const data = await fetchHistogram({
-		table: "block_stats",
-		func: "sum",
+	const data = await fetchSeries({
+		table: "blobs_size",
 		period: "day",
-		column: "blobs_size",
 		from: parseInt(DateTime.now().minus({ days: 120 }).ts / 1_000),
 	})
 
diff --git a/components/widgets/TransactionsWidget.vue b/components/widgets/TransactionsWidget.vue
index 74bd5bc2..7c47847d 100644
--- a/components/widgets/TransactionsWidget.vue
+++ b/components/widgets/TransactionsWidget.vue
@@ -9,7 +9,7 @@ import Tooltip from "@/components/ui/Tooltip.vue"
 import { comma, abbreviate } from "@/services/utils"
 
 /** API */
-import { fetchHistogram } from "@/services/api/stats"
+import { fetchSeries } from "@/services/api/stats"
 
 const histogram = ref([])
 
@@ -26,9 +26,8 @@ const max = ref(0)
 const roundedMax = ref(0)
 
 const getHistogram = async (sectorOffset) => {
-	const data = await fetchHistogram({
-		table: "tx",
-		func: "count",
+	const data = await fetchSeries({
+		table: "tx_count",
 		period: "hour",
 		from: parseInt(DateTime.now().minus({ hours: 24 - sectorOffset }).ts / 1_000),
 	})
diff --git a/services/api/stats.js b/services/api/stats.js
index dfe9fd7f..deece2f0 100644
--- a/services/api/stats.js
+++ b/services/api/stats.js
@@ -1,14 +1,14 @@
 /** Services */
 import { useServerURL } from "@/services/config"
 
-export const fetchHistogram = async ({ table, func, period, column, from, to }) => {
+export const fetchSeries = async ({ table, func, period, column, from, to }) => {
 	try {
-		const url = new URL(`${useServerURL()}/stats/histogram/${table}/${func}/${period}`)
+		const url = new URL(`${useServerURL()}/stats/series/${table}/${period}`)
 
 		if (column) url.searchParams.append("column", column)
 		if (from) url.searchParams.append("from", from)
 		if (to) url.searchParams.append("to", to)
-
+		console.log(url);
 		const data = await $fetch(url.href)
 		return data
 	} catch (error) {

From 20fd4bf303ceab22c2e1a6b7521ae8cf66e04543 Mon Sep 17 00:00:00 2001
From: GussevPM <GussevPM@GMail.Com>
Date: Tue, 23 Jan 2024 22:07:42 +0100
Subject: [PATCH 04/41] Fix transactions widget

---
 components/widgets/TransactionsWidget.vue | 2 +-
 services/api/stats.js                     | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/components/widgets/TransactionsWidget.vue b/components/widgets/TransactionsWidget.vue
index 7c47847d..8bbf3bf1 100644
--- a/components/widgets/TransactionsWidget.vue
+++ b/components/widgets/TransactionsWidget.vue
@@ -44,7 +44,7 @@ const buildHistogram = async () => {
 	const currentHour = DateTime.now().hour
 	const currentSector = hoursMap.find((m) => m.includes(currentHour))
 	const currentHourIdx = currentSector.indexOf(currentHour)
-	const sectorOffset = 6 - currentHourIdx
+	const sectorOffset = 5 - currentHourIdx
 
 	await getHistogram(sectorOffset)
 
diff --git a/services/api/stats.js b/services/api/stats.js
index deece2f0..ded105bc 100644
--- a/services/api/stats.js
+++ b/services/api/stats.js
@@ -8,7 +8,6 @@ export const fetchSeries = async ({ table, func, period, column, from, to }) =>
 		if (column) url.searchParams.append("column", column)
 		if (from) url.searchParams.append("from", from)
 		if (to) url.searchParams.append("to", to)
-		console.log(url);
 		const data = await $fetch(url.href)
 		return data
 	} catch (error) {

From ee910d8222416f57f0d0fb6a5b2058b84539e139 Mon Sep 17 00:00:00 2001
From: GussevPM <GussevPM@GMail.Com>
Date: Tue, 23 Jan 2024 22:17:00 +0100
Subject: [PATCH 05/41] Fix transactions widget

---
 components/widgets/TransactionsWidget.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/widgets/TransactionsWidget.vue b/components/widgets/TransactionsWidget.vue
index 8bbf3bf1..68dbe849 100644
--- a/components/widgets/TransactionsWidget.vue
+++ b/components/widgets/TransactionsWidget.vue
@@ -29,7 +29,7 @@ const getHistogram = async (sectorOffset) => {
 	const data = await fetchSeries({
 		table: "tx_count",
 		period: "hour",
-		from: parseInt(DateTime.now().minus({ hours: 24 - sectorOffset }).ts / 1_000),
+		from: parseInt(DateTime.now().minus({ hours: 25 - sectorOffset }).ts / 1_000),
 	})
 	histogram.value = data.reverse()
 }

From cb247718a65cf2b33880a67b03b0c1e512c7ad71 Mon Sep 17 00:00:00 2001
From: GussevPM <GussevPM@GMail.Com>
Date: Tue, 23 Jan 2024 22:28:26 +0100
Subject: [PATCH 06/41] Remove func parameter in fetchSeries

---
 services/api/stats.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/services/api/stats.js b/services/api/stats.js
index ded105bc..54a425dc 100644
--- a/services/api/stats.js
+++ b/services/api/stats.js
@@ -1,7 +1,7 @@
 /** Services */
 import { useServerURL } from "@/services/config"
 
-export const fetchSeries = async ({ table, func, period, column, from, to }) => {
+export const fetchSeries = async ({ table, period, column, from, to }) => {
 	try {
 		const url = new URL(`${useServerURL()}/stats/series/${table}/${period}`)
 

From 60e5a85a9e4bc9f56f29f02eba554930a7a92bf0 Mon Sep 17 00:00:00 2001
From: GussevPM <GussevPM@GMail.Com>
Date: Tue, 23 Jan 2024 22:52:34 +0100
Subject: [PATCH 07/41] Add button

---
 pages/namespaces/treemap/index.vue | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/pages/namespaces/treemap/index.vue b/pages/namespaces/treemap/index.vue
index 355312ac..b433900d 100644
--- a/pages/namespaces/treemap/index.vue
+++ b/pages/namespaces/treemap/index.vue
@@ -138,14 +138,19 @@ const handleSelectFilter = (target) => {
 
 <template>
 	<Flex direction="column" wide :class="$style.wrapper">
-		<Breadcrumbs
-			:items="[
-				{ link: '/', name: 'Explore' },
-				{ link: '/namespaces', name: `Namespaces` },
-				{ link: '/namespaces/treemap', name: `Treemap` },
-			]"
-			:class="$style.breadcrumbs"
-		/>
+		<Flex align="end" justify="between" :class="$style.breadcrumbs">
+			<Breadcrumbs
+				:items="[
+					{ link: '/', name: 'Explore' },
+					{ link: '/namespaces', name: `Namespaces` },
+					{ link: '/namespaces/treemap', name: `Treemap` },
+				]"
+			/>
+
+			<Button link="/namespaces" type="secondary" size="mini">
+				<Icon name="table" size="12" color="secondary" /> Table View
+			</Button>
+		</Flex>
 
 		<Flex direction="column" gap="12">
 			<Dropdown position="end">
@@ -167,7 +172,7 @@ const handleSelectFilter = (target) => {
 .wrapper {
 	max-width: calc(var(--base-width) + 48px);
 
-	padding: 40px 24px 60px 24px;
+	padding: 26px 24px 60px 24px;
 }
 
 .breadcrumbs {

From a58074116b8eda6acba9d7507f799ac22321b9ca Mon Sep 17 00:00:00 2001
From: GussevPM <GussevPM@GMail.Com>
Date: Wed, 24 Jan 2024 00:19:49 +0100
Subject: [PATCH 08/41] Fix transactions widget

---
 components/widgets/TransactionsWidget.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/components/widgets/TransactionsWidget.vue b/components/widgets/TransactionsWidget.vue
index 68dbe849..541f055e 100644
--- a/components/widgets/TransactionsWidget.vue
+++ b/components/widgets/TransactionsWidget.vue
@@ -29,7 +29,7 @@ const getHistogram = async (sectorOffset) => {
 	const data = await fetchSeries({
 		table: "tx_count",
 		period: "hour",
-		from: parseInt(DateTime.now().minus({ hours: 25 - sectorOffset }).ts / 1_000),
+		from: parseInt(DateTime.now().minus({ hours: 24 - sectorOffset }).ts / 1_000),
 	})
 	histogram.value = data.reverse()
 }
@@ -53,7 +53,6 @@ const buildHistogram = async () => {
 	let target = 0
 	while (items.length) {
 		if (sectors.value[target].length === 6) target += 1
-
 		sectors.value[target].push(items[0])
 
 		items.shift()

From e22f0ebe78a6660d7498d3d2dc3beef682ee1a8c Mon Sep 17 00:00:00 2001
From: xdeq <celldwellerq@gmail.com>
Date: Wed, 24 Jan 2024 15:40:15 +0300
Subject: [PATCH 09/41] Update license.yml

---
 .github/workflows/license.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/license.yml b/.github/workflows/license.yml
index 72df196c..019fe401 100644
--- a/.github/workflows/license.yml
+++ b/.github/workflows/license.yml
@@ -14,7 +14,7 @@ jobs:
 
     steps:
       - uses: actions/checkout@v2
-      - run: yarn --frozen-lockfile --production
+      - run: pnpm --production
       - uses: daynin/nodejs-license-checker@v0.2.0
         with:
           exclude-private-packages: true

From f962f5b4bfd1d14c30a029105f662170dc5f4e83 Mon Sep 17 00:00:00 2001
From: xdeq <celldwellerq@gmail.com>
Date: Wed, 24 Jan 2024 15:42:47 +0300
Subject: [PATCH 10/41] Update license.yml

---
 .github/workflows/license.yml | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/license.yml b/.github/workflows/license.yml
index 019fe401..db5c80ff 100644
--- a/.github/workflows/license.yml
+++ b/.github/workflows/license.yml
@@ -13,8 +13,9 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
-      - run: pnpm --production
+      - uses: actions/checkout@v3
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
       - uses: daynin/nodejs-license-checker@v0.2.0
         with:
           exclude-private-packages: true

From de13a1ace810d30dbf0d85799b52d22c77c878b4 Mon Sep 17 00:00:00 2001
From: GussevPM <GussevPM@GMail.Com>
Date: Thu, 25 Jan 2024 01:12:42 +0400
Subject: [PATCH 11/41] Fix Nan bug in transactions widget

---
 components/widgets/TransactionsWidget.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/widgets/TransactionsWidget.vue b/components/widgets/TransactionsWidget.vue
index 541f055e..6107b2f4 100644
--- a/components/widgets/TransactionsWidget.vue
+++ b/components/widgets/TransactionsWidget.vue
@@ -86,7 +86,7 @@ const getPercentageRatio = (v) => {
 }
 
 const getSectorName = (item) => {
-	return DateTime.fromISO(item.time).hour
+	return item.time ? DateTime.fromISO(item.time).hour : DateTime.now().hour
 }
 </script>
 

From 848ccf3807cc4030da4ee3db897e6dde98d52c93 Mon Sep 17 00:00:00 2001
From: GussevPM <GussevPM@GMail.Com>
Date: Thu, 25 Jan 2024 17:49:51 +0100
Subject: [PATCH 12/41] Rollups table and page v1

---
 components/modules/rollup/RollupCharts.vue    | 601 ++++++++++++++++++
 components/modules/rollup/RollupOverview.vue  | 430 +++++++++++++
 .../modules/rollup/tables/BlobsTable.vue      | 175 +++++
 .../modules/rollup/tables/NamespacesTable.vue | 198 ++++++
 pages/rollup/[id].vue                         | 121 ++++
 pages/rollups.vue                             | 422 ++++++++++++
 services/api/rollup.js                        |  70 ++
 services/api/stats.js                         |  14 +
 8 files changed, 2031 insertions(+)
 create mode 100644 components/modules/rollup/RollupCharts.vue
 create mode 100644 components/modules/rollup/RollupOverview.vue
 create mode 100644 components/modules/rollup/tables/BlobsTable.vue
 create mode 100644 components/modules/rollup/tables/NamespacesTable.vue
 create mode 100644 pages/rollup/[id].vue
 create mode 100644 pages/rollups.vue
 create mode 100644 services/api/rollup.js

diff --git a/components/modules/rollup/RollupCharts.vue b/components/modules/rollup/RollupCharts.vue
new file mode 100644
index 00000000..7640c8ce
--- /dev/null
+++ b/components/modules/rollup/RollupCharts.vue
@@ -0,0 +1,601 @@
+<script setup>
+/** Vendor */
+import * as d3 from "d3"
+import { DateTime } from "luxon"
+import { useDebounceFn } from "@vueuse/core"
+
+/** UI */
+import Button from "@/components/ui/Button.vue"
+import { Dropdown, DropdownItem } from "@/components/ui/Dropdown"
+
+/** Services */
+import { abbreviate, formatBytes } from "@/services/utils"
+
+/** API */
+import { fetchNamespaceSeries } from "@/services/api/stats"
+
+const props = defineProps({
+	id: {
+		type: String,
+		required: true,
+	},
+})
+
+const selectedPeriodIdx = ref(1)
+const periods = ref([
+	{
+		title: "Last 24 hours",
+		value: 24,
+		timeframe: "hour",
+	},
+	{
+		title: "Last 7 days",
+		value: 7,
+		timeframe: "day",
+	},
+	{
+		title: "Last 31 days",
+		value: 30,
+		timeframe: "day",
+	},
+])
+const selectedPeriod = computed(() => periods.value[selectedPeriodIdx.value])
+
+/** Charts */
+const chartWrapperEl = ref()
+const sizeSeriesChartEl = ref()
+const pfbSeriesChartEl = ref()
+
+/** Data */
+const sizeSeries = ref([])
+const pfbSeries = ref([])
+
+/** Tooltip */
+const showSeriesTooltip = ref(false)
+const showPfbTooltip = ref(false)
+const tooltipEl = ref()
+const tooltipXOffset = ref(0)
+const tooltipYOffset = ref(0)
+const tooltipYDataOffset = ref(0)
+const tooltipDynamicXPosition = ref(0)
+const tooltipText = ref("")
+
+const badgeEl = ref()
+const badgeText = ref("")
+const badgeOffset = ref(0)
+
+const buildChart = (chartEl, data, onEnter, onLeave) => {
+	const width = chartWrapperEl.value.wrapper.getBoundingClientRect().width
+	const height = 180
+	const marginTop = 0
+	const marginRight = 0
+	const marginBottom = 24
+	const marginLeft = 40
+
+	const MAX_VALUE = d3.max(data, (d) => d.value) ? d3.max(data, (d) => d.value) : 1
+
+	/** Scale */
+	const x = d3.scaleUtc(
+		d3.extent(data, (d) => d.date),
+		[marginLeft, width - marginRight],
+	)
+	const y = d3.scaleLinear([0, MAX_VALUE], [height - marginBottom - 6, marginTop])
+	const line = d3
+		.line()
+		.x((d) => x(d.date))
+		.y((d) => y(d.value))
+
+	/** Tooltip */
+	const bisect = d3.bisector((d) => d.date).center
+	const onPointermoved = (event) => {
+		onEnter()
+
+		const idx = bisect(data, x.invert(d3.pointer(event)[0]))
+
+		tooltipXOffset.value = x(data[idx].date)
+		tooltipYDataOffset.value = y(data[idx].value)
+		tooltipYOffset.value = event.layerY
+		tooltipText.value = data[idx].value
+
+		if (tooltipEl.value) {
+			if (idx > parseInt(selectedPeriod.value.value / 2)) {
+				tooltipDynamicXPosition.value = tooltipXOffset.value - tooltipEl.value.wrapper.getBoundingClientRect().width - 16
+			} else {
+				tooltipDynamicXPosition.value = tooltipXOffset.value + 16
+			}
+		}
+
+		badgeText.value =
+			selectedPeriod.value.timeframe === "day"
+				? DateTime.fromJSDate(data[idx].date).toFormat("LLL dd")
+				: DateTime.fromJSDate(data[idx].date).set({ minutes: 0 }).toFormat("hh:mm a")
+
+		if (!badgeEl.value) return
+		if (idx < 2) {
+			badgeOffset.value = 0
+		} else if (idx > selectedPeriod.value.value - 3) {
+			badgeOffset.value = badgeEl.value.getBoundingClientRect().width
+		} else {
+			badgeOffset.value = badgeEl.value.getBoundingClientRect().width / 2
+		}
+	}
+	const onPointerleft = () => {
+		onLeave()
+		badgeText.value = ""
+	}
+
+	/** SVG Container */
+	const svg = d3
+		.create("svg")
+		.attr("width", width)
+		.attr("height", height)
+		.attr("viewBox", [0, 0, width, height])
+		.attr("preserveAspectRatio", "none")
+		.attr("style", "max-width: 100%;  height: intrinsic;")
+		.style("-webkit-tap-highlight-color", "transparent")
+		.on("pointerenter pointermove", onPointermoved)
+		.on("pointerleave", onPointerleft)
+		.on("touchstart", (event) => event.preventDefault())
+
+	/** Vertical Lines */
+	svg.append("path")
+		.attr("fill", "none")
+		.attr("stroke", "var(--op-10)")
+		.attr("stroke-width", 2)
+		.attr("d", `M${marginLeft},${height - marginBottom + 2} L${marginLeft},${height - marginBottom - 5}`)
+	svg.append("path")
+		.attr("fill", "none")
+		.attr("stroke", "var(--op-10)")
+		.attr("stroke-width", 2)
+		.attr("d", `M${width - 1},${height - marginBottom + 2} L${width - 1},${height - marginBottom - 5}`)
+
+	/** Default Horizontal Line  */
+	svg.append("path")
+		.attr("fill", "none")
+		.attr("stroke", "var(--op-10)")
+		.attr("stroke-width", 2)
+		.attr("d", `M${0},${height - marginBottom - 6} L${width},${height - marginBottom - 6}`)
+
+	/** Chart Line */
+	svg.append("path")
+		.attr("fill", "none")
+		.attr("stroke", "var(--green)")
+		.attr("stroke-width", 2)
+		.attr("stroke-linecap", "round")
+		.attr("stroke-linejoin", "round")
+		.attr("d", line(data.slice(0, data.length - 1)))
+	svg.append("path")
+		.attr("fill", "none")
+		.attr("stroke", "var(--green)")
+		.attr("stroke-width", 2)
+		.attr("stroke-linecap", "round")
+		.attr("stroke-linejoin", "round")
+		.attr("stroke-dasharray", "8")
+		.attr("d", line(data.slice(data.length - 2, data.length)))
+
+	svg.append("circle")
+		.attr("cx", x(data[data.length - 1].date))
+		.attr("cy", y(data[data.length - 1].value))
+		.attr("fill", "var(--green)")
+		.attr("r", 3)
+
+	if (chartEl.children[0]) chartEl.children[0].remove()
+	chartEl.append(svg.node())
+}
+
+const getSizeSeries = async () => {
+	sizeSeries.value = []
+
+	const sizeSeriesRawData = await fetchNamespaceSeries({
+		id: props.id,
+		name: "size",
+		timeframe: selectedPeriod.value.timeframe,
+		from: parseInt(
+			DateTime.now().minus({
+				days: selectedPeriod.value.timeframe === "day" ? selectedPeriod.value.value : 0,
+				hours: selectedPeriod.value.timeframe === "hour" ? selectedPeriod.value.value : 0,
+			}).ts / 1_000,
+		),
+	})
+
+	const sizeSeriesMap = {}
+	sizeSeriesRawData.forEach((item) => {
+		sizeSeriesMap[DateTime.fromISO(item.time).toFormat(selectedPeriod.value.timeframe === "day" ? "y-LL-dd" : "y-LL-dd-HH")] =
+			item.value
+	})
+
+	for (let i = 1; i < selectedPeriod.value.value + 1; i++) {
+		const dt = DateTime.now().minus({
+			days: selectedPeriod.value.timeframe === "day" ? selectedPeriod.value.value - i : 0,
+			hours: selectedPeriod.value.timeframe === "hour" ? selectedPeriod.value.value - i : 0,
+		})
+		sizeSeries.value.push({
+			date: dt.toJSDate(),
+			value: parseInt(sizeSeriesMap[dt.toFormat(selectedPeriod.value.timeframe === "day" ? "y-LL-dd" : "y-LL-dd-HH")]) || 0,
+		})
+	}
+}
+
+const getPfbSeries = async () => {
+	pfbSeries.value = []
+
+	const pfbSeriesRawData = await fetchNamespaceSeries({
+		id: props.id,
+		name: "pfb_count",
+		timeframe: selectedPeriod.value.timeframe,
+		from: parseInt(
+			DateTime.now().minus({
+				days: selectedPeriod.value.timeframe === "day" ? selectedPeriod.value.value : 0,
+				hours: selectedPeriod.value.timeframe === "hour" ? selectedPeriod.value.value : 0,
+			}).ts / 1_000,
+		),
+	})
+
+	const pfbSeriesMap = {}
+	pfbSeriesRawData.forEach((item) => {
+		pfbSeriesMap[DateTime.fromISO(item.time).toFormat(selectedPeriod.value.timeframe === "day" ? "y-LL-dd" : "y-LL-dd-HH")] = item.value
+	})
+
+	for (let i = 1; i < selectedPeriod.value.value + 1; i++) {
+		const dt = DateTime.now().minus({
+			days: selectedPeriod.value.timeframe === "day" ? selectedPeriod.value.value - i : 0,
+			hours: selectedPeriod.value.timeframe === "hour" ? selectedPeriod.value.value - i : 0,
+		})
+		pfbSeries.value.push({
+			date: dt.toJSDate(),
+			value: parseInt(pfbSeriesMap[dt.toFormat(selectedPeriod.value.timeframe === "day" ? "y-LL-dd" : "y-LL-dd-HH")]) || 0,
+		})
+	}
+}
+
+const buildNamespaceCharts = async () => {
+	await getSizeSeries()
+	buildChart(
+		sizeSeriesChartEl.value.wrapper,
+		sizeSeries.value,
+		() => (showSeriesTooltip.value = true),
+		() => (showSeriesTooltip.value = false),
+	)
+
+	await getPfbSeries()
+	buildChart(
+		pfbSeriesChartEl.value.wrapper,
+		pfbSeries.value,
+		() => (showPfbTooltip.value = true),
+		() => (showPfbTooltip.value = false),
+	)
+}
+
+watch(
+	() => selectedPeriodIdx.value,
+	() => {
+		buildNamespaceCharts()
+	},
+)
+
+const debouncedRedraw = useDebounceFn((e) => {
+	buildNamespaceCharts()
+}, 500)
+
+onMounted(async () => {
+	window.addEventListener("resize", debouncedRedraw)
+
+	buildNamespaceCharts()
+})
+
+onBeforeUnmount(() => {
+	window.removeEventListener("resize", debouncedRedraw)
+})
+</script>
+
+<template>
+	<Flex direction="column" gap="4">
+		<Flex align="center" justify="between" :class="$style.header">
+			<Flex align="center" gap="8">
+				<Icon name="chart" size="14" color="primary" />
+				<Text size="13" weight="600" color="primary">Analytics</Text>
+			</Flex>
+
+			<Dropdown>
+				<Button size="mini" type="secondary">
+					{{ selectedPeriod.title }}
+					<Icon name="chevron" size="12" color="secondary" />
+				</Button>
+
+				<template #popup>
+					<DropdownItem v-for="(period, idx) in periods" @click="selectedPeriodIdx = idx">
+						<Flex align="center" gap="8">
+							<Icon :name="idx === selectedPeriodIdx ? 'check' : ''" size="12" color="secondary" />
+							{{ period.title }}
+						</Flex>
+					</DropdownItem>
+				</template>
+			</Dropdown>
+		</Flex>
+
+		<Flex justify="between" gap="32" :class="$style.data">
+			<Flex direction="column" gap="20" wide>
+				<Text size="13" weight="600" color="primary">Blob Size Usage</Text>
+
+				<Flex ref="chartWrapperEl" direction="column" :class="$style.chart_wrapper">
+					<Flex direction="column" justify="between" :class="[$style.axis, $style.y]">
+						<Text
+							v-if="sizeSeries.length"
+							size="12"
+							weight="600"
+							color="tertiary"
+							:style="{ opacity: Math.max(...sizeSeries.map((d) => d.value)) ? 1 : 0 }"
+						>
+							{{ formatBytes(Math.max(...sizeSeries.map((d) => d.value)), 0) }}
+						</Text>
+						<Skeleton v-else-if="!sizeSeries.length" w="32" h="12" />
+
+						<Text
+							v-if="sizeSeries.length"
+							size="12"
+							weight="600"
+							color="tertiary"
+							:style="{
+								opacity:
+									Math.round(Math.max(...sizeSeries.map((d) => d.value)) / 2) !==
+									Math.max(...sizeSeries.map((d) => d.value))
+										? 1
+										: 0,
+							}"
+						>
+							{{ formatBytes(Math.round(Math.max(...sizeSeries.map((d) => d.value)) / 2), 0) }}
+						</Text>
+						<Skeleton v-else-if="!sizeSeries.length" w="24" h="12" />
+
+						<Text v-if="sizeSeries.length" size="12" weight="600" color="tertiary"> 0 </Text>
+						<Skeleton v-else-if="!sizeSeries.length" w="16" h="12" />
+					</Flex>
+
+					<Flex :class="[$style.axis, $style.x]">
+						<Flex align="end" justify="between" wide>
+							<Text v-if="selectedPeriod.timeframe === 'day'" size="12" weight="600" color="tertiary">
+								{{
+									DateTime.now()
+										.minus({ days: selectedPeriod.value - 1 })
+										.toFormat("LLL dd")
+								}}
+							</Text>
+							<Text v-else size="12" weight="600" color="tertiary">
+								{{ DateTime.now().minus({ hours: selectedPeriod.value }).set({ minutes: 0 }).toFormat("hh:mm a") }}
+							</Text>
+
+							<Text size="12" weight="600" color="tertiary">{{ selectedPeriod.timeframe === "day" ? "Today" : "Now" }}</Text>
+						</Flex>
+					</Flex>
+
+					<Transition name="fastfade">
+						<div v-if="showSeriesTooltip" :class="$style.tooltip_wrapper">
+							<div
+								:style="{ transform: `translate(${tooltipXOffset - 3}px, ${tooltipYDataOffset - 4}px)` }"
+								:class="$style.dot"
+							/>
+							<div :style="{ transform: `translateX(${tooltipXOffset}px)` }" :class="$style.line" />
+							<div
+								ref="badgeEl"
+								:style="{ transform: `translateX(${tooltipXOffset - badgeOffset}px)` }"
+								:class="$style.badge"
+							>
+								<Text size="12" weight="600" color="secondary">
+									{{ badgeText }}
+								</Text>
+							</div>
+							<Flex
+								ref="tooltipEl"
+								:style="{ transform: `translate(${tooltipDynamicXPosition}px, ${tooltipYDataOffset - 40}px)` }"
+								direction="column"
+								gap="8"
+								:class="$style.tooltip"
+							>
+								<Flex align="center" gap="16">
+									<Text size="12" weight="600" color="secondary">Usage</Text>
+									<Text size="12" weight="600" color="primary"> {{ formatBytes(tooltipText) }} </Text>
+								</Flex>
+							</Flex>
+						</div>
+					</Transition>
+
+					<Flex ref="sizeSeriesChartEl" :class="$style.chart" />
+				</Flex>
+			</Flex>
+
+			<Flex direction="column" gap="16" wide>
+				<Text size="13" weight="600" color="primary">Pay For Blobs Count</Text>
+
+				<Flex direction="column" :class="$style.chart_wrapper">
+					<Flex direction="column" justify="between" :class="[$style.axis, $style.y]">
+						<Text
+							v-if="pfbSeries.length"
+							size="12"
+							weight="600"
+							color="tertiary"
+							:style="{ opacity: Math.max(...pfbSeries.map((d) => d.value)) ? 1 : 0 }"
+						>
+							{{ abbreviate(Math.max(...pfbSeries.map((d) => d.value)), 0) }}
+						</Text>
+						<Skeleton v-else-if="!pfbSeries.length" w="32" h="12" />
+
+						<Text
+							v-if="pfbSeries.length"
+							size="12"
+							weight="600"
+							color="tertiary"
+							:style="{
+								opacity:
+									Math.round(Math.max(...pfbSeries.map((d) => d.value)) / 2) != Math.max(...pfbSeries.map((d) => d.value))
+										? 1
+										: 0,
+							}"
+						>
+							{{ abbreviate(Math.round(Math.max(...pfbSeries.map((d) => d.value)) / 2), 0) }}
+						</Text>
+						<Skeleton v-else-if="!pfbSeries.length" w="24" h="12" />
+
+						<Text v-if="pfbSeries.length" size="12" weight="600" color="tertiary"> 0 </Text>
+						<Skeleton v-else-if="!pfbSeries.length" w="16" h="12" />
+					</Flex>
+
+					<Flex :class="[$style.axis, $style.x]">
+						<Flex align="end" justify="between" wide>
+							<Text v-if="selectedPeriod.timeframe === 'day'" size="12" weight="600" color="tertiary">
+								{{
+									DateTime.now()
+										.minus({ days: selectedPeriod.value - 1 })
+										.toFormat("LLL dd")
+								}}
+							</Text>
+							<Text v-else size="12" weight="600" color="tertiary">
+								{{ DateTime.now().minus({ hours: selectedPeriod.value }).set({ minutes: 0 }).toFormat("hh:mm a") }}
+							</Text>
+
+							<Text size="12" weight="600" color="tertiary">{{ selectedPeriod.timeframe === "day" ? "Today" : "Now" }}</Text>
+						</Flex>
+					</Flex>
+
+					<Transition name="fastfade">
+						<div v-if="showPfbTooltip" :class="$style.tooltip_wrapper">
+							<div
+								:style="{ transform: `translate(${tooltipXOffset - 3}px, ${tooltipYDataOffset - 4}px)` }"
+								:class="$style.dot"
+							/>
+							<div :style="{ transform: `translateX(${tooltipXOffset}px)` }" :class="$style.line" />
+							<div
+								ref="badgeEl"
+								:style="{ transform: `translateX(${tooltipXOffset - badgeOffset}px)` }"
+								:class="$style.badge"
+							>
+								<Text size="12" weight="600" color="secondary">
+									{{ badgeText }}
+								</Text>
+							</div>
+							<Flex
+								ref="tooltipEl"
+								:style="{ transform: `translate(${tooltipDynamicXPosition}px, ${tooltipYDataOffset - 40}px)` }"
+								direction="column"
+								gap="8"
+								:class="$style.tooltip"
+							>
+								<Flex align="center" gap="16">
+									<Text size="12" weight="600" color="secondary">Count</Text>
+									<Text size="12" weight="600" color="primary"> {{ abbreviate(tooltipText) }} </Text>
+								</Flex>
+							</Flex>
+						</div>
+					</Transition>
+
+					<Flex ref="pfbSeriesChartEl" :class="$style.chart" />
+				</Flex>
+			</Flex>
+		</Flex>
+	</Flex>
+</template>
+
+<style module>
+.header {
+	height: 40px;
+
+	border-radius: 8px 8px 4px 4px;
+	background: var(--card-background);
+
+	padding: 0 12px;
+}
+
+.data {
+	border-radius: 4px 4px 8px 8px;
+	background: var(--card-background);
+
+	padding: 16px;
+}
+
+.chart_wrapper {
+	position: relative;
+
+	height: 180px;
+}
+
+.chart {
+	position: absolute;
+
+	& svg {
+		overflow: visible;
+	}
+}
+
+.axis {
+	position: absolute;
+	top: 0;
+	right: 0;
+
+	&.x {
+		bottom: 6px;
+		left: 40px;
+	}
+
+	&.y {
+		bottom: 34px;
+		left: 0;
+	}
+}
+
+.tooltip_wrapper {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+
+	& .dot {
+		width: 6px;
+		height: 6px;
+		border-radius: 50px;
+		background: var(--green);
+
+		box-shadow: 0 0 0 4px rgba(10, 222, 113, 27%);
+
+		transition: all 0.15s ease;
+	}
+
+	& .line {
+		position: absolute;
+		top: 0;
+		bottom: 32px;
+
+		border-left: 1px dashed var(--op-10);
+
+		transition: all 0.15s ease;
+	}
+
+	& .badge {
+		position: absolute;
+		bottom: 4px;
+
+		background: var(--card-background);
+
+		transition: all 0.15s ease;
+	}
+
+	& .tooltip {
+		pointer-events: none;
+		position: absolute;
+		z-index: 10;
+
+		background: var(--card-background);
+		border-radius: 6px;
+		box-shadow: inset 0 0 0 1px var(--op-5), 0 14px 34px rgba(0, 0, 0, 15%), 0 4px 14px rgba(0, 0, 0, 5%);
+
+		padding: 8px;
+
+		transition: all 0.2s ease;
+	}
+}
+
+@media (max-width: 800px) {
+	.data {
+		flex-direction: column;
+	}
+}
+</style>
diff --git a/components/modules/rollup/RollupOverview.vue b/components/modules/rollup/RollupOverview.vue
new file mode 100644
index 00000000..bbdff409
--- /dev/null
+++ b/components/modules/rollup/RollupOverview.vue
@@ -0,0 +1,430 @@
+<script setup>
+/** UI */
+import Button from "@/components/ui/Button.vue"
+import { Dropdown, DropdownItem } from "@/components/ui/Dropdown"
+
+/** Tables */
+import BlobsTable from "./tables/BlobsTable.vue"
+import NamespacesTable from "./tables/NamespacesTable.vue"
+
+/** Services */
+import { comma, space, formatBytes, getNamespaceID } from "@/services/utils"
+
+/** API */
+import { fetchRollupBlobs, fetchRollupNamespaces } from "@/services/api/rollup"
+
+/** Store */
+import { useModalsStore } from "@/store/modals"
+import { useCacheStore } from "@/store/cache"
+const modalsStore = useModalsStore()
+const cacheStore = useCacheStore()
+
+const props = defineProps({
+	rollup: {
+		type: Object,
+		required: true,
+	},
+})
+
+const tabs = ref([
+	{
+		name: "Blobs",
+		icon: "blob",
+	},
+	{
+		name: "Namespaces",
+		icon: "folder",
+	},
+])
+const activeTab = ref(tabs.value[0].name)
+
+const isRefetching = ref(false)
+const namespaces = ref([])
+const blobs = ref([])
+
+const page = ref(1)
+const pages = computed(() => 1)
+const handleNext = () => {
+	page.value += 1
+}
+const handlePrev = () => {
+	page.value -= 1
+}
+
+const getBlobs = async () => {
+	isRefetching.value = true
+
+	const { data } = await fetchRollupBlobs({
+		id: props.rollup.id,
+		offset: (page.value - 1) * 10,
+		limit: 10,
+	})
+
+	if (data.value?.length) {
+		blobs.value = data.value
+		cacheStore.current.blobs = blobs.value
+	}
+
+	isRefetching.value = false
+}
+const getNamespaces = async () => {
+	isRefetching.value = true
+
+	const { data } = await fetchRollupNamespaces({
+		id: props.rollup.id,
+		offset: (page.value - 1) * 10,
+		limit: 10,
+	})
+
+	if (data.value?.length) {
+		namespaces.value = data.value
+		cacheStore.current.namespaces = namespaces.value
+	}
+
+	isRefetching.value = false
+}
+
+/** Initital fetch for blobs */
+await getBlobs()
+
+/** Refetch Blobs/Messages on new page */
+watch(
+	() => page.value,
+	() => {
+		switch (activeTab.value) {
+			case "Blobs":
+				getBlobs()
+				break
+
+			case "Namespaces":
+				getNamespaces()
+				break
+		}
+	},
+)
+
+/** Refetch Blobs/Namespaces on tab changing */
+watch(
+	() => activeTab.value,
+	() => {
+		page.value = 1
+
+		switch (activeTab.value) {
+			case "Blobs":
+				getBlobs()
+				break
+
+			case "Namespaces":
+				getNamespaces()
+				break
+		}
+	},
+)
+
+const handleViewRawNamespaces = () => {
+	cacheStore.current._target = "namespaces"
+	modalsStore.open("rawData")
+}
+
+const handleViewRawBlobs = () => {
+	cacheStore.current._target = "blobs"
+	modalsStore.open("rawData")
+}
+
+</script>
+
+<template>
+	<Flex direction="column" gap="4">
+		<Flex align="center" justify="between" :class="$style.header">
+			<Flex align="center" gap="8">
+				<Icon name="folder" size="14" color="primary" />
+				<Text size="13" weight="600" color="primary">Rollup</Text>
+			</Flex>
+
+			<!-- <Dropdown>
+				<Button type="tertiary" size="mini">
+					<Icon name="dots" size="16" color="secondary" />
+				</Button>
+
+				<template #popup>
+					<DropdownItem @click="handleViewRawNamespaces"> View Raw Namespaces </DropdownItem>
+					<DropdownItem @click="handleViewRawBlobs"> View Raw Blobs </DropdownItem>
+				</template>
+			</Dropdown> -->
+		</Flex>
+
+		<Flex gap="4" :class="$style.content">
+			<Flex direction="column" :class="$style.data">
+				<Flex direction="column" gap="24" :class="$style.main">
+					<Flex direction="column" gap="8" :class="$style.key_value">
+						<Text size="12" weight="600" color="secondary">Rollup</Text>
+
+						<Flex align="center" gap="10">
+							<Text size="13" weight="600" color="primary">{{ rollup.name }} </Text>
+
+							<CopyButton :text="rollup.name" />
+						</Flex>
+					</Flex>
+
+					<Flex align="center" justify="center">
+						<img :src="rollup.logo" :class="$style.key_value" />
+					</Flex>
+
+					<Flex direction="column" gap="8" :class="$style.key_value">
+						<Text size="12" weight="600" color="secondary">Description</Text>
+
+						<Text size="12" weight="600" color="tertiary">{{ rollup.description }} </Text>
+					</Flex>
+
+					<Flex align="center" justify="end" gap="12">
+						<a :href="rollup.website" target="_blank">
+							<Icon name="logo" size="14" color="secondary" :class="$style.btn" />
+						</a>
+						<a :href="rollup.twitter" target="_blank">
+							<Icon name="twitter" size="14" color="secondary" :class="$style.btn" />
+						</a>
+					</Flex>
+
+					<Flex direction="column" gap="16">
+						<Text size="12" weight="600" color="secondary">Details</Text>
+
+						<Flex align="center" justify="between">
+							<Text size="12" weight="600" color="tertiary">Size</Text>
+							<Text size="12" weight="600" color="secondary"> {{ formatBytes(rollup.size) }} </Text>
+						</Flex>
+
+						<Flex align="center" justify="between">
+							<Text size="12" weight="600" color="tertiary">Blobs</Text>
+							<Text size="12" weight="600" color="secondary"> {{ comma(rollup.blobs_count) }} </Text>
+						</Flex>
+					</Flex>
+				</Flex>
+			</Flex>
+
+			<Flex direction="column" gap="4" wide :class="$style.txs_wrapper">
+				<Flex align="center" justify="between" :class="$style.tabs_wrapper">
+					<Flex gap="4" :class="$style.tabs">
+						<Flex
+							@click="activeTab = tab.name"
+							v-for="tab in tabs"
+							align="center"
+							gap="6"
+							:class="[$style.tab, activeTab === tab.name && $style.active]"
+						>
+							<Icon :name="tab.icon" size="12" color="secondary" />
+							<Text size="13" weight="600">{{ tab.name }}</Text>
+						</Flex>
+					</Flex>
+				</Flex>
+
+				<Flex direction="column" justify="center" gap="8" :class="[$style.table, isRefetching && $style.disabled]">
+					<!-- Blobs Table -->
+					<template v-if="activeTab === 'Blobs'">
+						<BlobsTable v-if="blobs.length" :blobs="blobs" />
+
+						<Flex v-else align="center" justify="center" direction="column" gap="8" wide :class="$style.empty">
+							<Text size="13" weight="600" color="secondary" align="center"> No blobs </Text>
+							<Text size="12" weight="500" height="160" color="tertiary" align="center" style="max-width: 220px">
+								This Rollup did not push any blobs
+							</Text>
+						</Flex>
+
+						<!-- Pagination -->
+						<Flex v-if="blobs.length" align="center" gap="6" :class="$style.pagination">
+							<Button @click="page = 1" type="secondary" size="mini" :disabled="page === 1 || rollup.blobs_count <= 10">
+								<Icon name="arrow-left-stop" size="12" color="primary" />
+							</Button>
+							<Button @click="handlePrev" type="secondary" size="mini" :disabled="page === 1 || rollup.blobs_count <= 10">
+								<Icon name="arrow-left" size="12" color="primary" />
+							</Button>
+
+							<Button type="secondary" size="mini" disabled>
+								<Text size="12" weight="600" color="primary">Page {{ page }}</Text>
+							</Button>
+
+							<Button @click="handleNext" type="secondary" size="mini" :disabled="blobs.length < 10 || rollup.blobs_count <= 10">
+								<Icon name="arrow-right" size="12" color="primary" />
+							</Button>
+						</Flex>
+					</template>
+					<!-- Namespaces Table -->
+					<template v-if="activeTab === 'Namespaces'">
+						<NamespacesTable v-if="namespaces.length" :namespaces="namespaces" />
+
+						<Flex v-else align="center" justify="center" direction="column" gap="8" wide :class="$style.empty">
+							<Text size="13" weight="600" color="secondary" align="center"> No namespaces </Text>
+							<Text size="12" weight="500" height="160" color="tertiary" align="center" style="max-width: 220px">
+								This rollup is not linked to any namespace
+							</Text>
+						</Flex>
+
+						<!-- Pagination -->
+						<Flex v-if="namespaces.length" align="center" gap="6" :class="$style.pagination">
+							<Button @click="page = 1" type="secondary" size="mini" :disabled="page === 1 || namespaces.length <= 10">
+								<Icon name="arrow-left-stop" size="12" color="primary" />
+							</Button>
+							<Button @click="handlePrev" type="secondary" size="mini" :disabled="page === 1 || namespaces.length <= 10">
+								<Icon name="arrow-left" size="12" color="primary" />
+							</Button>
+
+							<Button type="secondary" size="mini" disabled>
+								<Text size="12" weight="600" color="primary">Page {{ page }}</Text>
+							</Button>
+
+							<Button @click="handleNext" type="secondary" size="mini" :disabled="namespaces.length <= 10">
+								<Icon name="arrow-right" size="12" color="primary" />
+							</Button>
+						</Flex>
+
+					</template>
+					<!-- Pagination -->
+					<!-- <Flex v-if="pages > 1" align="center" gap="6" :class="$style.pagination">
+						<Button @click="page = 1" type="secondary" size="mini" :disabled="page === 1">
+							<Icon name="arrow-left-stop" size="12" color="primary" />
+						</Button>
+						<Button type="secondary" @click="handlePrev" size="mini" :disabled="page === 1">
+							<Icon name="arrow-left" size="12" color="primary" />
+						</Button>
+
+						<Button type="secondary" size="mini" disabled>
+							<Text size="12" weight="600" color="primary"> {{ comma(page) }} of {{ comma(pages) }} </Text>
+						</Button>
+
+						<Button @click="handleNext" type="secondary" size="mini" :disabled="page === pages">
+							<Icon name="arrow-right" size="12" color="primary" />
+						</Button>
+						<Button @click="page = pages" type="secondary" size="mini" :disabled="page === pages">
+							<Icon name="arrow-right-stop" size="12" color="primary" />
+						</Button>
+					</Flex> -->
+				</Flex>
+			</Flex>
+		</Flex>
+	</Flex>
+</template>
+
+<style module>
+.header {
+	height: 40px;
+
+	border-radius: 8px 8px 4px 4px;
+	background: var(--card-background);
+
+	padding: 0 12px;
+}
+
+.data {
+	min-width: 384px;
+	/* max-height: 534px; */
+
+	border-radius: 4px 4px 4px 8px;
+	background: var(--card-background);
+
+	.main {
+		padding: 16px;
+
+		& .key_value {
+			max-width: 100%;
+		}
+	}
+}
+
+.txs_wrapper {
+	min-width: 0;
+}
+
+.tabs_wrapper {
+	min-height: 44px;
+	overflow-x: auto;
+
+	border-radius: 4px;
+	background: var(--card-background);
+
+	padding: 0 8px;
+}
+
+.tabs_wrapper::-webkit-scrollbar {
+	display: none;
+}
+
+.tab {
+	height: 28px;
+
+	cursor: pointer;
+	border-radius: 6px;
+
+	padding: 0 8px;
+
+	transition: all 0.1s ease;
+
+	& span {
+		color: var(--txt-tertiary);
+
+		transition: all 0.1s ease;
+	}
+
+	&:hover {
+		& span {
+			color: var(--txt-secondary);
+		}
+	}
+}
+
+.tab.active {
+	background: var(--op-8);
+
+	& span {
+		color: var(--txt-primary);
+	}
+}
+
+.table {
+	height: 100%;
+
+	border-radius: 4px 4px 8px 4px;
+	background: var(--card-background);
+}
+
+.table.disabled {
+	opacity: 0.5;
+	pointer-events: none;
+}
+
+.empty {
+	padding-top: 16px;
+}
+
+.pagination {
+	padding: 0 16px 16px 16px;
+}
+
+@media (max-width: 800px) {
+	.content {
+		flex-direction: column;
+	}
+
+	.data {
+		min-width: initial;
+
+		border-radius: 4px;
+	}
+
+	.table {
+		border-radius: 4px 4px 8px 8px;
+	}
+}
+
+@media (max-width: 400px) {
+	.tabs_wrapper {
+		overflow-x: auto;
+
+		&::-webkit-scrollbar {
+			display: none;
+		}
+	}
+
+	.hint {
+		display: none;
+	}
+}
+</style>
diff --git a/components/modules/rollup/tables/BlobsTable.vue b/components/modules/rollup/tables/BlobsTable.vue
new file mode 100644
index 00000000..02558a4a
--- /dev/null
+++ b/components/modules/rollup/tables/BlobsTable.vue
@@ -0,0 +1,175 @@
+<script setup>
+/** Vendor */
+import { DateTime } from "luxon"
+
+/** UI */
+import Tooltip from "@/components/ui/Tooltip.vue"
+
+/** Services */
+import { formatBytes } from "@/services/utils"
+
+/** Store */
+import { useCacheStore } from "@/store/cache"
+import { useModalsStore } from "@/store/modals"
+const cacheStore = useCacheStore()
+const modalsStore = useModalsStore()
+
+const props = defineProps({
+	blobs: {
+		type: Array,
+		required: true,
+	},
+})
+
+const handleViewBlob = (blob) => {
+	cacheStore.selectedBlob = {
+		...blob,
+		hash: blob.namespace.hash,
+		namespace_id: blob.namespace.namespace_id,
+		namespace_name: blob.namespace.name,
+	}
+
+	modalsStore.open("blob")
+}
+</script>
+
+<template>
+	<div :class="$style.wrapper_blobs">
+		<table :class="$style.table">
+			<thead>
+				<tr>
+					<th><Text size="12" weight="600" color="tertiary">Signer</Text></th>
+					<th><Text size="12" weight="600" color="tertiary">Time</Text></th>
+					<th><Text size="12" weight="600" color="tertiary">Share Commitments</Text></th>
+					<th><Text size="12" weight="600" color="tertiary">Size</Text></th>
+				</tr>
+			</thead>
+
+			<tbody>
+				<tr v-for="blob in blobs" @click.stop="handleViewBlob(blob)">
+					<td>
+						<Tooltip v-if="blob.signer" position="start" delay="500">
+							<Flex align="center" gap="8">
+								<AddressBadge :hash="blob.signer" />
+
+								<CopyButton :text="blob.signer" />
+							</Flex>
+
+							<template #content>
+								{{ blob.signer }}
+							</template>
+						</Tooltip>
+						<Flex v-else align="center">
+							<Text size="13" weight="600" color="secondary">Unknown</Text>
+						</Flex>
+					</td>
+					<td>
+						<Text size="13" weight="600" color="primary">
+							{{ DateTime.fromISO(blob.time).setLocale("en").toFormat("ff") }}
+						</Text>
+					</td>
+					<td>
+						<Tooltip position="start" delay="500">
+							<Flex align="center" gap="8">
+								<Text size="13" weight="600" color="primary">
+									{{ blob.commitment.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">
+									{{ blob.commitment.slice(blob.commitment.length - 4, blob.commitment.length) }}
+								</Text>
+
+								<CopyButton :text="blob.commitment" />
+							</Flex>
+
+							<template #content>
+								{{ blob.commitment }}
+							</template>
+						</Tooltip>
+					</td>
+					<td>
+						<Text size="13" weight="600" color="primary">
+							{{ formatBytes(blob.size) }}
+						</Text>
+					</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+</template>
+
+<style module>
+.wrapper_blobs {
+	min-width: 100%;
+	width: 0;
+	height: 100%;
+
+	overflow-x: auto;
+}
+
+.table {
+	width: 100%;
+	height: fit-content;
+
+	border-spacing: 0px;
+
+	padding-bottom: 8px;
+
+	& tbody {
+		& tr {
+			cursor: pointer;
+
+			transition: all 0.05s ease;
+
+			&:hover {
+				background: var(--op-5);
+			}
+
+			&:active {
+				background: var(--op-8);
+			}
+		}
+	}
+
+	& tr th {
+		text-align: left;
+		padding: 0;
+		padding-right: 16px;
+		padding-top: 16px;
+		padding-bottom: 8px;
+
+		&:first-child {
+			padding-left: 16px;
+		}
+
+		& span {
+			display: flex;
+		}
+	}
+
+	& tr td {
+		padding: 0;
+		padding-top: 10px;
+		padding-bottom: 10px;
+		padding-right: 24px;
+
+		white-space: nowrap;
+
+		&:first-child {
+			padding-left: 16px;
+		}
+
+		& > a {
+			display: flex;
+
+			min-height: 40px;
+
+			padding-right: 24px;
+		}
+	}
+}
+</style>
diff --git a/components/modules/rollup/tables/NamespacesTable.vue b/components/modules/rollup/tables/NamespacesTable.vue
new file mode 100644
index 00000000..b1136f9a
--- /dev/null
+++ b/components/modules/rollup/tables/NamespacesTable.vue
@@ -0,0 +1,198 @@
+<script setup>
+/** Vendor */
+import { DateTime } from "luxon"
+
+/** UI */
+import Tooltip from "@/components/ui/Tooltip.vue"
+
+/** Shared Components */
+import MessageTypeBadge from "@/components/shared/MessageTypeBadge.vue"
+
+/** Services */
+import { comma, formatBytes, space, getNamespaceID } from "@/services/utils"
+
+const router = useRouter()
+
+const props = defineProps({
+	namespaces: {
+		type: Array,
+		required: true,
+	},
+})
+</script>
+
+<template>
+	<div :class="$style.wrapper_messages">
+		<table :class="$style.table">
+			<thead>
+				<tr>
+					<th><Text size="12" weight="600" color="tertiary">Namespace ID</Text></th>
+					<th><Text size="12" weight="600" color="tertiary">Time</Text></th>
+					<th><Text size="12" weight="600" color="tertiary">Version</Text></th>
+					<th><Text size="12" weight="600" color="tertiary">Size</Text></th>
+					<th><Text size="12" weight="600" color="tertiary">Pay For Blobs</Text></th>
+				</tr>
+			</thead>
+
+			<tbody>
+				<tr v-for="ns in namespaces">
+					<td style="width: 1px">
+						<NuxtLink :to="`/namespace/${ns.namespace_id}`">
+							<Flex align="center">
+								<Tooltip position="start">
+									<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)) }}
+													</Text>
+
+													<CopyButton :text="getNamespaceID(ns.namespace_id)" />
+												</Flex>
+
+												<Text
+													v-if="ns.name !== getNamespaceID(ns.namespace_id)"
+													size="12"
+													weight="500"
+													color="tertiary"
+												>
+													{{ ns.name }}
+												</Text>
+											</Flex>
+										</template>
+										<template v-else>
+											<Text size="13" weight="700" color="secondary" mono>Genesis</Text>
+										</template>
+									</Flex>
+
+									<template #content>
+										{{ space(getNamespaceID(ns.namespace_id)) }}
+									</template>
+								</Tooltip>
+							</Flex>
+						</NuxtLink>
+					</td>
+					<td>
+						<NuxtLink :to="`/namespace/${ns.namespace_id}`">
+							<Flex direction="column" justify="center" gap="4">
+								<Text size="12" weight="600" color="primary">
+									{{ DateTime.fromISO(ns.last_message_time).toRelative({ locale: "en", style: "short" }) }}
+								</Text>
+								<Text size="12" weight="500" color="tertiary">
+									{{ DateTime.fromISO(ns.last_message_time).setLocale("en").toFormat("LLL d, t") }}
+								</Text>
+							</Flex>
+						</NuxtLink>
+					</td>
+					<td>
+						<NuxtLink :to="`/namespace/${ns.namespace_id}`">
+							<Flex align="center">
+								<Text size="13" weight="600" color="primary">{{ ns.version }}</Text>
+							</Flex>
+						</NuxtLink>
+					</td>
+					<td>
+						<NuxtLink :to="`/namespace/${ns.namespace_id}`">
+							<Flex align="center">
+								<Text size="13" weight="600" color="primary">{{ formatBytes(ns.size) }}</Text>
+							</Flex>
+						</NuxtLink>
+					</td>
+					<td>
+						<NuxtLink :to="`/namespace/${ns.namespace_id}`">
+							<Flex align="center">
+								<Text size="13" weight="600" color="primary">{{ comma(ns.pfb_count) }}</Text>
+							</Flex>
+						</NuxtLink>
+					</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+</template>
+
+<style module>
+.wrapper_messages {
+	min-width: 100%;
+	width: 0;
+	height: 100%;
+
+	overflow-x: auto;
+}
+
+.table {
+	width: 100%;
+	height: fit-content;
+
+	border-spacing: 0px;
+
+	padding-bottom: 8px;
+
+	& tbody {
+		& tr {
+			cursor: pointer;
+
+			transition: all 0.05s ease;
+
+			&:hover {
+				background: var(--op-5);
+			}
+
+			&:active {
+				background: var(--op-8);
+			}
+		}
+	}
+
+	& tr th {
+		text-align: left;
+		padding: 0;
+		padding-right: 16px;
+		padding-top: 16px;
+		padding-bottom: 8px;
+
+		&:first-child {
+			padding-left: 16px;
+		}
+
+		& span {
+			display: flex;
+		}
+	}
+
+	& tr td {
+		padding: 0;
+
+		white-space: nowrap;
+
+		&:first-child {
+			padding-left: 16px;
+		}
+
+		& > a {
+			display: flex;
+
+			min-height: 40px;
+
+			padding-right: 24px;
+		}
+	}
+}
+</style>
diff --git a/pages/rollup/[id].vue b/pages/rollup/[id].vue
new file mode 100644
index 00000000..67e433d9
--- /dev/null
+++ b/pages/rollup/[id].vue
@@ -0,0 +1,121 @@
+<script setup>
+/** Components: Modules */
+import RollupOverview from "@/components/modules/rollup/RollupOverview.vue"
+// import RollupCharts from "@/components/modules/rollup/RollupCharts.vue"
+
+/** API */
+import { fetchRollupByID } from "@/services/api/rollup"
+
+/** Store */
+import { useCacheStore } from "@/store/cache"
+const cacheStore = useCacheStore()
+
+const route = useRoute()
+const router = useRouter()
+
+const rollup = ref()
+// const { data: rawRollup } = await fetchRollupByID(route.params.id)
+
+rollup.value = {
+	"id": 1,
+	"name": "Astria",
+	"description": "The easiest way to deploy decentralized rollups.",
+	"website": "https://www.astria.org/",
+	"twitter": "https://twitter.com/celenium_io",
+	"logo": "https://uploads-ssl.webflow.com/5c3a510a91db03828e568da1/5c3a6a8d081733b82d6394a2_Logo%205%20Copy%205.svg",
+	"blobs_count": 11020,
+	"size": 891019774,
+	"last_message_time": "2024-01-25T00:00:00Z"
+}
+cacheStore.current.rollup = rollup.value
+// if (!rawRollup.value) {
+// 	router.push("/")
+// } else {
+// 	rollup.value = rawRollup.value[0]
+// 	cacheStore.current.rollup = rollup.value
+// }
+
+defineOgImage({
+	title: "Rollup",
+	rollup: rollup.value,
+	component: "RollupImage",
+	cacheKey: `${rollup.value?.name}`,
+})
+
+useHead({
+	title: `Rollup ${rollup.value?.name} - Celestia Explorer`,
+	link: [
+		{
+			rel: "canonical",
+			href: `https://celenium.io${route.path}`,
+		},
+	],
+	meta: [
+		{
+			name: "description",
+			content: `Rollup ${rollup.value?.name} blobs, namespaces, metadata, social links, contacts and other data.`,
+		},
+		{
+			property: "og:title",
+			content: `Rollup ${rollup.value?.name} - Celestia Explorer`,
+		},
+		{
+			property: "og:description",
+			content: `Rollup ${rollup.value?.name} blobs, namespaces, metadata, social links, contacts and other data.`,
+		},
+		{
+			property: "og:url",
+			content: `https://celenium.io${route.path}`,
+		},
+		{
+			property: "og:image",
+			content: `https://celenium.io${route.path}__og_image__/og.png`,
+		},
+		{
+			name: "twitter:title",
+			content: `Rollup ${rollup.value?.name} - Celestia Explorer`,
+		},
+		{
+			name: "twitter:description",
+			content: `Rollup ${rollup.value?.name} blobs, namespaces, metadata, social links, contacts and other data.`,
+		},
+		{
+			name: "twitter:card",
+			content: "summary_large_image",
+		},
+	],
+})
+</script>
+
+<template>
+	<Flex direction="column" gap="32" wide :class="$style.wrapper">
+		<Flex direction="column" gap="16">
+			<Breadcrumbs
+				v-if="rollup"
+				:items="[
+					{ link: '/', name: 'Explore' },
+					{ link: '/rollups', name: 'Rollups' },
+					{ link: route.fullPath, name: rollup.name },
+				]"
+			/>
+
+			<RollupOverview v-if="rollup" :rollup="rollup" />
+		</Flex>
+
+		<!-- <RollupCharts v-if="rollup" :id="rollup.id" /> -->
+	</Flex>
+</template>
+
+<style module>
+.wrapper {
+	max-width: calc(var(--base-width) + 48px);
+
+	padding: 40px 24px 60px 24px;
+}
+
+@media (max-width: 500px) {
+	.wrapper {
+		padding: 32px 12px;
+	}
+}
+</style>
diff --git a/pages/rollups.vue b/pages/rollups.vue
new file mode 100644
index 00000000..5f9d7aa1
--- /dev/null
+++ b/pages/rollups.vue
@@ -0,0 +1,422 @@
+<script setup>
+/** Vendor */
+import { DateTime } from "luxon"
+
+/** UI */
+import Button from "@/components/ui/Button.vue"
+import Tooltip from "@/components/ui/Tooltip.vue"
+
+/** Services */
+import { space, formatBytes, comma } from "@/services/utils"
+
+/** API */
+import { fetchRollups, fetchRollupsCount } from "@/services/api/rollup"
+
+useHead({
+	title: "Rollups - Celestia Explorer",
+	link: [
+		{
+			rel: "canonical",
+			href: "https://celenium.io/rollups",
+		},
+	],
+	meta: [
+		{
+			name: "description",
+			content: "Rollups in the Celestia Blockchain. Rollup name, description, size, blobs, social links, contacts are shown.",
+		},
+		{
+			property: "og:title",
+			content: "Rollups - Celestia Explorer",
+		},
+		{
+			property: "og:description",
+			content: "Rollups in the Celestia Blockchain. Rollup name, description, size, blobs, social links, contacts are shown.",
+		},
+		{
+			property: "og:url",
+			content: `https://celenium.io/rollups`,
+		},
+		{
+			property: "og:image",
+			content: "/img/seo/rollups.png",
+		},
+		{
+			name: "twitter:title",
+			content: "Rollups - Celestia Explorer",
+		},
+		{
+			name: "twitter:description",
+			content: "Rollups in the Celestia Blockchain. Rollup name, description, size, blobs, social links, contacts are shown.",
+		},
+		{
+			name: "twitter:card",
+			content: "summary_large_image",
+		},
+		{
+			name: "twitter:image",
+			content: "https://celenium.io/img/seo/rollups.png",
+		},
+	],
+})
+
+const route = useRoute()
+const router = useRouter()
+
+const isRefetching = ref(false)
+const rollups = ref([])
+const count = ref(0)
+
+const sort = reactive({
+	by: "time",
+	dir: "desc",
+})
+
+const getRollupsCount = async () => {
+	const { data: rollupsCount } = await fetchRollupsCount()
+	count.value = rollupsCount.value
+}
+
+await getRollupsCount()
+
+const page = ref(route.query.page ? parseInt(route.query.page) : 1)
+const pages = computed(() => Math.ceil(30 / 20))
+// const pages = computed(() => Math.ceil(count.value / 20))
+
+const getRollups = async () => {
+	isRefetching.value = true
+
+	const { data } = await fetchRollups({
+		limit: 20,
+		offset: (page.value - 1) * 20,
+		sort: sort.dir,
+		sort_by: sort.by,
+	})
+	rollups.value = data.value
+
+	isRefetching.value = false
+}
+
+getRollups()
+
+/** Refetch namespaces */
+watch(
+	() => page.value,
+	async () => {
+		getRollups()
+
+		router.replace({ query: { page: page.value } })
+	},
+)
+
+const handleSort = (by) => {
+	switch (sort.dir) {
+		case "desc":
+			if (sort.by == by) sort.dir = "asc"
+			break
+
+		case "asc":
+			sort.dir = "desc"
+
+			break
+	}
+
+	sort.by = by
+
+	getRollups()
+}
+
+const handlePrev = () => {
+	if (page.value === 1) return
+
+	page.value -= 1
+}
+
+const handleNext = () => {
+	if (page.value === pages.value) return
+
+	page.value += 1
+}
+
+const handleLast = async () => {
+	await getNamespacesCount()
+
+	page.value = pages.value
+}
+</script>
+
+<template>
+	<Flex direction="column" wide :class="$style.wrapper">
+		<Flex align="end" justify="between" :class="$style.breadcrumbs">
+			<Breadcrumbs
+				:items="[
+					{ link: '/', name: 'Explore' },
+					{ link: '/rollups', name: `Rollups` },
+				]"
+			/>
+		</Flex>
+
+		<Flex wide direction="column" gap="4">
+			<Flex justify="between" :class="$style.header">
+				<Flex align="center" gap="8">
+					<Icon name="folder" size="16" color="secondary" />
+					<Text size="14" weight="600" color="primary">Rollups</Text>
+				</Flex>
+
+				<Flex align="center" gap="6">
+					<Button @click="page = 1" type="secondary" size="mini" :disabled="page === 1">
+						<Icon name="arrow-left-stop" size="12" color="primary" />
+					</Button>
+					<Button type="secondary" @click="handlePrev" size="mini" :disabled="page === 1">
+						<Icon name="arrow-left" size="12" color="primary" />
+					</Button>
+
+					<Button type="secondary" size="mini" disabled>
+						<Text size="12" weight="600" color="primary"> {{ page }} of {{ pages }} </Text>
+					</Button>
+
+					<Button @click="handleNext" type="secondary" size="mini" :disabled="page === pages">
+						<Icon name="arrow-right" size="12" color="primary" />
+					</Button>
+					<Button @click="handleLast" type="secondary" size="mini" :disabled="page === pages">
+						<Icon name="arrow-right-stop" size="12" color="primary" />
+					</Button>
+				</Flex>
+			</Flex>
+
+			<Flex direction="column" gap="16" wide :class="[$style.table, isRefetching && $style.disabled]">
+				<div :class="$style.table_scroller">
+					<table>
+						<thead>
+							<tr>
+								<th><Text size="12" weight="600" color="tertiary" noWrap>Rollup</Text></th>
+								<th @click="handleSort('time')" :class="$style.sortable">
+									<Flex align="center" gap="6">
+										<Text size="12" weight="600" color="tertiary" noWrap>Last Active</Text>
+										<Icon
+											v-if="sort.by === 'time'"
+											name="chevron"
+											size="12"
+											color="secondary"
+											:style="{ transform: `rotate(${sort.dir === 'asc' ? '180' : '0'}deg)` }"
+										/>
+									</Flex>
+								</th>
+								<th @click="handleSort('size')" :class="$style.sortable">
+									<Flex align="center" gap="6">
+										<Text size="12" weight="600" color="tertiary" noWrap>Size</Text>
+										<Icon
+											v-if="sort.by === 'size'"
+											name="chevron"
+											size="12"
+											color="secondary"
+											:style="{ transform: `rotate(${sort.dir === 'asc' ? '180' : '0'}deg)` }"
+										/>
+									</Flex>
+								</th>
+								<th @click="handleSort('blobs_count')" :class="$style.sortable">
+									<Flex align="center" gap="6">
+										<Text size="12" weight="600" color="tertiary" noWrap>Blobs</Text>
+										<Icon
+											v-if="sort.by === 'blobs_count'"
+											name="chevron"
+											size="12"
+											color="secondary"
+											:style="{ transform: `rotate(${sort.dir === 'asc' ? '180' : '0'}deg)` }"
+										/>
+									</Flex>
+								</th>
+							</tr>
+						</thead>
+
+						<tbody>
+							<tr v-for="r in rollups">
+								<td style="width: 1px">
+									<NuxtLink :to="`/rollup/${r.id}`">
+										<Flex align="center">
+											<Tooltip position="start">
+												<Flex align="center" gap="8">
+													<Text size="12" weight="600" color="primary" mono>
+														{{ r.name }}
+													</Text>
+
+													<CopyButton :text="r.name" />
+												</Flex>
+
+												<template #content>
+													{{ r.name }}
+												</template>
+											</Tooltip>
+										</Flex>
+									</NuxtLink>
+								</td>
+								<td>
+									<NuxtLink :to="`/rollup/${r.id}`">
+										<Flex direction="column" justify="center" gap="4">
+											<Text size="12" weight="600" color="primary">
+												{{ DateTime.fromISO(r.last_message_time).toRelative({ locale: "en", style: "short" }) }}
+											</Text>
+											<Text size="12" weight="500" color="tertiary">
+												{{ DateTime.fromISO(r.last_message_time).setLocale("en").toFormat("LLL d, t") }}
+											</Text>
+										</Flex>
+									</NuxtLink>
+								</td>
+								<td>
+									<NuxtLink :to="`/rollup/${r.id}`">
+										<Flex align="center">
+											<Text size="13" weight="600" color="primary">{{ formatBytes(r.size) }}</Text>
+										</Flex>
+									</NuxtLink>
+								</td>
+								<td>
+									<NuxtLink :to="`/rollup/${r.id}`">
+										<Flex align="center">
+											<Text size="13" weight="600" color="primary">{{ comma(r.blobs_count) }}</Text>
+										</Flex>
+									</NuxtLink>
+								</td>
+							</tr>
+						</tbody>
+					</table>
+				</div>
+			</Flex>
+		</Flex>
+	</Flex>
+</template>
+
+<style module>
+.wrapper {
+	max-width: calc(var(--base-width) + 48px);
+
+	padding: 26px 24px 60px 24px;
+}
+
+.breadcrumbs {
+	margin-bottom: 16px;
+}
+
+.header {
+	height: 46px;
+
+	border-radius: 8px 8px 4px 4px;
+	background: var(--card-background);
+
+	padding: 0 16px;
+}
+
+.table_scroller {
+	overflow-x: auto;
+}
+
+.table {
+	border-radius: 4px 4px 8px 8px;
+	background: var(--card-background);
+
+	padding-bottom: 12px;
+
+	transition: all 0.2s ease;
+
+	& table {
+		width: 100%;
+		height: fit-content;
+
+		border-spacing: 0px;
+
+		& tbody {
+			& tr {
+				cursor: pointer;
+
+				transition: all 0.05s ease;
+
+				&:hover {
+					background: var(--op-5);
+				}
+
+				&:active {
+					background: var(--op-8);
+				}
+			}
+		}
+
+		& tr th {
+			text-align: left;
+
+			padding: 0;
+			padding-right: 16px;
+			padding-top: 16px;
+			padding-bottom: 8px;
+
+			& span {
+				display: flex;
+			}
+
+			&:first-child {
+				padding-left: 16px;
+			}
+
+			&.sortable {
+				cursor: pointer;
+			}
+
+			&.sortable:hover {
+				& span {
+					color: var(--txt-secondary);
+				}
+			}
+		}
+
+		& tr td {
+			padding: 0;
+
+			white-space: nowrap;
+
+			&:first-child {
+				padding-left: 16px;
+			}
+
+			& > a {
+				display: flex;
+
+				min-height: 44px;
+
+				padding-right: 24px;
+			}
+		}
+	}
+}
+
+.table.disabled {
+	opacity: 0.5;
+	pointer-events: none;
+}
+
+.message_type {
+	max-width: 100px;
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
+
+.badge {
+	border-radius: 5px;
+	background: var(--op-5);
+	box-shadow: inset 0 0 0 1px var(--op-10);
+
+	padding: 4px 6px;
+}
+
+@media (max-width: 500px) {
+	.wrapper {
+		padding: 32px 12px;
+	}
+
+	.header {
+		flex-direction: column;
+		gap: 16px;
+
+		height: initial;
+
+		padding: 16px;
+	}
+}
+</style>
diff --git a/services/api/rollup.js b/services/api/rollup.js
new file mode 100644
index 00000000..ea0fab8b
--- /dev/null
+++ b/services/api/rollup.js
@@ -0,0 +1,70 @@
+/** Services */
+import { useServerURL } from "@/services/config"
+
+export const fetchRollups = async ({ limit, offset, sort, sort_by }) => {
+	try {
+		const url = new URL(`${useServerURL()}/rollup`)
+
+		if (limit) url.searchParams.append("limit", limit)
+		if (offset) url.searchParams.append("offset", offset)
+		if (sort) url.searchParams.append("sort", sort)
+		if (sort_by) url.searchParams.append("sort_by", sort_by)
+
+		const data = await useFetch(url.href)
+		return data
+	} catch (error) {
+		console.error(error)
+	}
+}
+
+export const fetchRollupsCount = async () => {
+	try {
+		const url = new URL(`${useServerURL()}/rollup/count`)
+
+		const data = await useFetch(url.href)
+		return data
+	} catch (error) {
+		console.error(error)
+	}
+}
+
+export const fetchRollupByID = async (id) => {
+	try {
+		const url = new URL(`${useServerURL()}/rollup/${id}`)
+
+		const data = await useFetch(encodeURI(url.href))
+		return data
+	} catch (error) {
+		console.error(error)
+	}
+}
+
+export const fetchRollupBlobs = async ({ id, limit, offset, sort, sort_by }) => {
+	try {
+		const url = new URL(`${useServerURL()}/rollup/${id}/blobs`)
+
+		if (limit) url.searchParams.append("limit", limit)
+		if (offset) url.searchParams.append("offset", offset)
+		if (sort) url.searchParams.append("sort", sort)
+		if (sort_by) url.searchParams.append("sort_by", sort_by)
+
+		const data = await useFetch(encodeURI(url.href))
+		return data
+	} catch (error) {
+		console.error(error)
+	}
+}
+
+export const fetchRollupNamespaces = async ({ id, limit, offset }) => {
+	try {
+		const url = new URL(`${useServerURL()}/rollup/${id}/namespaces`)
+
+		if (limit) url.searchParams.append("limit", limit)
+		if (offset) url.searchParams.append("offset", offset)
+
+		const data = await useFetch(encodeURI(url.href))
+		return data
+	} catch (error) {
+		console.error(error)
+	}
+}
diff --git a/services/api/stats.js b/services/api/stats.js
index dfe9fd7f..18cd6681 100644
--- a/services/api/stats.js
+++ b/services/api/stats.js
@@ -63,3 +63,17 @@ export const fetchNamespaceSeries = async ({ id, name, timeframe, from }) => {
 		console.error(error)
 	}
 }
+
+export const fetchRollupeSeries = async ({ id, name, timeframe, from, to }) => {
+	try {
+		const url = new URL(`${useServerURL()}/rollup/${id}/stats/${name}/${timeframe}`)
+
+		if (from) url.searchParams.append("from", from)
+		if (to) url.searchParams.append("to", to)
+
+		const data = await $fetch(url.href)
+		return data
+	} catch (error) {
+		console.error(error)
+	}
+}

From ad48b339532e0d025247ba64371ceb8fc7666eae Mon Sep 17 00:00:00 2001
From: GussevPM <GussevPM@GMail.Com>
Date: Thu, 25 Jan 2024 21:47:02 +0100
Subject: [PATCH 13/41] Add charts for rollups

---
 assets/icons.json                             |  3 +-
 components/modules/rollup/RollupCharts.vue    | 20 +++---
 components/modules/rollup/RollupOverview.vue  | 66 +++++++++++++------
 .../modules/rollup/tables/NamespacesTable.vue |  3 -
 pages/rollup/[id].vue                         | 28 +++-----
 pages/rollups.vue                             |  2 +-
 services/api/stats.js                         |  2 +-
 7 files changed, 69 insertions(+), 55 deletions(-)

diff --git a/assets/icons.json b/assets/icons.json
index aab7e703..87fde3de 100644
--- a/assets/icons.json
+++ b/assets/icons.json
@@ -106,5 +106,6 @@
 			"path": "M22.1139 13.4012C22.3754 13.3074 22.5062 13.2605 22.646 13.1409C22.7507 13.0512 22.8744 12.8779 22.9252 12.7498C22.993 12.5787 22.995 12.4355 22.9988 12.149C23.0374 9.28438 21.9638 6.40761 19.778 4.22185C17.5923 2.03611 14.7154 0.962459 11.8509 1.00101C11.5644 1.00491 11.4211 1.00679 11.25 1.07461C11.1219 1.12539 10.9486 1.24917 10.859 1.35383C10.7393 1.4936 10.6925 1.62442 10.5987 1.88593C9.46043 5.06163 10.1632 8.74917 12.7069 11.2929C15.2506 13.8366 18.9382 14.5394 22.1139 13.4012Z",
 			"opacity": 0.5
 		}
-	]
+	],
+	"package": "m10.558 22.234c-0.16 0.0187-0.3549-0.0895-0.74462-0.3059-1.6664-0.9253-4.695-2.6071-6.4762-3.5967l-0.06317-0.0348c-0.23113-0.1274-0.52173-0.2874-0.74489-0.5296-0.19295-0.2094-0.33897-0.4575-0.4283-0.7279-0.10332-0.3127-0.10211-0.6445-0.10115-0.9083l1.8e-4 -0.0722c0-1.963 0.00254-5.3023 0.0041-7.1685 3.8e-4 -0.44834 5.6e-4 -0.67251 0.09511-0.8034 0.08247-0.11418 0.20931-0.18829 0.34928-0.20408 0.16045-0.01809 0.35621 0.09203 0.74775 0.31227l7.396 4.1603c0.1485 0.0835 0.2227 0.1253 0.2767 0.1844 0.0478 0.0522 0.084 0.114 0.1061 0.1813 0.025 0.0761 0.025 0.1612 0.025 0.3316v8.1752c0 0.4472 0 0.6708-0.094 0.8016-0.0821 0.1141-0.2083 0.1884-0.3479 0.2047zm11.437-13.344c-4e-4 -0.44833-6e-4 -0.67249-0.0951-0.80338-0.0825-0.11419-0.2093-0.1883-0.3493-0.20408-0.1604-0.0181-0.3562 0.09202-0.7477 0.31226l-7.396 4.1603c-0.1485 0.0835-0.2227 0.1253-0.2767 0.1843-0.0478 0.0523-0.084 0.1141-0.1061 0.1814-0.025 0.076-0.025 0.1612-0.025 0.3315v8.1753c0 0.4472 0 0.6708 0.094 0.8016 0.0821 0.1141 0.2083 0.1884 0.3479 0.2047 0.16 0.0187 0.3549-0.0895 0.7446-0.3059 1.6663-0.9253 4.695-2.6071 6.4762-3.5967l0.0631-0.0348c0.2311-0.1273 0.5218-0.2874 0.7449-0.5296 0.193-0.2094 0.339-0.4575 0.4283-0.7279 0.1034-0.3127 0.1021-0.6445 0.1012-0.9083l-2e-4 -0.0722c0-1.963-0.0025-5.3023-0.0041-7.1685zm-6.6793 0.09647-8.9752-4.9862c-0.75973 0.42226-1.4682 0.81608-2.031 1.1289-0.40825 0.22692-0.61237 0.34039-0.68058 0.49034-0.05947 0.13073-0.05985 0.28072-0.00105 0.41175 0.06746 0.1503 0.27118 0.2649 0.67862 0.49408l7.3001 4.1064c0.143 0.0804 0.2146 0.1207 0.2904 0.1365 0.0671 0.0139 0.1364 0.0139 0.2035 0 0.0759-0.0158 0.1474-0.0561 0.2905-0.1365zm-2.9137-7.8015c-0.2658-0.05467-0.54-0.05467-0.8058 0-0.3073 0.06319-0.5819 0.21702-0.8003 0.33931l-0.0595 0.03325c-0.654 0.36336-1.4759 0.82007-2.3369 1.2986l8.9628 4.9794 2.3291-1.3101c0.4074-0.22919 0.6112-0.34378 0.6786-0.49408 0.0588-0.13103 0.0584-0.28102-1e-3 -0.41175-0.0682-0.14996-0.2724-0.26342-0.6806-0.49035-1.6814-0.9346-4.6637-2.5922-6.4266-3.5716l-0.0595-0.03325c-0.2184-0.12229-0.493-0.27612-0.8003-0.33931z"
 }
diff --git a/components/modules/rollup/RollupCharts.vue b/components/modules/rollup/RollupCharts.vue
index 7640c8ce..ff29ab7e 100644
--- a/components/modules/rollup/RollupCharts.vue
+++ b/components/modules/rollup/RollupCharts.vue
@@ -12,7 +12,7 @@ import { Dropdown, DropdownItem } from "@/components/ui/Dropdown"
 import { abbreviate, formatBytes } from "@/services/utils"
 
 /** API */
-import { fetchNamespaceSeries } from "@/services/api/stats"
+import { fetchRollupSeries } from "@/services/api/stats"
 
 const props = defineProps({
 	id: {
@@ -186,7 +186,7 @@ const buildChart = (chartEl, data, onEnter, onLeave) => {
 const getSizeSeries = async () => {
 	sizeSeries.value = []
 
-	const sizeSeriesRawData = await fetchNamespaceSeries({
+	const sizeSeriesRawData = await fetchRollupSeries({
 		id: props.id,
 		name: "size",
 		timeframe: selectedPeriod.value.timeframe,
@@ -219,9 +219,9 @@ const getSizeSeries = async () => {
 const getPfbSeries = async () => {
 	pfbSeries.value = []
 
-	const pfbSeriesRawData = await fetchNamespaceSeries({
+	const blobsSeriesRawData = await fetchRollupSeries({
 		id: props.id,
-		name: "pfb_count",
+		name: "blobs_count",
 		timeframe: selectedPeriod.value.timeframe,
 		from: parseInt(
 			DateTime.now().minus({
@@ -231,9 +231,9 @@ const getPfbSeries = async () => {
 		),
 	})
 
-	const pfbSeriesMap = {}
-	pfbSeriesRawData.forEach((item) => {
-		pfbSeriesMap[DateTime.fromISO(item.time).toFormat(selectedPeriod.value.timeframe === "day" ? "y-LL-dd" : "y-LL-dd-HH")] = item.value
+	const blobsSeriesMap = {}
+	blobsSeriesRawData.forEach((item) => {
+		blobsSeriesMap[DateTime.fromISO(item.time).toFormat(selectedPeriod.value.timeframe === "day" ? "y-LL-dd" : "y-LL-dd-HH")] = item.value
 	})
 
 	for (let i = 1; i < selectedPeriod.value.value + 1; i++) {
@@ -243,7 +243,7 @@ const getPfbSeries = async () => {
 		})
 		pfbSeries.value.push({
 			date: dt.toJSDate(),
-			value: parseInt(pfbSeriesMap[dt.toFormat(selectedPeriod.value.timeframe === "day" ? "y-LL-dd" : "y-LL-dd-HH")]) || 0,
+			value: parseInt(blobsSeriesMap[dt.toFormat(selectedPeriod.value.timeframe === "day" ? "y-LL-dd" : "y-LL-dd-HH")]) || 0,
 		})
 	}
 }
@@ -315,7 +315,7 @@ onBeforeUnmount(() => {
 
 		<Flex justify="between" gap="32" :class="$style.data">
 			<Flex direction="column" gap="20" wide>
-				<Text size="13" weight="600" color="primary">Blob Size Usage</Text>
+				<Text size="13" weight="600" color="primary">Storage Usage</Text>
 
 				<Flex ref="chartWrapperEl" direction="column" :class="$style.chart_wrapper">
 					<Flex direction="column" justify="between" :class="[$style.axis, $style.y]">
@@ -404,7 +404,7 @@ onBeforeUnmount(() => {
 			</Flex>
 
 			<Flex direction="column" gap="16" wide>
-				<Text size="13" weight="600" color="primary">Pay For Blobs Count</Text>
+				<Text size="13" weight="600" color="primary">Blobs Count</Text>
 
 				<Flex direction="column" :class="$style.chart_wrapper">
 					<Flex direction="column" justify="between" :class="[$style.axis, $style.y]">
diff --git a/components/modules/rollup/RollupOverview.vue b/components/modules/rollup/RollupOverview.vue
index bbdff409..997772f1 100644
--- a/components/modules/rollup/RollupOverview.vue
+++ b/components/modules/rollup/RollupOverview.vue
@@ -1,14 +1,18 @@
 <script setup>
+/** Vendor */
+import { DateTime } from "luxon"
+
 /** UI */
 import Button from "@/components/ui/Button.vue"
-import { Dropdown, DropdownItem } from "@/components/ui/Dropdown"
+// import { Dropdown, DropdownItem } from "@/components/ui/Dropdown"
+import Tooltip from "@/components/ui/Tooltip.vue"
 
 /** Tables */
 import BlobsTable from "./tables/BlobsTable.vue"
 import NamespacesTable from "./tables/NamespacesTable.vue"
 
 /** Services */
-import { comma, space, formatBytes, getNamespaceID } from "@/services/utils"
+import { comma, formatBytes } from "@/services/utils"
 
 /** API */
 import { fetchRollupBlobs, fetchRollupNamespaces } from "@/services/api/rollup"
@@ -121,15 +125,15 @@ watch(
 	},
 )
 
-const handleViewRawNamespaces = () => {
-	cacheStore.current._target = "namespaces"
-	modalsStore.open("rawData")
-}
+// const handleViewRawNamespaces = () => {
+// 	cacheStore.current._target = "namespaces"
+// 	modalsStore.open("rawData")
+// }
 
-const handleViewRawBlobs = () => {
-	cacheStore.current._target = "blobs"
-	modalsStore.open("rawData")
-}
+// const handleViewRawBlobs = () => {
+// 	cacheStore.current._target = "blobs"
+// 	modalsStore.open("rawData")
+// }
 
 </script>
 
@@ -137,7 +141,7 @@ const handleViewRawBlobs = () => {
 	<Flex direction="column" gap="4">
 		<Flex align="center" justify="between" :class="$style.header">
 			<Flex align="center" gap="8">
-				<Icon name="folder" size="14" color="primary" />
+				<Icon name="package" size="14" color="primary" />
 				<Text size="13" weight="600" color="primary">Rollup</Text>
 			</Flex>
 
@@ -177,12 +181,24 @@ const handleViewRawBlobs = () => {
 					</Flex>
 
 					<Flex align="center" justify="end" gap="12">
-						<a :href="rollup.website" target="_blank">
-							<Icon name="logo" size="14" color="secondary" :class="$style.btn" />
-						</a>
-						<a :href="rollup.twitter" target="_blank">
-							<Icon name="twitter" size="14" color="secondary" :class="$style.btn" />
-						</a>
+						<Tooltip position="start" delay="500">
+							<a :href="rollup.website" target="_blank">
+								<Icon name="globe" size="14" color="secondary" :class="$style.btn" />
+							</a>
+
+							<template #content>
+								{{ rollup.website }}
+							</template>
+						</Tooltip>
+						<Tooltip position="start" delay="500">
+							<a :href="rollup.twitter" target="_blank">
+								<Icon name="twitter" size="14" color="secondary" :class="$style.btn" />
+							</a>
+
+							<template #content>
+								{{ rollup.twitter }}
+							</template>
+						</Tooltip>
 					</Flex>
 
 					<Flex direction="column" gap="16">
@@ -197,6 +213,18 @@ const handleViewRawBlobs = () => {
 							<Text size="12" weight="600" color="tertiary">Blobs</Text>
 							<Text size="12" weight="600" color="secondary"> {{ comma(rollup.blobs_count) }} </Text>
 						</Flex>
+
+						<Flex align="start" justify="between">
+							<Text size="12" weight="600" color="tertiary">Last Active</Text>
+							<Flex direction="column" align="end" gap="8">
+								<Text size="12" weight="600" color="primary">
+									{{ DateTime.fromISO(rollup.last_message_time).toRelative({ locale: "en", style: "short" }) }}
+								</Text>
+								<Text size="12" weight="500" color="tertiary">
+									{{ DateTime.fromISO(rollup.last_message_time).setLocale("en").toFormat("LLL d, t") }}
+								</Text>
+							</Flex>
+						</Flex>
 					</Flex>
 				</Flex>
 			</Flex>
@@ -225,7 +253,7 @@ const handleViewRawBlobs = () => {
 						<Flex v-else align="center" justify="center" direction="column" gap="8" wide :class="$style.empty">
 							<Text size="13" weight="600" color="secondary" align="center"> No blobs </Text>
 							<Text size="12" weight="500" height="160" color="tertiary" align="center" style="max-width: 220px">
-								This Rollup did not push any blobs
+								This rollup did not push any blob
 							</Text>
 						</Flex>
 
@@ -242,7 +270,7 @@ const handleViewRawBlobs = () => {
 								<Text size="12" weight="600" color="primary">Page {{ page }}</Text>
 							</Button>
 
-							<Button @click="handleNext" type="secondary" size="mini" :disabled="blobs.length < 10 || rollup.blobs_count <= 10">
+							<Button @click="handleNext" type="secondary" size="mini" :disabled="blobs.length < 10">
 								<Icon name="arrow-right" size="12" color="primary" />
 							</Button>
 						</Flex>
diff --git a/components/modules/rollup/tables/NamespacesTable.vue b/components/modules/rollup/tables/NamespacesTable.vue
index b1136f9a..72bdee3b 100644
--- a/components/modules/rollup/tables/NamespacesTable.vue
+++ b/components/modules/rollup/tables/NamespacesTable.vue
@@ -5,9 +5,6 @@ import { DateTime } from "luxon"
 /** UI */
 import Tooltip from "@/components/ui/Tooltip.vue"
 
-/** Shared Components */
-import MessageTypeBadge from "@/components/shared/MessageTypeBadge.vue"
-
 /** Services */
 import { comma, formatBytes, space, getNamespaceID } from "@/services/utils"
 
diff --git a/pages/rollup/[id].vue b/pages/rollup/[id].vue
index 67e433d9..9802e086 100644
--- a/pages/rollup/[id].vue
+++ b/pages/rollup/[id].vue
@@ -1,7 +1,7 @@
 <script setup>
 /** Components: Modules */
 import RollupOverview from "@/components/modules/rollup/RollupOverview.vue"
-// import RollupCharts from "@/components/modules/rollup/RollupCharts.vue"
+import RollupCharts from "@/components/modules/rollup/RollupCharts.vue"
 
 /** API */
 import { fetchRollupByID } from "@/services/api/rollup"
@@ -14,26 +14,14 @@ const route = useRoute()
 const router = useRouter()
 
 const rollup = ref()
-// const { data: rawRollup } = await fetchRollupByID(route.params.id)
+const { data: rawRollup } = await fetchRollupByID(route.params.id)
 
-rollup.value = {
-	"id": 1,
-	"name": "Astria",
-	"description": "The easiest way to deploy decentralized rollups.",
-	"website": "https://www.astria.org/",
-	"twitter": "https://twitter.com/celenium_io",
-	"logo": "https://uploads-ssl.webflow.com/5c3a510a91db03828e568da1/5c3a6a8d081733b82d6394a2_Logo%205%20Copy%205.svg",
-	"blobs_count": 11020,
-	"size": 891019774,
-	"last_message_time": "2024-01-25T00:00:00Z"
+if (!rawRollup.value) {
+	router.push("/")
+} else {
+	rollup.value = rawRollup.value
+	cacheStore.current.rollup = rollup.value
 }
-cacheStore.current.rollup = rollup.value
-// if (!rawRollup.value) {
-// 	router.push("/")
-// } else {
-// 	rollup.value = rawRollup.value[0]
-// 	cacheStore.current.rollup = rollup.value
-// }
 
 defineOgImage({
 	title: "Rollup",
@@ -102,7 +90,7 @@ useHead({
 			<RollupOverview v-if="rollup" :rollup="rollup" />
 		</Flex>
 
-		<!-- <RollupCharts v-if="rollup" :id="rollup.id" /> -->
+		<RollupCharts v-if="rollup" :id="rollup.id" />
 	</Flex>
 </template>
 
diff --git a/pages/rollups.vue b/pages/rollups.vue
index 5f9d7aa1..f81d0258 100644
--- a/pages/rollups.vue
+++ b/pages/rollups.vue
@@ -159,7 +159,7 @@ const handleLast = async () => {
 		<Flex wide direction="column" gap="4">
 			<Flex justify="between" :class="$style.header">
 				<Flex align="center" gap="8">
-					<Icon name="folder" size="16" color="secondary" />
+					<Icon name="package" size="16" color="secondary" />
 					<Text size="14" weight="600" color="primary">Rollups</Text>
 				</Flex>
 
diff --git a/services/api/stats.js b/services/api/stats.js
index 18cd6681..09e94b5a 100644
--- a/services/api/stats.js
+++ b/services/api/stats.js
@@ -64,7 +64,7 @@ export const fetchNamespaceSeries = async ({ id, name, timeframe, from }) => {
 	}
 }
 
-export const fetchRollupeSeries = async ({ id, name, timeframe, from, to }) => {
+export const fetchRollupSeries = async ({ id, name, timeframe, from, to }) => {
 	try {
 		const url = new URL(`${useServerURL()}/rollup/${id}/stats/${name}/${timeframe}`)
 

From 7ec6cc0ce6671db6d0e8e7077ccf6fa95f5d1028 Mon Sep 17 00:00:00 2001
From: GussevPM <GussevPM@GMail.Com>
Date: Thu, 25 Jan 2024 22:07:49 +0100
Subject: [PATCH 14/41] Fix pagination

---
 components/modules/rollup/RollupOverview.vue |  8 ++++----
 pages/rollups.vue                            | 20 +++++++-------------
 2 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/components/modules/rollup/RollupOverview.vue b/components/modules/rollup/RollupOverview.vue
index 997772f1..471e37d6 100644
--- a/components/modules/rollup/RollupOverview.vue
+++ b/components/modules/rollup/RollupOverview.vue
@@ -259,10 +259,10 @@ watch(
 
 						<!-- Pagination -->
 						<Flex v-if="blobs.length" align="center" gap="6" :class="$style.pagination">
-							<Button @click="page = 1" type="secondary" size="mini" :disabled="page === 1 || rollup.blobs_count <= 10">
+							<Button @click="page = 1" type="secondary" size="mini" :disabled="page === 1">
 								<Icon name="arrow-left-stop" size="12" color="primary" />
 							</Button>
-							<Button @click="handlePrev" type="secondary" size="mini" :disabled="page === 1 || rollup.blobs_count <= 10">
+							<Button @click="handlePrev" type="secondary" size="mini" :disabled="page === 1">
 								<Icon name="arrow-left" size="12" color="primary" />
 							</Button>
 
@@ -288,10 +288,10 @@ watch(
 
 						<!-- Pagination -->
 						<Flex v-if="namespaces.length" align="center" gap="6" :class="$style.pagination">
-							<Button @click="page = 1" type="secondary" size="mini" :disabled="page === 1 || namespaces.length <= 10">
+							<Button @click="page = 1" type="secondary" size="mini" :disabled="page === 1">
 								<Icon name="arrow-left-stop" size="12" color="primary" />
 							</Button>
-							<Button @click="handlePrev" type="secondary" size="mini" :disabled="page === 1 || namespaces.length <= 10">
+							<Button @click="handlePrev" type="secondary" size="mini" :disabled="page === 1">
 								<Icon name="arrow-left" size="12" color="primary" />
 							</Button>
 
diff --git a/pages/rollups.vue b/pages/rollups.vue
index f81d0258..3b282bbd 100644
--- a/pages/rollups.vue
+++ b/pages/rollups.vue
@@ -75,6 +75,7 @@ const sort = reactive({
 const getRollupsCount = async () => {
 	const { data: rollupsCount } = await fetchRollupsCount()
 	count.value = rollupsCount.value
+	console.log(count.value);
 }
 
 await getRollupsCount()
@@ -99,7 +100,7 @@ const getRollups = async () => {
 
 getRollups()
 
-/** Refetch namespaces */
+/** Refetch rollups */
 watch(
 	() => page.value,
 	async () => {
@@ -138,11 +139,6 @@ const handleNext = () => {
 	page.value += 1
 }
 
-const handleLast = async () => {
-	await getNamespacesCount()
-
-	page.value = pages.value
-}
 </script>
 
 <template>
@@ -163,24 +159,22 @@ const handleLast = async () => {
 					<Text size="14" weight="600" color="primary">Rollups</Text>
 				</Flex>
 
-				<Flex align="center" gap="6">
+				<!-- Pagination -->
+				<Flex align="center" gap="6" :class="$style.pagination">
 					<Button @click="page = 1" type="secondary" size="mini" :disabled="page === 1">
 						<Icon name="arrow-left-stop" size="12" color="primary" />
 					</Button>
-					<Button type="secondary" @click="handlePrev" size="mini" :disabled="page === 1">
+					<Button @click="handlePrev" type="secondary" size="mini" :disabled="page === 1">
 						<Icon name="arrow-left" size="12" color="primary" />
 					</Button>
 
 					<Button type="secondary" size="mini" disabled>
-						<Text size="12" weight="600" color="primary"> {{ page }} of {{ pages }} </Text>
+						<Text size="12" weight="600" color="primary">Page {{ page }}</Text>
 					</Button>
 
-					<Button @click="handleNext" type="secondary" size="mini" :disabled="page === pages">
+					<Button @click="handleNext" type="secondary" size="mini" :disabled="rollups.length < 10">
 						<Icon name="arrow-right" size="12" color="primary" />
 					</Button>
-					<Button @click="handleLast" type="secondary" size="mini" :disabled="page === pages">
-						<Icon name="arrow-right-stop" size="12" color="primary" />
-					</Button>
 				</Flex>
 			</Flex>
 

From da9bb00cd9b3843d772266acdb0e2afa56466383 Mon Sep 17 00:00:00 2001
From: GussevPM <GussevPM@GMail.Com>
Date: Thu, 25 Jan 2024 22:14:12 +0100
Subject: [PATCH 15/41] Change time visual for rollup overview

---
 components/modules/rollup/RollupOverview.vue | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/components/modules/rollup/RollupOverview.vue b/components/modules/rollup/RollupOverview.vue
index 471e37d6..4ee25aab 100644
--- a/components/modules/rollup/RollupOverview.vue
+++ b/components/modules/rollup/RollupOverview.vue
@@ -215,15 +215,16 @@ watch(
 						</Flex>
 
 						<Flex align="start" justify="between">
-							<Text size="12" weight="600" color="tertiary">Last Active</Text>
-							<Flex direction="column" align="end" gap="8">
+							<Text size="12" weight="600" color="tertiary">Was Active</Text>
+							<Tooltip position="start" delay="500">
 								<Text size="12" weight="600" color="primary">
 									{{ DateTime.fromISO(rollup.last_message_time).toRelative({ locale: "en", style: "short" }) }}
 								</Text>
-								<Text size="12" weight="500" color="tertiary">
+
+								<template #content>
 									{{ DateTime.fromISO(rollup.last_message_time).setLocale("en").toFormat("LLL d, t") }}
-								</Text>
-							</Flex>
+								</template>
+							</Tooltip>
 						</Flex>
 					</Flex>
 				</Flex>

From 45a794f1bd06353e3135a09163f9dc55826cdd73 Mon Sep 17 00:00:00 2001
From: GussevPM <GussevPM@GMail.Com>
Date: Thu, 25 Jan 2024 23:23:40 +0100
Subject: [PATCH 16/41] Change endpoints and table

---
 components/modules/block/BlobsTable.vue | 36 ++++++++++++-------------
 services/api/block.js                   | 24 +++++++++++++++++
 services/api/tx.js                      | 26 ++++++++++++++++++
 3 files changed, 68 insertions(+), 18 deletions(-)

diff --git a/components/modules/block/BlobsTable.vue b/components/modules/block/BlobsTable.vue
index 7ee3b8f2..ba9c53e0 100644
--- a/components/modules/block/BlobsTable.vue
+++ b/components/modules/block/BlobsTable.vue
@@ -8,8 +8,8 @@ import Spinner from "@/components/ui/Spinner.vue"
 import { space, formatBytes, getNamespaceID } from "@/services/utils"
 
 /** API */
-import { fetchTxNamespaces, fetchTxNamespacesCount } from "@/services/api/tx"
-import { fetchBlockNamespaces, fetchBlockNamespacesCount } from "@/services/api/block"
+import { fetchTxBlobs, fetchTxBlobsCount } from "@/services/api/tx"
+import { fetchBlockBlobs, fetchBlockBlobsCount } from "@/services/api/block"
 
 /** Store */
 import { useCacheStore } from "@/store/cache"
@@ -61,7 +61,7 @@ const fetchNamespaces = async () => {
 	if (props.hash.length) params.hash = props.hash
 	if (props.height) params.height = props.height
 
-	return (props.hash.length && (await fetchTxNamespaces(params))) || (props.height && (await fetchBlockNamespaces(params))) || []
+	return (props.hash.length && (await fetchTxBlobs(params))) || (props.height && (await fetchBlockBlobs(params))) || []
 }
 
 const getNamespaces = async () => {
@@ -76,11 +76,11 @@ const getNamespaces = async () => {
 
 const getTotal = async () => {
 	if (props.hash.length) {
-		const data = await fetchTxNamespacesCount(props.hash)
+		const data = await fetchTxBlobsCount(props.hash)
 		total.value = data
 	}
 	if (props.height > 1) {
-		const data = await fetchBlockNamespacesCount(props.height)
+		const data = await fetchBlockBlobsCount(props.height)
 		total.value = data
 	}
 }
@@ -101,10 +101,10 @@ const handleViewBlob = (blob) => {
 		hash: blob.namespace.hash,
 		namespace_id: blob.namespace.namespace_id,
 		namespace_name: blob.namespace.name,
-		commitment: blob.data.ShareCommitments[0],
+		commitment: blob.commitment,
 		height: blob.height,
-		signer: blob.data.Signer,
-		size: blob.data.BlobSizes[0],
+		signer: blob.signer,
+		size: blob.size,
 		tx: blob.tx,
 	}
 
@@ -223,13 +223,13 @@ const handlePrev = () => {
 							<td>
 								<Tooltip position="start" delay="500">
 									<Flex align="center" gap="8">
-										<AddressBadge :hash="blob.data.Signer" />
+										<AddressBadge :hash="blob.signer" />
 
-										<CopyButton :text="blob.data.Signer" />
+										<CopyButton :text="blob.signer" />
 									</Flex>
 
 									<template #content>
-										{{ blob.data.Signer }}
+										{{ blob.signer }}
 									</template>
 								</Tooltip>
 							</td>
@@ -237,7 +237,7 @@ const handlePrev = () => {
 								<Tooltip position="start" delay="500">
 									<Flex align="center" gap="8">
 										<Text size="13" weight="600" color="primary">
-											{{ blob.data.ShareCommitments[0].slice(0, 4) }}
+											{{ blob.commitment.slice(0, 4) }}
 										</Text>
 
 										<Flex align="center" gap="3">
@@ -246,24 +246,24 @@ const handlePrev = () => {
 
 										<Text size="13" weight="600" color="primary">
 											{{
-												blob.data.ShareCommitments[0].slice(
-													blob.data.ShareCommitments[0].length - 4,
-													blob.data.ShareCommitments[0].length,
+												blob.commitment.slice(
+													blob.commitment.length - 4,
+													blob.commitment.length,
 												)
 											}}
 										</Text>
 
-										<CopyButton :text="blob.data.ShareCommitments[0]" />
+										<CopyButton :text="blob.commitment" />
 									</Flex>
 
 									<template #content>
-										{{ blob.data.ShareCommitments[0] }}
+										{{ blob.commitment }}
 									</template>
 								</Tooltip>
 							</td>
 							<td>
 								<Text size="13" weight="600" color="primary">
-									{{ formatBytes(blob.data.BlobSizes[0]) }}
+									{{ formatBytes(blob.size) }}
 								</Text>
 							</td>
 							<td>
diff --git a/services/api/block.js b/services/api/block.js
index e0a681bf..6fc6528b 100644
--- a/services/api/block.js
+++ b/services/api/block.js
@@ -89,3 +89,27 @@ export const fetchBlockNamespacesCount = async (height) => {
 		console.error(error)
 	}
 }
+
+export const fetchBlockBlobs = async ({ height, limit, offset, sort }) => {
+	try {
+		const url = new URL(`${useServerURL()}/block/${height}/blobs`)
+
+		if (limit) url.searchParams.append("limit", limit)
+		if (offset) url.searchParams.append("offset", offset)
+		if (sort) url.searchParams.append("sort", sort)
+
+		const data = await $fetch(url.href)
+		return data
+	} catch (error) {
+		console.error(error)
+	}
+}
+
+export const fetchBlockBlobsCount = async (height) => {
+	try {
+		const data = await $fetch(`${useServerURL()}/block/${height}/blobs/count`)
+		return data
+	} catch (error) {
+		console.error(error)
+	}
+}
diff --git a/services/api/tx.js b/services/api/tx.js
index 2ba026dd..a53dad45 100644
--- a/services/api/tx.js
+++ b/services/api/tx.js
@@ -89,6 +89,32 @@ export const fetchTxNamespacesCount = async (hash) => {
 	}
 }
 
+export const fetchTxBlobs = async ({ hash, limit, offset, sort }) => {
+	try {
+		const url = new URL(`${useServerURL()}/tx/${hash}/blobs`)
+
+		if (limit) url.searchParams.append("limit", limit)
+		if (offset) url.searchParams.append("offset", offset)
+		if (sort) url.searchParams.append("sort", sort)
+
+		const data = await $fetch(url.href)
+		return data
+	} catch (error) {
+		console.error(error)
+	}
+}
+
+export const fetchTxBlobsCount = async (hash) => {
+	try {
+		const url = new URL(`${useServerURL()}/tx/${hash}/blobs/count`)
+
+		const data = await $fetch(url.href)
+		return data
+	} catch (error) {
+		console.error(error)
+	}
+}
+
 /** Latest PayForBlobs */
 export const fetchLatestPFBs = async (height) => {
 	try {

From 2794aa98f5093ebe8f84bccd80675e3c84e7e811 Mon Sep 17 00:00:00 2001
From: xdeq <celldwellerq@gmail.com>
Date: Fri, 26 Jan 2024 21:45:32 +0300
Subject: [PATCH 17/41] feat(search): double focus + autocomplete

---
 assets/icons.json                             |   2 +-
 components/Flex.vue                           |   1 +
 components/cmd/CommandMenu.vue                | 322 ++++++++++++------
 components/cmd/Item.vue                       |  31 +-
 .../modules/address/AddressOverview.vue       |   6 +-
 components/widgets/TemporaryWidget.vue        |   2 +-
 pages/addresses.vue                           |   2 +-
 7 files changed, 250 insertions(+), 116 deletions(-)

diff --git a/assets/icons.json b/assets/icons.json
index aab7e703..cc1a3de0 100644
--- a/assets/icons.json
+++ b/assets/icons.json
@@ -14,7 +14,7 @@
 	"select": "M12 1C12.5523 1 13 1.44772 13 2V3.05493C17.1716 3.51608 20.4839 6.82838 20.9451 11H22C22.5523 11 23 11.4477 23 12C23 12.5523 22.5523 13 22 13H20.9451C20.4839 17.1716 17.1716 20.4839 13 20.9451V22C13 22.5523 12.5523 23 12 23C11.4477 23 11 22.5523 11 22V20.9451C6.82838 20.4839 3.51608 17.1716 3.05493 13H2C1.44772 13 1 12.5523 1 12C1 11.4477 1.44772 11 2 11H3.05493C3.51608 6.82838 6.82838 3.51608 11 3.05493V2C11 1.44772 11.4477 1 12 1ZM12 7C9.23858 7 7 9.23858 7 12C7 14.7614 9.23858 17 12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7ZM9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12Z",
 	"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",
-	"addresses": "M9.5 2C6.73857 2 4.5 4.23858 4.5 7C4.5 9.76142 6.73857 12 9.5 12C12.2615 12 14.5 9.76142 14.5 7C14.5 4.23858 12.2615 2 9.5 2ZM15.8753 2.36385C15.3633 2.15663 14.7803 2.40364 14.5731 2.91557C14.3659 3.42751 14.6129 4.0105 15.1248 4.21773C16.2261 4.66351 17 5.74259 17 7.00003C17 8.25747 16.2261 9.33655 15.1248 9.78233C14.6129 9.98956 14.3659 10.5725 14.5731 11.0845C14.7803 11.5964 15.3633 11.8434 15.8753 11.6362C17.7058 10.8952 19 9.09997 19 7.00003C19 4.90009 17.7058 3.10484 15.8753 2.36385ZM19.2493 14.1576C18.7144 14.0199 18.1693 14.3419 18.0316 14.8768C17.8939 15.4116 18.2159 15.9568 18.7508 16.0944C20.0449 16.4275 21 17.6035 21 19V21C21 21.5522 21.4478 22 22 22C22.5523 22 23 21.5522 23 21V19C23 16.6688 21.4056 14.7126 19.2493 14.1576ZM7.17898 14C8.72635 14.0005 10.2737 14.0005 11.8211 14C12.9117 13.9996 13.6559 13.9994 14.2941 14.1704C16.0196 14.6327 17.3673 15.9804 17.8297 17.7059C18.0143 18.395 18.008 19.1222 18.0019 19.8373C18.0004 20.0139 17.9988 20.1897 18.0002 20.3641C18.0011 20.471 18.0028 20.6872 17.9489 20.8882C17.8102 21.4059 17.4059 21.8102 16.8883 21.9489C16.6879 22.0027 16.4724 22.001 16.3651 22.0002L16.3641 22.0002C11.7891 21.9637 7.21096 21.9637 2.63595 22.0002L2.63491 22.0002C2.52765 22.001 2.31217 22.0027 2.11181 21.9489C1.59417 21.8102 1.18985 21.4059 1.05115 20.8882C0.997288 20.6872 0.999012 20.471 0.999864 20.3641C1.00125 20.1903 0.999761 20.0147 0.998266 19.8383C0.992206 19.1234 0.986025 18.3941 1.17041 17.7059C1.63274 15.9804 2.98048 14.6327 4.70594 14.1704C5.34416 13.9994 6.08836 13.9996 7.17898 14Z",
+	"address": "M9.5 2C6.73857 2 4.5 4.23858 4.5 7C4.5 9.76142 6.73857 12 9.5 12C12.2615 12 14.5 9.76142 14.5 7C14.5 4.23858 12.2615 2 9.5 2ZM15.8753 2.36385C15.3633 2.15663 14.7803 2.40364 14.5731 2.91557C14.3659 3.42751 14.6129 4.0105 15.1248 4.21773C16.2261 4.66351 17 5.74259 17 7.00003C17 8.25747 16.2261 9.33655 15.1248 9.78233C14.6129 9.98956 14.3659 10.5725 14.5731 11.0845C14.7803 11.5964 15.3633 11.8434 15.8753 11.6362C17.7058 10.8952 19 9.09997 19 7.00003C19 4.90009 17.7058 3.10484 15.8753 2.36385ZM19.2493 14.1576C18.7144 14.0199 18.1693 14.3419 18.0316 14.8768C17.8939 15.4116 18.2159 15.9568 18.7508 16.0944C20.0449 16.4275 21 17.6035 21 19V21C21 21.5522 21.4478 22 22 22C22.5523 22 23 21.5522 23 21V19C23 16.6688 21.4056 14.7126 19.2493 14.1576ZM7.17898 14C8.72635 14.0005 10.2737 14.0005 11.8211 14C12.9117 13.9996 13.6559 13.9994 14.2941 14.1704C16.0196 14.6327 17.3673 15.9804 17.8297 17.7059C18.0143 18.395 18.008 19.1222 18.0019 19.8373C18.0004 20.0139 17.9988 20.1897 18.0002 20.3641C18.0011 20.471 18.0028 20.6872 17.9489 20.8882C17.8102 21.4059 17.4059 21.8102 16.8883 21.9489C16.6879 22.0027 16.4724 22.001 16.3651 22.0002L16.3641 22.0002C11.7891 21.9637 7.21096 21.9637 2.63595 22.0002L2.63491 22.0002C2.52765 22.001 2.31217 22.0027 2.11181 21.9489C1.59417 21.8102 1.18985 21.4059 1.05115 20.8882C0.997288 20.6872 0.999012 20.471 0.999864 20.3641C1.00125 20.1903 0.999761 20.0147 0.998266 19.8383C0.992206 19.1234 0.986025 18.3941 1.17041 17.7059C1.63274 15.9804 2.98048 14.6327 4.70594 14.1704C5.34416 13.9994 6.08836 13.9996 7.17898 14Z",
 	"close": "M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z",
 	"chart": "M 12 23 C 5.925 23 1 18.075 1 12 C 1 5.925 5.925 1 12 1 C 18.075 1 23 5.925 23 12 C 23 18.075 18.075 23 12 23 Z M 10 11.414 L 12.744 14.158 C 12.828 14.242 12.928 14.343 13.024 14.424 C 13.174 14.556 13.348 14.656 13.537 14.72 C 13.838 14.818 14.162 14.818 14.463 14.72 C 14.652 14.656 14.826 14.555 14.976 14.424 C 15.072 14.343 15.172 14.242 15.257 14.157 L 18.707 10.707 C 18.967 10.456 19.071 10.084 18.98 9.734 C 18.888 9.385 18.615 9.112 18.266 9.02 C 17.916 8.929 17.544 9.033 17.293 9.293 L 14 12.586 L 11.256 9.842 C 11.172 9.758 11.072 9.657 10.976 9.576 C 10.864 9.481 10.696 9.356 10.464 9.281 C 10.162 9.183 9.838 9.183 9.536 9.281 C 9.304 9.356 9.135 9.482 9.024 9.576 C 8.928 9.657 8.828 9.758 8.743 9.843 L 5.293 13.293 C 4.914 13.685 4.919 14.309 5.305 14.695 C 5.691 15.081 6.315 15.086 6.707 14.707 Z",
 	"check": "M20.7071 5.29289C21.0976 5.68342 21.0976 6.31658 20.7071 6.70711L9.70711 17.7071C9.31658 18.0976 8.68342 18.0976 8.29289 17.7071L3.29289 12.7071C2.90237 12.3166 2.90237 11.6834 3.29289 11.2929C3.68342 10.9024 4.31658 10.9024 4.70711 11.2929L9 15.5858L19.2929 5.29289C19.6834 4.90237 20.3166 4.90237 20.7071 5.29289Z",
diff --git a/components/Flex.vue b/components/Flex.vue
index 83473c42..dd8b0ba1 100644
--- a/components/Flex.vue
+++ b/components/Flex.vue
@@ -1,4 +1,5 @@
 <script setup>
+/** Vendor */
 import { ref, computed } from "vue"
 
 const wrapper = ref(null)
diff --git a/components/cmd/CommandMenu.vue b/components/cmd/CommandMenu.vue
index 733a3067..2b45505c 100644
--- a/components/cmd/CommandMenu.vue
+++ b/components/cmd/CommandMenu.vue
@@ -1,6 +1,8 @@
 <script setup>
 /** Vendor */
+import { useDebounceFn } from "@vueuse/core"
 import * as focusTrap from "focus-trap"
+import { v4 as id } from "uuid"
 
 /** Composables */
 import { useOutside } from "@/composables/outside"
@@ -38,6 +40,9 @@ let trap = null
 const popupEl = ref(null)
 const inputEl = ref(null)
 
+const listEl = ref(null)
+const actionEl = ref(null)
+
 let removeOutside = null
 
 const searchTerm = ref("")
@@ -57,52 +62,6 @@ const resetMetadata = () => {
 
 const runText = ref("")
 
-const searchAction = {
-	type: "callback",
-	icon: "search",
-	title: "Search your query on the blockchain...",
-	runText: "Run Search",
-	callback: async () => {
-		if (!searchTerm.value.length) return
-
-		const { data } = await search(searchTerm.value.trim())
-		if (!data.value) {
-			notificationsStore.create({
-				notification: {
-					type: "info",
-					icon: "search",
-					title: "Nothing was found",
-					description: "Use the hash of a block, transaction, address or namespace for correct search",
-					autoDestroy: true,
-				},
-			})
-
-			return
-		}
-
-		switch (data.value.type) {
-			case "tx":
-				router.push(`/tx/${data.value.result.hash}`)
-				break
-
-			case "block":
-				router.push(`/block/${data.value.result.height}`)
-				break
-
-			case "namespace":
-				router.push(`/namespace/${data.value.result.namespace_id}`)
-				break
-
-			case "address":
-				router.push(`/address/${data.value.result.hash}`)
-				break
-
-			default:
-				break
-		}
-	},
-}
-
 const suggestedActions = ref([])
 const makeSuggestions = () => {
 	suggestedActions.value = []
@@ -200,7 +159,7 @@ const makeSuggestions = () => {
 	if (route.name === "address-hash") {
 		suggestedActions.value.push({
 			type: "callback",
-			icon: "addresses",
+			icon: "address",
 			title: "View Raw Address",
 			runText: "View",
 			callback: () => {
@@ -221,13 +180,15 @@ const makeSuggestions = () => {
 	}
 }
 const suggestionGroup = computed(() => {
+	const actions = suggestedActions.value.map((a) => ({ id: id(), ...a }))
+
 	return {
 		title: "Suggestion",
-		actions: suggestedActions.value.filter(({ title }) => title.toLowerCase().includes(searchTerm.value.toLowerCase())),
+		actions: actions.filter(({ title }) => title.toLowerCase().includes(searchTerm.value.toLowerCase())),
 	}
 })
 
-const navigationActions = [
+const rawNavigationActions = [
 	{
 		type: "callback",
 		icon: "arrow-narrow-right",
@@ -275,13 +236,15 @@ const navigationActions = [
 	},
 ]
 const navigationGroup = computed(() => {
+	const actions = rawNavigationActions.map((a) => ({ id: id(), ...a }))
+
 	return {
 		title: "Navigation",
-		actions: navigationActions.filter(({ title }) => title.toLowerCase().includes(searchTerm.value.toLowerCase())),
+		actions: actions.filter(({ title }) => title.toLowerCase().includes(searchTerm.value.toLowerCase())),
 	}
 })
 
-const quickCommandsActions = [
+const rawQuickCommandsActions = [
 	{
 		type: "command:input",
 		icon: "tx",
@@ -322,7 +285,7 @@ const quickCommandsActions = [
 	},
 	{
 		type: "command:input",
-		icon: "addresses",
+		icon: "address",
 		title: "Open Address..",
 		subtitle: "Command",
 		placeholder: "Type address hash...",
@@ -343,13 +306,15 @@ const quickCommandsActions = [
 	},
 ]
 const quickCommandsGroup = computed(() => {
+	const actions = rawQuickCommandsActions.map((a) => ({ id: id(), ...a }))
+
 	return {
 		title: "Quick Actions",
-		actions: quickCommandsActions.filter(({ title }) => title.toLowerCase().includes(searchTerm.value.toLowerCase())),
+		actions: actions.filter(({ title }) => title.toLowerCase().includes(searchTerm.value.toLowerCase())),
 	}
 })
 
-const settingsActions = [
+const rawSettingsActions = [
 	{
 		type: "command:nested",
 		icon: "moon",
@@ -361,6 +326,7 @@ const settingsActions = [
 
 		actions: [
 			{
+				id: id(),
 				type: "callback",
 				icon: "moon",
 				title: "Dark Theme",
@@ -372,6 +338,7 @@ const settingsActions = [
 				},
 			},
 			{
+				id: id(),
 				type: "callback",
 				icon: "sun",
 				title: "Light Theme",
@@ -383,6 +350,7 @@ const settingsActions = [
 				},
 			},
 			{
+				id: id(),
 				type: "callback",
 				icon: "moon",
 				title: "Dimmed Theme",
@@ -394,6 +362,7 @@ const settingsActions = [
 				},
 			},
 			{
+				id: id(),
 				type: "callback",
 				icon: "settings",
 				title: "System Preferences",
@@ -417,6 +386,7 @@ const settingsActions = [
 
 		actions: [
 			{
+				id: id(),
 				type: "callback",
 				icon: "globe",
 				title: "Mainnet",
@@ -427,6 +397,7 @@ const settingsActions = [
 				},
 			},
 			{
+				id: id(),
 				type: "callback",
 				icon: "globe",
 				title: "Arabica",
@@ -437,6 +408,7 @@ const settingsActions = [
 				},
 			},
 			{
+				id: id(),
 				type: "callback",
 				icon: "globe",
 				title: "Mocha-4",
@@ -450,13 +422,15 @@ const settingsActions = [
 	},
 ]
 const settingsGroup = computed(() => {
+	const actions = rawSettingsActions.map((a) => ({ id: id(), ...a }))
+
 	return {
 		title: "Settings",
-		actions: settingsActions.filter(({ title }) => title.toLowerCase().includes(searchTerm.value.toLowerCase())),
+		actions: actions.filter(({ title }) => title.toLowerCase().includes(searchTerm.value.toLowerCase())),
 	}
 })
 
-const developerActions = [
+const rawDeveloperActions = [
 	{
 		type: "callback",
 		icon: "zap",
@@ -612,15 +586,15 @@ const developerActions = [
 	},
 ]
 const developerGroup = computed(() => {
+	const actions = rawDeveloperActions.map((a) => ({ id: id(), ...a }))
+
 	return {
 		title: "Developer",
-		actions: developerMode.value
-			? developerActions.filter(({ title }) => title.toLowerCase().includes(searchTerm.value.toLowerCase()))
-			: [],
+		actions: developerMode.value ? actions.filter(({ title }) => title.toLowerCase().includes(searchTerm.value.toLowerCase())) : [],
 	}
 })
 
-const otherActions = [
+const rawOtherActions = [
 	{
 		type: "callback",
 		icon: "terminal",
@@ -684,13 +658,124 @@ const otherActions = [
 	},
 ]
 const otherGroup = computed(() => {
+	const actions = rawOtherActions.map((a) => ({ id: id(), ...a }))
+
 	return {
 		title: "Other",
-		actions: otherActions.filter(({ title }) => title.toLowerCase().includes(searchTerm.value.toLowerCase())),
+		actions: actions.filter(({ title }) => title.toLowerCase().includes(searchTerm.value.toLowerCase())),
+	}
+})
+
+const searchAction = {
+	id: id(),
+	type: "callback",
+	icon: "search",
+	title: "Search your query on the blockchain...",
+	runText: "Run Search",
+	callback: async () => {
+		if (!searchTerm.value.length) return
+
+		const { data } = await search(searchTerm.value.trim())
+		if (!data.value) {
+			notificationsStore.create({
+				notification: {
+					type: "info",
+					icon: "search",
+					title: "Nothing was found",
+					description: "Use the hash of a block, transaction, address or namespace for correct search",
+					autoDestroy: true,
+				},
+			})
+
+			return
+		}
+
+		switch (data.value.type) {
+			case "tx":
+				router.push(`/tx/${data.value.result.hash}`)
+				break
+
+			case "block":
+				router.push(`/block/${data.value.result.height}`)
+				break
+
+			case "namespace":
+				router.push(`/namespace/${data.value.result.namespace_id}`)
+				break
+
+			case "address":
+				router.push(`/address/${data.value.result.hash}`)
+				break
+
+			default:
+				break
+		}
+	},
+}
+const searchGroup = computed(() => {
+	return {
+		title: `Query "${searchTerm.value}"`,
+		actions: searchTerm.value ? [searchAction] : [],
 	}
 })
 
-const groups = reactive([suggestionGroup, quickCommandsGroup, settingsGroup, navigationGroup, developerGroup, otherGroup])
+const autocompleteActions = ref([])
+const autocompleteGroup = computed(() => {
+	return {
+		title: "Search Result",
+		actions: autocompleteActions.value,
+	}
+})
+
+const debouncedSearch = useDebounceFn(async (e) => {
+	const { data } = await search(searchTerm.value.trim())
+	if (!data.value) return
+
+	autocompleteActions.value = []
+	autocompleteActions.value.push({
+		id: id(),
+		type: "callback",
+		icon: data.value.type,
+		title: data.value.result.hash,
+		subtitle: data.value.type[0].toUpperCase() + data.value.type.slice(1, data.value.type.length),
+		runText: "Open",
+		callback: () => {
+			switch (data.value.type) {
+				case "tx":
+					router.push(`/tx/${data.value.result.hash}`)
+					break
+
+				case "block":
+					router.push(`/block/${data.value.result.height}`)
+					break
+
+				case "namespace":
+					router.push(`/namespace/${data.value.result.namespace_id}`)
+					break
+
+				case "address":
+					router.push(`/address/${data.value.result.hash}`)
+					break
+
+				default:
+					break
+			}
+		},
+	})
+}, 250)
+
+const groups = reactive([
+	suggestionGroup,
+	quickCommandsGroup,
+	settingsGroup,
+	navigationGroup,
+	developerGroup,
+	otherGroup,
+	searchGroup,
+	autocompleteGroup,
+])
+
+const fakeFocus = ref()
 
 onMounted(() => {
 	developerMode.value = localStorage.developer
@@ -737,6 +822,8 @@ watch(
 			nextTick(() => {
 				document.addEventListener("keydown", onKeydown)
 
+				fakeFocus.value = actionEl.value[0].wrapper.wrapper.id
+
 				handleFocus()
 
 				trap = focusTrap.createFocusTrap(popupEl.value.wrapper, {
@@ -756,6 +843,7 @@ watch(
 			if (removeOutside) removeOutside()
 
 			searchTerm.value = ""
+			autocompleteActions.value = []
 		}
 	},
 )
@@ -765,19 +853,40 @@ const onActionFocus = (action) => {
 }
 
 const handleReturn = (action) => {
-	if (!commandMode.value && action) {
-		switch (action.type) {
+	let target = action.id ? action : null
+	let actions = []
+
+	if (!target) {
+		groups.forEach((g) => {
+			g.value.actions.forEach((a) => {
+				actions.push(a)
+
+				if (a.actions) {
+					actions.push(...a.actions)
+				}
+			})
+		})
+
+		actions.forEach((a) => {
+			if (a.id === fakeFocus.value) {
+				target = a
+			}
+		})
+	}
+
+	if (!commandMode.value && target) {
+		switch (target.type) {
 			case "callback":
-				action.callback()
+				target.callback()
 				appStore.showCmd = false
 				break
 
 			case "command:input":
 				commandMode.value = true
 
-				commandMetadata.action = action
+				commandMetadata.action = target
 
-				runText.value = action.runText
+				runText.value = target.runText
 
 				inputEl.value.focus()
 				searchTerm.value = ""
@@ -789,13 +898,17 @@ const handleReturn = (action) => {
 			case "command:nested":
 				commandMode.value = true
 
-				commandMetadata.action = action
+				commandMetadata.action = target
 
-				runText.value = action.runText
+				runText.value = target.runText
 
 				inputEl.value.focus()
 				searchTerm.value = ""
 
+				nextTick(() => {
+					fakeFocus.value = actionEl.value[0].wrapper.wrapper.id
+				})
+
 				runBounce()
 
 				break
@@ -809,7 +922,7 @@ const handleReturn = (action) => {
 
 	if (commandMode.value) {
 		if (commandMetadata.action.type === "command:nested") {
-			action.callback()
+			target.callback()
 			appStore.showCmd = false
 
 			exitCommandMode()
@@ -833,35 +946,56 @@ const onKeydown = (e) => {
 	if (["ArrowDown", "ArrowUp", "PageUp", "PageDown"].includes(e.key)) {
 		e.preventDefault()
 
-		itemsToNavigate = popupEl.value.wrapper.querySelectorAll('[tabindex = "1"]')
-		activeItemIdx = [...itemsToNavigate].findIndex((item) => item.isEqualNode(document.activeElement))
+		itemsToNavigate = actionEl.value
+		activeItemIdx = [...actionEl.value].findIndex((item) => item.wrapper.wrapper.id === fakeFocus.value)
 	}
 
 	if (e.key === "ArrowDown") {
 		if (activeItemIdx === -1 || activeItemIdx === itemsToNavigate.length - 1) {
-			itemsToNavigate[0].focus()
+			fakeFocus.value = itemsToNavigate[0].wrapper.wrapper.id
 		} else {
-			itemsToNavigate[activeItemIdx + 1].focus()
+			fakeFocus.value = itemsToNavigate[activeItemIdx + 1].wrapper.wrapper.id
 		}
 	}
 
 	if (e.key === "ArrowUp") {
 		if (activeItemIdx === -1 || activeItemIdx === 0) {
-			itemsToNavigate[itemsToNavigate.length - 1].focus()
+			fakeFocus.value = itemsToNavigate[itemsToNavigate.length - 1].wrapper.wrapper.id
 		} else {
-			itemsToNavigate[activeItemIdx - 1].focus()
+			fakeFocus.value = itemsToNavigate[activeItemIdx - 1].wrapper.wrapper.id
 		}
 	}
 
 	if (e.key === "PageUp") {
-		itemsToNavigate[0].focus()
+		fakeFocus.value = itemsToNavigate[0].wrapper.wrapper.id
 	}
 
 	if (e.key === "PageDown") {
-		itemsToNavigate[itemsToNavigate.length - 1].focus()
+		fakeFocus.value = itemsToNavigate[itemsToNavigate.length - 1].wrapper.wrapper.id
+	}
+
+	if (["ArrowDown", "ArrowUp", "PageUp", "PageDown"].includes(e.key)) {
+		actionEl.value.forEach((a) => {
+			if (a.wrapper.wrapper.id === fakeFocus.value) {
+				a.wrapper.wrapper.scrollIntoView({ block: "nearest" })
+			}
+		})
 	}
 }
 
+watch(
+	() => searchTerm.value,
+	() => {
+		if (searchTerm.value.length > 3) {
+			debouncedSearch()
+		}
+
+		nextTick(() => {
+			fakeFocus.value = actionEl.value[0]?.wrapper.wrapper.id
+		})
+	},
+)
+
 const handleFocus = () => {
 	inputEl.value.focus()
 }
@@ -887,7 +1021,7 @@ const resetRunText = () => {
 <template>
 	<Transition name="fastpopup">
 		<div v-if="appStore.showCmd" :class="$style.wrapper">
-			<Flex @click.stop ref="popupEl" direction="column" :class="[$style.popup, bounce && $style.bounce]">
+			<Flex @click.stop="handleFocus" ref="popupEl" direction="column" :class="[$style.popup, bounce && $style.bounce]">
 				<!-- Input Field -->
 				<Flex direction="column" :class="$style.header">
 					<Flex v-if="commandMode" align="center" gap="8" :class="$style.breadcrumbs">
@@ -900,7 +1034,7 @@ const resetRunText = () => {
 						</Flex>
 					</Flex>
 
-					<Flex @click="handleFocus" align="center" :class="$style.input">
+					<Flex align="center" :class="$style.input">
 						<input
 							v-model="searchTerm"
 							ref="inputEl"
@@ -920,34 +1054,24 @@ const resetRunText = () => {
 					</Flex>
 				</Flex>
 
-				<Flex v-if="!commandMode" direction="column" :class="$style.list">
-					<template v-for="group in groups">
+				<Flex v-if="!commandMode" ref="listEl" direction="column" :class="$style.list">
+					<template v-for="(group, groupIdx) in groups">
 						<Flex v-if="group.value.actions.length" direction="column" :class="$style.group">
 							<Text size="12" weight="500" color="tertiary" :class="$style.label">{{ group.value.title }}</Text>
 
 							<Flex direction="column" :class="$style.actions">
 								<Item
 									v-for="action in group.value.actions"
+									ref="actionEl"
+									:id="action.id"
 									@click="handleReturn(action)"
-									@onReturn="handleReturn"
 									:action="action"
+									:isFocused="action.id === fakeFocus"
 									@focus="onActionFocus(action)"
 								/>
 							</Flex>
 						</Flex>
 					</template>
-					<Flex v-if="searchTerm.length" direction="column" :class="$style.group">
-						<Text size="12" weight="500" color="tertiary" :class="$style.label">Query "{{ searchTerm }}"</Text>
-
-						<Flex direction="column" :class="$style.actions">
-							<Item
-								@click="handleReturn(searchAction)"
-								@onReturn="handleReturn"
-								:action="searchAction"
-								@focus="onActionFocus(searchAction)"
-							/>
-						</Flex>
-					</Flex>
 				</Flex>
 
 				<Flex v-else direction="column" :class="$style.list">
@@ -959,9 +1083,11 @@ const resetRunText = () => {
 						<Flex direction="column" :class="$style.actions">
 							<Item
 								v-for="action in commandMetadata.action.actions"
+								ref="actionEl"
+								:id="action.id"
 								@click="handleReturn(action)"
-								@onReturn="handleReturn"
 								:action="action"
+								:isFocused="action.id === fakeFocus"
 								@focus="onActionFocus(action)"
 							/>
 						</Flex>
@@ -1083,6 +1209,7 @@ const resetRunText = () => {
 .list {
 	flex: 1;
 
+	scroll-padding: 4px;
 	overflow-y: auto;
 
 	padding-bottom: 4px;
@@ -1090,9 +1217,6 @@ const resetRunText = () => {
 
 .group {
 	.label {
-		position: sticky;
-		top: 0;
-
 		text-overflow: ellipsis;
 		overflow: hidden;
 		white-space: nowrap;
diff --git a/components/cmd/Item.vue b/components/cmd/Item.vue
index 015abea5..b421a9bf 100644
--- a/components/cmd/Item.vue
+++ b/components/cmd/Item.vue
@@ -1,22 +1,24 @@
 <script setup>
+const wrapper = ref()
+defineExpose({ wrapper })
+
 const props = defineProps({
 	action: {
 		type: Object,
 	},
+	isFocused: {
+		type: Boolean,
+		default: false,
+	},
 })
-const emit = defineEmits(["onReturn"])
-
-const onKeydown = () => {
-	emit("onReturn", props.action)
-}
 </script>
 
 <template>
-	<Flex @keydown.enter="onKeydown" align="center" justify="between" :class="$style.wrapper" tabindex="1">
-		<Flex align="center" gap="8">
+	<Flex ref="wrapper" align="center" justify="between" :class="[$style.wrapper, isFocused && $style.focused]">
+		<Flex align="center" gap="8" :class="$style.left">
 			<Icon :name="action.icon" size="12" color="primary" :class="$style.icon" />
 
-			<Text size="13" weight="500" color="primary">
+			<Text size="13" weight="500" color="primary" :class="$style.title">
 				{{ action.title }}
 			</Text>
 		</Flex>
@@ -36,8 +38,6 @@ const onKeydown = () => {
 
 	padding: 0 8px;
 
-	transition: all 0.1s ease;
-
 	&:hover {
 		background: var(--op-5);
 	}
@@ -46,12 +46,16 @@ const onKeydown = () => {
 		background: var(--op-8);
 	}
 
-	&:focus-visible {
+	&.focused {
 		background: var(--op-8);
 		outline: none;
 	}
 }
 
+.left {
+	min-width: 0;
+}
+
 .icon {
 	box-sizing: content-box;
 
@@ -60,4 +64,9 @@ const onKeydown = () => {
 
 	padding: 4px;
 }
+
+.title {
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
 </style>
diff --git a/components/modules/address/AddressOverview.vue b/components/modules/address/AddressOverview.vue
index 83ba1f75..e249d9c4 100644
--- a/components/modules/address/AddressOverview.vue
+++ b/components/modules/address/AddressOverview.vue
@@ -301,7 +301,7 @@ const handleViewRawTransactions = () => {
 const handleOpenQRModal = () => {
 	cacheStore.qr.data = props.address.hash
 	cacheStore.qr.description = "Scan QR code to get this address"
-	cacheStore.qr.icon = "addresses"
+	cacheStore.qr.icon = "address"
 
 	modalsStore.open("qr")
 }
@@ -311,7 +311,7 @@ const handleOpenQRModal = () => {
 	<Flex direction="column" gap="4">
 		<Flex align="center" justify="between" :class="$style.header">
 			<Flex align="center" gap="8">
-				<Icon name="addresses" size="14" color="primary" />
+				<Icon name="address" size="14" color="primary" />
 				<Text size="13" weight="600" color="primary">Address</Text>
 			</Flex>
 
@@ -328,7 +328,7 @@ const handleOpenQRModal = () => {
 					<template #popup>
 						<DropdownItem @click="handleViewRawAddress">
 							<Flex align="center" gap="8">
-								<Icon name="addresses" size="12" color="secondary" />
+								<Icon name="address" size="12" color="secondary" />
 								View Raw Address
 							</Flex>
 						</DropdownItem>
diff --git a/components/widgets/TemporaryWidget.vue b/components/widgets/TemporaryWidget.vue
index 8ab6b7c3..31a378b8 100644
--- a/components/widgets/TemporaryWidget.vue
+++ b/components/widgets/TemporaryWidget.vue
@@ -33,7 +33,7 @@ onMounted(async () => {
 
 		<Flex direction="column" gap="24" :class="$style.bottom">
 			<Flex align="center" gap="6">
-				<Icon name="addresses" size="12" color="secondary" />
+				<Icon name="address" size="12" color="secondary" />
 				<Text size="13" weight="600" height="110" color="secondary">Validators</Text>
 			</Flex>
 
diff --git a/pages/addresses.vue b/pages/addresses.vue
index 414c4b1a..d0187308 100644
--- a/pages/addresses.vue
+++ b/pages/addresses.vue
@@ -131,7 +131,7 @@ const handleLast = async () => {
 		<Flex wide direction="column" gap="4">
 			<Flex justify="between" :class="$style.header">
 				<Flex align="center" gap="8">
-					<Icon name="addresses" size="16" color="secondary" />
+					<Icon name="address" size="16" color="secondary" />
 					<Text size="14" weight="600" color="primary">Addresses</Text>
 				</Flex>
 

From efff4b7287c859bbb87b3e01daf91cc3b24cb8ad Mon Sep 17 00:00:00 2001
From: xdeq <celldwellerq@gmail.com>
Date: Fri, 26 Jan 2024 23:47:50 +0300
Subject: [PATCH 18/41] feat: bookmarks

---
 app.vue                                       |   9 ++
 assets/icons.json                             |   4 +
 components/cmd/CommandMenu.vue                |   9 ++
 .../modules/address/AddressOverview.vue       |  66 +++++++++
 components/modules/block/BlockOverview.vue    |  90 +++++++++++--
 components/modules/bookmarks/BookmarkItem.vue |  77 +++++++++++
 .../modules/namespace/NamespaceOverview.vue   |  90 +++++++++++--
 components/modules/tx/TxOverview.vue          |  88 ++++++++++--
 pages/bookmarks.vue                           | 125 ++++++++++++++++++
 store/bookmarks.js                            |  23 ++++
 10 files changed, 554 insertions(+), 27 deletions(-)
 create mode 100644 components/modules/bookmarks/BookmarkItem.vue
 create mode 100644 pages/bookmarks.vue
 create mode 100644 store/bookmarks.js

diff --git a/app.vue b/app.vue
index b0984137..87ae28a7 100644
--- a/app.vue
+++ b/app.vue
@@ -10,12 +10,21 @@ import CommandMenu from "@/components/cmd/CommandMenu.vue"
 
 /** Store */
 import { useAppStore } from "@/store/app"
+import { useBookmarksStore } from "@/store/bookmarks"
 const appStore = useAppStore()
+const bookmarksStore = useBookmarksStore()
+bookmarksStore.$subscribe((mutation, state) => {
+	localStorage.setItem("bookmarks", JSON.stringify(state.bookmarks))
+})
 
 onMounted(async () => {
 	const runtimeConfig = useRuntimeConfig()
 	amp.init(runtimeConfig.public.AMP)
 
+	if (localStorage.bookmarks) {
+		bookmarksStore.bookmarks = JSON.parse(localStorage.bookmarks)
+	}
+
 	Socket.init()
 
 	const data = await fetchHead()
diff --git a/assets/icons.json b/assets/icons.json
index cc1a3de0..38a4d887 100644
--- a/assets/icons.json
+++ b/assets/icons.json
@@ -14,6 +14,9 @@
 	"select": "M12 1C12.5523 1 13 1.44772 13 2V3.05493C17.1716 3.51608 20.4839 6.82838 20.9451 11H22C22.5523 11 23 11.4477 23 12C23 12.5523 22.5523 13 22 13H20.9451C20.4839 17.1716 17.1716 20.4839 13 20.9451V22C13 22.5523 12.5523 23 12 23C11.4477 23 11 22.5523 11 22V20.9451C6.82838 20.4839 3.51608 17.1716 3.05493 13H2C1.44772 13 1 12.5523 1 12C1 11.4477 1.44772 11 2 11H3.05493C3.51608 6.82838 6.82838 3.51608 11 3.05493V2C11 1.44772 11.4477 1 12 1ZM12 7C9.23858 7 7 9.23858 7 12C7 14.7614 9.23858 17 12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7ZM9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12Z",
 	"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",
+	"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",
 	"address": "M9.5 2C6.73857 2 4.5 4.23858 4.5 7C4.5 9.76142 6.73857 12 9.5 12C12.2615 12 14.5 9.76142 14.5 7C14.5 4.23858 12.2615 2 9.5 2ZM15.8753 2.36385C15.3633 2.15663 14.7803 2.40364 14.5731 2.91557C14.3659 3.42751 14.6129 4.0105 15.1248 4.21773C16.2261 4.66351 17 5.74259 17 7.00003C17 8.25747 16.2261 9.33655 15.1248 9.78233C14.6129 9.98956 14.3659 10.5725 14.5731 11.0845C14.7803 11.5964 15.3633 11.8434 15.8753 11.6362C17.7058 10.8952 19 9.09997 19 7.00003C19 4.90009 17.7058 3.10484 15.8753 2.36385ZM19.2493 14.1576C18.7144 14.0199 18.1693 14.3419 18.0316 14.8768C17.8939 15.4116 18.2159 15.9568 18.7508 16.0944C20.0449 16.4275 21 17.6035 21 19V21C21 21.5522 21.4478 22 22 22C22.5523 22 23 21.5522 23 21V19C23 16.6688 21.4056 14.7126 19.2493 14.1576ZM7.17898 14C8.72635 14.0005 10.2737 14.0005 11.8211 14C12.9117 13.9996 13.6559 13.9994 14.2941 14.1704C16.0196 14.6327 17.3673 15.9804 17.8297 17.7059C18.0143 18.395 18.008 19.1222 18.0019 19.8373C18.0004 20.0139 17.9988 20.1897 18.0002 20.3641C18.0011 20.471 18.0028 20.6872 17.9489 20.8882C17.8102 21.4059 17.4059 21.8102 16.8883 21.9489C16.6879 22.0027 16.4724 22.001 16.3651 22.0002L16.3641 22.0002C11.7891 21.9637 7.21096 21.9637 2.63595 22.0002L2.63491 22.0002C2.52765 22.001 2.31217 22.0027 2.11181 21.9489C1.59417 21.8102 1.18985 21.4059 1.05115 20.8882C0.997288 20.6872 0.999012 20.471 0.999864 20.3641C1.00125 20.1903 0.999761 20.0147 0.998266 19.8383C0.992206 19.1234 0.986025 18.3941 1.17041 17.7059C1.63274 15.9804 2.98048 14.6327 4.70594 14.1704C5.34416 13.9994 6.08836 13.9996 7.17898 14Z",
 	"close": "M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z",
 	"chart": "M 12 23 C 5.925 23 1 18.075 1 12 C 1 5.925 5.925 1 12 1 C 18.075 1 23 5.925 23 12 C 23 18.075 18.075 23 12 23 Z M 10 11.414 L 12.744 14.158 C 12.828 14.242 12.928 14.343 13.024 14.424 C 13.174 14.556 13.348 14.656 13.537 14.72 C 13.838 14.818 14.162 14.818 14.463 14.72 C 14.652 14.656 14.826 14.555 14.976 14.424 C 15.072 14.343 15.172 14.242 15.257 14.157 L 18.707 10.707 C 18.967 10.456 19.071 10.084 18.98 9.734 C 18.888 9.385 18.615 9.112 18.266 9.02 C 17.916 8.929 17.544 9.033 17.293 9.293 L 14 12.586 L 11.256 9.842 C 11.172 9.758 11.072 9.657 10.976 9.576 C 10.864 9.481 10.696 9.356 10.464 9.281 C 10.162 9.183 9.838 9.183 9.536 9.281 C 9.304 9.356 9.135 9.482 9.024 9.576 C 8.928 9.657 8.828 9.758 8.743 9.843 L 5.293 13.293 C 4.914 13.685 4.919 14.309 5.305 14.695 C 5.691 15.081 6.315 15.086 6.707 14.707 Z",
@@ -28,6 +31,7 @@
 	"block": "M 12.403 1.185 C 12.137 1.13 11.863 1.13 11.597 1.185 C 11.29 1.248 11.015 1.402 10.797 1.525 L 10.737 1.558 L 4.31 5.129 C 3.902 5.356 3.698 5.469 3.63 5.619 C 3.57 5.75 3.57 5.9 3.629 6.031 C 3.696 6.181 3.9 6.296 4.307 6.525 L 11.607 10.632 C 11.751 10.712 11.822 10.752 11.897 10.768 C 11.964 10.782 12.034 10.782 12.101 10.768 C 12.177 10.752 12.249 10.712 12.391 10.632 L 19.692 6.525 C 20.099 6.296 20.303 6.182 20.371 6.031 C 20.43 5.9 20.429 5.751 20.37 5.62 C 20.301 5.47 20.097 5.356 19.689 5.13 L 13.262 1.558 L 13.202 1.524 C 12.985 1.402 12.71 1.248 12.402 1.185 Z M 21.996 8.89 C 21.996 8.442 21.996 8.218 21.901 8.087 C 21.818 7.973 21.691 7.899 21.551 7.883 C 21.391 7.865 21.195 7.975 20.804 8.195 L 13.408 12.355 C 13.259 12.439 13.185 12.48 13.131 12.539 C 13.083 12.591 13.047 12.653 13.025 12.721 C 13 12.797 13 12.882 13 13.052 L 13 21.228 C 13 21.675 13 21.898 13.094 22.029 C 13.176 22.143 13.302 22.218 13.442 22.234 C 13.602 22.253 13.797 22.144 14.187 21.928 L 20.663 18.331 L 20.726 18.297 C 20.956 18.169 21.248 18.009 21.471 17.767 C 21.664 17.557 21.81 17.31 21.899 17.039 C 22.002 16.726 22.001 16.395 22 16.131 L 22 16.059 C 22 14.096 21.997 10.756 21.996 8.89 Z M 9.814 21.928 C 10.204 22.144 10.399 22.253 10.559 22.234 C 10.698 22.217 10.824 22.143 10.906 22.029 C 11 21.899 11 21.675 11 21.228 L 11 13.052 C 11 12.882 11 12.797 10.975 12.721 C 10.953 12.654 10.917 12.592 10.869 12.54 C 10.815 12.48 10.741 12.439 10.593 12.355 L 3.197 8.195 C 2.805 7.975 2.609 7.865 2.449 7.883 C 2.309 7.899 2.182 7.973 2.099 8.087 C 2.005 8.217 2.005 8.442 2.004 8.89 C 2.003 10.756 2 14.096 2 16.06 L 2 16.132 C 2 16.396 1.998 16.727 2.101 17.04 C 2.191 17.31 2.337 17.559 2.53 17.768 C 2.753 18.01 3.043 18.17 3.275 18.298 L 3.338 18.332 C 5.118 19.322 8.148 21.004 9.814 21.929 Z",
 	"settings": "M 9.742 21.554 L 9.09 20.108 C 8.856 19.59 8.463 19.16 7.968 18.88 C 7.47 18.598 6.897 18.477 6.328 18.536 L 4.731 18.704 C 4.256 18.753 3.777 18.666 3.35 18.452 C 2.926 18.24 2.572 17.909 2.331 17.5 C 1.843 16.668 1.899 15.626 2.473 14.851 L 3.418 13.571 C 4.108 12.637 4.108 11.362 3.418 10.428 L 2.473 9.148 C 1.9 8.373 1.844 7.332 2.33 6.5 C 2.571 6.091 2.924 5.76 3.349 5.548 C 3.776 5.334 4.254 5.247 4.729 5.296 L 6.331 5.464 C 6.9 5.523 7.474 5.403 7.972 5.12 C 8.465 4.839 8.857 4.409 9.09 3.892 L 9.742 2.446 C 9.936 2.016 10.252 1.65 10.653 1.393 C 11.474 0.867 12.526 0.867 13.347 1.393 C 13.747 1.65 14.064 2.015 14.257 2.446 L 14.915 3.892 C 15.148 4.409 15.539 4.839 16.032 5.12 C 16.53 5.402 17.103 5.523 17.672 5.464 L 19.27 5.296 C 19.745 5.246 20.224 5.334 20.65 5.548 C 21.076 5.761 21.43 6.092 21.669 6.5 C 22.158 7.331 22.102 8.374 21.527 9.149 L 20.582 10.429 C 20.245 10.884 20.064 11.434 20.063 12 C 20.061 12.568 20.241 13.121 20.577 13.578 L 21.522 14.858 C 22.094 15.633 22.15 16.674 21.664 17.506 C 21.424 17.916 21.07 18.247 20.645 18.459 C 20.218 18.673 19.74 18.76 19.265 18.71 L 17.668 18.543 C 17.099 18.484 16.525 18.604 16.027 18.886 C 15.533 19.167 15.142 19.596 14.91 20.108 L 14.258 21.554 C 14.064 21.984 13.748 22.35 13.347 22.607 C 12.526 23.133 11.474 23.133 10.653 22.607 C 10.254 22.352 9.938 21.986 9.743 21.554 Z M 12 9 C 10.343 9 9 10.343 9 12 C 9 13.657 10.343 15 12 15 C 13.657 15 15 13.657 15 12 C 15 10.343 13.657 9 12 9 Z",
 	"plus-circle": "M12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1ZM12 7C12.5523 7 13 7.44772 13 8V11H16C16.5523 11 17 11.4477 17 12C17 12.5523 16.5523 13 16 13H13V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V13H8C7.44772 13 7 12.5523 7 12C7 11.4477 7.44772 11 8 11H11V8C11 7.44772 11.4477 7 12 7Z",
+	"code": "M14.9764 3.21714C15.0962 2.67801 14.7563 2.14383 14.2171 2.02403C13.678 1.90422 13.1438 2.24415 13.024 2.78328L9.02403 20.7833C8.90422 21.3224 9.24416 21.8566 9.78329 21.9764C10.3224 22.0962 10.8566 21.7563 10.9764 21.2171L14.9764 3.21714ZM7.70711 6.29314C8.09763 6.68366 8.09763 7.31683 7.70711 7.70735L3.41421 12.0002L7.70711 16.2931C8.09763 16.6836 8.09763 17.3168 7.70711 17.7073C7.31658 18.0978 6.68342 18.0978 6.29289 17.7073L1.29289 12.7073C0.90237 12.3168 0.90237 11.6836 1.29289 11.2931L6.29289 6.29314C6.68342 5.90261 7.31658 5.90261 7.70711 6.29314ZM16.2929 6.29314C16.6834 5.90261 17.3166 5.90261 17.7071 6.29314L22.7071 11.2931C23.0976 11.6836 23.0976 12.3168 22.7071 12.7073L17.7071 17.7073C17.3166 18.0978 16.6834 18.0978 16.2929 17.7073C15.9024 17.3168 15.9024 16.6836 16.2929 16.2931L20.5858 12.0002L16.2929 7.70735C15.9024 7.31683 15.9024 6.68366 16.2929 6.29314Z",
 	"treemap": "M11 3.6C11 3.03995 11 2.75992 10.891 2.54601C10.7951 2.35785 10.6422 2.20487 10.454 2.10899C10.2401 2 9.96005 2 9.4 2H6.16146C5.63433 1.99998 5.17954 1.99997 4.80497 2.03057C4.40963 2.06287 4.01641 2.13419 3.63803 2.32698C3.07354 2.6146 2.6146 3.07354 2.32698 3.63803C2.13419 4.01641 2.06287 4.40963 2.03057 4.80497C1.99997 5.17954 1.99998 5.63429 2 6.16142V17.8385C1.99998 18.3657 1.99997 18.8205 2.03057 19.195C2.06287 19.5904 2.13419 19.9836 2.32698 20.362C2.6146 20.9265 3.07354 21.3854 3.63803 21.673C4.01641 21.8658 4.40963 21.9371 4.80497 21.9694C5.17954 22 5.6343 22 6.16144 22H9.4C9.96005 22 10.2401 22 10.454 21.891C10.6422 21.7951 10.7951 21.6422 10.891 21.454C11 21.2401 11 20.9601 11 20.4V3.6ZM13 20.4C13 20.9601 13 21.2401 13.109 21.454C13.2049 21.6422 13.3578 21.7951 13.546 21.891C13.7599 22 14.0399 22 14.6 22H17.8386C18.3657 22 18.8205 22 19.195 21.9694C19.5904 21.9371 19.9836 21.8658 20.362 21.673C20.9265 21.3854 21.3854 20.9265 21.673 20.362C21.8658 19.9836 21.9371 19.5904 21.9694 19.195C22 18.8205 22 18.3657 22 17.8386V14.6C22 14.0399 22 13.7599 21.891 13.546C21.7951 13.3578 21.6422 13.2049 21.454 13.109C21.2401 13 20.9601 13 20.4 13H14.6C14.0399 13 13.7599 13 13.546 13.109C13.3578 13.2049 13.2049 13.3578 13.109 13.546C13 13.7599 13 14.0399 13 14.6V20.4ZM21.454 10.891C21.2401 11 20.9601 11 20.4 11H14.6C14.0399 11 13.7599 11 13.546 10.891C13.3578 10.7951 13.2049 10.6422 13.109 10.454C13 10.2401 13 9.96005 13 9.4V3.6C13 3.03995 13 2.75992 13.109 2.54601C13.2049 2.35785 13.3578 2.20487 13.546 2.10899C13.7599 2 14.0399 2 14.6 2H17.8386C18.3657 1.99998 18.8205 1.99997 19.195 2.03057C19.5904 2.06287 19.9836 2.13419 20.362 2.32698C20.9265 2.6146 21.3854 3.07354 21.673 3.63803C21.8658 4.01641 21.9371 4.40963 21.9694 4.80497C22 5.17954 22 5.6343 22 6.16144V9.4C22 9.96005 22 10.2401 21.891 10.454C21.7951 10.6422 21.6422 10.7951 21.454 10.891Z",
 	"tx": "M 15.242 1 C 16.046 1 16.71 1 17.252 1.043 C 17.814 1.089 18.331 1.188 18.816 1.435 C 19.569 1.818 20.181 2.43 20.564 3.183 C 20.811 3.668 20.91 4.185 20.956 4.748 C 21 5.288 21 5.953 21 6.758 L 21 17.242 C 21 18.046 21 18.711 20.956 19.252 C 20.91 19.814 20.811 20.331 20.564 20.816 C 20.181 21.569 19.569 22.181 18.816 22.564 C 18.331 22.811 17.814 22.91 17.251 22.956 C 16.711 23 16.046 23 15.241 23 L 8.758 23 C 7.954 23 7.29 23 6.748 22.956 C 6.186 22.91 5.669 22.811 5.184 22.564 C 4.431 22.181 3.819 21.569 3.436 20.816 C 3.189 20.331 3.09 19.814 3.044 19.251 C 3 18.711 3 18.046 3 17.241 L 3 6.758 C 3 5.954 3 5.29 3.045 4.748 C 3.091 4.186 3.19 3.669 3.437 3.184 C 3.82 2.431 4.432 1.819 5.185 1.436 C 5.67 1.189 6.187 1.09 6.75 1.044 C 7.29 1 7.955 1 8.76 1 Z M 8 6 C 7.448 6 7 6.448 7 7 C 7 7.552 7.448 8 8 8 L 16 8 C 16.552 8 17 7.552 17 7 C 17 6.448 16.552 6 16 6 Z M 8 12 L 14 12 C 14.552 12 15 11.552 15 11 C 15 10.448 14.552 10 14 10 L 8 10 C 7.448 10 7 10.448 7 11 C 7 11.552 7.448 12 8 12 Z M 8 16 L 10 16 C 10.552 16 11 15.552 11 15 C 11 14.448 10.552 14 10 14 L 8 14 C 7.448 14 7 14.448 7 15 C 7 15.552 7.448 16 8 16 Z",
 	"tx_success": [
diff --git a/components/cmd/CommandMenu.vue b/components/cmd/CommandMenu.vue
index 2b45505c..66347b18 100644
--- a/components/cmd/CommandMenu.vue
+++ b/components/cmd/CommandMenu.vue
@@ -304,6 +304,15 @@ const rawQuickCommandsActions = [
 			router.push("/gas")
 		},
 	},
+	{
+		type: "callback",
+		icon: "bookmark-plus",
+		title: "Open My Bookmarks",
+		runText: "Open My Bookmarks",
+		callback: () => {
+			router.push("/bookmarks")
+		},
+	},
 ]
 const quickCommandsGroup = computed(() => {
 	const actions = rawQuickCommandsActions.map((a) => ({ id: id(), ...a }))
diff --git a/components/modules/address/AddressOverview.vue b/components/modules/address/AddressOverview.vue
index e249d9c4..80b22571 100644
--- a/components/modules/address/AddressOverview.vue
+++ b/components/modules/address/AddressOverview.vue
@@ -20,8 +20,12 @@ import { fetchTxsByAddressHash, fetchBlobsByAddressHash } from "@/services/api/a
 /** 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()
@@ -33,6 +37,13 @@ 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 activeTab = ref("transactions")
 
 const isRefetching = ref(false)
@@ -288,6 +299,45 @@ 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",
+					},
+				],
+			},
+		})
+	} 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 handleViewRawAddress = () => {
 	cacheStore.current._target = "address"
 	modalsStore.open("rawData")
@@ -316,9 +366,25 @@ const handleOpenQRModal = () => {
 			</Flex>
 
 			<Flex align="center" gap="8">
+				<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>
+
 				<Button @click="handleOpenQRModal" type="secondary" size="mini">
 					<Icon name="qr" size="12" color="secondary" />
 				</Button>
+
 				<Dropdown>
 					<Button type="secondary" size="mini">
 						<Icon name="dots" size="12" color="secondary" />
diff --git a/components/modules/block/BlockOverview.vue b/components/modules/block/BlockOverview.vue
index 16aa763f..f86cc963 100644
--- a/components/modules/block/BlockOverview.vue
+++ b/components/modules/block/BlockOverview.vue
@@ -20,8 +20,12 @@ import { fetchTransactionsByBlock } 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 MapTabsTypes = {
 	PFBs: "MsgPayForBlobs",
@@ -30,8 +34,6 @@ const MapTabsTypes = {
 	Delegate: "MsgDelegate",
 }
 
-const router = useRouter()
-
 const props = defineProps({
 	block: {
 		type: Object,
@@ -42,6 +44,13 @@ 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(["PFBs", "Transfers", "Register", "Delegate", "Other"])
 const activeTab = ref(tabs.value[0])
 
@@ -79,6 +88,10 @@ const getTransactions = async () => {
 }
 await getTransactions()
 
+onMounted(() => {
+	isBookmarked.value = !!bookmarksStore.bookmarks.blocks.find((t) => t.id === props.block.height)
+})
+
 /** Refetch transactions */
 watch(
 	() => page.value,
@@ -133,6 +146,45 @@ const getTxnsCountByTab = (tab) => {
 	}
 }
 
+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",
+					},
+				],
+			},
+		})
+	} 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")
@@ -152,16 +204,34 @@ const handleViewRawTransactions = () => {
 				<Text size="13" weight="600" color="primary">Block </Text>
 			</Flex>
 
-			<Dropdown>
-				<Button type="tertiary" size="mini">
-					<Icon name="dots" size="16" color="secondary" />
+			<Flex align="center" gap="8">
+				<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>
 
-				<template #popup>
-					<DropdownItem @click="handleViewRawBlock"> View Raw Block </DropdownItem>
-					<DropdownItem @click="handleViewRawTransactions"> View Raw Transactions </DropdownItem>
-				</template>
-			</Dropdown>
+				<Dropdown>
+					<Button type="secondary" size="mini">
+						<Icon name="dots" size="16" color="secondary" />
+						More
+					</Button>
+
+					<template #popup>
+						<DropdownItem @click="handleViewRawBlock"> View Raw Block </DropdownItem>
+						<DropdownItem @click="handleViewRawTransactions"> View Raw Transactions </DropdownItem>
+					</template>
+				</Dropdown>
+			</Flex>
 		</Flex>
 
 		<Flex gap="4" :class="$style.content">
diff --git a/components/modules/bookmarks/BookmarkItem.vue b/components/modules/bookmarks/BookmarkItem.vue
new file mode 100644
index 00000000..e42ea8dc
--- /dev/null
+++ b/components/modules/bookmarks/BookmarkItem.vue
@@ -0,0 +1,77 @@
+<script setup>
+/** Vendor */
+import { DateTime } from "luxon"
+
+/** UI */
+import Button from "@/components/ui/Button.vue"
+
+const props = defineProps({
+	item: Object,
+})
+const emit = defineEmits(["onRemove"])
+
+const getIcon = () => {
+	switch (props.item.type.toLowerCase()) {
+		case "namespace":
+			return "folder"
+
+		case "transaction":
+			return "tx"
+
+		case "block":
+		case "address":
+			return props.item.type.toLowerCase()
+
+		default:
+			break
+	}
+}
+
+const getLink = () => {
+	switch (props.item.type.toLowerCase()) {
+		case "namespace":
+			return `/namespace/${props.item.id}`
+
+		case "transaction":
+			return `/tx/${props.item.id}`
+
+		case "block":
+			return `/block/${props.item.id}`
+
+		case "address":
+			return `/address/${props.item.id}`
+	}
+}
+</script>
+
+<template>
+	<NuxtLink :to="getLink()">
+		<Flex justify="between" align="center" :class="$style.wrapper">
+			<Flex align="center" gap="8">
+				<Icon :name="getIcon()" size="14" color="secondary" />
+				<Text size="13" weight="600" color="primary">{{ item.id }}</Text>
+			</Flex>
+
+			<Flex align="center" gap="12">
+				<Text size="13" weight="600" color="tertiary">
+					{{
+						DateTime.fromSeconds(item.ts / 1_000)
+							.setLocale("en")
+							.toFormat("ff")
+					}}
+				</Text>
+				<Button @click="emit('onRemove')" type="secondary" size="mini">Remove</Button>
+			</Flex>
+		</Flex>
+	</NuxtLink>
+</template>
+
+<style module>
+.wrapper {
+	border-radius: 6px;
+	border: 1px solid var(--op-5);
+	background: var(--op-5);
+
+	padding: 4px 4px 4px 8px;
+}
+</style>
diff --git a/components/modules/namespace/NamespaceOverview.vue b/components/modules/namespace/NamespaceOverview.vue
index f851efb6..8671ef58 100644
--- a/components/modules/namespace/NamespaceOverview.vue
+++ b/components/modules/namespace/NamespaceOverview.vue
@@ -17,8 +17,12 @@ import { fetchNamespaceBlobs, fetchNamespaceMessagesById } from "@/services/api/
 /** 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 props = defineProps({
 	namespace: {
@@ -27,6 +31,13 @@ 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",
@@ -94,6 +105,10 @@ const getMessages = async () => {
 /** Initital fetch for blobs */
 await getBlobs()
 
+onMounted(() => {
+	isBookmarked.value = !!bookmarksStore.bookmarks.namespaces.find((t) => t.id === props.namespace.namespace_id)
+})
+
 /** Refetch Blobs/Messages on new page */
 watch(
 	() => page.value,
@@ -128,6 +143,45 @@ 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",
+					},
+				],
+			},
+		})
+	} 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")
@@ -152,17 +206,35 @@ const handleViewRawMessages = () => {
 				<Text size="13" weight="600" color="primary">Namespace</Text>
 			</Flex>
 
-			<Dropdown>
-				<Button type="tertiary" size="mini">
-					<Icon name="dots" size="16" color="secondary" />
+			<Flex align="center" gap="8">
+				<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>
 
-				<template #popup>
-					<DropdownItem @click="handleViewRawNamespace"> View Raw Namespace </DropdownItem>
-					<DropdownItem @click="handleViewRawBlobs"> View Raw Blobs </DropdownItem>
-					<DropdownItem @click="handleViewRawMessages"> View Raw Messages </DropdownItem>
-				</template>
-			</Dropdown>
+				<Dropdown>
+					<Button type="secondary" size="mini">
+						<Icon name="dots" size="16" color="secondary" />
+						More
+					</Button>
+
+					<template #popup>
+						<DropdownItem @click="handleViewRawNamespace"> View Raw Namespace </DropdownItem>
+						<DropdownItem @click="handleViewRawBlobs"> View Raw Blobs </DropdownItem>
+						<DropdownItem @click="handleViewRawMessages"> View Raw Messages </DropdownItem>
+					</template>
+				</Dropdown>
+			</Flex>
 		</Flex>
 
 		<Flex gap="4" :class="$style.content">
diff --git a/components/modules/tx/TxOverview.vue b/components/modules/tx/TxOverview.vue
index 0613a532..45a9f4e6 100644
--- a/components/modules/tx/TxOverview.vue
+++ b/components/modules/tx/TxOverview.vue
@@ -21,8 +21,12 @@ import { fetchTxEvents } 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 EventIconMapping = {
 	message: "message",
@@ -41,6 +45,13 @@ 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 showAll = ref(false)
 const handleShowAll = () => {
 	showAll.value = !showAll.value
@@ -55,6 +66,49 @@ const { data: rawEvents } = await fetchTxEvents(props.tx.hash)
 events.value = rawEvents.value.sort((a, b) => a.position - b.position)
 cacheStore.current.events = events.value
 
+onMounted(() => {
+	isBookmarked.value = !!bookmarksStore.bookmarks.txs.find((t) => t.id === props.tx.hash)
+})
+
+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",
+					},
+				],
+			},
+		})
+	} 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")
@@ -74,16 +128,34 @@ const handleViewRawEvents = () => {
 				<Text size="13" weight="600" color="primary">Transaction</Text>
 			</Flex>
 
-			<Dropdown>
-				<Button type="tertiary" size="mini">
-					<Icon name="dots" size="16" color="secondary" />
+			<Flex align="center" gap="8">
+				<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>
 
-				<template #popup>
-					<DropdownItem @click="handleViewRawTransaction"> View Raw Transaction </DropdownItem>
-					<DropdownItem @click="handleViewRawEvents"> View Raw Events </DropdownItem>
-				</template>
-			</Dropdown>
+				<Dropdown>
+					<Button type="secondary" size="mini">
+						<Icon name="dots" size="16" color="secondary" />
+						More
+					</Button>
+
+					<template #popup>
+						<DropdownItem @click="handleViewRawTransaction"> View Raw Transaction </DropdownItem>
+						<DropdownItem @click="handleViewRawEvents"> View Raw Events </DropdownItem>
+					</template>
+				</Dropdown>
+			</Flex>
 		</Flex>
 
 		<Flex gap="4" :class="$style.content">
diff --git a/pages/bookmarks.vue b/pages/bookmarks.vue
new file mode 100644
index 00000000..dcf67bb7
--- /dev/null
+++ b/pages/bookmarks.vue
@@ -0,0 +1,125 @@
+<script setup>
+/** Components */
+import BookmarkItem from "@/components/modules/bookmarks/BookmarkItem.vue"
+
+/** Store */
+import { useBookmarksStore } from "@/store/bookmarks"
+const bookmarksStore = useBookmarksStore()
+
+useHead({
+	title: `My Bookmarks - Celenium`,
+})
+
+const handleRemove = (type, bookmark) => {
+	const bookmarkIdx = bookmarksStore.bookmarks[type].findIndex((b) => b.id === bookmark.id)
+
+	if (bookmarkIdx >= 0) {
+		bookmarksStore.bookmarks[type].splice(bookmarkIdx, 1)
+	}
+}
+</script>
+
+<template>
+	<Flex direction="column" wide :class="$style.wrapper">
+		<Breadcrumbs
+			:items="[
+				{ link: '/', name: 'Explore' },
+				{ link: '/bookmarks', name: `My Bookmarks` },
+			]"
+			:class="$style.breadcrumbs"
+		/>
+
+		<Flex wide direction="column" gap="4">
+			<Flex justify="between" :class="$style.header">
+				<Flex align="center" gap="8">
+					<Icon name="bookmark-check" size="16" color="secondary" />
+					<Text size="13" weight="600" color="primary">My Bookmarks</Text>
+				</Flex>
+			</Flex>
+
+			<Flex direction="column" gap="8" :class="$style.content">
+				<Text size="13" weight="600" color="primary">Namespaces</Text>
+
+				<Flex v-if="bookmarksStore.bookmarks.namespaces.length" direction="column" gap="4">
+					<BookmarkItem
+						v-for="bookmark in bookmarksStore.bookmarks.namespaces"
+						:item="bookmark"
+						@onRemove="handleRemove('namespaces', bookmark)"
+					/>
+				</Flex>
+				<Text v-else size="12" weight="500" color="tertiary"> There is no bookmarks for namespaces </Text>
+			</Flex>
+
+			<Flex direction="column" gap="8" :class="$style.content">
+				<Text size="13" weight="600" color="primary">Addresses</Text>
+
+				<Flex v-if="bookmarksStore.bookmarks.addresses.length" direction="column" gap="4">
+					<BookmarkItem
+						v-for="bookmark in bookmarksStore.bookmarks.addresses"
+						:item="bookmark"
+						@onRemove="handleRemove('addresses', bookmark)"
+					/>
+				</Flex>
+				<Text v-else size="12" weight="500" color="tertiary"> There is no bookmarks for addresses </Text>
+			</Flex>
+
+			<Flex direction="column" gap="8" :class="$style.content">
+				<Text size="13" weight="600" color="primary">Transactions</Text>
+
+				<Flex v-if="bookmarksStore.bookmarks.txs.length" direction="column" gap="4">
+					<BookmarkItem
+						v-for="bookmark in bookmarksStore.bookmarks.txs"
+						:item="bookmark"
+						@onRemove="handleRemove('txs', bookmark)"
+					/>
+				</Flex>
+				<Text v-else size="12" weight="500" color="tertiary"> There is no bookmarks for transactions </Text>
+			</Flex>
+
+			<Flex direction="column" gap="8" :class="$style.content">
+				<Text size="13" weight="600" color="primary">Blocks</Text>
+
+				<Flex v-if="bookmarksStore.bookmarks.blocks.length" direction="column" gap="4">
+					<BookmarkItem
+						v-for="bookmark in bookmarksStore.bookmarks.blocks"
+						:item="bookmark"
+						@onRemove="handleRemove('blocks', bookmark)"
+					/>
+				</Flex>
+				<Text v-else size="12" weight="500" color="tertiary"> There is no bookmarks for blocks </Text>
+			</Flex>
+		</Flex>
+	</Flex>
+</template>
+
+<style module>
+.wrapper {
+	max-width: calc(var(--base-width) + 48px);
+
+	padding: 40px 24px 60px 24px;
+}
+
+.breadcrumbs {
+	margin-bottom: 16px;
+}
+
+.header {
+	height: 40px;
+
+	border-radius: 8px 8px 4px 4px;
+	background: var(--card-background);
+
+	padding: 0 12px;
+}
+
+.content {
+	background: var(--card-background);
+	border-radius: 4px;
+
+	padding: 12px;
+
+	&:last-of-type {
+		border-radius: 4px 4px 8px 8px;
+	}
+}
+</style>
diff --git a/store/bookmarks.js b/store/bookmarks.js
new file mode 100644
index 00000000..fb05cf13
--- /dev/null
+++ b/store/bookmarks.js
@@ -0,0 +1,23 @@
+/** Vendor */
+import { defineStore, acceptHMRUpdate } from "pinia"
+
+export const useBookmarksStore = defineStore("bookmarks", () => {
+	const bookmarks = ref({
+		txs: [],
+		blocks: [],
+		namespaces: [],
+		addresses: [],
+	})
+
+	const recentBookmarks = computed(() => {
+		return [...bookmarks.value.txs, ...bookmarks.value.blocks, ...bookmarks.value.namespaces, ...bookmarks.value.addresses]
+			.sort((a, b) => b.ts - a.ts)
+			.slice(0, 3)
+	})
+
+	return { bookmarks, recentBookmarks }
+})
+
+if (import.meta.hot) {
+	import.meta.hot.accept(acceptHMRUpdate(useBookmarksStore, import.meta.hot))
+}

From 87d7f68737208702f251b663e4156a76833f8736 Mon Sep 17 00:00:00 2001
From: GussevPM <GussevPM@GMail.Com>
Date: Fri, 26 Jan 2024 23:03:00 +0100
Subject: [PATCH 19/41] Add links to terms and policy

---
 components/TheFooter.vue | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/components/TheFooter.vue b/components/TheFooter.vue
index c18f3e23..a47e23fc 100644
--- a/components/TheFooter.vue
+++ b/components/TheFooter.vue
@@ -65,16 +65,20 @@ const handleChangeTheme = (theme) => {
 					<Icon name="logo" size="14" color="tertiary" />
 					<Text size="13" weight="500" color="secondary">Celenium</Text>
 					<Text size="13" weight="500" color="tertiary">-</Text>
-					<Text size="13" weight="500" color="tertiary">Celestia Explorer, {{ new Date().getFullYear() }}</Text>
+					<Text size="13" weight="500" color="tertiary">Celestia Explorer</Text>
+					<a :href="`https://github.com/celenium-io/celenium-interface/releases/tag/v${appConfig.version}`" target="_blank">
+						<Text size="13" weight="500" color="support">v</Text>
+						<Text size="13" weight="500" color="tertiary">{{ appConfig.version }}</Text>
+					</a>
 				</Flex>
 
 				<Flex align="center" gap="8">
-					<a :href="`https://github.com/celenium-io/celenium-interface/releases/tag/v${appConfig.version}`" target="_blank">
-						<Flex gap="8">
-							<Text size="12" weight="600" color="support">Version</Text>
-							<Text size="12" weight="600" color="tertiary">{{ appConfig.version }}</Text>
-						</Flex>
-					</a>
+					<NuxtLink to="https://www.pklab.io/terms" :class="$style.link">
+						<Text size="12" weight="500" color="tertiary">Terms of Use</Text>
+					</NuxtLink>
+					<NuxtLink to="https://www.pklab.io/privacy" :class="$style.link">
+						<Text size="12" weight="500" color="tertiary">Privacy Policy</Text>
+					</NuxtLink>
 				</Flex>
 
 				<Flex align="center" gap="8">

From 7916a03c6ec78e07a8aaf6f392eaa3499457e25d Mon Sep 17 00:00:00 2001
From: GusevPM <108540436+GusevPM@users.noreply.github.com>
Date: Fri, 26 Jan 2024 23:51:27 +0100
Subject: [PATCH 20/41] Update license.yml

---
 .github/workflows/license.yml | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/license.yml b/.github/workflows/license.yml
index 72df196c..db5c80ff 100644
--- a/.github/workflows/license.yml
+++ b/.github/workflows/license.yml
@@ -13,8 +13,9 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
-      - run: yarn --frozen-lockfile --production
+      - uses: actions/checkout@v3
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
       - uses: daynin/nodejs-license-checker@v0.2.0
         with:
           exclude-private-packages: true

From af81a2976cb1258385997f36d4c1f43b9ff61424 Mon Sep 17 00:00:00 2001
From: GussevPM <GussevPM@GMail.Com>
Date: Sat, 27 Jan 2024 21:42:46 +0100
Subject: [PATCH 21/41] Fix icon and description

---
 components/modules/rollup/RollupOverview.vue | 87 +++++++++++---------
 1 file changed, 47 insertions(+), 40 deletions(-)

diff --git a/components/modules/rollup/RollupOverview.vue b/components/modules/rollup/RollupOverview.vue
index 4ee25aab..dbe6b2c9 100644
--- a/components/modules/rollup/RollupOverview.vue
+++ b/components/modules/rollup/RollupOverview.vue
@@ -47,7 +47,8 @@ const namespaces = ref([])
 const blobs = ref([])
 
 const page = ref(1)
-const pages = computed(() => 1)
+const pages = computed(() => activeTab.value === "Blobs" ? Math.ceil(props.rollup.blobs_count / 10) : 1)
+
 const handleNext = () => {
 	page.value += 1
 }
@@ -160,27 +161,31 @@ watch(
 		<Flex gap="4" :class="$style.content">
 			<Flex direction="column" :class="$style.data">
 				<Flex direction="column" gap="24" :class="$style.main">
-					<Flex direction="column" gap="8" :class="$style.key_value">
-						<Text size="12" weight="600" color="secondary">Rollup</Text>
+					<Flex align="center" gap="12" :class="$style.key_value">
+						<Flex align="center" justify="center" :class="$style.avatar_container">
+							<img :src="rollup.logo" :class="$style.avatar_image" />
+						</Flex>
 
-						<Flex align="center" gap="10">
-							<Text size="13" weight="600" color="primary">{{ rollup.name }} </Text>
+						<Flex direction="column" gap="8" :class="$style.key_value">
+							<Text size="12" weight="600" color="secondary">Rollup</Text>
 
-							<CopyButton :text="rollup.name" />
-						</Flex>
-					</Flex>
+							<Flex align="center" gap="10">
+								<Text size="13" weight="600" color="primary">{{ rollup.name }} </Text>
 
-					<Flex align="center" justify="center">
-						<img :src="rollup.logo" :class="$style.key_value" />
+								<CopyButton :text="rollup.name" />
+							</Flex>
+						</Flex>
 					</Flex>
-
-					<Flex direction="column" gap="8" :class="$style.key_value">
+					<Flex direction="column" gap="6">
 						<Text size="12" weight="600" color="secondary">Description</Text>
 
-						<Text size="12" weight="600" color="tertiary">{{ rollup.description }} </Text>
+						<Flex align="center" gap="6">
+							<Text size="12" height="140" weight="600" color="tertiary" mono selectable :class="$style.memo">
+								{{ rollup.description }}
+							</Text>
+						</Flex>
 					</Flex>
-
-					<Flex align="center" justify="end" gap="12">
+					<Flex align="center" justify="start" gap="12">
 						<Tooltip position="start" delay="500">
 							<a :href="rollup.website" target="_blank">
 								<Icon name="globe" size="14" color="secondary" :class="$style.btn" />
@@ -263,19 +268,22 @@ watch(
 							<Button @click="page = 1" type="secondary" size="mini" :disabled="page === 1">
 								<Icon name="arrow-left-stop" size="12" color="primary" />
 							</Button>
-							<Button @click="handlePrev" type="secondary" size="mini" :disabled="page === 1">
+							<Button type="secondary" @click="handlePrev" size="mini" :disabled="page === 1">
 								<Icon name="arrow-left" size="12" color="primary" />
 							</Button>
 
 							<Button type="secondary" size="mini" disabled>
-								<Text size="12" weight="600" color="primary">Page {{ page }}</Text>
+								<Text size="12" weight="600" color="primary"> {{ comma(page) }} of {{ comma(pages) }} </Text>
 							</Button>
 
-							<Button @click="handleNext" type="secondary" size="mini" :disabled="blobs.length < 10">
+							<Button @click="handleNext" type="secondary" size="mini" :disabled="page === pages">
 								<Icon name="arrow-right" size="12" color="primary" />
 							</Button>
+							<Button @click="page = pages" type="secondary" size="mini" :disabled="page === pages">
+								<Icon name="arrow-right-stop" size="12" color="primary" />
+							</Button>
 						</Flex>
-					</template>
+				</template>
 					<!-- Namespaces Table -->
 					<template v-if="activeTab === 'Namespaces'">
 						<NamespacesTable v-if="namespaces.length" :namespaces="namespaces" />
@@ -306,26 +314,6 @@ watch(
 						</Flex>
 
 					</template>
-					<!-- Pagination -->
-					<!-- <Flex v-if="pages > 1" align="center" gap="6" :class="$style.pagination">
-						<Button @click="page = 1" type="secondary" size="mini" :disabled="page === 1">
-							<Icon name="arrow-left-stop" size="12" color="primary" />
-						</Button>
-						<Button type="secondary" @click="handlePrev" size="mini" :disabled="page === 1">
-							<Icon name="arrow-left" size="12" color="primary" />
-						</Button>
-
-						<Button type="secondary" size="mini" disabled>
-							<Text size="12" weight="600" color="primary"> {{ comma(page) }} of {{ comma(pages) }} </Text>
-						</Button>
-
-						<Button @click="handleNext" type="secondary" size="mini" :disabled="page === pages">
-							<Icon name="arrow-right" size="12" color="primary" />
-						</Button>
-						<Button @click="page = pages" type="secondary" size="mini" :disabled="page === pages">
-							<Icon name="arrow-right-stop" size="12" color="primary" />
-						</Button>
-					</Flex> -->
 				</Flex>
 			</Flex>
 		</Flex>
@@ -344,7 +332,8 @@ watch(
 
 .data {
 	min-width: 384px;
-	/* max-height: 534px; */
+	max-width: 384px;
+	max-height: 534px;
 
 	border-radius: 4px 4px 4px 8px;
 	background: var(--card-background);
@@ -356,6 +345,24 @@ watch(
 			max-width: 100%;
 		}
 	}
+	.avatar_container {
+		position: relative;
+		width: 50px;
+		height: 50px;
+		overflow: hidden;
+		border-radius: 50%;
+	}
+
+	.avatar_image {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+
+	.memo {
+		text-overflow: ellipsis;
+		overflow: hidden;
+	}
 }
 
 .txs_wrapper {

From 547aea16097142a529d6c05ba3ace727bdcc54fa Mon Sep 17 00:00:00 2001
From: xdeq <celldwellerq@gmail.com>
Date: Mon, 29 Jan 2024 00:16:53 +0300
Subject: [PATCH 22/41] fix(CommandMenu): focus unk

---
 components/cmd/CommandMenu.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/cmd/CommandMenu.vue b/components/cmd/CommandMenu.vue
index 66347b18..d259338b 100644
--- a/components/cmd/CommandMenu.vue
+++ b/components/cmd/CommandMenu.vue
@@ -1006,7 +1006,7 @@ watch(
 )
 
 const handleFocus = () => {
-	inputEl.value.focus()
+	inputEl.value?.focus()
 }
 
 const handleOutside = () => {

From 4b1649fb0a3a3ea87d572de9358ed226f7228e3b Mon Sep 17 00:00:00 2001
From: xdeq <celldwellerq@gmail.com>
Date: Mon, 29 Jan 2024 02:27:37 +0300
Subject: [PATCH 23/41] some fixes for bookmark item

---
 .../modules/address/AddressOverview.vue       |  3 +++
 components/modules/bookmarks/BookmarkItem.vue | 25 ++++++++++++++++---
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/components/modules/address/AddressOverview.vue b/components/modules/address/AddressOverview.vue
index 80b22571..db7a7da4 100644
--- a/components/modules/address/AddressOverview.vue
+++ b/components/modules/address/AddressOverview.vue
@@ -318,6 +318,9 @@ const handleBookmark = () => {
 				actions: [
 					{
 						name: "Open Bookmarks",
+						callback: () => {
+							router.push("/bookmarks")
+						},
 					},
 				],
 			},
diff --git a/components/modules/bookmarks/BookmarkItem.vue b/components/modules/bookmarks/BookmarkItem.vue
index e42ea8dc..45a80751 100644
--- a/components/modules/bookmarks/BookmarkItem.vue
+++ b/components/modules/bookmarks/BookmarkItem.vue
@@ -47,9 +47,9 @@ const getLink = () => {
 <template>
 	<NuxtLink :to="getLink()">
 		<Flex justify="between" align="center" :class="$style.wrapper">
-			<Flex align="center" gap="8">
+			<Flex align="center" gap="8" :class="$style.content">
 				<Icon :name="getIcon()" size="14" color="secondary" />
-				<Text size="13" weight="600" color="primary">{{ item.id }}</Text>
+				<Text size="13" weight="600" color="primary" :class="$style.id">{{ item.id }}</Text>
 			</Flex>
 
 			<Flex align="center" gap="12">
@@ -60,7 +60,7 @@ const getLink = () => {
 							.toFormat("ff")
 					}}
 				</Text>
-				<Button @click="emit('onRemove')" type="secondary" size="mini">Remove</Button>
+				<Button @click.prevent="emit('onRemove')" type="secondary" size="mini">Remove</Button>
 			</Flex>
 		</Flex>
 	</NuxtLink>
@@ -74,4 +74,23 @@ const getLink = () => {
 
 	padding: 4px 4px 4px 8px;
 }
+
+.content {
+	max-width: 100%;
+}
+
+.id {
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
+
+@media (max-width: 900px) {
+	.wrapper {
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 8px;
+
+		padding: 8px;
+	}
+}
 </style>

From 447dd767515325e88abca80ebbeeebf95a7e775d Mon Sep 17 00:00:00 2001
From: xdeq <celldwellerq@gmail.com>
Date: Mon, 29 Jan 2024 03:38:48 +0300
Subject: [PATCH 24/41] feat(feed): tia price

---
 assets/icons.json     |  1 +
 components/Feed.vue   | 40 ++++++++++++++++++++++++++++++++++++++++
 services/api/stats.js | 22 ++++++++++++++++++++++
 3 files changed, 63 insertions(+)

diff --git a/assets/icons.json b/assets/icons.json
index 38a4d887..8257c038 100644
--- a/assets/icons.json
+++ b/assets/icons.json
@@ -4,6 +4,7 @@
 	"sun": "M13 2C13 1.44772 12.5523 1 12 1C11.4477 1 11 1.44772 11 2V4C11 4.55228 11.4477 5 12 5C12.5523 5 13 4.55228 13 4V2ZM13 20C13 19.4477 12.5523 19 12 19C11.4477 19 11 19.4477 11 20V22C11 22.5523 11.4477 23 12 23C12.5523 23 13 22.5523 13 22V20ZM2 11C1.44772 11 1 11.4477 1 12C1 12.5523 1.44772 13 2 13H4C4.55228 13 5 12.5523 5 12C5 11.4477 4.55228 11 4 11H2ZM5.60701 4.1928C5.21649 3.80227 4.58332 3.80227 4.1928 4.1928C3.80227 4.58332 3.80227 5.21649 4.1928 5.60701L5.60701 7.02122C5.99753 7.41175 6.6307 7.41175 7.02122 7.02122C7.41175 6.6307 7.41175 5.99753 7.02122 5.60701L5.60701 4.1928ZM19.8073 5.60701C20.1979 5.21649 20.1979 4.58332 19.8073 4.1928C19.4168 3.80227 18.7836 3.80227 18.3931 4.1928L16.9789 5.60701C16.5884 5.99753 16.5884 6.6307 16.9789 7.02122C17.3694 7.41175 18.0026 7.41175 18.3931 7.02122L19.8073 5.60701ZM7.02122 18.397C7.41175 18.0065 7.41175 17.3734 7.02122 16.9828C6.6307 16.5923 5.99753 16.5923 5.60701 16.9828L4.1928 18.397C3.80227 18.7876 3.80227 19.4207 4.1928 19.8113C4.58332 20.2018 5.21649 20.2018 5.60701 19.8113L7.02122 18.397ZM18.3931 16.9828C18.0026 16.5923 17.3694 16.5923 16.9789 16.9828C16.5884 17.3734 16.5884 18.0065 16.9789 18.397L18.3931 19.8113C18.7836 20.2018 19.4168 20.2018 19.8073 19.8113C20.1979 19.4207 20.1979 18.7876 19.8073 18.397L18.3931 16.9828ZM20 11C19.4477 11 19 11.4477 19 12C19 12.5523 19.4477 13 20 13H22C22.5523 13 23 12.5523 23 12C23 11.4477 22.5523 11 22 11H20ZM6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12C18 15.3137 15.3137 18 12 18C8.68629 18 6 15.3137 6 12Z",
 	"folder": "M 1 6.162 C 1 5.635 1 5.18 1.03 4.805 C 1.063 4.41 1.134 4.017 1.327 3.638 C 1.615 3.074 2.074 2.615 2.638 2.328 C 3.016 2.134 3.41 2.063 3.805 2.031 C 4.18 2 4.635 2 5.161 2 L 9.147 2 C 9.74 1.998 10.262 1.998 10.742 2.163 C 11.162 2.308 11.545 2.545 11.863 2.856 C 12.226 3.211 12.459 3.678 12.723 4.21 L 13.618 6 L 17.241 6 C 18.046 6 18.711 6 19.251 6.044 C 19.814 6.09 20.331 6.189 20.816 6.436 C 21.569 6.819 22.181 7.431 22.564 8.184 C 22.811 8.669 22.91 9.186 22.956 9.748 C 23 10.289 23 10.954 23 11.758 L 23 16.241 C 23 17.046 23 17.711 22.956 18.251 C 22.91 18.814 22.811 19.331 22.564 19.816 C 22.181 20.569 21.569 21.181 20.816 21.564 C 20.331 21.811 19.814 21.91 19.252 21.956 C 18.711 22 18.046 22 17.242 22 L 6.758 22 C 5.953 22 5.288 22 4.748 21.956 C 4.185 21.91 3.668 21.811 3.183 21.564 C 2.43 21.181 1.818 20.569 1.435 19.816 C 1.188 19.331 1.089 18.814 1.043 18.252 C 1 17.71 1 17.046 1 16.242 Z M 5.2 4 C 4.623 4 4.25 4.001 3.968 4.024 C 3.696 4.046 3.596 4.084 3.546 4.109 C 3.358 4.205 3.205 4.358 3.109 4.546 C 3.084 4.596 3.046 4.696 3.024 4.968 C 3.004 5.217 3 5.535 3 6 L 11.382 6 L 10.99 5.216 C 10.637 4.509 10.554 4.375 10.464 4.285 C 10.358 4.182 10.23 4.103 10.09 4.055 C 9.969 4.013 9.812 4 9.022 4 Z",
 	"info": "M 19.196 2.03 C 19.591 2.062 19.985 2.133 20.363 2.326 C 20.927 2.614 21.386 3.073 21.674 3.637 C 21.867 4.015 21.938 4.409 21.971 4.804 C 22.001 5.179 22.001 5.633 22.001 6.16 L 22.001 17.84 C 22.001 18.366 22.001 18.821 21.97 19.196 C 21.938 19.591 21.867 19.985 21.674 20.363 C 21.386 20.927 20.927 21.386 20.363 21.674 C 19.985 21.867 19.591 21.938 19.196 21.971 C 18.822 22.001 18.367 22.001 17.84 22.001 L 6.161 22.001 C 5.635 22.001 5.18 22.001 4.805 21.97 C 4.41 21.938 4.016 21.867 3.638 21.674 C 3.074 21.386 2.615 20.927 2.327 20.363 C 2.134 19.985 2.063 19.591 2.03 19.196 C 2 18.822 2 18.367 2 17.84 L 2 6.161 C 2 5.635 2 5.18 2.032 4.805 C 2.064 4.41 2.135 4.016 2.328 3.638 C 2.616 3.074 3.075 2.615 3.639 2.327 C 4.017 2.134 4.411 2.063 4.806 2.03 C 5.181 2 5.635 2 6.162 2 L 17.838 2 C 18.291 1.993 18.744 2.003 19.196 2.03 Z M 12 7 C 11.448 7 11 7.448 11 8 C 11 8.552 11.448 9 12 9 L 12.01 9 C 12.562 9 13.01 8.552 13.01 8 C 13.01 7.448 12.562 7 12.01 7 Z M 13 12 C 13 11.448 12.552 11 12 11 C 11.448 11 11 11.448 11 12 L 11 16 C 11 16.552 11.448 17 12 17 C 12.552 17 13 16.552 13 16 Z",
+	"coin": "M8.04443 5.04507C8.35895 5.01525 8.67772 5 9.00005 5C14.5229 5 19.0001 9.47715 19.0001 15C19.0001 15.3223 18.9848 15.6411 18.955 15.9556C21.3711 14.5789 23.0001 11.9797 23.0001 9C23.0001 4.58172 19.4184 1 15.0001 1C12.0204 1 9.42114 2.62903 8.04443 5.04507ZM7.20269 7.2027C3.64986 8.0183 1 11.1997 1 15C1 19.4183 4.58172 23 9 23C12.8003 23 15.9817 20.3501 16.7973 16.7973C16.9299 16.2196 17 15.618 17 15C17 10.5817 13.4183 7 9 7C8.38203 7 7.78042 7.07007 7.20269 7.2027ZM10 12C10 11.6312 9.79702 11.2923 9.47186 11.1183C9.1467 10.9443 8.75216 10.9634 8.4453 11.168L6.9453 12.168C6.48577 12.4743 6.3616 13.0952 6.66795 13.5547C6.9623 13.9962 7.54703 14.1282 8 13.8661V16.5H7.5C6.94772 16.5 6.5 16.9477 6.5 17.5C6.5 18.0523 6.94772 18.5 7.5 18.5H10.5C11.0523 18.5 11.5 18.0523 11.5 17.5C11.5 16.9477 11.0523 16.5 10.5 16.5H10V12Z",
 	"coins": "M 7.5 2 C 5.896 2 4.4 2.235 3.27 2.646 L 3.164 2.685 C 2.643 2.884 2.158 3.138 1.78 3.463 C 1.38 3.807 1 4.323 1 5 L 1 6.5 C 1 7.177 1.38 7.693 1.78 8.037 C 2.183 8.383 2.708 8.65 3.27 8.854 C 4.4 9.265 5.896 9.5 7.5 9.5 C 7.732 9.5 7.962 9.495 8.189 9.485 C 8.329 9.479 8.399 9.476 8.461 9.457 C 8.517 9.44 8.569 9.413 8.615 9.377 C 8.668 9.337 8.721 9.268 8.827 9.13 C 9.041 8.853 9.269 8.625 9.477 8.447 C 10.129 7.886 10.897 7.517 11.586 7.267 C 12.151 7.065 12.73 6.908 13.319 6.795 C 13.572 6.745 13.699 6.721 13.785 6.661 C 13.862 6.609 13.922 6.536 13.958 6.451 C 14 6.355 14 6.233 14 5.988 L 14 5 C 14 4.323 13.62 3.807 13.22 3.463 C 12.817 3.117 12.292 2.85 11.73 2.646 C 10.6 2.235 9.105 2 7.5 2 Z M 8 11.992 C 7.999 11.86 7.946 11.735 7.852 11.642 C 7.758 11.55 7.632 11.499 7.5 11.5 C 5.896 11.5 4.4 11.265 3.27 10.854 C 2.708 10.65 2.183 10.384 1.78 10.037 C 1.624 9.905 1.485 9.754 1.365 9.589 C 1.327 9.534 1.264 9.501 1.197 9.5 C 1.088 9.5 1 9.588 1 9.697 L 1 11.5 C 1 12.177 1.38 12.693 1.78 13.037 C 2.183 13.383 2.708 13.65 3.27 13.854 C 4.4 14.265 5.896 14.5 7.5 14.5 L 7.512 14.5 C 7.785 14.489 8 14.265 8 13.992 Z M 7.5 16.5 C 7.774 16.5 8 16.719 8 16.992 L 8 19 C 8 19.126 8.006 19.249 8.018 19.368 L 8.026 19.454 C 8.056 19.772 7.85 19.999 7.529 20 L 7.5 20 C 5.896 20 4.4 19.765 3.27 19.354 C 2.708 19.15 2.183 18.884 1.78 18.537 C 1.38 18.193 1 17.677 1 17 L 1 14.697 C 1 14.588 1.088 14.5 1.197 14.5 C 1.264 14.5 1.327 14.534 1.365 14.589 C 1.489 14.761 1.633 14.911 1.78 15.037 C 2.183 15.383 2.708 15.65 3.27 15.854 C 4.4 16.265 5.896 16.5 7.5 16.5 Z M 14.207 8.169 C 14.966 8.055 15.732 7.998 16.5 8 C 18.104 8 19.6 8.235 20.73 8.646 L 20.836 8.685 C 21.357 8.884 21.842 9.138 22.22 9.463 C 22.62 9.807 23 10.323 23 11 L 23 13 C 23 13.677 22.62 14.193 22.22 14.537 C 21.817 14.883 21.292 15.15 20.73 15.354 C 19.6 15.765 18.104 16 16.5 16 C 14.896 16 13.4 15.765 12.27 15.354 C 11.708 15.15 11.183 14.884 10.78 14.537 C 10.38 14.193 10 13.677 10 13 L 10 11 C 10 10.323 10.38 9.807 10.78 9.463 C 11.183 9.117 11.708 8.85 12.27 8.646 C 12.34 8.62 12.412 8.596 12.485 8.571 C 13.047 8.389 13.623 8.254 14.207 8.169 Z M 10 16.197 C 10 16.088 10.088 16 10.197 16 C 10.264 16 10.327 16.034 10.365 16.089 C 10.489 16.261 10.633 16.411 10.78 16.537 C 11.183 16.883 11.708 17.15 12.27 17.354 C 13.4 17.765 14.896 18 16.5 18 C 18.104 18 19.6 17.765 20.73 17.354 C 21.292 17.15 21.817 16.884 22.22 16.537 C 22.367 16.41 22.51 16.261 22.635 16.089 C 22.673 16.034 22.736 16.001 22.803 16 C 22.912 16 23 16.088 23 16.197 L 23 18.5 C 23 19.177 22.62 19.693 22.22 20.037 C 21.817 20.383 21.292 20.65 20.73 20.854 C 19.6 21.265 18.104 21.5 16.5 21.5 C 14.896 21.5 13.4 21.265 12.27 20.854 C 11.708 20.65 11.183 20.384 10.78 20.037 C 10.38 19.693 10 19.177 10 18.5 Z",
 	"coins_down": "M 9 5 C 8.678 5 8.359 5.015 8.044 5.045 C 9.714 2.112 13.045 0.542 16.37 1.121 C 19.695 1.7 22.299 4.304 22.878 7.629 C 23.457 10.954 21.887 14.285 18.954 15.955 C 18.984 15.641 19 15.322 19 15 C 19 9.477 14.523 5 9 5 Z M 7.202 7.202 C 11.509 6.209 15.805 8.895 16.798 13.202 C 17.791 17.509 15.105 21.805 10.798 22.798 C 6.492 23.791 2.196 21.104 1.203 16.798 C 0.21 12.492 2.897 8.196 7.203 7.203 Z M 10 12 C 10 11.448 9.552 11 9 11 C 8.448 11 8 11.448 8 12 L 8 16.586 L 6.707 15.293 C 6.315 14.914 5.691 14.919 5.305 15.305 C 4.919 15.691 4.914 16.315 5.293 16.707 L 8.293 19.707 C 8.683 20.097 9.317 20.097 9.707 19.707 L 12.707 16.707 C 13.086 16.315 13.081 15.691 12.695 15.305 C 12.309 14.919 11.685 14.914 11.293 15.293 L 10 16.586 Z",
 	"coins_up": "M 9 5 C 8.678 5 8.359 5.015 8.044 5.045 C 9.714 2.112 13.045 0.542 16.37 1.121 C 19.695 1.7 22.299 4.304 22.878 7.629 C 23.457 10.954 21.887 14.285 18.954 15.955 C 18.984 15.641 19 15.322 19 15 C 19 9.477 14.523 5 9 5 Z M 7.202 7.202 C 11.509 6.209 15.805 8.895 16.798 13.202 C 17.791 17.509 15.105 21.805 10.798 22.798 C 6.492 23.791 2.196 21.104 1.203 16.798 C 0.21 12.492 2.897 8.196 7.203 7.203 Z M 9.707 11.293 C 9.317 10.903 8.683 10.903 8.293 11.293 L 5.293 14.293 C 5.033 14.544 4.929 14.916 5.02 15.266 C 5.112 15.615 5.385 15.888 5.734 15.98 C 6.084 16.071 6.456 15.967 6.707 15.707 L 8 14.414 L 8 19 C 8 19.552 8.448 20 9 20 C 9.552 20 10 19.552 10 19 L 10 14.414 L 11.293 15.707 C 11.685 16.086 12.309 16.081 12.695 15.695 C 13.081 15.309 13.086 14.685 12.707 14.293 Z",
diff --git a/components/Feed.vue b/components/Feed.vue
index ee6df4cf..bd325233 100644
--- a/components/Feed.vue
+++ b/components/Feed.vue
@@ -5,11 +5,30 @@ import { comma, formatBytes, abbreviate } from "@/services/utils"
 /** UI */
 import Tooltip from "@/components/ui/Tooltip.vue"
 
+/** API */
+import { fetchPrice, fetchPriceSeries } from "@/services/api/stats"
+
 /** Store */
 import { useAppStore } from "@/store/app"
 const appStore = useAppStore()
 
 const head = computed(() => appStore.head)
+
+const price = reactive({
+	value: 0,
+	diff: 0,
+	side: null,
+})
+
+onMounted(async () => {
+	const dataPrice = await fetchPrice()
+	const dataSeries = await fetchPriceSeries()
+	price.value = parseFloat(dataPrice.close)
+
+	const prevDayClosePrice = parseFloat(dataSeries[1].close)
+	price.diff = (Math.abs(prevDayClosePrice - price.value) / ((prevDayClosePrice + price.value) / 2)) * 100
+	price.side = price.value - prevDayClosePrice > 0 ? "rise" : "fall"
+})
 </script>
 
 <template>
@@ -86,6 +105,27 @@ const head = computed(() => appStore.head)
 					<template #content> {{ comma(head.total_fee) }} UTIA </template>
 				</Tooltip>
 			</Flex>
+
+			<Flex align="center" gap="6" :class="$style.stat">
+				<Icon name="coin" size="12" color="secondary" :class="$style.icon" />
+
+				<Flex align="center" gap="4">
+					<Text size="12" weight="500" color="tertiary" noWrap :class="$style.key">TIA:</Text>
+
+					<Text v-if="price.value" size="12" weight="600" noWrap :class="$style.value"> ${{ price.value.toFixed(2) }} </Text>
+					<Skeleton v-else w="36" h="12" />
+				</Flex>
+
+				<Flex v-if="price.diff" align="center" gap="4">
+					<Icon v-if="price.side === 'rise'" name="arrow-circle-right-up" size="12" color="neutral-green" />
+					<Icon v-else name="arrow-circle-right-down" size="12" color="secondary" />
+
+					<Text size="12" weight="600" :color="price.side === 'rise' ? 'neutral-green' : 'secondary'" noWrap>
+						{{ price.diff.toFixed(2) }}%</Text
+					>
+				</Flex>
+				<Skeleton v-else w="50" h="12" />
+			</Flex>
 		</Flex>
 	</Flex>
 </template>
diff --git a/services/api/stats.js b/services/api/stats.js
index dfe9fd7f..10102c22 100644
--- a/services/api/stats.js
+++ b/services/api/stats.js
@@ -38,6 +38,28 @@ export const fetchTPS = async () => {
 	}
 }
 
+export const fetchPrice = async () => {
+	try {
+		const url = new URL(`${useServerURL()}/stats/price/current`)
+
+		const data = await $fetch(url.href)
+		return data
+	} catch (error) {
+		console.error(error)
+	}
+}
+
+export const fetchPriceSeries = async () => {
+	try {
+		const url = new URL(`${useServerURL()}/stats/price/series/1d`)
+
+		const data = await $fetch(url.href)
+		return data
+	} catch (error) {
+		console.error(error)
+	}
+}
+
 export const fetchNamespaceUsage = async ({ top }) => {
 	try {
 		const url = new URL(`${useServerURL()}/stats/namespace/usage`)

From b6cf2f2cda64e11a27e60c4e113d32dfd99c4afb Mon Sep 17 00:00:00 2001
From: xdeq <celldwellerq@gmail.com>
Date: Mon, 29 Jan 2024 04:04:31 +0300
Subject: [PATCH 25/41] feat: connect wallet test

---
 assets/icons.json        |  1 +
 assets/styles/base.scss  |  2 +-
 components/TheHeader.vue | 23 +++++++++++++++++++----
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/assets/icons.json b/assets/icons.json
index 8257c038..72c3c461 100644
--- a/assets/icons.json
+++ b/assets/icons.json
@@ -68,6 +68,7 @@
 	"arrow-right": "M12.7071 4.29289C12.3166 3.90237 11.6834 3.90237 11.2929 4.29289C10.9024 4.68342 10.9024 5.31658 11.2929 5.70711L16.5858 11H5C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13H16.5858L11.2929 18.2929C10.9024 18.6834 10.9024 19.3166 11.2929 19.7071C11.6834 20.0976 12.3166 20.0976 12.7071 19.7071L19.7071 12.7071C20.0976 12.3166 20.0976 11.6834 19.7071 11.2929L12.7071 4.29289Z",
 	"arrow-right-stop": "M22 3C22 2.44772 21.5523 2 21 2C20.4477 2 20 2.44772 20 3V21C20 21.5523 20.4477 22 21 22C21.5523 22 22 21.5523 22 21V3ZM3 11C2.44772 11 2 11.4477 2 12C2 12.5523 2.44772 13 3 13H14.5858L9.29289 18.2929C8.90237 18.6834 8.90237 19.3166 9.29289 19.7071C9.68342 20.0976 10.3166 20.0976 10.7071 19.7071L17.7071 12.7071C17.8946 12.5196 18 12.2652 18 12C18 11.7348 17.8946 11.4804 17.7071 11.2929L10.7071 4.29289C10.3166 3.90237 9.68342 3.90237 9.29289 4.29289C8.90237 4.68342 8.90237 5.31658 9.29289 5.70711L14.5858 11H3Z",
 	"arrow-back": "M9.70711 4.70711C10.0976 4.31658 10.0976 3.68342 9.70711 3.29289C9.31658 2.90237 8.68342 2.90237 8.29289 3.29289L3.29289 8.29289C2.90237 8.68342 2.90237 9.31658 3.29289 9.70711L8.29289 14.7071C8.68342 15.0976 9.31658 15.0976 9.70711 14.7071C10.0976 14.3166 10.0976 13.6834 9.70711 13.2929L6.41421 10H10.4C12.0967 10 13.309 10.0008 14.2594 10.0784C15.198 10.1551 15.7927 10.3018 16.27 10.545C17.2108 11.0243 17.9757 11.7892 18.455 12.73C18.6982 13.2073 18.8449 13.802 18.9216 14.7406C18.9992 15.691 19 16.9033 19 18.6V20C19 20.5523 19.4477 21 20 21C20.5523 21 21 20.5523 21 20V18.5556C21 16.913 21 15.6191 20.9149 14.5778C20.8281 13.5154 20.6478 12.6283 20.237 11.8221C19.5659 10.5049 18.4951 9.43407 17.1779 8.76295C16.3717 8.35217 15.4846 8.17186 14.4222 8.08507C13.3809 7.99999 12.087 7.99999 10.4444 8H6.41421L9.70711 4.70711Z",
+	"arrow-circle-broken-right": "M1.33989 14.7243C1.21271 14.2251 1.14912 13.9755 1.23096 13.7077C1.29628 13.494 1.47698 13.2615 1.66795 13.1454C1.90726 13 2.20332 13 2.79544 13H13.5857L11.2928 15.2929C10.9023 15.6834 10.9023 16.3166 11.2928 16.7071C11.6833 17.0976 12.3165 17.0976 12.707 16.7071L16.707 12.7071C17.0976 12.3166 17.0976 11.6834 16.707 11.2929L12.707 7.29289C12.3165 6.90237 11.6833 6.90237 11.2928 7.29289C10.9023 7.68342 10.9023 8.31658 11.2928 8.70711L13.5857 11H2.79544C2.20332 11 1.90726 11 1.66795 10.8546C1.47698 10.7385 1.29628 10.506 1.23096 10.2923C1.14912 10.0245 1.21271 9.77489 1.33989 9.27574C2.55203 4.51831 6.86511 1 11.9999 1C18.0751 1 22.9999 5.92487 22.9999 12C22.9999 18.0751 18.0751 23 11.9999 23C6.86511 23 2.55203 19.4817 1.33989 14.7243Z",
 	"arrow-circle-right-up": "M 4.222 19.778 C 8.518 24.074 15.482 24.074 19.778 19.778 C 24.074 15.482 24.074 8.518 19.778 4.222 C 15.482 -0.074 8.518 -0.074 4.222 4.222 C -0.074 8.518 -0.074 15.482 4.222 19.778 Z M 8.464 15.536 C 8.276 15.348 8.171 15.094 8.171 14.829 C 8.171 14.563 8.276 14.309 8.464 14.121 L 12.414 10.171 L 9.172 10.171 C 8.62 10.171 8.172 9.723 8.172 9.171 C 8.172 8.619 8.62 8.171 9.172 8.171 L 14.828 8.171 C 15.38 8.171 15.828 8.619 15.828 9.171 L 15.828 14.828 C 15.828 15.38 15.38 15.828 14.828 15.828 C 14.276 15.828 13.828 15.38 13.828 14.828 L 13.828 11.586 L 9.878 15.536 C 9.488 15.926 8.854 15.926 8.464 15.536 Z",
 	"arrow-circle-right-down": "M4.22183 4.22183C-0.0739431 8.51759 -0.0739431 15.4824 4.22183 19.7782C8.51759 24.0739 15.4824 24.0739 19.7782 19.7782C24.0739 15.4824 24.0739 8.51759 19.7782 4.22183C15.4824 -0.0739431 8.51759 -0.0739431 4.22183 4.22183ZM8.46447 8.46447C8.85499 8.07394 9.48816 8.07394 9.87868 8.46447L13.8284 12.4142V9.17157C13.8284 8.61929 14.2761 8.17157 14.8284 8.17157C15.3807 8.17157 15.8284 8.61929 15.8284 9.17157V14.8284C15.8284 15.3807 15.3807 15.8284 14.8284 15.8284H9.17157C8.61929 15.8284 8.17157 15.3807 8.17157 14.8284C8.17157 14.2761 8.61929 13.8284 9.17157 13.8284H12.4142L8.46447 9.87868C8.07394 9.48816 8.07394 8.85499 8.46447 8.46447Z",
 	"dots": "M5 10C3.89543 10 3 10.8954 3 12C3 13.1046 3.89543 14 5 14C6.10457 14 7 13.1046 7 12C7 10.8954 6.10457 10 5 10ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM17 12C17 10.8954 17.8954 10 19 10C20.1046 10 21 10.8954 21 12C21 13.1046 20.1046 14 19 14C17.8954 14 17 13.1046 17 12Z",
diff --git a/assets/styles/base.scss b/assets/styles/base.scss
index 61bab658..c37c8279 100644
--- a/assets/styles/base.scss
+++ b/assets/styles/base.scss
@@ -32,7 +32,7 @@ $grayscale: (
 
 	/* General */
 	--brand: #924dff;
-	--blue: #0b84fe;
+	--blue: #076acd;
 	--red: #eb5757;
 	--orange: #ff5a17;
 	--light-orange: #ff8351;
diff --git a/components/TheHeader.vue b/components/TheHeader.vue
index 2da83d6b..4029e3cc 100644
--- a/components/TheHeader.vue
+++ b/components/TheHeader.vue
@@ -25,6 +25,14 @@ const showPopup = ref(false)
 
 const head = computed(() => appStore.head)
 
+const featurePreviewMode = ref(false)
+const isWalletAvailable = ref(false)
+
+onMounted(() => {
+	featurePreviewMode.value = localStorage.featurePreview
+	isWalletAvailable.value = !!window.keplr
+})
+
 watch(
 	() => showPopup.value,
 	() => {
@@ -64,6 +72,10 @@ const isActive = (link) => {
 const handleNavigate = (url) => {
 	window.location.replace(url)
 }
+
+const handleConnect = () => {
+	window.keplr.enable("celestia")
+}
 </script>
 
 <template>
@@ -105,7 +117,7 @@ const handleNavigate = (url) => {
 				</NuxtLink>
 			</Flex>
 
-			<Flex align="center" gap="12">
+			<Flex align="center" gap="8">
 				<Dropdown>
 					<Tooltip v-if="head" position="end">
 						<Flex align="center" gap="8" :class="[$style.network]">
@@ -117,7 +129,6 @@ const handleNavigate = (url) => {
 							<Text color="primary"><template v-if="!head.synced">Not</template> Synced </Text>
 						</template>
 					</Tooltip>
-					<Skeleton v-else w="68" h="12" />
 
 					<template #popup>
 						<DropdownTitle>Network</DropdownTitle>
@@ -142,6 +153,10 @@ const handleNavigate = (url) => {
 						</Flex>
 					</template>
 				</Tooltip>
+
+				<Button v-if="featurePreviewMode" @click="handleConnect" type="white" size="small" :disabled="!isWalletAvailable">
+					Connect
+				</Button>
 			</Flex>
 		</Flex>
 
@@ -297,8 +312,8 @@ const handleNavigate = (url) => {
 	height: 28px;
 
 	border-radius: 8px;
-	background: linear-gradient(var(--op-10), var(--op-3));
-	box-shadow: inset 0 0 0 1px var(--op-10), 0 2px 8px rgba(0, 0, 0, 8%);
+	background: var(--op-5);
+	box-shadow: inset 0 0 0 1px var(--op-5);
 
 	padding: 0 12px;
 

From 06ed20d5ada5a45b3bdbbb324fe627f00254773c Mon Sep 17 00:00:00 2001
From: xdeq <celldwellerq@gmail.com>
Date: Mon, 29 Jan 2024 16:47:57 +0300
Subject: [PATCH 26/41] feat: heatmap for gas price

---
 components/modules/gas/GasPriceChart.vue   |  89 ++-------
 components/modules/gas/GasPriceHeatmap.vue | 165 +++++++++++++++++
 components/widgets/GasWidget.vue           |   2 +-
 pages/gas.vue                              | 201 +++++++++++++++------
 4 files changed, 326 insertions(+), 131 deletions(-)
 create mode 100644 components/modules/gas/GasPriceHeatmap.vue

diff --git a/components/modules/gas/GasPriceChart.vue b/components/modules/gas/GasPriceChart.vue
index a5744c9a..09b88abc 100644
--- a/components/modules/gas/GasPriceChart.vue
+++ b/components/modules/gas/GasPriceChart.vue
@@ -4,30 +4,15 @@ import { DateTime } from "luxon"
 import * as d3 from "d3"
 import { useDebounceFn } from "@vueuse/core"
 
-/** UI */
-import { Dropdown, DropdownItem } from "@/components/ui/Dropdown"
-import Button from "@/components/ui/Button.vue"
-
 /** Services */
 import { truncate } from "@/services/utils"
 
 /** API */
 import { fetchGasPriceSeries } from "@/services/api/gas"
 
-const selectedPeriodIdx = ref(0)
-const periods = ref([
-	{
-		title: "24 hours",
-		value: 24,
-		timeframe: "hour",
-	},
-	{
-		title: "31 days",
-		value: 30,
-		timeframe: "day",
-	},
-])
-const selectedPeriod = computed(() => periods.value[selectedPeriodIdx.value])
+const props = defineProps({
+	selectedPeriod: Object,
+})
 
 /** Chart El */
 const chartWrapperEl = ref()
@@ -91,14 +76,14 @@ const buildChart = (chartEl, data, onEnter, onLeave) => {
 		}
 
 		badgeText.value =
-			selectedPeriod.value.timeframe === "day"
+			props.selectedPeriod.timeframe === "day"
 				? DateTime.fromJSDate(data[idx].date).toFormat("LLL dd")
 				: DateTime.fromJSDate(data[idx].date).set({ minutes: 0 }).toFormat("hh:mm a")
 
 		if (!badgeEl.value) return
 		if (idx < 1) {
 			badgeOffset.value = 0
-		} else if (idx > selectedPeriod.value.value - 2) {
+		} else if (idx > props.selectedPeriod.value - 2) {
 			badgeOffset.value = badgeEl.value.getBoundingClientRect().width
 		} else {
 			badgeOffset.value = badgeEl.value.getBoundingClientRect().width / 2
@@ -172,34 +157,34 @@ const getGasPriceSeries = async () => {
 	gasPriceSeries.value = []
 
 	const sizeSeriesRawData = await fetchGasPriceSeries({
-		timeframe: selectedPeriod.value.timeframe,
+		timeframe: props.selectedPeriod.timeframe,
 		to: parseInt(DateTime.now().plus({ minutes: 1 }).ts / 1_000),
 		from: parseInt(
 			DateTime.now()
 				.set({ minutes: 0, seconds: 0 })
 				.minus({
-					days: selectedPeriod.value.timeframe === "day" ? selectedPeriod.value.value : 0,
-					hours: selectedPeriod.value.timeframe === "hour" ? selectedPeriod.value.value - 1 : 0,
+					days: props.selectedPeriod.timeframe === "day" ? props.selectedPeriod.value : 0,
+					hours: props.selectedPeriod.timeframe === "hour" ? props.selectedPeriod.value - 1 : 0,
 				}).ts / 1_000,
 		),
 	})
 
 	const gasPriceSeriesMap = {}
 	sizeSeriesRawData.forEach((item) => {
-		gasPriceSeriesMap[DateTime.fromISO(item.time).toFormat(selectedPeriod.value.timeframe === "day" ? "y-LL-dd" : "y-LL-dd-HH")] =
+		gasPriceSeriesMap[DateTime.fromISO(item.time).toFormat(props.selectedPeriod.timeframe === "day" ? "y-LL-dd" : "y-LL-dd-HH")] =
 			item.value
 	})
 
-	for (let i = 1; i < selectedPeriod.value.value + 1; i++) {
+	for (let i = 1; i < props.selectedPeriod.value + 1; i++) {
 		const dt = DateTime.now()
 			.set({ minutes: 0, seconds: 0 })
 			.minus({
-				days: selectedPeriod.value.timeframe === "day" ? selectedPeriod.value.value - i : 0,
-				hours: selectedPeriod.value.timeframe === "hour" ? selectedPeriod.value.value - i : 0,
+				days: props.selectedPeriod.timeframe === "day" ? props.selectedPeriod.value - i : 0,
+				hours: props.selectedPeriod.timeframe === "hour" ? props.selectedPeriod.value - i : 0,
 			})
 		gasPriceSeries.value.push({
 			date: dt.toJSDate(),
-			value: parseFloat(gasPriceSeriesMap[dt.toFormat(selectedPeriod.value.timeframe === "day" ? "y-LL-dd" : "y-LL-dd-HH")]) || 0,
+			value: parseFloat(gasPriceSeriesMap[dt.toFormat(props.selectedPeriod.timeframe === "day" ? "y-LL-dd" : "y-LL-dd-HH")]) || 0,
 		})
 	}
 }
@@ -215,7 +200,7 @@ const buildGasTrackingCharts = async () => {
 }
 
 watch(
-	() => selectedPeriodIdx.value,
+	() => props.selectedPeriod,
 	() => {
 		buildGasTrackingCharts()
 	},
@@ -238,44 +223,6 @@ onBeforeUnmount(() => {
 
 <template>
 	<Flex direction="column" gap="24" wide>
-		<Flex align="start" justify="between">
-			<Flex align="center" gap="6">
-				<Icon name="chart" size="13" color="primary" />
-				<Text size="13" weight="600" color="primary">Average Gas Price</Text>
-			</Flex>
-
-			<Flex align="center" gap="8">
-				<Dropdown>
-					<Button size="mini" type="secondary">
-						<Icon name="chart" size="12" color="primary" />
-						<Text color="primary">Line</Text>
-						<Icon name="chevron" size="12" color="secondary" />
-					</Button>
-
-					<template #popup>
-						<DropdownItem> Line Chart </DropdownItem>
-						<DropdownItem disabled> Heatmap </DropdownItem>
-					</template>
-				</Dropdown>
-
-				<Dropdown>
-					<Button size="mini" type="secondary">
-						{{ selectedPeriod.title }}
-						<Icon name="chevron" size="12" color="secondary" />
-					</Button>
-
-					<template #popup>
-						<DropdownItem v-for="(period, idx) in periods" @click="selectedPeriodIdx = idx">
-							<Flex align="center" gap="8">
-								<Icon :name="idx === selectedPeriodIdx ? 'check' : ''" size="12" color="secondary" />
-								{{ period.title }}
-							</Flex>
-						</DropdownItem>
-					</template>
-				</Dropdown>
-			</Flex>
-		</Flex>
-
 		<Flex ref="chartWrapperEl" direction="column" :class="$style.chart_wrapper">
 			<Flex direction="column" justify="between" :class="[$style.axis, $style.y]">
 				<Text v-if="gasPriceSeries.length" size="12" weight="600" color="tertiary">
@@ -294,23 +241,23 @@ onBeforeUnmount(() => {
 
 			<Flex :class="[$style.axis, $style.x]">
 				<Flex align="end" justify="between" wide>
-					<Text v-if="selectedPeriod.timeframe === 'day'" size="12" weight="600" color="tertiary">
+					<Text v-if="props.selectedPeriod.timeframe === 'day'" size="12" weight="600" color="tertiary">
 						{{
 							DateTime.now()
-								.minus({ days: selectedPeriod.value - 1 })
+								.minus({ days: props.selectedPeriod.value - 1 })
 								.toFormat("LLL dd")
 						}}
 					</Text>
 					<Text v-else size="12" weight="600" color="tertiary">
 						{{
 							DateTime.now()
-								.minus({ hours: selectedPeriod.value - 1 })
+								.minus({ hours: props.selectedPeriod.value - 1 })
 								.set({ minutes: 0 })
 								.toFormat("hh:mm a")
 						}}
 					</Text>
 
-					<Text size="12" weight="600" color="tertiary">{{ selectedPeriod.timeframe === "day" ? "Today" : "Now" }}</Text>
+					<Text size="12" weight="600" color="tertiary">{{ props.selectedPeriod.timeframe === "day" ? "Today" : "Now" }}</Text>
 				</Flex>
 			</Flex>
 
diff --git a/components/modules/gas/GasPriceHeatmap.vue b/components/modules/gas/GasPriceHeatmap.vue
new file mode 100644
index 00000000..2b59c88b
--- /dev/null
+++ b/components/modules/gas/GasPriceHeatmap.vue
@@ -0,0 +1,165 @@
+<script setup>
+/** Vendor */
+import { DateTime } from "luxon"
+
+/** UI */
+import Tooltip from "@/components/ui/Tooltip.vue"
+
+/** API */
+import { fetchGasPriceSeries } from "@/services/api/gas"
+
+const props = defineProps({
+	selectedPeriod: Object,
+})
+
+const seriesByDay = ref({})
+
+const maxValue = ref(0)
+
+onMounted(async () => {
+	let rawSeries = []
+
+	const data = await fetchGasPriceSeries({
+		timeframe: props.selectedPeriod.timeframe,
+		to: parseInt(DateTime.now().plus({ minutes: 1 }).ts / 1_000),
+		from: parseInt(DateTime.now().set({ minutes: 0, seconds: 0 }).minus({ days: 4 }).ts / 1_000),
+	})
+	const data1 = await fetchGasPriceSeries({
+		timeframe: props.selectedPeriod.timeframe,
+		to: parseInt(DateTime.now().minus({ days: 4 }).ts / 1_000),
+		from: parseInt(DateTime.now().set({ minutes: 0, seconds: 0 }).minus({ days: 7 }).ts / 1_000),
+	})
+
+	rawSeries = [...data, ...data1.slice(1, data1.length)]
+
+	maxValue.value = Math.max(...rawSeries.map((i) => i.value))
+
+	for (let idx = 0; idx < 7; idx++) {
+		seriesByDay.value[DateTime.now().minus({ days: idx }).toFormat("d")] = []
+	}
+
+	rawSeries.forEach((d) => {
+		seriesByDay.value[DateTime.fromISO(d.time).toFormat("d")]?.push(d)
+	})
+
+	Object.keys(seriesByDay.value).forEach((d) => {
+		if (seriesByDay.value[d].length !== 24) {
+			while (seriesByDay.value[d].length !== 24) {
+				seriesByDay.value[d].push({
+					time: DateTime.fromISO(seriesByDay.value[d][seriesByDay.value[d].length - 1].time).toISO(),
+					value: 0,
+				})
+			}
+		}
+	})
+})
+</script>
+
+<template>
+	<div :class="$style.wrapper">
+		<table>
+			<thead>
+				<tr>
+					<th v-for="hourIdx in 24">
+						<Text size="12" weight="600" color="support">
+							{{
+								DateTime.now()
+									.set({ hours: hourIdx - 1, minutes: 0 })
+									.toFormat("HH")
+							}}
+						</Text>
+					</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr v-for="dayIdx in 7">
+					<td
+						v-for="hour in seriesByDay[
+							DateTime.now()
+								.minus({ days: dayIdx - 1 })
+								.toFormat('d')
+						]"
+						:class="[!hour.value && $style.not_available]"
+						:style="{ opacity: `${hour.value / maxValue}` }"
+					>
+						<Tooltip :disabled="!hour.value">
+							<div :class="$style.inner" />
+
+							<template #content>
+								<Flex direction="column" gap="8">
+									<Flex align="center" gap="12" justify="between" wide>
+										<Text color="secondary">Gas Price</Text>
+										<Text color="primary">{{ parseFloat(hour.value).toFixed(4) }} UTIA</Text>
+									</Flex>
+									<Flex align="center" gap="12" justify="between" wide>
+										<Text color="secondary">Time</Text>
+										<Text color="primary">{{ DateTime.fromISO(hour.time).setLocale("en").toFormat("ff") }}</Text>
+									</Flex>
+								</Flex>
+							</template>
+						</Tooltip>
+					</td>
+					<th>
+						<Text size="12" weight="600" color="tertiary">
+							{{
+								DateTime.now()
+									.minus({ days: dayIdx - 1 })
+									.toFormat("d")
+							}}
+						</Text>
+					</th>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+</template>
+
+<style module>
+.wrapper {
+	height: 180px;
+
+	overflow: auto;
+
+	& table {
+		width: 100%;
+		border-spacing: 0;
+
+		& thead {
+			& tr th {
+				width: 22px;
+
+				padding: 2px 0;
+			}
+		}
+
+		& tbody {
+			& tr td {
+				background: var(--neutral-green);
+				border: 1px solid var(--card-background);
+			}
+
+			& tr td.not_available {
+				opacity: 0;
+			}
+
+			& tr td:hover {
+				outline: 1px solid #fff;
+			}
+
+			& tr th {
+				position: sticky;
+				right: 0;
+
+				background: var(--card-background);
+
+				padding: 0 4px;
+			}
+		}
+	}
+}
+
+.inner {
+	width: 18px;
+	height: 16px;
+}
+</style>
diff --git a/components/widgets/GasWidget.vue b/components/widgets/GasWidget.vue
index bd130cd3..29347b71 100644
--- a/components/widgets/GasWidget.vue
+++ b/components/widgets/GasWidget.vue
@@ -21,7 +21,7 @@ onMounted(async () => {
 		<Flex align="center" justify="between">
 			<Flex align="center" gap="6">
 				<Icon name="gas" size="12" color="secondary" />
-				<Text size="13" weight="600" height="110" color="primary">Gas Tracker</Text>
+				<Text size="13" weight="600" height="110" color="primary">Gas Price Tracker</Text>
 			</Flex>
 
 			<Tooltip side="top" position="end" width="150">
diff --git a/pages/gas.vue b/pages/gas.vue
index 18b464aa..9237ac54 100644
--- a/pages/gas.vue
+++ b/pages/gas.vue
@@ -1,10 +1,12 @@
 <script setup>
 /** Modules */
 import GasPriceChart from "@/components/modules/gas/GasPriceChart.vue"
+import GasPriceHeatmap from "@/components/modules/gas/GasPriceHeatmap.vue"
 import GasEfficiencyChart from "@/components/modules/gas/GasEfficiencyChart.vue"
 
-/** Services */
-import { truncate } from "@/services/utils"
+/** UI */
+import { Dropdown, DropdownItem } from "@/components/ui/Dropdown"
+import Button from "@/components/ui/Button.vue"
 
 /** API */
 import { fetchGasPrice } from "@/services/api/gas"
@@ -13,6 +15,33 @@ const route = useRoute()
 
 const gasPrice = ref({})
 
+const visualizations = ref([
+	{
+		title: "Line Chart",
+		value: "line",
+	},
+	{
+		title: "Heatmap",
+		value: "heatmap",
+	},
+])
+const selectedVisualization = ref(visualizations.value[0].value)
+
+const selectedPeriodIdx = ref(0)
+const periods = ref([
+	{
+		title: "24 hours",
+		value: 24,
+		timeframe: "hour",
+	},
+	{
+		title: "31 days",
+		value: 30,
+		timeframe: "day",
+	},
+])
+const selectedPeriod = computed(() => periods.value[selectedPeriodIdx.value])
+
 onMounted(async () => {
 	const data = await fetchGasPrice()
 	gasPrice.value = data
@@ -83,64 +112,67 @@ useHead({
 
 			<Flex gap="4" :class="$style.content">
 				<Flex direction="column" justify="between" gap="20" :class="$style.left">
-					<Flex justify="between" wide>
-						<Flex direction="column" gap="8">
-							<Flex align="center" gap="8">
-								<Icon name="gas_fast" size="12" color="green" />
-								<Text size="12" weight="600" color="secondary">Fast</Text>
-							</Flex>
-
-							<Flex align="center" gap="8">
-								<Text v-if="gasPrice.fast" size="13" weight="600" color="primary">
-									{{
-										Number(gasPrice.fast)
-											.toFixed(3)
-											.replace(/\.?0*$/, "")
-									}}
-									UTIA
-								</Text>
-								<Skeleton v-else w="50" h="13" />
-								<CopyButton :text="gasPrice.fast" />
-							</Flex>
-						</Flex>
-
-						<Flex direction="column" gap="8">
-							<Flex align="center" gap="8">
-								<Icon name="gas_median" size="12" color="yellow" />
-								<Text size="12" weight="600" color="secondary">Median</Text>
-							</Flex>
-
-							<Flex align="center" gap="8">
-								<Text v-if="gasPrice.fast" size="13" weight="600" color="primary">
-									{{
-										Number(gasPrice.median)
-											.toFixed(3)
-											.replace(/\.?0*$/, "")
-									}}
-									UTIA
-								</Text>
-								<Skeleton v-else w="50" h="13" />
-								<CopyButton :text="gasPrice.median" />
+					<Flex direction="column" gap="16">
+						<Text size="12" weight="600" color="primary">Gas Price</Text>
+						<Flex justify="between" wide>
+							<Flex direction="column" gap="8">
+								<Flex align="center" gap="8">
+									<Icon name="gas_fast" size="12" color="green" />
+									<Text size="12" weight="600" color="secondary">Fast</Text>
+								</Flex>
+
+								<Flex align="center" gap="8">
+									<Text v-if="gasPrice.fast" size="13" weight="600" color="primary">
+										{{
+											Number(gasPrice.fast)
+												.toFixed(3)
+												.replace(/\.?0*$/, "")
+										}}
+										UTIA
+									</Text>
+									<Skeleton v-else w="50" h="13" />
+									<CopyButton :text="gasPrice.fast" />
+								</Flex>
 							</Flex>
-						</Flex>
 
-						<Flex direction="column" gap="8">
-							<Flex align="center" gap="8">
-								<Icon name="gas_slow" size="14" color="secondary" />
-								<Text size="12" weight="600" color="secondary">Slow</Text>
+							<Flex direction="column" gap="8">
+								<Flex align="center" gap="8">
+									<Icon name="gas_median" size="12" color="yellow" />
+									<Text size="12" weight="600" color="secondary">Median</Text>
+								</Flex>
+
+								<Flex align="center" gap="8">
+									<Text v-if="gasPrice.fast" size="13" weight="600" color="primary">
+										{{
+											Number(gasPrice.median)
+												.toFixed(3)
+												.replace(/\.?0*$/, "")
+										}}
+										UTIA
+									</Text>
+									<Skeleton v-else w="50" h="13" />
+									<CopyButton :text="gasPrice.median" />
+								</Flex>
 							</Flex>
 
-							<Flex align="center" gap="8">
-								<Text v-if="gasPrice.fast" size="13" weight="600" color="primary">
-									{{
-										Number(gasPrice.slow)
-											.toFixed(3)
-											.replace(/\.?0*$/, "")
-									}}
-									UTIA
-								</Text>
-								<Skeleton v-else w="50" h="13" />
-								<CopyButton :text="gasPrice.slow" />
+							<Flex direction="column" gap="8">
+								<Flex align="center" gap="8">
+									<Icon name="gas_slow" size="14" color="secondary" />
+									<Text size="12" weight="600" color="secondary">Slow</Text>
+								</Flex>
+
+								<Flex align="center" gap="8">
+									<Text v-if="gasPrice.fast" size="13" weight="600" color="primary">
+										{{
+											Number(gasPrice.slow)
+												.toFixed(3)
+												.replace(/\.?0*$/, "")
+										}}
+										UTIA
+									</Text>
+									<Skeleton v-else w="50" h="13" />
+									<CopyButton :text="gasPrice.slow" />
+								</Flex>
 							</Flex>
 						</Flex>
 					</Flex>
@@ -160,9 +192,59 @@ useHead({
 				</Flex>
 
 				<Flex direction="column" gap="4" :class="$style.charts">
-					<div :class="$style.card">
-						<GasPriceChart />
-					</div>
+					<Flex direction="column" gap="16" :class="$style.card">
+						<Flex align="start" justify="between">
+							<Flex align="center" gap="6">
+								<Icon name="chart" size="13" color="primary" />
+								<Text size="13" weight="600" color="primary">Average Gas Price</Text>
+							</Flex>
+
+							<Flex align="center" gap="8">
+								<Dropdown>
+									<Button size="mini" type="secondary">
+										<Icon name="chart" size="12" color="primary" />
+										<Text color="primary" style="text-transform: capitalize">{{ selectedVisualization }}</Text>
+										<Icon name="chevron" size="12" color="secondary" />
+									</Button>
+
+									<template #popup>
+										<DropdownItem
+											v-for="visualization in visualizations"
+											@click="selectedVisualization = visualization.value"
+										>
+											<Flex align="center" gap="8">
+												<Icon
+													:name="visualization.value === selectedVisualization ? 'check' : ''"
+													size="12"
+													color="secondary"
+												/>
+												{{ visualization.title }}
+											</Flex>
+										</DropdownItem>
+									</template>
+								</Dropdown>
+
+								<Dropdown :disabled="selectedVisualization === 'heatmap'">
+									<Button size="mini" type="secondary" :disabled="selectedVisualization === 'heatmap'">
+										{{ selectedPeriod.title }}
+										<Icon name="chevron" size="12" color="secondary" />
+									</Button>
+
+									<template #popup>
+										<DropdownItem v-for="(period, idx) in periods" @click="selectedPeriodIdx = idx">
+											<Flex align="center" gap="8">
+												<Icon :name="idx === selectedPeriodIdx ? 'check' : ''" size="12" color="secondary" />
+												{{ period.title }}
+											</Flex>
+										</DropdownItem>
+									</template>
+								</Dropdown>
+							</Flex>
+						</Flex>
+
+						<GasPriceChart v-if="selectedVisualization === 'line'" :selectedPeriod="selectedPeriod" />
+						<GasPriceHeatmap v-else-if="selectedVisualization === 'heatmap'" :selectedPeriod="selectedPeriod" />
+					</Flex>
 
 					<div :class="$style.card">
 						<GasEfficiencyChart />
@@ -210,6 +292,7 @@ useHead({
 
 .charts {
 	width: 100%;
+	min-width: 0;
 }
 
 .card {

From 348062d0cd6f1d0a88c8249d63c828d138525997 Mon Sep 17 00:00:00 2001
From: xdeq <celldwellerq@gmail.com>
Date: Mon, 29 Jan 2024 17:00:03 +0300
Subject: [PATCH 27/41] feat(CommandMenu): clear bookmarks

---
 components/cmd/CommandMenu.vue | 45 +++++++++++++++++++++++++++++++++-
 store/bookmarks.js             |  8 +++++-
 2 files changed, 51 insertions(+), 2 deletions(-)

diff --git a/components/cmd/CommandMenu.vue b/components/cmd/CommandMenu.vue
index d259338b..6ed9df9a 100644
--- a/components/cmd/CommandMenu.vue
+++ b/components/cmd/CommandMenu.vue
@@ -23,10 +23,12 @@ import { search } from "@/services/api/search"
 import { useAppStore } from "@/store/app"
 import { useCacheStore } from "@/store/cache"
 import { useModalsStore } from "@/store/modals"
+import { useBookmarksStore } from "@/store/bookmarks"
 import { useNotificationsStore } from "@/store/notifications"
 const appStore = useAppStore()
 const cacheStore = useCacheStore()
 const modalsStore = useModalsStore()
+const bookmarksStore = useBookmarksStore()
 const notificationsStore = useNotificationsStore()
 
 const appConfig = useAppConfig()
@@ -490,7 +492,7 @@ const rawDeveloperActions = [
 		callback: () => {
 			appStore.createConfirmation({
 				title: `Do you want to clear local storage?`,
-				description: "Your local storage will be cleared",
+				description: "Your local storage will be cleared (including bookmarks)",
 
 				buttons: {
 					confirm: {
@@ -521,6 +523,47 @@ const rawDeveloperActions = [
 			})
 		},
 	},
+	{
+		type: "callback",
+		icon: "bookmark-plus",
+		title: "Clear bookmarks",
+		subtitle: "Command",
+		runText: "Clear",
+		callback: () => {
+			appStore.createConfirmation({
+				title: `Do you want to clear your bookmarks?`,
+				description: "Your local storage for bookmarks will be cleared",
+
+				buttons: {
+					confirm: {
+						title: "Yes, clear",
+					},
+					cancel: {
+						title: "Cancel",
+					},
+				},
+
+				confirmCb: () => {
+					localStorage.removeItem("bookmarks")
+					bookmarksStore.clearBookmarks()
+
+					notificationsStore.create({
+						notification: {
+							type: "info",
+							icon: "check",
+							title: `Your bookmarks successfully cleared`,
+							autoDestroy: true,
+						},
+					})
+
+					modalsStore.close("confirmation")
+				},
+				cancelCb: () => {
+					modalsStore.close("confirmation")
+				},
+			})
+		},
+	},
 	{
 		type: "callback",
 		icon: "settings",
diff --git a/store/bookmarks.js b/store/bookmarks.js
index fb05cf13..39a8f606 100644
--- a/store/bookmarks.js
+++ b/store/bookmarks.js
@@ -15,7 +15,13 @@ export const useBookmarksStore = defineStore("bookmarks", () => {
 			.slice(0, 3)
 	})
 
-	return { bookmarks, recentBookmarks }
+	const clearBookmarks = () => {
+		Object.keys(bookmarks.value).forEach((b) => {
+			bookmarks.value[b] = []
+		})
+	}
+
+	return { bookmarks, recentBookmarks, clearBookmarks }
 })
 
 if (import.meta.hot) {

From e5ca1a1f2e64d8eba4be2a6507a94b7cc15bc58e Mon Sep 17 00:00:00 2001
From: xdeq <celldwellerq@gmail.com>
Date: Mon, 29 Jan 2024 19:13:19 +0300
Subject: [PATCH 28/41] feat(bookmarks): import & export & merge effect

---
 assets/icons.json                             |   3 +
 components/modals/ImportBookmarksModal.vue    | 203 ++++++++++++++++++
 components/modals/ModalsManager.vue           |   2 +
 components/modules/bookmarks/BookmarkItem.vue |   4 +-
 components/ui/Modal.vue                       |   2 +-
 components/ui/Toggle.vue                      |  88 ++++++++
 pages/bookmarks.vue                           | 126 +++++++++++
 store/bookmarks.js                            |  12 +-
 store/modals.js                               |   1 +
 9 files changed, 438 insertions(+), 3 deletions(-)
 create mode 100644 components/modals/ImportBookmarksModal.vue
 create mode 100644 components/ui/Toggle.vue

diff --git a/assets/icons.json b/assets/icons.json
index 72c3c461..bc2c06cd 100644
--- a/assets/icons.json
+++ b/assets/icons.json
@@ -15,6 +15,7 @@
 	"select": "M12 1C12.5523 1 13 1.44772 13 2V3.05493C17.1716 3.51608 20.4839 6.82838 20.9451 11H22C22.5523 11 23 11.4477 23 12C23 12.5523 22.5523 13 22 13H20.9451C20.4839 17.1716 17.1716 20.4839 13 20.9451V22C13 22.5523 12.5523 23 12 23C11.4477 23 11 22.5523 11 22V20.9451C6.82838 20.4839 3.51608 17.1716 3.05493 13H2C1.44772 13 1 12.5523 1 12C1 11.4477 1.44772 11 2 11H3.05493C3.51608 6.82838 6.82838 3.51608 11 3.05493V2C11 1.44772 11.4477 1 12 1ZM12 7C9.23858 7 7 9.23858 7 12C7 14.7614 9.23858 17 12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7ZM9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12Z",
 	"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-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",
@@ -34,6 +35,7 @@
 	"plus-circle": "M12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1ZM12 7C12.5523 7 13 7.44772 13 8V11H16C16.5523 11 17 11.4477 17 12C17 12.5523 16.5523 13 16 13H13V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V13H8C7.44772 13 7 12.5523 7 12C7 11.4477 7.44772 11 8 11H11V8C11 7.44772 11.4477 7 12 7Z",
 	"code": "M14.9764 3.21714C15.0962 2.67801 14.7563 2.14383 14.2171 2.02403C13.678 1.90422 13.1438 2.24415 13.024 2.78328L9.02403 20.7833C8.90422 21.3224 9.24416 21.8566 9.78329 21.9764C10.3224 22.0962 10.8566 21.7563 10.9764 21.2171L14.9764 3.21714ZM7.70711 6.29314C8.09763 6.68366 8.09763 7.31683 7.70711 7.70735L3.41421 12.0002L7.70711 16.2931C8.09763 16.6836 8.09763 17.3168 7.70711 17.7073C7.31658 18.0978 6.68342 18.0978 6.29289 17.7073L1.29289 12.7073C0.90237 12.3168 0.90237 11.6836 1.29289 11.2931L6.29289 6.29314C6.68342 5.90261 7.31658 5.90261 7.70711 6.29314ZM16.2929 6.29314C16.6834 5.90261 17.3166 5.90261 17.7071 6.29314L22.7071 11.2931C23.0976 11.6836 23.0976 12.3168 22.7071 12.7073L17.7071 17.7073C17.3166 18.0978 16.6834 18.0978 16.2929 17.7073C15.9024 17.3168 15.9024 16.6836 16.2929 16.2931L20.5858 12.0002L16.2929 7.70735C15.9024 7.31683 15.9024 6.68366 16.2929 6.29314Z",
 	"treemap": "M11 3.6C11 3.03995 11 2.75992 10.891 2.54601C10.7951 2.35785 10.6422 2.20487 10.454 2.10899C10.2401 2 9.96005 2 9.4 2H6.16146C5.63433 1.99998 5.17954 1.99997 4.80497 2.03057C4.40963 2.06287 4.01641 2.13419 3.63803 2.32698C3.07354 2.6146 2.6146 3.07354 2.32698 3.63803C2.13419 4.01641 2.06287 4.40963 2.03057 4.80497C1.99997 5.17954 1.99998 5.63429 2 6.16142V17.8385C1.99998 18.3657 1.99997 18.8205 2.03057 19.195C2.06287 19.5904 2.13419 19.9836 2.32698 20.362C2.6146 20.9265 3.07354 21.3854 3.63803 21.673C4.01641 21.8658 4.40963 21.9371 4.80497 21.9694C5.17954 22 5.6343 22 6.16144 22H9.4C9.96005 22 10.2401 22 10.454 21.891C10.6422 21.7951 10.7951 21.6422 10.891 21.454C11 21.2401 11 20.9601 11 20.4V3.6ZM13 20.4C13 20.9601 13 21.2401 13.109 21.454C13.2049 21.6422 13.3578 21.7951 13.546 21.891C13.7599 22 14.0399 22 14.6 22H17.8386C18.3657 22 18.8205 22 19.195 21.9694C19.5904 21.9371 19.9836 21.8658 20.362 21.673C20.9265 21.3854 21.3854 20.9265 21.673 20.362C21.8658 19.9836 21.9371 19.5904 21.9694 19.195C22 18.8205 22 18.3657 22 17.8386V14.6C22 14.0399 22 13.7599 21.891 13.546C21.7951 13.3578 21.6422 13.2049 21.454 13.109C21.2401 13 20.9601 13 20.4 13H14.6C14.0399 13 13.7599 13 13.546 13.109C13.3578 13.2049 13.2049 13.3578 13.109 13.546C13 13.7599 13 14.0399 13 14.6V20.4ZM21.454 10.891C21.2401 11 20.9601 11 20.4 11H14.6C14.0399 11 13.7599 11 13.546 10.891C13.3578 10.7951 13.2049 10.6422 13.109 10.454C13 10.2401 13 9.96005 13 9.4V3.6C13 3.03995 13 2.75992 13.109 2.54601C13.2049 2.35785 13.3578 2.20487 13.546 2.10899C13.7599 2 14.0399 2 14.6 2H17.8386C18.3657 1.99998 18.8205 1.99997 19.195 2.03057C19.5904 2.06287 19.9836 2.13419 20.362 2.32698C20.9265 2.6146 21.3854 3.07354 21.673 3.63803C21.8658 4.01641 21.9371 4.40963 21.9694 4.80497C22 5.17954 22 5.6343 22 6.16144V9.4C22 9.96005 22 10.2401 21.891 10.454C21.7951 10.6422 21.6422 10.7951 21.454 10.891Z",
+	"trash": "M 15 2 C 15.552 2 16 2.448 16 3 C 16 3.552 15.552 4 15 4 L 9 4 C 8.448 4 8 3.552 8 3 C 8 2.448 8.448 2 9 2 Z M 21 5 C 21.552 5 22 5.448 22 6 C 22 6.552 21.552 7 21 7 L 19.936 7 L 19.294 16.625 L 19.294 16.632 C 19.243 17.385 19.202 18.007 19.128 18.515 C 19.049 19.045 18.926 19.529 18.668 19.98 C 18.268 20.682 17.665 21.247 16.938 21.6 C 16.471 21.826 15.979 21.917 15.445 21.96 C 14.934 22 14.309 22 13.555 22 L 10.445 22 C 9.691 22 9.066 22 8.555 21.96 C 8.021 21.917 7.53 21.826 7.062 21.6 C 6.335 21.247 5.731 20.683 5.331 19.98 C 5.074 19.529 4.951 19.045 4.873 18.515 C 4.798 18.006 4.756 17.381 4.706 16.625 L 4.064 7 L 3 7 C 2.448 7 2 6.552 2 6 C 2 5.448 2.448 5 3 5 Z M 11 10.5 C 11 9.948 10.552 9.5 10 9.5 C 9.448 9.5 9 9.948 9 10.5 L 9 15.5 C 9 16.052 9.448 16.5 10 16.5 C 10.552 16.5 11 16.052 11 15.5 Z M 13 10.5 L 13 15.5 C 13 16.052 13.448 16.5 14 16.5 C 14.552 16.5 15 16.052 15 15.5 L 15 10.5 C 15 9.948 14.552 9.5 14 9.5 C 13.448 9.5 13 9.948 13 10.5 Z",
 	"tx": "M 15.242 1 C 16.046 1 16.71 1 17.252 1.043 C 17.814 1.089 18.331 1.188 18.816 1.435 C 19.569 1.818 20.181 2.43 20.564 3.183 C 20.811 3.668 20.91 4.185 20.956 4.748 C 21 5.288 21 5.953 21 6.758 L 21 17.242 C 21 18.046 21 18.711 20.956 19.252 C 20.91 19.814 20.811 20.331 20.564 20.816 C 20.181 21.569 19.569 22.181 18.816 22.564 C 18.331 22.811 17.814 22.91 17.251 22.956 C 16.711 23 16.046 23 15.241 23 L 8.758 23 C 7.954 23 7.29 23 6.748 22.956 C 6.186 22.91 5.669 22.811 5.184 22.564 C 4.431 22.181 3.819 21.569 3.436 20.816 C 3.189 20.331 3.09 19.814 3.044 19.251 C 3 18.711 3 18.046 3 17.241 L 3 6.758 C 3 5.954 3 5.29 3.045 4.748 C 3.091 4.186 3.19 3.669 3.437 3.184 C 3.82 2.431 4.432 1.819 5.185 1.436 C 5.67 1.189 6.187 1.09 6.75 1.044 C 7.29 1 7.955 1 8.76 1 Z M 8 6 C 7.448 6 7 6.448 7 7 C 7 7.552 7.448 8 8 8 L 16 8 C 16.552 8 17 7.552 17 7 C 17 6.448 16.552 6 16 6 Z M 8 12 L 14 12 C 14.552 12 15 11.552 15 11 C 15 10.448 14.552 10 14 10 L 8 10 C 7.448 10 7 10.448 7 11 C 7 11.552 7.448 12 8 12 Z M 8 16 L 10 16 C 10.552 16 11 15.552 11 15 C 11 14.448 10.552 14 10 14 L 8 14 C 7.448 14 7 14.448 7 15 C 7 15.552 7.448 16 8 16 Z",
 	"tx_success": [
 		{
@@ -74,6 +76,7 @@
 	"dots": "M5 10C3.89543 10 3 10.8954 3 12C3 13.1046 3.89543 14 5 14C6.10457 14 7 13.1046 7 12C7 10.8954 6.10457 10 5 10ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM17 12C17 10.8954 17.8954 10 19 10C20.1046 10 21 10.8954 21 12C21 13.1046 20.1046 14 19 14C17.8954 14 17 13.1046 17 12Z",
 	"stars": "M15 1C15.4138 1 15.7848 1.25483 15.9333 1.64102L17.112 4.70544C17.4124 5.48648 17.5068 5.71155 17.6359 5.89315C17.7654 6.07536 17.9246 6.23455 18.1069 6.36411C18.2884 6.49323 18.5135 6.58763 19.2946 6.88803L22.359 8.06665C22.7452 8.21519 23 8.58623 23 9C23 9.41377 22.7452 9.78481 22.359 9.93335L19.2946 11.112C18.5135 11.4124 18.2884 11.5068 18.1069 11.6359C17.9246 11.7655 17.7655 11.9246 17.6359 12.1069C17.5068 12.2884 17.4124 12.5135 17.112 13.2946L15.9333 16.359C15.7848 16.7452 15.4138 17 15 17C14.5862 17 14.2152 16.7452 14.0667 16.359L12.888 13.2946C12.5876 12.5135 12.4932 12.2884 12.3641 12.1069C12.2345 11.9246 12.0754 11.7655 11.8931 11.6359C11.7116 11.5068 11.4865 11.4124 10.7054 11.112L7.64102 9.93335C7.25483 9.78481 7 9.41377 7 9C7 8.58623 7.25483 8.21519 7.64102 8.06665L10.7054 6.88803C11.4865 6.58763 11.7116 6.49323 11.8931 6.36411C12.0754 6.23455 12.2345 6.07535 12.3641 5.89315C12.4932 5.71155 12.5876 5.48648 12.888 4.70544L14.0667 1.64102C14.2152 1.25483 14.5862 1 15 1ZM6.5 12C6.87877 12 7.22503 12.214 7.39443 12.5528L8.17889 14.1217C8.46137 14.6867 8.54745 14.8493 8.65204 14.9849C8.75695 15.121 8.87896 15.243 9.01506 15.348C9.15075 15.4525 9.31333 15.5386 9.8783 15.8211L11.4472 16.6056C11.786 16.775 12 17.1212 12 17.5C12 17.8788 11.786 18.225 11.4472 18.3944L9.8783 19.1789C9.31333 19.4614 9.15075 19.5475 9.01506 19.652C8.87896 19.757 8.75695 19.879 8.65204 20.0151C8.54745 20.1507 8.46137 20.3133 8.17889 20.8783L7.39443 22.4472C7.22504 22.786 6.87877 23 6.5 23C6.12123 23 5.77497 22.786 5.60557 22.4472L4.82111 20.8783C4.53863 20.3133 4.45255 20.1507 4.34796 20.0151C4.24305 19.879 4.12104 19.757 3.98494 19.652C3.84925 19.5475 3.68667 19.4614 3.1217 19.1789L1.55279 18.3944C1.214 18.225 1 17.8788 1 17.5C1 17.1212 1.214 16.775 1.55279 16.6056L3.1217 15.8211C3.68667 15.5386 3.84925 15.4525 3.98494 15.348C4.12104 15.243 4.24305 15.121 4.34796 14.9849C4.45255 14.8493 4.53863 14.6867 4.82111 14.1217L5.60557 12.5528C5.77496 12.214 6.12123 12 6.5 12Z",
 	"time": "M 16.764 13.35 C 18.836 15.422 20 18.233 20 21.163 C 20 22.178 19.178 23 18.163 23 L 5.837 23 C 4.823 23 4 22.177 4 21.163 C 4 18.233 5.164 15.422 7.236 13.35 L 8.586 12 L 7.236 10.65 C 5.164 8.578 4 5.767 4 2.837 C 4 1.822 4.822 1 5.837 1 L 18.163 1 C 19.178 1 20 1.822 20 2.837 C 20 5.767 18.836 8.578 16.764 10.65 L 15.414 12 Z M 13 10.999 C 13.176 10.999 13.264 10.999 13.353 10.983 C 13.488 10.958 13.627 10.9 13.74 10.823 C 13.815 10.771 13.877 10.709 14 10.586 L 15.35 9.236 C 16.612 7.974 17.472 6.367 17.823 4.617 C 17.915 4.159 17.961 3.93 17.873 3.673 C 17.787 3.452 17.633 3.265 17.433 3.138 C 17.2 3 16.923 3 16.37 3 L 7.63 3 C 7.078 3 6.801 3 6.567 3.138 C 6.367 3.265 6.213 3.452 6.127 3.673 C 6.039 3.93 6.085 4.159 6.177 4.617 C 6.528 6.367 7.388 7.975 8.65 9.237 L 10 10.585 C 10.122 10.707 10.183 10.768 10.257 10.819 C 10.371 10.898 10.511 10.956 10.647 10.981 C 10.736 10.997 10.823 10.997 10.997 10.997 L 13 10.998 Z",
+	"merge": "M7.04652 9.86171C8.74809 9.4017 10 7.84705 10 6C10 3.79086 8.20914 2 6 2C3.79086 2 2 3.79086 2 6C2 7.86384 3.27477 9.42994 5 9.87398V21C5 21.5523 5.44772 22 6 22C6.55228 22 7 21.5523 7 21V15.0001C7.28228 15.3764 7.59237 15.7345 7.92893 16.0711C9.59483 17.737 11.788 18.7544 14.1162 18.9609C14.5465 20.7059 16.1221 22 18 22C20.2091 22 22 20.2091 22 18C22 15.7909 20.2091 14 18 14C16.153 14 14.5983 15.2519 14.1383 16.9535C12.3334 16.758 10.6389 15.9526 9.34315 14.6569C8.04737 13.3611 7.24201 11.6666 7.04652 9.86171Z",
 	"eye": "M 5.077 6.707 C 6.805 5.265 9.138 4 12 4 C 14.862 4 17.195 5.265 18.923 6.707 C 20.649 8.148 21.833 9.814 22.426 10.753 L 22.45 10.791 C 22.568 10.976 22.72 11.217 22.797 11.553 C 22.859 11.848 22.859 12.152 22.797 12.447 C 22.72 12.783 22.567 13.024 22.45 13.209 L 22.426 13.247 C 21.833 14.186 20.649 15.852 18.923 17.293 C 17.195 18.735 14.862 20 12 20 C 9.138 20 6.805 18.735 5.077 17.293 C 3.35 15.852 2.167 14.186 1.574 13.247 L 1.55 13.209 C 1.389 12.978 1.272 12.72 1.203 12.447 C 1.141 12.152 1.141 11.848 1.203 11.553 C 1.28 11.216 1.433 10.976 1.55 10.791 L 1.574 10.753 C 2.167 9.814 3.35 8.148 5.077 6.707 Z M 12 16 C 14.209 16 16 14.209 16 12 C 16 9.791 14.209 8 12 8 C 9.791 8 8 9.791 8 12 C 8 14.209 9.791 16 12 16 Z M 14 12 C 14 13.105 13.105 14 12 14 C 10.895 14 10 13.105 10 12 C 10 10.895 10.895 10 12 10 C 13.105 10 14 10.895 14 12 Z",
 	"edit": "M16.2927 2.29295C17.7878 0.797857 20.2118 0.797859 21.7069 2.29295C23.202 3.78805 23.202 6.21207 21.7069 7.70717L20.5454 8.86869L20.5454 8.86873C20.1494 9.26471 19.9514 9.46271 19.723 9.5369C19.5222 9.60216 19.3058 9.60216 19.105 9.5369C18.8768 9.46274 18.6789 9.26484 18.2831 8.86911L18.2826 8.86869L15.1312 5.71722L15.1305 5.71645C14.735 5.32094 14.5371 5.12304 14.463 4.89486C14.3977 4.69402 14.3977 4.47767 14.463 4.27683C14.5371 4.04865 14.735 3.85075 15.1305 3.45524L15.1312 3.45447L16.2927 2.29295ZM16.8694 12.5448L16.8686 12.5456L8.451 20.9633C8.2061 21.2086 7.99008 21.4249 7.7334 21.5942C7.50774 21.743 7.26301 21.8606 7.00584 21.9439C6.71345 22.0385 6.40966 22.0721 6.0653 22.11L6.06494 22.1101L2.61044 22.4939C2.30851 22.5274 2.00771 22.4219 1.7929 22.2071C1.57809 21.9923 1.47258 21.6915 1.50612 21.3896L1.88992 17.9351L1.88992 17.9351C1.92792 17.5906 1.96144 17.2867 2.05613 16.9942C2.13938 16.737 2.25701 16.4923 2.40582 16.2666C2.57502 16.01 2.79132 15.794 3.03652 15.5492L3.03673 15.549L11.4544 7.13134C11.8504 6.73532 12.0484 6.53732 12.2768 6.46313C12.4776 6.39787 12.694 6.39787 12.8948 6.46313C13.123 6.53729 13.321 6.73519 13.7168 7.13091L13.7172 7.13134L16.8686 10.2828L16.8698 10.2839C17.265 10.6793 17.4628 10.8771 17.5368 11.1052C17.6021 11.306 17.6021 11.5224 17.5368 11.7232C17.4628 11.9514 17.2649 12.1493 16.8694 12.5448Z",
 	"arrow-narrow-up-right": "M10 5C9.44772 5 9 5.44772 9 6C9 6.55228 9.44772 7 10 7H15.5858L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L17 8.41421V14C17 14.5523 17.4477 15 18 15C18.5523 15 19 14.5523 19 14V6C19 5.44772 18.5523 5 18 5H10Z",
diff --git a/components/modals/ImportBookmarksModal.vue b/components/modals/ImportBookmarksModal.vue
new file mode 100644
index 00000000..59a51dd4
--- /dev/null
+++ b/components/modals/ImportBookmarksModal.vue
@@ -0,0 +1,203 @@
+<script setup>
+/** UI */
+import Modal from "@/components/ui/Modal.vue"
+import Toggle from "@/components/ui/Toggle.vue"
+import Tooltip from "@/components/ui/Tooltip.vue"
+
+/** Store */
+import { useBookmarksStore } from "@/store/bookmarks"
+import { useNotificationsStore } from "@/store/notifications"
+const bookmarksStore = useBookmarksStore()
+const notificationsStore = useNotificationsStore()
+
+const emit = defineEmits(["onClose"])
+const props = defineProps({
+	show: Boolean,
+})
+
+const mergeEffect = ref(false)
+
+const handleDrop = (e) => {
+	const file = e.dataTransfer.files[0]
+
+	if (!file.type.match("application/json")) {
+		notificationsStore.create({
+			notification: {
+				type: "error",
+				icon: "close",
+				title: "Upload only JSON format",
+				autoDestroy: true,
+			},
+		})
+	}
+
+	const reader = new FileReader()
+	reader.onloadend = function (e) {
+		const result = JSON.parse(this.result)
+
+		if (
+			result &&
+			Object.keys(result).length === 4 &&
+			Array.isArray(result.txs) &&
+			Array.isArray(result.addresses) &&
+			Array.isArray(result.blocks) &&
+			Array.isArray(result.namespaces)
+		) {
+			if (!mergeEffect.value) {
+				notificationsStore.create({
+					notification: {
+						type: "success",
+						icon: "bookmark-plus",
+						title: "Successfuly parsed & imported",
+						autoDestroy: true,
+					},
+				})
+
+				localStorage.bookmarks = result
+				bookmarksStore.bookmarks = result
+			} else {
+				notificationsStore.create({
+					notification: {
+						type: "success",
+						icon: "bookmark-plus",
+						title: "Successfuly parsed & imported & merged",
+						autoDestroy: true,
+					},
+				})
+
+				let merged = {}
+
+				Object.keys(bookmarksStore.bookmarks).forEach((b) => {
+					const updates = Object.fromEntries([...result[b], ...bookmarksStore.bookmarks[b]].map((o) => [o.id, o]))
+
+					merged[b] = Object.keys(updates).map((u) => updates[u])
+				})
+
+				localStorage.bookmarks = merged
+				bookmarksStore.bookmarks = merged
+			}
+
+			emit("onClose")
+		} else {
+			notificationsStore.create({
+				notification: {
+					type: "error",
+					icon: "close",
+					title: "JSON file is corrupted",
+					autoDestroy: true,
+				},
+			})
+		}
+	}
+	reader.readAsText(file)
+}
+</script>
+
+<template>
+	<Modal :show="show" @onClose="emit('onClose')" width="600" disableTrap>
+		<Flex direction="column" gap="24">
+			<Text size="14" weight="600" color="primary">Import Bookmarks</Text>
+
+			<Flex
+				id="drop_zone"
+				@drop.prevent="handleDrop"
+				@dragenter.prevent
+				@dragover.prevent
+				direction="column"
+				align="center"
+				justify="center"
+				gap="16"
+				:class="[$style.drop_zone]"
+			>
+				<Flex v-if="mergeEffect" align="center" gap="12">
+					<Tooltip>
+						<Icon name="upload" size="24" color="tertiary" />
+
+						<template #content>Imported Bookmarks from file</template>
+					</Tooltip>
+
+					<Text size="20" weight="500" color="support">+</Text>
+
+					<Tooltip>
+						<Icon name="bookmark-plus" size="24" color="tertiary" />
+
+						<template #content>Your current Bookmarks</template>
+					</Tooltip>
+
+					<Text size="20" weight="500" color="support">=</Text>
+
+					<Tooltip>
+						<Icon name="merge" size="20" color="green" />
+
+						<template #content>Merged Bookmarks without conflicts</template>
+					</Tooltip>
+				</Flex>
+				<Icon v-else name="upload" size="24" color="tertiary" />
+
+				<Text size="13" weight="500" height="140" color="tertiary" align="center" style="max-width: 180px">
+					Drop <Text weight="600" color="secondary">JSON</Text> file with saved bookmarks to import
+				</Text>
+			</Flex>
+
+			<Flex v-if="bookmarksStore.hasBookmarks" gap="8" :class="$style.warning">
+				<Icon name="info" size="12" color="orange" />
+				<Flex direction="column" gap="4">
+					<Text size="12" weight="600" color="orange"> Warning! You have existing bookmarks.</Text>
+
+					<Text size="12" weight="600" height="140" color="tertiary">
+						Importing a JSON file will <Text color="secondary">erase</Text> your existing bookmarks and set new ones from the
+						file.<br />Toggle <Text color="secondary">Merge Effect</Text> depending on your purposes.
+					</Text>
+				</Flex>
+			</Flex>
+
+			<Flex justify="between" :class="[!bookmarksStore.hasBookmarks && $style.disabled]">
+				<Flex direction="column" gap="6">
+					<Text size="12" weight="600" color="primary">Merge Effect</Text>
+					<Text size="12" weight="500" color="tertiary">Merge existing bookmarks with imported bookmarks</Text>
+				</Flex>
+
+				<Toggle v-model="mergeEffect" />
+			</Flex>
+		</Flex>
+	</Modal>
+</template>
+
+<style module>
+.drop_zone {
+	height: 150px;
+
+	border: 2px dashed var(--op-5);
+	border-radius: 12px;
+
+	padding: 40px;
+
+	animation: blink 3s ease infinite;
+}
+
+.warning {
+	border-radius: 6px;
+	background: var(--op-5);
+
+	padding: 8px;
+}
+
+.disabled {
+	opacity: 0.3;
+	pointer-events: none;
+}
+
+@keyframes blink {
+	0% {
+		border-color: var(--op-5);
+	}
+
+	50% {
+		border-color: var(--op-15);
+	}
+
+	100% {
+		border-color: var(--op-5);
+	}
+}
+</style>
diff --git a/components/modals/ModalsManager.vue b/components/modals/ModalsManager.vue
index 152594b5..c94caf13 100644
--- a/components/modals/ModalsManager.vue
+++ b/components/modals/ModalsManager.vue
@@ -4,6 +4,7 @@ import ConfirmationModal from "./ConfirmationModal.vue"
 import RawDataModal from "./RawDataModal.vue"
 import ConstantsModal from "./ConstantsModal.vue"
 import QRCodeModal from "./QRCodeModal.vue"
+import ImportBookmarksModal from "./ImportBookmarksModal.vue"
 
 /**
  * Store
@@ -18,4 +19,5 @@ const modalsStore = useModalsStore()
 	<RawDataModal :show="modalsStore.modals.rawData" @onClose="modalsStore.close('rawData')" />
 	<ConstantsModal :show="modalsStore.modals.constants" @onClose="modalsStore.close('constants')" />
 	<QRCodeModal :show="modalsStore.modals.qr" @onClose="modalsStore.close('qr')" />
+	<ImportBookmarksModal :show="modalsStore.modals.import" @onClose="modalsStore.close('import')" />
 </template>
diff --git a/components/modules/bookmarks/BookmarkItem.vue b/components/modules/bookmarks/BookmarkItem.vue
index 45a80751..97e593b2 100644
--- a/components/modules/bookmarks/BookmarkItem.vue
+++ b/components/modules/bookmarks/BookmarkItem.vue
@@ -60,7 +60,9 @@ const getLink = () => {
 							.toFormat("ff")
 					}}
 				</Text>
-				<Button @click.prevent="emit('onRemove')" type="secondary" size="mini">Remove</Button>
+				<Button @click.prevent="emit('onRemove')" type="tertiary" size="mini">
+					<Icon name="trash" size="14" color="primary" />
+				</Button>
 			</Flex>
 		</Flex>
 	</NuxtLink>
diff --git a/components/ui/Modal.vue b/components/ui/Modal.vue
index 63c6f922..0cfd3fba 100644
--- a/components/ui/Modal.vue
+++ b/components/ui/Modal.vue
@@ -160,7 +160,7 @@ const onKeydown = (e) => {
 	position: relative;
 	overflow: hidden;
 
-	border-radius: 6px;
+	border-radius: 12px;
 	background: var(--card-background);
 	box-shadow: rgb(0 0 0 / 20%) 0px 0px 1px, rgb(0 0 0 / 10%) 0px 10px 40px;
 	border: 1px solid var(--op-5);
diff --git a/components/ui/Toggle.vue b/components/ui/Toggle.vue
new file mode 100644
index 00000000..228b9f02
--- /dev/null
+++ b/components/ui/Toggle.vue
@@ -0,0 +1,88 @@
+<script setup>
+const props = defineProps({
+	modelValue: { type: Boolean, default: false },
+	disabled: { type: Boolean, default: false },
+	protected: { type: Boolean, default: false },
+})
+const emit = defineEmits(["update:modelValue"])
+
+const toggle = () => {
+	if (props.disabled || props.protected) return
+
+	emit("update:modelValue", !props.modelValue)
+}
+</script>
+
+<template>
+	<div @click="toggle" :class="[$style.wrapper, modelValue && $style.active]" tabindex="1">
+		<div v-if="!disabled" :class="[$style.slider, modelValue && $style.active]" />
+
+		<div v-else :class="$style.lock">
+			<Icon name="lock" size="12" />
+		</div>
+	</div>
+</template>
+
+<style module>
+.wrapper {
+	position: relative;
+
+	min-width: 32px;
+	height: 20px;
+
+	background: var(--op-10);
+	border-radius: 50px;
+	cursor: pointer;
+
+	transition: all 0.2s ease;
+}
+
+.wrapper:focus {
+	box-shadow: rgba(10, 222, 113, 30%) 0px 0px 0px 3px;
+	outline: none;
+}
+
+.slider {
+	position: absolute;
+	top: 4px;
+	left: 4px;
+
+	width: 12px;
+	height: 12px;
+
+	background: rgba(255, 255, 255, 0.9);
+	border-radius: 50px;
+
+	transition: all 0.1s ease;
+}
+
+.lock {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	height: 100%;
+
+	cursor: not-allowed;
+}
+
+.lock svg {
+	fill: var(--text-secondary);
+}
+
+.wrapper.active {
+	background: var(--neutral-green);
+}
+
+.wrapper.active .slider {
+	left: 16px;
+}
+
+.wrapper:active .slider {
+	width: 14px;
+}
+
+.wrapper.active:active .slider {
+	width: 12px;
+}
+</style>
diff --git a/pages/bookmarks.vue b/pages/bookmarks.vue
index dcf67bb7..070baefb 100644
--- a/pages/bookmarks.vue
+++ b/pages/bookmarks.vue
@@ -2,21 +2,117 @@
 /** Components */
 import BookmarkItem from "@/components/modules/bookmarks/BookmarkItem.vue"
 
+/** UI */
+import Button from "@/components/ui/Button.vue"
+import { Dropdown, DropdownItem, DropdownDivider } from "@/components/ui/Dropdown"
+
 /** Store */
+import { useAppStore } from "@/store/app"
+import { useModalsStore } from "@/store/modals"
 import { useBookmarksStore } from "@/store/bookmarks"
+import { useNotificationsStore } from "@/store/notifications"
+const appStore = useAppStore()
+const modalsStore = useModalsStore()
 const bookmarksStore = useBookmarksStore()
+const notificationsStore = useNotificationsStore()
 
 useHead({
 	title: `My Bookmarks - Celenium`,
 })
 
+const cache = reactive({
+	bookmark: null,
+	type: null,
+})
+
 const handleRemove = (type, bookmark) => {
+	cache.bookmark = bookmark
+	cache.type = type
+
 	const bookmarkIdx = bookmarksStore.bookmarks[type].findIndex((b) => b.id === bookmark.id)
 
 	if (bookmarkIdx >= 0) {
 		bookmarksStore.bookmarks[type].splice(bookmarkIdx, 1)
+
+		notificationsStore.create({
+			notification: {
+				type: "info",
+				icon: "check",
+				title: `Bookmark removed`,
+				autoDestroy: true,
+				actions: [
+					{
+						name: "Undo",
+						callback: () => {
+							bookmarksStore.bookmarks[cache.type].push(cache.bookmark)
+						},
+					},
+				],
+			},
+		})
 	}
 }
+
+const handleImport = () => {
+	modalsStore.open("import")
+}
+
+const handleExport = () => {
+	if (!bookmarksStore.hasBookmarks) return
+
+	const blob = new Blob([JSON.stringify(JSON.parse(localStorage.bookmarks), null, "\t")], { type: "text/json" })
+	const link = document.createElement("a")
+
+	link.download = "celenium_bookmarks.json"
+	link.href = window.URL.createObjectURL(blob)
+	link.dataset.downloadurl = ["text/json", link.download, link.href].join(":")
+
+	const evt = new MouseEvent("click", {
+		view: window,
+		bubbles: true,
+		cancelable: true,
+	})
+
+	link.dispatchEvent(evt)
+	link.remove()
+}
+
+const handleClearBookmarks = () => {
+	if (!bookmarksStore.hasBookmarks) return
+
+	appStore.createConfirmation({
+		title: `Do you want to clear your bookmarks?`,
+		description: "Your local storage for bookmarks will be cleared",
+
+		buttons: {
+			confirm: {
+				title: "Yes, clear",
+			},
+			cancel: {
+				title: "Cancel",
+			},
+		},
+
+		confirmCb: () => {
+			localStorage.removeItem("bookmarks")
+			bookmarksStore.clearBookmarks()
+
+			notificationsStore.create({
+				notification: {
+					type: "info",
+					icon: "check",
+					title: `Your bookmarks successfully cleared`,
+					autoDestroy: true,
+				},
+			})
+
+			modalsStore.close("confirmation")
+		},
+		cancelCb: () => {
+			modalsStore.close("confirmation")
+		},
+	})
+}
 </script>
 
 <template>
@@ -35,6 +131,36 @@ const handleRemove = (type, bookmark) => {
 					<Icon name="bookmark-check" size="16" color="secondary" />
 					<Text size="13" weight="600" color="primary">My Bookmarks</Text>
 				</Flex>
+
+				<Flex align="center" gap="8">
+					<Dropdown>
+						<Button type="secondary" size="mini">
+							<Icon name="dots" size="16" color="secondary" />
+						</Button>
+
+						<template #popup>
+							<DropdownItem @click="handleImport">
+								<Flex align="center" gap="8">
+									<Icon name="upload" size="12" color="secondary" />
+									Import Bookmarks
+								</Flex>
+							</DropdownItem>
+							<DropdownItem @click="handleExport" :disabled="!bookmarksStore.hasBookmarks">
+								<Flex align="center" gap="8">
+									<Icon name="download" size="12" color="secondary" />
+									Export Bookmarks
+								</Flex>
+							</DropdownItem>
+							<DropdownDivider />
+							<DropdownItem @click="handleClearBookmarks" :disabled="!bookmarksStore.hasBookmarks">
+								<Flex align="center" gap="8">
+									<Icon name="trash" size="12" color="red" />
+									Clear Bookmarks
+								</Flex>
+							</DropdownItem>
+						</template>
+					</Dropdown>
+				</Flex>
 			</Flex>
 
 			<Flex direction="column" gap="8" :class="$style.content">
diff --git a/store/bookmarks.js b/store/bookmarks.js
index 39a8f606..25ee1db1 100644
--- a/store/bookmarks.js
+++ b/store/bookmarks.js
@@ -15,13 +15,23 @@ export const useBookmarksStore = defineStore("bookmarks", () => {
 			.slice(0, 3)
 	})
 
+	const hasBookmarks = computed(() => {
+		let has = false
+
+		Object.keys(bookmarks.value).forEach((b) => {
+			if (bookmarks.value[b].length) has = true
+		})
+
+		return has
+	})
+
 	const clearBookmarks = () => {
 		Object.keys(bookmarks.value).forEach((b) => {
 			bookmarks.value[b] = []
 		})
 	}
 
-	return { bookmarks, recentBookmarks, clearBookmarks }
+	return { bookmarks, recentBookmarks, clearBookmarks, hasBookmarks }
 })
 
 if (import.meta.hot) {
diff --git a/store/modals.js b/store/modals.js
index d235e3c8..a75c7f7c 100644
--- a/store/modals.js
+++ b/store/modals.js
@@ -14,6 +14,7 @@ export const useModalsStore = defineStore("modals", () => {
 		rawData: false,
 		constants: false,
 		qr: false,
+		import: false,
 	})
 
 	const open = (target) => {

From 495712d233a416d5de02da6e33745ea2e37e944f Mon Sep 17 00:00:00 2001
From: xdeq <celldwellerq@gmail.com>
Date: Mon, 29 Jan 2024 19:14:38 +0300
Subject: [PATCH 29/41] fix(ImportBookmarksModal): disable merge effect on
 modal close

---
 components/modals/ImportBookmarksModal.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/components/modals/ImportBookmarksModal.vue b/components/modals/ImportBookmarksModal.vue
index 59a51dd4..dc42b245 100644
--- a/components/modals/ImportBookmarksModal.vue
+++ b/components/modals/ImportBookmarksModal.vue
@@ -17,6 +17,15 @@ const props = defineProps({
 
 const mergeEffect = ref(false)
 
+watch(
+	() => props.show,
+	() => {
+		if (!props.show) {
+			mergeEffect.value = false
+		}
+	},
+)
+
 const handleDrop = (e) => {
 	const file = e.dataTransfer.files[0]
 

From 686e1dd570997cc297d7ffadd85b593cd0b73d5d Mon Sep 17 00:00:00 2001
From: xdeq <celldwellerq@gmail.com>
Date: Mon, 29 Jan 2024 19:19:07 +0300
Subject: [PATCH 30/41] fix(bookmarks): open bookmarks link

---
 components/modules/block/BlockOverview.vue         | 5 +++++
 components/modules/namespace/NamespaceOverview.vue | 5 +++++
 components/modules/tx/TxOverview.vue               | 5 +++++
 3 files changed, 15 insertions(+)

diff --git a/components/modules/block/BlockOverview.vue b/components/modules/block/BlockOverview.vue
index f86cc963..6d0a9cc1 100644
--- a/components/modules/block/BlockOverview.vue
+++ b/components/modules/block/BlockOverview.vue
@@ -27,6 +27,8 @@ const cacheStore = useCacheStore()
 const bookmarksStore = useBookmarksStore()
 const notificationsStore = useNotificationsStore()
 
+const router = useRouter()
+
 const MapTabsTypes = {
 	PFBs: "MsgPayForBlobs",
 	Transfers: "MsgSend",
@@ -165,6 +167,9 @@ const handleBookmark = () => {
 				actions: [
 					{
 						name: "Open Bookmarks",
+						callback: () => {
+							router.push("/bookmarks")
+						},
 					},
 				],
 			},
diff --git a/components/modules/namespace/NamespaceOverview.vue b/components/modules/namespace/NamespaceOverview.vue
index 8671ef58..7ab96329 100644
--- a/components/modules/namespace/NamespaceOverview.vue
+++ b/components/modules/namespace/NamespaceOverview.vue
@@ -24,6 +24,8 @@ const cacheStore = useCacheStore()
 const bookmarksStore = useBookmarksStore()
 const notificationsStore = useNotificationsStore()
 
+const router = useRouter()
+
 const props = defineProps({
 	namespace: {
 		type: Object,
@@ -162,6 +164,9 @@ const handleBookmark = () => {
 				actions: [
 					{
 						name: "Open Bookmarks",
+						callback: () => {
+							router.push("/bookmarks")
+						},
 					},
 				],
 			},
diff --git a/components/modules/tx/TxOverview.vue b/components/modules/tx/TxOverview.vue
index 45a9f4e6..27f56a3c 100644
--- a/components/modules/tx/TxOverview.vue
+++ b/components/modules/tx/TxOverview.vue
@@ -28,6 +28,8 @@ const cacheStore = useCacheStore()
 const bookmarksStore = useBookmarksStore()
 const notificationsStore = useNotificationsStore()
 
+const router = useRouter()
+
 const EventIconMapping = {
 	message: "message",
 	coin_received: "coins_down",
@@ -89,6 +91,9 @@ const handleBookmark = () => {
 				actions: [
 					{
 						name: "Open Bookmarks",
+						callback: () => {
+							router.push("/bookmarks")
+						},
 					},
 				],
 			},

From ff925a559bc4e2fd687013bdd3767591c0b795de Mon Sep 17 00:00:00 2001
From: xdeq <celldwellerq@gmail.com>
Date: Mon, 29 Jan 2024 19:24:14 +0300
Subject: [PATCH 31/41] feat(ConfirmationModal): color type

---
 assets/styles/base.scss                 |  3 +++
 components/cmd/CommandMenu.vue          |  5 ++++-
 components/modals/ConfirmationModal.vue |  7 ++++++-
 components/ui/Button.vue                | 12 ++++++++++++
 pages/bookmarks.vue                     |  3 ++-
 5 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/assets/styles/base.scss b/assets/styles/base.scss
index c37c8279..89a9a85c 100644
--- a/assets/styles/base.scss
+++ b/assets/styles/base.scss
@@ -50,6 +50,9 @@ $grayscale: (
 	--btn-white-bg: rgba(255, 255, 255, 90%);
 	--btn-white-bg-hover: rgba(255, 255, 255, 75%);
 	--btn-white-bg-active: rgba(255, 255, 255, 90%);
+	--btn-red-bg: rgba(235, 87, 87, 100%);
+	--btn-red-bg-hover: rgba(235, 87, 87, 75%);
+	--btn-red-bg-active: rgba(235, 87, 87, 90%);
 	--btn-secondary-bg: rgba(255, 255, 255, 8%);
 	--btn-secondary-bg-hover: rgba(255, 255, 255, 10%);
 	--btn-secondary-bg-active: rgba(255, 255, 255, 7%);
diff --git a/components/cmd/CommandMenu.vue b/components/cmd/CommandMenu.vue
index 6ed9df9a..bdbd4dca 100644
--- a/components/cmd/CommandMenu.vue
+++ b/components/cmd/CommandMenu.vue
@@ -465,6 +465,7 @@ const rawDeveloperActions = [
 
 				buttons: {
 					confirm: {
+						color: "red",
 						title: "Yes, clear",
 					},
 					cancel: {
@@ -496,6 +497,7 @@ const rawDeveloperActions = [
 
 				buttons: {
 					confirm: {
+						color: "red",
 						title: "Yes, clear",
 					},
 					cancel: {
@@ -536,7 +538,8 @@ const rawDeveloperActions = [
 
 				buttons: {
 					confirm: {
-						title: "Yes, clear",
+						color: "red",
+						title: "Yes, delete all bookmarks",
 					},
 					cancel: {
 						title: "Cancel",
diff --git a/components/modals/ConfirmationModal.vue b/components/modals/ConfirmationModal.vue
index c03d4ce5..b1963ec2 100644
--- a/components/modals/ConfirmationModal.vue
+++ b/components/modals/ConfirmationModal.vue
@@ -37,7 +37,12 @@ const handleCancel = () => {
 			</Flex>
 
 			<Flex gap="8">
-				<Button @click="handleConfirm" type="secondary" size="small" block>
+				<Button
+					@click="handleConfirm"
+					:type="appStore.confirmation.buttons.confirm.color ? appStore.confirmation.buttons.confirm.color : 'secondary'"
+					size="small"
+					block
+				>
 					{{ appStore.confirmation.buttons.confirm.title }}
 				</Button>
 				<Button @click="handleCancel" type="secondary" size="small" block>
diff --git a/components/ui/Button.vue b/components/ui/Button.vue
index b1fb9968..ddab304d 100644
--- a/components/ui/Button.vue
+++ b/components/ui/Button.vue
@@ -191,6 +191,18 @@ const getStyles = () => {
 	background: var(--btn-white-bg-active);
 }
 
+.wrapper.red {
+	background: var(--btn-red-bg);
+	fill: var(--txt-black);
+	color: var(--txt-black);
+}
+.wrapper.red:hover {
+	background: var(--btn-red-bg-hover);
+}
+.wrapper.red:active {
+	background: var(--btn-red-bg-active);
+}
+
 .wrapper.secondary {
 	background: linear-gradient(var(--op-10), var(--op-5));
 	fill: var(--txt-secondary);
diff --git a/pages/bookmarks.vue b/pages/bookmarks.vue
index 070baefb..1d500f6f 100644
--- a/pages/bookmarks.vue
+++ b/pages/bookmarks.vue
@@ -86,7 +86,8 @@ const handleClearBookmarks = () => {
 
 		buttons: {
 			confirm: {
-				title: "Yes, clear",
+				color: "red",
+				title: "Yes, delete all bookmarks",
 			},
 			cancel: {
 				title: "Cancel",

From 8f56da01d7cc4061451251dce55536059b534df2 Mon Sep 17 00:00:00 2001
From: xdeq <celldwellerq@gmail.com>
Date: Mon, 29 Jan 2024 19:55:32 +0300
Subject: [PATCH 32/41] feat(bookmarks): alias name

---
 components/modals/EditBookmarkAliasModal.vue  | 157 ++++++++++++++++++
 components/modals/ModalsManager.vue           |   2 +
 components/modules/bookmarks/BookmarkItem.vue |  33 +++-
 store/cache.js                                |   3 +
 store/modals.js                               |   1 +
 5 files changed, 189 insertions(+), 7 deletions(-)
 create mode 100644 components/modals/EditBookmarkAliasModal.vue

diff --git a/components/modals/EditBookmarkAliasModal.vue b/components/modals/EditBookmarkAliasModal.vue
new file mode 100644
index 00000000..af21bb1a
--- /dev/null
+++ b/components/modals/EditBookmarkAliasModal.vue
@@ -0,0 +1,157 @@
+<script setup>
+/** UI */
+import Modal from "@/components/ui/Modal.vue"
+import Toggle from "@/components/ui/Toggle.vue"
+import Tooltip from "@/components/ui/Tooltip.vue"
+import Input from "@/components/ui/Input.vue"
+import Button from "@/components/ui/Button.vue"
+
+/** Store */
+import { useCacheStore } from "@/store/cache"
+import { useBookmarksStore } from "@/store/bookmarks"
+import { useNotificationsStore } from "@/store/notifications"
+const cacheStore = useCacheStore()
+const bookmarksStore = useBookmarksStore()
+const notificationsStore = useNotificationsStore()
+
+const emit = defineEmits(["onClose"])
+const props = defineProps({
+	show: Boolean,
+})
+
+const alias = ref("")
+
+const onKeydown = (e) => {
+	if (e.key === "Enter") {
+		handleSave()
+	}
+}
+
+watch(
+	() => props.show,
+	() => {
+		if (!props.show) {
+			alias.value = ""
+
+			document.removeEventListener("keydown", onKeydown)
+		} else {
+			alias.value = cacheStore.current.bookmark.alias ? cacheStore.current.bookmark.alias : ""
+
+			document.addEventListener("keydown", onKeydown)
+		}
+	},
+)
+
+const handleSave = () => {
+	if (!alias.value.length || alias.length > 100) return
+
+	switch (cacheStore.current.bookmark.type) {
+		case "Transaction": {
+			const bookmarkIdx = bookmarksStore.bookmarks.txs.findIndex((b) => b.id === cacheStore.current.bookmark.id)
+			bookmarksStore.bookmarks.txs.splice(bookmarkIdx, 1)
+			bookmarksStore.bookmarks.txs.push({
+				...cacheStore.current.bookmark,
+				alias: alias.value,
+			})
+
+			break
+		}
+
+		case "Namespace": {
+			const bookmarkIdx = bookmarksStore.bookmarks.namespaces.findIndex((b) => b.id === cacheStore.current.bookmark.id)
+			bookmarksStore.bookmarks.namespaces.splice(bookmarkIdx, 1)
+			bookmarksStore.bookmarks.namespaces.push({
+				...cacheStore.current.bookmark,
+				alias: alias.value,
+			})
+
+			break
+		}
+
+		case "Address": {
+			const bookmarkIdx = bookmarksStore.bookmarks.addresses.findIndex((b) => b.id === cacheStore.current.bookmark.id)
+			bookmarksStore.bookmarks.addresses.splice(bookmarkIdx, 1)
+			bookmarksStore.bookmarks.addresses.push({
+				...cacheStore.current.bookmark,
+				alias: alias.value,
+			})
+
+			break
+		}
+
+		case "Block": {
+			const bookmarkIdx = bookmarksStore.bookmarks.blocks.findIndex((b) => b.id === cacheStore.current.bookmark.id)
+			bookmarksStore.bookmarks.blocks.splice(bookmarkIdx, 1)
+			bookmarksStore.bookmarks.blocks.push({
+				...cacheStore.current.bookmark,
+				alias: alias.value,
+			})
+
+			break
+		}
+	}
+
+	notificationsStore.create({
+		notification: {
+			type: "success",
+			icon: "check",
+			title: "Alias successfuly updated",
+			autoDestroy: true,
+		},
+	})
+	emit("onClose")
+}
+</script>
+
+<template>
+	<Modal :show="show" @onClose="emit('onClose')" width="600" focus>
+		<Flex direction="column" gap="24">
+			<Text size="14" weight="600" color="primary">Edit Bookmark Alias</Text>
+
+			<Flex direction="column" gap="16">
+				<Input v-model="alias" placeholder="Bookmark alias" />
+
+				<Button @click="handleSave" type="secondary" size="small" :disabled="!alias.length || alias.length > 100"> Save </Button>
+			</Flex>
+		</Flex>
+	</Modal>
+</template>
+
+<style module>
+.drop_zone {
+	height: 150px;
+
+	border: 2px dashed var(--op-5);
+	border-radius: 12px;
+
+	padding: 40px;
+
+	animation: blink 3s ease infinite;
+}
+
+.warning {
+	border-radius: 6px;
+	background: var(--op-5);
+
+	padding: 8px;
+}
+
+.disabled {
+	opacity: 0.3;
+	pointer-events: none;
+}
+
+@keyframes blink {
+	0% {
+		border-color: var(--op-5);
+	}
+
+	50% {
+		border-color: var(--op-15);
+	}
+
+	100% {
+		border-color: var(--op-5);
+	}
+}
+</style>
diff --git a/components/modals/ModalsManager.vue b/components/modals/ModalsManager.vue
index c94caf13..1c24dc64 100644
--- a/components/modals/ModalsManager.vue
+++ b/components/modals/ModalsManager.vue
@@ -5,6 +5,7 @@ import RawDataModal from "./RawDataModal.vue"
 import ConstantsModal from "./ConstantsModal.vue"
 import QRCodeModal from "./QRCodeModal.vue"
 import ImportBookmarksModal from "./ImportBookmarksModal.vue"
+import EditBookmarkAliasModal from "./EditBookmarkAliasModal.vue"
 
 /**
  * Store
@@ -20,4 +21,5 @@ const modalsStore = useModalsStore()
 	<ConstantsModal :show="modalsStore.modals.constants" @onClose="modalsStore.close('constants')" />
 	<QRCodeModal :show="modalsStore.modals.qr" @onClose="modalsStore.close('qr')" />
 	<ImportBookmarksModal :show="modalsStore.modals.import" @onClose="modalsStore.close('import')" />
+	<EditBookmarkAliasModal :show="modalsStore.modals.edit_alias" @onClose="modalsStore.close('edit_alias')" />
 </template>
diff --git a/components/modules/bookmarks/BookmarkItem.vue b/components/modules/bookmarks/BookmarkItem.vue
index 97e593b2..26ad5dc5 100644
--- a/components/modules/bookmarks/BookmarkItem.vue
+++ b/components/modules/bookmarks/BookmarkItem.vue
@@ -5,11 +5,22 @@ import { DateTime } from "luxon"
 /** UI */
 import Button from "@/components/ui/Button.vue"
 
+/** Store */
+import { useCacheStore } from "@/store/cache"
+import { useModalsStore } from "@/store/modals"
+const cacheStore = useCacheStore()
+const modalsStore = useModalsStore()
+
 const props = defineProps({
 	item: Object,
 })
 const emit = defineEmits(["onRemove"])
 
+const handleEditBookmarkAlias = () => {
+	cacheStore.current.bookmark = props.item
+	modalsStore.open("edit_alias")
+}
+
 const getIcon = () => {
 	switch (props.item.type.toLowerCase()) {
 		case "namespace":
@@ -46,23 +57,30 @@ const getLink = () => {
 
 <template>
 	<NuxtLink :to="getLink()">
-		<Flex justify="between" align="center" :class="$style.wrapper">
+		<Flex justify="between" align="center" gap="16" :class="$style.wrapper">
 			<Flex align="center" gap="8" :class="$style.content">
 				<Icon :name="getIcon()" size="14" color="secondary" />
-				<Text size="13" weight="600" color="primary" :class="$style.id">{{ item.id }}</Text>
+				<Text v-if="item.alias" size="13" weight="600" color="primary" no-wrap>{{ item.alias }}</Text>
+				<Text size="13" weight="600" :color="!item.alias ? 'primary' : 'tertiary'" :class="$style.id">{{ item.id }}</Text>
 			</Flex>
 
-			<Flex align="center" gap="12">
-				<Text size="13" weight="600" color="tertiary">
+			<Flex align="center" gap="16">
+				<Text size="13" weight="600" color="tertiary" no-wrap>
 					{{
 						DateTime.fromSeconds(item.ts / 1_000)
 							.setLocale("en")
 							.toFormat("ff")
 					}}
 				</Text>
-				<Button @click.prevent="emit('onRemove')" type="tertiary" size="mini">
-					<Icon name="trash" size="14" color="primary" />
-				</Button>
+
+				<Flex align="center" gap="6">
+					<Button @click.prevent="handleEditBookmarkAlias" type="tertiary" size="mini">
+						<Icon name="edit" size="14" color="primary" />
+					</Button>
+					<Button @click.prevent="emit('onRemove')" type="tertiary" size="mini">
+						<Icon name="trash" size="14" color="primary" />
+					</Button>
+				</Flex>
 			</Flex>
 		</Flex>
 	</NuxtLink>
@@ -79,6 +97,7 @@ const getLink = () => {
 
 .content {
 	max-width: 100%;
+	min-width: 0;
 }
 
 .id {
diff --git a/store/cache.js b/store/cache.js
index 55ce44cd..42a72ec0 100644
--- a/store/cache.js
+++ b/store/cache.js
@@ -33,6 +33,9 @@ export const useCacheStore = defineStore("cache", () => {
 
 		/** address */
 		address: null,
+
+		/** bookmark */
+		bookmark: null,
 	})
 
 	return { selectedBlob, qr, current }
diff --git a/store/modals.js b/store/modals.js
index a75c7f7c..61ff1562 100644
--- a/store/modals.js
+++ b/store/modals.js
@@ -15,6 +15,7 @@ export const useModalsStore = defineStore("modals", () => {
 		constants: false,
 		qr: false,
 		import: false,
+		edit_alias: false,
 	})
 
 	const open = (target) => {

From 369a8fac3f2584b9b1fbc4f77a79aa489a808070 Mon Sep 17 00:00:00 2001
From: xdeq <celldwellerq@gmail.com>
Date: Mon, 29 Jan 2024 20:02:56 +0300
Subject: [PATCH 33/41] fix(Feed): tooltip for tia price

---
 components/Feed.vue | 50 ++++++++++++++++++++++++++++++---------------
 1 file changed, 34 insertions(+), 16 deletions(-)

diff --git a/components/Feed.vue b/components/Feed.vue
index bd325233..c54c22bc 100644
--- a/components/Feed.vue
+++ b/components/Feed.vue
@@ -1,4 +1,7 @@
 <script setup>
+/** Vendor */
+import { DateTime } from "luxon"
+
 /** Services */
 import { comma, formatBytes, abbreviate } from "@/services/utils"
 
@@ -14,6 +17,7 @@ const appStore = useAppStore()
 
 const head = computed(() => appStore.head)
 
+const series = ref([])
 const price = reactive({
 	value: 0,
 	diff: 0,
@@ -24,8 +28,9 @@ onMounted(async () => {
 	const dataPrice = await fetchPrice()
 	const dataSeries = await fetchPriceSeries()
 	price.value = parseFloat(dataPrice.close)
+	series.value = dataSeries
 
-	const prevDayClosePrice = parseFloat(dataSeries[1].close)
+	const prevDayClosePrice = parseFloat(series.value[1].close)
 	price.diff = (Math.abs(prevDayClosePrice - price.value) / ((prevDayClosePrice + price.value) / 2)) * 100
 	price.side = price.value - prevDayClosePrice > 0 ? "rise" : "fall"
 })
@@ -106,26 +111,39 @@ onMounted(async () => {
 				</Tooltip>
 			</Flex>
 
-			<Flex align="center" gap="6" :class="$style.stat">
-				<Icon name="coin" size="12" color="secondary" :class="$style.icon" />
+			<Tooltip position="end">
+				<Flex align="center" gap="6" :class="$style.stat">
+					<Icon name="coin" size="12" color="secondary" :class="$style.icon" />
 
-				<Flex align="center" gap="4">
-					<Text size="12" weight="500" color="tertiary" noWrap :class="$style.key">TIA:</Text>
+					<Flex align="center" gap="4">
+						<Text size="12" weight="500" color="tertiary" noWrap :class="$style.key">TIA:</Text>
 
-					<Text v-if="price.value" size="12" weight="600" noWrap :class="$style.value"> ${{ price.value.toFixed(2) }} </Text>
-					<Skeleton v-else w="36" h="12" />
-				</Flex>
+						<Text v-if="price.value" size="12" weight="600" noWrap :class="$style.value"> ${{ price.value.toFixed(2) }} </Text>
+						<Skeleton v-else w="36" h="12" />
+					</Flex>
 
-				<Flex v-if="price.diff" align="center" gap="4">
-					<Icon v-if="price.side === 'rise'" name="arrow-circle-right-up" size="12" color="neutral-green" />
-					<Icon v-else name="arrow-circle-right-down" size="12" color="secondary" />
+					<Flex v-if="price.diff" align="center" gap="4">
+						<Icon v-if="price.side === 'rise'" name="arrow-circle-right-up" size="12" color="neutral-green" />
+						<Icon v-else name="arrow-circle-right-down" size="12" color="secondary" />
 
-					<Text size="12" weight="600" :color="price.side === 'rise' ? 'neutral-green' : 'secondary'" noWrap>
-						{{ price.diff.toFixed(2) }}%</Text
-					>
+						<Text size="12" weight="600" :color="price.side === 'rise' ? 'neutral-green' : 'secondary'" noWrap>
+							{{ price.diff.toFixed(2) }}%</Text
+						>
+					</Flex>
+					<Skeleton v-else w="50" h="12" />
 				</Flex>
-				<Skeleton v-else w="50" h="12" />
-			</Flex>
+
+				<template #content>
+					<Flex direction="column" gap="6">
+						Price diff from the previous day
+
+						<Flex align="center" gap="4">
+							<Text color="tertiary">{{ DateTime.fromISO(series[1].time).setLocale("en").toFormat("ff") }} -></Text>
+							<Text color="primary">${{ series[1].close }}</Text>
+						</Flex>
+					</Flex>
+				</template>
+			</Tooltip>
 		</Flex>
 	</Flex>
 </template>

From 45921e6b77d336b6644f053b0a5ce2c4b1634dbf Mon Sep 17 00:00:00 2001
From: GussevPM <GussevPM@GMail.Com>
Date: Mon, 29 Jan 2024 19:41:23 +0100
Subject: [PATCH 34/41] Fix height, add github, hide logo and social links if
 empty

---
 components/modules/rollup/RollupOverview.vue | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/components/modules/rollup/RollupOverview.vue b/components/modules/rollup/RollupOverview.vue
index dbe6b2c9..29abb7c2 100644
--- a/components/modules/rollup/RollupOverview.vue
+++ b/components/modules/rollup/RollupOverview.vue
@@ -162,7 +162,7 @@ watch(
 			<Flex direction="column" :class="$style.data">
 				<Flex direction="column" gap="24" :class="$style.main">
 					<Flex align="center" gap="12" :class="$style.key_value">
-						<Flex align="center" justify="center" :class="$style.avatar_container">
+						<Flex v-if="rollup.logo" align="center" justify="center" :class="$style.avatar_container">
 							<img :src="rollup.logo" :class="$style.avatar_image" />
 						</Flex>
 
@@ -186,7 +186,7 @@ watch(
 						</Flex>
 					</Flex>
 					<Flex align="center" justify="start" gap="12">
-						<Tooltip position="start" delay="500">
+						<Tooltip v-if="rollup.website" position="start" delay="500">
 							<a :href="rollup.website" target="_blank">
 								<Icon name="globe" size="14" color="secondary" :class="$style.btn" />
 							</a>
@@ -195,7 +195,8 @@ watch(
 								{{ rollup.website }}
 							</template>
 						</Tooltip>
-						<Tooltip position="start" delay="500">
+
+						<Tooltip v-if="rollup.twitter" position="start" delay="500">
 							<a :href="rollup.twitter" target="_blank">
 								<Icon name="twitter" size="14" color="secondary" :class="$style.btn" />
 							</a>
@@ -204,6 +205,16 @@ watch(
 								{{ rollup.twitter }}
 							</template>
 						</Tooltip>
+
+						<Tooltip v-if="rollup.github" position="start" delay="500">
+							<a :href="rollup.github" target="_blank">
+								<Icon name="github" size="14" color="secondary" :class="$style.btn" />
+							</a>
+
+							<template #content>
+								{{ rollup.twitter }}
+							</template>
+						</Tooltip>
 					</Flex>
 
 					<Flex direction="column" gap="16">
@@ -333,7 +344,7 @@ watch(
 .data {
 	min-width: 384px;
 	max-width: 384px;
-	max-height: 534px;
+	/* max-height: 534px; */
 
 	border-radius: 4px 4px 4px 8px;
 	background: var(--card-background);

From 8c1c4bcfc08ec85b9a5336b84653d6a47ed112d2 Mon Sep 17 00:00:00 2001
From: GussevPM <GussevPM@GMail.Com>
Date: Mon, 29 Jan 2024 19:58:16 +0100
Subject: [PATCH 35/41] Fix version link alignment

---
 components/TheFooter.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/components/TheFooter.vue b/components/TheFooter.vue
index a47e23fc..8eb7ea49 100644
--- a/components/TheFooter.vue
+++ b/components/TheFooter.vue
@@ -67,8 +67,10 @@ const handleChangeTheme = (theme) => {
 					<Text size="13" weight="500" color="tertiary">-</Text>
 					<Text size="13" weight="500" color="tertiary">Celestia Explorer</Text>
 					<a :href="`https://github.com/celenium-io/celenium-interface/releases/tag/v${appConfig.version}`" target="_blank">
-						<Text size="13" weight="500" color="support">v</Text>
-						<Text size="13" weight="500" color="tertiary">{{ appConfig.version }}</Text>
+						<Flex>
+							<Text size="13" weight="500" color="support">v</Text>
+							<Text size="13" weight="500" color="tertiary">{{ appConfig.version }}</Text>
+						</Flex>
 					</a>
 				</Flex>
 

From fff3e6efec37155570d33f8932421cb4d6fba496 Mon Sep 17 00:00:00 2001
From: GussevPM <GussevPM@GMail.Com>
Date: Mon, 29 Jan 2024 21:31:22 +0100
Subject: [PATCH 36/41] Some small text changes

---
 components/modules/address/AddressOverview.vue   | 2 +-
 components/modules/namespace/NamespaceCharts.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/modules/address/AddressOverview.vue b/components/modules/address/AddressOverview.vue
index 83ba1f75..2a0e44e8 100644
--- a/components/modules/address/AddressOverview.vue
+++ b/components/modules/address/AddressOverview.vue
@@ -550,7 +550,7 @@ const handleOpenQRModal = () => {
 							<Flex v-else align="center" justify="center" direction="column" gap="8" wide :class="$style.empty">
 								<Text size="13" weight="600" color="secondary" align="center"> No Blobs</Text>
 								<Text size="12" weight="500" height="160" color="tertiary" align="center" style="max-width: 220px">
-									This address does not contain blobs
+									This address did not push any blobs
 								</Text>
 							</Flex>
 						</template>
diff --git a/components/modules/namespace/NamespaceCharts.vue b/components/modules/namespace/NamespaceCharts.vue
index 7640c8ce..8c1ea6ac 100644
--- a/components/modules/namespace/NamespaceCharts.vue
+++ b/components/modules/namespace/NamespaceCharts.vue
@@ -315,7 +315,7 @@ onBeforeUnmount(() => {
 
 		<Flex justify="between" gap="32" :class="$style.data">
 			<Flex direction="column" gap="20" wide>
-				<Text size="13" weight="600" color="primary">Blob Size Usage</Text>
+				<Text size="13" weight="600" color="primary">Storage Usage</Text>
 
 				<Flex ref="chartWrapperEl" direction="column" :class="$style.chart_wrapper">
 					<Flex direction="column" justify="between" :class="[$style.axis, $style.y]">

From c0ea70b72eaf361af48a67b5caedbbe33ab69ef1 Mon Sep 17 00:00:00 2001
From: GusevPM <108540436+GusevPM@users.noreply.github.com>
Date: Mon, 29 Jan 2024 22:50:58 +0100
Subject: [PATCH 37/41] Fix rollup github tooltip

---
 components/modules/rollup/RollupOverview.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/modules/rollup/RollupOverview.vue b/components/modules/rollup/RollupOverview.vue
index 29abb7c2..94698cab 100644
--- a/components/modules/rollup/RollupOverview.vue
+++ b/components/modules/rollup/RollupOverview.vue
@@ -212,7 +212,7 @@ watch(
 							</a>
 
 							<template #content>
-								{{ rollup.twitter }}
+								{{ rollup.github }}
 							</template>
 						</Tooltip>
 					</Flex>

From 65297c183542de2a6c6612df2ebac367ca88b1f9 Mon Sep 17 00:00:00 2001
From: xdeq <celldwellerq@gmail.com>
Date: Wed, 31 Jan 2024 03:08:00 +0300
Subject: [PATCH 38/41] ref tx page: messages + events + raw data modal

---
 .../namespace/tables/MessagesTable.vue        |   8 +-
 components/modules/tx/MessagesTable.vue       | 140 ++++++++++++++++++
 components/modules/tx/TxOverview.vue          | 137 ++++++++++++++---
 services/api/tx.js                            |   2 +-
 store/cache.js                                |   2 +
 5 files changed, 261 insertions(+), 28 deletions(-)
 create mode 100644 components/modules/tx/MessagesTable.vue

diff --git a/components/modules/namespace/tables/MessagesTable.vue b/components/modules/namespace/tables/MessagesTable.vue
index 879a72a7..e48a8f97 100644
--- a/components/modules/namespace/tables/MessagesTable.vue
+++ b/components/modules/namespace/tables/MessagesTable.vue
@@ -36,7 +36,7 @@ const props = defineProps({
 			<tbody>
 				<tr v-for="message in messages">
 					<td style="width: 1px">
-						<NuxtLink :to="`/tx/${message.tx.hash}`">
+						<NuxtLink :to="`/tx/${message.tx?.hash}`">
 							<Tooltip position="start" delay="500">
 								<Flex align="center" gap="8">
 									<Icon
@@ -78,14 +78,14 @@ const props = defineProps({
 						</NuxtLink>
 					</td>
 					<td style="width: 1px">
-						<NuxtLink :to="`/tx/${message.tx.hash}`">
+						<NuxtLink :to="`/tx/${message.tx?.hash}`">
 							<Flex align="center">
 								<MessageTypeBadge :types="[message.type]" />
 							</Flex>
 						</NuxtLink>
 					</td>
 					<td>
-						<NuxtLink :to="`/tx/${message.tx.hash}`">
+						<NuxtLink :to="`/tx/${message.tx?.hash}`">
 							<Flex align="center">
 								<Text size="13" weight="600" color="primary">
 									{{ DateTime.fromISO(message.time).toRelative({ locale: "en", style: "short" }) }}
@@ -94,7 +94,7 @@ const props = defineProps({
 						</NuxtLink>
 					</td>
 					<td>
-						<NuxtLink :to="`/tx/${message.tx.hash}`">
+						<NuxtLink :to="`/tx/${message.tx?.hash}`">
 							<Flex align="center">
 								<Outline @click.prevent="router.push(`/block/${message.height}`)">
 									<Flex align="center" gap="6">
diff --git a/components/modules/tx/MessagesTable.vue b/components/modules/tx/MessagesTable.vue
new file mode 100644
index 00000000..90f1e5e3
--- /dev/null
+++ b/components/modules/tx/MessagesTable.vue
@@ -0,0 +1,140 @@
+<script setup>
+/** Vendor */
+import { DateTime } from "luxon"
+
+/** UI */
+import Tooltip from "@/components/ui/Tooltip.vue"
+
+/** Shared Components */
+import MessageTypeBadge from "@/components/shared/MessageTypeBadge.vue"
+
+/** Services */
+import { comma, space } from "@/services/utils"
+
+/** Store */
+import { useModalsStore } from "@/store/modals"
+import { useCacheStore } from "@/store/cache"
+const modalsStore = useModalsStore()
+const cacheStore = useCacheStore()
+
+const router = useRouter()
+
+const props = defineProps({
+	messages: {
+		type: Array,
+		required: true,
+	},
+})
+
+const handleViewRawMessage = (message) => {
+	cacheStore.current._target = "message"
+	cacheStore.current.message = message
+	modalsStore.open("rawData")
+}
+</script>
+
+<template>
+	<div :class="$style.wrapper_tx_messages">
+		<table :class="$style.table">
+			<thead>
+				<tr>
+					<th><Text size="12" weight="600" color="tertiary">Type</Text></th>
+					<th><Text size="12" weight="600" color="tertiary">Time</Text></th>
+					<th><Text size="12" weight="600" color="tertiary">Block</Text></th>
+				</tr>
+			</thead>
+
+			<tbody>
+				<tr v-for="message in messages" @click="handleViewRawMessage(message)">
+					<td style="width: 1px">
+						<Flex align="center">
+							<MessageTypeBadge :types="[message.type]" />
+						</Flex>
+					</td>
+					<td>
+						<Flex align="center">
+							<Text size="13" weight="600" color="primary">
+								{{ DateTime.fromISO(message.time).toRelative({ locale: "en", style: "short" }) }}
+							</Text>
+						</Flex>
+					</td>
+					<td>
+						<Flex align="center">
+							<Outline @click.prevent="router.push(`/block/${message.height}`)">
+								<Flex align="center" gap="6">
+									<Icon name="block" size="14" color="secondary" />
+
+									<Text size="13" weight="600" color="primary" tabular>{{ comma(message.height) }}</Text>
+								</Flex>
+							</Outline>
+						</Flex>
+					</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+</template>
+
+<style module>
+.wrapper_tx_messages {
+	min-width: 100%;
+	width: 0;
+	height: 100%;
+
+	overflow-x: auto;
+
+	& .table {
+		width: 100%;
+		height: fit-content;
+
+		border-spacing: 0px;
+
+		padding-bottom: 8px;
+
+		& tbody {
+			& tr {
+				cursor: pointer;
+
+				transition: all 0.05s ease;
+
+				&:hover {
+					background: var(--op-5);
+				}
+
+				&:active {
+					background: var(--op-8);
+				}
+			}
+		}
+
+		& tr th {
+			text-align: left;
+			padding: 0;
+			padding-right: 16px;
+			padding-top: 16px;
+			padding-bottom: 8px;
+
+			&:first-child {
+				padding-left: 16px;
+			}
+
+			& span {
+				display: flex;
+			}
+		}
+
+		& tr td {
+			padding: 0;
+			padding-right: 24px;
+			padding-top: 7px;
+			padding-bottom: 7px;
+
+			white-space: nowrap;
+
+			&:first-child {
+				padding-left: 16px;
+			}
+		}
+	}
+}
+</style>
diff --git a/components/modules/tx/TxOverview.vue b/components/modules/tx/TxOverview.vue
index 27f56a3c..50bc2cae 100644
--- a/components/modules/tx/TxOverview.vue
+++ b/components/modules/tx/TxOverview.vue
@@ -9,6 +9,7 @@ import Button from "~/components/ui/Button.vue"
 
 /** Shared Components */
 import MessageTypeBadge from "@/components/shared/MessageTypeBadge.vue"
+import MessagesTable from "@/components/modules/tx/MessagesTable.vue"
 
 /** Services */
 import { comma, tia, splitAddress } from "@/services/utils"
@@ -16,7 +17,7 @@ import { MessageIconMap } from "@/services/constants/mapping"
 import amp from "@/services/amp"
 
 /** API */
-import { fetchTxEvents } from "@/services/api/tx"
+import { fetchTxEvents, fetchTxMessages } from "@/services/api/tx"
 
 /** Store */
 import { useModalsStore } from "@/store/modals"
@@ -54,6 +55,8 @@ const bookmarkText = computed(() => {
 	return isBookmarked.value ? "Saved" : "Save"
 })
 
+const activeTab = ref("messages")
+
 const showAll = ref(false)
 const handleShowAll = () => {
 	showAll.value = !showAll.value
@@ -61,6 +64,8 @@ const handleShowAll = () => {
 	amp.log("toggleShowAll")
 }
 
+const messages = ref([])
+
 const events = ref([])
 const filteredEvents = computed(() => (showAll.value ? events.value : events.value.slice(0, 10)))
 
@@ -68,8 +73,11 @@ const { data: rawEvents } = await fetchTxEvents(props.tx.hash)
 events.value = rawEvents.value.sort((a, b) => a.position - b.position)
 cacheStore.current.events = events.value
 
-onMounted(() => {
+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 = () => {
@@ -123,6 +131,12 @@ const handleViewRawEvents = () => {
 	cacheStore.current._target = "events"
 	modalsStore.open("rawData")
 }
+
+const handleViewRawEvent = (event) => {
+	cacheStore.current._target = "event"
+	cacheStore.current.event = event
+	modalsStore.open("rawData")
+}
 </script>
 
 <template>
@@ -282,30 +296,41 @@ const handleViewRawEvents = () => {
 				</Flex>
 			</Flex>
 
-			<Flex direction="column" gap="16" wide :class="$style.events_wrapper">
-				<Text size="13" weight="600" color="primary"> Events </Text>
-
-				<Flex direction="column">
-					<Flex align="center" gap="8" :class="$style.message_types">
-						<template v-if="tx.message_types.length">
-							<Icon
-								:name="
-									MessageIconMap[tx.message_types[0].replace('Msg', '').toLowerCase()]
-										? MessageIconMap[tx.message_types[0].replace('Msg', '').toLowerCase()]
-										: 'zap'
-								"
-								size="14"
-								color="secondary"
-							/>
-							<Text size="12" weight="600" color="primary">
-								{{ tx.message_types.map((type) => type.replace("Msg", "")).join(", ") }}
-							</Text>
-						</template>
+			<Flex direction="column" gap="4" wide :class="$style.events_wrapper">
+				<Flex align="center" justify="between" :class="$style.tabs_wrapper">
+					<Flex gap="4" :class="$style.tabs">
+						<Flex
+							@click="activeTab = 'messages'"
+							align="center"
+							gap="6"
+							:class="[$style.tab, activeTab === 'messages' && $style.active]"
+						>
+							<Icon name="message" size="12" color="secondary" />
 
-						<Text v-else size="12" weight="600" color="tertiary">No Message Types</Text>
+							<Text size="13" weight="600">Messages</Text>
+						</Flex>
+
+						<Flex
+							@click="activeTab = 'events'"
+							align="center"
+							gap="6"
+							:class="[$style.tab, activeTab === 'events' && $style.active]"
+						>
+							<Icon name="zap" size="12" color="secondary" />
+
+							<Text size="13" weight="600">Events</Text>
+						</Flex>
 					</Flex>
+				</Flex>
 
-					<Flex v-for="(event, idx) in filteredEvents" align="center" gap="12" :class="$style.event">
+				<Flex v-if="activeTab === 'events'" direction="column" :class="[$style.inner, $style.events]">
+					<Flex
+						v-for="(event, idx) in filteredEvents"
+						@click="handleViewRawEvent(event)"
+						align="center"
+						gap="12"
+						:class="$style.event"
+					>
 						<Flex
 							direction="column"
 							align="center"
@@ -583,6 +608,9 @@ const handleViewRawEvents = () => {
 						</Flex>
 					</Flex>
 				</Flex>
+				<Flex v-if="activeTab === 'messages'" :class="$style.inner">
+					<MessagesTable :messages="messages" />
+				</Flex>
 
 				<Button v-if="events.length > 10" @click="handleShowAll" type="secondary" size="mini">
 					{{ !showAll ? "View More" : "Hide" }}
@@ -655,10 +683,61 @@ const handleViewRawEvents = () => {
 
 .events_wrapper {
 	min-width: 0;
+}
+
+.tabs_wrapper {
+	min-height: 44px;
+	overflow-x: auto;
+
+	border-radius: 4px;
+	background: var(--card-background);
+
+	padding: 0 8px;
+}
+
+.tabs_wrapper::-webkit-scrollbar {
+	display: none;
+}
+
+.tab {
+	height: 28px;
+
+	cursor: pointer;
+	border-radius: 6px;
+
+	padding: 0 8px;
+
+	transition: all 0.1s ease;
+
+	& span {
+		color: var(--txt-tertiary);
+
+		transition: all 0.1s ease;
+	}
+
+	&:hover {
+		& span {
+			color: var(--txt-secondary);
+		}
+	}
+}
+
+.tab.active {
+	background: var(--op-8);
+
+	& span {
+		color: var(--txt-primary);
+	}
+}
+
+.inner {
+	height: 100%;
 
 	border-radius: 4px 4px 8px 4px;
 	background: var(--card-background);
+}
 
+.events {
 	padding: 16px;
 }
 
@@ -676,6 +755,8 @@ const handleViewRawEvents = () => {
 .event {
 	height: 36px;
 
+	cursor: pointer;
+
 	& .left {
 		height: 100%;
 
@@ -753,4 +834,14 @@ const handleViewRawEvents = () => {
 		}
 	}
 }
+
+@media (max-width: 400px) {
+	.tabs_wrapper {
+		overflow-x: auto;
+
+		&::-webkit-scrollbar {
+			display: none;
+		}
+	}
+}
 </style>
diff --git a/services/api/tx.js b/services/api/tx.js
index a53dad45..c228f076 100644
--- a/services/api/tx.js
+++ b/services/api/tx.js
@@ -45,7 +45,7 @@ export const fetchTxMessages = async (hash) => {
 	try {
 		const url = new URL(`${useServerURL()}/tx/${hash}/messages`)
 
-		const data = await useFetch(url.href)
+		const data = await $fetch(url.href)
 		return data
 	} catch (error) {
 		console.error(error)
diff --git a/store/cache.js b/store/cache.js
index 42a72ec0..22d3d1f1 100644
--- a/store/cache.js
+++ b/store/cache.js
@@ -30,6 +30,8 @@ export const useCacheStore = defineStore("cache", () => {
 		/** tx */
 		transaction: null,
 		events: null,
+		message: null,
+		event: null,
 
 		/** address */
 		address: null,

From c3fd4cca8f9a01949a938d323df90b98ecbad997 Mon Sep 17 00:00:00 2001
From: xdeq <celldwellerq@gmail.com>
Date: Wed, 31 Jan 2024 03:24:39 +0300
Subject: [PATCH 39/41] test keplr

---
 components/TheHeader.vue | 26 +++++++++++++++++++++-----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/components/TheHeader.vue b/components/TheHeader.vue
index 4029e3cc..7efd2df1 100644
--- a/components/TheHeader.vue
+++ b/components/TheHeader.vue
@@ -28,7 +28,15 @@ const head = computed(() => appStore.head)
 const featurePreviewMode = ref(false)
 const isWalletAvailable = ref(false)
 
-onMounted(() => {
+const account = ref("")
+
+const getAccounts = async () => {
+	const offlineSigner = window.getOfflineSigner("celestia")
+	const accounts = await offlineSigner.getAccounts()
+	if (accounts.length) account.value = accounts[0].address
+}
+
+onMounted(async () => {
 	featurePreviewMode.value = localStorage.featurePreview
 	isWalletAvailable.value = !!window.keplr
 })
@@ -73,8 +81,10 @@ const handleNavigate = (url) => {
 	window.location.replace(url)
 }
 
-const handleConnect = () => {
-	window.keplr.enable("celestia")
+const handleConnect = async () => {
+	await window.keplr.enable("celestia")
+
+	getAccounts()
 }
 </script>
 
@@ -154,8 +164,14 @@ const handleConnect = () => {
 					</template>
 				</Tooltip>
 
-				<Button v-if="featurePreviewMode" @click="handleConnect" type="white" size="small" :disabled="!isWalletAvailable">
-					Connect
+				<Button
+					v-if="featurePreviewMode"
+					@click="handleConnect"
+					type="white"
+					size="small"
+					:disabled="!isWalletAvailable || account.length"
+				>
+					{{ account ? `celestia...${account.slice(-6)}` : "Connect" }}
 				</Button>
 			</Flex>
 		</Flex>

From eba300800ad5f95e29da595823a2f4e2a791996b Mon Sep 17 00:00:00 2001
From: GussevPM <GussevPM@GMail.Com>
Date: Wed, 31 Jan 2024 14:50:25 +0100
Subject: [PATCH 40/41] Feed price + GasPriceHeatMap

---
 components/Feed.vue                        | 14 ++++++++++----
 components/modules/gas/GasPriceHeatmap.vue |  4 +++-
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/components/Feed.vue b/components/Feed.vue
index c54c22bc..27ffb338 100644
--- a/components/Feed.vue
+++ b/components/Feed.vue
@@ -124,9 +124,9 @@ onMounted(async () => {
 
 					<Flex v-if="price.diff" align="center" gap="4">
 						<Icon v-if="price.side === 'rise'" name="arrow-circle-right-up" size="12" color="neutral-green" />
-						<Icon v-else name="arrow-circle-right-down" size="12" color="secondary" />
+						<Icon v-else name="arrow-circle-right-down" size="12" color="red" />
 
-						<Text size="12" weight="600" :color="price.side === 'rise' ? 'neutral-green' : 'secondary'" noWrap>
+						<Text size="12" weight="600" :color="price.side === 'rise' ? 'neutral-green' : 'red'" noWrap>
 							{{ price.diff.toFixed(2) }}%</Text
 						>
 					</Flex>
@@ -135,11 +135,17 @@ onMounted(async () => {
 
 				<template #content>
 					<Flex direction="column" gap="6">
-						Price diff from the previous day
+						<Flex align="center" gap="4">
+							<Text color="primary">Price diff from the previous day</Text>
+						</Flex>
 
 						<Flex align="center" gap="4">
 							<Text color="tertiary">{{ DateTime.fromISO(series[1].time).setLocale("en").toFormat("ff") }} -></Text>
-							<Text color="primary">${{ series[1].close }}</Text>
+							<Text color="primary">${{ parseFloat(series[1].close).toFixed(2) }}</Text>
+						</Flex>
+
+						<Flex align="center" gap="4">
+							<Text size="11" color="tertiary">Binance quotes</Text>
 						</Flex>
 					</Flex>
 				</template>
diff --git a/components/modules/gas/GasPriceHeatmap.vue b/components/modules/gas/GasPriceHeatmap.vue
index 2b59c88b..728db855 100644
--- a/components/modules/gas/GasPriceHeatmap.vue
+++ b/components/modules/gas/GasPriceHeatmap.vue
@@ -15,6 +15,7 @@ const props = defineProps({
 const seriesByDay = ref({})
 
 const maxValue = ref(0)
+const days = [7, 6, 5, 4, 3, 2, 1]
 
 onMounted(async () => {
 	let rawSeries = []
@@ -43,6 +44,7 @@ onMounted(async () => {
 	})
 
 	Object.keys(seriesByDay.value).forEach((d) => {
+		seriesByDay.value[d].reverse();
 		if (seriesByDay.value[d].length !== 24) {
 			while (seriesByDay.value[d].length !== 24) {
 				seriesByDay.value[d].push({
@@ -72,7 +74,7 @@ onMounted(async () => {
 				</tr>
 			</thead>
 			<tbody>
-				<tr v-for="dayIdx in 7">
+				<tr v-for="dayIdx in days">
 					<td
 						v-for="hour in seriesByDay[
 							DateTime.now()

From 268e5be50705e90b3c47b92cbcf6730186caa1d1 Mon Sep 17 00:00:00 2001
From: xdeq <celldwellerq@gmail.com>
Date: Wed, 31 Jan 2024 19:47:00 +0300
Subject: [PATCH 41/41] feat: load more events

---
 components/modules/tx/TxOverview.vue | 41 +++++++++++++---------------
 services/api/tx.js                   |  6 ++--
 2 files changed, 23 insertions(+), 24 deletions(-)

diff --git a/components/modules/tx/TxOverview.vue b/components/modules/tx/TxOverview.vue
index 50bc2cae..ffe0836a 100644
--- a/components/modules/tx/TxOverview.vue
+++ b/components/modules/tx/TxOverview.vue
@@ -57,27 +57,30 @@ const bookmarkText = computed(() => {
 
 const activeTab = ref("messages")
 
-const showAll = ref(false)
-const handleShowAll = () => {
-	showAll.value = !showAll.value
-
-	amp.log("toggleShowAll")
-}
-
 const messages = ref([])
 
+const offset = ref(0)
 const events = ref([])
-const filteredEvents = computed(() => (showAll.value ? events.value : events.value.slice(0, 10)))
 
-const { data: rawEvents } = await fetchTxEvents(props.tx.hash)
-events.value = rawEvents.value.sort((a, b) => a.position - b.position)
-cacheStore.current.events = events.value
+const handleLoadMore = async () => {
+	if (events.length === props.tx.events_count) return
+
+	offset.value += 10
+
+	const rawEvents = await fetchTxEvents({ hash: props.tx.hash, offset: offset.value })
+	events.value = [...events.value, ...rawEvents].sort((a, b) => a.position - b.position)
+	cacheStore.current.events = events.value
+}
 
 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 rawEvents = await fetchTxEvents({ hash: props.tx.hash })
+	events.value = rawEvents.sort((a, b) => a.position - b.position)
+	cacheStore.current.events = events.value
 })
 
 const handleBookmark = () => {
@@ -324,13 +327,7 @@ const handleViewRawEvent = (event) => {
 				</Flex>
 
 				<Flex v-if="activeTab === 'events'" direction="column" :class="[$style.inner, $style.events]">
-					<Flex
-						v-for="(event, idx) in filteredEvents"
-						@click="handleViewRawEvent(event)"
-						align="center"
-						gap="12"
-						:class="$style.event"
-					>
+					<Flex v-for="(event, idx) in events" @click="handleViewRawEvent(event)" align="center" gap="12" :class="$style.event">
 						<Flex
 							direction="column"
 							align="center"
@@ -607,14 +604,14 @@ const handleViewRawEvent = (event) => {
 							</Text>
 						</Flex>
 					</Flex>
+
+					<Button @click="handleLoadMore" type="secondary" size="mini" :disabled="tx.events_count == events.length">
+						Load More
+					</Button>
 				</Flex>
 				<Flex v-if="activeTab === 'messages'" :class="$style.inner">
 					<MessagesTable :messages="messages" />
 				</Flex>
-
-				<Button v-if="events.length > 10" @click="handleShowAll" type="secondary" size="mini">
-					{{ !showAll ? "View More" : "Hide" }}
-				</Button>
 			</Flex>
 		</Flex>
 	</Flex>
diff --git a/services/api/tx.js b/services/api/tx.js
index c228f076..05b79a7c 100644
--- a/services/api/tx.js
+++ b/services/api/tx.js
@@ -52,11 +52,13 @@ export const fetchTxMessages = async (hash) => {
 	}
 }
 
-export const fetchTxEvents = async (hash) => {
+export const fetchTxEvents = async ({ hash, offset }) => {
 	try {
 		const url = new URL(`${useServerURL()}/tx/${hash}/events`)
 
-		const data = await useFetch(url.href)
+		if (offset) url.searchParams.append("offset", offset)
+
+		const data = await $fetch(url.href)
 		return data
 	} catch (error) {
 		console.error(error)