use published lib wip

package.json

@@ -20,6 +20,7 @@
     "@polkadot-api/ledger-signer": "^0.1.6",
     "@polkadot-api/metadata-builders": "^0.9.1",
     "@polkadot-api/observable-client": "^0.6.2",
+    "@polkadot-api/react-builder": "link:../polkadot-api/packages/react-builder",
     "@polkadot-api/substrate-bindings": "^0.9.3",
     "@polkadot-api/substrate-client": "^0.3.0",
     "@polkadot-api/utils": "^0.1.2",

pnpm-lock.yaml

@@ -34,6 +34,9 @@ importers:
       '@polkadot-api/observable-client':
         specifier: ^0.6.2
         version: 0.6.2(patch_hash=ntppxp7tto3f2viektlrpekj7y)(@polkadot-api/substrate-client@0.3.0)(rxjs@7.8.1)
+      '@polkadot-api/react-builder':
+        specifier: link:../polkadot-api/packages/react-builder
+        version: link:../polkadot-api/packages/react-builder
       '@polkadot-api/substrate-bindings':
         specifier: ^0.9.3
         version: 0.9.3

src/codec-components/BinaryViewCodec/CEnum.tsx

@@ -1,4 +1,4 @@
-import { EditEnum, NOTIN } from "@codec-components"
+import { EditEnum, NOTIN } from "@polkadot-api/react-builder"
 import { u8 } from "@polkadot-api/substrate-bindings"
 import { useStateObservable } from "@react-rxjs/core"
 import { isActive$ } from "../common/paths.state"

src/codec-components/BinaryViewCodec/CStruct.tsx

@@ -1,4 +1,4 @@
-import { EditStruct, NOTIN } from "@codec-components"
+import { EditStruct, NOTIN } from "@polkadot-api/react-builder"
 import { useStateObservable } from "@react-rxjs/core"
 import React from "react"
 import { isActive$ } from "../common/paths.state"

src/codec-components/BinaryViewCodec/ListComponents.tsx

@@ -4,7 +4,7 @@ import {
   EditSequence,
   EditTuple,
   NOTIN,
-} from "@codec-components"
+} from "@polkadot-api/react-builder"
 import { compact } from "@polkadot-api/substrate-bindings"
 import { useStateObservable } from "@react-rxjs/core"
 import React, { ReactNode } from "react"

src/codec-components/BinaryViewCodec/codec-components.tsx

@@ -11,7 +11,7 @@ import {
   EditStr,
   EditVoid,
   NOTIN,
-} from "@codec-components"
+} from "@polkadot-api/react-builder"
 import { u8 } from "@polkadot-api/substrate-bindings"
 import { toHex } from "@polkadot-api/utils"
 import { useStateObservable } from "@react-rxjs/core"

src/codec-components/BinaryViewCodec/index.ts

@@ -1,4 +1,4 @@
-import { getCodecComponent } from "@codec-components"
+import { getCodecComponent } from "@polkadot-api/react-builder"
 
 import * as treeComponents from "./components"
 

src/codec-components/EditCodec/CAccountId.tsx

@@ -20,7 +20,7 @@ import {
 } from "@/extension-accounts.state"
 import { identity$, isVerified } from "@/identity.state"
 import { cn } from "@/utils/cn"
-import { EditAccountId, NOTIN } from "@codec-components"
+import { EditAccountId, NOTIN } from "@polkadot-api/react-builder"
 import { getSs58AddressInfo } from "@polkadot-api/substrate-bindings"
 import { toHex } from "@polkadot-api/utils"
 import { state, useStateObservable } from "@react-rxjs/core"

src/codec-components/EditCodec/CBytes.tsx

@@ -1,4 +1,4 @@
-import { EditBytes } from "@codec-components"
+import { EditBytes } from "@polkadot-api/react-builder"
 import { BinaryInput } from "@/components/BinaryInput"
 
 export const CBytes: EditBytes = ({ value, onValueChanged, len }) => (

src/codec-components/EditCodec/CEnum.tsx

@@ -1,6 +1,6 @@
 import { SearchableSelect } from "@/components/Select"
 import { isEnumComplex, isEnumVoid } from "@/utils/shape"
-import { EditEnum, NOTIN } from "@codec-components"
+import { EditEnum, NOTIN } from "@polkadot-api/react-builder"
 import { Marker } from "../common/Markers"
 import { useSubtreeFocus } from "../common/SubtreeFocus"
 

src/codec-components/EditCodec/CSequence.tsx

@@ -1,4 +1,4 @@
-import { EditSequence, NOTIN } from "@codec-components"
+import { EditSequence, NOTIN } from "@polkadot-api/react-builder"
 import { CirclePlus } from "lucide-react"
 import { twMerge as clsx } from "tailwind-merge"
 import { ListItem } from "../common/ListItem"

src/codec-components/EditCodec/CStr.tsx

@@ -1,5 +1,5 @@
 import { withDefault } from "@/utils/default"
-import { EditStr } from "@codec-components"
+import { EditStr } from "@polkadot-api/react-builder"
 
 // TODO
 export const CStr: EditStr = ({ value, onValueChanged }) => {

src/codec-components/EditCodec/CStruct.tsx

@@ -1,6 +1,6 @@
 import { ExpandBtn } from "@/components/Expand"
 import { getFinalType } from "@/utils/shape"
-import { EditStruct } from "@codec-components"
+import { EditStruct } from "@polkadot-api/react-builder"
 import { useStateObservable } from "@react-rxjs/core"
 import React from "react"
 import { twMerge as clsx, twMerge } from "tailwind-merge"

src/codec-components/EditCodec/CTuple.tsx

@@ -1,5 +1,5 @@
 import { useSubtreeFocus } from "../common/SubtreeFocus"
-import { EditTuple } from "@codec-components"
+import { EditTuple } from "@polkadot-api/react-builder"
 
 export const CTuple: EditTuple = ({ innerComponents, path }) => {
   const focus = useSubtreeFocus()

src/codec-components/EditCodec/EditNumber.tsx

@@ -6,7 +6,7 @@ import {
   EditNumber,
   EditNumberInterface,
   NOTIN,
-} from "@codec-components"
+} from "@polkadot-api/react-builder"
 import { TextInputField } from "./codec-components"
 import { useSynchronizeInput } from "@/components/useSynchroniseInput"
 

src/codec-components/EditCodec/Tree/CEnum.tsx

@@ -1,6 +1,6 @@
 import { Enum } from "@/components/Icons"
 import { isComplex } from "@/utils/shape"
-import { EditEnum, NOTIN } from "@codec-components"
+import { EditEnum, NOTIN } from "@polkadot-api/react-builder"
 import { useContext, useLayoutEffect, useState } from "react"
 import { Portal } from "react-portal"
 import { scrollToMarker } from "../../common/scroll"

src/codec-components/EditCodec/Tree/CStruct.tsx

@@ -1,6 +1,6 @@
 import { lookupToType, TypeIcon, TypeIcons } from "@/components/Icons"
 import { isComplex } from "@/utils/shape"
-import { EditStruct } from "@codec-components"
+import { EditStruct } from "@polkadot-api/react-builder"
 import { useStateObservable } from "@react-rxjs/core"
 import { FC, PropsWithChildren, useState } from "react"
 import { twMerge } from "tailwind-merge"

src/codec-components/EditCodec/Tree/ListComponents.tsx

@@ -6,7 +6,7 @@ import {
   EditSequence,
   EditTuple,
   NOTIN,
-} from "@codec-components"
+} from "@polkadot-api/react-builder"
 import { useStateObservable } from "@react-rxjs/core"
 import { GripVertical, Trash2 } from "lucide-react"
 import React, {

src/codec-components/EditCodec/Tree/codec-components.tsx

@@ -13,7 +13,7 @@ import {
   EditStr,
   EditVoid,
   NOTIN,
-} from "@codec-components"
+} from "@polkadot-api/react-builder"
 import { HexString } from "@polkadot-api/substrate-bindings"
 import { useStateObservable } from "@react-rxjs/core"
 import { Circle } from "lucide-react"

src/codec-components/EditCodec/Tree/index.ts

@@ -1,4 +1,4 @@
-import { getCodecComponent } from "@codec-components"
+import { getCodecComponent } from "@polkadot-api/react-builder"
 
 import * as treeComponents from "./components"
 

src/codec-components/EditCodec/codec-components.tsx

@@ -8,7 +8,7 @@ import {
   EditResult,
   EditVoid,
   NOTIN,
-} from "@codec-components"
+} from "@polkadot-api/react-builder"
 import { FC, ReactNode, useState } from "react"
 import { twMerge } from "tailwind-merge"
 import { ListItem } from "../common/ListItem"

