Add support for decoding raw sig without data

.eslintrc.js

@@ -5,7 +5,7 @@ module.exports = {
     es6: true,
   },
   extends: ['react-app', 'plugin:storybook/recommended'],
-  plugins: ['no-only-tests', 'simple-import-sort', 'unused-imports', 'import'],
+  plugins: ['no-only-tests', 'simple-import-sort', 'unused-imports'],
   parser: '@typescript-eslint/parser',
   parserOptions: {
     project: './tsconfig.json',

src/components/DecodedCalldataTree.tsx

@@ -25,7 +25,6 @@ function attachValues(components: ParamType[], decoded: Decoded): TreeNode[] {
   return components.map((input, index): TreeNode => {
     if (input.type === 'tuple') {
       const value = decoded[index];
-
       if (!Array.isArray(value)) {
         throw new Error(
           'input.type is tuple, but decoded value is not an array',
@@ -41,7 +40,7 @@ function attachValues(components: ParamType[], decoded: Decoded): TreeNode[] {
     return {
       name: input.name,
       type: input.type,
-      value: String(decoded[index]),
+      value: decoded[index] ? String(decoded[index]) : '',
     };
   });
 }
@@ -83,14 +82,14 @@ function CalldataTreeNode({
                 })}
               </section>
             </div>
-          ) : (
-            <NodeBlock
-              className="my-2"
-              str={node.value ?? 'value missing'}
-              nodeType={node.type}
-            >
+          ) : node.value ? (
+            <NodeBlock className="my-2" str={node.value} nodeType={node.type}>
               {node.name ? <code className="text-pink">{node.name}</code> : ' '}
             </NodeBlock>
+          ) : (
+            <code id="node-type" className="text-purple">
+              {node.type}
+            </code>
           )}
         </div>
       </span>

src/components/NodeBlock.tsx

@@ -107,19 +107,20 @@ export function NodeBlock({
           {nodeType}
         </code>
         <div
-          onClick={(e) => {
+          onClick={async (event) => {
             const value =
-              e.currentTarget.children.namedItem('node-value')?.textContent;
-            void navigator.clipboard.writeText(value ?? '');
-
-            setCopyNotification(true);
-            setTimeout(() => {
-              setCopyNotification(false);
-            }, 1500);
+              event.currentTarget.children.namedItem('node-value')?.textContent;
+            if (value) {
+              await navigator.clipboard.writeText(value);
+              setCopyNotification(true);
+              setTimeout(() => {
+                setCopyNotification(false);
+              }, 1500);
+            }
           }}
           className="flex h-10 items-center gap-3 rounded-md border 
           border-gray-600 p-1 px-2 duration-200 hover:bg-gray-700
-          hover:outline active:bg-gray-800"
+            hover:outline active:bg-gray-800"
         >
           <code aria-label="decoded value" id="node-value">
             {state.value}

src/lib/decodeBySigHash.test.ts

@@ -140,6 +140,19 @@ describe(fetchAndDecodeWithCalldata.name, async () => {
     expect(decodedResults![0].fragment.name).toEqual('transferFrom');
     expect(decodedResults![0].sigHash).toEqual('0x23b872dd');
   });
+
+  it('decodes fragment with raw signature', async () => {
+    const sigHash = '0x23c32819';
+    const calldata = sigHash;
+
+    const decodeResult = await fetchAndDecodeWithCalldata(sigHash, calldata);
+
+    expect(decodeResult).toBeDefined();
+    expect(decodeResult!.length).toEqual(1);
+    expect(decodeResult![0].decoded).toEqual([]);
+    expect(decodeResult![0].fragment).toBeDefined();
+    expect(decodeResult![0].sigHash).toEqual(sigHash);
+  });
 });
 
 describe(decodeWithEventProps.name, async () => {

src/lib/decodeBySigHash.ts

@@ -25,7 +25,12 @@ export async function fetchAndDecodeWithCalldata(
   const data = await getSignaturesByCalldata(sigHash);
   if (data) {
     const ifaces = parse4BytesResToIfaces(data);
-    return decodeByCalldata(ifaces, calldata);
+    const decodedByCalldata = decodeByCalldata(ifaces, calldata);
+    if (decodedByCalldata.length === 0 && ifaces.length > 0) {
+      return [{ decoded: [], fragment: ifaces[0].fragments[0], sigHash }];
+    } else {
+      return decodedByCalldata;
+    }
   }
 }