feat: BitSeq components and update deps (#69)

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

@@ -1,6 +1,7 @@
 import {
   EditAccountId,
   EditBigNumber,
+  EditBitSeq,
   EditBool,
   EditBytes,
   EditEthAccount,
@@ -44,6 +45,7 @@ export const CBigNumber: EditBigNumber = CPrimitive
 export const CNumber: EditNumber = CPrimitive
 export const CAccountId: EditAccountId = CPrimitive
 export const CBytes: EditBytes = CPrimitive
+export const CBitSeq: EditBitSeq = CPrimitive
 
 export const COption: EditOption = ({ path, value, inner }) => {
   const isActive = useStateObservable(isActive$(path.join(".")))

src/codec-components/EditCodec/EditBitSeq.tsx

@@ -0,0 +1,31 @@
+import { type EditBitSeq, NOTIN } from "@polkadot-api/react-builder"
+import { TextInputField } from "./codec-components"
+import { useGenericSynchronizeInput } from "@/components/useSynchroniseInput"
+
+const getValidation = (value: string) =>
+  !!value.match(/^[01]+$/) ? null : `Only "0" and "1" allowed`
+
+export const CBitSeq: EditBitSeq = ({ value, onValueChanged }) => {
+  const [inputValue, setInputValue] = useGenericSynchronizeInput<
+    Array<0 | 1>,
+    string
+  >(
+    value,
+    onValueChanged,
+    (v) =>
+      getValidation(v) ? NOTIN : (v.split("").map(Number) as Array<0 | 1>),
+    "",
+    (v) => v.join(""),
+    () => true,
+  )
+
+  return (
+    <TextInputField
+      value={inputValue}
+      onChange={setInputValue}
+      placeholder="0101"
+      warn={getValidation(inputValue) !== null}
+      error={getValidation(inputValue)}
+    />
+  )
+}

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

@@ -3,6 +3,7 @@ import { BinaryEdit, Focus, TypeIcon, TypeIcons } from "@/components/Icons"
 import {
   EditAccountId,
   EditBigNumber,
+  EditBitSeq,
   EditBool,
   EditBytes,
   EditEthAccount,
@@ -47,6 +48,7 @@ export const CBigNumber: EditBigNumber = CPrimitive
 export const CNumber: EditNumber = CPrimitive
 export const CAccountId: EditAccountId = CPrimitive
 export const CBytes: EditBytes = CPrimitive
+export const CBitSeq: EditBitSeq = CPrimitive
 
 export const COption: EditOption = ({
   value,

src/codec-components/EditCodec/components.ts

@@ -8,3 +8,4 @@ export * from "./CTuple"
 export * from "./CStr"
 export * from "./codec-components"
 export * from "./CEthAccount"
+export * from "./EditBitSeq"

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

@@ -1,5 +1,6 @@
 import {
   ViewBigNumber,
+  ViewBitSeq,
   ViewBool,
   ViewEthAccount,
   ViewNumber,
@@ -37,6 +38,13 @@ export const CResult: ViewResult = ({ value, inner }) => {
 
 export const CStr: ViewStr = ({ value }) => <div>{value}</div>
 export const CNumber: ViewNumber = ({ value }) => <div>{value}</div>
+export const CBitSeq: ViewBitSeq = ({ value }) => (
+  <div>
+    {value
+      .map((val, idx) => `${idx > 0 && idx % 4 === 0 ? "_" : ""}${val}`)
+      .join("")}
+  </div>
+)
 export const CBigNumber: ViewBigNumber = ({ value }) => (
   <div>{String(value)}</div>
 )