Enable hardhat compilation

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

@@ -67,6 +67,7 @@ class CompileTab extends ViewPlugin {
     this.compiler = this.compileTabLogic.compiler
     this.compileTabLogic.init()
     this.contractMap = {}
+    this.isHardHatProject = false
 
     this.el = document.createElement('div')
     this.el.setAttribute('id', 'compileTabView')
@@ -84,13 +85,6 @@ class CompileTab extends ViewPlugin {
    */
 
   listenToEvents () {
-    this.on('filePanel', 'setWorkspace', (workspace) => {
-      this.compileTabLogic.isHardhatProject().then((result) => {
-        if (result && workspace.isLocalhost) this.compilerContainer.hardhatCompilation.style.display = 'flex'
-        else this.compilerContainer.hardhatCompilation.style.display = 'none'
-      })
-    })
-
     this.data.eventHandlers.onContentChanged = () => {
       this.emit('statusChanged', { key: 'edited', title: 'the content has changed, needs recompilation', type: 'info' })
     }
@@ -116,7 +110,14 @@ class CompileTab extends ViewPlugin {
       this.call('editor', 'clearAnnotations')
     }
 
-    this.on('filePanel', 'setWorkspace', () => this.resetResults())
+    this.on('filePanel', 'setWorkspace', (workspace) => {
+      this.compileTabLogic.isHardhatProject().then((result) => {
+        if (result && workspace.isLocalhost) this.isHardHatProject = true
+        else this.isHardHatProject = false
+        this.renderComponent()
+      })
+      this.resetResults()
+    })
 
     this.compileTabLogic.event.on('startingCompilation', this.data.eventHandlers.onStartingCompilation)
     this.compileTabLogic.event.on('removeAnnotations', this.data.eventHandlers.onRemoveAnnotations)
@@ -284,9 +285,10 @@ class CompileTab extends ViewPlugin {
         compileTabLogic={this.compileTabLogic}
         compiledFileName={this.currentFile}
         contractsDetails={this.contractsDetails}
-        setHardHatCompilation={this.setHardHatCompilation}
+        setHardHatCompilation={this.setHardHatCompilation.bind(this)}
         contractMap={this.contractMap}
         compileErrors={this.compileErrors || {}}
+        isHardHatProject={this.isHardHatProject}
       />
       , this.el)
   }

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

@@ -7,7 +7,7 @@ import { canUseWorker, baseURLBin, baseURLWasm, urlFromVersion, pathToURL, promi
 import './css/style.css'
 
 export const CompilerContainer = (props: CompilerContainerProps) => {
-  const { editor, config, queryParams, compileTabLogic, tooltip, modal, compiledFileName, setHardHatCompilation, updateCurrentVersion } = props // eslint-disable-line
+  const { editor, config, queryParams, compileTabLogic, tooltip, modal, compiledFileName, setHardHatCompilation, updateCurrentVersion, isHardHatProject } = props // eslint-disable-line
   const [state, setState] = useState({
     hideWarnings: false,
     autoCompile: false,
@@ -53,8 +53,6 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
   useEffect(() => {
     if (compileTabLogic && compileTabLogic.compiler) {
       compileTabLogic.compiler.event.register('compilerLoaded', compilerLoaded)
-
-      console.log(`${config.get('autoCompile') || false}`)
       setState(prevState => {
         return {
           ...prevState,
@@ -513,10 +511,12 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
               <label className="form-check-label custom-control-label" htmlFor="hideWarningsBox">Hide warnings</label>
             </div>
           </div>
-          <div className="mt-2 remixui_compilerConfig custom-control custom-checkbox" style={{ display: "none" }}>
+          {
-            <input className="remixui_autocompile custom-control-input" onChange={updatehhCompilation} id="enableHardhat" type="checkbox" title="Enable Hardhat Compilation" checked={hhCompilation} />
+            isHardHatProject && <div className="mt-2 remixui_compilerConfig custom-control custom-checkbox">
-            <label className="form-check-label custom-control-label" htmlFor="enableHardhat">Enable Hardhat Compilation</label>
+              <input className="remixui_autocompile custom-control-input" onChange={updatehhCompilation} id="enableHardhat" type="checkbox" title="Enable Hardhat Compilation" checked={hhCompilation} />
-          </div>
+              <label className="form-check-label custom-control-label" htmlFor="enableHardhat">Enable Hardhat Compilation</label>
+            </div>
+          }
           <button id="compileBtn" data-id="compilerContainerCompileBtn" className="btn btn-primary btn-block remixui_disabled mt-3" title="Compile" onClick={compile} disabled={!state.compiledFileName || (state.compiledFileName && !isSolFileSelected(state.compiledFileName))}>
             <span>
               <i ref={warningIcon} title="Compilation Slow" style={{ visibility: 'hidden' }} className="remixui_warnCompilationSlow fas fa-exclamation-triangle" aria-hidden="true"></i>

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

@@ -66,7 +66,8 @@ export const ContractSelection = (props: ContractSelectionProps) => {
     if (!selectedContract) throw new Error('No contract compiled yet')
     const contractProperties = contractsDetails[selectedContract]
 
-    return contractProperties[property] || null
+    if (contractProperties && contractProperties[property]) return contractProperties[property]
+    return null
   }
 
   const renderData = (item, key: string | number, keyPath: string) => {

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

@@ -9,7 +9,7 @@ import { Renderer } from '@remix-ui/renderer'
 import './css/style.css'
 
 export const SolidityCompiler = (props: SolidityCompilerProps) => {
-  const { editor, config, queryParams, plugin, compileTabLogic, compiledFileName, fileProvider, fileManager, contractsDetails, setHardHatCompilation, contractMap, compileErrors } = props
+  const { editor, config, queryParams, plugin, compileTabLogic, compiledFileName, fileProvider, fileManager, contractsDetails, setHardHatCompilation, contractMap, compileErrors, isHardHatProject } = props
   const [state, setState] = useState({
     contractsDetails: {},
     eventHandlers: {},
@@ -81,19 +81,19 @@ export const SolidityCompiler = (props: SolidityCompilerProps) => {
   return (
     <>
       <div id="compileTabView">
-        <CompilerContainer editor={editor} config={config} queryParams={queryParams} compileTabLogic={compileTabLogic} tooltip={toast} modal={modal} compiledFileName={compiledFileName} setHardHatCompilation={setHardHatCompilation} updateCurrentVersion={updateCurrentVersion} />
+        <CompilerContainer editor={editor} config={config} queryParams={queryParams} compileTabLogic={compileTabLogic} tooltip={toast} modal={modal} compiledFileName={compiledFileName} setHardHatCompilation={setHardHatCompilation} updateCurrentVersion={updateCurrentVersion} isHardHatProject={isHardHatProject} />
         <ContractSelection contractMap={contractMap} fileProvider={fileProvider} fileManager={fileManager} contractsDetails={contractsDetails} modal={modal} />
         <div className="remixui_errorBlobs p-4" data-id="compiledErrors">
           <span data-id={`compilationFinishedWith_${currentVersion}`}></span>
           { compileErrors.error && <Renderer message={compileErrors.error.formattedMessage || compileErrors.error} plugin={plugin} opt={{ type: compileErrors.error.severity || 'error', errorType: compileErrors.error.type }} config={config} /> }
           { compileErrors.error && (compileErrors.error.mode === 'panic') && modal('Error', panicMessage(compileErrors.error.formattedMessage), 'Close', null) }
-          { compileErrors.errors && compileErrors.errors.length && compileErrors.errors.map((err) => {
+          { compileErrors.errors && compileErrors.errors.length && compileErrors.errors.map((err, index) => {
             if (config.get('hideWarnings')) {
               if (err.severity !== 'warning') {
-                return <Renderer message={err.formattedMessage} plugin={plugin} opt={{ type: err.severity, errorType: err.type }} config={config} />
+                return <Renderer key={index} message={err.formattedMessage} plugin={plugin} opt={{ type: err.severity, errorType: err.type }} config={config} />
               }
             } else {
-              return <Renderer message={err.formattedMessage} plugin={plugin} opt={{ type: err.severity, errorType: err.type }} config={config} />
+              return <Renderer key={index} message={err.formattedMessage} plugin={plugin} opt={{ type: err.severity, errorType: err.type }} config={config} />
             }
           }) }
         </div>

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

@@ -14,7 +14,8 @@ export interface SolidityCompilerProps {
   contractMap: {
     file: string
   } | Record<string, any>
-  compileErrors: any
+  compileErrors: any,
+  isHardHatProject: boolean
 }
 
 export interface CompilerContainerProps {
@@ -26,7 +27,8 @@ export interface CompilerContainerProps {
   modal: (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => void,
   compiledFileName: string,
   setHardHatCompilation: (value: boolean) => void,
-  updateCurrentVersion: any
+  updateCurrentVersion: any,
+  isHardHatProject: boolean
 }
 export interface ContractSelectionProps {
   contractMap: {