decode storage results

src/chain.state.ts

@@ -11,6 +11,7 @@ import { toHex } from "@polkadot-api/utils"
 import { shareLatest } from "@react-rxjs/core"
 import { createClient, PolkadotClient } from "polkadot-api"
 import { chainSpec } from "polkadot-api/chains/polkadot"
+import { withLogsRecorder } from "polkadot-api/logs-provider"
 import { withPolkadotSdkCompat } from "polkadot-api/polkadot-sdk-compat"
 import { getSmProvider } from "polkadot-api/sm-provider"
 import { Client } from "polkadot-api/smoldot"
@@ -124,5 +125,5 @@ function getProvider(source: ChainSource) {
         chainSpec: source.value.chainSpec,
       })
 
-  return getSmProvider(chain)
+  return withLogsRecorder(console.debug, getSmProvider(chain))
 }

src/pages/Storage/StorageDecode.tsx

@@ -1,8 +1,52 @@
 import { ActionButton } from "@/components/ActionButton"
-import { FC, useState } from "react"
+import { NOTIN } from "@codec-components"
+import { state, useStateObservable, withDefault } from "@react-rxjs/core"
+import { createSignal } from "@react-rxjs/utils"
+import { FC } from "react"
+import { combineLatest, firstValueFrom, map, of } from "rxjs"
+import { addStorageSubscription, selectedEntry$ } from "./storage.state"
+import { lookup$ } from "@/chain.state"
+import { getDynamicBuilder } from "@polkadot-api/metadata-builders"
+
+const [valueChange, setValue] = createSignal<string>()
+const value$ = state(valueChange, "")
+
+const valueDecoder$ = combineLatest([selectedEntry$, lookup$]).pipe(
+  map(([selectedEntry, lookup]) =>
+    selectedEntry
+      ? getDynamicBuilder(lookup).buildDefinition(selectedEntry.value).dec
+      : null,
+  ),
+)
+const decodedValue$ = state(
+  combineLatest([value$, valueDecoder$]).pipe(
+    map(([value, decoder]) => {
+      if (!decoder) return NOTIN
+      try {
+        return decoder(value)
+      } catch (_) {
+        return NOTIN
+      }
+    }),
+  ),
+  NOTIN,
+)
 
 export const StorageDecode: FC = () => {
-  const [value, setValue] = useState("")
+  const value = useStateObservable(value$)
+  const decoded = useStateObservable(decodedValue$)
+
+  const submit = async () => {
+    const entry = await firstValueFrom(selectedEntry$)
+    const stream = of(decoded)
+
+    addStorageSubscription({
+      name: `${entry!.pallet}.${entry!.entry}(…)`,
+      single: true,
+      stream,
+      type: entry!.value,
+    })
+  }
 
   return (
     <div className="w-full">
@@ -12,7 +56,9 @@ export const StorageDecode: FC = () => {
         className="w-full bg-polkadot-100 p-2 rounded tabular-nums text-polkadot-800"
         placeholder="Enter hex …"
       />
-      <ActionButton>Decode</ActionButton>
+      <ActionButton disabled={decoded === NOTIN} onClick={submit}>
+        Decode
+      </ActionButton>
     </div>
   )
 }