@ -12,6 +12,7 @@ import { CopyToClipboard } from '@remix-ui/clipboard'
import { configFileContent } from './compilerConfiguration' import { configFileContent } from './compilerConfiguration'
import './css/style.css' import './css/style.css'
const defaultPath = "compiler_config.json"
declare global { declare global {
interface Window { interface Window {
@ -22,11 +23,23 @@ declare global {
const _paq = window . _paq = window . _paq || [ ] //eslint-disable-line
const _paq = window . _paq = window . _paq || [ ] //eslint-disable-line
export const CompilerContainer = ( props : CompilerContainerProps ) = > { export const CompilerContainer = ( props : CompilerContainerProps ) = > {
const { api , compileTabLogic , tooltip , modal , compiledFileName , updateCurrentVersion , configurationSettings , isHardhatProject , isTruffleProject , workspaceName } = props // eslint-disable-line
const {
api ,
compileTabLogic ,
tooltip ,
modal ,
compiledFileName ,
updateCurrentVersion ,
configurationSettings ,
isHardhatProject ,
isTruffleProject ,
workspaceName ,
configFilePath ,
setConfigFilePath ,
} = props // eslint-disable-line
const [ state , setState ] = useState ( { const [ state , setState ] = useState ( {
hideWarnings : false , hideWarnings : false ,
autoCompile : false , autoCompile : false ,
configFilePath : "compiler_config.json" ,
useFileConfiguration : false , useFileConfiguration : false ,
matomoAutocompileOnce : true , matomoAutocompileOnce : true ,
optimize : false , optimize : false ,
@ -40,7 +53,8 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
compiledFileName : '' , compiledFileName : '' ,
includeNightlies : false , includeNightlies : false ,
language : 'Solidity' , language : 'Solidity' ,
evmVersion : '' evmVersion : '' ,
createFileOnce : true
} ) } )
const [ showFilePathInput , setShowFilePathInput ] = useState < boolean > ( false ) const [ showFilePathInput , setShowFilePathInput ] = useState < boolean > ( false )
const [ toggleExpander , setToggleExpander ] = useState < boolean > ( false ) const [ toggleExpander , setToggleExpander ] = useState < boolean > ( false )
@ -53,17 +67,27 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
const [ compilerContainer , dispatch ] = useReducer ( compilerReducer , compilerInitialState ) const [ compilerContainer , dispatch ] = useReducer ( compilerReducer , compilerInitialState )
useEffect ( ( ) = > { useEffect ( ( ) = > {
api . setAppParameter ( 'configFilePath' , "/compiler_config.json" ) if ( workspaceName ) {
api . fileExists ( "/compiler_config.json" ) . then ( ( exists ) = > { api . setAppParameter ( 'configFilePath' , defaultPath )
if ( ! exists ) createNewConfigFile ( ) if ( state . useFileConfiguration ) {
else { api . fileExists ( defaultPath ) . then ( ( exists ) = > {
// what to do? discuss
if ( ! exists && state . useFileConfiguration ) createNewConfigFile ( )
} )
} }
} ) setShowFilePathInput ( false )
api . setAppParameter ( 'configFilePath' , "/compiler_config.json" ) }
setShowFilePathInput ( false )
} , [ workspaceName ] ) } , [ workspaceName ] )
useEffect ( ( ) = > {
if ( state . useFileConfiguration ) {
api . fileExists ( defaultPath ) . then ( ( exists ) = > {
if ( ! exists ) createNewConfigFile ( )
} )
setToggleExpander ( true )
}
} , [ state . useFileConfiguration ] )
useEffect ( ( ) = > { useEffect ( ( ) = > {
const listener = ( event ) = > { const listener = ( event ) = > {
if ( configFilePathInput . current !== event . target ) { if ( configFilePathInput . current !== event . target ) {
@ -106,8 +130,10 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
const hideWarnings = await api . getAppParameter ( 'hideWarnings' ) as boolean || false const hideWarnings = await api . getAppParameter ( 'hideWarnings' ) as boolean || false
const includeNightlies = await api . getAppParameter ( 'includeNightlies' ) as boolean || false const includeNightlies = await api . getAppParameter ( 'includeNightlies' ) as boolean || false
const useFileConfiguration = await api . getAppParameter ( 'useFileConfiguration' ) as boolean || false const useFileConfiguration = await api . getAppParameter ( 'useFileConfiguration' ) as boolean || false
let configFilePath = await api . getAppParameter ( 'configFilePath' ) let configFilePathSaved = await api . getAppParameter ( 'configFilePath' )
if ( ! configFilePath || configFilePath == '' ) configFilePath = "/compiler_config.json" if ( ! configFilePathSaved || configFilePathSaved == '' ) configFilePathSaved = defaultPath
setConfigFilePath ( configFilePathSaved )
setState ( prevState = > { setState ( prevState = > {
const params = api . getCompilerParameters ( ) const params = api . getCompilerParameters ( )
@ -122,7 +148,6 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
autoCompile : autocompile , autoCompile : autocompile ,
includeNightlies : includeNightlies , includeNightlies : includeNightlies ,
useFileConfiguration : useFileConfiguration , useFileConfiguration : useFileConfiguration ,
configFilePath : configFilePath ,
optimize : optimize , optimize : optimize ,
runs : runs , runs : runs ,
evmVersion : ( evmVersion !== null ) && ( evmVersion !== 'null' ) && ( evmVersion !== undefined ) && ( evmVersion !== 'undefined' ) ? evmVersion : 'default' , evmVersion : ( evmVersion !== null ) && ( evmVersion !== 'null' ) && ( evmVersion !== undefined ) && ( evmVersion !== 'undefined' ) ? evmVersion : 'default' ,
@ -181,7 +206,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
useEffect ( ( ) = > { useEffect ( ( ) = > {
compileTabLogic . setUseFileConfiguration ( state . useFileConfiguration ) compileTabLogic . setUseFileConfiguration ( state . useFileConfiguration )
if ( state . useFileConfiguration ) compileTabLogic . setConfigFilePath ( state . configFilePath ) if ( state . useFileConfiguration ) compileTabLogic . setConfigFilePath ( configFilePath )
} , [ state . useFileConfiguration ] ) } , [ state . useFileConfiguration ] )
useEffect ( ( ) = > { useEffect ( ( ) = > {
@ -191,6 +216,16 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
} , [ configurationSettings ] ) } , [ configurationSettings ] )
const toggleConfigType = ( ) = > { const toggleConfigType = ( ) = > {
if ( state . useFileConfiguration )
if ( state . createFileOnce ) {
api . fileExists ( defaultPath ) . then ( ( exists ) = > {
if ( ! exists || state . useFileConfiguration ) createNewConfigFile ( )
} )
setState ( prevState = > {
return { . . . prevState , createFileOnce : false }
} )
}
setState ( prevState = > { setState ( prevState = > {
api . setAppParameter ( 'useFileConfiguration' , ! state . useFileConfiguration ) api . setAppParameter ( 'useFileConfiguration' , ! state . useFileConfiguration )
return { . . . prevState , useFileConfiguration : ! state . useFileConfiguration } return { . . . prevState , useFileConfiguration : ! state . useFileConfiguration }
@ -198,18 +233,17 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
} }
const openFile = async ( ) = > { const openFile = async ( ) = > {
api . open ( state . configFilePath ) api . open ( configFilePath )
} }
const createNewConfigFile = async ( ) = > { const createNewConfigFile = async ( ) = > {
let filePath = configFilePathInput . current && configFilePathInput . current . value !== '' ? configFilePathInput.current.value : state.configFilePath let filePath = configFilePathInput . current && configFilePathInput . current . value !== '' ? configFilePathInput.current.value : configFilePath
if ( filePath === '' ) filePath = defaultPath
if ( ! filePath . endsWith ( '.json' ) ) filePath = filePath + '.json' if ( ! filePath . endsWith ( '.json' ) ) filePath = filePath + '.json'
await api . writeFile ( filePath , configFileContent ) await api . writeFile ( filePath , configFileContent )
api . setAppParameter ( 'configFilePath' , filePath ) api . setAppParameter ( 'configFilePath' , filePath )
setState ( prevState = > { setConfigFilePath ( filePath )
return { . . . prevState , configFilePath : filePath }
} )
compileTabLogic . setConfigFilePath ( filePath ) compileTabLogic . setConfigFilePath ( filePath )
setShowFilePathInput ( false ) setShowFilePathInput ( false )
} }
@ -220,9 +254,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
if ( await api . fileExists ( configFilePathInput . current . value ) ) { if ( await api . fileExists ( configFilePathInput . current . value ) ) {
api . setAppParameter ( 'configFilePath' , configFilePathInput . current . value ) api . setAppParameter ( 'configFilePath' , configFilePathInput . current . value )
setState ( prevState = > { setConfigFilePath ( configFilePathInput . current . value )
return { . . . prevState , configFilePath : configFilePathInput.current.value }
} )
compileTabLogic . setConfigFilePath ( configFilePathInput . current . value ) compileTabLogic . setConfigFilePath ( configFilePathInput . current . value )
setShowFilePathInput ( false ) setShowFilePathInput ( false )
@ -394,6 +426,9 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
compileIcon . current . classList . remove ( 'remixui_spinningIcon' ) compileIcon . current . classList . remove ( 'remixui_spinningIcon' )
compileIcon . current . classList . remove ( 'remixui_bouncingIcon' ) compileIcon . current . classList . remove ( 'remixui_bouncingIcon' )
if ( ! state . autoCompile || ( state . autoCompile && state . matomoAutocompileOnce ) ) { if ( ! state . autoCompile || ( state . autoCompile && state . matomoAutocompileOnce ) ) {
if ( state . useFileConfiguration )
_paq . push ( [ 'trackEvent' , 'compiler' , 'compiled_with_config_file' ] )
_paq . push ( [ 'trackEvent' , 'compiler' , 'compiled_with_version' , _retrieveVersion ( ) ] ) _paq . push ( [ 'trackEvent' , 'compiler' , 'compiled_with_version' , _retrieveVersion ( ) ] )
if ( state . autoCompile && state . matomoAutocompileOnce ) { if ( state . autoCompile && state . matomoAutocompileOnce ) {
setState ( prevState = > { setState ( prevState = > {
@ -750,36 +785,38 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
< / div > < / div >
< div className = "d-flex pb-1 remixui_compilerConfig custom-control custom-radio" > < div className = "d-flex pb-1 remixui_compilerConfig custom-control custom-radio" >
< input className = "custom-control-input" type = "radio" name = "configradio" value = "file" onChange = { toggleConfigType } checked = { state . useFileConfiguration } id = "scFileConfig" / > < input className = "custom-control-input" type = "radio" name = "configradio" value = "file" onChange = { toggleConfigType } checked = { state . useFileConfiguration } id = "scFileConfig" / >
< label className = "form-check-label custom-control-label" htmlFor = "scFileConfig" > Use configuration file < / label > < label className = "form-check-label custom-control-label" htmlFor = "scFileConfig" data - id = "scFileConfiguration" > Use configuration file < / label >
< / div > < / div >
< div className = { ` pt-2 ml-4 ml-2 align-items-start justify-content-between d-flex ` } > < div className = { ` pt-2 ml-4 ml-2 align-items-start justify-content-between d-flex ` } >
{ ( ! showFilePathInput && state . useFileConfiguration ) && < span { ( ! showFilePathInput && state . useFileConfiguration ) && < span
title = "Click to open the config file." title = "Click to open the config file."
onClick = { openFile } onClick = { configFilePath === '' ? ( ) = > { } : openFile }
className = "py-2 text-primary remixui_compilerConfigPath" className = "py-2 remixui_compilerConfigPath"
> { state . configFilePath } < / span > } > { configFilePath === '' ? 'No file selected.' : configFilePath } < / span > }
{ ( ! showFilePathInput && ! state . useFileConfiguration ) && < span className = "py-2 text-secondary" > { state . configFilePath } < / span > } { ( ! showFilePathInput && ! state . useFileConfiguration ) && < span className = "py-2 text-secondary" > { configFilePath } < / span > }
< input < input
ref = { configFilePathInput } ref = { configFilePathInput }
className = { ` py-0 my-0 form-control ${ showFilePathInput ? "d-flex" : "d-none" } ` } className = { ` py-0 my-0 form-control ${ showFilePathInput ? "d-flex" : "d-none" } ` }
placeholder = { "Enter the new path" } placeholder = { "Enter the new path" }
title = "If the file you entered does not exist you will be able to create one in the next step." title = "If the file you entered does not exist you will be able to create one in the next step."
disabled = { ! state . useFileConfiguration } disabled = { ! state . useFileConfiguration }
data - id = "scConfigFilePathInput"
onKeyPress = { event = > { onKeyPress = { event = > {
if ( event . key === 'Enter' ) { if ( event . key === 'Enter' ) {
handleConfigPathChange ( ) handleConfigPathChange ( )
} }
} } } }
/ > / >
{ ! showFilePathInput && < button disabled = { ! state . useFileConfiguration } className = "btn-secondary" onClick = { ( ) = > { setShowFilePathInput ( true ) } } > Change < / button > } { ! showFilePathInput && < button disabled = { ! state . useFileConfiguration } data - id = "scConfigChangeFilePath" className = "btn-secondary" onClick = { ( ) = > { setShowFilePathInput ( true ) } } > Change < / button > }
< / div > < / div >
< / div > < / div >
< div className = "px-4" > < div className = "px-4" >
< button id = "compileBtn" data - id = "compilerContainerCompileBtn" className = "btn btn-primary btn-block d-block w-100 text-break remixui_disabled mb-1 mt-3" onClick = { compile } disabled = { disableCompileButton } > < button id = "compileBtn" data - id = "compilerContainerCompileBtn" className = "btn btn-primary btn-block d-block w-100 text-break remixui_disabled mb-1 mt-3" onClick = { compile } disabled = { ( configFilePath === '' && state . useFileConfiguration ) || disableCompileButton } >
< OverlayTrigger overlay = { < OverlayTrigger overlay = {
< Tooltip id = "overlay-tooltip-compile" > < Tooltip id = "overlay-tooltip-compile" >
< div className = "text-left" > < div className = "text-left" >
< div > < b > Ctrl + S < / b > for compiling < / div > { ! ( configFilePath === '' && state . useFileConfiguration ) && < div > < b > Ctrl + S < / b > for compiling < / div > }
{ ( configFilePath === '' && state . useFileConfiguration ) && < div > No config file selected < / div > }
< / div > < / div >
< / Tooltip > < / Tooltip >
} > } >
@ -790,11 +827,12 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
< / OverlayTrigger > < / OverlayTrigger >
< / button > < / button >
< div className = 'd-flex align-items-center' >
< div className = 'd-flex align-items-center' >
< button id = "compileAndRunBtn" data - id = "compilerContainerCompileAndRunBtn" className = "btn btn-secondary btn-block d-block w-100 text-break remixui_solidityCompileAndRunButton d-inline-block remixui_disabled mb-1 mt-3" onClick = { compileAndRun } disabled = { disableCompileButton } > < button id = "compileAndRunBtn" data - id = "compilerContainerCompileAndRunBtn" className = "btn btn-secondary btn-block d-block w-100 text-break remixui_solidityCompileAndRunButton d-inline-block remixui_disabled mb-1 mt-3" onClick = { compileAndRun } disabled = { ( configFilePath === '' && state . useFileConfiguration ) || disableCompileButton } >
< OverlayTrigger overlay = { < OverlayTrigger overlay = {
< Tooltip id = "overlay-tooltip-compile-run" > < Tooltip id = "overlay-tooltip-compile-run" >
< div className = "text-left" > < div className = "text-left" >
< div > < b > Ctrl + Shift + S < / b > for compiling and script execution < / div > { ! ( configFilePath === '' && state . useFileConfiguration ) && < div > < b > Ctrl + Shift + S < / b > for compiling and script execution < / div > }
{ ( configFilePath === '' && state . useFileConfiguration ) && < div > No config file selected < / div > }
< / div > < / div >
< / Tooltip > < / Tooltip >
} > } >
@ -806,18 +844,18 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
< OverlayTrigger overlay = { < OverlayTrigger overlay = {
< Tooltip id = "overlay-tooltip-compile-run-doc" > < Tooltip id = "overlay-tooltip-compile-run-doc" >
< div className = "text-left p-2" > < div className = "text-left p-2" >
< div > Choose the script to execute right after compilation by adding the ` dev-run-script ` natspec tag , as in : < / div > < div > Choose the script to execute right after compilation by adding the ` dev-run-script ` natspec tag , as in : < / div >
< pre > < pre >
< code > < code >
/**<br / > /**<br / >
* @title ContractName < br / > * @title ContractName < br / >
* @dev ContractDescription < br / > * @dev ContractDescription < br / >
* @custom : dev - run - script file_path < br / > * @custom : dev - run - script file_path < br / >
* /<br / > * /<br / >
contract ContractName { '{}' } < br / > contract ContractName { '{}' } < br / >
< / code > < / code >
< / pre > < / pre >
Click to know more Click to know more
< / div > < / div >
< / Tooltip > < / Tooltip >
} > } >
Aniket
3 years ago
committed by
GitHub