feat: show signature types

Author: mds1

src/components/diff/DiffSignatureTypes.tsx

@@ -0,0 +1,54 @@
+import { pad } from 'viem';
+import { SignatureType } from '@/chains';
+
+type Props = {
+  base: SignatureType[];
+  target: SignatureType[];
+  onlyShowDiff: boolean;
+};
+
+const formatSigType = (contents: SignatureType | undefined) => {
+  if (!contents) return <p>Not present</p>;
+  return (
+    <>
+      <p>{contents.description}</p>
+      <p className='text-secondary text-sm'>{contents.signedData}</p>
+    </>
+  );
+};
+
+// Returns a hex string with a leading `0x` and padded to 2 characters.
+const formatPrefixByte = (prefix: number) => {
+  return pad(`0x${prefix.toString(16).toUpperCase()}`, { size: 1 });
+};
+
+export const DiffSignatureTypes = ({ base, target, onlyShowDiff }: Props) => {
+  // Generate a sorted list of all transaction types from both base and target.
+  const allPrefixBytes = [...base.map((t) => t.prefixByte), ...target.map((t) => t.prefixByte)];
+  const prefixBytes = [...new Set(allPrefixBytes.sort((a, b) => a - b))];
+
+  return (
+    <>
+      {prefixBytes.map((prefix) => {
+        const baseSigType = base.find((s) => s.prefixByte === prefix);
+        const targetSigType = target.find((s) => s.prefixByte === prefix);
+
+        const isEqual = JSON.stringify(baseSigType) === JSON.stringify(targetSigType);
+        const showSigType = !isEqual || !onlyShowDiff;
+
+        return (
+          showSigType && (
+            <div
+              key={prefix}
+              className='flex items-center justify-between border-b border-zinc-500/10 py-1 dark:border-zinc-500/20'
+            >
+              <div className='flex-1'>{formatSigType(baseSigType)}</div>
+              <div className='flex-1 text-center'>{formatPrefixByte(prefix)}</div>
+              <div className='flex-1'>{formatSigType(targetSigType)}</div>
+            </div>
+          )
+        );
+      })}
+    </>
+  );
+};

src/pages/diff.tsx

@@ -4,8 +4,15 @@ import { Chain, chains } from '@/chains';
 import { ChainDiffSelector } from '@/components/ChainDiffSelector';
 import { DiffMetadata } from '@/components/diff/DiffMetadata';
 import { DiffPrecompiles } from '@/components/diff/DiffPrecompiles';
+import { DiffSignatureTypes } from '@/components/diff/DiffSignatureTypes';
 import { Toggle } from '@/components/ui/Toggle';
 
+const SECTION_MAP: Record<string, string> = {
+  metadata: 'Metadata',
+  precompiles: 'Precompiles and Predeploys',
+  signatureTypes: 'Transaction and Signature Types',
+};
+
 const Diff = () => {
   // -------- Parse query parameters --------
 
@@ -43,17 +50,11 @@ const Diff = () => {
 
   const [onlyShowDiff, setOnlyShowDiff] = useState(true);
 
-  const SectionHeader = ({ section }: { section: string }) => {
-    if (section === 'metadata') section = 'Metadata';
-    else if (section === 'precompiles') section = 'Precompiles and Predeploys';
-
-    return (
-      <h2 className='border-b border-zinc-500/10 text-center font-bold dark:border-zinc-500/20'>
-        {section}
-      </h2>
-    );
-  };
-
+  const SectionHeader = ({ section }: { section: string }) => (
+    <h2 className='border-b border-zinc-500/10 text-center font-bold dark:border-zinc-500/20'>
+      {SECTION_MAP[section] || section}
+    </h2>
+  );
   // We take `baseChain` and `targetChain` as arguments to ensure that they are not `undefined`
   // and remove the need for `?` and `!` operators.
   const DiffDiv = ({ baseChain, targetChain }: { baseChain: Chain; targetChain: Chain }) => {
@@ -81,6 +82,14 @@ const Diff = () => {
                 onlyShowDiff={onlyShowDiff}
               />
             );
+          } else if (section === 'signatureTypes') {
+            content = (
+              <DiffSignatureTypes
+                base={baseChain.signatureTypes}
+                target={targetChain.signatureTypes}
+                onlyShowDiff={onlyShowDiff}
+              />
+            );
           }
 
           return (