Basic select compiled contract name

Author: kuzdogan

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

@@ -9,4 +9,5 @@ export const AppContext = React.createContext({
   chains: [],
   selectedChain: null,
   setSelectedChain: (chain: string) => {},
+  contractNames: [],
 })

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

@@ -8,24 +8,49 @@ import {CustomTooltip} from '@remix-ui/helper'
 import {ThemeType} from './types'
 
 import './App.css'
+import {CompilationFileSources, CompilationResult} from '@remixproject/plugin-api'
 
 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)
+  const [targetFileName, setTargetFileName] = useState('')
+  const [contractNames, setContractNames] = useState([])
 
   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
+    // Because of this reason we use @ts-expect-error for the next line
+    // @ts-expect-error:next-line
+    plugin.on('solidity', 'compilationFinished', (fileName: string, source: CompilationFileSources, languageVersion: string, data: CompilationResult, input: string, version: string) => {
+      console.log('Compilation output')
+      console.log(data)
+      console.log('File Name:', fileName)
+      console.log('Source:', source)
+      console.log('Language Version:', languageVersion)
+      console.log('Compilation Result:', data)
+      // console.log('Input:', input)
+      console.log('Compiler Version:', version)
+      console.log('contractNames')
+      console.log(Object.keys(data.contracts[fileName]))
+
+      setTargetFileName(fileName)
+      setContractNames(Object.keys(data.contracts[fileName]))
+    })
     // Fetch chains.json and update state
     fetch('https://chainid.network/chains.json')
       .then((response) => response.json())
       .then((data) => setChains(data))
       .catch((error) => console.error('Failed to fetch chains.json:', error))
+
+    return () => {
+      plugin.off('solidity', 'compilationFinished') // Clean up on unmount
+    }
   }, [])
 
   return (
-    <AppContext.Provider value={{themeType, setThemeType, chains, selectedChain, setSelectedChain}}>
+    <AppContext.Provider value={{themeType, setThemeType, chains, selectedChain, setSelectedChain, contractNames}}>
       <DisplayRoutes />
     </AppContext.Provider>
   )

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

@@ -5,7 +5,7 @@ import {Dropdown} from '../components'
 import {SearchableDropdown} from '../components'
 
 export const HomeView = () => {
-  const {chains, selectedChain, setSelectedChain} = React.useContext(AppContext)
+  const {chains, selectedChain, setSelectedChain, contractNames} = React.useContext(AppContext)
 
   const ethereumChainIds = [1, 3, 4, 5, 11155111, 17000]
 
@@ -39,15 +39,7 @@ export const HomeView = () => {
           <input type="text" className="form-control" id="contract-address" placeholder="0x2738d13E81e..." />
         </div>
 
-        <Dropdown
-          label="Contract Name"
-          items={[
-            {value: 'ERC20', name: 'ERC20'},
-            {value: 'ERC721', name: 'ERC721'},
-            {value: 'ERC1155', name: 'ERC1155'},
-          ]}
-          id="contract-name-dropdown"
-        />
+        {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 */}