Fetch compilation outputs from `compilerArtefacts` module

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

@@ -1,6 +1,6 @@
 import React from 'react'
 import {ThemeType} from './types'
-import {CompilationResult} from '@remixproject/plugin-api'
+import {CompilationResult, CompiledContract} from '@remixproject/plugin-api'
 
 // Define the type for the context
 type AppContextType = {
@@ -10,6 +10,9 @@ type AppContextType = {
   selectedChain: any | undefined
   setSelectedChain: (chain: string) => void
   compilationOutput: CompilationResult | undefined
+  selectedContract: CompiledContract | undefined
+  setSelectedContract: (contract: CompiledContract) => void
+  targetFileName: string | undefined
 }
 
 // Provide a default value with the appropriate types
@@ -22,6 +25,9 @@ const defaultContextValue: AppContextType = {
   selectedChain: undefined,
   setSelectedChain: (chain: string) => {},
   compilationOutput: undefined,
+  selectedContract: undefined,
+  setSelectedContract: (contract: CompiledContract) => {},
+  targetFileName: undefined,
 }
 
 // Create the context with the type

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

@@ -8,7 +8,7 @@ import {CustomTooltip} from '@remix-ui/helper'
 import {ThemeType} from './types'
 
 import './App.css'
-import {CompilationFileSources, CompilationResult} from '@remixproject/plugin-api'
+import {CompilationFileSources, CompilationResult, CompiledContract} from '@remixproject/plugin-api'
 
 const plugin = new ContractVerificationPluginClient()
 
@@ -19,39 +19,65 @@ const App = () => {
   const [selectedChain, setSelectedChain] = useState<any | undefined>()
   const [targetFileName, setTargetFileName] = useState('')
   const [compilationOutput, setCompilationOutput] = useState<CompilationResult | undefined>()
+  const [selectedContract, setSelectedContract] = useState<CompiledContract | 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
     // 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')
+    // // @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)
+    //   setCompilationOutput(data)
+    // })
+
+    // plugin.call('compilerArtefacts', 'getAllContractDatas').then((allContractDatas: any) => {
+    //   console.log('compilerArtefacts.getAllContractDatas')
+    //   console.log(allContractDatas)
+    //   const files = Object.keys(allContractDatas)
+    //   files.forEach((file) => {
+    //     //
+    //     plugin.call('compilerArtefacts' as any, 'getCompilerAbstract', file).then((data: any) => {
+    //       console.log('compilerArtefacts.getCompilerAbstract ' + file)
+    //       console.log(data)
+    //     })
+    //   })
+    // })
+
+    // // TODO: why "as any" needed here
+    // plugin.call('compilerArtefacts' as any, 'getLastCompilationResult').then((data: any) => {
+    //   console.log('compilerArtefacts.getLastCompilationResult')
+    //   console.log(data)
+    // })
+
+    plugin.call('compilerArtefacts' as any, 'getAllCompilerAbstracts').then((data: any) => {
+      console.log('compilerArtefacts.getAllCompilerAbstracts')
       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)
-      setCompilationOutput(undefined)
+      setCompilationOutput(data)
     })
+
     // 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, compilationOutput}}>
+    <AppContext.Provider value={{themeType, setThemeType, chains, selectedChain, setSelectedChain, compilationOutput, selectedContract, setSelectedContract, targetFileName}}>
       <DisplayRoutes />
     </AppContext.Provider>
   )

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

@@ -1,5 +1,6 @@
-import React from 'react'
+import React, {useEffect, useState, useContext} from 'react'
 import './ContractDropdown.css'
+import {AppContext} from '../AppContext'
 interface ContractDropdownItem {
   value: string
   name: string
@@ -11,19 +12,38 @@ interface ContractDropdownProps {
   id: string
 }
 
-export const ContractDropdown: React.FC<ContractDropdownProps> = ({label, contractNames, id}) => {
-  const hasContracts = contractNames && contractNames.length > 0
+// Chooses one contract from the compilation output.
+export const ContractDropdown: React.FC<ContractDropdownProps> = ({label, id}) => {
+  const {setSelectedContract, compilationOutput} = useContext(AppContext)
+  const [chosenContractFileAndName, setChosenContractFileAndName] = useState('')
+
+  useEffect(() => {
+    console.log('CompiilationOutput chainged', compilationOutput)
+  }, [compilationOutput])
+
+  const handleSelectContract = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    console.log('contractName', event.target.value)
+  }
+
+  const hasContracts = compilationOutput && Object.keys(compilationOutput).length > 0
+
   return (
     <div className="form-group">
       <label htmlFor={id}>{label}</label>
 
-      <select className={`form-control custom-select pr-4 ${!hasContracts ? 'disabled-cursor' : ''}`} id={id} disabled={!hasContracts}>
+      <select className={`form-control custom-select pr-4 ${!hasContracts ? 'disabled-cursor' : ''}`} id={id} disabled={!hasContracts} onChange={handleSelectContract}>
         {hasContracts ? (
-          contractNames.map((item, index) => (
-            <option value={item.value} key={index}>
-              {item.name}
-            </option>
-          ))
+          Object.keys(compilationOutput).map((fileName) =>
+            Object.keys(compilationOutput[fileName].data.contracts).map((fileName2) => (
+              <optgroup key={fileName2 + '-lower'} label={fileName2}>
+                {Object.keys(compilationOutput[fileName].data.contracts[fileName2]).map((contractName) => (
+                  <option key={fileName2 + ':' + contractName} value={fileName2 + ':' + contractName}>
+                    {contractName}
+                  </option>
+                ))}
+              </optgroup>
+            ))
+          )
         ) : (
           <option>No Compiled Contracts. Please compile and select a contract</option>
         )}