refactor ICompilerAPI

apps/remix-ide/src/app.js

@@ -429,7 +429,7 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
   }
 
   // CONTENT VIEWS & DEFAULT PLUGINS
-  const compileTab = new CompileTab()
+  const compileTab = new CompileTab(registry.get('config').api)
   const run = new RunTab(
     blockchain,
     registry.get('config').api,

apps/remix-ide/src/app/files/fileManager.js

@@ -398,7 +398,7 @@ class FileManager extends Plugin {
   }
 
   fileChangedEvent (path) {
-    this.emit('currentFileChanged', path)
+    this.emit('fileChanged', path)
   }
 
   fileRenamedEvent (oldName, newName, isFolder) {

apps/remix-ide/src/app/tabs/compile-tab.js

 /* global */
 import React from 'react' // eslint-disable-line
 import ReactDOM from 'react-dom'
-import { SolidityCompiler, CompileTab as CompileTabLogic, parseContracts } from '@remix-ui/solidity-compiler' // eslint-disable-line
+import { SolidityCompiler } from '@remix-ui/solidity-compiler' // eslint-disable-line
+import { CompileTabLogic } from '@remix-ui/solidity-compiler' // eslint-disable-line
 import { CompilerApiMixin } from '@remixproject/solidity-compiler-plugin'
 import { ViewPlugin } from '@remixproject/engine-web'
+import QueryParams from '../../lib/query-params'
 // import { ICompilerApi } from '@remix-project/remix-lib-ts'
 import * as packageJson from '../../../../../package.json'
 
@@ -30,14 +32,19 @@ const profile = {
 // - methods: ['getCompilationResult']
 
 class CompileTab extends CompilerApiMixin(ViewPlugin) { // implements ICompilerApi
-  constructor () {
+  constructor (config) {
     super(profile)
+    this.config = config
+    this.queryParams = new QueryParams()
+    this.compileTabLogic = new CompileTabLogic(this, this.contentImport)
+    this.compiler = this.compileTabLogic.compiler
+    this.compileTabLogic.init()
     this.initCompilerApi()
   }
 
   renderComponent () {
     ReactDOM.render(
-      <SolidityCompiler plugin={this}/>
+      <SolidityCompiler api={this}/>
       , this.el)
   }
 
@@ -49,10 +56,6 @@ class CompileTab extends CompilerApiMixin(ViewPlugin) { // implements ICompilerA
     this.renderComponent()
   }
 
-  setHardHatCompilation (value) {
-    this.hhCompilation = value
-  }
-
   setSelectedVersion (version) {
     this.selectedVersion = version
   }
@@ -121,6 +124,28 @@ class CompileTab extends CompilerApiMixin(ViewPlugin) { // implements ICompilerA
       pattern: []
     })
   }
+
+  getCompilerParameters () {
+    const params = this.queryParams.get()
+    params.optimize = (params.optimize === 'false' || params.optimize === null || params.optimize === undefined) ? false : params.optimize
+    params.optimize = params.optimize === 'true' ? true : params.optimize
+    return params
+  }
+
+  setCompilerParameters (params) {
+    this.queryParams.update(params)
+  }
+
+  getAppParameter (name) {
+    const param = this.config.get(name)
+    if (param === 'true') return true
+    if (param === 'false') return false
+    return param
+  }
+
+  setAppParameter (name, value) {
+    this.config.set(name, value)
+  }
 }
 
 module.exports = CompileTab

apps/solidity-compiler/src/app/app.tsx

@@ -9,7 +9,7 @@ const remix = new CompilerClientApi()
 export const App = () => {  
   return (
     <div className="debugger">
-      <SolidityCompiler plugin={remix} />
+      <SolidityCompiler api={remix} />
     </div>
   );
 };

apps/solidity-compiler/src/app/compiler-api.ts

 import { compile } from '@remix-project/remix-solidity'
-import { CompileTab as CompileTabLogic, parseContracts } from '@remix-ui/solidity-compiler' // eslint-disable-line
+import { CompileTabLogic, parseContracts } from '@remix-ui/solidity-compiler' // eslint-disable-line
+import { ConfigurationSettings } from '@remix-project/remix-lib-ts'
 
 export const CompilerApiMixin = (Base) => class extends Base {
+  currentFile: string
+  contractMap: {
+    file: string
+  } | Record<string, any>
+  compileErrors: any
+  compileTabLogic: CompileTabLogic
+  contractsDetails: Record<string, any>
+
+  configurationSettings: ConfigurationSettings
+
+  onCurrentFileChanged: (fileName: string) => void
+  onResetResults: () => void
+  onSetWorkspace: (workspace: any) => void
+  onNoFileSelected: () => void
+  onCompilationFinished: (contractsDetails: any, contractMap: any) => void
+  onSessionSwitched: () => void
+  onContentChanged: () => void
+
   initCompilerApi () {
     this.configurationSettings = null
 
@@ -16,9 +35,6 @@ export const CompilerApiMixin = (Base) => class extends Base {
       eventHandlers: {},
       loading: false
     }
-    this.compileTabLogic = new CompileTabLogic(this, this.contentImport)
-    this.compiler = this.compileTabLogic.compiler
-    this.compileTabLogic.init()
 
     this.contractMap = {}
     this.contractsDetails = {}
@@ -46,11 +62,7 @@ export const CompilerApiMixin = (Base) => class extends Base {
   logToTerminal (content) {
     return this.call('terminal', 'log', content)
   }
-
-  setHardHatCompilation (value) {
-    this.hhCompilation = value
-  }
-
+  
   setSelectedVersion (version) {
     this.selectedVersion = version
   }
@@ -102,7 +114,6 @@ export const CompilerApiMixin = (Base) => class extends Base {
     }
   }
 
-
   /**
    * set the compiler configuration
    * This function is used by remix-plugin compiler API.
@@ -110,25 +121,7 @@ export const CompilerApiMixin = (Base) => class extends Base {
    */
   setCompilerConfig (settings) {
     this.configurationSettings = settings    
-  }
-
-  getParameters () {
-    return {}
-  }
-
-  setParameters (params) {}
-
-  getConfiguration (name) {
-    const conf = {
-      'currentFile': () => this.currentFile,
-      'hideWarnings': () => false,
-      'autoCompile': () => false,
-      'includeNightlies': () => false
-    }
-    return conf[name]()
-  }
-
-  setConfiguration (name, value) {}
+  }  
 
   getFileManagerMode () {
     return 'browser'
@@ -154,7 +147,7 @@ export const CompilerApiMixin = (Base) => class extends Base {
     this.currentFile = ''
     this.contractsDetails = {}
     this.emit('statusChanged', { key: 'none' })
-    if (this.onResetResults()) this.onResetResults()
+    if (this.onResetResults) this.onResetResults()
   }
 
   listenToEvents () {
@@ -258,7 +251,7 @@ export const CompilerApiMixin = (Base) => class extends Base {
       // ctrl+s or command+s
       if ((e.metaKey || e.ctrlKey) && e.keyCode === 83) {
         e.preventDefault()
-        this.compileTabLogic.runCompiler(this.hhCompilation)
+        this.compileTabLogic.runCompiler(this.getAppParameter('hardhat-compilation'))
       }
     })
   }

apps/solidity-compiler/src/app/compiler.ts

@@ -16,53 +16,38 @@ const profile = {
   methods: ['getCompilationResult', 'compile', 'compileWithParameters', 'setCompilerConfig', 'compileFile' ,'getCompilerState']
 }
 
-export interface ConfigurationSettings {
-  version: string,
-  evmVersion: string,
-  language: string,
-  optimize: boolean,
-  runs: string
-}
 
 export class CompilerClientApi extends CompilerApiMixin(PluginClient) implements ICompilerApi  {
-  // interface matches libs/remix-ui/solidity-compiler/types/index.ts : ICompilerApi
-  currentFile: string
-  contractMap: {
-    file: string
-  } | Record<string, any>
-  compileErrors: any
-  compileTabLogic: any
-  contractsDetails: Record<string, any>
-  configurationSettings: ConfigurationSettings
-
-  setHardHatCompilation: (value: boolean) => void
-  getParameters: () => ConfigurationSettings
-  setParameters: (params: Partial<ConfigurationSettings>) => void
-  setCompilerConfig: (settings: ConfigurationSettings) => void
-  
-  getConfiguration: (value: string) => string
-  setConfiguration: (name: string, value: string) => void
-  getFileManagerMode: () => string
-  
-
-  getCompilationResult: () => any
-
-  onCurrentFileChanged: (fileName: string) => void
-  onResetResults: () => void
-  onSetWorkspace: (isLocalhost: boolean) => void
-  onNoFileSelected: () => void
-  onCompilationFinished: (contractsDetails: any, contractMap: any) => void
-  onSessionSwitched: () => void
-  onContentChanged: () => void
-
-  fileExists: (file: string) => Promise<boolean>
-  writeFile: (file: string, content: string) => Promise<void>
-  readFile: (file: string) => Promise<string>
-  open: (file: string) => void
-
   constructor () {
     super()
     createClient(this as any)
+    this.compileTabLogic = new CompileTabLogic(this, this.contentImport)
+    this.compiler = this.compileTabLogic.compiler
+    this.compileTabLogic.init()
     this.initCompilerApi()
-  }  
+  }
+
+  getCompilerParameters () {
+    return {
+      runs: '200',
+      optimize: false,
+      version: '0.8.7+commit.e28d00a7',
+      evmVersion: null, // default
+      language: 'Solidity'
+    }
+  }
+
+  setCompilerParameters (params) {}
+
+  getAppParameter (name) {
+    const conf = {
+      'currentFile': () => this.currentFile,
+      'hideWarnings': () => false,
+      'autoCompile': () => false,
+      'includeNightlies': () => false
+    }
+    return conf[name]()
+  }
+
+  setAppParameter (name, value) {}  
 }

libs/remix-lib/src/types/ICompilerApi.ts

@@ -8,11 +8,12 @@ export interface ICompilerApi {
     contractsDetails: Record<string, any>
     configurationSettings: ConfigurationSettings
 
-    setHardHatCompilation: (value: boolean) => void
-    getParameters: () => any
-    setParameters: (params) => void
-    getConfiguration: (value: string) => string
-    setConfiguration: (name: string, value: string) => void
+    getCompilerParameters: () => ConfigurationSettings
+    setCompilerParameters: (ConfigurationSettings?) => void
+
+    getAppParameter: (value: string) => string | boolean
+    setAppParameter: (name: string, value: string | boolean) => void
+
     getFileManagerMode: () => string
     setCompilerConfig: (settings: any) => void
 
@@ -26,11 +27,21 @@ export interface ICompilerApi {
     onSessionSwitched: () => void
     onContentChanged: () => void
 
+    resolveContentAndSave: (url: string) => Promise<string>
     fileExists: (file: string) => Promise<boolean>
     writeFile: (file: string, content: string) => Promise<void>
     readFile: (file: string) => Promise<string>
     open: (file: string) => void
-  }
+
+    logToTerminal: (log: terminalLog) => {}
+
+    compileWithHardhat: (configPath: string) => Promise<string>
+}
+
+export type terminalLog = {
+    type: 'info' | 'error' | 'warning'
+    value: string
+}
 
 export interface ConfigurationSettings {
     version: string,

libs/remix-ui/renderer/src/lib/renderer.tsx

@@ -69,7 +69,7 @@ export const Renderer = ({ message, opt = {}, plugin }: RendererProps) => {
   }
 
   const addAnnotation = (file, error) => {
-    if (file === plugin.getConfiguration('currentFile')) {
+    if (file === plugin.getAppParameter('currentFile')) {
       plugin.call('editor', 'addAnnotation', error, file)
     }
   }
@@ -87,7 +87,7 @@ export const Renderer = ({ message, opt = {}, plugin }: RendererProps) => {
   }
 
   const _errorClick = (errFile, errLine, errCol) => {
-    if (errFile !== plugin.getConfiguration('currentFile')) {
+    if (errFile !== plugin.getAppParameter('currentFile')) {
       // TODO: refactor with this._components.contextView.jumpTo
       const provider = plugin.fileProviderOf(errFile)
       if (provider) {

libs/remix-ui/solidity-compiler/src/lib/actions/compiler.ts

 import React from 'react'
-
+import { CompileTabLogic } from '../logic/compileTabLogic'
 export const setEditorMode = (mode: string) => {
   return {
     type: 'SET_EDITOR_MODE',
@@ -26,7 +26,7 @@ export const resetCompilerMode = () => (dispatch: React.Dispatch<any>) => {
   })
 }
 
-export const listenToEvents = (compileTabLogic, api) => (dispatch: React.Dispatch<any>) => {
+export const listenToEvents = (compileTabLogic: CompileTabLogic, api) => (dispatch: React.Dispatch<any>) => {
   api.onSessionSwitched = () => {
     dispatch(setEditorMode('sessionSwitched'))
   }

libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx

@@ -19,11 +19,11 @@ declare global {
 const _paq = window._paq = window._paq || [] //eslint-disable-line
 
 export const CompilerContainer = (props: CompilerContainerProps) => {
-  const { api, compileTabLogic, tooltip, modal, compiledFileName, updateCurrentVersion, configurationSettings  } = props // eslint-disable-line
+  const { api, compileTabLogic, tooltip, modal, compiledFileName, updateCurrentVersion, configurationSettings, isHardhatProject } = props // eslint-disable-line
   const [state, setState] = useState({
     hideWarnings: false,
     autoCompile: false,
-    optimise: false,
+    optimize: false,
     compileTimeout: null,
     timeout: 300,
     allversions: [],
@@ -57,7 +57,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
         _updateVersionSelector(selectedVersion)
       }
     })
-    const currentFileName = api.getConfiguration('currentFile')
+    const currentFileName = api.getAppParameter('currentFile') as string
 
     currentFile(currentFileName)
     listenToEvents(compileTabLogic, api)(dispatch)
@@ -66,19 +66,19 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
   useEffect(() => {
     if (compileTabLogic && compileTabLogic.compiler) {
       setState(prevState => {
-        const params = api.getParameters()
-        const optimize = params.optimize === 'false' ? false : params.optimize === 'true' ? true : null
-        const runs = params.runs
+        const params = api.getCompilerParameters()
+        const optimize = params.optimize
+        const runs = params.runs as string
         const evmVersion = params.evmVersion
         const autoCompile = params.autoCompile === 'false' ? false : params.autoCompile === 'true' ? true : null
 
         return {
           ...prevState,
-          hideWarnings: api.getConfiguration('hideWarnings') || false,
-          autoCompile: typeof autoCompile === 'boolean' ? autoCompile : api.getConfiguration('autoCompile') || false,
-          includeNightlies: api.getConfiguration('includeNightlies') || false,
-          optimize: (optimize !== null) && (optimize !== undefined) ? optimize : false,
-          runs: (runs !== null) && (runs !== 'null') && (runs !== undefined) && (runs !== 'undefined') ? runs : 200,
+          hideWarnings: api.getAppParameter('hideWarnings') as boolean || false,
+          autoCompile: api.getAppParameter('autoCompile') as boolean || false,
+          includeNightlies: api.getAppParameter('includeNightlies') as boolean || false,
+          optimize: optimize,
+          runs: runs,
           evmVersion: (evmVersion !== null) && (evmVersion !== 'null') && (evmVersion !== undefined) && (evmVersion !== 'undefined') ? evmVersion : 'default'
         }
       })
@@ -154,7 +154,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
 
       allVersions = [...allVersions, ...versions]
       selectedVersion = state.defaultVersion
-      if (api.getParameters().version) selectedVersion = api.getParameters().version
+      if (api.getCompilerParameters().version) selectedVersion = api.getCompilerParameters().version
       // Check if version is a URL and corresponding filename starts with 'soljson'
       if (selectedVersion.startsWith('https://')) {
         const urlArr = selectedVersion.split('/')
@@ -229,8 +229,8 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
     })
   }
 
-  const isSolFileSelected = (currentFile = '') => {
-    if (!currentFile) currentFile = api.getConfiguration('currentFile')
+  const isSolFileSelected = (currentFile: string = '') => {
+    if (!currentFile) currentFile = api.getAppParameter('currentFile') as string
     if (!currentFile) return false
     const extention = currentFile.substr(currentFile.length - 3, currentFile.length)
     return extention.toLowerCase() === 'sol' || extention.toLowerCase() === 'yul'
@@ -299,7 +299,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
   }
 
   const compile = () => {
-    const currentFile = api.getConfiguration('currentFile')
+    const currentFile = api.getAppParameter('currentFile') as string
 
     if (!isSolFileSelected()) return
 
@@ -323,7 +323,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
       })
     }
     updateCurrentVersion(selectedVersion)
-    api.setParameters({ version: selectedVersion })
+    api.setCompilerParameters({ version: selectedVersion })
     let url
 
     if (customUrl !== '') {
@@ -333,7 +333,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
       })
       updateCurrentVersion(selectedVersion)
       url = customUrl
-      api.setParameters({ version: selectedVersion })
+      api.setCompilerParameters({ version: selectedVersion })
     } else {
       if (helper.checkSpecialChars(selectedVersion)) {
         return console.log('loading ' + selectedVersion + ' not allowed, special chars not allowed.')
@@ -404,7 +404,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
   const handleAutoCompile = (e) => {
     const checked = e.target.checked
 
-    api.setConfiguration('autoCompile', checked)
+    api.setAppParameter('autoCompile', checked)
     checked && compile()
     setState(prevState => {
       return { ...prevState, autoCompile: checked }
@@ -414,7 +414,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
   const handleOptimizeChange = (value) => {
     const checked = !!value
 
-    api.setConfiguration('optimise', checked)
+    api.setAppParameter('optimize', checked)
     compileTabLogic.setOptimize(checked)
     if (compileTabLogic.optimize) {
       compileTabLogic.setRuns(parseInt(state.runs))
@@ -423,7 +423,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
     }
     state.autoCompile && compile()
     setState(prevState => {
-      return { ...prevState, optimise: checked }
+      return { ...prevState, optimize: checked }
     })
   }
 
@@ -440,7 +440,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
   const handleHideWarningsChange = (e) => {
     const checked = e.target.checked
 
-    api.setConfiguration('hideWarnings', checked)
+    api.setAppParameter('hideWarnings', checked)
     state.autoCompile && compile()
     setState(prevState => {
       return { ...prevState, hideWarnings: checked }
@@ -451,7 +451,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
     const checked = e.target.checked
 
     if (!checked) handleLoadVersion(state.defaultVersion)
-    api.setConfiguration('includeNightlies', checked)
+    api.setAppParameter('includeNightlies', checked)
     setState(prevState => {
       return { ...prevState, includeNightlies: checked }
     })
@@ -482,7 +482,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
     const checked = event.target.checked
 
     sethhCompilation(checked)
-    api.setHardHatCompilation(checked)
+    api.setAppParameter('hardhat-compilation', checked)
   }
 
   /*
@@ -553,7 +553,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
             </div>
             <div className="mt-2 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.optimise} />
+                <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"
@@ -564,7 +564,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
                   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.optimise}
+                  disabled={!state.optimize}
                 />
               </div>
             </div>
@@ -574,7 +574,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
             </div>
           </div>
           {
-            api.isHardHatProject &&
+            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>

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

+import { ICompilerApi } from '@remix-project/remix-lib-ts'
+
 const Compiler = require('@remix-project/remix-solidity').Compiler
 const EventEmitter = require('events')
 
@@ -8,7 +10,7 @@ declare global {
 }
 const _paq = window._paq = window._paq || []  //eslint-disable-line
 
-export class CompileTab {
+export class CompileTabLogic {
   public compiler
   public optimize
   public runs
@@ -16,45 +18,44 @@ export class CompileTab {
   public compilerImport
   public event
 
-  constructor (public api, public contentImport) {
+  constructor (public api: ICompilerApi, public contentImport) {
     this.event = new EventEmitter()
     this.compiler = new Compiler((url, cb) => api.resolveContentAndSave(url).then((result) => cb(null, result)).catch((error) => cb(error.message)))
   }
 
   init () {
-    this.optimize = this.api.getParameters().optimize
-    this.optimize = this.optimize === 'true'
-    this.api.setParameters({ optimize: this.optimize })
+    this.optimize = this.api.getCompilerParameters().optimize
+    this.api.setCompilerParameters({ optimize: this.optimize })
     this.compiler.set('optimize', this.optimize)
 
-    this.runs = this.api.getParameters().runs
+    this.runs = this.api.getCompilerParameters().runs
     this.runs = this.runs && this.runs !== 'undefined' ? this.runs : 200
-    this.api.setParameters({ runs: this.runs })
+    this.api.setCompilerParameters({ runs: this.runs })
     this.compiler.set('runs', this.runs)
 
-    this.evmVersion = this.api.getParameters().evmVersion
+    this.evmVersion = this.api.getCompilerParameters().evmVersion
     if (this.evmVersion === 'undefined' || this.evmVersion === 'null' || !this.evmVersion) {
       this.evmVersion = null
     }
-    this.api.setParameters({ evmVersion: this.evmVersion })
+    this.api.setCompilerParameters({ evmVersion: this.evmVersion })
     this.compiler.set('evmVersion', this.evmVersion)
   }
 
   setOptimize (newOptimizeValue) {
     this.optimize = newOptimizeValue
-    this.api.setParameters({ optimize: this.optimize })
+    this.api.setCompilerParameters({ optimize: this.optimize })
     this.compiler.set('optimize', this.optimize)
   }
 
   setRuns (runs) {
     this.runs = runs
-    this.api.setParameters({ runs: this.runs })
+    this.api.setCompilerParameters({ runs: this.runs })
     this.compiler.set('runs', this.runs)
   }
 
   setEvmVersion (newEvmVersion) {
     this.evmVersion = newEvmVersion
-    this.api.setParameters({ evmVersion: this.evmVersion })
+    this.api.setCompilerParameters({ evmVersion: this.evmVersion })
     this.compiler.set('evmVersion', this.evmVersion)
   }
 
@@ -122,7 +123,7 @@ export class CompileTab {
       // TODO readd saving current file
       // this.api.saveCurrentFile()
       this.event.emit('removeAnnotations')
-      var currentFile = this.api.getConfiguration('currentFile')
+      var currentFile = this.api.getAppParameter('currentFile')
       return this.compileFile(currentFile)
     } catch (err) {
       console.error(err)

libs/remix-ui/solidity-compiler/src/lib/solidity-compiler.tsx

@@ -9,7 +9,7 @@ import { Renderer } from '@remix-ui/renderer' // eslint-disable-line
 import './css/style.css'
 
 export const SolidityCompiler = (props: SolidityCompilerProps) => {
-  const { plugin, plugin: { currentFile, compileTabLogic, contractsDetails, contractMap, compileErrors, configurationSettings } } = props
+  const { api, api: { currentFile, compileTabLogic, contractsDetails, contractMap, compileErrors, configurationSettings } } = props
   const [state, setState] = useState({
     isHardhatProject: false,
     currentFile,
@@ -32,32 +32,32 @@ export const SolidityCompiler = (props: SolidityCompilerProps) => {
   })
   const [currentVersion, setCurrentVersion] = useState('')
 
-  plugin.onCurrentFileChanged = (currentFile: string) => {
+  api.onCurrentFileChanged = (currentFile: string) => {
     setState(prevState => {
       return { ...prevState, currentFile }
     })
   }
 
-  plugin.onResetResults = () => {
+  api.onResetResults = () => {
     setState(prevState => {
       return { ...prevState, currentFile: '', contractsDetails: {}, contractMap: {} }
     })
   }
 
-  plugin.onSetWorkspace = async (isLocalhost: boolean) => {
+  api.onSetWorkspace = async (isLocalhost: boolean) => {
     const isHardhat = isLocalhost && await compileTabLogic.isHardhatProject()
     setState(prevState => {
       return { ...prevState, currentFile, isHardhatProject: isHardhat }
     })
   }
 
-  plugin.onNoFileSelected = () => {
+  api.onNoFileSelected = () => {
     setState(prevState => {
       return { ...prevState, currentFile: '' }
     })
   }
 
-  plugin.onCompilationFinished = (contractsDetails: any, contractMap: any) => {
+  api.onCompilationFinished = (contractsDetails: any, contractMap: any) => {
     setState(prevState => {
       return { ...prevState, contractsDetails, contractMap }
     })
@@ -71,7 +71,7 @@ export const SolidityCompiler = (props: SolidityCompilerProps) => {
 
   const updateCurrentVersion = (value) => {
     setCurrentVersion(value)
-    plugin.setParameters({ version: value })
+    api.setCompilerParameters({ version: value })
   }
 
   const modal = async (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => {
@@ -111,19 +111,19 @@ export const SolidityCompiler = (props: SolidityCompilerProps) => {
   return (
     <>
       <div id="compileTabView">
-        <CompilerContainer api={plugin} isHardhatProject={state.isHardhatProject} compileTabLogic={compileTabLogic} tooltip={toast} modal={modal} compiledFileName={currentFile} updateCurrentVersion={updateCurrentVersion} configurationSettings={configurationSettings} />
-        <ContractSelection api={plugin} contractMap={contractMap} contractsDetails={contractsDetails} modal={modal} />
+        <CompilerContainer api={api} isHardhatProject={state.isHardhatProject} compileTabLogic={compileTabLogic} tooltip={toast} modal={modal} compiledFileName={currentFile} updateCurrentVersion={updateCurrentVersion} configurationSettings={configurationSettings} />
+        <ContractSelection api={api} contractMap={contractMap} contractsDetails={contractsDetails} modal={modal} />
         <div className="remixui_errorBlobs p-4" data-id="compiledErrors">
           <span data-id={`compilationFinishedWith_${currentVersion}`}></span>
-          { compileErrors.error && <Renderer message={compileErrors.error.formattedMessage || compileErrors.error} plugin={plugin} opt={{ type: compileErrors.error.severity || 'error', errorType: compileErrors.error.type }} /> }
+          { compileErrors.error && <Renderer message={compileErrors.error.formattedMessage || compileErrors.error} plugin={api} opt={{ type: compileErrors.error.severity || 'error', errorType: compileErrors.error.type }} /> }
           { compileErrors.error && (compileErrors.error.mode === 'panic') && modal('Error', panicMessage(compileErrors.error.formattedMessage), 'Close', null) }
           { compileErrors.errors && compileErrors.errors.length && compileErrors.errors.map((err, index) => {
-            if (plugin.getConfiguration('hideWarnings')) {
+            if (api.getAppParameter('hideWarnings')) {
               if (err.severity !== 'warning') {
-                return <Renderer key={index} message={err.formattedMessage} plugin={plugin} opt={{ type: err.severity, errorType: err.type }} />
+                return <Renderer key={index} message={err.formattedMessage} plugin={api} opt={{ type: err.severity, errorType: err.type }} />
               }
             } else {
-              return <Renderer key={index} message={err.formattedMessage} plugin={plugin} opt={{ type: err.severity, errorType: err.type }} />
+              return <Renderer key={index} message={err.formattedMessage} plugin={api} opt={{ type: err.severity, errorType: err.type }} />
             }
           }) }
         </div>

libs/remix-ui/solidity-compiler/src/lib/types/index.ts

 import { ICompilerApi, ConfigurationSettings } from '@remix-project/remix-lib-ts'
+import { CompileTabLogic } from '../logic/compileTabLogic'
 export type onCurrentFileChanged = (fileName: string) => void
 
 export interface SolidityCompilerProps {
-  plugin: ICompilerApi
+  api: ICompilerApi
 }
 
 export interface CompilerContainerProps {
-  api: any,
-  compileTabLogic: any,
+  api: ICompilerApi,
+  compileTabLogic: CompileTabLogic,
   isHardhatProject: boolean,
   tooltip: (message: string | JSX.Element) => void,
   modal: (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => void,
@@ -16,7 +17,7 @@ export interface CompilerContainerProps {
   configurationSettings: ConfigurationSettings
 }
 export interface ContractSelectionProps {
-  api: any,
+  api: ICompilerApi,
   contractMap: {
     file: string
   } | Record<string, any>,