src/codec-components/EditCodec/index.tsx

@@ -1,4 +1,4 @@
-import { getCodecComponent } from "@codec-components"
+import { getCodecComponent } from "@polkadot-api/react-builder"
 import * as editComponents from "./components"
 
 export const EditCodec = getCodecComponent(editComponents)

src/codec-components/LookupTypeEdit/BinaryDisplay.tsx

@@ -2,7 +2,7 @@ import { BinaryViewCodec } from "@/codec-components/BinaryViewCodec"
 import { BinaryEditButton } from "@/components/BinaryEditButton"
 import { CopyText } from "@/components/Copy"
 import { ExpandBtn } from "@/components/Expand"
-import { CodecComponentType, NOTIN } from "@codec-components"
+import { CodecComponentType, NOTIN } from "@polkadot-api/react-builder"
 import { Binary, HexString } from "@polkadot-api/substrate-bindings"
 import { toHex } from "@polkadot-api/utils"
 import { ComponentProps, FC, useState } from "react"

src/codec-components/LookupTypeEdit/LookupTypeEdit.tsx

@@ -1,6 +1,6 @@
 import { runtimeCtx$ } from "@/chain.state"
 import { byteArraysAreEqual } from "@/utils/byteArray"
-import { CodecComponentType, CodecComponentValue } from "@codec-components"
+import { CodecComponentType, CodecComponentValue } from "@polkadot-api/react-builder"
 import { state, useStateObservable } from "@react-rxjs/core"
 import { Codec } from "polkadot-api"
 import { ComponentProps, FC, useEffect, useRef, useState } from "react"

src/codec-components/ViewCodec/CAccountId.tsx

@@ -1,5 +1,5 @@
 import { AccountIdDisplay } from "@/components/AccountIdDisplay"
