feat: add transactions types

.gitignore

@@ -36,3 +36,10 @@ yarn-error.log*
 
 # jet brains
 .idea
+
+
+# bun 
+bun.lockb
+
+# pnpm
+pnpm-lock.yaml

components/Editor/index.tsx

@@ -252,13 +252,6 @@ const Editor = ({ readOnly = false }: Props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
-  useEffect(() => {
-    if (solcWorkerRef && solcWorkerRef.current) {
-      // @ts-ignore change the worker message, when value and args changed.
-      solcWorkerRef.current?.onmessage = handleWorkerMessage
-    }
-  }, [solcWorkerRef, handleWorkerMessage])
-
   useEffect(() => {
     if (deployedContractAddress) {
       log(`Contract deployed at address: ${deployedContractAddress}`)

components/KBar/Results.tsx

@@ -8,15 +8,18 @@ const NO_GROUP = 'none'
 
 const Results = () => {
   const groups = useMatches()
-  const flattened = useMemo(
-    () =>
-      groups.reduce((acc: any, curr: any) => {
+
+  const flattened = useMemo(() => {
+    if (groups && Array.isArray(groups)) {
+      return groups.reduce((acc: any, curr: any) => {
         acc.push(curr.name)
         acc.push(...curr.actions)
         return acc
-      }, []),
-    [groups],
-  )
+      }, [])
+    } else {
+      return []
+    }
+  }, [groups])
 
   return (
     <KBarResults

components/Reference/DocRow.tsx

@@ -137,7 +137,7 @@ const DocRow = ({
           >
             contribute?
           </a>{' '}
-          ;)
+          )
         </div>
       )}
     </div>

components/Reference/Filters.tsx

@@ -11,27 +11,39 @@ const debounceTimeout = 100 // ms
 type Props = {
   onSetFilter: (columnId: string, value: string) => void
   isPrecompiled?: boolean
+  isTransactionType?: boolean
 }
 
-const Filters = ({ onSetFilter, isPrecompiled = false }: Props) => {
+const Filters = ({
+  onSetFilter,
+  isPrecompiled = false,
+  isTransactionType = false,
+}: Props) => {
   const router = useRouter()
   const [searchKeyword, setSearchKeyword] = useState('')
   const [searchFilter, setSearchFilter] = useState({
     value: 'name',
     label: 'Name',
   })
 
-  const filterByOptions = useMemo(
-    () => [
-      {
-        label: !isPrecompiled ? 'Opcode' : 'Address',
-        value: 'opcodeOrAddress',
-      },
-      { label: 'Name', value: 'name' },
-      { label: 'Description', value: 'description' },
-    ],
-    [isPrecompiled],
-  )
+  const filterByOptions = useMemo(() => {
+    if (isTransactionType) {
+      return [
+        { label: 'Type', value: 'type' },
+        { label: 'Name', value: 'name' },
+        { label: 'Description', value: 'description' },
+      ]
+    } else {
+      return [
+        {
+          label: !isPrecompiled ? 'Opcode' : 'Address',
+          value: 'opcodeOrAddress',
+        },
+        { label: 'Name', value: 'name' },
+        { label: 'Description', value: 'description' },
+      ]
+    }
+  }, [isPrecompiled, isTransactionType])
 
   const inputRef = useRef<HTMLInputElement>(null)
 

components/Reference/Header.tsx

@@ -6,14 +6,23 @@ import { H2, Label } from 'components/ui'
 
 type Props = {
   isPrecompiled?: boolean
+  isTransactionType?: boolean
 }
 
-const ReferenceHeader = ({ isPrecompiled }: Props) => {
+const ReferenceHeader = ({ isPrecompiled, isTransactionType }: Props) => {
   const { selectedFork } = useContext(EthereumContext)
 
+  let title = 'Instructions'
+  if (isPrecompiled) {
+    title = 'Precompiled Contracts'
+  }
+  if (isTransactionType) {
+    title = 'Transaction Types'
+  }
+
   return (
     <H2 className="pb-8 md:pb-0 inline-flex items-center">
-      <span>{!isPrecompiled ? 'Instructions' : 'Precompiled Contracts'}</span>
+      <span>{title}</span>
       {selectedFork && <Label>{selectedFork.name}</Label>}
     </H2>
   )

components/Reference/columns.tsx

@@ -5,6 +5,20 @@ import { StackBox } from 'components/ui'
 // Possible fields are defined in `Opcodes.json`
 type OpcodeRow = Row<Record<string, string | undefined>>
 
+type RollupStyles = {
+  [key: string]: string
+}
+
+const rollupStyles: RollupStyles = {
+  optimism: 'bg-red-500 text-white',
+  base: 'bg-blue-500 text-white',
+  arbitrumOne: 'bg-blue-300 text-white',
+  default: 'bg-gray-400 text-gray-800',
+}
+
+const getRollupStyle = (rollupName: string | number) =>
+  rollupStyles[rollupName] || rollupStyles.default
+
 const filter = (rows: OpcodeRow[], id: string, filterValue: string) => {
   return rows.filter((row) =>
     row.original[id]
@@ -13,54 +27,98 @@ const filter = (rows: OpcodeRow[], id: string, filterValue: string) => {
   )
 }
 
-const columns = (isPrecompiled: boolean) => [
-  {
-    Header: !isPrecompiled ? 'Opcode' : 'Address',
-    accessor: 'opcodeOrAddress',
-    className: !isPrecompiled ? 'uppercase' : undefined,
-    filter,
-    width: 48,
-  },
-  {
-    Header: 'Name',
-    accessor: 'name',
-    filter,
-    width: 80,
-  },
-  {
-    Header: 'Minimum Gas',
-    accessor: 'minimumFee',
-    width: 50,
-  },
-  {
-    Header: !isPrecompiled ? 'Stack Input' : 'Input',
-    accessor: 'input',
-    Cell: ({ value }: { value: string }) => (
-      <StackBox
-        value={value}
-        className="text-xs border-indigo-300 dark:border-indigo-900 text-gray-800 dark:text-gray-200"
-      />
-    ),
-    width: 200,
-    className: 'hidden lg:table-cell',
-  },
-  {
-    Header: !isPrecompiled ? 'Stack Output' : 'Output',
-    accessor: 'output',
-    Cell: ({ value }: { value: string }) => (
-      <StackBox
-        value={value}
-        className="text-xs border-indigo-300 dark:border-indigo-900 text-gray-800 dark:text-gray-200"
-      />
-    ),
-    width: 100,
-    className: 'hidden lg:table-cell',
-  },
-  {
-    Header: 'Description',
-    accessor: 'description',
-    className: 'hidden md:table-cell',
-  },
-]
+const columns = (isPrecompiled: boolean, isTransactionType = false) => {
+  if (isTransactionType) {
+    return [
+      {
+        Header: 'Type',
+        accessor: 'type',
+        filter,
+        width: 48,
+      },
+      {
+        Header: 'Name',
+        accessor: 'name',
+        filter,
+        width: 80,
+      },
+      {
+        Header: 'Description',
+        accessor: 'description',
+        className: 'hidden md:table-cell',
+      },
+      {
+        Header: 'Rollups',
+        accessor: 'rollups',
+        className: 'hidden md:table-cell',
+        Cell: ({ value }: { value: string }) => (
+          <div className="flex flex-wrap">
+            {Object.keys(value).map((rollupName, index) => (
+              <span
+                key={index}
+                className={`ml-2 py-1 px-3 leading-normal rounded-full text-2xs tracking-widest font-medium ${getRollupStyle(
+                  rollupName,
+                )}`}
+                style={{ margin: '4px' }}
+              >
+                {rollupName}
+              </span>
+            ))}
+          </div>
+        ),
+      },
+    ]
+  }
+
+  return [
+    {
+      Header: !isPrecompiled ? 'Opcode' : 'Address',
+      accessor: 'opcodeOrAddress',
+      className: !isPrecompiled ? 'uppercase' : undefined,
+      filter,
+      width: 48,
+    },
+    {
+      Header: 'Name',
+      accessor: 'name',
+      filter,
+      width: 80,
+    },
+    {
+      Header: 'Minimum Gas',
+      accessor: 'minimumFee',
+      width: 50,
+    },
+    {
+      Header: !isPrecompiled ? 'Stack Input' : 'Input',
+      accessor: 'input',
+      Cell: ({ value }: { value: string }) => (
+        <StackBox
+          value={value}
+          className="text-xs border-indigo-300 dark:border-indigo-900 text-gray-800 dark:text-gray-200"
+        />
+      ),
+      width: 200,
+      className: 'hidden lg:table-cell',
+    },
+    {
+      Header: !isPrecompiled ? 'Stack Output' : 'Output',
+      accessor: 'output',
+      Cell: ({ value }: { value: string }) => (
+        <StackBox
+          value={value}
+          className="text-xs border-indigo-300 dark:border-indigo-900 text-gray-800 dark:text-gray-200"
+        />
+      ),
+      width: 100,
+      className: 'hidden lg:table-cell',
+    },
+    {
+      Header: 'Description',
+      accessor: 'description',
+      className: 'hidden md:table-cell',
+    },
+  ]
+}
 
 export default columns

components/Reference/index.tsx

@@ -40,16 +40,21 @@ const ReferenceTable = ({
   gasDocs,
   reference,
   isPrecompiled = false,
+  isTransactionType = false,
 }: {
   itemDocs: IItemDocs
   gasDocs: IGasDocs
   reference: IReferenceItem[]
   isPrecompiled?: boolean
+  isTransactionType?: boolean
 }) => {
   const router = useRouter()
   const { forks, selectedFork, onForkChange } = useContext(EthereumContext)
   const data = useMemo(() => reference, [reference])
-  const columns = useMemo(() => tableColumns(isPrecompiled), [isPrecompiled])
+  const columns = useMemo(
+    () => tableColumns(isPrecompiled, isTransactionType),
+    [isPrecompiled, isTransactionType],
+  )
   const rowRefs = useRef<HTMLTableRowElement[]>([])
   const [focusedOpcode, setFocusedOpcode] = useState<number | null>()
   const { width: screenWidth } = useWindowSize()
@@ -147,8 +152,15 @@ const ReferenceTable = ({
   return (
     <>
       <div className="flex flex-col md:flex-row md:items-center md:justify-between mb-4 md:mb-10">
-        <Header isPrecompiled={isPrecompiled} />
-        <Filters onSetFilter={setFilter} isPrecompiled={isPrecompiled} />
+        <Header
+          isPrecompiled={isPrecompiled}
+          isTransactionType={isTransactionType}
+        />
+        <Filters
+          onSetFilter={setFilter}
+          isPrecompiled={isPrecompiled}
+          isTransactionType={isTransactionType}
+        />
       </div>
 
       <table {...getTableProps()} className="w-full table-fixed">

components/ThemeSelector.tsx

@@ -7,6 +7,13 @@ const ThemeSelector = () => {
   const { theme, setTheme, resolvedTheme } = useTheme()
 
   const actions: Action[] = [
+    {
+      id: 'theme',
+      name: 'Select theme…',
+      shortcut: ['t'],
+      keywords: 'theme appearance',
+      section: 'Preferences',
+    },
     {
       id: 'theme-light',
       name: 'Light',
@@ -34,14 +41,6 @@ const ThemeSelector = () => {
       perform: () => setTheme('system'),
       parent: 'theme',
     },
-    {
-      id: 'theme',
-      name: 'Select theme…',
-      shortcut: ['t'],
-      keywords: 'theme appearance',
-      section: 'Preferences',
-      children: ['theme-light', 'theme-dark', 'theme-system'],
-    },
   ]
 
   useRegisterActions(actions, [actions])

components/layouts/Nav.tsx

@@ -38,6 +38,7 @@ const Nav = () => {
           >
             <NavLink href="/">Opcodes</NavLink>
             <NavLink href="/precompiled">Precompiled Contracts</NavLink>
+            <NavLink href="/transactions">Transactions Types</NavLink>
             <NavLink href="/playground">Playground</NavLink>
             <NavLink href="/about">About the EVM</NavLink>
             <NavLink href={GITHUB_REPO_URL} external>