chore(typecheck): running typecheck

Author: developerfred

components/ChainSelector.tsx

@@ -12,19 +12,19 @@ import { toKeyIndex } from 'util/string'
 import { Icon, Label } from 'components/ui'
 
 interface ForkOption {
-  label: string;
+  label: string
 }
 
-
-type HandleForkChange = (option: ForkOption) => void;
-
+type HandleForkChange = (option: ForkOption) => void
 
 const useBuildForkActions = (
   forkOptions: ForkOption[],
-  handleForkChange: HandleForkChange
+  handleForkChange: HandleForkChange,
 ) => {
   return useMemo(() => {
-    const forkIds = forkOptions.map((option, index) => toKeyIndex('fork', index));
+    const forkIds = forkOptions.map((option, index) =>
+      toKeyIndex('fork', index),
+    )
 
     const forkActions = forkOptions.map((option, index) => ({
       id: toKeyIndex('fork', index),
@@ -34,7 +34,7 @@ const useBuildForkActions = (
       section: '',
       perform: () => handleForkChange(option),
       parent: 'fork',
-    }));
+    }))
 
     return [
       {
@@ -46,12 +46,9 @@ const useBuildForkActions = (
         children: forkIds,
       },
       ...forkActions,
-    ];
-  }, [forkOptions, handleForkChange]);
-};
-
-
-
+    ]
+  }, [forkOptions, handleForkChange])
+}
 
 const ChainOption = (props: any) => {
   const { data, children } = props
@@ -70,15 +67,21 @@ const ChainSelector = () => {
   const [forkValue, setForkValue] = useState(null)
   const router = useRouter()
 
-  const forkOptions = useMemo(() => forks.map((fork) => ({ value: fork.name, label: fork.name })), [forks])
+  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)
+  const handleForkChange = useCallback(
+    (option: OnChangeValue<any, any>) => {
+      setForkValue(option)
+      onForkChange(option.value)
 
-    router.query.fork = option.value
-    router.push(router)
-  }, [onForkChange, router])
+      router.query.fork = option.value
+      router.push(router)
+    },
+    [onForkChange, router],
+  )
 
   const actions = useBuildForkActions(forkOptions, handleForkChange)
 
@@ -104,5 +107,4 @@ const ChainSelector = () => {
   )
 }
 
-
 export default ChainSelector

components/KBar/Results.tsx

@@ -1,19 +1,21 @@
 import { useMemo } from 'react'
+
 import { KBarResults, useMatches } from 'kbar'
