Merge pull request #1942 from ethereum/rmOptimism

ioedeveloper · web-flow · commit b6ae0e0e0748 · 2022-01-14T12:44:10.000+01:00
dragbar z-index fixed, removed Optimism, added Cairo
diff --git a/apps/remix-ide/src/assets/img/cairoLogo.webp b/apps/remix-ide/src/assets/img/cairoLogo.webp
diff --git a/apps/remix-ide/src/remixAppManager.js b/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
-    })
   }
 }
 
diff --git a/libs/remix-core-plugin/src/lib/compiler-artefacts.ts b/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)
diff --git a/libs/remix-ui/app/src/lib/remix-app/components/dragbar/dragbar.css b/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,
diff --git a/libs/remix-ui/home-tab/src/lib/components/pluginButton.tsx b/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 (
-    <button
-      className="btn border-secondary d-flex mr-3 text-nowrap justify-content-center flex-column align-items-center remixui_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 } } />
-      <label className="text-uppercase text-dark remixui_cursorStyle">{envText}</label>
-    </button>
+    <div>
+      <button
+        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_home_envLogo" id={envID} src={imgPath} alt="" style={ { filter: themeFilter.filter } } />
+        <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>
   )
 }
 
diff --git a/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.css b/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.css
@@ -1,82 +1,85 @@
-.remixui_text {
+.remixui_home_text {
   cursor: pointer;
   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;
+}
diff --git a/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx b/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx
@@ -150,10 +150,10 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
     plugin.verticalIcons.select('solidity')
     _paq.push(['trackEvent', 'pluginManager', 'userActivate', 'solidity'])
   }
-  const startOptimism = async () => {
-    await plugin.appManager.activatePlugin('optimism-compiler')
-    plugin.verticalIcons.select('optimism-compiler')
-    _paq.push(['trackEvent', 'pluginManager', 'userActivate', 'optimism-compiler'])
+  const startCairo = async () => {
+    await plugin.appManager.activatePlugin('cairo_compiler')
+    plugin.verticalIcons.select('cairo_compiler')
+    _paq.push(['trackEvent', 'pluginManager', 'userActivate', 'cairo_compiler'])
   }
   const startSolhint = async () => {
     await plugin.appManager.activatePlugin(['solidity', 'solhint'])
@@ -232,7 +232,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}
@@ -241,14 +241,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()} />
@@ -261,11 +261,11 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
                 <h4>File</h4>
                 <p className="mb-1">
                   <i className="mr-2 far fa-file"></i>
-                  <span className="ml-1 mb-1 remixui_text" onClick={() => createNewFile()}>New File</span>
+                  <span className="ml-1 mb-1 remixui_home_text" onClick={() => createNewFile()}>New File</span>
                 </p>
                 <p className="mb-1">
                   <i className="mr-2 far fa-file-alt"></i>
