fix logs crashing by switching to virtual list

- npm: added `react-virtualized`
- npm: added `highlight.js`

at the moment I disabled highlighting the logs since it breaks the UI. The horizontal scrollbar isn't styled. This can be probably be fixed by following [this discussion](bvaughn/react-virtualized#692)

app/pages/BlockchainLogs/BlockchainLogs.js

@@ -3,7 +3,9 @@
 import React from 'react'
 import { inject, observer } from 'mobx-react'
 import Flexbox from 'flexbox-react'
-import Highlight from 'react-highlight'
+import List from 'react-virtualized/dist/commonjs/List'
+import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer'
+// import hljs from 'highlight.js'
 
 import Layout from '../../components/Layout'
 import BlockchainLogsStore from '../../stores/blockchainLogsStore'
@@ -15,21 +17,89 @@ type Props = {
 @inject('blockchainLogsStore')
 @observer
 class BlockchainLogs extends React.Component<Props> {
+  componentDidMount() {
+    // eslint-disable-next-line max-len
+    setTimeout(this.scrollToBottom, 0) // [AdGo] 17/01/2019 - not sure why the timeout needed, but it doesn't work without it
+  }
+
+  componentDidUpdate() {
+    if (!this.dontAutoScrollToBottom) {
+      this.scrollToBottom()
+    }
+  }
+  dontAutoScrollToBottom = false
+  onScroll = ({ clientHeight, scrollHeight, scrollTop }) => {
+    console.log('onScroll', 'scrollTop', scrollTop)
+    if (scrollTop === 0) { // avoid disabling scroll on initial render
+      return
+    }
+    if (this.didScrollToBottom(clientHeight, scrollHeight, scrollTop)) {
+      this.dontAutoScrollToBottom = false
+    } else {
+      this.dontAutoScrollToBottom = true
+    }
+  }
+  didScrollToBottom(clientHeight, scrollHeight, scrollTop) {
+    // eslint-disable-next-line max-len
+    return clientHeight + scrollTop + 15 >= scrollHeight // [AdGo] 17/01/2019 - there's an offset of 15 when scrolling to the bottom, don't know why exactly 15
+  }
+  scrollToBottom = () => {
+    const { logs } = this.props.blockchainLogsStore
+    if (this.List) {
+      this.List.scrollToRow(logs.length)
+    }
+  }
+  rowRenderer = ({
+    key, // Unique key within array of rows
+    index, // Index of row within collection
+    style, // Style object to be applied to row (to position it)
+  }) => {
+    const { logs } = this.props.blockchainLogsStore
+    return (
+      <div
+        key={key}
+        style={style}
+        className="log-list-item"
+      >
+        {logs[index]}
+      </div>
+    )
+  }
+  onRowsRendered = () => {
+    // This breaks the UI, disabled for now
+    // if (this.container) {
+    //   hljs.highlightBlock(this.container)
+    // }
+  }
   render() {
-    const { blockchainLogsStore } = this.props
+    const { logs } = this.props.blockchainLogsStore
     return (
       <Layout className="blockchain-logs">
         <Flexbox className="page-title">
           <h1>Blockchain Logs</h1>
         </Flexbox>
-        <Flexbox flexDirection="column" className="contract-code form-row">
-          <Highlight className="shell-session">
-            {blockchainLogsStore.logs.join('')}
-          </Highlight>
-        </Flexbox>
+        <div className="contract-code form-row" ref={el => { this.container = el }}>
+          <AutoSizer>
+            {({ width, height }) => (
+              <List
+                ref={el => { this.List = el }}
+                width={width}
+                height={height}
+                rowCount={logs.length}
+                rowHeight={20}
+                rowRenderer={this.rowRenderer}
+                onRowsRendered={this.onRowsRendered}
+                scrollToAlignment="end"
+                onScroll={this.onScroll}
+                className="shell-session"
+              />
+                )}
+          </AutoSizer>
+        </div>
       </Layout>
     )
   }
 }
 
 export default BlockchainLogs
+

app/pages/BlockchainLogs/BlockchainLogs.scss

@@ -1,7 +1,17 @@
 .blockchain-logs {
-  .contract-code.form-row {
-    pre {
-      height: 600px;
-    }
+  .form-row {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
+  .ReactVirtualized__Grid__innerScrollContainer {
+    overflow-x: auto !important;
+  }
+  .log-list-item {
+    white-space: nowrap;
+    width: auto !important;
+  }
+  .ReactVirtualized__Grid.ReactVirtualized__List {
+    @extend .pre;
   }
 }

app/pages/DeployContract/DeployContract.js

@@ -212,7 +212,7 @@ class DeployContract extends Component<Props> {
     } = this.props
 
     return (
-      <Layout>
+      <Layout className="deploy-contract-page">
         <Flexbox flexDirection="column" className="send-tx-container">
           <Flexbox flexDirection="column" className="page-title">
             <h1>Upload a contract to the ACS</h1>

app/pages/DeployContract/_DeployContract.scss

@@ -1,21 +1,4 @@
-pre {
-  border-radius: 2px;
-  background-color: $dark-grey;
-  border: 1px solid $border-color;
-  padding: 10px 15px;
+.deploy-contract-page pre {
   height: 200px;
   overflow: auto;
-  line-height: 1.1rem;
-  font-size: 0.8rem;
-
-  &::-webkit-resizer { background: transparent; }
-  &::-webkit-scrollbar { width: 27px; }
-  &::-webkit-scrollbar-track { background-color: transparent; }
-  &::-webkit-scrollbar-thumb {
-    background-color: $button-grey;
-    border-radius: 15px;
-    border: 9px solid rgba(0, 0, 0, 0);
-    background-clip: padding-box;
-  }
-  &::-webkit-scrollbar-corner { background: transparent; }
-}
+}

app/styles/_Shared.scss

@@ -54,3 +54,24 @@ h5 { font-size: 18px; color: $light-white; font-weight: 300; }
 .bold { font-weight: 500 !important; }
 
 .display-none { display: none !important; }
+
+pre,
+.pre {
+  border-radius: 2px;
+  background-color: $dark-grey;
+  border: 1px solid $border-color;
+  padding: 10px 15px;
+  line-height: 1.1rem;
+  font-size: 0.8rem;
+
+  &::-webkit-resizer { background: transparent; }
+  &::-webkit-scrollbar { width: 27px; }
+  &::-webkit-scrollbar-track { background-color: transparent; }
+  &::-webkit-scrollbar-thumb {
+    background-color: $button-grey;
+    border-radius: 15px;
+    border: 9px solid rgba(0, 0, 0, 0);
+    background-clip: padding-box;
+  }
+  &::-webkit-scrollbar-corner { background: transparent; }
+}

package.json

@@ -209,6 +209,7 @@
     "electron-context-menu": "^0.9.1",
     "electron-debug": "^1.5.0",
     "flexbox-react": "^4.4.0",
+    "highlight.js": "^9.13.1",
     "history": "^4.7.2",
     "js-base64": "^2.4.3",
     "lodash": "^4.17.5",
@@ -239,6 +240,7 @@
     "react-switch": "^2.3.2",
     "react-table": "^6.8.6",
     "react-toastify": "^4.5.1",
+    "react-virtualized": "^9.21.0",
     "semver-compare": "^1.0.0",
     "source-map-support": "^0.5.3",
     "sweetalert": "^2.1.0"