Merge pull request #9 from fergarrui/add-storage-viewer-component

add storage viewer component

Author: fergarrui

src/client/components/InnerTab/InnerTab.js

@@ -43,7 +43,7 @@ class InnerTab extends React.Component {
 
   render() {
 
-    const { data, contractName, contractCode, contractPath, disassemblerResponse, graphResponse, debuggerResponse } = this.props;
+    const { data, contractName, contractCode, contractPath, disassemblerResponse, graphResponse, debuggerResponse, storageResponse } = this.props;
     const { currentInnerTabIndex } = this.state;
 
     return (
@@ -74,6 +74,7 @@ class InnerTab extends React.Component {
                 disassemblerResponse={disassemblerResponse}
                 debuggerResponse={debuggerResponse}
                 graphResponse={graphResponse}
+                storageResponse={storageResponse}
              />
             )
           })}

src/client/components/InnerTab/InnerTabPanel/InnerTabPanel.js

@@ -3,15 +3,15 @@ import React from 'react';
 import TransactionDebugger from '../../TransactionDebugger/TransactionDebugger';
 import Disassembler from '../../Disassembler/Disassembler';
 import ControlFlowGraph from '../../ControlFlowGraph/ControlFlowGraph';
-import Storage from '../../Storage/Storage';
+import StorageViewer from '../../StorageViewer/StorageViewer';
 
 import styles from './InnerTabPanel.scss';
 
 import classnames from 'classnames/bind';
 
 const cx = classnames.bind(styles);
 
