fix(storage): persist entries, clear when changing chain

src/main.tsx

@@ -1,18 +1,21 @@
+import { dynamicBuilder$ } from "@/state/chains/chain.state"
 import { RemoveSubscribe, Subscribe } from "@react-rxjs/core"
 import { StrictMode } from "react"
 import { createRoot } from "react-dom/client"
 import { BrowserRouter } from "react-router-dom"
 import { merge } from "rxjs"
 import App from "./App.tsx"
-import { dynamicBuilder$ } from "@/state/chains/chain.state"
+import { TooltipProvider } from "./components/ui/tooltip.tsx"
 import "./index.css"
 import { explorer$ } from "./pages/Explorer"
+import { storage$ } from "./pages/Storage/storage.state.ts"
 import { transactions$ } from "./pages/Transactions"
 import { ThemeProvider } from "./ThemeProvider.tsx"
-import { TooltipProvider } from "./components/ui/tooltip.tsx"
 
 createRoot(document.getElementById("root")!).render(
-  <Subscribe source$={merge(dynamicBuilder$, explorer$, transactions$)}>
+  <Subscribe
+    source$={merge(dynamicBuilder$, explorer$, transactions$, storage$)}
+  >
     <RemoveSubscribe>
       <StrictMode>
         <ThemeProvider>

src/pages/Storage/StorageQuery.tsx

@@ -208,8 +208,8 @@ const StorageKeyInput: FC<{ idx: number; type: number; disabled: boolean }> = ({
             ? null
             : (value.value.encoded ?? codec.enc(value.value.decoded))) ?? null
       )
-    } catch {
-      null
+    } catch (ex) {
+      console.error(ex)
     }
   }
   const binaryValue = getBinValue()

src/pages/Storage/StorageSubscriptions.tsx

@@ -70,13 +70,15 @@ const StorageSubscriptionBox: FC<{ subscription: string }> = ({
               },
             ]}
           />
-          <button onClick={() => toggleSubscriptionPause(subscription)}>
-            {storageSubscription.paused ? (
-              <PlayCircle {...iconButtonProps} />
-            ) : (
-              <PauseCircle {...iconButtonProps} />
-            )}
-          </button>
+          {storageSubscription.completed ? null : (
+            <button onClick={() => toggleSubscriptionPause(subscription)}>
+              {storageSubscription.paused ? (
+                <PlayCircle {...iconButtonProps} />
+              ) : (
+                <PauseCircle {...iconButtonProps} />
+              )}
+            </button>
+          )}
           <button onClick={() => removeStorageSubscription(subscription)}>
             <Trash2 {...iconButtonProps} />
           </button>

src/pages/Storage/storage.state.ts

@@ -1,4 +1,5 @@
 import { bytesToString } from "@/components/BinaryInput"
+import { selectedChainChanged$ } from "@/state/chains/chain.state"
 import { state } from "@react-rxjs/core"
 import {
   createKeyedSignal,
@@ -9,10 +10,15 @@ import {
 import { Binary } from "polkadot-api"
 import {
   combineLatest,
+  concat,
   distinctUntilChanged,
+  ignoreElements,
   map,
+  merge,
   Observable,
+  of,
   scan,
+  shareReplay,
   startWith,
   switchMap,
   takeUntil,
@@ -49,6 +55,7 @@ export type StorageSubscription = {
   type: number
   single: boolean
   paused: boolean
+  completed: boolean
 } & ({ result: unknown } | {})
 const [getStorageSubscription$, storageSubscriptionKeyChange$] = partitionByKey(
   newStorageSubscription$,
@@ -64,15 +71,24 @@ const [getStorageSubscription$, storageSubscriptionKeyChange$] = partitionByKey(
           map((result) => ({
             ...props,
             result,
-            paused: false,
           })),
           startWith(props),
+          shareReplay(1),
         )
-        return combineLatest([paused$, result$]).pipe(
-          map(([paused, result]) => ({ ...result, paused })),
+        const completed$ = concat(
+          of(false),
+          result$.pipe(ignoreElements()),
+          of(true),
+        )
+        return combineLatest([paused$, completed$, result$]).pipe(
+          map(([paused, completed, result]) => ({
+            ...result,
+            paused,
+            completed,
+          })),
         )
       }),
-      takeUntil(removeStorageSubscription$(id)),
+      takeUntil(merge(removeStorageSubscription$(id), selectedChainChanged$)),
     ),
 )
 
@@ -83,6 +99,7 @@ export const storageSubscriptionKeys$ = state(
   ),
   [],
 )
+export const storage$ = storageSubscriptionKeys$
 
 export const storageSubscription$ = state(
   (key: string): Observable<StorageSubscription> =>