From 0feec2e3d853ffab2273d88aeb2455d5fb77a7e4 Mon Sep 17 00:00:00 2001 From: yann300 Date: Thu, 7 Apr 2022 12:07:59 +0200 Subject: [PATCH] add "Compile and Run" button --- .../remix-ide/src/app/tabs/compile-and-run.ts | 7 +- .../css/themes/bootstrap-cerulean.min.css | 11 +-- .../css/themes/bootstrap-cyborg.min.css | 13 +-- .../css/themes/bootstrap-flatly.min.css | 9 +- .../css/themes/bootstrap-spacelab.min.css | 11 +-- .../assets/css/themes/remix-black_undtds.css | 8 +- .../assets/css/themes/remix-candy_ikhg4m.css | 8 +- .../assets/css/themes/remix-dark_tvx1s2.css | 8 +- .../assets/css/themes/remix-light_powaqg.css | 8 +- .../css/themes/remix-midcentury_hrzph3.css | 8 +- .../solidity-compiler/src/app/compiler-api.ts | 4 + libs/remix-lib/src/types/ICompilerApi.ts | 1 + .../src/lib/compiler-container.tsx | 88 ++++++++++++++----- .../solidity-compiler/src/lib/css/style.css | 2 +- 14 files changed, 122 insertions(+), 64 deletions(-) diff --git a/apps/remix-ide/src/app/tabs/compile-and-run.ts b/apps/remix-ide/src/app/tabs/compile-and-run.ts index 7affa13d27..add317e318 100644 --- a/apps/remix-ide/src/app/tabs/compile-and-run.ts +++ b/apps/remix-ide/src/app/tabs/compile-and-run.ts @@ -11,7 +11,7 @@ export const profile = { name: 'compileAndRun', displayName: 'Compile and Run', description: 'after each compilation, run the script defined in Natspec.', - methods: [], + methods: ['runScriptAfterCompilation'], version: packageJson.version, kind: 'none' } @@ -42,6 +42,11 @@ export class CompileAndRun extends Plugin { } } + runScriptAfterCompilation (fileName: string) { + this.targetFileName = fileName + _paq.push(['trackEvent', 'ScriptExecutor', 'request_run_script']) + } + async runScript (fileName, clearAllInstances) { await this.call('terminal', 'log', `running ${fileName} ...`) try { diff --git a/apps/remix-ide/src/assets/css/themes/bootstrap-cerulean.min.css b/apps/remix-ide/src/assets/css/themes/bootstrap-cerulean.min.css index e55dd84d72..f95afd68ec 100644 --- a/apps/remix-ide/src/assets/css/themes/bootstrap-cerulean.min.css +++ b/apps/remix-ide/src/assets/css/themes/bootstrap-cerulean.min.css @@ -30,6 +30,7 @@ --warning:#dd5600; --danger:#c71c22; --light:#f8f9fa; + --text:#343a40; --dark:#343a40; --body-bg: #fff; --text-bg-mark: #fcf8e3; @@ -5186,11 +5187,11 @@ a.close.disabled { border-left-color:#000 } .tooltip-inner { - padding:.25rem .5rem; - color:#fff; - text-align:center; - background-color:var(--text-background); - border-radius:.25rem + padding: .25rem .5rem; + color: var(--text); + text-align: center; + background-color: var(--light); + border-radius: .25rem } .popover { position:absolute; diff --git a/apps/remix-ide/src/assets/css/themes/bootstrap-cyborg.min.css b/apps/remix-ide/src/assets/css/themes/bootstrap-cyborg.min.css index 4e72386890..1ed6d7b4b6 100644 --- a/apps/remix-ide/src/assets/css/themes/bootstrap-cyborg.min.css +++ b/apps/remix-ide/src/assets/css/themes/bootstrap-cyborg.min.css @@ -32,6 +32,7 @@ --warning:#f80; --danger:#c00; --light:#222; + --text:#adafae; --dark:#adafae; --body-bg: #060606; --text-bg-mark: #fcf8e3; @@ -5189,12 +5190,12 @@ a.close.disabled { border-left-color:#282828 } .tooltip-inner { - padding:.25rem .5rem; - color:#fff; - text-align:center; - background-color:var(--text-background); - border-radius:.25rem -} + padding: .25rem .5rem; + color: var(--text); + text-align: center; + background-color: var(--light); + border-radius: .25rem + } .popover { position:absolute; top:0; diff --git a/apps/remix-ide/src/assets/css/themes/bootstrap-flatly.min.css b/apps/remix-ide/src/assets/css/themes/bootstrap-flatly.min.css index 92e36ea836..0dcc6e3c22 100644 --- a/apps/remix-ide/src/assets/css/themes/bootstrap-flatly.min.css +++ b/apps/remix-ide/src/assets/css/themes/bootstrap-flatly.min.css @@ -30,6 +30,7 @@ --warning:#f39c12; --danger:#e74c3c; --light:#ecf0f1; + --text:#7b8a8b; --dark:#7b8a8b; --body-bg: #fff; --text-bg-mark: #fcf8e3; @@ -4226,8 +4227,12 @@ a.close.disabled { left:0; border-width:.4rem 0 .4rem .4rem; border-left-color:#000 } .tooltip-inner { - padding:.25rem .5rem; color:#fff; text-align:center; background-color:var(--text-background); border-radius:.25rem -} + padding: .25rem .5rem; + color: var(--text); + text-align: center; + background-color: var(--light); + border-radius: .25rem + } .popover { position:absolute; top:0; left:0; z-index:1060; display:block; max-width:276px; font-family:Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; font-style:normal; font-weight:400; line-height:1.5; text-align:left; text-align:start; text-decoration:none; text-shadow:none; text-transform:none; letter-spacing:normal; word-break:normal; word-spacing:normal; white-space:normal; line-break:auto; font-size:.825rem; word-wrap:break-word; background-color:#fff; background-clip:padding-box; border:1px solid rgba(0,0,0,.2); border-radius:.3rem } diff --git a/apps/remix-ide/src/assets/css/themes/bootstrap-spacelab.min.css b/apps/remix-ide/src/assets/css/themes/bootstrap-spacelab.min.css index 4e10e31966..3868f5c619 100644 --- a/apps/remix-ide/src/assets/css/themes/bootstrap-spacelab.min.css +++ b/apps/remix-ide/src/assets/css/themes/bootstrap-spacelab.min.css @@ -30,6 +30,7 @@ --info:#3399f3; --warning:#d47500; --danger:#cd0200; + --text:#eee; --light:#eee; --dark:#333; --body-bg:#fff; @@ -5187,11 +5188,11 @@ a.close.disabled { border-left-color:#000 } .tooltip-inner { - padding:.25rem .5rem; - color:#fff; - text-align:center; - background-color:var(--text-background); - border-radius:.25rem + padding: .25rem .5rem; + color: var(--text); + text-align: center; + background-color: var(--light); + border-radius: .25rem } .popover { position:absolute; diff --git a/apps/remix-ide/src/assets/css/themes/remix-black_undtds.css b/apps/remix-ide/src/assets/css/themes/remix-black_undtds.css index b22873959e..0ac9167c47 100644 --- a/apps/remix-ide/src/assets/css/themes/remix-black_undtds.css +++ b/apps/remix-ide/src/assets/css/themes/remix-black_undtds.css @@ -5240,11 +5240,11 @@ a.close.disabled { border-left-color: #000; } .tooltip-inner { - padding: 3px 8px; - color: #d5d5d5; + padding: .25rem .5rem; + color: var(--text); text-align: center; - background-color: var(--text-background); - border-radius: 2px; + background-color: var(--light); + border-radius: .25rem } .popover { position: absolute; diff --git a/apps/remix-ide/src/assets/css/themes/remix-candy_ikhg4m.css b/apps/remix-ide/src/assets/css/themes/remix-candy_ikhg4m.css index fa06290406..97cc70e002 100644 --- a/apps/remix-ide/src/assets/css/themes/remix-candy_ikhg4m.css +++ b/apps/remix-ide/src/assets/css/themes/remix-candy_ikhg4m.css @@ -5701,11 +5701,11 @@ a.close.disabled { } .tooltip-inner { - padding: 0.25rem 0.5rem; - color: #fff; + padding: .25rem .5rem; + color: var(--text); text-align: center; - background-color:var(--text-background); - border-radius: 0.25rem; + background-color: var(--light); + border-radius: .25rem } .popover { diff --git a/apps/remix-ide/src/assets/css/themes/remix-dark_tvx1s2.css b/apps/remix-ide/src/assets/css/themes/remix-dark_tvx1s2.css index 44d9eb3872..2f74f6bcc8 100644 --- a/apps/remix-ide/src/assets/css/themes/remix-dark_tvx1s2.css +++ b/apps/remix-ide/src/assets/css/themes/remix-dark_tvx1s2.css @@ -5236,11 +5236,11 @@ a.close.disabled { border-left-color: #000; } .tooltip-inner { - padding: 3px 8px; - color: #fff; + padding: .25rem .5rem; + color: var(--text); text-align: center; - background-color:var(--text-background); - border-radius: 2px; + background-color: var(--light); + border-radius: .25rem } .popover { position: absolute; diff --git a/apps/remix-ide/src/assets/css/themes/remix-light_powaqg.css b/apps/remix-ide/src/assets/css/themes/remix-light_powaqg.css index a1a70635a9..32e91f835f 100644 --- a/apps/remix-ide/src/assets/css/themes/remix-light_powaqg.css +++ b/apps/remix-ide/src/assets/css/themes/remix-light_powaqg.css @@ -5697,11 +5697,11 @@ a.close.disabled { } .tooltip-inner { - padding: 0.25rem 0.5rem; - color: #fff; + padding: .25rem .5rem; + color: var(--text); text-align: center; - background-color:var(--text-background); - border-radius: 0.25rem; + background-color: var(--light); + border-radius: .25rem } .popover { diff --git a/apps/remix-ide/src/assets/css/themes/remix-midcentury_hrzph3.css b/apps/remix-ide/src/assets/css/themes/remix-midcentury_hrzph3.css index eaf51d5bf3..676216ec30 100644 --- a/apps/remix-ide/src/assets/css/themes/remix-midcentury_hrzph3.css +++ b/apps/remix-ide/src/assets/css/themes/remix-midcentury_hrzph3.css @@ -5703,11 +5703,11 @@ a.close.disabled { } .tooltip-inner { - padding: 0.25rem 0.5rem; - color: #eeede9; + padding: .25rem .5rem; + color: var(--text); text-align: center; - background-color: var(--text-background); - border-radius: 0.25rem; + background-color: var(--light); + border-radius: .25rem } .popover { diff --git a/apps/solidity-compiler/src/app/compiler-api.ts b/apps/solidity-compiler/src/app/compiler-api.ts index 6a78f669de..e69bd8ef95 100644 --- a/apps/solidity-compiler/src/app/compiler-api.ts +++ b/apps/solidity-compiler/src/app/compiler-api.ts @@ -97,6 +97,10 @@ export const CompilerApiMixin = (Base) => class extends Base { return this.call('contentImport', 'resolveAndSave', url) } + runScriptAfterCompilation (fileName: string) { + this.call('compileAndRun', 'runScriptAfterCompilation', fileName) + } + compileWithHardhat (configFile) { return this.call('hardhat', 'compile', configFile) } diff --git a/libs/remix-lib/src/types/ICompilerApi.ts b/libs/remix-lib/src/types/ICompilerApi.ts index d6d8c5a2ba..4b5dbd4380 100644 --- a/libs/remix-lib/src/types/ICompilerApi.ts +++ b/libs/remix-lib/src/types/ICompilerApi.ts @@ -37,6 +37,7 @@ export interface ICompilerApi { readFile: (file: string) => Promise open: (file: string) => void saveCurrentFile: () => void + runScriptAfterCompilation: (fileName: string) => void, logToTerminal: (log: terminalLog) => void 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 f7d66b755c..80220662fc 100644 --- a/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx +++ b/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx @@ -8,6 +8,7 @@ import { compilerReducer, compilerInitialState } from './reducers/compiler' import { resetEditorMode, listenToEvents } from './actions/compiler' import { OverlayTrigger, Tooltip } from 'react-bootstrap' // eslint-disable-line import { getValidLanguage } from '@remix-project/remix-solidity' +import { CopyToClipboard } from '@remix-ui/clipboard' import './css/style.css' @@ -332,6 +333,19 @@ export const CompilerContainer = (props: CompilerContainerProps) => { compileTabLogic.runCompiler(externalCompType) } + const compileAndRun = () => { + const currentFile = api.currentFile + + if (!isSolFileSelected()) return + + _setCompilerVersionFromPragma(currentFile) + let externalCompType + if (hhCompilation) externalCompType = 'hardhat' + else if (truffleCompilation) externalCompType = 'truffle' + api.runScriptAfterCompilation(currentFile) + compileTabLogic.runCompiler(externalCompType) + } + const _updateVersionSelector = (version, customUrl = '') => { // update selectedversion of previous one got filtered out let selectedVersion = version @@ -523,7 +537,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => { onChangeRuns(settings.runs) } - return ( + return (
@@ -596,7 +610,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => { + Learn how to use Hardhat Compilation }> @@ -612,7 +626,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => { + Learn how to use Truffle Compilation }> @@ -621,35 +635,61 @@ export const CompilerContainer = (props: CompilerContainerProps) => { } -
- - + + +
+ + +
+
Choose the script to execute right after compilation by adding the `dev-run-script` natspec tag, as in:
+ 
+                      
+                      /**

+                      * @title ContractName

+                      * @dev ContractDescription

+                      * @custom:dev-run-script file_path

+                      */

+                      contract ContractName {'{}'}

+                      
+
+ Click to know more +
+ + }> + + + '@custom:dev-run-script file_path'} direction='top'> + + +
diff --git a/libs/remix-ui/solidity-compiler/src/lib/css/style.css b/libs/remix-ui/solidity-compiler/src/lib/css/style.css index 4410dc72cb..9bc492311d 100644 --- a/libs/remix-ui/solidity-compiler/src/lib/css/style.css +++ b/libs/remix-ui/solidity-compiler/src/lib/css/style.css @@ -172,7 +172,7 @@ -webkit-animation: spin 2s infinite linear; } -.remixui_solidityCompileButton { +.remixui_solidityCompileAndRunButton { width: 94%; }