Add ChainSpec selector for InspectStateViewer (#3)

- Change StateViewer from 2 tabs to 3 tabs (Encoded/Decoded Tiny/Decoded Full)
- Add chainSpec prop to InspectStateViewer to select between tinyChainSpec and fullChainSpec
- Update useLoadState hook to dynamically select chain spec based on prop
- Update tests to handle new tab structure and mock fullChainSpec
- Maintain backward compatibility with chainSpec defaulting to 'tiny'

Fixes #3

Co-Authored-By: Tomek Drwięga <tomusdrw+github@gmail.com>

Author: devin-ai-integration[bot]

src/components/InspectStateViewer.test.tsx

@@ -5,7 +5,8 @@ import { describe, it, expect, beforeEach, vi } from 'vitest';
 vi.mock('@typeberry/state-merkleization', () => ({
   loadState: vi.fn(),
   config: {
-    tinyChainSpec: {}
+    tinyChainSpec: {},
+    fullChainSpec: {}
   },
   bytes: {
     Bytes: {

src/components/InspectStateViewer.tsx

@@ -13,22 +13,24 @@ interface InspectStateViewerProps {
   state: Record<string, string>;
   title?: string;
   searchTerm?: string;
+  chainSpec?: 'tiny' | 'full';
 }
 
 
 
-const spec = config.tinyChainSpec;
 
 const useLoadState = (
   state: Record<string, string> | undefined,
   setError: (error: string | null) => void,
   ctx: string,
+  chainSpec: 'tiny' | 'full',
 ) => {
   return useMemo(() => {
     if (!state) return null;
 
     try {
       setError(null);
+      const spec = chainSpec === 'tiny' ? config.tinyChainSpec : config.fullChainSpec;
       return loadState(spec, Object.entries(state).map(([key, value]) => {
         return [
           bytes.Bytes.parseBytes(key, 31),
@@ -40,21 +42,22 @@ const useLoadState = (
       setError(`${ctx}: ${errorMessage}`);
       return null;
     }
-  }, [state, setError, ctx]);
+  }, [state, setError, ctx, chainSpec]);
 }
 
 const InspectStateViewer = ({
   preState,
   state,
   title = "State Data",
   searchTerm: externalSearchTerm,
+  chainSpec = 'tiny',
 }: InspectStateViewerProps) => {
   const [error, setError] = useState<string | null>(null);
   const searchTerm = externalSearchTerm || '';
   const isDiffMode = preState !== undefined;
 
-  const preStateAccess = useLoadState(preState, setError, 'preState');
-  const stateAccess = useLoadState(state, setError, 'postState');
+  const preStateAccess = useLoadState(preState, setError, 'preState', chainSpec);
+  const stateAccess = useLoadState(state, setError, 'postState', chainSpec);
 
   // Expose all states to the global window object for DevTools inspection.
   (window as unknown as { preState: unknown }).preState = preStateAccess;

src/components/StateViewer.test.tsx

@@ -63,7 +63,8 @@ describe('StateViewer', () => {
 
     // Component should render without throwing errors
     expect(screen.getByText('Encoded')).toBeInTheDocument();
-    expect(screen.getByText('Decoded')).toBeInTheDocument();
+    expect(screen.getByText('Decoded Tiny')).toBeInTheDocument();
+    expect(screen.getByText('Decoded Full')).toBeInTheDocument();
   });
 
   it('should default to inspect tab', () => {
@@ -400,13 +401,21 @@ describe('StateViewer', () => {
       // Should be on Raw tab by default
       expect(screen.getByText('CHANGED')).toBeInTheDocument();
 
-      // Switch to Decoded tab
-      const decodedTab = screen.getByText('Decoded');
-      fireEvent.click(decodedTab);
+      // Switch to Decoded Tiny tab
+      const decodedTinyTab = screen.getByText('Decoded Tiny');
+      fireEvent.click(decodedTinyTab);
 
       // Note: The decoded view might show errors due to mock limitations
       // but the component should still render without crashing
-      expect(decodedTab).toBeInTheDocument();
+      expect(decodedTinyTab).toBeInTheDocument();
+      
+      // Switch to Decoded Full tab
+      const decodedFullTab = screen.getByText('Decoded Full');
+      fireEvent.click(decodedFullTab);
+      
+      // Note: The decoded view might show errors due to mock limitations
+      // but the component should still render without crashing
+      expect(decodedFullTab).toBeInTheDocument();
     });
 
     it('should maintain backward compatibility with single state prop', () => {
@@ -501,4 +510,4 @@ describe('StateViewer', () => {
       });
     });
   });
-});
+});

src/components/StateViewer.tsx

@@ -26,10 +26,11 @@ const StateViewer = ({
         className="pb-2"
       />
 
-      <Tabs defaultValue="inspect" className="w-full">
-        <TabsList className="grid w-full grid-cols-2 pb-2">
+      <Tabs defaultValue="inspect-tiny" className="w-full">
+        <TabsList className="grid w-full grid-cols-3 pb-2">
           <TabsTrigger value="raw">Encoded</TabsTrigger>
-          <TabsTrigger value="inspect">Decoded</TabsTrigger>
+          <TabsTrigger value="inspect-tiny">Decoded Tiny</TabsTrigger>
+          <TabsTrigger value="inspect-full">Decoded Full</TabsTrigger>
         </TabsList>
 
         <TabsContent value="raw" className="mt-0 border rounded-lg">
@@ -41,11 +42,21 @@ const StateViewer = ({
           />
         </TabsContent>
 
-        <TabsContent value="inspect" className="mt-0">
+        <TabsContent value="inspect-tiny" className="mt-0">
           <InspectStateViewer
             preState={preState}
             state={state}
             searchTerm={searchTerm}
+            chainSpec="tiny"
+          />
+        </TabsContent>
+
+        <TabsContent value="inspect-full" className="mt-0">
+          <InspectStateViewer
+            preState={preState}
+            state={state}
+            searchTerm={searchTerm}
+            chainSpec="full"
           />
         </TabsContent>
       </Tabs>