From cb1fc0c8a41890d078696a84a37be001e266020c Mon Sep 17 00:00:00 2001
From: GussevPM <GussevPM@GMail.Com>
Date: Mon, 5 May 2025 15:27:45 +0200
Subject: [PATCH 01/22] Init

---
 components/LeftSidebar.vue         | 2 +-
 components/OgImage/RollupImage.vue | 3 +--
 services/config.js                 | 4 ++--
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/components/LeftSidebar.vue b/components/LeftSidebar.vue
index 97af62c4..4b6f398b 100644
--- a/components/LeftSidebar.vue
+++ b/components/LeftSidebar.vue
@@ -95,7 +95,7 @@ const mainLinks = reactive([
 				name: "Ecosystem",
 				path: "/stats?tab=ecosystem",
 				queryParam: {tab: "ecosystem"},
-				show: true,
+				show: false,
 				// show: isMainnet(),
 			},
 		],
diff --git a/components/OgImage/RollupImage.vue b/components/OgImage/RollupImage.vue
index b21934d2..853e8026 100644
--- a/components/OgImage/RollupImage.vue
+++ b/components/OgImage/RollupImage.vue
@@ -18,8 +18,7 @@ const bgStyles = computed(() => {
 	return {
 		style: {
 			position: "absolute",
-			top: "0",
-			left: "0",
+			inset: "0",
 			filter: "grayscale(1)",
 			opacity: "0.05",
 		},
diff --git a/services/config.js b/services/config.js
index d67df3e3..f88cf290 100644
--- a/services/config.js
+++ b/services/config.js
@@ -42,7 +42,7 @@ export const useServerURL = () => {
 			return Server.API.dev
 
 		default:
-			return Server.API.mainnet
+			return Server.API.arabica
 	}
 }
 
@@ -69,7 +69,7 @@ export const useSocketURL = () => {
 			return Server.WSS.dev
 
 		default:
-			return Server.WSS.mainnet
+			return Server.WSS.arabica
 	}
 }
 

From 961badfc5d123259dbf154e086de30af674a6fd3 Mon Sep 17 00:00:00 2001
From: GussevPM <GussevPM@GMail.Com>
Date: Mon, 5 May 2025 15:43:07 +0200
Subject: [PATCH 02/22] Tx preview

---
 pages/tx/[hash].vue | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/pages/tx/[hash].vue b/pages/tx/[hash].vue
index c984f360..bfa68573 100644
--- a/pages/tx/[hash].vue
+++ b/pages/tx/[hash].vue
@@ -28,13 +28,16 @@ defineOgImage({
 	component: "TxImage",
 	cacheKey: `${tx.value?.hash}`,
 })
+console.log('useRequestURL()', useRequestURL());
+
 
 useHead({
 	title: `Transaction ${tx.value?.hash.toUpperCase().slice(0, 4)} ••• ${tx.value?.hash.toUpperCase().slice(-4)} - Celestia Explorer`,
 	link: [
 		{
 			rel: "canonical",
-			href: `https://celenium.io${route.path}`,
+			// href: `https://celenium.io${route.path}`,
+			href: `${useRequestURL().origin}${useRequestURL().pathname}`,
 		},
 	],
 	meta: [
@@ -58,11 +61,13 @@ useHead({
 		},
 		{
 			property: "og:url",
-			content: `https://celenium.io${route.path}`,
+			content: `${useRequestURL().origin}${useRequestURL().pathname}`,
+			// content: `https://celenium.io${route.path}`,
 		},
 		{
 			property: "og:image",
-			content: `https://celenium.io${route.path}__og_image__/og.png`,
+			content: `${useRequestURL().origin}${useRequestURL().pathname}__og_image__/og.png`,
+			// content: `https://celenium.io${route.path}__og_image__/og.png`,
 		},
 		{
 			name: "twitter:title",

From ce7cf58ac68d414707d6ea68b8548083fd270a6b Mon Sep 17 00:00:00 2001
From: GussevPM <GussevPM@GMail.Com>
Date: Mon, 5 May 2025 16:03:51 +0200
Subject: [PATCH 03/22] Change config

---
 components/OgImage/TxImage.vue | 2 ++
 services/config.js             | 4 ++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/components/OgImage/TxImage.vue b/components/OgImage/TxImage.vue
index 9cd63416..e32778c6 100644
--- a/components/OgImage/TxImage.vue
+++ b/components/OgImage/TxImage.vue
@@ -19,6 +19,8 @@ const bgStyles = computed(() => {
 		style: {
 			position: "absolute",
 			top: "0",
+			right: "0",
+			bottom: "0",
 			left: "0",
 			filter: "grayscale(1)",
 			opacity: "0.05",
diff --git a/services/config.js b/services/config.js
index f88cf290..d67df3e3 100644
--- a/services/config.js
+++ b/services/config.js
@@ -42,7 +42,7 @@ export const useServerURL = () => {
 			return Server.API.dev
 
 		default:
-			return Server.API.arabica
+			return Server.API.mainnet
 	}
 }
 
@@ -69,7 +69,7 @@ export const useSocketURL = () => {
 			return Server.WSS.dev
 
 		default:
-			return Server.WSS.arabica
+			return Server.WSS.mainnet
 	}
 }
 

From bb8f9fb50096f6bde806ef48522dc7645ff149b7 Mon Sep 17 00:00:00 2001
From: GussevPM <GussevPM@GMail.Com>
Date: Mon, 5 May 2025 16:14:40 +0200
Subject: [PATCH 04/22] Fix

---
 components/OgImage/TxImage.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/components/OgImage/TxImage.vue b/components/OgImage/TxImage.vue
index e32778c6..d82cb845 100644
--- a/components/OgImage/TxImage.vue
+++ b/components/OgImage/TxImage.vue
@@ -17,11 +17,11 @@ const props = defineProps({
 const bgStyles = computed(() => {
 	return {
 		style: {
-			position: "absolute",
-			top: "0",
-			right: "0",
-			bottom: "0",
-			left: "0",
+			// position: "absolute",
+			// top: "0",
+			// right: "0",
+			// bottom: "0",
+			// left: "0",
 			filter: "grayscale(1)",
 			opacity: "0.05",
 		},
@@ -32,8 +32,8 @@ const messages = computed(() => [...new Set(props.tx.message_types)])
 </script>
 
 <template>
-	<div class="w-full h-full" :style="{ background: '#111111', padding: '100px 120px', fontFamily: 'IBM+Plex+Mono' }">
-		<img src="/img/bg.png" v-bind="bgStyles" />
+	<div class="w-full h-full" :style="{ background: '#111111', padding: '100px 120px', fontFamily: 'IBM+Plex+Mono', overflow: 'hidden'  }">
+		<img src="/img/bg.png" v-bind="bgStyles" style="position:absolute; inset:0; width:100%; height:100%; object-fit:cover;" />
 
 		<div :style="{ height: '100%', display: 'flex', flexDirection: 'column', gap: '40px' }">
 			<div :style="{ display: 'flex', alignItems: 'center', gap: '24px' }">

From bc5cc1080d5fc708f321bb142664c67a1b57a571 Mon Sep 17 00:00:00 2001
From: xdeq <celldwellerq@gmail.com>
Date: Thu, 15 May 2025 01:26:55 +0300
Subject: [PATCH 05/22] fix

---
 components/OgImage/TxImage.vue | 19 ++++++++-----------
 nuxt.config.ts                 |  2 +-
 2 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/components/OgImage/TxImage.vue b/components/OgImage/TxImage.vue
index d82cb845..c3beffde 100644
--- a/components/OgImage/TxImage.vue
+++ b/components/OgImage/TxImage.vue
@@ -17,11 +17,6 @@ const props = defineProps({
 const bgStyles = computed(() => {
 	return {
 		style: {
-			// position: "absolute",
-			// top: "0",
-			// right: "0",
-			// bottom: "0",
-			// left: "0",
 			filter: "grayscale(1)",
 			opacity: "0.05",
 		},
@@ -32,12 +27,12 @@ const messages = computed(() => [...new Set(props.tx.message_types)])
 </script>
 
 <template>
-	<div class="w-full h-full" :style="{ background: '#111111', padding: '100px 120px', fontFamily: 'IBM+Plex+Mono', overflow: 'hidden'  }">
-		<img src="/img/bg.png" v-bind="bgStyles" style="position:absolute; inset:0; width:100%; height:100%; object-fit:cover;" />
+	<div class="w-full h-full" :style="{ background: '#111111', padding: '100px 120px', fontFamily: 'IBM+Plex+Mono', overflow: 'hidden' }">
+		<img src="/img/bg.png" class="absolute inset-0" v-bind="bgStyles" />
 
 		<div :style="{ height: '100%', display: 'flex', flexDirection: 'column', gap: '40px' }">
-			<div :style="{ display: 'flex', alignItems: 'center', gap: '24px' }">
-				<div :style="{ display: 'flex', alignItems: 'center' }">
+			<div class="flex flex-row items-center" :style="{ gap: '24px' }">
+				<div class="flex items-center flex-nowrap">
 					<span :style="{ fontSize: '70px', color: 'rgba(255,255,255, 0.9)' }"> tx </span>
 					<span :style="{ fontSize: '70px', color: 'rgba(255,255,255, 0.3)' }">('</span>
 					<span :style="{ fontSize: '70px', color: '#FF8351' }">
@@ -78,9 +73,11 @@ const messages = computed(() => [...new Set(props.tx.message_types)])
 				</span>
 			</div>
 
-			<span :style="{ fontSize: '40px', color: 'rgba(255,255,255, 0.4)' }">{{ DateTime.fromISO(tx.time).toFormat("ff") }}</span>
+			<span :style="{ fontSize: '40px', marginBottom: '40px', color: 'rgba(255,255,255, 0.4)' }">{{
+				DateTime.fromISO(tx.time).toFormat("ff")
+			}}</span>
 
-			<div :style="{ display: 'flex', flexDirection: 'column', gap: '24px' }">
+			<div class="flex flex-col" :style="{ gap: '24px' }">
 				<div :style="{ display: 'flex', gap: '12px' }">
 					<span :style="{ fontSize: '40px', color: 'rgba(255,255,255, 0.3)' }">Fee: </span>
 					<span :style="{ fontSize: '40px', color: 'rgba(255,255,255, 0.6)' }">{{ tia(tx.fee) }} </span>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 6187dfc1..69d0558e 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -149,4 +149,4 @@ export default defineNuxtConfig({
 	},
 
 	compatibilityDate: "2025-04-02",
-})
\ No newline at end of file
+})

From 052e9c06cef3abda1b43d84938a849adb0a5bfb4 Mon Sep 17 00:00:00 2001
From: xdeq <celldwellerq@gmail.com>
Date: Thu, 15 May 2025 01:39:59 +0300
Subject: [PATCH 06/22] bump og-image

---
 package.json   |   2 +-
 pnpm-lock.yaml | 244 +++++++++++++++++++++++++++++++++++++------------
 2 files changed, 186 insertions(+), 60 deletions(-)

diff --git a/package.json b/package.json
index 39704dff..e3a9f5f2 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
 		"@unhead/vue": "^2.0.0-rc.1",
 		"cross-env": "^7.0.3",
 		"nuxt": "3.16.2",
-		"nuxt-og-image": "5.1.1",
+		"nuxt-og-image": "5.1.3",
 		"sass": "1.66.1",
 		"sass-loader": "13.3.2",
 		"unenv": "^1.9.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 526144f1..e4a18884 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -78,7 +78,7 @@ dependencies:
 devDependencies:
   '@nuxt/devtools':
     specifier: latest
-    version: 2.3.2(vite@6.2.6)(vue@3.5.13)
+    version: 2.4.1(vite@6.2.6)(vue@3.5.13)
   '@nuxtjs/sitemap':
     specifier: 7.2.10
     version: 7.2.10(h3@1.15.1)(vite@6.2.6)(vue@3.5.13)
@@ -92,8 +92,8 @@ devDependencies:
     specifier: 3.16.2
     version: 3.16.2(sass@1.66.1)(vite@6.2.6)
   nuxt-og-image:
-    specifier: 5.1.1
-    version: 5.1.1(@unhead/vue@2.0.5)(unstorage@1.15.0)(vite@6.2.6)(vue@3.5.13)
+    specifier: 5.1.3
+    version: 5.1.3(@unhead/vue@2.0.5)(unstorage@1.15.0)(vite@6.2.6)(vue@3.5.13)
   sass:
     specifier: 1.66.1
     version: 1.66.1
@@ -1145,12 +1145,12 @@ packages:
     resolution: {integrity: sha512-GBzP8zOc7CGWyFQS6dv1lQz8VVpz5C2yRszbXufwG/9zhStTIH50EtD87NmWbTMwXDvZLNg8GIpb1UFdH93JCA==}
     dev: true
 
-  /@nuxt/devtools-kit@2.3.2(magicast@0.3.5)(vite@6.2.6):
+  /@nuxt/devtools-kit@2.3.2(vite@6.2.6):
     resolution: {integrity: sha512-K0citnz9bSecPCLl4jGfE5I5St+E9XtDmOvYqq3ranGZGZ2Mvs5RwgUkaOrn4rulvUmBGBl7Exwh5YX9PONrEQ==}
     peerDependencies:
       vite: '>=6.0'
     dependencies:
-      '@nuxt/kit': 3.16.2(magicast@0.3.5)
+      '@nuxt/kit': 3.16.2
       '@nuxt/schema': 3.16.2
       execa: 8.0.1
       vite: 6.2.6(jiti@2.4.2)(sass@1.66.1)
@@ -1158,8 +1158,21 @@ packages:
       - magicast
     dev: true
 
-  /@nuxt/devtools-wizard@2.3.2:
-    resolution: {integrity: sha512-vrGjcb7O/ojrWM9FXjAyWgMLUTkb9bmQUCXc//wZw8YnJLR/hmmvo0XFwmz31BN7nMLZaMpUclROdlhRSPNf1Q==}
+  /@nuxt/devtools-kit@2.4.1(magicast@0.3.5)(vite@6.2.6):
+    resolution: {integrity: sha512-taA2Nm03JiV3I+SEYS/u1AfjvLm3V9PO8lh0xLsUk/2mlUnL6GZ9xLXrp8VRg11HHt7EPXERGQh8h4iSPU2bSQ==}
+    peerDependencies:
+      vite: '>=6.0'
+    dependencies:
+      '@nuxt/kit': 3.17.3(magicast@0.3.5)
+      '@nuxt/schema': 3.17.3
+      execa: 8.0.1
+      vite: 6.2.6(jiti@2.4.2)(sass@1.66.1)
+    transitivePeerDependencies:
+      - magicast
+    dev: true
+
+  /@nuxt/devtools-wizard@2.4.1:
+    resolution: {integrity: sha512-2BaryhfribzQ95UxR7vLLV17Pk1Otxg9ryqH71M1Yp0mybBFs6Z3b0v+RXfCb4BwA10s/tXBhfF13DHSSJF1+A==}
     hasBin: true
     dependencies:
       consola: 3.4.2
@@ -1169,26 +1182,26 @@ packages:
       pathe: 2.0.3
       pkg-types: 2.1.0
       prompts: 2.4.2
-      semver: 7.7.1
+      semver: 7.7.2
     dev: true
 
-  /@nuxt/devtools@2.3.2(vite@6.2.6)(vue@3.5.13):
-    resolution: {integrity: sha512-MMx7pUW0aPDRmhe3jy91srEiFWq/Q70rjbGoHhzpVosuvyvy/fi0oKOFQqN5V4V7jJLiEx4HAoD0QdqP0I6xBA==}
+  /@nuxt/devtools@2.4.1(vite@6.2.6)(vue@3.5.13):
+    resolution: {integrity: sha512-2gwjUF1J1Bp/V9ZTsYJe8sS9O3eg80gdf01fT8aEBcilR3wf0PSIxjEyYk+YENtrHPLXcnnUko89jHGq23MHPQ==}
     hasBin: true
     peerDependencies:
       vite: '>=6.0'
     dependencies:
-      '@nuxt/devtools-kit': 2.3.2(magicast@0.3.5)(vite@6.2.6)
-      '@nuxt/devtools-wizard': 2.3.2
-      '@nuxt/kit': 3.16.2(magicast@0.3.5)
-      '@vue/devtools-core': 7.7.2(vite@6.2.6)(vue@3.5.13)
-      '@vue/devtools-kit': 7.7.2
+      '@nuxt/devtools-kit': 2.4.1(magicast@0.3.5)(vite@6.2.6)
+      '@nuxt/devtools-wizard': 2.4.1
+      '@nuxt/kit': 3.17.3(magicast@0.3.5)
+      '@vue/devtools-core': 7.7.6(vite@6.2.6)(vue@3.5.13)
+      '@vue/devtools-kit': 7.7.6
       birpc: 2.3.0
       consola: 3.4.2
       destr: 2.0.5
       error-stack-parser-es: 1.0.5
       execa: 8.0.1
-      fast-npm-meta: 0.3.1
+      fast-npm-meta: 0.4.2
       get-port-please: 3.1.2
       hookable: 5.5.3
       image-meta: 0.2.1
@@ -1201,16 +1214,16 @@ packages:
       pathe: 2.0.3
       perfect-debounce: 1.0.0
       pkg-types: 2.1.0
-      semver: 7.7.1
+      semver: 7.7.2
       simple-git: 3.27.0
       sirv: 3.0.1
       structured-clone-es: 1.0.0
-      tinyglobby: 0.2.12
+      tinyglobby: 0.2.13
       vite: 6.2.6(jiti@2.4.2)(sass@1.66.1)
-      vite-plugin-inspect: 11.0.0(@nuxt/kit@3.16.2)(vite@6.2.6)
+      vite-plugin-inspect: 11.0.1(@nuxt/kit@3.17.3)(vite@6.2.6)
       vite-plugin-vue-tracer: 0.1.3(vite@6.2.6)(vue@3.5.13)
       which: 5.0.0
-      ws: 8.18.1
+      ws: 8.18.2
     transitivePeerDependencies:
       - bufferutil
       - supports-color
@@ -1218,7 +1231,7 @@ packages:
       - vue
     dev: true
 
-  /@nuxt/kit@3.16.2(magicast@0.3.5):
+  /@nuxt/kit@3.16.2:
     resolution: {integrity: sha512-K1SAUo2vweTfudKZzjKsZ5YJoxPLTspR5qz5+G61xtZreLpsdpDYfBseqsIAl5VFLJuszeRpWQ01jP9LfQ6Ksw==}
     engines: {node: '>=18.12.0'}
     dependencies:
@@ -1247,6 +1260,36 @@ packages:
     transitivePeerDependencies:
       - magicast
 
+  /@nuxt/kit@3.17.3(magicast@0.3.5):
+    resolution: {integrity: sha512-aw6u6mT3TnM/MmcCRDMv3i9Sbm5/ZMSJgDl+N+WsrWNDIQ2sWmsqdDkjb/HyXF20SNwc2891hRBkaQr3hG2mhA==}
+    engines: {node: '>=18.12.0'}
+    dependencies:
+      c12: 3.0.3(magicast@0.3.5)
+      consola: 3.4.2
+      defu: 6.1.4
+      destr: 2.0.5
+      errx: 0.1.0
+      exsolve: 1.0.5
+      ignore: 7.0.4
+      jiti: 2.4.2
+      klona: 2.0.6
+      knitwork: 1.2.0
+      mlly: 1.7.4
+      ohash: 2.0.11
+      pathe: 2.0.3
+      pkg-types: 2.1.0
+      scule: 1.3.0
+      semver: 7.7.2
+      std-env: 3.9.0
+      tinyglobby: 0.2.13
+      ufo: 1.6.1
+      unctx: 2.4.1
+      unimport: 5.0.1
+      untyped: 2.0.0
+    transitivePeerDependencies:
+      - magicast
+    dev: true
+
   /@nuxt/schema@3.16.2:
     resolution: {integrity: sha512-2HZPM372kuI/uw9VU/hOoYuzv803oZAtyoEKC5dQCQTKAQ293AjypF3WljMXUSReFS/hcbBSgGzYUPHr3Qo+pg==}
     engines: {node: ^14.18.0 || >=16.10.0}
@@ -1257,12 +1300,23 @@ packages:
       std-env: 3.9.0
     dev: true
 
+  /@nuxt/schema@3.17.3:
+    resolution: {integrity: sha512-z4hbeTtg8B2/2I8zqnCAQQ9JmIQA/BfFy/8cRkGKRIMNjOaTOdmAqMnNriSpyp9xfzWGpnvxPFgab/5uSjsAgA==}
+    engines: {node: ^14.18.0 || >=16.10.0}
+    dependencies:
+      '@vue/shared': 3.5.13
+      consola: 3.4.2
+      defu: 6.1.4
+      pathe: 2.0.3
+      std-env: 3.9.0
+    dev: true
+
   /@nuxt/telemetry@2.6.6:
     resolution: {integrity: sha512-Zh4HJLjzvm3Cq9w6sfzIFyH9ozK5ePYVfCUzzUQNiZojFsI2k1QkSBrVI9BGc6ArKXj/O6rkI6w7qQ+ouL8Cag==}
     engines: {node: '>=18.12.0'}
     hasBin: true
     dependencies:
-      '@nuxt/kit': 3.16.2(magicast@0.3.5)
+      '@nuxt/kit': 3.16.2
       citty: 0.1.6
       consola: 3.4.2
       destr: 2.0.5
@@ -1284,7 +1338,7 @@ packages:
     peerDependencies:
       vue: ^3.3.4
     dependencies:
-      '@nuxt/kit': 3.16.2(magicast@0.3.5)
+      '@nuxt/kit': 3.16.2
       '@rollup/plugin-replace': 6.0.2(rollup@4.40.0)
       '@vitejs/plugin-vue': 5.2.3(vite@6.2.6)(vue@3.5.13)
       '@vitejs/plugin-vue-jsx': 4.1.2(vite@6.2.6)(vue@3.5.13)
@@ -1348,8 +1402,8 @@ packages:
     resolution: {integrity: sha512-7w1Ys2XIE/QVTJn5dbt2p/hrmDoGO9Ay1S3o6LI5M/MDRzKPvnXi5ByRUcc7Sfa3LUpLad5/w4IOQ4lyxhq9Hw==}
     engines: {node: '>=18.0.0'}
     dependencies:
-      '@nuxt/devtools-kit': 2.3.2(magicast@0.3.5)(vite@6.2.6)
-      '@nuxt/kit': 3.16.2(magicast@0.3.5)
+      '@nuxt/devtools-kit': 2.3.2(vite@6.2.6)
+      '@nuxt/kit': 3.16.2
       chalk: 5.4.1
       defu: 6.1.4
       h3-compression: 0.3.2(h3@1.15.1)
@@ -1578,6 +1632,7 @@ packages:
     dependencies:
       is-glob: 4.0.3
       micromatch: 4.0.8
+      napi-wasm: 1.1.3
     dev: true
     bundledDependencies:
       - napi-wasm
@@ -1639,7 +1694,7 @@ packages:
     peerDependencies:
       pinia: ^3.0.2
     dependencies:
-      '@nuxt/kit': 3.16.2(magicast@0.3.5)
+      '@nuxt/kit': 3.16.2
       pinia: 3.0.2(vue@3.5.13)
     transitivePeerDependencies:
       - magicast
@@ -2655,17 +2710,17 @@ packages:
       '@vue/devtools-kit': 7.7.2
     dev: false
 
-  /@vue/devtools-core@7.7.2(vite@6.2.6)(vue@3.5.13):
-    resolution: {integrity: sha512-lexREWj1lKi91Tblr38ntSsy6CvI8ba7u+jmwh2yruib/ltLUcsIzEjCnrkh1yYGGIKXbAuYV2tOG10fGDB9OQ==}
+  /@vue/devtools-core@7.7.6(vite@6.2.6)(vue@3.5.13):
+    resolution: {integrity: sha512-ghVX3zjKPtSHu94Xs03giRIeIWlb9M+gvDRVpIZ/cRIxKHdW6HE/sm1PT3rUYS3aV92CazirT93ne+7IOvGUWg==}
     peerDependencies:
       vue: ^3.0.0
     dependencies:
-      '@vue/devtools-kit': 7.7.2
-      '@vue/devtools-shared': 7.7.2
+      '@vue/devtools-kit': 7.7.6
+      '@vue/devtools-shared': 7.7.6
       mitt: 3.0.1
       nanoid: 5.1.5
       pathe: 2.0.3
-      vite-hot-client: 0.2.4(vite@6.2.6)
+      vite-hot-client: 2.0.4(vite@6.2.6)
       vue: 3.5.13
     transitivePeerDependencies:
       - vite
@@ -2681,11 +2736,31 @@ packages:
       perfect-debounce: 1.0.0
       speakingurl: 14.0.1
       superjson: 2.2.2
+    dev: false
+
+  /@vue/devtools-kit@7.7.6:
+    resolution: {integrity: sha512-geu7ds7tem2Y7Wz+WgbnbZ6T5eadOvozHZ23Atk/8tksHMFOFylKi1xgGlQlVn0wlkEf4hu+vd5ctj1G4kFtwA==}
+    dependencies:
+      '@vue/devtools-shared': 7.7.6
+      birpc: 2.3.0
+      hookable: 5.5.3
+      mitt: 3.0.1
+      perfect-debounce: 1.0.0
+      speakingurl: 14.0.1
+      superjson: 2.2.2
+    dev: true
 
   /@vue/devtools-shared@7.7.2:
     resolution: {integrity: sha512-uBFxnp8gwW2vD6FrJB8JZLUzVb6PNRG0B0jBnHsOH8uKyva2qINY8PTF5Te4QlTbMDqU5K6qtJDr6cNsKWhbOA==}
     dependencies:
       rfdc: 1.4.1
+    dev: false
+
+  /@vue/devtools-shared@7.7.6:
+    resolution: {integrity: sha512-yFEgJZ/WblEsojQQceuyK6FzpFDx4kqrz2ohInxNj5/DnhoX023upTv4OD6lNPLAA5LLkbwPVb10o/7b+Y4FVA==}
+    dependencies:
+      rfdc: 1.4.1
+    dev: true
 
   /@vue/reactivity@3.5.13:
     resolution: {integrity: sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==}
@@ -3133,6 +3208,7 @@ packages:
 
   /birpc@0.2.19:
     resolution: {integrity: sha512-5WeXXAvTmitV1RqJFppT5QtUiz2p1mRSYU000Jkft5ZUCLJIk4uQriYNO50HknxKwM6jd8utNc66K1qGIwwWBQ==}
+    dev: false
 
   /birpc@2.3.0:
     resolution: {integrity: sha512-ijbtkn/F3Pvzb6jHypHRyve2QApOCZDR25D/VnkY2G/lBNcXCTsnsCxgY4k4PkVB7zfwzYbY3O9Lcqe3xufS5g==}
@@ -4553,6 +4629,10 @@ packages:
   /exsolve@1.0.4:
     resolution: {integrity: sha512-xsZH6PXaER4XoV+NiT7JHp1bJodJVT+cxeSH1G0f0tlT0lJqYuHUP3bUx2HtfTDvOagMINYp8rsqusxud3RXhw==}
 
+  /exsolve@1.0.5:
+    resolution: {integrity: sha512-pz5dvkYYKQ1AHVrgOzBKWeP4u4FRb3a6DNK2ucr0OoNwYIU4QWsJ+NM36LLzORT+z845MzKHHhpXiUF5nvQoJg==}
+    dev: true
+
   /externality@1.0.2:
     resolution: {integrity: sha512-LyExtJWKxtgVzmgtEHyQtLFpw1KFhQphF9nTG8TpAIVkiI/xQ3FJh75tRFLYl4hkn7BNIIdLJInuDAavX35pMw==}
     dependencies:
@@ -4580,8 +4660,8 @@ packages:
       merge2: 1.4.1
       micromatch: 4.0.8
 
-  /fast-npm-meta@0.3.1:
-    resolution: {integrity: sha512-W9gVhqRyz2O3j20I0nFmYEyaMC/046oaMRxxAQ0w6noakfbhpLmlIXmnnqSOmVVuJZ6x5hOPVwlv7PocuawZsw==}
+  /fast-npm-meta@0.4.2:
+    resolution: {integrity: sha512-BDN/yv8MN3fjh504wa7/niZojPtf/brWBsLKlw7Fv+Xh8Df+6ZEAFpp3zaal4etgDxxav1CuzKX5H0YVM9urEQ==}
     dev: true
 
   /fast-uri@3.0.6:
@@ -4603,6 +4683,17 @@ packages:
     dependencies:
       picomatch: 4.0.2
 
+  /fdir@6.4.4(picomatch@4.0.2):
+    resolution: {integrity: sha512-1NZP+GK4GfuAv3PqKvxQRDMjdSRZjnkq7KfhlNrCNNlZ0ygQFpebfrnfnq/W7fpUnAv9aGWmY1zKx7FYL3gwhg==}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+    dependencies:
+      picomatch: 4.0.2
+    dev: true
+
   /fetch-cookie@3.0.1:
     resolution: {integrity: sha512-ZGXe8Y5Z/1FWqQ9q/CrJhkUD73DyBU9VF0hBQmEO/wPHe4A9PKTjplFDLeFX8aOsYypZUcX5Ji/eByn3VCVO3Q==}
     dependencies:
@@ -4983,6 +5074,11 @@ packages:
     resolution: {integrity: sha512-bAH5jbK/F3T3Jls4I0SO1hmPR0dKU0a7+SY6n1yzRtG54FLO8d6w/nxLFX2Nb7dBu6cCWXPaAME6cYqFUMmuCA==}
     engines: {node: '>= 4'}
 
+  /ignore@7.0.4:
+    resolution: {integrity: sha512-gJzzk+PQNznz8ysRrC0aOkBNVRBDtE1n53IqyqEf3PXrYwomFs5q4pGMizBMJF+ykh03insJ27hB8gSrD2Hn8A==}
+    engines: {node: '>= 4'}
+    dev: true
+
   /image-meta@0.2.1:
     resolution: {integrity: sha512-K6acvFaelNxx8wc2VjbIzXKDVB0Khs0QT35U6NkGfTdCmjLNcO2945m7RFNR9/RPVFm48hq7QPzK8uGH18HCGw==}
     dev: true
@@ -5662,6 +5758,10 @@ packages:
     resolution: {integrity: sha512-9ca1h0Xjvo9bEkE4UOxgAzLV0jHKe6LMaxo37ND2DAhhAtd0j8pR1Wxz+/goMrZO8AEZTWCmyaOsFI/W5AdpCQ==}
     dev: true
 
+  /napi-wasm@1.1.3:
+    resolution: {integrity: sha512-h/4nMGsHjZDCYmQVNODIrYACVJ+I9KItbG+0si6W/jSjdA9JbWDoU4LLeMXVcEQGHjttI2tuXqDrbGF7qkUHHg==}
+    dev: true
+
   /neo-async@2.6.2:
     resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
     dev: true
@@ -5882,15 +5982,15 @@ packages:
       boolbase: 1.0.0
     dev: true
 
-  /nuxt-og-image@5.1.1(@unhead/vue@2.0.5)(unstorage@1.15.0)(vite@6.2.6)(vue@3.5.13):
-    resolution: {integrity: sha512-QMtkShOmQ4L9QIg6C0zcUOjjkqU19GKGQvkwP9aF0ZrivNtW7cjRSKLy/HtzFTI3rcbP6H5Vkhu6u2hEtNSb3A==}
+  /nuxt-og-image@5.1.3(@unhead/vue@2.0.5)(unstorage@1.15.0)(vite@6.2.6)(vue@3.5.13):
+    resolution: {integrity: sha512-paZCfB+ez/7ywA7ic9/nNz6lrJ7rf5Jct2t4GmiCi6UuecuNkkE3CY9x3HKRpnrbMDSYNE2ziKQRJ5qL2lwUmg==}
     engines: {node: '>=18.0.0'}
     peerDependencies:
-      '@unhead/vue': ^2.0.0-rc.1
-      unstorage: ^1.0.0
+      '@unhead/vue': ^2.0.5
+      unstorage: ^1.15.0
     dependencies:
-      '@nuxt/devtools-kit': 2.3.2(magicast@0.3.5)(vite@6.2.6)
-      '@nuxt/kit': 3.16.2(magicast@0.3.5)
+      '@nuxt/devtools-kit': 2.4.1(magicast@0.3.5)(vite@6.2.6)
+      '@nuxt/kit': 3.17.3(magicast@0.3.5)
       '@resvg/resvg-js': 2.6.2
       '@resvg/resvg-wasm': 2.6.2
       '@unhead/vue': 2.0.5(vue@3.5.13)
@@ -5909,7 +6009,7 @@ packages:
       ohash: 2.0.11
       pathe: 2.0.3
       pkg-types: 2.1.0
-      playwright-core: 1.51.1
+      playwright-core: 1.52.0
       radix3: 1.1.2
       satori: 0.12.2
       satori-html: 0.3.2
@@ -5931,7 +6031,7 @@ packages:
   /nuxt-site-config-kit@3.1.9(vue@3.5.13):
     resolution: {integrity: sha512-bcmpajYJgkNzA0jTq6CmmhKF2wHZUUKeVx/CIGI8lwWuAD81EBUZN0T4iKvVDo54g9UBrUUl8/5GhD65YBBG0A==}
     dependencies:
-      '@nuxt/kit': 3.16.2(magicast@0.3.5)
+      '@nuxt/kit': 3.16.2
       pkg-types: 2.1.0
       site-config-stack: 3.1.9(vue@3.5.13)
       std-env: 3.9.0
@@ -5944,7 +6044,7 @@ packages:
   /nuxt-site-config@3.1.9(vue@3.5.13):
     resolution: {integrity: sha512-YB69GX0st8drv1d5xypweseiEWeR22tfGdyVH3U4R+mpUSz8paBx48ArKC6MgV22DKItoQm51LVoapF5pl5bEQ==}
     dependencies:
-      '@nuxt/kit': 3.16.2(magicast@0.3.5)
+      '@nuxt/kit': 3.16.2
       nuxt-site-config-kit: 3.1.9(vue@3.5.13)
       pathe: 2.0.3
       pkg-types: 2.1.0
@@ -5971,8 +6071,8 @@ packages:
     dependencies:
       '@nuxt/cli': 3.24.1
       '@nuxt/devalue': 2.0.2
-      '@nuxt/devtools': 2.3.2(vite@6.2.6)(vue@3.5.13)
-      '@nuxt/kit': 3.16.2(magicast@0.3.5)
+      '@nuxt/devtools': 2.4.1(vite@6.2.6)(vue@3.5.13)
+      '@nuxt/kit': 3.16.2
       '@nuxt/schema': 3.16.2
       '@nuxt/telemetry': 2.6.6
       '@nuxt/vite-builder': 3.16.2(sass@1.66.1)(vue@3.5.13)
@@ -6394,8 +6494,8 @@ packages:
       exsolve: 1.0.4
       pathe: 2.0.3
 
-  /playwright-core@1.51.1:
-    resolution: {integrity: sha512-/crRMj8+j/Nq5s8QcvegseuyeZPxpQCZb6HNk3Sos3BlZyAknRjoyJPFWkpNn8v0+P3WiwqFF8P+zQo4eqiNuw==}
+  /playwright-core@1.52.0:
+    resolution: {integrity: sha512-l2osTgLXSMeuLZOML9qYODUQoPPnUsKsb5/P6LJ2e6uPKXUdPK5WYhN4z03G+YNbWmGDY4YENauNu4ZKczreHg==}
     engines: {node: '>=18'}
     hasBin: true
     dev: true
@@ -7163,6 +7263,12 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
+  /semver@7.7.2:
+    resolution: {integrity: sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==}
+    engines: {node: '>=10'}
+    hasBin: true
+    dev: true
+
   /send@1.2.0:
     resolution: {integrity: sha512-uaW0WwXKpL9blXE2o0bRhoL2EGXIrZxQ2ZQ4mgcfoBxdFmQold+qWsD2jLrfZ0trjKL6vOw0j//eAwcALFjKSw==}
     engines: {node: '>= 18'}
@@ -7654,6 +7760,14 @@ packages:
       fdir: 6.4.3(picomatch@4.0.2)
       picomatch: 4.0.2
 
+  /tinyglobby@0.2.13:
+    resolution: {integrity: sha512-mEwzpUgrLySlveBwEVDMKk5B57bhLPYovRfPAXD5gA/98Opn0rCDj3GtLwFvCvH5RK9uPCExUROW5NjDwvqkxw==}
+    engines: {node: '>=12.0.0'}
+    dependencies:
+      fdir: 6.4.4(picomatch@4.0.2)
+      picomatch: 4.0.2
+    dev: true
+
   /to-regex-range@5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
@@ -7801,6 +7915,26 @@ packages:
       unplugin-utils: 0.2.4
     dev: true
 
+  /unimport@5.0.1:
+    resolution: {integrity: sha512-1YWzPj6wYhtwHE+9LxRlyqP4DiRrhGfJxdtH475im8ktyZXO3jHj/3PZ97zDdvkYoovFdi0K4SKl3a7l92v3sQ==}
+    engines: {node: '>=18.12.0'}
+    dependencies:
+      acorn: 8.14.1
+      escape-string-regexp: 5.0.0
+      estree-walker: 3.0.3
+      local-pkg: 1.1.1
+      magic-string: 0.30.17
+      mlly: 1.7.4
+      pathe: 2.0.3
+      picomatch: 4.0.2
+      pkg-types: 2.1.0
+      scule: 1.3.0
+      strip-literal: 3.0.0
+      tinyglobby: 0.2.13
+      unplugin: 2.3.2
+      unplugin-utils: 0.2.4
+    dev: true
+
   /universalify@0.2.0:
     resolution: {integrity: sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==}
     engines: {node: '>= 4.0.0'}
@@ -8037,14 +8171,6 @@ packages:
       vite-hot-client: 2.0.4(vite@6.2.6)
     dev: true
 
-  /vite-hot-client@0.2.4(vite@6.2.6):
-    resolution: {integrity: sha512-a1nzURqO7DDmnXqabFOliz908FRmIppkBKsJthS8rbe8hBEXwEwe4C3Pp33Z1JoFCYfVL4kTOMLKk0ZZxREIeA==}
-    peerDependencies:
-      vite: ^2.6.0 || ^3.0.0 || ^4.0.0 || ^5.0.0-0 || ^6.0.0-0
-    dependencies:
-      vite: 6.2.6(jiti@2.4.2)(sass@1.66.1)
-    dev: true
-
   /vite-hot-client@2.0.4(vite@6.2.6):
     resolution: {integrity: sha512-W9LOGAyGMrbGArYJN4LBCdOC5+Zwh7dHvOHC0KmGKkJhsOzaKbpo/jEjpPKVHIW0/jBWj8RZG0NUxfgA8BxgAg==}
     peerDependencies:
@@ -8124,8 +8250,8 @@ packages:
       vscode-uri: 3.1.0
     dev: true
 
-  /vite-plugin-inspect@11.0.0(@nuxt/kit@3.16.2)(vite@6.2.6):
-    resolution: {integrity: sha512-Q0RDNcMs1mbI2yGRwOzSapnnA6NFO0j88+Vb8pJX0iYMw34WczwKJi3JgheItDhbWRq/CLUR0cs+ajZpcUaIFQ==}
+  /vite-plugin-inspect@11.0.1(@nuxt/kit@3.17.3)(vite@6.2.6):
+    resolution: {integrity: sha512-aABw7eGTr9Cmbn9RAs76e0BztVUFDl6a2R+/IJXpoUZxjx5YHB0P+Em3ZTWzpIPZzuRj28tAMblvcUyhgJc4aQ==}
     engines: {node: '>=14'}
     peerDependencies:
       '@nuxt/kit': '*'
@@ -8134,7 +8260,7 @@ packages:
       '@nuxt/kit':
         optional: true
     dependencies:
-      '@nuxt/kit': 3.16.2(magicast@0.3.5)
+      '@nuxt/kit': 3.17.3(magicast@0.3.5)
       ansis: 3.17.0
       debug: 4.4.0
       error-stack-parser-es: 1.0.5
@@ -8439,8 +8565,8 @@ packages:
       strip-ansi: 7.1.0
     dev: true
 
-  /ws@8.18.1:
-    resolution: {integrity: sha512-RKW2aJZMXeMxVpnZ6bck+RswznaxmzdULiBr6KY7XkTnW8uvt0iT9H5DkHUChXrc+uurzwa0rVI16n/Xzjdz1w==}
+  /ws@8.18.2:
+    resolution: {integrity: sha512-DMricUmwGZUVr++AEAe2uiVM7UoO9MAVZMDu05UQOaUII0lp+zOzLLU4Xqh/JvTqklB1T4uELaaPBKyjE1r4fQ==}
     engines: {node: '>=10.0.0'}
     peerDependencies:
       bufferutil: ^4.0.1

From f554e731b77676a7bb44daea7ef5ed4d18d90dc3 Mon Sep 17 00:00:00 2001
From: xdeq <celldwellerq@gmail.com>
Date: Thu, 15 May 2025 01:53:47 +0300
Subject: [PATCH 07/22] disable icon

---
 components/OgImage/TxImage.vue | 6 +++---
 pages/tx/[hash].vue            | 3 +--
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/components/OgImage/TxImage.vue b/components/OgImage/TxImage.vue
index c3beffde..1daf9925 100644
--- a/components/OgImage/TxImage.vue
+++ b/components/OgImage/TxImage.vue
@@ -31,7 +31,7 @@ const messages = computed(() => [...new Set(props.tx.message_types)])
 		<img src="/img/bg.png" class="absolute inset-0" v-bind="bgStyles" />
 
 		<div :style="{ height: '100%', display: 'flex', flexDirection: 'column', gap: '40px' }">
-			<div class="flex flex-row items-center" :style="{ gap: '24px' }">
+			<div class="flex flex-row" :style="{ gap: '24px' }">
 				<div class="flex items-center flex-nowrap">
 					<span :style="{ fontSize: '70px', color: 'rgba(255,255,255, 0.9)' }"> tx </span>
 					<span :style="{ fontSize: '70px', color: 'rgba(255,255,255, 0.3)' }">('</span>
@@ -41,7 +41,7 @@ const messages = computed(() => [...new Set(props.tx.message_types)])
 					<span :style="{ fontSize: '70px', color: 'rgba(255,255,255, 0.3)' }">')</span>
 				</div>
 
-				<svg
+				<!-- <svg
 					v-if="tx.status === 'success'"
 					width="60"
 					height="60"
@@ -63,7 +63,7 @@ const messages = computed(() => [...new Set(props.tx.message_types)])
 						fill="#eb5757"
 						fill-opacity="0.8"
 					/>
-				</svg>
+				</svg> -->
 			</div>
 
 			<div :style="{ display: 'flex' }">
diff --git a/pages/tx/[hash].vue b/pages/tx/[hash].vue
index bfa68573..b68a901d 100644
--- a/pages/tx/[hash].vue
+++ b/pages/tx/[hash].vue
@@ -28,8 +28,7 @@ defineOgImage({
 	component: "TxImage",
 	cacheKey: `${tx.value?.hash}`,
 })
-console.log('useRequestURL()', useRequestURL());
-
+console.log("useRequestURL()", useRequestURL())
 
 useHead({
 	title: `Transaction ${tx.value?.hash.toUpperCase().slice(0, 4)} ••• ${tx.value?.hash.toUpperCase().slice(-4)} - Celestia Explorer`,

From 6b0e2132175fb39d026a94d5cfdba0646e354a23 Mon Sep 17 00:00:00 2001
From: xdeq <celldwellerq@gmail.com>
Date: Thu, 15 May 2025 02:02:52 +0300
Subject: [PATCH 08/22] fix bg img

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

diff --git a/components/OgImage/TxImage.vue b/components/OgImage/TxImage.vue
index 1daf9925..2ff64625 100644
--- a/components/OgImage/TxImage.vue
+++ b/components/OgImage/TxImage.vue
@@ -27,8 +27,8 @@ const messages = computed(() => [...new Set(props.tx.message_types)])
 </script>
 
 <template>
-	<div class="w-full h-full" :style="{ background: '#111111', padding: '100px 120px', fontFamily: 'IBM+Plex+Mono', overflow: 'hidden' }">
-		<img src="/img/bg.png" class="absolute inset-0" v-bind="bgStyles" />
+	<div class="w-full h-full" :style="{ background: '#111111', padding: '100px', fontFamily: 'IBM+Plex+Mono', overflow: 'hidden' }">
+		<img src="/img/bg.png" width="1200" height="600" class="absolute" v-bind="bgStyles" />
 
 		<div :style="{ height: '100%', display: 'flex', flexDirection: 'column', gap: '40px' }">
 			<div class="flex flex-row" :style="{ gap: '24px' }">

From 8e6781238d13c1f74c7540b005cde737d5a55c7c Mon Sep 17 00:00:00 2001
From: xdeq <celldwellerq@gmail.com>
Date: Thu, 15 May 2025 02:10:12 +0300
Subject: [PATCH 09/22] test zero runtime

---
 nuxt.config.ts      | 1 +
 pages/tx/[hash].vue | 1 -
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/nuxt.config.ts b/nuxt.config.ts
index 69d0558e..8a428611 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -126,6 +126,7 @@ export default defineNuxtConfig({
 
 	ogImage: {
 		fonts: ["Inter:400", "Inter:600", "IBM+Plex+Mono:400"],
+		zeroRuntime: true,
 	},
 
 	devtools: {
diff --git a/pages/tx/[hash].vue b/pages/tx/[hash].vue
index b68a901d..8553ec13 100644
--- a/pages/tx/[hash].vue
+++ b/pages/tx/[hash].vue
@@ -28,7 +28,6 @@ defineOgImage({
 	component: "TxImage",
 	cacheKey: `${tx.value?.hash}`,
 })
-console.log("useRequestURL()", useRequestURL())
 
 useHead({
 	title: `Transaction ${tx.value?.hash.toUpperCase().slice(0, 4)} ••• ${tx.value?.hash.toUpperCase().slice(-4)} - Celestia Explorer`,

From bb5a9be0a328adeb8367c725ab1972dd7d48cd2a Mon Sep 17 00:00:00 2001
From: xdeq <celldwellerq@gmail.com>
Date: Thu, 15 May 2025 02:16:24 +0300
Subject: [PATCH 10/22] Disable zero runtime

---
 components/OgImage/TxImage.vue | 6 +++---
 nuxt.config.ts                 | 1 -
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/components/OgImage/TxImage.vue b/components/OgImage/TxImage.vue
index 2ff64625..28e694fc 100644
--- a/components/OgImage/TxImage.vue
+++ b/components/OgImage/TxImage.vue
@@ -31,7 +31,7 @@ const messages = computed(() => [...new Set(props.tx.message_types)])
 		<img src="/img/bg.png" width="1200" height="600" class="absolute" v-bind="bgStyles" />
 
 		<div :style="{ height: '100%', display: 'flex', flexDirection: 'column', gap: '40px' }">
-			<div class="flex flex-row" :style="{ gap: '24px' }">
+			<div class="flex flex-row items-center" :style="{ gap: '24px' }">
 				<div class="flex items-center flex-nowrap">
 					<span :style="{ fontSize: '70px', color: 'rgba(255,255,255, 0.9)' }"> tx </span>
 					<span :style="{ fontSize: '70px', color: 'rgba(255,255,255, 0.3)' }">('</span>
@@ -41,7 +41,7 @@ const messages = computed(() => [...new Set(props.tx.message_types)])
 					<span :style="{ fontSize: '70px', color: 'rgba(255,255,255, 0.3)' }">')</span>
 				</div>
 
-				<!-- <svg
+				<svg
 					v-if="tx.status === 'success'"
 					width="60"
 					height="60"
@@ -63,7 +63,7 @@ const messages = computed(() => [...new Set(props.tx.message_types)])
 						fill="#eb5757"
 						fill-opacity="0.8"
 					/>
-				</svg> -->
+				</svg>
 			</div>
 
 			<div :style="{ display: 'flex' }">
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 8a428611..69d0558e 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -126,7 +126,6 @@ export default defineNuxtConfig({
 
 	ogImage: {
 		fonts: ["Inter:400", "Inter:600", "IBM+Plex+Mono:400"],
-		zeroRuntime: true,
 	},
 
 	devtools: {

From e402db1ae38ee6ab28f15202f7b415511b9a0560 Mon Sep 17 00:00:00 2001
From: xdeq <celldwellerq@gmail.com>
Date: Thu, 15 May 2025 02:22:49 +0300
Subject: [PATCH 11/22] rm og:image

---
 pages/tx/[hash].vue | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/pages/tx/[hash].vue b/pages/tx/[hash].vue
index 8553ec13..ef309243 100644
--- a/pages/tx/[hash].vue
+++ b/pages/tx/[hash].vue
@@ -34,7 +34,6 @@ useHead({
 	link: [
 		{
 			rel: "canonical",
-			// href: `https://celenium.io${route.path}`,
 			href: `${useRequestURL().origin}${useRequestURL().pathname}`,
 		},
 	],
@@ -60,12 +59,6 @@ useHead({
 		{
 			property: "og:url",
 			content: `${useRequestURL().origin}${useRequestURL().pathname}`,
-			// content: `https://celenium.io${route.path}`,
-		},
-		{
-			property: "og:image",
-			content: `${useRequestURL().origin}${useRequestURL().pathname}__og_image__/og.png`,
-			// content: `https://celenium.io${route.path}__og_image__/og.png`,
 		},
 		{
 			name: "twitter:title",

From 5d5cac6415134068301d0b21ca905fc41b24d280 Mon Sep 17 00:00:00 2001
From: xdeq <celldwellerq@gmail.com>
Date: Thu, 15 May 2025 02:34:03 +0300
Subject: [PATCH 12/22] use defineOgImageComponent && test site url

---
 nuxt.config.ts      | 2 +-
 pages/tx/[hash].vue | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/nuxt.config.ts b/nuxt.config.ts
index 69d0558e..15b831b7 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -8,7 +8,7 @@ export default defineNuxtConfig({
 	modules: ["@pinia/nuxt", "nuxt-og-image", "@nuxtjs/sitemap"],
 
 	site: {
-		url: "https://celenium.io",
+		url: "https://fix-og-images.celenium-interface.pages.dev",
 	},
 
 	sitemap: {
diff --git a/pages/tx/[hash].vue b/pages/tx/[hash].vue
index ef309243..fd162401 100644
--- a/pages/tx/[hash].vue
+++ b/pages/tx/[hash].vue
@@ -22,10 +22,9 @@ if (!rawTx.value) {
 	cacheStore.current.transaction = tx.value
 }
 
-defineOgImage({
+defineOgImageComponent("TxImage", {
 	title: "Tx",
 	tx: tx.value,
-	component: "TxImage",
 	cacheKey: `${tx.value?.hash}`,
 })
 

From 226fda7e684fd9db8c8827114e518f9709d1531e Mon Sep 17 00:00:00 2001
From: xdeq <celldwellerq@gmail.com>
Date: Thu, 15 May 2025 02:52:33 +0300
Subject: [PATCH 13/22] test cf pages env

---
 nuxt.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/nuxt.config.ts b/nuxt.config.ts
index 15b831b7..95aa835c 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -8,7 +8,7 @@ export default defineNuxtConfig({
 	modules: ["@pinia/nuxt", "nuxt-og-image", "@nuxtjs/sitemap"],
 
 	site: {
-		url: "https://fix-og-images.celenium-interface.pages.dev",
+		url: [process.env.CF_PAGES_URL, "https://celenium.io"],
 	},
 
 	sitemap: {

From 44ef863488cd7b8889fd1542e4ffdcb6373cde89 Mon Sep 17 00:00:00 2001
From: xdeq <celldwellerq@gmail.com>
Date: Thu, 15 May 2025 02:55:54 +0300
Subject: [PATCH 14/22] use site config hook

---
 nuxt.config.ts | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/nuxt.config.ts b/nuxt.config.ts
index 95aa835c..3162413a 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -7,8 +7,14 @@ import path from "path"
 export default defineNuxtConfig({
 	modules: ["@pinia/nuxt", "nuxt-og-image", "@nuxtjs/sitemap"],
 
-	site: {
-		url: [process.env.CF_PAGES_URL, "https://celenium.io"],
+	// site: {
+	// 	url: [process.env.CF_PAGES_URL, "https://celenium.io"],
+	// },
+
+	hooks: {
+		"site-config:resolve": (siteConfig) => {
+			siteConfig.url = process.env.CF_PAGES_URL ?? "https://celenium.io"
+		},
 	},
 
 	sitemap: {

From fb5764fdda24d8811853825780ae3bf6eb4ce0f3 Mon Sep 17 00:00:00 2001
From: xdeq <celldwellerq@gmail.com>
Date: Thu, 15 May 2025 03:00:44 +0300
Subject: [PATCH 15/22] Use updateSiteConfig

---
 nuxt.config.ts |  9 ++++++---
 package.json   |  1 +
 pnpm-lock.yaml | 23 ++++++-----------------
 3 files changed, 13 insertions(+), 20 deletions(-)

diff --git a/nuxt.config.ts b/nuxt.config.ts
index 3162413a..18c56744 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,19 +1,22 @@
 import { nodePolyfills } from "vite-plugin-node-polyfills"
 import wasm from "vite-plugin-wasm"
 import topLevelAwait from "vite-plugin-top-level-await"
+import { updateSiteConfig } from "nuxt-site-config/kit"
 
 import path from "path"
 
 export default defineNuxtConfig({
-	modules: ["@pinia/nuxt", "nuxt-og-image", "@nuxtjs/sitemap"],
+	modules: ["nuxt-site-config", "@pinia/nuxt", "nuxt-og-image", "@nuxtjs/sitemap"],
 
 	// site: {
 	// 	url: [process.env.CF_PAGES_URL, "https://celenium.io"],
 	// },
 
 	hooks: {
-		"site-config:resolve": (siteConfig) => {
-			siteConfig.url = process.env.CF_PAGES_URL ?? "https://celenium.io"
+		"site-config:resolve": () => {
+			updateSiteConfig({
+				url: process.env.CF_PAGES_URL ?? "https://celenium.io",
+			})
 		},
 	},
 
diff --git a/package.json b/package.json
index e3a9f5f2..fdff152f 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
 		"lean-qr": "^2.3.2",
 		"long": "^5.2.3",
 		"luxon": "3.4.3",
+		"nuxt-site-config": "^3.1.9",
 		"pinia": "3.0.2",
 		"protobufjs": "^7.2.6",
 		"qrcode": "^1.5.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e4a18884..9a0d3674 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -59,6 +59,9 @@ dependencies:
   luxon:
     specifier: 3.4.3
     version: 3.4.3
+  nuxt-site-config:
+    specifier: ^3.1.9
+    version: 3.1.9(vue@3.5.13)
   pinia:
     specifier: 3.0.2
     version: 3.0.2(vue@3.5.13)
@@ -1288,7 +1291,6 @@ packages:
       untyped: 2.0.0
     transitivePeerDependencies:
       - magicast
-    dev: true
 
   /@nuxt/schema@3.16.2:
     resolution: {integrity: sha512-2HZPM372kuI/uw9VU/hOoYuzv803oZAtyoEKC5dQCQTKAQ293AjypF3WljMXUSReFS/hcbBSgGzYUPHr3Qo+pg==}
@@ -1709,7 +1711,6 @@ packages:
 
   /@polka/url@1.0.0-next.29:
     resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
-    dev: true
 
   /@poppinss/colors@4.1.4:
     resolution: {integrity: sha512-FA+nTU8p6OcSH4tLDY5JilGYr1bVWHpNmcLr7xmMEdbWmKHa+3QZ+DqefrXKmdjO/brHTnQZo20lLSjaO7ydog==}
@@ -4631,7 +4632,6 @@ packages:
 
   /exsolve@1.0.5:
     resolution: {integrity: sha512-pz5dvkYYKQ1AHVrgOzBKWeP4u4FRb3a6DNK2ucr0OoNwYIU4QWsJ+NM36LLzORT+z845MzKHHhpXiUF5nvQoJg==}
-    dev: true
 
   /externality@1.0.2:
     resolution: {integrity: sha512-LyExtJWKxtgVzmgtEHyQtLFpw1KFhQphF9nTG8TpAIVkiI/xQ3FJh75tRFLYl4hkn7BNIIdLJInuDAavX35pMw==}
@@ -4692,7 +4692,6 @@ packages:
         optional: true
     dependencies:
       picomatch: 4.0.2
-    dev: true
 
   /fetch-cookie@3.0.1:
     resolution: {integrity: sha512-ZGXe8Y5Z/1FWqQ9q/CrJhkUD73DyBU9VF0hBQmEO/wPHe4A9PKTjplFDLeFX8aOsYypZUcX5Ji/eByn3VCVO3Q==}
@@ -5077,7 +5076,6 @@ packages:
   /ignore@7.0.4:
     resolution: {integrity: sha512-gJzzk+PQNznz8ysRrC0aOkBNVRBDtE1n53IqyqEf3PXrYwomFs5q4pGMizBMJF+ykh03insJ27hB8gSrD2Hn8A==}
     engines: {node: '>= 4'}
-    dev: true
 
   /image-meta@0.2.1:
     resolution: {integrity: sha512-K6acvFaelNxx8wc2VjbIzXKDVB0Khs0QT35U6NkGfTdCmjLNcO2945m7RFNR9/RPVFm48hq7QPzK8uGH18HCGw==}
@@ -5730,7 +5728,6 @@ packages:
   /mrmime@2.0.1:
     resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==}
     engines: {node: '>=10'}
-    dev: true
 
   /ms@2.0.0:
     resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
@@ -6031,7 +6028,7 @@ packages:
   /nuxt-site-config-kit@3.1.9(vue@3.5.13):
     resolution: {integrity: sha512-bcmpajYJgkNzA0jTq6CmmhKF2wHZUUKeVx/CIGI8lwWuAD81EBUZN0T4iKvVDo54g9UBrUUl8/5GhD65YBBG0A==}
     dependencies:
-      '@nuxt/kit': 3.16.2
+      '@nuxt/kit': 3.17.3(magicast@0.3.5)
       pkg-types: 2.1.0
       site-config-stack: 3.1.9(vue@3.5.13)
       std-env: 3.9.0
@@ -6039,12 +6036,11 @@ packages:
     transitivePeerDependencies:
       - magicast
       - vue
-    dev: true
 
   /nuxt-site-config@3.1.9(vue@3.5.13):
     resolution: {integrity: sha512-YB69GX0st8drv1d5xypweseiEWeR22tfGdyVH3U4R+mpUSz8paBx48ArKC6MgV22DKItoQm51LVoapF5pl5bEQ==}
     dependencies:
-      '@nuxt/kit': 3.16.2
+      '@nuxt/kit': 3.17.3(magicast@0.3.5)
       nuxt-site-config-kit: 3.1.9(vue@3.5.13)
       pathe: 2.0.3
       pkg-types: 2.1.0
@@ -6054,7 +6050,6 @@ packages:
     transitivePeerDependencies:
       - magicast
       - vue
-    dev: true
 
   /nuxt@3.16.2(sass@1.66.1)(vite@6.2.6):
     resolution: {integrity: sha512-yjIC/C4HW8Pd+m0ACGliEF0HnimXYGYvUzjOsTiLQKkDDt2T+djyZ+pCl9BfhQBA8rYmnsym2jUI+ubjv1iClw==}
@@ -7267,7 +7262,6 @@ packages:
     resolution: {integrity: sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==}
     engines: {node: '>=10'}
     hasBin: true
-    dev: true
 
   /send@1.2.0:
     resolution: {integrity: sha512-uaW0WwXKpL9blXE2o0bRhoL2EGXIrZxQ2ZQ4mgcfoBxdFmQold+qWsD2jLrfZ0trjKL6vOw0j//eAwcALFjKSw==}
@@ -7427,7 +7421,6 @@ packages:
       '@polka/url': 1.0.0-next.29
       mrmime: 2.0.1
       totalist: 3.0.1
-    dev: true
 
   /sisteransi@1.0.5:
     resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
@@ -7440,7 +7433,6 @@ packages:
     dependencies:
       ufo: 1.6.1
       vue: 3.5.13
-    dev: true
 
   /slash@5.1.0:
     resolution: {integrity: sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==}
@@ -7766,7 +7758,6 @@ packages:
     dependencies:
       fdir: 6.4.4(picomatch@4.0.2)
       picomatch: 4.0.2
-    dev: true
 
   /to-regex-range@5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
@@ -7782,7 +7773,6 @@ packages:
   /totalist@3.0.1:
     resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
     engines: {node: '>=6'}
-    dev: true
 
   /tough-cookie@4.1.4:
     resolution: {integrity: sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==}
@@ -7933,7 +7923,6 @@ packages:
       tinyglobby: 0.2.13
       unplugin: 2.3.2
       unplugin-utils: 0.2.4
-    dev: true
 
   /universalify@0.2.0:
     resolution: {integrity: sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==}
@@ -8308,7 +8297,7 @@ packages:
       vue: ^3.5.0
     dependencies:
       estree-walker: 3.0.3
-      exsolve: 1.0.4
+      exsolve: 1.0.5
       magic-string: 0.30.17
       pathe: 2.0.3
       source-map-js: 1.2.1

From 232fa2f8e93947c81bbf08a253860eb22e1e4ffb Mon Sep 17 00:00:00 2001
From: xdeq <celldwellerq@gmail.com>
Date: Thu, 15 May 2025 03:06:25 +0300
Subject: [PATCH 16/22] rm comment

---
 nuxt.config.ts | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/nuxt.config.ts b/nuxt.config.ts
index 18c56744..8b627dfc 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -8,10 +8,6 @@ import path from "path"
 export default defineNuxtConfig({
 	modules: ["nuxt-site-config", "@pinia/nuxt", "nuxt-og-image", "@nuxtjs/sitemap"],
 
-	// site: {
-	// 	url: [process.env.CF_PAGES_URL, "https://celenium.io"],
-	// },
-
 	hooks: {
 		"site-config:resolve": () => {
 			updateSiteConfig({

From 4a0fa0c0e74380dde25c947a7daaf49cb226a547 Mon Sep 17 00:00:00 2001
From: GussevPM <GussevPM@GMail.Com>
Date: Thu, 15 May 2025 15:06:27 +0200
Subject: [PATCH 17/22] Upd rollup og image

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

diff --git a/components/OgImage/RollupImage.vue b/components/OgImage/RollupImage.vue
index 853e8026..7cbf8458 100644
--- a/components/OgImage/RollupImage.vue
+++ b/components/OgImage/RollupImage.vue
@@ -17,8 +17,6 @@ const props = defineProps({
 const bgStyles = computed(() => {
 	return {
 		style: {
-			position: "absolute",
-			inset: "0",
 			filter: "grayscale(1)",
 			opacity: "0.05",
 		},
@@ -27,8 +25,8 @@ const bgStyles = computed(() => {
 </script>
 
 <template>
-	<div class="w-full h-full" :style="{ background: '#111111', padding: '100px 120px', fontFamily: 'IBM+Plex+Mono' }">
-		<img src="/img/bg.png" v-bind="bgStyles" />
+	<div class="w-full h-full" :style="{ background: '#111111', padding: '100px', fontFamily: 'IBM+Plex+Mono', overflow: 'hidden' }">
+		<img src="/img/bg.png" width="1200" height="600" class="absolute" v-bind="bgStyles" />
 
 		<div :style="{ height: '100%', display: 'flex', flexDirection: 'column', gap: '80px' }">
 			<div :style="{ display: 'flex', alignItems: 'center' }">

From 80743d83831a7954f4e5ab77f62c089e4fe02d42 Mon Sep 17 00:00:00 2001
From: GussevPM <GussevPM@GMail.Com>
Date: Thu, 15 May 2025 15:15:45 +0200
Subject: [PATCH 18/22] Upd the rest of the og images

---
 components/OgImage/AddressImage.vue     | 7 ++-----
 components/OgImage/BlockImage.vue       | 7 ++-----
 components/OgImage/NamespaceImage.vue   | 7 ++-----
 components/OgImage/StatsMetricImage.vue | 9 ++++-----
 components/OgImage/ValidatorImage.vue   | 7 ++-----
 5 files changed, 12 insertions(+), 25 deletions(-)

diff --git a/components/OgImage/AddressImage.vue b/components/OgImage/AddressImage.vue
index 460fb6f0..1ff53edd 100644
--- a/components/OgImage/AddressImage.vue
+++ b/components/OgImage/AddressImage.vue
@@ -17,9 +17,6 @@ const props = defineProps({
 const bgStyles = computed(() => {
 	return {
 		style: {
-			position: "absolute",
-			top: "0",
-			left: "0",
 			filter: "grayscale(1)",
 			opacity: "0.05",
 		},
@@ -28,8 +25,8 @@ const bgStyles = computed(() => {
 </script>
 
 <template>
-	<div class="w-full h-full" :style="{ background: '#111111', padding: '100px 120px', fontFamily: 'IBM+Plex+Mono' }">
-		<img src="/img/bg.png" v-bind="bgStyles" />
+	<div class="w-full h-full" :style="{ background: '#111111', padding: '100px', fontFamily: 'IBM+Plex+Mono', overflow: 'hidden' }">
+		<img src="/img/bg.png" width="1200" height="600" class="absolute" v-bind="bgStyles" />
 
 		<div :style="{ height: '100%', display: 'flex', flexDirection: 'column', gap: '40px' }">
 			<div :style="{ display: 'flex', alignItems: 'center' }">
diff --git a/components/OgImage/BlockImage.vue b/components/OgImage/BlockImage.vue
index c6b66a35..110ec92c 100644
--- a/components/OgImage/BlockImage.vue
+++ b/components/OgImage/BlockImage.vue
@@ -17,9 +17,6 @@ const props = defineProps({
 const bgStyles = computed(() => {
 	return {
 		style: {
-			position: "absolute",
-			top: "0",
-			left: "0",
 			filter: "grayscale(1)",
 			opacity: "0.05",
 		},
@@ -30,8 +27,8 @@ const messages = computed(() => [...new Set(props.block.message_types)])
 </script>
 
 <template>
-	<div class="w-full h-full" :style="{ background: '#111111', padding: '100px 120px', fontFamily: 'IBM+Plex+Mono' }">
-		<img src="/img/bg.png" v-bind="bgStyles" />
+	<div class="w-full h-full" :style="{ background: '#111111', padding: '100px', fontFamily: 'IBM+Plex+Mono', overflow: 'hidden' }">
+		<img src="/img/bg.png" width="1200" height="600" class="absolute" v-bind="bgStyles" />
 
 		<div :style="{ height: '100%', display: 'flex', flexDirection: 'column', gap: '40px' }">
 			<div :style="{ display: 'flex' }">
diff --git a/components/OgImage/NamespaceImage.vue b/components/OgImage/NamespaceImage.vue
index d214c5e1..c06184fe 100644
--- a/components/OgImage/NamespaceImage.vue
+++ b/components/OgImage/NamespaceImage.vue
@@ -14,9 +14,6 @@ const props = defineProps({
 const bgStyles = computed(() => {
 	return {
 		style: {
-			position: "absolute",
-			top: "0",
-			left: "0",
 			filter: "grayscale(1)",
 			opacity: "0.05",
 		},
@@ -25,8 +22,8 @@ const bgStyles = computed(() => {
 </script>
 
 <template>
-	<div class="w-full h-full" :style="{ background: '#111111', padding: '100px 120px', fontFamily: 'IBM+Plex+Mono' }">
-		<img src="/img/bg.png" v-bind="bgStyles" />
+	<div class="w-full h-full" :style="{ background: '#111111', padding: '100px', fontFamily: 'IBM+Plex+Mono', overflow: 'hidden' }">
+		<img src="/img/bg.png" width="1200" height="600" class="absolute" v-bind="bgStyles" />
 
 		<div :style="{ height: '100%', display: 'flex', flexDirection: 'column', gap: '40px' }">
 			<div :style="{ display: 'flex', alignItems: 'center' }">
diff --git a/components/OgImage/StatsMetricImage.vue b/components/OgImage/StatsMetricImage.vue
index 55b19cbc..65a287cc 100644
--- a/components/OgImage/StatsMetricImage.vue
+++ b/components/OgImage/StatsMetricImage.vue
@@ -11,17 +11,16 @@ const props = defineProps({
 const bgStyles = computed(() => {
 	return {
 		style: {
-			position: "absolute",
-			top: "0",
-			left: "0",
+			filter: "grayscale(1)",
+			opacity: "0.05",
 		},
 	}
 })
 </script>
 
 <template>
-	<div class="w-full h-full" :style="{ padding: '80px 140px', fontFamily: 'IBM+Plex+Mono' }">
-		<img src="/img/stats_bg.png" v-bind="bgStyles" />
+	<div class="w-full h-full" :style="{ background: '#111111', padding: '80px', fontFamily: 'IBM+Plex+Mono', overflow: 'hidden' }">
+		<img src="/img/stats_bg.png" width="1200" height="600" class="absolute" v-bind="bgStyles" />
 
 		<div :style="{ height: '100%', display: 'flex', flexDirection: 'column', gap: '80px' }">
 			<div :style="{ display: 'flex', alignItems: 'center' }">
diff --git a/components/OgImage/ValidatorImage.vue b/components/OgImage/ValidatorImage.vue
index 90fddd58..b5c3f674 100644
--- a/components/OgImage/ValidatorImage.vue
+++ b/components/OgImage/ValidatorImage.vue
@@ -14,9 +14,6 @@ const props = defineProps({
 const bgStyles = computed(() => {
 	return {
 		style: {
-			position: "absolute",
-			top: "0",
-			left: "0",
 			filter: "grayscale(1)",
 			opacity: "0.05",
 		},
@@ -25,8 +22,8 @@ const bgStyles = computed(() => {
 </script>
 
 <template>
-	<div class="w-full h-full" :style="{ background: '#111111', padding: '100px 80px', fontFamily: 'IBM+Plex+Mono' }">
-		<img src="/img/bg.png" v-bind="bgStyles" />
+	<div class="w-full h-full" :style="{ background: '#111111', padding: '100px', fontFamily: 'IBM+Plex+Mono', overflow: 'hidden' }">
+		<img src="/img/bg.png" width="1200" height="600" class="absolute" v-bind="bgStyles" />
 
 		<div :style="{ height: '100%', display: 'flex', flexDirection: 'column', gap: '50px' }">
 			<div :style="{ display: 'flex', alignItems: 'center' }">

From b188f730b8b8cc26db2f5eca20e147dbca02c261 Mon Sep 17 00:00:00 2001
From: GussevPM <GussevPM@GMail.Com>
Date: Thu, 15 May 2025 15:33:16 +0200
Subject: [PATCH 19/22] Rework og images define

---
 components/OgImage/StatsMetricImage.vue | 2 +-
 components/OgImage/ValidatorImage.vue   | 4 ++--
 pages/address/[hash].vue                | 3 +--
 pages/block/[height].vue                | 3 +--
 pages/namespace/[id].vue                | 3 +--
 pages/rollup/[slug].vue                 | 3 +--
 pages/rollup/rank/[slug].vue            | 3 +--
 pages/stats/[metric].vue                | 3 +--
 pages/validator/[id].vue                | 5 ++---
 9 files changed, 11 insertions(+), 18 deletions(-)

diff --git a/components/OgImage/StatsMetricImage.vue b/components/OgImage/StatsMetricImage.vue
index 65a287cc..374860ed 100644
--- a/components/OgImage/StatsMetricImage.vue
+++ b/components/OgImage/StatsMetricImage.vue
@@ -23,7 +23,7 @@ const bgStyles = computed(() => {
 		<img src="/img/stats_bg.png" width="1200" height="600" class="absolute" v-bind="bgStyles" />
 
 		<div :style="{ height: '100%', display: 'flex', flexDirection: 'column', gap: '80px' }">
-			<div :style="{ display: 'flex', alignItems: 'center' }">
+			<div class="flex flex-row items-center">
 				<span :style="{ fontSize: '70px', color: 'rgba(255,255,255, 0.9)' }">stats</span>
 				<span :style="{ fontSize: '70px', color: 'rgba(255,255,255, 0.3)' }">('</span>
 				<span :style="{ fontSize: '50px', color: '#FF8351' }">
diff --git a/components/OgImage/ValidatorImage.vue b/components/OgImage/ValidatorImage.vue
index b5c3f674..93709b8e 100644
--- a/components/OgImage/ValidatorImage.vue
+++ b/components/OgImage/ValidatorImage.vue
@@ -29,11 +29,11 @@ const bgStyles = computed(() => {
 			<div :style="{ display: 'flex', alignItems: 'center' }">
 				<span :style="{ fontSize: '60px', color: 'rgba(255,255,255, 0.9)' }">validator</span>
 				<span :style="{ fontSize: '60px', color: 'rgba(255,255,255, 0.3)' }">('</span>
-				<span :style="{ fontSize: '40px', color: '#FF8351' }"> celestiavaloper•••{{ validator.address.slice(-4) }} </span>
+				<span :style="{ fontSize: '40px', color: '#FF8351' }"> celestiavaloper•••{{ validator.address.hash.slice(-4) }} </span>
 				<span :style="{ fontSize: '60px', color: 'rgba(255,255,255, 0.3)' }">')</span>
 			</div>
 
-			<span :style="{ fontSize: '46px', color: 'rgba(255,255,255, 0.9)' }">
+			<span v-if="validator.moniker" :style="{ fontSize: '46px', color: 'rgba(255,255,255, 0.9)' }">
 				{{ validator.moniker }}
 			</span>
 
diff --git a/pages/address/[hash].vue b/pages/address/[hash].vue
index 0f73b594..1f92f91a 100644
--- a/pages/address/[hash].vue
+++ b/pages/address/[hash].vue
@@ -24,10 +24,9 @@ if (!rawAddress.value) {
 	cacheStore.current.address = address.value
 }
 
-defineOgImage({
+defineOgImageComponent("AddressImage", {
 	title: "Address",
 	address: address.value,
-	component: "AddressImage",
 	cacheKey: `${address.value?.hash.slice(-4)}-${address.value?.balance.spendable}-${address.value?.first_height}-${
 		address.value?.last_height
 	}`,
diff --git a/pages/block/[height].vue b/pages/block/[height].vue
index 6546ef83..5e4192b3 100644
--- a/pages/block/[height].vue
+++ b/pages/block/[height].vue
@@ -32,10 +32,9 @@ if (!rawBlock.value) {
 	cacheStore.current.block = block.value
 }
 
-defineOgImage({
+defineOgImageComponent("BlockImage", {
 	title: "Block",
 	block: block.value,
-	component: "BlockImage",
 	cacheKey: `${block.value?.height}`,
 })
 
diff --git a/pages/namespace/[id].vue b/pages/namespace/[id].vue
index 513c0d04..22747f62 100644
--- a/pages/namespace/[id].vue
+++ b/pages/namespace/[id].vue
@@ -26,10 +26,9 @@ if (!rawNamespace.value) {
 	cacheStore.current.namespace = namespace.value
 }
 
-defineOgImage({
+defineOgImageComponent("NamespaceImage", {
 	title: "Namespace",
 	namespace: namespace.value,
-	component: "NamespaceImage",
 	cacheKey: `${namespace.value?.hash}`,
 })
 
diff --git a/pages/rollup/[slug].vue b/pages/rollup/[slug].vue
index 1704be00..d5fe54ca 100644
--- a/pages/rollup/[slug].vue
+++ b/pages/rollup/[slug].vue
@@ -26,10 +26,9 @@ if (!rawRollup.value) {
 	cacheStore.current.rollup = rollup.value
 }
 
-defineOgImage({
+defineOgImageComponent("RollupImage", {
 	title: "Rollup",
 	rollup: rollup.value,
-	component: "RollupImage",
 	cacheKey: `${rollup.value?.name}`,
 })
 
diff --git a/pages/rollup/rank/[slug].vue b/pages/rollup/rank/[slug].vue
index 34e33707..8564c8a1 100644
--- a/pages/rollup/rank/[slug].vue
+++ b/pages/rollup/rank/[slug].vue
@@ -138,10 +138,9 @@ const fetchData = async () => {
 }
 await fetchData()
 
-defineOgImage({
+defineOgImageComponent("RollupImage", {
 	title: "Rollup",
 	rollup: rollup.value,
-	component: "RollupImage",
 	cacheKey: `${rollup.value?.name}`,
 })
 
diff --git a/pages/stats/[metric].vue b/pages/stats/[metric].vue
index 133e078a..4ef0a4c9 100644
--- a/pages/stats/[metric].vue
+++ b/pages/stats/[metric].vue
@@ -55,10 +55,9 @@ if (!series.value?.page) {
 	}
 }
 
-defineOgImage({
+defineOgImageComponent("StatsMetricImage", {
 	title: "Statistics",
 	series: series.value,
-	component: "StatsMetricImage",
 	cacheKey: `${series.value?.page}`,
 })
 
diff --git a/pages/validator/[id].vue b/pages/validator/[id].vue
index 01896844..ba27269d 100644
--- a/pages/validator/[id].vue
+++ b/pages/validator/[id].vue
@@ -25,11 +25,10 @@ if (!rawValidator.value) {
 	cacheStore.current.validator = validator.value
 }
 
-defineOgImage({
+defineOgImageComponent("ValidatorImage", {
 	title: "Validator",
 	validator: validator.value,
-	component: "ValidatorImage",
-	cacheKey: `${validator.value?.moniker}`,
+	cacheKey: `${validator.value?.moniker || validator.value.address.hash}`,
 })
 
 useHead({

From 40d76e965fa818dbf1c87b01422182f2d32e895d Mon Sep 17 00:00:00 2001
From: GussevPM <GussevPM@GMail.Com>
Date: Thu, 15 May 2025 15:43:58 +0200
Subject: [PATCH 20/22] Change cfg

---
 components/OgImage/StatsMetricImage.vue | 4 +---
 components/OgImage/ValidatorImage.vue   | 2 +-
 services/config.js                      | 4 ++--
 3 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/components/OgImage/StatsMetricImage.vue b/components/OgImage/StatsMetricImage.vue
index 374860ed..2794bb71 100644
--- a/components/OgImage/StatsMetricImage.vue
+++ b/components/OgImage/StatsMetricImage.vue
@@ -22,8 +22,7 @@ const bgStyles = computed(() => {
 	<div class="w-full h-full" :style="{ background: '#111111', padding: '80px', fontFamily: 'IBM+Plex+Mono', overflow: 'hidden' }">
 		<img src="/img/stats_bg.png" width="1200" height="600" class="absolute" v-bind="bgStyles" />
 
-		<div :style="{ height: '100%', display: 'flex', flexDirection: 'column', gap: '80px' }">
-			<div class="flex flex-row items-center">
+			<div class="flex flex-row items-center" :style="{ height: '100%' }">
 				<span :style="{ fontSize: '70px', color: 'rgba(255,255,255, 0.9)' }">stats</span>
 				<span :style="{ fontSize: '70px', color: 'rgba(255,255,255, 0.3)' }">('</span>
 				<span :style="{ fontSize: '50px', color: '#FF8351' }">
@@ -32,5 +31,4 @@ const bgStyles = computed(() => {
 				<span :style="{ fontSize: '70px', color: 'rgba(255,255,255, 0.3)' }">')</span>
 			</div>
 		</div>
-	</div>
 </template>
diff --git a/components/OgImage/ValidatorImage.vue b/components/OgImage/ValidatorImage.vue
index 93709b8e..f2abe1d1 100644
--- a/components/OgImage/ValidatorImage.vue
+++ b/components/OgImage/ValidatorImage.vue
@@ -22,7 +22,7 @@ const bgStyles = computed(() => {
 </script>
 
 <template>
-	<div class="w-full h-full" :style="{ background: '#111111', padding: '100px', fontFamily: 'IBM+Plex+Mono', overflow: 'hidden' }">
+	<div class="w-full h-full" :style="{ background: '#111111', padding: '100px 50px', fontFamily: 'IBM+Plex+Mono', overflow: 'hidden' }">
 		<img src="/img/bg.png" width="1200" height="600" class="absolute" v-bind="bgStyles" />
 
 		<div :style="{ height: '100%', display: 'flex', flexDirection: 'column', gap: '50px' }">
diff --git a/services/config.js b/services/config.js
index d67df3e3..f88cf290 100644
--- a/services/config.js
+++ b/services/config.js
@@ -42,7 +42,7 @@ export const useServerURL = () => {
 			return Server.API.dev
 
 		default:
-			return Server.API.mainnet
+			return Server.API.arabica
 	}
 }
 
@@ -69,7 +69,7 @@ export const useSocketURL = () => {
 			return Server.WSS.dev
 
 		default:
-			return Server.WSS.mainnet
+			return Server.WSS.arabica
 	}
 }
 

From 6e6ad1fcb38da4eabd22e7ea63c75065dfd16908 Mon Sep 17 00:00:00 2001
From: GussevPM <GussevPM@GMail.Com>
Date: Thu, 15 May 2025 16:48:46 +0200
Subject: [PATCH 21/22] Change meta

---
 pages/address/[hash].vue     |  8 ++------
 pages/block/[height].vue     |  8 ++------
 pages/namespace/[id].vue     |  8 ++------
 pages/rollup/[slug].vue      |  8 ++------
 pages/rollup/rank/[slug].vue |  8 ++------
 pages/stats/[metric].vue     | 12 +++++-------
 pages/validator/[id].vue     |  8 ++------
 7 files changed, 17 insertions(+), 43 deletions(-)

diff --git a/pages/address/[hash].vue b/pages/address/[hash].vue
index 1f92f91a..ead89376 100644
--- a/pages/address/[hash].vue
+++ b/pages/address/[hash].vue
@@ -37,7 +37,7 @@ useHead({
 	link: [
 		{
 			rel: "canonical",
-			href: `https://celenium.io${route.path}`,
+			href: `${useRequestURL().origin}${useRequestURL().pathname}`,
 		},
 	],
 	meta: [
@@ -55,11 +55,7 @@ useHead({
 		},
 		{
 			property: "og:url",
-			content: `https://celenium.io${route.path}`,
-		},
-		{
-			property: "og:image",
-			content: `https://celenium.io${route.path}__og_image__/og.png`,
+			content: `${useRequestURL().origin}${useRequestURL().pathname}`,
 		},
 		{
 			name: "twitter:title",
diff --git a/pages/block/[height].vue b/pages/block/[height].vue
index 5e4192b3..741267e9 100644
--- a/pages/block/[height].vue
+++ b/pages/block/[height].vue
@@ -43,7 +43,7 @@ useHead({
 	link: [
 		{
 			rel: "canonical",
-			href: `https://celenium.io${route.path}`,
+			href: `${useRequestURL().origin}${useRequestURL().pathname}`,
 		},
 	],
 	meta: [
@@ -61,11 +61,7 @@ useHead({
 		},
 		{
 			property: "og:url",
-			content: `https://celenium.io${route.path}`,
-		},
-		{
-			property: "og:image",
-			content: `https://celenium.io${route.path}__og_image__/og.png`,
+			content: `${useRequestURL().origin}${useRequestURL().pathname}`,
 		},
 		{
 			name: "twitter:title",
diff --git a/pages/namespace/[id].vue b/pages/namespace/[id].vue
index 22747f62..4109a2ea 100644
--- a/pages/namespace/[id].vue
+++ b/pages/namespace/[id].vue
@@ -37,7 +37,7 @@ useHead({
 	link: [
 		{
 			rel: "canonical",
-			href: `https://celenium.io${route.path}`,
+			href: `${useRequestURL().origin}${useRequestURL().pathname}`,
 		},
 	],
 	meta: [
@@ -55,11 +55,7 @@ useHead({
 		},
 		{
 			property: "og:url",
-			content: `https://celenium.io${route.path}`,
-		},
-		{
-			property: "og:image",
-			content: `https://celenium.io${route.path}__og_image__/og.png`,
+			content: `${useRequestURL().origin}${useRequestURL().pathname}`,
 		},
 		{
 			name: "twitter:title",
diff --git a/pages/rollup/[slug].vue b/pages/rollup/[slug].vue
index d5fe54ca..02ac6240 100644
--- a/pages/rollup/[slug].vue
+++ b/pages/rollup/[slug].vue
@@ -37,7 +37,7 @@ useHead({
 	link: [
 		{
 			rel: "canonical",
-			href: `https://celenium.io${route.path}`,
+			href: `${useRequestURL().origin}${useRequestURL().pathname}`,
 		},
 	],
 	meta: [
@@ -55,11 +55,7 @@ useHead({
 		},
 		{
 			property: "og:url",
-			content: `https://celenium.io${route.path}`,
-		},
-		{
-			property: "og:image",
-			content: `https://celenium.io${route.path}__og_image__/og.png`,
+			content: `${useRequestURL().origin}${useRequestURL().pathname}`,
 		},
 		{
 			name: "twitter:title",
diff --git a/pages/rollup/rank/[slug].vue b/pages/rollup/rank/[slug].vue
index 8564c8a1..ddce3d3d 100644
--- a/pages/rollup/rank/[slug].vue
+++ b/pages/rollup/rank/[slug].vue
@@ -149,7 +149,7 @@ useHead({
 	link: [
 		{
 			rel: "canonical",
-			href: `https://celenium.io${route.path}`,
+			href: `${useRequestURL().origin}${useRequestURL().pathname}`,
 		},
 	],
 	meta: [
@@ -167,11 +167,7 @@ useHead({
 		},
 		{
 			property: "og:url",
-			content: `https://celenium.io${route.path}`,
-		},
-		{
-			property: "og:image",
-			content: `https://celenium.io${route.path}__og_image__/og.png`,
+			content: `${useRequestURL().origin}${useRequestURL().pathname}`,
 		},
 		{
 			name: "twitter:title",
diff --git a/pages/stats/[metric].vue b/pages/stats/[metric].vue
index 4ef0a4c9..ee5564b8 100644
--- a/pages/stats/[metric].vue
+++ b/pages/stats/[metric].vue
@@ -55,12 +55,6 @@ if (!series.value?.page) {
 	}
 }
 
-defineOgImageComponent("StatsMetricImage", {
-	title: "Statistics",
-	series: series.value,
-	cacheKey: `${series.value?.page}`,
-})
-
 useHead({
 	title: `Celestia ${metricName.value} Statistics - Celestia Explorer`,
 	link: [
@@ -88,7 +82,7 @@ useHead({
 		},
 		{
 			property: "og:image",
-			content: `https://celenium.io${route.path}__og_image__/og.png`,
+			content: "/img/seo/stats.png",
 		},
 		{
 			name: "twitter:title",
@@ -102,6 +96,10 @@ useHead({
 			name: "twitter:card",
 			content: "summary_large_image",
 		},
+		{
+			name: "twitter:image",
+			content: "https://celenium.io/img/seo/stats.png",
+		},
 	],
 })
 
diff --git a/pages/validator/[id].vue b/pages/validator/[id].vue
index ba27269d..895a81bf 100644
--- a/pages/validator/[id].vue
+++ b/pages/validator/[id].vue
@@ -36,7 +36,7 @@ useHead({
 	link: [
 		{
 			rel: "canonical",
-			href: `https://celenium.io${route.path}`,
+			href: `${useRequestURL().origin}${useRequestURL().pathname}`,
 		},
 	],
 	meta: [
@@ -54,11 +54,7 @@ useHead({
 		},
 		{
 			property: "og:url",
-			content: `https://celenium.io${route.path}`,
-		},
-		{
-			property: "og:image",
-			content: `https://celenium.io${route.path}__og_image__/og.png`,
+			content: `${useRequestURL().origin}${useRequestURL().pathname}`,
 		},
 		{
 			name: "twitter:title",

From afb06b352b161c340865b0903c8e656b09bd49bc Mon Sep 17 00:00:00 2001
From: GussevPM <GussevPM@GMail.Com>
Date: Thu, 15 May 2025 16:49:39 +0200
Subject: [PATCH 22/22] Rm stats metric image

---
 components/OgImage/StatsMetricImage.vue | 34 -------------------------
 1 file changed, 34 deletions(-)
 delete mode 100644 components/OgImage/StatsMetricImage.vue

diff --git a/components/OgImage/StatsMetricImage.vue b/components/OgImage/StatsMetricImage.vue
deleted file mode 100644
index 2794bb71..00000000
--- a/components/OgImage/StatsMetricImage.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<script setup>
-defineOptions({
-	inheritAttrs: false,
-})
-
-const props = defineProps({
-	title: String,
-	series: Object,
-})
-
-const bgStyles = computed(() => {
-	return {
-		style: {
-			filter: "grayscale(1)",
-			opacity: "0.05",
-		},
-	}
-})
-</script>
-
-<template>
-	<div class="w-full h-full" :style="{ background: '#111111', padding: '80px', fontFamily: 'IBM+Plex+Mono', overflow: 'hidden' }">
-		<img src="/img/stats_bg.png" width="1200" height="600" class="absolute" v-bind="bgStyles" />
-
-			<div class="flex flex-row items-center" :style="{ height: '100%' }">
-				<span :style="{ fontSize: '70px', color: 'rgba(255,255,255, 0.9)' }">stats</span>
-				<span :style="{ fontSize: '70px', color: 'rgba(255,255,255, 0.3)' }">('</span>
-				<span :style="{ fontSize: '50px', color: '#FF8351' }">
-					{{ series.title }}
-				</span>
-				<span :style="{ fontSize: '70px', color: 'rgba(255,255,255, 0.3)' }">')</span>
-			</div>
-		</div>
-</template>