link block detail to extrinsic editor

src/components/useSynchroniseInput.ts

@@ -18,11 +18,13 @@ export const useGenericSynchronizeInput = <T extends unknown, R>(
   useLayoutEffect(() => {
     values.current.editor = value
     if (!eqFn(values.current.input, value)) {
-      setInputValue(value === NOTIN ? defaultValue : serializeValue(value))
+      const r = value === NOTIN ? defaultValue : serializeValue(value)
+      setInputValue(r)
     }
   }, [value])
 
   useEffect(() => {
+    if (inputValue === values.current.input) return
     values.current.input = inputValue
     const parsed = parseValue(inputValue)
     if (parsed !== values.current.editor) {

src/pages/Explorer/Detail/BlockDetail.tsx

@@ -1,13 +1,16 @@
 import { runtimeCtx$ } from "@/chain.state"
+import { CopyBinary } from "@/codec-components/ViewCodec/CopyBinary"
 import { AccountIdDisplay } from "@/components/AccountIdDisplay"
 import { ExpandBtn } from "@/components/Expand"
 import { JsonDisplay } from "@/components/JsonDisplay"
 import { Loading } from "@/components/Loading"
 import { groupBy } from "@/lib/groupBy"
 import { SystemEvent } from "@polkadot-api/observable-client"
+import { toHex } from "@polkadot-api/utils"
 import * as Tabs from "@radix-ui/react-tabs"
 import { state, useStateObservable } from "@react-rxjs/core"
 import { combineKeys } from "@react-rxjs/utils"
+import { Edit } from "lucide-react"
 import { FC, useEffect, useRef, useState } from "react"
 import { Link, useLocation, useParams } from "react-router-dom"
 import {
@@ -264,13 +267,27 @@ const Extrinsic: FC<{
 
   return (
     <li className="p-2 border rounded border-polkadot-700 mb-2">
-      <button
-        onClick={() => setExpanded((e) => !e)}
-        className="flex gap-1 items-center"
-      >
-        <ExpandBtn expanded={expanded} />
-        {extrinsic.call.type}.{extrinsic.call.value.type}
-      </button>
+      <div className="flex justify-between items-center">
+        <button
+          onClick={() => setExpanded((e) => !e)}
+          className="flex gap-1 items-center"
+        >
+          <ExpandBtn expanded={expanded} />
+          {extrinsic.call.type}.{extrinsic.call.value.type}
+        </button>
+        <div className="flex gap-2 items-center">
+          <CopyBinary value={extrinsic.callData} />
+          {extrinsic.callData.length > 1024 ? (
+            <span className="opacity-50">
+              <Edit size={14} />
+            </span>
+          ) : (
+            <Link to={"/extrinsics#" + toHex(extrinsic.callData)}>
+              <Edit size={14} />
+            </Link>
+          )}
+        </div>
+      </div>
       {expanded ? (
         <div className="overflow-hidden">
           {extrinsic.signed && (

src/pages/Explorer/Detail/extrinsicDecoder.ts

@@ -78,17 +78,22 @@ export const createExtrinsicCodec = (
   return enhanceDecoder(Bytes().dec, (bytes: Uint8Array) => {
     const header = extrinsicHeader(bytes)
 
-    return header.signed
-      ? {
-          version: header.version,
-          signed: true as const,
-          ...signedExtrinsicV4.dec(bytes.slice(1)),
-        }
-      : {
-          version: header.version,
-          signed: false as const,
-          call: call.dec(bytes.slice(1)),
-        }
+    if (header.signed) {
+      const v4Payload = signedExtrinsicV4.dec(bytes.slice(1))
+      return {
+        version: header.version,
+        signed: true as const,
+        ...v4Payload,
+        callData: call.enc(v4Payload.call),
+      }
+    }
+
+    return {
+      version: header.version,
+      signed: false as const,
+      call: call.dec(bytes.slice(1)),
+      callData: bytes.slice(1),
+    }
   })
 }
 export type DecodedExtrinsic = ReturnType<

src/pages/Extrinsics/Extrinsics.tsx

@@ -11,6 +11,7 @@ import { map } from "rxjs"
 import { EditMode } from "./EditMode"
 import { JsonMode } from "./JsonMode"
 import { ExtrinsicModal } from "./SubmitTx/SubmitTx"
+import { useLocation } from "react-router-dom"
 
 const extrinsicProps$ = state(
   runtimeCtx$.pipe(
@@ -33,11 +34,11 @@ export const Extrinsics = withSubscribe(
   () => {
     const [viewMode, setViewMode] = useState<"edit" | "json">("edit")
     const extrinsicProps = useStateObservable(extrinsicProps$)
+    const location = useLocation()
 
     const [componentValue, setComponentValue] = useState<CodecComponentValue>({
       type: CodecComponentType.Initial,
-      value:
-        "0x630b040101010031323334353637383934353631363531363531363531363531363531353631350100000108000100002c00000000080000000000",
+      value: location.hash.slice(1),
     })
     const binaryValue =
       (componentValue.type === CodecComponentType.Initial