Fix types for contract-verification-plugin

Author: kuzdogan

apps/contract-verification/src/app/AppContext.tsx

@@ -1,13 +1,28 @@
 import React from 'react'
 import {ThemeType} from './types'
+import {CompilationResult} from '@remixproject/plugin-api'
 
-export const AppContext = React.createContext({
-  themeType: 'dark' as ThemeType,
+// Define the type for the context
+type AppContextType = {
+  themeType: ThemeType
+  setThemeType: (themeType: ThemeType) => void
+  chains: any[]
+  selectedChain: any | undefined
+  setSelectedChain: (chain: string) => void
+  compilationOutput: CompilationResult | undefined
+}
+
+// Provide a default value with the appropriate types
+const defaultContextValue: AppContextType = {
+  themeType: 'dark',
   setThemeType: (themeType: ThemeType) => {
     console.log('Calling Set Theme Type')
   },
   chains: [],
-  selectedChain: null,
+  selectedChain: undefined,
   setSelectedChain: (chain: string) => {},
-  contractNames: [],
-})
+  compilationOutput: undefined,
+}
+
+// Create the context with the type
+export const AppContext = React.createContext<AppContextType>(defaultContextValue)

apps/contract-verification/src/app/app.tsx

@@ -14,10 +14,11 @@ const plugin = new ContractVerificationPluginClient()
 
 const App = () => {
   const [themeType, setThemeType] = useState<ThemeType>('dark')
-  const [chains, setChains] = useState([]) // State to hold the chains data
-  const [selectedChain, setSelectedChain] = useState(null)
+  // TODO: Types for chains
+  const [chains, setChains] = useState<any>([]) // State to hold the chains data
+  const [selectedChain, setSelectedChain] = useState<any | undefined>()
   const [targetFileName, setTargetFileName] = useState('')
-  const [contractNames, setContractNames] = useState([])
+  const [compilationOutput, setCompilationOutput] = useState<CompilationResult | undefined>()
 
   useEffect(() => {
     // TODO: Fix 'compilationFinished' event types. The interface is outdated at https://github.com/ethereum/remix-plugin/blob/master/packages/api/src/lib/compiler/api.ts. It does not include data, input, or version. See the current parameters: https://github.com/ethereum/remix-project/blob/9f6c5be882453a555055f07171701459e4ae88a4/libs/remix-solidity/src/compiler/compiler.ts#L189
@@ -36,7 +37,7 @@ const App = () => {
       console.log(Object.keys(data.contracts[fileName]))
 
       setTargetFileName(fileName)
-      setContractNames(Object.keys(data.contracts[fileName]))
+      setCompilationOutput(undefined)
     })
     // Fetch chains.json and update state
     fetch('https://chainid.network/chains.json')
@@ -50,7 +51,7 @@ const App = () => {
   }, [])
 
   return (
-    <AppContext.Provider value={{themeType, setThemeType, chains, selectedChain, setSelectedChain, contractNames}}>
+    <AppContext.Provider value={{themeType, setThemeType, chains, selectedChain, setSelectedChain, compilationOutput}}>
       <DisplayRoutes />
     </AppContext.Provider>
   )

apps/contract-verification/src/app/layouts/Default.tsx

@@ -7,7 +7,7 @@ interface Props {
   title?: string
 }
 
-export const DefaultLayout = ({children, from, title}) => {
+export const DefaultLayout = ({children}: PropsWithChildren<Props>) => {
   return (
     <div>
       <NavMenu />

apps/contract-verification/src/app/views/HomeView.tsx

@@ -5,10 +5,12 @@ import {Dropdown} from '../components'
 import {SearchableDropdown} from '../components'
 
 export const HomeView = () => {
-  const {chains, selectedChain, setSelectedChain, contractNames} = React.useContext(AppContext)
+  const {chains, selectedChain, setSelectedChain, compilationOutput} = React.useContext(AppContext)
 
   const ethereumChainIds = [1, 3, 4, 5, 11155111, 17000]
 
+  const contractNames = compilationOutput?.contracts && Object.keys(compilationOutput?.contracts)
+
   // Add Ethereum chains to the head of the chains list. Sort the rest alphabetically
   const dropdownChains = chains
     .map((chain) => ({value: chain.chainId, name: `${chain.title || chain.name} (${chain.chainId})`}))
@@ -39,7 +41,7 @@ export const HomeView = () => {
           <input type="text" className="form-control" id="contract-address" placeholder="0x2738d13E81e..." />
         </div>
 
-        {contractNames.length > 0 ? <Dropdown label="Contract Name" items={contractNames.map((item) => ({value: item, name: item}))} id="contract-name-dropdown" /> : <div> No compiled contracts </div>}
+        {contractNames && contractNames.length > 0 ? <Dropdown label="Contract Name" items={contractNames.map((item) => ({value: item, name: item}))} id="contract-name-dropdown" /> : <div> No compiled contracts </div>}
         <div>
           <div>Constructor Arguments</div>
           {/* TODO: Add input fields for constructor arguments */}