Refactoring Transfer Modal (#3705)

* Better Token Select in Transfer > Details

* Better Autocomplete

* Crete MobX store for Transfer modal

* Remove unused var

* Update Webpack Conf

* Small changes...

* Optional gas in MethodDecoding + better input

* New Contract `getAll` method // TxList Row component

* Method Decoding selections

* Rename `getAll` to `getAllLogs`

js/src/ui/TxList/txList.js

@@ -29,79 +29,49 @@ import Store from './store';
 
 import styles from './txList.css';
 
-@observer
-class TxList extends Component {
+export class TxRow extends Component {
   static contextTypes = {
     api: PropTypes.object.isRequired
-  }
+  };
 
   static propTypes = {
+    tx: PropTypes.object.isRequired,
     address: PropTypes.string.isRequired,
-    hashes: PropTypes.oneOfType([
-      PropTypes.array,
-      PropTypes.object
-    ]).isRequired,
-    isTest: PropTypes.bool.isRequired
-  }
+    isTest: PropTypes.bool.isRequired,
 
-  store = new Store(this.context.api);
-
-  componentWillMount () {
-    this.store.loadTransactions(this.props.hashes);
-  }
-
-  componentWillUnmount () {
-    this.store.unsubscribe();
-  }
-
-  componentWillReceiveProps (newProps) {
-    this.store.loadTransactions(newProps.hashes);
-  }
+    block: PropTypes.object
+  };
 
   render () {
+    const { tx, address, isTest } = this.props;
+
     return (
-      <table className={ styles.transactions }>
-        <tbody>
-          { this.renderRows() }
-        </tbody>
-      </table>
+      <tr>
+        { this.renderBlockNumber(tx.blockNumber) }
+        { this.renderAddress(tx.from) }
+        <td className={ styles.transaction }>
+          { this.renderEtherValue(tx.value) }
+          <div>⇒</div>
+          <div>
+            <a
+              className={ styles.link }
+              href={ txLink(tx.hash, isTest) }
+              target='_blank'>
+              { `${tx.hash.substr(2, 6)}...${tx.hash.slice(-6)}` }
+            </a>
+          </div>
+        </td>
+        { this.renderAddress(tx.to) }
+        <td className={ styles.method }>
+          <MethodDecoding
+            historic
+            address={ address }
+            transaction={ tx } />
+        </td>
+      </tr>
     );
   }
 
-  renderRows () {
-    const { address, isTest } = this.props;
-
-    return this.store.sortedHashes.map((txhash) => {
-      const tx = this.store.transactions[txhash];
-
-      return (
-        <tr key={ tx.hash }>
-          { this.renderBlockNumber(tx.blockNumber) }
-          { this.renderAddress(tx.from) }
-          <td className={ styles.transaction }>
-            { this.renderEtherValue(tx.value) }
-            <div>⇒</div>
-            <div>
-              <a
-                className={ styles.link }
-                href={ txLink(tx.hash, isTest) }
-                target='_blank'>
-                { `${tx.hash.substr(2, 6)}...${tx.hash.slice(-6)}` }
-              </a>
-            </div>
-          </td>
-          { this.renderAddress(tx.to) }
-          <td className={ styles.method }>
-            <MethodDecoding
-              historic
-              address={ address }
-              transaction={ tx } />
-          </td>
-        </tr>
-      );
-    });
-  }
-
   renderAddress (address) {
     const { isTest } = this.props;
 
@@ -148,8 +118,8 @@ class TxList extends Component {
   }
 
   renderBlockNumber (_blockNumber) {
+    const { block } = this.props;
     const blockNumber = _blockNumber.toNumber();
-    const block = this.store.blocks[blockNumber];
 
     return (
       <td className={ styles.timestamp }>
@@ -160,6 +130,66 @@ class TxList extends Component {
   }
 }
 
+@observer
+class TxList extends Component {
+  static contextTypes = {
+    api: PropTypes.object.isRequired
+  }
+
+  static propTypes = {
+    address: PropTypes.string.isRequired,
+    hashes: PropTypes.oneOfType([
+      PropTypes.array,
+      PropTypes.object
+    ]).isRequired,
+    isTest: PropTypes.bool.isRequired
+  }
+
+  store = new Store(this.context.api);
+
+  componentWillMount () {
+    this.store.loadTransactions(this.props.hashes);
+  }
+
+  componentWillUnmount () {
+    this.store.unsubscribe();
+  }
+
+  componentWillReceiveProps (newProps) {
+    this.store.loadTransactions(newProps.hashes);
+  }
+
+  render () {
+    return (
+      <table className={ styles.transactions }>
+        <tbody>
+          { this.renderRows() }
+        </tbody>
+      </table>
+    );
+  }
+
+  renderRows () {
+    const { address, isTest } = this.props;
+
+    return this.store.sortedHashes.map((txhash) => {
+      const tx = this.store.transactions[txhash];
+      const blockNumber = tx.blockNumber.toNumber();
+      const block = this.store.blocks[blockNumber];
+
+      return (
+        <TxRow
+          key={ tx.hash }
+          tx={ tx }
+          block={ block }
+          address={ address }
+          isTest={ isTest }
+        />
+      );
+    });
+  }
+}
+
 function mapStateToProps (state) {
   const { isTest } = state.nodeStatus;