Merge branch 'master' into homeFixes

apps/remix-ide/src/remixAppManager.js

@@ -145,16 +145,6 @@ export class RemixAppManager extends PluginManager {
       pattern: [],
       sticky: true
     })
-    await this.call('filePanel', 'registerContextMenuItem', {
-      id: 'optimism-compiler',
-      name: 'compileCustomAction',
-      label: 'Compile with Optimism',
-      type: [],
-      extension: ['.sol'],
-      path: [],
-      pattern: [],
-      sticky: true
-    })
   }
 }
 

libs/remix-core-plugin/src/lib/compiler-artefacts.ts

@@ -48,11 +48,6 @@ export class CompilerArtefacts extends Plugin {
       saveCompilationPerFileResult(file, source, languageVersion, data)
     })
 
-    this.on('optimism-compiler', 'compilationFinished', (file, source, languageVersion, data) => {
-      this.compilersArtefacts.__last = new CompilerAbstract(languageVersion, data, source)
-      saveCompilationPerFileResult(file, source, languageVersion, data)
-    })
-
     this.on('solidityUnitTesting', 'compilationFinished', (file, source, languageVersion, data) => {
       this.compilersArtefacts.__last = new CompilerAbstract(languageVersion, data, source)
       saveCompilationPerFileResult(file, source, languageVersion, data)

libs/remix-tests/src/compiler.ts

@@ -1,6 +1,7 @@
 import fs from './fileSystem'
 import async from 'async'
 import path from 'path'
+import deepequal from 'deep-equal'
 import Log from './logger'
 import { Compiler as RemixCompiler } from '@remix-project/remix-solidity'
 import { SrcIfc, CompilerConfiguration, CompilationErrors } from './types'
@@ -170,7 +171,8 @@ export function compileFileOrFiles (filename: string, isDirectory: boolean, opts
  * @param opts Options
  * @param cb Callback
  */
-export function compileContractSources (sources: SrcIfc, compiler: any, opts: any, cb): void {
+export function compileContractSources (sources: SrcIfc, newCompConfig: any, importFileCb, UTRunner, opts: any, cb): void {
+  let compiler
   const filepath = opts.testFilePath || ''
   const testFileImportRegEx = /^(import)\s['"](remix_tests.sol|tests.sol)['"];/gm
 
@@ -183,8 +185,28 @@ export function compileContractSources (sources: SrcIfc, compiler: any, opts: an
   }
 
   async.waterfall([
-    function doCompilation (next) {
+    (next) => {
+      if (!deepequal(UTRunner.compilerConfig, newCompConfig)) {
+        UTRunner.compilerConfig = newCompConfig
+        const { currentCompilerUrl, evmVersion, optimize, runs, usingWorker } = newCompConfig
+        compiler = new RemixCompiler(importFileCb)
+        compiler.set('evmVersion', evmVersion)
+        compiler.set('optimize', optimize)
+        compiler.set('runs', runs)
+        compiler.loadVersion(usingWorker, currentCompilerUrl)
+        // @ts-ignore
+        compiler.event.register('compilerLoaded', this, (version) => {
+          next()
+        })
+      } else {
+        compiler = UTRunner.compiler
+        next()
+      }
+    },
+    (next) => {
       const compilationFinishedCb = (success, data, source) => {
+        // data.error usually exists for exceptions like worker error etc.
+        if (!data.error) UTRunner.compiler = compiler
         if (opts && opts.event) opts.event.emit('compilationFinished', success, data, source)
         next(null, data)
       }

libs/remix-tests/src/runTestSources.ts

@@ -1,6 +1,4 @@
 import async, { ErrorCallback } from 'async'
-import deepequal from 'deep-equal'
-import { Compiler as RemixCompiler } from '@remix-project/remix-solidity'
 import { compileContractSources, writeTestAccountsContract } from './compiler'
 import { deployAll } from './deployer'
 import { runTest } from './testRunner'
@@ -50,29 +48,13 @@ export class UnitTestRunner {
    * @param importFileCb Import file callback
    * @param opts Options
    */
-  async runTestSources (contractSources: SrcIfc, compilerConfig: CompilerConfiguration, testCallback, resultCallback, deployCb:any, finalCallback: any, importFileCb, opts: Options) {
+  async runTestSources (contractSources: SrcIfc, newCompilerConfig: CompilerConfiguration, testCallback, resultCallback, deployCb:any, finalCallback: any, importFileCb, opts: Options) {
     opts = opts || {}
     const sourceASTs: any = {}
     if (opts.web3 || opts.accounts) this.init(opts.web3, opts.accounts)
-
     async.waterfall([
       (next) => {
-        if (!deepequal(this.compilerConfig, compilerConfig)) {
+        compileContractSources(contractSources, newCompilerConfig, importFileCb, this, { accounts: this.testsAccounts, testFilePath: opts.testFilePath, event: this.event }, next)
-          this.compilerConfig = compilerConfig
-          const { currentCompilerUrl, evmVersion, optimize, runs, usingWorker } = compilerConfig
-          this.compiler = new RemixCompiler(importFileCb)
-          this.compiler.set('evmVersion', evmVersion)
-          this.compiler.set('optimize', optimize)
-          this.compiler.set('runs', runs)
-          this.compiler.loadVersion(usingWorker, currentCompilerUrl)
-          // @ts-ignore
-          this.compiler.event.register('compilerLoaded', this, (version) => {
-            next()
-          })
-        } else next()
-      },
-      (next) => {
-        compileContractSources(contractSources, this.compiler, { accounts: this.testsAccounts, testFilePath: opts.testFilePath, event: this.event }, next)
       },
       (compilationResult: compilationInterface, asts: ASTInterface, next) => {
         for (const filename in asts) {

libs/remix-ui/app/src/lib/remix-app/components/dragbar/dragbar.css

@@ -7,7 +7,7 @@
   left: 0px;
   top: 0px;
   width: 0.3em;
-  z-index: 9999;
+  z-index: 1000;
 }
 
 .overlay {
@@ -17,7 +17,7 @@
   width: 100vw;
   height: 100vh;
   display: block;
-  z-index: 9998;
+  z-index: 1000;
 }
 
 .dragbar:hover,

libs/remix-ui/home-tab/src/lib/components/pluginButton.tsx

@@ -6,21 +6,26 @@ interface PluginButtonProps {
   imgPath: string,
   envID: string,
   envText: string,
-  callback: any
+  callback: any,
+  l2?: boolean
 }
 
-function PluginButton ({ imgPath, envID, envText, callback }: PluginButtonProps) {
+function PluginButton ({ imgPath, envID, envText, callback, l2 }: PluginButtonProps) {
   const themeFilter = useContext(ThemeContext)
 
   return (
+    <div>
       <button
-      className="btn border-secondary d-flex mr-3 text-nowrap justify-content-center flex-column align-items-center remixui_envButton"
+        className="btn border-secondary d-flex mr-3 text-nowrap justify-content-center flex-column align-items-center remixui_home_envButton"
         data-id={'landingPageStart' + envText}
         onClick={() => callback()}
       >
-      <img className="m-2 align-self-center remixui_envLogo" id={envID} src={imgPath} alt="" style={ { filter: themeFilter.filter } } />
+        <img className="m-2 align-self-center remixui_home_envLogo" id={envID} src={imgPath} alt="" style={ { filter: themeFilter.filter } } />
-      <label className="text-uppercase text-dark remixui_cursorStyle">{envText}</label>
+        <label className="text-uppercase text-dark remixui_home_cursorStyle">{envText}</label>
       </button>
+      { l2 && <label className="bg-light mx-1 px-1 mb-0 mx-2 position-relative remixui_home_l2Label">L2</label> }
+
+    </div>
   )
 }
 

libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.css

@@ -1,83 +1,86 @@
-.remixui_text {
+.remixui_home_text {
   cursor: pointer;
   font-size: 0.8rem;
   font-weight: normal;
   max-width: 300px;
 }
-.remixui_text:hover {
+.remixui_home_text:hover {
   cursor: pointer;
   text-decoration: underline;
 }
-.remixui_homeContainer {
+.remixui_home_homeContainer {
   overflow-y: hidden;
   overflow-y: auto;
   flex-grow: 3;
 }
-.remixui_hpLogoContainer {
+.remixui_home_hpLogoContainer {
   margin: 30px;
   padding-right: 90px;
 }
-.remixui_mediaBadge {
+.remixui_home_mediaBadge {
   font-size: 2em;
   height: 2em;
   width: 2em;
 }
-.remixui_mediaBadge:focus {
+.remixui_home_mediaBadge:focus {
   outline: none;
 }
-.remixui_image {
+.remixui_home_image {
   height: 1em;
   width: 1em;
   text-align: center;
 }
-.remixui_logoImg {
+.remixui_home_logoImg {
   height: 10em;
 }
-.remixui_rightPanel {
+.remixui_home_rightPanel {
   right: 0;
   position: absolute;
   z-index: 3;
 }
-.remixui_remixHomeMedia {
+.remixui_home_remixHomeMedia {
   overflow-y: auto;
   overflow-x: hidden;
 }
-.remixui_panels {
+.remixui_home_panels {
   box-shadow: 0px 0px 13px -7px;
 }
-.remixui_labelIt {
+.remixui_home_labelIt {
   margin-bottom: 0;
 }
-.remixui_bigLabelSize {
+.remixui_home_bigLabelSize {
   font-size: 13px;
 }
-.remixui_seeAll {
+.remixui_home_seeAll {
   margin-top: 7px;
   white-space: nowrap;
 }
-.remixui_importFrom p {
+.remixui_home_importFrom p {
   margin-right: 10px;
 }
-.remixui_logoContainer img{
+.remixui_home_logoContainer img{
   height: 150px;
   opacity: 0.7;
 }
-.remixui_envLogo {
+.remixui_home_envLogo {
   height: 16px;
 }
-.remixui_cursorStyle {
+.remixui_home_cursorStyle {
   cursor: pointer;
 }
-.remixui_envButton {
+.remixui_home_envButton {
   width: 120px;
   height: 70px;
 }
-.remixui_media {
+.remixui_home_media {
   overflow: hidden;
   max-width: 400px;
   transition: .5s ease-out;
   z-index: 1000;
 }
-.remixui_migrationBtn {
+.remixui_home_migrationBtn {
   width: 100px;
 }
+.remixui_home_l2Label {
+  bottom: 10px;
+}

libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx

@@ -151,10 +151,10 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
     plugin.verticalIcons.select('solidity')
     _paq.push(['trackEvent', 'pluginManager', 'userActivate', 'solidity'])
   }
-  const startOptimism = async () => {
+  const startCairo = async () => {
-    await plugin.appManager.activatePlugin('optimism-compiler')
+    await plugin.appManager.activatePlugin('cairo_compiler')
-    plugin.verticalIcons.select('optimism-compiler')
+    plugin.verticalIcons.select('cairo_compiler')
-    _paq.push(['trackEvent', 'pluginManager', 'userActivate', 'optimism-compiler'])
+    _paq.push(['trackEvent', 'pluginManager', 'userActivate', 'cairo_compiler'])
   }
   const startSolhint = async () => {
     await plugin.appManager.activatePlugin(['solidity', 'solhint'])
@@ -233,7 +233,7 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
             <label style={ { fontSize: 'xxx-large', height: 'auto', alignSelf: 'flex-end' } }>Remix IDE</label>
           </div>
           <div className="mr-4 d-flex">
-            <img className="mt-4 mb-2 remixui_logoImg" src="assets/img/guitarRemiCroped.webp" onClick={ () => playRemi() } alt=""></img>
+            <img className="mt-4 mb-2 remixui_home_logoImg" src="assets/img/guitarRemiCroped.webp" onClick={ () => playRemi() } alt=""></img>
             <audio
               id="remiAudio"
               muted={false}
@@ -242,14 +242,14 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
             ></audio>
           </div>
         </div>
-        <div className="row remixui_hpSections mx-2 mr-4" data-id="landingPageHpSections">
+        <div className="row mx-2 mr-4" data-id="landingPageHpSections">
           <div className="ml-3">
             <div className="mb-5">
               <h4>Featured Plugins</h4>
               <div className="d-flex flex-row pt-2">
                 <ThemeContext.Provider value={ state.themeQuality }>
                   <PluginButton imgPath="assets/img/solidityLogo.webp" envID="solidityLogo" envText="Solidity" callback={() => startSolidity()} />
-                  <PluginButton imgPath="assets/img/optimismLogo.webp" envID="optimismLogo" envText="Optimism" callback={() => startOptimism()} />
+                  <PluginButton imgPath="assets/img/cairoLogo.webp" envID="CairoLogo" envText="Cairo compiler" l2={true} callback={() => startCairo()} />
                   <PluginButton imgPath="assets/img/solhintLogo.webp" envID="solhintLogo" envText="Solhint linter" callback={() => startSolhint()} />
                   <PluginButton imgPath="assets/img/learnEthLogo.webp" envID="learnEthLogo" envText="LearnEth" callback={() => startLearnEth()} />
                   <PluginButton imgPath="assets/img/sourcifyLogo.webp" envID="sourcifyLogo" envText="Sourcify" callback={() => startSourceVerify()} />
@@ -262,11 +262,11 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
                 <h4>File</h4>
                 <p className="mb-1">
                   <i className="mr-2 far fa-file"></i>
-                  <label className="ml-1 mb-1 remixui_text" onClick={() => createNewFile()}>New File</label>
+                  <label className="ml-1 mb-1 remixui_hometext" onClick={() => createNewFile()}>New File</label>
                 </p>
                 <p className="mb-1">
                   <i className="mr-2 far fa-file-alt"></i>
-                  <label className="ml-1 remixui_labelIt remixui_bigLabelSize} remixui_text" htmlFor="openFileInput">
+                  <label className="ml-1 remixui_home_labelIt remixui_home_bigLabelSize} remixui_home_text" htmlFor="openFileInput">
                     Open Files
                   </label>
                   <input title="open file" type="file" id="openFileInput" onChange={(event) => {
@@ -277,7 +277,7 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
                 </p>
                 <p className="mb-1">
                   <i className="mr-1 far fa-hdd"></i>
-                  <label className="ml-1 remixui_text" onClick={() => connectToLocalhost()}>Connect to Localhost</label>
+                  <label className="ml-1 remixui_home_text" onClick={() => connectToLocalhost()}>Connect to Localhost</label>
                 </p>
                 <p className="mt-3 mb-0"><label>LOAD FROM:</label></p>
                 <div className="btn-group">
@@ -291,28 +291,28 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
                 <h4>Resources</h4>
                 <p className="mb-1">
                   <i className="mr-2 fas fa-book"></i>
-                  <a className="remixui_text" target="__blank" href="https://remix-ide.readthedocs.io/en/latest/#">Documentation</a>
+                  <a className="remixui_home_text" target="__blank" href="https://remix-ide.readthedocs.io/en/latest/#">Documentation</a>
                 </p>
                 <p className="mb-1">
                   <i className="mr-2 fab fa-gitter"></i>
-                  <a className="remixui_text" target="__blank" href="https://gitter.im/ethereum/remix">Gitter channel</a>
+                  <a className="remixui_home_text" target="__blank" href="https://gitter.im/ethereum/remix">Gitter channel</a>
                 </p>
                 <p className="mb-1">
-                  <img id='remixHhomeWebsite' className="mr-2 remixui_image" src={ plugin.profile.icon } style={ { filter: state.themeQuality.filter } } alt=''></img>
+                  <img id='remixHhomeWebsite' className="mr-2 remixui_home_image" src={ plugin.profile.icon } style={ { filter: state.themeQuality.filter } } alt=''></img>
-                  <a className="remixui_text" target="__blank" href="https://remix-project.org">Featuring website</a>
+                  <a className="remixui_home_text" target="__blank" href="https://remix-project.org">Featuring website</a>
                 </p>
                 <p className="mb-1">
-                  <i className="mr-2 fab fa-ethereum remixui_image"></i>
+                  <i className="mr-2 fab fa-ethereum remixui_home_image"></i>
-                  <label className="remixui_text" onClick={() => switchToPreviousVersion()}>Old experience</label>
+                  <label className="remixui_home_text" onClick={() => switchToPreviousVersion()}>Old experience</label>
                 </p>
               </div>
             </div>
           </div>
         </div>
-        <div className="d-flex flex-column remixui_rightPanel">
+        <div className="d-flex flex-column remixui_home_rightPanel">
           <div className="d-flex pr-3 py-2 align-self-end" id="remixIDEMediaPanelsTitle">
             <button
-              className="btn-info p-2 m-1 border rounded-circle remixui_mediaBadge fab fa-twitter"
+              className="btn-info p-2 m-1 border rounded-circle remixui_home_mediaBadge fab fa-twitter"
               id="remixIDEHomeTwitterbtn"
               title="Twitter"
               onClick={(e) => {
@@ -323,7 +323,7 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
               }}
             ></button>
             <button
-              className="btn-danger p-2 m-1 border rounded-circle remixui_mediaBadge fab fa-medium"
+              className="btn-danger p-2 m-1 border rounded-circle remixui_home_mediaBadge fab fa-medium"
               id="remixIDEHomeMediumbtn"
               title="Medium blogs"
               onClick={(e) => {
@@ -334,9 +334,9 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
               }}
             ></button>
           </div>
-          <div className="mr-3 d-flex bg-light remixui_panels" style={ { visibility: state.showMediaPanel === 'none' ? 'hidden' : 'visible' } } id="remixIDEMediaPanels">
+          <div className="mr-3 d-flex bg-light remixui_home_panels" style={ { visibility: state.showMediaPanel === 'none' ? 'hidden' : 'visible' } } id="remixIDEMediaPanels">
-            <div id="remixIDE_MediumBlock" className="p-2 mx-1 mt-3 mb-0 remixui_remixHomeMedia" style={ { maxHeight: maxHeight } }>
+            <div id="remixIDE_MediumBlock" className="p-2 mx-1 mt-3 mb-0 remixui_home_remixHomeMedia" style={ { maxHeight: maxHeight } }>
-              <div id="medium-widget" className="px-3 remixui_media" hidden={state.showMediaPanel !== 'medium'} style={ { maxHeight: elHeight } }>
+              <div id="medium-widget" className="px-3 remixui_home_media" hidden={state.showMediaPanel !== 'medium'} style={ { maxHeight: elHeight } }>
                 <div
                   id="retainable-rss-embed"
                   data-rss="https://medium.com/feed/remix-ide"
@@ -350,8 +350,8 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
                 </div>
               </div>
             </div>
-            <div id="remixIDE_TwitterBlock" className="p-2 mx-1 mt-3 mb-0 remixui_remixHomeMedia" hidden={state.showMediaPanel !== 'twitter'} style={ { maxHeight: maxHeight, marginRight: '28px' } } >
+            <div id="remixIDE_TwitterBlock" className="p-2 mx-1 mt-3 mb-0 remixui_home_remixHomeMedia" hidden={state.showMediaPanel !== 'twitter'} style={ { maxHeight: maxHeight, marginRight: '28px' } } >
-              <div className="remixui_media" style={ { minHeight: elHeight } } >
+              <div className="remixui_home_media" style={ { minHeight: elHeight } } >
                 <a className="twitter-timeline"
                   data-width="330"
                   data-theme={ state.themeQuality.name }

libs/remix-ui/panel/src/lib/dragbar/dragbar.css

@@ -7,7 +7,7 @@
   left: 0px;
   top: 0px;
   height: 0.3em;
-  z-index: 9999;
+  z-index: 1000;
 }
 
 .overlay {

libs/remix-ui/run-tab/src/lib/actions/index.ts

@@ -74,8 +74,6 @@ const setupEvents = () => {
 
   plugin.on('yulp', 'compilationFinished', (file, source, languageVersion, data) => broadcastCompilationResult(file, source, languageVersion, data))
 
-  plugin.on('optimism-compiler', 'compilationFinished', (file, source, languageVersion, data) => broadcastCompilationResult(file, source, languageVersion, data))
-
   plugin.on('udapp', 'setEnvironmentModeReducer', (env: { context: string, fork: string }, from: string) => {
     dispatch(displayPopUp(plugin.REACT_API.envToasterContent(env, from)))
     setExecutionContext(env, plugin.REACT_API.web3Dialog())

libs/remix-ui/solidity-unit-testing/src/lib/logic/testTabLogic.ts

@@ -21,23 +21,20 @@ export class TestTabLogic {
         this.currentPath = this.helper.removeMultipleSlashes(this.helper.removeTrailingSlashes(path))
     }
 
-    generateTestFolder (path:string) {
+    async generateTestFolder (path:string) {
         // Todo move this check to File Manager after refactoring
         // Checking to ignore the value which contains only whitespaces
         if (!path || !(/\S/.test(path))) return
         path = this.helper.removeMultipleSlashes(path)
         const fileProvider = this.fileManager.fileProviderOf(path.split('/')[0])
-        fileProvider.exists(path).then((res: boolean) => {
+        if(!await fileProvider.exists(path)) fileProvider.createDir(path)
-        if (!res) fileProvider.createDir(path)
-        })
     }
 
     async pathExists (path: string) {
         // Checking to ignore the value which contains only whitespaces
         if (!path || !(/\S/.test(path))) return
         const fileProvider = this.fileManager.fileProviderOf(path.split('/')[0])
-        const res = await fileProvider.exists(path, (e: Error, res: boolean) => { return res })
+        return await fileProvider.exists(path)
-        return res
     }
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any

libs/remix-ui/solidity-unit-testing/src/lib/solidity-unit-testing.tsx

@@ -222,7 +222,8 @@ export const SolidityUnitTesting = (props: Record<string, any>) => { // eslint-d
     if (path !== '/') path = helper.removeTrailingSlashes(path)
     if (inputPath === '') inputPath = defaultPath
     setInputPathValue(path)
-    testTabLogic.generateTestFolder(inputPath)
+    await testTabLogic.generateTestFolder(inputPath)
+    setToasterMsg('Folder created successfully')
     setDisableCreateButton(true)
     setDisableGenerateButton(false)
     testTabLogic.setCurrentPath(inputPath)
@@ -672,6 +673,7 @@ export const SolidityUnitTesting = (props: Record<string, any>) => { // eslint-d
               value={inputPathValue}
               title="Press 'Enter' to change the path for test files."
               style={{ backgroundImage: "var(--primary)" }}
+              onKeyDown={() => { if (inputPathValue === '/') setInputPathValue('')} }
               onKeyUp={handleTestDirInput}
               onChange={handleEnter}
               onClick = {() => { if (inputPathValue === '/') setInputPathValue('')} }