+
 import ResultItem from './ResultItem'
 
 const NO_GROUP = 'none'
 
 const Results = () => {
-  const { results } = useMatches() 
+  const { results } = useMatches()
 
   const flattened = useMemo(() => {
     return results.reduce((acc: any[], curr: any) => {
       if (typeof curr === 'string') {
         acc.push(curr)
       } else {
-        acc.push(curr.name) 
-        acc.push(...curr.actions) 
+        acc.push(curr.name)
+        acc.push(...curr.actions)
       }
       return acc
     }, [])

components/Reference/Filters.tsx

@@ -14,7 +14,11 @@ type Props = {
   isTransactionType?: boolean
 }
 
-const Filters = ({ onSetFilter, isPrecompiled = false, isTransactionType = false  }: Props) => {
+const Filters = ({
+  onSetFilter,
+  isPrecompiled = false,
+  isTransactionType = false,
+}: Props) => {
   const router = useRouter()
   const [searchKeyword, setSearchKeyword] = useState('')
   const [searchFilter, setSearchFilter] = useState({
@@ -24,11 +28,17 @@ const Filters = ({ onSetFilter, isPrecompiled = false, isTransactionType = false
 
   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: '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' },
       ]

components/Reference/Header.tsx

@@ -13,8 +13,12 @@ const ReferenceHeader = ({ isPrecompiled, isTransactionType }: Props) => {
   const { selectedFork } = useContext(EthereumContext)
 
   let title = 'Instructions'
-  if (isPrecompiled) title = 'Precompiled Contracts'
-  if (isTransactionType) title = 'Transaction Types'
+  if (isPrecompiled) {
+    title = 'Precompiled Contracts'
+  }
+  if (isTransactionType) {
+    title = 'Transaction Types'
+  }
 
   return (
     <H2 className="pb-8 md:pb-0 inline-flex items-center">

components/Reference/columns.tsx

@@ -1,6 +1,6 @@
 import { Row } from 'react-table'
-import { StackBox } from 'components/ui'
 
+import { StackBox } from 'components/ui'
 
 // Possible fields are defined in `Opcodes.json`
 type OpcodeRow = Row<Record<string, string | undefined>>
@@ -13,7 +13,7 @@ const filter = (rows: OpcodeRow[], id: string, filterValue: string) => {
   )
 }
 
-const columns = (isPrecompiled: boolean, isTransactionType: boolean = false) => {  
+const columns = (isPrecompiled: boolean, isTransactionType = false) => {
   if (isTransactionType) {
     return [
       {
@@ -44,12 +44,12 @@ const columns = (isPrecompiled: boolean, isTransactionType: boolean = false) =>
                 key={index}
                 className={`ml-2 py-1 px-3 leading-normal rounded-full text-2xs tracking-widest font-medium ${
                   rollupName === 'optimism'
-                    ? 'bg-red-500 text-white' 
+                    ? 'bg-red-500 text-white'
                     : rollupName === 'base'
                     ? 'bg-blue-500 text-white'
                     : rollupName === 'arbitrumOne'
                     ? 'bg-blue-300 text-white'
-                    : 'bg-gray-400 text-gray-800' 
+                    : 'bg-gray-400 text-gray-800'
                 }`}
                 style={{ margin: '4px' }}
               >

components/Reference/index.tsx

@@ -14,7 +14,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useTable, useExpanded, useFilters, HeaderGroup } from 'react-table'
 import ReactTooltip from 'react-tooltip'
-import { IReferenceItem, IItemDocs, IGasDocs} from 'types'
+import { IReferenceItem, IItemDocs, IGasDocs } from 'types'
 
 import {
   EthereumContext,
@@ -38,20 +38,23 @@ type CustomHeaderGroup = {
 const ReferenceTable = ({
   itemDocs,
   gasDocs,
-  reference,  
+  reference,
   isPrecompiled = false,
   isTransactionType = false,
 }: {
   itemDocs: IItemDocs
   gasDocs: IGasDocs
-  reference: IReferenceItem[]   
+  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, isTransactionType), [isPrecompiled, isTransactionType])
+  const columns = useMemo(
+    () => tableColumns(isPrecompiled, isTransactionType),
+    [isPrecompiled, isTransactionType],
+  )
   const rowRefs = useRef<HTMLTableRowElement[]>([])
   const [focusedOpcode, setFocusedOpcode] = useState<number | null>()
   const { width: screenWidth } = useWindowSize()
@@ -149,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} isTransactionType={isTransactionType} />
-        <Filters onSetFilter={setFilter} isPrecompiled={isPrecompiled} isTransactionType={isTransactionType}/>
+        <Header
+          isPrecompiled={isPrecompiled}
+          isTransactionType={isTransactionType}
+        />
+        <Filters
+          onSetFilter={setFilter}
+          isPrecompiled={isPrecompiled}
+          isTransactionType={isTransactionType}
+        />
       </div>
 
       <table {...getTableProps()} className="w-full table-fixed">

components/ThemeSelector.tsx

@@ -12,7 +12,7 @@ const ThemeSelector = () => {
       name: 'Select theme…',
       shortcut: ['t'],
       keywords: 'theme appearance',
-      section: 'Preferences',      
+      section: 'Preferences',
     },
     {
       id: 'theme-light',
@@ -41,7 +41,6 @@ const ThemeSelector = () => {
       perform: () => setTheme('system'),
       parent: 'theme',
     },
-    
   ]
 
   useRegisterActions(actions, [actions])

components/ui/StackBox.tsx

@@ -1,21 +1,22 @@
 import React from 'react'
+
 import cn from 'classnames'
 
 type Props = {
-  value?: string 
+  value?: string
   showEmpty?: boolean
   isFullWidth?: boolean
   className?: string
 }
 
 export const StackBox: React.FC<Props> = ({
-  value = '', 
-  showEmpty = true, 
+  value = '',
+  showEmpty = true,
   isFullWidth,
   className,
 }) => {
   if (!showEmpty && value.trim().length === 0) {
-    return null 
+    return null
   }
 
   const parts = value.split(/[^\\]\|/)

context/ethereumContext.tsx

@@ -22,7 +22,7 @@ import {
   IInstruction,
   IStorage,
   IExecutionState,
-  IChain,  
+  IChain,
 } from 'types'
 
 import { CURRENT_FORK, FORKS_WITH_TIMESTAMPS } from 'util/constants'
@@ -160,23 +160,24 @@ export const EthereumProvider: React.FC<{}> = ({ children }) => {
   }, [])
 
   const loadTransactionTypes = () => {
-    const typesTransactions: IReferenceItem[] = Object.entries(TranscationsMeta).map(([key, value]) => {
+    const typesTransactions: IReferenceItem[] = Object.entries(
+      TranscationsMeta,
+    ).map(([key, value]) => {
       return {
-        opcodeOrAddress: key, 
-        name: value.name, 
-        input: '', 
-        output: '', 
-        description: value.description, 
-        staticFee: 0, 
-        minimumFee: 0,                
-        rollups: value.rollups, 
+        opcodeOrAddress: key,
+        name: value.name,
+        input: '',
+        output: '',
+        description: value.description,
+        staticFee: 0,
+        minimumFee: 0,
+        rollups: value.rollups,
         transactionType: '',
-      };
-    });
-  
-    setTransactionTypes(typesTransactions);
+      }
+    })
+
+    setTransactionTypes(typesTransactions)
   }
-  
 
   /**
    * Initializes the EVM instance.

lib/useActions.tsx

@@ -1,7 +1,7 @@
 import { useRouter } from 'next/router'
+import { useTheme } from 'next-themes'
 
 import { GITHUB_REPO_URL } from 'util/constants'
-import { useTheme } from 'next-themes'
 
 import { Icon } from 'components/ui'