Watch for ETH balance update

src/components/CurrencyInputPanel/index.js

@@ -32,6 +32,7 @@ class CurrencyInputPanel extends Component {
     title: PropTypes.string,
     description: PropTypes.string,
     extraText: PropTypes.string,
+    web3: PropTypes.object.isRequired,
   };
 
   state = {
@@ -40,12 +41,33 @@ class CurrencyInputPanel extends Component {
     selectedTokenAddress: '',
   };
 
+  getBalance() {
+    const {
+      balance,
+      web3,
+    } = this.props;
+
+    const { selectedTokenAddress } = this.state;
+
+    if (!selectedTokenAddress) {
+      return '';
+    }
+
+    const bn = balance[selectedTokenAddress];
+
+    if (!bn) {
+      return '';
+    }
+
+    return `Balance: ${web3.utils.fromWei(bn, 'ether')}`;
+  }
+
   createTokenList = () => {
     let tokens = this.props.tokenAddresses.addresses;
-    let tokenList = [ { value: 'ETH', label: 'ETH', address: 'ETH', clearableValue: false } ];
+    let tokenList = [ { value: 'ETH', label: 'ETH', address: 'ETH' } ];
 
     for (let i = 0; i < tokens.length; i++) {
-      let entry = { value: '', label: '', clearableValue: false }
+      let entry = { value: '', label: '' }
       entry.value = tokens[i][0];
       entry.label = tokens[i][0];
       entry.address = tokens[i][1];
@@ -54,7 +76,7 @@ class CurrencyInputPanel extends Component {
     }
 
     return tokenList;
-  }
+  };
 
   renderTokenList() {
     const tokens = this.createTokenList();
@@ -125,7 +147,8 @@ class CurrencyInputPanel extends Component {
     const {
       title,
       description,
-      extraText,
+      balance,
+      web3,
     } = this.props;
 
     const { selectedTokenAddress } = this.state;
@@ -138,7 +161,9 @@ class CurrencyInputPanel extends Component {
               <span className="currency-input-panel__label">{title}</span>
               <span className="currency-input-panel__label-description">{description}</span>
             </div>
-            <span className="currency-input-panel__extra-text">{extraText}</span>
+            <span className="currency-input-panel__extra-text">
+              {this.getBalance()}
+            </span>
           </div>
           <div className="currency-input-panel__input-row">
             <input
@@ -180,6 +205,7 @@ export default connect(
   state => ({
     tokenAddresses: state.web3.tokenAddresses,
     balance: state.web3.balance,
+    web3: state.web3.web3,
   }),
   dispatch => ({
     updateField: (name, value) => dispatch(updateField({ name, value })),

src/components/Watcher/index.js

+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import { updateBalance } from '../../ducks/web3';
+
+class Watcher extends Component {
+  state = {
+    watchlist: {},
+  };
+
+  componentWillMount() {
+    this.startWatching();
+  }
+
+  componentWillUnmount() {
+  }
+
+  add(address) {
+    const { watchlist } = this.state;
+    this.setState({
+      ...watchlist,
+      [address]: true,
+    });
+  }
+
+  remove(address) {
+    const { watchlist } = this.state;
+    this.setState({
+      ...watchlist,
+      [address]: false,
+    });
+  }
+
+  startWatching() {
+    if (this.interval) {
+      clearInterval(this.interval);
+      return;
+    }
+
+    this.interval = setInterval(() => {
+      this.props.updateBalance();
+      Object.keys(this.state.watchlist).forEach(address => {
+
+      });
+    }, 15000);
+  }
+
+  stopWatching() {
+    if (this.interval) {
+      clearInterval(this.interval);
+    }
+  }
+
+  render() {
+    return <noscript />;
+  }
+
+}
+
+export default connect(
+  null,
+  dispatch => ({
+    updateBalance: () => dispatch(updateBalance()),
+  }),
+)(Watcher);

src/ducks/web3.js

@@ -36,6 +36,8 @@ export const initialize = () => dispatch => {
       payload: web3,
     });
     dispatch(updateCurrentAddress());
+
+    setInterval(() => dispatch(updateBalance()), 15000)
   }
 };
 
@@ -55,7 +57,9 @@ export const updateCurrentAddress = () => (dispatch, getState) => {
       type: UPDATE_CURRENT_ADDRESS,
       payload: accounts[0],
     });
-  })
+
+    dispatch(updateBalance());
+  });
 };
 
 export const updateBalance = () => (dispatch, getState) => {
@@ -76,7 +80,7 @@ export const updateBalance = () => (dispatch, getState) => {
         address: 'ETH',
         balance: data,
       }
-    })
+    });
   });
 };
 

src/pages/App.js

@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
 import { BrowserRouter, Switch, Route } from 'react-router-dom';
 import { AnimatedSwitch } from 'react-router-transition';
 import { initialize } from '../ducks/web3'
+import Watcher from '../components/Watcher';
 import Swap from './Swap';
 import Send from './Send';
 import Pool from './Pool';
@@ -16,19 +17,22 @@ class App extends Component {
 
   render() {
     return (
-      <BrowserRouter>
-        <AnimatedSwitch
-          atEnter={{ opacity: 0 }}
-          atLeave={{ opacity: 0 }}
-          atActive={{ opacity: 1 }}
-          className="app__switch-wrapper"
-        >
-          <Route exact path="/swap" component={Swap} />
-          <Route exact path="/send" component={Send} />
-          <Route exact path="/pool" component={Pool} />
-          <Route component={Swap} />
-        </AnimatedSwitch>
-      </BrowserRouter>
+      <div style={{ width: '100%', height: '100%' }}>
+        <Watcher />
+        <BrowserRouter>
+          <AnimatedSwitch
+            atEnter={{ opacity: 0 }}
+            atLeave={{ opacity: 0 }}
+            atActive={{ opacity: 1 }}
+            className="app__switch-wrapper"
+          >
+            <Route exact path="/swap" component={Swap} />
+            <Route exact path="/send" component={Send} />
+            <Route exact path="/pool" component={Pool} />
+            <Route component={Swap} />
+          </AnimatedSwitch>
+        </BrowserRouter>
+      </div>
     );
   }
 }