Add link to value editor

src/pages/Metadata/Editor.tsx

@@ -0,0 +1,23 @@
+import { lookup$ } from "@/chain.state"
+import { LookupTypeEdit } from "@/codec-components/LookupTypeEdit"
+import { getTypeComplexity } from "@/utils/shape"
+import { state, useStateObservable } from "@react-rxjs/core"
+import { FC, useState } from "react"
+
+const lookupState$ = state(lookup$, null)
+export const Editor: FC<{ id: number }> = ({ id }) => {
+  const lookup = useStateObservable(lookupState$)
+  const [value, setValue] = useState<Uint8Array | "partial" | null>(null)
+  if (!lookup) return null
+  const shape = lookup(id)
+  const complexity = getTypeComplexity(shape)
+
+  return (
+    <LookupTypeEdit
+      type={id}
+      value={value}
+      onValueChange={setValue}
+      tree={complexity === "tree"}
+    />
+  )
+}

src/pages/Metadata/Lookup.tsx

@@ -1,5 +1,6 @@
 import { ExpandBtn } from "@/components/Expand"
 import { V14Lookup } from "@polkadot-api/substrate-bindings"
+import { Edit } from "lucide-react"
 import {
   createContext,
   FC,
@@ -7,6 +8,7 @@ import {
   useContext,
   useState,
 } from "react"
+import { Link } from "react-router-dom"
 
 export const Lookup: FC<{ lookup: V14Lookup }> = ({ lookup }) => {
   const [id, setId] = useState(0)
@@ -175,9 +177,14 @@ const GenericLookupNode: FC<PropsWithChildren<{ entry: V14Entry }>> = ({
   children,
 }) => {
   return (
-    <div className="flex flex-col gap-2 w-full">
+    <div className="flex flex-col gap-2 w-full py-2">
       <div>
-        <h4 className="font-bold">Type: {entry.def.tag}</h4>
+        <div className="flex gap-2 items-center">
+          <Link to={`editor/${entry.id}`} className="hover:text-polkadot-400">
+            <Edit size={20} />
+          </Link>
+          <h4 className="font-bold">Type: {entry.def.tag}</h4>
+        </div>
         {entry.path.length ? <p>Path: {entry.path.join(".")}</p> : null}
       </div>
       {children}

src/pages/Metadata/Metadata.tsx

@@ -1,51 +1,79 @@
-import { metadata$ } from "@/chain.state"
+import { lookup$, metadata$ } from "@/chain.state"
+import { LookupTypeEdit } from "@/codec-components/LookupTypeEdit"
 import { ButtonGroup } from "@/components/ButtonGroup"
 import { JsonDisplay } from "@/components/JsonDisplay"
 import { LoadingMetadata } from "@/components/Loading"
 import { withSubscribe } from "@/components/withSuspense"
+import { getTypeComplexity } from "@/utils/shape"
 import { V14, V15 } from "@polkadot-api/substrate-bindings"
 import { useStateObservable } from "@react-rxjs/core"
 import { FC, useState } from "react"
+import { Route, Routes, useParams } from "react-router-dom"
 import { Lookup } from "./Lookup"
 
 export const Metadata = withSubscribe(
-  () => {
-    const [mode, setMode] = useState<"json" | "explorer">("explorer")
-    const metadata = useStateObservable(metadata$)
-
-    return (
-      <div className="flex flex-col overflow-auto items-start gap-2 p-2">
-        <ButtonGroup
-          value={mode}
-          onValueChange={setMode as any}
-          items={[
-            {
-              value: "explorer",
-              content: "Explorer",
-            },
-            {
-              value: "json",
-              content: "JSON",
-            },
-          ]}
-        />
-        {mode === "json" ? (
-          <JsonDisplay src={metadata} />
-        ) : (
-          <MetadataExplorer value={metadata} />
-        )}
-      </div>
-    )
-  },
+  () => (
+    <Routes>
+      <Route path="editor/:id" element={<Editor />} />
+      <Route path="*" element={<MetadataExplorer />} />
+    </Routes>
+  ),
   {
     fallback: <LoadingMetadata />,
   },
 )
 
-const MetadataExplorer: FC<{ value: V14 | V15 }> = ({ value }) => {
+const MetadataExplorer = () => {
+  const [mode, setMode] = useState<"json" | "explorer">("explorer")
+  const metadata = useStateObservable(metadata$)
+
+  return (
+    <div className="flex flex-col overflow-auto items-start gap-2 p-2">
+      <ButtonGroup
+        value={mode}
+        onValueChange={setMode as any}
+        items={[
+          {
+            value: "explorer",
+            content: "Explorer",
+          },
+          {
+            value: "json",
+            content: "JSON",
+          },
+        ]}
+      />
+      {mode === "json" ? (
+        <JsonDisplay src={metadata} />
+      ) : (
+        <DecodedExplorer value={metadata} />
+      )}
+    </div>
+  )
+}
+
+const DecodedExplorer: FC<{ value: V14 | V15 }> = ({ value }) => {
   return (
     <div className="w-full">
       <Lookup lookup={value.lookup} />
     </div>
   )
 }
+
+const Editor = () => {
+  const { id } = useParams()
+  const lookup = useStateObservable(lookup$)
+  const [value, setValue] = useState<Uint8Array | "partial" | null>(null)
+  if (!lookup) return null
+  const shape = lookup(Number(id))
+  const complexity = getTypeComplexity(shape)
+
+  return (
+    <LookupTypeEdit
+      type={Number(id)}
+      value={value}
+      onValueChange={setValue}
+      tree={complexity === "tree"}
+    />
+  )
+}