Merge pull request #906 from ethereum/FE-icons

Display icons based on file types.

apps/remix-ide-e2e/src/commands/testFunction.ts

@@ -7,7 +7,9 @@ class TestFunction extends EventEmitter {
   command (this: NightwatchBrowser, txHash: string, expectedValue: NightwatchTestFunctionExpectedInput): NightwatchBrowser {
     const browser = this.api
     const logs = {}
-    const setLog = (index: number, value: string) => { logs[Object.keys(logs)[index]] = typeof value === 'string' ? value.trim() : value }
+    const setLog = (index: number, value: string) => {
+      logs[Object.keys(logs)[index]] = typeof value === 'string' ? value.indexOf('Copy value to clipboard') ? value.split('\n').shift().trim() : value.trim() : value
+    }
 
     browser
       .waitForElementVisible(`[data-id="block_tx${txHash}"]`)
@@ -45,7 +47,15 @@ class TestFunction extends EventEmitter {
 
     browser.perform(() => {
       Object.keys(expectedValue).forEach(key => {
-        const equal: boolean = deepequal(logs[key], expectedValue[key])
+        let equal = false
+
+        try {
+          const receivedValue = JSON.parse(logs[key])
+
+          equal = deepequal(receivedValue, expectedValue[key])
+        } catch (err) {
+          equal = deepequal(logs[key], expectedValue[key])
+        }
 
         if (!equal) {
           browser.assert.fail(`Expected ${JSON.stringify(expectedValue[key])} but got ${JSON.stringify(logs[key])}`)

apps/remix-ide/src/index.html

@@ -106,5 +106,6 @@
 			}
 		</script>
 		<script src="runtime.js" type="module"></script><script src="polyfills.js" type="module"></script><script src="vendor.js" type="module"></script>
+		<script src="https://kit.fontawesome.com/41dd021e94.js" crossorigin="anonymous"></script>
 	</body>
 </html>

apps/remix-ide/src/lib/helper.js

@@ -68,7 +68,18 @@ module.exports = {
     const hexValue = hash.slice(2, hash.length)
     return this.is0XPrefixed(hash) && /^[0-9a-fA-F]{64}$/.test(hexValue)
   },
-  find: find
+  find: find,
+  getPathIcon (path) {
+    return path.endsWith('.txt')
+      ? 'far fa-file-alt' : path.endsWith('.md')
+        ? 'far fa-file-alt' : path.endsWith('.sol')
+          ? 'fak fa-solidity-mono' : path.endsWith('.js')
+            ? 'fab fa-js' : path.endsWith('.json')
+              ? 'fas fa-brackets-curly' : path.endsWith('.vy')
+                ? 'fak fa-vyper-mono' : path.endsWith('.lex')
+                  ? 'fak fa-lexon' : path.endsWith('.contract')
+                    ? 'fab fa-ethereum' : 'far fa-file'
+  }
 }
 
 function findDeep (object, fn, found = { break: false, value: undefined }) {

libs/remix-ui/file-explorer/src/lib/file-explorer.tsx

@@ -901,6 +901,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
         ? 'bg-secondary' : state.mouseOverElement === file.path
           ? 'bg-light border' : (state.focusContext.element === file.path) && (state.focusEdit.element !== file.path)
             ? 'bg-light border' : ''
+    const icon = helper.getPathIcon(file.path)
 
     if (file.isDirectory) {
       return (
@@ -979,7 +980,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
               e.stopPropagation()
               handleContextMenuFile(e.pageX, e.pageY, file.path, e.target.textContent)
             }}
-            icon='far fa-file'
+            icon={icon}
             labelClass={labelClass}
             onMouseOver={(e) => {
               e.stopPropagation()