feat: support base64 input for deserialization

Add base64 as a deserialize input format alongside hex. The input
panel now shows hex/base64 tabs in deserialize mode. The worker
decodes base64 via atob before deserializing.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: wemeetagain

src/hooks/use-ssz.ts

@@ -35,10 +35,11 @@ export function useSsz(
     }
 
     // Skip if debounced input doesn't match the current mode (stale data from mode switch)
-    if (mode === "deserialize" && !debouncedInput.trim().startsWith("0x")) {
+    const trimmed = debouncedInput.trim();
+    if (mode === "deserialize" && inputFormat === "hex" && !trimmed.startsWith("0x")) {
       return;
     }
-    if (mode === "serialize" && inputFormat !== "hex" && debouncedInput.trim().startsWith("0x")) {
+    if (mode === "serialize" && inputFormat !== "hex" && trimmed.startsWith("0x")) {
       return;
     }
 
@@ -59,7 +60,7 @@ export function useSsz(
             });
           }
         } else {
-          const {deserialized} = await worker.deserialize(typeName, forkName, debouncedInput);
+          const {deserialized} = await worker.deserialize(typeName, forkName, debouncedInput, inputFormat);
           if (!cancelled) {
             setResult({
               serialized: null,

src/lib/formats.ts

@@ -1,6 +1,16 @@
 import {type Type, fromHexString, toHexString} from "@chainsafe/ssz";
 import {dumpYaml, parseYaml} from "./yaml";
 
+function fromBase64(b64: string): Uint8Array {
+  const binstr = atob(b64);
+  return Uint8Array.from(binstr, (ch) => ch.charCodeAt(0));
+}
+
+function toBase64(data: Uint8Array): string {
+  const binstr = Array.from(data, (ch) => String.fromCharCode(ch)).join("");
+  return btoa(binstr);
+}
+
 // --- Input formats (for parsing user input into SSZ values) ---
 
 type InputFormat = {
@@ -25,11 +35,6 @@ export const inputFormats: Record<string, InputFormat> = {
 
 // --- Output formats (for displaying results) ---
 
-function toBase64(data: Uint8Array): string {
-  const binstr = Array.from(data, (ch) => String.fromCharCode(ch)).join("");
-  return btoa(binstr);
-}
-
 type SerializeOutputFormat = {
   dump: (value: Uint8Array) => string;
 };
@@ -53,6 +58,6 @@ export const deserializeOutputFormats: Record<string, DeserializeOutputFormat> =
 };
 
 export const serializeInputFormatNames = ["yaml", "json", "hex"] as const;
-export const deserializeInputFormatNames = ["hex"] as const;
+export const deserializeInputFormatNames = ["hex", "base64"] as const;
 export const serializeOutputFormatNames = ["hex", "base64"] as const;
 export const deserializeOutputFormatNames = ["yaml", "json"] as const;

src/workers/ssz-worker.ts

@@ -34,10 +34,16 @@ const worker = {
     return Comlink.transfer({serialized, hashTreeRoot}, [serialized.buffer, hashTreeRoot.buffer]);
   },
 
-  async deserialize(typeName: string, forkName: string, hexData: string) {
+  async deserialize(typeName: string, forkName: string, data: string, inputFormat: string) {
     const {fromHexString, forks} = await libs;
     const type = getType(forks, typeName, forkName);
-    const bytes = fromHexString(hexData);
+    let bytes: Uint8Array;
+    if (inputFormat === "base64") {
+      const binstr = atob(data);
+      bytes = Uint8Array.from(binstr, (ch) => ch.charCodeAt(0));
+    } else {
+      bytes = fromHexString(data);
+    }
     const deserialized = type.deserialize(bytes);
     return {deserialized};
   },
@@ -52,7 +58,7 @@ const worker = {
 
 export type SszWorkerApi = {
   serialize(typeName: string, forkName: string, input: string, inputFormat: string): Promise<{serialized: Uint8Array; hashTreeRoot: Uint8Array}>;
-  deserialize(typeName: string, forkName: string, hexData: string): Promise<{deserialized: unknown}>;
+  deserialize(typeName: string, forkName: string, data: string, inputFormat: string): Promise<{deserialized: unknown}>;
   defaultValue(typeName: string, forkName: string): Promise<{value: unknown}>;
 };