feat: add transactions types

.gitignore

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

components/ChainSelector.tsx

@@ -1,106 +1,82 @@
-import { useContext, useEffect, useMemo, useState, useCallback } from 'react'
-
-import { useRegisterActions, Action } from 'kbar'
-import { useRouter } from 'next/router'
-import Select, { OnChangeValue, components } from 'react-select'
-
-import { EthereumContext } from 'context/ethereumContext'
+import { useContext, useEffect, useMemo, useState, useCallback } from 'react';
+
+import { useRegisterActions, Action } from 'kbar';
+import { useRouter } from 'next/router';
+import Select, { OnChangeValue, components } from 'react-select';
+
+import { EthereumContext } from 'context/ethereumContext';
+
+import { CURRENT_FORK } from 'util/constants';
+import { toKeyIndex } from 'util/string';
+
+import { Icon, Label } from 'components/ui';
+
+const useBuildForkActions = (forkOptions: any[], handleForkChange: { (option: any): void; (arg0: any): any; }) => {
+  return useMemo(() => {
+    const forkIds = forkOptions.map((option, index) => toKeyIndex('fork', index));
+
+    const forkActions = forkOptions.map((option, index) => ({
+      id: toKeyIndex('fork', index),
+      name: option.label,
+      shortcut: [],
+      keywords: option.label,
+      section: '',
+      perform: () => handleForkChange(option),
+      parent: 'fork',
+    }));
+
+    return [
+      {
+        id: 'fork',
+        name: 'Select hardfork…',
+        shortcut: ['f'],
+        keywords: 'fork network evm',
+        section: 'Preferences',
+        children: forkIds,
+      },
+      ...forkActions,
+    ];
+  }, [forkOptions, handleForkChange]);
+};
 
-import { CURRENT_FORK } from 'util/constants'
-import { toKeyIndex } from 'util/string'
 
-import { Icon, Label } from 'components/ui'
 
 const ChainOption = (props: any) => {
-  const { data, children } = props
-  const isCurrent = data.value === CURRENT_FORK
+  const { data, children } = props;
+  const isCurrent = data.value === CURRENT_FORK;
 
   return (
     <components.Option {...props}>
       {children}
       {isCurrent && <Label>Live</Label>}
     </components.Option>
-  )
-}
+  );
+};
 
 const ChainSelector = () => {
-  const { forks, selectedFork, onForkChange } = useContext(EthereumContext)
-
-  const [forkValue, setForkValue] = useState()
-  const [actions, setActions] = useState<Action[]>([])
-  const router = useRouter()
-
-  const forkOptions = useMemo(
-    () => forks.map((fork) => ({ value: fork.name, label: fork.name })),
-    [forks],
-  )
-
-  const defaultForkOption = useMemo(
-    () => forkOptions.find((fork) => fork.value === selectedFork?.name),
-    [forkOptions, selectedFork],
-  )
-
-  const handleForkChange = useCallback(
-    (option: OnChangeValue<any, any>) => {
-      setForkValue(option)
-      onForkChange(option.value)
-
-      router.query.fork = option.value
-      router.push(router)
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [onForkChange],
-  )
-
-  useEffect(() => {
-    if (defaultForkOption) {
-      handleForkChange(defaultForkOption)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [defaultForkOption])
-
-  useEffect(() => {
-    const forkIds: string[] = []
-
-    const forkActions = forkOptions.map(
-      (option: OnChangeValue<any, any>, index) => {
-        const keyId = toKeyIndex('fork', index)
-        forkIds.push(keyId)
-
-        return {
-          id: keyId,
-          name: option.label,
-          shortcut: [],
-          keywords: option.label,
-          section: '',
-          perform: () => handleForkChange(option),
-          parent: 'fork',
-        }
-      },
-    )
-
-    if (forkIds.length > 0) {
-      setActions([
-        ...forkActions,
-        {
-          id: 'fork',
-          name: 'Select hardfork…',
-          shortcut: ['f'],
-          keywords: 'fork network evm',
-          section: 'Preferences',
-        },
-      ])
-    }
-  }, [forkOptions, handleForkChange])
-
-  useRegisterActions(actions, [actions])
+  const { forks, selectedFork, onForkChange } = useContext(EthereumContext);
+  const [forkValue, setForkValue] = useState(null);
+  const router = useRouter();
+
+  const forkOptions = useMemo(() => forks.map((fork) => ({ value: fork.name, label: fork.name })), [forks]);
+
+  const handleForkChange = useCallback((option: OnChangeValue<any, any>) => {
+    setForkValue(option);
+    onForkChange(option.value);
+
+    router.query.fork = option.value;
+    router.push(router);
+  }, [onForkChange, router]);
+
+  const actions = useBuildForkActions(forkOptions, handleForkChange);
+
+  useRegisterActions(actions, [actions]);
 
   return (
     <div className="flex justify-end items-center rounded">
       {forks.length > 0 && (
         <div className="flex items-center mr-2">
           <Icon name="git-branch-line" className="text-indigo-500 mr-2" />
-
           <Select
             onChange={handleForkChange}
             options={forkOptions}
@@ -113,7 +89,8 @@ const ChainSelector = () => {
         </div>
       )}
     </div>
-  )
-}
+  );
+};
+
 
-export default ChainSelector
+export default ChainSelector;

components/Reference/Filters.tsx

@@ -11,27 +11,29 @@ 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,19 @@ 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>
   )