show types on variants, reuse checksumBuilder

src/CommonTypes/CommonType.tsx

@@ -1,4 +1,5 @@
-import { TextField } from "@radix-ui/themes"
+import { EnumVar } from "@polkadot-api/metadata-builders"
+import { TextField, Tooltip } from "@radix-ui/themes"
 import { useStateObservable } from "@react-rxjs/core"
 import { FC, useMemo, useState } from "react"
 import { twMerge } from "tailwind-merge"
@@ -86,10 +87,8 @@ export const CommonType: FC<{
           <div>
             <h2 className="text-2xl">Variants</h2>
             <ul className="flex flex-wrap gap-2">
-              {Object.keys(types[0].type.value).map((key) => (
-                <li key={key} className="px-2 py-1 border rounded">
-                  <code>{key}</code>
-                </li>
+              {Object.entries(types[0].type.value).map(([key, value]) => (
+                <Variant key={key} name={key} value={value} />
               ))}
             </ul>
           </div>
@@ -108,6 +107,39 @@ export const CommonType: FC<{
   )
 }
 
+const Variant: FC<{
+  name: string
+  value: EnumVar["value"][string]
+}> = ({ name, value }) => {
+  const valueType =
+    value.type === "void" ? "void" : stringifyCircular(value.value)
+
+  return (
+    <Tooltip content={valueType}>
+      <li className="px-2 py-1 border rounded">
+        <code>{name}</code>
+      </li>
+    </Tooltip>
+  )
+}
+const stringifyCircular = (value: unknown) => {
+  const seen = new Set<any>()
+  try {
+    return JSON.stringify(value, (_, value) => {
+      if (typeof value === "object" && value !== null) {
+        if (seen.has(value)) {
+          return
+        }
+        seen.add(value)
+      }
+      return value
+    })
+  } catch (ex) {
+    console.error(ex)
+    return `{serialization error}`
+  }
+}
+
 const Chain: FC<{
   chain: string
   types: EnumEntry[]
@@ -162,7 +194,7 @@ const ChainReferences: FC<{ chain: string; checksum: string }> = ({
 
 const ReferenceList: FC<{ references: string[] }> = ({ references }) => (
   <ul className="flex flex-wrap items-center gap-2">
-    {references.sort(sortRefs).map((key) => (
+    {[...new Set(references.sort(sortRefs))].map((key) => (
       <EnumReference key={key} checksum={key} />
     ))}
   </ul>

src/CommonTypes/Export.tsx

@@ -15,7 +15,7 @@ export type RepositoryEntry = {
   paths: string[]
   type: string
 }
-const allNewKnownTypes$ = state(
+const allKnownTypes$ = state(
   combineLatest({
     chains: combineKeys(selectedChains$, chainTypes$),
     names: commonTypeNames$,
@@ -24,8 +24,6 @@ const allNewKnownTypes$ = state(
       const result: Record<string, RepositoryEntry> = {}
 
       Object.entries(names).forEach(([checksum, name]) => {
-        if (!name) return
-
         const chainsWithType = Array.from(chains.keys()).filter(
           (chain) => checksum in chains.get(chain)!,
         )
@@ -66,16 +64,20 @@ const onlyChanges$ = state(
 )
 
 const newKnownTypes$ = state(
-  combineLatest([allNewKnownTypes$, onlyChanges$]).pipe(
-    map(([allNewKnownTypes, onlyChanges]) =>
+  combineLatest([allKnownTypes$, onlyChanges$]).pipe(
+    map(([allKnownTypes, onlyChanges]) =>
       onlyChanges
         ? Object.fromEntries(
-            Object.entries(allNewKnownTypes).filter(
+            Object.entries(allKnownTypes).filter(
               ([checksum, entry]) =>
                 entry.name !== getCurrentKnownType(checksum),
             ),
           )
-        : allNewKnownTypes,
+        : Object.fromEntries(
+            Object.entries(allKnownTypes).filter(
+              ([, entry]) => entry.name !== null,
+            ),
+          ),
     ),
   ),
   {},

src/CommonTypes/commonTypes.state.ts

@@ -1,9 +1,5 @@
 import { knownTypesRepository } from "@polkadot-api/codegen"
-import {
-  LookupEntry,
-  getChecksumBuilder,
-  getLookupFn,
-} from "@polkadot-api/metadata-builders"
+import { LookupEntry, getLookupFn } from "@polkadot-api/metadata-builders"
 import { V14, V15 } from "@polkadot-api/substrate-bindings"
 import { state, withDefault } from "@react-rxjs/core"
 import { combineKeys, createSignal, mergeWithKey } from "@react-rxjs/utils"
@@ -14,21 +10,22 @@ import {
   distinctUntilChanged,
   map,
   scan,
+  withLatestFrom,
 } from "rxjs"
 import { selectedChains$ } from "../ChainPicker"
-import { metadatas } from "../api/metadatas"
+import { checksumBuilders, metadatas } from "../api/metadatas"
 import { persistSubscription } from "../lib/persistSubscription"
 
 export type MetadataEntry =
   (V15 | V14)["lookup"] extends Array<infer R> ? R : never
 export type EnumEntry = LookupEntry & { type: "enum"; entry: MetadataEntry }
 export const chainTypes$ = state(
   (chain: string) =>
-    metadatas[chain].pipe(
+    checksumBuilders[chain].pipe(
+      withLatestFrom(metadatas[chain]),
       catchError(() => EMPTY),
-      map((metadata) => {
+      map(([checksumBuilder, metadata]) => {
         const lookup = getLookupFn(metadata.lookup)
-        const checksumBuilder = getChecksumBuilder(metadata)
 
         const result: Record<string, EnumEntry[]> = {}
         for (let i = 0; i < metadata.lookup.length; i++) {

src/CommonTypes/typeReferences.state.ts

@@ -1,12 +1,11 @@
 import {
   EnumVar,
   LookupEntry,
-  getChecksumBuilder,
   getLookupFn,
 } from "@polkadot-api/metadata-builders"
 import { state } from "@react-rxjs/core"
-import { map } from "rxjs"
-import { metadatas } from "../api/metadatas"
+import { map, withLatestFrom } from "rxjs"
+import { checksumBuilders, metadatas } from "../api/metadatas"
 
 type References = { direct: string[]; indirect: string[] }
 const emptyReferences: References = { direct: [], indirect: [] }
@@ -21,13 +20,13 @@ const removeDuplicates = <T>(v: Array<T>) => [...new Set(v)]
  */
 export const typeReferences$ = state(
   (chain: string) =>
-    metadatas[chain].pipe(
-      map((metadata) => {
+    checksumBuilders[chain].pipe(
+      withLatestFrom(metadatas[chain]),
+      map(([checksumBuilder, metadata]) => {
         const result: Record<
           string,
           { inputs: References; outputs: References; backRefs: References }
         > = {}
-        const checksumBuilder = getChecksumBuilder(metadata)
         const lookup = getLookupFn(metadata.lookup)
 
         const referenceCache: Record<number, References> = {}
@@ -185,6 +184,7 @@ export const typeReferences$ = state(
 function getEnumInputs(entry: EnumVar["value"][string]): LookupEntry[] {
   switch (entry.type) {
     case "lookupEntry":
+    case "array":
       return [entry.value]
     case "struct":
       return Object.values(entry.value)

src/api/metadatas.ts

@@ -20,6 +20,7 @@ import {
 import { selectedChains$ } from "../ChainPicker"
 import { persistSubscription } from "../lib/persistSubscription"
 import { chains } from "./smoldot"
+import { getChecksumBuilder } from "@polkadot-api/metadata-builders"
 
 export const [changeUseCache$, setUseCache] = createSignal<boolean>()
 export const useCache$ = state(changeUseCache$, true)
@@ -61,6 +62,10 @@ export const metadatas = mapObject(chains, (chain$, key) => {
   )
 })
 
+export const checksumBuilders = mapObject(metadatas, (metadata$) =>
+  metadata$.pipe(map(getChecksumBuilder), persistSubscription()),
+)
+
 export enum LoadStatus {
   Idle = "Idle",
   Loading = "Loading",