-const InnerTabPanel = ({ type, active, contractName, contractCode, contractPath, debuggerResponse, graphResponse, disassemblerResponse }) => {
+const InnerTabPanel = ({ type, active, contractName, contractCode, contractPath, debuggerResponse, graphResponse, disassemblerResponse, storageResponse }) => {
   const tabPanelClasses = cx({
     'inner-tab-panel': true,
     'inner-tab-panel--active': !!active,
@@ -39,9 +39,8 @@ const InnerTabPanel = ({ type, active, contractName, contractCode, contractPath,
           graphResponse={graphResponse}
         />
       }
-      {type === 'View Storage' &&
-        <Storage
-        />
+      {type === 'Storage Viewer' &&
+        <StorageViewer storageResponse={storageResponse} />
       }
     </div>
   );

src/client/components/SettingsBar/SettingsBar.js

@@ -17,7 +17,6 @@ class SettingsBar extends React.Component {
     }
 
     this.handleInputChange = this.handleInputChange.bind(this);
-    this.handleKeyUp = this.handleKeyUp.bind(this);
   }
 
   handleInputChange(event) {    
@@ -31,16 +30,6 @@ class SettingsBar extends React.Component {
     localStorage.setItem(name, value);
   }
 
-  handleKeyUp(event) {    
-    const { onSaveButtonClick } = this.props;
-
-    if(event.keyCode !== 13) {
-      return;
-    }
-
-    onSaveButtonClick();
-  }
-
   handlClearClick() {
     localStorage.clear();
 

src/client/components/Storage/Storage.js

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import styles from './StorageViewer.scss';
+
+const StorageViewer = ({ storageResponse }) => {
+
+  return (
+    <div className={styles['storage']}>
+      <div className={styles['storage__header']}>
+        <div className={styles['storage__header__item']}>
+          <span>
+            Slot
+          </span>
+        </div>
+        <div className={styles['storage__header__item']}>
+          <span>
+            Value
+          </span>
+        </div>
+      </div>
+      <div className={styles['storage__body']}>
+        {
+          Object.entries(storageResponse.storage).map(([key, val]) => {
+            return (
+              <div className={styles['storage__body__item']} key={key}>
+                <div className={styles['storage__body__item__col']}>
+                  <span>{key}</span>
+                </div>
+                <div className={styles['storage__body__item__col']}>
+                  <span>{val.value}</span>
+                </div>
+              </div>
+            )    
+          })
+        }
+      </div>
+    
+    </div>
+  )
+}
+
+export default StorageViewer;

src/client/components/Storage/Storage.scss

@@ -0,0 +1,47 @@
+.storage {
+  padding: 15px;
+
+  &__header {
+    display: flex;
+    justify-content: space-around;
+    border-bottom: 1px dotted $color-green;
+    
+    &__item {
+      flex: 0 1 50%;
+      padding: 20px;
+      text-align: center;
+      
+      &:first-of-type {
+        border-right: 1px dotted $color-green;
+      }
+
+      span {
+        text-transform: uppercase;
+        color: $color-white;
+      }
+    }
+  }
+
+  &__body {
+
+    &__item {
+      display: flex;
+      padding: 0 10px;
+      border-bottom: 1px dotted $color-green;
+
+      &__col {
+        flex: 0 1 50%;
+        padding: 20px 10px;
+        word-break: break-all;
+
+        span {
+          color: $color-white;
+        }
+              
+        &:first-of-type {
+          border-right: 1px dotted $color-green;
+        }
+      }
+    }
+  }
+}

src/client/components/StorageViewer/StorageViewer.js

@@ -16,6 +16,7 @@ import Form from '../../Form/Form';
 
 import styles from './TabPanel.scss';
 import fade from '../../../styles/transitions/fade.scss';
+import scale from '../../../styles/transitions/scale.scss';
 
 import classnames from 'classnames/bind';
 
@@ -114,7 +115,7 @@ class TabPanel extends React.Component {
       });
     }
 
-    if(type === 'View Storage') {
+    if(type === 'Storage Viewer') {
       this.setState({
         storageResponse: response,
       });
@@ -135,16 +136,7 @@ class TabPanel extends React.Component {
     this.props.getErrorMessage(message);
   }
 
-  // handleInputChange(event) {
-  //   const { value } = event.target;
-
-  //   this.setState({
-  //     inputValue: value,
-  //     parameter: value,
-  //   });
-  // }
-
-  handleInputSubmit() {
+  handleTransactionFormSubmit() {
     const { name, path, code } = this.props;
 
     const params = {
@@ -174,7 +166,7 @@ class TabPanel extends React.Component {
       endBlock: encodeURIComponent(this.state.endBlock)
     }
 
-    this.fetchData(this.getUrl('storage', params), 'View Storage');
+    this.fetchData(this.getUrl(`storage/${this.state.contractAddress}/`, params), 'Storage Viewer');
 
     document.removeEventListener('click', this.handleOutsideClick);
   }
@@ -276,7 +268,7 @@ class TabPanel extends React.Component {
 
     const inputTypes = [
       {
-        name: 'Address',
+        name: 'contractAddress',
         placeholder: 'Enter contract address'
       },
       {
@@ -337,19 +329,26 @@ class TabPanel extends React.Component {
           </div>
         </div>
         <div className={styles['tab-panel__right']}>
-           <InnerTab 
-              data={tabs} 
-              contractName={name}
-              contractCode={code}
-              contractPath={path}
-              graphResponse={graphResponse}
-              debuggerResponse={debuggerResponse}
-              disassemblerResponse={disassemblerResponse}
-              storageResponse={storageResponse}
-              onMenuItemIconClick={this.handleMenuItemIconClick} 
+          <CSSTransitionGroup
+            transitionName={scale}
+            transitionAppear={true}
+            trnasitionEnterTimeout={300}
+            transitionLeaveTimeout={300}
             >
-            {children}
-          </InnerTab>
+              <InnerTab 
+                data={tabs} 
+                contractName={name}
+                contractCode={code}
+                contractPath={path}
+                graphResponse={graphResponse}
+                debuggerResponse={debuggerResponse}
+                disassemblerResponse={disassemblerResponse}
+                storageResponse={storageResponse}
+                onMenuItemIconClick={this.handleMenuItemIconClick} 
+              >
+              {children}
+            </InnerTab>
+          </CSSTransitionGroup>
         </div>
         <CSSTransitionGroup
           transitionName={fade}
@@ -366,8 +365,8 @@ class TabPanel extends React.Component {
                   inputTypes={[{ name: 'transactionHash', placeholder: 'Transaction Hash' }]}
                   buttonValue='Debug'
                   onInputChange={(e) => this.handleFormInputChange(e)}
-                  onInputKeyUp={() => this.handleInputSubmit()}
-                  onSubmitForm={() => this.handleInputSubmit()}
+                  onInputKeyUp={() => this.handleTransactionFormSubmit()}
+                  onSubmitForm={() => this.handleTransactionFormSubmit()}
                   />
               </Modal>
           }
@@ -388,6 +387,7 @@ class TabPanel extends React.Component {
                   inputTypes={inputTypes}
                   onInputChange={(e) => this.handleFormInputChange(e)} 
                   onSubmitForm={() => this.handleSubmitViewStorageForm()}
+                  onInputKeyUp={() => this.handleSubmitViewStorageForm()}
                   />
               </Modal>
           }

src/client/components/StorageViewer/StorageViewer.scss

@@ -1,5 +1,6 @@
 .top-navbar {
   display: flex;
+  align-items: center;
   width: 100%;
   position: fixed;
   top: 0;