From c2b185dc0258a4accd1bcebee86e9404244f196a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kaan=20Uzdo=C4=9Fan?= Date: Fri, 14 Jun 2024 11:53:55 +0200 Subject: [PATCH] Fetch compilation outputs from `compilerArtefacts` module --- .../src/app/AppContext.tsx | 8 ++- apps/contract-verification/src/app/app.tsx | 60 +++++++++++++------ .../app/components/ConstructorArguments.tsx | 0 .../src/app/components/ContractDropdown.tsx | 38 +++++++++--- 4 files changed, 79 insertions(+), 27 deletions(-) create mode 100644 apps/contract-verification/src/app/components/ConstructorArguments.tsx diff --git a/apps/contract-verification/src/app/AppContext.tsx b/apps/contract-verification/src/app/AppContext.tsx index 4106ffbb5c..70d1056dbc 100644 --- a/apps/contract-verification/src/app/AppContext.tsx +++ b/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 diff --git a/apps/contract-verification/src/app/app.tsx b/apps/contract-verification/src/app/app.tsx index cbae61b49d..b54815eb9f 100644 --- a/apps/contract-verification/src/app/app.tsx +++ b/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() const [targetFileName, setTargetFileName] = useState('') const [compilationOutput, setCompilationOutput] = useState() + const [selectedContract, setSelectedContract] = 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') + // // @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 ( - + ) diff --git a/apps/contract-verification/src/app/components/ConstructorArguments.tsx b/apps/contract-verification/src/app/components/ConstructorArguments.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/apps/contract-verification/src/app/components/ContractDropdown.tsx b/apps/contract-verification/src/app/components/ContractDropdown.tsx index 2dea4a32cc..f54d28cd8d 100644 --- a/apps/contract-verification/src/app/components/ContractDropdown.tsx +++ b/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 = ({label, contractNames, id}) => { - const hasContracts = contractNames && contractNames.length > 0 +// Chooses one contract from the compilation output. +export const ContractDropdown: React.FC = ({label, id}) => { + const {setSelectedContract, compilationOutput} = useContext(AppContext) + const [chosenContractFileAndName, setChosenContractFileAndName] = useState('') + + useEffect(() => { + console.log('CompiilationOutput chainged', compilationOutput) + }, [compilationOutput]) + + const handleSelectContract = (event: React.ChangeEvent) => { + console.log('contractName', event.target.value) + } + + const hasContracts = compilationOutput && Object.keys(compilationOutput).length > 0 + return (
- {hasContracts ? ( - contractNames.map((item, index) => ( - - )) + Object.keys(compilationOutput).map((fileName) => + Object.keys(compilationOutput[fileName].data.contracts).map((fileName2) => ( + + {Object.keys(compilationOutput[fileName].data.contracts[fileName2]).map((contractName) => ( + + ))} + + )) + ) ) : ( )}