Merge branch 'master' into remixd_terminal

apps/debugger/src/app/debugger-api.ts

@@ -119,17 +119,17 @@ export const DebuggerApiMixin = (Base) => class extends Base {
 
   debug (hash) {
     this.debugHash = hash
-    this.onDebugRequestedListener(hash)
+    if (this.onDebugRequestedListener) this.onDebugRequestedListener(hash)
   }
 
   onActivation () {
-    this.on('editor', 'breakpointCleared', (fileName, row) => this.onBreakpointClearedListener(fileName, row))
-    this.on('editor', 'breakpointAdded', (fileName, row) => this.onBreakpointAddedListener(fileName, row))
-    this.on('editor', 'contentChanged', () => this.onEditorContentChangedListener())  
+    this.on('editor', 'breakpointCleared', (fileName, row) => { if (this.onBreakpointClearedListener) this.onBreakpointClearedListener(fileName, row) })
+    this.on('editor', 'breakpointAdded', (fileName, row) => { if (this.onBreakpointAddedListener) this.onBreakpointAddedListener(fileName, row) })
+    this.on('editor', 'contentChanged', () => { if (this.onEditorContentChangedListener) this.onEditorContentChangedListener() })  
   }
 
   onDeactivation () {
-    this.onRemoveHighlightsListener()
+    if (this.onRemoveHighlightsListener) this.onRemoveHighlightsListener()
     this.off('editor', 'breakpointCleared')
     this.off('editor', 'breakpointAdded')
     this.off('editor', 'contentChanged')

apps/remix-ide/src/app/editor/editor.js

@@ -49,7 +49,7 @@ const profile = {
   name: 'editor',
   description: 'service - editor',
   version: packageJson.version,
-  methods: ['highlight', 'discardHighlight', 'discardHighlightAt', 'clearAnnotations', 'addAnnotation']
+  methods: ['highlight', 'discardHighlight', 'discardHighlightAt', 'clearAnnotations', 'addAnnotation', 'gotoLine']
 }
 
 class Editor extends Plugin {

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

@@ -52,15 +52,7 @@ class CompileTab extends ViewPlugin {
       eventHandlers: {},
       loading: false
     }
-    this.compileTabLogic = new CompileTabLogic(
-      this.queryParams,
-      this.fileManager,
-      this.editor,
-      this.config,
-      this.fileProvider,
-      this.contentImport,
-      this.setCompileErrors.bind(this)
-    )
+    this.compileTabLogic = new CompileTabLogic(this, this.contentImport)
     this.compiler = this.compileTabLogic.compiler
     this.compileTabLogic.init()
     this.contractMap = {}
@@ -203,6 +195,10 @@ class CompileTab extends ViewPlugin {
     return this.compileTabLogic.compiler.state.lastCompilationResult
   }
 
+  addExternalFile (fileName, content) {
+    this.fileProvider.addExternal(fileName, content)
+  }
+
   /**
    * compile using @arg fileName.
    * The module UI will be updated accordingly to the new compilation result.
@@ -278,6 +274,50 @@ class CompileTab extends ViewPlugin {
       , this.el)
   }
 
+  getParameters () {
+    return this.queryParams.get()
+  }
+
+  setParameters (params) {
+    this.queryParams.update(params)
+  }
+
+  getConfiguration (name) {
+    return this.config.get(name)
+  }
+
+  setConfiguration (name, value) {
+    this.config.set(name, value)
+  }
+
+  fileProviderOf (fileName) {
+    return this.fileManager.fileProviderOf(fileName)
+  }
+
+  getFileManagerMode () {
+    return this.fileManager.mode
+  }
+
+  fileExists (fileName) {
+    return this.call('fileManager', 'exists', fileName)
+  }
+
+  writeFile (fileName, content) {
+    return this.call('fileManager', 'writeFile', fileName, content)
+  }
+
+  readFile (fileName) {
+    return this.call('fileManager', 'readFile', fileName)
+  }
+
+  saveCurrentFile () {
+    return this.fileManager.saveCurrentFile()
+  }
+
+  open (fileName) {
+    return this.call('fileManager', 'open', fileName)
+  }
+
   onActivation () {
     this.call('manager', 'activatePlugin', 'solidity-logic')
     this.listenToEvents()

apps/remix-ide/src/app/ui/TreeView.js

@@ -27,7 +27,7 @@ var css = csjs`
     word-break: break-all;
   }
   .label_key {
-    min-width: 15%;
+    min-width: max-content;
     max-width: 80%;
     word-break: break-word;
   }

apps/remix-ide/src/app/ui/landing-page/landing-page.js

@@ -538,7 +538,6 @@ export class LandingPage extends ViewPlugin {
                       <div class="btn-group">
                         <button class="btn mr-1 btn-secondary" data-id="landingPageImportFromGistButton" onclick="${() => importFromGist()}">Gist</button>
                         <button class="btn mx-1 btn-secondary" onclick="${() => load('Github', 'github URL', ['https://github.com/0xcert/ethereum-erc721/src/contracts/tokens/nf-token-metadata.sol', 'https://github.com/OpenZeppelin/openzeppelin-solidity/blob/67bca857eedf99bf44a4b6a0fc5b5ed553135316/contracts/access/Roles.sol'])}">GitHub</button>
-                        <button class="btn mx-1 btn-secondary" onclick="${() => load('Swarm', 'bzz-raw URL', ['bzz-raw://<swarm-hash>'])}">Swarm</button>
                         <button class="btn mx-1 btn-secondary" onclick="${() => load('Ipfs', 'ipfs URL', ['ipfs://<ipfs-hash>'])}">Ipfs</button>
                         <button class="btn mx-1 btn-secondary" onclick="${() => load('Https', 'http/https raw content', ['https://raw.githubusercontent.com/OpenZeppelin/openzeppelin-contracts/master/contracts/token/ERC20/ERC20.sol'])}">https</button>
                       </div><!-- end of btn-group -->

libs/remix-debug/src/solidity-decoder/localDecoder.ts

@@ -21,7 +21,7 @@ export async function solidityLocals (vmtraceIndex, internalTreeCall, stack, mem
         locals[name] = await variable.type.decodeFromStack(variable.stackDepth, stack, memory, storageResolver, calldata, cursor, variable)
       } catch (e) {
         console.log(e)
-        locals[name] = '<decoding failed - ' + e.message + '>'
+        locals[name] = { error: '<decoding failed - ' + e.message + '>' }
       }
     }
   }

libs/remix-debug/src/solidity-decoder/stateDecoder.ts

@@ -25,7 +25,7 @@ export async function decodeState (stateVars, storageResolver) {
       ret[stateVar.name] = decoded
     } catch (e) {
       console.log(e)
-      ret[stateVar.name] = '<decoding failed - ' + e.message + '>'
+      ret[stateVar.name] = { error: '<decoding failed - ' + e.message + '>' }
     }
   }
   return ret
@@ -64,6 +64,6 @@ export async function solidityState (storageResolver, astList, contractName) {
   try {
     return await decodeState(stateVars, storageResolver)
   } catch (e) {
-    return '<decoding failed - ' + e.message + '>'
+    return { error: '<decoding failed - ' + e.message + '>' }
   }
 }

libs/remix-debug/src/solidity-decoder/types/ArrayType.ts

@@ -36,7 +36,7 @@ export class ArrayType extends RefType {
     } catch (e) {
       console.log(e)
       return {
-        value: '<decoding failed - ' + e.message + '>',
+        error: '<decoding failed - ' + e.message + '>',
         type: this.typeName
       }
     }
@@ -56,7 +56,7 @@ export class ArrayType extends RefType {
         ret.push(await this.underlyingType.decodeFromStorage(currentLocation, storageResolver))
       } catch (e) {
         return {
-          value: '<decoding failed - ' + e.message + '>',
+          error: '<decoding failed - ' + e.message + '>',
           type: this.typeName
         }
       }
@@ -84,7 +84,7 @@ export class ArrayType extends RefType {
     }
     if (isNaN(length)) {
       return {
-        value: '<decoding failed - length is NaN>',
+        error: '<decoding failed - length is NaN>',
         type: 'Error'
       }
     }

libs/remix-debug/src/solidity-decoder/types/DynamicByteArray.ts

@@ -16,7 +16,7 @@ export class DynamicByteArray extends RefType {
       value = await extractHexValue(location, storageResolver, this.storageBytes)
     } catch (e) {
       console.log(e)
-      return { value: '<decoding failed - ' + e.message + '>', type: this.typeName }
+      return { error: '<decoding failed - ' + e.message + '>', type: this.typeName }
     }
     const length = new BN(value, 16)
     if (length.testn(0)) {
@@ -27,7 +27,7 @@ export class DynamicByteArray extends RefType {
         currentSlot = await readFromStorage(dataPos, storageResolver)
       } catch (e) {
         console.log(e)
-        return { value: '<decoding failed - ' + e.message + '>', type: this.typeName }
+        return { error: '<decoding failed - ' + e.message + '>', type: this.typeName }
       }
       while (length.gt(new BN(ret.length)) && ret.length < 32000) {
         currentSlot = currentSlot.replace('0x', '')
@@ -37,7 +37,7 @@ export class DynamicByteArray extends RefType {
           currentSlot = await readFromStorage(dataPos, storageResolver)
         } catch (e) {
           console.log(e)
-          return { value: '<decoding failed - ' + e.message + '>', type: this.typeName }
+          return { error: '<decoding failed - ' + e.message + '>', type: this.typeName }
         }
       }
       return { value: '0x' + ret.replace(/(00)+$/, ''), length: '0x' + length.toString(16), type: this.typeName }

libs/remix-debug/src/solidity-decoder/types/StringType.ts

@@ -15,17 +15,17 @@ export class StringType extends DynamicByteArray {
       decoded = await super.decodeFromStorage(location, storageResolver)
     } catch (e) {
       console.log(e)
-      return '<decoding failed - ' + e.message + '>'
+      return { error: '<decoding failed - ' + e.message + '>' }
     }
     return format(decoded)
   }
 
-  async decodeFromStack (stackDepth, stack, memory, calldata, variableDetails?) {
+  async decodeFromStack (stackDepth, stack, memory, storageResolver, calldata, cursor, variableDetails?) {
     try {
-      return await super.decodeFromStack(stackDepth, stack, memory, null, calldata, variableDetails)
+      return await super.decodeFromStack(stackDepth, stack, memory, storageResolver, calldata, cursor, variableDetails)
     } catch (e) {
       console.log(e)
-      return '<decoding failed - ' + e.message + '>'
+      return { error: '<decoding failed - ' + e.message + '>' }
     }
   }
 

libs/remix-debug/src/solidity-decoder/types/Struct.ts

@@ -22,7 +22,7 @@ export class Struct extends RefType {
         ret[item.name] = await item.type.decodeFromStorage(globalLocation, storageResolver)
       } catch (e) {
         console.log(e)
-        ret[item.name] = '<decoding failed - ' + e.message + '>'
+        ret[item.name] = { error: '<decoding failed - ' + e.message + '>' }
       }
     }
     return { value: ret, type: this.typeName }

libs/remix-debug/src/solidity-decoder/types/ValueType.ts

@@ -31,7 +31,7 @@ export class ValueType {
       return { value: this.decodeValue(value), type: this.typeName }
     } catch (e) {
       console.log(e)
-      return { value: '<decoding failed - ' + e.message + '>', type: this.typeName }
+      return { error: '<decoding failed - ' + e.message + '>', type: this.typeName }
     }
   }
 
@@ -43,7 +43,7 @@ export class ValueType {
     * @param {String} - memory
     * @return {Object} - decoded value
     */
-  async decodeFromStack (stackDepth, stack, memory, calldata, variableDetails?) {
+  async decodeFromStack (stackDepth, stack, memory, storageResolver, calldata, cursor, variableDetails?) {
     let value
     if (stackDepth >= stack.length) {
       value = this.decodeValue('')

libs/remix-simulator/src/methods/blocks.ts

@@ -41,6 +41,7 @@ export class Blocks {
     }
 
     const b = {
+      baseFeePerGas: '0x01',
       number: this.toHex(block.header.number),
       hash: this.toHex(block.hash()),
       parentHash: this.toHex(block.header.parentHash),
@@ -73,6 +74,7 @@ export class Blocks {
     const block = this.vmContext.blocks[payload.params[0]]
 
     const b = {
+      baseFeePerGas: '0x01',
       number: this.toHex(block.header.number),
       hash: this.toHex(block.hash()),
       parentHash: this.toHex(block.header.parentHash),

libs/remix-simulator/src/methods/transactions.ts

@@ -193,6 +193,7 @@ export class Transactions {
         blockNumber: '0x' + txBlock.header.number.toString('hex'),
         from: receipt.from,
         gas: Web3.utils.toHex(receipt.gas),
+        chainId: '0xd05',
         // 'gasPrice': '2000000000000', // 0x123
         gasPrice: '0x4a817c800', // 20000000000
         hash: receipt.transactionHash,
@@ -239,6 +240,7 @@ export class Transactions {
         blockNumber: '0x' + txBlock.header.number.toString('hex'),
         from: receipt.from,
         gas: Web3.utils.toHex(receipt.gas),
+        chainId: '0xd05',
         // 'gasPrice': '2000000000000', // 0x123
         gasPrice: '0x4a817c800', // 20000000000
         hash: receipt.transactionHash,
@@ -282,6 +284,7 @@ export class Transactions {
         from: receipt.from,
         gas: Web3.utils.toHex(receipt.gas),
         // 'gasPrice': '2000000000000', // 0x123
+        chainId: '0xd05',
         gasPrice: '0x4a817c800', // 20000000000
         hash: receipt.transactionHash,
         input: receipt.input,

libs/remix-simulator/test/blocks.ts

@@ -18,6 +18,7 @@ describe('blocks', () => {
       const block = await web3.eth.getBlock(0)
 
       const expectedBlock = {
+        baseFeePerGas: '0x01',
         difficulty: '69762765929000',
         extraData: '0x0',
         gasLimit: 8000000,

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

@@ -20,6 +20,8 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
       contractAddress: null,
       to: null
     },
+    currentBlock: null,
+    currentTransaction: null,
     blockNumber: null,
     txNumber: '',
     debugging: false,
@@ -137,6 +139,8 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
           contractAddress: null,
           to: null
         },
+        currentBlock: null,
+        currentTransaction: null,
         blockNumber: null,
         ready: {
           vmDebugger: false,
@@ -182,8 +186,12 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
       console.error(e)
     }
     let currentReceipt
+    let currentBlock
+    let currentTransaction
     try {
       currentReceipt = await web3.eth.getTransactionReceipt(txNumber)
+      currentBlock = await web3.eth.getBlock(currentReceipt.blockHash)
+      currentTransaction = await web3.eth.getTransaction(txNumber)
     } catch (e) {
       setState(prevState => {
         return {
@@ -220,6 +228,8 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
             txNumber,
             debugging: true,
             currentReceipt,
+            currentBlock,
+            currentTransaction,
             debugger: debuggerInstance,
             toastMessage: `debugging ${txNumber}`,
             validationError: ''
@@ -293,7 +303,7 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
         { state.debugging && <StepManager stepManager={ stepManager } /> }
         { state.debugging && <VmDebuggerHead vmDebugger={ vmDebugger } /> }
       </div>
-      { state.debugging && <VmDebugger vmDebugger={ vmDebugger } /> }
+      { state.debugging && <VmDebugger vmDebugger={ vmDebugger } currentBlock={ state.currentBlock } currentReceipt={ state.currentReceipt } currentTransaction={ state.currentTransaction } /> }
     </div>
   )
 }

libs/remix-ui/debugger-ui/src/lib/vm-debugger/global-variables.tsx

+import React from 'react' // eslint-disable-line
+import DropdownPanel from './dropdown-panel' // eslint-disable-line
+import { BN } from 'ethereumjs-util'
+
+export const GlobalVariables = ({ block, receipt, tx }) => {
+  // see https://docs.soliditylang.org/en/latest/units-and-global-variables.html#block-and-transaction-properties
+  const globals = {
+    'block.basefee': (new BN(block.baseFeePerGas.replace('0x', ''), 'hex')).toString(10) + ` Wei (${block.baseFeePerGas})`,
+    'block.chainid': tx.chainId,
+    'block.coinbase': block.miner,
+    'block.difficulty': block.difficulty,
+    'block.gaslimit': block.gasLimit,
+    'block.number': block.number,
+    'block.timestamp': block.timestamp,
+    'msg.sender': tx.from,
+    'msg.sig': tx.input.substring(0, 10),
+    'msg.value': tx.value + ' Wei',
+    'tx.origin': tx.from
+  }
+  return (
+    <div id='globalvariable' data-id='globalvariable'>
+      <DropdownPanel hexHighlight={false} bodyStyle={{ fontFamily: 'monospace' }} dropdownName='Global Variables' calldata={globals || {}} />
+    </div>
+  )
+}
+
+export default GlobalVariables

libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx

@@ -15,6 +15,7 @@ export const VmDebuggerHead = ({ vmDebugger: { registerEvent, triggerEvent } })
     'remaining gas': '-',
     'loaded address': '-'
   })
+
   const [solidityState, setSolidityState] = useState({
     calldata: null,
     message: null

libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx

@@ -6,8 +6,9 @@ import StackPanel from './stack-panel' // eslint-disable-line
 import StoragePanel from './storage-panel' // eslint-disable-line
 import ReturnValuesPanel from './dropdown-panel' // eslint-disable-line
 import FullStoragesChangesPanel from './full-storages-changes' // eslint-disable-line
+import GlobalVariables from './global-variables' // eslint-disable-line
 
-export const VmDebugger = ({ vmDebugger: { registerEvent } }) => {
+export const VmDebugger = ({ vmDebugger: { registerEvent }, currentBlock, currentReceipt, currentTransaction }) => {
   const [calldataPanel, setCalldataPanel] = useState(null)
   const [memoryPanel, setMemoryPanel] = useState(null)
   const [callStackPanel, setCallStackPanel] = useState(null)
@@ -58,6 +59,7 @@ export const VmDebugger = ({ vmDebugger: { registerEvent } }) => {
         <StoragePanel calldata={storagePanel.calldata} header={storagePanel.header} />
         <CallstackPanel calldata={callStackPanel} />
         <CalldataPanel calldata={calldataPanel} />
+        <GlobalVariables block={currentBlock} receipt={currentReceipt} tx={currentTransaction} />
         <ReturnValuesPanel dropdownName='Return Value' calldata={returnValuesPanel || {}} />
         <FullStoragesChangesPanel calldata={fullStoragesChangesPanel} />
       </div>

libs/remix-ui/publish-to-storage/src/lib/publish-to-storage.tsx

@@ -5,7 +5,7 @@ import { publishToIPFS } from './publishToIPFS'
 import { publishToSwarm } from './publishOnSwarm'
 
 export const PublishToStorage = (props: RemixUiPublishToStorageProps) => {
-  const { storage, fileProvider, fileManager, contract, resetStorage } = props
+  const { api, storage, contract, resetStorage } = props
   const [state, setState] = useState({
     modal: {
       title: '',
@@ -25,11 +25,11 @@ export const PublishToStorage = (props: RemixUiPublishToStorageProps) => {
       } else {
         if (storage === 'swarm') {
           try {
-            const result = await publishToSwarm(contract, fileManager)
+            const result = await publishToSwarm(contract, api)
 
             modal(`Published ${contract.name}'s Metadata`, publishMessage(result.uploaded))
             // triggered each time there's a new verified publish (means hash correspond)
-            fileProvider.addExternal('swarm/' + result.item.hash, result.item.content)
+            api.addExternalFile('swarm/' + result.item.hash, result.item.content)
           } catch (err) {
             let parseError = err
             try {
@@ -39,11 +39,11 @@ export const PublishToStorage = (props: RemixUiPublishToStorageProps) => {
           }
         } else {
           try {
-            const result = await publishToIPFS(contract, fileManager)
+            const result = await publishToIPFS(contract, api)
 
             modal(`Published ${contract.name}'s Metadata`, publishMessage(result.uploaded))
             // triggered each time there's a new verified publish (means hash correspond)
-            fileProvider.addExternal('ipfs/' + result.item.hash, result.item.content)
+            api.addExternalFile('ipfs/' + result.item.hash, result.item.content)
           } catch (err) {
             modal('IPFS Publish Failed', publishMessageFailed(storage, err))
           }

libs/remix-ui/publish-to-storage/src/lib/publishOnSwarm.tsx

@@ -2,7 +2,7 @@ import swarm from 'swarmgw'
 
 const swarmgw = swarm()
 
-export const publishToSwarm = async (contract, fileManager) => {
+export const publishToSwarm = async (contract, api) => {
   // gather list of files to publish
   const sources = []
   let metadata
@@ -38,16 +38,14 @@ export const publishToSwarm = async (contract, fileManager) => {
       throw new Error('Error while extracting the hash from metadata.json')
     }
 
-    fileManager.fileProviderOf(fileName).get(fileName, (error, content) => {
-      if (error) {
-        console.log(error)
-      } else {
-        sources.push({
-          content: content,
-          hash: hash,
-          filename: fileName
-        })
-      }
+    api.readFile(fileName).then((content) => {
+      sources.push({
+        content: content,
+        hash: hash,
+        filename: fileName
+      })
+    }).catch((error) => {
+      console.log(error)
     })
   }))
   // publish the list of sources in order, fail if any failed

libs/remix-ui/publish-to-storage/src/lib/publishToIPFS.tsx

@@ -6,7 +6,7 @@ const ipfsNodes = [
   new IpfsClient({ host: '127.0.0.1', port: 5001, protocol: 'http' })
 ]
 
-export const publishToIPFS = async (contract, fileManager) => {
+export const publishToIPFS = async (contract, api) => {
   // gather list of files to publish
   const sources = []
   let metadata
@@ -42,16 +42,14 @@ export const publishToIPFS = async (contract, fileManager) => {
       throw new Error('Error while extracting the hash from metadata.json')
     }
 
-    fileManager.fileProviderOf(fileName).get(fileName, (error, content) => {
-      if (error) {
-        console.log(error)
-      } else {
-        sources.push({
-          content: content,
-          hash: hash,
-          filename: fileName
-        })
-      }
+    api.readFile(fileName).then((content) => {
+      sources.push({
+        content: content,
+        hash: hash,
+        filename: fileName
+      })
+    }).catch((error) => {
+      console.log(error)
     })
   }))
   // publish the list of sources in order, fail if any failed

libs/remix-ui/publish-to-storage/src/lib/types/index.ts

 export interface RemixUiPublishToStorageProps {
+  api: any,
   storage: string,
-  fileProvider: any,
-  fileManager: any,
   contract: any,
   resetStorage: () => void
 }

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

@@ -4,12 +4,9 @@ interface RendererProps {
   message: any;
   opt?: any,
   plugin: any,
-  editor: any,
-  config: any,
-  fileManager: any
 }
 
-export const Renderer = ({ message, opt = {}, editor, config, fileManager, plugin }: RendererProps) => {
+export const Renderer = ({ message, opt = {}, plugin }: RendererProps) => {
   const [messageText, setMessageText] = useState(null)
   const [editorOptions, setEditorOptions] = useState({
     useSpan: false,
@@ -57,7 +54,7 @@ export const Renderer = ({ message, opt = {}, editor, config, fileManager, plugi
     setMessageText(text)
     setEditorOptions(options)
     setClose(false)
-  }, [message])
+  }, [message, opt])
 
   const getPositionDetails = (msg: any) => {
     const result = { } as Record<string, number | string>
@@ -77,7 +74,7 @@ export const Renderer = ({ message, opt = {}, editor, config, fileManager, plugi
   }
 
   const addAnnotation = (file, error) => {
-    if (file === config.get('currentFile')) {
+    if (file === plugin.getConfiguration('currentFile')) {
       plugin.call('editor', 'addAnnotation', error, file)
     }
   }
@@ -95,19 +92,19 @@ export const Renderer = ({ message, opt = {}, editor, config, fileManager, plugi
   }
 
   const _errorClick = (errFile, errLine, errCol) => {
-    if (errFile !== config.get('currentFile')) {
+    if (errFile !== plugin.getConfiguration('currentFile')) {
       // TODO: refactor with this._components.contextView.jumpTo
-      const provider = fileManager.fileProviderOf(errFile)
+      const provider = plugin.fileProviderOf(errFile)
       if (provider) {
         provider.exists(errFile).then(() => {
-          fileManager.open(errFile)
-          editor.gotoLine(errLine, errCol)
+          plugin.open(errFile)
+          plugin.call('editor', 'gotoLine', errLine, errCol)
         }).catch(error => {
           if (error) return console.log(error)
         })
       }
     } else {
-      editor.gotoLine(errLine, errCol)
+      plugin.call('editor', 'gotoLine', errLine, errCol)
     }
   }
 

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

@@ -26,8 +26,8 @@ export const resetCompilerMode = () => (dispatch: React.Dispatch<any>) => {
   })
 }
 
-export const listenToEvents = (editor, compileTabLogic) => (dispatch: React.Dispatch<any>) => {
-  editor.event.register('sessionSwitched', () => {
+export const listenToEvents = (compileTabLogic, api) => (dispatch: React.Dispatch<any>) => {
+  api.on('editor', 'sessionSwitched', () => {
     dispatch(setEditorMode('sessionSwitched'))
   })
 
@@ -39,7 +39,7 @@ export const listenToEvents = (editor, compileTabLogic) => (dispatch: React.Disp
     dispatch(setCompilerMode('compilationDuration', speed))
   })
 
-  editor.event.register('contentChanged', () => {
+  api.on('editor', 'contentChanged', () => {
     dispatch(setEditorMode('contentChanged'))
   })
 

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

@@ -18,7 +18,7 @@ declare global {
 const _paq = window._paq = window._paq || [] //eslint-disable-line
 
 export const CompilerContainer = (props: CompilerContainerProps) => {
-  const { editor, config, queryParams, compileTabLogic, tooltip, modal, compiledFileName, setHardHatCompilation, updateCurrentVersion, isHardHatProject, configurationSettings  } = props // eslint-disable-line
+  const { api, compileTabLogic, tooltip, modal, compiledFileName, updateCurrentVersion, configurationSettings  } = props // eslint-disable-line
   const [state, setState] = useState({
     hideWarnings: false,
     autoCompile: false,
@@ -56,26 +56,26 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
         _updateVersionSelector(selectedVersion)
       }
     })
-    const currentFileName = config.get('currentFile')
+    const currentFileName = api.getConfiguration('currentFile')
 
     currentFile(currentFileName)
-    listenToEvents(editor, compileTabLogic)(dispatch)
+    listenToEvents(compileTabLogic, api)(dispatch)
   }, [])
 
   useEffect(() => {
     if (compileTabLogic && compileTabLogic.compiler) {
       setState(prevState => {
-        const params = queryParams.get()
+        const params = api.getParameters()
         const optimize = params.optimize === 'false' ? false : params.optimize === 'true' ? true : null
         const runs = params.runs
         const evmVersion = params.evmVersion
 
         return {
           ...prevState,
-          hideWarnings: config.get('hideWarnings') || false,
-          autoCompile: config.get('autoCompile') || false,
-          includeNightlies: config.get('includeNightlies') || false,
-          optimise: (optimize !== null) && (optimize !== undefined) ? optimize : config.get('optimise') || false,
+          hideWarnings: api.getConfiguration('hideWarnings') || false,
+          autoCompile: api.getConfiguration('autoCompile') || false,
+          includeNightlies: api.getConfiguration('includeNightlies') || false,
+          optimise: (optimize !== null) && (optimize !== undefined) ? optimize : api.getConfiguration('optimise') || false,
           runs: (runs !== null) && (runs !== 'null') && (runs !== undefined) && (runs !== 'undefined') ? runs : 200,
           evmVersion: (evmVersion !== null) && (evmVersion !== 'null') && (evmVersion !== undefined) && (evmVersion !== 'undefined') ? evmVersion : 'default'
         }
@@ -152,7 +152,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
 
       allVersions = [...allVersions, ...versions]
       selectedVersion = state.defaultVersion
-      if (queryParams.get().version) selectedVersion = queryParams.get().version
+      if (api.getParameters().version) selectedVersion = api.getParameters().version
       // Check if version is a URL and corresponding filename starts with 'soljson'
       if (selectedVersion.startsWith('https://')) {
         const urlArr = selectedVersion.split('/')
@@ -197,7 +197,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
   // Load solc compiler version according to pragma in contract file
   const _setCompilerVersionFromPragma = (filename: string) => {
     if (!state.allversions) return
-    compileTabLogic.fileManager.readFile(filename).then(data => {
+    api.readFile(filename).then(data => {
       const pragmaArr = data.match(/(pragma solidity (.+?);)/g)
       if (pragmaArr && pragmaArr.length === 1) {
         const pragmaStr = pragmaArr[0].replace('pragma solidity', '').trim()
@@ -228,7 +228,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
   }
 
   const isSolFileSelected = (currentFile = '') => {
-    if (!currentFile) currentFile = config.get('currentFile')
+    if (!currentFile) currentFile = api.getConfiguration('currentFile')
     if (!currentFile) return false
     const extention = currentFile.substr(currentFile.length - 3, currentFile.length)
     return extention.toLowerCase() === 'sol' || extention.toLowerCase() === 'yul'
@@ -297,7 +297,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
   }
 
   const compile = () => {
-    const currentFile = config.get('currentFile')
+    const currentFile = api.getConfiguration('currentFile')
 
     if (!isSolFileSelected()) return
 
@@ -321,7 +321,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
       })
     }
     updateCurrentVersion(selectedVersion)
-    queryParams.update({ version: selectedVersion })
+    api.setParameters({ version: selectedVersion })
     let url
 
     if (customUrl !== '') {
@@ -331,7 +331,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
       })
       updateCurrentVersion(selectedVersion)
       url = customUrl
-      queryParams.update({ version: selectedVersion })
+      api.setParameters({ version: selectedVersion })
     } else if (selectedVersion === 'builtin') {
       let location: string | Location = window.document.location
       let path = location.pathname
@@ -406,7 +406,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
   const handleAutoCompile = (e) => {
     const checked = e.target.checked
 
-    config.set('autoCompile', checked)
+    api.setConfiguration('autoCompile', checked)
     setState(prevState => {
       return { ...prevState, autoCompile: checked }
     })
@@ -415,7 +415,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
   const handleOptimizeChange = (value) => {
     const checked = !!value
 
-    config.set('optimise', checked)
+    api.setConfiguration('optimise', checked)
     compileTabLogic.setOptimize(checked)
     if (compileTabLogic.optimize) {
       compileTabLogic.setRuns(parseInt(state.runs))
@@ -441,7 +441,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
   const handleHideWarningsChange = (e) => {
     const checked = e.target.checked
 
-    config.set('hideWarnings', checked)
+    api.setConfiguration('hideWarnings', checked)
     state.autoCompile && compile()
     setState(prevState => {
       return { ...prevState, hideWarnings: checked }
@@ -452,7 +452,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
     const checked = e.target.checked
 
     if (!checked) handleLoadVersion(state.defaultVersion)
-    config.set('includeNightlies', checked)
+    api.setConfiguration('includeNightlies', checked)
     setState(prevState => {
       return { ...prevState, includeNightlies: checked }
     })
@@ -483,7 +483,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
     const checked = event.target.checked
 
     sethhCompilation(checked)
-    setHardHatCompilation(checked)
+    api.setHardHatCompilation(checked)
   }
 
   /*
@@ -574,7 +574,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
             </div>
           </div>
           {
-            isHardHatProject &&
+            api.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/contract-selection.tsx

@@ -7,7 +7,7 @@ import { CopyToClipboard } from '@remix-ui/clipboard' // eslint-disable-line
 import './css/style.css'
 
 export const ContractSelection = (props: ContractSelectionProps) => {
-  const { contractMap, fileProvider, fileManager, contractsDetails, modal } = props
+  const { api, contractMap, contractsDetails, modal } = props
   const [contractList, setContractList] = useState([])
   const [selectedContract, setSelectedContract] = useState('')
   const [storage, setStorage] = useState(null)
@@ -234,7 +234,7 @@ export const ContractSelection = (props: ContractSelectionProps) => {
           <span className="mt-2 mx-3 w-100 alert alert-warning" role="alert">No Contract Compiled Yet</span>
         </article></section>
       }
-      <PublishToStorage storage={storage} fileManager={fileManager} fileProvider={fileProvider} contract={contractsDetails[selectedContract]} resetStorage={resetStorage} />
+      <PublishToStorage api={api} storage={storage} contract={contractsDetails[selectedContract]} resetStorage={resetStorage} />
     </>
   )
 }

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

@@ -18,46 +18,46 @@ export class CompileTab extends Plugin {
   public compilerImport
   public event
 
-  constructor (public queryParams, public fileManager, public editor, public config, public fileProvider, public contentImport) {
+  constructor (public api, public contentImport) {
     super(profile)
     this.event = new EventEmitter()
     this.compiler = new Compiler((url, cb) => this.call('contentImport', 'resolveAndSave', url).then((result) => cb(null, result)).catch((error) => cb(error.message)))
   }
 
   init () {
-    this.optimize = this.queryParams.get().optimize
+    this.optimize = this.api.getParameters().optimize
     this.optimize = this.optimize === 'true'
-    this.queryParams.update({ optimize: this.optimize })
+    this.api.setParameters({ optimize: this.optimize })
     this.compiler.set('optimize', this.optimize)
 
-    this.runs = this.queryParams.get().runs
+    this.runs = this.api.getParameters().runs
     this.runs = this.runs && this.runs !== 'undefined' ? this.runs : 200
-    this.queryParams.update({ runs: this.runs })
+    this.api.setParameters({ runs: this.runs })
     this.compiler.set('runs', this.runs)
 
-    this.evmVersion = this.queryParams.get().evmVersion
+    this.evmVersion = this.api.getParameters().evmVersion
     if (this.evmVersion === 'undefined' || this.evmVersion === 'null' || !this.evmVersion) {
       this.evmVersion = null
     }
-    this.queryParams.update({ evmVersion: this.evmVersion })
+    this.api.setParameters({ evmVersion: this.evmVersion })
     this.compiler.set('evmVersion', this.evmVersion)
   }
 
   setOptimize (newOptimizeValue) {
     this.optimize = newOptimizeValue
-    this.queryParams.update({ optimize: this.optimize })
+    this.api.setParameters({ optimize: this.optimize })
     this.compiler.set('optimize', this.optimize)
   }
 
   setRuns (runs) {
     this.runs = runs
-    this.queryParams.update({ runs: this.runs })
+    this.api.setParameters({ runs: this.runs })
     this.compiler.set('runs', this.runs)
   }
 
   setEvmVersion (newEvmVersion) {
     this.evmVersion = newEvmVersion
-    this.queryParams.update({ evmVersion: this.evmVersion })
+    this.api.setParameters({ evmVersion: this.evmVersion })
     this.compiler.set('evmVersion', this.evmVersion)
   }
 
@@ -79,7 +79,7 @@ export class CompileTab extends Plugin {
    */
   compileFile (target) {
     if (!target) throw new Error('No target provided for compiliation')
-    const provider = this.fileManager.fileProviderOf(target)
+    const provider = this.api.fileProviderOf(target)
     if (!provider) throw new Error(`cannot compile ${target}. Does not belong to any explorer`)
     return new Promise((resolve, reject) => {
       provider.get(target, (error, content) => {
@@ -93,14 +93,14 @@ export class CompileTab extends Plugin {
   }
 
   async isHardhatProject () {
-    if (this.fileManager.mode === 'localhost') {
-      return await this.fileManager.exists('hardhat.config.js')
+    if (this.api.getFileManagerMode() === 'localhost') {
+      return await this.api.fileExists('hardhat.config.js')
     } else return false
   }
 
   runCompiler (hhCompilation) {
     try {
-      if (this.fileManager.mode === 'localhost' && hhCompilation) {
+      if (this.api.getFileManagerMode() === 'localhost' && hhCompilation) {
         const { currentVersion, optimize, runs } = this.compiler.state
         if (currentVersion) {
           const fileContent = `module.exports = {
@@ -114,7 +114,7 @@ export class CompileTab extends Plugin {
           }
           `
           const configFilePath = 'remix-compiler.config.js'
-          this.fileManager.setFileContent(configFilePath, fileContent)
+          this.api.writeFile(configFilePath, fileContent)
           this.call('hardhat', 'compile', configFilePath).then((result) => {
             this.call('terminal', 'log', { type: 'info', value: result })
           }).catch((error) => {
@@ -122,9 +122,9 @@ export class CompileTab extends Plugin {
           })
         }
       }
-      this.fileManager.saveCurrentFile()
+      this.api.saveCurrentFile()
       this.event.emit('removeAnnotations')
-      var currentFile = this.config.get('currentFile')
+      var currentFile = this.api.getConfiguration('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: { editor, config, queryParams, compileTabLogic, currentFile, fileProvider, fileManager, contractsDetails, contractMap, compileErrors, isHardHatProject, setHardHatCompilation, configurationSettings } } = props
+  const { plugin, plugin: { compileTabLogic, contractsDetails, contractMap, compileErrors, configurationSettings } } = props
   const [state, setState] = useState({
     contractsDetails: {},
     eventHandlers: {},
@@ -75,22 +75,23 @@ export const SolidityCompiler = (props: SolidityCompilerProps) => {
     </div>
   )
 
+  const currentFile = plugin.getConfiguration('currentFile')
   return (
     <>
       <div id="compileTabView">
-        <CompilerContainer editor={editor} config={config} queryParams={queryParams} compileTabLogic={compileTabLogic} tooltip={toast} modal={modal} compiledFileName={currentFile} setHardHatCompilation={setHardHatCompilation.bind(plugin)} updateCurrentVersion={updateCurrentVersion} isHardHatProject={isHardHatProject} configurationSettings={configurationSettings} />
-        <ContractSelection contractMap={contractMap} fileProvider={fileProvider} fileManager={fileManager} contractsDetails={contractsDetails} modal={modal} />
+        <CompilerContainer api={plugin} compileTabLogic={compileTabLogic} tooltip={toast} modal={modal} compiledFileName={currentFile} updateCurrentVersion={updateCurrentVersion} configurationSettings={configurationSettings} />
+        <ContractSelection api={plugin} 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 }} config={config} editor={editor} fileManager={fileManager} /> }
+          { compileErrors.error && <Renderer message={compileErrors.error.formattedMessage || compileErrors.error} plugin={plugin} 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 (config.get('hideWarnings')) {
+            if (plugin.getConfiguration('hideWarnings')) {
               if (err.severity !== 'warning') {
-                return <Renderer key={index} message={err.formattedMessage} plugin={plugin} opt={{ type: err.severity, errorType: err.type }} config={config} editor={editor} fileManager={fileManager} />
+                return <Renderer key={index} message={err.formattedMessage} plugin={plugin} opt={{ type: err.severity, errorType: err.type }} />
               }
             } else {
-              return <Renderer key={index} message={err.formattedMessage} plugin={plugin} opt={{ type: err.severity, errorType: err.type }} config={config} editor={editor} fileManager={fileManager} />
+              return <Renderer key={index} message={err.formattedMessage} plugin={plugin} opt={{ type: err.severity, errorType: err.type }} />
             }
           }) }
         </div>

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

@@ -4,43 +4,32 @@ export interface SolidityCompilerProps {
       file: string
     } | Record<string, any>
     compileErrors: any,
-    isHardHatProject: boolean,
-    queryParams: any,
     compileTabLogic: any,
-    currentFile: string,
     contractsDetails: Record<string, any>,
-    editor: any,
-    config: any,
-    fileProvider: any,
-    fileManager: any,
     contentImport: any,
     call: (...args) => void
     on: (...args) => void,
-    setHardHatCompilation: (value: boolean) => void,
     setSelectedVersion: (value: string) => void,
-    configurationSettings: ConfigurationSettings
+    configurationSettings: ConfigurationSettings,
+    getConfiguration: (value: string) => string,
+    setConfiguration: (name: string, value: string) => void
   },
 }
 
 export interface CompilerContainerProps {
-  editor: any,
-  config: any,
-  queryParams: any,
+  api: any,
   compileTabLogic: any,
   tooltip: (message: string | JSX.Element) => void,
   modal: (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => void,
   compiledFileName: string,
-  setHardHatCompilation: (value: boolean) => void,
   updateCurrentVersion: any,
-  isHardHatProject: boolean,
   configurationSettings: ConfigurationSettings
 }
 export interface ContractSelectionProps {
+  api: any,
   contractMap: {
     file: string
   } | Record<string, any>,
-  fileManager: any,
-  fileProvider: any,
   modal: (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => void,
   contractsDetails: Record<string, any>
 }

libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.css

@@ -23,7 +23,7 @@
     word-break: break-all;
   }
   .label_key {
-    min-width: 15%;
+    min-width: max-content;
     max-width: 80%;
     word-break: break-word;
   }