Merge branch 'master' of https://github.com/ethereum/remix-project into pluginupdate

apps/remix-ide/src/app/plugins/contractFlattener.tsx

@@ -26,7 +26,7 @@ export class ContractFlattener extends Plugin {
 
   async flattenAContract(action: customAction) {
     this.fileName = action.path[0]
-    this.call('solidity', 'compile', this.fileName)
+    await this.call('solidity', 'compile', this.fileName)
   }
 
   /**
@@ -39,8 +39,8 @@ export class ContractFlattener extends Plugin {
     const ast = data.sources
     const dependencyGraph = getDependencyGraph(ast, filePath)
     const sorted = dependencyGraph.isEmpty()
-        ? [filePath]
+    ? [filePath]
-        : dependencyGraph.sort().reverse()
+    : dependencyGraph.sort().reverse()
     const sources = source.sources
     const result = concatSourceFiles(sorted, sources)
     await this.call('fileManager', 'writeFile', `${filePath}_flattened.sol`, result)

apps/remix-ide/src/app/plugins/remixd-handle.tsx

@@ -115,7 +115,7 @@ export class RemixdHandle extends WebsocketPlugin {
       // warn the user only if he/she is in the browser context
       const mod: AppModal = {
         id: 'remixdConnect',
-        title: 'Connect to localhost',
+        title: 'Access file system using remixd',
         message: remixdDialog(),
         okLabel: 'Connect',
         cancelLabel: 'Cancel',

apps/remix-ide/src/app/tabs/locales/en/home.json

@@ -55,7 +55,7 @@
   "home.files": "Files",
   "home.newFile": "New File",
   "home.openFile": "Open File",
-  "home.connectToLocalhost": "Connect to Localhost",
+  "home.connectToLocalhost": "Access File System",
-  "home.loadFrom": "LOAD FROM",
+  "home.loadFrom": "Load from",
   "home.resources": "Resources"
 }

apps/remix-ide/src/remixEngine.js

@@ -15,7 +15,7 @@ export class RemixEngine extends Engine {
     if (name === 'hardhat') return { queueTimeout: 60000 * 4 }
     if (name === 'truffle') return { queueTimeout: 60000 * 4 }
     if (name === 'localPlugin') return { queueTimeout: 60000 * 4 }
-    if (name === 'notification') return { queueTimeout: 60000 * 4 }
+    if (name === 'notification') return { queueTimeout: 60000 * 10 }
     if (name === 'sourcify') return { queueTimeout: 60000 * 4 }
     if (name === 'fetchAndCompile') return { queueTimeout: 60000 * 4 }
     if (name === 'walletconnect') return { queueTimeout: 60000 * 4 }

libs/remix-ui/app/src/lib/remix-app/components/modals/modal-wrapper.tsx

@@ -3,19 +3,33 @@ import { ModalDialog, ModalDialogProps, ValidationResult } from '@remix-ui/modal
 import { ModalTypes } from '../../types'
 
 interface ModalWrapperProps extends ModalDialogProps {
-    modalType?: ModalTypes
+  modalType?: ModalTypes
-    defaultValue?: string
+  defaultValue?: string
 }
 
 const ModalWrapper = (props: ModalWrapperProps) => {
   const [state, setState] = useState<ModalDialogProps>()
   const ref = useRef()
+  const formRef = useRef()
   const data = useRef()
 
+  const getFormData = () => {
+    if (formRef.current) {
+      const formData = new FormData(formRef.current)
+      const data = {}
+      for (const pair of formData.entries()) {
+        data[pair[0]] = pair[1]
+      }
+      return data
+    }
+  }
+
   const onFinishPrompt = async () => {
-    if (ref.current === undefined) {
+    if (ref.current === undefined && formRef.current === undefined) {
       onOkFn()
-    } else {
+    } else if (formRef.current) {
+      (props.okFn) ? props.okFn(getFormData()) : props.resolve(getFormData())
+    } else if(ref.current) {
       // @ts-ignore: Object is possibly 'null'.
       (props.okFn) ? props.okFn(ref.current.value) : props.resolve(ref.current.value)
     }
@@ -43,9 +57,29 @@ const ModalWrapper = (props: ModalWrapperProps) => {
       <>
         {props.message}
         <input onChange={onInputChanged} type={props.modalType === ModalTypes.password ? 'password' : 'text'} defaultValue={defaultValue} data-id="modalDialogCustomPromp" ref={ref} className="form-control" />
-        {!validation.valid && <span className='text-warning'>{validation.message}</span>}
+        {validation && !validation.valid && <span className='text-warning'>{validation.message}</span>}
-        </>
+      </>
-      )
+    )
+  }
+
+  const onFormChanged = () => {
+    if (props.validationFn) {
+      const validation = props.validationFn(getFormData())
+      setState(prevState => {
+        return { ...prevState, message: createForm(validation), validation }
+      })
+    }
+  }
+
+  const createForm = (validation: ValidationResult) => {
+    return (
+      <>
+         <form onChange={onFormChanged} ref={formRef}>
+          {props.message}
+          </form>
+          {validation && !validation.valid && <span className='text-warning'>{validation.message}</span>}
+      </>
+    )
   }
 
   useEffect(() => {
@@ -61,6 +95,14 @@ const ModalWrapper = (props: ModalWrapperProps) => {
             message: createModalMessage(props.defaultValue, { valid: true })
           })
           break
+        case ModalTypes.form:
+          setState({
+            ...props,
+            okFn: onFinishPrompt,
+            cancelFn: onCancelFn,
+            message: createForm({ valid: true })
+          })
+          break
         default:
           setState({
             ...props,

libs/remix-ui/app/src/lib/remix-app/types/index.ts

@@ -4,4 +4,5 @@ export const enum ModalTypes {
     prompt = 'prompt',
     password = 'password',
     default = 'default',
+    form = 'form',
 }

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

@@ -37,50 +37,56 @@ function HomeTabFeatured() {
               dotListClass="position-relative mt-2"
             >
               <div className="mx-1 px-1 d-flex">
-                <img src={"assets/img/bgRemi_small.webp"} style={{ flex: "1", height: "170px", maxWidth: "170px" }} alt="" ></img>
+                <a href="https://remix-project.org" target="__blank">
-                <div className="h6 w-50 p-4" style={{ flex: "1" }}>
+                  <img src={"assets/img/bgRemi_small.webp"} style={{ flex: "1", height: "170px", maxWidth: "170px" }} alt="" ></img>
+                </a>
+                <div className="h6 w-50 p-2 pl-4  align-self-center" style={{ flex: "1" }}>
                   <h5><FormattedMessage id='home.jumpIntoWeb3' /></h5>
-                  
+                  <div style={{ fontSize: '0.8rem' }} className="mb-3"><FormattedMessage id='home.jumpIntoWeb3Text'/></div>
-                  <div><FormattedMessage id='home.jumpIntoWeb3Text'/></div>
                   <a
-                    className="remixui_home_text btn btn-secondary mt-2 text-decoration-none mb-3"
+                    className="remixui_home_text btn-sm btn-secondary mt-2 text-decoration-none mb-3"
                     onClick={() => _paq.push(['trackEvent', 'hometab', 'featuredSection', 'jumpIntoWeb3'])}
                     target="__blank"
-                    href="https://remix-project.org"><FormattedMessage
+                    href="https://remix-project.org"
-                    id='home.jumpIntoWeb3More'
+                  >
-                  /></a>
+                    <FormattedMessage id='home.jumpIntoWeb3More'/>
+                  </a>
                 </div>
               </div>
               <div className="mx-1 px-1 d-flex">
-                <a href="https://www.youtube.com/@EthereumRemix/videos"  target="__blank">
+                <a href="https://www.youtube.com/@EthereumRemix/videos" target="__blank">
                   <img src={"/assets/img/YouTubeLogo.webp"} style={{ flex: "1", height: "170px", maxWidth: "170px" }} alt="" ></img>
                 </a>
-                <div className="h6 w-50 p-4" style={{ flex: "1" }}>
+                <div className="h6 w-50 p-2 pl-4  align-self-center" style={{ flex: "1" }}>
                   <h5><FormattedMessage id='home.remixYouTube' /></h5>
-                  <p style={{ fontStyle: 'italic' }}><FormattedMessage id='home.remixYouTubeText1' /></p>
+                  <p style={{ fontStyle: 'italic', fontSize: '1rem'  }}><FormattedMessage id='home.remixYouTubeText1' /></p>
-                  <div><FormattedMessage id='home.remixYouTubeText2' /></div>
+                  <div style={{ fontSize: '0.8rem' }} className="mb-3"><FormattedMessage id='home.remixYouTubeText2' /></div>
                   <a
-                    className="remixui_home_text btn btn-secondary mt-2 text-decoration-none mb-3"
+                    className="remixui_home_text btn-sm btn-secondary mt-2 text-decoration-none mb-3"
                     onClick={() => _paq.push(['trackEvent', 'hometab', 'featuredSection', 'youTubeMore'])}
                     target="__blank"
-                    href="https://www.youtube.com/@EthereumRemix/videos"><FormattedMessage
+                    href="https://www.youtube.com/@EthereumRemix/videos"
-                    id='home.remixYouTubeMore'
+                  >
-                  /></a>
+                    <FormattedMessage id='home.remixYouTubeMore' />
+                  </a>
                 </div>
               </div>
               <div className="mx-1 px-1 d-flex">
-                <img src={"/assets/img/remixRewardBetaTester_small.webp"} style={{ flex: "1", height: "170px", maxWidth: "170px" }} alt="" ></img>
+                <a href="https://docs.google.com/forms/d/e/1FAIpQLSd0WsJnKbeJo-BGrnf7WijxAdmE4PnC_Z4M0IApbBfHLHZdsQ/viewform" target="__blank">
-                <div className="h6 w-50 p-4" style={{ flex: "1" }}>
+                  <img src={"/assets/img/remixRewardBetaTester_small.webp"} style={{ flex: "1", height: "170px", maxWidth: "170px" }} alt="" ></img>
+                </a>
+                <div className="h6 w-50 p-2 pl-4  align-self-center" style={{ flex: "1" }}>
                   <h5><FormattedMessage id='home.betaTesting' /></h5>
-                  <p style={{ fontStyle: 'italic' }}><FormattedMessage id='home.betaTestingText1' /></p>
+                  <p style={{ fontStyle: 'italic', fontSize: '1rem' }}><FormattedMessage id='home.betaTestingText1' /></p>
-                  <div><FormattedMessage id='home.betaTestingText2' /></div>
+                  <div style={{ fontSize: '0.8rem' }} className="mb-3"><FormattedMessage id='home.betaTestingText2' /></div>
                   <a
-                    className="remixui_home_text btn btn-secondary mt-2 text-decoration-none mb-3"
+                    className="remixui_home_text btn-sm btn-secondary mt-2 text-decoration-none mb-3"
                     onClick={() => _paq.push(['trackEvent', 'hometab', 'featuredSection', 'betatesting'])}
                     target="__blank"
-                    href="https://docs.google.com/forms/d/e/1FAIpQLSd0WsJnKbeJo-BGrnf7WijxAdmE4PnC_Z4M0IApbBfHLHZdsQ/viewform"><FormattedMessage
+                    href="https://docs.google.com/forms/d/e/1FAIpQLSd0WsJnKbeJo-BGrnf7WijxAdmE4PnC_Z4M0IApbBfHLHZdsQ/viewform"
-                    id='home.betaTestingMore'
+                  >
-                  /></a>
+                    <FormattedMessage id='home.betaTestingMore' />
+                  </a>
                 </div>
               </div>
             </Carousel>

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

@@ -4,6 +4,7 @@ import { FormattedMessage } from 'react-intl'
 import { ModalDialog } from '@remix-ui/modal-dialog' // eslint-disable-line
 import { Toaster } from '@remix-ui/toaster' // eslint-disable-line
 const _paq = window._paq = window._paq || [] // eslint-disable-line
+import { CustomTooltip } from '@remix-ui/helper';
 
 interface  HomeTabFileProps {
   plugin: any
@@ -153,17 +154,27 @@ function HomeTabFile ({plugin}: HomeTabFileProps) {
         </div>
       </ModalDialog>
       <Toaster message={state.toasterMsg} />
-      <div className="justify-content-start mt-1 p-2 border-bottom d-flex flex-column" id="hTFileSection">
+      <div className="justify-content-start mt-1 p-2 d-flex flex-column" id="hTFileSection">
-        <label style={{fontSize: "1rem"}}><FormattedMessage id='home.files' /></label>
+        <label style={{fontSize: "1.2rem"}}><FormattedMessage id='home.files' /></label>
-        <button className="btn btn-primary p-2 border my-1" data-id="homeTabNewFile" style={{width: 'fit-content'}} onClick={() => createNewFile()}><FormattedMessage id='home.newFile' /></button>
+        <div className="dflex">
-        <label className="btn p-2 border my-1" style={{width: 'fit-content'}} htmlFor="openFileInput"><FormattedMessage id='home.openFile' /></label>
+          <button className="btn btn-primary p-2 mr-2 border my-1" data-id="homeTabNewFile" style={{width: 'fit-content'}} onClick={() => createNewFile()}><FormattedMessage id='home.newFile' /></button>
-        <input title="open file" type="file" id="openFileInput" onChange={(event) => {
+          <label className="btn p-2 mr-2 border my-1" style={{width: 'fit-content', cursor: 'pointer'}} htmlFor="openFileInput"><FormattedMessage id='home.openFile' /></label>
-          event.stopPropagation()
+          <input title="open file" type="file" id="openFileInput" onChange={(event) => {
-          plugin.verticalIcons.select('filePanel')
+            event.stopPropagation()
-          uploadFile(event.target)
+            plugin.verticalIcons.select('filePanel')
-        }} multiple />
+            uploadFile(event.target)
-        <button className="btn p-2 border my-1" style={{width: 'fit-content'}} onClick={() => connectToLocalhost()}><FormattedMessage id='home.connectToLocalhost' /></button>
+          }} multiple />
-        <label className="pt-2"><FormattedMessage id='home.loadFrom' /></label>
+          <CustomTooltip
+            placement={'top'}
+            tooltipId="overlay-tooltip"
+            tooltipClasses="text-nowrap"
+            tooltipText={"Connect to Localhost"}
+            tooltipTextClasses="border bg-light text-dark p-1 pr-3"
+          >
+            <button className="btn p-2 border my-1" style={{width: 'fit-content'}} onClick={() => connectToLocalhost()}><FormattedMessage id='home.connectToLocalhost' /></button>
+          </CustomTooltip>
+        </div>
+        <label style={{fontSize: "0.8rem"}} className="pt-2"><FormattedMessage id='home.loadFrom' /></label>
         <div className="d-flex">
           <button
             className="btn p-2 border mr-2"

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

@@ -68,7 +68,7 @@ function HomeTabGetStarted ({plugin}: HomeTabGetStartedProps) {
   return (
     <div className="pl-2" id="hTGetStartedSection">
       <label style={{fontSize: "1.2rem"}}>
-        <span className="mr-2" style={{fontWeight: "bold"}}>
+        <span className="mr-2">
           <FormattedMessage id="home.getStarted" />
         </span>
         - <FormattedMessage id="home.projectTemplates" />

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

@@ -2,6 +2,7 @@
 import React, { useEffect, useState, useContext } from 'react'
 import { FormattedMessage } from 'react-intl'
 import { ThemeContext } from '../themeContext'
+import { CustomTooltip } from '@remix-ui/helper'
 declare global {
   interface Window {
     _paq: any
@@ -27,10 +28,6 @@ function HomeTabLearn ({plugin}: HomeTabLearnProps) {
 
   const themeFilter = useContext(ThemeContext)
 
-  const openLink = () => {
-    window.open("https://remix-ide.readthedocs.io/en/latest/remix_tutorials_learneth.html?highlight=learneth#learneth-tutorial-repos", '_blank')
-  }
-
   const startLearnEthTutorial = async (tutorial: 'basics' | 'soliditybeginner' | 'deploylibraries') => {
     await plugin.appManager.activatePlugin(['solidity', 'LearnEth', 'solidityUnitTesting'])
     plugin.verticalIcons.select('LearnEth')
@@ -52,17 +49,25 @@ function HomeTabLearn ({plugin}: HomeTabLearnProps) {
   return (
     <div className="d-flex px-2 pb-2 pt-2 d-flex flex-column" id="hTLearnSection">
       <div className="d-flex justify-content-between">
-        <label className="py-2 align-self-center m-0" style={{fontSize: "1.2rem"}}>
+        <label className="py-2 pt-3 align-self-center m-0" style={{fontSize: "1.2rem"}}>
           <FormattedMessage id="home.learn" />
         </label>
-        <button
+        <CustomTooltip
-          onClick={ async () => {
+            placement={'top'}
-            await goToLearnEthHome()
+            tooltipId="overlay-tooltip"
-          }}
+            tooltipClasses="text-nowrap"
-          className="h-100 px-2 pt-0 btn"
+            tooltipText={"See all tutorials"}
+            tooltipTextClasses="border bg-light text-dark p-1 pr-3"
         >
-          <img className="align-self-center" src="assets/img/learnEthLogo.webp" alt="" style={ { filter: themeFilter.filter, width: "1rem", height: "1ren" } } />
+          <button
-        </button>
+            onClick={ async () => {
+              await goToLearnEthHome()
+            }}
+            className="h-100 px-2 pt-0 btn"
+          >
+            <img className="align-self-center" src="assets/img/learnEthLogo.webp" alt="" style={ { filter: themeFilter.filter, width: "1rem", height: "1ren" } } />
+          </button>
+        </CustomTooltip>
       </div>
       <div className="d-flex flex-column">
         <label className="d-flex flex-column btn border" onClick={() => setState((prevState) => {return { ...prevState, visibleTutorial: VisibleTutorial.Basics }})}>
@@ -70,7 +75,7 @@ function HomeTabLearn ({plugin}: HomeTabLearnProps) {
             <FormattedMessage id="home.learnEth1" />
           </label>
           {(state.visibleTutorial === VisibleTutorial.Basics) && <div className="pt-2 d-flex flex-column text-left">
-            <span>
+            <span className="py-1" style={{fontSize: "0.8rem"}}>
               <FormattedMessage id="home.learnEth1Desc" />
             </span>
             <button className="btn btn-sm btn-secondary mt-2" style={{width: 'fit-content'}} onClick={() => startLearnEthTutorial('basics')}>
@@ -83,11 +88,12 @@ function HomeTabLearn ({plugin}: HomeTabLearnProps) {
             <FormattedMessage id="home.learnEth2" />
           </label>
           {(state.visibleTutorial === VisibleTutorial.Intermediate) && <div className="pt-2 d-flex flex-column text-left">
-            <span>
+            <span className="py-1" style={{fontSize: "0.8rem"}}>
-            <FormattedMessage id="home.learnEth2Desc" /></span>
+              <FormattedMessage id="home.learnEth2Desc" />
+            </span>
             <button className="btn btn-sm btn-secondary mt-2" style={{width: 'fit-content'}} onClick={() => startLearnEthTutorial('soliditybeginner')}>
-            <FormattedMessage id="home.getStarted" />
+              <FormattedMessage id="home.getStarted" />
-          </button>
+            </button>
           </div>}
         </label>
         <label className="d-flex flex-column btn border" onClick={() => setState((prevState) => {return { ...prevState, visibleTutorial: VisibleTutorial.Advanced }})}>
@@ -95,11 +101,12 @@ function HomeTabLearn ({plugin}: HomeTabLearnProps) {
             <FormattedMessage id="home.remixAdvanced" />
           </label>
           {(state.visibleTutorial === VisibleTutorial.Advanced) && <div className="pt-2 d-flex flex-column text-left">
-            <span>
+            <span className="py-1" style={{fontSize: "0.8rem"}}>
-            <FormattedMessage id="home.remixAdvancedDesc" /></span>
+              <FormattedMessage id="home.remixAdvancedDesc" />
+            </span>
             <button className="btn btn-sm btn-secondary mt-2" style={{width: 'fit-content'}} onClick={() => startLearnEthTutorial('deploylibraries')}>
-            <FormattedMessage id="home.getStarted" />
+              <FormattedMessage id="home.getStarted" />
-          </button>
+            </button>
           </div>}
         </label>
       </div>

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

@@ -8,27 +8,28 @@ function HomeTabScamAlert () {
   return (
     <div className="" id="hTScamAlertSection">
       <label className="pl-2 text-danger" style={{fontSize: "1.2rem"}}><FormattedMessage id='home.scamAlert' /></label>
-      <div className="py-2 ml-2 mb-1 align-self-end mb-2 d-flex flex-column border border-danger">
+      <div className="py-2 ml-2 mb-1 align-self-end mb-2 d-flex  border border-danger">
-        <span className="pl-4 mt-2">
+        <span className="align-self-center pl-4 mt-1">
-          <i className="pr-2 text-danger fas fa-exclamation-triangle"></i>
+          <i style={{fontSize: 'xxx-large', fontWeight: 'lighter'}} className="pr-2 text-danger far fa-exclamation-triangle"></i>
-          <b><FormattedMessage id='home.scamAlert' />:</b>
-        </span>
-        <span className="pl-4 mt-1">
-          <FormattedMessage id='home.scamAlertText' />
-        </span>
-        <span className="pl-4 mt-1">
-          <FormattedMessage id='home.scamAlertText2' />:
-          <a className="pl-2 remixui_home_text" onClick={() => _paq.push(['trackEvent', 'hometab', 'scamAlert', 'learnMore'])}  target="__blank" href="https://medium.com/remix-ide/remix-in-youtube-crypto-scams-71c338da32d">
-            <FormattedMessage id='home.learnMore' />
-          </a>
-        </span>
-        <span className="pl-4 mt-1">
-          <FormattedMessage id='home.scamAlertText3' />
-          : &nbsp;
-          <a className="remixui_home_text" onClick={() => _paq.push(['trackEvent', 'hometab', 'scamAlert', 'safetyTips'])} target="__blank" href="https://remix-ide.readthedocs.io/en/latest/security.html">
-            <FormattedMessage id='home.here' />
-          </a>
         </span>
+        <div className='d-flex flex-column'>
+          <span className="pl-4 mt-1">
+            <FormattedMessage id='home.scamAlertText' />
+          </span>
+          <span className="pl-4 mt-1">
+            <FormattedMessage id='home.scamAlertText2' />:
+            <a className="pl-2 remixui_home_text" onClick={() => _paq.push(['trackEvent', 'hometab', 'scamAlert', 'learnMore'])}  target="__blank" href="https://medium.com/remix-ide/remix-in-youtube-crypto-scams-71c338da32d">
+              <FormattedMessage id='home.learnMore' />
+            </a>
+          </span>
+          <span className="pl-4 mt-1">
+            <FormattedMessage id='home.scamAlertText3' />
+            : &nbsp;
+            <a className="remixui_home_text" onClick={() => _paq.push(['trackEvent', 'hometab', 'scamAlert', 'safetyTips'])} target="__blank" href="https://remix-ide.readthedocs.io/en/latest/security.html">
+              <FormattedMessage id='home.here' />
+            </a>
+          </span>
+        </div>
       </div>
     </div>
   )

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

@@ -52,19 +52,22 @@ function HomeTabTitle() {
 
   return (
     <div className="px-2 pb-2 pt-2 d-flex flex-column border-bottom" id="hTTitleSection">
-      <div className="mr-4 d-flex">
+      
-        <div onClick={() => playRemi()} style={{ filter: themeFilter.filter}} >
+      <div className="d-flex py-2 justify-content-between">
-          <BasicLogo classList="align-self-end remixui_home_logoImg" solid={false} />
+        <div className='d-flex justify-content-start'>
-        </div>
-        <audio
-          id="remiAudio"
-          muted={false}
-          src="assets/audio/remiGuitar-single-power-chord-A-minor.mp3"
-          ref={remiAudioEl}
-        ></audio>
-      </div>
-      <div className="d-flex justify-content-between">
         <span className="h-80 text-uppercase" style={{ fontSize: 'xx-large', fontFamily: "Noah, sans-serif" }}>Remix</span>
+          <div className="ml-2 d-flex">
+            <div onClick={() => playRemi()} >
+              <img className="" src="assets/img/guitarRemiCroped.webp" style={{height: "3rem"}} alt=""></img>
+            </div>
+            <audio
+              id="remiAudio"
+              muted={false}
+              src="assets/audio/remiGuitar-single-power-chord-A-minor.mp3"
+              ref={remiAudioEl}
+            ></audio>
+          </div>
+        </div>
         <span>
           <CustomTooltip
             placement={'top'}
@@ -94,7 +97,7 @@ function HomeTabTitle() {
                 openLink("https://twitter.com/EthereumRemix")
                 _paq.push(['trackEvent', 'hometab', 'socialMedia', 'twitter'])
               }}
-              className="border-0 h-100 pl-2 btn fab fa-twitter">
+              className="border-0 p-2 h-100 pl-2 btn fab fa-twitter">
             </button>
           </CustomTooltip>
 
@@ -110,7 +113,7 @@ function HomeTabTitle() {
                 openLink("https://www.linkedin.com/company/ethereum-remix/")
                 _paq.push(['trackEvent', 'hometab', 'socialmedia', 'linkedin'])
               }}
-              className="border-0 h-100 pl-2 btn fa fa-linkedin">
+              className="border-0 p-2 h-100 pl-2 btn fa fa-linkedin">
             </button>
           </CustomTooltip>
 
@@ -126,7 +129,7 @@ function HomeTabTitle() {
                 openLink("https://medium.com/remix-ide")
                 _paq.push(['trackEvent', 'hometab', 'socialmedia', 'medium'])
               }}
-              className="border-0 h-100 pl-2 btn fab fa-medium">
+              className="border-0 p-2 h-100 pl-2 btn fab fa-medium">
             </button>
           </CustomTooltip>
 
@@ -142,12 +145,12 @@ function HomeTabTitle() {
                 openLink("https://gitter.im/ethereum/remix")
                 _paq.push(['trackEvent', 'hometab', 'socialmedia', 'gitter'])
               }}
-              className="border-0 h-100 pl-2 btn fab fa-gitter">
+              className="border-0 h-100 p-2 btn fab fa-gitter">
             </button>
           </CustomTooltip>
         </span>
       </div>
-      <b className="pb-1 text-dark" style={{ fontStyle: 'italic' }}>
+      <b className="py-1 text-dark" style={{ fontStyle: 'italic' }}>
         <FormattedMessage id="home.nativeIDE" />
       </b>
       <div className="pb-1" id="hTGeneralLinks">

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

@@ -45,18 +45,20 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
   }, [])
 
   return (
-    <div className="d-flex flex-row w-100" data-id="remixUIHTAll">
+    <div className="d-flex flex-column w-100" data-id="remixUIHTAll">
       <ThemeContext.Provider value={ state.themeQuality }>
-        <div className="px-2 pl-3 justify-content-start d-flex border-right flex-column" id="remixUIHTLeft" style={{flex: 2, minWidth: "35%"}}>
+        <div className='d-flex flex-row w-100'>
-          <HomeTabTitle />
+          <div className="px-2 pl-3 justify-content-start d-flex border-right flex-column" id="remixUIHTLeft" style={{ width: 'inherit' }}>
-          <HomeTabFile plugin={plugin} />
+            <HomeTabTitle />
-          <HomeTabLearn plugin={plugin} />
+            <HomeTabFile plugin={plugin} />
-        </div>
+            <HomeTabLearn plugin={plugin} />
-        <div className="pl-2 pr-3 justify-content-start d-flex flex-column" style={{width: "65%"}} id="remixUIHTRight">
+          </div>
-          <HomeTabFeatured></HomeTabFeatured>
+          <div className="pl-2 pr-3 justify-content-start d-flex flex-column" style={{width: "65%"}} id="remixUIHTRight">
-          <HomeTabGetStarted plugin={plugin}></HomeTabGetStarted>
+            <HomeTabFeatured></HomeTabFeatured>
-          <HomeTabFeaturedPlugins plugin={plugin}></HomeTabFeaturedPlugins>
+            <HomeTabGetStarted plugin={plugin}></HomeTabGetStarted>
-          <HomeTabScamAlert></HomeTabScamAlert>
+            <HomeTabFeaturedPlugins plugin={plugin}></HomeTabFeaturedPlugins>
+            <HomeTabScamAlert></HomeTabScamAlert>
+          </div>
         </div>
       </ThemeContext.Provider>
     </div>

libs/remix-ui/modal-dialog/src/lib/types/index.ts

@@ -9,7 +9,7 @@ export interface ModalDialogProps {
   timestamp?: number,
   title?: string | JSX.Element,
   validation?: ValidationResult
-  validationFn?: (value: string) => ValidationResult
+  validationFn?: (value: any) => ValidationResult
   message?: string | JSX.Element,
   okLabel?: string | JSX.Element,
   okFn?: (value?:any) => void,

libs/remix-ui/solidity-compiler/src/lib/logic/flattenerUtilities.ts

@@ -28,7 +28,7 @@ function _traverse(graph, visited, ast, name) {
 	for (const dependency of dependencies) {
 		const path = resolve(name, dependency);
 		if (path in visited) {
-			continue;
+			// continue; // fixes wrong ordering of source in flattened file
 		}
 		visited[path] = 1;
 		graph.add(name, path);

tsconfig.base.json

@@ -19,7 +19,7 @@
     "target": "ES2015",
     "module": "ES2020",
     "typeRoots": ["node_modules/@types", "libs/**/*.d.ts"],
-    "lib": ["es2017", "es2019", "dom"],
+    "lib": ["es2017", "es2019", "dom", "dom.iterable"],
     "skipLibCheck": true,
     "skipDefaultLibCheck": true,
     "baseUrl": "."

tsconfig.json

@@ -15,7 +15,8 @@
     "module": "CommonJS",
     "lib": [
       "es2017",
-      "dom"
+      "dom",
+      "dom.iterable"
     ],
     "skipLibCheck": true,
     "skipDefaultLibCheck": true,