Store compilation details for opened files

apps/remix-ide/src/app/tabs/compile-tab.js

@@ -51,9 +51,9 @@ class CompileTab extends CompilerApiMixin(ViewPlugin) { // implements ICompilerA
     this.renderComponent()
   }
 
-  onResetResults () {
-    this.renderComponent()
-  }
+  // onResetResults () {
+  //   this.renderComponent()
+  // }
 
   onSetWorkspace () {
     this.renderComponent()
@@ -86,7 +86,6 @@ class CompileTab extends CompilerApiMixin(ViewPlugin) { // implements ICompilerA
   }
 
   getFileManagerMode () {
-    this.emit()
     return this.fileManager.mode
   }
 

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

@@ -4,21 +4,22 @@ import type { ConfigurationSettings } from '@remix-project/remix-lib-ts'
 
 export const CompilerApiMixin = (Base) => class extends Base {
   currentFile: string
-  contractMap: {
-    file: string
-  } | Record<string, any>
-
+  compilationDetails: {
+    contractMap: {
+      file: string
+    } | Record<string, any>,
+    contractsDetails: Record<string, any>,
+    target?: string
+  }
   compileErrors: any
   compileTabLogic: CompileTabLogic
-  contractsDetails: Record<string, any>
-
   configurationSettings: ConfigurationSettings
 
   onCurrentFileChanged: (fileName: string) => void
-  onResetResults: () => void
+  // onResetResults: () => void
   onSetWorkspace: (workspace: any) => void
   onNoFileSelected: () => void
-  onCompilationFinished: (contractsDetails: any, contractMap: any) => void
+  onCompilationFinished: (compilationDetails: { contractMap: { file: string } | Record<string, any>, contractsDetails: Record<string, any> }) => void
   onSessionSwitched: () => void
   onContentChanged: () => void
   onFileClosed: (name: string) => void
@@ -33,15 +34,15 @@ export const CompilerApiMixin = (Base) => class extends Base {
       contractEl: null
     }
 
-    this.contractsDetails = {}
+    this.compilationDetails = {
+      contractsDetails:{},
+      contractMap: {}
+    }
     this.data = {
       eventHandlers: {},
       loading: false
     }
 
-    this.contractMap = {}
-    this.contractsDetails = {}
-
     this.compileErrors = {}
     this.compiledFileName = ''
     this.currentFile = ''
@@ -190,9 +191,12 @@ export const CompilerApiMixin = (Base) => class extends Base {
 
   resetResults () {
     this.currentFile = ''
-    this.contractsDetails = {}
+    this.compilationDetails = {
+      contractsDetails: {},
+      contractMap: {}
+    }
     this.statusChanged({ key: 'none' })
-    if (this.onResetResults) this.onResetResults()
+    // if (this.onResetResults) this.onResetResults()
   }
 
   listenToEvents () {
@@ -270,9 +274,9 @@ export const CompilerApiMixin = (Base) => class extends Base {
           })
         } else this.statusChanged({ key: 'succeed', title: 'compilation successful', type: 'success' })
         // Store the contracts
-        this.contractsDetails = {}
+        this.compilationDetails.contractsDetails = {}
         this.compiler.visitContracts((contract) => {
-          this.contractsDetails[contract.name] = parseContracts(
+          this.compilationDetails.contractsDetails[contract.name] = parseContracts(
             contract.name,
             contract.object,
             this.compiler.getSource(contract.file)
@@ -283,9 +287,10 @@ export const CompilerApiMixin = (Base) => class extends Base {
         this.statusChanged({ key: count, title: `compilation failed with ${count} error${count > 1 ? 's' : ''}`, type: 'error' })
       }
       // Update contract Selection
-      this.contractMap = {}
-      if (success) this.compiler.visitContracts((contract) => { this.contractMap[contract.name] = contract })
-      if (this.onCompilationFinished) this.onCompilationFinished(this.contractsDetails, this.contractMap)
+      this.compilationDetails.contractMap = {}
+      if (success) this.compiler.visitContracts((contract) => { this.compilationDetails.contractMap[contract.name] = contract })
+      this.compilationDetails.target = source.target
+      if (this.onCompilationFinished) this.onCompilationFinished(this.compilationDetails)
     }
     this.compiler.event.register('compilationFinished', this.data.eventHandlers.onCompilationFinished)
 

libs/remix-lib/src/types/ICompilerApi.ts

@@ -1,11 +1,14 @@
 export interface ICompilerApi {
     currentFile: string
-    contractMap: {
-      file: string
-    } | Record<string, any>
+    compilationDetails: {
+        contractMap: {
+            file: string
+        } | Record<string, any>,
+        contractsDetails: Record<string, any>,
+        target?: string
+    }
     compileErrors: any
     compileTabLogic: any
-    contractsDetails: Record<string, any>
     configurationSettings: ConfigurationSettings
 
     getCompilerParameters: () => ConfigurationSettings
@@ -20,7 +23,7 @@ export interface ICompilerApi {
     getCompilationResult: () => any
 
     onCurrentFileChanged: (fileName: string) => void
-    onResetResults: () => void,
+    // onResetResults: () => void,
     onSetWorkspace: (workspace: any) => void
     onNoFileSelected: () => void
     onCompilationFinished: (contractsDetails: any, contractMap: any) => void
@@ -39,7 +42,7 @@ export interface ICompilerApi {
 
     compileWithHardhat: (configPath: string) => Promise<string>
     statusChanged: (data: { key: string, title?: string, type?: string }) => void,
-    emit: (key: string, ...payload: any) => void
+    emit?: (key: string, ...payload: any) => void
 }
 
 export type terminalLog = {

libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx

@@ -37,7 +37,7 @@ export const ModalDialog = (props: ModalDialogProps) => {
       modal.current.addEventListener('blur', handleBlur)
     }
     return () => {
-      modal.current.removeEventListener('blur', handleBlur)
+      modal.current && modal.current.removeEventListener('blur', handleBlur)
     }
   }, [modal.current])
 

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

@@ -7,32 +7,18 @@ import { CopyToClipboard } from '@remix-ui/clipboard' // eslint-disable-line
 import './css/style.css'
 
 export const ContractSelection = (props: ContractSelectionProps) => {
-  const { api, contractMap, contractsDetails, modal } = props
-  const [contractList, setContractList] = useState([])
+  const { api, contractsDetails, contractList, modal } = props
   const [selectedContract, setSelectedContract] = useState('')
   const [storage, setStorage] = useState(null)
 
   useEffect(() => {
-    const contractList = contractMap ? Object.keys(contractMap).map((key) => ({
-      name: key,
-      file: getFileName(contractMap[key].file)
-    })) : []
-
-    setContractList(contractList)
     if (contractList.length) setSelectedContract(contractList[0].name)
-  }, [contractMap, contractsDetails])
+  }, [contractList])
 
   const resetStorage = () => {
     setStorage('')
   }
 
-  // Return the file name of a path: ex "browser/ballot.sol" -> "ballot.sol"
-  const getFileName = (path) => {
-    const part = path.split('/')
-
-    return part[part.length - 1]
-  }
-
   const handleContractChange = (contractName: string) => {
     setSelectedContract(contractName)
   }
@@ -214,13 +200,13 @@ export const ContractSelection = (props: ContractSelectionProps) => {
             <div className="remixui_contractHelperButtons">
               <div className="input-group">
                 <div className="btn-group" role="group" aria-label="Copy to Clipboard">
-                  <CopyToClipboard title="Copy ABI to clipboard" content={copyABI()} direction='top'>
+                  <CopyToClipboard title="Copy ABI to clipboard" getContent={copyABI} direction='top'>
                     <button className="btn remixui_copyButton" title="Copy ABI to clipboard">
                       <i className="remixui_copyIcon far fa-copy" aria-hidden="true"></i>
                       <span>ABI</span>
                     </button>
                   </CopyToClipboard>
-                  <CopyToClipboard title="Copy ABI to clipboard" content={copyBytecode()} direction='top'>
+                  <CopyToClipboard title="Copy ABI to clipboard" getContent={copyBytecode} direction='top'>
                     <button className="btn remixui_copyButton" title="Copy Bytecode to clipboard">
                       <i className="remixui_copyIcon far fa-copy" aria-hidden="true"></i>
                       <span>Bytecode</span>

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react' // eslint-disable-line
-import { CompileErrors, SolidityCompilerProps } from './types'
+import { CompileErrors, ContractsFile, SolidityCompilerProps } from './types'
 import { CompilerContainer } from './compiler-container' // eslint-disable-line
 import { ContractSelection } from './contract-selection' // eslint-disable-line
 import { Toaster } from '@remix-ui/toaster' // eslint-disable-line
@@ -9,12 +9,10 @@ import { Renderer } from '@remix-ui/renderer' // eslint-disable-line
 import './css/style.css'
 
 export const SolidityCompiler = (props: SolidityCompilerProps) => {
-  const { api, api: { currentFile, compileTabLogic, contractsDetails, contractMap, configurationSettings } } = props
+  const { api, api: { currentFile, compileTabLogic, configurationSettings } } = props
   const [state, setState] = useState({
     isHardhatProject: false,
     currentFile,
-    contractsDetails: {},
-    contractMap: {},
     loading: false,
     compileTabLogic: null,
     compiler: null,
@@ -34,6 +32,7 @@ export const SolidityCompiler = (props: SolidityCompilerProps) => {
   const [hideWarnings, setHideWarnings] = useState<boolean>(false)
   const [compileErrors, setCompileErrors] = useState<Record<string, CompileErrors>>({ [currentFile]: api.compileErrors })
   const [badgeStatus, setBadgeStatus] = useState<Record<string, { key: string, title?: string, type?: string }>>({})
+  const [contractsFile, setContractsFile] = useState<ContractsFile>({})
 
   useEffect(() => {
     (async () => {
@@ -50,15 +49,16 @@ export const SolidityCompiler = (props: SolidityCompilerProps) => {
     }
   }, [badgeStatus[currentFile], currentFile])
 
-  api.onCurrentFileChanged = (currentFile: string) => {
-    setState(prevState => {
-      return { ...prevState, currentFile }
-    })
+  // Return the file name of a path: ex "browser/ballot.sol" -> "ballot.sol"
+  const getFileName = (path) => {
+    const part = path.split('/')
+
+    return part[part.length - 1]
   }
 
-  api.onResetResults = () => {
+  api.onCurrentFileChanged = (currentFile: string) => {
     setState(prevState => {
-      return { ...prevState, currentFile: '', contractsDetails: {}, contractMap: {} }
+      return { ...prevState, currentFile }
     })
   }
 
@@ -76,10 +76,16 @@ export const SolidityCompiler = (props: SolidityCompilerProps) => {
     setCompileErrors({} as Record<string, CompileErrors>)
   }
 
-  api.onCompilationFinished = (contractsDetails: any, contractMap: any) => {
-    setState(prevState => {
-      return { ...prevState, contractsDetails, contractMap }
-    })
+  api.onCompilationFinished = (compilationDetails: { contractMap: { file: string } | Record<string, any>, contractsDetails: Record<string, any>, target?: string }) => {
+    const { contractMap, contractsDetails, target } = compilationDetails
+    const contractList = contractMap ? Object.keys(contractMap).map((key) => {
+      return {
+        name: key,
+        file: getFileName(contractMap[key].file)
+        }
+    }) : []
+
+    setContractsFile({ ...contractsFile, [target]: { contractList, contractsDetails } })
     setCompileErrors({ ...compileErrors, [currentFile]: api.compileErrors })
   }
 
@@ -143,7 +149,7 @@ export const SolidityCompiler = (props: SolidityCompilerProps) => {
     <>
       <div id="compileTabView">
         <CompilerContainer api={api} isHardhatProject={state.isHardhatProject} compileTabLogic={compileTabLogic} tooltip={toast} modal={modal} compiledFileName={currentFile} updateCurrentVersion={updateCurrentVersion} configurationSettings={configurationSettings} />
-        <ContractSelection api={api} contractMap={contractMap} contractsDetails={contractsDetails} modal={modal} />
+        { contractsFile[currentFile] && contractsFile[currentFile].contractsDetails && <ContractSelection api={api} contractsDetails={contractsFile[currentFile].contractsDetails} contractList={contractsFile[currentFile].contractList} modal={modal} /> }
         { compileErrors[currentFile] &&
           <div className="remixui_errorBlobs p-4" data-id="compiledErrors">
             <span data-id={`compilationFinishedWith_${currentVersion}`}></span>

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

@@ -18,9 +18,7 @@ export interface CompilerContainerProps {
 }
 export interface ContractSelectionProps {
   api: ICompilerApi,
-  contractMap: {
-    file: string
-  } | Record<string, any>,
+  contractList: { file: string, name: string }[],
   modal: (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => void,
   contractsDetails: Record<string, any>
 }
@@ -31,7 +29,19 @@ interface CompileError {
   formattedMessage?: string,
   type?: string
 }
+
 export interface CompileErrors {
   error: CompileError,
   errors: CompileError[]
 }
+
+export interface CompilationDetails {
+  contractList: { file: string, name: string }[],
+  contractsDetails: Record<string, any>,
+  target?: string
+}
+
+export interface ContractsFile {
+ [currentFile: string]: CompilationDetails
+}
+