From 2cb6fc150192ab5d6b3decbb3a41156ff221b45a Mon Sep 17 00:00:00 2001
From: rakha <wandazty@gmail.com>
Date: Mon, 4 May 2026 13:41:05 +0700
Subject: [PATCH] fix(viewer): fix typo, subscription leak, and block size
 display
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fix typo in transactions error message: 'recepie' → 'transactions'
- Fix NetworkInfo subscription leak: save and call the unsubscribe
  function returned by blocksStore.subscribe() instead of creating a
  new empty subscription in onDestroy
- Fix block size display in RecentBlocks: divide by 1024 (not 1000)
  and format with toFixed(2) to match the full Blocks page

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 applications/viewer/src/routes/NetworkInfo.svelte          | 7 ++++---
 applications/viewer/src/routes/blocks/RecentBlocks.svelte  | 2 +-
 .../viewer/src/routes/transactions/+page.server.ts         | 2 +-
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/applications/viewer/src/routes/NetworkInfo.svelte b/applications/viewer/src/routes/NetworkInfo.svelte
index e6e83550..302636ae 100644
--- a/applications/viewer/src/routes/NetworkInfo.svelte
+++ b/applications/viewer/src/routes/NetworkInfo.svelte
@@ -29,6 +29,7 @@
     let error: string | null = null;
     let lastFetchedEpoch: number = 0;
     let store: any;
+    let unsubscribe: (() => void) | null = null;
 
     async function fetchEpochData() {
         try {
@@ -84,12 +85,12 @@
     onMount(async () => {
         const importedStore = await import('./blocks/store.js');
         store = importedStore;
-        store.blocksStore.subscribe(handleStoreMessage);
+        unsubscribe = store.blocksStore.subscribe(handleStoreMessage);
     });
 
     onDestroy(() => {
-        if (store) {
-            store.blocksStore.subscribe(() => {})();
+        if (unsubscribe) {
+            unsubscribe();
         }
     });
 </script>
diff --git a/applications/viewer/src/routes/blocks/RecentBlocks.svelte b/applications/viewer/src/routes/blocks/RecentBlocks.svelte
index c7aa76e2..7435f822 100644
--- a/applications/viewer/src/routes/blocks/RecentBlocks.svelte
+++ b/applications/viewer/src/routes/blocks/RecentBlocks.svelte
@@ -19,7 +19,7 @@
                     </h3>
                     <p class="text-sm text-gray-600"><span class="font-bold">Slot</span> {block.slot}</p>
                     <p class="text-sm text-gray-600"><span class="font-bold">Txs</span> {block.ntx}</p>
-                    <p class="text-sm text-gray-600"><span class="font-bold">Size</span> {block.size / 1000}</p>
+                    <p class="text-sm text-gray-600"><span class="font-bold">Size</span> {(block.size / 1024).toFixed(2)} kb</p>
                     <p class="text-sm text-gray-600 break-words"><span class="font-bold">Pool</span> {block.slot_leader}</p>
                     <p class="text-sm text-gray-600">
                         <span class="text-xs text-gray-500">
diff --git a/applications/viewer/src/routes/transactions/+page.server.ts b/applications/viewer/src/routes/transactions/+page.server.ts
index babf75bf..62007eee 100644
--- a/applications/viewer/src/routes/transactions/+page.server.ts
+++ b/applications/viewer/src/routes/transactions/+page.server.ts
@@ -28,7 +28,7 @@ export const load: PageLoad = async ({params, url}) => {
 
     return {
         status: 404,
-        body: { error: 'Can not fetch recepie.' }
+        body: { error: 'Can not fetch transactions.' }
     };
 
 }