-                  <span className="ml-1 remixui_labelIt remixui_bigLabelSize} remixui_text">
+                  <span className="ml-1 remixui_home_labelIt remixui_home_bigLabelSize remixui_home_text">
                     Open Files
                     <input title="open file" type="file" onChange={(event) => {
                       event.stopPropagation()
@@ -275,7 +275,7 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
                 </p>
                 <p className="mb-1">
                   <i className="mr-1 far fa-hdd"></i>
-                  <span className="ml-1 remixui_text" onClick={() => connectToLocalhost()}>Connect to Localhost</span>
+                  <span className="ml-1 remixui_home_text" onClick={() => connectToLocalhost()}>Connect to Localhost</span>
                 </p>
                 <p className="mt-3 mb-0"><label>LOAD FROM:</label></p>
                 <div className="btn-group">
@@ -289,28 +289,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>
-                  <a className="remixui_text" target="__blank" href="https://remix-project.org">Featuring website</a>
+                  <img id='remixHhomeWebsite' className="mr-2 remixui_home_image" src={ plugin.profile.icon } style={ { filter: state.themeQuality.filter } } alt=''></img>
+                  <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>
-                  <span className="remixui_text" onClick={() => switchToPreviousVersion()}>Old experience</span>
+                  <i className="mr-2 fab fa-ethereum remixui_home_image"></i>
+                  <span className="remixui_home_text" onClick={() => switchToPreviousVersion()}>Old experience</span>
                 </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) => {
@@ -321,7 +321,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) => {
@@ -332,9 +332,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 id="remixIDE_MediumBlock" className="p-2 mx-1 mt-3 mb-0 remixui_remixHomeMedia" style={ { maxHeight: maxHeight } }>
-              <div id="medium-widget" className="px-3 remixui_media" hidden={state.showMediaPanel !== 'medium'} style={ { maxHeight: elHeight } }>
+          <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_home_remixHomeMedia" style={ { maxHeight: maxHeight } }>
+              <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"
@@ -348,8 +348,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 className="remixui_media" style={ { minHeight: elHeight } } >
+            <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_home_media" style={ { minHeight: elHeight } } >
                 <a className="twitter-timeline"
                   data-width="330"
                   data-theme={ state.themeQuality.name }
diff --git a/libs/remix-ui/panel/src/lib/dragbar/dragbar.css b/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 {
diff --git a/libs/remix-ui/run-tab/src/lib/actions/index.ts b/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())

Original file line number	Diff line number	Diff line change
`@@ -1,82 +1,85 @@`
`1`		`-.remixui_text {`
	`1`	`+.remixui_home_text {`
`2`	`2`	`cursor: pointer;`
`3`	`3`	`font-weight: normal;`
`4`	`4`	`max-width: 300px;`
`5`	`5`	`}`
`6`		`-.remixui_text:hover {`
	`6`	`+.remixui_home_text:hover {`
`7`	`7`	`cursor: pointer;`
`8`	`8`	`text-decoration: underline;`
`9`	`9`	`}`
`10`		`-.remixui_homeContainer {`
	`10`	`+.remixui_home_homeContainer {`
`11`	`11`	`overflow-y: hidden;`
`12`	`12`	`overflow-y: auto;`
`13`	`13`	`flex-grow: 3;`
`14`	`14`	`}`
`15`		`-.remixui_hpLogoContainer {`
	`15`	`+.remixui_home_hpLogoContainer {`
`16`	`16`	`margin: 30px;`
`17`	`17`	`padding-right: 90px;`
`18`	`18`	`}`
`19`		`-.remixui_mediaBadge {`
	`19`	`+.remixui_home_mediaBadge {`
`20`	`20`	`font-size: 2em;`
`21`	`21`	`height: 2em;`
`22`	`22`	`width: 2em;`
`23`	`23`	`}`
`24`		`-.remixui_mediaBadge:focus {`
	`24`	`+.remixui_home_mediaBadge:focus {`
`25`	`25`	`outline: none;`
`26`	`26`	`}`
`27`		`-.remixui_image {`
	`27`	`+.remixui_home_image {`
`28`	`28`	`height: 1em;`
`29`	`29`	`width: 1em;`
`30`	`30`	`text-align: center;`
`31`	`31`	`}`
`32`		`-.remixui_logoImg {`
	`32`	`+.remixui_home_logoImg {`
`33`	`33`	`height: 10em;`
`34`	`34`	`}`
`35`		`-.remixui_rightPanel {`
	`35`	`+.remixui_home_rightPanel {`
`36`	`36`	`right: 0;`
`37`	`37`	`position: absolute;`
`38`	`38`	`z-index: 3;`
`39`	`39`	`}`
`40`		`-.remixui_remixHomeMedia {`
	`40`	`+.remixui_home_remixHomeMedia {`
`41`	`41`	`overflow-y: auto;`
`42`	`42`	`overflow-x: hidden;`
`43`	`43`	`}`
`44`		`-.remixui_panels {`
	`44`	`+.remixui_home_panels {`
`45`	`45`	`box-shadow: 0px 0px 13px -7px;`
`46`	`46`	`}`
`47`		`-.remixui_labelIt {`
	`47`	`+.remixui_home_labelIt {`
`48`	`48`	`margin-bottom: 0;`
`49`	`49`	`}`
`50`		`-.remixui_bigLabelSize {`
	`50`	`+.remixui_home_bigLabelSize {`
`51`	`51`	`font-size: 13px;`
`52`	`52`	`}`
`53`		`-.remixui_seeAll {`
	`53`	`+.remixui_home_seeAll {`
`54`	`54`	`margin-top: 7px;`
`55`	`55`	`white-space: nowrap;`
`56`	`56`	`}`
`57`		`-.remixui_importFrom p {`
	`57`	`+.remixui_home_importFrom p {`
`58`	`58`	`margin-right: 10px;`
`59`	`59`	`}`
`60`		`-.remixui_logoContainer img{`
	`60`	`+.remixui_home_logoContainer img{`
`61`	`61`	`height: 150px;`
`62`	`62`	`opacity: 0.7;`
`63`	`63`	`}`
`64`		`-.remixui_envLogo {`
	`64`	`+.remixui_home_envLogo {`
`65`	`65`	`height: 16px;`
`66`	`66`	`}`
`67`		`-.remixui_cursorStyle {`
	`67`	`+.remixui_home_cursorStyle {`
`68`	`68`	`cursor: pointer;`
`69`	`69`	`}`
`70`		`-.remixui_envButton {`
	`70`	`+.remixui_home_envButton {`
`71`	`71`	`width: 120px;`
`72`	`72`	`height: 70px;`
`73`	`73`	`}`
`74`		`-.remixui_media {`
	`74`	`+.remixui_home_media {`
`75`	`75`	`overflow: hidden;`
`76`	`76`	`max-width: 400px;`
`77`	`77`	`transition: .5s ease-out;`
`78`	`78`	`z-index: 1000;`
`79`	`79`	`}`
`80`		`-.remixui_migrationBtn {`
	`80`	`+.remixui_home_migrationBtn {`
`81`	`81`	`width: 100px;`
`82`	`82`	`}`
	`83`	`+.remixui_home_l2Label {`
	`84`	`+ bottom: 10px;`
	`85`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,7 @@`
`7`	`7`	`left: 0px;`
`8`	`8`	`top: 0px;`
`9`	`9`	`height: 0.3em;`
`10`		`- z-index: 9999;`
	`10`	`+ z-index: 1000;`
`11`	`11`	`}`
`12`	`12`
`13`	`13`	`.overlay {`