From 6df698722463aaf83e315a2153dff016d3381ed8 Mon Sep 17 00:00:00 2001
From: lianahus <liana@ethereum.org>
Date: Thu, 5 May 2022 14:09:30 +0200
Subject: [PATCH] updated the ui

---
 .../contracts/solidity_compiler_config.json   |  24 +--
 .../src/lib/compiler-container.tsx            | 186 ++++++++----------
 2 files changed, 88 insertions(+), 122 deletions(-)

diff --git a/apps/remix-ide/contracts/solidity_compiler_config.json b/apps/remix-ide/contracts/solidity_compiler_config.json
index 7b93fa3532..88cb6ab548 100644
--- a/apps/remix-ide/contracts/solidity_compiler_config.json
+++ b/apps/remix-ide/contracts/solidity_compiler_config.json
@@ -1,24 +1,12 @@
 {
-    "_comment": "for foll description visit https://docs.soliditylang.org/en/develop/using-the-compiler.html?highlight=standard%20json#input-description",
+    "_comment": "For more info please visit https://docs.soliditylang.org/en/develop/using-the-compiler.html?highlight=standard%20json#input-description",
     "language": "Solidity",
-    "sources":
-    {
-      "myFile.sol":
-      {
-        "keccak256": "0x123...",
-        "urls": [
-        ]
-      },
-      "destructible":
-      {
-      }
-    },
     "settings":
     {
       "stopAfter": "parsing",
       "remappings": [ ":g=/dir" ],
       "optimizer": {
-        "enabled": true,
+        "enabled": false,
         "runs": 200,
         "details": {
           "peephole": true,
@@ -31,10 +19,11 @@
           "yul": false,
           "yulDetails": {
             "stackAllocation": true,
+            "optimizerSteps": "dhfoDgvulfnTUtnIf..."
           }
         }
       },
-      "evmVersion": "london",
+      "evmVersion": "byzantium",
       "viaIR": true,
       "debug": {
         "revertStrings": "default",
@@ -44,8 +33,6 @@
         "useLiteralContent": true,
         "bytecodeHash": "ipfs"
       },
-      "libraries": {
-      },
       "outputSelection": {
         "*": {
           "*": [
@@ -62,9 +49,6 @@
       },
       "modelChecker":
       {
-        "contracts":
-        {
-        },
         "divModNoSlacks": false,
         "engine": "chc",
         "invariants": ["contract", "reentrancy"],
diff --git a/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx b/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx
index 8fada2cb3a..15f9bb8a9f 100644
--- a/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx
+++ b/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx
@@ -156,8 +156,9 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
   }
 
   const createNewConfigFile = async () => {
-      await api.writeFile(configFilePathInput.current.value, "")
-      setConfigFilePath(configFilePathInput.current.value)
+    const configFileContent =
+    await api.writeFile(configFilePathInput.current.value, "")
+    setConfigFilePath(configFilePathInput.current.value)
   }
   const handleConfigPathChange = async () => {
     if (await api.fileExists(configFilePathInput.current.value))
@@ -166,7 +167,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
       modal(
         'New configuration file', 'The file you entered does not exist. Do you want to create a new one?',
         'Create',
-        async () => await createNewConfigFile,
+        async () => await createNewConfigFile(),
         'Cancel',
         () => {}
       )
@@ -568,12 +569,29 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
  return (
     <section>
       <article>
-        <header className='remixui_compilerSection border-bottom'>
-          <div className="pl-0 d-flex remixui_compilerConfig custom-control custom-checkbox" onClick={toggleConfigType}>
-            <input type="radio" value="manual" checked={manualConfig} name="configType" />
-            <label className="font-weight-bold ml-1 remixui_compilerLabel">Compiler Configuration</label>
+        <header className='pt-0 remixui_compilerSection border-bottom'>
+          <div className="d-flex remixui_compilerConfig custom-control custom-checkbox">
+            <input className="custom-control-input" type="checkbox" value="file" onChange={toggleConfigType} checked={!manualConfig} id="sCManualConfig" />
+            <label className="font-weight-bold pt-1 form-check-label custom-control-label remixui_compilerLabel" htmlFor="sCManualConfig">Use configuration file</label>
+          </div>
+          <div className={`pt-2 ml-3 ml-2 align-items-start flex-column ${!manualConfig ? 'd-flex' : 'd-none'}`}>
+            { !showFilePathInput && <span className="py-2 text-primary">{configFilePath}</span> }
+            <input
+              ref={configFilePathInput}
+              className={`py-0 my-0 ${showFilePathInput ? "d-flex" : "d-none"}`}
+              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."
+              onKeyPress={event => {
+                if (event.key === 'Enter') {
+                  handleConfigPathChange()
+                }
+              }}
+            />
+            { !showFilePathInput && <button className="btn-secondary" onClick={() => {setShowFilePathInput(true)}}>Set new config file</button> }
           </div>
-          <div className={`pt-2 ml-3 flex-column ${manualConfig ? 'd-flex' : 'd-none'}`}>
+          <div className={`flex-column ${manualConfig ? 'd-flex' : 'd-none'}`}>
+            <div className="pl-0 d-flex remixui_compilerConfig custom-control custom-checkbox">
+            </div>
             <div className="mb-2">
               <label className="remixui_compilerLabel form-check-label" htmlFor="versionSelector">
                 Compiler
@@ -608,68 +626,32 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
                 {compileTabLogic.evmVersions.map((version, index) => (<option key={index} data-id={state.evmVersion === version ? 'selected' : ''} value={version}>{version}</option>))}
               </select>
             </div>
-            <div className="mt-3">
-              <div className="border-dark pb-3 flex-column">
-                <div className="mt-2 remixui_compilerConfig custom-control custom-checkbox">
-                  <input className="remixui_autocompile custom-control-input" type="checkbox" onChange={handleAutoCompile} data-id="compilerContainerAutoCompile" id="autoCompile" title="Auto compile" checked={state.autoCompile} />
-                  <label className="form-check-label custom-control-label" htmlFor="autoCompile">Auto compile</label>
-                </div>
-                <div className="mt-1 remixui_compilerConfig custom-control custom-checkbox">
-                  <div className="justify-content-between align-items-center d-flex">
-                    <input onChange={(e) => { handleOptimizeChange(e.target.checked) }} className="custom-control-input" id="optimize" type="checkbox" checked={state.optimize} />
-                    <label className="form-check-label custom-control-label" htmlFor="optimize">Enable optimization</label>
-                    <input
-                      min="1"
-                      className="custom-select ml-2 remixui_runs"
-                      id="runs"
-                      placeholder="200"
-                      value={state.runs}
-                      type="number"
-                      title="Estimated number of times each opcode of the deployed code will be executed across the life-time of the contract."
-                      onChange={(e) => onChangeRuns(e.target.value)}
-                      disabled={!state.optimize}
-                    />
-                  </div>
-                </div>
-                <div className="mt-1 remixui_compilerConfig custom-control custom-checkbox">
-                  <input className="remixui_autocompile custom-control-input" onChange={handleHideWarningsChange} id="hideWarningsBox" type="checkbox" title="Hide warnings" checked={state.hideWarnings} />
-                  <label className="form-check-label custom-control-label" htmlFor="hideWarningsBox">Hide warnings</label>
-                </div>
+            <div className="mt-1 mt-3 border-dark pb-3  remixui_compilerConfig custom-control custom-checkbox">
+              <div className="justify-content-between align-items-center d-flex">
+                <input onChange={(e) => { handleOptimizeChange(e.target.checked) }} className="custom-control-input" id="optimize" type="checkbox" checked={state.optimize} />
+                <label className="form-check-label custom-control-label" htmlFor="optimize">Enable optimization</label>
+                <input
+                  min="1"
+                  className="custom-select ml-2 remixui_runs"
+                  id="runs"
+                  placeholder="200"
+                  value={state.runs}
+                  type="number"
+                  title="Estimated number of times each opcode of the deployed code will be executed across the life-time of the contract."
+                  onChange={(e) => onChangeRuns(e.target.value)}
+                  disabled={!state.optimize}
+                />
               </div>
             </div>
-            {
-              isHardhatProject &&
-              <div className="mt-3 remixui_compilerConfig custom-control custom-checkbox">
-                <input className="remixui_autocompile custom-control-input" onChange={updatehhCompilation} id="enableHardhat" type="checkbox" title="Enable Hardhat Compilation" checked={hhCompilation} />
-                <label className="form-check-label custom-control-label" htmlFor="enableHardhat">Enable Hardhat Compilation</label>
-                <a className="mt-1 text-nowrap" href='https://remix-ide.readthedocs.io/en/latest/hardhat.html#enable-hardhat-compilation' target={'_blank'}>
-                  <OverlayTrigger placement={'right'} overlay={
-                    <Tooltip className="text-nowrap" id="overlay-tooltip">
-                      <span className="p-1 pr-3" style={{ backgroundColor: 'black', minWidth: '230px' }}>Learn how to use Hardhat Compilation</span>
-                    </Tooltip>
-                  }>
-                    <i style={{ fontSize: 'medium' }} className={'ml-2 fal fa-info-circle'} aria-hidden="true"></i>
-                  </OverlayTrigger>
-                </a>
-              </div>
-            }
           </div>
-          <div className="pl-0 d-flex remixui_compilerConfig custom-control custom-checkbox" onClick={toggleConfigType}>
-            <input type="radio" value="file" checked={!manualConfig} name="configType" />
-            <label className="font-weight-bold ml-1 remixui_compilerLabel">Use configuration file</label>
+          <label className="font-weight-bold ml-1 mt-3 remixui_compilerLabel">Plugin settings</label>
+          <div className="mt-2 remixui_compilerConfig custom-control custom-checkbox">
+            <input className="remixui_autocompile custom-control-input" type="checkbox" onChange={handleAutoCompile} data-id="compilerContainerAutoCompile" id="autoCompile" title="Auto compile" checked={state.autoCompile} />
+            <label className="form-check-label custom-control-label" htmlFor="autoCompile">Auto compile</label>
           </div>
-          <div className={`pt-2 ml-3 align-items-start flex-column ${!manualConfig ? 'd-flex' : 'd-none'}`}>
-            { !showFilePathInput && <span>{configFilePath}</span> }
-              { showFilePathInput && <input
-                ref={configFilePathInput}
-                placeholder={"Enter new path"}
-                onKeyPress={event => {
-                  if (event.key === 'Enter') {
-                    handleConfigPathChange()
-                  }
-                }}
-              /> }
-              { !showFilePathInput && <button className="mt-2 btn-secondary" onClick={() => {setShowFilePathInput(true)}}>Set new config file</button> }
+          <div className="mt-1 mb-2 remixui_compilerConfig custom-control custom-checkbox">
+            <input className="remixui_autocompile custom-control-input" onChange={handleHideWarningsChange} id="hideWarningsBox" type="checkbox" title="Hide warnings" checked={state.hideWarnings} />
+            <label className="form-check-label custom-control-label" htmlFor="hideWarningsBox">Hide warnings</label>
           </div>
           {
             isHardhatProject &&
@@ -704,52 +686,52 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
             </div>
           }
           <div>
-          <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}>
-            <OverlayTrigger overlay={
-              <Tooltip id="overlay-tooltip-compile">
-                <div className="text-left">
-                  <div><b>Ctrl+S</b> for compiling</div>
-                </div>
-              </Tooltip>
-            }>
-              <span>
-                { <i ref={compileIcon} className="fas fa-sync remixui_iconbtn" aria-hidden="true"></i> }
-                Compile { typeof state.compiledFileName === 'string' ? extractNameFromKey(state.compiledFileName) || '<no file selected>' : '<no file selected>' }
-              </span>
-            </OverlayTrigger>
-          </button>
-          <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="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}>
               <OverlayTrigger overlay={
-                <Tooltip id="overlay-tooltip-compile-run">
+                <Tooltip id="overlay-tooltip-compile">
                   <div className="text-left">
-                  <div><b>Ctrl+Shift+S</b> for compiling and script execution</div>
+                    <div><b>Ctrl+S</b> for compiling</div>
                   </div>
                 </Tooltip>
               }>
                 <span>
-                  Compile and Run script
+                  { <i ref={compileIcon} className="fas fa-sync remixui_iconbtn" aria-hidden="true"></i> }
+                  Compile { typeof state.compiledFileName === 'string' ? extractNameFromKey(state.compiledFileName) || '<no file selected>' : '<no file selected>' }
                 </span>
-                </OverlayTrigger>
-            </button>            
-            <OverlayTrigger overlay={
-                  <Tooltip id="overlay-tooltip-compile-run-doc">
-                    <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>
-                    <pre>
-                      <code>
-                      /**<br />
-                      * @title ContractName<br />
-                      * @dev ContractDescription<br />
-                      * @custom:dev-run-script file_path<br />
-                      */<br />
-                      contract ContractName {'{}'}<br />
-                      </code>
-                    </pre>
-                    Click to know more
+              </OverlayTrigger>
+            </button>
+            <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}>
+                <OverlayTrigger overlay={
+                  <Tooltip id="overlay-tooltip-compile-run">
+                    <div className="text-left">
+                    <div><b>Ctrl+Shift+S</b> for compiling and script execution</div>
                     </div>
                   </Tooltip>
                 }>
+                  <span>
+                    Compile and Run script
+                  </span>
+                  </OverlayTrigger>
+              </button>            
+              <OverlayTrigger overlay={
+                <Tooltip id="overlay-tooltip-compile-run-doc">
+                  <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>
+                  <pre>
+                    <code>
+                    /**<br />
+                    * @title ContractName<br />
+                    * @dev ContractDescription<br />
+                    * @custom:dev-run-script file_path<br />
+                    */<br />
+                    contract ContractName {'{}'}<br />
+                    </code>
+                  </pre>
+                  Click to know more
+                  </div>
+                </Tooltip>
+              }>
                 <a href="https://remix-ide.readthedocs.io/en/latest/running_js_scripts.html#compile-a-contract-and-run-a-script-on-the-fly" target="_blank" ><i className="pl-2 ml-2 mt-3 mb-1 fas fa-info text-dark"></i></a>
               </OverlayTrigger>
               <CopyToClipboard tip="Copy tag to use in contract NatSpec" getContent={() => '@custom:dev-run-script file_path'} direction='top'>