-import { ViewAccountId } from "@codec-components"
+import { ViewAccountId } from "@polkadot-api/react-builder"
 import { useReportBinary } from "./CopyBinary"
 
 export const CAccountId: ViewAccountId = ({ value, encodedValue }) => {

src/codec-components/ViewCodec/CBytes.tsx

@@ -1,5 +1,5 @@
 import { bytesToString } from "@/components/BinaryInput"
-import { ViewBytes } from "@codec-components"
+import { ViewBytes } from "@polkadot-api/react-builder"
 import { useReportBinary } from "./CopyBinary"
 
 export const CBytes: ViewBytes = ({ value, encodedValue }) => {

src/codec-components/ViewCodec/CEnum.tsx

@@ -1,4 +1,4 @@
-import { ViewEnum } from "@codec-components"
+import { ViewEnum } from "@polkadot-api/react-builder"
 import { useStateObservable } from "@react-rxjs/core"
 import { useContext, useState } from "react"
 import { Portal } from "react-portal"

src/codec-components/ViewCodec/CStruct.tsx

@@ -1,5 +1,5 @@
 import { ExpandBtn } from "@/components/Expand"
-import { ViewStruct } from "@codec-components"
+import { ViewStruct } from "@polkadot-api/react-builder"
 import { Var } from "@polkadot-api/metadata-builders"
 import { useStateObservable } from "@react-rxjs/core"
 import React, { useContext, useState } from "react"

src/codec-components/ViewCodec/ListComponents.tsx

@@ -1,4 +1,4 @@
-import { ViewArray, ViewSequence, ViewTuple } from "@codec-components"
+import { ViewArray, ViewSequence, ViewTuple } from "@polkadot-api/react-builder"
 import { useStateObservable } from "@react-rxjs/core"
 import { FC, PropsWithChildren, ReactNode } from "react"
 import { ListItem } from "../common/ListItem"

src/codec-components/ViewCodec/codec-components.tsx

@@ -7,7 +7,7 @@ import {
   ViewResult,
   ViewStr,
   ViewVoid,
-} from "@codec-components"
+} from "@polkadot-api/react-builder"
 
 export const CBool: ViewBool = ({ value }) => {
   return <div className="flex gap-4">{value ? "Yes" : "No"}</div>

src/codec-components/ViewCodec/index.tsx

@@ -1,4 +1,4 @@
-import { getCodecComponent } from "@codec-components"
+import { getCodecComponent } from "@polkadot-api/react-builder"
 import * as viewComponents from "./components"
 
 export const ViewCodec = getCodecComponent(viewComponents)

src/components/BinaryEditButton.tsx

@@ -4,7 +4,7 @@ import {
 } from "@/components/BinaryInput"
 import { Modal } from "@/components/Modal"
 import { useGenericSynchronizeInput } from "@/components/useSynchroniseInput"
-import { NOTIN } from "@codec-components"
+import { NOTIN } from "@polkadot-api/react-builder"
 import { Binary } from "@polkadot-api/substrate-bindings"
 import { Download, FileUp } from "lucide-react"
 import { ComponentProps, FC, useMemo, useState } from "react"

src/components/BinaryInput.tsx

@@ -1,5 +1,5 @@
 import { byteArraysAreEqual } from "@/utils/byteArray"
-import { NOTIN } from "@codec-components"
+import { NOTIN } from "@polkadot-api/react-builder"
 import { Binary } from "@polkadot-api/substrate-bindings"
 import { FileUp } from "lucide-react"
 import { FC, useState } from "react"

src/components/useSynchroniseInput.ts

@@ -1,4 +1,4 @@
-import { NOTIN } from "@codec-components"
+import { NOTIN } from "@polkadot-api/react-builder"
 import { useEffect, useLayoutEffect, useRef, useState } from "react"
 
 export const useGenericSynchronizeInput = <T extends unknown, R>(

src/lib/codecComponents/get-codec-component.tsx

@@ -1,965 +0,0 @@
-/* eslint-disable react-hooks/rules-of-hooks */
-import {
-  V15,
-  V14,
-  HexString,
-  Encoder,
-  Bytes,
-} from "@polkadot-api/substrate-bindings"
-import * as scale from "@polkadot-api/substrate-bindings"
-import {
-  getDynamicBuilder,
-  getLookupFn,
-  LookupEntry,
-  MetadataLookup,
-  Var,
-} from "@polkadot-api/metadata-builders"
-import React, { FC, useRef } from "react"
-import { fromHex, mapObject, mergeUint8 } from "@polkadot-api/utils"
-import type {
-  EditAccountId,
-  EditBigNumber,
-  EditBool,
-  EditComponents,
-  EditEthAccount,
-  EditNumber,
-  EditStr,
-  ViewAccountId,
-  ViewBigNumber,
-  ViewBool,
-  ViewComponents,
-  ViewEthAccount,
-  ViewNumber,
-  ViewStr,
-} from "./types"
-import { NOTIN } from "./types"
-
-export type MetadataType = V14 | V15
-
-export const enum CodecComponentType {
-  Initial,
-  Updated,
-}
-
-export type CodecComponentUpdate =
-  | { empty: true }
-  | { empty: false; decoded: any; encoded?: Uint8Array }
-export type CodecComponentValue =
-  | { type: CodecComponentType.Initial; value?: Uint8Array | HexString }
-  | { type: CodecComponentType.Updated; value: CodecComponentUpdate }
-
-export type LookupType = Var["type"]
-
-const detectNotin: <T>(x: T) => boolean = (x) => {
-  if (x === NOTIN) return true
-  return x != null && typeof x === "object"
-    ? Object.values(x).some(detectNotin)
-    : false
-}
-
-const withNotin: <T>(
-  encoder: Encoder<T>,
-) => (input: T) => Uint8Array | undefined = (encoder) => (input) =>
-  detectNotin(input) ? undefined : encoder(input)
-
-const getInnerEnumCodec = (
-  input: scale.Codec<{ type: string; value: any }>,
-  idx: number,
-  type: string,
-) => {
-  return scale.createCodec(
-    (value: any) => input.enc({ type, value }).slice(1),
-    (value) => {
-      const val: Uint8Array =
-        value instanceof Uint8Array
-          ? value
-          : typeof value === "string"
-            ? fromHex(value)
-            : new Uint8Array(value)
-      return input.dec(mergeUint8(new Uint8Array([idx]), val)).value
-    },
-  )
-}
-
-export function getViewCodecComponent(
-  baseComponents: ViewComponents,
-): React.FC<{
-  metadata: MetadataType
-  codecType: number
-  value: Uint8Array | HexString
-}> {
-  const {
-    CVoid,
-    CAccountId,
-    CBigNumber,
-    CNumber,
-    CBool,
-    CStr,
-    CBytes,
-    CEthAccount,
-    CEnum,
-    CSequence,
-    CArray,
-    CTuple,
-    CStruct,
-    COption,
-    CResult,
-  } = baseComponents as ViewComponents
-
-  const CodecComponent: React.FC<{
-    path: string[]
-    dynCodecs: ReturnType<typeof getDynamicBuilder>["buildDefinition"]
-    entry: LookupEntry
-    parent?: { id: number; variantIdx: number; variantTag: string }
-    value:
-      | {
-          empty: true
-        }
-      | { empty: false; decoded: any; encoded?: Uint8Array }
-  }> = ({ entry, value, dynCodecs, parent, path }) => {
-    if (value.empty) return <></>
-
-    const codec =
-      "id" in entry
-        ? dynCodecs(entry.id)
-        : getInnerEnumCodec(
-            dynCodecs(parent!.id),
-            parent!.variantIdx,
-            parent!.variantTag,
-          )
-
-    const encodedValue = value.encoded || codec.enc(value.decoded)
-    const valueProps = { value: value.decoded, encodedValue: encodedValue }
-
-    if (entry.type === "struct") {
-      const latestValue = value.decoded
-      return (
-        <CStruct
-          {...valueProps}
-          shape={entry}
-          path={path}
-          innerComponents={mapObject(entry.value, (entry, key) => (
-            <CodecComponent
-              path={path.concat(key as string)}
-              dynCodecs={dynCodecs}
-              entry={entry}
-              value={
-                latestValue[key] === NOTIN
-                  ? { empty: true }
-                  : {
-                      empty: false,
-                      decoded: latestValue[key],
-                    }
-              }
-            />
-          ))}
-        />
-      )
-    }
-
-    if (entry.type === "tuple") {
-      return (
-        <CTuple
-          {...{
-            ...valueProps,
-            shape: entry,
-            path,
-            innerComponents: entry.value.map((entry, idx) => (
-              <CodecComponent
-                path={path.concat(idx.toString())}
-                dynCodecs={dynCodecs}
-                entry={entry}
-                value={
-                  value.empty
-                    ? value
-                    : value.decoded[idx] === NOTIN
-                      ? { empty: true }
-                      : {
-                          empty: false,
-                          decoded: value.decoded[idx],
-                        }
-                }
-              />
-            )),
-          }}
-        />
-      )
-    }
-
-    if (entry.type === "enum") {
-      let innerEntry
-      if (!value.empty) {
-        innerEntry = entry.value[value.decoded.type as string]
-        if (innerEntry?.type === "lookupEntry")
-          innerEntry = innerEntry.value as any
-        if (!innerEntry) return null
-      }
-      return (
-        <CEnum
-          {...{
-            ...valueProps,
-            path,
-            tags: Object.entries(entry.value).map(([tag, { idx }]) => ({
-              tag,
-              idx,
-            })),
-            shape: entry,
-            inner: value.empty ? null : (
-              <CodecComponent
-                path={path.concat(value.decoded.type)}
-                dynCodecs={dynCodecs}
-                entry={innerEntry}
-                parent={{
-                  id: entry.id,
-                  variantTag: value.decoded.type,
-                  variantIdx:
-                    entry.value[value.decoded.type as keyof typeof entry.value]
-                      .idx,
-                }}
-                value={
-                  value.decoded.value === NOTIN
-                    ? { empty: true }
-                    : {
-                        empty: false,
-                        decoded: value.decoded.value,
-                        encoded:
-                          (valueProps as any).encodedValue &&
-                          (valueProps as any).encodedValue.slice(1),
-                      }
-                }
-              />
-            ),
-          }}
-        />
-      )
-    }
-
-    if (entry.type === "result") {
-      return (
-        <CResult
-          {...{
-            ...valueProps,
-            path,
-            shape: entry,
-            inner: value.empty ? null : (
-              <CodecComponent
-                path={path.concat(
-                  `Result(${value.decoded.success ? "Success" : "Failure"})`,
-                )}
-                dynCodecs={dynCodecs}
-                entry={entry.value[value.decoded.success ? "ok" : "ko"]}
-                value={
-                  value.decoded.value === NOTIN
-                    ? { empty: true }
-                    : {
-                        empty: false,
-                        decoded: value.decoded.value,
-                      }
-                }
-              />
-            ),
-          }}
-        />
-      )
-    }
-
-    if (entry.type === "option") {
-      return (
-        <COption
-          {...{
-            ...valueProps,
-            path,
-            shape: entry,
-            inner:
-              !value.empty && value.decoded === undefined ? (
-                <CVoid />
-              ) : (
-                <CodecComponent
-                  path={path.concat(
-                    `Option(${value.empty ? "Void" : value.decoded === NOTIN ? "" : "Value"})`,
-                  )}
-                  dynCodecs={dynCodecs}
-                  entry={entry.value}
-                  value={
-                    value.empty || value.decoded === NOTIN
-                      ? { empty: true }
-                      : {
-                          empty: false,
-                          decoded: value.decoded,
-                        }
-                  }
-                />
-              ),
-          }}
-        />
-      )
-    }
-
-    if (entry.type === "void") return <CVoid />
-
-    if (entry.type === "array") {
-      if (entry.value.type === "primitive" && entry.value.value === "u8") {
-        return <CBytes len={entry.len} path={path} {...(valueProps as any)} />
-      }
-
-      const latestValue = value.empty
-        ? Array(entry.len).fill(NOTIN)
-        : (value.decoded as Array<any>)
-      return (
-        <CArray
-          {...{
-            ...valueProps,
-            path,
-            shape: entry,
-            innerComponents: latestValue.map((decoded, idx) => (
-              <CodecComponent
-                dynCodecs={dynCodecs}
-                entry={entry.value}
-                path={path.concat(idx.toString())}
-                value={
-                  decoded === NOTIN
-                    ? { empty: true }
-                    : { empty: false, decoded }
-                }
-              />
-            )),
-          }}
-        />
-      )
-    }
-
-    if (entry.type === "sequence") {
-      if (entry.value.type === "primitive" && entry.value.value === "u8") {
-        return <CBytes {...(valueProps as any)} path={path} />
-      }
-
-      const latestValue = value.empty ? [] : (value.decoded as Array<any>)
-      return (
-        <CSequence
-          {...{
-            ...valueProps,
-            path,
-            shape: entry,
-            innerComponents: latestValue.map((decoded, idx) => (
-              <CodecComponent
-                path={path.concat(idx.toString())}
-                dynCodecs={dynCodecs}
-                entry={entry.value}
-                value={
-                  decoded === NOTIN
-                    ? { empty: true }
-                    : { empty: false, decoded }
-                }
-              />
-            )),
-          }}
-        />
-      )
-    }
-
-    let type: any = undefined
-    let ResultComponent:
-      | ViewBigNumber
-      | ViewNumber
-      | ViewBool
-      | ViewStr
-      | ViewAccountId
-      | ViewEthAccount = null as any
-
-    switch (entry.type) {
-      case "compact": {
-        ResultComponent = entry.isBig ? CBigNumber : CNumber
-        type = entry.size
-        break
-      }
-      case "primitive": {
-        if (entry.value === "str" || entry.value === "char")
-          ResultComponent = CStr
-        else if (entry.value === "bool") ResultComponent = CBool
-        else {
-          const nBits = Number(entry.value.slice(1))
-          ResultComponent = nBits < 64 ? CNumber : CBigNumber
-          type = entry.value
-        }
-        break
-      }
-      case "bitSequence": {
-        return null
-      }
-      case "AccountId32": {
-        ResultComponent = CAccountId
-        break
-      }
-      case "AccountId20": {
-        ResultComponent = CEthAccount
-        break
-      }
-    }
-
-    const Result = ResultComponent as FC<any>
-    return <Result {...valueProps} path={path} numType={type} />
-  }
-
-  const result: FC<{
-    metadata: V14 | V15
-    codecType: number
-    value: Uint8Array | HexString
-  }> = ({ metadata, codecType, value: propsValue }) => {
-    const lookupRef = useRef<{
-      metadata: V14 | V15
-      lookup: MetadataLookup
-      dynCodecs: ReturnType<typeof getDynamicBuilder>["buildDefinition"]
-      refresh: (
-        codecType: number,
-        value: Uint8Array | HexString,
-      ) => { empty: true } | { empty: false; decoded: any; encoded: Uint8Array }
-    }>({
-      metadata: null as any,
-      lookup: null as any,
-      dynCodecs: null as any,
-      refresh: () => ({ empty: true }),
-    })
-
-    if (lookupRef.current.metadata !== metadata) {
-      const lookup = getLookupFn(metadata)
-      lookupRef.current = {
-        metadata,
-        lookup,
-        dynCodecs: getDynamicBuilder(lookup).buildDefinition,
-        refresh: (codecType, val) => {
-          try {
-            const decoded = lookupRef.current.dynCodecs(codecType).dec(val)
-            return {
-              empty: false,
-              decoded,
-              encoded: typeof val === "string" ? fromHex(val) : val,
-            }
-          } catch (_error) {
-            console.error("invalid hex for the codec")
-            return { empty: true }
-          }
-        },
-      }
-    }
-
-    const value = lookupRef.current.refresh(codecType, propsValue)
-
-    return (
-      <CodecComponent
-        path={[]}
-        {...{
-          dynCodecs: lookupRef.current.dynCodecs,
-          entry: lookupRef.current.lookup(codecType),
-          value: value,
-        }}
-      />
-    )
-  }
-
-  return result as any
-}
-
-export function getCodecComponent(baseComponent: ViewComponents): React.FC<{
-  metadata: V14 | V15
-  codecType: number
-  value: CodecComponentValue
-}>
-export function getCodecComponent(baseComponent: EditComponents): React.FC<{
-  metadata: V14 | V15
-  codecType: number
-  value: CodecComponentValue
-  onUpdate?: (newValue: CodecComponentUpdate) => void
-}>
-export function getCodecComponent(
-  _baseComponents: EditComponents | ViewComponents,
-) {
-  const {
-    CVoid,
-    CAccountId,
-    CBigNumber,
-    CNumber,
-    CBool,
-    CStr,
-    CBytes,
-    CEthAccount,
-    CEnum,
-    CSequence,
-    CArray,
-    CTuple,
-    CStruct,
-    COption,
-    CResult,
-  } = _baseComponents as EditComponents
-  const CodecComponent: React.FC<{
-    path: string[]
-    dynCodecs: ReturnType<typeof getDynamicBuilder>["buildDefinition"]
-    entry: LookupEntry
-    parent?: { id: number; variantIdx: number; variantTag: string }
-    value:
-      | {
-          empty: true
-        }
-      | { empty: false; decoded: any; encoded?: Uint8Array }
-    onChange: (value: any) => boolean
-  }> = ({ entry, value, dynCodecs, onChange, parent, path }) => {
-    const codec =
-      "id" in entry
-        ? dynCodecs(entry.id)
-        : getInnerEnumCodec(
-            dynCodecs(parent!.id),
-            parent!.variantIdx,
-            parent!.variantTag,
-          )
-
-    const createDecode = (decoder: scale.Decoder<any>) =>
-      scale.createDecoder((bytes) => {
-        try {
-          const result = decoder(bytes)
-          return bytes.length === (bytes as Uint8Array & { i: number }).i
-            ? result
-            : NOTIN
-        } catch {
-          return NOTIN
-        }
-      })
-    const decode = createDecode(codec.dec)
-
-    let valueProps:
-      | { type: "blank"; value: NOTIN; encodedValue: undefined }
-      | { type: "partial"; value: any; encodedValue: undefined }
-      | { type: "complete"; value: any; encodedValue: Uint8Array } = {
-      type: "blank" as const,
-      value: NOTIN,
-      encodedValue: undefined,
-    }
-    if (!value.empty) {
-      const encodedValue = value.encoded || withNotin(codec.enc)(value.decoded)
-      valueProps = encodedValue
-        ? { type: "complete", value: value.decoded, encodedValue }
-        : { type: "partial", value: value.decoded, encodedValue: undefined }
-    }
-
-    if (entry.type === "struct") {
-      const latestValue = value.empty
-        ? mapObject(entry.value, () => NOTIN)
-        : value.decoded
-      return (
-        <CStruct
-          {...valueProps}
-          decode={decode}
-          shape={entry}
-          onValueChanged={onChange}
-          path={path}
-          innerComponents={mapObject(entry.value, (entry, key) => (
-            <CodecComponent
-              path={path.concat(key as string)}
-              dynCodecs={dynCodecs}
-              entry={entry}
-              onChange={(x) => {
-                const value = { ...latestValue }
-                value[key] = x
-                return onChange(value)
-              }}
-              value={
-                latestValue[key] === NOTIN
-                  ? { empty: true }
-                  : {
-                      empty: false,
-                      decoded: latestValue[key],
-                    }
-              }
-            />
-          ))}
-        />
-      )
-    }
-
-    if (entry.type === "tuple") {
-      const latestValue = value.empty
-        ? entry.value.map(() => NOTIN)
-        : value.decoded
-      return (
-        <CTuple
-          {...{
-            ...valueProps,
-            shape: entry,
-            onValueChanged: onChange,
-            decode,
-            path,
-            innerComponents: entry.value.map((entry, idx) => (
-              <CodecComponent
-                path={path.concat(idx.toString())}
-                dynCodecs={dynCodecs}
-                entry={entry}
-                onChange={(x) => {
-                  const value = [...latestValue]
-                  value[idx] = x
-                  return onChange(value)
-                }}
-                value={
-                  value.empty
-                    ? value
-                    : value.decoded[idx] === NOTIN
-                      ? { empty: true }
-                      : {
-                          empty: false,
-                          decoded: value.decoded[idx],
-                        }
-                }
-              />
-            )),
-          }}
-        />
-      )
-    }
-
-    if (entry.type === "enum") {
-      let innerEntry
-      if (!value.empty) {
-        innerEntry = entry.value[value.decoded.type as string]
-        if (innerEntry?.type === "lookupEntry")
-          innerEntry = innerEntry.value as any
-        if (!innerEntry) {
-          valueProps = { type: "blank", value: NOTIN, encodedValue: undefined }
-          value = { empty: true }
-        }
-      }
-      return (
-        <CEnum
-          {...{
-            ...valueProps,
-            decode,
-            onValueChanged: onChange,
-            path,
-            tags: Object.entries(entry.value).map(([tag, { idx }]) => ({
-              tag,
-              idx,
-            })),
-            shape: entry,
-            inner: value.empty ? null : (
-              <CodecComponent
-                path={path.concat(value.decoded.type)}
-                dynCodecs={dynCodecs}
-                entry={innerEntry}
-                onChange={(x) =>
-                  onChange({ type: value.decoded.type, value: x })
-                }
-                parent={{
-                  id: entry.id,
-                  variantTag: value.decoded.type,
-                  variantIdx:
-                    entry.value[value.decoded.type as keyof typeof entry.value]
-                      .idx,
-                }}
-                value={
-                  value.decoded.value === NOTIN
-                    ? { empty: true }
-                    : {
-                        empty: false,
-                        decoded: value.decoded.value,
-                        encoded:
-                          (valueProps as any).encodedValue &&
-                          (valueProps as any).encodedValue.slice(1),
-                      }
-                }
-              />
-            ),
-          }}
-        />
-      )
-    }
-
-    if (entry.type === "result") {
-      return (
-        <CResult
-          {...{
-            ...valueProps,
-            onValueChanged: onChange,
-            path,
-            decode,
-            shape: entry,
-            inner: value.empty ? null : (
-              <CodecComponent
-                path={path.concat(
-                  `Result(${value.decoded.success ? "Success" : "Failure"})`,
-                )}
-                onChange={(x) =>
-                  onChange({ success: value.decoded.success, value: x })
-                }
-                dynCodecs={dynCodecs}
-                entry={entry.value[value.decoded.success ? "ok" : "ko"]}
-                value={
-                  value.decoded.value === NOTIN
-                    ? { empty: true }
-                    : { empty: false, decoded: value.decoded.value }
-                }
-              />
-            ),
-          }}
-        />
-      )
-    }
-
-    if (entry.type === "option") {
-      return (
-        <COption
-          {...{
-            ...valueProps,
-            path,
-            shape: entry,
-            onValueChanged: onChange,
-            decode,
-            inner:
-              !value.empty && value.decoded === undefined ? (
-                <CVoid />
-              ) : (
-                <CodecComponent
-                  path={path.concat(
-                    `Option(${value.empty ? "Void" : value.decoded === NOTIN ? "" : "Value"})`,
-                  )}
-                  dynCodecs={dynCodecs}
-                  entry={entry.value}
-                  onChange={onChange}
-                  value={
-                    value.empty || value.decoded === NOTIN
-                      ? { empty: true }
-                      : { empty: false, decoded: value.decoded }
-                  }
-                />
-              ),
-          }}
-        />
-      )
-    }
-
-    if (entry.type === "void") return <CVoid />
-
-    if (entry.type === "array") {
-      if (entry.value.type === "primitive" && entry.value.value === "u8") {
-        const decoder = Bytes(entry.len)[1]
-        return (
-          <CBytes
-            decode={scale.createDecoder(decoder)}
-            onValueChanged={onChange}
-            len={entry.len}
-            path={path}
-            {...(valueProps as any)}
-          />
-        )
-      }
-
-      const latestValue = value.empty
-        ? Array(entry.len).fill(NOTIN)
-        : (value.decoded as Array<any>)
-      return (
-        <CArray
-          {...{
-            ...valueProps,
-            path,
-            shape: entry,
-            decode,
-            onValueChanged: onChange,
-            innerComponents: latestValue.map((decoded, idx) => (
-              <CodecComponent
-                dynCodecs={dynCodecs}
-                entry={entry.value}
-                path={path.concat(idx.toString())}
-                onChange={(x) => {
-                  const value = [...latestValue]
-                  value[idx] = x
-                  return onChange(value)
-                }}
-                value={
-                  decoded === NOTIN
-                    ? { empty: true }
-                    : { empty: false, decoded }
-                }
-              />
-            )),
-          }}
-        />
-      )
-    }
-
-    if (entry.type === "sequence") {
-      if (entry.value.type === "primitive" && entry.value.value === "u8") {
-        const decoder = Bytes()[1]
-        return (
-          <CBytes
-            {...(valueProps as any)}
-            path={path}
-            decode={createDecode(decoder)}
-            onValueChanged={onChange}
-          />
-        )
-      }
-
-      const latestValue = value.empty ? [] : (value.decoded as Array<any>)
-      return (
-        <CSequence
-          {...{
-            ...valueProps,
-            path,
-            shape: entry,
-            onValueChanged: onChange,
-            decode,
-            innerComponents: latestValue.map((decoded, idx) => (
-              <CodecComponent
-                path={path.concat(idx.toString())}
-                dynCodecs={dynCodecs}
-                entry={entry.value}
-                onChange={(x) => {
-                  const value = [...latestValue]
-                  value[idx] = x
-                  return onChange(value)
-                }}
-                value={
-                  decoded === NOTIN
-                    ? { empty: true }
-                    : { empty: false, decoded }
-                }
-              />
-            )),
-          }}
-        />
-      )
-    }
-
-    let type: any = undefined
-    let ResultComponent:
-      | EditBigNumber
-      | EditNumber
-      | EditBool
-      | EditStr
-      | EditAccountId
-      | EditEthAccount = null as any
-
-    switch (entry.type) {
-      case "compact": {
-        ResultComponent = entry.isBig ? CBigNumber : CNumber
-        type = entry.size
-        break
-      }
-      case "primitive": {
-        if (entry.value === "str" || entry.value === "char")
-          ResultComponent = CStr
-        else if (entry.value === "bool") ResultComponent = CBool
-        else {
-          const nBits = Number(entry.value.slice(1))
-          ResultComponent = nBits < 64 ? CNumber : CBigNumber
-          type = entry.value
-        }
-        break
-      }
-      case "bitSequence": {
-        return null
-      }
-      case "AccountId32": {
-        ResultComponent = CAccountId
-        break
-      }
-      case "AccountId20": {
-        ResultComponent = CEthAccount
-        break
-      }
-    }
-
-    const Result = ResultComponent as FC<any>
-    return (
-      <Result
-        {...valueProps}
-        path={path}
-        decode={decode}
-        onValueChanged={onChange}
-        numType={type}
-      />
-    )
-  }
-
-  const result: FC<{
-    metadata: V14 | V15
-    codecType: number
-    value: CodecComponentValue
-    onUpdate: (newValue: CodecComponentUpdate) => void
-  }> = ({ metadata, codecType, value: propsValue, onUpdate }) => {
-    const lookupRef = useRef<{
-      metadata: V14 | V15
-      lookup: MetadataLookup
-      dynCodecs: ReturnType<typeof getDynamicBuilder>["buildDefinition"]
-      refresh: (
-        codecType: number,
-        value?: Uint8Array | HexString,
-      ) =>
-        | { empty: true }
-        | { empty: false; decoded: any; encoded?: Uint8Array }
-    }>({
-      metadata: null as any,
-      lookup: null as any,
-      dynCodecs: null as any,
-      refresh: () => ({ empty: true }),
-    })
-
-    if (lookupRef.current.metadata !== metadata) {
-      const lookup = getLookupFn(metadata)
-      lookupRef.current = {
-        metadata,
-        lookup,
-        dynCodecs: getDynamicBuilder(lookup).buildDefinition,
-        refresh: (codecType, val) => {
-          try {
-            return val
-              ? {
-                  empty: false,
-                  decoded: lookupRef.current.dynCodecs(codecType).dec(val),
-                  encoded: typeof val === "string" ? fromHex(val) : val,
-                }
-              : { empty: true }
-          } catch (_error) {
-            console.error("invalid hex for the codec")
-            return { empty: true }
-          }
-        },
-      }
-    }
-
-    const value =
-      propsValue.type === CodecComponentType.Initial
-        ? lookupRef.current.refresh(
-            codecType,
-            propsValue.value as CodecComponentInitial,
-          )
-        : propsValue.value
-
-    return (
-      <CodecComponent
-        path={[]}
-        onChange={(x) => {
-          if (x === NOTIN) {
-            onUpdate({ empty: true })
-            return true
-          }
-
-          let encoded = undefined
-          const hasNotin = detectNotin(x)
-          if (!hasNotin) {
-            try {
-              encoded = lookupRef.current.dynCodecs(codecType).enc(x)
-            } catch (_e) {
-              console.warn("Error encoding", x)
-              return false
-            }
-          }
-          onUpdate({ empty: false, decoded: x, encoded })
-          return true
-        }}
-        {...{
-          dynCodecs: lookupRef.current.dynCodecs,
-          entry: lookupRef.current.lookup(codecType),
-          value: value,
-        }}
-      />
-    )
-  }
-
-  return result as any
-}

src/lib/codecComponents/index.ts

@@ -1,2 +0,0 @@
-export * from "./types"
-export * from "./get-codec-component"

src/lib/codecComponents/types/edit-component-types.ts

@@ -1,144 +0,0 @@
-import type {
-  ArrayVar,
-  EnumVar,
-  OptionVar,
-  ResultVar,
-  SequenceVar,
-  StructVar,
-  TupleVar,
-} from "@polkadot-api/metadata-builders"
-import type {
-  Binary,
-  HexString,
-  SS58String,
-} from "@polkadot-api/substrate-bindings"
-import type { ReactNode, FC } from "react"
-
-export const NOTIN = Symbol("Notin")
-export type NOTIN = typeof NOTIN
-
-export type EditComplexCodecComponentProps<T> = (
-  | { type: "blank"; value: NOTIN; encodedValue: undefined }
-  | { type: "partial"; value: T; encodedValue: undefined }
-  | { type: "complete"; value: T; encodedValue: Uint8Array }
-) & {
-  path: string[]
-  onValueChanged: (newValue: T | NOTIN) => boolean
-  decode: (value: Uint8Array | HexString) => T | NOTIN
-}
-
-export type EditPrimitiveComponentProps<T = any> = (
-  | { type: "blank"; value: NOTIN; encodedValue: undefined }
-  | { type: "complete"; value: T; encodedValue: Uint8Array }
-) & {
-  path: string[]
-  onValueChanged: (newValue: T | NOTIN) => boolean
-  decode: (value: Uint8Array | HexString) => T | NOTIN
-}
-
-export type EditVoidInterface = {}
-export type EditVoid = FC<EditVoidInterface>
-
-export type EditAccountIdInterface = EditPrimitiveComponentProps<SS58String>
-export type EditAccountId = FC<EditAccountIdInterface>
-
-export type EditBigNumberInterface = EditPrimitiveComponentProps<bigint> & {
-  numType: "u64" | "u128" | "u256" | "i64" | "i128" | "i256"
-}
-export type EditBigNumber = FC<EditBigNumberInterface>
-
-export type EditNumberInterface = EditPrimitiveComponentProps<number> & {
-  numType: "u8" | "u16" | "u32" | "i8" | "i16" | "i32"
-}
-export type EditNumber = FC<EditNumberInterface>
-
-export type EditBoolInterface = EditPrimitiveComponentProps<boolean>
-export type EditBool = FC<EditBoolInterface>
-
-export type EditStrInterface = EditPrimitiveComponentProps<string>
-export type EditStr = FC<EditStrInterface>
-
-export type EditBytesInterface = EditPrimitiveComponentProps<Binary> & {
-  len?: number
-}
-export type EditBytes = FC<EditBytesInterface>
-
-export type EditEthAccountInterface = EditPrimitiveComponentProps<HexString>
-export type EditEthAccount = FC<EditEthAccountInterface>
-
-export type EditEnumInterface = EditComplexCodecComponentProps<{
-  type: string
-  value: any
-}> & {
-  tags: Array<{ idx: number; tag: string }>
-  inner: ReactNode
-  shape: EnumVar
-}
-export type EditEnum = FC<EditEnumInterface>
-
-export type EditSequenceInterface<T = any> = EditComplexCodecComponentProps<
-  Array<T>
-> & {
-  innerComponents: Array<ReactNode>
-  shape: SequenceVar
-}
-export type EditSequence = FC<EditSequenceInterface>
-
-export type EditArrayInterface<T = any> = EditComplexCodecComponentProps<
-  Array<T>
-> & {
-  innerComponents: Array<ReactNode>
-  shape: ArrayVar
-}
-export type EditArray = FC<EditArrayInterface>
-
-export type EditTupleInterface<T = any> = EditComplexCodecComponentProps<
-  Array<T>
-> & {
-  innerComponents: Array<ReactNode>
-  shape: TupleVar
-}
-export type EditTuple = FC<EditTupleInterface>
-
-export type EditStructInterface = EditComplexCodecComponentProps<
-  Record<string, any>
-> & {
-  innerComponents: Record<string, ReactNode>
-  shape: StructVar
-}
-export type EditStruct = FC<EditStructInterface>
-
-export type EditOptionInterface<T = any> = EditComplexCodecComponentProps<
-  T | undefined
-> & {
-  inner: ReactNode
-  shape: OptionVar
-}
-export type EditOption = FC<EditOptionInterface>
-
-export type EditResultInterface = EditComplexCodecComponentProps<{
-  success: boolean
-  value: any
-}> & {
-  shape: ResultVar
-  inner: ReactNode
-}
-export type EditResult = FC<EditResultInterface>
-
-export interface EditComponents {
-  CVoid: EditVoid
-  CAccountId: EditAccountId
-  CBigNumber: EditBigNumber
-  CNumber: EditNumber
-  CBool: EditBool
-  CStr: EditStr
-  CBytes: EditBytes
-  CEthAccount: EditEthAccount
-  CEnum: EditEnum
-  CSequence: EditSequence
-  CArray: EditArray
-  CTuple: EditTuple
-  CStruct: EditStruct
-  COption: EditOption
-  CResult: EditResult
-}

src/lib/codecComponents/types/index.ts

@@ -1,2 +0,0 @@
-export * from "./edit-component-types"
-export * from "./view-component-types"

src/lib/codecComponents/types/view-component-types.ts

@@ -1,126 +0,0 @@
-import type {
-  ArrayVar,
-  EnumVar,
-  OptionVar,
-  ResultVar,
-  SequenceVar,
-  StructVar,
-  TupleVar,
-} from "@polkadot-api/metadata-builders"
-import type {
-  Binary,
-  HexString,
-  SS58String,
-} from "@polkadot-api/substrate-bindings"
-import type { ReactNode, FC } from "react"
-
-export type ViewCodecComponentProps<T = any> = {
-  value: T
-  encodedValue: Uint8Array
-  path: string[]
-}
-
-export type ViewPrimitiveComponentProps<T = any> = ViewCodecComponentProps<T>
-
-export type ViewVoidInterface = {}
-export type ViewVoid = FC<ViewVoidInterface>
-
-export type ViewAccountIdInterface = ViewPrimitiveComponentProps<SS58String>
-export type ViewAccountId = FC<ViewAccountIdInterface>
-
-export type ViewBigNumberInterface = ViewPrimitiveComponentProps<bigint> & {
-  numType: "u64" | "u128" | "u256" | "i64" | "i128" | "i256"
-}
-export type ViewBigNumber = FC<ViewBigNumberInterface>
-
-export type ViewNumberInterface = ViewPrimitiveComponentProps<number> & {
-  numType: "u8" | "u16" | "u32" | "i8" | "i16" | "i32"
-}
-export type ViewNumber = FC<ViewNumberInterface>
-
-export type ViewBoolInterface = ViewPrimitiveComponentProps<boolean>
-export type ViewBool = FC<ViewBoolInterface>
-
-export type ViewStrInterface = ViewPrimitiveComponentProps<string>
-export type ViewStr = FC<ViewStrInterface>
-
-export type ViewBytesInterface = ViewPrimitiveComponentProps<Binary> & {
-  len?: number
-}
-export type ViewBytes = FC<ViewBytesInterface>
-
-export type ViewEthAccountInterface = ViewPrimitiveComponentProps<HexString>
-export type ViewEthAccount = FC<ViewEthAccountInterface>
-
-export type ViewEnumInterface = ViewCodecComponentProps<{
-  type: string
-  value: any
-}> & {
-  tags: Array<{ idx: number; tag: string }>
-  inner: ReactNode
-  shape: EnumVar
-}
-export type ViewEnum = FC<ViewEnumInterface>
-
-export type ViewSequenceInterface<T = any> = ViewCodecComponentProps<
-  Array<T>
-> & {
-  innerComponents: Array<ReactNode>
-  shape: SequenceVar
-}
-export type ViewSequence = FC<ViewSequenceInterface>
-
-export type ViewArrayInterface<T = any> = ViewCodecComponentProps<Array<T>> & {
-  innerComponents: Array<ReactNode>
-  shape: ArrayVar
-}
-export type ViewArray = FC<ViewArrayInterface>
-
-export type ViewTupleInterface<T = any> = ViewCodecComponentProps<Array<T>> & {
-  innerComponents: Array<ReactNode>
-  shape: TupleVar
-}
-export type ViewTuple = FC<ViewTupleInterface>
-
-export type ViewStructInterface = ViewCodecComponentProps<
-  Record<string, any>
-> & {
-  innerComponents: Record<string, ReactNode>
-  shape: StructVar
-}
-export type ViewStruct = FC<ViewStructInterface>
-
-export type ViewOptionInterface<T = any> = ViewCodecComponentProps<
-  T | undefined
-> & {
-  inner: ReactNode
-  shape: OptionVar
-}
-export type ViewOption = FC<ViewOptionInterface>
-
-export type ViewResultInterface = ViewCodecComponentProps<{
-  success: boolean
-  value: any
-}> & {
-  shape: ResultVar
-  inner: ReactNode
-}
-export type ViewResult = FC<ViewResultInterface>
-
-export interface ViewComponents {
-  CVoid: ViewVoid
-  CAccountId: ViewAccountId
-  CBigNumber: ViewBigNumber
-  CNumber: ViewNumber
-  CBool: ViewBool
-  CStr: ViewStr
-  CBytes: ViewBytes
-  CEthAccount: ViewEthAccount
-  CEnum: ViewEnum
-  CSequence: ViewSequence
-  CArray: ViewArray
-  CTuple: ViewTuple
-  CStruct: ViewStruct
-  COption: ViewOption
-  CResult: ViewResult
-}

src/pages/Constants.tsx

@@ -6,7 +6,7 @@ import { ExpandBtn } from "@/components/Expand"
 import { LoadingMetadata } from "@/components/Loading"
 import { Tooltip } from "@/components/Tooltip"
 import { withSubscribe } from "@/components/withSuspense"
-import { CodecComponentType } from "@/lib/codecComponents"
+import { CodecComponentType } from "@polkadot-api/react-builder"
 import { getTypeComplexity } from "@/utils/shape"
 import { state, useStateObservable } from "@react-rxjs/core"
 import { Dot } from "lucide-react"

src/pages/Extrinsics/EditMode.tsx

@@ -12,7 +12,7 @@ import {
   CodecComponentUpdate,
   CodecComponentValue,
   MetadataType,
-} from "@codec-components"
+} from "@polkadot-api/react-builder"
 import { useEffect, useRef, useState } from "react"
 
 export const EditMode: React.FC<{

src/pages/Extrinsics/Extrinsics.tsx

@@ -3,7 +3,7 @@ import { BinaryDisplay } from "@/codec-components/LookupTypeEdit"
 import { ButtonGroup } from "@/components/ButtonGroup"
 import { LoadingMetadata } from "@/components/Loading"
 import { withSubscribe } from "@/components/withSuspense"
-import { CodecComponentType, CodecComponentValue } from "@codec-components"
+import { CodecComponentType, CodecComponentValue } from "@polkadot-api/react-builder"
 import { Binary } from "@polkadot-api/substrate-bindings"
 import { state, useStateObservable } from "@react-rxjs/core"
 import { useState } from "react"

src/pages/Storage/StorageDecode.tsx

@@ -1,6 +1,6 @@
 import { dynamicBuilder$ } from "@/chain.state"
 import { ActionButton } from "@/components/ActionButton"
-import { NOTIN } from "@codec-components"
+import { NOTIN } from "@polkadot-api/react-builder"
 import { state, useStateObservable } from "@react-rxjs/core"
 import { createSignal } from "@react-rxjs/utils"
 import { FC } from "react"

src/pages/Storage/StorageQuery.tsx

@@ -8,7 +8,7 @@ import {
   CodecComponentType,
   CodecComponentValue,
   NOTIN,
-} from "@codec-components"
+} from "@polkadot-api/react-builder"
 import { state, useStateObservable, withDefault } from "@react-rxjs/core"
 import { createSignal } from "@react-rxjs/utils"
 import { Binary } from "polkadot-api"

src/pages/Storage/StorageSubscriptions.tsx

@@ -3,7 +3,7 @@ import { ViewCodec } from "@/codec-components/ViewCodec"
 import { CopyBinary } from "@/codec-components/ViewCodec/CopyBinary"
 import { ButtonGroup } from "@/components/ButtonGroup"
 import { JsonDisplay } from "@/components/JsonDisplay"
-import { CodecComponentType, NOTIN } from "@codec-components"
+import { CodecComponentType, NOTIN } from "@polkadot-api/react-builder"
 import { state, useStateObservable } from "@react-rxjs/core"
 import { PauseCircle, PlayCircle, Trash2 } from "lucide-react"
 import { FC, useMemo, useState } from "react"

src/utils/default.tsx

@@ -1,4 +1,4 @@
-import { NOTIN } from "@codec-components"
+import { NOTIN } from "@polkadot-api/react-builder"
 
 export const withDefault: <T>(value: T | NOTIN, fallback: T) => T = (
   value,

tsconfig.app.json

@@ -22,8 +22,7 @@
     "noFallthroughCasesInSwitch": true,
 
     "paths": {
-      "@/*": ["./src/*"],
-      "@codec-components": ["./src/lib/codecComponents"]
+      "@/*": ["./src/*"]
     }
   },
   "include": ["src"]

vite.config.ts

@@ -7,7 +7,6 @@ export default defineConfig({
   resolve: {
     alias: {
       "@": path.resolve(__dirname, "./src"),
-      "@codec-components": path.resolve(__dirname, "./src/lib/codecComponents"),
     },
   },
   plugins: [react()],