Merge branch 'swap_it' into bootstrap_runtab_again

index.html

@@ -29,8 +29,8 @@
 		<meta http-equiv="X-UA-Compatible" content="chrome=1">
 		<title>Remix - Solidity IDE</title>
 		<link rel="stylesheet" id="theme-link"/>
+		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
 		<link rel="stylesheet" href="assets/css/pygment_trac.css">
-		<link rel="stylesheet" href="assets/css/font-awesome.min.css">
 		<link rel="icon" type="x-icon" href="icon.png">
 		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
 	</head>

package.json

@@ -3,6 +3,8 @@
   "version": "v0.8.0-alpha+002",
   "description": "Minimalistic browser-based Solidity IDE",
   "devDependencies": {
+    "@fortawesome/fontawesome-free": "^5.8.1",
+    "@resolver-engine/imports": "^0.3.0",
     "ace-mode-solidity": "^0.1.0",
     "async": "^2.1.2",
     "babel-eslint": "^7.1.1",
@@ -48,7 +50,6 @@
     "remix-tests": "0.1.1",
     "remixd": "0.1.8-alpha.6",
     "request": "^2.83.0",
-    "@resolver-engine/imports": "^0.3.0",
     "rimraf": "^2.6.1",
     "selenium-standalone": "^6.0.1",
     "solc": "^0.5.0",

src/app/components/vertical-icons-component.js

@@ -90,7 +90,7 @@ class VerticalIconComponent {
       let key = helper.checkSpecialChars(status.key) ? '' : status.key
       let type = helper.checkSpecialChars(status.type) ? '' : status.type
       let title = helper.checkSpecialChars(status.title) ? '' : status.title
-      el.appendChild(yo`<span title="${title}" class="fa fa-${key} ${css.status} text-${type}" aria-hidden="true"></span>`)
+      el.appendChild(yo`<span title="${title}" class="fas fa-${key} ${css.status} text-${type}" aria-hidden="true"></span>`)
 
       // el.classList = "" doesn't work on all browser use instead
       var classList = el.classList

src/app/debugger/debuggerUI/ButtonNavigator.js

@@ -46,19 +46,19 @@ ButtonNavigator.prototype.render = function () {
   var self = this
   var view = yo`<div class="${css.buttons}">
     <div class="${css.stepButtons} btn-group p-1">
-      <button id='overback' class='btn btn-primary btn-sm' title='Step over back' class='${css.navigator} ${css.stepButton} fa fa-reply' onclick=${function () { self.event.trigger('stepOverBack') }} disabled=${this.overBackDisabled} ></button>
+      <button id='overback' class='btn btn-primary btn-sm' title='Step over back' class='${css.navigator} ${css.stepButton} fas fa-reply' onclick=${function () { self.event.trigger('stepOverBack') }} disabled=${this.overBackDisabled} ></button>
-      <button id='intoback' class='btn btn-primary btn-sm' title='Step back' class='${css.navigator} ${css.stepButton} fa fa-level-up' onclick=${function () { self.event.trigger('stepIntoBack') }} disabled=${this.intoBackDisabled} ></button>
+      <button id='intoback' class='btn btn-primary btn-sm' title='Step back' class='${css.navigator} ${css.stepButton} fas fa-level-up' onclick=${function () { self.event.trigger('stepIntoBack') }} disabled=${this.intoBackDisabled} ></button>
-      <button id='intoforward' class='btn btn-primary btn-sm' title='Step into'  class='${css.navigator} ${css.stepButton} fa fa-level-down' onclick=${function () { self.event.trigger('stepIntoForward') }} disabled=${this.intoForwardDisabled} ></button>
+      <button id='intoforward' class='btn btn-primary btn-sm' title='Step into'  class='${css.navigator} ${css.stepButton} fas fa-level-down' onclick=${function () { self.event.trigger('stepIntoForward') }} disabled=${this.intoForwardDisabled} ></button>
-      <button id='overforward' class='btn btn-primary btn-sm' title='Step over forward' class='${css.navigator} ${css.stepButton} fa fa-share' onclick=${function () { self.event.trigger('stepOverForward') }} disabled=${this.overForwardDisabled} ></button>
+      <button id='overforward' class='btn btn-primary btn-sm' title='Step over forward' class='${css.navigator} ${css.stepButton} fas fa-share' onclick=${function () { self.event.trigger('stepOverForward') }} disabled=${this.overForwardDisabled} ></button>
     </div>
 
     <div class="${css.jumpButtons} btn-group p-1">
-      <button class='btn btn-primary btn-sm'  id='jumppreviousbreakpoint' title='Jump to the previous breakpoint' class='${css.navigator} ${css.jumpButton} fa fa-step-backward' onclick=${function () { self.event.trigger('jumpPreviousBreakpoint') }} disabled=${this.jumpPreviousBreakpointDisabled} ></button>
+      <button class='btn btn-primary btn-sm'  id='jumppreviousbreakpoint' title='Jump to the previous breakpoint' class='${css.navigator} ${css.jumpButton} fas fa-step-backward' onclick=${function () { self.event.trigger('jumpPreviousBreakpoint') }} disabled=${this.jumpPreviousBreakpointDisabled} ></button>
-      <button class='btn btn-primary btn-sm' id='jumpout' title='Jump out' class='${css.navigator} ${css.jumpButton} fa fa-eject' onclick=${function () { self.event.trigger('jumpOut') }} disabled=${this.jumpOutDisabled} ></button>
+      <button class='btn btn-primary btn-sm' id='jumpout' title='Jump out' class='${css.navigator} ${css.jumpButton} fas fa-eject' onclick=${function () { self.event.trigger('jumpOut') }} disabled=${this.jumpOutDisabled} ></button>
-      <button class='btn btn-primary btn-sm' id='jumpnextbreakpoint' title='Jump to the next breakpoint' class='${css.navigator} ${css.jumpButton} fa fa-step-forward' onclick=${function () { self.event.trigger('jumpNextBreakpoint') }} disabled=${this.jumpNextBreakpointDisabled} ></button>
+      <button class='btn btn-primary btn-sm' id='jumpnextbreakpoint' title='Jump to the next breakpoint' class='${css.navigator} ${css.jumpButton} fas fa-step-forward' onclick=${function () { self.event.trigger('jumpNextBreakpoint') }} disabled=${this.jumpNextBreakpointDisabled} ></button>
     </div>
     <div id='reverted' style="display:none">
-      <button class='btn btn-danger btn-sm' id='jumptoexception' title='Jump to exception' class='${css.navigator} ${css.button} fa fa-exclamation-triangle' onclick=${function () { self.event.trigger('jumpToException') }} disabled=${this.jumpOutDisabled} >
+      <button class='btn btn-danger btn-sm' id='jumptoexception' title='Jump to exception' class='${css.navigator} ${css.button} fas fa-exclamation-triangle' onclick=${function () { self.event.trigger('jumpToException') }} disabled=${this.jumpOutDisabled} >
       </button>
       <span>State changes made during this call will be reverted.</span>
       <span id='outofgas' style="display:none">This call will run out of gas.</span>

src/app/debugger/debuggerUI/vmDebugger/DropdownPanel.js

@@ -65,7 +65,7 @@ DropdownPanel.prototype.setMessage = function (message) {
   if (!this.view) return
   this.view.querySelector('.dropdownpanel .dropdownrawcontent').style.display = 'none'
   this.view.querySelector('.dropdownpanel .dropdowncontent').style.display = 'none'
-  this.view.querySelector('.dropdownpanel .fa-refresh').style.display = 'none'
+  this.view.querySelector('.dropdownpanel > i').style.display = 'none'
   this.message(message)
 }
 
@@ -73,7 +73,7 @@ DropdownPanel.prototype.setLoading = function () {
   if (!this.view) return
   this.view.querySelector('.dropdownpanel .dropdownrawcontent').style.display = 'none'
   this.view.querySelector('.dropdownpanel .dropdowncontent').style.display = 'none'
-  this.view.querySelector('.dropdownpanel .fa-refresh').style.display = 'inline-block'
+  this.view.querySelector('.dropdownpanel > i').style.display = 'inline-block'
   this.message('')
 }
 
@@ -83,7 +83,7 @@ DropdownPanel.prototype.setUpdating = function () {
 
 DropdownPanel.prototype.update = function (_data, _header) {
   if (!this.view) return
-  this.view.querySelector('.dropdownpanel .fa-refresh').style.display = 'none'
+  this.view.querySelector('.dropdownpanel > i').style.display = 'none'
   this.view.querySelector('.dropdownpanel .dropdowncontent').style.display = 'block'
   this.view.querySelector('.dropdownpanel .dropdownrawcontent').innerText = JSON.stringify(_data, null, '\t')
   if (!this.displayContentOnly) {
@@ -98,11 +98,10 @@ DropdownPanel.prototype.update = function (_data, _header) {
 
 DropdownPanel.prototype.setContent = function (node) {
   if (!this.view) return
-  var parent = this.view.querySelector('.dropdownpanel div.dropdowncontent')
+  yo.update(this.view, this.render(null, node))
-  parent.replaceChild(node, parent.firstElementChild)
 }
 
-DropdownPanel.prototype.render = function (overridestyle) {
+DropdownPanel.prototype.render = function (overridestyle, node) {
   var content = yo`<div>Empty</div>`
   if (this.json) {
     content = this.treeView.render({})
@@ -110,14 +109,14 @@ DropdownPanel.prototype.render = function (overridestyle) {
   overridestyle === undefined ? {} : overridestyle
   var self = this
   var title = !self.displayContentOnly ? yo`<div class="${css.title} title">
-      <div class="${css.icon} fa fa-caret-right" onclick=${function () { self.toggle() }} ></div>
+      <div class="${css.icon} fas fa-caret-right" onclick=${function () { self.toggle() }} ></div>
       <div class="${css.name}" onclick=${function () { self.toggle() }} >${this.name}</div><span class="${css.nameDetail}" onclick=${function () { self.toggle() }} ></span>
-      <div onclick=${function () { self.copyClipboard() }} title='raw' class="${css.eyeButton} btn fa fa-clipboard"></div>
+      <div onclick=${function () { self.copyClipboard() }} title='raw' class="${css.eyeButton} btn far fa-clipboard"></div>
     </div>` : yo`<div></div>`
 
   var contentNode = yo`<div class='dropdownpanel ${css.dropdownpanel}' style='display:none'>
-      <i class="${css.refresh} fa fa-refresh" aria-hidden="true"></i>
+      <i class="${css.refresh} fas fa-sync" aria-hidden="true"></i>
-      <div class='dropdowncontent'>${content}</div>
+      <div class='dropdowncontent'>${node || content}</div>
       <div class='dropdownrawcontent' style='display:none'></div>
       <div class='message' style='display:none'></div>
     </div>`
@@ -154,11 +153,11 @@ DropdownPanel.prototype.toggle = function () {
   var caret = this.view.querySelector('.title').firstElementChild
   if (el.style.display === '') {
     el.style.display = 'none'
-    caret.className = `${css.icon} fa fa-caret-right`
+    caret.className = `${css.icon} fas fa-caret-right`
     this.event.trigger('hide', [])
   } else {
     el.style.display = ''
-    caret.className = `${css.icon} fa fa-caret-down`
+    caret.className = `${css.icon} fas fa-caret-down`
     this.event.trigger('show', [])
   }
 }
@@ -168,7 +167,7 @@ DropdownPanel.prototype.hide = function () {
   var caret = this.view.querySelector('.title').firstElementChild
   var el = this.view.querySelector('.dropdownpanel')
   el.style.display = 'none'
-  caret.className = `${css.icon} fa fa-caret-right`
+  caret.className = `${css.icon} fas fa-caret-right`
   this.event.trigger('hide', [])
 }
 
@@ -177,7 +176,7 @@ DropdownPanel.prototype.show = function () {
   var caret = this.view.querySelector('.title').firstElementChild
   var el = this.view.querySelector('.dropdownpanel')
   el.style.display = ''
-  caret.className = `${css.icon} fa fa-caret-down`
+  caret.className = `${css.icon} fas fa-caret-down`
   this.event.trigger('show', [])
 }
 

src/app/editor/contextView.js

@@ -172,10 +172,10 @@ class ContextView {
     return yo`<div class=${css.line}>
       <div title=${type} class=${css.type}>${type}</div>
       <div title=${node.attributes.name} class=${css.name}>${node.attributes.name}</div>
-      <i class="fa fa-share ${css.jump}" aria-hidden="true" onclick=${jumpTo}></i>
+      <i class="fas fa-share ${css.jump}" aria-hidden="true" onclick=${jumpTo}></i>
       <span class=${css.referencesnb}>${references}</span>
-      <i data-action='previous' class="fa fa-chevron-up ${css.jump}" aria-hidden="true" onclick=${jump}></i>
+      <i data-action='previous' class="fas fa-chevron-up ${css.jump}" aria-hidden="true" onclick=${jump}></i>
-      <i data-action='next' class="fa fa-chevron-down ${css.jump}" aria-hidden="true" onclick=${jump}></i>
+      <i data-action='next' class="fas fa-chevron-down ${css.jump}" aria-hidden="true" onclick=${jump}></i>
         ${showGasEstimation()}
     </div>`
   }

src/app/execution/confirmDialog.js

@@ -40,7 +40,7 @@ function confirmDialog (tx, amount, gasEstimation, self, newGasPriceCb, initialP
     </div>
     <div class=${css.checkbox}>
       <input id='confirmsetting' type="checkbox">
-      <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Do not ask for confirmation again. (the setting will not be persisted for the next page reload)
+      <i class="fas fa-exclamation-triangle" aria-hidden="true"></i> Do not ask for confirmation again. (the setting will not be persisted for the next page reload)
     </div>
   </div>
   `

src/app/execution/txLogger.js

@@ -161,22 +161,6 @@ class TxLogger {
       append(el)
     }, { activate: true })
 
-    this._deps.editorPanel.event.register('terminalFilterChanged', (type, label) => {
-      if (type === 'deselect') {
-        if (label === 'only remix transactions') {
-          this._deps.editorPanel.updateTerminalFilter({ type: 'select', value: 'unknownTransaction' })
-        } else if (label === 'all transactions') {
-          this._deps.editorPanel.updateTerminalFilter({ type: 'deselect', value: 'unknownTransaction' })
-        }
-      } else if (type === 'select') {
-        if (label === 'only remix transactions') {
-          this._deps.editorPanel.updateTerminalFilter({ type: 'deselect', value: 'unknownTransaction' })
-        } else if (label === 'all transactions') {
-          this._deps.editorPanel.updateTerminalFilter({ type: 'select', value: 'unknownTransaction' })
-        }
-      }
-    })
-
     this._deps.txListener.event.register('newBlock', (block) => {
       if (!block.transactions || block.transactions && !block.transactions.length) {
         this.logEmptyBlock({ block: block })
@@ -190,6 +174,9 @@ class TxLogger {
     this._deps.txListener.event.register('newCall', (tx) => {
       log(this, tx, null)
     })
+
+    this._deps.editorPanel.updateTerminalFilter({ type: 'select', value: 'unknownTransaction' })
+    this._deps.editorPanel.updateTerminalFilter({ type: 'select', value: 'knownTransaction' })
   }
 }
 
@@ -233,7 +220,7 @@ function renderKnownTransaction (self, data) {
         <div class=${css.buttons}>
           <button class="${css.debug} btn btn-primary btn-sm" onclick=${(e) => debug(e, data, self)}>Debug</div>
         </div>
-        <i class="${css.arrow} fa fa-angle-down"></i>
+        <i class="${css.arrow} fas fa-angle-down"></i>
       </div>
     </span>
   `
@@ -259,7 +246,7 @@ function renderCall (self, data) {
         <div class=${css.buttons}>
           <div class=${css.debug} onclick=${(e) => debug(e, data, self)}>Debug</div>
         </div>
-        <i class="${css.arrow} fa fa-angle-down"></i>
+        <i class="${css.arrow} fas fa-angle-down"></i>
       </div>
     </span>
   `
@@ -279,7 +266,7 @@ function renderUnknownTransaction (self, data) {
         <div class=${css.buttons}>
           <div class=${css.debug} onclick=${(e) => debug(e, data, self)}>Debug</div>
         </div>
-        <i class="${css.arrow} fa fa-angle-down"></i>
+        <i class="${css.arrow} fas fa-angle-down"></i>
       </div>
     </span>
   `
@@ -295,14 +282,14 @@ function renderEmptyBlock (self, data) {
 
 function checkTxStatus (tx, type) {
   if (tx.status === '0x1') {
-    return yo`<i class="${css.txStatus} ${css.succeeded} fa fa-check-circle"></i>`
+    return yo`<i class="${css.txStatus} ${css.succeeded} fas fa-check-circle"></i>`
   }
   if (type === 'call' || type === 'unknownCall') {
     return yo`<i class="${css.txStatus} ${css.call}">call</i>`
   } else if (tx.status === '0x0') {
-    return yo`<i class="${css.txStatus} ${css.failed} fa fa-times-circle"></i>`
+    return yo`<i class="${css.txStatus} ${css.failed} fas fa-times-circle"></i>`
   } else {
-    return yo`<i class="${css.txStatus} ${css.notavailable} fa fa-circle-thin" title='Status not available' ></i>`
+    return yo`<i class="${css.txStatus} ${css.notavailable} fas fa-circle-thin" title='Status not available' ></i>`
   }
 }
 
@@ -369,8 +356,8 @@ function txDetails (e, tx, data, obj) {
   var to = obj.to
   var log = document.querySelector(`#${tx.id} [class^='log']`)
   var arrow = document.querySelector(`#${tx.id} [class^='arrow']`)
-  var arrowUp = yo`<i class="${css.arrow} fa fa-angle-up"></i>`
+  var arrowUp = yo`<i class="${css.arrow} fas fa-angle-up"></i>`
-  var arrowDown = yo`<i class="${css.arrow} fa fa-angle-down"></i>`
+  var arrowDown = yo`<i class="${css.arrow} fas fa-angle-down"></i>`
   if (table && table.parentNode) {
     tx.removeChild(table)
     log.removeChild(arrow)

src/app/files/file-explorer.js

@@ -28,23 +28,23 @@ function fileExplorer (localRegistry, files, menuItems) {
     [
       { action: 'createNewFile',
         title: 'Create New File in the Browser Storage Explorer',
-        icon: 'fa fa-plus-circle'
+        icon: 'fas fa-plus-circle'
       },
       { action: 'publishToGist',
         title: 'Publish all [browser] explorer files to a github gist',
-        icon: 'fa fa-github'
+        icon: 'fab fa-github'
       },
       { action: 'copyFiles',
         title: 'Copy all files to another instance of Remix IDE',
-        icon: 'fa fa-files-o'
+        icon: 'far fa-copy'
       },
       { action: 'uploadFile',
         title: 'Add Local file to the Browser Storage Explorer',
-        icon: 'fa fa-folder-open'
+        icon: 'far fa-folder-open'
       },
       { action: 'updateGist',
         title: 'Update the current [gist] explorer',
-        icon: 'fa fa-github'
+        icon: 'fab fa-github'
       }
     ]
   // menu items

src/app/files/remixd-handle.js

@@ -98,7 +98,7 @@ function remixdDialog () {
       </div>
       <div class=${css.dialogParagraph}>Connection will start a session between <em>${window.location.href}</em> and your local file system <i>ws://127.0.0.1:65520</i>
         so please make sure your system is secured enough (port 65520 neither opened nor forwarded).
-        <i class="fa fa-link"></i> will show you current connection status.
+        <i class="fas fa-link"></i> will show you current connection status.
       </div>
       <div class=${css.dialogParagraph}>This feature is still in Alpha, so we recommend you to keep a copy of the shared folder.</div>
     </div>

src/app/panels/editor-panel.js

@@ -114,9 +114,6 @@ class EditorPanel {
         }
       })
 
-    self._components.terminal.event.register('filterChanged', (type, value) => {
-      this.event.trigger('terminalFilterChanged', [type, value])
-    })
     self._components.terminal.event.register('resize', delta => self._adjustLayout('top', delta))
     if (self._deps.txListener) {
       self._components.terminal.event.register('listenOnNetWork', (listenOnNetWork) => {

src/app/panels/terminal.js

@@ -11,7 +11,6 @@ var swarmgw = require('swarmgw')()
 
 var CommandInterpreterAPI = require('../../lib/cmdInterpreterAPI')
 var executionContext = require('../../execution-context')
-var Dropdown = require('../ui/dropdown')
 var AutoCompletePopup = require('../ui/auto-complete-popup')
 
 var csjs = require('csjs-inject')
@@ -52,27 +51,6 @@ class Terminal extends BaseApi {
     self._view = { el: null, bar: null, input: null, term: null, journal: null, cli: null }
     self._components = {}
     self._components.cmdInterpreter = new CommandInterpreterAPI(this)
-    self._components.dropdown = new Dropdown({
-      options: [
-        'only remix transactions',
-        'all transactions',
-        'script'
-      ],
-      defaults: ['only remix transactions', 'script'],
-      dependencies: {'all transactions': ['only remix transactions'], 'only remix transactions': ['all transactions']}
-    })
-    self._components.dropdown.event.register('deselect', function (label) {
-      self.event.trigger('filterChanged', ['deselect', label])
-      if (label === 'script') {
-        self.updateJournal({ type: 'deselect', value: label })
-      }
-    })
-    self._components.dropdown.event.register('select', function (label) {
-      self.event.trigger('filterChanged', ['select', label])
-      if (label === 'script') {
-        self.updateJournal({ type: 'select', value: label })
-      }
-    })
     self._components.autoCompletePopup = new AutoCompletePopup(self._opts)
     self._components.autoCompletePopup.event.register('handleSelect', function (input) {
       let textList = self._view.input.innerText.split(' ')
@@ -142,10 +120,10 @@ class Terminal extends BaseApi {
     `
     self._view.icon = yo`
       <i onmouseenter=${hover} onmouseleave=${hover} onmousedown=${minimize}
-      class="btn btn-secondary btn-sm align-items-center ${css.toggleTerminal} fa fa-angle-double-down"></i>`
+      class="btn btn-secondary btn-sm align-items-center ${css.toggleTerminal} fas fa-angle-double-down"></i>`
     self._view.dragbar = yo`
       <div onmousedown=${mousedown} class=${css.dragbarHorizontal}></div>`
-    self._view.dropdown = self._components.dropdown.render()
+
     self._view.pendingTxCount = yo`<div class=${css.pendingTx} title='Pending Transactions'>0</div>`
     self._view.inputSearch = yo`<input spellcheck="false" type="text" class="${css.filter} form-control" id="input" onkeydown=${filter}  placeholder="Search transactions"></input>`
     self._view.bar = yo`
@@ -154,7 +132,7 @@ class Terminal extends BaseApi {
         <div class="${css.menu} border-top bg-light">
           ${self._view.icon}
           <div class=${css.clear} onclick=${clear}>
-            <i class="fa fa-ban" aria-hidden="true" title="Clear console"
+            <i class="fas fa-ban" aria-hidden="true" title="Clear console"
             onmouseenter=${hover} onmouseleave=${hover}></i>
           </div>
           ${self._view.pendingTxCount}
@@ -164,9 +142,8 @@ class Terminal extends BaseApi {
             title="If checked Remix will listen on all transactions mined in the current environment and not only transactions created by you">
             <label class="form-check-label" title="If checked Remix will listen on all transactions mined in the current environment and not only transactions created by you" for="listenNetworkCheck">listen on network</label>
           </div>
-          ${self._view.dropdown}
           <div class=${css.search}>
-            <i class="fa fa-search ${css.searchIcon} bg-light" aria-hidden="true"></i>
+            <i class="fas fa-search ${css.searchIcon} bg-light" aria-hidden="true"></i>
             ${self._view.inputSearch}
           </div>
         </div>
@@ -364,6 +341,7 @@ class Terminal extends BaseApi {
       }
       filtertimeout = setTimeout(() => {
         self.updateJournal({ type: 'search', value: self._view.inputSearch.value })
+        self.scroll2bottom()
       }, 500)
     }
     function clear (event) {
@@ -535,8 +513,8 @@ class Terminal extends BaseApi {
     self._JOURNAL.forEach(item => {
       if (item && item.el && !item.hide) df.appendChild(item.el)
     })
+    self._view.journal.innerHTML = ''
     requestAnimationFrame(function updateDOM () {
-      self._view.journal.innerHTML = ''
       self._view.journal.appendChild(df)
     })
   }

src/app/tabs/compile-tab.js

@@ -118,7 +118,7 @@ class CompileTab extends CompilerApi {
         this.renderer.error(data['error'].formattedMessage, this._view.errorContainer, {type: data['error'].severity || 'error'})
         if (data['error'].mode === 'panic') {
           return modalDialogCustom.alert(yo`
-            <div><i class="fa fa-exclamation-circle ${css.panicError}" aria-hidden="true"></i>
+            <div><i class="fas fa-exclamation-circle ${css.panicError}" aria-hidden="true"></i>
             The compiler returned with the following internal error: <br> <b>${data['error'].formattedMessage}.<br>
             The compiler might be in a non-sane state, please be careful and do not use further compilation data to deploy to mainnet.
             It is heavily recommended to use another browser not affected by this issue (Firefox is known to not be affected).</b><br>
@@ -174,7 +174,7 @@ class CompileTab extends CompilerApi {
       </header>
       <article class="${css.compilerArticle}">
         <button class="btn btn-primary btn-block" title="Publish on Swarm" onclick="${() => { this.publish() }}">
-          <i class="${css.copyIcon} fa fa-upload" aria-hidden="true"></i>
+          <i class="${css.copyIcon} fas fa-upload" aria-hidden="true"></i>
           <span>Publish on Swarm</span>
         </button>
         <button class="btn btn-secondary btn-block" title="Display Contract Details" onclick="${() => { this.details() }}">
@@ -183,16 +183,13 @@ class CompileTab extends CompilerApi {
         <!-- Copy to Clipboard -->
         <div class="${css.contractHelperButtons} btn-secondary">
           <div class="input-group">
-            <div class="input-group-prepend">
-              <span class="input-group-text">Copy to clipboard</span>
-            </div>
             <div class="btn-group" role="group" aria-label="Copy to Clipboard">
               <button class="btn btn-secondary" title="Copy ABI to clipboard" onclick="${() => { this.copyABI() }}">
-                <i class="${css.copyIcon} fa fa-clipboard" aria-hidden="true"></i>
+                <i class="${css.copyIcon} far fa-clipboard" aria-hidden="true"></i>
                 <span>ABI</span>
               </button>
               <button class="btn btn-secondary" title="Copy Bytecode to clipboard" onclick="${() => { this.copyBytecode() }}">
-                <i class="${css.copyIcon} fa fa-clipboard" aria-hidden="true"></i>
+                <i class="${css.copyIcon} far fa-clipboard" aria-hidden="true"></i>
                 <span>Bytecode</span>
               </button>
             </div>
@@ -268,7 +265,7 @@ class CompileTab extends CompilerApi {
     const log = yo`<div class="${css.detailsJSON}"></div>`
     Object.keys(contractProperties).map(propertyName => {
       const copyDetails = yo`<span class="${css.copyDetails}">${copyToClipboard(() => contractProperties[propertyName])}</span>`
-      const questionMark = yo`<span class="${css.questionMark}"><i title="${help[propertyName]}" class="fa fa-question-circle" aria-hidden="true"></i></span>`
+      const questionMark = yo`<span class="${css.questionMark}"><i title="${help[propertyName]}" class="fas fa-question-circle" aria-hidden="true"></i></span>`
       log.appendChild(yo`<div class=${css.log}>
         <div class="${css.key}">${propertyName} ${copyDetails} ${questionMark}</div>
         ${this.insertValue(contractProperties, propertyName)}

src/app/tabs/compileTab/compilerContainer.js

@@ -117,8 +117,8 @@ class CompilerContainer {
       if (this._view.versionSelector) this._updateVersionSelector()
     })
 
-    this._view.warnCompilationSlow = yo`<i title="Compilation Slow" style="visibility:hidden" class="${css.warnCompilationSlow} fa fa-exclamation-triangle" aria-hidden="true"></i>`
+    this._view.warnCompilationSlow = yo`<i title="Compilation Slow" style="visibility:hidden" class="${css.warnCompilationSlow} fas fa-exclamation-triangle" aria-hidden="true"></i>`
-    this._view.compileIcon = yo`<i class="fa fa-refresh ${css.icon}" aria-hidden="true"></i>`
+    this._view.compileIcon = yo`<i class="fas fa-sync ${css.icon}" aria-hidden="true"></i>`
     this._view.autoCompile = yo`<input class="${css.autocompile}" onchange=${this.updateAutoCompile.bind(this)} id="autoCompile" type="checkbox" title="Auto compile">`
     this._view.hideWarningsBox = yo`<input class="${css.autocompile}" onchange=${this.hideWarnings.bind(this)} id="hideWarningsBox" type="checkbox" title="Hide warnings">`
     if (this.data.autoCompile) this._view.autoCompile.setAttribute('checked', '')

src/app/tabs/run-tab.js

@@ -60,7 +60,7 @@ class RunTab extends BaseApi {
       <div class=${css.instanceContainerTitle}
         title="Autogenerated generic user interfaces for interaction with deployed contracts">
         Deployed Contracts
-        <i class="${css.clearinstance} ${css.icon} fa fa-trash" onclick=${() => this.event.trigger('clearInstance', [])}
+        <i class="${css.clearinstance} ${css.icon} far fa-trash-alt" onclick=${() => this.event.trigger('clearInstance', [])}
           title="Clear instances list and reset recorder" aria-hidden="true">
         </i>
       </div>`

src/app/tabs/runTab/contractDropdown.js

@@ -44,8 +44,8 @@ class ContractDropdownUI {
   }
 
   render () {
-    this.compFails = yo`<i title="No contract compiled yet or compilation failed. Please check the compile tab for more information." class="fa fa-times-circle ${css.errorIcon}" ></i>`
+    this.compFails = yo`<i title="No contract compiled yet or compilation failed. Please check the compile tab for more information." class="fas fa-times-circle ${css.errorIcon}" ></i>`
-    var info = yo`<i class="fa fa-info ${css.infoDeployAction}" aria-hidden="true" title="*.sol files allows deploying and accessing contracts. *.abi files only allows accessing contracts."></i>`
+    var info = yo`<i class="fas fa-info ${css.infoDeployAction}" aria-hidden="true" title="*.sol files allows deploying and accessing contracts. *.abi files only allows accessing contracts."></i>`
 
     this.atAddressButtonInput = yo`<input class="${css.input} ${css.ataddressinput} ataddressinput form-control" placeholder="Load contract from Address" title="atAddress" />`
     this.selectContractNames = yo`<select class="${css.contractNames} custom-select" disabled></select>`

src/app/tabs/runTab/recorder.js

@@ -23,9 +23,9 @@ class RecorderUI {
       .recorder {}
     `
 
-    this.runButton = yo`<i class="fa fa-play runtransaction ${css2.runTxs} ${css.icon}"  title="Run Transactions" aria-hidden="true"></i>`
+    this.runButton = yo`<i class="fas fa-play runtransaction ${css2.runTxs} ${css.icon}"  title="Run Transactions" aria-hidden="true"></i>`
     this.recordButton = yo`
-      <i class="fa fa-floppy-o savetransaction ${css2.recorder} ${css.icon}"
+      <i class="fas fa-save savetransaction ${css2.recorder} ${css.icon}"
         onclick=${this.triggerRecordButton.bind(this)} title="Save Transactions" aria-hidden="true">
       </i>`
 

src/app/tabs/runTab/settings.js

@@ -64,7 +64,7 @@ class SettingsUI {
               value="web3" name="executionContext"> Web3 Provider
             </option>
           </select>
-          <a href="https://github.com/ethereum/EIPs/blob/master/EIPS/eip-155.md" target="_blank"><i class="${css.infoDeployAction} fa fa-info"></i></a>
+          <a href="https://github.com/ethereum/EIPs/blob/master/EIPS/eip-155.md" target="_blank"><i class="${css.infoDeployAction} fas fa-info"></i></a>
         </div>
       </div>
     `
@@ -73,12 +73,12 @@ class SettingsUI {
       <div class="${css.crow}">
         <div class="${css.col1_1}">
           Account
-          <i class="fa fa-plus-circle ${css.icon}" aria-hidden="true" onclick=${this.newAccount.bind(this)} title="Create a new account"></i>
+          <i class="fas fa-plus-circle ${css.icon}" aria-hidden="true" onclick=${this.newAccount.bind(this)} title="Create a new account"></i>
         </div>
         <div class=${css.account}>
           <select name="txorigin" class="form-control ${css.select}" id="txorigin"></select>
           ${copyToClipboard(() => document.querySelector('#runTabView #txorigin').value)}
-          <i class="fa fa-pencil-square-o ${css.icon}" aria-hiden="true" onclick=${this.signMessage.bind(this)} title="Sign a message using this account key"></i>
+          <i class="fas fa-edit ${css.icon}" aria-hiden="true" onclick=${this.signMessage.bind(this)} title="Sign a message using this account key"></i>
         </div>
       </div>
     `
@@ -231,7 +231,7 @@ class SettingsUI {
         this.netUI.innerHTML = 'can\'t detect network '
         return
       }
-      this.netUI.innerHTML = `<i class="${css.networkItem} fa fa-plug" aria-hidden="true"></i> ${name} (${id || '-'})`
+      this.netUI.innerHTML = `<i class="${css.networkItem} fas fa-plug" aria-hidden="true"></i> ${name} (${id || '-'})`
     })
   }
 

src/app/tabs/settings-tab.js

@@ -81,7 +81,7 @@ module.exports = class SettingsTab extends BaseApi {
     Although this is very convenient, you should completely trust the backend you are connected to (Geth, Parity, ...).
     It is not recommended (and also most likely not relevant) to use this mode with an injected provider (Mist, Metamask, ...) or with JavaScript VM.
     Remix never persist any passphrase.`.split('\n').map(s => s.trim()).join(' ')
-    this._view.warnPersonalMode = yo`<i title=${warnText} class="${css.icon} fa fa-exclamation-triangle text-warning" aria-hidden="true"></i>`
+    this._view.warnPersonalMode = yo`<i title=${warnText} class="${css.icon} fas fa-exclamation-triangle text-warning" aria-hidden="true"></i>`
     this._view.generateContractMetadata = yo`<input onchange=${onchangeGenerateContractMetadata} id="generatecontractmetadata" type="checkbox" class="form-check-input">`
 
     if (this.config.get('settings/generate-contract-metadata')) this._view.generateContractMetadata.setAttribute('checked', '')

src/app/ui/TreeView.js

@@ -77,7 +77,7 @@ class TreeView {
   formatData (key, data, children, expand, keyPath) {
     var self = this
     var li = yo`<li key=${keyPath} class=${css.li_tv}></li>`
-    var caret = yo`<div class="fa fa-caret-right caret ${css.caret_tv}"></div>`
+    var caret = yo`<div class="fas fa-caret-right caret ${css.caret_tv}"></div>`
     var label = yo`
       <div key=${keyPath} class=${css.label_tv}>
         ${caret}
@@ -87,7 +87,7 @@ class TreeView {
     if (data.children) {
       var list = yo`<ul key=${keyPath} class=${css.ul_tv}>${children}</ul>`
       list.style.display = 'none'
-      caret.className = list.style.display === 'none' ? `fa fa-caret-right caret ${css.caret_tv}` : `fa fa-caret-down caret ${css.caret_tv}`
+      caret.className = list.style.display === 'none' ? `fas fa-caret-right caret ${css.caret_tv}` : `fas fa-caret-down caret ${css.caret_tv}`
       label.onclick = function () {
         self.expand(keyPath)
       }
@@ -120,7 +120,7 @@ class TreeView {
     var node = this.nodeAt(path)
     if (node) {
       node.style.display = node.style.display === 'none' ? 'block' : 'none'
-      caret.className = node.style.display === 'none' ? `fa fa-caret-right caret ${css.caret_tv}` : `fa fa-caret-down caret ${css.caret_tv}`
+      caret.className = node.style.display === 'none' ? `fas fa-caret-right caret ${css.caret_tv}` : `fas fa-caret-down caret ${css.caret_tv}`
       this.event.trigger('nodeClick', [path, node])
     }
   }

src/app/ui/card.js

@@ -16,7 +16,7 @@ module.exports = class Card {
     if (self._view.el) return self._view.el
 
     self._view.cardBody = yo`<div class=${css.cardBody}></div>`
-    self._view.arrow = yo`<i class="${css.arrow} fa fa-angle-down" onclick="${() => trigger(this)}"></i>`
+    self._view.arrow = yo`<i class="${css.arrow} fas fa-angle-down" onclick="${() => trigger(this)}"></i>`
 
     self._view.expandCollapseButton = yo`
     <div class=${css.expandCollapseButton}>${self._view.arrow}</div>`
@@ -34,9 +34,11 @@ module.exports = class Card {
     function trigger (el) {
       var body = self._view.cardBody
       var status = self._view.statusBar
-      el.classList.toggle('fa-angle-up')
+      if (el.classList) {
-      var arrow = el.classList.toggle('fa-angle-down') ? 'up' : 'down'
+        el.classList.toggle('fa-angle-up')
-      self.event.trigger('expandCollapseCard', [arrow, body, status])
+        var arrow = el.classList.toggle('fa-angle-down') ? 'up' : 'down'
+        self.event.trigger('expandCollapseCard', [arrow, body, status])
+      }
     }
 
     // HTML

src/app/ui/copy-to-clipboard.js

@@ -13,7 +13,7 @@ var css = csjs`
 `
 
 module.exports = function copyToClipboard (getContent, tip = 'Copy value to clipboard', icon = 'fa-clipboard') {
-  var copyIcon = yo`<i title="${tip}" class="${css.copyIcon} fa ${icon}" aria-hidden="true"></i>`
+  var copyIcon = yo`<i title="${tip}" class="${css.copyIcon} far ${icon}" aria-hidden="true"></i>`
   copyIcon.onclick = (event) => {
     event.stopPropagation()
     var copiableContent

src/app/ui/draggableContent.js

@@ -44,9 +44,9 @@ module.exports =
       <div>
           <div class="${css.headerDraggableModal} title" title=${title}><span title="${title}" >${title}</span><span title="${url}" > - ${url}</span>
             <div class=${css.modalActions}>
-              <i onclick=${() => { this.minimize() }} class="fa fa-window-minimize ${css.modalAction}"></i>
+              <i onclick=${() => { this.minimize() }} class="fas fa-window-minimize ${css.modalAction}"></i>
-              <i onclick=${() => { this.maximise() }} class="fa fa-window-maximize ${css.modalAction}"></i>
+              <i onclick=${() => { this.maximise() }} class="fas fa-window-maximize ${css.modalAction}"></i>
-              <i onclick=${() => { this.close() }} class="fa fa-window-close-o ${css.modalAction}"></i>
+              <i onclick=${() => { this.close() }} class="fas fa-window-close-o ${css.modalAction}"></i>
             </div>
           </div>
         </div>

src/app/ui/dropdown.js

@@ -41,7 +41,7 @@ class Dropdown {
     self._view.selected = yo`
       <div class=${css.selectbox}>
         <span class=${css.selected}> [${self.data.selected.length}] ${self.data.selected.join(', ')}</span>
-        <i class="${css.icon} fa fa-caret-down"></i>
+        <i class="${css.icon} fas fa-caret-down"></i>
       </div>
     `
     self._view.el = yo`

src/app/ui/landing-page/landing-page.js

@@ -250,7 +250,7 @@ export class LandingPage extends BaseApi {
             <h4>Featured Plugins</h4>
             <p class="mb-1 ${css.text}" onclick=${() => { startPipeline() }}>Pipeline</p>
             <p class="mb-1 ${css.text}" onclick=${() => { startDebugger() }}>Debugger</p>
-            <p class="mb-1"><button onclick=${() => { startPluginManager() }} class="btn btn-sm btn-secondary ${css.seeAll}">See all Plugins <i class="fa fa-plug" ></i></button></p>
+            <p class="mb-1"><button onclick=${() => { startPluginManager() }} class="btn btn-sm btn-secondary ${css.seeAll}">See all Plugins <i class="fas fa-plug" ></i></button></p>
           </div>
           <div class="resources">
             <h4>Resources</h4>

src/app/ui/modaldialog.js

@@ -122,7 +122,7 @@ function html (opts) {
     <div class="${css['modalContent']} bg-light text-secondary ${opts.class}">
       <div class="${css['modalHeader']}">
         <h3></h3>
-        <i id="modal-close" title="Close" class="fa fa-times ${css['modalClose']}" aria-hidden="true"></i>
+        <i id="modal-close" title="Close" class="fas fa-times ${css['modalClose']}" aria-hidden="true"></i>
       </div>
       <div class="${css['modalBody']}"> -
       </div>

src/app/ui/renderer.js

@@ -89,7 +89,7 @@ Renderer.prototype.error = function (message, container, opt) {
 
   var $pre = $(opt.useSpan ? yo`<span></span>` : yo`<pre></pre>`).html(message)
 
-  var $error = $(yo`<div class="sol ${opt.type}"><div class="close"><i class="fa fa-close"></i></div></div>`).prepend($pre)
+  var $error = $(yo`<div class="sol ${opt.type}"><div class="close"><i class="fas fa-times"></i></div></div>`).prepend($pre)
   $(container).append($error)
 
   $error.click((ev) => {

src/multiParamManager.js

@@ -128,7 +128,7 @@ class MultiParamManager {
 // or do we need to only do this in 1 place - I have a feeling that this will happen in multiple places
 
     this.contractActionsContainerSingle = yo`<div class="${css.contractActionsContainerSingle}" >
-      <button onclick=${() => { onClick() }} class="${css.instanceButton} btn btn-sm">${title}</button>${this.basicInputField}<i class="fa fa-angle-down ${css.methCaret}" onclick=${() => { this.switchMethodViewOn() }} title=${title} ></i>
+      <button onclick=${() => { onClick() }} class="${css.instanceButton} btn btn-sm">${title}</button>${this.basicInputField}<i class="fas fa-angle-down ${css.methCaret}" onclick=${() => { this.switchMethodViewOn() }} title=${title} ></i>
       </div>`
 
     this.multiFields = this.createMultiFields()
@@ -148,7 +148,7 @@ class MultiParamManager {
       <div class="${css.contractActionsContainerMultiInner} text-dark" >
         <div onclick=${() => { this.switchMethodViewOff() }} class="${css.multiHeader}">
           <div class="${css.multiTitle}">${title}</div>
-          <i class='fa fa-angle-up ${css.methCaret}'></i>
+          <i class='fas fa-angle-up ${css.methCaret}'></i>
         </div>
         ${this.multiFields}
         <div class="${css.group} ${css.multiArg}" >
@@ -168,7 +168,7 @@ class MultiParamManager {
               } else {
                 return encodeObj.data
               }
-            }, 'Encode values of input fields & copy to clipboard', 'fa-briefcase')}
+            }, 'Encode values of input fields & copy to clipboard', 'fa-clipboard')}
         </div>
       </div>
     </div>`

src/persmission-handler.js

@@ -141,7 +141,7 @@ export class PermissionHandler {
     <section class="${css.permission}">
       <article class="${css.images}">
         <img src="${from.icon}" />
-        <i class="fa fa-arrow-right"></i>
+        <i class="fas fa-arrow-right"></i>
         <img src="${to.icon}" />
       </article>
       

src/universal-dapp-ui.js

@@ -69,7 +69,7 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address
   var shortAddress = helper.shortenAddress(address)
   var title = yo`
     <div class="${css.title} alert alert-secondary">
-      <button class="btn ${css.titleExpander}" onclick="${(e) => { toggleClass(e) }}"><i class="fa fa-caret-right" aria-hidden="true"></i></button>
+      <button class="btn ${css.titleExpander}" onclick="${(e) => { toggleClass(e) }}"><i class="fas fa-angle-right" aria-hidden="true"></i></button>
       <div class="input-group ${css.nameNbuts}">
         <div class="${css.titleText} input-group-prepend"><span class="input-group-text ${css.spanTitleText}"> ${contractName} at ${shortAddress} (${context})</span></div>
         <div class="btn-group">
@@ -78,7 +78,7 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address
       </div>
   </div>`
 
-  var close = yo`<button class="${css.udappClose} btn btn-secondary" onclick=${remove}><i class="${css.closeIcon} fa fa-close" aria-hidden="true"></i></button>`
+  var close = yo`<button class="${css.udappClose} btn btn-secondary" onclick=${remove}><i class="${css.closeIcon} fas fa-times" aria-hidden="true"></i></button>`
   title.querySelector('.btn-group').appendChild(close)
 
   var contractActionsWrapper = yo`
@@ -93,8 +93,8 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address
   function toggleClass (e) {
     $(instance).toggleClass(`${css.hidesub}`)
     // e.currentTarget.querySelector('i')
-    e.currentTarget.querySelector('i').classList.toggle(`fa-caret-right`)
+    e.currentTarget.querySelector('i').classList.toggle(`fa-angle-right`)
-    e.currentTarget.querySelector('i').classList.toggle(`fa-caret-down`)
+    e.currentTarget.querySelector('i').classList.toggle(`fa-angle-down`)
   }
 
   instance.appendChild(title)