Merge pull request #1407 from ethereum/fix-compiler

Fix React Compiler

apps/remix-ide-e2e/src/commands/verifyContracts.ts

@@ -22,6 +22,9 @@ function verifyContracts (browser: NightwatchBrowser, compiledContractNames: str
       if (opts.version) {
         browser
           .click('*[data-id="compilation-details"]')
+          .waitForElementVisible('*[data-id="remixui_treeviewitem_metadata"]')
+          .pause(2000)
+          .click('*[data-id="remixui_treeviewitem_metadata"]')
           .waitForElementVisible('*[data-id="treeViewDivtreeViewItemcompiler"]')
           .pause(2000)
           .click('*[data-id="treeViewDivtreeViewItemcompiler"]')

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

@@ -16,6 +16,24 @@ export const ModalDialog = (props: ModalDialogProps) => {
     modal.current.focus()
   }, [props.hide])
 
+  useEffect(() => {
+    function handleBlur (e) {
+      if (!e.currentTarget.contains(e.relatedTarget)) {
+        e.stopPropagation()
+        if (document.activeElement !== this) {
+          handleHide()
+        }
+      }
+    }
+    if (modal.current) {
+      modal.current.addEventListener('blur', handleBlur)
+
+      return () => {
+        modal.current.removeEventListener('blur', handleBlur)
+      }
+    }
+  }, [modal.current])
+
   const modalKeyEvent = (keyCode) => {
     if (keyCode === 27) { // Esc
       if (props.cancelFn) props.cancelFn()
@@ -40,13 +58,6 @@ export const ModalDialog = (props: ModalDialogProps) => {
     handleHide()
   }
 
-  const handleBlur = (e) => {
-    if (!e.currentTarget.contains(e.relatedTarget)) {
-      e.stopPropagation()
-      handleHide()
-    }
-  }
-
   return (
     <div
       data-id={`${props.id}ModalDialogContainer-react`}
@@ -58,7 +69,6 @@ export const ModalDialog = (props: ModalDialogProps) => {
     >
       <div className="modal-dialog" role="document">
         <div
-          onBlur={handleBlur}
           ref={modal}
           tabIndex={-1}
           className={'modal-content remixModalContent ' + (props.modalClass ? props.modalClass : '')}

libs/remix-ui/solidity-compiler/src/lib/actions/compiler.ts

@@ -44,7 +44,7 @@ export const listenToEvents = (editor, compileTabLogic) => (dispatch: React.Disp
   })
 
   compileTabLogic.compiler.event.register('loadingCompiler', () => {
-    dispatch(setCompilerMode('compilationDuration'))
+    dispatch(setCompilerMode('loadingCompiler'))
   })
 
   compileTabLogic.compiler.event.register('compilerLoaded', () => {

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

@@ -35,8 +35,8 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
     language: '',
     evmVersion: ''
   })
+  const [disableCompileButton, setDisableCompileButton] = useState<boolean>(false)
   const compileIcon = useRef(null)
-  const warningIcon = useRef(null)
   const promptMessageInput = useRef(null)
   const [hhCompilation, sethhCompilation] = useState(false)
   const [compilerContainer, dispatch] = useReducer(compilerReducer, compilerInitialState)
@@ -83,6 +83,9 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
   }, [compileTabLogic])
 
   useEffect(() => {
+    const isDisabled = !compiledFileName || (compiledFileName && !isSolFileSelected(compiledFileName))
+
+    setDisableCompileButton(isDisabled)
     setState(prevState => {
       return { ...prevState, compiledFileName }
     })
@@ -243,14 +246,8 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
   }
 
   const compilationDuration = (speed: number) => {
-    if (!warningIcon.current) return
     if (speed > 1000) {
-      const msg = `Last compilation took ${speed}ms. We suggest to turn off autocompilation.`
-
-      warningIcon.current.setAttribute('title', msg)
-      warningIcon.current.style.visibility = 'visible'
-    } else {
-      warningIcon.current.style.visibility = 'hidden'
+      console.log(`Last compilation took ${speed}ms. We suggest to turn off autocompilation.`)
     }
   }
 
@@ -264,8 +261,8 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
     if (!compileIcon.current) return
     compileIcon.current.setAttribute('title', 'compiler is loading, please wait a few moments.')
     compileIcon.current.classList.add('remixui_spinningIcon')
-    warningIcon.current.style.visibility = 'hidden'
     _updateLanguageSelector()
+    setDisableCompileButton(true)
   }
 
   const compilerLoaded = () => {
@@ -273,6 +270,9 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
     compileIcon.current.setAttribute('title', '')
     compileIcon.current.classList.remove('remixui_spinningIcon')
     if (state.autoCompile) compile()
+    const isDisabled = !compiledFileName || (compiledFileName && !isSolFileSelected(compiledFileName))
+
+    setDisableCompileButton(isDisabled)
   }
 
   const compilationFinished = () => {
@@ -531,6 +531,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
             <label className="remixui_compilerLabel form-check-label" htmlFor="evmVersionSelector">EVM Version</label>
             <select value={state.evmVersion} onChange={(e) => handleEvmVersionChange(e.target.value)} className="custom-select" id="evmVersionSelector">
               <option data-id={state.evmVersion === 'default' ? 'selected' : ''} value="default">compiler default</option>
+              <option data-id={state.evmVersion === 'berlin' ? 'selected' : ''} value="berlin">berlin</option>
               <option data-id={state.evmVersion === 'muirGlacier' ? 'selected' : ''} value="muirGlacier">muirGlacier</option>
               <option data-id={state.evmVersion === 'istanbul' ? 'selected' : ''} value="istanbul">istanbul</option>
               <option data-id={state.evmVersion === 'petersburg' ? 'selected' : ''} value="petersburg">petersburg</option>
@@ -575,11 +576,10 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
               <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 className="text-break">
-              <i ref={warningIcon} title="Compilation Slow" style={{ visibility: 'hidden' }} className="remixui_warnCompilationSlow fas fa-exclamation-triangle" aria-hidden="true"></i>
-              { warningIcon.current && warningIcon.current.style.visibility === 'hidden' && <i ref={compileIcon} className="fas fa-sync remixui_icon" aria-hidden="true"></i> }
-              Compile { state.compiledFileName || '<no file selected>' }
+          <button id="compileBtn" data-id="compilerContainerCompileBtn" className="btn btn-primary btn-block remixui_disabled mt-3" title="Compile" onClick={compile} disabled={disableCompileButton}>
+            <span>
+              { <i ref={compileIcon} className="fas fa-sync remixui_icon" aria-hidden="true"></i> }
+              Compile { typeof state.compiledFileName === 'string' ? helper.extractNameFromKey(state.compiledFileName) || '<no file selected>' : '<no file selected>' }
             </span>
           </button>
         </header>

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

@@ -162,17 +162,25 @@ export const ContractSelection = (props: ContractSelectionProps) => {
     }
     const contractProperties = contractsDetails[selectedContract] || {}
     const log = <div className="remixui_detailsJSON">
-      {
-        Object.keys(contractProperties).map((propertyName, index) => {
-          const copyDetails = <span className="remixui_copyDetails"><CopyToClipboard content={contractProperties[propertyName]} direction='top' /></span>
-          const questionMark = <span className="remixui_questionMark"><i title={ help[propertyName] } className="fas fa-question-circle" aria-hidden="true"></i></span>
-
-          return (<div className="remixui_log" key={index}>
-            <div className="remixui_key">{ propertyName } { copyDetails } { questionMark }</div>
-            { insertValue(contractProperties, propertyName) }
-          </div>)
-        })
-      }
+      <TreeView>
+        {
+          Object.keys(contractProperties).map((propertyName, index) => {
+            const copyDetails = <span className="remixui_copyDetails"><CopyToClipboard content={contractProperties[propertyName]} direction='top' /></span>
+            const questionMark = <span className="remixui_questionMark"><i title={ help[propertyName] } className="fas fa-question-circle" aria-hidden="true"></i></span>
+
+            return (
+              <div className="remixui_log" key={index}>
+                <TreeViewItem
+                  label={
+                    <div data-id={`remixui_treeviewitem_${propertyName}`} className="remixui_key">{ propertyName } { copyDetails } { questionMark }</div>
+                  }>
+                  { insertValue(contractProperties, propertyName) }
+                </TreeViewItem>
+              </div>
+            )
+          })
+        }
+      </TreeView>
     </div>
 
     modal(selectedContract, log, 'Close', null)