show compiler input in details

apps/solidity-compiler/src/app/compiler-api.ts

@@ -10,7 +10,8 @@ export const CompilerApiMixin = (Base) => class extends Base {
       file: string
     } | Record<string, any>,
     contractsDetails: Record<string, any>,
-    target?: string
+    target?: string,
+    input?: Record<string, any>,
   }
   compileErrors: any
   compileTabLogic: CompileTabLogic
@@ -296,6 +297,7 @@ export const CompilerApiMixin = (Base) => class extends Base {
       // Store the contracts and Update contract Selection
       if (success) {
         this.compilationDetails = await this.visitsContractApi(source, data)
+        this.compilationDetails.input = input
       } else {
         this.compilationDetails = {
           contractMap: {},

libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx

@@ -9,7 +9,7 @@ import './css/style.css'
 import { CustomTooltip } from '@remix-ui/helper'
 
 export const ContractSelection = (props: ContractSelectionProps) => {
-  const { api, compiledFileName, contractsDetails, contractList, modal } = props
+  const { api, compiledFileName, contractsDetails, contractList, compilerInput, modal } = props
   const [selectedContract, setSelectedContract] = useState('')
   const [storage, setStorage] = useState(null)
 
@@ -111,7 +111,7 @@ export const ContractSelection = (props: ContractSelectionProps) => {
     let node
     if (propertyName === 'web3Deploy' || propertyName === 'name' || propertyName === 'Assembly') {
       node = <pre>{ details[propertyName] }</pre>
-    } else if (details[propertyName] && (propertyName === 'abi' || propertyName === 'metadata')) {
+    } else if (details[propertyName] && (propertyName === 'abi' || propertyName === 'metadata' || propertyName === 'compilerInput')) {
       if (details[propertyName] !== '') {
         try {
           node = <div>
@@ -147,6 +147,7 @@ export const ContractSelection = (props: ContractSelectionProps) => {
       Opcodes: 'Assembly opcodes describing the contract',
       'Runtime Bytecode': 'Bytecode storing the state and being executed during normal contract call',
       bytecode: 'Bytecode being executed during contract creation',
+      compilerInput: 'Input to the Solidity compiler',
       functionHashes: 'List of declared function and their corresponding hash',
       gasEstimates: 'Gas estimation for each function call',
       metadata: 'Contains all informations related to the compilation',
@@ -156,7 +157,8 @@ export const ContractSelection = (props: ContractSelectionProps) => {
       swarmLocation: 'Swarm url where all metadata information can be found (contract needs to be published first)',
       web3Deploy: 'Copy/paste this code to any JavaScript/Web3 console to deploy this contract'
     }
-    const contractProperties = contractsDetails[selectedContract] || {}
+    let contractProperties = contractsDetails[selectedContract] || {}
+    contractProperties.compilerInput = compilerInput
     const log = <div className="remixui_detailsJSON">
       <TreeView>
         {

libs/remix-ui/solidity-compiler/src/lib/solidity-compiler.tsx

@@ -89,8 +89,8 @@ export const SolidityCompiler = (props: SolidityCompilerProps) => {
     setCompileErrors({} as Record<string, CompileErrors>)
   }
 
-  api.onCompilationFinished = (compilationDetails: { contractMap: { file: string } | Record<string, any>, contractsDetails: Record<string, any>, target?: string }) => {
-    const { contractMap, contractsDetails, target } = compilationDetails
+  api.onCompilationFinished = (compilationDetails: { contractMap: { file: string } | Record<string, any>, contractsDetails: Record<string, any>, target?: string, input?: Record<string, any>}) => {
+    const { contractMap, contractsDetails, target, input } = compilationDetails
     const contractList = contractMap ? Object.keys(contractMap).map((key) => {
       return {
         name: key,
@@ -98,7 +98,7 @@ export const SolidityCompiler = (props: SolidityCompilerProps) => {
       }
     }) : []
 
-    setContractsFile({ ...contractsFile, [target]: { contractList, contractsDetails } })
+    setContractsFile({ ...contractsFile, [target]: { contractList, contractsDetails, input } })
     setCompileErrors({ ...compileErrors, [currentFile]: api.compileErrors })
   }
 
@@ -184,7 +184,7 @@ export const SolidityCompiler = (props: SolidityCompilerProps) => {
           setConfigFilePath={setConfigFilePath}
         />
 
-        {contractsFile[currentFile] && contractsFile[currentFile].contractsDetails && <ContractSelection api={api} compiledFileName={currentFile} contractsDetails={contractsFile[currentFile].contractsDetails} contractList={contractsFile[currentFile].contractList} modal={modal} />}
+        {contractsFile[currentFile] && contractsFile[currentFile].contractsDetails && <ContractSelection api={api} compiledFileName={currentFile} contractsDetails={contractsFile[currentFile].contractsDetails} contractList={contractsFile[currentFile].contractList} compilerInput={contractsFile[currentFile].input} modal={modal} />}
         {compileErrors[currentFile] &&
           <div className="remixui_errorBlobs p-4" data-id="compiledErrors">
             <>

libs/remix-ui/solidity-compiler/src/lib/types/index.ts

@@ -25,6 +25,7 @@ export interface ContractSelectionProps {
   api: ICompilerApi,
   compiledFileName: string,
   contractList: { file: string, name: string }[],
+  compilerInput: Record<string, any>
   modal: (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => void,
   contractsDetails: Record<string, any>
 }
@@ -44,7 +45,8 @@ export interface CompileErrors {
 export interface CompilationDetails {
   contractList: { file: string, name: string }[],
   contractsDetails: Record<string, any>,
-  target?: string
+  target?: string,
+  input?: Record<string, any>
 }
 
 export interface ContractsFile {