feat: display storage hashers on Storage tab (#76)

src/pages/Storage/StorageQuery.tsx

@@ -84,6 +84,12 @@ const keys$ = selectedEntry$.pipeState(
   withDefault([] as number[]),
 )
 
+const hashers$ = selectedEntry$.pipeState(
+  filter((e) => !!e),
+  map((entry) => entry.hashers),
+  withDefault([] as string[]),
+)
+
 const [toggleKey$, toggleKey] = createSignal<number>()
 const keysEnabled$ = keys$.pipeState(
   switchMap((k) =>
@@ -138,6 +144,7 @@ export const StorageKeysInput: FC<{
   disableToggle?: boolean
 }> = ({ disableToggle }) => {
   const keys = useStateObservable(keys$)
+  const hashers = useStateObservable(hashers$)
   const keysEnabled = useStateObservable(keysEnabled$)
 
   return (
@@ -152,6 +159,7 @@ export const StorageKeysInput: FC<{
           )}
           <StorageKeyInput
             idx={idx}
+            hasher={hashers[idx]}
             type={type}
             disabled={keysEnabled <= idx}
           />
@@ -209,11 +217,12 @@ const keyInputValue$ = state(
     type: CodecComponentType.Initial,
   } satisfies CodecComponentValue,
 )
-const StorageKeyInput: FC<{ idx: number; type: number; disabled: boolean }> = ({
-  idx,
-  type,
-  disabled,
-}) => {
+const StorageKeyInput: FC<{
+  idx: number
+  type: number
+  disabled: boolean
+  hasher: string
+}> = ({ idx, type, disabled, hasher }) => {
   const builder = useStateObservable(builderState$)
   const value = useStateObservable(keyInputValue$(idx))
 
@@ -269,7 +278,9 @@ const StorageKeyInput: FC<{ idx: number; type: number; disabled: boolean }> = ({
       )}
     >
       <div className="flex justify-between">
-        <div>{getTypeName()}</div>
+        <div>
+          {getTypeName()} ({hasher})
+        </div>
         <BinaryEditButton
           initialValue={
             typeof binaryValue === "string"

src/pages/Storage/storage.state.ts

@@ -34,6 +34,7 @@ export type StorageMetadataEntry = {
   key: number[]
   value: number
   docs: string[]
+  hashers: string[]
 }
 
 export const [entryChange$, selectEntry] = createSignal<{
@@ -109,16 +110,19 @@ export const selectedEntry$ = state(
           pallet,
           entry: entry.name,
           docs,
+          hashers: [],
         }
       }
 
-      if (type.value.hashers.length === 1) {
+      const hashers = type.value.hashers.map((x) => x.tag)
+      if (hashers.length === 1) {
         return {
           value: type.value.value,
           key: [type.value.key],
           pallet,
           entry: entry.name,
           docs,
+          hashers,
         }
       }
 
@@ -138,6 +142,7 @@ export const selectedEntry$ = state(
         pallet,
         entry: entry.name,
         docs,
+        hashers,
       }
     }),
   ),