Merge pull request #1407 from ethereum/fix-compiler

Fix React Compiler
pull/1416/head
bunsenstraat 3 years ago committed by GitHub
commit 5a768f4191
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 3
      apps/remix-ide-e2e/src/commands/verifyContracts.ts
  2. 26
      libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx
  3. 2
      libs/remix-ui/solidity-compiler/src/lib/actions/compiler.ts
  4. 28
      libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx
  5. 30
      libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx

@ -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"]')

@ -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 : '')}

@ -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', () => {

@ -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>

@ -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)

Loading…
Cancel
Save